diff --git a/src/components/App.tsx b/src/components/App.tsx index d38fa630..f2c58165 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1155,6 +1155,9 @@ class App extends React.Component { 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 diff --git a/src/utils.ts b/src/utils.ts index 5acd1b66..65dfe140 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -21,6 +21,14 @@ import { isEraserActive, isHandToolActive } from "./appState"; import { ResolutionType } from "./utility-types"; import React from "react"; +const laserPointerCursorSVG = ` + +`; + +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; }