@fieldnotes/core 0.6.1 → 0.7.1

package/dist/index.cjs

@@ -52,6 +52,7 @@ __export(index_exports, {
   Viewport: () => Viewport,
   clearStaleBindings: () => clearStaleBindings,
   createArrow: () => createArrow,
+  createGrid: () => createGrid,
   createHtmlElement: () => createHtmlElement,
   createId: () => createId,
   createImage: () => createImage,
@@ -165,7 +166,7 @@ function validateState(data) {
     ];
   }
 }
-var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text", "shape"]);
+var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text", "shape", "grid"]);
 function validateElement(el) {
   if (!el || typeof el !== "object") {
     throw new Error("Invalid element: expected an object");
@@ -1026,6 +1027,118 @@ function smoothToSegments(points) {
   return segments;
 }
 
+// src/elements/grid-renderer.ts
+function getSquareGridLines(bounds, cellSize) {
+  if (cellSize <= 0) return { verticals: [], horizontals: [] };
+  const verticals = [];
+  const startX = Math.floor(bounds.minX / cellSize) * cellSize;
+  const endX = Math.ceil(bounds.maxX / cellSize) * cellSize;
+  for (let x = startX; x <= endX; x += cellSize) {
+    verticals.push(x);
+  }
+  const horizontals = [];
+  const startY = Math.floor(bounds.minY / cellSize) * cellSize;
+  const endY = Math.ceil(bounds.maxY / cellSize) * cellSize;
+  for (let y = startY; y <= endY; y += cellSize) {
+    horizontals.push(y);
+  }
+  return { verticals, horizontals };
+}
+function getHexVertices(cx, cy, circumradius, orientation) {
+  const vertices = [];
+  const angleOffset = orientation === "pointy" ? -Math.PI / 2 : 0;
+  for (let i = 0; i < 6; i++) {
+    const angle = Math.PI / 3 * i + angleOffset;
+    vertices.push({
+      x: cx + circumradius * Math.cos(angle),
+      y: cy + circumradius * Math.sin(angle)
+    });
+  }
+  return vertices;
+}
+function getHexCenters(bounds, circumradius, orientation) {
+  if (circumradius <= 0) return [];
+  const centers = [];
+  if (orientation === "pointy") {
+    const hexW = Math.sqrt(3) * circumradius;
+    const hexH = 2 * circumradius;
+    const rowH = hexH * 0.75;
+    const startRow = Math.floor((bounds.minY - circumradius) / rowH);
+    const endRow = Math.ceil((bounds.maxY + circumradius) / rowH);
+    const startCol = Math.floor((bounds.minX - hexW) / hexW);
+    const endCol = Math.ceil((bounds.maxX + hexW) / hexW);
+    for (let row = startRow; row <= endRow; row++) {
+      const offsetX = row % 2 !== 0 ? hexW / 2 : 0;
+      for (let col = startCol; col <= endCol; col++) {
+        centers.push({
+          x: col * hexW + offsetX,
+          y: row * rowH
+        });
+      }
+    }
+  } else {
+    const hexW = 2 * circumradius;
+    const hexH = Math.sqrt(3) * circumradius;
+    const colW = hexW * 0.75;
+    const startCol = Math.floor((bounds.minX - circumradius) / colW);
+    const endCol = Math.ceil((bounds.maxX + circumradius) / colW);
+    const startRow = Math.floor((bounds.minY - hexH) / hexH);
+    const endRow = Math.ceil((bounds.maxY + hexH) / hexH);
+    for (let col = startCol; col <= endCol; col++) {
+      const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
+      for (let row = startRow; row <= endRow; row++) {
+        centers.push({
+          x: col * colW,
+          y: row * hexH + offsetY
+        });
+      }
+    }
+  }
+  return centers;
+}
+function renderSquareGrid(ctx, bounds, cellSize, strokeColor, strokeWidth, opacity) {
+  if (cellSize <= 0) return;
+  const { verticals, horizontals } = getSquareGridLines(bounds, cellSize);
+  ctx.save();
+  ctx.strokeStyle = strokeColor;
+  ctx.lineWidth = strokeWidth;
+  ctx.globalAlpha = opacity;
+  ctx.beginPath();
+  for (const x of verticals) {
+    ctx.moveTo(x, bounds.minY);
+    ctx.lineTo(x, bounds.maxY);
+  }
+  for (const y of horizontals) {
+    ctx.moveTo(bounds.minX, y);
+    ctx.lineTo(bounds.maxX, y);
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+function renderHexGrid(ctx, bounds, cellSize, orientation, strokeColor, strokeWidth, opacity) {
+  if (cellSize <= 0) return;
+  const centers = getHexCenters(bounds, cellSize, orientation);
+  ctx.save();
+  ctx.strokeStyle = strokeColor;
+  ctx.lineWidth = strokeWidth;
+  ctx.globalAlpha = opacity;
+  ctx.beginPath();
+  for (const center of centers) {
+    const verts = getHexVertices(center.x, center.y, cellSize, orientation);
+    const first = verts[0];
+    if (!first) continue;
+    ctx.moveTo(first.x, first.y);
+    for (let i = 1; i < verts.length; i++) {
+      const v = verts[i];
+      if (!v) continue;
+      ctx.lineTo(v.x, v.y);
+    }
+    ctx.closePath();
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+
 // src/elements/element-renderer.ts
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
 var ARROWHEAD_LENGTH = 12;
@@ -1034,12 +1147,20 @@ var ElementRenderer = class {
   store = null;
   imageCache = /* @__PURE__ */ new Map();
   onImageLoad = null;
+  camera = null;
+  canvasSize = null;
   setStore(store) {
     this.store = store;
   }
   setOnImageLoad(callback) {
     this.onImageLoad = callback;
   }
+  setCamera(camera) {
+    this.camera = camera;
+  }
+  setCanvasSize(w, h) {
+    this.canvasSize = { w, h };
+  }
   isDomElement(element) {
     return DOM_ELEMENT_TYPES.has(element.type);
   }
@@ -1057,6 +1178,9 @@ var ElementRenderer = class {
       case "image":
         this.renderImage(ctx, element);
         break;
+      case "grid":
+        this.renderGrid(ctx, element);
+        break;
     }
   }
   renderStroke(ctx, stroke) {
@@ -1192,6 +1316,42 @@ var ElementRenderer = class {
       }
     }
   }
+  renderGrid(ctx, grid) {
+    if (!this.canvasSize) return;
+    const cam = this.camera;
+    if (!cam) return;
+    const topLeft = cam.screenToWorld({ x: 0, y: 0 });
+    const bottomRight = cam.screenToWorld({
+      x: this.canvasSize.w,
+      y: this.canvasSize.h
+    });
+    const bounds = {
+      minX: topLeft.x,
+      minY: topLeft.y,
+      maxX: bottomRight.x,
+      maxY: bottomRight.y
+    };
+    if (grid.gridType === "hex") {
+      renderHexGrid(
+        ctx,
+        bounds,
+        grid.cellSize,
+        grid.hexOrientation,
+        grid.strokeColor,
+        grid.strokeWidth,
+        grid.opacity
+      );
+    } else {
+      renderSquareGrid(
+        ctx,
+        bounds,
+        grid.cellSize,
+        grid.strokeColor,
+        grid.strokeWidth,
+        grid.opacity
+      );
+    }
+  }
   renderImage(ctx, image) {
     const img = this.getImage(image.src);
     if (!img) return;
@@ -1609,7 +1769,7 @@ function createImage(input) {
   };
 }
 function createHtmlElement(input) {
-  return {
+  const el = {
     id: createId("html"),
     type: "html",
     position: input.position,
@@ -1618,6 +1778,8 @@ function createHtmlElement(input) {
     layerId: input.layerId ?? "",
     size: input.size
   };
+  if (input.domId) el.domId = input.domId;
+  return el;
 }
 function createShape(input) {
   return {
@@ -1634,6 +1796,22 @@ function createShape(input) {
     fillColor: input.fillColor ?? "none"
   };
 }
+function createGrid(input) {
+  return {
+    id: createId("grid"),
+    type: "grid",
+    position: input.position ?? { x: 0, y: 0 },
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    gridType: input.gridType ?? "square",
+    hexOrientation: input.hexOrientation ?? "pointy",
+    cellSize: input.cellSize ?? 40,
+    strokeColor: input.strokeColor ?? "#000000",
+    strokeWidth: input.strokeWidth ?? 1,
+    opacity: input.opacity ?? 1
+  };
+}
 function createText(input) {
   return {
     id: createId("text"),
@@ -1811,6 +1989,7 @@ var Viewport = class {
     this.toolManager = new ToolManager();
     this.renderer = new ElementRenderer();
     this.renderer.setStore(this.store);
+    this.renderer.setCamera(this.camera);
     this.renderer.setOnImageLoad(() => this.requestRender());
     this.noteEditor = new NoteEditor();
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
@@ -1918,6 +2097,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);
@@ -1949,7 +2129,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);
@@ -1957,6 +2138,34 @@ var Viewport = class {
     this.requestRender();
     return el.id;
   }
+  addGrid(input) {
+    const existing = this.store.getElementsByType("grid")[0];
+    this.historyRecorder.begin();
+    if (existing) {
+      this.store.remove(existing.id);
+    }
+    const grid = createGrid({ ...input, layerId: this.layerManager.activeLayerId });
+    this.store.add(grid);
+    this.historyRecorder.commit();
+    this.requestRender();
+    return grid.id;
+  }
+  updateGrid(updates) {
+    const grid = this.store.getElementsByType("grid")[0];
+    if (!grid) return;
+    this.historyRecorder.begin();
+    this.store.update(grid.id, updates);
+    this.historyRecorder.commit();
+    this.requestRender();
+  }
+  removeGrid() {
+    const grid = this.store.getElementsByType("grid")[0];
+    if (!grid) return;
+    this.historyRecorder.begin();
+    this.store.remove(grid.id);
+    this.historyRecorder.commit();
+    this.requestRender();
+  }
   destroy() {
     cancelAnimationFrame(this.animFrameId);
     this.stopInteracting();
@@ -1988,6 +2197,7 @@ var Viewport = class {
     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);
@@ -2289,6 +2499,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, {
@@ -2547,10 +2767,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, {
@@ -2569,7 +2790,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, {
@@ -2598,7 +2819,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);
 }
@@ -2974,6 +3196,7 @@ var SelectTool = class {
     for (const el of ctx.store.getAll()) {
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
+      if (el.type === "grid") continue;
       const bounds = this.getElementBounds(el);
       if (bounds && this.rectsOverlap(marquee, bounds)) {
         ids.push(el.id);
@@ -3010,11 +3233,13 @@ var SelectTool = class {
     for (const el of elements) {
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
+      if (el.type === "grid") continue;
       if (this.isInsideBounds(world, el)) return el;
     }
     return null;
   }
   isInsideBounds(point, el) {
+    if (el.type === "grid") return false;
     if ("size" in el) {
       const s = el.size;
       return point.x >= el.position.x && point.x <= el.position.x + s.w && point.y >= el.position.y && point.y <= el.position.y + s.h;
@@ -3055,8 +3280,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;
@@ -3440,7 +3667,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.6.1";
+var VERSION = "0.7.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -3475,6 +3702,7 @@ var VERSION = "0.6.1";
   Viewport,
   clearStaleBindings,
   createArrow,
+  createGrid,
   createHtmlElement,
   createId,
   createImage,