canvas-drawing-editor 2.2.0 → 2.3.0

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

@@ -349,8 +349,8 @@ class $ extends HTMLElement {
         const y = this.objects.find((w) => w.id === c.objectId);
         if (y)
           for (const w of Object.keys(c.toProps)) {
-            const T = c.fromProps[w] ?? 0, E = c.toProps[w] ?? 0;
-            y[w] = T + (E - T) * f;
+            const k = c.fromProps[w] ?? 0, E = c.toProps[w] ?? 0;
+            y[w] = k + (E - k) * f;
           }
         (r = (o = c.config).onUpdate) == null || r.call(o, p), p >= 1 ? c.config.repeat === -1 || c.currentRepeat < c.config.repeat ? (c.currentRepeat++, c.startTime = t, c.config.yoyo && (c.isReversed = !c.isReversed), i = !0) : (c.isCompleted = !0, (a = (l = c.config).onComplete) == null || a.call(l), e.push(h)) : i = !0;
       }
@@ -404,13 +404,52 @@ class $ extends HTMLElement {
   }
   // 生命周期：属性变化
   attributeChangedCallback(t, i, e) {
-    if (i !== e) {
-      if (t === "initial-data" && e && this.canvas) {
-        this.loadInitialData(), this.renderCanvas();
-        return;
-      }
-      this.parseAttributes(), this.container && this.updateUI();
+    if (i === e) return;
+    if (t === "initial-data" && e && this.canvas) {
+      this.loadInitialData(), this.renderCanvas();
+      return;
+    }
+    if (t === "hotzone-data" && this.canvas) {
+      this.parseHotzoneData(), this.applyHotzoneData(), this.renderCanvas();
+      return;
     }
+    const s = [
+      "title",
+      "lang",
+      "theme-color",
+      "tool-config",
+      "enable-hotzone",
+      "show-pencil",
+      "show-rectangle",
+      "show-circle",
+      "show-text",
+      "show-image",
+      "show-zoom",
+      "show-download",
+      "show-export",
+      "show-import",
+      "show-color",
+      "show-clear",
+      "show-line",
+      "show-arrow",
+      "show-polygon",
+      "show-undo",
+      "show-redo",
+      "show-layers",
+      "show-group",
+      "show-align"
+    ];
+    if (this.parseAttributes(), this.container && s.includes(t)) {
+      const n = [...this.objects], o = this.scale, r = { ...this.panOffset }, l = new Set(this.selectedIds);
+      this.render(), this.setupEventListeners(), this.initCanvas(!1), this.objects = n, this.scale = o, this.panOffset = r, this.selectedIds = l, this.objects.forEach((a) => {
+        if (a.type === "IMAGE" && a.dataUrl) {
+          const h = new Image();
+          h.onload = () => {
+            a.imageElement = h, this.renderCanvas();
+          }, h.src = a.dataUrl;
+        }
+      }), this.updateZoomDisplay(), this.renderCanvas();
+    } else this.container && this.updateUI();
   }
   // 解析 HTML 属性
   parseAttributes() {
@@ -1774,6 +1813,23 @@ class $ extends HTMLElement {
       }
     }
   }
