@univerjs/drawing-ui 0.2.2 → 0.2.4-alpha.0

package/lib/es/index.js

@@ -3,12 +3,10 @@ var Ot = (a, n, e) => n in a ? Mt(a, n, { enumerable: !0, configurable: !0, writ
 var Q = (a, n, e) => Ot(a, typeof n != "symbol" ? n + "" : n, e);
 import { getDrawingShapeKeyByDrawingSearch as G, DrawingTypeEnum as te, ImageSourceType as Nt, IDrawingManagerService as ne, IImageIoService as rt, ArrangeTypeEnum as Se } from "@univerjs/drawing";
 import { Group as pe, DRAWING_OBJECT_LAYER_INDEX as ze, Image as We, IRenderManagerService as ge, getGroupState as Dt, transformObjectOutOfGroup as Tt, RENDER_CLASS_TYPE as Xe, Shape as Bt, Rect as jt, Canvas as Ut, precisionTo as be, CURSOR_TYPE as Te, Vector2 as xe, degToRad as Je } from "@univerjs/engine-render";
-import { UniverInstanceType as Re, LocaleService as Z, debounce as Ie, CommandType as we, ICommandService as ce, Tools as Ht, Disposable as Ue, checkIfMove as at, toDisposable as Ce, OnLifecycle as He, LifecycleStages as Le, IUniverInstanceService as Fe, Plugin as Lt } from "@univerjs/core";
-import { useDependency as x } from "@wendellhu/redi/react-bindings";
-import c, { forwardRef as Y, useRef as it, createElement as X, useState as L, useEffect as ve } from "react";
-import { Button as ie, InputNumber as de, Checkbox as At, Select as ot, Dropdown as Vt, MessageType as qe } from "@univerjs/design";
+import { UniverInstanceType as Re, useDependency as x, LocaleService as Z, debounce as Ie, CommandType as we, ICommandService as ce, Tools as Ht, Disposable as Ue, checkIfMove as at, toDisposable as Ce, OnLifecycle as He, LifecycleStages as Le, IUniverInstanceService as Fe, Inject as se, Injector as it, Plugin as Lt } from "@univerjs/core";
+import c, { forwardRef as Y, useRef as ot, createElement as X, useState as L, useEffect as ve } from "react";
+import { Button as ie, InputNumber as de, Checkbox as At, Select as st, Dropdown as Vt, MessageType as qe } from "@univerjs/design";
 import T from "clsx";
-import { Inject as se, Injector as st } from "@wendellhu/redi";
 import { ComponentManager as xt, IMenuService as Gt, IMessageService as Wt, IDialogService as $t } from "@univerjs/ui";
 import { filter as kt, switchMap as zt } from "rxjs";
 function Ft(a, n, e, t) {
@@ -134,7 +132,7 @@ var $ = function() {
       n.indexOf(t[r]) < 0 && Object.prototype.propertyIsEnumerable.call(a, t[r]) && (e[t[r]] = a[t[r]]);
   return e;
 }, J = Y(function(a, n) {
-  var e = a.icon, t = a.id, r = a.className, o = a.extend, i = Xt(a, ["icon", "id", "className", "extend"]), s = "univerjs-icon univerjs-icon-".concat(t, " ").concat(r || "").trim(), l = it("_".concat(Qt()));
+  var e = a.icon, t = a.id, r = a.className, o = a.extend, i = Xt(a, ["icon", "id", "className", "extend"]), s = "univerjs-icon univerjs-icon-".concat(t, " ").concat(r || "").trim(), l = ot("_".concat(Qt()));
   return ct(e, "".concat(t), { defIds: e.defIds, idSuffix: l.current }, $({ ref: n, className: s }, i), o);
 });
 function ct(a, n, e, t, r) {
@@ -233,20 +231,21 @@ var ln = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em"
   }));
 });
 Ct.displayName = "UngroupSingle";
