@fieldnotes/core 0.8.7 → 0.8.8

package/dist/index.cjs

@@ -542,6 +542,13 @@ var Background = class {
   color;
   dotRadius;
   lineWidth;
+  cachedCanvas = null;
+  cachedCtx = null;
+  lastZoom = -1;
+  lastOffsetX = -Infinity;
+  lastOffsetY = -Infinity;
+  lastWidth = 0;
+  lastHeight = 0;
   constructor(options = {}) {
     this.pattern = options.pattern ?? DEFAULTS.pattern;
     this.spacing = options.spacing ?? DEFAULTS.spacing;
@@ -557,13 +564,69 @@ var Background = class {
     ctx.save();
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, cssWidth, cssHeight);
+    if (this.pattern === "none") {
+      ctx.restore();
+      return;
+    }
+    const spacing = this.adaptSpacing(this.spacing, camera.zoom);
+    const keyZoom = camera.zoom;
+    const keyX = Math.floor(camera.position.x % spacing);
+    const keyY = Math.floor(camera.position.y % spacing);
+    if (this.cachedCanvas !== null && keyZoom === this.lastZoom && keyX === this.lastOffsetX && keyY === this.lastOffsetY && cssWidth === this.lastWidth && cssHeight === this.lastHeight) {
+      ctx.drawImage(this.cachedCanvas, 0, 0);
+      ctx.restore();
+      return;
+    }
+    this.ensureCachedCanvas(cssWidth, cssHeight, dpr);
+    if (this.cachedCtx === null) {
+      if (this.pattern === "dots") {
+        this.renderDots(ctx, camera, cssWidth, cssHeight);
+      } else if (this.pattern === "grid") {
+        this.renderGrid(ctx, camera, cssWidth, cssHeight);
+      }
+      ctx.restore();
+      return;
+    }
+    const offCtx = this.cachedCtx;
+    offCtx.clearRect(0, 0, cssWidth, cssHeight);
     if (this.pattern === "dots") {
-      this.renderDots(ctx, camera, cssWidth, cssHeight);
+      this.renderDots(offCtx, camera, cssWidth, cssHeight);
     } else if (this.pattern === "grid") {
-      this.renderGrid(ctx, camera, cssWidth, cssHeight);
-    }
+      this.renderGrid(offCtx, camera, cssWidth, cssHeight);
+    }
+    this.lastZoom = keyZoom;
+    this.lastOffsetX = keyX;
+    this.lastOffsetY = keyY;
+    this.lastWidth = cssWidth;
+    this.lastHeight = cssHeight;
+    ctx.drawImage(this.cachedCanvas, 0, 0);
     ctx.restore();
   }