+  // ========== 公开 API 方法 ==========
+  // 导出画布数据为 JSON 对象
+  exportJSON() {
+    return {
+      version: "1.0",
+      objects: this.objects.map((t) => {
+        const { imageElement: i, ...e } = t;
+        return e;
+      })
+    };
+  }
+  // 导出画布为 PNG 图片
+  exportPNG(t = "canvas-export.png") {
+    if (!this.canvas) return;
+    const i = document.createElement("a");
+    i.download = t, i.href = this.canvas.toDataURL("image/png"), i.click();
+  }
   // ========== Tween动画系统方法 ==========
   // 创建动画 (使用 tweenAnimate 避免与 HTMLElement.animate 冲突)
   tweenAnimate(t, i, e = {}) {
@@ -2258,7 +2314,7 @@ class $ extends HTMLElement {
   // 绘制单个对象
   drawObject(t, i) {
     if (i.visible !== !1) {
-      if (t.save(), i.rotation || i.skewX || i.skewY) {
+      if (t.save(), i.opacity !== void 0 && i.opacity !== 1 && (t.globalAlpha = i.opacity), i.rotation || i.skewX || i.skewY) {
         const e = this.getObjectBounds(i), s = e.x + e.width / 2, n = e.y + e.height / 2;
         t.translate(s, n), i.rotation && t.rotate(i.rotation), (i.skewX || i.skewY) && t.transform(1, i.skewY || 0, i.skewX || 0, 1, 0, 0), t.translate(-s, -n);
       }
@@ -2470,8 +2526,8 @@ class $ extends HTMLElement {
       if (t.skewX || t.skewY) {
         const p = t.skewX || 0, f = t.skewY || 0, y = 1 - p * f;
         if (Math.abs(y) > 1e-3) {
-          const w = (c - p * d) / y, T = (d - f * c) / y;
-          c = w, d = T;
+          const w = (c - p * d) / y, k = (d - f * c) / y;
+          c = w, d = k;
         }
       }
       l = n + c, a = o + d;
@@ -3257,8 +3313,8 @@ class $ extends HTMLElement {
       g.addEventListener("click", (m) => {
         const b = m.currentTarget, v = b.dataset.lineStyle;
         this.lineStyle = v, this.shadow.querySelectorAll(".line-style-btn").forEach((x) => x.classList.remove("active")), b.classList.add("active");
-        const k = this.getSelectedObjects();
-        k.length > 0 && (this.saveHistory(), k.forEach((x) => {
+        const T = this.getSelectedObjects();
+        T.length > 0 && (this.saveHistory(), T.forEach((x) => {
           (x.type === "LINE" || x.type === "ARROW" || x.type === "RECTANGLE" || x.type === "CIRCLE" || x.type === "POLYGON" || x.type === "TRIANGLE" || x.type === "STAR" || x.type === "HEART" || x.type === "DIAMOND") && (x.lineStyle = v);
         }), this.renderCanvas(), this.dispatchChangeEvent());
       });
@@ -3288,11 +3344,11 @@ class $ extends HTMLElement {
       const g = (m) => {
         const b = m.target.value;
         if (this.color = b, this.selectedId) {
-          const v = this.objects.find((k) => k.id === this.selectedId);
+          const v = this.objects.find((T) => T.id === this.selectedId);
           v && (this.saveHistory(), v.color = b, this.renderCanvas(), this.dispatchChangeEvent());
         } else this.selectedIds.size > 0 && (this.saveHistory(), this.selectedIds.forEach((v) => {
-          const k = this.objects.find((x) => x.id === v);
-          k && (k.color = b);
+          const T = this.objects.find((x) => x.id === v);
+          T && (T.color = b);
         }), this.renderCanvas(), this.dispatchChangeEvent());
       };
       y.addEventListener("input", g), y.addEventListener("change", g);
@@ -3300,8 +3356,8 @@ class $ extends HTMLElement {
     this.shadow.querySelectorAll(".image-input").forEach((g) => {
       g.addEventListener("change", (m) => this.handleImageUpload(m));
     });
-    const w = this.shadow.querySelector(".zoom-in-btn"), T = this.shadow.querySelector(".zoom-out-btn"), E = this.shadow.querySelector(".zoom-text");
-    w && w.addEventListener("click", () => this.zoomIn()), T && T.addEventListener("click", () => this.zoomOut()), E && E.addEventListener("click", () => this.resetZoom());
+    const w = this.shadow.querySelector(".zoom-in-btn"), k = this.shadow.querySelector(".zoom-out-btn"), E = this.shadow.querySelector(".zoom-text");
+    w && w.addEventListener("click", () => this.zoomIn()), k && k.addEventListener("click", () => this.zoomOut()), E && E.addEventListener("click", () => this.resetZoom());
     const P = this.shadow.querySelector(".save-json-btn"), O = this.shadow.querySelector(".load-json-input"), R = this.shadow.querySelector(".export-png-btn");
     P && P.addEventListener("click", () => this.saveJson()), O && O.addEventListener("change", (g) => this.loadJson(g)), R && R.addEventListener("click", () => this.exportPng());
     const L = this.shadow.querySelector(".clear-canvas-btn"), z = this.shadow.querySelector(".clear-confirm-popup"), A = this.shadow.querySelector(".clear-confirm-yes"), D = this.shadow.querySelector(".clear-confirm-no");
@@ -3395,6 +3451,7 @@ class $ extends HTMLElement {
         width: 100%;
         height: 100%;
         background: #f1f5f9;
+        position: relative;
       }
 
       /* 工具栏 */