@fieldnotes/core 0.8.6 → 0.8.7

package/dist/index.js

@@ -22,6 +22,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 = []) {
@@ -236,16 +383,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);
@@ -253,7 +400,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 {
@@ -267,6 +414,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})`;
   }
@@ -274,8 +431,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 }));
   }
 };
 
@@ -581,77 +744,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;
@@ -752,6 +844,185 @@ 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 };
+    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) {
@@ -766,15 +1037,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;
@@ -2365,6 +2627,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;
@@ -2377,6 +2674,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;
@@ -2386,6 +2689,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;
@@ -2412,19 +2719,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)) {
@@ -2434,9 +2785,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;
@@ -2445,6 +2841,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();
   }
 };
 
@@ -2501,6 +2961,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,
@@ -2509,22 +2973,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();
       })
     ];
@@ -2730,8 +3206,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;
@@ -2882,6 +3358,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;
@@ -2889,11 +3368,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");
@@ -2902,7 +3387,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);
@@ -2912,6 +3403,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) {
@@ -2919,12 +3413,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) {
@@ -3006,13 +3514,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;
       }
     }
@@ -3389,7 +3904,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) {
@@ -3437,7 +3952,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);
@@ -3496,12 +4011,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);
       }
@@ -3511,30 +4027,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;
@@ -4028,7 +4524,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.6";
+var VERSION = "0.8.7";
 export {
   AddElementCommand,
   ArrowTool,
@@ -4050,6 +4546,7 @@ export {
   NoteEditor,
   NoteTool,
   PencilTool,
+  Quadtree,
   RemoveElementCommand,
   RemoveLayerCommand,
   SelectTool,
@@ -4060,6 +4557,7 @@ export {
   UpdateLayerCommand,
   VERSION,
   Viewport,
+  boundsIntersect,
   clearStaleBindings,
   createArrow,
   createGrid,