@fieldnotes/core 0.58.0 → 0.60.0

package/dist/index.cjs

@@ -5272,6 +5272,7 @@ var ToolManager = class {
   tools = /* @__PURE__ */ new Map();
   current = null;
   changeListeners = /* @__PURE__ */ new Set();
+  registerListeners = /* @__PURE__ */ new Set();
   get activeTool() {
     return this.current;
   }
@@ -5280,6 +5281,7 @@ var ToolManager = class {
   }
   register(tool) {
     this.tools.set(tool.name, tool);
+    this.registerListeners.forEach((fn) => fn(tool));
   }
   getTool(name) {
     return this.tools.get(name);
@@ -5305,6 +5307,10 @@ var ToolManager = class {
     this.changeListeners.add(listener);
     return () => this.changeListeners.delete(listener);
   }
+  onRegister(listener) {
+    this.registerListeners.add(listener);
+    return () => this.registerListeners.delete(listener);
+  }
 };
 
 // src/history/history-stack.ts
@@ -5496,6 +5502,7 @@ var HistoryRecorder = class {
   generation = 0;
   updateSnapshots = /* @__PURE__ */ new Map();
   unsubscribers;
+  transactionEndListeners = /* @__PURE__ */ new Set();
   pause() {
     this.recording = false;
   }
@@ -5513,19 +5520,35 @@ var HistoryRecorder = class {
   get currentTransactionId() {
     return this.transaction !== null ? this.generation : null;
   }
+  onTransactionEnd(listener) {
+    this.transactionEndListeners.add(listener);
+    return () => this.transactionEndListeners.delete(listener);
+  }
+  notifyTransactionEnd() {
+    for (const listener of this.transactionEndListeners) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  }
   commit() {
     if (!this.transaction) return;
     const finalCommands = this.flushUpdateSnapshots();
     const all = [...this.transaction, ...finalCommands];
     this.transaction = null;
     this.updateSnapshots.clear();
-    if (all.length === 0) return;
-    const first = all[0];
-    this.stack.push(all.length === 1 && first ? first : new BatchCommand(all));
+    if (all.length > 0) {
+      const first = all[0];
+      this.stack.push(all.length === 1 && first ? first : new BatchCommand(all));
+    }
+    this.notifyTransactionEnd();
   }
   rollback() {
+    const wasOpen = this.transaction !== null;
     this.transaction = null;
     this.updateSnapshots.clear();
+    if (wasOpen) this.notifyTransactionEnd();
   }
   destroy() {
     this.unsubscribers.forEach((fn) => fn());
@@ -5855,6 +5878,19 @@ function computeBounds(elements, padding) {
     h: maxY - minY + padding * 2
   };
 }
+function resolveExportBounds(region, elements, padding) {
+  if (!region) return computeBounds(elements, padding);
+  const finite = Number.isFinite(region.x) && Number.isFinite(region.y) && Number.isFinite(region.w) && Number.isFinite(region.h);
+  if (!finite || region.w <= 0 || region.h <= 0) {
+    throw new RangeError("region must have finite coordinates and positive w/h");
+  }
+  return {
+    x: region.x - padding,
+    y: region.y - padding,
+    w: region.w + padding * 2,
+    h: region.h + padding * 2
+  };
+}
 function renderGridForBounds(ctx, grid, bounds) {
   const visibleBounds = {
     minX: bounds.x,
@@ -5897,6 +5933,29 @@ function nonNegativeOption(value, fallback, name) {
   }
   return resolved;
 }
+function fitExportScale(bounds, requestedScale, options) {
+  const maxDimension = positiveOption(options.maxDimension, DEFAULT_MAX_DIMENSION, "maxDimension");
+  const maxPixels = positiveOption(options.maxPixels, DEFAULT_MAX_PIXELS, "maxPixels");
+  const fits = (scale) => {
+    const w = Math.ceil(bounds.w * scale);
+    const h = Math.ceil(bounds.h * scale);
+    return w <= maxDimension && h <= maxDimension && w * h <= maxPixels;
+  };
+  if (fits(requestedScale)) return requestedScale;
+  const analytical = Math.min(
+    maxDimension / Math.max(bounds.w, bounds.h),
+    Math.sqrt(maxPixels) / Math.sqrt(bounds.w) / Math.sqrt(bounds.h)
+  );
+  let hi = Math.min(requestedScale, analytical);
+  if (fits(hi)) return hi;
+  let lo = 0;
+  for (let i = 0; i < 40; i++) {
+    const mid = (lo + hi) / 2;
+    if (fits(mid)) lo = mid;
+    else hi = mid;
+  }
+  return lo;
+}
 function assertExportSize(width, height, options) {
   const maxDimension = positiveOption(options.maxDimension, DEFAULT_MAX_DIMENSION, "maxDimension");
   const maxPixels = positiveOption(options.maxPixels, DEFAULT_MAX_PIXELS, "maxPixels");
@@ -5971,10 +6030,23 @@ function loadImages(elements, options = {}) {
   });
 }
 async function exportImage(store, options = {}, layerManager) {
-  const scale = positiveOption(options.scale, 2, "scale");
+  const requestedScale = positiveOption(options.scale, 2, "scale");
+  const scaleMode = options.scaleMode ?? "exact";
+  if (scaleMode !== "exact" && scaleMode !== "fit") {
+    throw new RangeError(`scaleMode must be 'exact' or 'fit'`);
+  }
   const padding = nonNegativeOption(options.padding, 0, "padding");
   validateExportResourceOptions(options);
   validateHtmlExportOptions(options);
+  const format = options.format ?? "png";
+  if (format !== "png" && format !== "jpeg") {
+    throw new RangeError(`format must be 'png' or 'jpeg'`);
+  }
+  if (options.quality !== void 0) {
+    if (!Number.isFinite(options.quality) || options.quality <= 0 || options.quality > 1) {
+      throw new RangeError("quality must be a finite number in (0, 1]");
+    }
+  }
   const background = options.background ?? "#ffffff";
   const filter = options.filter;
   const allElements = store.getAll();
@@ -5982,8 +6054,9 @@ async function exportImage(store, options = {}, layerManager) {
   if (filter) {
     visibleElements = visibleElements.filter(filter);
   }
-  const bounds = computeBounds(visibleElements, padding);
+  const bounds = resolveExportBounds(options.region, visibleElements, padding);
   if (!bounds) return null;
+  const scale = scaleMode === "fit" ? fitExportScale(bounds, requestedScale, options) : requestedScale;
   const width = Math.ceil(bounds.w * scale);
   const height = Math.ceil(bounds.h * scale);
   assertExportSize(width, height, options);
@@ -6085,8 +6158,9 @@ async function exportImage(store, options = {}, layerManager) {
     renderGridForBounds(ctx, grid, bounds);
     ctx.restore();
   }
+  const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
   return new Promise((resolve) => {
-    canvas.toBlob((blob) => resolve(blob), "image/png");
+    canvas.toBlob((blob) => resolve(blob), mimeType, options.quality);
   });
 }
 
@@ -7766,6 +7840,14 @@ function rotateElementPatch(el, bounds, pivot, delta) {
 }
 
 // src/canvas/selection-ops.ts
+var STYLE_FIELDS = [
+  "color",
+  "fillColor",
+  "strokeWidth",
+  "opacity",
+  "fontSize",
+  "strokeStyle"
+];
 function sharedValue(values) {
   const present = values.filter((v) => v !== void 0);
   if (present.length === 0) return void 0;
@@ -7800,6 +7882,42 @@ var SelectionOps = class {
     if (strokeStyle !== void 0) result.strokeStyle = strokeStyle;
     return result;
   }
+  /**
+   * Unlike `getStyle()` — which returns `{}` for a selection whose elements
+   * have no applicable style fields (e.g. images) — this returns `null` when
+   * no field is applicable, so callers can distinguish "nothing to show" from
+   * "everything shared but empty".
+   */
+  getStyleDetails() {
+    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 common = {};
+    const applicable = [];
+    const mixed = [];
+    for (const field of STYLE_FIELDS) {
+      const allValues = styles.map((s) => s[field]);
+      const values = [];
+      for (const v of allValues) {
+        if (v !== void 0) values.push(v);
+      }
+      if (values.length === 0) continue;
+      applicable.push(field);
+      const distinct = new Set(values);
+      if (distinct.size > 1) {
+        mixed.push(field);
+      } else {
+        common[field] = values[0];
+      }
+    }
+    if (applicable.length === 0) return null;
+    return { common, applicable, mixed };
+  }
   applyStyle(style) {
     const ids = this.deps.getSelectedIds();
     if (ids.length === 0) return;
@@ -8174,7 +8292,7 @@ var ViewportInteractions = class {
 var EMPTY_IDS = [];
 function noop() {
 }
-var Viewport = class {
+var Viewport = class _Viewport {
   constructor(container, options = {}) {
     this.container = container;
     this.camera = new Camera(options.camera);
@@ -8183,6 +8301,13 @@ var Viewport = class {
     this.store = new ElementStore();
     this.layerManager = new LayerManager(this.store);
     this.toolManager = new ToolManager();
+    this.unsubToolRegister = this.toolManager.onRegister((tool) => {
+      if (_Viewport.isSelectionSource(tool)) this.attachSelectionSource(tool);
+    });
+    const existingSelect = this.getSelectTool();
+    if (existingSelect && _Viewport.isSelectionSource(existingSelect)) {
+      this.attachSelectionSource(existingSelect);
+    }
     this.renderer = new ElementRenderer();
     this.renderer.setStore(this.store);
     this.renderer.setCamera(this.camera);
@@ -8217,6 +8342,11 @@ var Viewport = class {
     this.dropHandler = options.onDrop;
     this.history = new HistoryStack();
     this.historyRecorder = new HistoryRecorder(this.store, this.history, this.layerManager);
+    this.unsubRecorderEnd = this.historyRecorder.onTransactionEnd(() => {
+      if (!this.pendingSelectionPrune) return;
+      this.pendingSelectionPrune = false;
+      this.pruneSelection();
+    });
     this.selectionOps = new SelectionOps({
       store: this.store,
       recorder: this.historyRecorder,
@@ -8336,6 +8466,7 @@ var Viewport = class {
         this.domNodeManager.removeDomNode(el.id);
         this.renderLoop.markLayerDirty(el.layerId);
         this.requestRender();
+        this.handleRemovedElement(el.id);
       }),
       this.store.on("update", ({ previous, current }) => {
         if (current.type === "grid") this.gridController.syncContext();
@@ -8350,6 +8481,7 @@ var Viewport = class {
         this.renderLoop.markAllLayersDirty();
         this.gridController.syncContext();
         this.requestRender();
+        this.pruneSelection();
       })
     ];
     this.layerManager.on("change", () => {
@@ -8419,6 +8551,13 @@ var Viewport = class {
   minimap = null;
   htmlRenderers = /* @__PURE__ */ new Map();
   resizeListeners = /* @__PURE__ */ new Set();
+  selectionListeners = /* @__PURE__ */ new Set();
+  detachSelectionSource = null;
+  unsubToolRegister = () => {
+  };
+  pendingSelectionPrune = false;
+  unsubRecorderEnd = () => {
+  };
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -8677,6 +8816,42 @@ var Viewport = class {
   getSelectTool() {
     return this.toolManager.getTool("select");
   }
+  pruneSelection() {
+    const tool = this.getSelectTool();
+    if (!tool) return;
+    const ids = tool.selectedIds;
+    const filtered = ids.filter((id) => this.store.getById(id) !== void 0);
+    if (filtered.length !== ids.length) tool.setSelection(filtered);
+  }
+  handleRemovedElement(id) {
+    if (!this.getSelectedIds().includes(id)) return;
+    if (this.historyRecorder.currentTransactionId !== null) {
+      this.pendingSelectionPrune = true;
+      return;
+    }
+    this.pruneSelection();
+  }
+  static isSelectionSource(tool) {
+    const candidate = tool;
+    return tool.name === "select" && typeof candidate.onSelectionChange === "function" && typeof candidate.setSelection === "function";
+  }
+  emitSelectionChange() {
+    for (const listener of this.selectionListeners) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  }
+  attachSelectionSource(tool) {
+    this.detachSelectionSource?.();
+    this.detachSelectionSource = tool.onSelectionChange(() => this.emitSelectionChange());
+  }
+  /**
+   * getSelectedIds() and the onSelectionChange emitter never surface stale ids:
+   * once the enclosing history transaction completes, both reflect
+   * the current selection.
+   */
   getSelectedIds() {
     return this.getSelectTool()?.selectedIds ?? EMPTY_IDS;
   }
@@ -8710,13 +8885,29 @@ var Viewport = class {
     if (items.length === 0) return;
     this.contextMenu.open(items, screenPos);
   }
+  /**
+   * Persistent, viewport-owned selection-change emitter. Subscribing works
+   * regardless of whether a select tool is registered yet; it forwards
+   * events from whichever select tool is currently attached via
+   * `toolManager.onRegister`. Never delivers stale ids once the enclosing
+   * history transaction completes.
+   */
   onSelectionChange(listener) {
-    const tool = this.getSelectTool();
-    return tool ? tool.onSelectionChange(listener) : noop;
+    this.selectionListeners.add(listener);
+    return () => {
+      this.selectionListeners.delete(listener);
+    };
   }
   getSelectionStyle() {
     return this.selectionOps.getStyle();
   }
+  /**
+   * Unlike `getSelectionStyle()` — which returns `{}` for a style-less
+   * selection — this returns `null` when no style field is applicable.
+   */
+  getSelectionStyleDetails() {
+    return this.selectionOps.getStyleDetails();
+  }
   applyStyleToSelection(style) {
     this.selectionOps.applyStyle(style);
   }
@@ -8765,6 +8956,11 @@ var Viewport = class {
     this.inputHandler.destroy();
     this.unsubCamera();
     this.unsubToolChange();
+    this.unsubToolRegister();
+    this.unsubRecorderEnd();
+    this.detachSelectionSource?.();
+    this.detachSelectionSource = null;
+    this.selectionListeners.clear();
     this.unsubStore.forEach((fn) => fn());
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
@@ -12366,7 +12562,7 @@ var PingTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.58.0";
+var VERSION = "0.60.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,