@fieldnotes/core 0.38.2 → 0.38.3

package/dist/index.cjs

@@ -6059,9 +6059,158 @@ var GridController = class {
   }
 };
 
+// src/canvas/viewport-interactions.ts
+var ARROW_HIT_THRESHOLD = 10;
+var ViewportInteractions = class {
+  constructor(deps) {
+    this.deps = deps;
+  }
+  doubleTapDetector = new DoubleTapDetector();
+  tapDownX = 0;
+  tapDownY = 0;
+  startEditingElement(id) {
+    const element = this.deps.store.getById(id);
+    if (!element || element.type !== "note" && element.type !== "text") return;
+    this.deps.renderLoop.flush();
+    const node = this.deps.domNodeManager.getNode(id);
+    if (node) {
+      this.deps.noteEditor.startEditing(node, id, this.deps.store);
+    }
+  }
+  fitNoteHeight(elementId) {
+    const element = this.deps.store.getById(elementId);
+    if (!element || element.type !== "note") return;
+    if (isNoteContentEmpty(element.text)) return;
+    const node = this.deps.domNodeManager.getNode(elementId);
+    if (!node) return;
+    const measured = node.scrollHeight;
+    if (measured > element.size.h) {
+      this.deps.store.update(elementId, { size: { w: element.size.w, h: measured } });
+    }
+  }
+  onTextEditStop(elementId) {
+    const element = this.deps.store.getById(elementId);
+    if (!element) return;
+    if (element.type === "note") {
+      if (isNoteContentEmpty(element.text)) {
+        this.deps.store.remove(elementId);
+        return;
+      }
+      this.fitNoteHeight(elementId);
+      return;
+    }
+    if (element.type !== "text") return;
+    if (!element.text || element.text.trim() === "") {
+      this.deps.store.remove(elementId);
+      return;
+    }
+    const node = this.deps.domNodeManager.getNode(elementId);
+    if (node && "size" in element) {
+      const measured = node.scrollHeight;
+      if (measured !== element.size.h) {
+        this.deps.store.update(elementId, { size: { w: element.size.w, h: measured } });
+      }
+    }
+  }
+  onTapDown = (e) => {
+    this.tapDownX = e.clientX;
+    this.tapDownY = e.clientY;
+  };
+  onDoubleTap = (e) => {
+    const dx = e.clientX - this.tapDownX;
+    const dy = e.clientY - this.tapDownY;
+    const moved = Math.sqrt(dx * dx + dy * dy);
+    if (moved > 10) return;
+    if (!this.doubleTapDetector.feed(e)) return;
+    if (typeof document.elementFromPoint !== "function") return;
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    const nodeEl = el?.closest("[data-element-id]");
+    if (nodeEl) {
+      const elementId = nodeEl.dataset["elementId"];
+      if (elementId) {
+        const element = this.deps.store.getById(elementId);
+        if (element?.type === "note" || element?.type === "text") {
+          this.startEditingElement(elementId);
+          return;
+        }
+      }
+    }
+    const rect = this.deps.wrapper.getBoundingClientRect();
+    const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    const world = this.deps.camera.screenToWorld(screen);
+    const hit = this.hitTestWorld(world);
+    if (hit?.type === "html") {
+      this.deps.interactMode.startInteracting(hit.id);
+      return;
+    }
+    const arrow = this.findArrowAt(world);
+    if (arrow) {
+      this.startArrowLabelEdit(arrow);
+    }
+  };
+  findArrowAt(world) {
+    const candidates = this.deps.store.queryPoint(world).reverse();
+    for (const el of candidates) {
+      if (el.type === "arrow" && isNearBezier(world, el.from, el.to, el.bend, ARROW_HIT_THRESHOLD)) {
+        return el;
+      }
+    }
+    return void 0;
+  }
+  startArrowLabelEdit(arrow) {
+    this.deps.arrowLabelEditor.startEditing({
+      arrow,
+      layer: this.deps.domLayer,
+      store: this.deps.store,
+      recorder: this.deps.recorder,
+      onDone: () => {
+        this.deps.renderer.setLabelEditingId(null);
+        this.deps.requestRender();
+      }
+    });
+    this.deps.renderer.setLabelEditingId(arrow.id);
+  }
+  hitTestWorld(world) {
+    const candidates = this.deps.store.queryPoint(world).reverse();
+    for (const el of candidates) {
+      if (!("size" in el)) continue;
+      const { x, y } = el.position;
+      const { w, h } = el.size;
+      if (world.x >= x && world.x <= x + w && world.y >= y && world.y <= y + h) {
+        return el;
+      }
+    }
+    return null;
+  }
+  onDragOver = (e) => {
+    e.preventDefault();
+  };
+  onDrop = (e) => {
+    e.preventDefault();
+    const rect = this.deps.wrapper.getBoundingClientRect();
+    const screenPos = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    const worldPos = this.deps.camera.screenToWorld(screenPos);
+    if (this.deps.dropHandler) {
+      this.deps.dropHandler(e, worldPos);
+      return;
+    }
+    const files = e.dataTransfer?.files;
+    if (!files) return;
+    for (const file of files) {
+      if (!file.type.startsWith("image/")) continue;
+      const reader = new FileReader();
+      reader.onload = () => {
+        const src = reader.result;
+        if (typeof src !== "string") return;
+        this.deps.addImage(src, worldPos);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+};
+
 // src/canvas/viewport.ts
 var EMPTY_IDS = [];
-var ARROW_HIT_THRESHOLD = 10;
 function noop() {
 }
 var Viewport = class {
@@ -6096,7 +6245,7 @@ var Viewport = class {
       toolbar: options.toolbar,
       placeholder: options.placeholder
     });
-    this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
+    this.noteEditor.setOnStop((id) => this.interactions.onTextEditStop(id));
     this.arrowLabelEditor = new ArrowLabelEditor();
     this.noteEditor.setHistoryHooks(
       () => this.historyRecorder.begin(),
@@ -6123,8 +6272,8 @@ var Viewport = class {
       store: this.store,
       requestRender: () => this.requestRender(),
       switchTool: (name) => this.toolManager.setTool(name, this.toolContext),
-      editElement: (id) => this.startEditingElement(id),
-      fitNoteHeight: (id) => this.fitNoteHeight(id),
+      editElement: (id) => this.interactions.startEditingElement(id),
+      fitNoteHeight: (id) => this.interactions.fitNoteHeight(id),
       setCursor: (cursor) => {
         this.wrapper.style.cursor = cursor;
       },
@@ -6160,7 +6309,7 @@ var Viewport = class {
     this.unsubToolChange = this.toolManager.onChange(() => this.contextMenu?.close());
     this.domNodeManager = new DomNodeManager({
       domLayer: this.domLayer,
-      onEditRequest: (id) => this.startEditingElement(id),
+      onEditRequest: (id) => this.interactions.startEditingElement(id),
       isEditingElement: (id) => this.noteEditor.isEditing && this.noteEditor.editingElementId === id,
       getVersion: (id) => this.store.getVersion(id)
     });
@@ -6232,10 +6381,26 @@ var Viewport = class {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
       this.requestRender();
     });
-    this.wrapper.addEventListener("pointerdown", this.onTapDown);
-    this.wrapper.addEventListener("pointerup", this.onDoubleTap);
-    this.wrapper.addEventListener("dragover", this.onDragOver);
-    this.wrapper.addEventListener("drop", this.onDrop);
+    this.interactions = new ViewportInteractions({
+      store: this.store,
+      camera: this.camera,
+      wrapper: this.wrapper,
+      domLayer: this.domLayer,
+      renderLoop: this.renderLoop,
+      domNodeManager: this.domNodeManager,
+      noteEditor: this.noteEditor,
+      arrowLabelEditor: this.arrowLabelEditor,
+      interactMode: this.interactMode,
+      renderer: this.renderer,
+      recorder: this.historyRecorder,
+      requestRender: () => this.requestRender(),
+      addImage: (src, position) => this.addImage(src, position),
+      dropHandler: this.dropHandler
+    });
+    this.wrapper.addEventListener("pointerdown", this.interactions.onTapDown);
+    this.wrapper.addEventListener("pointerup", this.interactions.onDoubleTap);
+    this.wrapper.addEventListener("dragover", this.interactions.onDragOver);
+    this.wrapper.addEventListener("drop", this.interactions.onDrop);
     this.observeResize();
     this.syncCanvasSize();
     this.renderLoop.start();
@@ -6271,9 +6436,7 @@ var Viewport = class {
   onHtmlElementMount;
   dropHandler;
   gridController;
-  doubleTapDetector = new DoubleTapDetector();
-  tapDownX = 0;
-  tapDownY = 0;
+  interactions;
   contextMenu = null;
   get ctx() {
     return this.canvasEl.getContext("2d");
@@ -6534,10 +6697,10 @@ var Viewport = class {
     this.arrowLabelEditor.cancel();
     this.historyRecorder.destroy();
     this.contextMenu?.dispose();
-    this.wrapper.removeEventListener("pointerdown", this.onTapDown);
-    this.wrapper.removeEventListener("pointerup", this.onDoubleTap);
-    this.wrapper.removeEventListener("dragover", this.onDragOver);
-    this.wrapper.removeEventListener("drop", this.onDrop);
+    this.wrapper.removeEventListener("pointerdown", this.interactions.onTapDown);
+    this.wrapper.removeEventListener("pointerup", this.interactions.onDoubleTap);
+    this.wrapper.removeEventListener("dragover", this.interactions.onDragOver);
+    this.wrapper.removeEventListener("drop", this.interactions.onDrop);
     this.inputHandler.destroy();
     this.unsubCamera();
     this.unsubToolChange();
@@ -6546,148 +6709,9 @@ var Viewport = class {
     this.resizeObserver = null;
     this.wrapper.remove();
   }
-  startEditingElement(id) {
-    const element = this.store.getById(id);
-    if (!element || element.type !== "note" && element.type !== "text") return;
-    this.renderLoop.flush();
-    const node = this.domNodeManager.getNode(id);
-    if (node) {
-      this.noteEditor.startEditing(node, id, this.store);
-    }
-  }
-  fitNoteHeight(elementId) {
-    const element = this.store.getById(elementId);
-    if (!element || element.type !== "note") return;
-    if (isNoteContentEmpty(element.text)) return;
-    const node = this.domNodeManager.getNode(elementId);
-    if (!node) return;
-    const measured = node.scrollHeight;
-    if (measured > element.size.h) {
-      this.store.update(elementId, { size: { w: element.size.w, h: measured } });
-    }
-  }
-  onTextEditStop(elementId) {
-    const element = this.store.getById(elementId);
-    if (!element) return;
-    if (element.type === "note") {
-      if (isNoteContentEmpty(element.text)) {
-        this.store.remove(elementId);
-        return;
-      }
-      this.fitNoteHeight(elementId);
-      return;
-    }
-    if (element.type !== "text") return;
-    if (!element.text || element.text.trim() === "") {
-      this.store.remove(elementId);
-      return;
-    }
-    const node = this.domNodeManager.getNode(elementId);
-    if (node && "size" in element) {
-      const measured = node.scrollHeight;
-      if (measured !== element.size.h) {
-        this.store.update(elementId, { size: { w: element.size.w, h: measured } });
-      }
-    }
-  }
-  onTapDown = (e) => {
-    this.tapDownX = e.clientX;
-    this.tapDownY = e.clientY;
-  };
-  onDoubleTap = (e) => {
-    const dx = e.clientX - this.tapDownX;
-    const dy = e.clientY - this.tapDownY;
-    const moved = Math.sqrt(dx * dx + dy * dy);
-    if (moved > 10) return;
-    if (!this.doubleTapDetector.feed(e)) return;
-    if (typeof document.elementFromPoint !== "function") return;
-    const el = document.elementFromPoint(e.clientX, e.clientY);
-    const nodeEl = el?.closest("[data-element-id]");
-    if (nodeEl) {
-      const elementId = nodeEl.dataset["elementId"];
-      if (elementId) {
-        const element = this.store.getById(elementId);
-        if (element?.type === "note" || element?.type === "text") {
-          this.startEditingElement(elementId);
-          return;
-        }
-      }
-    }
-    const rect = this.wrapper.getBoundingClientRect();
-    const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-    const world = this.camera.screenToWorld(screen);
-    const hit = this.hitTestWorld(world);
-    if (hit?.type === "html") {
-      this.interactMode.startInteracting(hit.id);
-      return;
-    }
-    const arrow = this.findArrowAt(world);
-    if (arrow) {
-      this.startArrowLabelEdit(arrow);
-    }
-  };
-  findArrowAt(world) {
-    const candidates = this.store.queryPoint(world).reverse();
-    for (const el of candidates) {
-      if (el.type === "arrow" && isNearBezier(world, el.from, el.to, el.bend, ARROW_HIT_THRESHOLD)) {
-        return el;
-      }
-    }
-    return void 0;
-  }
-  startArrowLabelEdit(arrow) {
-    this.arrowLabelEditor.startEditing({
-      arrow,
-      layer: this.domLayer,
-      store: this.store,
-      recorder: this.historyRecorder,
-      onDone: () => {
-        this.renderer.setLabelEditingId(null);
-        this.requestRender();
-      }
-    });
-    this.renderer.setLabelEditingId(arrow.id);
-  }
-  hitTestWorld(world) {
-    const candidates = this.store.queryPoint(world).reverse();
-    for (const el of candidates) {
-      if (!("size" in el)) continue;
-      const { x, y } = el.position;
-      const { w, h } = el.size;
-      if (world.x >= x && world.x <= x + w && world.y >= y && world.y <= y + h) {
-        return el;
-      }
-    }
-    return null;
-  }
   stopInteracting() {
     this.interactMode.stopInteracting();
   }
-  onDragOver = (e) => {
-    e.preventDefault();
-  };
-  onDrop = (e) => {
-    e.preventDefault();
-    const rect = this.wrapper.getBoundingClientRect();
-    const screenPos = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-    const worldPos = this.camera.screenToWorld(screenPos);
-    if (this.dropHandler) {
-      this.dropHandler(e, worldPos);
-      return;
-    }
-    const files = e.dataTransfer?.files;
-    if (!files) return;
-    for (const file of files) {
-      if (!file.type.startsWith("image/")) continue;
-      const reader = new FileReader();
-      reader.onload = () => {
-        const src = reader.result;
-        if (typeof src !== "string") return;
-        this.addImage(src, worldPos);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
   unbindArrowsFrom(removedElement) {
     const boundArrows = findBoundArrows(removedElement.id, this.store);
     const bounds = getElementBounds(removedElement);
@@ -9044,7 +9068,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.38.2";
+var VERSION = "0.38.3";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,