@fieldnotes/react 0.14.0 → 0.14.1

package/dist/index.js

@@ -158,12 +158,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 {
@@ -175,7 +174,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) {
@@ -199,67 +197,42 @@ function CanvasElement({ position, size, children }) {
 }
 
 // src/hooks/use-active-tool.ts
-import { useCallback, useSyncExternalStore } from "react";
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+import { createActiveToolSource } from "@fieldnotes/core";
 function useActiveTool() {
   const viewport = useViewport();
-  const subscribe = useCallback(
-    (onStoreChange) => viewport.toolManager.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = useCallback(() => viewport.toolManager.activeTool?.name ?? "", [viewport]);
-  const toolName = useSyncExternalStore(subscribe, getSnapshot);
+  const source = useMemo(() => createActiveToolSource(viewport), [viewport]);
+  const toolName = useSyncExternalStore(source.subscribe, source.getSnapshot);
   const setTool = useCallback((name) => viewport.setTool(name), [viewport]);
   return [toolName, setTool];
 }
 
 // src/hooks/use-camera.ts
-import { useCallback as useCallback2, useRef as useRef3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useMemo as useMemo2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { createCameraSource } from "@fieldnotes/core";
 function useCamera() {
   const viewport = useViewport();
-  const cachedRef = useRef3({ x: 0, y: 0, zoom: 1 });
-  const subscribe = useCallback2(
-    (onStoreChange) => viewport.camera.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = useCallback2(() => {
-    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 useSyncExternalStore2(subscribe, getSnapshot);
+  const source = useMemo2(() => createCameraSource(viewport), [viewport]);
+  return useSyncExternalStore2(source.subscribe, source.getSnapshot);
 }
 
 // src/hooks/use-tool-options.ts
-import { useCallback as useCallback3, useRef as useRef4, useSyncExternalStore as useSyncExternalStore3 } from "react";
-function noop() {
-}
+import { useCallback as useCallback2, useMemo as useMemo3, useRef as useRef3, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { createToolOptionsSource } from "@fieldnotes/core";
 function useToolOptions(toolName) {
   const viewport = useViewport();
-  const cachedRef = useRef4(null);
-  const subscribe = useCallback3(
-    (onStoreChange) => {
-      const tool = viewport.toolManager.getTool(toolName);
-      if (!tool?.onOptionsChange) return noop;
-      return tool.onOptionsChange(onStoreChange);
-    },
-    [viewport, toolName]
+  const nameRef = useRef3(toolName);
+  nameRef.current = toolName;
+  const source = useMemo3(
+    () => createToolOptionsSource(viewport, () => nameRef.current),
+    [viewport]
   );
-  const getSnapshot = useCallback3(() => {
-    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 = useSyncExternalStore3(subscribe, getSnapshot);
-  const setOptions = useCallback3(
+  const subscribe = useCallback2(
+    (onStoreChange) => source.subscribe(onStoreChange),
+    [source, toolName]
+  );
+  const options = useSyncExternalStore3(subscribe, source.getSnapshot);
+  const setOptions = useCallback2(
     (partial) => {
       const tool = viewport.toolManager.getTool(toolName);
       tool?.setOptions?.(partial);
@@ -268,84 +241,47 @@ 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
-import { useCallback as useCallback4, useRef as useRef5, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo4, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { createLayersSource } from "@fieldnotes/core";
 function useLayers() {
   const viewport = useViewport();
-  const cachedRef = useRef5({ layers: [], activeLayerId: "" });
-  const subscribe = useCallback4(
-    (onStoreChange) => viewport.layerManager.on("change", onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = useCallback4(() => {
-    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 = useSyncExternalStore4(subscribe, getSnapshot);
-  const createLayer = useCallback4(
+  const source = useMemo4(() => createLayersSource(viewport), [viewport]);
+  const snapshot = useSyncExternalStore4(source.subscribe, source.getSnapshot);
+  const createLayer = useCallback3(
     (name) => viewport.layerManager.createLayer(name),
     [viewport]
   );
-  const removeLayer = useCallback4(
+  const removeLayer = useCallback3(
     (id) => viewport.layerManager.removeLayer(id),
     [viewport]
   );
-  const renameLayer = useCallback4(
+  const renameLayer = useCallback3(
     (id, name) => viewport.layerManager.renameLayer(id, name),
     [viewport]
   );
-  const reorderLayer = useCallback4(
+  const reorderLayer = useCallback3(
     (id, newOrder) => viewport.layerManager.reorderLayer(id, newOrder),
     [viewport]
   );
-  const setVisible = useCallback4(
+  const setVisible = useCallback3(
     (id, visible) => viewport.layerManager.setLayerVisible(id, visible),
     [viewport]
   );
-  const setLocked = useCallback4(
+  const setLocked = useCallback3(
     (id, locked) => viewport.layerManager.setLayerLocked(id, locked),
     [viewport]
   );
-  const setOpacity = useCallback4(
+  const setOpacity = useCallback3(
     (id, opacity) => viewport.layerManager.setLayerOpacity(id, opacity),
     [viewport]
   );
-  const setActiveLayer = useCallback4(
+  const setActiveLayer = useCallback3(
     (id) => viewport.layerManager.setActiveLayer(id),
     [viewport]
   );
-  const moveElement = useCallback4(
+  const moveElement = useCallback3(
     (elementId, layerId) => viewport.layerManager.moveElementToLayer(elementId, layerId),
     [viewport]
   );
@@ -365,28 +301,14 @@ function useLayers() {
 }
 
 // src/hooks/use-history.ts
-import { useCallback as useCallback5, useRef as useRef6, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo5, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { createHistorySource } from "@fieldnotes/core";
 function useHistory() {
   const viewport = useViewport();
-  const cachedRef = useRef6({ canUndo: false, canRedo: false });
-  const subscribe = useCallback5(
-    (onStoreChange) => viewport.history.onChange(onStoreChange),
-    [viewport]
-  );
-  const getSnapshot = useCallback5(() => {
-    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 = useSyncExternalStore5(subscribe, getSnapshot);
-  const undo = useCallback5(() => viewport.undo(), [viewport]);
-  const redo = useCallback5(() => viewport.redo(), [viewport]);
+  const source = useMemo5(() => createHistorySource(viewport), [viewport]);
+  const snapshot = useSyncExternalStore5(source.subscribe, source.getSnapshot);
+  const undo = useCallback4(() => viewport.undo(), [viewport]);
+  const redo = useCallback4(() => viewport.redo(), [viewport]);
   return {
     canUndo: snapshot.canUndo,
     canRedo: snapshot.canRedo,
@@ -396,197 +318,80 @@ function useHistory() {
 }
 
 // src/hooks/use-elements.ts
-import { useCallback as useCallback6, useRef as useRef7, useSyncExternalStore as useSyncExternalStore6 } from "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;
-}
+import { useMemo as useMemo6, useRef as useRef4, useSyncExternalStore as useSyncExternalStore6 } from "react";
+import { createElementsSelectorSource, createElementsSource } from "@fieldnotes/core";
 function useElements(arg, isEqual) {
   const viewport = useViewport();
-  const cachedRef = useRef7([]);
-  const selectedRef = useRef7(null);
-  const subscribe = useCallback6(
-    (onStoreChange) => viewport.store.onChange(onStoreChange),
+  const latest = useRef4({ arg, isEqual });
+  latest.current = { arg, isEqual };
+  const elementsSource = useMemo6(
+    () => createElementsSource(viewport, () => {
+      const a = latest.current.arg;
+      return typeof a === "function" ? void 0 : a;
+    }),
     [viewport]
   );
-  const getSnapshot = useCallback6(() => {
-    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 useSyncExternalStore6(subscribe, getSnapshot);
+  const selectorSource = useMemo6(
+    () => 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 useSyncExternalStore6(source.subscribe, source.getSnapshot);
 }
 
 // src/hooks/use-selection.ts
-import { useCallback as useCallback7, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import { useMemo as useMemo7, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import { createSelectionSource } from "@fieldnotes/core";
 function useSelection() {
   const viewport = useViewport();
-  const subscribe = useCallback7(
-    (onChange) => viewport.onSelectionChange(onChange),
-    [viewport]
-  );
-  const getSnapshot = useCallback7(() => viewport.getSelectedIds(), [viewport]);
-  return useSyncExternalStore7(subscribe, getSnapshot, getSnapshot);
+  const source = useMemo7(() => createSelectionSource(viewport), [viewport]);
+  return useSyncExternalStore7(source.subscribe, source.getSnapshot, source.getSnapshot);
 }
 
 // src/hooks/use-selection-style.ts
-import { useCallback as useCallback8, useRef as useRef8, useSyncExternalStore as useSyncExternalStore8 } from "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]);
-}
+import { useCallback as useCallback5, useMemo as useMemo8, useSyncExternalStore as useSyncExternalStore8 } from "react";
+import { createSelectionStyleSource } from "@fieldnotes/core";
 function useSelectionStyle() {
   const viewport = useViewport();
-  const cacheRef = useRef8(null);
-  const subscribe = useCallback8(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = useCallback8(() => {
-    const next = viewport.getSelectionStyle();
-    if (styleEqual(cacheRef.current, next)) return cacheRef.current;
-    cacheRef.current = next;
-    return next;
-  }, [viewport]);
-  const style = useSyncExternalStore8(subscribe, getSnapshot, getSnapshot);
-  const apply = useCallback8((s) => viewport.applyStyleToSelection(s), [viewport]);
+  const source = useMemo8(() => createSelectionStyleSource(viewport), [viewport]);
+  const style = useSyncExternalStore8(source.subscribe, source.getSnapshot, source.getSnapshot);
+  const apply = useCallback5((s) => viewport.applyStyleToSelection(s), [viewport]);
   return [style, apply];
 }
 
 // src/hooks/use-selection-style-details.ts
-import { useCallback as useCallback9, useRef as useRef9, useSyncExternalStore as useSyncExternalStore9 } from "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]);
-}
+import { useCallback as useCallback6, useMemo as useMemo9, useSyncExternalStore as useSyncExternalStore9 } from "react";
+import { createSelectionStyleDetailsSource } from "@fieldnotes/core";
 function useSelectionStyleDetails() {
   const viewport = useViewport();
-  const cacheRef = useRef9(null);
-  const subscribe = useCallback9(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = useCallback9(() => {
-    const next = viewport.getSelectionStyleDetails();
-    if (detailsEqual(cacheRef.current, next)) return cacheRef.current;
-    cacheRef.current = next;
-    return next;
-  }, [viewport]);
-  const details = useSyncExternalStore9(subscribe, getSnapshot, getSnapshot);
-  const apply = useCallback9((s) => viewport.applyStyleToSelection(s), [viewport]);
+  const source = useMemo9(() => createSelectionStyleDetailsSource(viewport), [viewport]);
+  const details = useSyncExternalStore9(source.subscribe, source.getSnapshot, source.getSnapshot);
+  const apply = useCallback6((s) => viewport.applyStyleToSelection(s), [viewport]);
   return [details, apply];
 }
 
 // src/hooks/use-selection-ops.ts
-import { useCallback as useCallback10, useRef as useRef10, useSyncExternalStore as useSyncExternalStore10 } from "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;
-}
+import { useCallback as useCallback7, useMemo as useMemo10, useSyncExternalStore as useSyncExternalStore10 } from "react";
+import { createSelectionOpsSource } from "@fieldnotes/core";
 function useSelectionOps() {
   const viewport = useViewport();
-  const cacheRef = useRef10(null);
-  const subscribe = useCallback10(
-    (onChange) => {
-      const offSel = viewport.onSelectionChange(onChange);
-      const offStore = viewport.store.onChange(onChange);
-      return () => {
-        offSel();
-        offStore();
-      };
-    },
-    [viewport]
-  );
-  const getSnapshot = useCallback10(() => {
-    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 = useSyncExternalStore10(subscribe, getSnapshot, getSnapshot);
-  const group = useCallback10(() => viewport.groupSelection(), [viewport]);
-  const ungroup = useCallback10(() => viewport.ungroupSelection(), [viewport]);
-  const toggleLock = useCallback10(() => viewport.toggleLockSelection(), [viewport]);
-  const align = useCallback10((edge) => viewport.alignSelection(edge), [viewport]);
-  const distribute = useCallback10(
+  const source = useMemo10(() => createSelectionOpsSource(viewport), [viewport]);
+  const snap = useSyncExternalStore10(source.subscribe, source.getSnapshot, source.getSnapshot);
+  const group = useCallback7(() => viewport.groupSelection(), [viewport]);
+  const ungroup = useCallback7(() => viewport.ungroupSelection(), [viewport]);
+  const toggleLock = useCallback7(() => viewport.toggleLockSelection(), [viewport]);
+  const align = useCallback7((edge) => viewport.alignSelection(edge), [viewport]);
+  const distribute = useCallback7(
     (axis) => viewport.distributeSelection(axis),
     [viewport]
   );
-  const rotateCW = useCallback10(() => viewport.rotateSelection("cw"), [viewport]);
-  const rotateCCW = useCallback10(() => viewport.rotateSelection("ccw"), [viewport]);
+  const rotateCW = useCallback7(() => viewport.rotateSelection("cw"), [viewport]);
+  const rotateCCW = useCallback7(() => viewport.rotateSelection("ccw"), [viewport]);
   return {
     selectedIds: snap.selectedIds,
     selectedCount: snap.selectedIds.length,
@@ -606,16 +411,16 @@ function useSelectionOps() {
 }
 
 // src/hooks/use-element-rects.ts
-import { useCallback as useCallback11, useEffect as useEffect3, useRef as useRef11, useSyncExternalStore as useSyncExternalStore11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect3, useRef as useRef5, useSyncExternalStore as useSyncExternalStore11 } from "react";
 import { ElementRectTracker, computeElementRects, elementRectsEqual } from "@fieldnotes/core";
 function useElementRects(match) {
   const viewport = useViewport();
-  const matchRef = useRef11(match);
+  const matchRef = useRef5(match);
   matchRef.current = match;
-  const stableMatch = useCallback11((el) => matchRef.current(el), []);
-  const cacheRef = useRef11(null);
-  const trackerRef = useRef11(null);
-  const subscribe = useCallback11(
+  const stableMatch = useCallback8((el) => matchRef.current(el), []);
+  const cacheRef = useRef5(null);
+  const trackerRef = useRef5(null);
+  const subscribe = useCallback8(
     (onStoreChange) => {
       const tracker = new ElementRectTracker(viewport, { match: stableMatch });
       trackerRef.current = tracker;
@@ -637,7 +442,7 @@ function useElementRects(match) {
     },
     [viewport, stableMatch]
   );
-  const getSnapshot = useCallback11(() => {
+  const getSnapshot = useCallback8(() => {
     if (cacheRef.current === null) {
       cacheRef.current = computeElementRects(viewport.store, stableMatch);
     }
@@ -651,7 +456,7 @@ function useElementRects(match) {
 }
 
 // src/minimap.tsx
-import { useEffect as useEffect4, useRef as useRef12, useState as useState3 } from "react";
+import { useEffect as useEffect4, useRef as useRef6, useState as useState3 } from "react";
 import { MinimapController } from "@fieldnotes/core";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var toggleStyle = {
@@ -679,7 +484,7 @@ function Minimap({
 }) {
   const viewport = useViewport();
   const [collapsed, setCollapsed] = useState3(defaultCollapsed);
-  const canvasRef = useRef12(null);
+  const canvasRef = useRef6(null);
   useEffect4(() => {
     if (collapsed) return;
     const canvas = canvasRef.current;