canvas-drawing-editor 2.0.7 → 2.0.9

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

@@ -9,10 +9,9 @@ const f = {
   showDownload: !0,
   showExport: !0,
   showImport: !0,
-  showColor: !0,
-  showMinimap: !0
+  showColor: !0
 };
-class b extends HTMLElement {
+class g 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);
   }
@@ -30,7 +29,6 @@ class b extends HTMLElement {
       "show-export",
       "show-import",
       "show-color",
-      "show-minimap",
       "initial-data"
     ];
   }
@@ -43,10 +41,10 @@ class b extends HTMLElement {
     this.removeEventListeners();
   }
   // 生命周期：属性变化
-  attributeChangedCallback(t, i, s) {
-    if (i !== s) {
-      if (t === "initial-data" && s && this.canvas) {
-        this.loadInitialData(), this.renderCanvas(), this.renderMinimap();
+  attributeChangedCallback(t, s, i) {
+    if (s !== i) {
+      if (t === "initial-data" && i && this.canvas) {
+        this.loadInitialData(), this.renderCanvas();
         return;
       }
       this.parseAttributes(), this.container && this.updateUI();
@@ -65,8 +63,7 @@ class b extends HTMLElement {
       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"
+      showColor: this.getAttribute("show-color") !== "false"
     };
   }
   // 生成唯一 ID
@@ -78,17 +75,17 @@ class b extends HTMLElement {
     const t = this.getAttribute("initial-data");
     if (t)
       try {
-        const i = JSON.parse(t);
-        i.objects && Array.isArray(i.objects) && (this.objects = i.objects, this.selectedId = null, this.objects.forEach((s) => {
-          if (s.type === "IMAGE" && s.dataUrl) {
+        const s = JSON.parse(t);
+        s.objects && Array.isArray(s.objects) && (this.objects = s.objects, this.selectedId = null, this.scale = 1, this.panOffset = { x: 0, y: 0 }, this.updateZoomDisplay(), this.objects.forEach((i) => {
+          if (i.type === "IMAGE" && i.dataUrl) {
             const e = new Image();
             e.onload = () => {
-              s.imageElement = e, this.renderCanvas(), this.renderMinimap();
-            }, e.src = s.dataUrl;
+              i.imageElement = e, this.renderCanvas();
+            }, e.src = i.dataUrl;
           }
         }), this.updateUI());
-      } catch (i) {
-        console.error("Failed to parse initial-data:", i);
+      } catch (s) {
+        console.error("Failed to parse initial-data:", s);
       }
   }
   // 设置事件监听
@@ -106,96 +103,96 @@ class b extends HTMLElement {
   // 初始化画布
   initCanvas(t = !1) {
     !this.canvasContainer || !this.canvas || requestAnimationFrame(() => {
-      this.canvas.width = this.canvasContainer.clientWidth, this.canvas.height = this.canvasContainer.clientHeight, t && this.loadInitialData(), this.renderCanvas(), this.renderMinimap();
+      this.canvas.width = this.canvasContainer.clientWidth, this.canvas.height = this.canvasContainer.clientHeight, t && this.loadInitialData(), this.renderCanvas();
     });
   }
   // 获取鼠标在画布上的位置（考虑缩放和平移）
   getMousePos(t) {
-    const i = this.canvas.getBoundingClientRect();
-    let s, e;
+    const s = this.canvas.getBoundingClientRect();
+    let i, e;
     if ("touches" in t && t.touches.length > 0)
-      s = t.touches[0].clientX, e = t.touches[0].clientY;
+      i = t.touches[0].clientX, e = t.touches[0].clientY;
     else if ("clientX" in t)
-      s = t.clientX, e = t.clientY;
+      i = t.clientX, e = t.clientY;
     else
       return { x: 0, y: 0 };
-    const n = (s - i.left - this.panOffset.x) / this.scale, o = (e - i.top - this.panOffset.y) / this.scale;
-    return { x: n, y: o };
+    const n = (i - s.left - this.panOffset.x) / this.scale, a = (e - s.top - this.panOffset.y) / this.scale;
+    return { x: n, y: a };
   }
   // 获取屏幕坐标（不考虑缩放和平移）
   getScreenPos(t) {
-    const i = this.canvas.getBoundingClientRect();
-    let s, e;
+    const s = this.canvas.getBoundingClientRect();
+    let i, e;
     if ("touches" in t && t.touches.length > 0)
-      s = t.touches[0].clientX, e = t.touches[0].clientY;
+      i = t.touches[0].clientX, e = t.touches[0].clientY;
     else if ("clientX" in t)
-      s = t.clientX, e = t.clientY;
+      i = t.clientX, e = t.clientY;
     else
       return { x: 0, y: 0 };
-    return { x: s - i.left, y: e - i.top };
+    return { x: i - s.left, y: e - s.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 };
+        const s = t;
+        return { x: s.x, y: s.y, width: s.width, height: s.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 };
+        const s = t;
+        return { x: s.x - s.radius, y: s.y - s.radius, width: s.radius * 2, height: s.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 };
+        const s = t, i = s.text.length * s.fontSize * 0.6;
+        return { x: s.x, y: s.y - s.fontSize, width: i, height: s.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((a) => a.x)), e = Math.max(...i.points.map((a) => a.x)), n = Math.min(...i.points.map((a) => a.y)), o = Math.max(...i.points.map((a) => a.y));
-        return { x: s, y: n, width: e - s, height: o - n };
+        const s = t;
+        if (s.points.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
+        const i = Math.min(...s.points.map((o) => o.x)), e = Math.max(...s.points.map((o) => o.x)), n = Math.min(...s.points.map((o) => o.y)), a = Math.max(...s.points.map((o) => o.y));
+        return { x: i, y: n, width: e - i, height: a - n };
       }
     }
     return { x: 0, y: 0, width: 0, height: 0 };
   }
   // 检查调整大小手柄
-  getResizeHandleAtPoint(t, i, s) {
-    const e = this.getObjectBounds(t), n = 8, o = [
+  getResizeHandleAtPoint(t, s, i) {
+    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 a of o)
-      if (Math.abs(i - a.x) <= n && Math.abs(s - a.y) <= n)
-        return a.name;
+    for (const o of a)
+      if (Math.abs(s - o.x) <= n && Math.abs(i - o.y) <= n)
+        return o.name;
     return null;
   }
   // 碰撞检测
-  isHit(t, i, s) {
+  isHit(t, s, i) {
     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;
+        return s >= e.x && s <= e.x + e.width && i >= e.y && i <= 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;
+        return Math.sqrt(Math.pow(s - e.x, 2) + Math.pow(i - 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;
+        return s >= e.x && s <= e.x + e.width && i >= e.y && i <= 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;
+        return s >= e.x && s <= e.x + e.text.length * e.fontSize * 0.6 && i >= e.y - e.fontSize && i <= e.y;
       }
       case "PATH": {
         const e = t;
         if (e.points.length === 0) return !1;
-        const n = Math.min(...e.points.map((r) => r.x)), o = Math.max(...e.points.map((r) => r.x)), a = Math.min(...e.points.map((r) => r.y)), l = Math.max(...e.points.map((r) => r.y));
-        return i >= n && i <= o && s >= a && s <= l;
+        const n = Math.min(...e.points.map((h) => h.x)), a = Math.max(...e.points.map((h) => h.x)), o = Math.min(...e.points.map((h) => h.y)), l = Math.max(...e.points.map((h) => h.y));
+        return s >= n && s <= a && i >= o && i <= l;
       }
     }
     return !1;
@@ -208,16 +205,16 @@ class b extends HTMLElement {
   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());
+    t && (this.objects = t, this.selectedId = null, this.renderCanvas(), 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());
+    this.selectedId && (this.saveHistory(), this.objects = this.objects.filter((t) => t.id !== this.selectedId), this.selectedId = null, this.renderCanvas(), this.updateUI(), this.dispatchChangeEvent());
   }
   // 复制选中对象
   copySelected() {
     if (this.selectedId) {
-      const t = this.objects.find((i) => i.id === this.selectedId);
+      const t = this.objects.find((s) => s.id === this.selectedId);
       t && (this.clipboard = JSON.parse(JSON.stringify(t)));
     }
   }
@@ -231,10 +228,10 @@ class b extends HTMLElement {
         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();
+      t.type === "PATH" && t.points && (t.points = t.points.map((s) => ({
+        x: s.x + 20,
+        y: s.y + 20
+      }))), this.objects.push(t), this.selectedId = t.id, this.clipboard = t, this.renderCanvas(), this.updateUI(), this.dispatchChangeEvent();
     }
   }
   // 派发变化事件
@@ -291,27 +288,27 @@ class b extends HTMLElement {
   // 滚轮缩放
   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, o = this.scale * n;
-    this.zoomAtPoint(o, s, e);
+    const s = this.canvas.getBoundingClientRect(), i = t.clientX - s.left, e = t.clientY - s.top, n = t.deltaY > 0 ? 0.9 : 1.1, a = this.scale * n;
+    this.zoomAtPoint(a, i, e);
   }
   // 以指定点为中心缩放
-  zoomAtPoint(t, i, s) {
-    const e = Math.min(Math.max(t, 0.2), 5), n = (i - this.panOffset.x) / this.scale, o = (s - this.panOffset.y) / this.scale, a = i - n * e, l = s - o * e;
-    this.scale = e, this.panOffset = { x: a, y: l }, this.renderCanvas(), this.renderMinimap(), this.updateZoomDisplay();
+  zoomAtPoint(t, s, i) {
+    const e = Math.min(Math.max(t, 0.2), 5), n = (s - this.panOffset.x) / this.scale, a = (i - this.panOffset.y) / this.scale, o = s - n * e, l = i - a * e;
+    this.scale = e, this.panOffset = { x: o, y: l }, this.renderCanvas(), this.updateZoomDisplay();
   }
   // 放大
   zoomIn() {
-    const t = this.canvas.width / 2, i = this.canvas.height / 2;
-    this.zoomAtPoint(this.scale * 1.2, t, i);
+    const t = this.canvas.width / 2, s = this.canvas.height / 2;
+    this.zoomAtPoint(this.scale * 1.2, t, s);
   }
   // 缩小
   zoomOut() {
-    const t = this.canvas.width / 2, i = this.canvas.height / 2;
-    this.zoomAtPoint(this.scale / 1.2, t, i);
+    const t = this.canvas.width / 2, s = this.canvas.height / 2;
+    this.zoomAtPoint(this.scale / 1.2, t, s);
   }
   // 重置缩放
   resetZoom() {
-    this.scale = 1, this.panOffset = { x: 0, y: 0 }, this.renderCanvas(), this.renderMinimap(), this.updateZoomDisplay();
+    this.scale = 1, this.panOffset = { x: 0, y: 0 }, this.renderCanvas(), this.updateZoomDisplay();
   }
   // 更新缩放显示
   updateZoomDisplay() {
@@ -324,8 +321,8 @@ class b extends HTMLElement {
   }
   // 更新工具按钮状态
   updateToolButtons() {
-    this.shadow.querySelectorAll(".tool-btn").forEach((i) => {
-      i.getAttribute("data-tool") === this.tool ? i.classList.add("active") : i.classList.remove("active");
+    this.shadow.querySelectorAll(".tool-btn").forEach((s) => {
+      s.getAttribute("data-tool") === this.tool ? s.classList.add("active") : s.classList.remove("active");
     });
   }
   // 隐藏文本输入
@@ -333,15 +330,15 @@ class b extends HTMLElement {
     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();
+  showTextInput(t, s, i = "") {
+    this.isTextInputVisible = !0, this.textInputScreenPos = { x: t, y: s }, this.textInputContainer && this.textInput && (this.textInputContainer.style.display = "block", this.textInputContainer.style.left = `${t}px`, this.textInputContainer.style.top = `${s - 30}px`, this.textInput.value = i, this.textInput.style.color = this.color, setTimeout(() => {
+      this.textInput.focus(), i && this.textInput.select();
     }, 0));
   }
   // 提交文本
   submitText() {
-    var i, s;
-    const t = (s = (i = this.textInput) == null ? void 0 : i.value) == null ? void 0 : s.trim();
+    var s, i;
+    const t = (i = (s = this.textInput) == null ? void 0 : s.value) == null ? void 0 : i.trim();
     if (t) {
       if (this.editingTextId) {
         const e = this.objects.find((n) => n.id === this.editingTextId);
@@ -362,289 +359,245 @@ class b extends HTMLElement {
       }
       this.dispatchChangeEvent();
     }
-    this.hideTextInput(), this.setTool("SELECT"), this.renderCanvas(), this.renderMinimap(), this.updateUI();
+    this.hideTextInput(), this.setTool("SELECT"), this.renderCanvas(), 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") {
+    const { x: s, y: i } = this.getMousePos(t), e = this.getScreenPos(t);
+    if (this.dragStart = { x: s, y: i }, this.isDragging = !0, this.isTextInputVisible && this.tool !== "TEXT" && this.submitText(), this.tool === "SELECT") {
       if (this.selectedId) {
-        const o = this.objects.find((a) => a.id === this.selectedId);
-        if (o) {
-          const a = this.getResizeHandleAtPoint(o, i, s);
-          if (a) {
-            this.saveHistory(), this.isResizing = !0, this.resizeHandle = a, this.resizeStartBounds = this.getObjectBounds(o), this.resizeOriginalObject = JSON.parse(JSON.stringify(o));
+        const a = this.objects.find((o) => o.id === this.selectedId);
+        if (a) {
+          const o = this.getResizeHandleAtPoint(a, s, i);
+          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((o) => this.isHit(o, 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());
+      const n = [...this.objects].reverse().find((a) => this.isHit(a, s, i));
+      n ? (this.selectedId = n.id, this.dragOffset = { x: s - n.x, y: i - 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;
+      this.textInputPos = { x: s, y: i }, 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.tool === "RECTANGLE" ? this.currentObject = { id: n, type: "RECTANGLE", x: s, y: i, width: 0, height: 0, color: this.color, lineWidth: this.lineWidth } : this.tool === "CIRCLE" ? this.currentObject = { id: n, type: "CIRCLE", x: s, y: i, radius: 0, color: this.color, lineWidth: this.lineWidth } : this.tool === "PENCIL" && (this.currentObject = { id: n, type: "PATH", x: s, y: i, points: [{ x: s, y: i }], color: this.color, lineWidth: this.lineWidth });
     }
     this.renderCanvas();
   }
   // 画布鼠标移动
   handleCanvasPointerMove(t) {
     if (this.isPanning) {
-      const e = this.getScreenPos(t), n = e.x - this.panStart.x, o = e.y - this.panStart.y;
-      this.panOffset = { x: this.panOffset.x + n, y: this.panOffset.y + o }, this.panStart = e, this.renderCanvas(), this.renderMinimap();
+      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();
       return;
     }
     if (!this.isDragging || !this.dragStart) return;
-    const { x: i, y: s } = this.getMousePos(t);
+    const { x: s, y: i } = this.getMousePos(t);
     if (this.isResizing && this.selectedId && this.resizeHandle && this.resizeStartBounds && this.resizeOriginalObject) {
-      const e = this.objects.find((d) => d.id === this.selectedId);
+      const e = this.objects.find((c) => c.id === this.selectedId);
       if (!e) return;
-      const n = i - this.dragStart.x, o = s - this.dragStart.y;
-      let a = 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") && (a = this.resizeStartBounds.x + n, r = this.resizeStartBounds.width - n), this.resizeHandle.includes("s") && (h = this.resizeStartBounds.height + o), this.resizeHandle.includes("n") && (l = this.resizeStartBounds.y + o, h = this.resizeStartBounds.height - o), r = Math.max(10, r), h = Math.max(10, h), e.type) {
+      const n = s - this.dragStart.x, a = i - this.dragStart.y;
+      let o = this.resizeStartBounds.x, l = this.resizeStartBounds.y, h = this.resizeStartBounds.width, r = this.resizeStartBounds.height;
+      switch (this.resizeHandle.includes("e") && (h = this.resizeStartBounds.width + n), this.resizeHandle.includes("w") && (o = this.resizeStartBounds.x + n, h = this.resizeStartBounds.width - n), this.resizeHandle.includes("s") && (r = this.resizeStartBounds.height + a), this.resizeHandle.includes("n") && (l = this.resizeStartBounds.y + a, r = this.resizeStartBounds.height - a), h = Math.max(10, h), r = Math.max(10, r), e.type) {
         case "RECTANGLE":
         case "IMAGE":
-          e.x = a, e.y = l, e.width = r, e.height = h;
+          e.x = o, e.y = l, e.width = h, e.height = r;
           break;
         case "CIRCLE": {
-          const d = Math.max(r, h) / 2;
-          e.x = a + d, e.y = l + d, e.radius = d;
+          const c = Math.max(h, r) / 2;
+          e.x = o + c, e.y = l + c, e.radius = c;
           break;
         }
         case "TEXT": {
-          const d = this.resizeOriginalObject, c = r / this.resizeStartBounds.width;
-          e.x = a, e.y = l + h, e.fontSize = Math.max(8, Math.round(d.fontSize * c));
+          const c = this.resizeOriginalObject, d = h / this.resizeStartBounds.width;
+          e.x = o, e.y = l + r, e.fontSize = Math.max(8, Math.round(c.fontSize * d));
           break;
         }
         case "PATH": {
-          const d = this.resizeOriginalObject, c = r / this.resizeStartBounds.width, p = h / this.resizeStartBounds.height;
-          e.points = d.points.map((u) => ({
-            x: a + (u.x - this.resizeStartBounds.x) * c,
-            y: l + (u.y - this.resizeStartBounds.y) * p
+          const c = this.resizeOriginalObject, d = h / this.resizeStartBounds.width, u = r / this.resizeStartBounds.height;
+          e.points = c.points.map((p) => ({
+            x: o + (p.x - this.resizeStartBounds.x) * d,
+            y: l + (p.y - this.resizeStartBounds.y) * u
           }));
           break;
         }
       }
-      this.renderCanvas(), this.renderMinimap();
+      this.renderCanvas();
       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, o = i - this.dragStart.x, a = s - this.dragStart.y;
-          n.points = n.points.map((l) => ({ x: l.x + o, y: l.y + a })), this.dragStart = { x: i, y: s };
+          const n = e, a = s - this.dragStart.x, o = i - this.dragStart.y;
+          n.points = n.points.map((l) => ({ x: l.x + a, y: l.y + o })), this.dragStart = { x: s, y: i };
         } else
-          e.x = i - this.dragOffset.x, e.y = s - this.dragOffset.y;
-        this.renderCanvas(), this.renderMinimap();
+          e.x = s - this.dragOffset.x, e.y = i - this.dragOffset.y;
+        this.renderCanvas();
       }
     } else if (this.currentObject) {
       if (this.currentObject.type === "RECTANGLE")
-        this.currentObject.width = i - this.currentObject.x, this.currentObject.height = s - this.currentObject.y;
+        this.currentObject.width = s - this.currentObject.x, this.currentObject.height = i - 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));
+        const e = Math.sqrt(Math.pow(s - this.currentObject.x, 2) + Math.pow(i - this.currentObject.y, 2));
         this.currentObject.radius = e;
-      } else this.currentObject.type === "PATH" && this.currentObject.points.push({ x: i, y: s });
+      } else this.currentObject.type === "PATH" && this.currentObject.points.push({ x: s, y: i });
       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(), this.updateUI();
+    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.updateUI();
   }
   // 双击编辑文本
   handleCanvasDoubleClick(t) {
     t.preventDefault();
-    const { x: i, y: s } = this.getMousePos(t), e = [...this.objects].reverse().find((n) => this.isHit(n, i, s));
+    const { x: s, y: i } = this.getMousePos(t), e = [...this.objects].reverse().find((n) => this.isHit(n, s, i));
     if (e && e.type === "TEXT") {
       const n = e;
       this.editingTextId = n.id, this.textInputPos = { x: n.x, y: n.y };
-      const o = n.x * this.scale + this.panOffset.x, a = n.y * this.scale + this.panOffset.y;
-      this.showTextInput(o, a, n.text), this.setTool("SELECT");
+      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);
+      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)), this.currentObject && this.drawObject(this.ctx, this.currentObject), this.selectedId && this.tool === "SELECT") {
+        const t = this.objects.find((s) => s.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) {
+  drawObject(t, s) {
+    switch (t.beginPath(), t.strokeStyle = s.color, t.lineWidth = s.lineWidth, t.fillStyle = s.color, s.id === this.selectedId ? (t.shadowColor = "rgba(0, 100, 255, 0.5)", t.shadowBlur = 10) : t.shadowBlur = 0, s.type) {
       case "RECTANGLE": {
-        const e = i;
-        t.strokeRect(e.x, e.y, e.width, e.height);
+        const i = s;
+        t.strokeRect(i.x, i.y, i.width, i.height);
         break;
       }
       case "CIRCLE": {
-        const e = i;
-        t.beginPath(), t.arc(e.x, e.y, e.radius, 0, 2 * Math.PI), t.stroke();
+        const i = s;
+        t.beginPath(), t.arc(i.x, i.y, i.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);
+        const i = s;
+        if (i.points.length < 2) break;
+        t.beginPath(), t.lineCap = "round", t.lineJoin = "round", t.moveTo(i.points[0].x, i.points[0].y);
+        for (let e = 1; e < i.points.length; e++)
+          t.lineTo(i.points[e].x, i.points[e].y);
         t.stroke();
         break;
       }
       case "TEXT": {
-        const e = i;
-        t.font = `${e.fontSize}px sans-serif`, t.fillText(e.text, e.x, e.y);
+        const i = s;
+        t.font = `${i.fontSize}px sans-serif`, t.fillText(i.text, i.x, i.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;
+        const i = s;
+        if (i.imageElement && i.imageElement.complete)
+          t.drawImage(i.imageElement, i.x, i.y, i.width, i.height);
+        else if (i.dataUrl) {
+          const e = new Image();
+          e.onload = () => {
+            i.imageElement = e, this.renderCanvas();
+          }, e.src = i.dataUrl;
         }
         break;
       }
     }
   }
   // 绘制选中手柄
-  drawSelectionHandles(t, i) {
-    const s = this.getObjectBounds(i), e = 8;
+  drawSelectionHandles(t, s) {
+    const i = this.getObjectBounds(s), 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((o) => {
-      t.beginPath(), t.rect(o.x - e / 2, o.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, o = i.width * n, a = i.height * n, l = (t.width - o) / 2, r = (t.height - a) / 2;
-    this.minimapCtx.fillStyle = "#ffffff", this.minimapCtx.fillRect(l, r, o, a), this.minimapCtx.save(), this.minimapCtx.translate(l, r), this.minimapCtx.scale(n, n), (this.currentObject ? [...this.objects, this.currentObject] : this.objects).forEach((d) => {
-      switch (this.minimapCtx.fillStyle = d.color, this.minimapCtx.strokeStyle = d.color, this.minimapCtx.lineWidth = Math.max(d.lineWidth, 1), this.minimapCtx.setLineDash([]), d.type) {
-        case "RECTANGLE": {
-          const c = d;
-          this.minimapCtx.strokeRect(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.stroke();
-          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, o, a);
-  }
-  // 小地图点击定位
-  handleMinimapClick(t) {
-    const i = this.minimapCanvas.getBoundingClientRect(), s = t.clientX - i.left, e = t.clientY - i.top, n = this.minimapCanvas.width / this.canvas.width, o = this.minimapCanvas.height / this.canvas.height, a = Math.min(n, o) * 0.92, l = this.canvas.width * a, r = this.canvas.height * a, h = (this.minimapCanvas.width - l) / 2, d = (this.minimapCanvas.height - r) / 2, c = s - h, p = e - d, u = (c / a - this.panOffset.x) / this.scale, g = (p / a - 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();
+      { x: i.x, y: i.y },
+      { x: i.x + i.width, y: i.y },
+      { x: i.x, y: i.y + i.height },
+      { x: i.x + i.width, y: i.y + i.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(i.x, i.y, i.width, i.height), t.setLineDash([]);
   }
   // 图片上传处理
   handleImageUpload(t) {
-    const i = t.target;
-    if (!i.files || i.files.length === 0) return;
-    const s = i.files[0], e = new FileReader();
+    const s = t.target;
+    if (!s.files || s.files.length === 0) return;
+    const i = s.files[0], e = new FileReader();
     e.onload = (n) => {
       var l;
-      const o = (l = n.target) == null ? void 0 : l.result, a = new Image();
-      a.onload = () => {
+      const a = (l = n.target) == null ? void 0 : l.result, o = new Image();
+      o.onload = () => {
         this.saveHistory();
-        const r = 300;
-        let h = a.width, d = a.height;
-        if (h > r || d > r) {
-          const p = Math.min(r / h, r / d);
-          h *= p, d *= p;
+        const h = 300;
+        let r = o.width, c = o.height;
+        if (r > h || c > h) {
+          const u = Math.min(h / r, h / c);
+          r *= u, c *= u;
         }
-        const c = {
+        const d = {
           id: this.generateId(),
           type: "IMAGE",
           x: 100,
           y: 100,
-          width: h,
-          height: d,
+          width: r,
+          height: c,
           color: "#000000",
           lineWidth: 1,
-          dataUrl: o,
-          imageElement: a
+          dataUrl: a,
+          imageElement: o
         };
-        this.objects.push(c), this.selectedId = c.id, this.setTool("SELECT"), this.renderCanvas(), this.renderMinimap(), this.updateUI(), this.dispatchChangeEvent();
-      }, a.src = o;
-    }, e.readAsDataURL(s), i.value = "";
+        this.objects.push(d), this.selectedId = d.id, this.setTool("SELECT"), this.renderCanvas(), this.updateUI(), this.dispatchChangeEvent();
+      }, o.src = a;
+    }, e.readAsDataURL(i), s.value = "";
   }
   // 保存 JSON
   saveJson() {
     const t = {
       version: "1.0",
-      objects: this.objects.map((o) => {
-        const { imageElement: a, ...l } = o;
+      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");
+    }, s = JSON.stringify(t, null, 2), i = new Blob([s], { type: "application/json" }), e = URL.createObjectURL(i), 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();
+    const s = t.target;
+    if (!s.files || s.files.length === 0) return;
+    const i = s.files[0], e = new FileReader();
     e.onload = (n) => {
-      var o;
+      var a;
       try {
-        const a = JSON.parse((o = n.target) == null ? void 0 : o.result);
-        a.objects && Array.isArray(a.objects) && (this.saveHistory(), this.objects = a.objects, this.selectedId = null, this.objects.forEach((l) => {
+        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;
+            const h = new Image();
+            h.onload = () => {
+              l.imageElement = h, this.renderCanvas();
+            }, h.src = l.dataUrl;
           }
-        }), this.renderCanvas(), this.renderMinimap(), this.updateUI(), this.dispatchChangeEvent());
-      } catch (a) {
-        console.error("Failed to load JSON:", a);
+        }), this.renderCanvas(), this.updateUI(), this.dispatchChangeEvent());
+      } catch (o) {
+        console.error("Failed to load JSON:", o);
       }
-    }, e.readAsText(s), i.value = "";
+    }, e.readAsText(i), s.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();
+    const s = t.getContext("2d");
+    s.fillStyle = "#ffffff", s.fillRect(0, 0, t.width, t.height), s.translate(this.panOffset.x, this.panOffset.y), s.scale(this.scale, this.scale), this.objects.forEach((n) => this.drawObject(s, n, !0));
+    const i = t.toDataURL("image/png"), e = document.createElement("a");
+    e.href = i, e.download = "canvas-export.png", e.click();
   }
   // 更新 UI
   updateUI() {
@@ -653,7 +606,7 @@ class b extends HTMLElement {
       if (this.selectedId) {
         const e = this.objects.find((n) => n.id === this.selectedId);
         if (e) {
-          const o = {
+          const a = {
             RECTANGLE: "矩形",
             CIRCLE: "圆形",
             PATH: "画笔",
@@ -661,22 +614,22 @@ class b extends HTMLElement {
             IMAGE: "图片"
           }[e.type] || e.type;
           t.innerHTML = `
-            <span class="selection-label">已选择: ${o}</span>
+            <span class="selection-label">已选择: ${a}</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());
+          const o = t.querySelector(".delete-btn");
+          o && o.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);
-    const s = this.shadow.querySelector(".empty-hint");
-    s && (s.style.display = this.objects.length === 0 ? "flex" : "none");
+    const s = this.shadow.querySelector(".undo-btn");
+    s && (s.disabled = this.history.length === 0);
+    const i = this.shadow.querySelector(".empty-hint");
+    i && (i.style.display = this.objects.length === 0 ? "flex" : "none");
   }
   // 渲染 DOM 结构
   render() {
@@ -772,19 +725,6 @@ class b extends HTMLElement {
           <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;">
               <div class="text-input-hint">按 Enter 确认，Esc 取消</div>
@@ -799,38 +739,38 @@ class b extends HTMLElement {
           </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();
+    `, 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.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("mousedown", (d) => {
-        d.preventDefault();
-      }), h.addEventListener("click", () => {
+    this.canvas.addEventListener("mousedown", (r) => this.handleCanvasPointerDown(r)), this.canvas.addEventListener("mousemove", (r) => this.handleCanvasPointerMove(r)), this.canvas.addEventListener("mouseup", () => this.handleCanvasPointerUp()), this.canvas.addEventListener("mouseleave", () => this.handleCanvasPointerUp()), this.canvas.addEventListener("dblclick", (r) => this.handleCanvasDoubleClick(r)), this.canvas.addEventListener("touchstart", (r) => this.handleCanvasPointerDown(r)), this.canvas.addEventListener("touchmove", (r) => this.handleCanvasPointerMove(r)), this.canvas.addEventListener("touchend", () => this.handleCanvasPointerUp()), this.canvas.addEventListener("wheel", this.boundHandleWheel, { passive: !1 }), this.shadow.querySelectorAll(".tool-btn[data-tool]").forEach((r) => {
+      r.addEventListener("mousedown", (c) => {
+        c.preventDefault();
+      }), r.addEventListener("click", () => {
         this.isTextInputVisible && this.submitText();
-        const d = h.getAttribute("data-tool");
-        this.setTool(d);
+        const c = r.getAttribute("data-tool");
+        this.setTool(c);
       });
     });
     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(".color-picker");
+    s && s.addEventListener("input", (r) => {
+      this.color = r.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"), o = this.shadow.querySelector(".zoom-text");
-    e && e.addEventListener("click", () => this.zoomIn()), n && n.addEventListener("click", () => this.zoomOut()), o && o.addEventListener("click", () => this.resetZoom());
-    const a = this.shadow.querySelector(".save-json-btn"), l = this.shadow.querySelector(".load-json-input"), r = this.shadow.querySelector(".export-png-btn");
-    a && a.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();
+    const i = this.shadow.querySelector(".image-input");
+    i && i.addEventListener("change", (r) => this.handleImageUpload(r));
+    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"), h = this.shadow.querySelector(".export-png-btn");
+    o && o.addEventListener("click", () => this.saveJson()), l && l.addEventListener("change", (r) => this.loadJson(r)), h && h.addEventListener("click", () => this.exportPng()), this.textInput && (this.textInput.addEventListener("keydown", (r) => {
+      r.key === "Enter" ? (r.preventDefault(), this.submitText()) : r.key === "Escape" && this.hideTextInput();
     }), this.textInput.addEventListener("blur", () => {
       this.isTextInputVisible && this.submitText();
     }));
   }
   // 创建工具按钮 HTML
-  createToolButton(t, i, s) {
+  createToolButton(t, s, i) {
     const e = {
       "select-icon": '<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/>',
       "pencil-icon": '<path d="M17 3a2.85 2.85 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>',
@@ -839,9 +779,9 @@ class b extends HTMLElement {
       "text-icon": '<path d="M4 7V4h16v3M9 20h6M12 4v16"/>'
     };
     return `
-      <button class="tool-btn ${this.tool === t ? "active" : ""}" data-tool="${t}" title="${s}">
+      <button class="tool-btn ${this.tool === t ? "active" : ""}" data-tool="${t}" title="${i}">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          ${e[i]}
+          ${e[s]}
         </svg>
       </button>
     `;
@@ -1083,53 +1023,6 @@ class b extends HTMLElement {
         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;
@@ -1184,8 +1077,8 @@ class b extends HTMLElement {
     `;
   }
 }
-typeof window < "u" && !customElements.get("canvas-drawing-editor") && customElements.define("canvas-drawing-editor", b);
+typeof window < "u" && !customElements.get("canvas-drawing-editor") && customElements.define("canvas-drawing-editor", g);
 export {
-  b as CanvasDrawingEditor
+  g as CanvasDrawingEditor
 };
 //# sourceMappingURL=canvas-drawing-editor.es.js.map