Spike: Infinite Canvas

packages/react-sdk/src/components/BoardBar/BoardBar.tsx

@@ -16,6 +16,7 @@
 
 import { useTranslation } from 'react-i18next';
 import { Toolbar } from '../common/Toolbar';
+import { InfiniteModeToggle } from './InfiniteModeToggle';
 import { SettingsMenu } from './SettingsMenu';
 import { ShowSlideOverviewToggle } from './ShowSlideOverviewToggle';
 
@@ -31,6 +32,7 @@ export function BoardBar() {
       data-guided-tour-target="settings"
     >
       <ShowSlideOverviewToggle />
+      <InfiniteModeToggle />
       <SettingsMenu />
     </Toolbar>
   );

packages/react-sdk/src/components/BoardBar/InfiniteModeToggle.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2023 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AllInclusiveIcon from '@mui/icons-material/AllInclusive';
+import { useCallback } from 'react';
+import { selectCanvas, setInfiniteMode } from '../../store/canvasSlice';
+import { useAppDispatch, useAppSelector } from '../../store/reduxToolkitHooks';
+import { ToolbarToggle } from '../common/Toolbar';
+
+export function InfiniteModeToggle() {
+  const { infiniteMode } = useAppSelector(selectCanvas);
+  const dispatch = useAppDispatch();
+
+  const handleInfiniteModeChange = useCallback(
+    (_: unknown, checked: boolean) => {
+      dispatch(setInfiniteMode(checked));
+    },
+    [dispatch],
+  );
+
+  return (
+    <ToolbarToggle
+      checked={infiniteMode}
+      icon={<AllInclusiveIcon />}
+      checkedIcon={<AllInclusiveIcon />}
+      onChange={handleInfiniteModeChange}
+    />
+  );
+}

packages/react-sdk/src/components/Layout/Layout.tsx

