@mocanvas/editor 4.12.1 → 4.12.2

package/dist/index.js

@@ -14849,6 +14849,8 @@ function resolveTarget(editor, point) {
   if (filled && editor.getSelectedShapeIds().includes(filled.id)) return { target: "shape", shape: filled };
   return { target: "canvas" };
 }
+var IN_FRONT_OF_CANVAS_CLASS = "mocanvas-in-front-of-canvas";
+var IN_FRONT_OF_CANVAS_SELECTOR = `.${IN_FRONT_OF_CANVAS_CLASS}`;
 function useCanvasEvents(editor) {
   return useMemo(() => {
     const pointerInfo = (e, name) => {
@@ -14865,9 +14867,10 @@ function useCanvasEvents(editor) {
       };
     };
     const isHandled = (e) => editor.isEventHandled(e);
+    const isInFrontOfCanvas = (target) => target instanceof Element && target.closest(IN_FRONT_OF_CANVAS_SELECTOR) !== null;
     return {
       onPointerDown(e) {
-        if (isHandled(e)) return;
+        if (isHandled(e) || isInFrontOfCanvas(e.target)) return;
         if (e.button === 2) {
           editor.dispatch(pointerInfo(e, "right_click"));
           return;
@@ -14882,7 +14885,7 @@ function useCanvasEvents(editor) {
         editor.dispatch(down);
       },
       onPointerMove(e) {
-        if (isHandled(e)) return;
+        if (isHandled(e) || isInFrontOfCanvas(e.target)) return;
         if (e.pointerType === "mouse" && e.buttons === 0 && editor.inputs.isPointing) {
           editor.dispatch(pointerInfo(e, "pointer_up"));
           return;
@@ -14890,7 +14893,7 @@ function useCanvasEvents(editor) {
         editor.dispatch(pointerInfo(e, "pointer_move"));
       },
       onPointerUp(e) {
-        if (isHandled(e)) return;
+        if (isHandled(e) || isInFrontOfCanvas(e.target)) return;
         if (e.button === 2) return;
         const el = e.currentTarget;
         if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
@@ -14899,12 +14902,12 @@ function useCanvasEvents(editor) {
         editor.click.handlePointerEvent(up);
       },
       onPointerCancel(e) {
-        if (isHandled(e)) return;
+        if (isHandled(e) || isInFrontOfCanvas(e.target)) return;
         editor.dispatch(pointerInfo(e, "pointer_up"));
         editor.cancel();
       },
       onWheel(e) {
-        if (isHandled(e)) return;
+        if (isHandled(e) || isInFrontOfCanvas(e.target)) return;
         e.preventDefault();
         const point = localPoint(editor, e);
         const scale = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 400 : 1;
@@ -14918,6 +14921,7 @@ function useCanvasEvents(editor) {
         editor.dispatch(info);
       },
       onContextMenu(e) {
+        if (isInFrontOfCanvas(e.target)) return;
         e.preventDefault();
       },
       onKeyDown(e) {
@@ -15127,7 +15131,7 @@ function CanvasBody({ editor, className, style, children, components, indicatorO
           Brush ? /* @__PURE__ */ jsx(Brush, { editor }) : null
         ] }),
         children,
-        InFrontOfTheCanvas ? /* @__PURE__ */ jsx("div", { className: "mocanvas-in-front-of-canvas", style: { ...layerStyle, pointerEvents: "none" }, children: /* @__PURE__ */ jsx(InFrontOfTheCanvas, {}) }) : null
+        InFrontOfTheCanvas ? /* @__PURE__ */ jsx("div", { className: IN_FRONT_OF_CANVAS_CLASS, style: { ...layerStyle, pointerEvents: "none" }, children: /* @__PURE__ */ jsx(InFrontOfTheCanvas, {}) }) : null
       ]
     }
   ) });