@fieldnotes/core 0.28.0 → 0.30.0

package/dist/index.d.cts

@@ -27,6 +27,8 @@ interface StrokeElement extends BaseElement {
     color: string;
     width: number;
     opacity: number;
+    /** Optional canvas blend mode (e.g. highlighter uses 'multiply'). */
+    blendMode?: 'multiply';
 }
 interface NoteElement extends BaseElement {
     type: 'note';
@@ -72,7 +74,7 @@ interface TextElement extends BaseElement {
     color: string;
     textAlign: 'left' | 'center' | 'right';
 }
-type ShapeKind = 'rectangle' | 'ellipse';
+type ShapeKind = 'rectangle' | 'ellipse' | 'line';
 interface ShapeElement extends BaseElement {
     type: 'shape';
     shape: ShapeKind;
@@ -80,6 +82,8 @@ interface ShapeElement extends BaseElement {
     strokeColor: string;
     strokeWidth: number;
     fillColor: string;
+    /** Line-only: which bbox diagonal the segment runs along. Absent/false = main diagonal. */
+    flip?: boolean;
 }
 type HexOrientation = 'pointy' | 'flat';
 interface GridElement extends BaseElement {
@@ -562,6 +566,7 @@ interface StrokeInput extends BaseDefaults {
     color?: string;
     width?: number;
     opacity?: number;
+    blendMode?: 'multiply';
 }
 interface NoteInput extends BaseDefaults {
     position: Point;
@@ -612,6 +617,7 @@ interface ShapeInput extends BaseDefaults {
     strokeColor?: string;
     strokeWidth?: number;
     fillColor?: string;
+    flip?: boolean;
 }
 declare function createShape(input: ShapeInput): ShapeElement;
 interface GridInput extends BaseDefaults {
@@ -669,14 +675,17 @@ declare class HandTool implements Tool {
 }
 
 interface PencilToolOptions {
+    name?: string;
     color?: string;
     width?: number;
     smoothing?: number;
     minPointDistance?: number;
     progressiveSimplifyThreshold?: number;
+    opacity?: number;
+    blendMode?: 'multiply';
 }
 declare class PencilTool implements Tool {
-    readonly name = "pencil";
+    readonly name: string;
     private drawing;
     private points;
     private color;
@@ -685,6 +694,8 @@ declare class PencilTool implements Tool {
     private minPointDistance;
     private progressiveThreshold;
     private nextSimplifyAt;
+    private opacity;
+    private blendMode;
     private optionListeners;
     constructor(options?: PencilToolOptions);
     onActivate(ctx: ToolContext): void;
@@ -701,14 +712,17 @@ declare class PencilTool implements Tool {
 
 interface EraserToolOptions {
     radius?: number;
+    mode?: 'partial' | 'stroke';
 }
 declare class EraserTool implements Tool {
     readonly name = "eraser";
     private erasing;
-    private readonly radius;
-    private readonly cursor;
+    private radius;
+    private cursor;
+    private mode;
     constructor(options?: EraserToolOptions);
     getOptions(): EraserToolOptions;
+    setOptions(options: EraserToolOptions): void;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
@@ -957,6 +971,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.28.0";
+declare const VERSION = "0.30.0";
 
 export { type ActiveFormats, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.d.ts

@@ -27,6 +27,8 @@ interface StrokeElement extends BaseElement {
     color: string;
     width: number;
     opacity: number;
+    /** Optional canvas blend mode (e.g. highlighter uses 'multiply'). */
+    blendMode?: 'multiply';
 }
 interface NoteElement extends BaseElement {
     type: 'note';
@@ -72,7 +74,7 @@ interface TextElement extends BaseElement {
     color: string;
     textAlign: 'left' | 'center' | 'right';
 }
-type ShapeKind = 'rectangle' | 'ellipse';
+type ShapeKind = 'rectangle' | 'ellipse' | 'line';
 interface ShapeElement extends BaseElement {
     type: 'shape';
     shape: ShapeKind;
@@ -80,6 +82,8 @@ interface ShapeElement extends BaseElement {
     strokeColor: string;
     strokeWidth: number;
     fillColor: string;
+    /** Line-only: which bbox diagonal the segment runs along. Absent/false = main diagonal. */
+    flip?: boolean;
 }
 type HexOrientation = 'pointy' | 'flat';
 interface GridElement extends BaseElement {
@@ -562,6 +566,7 @@ interface StrokeInput extends BaseDefaults {
     color?: string;
     width?: number;
     opacity?: number;
+    blendMode?: 'multiply';
 }
 interface NoteInput extends BaseDefaults {
     position: Point;
@@ -612,6 +617,7 @@ interface ShapeInput extends BaseDefaults {
     strokeColor?: string;
     strokeWidth?: number;
     fillColor?: string;
+    flip?: boolean;
 }
 declare function createShape(input: ShapeInput): ShapeElement;
 interface GridInput extends BaseDefaults {
@@ -669,14 +675,17 @@ declare class HandTool implements Tool {
 }
 
 interface PencilToolOptions {
+    name?: string;
     color?: string;
     width?: number;
     smoothing?: number;
     minPointDistance?: number;
     progressiveSimplifyThreshold?: number;
+    opacity?: number;
+    blendMode?: 'multiply';
 }
 declare class PencilTool implements Tool {
-    readonly name = "pencil";
+    readonly name: string;
     private drawing;
     private points;
     private color;
@@ -685,6 +694,8 @@ declare class PencilTool implements Tool {
     private minPointDistance;
     private progressiveThreshold;
     private nextSimplifyAt;
+    private opacity;
+    private blendMode;
     private optionListeners;
     constructor(options?: PencilToolOptions);
     onActivate(ctx: ToolContext): void;
@@ -701,14 +712,17 @@ declare class PencilTool implements Tool {
 
 interface EraserToolOptions {
     radius?: number;
+    mode?: 'partial' | 'stroke';
 }
 declare class EraserTool implements Tool {
     readonly name = "eraser";
     private erasing;
-    private readonly radius;
-    private readonly cursor;
+    private radius;
+    private cursor;
+    private mode;
     constructor(options?: EraserToolOptions);
     getOptions(): EraserToolOptions;
+    setOptions(options: EraserToolOptions): void;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
@@ -957,6 +971,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.28.0";
+declare const VERSION = "0.30.0";
 
 export { type ActiveFormats, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.js

@@ -2195,6 +2195,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) {
@@ -2719,6 +2732,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";
@@ -2841,7 +2855,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);
     }
@@ -2880,6 +2894,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) {
@@ -3153,7 +3176,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 },
@@ -3165,6 +3188,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 {
@@ -3229,7 +3254,7 @@ function createHtmlElement(input) {
   return el;
 }
 function createShape(input) {
-  return {
+  const result = {
     id: createId("shape"),
     type: "shape",
     position: input.position,
@@ -3242,6 +3267,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 {
@@ -6072,7 +6099,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;
@@ -6081,14 +6108,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");
@@ -6102,7 +6134,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) {
@@ -6116,6 +6150,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) {
@@ -6157,7 +6193,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);
@@ -6173,7 +6211,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;
@@ -6210,6 +6249,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) {
@@ -6222,12 +6334,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);
@@ -6260,10 +6381,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();
   }
@@ -6961,6 +7102,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;
@@ -7274,6 +7420,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;
@@ -7331,13 +7486,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,
@@ -7345,6 +7504,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);
@@ -7378,6 +7538,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();
   }
@@ -7386,7 +7553,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;
@@ -7802,7 +7969,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.28.0";
+var VERSION = "0.30.0";
 export {
   ArrowTool,
   AutoSave,