feat: laser pointer improvements (#7128)

src/components/App.tsx

@@ -1155,6 +1155,9 @@ class App extends React.Component<AppProps, AppState> {
             this.state.selectionElement ||
             this.state.draggingElement ||
             this.state.resizingElement ||
+            (this.state.activeTool.type === "laser" &&
+              // technically we can just test on this once we make it more safe
+              this.state.cursorButton === "down") ||
             (this.state.editingElement &&
               !isTextElement(this.state.editingElement))
               ? POINTER_EVENTS.disabled

src/utils.ts

@@ -21,6 +21,14 @@ import { isEraserActive, isHandToolActive } from "./appState";
 import { ResolutionType } from "./utility-types";
 import React from "react";
 
+const laserPointerCursorSVG = `<svg viewBox="0 0 20 20" width="20" height="20" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round">
+<path d="m6.771 10.113 7.773 7.774a2.359 2.359 0 0 0 1.667.691 2.368 2.368 0 0 0 2.357-2.358c0-.625-.248-1.225-.69-1.667L10.104 6.78 8.461 8.469l-1.69 1.643v.001Zm10.273 3.606-3.333 3.333m-3.25-6.583 2 2m-7-7 3 3M2.567 2.625l1 1M1.432 5.922l1.407-.144m5.735-2.932-1.118.866M3.188 8.823l.758-1.194m1.863-6.207-.13 1.408" style="fill:none;fill-rule:nonzero;stroke:#1b1b1f;stroke-width:1.25px"/>
+</svg>`;
+
+const laserPointerCursorDataURL = `data:${MIME_TYPES.svg},${encodeURIComponent(
+  `${laserPointerCursorSVG}`,
+)}`;
+
 let mockDateTime: string | null = null;
 
 export const setDateTimeForTests = (dateTime: string) => {
@@ -467,6 +475,9 @@ export const setCursorForShape = (
     // do nothing if image tool is selected which suggests there's
     // a image-preview set as the cursor
     // Ignore custom type as well and let host decide
+  } else if (appState.activeTool.type === "laser") {
+    const url = laserPointerCursorDataURL;
+    interactiveCanvas.style.cursor = `url(${url}), auto`;
   } else if (!["image", "custom"].includes(appState.activeTool.type)) {
     interactiveCanvas.style.cursor = CURSOR_TYPE.CROSSHAIR;
   }