@fieldnotes/react 0.14.0 → 0.14.1

package/README.md

@@ -8,7 +8,7 @@ React bindings for the [Field Notes](https://github.com/IrakliDevelop/fieldnotes
 npm install @fieldnotes/core @fieldnotes/react
 ```
 
-Requires React 18+.
+Requires React 18+. Using Vue or Svelte? See [`@fieldnotes/vue`](../vue) and [`@fieldnotes/svelte`](../svelte).
 
 ## Quick Start
 

package/dist/index.cjs

@@ -193,12 +193,11 @@ function CanvasElement({ position, size, children }) {
     };
     elementIdRef.current = register();
     setPortalTarget(container);
-    let disposed = false;
     const handleStoreReplacement = () => {
       const clearedId = elementIdRef.current;
       if (clearedId === null) return;
       queueMicrotask(() => {
-        if (disposed || elementIdRef.current !== clearedId) return;
+        if (elementIdRef.current !== clearedId) return;
         if (viewport.store.getById(clearedId)?.type === "html") {
           viewport.updateHtmlElement(clearedId, container);
         } else {
@@ -210,7 +209,6 @@ function CanvasElement({ position, size, children }) {
     const unsubscribeClear = viewport.store.on("clear", handleStoreReplacement);
     const unsubscribeBatch = viewport.store.on("batch", handleStoreReplacement);
     return () => {
-      disposed = true;
       unsubscribeClear();
       unsubscribeBatch();
       if (elementIdRef.current) {
@@ -235,65 +233,40 @@ function CanvasElement({ position, size, children }) {
 
 // src/hooks/use-active-tool.ts
 var import_react5 = require("react");
+var import_core2 = require("@fieldnotes/core");
 function useActiveTool() {
   const viewport = useViewport();
-  const subscribe = (0, import_react5.useCallback)(
-    (onStoreChange) => viewport.toolManager.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = (0, import_react5.useCallback)(() => viewport.toolManager.activeTool?.name ?? "", [viewport]);
-  const toolName = (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot);
+  const source = (0, import_react5.useMemo)(() => (0, import_core2.createActiveToolSource)(viewport), [viewport]);
+  const toolName = (0, import_react5.useSyncExternalStore)(source.subscribe, source.getSnapshot);
   const setTool = (0, import_react5.useCallback)((name) => viewport.setTool(name), [viewport]);
   return [toolName, setTool];
 }
 
 // src/hooks/use-camera.ts
 var import_react6 = require("react");
+var import_core3 = require("@fieldnotes/core");
 function useCamera() {
   const viewport = useViewport();
-  const cachedRef = (0, import_react6.useRef)({ x: 0, y: 0, zoom: 1 });
-  const subscribe = (0, import_react6.useCallback)(
-    (onStoreChange) => viewport.camera.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = (0, import_react6.useCallback)(() => {
-    const { position, zoom } = viewport.camera;
-    const cached = cachedRef.current;
-    if (cached.x === position.x && cached.y === position.y && cached.zoom === zoom) {
-      return cached;
-    }
-    const next = { x: position.x, y: position.y, zoom };
-    cachedRef.current = next;
-    return next;
-  }, [viewport]);
-  return (0, import_react6.useSyncExternalStore)(subscribe, getSnapshot);
+  const source = (0, import_react6.useMemo)(() => (0, import_core3.createCameraSource)(viewport), [viewport]);
+  return (0, import_react6.useSyncExternalStore)(source.subscribe, source.getSnapshot);
 }
 
 // src/hooks/use-tool-options.ts
 var import_react7 = require("react");
-function noop() {
-}
+var import_core4 = require("@fieldnotes/core");
 function useToolOptions(toolName) {
   const viewport = useViewport();
-  const cachedRef = (0, import_react7.useRef)(null);
+  const nameRef = (0, import_react7.useRef)(toolName);
+  nameRef.current = toolName;
+  const source = (0, import_react7.useMemo)(
+    () => (0, import_core4.createToolOptionsSource)(viewport, () => nameRef.current),
+    [viewport]
+  );
   const subscribe = (0, import_react7.useCallback)(
-    (onStoreChange) => {
-      const tool = viewport.toolManager.getTool(toolName);
-      if (!tool?.onOptionsChange) return noop;
-      return tool.onOptionsChange(onStoreChange);
-    },
-    [viewport, toolName]
+    (onStoreChange) => source.subscribe(onStoreChange),
+    [source, toolName]
   );
-  const getSnapshot = (0, import_react7.useCallback)(() => {
-    const tool = viewport.toolManager.getTool(toolName);
-    if (!tool?.getOptions) return null;
-    const next = tool.getOptions();
-    const cached = cachedRef.current;
-    if (cached && shallowEqual(cached, next)) return cached;
-    cachedRef.current = next;
-    return next;
-  }, [viewport, toolName]);
-  const options = (0, import_react7.useSyncExternalStore)(subscribe, getSnapshot);
+  const options = (0, import_react7.useSyncExternalStore)(subscribe, source.getSnapshot);
   const setOptions = (0, import_react7.useCallback)(
     (partial) => {
       const tool = viewport.toolManager.getTool(toolName);
@@ -303,51 +276,14 @@ function useToolOptions(toolName) {
   );
   return [options, setOptions];
 }
-function shallowEqual(a, b) {
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  for (const key of keysA) {
-    const valA = a[key];
-    const valB = b[key];
-    if (valA === valB) continue;
-    if (typeof valA === "object" && valA !== null && typeof valB === "object" && valB !== null && !Array.isArray(valA) && !Array.isArray(valB)) {
-      const objA = valA;
-      const objB = valB;
-      const innerKeys = Object.keys(objA);
-      if (innerKeys.length === Object.keys(objB).length && innerKeys.every((k) => objA[k] === objB[k])) {
-        continue;
-      }
-    }
-    return false;
-  }
-  return true;
-}
 
 // src/hooks/use-layers.ts
 var import_react8 = require("react");
+var import_core5 = require("@fieldnotes/core");
 function useLayers() {
   const viewport = useViewport();
-  const cachedRef = (0, import_react8.useRef)({ layers: [], activeLayerId: "" });
-  const subscribe = (0, import_react8.useCallback)(
-    (onStoreChange) => viewport.layerManager.on("change", onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = (0, import_react8.useCallback)(() => {
-    const layers = viewport.layerManager.getLayers();
-    const activeLayerId = viewport.layerManager.activeLayerId;
-    const cached = cachedRef.current;
-    if (cached.activeLayerId === activeLayerId && cached.layers.length === layers.length && cached.layers.every((l, i) => {
-      const next2 = layers[i];
-      return next2 !== void 0 && l.id === next2.id && l.name === next2.name && l.visible === next2.visible && l.locked === next2.locked && l.order === next2.order && l.opacity === next2.opacity;
-    })) {
-      return cached;
-    }
-    const next = { layers, activeLayerId };
-    cachedRef.current = next;
-    return next;
-  }, [viewport]);
-  const snapshot = (0, import_react8.useSyncExternalStore)(subscribe, getSnapshot);
+  const source = (0, import_react8.useMemo)(() => (0, import_core5.createLayersSource)(viewport), [viewport]);
+  const snapshot = (0, import_react8.useSyncExternalStore)(source.subscribe, source.getSnapshot);
   const createLayer = (0, import_react8.useCallback)(
     (name) => viewport.layerManager.createLayer(name),
     [viewport]
@@ -401,25 +337,11 @@ function useLayers() {
 
 // src/hooks/use-history.ts
 var import_react9 = require("react");
+var import_core6 = require("@fieldnotes/core");
 function useHistory() {
   const viewport = useViewport();
-  const cachedRef = (0, import_react9.useRef)({ canUndo: false, canRedo: false });
-  const subscribe = (0, import_react9.useCallback)(
-    (onStoreChange) => viewport.history.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = (0, import_react9.useCallback)(() => {
-    const canUndo = viewport.history.canUndo;
-    const canRedo = viewport.history.canRedo;
-    const cached = cachedRef.current;
-    if (cached.canUndo === canUndo && cached.canRedo === canRedo) {
-      return cached;
-    }
-    const next = { canUndo, canRedo };
-    cachedRef.current = next;
-    return next;
-  }, [viewport]);
-  const snapshot = (0, import_react9.useSyncExternalStore)(subscribe, getSnapshot);
+  const source = (0, import_react9.useMemo)(() => (0, import_core6.createHistorySource)(viewport), [viewport]);
+  const snapshot = (0, import_react9.useSyncExternalStore)(source.subscribe, source.getSnapshot);
   const undo = (0, import_react9.useCallback)(() => viewport.undo(), [viewport]);
   const redo = (0, import_react9.useCallback)(() => viewport.redo(), [viewport]);
   return {
@@ -432,186 +354,69 @@ function useHistory() {
 
 // src/hooks/use-elements.ts
 var import_react10 = require("react");
-function shallowEqual2(a, b) {
-  if (Object.is(a, b)) return true;
-  if (Array.isArray(a) && Array.isArray(b)) {
-    return a.length === b.length && a.every((v, i) => Object.is(v, b[i]));
-  }
-  if (typeof a === "object" && a !== null && typeof b === "object" && b !== null && !Array.isArray(a) && !Array.isArray(b)) {
-    const ka = Object.keys(a);
-    const kb = Object.keys(b);
-    return ka.length === kb.length && ka.every(
-      (k) => k in b && Object.is(a[k], b[k])
-    );
-  }
-  return false;
-}
+var import_core7 = require("@fieldnotes/core");
 function useElements(arg, isEqual) {
   const viewport = useViewport();
-  const cachedRef = (0, import_react10.useRef)([]);
-  const selectedRef = (0, import_react10.useRef)(null);
-  const subscribe = (0, import_react10.useCallback)(
-    (onStoreChange) => viewport.store.onChange(onStoreChange),
+  const latest = (0, import_react10.useRef)({ arg, isEqual });
+  latest.current = { arg, isEqual };
+  const elementsSource = (0, import_react10.useMemo)(
+    () => (0, import_core7.createElementsSource)(viewport, () => {
+      const a = latest.current.arg;
+      return typeof a === "function" ? void 0 : a;
+    }),
     [viewport]
   );
-  const getSnapshot = (0, import_react10.useCallback)(() => {
-    if (typeof arg === "function") {
-      const next2 = arg(viewport.store.getAll());
-      const prev = selectedRef.current;
-      const equal = isEqual ?? shallowEqual2;
-      if (prev !== null && equal(prev.value, next2)) {
-        return prev.value;
-      }
-      selectedRef.current = { value: next2 };
-      return next2;
-    }
-    const next = arg ? viewport.store.getElementsByType(arg) : viewport.store.getAll();
-    const cached = cachedRef.current;
-    if (cached.length === next.length && cached.every((el, i) => el === next[i])) {
-      return cached;
-    }
-    cachedRef.current = next;
-    return next;
-  }, [viewport, arg, isEqual]);
-  return (0, import_react10.useSyncExternalStore)(subscribe, getSnapshot);
+  const selectorSource = (0, import_react10.useMemo)(
+    () => (0, import_core7.createElementsSelectorSource)(
+      viewport,
+      // Only read while `arg` is a selector: the source is picked below by `typeof arg`.
+      () => latest.current.arg,
+      () => latest.current.isEqual
+    ),
+    [viewport]
+  );
+  const source = typeof arg === "function" ? selectorSource : elementsSource;
+  return (0, import_react10.useSyncExternalStore)(source.subscribe, source.getSnapshot);
 }
 
 // src/hooks/use-selection.ts
 var import_react11 = require("react");
+var import_core8 = require("@fieldnotes/core");
 function useSelection() {
   const viewport = useViewport();
-  const subscribe = (0, import_react11.useCallback)(
-    (onChange) => viewport.onSelectionChange(onChange),
-    [viewport]
-  );
-  const getSnapshot = (0, import_react11.useCallback)(() => viewport.getSelectedIds(), [viewport]);
-  return (0, import_react11.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const source = (0, import_react11.useMemo)(() => (0, import_core8.createSelectionSource)(viewport), [viewport]);
+  return (0, import_react11.useSyncExternalStore)(source.subscribe, source.getSnapshot, source.getSnapshot);
 }
 
 // src/hooks/use-selection-style.ts
 var import_react12 = require("react");
-
-// src/hooks/style-keys.ts
-var STYLE_KEYS = [
-  "color",
-  "fillColor",
-  "strokeWidth",
-  "opacity",
-  "fontSize",
-  "strokeStyle"
-];
-
-// src/hooks/use-selection-style.ts
-function styleEqual(a, b) {
-  if (a === b) return true;
-  if (a === null || b === null) return false;
-  return STYLE_KEYS.every((k) => a[k] === b[k]);
-}
+var import_core9 = require("@fieldnotes/core");
 function useSelectionStyle() {
   const viewport = useViewport();
-  const cacheRef = (0, import_react12.useRef)(null);
-  const subscribe = (0, import_react12.useCallback)(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = (0, import_react12.useCallback)(() => {
-    const next = viewport.getSelectionStyle();
-    if (styleEqual(cacheRef.current, next)) return cacheRef.current;
-    cacheRef.current = next;
-    return next;
-  }, [viewport]);
-  const style = (0, import_react12.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const source = (0, import_react12.useMemo)(() => (0, import_core9.createSelectionStyleSource)(viewport), [viewport]);
+  const style = (0, import_react12.useSyncExternalStore)(source.subscribe, source.getSnapshot, source.getSnapshot);
   const apply = (0, import_react12.useCallback)((s) => viewport.applyStyleToSelection(s), [viewport]);
   return [style, apply];
 }
 
 // src/hooks/use-selection-style-details.ts
 var import_react13 = require("react");
-function keysEqual(a, b) {
-  return a.length === b.length && a.every((k, i) => k === b[i]);
-}
-function detailsEqual(a, b) {
-  if (a === b) return true;
-  if (a === null || b === null) return false;
-  return keysEqual(a.applicable, b.applicable) && keysEqual(a.mixed, b.mixed) && STYLE_KEYS.every((k) => a.common[k] === b.common[k]);
-}
+var import_core10 = require("@fieldnotes/core");
 function useSelectionStyleDetails() {
   const viewport = useViewport();
-  const cacheRef = (0, import_react13.useRef)(null);
-  const subscribe = (0, import_react13.useCallback)(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = (0, import_react13.useCallback)(() => {
-    const next = viewport.getSelectionStyleDetails();
-    if (detailsEqual(cacheRef.current, next)) return cacheRef.current;
-    cacheRef.current = next;
-    return next;
-  }, [viewport]);
-  const details = (0, import_react13.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const source = (0, import_react13.useMemo)(() => (0, import_core10.createSelectionStyleDetailsSource)(viewport), [viewport]);
+  const details = (0, import_react13.useSyncExternalStore)(source.subscribe, source.getSnapshot, source.getSnapshot);
   const apply = (0, import_react13.useCallback)((s) => viewport.applyStyleToSelection(s), [viewport]);
   return [details, apply];
 }
 
 // src/hooks/use-selection-ops.ts
 var import_react14 = require("react");
-function snapshotEqual(a, b) {
-  return a.selectedIds === b.selectedIds && a.canGroup === b.canGroup && a.canUngroup === b.canUngroup && a.canAlign === b.canAlign && a.canDistribute === b.canDistribute && a.isLocked === b.isLocked;
-}
+var import_core11 = require("@fieldnotes/core");
 function useSelectionOps() {
   const viewport = useViewport();
-  const cacheRef = (0, import_react14.useRef)(null);
-  const subscribe = (0, import_react14.useCallback)(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = (0, import_react14.useCallback)(() => {
-    const ids = viewport.getSelectedIds();
-    const n = ids.length;
-    let canUngroup = false;
-    let lockedCount = 0;
-    for (const id of ids) {
-      const el = viewport.store.getById(id);
-      if (!el) continue;
-      if (el.groupId !== void 0) canUngroup = true;
-      if (el.locked) lockedCount++;
-    }
-    const isLocked = n === 0 ? null : lockedCount === n ? true : lockedCount === 0 ? false : null;
-    const next = {
-      selectedIds: ids,
-      canGroup: n >= 2,
-      canUngroup,
-      canAlign: n >= 2,
-      canDistribute: n >= 3,
-      isLocked
-    };
-    const prev = cacheRef.current;
-    if (prev && snapshotEqual(prev, next)) return prev;
-    cacheRef.current = next;
-    return next;
-  }, [viewport]);
-  const snap = (0, import_react14.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const source = (0, import_react14.useMemo)(() => (0, import_core11.createSelectionOpsSource)(viewport), [viewport]);
+  const snap = (0, import_react14.useSyncExternalStore)(source.subscribe, source.getSnapshot, source.getSnapshot);
   const group = (0, import_react14.useCallback)(() => viewport.groupSelection(), [viewport]);
   const ungroup = (0, import_react14.useCallback)(() => viewport.ungroupSelection(), [viewport]);
   const toggleLock = (0, import_react14.useCallback)(() => viewport.toggleLockSelection(), [viewport]);
@@ -642,7 +447,7 @@ function useSelectionOps() {
 
 // src/hooks/use-element-rects.ts
 var import_react15 = require("react");
-var import_core2 = require("@fieldnotes/core");
+var import_core12 = require("@fieldnotes/core");
 function useElementRects(match) {
   const viewport = useViewport();
   const matchRef = (0, import_react15.useRef)(match);
@@ -652,11 +457,11 @@ function useElementRects(match) {
   const trackerRef = (0, import_react15.useRef)(null);
   const subscribe = (0, import_react15.useCallback)(
     (onStoreChange) => {
-      const tracker = new import_core2.ElementRectTracker(viewport, { match: stableMatch });
+      const tracker = new import_core12.ElementRectTracker(viewport, { match: stableMatch });
       trackerRef.current = tracker;
       const next = tracker.getRects();
       const previous = cacheRef.current;
-      if (previous === null || !(0, import_core2.elementRectsEqual)(previous, next)) {
+      if (previous === null || !(0, import_core12.elementRectsEqual)(previous, next)) {
         cacheRef.current = next;
         onStoreChange();
       }
@@ -674,7 +479,7 @@ function useElementRects(match) {
   );
   const getSnapshot = (0, import_react15.useCallback)(() => {
     if (cacheRef.current === null) {
-      cacheRef.current = (0, import_core2.computeElementRects)(viewport.store, stableMatch);
+      cacheRef.current = (0, import_core12.computeElementRects)(viewport.store, stableMatch);
     }
     return cacheRef.current;
   }, [viewport, stableMatch]);
@@ -687,7 +492,7 @@ function useElementRects(match) {
 
 // src/minimap.tsx
 var import_react16 = require("react");
-var import_core3 = require("@fieldnotes/core");
+var import_core13 = require("@fieldnotes/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var toggleStyle = {
   position: "absolute",
@@ -719,7 +524,7 @@ function Minimap({
     if (collapsed) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
-    const controller = new import_core3.MinimapController(viewport, canvas, {
+    const controller = new import_core13.MinimapController(viewport, canvas, {
       width,
       height,
       background,