canvas-drawing-editor 2.0.4 → 2.0.6

package/README.md

@@ -144,21 +144,13 @@ You can pass JSON data to initialize the canvas content:
 
 #### `editor-change` Event
 
-Fires when canvas content changes. The event detail contains:
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `objects` | Array | All drawing objects (raw data) |
-| `data` | Object | Serializable JSON data for storage/restore |
+Fires when canvas content changes. The `e.detail.objects` array contains all drawing objects.
 
 ```javascript
 document.addEventListener('editor-change', (e) => {
   console.log('Objects:', e.detail.objects);
-
-  // Use e.detail.data for saving to database
-  const jsonData = JSON.stringify(e.detail.data);
-  localStorage.setItem('canvas-data', jsonData);
-  // or save to server: fetch('/api/save', { method: 'POST', body: jsonData });
+  // Save to server or localStorage
+  localStorage.setItem('canvas-data', JSON.stringify({ objects: e.detail.objects }));
 });
 ```
 
@@ -207,11 +199,10 @@ Each object in `e.detail.objects` has the following base properties:
 #### Example: Saving and Loading
 
 ```javascript
-// Save canvas content (use e.detail.data for clean serializable data)
+// Save canvas content
 document.addEventListener('editor-change', (e) => {
-  const jsonData = JSON.stringify(e.detail.data);
-  localStorage.setItem('my-canvas', jsonData);
-  // or save to database
+  const data = JSON.stringify({ objects: e.detail.objects });
+  localStorage.setItem('my-canvas', data);
 });
 
 // Load canvas content
@@ -384,21 +375,13 @@ function App() {
 
 #### `editor-change` 事件
 
-当画布内容变化时触发。事件详情包含：
-
-| 属性 | 类型 | 说明 |
-|------|------|------|
-| `objects` | Array | 所有绑图对象（原始数据） |
-| `data` | Object | 可序列化的 JSON 数据，用于存储/回显 |
+当画布内容变化时触发。`e.detail.objects` 数组包含所有绑图对象。
 
 ```javascript
 document.addEventListener('editor-change', (e) => {
   console.log('对象列表:', e.detail.objects);
-
-  // 使用 e.detail.data 保存到数据库
-  const jsonData = JSON.stringify(e.detail.data);
-  localStorage.setItem('canvas-data', jsonData);
-  // 或保存到服务器: fetch('/api/save', { method: 'POST', body: jsonData });
+  // 保存到服务器或 localStorage
+  localStorage.setItem('canvas-data', JSON.stringify({ objects: e.detail.objects }));
 });
 ```
 
@@ -447,11 +430,10 @@ document.addEventListener('editor-change', (e) => {
 #### 示例：保存和加载画布
 
 ```javascript
-// 保存画布内容（使用 e.detail.data 获取可序列化的数据）
+// 保存画布内容
 document.addEventListener('editor-change', (e) => {
-  const jsonData = JSON.stringify(e.detail.data);
-  localStorage.setItem('my-canvas', jsonData);
-  // 或保存到数据库
+  const data = JSON.stringify({ objects: e.detail.objects });
+  localStorage.setItem('my-canvas', data);
 });
 
 // 加载画布内容

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

@@ -239,23 +239,10 @@ class b extends HTMLElement {
   }
   // 派发变化事件
   dispatchChangeEvent() {
-    const t = {
-      objects: this.objects.map((i) => {
-        if (i.type === "IMAGE") {
-          const { imageElement: s, ...e } = i;
-          return e;
-        }
-        return { ...i };
-      })
-    };
     this.dispatchEvent(new CustomEvent("editor-change", {
       bubbles: !0,
       composed: !0,
-      detail: {
-        objects: this.objects,
-        data: t
-        // 可直接用于存储/回显的 JSON 数据
-      }
+      detail: { objects: this.objects }
     }));
   }
   // 键盘事件处理
@@ -547,7 +534,7 @@ class b extends HTMLElement {
     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.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) => {
+    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;
@@ -579,10 +566,10 @@ class b extends HTMLElement {
   }
   // 小地图点击定位
   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, m = (p / a - this.panOffset.y) / this.scale, g = 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, g = (p / a - this.panOffset.y) / this.scale, m = this.canvas.width / 2, x = this.canvas.height / 2;
     this.panOffset = {
-      x: g / this.scale - u,
-      y: x / this.scale - m
+      x: m / this.scale - u,
+      y: x / this.scale - g
     }, this.renderCanvas(), this.renderMinimap();
   }
   // 图片上传处理
@@ -805,7 +792,7 @@ class b extends HTMLElement {
             </div>
 
             <!-- 空画布提示 -->
-            <div class="empty-hint">
+            <div class="empty-hint" style="display: ${this.getAttribute("initial-data") ? "none" : "flex"};">
               <h3>开始创作</h3>
               <p>选择左侧的工具开始绘制</p>
             </div>