drawfn 0.0.1

package/dist/index.js

@@ -0,0 +1,1956 @@
+import { getStroke } from 'perfect-freehand';
+
+// src/renderer.ts
+
+// src/utils.ts
+function generateId() {
+  return `e_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+function screenToCanvas(screenPoint, camera, canvas) {
+  const rect = canvas.getBoundingClientRect();
+  const x = (screenPoint.x - rect.left - camera.x) / camera.zoom;
+  const y = (screenPoint.y - rect.top - camera.y) / camera.zoom;
+  return { x, y };
+}
+function canvasToScreen(canvasPoint, camera) {
+  return {
+    x: canvasPoint.x * camera.zoom + camera.x,
+    y: canvasPoint.y * camera.zoom + camera.y
+  };
+}
+function getElementBounds(element) {
+  return {
+    x: element.x,
+    y: element.y,
+    w: element.w,
+    h: element.h
+  };
+}
+function boundsIntersect(a, b) {
+  return !(a.x + a.w < b.x || b.x + b.w < a.x || a.y + a.h < b.y || b.y + b.h < a.y);
+}
+function getViewportBounds(camera, canvas) {
+  const w = canvas.width / camera.zoom;
+  const h = canvas.height / camera.zoom;
+  return {
+    x: -camera.x / camera.zoom,
+    y: -camera.y / camera.zoom,
+    w,
+    h
+  };
+}
+function rotatePoint(point, center, angle) {
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  const dx = point.x - center.x;
+  const dy = point.y - center.y;
+  return {
+    x: center.x + dx * cos - dy * sin,
+    y: center.y + dx * sin + dy * cos
+  };
+}
+
+// src/renderer.ts
+var Renderer = class {
+  constructor(canvas, getImageBitmap) {
+    this.imageCache = /* @__PURE__ */ new Map();
+    this.canvas = canvas;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Failed to get 2D context");
+    this.ctx = ctx;
+    this.getImageBitmap = getImageBitmap;
+  }
+  render(scene, options = {}) {
+    const { camera, background, elements } = scene;
+    const { selectedIds = /* @__PURE__ */ new Set(), hoveredId = null } = options;
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx.fillStyle = background.color;
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    if (background.grid) {
+      this.renderGrid(camera, background.grid);
+    }
+    this.ctx.save();
+    this.ctx.translate(camera.x, camera.y);
+    this.ctx.scale(camera.zoom, camera.zoom);
+    const viewport = getViewportBounds(camera, this.canvas);
+    for (const element of elements) {
+      if (element.locked && !selectedIds.has(element.id)) continue;
+      const bounds = getElementBounds(element);
+      if (!boundsIntersect(viewport, bounds)) continue;
+      this.renderElement(element);
+      if (selectedIds.has(element.id)) {
+        this.renderSelectionBox(element, camera);
+      } else if (hoveredId === element.id) {
+        this.renderHoverHighlight(element);
+      }
+    }
+    this.ctx.restore();
+    if (options.marquee) {
+      this.renderMarquee(options.marquee, camera);
+    }
+  }
+  renderGrid(camera, grid) {
+    const { size, color, alpha } = grid;
+    this.ctx.save();
+    const startX = Math.floor(-camera.x / camera.zoom / size) * size;
+    const startY = Math.floor(-camera.y / camera.zoom / size) * size;
+    const endX = startX + this.canvas.width / camera.zoom + size;
+    const endY = startY + this.canvas.height / camera.zoom + size;
+    this.ctx.strokeStyle = color;
+    this.ctx.globalAlpha = alpha;
+    this.ctx.lineWidth = 1 / camera.zoom;
+    this.ctx.beginPath();
+    for (let x = startX; x < endX; x += size) {
+      const screenX = x * camera.zoom + camera.x;
+      this.ctx.moveTo(screenX, 0);
+      this.ctx.lineTo(screenX, this.canvas.height);
+    }
+    for (let y = startY; y < endY; y += size) {
+      const screenY = y * camera.zoom + camera.y;
+      this.ctx.moveTo(0, screenY);
+      this.ctx.lineTo(this.canvas.width, screenY);
+    }
+    this.ctx.stroke();
+    this.ctx.restore();
+  }
+  renderElement(element) {
+    this.ctx.save();
+    this.ctx.globalAlpha = element.opacity;
+    if (element.rotation !== 0) {
+      const cx = element.x + element.w / 2;
+      const cy = element.y + element.h / 2;
+      this.ctx.translate(cx, cy);
+      this.ctx.rotate(element.rotation);
+      this.ctx.translate(-cx, -cy);
+    }
+    switch (element.type) {
+      case "freedraw":
+        this.renderFreedraw(element);
+        break;
+      case "rectangle":
+        this.renderRectangle(element);
+        break;
+      case "ellipse":
+        this.renderEllipse(element);
+        break;
+      case "arrow":
+        this.renderArrow(element);
+        break;
+      case "text":
+        this.renderText(element);
+        break;
+      case "image":
+        this.renderImage(element);
+        break;
+      case "node":
+        this.renderNode(element);
+        break;
+    }
+    this.ctx.restore();
+  }
+  renderFreedraw(element) {
+    if (element.points.length === 0) return;
+    const options = {
+      size: element.style?.size ?? element.strokeWidth * 2,
+      thinning: element.style?.thinning ?? 0.5,
+      smoothing: element.style?.smoothing ?? 0.5,
+      streamline: element.style?.streamline ?? 0.5,
+      taperStart: element.style?.taperStart ?? 0,
+      taperEnd: element.style?.taperEnd ?? 0,
+      simulatePressure: true
+    };
+    const points = element.points.map((p) => [p[0], p[1], p[2] ?? 0.5]);
+    const stroke = getStroke(points, options);
+    this.ctx.fillStyle = element.stroke;
+    this.ctx.beginPath();
+    this.ctx.moveTo(stroke[0][0] + element.x, stroke[0][1] + element.y);
+    for (let i = 1; i < stroke.length; i++) {
+      this.ctx.lineTo(stroke[i][0] + element.x, stroke[i][1] + element.y);
+    }
+    this.ctx.closePath();
+    this.ctx.fill();
+  }
+  renderRectangle(element) {
+    this.ctx.fillStyle = element.fill;
+    this.ctx.strokeStyle = element.stroke;
+    this.ctx.lineWidth = element.strokeWidth;
+    if (element.fill !== "transparent") {
+      this.ctx.fillRect(element.x, element.y, element.w, element.h);
+    }
+    if (element.strokeWidth > 0) {
+      this.ctx.strokeRect(element.x, element.y, element.w, element.h);
+    }
+  }
+  renderEllipse(element) {
+    this.ctx.fillStyle = element.fill;
+    this.ctx.strokeStyle = element.stroke;
+    this.ctx.lineWidth = element.strokeWidth;
+    const cx = element.x + element.w / 2;
+    const cy = element.y + element.h / 2;
+    const rx = element.w / 2;
+    const ry = element.h / 2;
+    this.ctx.beginPath();
+    this.ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+    if (element.fill !== "transparent") {
+      this.ctx.fill();
+    }
+    if (element.strokeWidth > 0) {
+      this.ctx.stroke();
+    }
+  }
+  renderArrow(element) {
+    if (element.points.length < 2) return;
+    this.ctx.strokeStyle = element.stroke;
+    this.ctx.fillStyle = element.stroke;
+    this.ctx.lineWidth = element.strokeWidth;
+    this.ctx.beginPath();
+    this.ctx.moveTo(
+      element.points[0][0] + element.x,
+      element.points[0][1] + element.y
+    );
+    for (let i = 1; i < element.points.length; i++) {
+      this.ctx.lineTo(
+        element.points[i][0] + element.x,
+        element.points[i][1] + element.y
+      );
+    }
+    this.ctx.stroke();
+    if (element.head === "triangle") {
+      const last = element.points[element.points.length - 1];
+      const prev = element.points[element.points.length - 2];
+      const angle = Math.atan2(last[1] - prev[1], last[0] - prev[0]);
+      const headLen = 10;
+      this.ctx.beginPath();
+      this.ctx.moveTo(last[0] + element.x, last[1] + element.y);
+      this.ctx.lineTo(
+        last[0] + element.x - headLen * Math.cos(angle - Math.PI / 6),
+        last[1] + element.y - headLen * Math.sin(angle - Math.PI / 6)
+      );
+      this.ctx.lineTo(
+        last[0] + element.x - headLen * Math.cos(angle + Math.PI / 6),
+        last[1] + element.y - headLen * Math.sin(angle + Math.PI / 6)
+      );
+      this.ctx.closePath();
+      this.ctx.fill();
+    }
+  }
+  renderText(element) {
+    this.ctx.fillStyle = element.fill;
+    this.ctx.strokeStyle = element.stroke;
+    this.ctx.font = `${element.fontSize}px ${element.fontFamily}`;
+    this.ctx.textAlign = element.align;
+    const x = element.x + (element.align === "center" ? element.w / 2 : 0);
+    const y = element.y + element.fontSize;
+    if (element.fill !== "transparent") {
+      this.ctx.fillText(element.text, x, y);
+    }
+    if (element.strokeWidth > 0) {
+      this.ctx.lineWidth = element.strokeWidth;
+      this.ctx.strokeText(element.text, x, y);
+    }
+  }
+  renderImage(element) {
+    const cached = this.imageCache.get(element.src);
+    if (cached) {
+      this.ctx.drawImage(cached, element.x, element.y, element.w, element.h);
+    } else {
+      this.loadImage(element.src);
+      this.ctx.fillStyle = "#f3f4f6";
+      this.ctx.fillRect(element.x, element.y, element.w, element.h);
+    }
+  }
+  renderNode(element) {
+    const radius = 8;
+    this.ctx.fillStyle = element.fill;
+    this.ctx.strokeStyle = element.stroke;
+    this.ctx.lineWidth = element.strokeWidth;
+    this.ctx.beginPath();
+    this.ctx.roundRect(element.x, element.y, element.w, element.h, radius);
+    if (element.fill !== "transparent") {
+      this.ctx.fill();
+    }
+    if (element.strokeWidth > 0) {
+      this.ctx.stroke();
+    }
+    if (element.preview?.title) {
+      this.ctx.fillStyle = element.stroke;
+      this.ctx.font = "14px sans-serif";
+      this.ctx.textAlign = "left";
+      this.ctx.fillText(element.preview.title, element.x + 12, element.y + 24);
+    }
+  }
+  renderSelectionBox(element, camera) {
+    const strokeWidth = 2 / camera.zoom;
+    const dashPattern = 4 / camera.zoom;
+    const handleSize = 6 / camera.zoom;
+    const padding = 2 / camera.zoom;
+    const rotateHandleDistance = 20 / camera.zoom;
+    const rotateHandleRadius = 4 / camera.zoom;
+    this.ctx.strokeStyle = "#3b82f6";
+    this.ctx.lineWidth = strokeWidth;
+    this.ctx.setLineDash([dashPattern, dashPattern]);
+    this.ctx.strokeRect(
+      element.x - padding,
+      element.y - padding,
+      element.w + padding * 2,
+      element.h + padding * 2
+    );
+    this.ctx.setLineDash([]);
+    this.ctx.fillStyle = "#ffffff";
+    this.ctx.strokeStyle = "#3b82f6";
+    this.ctx.lineWidth = 1 / camera.zoom;
+    const { x, y, w, h } = element;
+    const handles = [
+      { x, y },
+      { x: x + w, y },
+      { x, y: y + h },
+      { x: x + w, y: y + h },
+      { x: x + w / 2, y },
+      { x: x + w / 2, y: y + h },
+      { x: x + w, y: y + h / 2 },
+      { x, y: y + h / 2 }
+    ];
+    for (const handle of handles) {
+      this.ctx.fillRect(
+        handle.x - handleSize / 2,
+        handle.y - handleSize / 2,
+        handleSize,
+        handleSize
+      );
+      this.ctx.strokeRect(
+        handle.x - handleSize / 2,
+        handle.y - handleSize / 2,
+        handleSize,
+        handleSize
+      );
+    }
+    this.ctx.beginPath();
+    this.ctx.arc(
+      x + w / 2,
+      y - rotateHandleDistance,
+      rotateHandleRadius,
+      0,
+      Math.PI * 2
+    );
+    this.ctx.fill();
+    this.ctx.stroke();
+    this.ctx.beginPath();
+    this.ctx.moveTo(x + w / 2, y);
+    this.ctx.lineTo(x + w / 2, y - rotateHandleDistance + rotateHandleRadius);
+    this.ctx.stroke();
+  }
+  renderHoverHighlight(element) {
+    this.ctx.strokeStyle = "#93c5fd";
+    this.ctx.lineWidth = 1;
+    this.ctx.strokeRect(
+      element.x - 1,
+      element.y - 1,
+      element.w + 2,
+      element.h + 2
+    );
+  }
+  renderMarquee(marquee, camera) {
+    const minX = Math.min(marquee.start.x, marquee.current.x);
+    const minY = Math.min(marquee.start.y, marquee.current.y);
+    const maxX = Math.max(marquee.start.x, marquee.current.x);
+    const maxY = Math.max(marquee.start.y, marquee.current.y);
+    const width = maxX - minX;
+    const height = maxY - minY;
+    this.ctx.save();
+    this.ctx.translate(camera.x, camera.y);
+    this.ctx.scale(camera.zoom, camera.zoom);
+    this.ctx.fillStyle = "rgba(59, 130, 246, 0.1)";
+    this.ctx.fillRect(minX, minY, width, height);
+    this.ctx.strokeStyle = "#3b82f6";
+    this.ctx.lineWidth = 1.5 / camera.zoom;
+    this.ctx.setLineDash([5 / camera.zoom, 5 / camera.zoom]);
+    this.ctx.strokeRect(minX, minY, width, height);
+    this.ctx.setLineDash([]);
+    this.ctx.restore();
+  }
+  async loadImage(src) {
+    if (this.imageCache.has(src)) return;
+    try {
+      if (this.getImageBitmap) {
+        const bitmap = await this.getImageBitmap(src);
+        this.imageCache.set(src, bitmap);
+      } else {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        await new Promise((resolve, reject) => {
+          img.onload = resolve;
+          img.onerror = reject;
+          img.src = src;
+        });
+        this.imageCache.set(src, img);
+      }
+    } catch (error) {
+      console.error("Failed to load image:", src, error);
+    }
+  }
+};
+
+// src/history.ts
+var History = class {
+  constructor(maxSize = 50) {
+    this.past = [];
+    this.future = [];
+    this.maxSize = maxSize;
+  }
+  push(scene) {
+    this.past.push({
+      scene: JSON.parse(JSON.stringify(scene)),
+      timestamp: Date.now()
+    });
+    if (this.past.length > this.maxSize) {
+      this.past.shift();
+    }
+    this.future = [];
+  }
+  undo(currentScene) {
+    if (this.past.length === 0) return null;
+    this.future.push({
+      scene: JSON.parse(JSON.stringify(currentScene)),
+      timestamp: Date.now()
+    });
+    const state = this.past.pop();
+    return state.scene;
+  }
+  redo(currentScene) {
+    if (this.future.length === 0) return null;
+    this.past.push({
+      scene: JSON.parse(JSON.stringify(currentScene)),
+      timestamp: Date.now()
+    });
+    const state = this.future.pop();
+    return state.scene;
+  }
+  canUndo() {
+    return this.past.length > 0;
+  }
+  canRedo() {
+    return this.future.length > 0;
+  }
+  clear() {
+    this.past = [];
+    this.future = [];
+  }
+};
+
+// src/tools/base-tool.ts
+var BaseTool = class {
+  constructor() {
+    this.isActive = false;
+  }
+  activate(opts) {
+    this.isActive = true;
+  }
+  deactivate() {
+    this.isActive = false;
+  }
+  handlePointerDown(e, context, selectedIds) {
+  }
+  handlePointerMove(e, context) {
+  }
+  handlePointerUp(e, context) {
+  }
+  handleKeyDown(e, context) {
+  }
+};
+
+// src/geometry.ts
+function getOBBCorners(element) {
+  const { x, y, w, h, rotation } = element;
+  if (rotation === 0) {
+    return [
+      { x, y },
+      { x: x + w, y },
+      { x: x + w, y: y + h },
+      { x, y: y + h }
+    ];
+  }
+  const center = { x: x + w / 2, y: y + h / 2 };
+  const corners = [
+    { x, y },
+    { x: x + w, y },
+    { x: x + w, y: y + h },
+    { x, y: y + h }
+  ];
+  return corners.map((corner) => rotatePoint(corner, center, rotation));
+}
+function isPointInOBB(point, element) {
+  const { x, y, w, h, rotation } = element;
+  if (rotation === 0) {
+    return point.x >= x && point.x <= x + w && point.y >= y && point.y <= y + h;
+  }
+  const center = { x: x + w / 2, y: y + h / 2 };
+  const rotated = rotatePoint(point, center, -rotation);
+  return rotated.x >= x && rotated.x <= x + w && rotated.y >= y && rotated.y <= y + h;
+}
+function getOBBBounds(element) {
+  if (element.rotation === 0) {
+    return {
+      x: element.x,
+      y: element.y,
+      w: element.w,
+      h: element.h
+    };
+  }
+  const corners = getOBBCorners(element);
+  const xs = corners.map((c) => c.x);
+  const ys = corners.map((c) => c.y);
+  const minX = Math.min(...xs);
+  const minY = Math.min(...ys);
+  const maxX = Math.max(...xs);
+  const maxY = Math.max(...ys);
+  return {
+    x: minX,
+    y: minY,
+    w: maxX - minX,
+    h: maxY - minY
+  };
+}
+
+// src/tools/select-tool.ts
+var SelectTool = class extends BaseTool {
+  constructor() {
+    super(...arguments);
+    this.name = "select";
+    this.dragStart = null;
+    this.dragElementId = null;
+    this.dragHandle = null;
+    this.initialBounds = null;
+    // Marquee selection state
+    this.marqueeStart = null;
+    this.marqueeCurrent = null;
+    this.isMarqueeActive = false;
+    // Double-click detection for text editing
+    this.lastClickTime = 0;
+    this.lastClickPoint = null;
+    this.lastClickedElementId = null;
+  }
+  handlePointerDown(e, context, selectedIds) {
+    const canvas = e.target;
+    const scene = context.getScene();
+    const point = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    for (const id of selectedIds) {
+      const element = scene.elements.find((el) => el.id === id);
+      if (!element) continue;
+      const handle = this.getHandleAtPoint(element, point, scene.camera.zoom);
+      if (handle) {
+        context.recordHistory();
+        this.dragStart = point;
+        this.dragElementId = element.id;
+        this.dragHandle = handle;
+        this.initialBounds = {
+          x: element.x,
+          y: element.y,
+          w: element.w,
+          h: element.h
+        };
+        return;
+      }
+    }
+    for (let i = scene.elements.length - 1; i >= 0; i--) {
+      const element = scene.elements[i];
+      if (isPointInOBB(point, element)) {
+        const now = Date.now();
+        const isDoubleClick = this.lastClickedElementId === element.id && now - this.lastClickTime < 300 && this.lastClickPoint && Math.abs(point.x - this.lastClickPoint.x) < 5 && Math.abs(point.y - this.lastClickPoint.y) < 5;
+        if (isDoubleClick && element.type === "text") {
+          const drawfn = context.getDrawfn();
+          if (drawfn.editTextElement) {
+            drawfn.editTextElement(element.id);
+          }
+          return;
+        }
+        this.lastClickTime = now;
+        this.lastClickPoint = point;
+        this.lastClickedElementId = element.id;
+        context.recordHistory();
+        this.dragStart = point;
+        this.dragElementId = element.id;
+        this.dragHandle = null;
+        if (!selectedIds.has(element.id)) {
+          if (!e.shiftKey) {
+            selectedIds.clear();
+          }
+          selectedIds.add(element.id);
+        }
+        return;
+      }
+    }
+    if (!e.shiftKey) {
+      selectedIds.clear();
+    }
+    this.marqueeStart = point;
+    this.marqueeCurrent = point;
+    this.isMarqueeActive = true;
+  }
+  handlePointerMove(e, context) {
+    const canvas = e.target;
+    const scene = context.getScene();
+    const point = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    if (this.isMarqueeActive && this.marqueeStart) {
+      this.marqueeCurrent = point;
+      return;
+    }
+    if (!this.dragStart || !this.dragElementId) return;
+    if (this.dragHandle && this.initialBounds) {
+      this.handleResize(point, this.dragHandle, context);
+    } else {
+      const dx = point.x - this.dragStart.x;
+      const dy = point.y - this.dragStart.y;
+      const element = scene.elements.find((el) => el.id === this.dragElementId);
+      if (element) {
+        context.updateElement(this.dragElementId, {
+          x: element.x + dx,
+          y: element.y + dy
+        });
+      }
+      this.dragStart = point;
+    }
+  }
+  handlePointerUp(e, context) {
+    if (this.isMarqueeActive && this.marqueeStart && this.marqueeCurrent) {
+      const selection = context.getSelection();
+      const elementsInMarquee = this.getElementsInMarquee(context);
+      if (e.shiftKey) {
+        elementsInMarquee.forEach((id) => selection.add(id));
+      } else {
+        selection.clear();
+        elementsInMarquee.forEach((id) => selection.add(id));
+      }
+      this.marqueeStart = null;
+      this.marqueeCurrent = null;
+      this.isMarqueeActive = false;
+      return;
+    }
+    this.dragStart = null;
+    this.dragElementId = null;
+    this.dragHandle = null;
+    this.initialBounds = null;
+  }
+  getMarquee() {
+    if (this.isMarqueeActive && this.marqueeStart && this.marqueeCurrent) {
+      return { start: this.marqueeStart, current: this.marqueeCurrent };
+    }
+    return null;
+  }
+  getElementsInMarquee(context) {
+    if (!this.marqueeStart || !this.marqueeCurrent) return [];
+    const scene = context.getScene();
+    const minX = Math.min(this.marqueeStart.x, this.marqueeCurrent.x);
+    const minY = Math.min(this.marqueeStart.y, this.marqueeCurrent.y);
+    const maxX = Math.max(this.marqueeStart.x, this.marqueeCurrent.x);
+    const maxY = Math.max(this.marqueeStart.y, this.marqueeCurrent.y);
+    const elementsInBounds = [];
+    for (const element of scene.elements) {
+      const centerX = element.x + element.w / 2;
+      const centerY = element.y + element.h / 2;
+      if (centerX >= minX && centerX <= maxX && centerY >= minY && centerY <= maxY) {
+        elementsInBounds.push(element.id);
+      }
+    }
+    return elementsInBounds;
+  }
+  getHandleAtPoint(element, point, zoom) {
+    const handleSize = 8 / zoom;
+    const { x, y, w, h, rotation } = element;
+    const localHandles = [
+      { type: "nw", x, y },
+      { type: "ne", x: x + w, y },
+      { type: "sw", x, y: y + h },
+      { type: "se", x: x + w, y: y + h },
+      { type: "n", x: x + w / 2, y },
+      { type: "s", x: x + w / 2, y: y + h },
+      { type: "e", x: x + w, y: y + h / 2 },
+      { type: "w", x, y: y + h / 2 },
+      { type: "rotate", x: x + w / 2, y: y - 20 / zoom }
+    ];
+    const handles = rotation !== 0 ? localHandles.map((handle) => {
+      const center = { x: x + w / 2, y: y + h / 2 };
+      const rotated = this.rotatePoint(
+        { x: handle.x, y: handle.y },
+        center,
+        rotation
+      );
+      return { type: handle.type, x: rotated.x, y: rotated.y };
+    }) : localHandles;
+    for (const handle of handles) {
+      const dist = Math.sqrt(
+        Math.pow(point.x - handle.x, 2) + Math.pow(point.y - handle.y, 2)
+      );
+      if (dist < handleSize) {
+        return handle.type;
+      }
+    }
+    return null;
+  }
+  rotatePoint(point, center, angle) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const dx = point.x - center.x;
+    const dy = point.y - center.y;
+    return {
+      x: center.x + dx * cos - dy * sin,
+      y: center.y + dx * sin + dy * cos
+    };
+  }
+  handleResize(point, handle, context) {
+    if (!this.dragElementId || !this.initialBounds || !this.dragStart) return;
+    const dx = point.x - this.dragStart.x;
+    const dy = point.y - this.dragStart.y;
+    let updates = {};
+    switch (handle) {
+      case "nw":
+        updates = {
+          x: this.initialBounds.x + dx,
+          y: this.initialBounds.y + dy,
+          w: Math.max(10, this.initialBounds.w - dx),
+          h: Math.max(10, this.initialBounds.h - dy)
+        };
+        break;
+      case "ne":
+        updates = {
+          y: this.initialBounds.y + dy,
+          w: Math.max(10, this.initialBounds.w + dx),
+          h: Math.max(10, this.initialBounds.h - dy)
+        };
+        break;
+      case "sw":
+        updates = {
+          x: this.initialBounds.x + dx,
+          w: Math.max(10, this.initialBounds.w - dx),
+          h: Math.max(10, this.initialBounds.h + dy)
+        };
+        break;
+      case "se":
+        updates = {
+          w: Math.max(10, this.initialBounds.w + dx),
+          h: Math.max(10, this.initialBounds.h + dy)
+        };
+        break;
+      case "n":
+        updates = {
+          y: this.initialBounds.y + dy,
+          h: Math.max(10, this.initialBounds.h - dy)
+        };
+        break;
+      case "s":
+        updates = {
+          h: Math.max(10, this.initialBounds.h + dy)
+        };
+        break;
+      case "e":
+        updates = {
+          w: Math.max(10, this.initialBounds.w + dx)
+        };
+        break;
+      case "w":
+        updates = {
+          x: this.initialBounds.x + dx,
+          w: Math.max(10, this.initialBounds.w - dx)
+        };
+        break;
+      case "rotate":
+        const cx = this.initialBounds.x + this.initialBounds.w / 2;
+        const cy = this.initialBounds.y + this.initialBounds.h / 2;
+        const angle = Math.atan2(point.y - cy, point.x - cx);
+        updates = { rotation: angle };
+        break;
+    }
+    if (Object.keys(updates).length > 0) {
+      context.updateElement(this.dragElementId, updates);
+    }
+  }
+};
+
+// src/tools/pan-tool.ts
+var PanTool = class extends BaseTool {
+  constructor() {
+    super(...arguments);
+    this.name = "pan";
+    this.dragStart = null;
+  }
+  handlePointerDown(e, context) {
+    this.dragStart = { x: e.clientX, y: e.clientY };
+  }
+  handlePointerMove(e, context) {
+    if (!this.dragStart) return;
+    const dx = e.clientX - this.dragStart.x;
+    const dy = e.clientY - this.dragStart.y;
+    const camera = context.getCamera();
+    context.getDrawfn().setCamera({
+      x: camera.x + dx,
+      y: camera.y + dy
+    });
+    this.dragStart = { x: e.clientX, y: e.clientY };
+  }
+  handlePointerUp(e, context) {
+    this.dragStart = null;
+  }
+};
+
+// src/tools/pen-tool.ts
+var PenTool = class extends BaseTool {
+  constructor() {
+    super(...arguments);
+    this.name = "pen";
+    this.currentElement = null;
+    this.currentElementId = null;
+    this.currentPoints = [];
+  }
+  handlePointerDown(e, context) {
+    const canvas = e.target;
+    const scene = context.getScene();
+    const point = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    context.recordHistory();
+    this.currentPoints = [[point.x, point.y, e.pressure || 0.5]];
+    this.currentElement = {
+      id: generateId(),
+      type: "freedraw",
+      x: point.x,
+      y: point.y,
+      w: 1,
+      h: 1,
+      rotation: 0,
+      stroke: "#000000",
+      fill: "transparent",
+      strokeWidth: 2,
+      opacity: 1,
+      points: [],
+      style: {
+        size: 4,
+        thinning: 0.5,
+        smoothing: 0.5,
+        streamline: 0.5
+      }
+    };
+    this.currentElementId = context.addElement(this.currentElement);
+  }
+  handlePointerMove(e, context) {
+    if (!this.currentElement || !this.currentElementId) return;
+    const canvas = e.target;
+    const scene = context.getScene();
+    const point = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    this.currentPoints.push([
+      point.x - this.currentElement.x,
+      point.y - this.currentElement.y,
+      e.pressure || 0.5
+    ]);
+    const xs = this.currentPoints.map((p) => p[0]);
+    const ys = this.currentPoints.map((p) => p[1]);
+    const w = Math.max(...xs) - Math.min(...xs);
+    const h = Math.max(...ys) - Math.min(...ys);
+    context.updateElement(this.currentElementId, {
+      points: this.currentPoints,
+      w,
+      h
+    });
+  }
+  handlePointerUp(e, context) {
+    this.currentElement = null;
+    this.currentElementId = null;
+    this.currentPoints = [];
+  }
+};
+
+// src/tools/rectangle-tool.ts
+var RectangleTool = class extends BaseTool {
+  constructor() {
+    super(...arguments);
+    this.name = "rectangle";
+    this.startPoint = null;
+    this.currentElementId = null;
+  }
+  handlePointerDown(e, context) {
+    const canvas = e.target;
+    const scene = context.getScene();
+    this.startPoint = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    context.recordHistory();
+    const element = {
+      id: generateId(),
+      type: "rectangle",
+      x: this.startPoint.x,
+      y: this.startPoint.y,
+      w: 0,
+      h: 0,
+      rotation: 0,
+      stroke: "#000000",
+      fill: "transparent",
+      strokeWidth: 2,
+      opacity: 1
+    };
+    this.currentElementId = context.addElement(element);
+  }
+  handlePointerMove(e, context) {
+    if (!this.startPoint || !this.currentElementId) return;
+    const canvas = e.target;
+    const scene = context.getScene();
+    const point = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    let w = point.x - this.startPoint.x;
+    let h = point.y - this.startPoint.y;
+    if (e.shiftKey) {
+      const size = Math.max(Math.abs(w), Math.abs(h));
+      w = w >= 0 ? size : -size;
+      h = h >= 0 ? size : -size;
+    }
+    const updates = {};
+    if (w < 0) {
+      updates.x = this.startPoint.x + w;
+      updates.w = -w;
+    } else {
+      updates.x = this.startPoint.x;
+      updates.w = w;
+    }
+    if (h < 0) {
+      updates.y = this.startPoint.y + h;
+      updates.h = -h;
+    } else {
+      updates.y = this.startPoint.y;
+      updates.h = h;
+    }
+    context.updateElement(this.currentElementId, updates);
+  }
+  handlePointerUp(e, context) {
+    if (this.currentElementId) {
+      const scene = context.getScene();
+      const element = scene.elements.find(
+        (el) => el.id === this.currentElementId
+      );
+      if (element && (element.w < 1 || element.h < 1)) {
+        context.removeElement(this.currentElementId);
+      }
+    }
+    this.startPoint = null;
+    this.currentElementId = null;
+  }
+};
+
+// src/tools/ellipse-tool.ts
+var EllipseTool = class extends BaseTool {
+  constructor() {
+    super(...arguments);
+    this.name = "ellipse";
+    this.startPoint = null;
+    this.currentElementId = null;
+  }
+  handlePointerDown(e, context) {
+    const canvas = e.target;
+    const scene = context.getScene();
+    this.startPoint = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    context.recordHistory();
+    const element = {
+      id: generateId(),
+      type: "ellipse",
+      x: this.startPoint.x,
+      y: this.startPoint.y,
+      w: 0,
+      h: 0,
+      rotation: 0,
+      stroke: "#000000",
+      fill: "transparent",
+      strokeWidth: 2,
+      opacity: 1
+    };
+    this.currentElementId = context.addElement(element);
+  }
+  handlePointerMove(e, context) {
+    if (!this.startPoint || !this.currentElementId) return;
+    const canvas = e.target;
+    const scene = context.getScene();
+    const point = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    let w = point.x - this.startPoint.x;
+    let h = point.y - this.startPoint.y;
+    if (e.shiftKey) {
+      const size = Math.max(Math.abs(w), Math.abs(h));
+      w = w >= 0 ? size : -size;
+      h = h >= 0 ? size : -size;
+    }
+    const updates = {};
+    if (w < 0) {
+      updates.x = this.startPoint.x + w;
+      updates.w = -w;
+    } else {
+      updates.x = this.startPoint.x;
+      updates.w = w;
+    }
+    if (h < 0) {
+      updates.y = this.startPoint.y + h;
+      updates.h = -h;
+    } else {
+      updates.y = this.startPoint.y;
+      updates.h = h;
+    }
+    context.updateElement(this.currentElementId, updates);
+  }
+  handlePointerUp(e, context) {
+    if (this.currentElementId) {
+      const scene = context.getScene();
+      const element = scene.elements.find(
+        (el) => el.id === this.currentElementId
+      );
+      if (element && (element.w < 1 || element.h < 1)) {
+        context.removeElement(this.currentElementId);
+      }
+    }
+    this.startPoint = null;
+    this.currentElementId = null;
+  }
+};
+
+// src/tools/arrow-tool.ts
+var ArrowTool = class extends BaseTool {
+  constructor() {
+    super(...arguments);
+    this.name = "arrow";
+    this.points = [];
+    this.currentElementId = null;
+  }
+  handlePointerDown(e, context) {
+    const canvas = e.target;
+    const scene = context.getScene();
+    const point = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    context.recordHistory();
+    this.points = [[point.x, point.y]];
+    const element = {
+      id: generateId(),
+      type: "arrow",
+      x: point.x,
+      y: point.y,
+      w: 0,
+      h: 0,
+      rotation: 0,
+      stroke: "#000000",
+      fill: "transparent",
+      strokeWidth: 2,
+      opacity: 1,
+      points: [[0, 0]],
+      head: "triangle"
+    };
+    this.currentElementId = context.addElement(element);
+  }
+  handlePointerMove(e, context) {
+    if (!this.currentElementId || this.points.length === 0) return;
+    const canvas = e.target;
+    const scene = context.getScene();
+    const point = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    const startX = this.points[0][0];
+    const startY = this.points[0][1];
+    let arrowPoints = [
+      [0, 0],
+      [point.x - startX, point.y - startY]
+    ];
+    const minX = Math.min(0, point.x - startX);
+    const minY = Math.min(0, point.y - startY);
+    const maxX = Math.max(0, point.x - startX);
+    const maxY = Math.max(0, point.y - startY);
+    arrowPoints = arrowPoints.map(([x, y]) => [x - minX, y - minY]);
+    context.updateElement(this.currentElementId, {
+      x: startX + minX,
+      y: startY + minY,
+      w: maxX - minX,
+      h: maxY - minY,
+      points: arrowPoints
+    });
+  }
+  handlePointerUp(e, context) {
+    if (this.currentElementId) {
+      const scene = context.getScene();
+      const element = scene.elements.find(
+        (el) => el.id === this.currentElementId
+      );
+      if (element && (element.w < 1 || element.h < 1)) {
+        context.removeElement(this.currentElementId);
+      }
+    }
+    this.points = [];
+    this.currentElementId = null;
+  }
+};
+
+// src/tools/text-tool.ts
+var TextTool = class extends BaseTool {
+  constructor(overlayRoot) {
+    super();
+    this.name = "text";
+    this.overlayRoot = null;
+    this.activeTextarea = null;
+    this.activeElementId = null;
+    this.activeContext = null;
+    this.overlayRoot = overlayRoot || document.body;
+  }
+  handlePointerDown(e, context) {
+    if (this.activeTextarea && this.activeContext) {
+      this.commitText(this.activeContext);
+    }
+    const canvas = e.target;
+    const scene = context.getScene();
+    const point = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    context.recordHistory();
+    const element = {
+      id: generateId(),
+      type: "text",
+      x: point.x,
+      y: point.y,
+      w: 200,
+      h: 40,
+      rotation: 0,
+      stroke: "#000000",
+      fill: "#000000",
+      strokeWidth: 0,
+      opacity: 1,
+      text: "",
+      fontFamily: "sans-serif",
+      fontSize: 16,
+      align: "left"
+    };
+    this.activeElementId = context.addElement(element);
+    this.activeContext = context;
+    this.showTextInput(canvas, context, element);
+  }
+  editElement(id, canvas, scene) {
+    const element = scene.elements.find((el) => el.id === id);
+    if (!element || element.type !== "text") return;
+    this.activeElementId = id;
+    const textarea = document.createElement("textarea");
+    const rect = canvas.getBoundingClientRect();
+    const screenX = element.x * scene.camera.zoom + scene.camera.x + rect.left;
+    const screenY = element.y * scene.camera.zoom + scene.camera.y + rect.top;
+    Object.assign(textarea.style, {
+      position: "fixed",
+      left: `${screenX}px`,
+      top: `${screenY}px`,
+      width: `${element.w * scene.camera.zoom}px`,
+      minHeight: `${element.h * scene.camera.zoom}px`,
+      font: `${element.fontSize * scene.camera.zoom}px ${element.fontFamily}`,
+      color: element.fill,
+      background: "transparent",
+      border: "2px solid #3b82f6",
+      outline: "none",
+      resize: "none",
+      padding: "4px",
+      zIndex: "10000"
+    });
+    textarea.value = element.text;
+    textarea.focus();
+    textarea.select();
+    this.activeTextarea = textarea;
+    if (this.overlayRoot) {
+      this.overlayRoot.appendChild(textarea);
+    }
+    const handleBlur = () => {
+      if (this.activeTextarea && this.activeElementId) {
+        element.text = this.activeTextarea.value;
+        this.activeTextarea.remove();
+        this.activeTextarea = null;
+        this.activeElementId = null;
+      }
+    };
+    textarea.addEventListener("blur", handleBlur);
+  }
+  showTextInput(canvas, context, element) {
+    if (!this.overlayRoot) return;
+    const scene = context.getScene();
+    const textarea = document.createElement("textarea");
+    const rect = canvas.getBoundingClientRect();
+    const screenX = element.x * scene.camera.zoom + scene.camera.x + rect.left;
+    const screenY = element.y * scene.camera.zoom + scene.camera.y + rect.top;
+    Object.assign(textarea.style, {
+      position: "fixed",
+      left: `${screenX}px`,
+      top: `${screenY}px`,
+      width: `${element.w * scene.camera.zoom}px`,
+      minHeight: `${element.h * scene.camera.zoom}px`,
+      font: `${element.fontSize * scene.camera.zoom}px ${element.fontFamily}`,
+      color: element.fill,
+      background: "transparent",
+      border: "2px solid #3b82f6",
+      outline: "none",
+      resize: "none",
+      padding: "4px",
+      zIndex: "10000"
+    });
+    textarea.value = element.text;
+    textarea.focus();
+    this.activeTextarea = textarea;
+    this.overlayRoot.appendChild(textarea);
+    const handleClickOutside = (e) => {
+      if (e.target !== textarea) {
+        this.commitText(context);
+        document.removeEventListener("click", handleClickOutside);
+      }
+    };
+    textarea.addEventListener("blur", () => {
+      this.commitText(context);
+      document.removeEventListener("click", handleClickOutside);
+    });
+    setTimeout(() => {
+      document.addEventListener("click", handleClickOutside);
+    }, 0);
+  }
+  commitText(context) {
+    if (!this.activeTextarea || !this.activeElementId) return;
+    const text = this.activeTextarea.value;
+    if (text.trim() === "") {
+      context.removeElement(this.activeElementId);
+    } else {
+      context.updateElement(this.activeElementId, { text });
+    }
+    this.activeTextarea.remove();
+    this.activeTextarea = null;
+    this.activeElementId = null;
+    this.activeContext = null;
+  }
+  deactivate() {
+    if (this.activeTextarea) {
+      this.activeTextarea.remove();
+      this.activeTextarea = null;
+    }
+    this.activeElementId = null;
+    this.activeContext = null;
+    super.deactivate();
+  }
+};
+
+// src/tools/image-tool.ts
+var ImageTool = class extends BaseTool {
+  constructor() {
+    super(...arguments);
+    this.name = "image";
+    this.pendingImage = null;
+  }
+  activate(opts) {
+    super.activate(opts);
+    if (opts?.src) {
+      this.pendingImage = opts;
+    }
+  }
+  handlePointerDown(e, context) {
+    if (!this.pendingImage) return;
+    const canvas = e.target;
+    const scene = context.getScene();
+    const point = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    context.recordHistory();
+    const w = this.pendingImage.naturalW || 200;
+    const h = this.pendingImage.naturalH || 150;
+    const element = {
+      id: generateId(),
+      type: "image",
+      x: point.x - w / 2,
+      y: point.y - h / 2,
+      w,
+      h,
+      rotation: 0,
+      stroke: "#000000",
+      fill: "transparent",
+      strokeWidth: 0,
+      opacity: 1,
+      src: this.pendingImage.src,
+      naturalW: this.pendingImage.naturalW,
+      naturalH: this.pendingImage.naturalH
+    };
+    context.addElement(element);
+    this.pendingImage = null;
+  }
+};
+
+// src/tools/node-tool.ts
+var NodeTool = class extends BaseTool {
+  constructor() {
+    super(...arguments);
+    this.name = "node";
+    this.pendingNode = null;
+  }
+  activate(opts) {
+    super.activate(opts);
+    if (opts?.nodeId) {
+      this.pendingNode = opts;
+    }
+  }
+  handlePointerDown(e, context) {
+    if (!this.pendingNode) return;
+    const canvas = e.target;
+    const scene = context.getScene();
+    const point = screenToCanvas(
+      { x: e.clientX, y: e.clientY },
+      scene.camera,
+      canvas
+    );
+    context.recordHistory();
+    const element = {
+      id: generateId(),
+      type: "node",
+      x: point.x - 120,
+      y: point.y - 60,
+      w: 240,
+      h: 120,
+      rotation: 0,
+      stroke: "#2563eb",
+      fill: "#eff6ff",
+      strokeWidth: 1,
+      opacity: 1,
+      nodeId: this.pendingNode.nodeId,
+      nodeType: this.pendingNode.nodeType,
+      variant: this.pendingNode.variant || "bookmark",
+      preview: this.pendingNode.preview
+    };
+    context.addElement(element);
+    this.pendingNode = null;
+  }
+};
+
+// src/tools/tool-manager.ts
+var ToolManager = class {
+  constructor(drawfn, overlayRoot) {
+    this.tools = /* @__PURE__ */ new Map();
+    this.currentTool = "select";
+    this.drawfn = drawfn;
+    this.tools.set("select", new SelectTool());
+    this.tools.set("pan", new PanTool());
+    this.tools.set("pen", new PenTool());
+    this.tools.set("rectangle", new RectangleTool());
+    this.tools.set("ellipse", new EllipseTool());
+    this.tools.set("arrow", new ArrowTool());
+    this.tools.set("text", new TextTool(overlayRoot));
+    this.tools.set("image", new ImageTool());
+    this.tools.set("node", new NodeTool());
+  }
+  setTool(tool, opts) {
+    const currentTool = this.tools.get(this.currentTool);
+    currentTool?.deactivate();
+    this.currentTool = tool;
+    const newTool = this.tools.get(tool);
+    newTool?.activate(opts);
+  }
+  getCurrentTool() {
+    return this.currentTool;
+  }
+  handlePointerDown(e, context, selectedIds) {
+    const tool = this.tools.get(this.currentTool);
+    tool?.handlePointerDown(e, context, selectedIds);
+  }
+  handlePointerMove(e, context) {
+    const tool = this.tools.get(this.currentTool);
+    tool?.handlePointerMove(e, context);
+  }
+  handlePointerUp(e, context) {
+    const tool = this.tools.get(this.currentTool);
+    tool?.handlePointerUp(e, context);
+  }
+  handleKeyDown(e, context) {
+    const tool = this.tools.get(this.currentTool);
+    tool?.handleKeyDown(e, context);
+  }
+  getTool(name) {
+    return this.tools.get(name);
+  }
+  getMarquee() {
+    if (this.currentTool === "select") {
+      const selectTool = this.tools.get("select");
+      return selectTool?.getMarquee?.() || null;
+    }
+    return null;
+  }
+};
+var Drawfn = class {
+  constructor(options) {
+    this.listeners = /* @__PURE__ */ new Map();
+    this.rafId = null;
+    this.needsRender = false;
+    this.selectedIds = /* @__PURE__ */ new Set();
+    this.hoveredId = null;
+    // Space-to-pan state
+    this.isSpacePressed = false;
+    this.toolBeforeSpace = null;
+    this.handlePointerDown = (e) => {
+      this.emit("pointerDown", e);
+      const context = this.createToolContext();
+      this.toolManager.handlePointerDown(e, context, this.selectedIds);
+      this.scheduleRender();
+    };
+    this.handlePointerMove = (e) => {
+      this.emit("pointerMove", e);
+      const context = this.createToolContext();
+      this.toolManager.handlePointerMove(e, context);
+      this.scheduleRender();
+    };
+    this.handlePointerUp = (e) => {
+      this.emit("pointerUp", e);
+      const context = this.createToolContext();
+      this.toolManager.handlePointerUp(e, context);
+      this.scheduleRender();
+    };
+    this.handleWheel = (e) => {
+      e.preventDefault();
+      const delta = e.deltaY * -1e-3;
+      const oldZoom = this.scene.camera.zoom;
+      const newZoom = Math.max(0.1, Math.min(5, oldZoom + delta));
+      const point = screenToCanvas(
+        { x: e.clientX, y: e.clientY },
+        this.scene.camera,
+        this.canvas
+      );
+      this.scene.camera.zoom = newZoom;
+      const zoomRatio = newZoom / oldZoom;
+      this.scene.camera.x = point.x - (point.x - this.scene.camera.x) * zoomRatio;
+      this.scene.camera.y = point.y - (point.y - this.scene.camera.y) * zoomRatio;
+      this.emit("cameraChanged", this.scene.camera);
+      this.scheduleRender();
+    };
+    this.handleKeyDown = (e) => {
+      if (e.key === " " && !this.isSpacePressed && e.target === this.canvas) {
+        e.preventDefault();
+        this.isSpacePressed = true;
+        this.toolBeforeSpace = this.getTool();
+        this.setTool("pan");
+        this.canvas.style.cursor = "grab";
+        return;
+      }
+      if (e.key === "Delete" || e.key === "Backspace") {
+        this.selectedIds.forEach((id) => this.remove(id));
+      } else if ((e.metaKey || e.ctrlKey) && e.key === "z") {
+        e.preventDefault();
+        if (e.shiftKey) {
+          this.redo();
+        } else {
+          this.undo();
+        }
+      } else if ((e.metaKey || e.ctrlKey) && e.key === "y") {
+        e.preventDefault();
+        this.redo();
+      } else {
+        const context = this.createToolContext();
+        this.toolManager.handleKeyDown(e, context);
+      }
+    };
+    this.handleKeyUp = (e) => {
+      if (e.key === " " && this.isSpacePressed) {
+        this.isSpacePressed = false;
+        if (this.toolBeforeSpace) {
+          this.setTool(this.toolBeforeSpace);
+          this.toolBeforeSpace = null;
+        }
+        this.canvas.style.cursor = "default";
+      }
+    };
+    this.canvas = options.canvas;
+    this.renderer = new Renderer(this.canvas, options.getImageBitmap);
+    this.history = new History();
+    this.toolManager = new ToolManager(this, options.overlayRoot);
+    this.scene = this.createEmptyScene();
+    this.onNodeClick = options.onNodeClick;
+    this.getNodePreview = options.getNodePreview;
+    this.setupEventListeners();
+    this.scheduleRender();
+  }
+  createEmptyScene() {
+    return {
+      version: 1,
+      id: generateId(),
+      elements: [],
+      camera: { x: 0, y: 0, zoom: 1 },
+      background: {
+        color: "#ffffff",
+        grid: { size: 16, color: "#e5e7eb", alpha: 0.6 }
+      }
+    };
+  }
+  load(scene) {
+    this.scene = JSON.parse(JSON.stringify(scene));
+    this.selectedIds.clear();
+    this.history.clear();
+    this.scheduleRender();
+  }
+  loadScene(sceneData) {
+    try {
+      if (!sceneData || typeof sceneData !== "object") {
+        console.error("Invalid scene data: not an object");
+        return false;
+      }
+      const version = sceneData.version || "1.0.0";
+      if (!this.isVersionCompatible(version)) {
+        console.warn(
+          `Scene version ${version} may not be fully compatible with current version`
+        );
+      }
+      const elements = Array.isArray(sceneData.elements) ? sceneData.elements.map((el) => this.sanitizeElement(el)).filter((el) => el !== null) : [];
+      const loadedScene = {
+        version: this.scene.version,
+        id: sceneData.id || generateId(),
+        elements,
+        camera: this.sanitizeCamera(sceneData.camera),
+        background: this.sanitizeBackground(sceneData.background)
+      };
+      this.scene = loadedScene;
+      this.selectedIds.clear();
+      this.history.clear();
+      this.scheduleRender();
+      return true;
+    } catch (error) {
+      console.error("Failed to load scene:", error);
+      return false;
+    }
+  }
+  isVersionCompatible(version) {
+    const [major] = version.split(".").map(Number);
+    const currentVersion = String(this.scene.version);
+    const [currentMajor] = currentVersion.split(".").map(Number);
+    return major === currentMajor;
+  }
+  sanitizeElement(element) {
+    if (!element || typeof element !== "object") return null;
+    if (!element.type || !element.id) return null;
+    const validTypes = [
+      "freedraw",
+      "rectangle",
+      "ellipse",
+      "arrow",
+      "text",
+      "image",
+      "node"
+    ];
+    if (!validTypes.includes(element.type)) {
+      console.warn(`Unknown element type: ${element.type}`);
+      return null;
+    }
+    return {
+      ...element,
+      id: element.id || generateId(),
+      x: typeof element.x === "number" ? element.x : 0,
+      y: typeof element.y === "number" ? element.y : 0,
+      w: typeof element.w === "number" ? element.w : 100,
+      h: typeof element.h === "number" ? element.h : 100,
+      rotation: typeof element.rotation === "number" ? element.rotation : 0,
+      stroke: typeof element.stroke === "string" ? element.stroke : "#000000",
+      fill: typeof element.fill === "string" ? element.fill : "transparent",
+      strokeWidth: typeof element.strokeWidth === "number" ? element.strokeWidth : 2,
+      opacity: typeof element.opacity === "number" ? element.opacity : 1
+    };
+  }
+  sanitizeCamera(camera) {
+    if (!camera || typeof camera !== "object") {
+      return { x: 0, y: 0, zoom: 1 };
+    }
+    return {
+      x: typeof camera.x === "number" ? camera.x : 0,
+      y: typeof camera.y === "number" ? camera.y : 0,
+      zoom: typeof camera.zoom === "number" ? Math.max(0.1, Math.min(5, camera.zoom)) : 1
+    };
+  }
+  sanitizeBackground(background) {
+    const defaultBg = {
+      color: "#ffffff",
+      grid: { size: 16, color: "#e5e7eb", alpha: 0.6 }
+    };
+    if (!background || typeof background !== "object") {
+      return defaultBg;
+    }
+    return {
+      color: typeof background.color === "string" ? background.color : defaultBg.color,
+      grid: background.grid && typeof background.grid === "object" ? {
+        size: typeof background.grid.size === "number" ? background.grid.size : 16,
+        color: typeof background.grid.color === "string" ? background.grid.color : "#e5e7eb",
+        alpha: typeof background.grid.alpha === "number" ? background.grid.alpha : 0.6
+      } : defaultBg.grid
+    };
+  }
+  getScene() {
+    return JSON.parse(JSON.stringify(this.scene));
+  }
+  clear() {
+    this.scene = this.createEmptyScene();
+    this.selectedIds.clear();
+    this.history.clear();
+    this.scheduleRender();
+  }
+  add(element) {
+    const id = element.id || generateId();
+    const el = { ...element, id };
+    this.recordHistory();
+    this.scene.elements.push(el);
+    this.emit("elementAdded", el);
+    this.scheduleRender();
+    return id;
+  }
+  update(id, patch) {
+    const index = this.scene.elements.findIndex((el) => el.id === id);
+    if (index === -1) return;
+    this.recordHistory();
+    this.scene.elements[index] = {
+      ...this.scene.elements[index],
+      ...patch
+    };
+    this.emit("elementUpdated", this.scene.elements[index]);
+    this.scheduleRender();
+  }
+  remove(id) {
+    const index = this.scene.elements.findIndex((el) => el.id === id);
+    if (index === -1) return;
+    this.recordHistory();
+    this.scene.elements.splice(index, 1);
+    this.selectedIds.delete(id);
+    this.emit("elementRemoved", id);
+    this.scheduleRender();
+  }
+  bringToFront(id) {
+    const index = this.scene.elements.findIndex((el) => el.id === id);
+    if (index === -1) return;
+    this.recordHistory();
+    const [element] = this.scene.elements.splice(index, 1);
+    this.scene.elements.push(element);
+    this.scheduleRender();
+  }
+  sendToBack(id) {
+    const index = this.scene.elements.findIndex((el) => el.id === id);
+    if (index === -1) return;
+    this.recordHistory();
+    const [element] = this.scene.elements.splice(index, 1);
+    this.scene.elements.unshift(element);
+    this.scheduleRender();
+  }
+  setTool(tool, opts) {
+    this.toolManager.setTool(tool, opts);
+  }
+  getTool() {
+    return this.toolManager.getCurrentTool();
+  }
+  setCamera(camera) {
+    this.scene.camera = { ...this.scene.camera, ...camera };
+    this.emit("cameraChanged", this.scene.camera);
+    this.scheduleRender();
+  }
+  getCamera() {
+    return { ...this.scene.camera };
+  }
+  screenToCanvas(point) {
+    return screenToCanvas(point, this.scene.camera, this.canvas);
+  }
+  undo() {
+    const prevScene = this.history.undo(this.scene);
+    if (prevScene) {
+      this.scene = prevScene;
+      this.selectedIds.clear();
+      this.emitHistoryChanged();
+      this.scheduleRender();
+    }
+  }
+  redo() {
+    const nextScene = this.history.redo(this.scene);
+    if (nextScene) {
+      this.scene = nextScene;
+      this.selectedIds.clear();
+      this.emitHistoryChanged();
+      this.scheduleRender();
+    }
+  }
+  editTextElement(id) {
+    const element = this.scene.elements.find((el) => el.id === id);
+    if (!element || element.type !== "text") return;
+    this.setTool("text");
+    const textTool = this.toolManager.getTool("text");
+    if (textTool && textTool.editElement) {
+      textTool.editElement(id, this.canvas, this.scene);
+    }
+  }
+  async exportPNG(opts) {
+    const padding = opts?.padding ?? 20;
+    const scale = opts?.scale ?? 2;
+    const transparent = opts?.transparent ?? false;
+    const selectedOnly = opts?.selectedOnly ?? false;
+    const fitContent = opts?.fitContent ?? false;
+    const elementsToExport = selectedOnly ? this.scene.elements.filter((el) => this.selectedIds.has(el.id)) : this.scene.elements;
+    let canvasWidth = this.canvas.width;
+    let canvasHeight = this.canvas.height;
+    let offsetX = 0;
+    let offsetY = 0;
+    if (fitContent && elementsToExport.length > 0) {
+      const bounds = this.getContentBounds(elementsToExport);
+      canvasWidth = (bounds.w + padding * 2) * scale;
+      canvasHeight = (bounds.h + padding * 2) * scale;
+      offsetX = -(bounds.x - padding);
+      offsetY = -(bounds.y - padding);
+    }
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = canvasWidth * (fitContent ? 1 : scale);
+    tempCanvas.height = canvasHeight * (fitContent ? 1 : scale);
+    const ctx = tempCanvas.getContext("2d");
+    ctx.scale(scale, scale);
+    if (fitContent) {
+      ctx.translate(offsetX, offsetY);
+    }
+    if (!transparent) {
+      ctx.fillStyle = this.scene.background.color;
+      ctx.fillRect(
+        fitContent ? -offsetX : 0,
+        fitContent ? -offsetY : 0,
+        fitContent ? canvasWidth / scale : this.canvas.width,
+        fitContent ? canvasHeight / scale : this.canvas.height
+      );
+    }
+    const exportScene = {
+      ...this.scene,
+      elements: elementsToExport
+    };
+    const tempRenderer = new Renderer(tempCanvas);
+    tempRenderer.render(exportScene);
+    return new Promise((resolve, reject) => {
+      tempCanvas.toBlob((blob) => {
+        if (blob) resolve(blob);
+        else reject(new Error("Failed to export PNG"));
+      }, "image/png");
+    });
+  }
+  getContentBounds(elements) {
+    if (elements.length === 0) {
+      return { x: 0, y: 0, w: 800, h: 600 };
+    }
+    let minX = Infinity, minY = Infinity;
+    let maxX = -Infinity, maxY = -Infinity;
+    for (const element of elements) {
+      const bounds = element.rotation !== 0 ? getOBBBounds(element) : getElementBounds(element);
+      minX = Math.min(minX, bounds.x);
+      minY = Math.min(minY, bounds.y);
+      maxX = Math.max(maxX, bounds.x + bounds.w);
+      maxY = Math.max(maxY, bounds.y + bounds.h);
+    }
+    return {
+      x: minX,
+      y: minY,
+      w: maxX - minX,
+      h: maxY - minY
+    };
+  }
+  async exportSVG(opts) {
+    opts?.padding ?? 20;
+    const scale = opts?.scale ?? 1;
+    let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${this.canvas.width * scale}" height="${this.canvas.height * scale}" viewBox="0 0 ${this.canvas.width} ${this.canvas.height}">`;
+    svg += `<rect width="100%" height="100%" fill="${this.scene.background.color}"/>`;
+    for (const element of this.scene.elements) {
+      svg += this.elementToSVG(element);
+    }
+    svg += "</svg>";
+    return svg;
+  }
+  elementToSVG(element) {
+    let transform = "";
+    if (element.rotation !== 0) {
+      const cx = element.x + element.w / 2;
+      const cy = element.y + element.h / 2;
+      transform = ` transform="rotate(${element.rotation * 180 / Math.PI} ${cx} ${cy})"`;
+    }
+    const commonAttrs = `opacity="${element.opacity}" stroke="${element.stroke}" stroke-width="${element.strokeWidth}" fill="${element.fill}"${transform}`;
+    switch (element.type) {
+      case "rectangle":
+        return `<rect x="${element.x}" y="${element.y}" width="${element.w}" height="${element.h}" ${commonAttrs}/>`;
+      case "ellipse":
+        const cx = element.x + element.w / 2;
+        const cy = element.y + element.h / 2;
+        return `<ellipse cx="${cx}" cy="${cy}" rx="${element.w / 2}" ry="${element.h / 2}" ${commonAttrs}/>`;
+      case "text":
+        const textEl = element;
+        return `<text x="${element.x}" y="${element.y + textEl.fontSize}" font-family="${textEl.fontFamily}" font-size="${textEl.fontSize}" ${commonAttrs}>${this.escapeXml(textEl.text)}</text>`;
+      case "freedraw": {
+        const freedraw = element;
+        if (freedraw.points.length === 0) return "";
+        const points = freedraw.points.map((p) => [
+          p[0],
+          p[1],
+          p[2] ?? 0.5
+        ]);
+        const stroke = getStroke(points, {
+          size: freedraw.style?.size ?? element.strokeWidth * 2,
+          thinning: freedraw.style?.thinning ?? 0.5,
+          smoothing: freedraw.style?.smoothing ?? 0.5,
+          streamline: freedraw.style?.streamline ?? 0.5,
+          simulatePressure: true
+        });
+        let pathData = `M ${stroke[0][0] + element.x} ${stroke[0][1] + element.y}`;
+        for (let i = 1; i < stroke.length; i++) {
+          pathData += ` L ${stroke[i][0] + element.x} ${stroke[i][1] + element.y}`;
+        }
+        pathData += " Z";
+        return `<path d="${pathData}" fill="${element.stroke}" opacity="${element.opacity}"${transform}/>`;
+      }
+      case "arrow": {
+        const arrow = element;
+        if (arrow.points.length < 2) return "";
+        let pathData = `M ${arrow.points[0][0] + element.x} ${arrow.points[0][1] + element.y}`;
+        for (let i = 1; i < arrow.points.length; i++) {
+          pathData += ` L ${arrow.points[i][0] + element.x} ${arrow.points[i][1] + element.y}`;
+        }
+        let svg = `<path d="${pathData}" stroke="${element.stroke}" stroke-width="${element.strokeWidth}" fill="none" opacity="${element.opacity}"${transform}/>`;
+        if (arrow.head === "triangle") {
+          const last = arrow.points[arrow.points.length - 1];
+          const prev = arrow.points[arrow.points.length - 2];
+          const angle = Math.atan2(last[1] - prev[1], last[0] - prev[0]);
+          const headLen = 10;
+          const tip = [last[0] + element.x, last[1] + element.y];
+          const left = [
+            tip[0] - headLen * Math.cos(angle - Math.PI / 6),
+            tip[1] - headLen * Math.sin(angle - Math.PI / 6)
+          ];
+          const right = [
+            tip[0] - headLen * Math.cos(angle + Math.PI / 6),
+            tip[1] - headLen * Math.sin(angle + Math.PI / 6)
+          ];
+          svg += `<polygon points="${tip[0]},${tip[1]} ${left[0]},${left[1]} ${right[0]},${right[1]}" fill="${element.stroke}" opacity="${element.opacity}"${transform}/>`;
+        }
+        return svg;
+      }
+      case "image": {
+        const img = element;
+        return `<image x="${element.x}" y="${element.y}" width="${element.w}" height="${element.h}" href="${this.escapeXml(img.src)}" opacity="${element.opacity}"${transform}/>`;
+      }
+      case "node": {
+        const node = element;
+        let svg = `<rect x="${element.x}" y="${element.y}" width="${element.w}" height="${element.h}" rx="8" ${commonAttrs}/>`;
+        if (node.preview?.title) {
+          svg += `<text x="${element.x + 12}" y="${element.y + 24}" font-family="sans-serif" font-size="14" fill="${element.stroke}">${this.escapeXml(node.preview.title)}</text>`;
+        }
+        return svg;
+      }
+      default:
+        return "";
+    }
+  }
+  escapeXml(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+  }
+  on(event, handler) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(handler);
+    return () => {
+      this.listeners.get(event)?.delete(handler);
+    };
+  }
+  emit(event, ...args) {
+    this.listeners.get(event)?.forEach((handler) => handler(...args));
+  }
+  emitHistoryChanged() {
+    this.emit("historyChanged", {
+      canUndo: this.history.canUndo(),
+      canRedo: this.history.canRedo()
+    });
+  }
+  recordHistory() {
+    this.history.push(this.scene);
+    this.emitHistoryChanged();
+  }
+  createToolContext() {
+    return {
+      addElement: (element) => this.add(element),
+      updateElement: (id, patch) => this.update(id, patch),
+      removeElement: (id) => this.remove(id),
+      recordHistory: () => this.recordHistory(),
+      getScene: () => this.getScene(),
+      getCamera: () => this.getCamera(),
+      getDrawfn: () => this,
+      getSelection: () => this.selectedIds
+    };
+  }
+  setupEventListeners() {
+    this.canvas.addEventListener("pointerdown", this.handlePointerDown);
+    this.canvas.addEventListener("pointermove", this.handlePointerMove);
+    this.canvas.addEventListener("pointerup", this.handlePointerUp);
+    this.canvas.addEventListener("wheel", this.handleWheel);
+    window.addEventListener("keydown", this.handleKeyDown);
+    window.addEventListener("keyup", this.handleKeyUp);
+  }
+  scheduleRender() {
+    this.needsRender = true;
+    if (this.rafId !== null) return;
+    this.rafId = requestAnimationFrame(() => {
+      if (this.needsRender) {
+        const marquee = this.toolManager.getMarquee();
+        this.renderer.render(this.scene, {
+          selectedIds: this.selectedIds,
+          hoveredId: this.hoveredId,
+          marquee
+        });
+        this.needsRender = false;
+      }
+      this.rafId = null;
+    });
+  }
+  destroy() {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+    }
+    this.canvas.removeEventListener("pointerdown", this.handlePointerDown);
+    this.canvas.removeEventListener("pointermove", this.handlePointerMove);
+    this.canvas.removeEventListener("pointerup", this.handlePointerUp);
+    this.canvas.removeEventListener("wheel", this.handleWheel);
+    window.removeEventListener("keydown", this.handleKeyDown);
+    window.removeEventListener("keyup", this.handleKeyUp);
+    this.listeners.clear();
+  }
+  getSelectedIds() {
+    return Array.from(this.selectedIds);
+  }
+  setSelection(ids) {
+    this.selectedIds = new Set(ids);
+    this.emit("selectionChanged", ids);
+    this.scheduleRender();
+  }
+  getElements() {
+    return [...this.scene.elements];
+  }
+  getElementById(id) {
+    return this.scene.elements.find((el) => el.id === id);
+  }
+};
+
+export { Drawfn, canvasToScreen, generateId, screenToCanvas };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map