make whiteboard tools list configurable

bigbluebutton-html5/imports/api/users-settings/server/methods/addUserSettings.js

@@ -28,6 +28,8 @@ export default function addUserSettings(credentials, meetingId, userId, settings
       'enableVideoStats',
       // WHITEBOARD
       'multiUserPenOnly',
+      'presenterTools',
+      'multiUserTools',
     ];
     if (!handledHTML5Parameters.includes(key)) {
       return acc;

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

@@ -63,18 +63,26 @@ const intlMessages = defineMessages({
 const runExceptInEdge = fn => (browser().name === 'edge' ? noop : fn);
 
 class WhiteboardToolbar extends Component {
-  constructor() {
+  constructor(props) {
-    super();
+    super(props);
+
+    const { annotations } = this.props;
+
+    let annotationSelected = {
+      icon: 'pen_tool',
+      value: 'pencil',
+    };
+
+    if (annotations.length > 0) {
+      annotationSelected = annotations[annotations.length - 1];
+    }
 
     this.state = {
       // a variable to control which list is currently open
       currentSubmenuOpen: '',
 
       // variables to keep current selected draw settings
-      annotationSelected: {
+      annotationSelected,
-        icon: 'pen_tool',
-        value: 'pencil',
-      },
       thicknessSelected: { value: 4 },
       colorSelected: { value: '#000000' },
       fontSizeSelected: { value: 20 },

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

@@ -6,7 +6,7 @@ import WhiteboardMultiUser from '/imports/api/whiteboard-multi-user/';
 import getFromUserSettings from '/imports/ui/services/users-settings';
 
 const DRAW_SETTINGS = 'drawSettings';
-const WHITEBOARD_TOOLS = Meteor.settings.public.whiteboard.toolbar;
+const WHITEBOARD_TOOLBAR = Meteor.settings.public.whiteboard.toolbar;
 
 const makeSetter = key => (value) => {
   const drawSettings = Storage.getItem(DRAW_SETTINGS);
@@ -70,9 +70,9 @@ const isPresenter = () => {
 };
 
 const filterAnnotationList = () => {
-  const multiUserPenOnly = getFromUserSettings('multiUserPenOnly', WHITEBOARD_TOOLS.multiUserPenOnly);
+  const multiUserPenOnly = getFromUserSettings('multiUserPenOnly', WHITEBOARD_TOOLBAR.multiUserPenOnly);
 
-  let filteredAnnotationList = WHITEBOARD_TOOLS.tools;
+  let filteredAnnotationList = WHITEBOARD_TOOLBAR.tools;
 
   if (!isPresenter() && multiUserPenOnly) {
     filteredAnnotationList = [{
@@ -81,6 +81,18 @@ const filterAnnotationList = () => {
     }];
   }
 
+  const presenterTools = getFromUserSettings('presenterTools', WHITEBOARD_TOOLBAR.presenterTools);
+  if (isPresenter() && Array.isArray(presenterTools)) {
+    filteredAnnotationList = WHITEBOARD_TOOLBAR.tools.filter(el =>
+      presenterTools.includes(el.value));
+  }
+
+  const multiUserTools = getFromUserSettings('multiUserTools', WHITEBOARD_TOOLBAR.multiUserTools);
+  if (!isPresenter() && !multiUserPenOnly && Array.isArray(multiUserTools)) {
+    filteredAnnotationList = WHITEBOARD_TOOLBAR.tools.filter(el =>
+      multiUserTools.includes(el.value));
+  }
+
   return filteredAnnotationList;
 };
 

bigbluebutton-html5/private/config/settings-development.json

@@ -357,6 +357,24 @@
             "icon": "pointer",
             "value": "pointer"
           }
+        ],
+        "presenterTools": [
+          "text",
+          "line",
+          "ellipse",
+          "triangle",
+          "rectangle",
+          "pencil",
+          "hand"
+        ],
+        "multiUserTools": [
+          "text",
+          "line",
+          "ellipse",
+          "triangle",
+          "rectangle",
+          "pencil",
+          "hand"
         ]
       }
     },

bigbluebutton-html5/private/config/settings-production.json

@@ -357,6 +357,24 @@
             "icon": "pointer",
             "value": "pointer"
           }
+        ],
+        "presenterTools": [
+          "text",
+          "line",
+          "ellipse",
+          "triangle",
+          "rectangle",
+          "pencil",
+          "hand"
+        ],
+        "multiUserTools": [
+          "text",
+          "line",
+          "ellipse",
+          "triangle",
+          "rectangle",
+          "pencil",
+          "hand"
         ]
       }
     },