@fieldnotes/core 0.2.0 → 0.2.2

package/dist/index.cjs

@@ -152,6 +152,13 @@ function migrateElement(obj) {
   if (obj["type"] === "arrow" && typeof obj["bend"] !== "number") {
     obj["bend"] = 0;
   }
+  if (obj["type"] === "stroke" && Array.isArray(obj["points"])) {
+    for (const pt of obj["points"]) {
+      if (typeof pt["pressure"] !== "number") {
+        pt["pressure"] = 0.5;
+      }
+    }
+  }
 }
 
 // src/core/auto-save.ts
@@ -407,24 +414,8 @@ var InputHandler = class {
       y: e.clientY - rect.top
     });
   };
-  isInteractiveHtmlContent(e) {
-    const target = e.target;
-    if (!target) return false;
-    const node = target.closest("[data-element-id]");
-    if (!node) return false;
-    const elementId = node.dataset["elementId"];
-    if (!elementId) return false;
-    const store = this.toolContext?.store;
-    if (!store) return false;
-    const element = store.getById(elementId);
-    if (!element || element.type !== "html") return false;
-    return true;
-  }
   onPointerDown = (e) => {
     this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-    if (this.isInteractiveHtmlContent(e)) {
-      return;
-    }
     this.element.setPointerCapture?.(e.pointerId);
     if (this.activePointers.size === 2) {
       this.startPinch();
@@ -750,6 +741,79 @@ function isNearLine(point, a, b, threshold) {
   return Math.hypot(point.x - projX, point.y - projY) <= threshold;
 }
 
+// src/elements/stroke-smoothing.ts
+var MIN_PRESSURE_SCALE = 0.2;
+function pressureToWidth(pressure, baseWidth) {
+  return baseWidth * (MIN_PRESSURE_SCALE + (1 - MIN_PRESSURE_SCALE) * pressure);
+}
+function simplifyPoints(points, tolerance) {
+  if (points.length <= 2) return points.slice();
+  return rdp(points, 0, points.length - 1, tolerance);
+}
+function rdp(points, start, end, tolerance) {
+  const first = points[start];
+  const last = points[end];
+  if (!first || !last) return [];
+  if (end - start <= 1) return [first, last];
+  let maxDist = 0;
+  let maxIndex = start;
+  for (let i = start + 1; i < end; i++) {
+    const pt = points[i];
+    if (!pt) continue;
+    const dist = perpendicularDistance(pt, first, last);
+    if (dist > maxDist) {
+      maxDist = dist;
+      maxIndex = i;
+    }
+  }
+  if (maxDist <= tolerance) return [first, last];
+  const left = rdp(points, start, maxIndex, tolerance);
+  const right = rdp(points, maxIndex, end, tolerance);
+  return left.concat(right.slice(1));
+}
+function perpendicularDistance(pt, lineStart, lineEnd) {
+  const dx = lineEnd.x - lineStart.x;
+  const dy = lineEnd.y - lineStart.y;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq === 0) {
+    const ex = pt.x - lineStart.x;
+    const ey = pt.y - lineStart.y;
+    return Math.sqrt(ex * ex + ey * ey);
+  }
+  const num = Math.abs(dy * pt.x - dx * pt.y + lineEnd.x * lineStart.y - lineEnd.y * lineStart.x);
+  return num / Math.sqrt(lenSq);
+}
+function smoothToSegments(points) {
+  if (points.length < 2) return [];
+  if (points.length === 2) {
+    const p0 = points[0];
+    const p1 = points[1];
+    if (!p0 || !p1) return [];
+    const mx = (p0.x + p1.x) / 2;
+    const my = (p0.y + p1.y) / 2;
+    return [{ start: p0, cp1: { x: mx, y: my }, cp2: { x: mx, y: my }, end: p1 }];
+  }
+  const segments = [];
+  const n = points.length;
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = points[Math.max(0, i - 1)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(n - 1, i + 2)];
+    if (!p0 || !p1 || !p2 || !p3) continue;
+    const cp1 = {
+      x: p1.x + (p2.x - p0.x) / 6,
+      y: p1.y + (p2.y - p0.y) / 6
+    };
+    const cp2 = {
+      x: p2.x - (p3.x - p1.x) / 6,
+      y: p2.y - (p3.y - p1.y) / 6
+    };
+    segments.push({ start: p1, cp1, cp2, end: p2 });
+  }
+  return segments;
+}
+
 // src/elements/element-renderer.ts
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "image", "html"]);
 var ARROWHEAD_LENGTH = 12;
