Plugged in thickness and color to the whiteboard-overlay from the whiteboard-toolbar

bigbluebutton-html5/imports/ui/components/whiteboard/shape-factory/component.jsx

@@ -18,8 +18,6 @@ export default class WhiteboardShapeModel extends React.Component {
       return (
         <Component
           shape={this.props.shape.shape}
-          widthRatio={this.props.widthRatio}
-          heightRatio={this.props.heightRatio}
           slideWidth={this.props.slideWidth}
           slideHeight={this.props.slideHeight}
         />

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

@@ -48,6 +48,10 @@ export default class WhiteboardOverlay extends React.Component {
     this["mouseMove" + this.props.drawSettings.tool](event);
   }
 
+  mouseDownHand(event) {
+
+  }
+
   mouseDownLine(event) {
     this.commonMouseDown(event);
   }
@@ -78,7 +82,7 @@ export default class WhiteboardOverlay extends React.Component {
     let x = (event.nativeEvent.offsetX + this.props.viewBoxX) / this.props.slideWidth * 100;
     let y = (event.nativeEvent.offsetY + this.props.viewBoxY) / this.props.slideHeight * 100;
     let id = (this.state.count + 1) + "-" + new Date().getTime();
-    this.handleDrawLine({x: x, y: y}, {x: x, y: y}, "DRAW_START", id);
+    this["handleDraw" + this.props.drawSettings.tool]({x: x, y: y}, {x: x, y: y}, "DRAW_START", id);
     this.setState({
       initialCoordinates: {
         x: x,
@@ -89,6 +93,10 @@ export default class WhiteboardOverlay extends React.Component {
     });
   }
 
+  mouseMoveHand(event){
+
+  }
+
   mouseMoveLine(event) {
     this.commonMouseMove(event);
   }
@@ -128,6 +136,10 @@ export default class WhiteboardOverlay extends React.Component {
     this["handleDraw" + this.props.drawSettings.tool](this.state.initialCoordinates, transformedSvgPoint, "DRAW_UPDATE", this.state.currentShapeId);
   }
 
+  mouseUpHand(event) {
+
+  }
+
   mouseUpLine(event) {
     this.commonMouseUp(event);
   }
@@ -210,10 +222,10 @@ export default class WhiteboardOverlay extends React.Component {
           endPoint.x,
           endPoint.y,
         ],
-        color: 0,
+        color: this.props.drawSettings.color,
         transparency: false,
         status: status,
-        thickness: 1,
+        thickness: this.props.drawSettings.thickness,
         status: status,
         id: id,
         whiteboardId: this.props.whiteboardId,

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

@@ -16,7 +16,10 @@ export default class WhiteboardToolbar extends Component {
         icon: 'hand',
         sessionValue: 'Hand',
       },
-      thicknessSelected: 6,
+      thicknessSelected: {
+        iconRadius: 6,
+        sessionRadius: 6,
+      },
       colorSelected: '#000000',
 
       //lists of tools/thickness/colors are not direct children of main toolbar buttons
@@ -41,7 +44,11 @@ export default class WhiteboardToolbar extends Component {
 
     //setting default or resetting current drawing settings in the session
     const { annotationSelected, thicknessSelected, colorSelected } = this.state;
-    this.props.setWhiteboardToolbarValues(annotationSelected.sessionValue, thicknessSelected, colorSelected);
+    this.props.setWhiteboardToolbarValues(
+      annotationSelected.sessionValue,
+      thicknessSelected.sessionRadius,
+      this.HEXToINTColor(colorSelected),
+    );
   }
 
   componentDidMount() {
@@ -84,7 +91,11 @@ export default class WhiteboardToolbar extends Component {
   //and closes the annotation list
   handleAnnotationChange(annotation) {
     const { thicknessSelected, colorSelected } = this.state;
-    this.props.setWhiteboardToolbarValues(annotation.sessionValue, thicknessSelected, colorSelected);
+    this.props.setWhiteboardToolbarValues(
+      annotation.sessionValue,
+      thicknessSelected.sessionRadius,
+      this.HEXToINTColor(colorSelected),
+    );
 
     this.setState({
       annotationSelected: annotation,
@@ -95,12 +106,16 @@ export default class WhiteboardToolbar extends Component {
 
   //changes a current selected thickness both in the state and in the session
   //and closes the thickness list
-  handleThicknessChange(thickness) {
+  handleThicknessChange(thicknessObj) {
     const { annotationSelected, colorSelected } = this.state;
-    this.props.setWhiteboardToolbarValues(annotationSelected.sessionValue, thickness, colorSelected);
+    this.props.setWhiteboardToolbarValues(
+      annotationSelected.sessionValue,
+      thicknessObj.sessionRadius,
+      this.HEXToINTColor(colorSelected),
+    );
 
     this.setState({
-      thicknessSelected: thickness,
+      thicknessSelected: thicknessObj,
       onBlurEnabled: true,
       currentSubmenuOpen: '',
     });
@@ -110,7 +125,11 @@ export default class WhiteboardToolbar extends Component {
   //and closes the color list
   handleColorChange(color) {
     const { annotationSelected, thicknessSelected } = this.state;
-    this.props.setWhiteboardToolbarValues(annotationSelected.sessionValue, thicknessSelected, color);
+    this.props.setWhiteboardToolbarValues(
+      annotationSelected.sessionValue,
+      thicknessSelected.sessionRadius,
+      this.HEXToINTColor(color),
+    );
     this.setState({
       colorSelected: color,
       onBlurEnabled: true,
@@ -118,6 +137,12 @@ export default class WhiteboardToolbar extends Component {
     });
   }
 
+  HEXToINTColor(hexColor) {
+    var _rrggbb = hexColor.slice(1);
+    var rrggbb = _rrggbb.substr(0, 2) + _rrggbb.substr(2, 2) + _rrggbb.substr(4, 2);
+    return parseInt(rrggbb, 16);
+  }
+
   //disabling onBlur flag when mouse is over the items in the lists
   disableOnBlur() {
     this.setState({
@@ -143,7 +168,7 @@ export default class WhiteboardToolbar extends Component {
             color={'default'}
             icon={annotation.icon}
             size={'md'}
-            className={cx(styles.toolbarListButton, this.state.annotationSelected.sessionValue == annotation.sessionValue ? styles.selectedListButton : '')}
+            className={cx(styles.toolbarListButton, this.state.annotationSelected.sessionValue == annotation.sessionRadius ? styles.selectedListButton : '')}
             onClick={this.handleAnnotationChange.bind(null, annotation)}
             onMouseEnter={this.disableOnBlur}
             onMouseLeave={this.enableOnBlur}
@@ -159,25 +184,22 @@ export default class WhiteboardToolbar extends Component {
 
     return (
       <div className={cx(styles.thicknessList, styles.toolbarList)}>
-        {this.props.thicknessRadiuses ? this.props.thicknessRadiuses.map((radius) =>
+        {this.props.thicknessRadiuses ? this.props.thicknessRadiuses.map((thicknessObj, index) =>
           <Button
             label="Radius"
             hideLabel={true}
             color={'default'}
             size={'md'}
-            className={cx(styles.toolbarListButton, this.state.thicknessSelected == radius ? styles.selectedListButton : '')}
+            className={cx(styles.toolbarListButton, this.state.thicknessSelected.sessionRadius == thicknessObj.sessionRadius ? styles.selectedListButton : '')}
-            onClick={this.handleThicknessChange.bind(null, radius)}
+            onClick={this.handleThicknessChange.bind(null, thicknessObj)}
             onMouseEnter={this.disableOnBlur}
             onMouseLeave={this.enableOnBlur}
             customSvgIcon={
               <svg className={styles.customSvgIcon}>
-                <circle cx="50%" cy="50%" r={radius} fill="#F3F6F9"/>
+                <circle cx="50%" cy="50%" r={thicknessObj.iconRadius} fill="#F3F6F9"/>
               </svg>
             }
-            key={radius}
+            key={index}
-            role="button"
-            aria-labelledby={`${radius}Label`}
-            aria-describedby={`${radius}Descrip`}
           />
         ) : null}
       </div>
@@ -246,7 +268,7 @@ export default class WhiteboardToolbar extends Component {
               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"/>
+                  <circle shapeRendering="geometricPrecision" cx="50%" cy="50%" r={this.state.thicknessSelected.iconRadius} fill={this.state.colorSelected} stroke="black" strokeWidth="1"/>
                 </svg>
               }
             />
@@ -309,7 +331,15 @@ const defaultProps = {
       '#000000', '#FFFFFF', '#FF0000', '#FF8800', '#CCFF00','#00FF00',
       '#00FFFF', '#0088FF', '#0000FF', '#8800FF', '#FF00FF', '#C0C0C0'
   ],
-  thicknessRadiuses: [14, 12, 10, 8, 6, 4, 2],
+  thicknessRadiuses: [
+    {iconRadius: 14, sessionRadius: 30},
+    {iconRadius: 12, sessionRadius: 22},
+    {iconRadius: 10, sessionRadius: 15},
+    {iconRadius: 8, sessionRadius: 10},
+    {iconRadius: 6, sessionRadius:6},
+    {iconRadius: 4, sessionRadius: 3},
+    {iconRadius: 2, sessionRadius: 1}
+  ],
   annotations: [
     {icon: 'text_tool', sessionValue: "Text"},
     {icon: 'linte_tool', sessionValue:"Line"},