({
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 (