@fieldnotes/core 0.38.1 → 0.38.2

package/dist/index.cjs

@@ -4055,17 +4055,43 @@ var ContextMenu = class {
   }
 };
 
-// src/elements/translate.ts
-function translateElementPatch(el, dx, dy) {
-  const position = { x: el.position.x + dx, y: el.position.y + dy };
-  if (el.type === "arrow") {
-    return {
-      position,
-      from: { x: el.from.x + dx, y: el.from.y + dy },
-      to: { x: el.to.x + dx, y: el.to.y + dy }
-    };
-  }
-  return { position };
+// src/canvas/viewport-dom.ts
+function createWrapper() {
+  const el = document.createElement("div");
+  Object.assign(el.style, {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    overscrollBehavior: "none",
+    userSelect: "none",
+    webkitUserSelect: "none"
+  });
+  return el;
+}
+function createCanvas() {
+  const el = document.createElement("canvas");
+  Object.assign(el.style, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%"
+  });
+  return el;
+}
+function createDomLayer() {
+  const el = document.createElement("div");
+  Object.assign(el.style, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    transformOrigin: "0 0"
+  });
+  return el;
 }
 
 // src/elements/arrow-label-editor.ts
@@ -5689,6 +5715,19 @@ var MarginViewport = class {
   }
 };
 
+// src/elements/translate.ts
+function translateElementPatch(el, dx, dy) {
+  const position = { x: el.position.x + dx, y: el.position.y + dy };
+  if (el.type === "arrow") {
+    return {
+      position,
+      from: { x: el.from.x + dx, y: el.from.y + dy },
+      to: { x: el.to.x + dx, y: el.to.y + dy }
+    };
+  }
+  return { position };
+}
+
 // src/elements/element-style.ts
 function styleToPatch(element, style) {
   const { color, fillColor, strokeWidth, opacity, fontSize } = style;
@@ -5776,7 +5815,7 @@ function getElementStyle(element) {
   }
 }
 
