From 2c01a6ae5a693fb2291ad78fd9e5569700ecbb41 Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Tue, 2 May 2017 17:05:41 -0700 Subject: [PATCH] Passed the data from the whiteboard-toolbar to the whiteboard-overlay --- .../whiteboard-overlay/component.jsx | 32 ++++---- .../whiteboard-overlay/container.jsx | 1 + .../whiteboard/whiteboard-overlay/service.js | 10 +++ .../whiteboard-toolbar/component.jsx | 73 +++++++++++++++---- .../whiteboard-toolbar/container.jsx | 1 + .../whiteboard/whiteboard-toolbar/service.js | 8 ++ 6 files changed, 94 insertions(+), 31 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/component.jsx index d9c4ba2567..190f5b63b2 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/component.jsx +++ b/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 handler based on the tool selected mouseDownHandler(event) { - window.addEventListener('mouseup', this.mouseUpHandler); - window.addEventListener('mousemove', this.mouseMoveHandler, true); - this["mouseDown" +this.state.toolSelected](event); + if(this.props.drawSettings.tool) { + window.addEventListener('mouseup', this.mouseUpHandler); + 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 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 (
({ sendAnnotation: WhiteboardOverlayService.sendAnnotation, + drawSettings: WhiteboardOverlayService.getWhiteboardToolbarValues(), }), WhiteboardOverlayContainer); diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/service.js b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/service.js index b1814de686..a23f3bb47e 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/service.js +++ b/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, }; diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx index 107a6f7b3e..2f68a46f17 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx +++ b/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 (
- { this.props.annotations? this.props.annotations.map((annotation) => + { this.props.annotations? this.props.annotations.map((annotation, index) =>
@@ -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={ @@ -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={ @@ -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; diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/container.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/container.jsx index 2e41e5cb7a..5577cefa58 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/container.jsx +++ b/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); diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/service.js b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/service.js index 71c4ee15d1..8e149bbcba 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/service.js +++ b/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, };