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

import * as React from 'react';
import PropTypes from 'prop-types';
import { TldrawApp, Tldraw } from '@tldraw/tldraw';
import SlideCalcUtil, { HUNDRED_PERCENT, MAX_PERCENT } from '/imports/utils/slideCalcUtils';
// eslint-disable-next-line import/no-extraneous-dependencies
import { Utils } from '@tldraw/core';
import Cursors from './cursors/container';
import Settings from '/imports/ui/services/settings';
import logger from '/imports/startup/client/logger';
import KEY_CODES from '/imports/utils/keyCodes';
import {
  presentationMenuHeight,
  styleMenuOffset,
  styleMenuOffsetSmall
} from '/imports/ui/stylesheets/styled-components/general';
import Styled from './styles';
import PanToolInjector from './pan-tool-injector/component';
import {
  findRemoved, filterInvalidShapes, mapLanguage, sendShapeChanges, usePrevious,
} from './utils';
import { isEqual } from 'radash';

const SMALL_HEIGHT = 435;
const SMALLEST_DOCK_HEIGHT = 475;
const SMALL_WIDTH = 800;
const SMALLEST_DOCK_WIDTH = 710;
const TOOLBAR_SMALL = 28;
const TOOLBAR_LARGE = 32;
const MOUNTED_RESIZE_DELAY = 1500;

