refactor(whiteboard): move shapelock to container + linting

Do the shape lock propery set in the container so the props change less times and avoid problems in the useMemo.
antobinary · Jan 24, 2023 · 44692f9 · 44692f9
1 parent b88cd77
commit 44692f9
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 51 deletions.
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
@@ -116,6 +116,7 @@ export default function Whiteboard(props) {
     svgUri,
     maxStickyNoteLength,
     fontFamily,
+    hasShapeAccess,
   } = props;
 
   const { pages, pageStates } = initDefaultPages(curPres?.pages.length || 1);
@@ -151,13 +152,6 @@ export default function Whiteboard(props) {
     return zoom;
   }
 
-  const hasShapeAccess = (id) => {
-    const owner = shapes[id]?.userId;
-    const isBackgroundShape = id?.includes('slide-background');
-    const hasShapeAccess = !isBackgroundShape && ((owner && owner === currentUser?.userId) || !owner || isPresenter || isModerator);
-    return hasShapeAccess;
-  }
-
   const isValidShapeType = (shape) => {
     const invalidTypes = ['image', 'video'];
     return !invalidTypes.includes(shape?.type);
@@ -268,12 +262,6 @@ export default function Whiteboard(props) {
       if (editingShape) {
         shapes[editingShape?.id] = editingShape;
       }
-      // set shapes as locked for those who aren't allowed to edit it
-      Object.entries(shapes).forEach(([shapeId, shape]) => {
-        if (shape &&!shape.isLocked && !hasShapeAccess(shapeId)) {
-          shape.isLocked = true;
-        }
-      });
 
       const removed = prevShapes && findRemoved(Object.keys(prevShapes),Object.keys((shapes)))
       if (removed && removed.length > 0) {

diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx
@@ -1,44 +1,92 @@
-import { withTracker } from "meteor/react-meteor-data";
-import Service from "./service";
-import Whiteboard from "./component";
-import React, { useContext } from "react";
-import { UsersContext } from "../components-data/users-context/context";
-import Auth from "/imports/ui/services/auth";
-import PresentationToolbarService from '../presentation/presentation-toolbar/service';
-import { layoutSelect } from '../layout/context';
+import { withTracker } from 'meteor/react-meteor-data';
+import React, { useContext } from 'react';
 import {
   ColorStyle,
   DashStyle,
   SizeStyle,
   TDShapeType,
-} from "@tldraw/tldraw";
+} from '@tldraw/tldraw';
+import {
+  getShapes,
+  getCurrentPres,
+  initDefaultPages,
+  persistShape,
+  removeShapes,
+  isMultiUserActive,
+  hasMultiUserAccess,
+  changeCurrentSlide,
+  notifyNotAllowedChange,
+} from './service';
+import Whiteboard from './component';
+import { UsersContext } from '../components-data/users-context/context';
+import Auth from '/imports/ui/services/auth';
+import PresentationToolbarService from '../presentation/presentation-toolbar/service';
+import { layoutSelect } from '../layout/context';
 
 const ROLE_MODERATOR = Meteor.settings.public.user.role_moderator;
 const WHITEBOARD_CONFIG = Meteor.settings.public.whiteboard;
 
 const WhiteboardContainer = (props) => {
-    const usingUsersContext = useContext(UsersContext);
-    const isRTL = layoutSelect((i) => i.isRTL);
-    const width = layoutSelect((i) => i?.output?.presentation?.width);
-    const height = layoutSelect((i) => i?.output?.presentation?.height);
-    const { users } = usingUsersContext;
-    const currentUser = users[Auth.meetingID][Auth.userID];
-    const isPresenter = currentUser.presenter;
-    const isModerator = currentUser.role === ROLE_MODERATOR;
-    const maxStickyNoteLength = WHITEBOARD_CONFIG.maxStickyNoteLength;
-    const fontFamily = WHITEBOARD_CONFIG.styles.text.family;
-    return <Whiteboard {...{ isPresenter, isModerator, currentUser, isRTL, width, height, maxStickyNoteLength, fontFamily }} {...props} meetingId={Auth.meetingID} />
+  const usingUsersContext = useContext(UsersContext);
+  const isRTL = layoutSelect((i) => i.isRTL);
+  const width = layoutSelect((i) => i?.output?.presentation?.width);
+  const height = layoutSelect((i) => i?.output?.presentation?.height);
+  const { users } = usingUsersContext;
+  const currentUser = users[Auth.meetingID][Auth.userID];
+  const isPresenter = currentUser.presenter;
+  const isModerator = currentUser.role === ROLE_MODERATOR;
+  const { maxStickyNoteLength } = WHITEBOARD_CONFIG;
+  const fontFamily = WHITEBOARD_CONFIG.styles.text.family;
+
+  const { shapes } = props;
+  const hasShapeAccess = (id) => {
+    const owner = shapes[id]?.userId;
+    const isBackgroundShape = id?.includes('slide-background');
+    const hasAccess = !isBackgroundShape
+      && ((owner && owner === currentUser?.userId) || !owner || isPresenter || isModerator);
+    return hasAccess;
+  };
+    // set shapes as locked for those who aren't allowed to edit it
+  Object.entries(shapes).forEach(([shapeId, shape]) => {
+    if (!shape.isLocked && !hasShapeAccess(shapeId)) {
+      shape.isLocked = true;
+    }
+  });
+
+  return (
+    <Whiteboard
+      {... {
+        isPresenter,
+        isModerator,
+        currentUser,
+        isRTL,
+        width,
+        height,
+        maxStickyNoteLength,
+        fontFamily,
+        hasShapeAccess,
+      }}
+      {...props}
+      meetingId={Auth.meetingID}
+    />
+  );
 };
 
-export default withTracker(({ whiteboardId, curPageId, intl, zoomChanger, slidePosition, svgUri }) => {
-  const shapes = Service.getShapes(whiteboardId, curPageId, intl);
-  const curPres = Service.getCurrentPres();
+export default withTracker(({
+  whiteboardId,
+  curPageId,
+  intl,
+  slidePosition,
+  svgUri,
+}) => {
+  const shapes = getShapes(whiteboardId, curPageId, intl);
+  const curPres = getCurrentPres();
 
-  shapes["slide-background-shape"] = {
+  shapes['slide-background-shape'] = {
     assetId: `slide-background-asset-${curPageId}`,
     childIndex: -1,
-    id: "slide-background-shape",
-    name: "Image",
+    id: 'slide-background-shape',
+    name: 'Image',
     type: TDShapeType.Image,
     parentId: `${curPageId}`,
     point: [0, 0],
@@ -51,27 +99,26 @@ export default withTracker(({ whiteboardId, curPageId, intl, zoomChanger, slideP
     },
   };
 
-  const assets = {}
+  const assets = {};
   assets[`slide-background-asset-${curPageId}`] = {
     id: `slide-background-asset-${curPageId}`,
     size: [slidePosition?.width || 0, slidePosition?.height || 0],
     src: svgUri,
-    type: "image",
+    type: 'image',
   };
 
   return {
-    initDefaultPages: Service.initDefaultPages,
-    persistShape: Service.persistShape,
-    isMultiUserActive: Service.isMultiUserActive,
-    hasMultiUserAccess: Service.hasMultiUserAccess,
-    changeCurrentSlide: Service.changeCurrentSlide,
-    shapes: shapes,
-    assets: assets,
+    initDefaultPages,
+    persistShape,
+    isMultiUserActive,
+    hasMultiUserAccess,
+    changeCurrentSlide,
+    shapes,
+    assets,
     curPres,
-    removeShapes: Service.removeShapes,
+    removeShapes,
     zoomSlide: PresentationToolbarService.zoomSlide,
     skipToSlide: PresentationToolbarService.skipToSlide,
-    zoomChanger: zoomChanger,
-    notifyNotAllowedChange: Service.notifyNotAllowedChange,
+    notifyNotAllowedChange,
   };
 })(WhiteboardContainer);