canvas-drawing-editor 2.0.1 → 2.0.3

package/README.md

@@ -128,16 +128,93 @@ function App() {
 | `show-import` | boolean | true | Show JSON load |
 | `show-color` | boolean | true | Show color picker |
 | `show-minimap` | boolean | true | Show navigation minimap |
+| `initial-data` | string | - | Initial JSON data to render (see format below) |
+
+### 📊 Initial Data
+
+You can pass JSON data to initialize the canvas content:
+
+```html
+<canvas-drawing-editor
+  initial-data='{"objects":[{"id":"abc123","type":"RECTANGLE","x":100,"y":100,"width":200,"height":150,"color":"#3b82f6","lineWidth":2}]}'
+></canvas-drawing-editor>
+```
 
 ### 📡 Events
 
+#### `editor-change` Event
+
+Fires when canvas content changes. The `e.detail.objects` array contains all drawing objects.
+
 ```javascript
-// Listen for canvas changes
 document.addEventListener('editor-change', (e) => {
   console.log('Objects:', e.detail.objects);
+  // Save to server or localStorage
+  localStorage.setItem('canvas-data', JSON.stringify({ objects: e.detail.objects }));
+});
+```
+
+#### Object Types & Properties
+
+Each object in `e.detail.objects` has the following base properties:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `id` | string | Unique identifier |
+| `type` | string | Object type: `RECTANGLE`, `CIRCLE`, `PATH`, `TEXT`, `IMAGE` |
+| `x` | number | X coordinate |
+| `y` | number | Y coordinate |
+| `color` | string | Stroke/fill color (hex format, e.g., `#3b82f6`) |
+| `lineWidth` | number | Line width in pixels |
+
+**Rectangle** (`type: "RECTANGLE"`):
+| Property | Type | Description |
+|----------|------|-------------|
+| `width` | number | Rectangle width |
+| `height` | number | Rectangle height |
+
+**Circle** (`type: "CIRCLE"`):
+| Property | Type | Description |
+|----------|------|-------------|
+| `radius` | number | Circle radius |
+
+**Path/Pencil** (`type: "PATH"`):
+| Property | Type | Description |
+|----------|------|-------------|
+| `points` | Array<{x, y}> | Array of point coordinates |
+
+**Text** (`type: "TEXT"`):
+| Property | Type | Description |
+|----------|------|-------------|
+| `text` | string | Text content |
+| `fontSize` | number | Font size in pixels |
+
+**Image** (`type: "IMAGE"`):
+| Property | Type | Description |
+|----------|------|-------------|
+| `width` | number | Image width |
+| `height` | number | Image height |
+| `dataUrl` | string | Base64 encoded image data |
+
+#### Example: Saving and Loading
+
+```javascript
+// Save canvas content
+document.addEventListener('editor-change', (e) => {
+  const data = JSON.stringify({ objects: e.detail.objects });
+  localStorage.setItem('my-canvas', data);
 });
 
-// Listen for editor close
+// Load canvas content
+const savedData = localStorage.getItem('my-canvas');
+if (savedData) {
+  document.querySelector('canvas-drawing-editor').setAttribute('initial-data', savedData);
+}
+```
+
+#### `editor-close` Event
+
+```javascript
 document.addEventListener('editor-close', () => {
   console.log('Editor closed');
 });
@@ -282,16 +359,93 @@ function App() {
 | `show-import` | boolean | true | 显示 JSON 加载 |
 | `show-color` | boolean | true | 显示颜色选择器 |
 | `show-minimap` | boolean | true | 显示导航小地图 |
+| `initial-data` | string | - | 初始化 JSON 数据（格式见下方） |
+
+### 📊 初始化数据
+
+可以通过 `initial-data` 属性传入 JSON 数据来初始化画布内容：
+
+```html
+<canvas-drawing-editor
+  initial-data='{"objects":[{"id":"abc123","type":"RECTANGLE","x":100,"y":100,"width":200,"height":150,"color":"#3b82f6","lineWidth":2}]}'
+></canvas-drawing-editor>
+```
 
 ### 📡 事件监听
 
+#### `editor-change` 事件
+
+当画布内容变化时触发。`e.detail.objects` 数组包含所有绑图对象。
+
 ```javascript
-// 监听画布内容变化
 document.addEventListener('editor-change', (e) => {
   console.log('对象列表:', e.detail.objects);
+  // 保存到服务器或 localStorage
+  localStorage.setItem('canvas-data', JSON.stringify({ objects: e.detail.objects }));
+});
+```
+
+#### 对象类型和属性说明
+
+`e.detail.objects` 中每个对象都有以下基础属性：
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `id` | string | 唯一标识符 |
+| `type` | string | 对象类型：`RECTANGLE`、`CIRCLE`、`PATH`、`TEXT`、`IMAGE` |
+| `x` | number | X 坐标 |
+| `y` | number | Y 坐标 |
+| `color` | string | 描边/填充颜色（十六进制格式，如 `#3b82f6`） |
+| `lineWidth` | number | 线条宽度（像素） |
+
+**矩形** (`type: "RECTANGLE"`)：
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `width` | number | 矩形宽度 |
+| `height` | number | 矩形高度 |
+
+**圆形** (`type: "CIRCLE"`)：
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `radius` | number | 圆形半径 |
+
+**画笔路径** (`type: "PATH"`)：
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `points` | Array<{x, y}> | 点坐标数组 |
+
+**文本** (`type: "TEXT"`)：
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `text` | string | 文本内容 |
+| `fontSize` | number | 字体大小（像素） |
+
+**图片** (`type: "IMAGE"`)：
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `width` | number | 图片宽度 |
+| `height` | number | 图片高度 |
+| `dataUrl` | string | Base64 编码的图片数据 |
+
+#### 示例：保存和加载画布
+
+```javascript
+// 保存画布内容
+document.addEventListener('editor-change', (e) => {
+  const data = JSON.stringify({ objects: e.detail.objects });
+  localStorage.setItem('my-canvas', data);
 });
 
-// 监听编辑器关闭
+// 加载画布内容
+const savedData = localStorage.getItem('my-canvas');
+if (savedData) {
+  document.querySelector('canvas-drawing-editor').setAttribute('initial-data', savedData);
+}
+```
+
+#### `editor-close` 事件
+
+```javascript
 document.addEventListener('editor-close', () => {
   console.log('编辑器已关闭');
 });

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

@@ -30,12 +30,13 @@ class b extends HTMLElement {
       "show-export",
       "show-import",
       "show-color",
-      "show-minimap"
+      "show-minimap",
+      "initial-data"
     ];
   }
   // 生命周期：连接到 DOM
   connectedCallback() {
-    this.parseAttributes(), this.render(), this.setupEventListeners(), this.initCanvas();
+    this.parseAttributes(), this.render(), this.setupEventListeners(), this.initCanvas(), this.loadInitialData();
   }
   // 生命周期：从 DOM 断开
   disconnectedCallback() {
@@ -43,7 +44,13 @@ class b extends HTMLElement {
   }
   // 生命周期：属性变化
   attributeChangedCallback(t, i, s) {
-    i !== s && (this.parseAttributes(), this.container && this.updateUI());
+    if (i !== s) {
+      if (t === "initial-data" && s && this.canvas) {
+        this.loadInitialData();
+        return;
+      }
+      this.parseAttributes(), this.container && this.updateUI();
+    }
   }
   // 解析 HTML 属性
   parseAttributes() {
@@ -66,6 +73,24 @@ class b extends HTMLElement {
   generateId() {
     return Math.random().toString(36).substr(2, 9);
   }
+  // 加载初始数据
+  loadInitialData() {
+    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 e = new Image();
+            e.onload = () => {
+              s.imageElement = e, this.renderCanvas(), this.renderMinimap();
+            }, e.src = s.dataUrl;
+          }
+        }), this.renderCanvas(), this.renderMinimap(), this.updateUI());
+      } catch (i) {
+        console.error("Failed to parse initial-data:", i);
+      }
+  }
   // 设置事件监听
   setupEventListeners() {
     window.addEventListener("resize", this.boundHandleResize), window.addEventListener("keydown", this.boundHandleKeyDown);
@@ -94,8 +119,8 @@ class b extends HTMLElement {
       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 };
+    const n = (s - i.left - this.panOffset.x) / this.scale, o = (e - i.top - this.panOffset.y) / this.scale;
+    return { x: n, y: o };
   }
   // 获取屏幕坐标（不考虑缩放和平移）
   getScreenPos(t) {
@@ -128,23 +153,23 @@ class b extends HTMLElement {
       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 };
+        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 };
       }
     }
     return { x: 0, y: 0, width: 0, height: 0 };
   }
   // 检查调整大小手柄
   getResizeHandleAtPoint(t, i, s) {
-    const e = this.getObjectBounds(t), n = 8, a = [
+    const e = this.getObjectBounds(t), n = 8, o = [
       { 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;
+    for (const a of o)
+      if (Math.abs(i - a.x) <= n && Math.abs(s - a.y) <= n)
+        return a.name;
     return null;
   }
   // 碰撞检测
@@ -169,8 +194,8 @@ class b extends HTMLElement {
       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;
+        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;
       }
     }
     return !1;
@@ -266,13 +291,13 @@ 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, a = this.scale * n;
-    this.zoomAtPoint(a, s, e);
+    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);
   }
   // 以指定点为中心缩放
   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();
+    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();
   }
   // 放大
   zoomIn() {
@@ -344,16 +369,16 @@ class b extends HTMLElement {
     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));
+        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));
             return;
           }
         }
       }
-      const n = [...this.objects].reverse().find((a) => this.isHit(a, i, s));
+      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());
     } else if (this.tool === "TEXT")
       this.textInputPos = { x: i, y: s }, this.showTextInput(e.x, e.y), this.isDragging = !1;
@@ -367,8 +392,8 @@ class b extends HTMLElement {
   // 画布鼠标移动
   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();
+      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();
       return;
     }
     if (!this.isDragging || !this.dragStart) return;
@@ -376,27 +401,27 @@ class b extends HTMLElement {
     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) {
+      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) {
         case "RECTANGLE":
         case "IMAGE":
-          e.x = o, e.y = l, e.width = r, e.height = h;
+          e.x = a, 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;
+          e.x = a + 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));
+          e.x = a, 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,
+            x: a + (u.x - this.resizeStartBounds.x) * c,
             y: l + (u.y - this.resizeStartBounds.y) * p
           }));
           break;
@@ -409,8 +434,8 @@ class b extends HTMLElement {
       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 };
+          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 };
         } else
           e.x = i - this.dragOffset.x, e.y = s - this.dragOffset.y;
         this.renderCanvas(), this.renderMinimap();
@@ -427,7 +452,7 @@ class b extends HTMLElement {
   }
   // 画布鼠标抬起
   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.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();
   }
   // 双击编辑文本
   handleCanvasDoubleClick(t) {
@@ -436,8 +461,8 @@ class b extends HTMLElement {
     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");
+      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");
     }
   }
   // 渲染画布
@@ -499,8 +524,8 @@ class b extends HTMLElement {
       { 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();
+    ].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([]);
   }
   // 渲染小地图
@@ -508,8 +533,8 @@ class b extends HTMLElement {
     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) => {
+    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.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 = Math.max(d.lineWidth, 1), this.minimapCtx.setLineDash([]), d.type) {
         case "RECTANGLE": {
           const c = d;
@@ -537,14 +562,14 @@ class b extends HTMLElement {
           break;
         }
       }
-    }), this.minimapCtx.restore(), this.minimapCtx.strokeStyle = "#94a3b8", this.minimapCtx.lineWidth = 1, this.minimapCtx.strokeRect(l, r, a, o);
+    }), 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, 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;
+    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, m = (p / a - this.panOffset.y) / this.scale, g = this.canvas.width / 2, x = this.canvas.height / 2;
     this.panOffset = {
-      x: m / this.scale - u,
-      y: x / this.scale - g
+      x: g / this.scale - u,
+      y: x / this.scale - m
     }, this.renderCanvas(), this.renderMinimap();
   }
   // 图片上传处理
@@ -554,11 +579,11 @@ class b extends HTMLElement {
     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 = () => {
+      const o = (l = n.target) == null ? void 0 : l.result, a = new Image();
+      a.onload = () => {
         this.saveHistory();
         const r = 300;
-        let h = o.width, d = o.height;
+        let h = a.width, d = a.height;
         if (h > r || d > r) {
           const p = Math.min(r / h, r / d);
           h *= p, d *= p;
@@ -572,19 +597,19 @@ class b extends HTMLElement {
           height: d,
           color: "#000000",
           lineWidth: 1,
-          dataUrl: a,
-          imageElement: o
+          dataUrl: o,
+          imageElement: a
         };
         this.objects.push(c), this.selectedId = c.id, this.setTool("SELECT"), this.renderCanvas(), this.renderMinimap(), this.updateUI(), this.dispatchChangeEvent();
-      }, o.src = a;
+      }, a.src = o;
     }, e.readAsDataURL(s), i.value = "";
   }
   // 保存 JSON
   saveJson() {
     const t = {
       version: "1.0",
-      objects: this.objects.map((a) => {
-        const { imageElement: o, ...l } = a;
+      objects: this.objects.map((o) => {
+        const { imageElement: a, ...l } = o;
         return l;
       })
     }, i = JSON.stringify(t, null, 2), s = new Blob([i], { type: "application/json" }), e = URL.createObjectURL(s), n = document.createElement("a");
@@ -596,10 +621,10 @@ class b extends HTMLElement {
     if (!i.files || i.files.length === 0) return;
     const s = i.files[0], e = new FileReader();
     e.onload = (n) => {
-      var a;
+      var o;
       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) => {
+        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) => {
           if (l.type === "IMAGE" && l.dataUrl) {
             const r = new Image();
             r.onload = () => {
@@ -607,8 +632,8 @@ class b extends HTMLElement {
             }, r.src = l.dataUrl;
           }
         }), this.renderCanvas(), this.renderMinimap(), this.updateUI(), this.dispatchChangeEvent());
-      } catch (o) {
-        console.error("Failed to load JSON:", o);
+      } catch (a) {
+        console.error("Failed to load JSON:", a);
       }
     }, e.readAsText(s), i.value = "";
   }
@@ -628,7 +653,7 @@ class b extends HTMLElement {
       if (this.selectedId) {
         const e = this.objects.find((n) => n.id === this.selectedId);
         if (e) {
-          const a = {
+          const o = {
             RECTANGLE: "矩形",
             CIRCLE: "圆形",
             PATH: "画笔",
@@ -636,15 +661,15 @@ class b extends HTMLElement {
             IMAGE: "图片"
           }[e.type] || e.type;
           t.innerHTML = `
-            <span class="selection-label">已选择: ${a}</span>
+            <span class="selection-label">已选择: ${o}</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 o = t.querySelector(".delete-btn");
-          o && o.addEventListener("click", () => this.deleteSelected());
+          const a = t.querySelector(".delete-btn");
+          a && a.addEventListener("click", () => this.deleteSelected());
         }
       } else
         t.classList.remove("visible"), t.innerHTML = "";
@@ -762,6 +787,7 @@ class b extends HTMLElement {
 
             <!-- 文本输入 -->
             <div class="text-input-container" style="display: none;">
+              <div class="text-input-hint">按 Enter 确认，Esc 取消</div>
               <input type="text" class="text-input" placeholder="输入文本..." />
             </div>
 
@@ -778,7 +804,10 @@ class b extends HTMLElement {
   // 绑定事件
   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", () => {
+      h.addEventListener("mousedown", (d) => {
+        d.preventDefault();
+      }), h.addEventListener("click", () => {
+        this.isTextInputVisible && this.submitText();
         const d = h.getAttribute("data-tool");
         this.setTool(d);
       });
@@ -791,10 +820,10 @@ class b extends HTMLElement {
     });
     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) => {
+    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();
     }), this.textInput.addEventListener("blur", () => {
       this.isTextInputVisible && this.submitText();
@@ -1105,6 +1134,19 @@ class b extends HTMLElement {
       .text-input-container {
         position: absolute;
         z-index: 20;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .text-input-hint {
+        background: rgba(0, 0, 0, 0.75);
+        color: #fff;
+        font-size: 12px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        margin-bottom: 4px;
+        white-space: nowrap;
       }
 
       .text-input {