merge master changes (#7105)

* refactor: DRY out tool typing (#7086)

* feat: Export `iconFillColor()` (#6996)

* feat: initial Laser Pointer MVP (#6739)

* feat: initial Laser pointer mvp

* feat: add laser-pointer package and integrate it with collab

* chore: fix yarn.lock

* feat: update laser-pointer package, prevent panning from showing

* feat: add laser pointer tool button when collaborating, migrate to official package

* feat: reduce laser tool button size

* update icon

* fix icon & rotate

* fix: lock zoom level

* fix icon

* add `selected` state, simplify and reduce api

* set up pointer callbacks in viewMode if laser tool active

* highlight extra-tools button if one of the nested tools active

* add shortcut to laser pointer

* feat: don't update paths if nothing changed

* ensure we reset flag if no rAF scheduled

* move `lastUpdate` to instance to optimize

* return early

* factor out into constants and add doc

* skip iteration instead of exit

* fix naming

* feat: remove testing variable on window

* destroy on editor unmount

* fix incorrectly resetting `lastUpdate` in `stop()`

---------

Co-authored-by: dwelle <luzar.david@gmail.com>

* fix: ensure we do not stop laser update prematurely (#7100)

---------

Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: DanielJGeiger <1852529+DanielJGeiger@users.noreply.github.com>
Co-authored-by: Are <artur@excalidraw.com>

src/components/App.tsx

@@ -1211,7 +1211,6 @@ class App extends React.Component<AppProps, AppState> {
                           }
                           app={this}
                           isCollaborating={this.props.isCollaborating}
-                          uiDisabled={this.props.ui === false}
                         >
                           {this.props.children}
                         </LayerUI>
@@ -1238,16 +1237,14 @@ class App extends React.Component<AppProps, AppState> {
                             closable={this.state.toast.closable}
                           />
                         )}
-                        {this.state.contextMenu &&
+                        {this.state.contextMenu && (
-                          this.props.interactive !== false &&
+                          <ContextMenu
-                          this.props.ui !== false && (
+                            items={this.state.contextMenu.items}
-                            <ContextMenu
+                            top={this.state.contextMenu.top}
-                              items={this.state.contextMenu.items}
+                            left={this.state.contextMenu.left}
-                              top={this.state.contextMenu.top}
+                            actionManager={this.actionManager}
-                              left={this.state.contextMenu.left}
+                          />
-                              actionManager={this.actionManager}
+                        )}
-                            />
-                          )}
                         <StaticCanvas
                           canvas={this.canvas}
                           rc={this.rc}
@@ -2111,10 +2108,6 @@ class App extends React.Component<AppProps, AppState> {
       event.preventDefault();
     }
 
-    if (this.props.interactive === false) {
-      return;
-    }
-
     if (!didTapTwice) {
       didTapTwice = true;
       clearTimeout(tappedTwiceTimer);
@@ -2149,10 +2142,6 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private onTouchEnd = (event: TouchEvent) => {
-    if (this.props.interactive === false) {
-      return;
-    }
-
     this.resetContextMenuTimer();
     if (event.touches.length > 0) {
       this.setState({
@@ -2169,10 +2158,6 @@ class App extends React.Component<AppProps, AppState> {
 
   public pasteFromClipboard = withBatchedUpdates(
     async (event: ClipboardEvent | null) => {
-      if (this.props.interactive === false) {
-        return;
-      }
-
       const isPlainPaste = !!(IS_PLAIN_PASTE && event);
 
       // #686
@@ -3215,10 +3200,6 @@ class App extends React.Component<AppProps, AppState> {
   private onGestureStart = withBatchedUpdates((event: GestureEvent) => {
     event.preventDefault();
 
-    if (this.props.interactive === false) {
-      return false;
-    }
-
     // we only want to deselect on touch screens because user may have selected
     // elements by mistake while zooming
     if (this.isTouchScreenMultiTouchGesture()) {
@@ -3234,10 +3215,6 @@ class App extends React.Component<AppProps, AppState> {
   private onGestureChange = withBatchedUpdates((event: GestureEvent) => {
     event.preventDefault();
 
-    if (this.props.interactive === false) {
-      return false;
-    }
-
     // onGestureChange only has zoom factor but not the center.
     // If we're on iPad or iPhone, then we recognize multi-touch and will
     // zoom in at the right location in the touchmove handler
@@ -3269,11 +3246,6 @@ class App extends React.Component<AppProps, AppState> {
   // fires only on Safari
   private onGestureEnd = withBatchedUpdates((event: GestureEvent) => {
     event.preventDefault();
-
-    if (this.props.interactive === false) {
-      return false;
-    }
-
     // reselect elements only on touch screens (see onGestureStart)
     if (this.isTouchScreenMultiTouchGesture()) {
       this.setState({
@@ -3855,10 +3827,6 @@ class App extends React.Component<AppProps, AppState> {
   private handleCanvasPointerMove = (
     event: React.PointerEvent<HTMLCanvasElement>,
   ) => {
-    if (this.props.interactive === false) {
-      return false;
-    }
-
     this.savePointer(event.clientX, event.clientY, this.state.cursorButton);
 
     if (gesture.pointers.has(event.pointerId)) {
@@ -4511,10 +4479,8 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    if (this.props.interactive !== false) {
+    if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
-      if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
+      return;
-        return;
-      }
     }
 
     this.lastPointerDownEvent = event;
@@ -4546,20 +4512,14 @@ class App extends React.Component<AppProps, AppState> {
       selectedElementsAreBeingDragged: false,
     });
 
-    if (
+    if (this.handleDraggingScrollBar(event, pointerDownState)) {
-      this.props.interactive !== false &&
-      this.handleDraggingScrollBar(event, pointerDownState)
-    ) {
       return;
     }
 
     this.clearSelectionIfNotUsingSelection();
     this.updateBindingEnabledOnPointerMove(event);
 
-    if (
+    if (this.handleSelectionOnPointerDown(event, pointerDownState)) {
-      this.props.interactive !== false &&
-      this.handleSelectionOnPointerDown(event, pointerDownState)
-    ) {
       return;
     }
 
@@ -4641,15 +4601,15 @@ class App extends React.Component<AppProps, AppState> {
     const onPointerMove =
       this.onPointerMoveFromPointerDownHandler(pointerDownState);
 
+    const onPointerUp =
+      this.onPointerUpFromPointerDownHandler(pointerDownState);
+
+    const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
+    const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
+
+    lastPointerUp = onPointerUp;
+
     if (!this.state.viewModeEnabled || this.state.activeTool.type === "laser") {
-      const onPointerUp =
-        this.onPointerUpFromPointerDownHandler(pointerDownState);
-
-      const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
-      const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
-
-      lastPointerUp = onPointerUp;
-
       window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
       window.addEventListener(EVENT.POINTER_UP, onPointerUp);
       window.addEventListener(EVENT.KEYDOWN, onKeyDown);
@@ -7844,10 +7804,6 @@ class App extends React.Component<AppProps, AppState> {
   ) => {
     event.preventDefault();
 
-    if (this.props.interactive === false) {
-      return;
-    }
-
     if (
       (("pointerType" in event.nativeEvent &&
         event.nativeEvent.pointerType === "touch") ||
@@ -8259,7 +8215,7 @@ class App extends React.Component<AppProps, AppState> {
       event: WheelEvent | React.WheelEvent<HTMLDivElement | HTMLCanvasElement>,
     ) => {
       event.preventDefault();
-      if (isPanning || this.props.interactive === false) {
+      if (isPanning) {
         return;
       }
 

src/components/LaserTool/LaserPathManager.ts

@@ -91,7 +91,7 @@ export class LaserPathManager {
   private collaboratorsState: Map<string, CollabolatorState> = new Map();
 
   private rafId: number | undefined;
-  private lastUpdate = 0;
+  private isDrawing = false;
   private container: SVGSVGElement | undefined;
 
   constructor(private app: App) {
@@ -100,7 +100,7 @@ export class LaserPathManager {
 
   destroy() {
     this.stop();
-    this.lastUpdate = 0;
+    this.isDrawing = false;
     this.ownState = instantiateCollabolatorState();
     this.collaboratorsState = new Map();
   }
@@ -127,7 +127,7 @@ export class LaserPathManager {
   }
 
   private updatePath(state: CollabolatorState) {
-    this.lastUpdate = performance.now();
+    this.isDrawing = true;
 
     if (!this.isRunning) {
       this.start();
@@ -160,7 +160,7 @@ export class LaserPathManager {
 
     this.updateCollabolatorsState();
 
-    if (performance.now() - this.lastUpdate < DECAY_TIME * 2) {
+    if (this.isDrawing) {
       this.update();
     } else {
       this.isRunning = false;
@@ -250,6 +250,8 @@ export class LaserPathManager {
       return;
     }
 
+    let somePathsExist = false;
+
     for (const [key, state] of this.collaboratorsState.entries()) {
       if (!this.app.state.collaborators.has(key)) {
         state.svg.remove();
@@ -269,6 +271,10 @@ export class LaserPathManager {
         paths += ` ${this.draw(state.currentPath)}`;
       }
 
+      if (paths.trim()) {
+        somePathsExist = true;
+      }
+
       state.svg.setAttribute("d", paths);
       state.svg.setAttribute("fill", getClientColor(key));
     }
@@ -287,7 +293,17 @@ export class LaserPathManager {
       paths += ` ${this.draw(this.ownState.currentPath)}`;
     }
 
+    paths = paths.trim();
+
+    if (paths) {
+      somePathsExist = true;
+    }
+
     this.ownState.svg.setAttribute("d", paths);
     this.ownState.svg.setAttribute("fill", "red");
+
+    if (!somePathsExist) {
+      this.isDrawing = false;
+    }
   }
 }

src/components/LayerUI.tsx

@@ -79,7 +79,6 @@ interface LayerUIProps {
   children?: React.ReactNode;
   app: AppClassProperties;
   isCollaborating: boolean;
-  uiDisabled: boolean;
 }
 
 const DefaultMainMenu: React.FC<{
@@ -138,7 +137,6 @@ const LayerUI = ({
   children,
   app,
   isCollaborating,
-  uiDisabled,
 }: LayerUIProps) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
@@ -356,10 +354,6 @@ const LayerUI = ({
 
   const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);
 
-  if (uiDisabled) {
-    return null;
-  }
-
   const layerUIJSX = (
     <>
       {/* ------------------------- tunneled UI ---------------------------- */}

src/element/dragElements.ts

@@ -1,5 +1,5 @@
 import { updateBoundElements } from "./binding";
-import { getCommonBounds } from "./bounds";
+import { Bounds, getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { NonDeletedExcalidrawElement } from "./types";
@@ -41,14 +41,16 @@ export const dragSelectedElements = (
     elementsInFrames.forEach((element) => elementsToUpdate.add(element));
   }
 
+  const commonBounds = getCommonBounds(Array.from(elementsToUpdate));
+  const adjustedOffset = calculateOffset(
+    commonBounds,
+    offset,
+    snapOffset,
+    gridSize,
+  );
+
   elementsToUpdate.forEach((element) => {
-    updateElementCoords(
+    updateElementCoords(pointerDownState, element, adjustedOffset);
-      pointerDownState,
-      element,
-      offset,
-      snapOffset,
-      gridSize,
-    );
     // update coords of bound text only if we're dragging the container directly
     // (we don't drag the group that it's part of)
     if (
@@ -66,13 +68,7 @@ export const dragSelectedElements = (
         // updating its coords again
         (!textElement.frameId || !frames.includes(textElement.frameId))
       ) {
-        updateElementCoords(
+        updateElementCoords(pointerDownState, textElement, adjustedOffset);
-          pointerDownState,
-          textElement,
-          offset,
-          snapOffset,
-          gridSize,
-        );
       }
     }
     updateBoundElements(element, {
@@ -81,23 +77,20 @@ export const dragSelectedElements = (
   });
 };
 
-const updateElementCoords = (
+const calculateOffset = (
-  pointerDownState: PointerDownState,
+  commonBounds: Bounds,
-  element: NonDeletedExcalidrawElement,
   dragOffset: { x: number; y: number },
   snapOffset: { x: number; y: number },
   gridSize: AppState["gridSize"],
-) => {
+): { x: number; y: number } => {
-  const originalElement =
+  const [x, y] = commonBounds;
-    pointerDownState.originalElements.get(element.id) ?? element;
+  let nextX = x + dragOffset.x + snapOffset.x;
-
+  let nextY = y + dragOffset.y + snapOffset.y;
-  let nextX = originalElement.x + dragOffset.x + snapOffset.x;
-  let nextY = originalElement.y + dragOffset.y + snapOffset.y;
 
   if (snapOffset.x === 0 || snapOffset.y === 0) {
     const [nextGridX, nextGridY] = getGridPoint(
-      originalElement.x + dragOffset.x,
+      x + dragOffset.x,
-      originalElement.y + dragOffset.y,
+      y + dragOffset.y,
       gridSize,
     );
 
@@ -109,6 +102,22 @@ const updateElementCoords = (
       nextY = nextGridY;
     }
   }
+  return {
+    x: nextX - x,
+    y: nextY - y,
+  };
+};
+
+const updateElementCoords = (
+  pointerDownState: PointerDownState,
+  element: NonDeletedExcalidrawElement,
+  dragOffset: { x: number; y: number },
+) => {
+  const originalElement =
+    pointerDownState.originalElements.get(element.id) ?? element;
+
+  const nextX = originalElement.x + dragOffset.x;
+  const nextY = originalElement.y + dragOffset.y;
 
   mutateElement(element, {
     x: nextX,

src/packages/excalidraw/index.tsx

@@ -44,8 +44,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     children,
     validateEmbeddable,
     renderEmbeddable,
-    ui,
-    interactive,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -102,7 +100,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onPointerUpdate={onPointerUpdate}
           renderTopRightUI={renderTopRightUI}
           langCode={langCode}
-          viewModeEnabled={interactive === false ? true : viewModeEnabled}
+          viewModeEnabled={viewModeEnabled}
           zenModeEnabled={zenModeEnabled}
           gridModeEnabled={gridModeEnabled}
           libraryReturnUrl={libraryReturnUrl}
@@ -121,8 +119,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onScrollChange={onScrollChange}
           validateEmbeddable={validateEmbeddable}
           renderEmbeddable={renderEmbeddable}
-          ui={ui}
-          interactive={interactive}
         >
           {children}
         </App>

src/types.ts

@@ -445,8 +445,6 @@ export interface ExcalidrawProps {
     element: NonDeleted<ExcalidrawEmbeddableElement>,
     appState: AppState,
   ) => JSX.Element | null;
-  interactive?: boolean;
-  ui?: boolean;
 }
 
 export type SceneData = {