Passed the data from the whiteboard-toolbar to the whiteboard-overlay

bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/component.jsx

@@ -17,8 +17,6 @@ export default class WhiteboardOverlay extends React.Component {
 
       currentShapeId: undefined,
       count: 0,
-
-      toolSelected: "Pencil",
     };
 
     this.mouseDownHandler = this.mouseDownHandler.bind(this);
@@ -29,9 +27,11 @@ export default class WhiteboardOverlay extends React.Component {
   //main mouse down handler
   //calls a mouseDown<AnnotationName> handler based on the tool selected
   mouseDownHandler(event) {
-    window.addEventListener('mouseup', this.mouseUpHandler);
+    if(this.props.drawSettings.tool) {
-    window.addEventListener('mousemove', this.mouseMoveHandler, true);
+      window.addEventListener('mouseup', this.mouseUpHandler);
-    this["mouseDown" +this.state.toolSelected](event);
+      window.addEventListener('mousemove', this.mouseMoveHandler, true);
+      this["mouseDown" + this.props.drawSettings.tool](event);
+    }
   }
 
   //main mouse up handler
@@ -39,13 +39,13 @@ export default class WhiteboardOverlay extends React.Component {
   mouseUpHandler(event) {
     window.removeEventListener('mouseup', this.mouseUpHandler);
     window.removeEventListener('mousemove', this.mouseMoveHandler, true);
-    this["mouseUp" + this.state.toolSelected](event);
+    this["mouseUp" + this.props.drawSettings.tool](event);
   }
 
   //main mouse move handler
   //calls a mouseMove<AnnotationName> handler based on the tool selected
   mouseMoveHandler(event) {
-    this["mouseMove" + this.state.toolSelected](event);
+    this["mouseMove" + this.props.drawSettings.tool](event);
   }
 
   mouseDownLine(event) {
@@ -125,7 +125,7 @@ export default class WhiteboardOverlay extends React.Component {
     transformedSvgPoint.x = transformedSvgPoint.x / this.props.slideWidth * 100;
     transformedSvgPoint.y = transformedSvgPoint.y / this.props.slideHeight * 100;
 
-    this["handleDraw" + this.state.toolSelected](this.state.initialCoordinates, transformedSvgPoint, "DRAW_UPDATE", this.state.currentShapeId);
+    this["handleDraw" + this.props.drawSettings.tool](this.state.initialCoordinates, transformedSvgPoint, "DRAW_UPDATE", this.state.currentShapeId);
   }
 
   mouseUpLine(event) {
@@ -164,7 +164,7 @@ export default class WhiteboardOverlay extends React.Component {
     transformedSvgPoint.x = transformedSvgPoint.x / this.props.slideWidth * 100;
     transformedSvgPoint.y = transformedSvgPoint.y / this.props.slideHeight * 100;
 
-    this["handleDraw" + this.state.toolSelected](this.state.initialCoordinates, transformedSvgPoint, "DRAW_END", this.state.currentShapeId);
+    this["handleDraw" + this.props.drawSettings.tool](this.state.initialCoordinates, transformedSvgPoint, "DRAW_END", this.state.currentShapeId);
     this.setState({
       initialCoordinates: {
         x: undefined,
@@ -232,17 +232,17 @@ export default class WhiteboardOverlay extends React.Component {
   }
 
   render() {
-    let toolSelected = this.state.toolSelected;
+    let tool = this.props.drawSettings.tool;
     return (
       <div
         className={
           cx(
-            toolSelected == "Pencil" ? styles.pencil : '',
+            tool == "Pencil" ? styles.pencil : '',
-            toolSelected == "Triangle" ? styles.triangle : '',
+            tool == "Triangle" ? styles.triangle : '',
-            toolSelected == "Rectangle" ? styles.rectangle : '',
+            tool == "Rectangle" ? styles.rectangle : '',
-            toolSelected == "Ellipse" ? styles.ellipse : '',
+            tool == "Ellipse" ? styles.ellipse : '',
-            toolSelected == "Line" ? styles.line : '',
+            tool == "Line" ? styles.line : '',
-            toolSelected ==  "Text" ? styles.text : ''
+            tool ==  "Text" ? styles.text : ''
           )
         }
         style={{ width: '100%', height: '100%' }}

bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/container.jsx

@@ -17,4 +17,5 @@ class WhiteboardOverlayContainer extends React.Component {
 
 export default createContainer(() => ({
   sendAnnotation: WhiteboardOverlayService.sendAnnotation,
+  drawSettings: WhiteboardOverlayService.getWhiteboardToolbarValues(),
 }), WhiteboardOverlayContainer);

bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/service.js

@@ -1,9 +1,19 @@
 import { callServer } from '/imports/ui/services/api/index.js';
+import Storage from '/imports/ui/services/storage/session';
 
 const sendAnnotation = (annotation) => {
   callServer('sendAnnotation', annotation);
 };
 
+const getWhiteboardToolbarValues = () => {
+  return {
+    tool: Storage.getItem('whiteboardAnnotationTool'),
+    thickness: Storage.getItem('whiteboardAnnotationThickness'),
+    color: Storage.getItem('whiteboardAnnotationColor'),
+  };
+};
+
 export default {
   sendAnnotation,
+  getWhiteboardToolbarValues,
 };

bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx

@@ -8,10 +8,21 @@ export default class WhiteboardToolbar extends Component {
     super(props);
 
     this.state = {
+      //a variable to control which list is currently open
       currentSubmenuOpen: '',
-      annotationSelected: 'hand',
+
+      //variables to keep current selected draw settings
+      annotationSelected: {
+        icon: 'hand',
+        sessionValue: 'Hand',
+      },
       thicknessSelected: 6,
       colorSelected: '#000000',
+
+      //lists of tools/thickness/colors are not direct children of main toolbar buttons
+      //and we want the list to close when onBlur fires at the main toolbar button
+      //(click anywhere on the screen) thus we have to control the blur manually by disabling it
+      //when you hover over the buttons in the list and enabling when the mouse leaves the list
       onBlurEnabled: true,
     };
 
@@ -26,6 +37,13 @@ export default class WhiteboardToolbar extends Component {
     this.enableOnBlur = this.enableOnBlur.bind(this);
   }
 
+  componentWillMount() {
+
+    //setting default or resetting current drawing settings in the session
+    const { annotationSelected, thicknessSelected, colorSelected } = this.state;
+    this.props.setWhiteboardToolbarValues(annotationSelected.sessionValue, thicknessSelected, colorSelected);
+  }
+
   componentDidMount() {
     //to let the whiteboard know that the presentation area's size has changed
     window.dispatchEvent(new Event('resize'));
@@ -36,12 +54,14 @@ export default class WhiteboardToolbar extends Component {
     window.dispatchEvent(new Event('resize'));
   }
 
+  //open a submenu
   displaySubMenu(listName) {
     this.setState({
       currentSubmenuOpen: this.state.currentSubmenuOpen == listName ? '' : listName,
     });
   }
 
+  //close a current submenu (fires onBlur only, when you click anywhere on the screen)
   closeSubMenu() {
     if(this.state.onBlurEnabled) {
       this.setState({
@@ -50,15 +70,22 @@ export default class WhiteboardToolbar extends Component {
     }
   }
 
+  //undo annotation
   handleUndo() {
     this.props.undoAnnotation();
   }
 
+  //clear all annotations
   handleClearAll() {
     this.props.clearWhiteboard();
   }
 
+  //changes a current selected annotation both in the state and in the session
+  //and closes the annotation list
   handleAnnotationChange(annotation) {
+    const { thicknessSelected, colorSelected } = this.state;
+    this.props.setWhiteboardToolbarValues(annotation.sessionValue, thicknessSelected, colorSelected);
+
     this.setState({
       annotationSelected: annotation,
       onBlurEnabled: true,
@@ -66,15 +93,24 @@ export default class WhiteboardToolbar extends Component {
     });
   }
 
-  handleThicknessChange(radius) {
+  //changes a current selected thickness both in the state and in the session
+  //and closes the thickness list
+  handleThicknessChange(thickness) {
+    const { annotationSelected, colorSelected } = this.state;
+    this.props.setWhiteboardToolbarValues(annotationSelected.sessionValue, thickness, colorSelected);
+
     this.setState({
-      thicknessSelected: radius,
+      thicknessSelected: thickness,
       onBlurEnabled: true,
       currentSubmenuOpen: '',
     });
   }
 
+  //changes a current selected color both in the state and in the session
+  //and closes the color list
   handleColorChange(color) {
+    const { annotationSelected, thicknessSelected } = this.state;
+    this.props.setWhiteboardToolbarValues(annotationSelected.sessionValue, thicknessSelected, color);
     this.setState({
       colorSelected: color,
       onBlurEnabled: true,
@@ -82,12 +118,14 @@ export default class WhiteboardToolbar extends Component {
     });
   }
 
+  //disabling onBlur flag when mouse is over the items in the lists
   disableOnBlur() {
     this.setState({
       onBlurEnabled: false,
     });
   }
 
+  //enabling the onBlur flag when the mouse leaving the lists
   enableOnBlur() {
     this.setState({
       onBlurEnabled: true,
@@ -98,22 +136,19 @@ export default class WhiteboardToolbar extends Component {
 
     return (
       <div className={cx(styles.annotationList, styles.toolbarList)}>
-        { this.props.annotations? this.props.annotations.map((annotation) =>
+        { this.props.annotations? this.props.annotations.map((annotation, index) =>
           <Button
             label="Annotation"
             hideLabel={true}
             color={'default'}
-            icon={annotation}
+            icon={annotation.icon}
             size={'md'}
-            className={cx(styles.toolbarListButton, this.state.annotationSelected == annotation ? styles.selectedListButton : '')}
+            className={cx(styles.toolbarListButton, this.state.annotationSelected.sessionValue == annotation.sessionValue ? styles.selectedListButton : '')}
             onClick={this.handleAnnotationChange.bind(null, annotation)}
             onMouseEnter={this.disableOnBlur}
             onMouseLeave={this.enableOnBlur}
-            key={annotation}
+            key={index}
             role="button"
-            aria-labelledby={`${annotation}Label`}
-            aria-describedby={`${annotation}Descrip`}
-
           />
         ) : null}
       </div>
@@ -189,11 +224,11 @@ export default class WhiteboardToolbar extends Component {
               hideLabel={true}
               role="button"
               color={'default'}
-              icon={this.state.annotationSelected}
+              icon={this.state.annotationSelected.icon}
               size={'md'}
               onClick={this.displaySubMenu.bind(null, "annotationList")}
               onBlur={this.closeSubMenu}
-              className={styles.toolbarButton}
+              className={cx(styles.toolbarButton, this.state.currentSubmenuOpen == "annotationList" ? '' : styles.notActive)}
             />
             {this.state.currentSubmenuOpen == "annotationList" ?
               this.renderAnnotationList()
@@ -208,7 +243,7 @@ export default class WhiteboardToolbar extends Component {
               size={'md'}
               onClick={this.displaySubMenu.bind(null, "thicknessList")}
               onBlur={this.closeSubMenu}
-              className={styles.toolbarButton}
+              className={cx(styles.toolbarButton, this.state.currentSubmenuOpen == "thicknessList" ? '' : styles.notActive)}
               customSvgIcon={
                 <svg className={styles.customSvgIcon} shapeRendering="geometricPrecision">
                   <circle shapeRendering="geometricPrecision" cx="50%" cy="50%" r={this.state.thicknessSelected} fill={this.state.colorSelected} stroke="black" strokeWidth="1"/>
@@ -228,7 +263,7 @@ export default class WhiteboardToolbar extends Component {
               size={'md'}
               onClick={this.displaySubMenu.bind(null, "colorList")}
               onBlur={this.closeSubMenu}
-              className={styles.toolbarButton}
+              className={cx(styles.toolbarButton, this.state.currentSubmenuOpen == "colorList" ? '' : styles.notActive)}
               customSvgIcon={
               <svg className={styles.customSvgIcon}>
                 <rect x="25%" y="25%" width="50%" height="50%" fill={this.state.colorSelected} stroke="black" strokeWidth="1"/>
@@ -275,7 +310,15 @@ const defaultProps = {
       '#00FFFF', '#0088FF', '#0000FF', '#8800FF', '#FF00FF', '#C0C0C0'
   ],
   thicknessRadiuses: [14, 12, 10, 8, 6, 4, 2],
-  annotations: ['text_tool', 'linte_tool', 'circle_tool', 'triangle_tool', 'rectangle_tool', 'pen_tool', 'hand'],
+  annotations: [
+    {icon: 'text_tool', sessionValue: "Text"},
+    {icon: 'linte_tool', sessionValue:"Line"},
+    {icon: 'circle_tool', sessionValue: "Ellipse"},
+    {icon: 'triangle_tool', sessionValue: "Triangle"},
+    {icon: 'rectangle_tool', sessionValue: "Rectangle"},
+    {icon: 'pen_tool', sessionValue: "Pencil"},
+    {icon: 'hand', sessionValue: "Hand"}
+  ],
 };
 
 WhiteboardToolbar.defaultProps = defaultProps;

bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/container.jsx

@@ -18,4 +18,5 @@ class WhiteboardToolbarContainer extends React.Component {
 export default createContainer(() => ({
   undoAnnotation: WhiteboardToolbarService.undoAnnotation,
   clearWhiteboard: WhiteboardToolbarService.clearWhiteboard,
+  setWhiteboardToolbarValues: WhiteboardToolbarService.setWhiteboardToolbarValues,
 }), WhiteboardToolbarContainer);

bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/service.js

@@ -1,4 +1,5 @@
 import { callServer } from '/imports/ui/services/api/index.js';
+import Storage from '/imports/ui/services/storage/session';
 
 const undoAnnotation = () => {
   callServer('undoAnnotation');
@@ -8,7 +9,14 @@ const clearWhiteboard = () => {
   callServer('clearWhiteboard');
 };
 
+const setWhiteboardToolbarValues = (tool, thickness, color) => {
+  Storage.setItem('whiteboardAnnotationTool', tool);
+  Storage.setItem('whiteboardAnnotationThickness', thickness);
+  Storage.setItem('whiteboardAnnotationColor', color);
+};
+
 export default {
   undoAnnotation,
   clearWhiteboard,
+  setWhiteboardToolbarValues,
 };