@fieldnotes/core 0.28.0 → 0.30.0

package/dist/index.cjs

@@ -2276,6 +2276,19 @@ function getArrowRenderGeometry(arrow) {
   return geometry;
 }
 
+// src/elements/shape-geometry.ts
+function lineEndpoints(shape) {
+  const { x, y } = shape.position;
+  const { w, h } = shape.size;
+  return shape.flip ? [
+    { x, y: y + h },
+    { x: x + w, y }
+  ] : [
+    { x, y },
+    { x: x + w, y: y + h }
+  ];
+}
+
 // src/elements/arrow-binding.ts
 var BINDABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html", "shape"]);
 function isBindable(element) {
@@ -2800,6 +2813,7 @@ var ElementRenderer = class {
   renderStroke(ctx, stroke) {
     if (stroke.points.length < 2) return;
     ctx.save();
+    if (stroke.blendMode) ctx.globalCompositeOperation = stroke.blendMode;
     ctx.translate(stroke.position.x, stroke.position.y);
     ctx.strokeStyle = stroke.color;
     ctx.lineCap = "round";
@@ -2922,7 +2936,7 @@ var ElementRenderer = class {
   }
   renderShape(ctx, shape) {
     ctx.save();
-    if (shape.fillColor !== "none") {
+    if (shape.fillColor !== "none" && shape.shape !== "line") {
       ctx.fillStyle = shape.fillColor;
       this.fillShapePath(ctx, shape);
     }
@@ -2961,6 +2975,15 @@ var ElementRenderer = class {
         ctx.stroke();
         break;
       }
+      case "line": {
+        const [a, b] = lineEndpoints(shape);
+        ctx.lineCap = "round";
+        ctx.beginPath();
+        ctx.moveTo(a.x, a.y);
+        ctx.lineTo(b.x, b.y);
+        ctx.stroke();
+        break;
+      }
     }
   }
   renderGrid(ctx, grid) {
@@ -3234,7 +3257,7 @@ var ElementRenderer = class {
 // src/elements/element-factory.ts
 var DEFAULT_NOTE_FONT_SIZE = 18;
 function createStroke(input) {
-  return {
+  const result = {
     id: createId("stroke"),
     type: "stroke",
     position: input.position ?? { x: 0, y: 0 },
@@ -3246,6 +3269,8 @@ function createStroke(input) {
     width: input.width ?? 2,
     opacity: input.opacity ?? 1
   };
+  if (input.blendMode) result.blendMode = input.blendMode;
+  return result;
 }
 function createNote(input) {
   return {
@@ -3310,7 +3335,7 @@ function createHtmlElement(input) {
   return el;
 }
 function createShape(input) {
-  return {
+  const result = {
     id: createId("shape"),
     type: "shape",
     position: input.position,
@@ -3323,6 +3348,8 @@ function createShape(input) {
     strokeWidth: input.strokeWidth ?? 2,
     fillColor: input.fillColor ?? "none"
   };
+  if (input.flip) result.flip = input.flip;
+  return result;
 }
 function createGrid(input) {
   return {
@@ -6153,7 +6180,7 @@ var DEFAULT_MIN_POINT_DISTANCE = 3;
 var DEFAULT_PROGRESSIVE_THRESHOLD = 200;
 var PROGRESSIVE_HOT_ZONE = 30;
 var PencilTool = class {
-  name = "pencil";
+  name;
   drawing = false;
   points = [];
   color;
@@ -6162,14 +6189,19 @@ var PencilTool = class {
   minPointDistance;
   progressiveThreshold;
   nextSimplifyAt;
+  opacity;
+  blendMode;
   optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
+    this.name = options.name ?? "pencil";
     this.color = options.color ?? "#000000";
     this.width = options.width ?? 2;
     this.smoothing = options.smoothing ?? DEFAULT_SMOOTHING;
     this.minPointDistance = options.minPointDistance ?? DEFAULT_MIN_POINT_DISTANCE;
     this.progressiveThreshold = options.progressiveSimplifyThreshold ?? DEFAULT_PROGRESSIVE_THRESHOLD;
     this.nextSimplifyAt = this.progressiveThreshold;
+    this.opacity = options.opacity ?? 1;
+    this.blendMode = options.blendMode;
   }
   onActivate(ctx) {
     ctx.setCursor?.("crosshair");
@@ -6183,7 +6215,9 @@ var PencilTool = class {
       width: this.width,
       smoothing: this.smoothing,
       minPointDistance: this.minPointDistance,
-      progressiveSimplifyThreshold: this.progressiveThreshold
+      progressiveSimplifyThreshold: this.progressiveThreshold,
+      opacity: this.opacity,
+      blendMode: this.blendMode
     };
   }
   onOptionsChange(listener) {
@@ -6197,6 +6231,8 @@ var PencilTool = class {
     if (options.minPointDistance !== void 0) this.minPointDistance = options.minPointDistance;
     if (options.progressiveSimplifyThreshold !== void 0)
       this.progressiveThreshold = options.progressiveSimplifyThreshold;
+    if (options.opacity !== void 0) this.opacity = options.opacity;
+    if (options.blendMode !== void 0) this.blendMode = options.blendMode;
     this.notifyOptionsChange();
   }
   onPointerDown(state, ctx) {
@@ -6238,7 +6274,9 @@ var PencilTool = class {
       points: simplified,
       color: this.color,
       width: this.width,
-      layerId: ctx.activeLayerId ?? ""
+      layerId: ctx.activeLayerId ?? "",
+      opacity: this.opacity,
+      blendMode: this.blendMode
     });
     ctx.store.add(stroke);
     computeStrokeSegments(stroke);
@@ -6254,7 +6292,8 @@ var PencilTool = class {
     ctx.strokeStyle = this.color;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
-    ctx.globalAlpha = 0.8;
+    ctx.globalAlpha = this.blendMode ? this.opacity : 0.8;
+    if (this.blendMode) ctx.globalCompositeOperation = this.blendMode;
     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;
@@ -6291,6 +6330,79 @@ function hitTestStroke(stroke, point, radius) {
   return false;
 }
 
+// src/elements/stroke-erase.ts
+function lerp(a, b, t) {
+  return {
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+    pressure: a.pressure + (b.pressure - a.pressure) * t
+  };
+}
+function erasePoints(points, eraser, radius) {
+  const r2 = radius * radius;
+  if (points.length < 2) {
+    const p = points[0];
+    if (p && (p.x - eraser.x) ** 2 + (p.y - eraser.y) ** 2 <= r2) return [];
+    return null;
+  }
+  const runs = [];
+  let current = [];
+  let erased = false;
+  const flush = () => {
+    if (current.length >= 2) runs.push(current);
+    current = [];
+  };
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    if (!a || !b) continue;
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const fx = a.x - eraser.x;
+    const fy = a.y - eraser.y;
+    const A = dx * dx + dy * dy;
+    const B = 2 * (fx * dx + fy * dy);
+    const C = fx * fx + fy * fy - r2;
+    let tLo = 1;
+    let tHi = 0;
+    if (A === 0) {
+      if (C <= 0) {
+        tLo = 0;
+        tHi = 1;
+      }
+    } else {
+      const disc = B * B - 4 * A * C;
+      if (disc >= 0) {
+        const sq = Math.sqrt(disc);
+        const lo = Math.max(0, (-B - sq) / (2 * A));
+        const hi = Math.min(1, (-B + sq) / (2 * A));
+        if (lo < hi) {
+          tLo = lo;
+          tHi = hi;
+        }
+      }
+    }
+    if (tLo > tHi) {
+      if (current.length === 0) current.push(a);
+      current.push(b);
+      continue;
+    }
+    erased = true;
+    if (tLo > 0) {
+      if (current.length === 0) current.push(a);
+      current.push(lerp(a, b, tLo));
+      flush();
+    } else {
+      flush();
+    }
+    if (tHi < 1) {
+      current = [lerp(a, b, tHi), b];
+    }
+  }
+  flush();
+  return erased ? runs : null;
+}
+
 // src/tools/eraser-tool.ts
 var DEFAULT_RADIUS = 20;
 function makeEraserCursor(radius) {
@@ -6303,12 +6415,21 @@ var EraserTool = class {
   erasing = false;
   radius;
   cursor;
+  mode;
   constructor(options = {}) {
     this.radius = options.radius ?? DEFAULT_RADIUS;
     this.cursor = makeEraserCursor(this.radius);
+    this.mode = options.mode ?? "partial";
   }
   getOptions() {
-    return { radius: this.radius };
+    return { radius: this.radius, mode: this.mode };
+  }
+  setOptions(options) {
+    if (options.mode !== void 0) this.mode = options.mode;
+    if (options.radius !== void 0) {
+      this.radius = options.radius;
+      this.cursor = makeEraserCursor(this.radius);
+    }
   }
   onActivate(ctx) {
     ctx.setCursor?.(this.cursor);
@@ -6341,10 +6462,30 @@ var EraserTool = class {
       if (el.type !== "stroke") continue;
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
-      if (this.strokeIntersects(el, world)) {
+      if (!this.strokeIntersects(el, world)) continue;
+      if (this.mode === "stroke") {
         ctx.store.remove(el.id);
         erased = true;
+        continue;
       }
+      const localEraser = { x: world.x - el.position.x, y: world.y - el.position.y };
+      const runs = erasePoints(el.points, localEraser, this.radius);
+      if (runs === null) continue;
+      ctx.store.remove(el.id);
+      for (const run of runs) {
+        ctx.store.add(
+          createStroke({
+            points: run,
+            color: el.color,
+            width: el.width,
+            opacity: el.opacity,
+            layerId: el.layerId,
+            zIndex: el.zIndex,
+            position: el.position
+          })
+        );
+      }
+      erased = true;
     }
     if (erased) ctx.requestRender();
   }
@@ -7042,6 +7183,11 @@ var SelectTool = class {
   }
   isInsideBounds(point, el) {
     if (el.type === "grid") return false;
+    if (el.type === "shape" && el.shape === "line") {
+      const [a, b] = lineEndpoints(el);
+      const threshold = Math.max(el.strokeWidth / 2, 6);
+      return distSqToSegment(point, a, b) <= threshold * threshold;
+    }
     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;
@@ -7355,6 +7501,15 @@ var ImageTool = class {
 };
 
 // src/tools/shape-tool.ts
+function snapTo45(start, end) {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const len = Math.hypot(dx, dy);
+  if (len === 0) return { ...end };
+  const step = Math.PI / 4;
+  const angle = Math.round(Math.atan2(dy, dx) / step) * step;
+  return { x: start.x + Math.cos(angle) * len, y: start.y + Math.sin(angle) * len };
+}
 var ShapeTool = class {
   name = "shape";
   drawing = false;
@@ -7412,13 +7567,17 @@ var ShapeTool = class {
   onPointerMove(state, ctx) {
     if (!this.drawing) return;
     this.end = this.snap(ctx.camera.screenToWorld({ x: state.x, y: state.y }), ctx);
+    if (this.shape === "line" && this.shiftHeld) {
+      this.end = snapTo45(this.start, this.end);
+    }
     ctx.requestRender();
   }
   onPointerUp(_state, ctx) {
     if (!this.drawing) return;
     this.drawing = false;
     const { position, size } = this.computeRect();
-    if (size.w === 0 || size.h === 0) return;
+    const isLine = this.shape === "line";
+    if (isLine ? size.w === 0 && size.h === 0 : size.w === 0 || size.h === 0) return;
     const shape = createShape({
       position,
       size,
@@ -7426,6 +7585,7 @@ var ShapeTool = class {
       strokeColor: this.strokeColor,
       strokeWidth: this.strokeWidth,
       fillColor: this.fillColor,
+      ...isLine ? { flip: this.end.x > this.start.x !== this.end.y > this.start.y } : {},
       layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(shape);
@@ -7459,6 +7619,13 @@ var ShapeTool = class {
         ctx.stroke();
         break;
       }
+      case "line":
+        ctx.lineCap = "round";
+        ctx.beginPath();
+        ctx.moveTo(this.start.x, this.start.y);
+        ctx.lineTo(this.end.x, this.end.y);
+        ctx.stroke();
+        break;
     }
     ctx.restore();
   }
@@ -7467,7 +7634,7 @@ var ShapeTool = class {
     let y = Math.min(this.start.y, this.end.y);
     let w = Math.abs(this.end.x - this.start.x);
     let h = Math.abs(this.end.y - this.start.y);
-    if (this.shiftHeld) {
+    if (this.shiftHeld && this.shape !== "line") {
       const side = Math.max(w, h);
       w = side;
       h = side;
@@ -7883,7 +8050,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.28.0";
+var VERSION = "0.30.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,