@fieldnotes/core 0.8.5 → 0.8.6

package/dist/index.js

@@ -641,6 +641,15 @@ var ElementStore = class {
   on(event, listener) {
     return this.bus.on(event, listener);
   }
+  onChange(listener) {
+    const unsubs = [
+      this.bus.on("add", listener),
+      this.bus.on("remove", listener),
+      this.bus.on("update", listener),
+      this.bus.on("clear", listener)
+    ];
+    return () => unsubs.forEach((fn) => fn());
+  }
 };
 
 // src/elements/arrow-geometry.ts
@@ -2092,6 +2101,10 @@ var LayerManager = class {
     this.updateLayerDirect(id, { locked });
     return true;
   }
+  setLayerOpacity(id, opacity) {
+    if (!this.layers.has(id)) return;
+    this.updateLayerDirect(id, { opacity: Math.max(0, Math.min(1, opacity)) });
+  }
   setActiveLayer(id) {
     if (!this.layers.has(id)) return;
     this._activeLayerId = id;
@@ -2147,6 +2160,294 @@ var LayerManager = class {
   }
 };
 
+// src/canvas/interact-mode.ts
+var InteractMode = class {
+  interactingElementId = null;
+  getNode;
+  constructor(deps) {
+    this.getNode = deps.getNode;
+  }
+  startInteracting(id) {
+    this.stopInteracting();
+    const node = this.getNode(id);
+    if (!node) return;
+    this.interactingElementId = id;
+    node.style.pointerEvents = "auto";
+    node.addEventListener("pointerdown", this.onNodePointerDown);
+    window.addEventListener("keydown", this.onKeyDown);
+    window.addEventListener("pointerdown", this.onPointerDown);
+  }
+  stopInteracting() {
+    if (!this.interactingElementId) return;
+    const node = this.getNode(this.interactingElementId);
+    if (node) {
+      node.style.pointerEvents = "none";
+      node.removeEventListener("pointerdown", this.onNodePointerDown);
+    }
+    this.interactingElementId = null;
+    window.removeEventListener("keydown", this.onKeyDown);
+    window.removeEventListener("pointerdown", this.onPointerDown);
+  }
+  isInteracting() {
+    return this.interactingElementId !== null;
+  }
+  destroy() {
+    this.stopInteracting();
+  }
+  onNodePointerDown = (e) => {
+    e.stopPropagation();
+  };
+  onKeyDown = (e) => {
+    if (e.key === "Escape") {
+      this.stopInteracting();
+    }
+  };
+  onPointerDown = (e) => {
+    if (!this.interactingElementId) return;
+    const target = e.target;
+    if (!(target instanceof Element)) {
+      this.stopInteracting();
+      return;
+    }
+    const node = this.getNode(this.interactingElementId);
+    if (node && !node.contains(target)) {
+      this.stopInteracting();
+    }
+  };
+};
+
+// src/canvas/dom-node-manager.ts
+var DomNodeManager = class {
+  domNodes = /* @__PURE__ */ new Map();
+  htmlContent = /* @__PURE__ */ new Map();
+  domLayer;
+  onEditRequest;
+  isEditingElement;
+  constructor(deps) {
+    this.domLayer = deps.domLayer;
+    this.onEditRequest = deps.onEditRequest;
+    this.isEditingElement = deps.isEditingElement;
+  }
+  getNode(id) {
+    return this.domNodes.get(id);
+  }
+  storeHtmlContent(elementId, dom) {
+    this.htmlContent.set(elementId, dom);
+  }
+  syncDomNode(element, zIndex = 0) {
+    let node = this.domNodes.get(element.id);
+    if (!node) {
+      node = document.createElement("div");
+      node.dataset["elementId"] = element.id;
+      Object.assign(node.style, {
+        position: "absolute",
+        pointerEvents: "auto"
+      });
+      this.domLayer.appendChild(node);
+      this.domNodes.set(element.id, node);
+    }
+    const size = "size" in element ? element.size : null;
+    Object.assign(node.style, {
+      display: "block",
+      left: `${element.position.x}px`,
+      top: `${element.position.y}px`,
+      width: size ? `${size.w}px` : "auto",
+      height: size ? `${size.h}px` : "auto",
+      zIndex: String(zIndex)
+    });
+    this.renderDomContent(node, element);
+  }
+  hideDomNode(id) {
+    const node = this.domNodes.get(id);
+    if (node) node.style.display = "none";
+  }
+  removeDomNode(id) {
+    this.htmlContent.delete(id);
+    const node = this.domNodes.get(id);
+    if (node) {
+      node.remove();
+      this.domNodes.delete(id);
+    }
+  }
+  clearDomNodes() {
+    this.domNodes.forEach((node) => node.remove());
+    this.domNodes.clear();
+    this.htmlContent.clear();
+  }
+  reattachHtmlContent(store) {
+    for (const el of store.getElementsByType("html")) {
+      if (el.domId) {
+        const dom = document.getElementById(el.domId);
+        if (dom) {
+          this.htmlContent.set(el.id, dom);
+        }
+      }
+    }
+  }
+  renderDomContent(node, element) {
+    if (element.type === "note") {
+      if (!node.dataset["initialized"]) {
+        node.dataset["initialized"] = "true";
+        Object.assign(node.style, {
+          backgroundColor: element.backgroundColor,
+          color: element.textColor,
+          padding: "8px",
+          borderRadius: "4px",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+          fontSize: "14px",
+          overflow: "hidden",
+          cursor: "default",
+          userSelect: "none",
+          wordWrap: "break-word"
+        });
+        node.textContent = element.text || "";
+        node.addEventListener("dblclick", (e) => {
+          e.stopPropagation();
+          const id = node.dataset["elementId"];
+          if (id) this.onEditRequest(id);
+        });
+      }
+      if (!this.isEditingElement(element.id)) {
+        if (node.textContent !== element.text) {
+          node.textContent = element.text || "";
+        }
+        node.style.backgroundColor = element.backgroundColor;
+        node.style.color = element.textColor;
+      }
+    }
+    if (element.type === "html" && !node.dataset["initialized"]) {
+      const content = this.htmlContent.get(element.id);
+      if (content) {
+        node.dataset["initialized"] = "true";
+        Object.assign(node.style, {
+          overflow: "hidden",
+          pointerEvents: "none"
+        });
+        node.appendChild(content);
+      }
+    }
+    if (element.type === "text") {
+      if (!node.dataset["initialized"]) {
+        node.dataset["initialized"] = "true";
+        Object.assign(node.style, {
+          padding: "2px",
+          fontSize: `${element.fontSize}px`,
+          color: element.color,
+          textAlign: element.textAlign,
+          background: "none",
+          border: "none",
+          boxShadow: "none",
+          overflow: "visible",
+          cursor: "default",
+          userSelect: "none",
+          wordWrap: "break-word",
+          whiteSpace: "pre-wrap",
+          lineHeight: "1.4"
+        });
+        node.textContent = element.text || "";
+        node.addEventListener("dblclick", (e) => {
+          e.stopPropagation();
+          const id = node.dataset["elementId"];
+          if (id) this.onEditRequest(id);
+        });
+      }
+      if (!this.isEditingElement(element.id)) {
+        if (node.textContent !== element.text) {
+          node.textContent = element.text || "";
+        }
+        Object.assign(node.style, {
+          fontSize: `${element.fontSize}px`,
+          color: element.color,
+          textAlign: element.textAlign
+        });
+      }
+    }
+  }
+};
+
+// src/canvas/render-loop.ts
+var RenderLoop = class {
+  needsRender = false;
+  animFrameId = 0;
+  canvasEl;
+  camera;
+  background;
+  store;
+  renderer;
+  toolManager;
+  layerManager;
+  domNodeManager;
+  constructor(deps) {
+    this.canvasEl = deps.canvasEl;
+    this.camera = deps.camera;
+    this.background = deps.background;
+    this.store = deps.store;
+    this.renderer = deps.renderer;
+    this.toolManager = deps.toolManager;
+    this.layerManager = deps.layerManager;
+    this.domNodeManager = deps.domNodeManager;
+  }
+  requestRender() {
+    this.needsRender = true;
+  }
+  flush() {
+    if (this.needsRender) {
+      this.render();
+      this.needsRender = false;
+    }
+  }
+  start() {
+    const loop = () => {
+      if (this.needsRender) {
+        this.render();
+        this.needsRender = false;
+      }
+      this.animFrameId = requestAnimationFrame(loop);
+    };
+    this.animFrameId = requestAnimationFrame(loop);
+  }
+  stop() {
+    cancelAnimationFrame(this.animFrameId);
+  }
+  setCanvasSize(width, height) {
+    this.canvasEl.width = width;
+    this.canvasEl.height = height;
+  }
+  render() {
+    const ctx = this.canvasEl.getContext("2d");
+    if (!ctx) return;
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    ctx.save();
+    ctx.scale(dpr, dpr);
+    this.renderer.setCanvasSize(this.canvasEl.clientWidth, this.canvasEl.clientHeight);
+    this.background.render(ctx, this.camera);
+    ctx.save();
+    ctx.translate(this.camera.position.x, this.camera.position.y);
+    ctx.scale(this.camera.zoom, this.camera.zoom);
+    const allElements = this.store.getAll();
+    let domZIndex = 0;
+    for (const element of allElements) {
+      if (!this.layerManager.isLayerVisible(element.layerId)) {
+        if (this.renderer.isDomElement(element)) {
+          this.domNodeManager.hideDomNode(element.id);
+        }
+        continue;
+      }
+      if (this.renderer.isDomElement(element)) {
+        this.domNodeManager.syncDomNode(element, domZIndex++);
+      } else {
+        this.renderer.renderCanvasElement(ctx, element);
+      }
+    }
+    const activeTool = this.toolManager.activeTool;
+    if (activeTool?.renderOverlay) {
+      activeTool.renderOverlay(ctx);
+    }
+    ctx.restore();
+    ctx.restore();
+  }
+};
+
 // src/canvas/viewport.ts
 var Viewport = class {
   constructor(container, options = {}) {
@@ -2192,6 +2493,24 @@ var Viewport = class {
       historyRecorder: this.historyRecorder,
       historyStack: this.history
     });
+    this.domNodeManager = new DomNodeManager({
+      domLayer: this.domLayer,
+      onEditRequest: (id) => this.startEditingElement(id),
+      isEditingElement: (id) => this.noteEditor.isEditing && this.noteEditor.editingElementId === id
+    });
+    this.interactMode = new InteractMode({
+      getNode: (id) => this.domNodeManager.getNode(id)
+    });
+    this.renderLoop = new RenderLoop({
+      canvasEl: this.canvasEl,
+      camera: this.camera,
+      background: this.background,
+      store: this.store,
+      renderer: this.renderer,
+      toolManager: this.toolManager,
+      layerManager: this.layerManager,
+      domNodeManager: this.domNodeManager
+    });
     this.unsubCamera = this.camera.onChange(() => {
       this.applyCameraTransform();
       this.requestRender();
@@ -2200,10 +2519,14 @@ var Viewport = class {
       this.store.on("add", () => this.requestRender()),
       this.store.on("remove", (el) => {
         this.unbindArrowsFrom(el);
-        this.removeDomNode(el.id);
+        this.domNodeManager.removeDomNode(el.id);
+        this.requestRender();
       }),
       this.store.on("update", () => this.requestRender()),
-      this.store.on("clear", () => this.clearDomNodes())
+      this.store.on("clear", () => {
+        this.domNodeManager.clearDomNodes();
+        this.requestRender();
+      })
     ];
     this.layerManager.on("change", () => {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
@@ -2214,7 +2537,7 @@ var Viewport = class {
     this.wrapper.addEventListener("drop", this.onDrop);
     this.observeResize();
     this.syncCanvasSize();
-    this.startRenderLoop();
+    this.renderLoop.start();
   }
   camera;
   store;
@@ -2233,13 +2556,11 @@ var Viewport = class {
   historyRecorder;
   toolContext;
   resizeObserver = null;
-  animFrameId = 0;
   _snapToGrid = false;
   _gridSize;
-  needsRender = true;
-  domNodes = /* @__PURE__ */ new Map();
-  htmlContent = /* @__PURE__ */ new Map();
-  interactingElementId = null;
+  renderLoop;
+  domNodeManager;
+  interactMode;
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -2251,7 +2572,7 @@ var Viewport = class {
     this.toolContext.snapToGrid = enabled;
   }
   requestRender() {
-    this.needsRender = true;
+    this.renderLoop.requestRender();
   }
   exportState() {
     return exportState(this.store.snapshot(), this.camera, this.layerManager.snapshot());
@@ -2265,12 +2586,12 @@ var Viewport = class {
   loadState(state) {
     this.historyRecorder.pause();
     this.noteEditor.destroy(this.store);
-    this.clearDomNodes();
+    this.domNodeManager.clearDomNodes();
     this.store.loadSnapshot(state.elements);
     if (state.layers && state.layers.length > 0) {
       this.layerManager.loadSnapshot(state.layers);
     }
-    this.reattachHtmlContent();
+    this.domNodeManager.reattachHtmlContent(this.store);
     this.history.clear();
     this.historyRecorder.resume();
     this.camera.moveTo(state.camera.position.x, state.camera.position.y);
@@ -2309,7 +2630,7 @@ var Viewport = class {
       domId,
       layerId: this.layerManager.activeLayerId
     });
-    this.htmlContent.set(el.id, dom);
+    this.domNodeManager.storeHtmlContent(el.id, dom);
     this.historyRecorder.begin();
     this.store.add(el);
     this.historyRecorder.commit();
@@ -2345,8 +2666,8 @@ var Viewport = class {
     this.requestRender();
   }
   destroy() {
-    cancelAnimationFrame(this.animFrameId);
-    this.stopInteracting();
+    this.renderLoop.stop();
+    this.interactMode.destroy();
     this.noteEditor.destroy(this.store);
     this.historyRecorder.destroy();
     this.wrapper.removeEventListener("dblclick", this.onDblClick);
@@ -2359,54 +2680,11 @@ var Viewport = class {
     this.resizeObserver = null;
     this.wrapper.remove();
   }
-  startRenderLoop() {
-    const loop = () => {
-      if (this.needsRender) {
-        this.render();
-        this.needsRender = false;
-      }
-      this.animFrameId = requestAnimationFrame(loop);
-    };
-    this.animFrameId = requestAnimationFrame(loop);
-  }
-  render() {
-    const ctx = this.ctx;
-    if (!ctx) return;
-    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
-    ctx.save();
-    ctx.scale(dpr, dpr);
-    this.renderer.setCanvasSize(this.canvasEl.clientWidth, this.canvasEl.clientHeight);
-    this.background.render(ctx, this.camera);
-    ctx.save();
-    ctx.translate(this.camera.position.x, this.camera.position.y);
-    ctx.scale(this.camera.zoom, this.camera.zoom);
-    const allElements = this.store.getAll();
-    let domZIndex = 0;
-    for (const element of allElements) {
-      if (!this.layerManager.isLayerVisible(element.layerId)) {
-        if (this.renderer.isDomElement(element)) {
-          this.hideDomNode(element.id);
-        }
-        continue;
-      }
-      if (this.renderer.isDomElement(element)) {
-        this.syncDomNode(element, domZIndex++);
-      } else {
-        this.renderer.renderCanvasElement(ctx, element);
-      }
-    }
-    const activeTool = this.toolManager.activeTool;
-    if (activeTool?.renderOverlay) {
-      activeTool.renderOverlay(ctx);
-    }
-    ctx.restore();
-    ctx.restore();
-  }
   startEditingElement(id) {
     const element = this.store.getById(id);
     if (!element || element.type !== "note" && element.type !== "text") return;
-    this.render();
-    const node = this.domNodes.get(id);
+    this.renderLoop.flush();
+    const node = this.domNodeManager.getNode(id);
     if (node) {
       this.noteEditor.startEditing(node, id, this.store);
     }
@@ -2420,7 +2698,7 @@ var Viewport = class {
       this.historyRecorder.commit();
       return;
     }
-    const node = this.domNodes.get(elementId);
+    const node = this.domNodeManager.getNode(elementId);
     if (node && "size" in element) {
       const measuredHeight = node.scrollHeight;
       if (measuredHeight !== element.size.h) {
@@ -2448,7 +2726,7 @@ var Viewport = class {
     const world = this.camera.screenToWorld(screen);
     const hit = this.hitTestWorld(world);
     if (hit?.type === "html") {
-      this.startInteracting(hit.id);
+      this.interactMode.startInteracting(hit.id);
     }
   };
   hitTestWorld(world) {
@@ -2463,44 +2741,9 @@ var Viewport = class {
     }
     return null;
   }
-  startInteracting(id) {
-    this.stopInteracting();
-    const node = this.domNodes.get(id);
-    if (!node) return;
-    this.interactingElementId = id;
-    node.style.pointerEvents = "auto";
-    node.addEventListener("pointerdown", this.onInteractNodePointerDown);
-    window.addEventListener("keydown", this.onInteractKeyDown);
-    window.addEventListener("pointerdown", this.onInteractPointerDown);
-  }
   stopInteracting() {
-    if (!this.interactingElementId) return;
-    const node = this.domNodes.get(this.interactingElementId);
-    if (node) {
-      node.style.pointerEvents = "none";
-      node.removeEventListener("pointerdown", this.onInteractNodePointerDown);
-    }
-    this.interactingElementId = null;
-    window.removeEventListener("keydown", this.onInteractKeyDown);
-    window.removeEventListener("pointerdown", this.onInteractPointerDown);
+    this.interactMode.stopInteracting();
   }
-  onInteractNodePointerDown = (e) => {
-    e.stopPropagation();
-  };
-  onInteractKeyDown = (e) => {
-    if (e.key === "Escape") {
-      this.stopInteracting();
-    }
-  };
-  onInteractPointerDown = (e) => {
-    if (!this.interactingElementId) return;
-    const target = e.target;
-    if (!target) return;
-    const node = this.domNodes.get(this.interactingElementId);
-    if (node && !node.contains(target)) {
-      this.stopInteracting();
-    }
-  };
   onDragOver = (e) => {
     e.preventDefault();
   };
@@ -2522,108 +2765,6 @@ var Viewport = class {
       reader.readAsDataURL(file);
     }
   };
-  syncDomNode(element, zIndex = 0) {
-    let node = this.domNodes.get(element.id);
-    if (!node) {
-      node = document.createElement("div");
-      node.dataset["elementId"] = element.id;
-      Object.assign(node.style, {
-        position: "absolute",
-        pointerEvents: "auto"
-      });
-      this.domLayer.appendChild(node);
-      this.domNodes.set(element.id, node);
-    }
-    const size = "size" in element ? element.size : null;
-    Object.assign(node.style, {
-      display: "block",
-      left: `${element.position.x}px`,
-      top: `${element.position.y}px`,
-      width: size ? `${size.w}px` : "auto",
-      height: size ? `${size.h}px` : "auto",
-      zIndex: String(zIndex)
-    });
-    this.renderDomContent(node, element);
-  }
-  renderDomContent(node, element) {
-    if (element.type === "note") {
-      if (!node.dataset["initialized"]) {
-        node.dataset["initialized"] = "true";
-        Object.assign(node.style, {
-          backgroundColor: element.backgroundColor,
-          color: element.textColor,
-          padding: "8px",
-          borderRadius: "4px",
-          boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-          fontSize: "14px",
-          overflow: "hidden",
-          cursor: "default",
-          userSelect: "none",
-          wordWrap: "break-word"
-        });
-        node.textContent = element.text || "";
-        node.addEventListener("dblclick", (e) => {
-          e.stopPropagation();
-          const id = node.dataset["elementId"];
-          if (id) this.startEditingElement(id);
-        });
-      }
-      if (!this.noteEditor.isEditing || this.noteEditor.editingElementId !== element.id) {
-        if (node.textContent !== element.text) {
-          node.textContent = element.text || "";
-        }
-        node.style.backgroundColor = element.backgroundColor;
-        node.style.color = element.textColor;
-      }
-    }
-    if (element.type === "html" && !node.dataset["initialized"]) {
-      const content = this.htmlContent.get(element.id);
-      if (content) {
-        node.dataset["initialized"] = "true";
-        Object.assign(node.style, {
-          overflow: "hidden",
-          pointerEvents: "none"
-        });
-        node.appendChild(content);
-      }
-    }
-    if (element.type === "text") {
-      if (!node.dataset["initialized"]) {
-        node.dataset["initialized"] = "true";
-        Object.assign(node.style, {
-          padding: "2px",
-          fontSize: `${element.fontSize}px`,
-          color: element.color,
-          textAlign: element.textAlign,
-          background: "none",
-          border: "none",
-          boxShadow: "none",
-          overflow: "visible",
-          cursor: "default",
-          userSelect: "none",
-          wordWrap: "break-word",
-          whiteSpace: "pre-wrap",
-          lineHeight: "1.4"
-        });
-        node.textContent = element.text || "";
-        node.addEventListener("dblclick", (e) => {
-          e.stopPropagation();
-          const id = node.dataset["elementId"];
-          if (id) this.startEditingElement(id);
-        });
-      }
-      if (!this.noteEditor.isEditing || this.noteEditor.editingElementId !== element.id) {
-        if (node.textContent !== element.text) {
-          node.textContent = element.text || "";
-        }
-        Object.assign(node.style, {
-          fontSize: `${element.fontSize}px`,
-          color: element.color,
-          textAlign: element.textAlign
-        });
-      }
-    }
-  }
   unbindArrowsFrom(removedElement) {
     const boundArrows = findBoundArrows(removedElement.id, this.store);
     const bounds = getElementBounds(removedElement);
@@ -2658,35 +2799,6 @@ var Viewport = class {
       }
     }
   }
-  hideDomNode(id) {
-    const node = this.domNodes.get(id);
-    if (node) node.style.display = "none";
-  }
-  removeDomNode(id) {
-    this.htmlContent.delete(id);
-    const node = this.domNodes.get(id);
-    if (node) {
-      node.remove();
-      this.domNodes.delete(id);
-    }
-    this.requestRender();
-  }
-  clearDomNodes() {
-    this.domNodes.forEach((node) => node.remove());
-    this.domNodes.clear();
-    this.htmlContent.clear();
-    this.requestRender();
-  }
-  reattachHtmlContent() {
-    for (const el of this.store.getElementsByType("html")) {
-      if (el.domId) {
-        const dom = document.getElementById(el.domId);
-        if (dom) {
-          this.htmlContent.set(el.id, dom);
-        }
-      }
-    }
-  }
   createWrapper() {
     const el = document.createElement("div");
     Object.assign(el.style, {
@@ -2727,8 +2839,7 @@ var Viewport = class {
   syncCanvasSize() {
     const rect = this.container.getBoundingClientRect();
     const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
-    this.canvasEl.width = rect.width * dpr;
-    this.canvasEl.height = rect.height * dpr;
+    this.renderLoop.setCanvasSize(rect.width * dpr, rect.height * dpr);
     this.requestRender();
   }
   observeResize() {
@@ -2778,6 +2889,7 @@ var PencilTool = class {
   color;
   width;
   smoothing;
+  optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.color = options.color ?? "#000000";
     this.width = options.width ?? 2;
@@ -2789,10 +2901,18 @@ var PencilTool = class {
   onDeactivate(ctx) {
     ctx.setCursor?.("default");
   }
+  getOptions() {
+    return { color: this.color, width: this.width, smoothing: this.smoothing };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
   setOptions(options) {
     if (options.color !== void 0) this.color = options.color;
     if (options.width !== void 0) this.width = options.width;
     if (options.smoothing !== void 0) this.smoothing = options.smoothing;
+    this.notifyOptionsChange();
   }
   onPointerDown(state, ctx) {
     this.drawing = true;
@@ -2825,6 +2945,9 @@ var PencilTool = class {
     this.points = [];
     ctx.requestRender();
   }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
+  }
   renderOverlay(ctx) {
     if (!this.drawing || this.points.length < 2) return;
     ctx.save();
@@ -2861,6 +2984,9 @@ var EraserTool = class {
     this.radius = options.radius ?? DEFAULT_RADIUS;
     this.cursor = makeEraserCursor(this.radius);
   }
+  getOptions() {
+    return { radius: this.radius };
+  }
   onActivate(ctx) {
     ctx.setCursor?.(this.cursor);
   }
@@ -3449,13 +3575,25 @@ var ArrowTool = class {
   fromBinding;
   fromTarget = null;
   toTarget = null;
+  optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.color = options.color ?? "#000000";
     this.width = options.width ?? 2;
   }
+  getOptions() {
+    return { color: this.color, width: this.width };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
   setOptions(options) {
     if (options.color !== void 0) this.color = options.color;
     if (options.width !== void 0) this.width = options.width;
+    this.notifyOptionsChange();
+  }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
   }
   layerFilter(ctx) {
     const activeLayerId = ctx.activeLayerId;
@@ -3577,15 +3715,31 @@ var NoteTool = class {
   backgroundColor;
   textColor;
   size;
+  optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.backgroundColor = options.backgroundColor ?? "#ffeb3b";
     this.textColor = options.textColor ?? "#000000";
     this.size = options.size ?? { w: 200, h: 100 };
   }
+  getOptions() {
+    return {
+      backgroundColor: this.backgroundColor,
+      textColor: this.textColor,
+      size: { ...this.size }
+    };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
   setOptions(options) {
     if (options.backgroundColor !== void 0) this.backgroundColor = options.backgroundColor;
     if (options.textColor !== void 0) this.textColor = options.textColor;
     if (options.size !== void 0) this.size = options.size;
+    this.notifyOptionsChange();
+  }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
   }
   onPointerDown(_state, _ctx) {
   }
@@ -3616,15 +3770,27 @@ var TextTool = class {
   fontSize;
   color;
   textAlign;
+  optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.fontSize = options.fontSize ?? 16;
     this.color = options.color ?? "#1a1a1a";
     this.textAlign = options.textAlign ?? "left";
   }
+  getOptions() {
+    return { fontSize: this.fontSize, color: this.color, textAlign: this.textAlign };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
   setOptions(options) {
     if (options.fontSize !== void 0) this.fontSize = options.fontSize;
     if (options.color !== void 0) this.color = options.color;
     if (options.textAlign !== void 0) this.textAlign = options.textAlign;
+    this.notifyOptionsChange();
+  }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
   }
   onActivate(ctx) {
     ctx.setCursor?.("text");
@@ -3696,17 +3862,31 @@ var ShapeTool = class {
   strokeColor;
   strokeWidth;
   fillColor;
+  optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.shape = options.shape ?? "rectangle";
     this.strokeColor = options.strokeColor ?? "#000000";
     this.strokeWidth = options.strokeWidth ?? 2;
     this.fillColor = options.fillColor ?? "none";
   }
+  getOptions() {
+    return {
+      shape: this.shape,
+      strokeColor: this.strokeColor,
+      strokeWidth: this.strokeWidth,
+      fillColor: this.fillColor
+    };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
   setOptions(options) {
     if (options.shape !== void 0) this.shape = options.shape;
     if (options.strokeColor !== void 0) this.strokeColor = options.strokeColor;
     if (options.strokeWidth !== void 0) this.strokeWidth = options.strokeWidth;
     if (options.fillColor !== void 0) this.fillColor = options.fillColor;
+    this.notifyOptionsChange();
   }
   onActivate(_ctx) {
     if (typeof window !== "undefined") {
@@ -3793,6 +3973,9 @@ var ShapeTool = class {
     }
     return { position: { x, y }, size: { w, h } };
   }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
+  }
   snap(point, ctx) {
     return ctx.snapToGrid && ctx.gridSize ? snapPoint(point, ctx.gridSize) : point;
   }
@@ -3845,7 +4028,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.5";
+var VERSION = "0.8.6";
 export {
   AddElementCommand,
   ArrowTool,