@@ -773,22 +837,18 @@ var ElementRenderer = class {
     ctx.save();
     ctx.translate(stroke.position.x, stroke.position.y);
     ctx.strokeStyle = stroke.color;
-    ctx.lineWidth = stroke.width;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
     ctx.globalAlpha = stroke.opacity;
-    ctx.beginPath();
-    const first = stroke.points[0];
-    if (first) {
-      ctx.moveTo(first.x, first.y);
-    }
-    for (let i = 1; i < stroke.points.length; i++) {
-      const pt = stroke.points[i];
-      if (pt) {
-        ctx.lineTo(pt.x, pt.y);
-      }
+    const segments = smoothToSegments(stroke.points);
+    for (const seg of segments) {
+      const w = (pressureToWidth(seg.start.pressure, stroke.width) + pressureToWidth(seg.end.pressure, stroke.width)) / 2;
+      ctx.lineWidth = w;
+      ctx.beginPath();
+      ctx.moveTo(seg.start.x, seg.start.y);
+      ctx.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.end.x, seg.end.y);
+      ctx.stroke();
     }
-    ctx.stroke();
     ctx.restore();
   }
   renderArrow(ctx, arrow) {
@@ -931,6 +991,9 @@ var ToolManager = class {
   register(tool) {
     this.tools.set(tool.name, tool);
   }
+  getTool(name) {
+    return this.tools.get(name);
+  }
   setTool(name, ctx) {
     const tool = this.tools.get(name);
     if (!tool) return;
@@ -1290,6 +1353,7 @@ var Viewport = class {
   needsRender = true;
   domNodes = /* @__PURE__ */ new Map();
   htmlContent = /* @__PURE__ */ new Map();
+  interactingElementId = null;
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -1335,6 +1399,7 @@ var Viewport = class {
     this.store.add(image);
     this.historyRecorder.commit();
     this.requestRender();
+    return image.id;
   }
   addHtmlElement(dom, position, size = { w: 200, h: 150 }) {
     const el = createHtmlElement({ position, size });
@@ -1347,6 +1412,7 @@ var Viewport = class {
   }
   destroy() {
     cancelAnimationFrame(this.animFrameId);
+    this.stopInteracting();
     this.noteEditor.destroy(this.store);
     this.historyRecorder.destroy();
     this.wrapper.removeEventListener("dblclick", this.onDblClick);
@@ -1404,11 +1470,74 @@ var Viewport = class {
   }
   onDblClick = (e) => {
     const el = document.elementFromPoint(e.clientX, e.clientY);
-    if (!el) return;
-    const nodeEl = el.closest("[data-element-id]");
-    if (!nodeEl) return;
-    const elementId = nodeEl.dataset["elementId"];
-    if (elementId) this.startEditingNote(elementId);
+    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") {
+          this.startEditingNote(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.startInteracting(hit.id);
+    }
+  };
+  hitTestWorld(world) {
+    const elements = this.store.getAll().reverse();
+    for (const el of elements) {
+      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;
+  }
+  startInteracting(id) {
+    this.stopInteracting();
+    const node = this.domNodes.get(id);
+    if (!node) return;
+    this.interactingElementId = id;
+    node.style.pointerEvents = "auto";
+    node.addEventListener("pointerdown", this.onInteractNodePointerDown);
+    window.addEventListener("keydown", this.onInteractKeyDown);
+    window.addEventListener("pointerdown", this.onInteractPointerDown);
+  }
+  stopInteracting() {
+    if (!this.interactingElementId) return;
+    const node = this.domNodes.get(this.interactingElementId);
+    if (node) {
+      node.style.pointerEvents = "none";
+      node.removeEventListener("pointerdown", this.onInteractNodePointerDown);
+    }
+    this.interactingElementId = null;
+    window.removeEventListener("keydown", this.onInteractKeyDown);
+    window.removeEventListener("pointerdown", this.onInteractPointerDown);
+  }
+  onInteractNodePointerDown = (e) => {
+    e.stopPropagation();
+  };
+  onInteractKeyDown = (e) => {
+    if (e.key === "Escape") {
+      this.stopInteracting();
+    }
+  };
+  onInteractPointerDown = (e) => {
+    if (!this.interactingElementId) return;
+    const target = e.target;
+    if (!target) return;
+    const node = this.domNodes.get(this.interactingElementId);
+    if (node && !node.contains(target)) {
+      this.stopInteracting();
+    }
   };
   onDragOver = (e) => {
     e.preventDefault();
@@ -1506,7 +1635,8 @@ var Viewport = class {
       if (content) {
         node.dataset["initialized"] = "true";
         Object.assign(node.style, {
-          overflow: "hidden"
+          overflow: "hidden",
+          pointerEvents: "none"
         });
         node.appendChild(content);
       }
@@ -1609,15 +1739,19 @@ var HandTool = class {
 
 // src/tools/pencil-tool.ts
 var MIN_POINTS_FOR_STROKE = 2;
+var DEFAULT_SMOOTHING = 1.5;
+var DEFAULT_PRESSURE = 0.5;
 var PencilTool = class {
   name = "pencil";
   drawing = false;
   points = [];
   color;
   width;
+  smoothing;
   constructor(options = {}) {
     this.color = options.color ?? "#000000";
     this.width = options.width ?? 2;
+    this.smoothing = options.smoothing ?? DEFAULT_SMOOTHING;
   }
   onActivate(ctx) {
     ctx.setCursor?.("crosshair");
@@ -1628,16 +1762,19 @@ var PencilTool = class {
   setOptions(options) {
     if (options.color !== void 0) this.color = options.color;
     if (options.width !== void 0) this.width = options.width;
+    if (options.smoothing !== void 0) this.smoothing = options.smoothing;
   }
   onPointerDown(state, ctx) {
     this.drawing = true;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    this.points = [world];
+    const pressure = state.pressure === 0 ? DEFAULT_PRESSURE : state.pressure;
+    this.points = [{ x: world.x, y: world.y, pressure }];
   }
   onPointerMove(state, ctx) {
     if (!this.drawing) return;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    this.points.push(world);
+    const pressure = state.pressure === 0 ? DEFAULT_PRESSURE : state.pressure;
+    this.points.push({ x: world.x, y: world.y, pressure });
     ctx.requestRender();
   }
   onPointerUp(_state, ctx) {
@@ -1647,8 +1784,9 @@ var PencilTool = class {
       this.points = [];
       return;
     }
+    const simplified = simplifyPoints(this.points, this.smoothing);
     const stroke = createStroke({
-      points: this.points,
+      points: simplified,
       color: this.color,
       width: this.width
     });
@@ -1660,19 +1798,18 @@ var PencilTool = class {
     if (!this.drawing || this.points.length < 2) return;
     ctx.save();
     ctx.strokeStyle = this.color;
-    ctx.lineWidth = this.width;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
     ctx.globalAlpha = 0.8;
-    ctx.beginPath();
-    const first = this.points[0];
-    if (!first) return;
-    ctx.moveTo(first.x, first.y);
-    for (let i = 1; i < this.points.length; i++) {
-      const p = this.points[i];
-      if (p) ctx.lineTo(p.x, p.y);
+    const segments = smoothToSegments(this.points);
+    for (const seg of segments) {
+      const w = (pressureToWidth(seg.start.pressure, this.width) + pressureToWidth(seg.end.pressure, this.width)) / 2;
+      ctx.lineWidth = w;
+      ctx.beginPath();
+      ctx.moveTo(seg.start.x, seg.start.y);
+      ctx.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.end.x, seg.end.y);
+      ctx.stroke();
     }
-    ctx.stroke();
     ctx.restore();
   }
 };
@@ -1960,7 +2097,7 @@ var SelectTool = class {
   handleResize(world, ctx) {
     if (this.mode.type !== "resizing") return;
     const el = ctx.store.getById(this.mode.elementId);
-    if (!el || !("size" in el)) return;
+    if (!el || !("size" in el) || el.locked) return;
     const { handle } = this.mode;
     const dx = world.x - this.lastWorld.x;
     const dy = world.y - this.lastWorld.y;
@@ -2167,6 +2304,10 @@ var ArrowTool = class {
     this.color = options.color ?? "#000000";
     this.width = options.width ?? 2;
   }
+  setOptions(options) {
+    if (options.color !== void 0) this.color = options.color;
+    if (options.width !== void 0) this.width = options.width;
+  }
   onPointerDown(state, ctx) {
     this.drawing = true;
     this.start = ctx.camera.screenToWorld({ x: state.x, y: state.y });
@@ -2231,6 +2372,10 @@ var NoteTool = class {
     this.backgroundColor = options.backgroundColor ?? "#ffeb3b";
     this.size = options.size ?? { w: 200, h: 100 };
   }
+  setOptions(options) {
+    if (options.backgroundColor !== void 0) this.backgroundColor = options.backgroundColor;
+    if (options.size !== void 0) this.size = options.size;
+  }
   onPointerDown(_state, _ctx) {
   }
   onPointerMove(_state, _ctx) {
@@ -2280,7 +2425,7 @@ var ImageTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.1.2";
+var VERSION = "0.2.2";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,