@@ -94,6 +94,8 @@ export function Layout({ height = '100vh' }: LayoutProps) {
             height={!isFullscreenMode ? height : '100vh'}
             direction="row"
             bgcolor="background.paper"
+            zIndex="100"
+            position="absolute"
           >
             <AnimatedSidebar
               visible={isSlideOverviewVisible && !isViewingPresentation}
@@ -184,7 +186,10 @@ function ContentArea() {
 
       {(!isViewingPresentation || isViewingPresentationInEditMode) && (
         <ToolbarCanvasContainer ref={sizeRef}>
-          <ToolbarContainer bottom={(theme) => theme.spacing(1)}>
+          <ToolbarContainer
+            position="fixed"
+            bottom={(theme) => theme.spacing(5)}
+          >
             <Box flex="1" />
 
             <ToolsBar />

packages/react-sdk/src/components/Whiteboard/ElementBehaviors/Moveable/MoveableElement.tsx

@@ -26,6 +26,8 @@ import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable';
 import { useUnmount } from 'react-use';
 import { useWhiteboardSlideInstance } from '../../../../state';
 import { Elements } from '../../../../state/types';
+import { selectCanvas } from '../../../../store/canvasSlice';
+import { useAppSelector } from '../../../../store/reduxToolkitHooks';
 import {
   createResetElementOverrides,
   useSetElementOverride,
@@ -55,8 +57,9 @@ export function MoveableElement({
   const isDragging = useRef<boolean>(false);
   const nodeRef = useRef<SVGRectElement>(null);
   const setElementOverride = useSetElementOverride();
-  const { scale, viewportHeight, viewportWidth } = useSvgCanvasContext();
+  const { viewportHeight, viewportWidth } = useSvgCanvasContext();
   const slideInstance = useWhiteboardSlideInstance();
+  const { scale } = useAppSelector(selectCanvas);
 
   const [{ deltaX, deltaY }, setDelta] = useState({ deltaX: 0, deltaY: 0 });
 

packages/react-sdk/src/components/Whiteboard/ElementBehaviors/Resizable/ResizeHandle.tsx

@@ -16,6 +16,8 @@
 
 import { Dispatch, RefObject, useCallback, useRef } from 'react';
 import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable';
+import { selectCanvas } from '../../../../store/canvasSlice';
+import { useAppSelector } from '../../../../store/reduxToolkitHooks';
 import { useSvgCanvasContext } from '../../SvgCanvas';
 import { HandlePosition } from './types';
 import { isLineElementHandlePosition } from './utils';
@@ -157,7 +159,8 @@ export type ResizeHandleProps = {
 
 export function ResizeHandle(props: ResizeHandleProps) {
   const nodeRef = useRef<SVGRectElement>(null);
-  const { scale, calculateSvgCoords } = useSvgCanvasContext();
+  const { calculateSvgCoords } = useSvgCanvasContext();
+  const { scale } = useAppSelector(selectCanvas);
 
   const {
     position: { name },

packages/react-sdk/src/components/Whiteboard/ElementBehaviors/Selection/ElementBarWrapper.tsx

@@ -15,10 +15,12 @@
  */
 
 import { Box } from '@mui/material';
-import { clamp } from 'lodash';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useMemo } from 'react';
+import { transformedPointSvgToDiv } from '../../../../lib';
 import { useSlideIsLocked } from '../../../../state';
 import { calculateBoundingRectForElements } from '../../../../state/crdt/documents/elements';
+import { selectCanvas } from '../../../../store/canvasSlice';
+import { useAppSelector } from '../../../../store/reduxToolkitHooks';
 import { useElementOverrides } from '../../../ElementOverridesProvider';
 import { useMeasure, useSvgCanvasContext } from '../../SvgCanvas';
 
@@ -30,11 +32,7 @@ export function ElementBarWrapper({
   const elements = Object.values(useElementOverrides(elementIds));
   const [sizeRef, { width: elementBarWidth, height: elementBarHeight }] =
     useMeasure<HTMLDivElement>();
-  const {
-    scale,
-    width: canvasWidth,
-    height: canvasHeight,
-  } = useSvgCanvasContext();
+  const { height: canvasHeight } = useSvgCanvasContext();
 
   if (
     // no elements selected
@@ -52,35 +50,57 @@ export function ElementBarWrapper({
     height,
   } = calculateBoundingRectForElements(elements);
 
-  const offset = 10;
+  const offsetOnDiv = 10;
+  // eslint-disable-next-line
+  const canvas = useAppSelector(selectCanvas);
+
+  // eslint-disable-next-line
+  const position = useMemo(() => {
+    const elementOnCanvas = { x, y };
+    const elementOnDiv = transformedPointSvgToDiv(canvas, elementOnCanvas);
+
+    const elementWidthOnDiv = width * canvas.scale;
+    const elementHeightOnDiv = height * canvas.scale;
+
+    const elementCenterOnDivX = elementOnDiv.x + elementWidthOnDiv / 2;
+    const elementBarCenterOnDivX = elementCenterOnDivX - elementBarWidth / 2;
+
+    // Y
+    const positionAbove = elementOnDiv.y - elementBarHeight - offsetOnDiv;
+    const positionBelow = elementOnDiv.y + elementHeightOnDiv + offsetOnDiv;
+    const positionInElement = elementOnDiv.y + offsetOnDiv;
 
-  function calculateTopPosition() {
-    const position = y * scale;
-    const positionAbove = position - elementBarHeight - offset;
-    const positionBelow = position + height * scale + offset;
-    const positionInElement = position + offset;
+    // TODO clamp - ignored for infinite-canvas spike
+    const clampedPositionX = elementBarCenterOnDivX;
 
+    let newYPosition = positionInElement;
     if (positionAbove >= 0) {
-      return positionAbove;
+      newYPosition = positionAbove;
     } else if (positionBelow + elementBarHeight < canvasHeight) {
-      return positionBelow;
-    } else {
-      return positionInElement;
+      newYPosition = positionBelow;
     }
-  }
 
-  function calculateLeftPosition() {
-    const position = (x + width / 2) * scale - elementBarWidth / 2;
-    return clamp(position, 0, canvasWidth - elementBarWidth);
-  }
+    return {
+      left: clampedPositionX,
+      top: newYPosition,
+    };
+  }, [
+    x,
+    y,
+    canvas,
+    width,
+    height,
+    elementBarWidth,
+    elementBarHeight,
+    canvasHeight,
+  ]);
 
   return (
     <Box
       ref={sizeRef}
       position="absolute"
       zIndex={(theme) => theme.zIndex.appBar}
-      left={calculateLeftPosition()}
-      top={calculateTopPosition()}
+      {...position}
     >
       {children}
     </Box>

packages/react-sdk/src/components/Whiteboard/ElementBehaviors/Selection/ElementBorder.tsx

@@ -15,11 +15,11 @@
  */
 
 import { useTheme } from '@mui/material';
+import { useScaleDivToSvg } from '../../../../lib';
 import { calculateBoundingRectForElements } from '../../../../state';
 import { useElementOverrides } from '../../../ElementOverridesProvider';
 import { useLayoutState } from '../../../Layout';
 import { getRenderProperties } from '../../../elements/line/getRenderProperties';
-import { useSvgCanvasContext } from '../../SvgCanvas';
 
 function SelectionAnchor({
   x,
@@ -31,10 +31,9 @@ function SelectionAnchor({
   borderWidth: number;
 }) {
   const theme = useTheme();
-  const { scale } = useSvgCanvasContext();
   const selectionAnchorFill = 'white';
-  const selectionAnchorCornerRadius = 3 / scale;
-  const selectionAnchorSize = 10 / scale;
+  const selectionAnchorCornerRadius = useScaleDivToSvg(3);
+  const selectionAnchorSize = useScaleDivToSvg(10);
 
   return (
     <rect
@@ -60,8 +59,6 @@ export function ElementBorder({ elementIds, padding = 1 }: ElementBorderProps) {
   const theme = useTheme();
   const { activeTool } = useLayoutState();
   const isInSelectionMode = activeTool === 'select';
-  const { scale } = useSvgCanvasContext();
-
   const elements = Object.values(useElementOverrides(elementIds));
   const {
     offsetX: x,
@@ -70,8 +67,8 @@ export function ElementBorder({ elementIds, padding = 1 }: ElementBorderProps) {
     height,
   } = calculateBoundingRectForElements(elements);
 
-  const scaledPadding = padding / scale;
-  const selectionBorderWidth = 2 / scale;
+  const scaledPadding = useScaleDivToSvg(padding);
+  const selectionBorderWidth = useScaleDivToSvg(2);
   const selectionX = x - (selectionBorderWidth / 2 + scaledPadding);
   const selectionY = y - (selectionBorderWidth / 2 + scaledPadding);
   const selectionWidth = width + 2 * (selectionBorderWidth / 2 + scaledPadding);