@univerjs/docs-drawing-ui 0.5.0 → 0.5.1-nightly.202411301606

package/lib/es/index.js

@@ -1,522 +1,165 @@
-var Ot = Object.defineProperty;
-var Pt = (i, e, n) => e in i ? Ot(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n;
+var xt = Object.defineProperty;
+var Pt = (i, e, n) => e in i ? xt(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n;
 var Se = (i, e, n) => Pt(i, typeof e != "symbol" ? e + "" : e, n);
-import { CommandType as X, ICommandService as z, IUniverInstanceService as Z, TextX as vn, JSONX as q, MemoryCursor as xt, TextXActionType as Y, IUndoRedoService as Hn, BuildTextUtils as Tt, Tools as xe, Inject as we, LocaleService as dn, Disposable as qe, BooleanNumber as re, PositionedObjectLayoutType as k, WrapTextType as Ve, ObjectRelativeFromH as ee, ObjectRelativeFromV as G, FOCUSING_COMMON_DRAWINGS as nn, IContextService as Wn, UniverInstanceType as Te, Direction as ue, useDependency as pe, DocumentFlavor as fn, FOCUSING_UNIVER_EDITOR as yt, UndoCommand as bt, RedoCommand as Mt, toDisposable as Ee, throttle as On, COLORS as Rt, RxDisposable as Nt, LifecycleService as At, fromEventSubject as Et, LifecycleStages as Pn, DependentOn as jt, Injector as Lt, Plugin as Bt, IConfigService as Ut } from "@univerjs/core";
-import { IDocDrawingService as je, UniverDocsDrawingPlugin as Ft } from "@univerjs/docs-drawing";
-import { ArrangeTypeEnum as Ye, DRAWING_IMAGE_ALLOW_IMAGE_LIST as kt, DRAWING_IMAGE_COUNT_LIMIT as xn, ImageUploadStatusType as hn, DRAWING_IMAGE_ALLOW_SIZE as Ht, getImageSize as Wt, DrawingTypeEnum as Gt, getDrawingShapeKeyByDrawingSearch as Vt, IImageIoService as $t, IDrawingManagerService as ve, DRAWING_IMAGE_WIDTH_LIMIT as Tn, DRAWING_IMAGE_HEIGHT_LIMIT as yn, UniverDrawingPlugin as zt } from "@univerjs/drawing";
-import { DrawingCommonPanel as qt, ImageCropperObject as Xt, COMPONENT_IMAGE_POPUP_MENU as Kt, OpenImageCropOperation as Yt, ImageResetSizeOperation as Zt, UniverDrawingUIPlugin as Jt } from "@univerjs/drawing-ui";
-import { IRenderManagerService as Q, DocumentEditArea as Ue, Liquid as Gn, PageLayoutType as bn, DocumentSkeletonPageType as Mn, Vector2 as Qt, Rect as ei, getColor as ni, TRANSFORM_CHANGE_OBSERVABLE_TYPE as ti } from "@univerjs/engine-render";
-import { IMessageService as ii, ILocalFileService as ri, ISidebarService as oi, MenuItemType as Vn, getMenuHiddenObservable as $n, RibbonStartGroup as si, KeyCode as Fe, ComponentManager as ai, IMenuManagerService as ci, IShortcutService as di, UniverUIPlugin as li } from "@univerjs/ui";
-import { RichTextEditingMutation as J, DocSelectionManagerService as In, DocSkeletonManagerService as oe } from "@univerjs/docs";
-import { DocSelectionRenderService as ye, getRichTextEditPath as $e, getCustomBlockIdsInSelections as gi, docDrawingPositionToTransform as mi, NodePositionConvertToCursor as Rn, getOneTextSelectionRange as Nn, getAnchorBounding as ui, TEXT_RANGE_LAYER_INDEX as fi, getDocObject as hi, DocCanvasPopManagerService as pi, IEditorService as wi, SetDocZoomRatioOperation as vi } from "@univerjs/docs-ui";
-import { MessageType as An, InputNumber as Be, Select as En, Checkbox as Ii, RadioGroup as jn, Radio as Pe } from "@univerjs/design";
-import { BehaviorSubject as _i, debounceTime as zn, Observable as Si, takeUntil as Ln, filter as Bn } from "rxjs";
-import Ci, { forwardRef as qn, useRef as Di, createElement as Xn, useState as ie, useEffect as _n } from "react";
-const Oi = "docs-drawing-ui.config", Pi = {};
-var fe = function() {
-  return fe = 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]);
-    }
-    return i;
-  }, fe.apply(this, arguments);
-}, xi = 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]]);
+import { Disposable as Xe, UndoCommand as Tt, RedoCommand as yt, IUniverInstanceService as J, ICommandService as z, JSONX as q, PositionedObjectLayoutType as k, CommandType as X, BooleanNumber as re, ObjectRelativeFromH as ee, ObjectRelativeFromV as G, Tools as Pe, TextX as In, TextXActionType as Y, toDisposable as Ae, throttle as xn, COLORS as bt, MemoryCursor as Mt, IUndoRedoService as Vn, BuildTextUtils as Rt, ArrangeTypeEnum as Je, Inject as we, LocaleService as ln, DrawingTypeEnum as Nt, WrapTextType as $e, FOCUSING_COMMON_DRAWINGS as tn, IContextService as $n, UniverInstanceType as Te, Direction as ue, useDependency as pe, DocumentFlavor as fn, FOCUSING_UNIVER_EDITOR as Et, RxDisposable as At, SHEET_EDITOR_UNITS as jt, LifecycleService as Lt, DOCS_ZEN_EDITOR_UNIT_ID_KEY as Bt, fromEventSubject as Ut, LifecycleStages as Pn, DependentOn as Ft, Injector as kt, Plugin as Ht, IConfigService as Wt } from "@univerjs/core";
+import { IDocDrawingService as je, UniverDocsDrawingPlugin as Gt } from "@univerjs/docs-drawing";
+import { IDrawingManagerService as ve, DRAWING_IMAGE_ALLOW_IMAGE_LIST as Vt, DRAWING_IMAGE_COUNT_LIMIT as Tn, ImageUploadStatusType as hn, DRAWING_IMAGE_ALLOW_SIZE as $t, getImageSize as zt, getDrawingShapeKeyByDrawingSearch as qt, IImageIoService as Xt, DRAWING_IMAGE_WIDTH_LIMIT as yn, DRAWING_IMAGE_HEIGHT_LIMIT as bn, UniverDrawingPlugin as Kt } from "@univerjs/drawing";
+import { DrawingCommonPanel as Yt, ImageCropperObject as Jt, COMPONENT_IMAGE_POPUP_MENU as Zt, OpenImageCropOperation as Qt, ImageResetSizeOperation as ei, UniverDrawingUIPlugin as ni } from "@univerjs/drawing-ui";
+import { IRenderManagerService as Q, DocumentEditArea as Ue, Liquid as zn, PageLayoutType as Mn, DocumentSkeletonPageType as Rn, Vector2 as ti, Rect as ii, getColor as ri, TRANSFORM_CHANGE_OBSERVABLE_TYPE as oi } from "@univerjs/engine-render";
+import { IMessageService as si, ILocalFileService as ai, ISidebarService as ci, MenuItemType as qn, getMenuHiddenObservable as Xn, RibbonStartGroup as di, KeyCode as Fe, ComponentManager as li, IMenuManagerService as gi, IShortcutService as mi, UniverUIPlugin as ui } from "@univerjs/ui";
+import { RichTextEditingMutation as Z, DocSkeletonManagerService as oe, DocSelectionManagerService as _n } from "@univerjs/docs";
+import { DocSelectionRenderService as ye, getRichTextEditPath as ze, NodePositionConvertToCursor as Nn, getOneTextSelectionRange as En, getAnchorBounding as fi, TEXT_RANGE_LAYER_INDEX as hi, getDocObject as pi, getCustomBlockIdsInSelections as wi, docDrawingPositionToTransform as vi, DocCanvasPopManagerService as Ii, IEditorService as _i, SetDocZoomRatioOperation as Si } from "@univerjs/docs-ui";
+import { BehaviorSubject as Ci, debounceTime as Kn, Observable as Di, takeUntil as An, filter as jn } from "rxjs";
+import { MessageType as Ln, InputNumber as Be, Select as Bn, Checkbox as Oi, RadioGroup as Un, Radio as xe } from "@univerjs/design";
+import xi, { forwardRef as Yn, useRef as Pi, createElement as Jn, useState as ie, useEffect as Sn } from "react";
+const Ti = "docs-drawing-ui.config", yi = {};
+var bi = Object.defineProperty, Mi = Object.getOwnPropertyDescriptor, Ri = (i, e, n, t) => {
+  for (var r = t > 1 ? void 0 : t ? Mi(e, n) : e, o = i.length - 1, s; o >= 0; o--)
+    (s = i[o]) && (r = (t ? s(e, n, r) : s(r)) || r);
+  return t && r && bi(e, n, r), r;
+}, We = (i, e) => (n, t) => e(n, t, i);
+function Ni(i) {
+  var t, r, o, s;
+  if (q.isNoop(i) || !Array.isArray(i))
+    return null;
+  const e = i.find((a) => Array.isArray(a) && (a == null ? void 0 : a[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")
+    return null;
+  const n = [];
+  if (Array.isArray(e == null ? void 0 : e[1]))
+    for (const a of e)
+      Array.isArray(a) && n.push({
+        type: (t = a == null ? void 0 : a[1]) != null && t.i ? "add" : "remove",
+        drawingId: a == null ? void 0 : a[0],
+        drawing: (r = a == null ? void 0 : a[1]) == null ? void 0 : r.i
+      });
+  else
+    n.push({
+      type: (o = e[2]) != null && o.i ? "add" : "remove",
+      drawingId: e[1],
+      drawing: (s = e[2]) == null ? void 0 : s.i
+    });
   return n;
-}, Kn = qn(function(i, e) {
-  var n = i.icon, t = i.id, r = i.className, o = i.extend, s = xi(i, ["icon", "id", "className", "extend"]), c = "univerjs-icon univerjs-icon-".concat(t, " ").concat(r || "").trim(), d = Di("_".concat(bi()));
-  return Yn(n, "".concat(t), { defIds: n.defIds, idSuffix: d.current }, fe({ ref: e, className: c }, s), o);
-});
-function Yn(i, e, n, t, r) {
-  return Xn(i.tag, fe(fe({ key: e }, Ti(i, n, r)), t), (yi(i, n).children || []).map(function(o, s) {
-    return Yn(o, "".concat(e, "-").concat(i.tag, "-").concat(s), n, void 0, r);
-  }));
-}
-function Ti(i, e, n) {
-  var t = fe({}, 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 s = o[0], c = o[1];
-    typeof c == "string" && (t[s] = c.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
-  })), t;
-}
-function yi(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) ? fe(fe({}, i), { children: i.children.map(function(r) {
-    return typeof r.attrs.id == "string" && t && t.indexOf(r.attrs.id) > -1 ? fe(fe({}, r), { attrs: fe(fe({}, r.attrs), { id: r.attrs.id + e.idSuffix }) }) : r;
-  }) }) : i;
-}
-function bi() {
-  return Math.random().toString(36).substring(2, 8);
 }
-Kn.displayName = "UniverIcon";
-var Mi = { 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" } }] }, Zn = qn(function(i, e) {
-  return Xn(Kn, Object.assign({}, i, {
-    id: "add-image-single",
-    ref: e,
-    icon: Mi
-  }));
-});
-Zn.displayName = "AddImageSingle";
-const Sn = {
-  id: "doc.command.remove-doc-image",
-  type: X.COMMAND,
-  // eslint-disable-next-line max-lines-per-function
-  handler: (i, e) => {
-    var b, T, N, B;
-    const n = i.get(z), t = i.get(Z), r = i.get(Q), o = t.getCurrentUniverDocInstance();
-    if (e == null || o == null)
-      return !1;
-    const s = r.getRenderById(e.unitId).with(ye), { drawings: c } = e, d = (b = s.getSegment()) != null ? b : "", a = new vn(), g = q.getInstance(), f = (N = (T = o.getSelfOrHeaderFooterModel(d).getBody()) == null ? void 0 : T.customBlocks) != null ? N : [], m = c.map((R) => f.find((I) => I.blockId === R.drawingId)).filter((R) => !!R).sort((R, I) => R.startIndex > I.startIndex ? 1 : -1), p = c[0].unitId, h = new xt();
-    h.reset();
-    const v = m[0].startIndex, w = [
-      {
-        startOffset: v,
-        endOffset: v
-      }
-    ], S = {
-      id: J.id,
-      params: {
-        unitId: p,
-        actions: [],
-        textRanges: w
-      }
-    }, O = [];
-    for (const R of m) {
-      const { startIndex: I } = R;
-      I > h.cursor && a.push({
-        t: Y.RETAIN,
-        len: I - h.cursor
-      }), a.push({
-        t: Y.DELETE,
-        len: 1
-      }), h.moveCursorTo(I + 1);
-    }
-    const D = $e(o, d);
-    O.push(g.editOp(a.serialize(), D));
-    for (const R of m) {
-      const { blockId: I } = R, j = ((B = o.getDrawings()) != null ? B : {})[I], E = o.getDrawingsOrder().indexOf(I), W = g.removeOp(["drawings", I], j), _ = g.removeOp(["drawingsOrder", E], I);
-      O.push(W), O.push(_);
+function Ei(i) {
+  if (!Array.isArray(i) || i.length < 3 || i[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]);
+    else {
+      e.length = 0;
+      break;
     }
-    return S.params.actions = O.reduce((R, I) => q.compose(R, I), null), !!n.syncExecuteCommand(S.id, S.params);
   }
-}, Jn = {
-  id: "doc.command.delete-drawing",
-  type: X.COMMAND,
-  handler: (i) => {
-    const e = i.get(z), t = i.get(je).getFocusDrawings();
-    if (t.length === 0)
-      return !1;
-    const { unitId: r } = t[0], o = t.map((s) => {
-      const { unitId: c, subUnitId: d, drawingId: a, drawingType: g } = s;
-      return {
-        unitId: c,
-        subUnitId: d,
-        drawingId: a,
-        drawingType: g
-      };
-    });
-    return e.executeCommand(Sn.id, {
-      unitId: r,
-      drawings: o
-    });
+  return e;
+}
+let rn = class extends Xe {
+  constructor(i, e, n, t, r) {
+    super(), this._univerInstanceService = i, this._commandService = e, this._drawingManagerService = n, this._docDrawingService = t, this._renderManagerService = r, this._initialize();
   }
-}, Qn = {
-  id: "doc.command.group-doc-image",
-  type: X.COMMAND,
-  handler: (i, e) => {
-    i.get(z), i.get(Hn);
-    const n = i.get(je);
-    if (!e) return !1;
-    const t = [];
-    return e.forEach(({ parent: r, children: o }) => {
-      t.push(r.unitId), o.forEach((s) => {
-        t.push(s.unitId);
-      });
-    }), n.getGroupDrawingOp(e), !1;
+  _initialize() {
+    this._commandExecutedListener();
   }
-}, et = {
-  id: "doc.command.insert-doc-image",
-  type: X.COMMAND,
-  // eslint-disable-next-line max-lines-per-function
-  handler: (i, e) => {
-    var T, N, B, R;
-    if (e == null)
-      return !1;
-    const n = i.get(z), t = i.get(In), r = i.get(Z), o = t.getActiveTextRange(), s = r.getCurrentUniverDocInstance();
-    if (o == null || s == null)
-      return !1;
-    const c = s.getUnitId(), { drawings: d } = e, { collapsed: a, startOffset: g, segmentId: f } = o, m = s.getSelfOrHeaderFooterModel(f).getBody();
-    if (m == null)
-      return !1;
-    const p = new vn(), h = q.getInstance(), v = [], w = (N = (T = s.getSnapshot().drawingsOrder) == null ? void 0 : T.length) != null ? N : 0;
-    let S = 0;
-    if (a)
-      g > 0 && p.push({
-        t: Y.RETAIN,
-        len: g
-      });
-    else {
-      const I = Tt.selection.delete([o], m, 0, null, !1);
-      p.push(...I);
-      const j = gi(m, [o]), H = (B = s.getDrawings()) != null ? B : {}, E = (R = s.getDrawingsOrder()) != null ? R : [], W = j.sort((_, C) => E.indexOf(_) > E.indexOf(C) ? -1 : E.indexOf(_) < E.indexOf(C) ? 1 : 0);
-      if (W.length > 0)
-        for (const _ of W) {
-          const C = H[_], M = E.indexOf(_);
-          if (C == null || M < 0)
-            continue;
-          const x = h.removeOp(["drawings", _], C), L = h.removeOp(["drawingsOrder", M], _);
-          v.push(x), v.push(L), S++;
-        }
-    }
-    p.push({
-      t: Y.INSERT,
-      body: {
-        dataStream: "\b".repeat(d.length),
-        customBlocks: d.map((I, j) => ({
-          startIndex: j,
-          blockId: I.drawingId
-        }))
-      },
-      len: d.length
-    });
-    const O = $e(s, f), D = h.editOp(p.serialize(), O);
-    v.push(D);
-    for (const I of d) {
-      const { drawingId: j } = I, H = h.insertOp(["drawings", j], I), E = h.insertOp(["drawingsOrder", w - S], j);
-      v.push(H), v.push(E);
-    }
-    const P = {
-      id: J.id,
-      params: {
-        unitId: c,
-        actions: [],
-        textRanges: []
-      }
-    };
-    return P.params.actions = v.reduce((I, j) => q.compose(I, j), null), !!n.syncExecuteCommand(P.id, P.params);
+  _commandExecutedListener() {
+    this.disposeWithMe(
+      this._commandService.beforeCommandExecuted((i) => {
+        if (i.id !== Z.id)
+          return;
+        const e = i.params, { unitId: n, actions: t } = e, r = Ni(t);
+        if (r != null)
+          for (const { type: o, drawingId: s, drawing: a } of r)
+            o === "add" ? this._addDrawings(n, [a]) : this._removeDrawings(n, [s]);
+      })
+    ), this.disposeWithMe(
+      this._commandService.onCommandExecuted((i) => {
+        if (i.id !== Z.id)
+          return;
+        const e = i.params, { unitId: n, actions: t } = e;
+        Ei(t).length > 0 && this._updateDrawingsOrder(n);
+      })
+    ), this.disposeWithMe(
+      this._commandService.onCommandExecuted((i) => {
+        var s;
+        if (i.id !== Tt.id && i.id !== yt.id)
+          return;
+        const e = (s = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : s.getUnitId(), n = this._drawingManagerService.getFocusDrawings();
+        if (e == null || n.length === 0)
+          return;
+        const t = this._renderManagerService.getRenderById(e), r = t == null ? void 0 : t.scene;
+        if (r == null)
+          return !1;
+        r.getTransformerByCreate().refreshControls();
+      })
+    );
   }
-}, nt = {
-  id: "doc.command.set-drawing-arrange",
-  type: X.COMMAND,
-  handler: (i, e) => {
-    const n = i.get(z), t = i.get(je);
+  _addDrawings(i, e) {
+    const n = this._drawingManagerService, t = this._docDrawingService, r = this._docDrawingService.getBatchAddOp(e), { subUnitId: o, redo: s, objects: a } = r;
+    n.applyJson1(i, o, s), t.applyJson1(i, o, s), n.addNotification(a), t.addNotification(a);
+  }
+  _removeDrawings(i, e) {
+    const n = this._drawingManagerService, t = this._docDrawingService, r = this._docDrawingService.getBatchRemoveOp(e.map((d) => ({
+      unitId: i,
+      subUnitId: i,
+      drawingId: d
+    }))), { subUnitId: o, redo: s, objects: a } = r;
+    n.applyJson1(i, o, s), t.applyJson1(i, o, s), n.removeNotification(a), t.removeNotification(a);
+  }
+  _updateDrawingsOrder(i) {
+    const e = this._univerInstanceService.getUniverDocInstance(i);
     if (e == null)
-      return !1;
-    const { unitId: r, subUnitId: o, drawingIds: s, arrangeType: c } = e, d = { unitId: r, subUnitId: o, drawingIds: s };
-    let a;
-    if (c === Ye.forward ? a = t.getForwardDrawingsOp(d) : c === Ye.backward ? a = t.getBackwardDrawingOp(d) : c === Ye.front ? a = t.getFrontDrawingsOp(d) : c === Ye.back && (a = t.getBackDrawingsOp(d)), a == null)
-      return !1;
-    const { redo: g } = a;
-    if (g == null)
-      return !1;
-    const f = [];
-    let m = xe.deepClone(g);
-    m = m.slice(3), m.unshift("drawingsOrder"), f.push(m);
-    const p = {
-      id: J.id,
-      params: {
-        unitId: r,
-        actions: [],
-        textRanges: null
-      }
+      return;
+    const n = e.getSnapshot().drawingsOrder;
+    if (n == 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
     };
-    return p.params.actions = f.reduce((v, w) => q.compose(v, w), null), !!n.syncExecuteCommand(p.id, p.params);
-  }
-}, tt = {
-  id: "doc.command.ungroup-doc-image",
-  type: X.COMMAND,
-  handler: (i, e) => {
-    i.get(z), i.get(Hn);
-    const n = i.get(je);
-    if (!e) return !1;
-    const t = [];
-    return e.forEach(({ parent: r, children: o }) => {
-      t.push(r.unitId), o.forEach((s) => {
-        t.push(s.unitId);
-      });
-    }), n.getUngroupDrawingOp(e), !1;
+    t.orderNotification(o), r.orderNotification(o);
   }
 };
-class ln {
+rn = Ri([
+  We(0, J),
+  We(1, z),
+  We(2, ve),
+  We(3, je),
+  We(4, Q)
+], rn);
+class gn {
   constructor() {
-    Se(this, "_refreshDrawings$", new _i(null));
+    Se(this, "_refreshDrawings$", new Ci(null));
     Se(this, "refreshDrawings$", this._refreshDrawings$.asObservable());
   }
   refreshDrawings(e) {
     this._refreshDrawings$.next(e);
   }
 }
-var Ri = Object.defineProperty, Ni = Object.getOwnPropertyDescriptor, Ai = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? Ni(e, n) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (t ? s(e, n, r) : s(r)) || r);
-  return t && r && Ri(e, n, r), r;
-}, ge = (i, e) => (n, t) => e(n, t, i);
-let tn = class extends qe {
-  constructor(i, e, n, t, r, o, s, c, d, a, g, f, m) {
-    super(), this._context = i, this._commandService = e, this._docSelectionManagerService = n, this._renderManagerSrv = t, this._imageIoService = r, this._docDrawingService = o, this._drawingManagerService = s, this._contextService = c, this._messageService = d, this._localeService = a, this._docSelectionRenderService = g, this._docRefreshDrawingsService = f, this._fileOpenerService = m, this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener(), this._transformDrawingListener(), this._editAreaChangeListener();
-  }
-  async insertDocImage() {
-    const i = await this._fileOpenerService.openFile({
-      multiple: !0,
-      accept: kt.map((n) => `.${n.replace("image/", "")}`).join(",")
-    }), e = i.length;
-    return e > xn ? (this._messageService.show({
-      type: An.Error,
-      content: this._localeService.t("update-status.exceedMaxCount", String(xn))
-    }), !1) : e === 0 ? !1 : (await this._insertFloatImages(i), !0);
-  }
-  // eslint-disable-next-line max-lines-per-function
-  async _insertFloatImages(i) {
-    let e = [];
-    try {
-      e = await Promise.all(i.map((r) => this._imageIoService.saveImage(r)));
-    } catch (r) {
-      const o = r.message;
-      let s = "";
-      switch (o) {
-        case hn.ERROR_EXCEED_SIZE:
-          s = this._localeService.t("update-status.exceedMaxSize", String(Ht / (1024 * 1024)));
-          break;
-        case hn.ERROR_IMAGE_TYPE:
-          s = this._localeService.t("update-status.invalidImageType");
-          break;
-        case hn.ERROR_IMAGE:
-          s = this._localeService.t("update-status.invalidImage");
-          break;
-      }
-      this._messageService.show({
-        type: An.Error,
-        content: s
-      });
-    }
-    if (e.length === 0)
-      return;
-    const { unitId: n } = this._context, t = [];
-    for (const r of e) {
-      if (r == null)
-        continue;
-      const { imageId: o, imageSourceType: s, source: c, base64Cache: d } = r, { width: a, height: g, image: f } = await Wt(d || "");
-      this._imageIoService.addImageSourceCache(o, s, f);
-      let m = 1;
-      if (a > Tn || g > yn) {
-        const w = Tn / a, S = yn / g;
-        m = Math.min(w, S);
-      }
-      const p = this._getImagePosition(a * m, g * m);
-      if (p == null)
-        return;
-      const h = {
-        unitId: n,
-        subUnitId: n,
-        drawingId: o,
-        drawingType: Gt.DRAWING_IMAGE,
-        imageSourceType: s,
-        source: c,
-        transform: mi(p),
-        docTransform: p,
-        behindDoc: re.FALSE,
-        title: "",
-        description: "",
-        layoutType: k.INLINE,
-        // Insert inline drawing by default.
-        wrapText: Ve.BOTH_SIDES,
-        distB: 0,
-        distL: 0,
-        distR: 0,
-        distT: 0
-      };
-      this._isInsertInHeaderFooter() && (h.isMultiTransform = re.TRUE, h.transforms = h.transform ? [h.transform] : null), t.push(h);
-    }
-    this._commandService.executeCommand(et.id, {
-      unitId: n,
-      drawings: t
-    });
-  }
-  _isInsertInHeaderFooter() {
-    var t;
-    const { unitId: i } = this._context, e = (t = this._renderManagerSrv.getRenderById(i)) == null ? void 0 : t.with(oe).getViewModel(), n = e == null ? void 0 : e.getEditArea();
-    return n === Ue.HEADER || n === Ue.FOOTER;
-  }
-  _getImagePosition(i, e) {
-    const n = this._docSelectionRenderService.getActiveTextRange(), t = (n == null ? void 0 : n.getAbsolutePosition()) || {
-      left: 0,
-      top: 0
-    };
-    return {
-      size: {
-        width: i,
-        height: e
-      },
-      positionH: {
-        relativeFrom: ee.PAGE,
-        posOffset: t.left
-      },
-      positionV: {
-        relativeFrom: G.PARAGRAPH,
-        posOffset: 0
-      },
-      angle: 0
-    };
-  }
-  _updateOrderListener() {
-    this._drawingManagerService.featurePluginOrderUpdate$.subscribe((i) => {
-      const { unitId: e, subUnitId: n, drawingIds: t, arrangeType: r } = i;
-      this._commandService.executeCommand(nt.id, {
-        unitId: e,
-        subUnitId: n,
-        drawingIds: t,
-        arrangeType: r
-      });
-    });
-  }
-  _groupDrawingListener() {
-    this._drawingManagerService.featurePluginGroupUpdate$.subscribe((i) => {
-      this._commandService.executeCommand(Qn.id, i);
-    }), this._drawingManagerService.featurePluginUngroupUpdate$.subscribe((i) => {
-      this._commandService.executeCommand(tt.id, i);
-    });
-  }
-  _getCurrentSceneAndTransformer() {
-    const { scene: i, mainComponent: e } = this._context;
-    if (i == null || e == null)
-      return;
-    const n = i.getTransformerByCreate(), { docsLeft: t, docsTop: r } = e.getOffsetConfig();
-    return { scene: i, transformer: n, docsLeft: t, docsTop: r };
-  }
-  _transformDrawingListener() {
-    const i = this._getCurrentSceneAndTransformer();
-    if (i && i.transformer)
-      this.disposeWithMe(i.transformer.changeEnd$.pipe(zn(30)).subscribe((e) => {
-        this._docSelectionManagerService.refreshSelection();
-      }));
-    else
-      throw new Error("transformer is not init");
-  }
-  _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(nn, !1), this._docDrawingService.focusDrawing([]), e && e.resetProps({
-            zeroTop: 0,
-            zeroLeft: 0
-          });
-        else {
-          this._contextService.setContextValue(nn, !0), this._docDrawingService.focusDrawing(i), this._setDrawingSelections(i);
-          const o = this._docSelectionRenderService.getSegment(), s = this._findSegmentIdByDrawingId(i[0].drawingId);
-          o !== s && this._docSelectionRenderService.setSegment(s), e && e.resetProps({
-            zeroTop: t,
-            zeroLeft: n
-          });
-        }
-      })
-    );
-  }
-  _findSegmentIdByDrawingId(i) {
-    var s, c, d;
-    const { unit: e } = this._context, { body: n, headers: t = {}, footers: r = {} } = e.getSnapshot();
-    if (((s = n == null ? void 0 : n.customBlocks) != null ? s : []).some((a) => a.blockId === i))
-      return "";
-    for (const a of Object.keys(t))
-      if ((c = t[a].body.customBlocks) != null && c.some((g) => g.blockId === i))
-        return a;
-    for (const a of Object.keys(r))
-      if ((d = r[a].body.customBlocks) != null && d.some((g) => g.blockId === i))
-        return a;
-    return "";
-  }
-  // Update drawings edit status and opacity. You can not edit header footer images when you are editing body. and vice verse.
-  _updateDrawingsEditStatus() {
-    var c;
-    const { unit: i, scene: e, unitId: n } = this._context, t = (c = this._renderManagerSrv.getRenderById(n)) == null ? void 0 : c.with(oe).getViewModel();
-    if (t == null || i == null)
-      return;
-    const r = i.getSnapshot(), { drawings: o = {} } = r, s = t.getEditArea() === Ue.BODY;
-    for (const d of Object.keys(o)) {
-      const a = o[d], g = Vt({ unitId: n, drawingId: a.drawingId, subUnitId: n }), f = e.fuzzyMathObjects(g, !0);
-      if (f.length)
-        for (const m of f)
-          e.detachTransformerFrom(m), m.setOpacity(0.5), (s && a.isMultiTransform !== re.TRUE || !s && a.isMultiTransform === re.TRUE) && (e.attachTransformerTo(m), m.setOpacity(1));
-    }
-  }
-  _editAreaChangeListener() {
-    var n;
-    const { unitId: i } = this._context, e = (n = this._renderManagerSrv.getRenderById(i)) == null ? void 0 : n.with(oe).getViewModel();
-    e != null && (this._updateDrawingsEditStatus(), this.disposeWithMe(
-      e.editAreaChange$.subscribe(() => {
-        this._updateDrawingsEditStatus();
-      })
-    ), this._docRefreshDrawingsService.refreshDrawings$.subscribe((t) => {
-      t != null && queueMicrotask(() => {
-        this._updateDrawingsEditStatus();
-      });
-    }), this.disposeWithMe(
-      this._commandService.onCommandExecuted(async (t) => {
-        t.id === J.id && queueMicrotask(() => {
-          this._updateDrawingsEditStatus();
-        });
-      })
-    ));
-  }
-  _setDrawingSelections(i) {
-    var r, o;
-    const { unit: e } = this._context, n = (o = (r = e.getSnapshot().body) == null ? void 0 : r.customBlocks) != null ? o : [], t = i.map((s) => {
-      const c = s.drawingId, d = n.find((a) => a.blockId === c);
-      return d ? d.startIndex : null;
-    }).filter((s) => s !== null).map((s) => ({ startOffset: s, endOffset: s + 1 }));
-    this._docSelectionManagerService.replaceDocRanges(t);
-  }
-};
-tn = Ai([
-  ge(1, z),
-  ge(2, we(In)),
-  ge(3, Q),
-  ge(4, $t),
-  ge(5, je),
-  ge(6, ve),
-  ge(7, Wn),
-  ge(8, ii),
-  ge(9, we(dn)),
-  ge(10, we(ye)),
-  ge(11, we(ln)),
-  ge(12, ri)
-], tn);
-const it = {
-  id: "doc.command.insert-float-image",
-  type: X.COMMAND,
-  handler: (i) => {
-    var n, t;
-    return (t = (n = i.get(Q).getCurrentTypeOfRenderer(Te.UNIVER_DOC)) == null ? void 0 : n.with(tn).insertDocImage()) != null ? t : !1;
-  }
-};
 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 Ei = {
+const Ai = {
   inline: k.INLINE,
   wrapSquare: k.WRAP_SQUARE,
   wrapTopAndBottom: k.WRAP_TOP_AND_BOTTOM,
   inFrontOfText: k.WRAP_NONE,
   behindText: k.WRAP_NONE
 };
-function rt(i, e, n, t, r, o, s) {
+function Zn(i, e, n, t, r, o, s) {
   var p, h;
-  const c = new vn(), d = q.getInstance(), a = [], g = o.getSelfOrHeaderFooterModel(e).getBody(), f = o.getSelfOrHeaderFooterModel(i).getBody();
-  if (g == null || f == null)
+  const a = new In(), d = q.getInstance(), c = [], l = o.getSelfOrHeaderFooterModel(e).getBody(), u = o.getSelfOrHeaderFooterModel(i).getBody();
+  if (l == null || u == null)
     return;
-  const m = (h = (p = g.customBlocks) == null ? void 0 : p.find((v) => v.blockId === r)) == null ? void 0 : h.startIndex;
+  const m = (h = (p = l.customBlocks) == null ? void 0 : p.find((v) => v.blockId === r)) == null ? void 0 : h.startIndex;
   if (m != null) {
-    if (t = Math.min(f.dataStream.length - 2, t), i === e) {
-      if (t < m ? (t > 0 && c.push({
+    if (t = Math.min(u.dataStream.length - 2, t), i === e) {
+      if (t < m ? (t > 0 && a.push({
         t: Y.RETAIN,
         len: t
-      }), c.push({
+      }), a.push({
         t: Y.INSERT,
         body: {
           dataStream: "\b",
@@ -526,22 +169,22 @@ function rt(i, e, n, t, r, o, s) {
           }]
         },
         len: 1
-      }), c.push({
+      }), a.push({
         t: Y.RETAIN,
         len: m - t
-      }), c.push({
+      }), a.push({
         t: Y.DELETE,
         len: 1
-      })) : (m > 0 && c.push({
+      })) : (m > 0 && a.push({
         t: Y.RETAIN,
         len: m
-      }), c.push({
+      }), a.push({
         t: Y.DELETE,
         len: 1
-      }), t - m - 1 > 0 && c.push({
+      }), t - m - 1 > 0 && a.push({
         t: Y.RETAIN,
         len: t - m - 1
-      }), c.push({
+      }), a.push({
         t: Y.INSERT,
         body: {
           dataStream: "\b",
@@ -552,22 +195,22 @@ function rt(i, e, n, t, r, o, s) {
         },
         len: 1
       })), t !== m) {
-        const v = $e(o, e), w = d.editOp(c.serialize(), v);
-        a.push(w);
+        const v = ze(o, e), w = d.editOp(a.serialize(), v);
+        c.push(w);
       }
     } else {
-      m > 0 && c.push({
+      m > 0 && a.push({
         t: Y.RETAIN,
         len: m
-      }), c.push({
+      }), a.push({
         t: Y.DELETE,
         len: 1
       });
-      let v = $e(o, e), w = d.editOp(c.serialize(), v);
-      a.push(w), c.empty(), t > 0 && c.push({
+      let v = ze(o, e), w = d.editOp(a.serialize(), v);
+      c.push(w), a.empty(), t > 0 && a.push({
         t: Y.RETAIN,
         len: t
-      }), c.push({
+      }), a.push({
         t: Y.INSERT,
         body: {
           dataStream: "\b",
@@ -577,12 +220,12 @@ function rt(i, e, n, t, r, o, s) {
           }]
         },
         len: 1
-      }), v = $e(o, i), w = d.editOp(c.serialize(), v), a.push(w), s.setSegment(i), s.setSegmentPage(n);
+      }), v = ze(o, i), w = d.editOp(a.serialize(), v), c.push(w), s.setSegment(i), s.setSegmentPage(n);
     }
-    return a;
+    return c;
   }
 }
-const ot = {
+const Qn = {
   id: "doc.command.update-doc-drawing-wrapping-style",
   type: X.COMMAND,
   // eslint-disable-next-line max-lines-per-function, complexity
@@ -590,65 +233,65 @@ const ot = {
     var N, B;
     if (e == null)
       return !1;
-    const { drawings: n, wrappingStyle: t, unitId: r } = e, o = i.get(z), s = i.get(Z), d = i.get(Q).getRenderById(r), a = d == null ? void 0 : d.with(oe).getSkeleton().getSkeletonData(), g = d == null ? void 0 : d.with(oe).getViewModel(), f = d == null ? void 0 : d.scene, m = s.getCurrentUniverDocInstance();
-    if (m == null || a == null || f == null || g == null)
+    const { drawings: n, wrappingStyle: t, unitId: r } = e, o = i.get(z), s = i.get(J), d = i.get(Q).getRenderById(r), c = d == null ? void 0 : d.with(oe).getSkeleton().getSkeletonData(), l = d == null ? void 0 : d.with(oe).getViewModel(), u = d == null ? void 0 : d.scene, m = s.getCurrentUniverDocInstance();
+    if (m == null || c == null || u == null || l == null)
       return !1;
-    const p = g.getEditArea(), h = f.getTransformerByCreate(), { pages: v, skeHeaders: w, skeFooters: S } = a, O = q.getInstance(), D = [], { drawings: P = {} } = m.getSnapshot();
+    const p = l.getEditArea(), h = u.getTransformerByCreate(), { pages: v, skeHeaders: w, skeFooters: S } = c, O = q.getInstance(), D = [], { drawings: x = {} } = m.getSnapshot();
     for (const R of n) {
-      const { drawingId: I } = R, j = P[I].layoutType, H = Ei[t];
+      const { drawingId: I } = R, j = x[I].layoutType, H = Ai[t];
       if (j !== H) {
         const C = O.replaceOp(["drawings", I, "layoutType"], j, H);
         D.push(C);
       }
       if (t === "behindText" || t === "inFrontOfText") {
-        const C = P[I].behindDoc, M = t === "behindText" ? re.TRUE : re.FALSE;
+        const C = x[I].behindDoc, M = t === "behindText" ? re.TRUE : re.FALSE;
         if (C !== M) {
-          const x = O.replaceOp(["drawings", I, "behindDoc"], C, M);
-          D.push(x);
+          const P = O.replaceOp(["drawings", I, "behindDoc"], C, M);
+          D.push(P);
         }
       }
       if (t === "inline")
         continue;
-      let E = null, W = 0, _ = 0;
+      let A = null, W = 0, _ = 0;
       for (const C of v) {
-        const { headerId: M, footerId: x, marginTop: L, marginLeft: U, marginBottom: y, pageWidth: A, pageHeight: $ } = C;
+        const { headerId: M, footerId: P, marginTop: L, marginLeft: U, marginBottom: y, pageWidth: E, pageHeight: $ } = C;
         switch (p) {
           case Ue.HEADER: {
-            const F = (N = w.get(M)) == null ? void 0 : N.get(A);
-            F != null && F.skeDrawings.has(I) && (E = F.skeDrawings.get(I), W = F.marginTop, _ = U);
+            const F = (N = w.get(M)) == null ? void 0 : N.get(E);
+            F != null && F.skeDrawings.has(I) && (A = F.skeDrawings.get(I), W = F.marginTop, _ = U);
             break;
           }
           case Ue.FOOTER: {
-            const F = (B = S.get(x)) == null ? void 0 : B.get(A);
-            F != null && F.skeDrawings.has(I) && (E = F.skeDrawings.get(I), W = $ - y + F.marginTop, _ = U);
+            const F = (B = S.get(P)) == null ? void 0 : B.get(E);
+            F != null && F.skeDrawings.has(I) && (A = F.skeDrawings.get(I), W = $ - y + F.marginTop, _ = U);
             break;
           }
           case Ue.BODY: {
-            C.skeDrawings.has(I) && (E = C.skeDrawings.get(I), W = L, _ = U);
+            C.skeDrawings.has(I) && (A = C.skeDrawings.get(I), W = L, _ = U);
             break;
           }
         }
-        if (E != null)
+        if (A != null)
           break;
       }
-      if (E != null) {
-        const { aTop: C, aLeft: M } = E, x = P[I].docTransform.positionH;
+      if (A != null) {
+        const { aTop: C, aLeft: M } = A, P = x[I].docTransform.positionH;
         let L = M;
-        x.relativeFrom === ee.MARGIN ? L -= _ : x.relativeFrom === ee.COLUMN && (L -= E.columnLeft);
+        P.relativeFrom === ee.MARGIN ? L -= _ : P.relativeFrom === ee.COLUMN && (L -= A.columnLeft);
         const U = {
-          relativeFrom: x.relativeFrom,
+          relativeFrom: P.relativeFrom,
           posOffset: L
         };
-        if (x.posOffset !== U.posOffset) {
-          const F = O.replaceOp(["drawings", I, "docTransform", "positionH"], x, U);
+        if (P.posOffset !== U.posOffset) {
+          const F = O.replaceOp(["drawings", I, "docTransform", "positionH"], P, U);
           D.push(F);
         }
-        const y = P[I].docTransform.positionV;
-        let A = C;
-        y.relativeFrom === G.PAGE ? A += W : y.relativeFrom === G.LINE ? A -= E.lineTop : y.relativeFrom === G.PARAGRAPH && (A -= E.blockAnchorTop);
+        const y = x[I].docTransform.positionV;
+        let E = C;
+        y.relativeFrom === G.PAGE ? E += W : y.relativeFrom === G.LINE ? E -= A.lineTop : y.relativeFrom === G.PARAGRAPH && (E -= A.blockAnchorTop);
         const $ = {
           relativeFrom: y.relativeFrom,
-          posOffset: A
+          posOffset: E
         };
         if (y.posOffset !== $.posOffset) {
           const F = O.replaceOp(["drawings", I, "docTransform", "positionV"], y, $);
@@ -657,7 +300,7 @@ const ot = {
       }
     }
     const b = {
-      id: J.id,
+      id: Z.id,
       params: {
         unitId: r,
         actions: [],
@@ -668,87 +311,87 @@ const ot = {
     const T = o.syncExecuteCommand(b.id, b.params);
     return h.refreshControls(), !!T;
   }
-}, st = {
+}, et = {
   id: "doc.command.update-doc-drawing-distance",
   type: X.COMMAND,
   handler: (i, e) => {
     if (e == null)
       return !1;
-    const n = i.get(z), r = i.get(Z).getCurrentUniverDocInstance();
+    const n = i.get(z), r = i.get(J).getCurrentUniverDocInstance();
     if (r == null)
       return !1;
-    const { drawings: o, dist: s, unitId: c } = e, d = q.getInstance(), a = [], { drawings: g = {} } = r.getSnapshot();
+    const { drawings: o, dist: s, unitId: a } = e, d = q.getInstance(), c = [], { drawings: l = {} } = r.getSnapshot();
     for (const p of o) {
       const { drawingId: h } = p;
       for (const [v, w] of Object.entries(s)) {
-        const S = g[h][v];
+        const S = l[h][v];
         if (S !== w) {
           const O = d.replaceOp(["drawings", h, v], S, w);
-          a.push(O);
+          c.push(O);
         }
       }
     }
-    const f = {
-      id: J.id,
+    const u = {
+      id: Z.id,
       params: {
-        unitId: c,
+        unitId: a,
         actions: [],
         textRanges: null
       }
     };
-    return f.params.actions = a.reduce((p, h) => q.compose(p, h), null), !!n.syncExecuteCommand(f.id, f.params);
+    return u.params.actions = c.reduce((p, h) => q.compose(p, h), null), !!n.syncExecuteCommand(u.id, u.params);
   }
-}, at = {
+}, nt = {
   id: "doc.command.update-doc-drawing-wrap-text",
   type: X.COMMAND,
   handler: (i, e) => {
     if (e == null)
       return !1;
-    const n = i.get(z), r = i.get(Z).getCurrentUniverDocInstance();
+    const n = i.get(z), r = i.get(J).getCurrentUniverDocInstance();
     if (r == null)
       return !1;
-    const { drawings: o, wrapText: s, unitId: c } = e, d = q.getInstance(), a = [], { drawings: g = {} } = r.getSnapshot();
+    const { drawings: o, wrapText: s, unitId: a } = e, d = q.getInstance(), c = [], { drawings: l = {} } = r.getSnapshot();
     for (const p of o) {
-      const { drawingId: h } = p, v = g[h].wrapText;
+      const { drawingId: h } = p, v = l[h].wrapText;
       if (v !== s) {
         const w = d.replaceOp(["drawings", h, "wrapText"], v, s);
-        a.push(w);
+        c.push(w);
       }
     }
-    const f = {
-      id: J.id,
+    const u = {
+      id: Z.id,
       params: {
-        unitId: c,
+        unitId: a,
         actions: [],
         textRanges: null
       }
     };
-    return f.params.actions = a.reduce((p, h) => q.compose(p, h), null), !!n.syncExecuteCommand(f.id, f.params);
+    return u.params.actions = c.reduce((p, h) => q.compose(p, h), null), !!n.syncExecuteCommand(u.id, u.params);
   }
-}, ze = {
+}, qe = {
   id: "doc.command.update-drawing-doc-transform",
   type: X.COMMAND,
   handler: (i, e) => {
     if (e == null)
       return !1;
-    const n = i.get(z), t = i.get(Z), o = i.get(Q).getRenderById(e.unitId), s = o == null ? void 0 : o.scene;
+    const n = i.get(z), t = i.get(J), o = i.get(Q).getRenderById(e.unitId), s = o == null ? void 0 : o.scene;
     if (s == null)
       return !1;
-    const c = s.getTransformerByCreate(), d = t.getCurrentUniverDocInstance();
+    const a = s.getTransformerByCreate(), d = t.getCurrentUniverDocInstance();
     if (d == null)
       return !1;
-    const { drawings: a, unitId: g } = e, f = q.getInstance(), m = [], { drawings: p = {} } = d.getSnapshot();
-    for (const w of a) {
-      const { drawingId: S, key: O, value: D } = w, P = p[S].docTransform[O];
-      if (!xe.diffValue(P, D)) {
-        const b = f.replaceOp(["drawings", S, "docTransform", O], P, D);
+    const { drawings: c, unitId: l } = e, u = q.getInstance(), m = [], { drawings: p = {} } = d.getSnapshot();
+    for (const w of c) {
+      const { drawingId: S, key: O, value: D } = w, x = p[S].docTransform[O];
+      if (!Pe.diffValue(x, D)) {
+        const b = u.replaceOp(["drawings", S, "docTransform", O], x, D);
         m.push(b);
       }
     }
     const h = {
-      id: J.id,
+      id: Z.id,
       params: {
-        unitId: g,
+        unitId: l,
         actions: [],
         textRanges: null,
         debounce: !0
@@ -756,38 +399,38 @@ const ot = {
     };
     h.params.actions = m.reduce((w, S) => q.compose(w, S), null);
     const v = n.syncExecuteCommand(h.id, h.params);
-    return c.refreshControls(), !!v;
+    return a.refreshControls(), !!v;
   }
-}, ct = {
+}, tt = {
   id: "doc.command.move-inline-drawing",
   type: X.COMMAND,
   handler: (i, e) => {
     var B, R;
     if (e == null)
       return !1;
-    const n = i.get(Q), t = (B = n.getRenderById(e.unitId)) == null ? void 0 : B.with(ye), r = i.get(ln), o = n.getRenderById(e.unitId), s = o == null ? void 0 : o.scene, c = o == null ? void 0 : o.with(oe).getSkeleton();
+    const n = i.get(Q), t = (B = n.getRenderById(e.unitId)) == null ? void 0 : B.with(ye), r = i.get(gn), o = n.getRenderById(e.unitId), s = o == null ? void 0 : o.scene, a = o == null ? void 0 : o.with(oe).getSkeleton();
     if (s == null || t == null)
       return !1;
-    const d = s.getTransformerByCreate(), a = i.get(z), f = i.get(Z).getCurrentUniverDocInstance();
-    if (f == null)
+    const d = s.getTransformerByCreate(), c = i.get(z), u = i.get(J).getCurrentUniverDocInstance();
+    if (u == null)
       return !1;
     const { drawing: m, unitId: p, offset: h, segmentId: v, segmentPage: w, needRefreshDrawings: S } = e;
     if (S)
-      return r.refreshDrawings(c), d.refreshControls(), !0;
-    const O = [], { drawingId: D } = m, P = (R = t.getSegment()) != null ? R : "", b = rt(
+      return r.refreshDrawings(a), d.refreshControls(), !0;
+    const O = [], { drawingId: D } = m, x = (R = t.getSegment()) != null ? R : "", b = Zn(
       v,
-      P,
+      x,
       w,
       h,
       D,
-      f,
+      u,
       t
     );
     if (b == null || b.length === 0)
-      return r.refreshDrawings(c), d.refreshControls(), !1;
+      return r.refreshDrawings(a), d.refreshControls(), !1;
     O.push(...b);
     const T = {
-      id: J.id,
+      id: Z.id,
       params: {
         unitId: p,
         actions: [],
@@ -795,1435 +438,1798 @@ const ot = {
       }
     };
     T.params.actions = O.reduce((I, j) => q.compose(I, j), null);
-    const N = a.syncExecuteCommand(T.id, T.params);
+    const N = c.syncExecuteCommand(T.id, T.params);
     return d.refreshControls(), !!N;
   }
-}, dt = {
+}, it = {
   id: "doc.command.transform-non-inline-drawing",
   type: X.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: (i, e) => {
-    var E, W;
+    var A, W;
     if (e == null)
       return !1;
-    const n = i.get(Q), t = (E = n.getRenderById(e.unitId)) == null ? void 0 : E.with(ye), r = n.getRenderById(e.unitId), o = r == null ? void 0 : r.scene;
+    const n = i.get(Q), t = (A = n.getRenderById(e.unitId)) == null ? void 0 : A.with(ye), r = n.getRenderById(e.unitId), o = r == null ? void 0 : r.scene;
     if (o == null || t == null)
       return !1;
-    const s = o.getTransformerByCreate(), c = i.get(z), a = i.get(Z).getCurrentUniverDocInstance();
-    if (a == null)
+    const s = o.getTransformerByCreate(), a = i.get(z), c = i.get(J).getCurrentUniverDocInstance();
+    if (c == null)
       return !1;
-    const { drawing: g, unitId: f, offset: m, docTransform: p, segmentId: h, segmentPage: v } = e, w = [], { drawingId: S } = g, O = (W = t.getSegment()) != null ? W : "", D = rt(
+    const { drawing: l, unitId: u, offset: m, docTransform: p, segmentId: h, segmentPage: v } = e, w = [], { drawingId: S } = l, O = (W = t.getSegment()) != null ? W : "", D = Zn(
       h,
       O,
       v,
       m,
       S,
-      a,
+      c,
       t
     );
     if (D == null)
       return !1;
     D.length > 0 && w.push(...D);
-    const P = q.getInstance(), { drawings: b = {} } = a.getSnapshot(), T = b[S].docTransform, { positionH: N, positionV: B, size: R, angle: I } = T;
-    if (!xe.diffValue(N, p.positionH)) {
-      const _ = P.replaceOp(["drawings", S, "docTransform", "positionH"], N, p.positionH);
+    const x = q.getInstance(), { drawings: b = {} } = c.getSnapshot(), T = b[S].docTransform, { positionH: N, positionV: B, size: R, angle: I } = T;
+    if (!Pe.diffValue(N, p.positionH)) {
+      const _ = x.replaceOp(["drawings", S, "docTransform", "positionH"], N, p.positionH);
       w.push(_);
     }
-    if (!xe.diffValue(B, p.positionV)) {
-      const _ = P.replaceOp(["drawings", S, "docTransform", "positionV"], B, p.positionV);
+    if (!Pe.diffValue(B, p.positionV)) {
+      const _ = x.replaceOp(["drawings", S, "docTransform", "positionV"], B, p.positionV);
       w.push(_);
     }
-    if (!xe.diffValue(R, p.size)) {
-      const _ = P.replaceOp(["drawings", S, "docTransform", "size"], R, p.size);
+    if (!Pe.diffValue(R, p.size)) {
+      const _ = x.replaceOp(["drawings", S, "docTransform", "size"], R, p.size);
       w.push(_);
     }
-    if (!xe.diffValue(I, p.angle)) {
-      const _ = P.replaceOp(["drawings", S, "docTransform", "angle"], I, p.angle);
+    if (!Pe.diffValue(I, p.angle)) {
+      const _ = x.replaceOp(["drawings", S, "docTransform", "angle"], I, p.angle);
       w.push(_);
     }
     const j = {
-      id: J.id,
+      id: Z.id,
       params: {
-        unitId: f,
+        unitId: u,
         actions: [],
         textRanges: null,
         debounce: !0
       }
     };
     j.params.actions = w.reduce((_, C) => q.compose(_, C), null);
-    const H = c.syncExecuteCommand(j.id, j.params);
+    const H = a.syncExecuteCommand(j.id, j.params);
     return s.refreshControls(), !!H;
   }
-}, Xe = {
-  id: "doc.command.move-drawing",
-  type: X.COMMAND,
-  handler: (i, e) => {
-    const n = i.get(z), t = i.get(je), r = i.get(Z), o = i.get(Q), { direction: s } = e, c = t.getFocusDrawings();
-    if (c.length === 0)
-      return !1;
-    const d = c[0].unitId, a = o.getRenderById(d), g = a == null ? void 0 : a.scene;
-    if (g == null)
-      return !1;
-    const f = g.getTransformerByCreate(), m = r.getUniverDocInstance(d), p = c.map((v) => {
-      var T, N, B, R, I;
-      const { drawingId: w } = v, S = (T = m == null ? void 0 : m.getSnapshot().drawings) == null ? void 0 : T[w];
-      if (S == null || S.layoutType === k.INLINE)
-        return null;
-      const { positionH: O, positionV: D } = S.docTransform, P = { ...O }, b = { ...D };
-      return s === ue.UP ? b.posOffset = ((N = b.posOffset) != null ? N : 0) - 2 : s === ue.DOWN ? b.posOffset = ((B = b.posOffset) != null ? B : 0) + 2 : s === ue.LEFT ? P.posOffset = ((R = P.posOffset) != null ? R : 0) - 2 : s === ue.RIGHT && (P.posOffset = ((I = P.posOffset) != null ? I : 0) + 2), {
-        drawingId: w,
-        key: s === ue.UP || s === ue.DOWN ? "positionV" : "positionH",
-        value: s === ue.UP || s === ue.DOWN ? b : P
-      };
-    }).filter((v) => v != null);
-    if (p.length === 0)
-      return !1;
-    const h = n.syncExecuteCommand(ze.id, {
-      unitId: d,
-      subUnitId: d,
-      drawings: p
-    });
-    return f.refreshControls(), !!h;
-  }
-}, ji = {
-  id: "doc.operation.clear-drawing-transformer",
-  type: X.MUTATION,
-  handler: (i, e) => {
-    const n = i.get(Q);
-    return e.forEach((t) => {
-      var r, o;
-      (o = (r = n.getRenderById(t)) == null ? void 0 : r.scene.getTransformer()) == null || o.debounceRefreshControls();
-    }), !0;
+};
+var ji = Object.defineProperty, Li = Object.getOwnPropertyDescriptor, Bi = (i, e, n, t) => {
+  for (var r = t > 1 ? void 0 : t ? Li(e, n) : e, o = i.length - 1, s; o >= 0; o--)
+    (s = i[o]) && (r = (t ? s(e, n, r) : s(r)) || r);
+  return t && r && ji(e, n, r), r;
+}, Ze = (i, e) => (n, t) => e(n, t, i);
+const Ui = "__InlineDrawingAnchor__";
+function Fn(i) {
+  const { path: e } = i;
+  return e.some((n) => n === "cells");
+}
+let on = class extends Xe {
+  constructor(e, n, t, r) {
+    super();
+    Se(this, "_liquid", new zn());
+    Se(this, "_listenerOnImageMap", /* @__PURE__ */ new Set());
+    // Use to cache the drawings is under transforming or scaling.
+    Se(this, "_transformerCache", /* @__PURE__ */ new Map());
+    Se(this, "_anchorShape");
+    this._commandService = e, this._univerInstanceService = n, this._drawingManagerService = t, this._renderManagerService = r, this._init();
   }
-}, lt = "COMPONENT_DOC_DRAWING_PANEL", gt = {
-  id: "sidebar.operation.doc-image",
-  type: X.COMMAND,
-  handler: async (i, e) => {
-    const n = i.get(oi), t = i.get(dn), r = i.get(ve);
-    switch (e.value) {
-      case "open":
-        n.open({
-          header: { title: t.t("docImage.panel.title") },
-          children: { label: lt },
-          onClose: () => {
-            r.focusDrawing(null);
-          },
-          width: 360
-        });
-        break;
-      case "close":
-      default:
-        n.close();
-        break;
-    }
-    return !0;
+  _init() {
+    this._listenDrawingFocus();
   }
-}, mt = {
-  id: "doc.operation.edit-doc-image",
-  type: X.OPERATION,
-  handler: (i, e) => {
-    const n = i.get(ve), t = i.get(z);
-    return e == null ? !1 : (n.focusDrawing([e]), t.executeCommand(gt.id, { value: "open" }), !0);
+  _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));
+          }
+      })
+    );
   }
-};
-var ut = { exports: {} }, gn = {};
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var Li = Ci, Bi = Symbol.for("react.element"), Ui = Symbol.for("react.fragment"), Fi = Object.prototype.hasOwnProperty, ki = Li.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, Hi = { key: !0, ref: !0, __self: !0, __source: !0 };
-function ft(i, e, n) {
-  var t, r = {}, o = null, s = null;
-  n !== void 0 && (o = "" + n), e.key !== void 0 && (o = "" + e.key), e.ref !== void 0 && (s = e.ref);
-  for (t in e) Fi.call(e, t) && !Hi.hasOwnProperty(t) && (r[t] = e[t]);
-  if (i && i.defaultProps) for (t in e = i.defaultProps, e) r[t] === void 0 && (r[t] = e[t]);
-  return { $$typeof: Bi, type: i, key: o, ref: s, props: r, _owner: ki.current };
-}
-gn.Fragment = Ui;
-gn.jsx = ft;
-gn.jsxs = ft;
-ut.exports = gn;
-var l = ut.exports;
-function ht(i) {
-  var e, n, t = "";
-  if (typeof i == "string" || typeof i == "number") t += i;
-  else if (typeof i == "object") if (Array.isArray(i)) {
-    var r = i.length;
-    for (e = 0; e < r; e++) i[e] && (n = ht(i[e])) && (t && (t += " "), t += n);
-  } else for (n in i) i[n] && (t && (t += " "), t += n);
-  return t;
-}
-function V() {
-  for (var i, e, n = 0, t = "", r = arguments.length; n < r; n++) (i = arguments[n]) && (e = ht(i)) && (t && (t += " "), t += e);
-  return t;
-}
-const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", Vi = "univer-image-common-panel-border", $i = "univer-image-common-panel-title", zi = "univer-image-common-panel-subtitle", qi = "univer-image-common-panel-row", Xi = "univer-image-common-panel-row-vertical", Ki = "univer-image-common-panel-column", Yi = "univer-image-common-panel-column-center", Zi = "univer-image-common-panel-inline", Ji = "univer-image-common-panel-span2", Qi = "univer-image-common-panel-span3", er = "univer-image-common-panel-input", nr = "univer-sheet-image-menu", tr = "univer-sheet-image-menu-input", u = {
-  imageCommonPanel: Wi,
-  imageCommonPanelGrid: Gi,
-  imageCommonPanelBorder: Vi,
-  imageCommonPanelTitle: $i,
-  imageCommonPanelSubtitle: zi,
-  imageCommonPanelRow: qi,
-  imageCommonPanelRowVertical: Xi,
-  imageCommonPanelColumn: Ki,
-  imageCommonPanelColumnCenter: Yi,
-  imageCommonPanelInline: Zi,
-  imageCommonPanelSpan2: Ji,
-  imageCommonPanelSpan3: Qi,
-  imageCommonPanelInput: er,
-  sheetImageMenu: nr,
-  sheetImageMenuInput: tr
-}, Un = -1e3, Fn = 1e3, ir = (i) => {
-  const e = pe(z), n = pe(dn), t = pe(ve), r = pe(Q), o = pe(Z), { drawings: s } = i, c = s[0];
-  if (c == null)
-    return;
-  const { unitId: d } = c, a = o.getUniverDocInstance(d), g = a == null ? void 0 : a.getSnapshot().documentStyle.documentFlavor, f = r.getRenderById(d), m = f == null ? void 0 : f.scene;
-  if (m == null)
-    return;
-  const p = m.getTransformerByCreate(), h = [{
-    label: n.t("image-position.column"),
-    value: String(ee.COLUMN)
-  }, {
-    label: n.t("image-position.page"),
-    value: String(ee.PAGE)
-  }, {
-    label: n.t("image-position.margin"),
-    value: String(ee.MARGIN)
-  }], v = [{
-    label: n.t("image-position.line"),
-    value: String(G.LINE),
-    disabled: g === fn.MODERN
-  }, {
-    label: n.t("image-position.page"),
-    value: String(G.PAGE),
-    disabled: g === fn.MODERN
-  }, {
-    label: n.t("image-position.margin"),
-    value: String(G.MARGIN),
-    disabled: g === fn.MODERN
-  }, {
-    label: n.t("image-position.paragraph"),
-    value: String(G.PARAGRAPH)
-  }], [w, S] = ie(!0), [O, D] = ie({
-    relativeFrom: ee.PAGE,
-    posOffset: 0
-  }), [P, b] = ie({
-    relativeFrom: G.PAGE,
-    posOffset: 0
-  }), [T, N] = ie(!0), [B, R] = ie(!0);
-  function I(C, M) {
-    var y;
-    C === "positionH" ? D(M) : b(M);
-    const x = t.getFocusDrawings();
-    if (x.length === 0)
+  // 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)
       return;
-    const L = x.map((A) => ({
-      unitId: A.unitId,
-      subUnitId: A.subUnitId,
-      drawingId: A.drawingId
-    }));
-    e.executeCommand(ze.id, {
-      unitId: x[0].unitId,
-      subUnitId: x[0].unitId,
-      drawings: L.map((A) => ({
-        drawingId: A.drawingId,
-        key: C,
-        value: M
-      }))
-    });
-    const U = (y = r.getRenderById(d)) == null ? void 0 : y.with(ye);
-    U && U.blur(), p.refreshControls();
+    this.disposeWithMe(
+      Ae(
+        n.changeStart$.subscribe((o) => {
+          var a;
+          this._transformerCache.clear();
+          const { objects: s } = o;
+          for (const d of s.values()) {
+            const { oKey: c, width: l, height: u, left: m, top: p, angle: h } = d, v = this._drawingManagerService.getDrawingOKey(c);
+            if (v == null)
+              continue;
+            const w = this._univerInstanceService.getUniverDocInstance(v.unitId), S = (a = w == null ? void 0 : w.getSnapshot().drawings) == null ? void 0 : a[v.drawingId];
+            (S == null ? void 0 : S.layoutType) === k.INLINE && d.setOpacity(0.2), S != null && this._transformerCache.set(v.drawingId, {
+              drawing: S,
+              top: p,
+              left: m,
+              width: l,
+              height: u,
+              angle: h
+            });
+          }
+        })
+      )
+    );
+    const t = xn(this._updateMultipleDrawingDocTransform.bind(this), 50);
+    xn(this._nonInlineDrawingTransform.bind(this), 50), this.disposeWithMe(
+      Ae(
+        n.changing$.subscribe((o) => {
+          const { objects: s, offsetX: a, offsetY: d } = o;
+          if (s.size > 1)
+            t(s);
+          else if (s.size === 1) {
+            const c = this._transformerCache.values().next().value, l = s.values().next().value, { width: u, height: m, top: p, left: h, angle: v } = l;
+            if (c && u === c.width && m === c.height && p === c.top && h === c.left && v === c.angle)
+              return;
+            c && (c.drawing.layoutType, k.INLINE), c && c.drawing.layoutType === k.INLINE && a != null && d != null && this._updateInlineDrawingAnchor(c.drawing, a, d);
+          }
+        })
+      )
+    ), this.disposeWithMe(
+      Ae(
+        // eslint-disable-next-line complexity
+        n.changeEnd$.subscribe((o) => {
+          const { objects: s, offsetX: a, offsetY: d } = o;
+          for (const c of s.values()) {
+            const l = this._drawingManagerService.getDrawingOKey(c.oKey);
+            if (l == null)
+              continue;
+            const u = this._transformerCache.get(l == null ? void 0 : l.drawingId);
+            (u == null ? void 0 : u.drawing.layoutType) === k.INLINE && c.setOpacity(1);
+          }
+          if (this._anchorShape && this._anchorShape.hide(), s.size > 1)
+            this._updateMultipleDrawingDocTransform(s);
+          else if (s.size === 1) {
+            const c = this._transformerCache.values().next().value, l = s.values().next().value, { width: u, height: m, top: p, left: h, angle: v } = l;
+            if (c && u === c.width && m === c.height && p === c.top && h === c.left && v === c.angle)
+              return;
+            c && c.drawing.layoutType === k.INLINE ? u !== c.width || m !== c.height || v !== c.angle ? this._updateDrawingSize(c, l) : a != null && d != null && this._moveInlineDrawing(c.drawing, a, d) : c && this._nonInlineDrawingTransform(c.drawing, l);
+          }
+          this._transformerCache.clear();
+        })
+      )
+    );
   }
-  function j(C) {
-    var te, Ie, _e;
-    const M = O.relativeFrom, x = O.posOffset, L = Number(C);
-    if (M === L)
-      return;
-    const U = t.getFocusDrawings();
-    if (U.length === 0)
-      return;
-    const y = U[0].drawingId, A = U[0].unitId;
-    let $ = null, F = 0;
-    const K = (te = r.getRenderById(A)) == null ? void 0 : te.with(oe).getSkeleton(), se = K == null ? void 0 : K.getSkeletonData();
-    if (se == null)
+  // eslint-disable-next-line max-lines-per-function
+  _updateMultipleDrawingDocTransform(e) {
+    if (e.size < 1)
       return;
-    const { pages: Le, skeHeaders: be, skeFooters: ke } = se;
-    for (const ce of Le) {
-      const { marginLeft: Ce, skeDrawings: De, headerId: Me, footerId: Re, pageWidth: Oe } = ce;
-      if (De.has(y)) {
-        $ = De.get(y), F = Ce;
-        break;
-      }
-      const de = (Ie = be.get(Me)) == null ? void 0 : Ie.get(Oe);
-      if (de != null && de.skeDrawings.has(y)) {
-        $ = de == null ? void 0 : de.skeDrawings.get(y), F = Ce;
-        break;
-      }
-      const le = (_e = ke.get(Re)) == null ? void 0 : _e.get(Oe);
-      if (le != null && le.skeDrawings.has(y)) {
-        $ = le == null ? void 0 : le.skeDrawings.get(y), F = Ce;
-        break;
+    const n = [];
+    let t, r;
+    for (const o of e.values()) {
+      const { oKey: s, left: a, top: d, angle: c } = o;
+      let { width: l, height: u } = o;
+      const m = this._drawingManagerService.getDrawingOKey(s);
+      if (m == null)
+        continue;
+      t == null && (t = m.unitId), r == null && (r = m.subUnitId);
+      const p = this._transformerCache.get(m.drawingId);
+      if (p == null)
+        continue;
+      const { drawing: h, top: v, left: w, width: S, height: O, angle: D } = p, { width: x, height: b } = this._getPageContentSize(h);
+      if (l = Math.min(l, x), u = Math.min(u, b), (S !== l || O !== u) && n.push({
+        drawingId: m.drawingId,
+        key: "size",
+        value: {
+          width: l,
+          height: u
+        }
+      }), D !== c && n.push({
+        drawingId: m.drawingId,
+        key: "angle",
+        value: c
+      }), v !== d || w !== a) {
+        const T = d - v, N = a - w;
+        T !== 0 && n.push({
+          drawingId: m.drawingId,
+          key: "positionV",
+          value: {
+            relativeFrom: h.docTransform.positionV.relativeFrom,
+            posOffset: h.docTransform.positionV.posOffset + T
+          }
+        }), N !== 0 && n.push({
+          drawingId: m.drawingId,
+          key: "positionH",
+          value: {
+            relativeFrom: h.docTransform.positionH.relativeFrom,
+            posOffset: h.docTransform.positionH.posOffset + N
+          }
+        });
       }
     }
-    if ($ == null)
+    n.length > 0 && t && r && this._commandService.executeCommand(qe.id, {
+      unitId: t,
+      subUnitId: r,
+      drawings: n
+    });
+  }
+  // TODO: @JOCS, Use to draw and update the drawing anchor.
+  _updateDrawingAnchor(e) {
+    if (this._transformerCache.size !== 1)
       return;
-    let ae = 0;
-    M === ee.COLUMN ? ae -= $.columnLeft : M === ee.MARGIN && (ae -= F), L === ee.COLUMN ? ae += $.columnLeft : L === ee.MARGIN ? ae += F : ee.PAGE;
-    const ne = {
-      relativeFrom: L,
-      posOffset: (x != null ? x : 0) - ae
-    };
-    I("positionH", ne);
+    const n = this._transformerCache.values().next().value, t = e.values().next().value;
+    this._getDrawingAnchor(n.drawing, t);
   }
-  function H(C) {
-    var De, Me, Re, Oe, de, le;
-    const M = P.relativeFrom, x = P.posOffset, L = Number(C);
-    if (M === L)
+  _updateInlineDrawingAnchor(e, n, t) {
+    var o;
+    if (this._transformerCache.size !== 1)
       return;
-    const U = t.getFocusDrawings();
-    if (U.length === 0)
+    const { contentBoxPointGroup: r } = (o = this._getInlineDrawingAnchor(e, n, t)) != null ? o : {};
+    r != null && this._createOrUpdateInlineAnchor(e.unitId, r);
+  }
+  _getInlineDrawingAnchor(e, n, t) {
+    var A, W;
+    const r = this._renderManagerService.getRenderById(e.unitId), o = r == null ? void 0 : r.with(oe).getSkeleton();
+    if (r == null)
       return;
-    const { drawingId: y, unitId: A } = U[0], $ = o.getUniverDocInstance(A), F = (De = r.getRenderById(A)) == null ? void 0 : De.with(oe).getSkeleton(), K = (Me = r.getRenderById(A)) == null ? void 0 : Me.with(ye), se = K == null ? void 0 : K.getSegment(), Le = K == null ? void 0 : K.getSegmentPage(), be = (Oe = (Re = $ == null ? void 0 : $.getSelfOrHeaderFooterModel(se).getBody()) == null ? void 0 : Re.customBlocks) == null ? void 0 : Oe.find((Ne) => Ne.blockId === y);
-    if (be == null || F == null || K == null)
+    const { mainComponent: s, scene: a } = r, d = s, c = a.getViewports()[0], {
+      pageLayoutType: l = Mn.VERTICAL,
+      pageMarginLeft: u,
+      pageMarginTop: m
+    } = d.getOffsetConfig();
+    let p = null, h = !1, v = -1, w = "";
+    const S = 0.5, O = this._getTransformCoordForDocumentOffset(d, c, n, t);
+    if (O == null)
       return;
-    const { startIndex: ke } = be, ae = F.findNodeByCharIndex(ke, se, Le), ne = (de = ae == null ? void 0 : ae.parent) == null ? void 0 : de.parent, te = ne == null ? void 0 : ne.parent, Ie = te == null ? void 0 : te.lines.find((Ne) => Ne.paragraphIndex === (ne == null ? void 0 : ne.paragraphIndex) && Ne.paragraphStart), _e = (le = te == null ? void 0 : te.parent) == null ? void 0 : le.parent;
-    if (ae == null || ne == null || Ie == null || te == null || _e == null)
+    const D = (A = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : A.with(ye);
+    if (D == null)
       return;
-    let ce = 0;
-    M === G.PARAGRAPH ? ce -= Ie.top : M === G.LINE ? ce -= ne.top : M === G.PAGE && (ce += _e.marginTop), L === G.PARAGRAPH ? ce += Ie.top : L === G.LINE ? ce += ne.top : L === G.PAGE && (ce -= _e.marginTop);
-    const Ce = {
-      relativeFrom: L,
-      posOffset: (x != null ? x : 0) - ce
-    };
-    I("positionV", Ce);
-  }
-  function E(C) {
-    var A;
-    const M = a == null ? void 0 : a.getSnapshot(), x = (A = M == null ? void 0 : M.drawings) == null ? void 0 : A[C.drawingId];
-    if (x == null)
+    const x = o == null ? void 0 : o.findNodeByCoord(
+      O,
+      l,
+      u,
+      m,
+      {
+        strict: !1,
+        segmentId: D.getSegment(),
+        segmentPage: D.getSegmentPage()
+      }
+    );
+    if (x) {
+      const { node: _, ratioX: C, segmentPage: M, segmentId: P } = x;
+      h = C < S, p = _, v = M, w = P;
+    }
+    if (p == null)
       return;
-    const { layoutType: L } = x, {
-      positionH: U,
-      positionV: y
-    } = x.docTransform;
-    D(U), b(y), S(L === k.INLINE), N(y.relativeFrom === G.PARAGRAPH || y.relativeFrom === G.LINE);
-  }
-  function W() {
-    const C = t.getFocusDrawings();
-    C.length !== 0 && E(C[0]);
-  }
-  function _(C) {
-    N(C), H(String(C ? G.PARAGRAPH : G.PAGE));
+    const b = o == null ? void 0 : o.findPositionByGlyph(p, v), T = this._getDocObject();
+    if (b == null || o == null || T == null || Fn(b))
+      return;
+    const N = {
+      ...b,
+      isBack: h
+    }, B = T.document.getOffsetConfig(), R = new Nn(B, o), { cursorList: I, contentBoxPointGroup: j } = R.getRangePointData(N, N), { startOffset: H } = (W = En(I)) != null ? W : {};
+    if (H != null)
+      return { offset: H, contentBoxPointGroup: j, segmentId: w, segmentPage: v };
   }
-  return _n(() => {
-    W();
-    const C = t.focus$.subscribe((x) => {
-      if (x.length === 0) {
-        R(!1);
-        return;
-      }
-      R(!0), E(x[0]);
-    }), M = e.onCommandExecuted(async (x) => {
-      x.id === J.id && W();
-    });
-    return () => {
-      C.unsubscribe(), M.dispose();
-    };
-  }, []), /* @__PURE__ */ l.jsxs("div", { className: V(u.imageCommonPanelGrid, u.imageCommonPanelBorder), style: { display: B ? "block" : "none" }, children: [
-    /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelTitle), children: /* @__PURE__ */ l.jsx("div", { children: n.t("image-position.title") }) }) }),
-    /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSubtitle), children: /* @__PURE__ */ l.jsx("div", { children: n.t("image-position.horizontal") }) }) }),
-    /* @__PURE__ */ l.jsxs("div", { className: u.imageCommonPanelRow, children: [
-      /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: /* @__PURE__ */ l.jsxs("label", { children: [
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: n.t("image-position.absolutePosition") }) }),
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: /* @__PURE__ */ l.jsx(
-          Be,
-          {
-            min: Un,
-            max: Fn,
-            precision: 1,
-            disabled: w,
-            value: O.posOffset,
-            onChange: (C) => {
-              I("positionH", {
-                relativeFrom: O.relativeFrom,
-                posOffset: C
+  // eslint-disable-next-line max-lines-per-function, complexity
+  _getDrawingAnchor(e, n) {
+    var Ie, _e, ce, Ce, De, Me, Re, Oe, de, le, Ne;
+    const t = this._renderManagerService.getRenderById(e.unitId), r = t == null ? void 0 : t.with(oe).getSkeleton(), o = r == null ? void 0 : r.getSkeletonData();
+    if (o == null || t == null)
+      return;
+    const { pages: s, skeHeaders: a, skeFooters: d } = o, { mainComponent: c, scene: l } = t, u = c, m = l.getViewports()[0], { pageLayoutType: p = Mn.VERTICAL, pageMarginLeft: h, pageMarginTop: v, docsLeft: w, docsTop: S } = u.getOffsetConfig(), { left: O, top: D, angle: x } = n;
+    let { width: b, height: T } = n;
+    const { positionV: N, positionH: B } = e.docTransform, { width: R, height: I } = this._getPageContentSize(e);
+    b = Math.min(b, R), T = Math.min(T, I);
+    let j = null, H = "", A = -1;
+    const W = !1, _ = {
+      ...e.docTransform,
+      size: {
+        width: b,
+        height: T
+      },
+      angle: x
+    }, { x: C, y: M } = l.getViewportScrollXY(m), P = this._getTransformCoordForDocumentOffset(u, m, O - C, D - M);
+    if (P == null)
+      return;
+    const L = (Ie = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : Ie.with(ye);
+    if (L == null)
+      return;
+    const U = r == null ? void 0 : r.findNodeByCoord(P, p, h, v, {
+      strict: !1,
+      segmentId: L.getSegment(),
+      segmentPage: L.getSegmentPage()
+    });
+    if (U) {
+      const { node: he, segmentPage: mn, segmentId: un } = U;
+      j = he, A = mn, H = un;
+    }
+    if (j == null)
+      return;
+    const y = (_e = j.parent) == null ? void 0 : _e.parent, E = y == null ? void 0 : y.parent, $ = (ce = E == null ? void 0 : E.lines.find((he) => he.paragraphIndex === (y == null ? void 0 : y.paragraphIndex) && he.paragraphStart)) != null ? ce : E == null ? void 0 : E.lines[0], F = (Ce = E == null ? void 0 : E.parent) == null ? void 0 : Ce.parent;
+    if (y == null || E == null || $ == null || F == null)
+      return;
+    this._liquid.reset();
+    const K = F.type;
+    for (const he of s) {
+      const { headerId: mn, footerId: un, pageHeight: Ct, pageWidth: Dn, marginLeft: On, marginBottom: Dt } = he, Ot = s.indexOf(he);
+      if (A > -1 && Ot === A) {
+        switch (K) {
+          case Rn.HEADER: {
+            const He = (De = a.get(mn)) == null ? void 0 : De.get(Dn);
+            if (He)
+              this._liquid.translatePagePadding({
+                marginTop: He.marginTop,
+                marginLeft: On
               });
-            },
-            className: u.imageCommonPanelInput
-          }
-        ) }) })
-      ] }) }),
-      /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: /* @__PURE__ */ l.jsxs("label", { children: [
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: n.t("image-position.toTheRightOf") }) }),
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: /* @__PURE__ */ l.jsx(
-          En,
-          {
-            value: String(O.relativeFrom),
-            disabled: w,
-            options: h,
-            onChange: j
+            else
+              throw new Error("header skeleton not found");
+            break;
           }
-        ) }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSubtitle), children: /* @__PURE__ */ l.jsx("div", { children: n.t("image-position.vertical") }) }) }),
-    /* @__PURE__ */ l.jsxs("div", { className: u.imageCommonPanelRow, children: [
-      /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: /* @__PURE__ */ l.jsxs("label", { children: [
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: n.t("image-position.absolutePosition") }) }),
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: /* @__PURE__ */ l.jsx(
-          Be,
-          {
-            min: Un,
-            max: Fn,
-            precision: 1,
-            disabled: w,
-            value: P.posOffset,
-            onChange: (C) => {
-              I("positionV", {
-                relativeFrom: P.relativeFrom,
-                posOffset: C
+          case Rn.FOOTER: {
+            const He = (Me = d.get(un)) == null ? void 0 : Me.get(Dn);
+            if (He)
+              this._liquid.translatePagePadding({
+                marginTop: Ct - Dt + He.marginTop,
+                marginLeft: On
               });
-            },
-            className: u.imageCommonPanelInput
-          }
-        ) }) })
-      ] }) }),
-      /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: /* @__PURE__ */ l.jsxs("label", { children: [
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: n.t("image-position.bellow") }) }),
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: /* @__PURE__ */ l.jsx(
-          En,
-          {
-            disabled: w,
-            value: String(P.relativeFrom),
-            options: v,
-            onChange: H
+            else
+              throw new Error("footer skeleton not found");
+            break;
           }
-        ) }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSubtitle), children: /* @__PURE__ */ l.jsx("div", { children: n.t("image-position.options") }) }) }),
-    /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, style: { marginBottom: "50px" }, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: /* @__PURE__ */ l.jsx(Ii, { disabled: w, checked: T, onChange: _, children: n.t("image-position.moveObjectWithText") }) }) })
-  ] });
-}, Ze = 0, Je = 100, rr = (i) => {
-  const e = pe(z), n = pe(dn), t = pe(ve), r = pe(Q), o = pe(Z), { drawings: s } = i, c = s[0];
-  if (c == null)
-    return null;
-  const { unitId: d } = c, a = o.getUniverDocInstance(d), g = r.getRenderById(d);
-  if ((g == null ? void 0 : g.scene) == null)
-    return null;
-  const [m, p] = ie(!0), [h, v] = ie(!0), [w, S] = ie(!0), [O, D] = ie(me.INLINE), [P, b] = ie(""), [T, N] = ie({
-    distT: 0,
-    distL: 0,
-    distB: 0,
-    distR: 0
-  }), [B, R] = ie(!0);
-  function I(_) {
-    D(_);
-    const C = t.getFocusDrawings();
-    if (C.length === 0)
+        }
+        break;
+      }
+      if (this._liquid.translatePagePadding(he), he === F)
+        break;
+      this._liquid.restorePagePadding(he), this._liquid.translatePage(he, p, h, v);
+    }
+    switch (N.relativeFrom === G.LINE ? j = y.divides[0].glyphGroup[0] : j = (le = (de = (Oe = (Re = $.divides) == null ? void 0 : Re[0]) == null ? void 0 : Oe.glyphGroup) == null ? void 0 : de[0]) != null ? le : j, _.positionH = {
+      relativeFrom: B.relativeFrom,
+      posOffset: O - this._liquid.x - w
+    }, B.relativeFrom) {
+      case ee.MARGIN: {
+        _.positionH.posOffset = O - this._liquid.x - w - F.marginLeft;
+        break;
+      }
+      case ee.COLUMN: {
+        _.positionH.posOffset = O - this._liquid.x - w - E.left;
+        break;
+      }
+    }
+    switch (_.positionV = {
+      relativeFrom: N.relativeFrom,
+      posOffset: D - this._liquid.y - S
+    }, N.relativeFrom) {
+      case G.PAGE: {
+        _.positionV.posOffset = D - this._liquid.y - S - F.marginTop;
+        break;
+      }
+      case G.LINE: {
+        _.positionV.posOffset = D - this._liquid.y - S - y.top;
+        break;
+      }
+      case G.PARAGRAPH: {
+        _.positionV.posOffset = D - this._liquid.y - S - $.top;
+        break;
+      }
+    }
+    if (j == null)
       return;
