@univerjs/drawing-ui 0.4.2 → 0.5.0-beta.0

package/lib/es/index.js

@@ -1,820 +1,916 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { getDrawingShapeKeyByDrawingSearch, DrawingTypeEnum, ImageSourceType, IDrawingManagerService, IImageIoService, ArrangeTypeEnum } from "@univerjs/drawing";
-import { Group, DRAWING_OBJECT_LAYER_INDEX, Image, IRenderManagerService, getGroupState, transformObjectOutOfGroup, RENDER_CLASS_TYPE, Shape, Rect, Canvas, precisionTo, CURSOR_TYPE, Vector2, degToRad } from "@univerjs/engine-render";
-import { UniverInstanceType, CommandType, useDependency, ICommandService, LocaleService, Tools, debounce, Inject, Disposable, checkIfMove, toDisposable, IUniverInstanceService, Injector, Plugin, IConfigService } from "@univerjs/core";
-import React, { useState, forwardRef, useRef, createElement, useEffect } from "react";
-import { Select, Button, InputNumber, Checkbox, Dropdown, MessageType } from "@univerjs/design";
-import { ComponentManager, IMessageService, IDialogService } from "@univerjs/ui";
-import { filter, switchMap } from "rxjs";
-function insertGroupObject(objectParam, object, scene, drawingManagerService) {
-  const groupParam = drawingManagerService.getDrawingByParam(objectParam);
-  if (groupParam == null)
+var On = Object.defineProperty;
+var Nn = (i, t, n) => t in i ? On(i, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[t] = n;
+var Q = (i, t, n) => Nn(i, typeof t != "symbol" ? t + "" : t, n);
+import { getDrawingShapeKeyByDrawingSearch as G, DrawingTypeEnum as ee, ImageSourceType as Dn, IDrawingManagerService as ne, IImageIoService as an, ArrangeTypeEnum as be } from "@univerjs/drawing";
+import { Group as Ce, DRAWING_OBJECT_LAYER_INDEX as Fe, Image as ke, IRenderManagerService as ue, getGroupState as En, transformObjectOutOfGroup as Tn, RENDER_CLASS_TYPE as Xe, Shape as Bn, Rect as Un, Canvas as Hn, precisionTo as Ie, CURSOR_TYPE as xe, Vector2 as We, degToRad as qe } from "@univerjs/engine-render";
+import { UniverInstanceType as Me, CommandType as ve, useDependency as L, ICommandService as me, LocaleService as te, Tools as An, debounce as Pe, Inject as Ue, Disposable as He, checkIfMove as sn, toDisposable as we, IUniverInstanceService as Ke, Injector as Ln, Plugin as Vn, IConfigService as Gn } from "@univerjs/core";
+import Wn, { useState as A, forwardRef as Y, useRef as on, createElement as Z, useEffect as _e } from "react";
+import { Select as cn, Button as ce, InputNumber as fe, Checkbox as $n, Dropdown as kn, MessageType as Je } from "@univerjs/design";
+import { ComponentManager as zn, IMessageService as Fn, IDialogService as Kn } from "@univerjs/ui";
+import { filter as Yn, switchMap as Zn } from "rxjs";
+function Xn(i, t, n, e) {
+  const r = e.getDrawingByParam(i);
+  if (r == null)
     return;
-  const groupKey = getDrawingShapeKeyByDrawingSearch(objectParam), groupObject = scene.getObject(groupKey);
-  if (groupObject && !(groupObject instanceof Group))
+  const s = G(i), a = n.getObject(s);
+  if (a && !(a instanceof Ce))
     return;
-  if (groupObject != null) {
-    groupObject.addObject(object);
+  if (a != null) {
+    a.addObject(t);
     return;
   }
-  const group = new Group(groupKey);
-  scene.addObject(group, DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group), group.addObject(object);
-  const { transform } = groupParam;
-  transform && group.transformByState(
+  const o = new Ce(s);
+  n.addObject(o, Fe).attachTransformerTo(o), o.addObject(t);
+  const { transform: l } = r;
+  l && o.transformByState(
     {
-      left: transform.left,
-      top: transform.top,
-      angle: transform.angle
+      left: l.left,
+      top: l.top,
+      angle: l.angle
     }
   );
 }
-__name(insertGroupObject, "insertGroupObject");
-function getCurrentUnitInfo(currentUniverService, propUnitId) {
-  var _a7;
-  const current = propUnitId ? currentUniverService.getUnit(propUnitId) : currentUniverService.getFocusedUnit();
-  if (current == null)
+function ln(i, t) {
+  var s;
+  const n = t ? i.getUnit(t) : i.getFocusedUnit();
+  if (n == null)
     return;
-  const unitId = current.getUnitId();
-  let subUnitId;
-  return current.type === UniverInstanceType.UNIVER_SHEET ? subUnitId = (_a7 = current.getActiveSheet()) == null ? void 0 : _a7.getSheetId() : (current.type === UniverInstanceType.UNIVER_DOC || current.type === UniverInstanceType.UNIVER_SLIDE) && (subUnitId = unitId), { unitId, subUnitId, current };
+  const e = n.getUnitId();
+  let r;
+  return n.type === Me.UNIVER_SHEET ? r = (s = n.getActiveSheet()) == null ? void 0 : s.getSheetId() : (n.type === Me.UNIVER_DOC || n.type === Me.UNIVER_SLIDE) && (r = e), { unitId: e, subUnitId: r, current: n };
 }
-__name(getCurrentUnitInfo, "getCurrentUnitInfo");
-var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor, __decorateClass$5 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$5(target, key, result), result;
-}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5"), _a;
-let DrawingRenderService = (_a = class {
-  constructor(_drawingManagerService, _imageIoService) {
-    this._drawingManagerService = _drawingManagerService, this._imageIoService = _imageIoService;
+var qn = Object.defineProperty, Jn = Object.getOwnPropertyDescriptor, Qn = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? Jn(t, n) : t, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
+  return e && r && qn(t, n, r), r;
+}, Qe = (i, t) => (n, e) => t(n, e, i);
+let Oe = class {
+  constructor(i, t) {
+    this._drawingManagerService = i, this._imageIoService = t;
   }
   // eslint-disable-next-line max-lines-per-function
-  async renderImages(imageParam, scene) {
+  async renderImages(i, t) {
     const {
-      transform: singleTransform,
-      drawingType,
-      source,
-      imageSourceType,
-      srcRect,
-      prstGeom,
-      groupId,
-      unitId,
-      subUnitId,
-      drawingId,
-      isMultiTransform,
-      transforms: multiTransforms
-    } = imageParam;
-    if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE || !this._drawingManagerService.getDrawingVisible() || singleTransform == null)
+      transform: n,
+      drawingType: e,
+      source: r,
+      imageSourceType: s,
+      srcRect: a,
+      prstGeom: o,
+      groupId: l,
+      unitId: g,
+      subUnitId: u,
+      drawingId: d,
+      isMultiTransform: h,
+      transforms: f
+    } = i;
+    if (e !== ee.DRAWING_IMAGE || !this._drawingManagerService.getDrawingVisible() || n == null)
       return;
-    const transforms = isMultiTransform && multiTransforms ? multiTransforms : [singleTransform], images = [];
-    for (const transform of transforms) {
-      const { left, top, width, height, angle, flipX, flipY, skewX, skewY } = transform, index = transforms.indexOf(transform), imageShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }, isMultiTransform ? index : void 0), imageShape = scene.getObject(imageShapeKey);
-      if (imageShape != null) {
-        imageShape.transformByState({ left, top, width, height, angle, flipX, flipY, skewX, skewY });
+    const v = h && f ? f : [n], w = [];
+    for (const p of v) {
+      const { left: S, top: _, width: R, height: b, angle: N, flipX: I, flipY: y, skewX: P, skewY: M } = p, D = v.indexOf(p), B = G({ unitId: g, subUnitId: u, drawingId: d }, h ? D : void 0), E = t.getObject(B);
+      if (E != null) {
+        E.transformByState({ left: S, top: _, width: R, height: b, angle: N, flipX: I, flipY: y, skewX: P, skewY: M });
         continue;
       }
-      const orders = this._drawingManagerService.getDrawingOrder(unitId, subUnitId), zIndex = orders.indexOf(drawingId), imageConfig = { ...transform, zIndex: zIndex === -1 ? orders.length - 1 : zIndex }, imageNativeCache = this._imageIoService.getImageSourceCache(source, imageSourceType);
-      let shouldBeCache = !1;
-      if (imageNativeCache != null)
-        imageConfig.image = imageNativeCache;
+      const re = this._drawingManagerService.getDrawingOrder(g, u), W = re.indexOf(d), q = { ...p, zIndex: W === -1 ? re.length - 1 : W }, Se = this._imageIoService.getImageSourceCache(r, s);
+      let ie = !1;
+      if (Se != null)
+        q.image = Se;
       else {
-        if (imageSourceType === ImageSourceType.UUID)
+        if (s === Dn.UUID)
           try {
-            imageConfig.url = await this._imageIoService.getImage(source);
-          } catch (error) {
-            console.error(error);
+            q.url = await this._imageIoService.getImage(r);
+          } catch (Ge) {
+            console.error(Ge);
             continue;
           }
         else
-          imageConfig.url = source;
-        shouldBeCache = !0;
+          q.url = r;
+        ie = !0;
       }
-      if (scene.getObject(imageShapeKey))
+      if (t.getObject(B))
         continue;
-      imageConfig.printable = !0;
-      const image = new Image(imageShapeKey, imageConfig);
-      if (shouldBeCache && this._imageIoService.addImageSourceCache(source, imageSourceType, image.getNative()), !this._drawingManagerService.getDrawingVisible())
+      q.printable = !0;
+      const k = new ke(B, q);
+      if (ie && this._imageIoService.addImageSourceCache(r, s, k.getNative()), !this._drawingManagerService.getDrawingVisible())
         continue;
-      const imageObject = scene.addObject(image, DRAWING_OBJECT_LAYER_INDEX);
-      this._drawingManagerService.getDrawingEditable() && imageObject.attachTransformerTo(image), groupId && insertGroupObject({ drawingId: groupId, unitId, subUnitId }, image, scene, this._drawingManagerService), prstGeom != null && image.setPrstGeom(prstGeom), srcRect != null && image.setSrcRect(srcRect), images.push(image);
+      const Ve = t.addObject(k, Fe);
+      this._drawingManagerService.getDrawingEditable() && Ve.attachTransformerTo(k), l && Xn({ drawingId: l, unitId: g, subUnitId: u }, k, t, this._drawingManagerService), o != null && k.setPrstGeom(o), a != null && k.setSrcRect(a), w.push(k);
     }
-    return images;
-  }
-  renderDrawing(param, scene) {
-    const drawingParam = this._drawingManagerService.getDrawingByParam(param);
-    if (drawingParam != null)
-      switch (drawingParam.drawingType) {
-        case DrawingTypeEnum.DRAWING_IMAGE:
-          return this.renderImages(drawingParam, scene);
+    return w;
+  }
+  renderDrawing(i, t) {
+    const n = this._drawingManagerService.getDrawingByParam(i);
+    if (n != null)
+      switch (n.drawingType) {
+        case ee.DRAWING_IMAGE:
+          return this.renderImages(n, t);
       }
   }
-}, __name(_a, "DrawingRenderService"), _a);
-DrawingRenderService = __decorateClass$5([
-  __decorateParam$5(0, IDrawingManagerService),
-  __decorateParam$5(1, IImageIoService)
-], DrawingRenderService);
-function getUpdateParams(objects, drawingManagerService) {
-  const params = [];
-  return objects.forEach((object) => {
-    const { oKey, left, top, height, width, angle } = object, searchParam = drawingManagerService.getDrawingOKey(oKey);
-    if (searchParam == null)
-      return params.push(null), !0;
-    const { unitId, subUnitId, drawingId, drawingType } = searchParam, param = {
-      unitId,
-      subUnitId,
-      drawingId,
-      drawingType,
+};
+Oe = Qn([
+  Qe(0, ne),
+  Qe(1, an)
+], Oe);
+function Ae(i, t) {
+  const n = [];
+  return i.forEach((e) => {
+    const { oKey: r, left: s, top: a, height: o, width: l, angle: g } = e, u = t.getDrawingOKey(r);
+    if (u == null)
+      return n.push(null), !0;
+    const { unitId: d, subUnitId: h, drawingId: f, drawingType: v } = u, w = {
+      unitId: d,
+      subUnitId: h,
+      drawingId: f,
+      drawingType: v,
       transform: {
-        left,
-        top,
-        height,
-        width,
-        angle
+        left: s,
+        top: a,
+        height: o,
+        width: l,
+        angle: g
       }
     };
-    drawingType === DrawingTypeEnum.DRAWING_IMAGE && (param.srcRect = object.srcRect), params.push(param);
-  }), params;
+    v === ee.DRAWING_IMAGE && (w.srcRect = e.srcRect), n.push(w);
+  }), n;
 }
-__name(getUpdateParams, "getUpdateParams");
-function r(e) {
-  var t, f, n = "";
-  if (typeof e == "string" || typeof e == "number") n += e;
-  else if (typeof e == "object") if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
+var mn = { exports: {} }, Le = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var et = Wn, nt = Symbol.for("react.element"), tt = Symbol.for("react.fragment"), rt = Object.prototype.hasOwnProperty, it = et.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, at = { key: !0, ref: !0, __self: !0, __source: !0 };
+function gn(i, t, n) {
+  var e, r = {}, s = null, a = null;
+  n !== void 0 && (s = "" + n), t.key !== void 0 && (s = "" + t.key), t.ref !== void 0 && (a = t.ref);
+  for (e in t) rt.call(t, e) && !at.hasOwnProperty(e) && (r[e] = t[e]);
+  if (i && i.defaultProps) for (e in t = i.defaultProps, t) r[e] === void 0 && (r[e] = t[e]);
+  return { $$typeof: nt, type: i, key: s, ref: a, props: r, _owner: it.current };
 }
-__name(r, "r");
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
+Le.Fragment = tt;
+Le.jsx = gn;
+Le.jsxs = gn;
+mn.exports = Le;
+var c = mn.exports;
+function un(i) {
+  var t, n, e = "";
+  if (typeof i == "string" || typeof i == "number") e += i;
+  else if (typeof i == "object") if (Array.isArray(i)) {
+    var r = i.length;
+    for (t = 0; t < r; t++) i[t] && (n = un(i[t])) && (e && (e += " "), e += n);
+  } else for (n in i) i[n] && (e && (e += " "), e += n);
+  return e;
 }
-__name(clsx, "clsx");
-var AlignType = /* @__PURE__ */ ((AlignType2) => (AlignType2.default = "0", AlignType2.left = "1", AlignType2.center = "2", AlignType2.right = "3", AlignType2.top = "4", AlignType2.middle = "5", AlignType2.bottom = "6", AlignType2.horizon = "7", AlignType2.vertical = "8", AlignType2))(AlignType || {});
-const SetDrawingAlignOperation = {
+function O() {
+  for (var i, t, n = 0, e = "", r = arguments.length; n < r; n++) (i = arguments[n]) && (t = un(i)) && (e && (e += " "), e += t);
+  return e;
+}
+var j = /* @__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))(j || {});
+const Ye = {
   id: "sheet.operation.set-image-align",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => !0, "handler")
-}, imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "univer-image-common-panel-grid", imageCommonPanelBorder = "univer-image-common-panel-border", imageCommonPanelTitle = "univer-image-common-panel-title", imageCommonPanelSubtitle = "univer-image-common-panel-subtitle", imageCommonPanelRow = "univer-image-common-panel-row", imageCommonPanelRowVertical = "univer-image-common-panel-row-vertical", imageCommonPanelColumn = "univer-image-common-panel-column", imageCommonPanelColumnCenter = "univer-image-common-panel-column-center", imageCommonPanelInline = "univer-image-common-panel-inline", imageCommonPanelSpan2 = "univer-image-common-panel-span2", imageCommonPanelSpan3 = "univer-image-common-panel-span3", imageCommonPanelInput = "univer-image-common-panel-input", styles$1 = {
-  imageCommonPanel,
-  imageCommonPanelGrid,
-  imageCommonPanelBorder,
-  imageCommonPanelTitle,
-  imageCommonPanelSubtitle,
-  imageCommonPanelRow,
-  imageCommonPanelRowVertical,
-  imageCommonPanelColumn,
-  imageCommonPanelColumnCenter,
-  imageCommonPanelInline,
-  imageCommonPanelSpan2,
-  imageCommonPanelSpan3,
-  imageCommonPanelInput
-}, DrawingAlign = /* @__PURE__ */ __name((props) => {
-  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), { alignShow } = props, [alignValue, setAlignValue] = useState(AlignType.default), alignOptions = [
+  type: ve.OPERATION,
+  handler: (i, t) => !0
+}, st = "univer-image-common-panel", ot = "univer-image-common-panel-grid", ct = "univer-image-common-panel-border", lt = "univer-image-common-panel-title", mt = "univer-image-common-panel-subtitle", gt = "univer-image-common-panel-row", ut = "univer-image-common-panel-row-vertical", dt = "univer-image-common-panel-column", ht = "univer-image-common-panel-column-center", ft = "univer-image-common-panel-inline", pt = "univer-image-common-panel-span2", Ct = "univer-image-common-panel-span3", wt = "univer-image-common-panel-input", m = {
+  imageCommonPanel: st,
+  imageCommonPanelGrid: ot,
+  imageCommonPanelBorder: ct,
+  imageCommonPanelTitle: lt,
+  imageCommonPanelSubtitle: mt,
+  imageCommonPanelRow: gt,
+  imageCommonPanelRowVertical: ut,
+  imageCommonPanelColumn: dt,
+  imageCommonPanelColumnCenter: ht,
+  imageCommonPanelInline: ft,
+  imageCommonPanelSpan2: pt,
+  imageCommonPanelSpan3: Ct,
+  imageCommonPanelInput: wt
+}, vt = (i) => {
+  const t = L(me), n = L(te), { alignShow: e } = i, [r, s] = A(j.default), a = [
     {
-      label: localeService.t("image-panel.align.default"),
-      value: AlignType.default
+      label: n.t("image-panel.align.default"),
+      value: j.default
     },
     {
       options: [
         {
-          label: localeService.t("image-panel.align.left"),
-          value: AlignType.left
+          label: n.t("image-panel.align.left"),
+          value: j.left
         },
         {
-          label: localeService.t("image-panel.align.center"),
-          value: AlignType.center
+          label: n.t("image-panel.align.center"),
+          value: j.center
         },
         {
-          label: localeService.t("image-panel.align.right"),
-          value: AlignType.right
+          label: n.t("image-panel.align.right"),
+          value: j.right
         }
       ]
     },
     {
       options: [
         {
-          label: localeService.t("image-panel.align.top"),
-          value: AlignType.top
+          label: n.t("image-panel.align.top"),
+          value: j.top
         },
         {
-          label: localeService.t("image-panel.align.middle"),
-          value: AlignType.middle
+          label: n.t("image-panel.align.middle"),
+          value: j.middle
         },
         {
-          label: localeService.t("image-panel.align.bottom"),
-          value: AlignType.bottom
+          label: n.t("image-panel.align.bottom"),
+          value: j.bottom
         }
       ]
     },
     {
       options: [
         {
-          label: localeService.t("image-panel.align.horizon"),
-          value: AlignType.horizon
+          label: n.t("image-panel.align.horizon"),
+          value: j.horizon
         },
         {
-          label: localeService.t("image-panel.align.vertical"),
-          value: AlignType.vertical
+          label: n.t("image-panel.align.vertical"),
+          value: j.vertical
         }
       ]
     }
   ];
-  function handleAlignChange(value) {
-    setAlignValue(value), commandService.executeCommand(SetDrawingAlignOperation.id, {
-      alignType: value
+  function o(g) {
+    s(g), t.executeCommand(Ye.id, {
+      alignType: g
     });
   }
-  __name(handleAlignChange, "handleAlignChange");
-  const gridDisplay = /* @__PURE__ */ __name((isShow) => isShow ? "block" : "none", "gridDisplay");
-  return /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelGrid, styles$1.imageCommonPanelBorder), style: { display: gridDisplay(alignShow) } }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-panel.align.title")))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn) }, /* @__PURE__ */ React.createElement(Select, { value: alignValue, options: alignOptions, onChange: handleAlignChange }))));
-}, "DrawingAlign");
-var __assign = function() {
-  return __assign = Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
+  const l = (g) => g ? "block" : "none";
+  return /* @__PURE__ */ c.jsxs("div", { className: O(m.imageCommonPanelGrid, m.imageCommonPanelBorder), style: { display: l(e) }, children: [
+    /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelTitle), children: /* @__PURE__ */ c.jsx("div", { children: n.t("image-panel.align.title") }) }) }),
+    /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn), children: /* @__PURE__ */ c.jsx(cn, { value: r, 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]);
     }
-    return t;
-  }, __assign.apply(this, arguments);
-}, __rest = function(s, e) {
-  var t = {};
-  for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
-  if (s != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++)
-      e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
-  return t;
-}, IconBase = forwardRef(function(props, ref) {
-  var icon = props.icon, id = props.id, className = props.className, extend = props.extend, restProps = __rest(props, ["icon", "id", "className", "extend"]), cls = "univerjs-icon univerjs-icon-".concat(id, " ").concat(className || "").trim(), idSuffix = useRef("_".concat(generateShortUuid()));
-  return render(icon, "".concat(id), { defIds: icon.defIds, idSuffix: idSuffix.current }, __assign({ ref, className: cls }, restProps), extend);
+    return i;
+  }, $.apply(this, arguments);
+}, _t = function(i, t) {
+  var n = {};
+  for (var e in i) Object.prototype.hasOwnProperty.call(i, e) && t.indexOf(e) < 0 && (n[e] = i[e]);
+  if (i != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var r = 0, e = Object.getOwnPropertySymbols(i); r < e.length; r++)
+      t.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(i, e[r]) && (n[e[r]] = i[e[r]]);
+  return n;
+}, X = Y(function(i, t) {
+  var n = i.icon, e = i.id, r = i.className, s = i.extend, a = _t(i, ["icon", "id", "className", "extend"]), o = "univerjs-icon univerjs-icon-".concat(e, " ").concat(r || "").trim(), l = on("_".concat(It()));
+  return dn(n, "".concat(e), { defIds: n.defIds, idSuffix: l.current }, $({ ref: t, className: o }, a), s);
 });
-function render(node, id, runtimeProps, rootProps, extend) {
-  return createElement(node.tag, __assign(__assign({ key: id }, replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend)), rootProps), (replaceRuntimeIdsInDefs(node, runtimeProps).children || []).map(function(child, index) {
-    return render(child, "".concat(id, "-").concat(node.tag, "-").concat(index), runtimeProps, void 0, extend);
+function dn(i, t, n, e, r) {
+  return Z(i.tag, $($({ key: t }, St(i, n, r)), e), (bt(i, n).children || []).map(function(s, a) {
+    return dn(s, "".concat(t, "-").concat(i.tag, "-").concat(a), n, void 0, r);
   }));
 }
-__name(render, "render");
-function replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend) {
-  var attrs = __assign({}, node.attrs);
-  extend != null && extend.colorChannel1 && attrs.fill === "colorChannel1" && (attrs.fill = extend.colorChannel1);
-  var defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a7) {
-    var key = _a7[0], value = _a7[1];
-    typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
-  })), attrs;
+function St(i, t, n) {
+  var e = $({}, i.attrs);
+  n != null && n.colorChannel1 && e.fill === "colorChannel1" && (e.fill = n.colorChannel1);
+  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(s) {
+    var a = s[0], o = s[1];
+    typeof o == "string" && (e[a] = o.replace(/url\(#(.*)\)/, "url(#$1".concat(t.idSuffix, ")")));
+  })), e;
 }
-__name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
-function replaceRuntimeIdsInDefs(node, runtimeProps) {
-  var _a7, defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a7 = node.children) === null || _a7 === void 0) && _a7.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
-    return typeof child.attrs.id == "string" && defIds && defIds.indexOf(child.attrs.id) > -1 ? __assign(__assign({}, child), { attrs: __assign(__assign({}, child.attrs), { id: child.attrs.id + runtimeProps.idSuffix }) }) : child;
-  }) }) : node;
+function bt(i, t) {
+  var n, e = t.defIds;
+  return !e || e.length === 0 ? i : i.tag === "defs" && (!((n = i.children) === null || n === void 0) && n.length) ? $($({}, i), { children: i.children.map(function(r) {
+    return typeof r.attrs.id == "string" && e && e.indexOf(r.attrs.id) > -1 ? $($({}, r), { attrs: $($({}, r.attrs), { id: r.attrs.id + t.idSuffix }) }) : r;
+  }) }) : i;
 }
