@vanduo-oss/vd3-cbun 1.4.0 → 1.4.2

package/dist/draw/index.js

@@ -257,6 +257,37 @@ function simplifyPoints(points, min = 1.2) {
   }
   return out;
 }
+function smoothPoint(prev, next, factor = 0.5) {
+  const f = clamp(factor, 0.1, 1);
+  const x = round(prev[0] + (next[0] - prev[0]) * f);
+  const y = round(prev[1] + (next[1] - prev[1]) * f);
+  const hasPressure = prev.length >= 3 && prev[2] != null || next.length >= 3 && next[2] != null;
+  if (hasPressure) {
+    const pp = prev.length >= 3 && prev[2] != null ? prev[2] : 0.5;
+    const np = next.length >= 3 && next[2] != null ? next[2] : 0.5;
+    return [x, y, clamp(pp + (np - pp) * f, 0, 1)];
+  }
+  return [x, y];
+}
+function appendAndSimplify(points, point, minDist = 1.5, maxLen = 500) {
+  if (!points.length) {
+    points.push(roundPoint(point));
+    return points;
+  }
+  const last = points[points.length - 1];
+  if (Math.hypot(point[0] - last[0], point[1] - last[1]) < minDist) return points;
+  points.push(roundPoint(point));
+  if (points.length > maxLen) {
+    const first = points[0];
+    const end = points[points.length - 1];
+    const kept = [first];
+    for (let i = 2; i < points.length - 1; i += 2) kept.push(points[i]);
+    kept.push(end);
+    points.length = 0;
+    for (const p of kept) points.push(p);
+  }
+  return points;
+}
 function streamlinePoints(points, streamline) {
   const first = points[0];
   const out = [[first[0], first[1], first[2] == null ? 0.5 : clamp(first[2], 0, 1)]];
@@ -471,6 +502,55 @@ function normalizeDocument(data) {
     shapes
   };
 }
+function wrapText(text, maxWidth, charWidth = 8.8) {
+  if (typeof text !== "string" || text.length === 0) return [];
+  const rawLines = text.split(/\r?\n/);
+  if (!maxWidth || maxWidth <= 0 || !Number.isFinite(maxWidth)) {
+    return rawLines;
+  }
+  const maxChars = Math.max(1, Math.floor(maxWidth / charWidth));
+  const result = [];
+  for (const rawLine of rawLines) {
+    if (rawLine.length <= maxChars) {
+      result.push(rawLine);
+      continue;
+    }
+    const words = rawLine.split(" ");
+    let currentLine = "";
+    for (const word of words) {
+      if (!currentLine) {
+        if (word.length <= maxChars) {
+          currentLine = word;
+        } else {
+          let remaining = word;
+          while (remaining.length > maxChars) {
+            result.push(remaining.slice(0, maxChars));
+            remaining = remaining.slice(maxChars);
+          }
+          currentLine = remaining;
+        }
+      } else {
+        if (currentLine.length + 1 + word.length <= maxChars) {
+          currentLine += " " + word;
+        } else {
+          result.push(currentLine);
+          if (word.length <= maxChars) {
+            currentLine = word;
+          } else {
+            let remaining = word;
+            while (remaining.length > maxChars) {
+              result.push(remaining.slice(0, maxChars));
+              remaining = remaining.slice(maxChars);
+            }
+            currentLine = remaining;
+          }
+        }
+      }
+    }
+    if (currentLine) result.push(currentLine);
+  }
+  return result;
+}
 
 // src/draw/core.js
 var SVG_NS = "http://www.w3.org/2000/svg";
