@fieldnotes/core 0.7.0 → 0.7.1

package/dist/index.d.cts

@@ -67,6 +67,7 @@ interface ImageElement extends BaseElement {
 interface HtmlElement extends BaseElement {
     type: 'html';
     size: Size;
+    domId?: string;
 }
 interface TextElement extends BaseElement {
     type: 'text';
@@ -477,6 +478,7 @@ declare class Viewport {
     private hideDomNode;
     private removeDomNode;
     private clearDomNodes;
+    private reattachHtmlContent;
     private createWrapper;
     private createCanvas;
     private createDomLayer;
@@ -564,6 +566,7 @@ interface ImageInput extends BaseDefaults {
 interface HtmlInput extends BaseDefaults {
     position: Point;
     size: Size;
+    domId?: string;
 }
 interface TextInput extends BaseDefaults {
     position: Point;
@@ -858,6 +861,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.6.1";
+declare const VERSION = "0.7.0";
 
 export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, RemoveLayerCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -67,6 +67,7 @@ interface ImageElement extends BaseElement {
 interface HtmlElement extends BaseElement {
     type: 'html';
     size: Size;
+    domId?: string;
 }
 interface TextElement extends BaseElement {
     type: 'text';
@@ -477,6 +478,7 @@ declare class Viewport {
     private hideDomNode;
     private removeDomNode;
     private clearDomNodes;
+    private reattachHtmlContent;
     private createWrapper;
     private createCanvas;
     private createDomLayer;
@@ -564,6 +566,7 @@ interface ImageInput extends BaseDefaults {
 interface HtmlInput extends BaseDefaults {
     position: Point;
     size: Size;
+    domId?: string;
 }
 interface TextInput extends BaseDefaults {
     position: Point;
@@ -858,6 +861,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.6.1";
+declare const VERSION = "0.7.0";
 
 export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, RemoveLayerCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };

package/dist/index.js

@@ -1687,7 +1687,7 @@ function createImage(input) {
   };
 }
 function createHtmlElement(input) {
-  return {
+  const el = {
     id: createId("html"),
     type: "html",
     position: input.position,
@@ -1696,6 +1696,8 @@ function createHtmlElement(input) {
     layerId: input.layerId ?? "",
     size: input.size
   };
+  if (input.domId) el.domId = input.domId;
+  return el;
 }
 function createShape(input) {
   return {
@@ -2013,6 +2015,7 @@ var Viewport = class {
     if (state.layers && state.layers.length > 0) {
       this.layerManager.loadSnapshot(state.layers);
     }
+    this.reattachHtmlContent();
     this.history.clear();
     this.historyRecorder.resume();
     this.camera.moveTo(state.camera.position.x, state.camera.position.y);
@@ -2044,7 +2047,8 @@ var Viewport = class {
     return image.id;
   }
   addHtmlElement(dom, position, size = { w: 200, h: 150 }) {
-    const el = createHtmlElement({ position, size, layerId: this.layerManager.activeLayerId });
+    const domId = dom.id || void 0;
+    const el = createHtmlElement({ position, size, domId, layerId: this.layerManager.activeLayerId });
     this.htmlContent.set(el.id, dom);
     this.historyRecorder.begin();
     this.store.add(el);
@@ -2413,6 +2417,16 @@ var Viewport = class {
     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, {
@@ -2671,10 +2685,11 @@ function applyArrowHandleDrag(handle, elementId, world, ctx) {
   const el = ctx.store.getById(elementId);
   if (!el || el.type !== "arrow") return;
   const threshold = BIND_THRESHOLD / ctx.camera.zoom;
+  const layerFilter = (candidate) => candidate.layerId === el.layerId;
   switch (handle) {
     case "start": {
       const excludeId = el.toBinding?.elementId;
-      const target = findBindTarget(world, ctx.store, threshold, excludeId);
+      const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
       if (target) {
         const center = getElementCenter(target);
         ctx.store.update(elementId, {
@@ -2693,7 +2708,7 @@ function applyArrowHandleDrag(handle, elementId, world, ctx) {
     }
     case "end": {
       const excludeId = el.fromBinding?.elementId;
-      const target = findBindTarget(world, ctx.store, threshold, excludeId);
+      const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
       if (target) {
         const center = getElementCenter(target);
         ctx.store.update(elementId, {
@@ -2722,7 +2737,8 @@ function getArrowHandleDragTarget(handle, elementId, world, ctx) {
   if (!el || el.type !== "arrow") return null;
   const threshold = BIND_THRESHOLD / ctx.camera.zoom;
   const excludeId = handle === "start" ? el.toBinding?.elementId : el.fromBinding?.elementId;
-  const target = findBindTarget(world, ctx.store, threshold, excludeId);
+  const layerFilter = (candidate) => candidate.layerId === el.layerId;
+  const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
   if (!target) return null;
   return getElementBounds(target);
 }
@@ -3182,8 +3198,10 @@ var ArrowTool = class {
     if (options.width !== void 0) this.width = options.width;
   }
   layerFilter(ctx) {
-    if (!ctx.isLayerVisible && !ctx.isLayerLocked) return void 0;
+    const activeLayerId = ctx.activeLayerId;
+    if (!activeLayerId && !ctx.isLayerVisible && !ctx.isLayerLocked) return void 0;
     return (el) => {
+      if (activeLayerId && el.layerId !== activeLayerId) return false;
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) return false;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) return false;
       return true;
@@ -3567,7 +3585,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.6.1";
+var VERSION = "0.7.0";
 export {
   AddElementCommand,
   ArrowTool,