-__name(replaceRuntimeIdsInDefs, "replaceRuntimeIdsInDefs");
-function generateShortUuid() {
+function It() {
   return Math.random().toString(36).substring(2, 8);
 }
-__name(generateShortUuid, "generateShortUuid");
-IconBase.displayName = "UniverIcon";
-var element$8 = { 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" } }] }, Autofill = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+X.displayName = "UniverIcon";
+var Pt = { 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" } }] }, hn = Y(function(i, t) {
+  return Z(X, Object.assign({}, i, {
     id: "autofill",
-    ref,
-    icon: element$8
+    ref: t,
+    icon: Pt
   }));
 });
-Autofill.displayName = "Autofill";
-var element$7 = { 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" } }] }, BottomSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+hn.displayName = "Autofill";
+var yt = { 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" } }] }, fn = Y(function(i, t) {
+  return Z(X, Object.assign({}, i, {
     id: "bottom-single",
-    ref,
-    icon: element$7
+    ref: t,
+    icon: yt
   }));
 });
-BottomSingle.displayName = "BottomSingle";
-var element$6 = { 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" } }] }, CreateCopySingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+fn.displayName = "BottomSingle";
+var jt = { 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" } }] }, pn = Y(function(i, t) {
+  return Z(X, Object.assign({}, i, {
     id: "create-copy-single",
-    ref,
-    icon: element$6
+    ref: t,
+    icon: jt
   }));
 });
-CreateCopySingle.displayName = "CreateCopySingle";
-var element$5 = { 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" } }] }, GroupSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+pn.displayName = "CreateCopySingle";
+var Rt = { 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" } }] }, Cn = Y(function(i, t) {
+  return Z(X, Object.assign({}, i, {
     id: "group-single",
-    ref,
-    icon: element$5
+    ref: t,
+    icon: Rt
   }));
 });
-GroupSingle.displayName = "GroupSingle";
-var element$4 = { 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" } }] }, MoreDownSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+Cn.displayName = "GroupSingle";
+var Mt = { 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" } }] }, wn = Y(function(i, t) {
+  return Z(X, Object.assign({}, i, {
     id: "more-down-single",
-    ref,
-    icon: element$4
+    ref: t,
+    icon: Mt
   }));
 });
-MoreDownSingle.displayName = "MoreDownSingle";
-var element$3 = { 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" } }] }, MoveDownSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+wn.displayName = "MoreDownSingle";
+var xt = { 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" } }] }, vn = Y(function(i, t) {
+  return Z(X, Object.assign({}, i, {
     id: "move-down-single",
-    ref,
-    icon: element$3
+    ref: t,
+    icon: xt
   }));
 });
-MoveDownSingle.displayName = "MoveDownSingle";
-var element$2 = { 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" } }] }, MoveUpSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+vn.displayName = "MoveDownSingle";
+var Ot = { 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" } }] }, _n = Y(function(i, t) {
+  return Z(X, Object.assign({}, i, {
     id: "move-up-single",
-    ref,
-    icon: element$2
+    ref: t,
+    icon: Ot
   }));
 });
-MoveUpSingle.displayName = "MoveUpSingle";
-var element$1 = { 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" } }] }, TopmostSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+_n.displayName = "MoveUpSingle";
+var Nt = { 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" } }] }, Sn = Y(function(i, t) {
+  return Z(X, Object.assign({}, i, {
     id: "topmost-single",
-    ref,
-    icon: element$1
+    ref: t,
+    icon: Nt
   }));
 });
-TopmostSingle.displayName = "TopmostSingle";
-var element = { 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" } }] }, UngroupSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+Sn.displayName = "TopmostSingle";
+var Dt = { 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" } }] }, bn = Y(function(i, t) {
+  return Z(X, Object.assign({}, i, {
     id: "ungroup-single",
-    ref,
-    icon: element
+    ref: t,
+    icon: Dt
   }));
 });
-UngroupSingle.displayName = "UngroupSingle";
-const DrawingArrange = /* @__PURE__ */ __name((props) => {
-  const { arrangeShow, drawings: focusDrawings } = props, localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), gridDisplay = /* @__PURE__ */ __name((isShow) => isShow ? "block" : "none", "gridDisplay"), [drawings, setDrawings] = useState(focusDrawings);
-  useEffect(() => {
-    const focusDispose = drawingManagerService.focus$.subscribe((drawings2) => {
-      setDrawings(drawings2);
+bn.displayName = "UngroupSingle";
+const Et = (i) => {
+  const { arrangeShow: t, drawings: n } = i, e = L(te), r = L(ne), s = (g) => g ? "block" : "none", [a, o] = A(n);
+  _e(() => {
+    const g = r.focus$.subscribe((u) => {
+      o(u);
     });
     return () => {
-      focusDispose.unsubscribe();
+      g.unsubscribe();
     };
   }, []);
-  const onArrangeBtnClick = /* @__PURE__ */ __name((arrangeType) => {
-    const unitId = drawings[0].unitId, subUnitId = drawings[0].subUnitId, drawingIds = drawings.map((drawing) => drawing.drawingId);
-    drawingManagerService.featurePluginOrderUpdateNotification({ unitId, subUnitId, drawingIds, arrangeType });
-  }, "onArrangeBtnClick");
-  return /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelGrid, style: { display: gridDisplay(arrangeShow) } }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-panel.arrange.title")))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-    onArrangeBtnClick(ArrangeTypeEnum.forward);
-  }, "onClick") }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(MoveUpSingle, null), localeService.t("image-panel.arrange.forward")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-    onArrangeBtnClick(ArrangeTypeEnum.backward);
-  }, "onClick") }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(MoveDownSingle, null), localeService.t("image-panel.arrange.backward"))))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-    onArrangeBtnClick(ArrangeTypeEnum.front);
-  }, "onClick") }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(TopmostSingle, null), localeService.t("image-panel.arrange.front")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-    onArrangeBtnClick(ArrangeTypeEnum.back);
-  }, "onClick") }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(BottomSingle, null), localeService.t("image-panel.arrange.back"))))));
-}, "DrawingArrange"), DrawingGroup = /* @__PURE__ */ __name((props) => {
-  const localeService = useDependency(LocaleService), renderManagerService = useDependency(IRenderManagerService), drawingManagerService = useDependency(IDrawingManagerService), { hasGroup, drawings } = props, [groupShow, setGroupShow] = useState(!1), [groupBtnShow, setGroupBtnShow] = useState(!0), [ungroupBtnShow, setUngroupBtnShow] = useState(!0), gridDisplay = /* @__PURE__ */ __name((isShow) => isShow ? "block" : "none", "gridDisplay"), onGroupBtnClick = /* @__PURE__ */ __name(() => {
-    const focusDrawings = drawingManagerService.getFocusDrawings(), { unitId, subUnitId } = focusDrawings[0], groupId = Tools.generateRandomId(10), groupTransform = getGroupState(0, 0, focusDrawings.map((o) => o.transform || {})), groupParam = {
-      unitId,
-      subUnitId,
-      drawingId: groupId,
-      drawingType: DrawingTypeEnum.DRAWING_GROUP,
-      transform: groupTransform
-    }, children = focusDrawings.map((drawing) => {
-      const transform = drawing.transform || { left: 0, top: 0 }, { unitId: unitId2, subUnitId: subUnitId2, drawingId } = drawing;
+  const l = (g) => {
+    const u = a[0].unitId, d = a[0].subUnitId, h = a.map((f) => f.drawingId);
+    r.featurePluginOrderUpdateNotification({ unitId: u, subUnitId: d, drawingIds: h, arrangeType: g });
+  };
+  return /* @__PURE__ */ c.jsxs("div", { className: m.imageCommonPanelGrid, style: { display: s(t) }, children: [
+    /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelTitle), children: /* @__PURE__ */ c.jsx("div", { children: e.t("image-panel.arrange.title") }) }) }),
+    /* @__PURE__ */ c.jsxs("div", { className: m.imageCommonPanelRow, children: [
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan2), children: /* @__PURE__ */ c.jsx(ce, { size: "small", onClick: () => {
+        l(be.forward);
+      }, children: /* @__PURE__ */ c.jsxs("span", { className: m.imageCommonPanelInline, children: [
+        /* @__PURE__ */ c.jsx(_n, {}),
+        e.t("image-panel.arrange.forward")
+      ] }) }) }),
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan2), children: /* @__PURE__ */ c.jsx(ce, { size: "small", onClick: () => {
+        l(be.backward);
+      }, children: /* @__PURE__ */ c.jsxs("span", { className: m.imageCommonPanelInline, children: [
+        /* @__PURE__ */ c.jsx(vn, {}),
+        e.t("image-panel.arrange.backward")
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ c.jsxs("div", { className: m.imageCommonPanelRow, children: [
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan2), children: /* @__PURE__ */ c.jsx(ce, { size: "small", onClick: () => {
+        l(be.front);
+      }, children: /* @__PURE__ */ c.jsxs("span", { className: m.imageCommonPanelInline, children: [
+        /* @__PURE__ */ c.jsx(Sn, {}),
+        e.t("image-panel.arrange.front")
+      ] }) }) }),
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan2), children: /* @__PURE__ */ c.jsx(ce, { size: "small", onClick: () => {
+        l(be.back);
+      }, children: /* @__PURE__ */ c.jsxs("span", { className: m.imageCommonPanelInline, children: [
+        /* @__PURE__ */ c.jsx(fn, {}),
+        e.t("image-panel.arrange.back")
+      ] }) }) })
+    ] })
+  ] });
+}, Tt = (i) => {
+  const t = L(te), n = L(ue), e = L(ne), { hasGroup: r, drawings: s } = i, [a, o] = A(!1), [l, g] = A(!0), [u, d] = A(!0), h = (p) => p ? "block" : "none", f = () => {
+    const p = e.getFocusDrawings(), { unitId: S, subUnitId: _ } = p[0], R = An.generateRandomId(10), b = En(0, 0, p.map((y) => y.transform || {})), N = {
+      unitId: S,
+      subUnitId: _,
+      drawingId: R,
+      drawingType: ee.DRAWING_GROUP,
+      transform: b
+    }, I = p.map((y) => {
+      const P = y.transform || { left: 0, top: 0 }, { unitId: M, subUnitId: D, drawingId: B } = y;
       return {
-        unitId: unitId2,
-        subUnitId: subUnitId2,
-        drawingId,
+        unitId: M,
+        subUnitId: D,
+        drawingId: B,
         transform: {
-          ...transform,
-          left: transform.left - groupTransform.left,
-          top: transform.top - groupTransform.top
+          ...P,
+          left: P.left - b.left,
+          top: P.top - b.top
         },
-        groupId
+        groupId: R
       };
     });
-    drawingManagerService.featurePluginGroupUpdateNotification([{
-      parent: groupParam,
-      children
+    e.featurePluginGroupUpdateNotification([{
+      parent: N,
+      children: I
     }]);
-  }, "onGroupBtnClick"), ungroup = /* @__PURE__ */ __name((param) => {
-    if (param.drawingType !== DrawingTypeEnum.DRAWING_GROUP)
+  }, v = (p) => {
+    if (p.drawingType !== ee.DRAWING_GROUP)
       return;
-    const { unitId, subUnitId, drawingId, transform: groupTransform = { width: 0, height: 0 } } = param;
-    if (groupTransform == null)
+    const { unitId: S, subUnitId: _, drawingId: R, transform: b = { width: 0, height: 0 } } = p;
+    if (b == null)
       return;
-    const objects = drawingManagerService.getDrawingsByGroup({ unitId, subUnitId, drawingId });
-    if (objects.length === 0)
+    const N = e.getDrawingsByGroup({ unitId: S, subUnitId: _, drawingId: R });
+    if (N.length === 0)
       return;
-    const children = objects.map((object) => {
-      const { transform } = object, { unitId: unitId2, subUnitId: subUnitId2, drawingId: drawingId2 } = object, newTransform = transformObjectOutOfGroup(transform || {}, groupTransform, groupTransform.width || 0, groupTransform.height || 0);
+    const I = N.map((y) => {
+      const { transform: P } = y, { unitId: M, subUnitId: D, drawingId: B } = y, E = Tn(P || {}, b, b.width || 0, b.height || 0);
       return {
-        unitId: unitId2,
-        subUnitId: subUnitId2,
-        drawingId: drawingId2,
+        unitId: M,
+        subUnitId: D,
+        drawingId: B,
         transform: {
-          ...transform,
-          ...newTransform
+          ...P,
+          ...E
         },
         groupId: void 0
       };
     });
     return {
-      parent: param,
-      children
+      parent: p,
+      children: I
     };
-  }, "ungroup"), onUngroupBtnClick = /* @__PURE__ */ __name(() => {
-    const params = drawingManagerService.getFocusDrawings().map(
-      (drawing) => ungroup(drawing)
-    ).filter((o) => o != null);
-    params.length !== 0 && drawingManagerService.featurePluginUngroupUpdateNotification(params);
-  }, "onUngroupBtnClick");
-  return useEffect(() => {
-    const drawingParam = drawings[0];
-    if (drawingParam == null)
+  }, w = () => {
+    const S = e.getFocusDrawings().map(
+      (_) => v(_)
+    ).filter((_) => _ != null);
+    S.length !== 0 && e.featurePluginUngroupUpdateNotification(S);
+  };
+  return _e(() => {
+    const p = s[0];
+    if (p == null)
       return;
-    const { unitId } = drawingParam, renderObject = renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-    if (scene == null)
+    const { unitId: S } = p, _ = n.getRenderById(S), R = _ == null ? void 0 : _.scene;
+    if (R == null)
       return;
-    const transformer = scene.getTransformerByCreate(), onClearControlObserver = transformer.clearControl$.subscribe((changeSelf) => {
-      changeSelf === !0 && setGroupShow(!1);
-    }), onChangeStartObserver = transformer.changeStart$.subscribe((state) => {
-      const { objects } = state, params = getUpdateParams(objects, drawingManagerService), groupParams = params.filter((o) => (o == null ? void 0 : o.drawingType) === DrawingTypeEnum.DRAWING_GROUP);
-      let groupBtnShow2 = !1, ungroupBtnShow2 = !1;
-      params.length > 1 && (groupBtnShow2 = !0), groupParams.length > 0 && (ungroupBtnShow2 = !0), setGroupShow(groupBtnShow2 || ungroupBtnShow2), setGroupBtnShow(groupBtnShow2), setUngroupBtnShow(ungroupBtnShow2);
+    const b = R.getTransformerByCreate(), N = b.clearControl$.subscribe((y) => {
+      y === !0 && o(!1);
+    }), I = b.changeStart$.subscribe((y) => {
+      const { objects: P } = y, M = Ae(P, e), D = M.filter((W) => (W == null ? void 0 : W.drawingType) === ee.DRAWING_GROUP);
+      let B = !1, E = !1;
+      M.length > 1 && (B = !0), D.length > 0 && (E = !0), o(B || E), g(B), d(E);
     });
     return () => {
-      onChangeStartObserver.unsubscribe(), onClearControlObserver.unsubscribe();
+      I.unsubscribe(), N.unsubscribe();
     };
-  }, []), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelGrid, styles$1.imageCommonPanelBorder), style: { display: gridDisplay(hasGroup === !0 ? groupShow : !1) } }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-panel.group.title")))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2, styles$1.imageCommonPanelColumnCenter) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-    onGroupBtnClick();
-  }, "onClick"), style: { display: gridDisplay(groupBtnShow) } }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(GroupSingle, null), localeService.t("image-panel.group.group")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2, styles$1.imageCommonPanelColumnCenter) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-    onUngroupBtnClick();
-  }, "onClick"), style: { display: gridDisplay(ungroupBtnShow) } }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(UngroupSingle, null), localeService.t("image-panel.group.unGroup"))))));
-}, "DrawingGroup"), MIN_DRAWING_WIDTH_LIMIT = 20, MIN_DRAWING_HEIGHT_LIMIT = 20, RANGE_DRAWING_ROTATION_LIMIT = [-3600, 3600], INPUT_DEBOUNCE_TIME = 300, DrawingTransform = /* @__PURE__ */ __name((props) => {
-  var _a7;
-  const localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), { drawings, transformShow } = props, drawingParam = drawings[0];
-  if (drawingParam == null)
+  }, []), /* @__PURE__ */ c.jsxs("div", { className: O(m.imageCommonPanelGrid, m.imageCommonPanelBorder), style: { display: h(r === !0 ? a : !1) }, children: [
+    /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelTitle), children: /* @__PURE__ */ c.jsx("div", { children: t.t("image-panel.group.title") }) }) }),
+    /* @__PURE__ */ c.jsxs("div", { className: m.imageCommonPanelRow, children: [
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan2, m.imageCommonPanelColumnCenter), children: /* @__PURE__ */ c.jsx(ce, { size: "small", onClick: () => {
+        f();
+      }, style: { display: h(l) }, children: /* @__PURE__ */ c.jsxs("span", { className: m.imageCommonPanelInline, children: [
+        /* @__PURE__ */ c.jsx(Cn, {}),
+        t.t("image-panel.group.group")
+      ] }) }) }),
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan2, m.imageCommonPanelColumnCenter), children: /* @__PURE__ */ c.jsx(ce, { size: "small", onClick: () => {
+        w();
+      }, style: { display: h(u) }, children: /* @__PURE__ */ c.jsxs("span", { className: m.imageCommonPanelInline, children: [
+        /* @__PURE__ */ c.jsx(bn, {}),
+        t.t("image-panel.group.unGroup")
+      ] }) }) })
+    ] })
+  ] });
+}, se = 20, Bt = 20, Ut = [-3600, 3600], ye = 300, Ht = (i) => {
+  var Ze;
+  const t = L(te), n = L(ne), e = L(ue), { drawings: r, transformShow: s } = i, a = r[0];
+  if (a == null)
     return;
-  const transform = drawingParam.transform;
-  if (transform == null)
+  const o = a.transform;
+  if (o == null)
     return;
-  const { unitId, subUnitId, drawingId, drawingType } = drawingParam, renderObject = renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-  if (scene == null)
+  const { unitId: l, subUnitId: g, drawingId: u, drawingType: d } = a, h = e.getRenderById(l), f = h == null ? void 0 : h.scene;
+  if (f == null)
     return;
-  const topScene = (_a7 = scene.getEngine()) == null ? void 0 : _a7.activeScene;
-  if (topScene == null)
+  const v = (Ze = f.getEngine()) == null ? void 0 : Ze.activeScene;
+  if (v == null)
     return;
-  const transformer = scene.getTransformerByCreate(), {
-    width: originWidth = 0,
-    height: originHeight = 0,
-    left: originX = 0,
-    top: originY = 0,
-    angle: originRotation = 0
-  } = transform, [width, setWidth] = useState(originWidth), [height, setHeight] = useState(originHeight), [xPosition, setXPosition] = useState(originX), [yPosition, setYPosition] = useState(originY), [rotation, setRotation] = useState(originRotation), [lockRatio, setLockRatio] = useState(transformer.keepRatio), checkMoveBoundary = /* @__PURE__ */ __name((left, top, width2, height2) => {
-    const { width: topSceneWidth, height: topSceneHeight } = topScene, { ancestorLeft, ancestorTop } = scene;
-    let limitLeft = left, limitTop = top, limitWidth = width2, limitHeight = height2;
-    return left + ancestorLeft < 0 && (limitLeft = -ancestorLeft), top + ancestorTop < 0 && (limitTop = -ancestorTop), limitWidth = topSceneWidth - limitLeft - ancestorLeft, limitWidth < MIN_DRAWING_WIDTH_LIMIT && (limitWidth = MIN_DRAWING_WIDTH_LIMIT), limitHeight = topSceneHeight - limitTop - ancestorTop, limitHeight < MIN_DRAWING_WIDTH_LIMIT && (limitHeight = MIN_DRAWING_WIDTH_LIMIT), left + limitWidth + ancestorLeft > topSceneWidth && (limitLeft = topSceneWidth - width2 - ancestorLeft), top + limitHeight + ancestorTop > topSceneHeight && (limitTop = topSceneHeight - height2 - ancestorTop), {
-      limitLeft,
-      limitTop,
-      limitWidth,
-      limitHeight
+  const w = f.getTransformerByCreate(), {
+    width: p = 0,
+    height: S = 0,
+    left: _ = 0,
+    top: R = 0,
+    angle: b = 0
+  } = o, [N, I] = A(p), [y, P] = A(S), [M, D] = A(_), [B, E] = A(R), [re, W] = A(b), [q, Se] = A(w.keepRatio), ie = (C, x, H, V) => {
+    const { width: U, height: J } = v, { ancestorLeft: z, ancestorTop: F } = f;
+    let K = C, ae = x, de = H, he = V;
+    return C + z < 0 && (K = -z), x + F < 0 && (ae = -F), de = U - K - z, de < se && (de = se), he = J - ae - F, he < se && (he = se), C + de + z > U && (K = U - H - z), x + he + F > J && (ae = J - V - F), {
+      limitLeft: K,
+      limitTop: ae,
+      limitWidth: de,
+      limitHeight: he
     };
-  }, "checkMoveBoundary"), changeObs = /* @__PURE__ */ __name((state) => {
-    const { objects } = state, params = getUpdateParams(objects, drawingManagerService);
-    if (params.length !== 1)
+  }, k = (C) => {
+    const { objects: x } = C, H = Ae(x, n);
+    if (H.length !== 1)
       return;
-    const drawingParam2 = params[0];
-    if (drawingParam2 == null)
+    const V = H[0];
+    if (V == null)
       return;
-    const { transform: transform2 } = drawingParam2;
-    if (transform2 == null)
+    const { transform: U } = V;
+    if (U == null)
       return;
     const {
-      width: originWidth2,
-      height: originHeight2,
-      left: originX2,
-      top: originY2,
-      angle: originRotation2
-    } = transform2;
-    originWidth2 != null && setWidth(originWidth2), originHeight2 != null && setHeight(originHeight2), originX2 != null && setXPosition(originX2), originY2 != null && setYPosition(originY2), originRotation2 != null && setRotation(originRotation2);
-  }, "changeObs");
-  useEffect(() => {
-    const subscriptions = [
-      transformer.changeStart$.subscribe((state) => {
-        changeObs(state);
+      width: J,
+      height: z,
+      left: F,
+      top: K,
+      angle: ae
+    } = U;
+    J != null && I(J), z != null && P(z), F != null && D(F), K != null && E(K), ae != null && W(ae);
+  };
+  _e(() => {
+    const C = [
+      w.changeStart$.subscribe((x) => {
+        k(x);
       }),
-      transformer.changing$.subscribe((state) => {
-        changeObs(state);
+      w.changing$.subscribe((x) => {
+        k(x);
       }),
-      transformer.changeEnd$.subscribe((state) => {
-        changeObs(state);
+      w.changeEnd$.subscribe((x) => {
+        k(x);
       }),
-      drawingManagerService.focus$.subscribe((drawings2) => {
-        if (drawings2.length !== 1)
+      n.focus$.subscribe((x) => {
+        if (x.length !== 1)
           return;
-        const drawingParam2 = drawingManagerService.getDrawingByParam(drawings2[0]);
-        if (drawingParam2 == null)
+        const H = n.getDrawingByParam(x[0]);
+        if (H == null)
           return;
-        const transform2 = drawingParam2.transform;
-        if (transform2 == null)
+        const V = H.transform;
+        if (V == null)
           return;
         const {
-          width: originWidth2,
-          height: originHeight2,
-          left: originX2,
-          top: originY2,
-          angle: originRotation2
-        } = transform2;
-        originWidth2 != null && setWidth(originWidth2), originHeight2 != null && setHeight(originHeight2), originX2 != null && setXPosition(originX2), originY2 != null && setYPosition(originY2), originRotation2 != null && setRotation(originRotation2);
+          width: U,
+          height: J,
+          left: z,
+          top: F,
+          angle: K
+        } = V;
+        U != null && I(U), J != null && P(J), z != null && D(z), F != null && E(F), K != null && W(K);
       })
     ];
     return () => {
-      subscriptions.forEach((sub) => sub.unsubscribe());
+      C.forEach((x) => x.unsubscribe());
     };
   }, []);
-  const handleWidthChange = debounce((val) => {
-    if (val == null)
+  const Ve = Pe((C) => {
+    if (C == null)
       return;
-    val = Math.max(val, MIN_DRAWING_WIDTH_LIMIT);
-    const { limitWidth, limitHeight } = checkMoveBoundary(xPosition, yPosition, val, height);
-    val = Math.min(val, limitWidth);
-    const updateParam = { unitId, subUnitId, drawingId, drawingType, transform: { width: val } };
-    if (lockRatio) {
-      let heightFix = val / width * height;
-      if (heightFix = Math.max(heightFix, MIN_DRAWING_HEIGHT_LIMIT), heightFix > limitHeight)
+    C = Math.max(C, se);
+    const { limitWidth: x, limitHeight: H } = ie(M, B, C, y);
+    C = Math.min(C, x);
+    const V = { unitId: l, subUnitId: g, drawingId: u, drawingType: d, transform: { width: C } };
+    if (q) {
+      let U = C / N * y;
+      if (U = Math.max(U, Bt), U > H)
         return;
-      setHeight(heightFix), updateParam.transform.height = heightFix;
+      P(U), V.transform.height = U;
     }
-    setWidth(val), drawingManagerService.featurePluginUpdateNotification([updateParam]), transformer.refreshControls().changeNotification();
-  }, INPUT_DEBOUNCE_TIME), handleHeightChange = debounce((val) => {
-    if (val == null)
+    I(C), n.featurePluginUpdateNotification([V]), w.refreshControls().changeNotification();
+  }, ye), Ge = Pe((C) => {
+    if (C == null)
       return;
-    val = Math.max(val, MIN_DRAWING_WIDTH_LIMIT);
-    const { limitHeight, limitWidth } = checkMoveBoundary(xPosition, yPosition, width, val);
-    val = Math.min(val, limitHeight);
-    const updateParam = { unitId, subUnitId, drawingId, drawingType, transform: { height: val } };
-    if (lockRatio) {
-      let widthFix = val / height * width;
-      if (widthFix = Math.max(widthFix, MIN_DRAWING_WIDTH_LIMIT), widthFix > limitWidth)
+    C = Math.max(C, se);
+    const { limitHeight: x, limitWidth: H } = ie(M, B, N, C);
+    C = Math.min(C, x);
+    const V = { unitId: l, subUnitId: g, drawingId: u, drawingType: d, transform: { height: C } };
+    if (q) {
+      let U = C / y * N;
+      if (U = Math.max(U, se), U > H)
         return;
-      setWidth(widthFix), updateParam.transform.width = widthFix;
+      I(U), V.transform.width = U;
     }
-    setHeight(val), drawingManagerService.featurePluginUpdateNotification([updateParam]), transformer.refreshControls().changeNotification();
-  }, INPUT_DEBOUNCE_TIME), handleXChange = debounce((val) => {
-    if (val == null)
+    P(C), n.featurePluginUpdateNotification([V]), w.refreshControls().changeNotification();
+  }, ye), yn = Pe((C) => {
+    if (C == null)
       return;
-    const { limitLeft } = checkMoveBoundary(val, yPosition, width, height);
-    val = limitLeft;
-    const updateParam = { unitId, subUnitId, drawingId, drawingType, transform: { left: val } };
-    setXPosition(val), drawingManagerService.featurePluginUpdateNotification([updateParam]), transformer.refreshControls().changeNotification();
-  }, INPUT_DEBOUNCE_TIME), handleYChange = debounce((val) => {
-    if (val == null)
+    const { limitLeft: x } = ie(C, B, N, y);
+    C = x;
+    const H = { unitId: l, subUnitId: g, drawingId: u, drawingType: d, transform: { left: C } };
+    D(C), n.featurePluginUpdateNotification([H]), w.refreshControls().changeNotification();
+  }, ye), jn = Pe((C) => {
+    if (C == null)
       return;
-    const { limitTop } = checkMoveBoundary(xPosition, val, width, height);
-    val = limitTop;
-    const updateParam = { unitId, subUnitId, drawingId, drawingType, transform: { top: val } };
-    setYPosition(val), drawingManagerService.featurePluginUpdateNotification([updateParam]), transformer.refreshControls().changeNotification();
-  }, INPUT_DEBOUNCE_TIME), handleRotationChange = /* @__PURE__ */ __name((val) => {
-    if (val == null)
+    const { limitTop: x } = ie(M, C, N, y);
+    C = x;
+    const H = { unitId: l, subUnitId: g, drawingId: u, drawingType: d, transform: { top: C } };
+    E(C), n.featurePluginUpdateNotification([H]), w.refreshControls().changeNotification();
+  }, ye), Rn = (C) => {
+    if (C == null)
       return;
-    const [min, max] = RANGE_DRAWING_ROTATION_LIMIT;
-    val < min && (val = min), val > max && (val = max);
-    const updateParam = { unitId, subUnitId, drawingId, drawingType, transform: { angle: val } };
-    setRotation(val), drawingManagerService.featurePluginUpdateNotification([updateParam]), transformer.refreshControls().changeNotification();
-  }, "handleRotationChange"), handleLockRatioChange = /* @__PURE__ */ __name((val) => {
-    setLockRatio(val), transformer.keepRatio = val;
-  }, "handleLockRatioChange"), gridDisplay = /* @__PURE__ */ __name((isShow) => isShow ? "block" : "none", "gridDisplay");
-  return /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelGrid, styles$1.imageCommonPanelBorder), style: { display: gridDisplay(transformShow) } }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-panel.transform.title")))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan3) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, localeService.t("image-panel.transform.width"))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(InputNumber, { precision: 1, value: width, onChange: /* @__PURE__ */ __name((val) => {
-    handleWidthChange(val);
-  }, "onChange"), className: styles$1.imageCommonPanelInput }))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan3) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, localeService.t("image-panel.transform.height"))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(InputNumber, { precision: 1, value: height, onChange: /* @__PURE__ */ __name((val) => {
-    handleHeightChange(val);
-  }, "onChange"), className: styles$1.imageCommonPanelInput }))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan3) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, localeService.t("image-panel.transform.lock"))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelRow, styles$1.imageCommonPanelRowVertical) }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(Checkbox, { checked: lockRatio, onChange: handleLockRatioChange })))))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan3) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, localeService.t("image-panel.transform.x"))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(InputNumber, { precision: 1, value: xPosition, onChange: /* @__PURE__ */ __name((val) => {
-    handleXChange(val);
-  }, "onChange"), className: styles$1.imageCommonPanelInput }))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan3) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, localeService.t("image-panel.transform.y"))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(InputNumber, { precision: 1, value: yPosition, onChange: /* @__PURE__ */ __name((val) => {
-    handleYChange(val);
-  }, "onChange"), className: styles$1.imageCommonPanelInput }))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan3) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, localeService.t("image-panel.transform.rotate"))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(InputNumber, { precision: 1, value: rotation, onChange: handleRotationChange, className: styles$1.imageCommonPanelInput })))))));
-}, "DrawingTransform"), OpenImageCropOperation = {
+    const [x, H] = Ut;
+    C < x && (C = x), C > H && (C = H);
+    const V = { unitId: l, subUnitId: g, drawingId: u, drawingType: d, transform: { angle: C } };
+    W(C), n.featurePluginUpdateNotification([V]), w.refreshControls().changeNotification();
+  }, Mn = (C) => {
+    Se(C), w.keepRatio = C;
+  }, xn = (C) => C ? "block" : "none";
+  return /* @__PURE__ */ c.jsxs("div", { className: O(m.imageCommonPanelGrid, m.imageCommonPanelBorder), style: { display: xn(s) }, children: [
+    /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelTitle), children: /* @__PURE__ */ c.jsx("div", { children: t.t("image-panel.transform.title") }) }) }),
+    /* @__PURE__ */ c.jsxs("div", { className: m.imageCommonPanelRow, children: [
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan3), children: /* @__PURE__ */ c.jsxs("label", { children: [
+        /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: t.t("image-panel.transform.width") }) }),
+        /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: /* @__PURE__ */ c.jsx(fe, { precision: 1, value: N, onChange: (C) => {
+          Ve(C);
+        }, className: m.imageCommonPanelInput }) }) })
+      ] }) }),
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan3), children: /* @__PURE__ */ c.jsxs("label", { children: [
+        /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: t.t("image-panel.transform.height") }) }),
+        /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: /* @__PURE__ */ c.jsx(fe, { precision: 1, value: y, onChange: (C) => {
+          Ge(C);
+        }, className: m.imageCommonPanelInput }) }) })
+      ] }) }),
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan3), children: /* @__PURE__ */ c.jsxs("label", { children: [
+        /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: t.t("image-panel.transform.lock") }) }),
+        /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelRow, m.imageCommonPanelRowVertical), children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: /* @__PURE__ */ c.jsx($n, { checked: q, onChange: Mn }) }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ c.jsxs("div", { className: m.imageCommonPanelRow, children: [
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan3), children: /* @__PURE__ */ c.jsxs("label", { children: [
+        /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: t.t("image-panel.transform.x") }) }),
+        /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: /* @__PURE__ */ c.jsx(fe, { precision: 1, value: M, onChange: (C) => {
+          yn(C);
+        }, className: m.imageCommonPanelInput }) }) })
+      ] }) }),
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan3), children: /* @__PURE__ */ c.jsxs("label", { children: [
+        /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: t.t("image-panel.transform.y") }) }),
+        /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: /* @__PURE__ */ c.jsx(fe, { precision: 1, value: B, onChange: (C) => {
+          jn(C);
+        }, className: m.imageCommonPanelInput }) }) })
+      ] }) }),
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan3), children: /* @__PURE__ */ c.jsxs("label", { children: [
+        /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: t.t("image-panel.transform.rotate") }) }),
+        /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelColumn, children: /* @__PURE__ */ c.jsx(fe, { precision: 1, value: re, onChange: Rn, className: m.imageCommonPanelInput }) }) })
+      ] }) })
+    ] })
+  ] });
+}, ze = {
   id: "sheet.operation.open-image-crop",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => !0, "handler")
