@univerjs/drawing-ui 0.6.10 → 0.7.0-beta.1

package/lib/index.js

@@ -1,29 +1,29 @@
-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)
+var Dt = Object.defineProperty;
+var Tt = (i, r, t) => r in i ? Dt(i, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[r] = t;
+var te = (i, r, t) => Tt(i, typeof r != "symbol" ? r + "" : r, t);
+import { UniverInstanceType as Te, DrawingTypeEnum as re, CommandType as Se, ICommandService as he, LocaleService as ie, ArrangeTypeEnum as Ie, Tools as Et, debounce as Me, Inject as ke, Disposable as Ve, checkIfMove as ot, toDisposable as _e, IUniverInstanceService as Ze, ImageSourceType as qe, Injector as Pt, IConfigService as jt, Plugin as Bt, merge as Ut } from "@univerjs/core";
+import { getDrawingShapeKeyByDrawingSearch as W, ImageSourceType as xt, IDrawingManagerService as ae, IImageIoService as ct, SetDrawingSelectedOperation as Ee } from "@univerjs/drawing";
+import { Group as Ce, DRAWING_OBJECT_LAYER_INDEX as Pe, Image as Ke, Rect as lt, IRenderManagerService as me, getGroupState as Ht, transformObjectOutOfGroup as At, RENDER_CLASS_TYPE as Qe, Shape as Lt, Canvas as kt, precisionTo as Re, CURSOR_TYPE as je, Vector2 as $e, degToRad as et } from "@univerjs/engine-render";
+import { IGalleryService as Vt, useDependency as k, ComponentManager as Wt, IMessageService as Gt, IDialogService as $t } from "@univerjs/ui";
+import { jsxs as P, jsx as g, Fragment as zt } from "react/jsx-runtime";
+import { useState as L, forwardRef as X, useRef as dt, createElement as J, useEffect as be } from "react";
+import { Select as ut, Button as ue, clsx as Y, InputNumber as we, Checkbox as Ft, DropdownMenu as Kt, MessageType as tt } from "@univerjs/design";
+import { switchMap as Yt, of as Zt } from "rxjs";
+function rt(i, r, t, e) {
+  const n = e.getDrawingByParam(i);
+  if (n == null)
     return;
-  const o = G(i), a = n.getObject(o);
-  if (a && !(a instanceof we))
+  const s = W(i), a = t.getObject(s);
+  if (a && !(a instanceof Ce))
     return;
   if (a != null) {
-    a.addObject(t);
+    a.addObject(r);
     return;
   }
-  const s = new we(o);
-  n.addObject(s, De).attachTransformerTo(s), s.addObject(t);
-  const { transform: c } = r;
-  c && s.transformByState(
+  const o = new Ce(s);
+  t.addObject(o, Pe).attachTransformerTo(o), o.addObject(r);
+  const { transform: c } = n;
+  c && o.transformByState(
     {
       left: c.left,
       top: c.top,
@@ -31,209 +31,183 @@ function en(i, t, n, e) {
     }
   );
 }
-function un(i, t) {
-  var o;
-  const n = t ? i.getUnit(t) : i.getFocusedUnit();
-  if (n == null)
+function gt(i, r) {
+  var s;
+  const t = r ? i.getUnit(r) : i.getFocusedUnit();
+  if (t == 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 e = t.getUnitId();
+  let n;
+  return t.type === Te.UNIVER_SHEET ? n = (s = t.getActiveSheet()) == null ? void 0 : s.getSheetId() : (t.type === Te.UNIVER_DOC || t.type === Te.UNIVER_SLIDE) && (n = e), { unitId: e, subUnitId: n, current: t };
 }
-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;
+var Xt = Object.getOwnPropertyDescriptor, Jt = (i, r, t, e) => {
+  for (var n = e > 1 ? void 0 : e ? Xt(r, t) : r, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (n = a(n) || n);
+  return n;
+}, ze = (i, r) => (t, e) => r(t, e, i);
+let Be = class {
+  constructor(i, r, t) {
+    this._drawingManagerService = i, this._imageIoService = r, this._galleryService = t;
   }
   // eslint-disable-next-line max-lines-per-function
-  async renderImages(i, t) {
+  async renderImages(i, r) {
     const {
-      transform: n,
+      transform: t,
       drawingType: e,
-      source: r,
-      imageSourceType: o,
+      source: n,
+      imageSourceType: s,
       srcRect: a,
-      prstGeom: s,
+      prstGeom: o,
       groupId: c,
       unitId: l,
-      subUnitId: m,
-      drawingId: d,
+      subUnitId: d,
+      drawingId: u,
       isMultiTransform: h,
       transforms: f
     } = i;
-    if (e !== ne.DRAWING_IMAGE || !this._drawingManagerService.getDrawingVisible() || n == null)
+    if (e !== re.DRAWING_IMAGE || !this._drawingManagerService.getDrawingVisible() || t == 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);
+    const w = h && f ? f : [t], v = [];
+    for (const m of w) {
+      const { left: C, top: _, width: R, height: b, angle: N, flipX: I, flipY: S, skewX: y, skewY: M } = m, O = w.indexOf(m), j = W({ unitId: l, subUnitId: d, drawingId: u }, h ? O : void 0), T = r.getObject(j);
       if (T != null) {
-        T.transformByState({ left: S, top: _, width: M, height: I, angle: N, flipX: P, flipY: b, skewX: y, skewY: R });
+        T.transformByState({ left: C, top: _, width: R, height: b, angle: N, flipX: I, flipY: S, skewX: y, skewY: M });
         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;
+      const se = this._drawingManagerService.getDrawingOrder(l, d), G = se.indexOf(u), Q = { ...m, zIndex: G === -1 ? se.length - 1 : G }, ye = this._imageIoService.getImageSourceCache(n, s);
+      let oe = !1;
+      if (ye != null)
+        Q.image = ye;
       else {
-        if (o === xn.UUID)
+        if (s === xt.UUID)
           try {
-            q.url = await this._imageIoService.getImage(r);
-          } catch (ke) {
-            console.error(ke);
+            Q.url = await this._imageIoService.getImage(n);
+          } catch (Ge) {
+            console.error(Ge);
             continue;
           }
         else
-          q.url = r;
-        ae = !0;
+          Q.url = n;
+        oe = !0;
       }
-      if (t.getObject(U))
+      if (r.getObject(j))
         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));
+      Q.printable = !0;
+      const z = new Ke(j, Q);
+      oe && this._imageIoService.addImageSourceCache(n, s, z.getNative()), this._drawingManagerService.getDrawingVisible() && (r.addObject(z, Pe), this._drawingManagerService.getDrawingEditable() && r.attachTransformerTo(z), c && rt({ drawingId: c, unitId: l, subUnitId: d }, z, r, this._drawingManagerService), o != null && z.setPrstGeom(o), a != null && z.setSrcRect(a), v.push(z));
     }
-    return w;
+    return v;
   }
-  renderFloatDom(i, t) {
+  renderFloatDom(i, r) {
     const {
-      transform: n,
+      transform: t,
       drawingType: e,
-      groupId: r,
-      unitId: o,
+      groupId: n,
+      unitId: s,
       subUnitId: a,
-      drawingId: s,
+      drawingId: o,
       isMultiTransform: c,
       transforms: l
     } = i;
-    if (e !== ne.DRAWING_DOM || !this._drawingManagerService.getDrawingVisible() || n == null)
+    if (e !== re.DRAWING_DOM || !this._drawingManagerService.getDrawingVisible() || t == 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);
+    const d = c && l ? l : [t], u = [];
+    for (const h of d) {
+      const { left: f, top: w, width: v, height: m, angle: C, flipX: _, flipY: R, skewX: b, skewY: N } = h, I = d.indexOf(h), S = W({ unitId: s, subUnitId: a, drawingId: o }, c ? I : void 0), y = r.getObject(S);
       if (y != null) {
-        y.transformByState({ left: f, top: v, width: w, height: p, angle: S, flipX: _, flipY: M, skewX: I, skewY: N });
+        y.transformByState({ left: f, top: w, width: v, height: m, angle: C, flipX: _, flipY: R, skewX: b, 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))
+      const M = this._drawingManagerService.getDrawingOrder(s, a), O = M.indexOf(o), j = { ...h, zIndex: O === -1 ? M.length - 1 : O };
+      if (r.getObject(S))
         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));
+      j.printable = !1;
+      const T = new lt(S, j);
+      this._drawingManagerService.getDrawingVisible() && (r.addObject(T, Pe), this._drawingManagerService.getDrawingEditable() && i.allowTransform !== !1 && r.attachTransformerTo(T), n && rt({ drawingId: n, unitId: s, subUnitId: a }, T, r, this._drawingManagerService), u.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);
+    return u;
+  }
+  renderDrawing(i, r) {
+    const t = this._drawingManagerService.getDrawingByParam(i);
+    if (t != null)
+      switch (t.drawingType) {
+        case re.DRAWING_IMAGE:
+          return this.renderImages(t, r);
       }
   }
-  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();
+  previewImage(i, r, t, e) {
+    this._galleryService.open({
+      images: [r],
+      // width: adjustSize.width,
+      // height: adjustSize.height,
+      onOpenChange: (n) => {
+        n || this._galleryService.close();
       }
     });
   }
-  _adjustImageSize(i, t, n, e) {
-    if (i <= n && t <= e)
+  _adjustImageSize(i, r, t, e) {
+    if (i <= t && r <= e)
       return {
         width: i,
-        height: t
+        height: r
       };
-    const r = n / i, o = e / t, a = Math.min(r, o);
+    const n = t / i, s = e / r, a = Math.min(n, s);
     return {
       width: Math.floor(i * a),
-      height: Math.floor(t * a)
+      height: Math.floor(r * a)
     };
   }
 };
-Ee = qn([
-  We(0, re),
-  We(1, cn),
-  We(2, gn)
-], Ee);
-function Ve(i, t) {
-  const n = [];
+Be = Jt([
+  ze(0, ae),
+  ze(1, ct),
+  ze(2, Vt)
+], Be);
+function We(i, r) {
+  const t = [];
   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,
+    const { oKey: n, left: s, top: a, height: o, width: c, angle: l } = e, d = r.getDrawingOKey(n);
+    if (d == null)
+      return t.push(null), !0;
+    const { unitId: u, subUnitId: h, drawingId: f, drawingType: w } = d, v = {
+      unitId: u,
       subUnitId: h,
       drawingId: f,
-      drawingType: v,
+      drawingType: w,
       transform: {
-        left: o,
+        left: s,
         top: a,
-        height: s,
+        height: o,
         width: c,
         angle: l
       }
     };
-    v === ne.DRAWING_IMAGE && (w.srcRect = e.srcRect), n.push(w);
-  }), n;
+    w === re.DRAWING_IMAGE && (v.srcRect = e.srcRect), t.push(v);
+  }), t;
 }
 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 = {
+const Xe = {
   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 = [
+  type: Se.OPERATION,
+  handler: (i, r) => !0
+}, qt = (i) => {
+  const r = k(he), t = k(ie), { alignShow: e } = i, [n, s] = L(D.default), a = [
     {
-      label: n.t("image-panel.align.default"),
+      label: t.t("image-panel.align.default"),
       value: D.default
     },
     {
       options: [
         {
-          label: n.t("image-panel.align.left"),
+          label: t.t("image-panel.align.left"),
           value: D.left
         },
         {
-          label: n.t("image-panel.align.center"),
+          label: t.t("image-panel.align.center"),
           value: D.center
         },
         {
-          label: n.t("image-panel.align.right"),
+          label: t.t("image-panel.align.right"),
           value: D.right
         }
       ]
@@ -241,15 +215,15 @@ const Ye = {
     {
       options: [
         {
-          label: n.t("image-panel.align.top"),
+          label: t.t("image-panel.align.top"),
           value: D.top
         },
         {
-          label: n.t("image-panel.align.middle"),
+          label: t.t("image-panel.align.middle"),
           value: D.middle
         },
         {
-          label: n.t("image-panel.align.bottom"),
+          label: t.t("image-panel.align.bottom"),
           value: D.bottom
         }
       ]
@@ -257,231 +231,263 @@ const Ye = {
     {
       options: [
         {
-          label: n.t("image-panel.align.horizon"),
+          label: t.t("image-panel.align.horizon"),
           value: D.horizon
         },
         {
-          label: n.t("image-panel.align.vertical"),
+          label: t.t("image-panel.align.vertical"),
           value: D.vertical
         }
       ]
     }
   ];
-  function s(l) {
-    o(l), t.executeCommand(Ye.id, {
+  function o(l) {
+    s(l), r.executeCommand(Xe.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 }) }) })
-  ] });
+  return /* @__PURE__ */ P(
+    "div",
+    {
+      className: `
+              univer-relative univer-w-full univer-border-l-0 univer-border-r-0 univer-border-t univer-border-solid
+              univer-border-gray-200
+            `,
+      style: { display: ((l) => l ? "block" : "none")(e) },
+      children: [
+        /* @__PURE__ */ g(
+          "div",
+          {
+            className: `
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `,
+            children: /* @__PURE__ */ g("div", { className: "univer-w-full univer-text-gray-900", children: /* @__PURE__ */ g("div", { children: t.t("image-panel.align.title") }) })
+          }
+        ),
+        /* @__PURE__ */ g(
+          "div",
+          {
+            className: `
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `,
+            children: /* @__PURE__ */ g("div", { className: "univer-w-full univer-text-gray-900", children: /* @__PURE__ */ g(ut, { value: n, options: a, onChange: o }) })
+          }
+        )
+      ]
+    }
+  );
 };
 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]);
+    for (var r, t = 1, e = arguments.length; t < e; t++) {
+      r = arguments[t];
+      for (var n in r) Object.prototype.hasOwnProperty.call(r, n) && (i[n] = r[n]);
     }
     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]);
+}, Qt = function(i, r) {
+  var t = {};
+  for (var e in i) Object.prototype.hasOwnProperty.call(i, e) && r.indexOf(e) < 0 && (t[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);
+    for (var n = 0, e = Object.getOwnPropertySymbols(i); n < e.length; n++)
+      r.indexOf(e[n]) < 0 && Object.prototype.propertyIsEnumerable.call(i, e[n]) && (t[e[n]] = i[e[n]]);
+  return t;
+}, q = X(function(i, r) {
+  var t = i.icon, e = i.id, n = i.className, s = i.extend, a = Qt(i, ["icon", "id", "className", "extend"]), o = "univerjs-icon univerjs-icon-".concat(e, " ").concat(n || "").trim(), c = dt("_".concat(rr()));
+  return ht(t, "".concat(e), { defIds: t.defIds, idSuffix: c.current }, $({ ref: r, className: o }, a), s);
 });
-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 ht(i, r, t, e, n) {
+  return J(i.tag, $($({ key: r }, er(i, t, n)), e), (tr(i, t).children || []).map(function(s, a) {
+    return ht(s, "".concat(r, "-").concat(i.tag, "-").concat(a), t, void 0, n);
   }));
 }
-function dt(i, t, n) {
+function er(i, r, t) {
   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, ")")));
+  t != null && t.colorChannel1 && e.fill === "colorChannel1" && (e.fill = t.colorChannel1), i.tag === "mask" && e.id && (e.id = e.id + r.idSuffix), Object.entries(e).forEach(function(s) {
+    var a = s[0], o = s[1];
+    a === "mask" && typeof o == "string" && (e[a] = o.replace(/url\(#(.*)\)/, "url(#$1".concat(r.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, ")")));
+  var n = r.defIds;
+  return !n || n.length === 0 || (i.tag === "use" && e["xlink:href"] && (e["xlink:href"] = e["xlink:href"] + r.idSuffix), Object.entries(e).forEach(function(s) {
+    var a = s[0], o = s[1];
+    typeof o == "string" && (e[a] = o.replace(/url\(#(.*)\)/, "url(#$1".concat(r.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;
+function tr(i, r) {
+  var t, e = r.defIds;
+  return !e || e.length === 0 ? i : i.tag === "defs" && (!((t = i.children) === null || t === void 0) && t.length) ? $($({}, i), { children: i.children.map(function(n) {
+    return typeof n.attrs.id == "string" && e && e.indexOf(n.attrs.id) > -1 ? $($({}, n), { attrs: $($({}, n.attrs), { id: n.attrs.id + r.idSuffix }) }) : n;
   }) }) : i;
 }
-function ht() {
+function rr() {
   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, {
+q.displayName = "UniverIcon";
+var nr = { 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" } }] }, ft = X(function(i, r) {
+  return J(q, Object.assign({}, i, {
     id: "autofill",
-    ref: t,
-    icon: ft
+    ref: r,
+    icon: nr
   }));
 });
-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, {
+ft.displayName = "Autofill";
+var ir = { 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" } }] }, mt = X(function(i, r) {
+  return J(q, Object.assign({}, i, {
     id: "bottom-single",
-    ref: t,
-    icon: pt
+    ref: r,
+    icon: ir
   }));
 });
-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, {
+mt.displayName = "BottomSingle";
+var ar = { 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" } }] }, pt = X(function(i, r) {
+  return J(q, Object.assign({}, i, {
     id: "create-copy-single",
-    ref: t,
-    icon: Ct
+    ref: r,
+    icon: ar
   }));
 });
-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, {
+pt.displayName = "CreateCopySingle";
+var sr = { 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" } }] }, vt = X(function(i, r) {
+  return J(q, Object.assign({}, i, {
     id: "group-single",
-    ref: t,
-    icon: wt
+    ref: r,
+    icon: sr
   }));
 });
-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, {
+vt.displayName = "GroupSingle";
+var or = { 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" } }] }, wt = X(function(i, r) {
+  return J(q, Object.assign({}, i, {
     id: "more-down-single",
-    ref: t,
-    icon: vt
+    ref: r,
+    icon: or
   }));
 });
-_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, {
+wt.displayName = "MoreDownSingle";
+var cr = { 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" } }] }, _t = X(function(i, r) {
+  return J(q, Object.assign({}, i, {
     id: "move-down-single",
-    ref: t,
-    icon: _t
+    ref: r,
+    icon: cr
   }));
 });
-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, {
+_t.displayName = "MoveDownSingle";
+var lr = { 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" } }] }, Ct = X(function(i, r) {
+  return J(q, Object.assign({}, i, {
     id: "move-up-single",
-    ref: t,
-    icon: St
+    ref: r,
+    icon: lr
   }));
 });
-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, {
+Ct.displayName = "MoveUpSingle";
+var dr = { 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" } }] }, St = X(function(i, r) {
+  return J(q, Object.assign({}, i, {
     id: "topmost-single",
-    ref: t,
-    icon: bt
+    ref: r,
+    icon: dr
   }));
 });
-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, {
+St.displayName = "TopmostSingle";
+var ur = { 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" } }] }, bt = X(function(i, r) {
+  return J(q, Object.assign({}, i, {
     id: "ungroup-single",
-    ref: t,
-    icon: It
+    ref: r,
+    icon: ur
   }));
 });
-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);
+bt.displayName = "UngroupSingle";
+const U = "univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-between univer-gap-2 univer-flex-no-wrap", B = "univer-w-full univer-text-left univer-text-gray-400", ne = "univer-flex univer-items-center univer-gap-1", gr = (i) => {
+  const { arrangeShow: r, drawings: t } = i, e = k(ie), n = k(ae), s = (l) => l ? "block" : "none", [a, o] = L(t);
+  be(() => {
+    const l = n.focus$.subscribe((d) => {
+      o(d);
     });
     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 });
+    const d = a[0].unitId, u = a[0].subUnitId, h = a.map((f) => f.drawingId);
+    n.featurePluginOrderUpdateNotification({ unitId: d, subUnitId: u, 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, { 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, { 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, { 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, { 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,
+  return /* @__PURE__ */ P(
+    "div",
+    {
+      className: "univer-relative univer-mt-5 univer-w-full",
+      style: { display: s(r) },
+      children: [
+        /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: /* @__PURE__ */ g("div", { children: e.t("image-panel.arrange.title") }) }) }),
+        /* @__PURE__ */ P("div", { className: U, children: [
+          /* @__PURE__ */ g("div", { className: "univer-w-1/2", children: /* @__PURE__ */ g(ue, { onClick: () => {
+            c(Ie.forward);
+          }, children: /* @__PURE__ */ P("span", { className: ne, children: [
+            /* @__PURE__ */ g(Ct, {}),
+            e.t("image-panel.arrange.forward")
+          ] }) }) }),
+          /* @__PURE__ */ g("div", { className: "univer-w-1/2", children: /* @__PURE__ */ g(ue, { onClick: () => {
+            c(Ie.backward);
+          }, children: /* @__PURE__ */ P("span", { className: ne, children: [
+            /* @__PURE__ */ g(_t, {}),
+            e.t("image-panel.arrange.backward")
+          ] }) }) })
+        ] }),
+        /* @__PURE__ */ P("div", { className: U, children: [
+          /* @__PURE__ */ g("div", { className: "univer-w-1/2", children: /* @__PURE__ */ g(ue, { onClick: () => {
+            c(Ie.front);
+          }, children: /* @__PURE__ */ P("span", { className: ne, children: [
+            /* @__PURE__ */ g(St, {}),
+            e.t("image-panel.arrange.front")
+          ] }) }) }),
+          /* @__PURE__ */ g("div", { className: "univer-w-1/2", children: /* @__PURE__ */ g(ue, { onClick: () => {
+            c(Ie.back);
+          }, children: /* @__PURE__ */ P("span", { className: ne, children: [
+            /* @__PURE__ */ g(mt, {}),
+            e.t("image-panel.arrange.back")
+          ] }) }) })
+        ] })
+      ]
+    }
+  );
+}, hr = (i) => {
+  const r = k(ie), t = k(me), e = k(ae), { hasGroup: n, drawings: s } = i, [a, o] = L(!1), [c, l] = L(!0), [d, u] = L(!0), h = (m) => m ? "block" : "none", f = () => {
+    const m = e.getFocusDrawings(), { unitId: C, subUnitId: _ } = m[0], R = Et.generateRandomId(10), b = Ht(0, 0, m.map((S) => S.transform || {})), N = {
+      unitId: C,
       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;
+      drawingId: R,
+      drawingType: re.DRAWING_GROUP,
+      transform: b
+    }, I = m.map((S) => {
+      const y = S.transform || { left: 0, top: 0 }, { unitId: M, subUnitId: O, drawingId: j } = S;
       return {
-        unitId: R,
+        unitId: M,
         subUnitId: O,
-        drawingId: U,
+        drawingId: j,
         transform: {
           ...y,
-          left: y.left - I.left,
-          top: y.top - I.top
+          left: y.left - b.left,
+          top: y.top - b.top
         },
-        groupId: M
+        groupId: R
       };
     });
     e.featurePluginGroupUpdateNotification([{
       parent: N,
-      children: P
+      children: I
     }]);
-  }, v = (p) => {
-    if (p.drawingType !== ne.DRAWING_GROUP)
+  }, w = (m) => {
+    if (m.drawingType !== re.DRAWING_GROUP)
       return;
-    const { unitId: S, subUnitId: _, drawingId: M, transform: I = { width: 0, height: 0 } } = p;
-    if (I == null)
+    const { unitId: C, subUnitId: _, drawingId: R, transform: b = { width: 0, height: 0 } } = m;
+    if (b == null)
       return;
-    const N = e.getDrawingsByGroup({ unitId: S, subUnitId: _, drawingId: M });
+    const N = e.getDrawingsByGroup({ unitId: C, subUnitId: _, drawingId: R });
     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);
+    const I = N.map((S) => {
+      const { transform: y } = S, { unitId: M, subUnitId: O, drawingId: j } = S, T = At(y || {}, b, b.width || 0, b.height || 0);
       return {
-        unitId: R,
+        unitId: M,
         subUnitId: O,
-        drawingId: U,
+        drawingId: j,
         transform: {
           ...y,
           ...T
@@ -490,388 +496,402 @@ const yt = (i) => {
       };
     });
     return {
-      parent: p,
-      children: P
+      parent: m,
+      children: I
     };
-  }, w = () => {
-    const S = e.getFocusDrawings().map(
-      (_) => v(_)
+  }, v = () => {
+    const C = e.getFocusDrawings().map(
+      (_) => w(_)
     ).filter((_) => _ != null);
-    S.length !== 0 && e.featurePluginUngroupUpdateNotification(S);
+    C.length !== 0 && e.featurePluginUngroupUpdateNotification(C);
   };
-  return _e(() => {
-    const p = o[0];
-    if (p == null)
+  return be(() => {
+    const m = s[0];
+    if (m == null)
       return;
-    const { unitId: S } = p, _ = n.getRenderById(S), M = _ == null ? void 0 : _.scene;
-    if (M == null)
+    const { unitId: C } = m, _ = t.getRenderById(C), R = _ == null ? void 0 : _.scene;
+    if (R == 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);
+    const b = R.getTransformerByCreate(), N = b.clearControl$.subscribe((S) => {
+      S === !0 && o(!1);
+    }), I = b.changeStart$.subscribe((S) => {
+      const { objects: y } = S, M = We(y, e), O = M.filter((G) => (G == null ? void 0 : G.drawingType) === re.DRAWING_GROUP);
+      let j = !1, T = !1;
+      M.length > 1 && (j = !0), O.length > 0 && (T = !0), o(j || T), l(j), u(T);
     });
     return () => {
-      P.unsubscribe(), N.unsubscribe();
+      I.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, { style: { display: h(c) }, onClick: f, children: /* @__PURE__ */ j("span", { className: g.imageCommonPanelInline, children: [
-        /* @__PURE__ */ u(vn, {}),
-        t.t("image-panel.group.group")
+  }, []), /* @__PURE__ */ P("div", { className: "univer-relative univer-mt-5 univer-w-full", style: { display: h(n === !0 ? a : !1) }, children: [
+    /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: /* @__PURE__ */ g("div", { children: r.t("image-panel.group.title") }) }) }),
+    /* @__PURE__ */ P("div", { className: U, children: [
+      /* @__PURE__ */ g("div", { className: Y(ne, "univer-justify-center"), children: /* @__PURE__ */ g(ue, { style: { display: h(c) }, onClick: f, children: /* @__PURE__ */ P("span", { className: "univer-flex univer-items-center univer-gap-1", children: [
+        /* @__PURE__ */ g(vt, {}),
+        r.t("image-panel.group.group")
       ] }) }) }),
-      /* @__PURE__ */ u("div", { className: B(g.imageCommonPanelColumn, g.imageCommonPanelSpan2, g.imageCommonPanelColumnCenter), children: /* @__PURE__ */ u(le, { style: { display: h(m) }, onClick: w, children: /* @__PURE__ */ j("span", { className: g.imageCommonPanelInline, children: [
-        /* @__PURE__ */ u(yn, {}),
-        t.t("image-panel.group.unGroup")
+      /* @__PURE__ */ g("div", { className: Y(ne, "univer-justify-center"), children: /* @__PURE__ */ g(ue, { style: { display: h(d) }, onClick: v, children: /* @__PURE__ */ P("span", { className: "univer-flex univer-items-center univer-gap-1", children: [
+        /* @__PURE__ */ g(bt, {}),
+        r.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];
+}, le = 20, fr = 20, mr = [-3600, 3600], Oe = 300, pr = (i) => {
+  var Je;
+  const r = k(ie), t = k(ae), e = k(me), { drawings: n, transformShow: s } = i, a = n[0];
   if (a == null)
     return;
-  const s = a.transform;
-  if (s == null)
+  const o = a.transform;
+  if (o == null)
     return;
-  const { unitId: c, subUnitId: l, drawingId: m, drawingType: d } = a, h = e.getRenderById(c), f = h == null ? void 0 : h.scene;
+  const { unitId: c, subUnitId: l, drawingId: d, drawingType: u } = 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)
+  const w = (Je = f.getEngine()) == null ? void 0 : Je.activeScene;
+  if (w == null)
     return;
-  const w = f.getTransformerByCreate(), {
-    width: p = 0,
-    height: S = 0,
+  const v = f.getTransformerByCreate(), {
+    width: m = 0,
+    height: C = 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
+    top: R = 0,
+    angle: b = 0
+  } = o, [N, I] = L(m), [S, y] = L(C), [M, O] = L(_), [j, T] = L(R), [se, G] = L(b), [Q, ye] = L(v.keepRatio), oe = (p, E, A, V) => {
+    const { width: H, height: ee } = w, { ancestorLeft: F, ancestorTop: K } = f;
+    let Z = p, ce = E, pe = A, ve = V;
+    return p + F < 0 && (Z = -F), E + K < 0 && (ce = -K), pe = H - Z - F, pe < le && (pe = le), ve = ee - ce - K, ve < le && (ve = le), p + pe + F > H && (Z = H - A - F), E + ve + K > ee && (ce = ee - V - K), {
+      limitLeft: Z,
+      limitTop: ce,
+      limitWidth: pe,
+      limitHeight: ve
     };
-  }, z = (C) => {
-    const { objects: E } = C, L = Ve(E, n);
-    if (L.length !== 1)
+  }, z = (p) => {
+    const { objects: E } = p, A = We(E, t);
+    if (A.length !== 1)
       return;
-    const k = L[0];
-    if (k == null)
+    const V = A[0];
+    if (V == null)
       return;
-    const { transform: H } = k;
+    const { transform: H } = V;
     if (H == null)
       return;
     const {
-      width: Q,
+      width: ee,
       height: F,
       left: K,
-      top: Y,
-      angle: oe
+      top: Z,
+      angle: ce
     } = H;
-    Q != null && P(Q), F != null && y(F), K != null && O(K), Y != null && T(Y), oe != null && W(oe);
+    ee != null && I(ee), F != null && y(F), K != null && O(K), Z != null && T(Z), ce != null && G(ce);
   };
-  _e(() => {
-    const C = [
-      w.changeStart$.subscribe((E) => {
+  be(() => {
+    const p = [
+      v.changeStart$.subscribe((E) => {
         z(E);
       }),
-      w.changing$.subscribe((E) => {
+      v.changing$.subscribe((E) => {
         z(E);
       }),
-      w.changeEnd$.subscribe((E) => {
+      v.changeEnd$.subscribe((E) => {
         z(E);
       }),
-      n.focus$.subscribe((E) => {
+      t.focus$.subscribe((E) => {
         if (E.length !== 1)
           return;
-        const L = n.getDrawingByParam(E[0]);
-        if (L == null)
+        const A = t.getDrawingByParam(E[0]);
+        if (A == null)
           return;
-        const k = L.transform;
-        if (k == null)
+        const V = A.transform;
+        if (V == null)
           return;
         const {
           width: H,
-          height: Q,
+          height: ee,
           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);
+          angle: Z
+        } = V;
+        H != null && I(H), ee != null && y(ee), F != null && O(F), K != null && T(K), Z != null && G(Z);
       })
     ];
     return () => {
-      C.forEach((E) => E.unsubscribe());
+      p.forEach((E) => E.unsubscribe());
     };
   }, []);
-  const ke = Ie((C) => {
-    if (C == null)
+  const Ge = Me((p) => {
+    if (p == 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)
+    p = Math.max(p, le);
+    const { limitWidth: E, limitHeight: A } = oe(M, j, p, S);
+    p = Math.min(p, E);
+    const V = { unitId: c, subUnitId: l, drawingId: d, drawingType: u, transform: { width: p } };
+    if (Q) {
+      let H = p / N * S;
+      if (H = Math.max(H, fr), H > A)
         return;
-      y(H), k.transform.height = H;
+      y(H), V.transform.height = H;
     }
-    P(C), n.featurePluginUpdateNotification([k]), w.refreshControls().changeNotification();
-  }, Pe), Rn = Ie((C) => {
-    if (C == null)
+    I(p), t.featurePluginUpdateNotification([V]), v.refreshControls().changeNotification();
+  }, Oe), It = Me((p) => {
+    if (p == 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)
+    p = Math.max(p, le);
+    const { limitHeight: E, limitWidth: A } = oe(M, j, N, p);
+    p = Math.min(p, E);
+    const V = { unitId: c, subUnitId: l, drawingId: d, drawingType: u, transform: { height: p } };
+    if (Q) {
+      let H = p / S * N;
+      if (H = Math.max(H, le), H > A)
         return;
-      P(H), k.transform.width = H;
+      I(H), V.transform.width = H;
     }
-    y(C), n.featurePluginUpdateNotification([k]), w.refreshControls().changeNotification();
-  }, Pe), Mn = Ie((C) => {
-    if (C == null)
+    y(p), t.featurePluginUpdateNotification([V]), v.refreshControls().changeNotification();
+  }, Oe), Mt = Me((p) => {
+    if (p == 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)
+    const { limitLeft: E } = oe(p, j, N, S);
+    p = E;
+    const A = { unitId: c, subUnitId: l, drawingId: d, drawingType: u, transform: { left: p } };
+    O(p), t.featurePluginUpdateNotification([A]), v.refreshControls().changeNotification();
+  }, Oe), Rt = Me((p) => {
+    if (p == 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)
+    const { limitTop: E } = oe(M, p, N, S);
+    p = E;
+    const A = { unitId: c, subUnitId: l, drawingId: d, drawingType: u, transform: { top: p } };
+    T(p), t.featurePluginUpdateNotification([A]), v.refreshControls().changeNotification();
+  }, Oe), Ot = (p) => {
+    if (p == 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 = {
+    const [E, A] = mr;
+    p < E && (p = E), p > A && (p = A);
+    const V = { unitId: c, subUnitId: l, drawingId: d, drawingType: u, transform: { angle: p } };
+    G(p), t.featurePluginUpdateNotification([V]), v.refreshControls().changeNotification();
+  }, Nt = (p) => {
+    ye(p), v.keepRatio = p;
+  };
+  return /* @__PURE__ */ P(
+    "div",
+    {
+      className: `
+              univer-relative univer-mt-5 univer-w-full univer-border-b-0 univer-border-l-0 univer-border-r-0
+              univer-border-t univer-border-solid univer-border-t-gray-200
+            `,
+      style: { display: ((p) => p ? "block" : "none")(s) },
+      children: [
+        /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: Y(B), children: /* @__PURE__ */ g("div", { children: r.t("image-panel.transform.title") }) }) }),
+        /* @__PURE__ */ P("div", { className: U, children: [
+          /* @__PURE__ */ g("div", { className: Y(B), children: /* @__PURE__ */ P("label", { children: [
+            /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: r.t("image-panel.transform.width") }) }),
+            /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: /* @__PURE__ */ g(we, { precision: 1, value: N, onChange: (p) => {
+              Ge(p);
+            } }) }) })
+          ] }) }),
+          /* @__PURE__ */ g("div", { className: Y(B), children: /* @__PURE__ */ P("label", { children: [
+            /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: r.t("image-panel.transform.height") }) }),
+            /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: /* @__PURE__ */ g(we, { precision: 1, value: S, onChange: (p) => {
+              It(p);
+            } }) }) })
+          ] }) }),
+          /* @__PURE__ */ g("div", { className: Y(B), children: /* @__PURE__ */ P("label", { children: [
+            /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: r.t("image-panel.transform.lock") }) }),
+            /* @__PURE__ */ g("div", { className: Y(U, "univer-h-9 univer-items-center univer-justify-center"), children: /* @__PURE__ */ g("div", { className: B, children: /* @__PURE__ */ g(Ft, { checked: Q, onChange: Nt }) }) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ P("div", { className: U, children: [
+          /* @__PURE__ */ g("div", { className: Y(B), children: /* @__PURE__ */ P("label", { children: [
+            /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: r.t("image-panel.transform.x") }) }),
+            /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: /* @__PURE__ */ g(we, { precision: 1, value: M, onChange: (p) => {
+              Mt(p);
+            } }) }) })
+          ] }) }),
+          /* @__PURE__ */ g("div", { className: Y(B), children: /* @__PURE__ */ P("label", { children: [
+            /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: r.t("image-panel.transform.y") }) }),
+            /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: /* @__PURE__ */ g(we, { precision: 1, value: j, onChange: (p) => {
+              Rt(p);
+            } }) }) })
+          ] }) }),
+          /* @__PURE__ */ g("div", { className: Y(B), children: /* @__PURE__ */ P("label", { children: [
+            /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: r.t("image-panel.transform.rotate") }) }),
+            /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: /* @__PURE__ */ g(we, { precision: 1, value: se, onChange: Ot }) }) })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}, Ye = {
   id: "sheet.operation.open-image-crop",
-  type: ve.OPERATION,
-  handler: (i, t) => !0
+  type: Se.OPERATION,
+  handler: (i, r) => !0
 }, ge = {
   id: "sheet.operation.close-image-crop",
-  type: ve.OPERATION,
-  handler: (i, t) => !0
+  type: Se.OPERATION,
+  handler: (i, r) => !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 = {
+var x = /* @__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))(x || {});
+const Ue = {
   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;
+  type: Se.OPERATION,
+  handler: (i, r) => !0
+}, vr = (i) => {
+  const r = k(he), t = k(ie), { drawings: e, cropperShow: n } = i;
   if (e[0] == null)
     return;
-  const [a, s] = x(A.FREE), c = mn(!1), l = [
+  const [a, o] = L(x.FREE), c = dt(!1), l = [
     {
-      label: n.t("image-panel.crop.mode"),
-      value: A.FREE
+      label: t.t("image-panel.crop.mode"),
+      value: x.FREE
     },
     {
       label: "1:1",
-      value: A.R1_1
+      value: x.R1_1
     },
     {
       label: "16:9",
-      value: A.R16_9
+      value: x.R16_9
     },
     {
       label: "9:16",
-      value: A.R9_16
+      value: x.R9_16
     },
     {
       label: "5:4",
-      value: A.R5_4
+      value: x.R5_4
     },
     {
       label: "4:5",
-      value: A.R4_5
+      value: x.R4_5
     },
     {
       label: "4:3",
-      value: A.R4_3
+      value: x.R4_3
     },
     {
       label: "3:4",
-      value: A.R3_4
+      value: x.R3_4
     },
     {
       label: "3:2",
-      value: A.R3_2
+      value: x.R3_2
     },
     {
       label: "2:3",
-      value: A.R2_3
+      value: x.R2_3
     }
   ];
-  _e(() => {
-    const f = t.onCommandExecuted((v) => {
-      if (v.id === ge.id) {
-        const w = v.params;
-        w != null && w.isAuto || (c.current = !1);
+  be(() => {
+    const f = r.onCommandExecuted((w) => {
+      if (w.id === ge.id) {
+        const v = w.params;
+        v != null && v.isAuto || (c.current = !1);
       }
     });
     return () => {
       f == null || f.dispose();
     };
   }, []);
-  function m(f) {
-    s(f), c.current && t.executeCommand(Be.id, {
+  function d(f) {
+    o(f), c.current && r.executeCommand(Ue.id, {
       cropType: f
     });
   }
-  const d = (f) => f ? "block" : "none", h = (f) => {
-    t.executeCommand(Be.id, {
+  const u = (f) => f ? "block" : "none", h = (f) => {
+    r.executeCommand(Ue.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, { 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 /* @__PURE__ */ P(
+    "div",
+    {
+      className: `
+              univer-relative univer-mt-5 univer-w-full univer-border-b-0 univer-border-l-0 univer-border-r-0
+              univer-border-t univer-border-solid univer-border-t-gray-200
+            `,
+      style: { display: u(n) },
+      children: [
+        /* @__PURE__ */ g("div", { className: U, children: /* @__PURE__ */ g("div", { className: B, children: /* @__PURE__ */ g("div", { children: t.t("image-panel.crop.title") }) }) }),
+        /* @__PURE__ */ P("div", { className: U, children: [
+          /* @__PURE__ */ g("div", { className: ne, children: /* @__PURE__ */ g(ue, { onClick: () => {
+            h(a);
+          }, children: /* @__PURE__ */ P("span", { className: "univer-flex univer-items-center univer-gap-1", children: [
+            /* @__PURE__ */ g(pt, {}),
+            t.t("image-panel.crop.start")
+          ] }) }) }),
+          /* @__PURE__ */ g("div", { className: ne, children: /* @__PURE__ */ g(ut, { value: a, options: l, onChange: d }) })
+        ] })
+      ]
+    }
+  );
+}, Wr = (i) => {
+  const r = k(ae), t = k(me), e = k(ie), { drawings: n, hasArrange: s = !0, hasTransform: a = !0, hasAlign: o = !0, hasCropper: c = !0, hasGroup: l = !0 } = i, d = n[0];
+  if (d == null)
     return;
-  const { unitId: d } = m, h = n.getRenderById(d), f = h == null ? void 0 : h.scene;
+  const { unitId: u } = d, h = t.getRenderById(u), 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));
+  const w = f.getTransformerByCreate(), [v, m] = L(!0), [C, _] = L(!0), [R, b] = L(!1), [N, I] = L(!0), [S, y] = L(!1);
+  return be(() => {
+    const M = w.clearControl$.subscribe((T) => {
+      T === !0 && (m(!1), _(!1), b(!1), I(!1), y(!0));
+    }), O = w.changeStart$.subscribe((T) => {
+      const { objects: se } = T, G = We(se, r);
+      G.length === 0 ? (m(!1), _(!1), b(!1), I(!1), y(!0)) : G.length === 1 ? (m(!0), _(!0), b(!1), I(!0), y(!1)) : (m(!0), _(!1), b(!0), I(!1), y(!1));
+    }), j = r.focus$.subscribe((T) => {
+      T.length === 0 ? (m(!1), _(!1), b(!1), I(!1), y(!0)) : T.length === 1 ? (m(!0), _(!0), b(!1), I(!0), y(!1)) : (m(!0), _(!1), b(!0), I(!1), y(!1));
     });
     return () => {
-      O.unsubscribe(), R.unsubscribe(), U.unsubscribe();
+      O.unsubscribe(), M.unsubscribe(), j.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 })
+  }, []), /* @__PURE__ */ P(zt, { children: [
+    /* @__PURE__ */ g("div", { style: { display: S === !0 ? "block" : "none", height: "100%" }, children: /* @__PURE__ */ g("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", top: "50%", marginTop: "-100px" }, children: /* @__PURE__ */ g("span", { children: e.t("image-panel.null") }) }) }),
+    /* @__PURE__ */ g(gr, { arrangeShow: s === !0 ? v : !1, drawings: n }),
+    /* @__PURE__ */ g(pr, { transformShow: a === !0 ? C : !1, drawings: n }),
+    /* @__PURE__ */ g(qt, { alignShow: o === !0 ? R : !1, drawings: n }),
+    /* @__PURE__ */ g(vr, { cropperShow: c === !0 ? N : !1, drawings: n }),
+    /* @__PURE__ */ g(hr, { hasGroup: l, drawings: n })
   ] });
-}, 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 = () => {
+}, wr = (i) => {
+  var v;
+  const { popup: r } = i, t = (v = r == null ? void 0 : r.extraProps) == null ? void 0 : v.menuItems;
+  if (!t) return null;
+  const e = k(he), n = k(ie), [s, a] = L(!1), [o, c] = L(!1), l = () => {
     c(!0);
-  }, m = () => {
+  }, d = () => {
     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(
+  }, u = (m) => {
+    a(m);
+  }, h = (m) => {
+    e.executeCommand(m.commandId, m.commandParams), a(!1);
+  }, f = s || o, w = t.filter((m) => !m.disable);
+  return /* @__PURE__ */ g(
     "div",
     {
       onMouseEnter: l,
-      onMouseLeave: m,
-      children: /* @__PURE__ */ u(
-        Yn,
+      onMouseLeave: d,
+      children: /* @__PURE__ */ g(
+        Kt,
         {
           align: "start",
-          items: v.map((p) => ({
+          items: w.map((m) => ({
             type: "item",
-            children: r.t(p.label),
-            onSelect: () => h(p)
+            children: n.t(m.label),
+            onSelect: () => h(m)
           })),
-          open: o,
-          onOpenChange: d,
-          children: /* @__PURE__ */ j(
+          open: s,
+          onOpenChange: u,
+          children: /* @__PURE__ */ P(
             "div",
             {
-              className: B(`
+              className: Y(`
                       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
+                "univer-bg-gray-100": s,
+                "univer-bg-white": !s
               }),
               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" })
+                /* @__PURE__ */ g(ft, { className: "univer-fill-primary-600 univer-text-gray-900" }),
+                f && /* @__PURE__ */ g(wt, {})
               ]
             }
           )
@@ -879,54 +899,51 @@ const Be = {
       )
     }
   );
-}, Tt = "COMPONENT_IMAGE_POPUP_MENU", Et = "drawing-ui.config", tn = {}, Pn = {
+}, _r = "COMPONENT_IMAGE_POPUP_MENU", Cr = "drawing-ui.config", nt = {}, yt = {
   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;
+  type: Se.OPERATION,
+  handler: (i, r) => !0
 };
-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();
+var Sr = Object.getOwnPropertyDescriptor, br = (i, r, t, e) => {
+  for (var n = e > 1 ? void 0 : e ? Sr(r, t) : r, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (n = a(n) || n);
+  return n;
+}, it = (i, r) => (t, e) => r(t, e, i);
+let xe = class extends Ve {
+  constructor(i, r) {
+    super(), this._componentManager = i, this._commandService = r, this._init();
   }
   _initCustomComponents() {
     const i = this._componentManager;
-    this.disposeWithMe(i.register(Tt, Dt)), this.disposeWithMe(i.register(hn, Bt));
+    this.disposeWithMe(i.register(_r, wr));
   }
   _initCommands() {
     [
-      Fe,
-      ge,
-      Pn,
       Ye,
-      Be
+      ge,
+      yt,
+      Xe,
+      Ue
     ].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) {
+xe = br([
+  it(0, ke(Wt)),
+  it(1, he)
+], xe);
+var yr = Object.getOwnPropertyDescriptor, Ir = (i, r, t, e) => {
+  for (var n = e > 1 ? void 0 : e ? yr(r, t) : r, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (n = a(n) || n);
+  return n;
+}, Ne = (i, r) => (t, e) => r(t, e, i);
+let He = class extends Ve {
+  constructor(r, t, e, n) {
     super();
-    ee(this, "_sceneListenerOnDrawingMap", /* @__PURE__ */ new WeakSet());
-    this._currentUniverService = t, this._commandService = n, this._renderManagerService = e, this._drawingManagerService = r, this._initialize();
+    te(this, "_sceneListenerOnDrawingMap", /* @__PURE__ */ new WeakSet());
+    this._currentUniverService = r, this._commandService = t, this._renderManagerService = e, this._drawingManagerService = n, this._initialize();
   }
   dispose() {
     super.dispose();
@@ -935,39 +952,39 @@ let Ue = class extends xe {
     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)
+    const r = this._drawingManagerService.drawingManagerData, t = gt(this._currentUniverService);
+    if (t == 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 }]);
+    const { unitId: e, subUnitId: n } = t;
+    Object.keys(r).forEach((s) => {
+      Object.keys(r[s]).forEach((a) => {
+        const o = r[s][a].data;
+        o == null || s !== e || a !== n || Object.keys(o).forEach((c) => {
+          o[c] && this._insertDrawing([{ unitId: s, subUnitId: a, drawingId: c }]);
         });
       });
     });
   }
   _commandExecutedListener() {
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((t) => {
-        if (t.id === Ye.id) {
-          const n = t.params;
-          if (n == null)
+      this._commandService.onCommandExecuted((r) => {
+        if (r.id === Xe.id) {
+          const t = r.params;
+          if (t == null)
             return;
-          this._drawingAlign(n);
+          this._drawingAlign(t);
         }
       })
     );
   }
   _drawingGroupListener() {
     this.disposeWithMe(
-      this._drawingManagerService.group$.subscribe((t) => {
-        this._groupDrawings(t);
+      this._drawingManagerService.group$.subscribe((r) => {
+        this._groupDrawings(r);
       })
     ), this.disposeWithMe(
-      this._drawingManagerService.ungroup$.subscribe((t) => {
-        this._ungroupDrawings(t);
+      this._drawingManagerService.ungroup$.subscribe((r) => {
+        this._ungroupDrawings(r);
       })
     );
   }
@@ -991,38 +1008,38 @@ let Ue = class extends xe {
   //             break;
   //     }
   // }
-  _getSceneAndTransformerByDrawingSearch(t) {
-    if (t == null)
+  _getSceneAndTransformerByDrawingSearch(r) {
+    if (r == null)
       return;
-    const n = this._renderManagerService.getRenderById(t), e = n == null ? void 0 : n.scene;
+    const t = this._renderManagerService.getRenderById(r), e = t == null ? void 0 : t.scene;
     if (e == null)
       return null;
-    const r = e.getTransformerByCreate();
-    return { scene: e, transformer: r };
+    const n = e.getTransformerByCreate();
+    return { scene: e, transformer: n };
   }
-  _groupDrawings(t) {
-    t.forEach((n) => {
-      this._groupDrawing(n);
+  _groupDrawings(r) {
+    r.forEach((t) => {
+      this._groupDrawing(t);
     });
   }
-  _groupDrawing(t) {
-    const { parent: n, children: e } = t, { unitId: r, subUnitId: o, drawingId: a } = n, s = this._getSceneAndTransformerByDrawingSearch(n.unitId);
-    if (s == null)
+  _groupDrawing(r) {
+    const { parent: t, children: e } = r, { unitId: n, subUnitId: s, drawingId: a } = t, o = this._getSceneAndTransformerByDrawingSearch(t.unitId);
+    if (o == null)
       return;
-    const { scene: c, transformer: l } = s;
+    const { scene: c, transformer: l } = o;
     this._commandService.syncExecuteCommand(ge.id);
-    const m = [];
+    const d = [];
     if (e.forEach((f) => {
-      const v = G(f), w = c.getObjectIncludeInGroup(v);
-      if (w == null || m.includes(w))
+      const w = W(f), v = c.getObjectIncludeInGroup(w);
+      if (v == null || d.includes(v))
         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)
+      d.push(v);
+      const { transform: m } = f;
+      m != null && (v.classType === Qe.GROUP ? v.transformByState({ left: m.left, top: m.top }) : v.transformByState(m));
+    }), d.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);
+    const u = W({ unitId: n, subUnitId: s, drawingId: a }), h = new Ce(u);
+    c.addObject(h, Pe).attachTransformerTo(h), h.addObjects(...d), t.transform && h.transformByState({ left: t.transform.left, top: t.transform.top }), l.clearSelectedObjects(), l.setSelectedControl(h);
   }
   // private _regroupDrawings(drawings: IDrawingSearch[]) {
   //     const renderObject = this._getSceneAndTransformerByDrawingSearch(drawings[0].unitId);
@@ -1058,127 +1075,127 @@ let Ue = class extends xe {
   //     transformer.clearSelectedObjects();
   //     transformer.setSelectedControl(firstGroup);
   // }
-  _ungroupDrawings(t) {
-    t.forEach((n) => {
-      this._ungroupDrawing(n);
+  _ungroupDrawings(r) {
+    r.forEach((t) => {
+      this._ungroupDrawing(t);
     });
   }
-  _ungroupDrawing(t) {
-    const { parent: n, children: e } = t, r = this._getSceneAndTransformerByDrawingSearch(n.unitId);
-    if (r == null)
+  _ungroupDrawing(r) {
+    const { parent: t, children: e } = r, n = this._getSceneAndTransformerByDrawingSearch(t.unitId);
+    if (n == null)
       return;
-    const { scene: o, transformer: a } = r;
-    e.forEach((d) => {
-      const h = G(d), f = o.getObjectIncludeInGroup(h);
+    const { scene: s, transformer: a } = n;
+    e.forEach((u) => {
+      const h = W(u), f = s.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 { transform: w } = u;
+      w != null && (f.classType === Qe.GROUP ? f.transformByState({ left: w.left, top: w.top }) : f.transformByState(w));
     });
-    const s = G(n), c = o.getObject(s), { width: l, height: m } = c;
-    c.getObjects().forEach((d) => {
-      c.removeSelfObjectAndTransform(d.oKey, l, m);
+    const o = W(t), c = s.getObject(o), { width: l, height: d } = c;
+    c.getObjects().forEach((u) => {
+      c.removeSelfObjectAndTransform(u.oKey, l, d);
     }), c.dispose(), a.clearSelectedObjects();
   }
-  _drawingAlign(t) {
-    const { alignType: n } = t, e = this._drawingManagerService.getFocusDrawings();
-    if (n === D.default)
+  _drawingAlign(r) {
+    const { alignType: t } = r, e = this._drawingManagerService.getFocusDrawings();
+    if (t === 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)
+    const n = [];
+    let s = Number.POSITIVE_INFINITY, a = Number.POSITIVE_INFINITY, o = Number.NEGATIVE_INFINITY, c = Number.NEGATIVE_INFINITY, l = 0;
+    e.forEach((d) => {
+      const { unitId: u, subUnitId: h, drawingId: f, drawingType: w } = d, v = this._drawingManagerService.getDrawingByParam({ unitId: u, subUnitId: h, drawingId: f });
+      if (v == null || v.transform == null)
         return;
-      r.push({
-        unitId: d,
+      n.push({
+        unitId: u,
         subUnitId: h,
         drawingId: f,
-        drawingType: v,
-        transform: w.transform
+        drawingType: w,
+        transform: v.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));
+      const { left: m = 0, top: C = 0, width: _ = 0, height: R = 0 } = v.transform;
+      s = Math.min(s, m), a = Math.min(a, C), o = Math.max(o, m + _), c = Math.max(c, C + R), l++;
+    }), l !== 0 && (this._sortDrawingTransform(n, t), this._applyAlignType(n, t, s, a, o, 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)
+  _applyAlignType(r, t, e, n, s, a, o) {
+    const c = Math.round((s - e) / o * 10) / 10, l = Math.round((a - n) / o * 10) / 10, d = [], u = this._getSceneAndTransformerByDrawingSearch(r[0].unitId);
+    if (u == 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) {
+    const { scene: h, transformer: f } = u;
+    r.forEach((w, v) => {
+      const { unitId: m, subUnitId: C, drawingId: _, transform: R, drawingType: b } = w, { left: N = 0, top: I = 0, width: S = 0, height: y = 0 } = R;
+      let M = N, O = I;
+      switch (t) {
         case D.left:
-          R = e;
+          M = e;
           break;
         case D.center:
-          R = e + (o - e) / 2 - b / 2;
+          M = e + (s - e) / 2 - S / 2;
           break;
         case D.right:
-          R = o - b;
+          M = s - S;
           break;
         case D.top:
-          O = r;
+          O = n;
           break;
         case D.middle:
-          O = r + (a - r) / 2 - y / 2;
+          O = n + (a - n) / 2 - y / 2;
           break;
         case D.bottom:
           O = a - y;
           break;
         case D.horizon:
-          R = e + c * w;
+          M = e + c * v;
           break;
         case D.vertical:
-          O = r + l * w;
+          O = n + l * v;
           break;
       }
-      (R !== N || O !== P) && m.push({
-        unitId: p,
-        subUnitId: S,
+      (M !== N || O !== I) && d.push({
+        unitId: m,
+        subUnitId: C,
         drawingId: _,
-        drawingType: I,
+        drawingType: b,
         transform: {
-          left: R,
+          left: M,
           top: O
         }
       });
-    }), this._drawingManagerService.featurePluginUpdateNotification(m), f.refreshControls().changeNotification();
+    }), this._drawingManagerService.featurePluginUpdateNotification(d), f.refreshControls().changeNotification();
   }
-  _sortDrawingTransform(t, n) {
-    t.sort((e, r) => {
-      const o = e.transform, a = r.transform, {
-        left: s = 0,
+  _sortDrawingTransform(r, t) {
+    r.sort((e, n) => {
+      const s = e.transform, a = n.transform, {
+        left: o = 0,
         top: c = 0,
         width: l = 0,
-        height: m = 0
-      } = o, {
-        left: d = 0,
+        height: d = 0
+      } = s, {
+        left: u = 0,
         top: h = 0,
         width: f = 0,
-        height: v = 0
+        height: w = 0
       } = a;
-      switch (n) {
+      switch (t) {
         case D.left:
-          return s - d;
+          return o - u;
         case D.center:
-          return s + l / 2 - (d + f / 2);
+          return o + l / 2 - (u + f / 2);
         case D.right:
-          return s + l - (d + f);
+          return o + l - (u + f);
         case D.top:
           return c - h;
         case D.middle:
-          return c + m / 2 - (h + v / 2);
+          return c + d / 2 - (h + w / 2);
         case D.bottom:
-          return c + m - (h + v);
+          return c + d - (h + w);
         case D.horizon:
-          return s + l / 2 - (d + f / 2);
+          return o + l / 2 - (u + f / 2);
         case D.vertical:
-          return c + m / 2 - (h + v / 2);
+          return c + d / 2 - (h + w / 2);
         default:
           return 0;
       }
@@ -1186,60 +1203,60 @@ let Ue = class extends xe {
   }
   _drawingArrangeListener() {
     this.disposeWithMe(
-      this._drawingManagerService.order$.subscribe((t) => {
-        this._drawingArrange(t);
+      this._drawingManagerService.order$.subscribe((r) => {
+        this._drawingArrange(r);
       })
     );
   }
-  _drawingArrange(t) {
-    const { unitId: n, subUnitId: e, drawingIds: r } = t, o = this._getSceneAndTransformerByDrawingSearch(n);
-    if (o == null)
+  _drawingArrange(r) {
+    const { unitId: t, subUnitId: e, drawingIds: n } = r, s = this._getSceneAndTransformerByDrawingSearch(t);
+    if (s == null)
       return;
-    const { scene: a } = o;
-    r.forEach((s) => {
-      const c = G({ unitId: n, subUnitId: e, drawingId: s }), l = a.fuzzyMathObjects(c, !0);
+    const { scene: a } = s;
+    n.forEach((o) => {
+      const c = W({ unitId: t, subUnitId: e, drawingId: o }), 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();
+      const d = this._drawingManagerService.getDrawingOrder(t, e).indexOf(o);
+      for (const u of l)
+        u.setProps({ zIndex: d }), u.makeDirty();
     });
   }
   _drawingAddListener() {
     this.disposeWithMe(
-      this._drawingManagerService.add$.subscribe((t) => {
-        this._insertDrawing(t);
+      this._drawingManagerService.add$.subscribe((r) => {
+        this._insertDrawing(r);
       })
     );
   }
-  _insertDrawing(t) {
-    const n = [];
-    t.forEach((e) => {
-      const { unitId: r } = e;
+  _insertDrawing(r) {
+    const t = [];
+    r.forEach((e) => {
+      const { unitId: n } = e;
       if (this._drawingManagerService.getDrawingByParam(e) == null)
         return;
-      const a = this._getSceneAndTransformerByDrawingSearch(r);
+      const a = this._getSceneAndTransformerByDrawingSearch(n);
       if (a == null)
         return;
-      const { scene: s } = a;
-      n.includes(s) || n.push(s);
-    }), n.forEach((e) => {
+      const { scene: o } = a;
+      t.includes(o) || t.push(o);
+    }), t.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);
+      this._drawingManagerService.remove$.subscribe((r) => {
+        r.forEach((t) => {
+          var d;
+          const { unitId: e, subUnitId: n, drawingId: s } = t, 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);
+          const { scene: o } = a, c = W({ unitId: e, subUnitId: n, drawingId: s }), l = o.fuzzyMathObjects(c, !0);
           if (l.length > 0) {
-            for (const d of l)
-              d.dispose();
-            (m = s.getTransformer()) == null || m.clearSelectedObjects();
+            for (const u of l)
+              u.dispose();
+            (d = o.getTransformer()) == null || d.clearSelectedObjects();
           }
         });
       })
@@ -1247,76 +1264,76 @@ let Ue = class extends xe {
   }
   _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);
+      this._drawingManagerService.update$.subscribe((r) => {
+        r.forEach((t) => {
+          var S;
+          const { unitId: e, subUnitId: n, drawingId: s } = t, a = this._drawingManagerService.getDrawingByParam(t);
           if (a == null)
             return;
-          const { transform: s, drawingType: c } = a, l = this._getSceneAndTransformerByDrawingSearch(e);
+          const { transform: o, drawingType: c } = a, l = this._getSceneAndTransformerByDrawingSearch(e);
           if (l == null)
             return;
-          const { scene: m, transformer: d } = l;
-          if (s == null)
+          const { scene: d, transformer: u } = l;
+          if (o == 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)
+          const { left: h = 0, top: f = 0, width: w = 0, height: v = 0, angle: m = 0, flipX: C = !1, flipY: _ = !1, skewX: R = 0, skewY: b = 0 } = o, N = W({ unitId: e, subUnitId: n, drawingId: s }), I = d.getObject(N);
+          if (I == 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();
+          I.transformByState({ left: h, top: f, width: w, height: v, angle: m, flipX: C, flipY: _, skewX: R, skewY: b }), (S = d.getTransformer()) == null || S.debounceRefreshControls();
         });
       })
     );
   }
   _drawingRefreshListener() {
     this.disposeWithMe(
-      this._drawingManagerService.refreshTransform$.subscribe((t) => {
-        t.forEach((n) => {
-          const { unitId: e, subUnitId: r, drawingId: o } = n, a = this._getSceneAndTransformerByDrawingSearch(e);
+      this._drawingManagerService.refreshTransform$.subscribe((r) => {
+        r.forEach((t) => {
+          const { unitId: e, subUnitId: n, drawingId: s } = t, a = this._getSceneAndTransformerByDrawingSearch(e);
           if (a == null)
             return;
-          const s = this._drawingManagerService.getDrawingByParam(n);
-          if (s == null)
+          const o = this._drawingManagerService.getDrawingByParam(t);
+          if (o == 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)
+          const { transform: c } = o, { scene: l } = a, d = W({ unitId: e, subUnitId: n, drawingId: s }), u = l.getObject(d);
+          if (u == null || c == null)
             return !0;
           const {
             left: h = 0,
             top: f = 0,
-            width: v = 0,
-            height: w = 0,
-            angle: p = 0,
-            flipX: S = !1,
+            width: w = 0,
+            height: v = 0,
+            angle: m = 0,
+            flipX: C = !1,
             flipY: _ = !1,
-            skewX: M = 0,
-            skewY: I = 0
+            skewX: R = 0,
+            skewY: b = 0
           } = c;
-          d.transformByState({ left: h, top: f, width: v, height: w, angle: p, flipX: S, flipY: _, skewX: M, skewY: I });
+          u.transformByState({ left: h, top: f, width: w, height: v, angle: m, flipX: C, flipY: _, skewX: R, skewY: b });
         });
       })
     );
   }
   _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)
+      this._drawingManagerService.visible$.subscribe((r) => {
+        r.forEach((t) => {
+          const { unitId: e, subUnitId: n, drawingId: s, visible: a } = t, o = this._getSceneAndTransformerByDrawingSearch(e);
+          if (o == null)
             return;
-          const { scene: c } = s, l = G({ unitId: e, subUnitId: r, drawingId: o }), m = c.getObject(l);
-          if (m == null)
+          const { scene: c } = o, l = W({ unitId: e, subUnitId: n, drawingId: s }), d = c.getObject(l);
+          if (d == null)
             return !0;
-          a ? m.show() : m.hide();
+          a ? d.show() : d.hide();
         });
       })
     );
   }
-  _filterUpdateParams(t, n) {
-    return t.filter((e, r) => {
+  _filterUpdateParams(r, t) {
+    return r.filter((e, n) => {
       if (e == null)
         return !1;
-      const { transform: o } = e;
-      return sn(o, n == null ? void 0 : n[r]);
+      const { transform: s } = e;
+      return ot(s, t == null ? void 0 : t[n]);
     });
   }
   // group?.getObjects().forEach((o) => {
@@ -1326,52 +1343,52 @@ let Ue = class extends xe {
   //         drawings.push({ unitId, subUnitId, drawingId });
   //     }
   // });
-  _addListenerOnDrawing(t) {
-    const n = t.getTransformerByCreate();
+  _addListenerOnDrawing(r) {
+    const t = r.getTransformerByCreate();
     let e = null;
     this.disposeWithMe(
-      Ce(
-        n.changeStart$.subscribe((r) => {
-          const { objects: o } = r, a = Array.from(o.values()), s = [];
+      _e(
+        t.changeStart$.subscribe((n) => {
+          const { objects: s } = n, a = Array.from(s.values()), o = [];
           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)
+            const { left: l, top: d, height: u, width: h, angle: f, oKey: w, isInGroup: v } = c, m = this._drawingManagerService.getDrawingOKey(w);
+            if (v || c instanceof Ce) {
+              let C = c.ancestorGroup;
+              if (C == null && c instanceof Ce && (C = c), C == null)
                 return null;
-              const _ = this._drawingManagerService.getDrawingOKey(S.oKey);
+              const _ = this._drawingManagerService.getDrawingOKey(C.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 };
+                const { unitId: R, subUnitId: b, drawingId: N } = _;
+                o.push({ unitId: R, subUnitId: b, drawingId: N });
+                const { left: I, top: S, height: y, width: M, angle: O } = C;
+                return { left: I, top: S, height: y, width: M, 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 };
+            } else if (m != null) {
+              const { unitId: C, subUnitId: _, drawingId: R } = m;
+              return o.push({ unitId: C, subUnitId: _, drawingId: R }), { left: l, top: d, height: u, width: h, angle: f };
             }
             return null;
-          }).filter((c) => c != null), s.length > 0 ? this._commandService.syncExecuteCommand(Ne.id, s) : this._commandService.syncExecuteCommand(Ne.id, []);
+          }).filter((c) => c != null), o.length > 0 ? this._commandService.syncExecuteCommand(Ee.id, o) : this._commandService.syncExecuteCommand(Ee.id, []);
         })
       )
     ), this.disposeWithMe(
-      Ce(
-        n.changeEnd$.subscribe((r) => {
-          const { objects: o } = r, a = this._filterUpdateParams(Ve(o, this._drawingManagerService), e);
+      _e(
+        t.changeEnd$.subscribe((n) => {
+          const { objects: s } = n, a = this._filterUpdateParams(We(s, 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) {
+He = Ir([
+  Ne(0, Ze),
+  Ne(1, he),
+  Ne(2, me),
+  Ne(3, ae)
+], He);
+class De extends Lt {
+  constructor(t, e) {
     e == null && (e = {}), e.transformerConfig = {
       keepRatio: !1,
       isCropper: !0,
@@ -1379,362 +1396,362 @@ class Me extends Gn {
       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");
+    super(t, e);
+    te(this, "_srcRect");
+    te(this, "_prstGeom");
+    te(this, "_applyTransform");
+    te(this, "_dragPadding", 8);
+    te(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();
+  refreshSrcRect(t, e) {
+    this._srcRect = t, this._applyTransform = e, this._applyProps();
   }
   get srcRect() {
     return this._srcRect;
   }
   dispose() {
-    var n;
-    super.dispose(), (n = this._cacheCanvas) == null || n.dispose(), this._srcRect = null;
+    var t;
+    super.dispose(), (t = this._cacheCanvas) == null || t.dispose(), this._srcRect = null;
   }
-  isHit(n) {
-    const e = this.getInverseCoord(n);
+  isHit(t) {
+    const e = this.getInverseCoord(t);
     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) {
+  _inSurround(t) {
     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;
+    return t.x >= e - this.strokeWidth / 2 && t.x <= this.width + this.strokeWidth / 2 - e && t.y >= e - this.strokeWidth / 2 && t.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);
+  render(t, e) {
+    return this.visible ? (t.save(), this._draw(t), t.restore(), this.makeDirty(!1), this) : (this.makeDirty(!1), this);
   }
-  _draw(n) {
+  _draw(t) {
     var c, l;
-    const r = this.getScene().getEngine(), { width: o, height: a } = r;
+    const n = this.getScene().getEngine(), { width: s, height: a } = n;
     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, {
+    const o = (l = this._cacheCanvas) == null ? void 0 : l.getContext();
+    o != null && (o.save(), lt.drawWith(o, {
       left: 0,
       top: 0,
-      width: o,
+      width: s,
       height: a,
       fill: "rgba(0, 0, 0, 0.5)"
-    }), s.setTransform(n.getTransform()), this._clipForApplyObject(s), this._applyCache(n), s.restore());
+    }), o.setTransform(t.getTransform()), this._clipForApplyObject(o), this._applyCache(t), o.restore());
   }
-  _clipForApplyObject(n) {
+  _clipForApplyObject(t) {
     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();
+    if (this._prstGeom != null && (e = 1), t.globalCompositeOperation = "destination-out", t.beginPath(), e === 0) {
+      const n = this.transform.getMatrix();
+      t.transform(n[0], n[1], n[2], n[3], n[4], n[5]), t.rect(0, 0, this.width, this.height), t.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;
+    let t = 0, e = 0, n = 0, s = 0;
+    const { left: a = 0, top: o = 0, width: c = 0, height: l = 0, angle: d } = 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 { left: f = 0, top: w = 0, right: v = 0, bottom: m = 0 } = this._srcRect;
+      t = f, e = w, n = v, s = m;
     }
-    const d = a + n, h = s + e;
+    const u = a + t, h = o + e;
     this.transformByState({
-      left: d,
+      left: u,
       top: h,
-      width: a + c - r - d,
-      height: s + l - o - h,
-      angle: m
+      width: a + c - n - u,
+      height: o + l - s - h,
+      angle: d
     });
   }
-  _applyCache(n) {
-    if (!n || this._cacheCanvas == null)
+  _applyCache(t) {
+    if (!t || 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();
+    e.save(), t.save(), t.setTransform(1, 0, 0, 1, 0, 0), e.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(this._cacheCanvas.getCanvasEle(), 0, 0), t.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();
+    const t = this.getScene();
+    if (t == null) return;
+    this._cacheCanvas = new kt();
+    const e = t.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 n;
+      (n = this._cacheCanvas) == null || n.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) {
+var Mr = Object.getOwnPropertyDescriptor, Rr = (i, r, t, e) => {
+  for (var n = e > 1 ? void 0 : e ? Mr(r, t) : r, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (n = a(n) || n);
+  return n;
+}, fe = (i, r) => (t, e) => r(t, e, i);
+let Ae = class extends Ve {
+  constructor(r, t, e, n, s, 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();
+    te(this, "_sceneListenerOnImageMap", /* @__PURE__ */ new WeakSet());
+    this._commandService = r, this._drawingManagerService = t, this._renderManagerService = e, this._univerInstanceService = n, this._messageService = s, this._localeService = a, this._init();
   }
   _init() {
     this._initOpenCrop(), this._initCloseCrop(), this._initAutoCrop();
   }
   _initAutoCrop() {
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((t) => {
-        if (t.id !== Be.id)
+      this._commandService.onCommandExecuted((r) => {
+        if (r.id !== Ue.id)
           return;
-        const n = t.params;
-        if (n == null)
+        const t = r.params;
+        if (t == null)
           return;
-        const { cropType: e } = n, r = this._drawingManagerService.getFocusDrawings();
-        if (r.length !== 1)
+        const { cropType: e } = t, n = this._drawingManagerService.getFocusDrawings();
+        if (n.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)
+        const s = n[0], { unitId: a, subUnitId: o, drawingId: c } = s, l = this._renderManagerService.getRenderById(a), d = l == null ? void 0 : l.scene;
+        if (d == 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._searchCropObject(d) != null && this._commandService.syncExecuteCommand(ge.id, { isAuto: !0 });
+        const h = W({ unitId: a, subUnitId: o, drawingId: c }), f = d.getObject(h);
+        if (!(f instanceof Ke)) {
           this._messageService.show({
-            type: Qe.Error,
+            type: tt.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 }));
+        f != null && (this._updateCropperObject(e, f), this._commandService.executeCommand(Ye.id, { unitId: a, subUnitId: o, 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;
+  _calculateSrcRectByRatio(r, t, e, n, s, a) {
+    const o = e / n, c = s / a;
+    let l = e, d = n;
+    o > c ? l = n * c : d = e / c;
+    const u = (e - l) / 2, h = (n - d) / 2;
     return {
-      left: ye(d, 1),
-      top: ye(h, 1),
-      right: ye(e - (d + l), 1),
-      bottom: ye(r - (h + m), 1)
+      left: Re(u, 1),
+      top: Re(h, 1),
+      right: Re(e - (u + l), 1),
+      bottom: Re(n - (h + d), 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);
+  _updateCropperObject(r, t) {
+    const { left: e, top: n, width: s, height: a } = t.calculateTransformWithSrcRect();
+    let o;
+    switch (r) {
+      case x.R1_1:
+        o = this._calculateSrcRectByRatio(e, n, s, a, 1, 1);
         break;
-      case A.R16_9:
-        s = this._calculateSrcRectByRatio(e, r, o, a, 16, 9);
+      case x.R16_9:
+        o = this._calculateSrcRectByRatio(e, n, s, a, 16, 9);
         break;
-      case A.R9_16:
-        s = this._calculateSrcRectByRatio(e, r, o, a, 9, 16);
+      case x.R9_16:
+        o = this._calculateSrcRectByRatio(e, n, s, a, 9, 16);
         break;
-      case A.R5_4:
-        s = this._calculateSrcRectByRatio(e, r, o, a, 5, 4);
+      case x.R5_4:
+        o = this._calculateSrcRectByRatio(e, n, s, a, 5, 4);
         break;
-      case A.R4_5:
-        s = this._calculateSrcRectByRatio(e, r, o, a, 4, 5);
+      case x.R4_5:
+        o = this._calculateSrcRectByRatio(e, n, s, a, 4, 5);
         break;
-      case A.R4_3:
-        s = this._calculateSrcRectByRatio(e, r, o, a, 4, 3);
+      case x.R4_3:
+        o = this._calculateSrcRectByRatio(e, n, s, a, 4, 3);
         break;
-      case A.R3_4:
-        s = this._calculateSrcRectByRatio(e, r, o, a, 3, 4);
+      case x.R3_4:
+        o = this._calculateSrcRectByRatio(e, n, s, a, 3, 4);
         break;
-      case A.R3_2:
-        s = this._calculateSrcRectByRatio(e, r, o, a, 3, 2);
+      case x.R3_2:
+        o = this._calculateSrcRectByRatio(e, n, s, a, 3, 2);
         break;
-      case A.R2_3:
-        s = this._calculateSrcRectByRatio(e, r, o, a, 2, 3);
+      case x.R2_3:
+        o = this._calculateSrcRectByRatio(e, n, s, a, 2, 3);
         break;
-      case A.FREE:
+      case x.FREE:
     }
-    if (s == null)
+    if (o == null)
       return;
-    n.setSrcRect(s);
-    const { left: c = 0, top: l = 0, bottom: m = 0, right: d = 0 } = s;
-    n.transformByStateCloseCropper({
+    t.setSrcRect(o);
+    const { left: c = 0, top: l = 0, bottom: d = 0, right: u = 0 } = o;
+    t.transformByStateCloseCropper({
       left: e + c,
-      top: r + l,
-      width: o - d - c,
-      height: a - m - l
+      top: n + l,
+      width: s - u - c,
+      height: a - d - l
     });
   }
   _initOpenCrop() {
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((t) => {
-        if (t.id !== Fe.id)
+      this._commandService.onCommandExecuted((r) => {
+        if (r.id !== Ye.id)
           return;
-        const n = t.params;
-        if (n == null)
+        const t = r.params;
+        if (t == 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)
+        const { unitId: e, subUnitId: n, drawingId: s } = t, a = this._renderManagerService.getRenderById(e), o = a == null ? void 0 : a.scene;
+        if (o == 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)
+        if (this._sceneListenerOnImageMap.has(o) || (this._addListenerOnImage(o), this._sceneListenerOnImageMap.add(o)), this._drawingManagerService.getDrawingByParam({ unitId: e, subUnitId: n, drawingId: s }) == null)
           return;
-        const l = G({ unitId: e, subUnitId: r, drawingId: o }), m = s.getObject(l);
-        if (m == null)
+        const l = W({ unitId: e, subUnitId: n, drawingId: s }), d = o.getObject(l);
+        if (d == null)
           return;
-        if (!(m instanceof ze)) {
+        if (!(d instanceof Ke)) {
           this._messageService.show({
-            type: Qe.Error,
+            type: tt.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()
+        const u = o.getTransformer();
+        u == null || u.clearControls();
+        const h = new De(`${l}-crop`, {
+          srcRect: d.srcRect,
+          prstGeom: d.prstGeom,
+          applyTransform: d.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 }]);
+        o.addObject(h, d.getLayerIndex() + 1).attachTransformerTo(h), u == null || u.createControlForCopper(h), this._addHoverForImageCopper(h), d.openRenderByCropper(), u == null || u.refreshControls(), h.makeDirty(!0), this._commandService.syncExecuteCommand(Ee.id, [{ unitId: e, subUnitId: n, drawingId: s }]);
       })
     );
   }
-  _searchCropObject(t) {
-    const n = t.getAllObjectsByOrder();
-    for (const e of n)
-      if (e instanceof Me)
+  _searchCropObject(r) {
+    const t = r.getAllObjectsByOrder();
+    for (const e of t)
+      if (e instanceof De)
         return e;
   }
   _initCloseCrop() {
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((n) => {
-        if (n.id !== ge.id)
+      this._commandService.onCommandExecuted((t) => {
+        if (t.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;
+        const n = e.getUnitId(), s = this._renderManagerService.getRenderById(n), a = s == null ? void 0 : s.scene;
         if (a == null)
           return !0;
-        const s = this._searchCropObject(a);
-        if (s == null)
+        const o = this._searchCropObject(a);
+        if (o == null)
           return;
-        const c = this._getApplyObjectByCropObject(s);
+        const c = this._getApplyObjectByCropObject(o);
         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;
+        l.detachFrom(o), l.clearCopperControl();
+        const d = this._getSrcRectByTransformState(c, o), u = this._drawingManagerService.getDrawingOKey(c.oKey);
+        if (u != null) {
+          const { left: h, top: f, height: w, width: v } = o;
           this._drawingManagerService.featurePluginUpdateNotification([{
-            ...d,
+            ...u,
             transform: {
-              ...d.transform,
+              ...u.transform,
               left: h,
               top: f,
-              height: v,
-              width: w
+              height: w,
+              width: v
             },
-            srcRect: m.srcRectAngle
+            srcRect: d.srcRectAngle
           }]);
         }
-        c.setSrcRect({ ...m.srcRectAngle }), c.closeRenderByCropper(), c.makeDirty(!0), s == null || s.dispose();
+        c.setSrcRect({ ...d.srcRectAngle }), c.closeRenderByCropper(), c.makeDirty(!0), o == null || o.dispose();
       })
     );
-    const t = this._univerInstanceService.getCurrentTypeOfUnit$(Oe.UNIVER_SHEET).pipe(
-      Zn((n) => n ? n.activeSheet$ : Xn(null))
+    const r = this._univerInstanceService.getCurrentTypeOfUnit$(Te.UNIVER_SHEET).pipe(
+      Yt((t) => t ? t.activeSheet$ : Zt(null))
     );
-    this.disposeWithMe(t.subscribe(() => {
+    this.disposeWithMe(r.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;
+  _getApplyObjectByCropObject(r) {
+    const t = r.oKey, e = t.slice(0, t.length - 5), n = r.getScene();
+    if (!n) return null;
+    const s = n.getObject(e);
+    return s == null ? null : s;
   }
-  _addListenerOnImage(t) {
-    const n = t.getTransformerByCreate();
+  _addListenerOnImage(r) {
+    const t = r.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))
+      t.changeStart$.subscribe((n) => {
+        const { objects: s } = n, a = s.values().next().value;
+        if (a == null || !(a instanceof De))
           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();
+        const { left: o, top: c, height: l, width: d, angle: u } = a;
+        e = { left: o, top: c, height: l, width: d, angle: u }, t.clearCopperControl();
       })
     ), this.disposeWithMe(
-      n.changeEnd$.subscribe((r) => {
-        const { objects: o } = r, a = o.values().next().value;
-        if (a == null || !(a instanceof Me))
+      t.changeEnd$.subscribe((n) => {
+        const { objects: s } = n, a = s.values().next().value;
+        if (a == null || !(a instanceof De))
           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))
+        const { left: o, top: c, height: l, width: d, angle: u } = a;
+        if (!ot({ left: o, top: c, height: l, width: d, angle: u }, 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);
+        a.refreshSrcRect(f.srcRect, h.getState()), t.createControlForCopper(a);
       })
-    ), this._endCropListener(t);
+    ), this._endCropListener(r);
   }
-  _addHoverForImageCopper(t) {
+  _addHoverForImageCopper(r) {
     this.disposeWithMe(
-      t.onPointerEnter$.subscribeEvent(() => {
-        t.cursor = Te.MOVE;
+      r.onPointerEnter$.subscribeEvent(() => {
+        r.cursor = je.MOVE;
       })
     ), this.disposeWithMe(
-      t.onPointerLeave$.subscribeEvent(() => {
-        t.cursor = Te.DEFAULT;
+      r.onPointerLeave$.subscribeEvent(() => {
+        r.cursor = je.DEFAULT;
       })
     );
   }
-  _endCropListener(t) {
-    const n = t.getTransformerByCreate();
+  _endCropListener(r) {
+    const t = r.getTransformerByCreate();
     this.disposeWithMe(
-      n.clearControl$.subscribe((e) => {
+      t.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 };
+  _getSrcRectByTransformState(r, t) {
+    const { left: e, top: n, height: s, width: a, strokeWidth: o, angle: c } = t, { left: l, top: d, width: u, height: h, angle: f, strokeWidth: w } = r, v = e - l, m = n - d, C = {
+      left: v,
+      top: m,
+      right: u - v - a,
+      bottom: h - m - s
+    }, _ = { ...C };
     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;
+      const R = e + a / 2, b = n + s / 2, N = new $e(R, b), I = u / 2 + l, S = h / 2 + d, y = new $e(I, S), M = new $e(l, d);
+      M.rotateByPoint(et(f), y);
+      const O = M.clone();
+      O.rotateByPoint(et(-f), N);
+      const j = e - O.x, T = n - O.y;
+      _.left = j, _.top = T, _.right = u - j - a, _.bottom = h - T - s;
     }
     return {
-      srcRect: S,
+      srcRect: C,
       srcRectAngle: _
     };
   }
 };
-Ae = xt([
-  de(0, me),
-  de(1, re),
-  de(2, ue),
-  de(3, Ke),
-  de(4, zn),
-  de(5, Le(te))
+Ae = Rr([
+  fe(0, he),
+  fe(1, ae),
+  fe(2, me),
+  fe(3, Ze),
+  fe(4, Gt),
+  fe(5, ke(ie))
 ], 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();
+var Or = Object.getOwnPropertyDescriptor, Nr = (i, r, t, e) => {
+  for (var n = e > 1 ? void 0 : e ? Or(r, t) : r, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (n = a(n) || n);
+  return n;
+}, de = (i, r) => (t, e) => r(t, e, i);
+let Le = class extends Ve {
+  constructor(i, r, t, e, n, s, a) {
+    super(), this._commandService = i, this._renderManagerService = r, this._drawingManagerService = t, this._dialogService = e, this._imageIoService = n, this._currentUniverService = s, this._drawingRenderService = a, this._initialize();
   }
   dispose() {
     super.dispose();
@@ -1745,11 +1762,11 @@ let He = class extends xe {
   _commandExecutedListener() {
     this.disposeWithMe(
       this._commandService.onCommandExecuted((i) => {
-        if (i.id === Pn.id) {
-          const t = i.params;
-          if (t == null)
+        if (i.id === yt.id) {
+          const r = i.params;
+          if (r == null)
             return;
-          this._resetImageSize(t);
+          this._resetImageSize(r);
         }
       })
     );
@@ -1757,32 +1774,32 @@ let He = class extends xe {
   _getSceneAndTransformerByDrawingSearch(i) {
     if (i == null)
       return;
-    const t = this._renderManagerService.getRenderById(i), n = t == null ? void 0 : t.scene;
-    if (n == null)
+    const r = this._renderManagerService.getRenderById(i), t = r == null ? void 0 : r.scene;
+    if (t == null)
       return null;
-    const e = n.getTransformerByCreate();
-    return { scene: n, transformer: e };
+    const e = t.getTransformerByCreate();
+    return { scene: t, transformer: e };
   }
   _resetImageSize(i) {
-    const t = [], n = [];
+    const r = [], t = [];
     i.forEach((e) => {
-      const { unitId: r, subUnitId: o, drawingId: a } = e, s = this._getSceneAndTransformerByDrawingSearch(r);
-      if (s == null)
+      const { unitId: n, subUnitId: s, drawingId: a } = e, o = this._getSceneAndTransformerByDrawingSearch(n);
+      if (o == 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);
+      const { scene: c } = o, l = W({ unitId: n, subUnitId: s, drawingId: a }), d = c.getObject(l);
       if (d == null)
         return !0;
-      if (d.drawingType !== ne.DRAWING_IMAGE)
+      const u = this._drawingManagerService.getDrawingByParam(e);
+      if (u == null)
+        return !0;
+      if (u.drawingType !== re.DRAWING_IMAGE)
         return;
-      m.resetSize();
-      const { width: h, height: f } = m.getNativeSize();
-      n.includes(c) === !1 && n.push(c), t.push({
-        ...d,
+      d.resetSize();
+      const { width: h, height: f } = d.getNativeSize();
+      t.includes(c) === !1 && t.push(c), r.push({
+        ...u,
         transform: {
-          ...d.transform,
+          ...u.transform,
           height: f,
           width: h,
           angle: 0
@@ -1790,9 +1807,9 @@ let He = class extends xe {
         srcRect: null,
         prstGeom: null
       });
-    }), this._drawingManagerService.featurePluginUpdateNotification(t), n.forEach((e) => {
+    }), this._drawingManagerService.featurePluginUpdateNotification(r), t.forEach((e) => {
       e.getTransformerByCreate().refreshControls().changeNotification();
-    }), this._commandService.syncExecuteCommand(Ne.id, i);
+    }), this._commandService.syncExecuteCommand(Ee.id, i);
   }
   _drawingAddListener() {
     this.disposeWithMe(
@@ -1802,127 +1819,127 @@ let He = class extends xe {
     );
   }
   _insertImages(i) {
-    i.forEach(async (t) => {
+    i.forEach(async (r) => {
       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)
+      const { unitId: t, subUnitId: e } = r, n = this._getSceneAndTransformerByDrawingSearch(t), s = (c = gt(this._currentUniverService, t)) == null ? void 0 : c.subUnitId;
+      if (n == null || s !== e)
         return;
-      const a = this._drawingManagerService.getDrawingByParam(t);
+      const a = this._drawingManagerService.getDrawingByParam(r);
       if (a == null)
         return;
-      const s = await this._drawingRenderService.renderImages(a, r.scene);
-      if (this._drawingManagerService.refreshTransform([a]), !(s == null || s.length === 0))
-        for (const l of s)
+      const o = await this._drawingRenderService.renderImages(a, n.scene);
+      if (this._drawingManagerService.refreshTransform([a]), !(o == null || o.length === 0))
+        for (const l of o)
           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)
+        i.forEach((r) => {
+          const { unitId: t, subUnitId: e, drawingId: n } = r, s = this._drawingManagerService.getDrawingByParam(r);
+          if (s == null)
             return;
-          const { transform: a, drawingType: s, srcRect: c, prstGeom: l, source: m, imageSourceType: d } = o;
-          if (s !== ne.DRAWING_IMAGE)
+          const { transform: a, drawingType: o, srcRect: c, prstGeom: l, source: d, imageSourceType: u } = s;
+          if (o !== re.DRAWING_IMAGE)
             return;
-          const h = this._getSceneAndTransformerByDrawingSearch(n);
+          const h = this._getSceneAndTransformerByDrawingSearch(t);
           if (h == null)
             return;
-          const { scene: f, transformer: v } = h;
+          const { scene: f, transformer: w } = h;
           if (a == null)
             return !0;
-          const w = G({ unitId: n, subUnitId: e, drawingId: r }), p = f.getObject(w);
-          if (p == null)
+          const v = W({ unitId: t, subUnitId: e, drawingId: n }), m = f.getObject(v);
+          if (m == null)
             return !0;
-          p.setSrcRect(c), p.setPrstGeom(l), m != null && m.length > 0 && (d === Xe.BASE64 || d === Xe.URL) && p.changeSource(m);
+          m.setSrcRect(c), m.setPrstGeom(l), d != null && d.length > 0 && (u === qe.BASE64 || u === qe.URL) && m.changeSource(d);
         });
       })
     );
   }
   _addHoverForImage(i) {
     this.disposeWithMe(
-      Ce(
+      _e(
         i.onPointerEnter$.subscribeEvent(() => {
-          i.cursor = Te.GRAB;
+          i.cursor = je.GRAB;
         })
       )
     ), this.disposeWithMe(
-      Ce(
+      _e(
         i.onPointerLeave$.subscribeEvent(() => {
-          i.cursor = Te.DEFAULT;
+          i.cursor = je.DEFAULT;
         })
       )
     );
   }
   _addDialogForImage(i) {
     this.disposeWithMe(
-      Ce(
+      _e(
         i.onDblclick$.subscribeEvent(() => {
-          const t = `${i.oKey}-viewer-dialog`;
-          this._drawingRenderService.previewImage(t, i.getNative().src, i.getNativeSize().width, i.getNativeSize().height);
+          const r = `${i.oKey}-viewer-dialog`;
+          this._drawingRenderService.previewImage(r, 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(
+Le = Nr([
+  de(0, he),
+  de(1, me),
+  de(2, ae),
+  de(3, $t),
+  de(4, ct),
+  de(5, Ze),
+  de(6, ke(Be))
+], Le);
+var Dr = Object.getOwnPropertyDescriptor, Tr = (i, r, t, e) => {
+  for (var n = e > 1 ? void 0 : e ? Dr(r, t) : r, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (n = a(n) || n);
+  return n;
+}, at = (i, r) => (t, e) => r(t, e, i);
+const Er = "UNIVER_DRAWING_UI_PLUGIN";
+var Fe;
+let st = (Fe = class extends Bt {
+  constructor(i = nt, r, t) {
+    super(), this._config = i, this._injector = r, this._configService = t;
+    const { menu: e, ...n } = Ut(
       {},
-      tn,
+      nt,
       this._config
     );
-    e && this._configService.setConfig("menu", e, { merge: !0 }), this._configService.setConfig(Et, r);
+    e && this._configService.setConfig("menu", e, { merge: !0 }), this._configService.setConfig(Cr, n);
   }
   onStarting() {
     this._initDependencies();
   }
   onRendered() {
-    this._injector.get(Ue), this._injector.get(je), this._injector.get(Ae), this._injector.get(He);
+    this._injector.get(He), this._injector.get(xe), this._injector.get(Ae), this._injector.get(Le);
   }
   _initDependencies() {
     [
-      [Ee],
-      [Ue],
-      [je],
+      [Be],
+      [He],
+      [xe],
       [Ae],
-      [He]
-    ].forEach((t) => this._injector.add(t));
-  }
-}, ee($e, "pluginName", $t), $e);
-on = Wt([
-  an(1, Le(Un)),
-  an(2, An)
-], on);
+      [Le]
+    ].forEach((r) => this._injector.add(r));
+  }
+}, te(Fe, "pluginName", Er), Fe);
+st = Tr([
+  at(1, ke(Pt)),
+  at(2, jt)
+], st);
 export {
-  Be as AutoImageCropOperation,
-  Tt as COMPONENT_IMAGE_POPUP_MENU,
+  Ue as AutoImageCropOperation,
+  _r 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
+  Wr as DrawingCommonPanel,
+  Be as DrawingRenderService,
+  De as ImageCropperObject,
+  wr as ImagePopupMenu,
+  yt as ImageResetSizeOperation,
+  Ye as OpenImageCropOperation,
+  Xe as SetDrawingAlignOperation,
+  st as UniverDrawingUIPlugin,
+  We as getUpdateParams
 };