@printine/designer 0.1.0

package/dist/engine/editor.js

@@ -0,0 +1,734 @@
+import "./fabric.js";
+import { v4 as R } from "uuid";
+import { cloneObject as k, urlToDataURL as Y } from "./utils/common.js";
+import { loadOverlaySvgImage as X, loadImage as U } from "./utils/image.js";
+import { Loading as L } from "./utils/loading.js";
+import { HistoryManager as T } from "./history.js";
+import { LAYER_BLACK_LIST as A } from "./constants.js";
+import { designerEventBus as x } from "./events.js";
+import { ImageProcessor as B } from "./processors/image.js";
+import { TemplateProcessor as E } from "./processors/template.js";
+import { TextProcessor as W } from "./processors/text.js";
+import { ResizeManager as _ } from "./managers/resize.js";
+import { WorkspaceManager as D } from "./managers/workspace.js";
+import { fabric as d } from "fabric";
+class se {
+  constructor(t, s, e, n = {}) {
+    this.imageCache = /* @__PURE__ */ new Map(), this.overlayCache = /* @__PURE__ */ new Map(), this.deleteObject = (r) => {
+      if (r) {
+        const a = this.canvas._objects.find((c) => c.id === r);
+        a && (this.canvas.remove(a), this.revokeImgBlobLink(a));
+      } else {
+        const a = this.canvas.getActiveObjects();
+        a.length > 0 && (a.forEach((c) => {
+          this.canvas.remove(c), this.revokeImgBlobLink(c);
+        }), this.canvas.discardActiveObject());
+      }
+      this.canvas.requestRenderAll();
+    };
+    const i = typeof n == "number" ? { overlayScale: n } : n;
+    this.canvas = new d.Canvas(t, {
+      enableRetinaScaling: !0,
+      width: s.width,
+      height: s.height,
+      preserveObjectStacking: !0,
+      stopContextMenu: !1,
+      centeredRotation: !0,
+      hoverCursor: "grab",
+      moveCursor: "grabbing",
+      allowTouchScrolling: !0,
+      selection: !0,
+      interactive: !0,
+      controlsAboveOverlay: !0,
+      fireRightClick: !0
+      // 允许识别右键点击
+    }), this.overlayScale = i.overlayScale ?? 0.85, this.loadingOptions = i.loading ?? {}, this.events = i.events ?? x, this.imageProcessor = new B(this), this.templateProcessor = new E(this), this.textProcessor = new W(this), this.resizeManager = new _(this, e), this.workspaceManager = new D(this, i.workspace), this.setupImageCacheInterceptor();
+  }
+  /** Builds a loading indicator that already carries the package asset configuration. */
+  createLoading(t) {
+    return new L(this.canvas, t, this.loadingOptions);
+  }
+  /**
+   * 统一拦截图片创建：优先从会话缓存复用已加载的 HTMLImageElement，避免视图切换或导出时重复请求远程图片
+   */
+  setupImageCacheInterceptor() {
+    const t = this.imageCache, s = d.Image.fromURL, e = d.Image.fromObject;
+    if (d.Image._printineCacheHooked) return;
+    d.Image._printineCacheHooked = !0;
+    const n = (r) => {
+      if (!r) return null;
+      const a = t.get(r);
+      return a?.element && a.element.complete ? (t.set(r, { ...a, lastUsed: Date.now() }), a.element) : null;
+    };
+    d.Image.fromURL = function(r, a, c) {
+      const o = { ...c, crossOrigin: "anonymous" }, l = n(r);
+      if (l) {
+        const u = new d.Image(l, o);
+        u.originSrc = r, a && a(u);
+        return;
+      }
+      return s.call(
+        this,
+        r,
+        (u) => {
+          u && (u.originSrc = r), a && a(u);
+        },
+        o
+      );
+    };
+    const i = (r) => !!r && typeof r == "object" && typeof r.set == "function" && typeof r.shouldCache == "function";
+    d.Image.fromObject = function(r, a) {
+      const c = r?.originSrc || r?.src, o = n(c);
+      if (o) {
+        const { clipPath: l, ...u } = r ?? {}, v = new d.Image(o, { ...u });
+        if (v.originSrc = c, !l || i(l)) {
+          l && (v.clipPath = l), a?.(v);
+          return;
+        }
+        d.util.enlivenObjects(
+          [l],
+          (y) => {
+            const [P] = y || [];
+            P && (v.clipPath = P), a?.(v);
+          },
+          ""
+        );
+        return;
+      }
+      return e.call(this, { ...r, crossOrigin: "anonymous" }, a);
+    };
+  }
+  /**
+   * 渲染 overlayImage（SVG）
+   * @param mockup 模板信息
+   * @param changeView 是否切换视图，如果为 true，则需要重新设置画布和背景图
+   */
+  async renderOverlayImage(t, s = !1) {
+    const { image: e, clipPath: n } = await this.getOverlayImage(t.image), i = Math.min(this.canvas.width, this.canvas.height) * this.overlayScale, r = i / e.width, a = i / e.height, c = Math.min(r, a);
+    return e.set({
+      scaleX: c,
+      scaleY: c,
+      left: (this.canvas.width - e.width * c) / 2,
+      top: (this.canvas.height - e.height * c) / 2,
+      selectable: !1
+    }), n && n.set({
+      scaleX: c,
+      scaleY: c,
+      left: (this.canvas.width - n.width * c) / 2,
+      top: (this.canvas.height - n.height * c) / 2,
+      absolutePositioned: !0,
+      selectable: !1,
+      evented: !1
+    }), s && this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]), new Promise((o) => {
+      this.canvas.setOverlayImage(e, async () => {
+        this.workspaceManager.setClipPath(n ?? e, {
+          width: e.width,
+          height: e.height
+        }), this.setupOverlayBorders(e, n), this.canvas.renderAll(), o();
+      });
+    });
+  }
+  /**
+   * 获取 overlay 图：优先使用会话级缓存，避免重复网络请求
+   * 会返回深拷贝，确保不同视图间互不影响
+   */
+  async getOverlayImage(t) {
+    const s = this.overlayCache.get(t);
+    if (s) {
+      const r = await k(s.image), a = s.clipPath ? await k(s.clipPath) : void 0;
+      return { image: r, clipPath: a };
+    }
+    const e = await X(t);
+    this.overlayCache.set(t, e);
+    const n = await k(e.image), i = e.clipPath ? await k(e.clipPath) : void 0;
+    return { image: n, clipPath: i };
+  }
+  /**
+   * 绘制可设计区域边框，优先使用 clipPath 的真实形状
+   */
+  setupOverlayBorders(t, s) {
+    this.overlayBorderHandler && this.canvas.off("after:render", this.overlayBorderHandler);
+    const e = s ?? t;
+    this.overlayBorderHandler = () => {
+      const n = this.canvas.getContext(), i = this.canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
+      n.save(), n.transform(i[0], i[1], i[2], i[3], i[4], i[5]);
+      const r = {
+        stroke: e.stroke,
+        strokeWidth: e.strokeWidth,
+        strokeDashArray: e.strokeDashArray,
+        fill: e.fill,
+        strokeUniform: e.strokeUniform
+      };
+      e.set({
+        stroke: "#C3C3CC",
+        strokeWidth: 1,
+        strokeDashArray: [],
+        fill: "transparent",
+        strokeUniform: !0,
+        objectCaching: !1
+      }), e.render(n);
+      const a = 6, c = (e.getScaledWidth() + a * 2) / e.getScaledWidth(), o = (e.getScaledHeight() + a * 2) / e.getScaledHeight(), l = e.left ?? 0, u = e.top ?? 0, v = e.scaleX ?? 1, y = e.scaleY ?? 1;
+      e.set({
+        strokeDashArray: [4, 4],
+        stroke: "#C3C3CC",
+        strokeWidth: 1,
+        strokeUniform: !0,
+        scaleX: v * c,
+        scaleY: y * o,
+        left: l - a,
+        top: u - a
+      }), e.render(n), e.set({
+        stroke: r.stroke,
+        strokeWidth: r.strokeWidth,
+        strokeDashArray: r.strokeDashArray,
+        fill: r.fill,
+        strokeUniform: r.strokeUniform,
+        scaleX: v,
+        scaleY: y,
+        left: l,
+        top: u
+      }), n.restore();
+    }, this.canvas.on("after:render", this.overlayBorderHandler);
+  }
+  /**
+   * 设置背景遮罩
+   */
+  async setBackgroundMask(t) {
+    const s = document.querySelector(".lower-canvas");
+    if (s && !t)
+      return s.style.backgroundImage = "", Promise.resolve();
+    const e = await U(t);
+    if (e == null) return Promise.resolve();
+    e.set({
+      scaleX: this.canvas.width / e.width,
+      scaleY: this.canvas.height / e.height
+    });
+    const n = e.toDataURL({ format: "png" });
+    s && (s.style.backgroundImage = `url(${n})`, s.style.backgroundSize = "100% 100%");
+  }
+  /**
+   * 设置背景颜色、透明图案
+   */
+  async setBackground(t) {
+    t ? await this.workspaceManager.setFillColor(t) : await this.workspaceManager.setTransparentPattern(), this.canvas.requestRenderAll();
+  }
+  /**
+   * 获取当前选中的对象
+   */
+  get activeObject() {
+    return this.canvas.getActiveObject();
+  }
+  /**
+   * 获取对象经过画布转换后的实际尺寸
+   */
+  getObjectActualSize(t) {
+    const { left: s = 0, top: e = 0, width: n = 0, height: i = 0 } = t.getBoundingRect(), r = t.getCenterPoint(), a = this.canvas.viewportTransform;
+    return {
+      left: s * a[0] + a[4],
+      top: e * a[3] + a[5],
+      width: n * a[0],
+      height: i * a[3],
+      centerX: r.x * a[0] + a[4],
+      centerY: r.y * a[3] + a[5]
+    };
+  }
+  /**
+   * 添加对象
+   */
+  addObject(t, s = !0) {
+    t.set({
+      id: R()
+    }), this.canvas.add(t), s && this.canvas.setActiveObject(t);
+  }
+  /**
+   * 恢复对象
+   */
+  async restoreObject(t) {
+    return new Promise((s) => {
+      d.util.enlivenObjects([t], (e) => s(e), "");
+    });
+  }
+  /**
+   * 清理图片 blob URL（只清理不在缓存中的临时 blob）
+   */
+  revokeImgBlobLink(t) {
+    if (t.type === "image" && t.getSrc) {
+      const s = t, e = s.getSrc(), n = s.originSrc || e;
+      if (e && e.startsWith("blob:")) {
+        const i = this.imageCache.get(n);
+        if (!i || i.blobUrl !== e)
+          try {
+            URL.revokeObjectURL(e);
+          } catch {
+          }
+      }
+    }
+  }
+  /**
+   * 修改对象的属性
+   */
+  updateObject(t, s) {
+    const e = this.canvas._objects.find((n) => n.id === t);
+    if (e) {
+      if (Object.prototype.hasOwnProperty.call(s, "angle"))
+        e.rotate(s.angle);
+      else if (Object.prototype.hasOwnProperty.call(s, "align")) {
+        const { left: n, right: i, top: r, bottom: a, center: c } = this.workspaceManager.dimension, o = e.getBoundingRect(!0, !0);
+        switch (s.align) {
+          case "top":
+            e.set({
+              top: e.top + (r - o.top)
+            });
+            break;
+          case "left":
+            e.set({
+              left: e.left + (n - o.left)
+            });
+            break;
+          case "horizontal-center":
+            e.set({
+              left: e.left + (c.x - (o.left + o.width / 2))
+            });
+            break;
+          case "right":
+            e.set({
+              left: e.left + (i - (o.left + o.width))
+            });
+            break;
+          case "vertical-center":
+            e.set({
+              top: e.top + (c.y - (o.top + o.height / 2))
+            });
+            break;
+          case "bottom":
+            e.set({
+              top: e.top + (a - (o.top + o.height))
+            });
+            break;
+        }
+      } else if (Object.prototype.hasOwnProperty.call(s, "zIndex"))
+        this.canvas.moveTo(e, s.zIndex);
+      else if (Object.prototype.hasOwnProperty.call(s, "scale"))
+        this.updateObjectScale(e, s.scale);
+      else if (Object.prototype.hasOwnProperty.call(s, "width") || Object.prototype.hasOwnProperty.call(s, "height")) {
+        const n = Object.prototype.hasOwnProperty.call(s, "width") ? e.width : e.height, r = (s.width || s.height) / n * this.workspaceManager.scale;
+        this.updateObjectScale(e, r);
+      } else
+        e.set(s);
+      e.setCoords(), this.canvas.requestRenderAll(), Object.prototype.hasOwnProperty.call(s, "selectable") || this.canvas.fire("object:modified", {
+        target: e
+      });
+    }
+  }
+  /**
+   * 对象缩放
+   */
+  updateObjectScale(t, s) {
+    const e = t.getCenterPoint(), n = this.workspaceManager.dimension.width * 0.01 / t.width;
+    t.scale(s < n ? n : s), t.setPositionByOrigin(e, "center", "center");
+  }
+  /**
+   * 修改画布上的对象的选中状态和事件状态
+   */
+  updateObjectsEvents(t) {
+    this.canvas.forEachObject((s) => {
+      s.set({
+        selectable: t,
+        evented: t
+      });
+    });
+  }
+  /**
+   * 获取当前可选择的对象，不包括背景图、裁剪区域
+   */
+  getLayerList() {
+    return this.canvas._objects.filter((t) => !A.includes(t.id || ""));
+  }
+  /**
+   * 设置当前选中的对象
+   */
+  setActiveObject(t) {
+    const s = this.canvas.getActiveObjects(), e = s.some((i) => i.id === t), n = this.getLayerList().find((i) => i.id === t);
+    n && (this.canvas.discardActiveObject(), (!e || s.length > 1) && this.canvas.setActiveObject(n), this.canvas.requestRenderAll());
+  }
+  /**
+   * 同时选中多个对象
+   */
+  setActiveObjects(t) {
+    const s = new d.ActiveSelection(t, { canvas: this.canvas });
+    this.canvas.setActiveObject(s), this.canvas.requestRenderAll();
+  }
+  /**
+   * 以画布中心点缩放画布
+   */
+  zoomToCenter(t) {
+    if (t === 1)
+      this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+    else {
+      const s = this.canvas.viewportTransform, e = s[0], n = s[4], i = s[5], r = this.canvas.width / 2, a = this.canvas.height / 2, c = t - e, o = n - r * c, l = i - a * c;
+      this.canvas.setViewportTransform([t, 0, 0, t, o, l]);
+    }
+    this.canvas.requestRenderAll();
+  }
+  /**
+   * 获取当前画布上渲染的对象
+   */
+  getRenderedObjects() {
+    const { objects: t } = this.canvas.toJSON(T.DEFAULT_SAVE_PROPERTIES), s = this.workspaceManager.dimension;
+    return {
+      objects: t.filter((e) => !A.includes(e.id || "")),
+      workspaceMetadata: {
+        width: s.width,
+        height: s.height,
+        centerX: s.center.x,
+        centerY: s.center.y
+      }
+    };
+  }
+  /**
+   * 清空当前画布
+   */
+  clearCanvas() {
+    this.canvas._objects.length && (this.canvas.clear(), this.canvas.requestRenderAll());
+  }
+  /**
+   * 将图片对象的 clipPath 重新关联到画布上的对象
+   */
+  relinkClipPaths() {
+    const t = /* @__PURE__ */ new Map(), s = this.canvas.getObjects(), e = (i) => {
+      const r = i.id;
+      r && t.set(String(r), i), i.type === "group" && i._objects?.forEach(e);
+    };
+    s.forEach(e);
+    const n = (i) => {
+      const a = i.clipPath?.id;
+      if (a && t.has(String(a))) {
+        const c = t.get(String(a));
+        c.set({ absolutePositioned: !0 }), i.set("clipPath", c), i.dirty = !0;
+      }
+      i.type === "group" && i._objects?.forEach(n);
+    };
+    s.forEach(n);
+  }
+  /**
+   * 切换视图，重新渲染画布
+   */
+  async switchView(t, s, e) {
+    if (this.canvas.clear(), e && e.objects && e.objects.length)
+      return await this.textProcessor.preloadFontsFromState(e), new Promise((n) => {
+        this.canvas.loadFromJSON(
+          e,
+          async () => {
+            this.relinkClipPaths(), await this.renderOverlayImage(t, !0), await this.setBackground(s), e.workspaceMetadata && this._scaleObjectsToWorkspace(e.workspaceMetadata);
+            const i = this.canvas.getObjects().filter((r) => r.type === "image");
+            i.length > 0 && await Promise.all(
+              i.map((r) => new Promise((a) => {
+                const c = r.getElement(), o = r.getSrc() || r.originSrc;
+                if (!o) {
+                  a();
+                  return;
+                }
+                c && c.complete && c.naturalWidth > 0 ? (this.registerImageCache(o, r), a()) : c ? (c.onload = () => {
+                  this.registerImageCache(o, r), a();
+                }, c.onerror = () => {
+                  a();
+                }) : a();
+              }))
+            ), this.canvas.renderAll(), this.events.emit("design:layerChange"), n();
+          },
+          (i, r) => {
+            i.clipPath && !e.objects.some((a) => a.id === i.clipPath.id) && (delete r.clipPath, d.util.enlivenObjects(
+              [i.clipPath],
+              (a) => {
+                const c = a[0];
+                c && (r.set("clipPath", c), r.dirty = !0, this.canvas.requestRenderAll());
+              },
+              ""
+            ));
+          }
+        );
+      });
+    await this.renderOverlayImage(t, !0), await this.setBackground(s), e && e.object && await this.imageProcessor.addBitmapImage(e.object);
+  }
+  /**
+   * 根据 workspace 尺寸变化，按比例缩放所有对象
+   */
+  _scaleObjectsToWorkspace(t) {
+    const s = this.workspaceManager.dimension, e = Math.min(
+      s.width / t.width,
+      s.height / t.height
+    ), n = t.centerX, i = t.centerY, r = s.center.x, a = s.center.y, c = Math.abs(r - n), o = Math.abs(a - i), l = Math.abs(e - 1) >= 1e-3, u = c >= 0.1 || o >= 0.1;
+    if (!l && !u) return;
+    const v = this.canvas.getObjects(), y = new Set(v), P = /* @__PURE__ */ new Set(), S = (g) => {
+      const p = g.clipPath;
+      p && y.has(p) && P.add(p);
+    };
+    v.forEach(S);
+    const C = (g) => {
+      const p = (g.left || 0) - n, w = (g.top || 0) - i, m = r + p * e, f = a + w * e;
+      g.set({
+        left: m,
+        top: f,
+        scaleX: (g.scaleX || 1) * e,
+        scaleY: (g.scaleY || 1) * e
+      }), g.setCoords(), g.dirty = !0;
+    }, O = /* @__PURE__ */ new Set(), b = (g) => {
+      !g.selectable && !P.has(g) || (C(g), O.add(g));
+    };
+    v.forEach(b);
+    const h = (g) => {
+      const p = g.clipPath;
+      p && p.absolutePositioned && !y.has(p) && !O.has(p) && (C(p), O.add(p));
+    };
+    v.forEach(h);
+  }
+  /**
+   * 计算对象相对于画布的全局变换矩阵（包括父组的影响）
+   */
+  getGlobalTransformMatrix(t) {
+    return t.calcTransformMatrix();
+  }
+  /**
+   * 判断对象是否位于 activeSelection 中
+   */
+  isInActiveSelection(t) {
+    let s = t.group;
+    for (; s; ) {
+      if (s.type === "activeSelection") return !0;
+      s = s.group;
+    }
+    return !1;
+  }
+  /**
+   * 注册图片到缓存（会话级缓存，整个编辑期间保持）
+   */
+  registerImageCache(t, s, e) {
+    if (!t || t.startsWith("data:")) return;
+    const n = s.getElement(), i = this.imageCache.get(t);
+    this.imageCache.set(t, {
+      element: n,
+      blobUrl: e || i?.blobUrl,
+      lastUsed: Date.now()
+    });
+  }
+  /**
+   * 清除整个图片缓存（在关闭编辑器时调用）
+   */
+  clearImageCache() {
+    this.imageCache.forEach((t) => {
+      if (t.blobUrl)
+        try {
+          URL.revokeObjectURL(t.blobUrl);
+        } catch {
+        }
+    }), this.imageCache.clear();
+  }
+  /**
+   * 销毁编辑器，释放所有资源
+   */
+  destroy() {
+    this.clearImageCache(), this.canvas.clear(), this.canvas.dispose(), this.resizeManager.destroy();
+  }
+  /**
+   * 按需生成图片 dataURL（不缓存，减少内存占用）
+   */
+  async getCachedDataURL(t) {
+    if (!t)
+      return "";
+    const s = this.imageCache.get(t);
+    if (s?.element && s.element.complete) {
+      const e = document.createElement("canvas");
+      e.width = s.element.naturalWidth || s.element.width, e.height = s.element.naturalHeight || s.element.height;
+      const n = e.getContext("2d");
+      if (n) {
+        n.drawImage(s.element, 0, 0);
+        const i = e.toDataURL("image/png");
+        return e.width = 0, e.height = 0, i;
+      }
+      return "";
+    }
+    return await Y(t);
+  }
+  /**
+   * 从缓存克隆图片，避免重复下载
+   */
+  async cloneImageFromCache(t, s) {
+    const e = t.getSrc() || "", n = t.originSrc || "", i = t.isCropped, r = n || e;
+    if (r.startsWith("data:"))
+      return new Promise((c) => {
+        t.clone((o) => {
+          o.set(s), c(o);
+        }, ["absolutePositioned"]);
+      });
+    const a = this.imageCache.get(r);
+    return a?.element && a.element.complete ? new Promise(async (c) => {
+      const o = new d.Image(a.element, {
+        width: t.width,
+        height: t.height,
+        ...s
+      });
+      if (t.clipPath)
+        try {
+          const l = await k(t.clipPath, ["absolutePositioned"]);
+          o.set({ clipPath: l });
+        } catch {
+        }
+      i && (o.isCropped = !0, o.cropBlob = t.cropBlob), c(o);
+    }) : new Promise((c) => {
+      t.clone((o) => {
+        this.registerImageCache(r, o), o.set(s), i && (o.isCropped = !0, o.cropBlob = t.cropBlob), c(o);
+      }, ["absolutePositioned"]);
+    });
+  }
+  /**
+   * 导出 clipPath 区域内容（按打印区域原始尺寸）
+   * @param embedImages 是否将图片转为 dataURL 内嵌
+   * @param color 背景颜色
+   */
+  async export(t = !1, s) {
+    const e = this.workspaceManager.dimension, n = this.workspaceManager.printAreaSize?.width ?? e.width, i = this.workspaceManager.printAreaSize?.height ?? e.height, r = window.devicePixelRatio || 1, a = Math.max(n / e.width, i / e.height), c = Math.max(4, Math.min(8, Math.ceil(a * r)));
+    let o = new d.Rect({
+      left: 0,
+      top: 0,
+      width: e.width,
+      height: e.height,
+      absolutePositioned: !0,
+      strokeWidth: 0
+    });
+    this.canvas.clipPath && (o = await k(this.canvas.clipPath, ["absolutePositioned"]), o.set({
+      left: this.canvas.clipPath.left - e.left,
+      top: this.canvas.clipPath.top - e.top,
+      absolutePositioned: !0
+    }));
+    const l = new d.StaticCanvas(null, {
+      width: e.width,
+      height: e.height,
+      enableRetinaScaling: !1,
+      backgroundColor: s || "transparent",
+      preserveObjectStacking: !0,
+      clipPath: o
+    }), u = this.getLayerList();
+    (await Promise.all(
+      u.map(
+        (h) => new Promise((g) => {
+          try {
+            if (h.type === "image") {
+              const p = h;
+              let w = {
+                selectable: !1,
+                evented: !1,
+                flipX: h.flipX || !1,
+                flipY: h.flipY || !1
+              };
+              if (this.isInActiveSelection(h)) {
+                const m = this.getGlobalTransformMatrix(h), f = d.util.qrDecompose(m);
+                w = {
+                  ...w,
+                  left: (f.translateX || 0) - (e.left || 0),
+                  top: (f.translateY || 0) - (e.top || 0),
+                  angle: f.angle || 0,
+                  scaleX: f.scaleX || 1,
+                  scaleY: f.scaleY || 1,
+                  originX: "center",
+                  originY: "center"
+                };
+              } else
+                w = {
+                  ...w,
+                  left: h.left - e.left,
+                  top: h.top - e.top,
+                  angle: h.angle || 0,
+                  scaleX: h.scaleX || 1,
+                  scaleY: h.scaleY || 1,
+                  originX: "left",
+                  originY: "top"
+                };
+              this.cloneImageFromCache(p, w).then(async (m) => {
+                if (m.clipPath) {
+                  const f = m.clipPath;
+                  f.absolutePositioned && f.set({
+                    left: (f.left || 0) - e.left,
+                    top: (f.top || 0) - e.top
+                  });
+                }
+                if (t && m.type === "image")
+                  try {
+                    const f = m, I = f.getSrc() || f.originSrc || "";
+                    if (I) {
+                      const M = await this.getCachedDataURL(I);
+                      f.setSrc(M, () => g(m));
+                      return;
+                    }
+                  } catch {
+                  }
+                g(m);
+              }).catch(() => {
+                g(h);
+              });
+            } else
+              h.cloneAsImage(
+                (p) => {
+                  if (this.isInActiveSelection(h)) {
+                    const w = this.getGlobalTransformMatrix(h), m = d.util.qrDecompose(w);
+                    p.set({
+                      left: (m.translateX || 0) - (e.left || 0),
+                      top: (m.translateY || 0) - (e.top || 0),
+                      angle: m.angle || 0,
+                      scaleX: (m.scaleX || 1) / c,
+                      scaleY: (m.scaleY || 1) / c,
+                      selectable: !1,
+                      hasControls: !1,
+                      hasBorders: !1,
+                      originX: "center",
+                      originY: "center"
+                    });
+                  } else {
+                    const w = h.getBoundingRect(!0, !0);
+                    p.set({
+                      left: w.left - e.left,
+                      top: w.top - e.top,
+                      scaleX: 1 / c,
+                      scaleY: 1 / c,
+                      angle: 0,
+                      selectable: !1,
+                      hasControls: !1,
+                      hasBorders: !1,
+                      originX: "left",
+                      originY: "top"
+                    });
+                  }
+                  g(p);
+                },
+                { multiplier: c }
+              );
+          } catch {
+            g(h);
+          }
+        })
+      )
+    )).forEach((h) => l.add(h));
+    const y = n / e.width, P = i / e.height;
+    l.setViewportTransform([y, 0, 0, P, 0, 0]), l.renderAll();
+    const S = 1024;
+    let C = 1;
+    (n < S || i < S) && (C = Math.max(1, S / Math.max(n, i)));
+    let O = "";
+    const b = () => l.toDataURL({
+      format: "webp",
+      quality: 0.5,
+      width: n,
+      height: i,
+      multiplier: C
+    });
+    if (window.createImageBitmap && typeof l.toCanvasElement == "function") {
+      const h = l.toCanvasElement(C, { width: n, height: i });
+      O = await createImageBitmap(h);
+    } else
+      O = b();
+    return l.dispose(), O;
+  }
+}
+export {
+  se as Editor,
+  se as default
+};