@fieldnotes/core 0.8.6 → 0.8.8

package/dist/index.cjs

@@ -40,6 +40,7 @@ __export(index_exports, {
   NoteEditor: () => NoteEditor,
   NoteTool: () => NoteTool,
   PencilTool: () => PencilTool,
+  Quadtree: () => Quadtree,
   RemoveElementCommand: () => RemoveElementCommand,
   RemoveLayerCommand: () => RemoveLayerCommand,
   SelectTool: () => SelectTool,
@@ -50,6 +51,7 @@ __export(index_exports, {
   UpdateLayerCommand: () => UpdateLayerCommand,
   VERSION: () => VERSION,
   Viewport: () => Viewport,
+  boundsIntersect: () => boundsIntersect,
   clearStaleBindings: () => clearStaleBindings,
   createArrow: () => createArrow,
   createGrid: () => createGrid,
@@ -105,6 +107,153 @@ var EventBus = class {
   }
 };
 
+// src/core/quadtree.ts
+var MAX_ITEMS = 8;
+var MAX_DEPTH = 8;
+function intersects(a, b) {
+  return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
+}
+var QuadNode = class _QuadNode {
+  constructor(bounds, depth) {
+    this.bounds = bounds;
+    this.depth = depth;
+  }
+  items = [];
+  children = null;
+  insert(entry) {
+    if (this.children) {
+      const idx = this.getChildIndex(entry.bounds);
+      if (idx !== -1) {
+        const child = this.children[idx];
+        if (child) child.insert(entry);
+        return;
+      }
+      this.items.push(entry);
+      return;
+    }
+    this.items.push(entry);
+    if (this.items.length > MAX_ITEMS && this.depth < MAX_DEPTH) {
+      this.split();
+    }
+  }
+  remove(id) {
+    const idx = this.items.findIndex((e) => e.id === id);
+    if (idx !== -1) {
+      this.items.splice(idx, 1);
+      return true;
+    }
+    if (this.children) {
+      for (const child of this.children) {
+        if (child.remove(id)) {
+          this.collapseIfEmpty();
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  query(rect, result) {
+    if (!intersects(this.bounds, rect)) return;
+    for (const item of this.items) {
+      if (intersects(item.bounds, rect)) {
+        result.push(item.id);
+      }
+    }
+    if (this.children) {
+      for (const child of this.children) {
+        child.query(rect, result);
+      }
+    }
+  }
+  getChildIndex(itemBounds) {
+    const midX = this.bounds.x + this.bounds.w / 2;
+    const midY = this.bounds.y + this.bounds.h / 2;
+    const left = itemBounds.x >= this.bounds.x && itemBounds.x + itemBounds.w <= midX;
+    const right = itemBounds.x >= midX && itemBounds.x + itemBounds.w <= this.bounds.x + this.bounds.w;
+    const top = itemBounds.y >= this.bounds.y && itemBounds.y + itemBounds.h <= midY;
+    const bottom = itemBounds.y >= midY && itemBounds.y + itemBounds.h <= this.bounds.y + this.bounds.h;
+    if (left && top) return 0;
+    if (right && top) return 1;
+    if (left && bottom) return 2;
+    if (right && bottom) return 3;
+    return -1;
+  }
+  split() {
+    const { x, y, w, h } = this.bounds;
+    const halfW = w / 2;
+    const halfH = h / 2;
+    const d = this.depth + 1;
+    this.children = [
+      new _QuadNode({ x, y, w: halfW, h: halfH }, d),
+      new _QuadNode({ x: x + halfW, y, w: halfW, h: halfH }, d),
+      new _QuadNode({ x, y: y + halfH, w: halfW, h: halfH }, d),
+      new _QuadNode({ x: x + halfW, y: y + halfH, w: halfW, h: halfH }, d)
+    ];
+    const remaining = [];
+    for (const item of this.items) {
+      const idx = this.getChildIndex(item.bounds);
+      if (idx !== -1) {
+        const target = this.children[idx];
+        if (target) target.insert(item);
+      } else {
+        remaining.push(item);
+      }
+    }
+    this.items = remaining;
+  }
+  collapseIfEmpty() {
+    if (!this.children) return;
+    let totalItems = this.items.length;
+    for (const child of this.children) {
+      if (child.children) return;
+      totalItems += child.items.length;
+    }
+    if (totalItems <= MAX_ITEMS) {
+      for (const child of this.children) {
+        this.items.push(...child.items);
+      }
+      this.children = null;
+    }
+  }
+};
+var Quadtree = class {
+  root;
+  _size = 0;
+  worldBounds;
+  constructor(worldBounds) {
+    this.worldBounds = worldBounds;
+    this.root = new QuadNode(worldBounds, 0);
+  }
+  get size() {
+    return this._size;
+  }
+  insert(id, bounds) {
+    this.root.insert({ id, bounds });
+    this._size++;
+  }
+  remove(id) {
+    if (this.root.remove(id)) {
+      this._size--;
+    }
+  }
+  update(id, newBounds) {
+    this.remove(id);
+    this.insert(id, newBounds);
+  }
+  query(rect) {
+    const result = [];
+    this.root.query(rect, result);
+    return result;
+  }
+  queryPoint(point) {
+    return this.query({ x: point.x, y: point.y, w: 0, h: 0 });
+  }
+  clear() {
+    this.root = new QuadNode(this.worldBounds, 0);
+    this._size = 0;
+  }
+};
+
 // src/core/state-serializer.ts
 var CURRENT_VERSION = 2;
 function exportState(elements, camera, layers = []) {
@@ -319,16 +468,16 @@ var Camera = class {
   pan(dx, dy) {
     this.x += dx;
     this.y += dy;
-    this.notifyChange();
+    this.notifyPan();
   }
   moveTo(x, y) {
     this.x = x;
     this.y = y;
-    this.notifyChange();
+    this.notifyPan();
   }
   setZoom(level) {
     this.z = Math.min(this.maxZoom, Math.max(this.minZoom, level));
-    this.notifyChange();
+    this.notifyZoom();
   }
   zoomAt(level, screenPoint) {
     const before = this.screenToWorld(screenPoint);
@@ -336,7 +485,7 @@ var Camera = class {
     const after = this.screenToWorld(screenPoint);
     this.x += (after.x - before.x) * this.z;
     this.y += (after.y - before.y) * this.z;
-    this.notifyChange();
+    this.notifyPanAndZoom();
   }
   screenToWorld(screen) {
     return {
@@ -350,6 +499,16 @@ var Camera = class {
       y: world.y * this.z + this.y
     };
   }
+  getVisibleRect(canvasWidth, canvasHeight) {
+    const topLeft = this.screenToWorld({ x: 0, y: 0 });
+    const bottomRight = this.screenToWorld({ x: canvasWidth, y: canvasHeight });
+    return {
+      x: topLeft.x,
+      y: topLeft.y,
+      w: bottomRight.x - topLeft.x,
+      h: bottomRight.y - topLeft.y
+    };
+  }
   toCSSTransform() {
     return `translate3d(${this.x}px, ${this.y}px, 0) scale(${this.z})`;
   }
@@ -357,8 +516,14 @@ var Camera = class {
     this.changeListeners.add(listener);
     return () => this.changeListeners.delete(listener);
   }
-  notifyChange() {
-    this.changeListeners.forEach((fn) => fn());
+  notifyPan() {
+    this.changeListeners.forEach((fn) => fn({ panned: true, zoomed: false }));
+  }
+  notifyZoom() {
+    this.changeListeners.forEach((fn) => fn({ panned: false, zoomed: true }));
+  }
+  notifyPanAndZoom() {
+    this.changeListeners.forEach((fn) => fn({ panned: true, zoomed: true }));
   }
 };
 
@@ -377,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;
@@ -392,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) {
@@ -664,77 +892,6 @@ var InputHandler = class {
   }
 };
 
-// src/elements/element-store.ts
-var ElementStore = class {
-  elements = /* @__PURE__ */ new Map();
-  bus = new EventBus();
-  layerOrderMap = /* @__PURE__ */ new Map();
-  get count() {
-    return this.elements.size;
-  }
-  setLayerOrder(order) {
-    this.layerOrderMap = new Map(order);
-  }
-  getAll() {
-    return [...this.elements.values()].sort((a, b) => {
-      const layerA = this.layerOrderMap.get(a.layerId) ?? 0;
-      const layerB = this.layerOrderMap.get(b.layerId) ?? 0;
-      if (layerA !== layerB) return layerA - layerB;
-      return a.zIndex - b.zIndex;
-    });
-  }
-  getById(id) {
-    return this.elements.get(id);
-  }
-  getElementsByType(type) {
-    return this.getAll().filter(
-      (el) => el.type === type
-    );
-  }
-  add(element) {
-    this.elements.set(element.id, element);
-    this.bus.emit("add", element);
-  }
-  update(id, partial) {
-    const existing = this.elements.get(id);
-    if (!existing) return;
-    const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
-    this.elements.set(id, updated);
-    this.bus.emit("update", { previous: existing, current: updated });
-  }
-  remove(id) {
-    const element = this.elements.get(id);
-    if (!element) return;
-    this.elements.delete(id);
-    this.bus.emit("remove", element);
-  }
-  clear() {
-    this.elements.clear();
-    this.bus.emit("clear", null);
-  }
-  snapshot() {
-    return this.getAll().map((el) => ({ ...el }));
-  }
-  loadSnapshot(elements) {
-    this.elements.clear();
-    for (const el of elements) {
-      this.elements.set(el.id, el);
-    }
-  }
-  on(event, listener) {
-    return this.bus.on(event, listener);
-  }
-  onChange(listener) {
-    const unsubs = [
-      this.bus.on("add", listener),
-      this.bus.on("remove", listener),
-      this.bus.on("update", listener),
-      this.bus.on("clear", listener)
-    ];
-    return () => unsubs.forEach((fn) => fn());
-  }
-};
-
 // src/elements/arrow-geometry.ts
 function getArrowControlPoint(from, to, bend) {
   const midX = (from.x + to.x) / 2;
@@ -835,6 +992,189 @@ function isNearLine(point, a, b, threshold) {
   return Math.hypot(point.x - projX, point.y - projY) <= threshold;
 }
 
+// src/elements/element-bounds.ts
+var strokeBoundsCache = /* @__PURE__ */ new WeakMap();
+function getElementBounds(element) {
+  if (element.type === "grid") return null;
+  if ("size" in element) {
+    return {
+      x: element.position.x,
+      y: element.position.y,
+      w: element.size.w,
+      h: element.size.h
+    };
+  }
+  if (element.type === "stroke") {
+    if (element.points.length === 0) return null;
+    const cached = strokeBoundsCache.get(element);
+    if (cached) return cached;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const p of element.points) {
+      const px = p.x + element.position.x;
+      const py = p.y + element.position.y;
+      if (px < minX) minX = px;
+      if (py < minY) minY = py;
+      if (px > maxX) maxX = px;
+      if (py > maxY) maxY = py;
+    }
+    const bounds = { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    strokeBoundsCache.set(element, bounds);
+    return bounds;
+  }
+  if (element.type === "arrow") {
+    return getArrowBoundsAnalytical(element.from, element.to, element.bend);
+  }
+  return null;
+}
+function getArrowBoundsAnalytical(from, to, bend) {
+  if (bend === 0) {
+    const minX2 = Math.min(from.x, to.x);
+    const minY2 = Math.min(from.y, to.y);
+    return {
+      x: minX2,
+      y: minY2,
+      w: Math.abs(to.x - from.x),
+      h: Math.abs(to.y - from.y)
+    };
+  }
+  const cp = getArrowControlPoint(from, to, bend);
+  let minX = Math.min(from.x, to.x);
+  let maxX = Math.max(from.x, to.x);
+  let minY = Math.min(from.y, to.y);
+  let maxY = Math.max(from.y, to.y);
+  const tx = from.x - 2 * cp.x + to.x;
+  if (tx !== 0) {
+    const t = (from.x - cp.x) / tx;
+    if (t > 0 && t < 1) {
+      const mt = 1 - t;
+      const x = mt * mt * from.x + 2 * mt * t * cp.x + t * t * to.x;
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+    }
+  }
+  const ty = from.y - 2 * cp.y + to.y;
+  if (ty !== 0) {
+    const t = (from.y - cp.y) / ty;
+    if (t > 0 && t < 1) {
+      const mt = 1 - t;
+      const y = mt * mt * from.y + 2 * mt * t * cp.y + t * t * to.y;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    }
+  }
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function boundsIntersect(a, b) {
+  return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
+}
+
+// src/elements/element-store.ts
+var ElementStore = class {
+  elements = /* @__PURE__ */ new Map();
+  bus = new EventBus();
+  layerOrderMap = /* @__PURE__ */ new Map();
+  spatialIndex = new Quadtree({ x: -1e5, y: -1e5, w: 2e5, h: 2e5 });
+  get count() {
+    return this.elements.size;
+  }
+  setLayerOrder(order) {
+    this.layerOrderMap = new Map(order);
+  }
+  getAll() {
+    return [...this.elements.values()].sort((a, b) => {
+      const layerA = this.layerOrderMap.get(a.layerId) ?? 0;
+      const layerB = this.layerOrderMap.get(b.layerId) ?? 0;
+      if (layerA !== layerB) return layerA - layerB;
+      return a.zIndex - b.zIndex;
+    });
+  }
+  getById(id) {
+    return this.elements.get(id);
+  }
+  getElementsByType(type) {
+    return this.getAll().filter(
+      (el) => el.type === type
+    );
+  }
+  add(element) {
+    this.elements.set(element.id, element);
+    const bounds = getElementBounds(element);
+    if (bounds) this.spatialIndex.insert(element.id, bounds);
+    this.bus.emit("add", element);
+  }
+  update(id, partial) {
+    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) {
+      this.spatialIndex.update(id, newBounds);
+    }
+    this.bus.emit("update", { previous: existing, current: updated });
+  }
+  remove(id) {
+    const element = this.elements.get(id);
+    if (!element) return;
+    this.elements.delete(id);
+    this.spatialIndex.remove(id);
+    this.bus.emit("remove", element);
+  }
+  clear() {
+    this.elements.clear();
+    this.spatialIndex.clear();
+    this.bus.emit("clear", null);
+  }
+  snapshot() {
+    return this.getAll().map((el) => ({ ...el }));
+  }
+  loadSnapshot(elements) {
+    this.elements.clear();
+    this.spatialIndex.clear();
+    for (const el of elements) {
+      this.elements.set(el.id, el);
+      const bounds = getElementBounds(el);
+      if (bounds) this.spatialIndex.insert(el.id, bounds);
+    }
+  }
+  queryRect(rect) {
+    const ids = this.spatialIndex.query(rect);
+    const elements = [];
+    for (const id of ids) {
+      const el = this.elements.get(id);
+      if (el) elements.push(el);
+    }
+    return elements.sort((a, b) => {
+      const layerA = this.layerOrderMap.get(a.layerId) ?? 0;
+      const layerB = this.layerOrderMap.get(b.layerId) ?? 0;
+      if (layerA !== layerB) return layerA - layerB;
+      return a.zIndex - b.zIndex;
+    });
+  }
+  queryPoint(point) {
+    return this.queryRect({ x: point.x, y: point.y, w: 0, h: 0 });
+  }
+  on(event, listener) {
+    return this.bus.on(event, listener);
+  }
+  onChange(listener) {
+    const unsubs = [
+      this.bus.on("add", listener),
+      this.bus.on("remove", listener),
+      this.bus.on("update", listener),
+      this.bus.on("clear", listener)
+    ];
+    return () => unsubs.forEach((fn) => fn());
+  }
+};
+
 // src/elements/arrow-binding.ts
 var BINDABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html", "shape"]);
 function isBindable(element) {
@@ -849,15 +1189,6 @@ function getElementCenter(element) {
     y: element.position.y + element.size.h / 2
   };
 }
-function getElementBounds(element) {
-  if (!("size" in element)) return null;
-  return {
-    x: element.position.x,
-    y: element.position.y,
-    w: element.size.w,
-    h: element.size.h
-  };
-}
 function getEdgeIntersection(bounds, outsidePoint) {
   const cx = bounds.x + bounds.w / 2;
   const cy = bounds.y + bounds.h / 2;
@@ -1037,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: [] };
@@ -1201,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);
@@ -1224,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);
@@ -1365,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;
   }
 };
@@ -1749,6 +2119,7 @@ function createNote(input) {
   };
 }
 function createArrow(input) {
+  const bend = input.bend ?? 0;
   const result = {
     id: createId("arrow"),
     type: "arrow",
@@ -1758,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;
@@ -2011,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;
@@ -2448,6 +2820,41 @@ var DomNodeManager = class {
   }
 };
 
+// src/canvas/render-stats.ts
+var SAMPLE_SIZE = 60;
+var RenderStats = class {
+  frameTimes = [];
+  frameCount = 0;
+  recordFrame(durationMs) {
+    this.frameCount++;
+    this.frameTimes.push(durationMs);
+    if (this.frameTimes.length > SAMPLE_SIZE) {
+      this.frameTimes.shift();
+    }
+  }
+  getSnapshot() {
+    const times = this.frameTimes;
+    if (times.length === 0) {
+      return { fps: 0, avgFrameMs: 0, p95FrameMs: 0, lastFrameMs: 0, frameCount: 0 };
+    }
+    const avg = times.reduce((a, b) => a + b, 0) / times.length;
+    const sorted = [...times].sort((a, b) => a - b);
+    const p95Index = Math.min(Math.floor(sorted.length * 0.95), sorted.length - 1);
+    const lastFrame = times[times.length - 1] ?? 0;
+    return {
+      fps: avg > 0 ? Math.round(1e3 / avg) : 0,
+      avgFrameMs: Math.round(avg * 100) / 100,
+      p95FrameMs: Math.round((sorted[p95Index] ?? 0) * 100) / 100,
+      lastFrameMs: Math.round(lastFrame * 100) / 100,
+      frameCount: this.frameCount
+    };
+  }
+  reset() {
+    this.frameTimes = [];
+    this.frameCount = 0;
+  }
+};
+
 // src/canvas/render-loop.ts
 var RenderLoop = class {
   needsRender = false;
@@ -2460,6 +2867,12 @@ var RenderLoop = class {
   toolManager;
   layerManager;
   domNodeManager;
+  layerCache;
+  activeDrawingLayerId = null;
+  lastZoom;
+  lastCamX;
+  lastCamY;
+  stats = new RenderStats();
   constructor(deps) {
     this.canvasEl = deps.canvasEl;
     this.camera = deps.camera;
@@ -2469,6 +2882,10 @@ var RenderLoop = class {
     this.toolManager = deps.toolManager;
     this.layerManager = deps.layerManager;
     this.domNodeManager = deps.domNodeManager;
+    this.layerCache = deps.layerCache;
+    this.lastZoom = deps.camera.zoom;
+    this.lastCamX = deps.camera.position.x;
+    this.lastCamY = deps.camera.position.y;
   }
   requestRender() {
     this.needsRender = true;
@@ -2495,19 +2912,63 @@ var RenderLoop = class {
   setCanvasSize(width, height) {
     this.canvasEl.width = width;
     this.canvasEl.height = height;
+    this.layerCache.resize(this.canvasEl.clientWidth, this.canvasEl.clientHeight);
+  }
+  setActiveDrawingLayer(layerId) {
+    this.activeDrawingLayerId = layerId;
+  }
+  markLayerDirty(layerId) {
+    this.layerCache.markDirty(layerId);
+  }
+  markAllLayersDirty() {
+    this.layerCache.markAllDirty();
+  }
+  getStats() {
+    return this.stats.getSnapshot();
+  }
+  compositeLayerCache(ctx, layerId, dpr) {
+    const cached = this.layerCache.getCanvas(layerId);
+    ctx.save();
+    ctx.scale(1 / this.camera.zoom, 1 / this.camera.zoom);
+    ctx.translate(-this.camera.position.x, -this.camera.position.y);
+    ctx.scale(1 / dpr, 1 / dpr);
+    ctx.drawImage(cached, 0, 0);
+    ctx.restore();
   }
   render() {
+    const t0 = performance.now();
     const ctx = this.canvasEl.getContext("2d");
     if (!ctx) return;
     const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    const cssWidth = this.canvasEl.clientWidth;
+    const cssHeight = this.canvasEl.clientHeight;
+    const currentZoom = this.camera.zoom;
+    const currentCamX = this.camera.position.x;
+    const currentCamY = this.camera.position.y;
+    if (currentZoom !== this.lastZoom || currentCamX !== this.lastCamX || currentCamY !== this.lastCamY) {
+      this.layerCache.markAllDirty();
+      this.lastZoom = currentZoom;
+      this.lastCamX = currentCamX;
+      this.lastCamY = currentCamY;
+    }
     ctx.save();
     ctx.scale(dpr, dpr);
-    this.renderer.setCanvasSize(this.canvasEl.clientWidth, this.canvasEl.clientHeight);
+    this.renderer.setCanvasSize(cssWidth, cssHeight);
     this.background.render(ctx, this.camera);
     ctx.save();
     ctx.translate(this.camera.position.x, this.camera.position.y);
     ctx.scale(this.camera.zoom, this.camera.zoom);
+    const visibleRect = this.camera.getVisibleRect(cssWidth, cssHeight);
+    const margin = Math.max(visibleRect.w, visibleRect.h) * 0.1;
+    const cullingRect = {
+      x: visibleRect.x - margin,
+      y: visibleRect.y - margin,
+      w: visibleRect.w + margin * 2,
+      h: visibleRect.h + margin * 2
+    };
     const allElements = this.store.getAll();
+    const layerElements = /* @__PURE__ */ new Map();
+    const gridElements = [];
     let domZIndex = 0;
     for (const element of allElements) {
       if (!this.layerManager.isLayerVisible(element.layerId)) {
@@ -2517,9 +2978,54 @@ var RenderLoop = class {
         continue;
       }
       if (this.renderer.isDomElement(element)) {
-        this.domNodeManager.syncDomNode(element, domZIndex++);
-      } else {
-        this.renderer.renderCanvasElement(ctx, element);
+        const elBounds = getElementBounds(element);
+        if (elBounds && !boundsIntersect(elBounds, cullingRect)) {
+          this.domNodeManager.hideDomNode(element.id);
+        } else {
+          this.domNodeManager.syncDomNode(element, domZIndex++);
+        }
+        continue;
+      }
+      if (element.type === "grid") {
+        gridElements.push(element);
+        continue;
+      }
+      let group = layerElements.get(element.layerId);
+      if (!group) {
+        group = [];
+        layerElements.set(element.layerId, group);
+      }
+      group.push(element);
+    }
+    for (const grid of gridElements) {
+      this.renderer.renderCanvasElement(ctx, grid);
+    }
+    for (const [layerId, elements] of layerElements) {
+      const isActiveDrawingLayer = layerId === this.activeDrawingLayerId;
+      if (!this.layerCache.isDirty(layerId)) {
+        this.compositeLayerCache(ctx, layerId, dpr);
+        continue;
+      }
+      if (isActiveDrawingLayer) {
+        this.compositeLayerCache(ctx, layerId, dpr);
+        continue;
+      }
+      const offCtx = this.layerCache.getContext(layerId);
+      if (offCtx) {
+        const offCanvas = this.layerCache.getCanvas(layerId);
+        offCtx.clearRect(0, 0, offCanvas.width, offCanvas.height);
+        offCtx.save();
+        offCtx.scale(dpr, dpr);
+        offCtx.translate(this.camera.position.x, this.camera.position.y);
+        offCtx.scale(this.camera.zoom, this.camera.zoom);
+        for (const element of elements) {
+          const elBounds = getElementBounds(element);
+          if (elBounds && !boundsIntersect(elBounds, cullingRect)) continue;
+          this.renderer.renderCanvasElement(offCtx, element);
+        }
+        offCtx.restore();
+        this.layerCache.markClean(layerId);
+        this.compositeLayerCache(ctx, layerId, dpr);
       }
     }
     const activeTool = this.toolManager.activeTool;
@@ -2528,6 +3034,70 @@ var RenderLoop = class {
     }
     ctx.restore();
     ctx.restore();
+    this.stats.recordFrame(performance.now() - t0);
+  }
+};
+
+// src/canvas/layer-cache.ts
+function createOffscreenCanvas(width, height) {
+  if (typeof OffscreenCanvas !== "undefined") {
+    return new OffscreenCanvas(width, height);
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
+var LayerCache = class {
+  canvases = /* @__PURE__ */ new Map();
+  dirtyFlags = /* @__PURE__ */ new Map();
+  width;
+  height;
+  constructor(width, height) {
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    this.width = Math.round(width * dpr);
+    this.height = Math.round(height * dpr);
+  }
+  isDirty(layerId) {
+    return this.dirtyFlags.get(layerId) !== false;
+  }
+  markDirty(layerId) {
+    this.dirtyFlags.set(layerId, true);
+  }
+  markClean(layerId) {
+    this.dirtyFlags.set(layerId, false);
+  }
+  markAllDirty() {
+    for (const [id] of this.dirtyFlags) {
+      this.dirtyFlags.set(id, true);
+    }
+  }
+  getCanvas(layerId) {
+    let canvas = this.canvases.get(layerId);
+    if (!canvas) {
+      canvas = createOffscreenCanvas(this.width, this.height);
+      this.canvases.set(layerId, canvas);
+      this.dirtyFlags.set(layerId, true);
+    }
+    return canvas;
+  }
+  getContext(layerId) {
+    const canvas = this.getCanvas(layerId);
+    return canvas.getContext("2d");
+  }
+  resize(width, height) {
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    this.width = Math.round(width * dpr);
+    this.height = Math.round(height * dpr);
+    for (const [id, canvas] of this.canvases) {
+      canvas.width = this.width;
+      canvas.height = this.height;
+      this.dirtyFlags.set(id, true);
+    }
+  }
+  clear() {
+    this.canvases.clear();
+    this.dirtyFlags.clear();
   }
 };
 
@@ -2584,6 +3154,10 @@ var Viewport = class {
     this.interactMode = new InteractMode({
       getNode: (id) => this.domNodeManager.getNode(id)
     });
+    const layerCache = new LayerCache(
+      this.canvasEl.clientWidth || 800,
+      this.canvasEl.clientHeight || 600
+    );
     this.renderLoop = new RenderLoop({
       canvasEl: this.canvasEl,
       camera: this.camera,
@@ -2592,22 +3166,34 @@ var Viewport = class {
       renderer: this.renderer,
       toolManager: this.toolManager,
       layerManager: this.layerManager,
-      domNodeManager: this.domNodeManager
+      domNodeManager: this.domNodeManager,
+      layerCache
     });
     this.unsubCamera = this.camera.onChange(() => {
       this.applyCameraTransform();
       this.requestRender();
     });
     this.unsubStore = [
-      this.store.on("add", () => this.requestRender()),
+      this.store.on("add", (el) => {
+        this.renderLoop.markLayerDirty(el.layerId);
+        this.requestRender();
+      }),
       this.store.on("remove", (el) => {
         this.unbindArrowsFrom(el);
         this.domNodeManager.removeDomNode(el.id);
+        this.renderLoop.markLayerDirty(el.layerId);
+        this.requestRender();
+      }),
+      this.store.on("update", ({ previous, current }) => {
+        this.renderLoop.markLayerDirty(current.layerId);
+        if (previous.layerId !== current.layerId) {
+          this.renderLoop.markLayerDirty(previous.layerId);
+        }
         this.requestRender();
       }),
-      this.store.on("update", () => this.requestRender()),
       this.store.on("clear", () => {
         this.domNodeManager.clearDomNodes();
+        this.renderLoop.markAllLayersDirty();
         this.requestRender();
       })
     ];
@@ -2813,8 +3399,8 @@ var Viewport = class {
     }
   };
   hitTestWorld(world) {
-    const elements = this.store.getAll().reverse();
-    for (const el of elements) {
+    const candidates = this.store.queryPoint(world).reverse();
+    for (const el of candidates) {
       if (!("size" in el)) continue;
       const { x, y } = el.position;
       const { w, h } = el.size;
@@ -2965,6 +3551,9 @@ var HandTool = class {
 var MIN_POINTS_FOR_STROKE = 2;
 var DEFAULT_SMOOTHING = 1.5;
 var DEFAULT_PRESSURE = 0.5;
+var DEFAULT_MIN_POINT_DISTANCE = 3;
+var DEFAULT_PROGRESSIVE_THRESHOLD = 200;
+var PROGRESSIVE_HOT_ZONE = 30;
 var PencilTool = class {
   name = "pencil";
   drawing = false;
@@ -2972,11 +3561,17 @@ var PencilTool = class {
   color;
   width;
   smoothing;
+  minPointDistance;
+  progressiveThreshold;
+  nextSimplifyAt;
   optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     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;
   }
   onActivate(ctx) {
     ctx.setCursor?.("crosshair");
@@ -2985,7 +3580,13 @@ var PencilTool = class {
     ctx.setCursor?.("default");
   }
   getOptions() {
-    return { color: this.color, width: this.width, smoothing: this.smoothing };
+    return {
+      color: this.color,
+      width: this.width,
+      smoothing: this.smoothing,
+      minPointDistance: this.minPointDistance,
+      progressiveSimplifyThreshold: this.progressiveThreshold
+    };
   }
   onOptionsChange(listener) {
     this.optionListeners.add(listener);
@@ -2995,6 +3596,9 @@ var PencilTool = class {
     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;
+    if (options.minPointDistance !== void 0) this.minPointDistance = options.minPointDistance;
+    if (options.progressiveSimplifyThreshold !== void 0)
+      this.progressiveThreshold = options.progressiveSimplifyThreshold;
     this.notifyOptionsChange();
   }
   onPointerDown(state, ctx) {
@@ -3002,12 +3606,26 @@ var PencilTool = class {
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     const pressure = state.pressure === 0 ? DEFAULT_PRESSURE : state.pressure;
     this.points = [{ x: world.x, y: world.y, pressure }];
+    this.nextSimplifyAt = this.progressiveThreshold;
   }
   onPointerMove(state, ctx) {
     if (!this.drawing) return;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     const pressure = state.pressure === 0 ? DEFAULT_PRESSURE : state.pressure;
+    const last = this.points[this.points.length - 1];
+    if (last) {
+      const dx = world.x - last.x;
+      const dy = world.y - last.y;
+      if (dx * dx + dy * dy < this.minPointDistance * this.minPointDistance) return;
+    }
     this.points.push({ x: world.x, y: world.y, pressure });
+    if (this.points.length > this.nextSimplifyAt) {
+      const hotZone = this.points.slice(-PROGRESSIVE_HOT_ZONE);
+      const coldZone = this.points.slice(0, -PROGRESSIVE_HOT_ZONE);
+      const simplified = simplifyPoints(coldZone, this.smoothing * 2);
+      this.points = [...simplified, ...hotZone];
+      this.nextSimplifyAt = this.points.length + this.progressiveThreshold;
+    }
     ctx.requestRender();
   }
   onPointerUp(_state, ctx) {
@@ -3025,6 +3643,7 @@ var PencilTool = class {
       layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(stroke);
+    computeStrokeSegments(stroke);
     this.points = [];
     ctx.requestRender();
   }
@@ -3089,13 +3708,20 @@ var EraserTool = class {
   }
   eraseAt(state, ctx) {
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    const strokes = ctx.store.getElementsByType("stroke");
+    const queryBounds = {
+      x: world.x - this.radius,
+      y: world.y - this.radius,
+      w: this.radius * 2,
+      h: this.radius * 2
+    };
+    const candidates = ctx.store.queryRect(queryBounds);
     let erased = false;
-    for (const stroke of strokes) {
-      if (ctx.isLayerVisible && !ctx.isLayerVisible(stroke.layerId)) continue;
-      if (ctx.isLayerLocked && ctx.isLayerLocked(stroke.layerId)) continue;
-      if (this.strokeIntersects(stroke, world)) {
-        ctx.store.remove(stroke.id);
+    for (const el of candidates) {
+      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)) {
+        ctx.store.remove(el.id);
         erased = true;
       }
     }
@@ -3472,7 +4098,7 @@ var SelectTool = class {
     for (const id of this._selectedIds) {
       const el = ctx.store.getById(id);
       if (!el || !("size" in el)) continue;
-      const bounds = this.getElementBounds(el);
+      const bounds = getElementBounds(el);
       if (!bounds) continue;
       const corners = this.getHandlePositions(bounds);
       for (const [handle, pos] of corners) {
@@ -3520,7 +4146,7 @@ var SelectTool = class {
         this.renderBindingHighlights(canvasCtx, el, zoom);
         continue;
       }
-      const bounds = this.getElementBounds(el);
+      const bounds = getElementBounds(el);
       if (!bounds) continue;
       const pad = SELECTION_PAD / zoom;
       canvasCtx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
@@ -3579,12 +4205,13 @@ var SelectTool = class {
     return { x, y, w, h };
   }
   findElementsInRect(marquee, ctx) {
+    const candidates = ctx.store.queryRect(marquee);
     const ids = [];
-    for (const el of ctx.store.getAll()) {
+    for (const el of candidates) {
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
       if (el.type === "grid") continue;
-      const bounds = this.getElementBounds(el);
+      const bounds = getElementBounds(el);
       if (bounds && this.rectsOverlap(marquee, bounds)) {
         ids.push(el.id);
       }
@@ -3594,30 +4221,10 @@ var SelectTool = class {
   rectsOverlap(a, b) {
     return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
   }
-  getElementBounds(el) {
-    if ("size" in el) {
-      return { x: el.position.x, y: el.position.y, w: el.size.w, h: el.size.h };
-    }
-    if (el.type === "stroke" && el.points.length > 0) {
-      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-      for (const p of el.points) {
-        const px = p.x + el.position.x;
-        const py = p.y + el.position.y;
-        if (px < minX) minX = px;
-        if (py < minY) minY = py;
-        if (px > maxX) maxX = px;
-        if (py > maxY) maxY = py;
-      }
-      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-    }
-    if (el.type === "arrow") {
-      return getArrowBounds(el.from, el.to, el.bend);
-    }
-    return null;
-  }
   hitTest(world, ctx) {
-    const elements = ctx.store.getAll().reverse();
-    for (const el of elements) {
+    const r = 10;
+    const candidates = ctx.store.queryRect({ x: world.x - r, y: world.y - r, w: r * 2, h: r * 2 }).reverse();
+    for (const el of candidates) {
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
       if (el.type === "grid") continue;
@@ -4111,7 +4718,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.6";
+var VERSION = "0.8.8";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -4134,6 +4741,7 @@ var VERSION = "0.8.6";
   NoteEditor,
   NoteTool,
   PencilTool,
+  Quadtree,
   RemoveElementCommand,
   RemoveLayerCommand,
   SelectTool,
@@ -4144,6 +4752,7 @@ var VERSION = "0.8.6";
   UpdateLayerCommand,
   VERSION,
   Viewport,
+  boundsIntersect,
   clearStaleBindings,
   createArrow,
   createGrid,