-const mn = "univer-image-common-panel", gn = "univer-image-common-panel-grid", un = "univer-image-common-panel-border", dn = "univer-image-common-panel-title", hn = "univer-image-common-panel-row", fn = "univer-image-common-panel-row-vertical", pn = "univer-image-common-panel-column", Cn = "univer-image-common-panel-column-center", wn = "univer-image-common-panel-inline", vn = "univer-image-common-panel-span2", _n = "univer-image-common-panel-span3", Sn = "univer-image-common-panel-input", m = {
+const mn = "univer-image-common-panel", gn = "univer-image-common-panel-grid", un = "univer-image-common-panel-border", dn = "univer-image-common-panel-title", hn = "univer-image-common-panel-subtitle", fn = "univer-image-common-panel-row", pn = "univer-image-common-panel-row-vertical", Cn = "univer-image-common-panel-column", wn = "univer-image-common-panel-column-center", vn = "univer-image-common-panel-inline", _n = "univer-image-common-panel-span2", Sn = "univer-image-common-panel-span3", bn = "univer-image-common-panel-input", m = {
   imageCommonPanel: mn,
   imageCommonPanelGrid: gn,
   imageCommonPanelBorder: un,
   imageCommonPanelTitle: dn,
-  imageCommonPanelRow: hn,
-  imageCommonPanelRowVertical: fn,
-  imageCommonPanelColumn: pn,
-  imageCommonPanelColumnCenter: Cn,
-  imageCommonPanelInline: wn,
-  imageCommonPanelSpan2: vn,
-  imageCommonPanelSpan3: _n,
-  imageCommonPanelInput: Sn
-}, bn = (a) => {
+  imageCommonPanelSubtitle: hn,
+  imageCommonPanelRow: fn,
+  imageCommonPanelRowVertical: pn,
+  imageCommonPanelColumn: Cn,
+  imageCommonPanelColumnCenter: wn,
+  imageCommonPanelInline: vn,
+  imageCommonPanelSpan2: _n,
+  imageCommonPanelSpan3: Sn,
+  imageCommonPanelInput: bn
+}, In = (a) => {
   const { arrangeShow: n, drawings: e } = a, t = x(Z), r = x(ne), o = (g) => g ? "block" : "none", [i, s] = L(e);
   ve(() => {
     const g = r.focus$.subscribe((u) => {
@@ -269,7 +268,7 @@ const mn = "univer-image-common-panel", gn = "univer-image-common-panel-grid", u
   } }, /* @__PURE__ */ c.createElement("span", { className: m.imageCommonPanelInline }, /* @__PURE__ */ c.createElement(pt, null), t.t("image-panel.arrange.front")))), /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan2) }, /* @__PURE__ */ c.createElement(ie, { size: "small", onClick: () => {
     l(Se.back);
   } }, /* @__PURE__ */ c.createElement("span", { className: m.imageCommonPanelInline }, /* @__PURE__ */ c.createElement(mt, null), t.t("image-panel.arrange.back"))))));