-// src/canvas/viewport.ts
+// src/canvas/selection-ops.ts
 function unionBounds(list) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const b of list) {
@@ -5787,16 +5826,244 @@ function unionBounds(list) {
   }
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
-var EMPTY_IDS = [];
-var ARROW_HIT_THRESHOLD = 10;
-function noop() {
-}
 function sharedValue(values) {
   const present = values.filter((v) => v !== void 0);
   if (present.length === 0) return void 0;
   const first = present[0];
   return present.every((v) => v === first) ? first : void 0;
 }
+var SelectionOps = class {
+  constructor(deps) {
+    this.deps = deps;
+  }
+  getStyle() {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length === 0) return null;
+    const styles = [];
+    for (const id of ids) {
+      const el = this.deps.store.getById(id);
+      if (el) styles.push(getElementStyle(el));
+    }
+    if (styles.length === 0) return null;
+    const result = {};
+    const color = sharedValue(styles.map((s) => s.color));
+    if (color !== void 0) result.color = color;
+    const fillColor = sharedValue(styles.map((s) => s.fillColor));
+    if (fillColor !== void 0) result.fillColor = fillColor;
+    const strokeWidth = sharedValue(styles.map((s) => s.strokeWidth));
+    if (strokeWidth !== void 0) result.strokeWidth = strokeWidth;
+    const opacity = sharedValue(styles.map((s) => s.opacity));
+    if (opacity !== void 0) result.opacity = opacity;
+    const fontSize = sharedValue(styles.map((s) => s.fontSize));
+    if (fontSize !== void 0) result.fontSize = fontSize;
+    return result;
+  }
+  applyStyle(style) {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length === 0) return;
+    this.deps.recorder.begin();
+    for (const id of ids) {
+      const el = this.deps.store.getById(id);
+      if (!el) continue;
+      const patch = styleToPatch(el, style);
+      if (Object.keys(patch).length > 0) {
+        this.deps.store.update(id, patch);
+      }
+    }
+    this.deps.recorder.commit();
+  }
+  group() {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length < 2) return;
+    const groupId = createId("group");
+    this.deps.recorder.begin();
+    for (const id of ids) {
+      if (this.deps.store.getById(id)) this.deps.store.update(id, { groupId });
+    }
+    this.deps.recorder.commit();
+  }
+  ungroup() {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length === 0) return;
+    this.deps.recorder.begin();
+    for (const id of ids) {
+      const el = this.deps.store.getById(id);
+      if (el && el.groupId !== void 0) this.deps.store.update(id, { groupId: void 0 });
+    }
+    this.deps.recorder.commit();
+  }
+  toggleLock() {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length === 0) return;
+    const anyUnlocked = ids.some((id) => {
+      const el = this.deps.store.getById(id);
+      return el ? !el.locked : false;
+    });
+    this.deps.recorder.begin();
+    for (const id of ids) {
+      const el = this.deps.store.getById(id);
+      if (el && el.locked !== anyUnlocked) this.deps.store.update(id, { locked: anyUnlocked });
+    }
+    this.deps.recorder.commit();
+  }
+  align(edge) {
+    const bounded = this.boundedSelection();
+    if (bounded.length < 2) return;
+    const B = unionBounds(bounded.map((e) => e.bounds));
+    this.deps.recorder.begin();
+    const moved = [];
+    for (const { id, el, bounds: b } of bounded) {
+      if (!this.isMovable(el)) continue;
+      let dx = 0;
+      let dy = 0;
+      switch (edge) {
+        case "left":
+          dx = B.x - b.x;
+          break;
+        case "right":
+          dx = B.x + B.w - (b.x + b.w);
+          break;
+        case "center-x":
+          dx = B.x + B.w / 2 - (b.x + b.w / 2);
+          break;
+        case "top":
+          dy = B.y - b.y;
+          break;
+        case "bottom":
+          dy = B.y + B.h - (b.y + b.h);
+          break;
+        case "middle":
+          dy = B.y + B.h / 2 - (b.y + b.h / 2);
+          break;
+      }
+      if (dx === 0 && dy === 0) continue;
+      this.deps.store.update(id, translateElementPatch(el, dx, dy));
+      moved.push(id);
+    }
+    updateArrowsBoundToElements(moved, this.deps.store);
+    this.deps.recorder.commit();
+    this.deps.requestRender();
+  }
+  distribute(axis) {
+    const bounded = this.boundedSelection();
+    if (bounded.length < 3) return;
+    const center2 = (b) => axis === "horizontal" ? b.x + b.w / 2 : b.y + b.h / 2;
+    const sorted = [...bounded].sort((p, q) => center2(p.bounds) - center2(q.bounds));
+    const first = sorted[0];
+    const last = sorted[sorted.length - 1];
+    if (!first || !last) return;
+    const c0 = center2(first.bounds);
+    const cN = center2(last.bounds);
+    const n = sorted.length;
+    this.deps.recorder.begin();
+    const moved = [];
+    for (let i = 1; i < n - 1; i++) {
+      const item = sorted[i];
+      if (!item || !this.isMovable(item.el)) continue;
+      const target = c0 + i * (cN - c0) / (n - 1);
+      const delta = target - center2(item.bounds);
+      if (delta === 0) continue;
+      const [dx, dy] = axis === "horizontal" ? [delta, 0] : [0, delta];
+      this.deps.store.update(item.id, translateElementPatch(item.el, dx, dy));
+      moved.push(item.id);
+    }
+    updateArrowsBoundToElements(moved, this.deps.store);
+    this.deps.recorder.commit();
+    this.deps.requestRender();
+  }
+  boundedSelection() {
+    const out = [];
+    for (const id of this.deps.getSelectedIds()) {
+      const el = this.deps.store.getById(id);
+      if (!el) continue;
+      const bounds = getElementBounds(el);
+      if (bounds) out.push({ id, el, bounds });
+    }
+    return out;
+  }
+  isMovable(el) {
+    if (el.locked) return false;
+    if (el.type === "arrow" && (el.fromBinding ?? el.toBinding)) return false;
+    return true;
+  }
+};
+
+// src/canvas/grid-controller.ts
+var GridController = class {
+  constructor(deps) {
+    this.deps = deps;
+  }
+  listeners = /* @__PURE__ */ new Set();
+  add(input) {
+    const existing = this.deps.store.getElementsByType("grid")[0];
+    this.deps.recorder.begin();
+    if (existing) {
+      this.deps.store.remove(existing.id);
+    }
+    const grid = createGrid({ ...input, layerId: this.deps.getActiveLayerId() });
+    this.deps.store.add(grid);
+    this.deps.recorder.commit();
+    this.deps.requestRender();
+    return grid.id;
+  }
+  update(updates) {
+    const grid = this.deps.store.getElementsByType("grid")[0];
+    if (!grid) return;
+    this.deps.recorder.begin();
+    this.deps.store.update(grid.id, updates);
+    this.deps.recorder.commit();
+    this.deps.requestRender();
+  }
+  remove() {
+    const grid = this.deps.store.getElementsByType("grid")[0];
+    if (!grid) return;
+    this.deps.recorder.begin();
+    this.deps.store.remove(grid.id);
+    this.deps.recorder.commit();
+    this.deps.requestRender();
+  }
+  getInfo() {
+    const grid = this.deps.store.getElementsByType("grid")[0];
+    if (!grid) return null;
+    return {
+      gridType: grid.gridType,
+      hexOrientation: grid.hexOrientation,
+      cellSize: grid.cellSize,
+      cellRadius: grid.gridType === "hex" ? grid.cellSize : grid.cellSize / 2
+    };
+  }
+  onChange(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  syncContext() {
+    const grid = this.deps.store.getElementsByType("grid")[0];
+    if (grid) {
+      this.deps.toolContext.gridSize = grid.cellSize;
+      this.deps.toolContext.gridType = grid.gridType;
+      this.deps.toolContext.hexOrientation = grid.hexOrientation;
+    } else {
+      this.deps.toolContext.gridSize = this.deps.defaultGridSize;
+      this.deps.toolContext.gridType = void 0;
+      this.deps.toolContext.hexOrientation = void 0;
+    }
+    this.notify();
+  }
+  notify() {
+    const info = this.getInfo();
+    for (const listener of this.listeners) {
+      listener(info);
+    }
+  }
+};
+
+// src/canvas/viewport.ts
+var EMPTY_IDS = [];
+var ARROW_HIT_THRESHOLD = 10;
+function noop() {
+}
 var Viewport = class {
   constructor(container, options = {}) {
     this.container = container;
@@ -5839,9 +6106,15 @@ var Viewport = class {
     this.dropHandler = options.onDrop;
     this.history = new HistoryStack();
     this.historyRecorder = new HistoryRecorder(this.store, this.history, this.layerManager);
-    this.wrapper = this.createWrapper();
-    this.canvasEl = this.createCanvas();
-    this.domLayer = this.createDomLayer();
+    this.selectionOps = new SelectionOps({
+      store: this.store,
+      recorder: this.historyRecorder,
+      getSelectedIds: () => this.getSelectedIds(),
+      requestRender: () => this.requestRender()
+    });
+    this.wrapper = createWrapper();
+    this.canvasEl = createCanvas();
+    this.domLayer = createDomLayer();
     this.wrapper.appendChild(this.canvasEl);
     this.wrapper.appendChild(this.domLayer);
     this.container.appendChild(this.wrapper);
@@ -5919,21 +6192,29 @@ var Viewport = class {
       this.contextMenu?.close();
       this.requestRender();
     });
+    this.gridController = new GridController({
+      store: this.store,
+      recorder: this.historyRecorder,
+      requestRender: () => this.requestRender(),
+      getActiveLayerId: () => this.layerManager.activeLayerId,
+      toolContext: this.toolContext,
+      defaultGridSize: this._gridSize
+    });
     this.unsubStore = [
       this.store.on("add", (el) => {
-        if (el.type === "grid") this.syncGridContext();
+        if (el.type === "grid") this.gridController.syncContext();
         this.renderLoop.markLayerDirty(el.layerId);
         this.requestRender();
       }),
       this.store.on("remove", (el) => {
-        if (el.type === "grid") this.syncGridContext();
+        if (el.type === "grid") this.gridController.syncContext();
         this.unbindArrowsFrom(el);
         this.domNodeManager.removeDomNode(el.id);
         this.renderLoop.markLayerDirty(el.layerId);
         this.requestRender();
       }),
       this.store.on("update", ({ previous, current }) => {
-        if (current.type === "grid") this.syncGridContext();
+        if (current.type === "grid") this.gridController.syncContext();
         this.renderLoop.markLayerDirty(current.layerId);
         if (previous.layerId !== current.layerId) {
           this.renderLoop.markLayerDirty(previous.layerId);
@@ -5943,7 +6224,7 @@ var Viewport = class {
       this.store.on("clear", () => {
         this.domNodeManager.clearDomNodes();
         this.renderLoop.markAllLayersDirty();
-        this.syncGridContext();
+        this.gridController.syncContext();
         this.requestRender();
       })
     ];
@@ -5958,7 +6239,7 @@ var Viewport = class {
     this.observeResize();
     this.syncCanvasSize();
     this.renderLoop.start();
-    this.syncGridContext();
+    this.gridController.syncContext();
   }
   camera;
   store;
@@ -5977,6 +6258,7 @@ var Viewport = class {
   noteEditor;
   arrowLabelEditor;
   historyRecorder;
+  selectionOps;
   toolContext;
   marginViewport;
   resizeObserver = null;
@@ -5988,7 +6270,7 @@ var Viewport = class {
   interactMode;
   onHtmlElementMount;
   dropHandler;
-  gridChangeListeners = /* @__PURE__ */ new Set();
+  gridController;
   doubleTapDetector = new DoubleTapDetector();
   tapDownX = 0;
   tapDownY = 0;
@@ -6160,48 +6442,19 @@ var Viewport = class {
     this.requestRender();
   }
   addGrid(input) {
-    const existing = this.store.getElementsByType("grid")[0];
-    this.historyRecorder.begin();
-    if (existing) {
-      this.store.remove(existing.id);
-    }
-    const grid = createGrid({ ...input, layerId: this.layerManager.activeLayerId });
-    this.store.add(grid);
-    this.historyRecorder.commit();
-    this.requestRender();
-    return grid.id;
+    return this.gridController.add(input);
   }
   updateGrid(updates) {
-    const grid = this.store.getElementsByType("grid")[0];
-    if (!grid) return;
-    this.historyRecorder.begin();
-    this.store.update(grid.id, updates);
-    this.historyRecorder.commit();
-    this.requestRender();
+    this.gridController.update(updates);
   }
   removeGrid() {
-    const grid = this.store.getElementsByType("grid")[0];
-    if (!grid) return;
-    this.historyRecorder.begin();
-    this.store.remove(grid.id);
-    this.historyRecorder.commit();
-    this.requestRender();
+    this.gridController.remove();
   }
   getGridInfo() {
-    const grid = this.store.getElementsByType("grid")[0];
-    if (!grid) return null;
-    return {
-      gridType: grid.gridType,
-      hexOrientation: grid.hexOrientation,
-      cellSize: grid.cellSize,
-      cellRadius: grid.gridType === "hex" ? grid.cellSize : grid.cellSize / 2
-    };
+    return this.gridController.getInfo();
   }
   onGridChange(listener) {
-    this.gridChangeListeners.add(listener);
-    return () => {
-      this.gridChangeListeners.delete(listener);
-    };
+    return this.gridController.onChange(listener);
   }
   getSelectTool() {
     return this.toolManager.getTool("select");
@@ -6242,154 +6495,25 @@ var Viewport = class {
     return tool ? tool.onSelectionChange(listener) : noop;
   }
   getSelectionStyle() {
-    const ids = this.getSelectedIds();
-    if (ids.length === 0) return null;
-    const styles = [];
-    for (const id of ids) {
-      const el = this.store.getById(id);
-      if (el) styles.push(getElementStyle(el));
-    }
-    if (styles.length === 0) return null;
-    const result = {};
-    const color = sharedValue(styles.map((s) => s.color));
-    if (color !== void 0) result.color = color;
-    const fillColor = sharedValue(styles.map((s) => s.fillColor));
-    if (fillColor !== void 0) result.fillColor = fillColor;
-    const strokeWidth = sharedValue(styles.map((s) => s.strokeWidth));
-    if (strokeWidth !== void 0) result.strokeWidth = strokeWidth;
-    const opacity = sharedValue(styles.map((s) => s.opacity));
-    if (opacity !== void 0) result.opacity = opacity;
-    const fontSize = sharedValue(styles.map((s) => s.fontSize));
-    if (fontSize !== void 0) result.fontSize = fontSize;
-    return result;
+    return this.selectionOps.getStyle();
   }
   applyStyleToSelection(style) {
-    const ids = this.getSelectedIds();
-    if (ids.length === 0) return;
-    this.historyRecorder.begin();
-    for (const id of ids) {
-      const el = this.store.getById(id);
-      if (!el) continue;
-      const patch = styleToPatch(el, style);
-      if (Object.keys(patch).length > 0) {
-        this.store.update(id, patch);
-      }
-    }
-    this.historyRecorder.commit();
+    this.selectionOps.applyStyle(style);
   }
   groupSelection() {
-    const ids = this.getSelectedIds();
-    if (ids.length < 2) return;
-    const groupId = createId("group");
-    this.historyRecorder.begin();
-    for (const id of ids) {
-      if (this.store.getById(id)) this.store.update(id, { groupId });
-    }
-    this.historyRecorder.commit();
+    this.selectionOps.group();
   }
   ungroupSelection() {
-    const ids = this.getSelectedIds();
-    if (ids.length === 0) return;
-    this.historyRecorder.begin();
-    for (const id of ids) {
-      const el = this.store.getById(id);
-      if (el && el.groupId !== void 0) this.store.update(id, { groupId: void 0 });
-    }
-    this.historyRecorder.commit();
+    this.selectionOps.ungroup();
   }
   toggleLockSelection() {
-    const ids = this.getSelectedIds();
-    if (ids.length === 0) return;
-    const anyUnlocked = ids.some((id) => {
-      const el = this.store.getById(id);
-      return el ? !el.locked : false;
-    });
-    this.historyRecorder.begin();
-    for (const id of ids) {
-      const el = this.store.getById(id);
-      if (el && el.locked !== anyUnlocked) this.store.update(id, { locked: anyUnlocked });
-    }
-    this.historyRecorder.commit();
+    this.selectionOps.toggleLock();
   }
   alignSelection(edge) {
-    const bounded = this.boundedSelection();
-    if (bounded.length < 2) return;
-    const B = unionBounds(bounded.map((e) => e.bounds));
-    this.historyRecorder.begin();
-    const moved = [];
-    for (const { id, el, bounds: b } of bounded) {
-      if (!this.isMovable(el)) continue;
-      let dx = 0;
-      let dy = 0;
-      switch (edge) {
-        case "left":
-          dx = B.x - b.x;
-          break;
-        case "right":
-          dx = B.x + B.w - (b.x + b.w);
-          break;
-        case "center-x":
-          dx = B.x + B.w / 2 - (b.x + b.w / 2);
-          break;
-        case "top":
-          dy = B.y - b.y;
-          break;
-        case "bottom":
-          dy = B.y + B.h - (b.y + b.h);
-          break;
-        case "middle":
-          dy = B.y + B.h / 2 - (b.y + b.h / 2);
-          break;
-      }
-      if (dx === 0 && dy === 0) continue;
-      this.store.update(id, translateElementPatch(el, dx, dy));
-      moved.push(id);
-    }
-    updateArrowsBoundToElements(moved, this.store);
-    this.historyRecorder.commit();
-    this.requestRender();
+    this.selectionOps.align(edge);
   }
   distributeSelection(axis) {
-    const bounded = this.boundedSelection();
-    if (bounded.length < 3) return;
-    const center2 = (b) => axis === "horizontal" ? b.x + b.w / 2 : b.y + b.h / 2;
-    const sorted = [...bounded].sort((p, q) => center2(p.bounds) - center2(q.bounds));
-    const first = sorted[0];
-    const last = sorted[sorted.length - 1];
-    if (!first || !last) return;
-    const c0 = center2(first.bounds);
-    const cN = center2(last.bounds);
-    const n = sorted.length;
-    this.historyRecorder.begin();
-    const moved = [];
-    for (let i = 1; i < n - 1; i++) {
-      const item = sorted[i];
-      if (!item || !this.isMovable(item.el)) continue;
-      const target = c0 + i * (cN - c0) / (n - 1);
-      const delta = target - center2(item.bounds);
-      if (delta === 0) continue;
-      const [dx, dy] = axis === "horizontal" ? [delta, 0] : [0, delta];
-      this.store.update(item.id, translateElementPatch(item.el, dx, dy));
-      moved.push(item.id);
-    }
-    updateArrowsBoundToElements(moved, this.store);
-    this.historyRecorder.commit();
-    this.requestRender();
-  }
-  boundedSelection() {
-    const out = [];
-    for (const id of this.getSelectedIds()) {
-      const el = this.store.getById(id);
-      if (!el) continue;
-      const bounds = getElementBounds(el);
-      if (bounds) out.push({ id, el, bounds });
-    }
-    return out;
-  }
-  isMovable(el) {
-    if (el.locked) return false;
-    if (el.type === "arrow" && (el.fromBinding ?? el.toBinding)) return false;
-    return true;
+    this.selectionOps.distribute(axis);
   }
   getRenderStats() {
     return this.renderLoop.getStats();
@@ -6598,43 +6722,6 @@ var Viewport = class {
       }
     }
   }
-  createWrapper() {
-    const el = document.createElement("div");
-    Object.assign(el.style, {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      overscrollBehavior: "none",
-      userSelect: "none",
-      webkitUserSelect: "none"
-    });
-    return el;
-  }
-  createCanvas() {
-    const el = document.createElement("canvas");
-    Object.assign(el.style, {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%"
-    });
-    return el;
-  }
-  createDomLayer() {
-    const el = document.createElement("div");
-    Object.assign(el.style, {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      pointerEvents: "none",
-      transformOrigin: "0 0"
-    });
-    return el;
-  }
   applyCameraTransform() {
     this.domLayer.style.transform = this.camera.toCSSTransform();
   }
@@ -6644,25 +6731,6 @@ var Viewport = class {
     this.renderLoop.setCanvasSize(rect.width * dpr, rect.height * dpr);
     this.requestRender();
   }
-  syncGridContext() {
-    const grid = this.store.getElementsByType("grid")[0];
-    if (grid) {
-      this.toolContext.gridSize = grid.cellSize;
-      this.toolContext.gridType = grid.gridType;
-      this.toolContext.hexOrientation = grid.hexOrientation;
-    } else {
-      this.toolContext.gridSize = this._gridSize;
-      this.toolContext.gridType = void 0;
-      this.toolContext.hexOrientation = void 0;
-    }
-    this.notifyGridChangeListeners();
-  }
-  notifyGridChangeListeners() {
-    const info = this.getGridInfo();
-    for (const listener of this.gridChangeListeners) {
-      listener(info);
-    }
-  }
   observeResize() {
     if (typeof ResizeObserver === "undefined") return;
     this.resizeObserver = new ResizeObserver(() => this.syncCanvasSize());
@@ -8976,7 +9044,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.38.0";
+var VERSION = "0.38.2";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,