static/src/whiteboard.js
/**
     * Initialize the toolbar of the whiteboard
     * This method should only be used in the initialization
     * process of the whiteboard and should not be called outside
     * the class constructor.
     */
Initialize the toolbar of the whiteboard
This method should only be used in the initialization
process of the whiteboard and should not be called outside
the class constructor.
Initialize the toolbar of the whiteboard This method should only be used in the initialization process of the whiteboard and should not be called outside the class constructor .
initializeToolbar(){
        this.toolbar = {};
        this.toolbar.element = document.createElement('div');
        this.toolbar.element.classList.add('wb-toolbar')
        this.toolbar.buttonElements = {};
        let button_types = [
            'wb-move-button',
            'wb-brush-button',
            'wb-eraser-button'
        ]
        for (let button of button_types){
            var button_element = document.createElement('div');
            button_element.classList.add(button);
            button_element.toolbar = this.toolbar;
            button_element.whiteboard = this;
            button_element.tool_type = button;
            button_element.onclick = function(e){
                var source = e.target;
                source.toolbar.buttonElements[source.toolbar.selected_tool].classList.remove('wb-button-selected');
                source.toolbar.selected_tool = source.tool_type;
                source.classList.add('wb-button-selected');
                if (source.tool_type == 'wb-eraser-button' || source.tool_type == 'wb-brush-button'){
                    source.whiteboard.canvas.classList.add('wb-canvas-cursor-mode');
                }else{
                    source.whiteboard.canvas.classList.remove('wb-canvas-cursor-mode');
                }
            }
            this.toolbar.buttonElements[button] = button_element;
            this.toolbar.element.appendChild(button_element);
        }
        this.toolbar.selected_tool = button_types[1];
        this.toolbar.buttonElements[button_types[1]].classList.add('wb-button-selected');
        this.container.appendChild(this.toolbar.element);
        var color_button = document.createElement('div');
        color_button.classList.add('wb-color-button');
        var color_circle = document.createElement('div');
        color_circle.classList.add('wb-color-circle');
        color_circle.style.backgroundColor = '#d1d1d1';
        color_button.appendChild(color_circle);
        color_button.colors = ['#d1d1d1', '#f54542', '#42a4f5', '#5af542'];
        color_button.index = 0;
        color_button.whiteboard = this;
        color_button.onclick = function(e){
            var source = e.target.className == 'wb-color-circle' ? e.target.parentElement : e.target;
            let colors = source.colors;
            source.index = (source.index + 1) % colors.length;
            source.firstChild.style.backgroundColor = colors[source.index];
            source.whiteboard.selectedColor = colors[source.index];
            if(source.whiteboard.recentPoints.length == 0){
                source.whiteboard.color = colors[source.index];
            }
        };
        this.toolbar.color_button = color_button;
        this.container.appendChild(color_button);
    }
initializeToolbar ( ) { this . toolbar = { } ; this . toolbar . element = document . createElement ( 'div' ) ; this . toolbar . element . classList . add ( 'wb-toolbar' ) this . toolbar . buttonElements = { } ; let button_types = [ 'wb-move-button' , 'wb-brush-button' , 'wb-eraser-button' ] for ( let button of button_types ) { var button_element = document . createElement ( 'div' ) ; button_element . classList . add ( button ) ; button_element . toolbar = this . toolbar ; button_element . whiteboard = this ; button_element . tool_type = button ; button_element . onclick = function ( e ) { var source = e . target ; source . toolbar . buttonElements [ source . toolbar . selected_tool ] . classList . remove ( 'wb-button-selected' ) ; source . toolbar . selected_tool = source . tool_type ; source . classList . add ( 'wb-button-selected' ) ; if ( source . tool_type == 'wb-eraser-button' || source . tool_type == 'wb-brush-button' ) { source . whiteboard . canvas . classList . add ( 'wb-canvas-cursor-mode' ) ; } else { source . whiteboard . canvas . classList . remove ( 'wb-canvas-cursor-mode' ) ; } } this . toolbar . buttonElements [ button ] = button_element ; this . toolbar . element . appendChild ( button_element ) ; } this . toolbar . selected_tool = button_types [ 1 ] ; this . toolbar . buttonElements [ button_types [ 1 ] ] . classList . add ( 'wb-button-selected' ) ; this . container . appendChild ( this . toolbar . element ) ; var color_button = document . createElement ( 'div' ) ; color_button . classList . add ( 'wb-color-button' ) ; var color_circle = document . createElement ( 'div' ) ; color_circle . classList . add ( 'wb-color-circle' ) ; color_circle . style . backgroundColor = '#d1d1d1' ; color_button . appendChild ( color_circle ) ; color_button . colors = [ '#d1d1d1' , '#f54542' , '#42a4f5' , '#5af542' ] ; color_button . index = 0 ; color_button . whiteboard = this ; color_button . onclick = function ( e ) { var source = e . target . className == 'wb-color-circle' ? e . target . parentElement : e . target ; let colors = source . colors ; source . index = ( source . index + 1 ) % colors . length ; source . firstChild . style . backgroundColor = colors [ source . index ] ; source . whiteboard . selectedColor = colors [ source . index ] ; if ( source . whiteboard . recentPoints . length == 0 ) { source . whiteboard . color = colors [ source . index ] ; } } ; this . toolbar . color_button = color_button ; this . container . appendChild ( color_button ) ; }
Initialize the toolbar of the whiteboard
 This method should only be used in the initialization
 process of the whiteboard and should not be called outside
 the class constructor.
Initialize the toolbar of the whiteboard This method should only be used in the initialization process of the whiteboard and should not be called outside the class constructor .
// Add Color Picking Button