@fieldnotes/core 0.2.0 → 0.2.1

package/dist/index.d.cts

@@ -13,6 +13,11 @@ interface Point {
     x: number;
     y: number;
 }
+interface StrokePoint {
+    x: number;
+    y: number;
+    pressure: number;
+}
 interface Size {
     w: number;
     h: number;
@@ -28,7 +33,7 @@ interface BaseElement {
 }
 interface StrokeElement extends BaseElement {
     type: 'stroke';
-    points: Point[];
+    points: StrokePoint[];
     color: string;
     width: number;
     opacity: number;
@@ -200,6 +205,7 @@ declare class ToolManager {
     get activeTool(): Tool | null;
     get toolNames(): string[];
     register(tool: Tool): void;
+    getTool<T extends Tool = Tool>(name: string): T | undefined;
     setTool(name: string, ctx: ToolContext): void;
     handlePointerDown(state: PointerState, ctx: ToolContext): void;
     handlePointerMove(state: PointerState, ctx: ToolContext): void;
@@ -280,7 +286,6 @@ declare class InputHandler {
     destroy(): void;
     private bind;
     private onWheel;
-    private isInteractiveHtmlContent;
     private onPointerDown;
     private onPointerMove;
     private onPointerUp;
@@ -328,6 +333,7 @@ declare class Viewport {
     private needsRender;
     private domNodes;
     private htmlContent;
+    private interactingElementId;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
     requestRender(): void;
@@ -343,7 +349,7 @@ declare class Viewport {
     }, size?: {
         w: number;
         h: number;
-    }): void;
+    }): string;
     addHtmlElement(dom: HTMLElement, position: {
         x: number;
         y: number;
@@ -356,6 +362,11 @@ declare class Viewport {
     private render;
     private startEditingNote;
     private onDblClick;
+    private hitTestWorld;
+    private startInteracting;
+    stopInteracting(): void;
+    private onInteractKeyDown;
+    private onInteractPointerDown;
     private onDragOver;
     private onDrop;
     private syncDomNode;
@@ -401,7 +412,7 @@ interface BaseDefaults {
     locked?: boolean;
 }
 interface StrokeInput extends BaseDefaults {
-    points: Point[];
+    points: StrokePoint[];
     color?: string;
     width?: number;
     opacity?: number;
@@ -488,6 +499,7 @@ declare class HandTool implements Tool {
 interface PencilToolOptions {
     color?: string;
     width?: number;
+    smoothing?: number;
 }
 declare class PencilTool implements Tool {
     readonly name = "pencil";
@@ -495,6 +507,7 @@ declare class PencilTool implements Tool {
     private points;
     private color;
     private width;
+    private smoothing;
     constructor(options?: PencilToolOptions);
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
@@ -565,6 +578,7 @@ declare class ArrowTool implements Tool {
     private color;
     private width;
     constructor(options?: ArrowToolOptions);
+    setOptions(options: ArrowToolOptions): void;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
@@ -580,6 +594,7 @@ declare class NoteTool implements Tool {
     private backgroundColor;
     private size;
     constructor(options?: NoteToolOptions);
+    setOptions(options: NoteToolOptions): void;
     onPointerDown(_state: PointerState, _ctx: ToolContext): void;
     onPointerMove(_state: PointerState, _ctx: ToolContext): void;
     onPointerUp(state: PointerState, ctx: ToolContext): void;
@@ -599,6 +614,6 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.1.2";
+declare const VERSION = "0.2.1";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type Size, type StrokeElement, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, createArrow, createHtmlElement, createId, createImage, createNote, createStroke, exportState, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, isNearBezier, parseState };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type Size, type StrokeElement, type StrokePoint, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, createArrow, createHtmlElement, createId, createImage, createNote, createStroke, exportState, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, isNearBezier, parseState };

package/dist/index.d.ts

@@ -13,6 +13,11 @@ interface Point {
     x: number;
     y: number;
 }
+interface StrokePoint {
+    x: number;
+    y: number;
+    pressure: number;
+}
 interface Size {
     w: number;
     h: number;
@@ -28,7 +33,7 @@ interface BaseElement {
 }
 interface StrokeElement extends BaseElement {
     type: 'stroke';
-    points: Point[];
+    points: StrokePoint[];
     color: string;
     width: number;
     opacity: number;
@@ -200,6 +205,7 @@ declare class ToolManager {
     get activeTool(): Tool | null;
     get toolNames(): string[];
     register(tool: Tool): void;
+    getTool<T extends Tool = Tool>(name: string): T | undefined;
     setTool(name: string, ctx: ToolContext): void;
     handlePointerDown(state: PointerState, ctx: ToolContext): void;
     handlePointerMove(state: PointerState, ctx: ToolContext): void;
@@ -280,7 +286,6 @@ declare class InputHandler {
     destroy(): void;
     private bind;
     private onWheel;
-    private isInteractiveHtmlContent;
     private onPointerDown;
     private onPointerMove;
     private onPointerUp;
@@ -328,6 +333,7 @@ declare class Viewport {
     private needsRender;
     private domNodes;
     private htmlContent;
+    private interactingElementId;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
     requestRender(): void;
@@ -343,7 +349,7 @@ declare class Viewport {
     }, size?: {
         w: number;
         h: number;
-    }): void;
+    }): string;
     addHtmlElement(dom: HTMLElement, position: {
         x: number;
         y: number;
@@ -356,6 +362,11 @@ declare class Viewport {
     private render;
     private startEditingNote;
     private onDblClick;
+    private hitTestWorld;
+    private startInteracting;
+    stopInteracting(): void;
+    private onInteractKeyDown;
+    private onInteractPointerDown;
     private onDragOver;
     private onDrop;
     private syncDomNode;
@@ -401,7 +412,7 @@ interface BaseDefaults {
     locked?: boolean;
 }
 interface StrokeInput extends BaseDefaults {
-    points: Point[];
+    points: StrokePoint[];
     color?: string;
     width?: number;
     opacity?: number;
@@ -488,6 +499,7 @@ declare class HandTool implements Tool {
 interface PencilToolOptions {
     color?: string;
     width?: number;
+    smoothing?: number;
 }
 declare class PencilTool implements Tool {
     readonly name = "pencil";
@@ -495,6 +507,7 @@ declare class PencilTool implements Tool {
     private points;
     private color;
     private width;
+    private smoothing;
     constructor(options?: PencilToolOptions);
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
@@ -565,6 +578,7 @@ declare class ArrowTool implements Tool {
     private color;
     private width;
     constructor(options?: ArrowToolOptions);
+    setOptions(options: ArrowToolOptions): void;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
@@ -580,6 +594,7 @@ declare class NoteTool implements Tool {
     private backgroundColor;
     private size;
     constructor(options?: NoteToolOptions);
+    setOptions(options: NoteToolOptions): void;
     onPointerDown(_state: PointerState, _ctx: ToolContext): void;
     onPointerMove(_state: PointerState, _ctx: ToolContext): void;
     onPointerUp(state: PointerState, ctx: ToolContext): void;
@@ -599,6 +614,6 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.1.2";
+declare const VERSION = "0.2.1";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type Size, type StrokeElement, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, createArrow, createHtmlElement, createId, createImage, createNote, createStroke, exportState, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, isNearBezier, parseState };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type Size, type StrokeElement, type StrokePoint, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, createArrow, createHtmlElement, createId, createImage, createNote, createStroke, exportState, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, isNearBezier, parseState };

package/dist/index.js

@@ -89,6 +89,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
@@ -344,24 +351,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();
@@ -687,6 +678,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;
@@ -710,22 +774,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) {
@@ -868,6 +928,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;
@@ -1227,6 +1290,7 @@ var Viewport = class {
   needsRender = true;
   domNodes = /* @__PURE__ */ new Map();
   htmlContent = /* @__PURE__ */ new Map();
+  interactingElementId = null;
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -1272,6 +1336,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 });
@@ -1284,6 +1349,7 @@ var Viewport = class {
   }
   destroy() {
     cancelAnimationFrame(this.animFrameId);
+    this.stopInteracting();
     this.noteEditor.destroy(this.store);
     this.historyRecorder.destroy();
     this.wrapper.removeEventListener("dblclick", this.onDblClick);
@@ -1341,11 +1407,69 @@ 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";
+    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";
+    }
+    this.interactingElementId = null;
+    window.removeEventListener("keydown", this.onInteractKeyDown);
+    window.removeEventListener("pointerdown", this.onInteractPointerDown);
+  }
+  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();
@@ -1443,7 +1567,8 @@ var Viewport = class {
       if (content) {
         node.dataset["initialized"] = "true";
         Object.assign(node.style, {
-          overflow: "hidden"
+          overflow: "hidden",
+          pointerEvents: "none"
         });
         node.appendChild(content);
       }
@@ -1546,15 +1671,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");
@@ -1565,16 +1694,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) {
@@ -1584,8 +1716,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
     });
@@ -1597,19 +1730,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();
   }
 };
@@ -1897,7 +2029,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;
@@ -2104,6 +2236,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 });
@@ -2168,6 +2304,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) {
@@ -2217,7 +2357,7 @@ var ImageTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.1.2";
+var VERSION = "0.2.1";
 export {
   AddElementCommand,
   ArrowTool,