-}, re = 20, In = 20, Pn = [-3600, 3600], Pe = 300, yn = (a) => {
+}, re = 20, Pn = 20, yn = [-3600, 3600], Pe = 300, En = (a) => {
   var Ye;
   const n = x(Z), e = x(ne), t = x(ge), { drawings: r, transformShow: o } = a, i = r[0];
   if (i == null)
@@ -305,7 +304,7 @@ const mn = "univer-image-common-panel", gn = "univer-image-common-panel-grid", u
     const H = V[0];
     if (H == null)
       return;
-    const U = H.transform;
+    const { transform: U } = H;
     if (U == null)
       return;
     const {
@@ -353,7 +352,7 @@ const mn = "univer-image-common-panel", gn = "univer-image-common-panel-grid", u
     const H = { unitId: l, subUnitId: g, drawingId: u, drawingType: d, transform: { width: C } };
     if (Ve) {
       let U = C / R * y;
-      if (U = Math.max(U, In), U > V)
+      if (U = Math.max(U, Pn), U > V)
         return;
       I(U), H.transform.height = U;
     }
@@ -389,7 +388,7 @@ const mn = "univer-image-common-panel", gn = "univer-image-common-panel-grid", u
   }, Pe), yt = (C) => {
     if (C == null)
       return;
-    const [A, V] = Pn;
+    const [A, V] = yn;
     C < A && (C = A), C > V && (C = V);
     const H = { unitId: l, subUnitId: g, drawingId: u, drawingType: d, transform: { angle: C } };
     W(C), e.featurePluginUpdateNotification([H]), w.refreshControls().changeNotification();
@@ -411,7 +410,7 @@ const Ke = {
   id: "sheet.operation.set-image-align",
   type: we.OPERATION,
   handler: (a, n) => !0
-}, En = (a) => {
+}, Rn = (a) => {
   const n = x(ce), e = x(Z), { alignShow: t } = a, [r, o] = L(O.default), i = [
     {
       label: e.t("image-panel.align.default"),
@@ -468,7 +467,7 @@ const Ke = {
     });
   }
   const l = (g) => g ? "block" : "none";
-  return /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelGrid, m.imageCommonPanelBorder), style: { display: l(t) } }, /* @__PURE__ */ c.createElement("div", { className: m.imageCommonPanelRow }, /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelTitle) }, /* @__PURE__ */ c.createElement("div", null, e.t("image-panel.align.title")))), /* @__PURE__ */ c.createElement("div", { className: m.imageCommonPanelRow }, /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelColumn) }, /* @__PURE__ */ c.createElement(ot, { value: r, options: i, onChange: s }))));
+  return /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelGrid, m.imageCommonPanelBorder), style: { display: l(t) } }, /* @__PURE__ */ c.createElement("div", { className: m.imageCommonPanelRow }, /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelTitle) }, /* @__PURE__ */ c.createElement("div", null, e.t("image-panel.align.title")))), /* @__PURE__ */ c.createElement("div", { className: m.imageCommonPanelRow }, /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelColumn) }, /* @__PURE__ */ c.createElement(st, { value: r, options: i, onChange: s }))));
 }, ke = {
   id: "sheet.operation.open-image-crop",
   type: we.OPERATION,
@@ -483,11 +482,11 @@ const je = {
   id: "sheet.operation.Auto-image-crop",
   type: we.OPERATION,
   handler: (a, n) => !0
-}, Rn = (a) => {
+}, Mn = (a) => {
   const n = x(ce), e = x(Z), { drawings: t, cropperShow: r } = a;
   if (t[0] == null)
     return;
-  const [i, s] = L(j.FREE), l = it(!1), g = [
+  const [i, s] = L(j.FREE), l = ot(!1), g = [
     {
       label: e.t("image-panel.crop.mode"),
       value: j.FREE
@@ -552,8 +551,8 @@ const je = {
   };
   return /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelGrid, m.imageCommonPanelBorder), style: { display: d(r) } }, /* @__PURE__ */ c.createElement("div", { className: m.imageCommonPanelRow }, /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelTitle) }, /* @__PURE__ */ c.createElement("div", null, e.t("image-panel.crop.title")))), /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelRow, m.imageCommonPanelRowVertical) }, /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan2) }, /* @__PURE__ */ c.createElement(ie, { size: "small", onClick: () => {
     h(i);
-  } }, /* @__PURE__ */ c.createElement("span", { className: m.imageCommonPanelInline }, /* @__PURE__ */ c.createElement(gt, null), e.t("image-panel.crop.start")))), /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan2) }, /* @__PURE__ */ c.createElement(ot, { value: i, options: g, onChange: u }))));
-}, Mn = (a) => {
+  } }, /* @__PURE__ */ c.createElement("span", { className: m.imageCommonPanelInline }, /* @__PURE__ */ c.createElement(gt, null), e.t("image-panel.crop.start")))), /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan2) }, /* @__PURE__ */ c.createElement(st, { value: i, options: g, onChange: u }))));
+}, On = (a) => {
   const n = x(Z), e = x(ge), t = x(ne), { hasGroup: r, drawings: o } = a, [i, s] = L(!1), [l, g] = L(!0), [u, d] = L(!0), h = (p) => p ? "block" : "none", f = () => {
     const p = t.getFocusDrawings(), { unitId: E, subUnitId: _ } = p[0], M = Ht.generateRandomId(10), S = Dt(0, 0, p.map((y) => y.transform || {})), R = {
       unitId: E,
@@ -633,7 +632,7 @@ const je = {
   }, style: { display: h(l) } }, /* @__PURE__ */ c.createElement("span", { className: m.imageCommonPanelInline }, /* @__PURE__ */ c.createElement(ut, null), n.t("image-panel.group.group")))), /* @__PURE__ */ c.createElement("div", { className: T(m.imageCommonPanelColumn, m.imageCommonPanelSpan2, m.imageCommonPanelColumnCenter) }, /* @__PURE__ */ c.createElement(ie, { size: "small", onClick: () => {
     w();
   }, style: { display: h(u) } }, /* @__PURE__ */ c.createElement("span", { className: m.imageCommonPanelInline }, /* @__PURE__ */ c.createElement(Ct, null), n.t("image-panel.group.unGroup"))))));
