fix setting stale cursor on tool change

* 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>

dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx

@@ -30,6 +30,7 @@ All `props` are *optional*.
 | [`generateIdForFile`](#generateidforfile) | `function` | _ | Allows you to override `id` generation for files added on canvas |
 | [`validateEmbeddable`](#validateEmbeddable) | string[] | `boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined)` | \_ | use for custom src url validation |
 | [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |
+| [`activeTool`](#activeTool) | `object` | - | Set the active editor tool (forced) |
 
 ### Storing custom data on Excalidraw elements
 
@@ -236,4 +237,19 @@ validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) =>
 
 This is an optional property. By default we support a handful of well-known sites. You may allow additional sites or disallow the default ones by supplying a custom validator. If you pass `true`, all URLs will be allowed. You can also supply a list of hostnames, RegExp (or list of RegExp objects), or a function. If the function returns `undefined`, the built-in validator will be used.
 
-Supplying a list of hostnames (with or without `www.`) is the preferred way to allow a specific list of domains.
+Supplying a list of hostnames (with or without `www.`) is the preferred way to allow a specific list of domains.
+
+### activeTool
+
+```ts
+activeTool?: 
+  | {
+      type: ToolType;
+    }
+  | {
+      type: "custom";
+      customType: string;
+    };
+```
+
+Tool to be force-set as active. As long as the prop is set, the editor active tool will be set to this. Useful only in specific circumstances such as when UI is disabled and the editor should be limited to just one tool (such as a laser pointer).

src/components/App.tsx

@@ -1903,6 +1903,13 @@ class App extends React.Component<AppProps, AppState> {
       this.refreshDeviceState(this.excalidrawContainerRef.current);
     }
 
+    if (
+      this.props.activeTool &&
+      this.props.activeTool.type !== this.state.activeTool.type
+    ) {
+      this.setActiveTool(this.props.activeTool);
+    }
+
     if (
       prevState.scrollX !== this.state.scrollX ||
       prevState.scrollY !== this.state.scrollY
@@ -3136,11 +3143,7 @@ class App extends React.Component<AppProps, AppState> {
       | { type: "custom"; customType: string },
   ) => {
     const nextActiveTool = updateActiveTool(this.state, tool);
-    if (nextActiveTool.type === "hand") {
-      setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
-    } else if (!isHoldingSpace) {
-      setCursorForShape(this.interactiveCanvas, this.state);
-    }
+
     if (isToolIcon(document.activeElement)) {
       this.focusContainer();
     }
@@ -3157,8 +3160,10 @@ class App extends React.Component<AppProps, AppState> {
         originSnapOffset: null,
         activeEmbeddable: null,
       } as const;
+      let nextState: AppState;
+
       if (nextActiveTool.type !== "selection") {
-        return {
+        nextState = {
           ...prevState,
           activeTool: nextActiveTool,
           selectedElementIds: makeNextSelectedElementIds({}, prevState),
@@ -3167,12 +3172,21 @@ class App extends React.Component<AppProps, AppState> {
           multiElement: null,
           ...commonResets,
         };
+      } else {
+        nextState = {
+          ...prevState,
+          activeTool: nextActiveTool,
+          ...commonResets,
+        };
       }
-      return {
-        ...prevState,
-        activeTool: nextActiveTool,
-        ...commonResets,
-      };
+
+      if (nextActiveTool.type === "hand") {
+        setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
+      } else if (!isHoldingSpace) {
+        setCursorForShape(this.interactiveCanvas, nextState);
+      }
+
+      return nextState;
     });
   };
 

src/components/LaserTool/LaserPathManager.ts

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

@@ -1,5 +1,5 @@
 import { updateBoundElements } from "./binding";
-import { Bounds, getCommonBounds } from "./bounds";
+import { getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { NonDeletedExcalidrawElement } from "./types";
@@ -41,16 +41,14 @@ 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(pointerDownState, element, adjustedOffset);
+    updateElementCoords(
+      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 (
@@ -68,7 +66,13 @@ export const dragSelectedElements = (
         // updating its coords again
         (!textElement.frameId || !frames.includes(textElement.frameId))
       ) {
-        updateElementCoords(pointerDownState, textElement, adjustedOffset);
+        updateElementCoords(
+          pointerDownState,
+          textElement,
+          offset,
+          snapOffset,
+          gridSize,
+        );
       }
     }
     updateBoundElements(element, {
@@ -77,20 +81,23 @@ export const dragSelectedElements = (
   });
 };
 
-const calculateOffset = (
-  commonBounds: Bounds,
+const updateElementCoords = (
+  pointerDownState: PointerDownState,
+  element: NonDeletedExcalidrawElement,
   dragOffset: { x: number; y: number },
   snapOffset: { x: number; y: number },
   gridSize: AppState["gridSize"],
-): { x: number; y: number } => {
-  const [x, y] = commonBounds;
-  let nextX = x + dragOffset.x + snapOffset.x;
-  let nextY = y + dragOffset.y + snapOffset.y;
+) => {
+  const originalElement =
+    pointerDownState.originalElements.get(element.id) ?? element;
+
+  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(
-      x + dragOffset.x,
-      y + dragOffset.y,
+      originalElement.x + dragOffset.x,
+      originalElement.y + dragOffset.y,
       gridSize,
     );
 
@@ -102,22 +109,6 @@ const calculateOffset = (
       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,6 +44,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     children,
     validateEmbeddable,
     renderEmbeddable,
+    activeTool,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -119,6 +120,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onScrollChange={onScrollChange}
           validateEmbeddable={validateEmbeddable}
           renderEmbeddable={renderEmbeddable}
+          activeTool={activeTool}
         >
           {children}
         </App>

src/types.ts

@@ -445,6 +445,14 @@ export interface ExcalidrawProps {
     element: NonDeleted<ExcalidrawEmbeddableElement>,
     appState: AppState,
   ) => JSX.Element | null;
+  activeTool?:
+    | {
+        type: ToolType;
+      }
+    | {
+        type: "custom";
+        customType: string;
+      };
 }
 
 export type SceneData = {