@univerjs/docs-drawing-ui 0.2.5 → 0.2.6

package/lib/es/index.js

@@ -1,1979 +1,2002 @@
-var vt = Object.defineProperty;
-var It = (i, e, n) => e in i ? vt(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n;
-var _e = (i, e, n) => It(i, typeof e != "symbol" ? e + "" : e, n);
-import { CommandType as Y, ICommandService as $, IUniverInstanceService as ne, TextX as hn, JSONX as X, MemoryCursor as _t, TextXActionType as Z, LocaleService as an, RxDisposable as Ct, UniverInstanceType as be, toDisposable as ye, FOCUSING_COMMON_DRAWINGS as rn, OnLifecycle as sn, LifecycleStages as cn, Inject as pe, IContextService as Fn, useDependency as re, PositionedObjectLayoutType as k, BooleanNumber as oe, ObjectRelativeFromH as ee, ObjectRelativeFromV as V, Tools as Pe, WrapTextType as je, Direction as ge, IUndoRedoService as kn, FOCUSING_UNIVER_EDITOR as St, Disposable as qe, Injector as Hn, UndoCommand as Dt, RedoCommand as Et, throttle as Sn, COLORS as Pt, Plugin as Ot, DependentOn as Tt } from "@univerjs/core";
-import { ImageCropperObject as Mt, COMPONENT_IMAGE_POPUP_MENU as yt, OpenImageCropOperation as bt, ImageResetSizeOperation as Rt, DrawingCommonPanel as Nt, UniverDrawingUIPlugin as At } from "@univerjs/drawing-ui";
-import { IDrawingManagerService as he, DRAWING_IMAGE_ALLOW_IMAGE_LIST as xt, ArrangeTypeEnum as Ye, DRAWING_IMAGE_COUNT_LIMIT as Dn, ImageUploadStatusType as gn, DRAWING_IMAGE_ALLOW_SIZE as Lt, getImageSize as Ut, DrawingTypeEnum as Bt, getDrawingShapeKeyByDrawingSearch as Ft, DRAWING_IMAGE_WIDTH_LIMIT as En, DRAWING_IMAGE_HEIGHT_LIMIT as Pn, IImageIoService as kt, UniverDrawingPlugin as Ht } from "@univerjs/drawing";
-import { IDocDrawingService as Re, UniverDocsDrawingPlugin as Wt } from "@univerjs/docs-drawing";
-import { ITextSelectionRenderManager as Ue, IRenderManagerService as se, DocumentEditArea as xe, Liquid as Wn, PageLayoutType as On, NodePositionConvertToCursor as Tn, getOneTextSelectionRange as Mn, DocumentSkeletonPageType as yn, Vector2 as Gt, getAnchorBounding as Vt, Rect as jt, getColor as $t, TEXT_RANGE_LAYER_INDEX as zt } from "@univerjs/engine-render";
-import { takeUntil as bn, BehaviorSubject as qt } from "rxjs";
-import { DocCanvasPopManagerService as Xt, docDrawingPositionToTransform as Kt } from "@univerjs/docs-ui";
-import { RichTextEditingMutation as Q, getRichTextEditPath as $e, DocSkeletonManagerService as ae, TextSelectionManagerService as un, getRetainAndDeleteFromReplace as Yt, SetDocZoomRatioOperation as Zt, getDocObject as Qt } from "@univerjs/docs";
-import { ISidebarService as Jt, MenuItemType as Gn, MenuPosition as ei, MenuGroup as ni, getMenuHiddenObservable as Vn, KeyCode as Le, ComponentManager as ti, IMenuService as ii, IShortcutService as ri, IMessageService as oi, IEditorService as ai } from "@univerjs/ui";
-import d, { forwardRef as jn, useRef as $n, createElement as zn, useState as ie, useEffect as wn } from "react";
-import j from "clsx";
-import { RadioGroup as Rn, Radio as Ee, InputNumber as Ae, Select as Nn, Checkbox as si, MessageType as An } from "@univerjs/design";
-const vn = {
+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 { CommandType, ICommandService, IUniverInstanceService, TextX, JSONX, MemoryCursor, TextXActionType, LocaleService, RxDisposable, UniverInstanceType, toDisposable, FOCUSING_COMMON_DRAWINGS, OnLifecycle, LifecycleStages, Inject, IContextService, useDependency, PositionedObjectLayoutType, BooleanNumber, ObjectRelativeFromH, ObjectRelativeFromV, Tools, WrapTextType, Direction, IUndoRedoService, FOCUSING_UNIVER_EDITOR, Disposable, Injector, UndoCommand, RedoCommand, throttle, COLORS, Plugin, DependentOn } from "@univerjs/core";
+import { ImageCropperObject, COMPONENT_IMAGE_POPUP_MENU, OpenImageCropOperation, ImageResetSizeOperation, DrawingCommonPanel, UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
+import { IDrawingManagerService, DRAWING_IMAGE_ALLOW_IMAGE_LIST, ArrangeTypeEnum, DRAWING_IMAGE_COUNT_LIMIT, ImageUploadStatusType, DRAWING_IMAGE_ALLOW_SIZE, getImageSize, DrawingTypeEnum, getDrawingShapeKeyByDrawingSearch, DRAWING_IMAGE_WIDTH_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, IImageIoService, UniverDrawingPlugin } from "@univerjs/drawing";
+import { IDocDrawingService, UniverDocsDrawingPlugin } from "@univerjs/docs-drawing";
+import { ITextSelectionRenderManager, IRenderManagerService, DocumentEditArea, Liquid, PageLayoutType, NodePositionConvertToCursor, getOneTextSelectionRange, DocumentSkeletonPageType, Vector2, getAnchorBounding, Rect, getColor, TEXT_RANGE_LAYER_INDEX } from "@univerjs/engine-render";
+import { takeUntil, BehaviorSubject } from "rxjs";
+import { DocCanvasPopManagerService, docDrawingPositionToTransform } from "@univerjs/docs-ui";
+import { RichTextEditingMutation, getRichTextEditPath, DocSkeletonManagerService, TextSelectionManagerService, getRetainAndDeleteFromReplace, SetDocZoomRatioOperation, getDocObject } from "@univerjs/docs";
+import { ISidebarService, MenuItemType, MenuPosition, MenuGroup, getMenuHiddenObservable, KeyCode, ComponentManager, IMenuService, IShortcutService, IMessageService, IEditorService } from "@univerjs/ui";
+import React, { forwardRef, useRef, createElement, useState, useEffect } from "react";
+import clsx from "clsx";
+import { RadioGroup, Radio, InputNumber, Select, Checkbox, MessageType } from "@univerjs/design";
+const RemoveDocDrawingCommand = {
   id: "doc.command.remove-doc-image",
-  type: Y.COMMAND,
+  type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
-  handler: (i, e) => {
-    var C, O, y, T;
-    const n = i.get($), t = i.get(ne), r = i.get(Ue), o = t.getCurrentUniverDocInstance();
-    if (e == null || o == null)
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    var _a8, _b, _c, _d;
+    const commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService), textSelectionRenderManager = accessor.get(ITextSelectionRenderManager), documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
+    if (params == null || documentDataModel == null)
       return !1;
-    const { drawings: a } = e, s = (C = r.getSegment()) != null ? C : "", l = new hn(), c = X.getInstance(), m = (y = (O = o.getSelfOrHeaderFooterModel(s).getBody()) == null ? void 0 : O.customBlocks) != null ? y : [], u = a.map((N) => m.find((R) => R.blockId === N.drawingId)).filter((N) => !!N).sort((N, R) => N.startIndex > R.startIndex ? 1 : -1), f = a[0].unitId, h = new _t();
-    h.reset();
-    const p = u[0].startIndex, w = [
+    const { drawings: removeDrawings } = params, segmentId = (_a8 = textSelectionRenderManager.getSegment()) != null ? _a8 : "", textX = new TextX(), jsonX = JSONX.getInstance(), customBlocks = (_c = (_b = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _b.customBlocks) != null ? _c : [], removeCustomBlocks = removeDrawings.map((drawing) => customBlocks.find((customBlock) => customBlock.blockId === drawing.drawingId)).filter((block) => !!block).sort((a, b) => a.startIndex > b.startIndex ? 1 : -1), unitId = removeDrawings[0].unitId, memoryCursor = new MemoryCursor();
+    memoryCursor.reset();
+    const cursorIndex = removeCustomBlocks[0].startIndex, textRanges = [
       {
-        startOffset: p,
-        endOffset: p
+        startOffset: cursorIndex,
+        endOffset: cursorIndex
       }
-    ], v = {
-      id: Q.id,
+    ], doMutation = {
+      id: RichTextEditingMutation.id,
       params: {
-        unitId: f,
+        unitId,
         actions: [],
-        textRanges: w
+        textRanges
       }
-    }, I = [];
-    for (const N of u) {
-      const { startIndex: R } = N;
-      R > h.cursor && l.push({
-        t: Z.RETAIN,
-        len: R - h.cursor,
+    }, rawActions = [];
+    for (const block of removeCustomBlocks) {
+      const { startIndex } = block;
+      startIndex > memoryCursor.cursor && textX.push({
+        t: TextXActionType.RETAIN,
+        len: startIndex - memoryCursor.cursor,
         segmentId: ""
-      }), l.push({
-        t: Z.DELETE,
+      }), textX.push({
+        t: TextXActionType.DELETE,
         len: 1,
         line: 0,
         segmentId: ""
-      }), h.moveCursorTo(R + 1);
+      }), memoryCursor.moveCursorTo(startIndex + 1);
     }
-    const D = $e(o, s);
-    I.push(c.editOp(l.serialize(), D));
-    for (const N of u) {
-      const { blockId: R } = N, E = ((T = o.getDrawings()) != null ? T : {})[R], z = o.getDrawingsOrder().indexOf(R), U = c.removeOp(["drawings", R], E), B = c.removeOp(["drawingsOrder", z], R);
-      I.push(U), I.push(B);
+    const path = getRichTextEditPath(documentDataModel, segmentId);
+    rawActions.push(jsonX.editOp(textX.serialize(), path));
+    for (const block of removeCustomBlocks) {
+      const { blockId } = block, drawing = ((_d = documentDataModel.getDrawings()) != null ? _d : {})[blockId], drawingIndex = documentDataModel.getDrawingsOrder().indexOf(blockId), removeDrawingAction = jsonX.removeOp(["drawings", blockId], drawing), removeDrawingOrderAction = jsonX.removeOp(["drawingsOrder", drawingIndex], blockId);
+      rawActions.push(removeDrawingAction), rawActions.push(removeDrawingOrderAction);
     }
-    return v.params.actions = I.reduce((N, R) => X.compose(N, R), null), !!n.syncExecuteCommand(v.id, v.params);
-  }
-}, qn = "COMPONENT_DOC_DRAWING_PANEL", Xn = {
+    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
+}, COMPONENT_DOC_DRAWING_PANEL = "COMPONENT_DOC_DRAWING_PANEL", SidebarDocDrawingOperation = {
   id: "sidebar.operation.doc-image",
-  type: Y.COMMAND,
-  handler: async (i, e) => {
-    const n = i.get(Jt), t = i.get(an), r = i.get(he);
-    switch (e.value) {
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const sidebarService = accessor.get(ISidebarService), localeService = accessor.get(LocaleService), drawingManagerService = accessor.get(IDrawingManagerService);
+    switch (params.value) {
       case "open":
-        n.open({
-          header: { title: t.t("docImage.panel.title") },
-          children: { label: qn },
-          onClose: () => {
-            r.focusDrawing(null);
-          },
+        sidebarService.open({
+          header: { title: localeService.t("docImage.panel.title") },
+          children: { label: COMPONENT_DOC_DRAWING_PANEL },
+          onClose: /* @__PURE__ */ __name(() => {
+            drawingManagerService.focusDrawing(null);
+          }, "onClose"),
           width: 360
         });
         break;
       case "close":
       default:
-        n.close();
+        sidebarService.close();
         break;
     }
     return !0;
-  }
-}, Kn = {
+  }, "handler")
+}, EditDocDrawingOperation = {
   id: "doc.operation.edit-doc-image",
-  type: Y.OPERATION,
-  handler: (i, e) => {
-    const n = i.get(he), t = i.get($);
-    return e == null ? !1 : (n.focusDrawing([e]), t.executeCommand(Xn.id, { value: "open" }), !0);
-  }
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const drawingManagerService = accessor.get(IDrawingManagerService), commandService = accessor.get(ICommandService);
+    return params == null ? !1 : (drawingManagerService.focusDrawing([params]), commandService.executeCommand(SidebarDocDrawingOperation.id, { value: "open" }), !0);
+  }, "handler")
 };
-var ci = Object.defineProperty, li = Object.getOwnPropertyDescriptor, di = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? li(e, n) : e, o = i.length - 1, a; o >= 0; o--)
-    (a = i[o]) && (r = (t ? a(e, n, r) : a(r)) || r);
-  return t && r && ci(e, n, r), r;
-}, ke = (i, e) => (n, t) => e(n, t, i);
-let Je = class extends Ct {
-  constructor(e, n, t, r, o) {
+var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor, __decorateClass$6 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(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$6(target, key, result), result;
+}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6"), _a;
+let DocDrawingPopupMenuController = (_a = class extends RxDisposable {
+  constructor(_drawingManagerService, _canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService) {
     super();
-    _e(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
-    this._drawingManagerService = e, this._canvasPopManagerService = n, this._renderManagerService = t, this._univerInstanceService = r, this._contextService = o, this._init();
+    __publicField(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
+    this._drawingManagerService = _drawingManagerService, this._canvasPopManagerService = _canvasPopManagerService, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._contextService = _contextService, this._init();
   }
   _init() {
-    this._univerInstanceService.getCurrentTypeOfUnit$(be.UNIVER_DOC).pipe(bn(this.dispose$)).subscribe((e) => this._create(e)), this._univerInstanceService.getTypeOfUnitDisposed$(be.UNIVER_DOC).pipe(bn(this.dispose$)).subscribe((e) => this._dispose(e)), this._univerInstanceService.getAllUnitsForType(be.UNIVER_DOC).forEach((e) => this._create(e));
+    this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((documentDataModel) => this._create(documentDataModel)), this._univerInstanceService.getTypeOfUnitDisposed$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((documentDataModel) => this._dispose(documentDataModel)), this._univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_DOC).forEach((documentDataModel) => this._create(documentDataModel));
   }
-  _dispose(e) {
-    const n = e.getUnitId();
-    this._renderManagerService.removeRender(n);
+  _dispose(documentDataModel) {
+    const unitId = documentDataModel.getUnitId();
+    this._renderManagerService.removeRender(unitId);
   }
-  _create(e) {
-    if (!e)
+  _create(documentDataModel) {
+    if (!documentDataModel)
       return;
-    const n = e.getUnitId();
-    this._renderManagerService.has(n) && !this._initImagePopupMenu.has(n) && (this._popupMenuListener(n), this._initImagePopupMenu.add(n));
+    const unitId = documentDataModel.getUnitId();
+    this._renderManagerService.has(unitId) && !this._initImagePopupMenu.has(unitId) && (this._popupMenuListener(unitId), this._initImagePopupMenu.add(unitId));
   }
-  _hasCropObject(e) {
-    const n = e.getAllObjects();
-    for (const t of n)
-      if (t instanceof Mt)
+  _hasCropObject(scene) {
+    const objects = scene.getAllObjects();
+    for (const object of objects)
+      if (object instanceof ImageCropperObject)
         return !0;
     return !1;
   }
   // eslint-disable-next-line max-lines-per-function
-  _popupMenuListener(e) {
-    var o;
-    const n = (o = this._renderManagerService.getRenderById(e)) == null ? void 0 : o.scene;
-    if (!n)
+  _popupMenuListener(unitId) {
+    var _a8;
+    const scene = (_a8 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a8.scene;
+    if (!scene)
       return;
-    const t = n.getTransformerByCreate();
-    if (!t)
+    const transformer = scene.getTransformerByCreate();
+    if (!transformer)
       return;
-    const r = [];
+    const disposePopups = [];
     this.disposeWithMe(
-      ye(
-        t.createControl$.subscribe(() => {
-          if (this._hasCropObject(n))
+      toDisposable(
+        transformer.createControl$.subscribe(() => {
+          if (this._hasCropObject(scene))
             return;
-          const a = t.getSelectedObjectMap();
-          if (r.forEach((w) => w.dispose()), r.length = 0, a.size > 1)
+          const selectedObjects = transformer.getSelectedObjectMap();
+          if (disposePopups.forEach((dispose) => dispose.dispose()), disposePopups.length = 0, selectedObjects.size > 1)
             return;
-          const s = a.values().next().value;
-          if (!s)
+          const object = selectedObjects.values().next().value;
+          if (!object)
             return;
-          const l = s.oKey, c = this._drawingManagerService.getDrawingOKey(l);
-          if (!c)
+          const oKey = object.oKey, drawingParam = this._drawingManagerService.getDrawingOKey(oKey);
+          if (!drawingParam)
             return;
-          const { unitId: m, subUnitId: u, drawingId: f } = c;
-          r.push(this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(s, {
-            componentKey: yt,
+          const { unitId: unitId2, subUnitId, drawingId } = drawingParam;
+          disposePopups.push(this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
+            componentKey: COMPONENT_IMAGE_POPUP_MENU,
             direction: "horizontal",
             offset: [2, 0],
             extraProps: {
-              menuItems: this._getImageMenuItems(m, u, f)
+              menuItems: this._getImageMenuItems(unitId2, subUnitId, drawingId)
             }
-          }))), !this._drawingManagerService.getFocusDrawings().find((w) => w.unitId === m && w.subUnitId === u && w.drawingId === f) && this._drawingManagerService.focusDrawing([{
-            unitId: m,
-            subUnitId: u,
-            drawingId: f
+          }))), !this._drawingManagerService.getFocusDrawings().find((drawing) => drawing.unitId === unitId2 && drawing.subUnitId === subUnitId && drawing.drawingId === drawingId) && this._drawingManagerService.focusDrawing([{
+            unitId: unitId2,
+            subUnitId,
+            drawingId
           }]);
         })
       )
     ), this.disposeWithMe(
-      ye(
-        t.clearControl$.subscribe(() => {
-          r.forEach((a) => a.dispose()), r.length = 0, this._contextService.setContextValue(rn, !1), this._drawingManagerService.focusDrawing(null);
+      toDisposable(
+        transformer.clearControl$.subscribe(() => {
+          disposePopups.forEach((dispose) => dispose.dispose()), disposePopups.length = 0, this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, !1), this._drawingManagerService.focusDrawing(null);
         })
       )
     ), this.disposeWithMe(
-      ye(
-        t.changing$.subscribe(() => {
-          r.forEach((a) => a.dispose()), r.length = 0;
+      toDisposable(
+        transformer.changing$.subscribe(() => {
+          disposePopups.forEach((dispose) => dispose.dispose()), disposePopups.length = 0;
         })
       )
     ), this.disposeWithMe(
-      ye(
-        t.changeStart$.subscribe(() => {
-          r.forEach((a) => a.dispose()), r.length = 0;
+      toDisposable(
+        transformer.changeStart$.subscribe(() => {
+          disposePopups.forEach((dispose) => dispose.dispose()), disposePopups.length = 0;
         })
       )
     );
   }
-  _getImageMenuItems(e, n, t) {
+  _getImageMenuItems(unitId, subUnitId, drawingId) {
     return [
       {
         label: "image-popup.edit",
         index: 0,
-        commandId: Kn.id,
-        commandParams: { unitId: e, subUnitId: n, drawingId: t },
+        commandId: EditDocDrawingOperation.id,
+        commandParams: { unitId, subUnitId, drawingId },
         disable: !1
       },
       {
         label: "image-popup.delete",
         index: 1,
-        commandId: vn.id,
-        commandParams: { unitId: e, drawings: [{ unitId: e, subUnitId: n, drawingId: t }] },
+        commandId: RemoveDocDrawingCommand.id,
+        commandParams: { unitId, drawings: [{ unitId, subUnitId, drawingId }] },
         disable: !1
       },
       {
         label: "image-popup.crop",
         index: 2,
-        commandId: bt.id,
-        commandParams: { unitId: e, subUnitId: n, drawingId: t },
+        commandId: OpenImageCropOperation.id,
+        commandParams: { unitId, subUnitId, drawingId },
         disable: !0
         // TODO: @JOCS, feature is not ready.
       },
       {
         label: "image-popup.reset",
         index: 3,
-        commandId: Rt.id,
-        commandParams: [{ unitId: e, subUnitId: n, drawingId: t }],
+        commandId: ImageResetSizeOperation.id,
+        commandParams: [{ unitId, subUnitId, drawingId }],
         disable: !0
         // TODO: @JOCS, feature is not ready.
       }
     ];
   }
-};
-Je = di([
-  sn(cn.Rendered, Je),
-  ke(0, he),
-  ke(1, pe(Xt)),
-  ke(2, se),
-  ke(3, ne),
-  ke(4, Fn)
-], Je);
-var ue = function() {
-  return ue = Object.assign || function(i) {
-    for (var e, n = 1, t = arguments.length; n < t; n++) {
-      e = arguments[n];
-      for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && (i[r] = e[r]);
+}, __name(_a, "DocDrawingPopupMenuController"), _a);
+DocDrawingPopupMenuController = __decorateClass$6([
+  OnLifecycle(LifecycleStages.Rendered, DocDrawingPopupMenuController),
+  __decorateParam$6(0, IDrawingManagerService),
+  __decorateParam$6(1, Inject(DocCanvasPopManagerService)),
+  __decorateParam$6(2, IRenderManagerService),
+  __decorateParam$6(3, IUniverInstanceService),
+  __decorateParam$6(4, IContextService)
+], DocDrawingPopupMenuController);
+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 i;
-  }, ue.apply(this, arguments);
-}, mi = function(i, e) {
-  var n = {};
-  for (var t in i) Object.prototype.hasOwnProperty.call(i, t) && e.indexOf(t) < 0 && (n[t] = i[t]);
-  if (i != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var r = 0, t = Object.getOwnPropertySymbols(i); r < t.length; r++)
-      e.indexOf(t[r]) < 0 && Object.prototype.propertyIsEnumerable.call(i, t[r]) && (n[t[r]] = i[t[r]]);
-  return n;
-}, Yn = jn(function(i, e) {
-  var n = i.icon, t = i.id, r = i.className, o = i.extend, a = mi(i, ["icon", "id", "className", "extend"]), s = "univerjs-icon univerjs-icon-".concat(t, " ").concat(r || "").trim(), l = $n("_".concat(fi()));
-  return Zn(n, "".concat(t), { defIds: n.defIds, idSuffix: l.current }, ue({ ref: e, className: s }, a), 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 Zn(i, e, n, t, r) {
-  return zn(i.tag, ue(ue({ key: e }, gi(i, n, r)), t), (ui(i, n).children || []).map(function(o, a) {
-    return Zn(o, "".concat(e, "-").concat(i.tag, "-").concat(a), n, 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 gi(i, e, n) {
-  var t = ue({}, i.attrs);
-  n != null && n.colorChannel1 && t.fill === "colorChannel1" && (t.fill = n.colorChannel1);
-  var r = e.defIds;
-  return !r || r.length === 0 || (i.tag === "use" && t["xlink:href"] && (t["xlink:href"] = t["xlink:href"] + e.idSuffix), Object.entries(t).forEach(function(o) {
-    var a = o[0], s = o[1];
-    typeof s == "string" && (t[a] = s.replace(/url\(#(.*)\)/, "url(#$1".concat(e.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(_a8) {
+    var key = _a8[0], value = _a8[1];
+    typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
+  })), attrs;
 }
-function ui(i, e) {
-  var n, t = e.defIds;
-  return !t || t.length === 0 ? i : i.tag === "defs" && (!((n = i.children) === null || n === void 0) && n.length) ? ue(ue({}, i), { children: i.children.map(function(r) {
-    return typeof r.attrs.id == "string" && t && t.indexOf(r.attrs.id) > -1 ? ue(ue({}, r), { attrs: ue(ue({}, r.attrs), { id: r.attrs.id + e.idSuffix }) }) : r;
-  }) }) : i;
+__name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
+function replaceRuntimeIdsInDefs(node, runtimeProps) {
+  var _a8, defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a8 = node.children) === null || _a8 === void 0) && _a8.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 fi() {
+__name(replaceRuntimeIdsInDefs, "replaceRuntimeIdsInDefs");
+function generateShortUuid() {
   return Math.random().toString(36).substring(2, 8);
 }
-Yn.displayName = "UniverIcon";
-var pi = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M2.2498 3.65005C2.2498 2.87685 2.87661 2.25005 3.64981 2.25005H7.9998C8.33118 2.25005 8.5998 1.98142 8.5998 1.65005C8.5998 1.31868 8.33118 1.05005 7.9998 1.05005H3.64981C2.21387 1.05005 1.0498 2.21411 1.0498 3.65005V12.35C1.0498 13.786 2.21386 14.95 3.6498 14.95H12.3498C13.7857 14.95 14.9498 13.786 14.9498 12.3501V8.00005C14.9498 7.66868 14.6812 7.40005 14.3498 7.40005C14.0184 7.40005 13.7498 7.66868 13.7498 8.00005V9.23974L12.2385 8.1063C11.7252 7.72129 11.0068 7.7723 10.5531 8.22605L9.00869 9.77041L6.73916 7.8251C6.24387 7.40055 5.5095 7.41278 5.02864 7.85359L2.2498 10.4009V3.65005ZM2.2498 12.0287V12.35C2.2498 13.1232 2.87661 13.75 3.6498 13.75H12.3498C13.123 13.75 13.7498 13.1232 13.7498 12.3501V10.7397L11.5186 9.06631C11.4829 9.03956 11.433 9.04314 11.4016 9.07458L9.92249 10.5537L11.1015 11.5642C11.3531 11.7799 11.3822 12.1587 11.1666 12.4103C10.9509 12.6619 10.5721 12.691 10.3205 12.4753L5.9582 8.7362C5.92384 8.70674 5.87288 8.70758 5.83952 8.73816L2.2498 12.0287Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M11.8097 1.14783C12.1411 1.14783 12.4097 1.41646 12.4097 1.74783V3.297H14.1541C14.4855 3.297 14.7541 3.56563 14.7541 3.897C14.7541 4.22837 14.4855 4.497 14.1541 4.497H12.4097V6.24167C12.4097 6.57304 12.1411 6.84167 11.8097 6.84167C11.4783 6.84167 11.2097 6.57304 11.2097 6.24167V4.497H9.6603C9.32893 4.497 9.0603 4.22837 9.0603 3.897C9.0603 3.56563 9.32893 3.297 9.6603 3.297H11.2097V1.74783C11.2097 1.41646 11.4783 1.14783 11.8097 1.14783Z" } }] }, Qn = jn(function(i, e) {
-  return zn(Yn, Object.assign({}, i, {
+__name(generateShortUuid, "generateShortUuid");
+IconBase.displayName = "UniverIcon";
+var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M2.2498 3.65005C2.2498 2.87685 2.87661 2.25005 3.64981 2.25005H7.9998C8.33118 2.25005 8.5998 1.98142 8.5998 1.65005C8.5998 1.31868 8.33118 1.05005 7.9998 1.05005H3.64981C2.21387 1.05005 1.0498 2.21411 1.0498 3.65005V12.35C1.0498 13.786 2.21386 14.95 3.6498 14.95H12.3498C13.7857 14.95 14.9498 13.786 14.9498 12.3501V8.00005C14.9498 7.66868 14.6812 7.40005 14.3498 7.40005C14.0184 7.40005 13.7498 7.66868 13.7498 8.00005V9.23974L12.2385 8.1063C11.7252 7.72129 11.0068 7.7723 10.5531 8.22605L9.00869 9.77041L6.73916 7.8251C6.24387 7.40055 5.5095 7.41278 5.02864 7.85359L2.2498 10.4009V3.65005ZM2.2498 12.0287V12.35C2.2498 13.1232 2.87661 13.75 3.6498 13.75H12.3498C13.123 13.75 13.7498 13.1232 13.7498 12.3501V10.7397L11.5186 9.06631C11.4829 9.03956 11.433 9.04314 11.4016 9.07458L9.92249 10.5537L11.1015 11.5642C11.3531 11.7799 11.3822 12.1587 11.1666 12.4103C10.9509 12.6619 10.5721 12.691 10.3205 12.4753L5.9582 8.7362C5.92384 8.70674 5.87288 8.70758 5.83952 8.73816L2.2498 12.0287Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M11.8097 1.14783C12.1411 1.14783 12.4097 1.41646 12.4097 1.74783V3.297H14.1541C14.4855 3.297 14.7541 3.56563 14.7541 3.897C14.7541 4.22837 14.4855 4.497 14.1541 4.497H12.4097V6.24167C12.4097 6.57304 12.1411 6.84167 11.8097 6.84167C11.4783 6.84167 11.2097 6.57304 11.2097 6.24167V4.497H9.6603C9.32893 4.497 9.0603 4.22837 9.0603 3.897C9.0603 3.56563 9.32893 3.297 9.6603 3.297H11.2097V1.74783C11.2097 1.41646 11.4783 1.14783 11.8097 1.14783Z" } }] }, AddImageSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
     id: "add-image-single",
-    ref: e,
-    icon: pi
+    ref,
+    icon: element
   }));
 });
-Qn.displayName = "AddImageSingle";
-const In = {
+AddImageSingle.displayName = "AddImageSingle";
+const InsertDocImageOperation = {
   id: "doc.operation.insert-float-image",
-  type: Y.OPERATION,
-  handler: () => !0
-}, hi = "univer-upload-file-menu", wi = "univer-upload-file-menu-input", xn = {
-  uploadFileMenu: hi,
-  uploadFileMenuInput: wi
-}, vi = () => {
-  const i = re($), e = $n(null), n = () => {
-    var o;
-    (o = e.current) == null || o.click();
-  }, t = xt.map((o) => `.${o.replace("image/", "")}`).join(","), r = (o) => {
-    const a = o.target.files;
-    if (a == null)
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name(() => !0, "handler")
+}, uploadFileMenu = "univer-upload-file-menu", uploadFileMenuInput = "univer-upload-file-menu-input", styles$1 = {
+  uploadFileMenu,
+  uploadFileMenuInput
+}, UploadFileMenu = /* @__PURE__ */ __name(() => {
+  const commandService = useDependency(ICommandService), fileInputRef = useRef(null), handleButtonClick = /* @__PURE__ */ __name(() => {
+    var _a8;
+    (_a8 = fileInputRef.current) == null || _a8.click();
+  }, "handleButtonClick"), imageAccept = DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace("image/", "")}`).join(","), handleFileChange = /* @__PURE__ */ __name((event) => {
+    const fileList = event.target.files;
+    if (fileList == null)
       return;
-    const s = Array.from(a);
-    i.executeCommand(In.id, { files: s }), e.current && (e.current.value = "");
-  };
-  return /* @__PURE__ */ d.createElement("div", { onClick: n, className: xn.uploadFileMenu }, /* @__PURE__ */ d.createElement(
+    const files = Array.from(fileList);
+    commandService.executeCommand(InsertDocImageOperation.id, { files }), fileInputRef.current && (fileInputRef.current.value = "");
+  }, "handleFileChange");
+  return /* @__PURE__ */ React.createElement("div", { onClick: handleButtonClick, className: styles$1.uploadFileMenu }, /* @__PURE__ */ React.createElement(
     "input",
     {
       type: "file",
-      className: xn.uploadFileMenuInput,
-      ref: e,
-      onChange: r,
-      accept: t,
+      className: styles$1.uploadFileMenuInput,
+      ref: fileInputRef,
+      onChange: handleFileChange,
+      accept: imageAccept,
       multiple: !0
     }
   ));
-}, Jn = "COMPONENT_DOC_UPLOAD_FILE_MENU", et = "addition-and-subtraction-single", nt = "doc.menu.image", Ii = "doc.menu.image.upload.float";
-function _i(i) {
+}, "UploadFileMenu"), COMPONENT_DOC_UPLOAD_FILE_MENU = "COMPONENT_DOC_UPLOAD_FILE_MENU", ImageUploadIcon = "addition-and-subtraction-single", IMAGE_MENU_ID = "doc.menu.image", IMAGE_MENU_UPLOAD_FLOAT_ID = "doc.menu.image.upload.float";
+function ImageMenuFactory(accessor) {
   return {
-    id: nt,
-    type: Gn.SUBITEMS,
-    positions: [ei.TOOLBAR_START],
-    group: ni.TOOLBAR_LAYOUT,
-    icon: et,
+    id: IMAGE_MENU_ID,
+    type: MenuItemType.SUBITEMS,
+    positions: [MenuPosition.TOOLBAR_START],
+    group: MenuGroup.TOOLBAR_LAYOUT,
+    icon: ImageUploadIcon,
     tooltip: "docImage.title",
-    hidden$: Vn(i, be.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function Ci(i) {
+__name(ImageMenuFactory, "ImageMenuFactory");
+function UploadFloatImageMenuFactory(_accessor) {
   return {
-    id: Ii,
+    id: IMAGE_MENU_UPLOAD_FLOAT_ID,
     title: "docImage.upload.float",
-    type: Gn.SELECTOR,
+    type: MenuItemType.SELECTOR,
     label: {
-      name: Jn
+      name: COMPONENT_DOC_UPLOAD_FILE_MENU
     },
-    positions: [nt],
-    hidden$: Vn(i, be.UNIVER_DOC)
+    positions: [IMAGE_MENU_ID],
+    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-const Si = "univer-image-common-panel", Di = "univer-image-common-panel-grid", Ei = "univer-image-common-panel-border", Pi = "univer-image-common-panel-title", Oi = "univer-image-common-panel-subtitle", Ti = "univer-image-common-panel-row", Mi = "univer-image-common-panel-row-vertical", yi = "univer-image-common-panel-column", bi = "univer-image-common-panel-column-center", Ri = "univer-image-common-panel-inline", Ni = "univer-image-common-panel-span2", Ai = "univer-image-common-panel-span3", xi = "univer-image-common-panel-input", Li = "univer-sheet-image-menu", Ui = "univer-sheet-image-menu-input", g = {
-  imageCommonPanel: Si,
-  imageCommonPanelGrid: Di,
-  imageCommonPanelBorder: Ei,
-  imageCommonPanelTitle: Pi,
-  imageCommonPanelSubtitle: Oi,
-  imageCommonPanelRow: Ti,
-  imageCommonPanelRowVertical: Mi,
-  imageCommonPanelColumn: yi,
-  imageCommonPanelColumnCenter: bi,
-  imageCommonPanelInline: Ri,
-  imageCommonPanelSpan2: Ni,
-  imageCommonPanelSpan3: Ai,
-  imageCommonPanelInput: xi,
-  sheetImageMenu: Li,
-  sheetImageMenuInput: Ui
-};
-class ln {
+__name(UploadFloatImageMenuFactory, "UploadFloatImageMenuFactory");
+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", sheetImageMenu = "univer-sheet-image-menu", sheetImageMenuInput = "univer-sheet-image-menu-input", styles = {
+  imageCommonPanel,
+  imageCommonPanelGrid,
+  imageCommonPanelBorder,
+  imageCommonPanelTitle,
+  imageCommonPanelSubtitle,
+  imageCommonPanelRow,
+  imageCommonPanelRowVertical,
+  imageCommonPanelColumn,
+  imageCommonPanelColumnCenter,
+  imageCommonPanelInline,
+  imageCommonPanelSpan2,
+  imageCommonPanelSpan3,
+  imageCommonPanelInput,
+  sheetImageMenu,
+  sheetImageMenuInput
+}, _DocRefreshDrawingsService = class _DocRefreshDrawingsService {
   constructor() {
-    _e(this, "_refreshDrawings$", new qt(null));
-    _e(this, "refreshDrawings$", this._refreshDrawings$.asObservable());
+    __publicField(this, "_refreshDrawings$", new BehaviorSubject(null));
+    __publicField(this, "refreshDrawings$", this._refreshDrawings$.asObservable());
   }
-  refreshDrawings(e) {
-    this._refreshDrawings$.next(e);
+  refreshDrawings(skeleton) {
+    this._refreshDrawings$.next(skeleton);
   }
-}
-var me = /* @__PURE__ */ ((i) => (i.INLINE = "inline", i.BEHIND_TEXT = "behindText", i.IN_FRONT_OF_TEXT = "inFrontOfText", i.WRAP_SQUARE = "wrapSquare", i.WRAP_TOP_AND_BOTTOM = "wrapTopAndBottom", i))(me || {});
-const Bi = {
-  inline: k.INLINE,
-  wrapSquare: k.WRAP_SQUARE,
-  wrapTopAndBottom: k.WRAP_TOP_AND_BOTTOM,
-  inFrontOfText: k.WRAP_NONE,
-  behindText: k.WRAP_NONE
 };
-function tt(i, e, n, t, r, o, a) {
-  var h, p;
-  const s = new hn(), l = X.getInstance(), c = [], m = o.getSelfOrHeaderFooterModel(e).getBody(), u = o.getSelfOrHeaderFooterModel(i).getBody();
-  if (m == null || u == null)
+__name(_DocRefreshDrawingsService, "DocRefreshDrawingsService");
+let DocRefreshDrawingsService = _DocRefreshDrawingsService;
+var TextWrappingStyle = /* @__PURE__ */ ((TextWrappingStyle2) => (TextWrappingStyle2.INLINE = "inline", TextWrappingStyle2.BEHIND_TEXT = "behindText", TextWrappingStyle2.IN_FRONT_OF_TEXT = "inFrontOfText", TextWrappingStyle2.WRAP_SQUARE = "wrapSquare", TextWrappingStyle2.WRAP_TOP_AND_BOTTOM = "wrapTopAndBottom", TextWrappingStyle2))(TextWrappingStyle || {});
+const WRAPPING_STYLE_TO_LAYOUT_TYPE = {
+  inline: PositionedObjectLayoutType.INLINE,
+  wrapSquare: PositionedObjectLayoutType.WRAP_SQUARE,
+  wrapTopAndBottom: PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM,
+  inFrontOfText: PositionedObjectLayoutType.WRAP_NONE,
+  behindText: PositionedObjectLayoutType.WRAP_NONE
+};
+function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPage, offset, drawingId, documentDataModel, textSelectionRenderManager) {
+  var _a8, _b;
+  const textX = new TextX(), jsonX = JSONX.getInstance(), rawActions = [], oldBody = documentDataModel.getSelfOrHeaderFooterModel(oldSegmentId).getBody(), body = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
+  if (oldBody == null || body == null)
     return;
-  const f = (p = (h = m.customBlocks) == null ? void 0 : h.find((w) => w.blockId === r)) == null ? void 0 : p.startIndex;
-  if (f != null) {
-    if (t = Math.min(u.dataStream.length - 2, t), i === e) {
-      if (t < f ? (t > 0 && s.push({
-        t: Z.RETAIN,
-        len: t,
-        segmentId: e
-      }), s.push({
-        t: Z.INSERT,
+  const oldOffset = (_b = (_a8 = oldBody.customBlocks) == null ? void 0 : _a8.find((block) => block.blockId === drawingId)) == null ? void 0 : _b.startIndex;
+  if (oldOffset != null) {
+    if (offset = Math.min(body.dataStream.length - 2, offset), segmentId === oldSegmentId) {
+      if (offset < oldOffset ? (offset > 0 && textX.push({
+        t: TextXActionType.RETAIN,
+        len: offset,
+        segmentId: oldSegmentId
+      }), textX.push({
+        t: TextXActionType.INSERT,
         body: {
           dataStream: "\b",
           customBlocks: [{
             startIndex: 0,
-            blockId: r
+            blockId: drawingId
           }]
         },
         len: 1,
         line: 0,
-        segmentId: e
-      }), s.push({
-        t: Z.RETAIN,
-        len: f - t,
-        segmentId: e
-      }), s.push({
-        t: Z.DELETE,
+        segmentId: oldSegmentId
+      }), textX.push({
+        t: TextXActionType.RETAIN,
+        len: oldOffset - offset,
+        segmentId: oldSegmentId
+      }), textX.push({
+        t: TextXActionType.DELETE,
         len: 1,
         line: 0,
         segmentId: ""
-      })) : (f > 0 && s.push({
-        t: Z.RETAIN,
-        len: f,
-        segmentId: e
-      }), s.push({
-        t: Z.DELETE,
+      })) : (oldOffset > 0 && textX.push({
+        t: TextXActionType.RETAIN,
+        len: oldOffset,
+        segmentId: oldSegmentId
+      }), textX.push({
+        t: TextXActionType.DELETE,
         len: 1,
         line: 0,
         segmentId: ""
-      }), t - f - 1 > 0 && s.push({
-        t: Z.RETAIN,
-        len: t - f - 1,
-        segmentId: e
-      }), s.push({
-        t: Z.INSERT,
+      }), offset - oldOffset - 1 > 0 && textX.push({
+        t: TextXActionType.RETAIN,
+        len: offset - oldOffset - 1,
+        segmentId: oldSegmentId
+      }), textX.push({
+        t: TextXActionType.INSERT,
         body: {
           dataStream: "\b",
           customBlocks: [{
             startIndex: 0,
-            blockId: r
+            blockId: drawingId
           }]
         },
         len: 1,
         line: 0,
-        segmentId: e
-      })), t !== f) {
-        const w = $e(o, e), v = l.editOp(s.serialize(), w);
-        c.push(v);
+        segmentId: oldSegmentId
+      })), offset !== oldOffset) {
+        const path = getRichTextEditPath(documentDataModel, oldSegmentId), action = jsonX.editOp(textX.serialize(), path);
+        rawActions.push(action);
       }
     } else {
-      f > 0 && s.push({
-        t: Z.RETAIN,
-        len: f,
-        segmentId: e
-      }), s.push({
-        t: Z.DELETE,
+      oldOffset > 0 && textX.push({
+        t: TextXActionType.RETAIN,
+        len: oldOffset,
+        segmentId: oldSegmentId
+      }), textX.push({
+        t: TextXActionType.DELETE,
         len: 1,
         line: 0,
         segmentId: ""
       });
-      let w = $e(o, e), v = l.editOp(s.serialize(), w);
-      c.push(v), s.empty(), t > 0 && s.push({
-        t: Z.RETAIN,
-        len: t,
-        segmentId: i
-      }), s.push({
-        t: Z.INSERT,
+      let path = getRichTextEditPath(documentDataModel, oldSegmentId), action = jsonX.editOp(textX.serialize(), path);
+      rawActions.push(action), textX.empty(), offset > 0 && textX.push({
+        t: TextXActionType.RETAIN,
+        len: offset,
+        segmentId
+      }), textX.push({
+        t: TextXActionType.INSERT,
         body: {
           dataStream: "\b",
           customBlocks: [{
             startIndex: 0,
-            blockId: r
+            blockId: drawingId
           }]
         },
         len: 1,
         line: 0,
-        segmentId: i
-      }), w = $e(o, i), v = l.editOp(s.serialize(), w), c.push(v), a.setSegment(i), a.setSegmentPage(n);
+        segmentId
+      }), path = getRichTextEditPath(documentDataModel, segmentId), action = jsonX.editOp(textX.serialize(), path), rawActions.push(action), textSelectionRenderManager.setSegment(segmentId), textSelectionRenderManager.setSegmentPage(segmentPage);
     }
-    return c;
+    return rawActions;
   }
 }
-const it = {
+__name(getDeleteAndInsertCustomBlockActions, "getDeleteAndInsertCustomBlockActions");
+const UpdateDocDrawingWrappingStyleCommand = {
   id: "doc.command.update-doc-drawing-wrapping-style",
-  type: Y.COMMAND,
+  type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function, complexity
-  handler: (i, e) => {
-    var T, N;
-    if (e == null)
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    var _a8, _b;
+    if (params == null)
       return !1;
-    const { drawings: n, wrappingStyle: t, unitId: r } = e, o = i.get($), a = i.get(ne), l = i.get(se).getRenderById(r), c = l == null ? void 0 : l.with(ae).getSkeleton().getSkeletonData(), m = l == null ? void 0 : l.with(ae).getViewModel(), u = l == null ? void 0 : l.scene, f = a.getCurrentUniverDocInstance();
-    if (f == null || c == null || u == null || m == null)
+    const { drawings, wrappingStyle, unitId } = params, commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService), renderObject = accessor.get(IRenderManagerService).getRenderById(unitId), skeletonData = renderObject == null ? void 0 : renderObject.with(DocSkeletonManagerService).getSkeleton().getSkeletonData(), viewModel = renderObject == null ? void 0 : renderObject.with(DocSkeletonManagerService).getViewModel(), scene = renderObject == null ? void 0 : renderObject.scene, documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
+    if (documentDataModel == null || skeletonData == null || scene == null || viewModel == null)
       return !1;
-    const h = m.getEditArea(), p = u.getTransformerByCreate(), { pages: w, skeHeaders: v, skeFooters: I } = c, D = X.getInstance(), _ = [], { drawings: C = {} } = f.getSnapshot();
-    for (const R of n) {
-      const { drawingId: E } = R, H = C[E].layoutType, z = Bi[t];
-      if (H !== z) {
-        const S = D.replaceOp(["drawings", E, "layoutType"], H, z);
-        _.push(S);
+    const editArea = viewModel.getEditArea(), transformer = scene.getTransformerByCreate(), { pages, skeHeaders, skeFooters } = skeletonData, jsonX = JSONX.getInstance(), rawActions = [], { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+    for (const drawing of drawings) {
+      const { drawingId } = drawing, oldLayoutType = oldDrawings[drawingId].layoutType, newLayoutType = WRAPPING_STYLE_TO_LAYOUT_TYPE[wrappingStyle];
+      if (oldLayoutType !== newLayoutType) {
+        const updateLayoutTypeAction = jsonX.replaceOp(["drawings", drawingId, "layoutType"], oldLayoutType, newLayoutType);
+        rawActions.push(updateLayoutTypeAction);
       }
-      if (t === "behindText" || t === "inFrontOfText") {
-        const S = C[E].behindDoc, A = t === "behindText" ? oe.TRUE : oe.FALSE;
-        if (S !== A) {
-          const P = D.replaceOp(["drawings", E, "behindDoc"], S, A);
-          _.push(P);
+      if (wrappingStyle === "behindText" || wrappingStyle === "inFrontOfText") {
+        const oldBehindDoc = oldDrawings[drawingId].behindDoc, newBehindDoc = wrappingStyle === "behindText" ? BooleanNumber.TRUE : BooleanNumber.FALSE;
+        if (oldBehindDoc !== newBehindDoc) {
+          const updateBehindDocAction = jsonX.replaceOp(["drawings", drawingId, "behindDoc"], oldBehindDoc, newBehindDoc);
+          rawActions.push(updateBehindDocAction);
         }
       }
-      if (t === "inline")
+      if (wrappingStyle === "inline")
         continue;
-      let U = null, B = 0, b = 0;
-      for (const S of w) {
-        const { headerId: A, footerId: P, marginTop: L, marginLeft: x, marginBottom: M, pageWidth: W, pageHeight: G } = S;
-        switch (h) {
-          case xe.HEADER: {
-            const F = (T = v.get(A)) == null ? void 0 : T.get(W);
-            F != null && F.skeDrawings.has(E) && (U = F.skeDrawings.get(E), B = F.marginTop, b = x);
+      let skeDrawing = null, pageMarginTop = 0, pageMarginLeft = 0;
+      for (const page of pages) {
+        const { headerId, footerId, marginTop, marginLeft, marginBottom, pageWidth, pageHeight } = page;
+        switch (editArea) {
+          case DocumentEditArea.HEADER: {
+            const headerSke = (_a8 = skeHeaders.get(headerId)) == null ? void 0 : _a8.get(pageWidth);
+            headerSke != null && headerSke.skeDrawings.has(drawingId) && (skeDrawing = headerSke.skeDrawings.get(drawingId), pageMarginTop = headerSke.marginTop, pageMarginLeft = marginLeft);
             break;
           }
-          case xe.FOOTER: {
-            const F = (N = I.get(P)) == null ? void 0 : N.get(W);
-            F != null && F.skeDrawings.has(E) && (U = F.skeDrawings.get(E), B = G - M + F.marginTop, b = x);
+          case DocumentEditArea.FOOTER: {
+            const footerSke = (_b = skeFooters.get(footerId)) == null ? void 0 : _b.get(pageWidth);
+            footerSke != null && footerSke.skeDrawings.has(drawingId) && (skeDrawing = footerSke.skeDrawings.get(drawingId), pageMarginTop = pageHeight - marginBottom + footerSke.marginTop, pageMarginLeft = marginLeft);
             break;
           }
-          case xe.BODY: {
-            S.skeDrawings.has(E) && (U = S.skeDrawings.get(E), B = L, b = x);
+          case DocumentEditArea.BODY: {
+            page.skeDrawings.has(drawingId) && (skeDrawing = page.skeDrawings.get(drawingId), pageMarginTop = marginTop, pageMarginLeft = marginLeft);
             break;
           }
         }
-        if (U != null)
+        if (skeDrawing != null)
           break;
       }
-      if (U != null) {
-        const { aTop: S, aLeft: A } = U, P = C[E].docTransform.positionH;
-        let L = A;
-        P.relativeFrom === ee.MARGIN ? L -= b : P.relativeFrom === ee.COLUMN && (L -= U.columnLeft);
-        const x = {
-          relativeFrom: P.relativeFrom,
-          posOffset: L
+      if (skeDrawing != null) {
+        const { aTop, aLeft } = skeDrawing, oldPositionH = oldDrawings[drawingId].docTransform.positionH;
+        let posOffsetH = aLeft;
+        oldPositionH.relativeFrom === ObjectRelativeFromH.MARGIN ? posOffsetH -= pageMarginLeft : oldPositionH.relativeFrom === ObjectRelativeFromH.COLUMN && (posOffsetH -= skeDrawing.columnLeft);
+        const newPositionH = {
+          relativeFrom: oldPositionH.relativeFrom,
+          posOffset: posOffsetH
         };
-        if (P.posOffset !== x.posOffset) {
-          const F = D.replaceOp(["drawings", E, "docTransform", "positionH"], P, x);
-          _.push(F);
+        if (oldPositionH.posOffset !== newPositionH.posOffset) {
+          const action = jsonX.replaceOp(["drawings", drawingId, "docTransform", "positionH"], oldPositionH, newPositionH);
+          rawActions.push(action);
         }
-        const M = C[E].docTransform.positionV;
-        let W = S;
-        M.relativeFrom === V.PAGE ? W += B : M.relativeFrom === V.LINE ? W -= U.lineTop : M.relativeFrom === V.PARAGRAPH && (W -= U.blockAnchorTop);
-        const G = {
-          relativeFrom: M.relativeFrom,
-          posOffset: W
+        const oldPositionV = oldDrawings[drawingId].docTransform.positionV;
+        let posOffsetV = aTop;
+        oldPositionV.relativeFrom === ObjectRelativeFromV.PAGE ? posOffsetV += pageMarginTop : oldPositionV.relativeFrom === ObjectRelativeFromV.LINE ? posOffsetV -= skeDrawing.lineTop : oldPositionV.relativeFrom === ObjectRelativeFromV.PARAGRAPH && (posOffsetV -= skeDrawing.blockAnchorTop);
+        const newPositionV = {
+          relativeFrom: oldPositionV.relativeFrom,
+          posOffset: posOffsetV
         };
-        if (M.posOffset !== G.posOffset) {
-          const F = D.replaceOp(["drawings", E, "docTransform", "positionV"], M, G);
-          _.push(F);
+        if (oldPositionV.posOffset !== newPositionV.posOffset) {
+          const action = jsonX.replaceOp(["drawings", drawingId, "docTransform", "positionV"], oldPositionV, newPositionV);
+          rawActions.push(action);
         }
       }
     }
-    const O = {
-      id: Q.id,
+    const doMutation = {
+      id: RichTextEditingMutation.id,
       params: {
-        unitId: r,
+        unitId,
         actions: [],
         textRanges: null
       }
     };
-    O.params.actions = _.reduce((R, E) => X.compose(R, E), null);
-    const y = o.syncExecuteCommand(O.id, O.params);
-    return p.refreshControls(), !!y;
-  }
-}, rt = {
+    doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null);
+    const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+    return transformer.refreshControls(), !!result;
+  }, "handler")
+}, UpdateDocDrawingDistanceCommand = {
   id: "doc.command.update-doc-drawing-distance",
-  type: Y.COMMAND,
-  handler: (i, e) => {
-    if (e == null)
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    if (params == null)
       return !1;
-    const n = i.get($), r = i.get(ne).getCurrentUniverDocInstance();
-    if (r == null)
+    const commandService = accessor.get(ICommandService), documentDataModel = accessor.get(IUniverInstanceService).getCurrentUniverDocInstance();
+    if (documentDataModel == null)
       return !1;
-    const { drawings: o, dist: a, unitId: s } = e, l = X.getInstance(), c = [], { drawings: m = {} } = r.getSnapshot();
-    for (const h of o) {
-      const { drawingId: p } = h;
-      for (const [w, v] of Object.entries(a)) {
-        const I = m[p][w];
-        if (I !== v) {
-          const D = l.replaceOp(["drawings", p, w], I, v);
-          c.push(D);
+    const { drawings, dist, unitId } = params, jsonX = JSONX.getInstance(), rawActions = [], { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+    for (const drawing of drawings) {
+      const { drawingId } = drawing;
+      for (const [key, value] of Object.entries(dist)) {
+        const oldValue = oldDrawings[drawingId][key];
+        if (oldValue !== value) {
+          const action = jsonX.replaceOp(["drawings", drawingId, key], oldValue, value);
+          rawActions.push(action);
         }
       }
     }
-    const u = {
-      id: Q.id,
+    const doMutation = {
+      id: RichTextEditingMutation.id,
       params: {
-        unitId: s,
+        unitId,
         actions: [],
         textRanges: null
       }
     };
-    return u.params.actions = c.reduce((h, p) => X.compose(h, p), null), !!n.syncExecuteCommand(u.id, u.params);
-  }
-}, ot = {
+    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
+}, UpdateDocDrawingWrapTextCommand = {
   id: "doc.command.update-doc-drawing-wrap-text",
-  type: Y.COMMAND,
-  handler: (i, e) => {
-    if (e == null)
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    if (params == null)
       return !1;
-    const n = i.get($), r = i.get(ne).getCurrentUniverDocInstance();
-    if (r == null)
+    const commandService = accessor.get(ICommandService), documentDataModel = accessor.get(IUniverInstanceService).getCurrentUniverDocInstance();
+    if (documentDataModel == null)
       return !1;
-    const { drawings: o, wrapText: a, unitId: s } = e, l = X.getInstance(), c = [], { drawings: m = {} } = r.getSnapshot();
-    for (const h of o) {
-      const { drawingId: p } = h, w = m[p].wrapText;
-      if (w !== a) {
-        const v = l.replaceOp(["drawings", p, "wrapText"], w, a);
-        c.push(v);
+    const { drawings, wrapText, unitId } = params, jsonX = JSONX.getInstance(), rawActions = [], { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+    for (const drawing of drawings) {
+      const { drawingId } = drawing, oldWrapText = oldDrawings[drawingId].wrapText;
+      if (oldWrapText !== wrapText) {
+        const action = jsonX.replaceOp(["drawings", drawingId, "wrapText"], oldWrapText, wrapText);
+        rawActions.push(action);
       }
     }
-    const u = {
-      id: Q.id,
+    const doMutation = {
+      id: RichTextEditingMutation.id,
       params: {
-        unitId: s,
+        unitId,
         actions: [],
         textRanges: null
       }
     };
-    return u.params.actions = c.reduce((h, p) => X.compose(h, p), null), !!n.syncExecuteCommand(u.id, u.params);
-  }
-}, ze = {
+    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
+}, UpdateDrawingDocTransformCommand = {
   id: "doc.command.update-drawing-doc-transform",
-  type: Y.COMMAND,
-  handler: (i, e) => {
-    if (e == null)
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    if (params == null)
       return !1;
-    const n = i.get($), t = i.get(ne), o = i.get(se).getRenderById(e.unitId), a = o == null ? void 0 : o.scene;
-    if (a == null)
+    const commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService), renderObject = accessor.get(IRenderManagerService).getRenderById(params.unitId), scene = renderObject == null ? void 0 : renderObject.scene;
+    if (scene == null)
       return !1;
-    const s = a.getTransformerByCreate(), l = t.getCurrentUniverDocInstance();
-    if (l == null)
+    const transformer = scene.getTransformerByCreate(), documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
+    if (documentDataModel == null)
       return !1;
-    const { drawings: c, unitId: m } = e, u = X.getInstance(), f = [], { drawings: h = {} } = l.getSnapshot();
-    for (const v of c) {
-      const { drawingId: I, key: D, value: _ } = v, C = h[I].docTransform[D];
-      if (!Pe.diffValue(C, _)) {
-        const O = u.replaceOp(["drawings", I, "docTransform", D], C, _);
-        f.push(O);
+    const { drawings, unitId } = params, jsonX = JSONX.getInstance(), rawActions = [], { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+    for (const drawing of drawings) {
+      const { drawingId, key, value } = drawing, oldValue = oldDrawings[drawingId].docTransform[key];
+      if (!Tools.diffValue(oldValue, value)) {
+        const action = jsonX.replaceOp(["drawings", drawingId, "docTransform", key], oldValue, value);
+        rawActions.push(action);
       }
     }
-    const p = {
-      id: Q.id,
+    const doMutation = {
+      id: RichTextEditingMutation.id,
       params: {
-        unitId: m,
+        unitId,
         actions: [],
         textRanges: null,
         debounce: !0
       }
     };
-    p.params.actions = f.reduce((v, I) => X.compose(v, I), null);
-    const w = n.syncExecuteCommand(p.id, p.params);
-    return s.refreshControls(), !!w;
-  }
-}, at = {
+    doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null);
+    const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+    return transformer.refreshControls(), !!result;
+  }, "handler")
+}, IMoveInlineDrawingCommand = {
   id: "doc.command.move-inline-drawing",
-  type: Y.COMMAND,
-  handler: (i, e) => {
-    var T;
-    if (e == null)
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    var _a8;
+    if (params == null)
       return !1;
-    const n = i.get(se), t = i.get(Ue), r = i.get(ln), o = n.getRenderById(e.unitId), a = o == null ? void 0 : o.scene, s = o == null ? void 0 : o.with(ae).getSkeleton();
-    if (a == null)
+    const renderManagerService = accessor.get(IRenderManagerService), textSelectionRenderManager = accessor.get(ITextSelectionRenderManager), docRefreshDrawingsService = accessor.get(DocRefreshDrawingsService), renderObject = renderManagerService.getRenderById(params.unitId), scene = renderObject == null ? void 0 : renderObject.scene, skeleton = renderObject == null ? void 0 : renderObject.with(DocSkeletonManagerService).getSkeleton();
+    if (scene == null)
       return !1;
-    const l = a.getTransformerByCreate(), c = i.get($), u = i.get(ne).getCurrentUniverDocInstance();
-    if (u == null)
+    const transformer = scene.getTransformerByCreate(), commandService = accessor.get(ICommandService), documentDataModel = accessor.get(IUniverInstanceService).getCurrentUniverDocInstance();
+    if (documentDataModel == null)
       return !1;
-    const { drawing: f, unitId: h, offset: p, segmentId: w, segmentPage: v } = e, I = [], { drawingId: D } = f, _ = (T = t.getSegment()) != null ? T : "", C = tt(
-      w,
-      _,
-      v,
-      p,
-      D,
-      u,
-      t
+    const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage } = params, rawActions = [], { drawingId } = drawing, segmentId = (_a8 = textSelectionRenderManager.getSegment()) != null ? _a8 : "", actions = getDeleteAndInsertCustomBlockActions(
+      newSegmentId,
+      segmentId,
+      segmentPage,
+      offset,
+      drawingId,
+      documentDataModel,
+      textSelectionRenderManager
     );
-    if (C == null || C.length === 0)
-      return r.refreshDrawings(s), l.refreshControls(), !1;
-    I.push(...C);
-    const O = {
-      id: Q.id,
+    if (actions == null || actions.length === 0)
+      return docRefreshDrawingsService.refreshDrawings(skeleton), transformer.refreshControls(), !1;
+    rawActions.push(...actions);
+    const doMutation = {
+      id: RichTextEditingMutation.id,
       params: {
-        unitId: h,
+        unitId,
         actions: [],
         textRanges: null
       }
     };
-    O.params.actions = I.reduce((N, R) => X.compose(N, R), null);
-    const y = c.syncExecuteCommand(O.id, O.params);
-    return l.refreshControls(), !!y;
-  }
-}, st = {
+    doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null);
+    const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+    return transformer.refreshControls(), !!result;
+  }, "handler")
+}, ITransformNonInlineDrawingCommand = {
   id: "doc.command.transform-non-inline-drawing",
-  type: Y.COMMAND,
+  type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
-  handler: (i, e) => {
-    var U;
-    if (e == null)
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    var _a8;
+    if (params == null)
       return !1;
-    const n = i.get(Ue), r = i.get(se).getRenderById(e.unitId), o = r == null ? void 0 : r.scene;
-    if (o == null)
+    const textSelectionRenderManager = accessor.get(ITextSelectionRenderManager), renderObject = accessor.get(IRenderManagerService).getRenderById(params.unitId), scene = renderObject == null ? void 0 : renderObject.scene;
+    if (scene == null)
       return !1;
-    const a = o.getTransformerByCreate(), s = i.get($), c = i.get(ne).getCurrentUniverDocInstance();
-    if (c == null)
+    const transformer = scene.getTransformerByCreate(), commandService = accessor.get(ICommandService), documentDataModel = accessor.get(IUniverInstanceService).getCurrentUniverDocInstance();
+    if (documentDataModel == null)
       return !1;
-    const { drawing: m, unitId: u, offset: f, docTransform: h, segmentId: p, segmentPage: w } = e, v = [], { drawingId: I } = m, D = (U = n.getSegment()) != null ? U : "", _ = tt(
-      p,
-      D,
-      w,
-      f,
-      I,
-      c,
-      n
+    const { drawing, unitId, offset, docTransform, segmentId: newSegmentId, segmentPage } = params, rawActions = [], { drawingId } = drawing, segmentId = (_a8 = textSelectionRenderManager.getSegment()) != null ? _a8 : "", actions = getDeleteAndInsertCustomBlockActions(
+      newSegmentId,
+      segmentId,
+      segmentPage,
+      offset,
+      drawingId,
+      documentDataModel,
+      textSelectionRenderManager
     );
-    if (_ == null)
+    if (actions == null)
       return !1;
-    _.length > 0 && v.push(..._);
-    const C = X.getInstance(), { drawings: O = {} } = c.getSnapshot(), y = O[I].docTransform, { positionH: T, positionV: N, size: R, angle: E } = y;
-    if (!Pe.diffValue(T, h.positionH)) {
-      const B = C.replaceOp(["drawings", I, "docTransform", "positionH"], T, h.positionH);
-      v.push(B);
+    actions.length > 0 && rawActions.push(...actions);
+    const jsonX = JSONX.getInstance(), { drawings: oldDrawings = {} } = documentDataModel.getSnapshot(), oldDocTransform = oldDrawings[drawingId].docTransform, { positionH: oldPositionH, positionV: oldPositionV, size: oldSize, angle: oldAngle } = oldDocTransform;
+    if (!Tools.diffValue(oldPositionH, docTransform.positionH)) {
+      const updateAction = jsonX.replaceOp(["drawings", drawingId, "docTransform", "positionH"], oldPositionH, docTransform.positionH);
+      rawActions.push(updateAction);
     }
-    if (!Pe.diffValue(N, h.positionV)) {
-      const B = C.replaceOp(["drawings", I, "docTransform", "positionV"], N, h.positionV);
-      v.push(B);
+    if (!Tools.diffValue(oldPositionV, docTransform.positionV)) {
+      const updateAction = jsonX.replaceOp(["drawings", drawingId, "docTransform", "positionV"], oldPositionV, docTransform.positionV);
+      rawActions.push(updateAction);
     }
-    if (!Pe.diffValue(R, h.size)) {
-      const B = C.replaceOp(["drawings", I, "docTransform", "size"], R, h.size);
-      v.push(B);
+    if (!Tools.diffValue(oldSize, docTransform.size)) {
+      const updateAction = jsonX.replaceOp(["drawings", drawingId, "docTransform", "size"], oldSize, docTransform.size);
+      rawActions.push(updateAction);
     }
-    if (!Pe.diffValue(E, h.angle)) {
-      const B = C.replaceOp(["drawings", I, "docTransform", "angle"], E, h.angle);
-      v.push(B);
+    if (!Tools.diffValue(oldAngle, docTransform.angle)) {
+      const updateAction = jsonX.replaceOp(["drawings", drawingId, "docTransform", "angle"], oldAngle, docTransform.angle);
+      rawActions.push(updateAction);
     }
-    const H = {
-      id: Q.id,
+    const doMutation = {
+      id: RichTextEditingMutation.id,
       params: {
-        unitId: u,
+        unitId,
         actions: [],
         textRanges: null,
         debounce: !0
       }
     };
-    H.params.actions = v.reduce((B, b) => X.compose(B, b), null);
-    const z = s.syncExecuteCommand(H.id, H.params);
-    return a.refreshControls(), !!z;
-  }
-}, Ze = 0, Qe = 100, Fi = (i) => {
-  const e = re($), n = re(an), t = re(he), r = re(se), o = re(ne), { drawings: a } = i, s = a[0];
-  if (s == null)
+    doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null);
+    const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+    return transformer.refreshControls(), !!result;
+  }, "handler")
+}, MIN_MARGIN = 0, MAX_MARGIN = 100, DocDrawingTextWrap = /* @__PURE__ */ __name((props) => {
+  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), univerInstanceService = useDependency(IUniverInstanceService), { drawings } = props, drawingParam = drawings[0];
+  if (drawingParam == null)
     return null;
-  const { unitId: l } = s, c = o.getUniverDocInstance(l), m = r.getRenderById(l);
-  if ((m == null ? void 0 : m.scene) == null)
+  const { unitId } = drawingParam, documentDataModel = univerInstanceService.getUniverDocInstance(unitId), renderObject = renderManagerService.getRenderById(unitId);
+  if ((renderObject == null ? void 0 : renderObject.scene) == null)
     return null;
-  const [f, h] = ie(!0), [p, w] = ie(!0), [v, I] = ie(!0), [D, _] = ie(me.INLINE), [C, O] = ie(""), [y, T] = ie({
+  const [disableWrapText, setDisableWrapText] = useState(!0), [disableDistTB, setDisableDistTB] = useState(!0), [disableDistLR, setDisableDistLR] = useState(!0), [wrappingStyle, setWrappingStyle] = useState(TextWrappingStyle.INLINE), [wrapText, setWrapText] = useState(""), [distToText, setDistToText] = useState({
     distT: 0,
     distL: 0,
     distB: 0,
     distR: 0
-  }), [N, R] = ie(!0);
-  function E(b) {
-    _(b);
-    const S = t.getFocusDrawings();
-    if (S.length === 0)
+  }), [showPanel, setShowPanel] = useState(!0);
+  function handleWrappingStyleChange(value) {
+    setWrappingStyle(value);
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    if (focusDrawings.length === 0)
       return;
-    const { unitId: A, subUnitId: P } = S[0], L = S.map(({ unitId: x, subUnitId: M, drawingId: W }) => ({
-      unitId: x,
-      subUnitId: M,
-      drawingId: W
+    const { unitId: unitId2, subUnitId } = focusDrawings[0], drawings2 = focusDrawings.map(({ unitId: unitId3, subUnitId: subUnitId2, drawingId }) => ({
+      unitId: unitId3,
+      subUnitId: subUnitId2,
+      drawingId
     }));
-    e.executeCommand(it.id, {
-      unitId: A,
-      subUnitId: P,
-      drawings: L,
-      wrappingStyle: b
+    commandService.executeCommand(UpdateDocDrawingWrappingStyleCommand.id, {
+      unitId: unitId2,
+      subUnitId,
+      drawings: drawings2,
+      wrappingStyle: value
     });
   }
-  function H(b) {
-    O(b);
-    const S = t.getFocusDrawings();
-    if (S.length === 0)
+  __name(handleWrappingStyleChange, "handleWrappingStyleChange");
+  function handleWrapTextChange(value) {
+    setWrapText(value);
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    if (focusDrawings.length === 0)
       return;
-    const A = S.map((P) => ({
-      unitId: P.unitId,
-      subUnitId: P.subUnitId,
-      drawingId: P.drawingId
+    const drawings2 = focusDrawings.map((drawing) => ({
+      unitId: drawing.unitId,
+      subUnitId: drawing.subUnitId,
+      drawingId: drawing.drawingId
     }));
-    e.executeCommand(ot.id, {
-      unitId: S[0].unitId,
-      subUnitId: S[0].unitId,
-      drawings: A,
-      wrapText: b
+    commandService.executeCommand(UpdateDocDrawingWrapTextCommand.id, {
+      unitId: focusDrawings[0].unitId,
+      subUnitId: focusDrawings[0].unitId,
+      drawings: drawings2,
+      wrapText: value
     });
   }
-  function z(b, S) {
-    if (b == null)
+  __name(handleWrapTextChange, "handleWrapTextChange");
+  function handleDistToTextChange(value, direction) {
+    if (value == null)
       return;
-    const A = { ...y, [S]: b };
-    T(A);
-    const P = t.getFocusDrawings();
-    if (P.length === 0)
+    const newDistToText = { ...distToText, [direction]: value };
+    setDistToText(newDistToText);
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    if (focusDrawings.length === 0)
       return;
-    const L = P.map((x) => ({
-      unitId: x.unitId,
-      subUnitId: x.subUnitId,
-      drawingId: x.drawingId
+    const drawings2 = focusDrawings.map((drawing) => ({
+      unitId: drawing.unitId,
+      subUnitId: drawing.subUnitId,
+      drawingId: drawing.drawingId
     }));
-    e.executeCommand(rt.id, {
-      unitId: P[0].unitId,
-      subUnitId: P[0].unitId,
-      drawings: L,
+    commandService.executeCommand(UpdateDocDrawingDistanceCommand.id, {
+      unitId: focusDrawings[0].unitId,
+      subUnitId: focusDrawings[0].unitId,
+      drawings: drawings2,
       dist: {
-        [S]: b
+        [direction]: value
       }
     });
   }
-  function U() {
-    const b = t.getFocusDrawings();
-    b.length !== 0 && B(b[0]);
+  __name(handleDistToTextChange, "handleDistToTextChange");
+  function updateFocusDrawingState() {
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    focusDrawings.length !== 0 && updateState(focusDrawings[0]);
   }
-  function B(b) {
-    var ce, fe;
-    const S = (fe = (ce = c == null ? void 0 : c.getSnapshot()) == null ? void 0 : ce.drawings) == null ? void 0 : fe[b.drawingId];
-    if (S == null)
+  __name(updateFocusDrawingState, "updateFocusDrawingState");
+  function updateState(drawingParam2) {
+    var _a8, _b;
+    const drawing = (_b = (_a8 = documentDataModel == null ? void 0 : documentDataModel.getSnapshot()) == null ? void 0 : _a8.drawings) == null ? void 0 : _b[drawingParam2.drawingId];
+    if (drawing == null)
       return;
     const {
-      distT: A = 0,
-      distL: P = 0,
-      distB: L = 0,
-      distR: x = 0,
-      layoutType: M = k.INLINE,
-      behindDoc: W = oe.FALSE,
-      wrapText: G = je.BOTH_SIDES
-    } = S;
-    if (T({
-      distT: A,
-      distL: P,
-      distB: L,
-      distR: x
-    }), O(G), h(M !== k.WRAP_SQUARE), M === k.WRAP_NONE || M === k.INLINE ? w(!0) : w(!1), M === k.WRAP_NONE || M === k.INLINE || M === k.WRAP_TOP_AND_BOTTOM ? I(!0) : I(!1), M === k.WRAP_NONE)
-      W === oe.TRUE ? _(me.BEHIND_TEXT) : _(me.IN_FRONT_OF_TEXT);
+      distT = 0,
+      distL = 0,
+      distB = 0,
+      distR = 0,
+      layoutType = PositionedObjectLayoutType.INLINE,
+      behindDoc = BooleanNumber.FALSE,
+      wrapText: wrapText2 = WrapTextType.BOTH_SIDES
+    } = drawing;
+    if (setDistToText({
+      distT,
+      distL,
+      distB,
+      distR
+    }), setWrapText(wrapText2), setDisableWrapText(layoutType !== PositionedObjectLayoutType.WRAP_SQUARE), layoutType === PositionedObjectLayoutType.WRAP_NONE || layoutType === PositionedObjectLayoutType.INLINE ? setDisableDistTB(!0) : setDisableDistTB(!1), layoutType === PositionedObjectLayoutType.WRAP_NONE || layoutType === PositionedObjectLayoutType.INLINE || layoutType === PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM ? setDisableDistLR(!0) : setDisableDistLR(!1), layoutType === PositionedObjectLayoutType.WRAP_NONE)
+      behindDoc === BooleanNumber.TRUE ? setWrappingStyle(TextWrappingStyle.BEHIND_TEXT) : setWrappingStyle(TextWrappingStyle.IN_FRONT_OF_TEXT);
     else
-      switch (M) {
-        case k.INLINE:
-          _(me.INLINE);
+      switch (layoutType) {
+        case PositionedObjectLayoutType.INLINE:
+          setWrappingStyle(TextWrappingStyle.INLINE);
           break;
-        case k.WRAP_SQUARE:
-          _(me.WRAP_SQUARE);
+        case PositionedObjectLayoutType.WRAP_SQUARE:
+          setWrappingStyle(TextWrappingStyle.WRAP_SQUARE);
           break;
-        case k.WRAP_TOP_AND_BOTTOM:
-          _(me.WRAP_TOP_AND_BOTTOM);
+        case PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM:
+          setWrappingStyle(TextWrappingStyle.WRAP_TOP_AND_BOTTOM);
           break;
         default:
-          throw new Error(`Unsupported layout type: ${M}`);
+          throw new Error(`Unsupported layout type: ${layoutType}`);
       }
   }
-  return wn(() => {
-    U();
-    const b = t.focus$.subscribe((A) => {
-      if (A.length === 0) {
-        R(!1);
+  return __name(updateState, "updateState"), useEffect(() => {
+    updateFocusDrawingState();
+    const subscription = drawingManagerService.focus$.subscribe((drawingParams) => {
+      if (drawingParams.length === 0) {
+        setShowPanel(!1);
         return;
       }
-      R(!0), B(A[0]);
-    }), S = e.onCommandExecuted(async (A) => {
-      A.id === Q.id && U();
+      setShowPanel(!0), updateState(drawingParams[0]);
+    }), mutationListener = commandService.onCommandExecuted(async (command) => {
+      command.id === RichTextEditingMutation.id && updateFocusDrawingState();
     });
     return () => {
-      b.unsubscribe(), S.dispose();
+      subscription.unsubscribe(), mutationListener.dispose();
     };
-  }, []), /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelGrid, g.imageCommonPanelBorder), style: { display: N ? "block" : "none" } }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelTitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-text-wrap.title")))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-text-wrap.wrappingStyle")))), /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelRow) }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn) }, /* @__PURE__ */ d.createElement(Rn, { value: D, onChange: E, direction: "vertical" }, /* @__PURE__ */ d.createElement(Ee, { value: me.INLINE }, n.t("image-text-wrap.inline")), /* @__PURE__ */ d.createElement(Ee, { value: me.WRAP_SQUARE }, n.t("image-text-wrap.square")), /* @__PURE__ */ d.createElement(Ee, { value: me.WRAP_TOP_AND_BOTTOM }, n.t("image-text-wrap.topAndBottom")), /* @__PURE__ */ d.createElement(Ee, { value: me.BEHIND_TEXT }, n.t("image-text-wrap.behindText")), /* @__PURE__ */ d.createElement(Ee, { value: me.IN_FRONT_OF_TEXT }, n.t("image-text-wrap.inFrontText"))))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-text-wrap.wrapText")))), /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelRow) }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn) }, /* @__PURE__ */ d.createElement(Rn, { disabled: f, value: C, onChange: H, direction: "horizontal" }, /* @__PURE__ */ d.createElement(Ee, { value: je.BOTH_SIDES }, n.t("image-text-wrap.bothSide")), /* @__PURE__ */ d.createElement(Ee, { value: je.LEFT }, n.t("image-text-wrap.leftOnly")), /* @__PURE__ */ d.createElement(Ee, { value: je.RIGHT }, n.t("image-text-wrap.rightOnly"))))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-text-wrap.distanceFromText")))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, n.t("image-text-wrap.top"))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
-    Ae,
+  }, []), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder), style: { display: showPanel ? "block" : "none" } }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.title")))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.wrappingStyle")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelRow) }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn) }, /* @__PURE__ */ React.createElement(RadioGroup, { value: wrappingStyle, onChange: handleWrappingStyleChange, direction: "vertical" }, /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.INLINE }, localeService.t("image-text-wrap.inline")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.WRAP_SQUARE }, localeService.t("image-text-wrap.square")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.WRAP_TOP_AND_BOTTOM }, localeService.t("image-text-wrap.topAndBottom")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.BEHIND_TEXT }, localeService.t("image-text-wrap.behindText")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.IN_FRONT_OF_TEXT }, localeService.t("image-text-wrap.inFrontText"))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.wrapText")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelRow) }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn) }, /* @__PURE__ */ React.createElement(RadioGroup, { disabled: disableWrapText, value: wrapText, onChange: handleWrapTextChange, direction: "horizontal" }, /* @__PURE__ */ React.createElement(Radio, { value: WrapTextType.BOTH_SIDES }, localeService.t("image-text-wrap.bothSide")), /* @__PURE__ */ React.createElement(Radio, { value: WrapTextType.LEFT }, localeService.t("image-text-wrap.leftOnly")), /* @__PURE__ */ React.createElement(Radio, { value: WrapTextType.RIGHT }, localeService.t("image-text-wrap.rightOnly"))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.distanceFromText")))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.top"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    InputNumber,
     {
-      min: Ze,
-      max: Qe,
-      disabled: p,
+      min: MIN_MARGIN,
+      max: MAX_MARGIN,
+      disabled: disableDistTB,
       precision: 1,
-      value: y.distT,
-      onChange: (b) => {
-        z(b, "distT");
-      },
-      className: g.imageCommonPanelInput
+      value: distToText.distT,
+      onChange: /* @__PURE__ */ __name((val) => {
+        handleDistToTextChange(val, "distT");
+      }, "onChange"),
+      className: styles.imageCommonPanelInput
     }
-  ))))), /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, n.t("image-text-wrap.left"))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
-    Ae,
+  ))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.left"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    InputNumber,
     {
-      min: Ze,
-      max: Qe,
-      disabled: v,
+      min: MIN_MARGIN,
+      max: MAX_MARGIN,
+      disabled: disableDistLR,
       precision: 1,
-      value: y.distL,
-      onChange: (b) => {
-        z(b, "distL");
-      },
-      className: g.imageCommonPanelInput
+      value: distToText.distL,
+      onChange: /* @__PURE__ */ __name((val) => {
+        handleDistToTextChange(val, "distL");
+      }, "onChange"),
+      className: styles.imageCommonPanelInput
     }
-  )))))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, n.t("image-text-wrap.bottom"))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
-    Ae,
+  )))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.bottom"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    InputNumber,
     {
-      min: Ze,
-      max: Qe,
-      disabled: p,
+      min: MIN_MARGIN,
+      max: MAX_MARGIN,
+      disabled: disableDistTB,
       precision: 1,
-      value: y.distB,
-      onChange: (b) => {
-        z(b, "distB");
-      },
-      className: g.imageCommonPanelInput
+      value: distToText.distB,
+      onChange: /* @__PURE__ */ __name((val) => {
+        handleDistToTextChange(val, "distB");
+      }, "onChange"),
+      className: styles.imageCommonPanelInput
     }
-  ))))), /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, n.t("image-text-wrap.right"))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
-    Ae,
+  ))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.right"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    InputNumber,
     {
-      min: Ze,
-      max: Qe,
-      disabled: v,
+      min: MIN_MARGIN,
+      max: MAX_MARGIN,
+      disabled: disableDistLR,
       precision: 1,
-      value: y.distR,
-      onChange: (b) => {
-        z(b, "distR");
-      },
-      className: g.imageCommonPanelInput
+      value: distToText.distR,
+      onChange: /* @__PURE__ */ __name((val) => {
+        handleDistToTextChange(val, "distR");
+      }, "onChange"),
+      className: styles.imageCommonPanelInput
     }
   )))))));
-}, Ln = -1e3, Un = 1e3, ki = (i) => {
-  const e = re($), n = re(an), t = re(he), r = re(se), o = re(ne), a = re(Ue), { drawings: s } = i, l = s[0];
-  if (l == null)
+}, "DocDrawingTextWrap"), MIN_OFFSET = -1e3, MAX_OFFSET = 1e3, DocDrawingPosition = /* @__PURE__ */ __name((props) => {
+  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), univerInstanceService = useDependency(IUniverInstanceService), textSelectionRenderService = useDependency(ITextSelectionRenderManager), { drawings } = props, drawingParam = drawings[0];
+  if (drawingParam == null)
     return;
-  const { unitId: c } = l, m = o.getUniverDocInstance(c), u = r.getRenderById(c), f = u == null ? void 0 : u.scene;
-  if (f == null)
+  const { unitId } = drawingParam, documentDataModel = univerInstanceService.getUniverDocInstance(unitId), renderObject = renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
+  if (scene == null)
     return;
-  const h = f.getTransformerByCreate(), p = [{
-    label: n.t("image-position.column"),
-    value: String(ee.COLUMN)
+  const transformer = scene.getTransformerByCreate(), HORIZONTAL_RELATIVE_FROM = [{
+    label: localeService.t("image-position.column"),
+    value: String(ObjectRelativeFromH.COLUMN)
   }, {
-    label: n.t("image-position.page"),
-    value: String(ee.PAGE)
+    label: localeService.t("image-position.page"),
+    value: String(ObjectRelativeFromH.PAGE)
   }, {
-    label: n.t("image-position.margin"),
-    value: String(ee.MARGIN)
-  }], w = [{
-    label: n.t("image-position.line"),
-    value: String(V.LINE)
+    label: localeService.t("image-position.margin"),
+    value: String(ObjectRelativeFromH.MARGIN)
+  }], VERTICAL_RELATIVE_FROM = [{
+    label: localeService.t("image-position.line"),
+    value: String(ObjectRelativeFromV.LINE)
   }, {
-    label: n.t("image-position.page"),
-    value: String(V.PAGE)
+    label: localeService.t("image-position.page"),
+    value: String(ObjectRelativeFromV.PAGE)
   }, {
-    label: n.t("image-position.margin"),
-    value: String(V.MARGIN)
+    label: localeService.t("image-position.margin"),
+    value: String(ObjectRelativeFromV.MARGIN)
   }, {
-    label: n.t("image-position.paragraph"),
-    value: String(V.PARAGRAPH)
-  }], [v, I] = ie(!0), [D, _] = ie({
-    relativeFrom: ee.PAGE,
+    label: localeService.t("image-position.paragraph"),
+    value: String(ObjectRelativeFromV.PARAGRAPH)
+  }], [disabled, setDisabled] = useState(!0), [hPosition, setHPosition] = useState({
+    relativeFrom: ObjectRelativeFromH.PAGE,
     posOffset: 0
-  }), [C, O] = ie({
-    relativeFrom: V.PAGE,
+  }), [vPosition, setVPosition] = useState({
+    relativeFrom: ObjectRelativeFromV.PAGE,
     posOffset: 0
-  }), [y, T] = ie(!0), [N, R] = ie(!0);
-  function E(S, A) {
-    S === "positionH" ? _(A) : O(A);
-    const P = t.getFocusDrawings();
-    if (P.length === 0)
+  }), [followTextMove, setFollowTextMove] = useState(!0), [showPanel, setShowPanel] = useState(!0);
+  function handlePositionChange(direction, value) {
+    direction === "positionH" ? setHPosition(value) : setVPosition(value);
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    if (focusDrawings.length === 0)
       return;
-    const L = P.map((x) => ({
-      unitId: x.unitId,
-      subUnitId: x.subUnitId,
-      drawingId: x.drawingId
+    const drawings2 = focusDrawings.map((drawing) => ({
+      unitId: drawing.unitId,
+      subUnitId: drawing.subUnitId,
+      drawingId: drawing.drawingId
     }));
-    e.executeCommand(ze.id, {
-      unitId: P[0].unitId,
-      subUnitId: P[0].unitId,
-      drawings: L.map((x) => ({
-        drawingId: x.drawingId,
-        key: S,
-        value: A
+    commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+      unitId: focusDrawings[0].unitId,
+      subUnitId: focusDrawings[0].unitId,
+      drawings: drawings2.map((drawing) => ({
+        drawingId: drawing.drawingId,
+        key: direction,
+        value
       }))
-    }), a.blur(), h.refreshControls();
+    }), textSelectionRenderService.blur(), transformer.refreshControls();
   }
-  function H(S) {
-    var we, ve, te;
-    const A = D.relativeFrom, P = D.posOffset, L = Number(S);
-    if (A === L)
+  __name(handlePositionChange, "handlePositionChange");
+  function handleHorizontalRelativeFromChange(value) {
+    var _a8, _b, _c;
+    const prevRelativeFrom = hPosition.relativeFrom, prevPosOffset = hPosition.posOffset, relativeFrom = Number(value);
+    if (prevRelativeFrom === relativeFrom)
       return;
-    const x = t.getFocusDrawings();
-    if (x.length === 0)
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    if (focusDrawings.length === 0)
       return;
-    const M = x[0].drawingId, W = x[0].unitId;
-    let G = null, F = 0;
-    const ce = (we = r.getRenderById(W)) == null ? void 0 : we.with(ae).getSkeleton(), fe = ce == null ? void 0 : ce.getSkeletonData();
-    if (fe == null)
+    const drawingId = focusDrawings[0].drawingId, unitId2 = focusDrawings[0].unitId;
+    let drawing = null, pageMarginLeft = 0;
+    const skeleton = (_a8 = renderManagerService.getRenderById(unitId2)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getSkeleton(), skeletonData = skeleton == null ? void 0 : skeleton.getSkeletonData();
+    if (skeletonData == null)
       return;
-    const { pages: Oe, skeHeaders: Be, skeFooters: Ce } = fe;
-    for (const Ne of Oe) {
-      const { marginLeft: Ie, skeDrawings: Se, headerId: Te, footerId: Me, pageWidth: De } = Ne;
-      if (Se.has(M)) {
-        G = Se.get(M), F = Ie;
+    const { pages, skeHeaders, skeFooters } = skeletonData;
+    for (const page of pages) {
+      const { marginLeft, skeDrawings, headerId, footerId, pageWidth } = page;
+      if (skeDrawings.has(drawingId)) {
+        drawing = skeDrawings.get(drawingId), pageMarginLeft = marginLeft;
         break;
       }
-      const J = (ve = Be.get(Te)) == null ? void 0 : ve.get(De);
-      if (J != null && J.skeDrawings.has(M)) {
-        G = J == null ? void 0 : J.skeDrawings.get(M), F = Ie;
+      const headerPage = (_b = skeHeaders.get(headerId)) == null ? void 0 : _b.get(pageWidth);
+      if (headerPage != null && headerPage.skeDrawings.has(drawingId)) {
+        drawing = headerPage == null ? void 0 : headerPage.skeDrawings.get(drawingId), pageMarginLeft = marginLeft;
         break;
       }
-      const q = (te = Ce.get(Me)) == null ? void 0 : te.get(De);
-      if (q != null && q.skeDrawings.has(M)) {
-        G = q == null ? void 0 : q.skeDrawings.get(M), F = Ie;
+      const footerPage = (_c = skeFooters.get(footerId)) == null ? void 0 : _c.get(pageWidth);
+      if (footerPage != null && footerPage.skeDrawings.has(drawingId)) {
+        drawing = footerPage == null ? void 0 : footerPage.skeDrawings.get(drawingId), pageMarginLeft = marginLeft;
         break;
       }
     }
-    if (G == null)
+    if (drawing == null)
       return;
-    let K = 0;
-    A === ee.COLUMN ? K -= G.columnLeft : A === ee.MARGIN && (K -= F), L === ee.COLUMN ? K += G.columnLeft : L === ee.MARGIN ? K += F : ee.PAGE;
-    const le = {
-      relativeFrom: L,
-      posOffset: (P != null ? P : 0) - K
+    let delta = 0;
+    prevRelativeFrom === ObjectRelativeFromH.COLUMN ? delta -= drawing.columnLeft : prevRelativeFrom === ObjectRelativeFromH.MARGIN && (delta -= pageMarginLeft), relativeFrom === ObjectRelativeFromH.COLUMN ? delta += drawing.columnLeft : relativeFrom === ObjectRelativeFromH.MARGIN ? delta += pageMarginLeft : ObjectRelativeFromH.PAGE;
+    const newPositionH = {
+      relativeFrom,
+      posOffset: (prevPosOffset != null ? prevPosOffset : 0) - delta
     };
-    E("positionH", le);
+    handlePositionChange("positionH", newPositionH);
   }
-  function z(S) {
-    var Ie, Se, Te, Me, De;
-    const A = C.relativeFrom, P = C.posOffset, L = Number(S);
-    if (A === L)
+  __name(handleHorizontalRelativeFromChange, "handleHorizontalRelativeFromChange");
+  function handleVerticalRelativeFromChange(value) {
+    var _a8, _b, _c, _d, _e;
+    const prevRelativeFrom = vPosition.relativeFrom, prevPosOffset = vPosition.posOffset, relativeFrom = Number(value);
+    if (prevRelativeFrom === relativeFrom)
       return;
-    const x = t.getFocusDrawings();
-    if (x.length === 0)
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    if (focusDrawings.length === 0)
       return;
-    const { drawingId: M, unitId: W } = x[0], G = o.getUniverDocInstance(W), F = (Ie = r.getRenderById(W)) == null ? void 0 : Ie.with(ae).getSkeleton(), ce = a.getSegment(), fe = a.getSegmentPage(), Oe = (Te = (Se = G == null ? void 0 : G.getSelfOrHeaderFooterModel(ce).getBody()) == null ? void 0 : Se.customBlocks) == null ? void 0 : Te.find((J) => J.blockId === M);
-    if (Oe == null || F == null)
+    const { drawingId, unitId: unitId2 } = focusDrawings[0], documentDataModel2 = univerInstanceService.getUniverDocInstance(unitId2), skeleton = (_a8 = renderManagerService.getRenderById(unitId2)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getSkeleton(), segmentId = textSelectionRenderService.getSegment(), segmentPage = textSelectionRenderService.getSegmentPage(), drawing = (_c = (_b = documentDataModel2 == null ? void 0 : documentDataModel2.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _b.customBlocks) == null ? void 0 : _c.find((c) => c.blockId === drawingId);
+    if (drawing == null || skeleton == null)
       return;
-    const { startIndex: Be } = Oe, Ce = F.findNodeByCharIndex(Be, ce, fe), K = (Me = Ce == null ? void 0 : Ce.parent) == null ? void 0 : Me.parent, le = K == null ? void 0 : K.parent, we = le == null ? void 0 : le.lines.find((J) => J.paragraphIndex === (K == null ? void 0 : K.paragraphIndex) && J.paragraphStart), ve = (De = le == null ? void 0 : le.parent) == null ? void 0 : De.parent;
-    if (Ce == null || K == null || we == null || le == null || ve == null)
+    const { startIndex } = drawing, glyph = skeleton.findNodeByCharIndex(startIndex, segmentId, segmentPage), line = (_d = glyph == null ? void 0 : glyph.parent) == null ? void 0 : _d.parent, column = line == null ? void 0 : line.parent, paragraphStartLine = column == null ? void 0 : column.lines.find((l) => l.paragraphIndex === (line == null ? void 0 : line.paragraphIndex) && l.paragraphStart), page = (_e = column == null ? void 0 : column.parent) == null ? void 0 : _e.parent;
+    if (glyph == null || line == null || paragraphStartLine == null || column == null || page == null)
       return;
-    let te = 0;
-    A === V.PARAGRAPH ? te -= we.top : A === V.LINE ? te -= K.top : A === V.PAGE && (te += ve.marginTop), L === V.PARAGRAPH ? te += we.top : L === V.LINE ? te += K.top : L === V.PAGE && (te -= ve.marginTop);
-    const Ne = {
-      relativeFrom: L,
-      posOffset: (P != null ? P : 0) - te
+    let delta = 0;
+    prevRelativeFrom === ObjectRelativeFromV.PARAGRAPH ? delta -= paragraphStartLine.top : prevRelativeFrom === ObjectRelativeFromV.LINE ? delta -= line.top : prevRelativeFrom === ObjectRelativeFromV.PAGE && (delta += page.marginTop), relativeFrom === ObjectRelativeFromV.PARAGRAPH ? delta += paragraphStartLine.top : relativeFrom === ObjectRelativeFromV.LINE ? delta += line.top : relativeFrom === ObjectRelativeFromV.PAGE && (delta -= page.marginTop);
+    const newPositionV = {
+      relativeFrom,
+      posOffset: (prevPosOffset != null ? prevPosOffset : 0) - delta
     };
-    E("positionV", Ne);
+    handlePositionChange("positionV", newPositionV);
   }
-  function U(S) {
-    var W;
-    const A = m == null ? void 0 : m.getSnapshot(), P = (W = A == null ? void 0 : A.drawings) == null ? void 0 : W[S.drawingId];
-    if (P == null)
+  __name(handleVerticalRelativeFromChange, "handleVerticalRelativeFromChange");
+  function updateState(drawingParam2) {
+    var _a8;
+    const snapshot = documentDataModel == null ? void 0 : documentDataModel.getSnapshot(), drawing = (_a8 = snapshot == null ? void 0 : snapshot.drawings) == null ? void 0 : _a8[drawingParam2.drawingId];
+    if (drawing == null)
       return;
-    const { layoutType: L } = P, {
-      positionH: x,
-      positionV: M
-    } = P.docTransform;
-    _(x), O(M), I(L === k.INLINE), T(M.relativeFrom === V.PARAGRAPH || M.relativeFrom === V.LINE);
-  }
-  function B() {
-    const S = t.getFocusDrawings();
-    S.length !== 0 && U(S[0]);
-  }
-  function b(S) {
-    T(S), z(String(S ? V.PARAGRAPH : V.PAGE));
-  }
-  return wn(() => {
-    B();
-    const S = t.focus$.subscribe((P) => {
-      if (P.length === 0) {
-        R(!1);
+    const { layoutType } = drawing, {
+      positionH,
+      positionV
+    } = drawing.docTransform;
+    setHPosition(positionH), setVPosition(positionV), setDisabled(layoutType === PositionedObjectLayoutType.INLINE), setFollowTextMove(positionV.relativeFrom === ObjectRelativeFromV.PARAGRAPH || positionV.relativeFrom === ObjectRelativeFromV.LINE);
+  }
+  __name(updateState, "updateState");
+  function updateFocusDrawingState() {
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    focusDrawings.length !== 0 && updateState(focusDrawings[0]);
+  }
+  __name(updateFocusDrawingState, "updateFocusDrawingState");
+  function handleFollowTextMoveCheck(val) {
+    setFollowTextMove(val), handleVerticalRelativeFromChange(String(val ? ObjectRelativeFromV.PARAGRAPH : ObjectRelativeFromV.PAGE));
+  }
+  return __name(handleFollowTextMoveCheck, "handleFollowTextMoveCheck"), useEffect(() => {
+    updateFocusDrawingState();
+    const subscription = drawingManagerService.focus$.subscribe((drawingParams) => {
+      if (drawingParams.length === 0) {
+        setShowPanel(!1);
         return;
       }
-      R(!0), U(P[0]);
-    }), A = e.onCommandExecuted(async (P) => {
-      P.id === Q.id && B();
+      setShowPanel(!0), updateState(drawingParams[0]);
+    }), mutationListener = commandService.onCommandExecuted(async (command) => {
+      command.id === RichTextEditingMutation.id && updateFocusDrawingState();
     });
     return () => {
-      S.unsubscribe(), A.dispose();
+      subscription.unsubscribe(), mutationListener.dispose();
     };
-  }, []), /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelGrid, g.imageCommonPanelBorder), style: { display: N ? "block" : "none" } }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelTitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-position.title")))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-position.horizontal")))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, n.t("image-position.absolutePosition"))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
-    Ae,
+  }, []), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder), style: { display: showPanel ? "block" : "none" } }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-position.title")))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-position.horizontal")))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-position.absolutePosition"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    InputNumber,
     {
-      min: Ln,
-      max: Un,
+      min: MIN_OFFSET,
+      max: MAX_OFFSET,
       precision: 1,
-      disabled: v,
-      value: D.posOffset,
-      onChange: (S) => {
-        E("positionH", {
-          relativeFrom: D.relativeFrom,
-          posOffset: S
+      disabled,
+      value: hPosition.posOffset,
+      onChange: /* @__PURE__ */ __name((val) => {
+        handlePositionChange("positionH", {
+          relativeFrom: hPosition.relativeFrom,
+          posOffset: val
         });
-      },
-      className: g.imageCommonPanelInput
+      }, "onChange"),
+      className: styles.imageCommonPanelInput
     }
-  ))))), /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, n.t("image-position.toTheRightOf"))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
-    Nn,
+  ))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-position.toTheRightOf"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    Select,
     {
-      value: String(D.relativeFrom),
-      disabled: v,
-      options: p,
-      onChange: H
+      value: String(hPosition.relativeFrom),
+      disabled,
+      options: HORIZONTAL_RELATIVE_FROM,
+      onChange: handleHorizontalRelativeFromChange
     }
-  )))))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-position.vertical")))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, n.t("image-position.absolutePosition"))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
-    Ae,
+  )))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-position.vertical")))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-position.absolutePosition"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    InputNumber,
     {
-      min: Ln,
-      max: Un,
+      min: MIN_OFFSET,
+      max: MAX_OFFSET,
       precision: 1,
-      disabled: v,
-      value: C.posOffset,
-      onChange: (S) => {
-        E("positionV", {
-          relativeFrom: C.relativeFrom,
-          posOffset: S
+      disabled,
+      value: vPosition.posOffset,
+      onChange: /* @__PURE__ */ __name((val) => {
+        handlePositionChange("positionV", {
+          relativeFrom: vPosition.relativeFrom,
+          posOffset: val
         });
-      },
-      className: g.imageCommonPanelInput
+      }, "onChange"),
+      className: styles.imageCommonPanelInput
     }
-  ))))), /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, n.t("image-position.bellow"))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
-    Nn,
+  ))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-position.bellow"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    Select,
     {
-      disabled: v,
-      value: String(C.relativeFrom),
-      options: w,
-      onChange: z
+      disabled,
+      value: String(vPosition.relativeFrom),
+      options: VERTICAL_RELATIVE_FROM,
+      onChange: handleVerticalRelativeFromChange
     }
-  )))))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: j(g.imageCommonPanelColumn, g.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-position.options")))), /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelRow, style: { marginBottom: "50px" } }, /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(si, { disabled: v, checked: y, onChange: b }, n.t("image-position.moveObjectWithText")))));
-}, Hi = () => {
-  const i = re(he), e = i.getFocusDrawings(), [n, t] = ie(e);
-  return wn(() => {
-    const r = i.focus$.subscribe((o) => {
-      t(o);
+  )))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-position.options")))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow, style: { marginBottom: "50px" } }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(Checkbox, { disabled, checked: followTextMove, onChange: handleFollowTextMoveCheck }, localeService.t("image-position.moveObjectWithText")))));
+}, "DocDrawingPosition"), DocDrawingPanel = /* @__PURE__ */ __name(() => {
+  const drawingManagerService = useDependency(IDrawingManagerService), focusDrawings = drawingManagerService.getFocusDrawings(), [drawings, setDrawings] = useState(focusDrawings);
+  return useEffect(() => {
+    const focusDispose = drawingManagerService.focus$.subscribe((drawings2) => {
+      setDrawings(drawings2);
     });
     return () => {
-      r.unsubscribe();
+      focusDispose.unsubscribe();
     };
-  }, []), !!(n != null && n.length) && /* @__PURE__ */ d.createElement("div", { className: g.imageCommonPanel }, /* @__PURE__ */ d.createElement(Nt, { drawings: n, hasAlign: !1, hasCropper: !1, hasGroup: !1, hasTransform: !1 }), /* @__PURE__ */ d.createElement(Fi, { drawings: n }), /* @__PURE__ */ d.createElement(ki, { drawings: n }));
-}, Wi = {
+  }, []), !!(drawings != null && drawings.length) && /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanel }, /* @__PURE__ */ React.createElement(DrawingCommonPanel, { drawings, hasAlign: !1, hasCropper: !1, hasGroup: !1, hasTransform: !1 }), /* @__PURE__ */ React.createElement(DocDrawingTextWrap, { drawings }), /* @__PURE__ */ React.createElement(DocDrawingPosition, { drawings }));
+}, "DocDrawingPanel"), ClearDocDrawingTransformerOperation = {
   id: "doc.operation.clear-drawing-transformer",
-  type: Y.MUTATION,
-  handler: (i, e) => {
-    const n = i.get(se);
-    return e.forEach((t) => {
-      var r, o;
-      (o = (r = n.getRenderById(t)) == null ? void 0 : r.scene.getTransformer()) == null || o.debounceRefreshControls();
+  type: CommandType.MUTATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const renderManagerService = accessor.get(IRenderManagerService);
+    return params.forEach((unitId) => {
+      var _a8, _b;
+      (_b = (_a8 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a8.scene.getTransformer()) == null || _b.debounceRefreshControls();
     }), !0;
-  }
-}, Xe = {
+  }, "handler")
+}, MoveDocDrawingsCommand = {
   id: "doc.command.move-drawing",
-  type: Y.COMMAND,
-  handler: (i, e) => {
-    const n = i.get($), t = i.get(Re), r = i.get(ne), o = i.get(se), { direction: a } = e, s = t.getFocusDrawings();
-    if (s.length === 0)
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const commandService = accessor.get(ICommandService), docDrawingService = accessor.get(IDocDrawingService), univerInstanceService = accessor.get(IUniverInstanceService), renderManagerService = accessor.get(IRenderManagerService), { direction } = params, drawings = docDrawingService.getFocusDrawings();
+    if (drawings.length === 0)
       return !1;
-    const l = s[0].unitId, c = o.getRenderById(l), m = c == null ? void 0 : c.scene;
-    if (m == null)
+    const unitId = drawings[0].unitId, renderObject = renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
+    if (scene == null)
       return !1;
-    const u = m.getTransformerByCreate(), f = r.getUniverDocInstance(l), h = s.map((w) => {
-      var y, T, N, R, E;
-      const { drawingId: v } = w, I = (y = f == null ? void 0 : f.getSnapshot().drawings) == null ? void 0 : y[v];
-      if (I == null || I.layoutType === k.INLINE)
+    const transformer = scene.getTransformerByCreate(), documentDataModel = univerInstanceService.getUniverDocInstance(unitId), newDrawings = drawings.map((drawing) => {
+      var _a8, _b, _c, _d, _e;
+      const { drawingId } = drawing, drawingData = (_a8 = documentDataModel == null ? void 0 : documentDataModel.getSnapshot().drawings) == null ? void 0 : _a8[drawingId];
+      if (drawingData == null || drawingData.layoutType === PositionedObjectLayoutType.INLINE)
         return null;
-      const { positionH: D, positionV: _ } = I.docTransform, C = { ...D }, O = { ..._ };
-      return a === ge.UP ? O.posOffset = ((T = O.posOffset) != null ? T : 0) - 2 : a === ge.DOWN ? O.posOffset = ((N = O.posOffset) != null ? N : 0) + 2 : a === ge.LEFT ? C.posOffset = ((R = C.posOffset) != null ? R : 0) - 2 : a === ge.RIGHT && (C.posOffset = ((E = C.posOffset) != null ? E : 0) + 2), {
-        drawingId: v,
-        key: a === ge.UP || a === ge.DOWN ? "positionV" : "positionH",
-        value: a === ge.UP || a === ge.DOWN ? O : C
+      const { positionH, positionV } = drawingData.docTransform, newPositionH = { ...positionH }, newPositionV = { ...positionV };
+      return direction === Direction.UP ? newPositionV.posOffset = ((_b = newPositionV.posOffset) != null ? _b : 0) - 2 : direction === Direction.DOWN ? newPositionV.posOffset = ((_c = newPositionV.posOffset) != null ? _c : 0) + 2 : direction === Direction.LEFT ? newPositionH.posOffset = ((_d = newPositionH.posOffset) != null ? _d : 0) - 2 : direction === Direction.RIGHT && (newPositionH.posOffset = ((_e = newPositionH.posOffset) != null ? _e : 0) + 2), {
+        drawingId,
+        key: direction === Direction.UP || direction === Direction.DOWN ? "positionV" : "positionH",
+        value: direction === Direction.UP || direction === Direction.DOWN ? newPositionV : newPositionH
       };
-    }).filter((w) => w != null);
-    if (h.length === 0)
+    }).filter((drawing) => drawing != null);
+    if (newDrawings.length === 0)
       return !1;
-    const p = n.syncExecuteCommand(ze.id, {
-      unitId: l,
-      subUnitId: l,
-      drawings: h
+    const result = commandService.syncExecuteCommand(UpdateDrawingDocTransformCommand.id, {
+      unitId,
+      subUnitId: unitId,
+      drawings: newDrawings
     });
-    return u.refreshControls(), !!p;
-  }
-}, ct = {
+    return transformer.refreshControls(), !!result;
+  }, "handler")
+}, DeleteDocDrawingsCommand = {
   id: "doc.command.delete-drawing",
-  type: Y.COMMAND,
-  handler: (i) => {
-    const e = i.get($), t = i.get(Re).getFocusDrawings();
-    if (t.length === 0)
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor) => {
+    const commandService = accessor.get(ICommandService), drawings = accessor.get(IDocDrawingService).getFocusDrawings();
+    if (drawings.length === 0)
       return !1;
-    const { unitId: r } = t[0], o = t.map((a) => {
-      const { unitId: s, subUnitId: l, drawingId: c, drawingType: m } = a;
+    const { unitId } = drawings[0], newDrawings = drawings.map((drawing) => {
+      const { unitId: unitId2, subUnitId, drawingId, drawingType } = drawing;
       return {
-        unitId: s,
-        subUnitId: l,
-        drawingId: c,
-        drawingType: m
+        unitId: unitId2,
+        subUnitId,
+        drawingId,
+        drawingType
       };
     });
-    return e.executeCommand(vn.id, {
-      unitId: r,
-      drawings: o
+    return commandService.executeCommand(RemoveDocDrawingCommand.id, {
+      unitId,
+      drawings: newDrawings
     });
-  }
-}, lt = {
+  }, "handler")
+}, SetDocDrawingArrangeCommand = {
   id: "doc.command.set-drawing-arrange",
-  type: Y.COMMAND,
-  handler: (i, e) => {
-    const n = i.get($), t = i.get(Re);
-    if (e == null)
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const commandService = accessor.get(ICommandService), docDrawingService = accessor.get(IDocDrawingService);
+    if (params == null)
       return !1;
-    const { unitId: r, subUnitId: o, drawingIds: a, arrangeType: s } = e, l = { unitId: r, subUnitId: o, drawingIds: a };
-    let c;
-    if (s === Ye.forward ? c = t.getForwardDrawingsOp(l) : s === Ye.backward ? c = t.getBackwardDrawingOp(l) : s === Ye.front ? c = t.getFrontDrawingsOp(l) : s === Ye.back && (c = t.getBackDrawingsOp(l)), c == null)
+    const { unitId, subUnitId, drawingIds, arrangeType } = params, drawingOrderMapParam = { unitId, subUnitId, drawingIds };
+    let jsonOp;
+    if (arrangeType === ArrangeTypeEnum.forward ? jsonOp = docDrawingService.getForwardDrawingsOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.backward ? jsonOp = docDrawingService.getBackwardDrawingOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.front ? jsonOp = docDrawingService.getFrontDrawingsOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.back && (jsonOp = docDrawingService.getBackDrawingsOp(drawingOrderMapParam)), jsonOp == null)
       return !1;
-    const { redo: m } = c;
-    if (m == null)
+    const { redo } = jsonOp;
+    if (redo == null)
       return !1;
-    const u = [];
-    let f = Pe.deepClone(m);
-    f = f.slice(3), f.unshift("drawingsOrder"), u.push(f);
-    const h = {
-      id: Q.id,
+    const rawActions = [];
+    let redoCopy = Tools.deepClone(redo);
+    redoCopy = redoCopy.slice(3), redoCopy.unshift("drawingsOrder"), rawActions.push(redoCopy);
+    const doMutation = {
+      id: RichTextEditingMutation.id,
       params: {
-        unitId: r,
+        unitId,
         actions: [],
         textRanges: null
       }
     };
-    return h.params.actions = u.reduce((w, v) => X.compose(w, v), null), !!n.syncExecuteCommand(h.id, h.params);
-  }
-}, dt = {
+    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
+}, UngroupDocDrawingCommand = {
   id: "doc.command.ungroup-doc-image",
-  type: Y.COMMAND,
-  handler: (i, e) => {
-    i.get($), i.get(kn);
-    const n = i.get(Re);
-    if (!e) return !1;
-    const t = [];
-    return e.forEach(({ parent: r, children: o }) => {
-      t.push(r.unitId), o.forEach((a) => {
-        t.push(a.unitId);
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    accessor.get(ICommandService), accessor.get(IUndoRedoService);
+    const docDrawingService = accessor.get(IDocDrawingService);
+    if (!params) return !1;
+    const unitIds = [];
+    return params.forEach(({ parent, children }) => {
+      unitIds.push(parent.unitId), children.forEach((child) => {
+        unitIds.push(child.unitId);
       });
-    }), n.getUngroupDrawingOp(e), !1;
-  }
-}, mt = {
+    }), docDrawingService.getUngroupDrawingOp(params), !1;
+  }, "handler")
+}, GroupDocDrawingCommand = {
   id: "doc.command.group-doc-image",
-  type: Y.COMMAND,
-  handler: (i, e) => {
-    i.get($), i.get(kn);
-    const n = i.get(Re);
-    if (!e) return !1;
-    const t = [];
-    return e.forEach(({ parent: r, children: o }) => {
-      t.push(r.unitId), o.forEach((a) => {
-        t.push(a.unitId);
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    accessor.get(ICommandService), accessor.get(IUndoRedoService);
+    const docDrawingService = accessor.get(IDocDrawingService);
+    if (!params) return !1;
+    const unitIds = [];
+    return params.forEach(({ parent, children }) => {
+      unitIds.push(parent.unitId), children.forEach((child) => {
+        unitIds.push(child.unitId);
       });
-    }), n.getGroupDrawingOp(e), !1;
-  }
-}, gt = {
+    }), docDrawingService.getGroupDrawingOp(params), !1;
+  }, "handler")
+}, InsertDocDrawingCommand = {
   id: "doc.command.insert-doc-image",
-  type: Y.COMMAND,
+  type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
-  handler: (i, e) => {
-    var O, y;
-    if (e == null)
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    var _a8, _b;
+    if (params == null)
       return !1;
-    const n = i.get($), t = i.get(un), r = i.get(ne), o = t.getActiveRange(), a = r.getCurrentUniverDocInstance();
-    if (o == null || a == null)
+    const commandService = accessor.get(ICommandService), textSelectionManagerService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), activeTextRange = textSelectionManagerService.getActiveRange(), documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
+    if (activeTextRange == null || documentDataModel == null)
       return !1;
-    const s = a.getUnitId(), { drawings: l } = e, { collapsed: c, startOffset: m, segmentId: u } = o, f = a.getSelfOrHeaderFooterModel(u).getBody();
-    if (f == null)
+    const unitId = documentDataModel.getUnitId(), { drawings } = params, { collapsed, startOffset, segmentId } = activeTextRange, body = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
+    if (body == null)
       return !1;
-    const h = new hn(), p = X.getInstance(), w = [], v = (y = (O = a.getSnapshot().drawingsOrder) == null ? void 0 : O.length) != null ? y : 0;
-    if (c)
-      m > 0 && h.push({
-        t: Z.RETAIN,
-        len: m,
-        segmentId: u
+    const textX = new TextX(), jsonX = JSONX.getInstance(), rawActions = [], drawingOrderLength = (_b = (_a8 = documentDataModel.getSnapshot().drawingsOrder) == null ? void 0 : _a8.length) != null ? _b : 0;
+    if (collapsed)
+      startOffset > 0 && textX.push({
+        t: TextXActionType.RETAIN,
+        len: startOffset,
+        segmentId
       });
     else {
-      const { dos: T } = Yt(o, u, 0, f);
-      h.push(...T);
+      const { dos } = getRetainAndDeleteFromReplace(activeTextRange, segmentId, 0, body);
+      textX.push(...dos);
     }
-    h.push({
-      t: Z.INSERT,
+    textX.push({
+      t: TextXActionType.INSERT,
       body: {
-        dataStream: "\b".repeat(l.length),
-        customBlocks: l.map((T, N) => ({
-          startIndex: N,
-          blockId: T.drawingId
+        dataStream: "\b".repeat(drawings.length),
+        customBlocks: drawings.map((drawing, i) => ({
+          startIndex: i,
+          blockId: drawing.drawingId
         }))
       },
-      len: l.length,
+      len: drawings.length,
       line: 0,
-      segmentId: u
+      segmentId
     });
-    const I = $e(a, u), D = p.editOp(h.serialize(), I);
-    w.push(D);
-    for (const T of l) {
-      const { drawingId: N } = T, R = p.insertOp(["drawings", N], T), E = p.insertOp(["drawingsOrder", v], N);
-      w.push(R), w.push(E);
+    const path = getRichTextEditPath(documentDataModel, segmentId), placeHolderAction = jsonX.editOp(textX.serialize(), path);
+    rawActions.push(placeHolderAction);
+    for (const drawing of drawings) {
+      const { drawingId } = drawing, addDrawingAction = jsonX.insertOp(["drawings", drawingId], drawing), addDrawingOrderAction = jsonX.insertOp(["drawingsOrder", drawingOrderLength], drawingId);
+      rawActions.push(addDrawingAction), rawActions.push(addDrawingOrderAction);
     }
-    const _ = {
-      id: Q.id,
+    const doMutation = {
+      id: RichTextEditingMutation.id,
       params: {
-        unitId: s,
+        unitId,
         actions: [],
         textRanges: []
       }
     };
-    return _.params.actions = w.reduce((T, N) => X.compose(T, N), null), !!n.syncExecuteCommand(_.id, _.params);
-  }
+    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
 };
-function Ke(i) {
-  return i.getContextValue(St) && i.getContextValue(rn);
+function whenDocDrawingFocused(contextService) {
+  return contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && contextService.getContextValue(FOCUSING_COMMON_DRAWINGS);
 }
-const Gi = {
-  id: Xe.id,
+__name(whenDocDrawingFocused, "whenDocDrawingFocused");
+const MoveDrawingDownShortcutItem = {
+  id: MoveDocDrawingsCommand.id,
   description: "shortcut.doc.drawing-move-down",
   group: "4_doc-drawing-view",
-  binding: Le.ARROW_DOWN,
+  binding: KeyCode.ARROW_DOWN,
   priority: 100,
-  preconditions: Ke,
+  preconditions: whenDocDrawingFocused,
   staticParameters: {
-    direction: ge.DOWN
+    direction: Direction.DOWN
   }
-}, Vi = {
-  id: Xe.id,
+}, MoveDrawingUpShortcutItem = {
+  id: MoveDocDrawingsCommand.id,
   description: "shortcut.doc.drawing-move-up",
   group: "4_doc-drawing-view",
-  binding: Le.ARROW_UP,
+  binding: KeyCode.ARROW_UP,
   priority: 100,
-  preconditions: Ke,
+  preconditions: whenDocDrawingFocused,
   staticParameters: {
-    direction: ge.UP
+    direction: Direction.UP
   }
-}, ji = {
-  id: Xe.id,
+}, MoveDrawingLeftShortcutItem = {
+  id: MoveDocDrawingsCommand.id,
   description: "shortcut.doc.drawing-move-left",
   group: "4_doc-drawing-view",
-  binding: Le.ARROW_LEFT,
+  binding: KeyCode.ARROW_LEFT,
   priority: 100,
-  preconditions: Ke,
+  preconditions: whenDocDrawingFocused,
   staticParameters: {
-    direction: ge.LEFT
+    direction: Direction.LEFT
   }
-}, $i = {
-  id: Xe.id,
+}, MoveDrawingRightShortcutItem = {
+  id: MoveDocDrawingsCommand.id,
   description: "shortcut.doc.drawing-move-right",
   group: "4_doc-drawing-view",
-  binding: Le.ARROW_RIGHT,
+  binding: KeyCode.ARROW_RIGHT,
   priority: 100,
-  preconditions: Ke,
+  preconditions: whenDocDrawingFocused,
   staticParameters: {
-    direction: ge.RIGHT
+    direction: Direction.RIGHT
   }
-}, zi = {
-  id: ct.id,
+}, DeleteDrawingsShortcutItem = {
+  id: DeleteDocDrawingsCommand.id,
   description: "shortcut.doc.drawing-delete",
   group: "4_doc-drawing-view",
   // when focusing on any other input tag do not trigger this shortcut
-  preconditions: Ke,
-  binding: Le.DELETE,
-  mac: Le.BACKSPACE
+  preconditions: whenDocDrawingFocused,
+  binding: KeyCode.DELETE,
+  mac: KeyCode.BACKSPACE
 };
-var qi = Object.defineProperty, Xi = Object.getOwnPropertyDescriptor, Ki = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? Xi(e, n) : e, o = i.length - 1, a; o >= 0; o--)
-    (a = i[o]) && (r = (t ? a(e, n, r) : a(r)) || r);
-  return t && r && qi(e, n, r), r;
-}, He = (i, e) => (n, t) => e(n, t, i);
-let en = class extends qe {
-  constructor(i, e, n, t, r) {
-    super(), this._injector = i, this._componentManager = e, this._menuService = n, this._commandService = t, this._shortcutService = r, this._init();
+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"), _a2;
+let DocDrawingUIController = (_a2 = class extends Disposable {
+  constructor(_injector, _componentManager, _menuService, _commandService, _shortcutService) {
+    super(), this._injector = _injector, this._componentManager = _componentManager, this._menuService = _menuService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._init();
   }
   _initCustomComponents() {
-    const i = this._componentManager;
-    this.disposeWithMe(i.register(et, Qn)), this.disposeWithMe(i.register(Jn, vi)), this.disposeWithMe(i.register(qn, Hi));
+    const componentManager = this._componentManager;
+    this.disposeWithMe(componentManager.register(ImageUploadIcon, AddImageSingle)), this.disposeWithMe(componentManager.register(COMPONENT_DOC_UPLOAD_FILE_MENU, UploadFileMenu)), this.disposeWithMe(componentManager.register(COMPONENT_DOC_DRAWING_PANEL, DocDrawingPanel));
   }
   _initMenus() {
     [
-      _i,
-      Ci
-    ].forEach((i) => {
-      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(i), {}));
+      ImageMenuFactory,
+      UploadFloatImageMenuFactory
+    ].forEach((factory) => {
+      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(factory), {}));
     });
   }
   _initCommands() {
     [
-      In,
-      gt,
-      it,
-      rt,
-      ot,
-      ze,
-      at,
-      st,
-      vn,
-      Xn,
-      Wi,
-      Kn,
-      mt,
-      dt,
-      Xe,
-      ct,
-      lt
-    ].forEach((i) => this.disposeWithMe(this._commandService.registerCommand(i)));
+      InsertDocImageOperation,
+      InsertDocDrawingCommand,
+      UpdateDocDrawingWrappingStyleCommand,
+      UpdateDocDrawingDistanceCommand,
+      UpdateDocDrawingWrapTextCommand,
+      UpdateDrawingDocTransformCommand,
+      IMoveInlineDrawingCommand,
+      ITransformNonInlineDrawingCommand,
+      RemoveDocDrawingCommand,
+      SidebarDocDrawingOperation,
+      ClearDocDrawingTransformerOperation,
+      EditDocDrawingOperation,
+      GroupDocDrawingCommand,
+      UngroupDocDrawingCommand,
+      MoveDocDrawingsCommand,
+      DeleteDocDrawingsCommand,
+      SetDocDrawingArrangeCommand
+    ].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
   }
   _initShortcuts() {
     [
       // sheet drawing shortcuts
-      Gi,
-      Vi,
-      ji,
-      $i,
-      zi
-    ].forEach((i) => {
-      this.disposeWithMe(this._shortcutService.registerShortcut(i));
+      MoveDrawingDownShortcutItem,
+      MoveDrawingUpShortcutItem,
+      MoveDrawingLeftShortcutItem,
+      MoveDrawingRightShortcutItem,
+      DeleteDrawingsShortcutItem
+    ].forEach((item) => {
+      this.disposeWithMe(this._shortcutService.registerShortcut(item));
     });
   }
   _init() {
     this._initCommands(), this._initCustomComponents(), this._initMenus(), this._initShortcuts();
   }
-};
-en = Ki([
-  sn(cn.Ready, en),
-  He(0, pe(Hn)),
-  He(1, pe(ti)),
-  He(2, ii),
-  He(3, $),
-  He(4, ri)
-], en);
-var Yi = Object.defineProperty, Zi = Object.getOwnPropertyDescriptor, Qi = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? Zi(e, n) : e, o = i.length - 1, a; o >= 0; o--)
-    (a = i[o]) && (r = (t ? a(e, n, r) : a(r)) || r);
-  return t && r && Yi(e, n, r), r;
-}, de = (i, e) => (n, t) => e(n, t, i);
-let fn = class extends qe {
-  constructor(i, e, n, t, r, o, a, s, l, c, m, u, f) {
-    super(), this._context = i, this._commandService = e, this._textSelectionManagerService = n, this._renderManagerSrv = t, this._imageIoService = r, this._docDrawingService = o, this._drawingManagerService = a, this._contextService = s, this._messageService = l, this._localeService = c, this._textSelectionManager = m, this._textSelectionRenderManager = u, this._docRefreshDrawingsService = f, this._initCommandListeners(), this._updateDrawingListener(), this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener(), this._editAreaChangeListener();
+}, __name(_a2, "DocDrawingUIController"), _a2);
+DocDrawingUIController = __decorateClass$5([
+  OnLifecycle(LifecycleStages.Ready, DocDrawingUIController),
+  __decorateParam$5(0, Inject(Injector)),
+  __decorateParam$5(1, Inject(ComponentManager)),
+  __decorateParam$5(2, IMenuService),
+  __decorateParam$5(3, ICommandService),
+  __decorateParam$5(4, IShortcutService)
+], DocDrawingUIController);
+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"), _a3;
+let DocDrawingUpdateRenderController = (_a3 = class extends Disposable {
+  constructor(_context, _commandService, _textSelectionManagerService, _renderManagerSrv, _imageIoService, _docDrawingService, _drawingManagerService, _contextService, _messageService, _localeService, _textSelectionManager, _textSelectionRenderManager, _docRefreshDrawingsService) {
+    super(), this._context = _context, this._commandService = _commandService, this._textSelectionManagerService = _textSelectionManagerService, this._renderManagerSrv = _renderManagerSrv, this._imageIoService = _imageIoService, this._docDrawingService = _docDrawingService, this._drawingManagerService = _drawingManagerService, this._contextService = _contextService, this._messageService = _messageService, this._localeService = _localeService, this._textSelectionManager = _textSelectionManager, this._textSelectionRenderManager = _textSelectionRenderManager, this._docRefreshDrawingsService = _docRefreshDrawingsService, this._initCommandListeners(), this._updateDrawingListener(), this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener(), this._editAreaChangeListener();
   }
   /**
    * Upload image to cell or float image
    */
   _initCommandListeners() {
     this.disposeWithMe(
-      this._commandService.onCommandExecuted(async (i) => {
-        if (i.id === In.id) {
-          const e = i.params;
-          if (e.files == null)
+      this._commandService.onCommandExecuted(async (command) => {
+        if (command.id === InsertDocImageOperation.id) {
+          const params = command.params;
+          if (params.files == null)
             return;
-          const n = e.files.length;
-          if (n > Dn) {
+          const fileLength = params.files.length;
+          if (fileLength > DRAWING_IMAGE_COUNT_LIMIT) {
             this._messageService.show({
-              type: An.Error,
-              content: this._localeService.t("update-status.exceedMaxCount", String(Dn))
+              type: MessageType.Error,
+              content: this._localeService.t("update-status.exceedMaxCount", String(DRAWING_IMAGE_COUNT_LIMIT))
             });
             return;
           }
-          this._imageIoService.setWaitCount(n), await this._insertFloatImages(e.files);
+          this._imageIoService.setWaitCount(fileLength), await this._insertFloatImages(params.files);
         }
       })
     );
   }
   // eslint-disable-next-line max-lines-per-function
-  async _insertFloatImages(i) {
-    let e = [];
+  async _insertFloatImages(files) {
+    let imageParams = [];
     try {
-      e = await Promise.all(i.map((r) => this._imageIoService.saveImage(r)));
-    } catch (r) {
-      const o = r.message;
-      let a = "";
-      switch (o) {
-        case gn.ERROR_EXCEED_SIZE:
-          a = this._localeService.t("update-status.exceedMaxSize", String(Lt / (1024 * 1024)));
+      imageParams = await Promise.all(files.map((file) => this._imageIoService.saveImage(file)));
+    } catch (error) {
+      const type = error.message;
+      let content = "";
+      switch (type) {
+        case ImageUploadStatusType.ERROR_EXCEED_SIZE:
+          content = this._localeService.t("update-status.exceedMaxSize", String(DRAWING_IMAGE_ALLOW_SIZE / (1024 * 1024)));
           break;
-        case gn.ERROR_IMAGE_TYPE:
-          a = this._localeService.t("update-status.invalidImageType");
+        case ImageUploadStatusType.ERROR_IMAGE_TYPE:
+          content = this._localeService.t("update-status.invalidImageType");
           break;
-        case gn.ERROR_IMAGE:
-          a = this._localeService.t("update-status.invalidImage");
+        case ImageUploadStatusType.ERROR_IMAGE:
+          content = this._localeService.t("update-status.invalidImage");
           break;
       }
       this._messageService.show({
-        type: An.Error,
-        content: a
+        type: MessageType.Error,
+        content
       });
     }
-    if (e.length === 0)
+    if (imageParams.length === 0)
       return;
-    const { unitId: n } = this._context, t = [];
-    for (const r of e) {
-      if (r == null)
+    const { unitId } = this._context, docDrawingParams = [];
+    for (const imageParam of imageParams) {
+      if (imageParam == null)
         continue;
-      const { imageId: o, imageSourceType: a, source: s, base64Cache: l } = r, { width: c, height: m, image: u } = await Ut(l || "");
-      this._imageIoService.addImageSourceCache(o, a, u);
-      let f = 1;
-      if (c > En || m > Pn) {
-        const v = En / c, I = Pn / m;
-        f = Math.min(v, I);
+      const { imageId, imageSourceType, source, base64Cache } = imageParam, { width, height, image } = await getImageSize(base64Cache || "");
+      this._imageIoService.addImageSourceCache(imageId, imageSourceType, image);
+      let scale = 1;
+      if (width > DRAWING_IMAGE_WIDTH_LIMIT || height > DRAWING_IMAGE_HEIGHT_LIMIT) {
+        const scaleWidth = DRAWING_IMAGE_WIDTH_LIMIT / width, scaleHeight = DRAWING_IMAGE_HEIGHT_LIMIT / height;
+        scale = Math.min(scaleWidth, scaleHeight);
       }
-      const h = this._getImagePosition(c * f, m * f);
-      if (h == null)
+      const docTransform = this._getImagePosition(width * scale, height * scale);
+      if (docTransform == null)
         return;
-      const p = {
-        unitId: n,
-        subUnitId: n,
-        drawingId: o,
-        drawingType: Bt.DRAWING_IMAGE,
-        imageSourceType: a,
-        source: s,
-        transform: Kt(h),
-        docTransform: h,
-        behindDoc: oe.FALSE,
+      const docDrawingParam = {
+        unitId,
+        subUnitId: unitId,
+        drawingId: imageId,
+        drawingType: DrawingTypeEnum.DRAWING_IMAGE,
+        imageSourceType,
+        source,
+        transform: docDrawingPositionToTransform(docTransform),
+        docTransform,
+        behindDoc: BooleanNumber.FALSE,
         title: "",
         description: "",
-        layoutType: k.INLINE,
+        layoutType: PositionedObjectLayoutType.INLINE,
         // Insert inline drawing by default.
-        wrapText: je.BOTH_SIDES,
+        wrapText: WrapTextType.BOTH_SIDES,
         distB: 0,
         distL: 0,
         distR: 0,
         distT: 0
       };
-      this._isInsertInHeaderFooter() && (p.isMultiTransform = oe.TRUE, p.transforms = p.transform ? [p.transform] : null), t.push(p);
+      this._isInsertInHeaderFooter() && (docDrawingParam.isMultiTransform = BooleanNumber.TRUE, docDrawingParam.transforms = docDrawingParam.transform ? [docDrawingParam.transform] : null), docDrawingParams.push(docDrawingParam);
     }
-    this._commandService.executeCommand(gt.id, {
-      unitId: n,
-      drawings: t
+    this._commandService.executeCommand(InsertDocDrawingCommand.id, {
+      unitId,
+      drawings: docDrawingParams
     });
   }
   _isInsertInHeaderFooter() {
-    var t;
-    const { unitId: i } = this._context, e = (t = this._renderManagerSrv.getRenderById(i)) == null ? void 0 : t.with(ae).getViewModel(), n = e == null ? void 0 : e.getEditArea();
-    return n === xe.HEADER || n === xe.FOOTER;
+    var _a8;
+    const { unitId } = this._context, viewModel = (_a8 = this._renderManagerSrv.getRenderById(unitId)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getViewModel(), editArea = viewModel == null ? void 0 : viewModel.getEditArea();
+    return editArea === DocumentEditArea.HEADER || editArea === DocumentEditArea.FOOTER;
   }
-  _getImagePosition(i, e) {
-    const n = this._textSelectionManagerService.getActiveTextRange(), t = (n == null ? void 0 : n.getAbsolutePosition()) || {
+  _getImagePosition(imageWidth, imageHeight) {
+    const activeTextRange = this._textSelectionManagerService.getActiveTextRange(), position = (activeTextRange == null ? void 0 : activeTextRange.getAbsolutePosition()) || {
       left: 0,
       top: 0
     };
     return {
       size: {
-        width: i,
-        height: e
+        width: imageWidth,
+        height: imageHeight
       },
       positionH: {
-        relativeFrom: ee.PAGE,
-        posOffset: t.left
+        relativeFrom: ObjectRelativeFromH.PAGE,
+        posOffset: position.left
       },
       positionV: {
-        relativeFrom: V.MARGIN,
-        posOffset: t.top
+        relativeFrom: ObjectRelativeFromV.MARGIN,
+        posOffset: position.top
       },
       angle: 0
     };
   }
   _updateOrderListener() {
-    this._drawingManagerService.featurePluginOrderUpdate$.subscribe((i) => {
-      const { unitId: e, subUnitId: n, drawingIds: t, arrangeType: r } = i;
-      this._commandService.executeCommand(lt.id, {
-        unitId: e,
-        subUnitId: n,
-        drawingIds: t,
-        arrangeType: r
+    this._drawingManagerService.featurePluginOrderUpdate$.subscribe((params) => {
+      const { unitId, subUnitId, drawingIds, arrangeType } = params;
+      this._commandService.executeCommand(SetDocDrawingArrangeCommand.id, {
+        unitId,
+        subUnitId,
+        drawingIds,
+        arrangeType
       });
     });
   }
   _updateDrawingListener() {
-    this._drawingManagerService.featurePluginUpdate$.subscribe((i) => {
+    this._drawingManagerService.featurePluginUpdate$.subscribe((params) => {
     });
   }
   _groupDrawingListener() {
-    this._drawingManagerService.featurePluginGroupUpdate$.subscribe((i) => {
-      this._commandService.executeCommand(mt.id, i);
-    }), this._drawingManagerService.featurePluginUngroupUpdate$.subscribe((i) => {
-      this._commandService.executeCommand(dt.id, i);
+    this._drawingManagerService.featurePluginGroupUpdate$.subscribe((params) => {
+      this._commandService.executeCommand(GroupDocDrawingCommand.id, params);
+    }), this._drawingManagerService.featurePluginUngroupUpdate$.subscribe((params) => {
+      this._commandService.executeCommand(UngroupDocDrawingCommand.id, params);
     });
   }
   _getCurrentSceneAndTransformer() {
-    const { scene: i, mainComponent: e } = this._context;
-    if (i == null || e == null)
+    const { scene, mainComponent } = this._context;
+    if (scene == null || mainComponent == null)
       return;
-    const n = i.getTransformerByCreate(), { docsLeft: t, docsTop: r } = e.getOffsetConfig();
-    return { scene: i, transformer: n, docsLeft: t, docsTop: r };
+    const transformer = scene.getTransformerByCreate(), { docsLeft, docsTop } = mainComponent.getOffsetConfig();
+    return { scene, transformer, docsLeft, docsTop };
   }
   _focusDrawingListener() {
     this.disposeWithMe(
-      this._drawingManagerService.focus$.subscribe((i) => {
-        var r;
-        const { transformer: e, docsLeft: n, docsTop: t } = (r = this._getCurrentSceneAndTransformer()) != null ? r : {};
-        if (i == null || i.length === 0)
-          this._contextService.setContextValue(rn, !1), this._docDrawingService.focusDrawing([]), e && e.resetProps({
+      this._drawingManagerService.focus$.subscribe((params) => {
+        var _a8;
+        const { transformer, docsLeft, docsTop } = (_a8 = this._getCurrentSceneAndTransformer()) != null ? _a8 : {};
+        if (params == null || params.length === 0)
+          this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, !1), this._docDrawingService.focusDrawing([]), transformer && transformer.resetProps({
             zeroTop: 0,
             zeroLeft: 0
           });
         else {
-          this._contextService.setContextValue(rn, !0), this._docDrawingService.focusDrawing(i), this._textSelectionManager.getActiveTextRange() && this._textSelectionManager.replaceTextRanges([]);
-          const a = this._textSelectionRenderManager.getSegment(), s = this._findSegmentIdByDrawingId(i[0].drawingId);
-          a !== s && this._textSelectionRenderManager.setSegment(s), e && e.resetProps({
-            zeroTop: t,
-            zeroLeft: n
+          this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, !0), this._docDrawingService.focusDrawing(params), this._textSelectionManager.getActiveTextRange() && this._textSelectionManager.replaceTextRanges([]);
+          const prevSegmentId = this._textSelectionRenderManager.getSegment(), segmentId = this._findSegmentIdByDrawingId(params[0].drawingId);
+          prevSegmentId !== segmentId && this._textSelectionRenderManager.setSegment(segmentId), transformer && transformer.resetProps({
+            zeroTop: docsTop,
+            zeroLeft: docsLeft
           });
         }
       })
     );
   }
-  _findSegmentIdByDrawingId(i) {
-    var a, s, l;
-    const { unit: e } = this._context, { body: n, headers: t = {}, footers: r = {} } = e.getSnapshot();
-    if (((a = n == null ? void 0 : n.customBlocks) != null ? a : []).some((c) => c.blockId === i))
+  _findSegmentIdByDrawingId(drawingId) {
+    var _a8, _b, _c;
+    const { unit: DocDataModel } = this._context, { body, headers = {}, footers = {} } = DocDataModel.getSnapshot();
+    if (((_a8 = body == null ? void 0 : body.customBlocks) != null ? _a8 : []).some((b) => b.blockId === drawingId))
       return "";
-    for (const c of Object.keys(t))
-      if ((s = t[c].body.customBlocks) != null && s.some((m) => m.blockId === i))
-        return c;
-    for (const c of Object.keys(r))
-      if ((l = r[c].body.customBlocks) != null && l.some((m) => m.blockId === i))
-        return c;
+    for (const headerId of Object.keys(headers))
+      if ((_b = headers[headerId].body.customBlocks) != null && _b.some((b) => b.blockId === drawingId))
+        return headerId;
+    for (const footerId of Object.keys(footers))
+      if ((_c = footers[footerId].body.customBlocks) != null && _c.some((b) => b.blockId === drawingId))
+        return footerId;
     return "";
   }
   // Update drawings edit status and opacity. You can not edit header footer images when you are editing body. and vice verse.
   _updateDrawingsEditStatus() {
-    var s;
-    const { unit: i, scene: e, unitId: n } = this._context, t = (s = this._renderManagerSrv.getRenderById(n)) == null ? void 0 : s.with(ae).getViewModel();
-    if (t == null || i == null)
+    var _a8;
+    const { unit: docDataModel, scene, unitId } = this._context, viewModel = (_a8 = this._renderManagerSrv.getRenderById(unitId)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getViewModel();
+    if (viewModel == null || docDataModel == null)
       return;
-    const r = i.getSnapshot(), { drawings: o = {} } = r, a = t.getEditArea() === xe.BODY;
-    for (const l of Object.keys(o)) {
-      const c = o[l], m = Ft({ unitId: n, drawingId: c.drawingId, subUnitId: n }), u = e.fuzzyMathObjects(m, !0);
-      if (u.length)
-        for (const f of u)
-          e.detachTransformerFrom(f), f.setOpacity(0.5), (a && c.isMultiTransform !== oe.TRUE || !a && c.isMultiTransform === oe.TRUE) && (e.attachTransformerTo(f), f.setOpacity(1));
+    const snapshot = docDataModel.getSnapshot(), { drawings = {} } = snapshot, isEditBody = viewModel.getEditArea() === DocumentEditArea.BODY;
+    for (const key of Object.keys(drawings)) {
+      const drawing = drawings[key], objectKey = getDrawingShapeKeyByDrawingSearch({ unitId, drawingId: drawing.drawingId, subUnitId: unitId }), drawingShapes = scene.fuzzyMathObjects(objectKey, !0);
+      if (drawingShapes.length)
+        for (const shape of drawingShapes)
+          scene.detachTransformerFrom(shape), shape.setOpacity(0.5), (isEditBody && drawing.isMultiTransform !== BooleanNumber.TRUE || !isEditBody && drawing.isMultiTransform === BooleanNumber.TRUE) && (scene.attachTransformerTo(shape), shape.setOpacity(1));
     }
   }
   _editAreaChangeListener() {
-    var n;
-    const { unitId: i } = this._context, e = (n = this._renderManagerSrv.getRenderById(i)) == null ? void 0 : n.with(ae).getViewModel();
-    e != null && (this._updateDrawingsEditStatus(), this.disposeWithMe(
-      e.editAreaChange$.subscribe(() => {
+    var _a8;
+    const { unitId } = this._context, viewModel = (_a8 = this._renderManagerSrv.getRenderById(unitId)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getViewModel();
+    viewModel != null && (this._updateDrawingsEditStatus(), this.disposeWithMe(
+      viewModel.editAreaChange$.subscribe(() => {
         this._updateDrawingsEditStatus();
       })
-    ), this._docRefreshDrawingsService.refreshDrawings$.subscribe((t) => {
-      t != null && queueMicrotask(() => {
+    ), this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
+      skeleton != null && queueMicrotask(() => {
         this._updateDrawingsEditStatus();
       });
     }), this.disposeWithMe(
-      this._commandService.onCommandExecuted(async (t) => {
-        t.id === Q.id && queueMicrotask(() => {
+      this._commandService.onCommandExecuted(async (command) => {
+        command.id === RichTextEditingMutation.id && queueMicrotask(() => {
           this._updateDrawingsEditStatus();
         });
       })
     ));
   }
-};
-fn = Qi([
-  de(1, $),
-  de(2, pe(un)),
-  de(3, se),
-  de(4, kt),
-  de(5, Re),
-  de(6, he),
-  de(7, Fn),
-  de(8, oi),
-  de(9, pe(an)),
-  de(10, pe(un)),
-  de(11, Ue),
-  de(12, pe(ln))
-], fn);
-var Ji = Object.defineProperty, er = Object.getOwnPropertyDescriptor, nr = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? er(e, n) : e, o = i.length - 1, a; o >= 0; o--)
-    (a = i[o]) && (r = (t ? a(e, n, r) : a(r)) || r);
-  return t && r && Ji(e, n, r), r;
-}, We = (i, e) => (n, t) => e(n, t, i);
-let pn = class extends qe {
-  constructor(e, n, t, r, o, a) {
+}, __name(_a3, "DocDrawingUpdateRenderController"), _a3);
+DocDrawingUpdateRenderController = __decorateClass$4([
+  __decorateParam$4(1, ICommandService),
+  __decorateParam$4(2, Inject(TextSelectionManagerService)),
+  __decorateParam$4(3, IRenderManagerService),
+  __decorateParam$4(4, IImageIoService),
+  __decorateParam$4(5, IDocDrawingService),
+  __decorateParam$4(6, IDrawingManagerService),
+  __decorateParam$4(7, IContextService),
+  __decorateParam$4(8, IMessageService),
+  __decorateParam$4(9, Inject(LocaleService)),
+  __decorateParam$4(10, Inject(TextSelectionManagerService)),
+  __decorateParam$4(11, ITextSelectionRenderManager),
+  __decorateParam$4(12, Inject(DocRefreshDrawingsService))
+], DocDrawingUpdateRenderController);
+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"), _a4;
+let DocDrawingTransformUpdateController = (_a4 = class extends Disposable {
+  constructor(_context, _docSkeletonManagerService, _commandService, _editorService, _drawingManagerService, _docRefreshDrawingsService) {
     super();
-    _e(this, "_liquid", new Wn());
-    this._context = e, this._docSkeletonManagerService = n, this._commandService = t, this._editorService = r, this._drawingManagerService = o, this._docRefreshDrawingsService = a, this._initialize(), this._commandExecutedListener();
+    __publicField(this, "_liquid", new Liquid());
+    this._context = _context, this._docSkeletonManagerService = _docSkeletonManagerService, this._commandService = _commandService, this._editorService = _editorService, this._drawingManagerService = _drawingManagerService, this._docRefreshDrawingsService = _docRefreshDrawingsService, this._initialize(), this._commandExecutedListener();
   }
   _initialize() {
     this._initialRenderRefresh();
   }
   _initialRenderRefresh() {
-    this._docSkeletonManagerService.currentSkeleton$.subscribe((e) => {
-      e != null && this._refreshDrawing(e);
-    }), this._docRefreshDrawingsService.refreshDrawings$.subscribe((e) => {
-      e != null && this._refreshDrawing(e);
+    this._docSkeletonManagerService.currentSkeleton$.subscribe((documentSkeleton) => {
+      documentSkeleton != null && this._refreshDrawing(documentSkeleton);
+    }), this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
+      skeleton != null && this._refreshDrawing(skeleton);
     });
   }
   _commandExecutedListener() {
-    const e = [Q.id, Zt.id];
+    const updateCommandList = [RichTextEditingMutation.id, SetDocZoomRatioOperation.id];
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((n) => {
-        if (e.includes(n.id)) {
-          const t = n.params, { unitId: r } = t, { unitId: o, mainComponent: a } = this._context;
-          if (r !== o)
+      this._commandService.onCommandExecuted((command) => {
+        if (updateCommandList.includes(command.id)) {
+          const params = command.params, { unitId: commandUnitId } = params, { unitId, mainComponent } = this._context;
+          if (commandUnitId !== unitId)
             return;
-          const s = this._docSkeletonManagerService.getSkeleton();
-          if (s == null)
+          const skeleton = this._docSkeletonManagerService.getSkeleton();
+          if (skeleton == null)
             return;
-          if (this._editorService.isEditor(o)) {
-            a == null || a.makeDirty();
+          if (this._editorService.isEditor(unitId)) {
+            mainComponent == null || mainComponent.makeDirty();
             return;
           }
-          this._refreshDrawing(s);
+          this._refreshDrawing(skeleton);
         }
       })
     );
   }
-  _refreshDrawing(e) {
-    var D, _;
-    const n = e == null ? void 0 : e.getSkeletonData(), { mainComponent: t, unitId: r } = this._context, o = t;
-    if (!n)
+  _refreshDrawing(skeleton) {
+    var _a8, _b;
+    const skeletonData = skeleton == null ? void 0 : skeleton.getSkeletonData(), { mainComponent, unitId } = this._context, documentComponent = mainComponent;
+    if (!skeletonData)
       return;
-    const { left: a, top: s, pageLayoutType: l, pageMarginLeft: c, pageMarginTop: m } = o, { pages: u, skeHeaders: f, skeFooters: h } = n, p = {};
+    const { left: docsLeft, top: docsTop, pageLayoutType, pageMarginLeft, pageMarginTop } = documentComponent, { pages, skeHeaders, skeFooters } = skeletonData, updateDrawingMap = {};
     this._liquid.reset();
-    for (let C = 0, O = u.length; C < O; C++) {
-      const y = u[C], { headerId: T, footerId: N, pageWidth: R } = y;
-      if (T) {
-        const E = (D = f.get(T)) == null ? void 0 : D.get(R);
-        E && this._calculateDrawingPosition(
-          r,
-          E,
-          a,
-          s,
-          p,
-          E.marginTop,
-          y.marginLeft
+    for (let i = 0, len = pages.length; i < len; i++) {
+      const page = pages[i], { headerId, footerId, pageWidth } = page;
+      if (headerId) {
+        const headerPage = (_a8 = skeHeaders.get(headerId)) == null ? void 0 : _a8.get(pageWidth);
+        headerPage && this._calculateDrawingPosition(
+          unitId,
+          headerPage,
+          docsLeft,
+          docsTop,
+          updateDrawingMap,
+          headerPage.marginTop,
+          page.marginLeft
         );
       }
-      if (N) {
-        const E = (_ = h.get(N)) == null ? void 0 : _.get(R);
-        E && this._calculateDrawingPosition(
-          r,
-          E,
-          a,
-          s,
-          p,
-          y.pageHeight - y.marginBottom + E.marginTop,
-          y.marginLeft
+      if (footerId) {
+        const footerPage = (_b = skeFooters.get(footerId)) == null ? void 0 : _b.get(pageWidth);
+        footerPage && this._calculateDrawingPosition(
+          unitId,
+          footerPage,
+          docsLeft,
+          docsTop,
+          updateDrawingMap,
+          page.pageHeight - page.marginBottom + footerPage.marginTop,
+          page.marginLeft
         );
       }
-      this._calculateDrawingPosition(r, y, a, s, p, y.marginTop, y.marginLeft), this._liquid.translatePage(y, l, c, m);
+      this._calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft), this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
     }
-    const w = Object.values(p), v = w.filter((C) => !C.isMultiTransform), I = w.filter((C) => C.isMultiTransform);
-    v.length > 0 && this._drawingManagerService.refreshTransform(v), I.length > 0 && this._handleMultiDrawingsTransform(I);
-  }
-  _handleMultiDrawingsTransform(e) {
-    const { scene: n, unitId: t } = this._context, r = n.getTransformerByCreate();
-    e.forEach((l) => {
-      const c = this._drawingManagerService.getDrawingByParam(l);
-      c != null && (c.transform = l.transform, c.transforms = l.transforms, c.isMultiTransform = l.isMultiTransform);
+    const updateDrawings = Object.values(updateDrawingMap), nonMultiDrawings = updateDrawings.filter((drawing) => !drawing.isMultiTransform), multiDrawings = updateDrawings.filter((drawing) => drawing.isMultiTransform);
+    nonMultiDrawings.length > 0 && this._drawingManagerService.refreshTransform(nonMultiDrawings), multiDrawings.length > 0 && this._handleMultiDrawingsTransform(multiDrawings);
+  }
+  _handleMultiDrawingsTransform(multiDrawings) {
+    const { scene, unitId } = this._context, transformer = scene.getTransformerByCreate();
+    multiDrawings.forEach((updateParam) => {
+      const param = this._drawingManagerService.getDrawingByParam(updateParam);
+      param != null && (param.transform = updateParam.transform, param.transforms = updateParam.transforms, param.isMultiTransform = updateParam.isMultiTransform);
     });
-    const a = [...r.getSelectedObjectMap().keys()], s = Object.values(this._drawingManagerService.getDrawingData(t, t)).filter((l) => l.isMultiTransform === oe.TRUE);
-    this._drawingManagerService.removeNotification(s), this._drawingManagerService.addNotification(e);
-    for (const l of a) {
-      const c = n.getObject(l);
-      c && r.setSelectedControl(c);
+    const selectedObjectKeys = [...transformer.getSelectedObjectMap().keys()], allMultiDrawings = Object.values(this._drawingManagerService.getDrawingData(unitId, unitId)).filter((drawing) => drawing.isMultiTransform === BooleanNumber.TRUE);
+    this._drawingManagerService.removeNotification(allMultiDrawings), this._drawingManagerService.addNotification(multiDrawings);
+    for (const key of selectedObjectKeys) {
+      const drawingShape = scene.getObject(key);
+      drawingShape && transformer.setSelectedControl(drawingShape);
     }
   }
-  _calculateDrawingPosition(e, n, t, r, o, a, s) {
-    const { skeDrawings: l } = n;
+  _calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft) {
+    const { skeDrawings } = page;
     this._liquid.translatePagePadding({
-      marginTop: a,
-      marginLeft: s
-    }), l.forEach((c) => {
-      const { aLeft: m, aTop: u, height: f, width: h, angle: p, drawingId: w, drawingOrigin: v } = c, I = v.layoutType === k.WRAP_NONE && v.behindDoc === oe.TRUE, { isMultiTransform: D = oe.FALSE } = v, _ = {
-        left: m + t + this._liquid.x,
-        top: u + r + this._liquid.y,
-        width: h,
-        height: f,
-        angle: p
+      marginTop,
+      marginLeft
+    }), skeDrawings.forEach((drawing) => {
+      const { aLeft, aTop, height, width, angle, drawingId, drawingOrigin } = drawing, behindText = drawingOrigin.layoutType === PositionedObjectLayoutType.WRAP_NONE && drawingOrigin.behindDoc === BooleanNumber.TRUE, { isMultiTransform = BooleanNumber.FALSE } = drawingOrigin, transform = {
+        left: aLeft + docsLeft + this._liquid.x,
+        top: aTop + docsTop + this._liquid.y,
+        width,
+        height,
+        angle
       };
-      o[w] == null ? o[w] = {
-        unitId: e,
-        subUnitId: e,
-        drawingId: w,
-        behindText: I,
-        transform: _,
-        transforms: [_],
-        isMultiTransform: D
-      } : D === oe.TRUE && o[w].transforms.push(_);
+      updateDrawingMap[drawingId] == null ? updateDrawingMap[drawingId] = {
+        unitId,
+        subUnitId: unitId,
+        drawingId,
+        behindText,
+        transform,
+        transforms: [transform],
+        isMultiTransform
+      } : isMultiTransform === BooleanNumber.TRUE && updateDrawingMap[drawingId].transforms.push(transform);
     }), this._liquid.restorePagePadding({
-      marginTop: a,
-      marginLeft: s
+      marginTop,
+      marginLeft
     });
   }
-};
-pn = nr([
-  We(1, pe(ae)),
-  We(2, $),
-  We(3, ai),
-  We(4, he),
-  We(5, pe(ln))
-], pn);
-var tr = Object.defineProperty, ir = Object.getOwnPropertyDescriptor, rr = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? ir(e, n) : e, o = i.length - 1, a; o >= 0; o--)
-    (a = i[o]) && (r = (t ? a(e, n, r) : a(r)) || r);
-  return t && r && tr(e, n, r), r;
-}, Ge = (i, e) => (n, t) => e(n, t, i);
-function or(i) {
-  var t, r, o, a;
-  if (X.isNoop(i) || !Array.isArray(i))
+}, __name(_a4, "DocDrawingTransformUpdateController"), _a4);
+DocDrawingTransformUpdateController = __decorateClass$3([
+  __decorateParam$3(1, Inject(DocSkeletonManagerService)),
+  __decorateParam$3(2, ICommandService),
+  __decorateParam$3(3, IEditorService),
+  __decorateParam$3(4, IDrawingManagerService),
+  __decorateParam$3(5, Inject(DocRefreshDrawingsService))
+], DocDrawingTransformUpdateController);
+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");
+function getAddOrRemoveDrawings(actions) {
+  var _a8, _b, _c, _d;
+  if (JSONX.isNoop(actions) || !Array.isArray(actions))
     return null;
-  const e = i.find((s) => Array.isArray(s) && (s == null ? void 0 : s[0]) === "drawings");
-  if (e == null || !Array.isArray(e) || e.length < 3 || typeof e[1] == "string" && typeof e[2] != "object" || Array.isArray(e[1]) && typeof e[1][1] != "object")
+  const drawingsOp = actions.find((action) => Array.isArray(action) && (action == null ? void 0 : action[0]) === "drawings");
+  if (drawingsOp == null || !Array.isArray(drawingsOp) || drawingsOp.length < 3 || typeof drawingsOp[1] == "string" && typeof drawingsOp[2] != "object" || Array.isArray(drawingsOp[1]) && typeof drawingsOp[1][1] != "object")
     return null;
-  const n = [];
-  if (Array.isArray(e == null ? void 0 : e[1]))
-    for (const s of e)
-      Array.isArray(s) && n.push({
-        type: (t = s == null ? void 0 : s[1]) != null && t.i ? "add" : "remove",
-        drawingId: s == null ? void 0 : s[0],
-        drawing: (r = s == null ? void 0 : s[1]) == null ? void 0 : r.i
+  const drawings = [];
+  if (Array.isArray(drawingsOp == null ? void 0 : drawingsOp[1]))
+    for (const op of drawingsOp)
+      Array.isArray(op) && drawings.push({
+        type: (_a8 = op == null ? void 0 : op[1]) != null && _a8.i ? "add" : "remove",
+        drawingId: op == null ? void 0 : op[0],
+        drawing: (_b = op == null ? void 0 : op[1]) == null ? void 0 : _b.i
       });
   else
-    n.push({
-      type: (o = e[2]) != null && o.i ? "add" : "remove",
-      drawingId: e[1],
-      drawing: (a = e[2]) == null ? void 0 : a.i
+    drawings.push({
+      type: (_c = drawingsOp[2]) != null && _c.i ? "add" : "remove",
+      drawingId: drawingsOp[1],
+      drawing: (_d = drawingsOp[2]) == null ? void 0 : _d.i
     });
-  return n;
+  return drawings;
 }
-function ar(i) {
-  if (!Array.isArray(i) || i.length < 3 || i[0] !== "drawingsOrder")
+__name(getAddOrRemoveDrawings, "getAddOrRemoveDrawings");
+function getReOrderedDrawings(actions) {
+  if (!Array.isArray(actions) || actions.length < 3 || actions[0] !== "drawingsOrder")
     return [];
-  const e = [];
-  for (let n = 1; n < i.length; n++) {
-    const t = i[n];
-    if (Array.isArray(t) && typeof t[0] == "number" && typeof t[1] == "object")
-      e.push(t[0]);
+  const drawingIndexes = [];
+  for (let i = 1; i < actions.length; i++) {
+    const action = actions[i];
+    if (Array.isArray(action) && typeof action[0] == "number" && typeof action[1] == "object")
+      drawingIndexes.push(action[0]);
     else {
-      e.length = 0;
+      drawingIndexes.length = 0;
       break;
     }
   }
-  return e;
+  return drawingIndexes;
 }
-let nn = class extends qe {
-  constructor(i, e, n, t, r) {
-    super(), this._univerInstanceService = i, this._commandService = e, this._drawingManagerService = n, this._docDrawingService = t, this._renderManagerService = r, this._initialize();
+__name(getReOrderedDrawings, "getReOrderedDrawings");
+var _a5;
+let DocDrawingAddRemoveController = (_a5 = class extends Disposable {
+  constructor(_univerInstanceService, _commandService, _drawingManagerService, _docDrawingService, _renderManagerService) {
+    super(), this._univerInstanceService = _univerInstanceService, this._commandService = _commandService, this._drawingManagerService = _drawingManagerService, this._docDrawingService = _docDrawingService, this._renderManagerService = _renderManagerService, this._initialize();
   }
   _initialize() {
     this._commandExecutedListener();
   }
   _commandExecutedListener() {
     this.disposeWithMe(
-      this._commandService.beforeCommandExecuted((i) => {
-        if (i.id !== Q.id)
+      this._commandService.beforeCommandExecuted((command) => {
+        if (command.id !== RichTextEditingMutation.id)
           return;
-        const e = i.params, { unitId: n, actions: t } = e, r = or(t);
-        if (r != null)
-          for (const { type: o, drawingId: a, drawing: s } of r)
-            o === "add" ? this._addDrawings(n, [s]) : this._removeDrawings(n, [a]);
+        const params = command.params, { unitId, actions } = params, addOrRemoveDrawings = getAddOrRemoveDrawings(actions);
+        if (addOrRemoveDrawings != null)
+          for (const { type, drawingId, drawing } of addOrRemoveDrawings)
+            type === "add" ? this._addDrawings(unitId, [drawing]) : this._removeDrawings(unitId, [drawingId]);
       })
     ), this.disposeWithMe(
-      this._commandService.onCommandExecuted((i) => {
-        if (i.id !== Q.id)
+      this._commandService.onCommandExecuted((command) => {
+        if (command.id !== RichTextEditingMutation.id)
           return;
-        const e = i.params, { unitId: n, actions: t } = e;
-        ar(t).length > 0 && this._updateDrawingsOrder(n);
+        const params = command.params, { unitId, actions } = params;
+        getReOrderedDrawings(actions).length > 0 && this._updateDrawingsOrder(unitId);
       })
     ), this.disposeWithMe(
-      this._commandService.onCommandExecuted((i) => {
-        var a;
-        if (i.id !== Dt.id && i.id !== Et.id)
+      this._commandService.onCommandExecuted((command) => {
+        var _a8;
+        if (command.id !== UndoCommand.id && command.id !== RedoCommand.id)
           return;
-        const e = (a = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : a.getUnitId(), n = this._drawingManagerService.getFocusDrawings();
-        if (e == null || n.length === 0)
+        const unitId = (_a8 = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : _a8.getUnitId(), focusedDrawings = this._drawingManagerService.getFocusDrawings();
+        if (unitId == null || focusedDrawings.length === 0)
           return;
-        const t = this._renderManagerService.getRenderById(e), r = t == null ? void 0 : t.scene;
-        if (r == null)
+        const renderObject = this._renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
+        if (scene == null)
           return !1;
-        r.getTransformerByCreate().refreshControls();
+        scene.getTransformerByCreate().refreshControls();
       })
     );
   }
-  _addDrawings(i, e) {
-    const n = this._drawingManagerService, t = this._docDrawingService, r = this._docDrawingService.getBatchAddOp(e), { subUnitId: o, redo: a, objects: s } = r;
-    n.applyJson1(i, o, a), t.applyJson1(i, o, a), n.addNotification(s), t.addNotification(s);
-  }
-  _removeDrawings(i, e) {
-    const n = this._drawingManagerService, t = this._docDrawingService, r = this._docDrawingService.getBatchRemoveOp(e.map((l) => ({
-      unitId: i,
-      subUnitId: i,
-      drawingId: l
-    }))), { subUnitId: o, redo: a, objects: s } = r;
-    n.applyJson1(i, o, a), t.applyJson1(i, o, a), n.removeNotification(s), t.removeNotification(s);
-  }
-  _updateDrawingsOrder(i) {
-    const e = this._univerInstanceService.getUniverDocInstance(i);
-    if (e == null)
+  _addDrawings(unitId, drawings) {
+    const drawingManagerService = this._drawingManagerService, docDrawingService = this._docDrawingService, jsonOp = this._docDrawingService.getBatchAddOp(drawings), { subUnitId, redo: op, objects } = jsonOp;
+    drawingManagerService.applyJson1(unitId, subUnitId, op), docDrawingService.applyJson1(unitId, subUnitId, op), drawingManagerService.addNotification(objects), docDrawingService.addNotification(objects);
+  }
+  _removeDrawings(unitId, drawingIds) {
+    const drawingManagerService = this._drawingManagerService, docDrawingService = this._docDrawingService, jsonOp = this._docDrawingService.getBatchRemoveOp(drawingIds.map((drawingId) => ({
+      unitId,
+      subUnitId: unitId,
+      drawingId
+    }))), { subUnitId, redo: op, objects } = jsonOp;
+    drawingManagerService.applyJson1(unitId, subUnitId, op), docDrawingService.applyJson1(unitId, subUnitId, op), drawingManagerService.removeNotification(objects), docDrawingService.removeNotification(objects);
+  }
+  _updateDrawingsOrder(unitId) {
+    const documentDataModel = this._univerInstanceService.getUniverDocInstance(unitId);
+    if (documentDataModel == null)
       return;
-    const n = e.getSnapshot().drawingsOrder;
-    if (n == null)
+    const drawingsOrder = documentDataModel.getSnapshot().drawingsOrder;
+    if (drawingsOrder == null)
       return;
-    const t = this._drawingManagerService, r = this._docDrawingService;
-    t.setDrawingOrder(i, i, n), r.setDrawingOrder(i, i, n);
-    const o = {
-      unitId: i,
-      subUnitId: i,
-      drawingIds: n
+    const drawingManagerService = this._drawingManagerService, docDrawingService = this._docDrawingService;
+    drawingManagerService.setDrawingOrder(unitId, unitId, drawingsOrder), docDrawingService.setDrawingOrder(unitId, unitId, drawingsOrder);
+    const objects = {
+      unitId,
+      subUnitId: unitId,
+      drawingIds: drawingsOrder
     };
-    t.orderNotification(o), r.orderNotification(o);
-  }
-};
-nn = rr([
-  sn(cn.Steady, nn),
-  Ge(0, ne),
-  Ge(1, $),
-  Ge(2, he),
-  Ge(3, Re),
-  Ge(4, se)
-], nn);
-var sr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, lr = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? cr(e, n) : e, o = i.length - 1, a; o >= 0; o--)
-    (a = i[o]) && (r = (t ? a(e, n, r) : a(r)) || r);
-  return t && r && sr(e, n, r), r;
-}, Ve = (i, e) => (n, t) => e(n, t, i);
-const dr = "__InlineDrawingAnchor__";
-let tn = class extends qe {
-  constructor(e, n, t, r, o) {
+    drawingManagerService.orderNotification(objects), docDrawingService.orderNotification(objects);
+  }
+}, __name(_a5, "DocDrawingAddRemoveController"), _a5);
+DocDrawingAddRemoveController = __decorateClass$2([
+  OnLifecycle(LifecycleStages.Ready, DocDrawingAddRemoveController),
+  __decorateParam$2(0, IUniverInstanceService),
+  __decorateParam$2(1, ICommandService),
+  __decorateParam$2(2, IDrawingManagerService),
+  __decorateParam$2(3, IDocDrawingService),
+  __decorateParam$2(4, IRenderManagerService)
+], DocDrawingAddRemoveController);
+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 INLINE_DRAWING_ANCHOR_KEY_PREFIX = "__InlineDrawingAnchor__";
+var _a6;
+let DocDrawingTransformerController = (_a6 = class extends Disposable {
+  constructor(_commandService, _univerInstanceService, _drawingManagerService, _renderManagerService, _textSelectionRenderManager) {
     super();
-    _e(this, "_liquid", new Wn());
-    _e(this, "_listenerOnImageMap", /* @__PURE__ */ new Set());
+    __publicField(this, "_liquid", new Liquid());
+    __publicField(this, "_listenerOnImageMap", /* @__PURE__ */ new Set());
     // Use to cache the drawings is under transforming or scaling.
-    _e(this, "_transformerCache", /* @__PURE__ */ new Map());
-    _e(this, "_anchorShape");
-    this._commandService = e, this._univerInstanceService = n, this._drawingManagerService = t, this._renderManagerService = r, this._textSelectionRenderManager = o, this._init();
+    __publicField(this, "_transformerCache", /* @__PURE__ */ new Map());
+    __publicField(this, "_anchorShape");
+    this._commandService = _commandService, this._univerInstanceService = _univerInstanceService, this._drawingManagerService = _drawingManagerService, this._renderManagerService = _renderManagerService, this._textSelectionRenderManager = _textSelectionRenderManager, this._init();
   }
   _init() {
     this._listenDrawingFocus();
   }
   _listenDrawingFocus() {
     this.disposeWithMe(
-      this._drawingManagerService.add$.subscribe((e) => {
-        if (e.length !== 0)
-          for (const n of e) {
-            const { unitId: t } = n;
-            this._listenerOnImageMap.has(t) || (this._listenTransformerChange(t), this._listenerOnImageMap.add(t));
+      this._drawingManagerService.add$.subscribe((drawingParams) => {
+        if (drawingParams.length !== 0)
+          for (const drawingParam of drawingParams) {
+            const { unitId } = drawingParam;
+            this._listenerOnImageMap.has(unitId) || (this._listenTransformerChange(unitId), this._listenerOnImageMap.add(unitId));
           }
       })
     );
   }
   // Only handle one drawing transformer change.
   // eslint-disable-next-line max-lines-per-function
-  _listenTransformerChange(e) {
-    var r;
-    const n = (r = this._getSceneAndTransformerByDrawingSearch(e)) == null ? void 0 : r.transformer;
-    if (n == null)
+  _listenTransformerChange(unitId) {
+    var _a8;
+    const transformer = (_a8 = this._getSceneAndTransformerByDrawingSearch(unitId)) == null ? void 0 : _a8.transformer;
+    if (transformer == null)
       return;
     this.disposeWithMe(
-      ye(
-        n.changeStart$.subscribe((o) => {
-          var s;
+      toDisposable(
+        transformer.changeStart$.subscribe((state) => {
+          var _a9;
           this._transformerCache.clear();
-          const { objects: a } = o;
-          for (const l of a.values()) {
-            const { oKey: c, width: m, height: u, left: f, top: h, angle: p } = l, w = this._drawingManagerService.getDrawingOKey(c);
-            if (w == null)
+          const { objects } = state;
+          for (const object of objects.values()) {
+            const { oKey, width, height, left, top, angle } = object, drawing = this._drawingManagerService.getDrawingOKey(oKey);
+            if (drawing == null)
               continue;
-            const v = this._univerInstanceService.getUniverDocInstance(w.unitId), I = (s = v == null ? void 0 : v.getSnapshot().drawings) == null ? void 0 : s[w.drawingId];
-            (I == null ? void 0 : I.layoutType) === k.INLINE && l.setOpacity(0.2), I != null && this._transformerCache.set(w.drawingId, {
-              drawing: I,
-              top: h,
-              left: f,
-              width: m,
-              height: u,
-              angle: p
+            const documentDataModel = this._univerInstanceService.getUniverDocInstance(drawing.unitId), drawingData = (_a9 = documentDataModel == null ? void 0 : documentDataModel.getSnapshot().drawings) == null ? void 0 : _a9[drawing.drawingId];
+            (drawingData == null ? void 0 : drawingData.layoutType) === PositionedObjectLayoutType.INLINE && object.setOpacity(0.2), drawingData != null && this._transformerCache.set(drawing.drawingId, {
+              drawing: drawingData,
+              top,
+              left,
+              width,
+              height,
+              angle
             });
           }
         })
       )
     );
-    const t = Sn(this._updateMultipleDrawingDocTransform.bind(this), 50);
-    Sn(this._nonInlineDrawingTransform.bind(this), 50), this.disposeWithMe(
-      ye(
-        n.changing$.subscribe((o) => {
-          const { objects: a, offsetX: s, offsetY: l } = o;
-          if (a.size > 1)
-            t(a);
-          else if (a.size === 1) {
-            const c = this._transformerCache.values().next().value, m = a.values().next().value, { width: u, height: f, top: h, left: p, angle: w } = m;
-            if (u === c.width && f === c.height && h === c.top && p === c.left && w === c.angle)
+    const throttleMultipleDrawingUpdate = throttle(this._updateMultipleDrawingDocTransform.bind(this), 50);
+    throttle(this._nonInlineDrawingTransform.bind(this), 50), this.disposeWithMe(
+      toDisposable(
+        transformer.changing$.subscribe((state) => {
+          const { objects, offsetX, offsetY } = state;
+          if (objects.size > 1)
+            throttleMultipleDrawingUpdate(objects);
+          else if (objects.size === 1) {
+            const drawingCache = this._transformerCache.values().next().value, object = objects.values().next().value, { width, height, top, left, angle } = object;
+            if (width === drawingCache.width && height === drawingCache.height && top === drawingCache.top && left === drawingCache.left && angle === drawingCache.angle)
               return;
-            c && (c.drawing.layoutType, k.INLINE), c && c.drawing.layoutType === k.INLINE && s != null && l != null && this._updateInlineDrawingAnchor(c.drawing, s, l);
+            drawingCache && (drawingCache.drawing.layoutType, PositionedObjectLayoutType.INLINE), drawingCache && drawingCache.drawing.layoutType === PositionedObjectLayoutType.INLINE && offsetX != null && offsetY != null && this._updateInlineDrawingAnchor(drawingCache.drawing, offsetX, offsetY);
           }
         })
       )
     ), this.disposeWithMe(
-      ye(
-        n.changeEnd$.subscribe((o) => {
-          const { objects: a, offsetX: s, offsetY: l } = o;
-          for (const c of a.values()) {
-            const m = this._drawingManagerService.getDrawingOKey(c.oKey);
-            if (m == null)
+      toDisposable(
+        transformer.changeEnd$.subscribe((state) => {
+          const { objects, offsetX, offsetY } = state;
+          for (const object of objects.values()) {
+            const drawing = this._drawingManagerService.getDrawingOKey(object.oKey);
+            if (drawing == null)
               continue;
-            const u = this._transformerCache.get(m == null ? void 0 : m.drawingId);
-            (u == null ? void 0 : u.drawing.layoutType) === k.INLINE && c.setOpacity(1);
+            const drawingCache = this._transformerCache.get(drawing == null ? void 0 : drawing.drawingId);
+            (drawingCache == null ? void 0 : drawingCache.drawing.layoutType) === PositionedObjectLayoutType.INLINE && object.setOpacity(1);
           }
-          if (this._anchorShape && this._anchorShape.hide(), a.size > 1)
-            this._updateMultipleDrawingDocTransform(a);
-          else if (a.size === 1) {
-            const c = this._transformerCache.values().next().value, m = a.values().next().value, { width: u, height: f, top: h, left: p, angle: w } = m;
-            if (u === c.width && f === c.height && h === c.top && p === c.left && w === c.angle)
+          if (this._anchorShape && this._anchorShape.hide(), objects.size > 1)
+            this._updateMultipleDrawingDocTransform(objects);
+          else if (objects.size === 1) {
+            const drawingCache = this._transformerCache.values().next().value, object = objects.values().next().value, { width, height, top, left, angle } = object;
+            if (width === drawingCache.width && height === drawingCache.height && top === drawingCache.top && left === drawingCache.left && angle === drawingCache.angle)
               return;
-            c && c.drawing.layoutType === k.INLINE ? u !== c.width || f !== c.height || w !== c.angle ? this._updateDrawingSize(c, m) : s != null && l != null && this._moveInlineDrawing(c.drawing, s, l) : c && this._nonInlineDrawingTransform(c.drawing, m);
+            drawingCache && drawingCache.drawing.layoutType === PositionedObjectLayoutType.INLINE ? width !== drawingCache.width || height !== drawingCache.height || angle !== drawingCache.angle ? this._updateDrawingSize(drawingCache, object) : offsetX != null && offsetY != null && this._moveInlineDrawing(drawingCache.drawing, offsetX, offsetY) : drawingCache && this._nonInlineDrawingTransform(drawingCache.drawing, object);
           }
           this._transformerCache.clear();
         })
@@ -1981,171 +2004,171 @@ let tn = class extends qe {
     );
   }
   // eslint-disable-next-line max-lines-per-function
-  _updateMultipleDrawingDocTransform(e) {
-    if (e.size < 1)
+  _updateMultipleDrawingDocTransform(objects) {
+    if (objects.size < 1)
       return;
-    const n = [];
-    let t, r;
-    for (const o of e.values()) {
-      const { oKey: a, left: s, top: l, angle: c } = o;
-      let { width: m, height: u } = o;
-      const f = this._drawingManagerService.getDrawingOKey(a);
-      if (f == null)
+    const drawings = [];
+    let unitId, subUnitId;
+    for (const object of objects.values()) {
+      const { oKey, left, top, angle } = object;
+      let { width, height } = object;
+      const drawing = this._drawingManagerService.getDrawingOKey(oKey);
+      if (drawing == null)
         continue;
-      t == null && (t = f.unitId), r == null && (r = f.subUnitId);
-      const h = this._transformerCache.get(f.drawingId);
-      if (h == null)
+      unitId == null && (unitId = drawing.unitId), subUnitId == null && (subUnitId = drawing.subUnitId);
+      const drawingCache = this._transformerCache.get(drawing.drawingId);
+      if (drawingCache == null)
         continue;
-      const { drawing: p, top: w, left: v, width: I, height: D, angle: _ } = h, { width: C, height: O } = this._getPageContentSize(p);
-      if (m = Math.min(m, C), u = Math.min(u, O), (I !== m || D !== u) && n.push({
-        drawingId: f.drawingId,
+      const { drawing: drawingData, top: oldTop, left: oldLeft, width: oldWidth, height: oldHeight, angle: oldAngle } = drawingCache, { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawingData);
+      if (width = Math.min(width, maxWidth), height = Math.min(height, maxHeight), (oldWidth !== width || oldHeight !== height) && drawings.push({
+        drawingId: drawing.drawingId,
         key: "size",
         value: {
-          width: m,
-          height: u
+          width,
+          height
         }
-      }), _ !== c && n.push({
-        drawingId: f.drawingId,
+      }), oldAngle !== angle && drawings.push({
+        drawingId: drawing.drawingId,
         key: "angle",
-        value: c
-      }), w !== l || v !== s) {
-        const y = l - w, T = s - v;
-        y !== 0 && n.push({
-          drawingId: f.drawingId,
+        value: angle
+      }), oldTop !== top || oldLeft !== left) {
+        const verticalDelta = top - oldTop, horizontalDelta = left - oldLeft;
+        verticalDelta !== 0 && drawings.push({
+          drawingId: drawing.drawingId,
           key: "positionV",
           value: {
-            relativeFrom: p.docTransform.positionV.relativeFrom,
-            posOffset: p.docTransform.positionV.posOffset + y
+            relativeFrom: drawingData.docTransform.positionV.relativeFrom,
+            posOffset: drawingData.docTransform.positionV.posOffset + verticalDelta
           }
-        }), T !== 0 && n.push({
-          drawingId: f.drawingId,
+        }), horizontalDelta !== 0 && drawings.push({
+          drawingId: drawing.drawingId,
           key: "positionH",
           value: {
-            relativeFrom: p.docTransform.positionH.relativeFrom,
-            posOffset: p.docTransform.positionH.posOffset + T
+            relativeFrom: drawingData.docTransform.positionH.relativeFrom,
+            posOffset: drawingData.docTransform.positionH.posOffset + horizontalDelta
           }
         });
       }
     }
-    n.length > 0 && t && r && this._commandService.executeCommand(ze.id, {
-      unitId: t,
-      subUnitId: r,
-      drawings: n
+    drawings.length > 0 && unitId && subUnitId && this._commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+      unitId,
+      subUnitId,
+      drawings
     });
   }
   // TODO: @JOCS, Use to draw and update the drawing anchor.
-  _updateDrawingAnchor(e) {
+  _updateDrawingAnchor(objects) {
     if (this._transformerCache.size !== 1)
       return;
-    const n = this._transformerCache.values().next().value, t = e.values().next().value;
-    this._getDrawingAnchor(n.drawing, t);
+    const drawingCache = this._transformerCache.values().next().value, object = objects.values().next().value;
+    this._getDrawingAnchor(drawingCache.drawing, object);
   }
-  _updateInlineDrawingAnchor(e, n, t) {
-    var o;
+  _updateInlineDrawingAnchor(drawing, offsetX, offsetY) {
+    var _a8;
     if (this._transformerCache.size !== 1)
       return;
-    const { contentBoxPointGroup: r } = (o = this._getInlineDrawingAnchor(e, n, t)) != null ? o : {};
-    r != null && this._createOrUpdateInlineAnchor(e.unitId, r);
+    const { contentBoxPointGroup } = (_a8 = this._getInlineDrawingAnchor(drawing, offsetX, offsetY)) != null ? _a8 : {};
+    contentBoxPointGroup != null && this._createOrUpdateInlineAnchor(drawing.unitId, contentBoxPointGroup);
   }
-  _getInlineDrawingAnchor(e, n, t) {
-    var z;
-    const r = this._renderManagerService.getRenderById(e.unitId), o = r == null ? void 0 : r.with(ae).getSkeleton();
-    if (r == null)
+  _getInlineDrawingAnchor(drawing, offsetX, offsetY) {
+    var _a8;
+    const currentRender = this._renderManagerService.getRenderById(drawing.unitId), skeleton = currentRender == null ? void 0 : currentRender.with(DocSkeletonManagerService).getSkeleton();
+    if (currentRender == null)
       return;
-    const { mainComponent: a, scene: s } = r, l = a, c = s.getViewports()[0], {
-      pageLayoutType: m = On.VERTICAL,
-      pageMarginLeft: u,
-      pageMarginTop: f
-    } = l.getOffsetConfig();
-    let h = null, p = !1, w = -1, v = "";
-    const I = 0.5, D = this._getTransformCoordForDocumentOffset(l, c, n, t);
-    if (D == null)
+    const { mainComponent, scene } = currentRender, documentComponent = mainComponent, activeViewport = scene.getViewports()[0], {
+      pageLayoutType = PageLayoutType.VERTICAL,
+      pageMarginLeft,
+      pageMarginTop
+    } = documentComponent.getOffsetConfig();
+    let glyphAnchor = null, isBack = !1, segmentPageIndex = -1, segmentId = "";
+    const HALF = 0.5, coord = this._getTransformCoordForDocumentOffset(documentComponent, activeViewport, offsetX, offsetY);
+    if (coord == null)
       return;
-    const _ = o == null ? void 0 : o.findNodeByCoord(
-      D,
-      m,
-      u,
-      f,
+    const nodeInfo = skeleton == null ? void 0 : skeleton.findNodeByCoord(
+      coord,
+      pageLayoutType,
+      pageMarginLeft,
+      pageMarginTop,
       {
         strict: !1,
         segmentId: this._textSelectionRenderManager.getSegment(),
         segmentPage: this._textSelectionRenderManager.getSegmentPage()
       }
     );
-    if (_) {
-      const { node: U, ratioX: B, segmentPage: b, segmentId: S } = _;
-      p = B < I, h = U, w = b, v = S;
+    if (nodeInfo) {
+      const { node, ratioX, segmentPage, segmentId: nodeSegmentId } = nodeInfo;
+      isBack = ratioX < HALF, glyphAnchor = node, segmentPageIndex = segmentPage, segmentId = nodeSegmentId;
     }
-    if (h == null)
+    if (glyphAnchor == null)
       return;
-    const C = o == null ? void 0 : o.findPositionByGlyph(h, w), O = this._getDocObject();
-    if (C == null || o == null || O == null)
+    const nodePosition = skeleton == null ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPageIndex), docObject = this._getDocObject();
+    if (nodePosition == null || skeleton == null || docObject == null)
       return;
-    const y = {
-      ...C,
-      isBack: p
-    }, T = O.document.getOffsetConfig(), N = new Tn(T, o), { cursorList: R, contentBoxPointGroup: E } = N.getRangePointData(y, y), { startOffset: H } = (z = Mn(R)) != null ? z : {};
-    if (H != null)
-      return { offset: H, contentBoxPointGroup: E, segmentId: v, segmentPage: w };
+    const positionWithIsBack = {
+      ...nodePosition,
+      isBack
+    }, documentOffsetConfig = docObject.document.getOffsetConfig(), convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { cursorList, contentBoxPointGroup } = convertor.getRangePointData(positionWithIsBack, positionWithIsBack), { startOffset } = (_a8 = getOneTextSelectionRange(cursorList)) != null ? _a8 : {};
+    if (startOffset != null)
+      return { offset: startOffset, contentBoxPointGroup, segmentId, segmentPage: segmentPageIndex };
   }
   // eslint-disable-next-line max-lines-per-function, complexity
-  _getDrawingAnchor(e, n) {
-    var we, ve, te, Ne, Ie, Se, Te, Me, De, J;
-    const t = this._renderManagerService.getRenderById(e.unitId), r = t == null ? void 0 : t.with(ae).getSkeleton(), o = r == null ? void 0 : r.getSkeletonData();
-    if (o == null || t == null)
+  _getDrawingAnchor(drawing, object) {
+    var _a8, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    const currentRender = this._renderManagerService.getRenderById(drawing.unitId), skeleton = currentRender == null ? void 0 : currentRender.with(DocSkeletonManagerService).getSkeleton(), skeletonData = skeleton == null ? void 0 : skeleton.getSkeletonData();
+    if (skeletonData == null || currentRender == null)
       return;
-    const { pages: a, skeHeaders: s, skeFooters: l } = o, { mainComponent: c, scene: m } = t, u = c, f = m.getViewports()[0], { pageLayoutType: h = On.VERTICAL, pageMarginLeft: p, pageMarginTop: w, docsLeft: v, docsTop: I } = u.getOffsetConfig(), { left: D, top: _, angle: C } = n;
-    let { width: O, height: y } = n;
-    const { positionV: T, positionH: N } = e.docTransform, { width: R, height: E } = this._getPageContentSize(e);
-    O = Math.min(O, R), y = Math.min(y, E);
-    let H = null, z = "", U = -1;
-    const B = !1, b = {
-      ...e.docTransform,
+    const { pages, skeHeaders, skeFooters } = skeletonData, { mainComponent, scene } = currentRender, documentComponent = mainComponent, activeViewport = scene.getViewports()[0], { pageLayoutType = PageLayoutType.VERTICAL, pageMarginLeft, pageMarginTop, docsLeft, docsTop } = documentComponent.getOffsetConfig(), { left, top, angle } = object;
+    let { width, height } = object;
+    const { positionV, positionH } = drawing.docTransform, { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawing);
+    width = Math.min(width, maxWidth), height = Math.min(height, maxHeight);
+    let glyphAnchor = null, segmentId = "", segmentPage = -1;
+    const isBack = !1, docTransform = {
+      ...drawing.docTransform,
       size: {
-        width: O,
-        height: y
+        width,
+        height
       },
-      angle: C
-    }, { x: S, y: A } = m.getViewportScrollXY(f), P = this._getTransformCoordForDocumentOffset(u, f, D - S, _ - A);
-    if (P == null)
+      angle
+    }, { x, y } = scene.getViewportScrollXY(activeViewport), coord = this._getTransformCoordForDocumentOffset(documentComponent, activeViewport, left - x, top - y);
+    if (coord == null)
       return;
-    const L = r == null ? void 0 : r.findNodeByCoord(P, h, p, w, {
+    const nodeInfo = skeleton == null ? void 0 : skeleton.findNodeByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop, {
       strict: !1,
       segmentId: this._textSelectionRenderManager.getSegment(),
       segmentPage: this._textSelectionRenderManager.getSegmentPage()
     });
-    if (L) {
-      const { node: q, segmentPage: dn, segmentId: mn } = L;
-      H = q, U = dn, z = mn;
+    if (nodeInfo) {
+      const { node, segmentPage: segmentPageIndex, segmentId: nodeSegmentId } = nodeInfo;
+      glyphAnchor = node, segmentPage = segmentPageIndex, segmentId = nodeSegmentId;
     }
-    if (H == null)
+    if (glyphAnchor == null)
       return;
-    const x = (we = H.parent) == null ? void 0 : we.parent, M = x == null ? void 0 : x.parent, W = (ve = M == null ? void 0 : M.lines.find((q) => q.paragraphIndex === (x == null ? void 0 : x.paragraphIndex) && q.paragraphStart)) != null ? ve : M == null ? void 0 : M.lines[0], G = (te = M == null ? void 0 : M.parent) == null ? void 0 : te.parent;
-    if (x == null || M == null || W == null || G == null)
+    const line = (_a8 = glyphAnchor.parent) == null ? void 0 : _a8.parent, column = line == null ? void 0 : line.parent, paragraphStartLine = (_b = column == null ? void 0 : column.lines.find((l) => l.paragraphIndex === (line == null ? void 0 : line.paragraphIndex) && l.paragraphStart)) != null ? _b : column == null ? void 0 : column.lines[0], page = (_c = column == null ? void 0 : column.parent) == null ? void 0 : _c.parent;
+    if (line == null || column == null || paragraphStartLine == null || page == null)
       return;
     this._liquid.reset();
-    const F = G.type;
-    for (const q of a) {
-      const { headerId: dn, footerId: mn, pageHeight: pt, pageWidth: _n, marginLeft: Cn, marginBottom: ht } = q, wt = a.indexOf(q);
-      if (U > -1 && wt === U) {
-        switch (F) {
-          case yn.HEADER: {
-            const Fe = (Ne = s.get(dn)) == null ? void 0 : Ne.get(_n);
-            if (Fe)
+    const pageType = page.type;
+    for (const p of pages) {
+      const { headerId, footerId, pageHeight, pageWidth, marginLeft, marginBottom } = p, pIndex = pages.indexOf(p);
+      if (segmentPage > -1 && pIndex === segmentPage) {
+        switch (pageType) {
+          case DocumentSkeletonPageType.HEADER: {
+            const headerSke = (_d = skeHeaders.get(headerId)) == null ? void 0 : _d.get(pageWidth);
+            if (headerSke)
               this._liquid.translatePagePadding({
-                marginTop: Fe.marginTop,
-                marginLeft: Cn
+                marginTop: headerSke.marginTop,
+                marginLeft
               });
             else
               throw new Error("header skeleton not found");
             break;
           }
-          case yn.FOOTER: {
-            const Fe = (Ie = l.get(mn)) == null ? void 0 : Ie.get(_n);
-            if (Fe)
+          case DocumentSkeletonPageType.FOOTER: {
+            const footerSke = (_e = skeFooters.get(footerId)) == null ? void 0 : _e.get(pageWidth);
+            if (footerSke)
               this._liquid.translatePagePadding({
-                marginTop: pt - ht + Fe.marginTop,
-                marginLeft: Cn
+                marginTop: pageHeight - marginBottom + footerSke.marginTop,
+                marginLeft
               });
             else
               throw new Error("footer skeleton not found");
@@ -2154,260 +2177,261 @@ let tn = class extends qe {
         }
         break;
       }
-      if (this._liquid.translatePagePadding(q), q === G)
+      if (this._liquid.translatePagePadding(p), p === page)
         break;
-      this._liquid.restorePagePadding(q), this._liquid.translatePage(q, h, p, w);
+      this._liquid.restorePagePadding(p), this._liquid.translatePage(p, pageLayoutType, pageMarginLeft, pageMarginTop);
     }
-    switch (T.relativeFrom === V.LINE ? H = x.divides[0].glyphGroup[0] : H = (De = (Me = (Te = (Se = W.divides) == null ? void 0 : Se[0]) == null ? void 0 : Te.glyphGroup) == null ? void 0 : Me[0]) != null ? De : H, b.positionH = {
-      relativeFrom: N.relativeFrom,
-      posOffset: D - this._liquid.x - v
-    }, N.relativeFrom) {
-      case ee.MARGIN: {
-        b.positionH.posOffset = D - this._liquid.x - v - G.marginLeft;
+    switch (positionV.relativeFrom === ObjectRelativeFromV.LINE ? glyphAnchor = line.divides[0].glyphGroup[0] : glyphAnchor = (_i = (_h = (_g = (_f = paragraphStartLine.divides) == null ? void 0 : _f[0]) == null ? void 0 : _g.glyphGroup) == null ? void 0 : _h[0]) != null ? _i : glyphAnchor, docTransform.positionH = {
+      relativeFrom: positionH.relativeFrom,
+      posOffset: left - this._liquid.x - docsLeft
+    }, positionH.relativeFrom) {
+      case ObjectRelativeFromH.MARGIN: {
+        docTransform.positionH.posOffset = left - this._liquid.x - docsLeft - page.marginLeft;
         break;
       }
-      case ee.COLUMN: {
-        b.positionH.posOffset = D - this._liquid.x - v - M.left;
+      case ObjectRelativeFromH.COLUMN: {
+        docTransform.positionH.posOffset = left - this._liquid.x - docsLeft - column.left;
         break;
       }
     }
-    switch (b.positionV = {
-      relativeFrom: T.relativeFrom,
-      posOffset: _ - this._liquid.y - I
-    }, T.relativeFrom) {
-      case V.PAGE: {
-        b.positionV.posOffset = _ - this._liquid.y - I - G.marginTop;
+    switch (docTransform.positionV = {
+      relativeFrom: positionV.relativeFrom,
+      posOffset: top - this._liquid.y - docsTop
+    }, positionV.relativeFrom) {
+      case ObjectRelativeFromV.PAGE: {
+        docTransform.positionV.posOffset = top - this._liquid.y - docsTop - page.marginTop;
         break;
       }
-      case V.LINE: {
-        b.positionV.posOffset = _ - this._liquid.y - I - x.top;
+      case ObjectRelativeFromV.LINE: {
+        docTransform.positionV.posOffset = top - this._liquid.y - docsTop - line.top;
         break;
       }
-      case V.PARAGRAPH: {
-        b.positionV.posOffset = _ - this._liquid.y - I - W.top;
+      case ObjectRelativeFromV.PARAGRAPH: {
+        docTransform.positionV.posOffset = top - this._liquid.y - docsTop - paragraphStartLine.top;
         break;
       }
     }
-    if (H == null)
+    if (glyphAnchor == null)
       return;
-    const ce = r == null ? void 0 : r.findPositionByGlyph(H, U), fe = this._getDocObject();
-    if (ce == null || r == null || fe == null)
+    const nodePosition = skeleton == null ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPage), docObject = this._getDocObject();
+    if (nodePosition == null || skeleton == null || docObject == null)
       return;
-    const Oe = {
-      ...ce,
-      isBack: B
-    }, Be = fe.document.getOffsetConfig(), Ce = new Tn(Be, r), { cursorList: K } = Ce.getRangePointData(Oe, Oe), { startOffset: le } = (J = Mn(K)) != null ? J : {};
-    if (le != null)
-      return { offset: le, docTransform: b, segmentId: z, segmentPage: U };
+    const positionWithIsBack = {
+      ...nodePosition,
+      isBack
+    }, documentOffsetConfig = docObject.document.getOffsetConfig(), convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { cursorList } = convertor.getRangePointData(positionWithIsBack, positionWithIsBack), { startOffset } = (_j = getOneTextSelectionRange(cursorList)) != null ? _j : {};
+    if (startOffset != null)
+      return { offset: startOffset, docTransform, segmentId, segmentPage };
   }
   // Update drawing when use transformer to resize it.
-  _updateDrawingSize(e, n) {
-    const t = [], { drawing: r, width: o, height: a, angle: s } = e, { unitId: l, subUnitId: c } = r;
-    let { width: m, height: u, angle: f } = n;
-    const { width: h, height: p } = this._getPageContentSize(r);
-    m = Math.min(h, m), u = Math.min(p, u), (m !== o || u !== a) && t.push({
-      drawingId: r.drawingId,
+  _updateDrawingSize(drawingCache, object) {
+    const drawings = [], { drawing, width: oldWidth, height: oldHeight, angle: oldAngle } = drawingCache, { unitId, subUnitId } = drawing;
+    let { width, height, angle } = object;
+    const { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawing);
+    width = Math.min(maxWidth, width), height = Math.min(maxHeight, height), (width !== oldWidth || height !== oldHeight) && drawings.push({
+      drawingId: drawing.drawingId,
       key: "size",
       value: {
-        width: m,
-        height: u
+        width,
+        height
       }
-    }), f !== s && t.push({
-      drawingId: r.drawingId,
+    }), angle !== oldAngle && drawings.push({
+      drawingId: drawing.drawingId,
       key: "angle",
-      value: f
-    }), t.length > 0 && l && c && this._commandService.executeCommand(ze.id, {
-      unitId: l,
-      subUnitId: c,
-      drawings: t
+      value: angle
+    }), drawings.length > 0 && unitId && subUnitId && this._commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+      unitId,
+      subUnitId,
+      drawings
     });
   }
   // Update inline drawing when use transformer to move it.
-  _moveInlineDrawing(e, n, t) {
-    const r = this._getInlineDrawingAnchor(e, n, t), { offset: o, segmentId: a, segmentPage: s } = r != null ? r : {};
-    if (o != null)
-      return this._commandService.executeCommand(at.id, {
-        unitId: e.unitId,
-        subUnitId: e.unitId,
-        drawing: e,
-        offset: o,
-        segmentId: a,
-        segmentPage: s
+  _moveInlineDrawing(drawing, offsetX, offsetY) {
+    const anchor = this._getInlineDrawingAnchor(drawing, offsetX, offsetY), { offset, segmentId, segmentPage } = anchor != null ? anchor : {};
+    if (offset != null)
+      return this._commandService.executeCommand(IMoveInlineDrawingCommand.id, {
+        unitId: drawing.unitId,
+        subUnitId: drawing.unitId,
+        drawing,
+        offset,
+        segmentId,
+        segmentPage
       });
   }
   // Limit the drawing to the page area, mainly in the vertical direction,
   // and the upper and lower limits cannot exceed the page margin area.
-  _limitDrawingInPage(e, n) {
-    const t = this._renderManagerService.getRenderById(e.unitId), { left: r, top: o, width: a, height: s, angle: l } = n, c = t == null ? void 0 : t.with(ae).getSkeleton(), m = c == null ? void 0 : c.getSkeletonData(), { pages: u } = m != null ? m : {};
-    if (m == null || t == null || u == null)
+  _limitDrawingInPage(drawing, object) {
+    const currentRender = this._renderManagerService.getRenderById(drawing.unitId), { left, top, width, height, angle } = object, skeleton = currentRender == null ? void 0 : currentRender.with(DocSkeletonManagerService).getSkeleton(), skeletonData = skeleton == null ? void 0 : skeleton.getSkeletonData(), { pages } = skeletonData != null ? skeletonData : {};
+    if (skeletonData == null || currentRender == null || pages == null)
       return {
-        left: r,
-        top: o,
-        width: a,
-        height: s,
-        angle: l
+        left,
+        top,
+        width,
+        height,
+        angle
       };
-    const { mainComponent: f } = t, h = f, { top: p, pageLayoutType: w, pageMarginLeft: v, pageMarginTop: I } = h;
-    let D = o;
+    const { mainComponent } = currentRender, documentComponent = mainComponent, { top: docsTop, pageLayoutType, pageMarginLeft, pageMarginTop } = documentComponent;
+    let newTop = top;
     this._liquid.reset();
-    for (const _ of u) {
-      const { marginBottom: C, pageHeight: O } = _, y = u.indexOf(_), T = u[y + 1];
-      if (T == null)
+    for (const page of pages) {
+      const { marginBottom, pageHeight } = page, index = pages.indexOf(page), nextPage = pages[index + 1];
+      if (nextPage == null)
         continue;
-      if (Pe.hasIntersectionBetweenTwoRanges(
-        o,
-        o + s,
-        this._liquid.y + p + O - C,
-        this._liquid.y + p + O + I + T.marginTop
+      if (Tools.hasIntersectionBetweenTwoRanges(
+        top,
+        top + height,
+        this._liquid.y + docsTop + pageHeight - marginBottom,
+        this._liquid.y + docsTop + pageHeight + pageMarginTop + nextPage.marginTop
       )) {
-        const R = o + s / 2, E = this._liquid.y + p + O + I / 2;
-        R < E ? D = Math.min(o, this._liquid.y + p + O - C - s) : D = Math.max(o, this._liquid.y + p + O + I + T.marginTop);
+        const drawingVMiddle = top + height / 2, pagesMiddle = this._liquid.y + docsTop + pageHeight + pageMarginTop / 2;
+        drawingVMiddle < pagesMiddle ? newTop = Math.min(top, this._liquid.y + docsTop + pageHeight - marginBottom - height) : newTop = Math.max(top, this._liquid.y + docsTop + pageHeight + pageMarginTop + nextPage.marginTop);
       }
-      this._liquid.translatePage(_, w, v, I);
+      this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
     }
     return {
-      left: r,
-      top: D,
-      width: a,
-      height: s,
-      angle: l
+      left,
+      top: newTop,
+      width,
+      height,
+      angle
     };
   }
-  _nonInlineDrawingTransform(e, n, t = !1) {
-    const r = e.isMultiTransform === oe.TRUE ? n : this._limitDrawingInPage(e, n);
-    if (t && r.top !== n.top)
+  _nonInlineDrawingTransform(drawing, object, isMoving = !1) {
+    const objectPosition = drawing.isMultiTransform === BooleanNumber.TRUE ? object : this._limitDrawingInPage(drawing, object);
+    if (isMoving && objectPosition.top !== object.top)
       return;
-    const o = this._getDrawingAnchor(e, r), { offset: a, docTransform: s, segmentId: l, segmentPage: c } = o != null ? o : {};
-    return a == null || s == null ? this._updateMultipleDrawingDocTransform(/* @__PURE__ */ new Map([[e.drawingId, n]])) : this._commandService.executeCommand(st.id, {
-      unitId: e.unitId,
-      subUnitId: e.unitId,
-      drawing: e,
-      offset: a,
-      docTransform: s,
-      segmentId: l,
-      segmentPage: c
+    const anchor = this._getDrawingAnchor(drawing, objectPosition), { offset, docTransform, segmentId, segmentPage } = anchor != null ? anchor : {};
+    return offset == null || docTransform == null ? this._updateMultipleDrawingDocTransform(/* @__PURE__ */ new Map([[drawing.drawingId, object]])) : this._commandService.executeCommand(ITransformNonInlineDrawingCommand.id, {
+      unitId: drawing.unitId,
+      subUnitId: drawing.unitId,
+      drawing,
+      offset,
+      docTransform,
+      segmentId,
+      segmentPage
     });
   }
-  _getSceneAndTransformerByDrawingSearch(e) {
-    if (e == null)
+  _getSceneAndTransformerByDrawingSearch(unitId) {
+    if (unitId == null)
       return;
-    const n = this._renderManagerService.getRenderById(e), t = n == null ? void 0 : n.scene;
-    if (t == null)
+    const renderObject = this._renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
+    if (scene == null)
       return;
-    const r = t.getTransformerByCreate();
-    return { scene: t, transformer: r };
+    const transformer = scene.getTransformerByCreate();
+    return { scene, transformer };
   }
-  _getTransformCoordForDocumentOffset(e, n, t, r) {
-    const { documentTransform: o } = e.getOffsetConfig(), a = n.transformVector2SceneCoord(Gt.FromArray([t, r]));
-    if (a)
-      return o.clone().invert().applyPoint(a);
+  _getTransformCoordForDocumentOffset(document, viewport, evtOffsetX, evtOffsetY) {
+    const { documentTransform } = document.getOffsetConfig(), originCoord = viewport.transformVector2SceneCoord(Vector2.FromArray([evtOffsetX, evtOffsetY]));
+    if (originCoord)
+      return documentTransform.clone().invert().applyPoint(originCoord);
   }
-  _createOrUpdateInlineAnchor(e, n) {
-    const t = this._renderManagerService.getRenderById(e);
-    if (t == null)
+  _createOrUpdateInlineAnchor(unitId, pointsGroup) {
+    const currentRender = this._renderManagerService.getRenderById(unitId);
+    if (currentRender == null)
       return;
-    const { mainComponent: r, scene: o } = t, a = r, {
-      docsLeft: s,
-      docsTop: l
-    } = a.getOffsetConfig(), c = Vt(n), { left: m, top: u, height: f } = c, h = m + s, p = u + l;
+    const { mainComponent, scene } = currentRender, documentComponent = mainComponent, {
+      docsLeft,
+      docsTop
+    } = documentComponent.getOffsetConfig(), bounding = getAnchorBounding(pointsGroup), { left: boundingLeft, top: boundingTop, height } = bounding, left = boundingLeft + docsLeft, top = boundingTop + docsTop;
     if (this._anchorShape) {
-      this._anchorShape.transformByState({ left: h, top: p, height: f }), this._anchorShape.show();
+      this._anchorShape.transformByState({ left, top, height }), this._anchorShape.show();
       return;
     }
-    const w = 6, v = new jt(dr + Pe.generateRandomId(w), {
-      left: h,
-      top: p,
-      height: f,
+    const ID_LENGTH = 6, anchor = new Rect(INLINE_DRAWING_ANCHOR_KEY_PREFIX + Tools.generateRandomId(ID_LENGTH), {
+      left,
+      top,
+      height,
       strokeWidth: 2,
-      stroke: $t(Pt.darkGray, 1),
+      stroke: getColor(COLORS.darkGray, 1),
       evented: !1
     });
-    this._anchorShape = v, o.addObject(v, zt);
+    this._anchorShape = anchor, scene.addObject(anchor, TEXT_RANGE_LAYER_INDEX);
   }
   _getDocObject() {
-    return Qt(this._univerInstanceService, this._renderManagerService);
+    return getDocObject(this._univerInstanceService, this._renderManagerService);
   }
-  _getPageContentSize(e) {
-    const n = this._renderManagerService.getRenderById(e.unitId), t = n == null ? void 0 : n.with(ae).getSkeleton(), r = 500, o = 500, a = t == null ? void 0 : t.getSkeletonData();
-    if (a == null || n == null)
+  _getPageContentSize(drawing) {
+    const currentRender = this._renderManagerService.getRenderById(drawing.unitId), skeleton = currentRender == null ? void 0 : currentRender.with(DocSkeletonManagerService).getSkeleton(), MAX_WIDTH = 500, MAX_HEIGHT = 500, skeletonData = skeleton == null ? void 0 : skeleton.getSkeletonData();
+    if (skeletonData == null || currentRender == null)
       return {
-        width: r,
-        height: o
+        width: MAX_WIDTH,
+        height: MAX_HEIGHT
       };
-    const { pages: s } = a;
-    let l = null;
-    for (const c of s) {
-      const { skeDrawings: m } = c;
-      if (m.has(e.drawingId)) {
-        l = c;
+    const { pages } = skeletonData;
+    let page = null;
+    for (const p of pages) {
+      const { skeDrawings } = p;
+      if (skeDrawings.has(drawing.drawingId)) {
+        page = p;
         break;
       }
     }
-    if (l) {
-      const { pageWidth: c, pageHeight: m, marginLeft: u, marginBottom: f, marginRight: h, marginTop: p } = l;
+    if (page) {
+      const { pageWidth, pageHeight, marginLeft, marginBottom, marginRight, marginTop } = page;
       return {
-        width: Math.max(r, c - u - h),
-        height: Math.max(o, m - p - f)
+        width: Math.max(MAX_WIDTH, pageWidth - marginLeft - marginRight),
+        height: Math.max(MAX_HEIGHT, pageHeight - marginTop - marginBottom)
       };
     } else
       return {
-        width: r,
-        height: o
+        width: MAX_WIDTH,
+        height: MAX_HEIGHT
       };
   }
-};
-tn = lr([
-  sn(cn.Rendered, tn),
-  Ve(0, $),
-  Ve(1, ne),
-  Ve(2, he),
-  Ve(3, se),
-  Ve(4, Ue)
-], tn);
-var ut = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, gr = (i, e, n) => e in i ? ut(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n, ur = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? mr(e, n) : e, o = i.length - 1, a; o >= 0; o--)
-    (a = i[o]) && (r = (t ? a(e, n, r) : a(r)) || r);
-  return t && r && ut(e, n, r), r;
-}, Bn = (i, e) => (n, t) => e(n, t, i), ft = (i, e, n) => gr(i, typeof e != "symbol" ? e + "" : e, n);
-const fr = "DOCS_DRAWING_UI_PLUGIN";
-let on = class extends Ot {
-  constructor(i, e, n) {
-    super(), this._injector = e, this._renderManagerSrv = n;
-  }
-  onStarting(i) {
+}, __name(_a6, "DocDrawingTransformerController"), _a6);
+DocDrawingTransformerController = __decorateClass$1([
+  OnLifecycle(LifecycleStages.Rendered, DocDrawingTransformerController),
+  __decorateParam$1(0, ICommandService),
+  __decorateParam$1(1, IUniverInstanceService),
+  __decorateParam$1(2, IDrawingManagerService),
+  __decorateParam$1(3, IRenderManagerService),
+  __decorateParam$1(4, ITextSelectionRenderManager)
+], DocDrawingTransformerController);
+var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __defNormalProp2 = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, "__defNormalProp"), __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"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, typeof key != "symbol" ? key + "" : key, value), "__publicField");
+const PLUGIN_NAME = "DOCS_DRAWING_UI_PLUGIN";
+var _a7;
+let UniverDocsDrawingUIPlugin = (_a7 = class extends Plugin {
+  constructor(_config, _injector, _renderManagerSrv) {
+    super(), this._injector = _injector, this._renderManagerSrv = _renderManagerSrv;
+  }
+  onStarting() {
     [
-      [en],
-      [Je],
-      [tn],
-      [nn],
-      [ln]
-    ].forEach((n) => i.add(n));
+      [DocDrawingUIController],
+      [DocDrawingPopupMenuController],
+      [DocDrawingTransformerController],
+      [DocDrawingAddRemoveController],
+      [DocRefreshDrawingsService]
+    ].forEach((dependency) => this._injector.add(dependency));
   }
   onReady() {
     [
-      [fn],
-      [pn]
-    ].forEach((i) => this._renderManagerSrv.registerRenderModule(be.UNIVER_DOC, i));
-  }
-};
-ft(on, "type", be.UNIVER_DOC);
-ft(on, "pluginName", fr);
-on = ur([
-  Tt(At, Ht, Wt),
-  Bn(1, pe(Hn)),
-  Bn(2, se)
-], on);
+      [DocDrawingUpdateRenderController],
+      [DocDrawingTransformUpdateController]
+    ].forEach((m) => this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, m));
+  }
+}, __name(_a7, "UniverDocsDrawingUIPlugin"), _a7);
+__publicField2(UniverDocsDrawingUIPlugin, "type", UniverInstanceType.UNIVER_DOC);
+__publicField2(UniverDocsDrawingUIPlugin, "pluginName", PLUGIN_NAME);
+UniverDocsDrawingUIPlugin = __decorateClass([
+  DependentOn(UniverDrawingUIPlugin, UniverDrawingPlugin, UniverDocsDrawingPlugin),
+  __decorateParam(1, Inject(Injector)),
+  __decorateParam(2, IRenderManagerService)
+], UniverDocsDrawingUIPlugin);
 export {
-  Wi as ClearDocDrawingTransformerOperation,
-  ct as DeleteDocDrawingsCommand,
-  Kn as EditDocDrawingOperation,
-  mt as GroupDocDrawingCommand,
-  gt as InsertDocDrawingCommand,
-  In as InsertDocImageOperation,
-  Xe as MoveDocDrawingsCommand,
-  vn as RemoveDocDrawingCommand,
-  lt as SetDocDrawingArrangeCommand,
-  Xn as SidebarDocDrawingOperation,
-  dt as UngroupDocDrawingCommand,
-  on as UniverDocsDrawingUIPlugin
+  ClearDocDrawingTransformerOperation,
+  DeleteDocDrawingsCommand,
+  EditDocDrawingOperation,
+  GroupDocDrawingCommand,
+  InsertDocDrawingCommand,
+  InsertDocImageOperation,
+  MoveDocDrawingsCommand,
+  RemoveDocDrawingCommand,
+  SetDocDrawingArrangeCommand,
+  SidebarDocDrawingOperation,
+  UngroupDocDrawingCommand,
+  UniverDocsDrawingUIPlugin
 };