+  ensureCachedCanvas(cssWidth, cssHeight, dpr) {
+    if (this.cachedCanvas !== null && this.lastWidth === cssWidth && this.lastHeight === cssHeight) {
+      return;
+    }
+    const physWidth = Math.round(cssWidth * dpr);
+    const physHeight = Math.round(cssHeight * dpr);
+    if (typeof OffscreenCanvas !== "undefined") {
+      this.cachedCanvas = new OffscreenCanvas(physWidth, physHeight);
+    } else if (typeof document !== "undefined") {
+      const el = document.createElement("canvas");
+      el.width = physWidth;
+      el.height = physHeight;
+      this.cachedCanvas = el;
+    } else {
+      this.cachedCanvas = null;
+      this.cachedCtx = null;
+      return;
+    }
+    const offCtx = this.cachedCanvas.getContext("2d");
+    if (offCtx !== null) {
+      offCtx.scale(dpr, dpr);
+    }
+    this.cachedCtx = offCtx;
+    this.lastZoom = -1;
+  }
   adaptSpacing(baseSpacing, zoom) {
     let spacing = baseSpacing * zoom;
     while (spacing < MIN_PATTERN_SPACING) {
@@ -1046,6 +1109,10 @@ var ElementStore = class {
     const existing = this.elements.get(id);
     if (!existing) return;
     const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
+    if (updated.type === "arrow") {
+      const arrow = updated;
+      arrow.cachedControlPoint = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
+    }
     this.elements.set(id, updated);
     const newBounds = getElementBounds(updated);
     if (newBounds) {
@@ -1301,6 +1368,25 @@ function smoothToSegments(points) {
   return segments;
 }
 
+// src/elements/stroke-cache.ts
+var cache = /* @__PURE__ */ new WeakMap();
+function computeStrokeSegments(stroke) {
+  const segments = smoothToSegments(stroke.points);
+  const widths = [];
+  for (const seg of segments) {
+    const w = (pressureToWidth(seg.start.pressure, stroke.width) + pressureToWidth(seg.end.pressure, stroke.width)) / 2;
+    widths.push(w);
+  }
+  const data = { segments, widths };
+  cache.set(stroke, data);
+  return data;
+}
+function getStrokeRenderData(stroke) {
+  const cached = cache.get(stroke);
+  if (cached) return cached;
+  return computeStrokeSegments(stroke);
+}
+
 // src/elements/grid-renderer.ts
 function getSquareGridLines(bounds, cellSize) {
   if (cellSize <= 0) return { verticals: [], horizontals: [] };
@@ -1465,9 +1551,11 @@ var ElementRenderer = class {
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
     ctx.globalAlpha = stroke.opacity;
-    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;
+    const { segments, widths } = getStrokeRenderData(stroke);
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      const w = widths[i];
+      if (!seg || w === void 0) continue;
       ctx.lineWidth = w;
       ctx.beginPath();
       ctx.moveTo(seg.start.x, seg.start.y);
@@ -1488,7 +1576,7 @@ var ElementRenderer = class {
     ctx.beginPath();
     ctx.moveTo(visualFrom.x, visualFrom.y);
     if (arrow.bend !== 0) {
-      const cp = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
+      const cp = arrow.cachedControlPoint ?? getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
       ctx.quadraticCurveTo(cp.x, cp.y, visualTo.x, visualTo.y);
     } else {
       ctx.lineTo(visualTo.x, visualTo.y);
@@ -1629,15 +1717,33 @@ var ElementRenderer = class {
   renderImage(ctx, image) {
     const img = this.getImage(image.src);
     if (!img) return;
-    ctx.drawImage(img, image.position.x, image.position.y, image.size.w, image.size.h);
+    ctx.drawImage(
+      img,
+      image.position.x,
+      image.position.y,
+      image.size.w,
+      image.size.h
+    );
   }
   getImage(src) {
     const cached = this.imageCache.get(src);
-    if (cached) return cached.complete ? cached : null;
+    if (cached) {
+      if (cached instanceof HTMLImageElement) return cached.complete ? cached : null;
+      return cached;
+    }
     const img = new Image();
     img.src = src;
     this.imageCache.set(src, img);
-    img.onload = () => this.onImageLoad?.();
+    img.onload = () => {
+      this.onImageLoad?.();
+      if (typeof createImageBitmap !== "undefined") {
+        createImageBitmap(img).then((bitmap) => {
+          this.imageCache.set(src, bitmap);
+          this.onImageLoad?.();
+        }).catch(() => {
+        });
+      }
+    };
     return null;
   }
 };
@@ -2013,6 +2119,7 @@ function createNote(input) {
   };
 }
 function createArrow(input) {
+  const bend = input.bend ?? 0;
   const result = {
     id: createId("arrow"),
     type: "arrow",
@@ -2022,9 +2129,10 @@ function createArrow(input) {
     layerId: input.layerId ?? "",
     from: input.from,
     to: input.to,
-    bend: input.bend ?? 0,
+    bend,
     color: input.color ?? "#000000",
-    width: input.width ?? 2
+    width: input.width ?? 2,
+    cachedControlPoint: getArrowControlPoint(input.from, input.to, bend)
   };
   if (input.fromBinding) result.fromBinding = input.fromBinding;
   if (input.toBinding) result.toBinding = input.toBinding;
@@ -2275,19 +2383,19 @@ function loadImages(elements) {
   const imageElements = elements.filter(
     (el) => el.type === "image" && "src" in el
   );
-  const cache = /* @__PURE__ */ new Map();
-  if (imageElements.length === 0) return Promise.resolve(cache);
+  const cache2 = /* @__PURE__ */ new Map();
+  if (imageElements.length === 0) return Promise.resolve(cache2);
   return new Promise((resolve) => {
     let remaining = imageElements.length;
     const done = () => {
       remaining--;
-      if (remaining <= 0) resolve(cache);
+      if (remaining <= 0) resolve(cache2);
     };
     for (const el of imageElements) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.onload = () => {
-        cache.set(el.id, img);
+        cache2.set(el.id, img);
         done();
       };
       img.onerror = done;
@@ -3535,6 +3643,7 @@ var PencilTool = class {
       layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(stroke);
+    computeStrokeSegments(stroke);
     this.points = [];
     ctx.requestRender();
   }
@@ -4609,7 +4718,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.7";
+var VERSION = "0.8.8";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,

package/dist/index.d.cts

@@ -72,6 +72,8 @@ interface ArrowElement extends BaseElement {
     width: number;
     fromBinding?: Binding;
     toBinding?: Binding;
+    /** Derived from from/to/bend. Redundant in serialized state — safe to omit. */
+    cachedControlPoint?: Point;
 }
 interface ImageElement extends BaseElement {
     type: 'image';
@@ -273,8 +275,16 @@ declare class Background {
     private readonly color;
     private readonly dotRadius;
     private readonly lineWidth;
+    private cachedCanvas;
+    private cachedCtx;
+    private lastZoom;
+    private lastOffsetX;
+    private lastOffsetY;
+    private lastWidth;
+    private lastHeight;
     constructor(options?: BackgroundOptions);
     render(ctx: CanvasRenderingContext2D, camera: Camera): void;
+    private ensureCachedCanvas;
     private adaptSpacing;
     private renderDots;
     private renderGrid;
@@ -914,6 +924,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.8.7";
+declare const VERSION = "0.8.8";
 
 export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -72,6 +72,8 @@ interface ArrowElement extends BaseElement {
     width: number;
     fromBinding?: Binding;
     toBinding?: Binding;
+    /** Derived from from/to/bend. Redundant in serialized state — safe to omit. */
+    cachedControlPoint?: Point;
 }
 interface ImageElement extends BaseElement {
     type: 'image';
@@ -273,8 +275,16 @@ declare class Background {
     private readonly color;
     private readonly dotRadius;
     private readonly lineWidth;
+    private cachedCanvas;
+    private cachedCtx;
+    private lastZoom;
+    private lastOffsetX;
+    private lastOffsetY;
+    private lastWidth;
+    private lastHeight;
     constructor(options?: BackgroundOptions);
     render(ctx: CanvasRenderingContext2D, camera: Camera): void;
+    private ensureCachedCanvas;
     private adaptSpacing;
     private renderDots;
     private renderGrid;
@@ -914,6 +924,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.8.7";
+declare const VERSION = "0.8.8";
 
 export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };

package/dist/index.js

@@ -457,6 +457,13 @@ var Background = class {
   color;
   dotRadius;
   lineWidth;
+  cachedCanvas = null;
+  cachedCtx = null;
+  lastZoom = -1;
+  lastOffsetX = -Infinity;
+  lastOffsetY = -Infinity;
+  lastWidth = 0;
+  lastHeight = 0;
   constructor(options = {}) {
     this.pattern = options.pattern ?? DEFAULTS.pattern;
     this.spacing = options.spacing ?? DEFAULTS.spacing;
@@ -472,13 +479,69 @@ var Background = class {
     ctx.save();
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, cssWidth, cssHeight);
+    if (this.pattern === "none") {
+      ctx.restore();
+      return;
+    }
+    const spacing = this.adaptSpacing(this.spacing, camera.zoom);
+    const keyZoom = camera.zoom;
+    const keyX = Math.floor(camera.position.x % spacing);
+    const keyY = Math.floor(camera.position.y % spacing);
+    if (this.cachedCanvas !== null && keyZoom === this.lastZoom && keyX === this.lastOffsetX && keyY === this.lastOffsetY && cssWidth === this.lastWidth && cssHeight === this.lastHeight) {
+      ctx.drawImage(this.cachedCanvas, 0, 0);
+      ctx.restore();
+      return;
+    }
+    this.ensureCachedCanvas(cssWidth, cssHeight, dpr);
+    if (this.cachedCtx === null) {
+      if (this.pattern === "dots") {
+        this.renderDots(ctx, camera, cssWidth, cssHeight);
+      } else if (this.pattern === "grid") {
+        this.renderGrid(ctx, camera, cssWidth, cssHeight);
+      }
+      ctx.restore();
+      return;
+    }
+    const offCtx = this.cachedCtx;
+    offCtx.clearRect(0, 0, cssWidth, cssHeight);
     if (this.pattern === "dots") {
-      this.renderDots(ctx, camera, cssWidth, cssHeight);
+      this.renderDots(offCtx, camera, cssWidth, cssHeight);
     } else if (this.pattern === "grid") {
-      this.renderGrid(ctx, camera, cssWidth, cssHeight);
-    }
+      this.renderGrid(offCtx, camera, cssWidth, cssHeight);
+    }
+    this.lastZoom = keyZoom;
+    this.lastOffsetX = keyX;
+    this.lastOffsetY = keyY;
+    this.lastWidth = cssWidth;
+    this.lastHeight = cssHeight;
+    ctx.drawImage(this.cachedCanvas, 0, 0);
     ctx.restore();
   }
+  ensureCachedCanvas(cssWidth, cssHeight, dpr) {
+    if (this.cachedCanvas !== null && this.lastWidth === cssWidth && this.lastHeight === cssHeight) {
+      return;
+    }
+    const physWidth = Math.round(cssWidth * dpr);
+    const physHeight = Math.round(cssHeight * dpr);
+    if (typeof OffscreenCanvas !== "undefined") {
+      this.cachedCanvas = new OffscreenCanvas(physWidth, physHeight);
+    } else if (typeof document !== "undefined") {
+      const el = document.createElement("canvas");
+      el.width = physWidth;
+      el.height = physHeight;
+      this.cachedCanvas = el;
+    } else {
+      this.cachedCanvas = null;
+      this.cachedCtx = null;
+      return;
+    }
+    const offCtx = this.cachedCanvas.getContext("2d");
+    if (offCtx !== null) {
+      offCtx.scale(dpr, dpr);
+    }
+    this.cachedCtx = offCtx;
+    this.lastZoom = -1;
+  }
   adaptSpacing(baseSpacing, zoom) {
     let spacing = baseSpacing * zoom;
     while (spacing < MIN_PATTERN_SPACING) {
@@ -961,6 +1024,10 @@ var ElementStore = class {
     const existing = this.elements.get(id);
     if (!existing) return;
     const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
+    if (updated.type === "arrow") {
+      const arrow = updated;
+      arrow.cachedControlPoint = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
+    }
     this.elements.set(id, updated);
     const newBounds = getElementBounds(updated);
     if (newBounds) {
@@ -1216,6 +1283,25 @@ function smoothToSegments(points) {
   return segments;
 }
 
+// src/elements/stroke-cache.ts
+var cache = /* @__PURE__ */ new WeakMap();
+function computeStrokeSegments(stroke) {
+  const segments = smoothToSegments(stroke.points);
+  const widths = [];
+  for (const seg of segments) {
+    const w = (pressureToWidth(seg.start.pressure, stroke.width) + pressureToWidth(seg.end.pressure, stroke.width)) / 2;
+    widths.push(w);
+  }
+  const data = { segments, widths };
+  cache.set(stroke, data);
+  return data;
+}
+function getStrokeRenderData(stroke) {
+  const cached = cache.get(stroke);
+  if (cached) return cached;
+  return computeStrokeSegments(stroke);
+}
+
 // src/elements/grid-renderer.ts
 function getSquareGridLines(bounds, cellSize) {
   if (cellSize <= 0) return { verticals: [], horizontals: [] };
@@ -1380,9 +1466,11 @@ var ElementRenderer = class {
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
     ctx.globalAlpha = stroke.opacity;
-    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;
+    const { segments, widths } = getStrokeRenderData(stroke);
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      const w = widths[i];
+      if (!seg || w === void 0) continue;
       ctx.lineWidth = w;
       ctx.beginPath();
       ctx.moveTo(seg.start.x, seg.start.y);
@@ -1403,7 +1491,7 @@ var ElementRenderer = class {
     ctx.beginPath();
     ctx.moveTo(visualFrom.x, visualFrom.y);
     if (arrow.bend !== 0) {
-      const cp = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
+      const cp = arrow.cachedControlPoint ?? getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
       ctx.quadraticCurveTo(cp.x, cp.y, visualTo.x, visualTo.y);
     } else {
       ctx.lineTo(visualTo.x, visualTo.y);
@@ -1544,15 +1632,33 @@ var ElementRenderer = class {
   renderImage(ctx, image) {
     const img = this.getImage(image.src);
     if (!img) return;
-    ctx.drawImage(img, image.position.x, image.position.y, image.size.w, image.size.h);
+    ctx.drawImage(
+      img,
+      image.position.x,
+      image.position.y,
+      image.size.w,
+      image.size.h
+    );
   }
   getImage(src) {
     const cached = this.imageCache.get(src);
-    if (cached) return cached.complete ? cached : null;
+    if (cached) {
+      if (cached instanceof HTMLImageElement) return cached.complete ? cached : null;
+      return cached;
+    }
     const img = new Image();
     img.src = src;
     this.imageCache.set(src, img);
-    img.onload = () => this.onImageLoad?.();
+    img.onload = () => {
+      this.onImageLoad?.();
+      if (typeof createImageBitmap !== "undefined") {
+        createImageBitmap(img).then((bitmap) => {
+          this.imageCache.set(src, bitmap);
+          this.onImageLoad?.();
+        }).catch(() => {
+        });
+      }
+    };
     return null;
   }
 };
@@ -1928,6 +2034,7 @@ function createNote(input) {
   };
 }
 function createArrow(input) {
+  const bend = input.bend ?? 0;
   const result = {
     id: createId("arrow"),
     type: "arrow",
@@ -1937,9 +2044,10 @@ function createArrow(input) {
     layerId: input.layerId ?? "",
     from: input.from,
     to: input.to,
-    bend: input.bend ?? 0,
+    bend,
     color: input.color ?? "#000000",
-    width: input.width ?? 2
+    width: input.width ?? 2,
+    cachedControlPoint: getArrowControlPoint(input.from, input.to, bend)
   };
   if (input.fromBinding) result.fromBinding = input.fromBinding;
   if (input.toBinding) result.toBinding = input.toBinding;
@@ -2190,19 +2298,19 @@ function loadImages(elements) {
   const imageElements = elements.filter(
     (el) => el.type === "image" && "src" in el
   );
-  const cache = /* @__PURE__ */ new Map();
-  if (imageElements.length === 0) return Promise.resolve(cache);
+  const cache2 = /* @__PURE__ */ new Map();
+  if (imageElements.length === 0) return Promise.resolve(cache2);
   return new Promise((resolve) => {
     let remaining = imageElements.length;
     const done = () => {
       remaining--;
-      if (remaining <= 0) resolve(cache);
+      if (remaining <= 0) resolve(cache2);
     };
     for (const el of imageElements) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.onload = () => {
-        cache.set(el.id, img);
+        cache2.set(el.id, img);
         done();
       };
       img.onerror = done;
@@ -3450,6 +3558,7 @@ var PencilTool = class {
       layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(stroke);
+    computeStrokeSegments(stroke);
     this.points = [];
     ctx.requestRender();
   }
@@ -4524,7 +4633,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.7";
+var VERSION = "0.8.8";
 export {
   AddElementCommand,
   ArrowTool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldnotes/core",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "Vanilla TypeScript infinite canvas engine",
   "type": "module",
   "main": "./dist/index.cjs",