-}, CloseImageCropOperation = {
+  type: ve.OPERATION,
+  handler: (i, t) => !0
+}, le = {
   id: "sheet.operation.close-image-crop",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => !0, "handler")
+  type: ve.OPERATION,
+  handler: (i, t) => !0
 };
-var CropType = /* @__PURE__ */ ((CropType2) => (CropType2.FREE = "0", CropType2.R1_1 = "1", CropType2.R16_9 = "2", CropType2.R9_16 = "3", CropType2.R5_4 = "4", CropType2.R4_5 = "5", CropType2.R4_3 = "6", CropType2.R3_4 = "7", CropType2.R3_2 = "8", CropType2.R2_3 = "9", CropType2))(CropType || {});
-const AutoImageCropOperation = {
+var T = /* @__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))(T || {});
+const Ne = {
   id: "sheet.operation.Auto-image-crop",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => !0, "handler")
-}, ImageCropper = /* @__PURE__ */ __name((props) => {
-  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), { drawings, cropperShow } = props;
-  if (drawings[0] == null)
+  type: ve.OPERATION,
+  handler: (i, t) => !0
+}, At = (i) => {
+  const t = L(me), n = L(te), { drawings: e, cropperShow: r } = i;
+  if (e[0] == null)
     return;
-  const [cropValue, setCropValue] = useState(CropType.FREE), cropStateRef = useRef(!1), cropOptions = [
+  const [a, o] = A(T.FREE), l = on(!1), g = [
     {
-      label: localeService.t("image-panel.crop.mode"),
-      value: CropType.FREE
+      label: n.t("image-panel.crop.mode"),
+      value: T.FREE
     },
     {
       label: "1:1",
-      value: CropType.R1_1
+      value: T.R1_1
     },
     {
       label: "16:9",
-      value: CropType.R16_9
+      value: T.R16_9
     },
     {
       label: "9:16",
-      value: CropType.R9_16
+      value: T.R9_16
     },
     {
       label: "5:4",
-      value: CropType.R5_4
+      value: T.R5_4
     },
     {
       label: "4:5",
-      value: CropType.R4_5
+      value: T.R4_5
     },
     {
       label: "4:3",
-      value: CropType.R4_3
+      value: T.R4_3
     },
     {
       label: "3:4",
-      value: CropType.R3_4
+      value: T.R3_4
     },
     {
       label: "3:2",
-      value: CropType.R3_2
+      value: T.R3_2
     },
     {
       label: "2:3",
-      value: CropType.R2_3
+      value: T.R2_3
     }
   ];
-  useEffect(() => {
-    const onChangeStartObserver = commandService.onCommandExecuted((command) => {
-      if (command.id === CloseImageCropOperation.id) {
-        const params = command.params;
-        params != null && params.isAuto || (cropStateRef.current = !1);
+  _e(() => {
+    const f = t.onCommandExecuted((v) => {
+      if (v.id === le.id) {
+        const w = v.params;
+        w != null && w.isAuto || (l.current = !1);
       }
     });
     return () => {
-      onChangeStartObserver == null || onChangeStartObserver.dispose();
+      f == null || f.dispose();
     };
   }, []);
-  function handleCropChange(value) {
-    setCropValue(value), cropStateRef.current && commandService.executeCommand(AutoImageCropOperation.id, {
-      cropType: value
+  function u(f) {
+    o(f), l.current && t.executeCommand(Ne.id, {
+      cropType: f
     });
   }
-  __name(handleCropChange, "handleCropChange");
-  const gridDisplay = /* @__PURE__ */ __name((isShow) => isShow ? "block" : "none", "gridDisplay"), onCropperBtnClick = /* @__PURE__ */ __name((val) => {
-    commandService.executeCommand(AutoImageCropOperation.id, {
-      cropType: val
-    }), cropStateRef.current = !0;
-  }, "onCropperBtnClick");
-  return /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelGrid, styles$1.imageCommonPanelBorder), style: { display: gridDisplay(cropperShow) } }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-panel.crop.title")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelRow, styles$1.imageCommonPanelRowVertical) }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-    onCropperBtnClick(cropValue);
-  }, "onClick") }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(CreateCopySingle, null), localeService.t("image-panel.crop.start")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement(Select, { value: cropValue, options: cropOptions, onChange: handleCropChange }))));
-}, "ImageCropper"), DrawingCommonPanel = /* @__PURE__ */ __name((props) => {
-  const drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), localeService = useDependency(LocaleService), { drawings, hasArrange = !0, hasTransform = !0, hasAlign = !0, hasCropper = !0, hasGroup = !0 } = props, drawingParam = drawings[0];
-  if (drawingParam == null)
+  const d = (f) => f ? "block" : "none", h = (f) => {
+    t.executeCommand(Ne.id, {
+      cropType: f
+    }), l.current = !0;
+  };
+  return /* @__PURE__ */ c.jsxs("div", { className: O(m.imageCommonPanelGrid, m.imageCommonPanelBorder), style: { display: d(r) }, children: [
+    /* @__PURE__ */ c.jsx("div", { className: m.imageCommonPanelRow, children: /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelTitle), children: /* @__PURE__ */ c.jsx("div", { children: n.t("image-panel.crop.title") }) }) }),
+    /* @__PURE__ */ c.jsxs("div", { className: O(m.imageCommonPanelRow, m.imageCommonPanelRowVertical), children: [
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan2), children: /* @__PURE__ */ c.jsx(ce, { size: "small", onClick: () => {
+        h(a);
+      }, children: /* @__PURE__ */ c.jsxs("span", { className: m.imageCommonPanelInline, children: [
+        /* @__PURE__ */ c.jsx(pn, {}),
+        n.t("image-panel.crop.start")
+      ] }) }) }),
+      /* @__PURE__ */ c.jsx("div", { className: O(m.imageCommonPanelColumn, m.imageCommonPanelSpan2), children: /* @__PURE__ */ c.jsx(cn, { value: a, options: g, onChange: u }) })
+    ] })
+  ] });
+}, Sr = (i) => {
+  const t = L(ne), n = L(ue), e = L(te), { drawings: r, hasArrange: s = !0, hasTransform: a = !0, hasAlign: o = !0, hasCropper: l = !0, hasGroup: g = !0 } = i, u = r[0];
+  if (u == null)
     return;
-  const { unitId } = drawingParam, renderObject = renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-  if (scene == null)
+  const { unitId: d } = u, h = n.getRenderById(d), f = h == null ? void 0 : h.scene;
+  if (f == null)
     return;
-  const transformer = scene.getTransformerByCreate(), [arrangeShow, setArrangeShow] = useState(!0), [transformShow, setTransformShow] = useState(!0), [alignShow, setAlignShow] = useState(!1), [cropperShow, setCropperShow] = useState(!0), [nullShow, setNullShow] = useState(!1);
-  return useEffect(() => {
-    const clearControlSub = transformer.clearControl$.subscribe((changeSelf) => {
-      changeSelf === !0 && (setArrangeShow(!1), setTransformShow(!1), setAlignShow(!1), setCropperShow(!1), setNullShow(!0));
-    }), changeStartSub = transformer.changeStart$.subscribe((state) => {
-      const { objects } = state, params = getUpdateParams(objects, drawingManagerService);
-      params.length === 0 ? (setArrangeShow(!1), setTransformShow(!1), setAlignShow(!1), setCropperShow(!1), setNullShow(!0)) : params.length === 1 ? (setArrangeShow(!0), setTransformShow(!0), setAlignShow(!1), setCropperShow(!0), setNullShow(!1)) : (setArrangeShow(!0), setTransformShow(!1), setAlignShow(!0), setCropperShow(!1), setNullShow(!1));
-    }), focusSub = drawingManagerService.focus$.subscribe((drawings2) => {
-      drawings2.length === 0 ? (setArrangeShow(!1), setTransformShow(!1), setAlignShow(!1), setCropperShow(!1), setNullShow(!0)) : drawings2.length === 1 ? (setArrangeShow(!0), setTransformShow(!0), setAlignShow(!1), setCropperShow(!0), setNullShow(!1)) : (setArrangeShow(!0), setTransformShow(!1), setAlignShow(!0), setCropperShow(!1), setNullShow(!1));
+  const v = f.getTransformerByCreate(), [w, p] = A(!0), [S, _] = A(!0), [R, b] = A(!1), [N, I] = A(!0), [y, P] = A(!1);
+  return _e(() => {
+    const M = v.clearControl$.subscribe((E) => {
+      E === !0 && (p(!1), _(!1), b(!1), I(!1), P(!0));
+    }), D = v.changeStart$.subscribe((E) => {
+      const { objects: re } = E, W = Ae(re, t);
+      W.length === 0 ? (p(!1), _(!1), b(!1), I(!1), P(!0)) : W.length === 1 ? (p(!0), _(!0), b(!1), I(!0), P(!1)) : (p(!0), _(!1), b(!0), I(!1), P(!1));
+    }), B = t.focus$.subscribe((E) => {
+      E.length === 0 ? (p(!1), _(!1), b(!1), I(!1), P(!0)) : E.length === 1 ? (p(!0), _(!0), b(!1), I(!0), P(!1)) : (p(!0), _(!1), b(!0), I(!1), P(!1));
     });
     return () => {
-      changeStartSub.unsubscribe(), clearControlSub.unsubscribe(), focusSub.unsubscribe();
+      D.unsubscribe(), M.unsubscribe(), B.unsubscribe();
     };
-  }, []), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { display: nullShow === !0 ? "block" : "none", height: "100%" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", top: "50%", marginTop: "-100px" } }, /* @__PURE__ */ React.createElement("span", null, localeService.t("image-panel.null")))), /* @__PURE__ */ React.createElement(DrawingArrange, { arrangeShow: hasArrange === !0 ? arrangeShow : !1, drawings }), /* @__PURE__ */ React.createElement(DrawingTransform, { transformShow: hasTransform === !0 ? transformShow : !1, drawings }), /* @__PURE__ */ React.createElement(DrawingAlign, { alignShow: hasAlign === !0 ? alignShow : !1, drawings }), /* @__PURE__ */ React.createElement(ImageCropper, { cropperShow: hasCropper === !0 ? cropperShow : !1, drawings }), /* @__PURE__ */ React.createElement(DrawingGroup, { hasGroup, drawings }));
-}, "DrawingCommonPanel"), imagePopupMenu = "univer-image-popup-menu", imagePopupMenuItem = "univer-image-popup-menu-item", imagePopupMenuItemIcon = "univer-image-popup-menu-item-icon", imagePopupMenuItemTitle = "univer-image-popup-menu-item-title", imagePopupMenuItemHide = "univer-image-popup-menu-item-hide", btnContainer = "univer-btn-container", btnContainerExpand = "univer-btn-container-expand", styles = {
-  imagePopupMenu,
-  imagePopupMenuItem,
-  imagePopupMenuItemIcon,
-  imagePopupMenuItemTitle,
-  imagePopupMenuItemHide,
-  btnContainer,
-  btnContainerExpand
-}, ImagePopupMenu = /* @__PURE__ */ __name((props) => {
-  var _a7, _b;
-  const menuItems = (_b = (_a7 = props.popup) == null ? void 0 : _a7.extraProps) == null ? void 0 : _b.menuItems;
-  if (!menuItems)
+  }, []), /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
+    /* @__PURE__ */ c.jsx("div", { style: { display: y === !0 ? "block" : "none", height: "100%" }, children: /* @__PURE__ */ c.jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", top: "50%", marginTop: "-100px" }, children: /* @__PURE__ */ c.jsx("span", { children: e.t("image-panel.null") }) }) }),
+    /* @__PURE__ */ c.jsx(Et, { arrangeShow: s === !0 ? w : !1, drawings: r }),
+    /* @__PURE__ */ c.jsx(Ht, { transformShow: a === !0 ? S : !1, drawings: r }),
+    /* @__PURE__ */ c.jsx(vt, { alignShow: o === !0 ? R : !1, drawings: r }),
+    /* @__PURE__ */ c.jsx(At, { cropperShow: l === !0 ? N : !1, drawings: r }),
+    /* @__PURE__ */ c.jsx(Tt, { hasGroup: g, drawings: r })
+  ] });
+}, Lt = "univer-image-popup-menu", Vt = "univer-image-popup-menu-item", Gt = "univer-image-popup-menu-item-icon", Wt = "univer-image-popup-menu-item-title", $t = "univer-image-popup-menu-item-hide", kt = "univer-btn-container", zt = "univer-btn-container-expand", pe = {
+  imagePopupMenu: Lt,
+  imagePopupMenuItem: Vt,
+  imagePopupMenuItemIcon: Gt,
+  imagePopupMenuItemTitle: Wt,
+  imagePopupMenuItemHide: $t,
+  btnContainer: kt,
+  btnContainerExpand: zt
+}, Ft = (i) => {
+  var v, w;
+  const t = (w = (v = i.popup) == null ? void 0 : v.extraProps) == null ? void 0 : w.menuItems;
+  if (!t)
     return null;
-  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), [visible, setVisible] = useState(!1), [isHovered, setHovered] = useState(!1), handleMouseEnter = /* @__PURE__ */ __name(() => {
-    setHovered(!0);
-  }, "handleMouseEnter"), handleMouseLeave = /* @__PURE__ */ __name(() => {
-    setHovered(!1);
-  }, "handleMouseLeave"), onVisibleChange = /* @__PURE__ */ __name((visible2) => {
-    setVisible(visible2);
-  }, "onVisibleChange"), handleClick = /* @__PURE__ */ __name((item) => {
-    commandService.executeCommand(item.commandId, item.commandParams), setVisible(!1);
-  }, "handleClick"), showMore = visible || isHovered, availableMenu = menuItems.filter((item) => !item.disable);
-  return /* @__PURE__ */ React.createElement(
+  const n = L(me), e = L(te), [r, s] = A(!1), [a, o] = A(!1), l = () => {
+    o(!0);
+  }, g = () => {
+    o(!1);
+  }, u = (p) => {
+    s(p);
+  }, d = (p) => {
+    n.executeCommand(p.commandId, p.commandParams), s(!1);
+  }, h = r || a, f = t.filter((p) => !p.disable);
+  return /* @__PURE__ */ c.jsx(
     "div",
     {
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave
-    },
-    /* @__PURE__ */ React.createElement(
-      Dropdown,
-      {
-        placement: "bottomLeft",
-        trigger: ["click"],
-        overlay: /* @__PURE__ */ React.createElement("ul", { className: styles.imagePopupMenu }, availableMenu.map((item) => /* @__PURE__ */ React.createElement(
-          "li",
-          {
-            key: item.index,
-            onClick: /* @__PURE__ */ __name(() => handleClick(item), "onClick"),
-            className: styles.imagePopupMenuItem
-          },
-          /* @__PURE__ */ React.createElement("span", { className: styles.imagePopupMenuItemTitle }, localeService.t(item.label))
-        ))),
-        visible,
-        onVisibleChange
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
+      onMouseEnter: l,
+      onMouseLeave: g,
+      children: /* @__PURE__ */ c.jsx(
+        kn,
         {
-          className: clsx(styles.btnContainer, {
-            [styles.btnContainerExpand]: visible
-          })
-        },
-        /* @__PURE__ */ React.createElement(
-          Autofill,
-          {
-            style: { color: "#35322B" },
-            extend: { colorChannel1: "rgb(var(--green-700, #409f11))" }
-          }
-        ),
-        showMore && /* @__PURE__ */ React.createElement(MoreDownSingle, { style: { color: "#CCCCCC", fontSize: "8px", marginLeft: "8px" } })
+          placement: "bottomLeft",
+          trigger: ["click"],
+          overlay: /* @__PURE__ */ c.jsx("ul", { className: pe.imagePopupMenu, children: f.map((p) => /* @__PURE__ */ c.jsx(
+            "li",
+            {
+              onClick: () => d(p),
+              className: pe.imagePopupMenuItem,
+              children: /* @__PURE__ */ c.jsx("span", { className: pe.imagePopupMenuItemTitle, children: e.t(p.label) })
+            },
+            p.index
+          )) }),
+          visible: r,
+          onVisibleChange: u,
+          children: /* @__PURE__ */ c.jsxs(
+            "div",
+            {
+              className: O(pe.btnContainer, {
+                [pe.btnContainerExpand]: r
+              }),
+              children: [
+                /* @__PURE__ */ c.jsx(
+                  hn,
+                  {
+                    style: { color: "#35322B" },
+                    extend: { colorChannel1: "rgb(var(--green-700, #409f11))" }
+                  }
+                ),
+                h && /* @__PURE__ */ c.jsx(wn, { style: { color: "#CCCCCC", fontSize: "8px", marginLeft: "8px" } })
+              ]
+            }
+          )
+        }
       )
-    )
+    }
   );
-}, "ImagePopupMenu"), COMPONENT_IMAGE_POPUP_MENU = "COMPONENT_IMAGE_POPUP_MENU", PLUGIN_CONFIG_KEY = "drawing-ui.config", defaultPluginConfig = {}, ImageResetSizeOperation = {
+}, Kt = "COMPONENT_IMAGE_POPUP_MENU", Yt = "drawing-ui.config", Zt = {}, In = {
   id: "sheet.operation.image-reset-size",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => !0, "handler")
