@mocanvas/editor 4.4.1 → 4.4.3

package/dist/index.js

@@ -4,7 +4,7 @@ import { createRecordType, isIndexKey, createMigrationIds, uniqueId, isRecordsDi
 export { ZERO_INDEX_KEY, createComputedCache, getGraphemeLength, getGraphemes, getIndexAbove, getIndexBelow, getIndexBetween, getIndices, getIndicesAbove, getIndicesBelow, getIndicesBetween, iterateGraphemes, sortByIndex } from '@mocanvas/store';
 import { PATH_OP, FLAG, GEO_FLAG, EngineBridge, VERTEX_FLOATS, BATCH_WORDS, readClip } from '@mocanvas/wasm';
 export { EngineBridge, FLAG, GEO_FLAG, GEO_KIND, PATH_OP, getLoadedEngine, loadEngine, loadEngineSync } from '@mocanvas/wasm';
-import { createContext, useRef, useLayoutEffect, useEffect, useContext, useMemo, useCallback, useState, Component, useId } from 'react';
+import { createContext, useEffect, useRef, useLayoutEffect, useContext, useMemo, useId, useCallback, useState, Component } from 'react';
 import { track as track$1, useValue } from '@mocanvas/state/react';
 export { track, useAtom, useComputed, useQuickReactor, useReactor, useStateTracking, useValue } from '@mocanvas/state/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -14432,6 +14432,79 @@ var WebGL2Backend = class {
 function createBackend(canvas) {
   return new WebGL2Backend(canvas);
 }
+var UNSAFE = /[^a-zA-Z0-9_-]/g;
+function sanitizeId(id) {
+  return `mc_${id.replace(UNSAFE, "_")}`;
+}
+var toSafeId = sanitizeId;
+function suffixSafeId(id, suffix) {
+  return `${id}_${suffix.replace(UNSAFE, "_")}`;
+}
+function useUniqueSafeId(suffix) {
+  const id = toSafeId(useId());
+  return suffix === void 0 ? id : suffixSafeId(id, suffix);
+}
+function useSharedSafeId(name) {
+  return toSafeId(name);
+}
+function DefaultCanvas() {
+  const editor = useEditor();
+  return /* @__PURE__ */ jsx(Canvas, { editor });
+}
+function DefaultBackground() {
+  return /* @__PURE__ */ jsx("div", { className: "mocanvas-background", style: { position: "absolute", inset: 0, background: "var(--mocanvas-canvas, transparent)" } });
+}
+function DefaultGrid({ x, y, z, size }) {
+  const id = useSharedSafeId("grid");
+  const step = size * z;
+  const fineOpacity = Math.min(1, Math.max(0, (step - 4) / 12));
+  return /* @__PURE__ */ jsxs("svg", { className: "mocanvas-grid", style: { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx("pattern", { id, width: step, height: step, patternUnits: "userSpaceOnUse", patternTransform: `translate(${x * z} ${y * z})`, children: /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 1, fill: "var(--mocanvas-grid, currentColor)", opacity: fineOpacity * 0.5 }) }),
+      /* @__PURE__ */ jsx("pattern", { id: `${id}_major`, width: step * 5, height: step * 5, patternUnits: "userSpaceOnUse", patternTransform: `translate(${x * z} ${y * z})`, children: /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 1.5, fill: "var(--mocanvas-grid, currentColor)", opacity: 0.8 }) })
+    ] }),
+    /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` }),
+    /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id}_major)` })
+  ] });
+}
+function DefaultSvgDefs({ children }) {
+  return /* @__PURE__ */ jsx("svg", { className: "mocanvas-svg-defs", style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("defs", { children }) });
+}
+function DefaultCursor({ rotation, color, name, point }) {
+  if (!point) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "mocanvas-cursor",
+      style: { position: "absolute", top: 0, left: 0, transform: `translate(${point.x}px, ${point.y}px) rotate(${rotation}rad)`, pointerEvents: "none" },
+      children: [
+        /* @__PURE__ */ jsx("svg", { width: "20", height: "24", viewBox: "0 0 20 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 2l14 10-6 1.5L7 21z", fill: color ?? "currentColor", stroke: "var(--mocanvas-selection-fg, #fff)", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+        name ? /* @__PURE__ */ jsx("div", { className: "mocanvas-cursor-name", style: { position: "absolute", left: 14, top: 18, background: color ?? "currentColor", color: "#fff", borderRadius: 4, padding: "1px 5px", font: "11px/1.4 system-ui, sans-serif", whiteSpace: "nowrap" }, children: name }) : null
+      ]
+    }
+  );
+}
+function DefaultShapeWrapper({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+var MenuClickCapture = track$1(function MenuClickCapture2({ onClose }) {
+  const editor = useMaybeEditor();
+  const isOpen = (editor?.menus.getOpenMenus().length ?? 0) > 0;
+  useEffect(() => {
+    if (!isOpen || !editor) return;
+    return () => void editor.menus.clearOpenMenus();
+  }, [isOpen, editor]);
+  if (!isOpen) return null;
+  const style = { position: "absolute", inset: 0, zIndex: 1 };
+  return /* @__PURE__ */ jsx("div", { className: "mocanvas-menu-click-capture", style, onPointerDown: () => onClose?.(), "aria-hidden": "true" });
+});
+function useIsCropping(shapeId) {
+  const editor = useMaybeEditor();
+  if (!editor) return false;
+  if (!editor.isInAny("select.crop", "select.crop.idle", "select.crop.pointing_crop_handle", "select.crop.cropping")) return false;
+  if (shapeId === void 0) return true;
+  return editor.getOnlySelectedShape()?.id === shapeId;
+}
 
 // src/react/translations.ts
 function getLocaleChain(locale) {
@@ -14869,6 +14942,10 @@ function Canvas({ editor, className, style, children, components, indicatorOverl
   const hasChromeContextMenu = useEditorComponents().ContextMenu != null;
   const themeVars = useThemeCssVars(editor);
   const cameraVars = useCameraCssVars(editor);
+  const isGridMode = useValue("isGridMode", () => editor.getInstanceState().isGridMode, [editor]);
+  const camera = useValue("camera", () => editor.getCamera(), [editor]);
+  const gridSize = useValue("gridSize", () => editor.getDocumentSettings().gridSize, [editor]);
+  const Grid = components?.Grid === void 0 ? DefaultGrid : components.Grid;
   const Indicators = components?.Indicators ?? DefaultIndicators;
   const Brush = components?.Brush ?? (hasOverlay(editor, "brush") ? null : DefaultBrush);
   const Background = components?.Background;
@@ -14887,6 +14964,7 @@ function Canvas({ editor, className, style, children, components, indicatorOverl
       "data-testid": "mocanvas-container",
       children: [
         Background ? /* @__PURE__ */ jsx(Background, { editor }) : null,
+        Grid !== null && isGridMode ? /* @__PURE__ */ jsx(Grid, { x: camera.x, y: camera.y, z: camera.z, size: gridSize }) : null,
         /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: { ...layerStyle, display: "block" } }),
         /* @__PURE__ */ jsx(OverlayLayer, { editor }),
         /* @__PURE__ */ jsx(IndicatorCanvas, { editor, util: indicatorOverlayUtil ?? ShapeIndicatorCompositor }),
@@ -15307,79 +15385,6 @@ function EditorPortal({ container, children }) {
   if (!target) return /* @__PURE__ */ jsx(Fragment, { children });
   return createPortal(children, target);
 }
-var UNSAFE = /[^a-zA-Z0-9_-]/g;
-function sanitizeId(id) {
-  return `mc_${id.replace(UNSAFE, "_")}`;
-}
-var toSafeId = sanitizeId;
-function suffixSafeId(id, suffix) {
-  return `${id}_${suffix.replace(UNSAFE, "_")}`;
-}
-function useUniqueSafeId(suffix) {
-  const id = toSafeId(useId());
-  return suffix === void 0 ? id : suffixSafeId(id, suffix);
-}
-function useSharedSafeId(name) {
-  return toSafeId(name);
-}
-function DefaultCanvas() {
-  const editor = useEditor();
-  return /* @__PURE__ */ jsx(Canvas, { editor });
-}
-function DefaultBackground() {
-  return /* @__PURE__ */ jsx("div", { className: "mocanvas-background", style: { position: "absolute", inset: 0, background: "var(--mocanvas-canvas, transparent)" } });
-}
-function DefaultGrid({ x, y, z, size }) {
-  const id = useSharedSafeId("grid");
-  const step = size * z;
-  const fineOpacity = Math.min(1, Math.max(0, (step - 4) / 12));
-  return /* @__PURE__ */ jsxs("svg", { className: "mocanvas-grid", style: { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsx("pattern", { id, width: step, height: step, patternUnits: "userSpaceOnUse", patternTransform: `translate(${x * z} ${y * z})`, children: /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 1, fill: "var(--mocanvas-grid, currentColor)", opacity: fineOpacity * 0.5 }) }),
-      /* @__PURE__ */ jsx("pattern", { id: `${id}_major`, width: step * 5, height: step * 5, patternUnits: "userSpaceOnUse", patternTransform: `translate(${x * z} ${y * z})`, children: /* @__PURE__ */ jsx("circle", { cx: 0, cy: 0, r: 1.5, fill: "var(--mocanvas-grid, currentColor)", opacity: 0.8 }) })
-    ] }),
-    /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` }),
-    /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id}_major)` })
-  ] });
-}
-function DefaultSvgDefs({ children }) {
-  return /* @__PURE__ */ jsx("svg", { className: "mocanvas-svg-defs", style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("defs", { children }) });
-}
-function DefaultCursor({ rotation, color, name, point }) {
-  if (!point) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "mocanvas-cursor",
-      style: { position: "absolute", top: 0, left: 0, transform: `translate(${point.x}px, ${point.y}px) rotate(${rotation}rad)`, pointerEvents: "none" },
-      children: [
-        /* @__PURE__ */ jsx("svg", { width: "20", height: "24", viewBox: "0 0 20 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 2l14 10-6 1.5L7 21z", fill: color ?? "currentColor", stroke: "var(--mocanvas-selection-fg, #fff)", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
-        name ? /* @__PURE__ */ jsx("div", { className: "mocanvas-cursor-name", style: { position: "absolute", left: 14, top: 18, background: color ?? "currentColor", color: "#fff", borderRadius: 4, padding: "1px 5px", font: "11px/1.4 system-ui, sans-serif", whiteSpace: "nowrap" }, children: name }) : null
-      ]
-    }
-  );
-}
-function DefaultShapeWrapper({ children }) {
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
-var MenuClickCapture = track$1(function MenuClickCapture2({ onClose }) {
-  const editor = useMaybeEditor();
-  const isOpen = (editor?.menus.getOpenMenus().length ?? 0) > 0;
-  useEffect(() => {
-    if (!isOpen || !editor) return;
-    return () => void editor.menus.clearOpenMenus();
-  }, [isOpen, editor]);
-  if (!isOpen) return null;
-  const style = { position: "absolute", inset: 0, zIndex: 1 };
-  return /* @__PURE__ */ jsx("div", { className: "mocanvas-menu-click-capture", style, onPointerDown: () => onClose?.(), "aria-hidden": "true" });
-});
-function useIsCropping(shapeId) {
-  const editor = useMaybeEditor();
-  if (!editor) return false;
-  if (!editor.isInAny("select.crop", "select.crop.idle", "select.crop.pointing_crop_handle", "select.crop.cropping")) return false;
-  if (shapeId === void 0) return true;
-  return editor.getOnlySelectedShape()?.id === shapeId;
-}
 function useTransform(ref, x, y, scale, rotate, additionalOffset) {
   useLayoutEffect(() => {
     const elm = ref.current;