@@ -596,6 +676,15 @@ var VdDraw = class {
     this.lastReason = null;
     this.lastTargetKey = null;
     this.listeners = /* @__PURE__ */ new Map();
+    this.options = { ...opts };
+    this._shapesById = /* @__PURE__ */ new Map();
+    this._rebuildShapeIndex();
+    this._activePointers = /* @__PURE__ */ new Map();
+    this._shapeElements = /* @__PURE__ */ new Map();
+    this._dirtyShapes = /* @__PURE__ */ new Set();
+    this._allDirty = true;
+    this._rafId = null;
+    this._pendingFlags = null;
     this._buildShell();
     if (typeof opts.color !== "string") this.style.color = this._resolveInk();
     this._bindEvents();
@@ -604,6 +693,12 @@ var VdDraw = class {
     this._syncStylePanel();
     this._scheduleReady();
   }
+  _rebuildShapeIndex() {
+    this._shapesById.clear();
+    for (const s of this.documentData.shapes) {
+      this._shapesById.set(s.id, s);
+    }
+  }
   _resolveElement(target) {
     if (!target) return null;
     if (typeof target === "string") return hasWindow() ? document.querySelector(target) : null;
@@ -637,11 +732,13 @@ var VdDraw = class {
     }
     this.canvasEl = document.createElement("div");
     this.canvasEl.className = "vd-draw-canvas";
+    this.canvasEl.setAttribute("data-tool", this.tool);
     this.canvasEl.tabIndex = 0;
     this.svg = createSvgEl("svg", { class: "vd-draw-svg" });
     this.svg.setAttribute("width", "100%");
     this.svg.setAttribute("height", "100%");
     const defs = createSvgEl("defs");
+    this.defsEl = defs;
     const gs = this.gridSize;
     this.gridPattern = createSvgEl("pattern", {
       id: this._svgId("grid"),
@@ -657,19 +754,7 @@ var VdDraw = class {
     });
     this.gridPattern.appendChild(this.gridPatternPath);
     defs.appendChild(this.gridPattern);
-    const marker = createSvgEl("marker", {
-      id: this._svgId("arrow"),
-      viewBox: "0 0 10 10",
-      refX: 8,
-      refY: 5,
-      markerWidth: 7,
-      markerHeight: 7,
-      orient: "auto-start-reverse"
-    });
-    marker.appendChild(
-      createSvgEl("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "var(--vd-draw-shape-stroke)" })
-    );
-    defs.appendChild(marker);
+    this._getArrowMarkerId("", defs);
     this.svg.appendChild(defs);
     this.world = createSvgEl("g", { class: "vd-draw-world" });
     this.gridLayer = createSvgEl("rect", {
@@ -960,11 +1045,11 @@ var VdDraw = class {
     this._emitViewportChange("viewport:reset");
     return this;
   }
-  fitView() {
+  fitView(padding = 40) {
     const bounds = boundsOfShapes(this.documentData.shapes);
     const rect = this.canvasEl.getBoundingClientRect();
     if (!bounds || bounds.w === 0 || bounds.h === 0 || !rect.width || !rect.height) return this;
-    const pad = 40;
+    const pad = Number.isFinite(padding) ? Math.max(0, padding) : 40;
     const scale = clamp(
       Math.min((rect.width - pad * 2) / bounds.w, (rect.height - pad * 2) / bounds.h),
       MIN_SCALE,
@@ -1006,10 +1091,65 @@ var VdDraw = class {
   toggleGrid() {
     return this.setGridVisible(!this.showGrid);
   }
+  // ── Runtime options ──────────────────────────────────────────────────────
+  setReadonly(readonly) {
+    const next = Boolean(readonly);
+    if (this.readonly === next) return this;
+    this.readonly = next;
+    this.options.readonly = next;
+    if (this.element) {
+      if (next) this.element.setAttribute("data-readonly", "true");
+      else this.element.removeAttribute("data-readonly");
+    }
+    if (next) {
+      this.stopTextEdit({ commit: true });
+      this.deselect();
+      if (this.toolbarEl) this.toolbarEl.style.display = "none";
+      if (this.panelEl) this.panelEl.style.display = "none";
+    } else {
+      if (this.toolbarEl && !this.toolbarEl.children.length) {
+        this._buildToolbar();
+      }
+      if (this.panelEl && !this.panelEl.children.length) {
+        this._buildStylePanel();
+      }
+      if (this.toolbarEl) this.toolbarEl.style.display = "";
+      if (this.panelEl) this.panelEl.style.display = "";
+      this._syncToolbar();
+      this._syncStylePanel();
+    }
+    this.render({ scene: false, overlay: true });
+    return this;
+  }
+  setSnap(snap) {
+    this.snap = Boolean(snap);
+    this.options.snap = this.snap;
+    return this;
+  }
+  setHistoryEnabled(enabled) {
+    this.historyEnabled = Boolean(enabled);
+    this.options.history = this.historyEnabled;
+    if (!this.historyEnabled) {
+      this.clearHistory();
+    }
+    return this;
+  }
+  setHistoryLimit(limit) {
+    const num = Number(limit);
+    this.historyLimit = Number.isFinite(num) && num > 0 ? num : 100;
+    this.options.historyLimit = this.historyLimit;
+    if (this.history.length > this.historyLimit + 1) {
+      const drop = this.history.length - (this.historyLimit + 1);
+      this.history.splice(0, drop);
+      this.historyIndex = Math.max(0, this.historyIndex - drop);
+    }
+    return this;
+  }
   // ── Tool + current style ─────────────────────────────────────────────────
   setTool(tool) {
     if (!DRAW_TOOLS.includes(tool)) return this;
     this.tool = tool;
+    if (this.canvasEl) this.canvasEl.setAttribute("data-tool", tool);
     this._syncToolbar();
     return this;
   }
@@ -1043,7 +1183,7 @@ var VdDraw = class {
   }
   // ── Shape CRUD ─────────────────────────────────────────────────────────
   getShape(id) {
-    return this.documentData.shapes.find((s) => s.id === id) || null;
+    return this._shapesById.get(id) || null;
   }
   getShapes() {
     return this.documentData.shapes.map((s) => deepClone(s));
@@ -1095,6 +1235,8 @@ var VdDraw = class {
         shape.text = typeof partial.text === "string" ? partial.text : "";
     }
     this.documentData.shapes.push(shape);
+    this._shapesById.set(shape.id, shape);
+    this._markDirty(shape.id);
     this.render();
     this._emitChange("shape:add", { shape: deepClone(shape), shapeId: shape.id });
     return shape;
@@ -1108,6 +1250,8 @@ var VdDraw = class {
     const shape = this.getShape(id);
     if (!shape || !patch) return null;
     Object.assign(shape, patch);
+    this._shapesById.set(id, shape);
+    this._markDirty(id);
     this.render();
     this._emitChange(options.reason || "shape:update", { shapeId: id }, options.reason ? id : null);
     return shape;
@@ -1116,7 +1260,9 @@ var VdDraw = class {
     const idx = this.documentData.shapes.findIndex((s) => s.id === id);
     if (idx === -1) return false;
     this.documentData.shapes.splice(idx, 1);
+    this._shapesById.delete(id);
     this.selectedIds.delete(id);
+    this._markDirty(id);
     this.render();
     this._emitChange("shape:delete", { shapeId: id });
     return true;
@@ -1183,11 +1329,13 @@ var VdDraw = class {
   _replaceShape(next) {
     const idx = this.documentData.shapes.findIndex((s) => s.id === next.id);
     if (idx !== -1) this.documentData.shapes[idx] = next;
+    this._shapesById.set(next.id, next);
   }
   nudge(dx, dy) {
     const selected = this.getSelectedShapes();
     if (!selected.length) return this;
     for (const shape of selected) this._replaceShape(translateShape(shape, dx, dy));
+    this._markAllDirty();
     this.render();
     this._emitChange(
       "shape:nudge",
@@ -1206,6 +1354,7 @@ var VdDraw = class {
       const scaled = scaleShape(shape, cur.x, cur.y, sx, sy);
       this._replaceShape(translateShape(scaled, target.x - cur.x, target.y - cur.y));
     }
+    this._markAllDirty();
     this.render();
     this._emitChange("shape:resize", { shapeIds: [...this.selectedIds] });
     return this;
@@ -1213,8 +1362,10 @@ var VdDraw = class {
   deleteSelection() {
     if (this.selectedIds.size === 0) return false;
     const ids = [...this.selectedIds];
+    for (const id of ids) this._shapesById.delete(id);
     this.documentData.shapes = this.documentData.shapes.filter((s) => !this.selectedIds.has(s.id));
     this.selectedIds.clear();
+    this._markAllDirty();
     this.render();
     this._emitChange("shape:delete", { shapeIds: ids });
     return true;
@@ -1226,6 +1377,7 @@ var VdDraw = class {
     for (const shape of selected) {
       for (const key of allowed) if (key in patch) shape[key] = patch[key];
     }
+    this._markAllDirty();
     this.render();
     this._emitChange(
       "shape:style",
@@ -1238,6 +1390,7 @@ var VdDraw = class {
   _reorder(mutator) {
     if (this.selectedIds.size === 0) return this;
     mutator();
+    this._markAllDirty();
     this.render();
     this._emitChange("shape:reorder", { shapeIds: [...this.selectedIds] });
     return this;
@@ -1280,6 +1433,7 @@ var VdDraw = class {
     if (selected.length < 2) return this;
     const groupId = createId("grp");
     for (const shape of selected) shape.groupId = groupId;
+    this._markAllDirty();
     this.render();
     this._emitChange("shape:group", { groupId, shapeIds: [...this.selectedIds] });
     return this;
@@ -1294,6 +1448,7 @@ var VdDraw = class {
       }
     }
     if (!changed) return this;
+    this._markAllDirty();
     this.render();
     this._emitChange("shape:ungroup", { shapeIds: [...this.selectedIds] });
     return this;
@@ -1320,9 +1475,11 @@ var VdDraw = class {
         copy.groupId = groupRemap.get(copy.groupId);
       }
       this.documentData.shapes.push(copy);
+      this._shapesById.set(copy.id, copy);
       newIds.push(copy.id);
     }
     this.selectedIds = new Set(newIds);
+    this._markAllDirty();
     this.render();
     this._emitChange("shape:paste", { shapeIds: newIds });
     this._emitSelect();
@@ -1384,6 +1541,30 @@ var VdDraw = class {
       sticky: read("--vd-draw-sticky-fill", "#fdf3c4")
     };
   }
+  _getArrowMarkerId(color, defsTarget = this.defsEl) {
+    const isDefault = !color;
+    const safeKey = isDefault ? "arrow" : "arrow-" + color.toLowerCase().replace(/[^a-z0-9_-]/g, "_");
+    const id = this._svgId(safeKey);
+    if (defsTarget && !defsTarget.querySelector(`#${id}`)) {
+      const marker = createSvgEl("marker", {
+        id,
+        viewBox: "0 0 10 10",
+        refX: 8,
+        refY: 5,
+        markerWidth: 7,
+        markerHeight: 7,
+        orient: "auto-start-reverse"
+      });
+      marker.appendChild(
+        createSvgEl("path", {
+          d: "M 0 0 L 10 5 L 0 10 z",
+          fill: color || "var(--vd-draw-shape-stroke)"
+        })
+      );
+      defsTarget.appendChild(marker);
+    }
+    return id;
+  }
   toSVG() {
     const shapes = this.documentData.shapes;
     const bounds = boundsOfShapes(shapes) || { x: 0, y: 0, w: 100, h: 100 };
@@ -1401,10 +1582,14 @@ var VdDraw = class {
       height: round(vb.h),
       viewBox: `${round(vb.x)} ${round(vb.y)} ${round(vb.w)} ${round(vb.h)}`
     });
+    const defs = createSvgEl("defs");
     for (const shape of shapes) {
-      const el = this._renderShapeEl(shape, { standalone: true, colors });
+      const el = this._renderShapeEl(shape, { standalone: true, colors, defsTarget: defs });
       if (el) svg.appendChild(el);
     }
+    if (defs.childNodes.length > 0) {
+      svg.insertBefore(defs, svg.firstChild);
+    }
     return new XMLSerializer().serializeToString(svg);
   }
   toPNG({ scale = 2 } = {}) {
@@ -1498,7 +1683,9 @@ var VdDraw = class {
     const viewport = { ...this.documentData.viewport };
     this.documentData = deepClone(snapshot);
     this.documentData.viewport = viewport;
+    this._rebuildShapeIndex();
     this._syncSelectionValidity();
+    this._markAllDirty();
     this.render();
     this.emit("change", { reason, document: this.toJSON() });
     this.emit("history", { reason, canUndo: this.canUndo(), canRedo: this.canRedo() });
@@ -1514,8 +1701,10 @@ var VdDraw = class {
   }
   load(data) {
     this.documentData = normalizeDocument(data);
+    this._rebuildShapeIndex();
     this.selectedIds.clear();
     this._resetHistory();
+    this._markAllDirty();
     this.render();
     this._emitChange("load");
     this._emitSelect();
@@ -1524,7 +1713,9 @@ var VdDraw = class {
   clear() {
     if (!this.documentData.shapes.length) return this;
     this.documentData.shapes = [];
+    this._shapesById.clear();
     this.selectedIds.clear();
+    this._markAllDirty();
     this.render();
     this._emitChange("clear");
     return this;
@@ -1549,10 +1740,16 @@ var VdDraw = class {
   }
   _positionTextEditor(shape, editor) {
     const vp = this.documentData.viewport;
-    editor.style.left = `${vp.x + shape.x * vp.scale}px`;
-    editor.style.top = `${vp.y + shape.y * vp.scale}px`;
-    editor.style.width = `${shape.w * vp.scale}px`;
-    editor.style.height = `${shape.h * vp.scale}px`;
+    const scale = vp.scale || 1;
+    editor.style.left = `${vp.x + shape.x * scale}px`;
+    editor.style.top = `${vp.y + shape.y * scale}px`;
+    editor.style.width = `${shape.w * scale}px`;
+    editor.style.height = `${shape.h * scale}px`;
+    editor.style.fontSize = `${16 * scale}px`;
+    editor.style.lineHeight = `${20 * scale}px`;
+    if (shape.type === "sticky") {
+      editor.style.background = shape.fill || "var(--vd-draw-sticky-fill)";
+    }
   }
   stopTextEdit({ commit = true } = {}) {
     if (!this.textEditor) return;
@@ -1564,6 +1761,7 @@ var VdDraw = class {
       const shape = this.getShape(id);
       if (shape && shape.text !== value) {
         shape.text = value;
+        this._markDirty(id);
         this.render();
         this._emitChange("shape:text", { shapeId: id }, `text:${id}`);
       }
@@ -1621,11 +1819,65 @@ var VdDraw = class {
     if (this.destroyed || event.button != null && event.button !== 0) return;
     this.canvasEl.focus();
     this.stopTextEdit({ commit: true });
+    this._activePointers.set(event.pointerId, { clientX: event.clientX, clientY: event.clientY });
+    if (this._activePointers.size === 2) {
+      if (this.interaction) {
+        const it = this.interaction;
+        if (it.kind === "freehand" || it.kind === "create-line" || it.kind === "create-box") {
+          this.documentData.shapes = this.documentData.shapes.filter((s) => s.id !== it.shapeId);
+          this._shapesById.delete(it.shapeId);
+          const el = this._shapeElements.get(it.shapeId);
+          if (el) {
+            el.remove();
+            this._shapeElements.delete(it.shapeId);
+          }
+          this._scheduleRender({ scene: true, overlay: false });
+        } else if (it.kind === "move" || it.kind === "resize") {
+          for (const orig of it.originals) {
+            this._replaceShape(orig);
+            this._markDirty(orig.id);
+          }
+          if (it.kind === "move") this._renderGuides([]);
+          this._scheduleRender({ scene: true });
+        } else if (it.kind === "erase") {
+          for (const id of it.erased) this._markDirty(id);
+          this._scheduleRender({ scene: true, overlay: false });
+        } else if (it.kind === "pan") {
+          if (this.canvasEl) this.canvasEl.classList.remove("vd-draw-panning");
+        } else if (it.kind === "marquee") {
+          clearChildren(this.marqueeLayer);
+        }
+      }
+      const pts = [...this._activePointers.values()];
+      const p1 = pts[0];
+      const p2 = pts[1];
+      const initialDistance = Math.hypot(p2.clientX - p1.clientX, p2.clientY - p1.clientY) || 1;
+      const initialClientMid = {
+        x: (p1.clientX + p2.clientX) / 2,
+        y: (p1.clientY + p2.clientY) / 2
+      };
+      const initialLocalMid = this._clientToLocal(initialClientMid.x, initialClientMid.y);
+      const initialVp = { ...this.documentData.viewport };
+      const currentScale = initialVp.scale || 1;
+      const worldMid = {
+        x: (initialLocalMid.x - initialVp.x) / currentScale,
+        y: (initialLocalMid.y - initialVp.y) / currentScale
+      };
+      this.interaction = {
+        kind: "pinch",
+        initialDistance,
+        worldMid,
+        initialScale: currentScale
+      };
+      if (typeof event.preventDefault === "function") event.preventDefault();
+      return;
+    }
     const world = this._clientToWorld(event.clientX, event.clientY);
     const shapeTarget = event.target.closest("[data-shape-id]");
     const handleTarget = event.target.closest("[data-handle]");
     if (this.tool === "hand") {
       this.interaction = this._beginPan(event);
+      if (this.canvasEl) this.canvasEl.classList.add("vd-draw-panning");
       this._capture(event.pointerId);
       return;
     }
@@ -1636,6 +1888,15 @@ var VdDraw = class {
       return;
     }
     if (this.tool === "select") {
+      if (event.detail === 2 && shapeTarget && !this.readonly) {
+        const id = shapeTarget.getAttribute("data-shape-id");
+        const shape = this.getShape(id);
+        if (shape && (shape.type === "text" || shape.type === "sticky")) {
+          this.select(id);
+          this.startTextEdit(id);
+          return;
+        }
+      }
       if (handleTarget && this.selectedIds.size) {
         this.interaction = {
           kind: "resize",
@@ -1699,6 +1960,7 @@ var VdDraw = class {
         points: [[round(world.x), round(world.y), pressure]]
       };
       this.documentData.shapes.push(shape2);
+      this._shapesById.set(shape2.id, shape2);
       return { kind: "freehand", pointerId: event.pointerId, shapeId: shape2.id };
     }
     if (tool === "line") {
@@ -1716,6 +1978,7 @@ var VdDraw = class {
         opacity: this.style.opacity
       };
       this.documentData.shapes.push(shape2);
+      this._shapesById.set(shape2.id, shape2);
       return { kind: "create-line", pointerId: event.pointerId, shapeId: shape2.id };
     }
     const type = tool;
@@ -1733,6 +1996,7 @@ var VdDraw = class {
     };
     if (type === "text" || type === "sticky") shape.text = "";
     this.documentData.shapes.push(shape);
+    this._shapesById.set(shape.id, shape);
     return { kind: "create-box", pointerId: event.pointerId, shapeId: shape.id, start: world };
   }
   _applyErase(world) {
@@ -1747,16 +2011,44 @@ var VdDraw = class {
         changed = true;
       }
     }
-    if (changed) this.render({ scene: true, overlay: false });
+    if (changed) {
+      for (const id of it.erased) this._markDirty(id);
+      this._scheduleRender({ scene: true, overlay: false });
+    }
   }
   _handlePointerMove(event) {
+    if (this._activePointers.has(event.pointerId)) {
+      this._activePointers.set(event.pointerId, { clientX: event.clientX, clientY: event.clientY });
+    }
     const it = this.interaction;
     if (!it) return;
+    if (it.kind === "pinch") {
+      if (this._activePointers.size >= 2) {
+        if (typeof event.preventDefault === "function") event.preventDefault();
+        const pts = [...this._activePointers.values()];
+        const p1 = pts[0];
+        const p2 = pts[1];
+        const curDistance = Math.hypot(p2.clientX - p1.clientX, p2.clientY - p1.clientY) || 1;
+        const curClientMid = {
+          x: (p1.clientX + p2.clientX) / 2,
+          y: (p1.clientY + p2.clientY) / 2
+        };
+        const curLocalMid = this._clientToLocal(curClientMid.x, curClientMid.y);
+        const distRatio = curDistance / it.initialDistance;
+        const newScale = clamp(it.initialScale * distRatio, MIN_SCALE, MAX_SCALE);
+        const vp = this.documentData.viewport;
+        vp.scale = newScale;
+        vp.x = curLocalMid.x - it.worldMid.x * newScale;
+        vp.y = curLocalMid.y - it.worldMid.y * newScale;
+        this._scheduleRender({ scene: false });
+      }
+      return;
+    }
     if (it.kind === "pan") {
       const vp = this.documentData.viewport;
       vp.x = it.startX + (event.clientX - it.startClientX);
       vp.y = it.startY + (event.clientY - it.startClientY);
-      this.render({ scene: false });
+      this._scheduleRender({ scene: false });
       return;
     }
     const world = this._clientToWorld(event.clientX, event.clientY);
@@ -1774,8 +2066,9 @@ var VdDraw = class {
       if (snap.dx || snap.dy)
         for (const orig of it.originals)
           this._replaceShape(translateShape(orig, dx + snap.dx, dy + snap.dy));
+      for (const orig of it.originals) this._markDirty(orig.id);
       this._renderGuides(snap.guides);
-      this.render({ scene: true, guides: false });
+      this._scheduleRender({ scene: true, guides: false });
       return;
     }
     if (it.kind === "resize") {
@@ -1790,9 +2083,10 @@ var VdDraw = class {
       for (const orig of it.originals) {
         const scaled = scaleShape(orig, it.startBounds.x, it.startBounds.y, sx, sy);
         this._replaceShape(translateShape(scaled, t.x - it.startBounds.x, t.y - it.startBounds.y));
+        this._markDirty(orig.id);
       }
       it.moved = true;
-      this.render();
+      this._scheduleRender();
       return;
     }
     if (it.kind === "marquee") {
@@ -1803,8 +2097,14 @@ var VdDraw = class {
     if (it.kind === "freehand") {
       const shape = this.getShape(it.shapeId);
       if (shape) {
-        shape.points.push([round(world.x), round(world.y), event.pressure || 0.5]);
-        this.render({ scene: true });
+        const raw = [round(world.x), round(world.y), event.pressure || 0.5];
+        const preset = BRUSH_PRESETS[shape.brush] || BRUSH_PRESETS[DEFAULT_BRUSH];
+        const smoothFactor = 1 - (preset.smoothing || 0.5) * 0.6;
+        const prev = shape.points[shape.points.length - 1];
+        const pt = prev ? smoothPoint(prev, raw, smoothFactor) : raw;
+        appendAndSimplify(shape.points, pt);
+        this._markDirty(it.shapeId);
+        this._scheduleRender({ scene: true });
       }
       return;
     }
@@ -1812,7 +2112,8 @@ var VdDraw = class {
       const shape = this.getShape(it.shapeId);
       if (shape) {
         shape.points[1] = [round(world.x), round(world.y)];
-        this.render({ scene: true });
+        this._markDirty(it.shapeId);
+        this._scheduleRender({ scene: true });
       }
       return;
     }
@@ -1823,7 +2124,8 @@ var VdDraw = class {
         shape.y = round(Math.min(it.start.y, world.y));
         shape.w = round(Math.max(1, Math.abs(world.x - it.start.x)));
         shape.h = round(Math.max(1, Math.abs(world.y - it.start.y)));
-        this.render({ scene: true });
+        this._markDirty(it.shapeId);
+        this._scheduleRender({ scene: true });
       }
     }
   }
@@ -1842,9 +2144,19 @@ var VdDraw = class {
     return { x, y, w, h: h2 };
   }
   _handlePointerUp(event) {
+    this._activePointers.delete(event.pointerId);
     const it = this.interaction;
     if (!it) return;
+    if (it.kind === "pinch") {
+      if (this._activePointers.size < 2) {
+        this.interaction = null;
+        if (this.canvasEl) this.canvasEl.classList.remove("vd-draw-panning");
+        this._emitViewportChange("viewport:pinch");
+      }
+      return;
+    }
     this.interaction = null;
+    if (this.canvasEl) this.canvasEl.classList.remove("vd-draw-panning");
     if (typeof this.canvasEl.releasePointerCapture === "function" && this.canvasEl.hasPointerCapture?.(event.pointerId)) {
       try {
         this.canvasEl.releasePointerCapture(event.pointerId);
@@ -1860,18 +2172,22 @@ var VdDraw = class {
     if (it.kind === "erase") {
       if (it.erased.size) {
         const ids = [...it.erased];
+        for (const id of ids) this._shapesById.delete(id);
         this.documentData.shapes = this.documentData.shapes.filter((s) => !it.erased.has(s.id));
+        this._markAllDirty();
         this.render();
         this._emitChange("shape:erase", { shapeIds: ids });
       }
       return;
     }
     if (it.kind === "move" && it.moved) {
+      this._markAllDirty();
       this.render();
       this._emitChange("shape:move", { shapeIds: [...this.selectedIds] });
       return;
     }
     if (it.kind === "resize" && it.moved) {
+      this._markAllDirty();
       this.render();
       this._emitChange("shape:resize", { shapeIds: [...this.selectedIds] });
       return;
@@ -1888,6 +2204,8 @@ var VdDraw = class {
       const b = shapeBounds(shape);
       if (it.kind !== "freehand" && b.w < 2 && b.h < 2 && shape.type !== "text" && shape.type !== "sticky") {
         this.documentData.shapes = this.documentData.shapes.filter((s) => s.id !== it.shapeId);
+        this._shapesById.delete(it.shapeId);
+        this._markAllDirty();
         this.render();
         return;
       }
@@ -1901,6 +2219,7 @@ var VdDraw = class {
         this.select(shape.id);
         this.setTool("select");
       }
+      this._markDirty(shape.id);
       this.render();
       this._emitChange("shape:add", { shape: deepClone(shape), shapeId: shape.id });
       if (shape.type === "text" || shape.type === "sticky") this.startTextEdit(shape.id);
@@ -1977,26 +2296,93 @@ var VdDraw = class {
     if (this.destroyed) return;
     this.render({ scene: false });
   }
+  // ── Dirty tracking ──────────────────────────────────────────────────────
+  _markDirty(shapeId) {
+    this._dirtyShapes.add(shapeId);
+  }
+  _markAllDirty() {
+    this._allDirty = true;
+  }
+  // ── rAF-batched render ─────────────────────────────────────────────────
+  _scheduleRender(flags = {}) {
+    this._pendingFlags = {
+      scene: (this._pendingFlags?.scene ?? false) || flags.scene !== false,
+      overlay: (this._pendingFlags?.overlay ?? false) || flags.overlay !== false
+    };
+    if (this._rafId != null) return;
+    this._rafId = (typeof requestAnimationFrame === "function" ? requestAnimationFrame : setTimeout)(() => {
+      this._rafId = null;
+      const f = this._pendingFlags || {};
+      this._pendingFlags = null;
+      this.render(f);
+    });
+  }
   // ── Rendering ────────────────────────────────────────────────────────────
   render(flags = {}) {
     if (this.destroyed) return;
     const { scene = true, overlay = true } = flags;
     const vp = this.documentData.viewport;
     this.world.setAttribute("transform", `matrix(${vp.scale} 0 0 ${vp.scale} ${vp.x} ${vp.y})`);
+    if (this.textEditor) {
+      const activeShape = this.getShape(this.textEditor.id);
+      if (activeShape) this._positionTextEditor(activeShape, this.textEditor.el);
+    }
     if (scene) {
-      clearChildren(this.shapesLayer);
-      const erasing = this.interaction && this.interaction.kind === "erase" ? this.interaction.erased : null;
-      for (const shape of this.documentData.shapes) {
-        if (erasing && erasing.has(shape.id)) continue;
-        const el = this._renderShapeEl(shape, {});
-        if (el) this.shapesLayer.appendChild(el);
-      }
+      this._renderSceneIncremental();
     }
     if (overlay) this._renderOverlay();
   }
+  _renderSceneIncremental() {
+    const shapes = this.documentData.shapes;
+    const erasing = this.interaction && this.interaction.kind === "erase" ? this.interaction.erased : null;
+    const currentIds = /* @__PURE__ */ new Set();
+    for (const shape of shapes) {
+      if (erasing && erasing.has(shape.id)) continue;
+      currentIds.add(shape.id);
+    }
+    for (const [id, el] of this._shapeElements) {
+      if (!currentIds.has(id)) {
+        el.remove();
+        this._shapeElements.delete(id);
+      }
+    }
+    const fullRebuild = this._allDirty;
+    let prevEl = null;
+    for (const shape of shapes) {
+      if (!currentIds.has(shape.id)) continue;
+      const needsUpdate = fullRebuild || this._dirtyShapes.has(shape.id);
+      let el = this._shapeElements.get(shape.id);
+      if (needsUpdate || !el) {
+        const newEl = this._renderShapeEl(shape, {});
+        if (!newEl) {
+          if (el) {
+            el.remove();
+            this._shapeElements.delete(shape.id);
+          }
+          continue;
+        }
+        if (el) {
+          el.replaceWith(newEl);
+        } else {
+          if (prevEl && prevEl.parentNode === this.shapesLayer) {
+            prevEl.after(newEl);
+          } else {
+            this.shapesLayer.prepend(newEl);
+          }
+        }
+        el = newEl;
+        this._shapeElements.set(shape.id, el);
+      }
+      const expected = prevEl ? prevEl.nextElementSibling : this.shapesLayer.firstElementChild;
+      if (el !== expected) this.shapesLayer.insertBefore(el, expected);
+      prevEl = el;
+    }
+    this._dirtyShapes.clear();
+    this._allDirty = false;
+  }
   // Colors are applied via inline `style` (which wins over the CSS class rules
   // and serializes self-contained), so a picked color always renders.
-  _renderShapeEl(shape, { standalone = false, colors = null }) {
+  _renderShapeEl(shape, { standalone = false, colors = null, defsTarget = null } = {}) {
     let el = null;
     const setOpacity = (node) => {
       if (shape.opacity != null && shape.opacity !== 1)
@@ -2034,8 +2420,11 @@ var VdDraw = class {
       el.classList.add("vd-draw-shape");
       this._applyShapeStroke(el, shape, standalone, colors);
       setOpacity(el);
-      if (shape.arrowEnd) el.setAttribute("marker-end", `url(#${this._svgId("arrow")})`);
-      if (shape.arrowStart) el.setAttribute("marker-start", `url(#${this._svgId("arrow")})`);
+      const strokeColor = shape.color || (standalone && colors ? colors.shapeStroke : "");
+      const targetDefs = defsTarget || this.defsEl;
+      const markerId = this._getArrowMarkerId(strokeColor, targetDefs);
+      if (shape.arrowEnd) el.setAttribute("marker-end", `url(#${markerId})`);
+      if (shape.arrowStart) el.setAttribute("marker-start", `url(#${markerId})`);
     } else if (shape.type === "text" || shape.type === "sticky") {
       el = createSvgEl("g");
       setOpacity(el);
@@ -2052,11 +2441,31 @@ var VdDraw = class {
         else if (standalone && colors) bg.style.fill = colors.sticky;
         el.appendChild(bg);
       }
-      const text = createSvgEl("text", { x: shape.x + 6, y: shape.y + 18 });
+      const startX = (shape.x || 0) + (shape.type === "sticky" ? 10 : 6);
+      const startY = (shape.y || 0) + (shape.type === "sticky" ? 14 : 18);
+      const availWidth = shape.type === "sticky" ? Math.max(20, (shape.w || 160) - 20) : shape.w && shape.w > 20 ? shape.w - 12 : 0;
+      const lines = wrapText(shape.text || "", availWidth);
+      const text = createSvgEl("text", {
+        x: startX,
+        y: startY,
+        "xml:space": "preserve"
+      });
       text.classList.add("vd-draw-text");
       const fill = shape.color || (standalone && colors ? colors.text : "");
       if (fill) text.style.fill = fill;
-      text.textContent = shape.text || "";
+      if (!lines.length) {
+        text.textContent = "";
+      } else {
+        const lineHeight = 20;
+        lines.forEach((lineText, idx) => {
+          const tspan = createSvgEl("tspan", {
+            x: startX,
+            y: startY + idx * lineHeight
+          });
+          tspan.textContent = lineText;
+          text.appendChild(tspan);
+        });
+      }
       el.appendChild(text);
     }
     if (el && !standalone) el.setAttribute("data-shape-id", shape.id);
@@ -2140,9 +2549,18 @@ var VdDraw = class {
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
+    if (this._rafId != null) {
+      (typeof cancelAnimationFrame === "function" ? cancelAnimationFrame : clearTimeout)(
+        this._rafId
+      );
+      this._rafId = null;
+    }
     this.stopTextEdit({ commit: false });
     this._unbindEvents();
     this.listeners.clear();
+    this._activePointers.clear();
+    this._shapesById.clear();
+    this._shapeElements.clear();
     if (this.element) this.element.replaceChildren();
   }
 };
@@ -2175,10 +2593,10 @@ var VdDraw2 = defineComponent({
   setup(props, { emit, expose }) {
     const el = ref(null);
     let instance = null;
-    const create = () => {
+    const create = (savedDoc) => {
       instance = new VdDraw({
         element: el.value,
-        data: props.data,
+        data: savedDoc || props.data,
         readonly: props.readonly,
         tool: props.tool,
         gridSize: props.gridSize,
@@ -2212,18 +2630,28 @@ var VdDraw2 = defineComponent({
       (next) => instance?.setGridVisible(next)
     );
     watch(
-      () => [
-        props.readonly,
-        props.gridSize,
-        props.snap,
-        props.autoFit,
-        props.history,
-        props.historyLimit
-      ],
+      () => props.readonly,
+      (next) => instance?.setReadonly(next)
+    );
+    watch(
+      () => props.snap,
+      (next) => instance?.setSnap(next)
+    );
+    watch(
+      () => props.history,
+      (next) => instance?.setHistoryEnabled(next)
+    );
+    watch(
+      () => props.historyLimit,
+      (next) => instance?.setHistoryLimit(next)
+    );
+    watch(
+      () => [props.gridSize, props.autoFit],
       () => {
         if (!instance) return;
+        const currentDoc = typeof instance.toJSON === "function" ? instance.toJSON() : void 0;
         instance.destroy();
-        create();
+        create(currentDoc);
       }
     );
     onBeforeUnmount(() => {
@@ -2235,6 +2663,10 @@ var VdDraw2 = defineComponent({
     expose({
       getInstance: () => instance,
       setTool: (tool) => instance?.setTool(tool),
+      setReadonly: (readonly) => instance?.setReadonly(readonly),
+      setSnap: (snap) => instance?.setSnap(snap),
+      setHistoryEnabled: (enabled) => instance?.setHistoryEnabled(enabled),
+      setHistoryLimit: (limit) => instance?.setHistoryLimit(limit),
       undo: () => instance?.undo(),
       redo: () => instance?.redo(),
       canUndo: () => Boolean(instance?.canUndo()),