-}, COMPONENT_IMAGE_VIEWER = "COMPONENT_IMAGE_VIEWER", ImageViewer = /* @__PURE__ */ __name((props) => {
-  const { src } = props;
-  return src ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("img", { src, alt: "Univer Image Viewer", style: { width: "100%", height: "100%", position: "relative" } })) : null;
-}, "ImageViewer");
-var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$4(target, key, result), result;
-}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4"), _a2;
-let DrawingUIController = (_a2 = class extends Disposable {
-  constructor(_componentManager, _commandService) {
-    super(), this._componentManager = _componentManager, this._commandService = _commandService, this._init();
+  type: ve.OPERATION,
+  handler: (i, t) => !0
+}, Pn = "COMPONENT_IMAGE_VIEWER", Xt = (i) => {
+  const { src: t } = i;
+  return t ? /* @__PURE__ */ c.jsx("div", { children: /* @__PURE__ */ c.jsx("img", { src: t, alt: "Univer Image Viewer", style: { width: "100%", height: "100%", position: "relative" } }) }) : null;
+};
+var qt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, Qt = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? Jt(t, n) : t, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
+  return e && r && qt(t, n, r), r;
+}, en = (i, t) => (n, e) => t(n, e, i);
+let De = class extends He {
+  constructor(i, t) {
+    super(), this._componentManager = i, this._commandService = t, this._init();
   }
   _initCustomComponents() {
-    const componentManager = this._componentManager;
-    this.disposeWithMe(componentManager.register(COMPONENT_IMAGE_POPUP_MENU, ImagePopupMenu)), this.disposeWithMe(componentManager.register(COMPONENT_IMAGE_VIEWER, ImageViewer));
+    const i = this._componentManager;
+    this.disposeWithMe(i.register(Kt, Ft)), this.disposeWithMe(i.register(Pn, Xt));
   }
   _initCommands() {
     [
-      OpenImageCropOperation,
-      CloseImageCropOperation,
-      ImageResetSizeOperation,
-      SetDrawingAlignOperation,
-      AutoImageCropOperation
-    ].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
+      ze,
+      le,
+      In,
+      Ye,
+      Ne
+    ].forEach((i) => this.disposeWithMe(this._commandService.registerCommand(i)));
   }
   _init() {
     this._initCommands(), this._initCustomComponents();
   }
-}, __name(_a2, "DrawingUIController"), _a2);
-DrawingUIController = __decorateClass$4([
-  __decorateParam$4(0, Inject(ComponentManager)),
-  __decorateParam$4(1, ICommandService)
-], DrawingUIController);
-var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$3(target, key, result), result;
-}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a3;
-let DrawingUpdateController = (_a3 = class extends Disposable {
-  constructor(_currentUniverService, _commandService, _renderManagerService, _drawingManagerService) {
+};
+De = Qt([
+  en(0, Ue(zn)),
+  en(1, me)
+], De);
+var er = Object.defineProperty, nr = Object.getOwnPropertyDescriptor, tr = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? nr(t, n) : t, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
+  return e && r && er(t, n, r), r;
+}, je = (i, t) => (n, e) => t(n, e, i);
+let Ee = class extends He {
+  constructor(t, n, e, r) {
     super();
-    __publicField(this, "_sceneListenerOnDrawingMap", /* @__PURE__ */ new WeakSet());
-    this._currentUniverService = _currentUniverService, this._commandService = _commandService, this._renderManagerService = _renderManagerService, this._drawingManagerService = _drawingManagerService, this._initialize();
+    Q(this, "_sceneListenerOnDrawingMap", /* @__PURE__ */ new WeakSet());
+    this._currentUniverService = t, this._commandService = n, this._renderManagerService = e, this._drawingManagerService = r, this._initialize();
   }
   dispose() {
     super.dispose();
@@ -823,39 +919,39 @@ let DrawingUpdateController = (_a3 = class extends Disposable {
     this._recoveryImages(), this._drawingAddListener(), this._drawingRemoveListener(), this._drawingUpdateListener(), this._commandExecutedListener(), this._drawingArrangeListener(), this._drawingGroupListener(), this._drawingRefreshListener(), this._drawingVisibleListener();
   }
   _recoveryImages() {
-    const drawingList = this._drawingManagerService.drawingManagerData, info = getCurrentUnitInfo(this._currentUniverService);
-    if (info == null)
+    const t = this._drawingManagerService.drawingManagerData, n = ln(this._currentUniverService);
+    if (n == null)
       return;
-    const { unitId: currentUnitId, subUnitId: currentSubUnitId } = info;
-    Object.keys(drawingList).forEach((unitId) => {
-      Object.keys(drawingList[unitId]).forEach((subUnitId) => {
-        const drawingMap = drawingList[unitId][subUnitId].data;
-        drawingMap == null || unitId !== currentUnitId || subUnitId !== currentSubUnitId || Object.keys(drawingMap).forEach((drawingId) => {
-          drawingMap[drawingId] && this._insertDrawing([{ unitId, subUnitId, drawingId }]);
+    const { unitId: e, subUnitId: r } = n;
+    Object.keys(t).forEach((s) => {
+      Object.keys(t[s]).forEach((a) => {
+        const o = t[s][a].data;
+        o == null || s !== e || a !== r || Object.keys(o).forEach((l) => {
+          o[l] && this._insertDrawing([{ unitId: s, subUnitId: a, drawingId: l }]);
         });
       });
     });
   }
   _commandExecutedListener() {
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((command) => {
-        if (command.id === SetDrawingAlignOperation.id) {
-          const params = command.params;
-          if (params == null)
+      this._commandService.onCommandExecuted((t) => {
+        if (t.id === Ye.id) {
+          const n = t.params;
+          if (n == null)
             return;
-          this._drawingAlign(params);
+          this._drawingAlign(n);
         }
       })
     );
   }
   _drawingGroupListener() {
     this.disposeWithMe(
-      this._drawingManagerService.group$.subscribe((params) => {
-        this._groupDrawings(params);
+      this._drawingManagerService.group$.subscribe((t) => {
+        this._groupDrawings(t);
       })
     ), this.disposeWithMe(
-      this._drawingManagerService.ungroup$.subscribe((params) => {
-        this._ungroupDrawings(params);
+      this._drawingManagerService.ungroup$.subscribe((t) => {
+        this._ungroupDrawings(t);
       })
     );
   }
@@ -879,38 +975,38 @@ let DrawingUpdateController = (_a3 = class extends Disposable {
   //             break;
   //     }
   // }
-  _getSceneAndTransformerByDrawingSearch(unitId) {
-    if (unitId == null)
+  _getSceneAndTransformerByDrawingSearch(t) {
+    if (t == null)
       return;
-    const renderObject = this._renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-    if (scene == null)
+    const n = this._renderManagerService.getRenderById(t), e = n == null ? void 0 : n.scene;
+    if (e == null)
       return null;
-    const transformer = scene.getTransformerByCreate();
-    return { scene, transformer };
+    const r = e.getTransformerByCreate();
+    return { scene: e, transformer: r };
   }
-  _groupDrawings(drawings) {
-    drawings.forEach((drawing) => {
-      this._groupDrawing(drawing);
+  _groupDrawings(t) {
+    t.forEach((n) => {
+      this._groupDrawing(n);
     });
   }
-  _groupDrawing(params) {
-    const { parent, children } = params, { unitId, subUnitId, drawingId } = parent, renderObject = this._getSceneAndTransformerByDrawingSearch(parent.unitId);
-    if (renderObject == null)
+  _groupDrawing(t) {
+    const { parent: n, children: e } = t, { unitId: r, subUnitId: s, drawingId: a } = n, o = this._getSceneAndTransformerByDrawingSearch(n.unitId);
+    if (o == null)
       return;
-    const { scene, transformer } = renderObject;
-    this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
-    const objects = [];
-    if (children.forEach((drawing) => {
-      const drawingShapeKey = getDrawingShapeKeyByDrawingSearch(drawing), object = scene.getObjectIncludeInGroup(drawingShapeKey);
-      if (object == null || objects.includes(object))
+    const { scene: l, transformer: g } = o;
+    this._commandService.syncExecuteCommand(le.id);
+    const u = [];
+    if (e.forEach((f) => {
+      const v = G(f), w = l.getObjectIncludeInGroup(v);
+      if (w == null || u.includes(w))
         return;
-      objects.push(object);
-      const { transform } = drawing;
-      transform != null && (object.classType === RENDER_CLASS_TYPE.GROUP ? object.transformByState({ left: transform.left, top: transform.top }) : object.transformByState(transform));
-    }), objects.length === 0)
+      u.push(w);
+      const { transform: p } = f;
+      p != null && (w.classType === Xe.GROUP ? w.transformByState({ left: p.left, top: p.top }) : w.transformByState(p));
+    }), u.length === 0)
       return;
-    const groupKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }), group = new Group(groupKey);
-    scene.addObject(group, DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group), group.addObjects(...objects), parent.transform && group.transformByState({ left: parent.transform.left, top: parent.transform.top }), transformer.clearSelectedObjects(), transformer.setSelectedControl(group);
+    const d = G({ unitId: r, subUnitId: s, drawingId: a }), h = new Ce(d);
+    l.addObject(h, Fe).attachTransformerTo(h), h.addObjects(...u), n.transform && h.transformByState({ left: n.transform.left, top: n.transform.top }), g.clearSelectedObjects(), g.setSelectedControl(h);
   }
   // private _regroupDrawings(drawings: IDrawingSearch[]) {
   //     const renderObject = this._getSceneAndTransformerByDrawingSearch(drawings[0].unitId);
@@ -946,127 +1042,127 @@ let DrawingUpdateController = (_a3 = class extends Disposable {
   //     transformer.clearSelectedObjects();
   //     transformer.setSelectedControl(firstGroup);
   // }
-  _ungroupDrawings(drawings) {
-    drawings.forEach((drawing) => {
-      this._ungroupDrawing(drawing);
+  _ungroupDrawings(t) {
+    t.forEach((n) => {
+      this._ungroupDrawing(n);
     });
   }
-  _ungroupDrawing(drawing) {
-    const { parent, children } = drawing, renderObject = this._getSceneAndTransformerByDrawingSearch(parent.unitId);
-    if (renderObject == null)
+  _ungroupDrawing(t) {
+    const { parent: n, children: e } = t, r = this._getSceneAndTransformerByDrawingSearch(n.unitId);
+    if (r == null)
       return;
-    const { scene, transformer } = renderObject;
-    children.forEach((drawing2) => {
-      const drawingKey = getDrawingShapeKeyByDrawingSearch(drawing2), object = scene.getObjectIncludeInGroup(drawingKey);
-      if (object == null)
+    const { scene: s, transformer: a } = r;
+    e.forEach((d) => {
+      const h = G(d), f = s.getObjectIncludeInGroup(h);
+      if (f == null)
         return !0;
-      if (object == null)
+      if (f == null)
         return;
-      const { transform } = drawing2;
-      transform != null && (object.classType === RENDER_CLASS_TYPE.GROUP ? object.transformByState({ left: transform.left, top: transform.top }) : object.transformByState(transform));
+      const { transform: v } = d;
+      v != null && (f.classType === Xe.GROUP ? f.transformByState({ left: v.left, top: v.top }) : f.transformByState(v));
     });
-    const groupKey = getDrawingShapeKeyByDrawingSearch(parent), group = scene.getObject(groupKey), { width, height } = group;
-    group.getObjects().forEach((object) => {
-      group.removeSelfObjectAndTransform(object.oKey, width, height);
-    }), group.dispose(), transformer.clearSelectedObjects();
-  }
-  _drawingAlign(params) {
-    const { alignType } = params, drawings = this._drawingManagerService.getFocusDrawings();
-    if (alignType === AlignType.default)
+    const o = G(n), l = s.getObject(o), { width: g, height: u } = l;
+    l.getObjects().forEach((d) => {
+      l.removeSelfObjectAndTransform(d.oKey, g, u);
+    }), l.dispose(), a.clearSelectedObjects();
+  }
+  _drawingAlign(t) {
+    const { alignType: n } = t, e = this._drawingManagerService.getFocusDrawings();
+    if (n === j.default)
       return;
-    const drawingTransformCaches = [];
-    let minLeft = Number.POSITIVE_INFINITY, minTop = Number.POSITIVE_INFINITY, maxRight = Number.NEGATIVE_INFINITY, maxBottom = Number.NEGATIVE_INFINITY, drawingCount = 0;
-    drawings.forEach((drawing) => {
-      const { unitId, subUnitId, drawingId, drawingType } = drawing, drawingParam = this._drawingManagerService.getDrawingByParam({ unitId, subUnitId, drawingId });
-      if (drawingParam == null || drawingParam.transform == null)
+    const r = [];
+    let s = Number.POSITIVE_INFINITY, a = Number.POSITIVE_INFINITY, o = Number.NEGATIVE_INFINITY, l = Number.NEGATIVE_INFINITY, g = 0;
+    e.forEach((u) => {
+      const { unitId: d, subUnitId: h, drawingId: f, drawingType: v } = u, w = this._drawingManagerService.getDrawingByParam({ unitId: d, subUnitId: h, drawingId: f });
+      if (w == null || w.transform == null)
         return;
-      drawingTransformCaches.push({
-        unitId,
-        subUnitId,
-        drawingId,
-        drawingType,
-        transform: drawingParam.transform
+      r.push({
+        unitId: d,
+        subUnitId: h,
+        drawingId: f,
+        drawingType: v,
+        transform: w.transform
       });
-      const { left = 0, top = 0, width = 0, height = 0 } = drawingParam.transform;
-      minLeft = Math.min(minLeft, left), minTop = Math.min(minTop, top), maxRight = Math.max(maxRight, left + width), maxBottom = Math.max(maxBottom, top + height), drawingCount++;
-    }), drawingCount !== 0 && (this._sortDrawingTransform(drawingTransformCaches, alignType), this._applyAlignType(drawingTransformCaches, alignType, minLeft, minTop, maxRight, maxBottom, drawingCount));
+      const { left: p = 0, top: S = 0, width: _ = 0, height: R = 0 } = w.transform;
+      s = Math.min(s, p), a = Math.min(a, S), o = Math.max(o, p + _), l = Math.max(l, S + R), g++;
+    }), g !== 0 && (this._sortDrawingTransform(r, n), this._applyAlignType(r, n, s, a, o, l, g));
   }
-  _applyAlignType(drawingTransformCaches, alignType, minLeft, minTop, maxRight, maxBottom, drawingCount) {
-    const averageHorizon = Math.round((maxRight - minLeft) / drawingCount * 10) / 10, averageVertical = Math.round((maxBottom - minTop) / drawingCount * 10) / 10, updateParams = [], renderObject = this._getSceneAndTransformerByDrawingSearch(drawingTransformCaches[0].unitId);
-    if (renderObject == null)
+  _applyAlignType(t, n, e, r, s, a, o) {
+    const l = Math.round((s - e) / o * 10) / 10, g = Math.round((a - r) / o * 10) / 10, u = [], d = this._getSceneAndTransformerByDrawingSearch(t[0].unitId);
+    if (d == null)
       return;
-    const { scene, transformer } = renderObject;
-    drawingTransformCaches.forEach((drawingTransformCache, index) => {
-      const { unitId, subUnitId, drawingId, transform, drawingType } = drawingTransformCache, { left = 0, top = 0, width = 0, height = 0 } = transform;
-      let newLeft = left, newTop = top;
-      switch (alignType) {
-        case AlignType.left:
-          newLeft = minLeft;
+    const { scene: h, transformer: f } = d;
+    t.forEach((v, w) => {
+      const { unitId: p, subUnitId: S, drawingId: _, transform: R, drawingType: b } = v, { left: N = 0, top: I = 0, width: y = 0, height: P = 0 } = R;
+      let M = N, D = I;
+      switch (n) {
+        case j.left:
+          M = e;
           break;
-        case AlignType.center:
-          newLeft = minLeft + (maxRight - minLeft) / 2 - width / 2;
+        case j.center:
+          M = e + (s - e) / 2 - y / 2;
           break;
-        case AlignType.right:
-          newLeft = maxRight - width;
+        case j.right:
+          M = s - y;
           break;
-        case AlignType.top:
-          newTop = minTop;
+        case j.top:
+          D = r;
           break;
-        case AlignType.middle:
-          newTop = minTop + (maxBottom - minTop) / 2 - height / 2;
+        case j.middle:
+          D = r + (a - r) / 2 - P / 2;
           break;
-        case AlignType.bottom:
-          newTop = maxBottom - height;
+        case j.bottom:
+          D = a - P;
           break;
-        case AlignType.horizon:
-          newLeft = minLeft + averageHorizon * index;
+        case j.horizon:
+          M = e + l * w;
           break;
-        case AlignType.vertical:
-          newTop = minTop + averageVertical * index;
+        case j.vertical:
+          D = r + g * w;
           break;
       }
-      (newLeft !== left || newTop !== top) && updateParams.push({
-        unitId,
-        subUnitId,
-        drawingId,
-        drawingType,
+      (M !== N || D !== I) && u.push({
+        unitId: p,
+        subUnitId: S,
+        drawingId: _,
+        drawingType: b,
         transform: {
-          left: newLeft,
-          top: newTop
+          left: M,
+          top: D
         }
       });
-    }), this._drawingManagerService.featurePluginUpdateNotification(updateParams), transformer.refreshControls().changeNotification();
-  }
-  _sortDrawingTransform(drawingTransformCaches, alignType) {
-    drawingTransformCaches.sort((a, b) => {
-      const aTransform = a.transform, bTransform = b.transform, {
-        left: aLeft = 0,
-        top: aTop = 0,
-        width: aWidth = 0,
-        height: aHeight = 0
-      } = aTransform, {
-        left: bLeft = 0,
-        top: bTop = 0,
-        width: bWidth = 0,
-        height: bHeight = 0
-      } = bTransform;
-      switch (alignType) {
-        case AlignType.left:
-          return aLeft - bLeft;
-        case AlignType.center:
-          return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
-        case AlignType.right:
-          return aLeft + aWidth - (bLeft + bWidth);
-        case AlignType.top:
-          return aTop - bTop;
-        case AlignType.middle:
-          return aTop + aHeight / 2 - (bTop + bHeight / 2);
-        case AlignType.bottom:
-          return aTop + aHeight - (bTop + bHeight);
-        case AlignType.horizon:
-          return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
-        case AlignType.vertical:
-          return aTop + aHeight / 2 - (bTop + bHeight / 2);
+    }), this._drawingManagerService.featurePluginUpdateNotification(u), f.refreshControls().changeNotification();
+  }
+  _sortDrawingTransform(t, n) {
+    t.sort((e, r) => {
+      const s = e.transform, a = r.transform, {
+        left: o = 0,
+        top: l = 0,
+        width: g = 0,
+        height: u = 0
+      } = s, {
+        left: d = 0,
+        top: h = 0,
+        width: f = 0,
+        height: v = 0
+      } = a;
+      switch (n) {
+        case j.left:
+          return o - d;
+        case j.center:
+          return o + g / 2 - (d + f / 2);
+        case j.right:
+          return o + g - (d + f);
+        case j.top:
+          return l - h;
+        case j.middle:
+          return l + u / 2 - (h + v / 2);
+        case j.bottom:
+          return l + u - (h + v);
+        case j.horizon:
+          return o + g / 2 - (d + f / 2);
+        case j.vertical:
+          return l + u / 2 - (h + v / 2);
         default:
           return 0;
       }
@@ -1074,60 +1170,60 @@ let DrawingUpdateController = (_a3 = class extends Disposable {
   }
   _drawingArrangeListener() {
     this.disposeWithMe(
-      this._drawingManagerService.order$.subscribe((params) => {
-        this._drawingArrange(params);
+      this._drawingManagerService.order$.subscribe((t) => {
+        this._drawingArrange(t);
       })
     );
   }
-  _drawingArrange(params) {
-    const { unitId, subUnitId, drawingIds } = params, renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-    if (renderObject == null)
+  _drawingArrange(t) {
+    const { unitId: n, subUnitId: e, drawingIds: r } = t, s = this._getSceneAndTransformerByDrawingSearch(n);
+    if (s == null)
       return;
-    const { scene } = renderObject;
-    drawingIds.forEach((drawingId) => {
-      const oKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }), drawingShapes = scene.fuzzyMathObjects(oKey, !0);
-      if (drawingShapes == null || drawingShapes.length === 0)
+    const { scene: a } = s;
+    r.forEach((o) => {
+      const l = G({ unitId: n, subUnitId: e, drawingId: o }), g = a.fuzzyMathObjects(l, !0);
+      if (g == null || g.length === 0)
         return;
-      const index = this._drawingManagerService.getDrawingOrder(unitId, subUnitId).indexOf(drawingId);
-      for (const shape of drawingShapes)
-        shape.setProps({ zIndex: index }), shape.makeDirty();
+      const u = this._drawingManagerService.getDrawingOrder(n, e).indexOf(o);
+      for (const d of g)
+        d.setProps({ zIndex: u }), d.makeDirty();
     });
   }
   _drawingAddListener() {
     this.disposeWithMe(
-      this._drawingManagerService.add$.subscribe((params) => {
-        this._insertDrawing(params);
+      this._drawingManagerService.add$.subscribe((t) => {
+        this._insertDrawing(t);
       })
     );
   }
-  _insertDrawing(params) {
-    const sceneList = [];
-    params.forEach((param) => {
-      const { unitId } = param;
-      if (this._drawingManagerService.getDrawingByParam(param) == null)
+  _insertDrawing(t) {
+    const n = [];
+    t.forEach((e) => {
+      const { unitId: r } = e;
+      if (this._drawingManagerService.getDrawingByParam(e) == null)
         return;
-      const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-      if (renderObject == null)
+      const a = this._getSceneAndTransformerByDrawingSearch(r);
+      if (a == null)
         return;
-      const { scene } = renderObject;
-      sceneList.includes(scene) || sceneList.push(scene);
-    }), sceneList.forEach((scene) => {
-      this._sceneListenerOnDrawingMap.has(scene) || (this._addListenerOnDrawing(scene), this._sceneListenerOnDrawingMap.add(scene));
+      const { scene: o } = a;
+      n.includes(o) || n.push(o);
+    }), n.forEach((e) => {
+      this._sceneListenerOnDrawingMap.has(e) || (this._addListenerOnDrawing(e), this._sceneListenerOnDrawingMap.add(e));
     });
   }
   _drawingRemoveListener() {
     this.disposeWithMe(
-      this._drawingManagerService.remove$.subscribe((params) => {
-        params.forEach((param) => {
-          var _a7;
-          const { unitId, subUnitId, drawingId } = param, renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-          if (renderObject == null)
+      this._drawingManagerService.remove$.subscribe((t) => {
+        t.forEach((n) => {
+          var u;
+          const { unitId: e, subUnitId: r, drawingId: s } = n, a = this._getSceneAndTransformerByDrawingSearch(e);
+          if (a == null)
             return;
-          const { scene } = renderObject, drawingShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }), drawingShapes = scene.fuzzyMathObjects(drawingShapeKey, !0);
-          if (drawingShapes.length > 0) {
-            for (const drawingShape of drawingShapes)
-              drawingShape.dispose();
-            (_a7 = scene.getTransformer()) == null || _a7.clearSelectedObjects();
+          const { scene: o } = a, l = G({ unitId: e, subUnitId: r, drawingId: s }), g = o.fuzzyMathObjects(l, !0);
+          if (g.length > 0) {
+            for (const d of g)
+              d.dispose();
+            (u = o.getTransformer()) == null || u.clearSelectedObjects();
           }
         });
       })
@@ -1135,75 +1231,75 @@ let DrawingUpdateController = (_a3 = class extends Disposable {
   }
   _drawingUpdateListener() {
     this.disposeWithMe(
-      this._drawingManagerService.update$.subscribe((params) => {
-        params.forEach((param) => {
-          const { unitId, subUnitId, drawingId } = param, drawingParam = this._drawingManagerService.getDrawingByParam(param);
-          if (drawingParam == null)
+      this._drawingManagerService.update$.subscribe((t) => {
+        t.forEach((n) => {
+          const { unitId: e, subUnitId: r, drawingId: s } = n, a = this._drawingManagerService.getDrawingByParam(n);
+          if (a == null)
             return;
-          const { transform, drawingType } = drawingParam, renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-          if (renderObject == null)
+          const { transform: o, drawingType: l } = a, g = this._getSceneAndTransformerByDrawingSearch(e);
+          if (g == null)
             return;
-          const { scene, transformer } = renderObject;
-          if (transform == null)
+          const { scene: u, transformer: d } = g;
+          if (o == null)
             return !0;
-          const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = !1, flipY = !1, skewX = 0, skewY = 0 } = transform, drawingShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }), drawingShape = scene.getObject(drawingShapeKey);
-          if (drawingShape == null)
+          const { left: h = 0, top: f = 0, width: v = 0, height: w = 0, angle: p = 0, flipX: S = !1, flipY: _ = !1, skewX: R = 0, skewY: b = 0 } = o, N = G({ unitId: e, subUnitId: r, drawingId: s }), I = u.getObject(N);
+          if (I == null)
             return !0;
-          drawingShape.transformByState({ left, top, width, height, angle, flipX, flipY, skewX, skewY });
+          I.transformByState({ left: h, top: f, width: v, height: w, angle: p, flipX: S, flipY: _, skewX: R, skewY: b });
         });
       })
     );
   }
   _drawingRefreshListener() {
     this.disposeWithMe(
-      this._drawingManagerService.refreshTransform$.subscribe((params) => {
-        params.forEach((param) => {
-          const { unitId, subUnitId, drawingId } = param, renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-          if (renderObject == null)
+      this._drawingManagerService.refreshTransform$.subscribe((t) => {
+        t.forEach((n) => {
+          const { unitId: e, subUnitId: r, drawingId: s } = n, a = this._getSceneAndTransformerByDrawingSearch(e);
+          if (a == null)
             return;
-          const drawingParam = this._drawingManagerService.getDrawingByParam(param);
-          if (drawingParam == null)
+          const o = this._drawingManagerService.getDrawingByParam(n);
+          if (o == null)
             return;
-          const { transform } = drawingParam, { scene } = renderObject, drawingShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }), drawingShape = scene.getObject(drawingShapeKey);
-          if (drawingShape == null || transform == null)
+          const { transform: l } = o, { scene: g } = a, u = G({ unitId: e, subUnitId: r, drawingId: s }), d = g.getObject(u);
+          if (d == null || l == null)
             return !0;
           const {
-            left = 0,
-            top = 0,
-            width = 0,
-            height = 0,
-            angle = 0,
-            flipX = !1,
-            flipY = !1,
-            skewX = 0,
-            skewY = 0
-          } = transform;
-          drawingShape.transformByState({ left, top, width, height, angle, flipX, flipY, skewX, skewY });
+            left: h = 0,
+            top: f = 0,
+            width: v = 0,
+            height: w = 0,
+            angle: p = 0,
+            flipX: S = !1,
+            flipY: _ = !1,
+            skewX: R = 0,
+            skewY: b = 0
+          } = l;
+          d.transformByState({ left: h, top: f, width: v, height: w, angle: p, flipX: S, flipY: _, skewX: R, skewY: b });
         });
       })
     );
   }
   _drawingVisibleListener() {
     this.disposeWithMe(
-      this._drawingManagerService.visible$.subscribe((params) => {
-        params.forEach((param) => {
-          const { unitId, subUnitId, drawingId, visible } = param, renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-          if (renderObject == null)
+      this._drawingManagerService.visible$.subscribe((t) => {
+        t.forEach((n) => {
+          const { unitId: e, subUnitId: r, drawingId: s, visible: a } = n, o = this._getSceneAndTransformerByDrawingSearch(e);
+          if (o == null)
             return;
-          const { scene } = renderObject, drawingShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }), drawingShape = scene.getObject(drawingShapeKey);
-          if (drawingShape == null)
+          const { scene: l } = o, g = G({ unitId: e, subUnitId: r, drawingId: s }), u = l.getObject(g);
+          if (u == null)
             return !0;
-          visible ? drawingShape.show() : drawingShape.hide();
+          a ? u.show() : u.hide();
         });
       })
     );
   }
-  _filterUpdateParams(params, startTransforms) {
-    return params.filter((param, index) => {
-      if (param == null)
+  _filterUpdateParams(t, n) {
+    return t.filter((e, r) => {
+      if (e == null)
         return !1;
-      const { transform } = param;
-      return checkIfMove(transform, startTransforms == null ? void 0 : startTransforms[index]);
+      const { transform: s } = e;
+      return sn(s, n == null ? void 0 : n[r]);
     });
   }
   // group?.getObjects().forEach((o) => {
@@ -1213,420 +1309,417 @@ let DrawingUpdateController = (_a3 = class extends Disposable {
   //         drawings.push({ unitId, subUnitId, drawingId });
   //     }
   // });
-  _addListenerOnDrawing(scene) {
-    const transformer = scene.getTransformerByCreate();
-    let startTransforms = null;
+  _addListenerOnDrawing(t) {
+    const n = t.getTransformerByCreate();
+    let e = null;
     this.disposeWithMe(
-      toDisposable(
-        transformer.changeStart$.subscribe((state) => {
-          const { objects } = state, objectArray = Array.from(objects.values()), drawings = [];
-          startTransforms = objectArray.map((object) => {
-            const { left, top, height, width, angle, oKey, isInGroup } = object, drawing = this._drawingManagerService.getDrawingOKey(oKey);
-            if (isInGroup || object instanceof Group) {
-              let group = object.ancestorGroup;
-              if (group == null && object instanceof Group && (group = object), group == null)
+      we(
+        n.changeStart$.subscribe((r) => {
+          const { objects: s } = r, a = Array.from(s.values()), o = [];
+          e = a.map((l) => {
+            const { left: g, top: u, height: d, width: h, angle: f, oKey: v, isInGroup: w } = l, p = this._drawingManagerService.getDrawingOKey(v);
+            if (w || l instanceof Ce) {
+              let S = l.ancestorGroup;
+              if (S == null && l instanceof Ce && (S = l), S == null)
                 return null;
-              const groupDrawing = this._drawingManagerService.getDrawingOKey(group.oKey);
-              if (groupDrawing) {
-                const { unitId, subUnitId, drawingId } = groupDrawing;
-                drawings.push({ unitId, subUnitId, drawingId });
-                const { left: left2, top: top2, height: height2, width: width2, angle: angle2 } = group;
-                return { left: left2, top: top2, height: height2, width: width2, angle: angle2 };
+              const _ = this._drawingManagerService.getDrawingOKey(S.oKey);
+              if (_) {
+                const { unitId: R, subUnitId: b, drawingId: N } = _;
+                o.push({ unitId: R, subUnitId: b, drawingId: N });
+                const { left: I, top: y, height: P, width: M, angle: D } = S;
+                return { left: I, top: y, height: P, width: M, angle: D };
               }
-            } else if (drawing != null) {
-              const { unitId, subUnitId, drawingId } = drawing;
-              return drawings.push({ unitId, subUnitId, drawingId }), { left, top, height, width, angle };
+            } else if (p != null) {
+              const { unitId: S, subUnitId: _, drawingId: R } = p;
+              return o.push({ unitId: S, subUnitId: _, drawingId: R }), { left: g, top: u, height: d, width: h, angle: f };
             }
             return null;
-          }).filter((transform) => transform != null), drawings.length > 0 ? this._drawingManagerService.focusDrawing(drawings) : this._drawingManagerService.focusDrawing(null);
+          }).filter((l) => l != null), o.length > 0 ? this._drawingManagerService.focusDrawing(o) : this._drawingManagerService.focusDrawing(null);
         })
       )
     ), this.disposeWithMe(
-      toDisposable(
-        transformer.changeEnd$.subscribe((state) => {
-          const { objects } = state, params = this._filterUpdateParams(getUpdateParams(objects, this._drawingManagerService), startTransforms);
-          params.length > 0 && this._drawingManagerService.featurePluginUpdateNotification(params);
+      we(
+        n.changeEnd$.subscribe((r) => {
+          const { objects: s } = r, a = this._filterUpdateParams(Ae(s, this._drawingManagerService), e);
+          a.length > 0 && this._drawingManagerService.featurePluginUpdateNotification(a);
         })
       )
     );
   }
-}, __name(_a3, "DrawingUpdateController"), _a3);
-DrawingUpdateController = __decorateClass$3([
-  __decorateParam$3(0, IUniverInstanceService),
-  __decorateParam$3(1, ICommandService),
-  __decorateParam$3(2, IRenderManagerService),
-  __decorateParam$3(3, IDrawingManagerService)
-], DrawingUpdateController);
-const _ImageCropperObject = class _ImageCropperObject extends Shape {
-  constructor(key, props) {
-    props == null && (props = {}), props.transformerConfig = {
+};
+Ee = tr([
+  je(0, Ke),
+  je(1, me),
+  je(2, ue),
+  je(3, ne)
+], Ee);
+class Re extends Bn {
+  constructor(n, e) {
+    e == null && (e = {}), e.transformerConfig = {
       keepRatio: !1,
       isCropper: !0,
       anchorFill: "rgb(0, 0, 0)",
       anchorStroke: "rgb(255, 255, 255)",
       anchorSize: 24
     };
-    super(key, props);
-    __publicField(this, "_srcRect");
-    __publicField(this, "_prstGeom");
-    __publicField(this, "_applyTransform");
-    __publicField(this, "_dragPadding", 8);
-    __publicField(this, "_cacheCanvas");
-    props != null && props.srcRect && (this._srcRect = props.srcRect), props != null && props.prstGeom && (this._prstGeom = props.prstGeom), props != null && props.applyTransform && (this._applyTransform = props.applyTransform), props != null && props.dragPadding && (this._dragPadding = props.dragPadding), this._applyProps();
+    super(n, e);
+    Q(this, "_srcRect");
+    Q(this, "_prstGeom");
+    Q(this, "_applyTransform");
+    Q(this, "_dragPadding", 8);
+    Q(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(value, transform) {
-    this._srcRect = value, this._applyTransform = transform, this._applyProps();
+  refreshSrcRect(n, e) {
+    this._srcRect = n, this._applyTransform = e, this._applyProps();
   }
   get srcRect() {
     return this._srcRect;
   }
   dispose() {
-    var _a7;
-    super.dispose(), (_a7 = this._cacheCanvas) == null || _a7.dispose(), this._srcRect = null;
-  }
-  isHit(coord) {
-    const oCoord = this.getInverseCoord(coord);
-    return oCoord.x >= -this.strokeWidth / 2 && oCoord.x <= this.width + this.strokeWidth / 2 && oCoord.y >= -this.strokeWidth / 2 && oCoord.y <= this.height + this.strokeWidth / 2 && !this._inSurround(oCoord);
-  }
-  _inSurround(oCoord) {
-    const padding = this._dragPadding;
-    return oCoord.x >= padding - this.strokeWidth / 2 && oCoord.x <= this.width + this.strokeWidth / 2 - padding && oCoord.y >= padding - this.strokeWidth / 2 && oCoord.y <= this.height + this.strokeWidth / 2 - padding;
-  }
-  render(mainCtx, bounds) {
-    return this.visible ? (mainCtx.save(), this._draw(mainCtx), mainCtx.restore(), this.makeDirty(!1), this) : (this.makeDirty(!1), this);
-  }
-  _draw(ctx) {
-    var _a7, _b;
-    const engine = this.getScene().getEngine(), { width: engineWidth, height: engineHeight } = engine;
-    this._initialCacheCanvas(), (_a7 = this._cacheCanvas) == null || _a7.clear();
-    const cacheCtx = (_b = this._cacheCanvas) == null ? void 0 : _b.getContext();
-    cacheCtx != null && (cacheCtx.save(), Rect.drawWith(cacheCtx, {
+    var n;
+    super.dispose(), (n = this._cacheCanvas) == null || n.dispose(), this._srcRect = null;
+  }
+  isHit(n) {
+    const e = this.getInverseCoord(n);
+    return e.x >= -this.strokeWidth / 2 && e.x <= this.width + this.strokeWidth / 2 && e.y >= -this.strokeWidth / 2 && e.y <= this.height + this.strokeWidth / 2 && !this._inSurround(e);
+  }
+  _inSurround(n) {
+    const e = this._dragPadding;
+    return n.x >= e - this.strokeWidth / 2 && n.x <= this.width + this.strokeWidth / 2 - e && n.y >= e - this.strokeWidth / 2 && n.y <= this.height + this.strokeWidth / 2 - e;
+  }
+  render(n, e) {
+    return this.visible ? (n.save(), this._draw(n), n.restore(), this.makeDirty(!1), this) : (this.makeDirty(!1), this);
+  }
+  _draw(n) {
+    var l, g;
+    const r = this.getScene().getEngine(), { width: s, height: a } = r;
+    this._initialCacheCanvas(), (l = this._cacheCanvas) == null || l.clear();
+    const o = (g = this._cacheCanvas) == null ? void 0 : g.getContext();
+    o != null && (o.save(), Un.drawWith(o, {
       left: 0,
       top: 0,
-      width: engineWidth,
-      height: engineHeight,
+      width: s,
+      height: a,
       fill: "rgba(0, 0, 0, 0.5)"
-    }), cacheCtx.setTransform(ctx.getTransform()), this._clipForApplyObject(cacheCtx), this._applyCache(ctx), cacheCtx.restore());
+    }), o.setTransform(n.getTransform()), this._clipForApplyObject(o), this._applyCache(n), o.restore());
   }
-  _clipForApplyObject(cacheCtx) {
-    let objectType = 0;
-    if (this._prstGeom != null && (objectType = 1), cacheCtx.globalCompositeOperation = "destination-out", cacheCtx.beginPath(), objectType === 0) {
-      const m = this.transform.getMatrix();
-      cacheCtx.transform(m[0], m[1], m[2], m[3], m[4], m[5]), cacheCtx.rect(0, 0, this.width, this.height), cacheCtx.fill();
+  _clipForApplyObject(n) {
+    let e = 0;
+    if (this._prstGeom != null && (e = 1), n.globalCompositeOperation = "destination-out", n.beginPath(), e === 0) {
+      const r = this.transform.getMatrix();
+      n.transform(r[0], r[1], r[2], r[3], r[4], r[5]), n.rect(0, 0, this.width, this.height), n.fill();
     }
   }
   _applyProps() {
     if (this._applyTransform == null)
       return;
-    let cropLeft = 0, cropTop = 0, cropRight = 0, cropBottom = 0;
-    const { left: applyLeft = 0, top: applyTop = 0, width: applyWidth = 0, height: applyHeight = 0, angle } = this._applyTransform;
+    let n = 0, e = 0, r = 0, s = 0;
+    const { left: a = 0, top: o = 0, width: l = 0, height: g = 0, angle: u } = this._applyTransform;
     if (this._srcRect != null) {
-      const { left: left2 = 0, top: top2 = 0, right = 0, bottom = 0 } = this._srcRect;
-      cropLeft = left2, cropTop = top2, cropRight = right, cropBottom = bottom;
+      const { left: f = 0, top: v = 0, right: w = 0, bottom: p = 0 } = this._srcRect;
+      n = f, e = v, r = w, s = p;
     }
-    const left = applyLeft + cropLeft, top = applyTop + cropTop;
+    const d = a + n, h = o + e;
     this.transformByState({
-      left,
-      top,
-      width: applyLeft + applyWidth - cropRight - left,
-      height: applyTop + applyHeight - cropBottom - top,
-      angle
+      left: d,
+      top: h,
+      width: a + l - r - d,
+      height: o + g - s - h,
+      angle: u
     });
   }
-  _applyCache(ctx) {
-    if (!ctx || this._cacheCanvas == null)
+  _applyCache(n) {
+    if (!n || this._cacheCanvas == null)
       return;
-    const cacheCtx = this._cacheCanvas.getContext();
-    cacheCtx.save(), ctx.save(), ctx.setTransform(1, 0, 0, 1, 0, 0), cacheCtx.setTransform(1, 0, 0, 1, 0, 0), ctx.drawImage(this._cacheCanvas.getCanvasEle(), 0, 0), ctx.restore(), cacheCtx.restore();
+    const e = this._cacheCanvas.getContext();
+    e.save(), n.save(), n.setTransform(1, 0, 0, 1, 0, 0), e.setTransform(1, 0, 0, 1, 0, 0), n.drawImage(this._cacheCanvas.getCanvasEle(), 0, 0), n.restore(), e.restore();
   }
   _initialCacheCanvas() {
     if (this._cacheCanvas != null)
       return;
-    const scene = this.getScene();
-    if (scene == null) return;
-    this._cacheCanvas = new Canvas();
-    const engine = scene.getEngine();
-    this._cacheCanvas.setSize(engine.width, engine.height), engine.onTransformChange$.subscribeEvent(() => {
-      var _a7;
-      (_a7 = this._cacheCanvas) == null || _a7.setSize(engine.width, engine.height), this.makeDirty(!0);
+    const n = this.getScene();
+    if (n == null) return;
+    this._cacheCanvas = new Hn();
+    const e = n.getEngine();
+    this._cacheCanvas.setSize(e.width, e.height), e.onTransformChange$.subscribeEvent(() => {
+      var r;
+      (r = this._cacheCanvas) == null || r.setSize(e.width, e.height), this.makeDirty(!0);
     });
   }
-};
-__name(_ImageCropperObject, "ImageCropperObject");
-let ImageCropperObject = _ImageCropperObject;
-var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor, __decorateClass$2 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$2(target, key, result), result;
-}, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$2"), _a4;
-let ImageCropperController = (_a4 = class extends Disposable {
-  constructor(_commandService, _drawingManagerService, _renderManagerService, _univerInstanceService, _messageService, _localeService) {
+}
+var rr = Object.defineProperty, ir = Object.getOwnPropertyDescriptor, ar = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? ir(t, n) : t, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
+  return e && r && rr(t, n, r), r;
+}, ge = (i, t) => (n, e) => t(n, e, i);
+let Te = class extends He {
+  constructor(t, n, e, r, s, a) {
     super();
-    __publicField(this, "_sceneListenerOnImageMap", /* @__PURE__ */ new WeakSet());
-    this._commandService = _commandService, this._drawingManagerService = _drawingManagerService, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._messageService = _messageService, this._localeService = _localeService, this._init();
+    Q(this, "_sceneListenerOnImageMap", /* @__PURE__ */ new WeakSet());
+    this._commandService = t, this._drawingManagerService = n, this._renderManagerService = e, this._univerInstanceService = r, this._messageService = s, this._localeService = a, this._init();
   }
   _init() {
     this._initOpenCrop(), this._initCloseCrop(), this._initAutoCrop();
   }
   _initAutoCrop() {
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((command) => {
-        if (command.id !== AutoImageCropOperation.id)
+      this._commandService.onCommandExecuted((t) => {
+        if (t.id !== Ne.id)
           return;
-        const params = command.params;
-        if (params == null)
+        const n = t.params;
+        if (n == null)
           return;
-        const { cropType } = params, drawingParams = this._drawingManagerService.getFocusDrawings();
-        if (drawingParams.length !== 1)
+        const { cropType: e } = n, r = this._drawingManagerService.getFocusDrawings();
+        if (r.length !== 1)
           return;
-        const drawingParam = drawingParams[0], { unitId, subUnitId, drawingId } = drawingParam, renderObject = this._renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-        if (scene == null)
+        const s = r[0], { unitId: a, subUnitId: o, drawingId: l } = s, g = this._renderManagerService.getRenderById(a), u = g == null ? void 0 : g.scene;
+        if (u == null)
           return !0;
-        this._searchCropObject(scene) != null && this._commandService.syncExecuteCommand(CloseImageCropOperation.id, { isAuto: !0 });
-        const imageShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }), imageShape = scene.getObject(imageShapeKey);
-        if (!(imageShape instanceof Image)) {
+        this._searchCropObject(u) != null && this._commandService.syncExecuteCommand(le.id, { isAuto: !0 });
+        const h = G({ unitId: a, subUnitId: o, drawingId: l }), f = u.getObject(h);
+        if (!(f instanceof ke)) {
           this._messageService.show({
-            type: MessageType.Error,
+            type: Je.Error,
             content: this._localeService.t("image-cropper.error")
           });
           return;
         }
-        imageShape != null && (this._updateCropperObject(cropType, imageShape), this._commandService.executeCommand(OpenImageCropOperation.id, { unitId, subUnitId, drawingId }));
+        f != null && (this._updateCropperObject(e, f), this._commandService.executeCommand(ze.id, { unitId: a, subUnitId: o, drawingId: l }));
       })
     );
   }
-  _calculateSrcRectByRatio(left, top, width, height, numerator, denominator) {
-    const srcRatio = width / height, ratio = numerator / denominator;
-    let newWidth = width, newHeight = height;
-    srcRatio > ratio ? newWidth = height * ratio : newHeight = width / ratio;
-    const newLeft = (width - newWidth) / 2, newTop = (height - newHeight) / 2;
+  _calculateSrcRectByRatio(t, n, e, r, s, a) {
+    const o = e / r, l = s / a;
+    let g = e, u = r;
+    o > l ? g = r * l : u = e / l;
+    const d = (e - g) / 2, h = (r - u) / 2;
     return {
-      left: precisionTo(newLeft, 1),
-      top: precisionTo(newTop, 1),
-      right: precisionTo(width - (newLeft + newWidth), 1),
-      bottom: precisionTo(height - (newTop + newHeight), 1)
+      left: Ie(d, 1),
+      top: Ie(h, 1),
+      right: Ie(e - (d + g), 1),
+      bottom: Ie(r - (h + u), 1)
     };
   }
-  _updateCropperObject(cropType, imageShape) {
-    const { left, top, width, height } = imageShape.calculateTransformWithSrcRect();
-    let newSrcRect;
-    switch (cropType) {
-      case CropType.R1_1:
-        newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 1, 1);
+  _updateCropperObject(t, n) {
+    const { left: e, top: r, width: s, height: a } = n.calculateTransformWithSrcRect();
+    let o;
+    switch (t) {
+      case T.R1_1:
+        o = this._calculateSrcRectByRatio(e, r, s, a, 1, 1);
         break;
-      case CropType.R16_9:
-        newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 16, 9);
+      case T.R16_9:
+        o = this._calculateSrcRectByRatio(e, r, s, a, 16, 9);
         break;
-      case CropType.R9_16:
-        newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 9, 16);
+      case T.R9_16:
+        o = this._calculateSrcRectByRatio(e, r, s, a, 9, 16);
         break;
-      case CropType.R5_4:
-        newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 5, 4);
+      case T.R5_4:
+        o = this._calculateSrcRectByRatio(e, r, s, a, 5, 4);
         break;
-      case CropType.R4_5:
-        newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 4, 5);
+      case T.R4_5:
+        o = this._calculateSrcRectByRatio(e, r, s, a, 4, 5);
         break;
-      case CropType.R4_3:
-        newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 4, 3);
+      case T.R4_3:
+        o = this._calculateSrcRectByRatio(e, r, s, a, 4, 3);
         break;
-      case CropType.R3_4:
-        newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 3, 4);
+      case T.R3_4:
+        o = this._calculateSrcRectByRatio(e, r, s, a, 3, 4);
         break;
-      case CropType.R3_2:
-        newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 3, 2);
+      case T.R3_2:
+        o = this._calculateSrcRectByRatio(e, r, s, a, 3, 2);
         break;
-      case CropType.R2_3:
-        newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 2, 3);
+      case T.R2_3:
+        o = this._calculateSrcRectByRatio(e, r, s, a, 2, 3);
         break;
-      case CropType.FREE:
+      case T.FREE:
     }
-    if (newSrcRect == null)
+    if (o == null)
       return;
-    imageShape.setSrcRect(newSrcRect);
-    const { left: newLeft = 0, top: newTop = 0, bottom: newBottom = 0, right: newRight = 0 } = newSrcRect;
-    imageShape.transformByStateCloseCropper({
-      left: left + newLeft,
-      top: top + newTop,
-      width: width - newRight - newLeft,
-      height: height - newBottom - newTop
+    n.setSrcRect(o);
+    const { left: l = 0, top: g = 0, bottom: u = 0, right: d = 0 } = o;
+    n.transformByStateCloseCropper({
+      left: e + l,
+      top: r + g,
+      width: s - d - l,
+      height: a - u - g
     });
   }
   _initOpenCrop() {
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((command) => {
-        if (command.id !== OpenImageCropOperation.id)
+      this._commandService.onCommandExecuted((t) => {
+        if (t.id !== ze.id)
           return;
-        const params = command.params;
-        if (params == null)
+        const n = t.params;
+        if (n == null)
           return;
-        const { unitId, subUnitId, drawingId } = params, renderObject = this._renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-        if (scene == null)
+        const { unitId: e, subUnitId: r, drawingId: s } = n, a = this._renderManagerService.getRenderById(e), o = a == null ? void 0 : a.scene;
+        if (o == null)
           return !0;
-        if (this._sceneListenerOnImageMap.has(scene) || (this._addListenerOnImage(scene), this._sceneListenerOnImageMap.add(scene)), this._drawingManagerService.getDrawingByParam({ unitId, subUnitId, drawingId }) == null)
+        if (this._sceneListenerOnImageMap.has(o) || (this._addListenerOnImage(o), this._sceneListenerOnImageMap.add(o)), this._drawingManagerService.getDrawingByParam({ unitId: e, subUnitId: r, drawingId: s }) == null)
           return;
-        const imageShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }), imageShape = scene.getObject(imageShapeKey);
-        if (imageShape == null)
+        const g = G({ unitId: e, subUnitId: r, drawingId: s }), u = o.getObject(g);
+        if (u == null)
           return;
-        if (!(imageShape instanceof Image)) {
+        if (!(u instanceof ke)) {
           this._messageService.show({
-            type: MessageType.Error,
+            type: Je.Error,
             content: this._localeService.t("image-cropper.error")
           });
           return;
         }
-        const transformer = scene.getTransformer();
-        transformer == null || transformer.clearControls();
-        const imageCropperObject = new ImageCropperObject(`${imageShapeKey}-crop`, {
-          srcRect: imageShape.srcRect,
-          prstGeom: imageShape.prstGeom,
-          applyTransform: imageShape.calculateTransformWithSrcRect()
+        const d = o.getTransformer();
+        d == null || d.clearControls();
+        const h = new Re(`${g}-crop`, {
+          srcRect: u.srcRect,
+          prstGeom: u.prstGeom,
+          applyTransform: u.calculateTransformWithSrcRect()
         });
-        scene.addObject(imageCropperObject, imageShape.getLayerIndex() + 1).attachTransformerTo(imageCropperObject), transformer == null || transformer.createControlForCopper(imageCropperObject), this._addHoverForImageCopper(imageCropperObject), imageShape.openRenderByCropper(), transformer == null || transformer.refreshControls(), imageCropperObject.makeDirty(!0), this._drawingManagerService.focusDrawing([{ unitId, subUnitId, drawingId }]);
+        o.addObject(h, u.getLayerIndex() + 1).attachTransformerTo(h), d == null || d.createControlForCopper(h), this._addHoverForImageCopper(h), u.openRenderByCropper(), d == null || d.refreshControls(), h.makeDirty(!0), this._drawingManagerService.focusDrawing([{ unitId: e, subUnitId: r, drawingId: s }]);
       })
     );
   }
-  _searchCropObject(scene) {
-    const objects = scene.getAllObjectsByOrder();
-    for (const object of objects)
-      if (object instanceof ImageCropperObject)
-        return object;
+  _searchCropObject(t) {
+    const n = t.getAllObjectsByOrder();
+    for (const e of n)
+      if (e instanceof Re)
+        return e;
   }
   _initCloseCrop() {
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((command) => {
-        if (command.id !== CloseImageCropOperation.id)
+      this._commandService.onCommandExecuted((n) => {
+        if (n.id !== le.id)
           return;
-        const currentUnit = this._univerInstanceService.getFocusedUnit();
-        if (currentUnit == null)
+        const e = this._univerInstanceService.getFocusedUnit();
+        if (e == null)
           return;
-        const unitId = currentUnit.getUnitId(), renderObject = this._renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-        if (scene == null)
+        const r = e.getUnitId(), s = this._renderManagerService.getRenderById(r), a = s == null ? void 0 : s.scene;
+        if (a == null)
           return !0;
-        const imageCropperObject = this._searchCropObject(scene);
-        if (imageCropperObject == null)
+        const o = this._searchCropObject(a);
+        if (o == null)
           return;
-        const imageShape = this._getApplyObjectByCropObject(imageCropperObject);
-        if (imageShape == null)
+        const l = this._getApplyObjectByCropObject(o);
+        if (l == null)
           return;
-        const transformer = scene.getTransformerByCreate();
-        transformer.detachFrom(imageCropperObject), transformer.clearCopperControl();
-        const srcRect = this._getSrcRectByTransformState(imageShape, imageCropperObject), drawingParam = this._drawingManagerService.getDrawingOKey(imageShape.oKey);
-        if (drawingParam != null) {
-          const { left, top, height, width } = imageCropperObject;
+        const g = a.getTransformerByCreate();
+        g.detachFrom(o), g.clearCopperControl();
+        const u = this._getSrcRectByTransformState(l, o), d = this._drawingManagerService.getDrawingOKey(l.oKey);
+        if (d != null) {
+          const { left: h, top: f, height: v, width: w } = o;
           this._drawingManagerService.featurePluginUpdateNotification([{
-            ...drawingParam,
+            ...d,
             transform: {
-              ...drawingParam.transform,
-              left,
-              top,
-              height,
-              width
+              ...d.transform,
+              left: h,
+              top: f,
+              height: v,
+              width: w
             },
-            srcRect: srcRect.srcRectAngle
+            srcRect: u.srcRectAngle
           }]);
         }
-        imageShape.setSrcRect({ ...srcRect.srcRectAngle }), imageShape.closeRenderByCropper(), imageShape.makeDirty(!0), imageCropperObject == null || imageCropperObject.dispose();
+        l.setSrcRect({ ...u.srcRectAngle }), l.closeRenderByCropper(), l.makeDirty(!0), o == null || o.dispose();
       })
     );
-    const sheetUnit = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).pipe(
-      filter((workbook) => !!workbook),
-      switchMap((workbook) => workbook.activeSheet$)
+    const t = this._univerInstanceService.getCurrentTypeOfUnit$(Me.UNIVER_SHEET).pipe(
+      Yn((n) => !!n),
+      Zn((n) => n.activeSheet$)
     );
-    this.disposeWithMe(sheetUnit.subscribe(() => {
-      this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
+    this.disposeWithMe(t.subscribe(() => {
+      this._commandService.syncExecuteCommand(le.id);
     }));
   }
-  _getApplyObjectByCropObject(cropObject) {
-    const cropOKey = cropObject.oKey, applyOKey = cropOKey.slice(0, cropOKey.length - 5), scene = cropObject.getScene();
-    if (!scene) return null;
-    const applyObject = scene.getObject(applyOKey);
-    return applyObject == null ? null : applyObject;
+  _getApplyObjectByCropObject(t) {
+    const n = t.oKey, e = n.slice(0, n.length - 5), r = t.getScene();
+    if (!r) return null;
+    const s = r.getObject(e);
+    return s == null ? null : s;
   }
-  _addListenerOnImage(scene) {
-    const transformer = scene.getTransformerByCreate();
-    let startTransform = null;
+  _addListenerOnImage(t) {
+    const n = t.getTransformerByCreate();
+    let e = null;
     this.disposeWithMe(
-      transformer.changeStart$.subscribe((state) => {
-        const { objects } = state, cropObject = objects.values().next().value;
-        if (cropObject == null || !(cropObject instanceof ImageCropperObject))
+      n.changeStart$.subscribe((r) => {
+        const { objects: s } = r, a = s.values().next().value;
+        if (a == null || !(a instanceof Re))
           return;
-        const { left, top, height, width, angle } = cropObject;
-        startTransform = { left, top, height, width, angle }, transformer.clearCopperControl();
+        const { left: o, top: l, height: g, width: u, angle: d } = a;
+        e = { left: o, top: l, height: g, width: u, angle: d }, n.clearCopperControl();
       })
     ), this.disposeWithMe(
-      transformer.changeEnd$.subscribe((state) => {
-        const { objects } = state, cropObject = objects.values().next().value;
-        if (cropObject == null || !(cropObject instanceof ImageCropperObject))
+      n.changeEnd$.subscribe((r) => {
+        const { objects: s } = r, a = s.values().next().value;
+        if (a == null || !(a instanceof Re))
           return;
-        const { left, top, height, width, angle } = cropObject;
-        if (!checkIfMove({ left, top, height, width, angle }, startTransform))
+        const { left: o, top: l, height: g, width: u, angle: d } = a;
+        if (!sn({ left: o, top: l, height: g, width: u, angle: d }, e))
           return;
-        const applyObject = this._getApplyObjectByCropObject(cropObject);
-        if (applyObject == null)
+        const h = this._getApplyObjectByCropObject(a);
+        if (h == null)
           return;
-        const srcRect = this._getSrcRectByTransformState(applyObject, cropObject);
-        cropObject.refreshSrcRect(srcRect.srcRect, applyObject.getState()), transformer.createControlForCopper(cropObject);
+        const f = this._getSrcRectByTransformState(h, a);
+        a.refreshSrcRect(f.srcRect, h.getState()), n.createControlForCopper(a);
       })
-    ), this._endCropListener(scene);
+    ), this._endCropListener(t);
   }
-  _addHoverForImageCopper(o) {
+  _addHoverForImageCopper(t) {
     this.disposeWithMe(
-      o.onPointerEnter$.subscribeEvent(() => {
-        o.cursor = CURSOR_TYPE.MOVE;
+      t.onPointerEnter$.subscribeEvent(() => {
+        t.cursor = xe.MOVE;
       })
     ), this.disposeWithMe(
-      o.onPointerLeave$.subscribeEvent(() => {
-        o.cursor = CURSOR_TYPE.DEFAULT;
+      t.onPointerLeave$.subscribeEvent(() => {
+        t.cursor = xe.DEFAULT;
       })
     );
   }
-  _endCropListener(scene) {
-    const transformer = scene.getTransformerByCreate();
+  _endCropListener(t) {
+    const n = t.getTransformerByCreate();
     this.disposeWithMe(
-      transformer.clearControl$.subscribe((changeSelf) => {
-        changeSelf === !0 && this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
+      n.clearControl$.subscribe((e) => {
+        e === !0 && this._commandService.syncExecuteCommand(le.id);
       })
     );
   }
-  _getSrcRectByTransformState(applyObject, imageCropperObject) {
-    const { left, top, height, width, strokeWidth, angle: copperAngle } = imageCropperObject, { left: applyLeft, top: applyTop, width: applyWidth, height: applyHeight, angle: applyAngle, strokeWidth: applyStrokeWidth } = applyObject, newLeft = left - applyLeft, newTop = top - applyTop, srcRect = {
-      left: newLeft,
-      top: newTop,
-      right: applyWidth - newLeft - width,
-      bottom: applyHeight - newTop - height
-    }, srcRectAngle = { ...srcRect };
-    if (applyAngle !== 0) {
-      const cx = left + width / 2, cy = top + height / 2, centerPoint = new Vector2(cx, cy), newCx = applyWidth / 2 + applyLeft, newCy = applyHeight / 2 + applyTop, newCenterPoint = new Vector2(newCx, newCy), vertexPoint = new Vector2(applyLeft, applyTop);
-      vertexPoint.rotateByPoint(degToRad(applyAngle), newCenterPoint);
-      const applyFinalPoint = vertexPoint.clone();
-      applyFinalPoint.rotateByPoint(degToRad(-applyAngle), centerPoint);
-      const newAngleLeft = left - applyFinalPoint.x, newAngleTop = top - applyFinalPoint.y;
-      srcRectAngle.left = newAngleLeft, srcRectAngle.top = newAngleTop, srcRectAngle.right = applyWidth - newAngleLeft - width, srcRectAngle.bottom = applyHeight - newAngleTop - height;
+  _getSrcRectByTransformState(t, n) {
+    const { left: e, top: r, height: s, width: a, strokeWidth: o, angle: l } = n, { left: g, top: u, width: d, height: h, angle: f, strokeWidth: v } = t, w = e - g, p = r - u, S = {
+      left: w,
+      top: p,
+      right: d - w - a,
+      bottom: h - p - s
+    }, _ = { ...S };
+    if (f !== 0) {
+      const R = e + a / 2, b = r + s / 2, N = new We(R, b), I = d / 2 + g, y = h / 2 + u, P = new We(I, y), M = new We(g, u);
+      M.rotateByPoint(qe(f), P);
+      const D = M.clone();
+      D.rotateByPoint(qe(-f), N);
+      const B = e - D.x, E = r - D.y;
+      _.left = B, _.top = E, _.right = d - B - a, _.bottom = h - E - s;
     }
     return {
-      srcRect,
-      srcRectAngle
+      srcRect: S,
+      srcRectAngle: _
     };
   }
-}, __name(_a4, "ImageCropperController"), _a4);
-ImageCropperController = __decorateClass$2([
-  __decorateParam$2(0, ICommandService),
-  __decorateParam$2(1, IDrawingManagerService),
-  __decorateParam$2(2, IRenderManagerService),
-  __decorateParam$2(3, IUniverInstanceService),
-  __decorateParam$2(4, IMessageService),
-  __decorateParam$2(5, Inject(LocaleService))
-], ImageCropperController);
-var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$1(target, key, result), result;
-}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1");
-const IMAGE_VIEWER_DROPDOWN_PADDING = 50;
-var _a5;
-let ImageUpdateController = (_a5 = class extends Disposable {
-  constructor(_commandService, _renderManagerService, _drawingManagerService, _dialogService, _imageIoService, _currentUniverService, _drawingRenderService) {
-    super(), this._commandService = _commandService, this._renderManagerService = _renderManagerService, this._drawingManagerService = _drawingManagerService, this._dialogService = _dialogService, this._imageIoService = _imageIoService, this._currentUniverService = _currentUniverService, this._drawingRenderService = _drawingRenderService, this._initialize();
+};
+Te = ar([
+  ge(0, me),
+  ge(1, ne),
+  ge(2, ue),
+  ge(3, Ke),
+  ge(4, Fn),
+  ge(5, Ue(te))
+], Te);
+var sr = Object.defineProperty, or = Object.getOwnPropertyDescriptor, cr = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? or(t, n) : t, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
+  return e && r && sr(t, n, r), r;
+}, oe = (i, t) => (n, e) => t(n, e, i);
+const nn = 50;
+let Be = class extends He {
+  constructor(i, t, n, e, r, s, a) {
+    super(), this._commandService = i, this._renderManagerService = t, this._drawingManagerService = n, this._dialogService = e, this._imageIoService = r, this._currentUniverService = s, this._drawingRenderService = a, this._initialize();
   }
   dispose() {
     super.dispose();
@@ -1636,212 +1729,212 @@ let ImageUpdateController = (_a5 = class extends Disposable {
   }
   _commandExecutedListener() {
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((command) => {
-        if (command.id === ImageResetSizeOperation.id) {
-          const params = command.params;
-          if (params == null)
+      this._commandService.onCommandExecuted((i) => {
+        if (i.id === In.id) {
+          const t = i.params;
+          if (t == null)
             return;
-          this._resetImageSize(params);
+          this._resetImageSize(t);
         }
       })
     );
   }
-  _getSceneAndTransformerByDrawingSearch(unitId) {
-    if (unitId == null)
+  _getSceneAndTransformerByDrawingSearch(i) {
+    if (i == null)
       return;
-    const renderObject = this._renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-    if (scene == null)
+    const t = this._renderManagerService.getRenderById(i), n = t == null ? void 0 : t.scene;
+    if (n == null)
       return null;
-    const transformer = scene.getTransformerByCreate();
-    return { scene, transformer };
-  }
-  _resetImageSize(params) {
-    const updateParams = [], sceneList = [];
-    params.forEach((param) => {
-      const { unitId, subUnitId, drawingId } = param, renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-      if (renderObject == null)
+    const e = n.getTransformerByCreate();
+    return { scene: n, transformer: e };
+  }
+  _resetImageSize(i) {
+    const t = [], n = [];
+    i.forEach((e) => {
+      const { unitId: r, subUnitId: s, drawingId: a } = e, o = this._getSceneAndTransformerByDrawingSearch(r);
+      if (o == null)
         return;
-      const { scene } = renderObject, imageShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }), imageShape = scene.getObject(imageShapeKey);
-      if (imageShape == null)
+      const { scene: l } = o, g = G({ unitId: r, subUnitId: s, drawingId: a }), u = l.getObject(g);
+      if (u == null)
         return !0;
-      const imageData = this._drawingManagerService.getDrawingByParam(param);
-      if (imageData == null)
+      const d = this._drawingManagerService.getDrawingByParam(e);
+      if (d == null)
         return !0;
-      if (imageData.drawingType !== DrawingTypeEnum.DRAWING_IMAGE)
+      if (d.drawingType !== ee.DRAWING_IMAGE)
         return;
-      imageShape.resetSize();
-      const { width, height } = imageShape.getNativeSize();
-      sceneList.includes(scene) === !1 && sceneList.push(scene), updateParams.push({
-        ...imageData,
+      u.resetSize();
+      const { width: h, height: f } = u.getNativeSize();
+      n.includes(l) === !1 && n.push(l), t.push({
+        ...d,
         transform: {
-          ...imageData.transform,
-          height,
-          width,
+          ...d.transform,
+          height: f,
+          width: h,
           angle: 0
         },
         srcRect: null,
         prstGeom: null
       });
-    }), this._drawingManagerService.featurePluginUpdateNotification(updateParams), sceneList.forEach((scene) => {
-      scene.getTransformerByCreate().refreshControls().changeNotification();
-    }), this._drawingManagerService.focusDrawing(params);
+    }), this._drawingManagerService.featurePluginUpdateNotification(t), n.forEach((e) => {
+      e.getTransformerByCreate().refreshControls().changeNotification();
+    }), this._drawingManagerService.focusDrawing(i);
   }
   _drawingAddListener() {
     this.disposeWithMe(
-      this._drawingManagerService.add$.subscribe((params) => {
-        this._insertImages(params);
+      this._drawingManagerService.add$.subscribe((i) => {
+        this._insertImages(i);
       })
     );
   }
-  _insertImages(params) {
-    params.forEach(async (param) => {
-      var _a7;
-      const { unitId, subUnitId, drawingId } = param, renderObject = this._getSceneAndTransformerByDrawingSearch(unitId), currentSubUnitId = (_a7 = getCurrentUnitInfo(this._currentUniverService, unitId)) == null ? void 0 : _a7.subUnitId;
-      if (renderObject == null || currentSubUnitId !== subUnitId)
+  _insertImages(i) {
+    i.forEach(async (t) => {
+      var g;
+      const { unitId: n, subUnitId: e, drawingId: r } = t, s = this._getSceneAndTransformerByDrawingSearch(n), a = (g = ln(this._currentUniverService, n)) == null ? void 0 : g.subUnitId;
+      if (s == null || a !== e)
         return;
-      const imageParam = this._drawingManagerService.getDrawingByParam(param);
-      if (imageParam == null)
+      const o = this._drawingManagerService.getDrawingByParam(t);
+      if (o == null)
         return;
-      const images = await this._drawingRenderService.renderImages(imageParam, renderObject.scene);
-      if (!(images == null || images.length === 0))
-        for (const image of images)
-          this._addHoverForImage(image), this._addDialogForImage(image);
+      const l = await this._drawingRenderService.renderImages(o, s.scene);
+      if (!(l == null || l.length === 0))
+        for (const u of l)
+          this._addHoverForImage(u), this._addDialogForImage(u);
     });
   }
   _imageUpdateListener() {
     this.disposeWithMe(
-      this._drawingManagerService.update$.subscribe((params) => {
-        params.forEach((param) => {
-          const { unitId, subUnitId, drawingId } = param, drawingParam = this._drawingManagerService.getDrawingByParam(param);
-          if (drawingParam == null)
+      this._drawingManagerService.update$.subscribe((i) => {
+        i.forEach((t) => {
+          const { unitId: n, subUnitId: e, drawingId: r } = t, s = this._drawingManagerService.getDrawingByParam(t);
+          if (s == null)
             return;
-          const { transform, drawingType, srcRect, prstGeom, source, imageSourceType } = drawingParam;
-          if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE)
+          const { transform: a, drawingType: o, srcRect: l, prstGeom: g, source: u, imageSourceType: d } = s;
+          if (o !== ee.DRAWING_IMAGE)
             return;
-          const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-          if (renderObject == null)
+          const h = this._getSceneAndTransformerByDrawingSearch(n);
+          if (h == null)
             return;
-          const { scene, transformer } = renderObject;
-          if (transform == null)
+          const { scene: f, transformer: v } = h;
+          if (a == null)
             return !0;
-          const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId }), imageShape = scene.getObject(drawingShapeKey);
-          if (imageShape == null)
+          const w = G({ unitId: n, subUnitId: e, drawingId: r }), p = f.getObject(w);
+          if (p == null)
             return !0;
-          imageShape.setSrcRect(srcRect), imageShape.setPrstGeom(prstGeom);
+          p.setSrcRect(l), p.setPrstGeom(g);
         });
       })
     );
   }
-  _addHoverForImage(o) {
+  _addHoverForImage(i) {
     this.disposeWithMe(
-      toDisposable(
-        o.onPointerEnter$.subscribeEvent(() => {
-          o.cursor = CURSOR_TYPE.GRAB;
+      we(
+        i.onPointerEnter$.subscribeEvent(() => {
+          i.cursor = xe.GRAB;
         })
       )
     ), this.disposeWithMe(
-      toDisposable(
-        o.onPointerLeave$.subscribeEvent(() => {
-          o.cursor = CURSOR_TYPE.DEFAULT;
+      we(
+        i.onPointerLeave$.subscribeEvent(() => {
+          i.cursor = xe.DEFAULT;
         })
       )
     );
   }
-  _addDialogForImage(o) {
+  _addDialogForImage(i) {
     this.disposeWithMe(
-      toDisposable(
-        o.onDblclick$.subscribeEvent(() => {
-          var _a7;
-          const dialogId = `${o.oKey}-viewer-dialog`, nativeSize = o.getNativeSize(), screenWidth = window.innerWidth - IMAGE_VIEWER_DROPDOWN_PADDING, screenHeight = window.innerHeight - IMAGE_VIEWER_DROPDOWN_PADDING, adjustSize = this._adjustImageSize(nativeSize.width, nativeSize.height, screenWidth, screenHeight), dialog = this._dialogService.open({
-            width: adjustSize.width,
-            id: dialogId,
+      we(
+        i.onDblclick$.subscribeEvent(() => {
+          var o;
+          const t = `${i.oKey}-viewer-dialog`, n = i.getNativeSize(), e = window.innerWidth - nn, r = window.innerHeight - nn, s = this._adjustImageSize(n.width, n.height, e, r), a = this._dialogService.open({
+            width: s.width,
+            id: t,
             style: { margin: "0", top: "50%", left: "50%", transform: "translate(-50%, -50%)" },
             children: {
               label: {
-                name: COMPONENT_IMAGE_VIEWER,
+                name: Pn,
                 props: {
-                  src: (_a7 = o.getNative()) == null ? void 0 : _a7.src,
-                  width: adjustSize.width,
-                  height: adjustSize.height
+                  src: (o = i.getNative()) == null ? void 0 : o.src,
+                  width: s.width,
+                  height: s.height
                 }
               }
             },
             destroyOnClose: !0,
             draggable: !1,
-            onClose: /* @__PURE__ */ __name(() => {
-              this._dialogService.close(dialogId), dialog.dispose();
-            }, "onClose")
+            onClose: () => {
+              this._dialogService.close(t), a.dispose();
+            }
           });
         })
       )
     );
   }
-  _adjustImageSize(nativeWidth, nativeHeight, screenWidth, screenHeight) {
-    if (nativeWidth <= screenWidth && nativeHeight <= screenHeight)
+  _adjustImageSize(i, t, n, e) {
+    if (i <= n && t <= e)
       return {
-        width: nativeWidth,
-        height: nativeHeight
+        width: i,
+        height: t
       };
-    const widthRatio = screenWidth / nativeWidth, heightRatio = screenHeight / nativeHeight, scale = Math.min(widthRatio, heightRatio);
+    const r = n / i, s = e / t, a = Math.min(r, s);
     return {
-      width: Math.floor(nativeWidth * scale),
-      height: Math.floor(nativeHeight * scale)
+      width: Math.floor(i * a),
+      height: Math.floor(t * a)
     };
   }
-}, __name(_a5, "ImageUpdateController"), _a5);
-ImageUpdateController = __decorateClass$1([
-  __decorateParam$1(0, ICommandService),
-  __decorateParam$1(1, IRenderManagerService),
-  __decorateParam$1(2, IDrawingManagerService),
-  __decorateParam$1(3, IDialogService),
-  __decorateParam$1(4, IImageIoService),
-  __decorateParam$1(5, IUniverInstanceService),
-  __decorateParam$1(6, Inject(DrawingRenderService))
-], ImageUpdateController);
-var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp2(target, key, result), result;
-}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam");
-const PLUGIN_NAME = "UNIVER_DRAWING_UI_PLUGIN";
-var _a6;
-let UniverDrawingUIPlugin = (_a6 = class extends Plugin {
-  constructor(_config = defaultPluginConfig, _injector, _configService) {
-    super(), this._config = _config, this._injector = _injector, this._configService = _configService;
-    const { menu, ...rest } = this._config;
-    menu && this._configService.setConfig("menu", menu, { merge: !0 }), this._configService.setConfig(PLUGIN_CONFIG_KEY, rest);
+};
+Be = cr([
+  oe(0, me),
+  oe(1, ue),
+  oe(2, ne),
+  oe(3, Kn),
+  oe(4, an),
+  oe(5, Ke),
+  oe(6, Ue(Oe))
+], Be);
+var lr = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, gr = (i, t, n, e) => {
+  for (var r = e > 1 ? void 0 : e ? mr(t, n) : t, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
+  return e && r && lr(t, n, r), r;
+}, tn = (i, t) => (n, e) => t(n, e, i);
+const ur = "UNIVER_DRAWING_UI_PLUGIN";
+var $e;
+let rn = ($e = class extends Vn {
+  constructor(i = Zt, t, n) {
+    super(), this._config = i, this._injector = t, this._configService = n;
+    const { menu: e, ...r } = this._config;
+    e && this._configService.setConfig("menu", e, { merge: !0 }), this._configService.setConfig(Yt, r);
   }
   onStarting() {
     this._initDependencies();
   }
   onRendered() {
-    this._injector.get(DrawingUpdateController), this._injector.get(DrawingUIController), this._injector.get(ImageCropperController), this._injector.get(ImageUpdateController);
+    this._injector.get(Ee), this._injector.get(De), this._injector.get(Te), this._injector.get(Be);
   }
   _initDependencies() {
     [
-      [DrawingRenderService],
-      [DrawingUpdateController],
-      [DrawingUIController],
-      [ImageCropperController],
-      [ImageUpdateController]
-    ].forEach((dependency) => this._injector.add(dependency));
-  }
-}, __name(_a6, "UniverDrawingUIPlugin"), __publicField(_a6, "pluginName", PLUGIN_NAME), _a6);
-UniverDrawingUIPlugin = __decorateClass([
-  __decorateParam(1, Inject(Injector)),
-  __decorateParam(2, IConfigService)
-], UniverDrawingUIPlugin);
+      [Oe],
+      [Ee],
+      [De],
+      [Te],
+      [Be]
+    ].forEach((t) => this._injector.add(t));
+  }
+}, Q($e, "pluginName", ur), $e);
+rn = gr([
+  tn(1, Ue(Ln)),
+  tn(2, Gn)
+], rn);
 export {
-  AutoImageCropOperation,
-  COMPONENT_IMAGE_POPUP_MENU,
-  CloseImageCropOperation,
-  DrawingCommonPanel,
-  DrawingRenderService,
-  ImageCropperObject,
-  ImagePopupMenu,
-  ImageResetSizeOperation,
-  OpenImageCropOperation,
-  SetDrawingAlignOperation,
-  UniverDrawingUIPlugin,
-  getUpdateParams
+  Ne as AutoImageCropOperation,
+  Kt as COMPONENT_IMAGE_POPUP_MENU,
+  le as CloseImageCropOperation,
+  Sr as DrawingCommonPanel,
+  Oe as DrawingRenderService,
+  Re as ImageCropperObject,
+  Ft as ImagePopupMenu,
+  In as ImageResetSizeOperation,
+  ze as OpenImageCropOperation,
+  Ye as SetDrawingAlignOperation,
+  rn as UniverDrawingUIPlugin,
+  Ae as getUpdateParams
 };