export default function Whiteboard(props) {
  const {
    isPresenter,
    removeShapes,
    initDefaultPages,
    persistShape,
    shapes,
    assets,
    currentUser,
    curPres,
    whiteboardId,
    podId,
    zoomSlide,
    skipToSlide,
    slidePosition,
    curPageId,
    presentationWidth,
    presentationHeight,
    isViewersCursorLocked,
    zoomChanger,
    isMultiUserActive,
    isRTL,
    fitToWidth,
    zoomValue,
    intl,
    svgUri,
    maxStickyNoteLength,
    fontFamily,
    hasShapeAccess,
    presentationAreaHeight,
    presentationAreaWidth,
    maxNumberOfAnnotations,
    notifyShapeNumberExceeded,
    darkTheme,
    isPanning: shortcutPanning,
    setTldrawIsMounting,
    width,
    height,
    hasMultiUserAccess,
    tldrawAPI,
    setTldrawAPI,
    whiteboardToolbarAutoHide,
    toggleToolsAnimations,
    isIphone,
    sidebarNavigationWidth,
    animations,
    isToolbarVisible,
    isModerator,
    fullscreenRef,
    fullscreenElementId,
    layoutContextDispatch,
  } = props;
  const { pages, pageStates } = initDefaultPages(curPres?.pages.length || 1);
  const rDocument = React.useRef({
    name: 'test',
    version: TldrawApp.version,
    id: whiteboardId,
    pages,
    pageStates,
    bindings: {},
    assets: {},
  });
  const [history, setHistory] = React.useState(null);
  const [zoom, setZoom] = React.useState(HUNDRED_PERCENT);
  const [tldrawZoom, setTldrawZoom] = React.useState(1);
  const zoomValueRef = React.useRef(zoomValue);
  const isMouseDownRef = React.useRef(false);
  const [isMounting, setIsMounting] = React.useState(true);
  const prevShapes = usePrevious(shapes);
  const prevSlidePosition = usePrevious(slidePosition);
  const prevFitToWidth = usePrevious(fitToWidth);
  const prevSvgUri = usePrevious(svgUri);
  const prevPageId = usePrevious(curPageId);
  const language = mapLanguage(Settings?.application?.locale?.toLowerCase() || 'en');
  const [currentTool, setCurrentTool] = React.useState(null);
  const [currentStyle, setCurrentStyle] = React.useState({});
  const [isMoving, setIsMoving] = React.useState(false);
  const [isPanning, setIsPanning] = React.useState(shortcutPanning);
  const [panSelected, setPanSelected] = React.useState(isPanning);
  const isMountedRef = React.useRef(true);
  const [isToolLocked, setIsToolLocked] = React.useState(tldrawAPI?.appState?.isToolLocked);
  const [bgShape, setBgShape] = React.useState(null);

  // eslint-disable-next-line arrow-body-style
  React.useEffect(() => {
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  React.useEffect(() => {
    zoomValueRef.current = zoomValue;
  }, [zoomValue]);

  const setSafeTLDrawAPI = (api) => {
    if (isMountedRef.current) {
      setTldrawAPI(api);
    }
  };

  const toggleOffCheck = (evt) => {
    const clickedElement = evt.target;
    const panBtnClicked = clickedElement?.getAttribute('data-test') === 'panButton'
      || clickedElement?.parentElement?.getAttribute('data-test') === 'panButton';

    setIsToolLocked(false);

    const panButton = document.querySelector('[data-test="panButton"]');
    if (panBtnClicked) {
      const dataZoom = panButton.getAttribute('data-zoom');
      if ((dataZoom <= HUNDRED_PERCENT && !fitToWidth)) {
        return;
      }
      panButton.classList.add('select');
      panButton.classList.remove('selectOverride');
    } else {
      setIsPanning(false);
      setPanSelected(false);
      if (panButton) {
        // only presenter has the pan button
        panButton.classList.add('selectOverride');
        panButton.classList.remove('select');
      }
    }
  };

  const setDockPosition = (setSetting) => {
    if (hasWBAccess || isPresenter) {
      if (((height < SMALLEST_DOCK_HEIGHT) || (width < SMALLEST_DOCK_WIDTH))) {
        setSetting('dockPosition', 'bottom');
      } else {
        setSetting('dockPosition', isRTL ? 'left' : 'right');
      }
    }
  }

  React.useEffect(() => {
    const toolbar = document.getElementById('TD-PrimaryTools');
    const handleClick = (evt) => {
      toggleOffCheck(evt);
    };
    const handleDBClick = (evt) => {
      evt.preventDefault();
      evt.stopPropagation();
      setIsToolLocked(true);
      tldrawAPI?.patchState(
        {
          appState: {
            isToolLocked: true,
          },
        },
      );
    };
    toolbar?.addEventListener('click', handleClick);
    toolbar?.addEventListener('dblclick', handleDBClick);

    return () => {
      toolbar?.removeEventListener('click', handleClick);
      toolbar?.removeEventListener('dblclick', handleDBClick);
    };
  }, [tldrawAPI, isToolLocked]);

  React.useEffect(() => {
    if (whiteboardToolbarAutoHide) {
      toggleToolsAnimations('fade-in', 'fade-out', animations ? '3s' : '0s');
    } else {
      toggleToolsAnimations('fade-out', 'fade-in', animations ? '.3s' : '0s');
    }
  }, [whiteboardToolbarAutoHide]);
  
  const calculateZoom = (localWidth, localHeight) => {
    const calcedZoom = fitToWidth ? (presentationWidth / localWidth) : Math.min(
      (presentationWidth) / localWidth,
      (presentationHeight) / localHeight,
    );

    return (calcedZoom === 0 || calcedZoom === Infinity) ? HUNDRED_PERCENT : calcedZoom;
  };

  React.useEffect(() => {
    setTldrawIsMounting(true);
  }, []);

  const checkClientBounds = (e) => {
    if (
      e.clientX > document.documentElement.clientWidth
      || e.clientX < 0
      || e.clientY > document.documentElement.clientHeight
      || e.clientY < 0
    ) {
      if (tldrawAPI?.session) {
        tldrawAPI?.completeSession?.();
      }
    }
    isMouseDownRef.current = false;
  };

  const checkVisibility = () => {
    if (document.visibilityState === 'hidden' && tldrawAPI?.session) {
      tldrawAPI?.completeSession?.();
    }
  };
  
  const handleWheelEvent = (event) => {
    if ((zoomValueRef.current >= MAX_PERCENT && event.deltaY < 0)
      || (zoomValueRef.current <= HUNDRED_PERCENT && event.deltaY > 0))
    {
      event.stopPropagation();
      event.preventDefault();
      return window.dispatchEvent(new Event('resize'));
    }

    if (!event.ctrlKey) {
      // Prevent the event from reaching the tldraw library
      event.stopPropagation();
      event.preventDefault();
      const newEvent = new WheelEvent('wheel', {
        deltaX: event.deltaX,
        deltaY: event.deltaY,
        deltaZ: event.deltaZ,
        ctrlKey: true,
        clientX: event.clientX,
        clientY: event.clientY,
      });
      const canvas = document.getElementById('canvas');
      if (canvas) {
        canvas.dispatchEvent(newEvent);
      }
    }

    window.dispatchEvent(new Event('resize'));
  }

  const setIsMouseDown = () => {
    isMouseDownRef.current = true;
  }

  React.useEffect(() => {
    document.addEventListener('mouseup', checkClientBounds);
    document.addEventListener('visibilitychange', checkVisibility);
    document.addEventListener('mousedown', setIsMouseDown);

    return () => {
      document.removeEventListener('mouseup', checkClientBounds);
      document.removeEventListener('mousedown', setIsMouseDown);
      document.removeEventListener('visibilitychange', checkVisibility);
      const canvas = document.getElementById('canvas');
      if (canvas) {
        canvas.removeEventListener('wheel', handleWheelEvent);
      }
    };
  }, [tldrawAPI]);

  /* needed to prevent an issue with presentation images not loading correctly in Firefox
  more info: https://github.com/bigbluebutton/bigbluebutton/issues/17969#issuecomment-1561758200 */
  React.useEffect(() => {
    if (bgShape && bgShape.parentElement && bgShape.parentElement.clientWidth > 0) {
      bgShape.parentElement.style.width = `${bgShape.parentElement.clientWidth + .1}px`;
    }
  }, [bgShape]);

  const doc = React.useMemo(() => {
    const currentDoc = rDocument.current;

    // update document if the number of pages has changed
    if (currentDoc.id !== whiteboardId && currentDoc?.pages.length !== curPres?.pages.length) {
      const currentPageShapes = currentDoc?.pages[curPageId]?.shapes;
      currentDoc.id = whiteboardId;
      currentDoc.pages = pages;
      currentDoc.pages[curPageId].shapes = currentPageShapes;
      currentDoc.pageStates = pageStates;
    }

    const next = { ...currentDoc };

    let changed = false;

    if (next.pageStates[curPageId] && !isEqual(prevShapes, shapes)) {
      const editingShape = tldrawAPI?.getShape(tldrawAPI?.getPageState()?.editingId);

      if (editingShape) {
        shapes[editingShape?.id] = editingShape;
      }

      const removed = prevShapes && findRemoved(Object.keys(prevShapes), Object.keys((shapes)));
      if (removed && removed.length > 0) {
        const patchedShapes = Object.fromEntries(removed.map((id) => [id, undefined]));

        try {
          tldrawAPI?.patchState(
            {
              document: {
                pageStates: {
                  [curPageId]: {
                    selectedIds:
                      tldrawAPI?.selectedIds?.filter((id) => !removed.includes(id)) || [],
                  },
                },
                pages: {
                  [curPageId]: {
                    shapes: patchedShapes,
                  },
                },
              },
            },
          );
        } catch (error) {
          logger.error({
            logCode: 'whiteboard_shapes_remove_error',
            extraInfo: { error },
          }, 'Whiteboard catch error on removing shapes');
        }
      }

      next.pages[curPageId].shapes = filterInvalidShapes(shapes, curPageId, tldrawAPI);
      changed = true;
    }

    if (curPageId && (!next.assets[`slide-background-asset-${curPageId}`] || (svgUri && !isEqual(prevSvgUri, svgUri)))) {
      next.assets[`slide-background-asset-${curPageId}`] = assets[`slide-background-asset-${curPageId}`];
      tldrawAPI?.patchState(
        {
          document: {
            assets,
          },
        },
      );
      changed = true;
    }

    if (changed && tldrawAPI) {
      // merge patch manually (this improves performance and reduce side effects on fast updates)
      const patch = {
        document: {
          pages: {
            [curPageId]: { shapes: filterInvalidShapes(shapes, curPageId, tldrawAPI) },
          },
        },
      };
      const prevState = tldrawAPI._state;
      const nextState = Utils.deepMerge(tldrawAPI._state, patch);
      if (nextState.document.pages[curPageId].shapes) {
        filterInvalidShapes(nextState.document.pages[curPageId].shapes, curPageId, tldrawAPI);
      }
      const final = tldrawAPI.cleanup(nextState, prevState, patch, '');
      tldrawAPI._state = final;

      try {
        tldrawAPI?.forceUpdate();
      } catch (error) {
        logger.error({
          logCode: 'whiteboard_shapes_update_error',
          extraInfo: { error },
        }, 'Whiteboard catch error on updating shapes');
      }
    }

    // move poll result text to bottom right
    if (next.pages[curPageId] && slidePosition) {
      const pollResults = Object.entries(next.pages[curPageId].shapes)
        .filter(([, shape]) => shape.name?.includes('poll-result'));
      pollResults.forEach(([id, shape]) => {
        if (isEqual(shape.point, [0, 0])) {
          try {
            const shapeBounds = tldrawAPI?.getShapeBounds(id);
            if (shapeBounds) {
              const editedShape = shape;
              editedShape.point = [
                slidePosition.width - shapeBounds.width,
                slidePosition.height - shapeBounds.height,
              ];
              editedShape.size = [shapeBounds.width, shapeBounds.height];
              if (isPresenter) persistShape(editedShape, whiteboardId, isModerator);
            }
          } catch (error) {
            logger.error({
              logCode: 'whiteboard_poll_results_error',
              extraInfo: { error },
            }, 'Whiteboard catch error on moving unpublished poll results');
          }
        }
      });
    }

    return currentDoc;
  }, [shapes, tldrawAPI, curPageId, slidePosition]);

  // when presentationSizes change, update tldraw camera
  React.useEffect(() => {
    if (curPageId && slidePosition && tldrawAPI
      && presentationWidth > 0 && presentationHeight > 0
    ) {
      if (prevFitToWidth !== null && fitToWidth !== prevFitToWidth) {
        const newZoom = calculateZoom(slidePosition.width, slidePosition.height);
        tldrawAPI?.setCamera([0, 0], newZoom);
        const viewedRegionH = SlideCalcUtil.calcViewedRegionHeight(
          tldrawAPI?.viewport.height, slidePosition.height,
        );
        setZoom(HUNDRED_PERCENT);
        zoomChanger(HUNDRED_PERCENT);
        zoomSlide(parseInt(curPageId, 10), podId, HUNDRED_PERCENT, viewedRegionH, 0, 0);
      } else {
        const currentAspectRatio = Math.round((presentationWidth / presentationHeight) * 100) / 100;
        const previousAspectRatio = Math.round(
          (slidePosition.viewBoxWidth / slidePosition.viewBoxHeight) * 100,
        ) / 100;
        if (fitToWidth && currentAspectRatio !== previousAspectRatio) {
          // we need this to ensure tldraw updates the viewport size after re-mounting
          setTimeout(() => {
            const newZoom = calculateZoom(slidePosition.viewBoxWidth, slidePosition.viewBoxHeight);
            tldrawAPI.setCamera([slidePosition.x, slidePosition.y], newZoom, 'zoomed');
          }, 50);
        } else {
          const newZoom = calculateZoom(slidePosition.viewBoxWidth, slidePosition.viewBoxHeight);
          tldrawAPI?.setCamera([slidePosition.x, slidePosition.y], newZoom);
        }
      }
    }
  }, [presentationWidth, presentationHeight, curPageId, document?.documentElement?.dir]);

  React.useEffect(() => {
    if (presentationWidth > 0 && presentationHeight > 0 && slidePosition) {
      const cameraZoom = tldrawAPI?.getPageState()?.camera?.zoom;
      const newzoom = calculateZoom(slidePosition.viewBoxWidth, slidePosition.viewBoxHeight);
      if (cameraZoom && cameraZoom === 1) {
        tldrawAPI?.setCamera([slidePosition.x, slidePosition.y], newzoom);
      } else if (isMounting) {
        setIsMounting(false);
        setTldrawIsMounting(false);
        const currentAspectRatio = Math.round((presentationWidth / presentationHeight) * 100) / 100;
        const previousAspectRatio = Math.round(
          (slidePosition.viewBoxWidth / slidePosition.viewBoxHeight) * 100,
        ) / 100;
        // case where the presenter had fit-to-width enabled and he reloads the page
        if (!fitToWidth && currentAspectRatio !== previousAspectRatio) {
          // wee need this to ensure tldraw updates the viewport size after re-mounting
          setTimeout(() => {
            tldrawAPI?.setCamera([slidePosition.x, slidePosition.y], newzoom, 'zoomed');
          }, 50);
        } else {
          tldrawAPI?.setCamera([slidePosition.x, slidePosition.y], newzoom);
        }
      }
    }
  }, [tldrawAPI?.getPageState()?.camera, presentationWidth, presentationHeight]);

  // change tldraw camera when slidePosition changes
  React.useEffect(() => {
    const camera = tldrawAPI?.getPageState()?.camera;
    if (tldrawAPI && !isPresenter && curPageId && slidePosition) {
      const newZoom = calculateZoom(slidePosition.viewBoxWidth, slidePosition.viewBoxHeight);
      tldrawAPI?.setCamera([slidePosition.x, slidePosition.y], newZoom, 'zoomed');
    }

    if (isPresenter && slidePosition && camera) {
      const zoomFitSlide = calculateZoom(slidePosition.width, slidePosition.height);
      let zoomToolbar = Math.round(
        ((HUNDRED_PERCENT * camera.zoom) / zoomFitSlide) * 100,
      ) / 100;
      if ((zoom !== zoomToolbar) && (curPageId && curPageId !== prevPageId)) {
        setZoom(zoomToolbar);
        zoomChanger(zoomToolbar);
      }
    }
  }, [curPageId, slidePosition]);

  React.useEffect(() => {
    if (isPresenter && slidePosition && !isMounting) {
      const zoomFitSlide = calculateZoom(slidePosition?.width, slidePosition?.height);
      const zoomCamera = (zoomFitSlide * zoomValue) / HUNDRED_PERCENT;
      let viewedRegionW = SlideCalcUtil.calcViewedRegionWidth(
        tldrawAPI?.viewport?.width, slidePosition?.width,
      );
      let viewedRegionH = SlideCalcUtil.calcViewedRegionHeight(
        tldrawAPI?.viewport?.height, slidePosition?.height,
      );

      zoomSlide(
        parseInt(curPageId, 10),
        podId,
        viewedRegionW,
        viewedRegionH,
        slidePosition?.x,
        slidePosition?.y,
      );
    }
  }, [curPageId]);

  // update zoom according to toolbar
  React.useEffect(() => {
    if (tldrawAPI && isPresenter && curPageId && slidePosition && zoom !== zoomValue) {
      const zoomFitSlide = calculateZoom(slidePosition.width, slidePosition.height);
      const zoomCamera = (zoomFitSlide * zoomValue) / HUNDRED_PERCENT;
      setTimeout(() => {
        tldrawAPI?.zoomTo(zoomCamera);
      }, 50);
    }
  }, [zoomValue]);

  // update zoom when presenter changes if the aspectRatio has changed
  React.useEffect(() => {
    if (tldrawAPI && isPresenter && curPageId && slidePosition && !isMounting) {
      const currentAspectRatio = Math.round((presentationWidth / presentationHeight) * 100) / 100;
      const previousAspectRatio = Math.round(
        (slidePosition.viewBoxWidth / slidePosition.viewBoxHeight) * 100,
      ) / 100;
      if (previousAspectRatio !== currentAspectRatio) {
        if (fitToWidth) {
          const newZoom = calculateZoom(slidePosition.width, slidePosition.height);
          tldrawAPI?.setCamera([0, 0], newZoom);
          const viewedRegionH = SlideCalcUtil.calcViewedRegionHeight(
            tldrawAPI?.viewport.height, slidePosition.height,
          );
          zoomSlide(parseInt(curPageId, 10), podId, HUNDRED_PERCENT, viewedRegionH, 0, 0);
          setZoom(HUNDRED_PERCENT);
          zoomChanger(HUNDRED_PERCENT);
        } else if (!isMounting) {
          let viewedRegionW = SlideCalcUtil.calcViewedRegionWidth(
            tldrawAPI?.viewport.width, slidePosition.width,
          );
          let viewedRegionH = SlideCalcUtil.calcViewedRegionHeight(
            tldrawAPI?.viewport.height, slidePosition.height,
          );
          const camera = tldrawAPI?.getPageState()?.camera;
          const zoomFitSlide = calculateZoom(slidePosition.width, slidePosition.height);
          if (!fitToWidth && camera.zoom === zoomFitSlide) {
            viewedRegionW = HUNDRED_PERCENT;
            viewedRegionH = HUNDRED_PERCENT;
          }
          zoomSlide(
            parseInt(curPageId, 10),
            podId,
            viewedRegionW,
            viewedRegionH,
            camera.point[0],
            camera.point[1],
          );
          const zoomToolbar = Math.round(
            ((HUNDRED_PERCENT * camera.zoom) / zoomFitSlide) * 100,
          ) / 100;
          if (zoom !== zoomToolbar) {
            setZoom(zoomToolbar);
            zoomChanger(zoomToolbar);
          }
        }
      }
    }
  }, [isPresenter]);

  const hasWBAccess = hasMultiUserAccess(whiteboardId, currentUser.userId);

  React.useEffect(() => {
    if (tldrawAPI) {
      tldrawAPI.isForcePanning = isPanning;
    }
  }, [isPanning]);

  React.useEffect(() => {
    tldrawAPI && setDockPosition(tldrawAPI?.setSetting);
  }, [height, width]);

  React.useEffect(() => {
    tldrawAPI?.setSetting('language', language);
  }, [language]);

  // Reset zoom to default when current presentation changes.
  React.useEffect(() => {
    if (isPresenter && slidePosition && tldrawAPI) {
      tldrawAPI?.zoomTo(0);
      setHistory(null);
      tldrawAPI?.resetHistory();
    }
  }, [curPres?.id]);

  React.useEffect(() => {
    const currentZoom = tldrawAPI?.getPageState()?.camera?.zoom;
    if (currentZoom !== tldrawZoom) {
      setTldrawZoom(currentZoom);
    }
    setBgShape(null);
  }, [presentationAreaHeight, presentationAreaWidth]);

  const fullscreenToggleHandler = () => {
    const {
      isFullscreen,
      fullscreenAction,
      handleToggleFullScreen,
    } = props;

    handleToggleFullScreen(fullscreenRef);
    const newElement = isFullscreen ? '' : fullscreenElementId;

    layoutContextDispatch({
      type: fullscreenAction,
      value: {
        element: newElement,
        group: '',
      },
    });
  };

  const nextSlideHandler = (event) => {
    const { nextSlide, numberOfSlides } = props;

    if (event) event.currentTarget.blur();
    nextSlide(+curPageId, numberOfSlides, podId);
  };

  const previousSlideHandler = (event) => {
    const { previousSlide } = props;

    if (event) event.currentTarget.blur();
    previousSlide(+curPageId, podId);
  };

  const handleOnKeyDown = (event) => {
    const { which, ctrlKey } = event;

    if (isMouseDownRef.current) {
      event.preventDefault();
      event.stopPropagation();
      return;
    }

    switch (which) {
      case KEY_CODES.ARROW_LEFT:
      case KEY_CODES.PAGE_UP:
        previousSlideHandler();
        break;
      case KEY_CODES.ARROW_RIGHT:
      case KEY_CODES.PAGE_DOWN:
        nextSlideHandler();
        break;
      case KEY_CODES.ENTER:
        fullscreenToggleHandler();
        break;
      case KEY_CODES.A:
        if (ctrlKey) {
          event.preventDefault();
          event.stopPropagation();
          tldrawAPI?.selectAll();
        }
        break;
      case KEY_CODES.ARROW_DOWN:
      case KEY_CODES.ARROW_UP:
        event.preventDefault();
        event.stopPropagation();
        break;
      default:
    }
  };

  const onMount = (app) => {
    setDockPosition(app?.setSetting);
    const menu = document.getElementById('TD-Styles')?.parentElement;
    const canvas = document.getElementById('canvas');
    if (canvas) {
      canvas.addEventListener('wheel', handleWheelEvent, { capture: true });
    }

    if (menu) {
      menu.style.position = 'relative';
      menu.style.height = presentationMenuHeight;
      menu.setAttribute('id', 'TD-Styles-Parent');

      [...menu.children]
        .sort((a, b) => (a?.id > b?.id ? -1 : 1))
        .forEach((n) => menu.appendChild(n));
    }

    app.setSetting('language', language);
    app?.setSetting('isDarkMode', false);

    const textAlign = isRTL ? 'end' : 'start';

    app?.patchState(
      {
        appState: {
          currentStyle: {
            textAlign: currentStyle?.textAlign || textAlign,
            font: currentStyle?.font || fontFamily,
          },
        },
      },
    );

    setSafeTLDrawAPI(app);
    // disable for non presenter that doesn't have multi user access
    if (!hasWBAccess && !isPresenter) {
      const newApp = app;
      newApp.onPan = () => { };
      newApp.setSelectedIds = () => { };
      newApp.setHoveredId = () => { };
    }

    if (history) {
      app.replaceHistory(history);
    }

    if (curPageId) {
      app.patchState(
        {
         appState: {
            currentPageId: curPageId,
          },
        },
      );
      setIsMounting(true);
    }

    // needed to ensure the correct calculations for cursors on mount.
    setTimeout(() => {
      window.dispatchEvent(new Event('resize'));
    }, MOUNTED_RESIZE_DELAY);
  };

  const onPatch = (e, t, reason) => {
    if (!e?.pageState || !reason) return;

    if (((isPanning || panSelected) && (reason === 'selected' || reason === 'set_hovered_id'))) {
      e.patchState(
        {
          document: {
            pageStates: {
              [e.getPage()?.id]: {
                selectedIds: [],
                hoveredId: null,
              },
            },
          },
        },
      );
      return;
    }

    // don't allow select others shapes for editing if don't have permission
    if (reason && reason.includes('set_editing_id')) {
      if (!hasShapeAccess(e.pageState.editingId)) {
        e.pageState.editingId = null;
      }
    }
    // don't allow hover others shapes for editing if don't have permission
    if (reason && reason.includes('set_hovered_id')) {
      if (!hasShapeAccess(e.pageState.hoveredId)) {
        e.pageState.hoveredId = null;
      }
    }
    // don't allow select others shapes if don't have permission
    if (reason && reason.includes('selected')) {
      const validIds = [];
      e.pageState.selectedIds.forEach((id) => hasShapeAccess(id) && validIds.push(id));
      e.pageState.selectedIds = validIds;
      e.patchState(
        {
          document: {
            pageStates: {
              [e.getPage()?.id]: {
                selectedIds: validIds,
              },
            },
          },
        },
      );
    }
    // don't allow selecting others shapes with ctrl (brush)
    if (e?.session?.type === 'brush' && e?.session?.status === 'brushing') {
      const validIds = [];
      e.pageState.selectedIds.forEach((id) => hasShapeAccess(id) && validIds.push(id));
      e.pageState.selectedIds = validIds;
      if (!validIds.find((id) => id === e.pageState.hoveredId)) {
        e.pageState.hoveredId = undefined;
      }
    }

    // change cursor when moving shapes
    if (e?.session?.type === 'translate' && e?.session?.status === 'translating') {
      if (!isMoving) setIsMoving(true);
      if (reason === 'set_status:idle') setIsMoving(false);
    }

    if (reason && isPresenter && slidePosition && (reason.includes('zoomed') || reason.includes('panned'))) {
      const camera = tldrawAPI?.getPageState()?.camera;

      // limit bounds
      if (tldrawAPI?.viewport.maxX > slidePosition.width) {
        camera.point[0] += (tldrawAPI?.viewport.maxX - slidePosition.width);
      }
      if (tldrawAPI?.viewport.maxY > slidePosition.height) {
        camera.point[1] += (tldrawAPI?.viewport.maxY - slidePosition.height);
      }
      if (camera.point[0] > 0 || tldrawAPI?.viewport.minX < 0) {
        camera.point[0] = 0;
      }
      if (camera.point[1] > 0 || tldrawAPI?.viewport.minY < 0) {
        camera.point[1] = 0;
      }

      const zoomFitSlide = calculateZoom(slidePosition.width, slidePosition.height);
      if (camera.zoom < zoomFitSlide) {
        camera.zoom = zoomFitSlide;
      }

      const zoomToolbar = Math.round(((HUNDRED_PERCENT * camera.zoom) / zoomFitSlide) * 100) / 100;
      if (zoom !== zoomToolbar) {
        setZoom(zoomToolbar);
        if (isPresenter) zoomChanger(zoomToolbar);
      }

      let viewedRegionW = SlideCalcUtil.calcViewedRegionWidth(
        tldrawAPI?.viewport.width, slidePosition.width,
      );
      let viewedRegionH = SlideCalcUtil.calcViewedRegionHeight(
        tldrawAPI?.viewport.height, slidePosition.height,
      );

      if (!fitToWidth && camera.zoom === zoomFitSlide) {
        viewedRegionW = HUNDRED_PERCENT;
        viewedRegionH = HUNDRED_PERCENT;
        camera.point = [0,0];
      }

      zoomSlide(
        parseInt(curPageId, 10),
        podId,
        viewedRegionW,
        viewedRegionH,
        camera.point[0],
        camera.point[1],
      );
    }
    // don't allow non-presenters to pan&zoom
    if (slidePosition && reason && !isPresenter && (reason.includes('zoomed') || reason.includes('panned'))) {
      const newZoom = calculateZoom(slidePosition.viewBoxWidth, slidePosition.viewBoxHeight);
      tldrawAPI?.setCamera([slidePosition.x, slidePosition.y], newZoom);
    }
    // disable select for non presenter that doesn't have multi user access
    if (!hasWBAccess && !isPresenter) {
      if (e?.getPageState()?.brush || e?.selectedIds?.length !== 0) {
        e.patchState(
          {
            document: {
              pageStates: {
                [e?.currentPageId]: {
                  selectedIds: [],
                  brush: null,
                },
              },
            },
          },
        );
      }
    }

    if (reason && reason === 'patched_shapes' && e?.session?.type === 'edit') {
      const patchedShape = e?.getShape(e?.getPageState()?.editingId);

      if (e?.session?.initialShape?.type === 'sticky' && patchedShape?.text?.length > maxStickyNoteLength) {
        patchedShape.text = patchedShape.text.substring(0, maxStickyNoteLength);
      }

      if (e?.session?.initialShape?.type === 'text' && !shapes[patchedShape.id]) {
        // check for maxShapes
        const currentShapes = e?.document?.pages[e?.currentPageId]?.shapes;
        const shapeNumberExceeded = Object.keys(currentShapes).length - 1 > maxNumberOfAnnotations;
        if (shapeNumberExceeded) {
          notifyShapeNumberExceeded(intl, maxNumberOfAnnotations);
          e?.cancelSession?.();
        } else {
          patchedShape.userId = currentUser?.userId;
          persistShape(patchedShape, whiteboardId, isModerator);
        }
      } else {
        const diff = {
          id: patchedShape.id,
          point: patchedShape.point,
          text: patchedShape.text,
        };
        persistShape(diff, whiteboardId, isModerator);
      }
    }

    if (reason && reason.includes('selected_tool')) {
      const tool = reason.split(':')[1];
      setCurrentTool(tool);
      setPanSelected(false);
      setIsPanning(false);
    }

    if (reason && reason.includes('ui:toggled_is_loading')) {
      e?.patchState(
        {
          appState: {
            currentStyle,
          },
        },
      );
    }

    e?.patchState(
      {
        appState: {
          isToolLocked,
        },
      },
    );

    if ((panSelected || isPanning)) {
      e.isForcePanning = isPanning;
    }
  };

  const onUndo = (app) => {
    if (app.currentPageId !== curPageId) {
      if (isPresenter) {
        // change slide for others
        skipToSlide(Number.parseInt(app.currentPageId, 10), podId);
      } else {
        // ignore, stay on same page
        app.changePage(curPageId);
      }
      return;
    }
    const lastCommand = app.stack[app.pointer + 1];
    const changedShapes = lastCommand?.before?.document?.pages[app.currentPageId]?.shapes;
    if (changedShapes) {
      sendShapeChanges(
        app, changedShapes, shapes, prevShapes, hasShapeAccess,
        whiteboardId, currentUser, intl, true,
      );
    }
  };

  const onRedo = (app) => {
    if (app.currentPageId !== curPageId) {
      if (isPresenter) {
        // change slide for others
        skipToSlide(Number.parseInt(app.currentPageId, 10), podId);
      } else {
        // ignore, stay on same page
        app.changePage(curPageId);
      }
      return;
    }
    const lastCommand = app.stack[app.pointer];
    const changedShapes = lastCommand?.after?.document?.pages[app.currentPageId]?.shapes;
    if (changedShapes) {
      sendShapeChanges(
        app, changedShapes, shapes, prevShapes, hasShapeAccess, whiteboardId, currentUser, intl,
      );
    }
  };

  const onCommand = (app, command) => {
    const isFirstCommand = command.id === "change_page" && command.before?.appState.currentPageId === "0";
    if (!isFirstCommand){
      setHistory(app.history);
    }

    if (whiteboardToolbarAutoHide && command && command.id === "change_page") {
      toggleToolsAnimations('fade-in', 'fade-out', '0s');
    }

    if (command?.id?.includes('style')) {
      setCurrentStyle({ ...currentStyle, ...command?.after?.appState?.currentStyle });
    }

    const changedShapes = command.after?.document?.pages[app.currentPageId]?.shapes;
    if (!isMounting && app.currentPageId !== curPageId) {
      // can happen then the "move to page action" is called, or using undo after changing a page
      const currentPage = curPres.pages.find(
        (page) => page.num === Number.parseInt(app.currentPageId, 10),
      );
      if (!currentPage) return;
      const newWhiteboardId = currentPage.id;
      // remove from previous page and persist on new
      if (changedShapes) {
        removeShapes(Object.keys(changedShapes), whiteboardId);
        Object.entries(changedShapes)
          .forEach(([id, shape]) => {
            const shapeBounds = app.getShapeBounds(id);
            const editedShape = shape;
            editedShape.size = [shapeBounds.width, shapeBounds.height];
            persistShape(editedShape, newWhiteboardId, isModerator);
          });
      }
      if (isPresenter) {
        // change slide for others
        skipToSlide(Number.parseInt(app.currentPageId, 10), podId);
      } else {
        // ignore, stay on same page
        app.changePage(curPageId);
      }
    } else if (changedShapes) {
      sendShapeChanges(
        app, changedShapes, shapes, prevShapes, hasShapeAccess, whiteboardId, currentUser, intl,
      );
    }
  };

  const webcams = document.getElementById('cameraDock');
  const dockPos = webcams?.getAttribute('data-position');
  const backgroundShape = document.getElementById('slide-background-shape_image');

  if (currentTool && !isPanning && !tldrawAPI?.isForcePanning) tldrawAPI?.selectTool(currentTool);

  if (backgroundShape && backgroundShape.src // if there is a background image
    && backgroundShape.complete // and it's fully downloaded
    && backgroundShape.src !== bgShape?.src // and if it's a different image
    && backgroundShape.parentElement?.clientWidth > 0 // and if the whiteboard area is visible
  ) {
    setBgShape(backgroundShape);
  }
  const editableWB = (
    <Styled.EditableWBWrapper onKeyDown={handleOnKeyDown}>
      <Tldraw
        key={`wb-${isRTL}-${dockPos}-${presentationAreaHeight}-${presentationAreaWidth}-${sidebarNavigationWidth}`}
        document={doc}
        // disable the ability to drag and drop files onto the whiteboard
        // until we handle saving of assets in akka.
        disableAssets
        // Disable automatic focus. Users were losing focus on shared notes
        // and chat on presentation mount.
        autofocus={false}
        onMount={onMount}
        showPages={false}
        showZoom={false}
        showUI={curPres ? (isPresenter || hasWBAccess) : true}
        showMenu={!curPres}
        showMultiplayerMenu={false}
        readOnly={false}
        onPatch={onPatch}
        onUndo={onUndo}
        onRedo={onRedo}
        onCommand={onCommand}
      />
    </Styled.EditableWBWrapper>
  );

  const readOnlyWB = (
    <Tldraw
      key="wb-readOnly"
      document={doc}
      onMount={onMount}
      // disable the ability to drag and drop files onto the whiteboard
      // until we handle saving of assets in akka.
      disableAssets
      // Disable automatic focus. Users were losing focus on shared notes
      // and chat on presentation mount.
      autofocus={false}
      showPages={false}
      showZoom={false}
      showUI={false}
      showMenu={false}
      showMultiplayerMenu={false}
      readOnly
      onPatch={onPatch}
    />
  );

  const size = ((height < SMALL_HEIGHT) || (width < SMALL_WIDTH))
    ? TOOLBAR_SMALL : TOOLBAR_LARGE;

  const menuOffsetValues = {
    true: {
      true: `${styleMenuOffsetSmall}`,
      false: `${styleMenuOffset}`,
    },
    false: {
      true: `-${styleMenuOffsetSmall}`,
      false: `-${styleMenuOffset}`,
    },
  };

  const menuOffset = menuOffsetValues[isRTL][isIphone];

  return (
    <div key={`animations=-${animations}`}>
      <Cursors
        tldrawAPI={tldrawAPI}
        currentUser={currentUser}
        hasMultiUserAccess={hasMultiUserAccess}
        whiteboardId={whiteboardId}
        isViewersCursorLocked={isViewersCursorLocked}
        isMultiUserActive={isMultiUserActive}
        isPanning={isPanning || panSelected}
        isMoving={isMoving}
        currentTool={currentTool}
        whiteboardToolbarAutoHide={whiteboardToolbarAutoHide}
        toggleToolsAnimations={toggleToolsAnimations}
      >
        {(hasWBAccess || isPresenter) ? editableWB : readOnlyWB}
        <Styled.TldrawGlobalStyle
          hideContextMenu={!hasWBAccess && !isPresenter}
          {...{
            hasWBAccess,
            isPresenter,
            size,
            darkTheme,
            menuOffset,
            panSelected,
            isToolbarVisible,
          }}
        />
      </Cursors>
      {isPresenter && (
        <PanToolInjector
          {...{
            tldrawAPI,
            fitToWidth,
            isPanning,
            setIsPanning,
            zoomValue,
            panSelected,
            setPanSelected,
            currentTool,
          }}
          formatMessage={intl?.formatMessage}
        />
      )}
    </div>
  );
}

Whiteboard.propTypes = {
  isPresenter: PropTypes.bool.isRequired,
  isIphone: PropTypes.bool.isRequired,
  removeShapes: PropTypes.func.isRequired,
  initDefaultPages: PropTypes.func.isRequired,
  persistShape: PropTypes.func.isRequired,
  notifyNotAllowedChange: PropTypes.func.isRequired,
  shapes: PropTypes.objectOf(PropTypes.shape).isRequired,
  assets: PropTypes.objectOf(PropTypes.shape).isRequired,
  currentUser: PropTypes.shape({
    userId: PropTypes.string.isRequired,
  }).isRequired,
  curPres: PropTypes.shape({
    pages: PropTypes.arrayOf(PropTypes.shape({})),
    id: PropTypes.string.isRequired,
  }),
  whiteboardId: PropTypes.string,
  podId: PropTypes.string.isRequired,
  zoomSlide: PropTypes.func.isRequired,
  skipToSlide: PropTypes.func.isRequired,
  slidePosition: PropTypes.shape({
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
    viewBoxWidth: PropTypes.number.isRequired,
    viewBoxHeight: PropTypes.number.isRequired,
  }),
  curPageId: PropTypes.string.isRequired,
  presentationWidth: PropTypes.number.isRequired,
  presentationHeight: PropTypes.number.isRequired,
  isViewersCursorLocked: PropTypes.bool.isRequired,
  zoomChanger: PropTypes.func.isRequired,
  isMultiUserActive: PropTypes.func.isRequired,
  isRTL: PropTypes.bool.isRequired,
  fitToWidth: PropTypes.bool.isRequired,
  zoomValue: PropTypes.number.isRequired,
  intl: PropTypes.shape({
    formatMessage: PropTypes.func.isRequired,
  }).isRequired,
  svgUri: PropTypes.string,
  maxStickyNoteLength: PropTypes.number.isRequired,
  fontFamily: PropTypes.string.isRequired,
  hasShapeAccess: PropTypes.func.isRequired,
  presentationAreaHeight: PropTypes.number.isRequired,
  presentationAreaWidth: PropTypes.number.isRequired,
  maxNumberOfAnnotations: PropTypes.number.isRequired,
  notifyShapeNumberExceeded: PropTypes.func.isRequired,
  darkTheme: PropTypes.bool.isRequired,
  isPanning: PropTypes.bool.isRequired,
  setTldrawIsMounting: PropTypes.func.isRequired,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  hasMultiUserAccess: PropTypes.func.isRequired,
  fullscreenElementId: PropTypes.string.isRequired,
  isFullscreen: PropTypes.bool.isRequired,
  layoutContextDispatch: PropTypes.func.isRequired,
  fullscreenAction: PropTypes.string.isRequired,
  fullscreenRef: PropTypes.instanceOf(Element),
  handleToggleFullScreen: PropTypes.func.isRequired,
  nextSlide: PropTypes.func.isRequired,
  numberOfSlides: PropTypes.number.isRequired,
  previousSlide: PropTypes.func.isRequired,
  sidebarNavigationWidth: PropTypes.number,
};

Whiteboard.defaultProps = {
  curPres: undefined,
  fullscreenRef: undefined,
  slidePosition: undefined,
  svgUri: undefined,
  whiteboardId: undefined,
  sidebarNavigationWidth: 0,
};