canvas-drawing-editor 1.0.1 → 2.0.0

package/dist/canvas-drawing-editor.es.js

@@ -0,0 +1,1143 @@
+const f = {
+  title: "Canvas Editor",
+  showPencil: !0,
+  showRectangle: !0,
+  showCircle: !0,
+  showText: !0,
+  showImage: !0,
+  showZoom: !0,
+  showDownload: !0,
+  showExport: !0,
+  showImport: !0,
+  showColor: !0,
+  showMinimap: !0
+};
+class b extends HTMLElement {
+  constructor() {
+    super(), this.config = { ...f }, this.objects = [], this.selectedId = null, this.tool = "SELECT", this.color = "#000000", this.lineWidth = 3, this.isDragging = !1, this.dragStart = null, this.currentObject = null, this.dragOffset = { x: 0, y: 0 }, this.isTextInputVisible = !1, this.textInputPos = { x: 0, y: 0 }, this.textInputScreenPos = { x: 0, y: 0 }, this.editingTextId = null, this.isResizing = !1, this.resizeHandle = null, this.resizeStartBounds = null, this.resizeOriginalObject = null, this.history = [], this.clipboard = null, this.scale = 1, this.panOffset = { x: 0, y: 0 }, this.isPanning = !1, this.panStart = { x: 0, y: 0 }, this.shadow = this.attachShadow({ mode: "open" }), this.boundHandleResize = this.handleResize.bind(this), this.boundHandleKeyDown = this.handleKeyDown.bind(this), this.boundHandleWheel = this.handleWheel.bind(this);
+  }
+  // 观察的属性
+  static get observedAttributes() {
+    return [
+      "title",
+      "show-pencil",
+      "show-rectangle",
+      "show-circle",
+      "show-text",
+      "show-image",
+      "show-zoom",
+      "show-download",
+      "show-export",
+      "show-import",
+      "show-color",
+      "show-minimap"
+    ];
+  }
+  // 生命周期：连接到 DOM
+  connectedCallback() {
+    this.parseAttributes(), this.render(), this.setupEventListeners(), this.initCanvas();
+  }
+  // 生命周期：从 DOM 断开
+  disconnectedCallback() {
+    this.removeEventListeners();
+  }
+  // 生命周期：属性变化
+  attributeChangedCallback(t, i, s) {
+    i !== s && (this.parseAttributes(), this.container && this.updateUI());
+  }
+  // 解析 HTML 属性
+  parseAttributes() {
+    this.config = {
+      title: this.getAttribute("title") || f.title,
+      showPencil: this.getAttribute("show-pencil") !== "false",
+      showRectangle: this.getAttribute("show-rectangle") !== "false",
+      showCircle: this.getAttribute("show-circle") !== "false",
+      showText: this.getAttribute("show-text") !== "false",
+      showImage: this.getAttribute("show-image") !== "false",
+      showZoom: this.getAttribute("show-zoom") !== "false",
+      showDownload: this.getAttribute("show-download") !== "false",
+      showExport: this.getAttribute("show-export") !== "false",
+      showImport: this.getAttribute("show-import") !== "false",
+      showColor: this.getAttribute("show-color") !== "false",
+      showMinimap: this.getAttribute("show-minimap") !== "false"
+    };
+  }
+  // 生成唯一 ID
+  generateId() {
+    return Math.random().toString(36).substr(2, 9);
+  }
+  // 设置事件监听
+  setupEventListeners() {
+    window.addEventListener("resize", this.boundHandleResize), window.addEventListener("keydown", this.boundHandleKeyDown);
+  }
+  // 移除事件监听
+  removeEventListeners() {
+    window.removeEventListener("resize", this.boundHandleResize), window.removeEventListener("keydown", this.boundHandleKeyDown), this.canvas && this.canvas.removeEventListener("wheel", this.boundHandleWheel);
+  }
+  // 窗口大小变化处理
+  handleResize() {
+    this.initCanvas();
+  }
+  // 初始化画布
+  initCanvas() {
+    !this.canvasContainer || !this.canvas || requestAnimationFrame(() => {
+      this.canvas.width = this.canvasContainer.clientWidth, this.canvas.height = this.canvasContainer.clientHeight, this.renderCanvas(), this.renderMinimap();
+    });
+  }
+  // 获取鼠标在画布上的位置（考虑缩放和平移）
+  getMousePos(t) {
+    const i = this.canvas.getBoundingClientRect();
+    let s, e;
+    if ("touches" in t && t.touches.length > 0)
+      s = t.touches[0].clientX, e = t.touches[0].clientY;
+    else if ("clientX" in t)
+      s = t.clientX, e = t.clientY;
+    else
+      return { x: 0, y: 0 };
+    const n = (s - i.left - this.panOffset.x) / this.scale, a = (e - i.top - this.panOffset.y) / this.scale;
+    return { x: n, y: a };
+  }
+  // 获取屏幕坐标（不考虑缩放和平移）
+  getScreenPos(t) {
+    const i = this.canvas.getBoundingClientRect();
+    let s, e;
+    if ("touches" in t && t.touches.length > 0)
+      s = t.touches[0].clientX, e = t.touches[0].clientY;
+    else if ("clientX" in t)
+      s = t.clientX, e = t.clientY;
+    else
+      return { x: 0, y: 0 };
+    return { x: s - i.left, y: e - i.top };
+  }
+  // 获取对象边界
+  getObjectBounds(t) {
+    switch (t.type) {
+      case "RECTANGLE":
+      case "IMAGE": {
+        const i = t;
+        return { x: i.x, y: i.y, width: i.width, height: i.height };
+      }
+      case "CIRCLE": {
+        const i = t;
+        return { x: i.x - i.radius, y: i.y - i.radius, width: i.radius * 2, height: i.radius * 2 };
+      }
+      case "TEXT": {
+        const i = t, s = i.text.length * i.fontSize * 0.6;
+        return { x: i.x, y: i.y - i.fontSize, width: s, height: i.fontSize };
+      }
+      case "PATH": {
+        const i = t;
+        if (i.points.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
+        const s = Math.min(...i.points.map((o) => o.x)), e = Math.max(...i.points.map((o) => o.x)), n = Math.min(...i.points.map((o) => o.y)), a = Math.max(...i.points.map((o) => o.y));
+        return { x: s, y: n, width: e - s, height: a - n };
+      }
+    }
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  // 检查调整大小手柄
+  getResizeHandleAtPoint(t, i, s) {
+    const e = this.getObjectBounds(t), n = 8, a = [
+      { name: "nw", x: e.x, y: e.y },
+      { name: "ne", x: e.x + e.width, y: e.y },
+      { name: "sw", x: e.x, y: e.y + e.height },
+      { name: "se", x: e.x + e.width, y: e.y + e.height }
+    ];
+    for (const o of a)
+      if (Math.abs(i - o.x) <= n && Math.abs(s - o.y) <= n)
+        return o.name;
+    return null;
+  }
+  // 碰撞检测
+  isHit(t, i, s) {
+    switch (t.type) {
+      case "RECTANGLE": {
+        const e = t;
+        return i >= e.x && i <= e.x + e.width && s >= e.y && s <= e.y + e.height;
+      }
+      case "CIRCLE": {
+        const e = t;
+        return Math.sqrt(Math.pow(i - e.x, 2) + Math.pow(s - e.y, 2)) <= e.radius;
+      }
+      case "IMAGE": {
+        const e = t;
+        return i >= e.x && i <= e.x + e.width && s >= e.y && s <= e.y + e.height;
+      }
+      case "TEXT": {
+        const e = t;
+        return i >= e.x && i <= e.x + e.text.length * e.fontSize * 0.6 && s >= e.y - e.fontSize && s <= e.y;
+      }
+      case "PATH": {
+        const e = t;
+        if (e.points.length === 0) return !1;
+        const n = Math.min(...e.points.map((r) => r.x)), a = Math.max(...e.points.map((r) => r.x)), o = Math.min(...e.points.map((r) => r.y)), l = Math.max(...e.points.map((r) => r.y));
+        return i >= n && i <= a && s >= o && s <= l;
+      }
+    }
+    return !1;
+  }
+  // 保存历史
+  saveHistory() {
+    this.history.push(JSON.parse(JSON.stringify(this.objects)));
+  }
+  // 撤销
+  undo() {
+    if (this.history.length === 0) return;
+    const t = this.history.pop();
+    t && (this.objects = t, this.selectedId = null, this.renderCanvas(), this.renderMinimap(), this.dispatchChangeEvent());
+  }
+  // 删除选中对象
+  deleteSelected() {
+    this.selectedId && (this.saveHistory(), this.objects = this.objects.filter((t) => t.id !== this.selectedId), this.selectedId = null, this.renderCanvas(), this.renderMinimap(), this.updateUI(), this.dispatchChangeEvent());
+  }
+  // 复制选中对象
+  copySelected() {
+    if (this.selectedId) {
+      const t = this.objects.find((i) => i.id === this.selectedId);
+      t && (this.clipboard = JSON.parse(JSON.stringify(t)));
+    }
+  }
+  // 粘贴对象
+  pasteObject() {
+    if (this.clipboard) {
+      this.saveHistory();
+      const t = {
+        ...JSON.parse(JSON.stringify(this.clipboard)),
+        id: this.generateId(),
+        x: this.clipboard.x + 20,
+        y: this.clipboard.y + 20
+      };
+      t.type === "PATH" && t.points && (t.points = t.points.map((i) => ({
+        x: i.x + 20,
+        y: i.y + 20
+      }))), this.objects.push(t), this.selectedId = t.id, this.clipboard = t, this.renderCanvas(), this.renderMinimap(), this.updateUI(), this.dispatchChangeEvent();
+    }
+  }
+  // 派发变化事件
+  dispatchChangeEvent() {
+    this.dispatchEvent(new CustomEvent("editor-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { objects: this.objects }
+    }));
+  }
+  // 键盘事件处理
+  handleKeyDown(t) {
+    if (!this.isTextInputVisible) {
+      if ((t.ctrlKey || t.metaKey) && t.key === "z") {
+        t.preventDefault(), this.undo();
+        return;
+      }
+      if ((t.ctrlKey || t.metaKey) && t.key === "c") {
+        this.selectedId && (t.preventDefault(), this.copySelected());
+        return;
+      }
+      if ((t.ctrlKey || t.metaKey) && t.key === "v") {
+        this.clipboard && (t.preventDefault(), this.pasteObject());
+        return;
+      }
+      if ((t.key === "Delete" || t.key === "Backspace") && this.selectedId) {
+        t.preventDefault(), this.deleteSelected();
+        return;
+      }
+      if (!t.ctrlKey && !t.metaKey)
+        switch (t.key.toLowerCase()) {
+          case "v":
+            this.setTool("SELECT");
+            break;
+          case "p":
+          case "b":
+            this.setTool("PENCIL");
+            break;
+          case "r":
+            this.setTool("RECTANGLE");
+            break;
+          case "o":
+            this.setTool("CIRCLE");
+            break;
+          case "t":
+            this.setTool("TEXT");
+            break;
+          case "escape":
+            this.selectedId = null, this.hideTextInput(), this.renderCanvas(), this.updateUI();
+            break;
+        }
+    }
+  }
+  // 滚轮缩放
+  handleWheel(t) {
+    t.preventDefault();
+    const i = this.canvas.getBoundingClientRect(), s = t.clientX - i.left, e = t.clientY - i.top, n = t.deltaY > 0 ? 0.9 : 1.1, a = this.scale * n;
+    this.zoomAtPoint(a, s, e);
+  }
+  // 以指定点为中心缩放
+  zoomAtPoint(t, i, s) {
+    const e = Math.min(Math.max(t, 0.2), 5), n = (i - this.panOffset.x) / this.scale, a = (s - this.panOffset.y) / this.scale, o = i - n * e, l = s - a * e;
+    this.scale = e, this.panOffset = { x: o, y: l }, this.renderCanvas(), this.renderMinimap(), this.updateZoomDisplay();
+  }
+  // 放大
+  zoomIn() {
+    const t = this.canvas.width / 2, i = this.canvas.height / 2;
+    this.zoomAtPoint(this.scale * 1.2, t, i);
+  }
+  // 缩小
+  zoomOut() {
+    const t = this.canvas.width / 2, i = this.canvas.height / 2;
+    this.zoomAtPoint(this.scale / 1.2, t, i);
+  }
+  // 重置缩放
+  resetZoom() {
+    this.scale = 1, this.panOffset = { x: 0, y: 0 }, this.renderCanvas(), this.renderMinimap(), this.updateZoomDisplay();
+  }
+  // 更新缩放显示
+  updateZoomDisplay() {
+    const t = this.shadow.querySelector(".zoom-text");
+    t && (t.textContent = `${Math.round(this.scale * 100)}%`);
+  }
+  // 设置工具
+  setTool(t) {
+    this.tool = t, this.updateToolButtons();
+  }
+  // 更新工具按钮状态
+  updateToolButtons() {
+    this.shadow.querySelectorAll(".tool-btn").forEach((i) => {
+      i.getAttribute("data-tool") === this.tool ? i.classList.add("active") : i.classList.remove("active");
+    });
+  }
+  // 隐藏文本输入
+  hideTextInput() {
+    this.isTextInputVisible = !1, this.textInputContainer && (this.textInputContainer.style.display = "none"), this.editingTextId = null;
+  }
+  // 显示文本输入
+  showTextInput(t, i, s = "") {
+    this.isTextInputVisible = !0, this.textInputScreenPos = { x: t, y: i }, this.textInputContainer && this.textInput && (this.textInputContainer.style.display = "block", this.textInputContainer.style.left = `${t}px`, this.textInputContainer.style.top = `${i - 30}px`, this.textInput.value = s, this.textInput.style.color = this.color, setTimeout(() => {
+      this.textInput.focus(), s && this.textInput.select();
+    }, 0));
+  }
+  // 提交文本
+  submitText() {
+    var i, s;
+    const t = (s = (i = this.textInput) == null ? void 0 : i.value) == null ? void 0 : s.trim();
+    if (t) {
+      if (this.editingTextId) {
+        const e = this.objects.find((n) => n.id === this.editingTextId);
+        e && e.text !== t && (this.saveHistory(), e.text = t), this.selectedId = this.editingTextId;
+      } else {
+        this.saveHistory();
+        const e = {
+          id: this.generateId(),
+          type: "TEXT",
+          x: this.textInputPos.x,
+          y: this.textInputPos.y,
+          text: t,
+          fontSize: 24,
+          color: this.color,
+          lineWidth: this.lineWidth
+        };
+        this.objects.push(e), this.selectedId = e.id;
+      }
+      this.dispatchChangeEvent();
+    }
+    this.hideTextInput(), this.setTool("SELECT"), this.renderCanvas(), this.renderMinimap(), this.updateUI();
+  }
+  // 画布鼠标按下
+  handleCanvasPointerDown(t) {
+    const { x: i, y: s } = this.getMousePos(t), e = this.getScreenPos(t);
+    if (this.dragStart = { x: i, y: s }, this.isDragging = !0, this.isTextInputVisible && this.tool !== "TEXT" && this.submitText(), this.tool === "SELECT") {
+      if (this.selectedId) {
+        const a = this.objects.find((o) => o.id === this.selectedId);
+        if (a) {
+          const o = this.getResizeHandleAtPoint(a, i, s);
+          if (o) {
+            this.saveHistory(), this.isResizing = !0, this.resizeHandle = o, this.resizeStartBounds = this.getObjectBounds(a), this.resizeOriginalObject = JSON.parse(JSON.stringify(a));
+            return;
+          }
+        }
+      }
+      const n = [...this.objects].reverse().find((a) => this.isHit(a, i, s));
+      n ? (this.selectedId = n.id, this.dragOffset = { x: i - n.x, y: s - n.y }, this.saveHistory(), this.updateUI()) : (this.selectedId = null, this.isPanning = !0, this.panStart = e, this.updateUI());
+    } else if (this.tool === "TEXT")
+      this.textInputPos = { x: i, y: s }, this.showTextInput(e.x, e.y), this.isDragging = !1;
+    else {
+      this.saveHistory();
+      const n = this.generateId();
+      this.tool === "RECTANGLE" ? this.currentObject = { id: n, type: "RECTANGLE", x: i, y: s, width: 0, height: 0, color: this.color, lineWidth: this.lineWidth } : this.tool === "CIRCLE" ? this.currentObject = { id: n, type: "CIRCLE", x: i, y: s, radius: 0, color: this.color, lineWidth: this.lineWidth } : this.tool === "PENCIL" && (this.currentObject = { id: n, type: "PATH", x: i, y: s, points: [{ x: i, y: s }], color: this.color, lineWidth: this.lineWidth });
+    }
+    this.renderCanvas();
+  }
+  // 画布鼠标移动
+  handleCanvasPointerMove(t) {
+    if (this.isPanning) {
+      const e = this.getScreenPos(t), n = e.x - this.panStart.x, a = e.y - this.panStart.y;
+      this.panOffset = { x: this.panOffset.x + n, y: this.panOffset.y + a }, this.panStart = e, this.renderCanvas(), this.renderMinimap();
+      return;
+    }
+    if (!this.isDragging || !this.dragStart) return;
+    const { x: i, y: s } = this.getMousePos(t);
+    if (this.isResizing && this.selectedId && this.resizeHandle && this.resizeStartBounds && this.resizeOriginalObject) {
+      const e = this.objects.find((d) => d.id === this.selectedId);
+      if (!e) return;
+      const n = i - this.dragStart.x, a = s - this.dragStart.y;
+      let o = this.resizeStartBounds.x, l = this.resizeStartBounds.y, r = this.resizeStartBounds.width, h = this.resizeStartBounds.height;
+      switch (this.resizeHandle.includes("e") && (r = this.resizeStartBounds.width + n), this.resizeHandle.includes("w") && (o = this.resizeStartBounds.x + n, r = this.resizeStartBounds.width - n), this.resizeHandle.includes("s") && (h = this.resizeStartBounds.height + a), this.resizeHandle.includes("n") && (l = this.resizeStartBounds.y + a, h = this.resizeStartBounds.height - a), r = Math.max(10, r), h = Math.max(10, h), e.type) {
+        case "RECTANGLE":
+        case "IMAGE":
+          e.x = o, e.y = l, e.width = r, e.height = h;
+          break;
+        case "CIRCLE": {
+          const d = Math.max(r, h) / 2;
+          e.x = o + d, e.y = l + d, e.radius = d;
+          break;
+        }
+        case "TEXT": {
+          const d = this.resizeOriginalObject, c = r / this.resizeStartBounds.width;
+          e.x = o, e.y = l + h, e.fontSize = Math.max(8, Math.round(d.fontSize * c));
+          break;
+        }
+        case "PATH": {
+          const d = this.resizeOriginalObject, c = r / this.resizeStartBounds.width, p = h / this.resizeStartBounds.height;
+          e.points = d.points.map((u) => ({
+            x: o + (u.x - this.resizeStartBounds.x) * c,
+            y: l + (u.y - this.resizeStartBounds.y) * p
+          }));
+          break;
+        }
+      }
+      this.renderCanvas(), this.renderMinimap();
+      return;
+    }
+    if (this.tool === "SELECT" && this.selectedId) {
+      const e = this.objects.find((n) => n.id === this.selectedId);
+      if (e) {
+        if (e.type === "PATH") {
+          const n = e, a = i - this.dragStart.x, o = s - this.dragStart.y;
+          n.points = n.points.map((l) => ({ x: l.x + a, y: l.y + o })), this.dragStart = { x: i, y: s };
+        } else
+          e.x = i - this.dragOffset.x, e.y = s - this.dragOffset.y;
+        this.renderCanvas(), this.renderMinimap();
+      }
+    } else if (this.currentObject) {
+      if (this.currentObject.type === "RECTANGLE")
+        this.currentObject.width = i - this.currentObject.x, this.currentObject.height = s - this.currentObject.y;
+      else if (this.currentObject.type === "CIRCLE") {
+        const e = Math.sqrt(Math.pow(i - this.currentObject.x, 2) + Math.pow(s - this.currentObject.y, 2));
+        this.currentObject.radius = e;
+      } else this.currentObject.type === "PATH" && this.currentObject.points.push({ x: i, y: s });
+      this.renderCanvas();
+    }
+  }
+  // 画布鼠标抬起
+  handleCanvasPointerUp() {
+    this.isDragging = !1, this.dragStart = null, this.isResizing = !1, this.resizeHandle = null, this.resizeStartBounds = null, this.resizeOriginalObject = null, this.isPanning = !1, this.currentObject && (this.objects.push(this.currentObject), this.currentObject = null, this.dispatchChangeEvent()), this.renderCanvas(), this.renderMinimap();
+  }
+  // 双击编辑文本
+  handleCanvasDoubleClick(t) {
+    t.preventDefault();
+    const { x: i, y: s } = this.getMousePos(t), e = [...this.objects].reverse().find((n) => this.isHit(n, i, s));
+    if (e && e.type === "TEXT") {
+      const n = e;
+      this.editingTextId = n.id, this.textInputPos = { x: n.x, y: n.y };
+      const a = n.x * this.scale + this.panOffset.x, o = n.y * this.scale + this.panOffset.y;
+      this.showTextInput(a, o, n.text), this.setTool("SELECT");
+    }
+  }
+  // 渲染画布
+  renderCanvas() {
+    if (this.ctx) {
+      if (this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.fillStyle = "#ffffff", this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height), this.ctx.save(), this.ctx.translate(this.panOffset.x, this.panOffset.y), this.ctx.scale(this.scale, this.scale), this.objects.forEach((t) => this.drawObject(this.ctx, t, !1)), this.currentObject && this.drawObject(this.ctx, this.currentObject, !1), this.selectedId && this.tool === "SELECT") {
+        const t = this.objects.find((i) => i.id === this.selectedId);
+        t && this.drawSelectionHandles(this.ctx, t);
+      }
+      this.ctx.restore();
+    }
+  }
+  // 绘制单个对象
+  drawObject(t, i, s) {
+    switch (t.beginPath(), t.strokeStyle = i.color, t.lineWidth = i.lineWidth, t.fillStyle = i.color, !s && i.id === this.selectedId ? (t.shadowColor = "rgba(0, 100, 255, 0.5)", t.shadowBlur = 10) : t.shadowBlur = 0, i.type) {
+      case "RECTANGLE": {
+        const e = i;
+        t.strokeRect(e.x, e.y, e.width, e.height);
+        break;
+      }
+      case "CIRCLE": {
+        const e = i;
+        t.beginPath(), t.arc(e.x, e.y, e.radius, 0, 2 * Math.PI), t.stroke();
+        break;
+      }
+      case "PATH": {
+        const e = i;
+        if (e.points.length < 2) break;
+        t.beginPath(), t.lineCap = "round", t.lineJoin = "round", t.moveTo(e.points[0].x, e.points[0].y);
+        for (let n = 1; n < e.points.length; n++)
+          t.lineTo(e.points[n].x, e.points[n].y);
+        t.stroke();
+        break;
+      }
+      case "TEXT": {
+        const e = i;
+        t.font = `${e.fontSize}px sans-serif`, t.fillText(e.text, e.x, e.y);
+        break;
+      }
+      case "IMAGE": {
+        const e = i;
+        if (e.imageElement && e.imageElement.complete)
+          t.drawImage(e.imageElement, e.x, e.y, e.width, e.height);
+        else if (e.dataUrl) {
+          const n = new Image();
+          n.onload = () => {
+            e.imageElement = n, this.renderCanvas();
+          }, n.src = e.dataUrl;
+        }
+        break;
+      }
+    }
+  }
+  // 绘制选中手柄
+  drawSelectionHandles(t, i) {
+    const s = this.getObjectBounds(i), e = 8;
+    t.shadowBlur = 0, t.fillStyle = "#3b82f6", t.strokeStyle = "#ffffff", t.lineWidth = 2, [
+      { x: s.x, y: s.y },
+      { x: s.x + s.width, y: s.y },
+      { x: s.x, y: s.y + s.height },
+      { x: s.x + s.width, y: s.y + s.height }
+    ].forEach((a) => {
+      t.beginPath(), t.rect(a.x - e / 2, a.y - e / 2, e, e), t.fill(), t.stroke();
+    }), t.strokeStyle = "#3b82f6", t.lineWidth = 1, t.setLineDash([5, 5]), t.strokeRect(s.x, s.y, s.width, s.height), t.setLineDash([]);
+  }
+  // 渲染小地图
+  renderMinimap() {
+    if (!this.minimapCtx || !this.config.showMinimap) return;
+    const t = this.minimapCanvas, i = this.canvas;
+    this.minimapCtx.clearRect(0, 0, t.width, t.height);
+    const s = t.width / i.width, e = t.height / i.height, n = Math.min(s, e) * 0.92, a = i.width * n, o = i.height * n, l = (t.width - a) / 2, r = (t.height - o) / 2;
+    this.minimapCtx.fillStyle = "#ffffff", this.minimapCtx.fillRect(l, r, a, o), this.minimapCtx.save(), this.minimapCtx.translate(l, r), this.minimapCtx.scale(n, n), this.minimapCtx.translate(this.panOffset.x, this.panOffset.y), this.minimapCtx.scale(this.scale, this.scale), (this.currentObject ? [...this.objects, this.currentObject] : this.objects).forEach((d) => {
+      switch (this.minimapCtx.fillStyle = d.color, this.minimapCtx.strokeStyle = d.color, this.minimapCtx.lineWidth = d.lineWidth, this.minimapCtx.setLineDash([]), d.type) {
+        case "RECTANGLE": {
+          const c = d;
+          this.minimapCtx.fillRect(c.x, c.y, c.width, c.height);
+          break;
+        }
+        case "CIRCLE": {
+          const c = d;
+          this.minimapCtx.beginPath(), this.minimapCtx.arc(c.x, c.y, c.radius, 0, Math.PI * 2), this.minimapCtx.fill();
+          break;
+        }
+        case "PATH": {
+          const c = d;
+          c.points.length > 0 && (this.minimapCtx.beginPath(), this.minimapCtx.lineCap = "round", this.minimapCtx.lineJoin = "round", this.minimapCtx.moveTo(c.points[0].x, c.points[0].y), c.points.forEach((p) => this.minimapCtx.lineTo(p.x, p.y)), this.minimapCtx.stroke());
+          break;
+        }
+        case "TEXT": {
+          const c = d;
+          this.minimapCtx.font = `${c.fontSize}px sans-serif`, this.minimapCtx.fillText(c.text, c.x, c.y);
+          break;
+        }
+        case "IMAGE": {
+          const c = d;
+          c.imageElement && this.minimapCtx.drawImage(c.imageElement, c.x, c.y, c.width, c.height);
+          break;
+        }
+      }
+    }), this.minimapCtx.restore(), this.minimapCtx.strokeStyle = "#94a3b8", this.minimapCtx.lineWidth = 1, this.minimapCtx.strokeRect(l, r, a, o);
+  }
+  // 小地图点击定位
+  handleMinimapClick(t) {
+    const i = this.minimapCanvas.getBoundingClientRect(), s = t.clientX - i.left, e = t.clientY - i.top, n = this.minimapCanvas.width / this.canvas.width, a = this.minimapCanvas.height / this.canvas.height, o = Math.min(n, a) * 0.92, l = this.canvas.width * o, r = this.canvas.height * o, h = (this.minimapCanvas.width - l) / 2, d = (this.minimapCanvas.height - r) / 2, c = s - h, p = e - d, u = (c / o - this.panOffset.x) / this.scale, g = (p / o - this.panOffset.y) / this.scale, m = this.canvas.width / 2, x = this.canvas.height / 2;
+    this.panOffset = {
+      x: m / this.scale - u,
+      y: x / this.scale - g
+    }, this.renderCanvas(), this.renderMinimap();
+  }
+  // 图片上传处理
+  handleImageUpload(t) {
+    const i = t.target;
+    if (!i.files || i.files.length === 0) return;
+    const s = i.files[0], e = new FileReader();
+    e.onload = (n) => {
+      var l;
+      const a = (l = n.target) == null ? void 0 : l.result, o = new Image();
+      o.onload = () => {
+        this.saveHistory();
+        const r = 300;
+        let h = o.width, d = o.height;
+        if (h > r || d > r) {
+          const p = Math.min(r / h, r / d);
+          h *= p, d *= p;
+        }
+        const c = {
+          id: this.generateId(),
+          type: "IMAGE",
+          x: 100,
+          y: 100,
+          width: h,
+          height: d,
+          color: "#000000",
+          lineWidth: 1,
+          dataUrl: a,
+          imageElement: o
+        };
+        this.objects.push(c), this.selectedId = c.id, this.setTool("SELECT"), this.renderCanvas(), this.renderMinimap(), this.updateUI(), this.dispatchChangeEvent();
+      }, o.src = a;
+    }, e.readAsDataURL(s), i.value = "";
+  }
+  // 保存 JSON
+  saveJson() {
+    const t = {
+      version: "1.0",
+      objects: this.objects.map((a) => {
+        const { imageElement: o, ...l } = a;
+        return l;
+      })
+    }, i = JSON.stringify(t, null, 2), s = new Blob([i], { type: "application/json" }), e = URL.createObjectURL(s), n = document.createElement("a");
+    n.href = e, n.download = "canvas-project.json", n.click(), URL.revokeObjectURL(e);
+  }
+  // 加载 JSON
+  loadJson(t) {
+    const i = t.target;
+    if (!i.files || i.files.length === 0) return;
+    const s = i.files[0], e = new FileReader();
+    e.onload = (n) => {
+      var a;
+      try {
+        const o = JSON.parse((a = n.target) == null ? void 0 : a.result);
+        o.objects && Array.isArray(o.objects) && (this.saveHistory(), this.objects = o.objects, this.selectedId = null, this.objects.forEach((l) => {
+          if (l.type === "IMAGE" && l.dataUrl) {
+            const r = new Image();
+            r.onload = () => {
+              l.imageElement = r, this.renderCanvas(), this.renderMinimap();
+            }, r.src = l.dataUrl;
+          }
+        }), this.renderCanvas(), this.renderMinimap(), this.updateUI(), this.dispatchChangeEvent());
+      } catch (o) {
+        console.error("Failed to load JSON:", o);
+      }
+    }, e.readAsText(s), i.value = "";
+  }
+  // 导出 PNG
+  exportPng() {
+    const t = document.createElement("canvas");
+    t.width = this.canvas.width, t.height = this.canvas.height;
+    const i = t.getContext("2d");
+    i.fillStyle = "#ffffff", i.fillRect(0, 0, t.width, t.height), i.translate(this.panOffset.x, this.panOffset.y), i.scale(this.scale, this.scale), this.objects.forEach((n) => this.drawObject(i, n, !0));
+    const s = t.toDataURL("image/png"), e = document.createElement("a");
+    e.href = s, e.download = "canvas-export.png", e.click();
+  }
+  // 更新 UI
+  updateUI() {
+    const t = this.shadow.querySelector(".selection-info");
+    if (t)
+      if (this.selectedId) {
+        const s = this.objects.find((e) => e.id === this.selectedId);
+        if (s) {
+          const n = {
+            RECTANGLE: "矩形",
+            CIRCLE: "圆形",
+            PATH: "画笔",
+            TEXT: "文本",
+            IMAGE: "图片"
+          }[s.type] || s.type;
+          t.innerHTML = `
+            <span class="selection-label">已选择: ${n}</span>
+            <button class="delete-btn" title="删除">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+              </svg>
+            </button>
+          `, t.classList.add("visible");
+          const a = t.querySelector(".delete-btn");
+          a && a.addEventListener("click", () => this.deleteSelected());
+        }
+      } else
+        t.classList.remove("visible"), t.innerHTML = "";
+    const i = this.shadow.querySelector(".undo-btn");
+    i && (i.disabled = this.history.length === 0);
+  }
+  // 渲染 DOM 结构
+  render() {
+    this.shadow.innerHTML = `
+      <style>${this.getStyles()}</style>
+      <div class="editor-container">
+        <!-- 左侧工具栏 -->
+        <div class="toolbar">
+          ${this.config.showPencil ? this.createToolButton("PENCIL", "pencil-icon", "画笔 (P)") : ""}
+          ${this.config.showRectangle ? this.createToolButton("RECTANGLE", "rect-icon", "矩形 (R)") : ""}
+          ${this.config.showCircle ? this.createToolButton("CIRCLE", "circle-icon", "圆形 (O)") : ""}
+          ${this.config.showText ? this.createToolButton("TEXT", "text-icon", "文本 (T)") : ""}
+          ${this.config.showImage ? `
+            <label class="tool-btn" title="插入图片">
+              <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="3" width="18" height="18" rx="2"/>
+                <circle cx="8.5" cy="8.5" r="1.5"/>
+                <path d="M21 15l-5-5L5 21"/>
+              </svg>
+              <input type="file" accept="image/*" class="hidden image-input" />
+            </label>
+          ` : ""}
+          <div class="divider"></div>
+          <button class="tool-btn undo-btn" title="撤销 (Ctrl+Z)" disabled>
+            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M3 7v6h6M3 13a9 9 0 1 0 2.5-6.5L3 7"/>
+            </svg>
+          </button>
+          <div class="spacer"></div>
+          ${this.config.showColor ? `
+            <input type="color" class="color-picker" value="${this.color}" title="颜色" />
+          ` : ""}
+        </div>
+
+        <!-- 主区域 -->
+        <div class="main-area">
+          <!-- 顶部栏 -->
+          <div class="top-bar">
+            <div class="top-bar-left">
+              <h2 class="title">${this.config.title}</h2>
+              <div class="selection-info"></div>
+            </div>
+            <div class="top-bar-right">
+              ${this.config.showZoom ? `
+                <div class="zoom-controls">
+                  <button class="zoom-btn zoom-out-btn" title="缩小">
+                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35M8 11h6"/>
+                    </svg>
+                  </button>
+                  <button class="zoom-text" title="重置缩放">100%</button>
+                  <button class="zoom-btn zoom-in-btn" title="放大">
+                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35M11 8v6M8 11h6"/>
+                    </svg>
+                  </button>
+                </div>
+              ` : ""}
+              ${this.config.showExport || this.config.showImport || this.config.showDownload ? `
+                <div class="file-controls">
+                  ${this.config.showExport ? `
+                    <button class="file-btn save-json-btn" title="保存项目 (JSON)">
+                      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>
+                      </svg>
+                    </button>
+                  ` : ""}
+                  ${this.config.showImport ? `
+                    <label class="file-btn" title="加载项目 (JSON)">
+                      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
+                      </svg>
+                      <input type="file" accept=".json" class="hidden load-json-input" />
+                    </label>
+                  ` : ""}
+                  ${this.config.showDownload ? `
+                    <button class="file-btn export-png-btn" title="导出 PNG">
+                      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+                      </svg>
+                    </button>
+                  ` : ""}
+                </div>
+              ` : ""}
+            </div>
+          </div>
+
+          <!-- 画布容器 -->
+          <div class="canvas-container">
+            <canvas class="main-canvas"></canvas>
+
+            ${this.config.showMinimap ? `
+              <div class="minimap-wrapper">
+                <div class="minimap-header">
+                  <svg class="minimap-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="3" width="18" height="18" rx="2"/>
+                    <path d="M3 9h18M9 21V9"/>
+                  </svg>
+                  <span>导航</span>
+                </div>
+                <canvas class="minimap-canvas" width="220" height="140"></canvas>
+              </div>
+            ` : ""}
+
+            <!-- 文本输入 -->
+            <div class="text-input-container" style="display: none;">
+              <input type="text" class="text-input" placeholder="输入文本..." />
+            </div>
+
+            <!-- 空画布提示 -->
+            <div class="empty-hint">
+              <h3>开始创作</h3>
+              <p>选择左侧的工具开始绘制</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    `, this.container = this.shadow.querySelector(".editor-container"), this.toolbar = this.shadow.querySelector(".toolbar"), this.topBar = this.shadow.querySelector(".top-bar"), this.canvasContainer = this.shadow.querySelector(".canvas-container"), this.canvas = this.shadow.querySelector(".main-canvas"), this.ctx = this.canvas.getContext("2d"), this.config.showMinimap && (this.minimapCanvas = this.shadow.querySelector(".minimap-canvas"), this.minimapCtx = this.minimapCanvas.getContext("2d")), this.textInputContainer = this.shadow.querySelector(".text-input-container"), this.textInput = this.shadow.querySelector(".text-input"), this.bindEvents();
+  }
+  // 绑定事件
+  bindEvents() {
+    this.canvas.addEventListener("mousedown", (h) => this.handleCanvasPointerDown(h)), this.canvas.addEventListener("mousemove", (h) => this.handleCanvasPointerMove(h)), this.canvas.addEventListener("mouseup", () => this.handleCanvasPointerUp()), this.canvas.addEventListener("mouseleave", () => this.handleCanvasPointerUp()), this.canvas.addEventListener("dblclick", (h) => this.handleCanvasDoubleClick(h)), this.canvas.addEventListener("touchstart", (h) => this.handleCanvasPointerDown(h)), this.canvas.addEventListener("touchmove", (h) => this.handleCanvasPointerMove(h)), this.canvas.addEventListener("touchend", () => this.handleCanvasPointerUp()), this.canvas.addEventListener("wheel", this.boundHandleWheel, { passive: !1 }), this.shadow.querySelectorAll(".tool-btn[data-tool]").forEach((h) => {
+      h.addEventListener("click", () => {
+        const d = h.getAttribute("data-tool");
+        this.setTool(d);
+      });
+    });
+    const t = this.shadow.querySelector(".undo-btn");
+    t && t.addEventListener("click", () => this.undo());
+    const i = this.shadow.querySelector(".color-picker");
+    i && i.addEventListener("input", (h) => {
+      this.color = h.target.value;
+    });
+    const s = this.shadow.querySelector(".image-input");
+    s && s.addEventListener("change", (h) => this.handleImageUpload(h));
+    const e = this.shadow.querySelector(".zoom-in-btn"), n = this.shadow.querySelector(".zoom-out-btn"), a = this.shadow.querySelector(".zoom-text");
+    e && e.addEventListener("click", () => this.zoomIn()), n && n.addEventListener("click", () => this.zoomOut()), a && a.addEventListener("click", () => this.resetZoom());
+    const o = this.shadow.querySelector(".save-json-btn"), l = this.shadow.querySelector(".load-json-input"), r = this.shadow.querySelector(".export-png-btn");
+    o && o.addEventListener("click", () => this.saveJson()), l && l.addEventListener("change", (h) => this.loadJson(h)), r && r.addEventListener("click", () => this.exportPng()), this.minimapCanvas && this.minimapCanvas.addEventListener("click", (h) => this.handleMinimapClick(h)), this.textInput && (this.textInput.addEventListener("keydown", (h) => {
+      h.key === "Enter" ? (h.preventDefault(), this.submitText()) : h.key === "Escape" && this.hideTextInput();
+    }), this.textInput.addEventListener("blur", () => {
+      this.isTextInputVisible && this.submitText();
+    }));
+  }
+  // 创建工具按钮 HTML
+  createToolButton(t, i, s) {
+    const e = {
+      "pencil-icon": '<path d="M17 3a2.85 2.85 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>',
+      "rect-icon": '<rect x="3" y="3" width="18" height="18" rx="2"/>',
+      "circle-icon": '<circle cx="12" cy="12" r="10"/>',
+      "text-icon": '<path d="M4 7V4h16v3M9 20h6M12 4v16"/>'
+    };
+    return `
+      <button class="tool-btn ${this.tool === t ? "active" : ""}" data-tool="${t}" title="${s}">
+        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          ${e[i]}
+        </svg>
+      </button>
+    `;
+  }
+  // 获取样式
+  getStyles() {
+    return `
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      }
+
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      .hidden {
+        display: none !important;
+      }
+
+      .editor-container {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        background: #f1f5f9;
+      }
+
+      /* 工具栏 */
+      .toolbar {
+        width: 64px;
+        background: #ffffff;
+        border-right: 1px solid #e2e8f0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 12px 8px;
+        gap: 4px;
+      }
+
+      .tool-btn {
+        width: 44px;
+        height: 44px;
+        border: none;
+        background: transparent;
+        border-radius: 12px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #64748b;
+        transition: all 0.2s;
+      }
+
+      .tool-btn:hover {
+        background: #f1f5f9;
+        color: #4f46e5;
+      }
+
+      .tool-btn.active {
+        background: #4f46e5;
+        color: #ffffff;
+        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+        transform: scale(1.05);
+      }
+
+      .tool-btn:disabled {
+        color: #cbd5e1;
+        cursor: not-allowed;
+      }
+
+      .tool-btn:disabled:hover {
+        background: transparent;
+        color: #cbd5e1;
+      }
+
+      .icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      .divider {
+        width: 32px;
+        height: 1px;
+        background: #e2e8f0;
+        margin: 8px 0;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+
+      .color-picker {
+        width: 32px;
+        height: 32px;
+        border: 2px solid #e2e8f0;
+        border-radius: 50%;
+        cursor: pointer;
+        padding: 0;
+        overflow: hidden;
+        -webkit-appearance: none;
+      }
+
+      .color-picker::-webkit-color-swatch-wrapper {
+        padding: 0;
+      }
+
+      .color-picker::-webkit-color-swatch {
+        border: none;
+        border-radius: 50%;
+      }
+
+      /* 主区域 */
+      .main-area {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      /* 顶部栏 */
+      .top-bar {
+        height: 56px;
+        background: #ffffff;
+        border-bottom: 1px solid #e2e8f0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      }
+
+      .top-bar-left, .top-bar-right {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #334155;
+      }
+
+      .selection-info {
+        display: none;
+        align-items: center;
+        gap: 8px;
+        background: #eef2ff;
+        padding: 4px 12px;
+        border-radius: 20px;
+        border: 1px solid #c7d2fe;
+      }
+
+      .selection-info.visible {
+        display: flex;
+      }
+
+      .selection-label {
+        font-size: 12px;
+        font-weight: 600;
+        color: #4f46e5;
+        text-transform: uppercase;
+      }
+
+      .delete-btn {
+        background: none;
+        border: none;
+        color: #ef4444;
+        cursor: pointer;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .delete-btn:hover {
+        color: #dc2626;
+      }
+
+      .zoom-controls, .file-controls {
+        display: flex;
+        align-items: center;
+        background: #f1f5f9;
+        border-radius: 8px;
+        padding: 4px;
+      }
+
+      .zoom-btn, .file-btn {
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: transparent;
+        border-radius: 6px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #475569;
+        transition: all 0.2s;
+      }
+
+      .zoom-btn:hover, .file-btn:hover {
+        color: #4f46e5;
+      }
+
+      .zoom-text {
+        padding: 4px 8px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #475569;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        min-width: 50px;
+        text-align: center;
+      }
+
+      .zoom-text:hover {
+        color: #4f46e5;
+      }
+
+      /* 画布容器 */
+      .canvas-container {
+        flex: 1;
+        position: relative;
+        background: #f1f5f9;
+        overflow: hidden;
+      }
+
+      .main-canvas {
+        position: absolute;
+        inset: 0;
+        display: block;
+        cursor: crosshair;
+        touch-action: none;
+      }
+
+      /* 小地图 */
+      .minimap-wrapper {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        z-index: 30;
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 2px;
+      }
+
+      .minimap-wrapper > * {
+        background: #ffffff;
+      }
+
+      .minimap-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 12px;
+        background: linear-gradient(to right, #f8fafc, #f1f5f9);
+        border-bottom: 1px solid #e2e8f0;
+        font-size: 12px;
+        font-weight: 600;
+        color: #475569;
+        border-radius: 10px 10px 0 0;
+      }
+
+      .minimap-icon {
+        width: 12px;
+        height: 12px;
+        color: #4f46e5;
+      }
+
+      .minimap-canvas {
+        cursor: pointer;
+        background: #f8fafc;
+        border-radius: 0 0 10px 10px;
+        display: block;
+      }
+
+      .minimap-canvas:hover {
+        filter: brightness(1.05);
+      }
+
+      /* 文本输入 */
+      .text-input-container {
+        position: absolute;
+        z-index: 20;
+      }
+
+      .text-input {
+        padding: 8px 12px;
+        border: 2px solid #4f46e5;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        outline: none;
+        min-width: 200px;
+        font-size: 16px;
+      }
+
+      /* 空画布提示 */
+      .empty-hint {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        opacity: 0.4;
+      }
+
+      .empty-hint h3 {
+        font-size: 24px;
+        font-weight: 700;
+        color: #94a3b8;
+        margin-bottom: 8px;
+      }
+
+      .empty-hint p {
+        color: #94a3b8;
+      }
+    `;
+  }
+}
+typeof window < "u" && !customElements.get("canvas-drawing-editor") && customElements.define("canvas-drawing-editor", b);
+export {
+  b as CanvasDrawingEditor
+};
+//# sourceMappingURL=canvas-drawing-editor.es.js.map