-    const { unitId: M, subUnitId: x } = C[0], L = C.map(({ unitId: U, subUnitId: y, drawingId: A }) => ({
-      unitId: U,
-      subUnitId: y,
-      drawingId: A
-    }));
-    e.executeCommand(ot.id, {
-      unitId: M,
-      subUnitId: x,
-      drawings: L,
-      wrappingStyle: _
+    const se = r == null ? void 0 : r.findPositionByGlyph(j, A), Le = this._getDocObject();
+    if (se == null || r == null || Le == null || Fn(se))
+      return;
+    const be = {
+      ...se,
+      isBack: W
+    }, ke = Le.document.getOffsetConfig(), ae = new Nn(ke, r), { cursorList: ne } = ae.getRangePointData(be, be), { startOffset: te } = (Ne = En(ne)) != null ? Ne : {};
+    if (te != null)
+      return { offset: te, docTransform: _, segmentId: H, segmentPage: A };
+  }
+  // Update drawing when use transformer to resize it.
+  _updateDrawingSize(e, n) {
+    const t = [], { drawing: r, width: o, height: s, angle: a } = e, { unitId: d, subUnitId: c } = r;
+    let { width: l, height: u, angle: m } = n;
+    const { width: p, height: h } = this._getPageContentSize(r);
+    l = Math.min(p, l), u = Math.min(h, u), (l !== o || u !== s) && t.push({
+      drawingId: r.drawingId,
+      key: "size",
+      value: {
+        width: l,
+        height: u
+      }
+    }), m !== a && t.push({
+      drawingId: r.drawingId,
+      key: "angle",
+      value: m
+    }), t.length > 0 && d && c && this._commandService.executeCommand(qe.id, {
+      unitId: d,
+      subUnitId: c,
+      drawings: t
     });
   }
-  function j(_) {
-    b(_);
-    const C = t.getFocusDrawings();
-    if (C.length === 0)
+  // Update inline drawing when use transformer to move it.
+  _moveInlineDrawing(e, n, t) {
+    const r = this._getInlineDrawingAnchor(e, n, t), { offset: o, segmentId: s, segmentPage: a } = r != null ? r : {};
+    return this._commandService.executeCommand(tt.id, {
+      unitId: e.unitId,
+      subUnitId: e.unitId,
+      drawing: e,
+      offset: o,
+      segmentId: s,
+      segmentPage: a,
+      needRefreshDrawings: o == null
+    });
+  }
+  // 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: s, height: a, angle: d } = n, c = t == null ? void 0 : t.with(oe).getSkeleton(), l = c == null ? void 0 : c.getSkeletonData(), { pages: u } = l != null ? l : {};
+    if (l == null || t == null || u == null)
+      return {
+        left: r,
+        top: o,
+        width: s,
+        height: a,
+        angle: d
+      };
+    const { mainComponent: m } = t, p = m, { top: h, pageLayoutType: v, pageMarginLeft: w, pageMarginTop: S } = p;
+    let O = o;
+    this._liquid.reset();
+    for (const D of u) {
+      const { marginBottom: x, pageHeight: b } = D, T = u.indexOf(D), N = u[T + 1];
+      if (N == null)
+        continue;
+      if (Pe.hasIntersectionBetweenTwoRanges(
+        o,
+        o + a,
+        this._liquid.y + h + b - x,
+        this._liquid.y + h + b + S + N.marginTop
+      )) {
+        const R = o + a / 2, I = this._liquid.y + h + b + S / 2;
+        R < I ? O = Math.min(o, this._liquid.y + h + b - x - a) : O = Math.max(o, this._liquid.y + h + b + S + N.marginTop);
+      }
+      this._liquid.translatePage(D, v, w, S);
+    }
+    return {
+      left: r,
+      top: O,
+      width: s,
+      height: a,
+      angle: d
+    };
+  }
+  _nonInlineDrawingTransform(e, n, t = !1) {
+    const r = e.isMultiTransform === re.TRUE ? n : this._limitDrawingInPage(e, n);
+    if (t && r.top !== n.top)
       return;
-    const M = C.map((x) => ({
-      unitId: x.unitId,
-      subUnitId: x.subUnitId,
-      drawingId: x.drawingId
-    }));
-    e.executeCommand(at.id, {
-      unitId: C[0].unitId,
-      subUnitId: C[0].unitId,
-      drawings: M,
-      wrapText: _
+    const o = this._getDrawingAnchor(e, r), { offset: s, docTransform: a, segmentId: d, segmentPage: c } = o != null ? o : {};
+    return s == null || a == null ? this._updateMultipleDrawingDocTransform(/* @__PURE__ */ new Map([[e.drawingId, n]])) : this._commandService.executeCommand(it.id, {
+      unitId: e.unitId,
+      subUnitId: e.unitId,
+      drawing: e,
+      offset: s,
+      docTransform: a,
+      segmentId: d,
+      segmentPage: c
     });
   }
-  function H(_, C) {
-    if (_ == null)
+  _getSceneAndTransformerByDrawingSearch(e) {
+    if (e == null)
       return;
-    const M = { ...T, [C]: _ };
-    N(M);
-    const x = t.getFocusDrawings();
-    if (x.length === 0)
+    const n = this._renderManagerService.getRenderById(e), t = n == null ? void 0 : n.scene;
+    if (t == null)
       return;
-    const L = x.map((U) => ({
-      unitId: U.unitId,
-      subUnitId: U.subUnitId,
-      drawingId: U.drawingId
-    }));
-    e.executeCommand(st.id, {
-      unitId: x[0].unitId,
-      subUnitId: x[0].unitId,
-      drawings: L,
-      dist: {
-        [C]: _
-      }
-    });
+    const r = t.getTransformerByCreate();
+    return { scene: t, transformer: r };
   }
-  function E() {
-    const _ = t.getFocusDrawings();
-    _.length !== 0 && W(_[0]);
+  _getTransformCoordForDocumentOffset(e, n, t, r) {
+    const { documentTransform: o } = e.getOffsetConfig(), s = n.transformVector2SceneCoord(ti.FromArray([t, r]));
+    if (s)
+      return o.clone().invert().applyPoint(s);
   }
-  function W(_) {
-    var K, se;
-    const C = (se = (K = a == null ? void 0 : a.getSnapshot()) == null ? void 0 : K.drawings) == null ? void 0 : se[_.drawingId];
-    if (C == null)
+  _createOrUpdateInlineAnchor(e, n) {
+    const t = this._renderManagerService.getRenderById(e);
+    if (t == null)
       return;
-    const {
-      distT: M = 0,
-      distL: x = 0,
-      distB: L = 0,
-      distR: U = 0,
-      layoutType: y = k.INLINE,
-      behindDoc: A = re.FALSE,
-      wrapText: $ = Ve.BOTH_SIDES
-    } = C;
-    if (N({
-      distT: M,
-      distL: x,
-      distB: L,
-      distR: U
-    }), b($), p(y !== k.WRAP_SQUARE), y === k.WRAP_NONE || y === k.INLINE ? v(!0) : v(!1), y === k.WRAP_NONE || y === k.INLINE || y === k.WRAP_TOP_AND_BOTTOM ? S(!0) : S(!1), y === k.WRAP_NONE)
-      A === re.TRUE ? D(me.BEHIND_TEXT) : D(me.IN_FRONT_OF_TEXT);
-    else
-      switch (y) {
-        case k.INLINE:
-          D(me.INLINE);
-          break;
-        case k.WRAP_SQUARE:
-          D(me.WRAP_SQUARE);
-          break;
-        case k.WRAP_TOP_AND_BOTTOM:
-          D(me.WRAP_TOP_AND_BOTTOM);
-          break;
-        default:
-          throw new Error(`Unsupported layout type: ${y}`);
+    const { mainComponent: r, scene: o } = t, s = r, {
+      docsLeft: a,
+      docsTop: d
+    } = s.getOffsetConfig(), c = fi(n), { left: l, top: u, height: m } = c, p = l + a, h = u + d;
+    if (this._anchorShape) {
+      this._anchorShape.transformByState({ left: p, top: h, height: m }), this._anchorShape.show();
+      return;
+    }
+    const v = 6, w = new ii(Ui + Pe.generateRandomId(v), {
+      left: p,
+      top: h,
+      height: m,
+      strokeWidth: 2,
+      stroke: ri(bt.darkGray, 1),
+      evented: !1
+    });
+    this._anchorShape = w, o.addObject(w, hi);
+  }
+  _getDocObject() {
+    return pi(this._univerInstanceService, this._renderManagerService);
+  }
+  _getPageContentSize(e) {
+    const n = this._renderManagerService.getRenderById(e.unitId), t = n == null ? void 0 : n.with(oe).getSkeleton(), r = 500, o = 500, s = t == null ? void 0 : t.getSkeletonData();
+    if (s == null || n == null)
+      return {
+        width: r,
+        height: o
+      };
+    const { pages: a } = s;
+    let d = null;
+    for (const c of a) {
+      const { skeDrawings: l } = c;
+      if (l.has(e.drawingId)) {
+        d = c;
+        break;
       }
+    }
+    if (d) {
+      const { pageWidth: c, pageHeight: l, marginLeft: u, marginBottom: m, marginRight: p, marginTop: h } = d;
+      return {
+        width: Math.max(r, c - u - p),
+        height: Math.max(o, l - h - m)
+      };
+    } else
+      return {
+        width: r,
+        height: o
+      };
   }
-  return _n(() => {
-    E();
-    const _ = t.focus$.subscribe((M) => {
-      if (M.length === 0) {
-        R(!1);
-        return;
+};
+on = Bi([
+  Ze(0, z),
+  Ze(1, J),
+  Ze(2, ve),
+  Ze(3, Q)
+], on);
+var fe = function() {
+  return fe = 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]);
+    }
+    return i;
+  }, fe.apply(this, arguments);
+}, Fi = 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;
+}, rt = Yn(function(i, e) {
+  var n = i.icon, t = i.id, r = i.className, o = i.extend, s = Fi(i, ["icon", "id", "className", "extend"]), a = "univerjs-icon univerjs-icon-".concat(t, " ").concat(r || "").trim(), d = Pi("_".concat(Wi()));
+  return ot(n, "".concat(t), { defIds: n.defIds, idSuffix: d.current }, fe({ ref: e, className: a }, s), o);
+});
+function ot(i, e, n, t, r) {
+  return Jn(i.tag, fe(fe({ key: e }, ki(i, n, r)), t), (Hi(i, n).children || []).map(function(o, s) {
+    return ot(o, "".concat(e, "-").concat(i.tag, "-").concat(s), n, void 0, r);
+  }));
+}
+function ki(i, e, n) {
+  var t = fe({}, 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 s = o[0], a = o[1];
+    typeof a == "string" && (t[s] = a.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+  })), t;
+}
+function Hi(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) ? fe(fe({}, i), { children: i.children.map(function(r) {
+    return typeof r.attrs.id == "string" && t && t.indexOf(r.attrs.id) > -1 ? fe(fe({}, r), { attrs: fe(fe({}, r.attrs), { id: r.attrs.id + e.idSuffix }) }) : r;
+  }) }) : i;
+}
+function Wi() {
+  return Math.random().toString(36).substring(2, 8);
+}
+rt.displayName = "UniverIcon";
+var Gi = { 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" } }] }, st = Yn(function(i, e) {
+  return Jn(rt, Object.assign({}, i, {
+    id: "add-image-single",
+    ref: e,
+    icon: Gi
+  }));
+});
+st.displayName = "AddImageSingle";
+const Cn = {
+  id: "doc.command.remove-doc-image",
+  type: X.COMMAND,
+  // eslint-disable-next-line max-lines-per-function
+  handler: (i, e) => {
+    var b, T, N, B;
+    const n = i.get(z), t = i.get(J), r = i.get(Q), o = t.getCurrentUniverDocInstance();
+    if (e == null || o == null)
+      return !1;
+    const s = r.getRenderById(e.unitId).with(ye), { drawings: a } = e, d = (b = s.getSegment()) != null ? b : "", c = new In(), l = q.getInstance(), u = (N = (T = o.getSelfOrHeaderFooterModel(d).getBody()) == null ? void 0 : T.customBlocks) != null ? N : [], m = a.map((R) => u.find((I) => I.blockId === R.drawingId)).filter((R) => !!R).sort((R, I) => R.startIndex > I.startIndex ? 1 : -1), p = a[0].unitId, h = new Mt();
+    h.reset();
+    const v = m[0].startIndex, w = [
+      {
+        startOffset: v,
+        endOffset: v
       }
-      R(!0), W(M[0]);
-    }), C = e.onCommandExecuted(async (M) => {
-      M.id === J.id && E();
+    ], S = {
+      id: Z.id,
+      params: {
+        unitId: p,
+        actions: [],
+        textRanges: w
+      }
+    }, O = [];
+    for (const R of m) {
+      const { startIndex: I } = R;
+      I > h.cursor && c.push({
+        t: Y.RETAIN,
+        len: I - h.cursor
+      }), c.push({
+        t: Y.DELETE,
+        len: 1
+      }), h.moveCursorTo(I + 1);
+    }
+    const D = ze(o, d);
+    O.push(l.editOp(c.serialize(), D));
+    for (const R of m) {
+      const { blockId: I } = R, j = ((B = o.getDrawings()) != null ? B : {})[I], A = o.getDrawingsOrder().indexOf(I), W = l.removeOp(["drawings", I], j), _ = l.removeOp(["drawingsOrder", A], I);
+      O.push(W), O.push(_);
+    }
+    return S.params.actions = O.reduce((R, I) => q.compose(R, I), null), !!n.syncExecuteCommand(S.id, S.params);
+  }
+}, at = {
+  id: "doc.command.delete-drawing",
+  type: X.COMMAND,
+  handler: (i) => {
+    const e = i.get(z), t = i.get(je).getFocusDrawings();
+    if (t.length === 0)
+      return !1;
+    const { unitId: r } = t[0], o = t.map((s) => {
+      const { unitId: a, subUnitId: d, drawingId: c, drawingType: l } = s;
+      return {
+        unitId: a,
+        subUnitId: d,
+        drawingId: c,
+        drawingType: l
+      };
     });
-    return () => {
-      _.unsubscribe(), C.dispose();
-    };
-  }, []), /* @__PURE__ */ l.jsxs("div", { className: V(u.imageCommonPanelGrid, u.imageCommonPanelBorder), style: { display: B ? "block" : "none" }, children: [
-    /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelTitle), children: /* @__PURE__ */ l.jsx("div", { children: n.t("image-text-wrap.title") }) }) }),
-    /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSubtitle), children: /* @__PURE__ */ l.jsx("div", { children: n.t("image-text-wrap.wrappingStyle") }) }) }),
-    /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelRow), children: /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn), children: /* @__PURE__ */ l.jsxs(jn, { value: O, onChange: I, direction: "vertical", children: [
-      /* @__PURE__ */ l.jsx(Pe, { value: me.INLINE, children: n.t("image-text-wrap.inline") }),
-      /* @__PURE__ */ l.jsx(Pe, { value: me.WRAP_SQUARE, children: n.t("image-text-wrap.square") }),
-      /* @__PURE__ */ l.jsx(Pe, { value: me.WRAP_TOP_AND_BOTTOM, children: n.t("image-text-wrap.topAndBottom") }),
-      /* @__PURE__ */ l.jsx(Pe, { value: me.BEHIND_TEXT, children: n.t("image-text-wrap.behindText") }),
-      /* @__PURE__ */ l.jsx(Pe, { value: me.IN_FRONT_OF_TEXT, children: n.t("image-text-wrap.inFrontText") })
-    ] }) }) }),
-    /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSubtitle), children: /* @__PURE__ */ l.jsx("div", { children: n.t("image-text-wrap.wrapText") }) }) }),
-    /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelRow), children: /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn), children: /* @__PURE__ */ l.jsxs(jn, { disabled: m, value: P, onChange: j, direction: "horizontal", children: [
-      /* @__PURE__ */ l.jsx(Pe, { value: Ve.BOTH_SIDES, children: n.t("image-text-wrap.bothSide") }),
-      /* @__PURE__ */ l.jsx(Pe, { value: Ve.LEFT, children: n.t("image-text-wrap.leftOnly") }),
-      /* @__PURE__ */ l.jsx(Pe, { value: Ve.RIGHT, children: n.t("image-text-wrap.rightOnly") })
-    ] }) }) }),
-    /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSubtitle), children: /* @__PURE__ */ l.jsx("div", { children: n.t("image-text-wrap.distanceFromText") }) }) }),
-    /* @__PURE__ */ l.jsxs("div", { className: u.imageCommonPanelRow, children: [
-      /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: /* @__PURE__ */ l.jsxs("label", { children: [
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: n.t("image-text-wrap.top") }) }),
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: /* @__PURE__ */ l.jsx(
-          Be,
-          {
-            min: Ze,
-            max: Je,
-            disabled: h,
-            precision: 1,
-            value: T.distT,
-            onChange: (_) => {
-              H(_, "distT");
-            },
-            className: u.imageCommonPanelInput
-          }
-        ) }) })
-      ] }) }),
-      /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: /* @__PURE__ */ l.jsxs("label", { children: [
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: n.t("image-text-wrap.left") }) }),
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: /* @__PURE__ */ l.jsx(
-          Be,
-          {
-            min: Ze,
-            max: Je,
-            disabled: w,
-            precision: 1,
-            value: T.distL,
-            onChange: (_) => {
-              H(_, "distL");
-            },
-            className: u.imageCommonPanelInput
-          }
-        ) }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ l.jsxs("div", { className: u.imageCommonPanelRow, children: [
-      /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: /* @__PURE__ */ l.jsxs("label", { children: [
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: n.t("image-text-wrap.bottom") }) }),
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: /* @__PURE__ */ l.jsx(
-          Be,
-          {
-            min: Ze,
-            max: Je,
-            disabled: h,
-            precision: 1,
-            value: T.distB,
-            onChange: (_) => {
-              H(_, "distB");
-            },
-            className: u.imageCommonPanelInput
-          }
-        ) }) })
-      ] }) }),
-      /* @__PURE__ */ l.jsx("div", { className: V(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: /* @__PURE__ */ l.jsxs("label", { children: [
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: n.t("image-text-wrap.right") }) }),
-        /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ l.jsx("div", { className: u.imageCommonPanelColumn, children: /* @__PURE__ */ l.jsx(
-          Be,
-          {
-            min: Ze,
-            max: Je,
-            disabled: w,
-            precision: 1,
-            value: T.distR,
-            onChange: (_) => {
-              H(_, "distR");
-            },
-            className: u.imageCommonPanelInput
-          }
-        ) }) })
-      ] }) })
-    ] })
-  ] });
-}, or = () => {
-  const i = pe(ve), e = i.getFocusDrawings(), [n, t] = ie(e);
-  return _n(() => {
-    const r = i.focus$.subscribe((o) => {
-      t(o);
+    return e.executeCommand(Cn.id, {
+      unitId: r,
+      drawings: o
     });
-    return () => {
-      r.unsubscribe();
-    };
-  }, []), !!(n != null && n.length) && /* @__PURE__ */ l.jsxs("div", { className: u.imageCommonPanel, children: [
-    /* @__PURE__ */ l.jsx(qt, { drawings: n, hasAlign: !1, hasCropper: !1, hasGroup: !1, hasTransform: !1 }),
-    /* @__PURE__ */ l.jsx(rr, { drawings: n }),
-    /* @__PURE__ */ l.jsx(ir, { drawings: n })
-  ] });
-}, pt = "addition-and-subtraction-single", wt = "doc.menu.image", vt = it.id, sr = (i) => {
-  const e = i.get(In), n = i.get(Z);
-  return new Si((t) => {
-    const r = e.textSelection$.subscribe(() => {
-      var s;
-      const o = e.getActiveTextRange();
-      if (o) {
-        const { segmentId: c, startOffset: d, endOffset: a } = o, g = n.getCurrentUniverDocInstance(), f = (s = g == null ? void 0 : g.getSelfOrHeaderFooterModel(c).getBody()) == null ? void 0 : s.tables;
-        if (f && f.length && f.some((m) => {
-          const { startIndex: p, endIndex: h } = m;
-          return d >= p && d < h || a >= p && a < h;
-        })) {
-          t.next(!0);
-          return;
+  }
+}, ct = {
+  id: "doc.command.group-doc-image",
+  type: X.COMMAND,
+  handler: (i, e) => {
+    i.get(z), i.get(Vn);
+    const n = i.get(je);
+    if (!e) return !1;
+    const t = [];
+    return e.forEach(({ parent: r, children: o }) => {
+      t.push(r.unitId), o.forEach((s) => {
+        t.push(s.unitId);
+      });
+    }), n.getGroupDrawingOp(e), !1;
+  }
+}, dt = {
+  id: "doc.command.insert-doc-image",
+  type: X.COMMAND,
+  // eslint-disable-next-line max-lines-per-function
+  handler: (i, e) => {
+    var T, N, B, R;
+    if (e == null)
+      return !1;
+    const n = i.get(z), t = i.get(_n), r = i.get(J), o = t.getActiveTextRange(), s = r.getCurrentUniverDocInstance();
+    if (o == null || s == null)
+      return !1;
+    const a = s.getUnitId(), { drawings: d } = e, { collapsed: c, startOffset: l, segmentId: u } = o, m = s.getSelfOrHeaderFooterModel(u).getBody();
+    if (m == null)
+      return !1;
+    const p = new In(), h = q.getInstance(), v = [], w = (N = (T = s.getSnapshot().drawingsOrder) == null ? void 0 : T.length) != null ? N : 0;
+    let S = 0;
+    if (c)
+      l > 0 && p.push({
+        t: Y.RETAIN,
+        len: l
+      });
+    else {
+      const I = Rt.selection.delete([o], m, 0, null, !1);
+      p.push(...I);
+      const j = wi(m, [o]), H = (B = s.getDrawings()) != null ? B : {}, A = (R = s.getDrawingsOrder()) != null ? R : [], W = j.sort((_, C) => A.indexOf(_) > A.indexOf(C) ? -1 : A.indexOf(_) < A.indexOf(C) ? 1 : 0);
+      if (W.length > 0)
+        for (const _ of W) {
+          const C = H[_], M = A.indexOf(_);
+          if (C == null || M < 0)
+            continue;
+          const P = h.removeOp(["drawings", _], C), L = h.removeOp(["drawingsOrder", M], _);
+          v.push(P), v.push(L), S++;
         }
-      } else {
-        t.next(!0);
-        return;
-      }
-      t.next(!1);
+    }
+    p.push({
+      t: Y.INSERT,
+      body: {
+        dataStream: "\b".repeat(d.length),
+        customBlocks: d.map((I, j) => ({
+          startIndex: j,
+          blockId: I.drawingId
+        }))
+      },
+      len: d.length
     });
-    return () => r.unsubscribe();
-  });
+    const O = ze(s, u), D = h.editOp(p.serialize(), O);
+    v.push(D);
+    for (const I of d) {
+      const { drawingId: j } = I, H = h.insertOp(["drawings", j], I), A = h.insertOp(["drawingsOrder", w - S], j);
+      v.push(H), v.push(A);
+    }
+    const x = {
+      id: Z.id,
+      params: {
+        unitId: a,
+        actions: [],
+        textRanges: []
+      }
+    };
+    return x.params.actions = v.reduce((I, j) => q.compose(I, j), null), !!n.syncExecuteCommand(x.id, x.params);
+  }
+}, lt = {
+  id: "doc.command.set-drawing-arrange",
+  type: X.COMMAND,
+  handler: (i, e) => {
+    const n = i.get(z), t = i.get(je);
+    if (e == null)
+      return !1;
+    const { unitId: r, subUnitId: o, drawingIds: s, arrangeType: a } = e, d = { unitId: r, subUnitId: o, drawingIds: s };
+    let c;
+    if (a === Je.forward ? c = t.getForwardDrawingsOp(d) : a === Je.backward ? c = t.getBackwardDrawingOp(d) : a === Je.front ? c = t.getFrontDrawingsOp(d) : a === Je.back && (c = t.getBackDrawingsOp(d)), c == null)
+      return !1;
+    const { redo: l } = c;
+    if (l == null)
+      return !1;
+    const u = [];
+    let m = Pe.deepClone(l);
+    m = m.slice(3), m.unshift("drawingsOrder"), u.push(m);
+    const p = {
+      id: Z.id,
+      params: {
+        unitId: r,
+        actions: [],
+        textRanges: null
+      }
+    };
+    return p.params.actions = u.reduce((v, w) => q.compose(v, w), null), !!n.syncExecuteCommand(p.id, p.params);
+  }
+}, gt = {
+  id: "doc.command.ungroup-doc-image",
+  type: X.COMMAND,
+  handler: (i, e) => {
+    i.get(z), i.get(Vn);
+    const n = i.get(je);
+    if (!e) return !1;
+    const t = [];
+    return e.forEach(({ parent: r, children: o }) => {
+      t.push(r.unitId), o.forEach((s) => {
+        t.push(s.unitId);
+      });
+    }), n.getUngroupDrawingOp(e), !1;
+  }
 };
-function ar(i) {
-  return {
-    id: wt,
-    type: Vn.SUBITEMS,
-    icon: pt,
-    tooltip: "docImage.title",
-    disabled$: sr(i),
-    hidden$: $n(i, Te.UNIVER_DOC)
-  };
-}
-function cr(i) {
-  return {
-    id: vt,
-    title: "docImage.upload.float",
-    type: Vn.BUTTON,
-    hidden$: $n(i, Te.UNIVER_DOC)
-  };
-}
-const dr = {
-  [si.LAYOUT]: {
-    [wt]: {
-      order: 0,
-      menuItemFactory: ar,
-      [vt]: {
-        order: 0,
-        menuItemFactory: cr
+var Vi = Object.defineProperty, $i = Object.getOwnPropertyDescriptor, zi = (i, e, n, t) => {
+  for (var r = t > 1 ? void 0 : t ? $i(e, n) : e, o = i.length - 1, s; o >= 0; o--)
+    (s = i[o]) && (r = (t ? s(e, n, r) : s(r)) || r);
+  return t && r && Vi(e, n, r), r;
+}, ge = (i, e) => (n, t) => e(n, t, i);
+let sn = class extends Xe {
+  constructor(i, e, n, t, r, o, s, a, d, c, l, u, m) {
+    super(), this._context = i, this._commandService = e, this._docSelectionManagerService = n, this._renderManagerSrv = t, this._imageIoService = r, this._docDrawingService = o, this._drawingManagerService = s, this._contextService = a, this._messageService = d, this._localeService = c, this._docSelectionRenderService = l, this._docRefreshDrawingsService = u, this._fileOpenerService = m, this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener(), this._transformDrawingListener(), this._editAreaChangeListener();
+  }
+  async insertDocImage() {
+    const i = await this._fileOpenerService.openFile({
+      multiple: !0,
+      accept: Vt.map((n) => `.${n.replace("image/", "")}`).join(",")
+    }), e = i.length;
+    return e > Tn ? (this._messageService.show({
+      type: Ln.Error,
+      content: this._localeService.t("update-status.exceedMaxCount", String(Tn))
+    }), !1) : e === 0 ? !1 : (await this._insertFloatImages(i), !0);
+  }
+  // eslint-disable-next-line max-lines-per-function
+  async _insertFloatImages(i) {
+    let e = [];
+    try {
+      e = await Promise.all(i.map((r) => this._imageIoService.saveImage(r)));
+    } catch (r) {
+      const o = r.message;
+      let s = "";
+      switch (o) {
+        case hn.ERROR_EXCEED_SIZE:
+          s = this._localeService.t("update-status.exceedMaxSize", String($t / (1024 * 1024)));
+          break;
+        case hn.ERROR_IMAGE_TYPE:
+          s = this._localeService.t("update-status.invalidImageType");
+          break;
+        case hn.ERROR_IMAGE:
+          s = this._localeService.t("update-status.invalidImage");
+          break;
+      }
+      this._messageService.show({
+        type: Ln.Error,
+        content: s
+      });
+    }
+    if (e.length === 0)
+      return;
+    const { unitId: n } = this._context, t = [];
+    for (const r of e) {
+      if (r == null)
+        continue;
+      const { imageId: o, imageSourceType: s, source: a, base64Cache: d } = r, { width: c, height: l, image: u } = await zt(d || "");
+      this._imageIoService.addImageSourceCache(o, s, u);
+      let m = 1;
+      if (c > yn || l > bn) {
+        const w = yn / c, S = bn / l;
+        m = Math.min(w, S);
       }
+      const p = this._getImagePosition(c * m, l * m);
+      if (p == null)
+        return;
+      const h = {
+        unitId: n,
+        subUnitId: n,
+        drawingId: o,
+        drawingType: Nt.DRAWING_IMAGE,
+        imageSourceType: s,
+        source: a,
+        transform: vi(p),
+        docTransform: p,
+        behindDoc: re.FALSE,
+        title: "",
+        description: "",
+        layoutType: k.INLINE,
+        // Insert inline drawing by default.
+        wrapText: $e.BOTH_SIDES,
+        distB: 0,
+        distL: 0,
+        distR: 0,
+        distT: 0
+      };
+      this._isInsertInHeaderFooter() && (h.isMultiTransform = re.TRUE, h.transforms = h.transform ? [h.transform] : null), t.push(h);
     }
+    this._commandService.executeCommand(dt.id, {
+      unitId: n,
+      drawings: t
+    });
+  }
+  _isInsertInHeaderFooter() {
+    var t;
+    const { unitId: i } = this._context, e = (t = this._renderManagerSrv.getRenderById(i)) == null ? void 0 : t.with(oe).getViewModel(), n = e == null ? void 0 : e.getEditArea();
+    return n === Ue.HEADER || n === Ue.FOOTER;
+  }
+  _getImagePosition(i, e) {
+    const n = this._docSelectionRenderService.getActiveTextRange(), t = (n == null ? void 0 : n.getAbsolutePosition()) || {
+      left: 0,
+      top: 0
+    };
+    return {
+      size: {
+        width: i,
+        height: e
+      },
+      positionH: {
+        relativeFrom: ee.PAGE,
+        posOffset: t.left
+      },
+      positionV: {
+        relativeFrom: G.PARAGRAPH,
+        posOffset: 0
+      },
+      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
+      });
+    });
   }
-};
-function Ke(i) {
-  return i.getContextValue(yt) && i.getContextValue(nn);
-}
-const lr = {
-  id: Xe.id,
-  description: "shortcut.doc.drawing-move-down",
-  group: "4_doc-drawing-view",
-  binding: Fe.ARROW_DOWN,
-  priority: 100,
-  preconditions: Ke,
-  staticParameters: {
-    direction: ue.DOWN
+  _groupDrawingListener() {
+    this._drawingManagerService.featurePluginGroupUpdate$.subscribe((i) => {
+      this._commandService.executeCommand(ct.id, i);
+    }), this._drawingManagerService.featurePluginUngroupUpdate$.subscribe((i) => {
+      this._commandService.executeCommand(gt.id, i);
+    });
   }
-}, gr = {
-  id: Xe.id,
-  description: "shortcut.doc.drawing-move-up",
-  group: "4_doc-drawing-view",
-  binding: Fe.ARROW_UP,
-  priority: 100,
-  preconditions: Ke,
-  staticParameters: {
-    direction: ue.UP
+  _getCurrentSceneAndTransformer() {
+    const { scene: i, mainComponent: e } = this._context;
+    if (i == null || e == null)
+      return;
+    const n = i.getTransformerByCreate(), { docsLeft: t, docsTop: r } = e.getOffsetConfig();
+    return { scene: i, transformer: n, docsLeft: t, docsTop: r };
   }
-}, mr = {
-  id: Xe.id,
-  description: "shortcut.doc.drawing-move-left",
-  group: "4_doc-drawing-view",
-  binding: Fe.ARROW_LEFT,
-  priority: 100,
-  preconditions: Ke,
-  staticParameters: {
-    direction: ue.LEFT
+  _transformDrawingListener() {
+    const i = this._getCurrentSceneAndTransformer();
+    if (i && i.transformer)
+      this.disposeWithMe(i.transformer.changeEnd$.pipe(Kn(30)).subscribe((e) => {
+        this._docSelectionManagerService.refreshSelection();
+      }));
+    else
+      throw new Error("transformer is not init");
   }
-}, ur = {
-  id: Xe.id,
-  description: "shortcut.doc.drawing-move-right",
-  group: "4_doc-drawing-view",
-  binding: Fe.ARROW_RIGHT,
-  priority: 100,
-  preconditions: Ke,
-  staticParameters: {
-    direction: ue.RIGHT
+  _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(tn, !1), this._docDrawingService.focusDrawing([]), e && e.resetProps({
+            zeroTop: 0,
+            zeroLeft: 0
+          });
+        else {
+          this._contextService.setContextValue(tn, !0), this._docDrawingService.focusDrawing(i), this._setDrawingSelections(i);
+          const o = this._docSelectionRenderService.getSegment(), s = this._findSegmentIdByDrawingId(i[0].drawingId);
+          o !== s && this._docSelectionRenderService.setSegment(s), e && e.resetProps({
+            zeroTop: t,
+            zeroLeft: n
+          });
+        }
+      })
+    );
   }
-}, fr = {
-  id: Jn.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: Fe.DELETE,
-  mac: Fe.BACKSPACE
-};
-var hr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, wr = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? pr(e, n) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (t ? s(e, n, r) : s(r)) || r);
-  return t && r && hr(e, n, r), r;
-}, Qe = (i, e) => (n, t) => e(n, t, i);
-let rn = class extends qe {
-  constructor(i, e, n, t) {
-    super(), this._componentManager = i, this._menuManagerService = e, this._commandService = n, this._shortcutService = t, this._init();
+  _findSegmentIdByDrawingId(i) {
+    var s, a, d;
+    const { unit: e } = this._context, { body: n, headers: t = {}, footers: r = {} } = e.getSnapshot();
+    if (((s = n == null ? void 0 : n.customBlocks) != null ? s : []).some((c) => c.blockId === i))
+      return "";
+    for (const c of Object.keys(t))
+      if ((a = t[c].body.customBlocks) != null && a.some((l) => l.blockId === i))
+        return c;
+    for (const c of Object.keys(r))
+      if ((d = r[c].body.customBlocks) != null && d.some((l) => l.blockId === i))
+        return c;
+    return "";
   }
-  _initCustomComponents() {
-    const i = this._componentManager;
-    this.disposeWithMe(i.register(pt, Zn)), this.disposeWithMe(i.register(lt, or));
+  // Update drawings edit status and opacity. You can not edit header footer images when you are editing body. and vice verse.
+  _updateDrawingsEditStatus() {
+    var a;
+    const { unit: i, scene: e, unitId: n } = this._context, t = (a = this._renderManagerSrv.getRenderById(n)) == null ? void 0 : a.with(oe).getViewModel();
+    if (t == null || i == null)
+      return;
+    const r = i.getSnapshot(), { drawings: o = {} } = r, s = t.getEditArea() === Ue.BODY;
+    for (const d of Object.keys(o)) {
+      const c = o[d], l = qt({ unitId: n, drawingId: c.drawingId, subUnitId: n }), u = e.fuzzyMathObjects(l, !0);
+      if (u.length)
+        for (const m of u)
+          e.detachTransformerFrom(m), m.setOpacity(0.5), (s && c.isMultiTransform !== re.TRUE || !s && c.isMultiTransform === re.TRUE) && (e.attachTransformerTo(m), m.setOpacity(1));
+    }
   }
-  _initMenus() {
-    this._menuManagerService.mergeMenu(dr);
+  _editAreaChangeListener() {
+    var n;
+    const { unitId: i } = this._context, e = (n = this._renderManagerSrv.getRenderById(i)) == null ? void 0 : n.with(oe).getViewModel();
+    e != null && (this._updateDrawingsEditStatus(), this.disposeWithMe(
+      e.editAreaChange$.subscribe(() => {
+        this._updateDrawingsEditStatus();
+      })
+    ), this._docRefreshDrawingsService.refreshDrawings$.subscribe((t) => {
+      t != null && queueMicrotask(() => {
+        this._updateDrawingsEditStatus();
+      });
+    }), this.disposeWithMe(
+      this._commandService.onCommandExecuted(async (t) => {
+        t.id === Z.id && queueMicrotask(() => {
+          this._updateDrawingsEditStatus();
+        });
+      })
+    ));
   }
-  _initCommands() {
-    [
-      it,
-      et,
-      ot,
-      st,
-      at,
-      ze,
-      ct,
-      dt,
-      Sn,
-      gt,
-      ji,
-      mt,
-      Qn,
-      tt,
-      Xe,
-      Jn,
-      nt
-    ].forEach((i) => this.disposeWithMe(this._commandService.registerCommand(i)));
+  _setDrawingSelections(i) {
+    var r, o;
+    const { unit: e } = this._context, n = (o = (r = e.getSnapshot().body) == null ? void 0 : r.customBlocks) != null ? o : [], t = i.map((s) => {
+      const a = s.drawingId, d = n.find((c) => c.blockId === a);
+      return d ? d.startIndex : null;
+    }).filter((s) => s !== null).map((s) => ({ startOffset: s, endOffset: s + 1 }));
+    this._docSelectionManagerService.replaceDocRanges(t);
   }
-  _initShortcuts() {
-    [
-      // sheet drawing shortcuts
-      lr,
-      gr,
-      mr,
-      ur,
-      fr
-    ].forEach((i) => {
-      this.disposeWithMe(this._shortcutService.registerShortcut(i));
+};
+sn = zi([
+  ge(1, z),
+  ge(2, we(_n)),
+  ge(3, Q),
+  ge(4, Xt),
+  ge(5, je),
+  ge(6, ve),
+  ge(7, $n),
+  ge(8, si),
+  ge(9, we(ln)),
+  ge(10, we(ye)),
+  ge(11, we(gn)),
+  ge(12, ai)
+], sn);
+const mt = {
+  id: "doc.command.insert-float-image",
+  type: X.COMMAND,
+  handler: (i) => {
+    var n, t;
+    return (t = (n = i.get(Q).getCurrentTypeOfRenderer(Te.UNIVER_DOC)) == null ? void 0 : n.with(sn).insertDocImage()) != null ? t : !1;
+  }
+}, Ke = {
+  id: "doc.command.move-drawing",
+  type: X.COMMAND,
+  handler: (i, e) => {
+    const n = i.get(z), t = i.get(je), r = i.get(J), o = i.get(Q), { direction: s } = e, a = t.getFocusDrawings();
+    if (a.length === 0)
+      return !1;
+    const d = a[0].unitId, c = o.getRenderById(d), l = c == null ? void 0 : c.scene;
+    if (l == null)
+      return !1;
+    const u = l.getTransformerByCreate(), m = r.getUniverDocInstance(d), p = a.map((v) => {
+      var T, N, B, R, I;
+      const { drawingId: w } = v, S = (T = m == null ? void 0 : m.getSnapshot().drawings) == null ? void 0 : T[w];
+      if (S == null || S.layoutType === k.INLINE)
+        return null;
+      const { positionH: O, positionV: D } = S.docTransform, x = { ...O }, b = { ...D };
+      return s === ue.UP ? b.posOffset = ((N = b.posOffset) != null ? N : 0) - 2 : s === ue.DOWN ? b.posOffset = ((B = b.posOffset) != null ? B : 0) + 2 : s === ue.LEFT ? x.posOffset = ((R = x.posOffset) != null ? R : 0) - 2 : s === ue.RIGHT && (x.posOffset = ((I = x.posOffset) != null ? I : 0) + 2), {
+        drawingId: w,
+        key: s === ue.UP || s === ue.DOWN ? "positionV" : "positionH",
+        value: s === ue.UP || s === ue.DOWN ? b : x
+      };
+    }).filter((v) => v != null);
+    if (p.length === 0)
+      return !1;
+    const h = n.syncExecuteCommand(qe.id, {
+      unitId: d,
+      subUnitId: d,
+      drawings: p
     });
+    return u.refreshControls(), !!h;
   }
-  _init() {
-    this._initCommands(), this._initCustomComponents(), this._initMenus(), this._initShortcuts();
+}, qi = {
+  id: "doc.operation.clear-drawing-transformer",
+  type: X.MUTATION,
+  handler: (i, e) => {
+    const n = i.get(Q);
+    return e.forEach((t) => {
+      var r, o;
+      (o = (r = n.getRenderById(t)) == null ? void 0 : r.scene.getTransformer()) == null || o.debounceRefreshControls();
+    }), !0;
+  }
+}, ut = "COMPONENT_DOC_DRAWING_PANEL", ft = {
+  id: "sidebar.operation.doc-image",
+  type: X.COMMAND,
+  handler: async (i, e) => {
+    const n = i.get(ci), t = i.get(ln), r = i.get(ve);
+    switch (e.value) {
+      case "open":
+        n.open({
+          header: { title: t.t("docImage.panel.title") },
+          children: { label: ut },
+          onClose: () => {
+            r.focusDrawing(null);
+          },
+          width: 360
+        });
+        break;
+      case "close":
+      default:
+        n.close();
+        break;
+    }
+    return !0;
+  }
+}, ht = {
+  id: "doc.operation.edit-doc-image",
+  type: X.OPERATION,
+  handler: (i, e) => {
+    const n = i.get(ve), t = i.get(z);
+    return e == null ? !1 : (n.focusDrawing([e]), t.executeCommand(ft.id, { value: "open" }), !0);
   }
 };
-rn = wr([
-  Qe(0, we(ai)),
-  Qe(1, ci),
-  Qe(2, z),
-  Qe(3, di)
-], rn);
-var vr = Object.defineProperty, Ir = Object.getOwnPropertyDescriptor, _r = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? Ir(e, n) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (t ? s(e, n, r) : s(r)) || r);
-  return t && r && vr(e, n, r), r;
-}, We = (i, e) => (n, t) => e(n, t, i);
-function Sr(i) {
-  var t, r, o, s;
-  if (q.isNoop(i) || !Array.isArray(i))
-    return null;
-  const e = i.find((c) => Array.isArray(c) && (c == null ? void 0 : c[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")
-    return null;
-  const n = [];
-  if (Array.isArray(e == null ? void 0 : e[1]))
-    for (const c of e)
-      Array.isArray(c) && n.push({
-        type: (t = c == null ? void 0 : c[1]) != null && t.i ? "add" : "remove",
-        drawingId: c == null ? void 0 : c[0],
-        drawing: (r = c == null ? void 0 : c[1]) == null ? void 0 : r.i
-      });
-  else
-    n.push({
-      type: (o = e[2]) != null && o.i ? "add" : "remove",
-      drawingId: e[1],
-      drawing: (s = e[2]) == null ? void 0 : s.i
+var pn = { exports: {} }, Ge = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var kn;
+function Xi() {
+  if (kn) return Ge;
+  kn = 1;
+  var i = xi, e = Symbol.for("react.element"), n = Symbol.for("react.fragment"), t = Object.prototype.hasOwnProperty, r = i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, o = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function s(a, d, c) {
+    var l, u = {}, m = null, p = null;
+    c !== void 0 && (m = "" + c), d.key !== void 0 && (m = "" + d.key), d.ref !== void 0 && (p = d.ref);
+    for (l in d) t.call(d, l) && !o.hasOwnProperty(l) && (u[l] = d[l]);
+    if (a && a.defaultProps) for (l in d = a.defaultProps, d) u[l] === void 0 && (u[l] = d[l]);
+    return { $$typeof: e, type: a, key: m, ref: p, props: u, _owner: r.current };
+  }
+  return Ge.Fragment = n, Ge.jsx = s, Ge.jsxs = s, Ge;
+}
+var Hn;
+function Ki() {
+  return Hn || (Hn = 1, pn.exports = Xi()), pn.exports;
+}
+var g = Ki();
+function pt(i) {
+  var e, n, t = "";
+  if (typeof i == "string" || typeof i == "number") t += i;
+  else if (typeof i == "object") if (Array.isArray(i)) {
+    var r = i.length;
+    for (e = 0; e < r; e++) i[e] && (n = pt(i[e])) && (t && (t += " "), t += n);
+  } else for (n in i) i[n] && (t && (t += " "), t += n);
+  return t;
+}
+function V() {
+  for (var i, e, n = 0, t = "", r = arguments.length; n < r; n++) (i = arguments[n]) && (e = pt(i)) && (t && (t += " "), t += e);
+  return t;
+}
+const Yi = "univer-image-common-panel", Ji = "univer-image-common-panel-grid", Zi = "univer-image-common-panel-border", Qi = "univer-image-common-panel-title", er = "univer-image-common-panel-subtitle", nr = "univer-image-common-panel-row", tr = "univer-image-common-panel-row-vertical", ir = "univer-image-common-panel-column", rr = "univer-image-common-panel-column-center", or = "univer-image-common-panel-inline", sr = "univer-image-common-panel-span2", ar = "univer-image-common-panel-span3", cr = "univer-image-common-panel-input", dr = "univer-sheet-image-menu", lr = "univer-sheet-image-menu-input", f = {
+  imageCommonPanel: Yi,
+  imageCommonPanelGrid: Ji,
+  imageCommonPanelBorder: Zi,
+  imageCommonPanelTitle: Qi,
+  imageCommonPanelSubtitle: er,
+  imageCommonPanelRow: nr,
+  imageCommonPanelRowVertical: tr,
+  imageCommonPanelColumn: ir,
+  imageCommonPanelColumnCenter: rr,
+  imageCommonPanelInline: or,
+  imageCommonPanelSpan2: sr,
+  imageCommonPanelSpan3: ar,
+  imageCommonPanelInput: cr,
+  sheetImageMenu: dr,
+  sheetImageMenuInput: lr
+}, Wn = -1e3, Gn = 1e3, gr = (i) => {
+  const e = pe(z), n = pe(ln), t = pe(ve), r = pe(Q), o = pe(J), { drawings: s } = i, a = s[0];
+  if (a == null)
+    return;
+  const { unitId: d } = a, c = o.getUniverDocInstance(d), l = c == null ? void 0 : c.getSnapshot().documentStyle.documentFlavor, u = r.getRenderById(d), m = u == null ? void 0 : u.scene;
+  if (m == null)
+    return;
+  const p = m.getTransformerByCreate(), h = [{
+    label: n.t("image-position.column"),
+    value: String(ee.COLUMN)
+  }, {
+    label: n.t("image-position.page"),
+    value: String(ee.PAGE)
+  }, {
+    label: n.t("image-position.margin"),
+    value: String(ee.MARGIN)
+  }], v = [{
+    label: n.t("image-position.line"),
+    value: String(G.LINE),
+    disabled: l === fn.MODERN
+  }, {
+    label: n.t("image-position.page"),
+    value: String(G.PAGE),
+    disabled: l === fn.MODERN
+  }, {
+    label: n.t("image-position.margin"),
+    value: String(G.MARGIN),
+    disabled: l === fn.MODERN
+  }, {
+    label: n.t("image-position.paragraph"),
+    value: String(G.PARAGRAPH)
+  }], [w, S] = ie(!0), [O, D] = ie({
+    relativeFrom: ee.PAGE,
+    posOffset: 0
+  }), [x, b] = ie({
+    relativeFrom: G.PAGE,
+    posOffset: 0
+  }), [T, N] = ie(!0), [B, R] = ie(!0);
+  function I(C, M) {
+    var y;
+    C === "positionH" ? D(M) : b(M);
+    const P = t.getFocusDrawings();
+    if (P.length === 0)
+      return;
+    const L = P.map((E) => ({
+      unitId: E.unitId,
+      subUnitId: E.subUnitId,
+      drawingId: E.drawingId
+    }));
+    e.executeCommand(qe.id, {
+      unitId: P[0].unitId,
+      subUnitId: P[0].unitId,
+      drawings: L.map((E) => ({
+        drawingId: E.drawingId,
+        key: C,
+        value: M
+      }))
     });
-  return n;
-}
-function Cr(i) {
-  if (!Array.isArray(i) || i.length < 3 || i[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]);
-    else {
-      e.length = 0;
-      break;
-    }
-  }
-  return e;
-}
-let on = 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();
-  }
-  _initialize() {
-    this._commandExecutedListener();
-  }
-  _commandExecutedListener() {
-    this.disposeWithMe(
-      this._commandService.beforeCommandExecuted((i) => {
-        if (i.id !== J.id)
-          return;
-        const e = i.params, { unitId: n, actions: t } = e, r = Sr(t);
-        if (r != null)
-          for (const { type: o, drawingId: s, drawing: c } of r)
-            o === "add" ? this._addDrawings(n, [c]) : this._removeDrawings(n, [s]);
-      })
-    ), this.disposeWithMe(
-      this._commandService.onCommandExecuted((i) => {
-        if (i.id !== J.id)
-          return;
-        const e = i.params, { unitId: n, actions: t } = e;
-        Cr(t).length > 0 && this._updateDrawingsOrder(n);
-      })
-    ), this.disposeWithMe(
-      this._commandService.onCommandExecuted((i) => {
-        var s;
-        if (i.id !== bt.id && i.id !== Mt.id)
-          return;
-        const e = (s = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : s.getUnitId(), n = this._drawingManagerService.getFocusDrawings();
-        if (e == null || n.length === 0)
-          return;
-        const t = this._renderManagerService.getRenderById(e), r = t == null ? void 0 : t.scene;
-        if (r == null)
-          return !1;
-        r.getTransformerByCreate().refreshControls();
-      })
-    );
-  }
-  _addDrawings(i, e) {
-    const n = this._drawingManagerService, t = this._docDrawingService, r = this._docDrawingService.getBatchAddOp(e), { subUnitId: o, redo: s, objects: c } = r;
-    n.applyJson1(i, o, s), t.applyJson1(i, o, s), n.addNotification(c), t.addNotification(c);
-  }
-  _removeDrawings(i, e) {
-    const n = this._drawingManagerService, t = this._docDrawingService, r = this._docDrawingService.getBatchRemoveOp(e.map((d) => ({
-      unitId: i,
-      subUnitId: i,
-      drawingId: d
-    }))), { subUnitId: o, redo: s, objects: c } = r;
-    n.applyJson1(i, o, s), t.applyJson1(i, o, s), n.removeNotification(c), t.removeNotification(c);
+    const U = (y = r.getRenderById(d)) == null ? void 0 : y.with(ye);
+    U && U.blur(), p.refreshControls();
   }
-  _updateDrawingsOrder(i) {
-    const e = this._univerInstanceService.getUniverDocInstance(i);
-    if (e == null)
+  function j(C) {
+    var te, Ie, _e;
+    const M = O.relativeFrom, P = O.posOffset, L = Number(C);
+    if (M === L)
       return;
-    const n = e.getSnapshot().drawingsOrder;
-    if (n == null)
+    const U = t.getFocusDrawings();
+    if (U.length === 0)
       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 y = U[0].drawingId, E = U[0].unitId;
+    let $ = null, F = 0;
+    const K = (te = r.getRenderById(E)) == null ? void 0 : te.with(oe).getSkeleton(), se = K == null ? void 0 : K.getSkeletonData();
+    if (se == null)
+      return;
+    const { pages: Le, skeHeaders: be, skeFooters: ke } = se;
+    for (const ce of Le) {
+      const { marginLeft: Ce, skeDrawings: De, headerId: Me, footerId: Re, pageWidth: Oe } = ce;
+      if (De.has(y)) {
+        $ = De.get(y), F = Ce;
+        break;
+      }
+      const de = (Ie = be.get(Me)) == null ? void 0 : Ie.get(Oe);
+      if (de != null && de.skeDrawings.has(y)) {
+        $ = de == null ? void 0 : de.skeDrawings.get(y), F = Ce;
+        break;
+      }
+      const le = (_e = ke.get(Re)) == null ? void 0 : _e.get(Oe);
+      if (le != null && le.skeDrawings.has(y)) {
+        $ = le == null ? void 0 : le.skeDrawings.get(y), F = Ce;
+        break;
+      }
+    }
+    if ($ == null)
+      return;
+    let ae = 0;
+    M === ee.COLUMN ? ae -= $.columnLeft : M === ee.MARGIN && (ae -= F), L === ee.COLUMN ? ae += $.columnLeft : L === ee.MARGIN ? ae += F : ee.PAGE;
+    const ne = {
+      relativeFrom: L,
+      posOffset: (P != null ? P : 0) - ae
     };
-    t.orderNotification(o), r.orderNotification(o);
+    I("positionH", ne);
   }
-};
-on = _r([
-  We(0, Z),
-  We(1, z),
-  We(2, ve),
-  We(3, je),
-  We(4, Q)
-], on);
-var Dr = Object.defineProperty, Or = Object.getOwnPropertyDescriptor, Pr = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? Or(e, n) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (t ? s(e, n, r) : s(r)) || r);
-  return t && r && Dr(e, n, r), r;
-}, en = (i, e) => (n, t) => e(n, t, i);
-const xr = "__InlineDrawingAnchor__";
-function kn(i) {
-  const { path: e } = i;
-  return e.some((n) => n === "cells");
-}
-let sn = class extends qe {
-  constructor(e, n, t, r) {
-    super();
-    Se(this, "_liquid", new Gn());
-    Se(this, "_listenerOnImageMap", /* @__PURE__ */ new Set());
-    // Use to cache the drawings is under transforming or scaling.
-    Se(this, "_transformerCache", /* @__PURE__ */ new Map());
-    Se(this, "_anchorShape");
-    this._commandService = e, this._univerInstanceService = n, this._drawingManagerService = t, this._renderManagerService = r, this._init();
+  function H(C) {
+    var De, Me, Re, Oe, de, le;
+    const M = x.relativeFrom, P = x.posOffset, L = Number(C);
+    if (M === L)
+      return;
+    const U = t.getFocusDrawings();
+    if (U.length === 0)
+      return;
+    const { drawingId: y, unitId: E } = U[0], $ = o.getUniverDocInstance(E), F = (De = r.getRenderById(E)) == null ? void 0 : De.with(oe).getSkeleton(), K = (Me = r.getRenderById(E)) == null ? void 0 : Me.with(ye), se = K == null ? void 0 : K.getSegment(), Le = K == null ? void 0 : K.getSegmentPage(), be = (Oe = (Re = $ == null ? void 0 : $.getSelfOrHeaderFooterModel(se).getBody()) == null ? void 0 : Re.customBlocks) == null ? void 0 : Oe.find((Ne) => Ne.blockId === y);
+    if (be == null || F == null || K == null)
+      return;
+    const { startIndex: ke } = be, ae = F.findNodeByCharIndex(ke, se, Le), ne = (de = ae == null ? void 0 : ae.parent) == null ? void 0 : de.parent, te = ne == null ? void 0 : ne.parent, Ie = te == null ? void 0 : te.lines.find((Ne) => Ne.paragraphIndex === (ne == null ? void 0 : ne.paragraphIndex) && Ne.paragraphStart), _e = (le = te == null ? void 0 : te.parent) == null ? void 0 : le.parent;
+    if (ae == null || ne == null || Ie == null || te == null || _e == null)
+      return;
+    let ce = 0;
+    M === G.PARAGRAPH ? ce -= Ie.top : M === G.LINE ? ce -= ne.top : M === G.PAGE && (ce += _e.marginTop), L === G.PARAGRAPH ? ce += Ie.top : L === G.LINE ? ce += ne.top : L === G.PAGE && (ce -= _e.marginTop);
+    const Ce = {
+      relativeFrom: L,
+      posOffset: (P != null ? P : 0) - ce
+    };
+    I("positionV", Ce);
   }
-  _init() {
-    this._listenDrawingFocus();
+  function A(C) {
+    var E;
+    const M = c == null ? void 0 : c.getSnapshot(), P = (E = M == null ? void 0 : M.drawings) == null ? void 0 : E[C.drawingId];
+    if (P == null)
+      return;
+    const { layoutType: L } = P, {
+      positionH: U,
+      positionV: y
+    } = P.docTransform;
+    D(U), b(y), S(L === k.INLINE), N(y.relativeFrom === G.PARAGRAPH || y.relativeFrom === G.LINE);
   }
-  _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));
-          }
-      })
-    );
+  function W() {
+    const C = t.getFocusDrawings();
+    C.length !== 0 && A(C[0]);
   }
-  // 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)
-      return;
-    this.disposeWithMe(
-      Ee(
-        n.changeStart$.subscribe((o) => {
-          var c;
-          this._transformerCache.clear();
-          const { objects: s } = o;
-          for (const d of s.values()) {
-            const { oKey: a, width: g, height: f, left: m, top: p, angle: h } = d, v = this._drawingManagerService.getDrawingOKey(a);
-            if (v == null)
-              continue;
-            const w = this._univerInstanceService.getUniverDocInstance(v.unitId), S = (c = w == null ? void 0 : w.getSnapshot().drawings) == null ? void 0 : c[v.drawingId];
-            (S == null ? void 0 : S.layoutType) === k.INLINE && d.setOpacity(0.2), S != null && this._transformerCache.set(v.drawingId, {
-              drawing: S,
-              top: p,
-              left: m,
-              width: g,
-              height: f,
-              angle: h
-            });
-          }
-        })
-      )
-    );
-    const t = On(this._updateMultipleDrawingDocTransform.bind(this), 50);
-    On(this._nonInlineDrawingTransform.bind(this), 50), this.disposeWithMe(
-      Ee(
-        n.changing$.subscribe((o) => {
-          const { objects: s, offsetX: c, offsetY: d } = o;
-          if (s.size > 1)
-            t(s);
-          else if (s.size === 1) {
-            const a = this._transformerCache.values().next().value, g = s.values().next().value, { width: f, height: m, top: p, left: h, angle: v } = g;
-            if (a && f === a.width && m === a.height && p === a.top && h === a.left && v === a.angle)
-              return;
-            a && (a.drawing.layoutType, k.INLINE), a && a.drawing.layoutType === k.INLINE && c != null && d != null && this._updateInlineDrawingAnchor(a.drawing, c, d);
-          }
-        })
-      )
-    ), this.disposeWithMe(
-      Ee(
-        // eslint-disable-next-line complexity
-        n.changeEnd$.subscribe((o) => {
-          const { objects: s, offsetX: c, offsetY: d } = o;
-          for (const a of s.values()) {
-            const g = this._drawingManagerService.getDrawingOKey(a.oKey);
-            if (g == null)
-              continue;
-            const f = this._transformerCache.get(g == null ? void 0 : g.drawingId);
-            (f == null ? void 0 : f.drawing.layoutType) === k.INLINE && a.setOpacity(1);
-          }
-          if (this._anchorShape && this._anchorShape.hide(), s.size > 1)
-            this._updateMultipleDrawingDocTransform(s);
-          else if (s.size === 1) {
-            const a = this._transformerCache.values().next().value, g = s.values().next().value, { width: f, height: m, top: p, left: h, angle: v } = g;
-            if (a && f === a.width && m === a.height && p === a.top && h === a.left && v === a.angle)
-              return;
-            a && a.drawing.layoutType === k.INLINE ? f !== a.width || m !== a.height || v !== a.angle ? this._updateDrawingSize(a, g) : c != null && d != null && this._moveInlineDrawing(a.drawing, c, d) : a && this._nonInlineDrawingTransform(a.drawing, g);
-          }
-          this._transformerCache.clear();
-        })
-      )
-    );
+  function _(C) {
+    N(C), H(String(C ? G.PARAGRAPH : G.PAGE));
   }
-  // eslint-disable-next-line max-lines-per-function
-  _updateMultipleDrawingDocTransform(e) {
-    if (e.size < 1)
-      return;
-    const n = [];
-    let t, r;
-    for (const o of e.values()) {
-      const { oKey: s, left: c, top: d, angle: a } = o;
-      let { width: g, height: f } = o;
-      const m = this._drawingManagerService.getDrawingOKey(s);
-      if (m == null)
-        continue;
-      t == null && (t = m.unitId), r == null && (r = m.subUnitId);
-      const p = this._transformerCache.get(m.drawingId);
-      if (p == null)
-        continue;
-      const { drawing: h, top: v, left: w, width: S, height: O, angle: D } = p, { width: P, height: b } = this._getPageContentSize(h);
-      if (g = Math.min(g, P), f = Math.min(f, b), (S !== g || O !== f) && n.push({
-        drawingId: m.drawingId,
-        key: "size",
-        value: {
-          width: g,
-          height: f
-        }
-      }), D !== a && n.push({
-        drawingId: m.drawingId,
-        key: "angle",
-        value: a
-      }), v !== d || w !== c) {
-        const T = d - v, N = c - w;
-        T !== 0 && n.push({
-          drawingId: m.drawingId,
-          key: "positionV",
-          value: {
-            relativeFrom: h.docTransform.positionV.relativeFrom,
-            posOffset: h.docTransform.positionV.posOffset + T
+  return Sn(() => {
+    W();
+    const C = t.focus$.subscribe((P) => {
+      if (P.length === 0) {
+        R(!1);
+        return;
+      }
+      R(!0), A(P[0]);
+    }), M = e.onCommandExecuted(async (P) => {
+      P.id === Z.id && W();
+    });
+    return () => {
+      C.unsubscribe(), M.dispose();
+    };
+  }, []), /* @__PURE__ */ g.jsxs("div", { className: V(f.imageCommonPanelGrid, f.imageCommonPanelBorder), style: { display: B ? "block" : "none" }, children: [
+    /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelTitle), children: /* @__PURE__ */ g.jsx("div", { children: n.t("image-position.title") }) }) }),
+    /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ g.jsx("div", { children: n.t("image-position.horizontal") }) }) }),
+    /* @__PURE__ */ g.jsxs("div", { className: f.imageCommonPanelRow, children: [
+      /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ g.jsxs("label", { children: [
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: n.t("image-position.absolutePosition") }) }),
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ g.jsx(
+          Be,
+          {
+            min: Wn,
+            max: Gn,
+            precision: 1,
+            disabled: w,
+            value: O.posOffset,
+            onChange: (C) => {
+              I("positionH", {
+                relativeFrom: O.relativeFrom,
+                posOffset: C
+              });
+            },
+            className: f.imageCommonPanelInput
           }
-        }), N !== 0 && n.push({
-          drawingId: m.drawingId,
-          key: "positionH",
-          value: {
-            relativeFrom: h.docTransform.positionH.relativeFrom,
-            posOffset: h.docTransform.positionH.posOffset + N
+        ) }) })
+      ] }) }),
+      /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ g.jsxs("label", { children: [
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: n.t("image-position.toTheRightOf") }) }),
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ g.jsx(
+          Bn,
+          {
+            value: String(O.relativeFrom),
+            disabled: w,
+            options: h,
+            onChange: j
           }
-        });
-      }
-    }
-    n.length > 0 && t && r && this._commandService.executeCommand(ze.id, {
-      unitId: t,
-      subUnitId: r,
-      drawings: n
-    });
-  }
-  // TODO: @JOCS, Use to draw and update the drawing anchor.
-  _updateDrawingAnchor(e) {
-    if (this._transformerCache.size !== 1)
+        ) }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ g.jsx("div", { children: n.t("image-position.vertical") }) }) }),
+    /* @__PURE__ */ g.jsxs("div", { className: f.imageCommonPanelRow, children: [
+      /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ g.jsxs("label", { children: [
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: n.t("image-position.absolutePosition") }) }),
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ g.jsx(
+          Be,
+          {
+            min: Wn,
+            max: Gn,
+            precision: 1,
+            disabled: w,
+            value: x.posOffset,
+            onChange: (C) => {
+              I("positionV", {
+                relativeFrom: x.relativeFrom,
+                posOffset: C
+              });
+            },
+            className: f.imageCommonPanelInput
+          }
+        ) }) })
+      ] }) }),
+      /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ g.jsxs("label", { children: [
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: n.t("image-position.bellow") }) }),
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ g.jsx(
+          Bn,
+          {
+            disabled: w,
+            value: String(x.relativeFrom),
+            options: v,
+            onChange: H
+          }
+        ) }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ g.jsx("div", { children: n.t("image-position.options") }) }) }),
+    /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, style: { marginBottom: "50px" }, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ g.jsx(Oi, { disabled: w, checked: T, onChange: _, children: n.t("image-position.moveObjectWithText") }) }) })
+  ] });
+}, Qe = 0, en = 100, mr = (i) => {
+  const e = pe(z), n = pe(ln), t = pe(ve), r = pe(Q), o = pe(J), { drawings: s } = i, a = s[0];
+  if (a == null)
+    return null;
+  const { unitId: d } = a, c = o.getUniverDocInstance(d), l = r.getRenderById(d);
+  if ((l == null ? void 0 : l.scene) == null)
+    return null;
+  const [m, p] = ie(!0), [h, v] = ie(!0), [w, S] = ie(!0), [O, D] = ie(me.INLINE), [x, b] = ie(""), [T, N] = ie({
+    distT: 0,
+    distL: 0,
+    distB: 0,
+    distR: 0
+  }), [B, R] = ie(!0);
+  function I(_) {
+    D(_);
+    const C = t.getFocusDrawings();
+    if (C.length === 0)
       return;
-    const n = this._transformerCache.values().next().value, t = e.values().next().value;
-    this._getDrawingAnchor(n.drawing, t);
+    const { unitId: M, subUnitId: P } = C[0], L = C.map(({ unitId: U, subUnitId: y, drawingId: E }) => ({
+      unitId: U,
+      subUnitId: y,
+      drawingId: E
+    }));
+    e.executeCommand(Qn.id, {
+      unitId: M,
+      subUnitId: P,
+      drawings: L,
+      wrappingStyle: _
+    });
   }
-  _updateInlineDrawingAnchor(e, n, t) {
-    var o;
-    if (this._transformerCache.size !== 1)
+  function j(_) {
+    b(_);
+    const C = t.getFocusDrawings();
+    if (C.length === 0)
       return;
-    const { contentBoxPointGroup: r } = (o = this._getInlineDrawingAnchor(e, n, t)) != null ? o : {};
-    r != null && this._createOrUpdateInlineAnchor(e.unitId, r);
+    const M = C.map((P) => ({
+      unitId: P.unitId,
+      subUnitId: P.subUnitId,
+      drawingId: P.drawingId
+    }));
+    e.executeCommand(nt.id, {
+      unitId: C[0].unitId,
+      subUnitId: C[0].unitId,
+      drawings: M,
+      wrapText: _
+    });
   }
-  _getInlineDrawingAnchor(e, n, t) {
-    var E, W;
-    const r = this._renderManagerService.getRenderById(e.unitId), o = r == null ? void 0 : r.with(oe).getSkeleton();
-    if (r == null)
-      return;
-    const { mainComponent: s, scene: c } = r, d = s, a = c.getViewports()[0], {
-      pageLayoutType: g = bn.VERTICAL,
-      pageMarginLeft: f,
-      pageMarginTop: m
-    } = d.getOffsetConfig();
-    let p = null, h = !1, v = -1, w = "";
-    const S = 0.5, O = this._getTransformCoordForDocumentOffset(d, a, n, t);
-    if (O == null)
+  function H(_, C) {
+    if (_ == null)
       return;
-    const D = (E = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : E.with(ye);
-    if (D == null)
+    const M = { ...T, [C]: _ };
+    N(M);
+    const P = t.getFocusDrawings();
+    if (P.length === 0)
       return;
-    const P = o == null ? void 0 : o.findNodeByCoord(
-      O,
-      g,
-      f,
-      m,
-      {
-        strict: !1,
-        segmentId: D.getSegment(),
-        segmentPage: D.getSegmentPage()
+    const L = P.map((U) => ({
+      unitId: U.unitId,
+      subUnitId: U.subUnitId,
+      drawingId: U.drawingId
+    }));
+    e.executeCommand(et.id, {
+      unitId: P[0].unitId,
+      subUnitId: P[0].unitId,
+      drawings: L,
+      dist: {
+        [C]: _
       }
-    );
-    if (P) {
-      const { node: _, ratioX: C, segmentPage: M, segmentId: x } = P;
-      h = C < S, p = _, v = M, w = x;
-    }
-    if (p == null)
-      return;
-    const b = o == null ? void 0 : o.findPositionByGlyph(p, v), T = this._getDocObject();
-    if (b == null || o == null || T == null || kn(b))
-      return;
-    const N = {
-      ...b,
-      isBack: h
-    }, B = T.document.getOffsetConfig(), R = new Rn(B, o), { cursorList: I, contentBoxPointGroup: j } = R.getRangePointData(N, N), { startOffset: H } = (W = Nn(I)) != null ? W : {};
-    if (H != null)
-      return { offset: H, contentBoxPointGroup: j, segmentId: w, segmentPage: v };
+    });
   }
-  // eslint-disable-next-line max-lines-per-function, complexity
-  _getDrawingAnchor(e, n) {
-    var Ie, _e, ce, Ce, De, Me, Re, Oe, de, le, Ne;
-    const t = this._renderManagerService.getRenderById(e.unitId), r = t == null ? void 0 : t.with(oe).getSkeleton(), o = r == null ? void 0 : r.getSkeletonData();
-    if (o == null || t == null)
-      return;
-    const { pages: s, skeHeaders: c, skeFooters: d } = o, { mainComponent: a, scene: g } = t, f = a, m = g.getViewports()[0], { pageLayoutType: p = bn.VERTICAL, pageMarginLeft: h, pageMarginTop: v, docsLeft: w, docsTop: S } = f.getOffsetConfig(), { left: O, top: D, angle: P } = n;
-    let { width: b, height: T } = n;
-    const { positionV: N, positionH: B } = e.docTransform, { width: R, height: I } = this._getPageContentSize(e);
-    b = Math.min(b, R), T = Math.min(T, I);
-    let j = null, H = "", E = -1;
-    const W = !1, _ = {
-      ...e.docTransform,
-      size: {
-        width: b,
-        height: T
-      },
-      angle: P
-    }, { x: C, y: M } = g.getViewportScrollXY(m), x = this._getTransformCoordForDocumentOffset(f, m, O - C, D - M);
-    if (x == null)
-      return;
-    const L = (Ie = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : Ie.with(ye);
-    if (L == null)
+  function A() {
+    const _ = t.getFocusDrawings();
+    _.length !== 0 && W(_[0]);
+  }
+  function W(_) {
+    var K, se;
+    const C = (se = (K = c == null ? void 0 : c.getSnapshot()) == null ? void 0 : K.drawings) == null ? void 0 : se[_.drawingId];
+    if (C == null)
       return;
-    const U = r == null ? void 0 : r.findNodeByCoord(x, p, h, v, {
-      strict: !1,
-      segmentId: L.getSegment(),
-      segmentPage: L.getSegmentPage()
+    const {
+      distT: M = 0,
+      distL: P = 0,
+      distB: L = 0,
+      distR: U = 0,
+      layoutType: y = k.INLINE,
+      behindDoc: E = re.FALSE,
+      wrapText: $ = $e.BOTH_SIDES
+    } = C;
+    if (N({
+      distT: M,
+      distL: P,
+      distB: L,
+      distR: U
+    }), b($), p(y !== k.WRAP_SQUARE), y === k.WRAP_NONE || y === k.INLINE ? v(!0) : v(!1), y === k.WRAP_NONE || y === k.INLINE || y === k.WRAP_TOP_AND_BOTTOM ? S(!0) : S(!1), y === k.WRAP_NONE)
+      E === re.TRUE ? D(me.BEHIND_TEXT) : D(me.IN_FRONT_OF_TEXT);
+    else
+      switch (y) {
+        case k.INLINE:
+          D(me.INLINE);
+          break;
+        case k.WRAP_SQUARE:
+          D(me.WRAP_SQUARE);
+          break;
+        case k.WRAP_TOP_AND_BOTTOM:
+          D(me.WRAP_TOP_AND_BOTTOM);
+          break;
+        default:
+          throw new Error(`Unsupported layout type: ${y}`);
+      }
+  }
+  return Sn(() => {
+    A();
+    const _ = t.focus$.subscribe((M) => {
+      if (M.length === 0) {
+        R(!1);
+        return;
+      }
+      R(!0), W(M[0]);
+    }), C = e.onCommandExecuted(async (M) => {
+      M.id === Z.id && A();
     });
-    if (U) {
-      const { node: he, segmentPage: mn, segmentId: un } = U;
-      j = he, E = mn, H = un;
-    }
-    if (j == null)
-      return;
-    const y = (_e = j.parent) == null ? void 0 : _e.parent, A = y == null ? void 0 : y.parent, $ = (ce = A == null ? void 0 : A.lines.find((he) => he.paragraphIndex === (y == null ? void 0 : y.paragraphIndex) && he.paragraphStart)) != null ? ce : A == null ? void 0 : A.lines[0], F = (Ce = A == null ? void 0 : A.parent) == null ? void 0 : Ce.parent;
-    if (y == null || A == null || $ == null || F == null)
-      return;
-    this._liquid.reset();
-    const K = F.type;
-    for (const he of s) {
-      const { headerId: mn, footerId: un, pageHeight: St, pageWidth: Cn, marginLeft: Dn, marginBottom: Ct } = he, Dt = s.indexOf(he);
-      if (E > -1 && Dt === E) {
-        switch (K) {
-          case Mn.HEADER: {
-            const He = (De = c.get(mn)) == null ? void 0 : De.get(Cn);
-            if (He)
-              this._liquid.translatePagePadding({
-                marginTop: He.marginTop,
-                marginLeft: Dn
-              });
-            else
-              throw new Error("header skeleton not found");
-            break;
+    return () => {
+      _.unsubscribe(), C.dispose();
+    };
+  }, []), /* @__PURE__ */ g.jsxs("div", { className: V(f.imageCommonPanelGrid, f.imageCommonPanelBorder), style: { display: B ? "block" : "none" }, children: [
+    /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelTitle), children: /* @__PURE__ */ g.jsx("div", { children: n.t("image-text-wrap.title") }) }) }),
+    /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ g.jsx("div", { children: n.t("image-text-wrap.wrappingStyle") }) }) }),
+    /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelRow), children: /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn), children: /* @__PURE__ */ g.jsxs(Un, { value: O, onChange: I, direction: "vertical", children: [
+      /* @__PURE__ */ g.jsx(xe, { value: me.INLINE, children: n.t("image-text-wrap.inline") }),
+      /* @__PURE__ */ g.jsx(xe, { value: me.WRAP_SQUARE, children: n.t("image-text-wrap.square") }),
+      /* @__PURE__ */ g.jsx(xe, { value: me.WRAP_TOP_AND_BOTTOM, children: n.t("image-text-wrap.topAndBottom") }),
+      /* @__PURE__ */ g.jsx(xe, { value: me.BEHIND_TEXT, children: n.t("image-text-wrap.behindText") }),
+      /* @__PURE__ */ g.jsx(xe, { value: me.IN_FRONT_OF_TEXT, children: n.t("image-text-wrap.inFrontText") })
+    ] }) }) }),
+    /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ g.jsx("div", { children: n.t("image-text-wrap.wrapText") }) }) }),
+    /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelRow), children: /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn), children: /* @__PURE__ */ g.jsxs(Un, { disabled: m, value: x, onChange: j, direction: "horizontal", children: [
+      /* @__PURE__ */ g.jsx(xe, { value: $e.BOTH_SIDES, children: n.t("image-text-wrap.bothSide") }),
+      /* @__PURE__ */ g.jsx(xe, { value: $e.LEFT, children: n.t("image-text-wrap.leftOnly") }),
+      /* @__PURE__ */ g.jsx(xe, { value: $e.RIGHT, children: n.t("image-text-wrap.rightOnly") })
+    ] }) }) }),
+    /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ g.jsx("div", { children: n.t("image-text-wrap.distanceFromText") }) }) }),
+    /* @__PURE__ */ g.jsxs("div", { className: f.imageCommonPanelRow, children: [
+      /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ g.jsxs("label", { children: [
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: n.t("image-text-wrap.top") }) }),
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ g.jsx(
+          Be,
+          {
+            min: Qe,
+            max: en,
+            disabled: h,
+            precision: 1,
+            value: T.distT,
+            onChange: (_) => {
+              H(_, "distT");
+            },
+            className: f.imageCommonPanelInput
           }
-          case Mn.FOOTER: {
-            const He = (Me = d.get(un)) == null ? void 0 : Me.get(Cn);
-            if (He)
-              this._liquid.translatePagePadding({
-                marginTop: St - Ct + He.marginTop,
-                marginLeft: Dn
-              });
-            else
-              throw new Error("footer skeleton not found");
-            break;
+        ) }) })
+      ] }) }),
+      /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ g.jsxs("label", { children: [
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: n.t("image-text-wrap.left") }) }),
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ g.jsx(
+          Be,
+          {
+            min: Qe,
+            max: en,
+            disabled: w,
+            precision: 1,
+            value: T.distL,
+            onChange: (_) => {
+              H(_, "distL");
+            },
+            className: f.imageCommonPanelInput
+          }
+        ) }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ g.jsxs("div", { className: f.imageCommonPanelRow, children: [
+      /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ g.jsxs("label", { children: [
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: n.t("image-text-wrap.bottom") }) }),
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ g.jsx(
+          Be,
+          {
+            min: Qe,
+            max: en,
+            disabled: h,
+            precision: 1,
+            value: T.distB,
+            onChange: (_) => {
+              H(_, "distB");
+            },
+            className: f.imageCommonPanelInput
+          }
+        ) }) })
+      ] }) }),
+      /* @__PURE__ */ g.jsx("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ g.jsxs("label", { children: [
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: n.t("image-text-wrap.right") }) }),
+        /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ g.jsx("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ g.jsx(
+          Be,
+          {
+            min: Qe,
+            max: en,
+            disabled: w,
+            precision: 1,
+            value: T.distR,
+            onChange: (_) => {
+              H(_, "distR");
+            },
+            className: f.imageCommonPanelInput
           }
+        ) }) })
+      ] }) })
+    ] })
+  ] });
+}, ur = () => {
+  const i = pe(ve), e = i.getFocusDrawings(), [n, t] = ie(e);
+  return Sn(() => {
+    const r = i.focus$.subscribe((o) => {
+      t(o);
+    });
+    return () => {
+      r.unsubscribe();
+    };
+  }, []), !!(n != null && n.length) && /* @__PURE__ */ g.jsxs("div", { className: f.imageCommonPanel, children: [
+    /* @__PURE__ */ g.jsx(Yt, { drawings: n, hasAlign: !1, hasCropper: !1, hasGroup: !1, hasTransform: !1 }),
+    /* @__PURE__ */ g.jsx(mr, { drawings: n }),
+    /* @__PURE__ */ g.jsx(gr, { drawings: n })
+  ] });
+}, wt = "addition-and-subtraction-single", vt = "doc.menu.image", It = mt.id, fr = (i) => {
+  const e = i.get(_n), n = i.get(J);
+  return new Di((t) => {
+    const r = e.textSelection$.subscribe(() => {
+      var s;
+      const o = e.getActiveTextRange();
+      if (o) {
+        const { segmentId: a, startOffset: d, endOffset: c } = o, l = n.getCurrentUniverDocInstance(), u = (s = l == null ? void 0 : l.getSelfOrHeaderFooterModel(a).getBody()) == null ? void 0 : s.tables;
+        if (u && u.length && u.some((m) => {
+          const { startIndex: p, endIndex: h } = m;
+          return d >= p && d < h || c >= p && c < h;
+        })) {
+          t.next(!0);
+          return;
         }
-        break;
-      }
-      if (this._liquid.translatePagePadding(he), he === F)
-        break;
-      this._liquid.restorePagePadding(he), this._liquid.translatePage(he, p, h, v);
-    }
-    switch (N.relativeFrom === G.LINE ? j = y.divides[0].glyphGroup[0] : j = (le = (de = (Oe = (Re = $.divides) == null ? void 0 : Re[0]) == null ? void 0 : Oe.glyphGroup) == null ? void 0 : de[0]) != null ? le : j, _.positionH = {
-      relativeFrom: B.relativeFrom,
-      posOffset: O - this._liquid.x - w
-    }, B.relativeFrom) {
-      case ee.MARGIN: {
-        _.positionH.posOffset = O - this._liquid.x - w - F.marginLeft;
-        break;
-      }
-      case ee.COLUMN: {
-        _.positionH.posOffset = O - this._liquid.x - w - A.left;
-        break;
-      }
-    }
-    switch (_.positionV = {
-      relativeFrom: N.relativeFrom,
-      posOffset: D - this._liquid.y - S
-    }, N.relativeFrom) {
-      case G.PAGE: {
-        _.positionV.posOffset = D - this._liquid.y - S - F.marginTop;
-        break;
-      }
-      case G.LINE: {
-        _.positionV.posOffset = D - this._liquid.y - S - y.top;
-        break;
+      } else {
+        t.next(!0);
+        return;
       }
-      case G.PARAGRAPH: {
-        _.positionV.posOffset = D - this._liquid.y - S - $.top;
-        break;
+      t.next(!1);
+    });
+    return () => r.unsubscribe();
+  });
+};
+function hr(i) {
+  return {
+    id: vt,
+    type: qn.SUBITEMS,
+    icon: wt,
+    tooltip: "docImage.title",
+    disabled$: fr(i),
+    hidden$: Xn(i, Te.UNIVER_DOC)
+  };
+}
+function pr(i) {
+  return {
+    id: It,
+    title: "docImage.upload.float",
+    type: qn.BUTTON,
+    hidden$: Xn(i, Te.UNIVER_DOC)
+  };
+}
+const wr = {
+  [di.LAYOUT]: {
+    [vt]: {
+      order: 0,
+      menuItemFactory: hr,
+      [It]: {
+        order: 0,
+        menuItemFactory: pr
       }
     }
-    if (j == null)
-      return;
-    const se = r == null ? void 0 : r.findPositionByGlyph(j, E), Le = this._getDocObject();
-    if (se == null || r == null || Le == null || kn(se))
-      return;
-    const be = {
-      ...se,
-      isBack: W
-    }, ke = Le.document.getOffsetConfig(), ae = new Rn(ke, r), { cursorList: ne } = ae.getRangePointData(be, be), { startOffset: te } = (Ne = Nn(ne)) != null ? Ne : {};
-    if (te != null)
-      return { offset: te, docTransform: _, segmentId: H, segmentPage: E };
   }
-  // Update drawing when use transformer to resize it.
-  _updateDrawingSize(e, n) {
-    const t = [], { drawing: r, width: o, height: s, angle: c } = e, { unitId: d, subUnitId: a } = r;
-    let { width: g, height: f, angle: m } = n;
-    const { width: p, height: h } = this._getPageContentSize(r);
-    g = Math.min(p, g), f = Math.min(h, f), (g !== o || f !== s) && t.push({
-      drawingId: r.drawingId,
-      key: "size",
-      value: {
-        width: g,
-        height: f
-      }
-    }), m !== c && t.push({
-      drawingId: r.drawingId,
-      key: "angle",
-      value: m
-    }), t.length > 0 && d && a && this._commandService.executeCommand(ze.id, {
-      unitId: d,
-      subUnitId: a,
-      drawings: t
-    });
+};
+function Ye(i) {
+  return i.getContextValue(Et) && i.getContextValue(tn);
+}
+const vr = {
+  id: Ke.id,
+  description: "shortcut.doc.drawing-move-down",
+  group: "4_doc-drawing-view",
+  binding: Fe.ARROW_DOWN,
+  priority: 100,
+  preconditions: Ye,
+  staticParameters: {
+    direction: ue.DOWN
   }
-  // Update inline drawing when use transformer to move it.
-  _moveInlineDrawing(e, n, t) {
-    const r = this._getInlineDrawingAnchor(e, n, t), { offset: o, segmentId: s, segmentPage: c } = r != null ? r : {};
-    return this._commandService.executeCommand(ct.id, {
-      unitId: e.unitId,
-      subUnitId: e.unitId,
-      drawing: e,
-      offset: o,
-      segmentId: s,
-      segmentPage: c,
-      needRefreshDrawings: o == null
-    });
+}, Ir = {
+  id: Ke.id,
+  description: "shortcut.doc.drawing-move-up",
+  group: "4_doc-drawing-view",
+  binding: Fe.ARROW_UP,
+  priority: 100,
+  preconditions: Ye,
+  staticParameters: {
+    direction: ue.UP
   }
-  // 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: s, height: c, angle: d } = n, a = t == null ? void 0 : t.with(oe).getSkeleton(), g = a == null ? void 0 : a.getSkeletonData(), { pages: f } = g != null ? g : {};
-    if (g == null || t == null || f == null)
-      return {
-        left: r,
-        top: o,
-        width: s,
-        height: c,
-        angle: d
-      };
-    const { mainComponent: m } = t, p = m, { top: h, pageLayoutType: v, pageMarginLeft: w, pageMarginTop: S } = p;
-    let O = o;
-    this._liquid.reset();
-    for (const D of f) {
-      const { marginBottom: P, pageHeight: b } = D, T = f.indexOf(D), N = f[T + 1];
-      if (N == null)
-        continue;
-      if (xe.hasIntersectionBetweenTwoRanges(
-        o,
-        o + c,
-        this._liquid.y + h + b - P,
-        this._liquid.y + h + b + S + N.marginTop
-      )) {
-        const R = o + c / 2, I = this._liquid.y + h + b + S / 2;
-        R < I ? O = Math.min(o, this._liquid.y + h + b - P - c) : O = Math.max(o, this._liquid.y + h + b + S + N.marginTop);
-      }
-      this._liquid.translatePage(D, v, w, S);
-    }
-    return {
-      left: r,
-      top: O,
-      width: s,
-      height: c,
-      angle: d
-    };
+}, _r = {
+  id: Ke.id,
+  description: "shortcut.doc.drawing-move-left",
+  group: "4_doc-drawing-view",
+  binding: Fe.ARROW_LEFT,
+  priority: 100,
+  preconditions: Ye,
+  staticParameters: {
+    direction: ue.LEFT
   }
-  _nonInlineDrawingTransform(e, n, t = !1) {
-    const r = e.isMultiTransform === re.TRUE ? n : this._limitDrawingInPage(e, n);
-    if (t && r.top !== n.top)
-      return;
-    const o = this._getDrawingAnchor(e, r), { offset: s, docTransform: c, segmentId: d, segmentPage: a } = o != null ? o : {};
-    return s == null || c == null ? this._updateMultipleDrawingDocTransform(/* @__PURE__ */ new Map([[e.drawingId, n]])) : this._commandService.executeCommand(dt.id, {
-      unitId: e.unitId,
-      subUnitId: e.unitId,
-      drawing: e,
-      offset: s,
-      docTransform: c,
-      segmentId: d,
-      segmentPage: a
-    });
+}, Sr = {
+  id: Ke.id,
+  description: "shortcut.doc.drawing-move-right",
+  group: "4_doc-drawing-view",
+  binding: Fe.ARROW_RIGHT,
+  priority: 100,
+  preconditions: Ye,
+  staticParameters: {
+    direction: ue.RIGHT
   }
-  _getSceneAndTransformerByDrawingSearch(e) {
-    if (e == null)
-      return;
-    const n = this._renderManagerService.getRenderById(e), t = n == null ? void 0 : n.scene;
-    if (t == null)
-      return;
-    const r = t.getTransformerByCreate();
-    return { scene: t, transformer: r };
+}, Cr = {
+  id: at.id,
+  description: "shortcut.doc.drawing-delete",
+  group: "4_doc-drawing-view",
+  // when focusing on any other input tag do not trigger this shortcut
+  preconditions: Ye,
+  binding: Fe.DELETE,
+  mac: Fe.BACKSPACE
+};
+var Dr = Object.defineProperty, Or = Object.getOwnPropertyDescriptor, xr = (i, e, n, t) => {
+  for (var r = t > 1 ? void 0 : t ? Or(e, n) : e, o = i.length - 1, s; o >= 0; o--)
+    (s = i[o]) && (r = (t ? s(e, n, r) : s(r)) || r);
+  return t && r && Dr(e, n, r), r;
+}, nn = (i, e) => (n, t) => e(n, t, i);
+let an = class extends Xe {
+  constructor(i, e, n, t) {
+    super(), this._componentManager = i, this._menuManagerService = e, this._commandService = n, this._shortcutService = t, this._init();
   }
-  _getTransformCoordForDocumentOffset(e, n, t, r) {
-    const { documentTransform: o } = e.getOffsetConfig(), s = n.transformVector2SceneCoord(Qt.FromArray([t, r]));
-    if (s)
-      return o.clone().invert().applyPoint(s);
+  _initCustomComponents() {
+    const i = this._componentManager;
+    this.disposeWithMe(i.register(wt, st)), this.disposeWithMe(i.register(ut, ur));
   }
-  _createOrUpdateInlineAnchor(e, n) {
-    const t = this._renderManagerService.getRenderById(e);
-    if (t == null)
-      return;
-    const { mainComponent: r, scene: o } = t, s = r, {
-      docsLeft: c,
-      docsTop: d
-    } = s.getOffsetConfig(), a = ui(n), { left: g, top: f, height: m } = a, p = g + c, h = f + d;
-    if (this._anchorShape) {
-      this._anchorShape.transformByState({ left: p, top: h, height: m }), this._anchorShape.show();
-      return;
-    }
-    const v = 6, w = new ei(xr + xe.generateRandomId(v), {
-      left: p,
-      top: h,
-      height: m,
-      strokeWidth: 2,
-      stroke: ni(Rt.darkGray, 1),
-      evented: !1
-    });
-    this._anchorShape = w, o.addObject(w, fi);
+  _initMenus() {
+    this._menuManagerService.mergeMenu(wr);
   }
-  _getDocObject() {
-    return hi(this._univerInstanceService, this._renderManagerService);
+  _initCommands() {
+    [
+      mt,
+      dt,
+      Qn,
+      et,
+      nt,
+      qe,
+      tt,
+      it,
+      Cn,
+      ft,
+      qi,
+      ht,
+      ct,
+      gt,
+      Ke,
+      at,
+      lt
+    ].forEach((i) => this.disposeWithMe(this._commandService.registerCommand(i)));
   }
-  _getPageContentSize(e) {
-    const n = this._renderManagerService.getRenderById(e.unitId), t = n == null ? void 0 : n.with(oe).getSkeleton(), r = 500, o = 500, s = t == null ? void 0 : t.getSkeletonData();
-    if (s == null || n == null)
-      return {
-        width: r,
-        height: o
-      };
-    const { pages: c } = s;
-    let d = null;
-    for (const a of c) {
-      const { skeDrawings: g } = a;
-      if (g.has(e.drawingId)) {
-        d = a;
-        break;
-      }
-    }
-    if (d) {
-      const { pageWidth: a, pageHeight: g, marginLeft: f, marginBottom: m, marginRight: p, marginTop: h } = d;
-      return {
-        width: Math.max(r, a - f - p),
-        height: Math.max(o, g - h - m)
-      };
-    } else
-      return {
-        width: r,
-        height: o
-      };
+  _initShortcuts() {
+    [
+      // sheet drawing shortcuts
+      vr,
+      Ir,
+      _r,
+      Sr,
+      Cr
+    ].forEach((i) => {
+      this.disposeWithMe(this._shortcutService.registerShortcut(i));
+    });
+  }
+  _init() {
+    this._initCommands(), this._initCustomComponents(), this._initMenus(), this._initShortcuts();
   }
 };
-sn = Pr([
-  en(0, z),
-  en(1, Z),
-  en(2, ve),
-  en(3, Q)
-], sn);
-var Tr = Object.defineProperty, yr = Object.getOwnPropertyDescriptor, br = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? yr(e, n) : e, o = i.length - 1, s; o >= 0; o--)
+an = xr([
+  nn(0, we(li)),
+  nn(1, gi),
+  nn(2, z),
+  nn(3, mi)
+], an);
+var Pr = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, yr = (i, e, n, t) => {
+  for (var r = t > 1 ? void 0 : t ? Tr(e, n) : e, o = i.length - 1, s; o >= 0; o--)
     (s = i[o]) && (r = (t ? s(e, n, r) : s(r)) || r);
-  return t && r && Tr(e, n, r), r;
-}, Ge = (i, e) => (n, t) => e(n, t, i);
-let an = class extends Nt {
+  return t && r && Pr(e, n, r), r;
+}, Ve = (i, e) => (n, t) => e(n, t, i);
+let cn = class extends At {
   constructor(e, n, t, r, o) {
     super();
     Se(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
     this._drawingManagerService = e, this._canvasPopManagerService = n, this._renderManagerService = t, this._univerInstanceService = r, this._contextService = o, this._init();
   }
   _init() {
-    this._univerInstanceService.getCurrentTypeOfUnit$(Te.UNIVER_DOC).pipe(Ln(this.dispose$)).subscribe((e) => this._create(e)), this._univerInstanceService.getTypeOfUnitDisposed$(Te.UNIVER_DOC).pipe(Ln(this.dispose$)).subscribe((e) => this._dispose(e)), this._univerInstanceService.getAllUnitsForType(Te.UNIVER_DOC).forEach((e) => this._create(e));
+    this._univerInstanceService.getCurrentTypeOfUnit$(Te.UNIVER_DOC).pipe(An(this.dispose$)).subscribe((e) => this._create(e)), this._univerInstanceService.getTypeOfUnitDisposed$(Te.UNIVER_DOC).pipe(An(this.dispose$)).subscribe((e) => this._dispose(e)), this._univerInstanceService.getAllUnitsForType(Te.UNIVER_DOC).forEach((e) => this._create(e));
   }
   _dispose(e) {
     const n = e.getUnitId();
@@ -2238,7 +2244,7 @@ let an = class extends Nt {
   _hasCropObject(e) {
     const n = e.getAllObjects();
     for (const t of n)
-      if (t instanceof Xt)
+      if (t instanceof Jt)
         return !0;
     return !1;
   }
@@ -2253,52 +2259,52 @@ let an = class extends Nt {
       return;
     const r = [];
     this.disposeWithMe(
-      Ee(
+      Ae(
         t.createControl$.subscribe(() => {
           if (this._hasCropObject(n))
             return;
           const s = t.getSelectedObjectMap();
           if (r.forEach((w) => w.dispose()), r.length = 0, s.size > 1)
             return;
-          const c = s.values().next().value;
-          if (!c)
-            return;
-          const d = c.oKey, a = this._drawingManagerService.getDrawingOKey(d);
+          const a = s.values().next().value;
           if (!a)
             return;
-          const { unitId: g, subUnitId: f, drawingId: m } = a, p = this._canvasPopManagerService.attachPopupToObject(
-            c,
+          const d = a.oKey, c = this._drawingManagerService.getDrawingOKey(d);
+          if (!c)
+            return;
+          const { unitId: l, subUnitId: u, drawingId: m } = c, p = this._canvasPopManagerService.attachPopupToObject(
+            a,
             {
-              componentKey: Kt,
+              componentKey: Zt,
               direction: "horizontal",
               offset: [2, 0],
               extraProps: {
-                menuItems: this._getImageMenuItems(g, f, m)
+                menuItems: this._getImageMenuItems(l, u, m)
               }
             },
-            g
+            l
           );
-          r.push(this.disposeWithMe(p)), !this._drawingManagerService.getFocusDrawings().find((w) => w.unitId === g && w.subUnitId === f && w.drawingId === m) && this._drawingManagerService.focusDrawing([{
-            unitId: g,
-            subUnitId: f,
+          r.push(this.disposeWithMe(p)), !this._drawingManagerService.getFocusDrawings().find((w) => w.unitId === l && w.subUnitId === u && w.drawingId === m) && this._drawingManagerService.focusDrawing([{
+            unitId: l,
+            subUnitId: u,
             drawingId: m
           }]);
         })
       )
     ), this.disposeWithMe(
-      Ee(
+      Ae(
         t.clearControl$.subscribe(() => {
-          r.forEach((s) => s.dispose()), r.length = 0, this._contextService.setContextValue(nn, !1), this._drawingManagerService.focusDrawing(null);
+          r.forEach((s) => s.dispose()), r.length = 0, this._contextService.setContextValue(tn, !1), this._drawingManagerService.focusDrawing(null);
         })
       )
     ), this.disposeWithMe(
-      Ee(
+      Ae(
         t.changing$.subscribe(() => {
           r.forEach((s) => s.dispose()), r.length = 0;
         })
       )
     ), this.disposeWithMe(
-      Ee(
+      Ae(
         t.changeStart$.subscribe(() => {
           r.forEach((s) => s.dispose()), r.length = 0;
         })
@@ -2310,21 +2316,21 @@ let an = class extends Nt {
       {
         label: "image-popup.edit",
         index: 0,
-        commandId: mt.id,
+        commandId: ht.id,
         commandParams: { unitId: e, subUnitId: n, drawingId: t },
-        disable: !1
+        disable: !!jt.includes(e)
       },
       {
         label: "image-popup.delete",
         index: 1,
-        commandId: Sn.id,
+        commandId: Cn.id,
         commandParams: { unitId: e, drawings: [{ unitId: e, subUnitId: n, drawingId: t }] },
         disable: !1
       },
       {
         label: "image-popup.crop",
         index: 2,
-        commandId: Yt.id,
+        commandId: Qt.id,
         commandParams: { unitId: e, subUnitId: n, drawingId: t },
         disable: !0
         // TODO: @JOCS, feature is not ready.
@@ -2332,7 +2338,7 @@ let an = class extends Nt {
       {
         label: "image-popup.reset",
         index: 3,
-        commandId: Zt.id,
+        commandId: ei.id,
         commandParams: [{ unitId: e, subUnitId: n, drawingId: t }],
         disable: !0
         // TODO: @JOCS, feature is not ready.
@@ -2340,23 +2346,23 @@ let an = class extends Nt {
     ];
   }
 };
-an = br([
-  Ge(0, ve),
-  Ge(1, we(pi)),
-  Ge(2, Q),
-  Ge(3, Z),
-  Ge(4, Wn)
-], an);
-var Mr = Object.defineProperty, Rr = Object.getOwnPropertyDescriptor, Nr = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? Rr(e, n) : e, o = i.length - 1, s; o >= 0; o--)
+cn = yr([
+  Ve(0, ve),
+  Ve(1, we(Ii)),
+  Ve(2, Q),
+  Ve(3, J),
+  Ve(4, $n)
+], cn);
+var br = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, Rr = (i, e, n, t) => {
+  for (var r = t > 1 ? void 0 : t ? Mr(e, n) : e, o = i.length - 1, s; o >= 0; o--)
     (s = i[o]) && (r = (t ? s(e, n, r) : s(r)) || r);
-  return t && r && Mr(e, n, r), r;
-}, Ae = (i, e) => (n, t) => e(n, t, i);
-let wn = class extends qe {
-  constructor(e, n, t, r, o, s, c, d) {
+  return t && r && br(e, n, r), r;
+}, Ee = (i, e) => (n, t) => e(n, t, i);
+let vn = class extends Xe {
+  constructor(e, n, t, r, o, s, a, d) {
     super();
-    Se(this, "_liquid", new Gn());
-    this._context = e, this._docSkeletonManagerService = n, this._commandService = t, this._editorService = r, this._drawingManagerService = o, this._docRefreshDrawingsService = s, this._univerInstanceService = c, this._lifecycleService = d, this._initialize(), this._commandExecutedListener();
+    Se(this, "_liquid", new zn());
+    this._context = e, this._docSkeletonManagerService = n, this._commandService = t, this._editorService = r, this._drawingManagerService = o, this._docRefreshDrawingsService = s, this._univerInstanceService = a, this._lifecycleService = d, this._initialize(), this._commandExecutedListener();
   }
   _initialize() {
     this._initialRenderRefresh(), this._drawingInitializeListener(), this._initResize();
@@ -2369,30 +2375,30 @@ let wn = class extends qe {
     });
   }
   _commandExecutedListener() {
-    const e = [J.id, vi.id];
+    const e = [Z.id, Si.id];
     this.disposeWithMe(
       this._commandService.onCommandExecuted((n) => {
         if (e.includes(n.id)) {
           const t = n.params, { unitId: r } = t, { unitId: o, mainComponent: s } = this._context;
           if (r !== o)
             return;
-          const c = this._docSkeletonManagerService.getSkeleton();
-          if (c == null)
+          const a = this._docSkeletonManagerService.getSkeleton();
+          if (a == null)
             return;
-          if (this._editorService.isEditor(o)) {
+          if (this._editorService.isEditor(o) && o !== Bt) {
             s == null || s.makeDirty();
             return;
           }
-          this._refreshDrawing(c);
+          this._refreshDrawing(a);
         }
       })
     );
   }
   _initResize() {
     this.disposeWithMe(
-      Et(this._context.engine.onTransformChange$).pipe(
-        Bn((e) => e.type === ti.resize),
-        zn(16)
+      Ut(this._context.engine.onTransformChange$).pipe(
+        jn((e) => e.type === oi.resize),
+        Kn(16)
       ).subscribe(() => {
         var t;
         const e = this._docSkeletonManagerService.getSkeleton(), { scene: n } = this._context;
@@ -2405,17 +2411,17 @@ let wn = class extends qe {
     const n = e == null ? void 0 : e.getSkeletonData(), { mainComponent: t, unitId: r } = this._context, o = t;
     if (!n)
       return;
-    const { left: s, top: c, pageLayoutType: d, pageMarginLeft: a, pageMarginTop: g } = o, { pages: f, skeHeaders: m, skeFooters: p } = n, h = {};
+    const { left: s, top: a, pageLayoutType: d, pageMarginLeft: c, pageMarginTop: l } = o, { pages: u, skeHeaders: m, skeFooters: p } = n, h = {};
     this._liquid.reset();
-    for (let P = 0, b = f.length; P < b; P++) {
-      const T = f[P], { headerId: N, footerId: B, pageWidth: R } = T;
+    for (let x = 0, b = u.length; x < b; x++) {
+      const T = u[x], { headerId: N, footerId: B, pageWidth: R } = T;
       if (N) {
         const I = (O = m.get(N)) == null ? void 0 : O.get(R);
         I && this._calculateDrawingPosition(
           r,
           I,
           s,
-          c,
+          a,
           h,
           I.marginTop,
           T.marginLeft
@@ -2427,39 +2433,39 @@ let wn = class extends qe {
           r,
           I,
           s,
-          c,
+          a,
           h,
           T.pageHeight - T.marginBottom + I.marginTop,
           T.marginLeft
         );
       }
-      this._calculateDrawingPosition(r, T, s, c, h, T.marginTop, T.marginLeft), this._liquid.translatePage(T, d, a, g);
+      this._calculateDrawingPosition(r, T, s, a, h, T.marginTop, T.marginLeft), this._liquid.translatePage(T, d, c, l);
     }
-    const v = Object.values(h), w = v.filter((P) => !P.isMultiTransform), S = v.filter((P) => P.isMultiTransform);
+    const v = Object.values(h), w = v.filter((x) => !x.isMultiTransform), S = v.filter((x) => x.isMultiTransform);
     w.length > 0 && this._drawingManagerService.refreshTransform(w), this._handleMultiDrawingsTransform(S);
   }
   _handleMultiDrawingsTransform(e) {
     const { scene: n, unitId: t } = this._context, r = n.getTransformerByCreate();
     e.forEach((d) => {
-      const a = this._drawingManagerService.getDrawingByParam(d);
-      a != null && (a.transform = d.transform, a.transforms = d.transforms, a.isMultiTransform = d.isMultiTransform);
+      const c = this._drawingManagerService.getDrawingByParam(d);
+      c != null && (c.transform = d.transform, c.transforms = d.transforms, c.isMultiTransform = d.isMultiTransform);
     });
-    const s = [...r.getSelectedObjectMap().keys()], c = Object.values(this._drawingManagerService.getDrawingData(t, t)).filter((d) => d.isMultiTransform === re.TRUE);
-    this._drawingManagerService.removeNotification(c), e.length > 0 && this._drawingManagerService.addNotification(e);
+    const s = [...r.getSelectedObjectMap().keys()], a = Object.values(this._drawingManagerService.getDrawingData(t, t)).filter((d) => d.isMultiTransform === re.TRUE);
+    this._drawingManagerService.removeNotification(a), e.length > 0 && this._drawingManagerService.addNotification(e);
     for (const d of s) {
-      const a = n.getObject(d);
-      a && r.setSelectedControl(a);
+      const c = n.getObject(d);
+      c && r.setSelectedControl(c);
     }
   }
-  _calculateDrawingPosition(e, n, t, r, o, s, c) {
+  _calculateDrawingPosition(e, n, t, r, o, s, a) {
     const { skeDrawings: d } = n;
     this._liquid.translatePagePadding({
       marginTop: s,
-      marginLeft: c
-    }), d.forEach((a) => {
-      const { aLeft: g, aTop: f, height: m, width: p, angle: h, drawingId: v, drawingOrigin: w } = a, S = w.layoutType === k.WRAP_NONE && w.behindDoc === re.TRUE, { isMultiTransform: O = re.FALSE } = w, D = {
-        left: g + t + this._liquid.x,
-        top: f + r + this._liquid.y,
+      marginLeft: a
+    }), d.forEach((c) => {
+      const { aLeft: l, aTop: u, height: m, width: p, angle: h, drawingId: v, drawingOrigin: w } = c, S = w.layoutType === k.WRAP_NONE && w.behindDoc === re.TRUE, { isMultiTransform: O = re.FALSE } = w, D = {
+        left: l + t + this._liquid.x,
+        top: u + r + this._liquid.y,
         width: p,
         height: m,
         angle: h
@@ -2475,7 +2481,7 @@ let wn = class extends qe {
       } : O === re.TRUE && o[v].transforms.push(D);
     }), this._liquid.restorePagePadding({
       marginTop: s,
-      marginLeft: c
+      marginLeft: a
     });
   }
   _drawingInitializeListener() {
@@ -2485,69 +2491,69 @@ let wn = class extends qe {
     };
     this._lifecycleService.stage === Pn.Steady ? setTimeout(() => {
       e();
-    }, 1e3) : this._lifecycleService.lifecycle$.pipe(Bn((n) => n === Pn.Steady)).subscribe(e);
+    }, 1e3) : this._lifecycleService.lifecycle$.pipe(jn((n) => n === Pn.Steady)).subscribe(e);
   }
 };
-wn = Nr([
-  Ae(1, we(oe)),
-  Ae(2, z),
-  Ae(3, wi),
-  Ae(4, ve),
-  Ae(5, we(ln)),
-  Ae(6, Z),
-  Ae(7, we(At))
-], wn);
-var It = Object.defineProperty, Ar = Object.getOwnPropertyDescriptor, Er = (i, e, n) => e in i ? It(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n, jr = (i, e, n, t) => {
-  for (var r = t > 1 ? void 0 : t ? Ar(e, n) : e, o = i.length - 1, s; o >= 0; o--)
+vn = Rr([
+  Ee(1, we(oe)),
+  Ee(2, z),
+  Ee(3, _i),
+  Ee(4, ve),
+  Ee(5, we(gn)),
+  Ee(6, J),
+  Ee(7, we(Lt))
+], vn);
+var _t = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, Er = (i, e, n) => e in i ? _t(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n, Ar = (i, e, n, t) => {
+  for (var r = t > 1 ? void 0 : t ? Nr(e, n) : e, o = i.length - 1, s; o >= 0; o--)
     (s = i[o]) && (r = (t ? s(e, n, r) : s(r)) || r);
-  return t && r && It(e, n, r), r;
-}, pn = (i, e) => (n, t) => e(n, t, i), _t = (i, e, n) => Er(i, typeof e != "symbol" ? e + "" : e, n);
-const Lr = "DOC_DRAWING_UI_PLUGIN";
-let cn = class extends Bt {
-  constructor(i = Pi, e, n, t) {
+  return t && r && _t(e, n, r), r;
+}, wn = (i, e) => (n, t) => e(n, t, i), St = (i, e, n) => Er(i, typeof e != "symbol" ? e + "" : e, n);
+const jr = "DOC_DRAWING_UI_PLUGIN";
+let dn = class extends Ht {
+  constructor(i = yi, e, n, t) {
     super(), this._config = i, this._injector = e, this._renderManagerSrv = n, this._configService = t;
     const { ...r } = this._config;
-    this._configService.setConfig(Oi, r);
+    this._configService.setConfig(Ti, r);
   }
   onStarting() {
     [
-      [rn],
       [an],
-      [sn],
+      [cn],
       [on],
-      [ln]
+      [rn],
+      [gn]
     ].forEach((e) => this._injector.add(e));
   }
   onReady() {
     [
-      [tn],
-      [wn]
-    ].forEach((i) => this._renderManagerSrv.registerRenderModule(Te.UNIVER_DOC, i)), this._injector.get(on), this._injector.get(rn), this._injector.get(sn);
+      [sn],
+      [vn]
+    ].forEach((i) => this._renderManagerSrv.registerRenderModule(Te.UNIVER_DOC, i)), this._injector.get(rn), this._injector.get(an), this._injector.get(on);
   }
   onRendered() {
-    this._injector.get(an);
+    this._injector.get(cn);
   }
 };
-_t(cn, "type", Te.UNIVER_DOC);
-_t(cn, "pluginName", Lr);
-cn = jr([
-  jt(Jt, zt, Ft, li),
-  pn(1, we(Lt)),
-  pn(2, Q),
-  pn(3, Ut)
-], cn);
+St(dn, "type", Te.UNIVER_DOC);
+St(dn, "pluginName", jr);
+dn = Ar([
+  Ft(ni, Kt, Gt, ui),
+  wn(1, we(kt)),
+  wn(2, Q),
+  wn(3, Wt)
+], dn);
 export {
-  ji as ClearDocDrawingTransformerOperation,
-  Jn as DeleteDocDrawingsCommand,
-  mt as EditDocDrawingOperation,
-  Qn as GroupDocDrawingCommand,
-  wt as IMAGE_MENU_ID,
-  et as InsertDocDrawingCommand,
-  it as InsertDocImageCommand,
-  Xe as MoveDocDrawingsCommand,
-  Sn as RemoveDocDrawingCommand,
-  nt as SetDocDrawingArrangeCommand,
-  gt as SidebarDocDrawingOperation,
-  tt as UngroupDocDrawingCommand,
-  cn as UniverDocsDrawingUIPlugin
+  qi as ClearDocDrawingTransformerOperation,
+  vt as DOCS_IMAGE_MENU_ID,
+  at as DeleteDocDrawingsCommand,
+  ht as EditDocDrawingOperation,
+  ct as GroupDocDrawingCommand,
+  dt as InsertDocDrawingCommand,
+  mt as InsertDocImageCommand,
+  Ke as MoveDocDrawingsCommand,
+  Cn as RemoveDocDrawingCommand,
+  lt as SetDocDrawingArrangeCommand,
+  ft as SidebarDocDrawingOperation,
+  gt as UngroupDocDrawingCommand,
+  dn as UniverDocsDrawingUIPlugin
 };