-}, ur = (a) => {
+}, gr = (a) => {
   const n = x(ne), e = x(ge), t = x(Z), { drawings: r, hasArrange: o = !0, hasTransform: i = !0, hasAlign: s = !0, hasCropper: l = !0, hasGroup: g = !0 } = a, u = r[0];
   if (u == null)
     return;
@@ -653,16 +652,16 @@ const je = {
     return () => {
       N.unsubscribe(), P.unsubscribe(), B.unsubscribe();
     };
-  }, []), /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement("div", { style: { display: y === !0 ? "block" : "none", height: "100%" } }, /* @__PURE__ */ c.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", top: "50%", marginTop: "-100px" } }, /* @__PURE__ */ c.createElement("span", null, t.t("image-panel.null")))), /* @__PURE__ */ c.createElement(bn, { arrangeShow: o === !0 ? w : !1, drawings: r }), /* @__PURE__ */ c.createElement(yn, { transformShow: i === !0 ? E : !1, drawings: r }), /* @__PURE__ */ c.createElement(En, { alignShow: s === !0 ? M : !1, drawings: r }), /* @__PURE__ */ c.createElement(Rn, { cropperShow: l === !0 ? R : !1, drawings: r }), /* @__PURE__ */ c.createElement(Mn, { hasGroup: g, drawings: r }));
-}, On = "univer-image-popup-menu", Nn = "univer-image-popup-menu-item", Dn = "univer-image-popup-menu-item-icon", Tn = "univer-image-popup-menu-item-title", Bn = "univer-image-popup-menu-item-hide", jn = "univer-btn-container", Un = "univer-btn-container-expand", he = {
-  imagePopupMenu: On,
-  imagePopupMenuItem: Nn,
-  imagePopupMenuItemIcon: Dn,
-  imagePopupMenuItemTitle: Tn,
-  imagePopupMenuItemHide: Bn,
-  btnContainer: jn,
-  btnContainerExpand: Un
-}, Hn = (a) => {
+  }, []), /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement("div", { style: { display: y === !0 ? "block" : "none", height: "100%" } }, /* @__PURE__ */ c.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", top: "50%", marginTop: "-100px" } }, /* @__PURE__ */ c.createElement("span", null, t.t("image-panel.null")))), /* @__PURE__ */ c.createElement(In, { arrangeShow: o === !0 ? w : !1, drawings: r }), /* @__PURE__ */ c.createElement(En, { transformShow: i === !0 ? E : !1, drawings: r }), /* @__PURE__ */ c.createElement(Rn, { alignShow: s === !0 ? M : !1, drawings: r }), /* @__PURE__ */ c.createElement(Mn, { cropperShow: l === !0 ? R : !1, drawings: r }), /* @__PURE__ */ c.createElement(On, { hasGroup: g, drawings: r }));
+}, Nn = "univer-image-popup-menu", Dn = "univer-image-popup-menu-item", Tn = "univer-image-popup-menu-item-icon", Bn = "univer-image-popup-menu-item-title", jn = "univer-image-popup-menu-item-hide", Un = "univer-btn-container", Hn = "univer-btn-container-expand", he = {
+  imagePopupMenu: Nn,
+  imagePopupMenuItem: Dn,
+  imagePopupMenuItemIcon: Tn,
+  imagePopupMenuItemTitle: Bn,
+  imagePopupMenuItemHide: jn,
+  btnContainer: Un,
+  btnContainerExpand: Hn
+}, Ln = (a) => {
   var v, w;
   const n = (w = (v = a.popup) == null ? void 0 : v.extraProps) == null ? void 0 : w.menuItems;
   if (!n)
@@ -717,11 +716,11 @@ const je = {
       )
     )
   );
-}, Ln = "COMPONENT_IMAGE_POPUP_MENU";
-var An = Object.defineProperty, Vn = Object.getOwnPropertyDescriptor, xn = (a, n, e, t) => {
-  for (var r = t > 1 ? void 0 : t ? Vn(n, e) : n, o = a.length - 1, i; o >= 0; o--)
+}, An = "COMPONENT_IMAGE_POPUP_MENU";
+var Vn = Object.defineProperty, xn = Object.getOwnPropertyDescriptor, Gn = (a, n, e, t) => {
+  for (var r = t > 1 ? void 0 : t ? xn(n, e) : n, o = a.length - 1, i; o >= 0; o--)
     (i = a[o]) && (r = (t ? i(n, e, r) : i(r)) || r);
-  return t && r && An(n, e, r), r;
+  return t && r && Vn(n, e, r), r;
 }, ye = (a, n) => (e, t) => n(e, t, a);
 let Me = class extends Ue {
   constructor(n, e, t, r) {
@@ -1069,15 +1068,26 @@ let Me = class extends Ue {
           const { unitId: t, subUnitId: r, drawingId: o } = e, i = this._getSceneAndTransformerByDrawingSearch(t);
           if (i == null)
             return;
-          const { scene: s, transformer: l } = i, g = G({ unitId: t, subUnitId: r, drawingId: o }), u = s.getObject(g), d = this._drawingManagerService.getDrawingByParam(e);
+          const { scene: s, transformer: l } = i, g = G({ unitId: t, subUnitId: r, drawingId: o }), u = s.getObject(g);
+          if (u == null)
+            return !0;
+          const d = this._drawingManagerService.getDrawingByParam(e);
           if (d == null)
             return;
           const { transform: h } = d;
           if (h == null)
             return !0;
-          const { left: f = 0, top: v = 0, width: w = 0, height: p = 0, angle: E = 0, flipX: _ = !1, flipY: M = !1, skewX: S = 0, skewY: R = 0 } = h;
-          if (u == null)
-            return !0;
+          const {
+            left: f = 0,
+            top: v = 0,
+            width: w = 0,
+            height: p = 0,
+            angle: E = 0,
+            flipX: _ = !1,
+            flipY: M = !1,
+            skewX: S = 0,
+            skewY: R = 0
+          } = h;
           u.transformByState({ left: f, top: v, width: w, height: p, angle: E, flipX: _, flipY: M, skewX: S, skewY: R });
         });
       })
