npm - @univerjs/drawing-ui - Versions diffs - 0.2.5 → 0.2.7 - Mend

@univerjs/drawing-ui 0.2.5 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/lib/cjs/index.js +1 -1
package/lib/es/index.js +1199 -1186
package/lib/types/controllers/utils.d.ts +1 -0
package/lib/types/plugin.d.ts +1 -1
package/lib/umd/index.js +1 -1
package/package.json +16 -16

package/lib/es/index.js CHANGED Viewed

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