@fieldnotes/core 0.38.2 → 0.38.4

package/dist/index.d.cts

@@ -482,9 +482,7 @@ declare class Viewport {
     private readonly onHtmlElementMount?;
     private readonly dropHandler?;
     private readonly gridController;
-    private readonly doubleTapDetector;
-    private tapDownX;
-    private tapDownY;
+    private readonly interactions;
     private contextMenu;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
@@ -562,17 +560,7 @@ declare class Viewport {
     getRenderStats(): RenderStatsSnapshot;
     logPerformance(intervalMs?: number): () => void;
     destroy(): void;
-    private startEditingElement;
-    private fitNoteHeight;
-    private onTextEditStop;
-    private onTapDown;
-    private onDoubleTap;
-    private findArrowAt;
-    private startArrowLabelEdit;
-    private hitTestWorld;
     stopInteracting(): void;
-    private onDragOver;
-    private onDrop;
     private unbindArrowsFrom;
     private applyCameraTransform;
     private syncCanvasSize;
@@ -1005,6 +993,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.38.2";
+declare const VERSION = "0.38.4";
 
 export { type ActiveFormats, type AlignEdge, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.d.ts

@@ -482,9 +482,7 @@ declare class Viewport {
     private readonly onHtmlElementMount?;
     private readonly dropHandler?;
     private readonly gridController;
-    private readonly doubleTapDetector;
-    private tapDownX;
-    private tapDownY;
+    private readonly interactions;
     private contextMenu;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
@@ -562,17 +560,7 @@ declare class Viewport {
     getRenderStats(): RenderStatsSnapshot;
     logPerformance(intervalMs?: number): () => void;
     destroy(): void;
-    private startEditingElement;
-    private fitNoteHeight;
-    private onTextEditStop;
-    private onTapDown;
-    private onDoubleTap;
-    private findArrowAt;
-    private startArrowLabelEdit;
-    private hitTestWorld;
     stopInteracting(): void;
-    private onDragOver;
-    private onDrop;
     private unbindArrowsFrom;
     private applyCameraTransform;
     private syncCanvasSize;
@@ -1005,6 +993,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.38.2";
+declare const VERSION = "0.38.4";
 
 export { type ActiveFormats, type AlignEdge, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.js

@@ -2176,7 +2176,12 @@ var ElementStore = class {
     if (!existing) return;
     this.sortedCache = null;
     this._versions.set(id, (this._versions.get(id) ?? 0) + 1);
-    const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
+    const updated = {
+      ...existing,
+      ...partial,
+      id: existing.id,
+      type: existing.type
+    };
     if (updated.type === "stroke" && existing.type === "stroke") {
       transferStrokeRenderData(existing, updated);
       transferStrokeBounds(existing, updated);
@@ -5978,9 +5983,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 {
@@ -6015,7 +6169,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(),
@@ -6042,8 +6196,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;
       },
@@ -6079,7 +6233,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)
     });
@@ -6151,10 +6305,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();
@@ -6190,9 +6360,7 @@ var Viewport = class {
   onHtmlElementMount;
   dropHandler;
   gridController;
-  doubleTapDetector = new DoubleTapDetector();
-  tapDownX = 0;
-  tapDownY = 0;
+  interactions;
   contextMenu = null;
   get ctx() {
     return this.canvasEl.getContext("2d");
@@ -6453,10 +6621,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();
@@ -6465,148 +6633,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);
@@ -8963,7 +8992,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.38.2";
+var VERSION = "0.38.4";
 export {
   ArrowTool,
   AutoSave,