@@ -1144,21 +1154,21 @@ let Me = class extends Ue {
     ), this.disposeWithMe(
       Ce(
         e.changeEnd$.subscribe((r) => {
-          const { objects: o } = r, i = this._filterUpdateParams(Ae(o, this._drawingManagerService), t);
-          i.length > 0 && this._drawingManagerService.featurePluginUpdateNotification(i);
+          const { objects: o } = r;
+          this._filterUpdateParams(Ae(o, this._drawingManagerService), t).length > 0;
         })
       )
     );
   }
 };
-Me = xn([
+Me = Gn([
   He(Le.Rendered, Me),
   ye(0, Fe),
   ye(1, ce),
   ye(2, ge),
   ye(3, ne)
 ], Me);
-const Gn = (a) => {
+const Wn = (a) => {
   const { src: n } = a;
   return n ? /* @__PURE__ */ c.createElement("div", null, /* @__PURE__ */ c.createElement("img", { src: n, alt: "Univer Image Viewer", style: { width: "100%", height: "100%", position: "relative" } })) : null;
 }, wt = "COMPONENT_IMAGE_VIEWER", vt = {
@@ -1166,10 +1176,10 @@ const Gn = (a) => {
   type: we.OPERATION,
   handler: (a, n) => !0
 };
-var Wn = Object.defineProperty, $n = Object.getOwnPropertyDescriptor, kn = (a, n, e, t) => {
-  for (var r = t > 1 ? void 0 : t ? $n(n, e) : n, o = a.length - 1, i; o >= 0; o--)
+var $n = Object.defineProperty, kn = Object.getOwnPropertyDescriptor, zn = (a, n, e, t) => {
+  for (var r = t > 1 ? void 0 : t ? kn(n, e) : n, o = a.length - 1, i; o >= 0; o--)
     (i = a[o]) && (r = (t ? i(n, e, r) : i(r)) || r);
-  return t && r && Wn(n, e, r), r;
+  return t && r && $n(n, e, r), r;
 }, fe = (a, n) => (e, t) => n(e, t, a);
 let Oe = class extends Ue {
   constructor(a, n, e, t, r) {
@@ -1177,7 +1187,7 @@ let Oe = class extends Ue {
   }
   _initCustomComponents() {
     const a = this._componentManager;
-    this.disposeWithMe(a.register(Ln, Hn)), this.disposeWithMe(a.register(wt, Gn));
+    this.disposeWithMe(a.register(An, Ln)), this.disposeWithMe(a.register(wt, Wn));
   }
   _initMenus() {
   }
@@ -1194,9 +1204,9 @@ let Oe = class extends Ue {
     this._initCommands(), this._initCustomComponents(), this._initMenus();
   }
 };
-Oe = kn([
+Oe = zn([
   He(Le.Rendered, Oe),
-  fe(0, se(st)),
+  fe(0, se(it)),
   fe(1, se(xt)),
   fe(2, Gt),
   fe(3, ce),
@@ -1295,10 +1305,10 @@ class Ee extends Bt {
     });
   }
 }
-var zn = Object.defineProperty, Fn = Object.getOwnPropertyDescriptor, Kn = (a, n, e, t) => {
-  for (var r = t > 1 ? void 0 : t ? Fn(n, e) : n, o = a.length - 1, i; o >= 0; o--)
+var Fn = Object.defineProperty, Kn = Object.getOwnPropertyDescriptor, Zn = (a, n, e, t) => {
+  for (var r = t > 1 ? void 0 : t ? Kn(n, e) : n, o = a.length - 1, i; o >= 0; o--)
     (i = a[o]) && (r = (t ? i(n, e, r) : i(r)) || r);
-  return t && r && zn(n, e, r), r;
+  return t && r && Fn(n, e, r), r;
 }, me = (a, n) => (e, t) => n(e, t, a);
 let Ne = class extends Ue {
   constructor(n, e, t, r, o, i) {
@@ -1548,7 +1558,7 @@ let Ne = class extends Ue {
     };
   }
 };
-Ne = Kn([
+Ne = Zn([
   He(Le.Rendered, Ne),
   me(0, ce),
   me(1, ne),
@@ -1557,10 +1567,10 @@ Ne = Kn([
   me(4, Wt),
   me(5, se(Z))
 ], Ne);
-var Zn = Object.defineProperty, Yn = Object.getOwnPropertyDescriptor, Xn = (a, n, e, t) => {
-  for (var r = t > 1 ? void 0 : t ? Yn(n, e) : n, o = a.length - 1, i; o >= 0; o--)
+var Yn = Object.defineProperty, Xn = Object.getOwnPropertyDescriptor, Jn = (a, n, e, t) => {
+  for (var r = t > 1 ? void 0 : t ? Xn(n, e) : n, o = a.length - 1, i; o >= 0; o--)
     (i = a[o]) && (r = (t ? i(n, e, r) : i(r)) || r);
-  return t && r && Zn(n, e, r), r;
+  return t && r && Yn(n, e, r), r;
 }, ae = (a, n) => (e, t) => n(e, t, a);
 const et = 50;
 let De = class extends Ue {
@@ -1614,22 +1624,22 @@ let De = class extends Ue {
       const { unitId: r, subUnitId: o, drawingId: i } = t, s = this._getSceneAndTransformerByDrawingSearch(r);
       if (s == null)
         return;
-      const { scene: l, transformer: g } = s, u = G({ unitId: r, subUnitId: o, drawingId: i }), d = l.getObject(u);
-      if (d == null)
+      const { scene: l } = s, g = G({ unitId: r, subUnitId: o, drawingId: i }), u = l.getObject(g);
+      if (u == null)
         return !0;
-      const h = this._drawingManagerService.getDrawingByParam(t);
-      if (h == null)
+      const d = this._drawingManagerService.getDrawingByParam(t);
+      if (d == null)
         return !0;
-      if (h.drawingType !== te.DRAWING_IMAGE)
+      if (d.drawingType !== te.DRAWING_IMAGE)
         return;
-      d.resetSize();
-      const { width: f, height: v } = d.getNativeSize();
+      u.resetSize();
+      const { width: h, height: f } = u.getNativeSize();
       e.includes(l) === !1 && e.push(l), n.push({
-        ...h,
+        ...d,
         transform: {
-          ...h.transform,
-          height: v,
-          width: f,
+          ...d.transform,
+          height: f,
+          width: h,
           angle: 0
         },
         srcRect: null,
@@ -1656,7 +1666,7 @@ let De = class extends Ue {
       if (s == null)
         return;
       const l = await this._drawingRenderService.renderImage(s, o.scene);
-      l && (this._addHoverForImage(l), this._addDialogForImage(l));
+      l != null && (this._addHoverForImage(l), this._addDialogForImage(l));
     });
   }
   _imageUpdateListener() {
@@ -1740,7 +1750,7 @@ let De = class extends Ue {
     };
   }
 };
-De = Xn([
+De = Jn([
   He(Le.Rendered, De),
   ae(0, ce),
   ae(1, ge),
@@ -1750,12 +1760,12 @@ De = Xn([
   ae(5, Fe),
   ae(6, se(Be))
 ], De);
-var Jn = Object.defineProperty, qn = Object.getOwnPropertyDescriptor, Qn = (a, n, e, t) => {
-  for (var r = t > 1 ? void 0 : t ? qn(n, e) : n, o = a.length - 1, i; o >= 0; o--)
+var qn = Object.defineProperty, Qn = Object.getOwnPropertyDescriptor, er = (a, n, e, t) => {
+  for (var r = t > 1 ? void 0 : t ? Qn(n, e) : n, o = a.length - 1, i; o >= 0; o--)
     (i = a[o]) && (r = (t ? i(n, e, r) : i(r)) || r);
-  return t && r && Jn(n, e, r), r;
+  return t && r && qn(n, e, r), r;
 }, tt = (a, n) => (e, t) => n(e, t, a);
-const er = "DRAWING_UI_PLUGIN";
+const tr = "DRAWING_UI_PLUGIN";
 var Ge;
 let nt = (Ge = class extends Lt {
   constructor(a, n, e) {
@@ -1775,19 +1785,19 @@ let nt = (Ge = class extends Lt {
       [De]
     ].forEach((e) => a.add(e));
   }
-}, Q(Ge, "pluginName", er), Ge);
-nt = Qn([
-  tt(1, se(st)),
+}, Q(Ge, "pluginName", tr), Ge);
+nt = er([
+  tt(1, se(it)),
   tt(2, se(Z))
 ], nt);
 export {
   je as AutoImageCropOperation,
-  Ln as COMPONENT_IMAGE_POPUP_MENU,
+  An as COMPONENT_IMAGE_POPUP_MENU,
   oe as CloseImageCropOperation,
-  ur as DrawingCommonPanel,
+  gr as DrawingCommonPanel,
   Be as DrawingRenderService,
   Ee as ImageCropperObject,
-  Hn as ImagePopupMenu,
+  Ln as ImagePopupMenu,
   vt as ImageResetSizeOperation,
   ke as OpenImageCropOperation,
   Ke as SetDrawingAlignOperation,

package/lib/index.css

@@ -1 +1 @@
-.univer-image-common-panel{text-align:center;padding:var(--padding-sm);font-size:var(--font-size-sm)}.univer-image-common-panel-grid{position:relative;width:100%}.univer-image-common-panel-border{border-top:1px solid rgb(var(--border-color));margin-top:20px}.univer-image-common-panel-title{color:rgb(var(--text-color-secondary));text-align:left}.univer-image-common-panel-row{position:relative;display:flex;justify-content:flex-start;align-items:flex-start;height:100%;margin-top:10px}.univer-image-common-panel-row-vertical{justify-content:center;align-items:center;height:36px}.univer-image-common-panel-column{width:100%}.univer-image-common-panel-column-center{display:flex;justify-content:center;align-items:center}.univer-image-common-panel-inline{display:flex;align-items:center;gap:var(--margin-xxs)}.univer-image-common-panel-span2{width:50%}.univer-image-common-panel-span3{width:33.33333333%}.univer-image-common-panel-input{width:90%}.univer-image-popup-menu{display:grid;gap:var(--margin-xxs);align-items:center;box-sizing:border-box;margin-top:0;margin-bottom:0;padding:var(--padding-sm);font-size:var(--font-size-base);background-color:rgb(var(--bg-color-secondary));border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow-lg)}.univer-image-popup-menu li{list-style:none}.univer-image-popup-menu-item{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;height:28px;font-size:var(--font-size-base);font-style:normal;line-height:20px;text-align:left;border-radius:4px;border-radius:var(--border-radius-base);transition:background .2s}.univer-image-popup-menu-item:hover{background-color:rgb(var(--bg-color-hover))}.univer-image-popup-menu-item-icon{position:absolute;top:50%;left:var(--padding-xs);transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.univer-image-popup-menu-item-title{padding:var(--padding-xs) var(--padding-xs) var(--padding-xs) 0;vertical-align:middle}.univer-image-popup-menu-item-hide{color:rgb(var(--text-color-secondary))}.univer-image-popup-menu-item:hover{background:rgb(var(--grey-100))}.univer-btn-container{display:flex;align-items:center;justify-content:center;padding:3px;background:#fff;border:1px solid rgb(var(--grey-200, #e5e5e5));border-radius:4px}.univer-btn-container:hover,.univer-btn-container.univer-btn-container-expand{background:rgb(var(--grey-100, #f5f5f5))}
+.univer-image-common-panel{text-align:center;padding:var(--padding-sm);font-size:var(--font-size-sm)}.univer-image-common-panel-grid{position:relative;width:100%}.univer-image-common-panel-border{border-top:1px solid rgb(var(--border-color));margin-top:20px}.univer-image-common-panel-title{color:rgb(var(--text-color-secondary));text-align:left}.univer-image-common-panel-subtitle{color:rgb(var(--text-color-primary));text-align:left}.univer-image-common-panel-row{position:relative;display:flex;justify-content:flex-start;align-items:flex-start;height:100%;margin-top:10px}.univer-image-common-panel-row-vertical{justify-content:center;align-items:center;height:36px}.univer-image-common-panel-column{width:100%}.univer-image-common-panel-column-center{display:flex;justify-content:center;align-items:center}.univer-image-common-panel-inline{display:flex;align-items:center;gap:var(--margin-xxs)}.univer-image-common-panel-span2{width:50%}.univer-image-common-panel-span3{width:33.33333333%}.univer-image-common-panel-input{width:90%}.univer-image-popup-menu{display:grid;gap:var(--margin-xxs);align-items:center;box-sizing:border-box;margin-top:0;margin-bottom:0;padding:var(--padding-sm);font-size:var(--font-size-base);background-color:rgb(var(--bg-color-secondary));border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow-lg)}.univer-image-popup-menu li{list-style:none}.univer-image-popup-menu-item{cursor:pointer;position:relative;display:flex;align-items:center;box-sizing:border-box;height:28px;font-size:var(--font-size-base);font-style:normal;line-height:20px;text-align:left;border-radius:4px;border-radius:var(--border-radius-base);transition:background .2s}.univer-image-popup-menu-item:hover{background-color:rgb(var(--bg-color-hover))}.univer-image-popup-menu-item-icon{position:absolute;top:50%;left:var(--padding-xs);transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.univer-image-popup-menu-item-title{padding:var(--padding-xs) var(--padding-xs) var(--padding-xs) 0;vertical-align:middle}.univer-image-popup-menu-item-hide{color:rgb(var(--text-color-secondary))}.univer-image-popup-menu-item:hover{background:rgb(var(--grey-100))}.univer-btn-container{display:flex;align-items:center;justify-content:center;padding:3px;background:#fff;border:1px solid rgb(var(--grey-200, #e5e5e5));border-radius:4px}.univer-btn-container:hover,.univer-btn-container.univer-btn-container-expand{background:rgb(var(--grey-100, #f5f5f5))}

package/lib/locale/vi-VN.json

@@ -0,0 +1,54 @@
+{
+  "image-popup": {
+    "replace": "Thay thế",
+    "delete": "Xóa",
+    "edit": "Chỉnh sửa",
+    "crop": "Cắt",
+    "reset": "Đặt lại kích thước"
+  },
+  "image-cropper": {
+    "error": "Không thể cắt phần tử không phải hình ảnh"
+  },
+  "image-panel": {
+    "arrange": {
+      "title": "Sắp xếp",
+      "forward": "Di chuyển lên một lớp",
+      "backward": "Di chuyển xuống một lớp",
+      "front": "Đưa lên trên cùng",
+      "back": "Đưa xuống dưới cùng"
+    },
+    "transform": {
+      "title": "Biến đổi",
+      "rotate": "Xoay (°)",
+      "x": "X (px)",
+      "y": "Y (px)",
+      "width": "Chiều rộng (px)",
+      "height": "Chiều cao (px)",
+      "lock": "Khóa tỷ lệ (%)"
+    },
+    "crop": {
+      "title": "Cắt",
+      "start": "Bắt đầu cắt",
+      "mode": "Cắt tự do tỷ lệ"
+    },
+    "group": {
+      "title": "Nhóm",
+      "group": "Nhóm",
+      "reGroup": "Nhóm lại",
+      "unGroup": "Hủy nhóm"
+    },
+    "align": {
+      "title": "Căn chỉnh",
+      "default": "Chọn cách căn chỉnh",
+      "left": "Căn trái",
+      "center": "Căn giữa theo chiều ngang",
+      "right": "Căn phải",
+      "top": "Căn trên",
+      "middle": "Căn giữa theo chiều dọc",
+      "bottom": "Căn dưới",
+      "horizon": "Phân phối theo chiều ngang",
+      "vertical": "Phân phối theo chiều dọc"
+    },
+    "null": "Không có đối tượng nào được chọn"
+  }
+}

package/lib/locale/zh-TW.json

@@ -0,0 +1,54 @@
+{
+  "image-popup": {
+    "replace": "替換",
+    "delete": "刪除",
+    "edit": "編輯",
+    "crop": "裁切",
+    "reset": "重置大小"
+  },
+  "image-cropper": {
+    "error": "無法裁切非圖片元素"
+  },
+  "image-panel": {
+    "arrange": {
+      "title": "排列",
+      "forward": "上移一層",
+      "backward": "下移一層",
+      "front": "置於頂層",
+      "back": "置於底層"
+    },
+    "transform": {
+      "title": "變換",
+      "rotate": "旋轉 (°)",
+      "x": "X (px)",
+      "y": "Y (px)",
+      "width": "寬度 (px)",
+      "height": "高度 (px)",
+      "lock": "鎖定比例 (%)"
+    },
+    "crop": {
+      "title": "裁切",
+      "start": "開始裁切",
+      "mode": "自由比例裁切"
+    },
+    "group": {
+      "title": "組合",
+      "group": "組合",
+      "reGroup": "重新組合",
+      "unGroup": "取消組合"
+    },
+    "align": {
+      "title": "對齊方式",
+      "default": "選擇對齊方式",
+      "left": "左對齊",
+      "center": "水平居中",
+      "right": "右對齊",
+      "top": "頂部對齊",
+      "middle": "垂直居中",
+      "bottom": "底部對齊",
+      "horizon": "水平分佈",
+      "vertical": "垂直分佈"
+    },
+    "null": "未選取任何物件"
+  }
+}

package/lib/types/controllers/drawing-ui.controller.d.ts

@@ -1,6 +1,5 @@
-import { Disposable, ICommandService, LocaleService } from '@univerjs/core';
+import { Disposable, ICommandService, Injector, LocaleService } from '@univerjs/core';
 import { ComponentManager, IMenuService } from '@univerjs/ui';
-import { Injector } from '@wendellhu/redi';
 
 export declare class DrawingUIController extends Disposable {
     private readonly _injector;

package/lib/types/locale/vi-VN.d.ts

@@ -0,0 +1,4 @@
+import { default as zhCN } from './zh-CN';
+
+declare const locale: typeof zhCN;
+export default locale;

package/lib/types/locale/zh-TW.d.ts

@@ -0,0 +1,4 @@
+import { default as zhCN } from './zh-CN';
+
+declare const locale: typeof zhCN;
+export default locale;

package/lib/types/plugin.d.ts

@@ -1,5 +1,4 @@
-import { LocaleService, Plugin } from '@univerjs/core';
-import { Injector } from '@wendellhu/redi';
+import { Injector, LocaleService, Plugin } from '@univerjs/core';
 
 export declare class UniverDrawingUIPlugin extends Plugin {
     protected _injector: Injector;