@univerjs/drawing-ui 0.6.7 → 0.6.9

package/lib/index.js

@@ -0,0 +1,1932 @@
+var En = Object.defineProperty;
+var Bn = (i, t, n) => t in i ? En(i, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[t] = n;
+var ee = (i, t, n) => Bn(i, typeof t != "symbol" ? t + "" : t, n);
+import { UniverInstanceType as Oe, DrawingTypeEnum as ne, CommandType as ve, ICommandService as me, LocaleService as te, ArrangeTypeEnum as be, Tools as jn, debounce as Ie, Inject as Le, Disposable as xe, checkIfMove as sn, toDisposable as Ce, IUniverInstanceService as Ke, ImageSourceType as Xe, Injector as Un, IConfigService as An, Plugin as Hn, merge as Ln } from "@univerjs/core";
+import { getDrawingShapeKeyByDrawingSearch as G, ImageSourceType as xn, IDrawingManagerService as re, IImageIoService as cn, SetDrawingSelectedOperation as Ne } from "@univerjs/drawing";
+import { Group as we, DRAWING_OBJECT_LAYER_INDEX as De, Image as ze, Rect as ln, IRenderManagerService as ue, getGroupState as Vn, transformObjectOutOfGroup as kn, RENDER_CLASS_TYPE as Je, Shape as Gn, Canvas as Wn, precisionTo as ye, CURSOR_TYPE as Te, Vector2 as Ge, degToRad as qe } from "@univerjs/engine-render";
+import { IDialogService as gn, useDependency as V, ComponentManager as $n, IMessageService as zn } from "@univerjs/ui";
+import { jsxs as j, jsx as u, Fragment as Fn } from "react/jsx-runtime";
+import { useState as x, forwardRef as Z, useRef as mn, createElement as X, useEffect as _e } from "react";
+import { clsx as B, Select as dn, Button as le, InputNumber as pe, Checkbox as Kn, DropdownMenu as Yn, MessageType as Qe } from "@univerjs/design";
+import { switchMap as Zn, of as Xn } from "rxjs";
+function en(i, t, n, e) {
+  const r = e.getDrawingByParam(i);
+  if (r == null)
+    return;
+  const o = G(i), a = n.getObject(o);
+  if (a && !(a instanceof we))
+    return;
+  if (a != null) {
+    a.addObject(t);
+    return;
+  }
+  const s = new we(o);
+  n.addObject(s, De).attachTransformerTo(s), s.addObject(t);
+  const { transform: c } = r;
+  c && s.transformByState(
+    {
+      left: c.left,
+      top: c.top,
+      angle: c.angle
+    }
+  );
+}
+function un(i, t) {
+  var o;
+  const n = t ? i.getUnit(t) : i.getFocusedUnit();
+  if (n == null)
+    return;
+  const e = n.getUnitId();
+  let r;
+  return n.type === Oe.UNIVER_SHEET ? r = (o = n.getActiveSheet()) == null ? void 0 : o.getSheetId() : (n.type === Oe.UNIVER_DOC || n.type === Oe.UNIVER_SLIDE) && (r = e), { unitId: e, subUnitId: r, current: n };
+}
+const hn = "COMPONENT_IMAGE_VIEWER";
+var Jn = Object.getOwnPropertyDescriptor, qn = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? Jn(t, n) : t, o = i.length - 1, a; o >= 0; o--)
+    (a = i[o]) && (r = a(r) || r);
+  return r;
+}, We = (i, t) => (n, e) => t(n, e, i);
+const nn = 50;
+let Ee = class {
+  constructor(i, t, n) {
+    this._drawingManagerService = i, this._imageIoService = t, this._dialogService = n;
+  }
+  // eslint-disable-next-line max-lines-per-function
+  async renderImages(i, t) {
+    const {
+      transform: n,
+      drawingType: e,
+      source: r,
+      imageSourceType: o,
+      srcRect: a,
+      prstGeom: s,
+      groupId: c,
+      unitId: l,
+      subUnitId: m,
+      drawingId: d,
+      isMultiTransform: h,
+      transforms: f
+    } = i;
+    if (e !== ne.DRAWING_IMAGE || !this._drawingManagerService.getDrawingVisible() || n == null)
+      return;
+    const v = h && f ? f : [n], w = [];
+    for (const p of v) {
+      const { left: S, top: _, width: M, height: I, angle: N, flipX: P, flipY: b, skewX: y, skewY: R } = p, O = v.indexOf(p), U = G({ unitId: l, subUnitId: m, drawingId: d }, h ? O : void 0), T = t.getObject(U);
+      if (T != null) {
+        T.transformByState({ left: S, top: _, width: M, height: I, angle: N, flipX: P, flipY: b, skewX: y, skewY: R });
+        continue;
+      }
+      const ie = this._drawingManagerService.getDrawingOrder(l, m), W = ie.indexOf(d), q = { ...p, zIndex: W === -1 ? ie.length - 1 : W }, Se = this._imageIoService.getImageSourceCache(r, o);
+      let ae = !1;
+      if (Se != null)
+        q.image = Se;
+      else {
+        if (o === xn.UUID)
+          try {
+            q.url = await this._imageIoService.getImage(r);
+          } catch (ke) {
+            console.error(ke);
+            continue;
+          }
+        else
+          q.url = r;
+        ae = !0;
+      }
+      if (t.getObject(U))
+        continue;
+      q.printable = !0;
+      const z = new ze(U, q);
+      ae && this._imageIoService.addImageSourceCache(r, o, z.getNative()), this._drawingManagerService.getDrawingVisible() && (t.addObject(z, De), this._drawingManagerService.getDrawingEditable() && t.attachTransformerTo(z), c && en({ drawingId: c, unitId: l, subUnitId: m }, z, t, this._drawingManagerService), s != null && z.setPrstGeom(s), a != null && z.setSrcRect(a), w.push(z));
+    }
+    return w;
+  }
+  renderFloatDom(i, t) {
+    const {
+      transform: n,
+      drawingType: e,
+      groupId: r,
+      unitId: o,
+      subUnitId: a,
+      drawingId: s,
+      isMultiTransform: c,
+      transforms: l
+    } = i;
+    if (e !== ne.DRAWING_DOM || !this._drawingManagerService.getDrawingVisible() || n == null)
+      return;
+    const m = c && l ? l : [n], d = [];
+    for (const h of m) {
+      const { left: f, top: v, width: w, height: p, angle: S, flipX: _, flipY: M, skewX: I, skewY: N } = h, P = m.indexOf(h), b = G({ unitId: o, subUnitId: a, drawingId: s }, c ? P : void 0), y = t.getObject(b);
+      if (y != null) {
+        y.transformByState({ left: f, top: v, width: w, height: p, angle: S, flipX: _, flipY: M, skewX: I, skewY: N });
+        continue;
+      }
+      const R = this._drawingManagerService.getDrawingOrder(o, a), O = R.indexOf(s), U = { ...h, zIndex: O === -1 ? R.length - 1 : O };
+      if (t.getObject(b))
+        continue;
+      U.printable = !1;
+      const T = new ln(b, U);
+      this._drawingManagerService.getDrawingVisible() && (t.addObject(T, De), this._drawingManagerService.getDrawingEditable() && i.allowTransform !== !1 && t.attachTransformerTo(T), r && en({ drawingId: r, unitId: o, subUnitId: a }, T, t, this._drawingManagerService), d.push(T));
+    }
+    return d;
+  }
+  renderDrawing(i, t) {
+    const n = this._drawingManagerService.getDrawingByParam(i);
+    if (n != null)
+      switch (n.drawingType) {
+        case ne.DRAWING_IMAGE:
+          return this.renderImages(n, t);
+      }
+  }
+  previewImage(i, t, n, e) {
+    const r = `${i}-viewer-dialog`, o = window.innerWidth - nn, a = window.innerHeight - nn, s = this._adjustImageSize(n, e, o, a), c = this._dialogService.open({
+      width: Math.max(s.width, 200),
+      id: r,
+      style: { margin: "0", top: "50%", left: "50%", transform: "translate(-50%, -50%)" },
+      children: {
+        label: {
+          name: hn,
+          props: {
+            src: t,
+            width: s.width,
+            height: s.height
+          }
+        }
+      },
+      destroyOnClose: !0,
+      draggable: !1,
+      onClose: () => {
+        this._dialogService.close(r), c.dispose();
+      }
+    });
+  }
+  _adjustImageSize(i, t, n, e) {
+    if (i <= n && t <= e)
+      return {
+        width: i,
+        height: t
+      };
+    const r = n / i, o = e / t, a = Math.min(r, o);
+    return {
+      width: Math.floor(i * a),
+      height: Math.floor(t * a)
+    };
+  }
+};
+Ee = qn([
+  We(0, re),
+  We(1, cn),
+  We(2, gn)
+], Ee);
+function Ve(i, t) {
+  const n = [];
+  return i.forEach((e) => {
+    const { oKey: r, left: o, top: a, height: s, width: c, angle: l } = e, m = t.getDrawingOKey(r);
+    if (m == null)
+      return n.push(null), !0;
+    const { unitId: d, subUnitId: h, drawingId: f, drawingType: v } = m, w = {
+      unitId: d,
+      subUnitId: h,
+      drawingId: f,
+      drawingType: v,
+      transform: {
+        left: o,
+        top: a,
+        height: s,
+        width: c,
+        angle: l
+      }
+    };
+    v === ne.DRAWING_IMAGE && (w.srcRect = e.srcRect), n.push(w);
+  }), n;
+}
+var D = /* @__PURE__ */ ((i) => (i.default = "0", i.left = "1", i.center = "2", i.right = "3", i.top = "4", i.middle = "5", i.bottom = "6", i.horizon = "7", i.vertical = "8", i))(D || {});
+const Ye = {
+  id: "sheet.operation.set-image-align",
+  type: ve.OPERATION,
+  handler: (i, t) => !0
+}, Qn = "univer-image-common-panel-grid", et = "univer-image-common-panel-border", nt = "univer-image-common-panel-title", tt = "univer-image-common-panel-row", rt = "univer-image-common-panel-row-vertical", it = "univer-image-common-panel-column", at = "univer-image-common-panel-column-center", ot = "univer-image-common-panel-inline", st = "univer-image-common-panel-span2", ct = "univer-image-common-panel-span3", lt = "univer-image-common-panel-input", g = {
+  imageCommonPanelGrid: Qn,
+  imageCommonPanelBorder: et,
+  imageCommonPanelTitle: nt,
+  imageCommonPanelRow: tt,
+  imageCommonPanelRowVertical: rt,
+  imageCommonPanelColumn: it,
+  imageCommonPanelColumnCenter: at,
+  imageCommonPanelInline: ot,
+  imageCommonPanelSpan2: st,
+  imageCommonPanelSpan3: ct,
+  imageCommonPanelInput: lt
+}, gt = (i) => {
+  const t = V(me), n = V(te), { alignShow: e } = i, [r, o] = x(D.default), a = [
+    {
+      label: n.t("image-panel.align.default"),
+      value: D.default
+    },
+    {
+      options: [
+        {
+          label: n.t("image-panel.align.left"),
+          value: D.left
+        },
+        {
+          label: n.t("image-panel.align.center"),
+          value: D.center
+        },
+        {
+          label: n.t("image-panel.align.right"),
+          value: D.right
+        }
+      ]
+    },
+    {
+      options: [
+        {
+          label: n.t("image-panel.align.top"),
+          value: D.top
+        },
+        {
+          label: n.t("image-panel.align.middle"),
+          value: D.middle
+        },
+        {
+          label: n.t("image-panel.align.bottom"),
+          value: D.bottom
+        }
+      ]
+    },
+    {
+      options: [
+        {
+          label: n.t("image-panel.align.horizon"),
+          value: D.horizon
+        },
+        {
+          label: n.t("image-panel.align.vertical"),
+          value: D.vertical
+        }
+      ]
+    }
+  ];
+  function s(l) {
+    o(l), t.executeCommand(Ye.id, {
+      alignType: l
+    });
+  }
+  const c = (l) => l ? "block" : "none";
+  return /* @__PURE__ */ j("div", { className: B(g.imageCommonPanelGrid, g.imageCommonPanelBorder), style: { display: c(e) }, children: [
+    /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelTitle), children: /* @__PURE__ */ u("div", { children: n.t("image-panel.align.title") }) }) }),
+    /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn), children: /* @__PURE__ */ u(dn, { value: r, options: a, onChange: s }) }) })
+  ] });
+};
+var $ = function() {
+  return $ = Object.assign || function(i) {
+    for (var t, n = 1, e = arguments.length; n < e; n++) {
+      t = arguments[n];
+      for (var r in t) Object.prototype.hasOwnProperty.call(t, r) && (i[r] = t[r]);
+    }
+    return i;
+  }, $.apply(this, arguments);
+}, mt = function(i, t) {
+  var n = {};
+  for (var e in i) Object.prototype.hasOwnProperty.call(i, e) && t.indexOf(e) < 0 && (n[e] = i[e]);
+  if (i != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var r = 0, e = Object.getOwnPropertySymbols(i); r < e.length; r++)
+      t.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(i, e[r]) && (n[e[r]] = i[e[r]]);
+  return n;
+}, J = Z(function(i, t) {
+  var n = i.icon, e = i.id, r = i.className, o = i.extend, a = mt(i, ["icon", "id", "className", "extend"]), s = "univerjs-icon univerjs-icon-".concat(e, " ").concat(r || "").trim(), c = mn("_".concat(ht()));
+  return fn(n, "".concat(e), { defIds: n.defIds, idSuffix: c.current }, $({ ref: t, className: s }, a), o);
+});
+function fn(i, t, n, e, r) {
+  return X(i.tag, $($({ key: t }, dt(i, n, r)), e), (ut(i, n).children || []).map(function(o, a) {
+    return fn(o, "".concat(t, "-").concat(i.tag, "-").concat(a), n, void 0, r);
+  }));
+}
+function dt(i, t, n) {
+  var e = $({}, i.attrs);
+  n != null && n.colorChannel1 && e.fill === "colorChannel1" && (e.fill = n.colorChannel1), i.tag === "mask" && e.id && (e.id = e.id + t.idSuffix), Object.entries(e).forEach(function(o) {
+    var a = o[0], s = o[1];
+    a === "mask" && typeof s == "string" && (e[a] = s.replace(/url\(#(.*)\)/, "url(#$1".concat(t.idSuffix, ")")));
+  });
+  var r = t.defIds;
+  return !r || r.length === 0 || (i.tag === "use" && e["xlink:href"] && (e["xlink:href"] = e["xlink:href"] + t.idSuffix), Object.entries(e).forEach(function(o) {
+    var a = o[0], s = o[1];
+    typeof s == "string" && (e[a] = s.replace(/url\(#(.*)\)/, "url(#$1".concat(t.idSuffix, ")")));
+  })), e;
+}
+function ut(i, t) {
+  var n, e = t.defIds;
+  return !e || e.length === 0 ? i : i.tag === "defs" && (!((n = i.children) === null || n === void 0) && n.length) ? $($({}, i), { children: i.children.map(function(r) {
+    return typeof r.attrs.id == "string" && e && e.indexOf(r.attrs.id) > -1 ? $($({}, r), { attrs: $($({}, r.attrs), { id: r.attrs.id + t.idSuffix }) }) : r;
+  }) }) : i;
+}
+function ht() {
+  return Math.random().toString(36).substring(2, 8);
+}
+J.displayName = "UniverIcon";
+var ft = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "colorChannel1", d: "M11.0363 12.2367V14.0367C11.0363 14.3681 11.3049 14.6367 11.6363 14.6367C11.9676 14.6367 12.2363 14.3681 12.2363 14.0367V12.2367H14.0364C14.3677 12.2367 14.6364 11.9681 14.6364 11.6367C14.6364 11.3054 14.3677 11.0367 14.0364 11.0367H12.2363V9.23672C12.2363 8.90535 11.9676 8.63672 11.6363 8.63672C11.3049 8.63672 11.0363 8.90535 11.0363 9.23672V11.0367H9.23635C8.90498 11.0367 8.63635 11.3054 8.63635 11.6367C8.63635 11.9681 8.90498 12.2367 9.23635 12.2367H11.0363Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M2.56365 1.36377C1.90091 1.36377 1.36365 1.90103 1.36365 2.56377V6.16377C1.36365 6.82651 1.90091 7.36377 2.56365 7.36377H6.16365C6.82639 7.36377 7.36365 6.82651 7.36365 6.16377V2.56377C7.36365 1.90103 6.82639 1.36377 6.16365 1.36377H2.56365zM6.16365 2.56377H2.56365L2.56365 6.16377H6.16365V2.56377zM2.56365 8.63647C1.90091 8.63647 1.36365 9.17373 1.36365 9.83647V13.4365C1.36365 14.0992 1.90091 14.6365 2.56365 14.6365H6.16365C6.82639 14.6365 7.36365 14.0992 7.36365 13.4365V9.83647C7.36365 9.17373 6.82639 8.63647 6.16365 8.63647H2.56365zM6.16365 9.83647H2.56365L2.56365 13.4365H6.16365V9.83647zM9.83635 7.36377C9.17361 7.36377 8.63635 6.82651 8.63635 6.16377V2.56377C8.63635 1.90103 9.17361 1.36377 9.83635 1.36377H13.4364C14.0991 1.36377 14.6364 1.90103 14.6364 2.56377V6.16377C14.6364 6.82651 14.0991 7.36377 13.4364 7.36377H9.83635zM9.83635 6.16377V2.56377L13.4364 2.56377V6.16377H9.83635z", fillRule: "evenodd", clipRule: "evenodd" } }] }, pn = Z(function(i, t) {
+  return X(J, Object.assign({}, i, {
+    id: "autofill",
+    ref: t,
+    icon: ft
+  }));
+});
+pn.displayName = "Autofill";
+var pt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M14.0045 4.4334C14.8881 4.4334 15.6045 3.71705 15.6045 2.8334 15.6045 1.94974 14.8881 1.2334 14.0045 1.2334H3.70449C2.82084 1.2334 2.10449 1.94974 2.10449 2.8334 2.10449 3.71705 2.82084 4.4334 3.70449 4.4334H14.0045zM14.4045 2.8334C14.4045 3.05431 14.2254 3.2334 14.0045 3.2334H3.70449C3.48358 3.2334 3.30449 3.05431 3.30449 2.8334 3.30449 2.61248 3.48358 2.4334 3.70449 2.4334H14.0045C14.2254 2.4334 14.4045 2.61249 14.4045 2.8334zM14.1544 8.5999C15.038 8.5999 15.7544 7.88356 15.7544 6.9999 15.7544 6.11625 15.038 5.3999 14.1544 5.3999H3.85439C2.97074 5.3999 2.25439 6.11625 2.25439 6.9999 2.25439 7.88356 2.97074 8.5999 3.85439 8.5999H14.1544zM14.5544 6.9999C14.5544 7.22082 14.3753 7.3999 14.1544 7.3999H3.85439C3.63348 7.3999 3.45439 7.22082 3.45439 6.9999 3.45439 6.77899 3.63348 6.5999 3.85439 6.5999H14.1544C14.3753 6.5999 14.5544 6.77899 14.5544 6.9999z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M8.57975 14.5902L6.58023 12.5907C6.34591 12.3564 6.34591 11.9765 6.58023 11.7421 6.81454 11.5078 7.19444 11.5078 7.42876 11.7421L8.40449 12.7179V10.1664C8.40449 9.83504 8.67312 9.56641 9.00449 9.56641 9.33586 9.56641 9.60449 9.83504 9.60449 10.1664V12.7179L10.5802 11.7421C10.8145 11.5078 11.1944 11.5078 11.4288 11.7421 11.6631 11.9765 11.6631 12.3564 11.4288 12.5907L9.42923 14.5902M8.57975 14.5902C8.58121 14.5917 8.58268 14.5931 8.58416 14.5946 8.64077 14.6502 8.70566 14.6923 8.77482 14.7209 8.84557 14.7502 8.92314 14.7664 9.00449 14.7664 9.08585 14.7664 9.16342 14.7502 9.23416 14.7209 9.30332 14.6923 9.36821 14.6502 9.42482 14.5946" } }] }, Cn = Z(function(i, t) {
+  return X(J, Object.assign({}, i, {
+    id: "bottom-single",
+    ref: t,
+    icon: pt
+  }));
+});
+Cn.displayName = "BottomSingle";
+var Ct = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M5.97705 7.51296C5.97705 7.18159 6.24568 6.91296 6.57705 6.91296H8.48632C8.81769 6.91296 9.08632 7.18159 9.08632 7.51296 9.08632 7.84433 8.81769 8.11296 8.48632 8.11296H6.57705C6.24568 8.11296 5.97705 7.84433 5.97705 7.51296zM6.57705 9.41028C6.24568 9.41028 5.97705 9.67891 5.97705 10.0103 5.97705 10.3416 6.24568 10.6103 6.57705 10.6103H10.8199C11.1512 10.6103 11.4199 10.3416 11.4199 10.0103 11.4199 9.67891 11.1512 9.41028 10.8199 9.41028H6.57705z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M3.51074 2.37063C3.51074 1.48697 4.22709 0.77063 5.11074 0.77063H9.80318L9.81294 0.770708C9.97168 0.768161 10.1311 0.82824 10.2511 0.95055L14.4317 5.21408C14.5165 5.30049 14.5697 5.406 14.5917 5.51645C14.6041 5.5644 14.6106 5.61467 14.6106 5.66648V11.6406C14.6106 12.5243 13.8943 13.2406 13.0106 13.2406H5.11074C4.22709 13.2406 3.51074 12.5243 3.51074 11.6406V2.37063ZM10.4032 4.66648V2.81964L12.6063 5.06648H10.8032C10.5823 5.06648 10.4032 4.88739 10.4032 4.66648ZM5.11074 1.97063C4.88983 1.97063 4.71074 2.14972 4.71074 2.37063V11.6406C4.71074 11.8615 4.88983 12.0406 5.11074 12.0406H13.0106C13.2316 12.0406 13.4106 11.8615 13.4106 11.6406V6.26648H10.8032C9.91953 6.26648 9.20318 5.55013 9.20318 4.66648V1.97063H5.11074Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M2.58916 6.6741C2.58916 6.34273 2.32053 6.0741 1.98916 6.0741C1.65779 6.0741 1.38916 6.34273 1.38916 6.6741V12.6294C1.38916 14.0653 2.55322 15.2294 3.98916 15.2294H9.41408C9.74545 15.2294 10.0141 14.9607 10.0141 14.6294C10.0141 14.298 9.74545 14.0294 9.41408 14.0294H3.98916C3.21596 14.0294 2.58916 13.4026 2.58916 12.6294V6.6741Z" } }] }, wn = Z(function(i, t) {
+  return X(J, Object.assign({}, i, {
+    id: "create-copy-single",
+    ref: t,
+    icon: Ct
+  }));
+});
+wn.displayName = "CreateCopySingle";
+var wt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M7.38125 1.16211C6.49759 1.16211 5.78125 1.87845 5.78125 2.76211V5.6377H2.87783C1.99418 5.6377 1.27783 6.35404 1.27783 7.2377V13.2377C1.27783 14.1214 1.99418 14.8377 2.87783 14.8377H8.87783C9.76149 14.8377 10.4778 14.1214 10.4778 13.2377V10.3621H13.3813C14.2649 10.3621 14.9813 9.64577 14.9813 8.76211V2.76211C14.9813 1.87845 14.2649 1.16211 13.3813 1.16211H7.38125ZM10.4778 9.16211H13.3813C13.6022 9.16211 13.7812 8.98302 13.7812 8.76211V2.76211C13.7812 2.5412 13.6022 2.36211 13.3813 2.36211H7.38125C7.16034 2.36211 6.98125 2.5412 6.98125 2.76211V5.6377H8.87783C9.76149 5.6377 10.4778 6.35404 10.4778 7.2377V9.16211ZM6.98125 6.8377H8.87783C9.09875 6.8377 9.27783 7.01678 9.27783 7.2377V9.16211H7.38125C7.16034 9.16211 6.98125 8.98302 6.98125 8.76211V6.8377ZM5.78125 6.8377V8.76211C5.78125 9.64577 6.49759 10.3621 7.38125 10.3621H9.27783V13.2377C9.27783 13.4586 9.09875 13.6377 8.87783 13.6377H2.87783C2.65692 13.6377 2.47783 13.4586 2.47783 13.2377V7.2377C2.47783 7.01678 2.65692 6.8377 2.87783 6.8377H5.78125Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, vn = Z(function(i, t) {
+  return X(J, Object.assign({}, i, {
+    id: "group-single",
+    ref: t,
+    icon: wt
+  }));
+});
+vn.displayName = "GroupSingle";
+var vt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M11.3536 6.14645C11.5488 6.34171 11.5488 6.65829 11.3536 6.85355L8.35355 9.85355C8.15829 10.0488 7.84171 10.0488 7.64645 9.85355L4.64645 6.85355C4.45118 6.65829 4.45118 6.34171 4.64645 6.14645C4.84171 5.95118 5.15829 5.95118 5.35355 6.14645L8 8.79289L10.6464 6.14645C10.8417 5.95118 11.1583 5.95118 11.3536 6.14645Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, _n = Z(function(i, t) {
+  return X(J, Object.assign({}, i, {
+    id: "more-down-single",
+    ref: t,
+    icon: vt
+  }));
+});
+_n.displayName = "MoreDownSingle";
+var _t = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M1.25 2.96401C1.25 3.84767 1.96634 4.56401 2.85 4.56401H13.15C14.0337 4.56401 14.75 3.84767 14.75 2.96401C14.75 2.08036 14.0337 1.36401 13.15 1.36401H2.85C1.96635 1.36401 1.25 2.08036 1.25 2.96401ZM2.85 3.36401C2.62909 3.36401 2.45 3.18493 2.45 2.96401C2.45 2.7431 2.62909 2.56401 2.85 2.56401H13.15C13.3709 2.56401 13.55 2.7431 13.55 2.96401C13.55 3.18493 13.3709 3.36401 13.15 3.36401H2.85Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M5.57564 11.6118C5.80995 11.3774 6.18985 11.3774 6.42417 11.6118L7.3999 12.5875V6.36951C7.3999 6.03814 7.66853 5.76951 7.9999 5.76951C8.33127 5.76951 8.5999 6.03814 8.5999 6.36951V12.5875L9.57564 11.6118C9.80995 11.3774 10.1899 11.3774 10.4242 11.6118C10.6585 11.8461 10.6585 12.226 10.4242 12.4603L8.4324 14.452C8.32324 14.5655 8.16982 14.6362 7.9999 14.6362C7.82998 14.6362 7.67655 14.5655 7.56739 14.452L5.57564 12.4603C5.34132 12.226 5.34132 11.8461 5.57564 11.6118Z" } }] }, Sn = Z(function(i, t) {
+  return X(J, Object.assign({}, i, {
+    id: "move-down-single",
+    ref: t,
+    icon: _t
+  }));
+});
+Sn.displayName = "MoveDownSingle";
+var St = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M1.25 13.036C1.25 12.1523 1.96634 11.436 2.85 11.436H13.15C14.0337 11.436 14.75 12.1523 14.75 13.036C14.75 13.9196 14.0337 14.636 13.15 14.636H2.85C1.96635 14.636 1.25 13.9196 1.25 13.036ZM2.85 12.636C2.62909 12.636 2.45 12.8151 2.45 13.036C2.45 13.2569 2.62909 13.436 2.85 13.436H13.15C13.3709 13.436 13.55 13.2569 13.55 13.036C13.55 12.8151 13.3709 12.636 13.15 12.636H2.85Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M5.57564 4.38825C5.80995 4.62256 6.18985 4.62256 6.42417 4.38825L7.3999 3.41251V9.63049C7.3999 9.96186 7.66853 10.2305 7.9999 10.2305C8.33127 10.2305 8.5999 9.96186 8.5999 9.63049V3.41251L9.57564 4.38825C9.80995 4.62256 10.1899 4.62256 10.4242 4.38825C10.6585 4.15393 10.6585 3.77403 10.4242 3.53972L8.4324 1.54796C8.32324 1.43445 8.16982 1.36382 7.9999 1.36382C7.82998 1.36382 7.67655 1.43446 7.56739 1.54797L5.57564 3.53972C5.34132 3.77403 5.34132 4.15393 5.57564 4.38825Z" } }] }, bn = Z(function(i, t) {
+  return X(J, Object.assign({}, i, {
+    id: "move-up-single",
+    ref: t,
+    icon: St
+  }));
+});
+bn.displayName = "MoveUpSingle";
+var bt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M7.82994 1.40913C7.88746 1.35161 7.95376 1.30821 8.02453 1.27893C8.09527 1.24959 8.17285 1.2334 8.2542 1.2334C8.33555 1.2334 8.41313 1.24959 8.48387 1.27893C8.55464 1.30821 8.62094 1.35161 8.67846 1.40913L10.6785 3.40913C10.9128 3.64345 10.9128 4.02335 10.6785 4.25766C10.4441 4.49198 10.0642 4.49198 9.82994 4.25766L8.8542 3.28193V5.8334C8.8542 6.16477 8.58557 6.4334 8.2542 6.4334C7.92283 6.4334 7.6542 6.16477 7.6542 5.8334V3.28193L6.67846 4.25766C6.44415 4.49198 6.06425 4.49198 5.82994 4.25766C5.59562 4.02335 5.59562 3.64345 5.82994 3.40913L7.82994 1.40913Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M1.50439 9C1.50439 8.11634 2.22074 7.4 3.10439 7.4H13.4044C14.288 7.4 15.0044 8.11634 15.0044 9 15.0044 9.88366 14.2881 10.6 13.4044 10.6H3.1044C2.22074 10.6 1.50439 9.88366 1.50439 9zM3.10439 8.6C2.88348 8.6 2.70439 8.77909 2.70439 9 2.70439 9.22091 2.88348 9.4 3.1044 9.4H13.4044C13.6253 9.4 13.8044 9.22091 13.8044 9 13.8044 8.77909 13.6253 8.6 13.4044 8.6H3.10439zM1.6543 13.1665C1.6543 12.2828 2.37064 11.5665 3.2543 11.5665H13.5543C14.438 11.5665 15.1543 12.2828 15.1543 13.1665 15.1543 14.0502 14.438 14.7665 13.5543 14.7665H3.2543C2.37064 14.7665 1.6543 14.0502 1.6543 13.1665zM3.2543 12.7665C3.03338 12.7665 2.8543 12.9456 2.8543 13.1665 2.8543 13.3874 3.03338 13.5665 3.2543 13.5665H13.5543C13.7752 13.5665 13.9543 13.3874 13.9543 13.1665 13.9543 12.9456 13.7752 12.7665 13.5543 12.7665H3.2543z", fillRule: "evenodd", clipRule: "evenodd" } }] }, In = Z(function(i, t) {
+  return X(J, Object.assign({}, i, {
+    id: "topmost-single",
+    ref: t,
+    icon: bt
+  }));
+});
+In.displayName = "TopmostSingle";
+var It = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M7.46855 2.83731C7.46855 2.61639 7.64764 2.4373 7.86855 2.4373H13.8603C14.0812 2.4373 14.2603 2.61639 14.2603 2.8373V9.5049C14.2603 9.72581 14.0812 9.90489 13.8603 9.90489H12.866C12.5346 9.90489 12.266 10.1735 12.266 10.5049C12.266 10.8363 12.5346 11.1049 12.866 11.1049H13.8603C14.7439 11.1049 15.4603 10.3886 15.4603 9.5049V2.8373C15.4603 1.95365 14.7439 1.2373 13.8603 1.2373H7.86855C6.9849 1.2373 6.26855 1.95365 6.26855 2.83731V3.48688C6.26855 3.81825 6.53718 4.08688 6.86855 4.08688C7.19993 4.08688 7.46855 3.81825 7.46855 3.48688V2.83731Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M3.19888 5.56299C2.31522 5.56299 1.59888 6.27933 1.59888 7.16299V13.163C1.59888 14.0466 2.31522 14.763 3.19888 14.763H9.19888C10.0825 14.763 10.7989 14.0466 10.7989 13.163V7.16299C10.7989 6.27933 10.0825 5.56299 9.19888 5.56299H3.19888ZM2.79888 7.16299C2.79888 6.94207 2.97796 6.76299 3.19888 6.76299H9.19888C9.41979 6.76299 9.59888 6.94207 9.59888 7.16299V13.163C9.59888 13.3839 9.41979 13.563 9.19888 13.563H3.19888C2.97796 13.563 2.79888 13.3839 2.79888 13.163V7.16299Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, yn = Z(function(i, t) {
+  return X(J, Object.assign({}, i, {
+    id: "ungroup-single",
+    ref: t,
+    icon: It
+  }));
+});
+yn.displayName = "UngroupSingle";
+const yt = (i) => {
+  const { arrangeShow: t, drawings: n } = i, e = V(te), r = V(re), o = (l) => l ? "block" : "none", [a, s] = x(n);
+  _e(() => {
+    const l = r.focus$.subscribe((m) => {
+      s(m);
+    });
+    return () => {
+      l.unsubscribe();
+    };
+  }, []);
+  const c = (l) => {
+    const m = a[0].unitId, d = a[0].subUnitId, h = a.map((f) => f.drawingId);
+    r.featurePluginOrderUpdateNotification({ unitId: m, subUnitId: d, drawingIds: h, arrangeType: l });
+  };
+  return /* @__PURE__ */ j("div", { className: g.imageCommonPanelGrid, style: { display: o(t) }, children: [
+    /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelTitle), children: /* @__PURE__ */ u("div", { children: e.t("image-panel.arrange.title") }) }) }),
+    /* @__PURE__ */ j("div", { className: g.imageCommonPanelRow, children: [
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan2), children: /* @__PURE__ */ u(le, { size: "small", onClick: () => {
+        c(be.forward);
+      }, children: /* @__PURE__ */ j("span", { className: g.imageCommonPanelInline, children: [
+        /* @__PURE__ */ u(bn, {}),
+        e.t("image-panel.arrange.forward")
+      ] }) }) }),
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan2), children: /* @__PURE__ */ u(le, { size: "small", onClick: () => {
+        c(be.backward);
+      }, children: /* @__PURE__ */ j("span", { className: g.imageCommonPanelInline, children: [
+        /* @__PURE__ */ u(Sn, {}),
+        e.t("image-panel.arrange.backward")
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ j("div", { className: g.imageCommonPanelRow, children: [
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan2), children: /* @__PURE__ */ u(le, { size: "small", onClick: () => {
+        c(be.front);
+      }, children: /* @__PURE__ */ j("span", { className: g.imageCommonPanelInline, children: [
+        /* @__PURE__ */ u(In, {}),
+        e.t("image-panel.arrange.front")
+      ] }) }) }),
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan2), children: /* @__PURE__ */ u(le, { size: "small", onClick: () => {
+        c(be.back);
+      }, children: /* @__PURE__ */ j("span", { className: g.imageCommonPanelInline, children: [
+        /* @__PURE__ */ u(Cn, {}),
+        e.t("image-panel.arrange.back")
+      ] }) }) })
+    ] })
+  ] });
+}, Pt = (i) => {
+  const t = V(te), n = V(ue), e = V(re), { hasGroup: r, drawings: o } = i, [a, s] = x(!1), [c, l] = x(!0), [m, d] = x(!0), h = (p) => p ? "block" : "none", f = () => {
+    const p = e.getFocusDrawings(), { unitId: S, subUnitId: _ } = p[0], M = jn.generateRandomId(10), I = Vn(0, 0, p.map((b) => b.transform || {})), N = {
+      unitId: S,
+      subUnitId: _,
+      drawingId: M,
+      drawingType: ne.DRAWING_GROUP,
+      transform: I
+    }, P = p.map((b) => {
+      const y = b.transform || { left: 0, top: 0 }, { unitId: R, subUnitId: O, drawingId: U } = b;
+      return {
+        unitId: R,
+        subUnitId: O,
+        drawingId: U,
+        transform: {
+          ...y,
+          left: y.left - I.left,
+          top: y.top - I.top
+        },
+        groupId: M
+      };
+    });
+    e.featurePluginGroupUpdateNotification([{
+      parent: N,
+      children: P
+    }]);
+  }, v = (p) => {
+    if (p.drawingType !== ne.DRAWING_GROUP)
+      return;
+    const { unitId: S, subUnitId: _, drawingId: M, transform: I = { width: 0, height: 0 } } = p;
+    if (I == null)
+      return;
+    const N = e.getDrawingsByGroup({ unitId: S, subUnitId: _, drawingId: M });
+    if (N.length === 0)
+      return;
+    const P = N.map((b) => {
+      const { transform: y } = b, { unitId: R, subUnitId: O, drawingId: U } = b, T = kn(y || {}, I, I.width || 0, I.height || 0);
+      return {
+        unitId: R,
+        subUnitId: O,
+        drawingId: U,
+        transform: {
+          ...y,
+          ...T
+        },
+        groupId: void 0
+      };
+    });
+    return {
+      parent: p,
+      children: P
+    };
+  }, w = () => {
+    const S = e.getFocusDrawings().map(
+      (_) => v(_)
+    ).filter((_) => _ != null);
+    S.length !== 0 && e.featurePluginUngroupUpdateNotification(S);
+  };
+  return _e(() => {
+    const p = o[0];
+    if (p == null)
+      return;
+    const { unitId: S } = p, _ = n.getRenderById(S), M = _ == null ? void 0 : _.scene;
+    if (M == null)
+      return;
+    const I = M.getTransformerByCreate(), N = I.clearControl$.subscribe((b) => {
+      b === !0 && s(!1);
+    }), P = I.changeStart$.subscribe((b) => {
+      const { objects: y } = b, R = Ve(y, e), O = R.filter((W) => (W == null ? void 0 : W.drawingType) === ne.DRAWING_GROUP);
+      let U = !1, T = !1;
+      R.length > 1 && (U = !0), O.length > 0 && (T = !0), s(U || T), l(U), d(T);
+    });
+    return () => {
+      P.unsubscribe(), N.unsubscribe();
+    };
+  }, []), /* @__PURE__ */ j("div", { className: B(g.imageCommonPanelGrid, g.imageCommonPanelBorder), style: { display: h(r === !0 ? a : !1) }, children: [
+    /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelTitle), children: /* @__PURE__ */ u("div", { children: t.t("image-panel.group.title") }) }) }),
+    /* @__PURE__ */ j("div", { className: g.imageCommonPanelRow, children: [
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan2, g.imageCommonPanelColumnCenter), children: /* @__PURE__ */ u(le, { size: "small", onClick: () => {
+        f();
+      }, style: { display: h(c) }, children: /* @__PURE__ */ j("span", { className: g.imageCommonPanelInline, children: [
+        /* @__PURE__ */ u(vn, {}),
+        t.t("image-panel.group.group")
+      ] }) }) }),
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan2, g.imageCommonPanelColumnCenter), children: /* @__PURE__ */ u(le, { size: "small", onClick: () => {
+        w();
+      }, style: { display: h(m) }, children: /* @__PURE__ */ j("span", { className: g.imageCommonPanelInline, children: [
+        /* @__PURE__ */ u(yn, {}),
+        t.t("image-panel.group.unGroup")
+      ] }) }) })
+    ] })
+  ] });
+}, se = 20, Rt = 20, Mt = [-3600, 3600], Pe = 300, Ot = (i) => {
+  var Ze;
+  const t = V(te), n = V(re), e = V(ue), { drawings: r, transformShow: o } = i, a = r[0];
+  if (a == null)
+    return;
+  const s = a.transform;
+  if (s == null)
+    return;
+  const { unitId: c, subUnitId: l, drawingId: m, drawingType: d } = a, h = e.getRenderById(c), f = h == null ? void 0 : h.scene;
+  if (f == null)
+    return;
+  const v = (Ze = f.getEngine()) == null ? void 0 : Ze.activeScene;
+  if (v == null)
+    return;
+  const w = f.getTransformerByCreate(), {
+    width: p = 0,
+    height: S = 0,
+    left: _ = 0,
+    top: M = 0,
+    angle: I = 0
+  } = s, [N, P] = x(p), [b, y] = x(S), [R, O] = x(_), [U, T] = x(M), [ie, W] = x(I), [q, Se] = x(w.keepRatio), ae = (C, E, L, k) => {
+    const { width: H, height: Q } = v, { ancestorLeft: F, ancestorTop: K } = f;
+    let Y = C, oe = E, he = L, fe = k;
+    return C + F < 0 && (Y = -F), E + K < 0 && (oe = -K), he = H - Y - F, he < se && (he = se), fe = Q - oe - K, fe < se && (fe = se), C + he + F > H && (Y = H - L - F), E + fe + K > Q && (oe = Q - k - K), {
+      limitLeft: Y,
+      limitTop: oe,
+      limitWidth: he,
+      limitHeight: fe
+    };
+  }, z = (C) => {
+    const { objects: E } = C, L = Ve(E, n);
+    if (L.length !== 1)
+      return;
+    const k = L[0];
+    if (k == null)
+      return;
+    const { transform: H } = k;
+    if (H == null)
+      return;
+    const {
+      width: Q,
+      height: F,
+      left: K,
+      top: Y,
+      angle: oe
+    } = H;
+    Q != null && P(Q), F != null && y(F), K != null && O(K), Y != null && T(Y), oe != null && W(oe);
+  };
+  _e(() => {
+    const C = [
+      w.changeStart$.subscribe((E) => {
+        z(E);
+      }),
+      w.changing$.subscribe((E) => {
+        z(E);
+      }),
+      w.changeEnd$.subscribe((E) => {
+        z(E);
+      }),
+      n.focus$.subscribe((E) => {
+        if (E.length !== 1)
+          return;
+        const L = n.getDrawingByParam(E[0]);
+        if (L == null)
+          return;
+        const k = L.transform;
+        if (k == null)
+          return;
+        const {
+          width: H,
+          height: Q,
+          left: F,
+          top: K,
+          angle: Y
+        } = k;
+        H != null && P(H), Q != null && y(Q), F != null && O(F), K != null && T(K), Y != null && W(Y);
+      })
+    ];
+    return () => {
+      C.forEach((E) => E.unsubscribe());
+    };
+  }, []);
+  const ke = Ie((C) => {
+    if (C == null)
+      return;
+    C = Math.max(C, se);
+    const { limitWidth: E, limitHeight: L } = ae(R, U, C, b);
+    C = Math.min(C, E);
+    const k = { unitId: c, subUnitId: l, drawingId: m, drawingType: d, transform: { width: C } };
+    if (q) {
+      let H = C / N * b;
+      if (H = Math.max(H, Rt), H > L)
+        return;
+      y(H), k.transform.height = H;
+    }
+    P(C), n.featurePluginUpdateNotification([k]), w.refreshControls().changeNotification();
+  }, Pe), Rn = Ie((C) => {
+    if (C == null)
+      return;
+    C = Math.max(C, se);
+    const { limitHeight: E, limitWidth: L } = ae(R, U, N, C);
+    C = Math.min(C, E);
+    const k = { unitId: c, subUnitId: l, drawingId: m, drawingType: d, transform: { height: C } };
+    if (q) {
+      let H = C / b * N;
+      if (H = Math.max(H, se), H > L)
+        return;
+      P(H), k.transform.width = H;
+    }
+    y(C), n.featurePluginUpdateNotification([k]), w.refreshControls().changeNotification();
+  }, Pe), Mn = Ie((C) => {
+    if (C == null)
+      return;
+    const { limitLeft: E } = ae(C, U, N, b);
+    C = E;
+    const L = { unitId: c, subUnitId: l, drawingId: m, drawingType: d, transform: { left: C } };
+    O(C), n.featurePluginUpdateNotification([L]), w.refreshControls().changeNotification();
+  }, Pe), On = Ie((C) => {
+    if (C == null)
+      return;
+    const { limitTop: E } = ae(R, C, N, b);
+    C = E;
+    const L = { unitId: c, subUnitId: l, drawingId: m, drawingType: d, transform: { top: C } };
+    T(C), n.featurePluginUpdateNotification([L]), w.refreshControls().changeNotification();
+  }, Pe), Nn = (C) => {
+    if (C == null)
+      return;
+    const [E, L] = Mt;
+    C < E && (C = E), C > L && (C = L);
+    const k = { unitId: c, subUnitId: l, drawingId: m, drawingType: d, transform: { angle: C } };
+    W(C), n.featurePluginUpdateNotification([k]), w.refreshControls().changeNotification();
+  }, Dn = (C) => {
+    Se(C), w.keepRatio = C;
+  }, Tn = (C) => C ? "block" : "none";
+  return /* @__PURE__ */ j("div", { className: B(g.imageCommonPanelGrid, g.imageCommonPanelBorder), style: { display: Tn(o) }, children: [
+    /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelTitle), children: /* @__PURE__ */ u("div", { children: t.t("image-panel.transform.title") }) }) }),
+    /* @__PURE__ */ j("div", { className: g.imageCommonPanelRow, children: [
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan3), children: /* @__PURE__ */ j("label", { children: [
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: t.t("image-panel.transform.width") }) }),
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: /* @__PURE__ */ u(pe, { precision: 1, value: N, onChange: (C) => {
+          ke(C);
+        }, className: g.imageCommonPanelInput }) }) })
+      ] }) }),
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan3), children: /* @__PURE__ */ j("label", { children: [
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: t.t("image-panel.transform.height") }) }),
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: /* @__PURE__ */ u(pe, { precision: 1, value: b, onChange: (C) => {
+          Rn(C);
+        }, className: g.imageCommonPanelInput }) }) })
+      ] }) }),
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan3), children: /* @__PURE__ */ j("label", { children: [
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: t.t("image-panel.transform.lock") }) }),
+        /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelRow, g.imageCommonPanelRowVertical), children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: /* @__PURE__ */ u(Kn, { checked: q, onChange: Dn }) }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ j("div", { className: g.imageCommonPanelRow, children: [
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan3), children: /* @__PURE__ */ j("label", { children: [
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: t.t("image-panel.transform.x") }) }),
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: /* @__PURE__ */ u(pe, { precision: 1, value: R, onChange: (C) => {
+          Mn(C);
+        }, className: g.imageCommonPanelInput }) }) })
+      ] }) }),
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan3), children: /* @__PURE__ */ j("label", { children: [
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: t.t("image-panel.transform.y") }) }),
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: /* @__PURE__ */ u(pe, { precision: 1, value: U, onChange: (C) => {
+          On(C);
+        }, className: g.imageCommonPanelInput }) }) })
+      ] }) }),
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan3), children: /* @__PURE__ */ j("label", { children: [
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: t.t("image-panel.transform.rotate") }) }),
+        /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: g.imageCommonPanelColumn, children: /* @__PURE__ */ u(pe, { precision: 1, value: ie, onChange: Nn, className: g.imageCommonPanelInput }) }) })
+      ] }) })
+    ] })
+  ] });
+}, Fe = {
+  id: "sheet.operation.open-image-crop",
+  type: ve.OPERATION,
+  handler: (i, t) => !0
+}, ge = {
+  id: "sheet.operation.close-image-crop",
+  type: ve.OPERATION,
+  handler: (i, t) => !0
+};
+var A = /* @__PURE__ */ ((i) => (i.FREE = "0", i.R1_1 = "1", i.R16_9 = "2", i.R9_16 = "3", i.R5_4 = "4", i.R4_5 = "5", i.R4_3 = "6", i.R3_4 = "7", i.R3_2 = "8", i.R2_3 = "9", i))(A || {});
+const Be = {
+  id: "sheet.operation.Auto-image-crop",
+  type: ve.OPERATION,
+  handler: (i, t) => !0
+}, Nt = (i) => {
+  const t = V(me), n = V(te), { drawings: e, cropperShow: r } = i;
+  if (e[0] == null)
+    return;
+  const [a, s] = x(A.FREE), c = mn(!1), l = [
+    {
+      label: n.t("image-panel.crop.mode"),
+      value: A.FREE
+    },
+    {
+      label: "1:1",
+      value: A.R1_1
+    },
+    {
+      label: "16:9",
+      value: A.R16_9
+    },
+    {
+      label: "9:16",
+      value: A.R9_16
+    },
+    {
+      label: "5:4",
+      value: A.R5_4
+    },
+    {
+      label: "4:5",
+      value: A.R4_5
+    },
+    {
+      label: "4:3",
+      value: A.R4_3
+    },
+    {
+      label: "3:4",
+      value: A.R3_4
+    },
+    {
+      label: "3:2",
+      value: A.R3_2
+    },
+    {
+      label: "2:3",
+      value: A.R2_3
+    }
+  ];
+  _e(() => {
+    const f = t.onCommandExecuted((v) => {
+      if (v.id === ge.id) {
+        const w = v.params;
+        w != null && w.isAuto || (c.current = !1);
+      }
+    });
+    return () => {
+      f == null || f.dispose();
+    };
+  }, []);
+  function m(f) {
+    s(f), c.current && t.executeCommand(Be.id, {
+      cropType: f
+    });
+  }
+  const d = (f) => f ? "block" : "none", h = (f) => {
+    t.executeCommand(Be.id, {
+      cropType: f
+    }), c.current = !0;
+  };
+  return /* @__PURE__ */ j("div", { className: B(g.imageCommonPanelGrid, g.imageCommonPanelBorder), style: { display: d(r) }, children: [
+    /* @__PURE__ */ u("div", { className: g.imageCommonPanelRow, children: /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelTitle), children: /* @__PURE__ */ u("div", { children: n.t("image-panel.crop.title") }) }) }),
+    /* @__PURE__ */ j("div", { className: B(g.imageCommonPanelRow, g.imageCommonPanelRowVertical), children: [
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan2), children: /* @__PURE__ */ u(le, { size: "small", onClick: () => {
+        h(a);
+      }, children: /* @__PURE__ */ j("span", { className: g.imageCommonPanelInline, children: [
+        /* @__PURE__ */ u(wn, {}),
+        n.t("image-panel.crop.start")
+      ] }) }) }),
+      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan2), children: /* @__PURE__ */ u(dn, { value: a, options: l, onChange: m }) })
+    ] })
+  ] });
+}, er = (i) => {
+  const t = V(re), n = V(ue), e = V(te), { drawings: r, hasArrange: o = !0, hasTransform: a = !0, hasAlign: s = !0, hasCropper: c = !0, hasGroup: l = !0 } = i, m = r[0];
+  if (m == null)
+    return;
+  const { unitId: d } = m, h = n.getRenderById(d), f = h == null ? void 0 : h.scene;
+  if (f == null)
+    return;
+  const v = f.getTransformerByCreate(), [w, p] = x(!0), [S, _] = x(!0), [M, I] = x(!1), [N, P] = x(!0), [b, y] = x(!1);
+  return _e(() => {
+    const R = v.clearControl$.subscribe((T) => {
+      T === !0 && (p(!1), _(!1), I(!1), P(!1), y(!0));
+    }), O = v.changeStart$.subscribe((T) => {
+      const { objects: ie } = T, W = Ve(ie, t);
+      W.length === 0 ? (p(!1), _(!1), I(!1), P(!1), y(!0)) : W.length === 1 ? (p(!0), _(!0), I(!1), P(!0), y(!1)) : (p(!0), _(!1), I(!0), P(!1), y(!1));
+    }), U = t.focus$.subscribe((T) => {
+      T.length === 0 ? (p(!1), _(!1), I(!1), P(!1), y(!0)) : T.length === 1 ? (p(!0), _(!0), I(!1), P(!0), y(!1)) : (p(!0), _(!1), I(!0), P(!1), y(!1));
+    });
+    return () => {
+      O.unsubscribe(), R.unsubscribe(), U.unsubscribe();
+    };
+  }, []), /* @__PURE__ */ j(Fn, { children: [
+    /* @__PURE__ */ u("div", { style: { display: b === !0 ? "block" : "none", height: "100%" }, children: /* @__PURE__ */ u("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", top: "50%", marginTop: "-100px" }, children: /* @__PURE__ */ u("span", { children: e.t("image-panel.null") }) }) }),
+    /* @__PURE__ */ u(yt, { arrangeShow: o === !0 ? w : !1, drawings: r }),
+    /* @__PURE__ */ u(Ot, { transformShow: a === !0 ? S : !1, drawings: r }),
+    /* @__PURE__ */ u(gt, { alignShow: s === !0 ? M : !1, drawings: r }),
+    /* @__PURE__ */ u(Nt, { cropperShow: c === !0 ? N : !1, drawings: r }),
+    /* @__PURE__ */ u(Pt, { hasGroup: l, drawings: r })
+  ] });
+}, Dt = (i) => {
+  var w;
+  const { popup: t } = i, n = (w = t == null ? void 0 : t.extraProps) == null ? void 0 : w.menuItems;
+  if (!n) return null;
+  const e = V(me), r = V(te), [o, a] = x(!1), [s, c] = x(!1), l = () => {
+    c(!0);
+  }, m = () => {
+    c(!1);
+  }, d = (p) => {
+    a(p);
+  }, h = (p) => {
+    e.executeCommand(p.commandId, p.commandParams), a(!1);
+  }, f = o || s, v = n.filter((p) => !p.disable);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      onMouseEnter: l,
+      onMouseLeave: m,
+      children: /* @__PURE__ */ u(
+        Yn,
+        {
+          align: "start",
+          items: v.map((p) => ({
+            type: "item",
+            children: r.t(p.label),
+            onSelect: () => h(p)
+          })),
+          open: o,
+          onOpenChange: d,
+          children: /* @__PURE__ */ j(
+            "div",
+            {
+              className: B(`
+                      univer-flex univer-items-center univer-gap-2 univer-rounded univer-border univer-border-solid
+                      univer-border-gray-200 univer-p-1
+                      hover:univer-bg-gray-100
+                    `, {
+                "univer-bg-gray-100": o,
+                "univer-bg-white": !o
+              }),
+              children: [
+                /* @__PURE__ */ u(
+                  pn,
+                  {
+                    style: { color: "#35322B" },
+                    extend: { colorChannel1: "rgb(var(--green-700, #409f11))" }
+                  }
+                ),
+                f && /* @__PURE__ */ u(_n, { className: "univer-text-[10px] univer-text-gray-400" })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}, Tt = "COMPONENT_IMAGE_POPUP_MENU", Et = "drawing-ui.config", tn = {}, Pn = {
+  id: "sheet.operation.image-reset-size",
+  type: ve.OPERATION,
+  handler: (i, t) => !0
+}, Bt = (i) => {
+  const { src: t } = i;
+  return t ? /* @__PURE__ */ u("div", { children: /* @__PURE__ */ u("img", { src: t, alt: "Univer Image Viewer", style: { width: "100%", height: "100%", position: "relative" } }) }) : null;
+};
+var jt = Object.getOwnPropertyDescriptor, Ut = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? jt(t, n) : t, o = i.length - 1, a; o >= 0; o--)
+    (a = i[o]) && (r = a(r) || r);
+  return r;
+}, rn = (i, t) => (n, e) => t(n, e, i);
+let je = class extends xe {
+  constructor(i, t) {
+    super(), this._componentManager = i, this._commandService = t, this._init();
+  }
+  _initCustomComponents() {
+    const i = this._componentManager;
+    this.disposeWithMe(i.register(Tt, Dt)), this.disposeWithMe(i.register(hn, Bt));
+  }
+  _initCommands() {
+    [
+      Fe,
+      ge,
+      Pn,
+      Ye,
+      Be
+    ].forEach((i) => this.disposeWithMe(this._commandService.registerCommand(i)));
+  }
+  _init() {
+    this._initCommands(), this._initCustomComponents();
+  }
+};
+je = Ut([
+  rn(0, Le($n)),
+  rn(1, me)
+], je);
+var At = Object.getOwnPropertyDescriptor, Ht = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? At(t, n) : t, o = i.length - 1, a; o >= 0; o--)
+    (a = i[o]) && (r = a(r) || r);
+  return r;
+}, Re = (i, t) => (n, e) => t(n, e, i);
+let Ue = class extends xe {
+  constructor(t, n, e, r) {
+    super();
+    ee(this, "_sceneListenerOnDrawingMap", /* @__PURE__ */ new WeakSet());
+    this._currentUniverService = t, this._commandService = n, this._renderManagerService = e, this._drawingManagerService = r, this._initialize();
+  }
+  dispose() {
+    super.dispose();
+  }
+  _initialize() {
+    this._recoveryImages(), this._drawingAddListener(), this._drawingRemoveListener(), this._drawingUpdateListener(), this._commandExecutedListener(), this._drawingArrangeListener(), this._drawingGroupListener(), this._drawingRefreshListener(), this._drawingVisibleListener();
+  }
+  _recoveryImages() {
+    const t = this._drawingManagerService.drawingManagerData, n = un(this._currentUniverService);
+    if (n == null)
+      return;
+    const { unitId: e, subUnitId: r } = n;
+    Object.keys(t).forEach((o) => {
+      Object.keys(t[o]).forEach((a) => {
+        const s = t[o][a].data;
+        s == null || o !== e || a !== r || Object.keys(s).forEach((c) => {
+          s[c] && this._insertDrawing([{ unitId: o, subUnitId: a, drawingId: c }]);
+        });
+      });
+    });
+  }
+  _commandExecutedListener() {
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted((t) => {
+        if (t.id === Ye.id) {
+          const n = t.params;
+          if (n == null)
+            return;
+          this._drawingAlign(n);
+        }
+      })
+    );
+  }
+  _drawingGroupListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.group$.subscribe((t) => {
+        this._groupDrawings(t);
+      })
+    ), this.disposeWithMe(
+      this._drawingManagerService.ungroup$.subscribe((t) => {
+        this._ungroupDrawings(t);
+      })
+    );
+  }
+  // private _drawingGroup(params: ISetImageGroupOperationParams) {
+  //     const { groupType } = params;
+  //     const drawings = this._drawingManagerService.getFocusDrawings();
+  //     if (drawings.length === 0) {
+  //         return;
+  //     }
+  //     switch (groupType) {
+  //         case GroupType.group:
+  //             this._groupDrawings(drawings);
+  //             break;
+  //         case GroupType.regroup:
+  //             this._regroupDrawings(drawings);
+  //             break;
+  //         case GroupType.ungroup:
+  //             this._ungroupDrawings(drawings);
+  //             break;
+  //         default:
+  //             break;
+  //     }
+  // }
+  _getSceneAndTransformerByDrawingSearch(t) {
+    if (t == null)
+      return;
+    const n = this._renderManagerService.getRenderById(t), e = n == null ? void 0 : n.scene;
+    if (e == null)
+      return null;
+    const r = e.getTransformerByCreate();
+    return { scene: e, transformer: r };
+  }
+  _groupDrawings(t) {
+    t.forEach((n) => {
+      this._groupDrawing(n);
+    });
+  }
+  _groupDrawing(t) {
+    const { parent: n, children: e } = t, { unitId: r, subUnitId: o, drawingId: a } = n, s = this._getSceneAndTransformerByDrawingSearch(n.unitId);
+    if (s == null)
+      return;
+    const { scene: c, transformer: l } = s;
+    this._commandService.syncExecuteCommand(ge.id);
+    const m = [];
+    if (e.forEach((f) => {
+      const v = G(f), w = c.getObjectIncludeInGroup(v);
+      if (w == null || m.includes(w))
+        return;
+      m.push(w);
+      const { transform: p } = f;
+      p != null && (w.classType === Je.GROUP ? w.transformByState({ left: p.left, top: p.top }) : w.transformByState(p));
+    }), m.length === 0)
+      return;
+    const d = G({ unitId: r, subUnitId: o, drawingId: a }), h = new we(d);
+    c.addObject(h, De).attachTransformerTo(h), h.addObjects(...m), n.transform && h.transformByState({ left: n.transform.left, top: n.transform.top }), l.clearSelectedObjects(), l.setSelectedControl(h);
+  }
+  // private _regroupDrawings(drawings: IDrawingSearch[]) {
+  //     const renderObject = this._getSceneAndTransformerByDrawingSearch(drawings[0].unitId);
+  //     if (renderObject == null) {
+  //         return;
+  //     }
+  //     const { scene, transformer } = renderObject;
+  //     const objects: BaseObject[] = [];
+  //     let firstGroup: Nullable<Group> = null;
+  //     drawings.forEach((drawing) => {
+  //         const imageShapeKey = getDrawingShapeKeyByDrawingSearch(drawing);
+  //         const o = scene.getObject(imageShapeKey);
+  //         if (o == null) {
+  //             return true;
+  //         }
+  //         const group = o.ancestorGroup as Nullable<Group>;
+  //         if (group != null && firstGroup == null) {
+  //             firstGroup = group;
+  //         } else if (group != null && !objects.includes(group)) {
+  //             objects.push(group);
+  //         } else if (!objects.includes(o)) {
+  //             objects.push(o);
+  //         }
+  //     });
+  //     if (firstGroup == null) {
+  //         return;
+  //     }
+  //     if (objects.length === 0) {
+  //         return;
+  //     }
+  //     (firstGroup as Group).addObjects(...objects);
+  //     (firstGroup as Group).reCalculateObjects();
+  //     transformer.clearSelectedObjects();
+  //     transformer.setSelectedControl(firstGroup);
+  // }
+  _ungroupDrawings(t) {
+    t.forEach((n) => {
+      this._ungroupDrawing(n);
+    });
+  }
+  _ungroupDrawing(t) {
+    const { parent: n, children: e } = t, r = this._getSceneAndTransformerByDrawingSearch(n.unitId);
+    if (r == null)
+      return;
+    const { scene: o, transformer: a } = r;
+    e.forEach((d) => {
+      const h = G(d), f = o.getObjectIncludeInGroup(h);
+      if (f == null)
+        return !0;
+      if (f == null)
+        return;
+      const { transform: v } = d;
+      v != null && (f.classType === Je.GROUP ? f.transformByState({ left: v.left, top: v.top }) : f.transformByState(v));
+    });
+    const s = G(n), c = o.getObject(s), { width: l, height: m } = c;
+    c.getObjects().forEach((d) => {
+      c.removeSelfObjectAndTransform(d.oKey, l, m);
+    }), c.dispose(), a.clearSelectedObjects();
+  }
+  _drawingAlign(t) {
+    const { alignType: n } = t, e = this._drawingManagerService.getFocusDrawings();
+    if (n === D.default)
+      return;
+    const r = [];
+    let o = Number.POSITIVE_INFINITY, a = Number.POSITIVE_INFINITY, s = Number.NEGATIVE_INFINITY, c = Number.NEGATIVE_INFINITY, l = 0;
+    e.forEach((m) => {
+      const { unitId: d, subUnitId: h, drawingId: f, drawingType: v } = m, w = this._drawingManagerService.getDrawingByParam({ unitId: d, subUnitId: h, drawingId: f });
+      if (w == null || w.transform == null)
+        return;
+      r.push({
+        unitId: d,
+        subUnitId: h,
+        drawingId: f,
+        drawingType: v,
+        transform: w.transform
+      });
+      const { left: p = 0, top: S = 0, width: _ = 0, height: M = 0 } = w.transform;
+      o = Math.min(o, p), a = Math.min(a, S), s = Math.max(s, p + _), c = Math.max(c, S + M), l++;
+    }), l !== 0 && (this._sortDrawingTransform(r, n), this._applyAlignType(r, n, o, a, s, c, l));
+  }
+  _applyAlignType(t, n, e, r, o, a, s) {
+    const c = Math.round((o - e) / s * 10) / 10, l = Math.round((a - r) / s * 10) / 10, m = [], d = this._getSceneAndTransformerByDrawingSearch(t[0].unitId);
+    if (d == null)
+      return;
+    const { scene: h, transformer: f } = d;
+    t.forEach((v, w) => {
+      const { unitId: p, subUnitId: S, drawingId: _, transform: M, drawingType: I } = v, { left: N = 0, top: P = 0, width: b = 0, height: y = 0 } = M;
+      let R = N, O = P;
+      switch (n) {
+        case D.left:
+          R = e;
+          break;
+        case D.center:
+          R = e + (o - e) / 2 - b / 2;
+          break;
+        case D.right:
+          R = o - b;
+          break;
+        case D.top:
+          O = r;
+          break;
+        case D.middle:
+          O = r + (a - r) / 2 - y / 2;
+          break;
+        case D.bottom:
+          O = a - y;
+          break;
+        case D.horizon:
+          R = e + c * w;
+          break;
+        case D.vertical:
+          O = r + l * w;
+          break;
+      }
+      (R !== N || O !== P) && m.push({
+        unitId: p,
+        subUnitId: S,
+        drawingId: _,
+        drawingType: I,
+        transform: {
+          left: R,
+          top: O
+        }
+      });
+    }), this._drawingManagerService.featurePluginUpdateNotification(m), f.refreshControls().changeNotification();
+  }
+  _sortDrawingTransform(t, n) {
+    t.sort((e, r) => {
+      const o = e.transform, a = r.transform, {
+        left: s = 0,
+        top: c = 0,
+        width: l = 0,
+        height: m = 0
+      } = o, {
+        left: d = 0,
+        top: h = 0,
+        width: f = 0,
+        height: v = 0
+      } = a;
+      switch (n) {
+        case D.left:
+          return s - d;
+        case D.center:
+          return s + l / 2 - (d + f / 2);
+        case D.right:
+          return s + l - (d + f);
+        case D.top:
+          return c - h;
+        case D.middle:
+          return c + m / 2 - (h + v / 2);
+        case D.bottom:
+          return c + m - (h + v);
+        case D.horizon:
+          return s + l / 2 - (d + f / 2);
+        case D.vertical:
+          return c + m / 2 - (h + v / 2);
+        default:
+          return 0;
+      }
+    });
+  }
+  _drawingArrangeListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.order$.subscribe((t) => {
+        this._drawingArrange(t);
+      })
+    );
+  }
+  _drawingArrange(t) {
+    const { unitId: n, subUnitId: e, drawingIds: r } = t, o = this._getSceneAndTransformerByDrawingSearch(n);
+    if (o == null)
+      return;
+    const { scene: a } = o;
+    r.forEach((s) => {
+      const c = G({ unitId: n, subUnitId: e, drawingId: s }), l = a.fuzzyMathObjects(c, !0);
+      if (l == null || l.length === 0)
+        return;
+      const m = this._drawingManagerService.getDrawingOrder(n, e).indexOf(s);
+      for (const d of l)
+        d.setProps({ zIndex: m }), d.makeDirty();
+    });
+  }
+  _drawingAddListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.add$.subscribe((t) => {
+        this._insertDrawing(t);
+      })
+    );
+  }
+  _insertDrawing(t) {
+    const n = [];
+    t.forEach((e) => {
+      const { unitId: r } = e;
+      if (this._drawingManagerService.getDrawingByParam(e) == null)
+        return;
+      const a = this._getSceneAndTransformerByDrawingSearch(r);
+      if (a == null)
+        return;
+      const { scene: s } = a;
+      n.includes(s) || n.push(s);
+    }), n.forEach((e) => {
+      this._sceneListenerOnDrawingMap.has(e) || (this._addListenerOnDrawing(e), this._sceneListenerOnDrawingMap.add(e));
+    });
+  }
+  _drawingRemoveListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.remove$.subscribe((t) => {
+        t.forEach((n) => {
+          var m;
+          const { unitId: e, subUnitId: r, drawingId: o } = n, a = this._getSceneAndTransformerByDrawingSearch(e);
+          if (a == null)
+            return;
+          const { scene: s } = a, c = G({ unitId: e, subUnitId: r, drawingId: o }), l = s.fuzzyMathObjects(c, !0);
+          if (l.length > 0) {
+            for (const d of l)
+              d.dispose();
+            (m = s.getTransformer()) == null || m.clearSelectedObjects();
+          }
+        });
+      })
+    );
+  }
+  _drawingUpdateListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.update$.subscribe((t) => {
+        t.forEach((n) => {
+          var b;
+          const { unitId: e, subUnitId: r, drawingId: o } = n, a = this._drawingManagerService.getDrawingByParam(n);
+          if (a == null)
+            return;
+          const { transform: s, drawingType: c } = a, l = this._getSceneAndTransformerByDrawingSearch(e);
+          if (l == null)
+            return;
+          const { scene: m, transformer: d } = l;
+          if (s == null)
+            return !0;
+          const { left: h = 0, top: f = 0, width: v = 0, height: w = 0, angle: p = 0, flipX: S = !1, flipY: _ = !1, skewX: M = 0, skewY: I = 0 } = s, N = G({ unitId: e, subUnitId: r, drawingId: o }), P = m.getObject(N);
+          if (P == null)
+            return !0;
+          P.transformByState({ left: h, top: f, width: v, height: w, angle: p, flipX: S, flipY: _, skewX: M, skewY: I }), (b = m.getTransformer()) == null || b.debounceRefreshControls();
+        });
+      })
+    );
+  }
+  _drawingRefreshListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.refreshTransform$.subscribe((t) => {
+        t.forEach((n) => {
+          const { unitId: e, subUnitId: r, drawingId: o } = n, a = this._getSceneAndTransformerByDrawingSearch(e);
+          if (a == null)
+            return;
+          const s = this._drawingManagerService.getDrawingByParam(n);
+          if (s == null)
+            return;
+          const { transform: c } = s, { scene: l } = a, m = G({ unitId: e, subUnitId: r, drawingId: o }), d = l.getObject(m);
+          if (d == null || c == null)
+            return !0;
+          const {
+            left: h = 0,
+            top: f = 0,
+            width: v = 0,
+            height: w = 0,
+            angle: p = 0,
+            flipX: S = !1,
+            flipY: _ = !1,
+            skewX: M = 0,
+            skewY: I = 0
+          } = c;
+          d.transformByState({ left: h, top: f, width: v, height: w, angle: p, flipX: S, flipY: _, skewX: M, skewY: I });
+        });
+      })
+    );
+  }
+  _drawingVisibleListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.visible$.subscribe((t) => {
+        t.forEach((n) => {
+          const { unitId: e, subUnitId: r, drawingId: o, visible: a } = n, s = this._getSceneAndTransformerByDrawingSearch(e);
+          if (s == null)
+            return;
+          const { scene: c } = s, l = G({ unitId: e, subUnitId: r, drawingId: o }), m = c.getObject(l);
+          if (m == null)
+            return !0;
+          a ? m.show() : m.hide();
+        });
+      })
+    );
+  }
+  _filterUpdateParams(t, n) {
+    return t.filter((e, r) => {
+      if (e == null)
+        return !1;
+      const { transform: o } = e;
+      return sn(o, n == null ? void 0 : n[r]);
+    });
+  }
+  // group?.getObjects().forEach((o) => {
+  //     const drawing = this._drawingManagerService.getDrawingOKey(o.oKey);
+  //     if (drawing != null) {
+  //         const { unitId, subUnitId, drawingId } = drawing;
+  //         drawings.push({ unitId, subUnitId, drawingId });
+  //     }
+  // });
+  _addListenerOnDrawing(t) {
+    const n = t.getTransformerByCreate();
+    let e = null;
+    this.disposeWithMe(
+      Ce(
+        n.changeStart$.subscribe((r) => {
+          const { objects: o } = r, a = Array.from(o.values()), s = [];
+          e = a.map((c) => {
+            const { left: l, top: m, height: d, width: h, angle: f, oKey: v, isInGroup: w } = c, p = this._drawingManagerService.getDrawingOKey(v);
+            if (w || c instanceof we) {
+              let S = c.ancestorGroup;
+              if (S == null && c instanceof we && (S = c), S == null)
+                return null;
+              const _ = this._drawingManagerService.getDrawingOKey(S.oKey);
+              if (_) {
+                const { unitId: M, subUnitId: I, drawingId: N } = _;
+                s.push({ unitId: M, subUnitId: I, drawingId: N });
+                const { left: P, top: b, height: y, width: R, angle: O } = S;
+                return { left: P, top: b, height: y, width: R, angle: O };
+              }
+            } else if (p != null) {
+              const { unitId: S, subUnitId: _, drawingId: M } = p;
+              return s.push({ unitId: S, subUnitId: _, drawingId: M }), { left: l, top: m, height: d, width: h, angle: f };
+            }
+            return null;
+          }).filter((c) => c != null), s.length > 0 ? this._commandService.syncExecuteCommand(Ne.id, s) : this._commandService.syncExecuteCommand(Ne.id, []);
+        })
+      )
+    ), this.disposeWithMe(
+      Ce(
+        n.changeEnd$.subscribe((r) => {
+          const { objects: o } = r, a = this._filterUpdateParams(Ve(o, this._drawingManagerService), e);
+          a.length > 0 && this._drawingManagerService.featurePluginUpdateNotification(a);
+        })
+      )
+    );
+  }
+};
+Ue = Ht([
+  Re(0, Ke),
+  Re(1, me),
+  Re(2, ue),
+  Re(3, re)
+], Ue);
+class Me extends Gn {
+  constructor(n, e) {
+    e == null && (e = {}), e.transformerConfig = {
+      keepRatio: !1,
+      isCropper: !0,
+      anchorFill: "rgb(0, 0, 0)",
+      anchorStroke: "rgb(255, 255, 255)",
+      anchorSize: 24
+    };
+    super(n, e);
+    ee(this, "_srcRect");
+    ee(this, "_prstGeom");
+    ee(this, "_applyTransform");
+    ee(this, "_dragPadding", 8);
+    ee(this, "_cacheCanvas");
+    e != null && e.srcRect && (this._srcRect = e.srcRect), e != null && e.prstGeom && (this._prstGeom = e.prstGeom), e != null && e.applyTransform && (this._applyTransform = e.applyTransform), e != null && e.dragPadding && (this._dragPadding = e.dragPadding), this._applyProps();
+  }
+  refreshSrcRect(n, e) {
+    this._srcRect = n, this._applyTransform = e, this._applyProps();
+  }
+  get srcRect() {
+    return this._srcRect;
+  }
+  dispose() {
+    var n;
+    super.dispose(), (n = this._cacheCanvas) == null || n.dispose(), this._srcRect = null;
+  }
+  isHit(n) {
+    const e = this.getInverseCoord(n);
+    return e.x >= -this.strokeWidth / 2 && e.x <= this.width + this.strokeWidth / 2 && e.y >= -this.strokeWidth / 2 && e.y <= this.height + this.strokeWidth / 2 && !this._inSurround(e);
+  }
+  _inSurround(n) {
+    const e = this._dragPadding;
+    return n.x >= e - this.strokeWidth / 2 && n.x <= this.width + this.strokeWidth / 2 - e && n.y >= e - this.strokeWidth / 2 && n.y <= this.height + this.strokeWidth / 2 - e;
+  }
+  render(n, e) {
+    return this.visible ? (n.save(), this._draw(n), n.restore(), this.makeDirty(!1), this) : (this.makeDirty(!1), this);
+  }
+  _draw(n) {
+    var c, l;
+    const r = this.getScene().getEngine(), { width: o, height: a } = r;
+    this._initialCacheCanvas(), (c = this._cacheCanvas) == null || c.clear();
+    const s = (l = this._cacheCanvas) == null ? void 0 : l.getContext();
+    s != null && (s.save(), ln.drawWith(s, {
+      left: 0,
+      top: 0,
+      width: o,
+      height: a,
+      fill: "rgba(0, 0, 0, 0.5)"
+    }), s.setTransform(n.getTransform()), this._clipForApplyObject(s), this._applyCache(n), s.restore());
+  }
+  _clipForApplyObject(n) {
+    let e = 0;
+    if (this._prstGeom != null && (e = 1), n.globalCompositeOperation = "destination-out", n.beginPath(), e === 0) {
+      const r = this.transform.getMatrix();
+      n.transform(r[0], r[1], r[2], r[3], r[4], r[5]), n.rect(0, 0, this.width, this.height), n.fill();
+    }
+  }
+  _applyProps() {
+    if (this._applyTransform == null)
+      return;
+    let n = 0, e = 0, r = 0, o = 0;
+    const { left: a = 0, top: s = 0, width: c = 0, height: l = 0, angle: m } = this._applyTransform;
+    if (this._srcRect != null) {
+      const { left: f = 0, top: v = 0, right: w = 0, bottom: p = 0 } = this._srcRect;
+      n = f, e = v, r = w, o = p;
+    }
+    const d = a + n, h = s + e;
+    this.transformByState({
+      left: d,
+      top: h,
+      width: a + c - r - d,
+      height: s + l - o - h,
+      angle: m
+    });
+  }
+  _applyCache(n) {
+    if (!n || this._cacheCanvas == null)
+      return;
+    const e = this._cacheCanvas.getContext();
+    e.save(), n.save(), n.setTransform(1, 0, 0, 1, 0, 0), e.setTransform(1, 0, 0, 1, 0, 0), n.drawImage(this._cacheCanvas.getCanvasEle(), 0, 0), n.restore(), e.restore();
+  }
+  _initialCacheCanvas() {
+    if (this._cacheCanvas != null)
+      return;
+    const n = this.getScene();
+    if (n == null) return;
+    this._cacheCanvas = new Wn();
+    const e = n.getEngine();
+    this._cacheCanvas.setSize(e.width, e.height), e.onTransformChange$.subscribeEvent(() => {
+      var r;
+      (r = this._cacheCanvas) == null || r.setSize(e.width, e.height), this.makeDirty(!0);
+    });
+  }
+}
+var Lt = Object.getOwnPropertyDescriptor, xt = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? Lt(t, n) : t, o = i.length - 1, a; o >= 0; o--)
+    (a = i[o]) && (r = a(r) || r);
+  return r;
+}, de = (i, t) => (n, e) => t(n, e, i);
+let Ae = class extends xe {
+  constructor(t, n, e, r, o, a) {
+    super();
+    ee(this, "_sceneListenerOnImageMap", /* @__PURE__ */ new WeakSet());
+    this._commandService = t, this._drawingManagerService = n, this._renderManagerService = e, this._univerInstanceService = r, this._messageService = o, this._localeService = a, this._init();
+  }
+  _init() {
+    this._initOpenCrop(), this._initCloseCrop(), this._initAutoCrop();
+  }
+  _initAutoCrop() {
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted((t) => {
+        if (t.id !== Be.id)
+          return;
+        const n = t.params;
+        if (n == null)
+          return;
+        const { cropType: e } = n, r = this._drawingManagerService.getFocusDrawings();
+        if (r.length !== 1)
+          return;
+        const o = r[0], { unitId: a, subUnitId: s, drawingId: c } = o, l = this._renderManagerService.getRenderById(a), m = l == null ? void 0 : l.scene;
+        if (m == null)
+          return !0;
+        this._searchCropObject(m) != null && this._commandService.syncExecuteCommand(ge.id, { isAuto: !0 });
+        const h = G({ unitId: a, subUnitId: s, drawingId: c }), f = m.getObject(h);
+        if (!(f instanceof ze)) {
+          this._messageService.show({
+            type: Qe.Error,
+            content: this._localeService.t("image-cropper.error")
+          });
+          return;
+        }
+        f != null && (this._updateCropperObject(e, f), this._commandService.executeCommand(Fe.id, { unitId: a, subUnitId: s, drawingId: c }));
+      })
+    );
+  }
+  _calculateSrcRectByRatio(t, n, e, r, o, a) {
+    const s = e / r, c = o / a;
+    let l = e, m = r;
+    s > c ? l = r * c : m = e / c;
+    const d = (e - l) / 2, h = (r - m) / 2;
+    return {
+      left: ye(d, 1),
+      top: ye(h, 1),
+      right: ye(e - (d + l), 1),
+      bottom: ye(r - (h + m), 1)
+    };
+  }
+  _updateCropperObject(t, n) {
+    const { left: e, top: r, width: o, height: a } = n.calculateTransformWithSrcRect();
+    let s;
+    switch (t) {
+      case A.R1_1:
+        s = this._calculateSrcRectByRatio(e, r, o, a, 1, 1);
+        break;
+      case A.R16_9:
+        s = this._calculateSrcRectByRatio(e, r, o, a, 16, 9);
+        break;
+      case A.R9_16:
+        s = this._calculateSrcRectByRatio(e, r, o, a, 9, 16);
+        break;
+      case A.R5_4:
+        s = this._calculateSrcRectByRatio(e, r, o, a, 5, 4);
+        break;
+      case A.R4_5:
+        s = this._calculateSrcRectByRatio(e, r, o, a, 4, 5);
+        break;
+      case A.R4_3:
+        s = this._calculateSrcRectByRatio(e, r, o, a, 4, 3);
+        break;
+      case A.R3_4:
+        s = this._calculateSrcRectByRatio(e, r, o, a, 3, 4);
+        break;
+      case A.R3_2:
+        s = this._calculateSrcRectByRatio(e, r, o, a, 3, 2);
+        break;
+      case A.R2_3:
+        s = this._calculateSrcRectByRatio(e, r, o, a, 2, 3);
+        break;
+      case A.FREE:
+    }
+    if (s == null)
+      return;
+    n.setSrcRect(s);
+    const { left: c = 0, top: l = 0, bottom: m = 0, right: d = 0 } = s;
+    n.transformByStateCloseCropper({
+      left: e + c,
+      top: r + l,
+      width: o - d - c,
+      height: a - m - l
+    });
+  }
+  _initOpenCrop() {
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted((t) => {
+        if (t.id !== Fe.id)
+          return;
+        const n = t.params;
+        if (n == null)
+          return;
+        const { unitId: e, subUnitId: r, drawingId: o } = n, a = this._renderManagerService.getRenderById(e), s = a == null ? void 0 : a.scene;
+        if (s == null)
+          return !0;
+        if (this._sceneListenerOnImageMap.has(s) || (this._addListenerOnImage(s), this._sceneListenerOnImageMap.add(s)), this._drawingManagerService.getDrawingByParam({ unitId: e, subUnitId: r, drawingId: o }) == null)
+          return;
+        const l = G({ unitId: e, subUnitId: r, drawingId: o }), m = s.getObject(l);
+        if (m == null)
+          return;
+        if (!(m instanceof ze)) {
+          this._messageService.show({
+            type: Qe.Error,
+            content: this._localeService.t("image-cropper.error")
+          });
+          return;
+        }
+        const d = s.getTransformer();
+        d == null || d.clearControls();
+        const h = new Me(`${l}-crop`, {
+          srcRect: m.srcRect,
+          prstGeom: m.prstGeom,
+          applyTransform: m.calculateTransformWithSrcRect()
+        });
+        s.addObject(h, m.getLayerIndex() + 1).attachTransformerTo(h), d == null || d.createControlForCopper(h), this._addHoverForImageCopper(h), m.openRenderByCropper(), d == null || d.refreshControls(), h.makeDirty(!0), this._commandService.syncExecuteCommand(Ne.id, [{ unitId: e, subUnitId: r, drawingId: o }]);
+      })
+    );
+  }
+  _searchCropObject(t) {
+    const n = t.getAllObjectsByOrder();
+    for (const e of n)
+      if (e instanceof Me)
+        return e;
+  }
+  _initCloseCrop() {
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted((n) => {
+        if (n.id !== ge.id)
+          return;
+        const e = this._univerInstanceService.getFocusedUnit();
+        if (e == null)
+          return;
+        const r = e.getUnitId(), o = this._renderManagerService.getRenderById(r), a = o == null ? void 0 : o.scene;
+        if (a == null)
+          return !0;
+        const s = this._searchCropObject(a);
+        if (s == null)
+          return;
+        const c = this._getApplyObjectByCropObject(s);
+        if (c == null)
+          return;
+        const l = a.getTransformerByCreate();
+        l.detachFrom(s), l.clearCopperControl();
+        const m = this._getSrcRectByTransformState(c, s), d = this._drawingManagerService.getDrawingOKey(c.oKey);
+        if (d != null) {
+          const { left: h, top: f, height: v, width: w } = s;
+          this._drawingManagerService.featurePluginUpdateNotification([{
+            ...d,
+            transform: {
+              ...d.transform,
+              left: h,
+              top: f,
+              height: v,
+              width: w
+            },
+            srcRect: m.srcRectAngle
+          }]);
+        }
+        c.setSrcRect({ ...m.srcRectAngle }), c.closeRenderByCropper(), c.makeDirty(!0), s == null || s.dispose();
+      })
+    );
+    const t = this._univerInstanceService.getCurrentTypeOfUnit$(Oe.UNIVER_SHEET).pipe(
+      Zn((n) => n ? n.activeSheet$ : Xn(null))
+    );
+    this.disposeWithMe(t.subscribe(() => {
+      this._commandService.syncExecuteCommand(ge.id);
+    }));
+  }
+  _getApplyObjectByCropObject(t) {
+    const n = t.oKey, e = n.slice(0, n.length - 5), r = t.getScene();
+    if (!r) return null;
+    const o = r.getObject(e);
+    return o == null ? null : o;
+  }
+  _addListenerOnImage(t) {
+    const n = t.getTransformerByCreate();
+    let e = null;
+    this.disposeWithMe(
+      n.changeStart$.subscribe((r) => {
+        const { objects: o } = r, a = o.values().next().value;
+        if (a == null || !(a instanceof Me))
+          return;
+        const { left: s, top: c, height: l, width: m, angle: d } = a;
+        e = { left: s, top: c, height: l, width: m, angle: d }, n.clearCopperControl();
+      })
+    ), this.disposeWithMe(
+      n.changeEnd$.subscribe((r) => {
+        const { objects: o } = r, a = o.values().next().value;
+        if (a == null || !(a instanceof Me))
+          return;
+        const { left: s, top: c, height: l, width: m, angle: d } = a;
+        if (!sn({ left: s, top: c, height: l, width: m, angle: d }, e))
+          return;
+        const h = this._getApplyObjectByCropObject(a);
+        if (h == null)
+          return;
+        const f = this._getSrcRectByTransformState(h, a);
+        a.refreshSrcRect(f.srcRect, h.getState()), n.createControlForCopper(a);
+      })
+    ), this._endCropListener(t);
+  }
+  _addHoverForImageCopper(t) {
+    this.disposeWithMe(
+      t.onPointerEnter$.subscribeEvent(() => {
+        t.cursor = Te.MOVE;
+      })
+    ), this.disposeWithMe(
+      t.onPointerLeave$.subscribeEvent(() => {
+        t.cursor = Te.DEFAULT;
+      })
+    );
+  }
+  _endCropListener(t) {
+    const n = t.getTransformerByCreate();
+    this.disposeWithMe(
+      n.clearControl$.subscribe((e) => {
+        e === !0 && this._commandService.syncExecuteCommand(ge.id);
+      })
+    );
+  }
+  _getSrcRectByTransformState(t, n) {
+    const { left: e, top: r, height: o, width: a, strokeWidth: s, angle: c } = n, { left: l, top: m, width: d, height: h, angle: f, strokeWidth: v } = t, w = e - l, p = r - m, S = {
+      left: w,
+      top: p,
+      right: d - w - a,
+      bottom: h - p - o
+    }, _ = { ...S };
+    if (f !== 0) {
+      const M = e + a / 2, I = r + o / 2, N = new Ge(M, I), P = d / 2 + l, b = h / 2 + m, y = new Ge(P, b), R = new Ge(l, m);
+      R.rotateByPoint(qe(f), y);
+      const O = R.clone();
+      O.rotateByPoint(qe(-f), N);
+      const U = e - O.x, T = r - O.y;
+      _.left = U, _.top = T, _.right = d - U - a, _.bottom = h - T - o;
+    }
+    return {
+      srcRect: S,
+      srcRectAngle: _
+    };
+  }
+};
+Ae = xt([
+  de(0, me),
+  de(1, re),
+  de(2, ue),
+  de(3, Ke),
+  de(4, zn),
+  de(5, Le(te))
+], Ae);
+var Vt = Object.getOwnPropertyDescriptor, kt = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? Vt(t, n) : t, o = i.length - 1, a; o >= 0; o--)
+    (a = i[o]) && (r = a(r) || r);
+  return r;
+}, ce = (i, t) => (n, e) => t(n, e, i);
+let He = class extends xe {
+  constructor(i, t, n, e, r, o, a) {
+    super(), this._commandService = i, this._renderManagerService = t, this._drawingManagerService = n, this._dialogService = e, this._imageIoService = r, this._currentUniverService = o, this._drawingRenderService = a, this._initialize();
+  }
+  dispose() {
+    super.dispose();
+  }
+  _initialize() {
+    this._drawingAddListener(), this._commandExecutedListener(), this._imageUpdateListener();
+  }
+  _commandExecutedListener() {
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted((i) => {
+        if (i.id === Pn.id) {
+          const t = i.params;
+          if (t == null)
+            return;
+          this._resetImageSize(t);
+        }
+      })
+    );
+  }
+  _getSceneAndTransformerByDrawingSearch(i) {
+    if (i == null)
+      return;
+    const t = this._renderManagerService.getRenderById(i), n = t == null ? void 0 : t.scene;
+    if (n == null)
+      return null;
+    const e = n.getTransformerByCreate();
+    return { scene: n, transformer: e };
+  }
+  _resetImageSize(i) {
+    const t = [], n = [];
+    i.forEach((e) => {
+      const { unitId: r, subUnitId: o, drawingId: a } = e, s = this._getSceneAndTransformerByDrawingSearch(r);
+      if (s == null)
+        return;
+      const { scene: c } = s, l = G({ unitId: r, subUnitId: o, drawingId: a }), m = c.getObject(l);
+      if (m == null)
+        return !0;
+      const d = this._drawingManagerService.getDrawingByParam(e);
+      if (d == null)
+        return !0;
+      if (d.drawingType !== ne.DRAWING_IMAGE)
+        return;
+      m.resetSize();
+      const { width: h, height: f } = m.getNativeSize();
+      n.includes(c) === !1 && n.push(c), t.push({
+        ...d,
+        transform: {
+          ...d.transform,
+          height: f,
+          width: h,
+          angle: 0
+        },
+        srcRect: null,
+        prstGeom: null
+      });
+    }), this._drawingManagerService.featurePluginUpdateNotification(t), n.forEach((e) => {
+      e.getTransformerByCreate().refreshControls().changeNotification();
+    }), this._commandService.syncExecuteCommand(Ne.id, i);
+  }
+  _drawingAddListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.add$.subscribe((i) => {
+        this._insertImages(i);
+      })
+    );
+  }
+  _insertImages(i) {
+    i.forEach(async (t) => {
+      var c;
+      const { unitId: n, subUnitId: e } = t, r = this._getSceneAndTransformerByDrawingSearch(n), o = (c = un(this._currentUniverService, n)) == null ? void 0 : c.subUnitId;
+      if (r == null || o !== e)
+        return;
+      const a = this._drawingManagerService.getDrawingByParam(t);
+      if (a == null)
+        return;
+      const s = await this._drawingRenderService.renderImages(a, r.scene);
+      if (!(s == null || s.length === 0))
+        for (const l of s)
+          this._addHoverForImage(l), this._addDialogForImage(l);
+    });
+  }
+  _imageUpdateListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.update$.subscribe((i) => {
+        i.forEach((t) => {
+          const { unitId: n, subUnitId: e, drawingId: r } = t, o = this._drawingManagerService.getDrawingByParam(t);
+          if (o == null)
+            return;
+          const { transform: a, drawingType: s, srcRect: c, prstGeom: l, source: m, imageSourceType: d } = o;
+          if (s !== ne.DRAWING_IMAGE)
+            return;
+          const h = this._getSceneAndTransformerByDrawingSearch(n);
+          if (h == null)
+            return;
+          const { scene: f, transformer: v } = h;
+          if (a == null)
+            return !0;
+          const w = G({ unitId: n, subUnitId: e, drawingId: r }), p = f.getObject(w);
+          if (p == null)
+            return !0;
+          p.setSrcRect(c), p.setPrstGeom(l), m != null && m.length > 0 && (d === Xe.BASE64 || d === Xe.URL) && p.changeSource(m);
+        });
+      })
+    );
+  }
+  _addHoverForImage(i) {
+    this.disposeWithMe(
+      Ce(
+        i.onPointerEnter$.subscribeEvent(() => {
+          i.cursor = Te.GRAB;
+        })
+      )
+    ), this.disposeWithMe(
+      Ce(
+        i.onPointerLeave$.subscribeEvent(() => {
+          i.cursor = Te.DEFAULT;
+        })
+      )
+    );
+  }
+  _addDialogForImage(i) {
+    this.disposeWithMe(
+      Ce(
+        i.onDblclick$.subscribeEvent(() => {
+          const t = `${i.oKey}-viewer-dialog`;
+          this._drawingRenderService.previewImage(t, i.getNative().src, i.getNativeSize().width, i.getNativeSize().height);
+        })
+      )
+    );
+  }
+};
+He = kt([
+  ce(0, me),
+  ce(1, ue),
+  ce(2, re),
+  ce(3, gn),
+  ce(4, cn),
+  ce(5, Ke),
+  ce(6, Le(Ee))
+], He);
+var Gt = Object.getOwnPropertyDescriptor, Wt = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? Gt(t, n) : t, o = i.length - 1, a; o >= 0; o--)
+    (a = i[o]) && (r = a(r) || r);
+  return r;
+}, an = (i, t) => (n, e) => t(n, e, i);
+const $t = "UNIVER_DRAWING_UI_PLUGIN";
+var $e;
+let on = ($e = class extends Hn {
+  constructor(i = tn, t, n) {
+    super(), this._config = i, this._injector = t, this._configService = n;
+    const { menu: e, ...r } = Ln(
+      {},
+      tn,
+      this._config
+    );
+    e && this._configService.setConfig("menu", e, { merge: !0 }), this._configService.setConfig(Et, r);
+  }
+  onStarting() {
+    this._initDependencies();
+  }
+  onRendered() {
+    this._injector.get(Ue), this._injector.get(je), this._injector.get(Ae), this._injector.get(He);
+  }
+  _initDependencies() {
+    [
+      [Ee],
+      [Ue],
+      [je],
+      [Ae],
+      [He]
+    ].forEach((t) => this._injector.add(t));
+  }
+}, ee($e, "pluginName", $t), $e);
+on = Wt([
+  an(1, Le(Un)),
+  an(2, An)
+], on);
+export {
+  Be as AutoImageCropOperation,
+  Tt as COMPONENT_IMAGE_POPUP_MENU,
+  ge as CloseImageCropOperation,
+  er as DrawingCommonPanel,
+  Ee as DrawingRenderService,
+  Me as ImageCropperObject,
+  Dt as ImagePopupMenu,
+  Pn as ImageResetSizeOperation,
+  Fe as OpenImageCropOperation,
+  Ye as SetDrawingAlignOperation,
+  on as UniverDrawingUIPlugin,
+  Ve as getUpdateParams
+};