@fieldnotes/core 0.39.0 → 0.40.1

package/dist/index.cjs

@@ -29,6 +29,7 @@ __export(index_exports, {
   HandTool: () => HandTool,
   HistoryStack: () => HistoryStack,
   ImageTool: () => ImageTool,
+  LaserTool: () => LaserTool,
   LayerManager: () => LayerManager,
   MeasureTool: () => MeasureTool,
   NoteTool: () => NoteTool,
@@ -913,6 +914,11 @@ var KeyboardActions = class {
     if (tool?.name !== "select") return null;
     return { tool, ctx };
   }
+  selectableElements(ctx) {
+    return ctx.store.getAll().filter(
+      (el) => !el.locked && (ctx.isLayerVisible?.(el.layerId) ?? true) && !(ctx.isLayerLocked?.(el.layerId) ?? false)
+    );
+  }
   nudge(dx, dy, byCell) {
     if (this.deps.isToolActive()) return false;
     const sel = this.selectTool();
@@ -1055,12 +1061,28 @@ var KeyboardActions = class {
     }
     const sel = this.selectTool();
     if (!sel) return;
-    const ids = sel.ctx.store.getAll().filter(
-      (el) => !el.locked && (sel.ctx.isLayerVisible?.(el.layerId) ?? true) && !(sel.ctx.isLayerLocked?.(el.layerId) ?? false)
-    ).map((el) => el.id);
+    const ids = this.selectableElements(sel.ctx).map((el) => el.id);
     sel.tool.setSelection(ids);
     sel.ctx.requestRender();
   }
+  cycleSelection(direction) {
+    if (this.deps.isToolActive()) return;
+    const tm = this.deps.getToolManager();
+    const ctx = this.deps.getToolContext();
+    if (!tm || !ctx) return;
+    if (tm.activeTool?.name !== "select") ctx.switchTool?.("select");
+    const sel = this.selectTool();
+    if (!sel) return;
+    const eligible = this.selectableElements(sel.ctx).filter((el) => el.type !== "grid");
+    if (eligible.length === 0) return;
+    const idxs = sel.tool.selectedIds.map((id) => eligible.findIndex((e) => e.id === id)).filter((i) => i >= 0);
+    const anchor = idxs.length === 0 ? direction > 0 ? -1 : 0 : direction > 0 ? Math.max(...idxs) : Math.min(...idxs);
+    const next = (anchor + direction + eligible.length) % eligible.length;
+    const target = eligible[next];
+    if (!target) return;
+    sel.tool.setSelection([target.id]);
+    sel.ctx.requestRender();
+  }
   zoomToFit() {
     if (this.deps.isToolActive()) return;
     this.deps.fitToContent?.();
@@ -1165,6 +1187,8 @@ var DEFAULT_BINDINGS = [
   ["undo", ["mod+z"]],
   ["redo", ["mod+y", "mod+shift+z"]],
   ["select-all", ["mod+a"]],
+  ["cycle-selection", ["tab"]],
+  ["cycle-selection-reverse", ["shift+tab"]],
   ["copy", ["mod+c"]],
   ["duplicate", ["mod+d"]],
   ["z-forward", ["]"]],
@@ -1435,6 +1459,14 @@ var KeyboardHandler = class {
         e?.preventDefault();
         this.deps.actions.selectAll();
         return;
+      case "cycle-selection":
+        e?.preventDefault();
+        this.deps.actions.cycleSelection(1);
+        return;
+      case "cycle-selection-reverse":
+        e?.preventDefault();
+        this.deps.actions.cycleSelection(-1);
+        return;
       case "copy":
         e?.preventDefault();
         this.deps.actions.copy();
@@ -4733,6 +4765,16 @@ function renderStyledRuns(ctx, runs, startX, startY, maxWidth) {
   }
 }
 
+// src/canvas/text-canvas-renderer.ts
+function renderTextOnCanvas(ctx, text) {
+  const pad = 2;
+  ctx.save();
+  ctx.fillStyle = text.color;
+  const runs = parseStyledRuns(text.text ?? "", text.fontSize);
+  renderStyledRuns(ctx, runs, text.position.x + pad, text.position.y + pad, text.size.w - pad * 2);
+  ctx.restore();
+}
+
 // src/canvas/export-image.ts
 var center = (b) => ({ x: b.x + b.w / 2, y: b.y + b.h / 2 });
 function getStrokeBounds(el) {
@@ -4815,30 +4857,6 @@ function computeBounds(elements, padding) {
     h: maxY - minY + padding * 2
   };
 }
-function renderTextOnCanvas(ctx, text) {
-  if (!text.text) return;
-  ctx.save();
-  ctx.fillStyle = text.color;
-  ctx.font = `${text.fontSize}px system-ui, sans-serif`;
-  ctx.textBaseline = "top";
-  ctx.textAlign = text.textAlign;
-  const pad = 2;
-  let textX = text.position.x + pad;
-  if (text.textAlign === "center") {
-    textX = text.position.x + text.size.w / 2;
-  } else if (text.textAlign === "right") {
-    textX = text.position.x + text.size.w - pad;
-  }
-  const lineHeight = text.fontSize * 1.4;
-  const lines = text.text.split("\n");
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line !== void 0) {
-      ctx.fillText(line, textX, text.position.y + pad + i * lineHeight);
-    }
-  }
-  ctx.restore();
-}
 function renderGridForBounds(ctx, grid, bounds) {
   const visibleBounds = {
     minX: bounds.x,
@@ -5060,28 +5078,27 @@ function emitImage(image, dataUri) {
   const { w, h } = image.size;
   return `<image href="${esc(href)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
 }
-function emitText(text) {
+function emitText(text, rasterScale) {
   if (!text.text) return "";
-  const pad = 2;
-  let anchor = "start";
-  let textX = text.position.x + pad;
-  if (text.textAlign === "center") {
-    anchor = "middle";
-    textX = text.position.x + text.size.w / 2;
-  } else if (text.textAlign === "right") {
-    anchor = "end";
-    textX = text.position.x + text.size.w - pad;
-  }
-  const lineHeight = text.fontSize * 1.4;
-  const lines = text.text.split("\n");
-  let out = "";
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line === void 0) continue;
-    const y = text.position.y + pad + i * lineHeight;
-    out += `<text x="${n(textX)}" y="${n(y)}" font-family="system-ui, sans-serif" font-size="${n(text.fontSize)}" fill="${esc(text.color)}" text-anchor="${anchor}" dominant-baseline="text-before-edge">${esc(line)}</text>`;
+  const { x, y } = text.position;
+  const { w, h } = text.size;
+  if (typeof document === "undefined") return "";
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.ceil(w * rasterScale));
+  canvas.height = Math.max(1, Math.ceil(h * rasterScale));
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+  ctx.scale(rasterScale, rasterScale);
+  ctx.translate(-x, -y);
+  renderTextOnCanvas(ctx, text);
+  let dataUri;
+  try {
+    dataUri = canvas.toDataURL();
+  } catch {
+    return "";
   }
-  return out;
+  if (!dataUri || !dataUri.startsWith("data:")) return "";
+  return `<image href="${esc(dataUri)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
 }
 function emitNote(note, rasterScale) {
   const { x, y } = note.position;
@@ -5264,7 +5281,7 @@ function emitElement(el, imageDataUris, rasterScale, firstGrid, store) {
     case "image":
       return withRotationSvg(el, emitImage(el, imageDataUris.get(el.id)));
     case "text":
-      return withRotationSvg(el, emitText(el));
+      return withRotationSvg(el, emitText(el, rasterScale));
     case "note":
       return withRotationSvg(el, emitNote(el, rasterScale));
     case "template":
@@ -5727,10 +5744,9 @@ var DomNodeManager = class {
           cursor: "default",
           userSelect: "none",
           wordWrap: "break-word",
-          whiteSpace: "pre-wrap",
           lineHeight: "1.4"
         });
-        node.textContent = element.text || "";
+        node.innerHTML = element.text || "";
         const detector = new DoubleTapDetector();
         node.addEventListener("pointerup", (e) => {
           if (detector.feed(e)) {
@@ -5741,8 +5757,9 @@ var DomNodeManager = class {
         });
       }
       if (!this.isEditingElement(element.id)) {
-        if (node.textContent !== element.text) {
-          node.textContent = element.text || "";
+        const text = element.text || "";
+        if (node.innerHTML !== text) {
+          node.innerHTML = text;
         }
         Object.assign(node.style, {
           fontSize: `${element.fontSize}px`,
@@ -7773,6 +7790,17 @@ function renderArrowHandles(canvasCtx, arrow, zoom) {
     canvasCtx.stroke();
   }
 }
+function renderArrowHoverHandle(canvasCtx, arrow, zoom) {
+  const mid = getArrowMidpoint(arrow.from, arrow.to, arrow.bend);
+  const radius = HANDLE_RADIUS / zoom;
+  canvasCtx.fillStyle = "#2196F3";
+  canvasCtx.strokeStyle = "#2196F3";
+  canvasCtx.lineWidth = 1.5 / zoom;
+  canvasCtx.beginPath();
+  canvasCtx.arc(mid.x, mid.y, radius, 0, Math.PI * 2);
+  canvasCtx.fill();
+  canvasCtx.stroke();
+}
 
 // src/elements/snap-guides.ts
 function xAnchors(b) {
@@ -8621,7 +8649,13 @@ var SelectTool = class {
     if (this.hoveredId && this.ctx && this.mode.type === "idle") {
       if (!this._selectedIds.includes(this.hoveredId)) {
         const el = this.ctx.store.getById(this.hoveredId);
-        if (el) {
+        if (el?.type === "arrow") {
+          canvasCtx.save();
+          canvasCtx.globalAlpha = 0.35;
+          canvasCtx.setLineDash([]);
+          renderArrowHoverHandle(canvasCtx, el, this.ctx.camera.zoom);
+          canvasCtx.restore();
+        } else if (el) {
           const b = getElementBounds(el);
           if (b) {
             canvasCtx.save();
@@ -9592,8 +9626,118 @@ var TemplateTool = class {
   }
 };
 
+// src/tools/laser-tool.ts
+var DEFAULT_COLOR = "#ff3b30";
+var DEFAULT_WIDTH = 4;
+var DEFAULT_FADE_MS = 1200;
+var LaserTool = class {
+  name;
+  color;
+  width;
+  fadeMs;
+  trail = [];
+  rafId = null;
+  drawing = false;
+  optionListeners = /* @__PURE__ */ new Set();
+  constructor(options = {}) {
+    this.name = options.name ?? "laser";
+    this.color = options.color ?? DEFAULT_COLOR;
+    this.width = options.width ?? DEFAULT_WIDTH;
+    this.fadeMs = options.fadeMs ?? DEFAULT_FADE_MS;
+  }
+  now() {
+    return performance.now();
+  }
+  onActivate(ctx) {
+    ctx.setCursor?.("crosshair");
+  }
+  onDeactivate(ctx) {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.trail = [];
+    this.drawing = false;
+    ctx.setCursor?.("default");
+    ctx.requestRender();
+  }
+  getOptions() {
+    return {
+      name: this.name,
+      color: this.color,
+      width: this.width,
+      fadeMs: this.fadeMs
+    };
+  }
+  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.fadeMs !== void 0) this.fadeMs = options.fadeMs;
+    this.notifyOptionsChange();
+  }
+  onPointerDown(state, ctx) {
+    this.drawing = true;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.trail.push({ x: world.x, y: world.y, t: this.now() });
+    this.ensureAnimating(ctx);
+  }
+  onPointerMove(state, ctx) {
+    if (!this.drawing) return;
+    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.trail.push({ x: world.x, y: world.y, t: this.now() });
+    this.ensureAnimating(ctx);
+  }
+  onPointerUp(_state, _ctx) {
+    this.drawing = false;
+  }
+  renderOverlay(ctx) {
+    if (this.trail.length < 2) return;
+    ctx.save();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = this.width;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    const now = this.now();
+    for (let i = 0; i < this.trail.length - 1; i++) {
+      const a = this.trail[i];
+      const b = this.trail[i + 1];
+      if (!a || !b) continue;
+      const age = now - b.t;
+      ctx.globalAlpha = Math.max(0, 1 - age / this.fadeMs);
+      ctx.beginPath();
+      ctx.moveTo(a.x, a.y);
+      ctx.lineTo(b.x, b.y);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+  ensureAnimating(ctx) {
+    if (this.rafId === null) {
+      this.rafId = requestAnimationFrame(() => this.tick(ctx));
+    }
+  }
+  tick(ctx) {
+    const cutoff = this.now() - this.fadeMs;
+    this.trail = this.trail.filter((p) => p.t >= cutoff);
+    if (this.trail.length > 0) {
+      ctx.requestRender();
+      this.rafId = requestAnimationFrame(() => this.tick(ctx));
+    } else {
+      ctx.requestRender();
+      this.rafId = null;
+    }
+  }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
+  }
+};
+
 // src/index.ts
-var VERSION = "0.39.0";
+var VERSION = "0.40.1";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,
@@ -9605,6 +9749,7 @@ var VERSION = "0.39.0";
   HandTool,
   HistoryStack,
   ImageTool,
+  LaserTool,
   LayerManager,
   MeasureTool,
   NoteTool,