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

package/lib/es/index.js

@@ -1,898 +1,2372 @@
-var Ge = Object.defineProperty;
-var Le = (e, n, t) => n in e ? Ge(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t;
-var J = (e, n, t) => Le(e, typeof n != "symbol" ? n + "" : n, t);
-import { CommandType as S, ICommandService as I, IUndoRedoService as U, LocaleService as k, RxDisposable as je, UniverInstanceType as E, toDisposable as We, FOCUSING_COMMON_DRAWINGS as V, OnLifecycle as se, LifecycleStages as ce, IUniverInstanceService as Fe, IContextService as de, Direction as P, FOCUSING_UNIVER_EDITOR as $e, Disposable as ue, PositionedObjectLayoutType as Ve, ObjectRelativeFromH as Be, ObjectRelativeFromV as He, Plugin as ze, DependentOn as Ke } from "@univerjs/core";
-import { Inject as y, Injector as me } from "@wendellhu/redi";
-import { ImageCropperObject as Ze, COMPONENT_IMAGE_POPUP_MENU as Ye, OpenImageCropOperation as ke, ImageResetSizeOperation as Qe, DrawingCommonPanel as Xe, UniverDrawingUIPlugin as qe } from "@univerjs/drawing-ui";
-import { IDrawingManagerService as N, DRAWING_IMAGE_ALLOW_IMAGE_LIST as Je, ArrangeTypeEnum as L, DrawingTypeEnum as Q, DRAWING_IMAGE_COUNT_LIMIT as ee, ImageUploadStatusType as K, DRAWING_IMAGE_ALLOW_SIZE as en, getImageSize as nn, DRAWING_IMAGE_WIDTH_LIMIT as ne, DRAWING_IMAGE_HEIGHT_LIMIT as te, IImageIoService as tn, UniverDrawingPlugin as rn } from "@univerjs/drawing";
-import { IDocDrawingService as M, SetDocDrawingApplyMutation as p, DocDrawingApplyType as f, UniverDocsDrawingPlugin as on } from "@univerjs/docs-drawing";
-import { IRenderManagerService as H, getGroupState as an, transformObjectOutOfGroup as sn } from "@univerjs/engine-render";
-import { takeUntil as re } from "rxjs";
-import { DocCanvasPopManagerService as cn, transformToDocDrawingPosition as le, docDrawingPositionToTransform as ie } from "@univerjs/docs-ui";
-import { ISidebarService as dn, MenuItemType as ge, MenuPosition as un, MenuGroup as mn, getMenuHiddenObservable as pe, KeyCode as R, ComponentManager as ln, IMenuService as gn, IShortcutService as pn, IMessageService as fn } from "@univerjs/ui";
-import { useDependency as b } from "@wendellhu/redi/react-bindings";
-import C, { forwardRef as fe, useRef as he, createElement as ve, useState as Z, useEffect as Ie } from "react";
-import j from "clsx";
-import { MessageType as W } from "@univerjs/design";
-import { TextSelectionManagerService as hn, DocSkeletonManagerService as vn } from "@univerjs/docs";
-const w = {
-  id: "sheet.operation.clear-drawing-transformer",
-  type: S.MUTATION,
-  handler: (e, n) => {
-    const t = e.get(H);
-    return n.forEach((r) => {
-      var i, o;
-      (o = (i = t.getRenderById(r)) == null ? void 0 : i.scene.getTransformer()) == null || o.debounceRefreshControls();
-    }), !0;
-  }
-}, X = {
+var dt = Object.defineProperty;
+var mt = (i, e, n) => e in i ? dt(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n;
+var Pe = (i, e, n) => mt(i, typeof e != "symbol" ? e + "" : e, n);
+import { CommandType as $, ICommandService as W, IUniverInstanceService as X, TextX as Je, JSONX as k, MemoryCursor as ut, TextXActionType as j, LocaleService as en, RxDisposable as gt, UniverInstanceType as Ce, toDisposable as Ee, FOCUSING_COMMON_DRAWINGS as Ze, OnLifecycle as nn, LifecycleStages as tn, Inject as Se, IContextService as xn, useDependency as ie, PositionedObjectLayoutType as B, BooleanNumber as Me, ObjectRelativeFromH as Y, ObjectRelativeFromV as G, Tools as _e, WrapTextType as Ae, Direction as ae, IUndoRedoService as mn, FOCUSING_UNIVER_EDITOR as pt, Disposable as Ue, Injector as Un, UndoCommand as ft, RedoCommand as ht, throttle as In, COLORS as wt, Plugin as vt, DependentOn as It } from "@univerjs/core";
+import { ImageCropperObject as _t, COMPONENT_IMAGE_POPUP_MENU as Ct, OpenImageCropOperation as St, ImageResetSizeOperation as Dt, DrawingCommonPanel as Pt, UniverDrawingUIPlugin as Et } from "@univerjs/drawing-ui";
+import { IDrawingManagerService as ge, DRAWING_IMAGE_ALLOW_IMAGE_LIST as Ot, ArrangeTypeEnum as He, DrawingTypeEnum as un, DRAWING_IMAGE_COUNT_LIMIT as _n, ImageUploadStatusType as an, DRAWING_IMAGE_ALLOW_SIZE as Tt, getImageSize as Mt, DRAWING_IMAGE_WIDTH_LIMIT as Cn, DRAWING_IMAGE_HEIGHT_LIMIT as Sn, IImageIoService as yt, UniverDrawingPlugin as bt } from "@univerjs/drawing";
+import { IDocDrawingService as De, SetDocDrawingApplyMutation as fe, DocDrawingApplyType as he, UniverDocsDrawingPlugin as Rt } from "@univerjs/docs-drawing";
+import { ITextSelectionRenderManager as Le, IRenderManagerService as Q, DocumentEditArea as sn, getGroupState as Nt, transformObjectOutOfGroup as At, Liquid as Ln, PageLayoutType as Dn, NodePositionConvertToCursor as Pn, getOneTextSelectionRange as En, Vector2 as xt, getAnchorBounding as Ut, Rect as Lt, getColor as Ft, TEXT_RANGE_LAYER_INDEX as Bt } from "@univerjs/engine-render";
+import { takeUntil as On, combineLatest as Gt, Observable as Wt } from "rxjs";
+import { DocCanvasPopManagerService as Ht, docDrawingPositionToTransform as Tn, transformToDocDrawingPosition as Vt } from "@univerjs/docs-ui";
+import { RichTextEditingMutation as Z, getRichTextEditPath as on, DocSkeletonManagerService as me, TextSelectionManagerService as cn, getRetainAndDeleteFromReplace as jt, SetDocZoomRatioOperation as kt, getDocObject as $t } from "@univerjs/docs";
+import { ISidebarService as zt, MenuItemType as Fn, MenuPosition as Xt, MenuGroup as qt, getMenuHiddenObservable as Bn, KeyCode as ye, ComponentManager as Kt, IMenuService as Yt, IShortcutService as Zt, IMessageService as Qt, IEditorService as Jt } from "@univerjs/ui";
+import d, { forwardRef as Gn, useRef as Wn, createElement as Hn, useState as te, useEffect as gn } from "react";
+import H from "clsx";
+import { RadioGroup as Mn, Radio as Ie, InputNumber as Te, Select as yn, Checkbox as ei, MessageType as Ve } from "@univerjs/design";
+const pn = {
   id: "doc.command.remove-doc-image",
-  type: S.COMMAND,
-  handler: (e, n) => {
-    const t = e.get(I), r = e.get(U), i = e.get(M);
-    if (!n) return !1;
-    const { drawings: o } = n, a = [];
-    o.forEach((h) => {
-      const { unitId: v } = h;
-      a.push(v);
-    });
-    const s = i.getBatchRemoveOp(o), { unitId: c, subUnitId: u, undo: m, redo: d, objects: l } = s;
-    return t.syncExecuteCommand(p.id, { unitId: c, subUnitId: u, op: d, objects: l, type: f.REMOVE }) ? (r.pushUndoRedo({
-      unitID: c,
-      undoMutations: [
-        { id: p.id, params: { unitId: c, subUnitId: u, op: m, objects: l, type: f.INSERT } },
-        { id: w.id, params: a }
-      ],
-      redoMutations: [
-        { id: p.id, params: { unitId: c, subUnitId: u, op: d, objects: l, type: f.REMOVE } },
-        { id: w.id, params: a }
-      ]
-    }), !0) : !1;
+  type: $.COMMAND,
+  // eslint-disable-next-line max-lines-per-function
+  handler: (i, e) => {
+    var S, O, R, D;
+    const n = i.get(W), t = i.get(X), o = i.get(Le), r = t.getCurrentUniverDocInstance();
+    if (e == null || r == null)
+      return !1;
+    const { drawings: a } = e, s = (S = o.getSegment()) != null ? S : "", l = new Je(), c = k.getInstance(), m = (R = (O = r.getSelfOrHeaderFooterModel(s).getBody()) == null ? void 0 : O.customBlocks) != null ? R : [], u = a.map((b) => m.find((y) => y.blockId === b.drawingId)).filter((b) => !!b).sort((b, y) => b.startIndex > y.startIndex ? 1 : -1), p = a[0].unitId, f = new ut();
+    f.reset();
+    const g = u[0].startIndex, w = [
+      {
+        startOffset: g,
+        endOffset: g
+      }
+    ], v = {
+      id: Z.id,
+      params: {
+        unitId: p,
+        actions: [],
+        textRanges: w
+      }
+    }, I = [];
+    for (const b of u) {
+      const { startIndex: y } = b;
+      y > f.cursor && l.push({
+        t: j.RETAIN,
+        len: y - f.cursor,
+        segmentId: ""
+      }), l.push({
+        t: j.DELETE,
+        len: 1,
+        line: 0,
+        segmentId: ""
+      }), f.moveCursorTo(y + 1);
+    }
+    const C = on(r, s);
+    I.push(c.editOp(l.serialize(), C));
+    for (const b of u) {
+      const { blockId: y } = b, T = ((D = r.getDrawings()) != null ? D : {})[y], x = r.getDrawingsOrder().indexOf(y), L = c.removeOp(["drawings", y], T), z = c.removeOp(["drawingsOrder", x], y);
+      I.push(L), I.push(z);
+    }
+    return v.params.actions = I.reduce((b, y) => k.compose(b, y), null), !!n.syncExecuteCommand(v.id, v.params);
   }
-}, _e = "COMPONENT_DOC_DRAWING_PANEL", we = {
+}, Vn = "COMPONENT_DOC_DRAWING_PANEL", jn = {
   id: "sidebar.operation.doc-image",
-  type: S.COMMAND,
-  handler: async (e, n) => {
-    const t = e.get(dn), r = e.get(k), i = e.get(N);
-    switch (n.value) {
+  type: $.COMMAND,
+  handler: async (i, e) => {
+    const n = i.get(zt), t = i.get(en), o = i.get(ge);
+    switch (e.value) {
       case "open":
-        t.open({
-          header: { title: r.t("docImage.panel.title") },
-          children: { label: _e },
+        n.open({
+          header: { title: t.t("docImage.panel.title") },
+          children: { label: Vn },
           onClose: () => {
-            i.focusDrawing(null);
+            o.focusDrawing(null);
           },
           width: 360
         });
         break;
       case "close":
       default:
-        t.close();
+        n.close();
         break;
     }
     return !0;
   }
-}, Se = {
-  id: "sheet.operation.edit-sheet-image",
-  type: S.OPERATION,
-  handler: (e, n) => {
-    const t = e.get(N), r = e.get(I);
-    return n == null ? !1 : (t.focusDrawing([n]), r.executeCommand(we.id, { value: "open" }), !0);
+}, kn = {
+  id: "doc.operation.edit-doc-image",
+  type: $.OPERATION,
+  handler: (i, e) => {
+    const n = i.get(ge), t = i.get(W);
+    return e == null ? !1 : (n.focusDrawing([e]), t.executeCommand(jn.id, { value: "open" }), !0);
   }
 };
-var In = Object.defineProperty, _n = Object.getOwnPropertyDescriptor, wn = (e, n, t, r) => {
-  for (var i = r > 1 ? void 0 : r ? _n(n, t) : n, o = e.length - 1, a; o >= 0; o--)
-    (a = e[o]) && (i = (r ? a(n, t, i) : a(i)) || i);
-  return r && i && In(n, t, i), i;
-}, A = (e, n) => (t, r) => n(t, r, e);
-let F = class extends je {
-  constructor(n, t, r, i, o) {
+var ni = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, ii = (i, e, n, t) => {
+  for (var o = t > 1 ? void 0 : t ? ti(e, n) : e, r = i.length - 1, a; r >= 0; r--)
+    (a = i[r]) && (o = (t ? a(e, n, o) : a(o)) || o);
+  return t && o && ni(e, n, o), o;
+}, be = (i, e) => (n, t) => e(n, t, i);
+let Xe = class extends gt {
+  constructor(e, n, t, o, r) {
     super();
-    J(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
-    this._drawingManagerService = n, this._canvasPopManagerService = t, this._renderManagerService = r, this._univerInstanceService = i, this._contextService = o, this._init();
+    Pe(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
+    this._drawingManagerService = e, this._canvasPopManagerService = n, this._renderManagerService = t, this._univerInstanceService = o, this._contextService = r, this._init();
   }
   _init() {
-    this._univerInstanceService.getCurrentTypeOfUnit$(E.UNIVER_DOC).pipe(re(this.dispose$)).subscribe((n) => this._create(n)), this._univerInstanceService.getTypeOfUnitDisposed$(E.UNIVER_DOC).pipe(re(this.dispose$)).subscribe((n) => this._dispose(n)), this._univerInstanceService.getAllUnitsForType(E.UNIVER_DOC).forEach((n) => this._create(n));
+    this._univerInstanceService.getCurrentTypeOfUnit$(Ce.UNIVER_DOC).pipe(On(this.dispose$)).subscribe((e) => this._create(e)), this._univerInstanceService.getTypeOfUnitDisposed$(Ce.UNIVER_DOC).pipe(On(this.dispose$)).subscribe((e) => this._dispose(e)), this._univerInstanceService.getAllUnitsForType(Ce.UNIVER_DOC).forEach((e) => this._create(e));
   }
-  _dispose(n) {
-    const t = n.getUnitId();
-    this._renderManagerService.removeRender(t);
+  _dispose(e) {
+    const n = e.getUnitId();
+    this._renderManagerService.removeRender(n);
   }
-  _create(n) {
-    if (!n)
+  _create(e) {
+    if (!e)
       return;
-    const t = n.getUnitId();
-    this._renderManagerService.has(t) && !this._initImagePopupMenu.has(t) && (this._popupMenuListener(t), this._initImagePopupMenu.add(t));
+    const n = e.getUnitId();
+    this._renderManagerService.has(n) && !this._initImagePopupMenu.has(n) && (this._popupMenuListener(n), this._initImagePopupMenu.add(n));
   }
-  _hasCropObject(n) {
-    const t = n.getAllObjects();
-    for (const r of t)
-      if (r instanceof Ze)
+  _hasCropObject(e) {
+    const n = e.getAllObjects();
+    for (const t of n)
+      if (t instanceof _t)
         return !0;
     return !1;
   }
-  _popupMenuListener(n) {
-    var o;
-    const t = (o = this._renderManagerService.getRenderById(n)) == null ? void 0 : o.scene;
-    if (!t)
+  // eslint-disable-next-line max-lines-per-function
+  _popupMenuListener(e) {
+    var r;
+    const n = (r = this._renderManagerService.getRenderById(e)) == null ? void 0 : r.scene;
+    if (!n)
       return;
-    const r = t.getTransformerByCreate();
-    if (!r)
+    const t = n.getTransformerByCreate();
+    if (!t)
       return;
-    const i = [];
+    const o = [];
     this.disposeWithMe(
-      We(
-        r.createControl$.subscribe(() => {
-          if (this._hasCropObject(t))
+      Ee(
+        t.createControl$.subscribe(() => {
+          if (this._hasCropObject(n))
             return;
-          const a = r.getSelectedObjectMap();
-          if (a.size > 1) {
-            i.forEach((g) => g.dispose());
+          const a = t.getSelectedObjectMap();
+          if (o.forEach((w) => w.dispose()), o.length = 0, a.size > 1)
             return;
-          }
           const s = a.values().next().value;
           if (!s)
             return;
-          const c = s.oKey, u = this._drawingManagerService.getDrawingOKey(c);
-          if (!u)
+          const l = s.oKey, c = this._drawingManagerService.getDrawingOKey(l);
+          if (!c)
             return;
-          const { unitId: m, subUnitId: d, drawingId: l } = u;
-          i.push(this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(s, {
-            componentKey: Ye,
+          const { unitId: m, subUnitId: u, drawingId: p } = c;
+          o.push(this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(s, {
+            componentKey: Ct,
             direction: "horizontal",
             offset: [2, 0],
             extraProps: {
-              menuItems: this._getImageMenuItems(m, d, l)
+              menuItems: this._getImageMenuItems(m, u, p)
             }
-          }))), this._drawingManagerService.focusDrawing([{
+          }))), !this._drawingManagerService.getFocusDrawings().find((w) => w.unitId === m && w.subUnitId === u && w.drawingId === p) && this._drawingManagerService.focusDrawing([{
             unitId: m,
-            subUnitId: d,
-            drawingId: l
+            subUnitId: u,
+            drawingId: p
           }]);
         })
       )
     ), this.disposeWithMe(
-      r.clearControl$.subscribe(() => {
-        i.forEach((a) => a.dispose()), this._contextService.setContextValue(V, !1), this._drawingManagerService.focusDrawing(null);
-      })
+      Ee(
+        t.clearControl$.subscribe(() => {
+          o.forEach((a) => a.dispose()), o.length = 0, this._contextService.setContextValue(Ze, !1), this._drawingManagerService.focusDrawing(null);
+        })
+      )
     ), this.disposeWithMe(
-      r.changing$.subscribe(() => {
-        i.forEach((a) => a.dispose());
-      })
+      Ee(
+        t.changing$.subscribe(() => {
+          o.forEach((a) => a.dispose()), o.length = 0;
+        })
+      )
+    ), this.disposeWithMe(
+      Ee(
+        t.changeStart$.subscribe(() => {
+          o.forEach((a) => a.dispose()), o.length = 0;
+        })
+      )
     );
   }
-  _getImageMenuItems(n, t, r) {
+  _getImageMenuItems(e, n, t) {
     return [
       {
         label: "image-popup.edit",
         index: 0,
-        commandId: Se.id,
-        commandParams: { unitId: n, subUnitId: t, drawingId: r },
+        commandId: kn.id,
+        commandParams: { unitId: e, subUnitId: n, drawingId: t },
         disable: !1
       },
       {
         label: "image-popup.delete",
         index: 1,
-        commandId: X.id,
-        commandParams: { unitId: n, drawings: [{ unitId: n, subUnitId: t, drawingId: r }] },
+        commandId: pn.id,
+        commandParams: { unitId: e, drawings: [{ unitId: e, subUnitId: n, drawingId: t }] },
         disable: !1
       },
       {
         label: "image-popup.crop",
         index: 2,
-        commandId: ke.id,
-        commandParams: { unitId: n, subUnitId: t, drawingId: r },
-        disable: !1
+        commandId: St.id,
+        commandParams: { unitId: e, subUnitId: n, drawingId: t },
+        disable: !0
+        // TODO: @JOCS, feature is not ready.
       },
       {
         label: "image-popup.reset",
         index: 3,
-        commandId: Qe.id,
-        commandParams: [{ unitId: n, subUnitId: t, drawingId: r }],
-        disable: !1
+        commandId: Dt.id,
+        commandParams: [{ unitId: e, subUnitId: n, drawingId: t }],
+        disable: !0
+        // TODO: @JOCS, feature is not ready.
       }
     ];
   }
 };
-F = wn([
-  se(ce.Rendered, F),
-  A(0, N),
-  A(1, y(cn)),
-  A(2, H),
-  A(3, Fe),
-  A(4, de)
-], F);
-var _ = function() {
-  return _ = Object.assign || function(e) {
-    for (var n, t = 1, r = arguments.length; t < r; t++) {
-      n = arguments[t];
-      for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (e[i] = n[i]);
-    }
-    return e;
-  }, _.apply(this, arguments);
-}, Sn = function(e, n) {
-  var t = {};
-  for (var r in e) Object.prototype.hasOwnProperty.call(e, r) && n.indexOf(r) < 0 && (t[r] = e[r]);
-  if (e != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var i = 0, r = Object.getOwnPropertySymbols(e); i < r.length; i++)
-      n.indexOf(r[i]) < 0 && Object.prototype.propertyIsEnumerable.call(e, r[i]) && (t[r[i]] = e[r[i]]);
-  return t;
-}, Ce = fe(function(e, n) {
-  var t = e.icon, r = e.id, i = e.className, o = e.extend, a = Sn(e, ["icon", "id", "className", "extend"]), s = "univerjs-icon univerjs-icon-".concat(r, " ").concat(i || "").trim(), c = he("_".concat(Mn()));
-  return De(t, "".concat(r), { defIds: t.defIds, idSuffix: c.current }, _({ ref: n, className: s }, a), o);
+Xe = ii([
+  nn(tn.Rendered, Xe),
+  be(0, ge),
+  be(1, Se(Ht)),
+  be(2, Q),
+  be(3, X),
+  be(4, xn)
+], Xe);
+var se = function() {
+  return se = Object.assign || function(i) {
+    for (var e, n = 1, t = arguments.length; n < t; n++) {
+      e = arguments[n];
+      for (var o in e) Object.prototype.hasOwnProperty.call(e, o) && (i[o] = e[o]);
+    }
+    return i;
+  }, se.apply(this, arguments);
+}, oi = 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 o = 0, t = Object.getOwnPropertySymbols(i); o < t.length; o++)
+      e.indexOf(t[o]) < 0 && Object.prototype.propertyIsEnumerable.call(i, t[o]) && (n[t[o]] = i[t[o]]);
+  return n;
+}, $n = Gn(function(i, e) {
+  var n = i.icon, t = i.id, o = i.className, r = i.extend, a = oi(i, ["icon", "id", "className", "extend"]), s = "univerjs-icon univerjs-icon-".concat(t, " ").concat(o || "").trim(), l = Wn("_".concat(si()));
+  return zn(n, "".concat(t), { defIds: n.defIds, idSuffix: l.current }, se({ ref: e, className: s }, a), r);
 });
-function De(e, n, t, r, i) {
-  return ve(e.tag, _(_({ key: n }, Cn(e, t, i)), r), (Dn(e, t).children || []).map(function(o, a) {
-    return De(o, "".concat(n, "-").concat(e.tag, "-").concat(a), t, void 0, i);
+function zn(i, e, n, t, o) {
+  return Hn(i.tag, se(se({ key: e }, ri(i, n, o)), t), (ai(i, n).children || []).map(function(r, a) {
+    return zn(r, "".concat(e, "-").concat(i.tag, "-").concat(a), n, void 0, o);
   }));
 }
-function Cn(e, n, t) {
-  var r = _({}, e.attrs);
-  t != null && t.colorChannel1 && r.fill === "colorChannel1" && (r.fill = t.colorChannel1);
-  var i = n.defIds;
-  return !i || i.length === 0 || (e.tag === "use" && r["xlink:href"] && (r["xlink:href"] = r["xlink:href"] + n.idSuffix), Object.entries(r).forEach(function(o) {
-    var a = o[0], s = o[1];
-    typeof s == "string" && (r[a] = s.replace(/url\(#(.*)\)/, "url(#$1".concat(n.idSuffix, ")")));
-  })), r;
+function ri(i, e, n) {
+  var t = se({}, i.attrs);
+  n != null && n.colorChannel1 && t.fill === "colorChannel1" && (t.fill = n.colorChannel1);
+  var o = e.defIds;
+  return !o || o.length === 0 || (i.tag === "use" && t["xlink:href"] && (t["xlink:href"] = t["xlink:href"] + e.idSuffix), Object.entries(t).forEach(function(r) {
+    var a = r[0], s = r[1];
+    typeof s == "string" && (t[a] = s.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+  })), t;
 }
-function Dn(e, n) {
-  var t, r = n.defIds;
-  return !r || r.length === 0 ? e : e.tag === "defs" && (!((t = e.children) === null || t === void 0) && t.length) ? _(_({}, e), { children: e.children.map(function(i) {
-    return typeof i.attrs.id == "string" && r && r.indexOf(i.attrs.id) > -1 ? _(_({}, i), { attrs: _(_({}, i.attrs), { id: i.attrs.id + n.idSuffix }) }) : i;
-  }) }) : e;
+function ai(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) ? se(se({}, i), { children: i.children.map(function(o) {
+    return typeof o.attrs.id == "string" && t && t.indexOf(o.attrs.id) > -1 ? se(se({}, o), { attrs: se(se({}, o.attrs), { id: o.attrs.id + e.idSuffix }) }) : o;
+  }) }) : i;
 }
-function Mn() {
+function si() {
   return Math.random().toString(36).substring(2, 8);
 }
-Ce.displayName = "UniverIcon";
-var On = { 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" } }] }, Me = fe(function(e, n) {
-  return ve(Ce, Object.assign({}, e, {
+$n.displayName = "UniverIcon";
+var ci = { 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" } }] }, Xn = Gn(function(i, e) {
+  return Hn($n, Object.assign({}, i, {
     id: "add-image-single",
-    ref: n,
-    icon: On
+    ref: e,
+    icon: ci
   }));
 });
-Me.displayName = "AddImageSingle";
-const z = {
+Xn.displayName = "AddImageSingle";
+const rn = {
   id: "doc.operation.insert-float-image",
-  type: S.OPERATION,
+  type: $.OPERATION,
   handler: () => !0
-}, Pn = "univer-upload-file-menu", En = "univer-upload-file-menu-input", oe = {
-  uploadFileMenu: Pn,
-  uploadFileMenuInput: En
-}, yn = () => {
-  const e = b(I), n = he(null), t = () => {
-    var o;
-    (o = n.current) == null || o.click();
-  }, r = Je.map((o) => `.${o.replace("image/", "")}`).join(","), i = (o) => {
-    const a = o.target.files;
+}, li = "univer-upload-file-menu", di = "univer-upload-file-menu-input", bn = {
+  uploadFileMenu: li,
+  uploadFileMenuInput: di
+}, mi = () => {
+  const i = ie(W), e = Wn(null), n = () => {
+    var r;
+    (r = e.current) == null || r.click();
+  }, t = Ot.map((r) => `.${r.replace("image/", "")}`).join(","), o = (r) => {
+    const a = r.target.files;
     if (a == null)
       return;
     const s = Array.from(a);
-    e.executeCommand(z.id, { files: s }), n.current && (n.current.value = "");
+    i.executeCommand(rn.id, { files: s }), e.current && (e.current.value = "");
   };
-  return /* @__PURE__ */ C.createElement("div", { onClick: t, className: oe.uploadFileMenu }, /* @__PURE__ */ C.createElement(
+  return /* @__PURE__ */ d.createElement("div", { onClick: n, className: bn.uploadFileMenu }, /* @__PURE__ */ d.createElement(
     "input",
     {
       type: "file",
-      className: oe.uploadFileMenuInput,
-      ref: n,
-      onChange: i,
-      accept: r,
+      className: bn.uploadFileMenuInput,
+      ref: e,
+      onChange: o,
+      accept: t,
       multiple: !0
     }
   ));
-}, Oe = "COMPONENT_DOC_UPLOAD_FILE_MENU", Pe = "addition-and-subtraction-single", Ee = "doc.menu.image";
-function bn(e) {
+}, qn = "COMPONENT_DOC_UPLOAD_FILE_MENU", Kn = "addition-and-subtraction-single", Yn = "doc.menu.image";
+function ui(i) {
+  const e = i.get(X), n = i.get(Q);
+  return new Wt((t) => {
+    const o = e.focused$.subscribe((s) => {
+      if (s == null)
+        return t.next(!0);
+      const l = n.getRenderById(s);
+      if (l == null)
+        return t.next(!0);
+      l.with(me).getViewModel().editAreaChange$.subscribe((m) => {
+        t.next(m === sn.HEADER || m === sn.FOOTER);
+      });
+    }), r = n.getCurrentTypeOfRenderer(Ce.UNIVER_DOC);
+    if (r == null)
+      return t.next(!0);
+    const a = r.with(me).getViewModel();
+    return t.next(a.getEditArea() !== sn.BODY), () => o.unsubscribe();
+  });
+}
+function gi(i) {
   return {
-    id: Ee,
-    type: ge.SUBITEMS,
-    positions: [un.TOOLBAR_START],
-    group: mn.TOOLBAR_LAYOUT,
-    icon: Pe,
+    id: Yn,
+    type: Fn.SUBITEMS,
+    positions: [Xt.TOOLBAR_START],
+    group: qt.TOOLBAR_LAYOUT,
+    icon: Kn,
     tooltip: "docImage.title",
-    hidden$: pe(e, E.UNIVER_DOC)
+    hidden$: Gt(Bn(i, Ce.UNIVER_DOC), ui(i), (e, n) => e || n)
   };
 }
-function Rn(e) {
+function pi(i) {
   return {
-    id: z.id,
+    id: rn.id,
     title: "docImage.upload.float",
-    type: ge.SELECTOR,
+    type: Fn.SELECTOR,
     label: {
-      name: Oe
+      name: qn
     },
-    positions: [Ee],
-    hidden$: pe(e, E.UNIVER_DOC)
+    positions: [Yn],
+    hidden$: Bn(i, Ce.UNIVER_DOC)
   };
 }
-const Un = "univer-image-common-panel", Nn = "univer-image-common-panel-grid", An = "univer-image-common-panel-border", Tn = "univer-image-common-panel-title", xn = "univer-image-common-panel-row", Gn = "univer-image-common-panel-row-vertical", Ln = "univer-image-common-panel-column", jn = "univer-image-common-panel-column-center", Wn = "univer-image-common-panel-inline", Fn = "univer-image-common-panel-span2", $n = "univer-image-common-panel-span3", Vn = "univer-image-common-panel-input", Bn = "univer-sheet-image-menu", Hn = "univer-sheet-image-menu-input", O = {
-  imageCommonPanel: Un,
-  imageCommonPanelGrid: Nn,
-  imageCommonPanelBorder: An,
-  imageCommonPanelTitle: Tn,
-  imageCommonPanelRow: xn,
-  imageCommonPanelRowVertical: Gn,
-  imageCommonPanelColumn: Ln,
-  imageCommonPanelColumnCenter: jn,
-  imageCommonPanelInline: Wn,
-  imageCommonPanelSpan2: Fn,
-  imageCommonPanelSpan3: $n,
-  imageCommonPanelInput: Vn,
-  sheetImageMenu: Bn,
-  sheetImageMenuInput: Hn
-}, q = {
-  id: "doc.command.set-doc-image",
-  type: S.COMMAND,
-  handler: (e, n) => {
-    const t = e.get(I), r = e.get(U), i = e.get(M);
-    if (!n) return !1;
-    const { drawings: o } = n, a = i.getBatchUpdateOp(o), { unitId: s, subUnitId: c, undo: u, redo: m, objects: d } = a;
-    return t.syncExecuteCommand(p.id, { unitId: s, subUnitId: c, op: m, objects: d, type: f.UPDATE }) ? (r.pushUndoRedo({
-      unitID: s,
-      undoMutations: [
-        { id: p.id, params: { unitId: s, subUnitId: c, op: u, objects: d, type: f.UPDATE } },
-        { id: w.id, params: [s] }
-      ],
-      redoMutations: [
-        { id: p.id, params: { unitId: s, subUnitId: c, op: m, objects: d, type: f.UPDATE } },
-        { id: w.id, params: [s] }
-      ]
-    }), !0) : !1;
+const fi = "univer-image-common-panel", hi = "univer-image-common-panel-grid", wi = "univer-image-common-panel-border", vi = "univer-image-common-panel-title", Ii = "univer-image-common-panel-subtitle", _i = "univer-image-common-panel-row", Ci = "univer-image-common-panel-row-vertical", Si = "univer-image-common-panel-column", Di = "univer-image-common-panel-column-center", Pi = "univer-image-common-panel-inline", Ei = "univer-image-common-panel-span2", Oi = "univer-image-common-panel-span3", Ti = "univer-image-common-panel-input", Mi = "univer-sheet-image-menu", yi = "univer-sheet-image-menu-input", h = {
+  imageCommonPanel: fi,
+  imageCommonPanelGrid: hi,
+  imageCommonPanelBorder: wi,
+  imageCommonPanelTitle: vi,
+  imageCommonPanelSubtitle: Ii,
+  imageCommonPanelRow: _i,
+  imageCommonPanelRowVertical: Ci,
+  imageCommonPanelColumn: Si,
+  imageCommonPanelColumnCenter: Di,
+  imageCommonPanelInline: Pi,
+  imageCommonPanelSpan2: Ei,
+  imageCommonPanelSpan3: Oi,
+  imageCommonPanelInput: Ti,
+  sheetImageMenu: Mi,
+  sheetImageMenuInput: yi
+};
+var re = /* @__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))(re || {});
+const bi = {
+  inline: B.INLINE,
+  wrapSquare: B.WRAP_SQUARE,
+  wrapTopAndBottom: B.WRAP_TOP_AND_BOTTOM,
+  inFrontOfText: B.WRAP_NONE,
+  behindText: B.WRAP_NONE
+}, Zn = {
+  id: "doc.command.update-doc-drawing-wrapping-style",
+  type: $.COMMAND,
+  // eslint-disable-next-line max-lines-per-function, complexity
+  handler: (i, e) => {
+    if (e == null)
+      return !1;
+    const { drawings: n, wrappingStyle: t, unitId: o } = e, r = i.get(W), a = i.get(X), l = i.get(Q).getRenderById(o), c = l == null ? void 0 : l.with(me).getSkeleton().getSkeletonData(), m = l == null ? void 0 : l.scene, u = a.getCurrentUniverDocInstance();
+    if (u == null || c == null || m == null)
+      return !1;
+    const p = m.getTransformerByCreate(), { pages: f } = c, g = k.getInstance(), w = [], { drawings: v = {} } = u.getSnapshot();
+    for (const P of n) {
+      const { drawingId: S } = P, O = v[S].layoutType, R = bi[t];
+      if (O !== R) {
+        const T = g.replaceOp(["drawings", S, "layoutType"], O, R);
+        w.push(T);
+      }
+      if (t === "behindText" || t === "inFrontOfText") {
+        const T = v[S].behindDoc, V = t === "behindText" ? Me.TRUE : Me.FALSE;
+        if (T !== V) {
+          const x = g.replaceOp(["drawings", S, "behindDoc"], T, V);
+          w.push(x);
+        }
+      }
+      if (t === "inline")
+        continue;
+      let D = null, b = 0, y = 0;
+      for (const T of f)
+        if (T.skeDrawings.has(S)) {
+          D = T.skeDrawings.get(S), b = T.marginTop, y = T.marginLeft;
+          break;
+        }
+      if (D != null) {
+        const { aTop: T, aLeft: V } = D, x = v[S].docTransform.positionH;
+        let L = V;
+        x.relativeFrom === Y.MARGIN ? L -= y : x.relativeFrom === Y.COLUMN && (L -= D.columnLeft);
+        const z = {
+          relativeFrom: x.relativeFrom,
+          posOffset: L
+        };
+        if (x.posOffset !== z.posOffset) {
+          const E = g.replaceOp(["drawings", S, "docTransform", "positionH"], x, z);
+          w.push(E);
+        }
+        const N = v[S].docTransform.positionV;
+        let _ = T;
+        N.relativeFrom === G.PAGE ? _ += b : N.relativeFrom === G.LINE ? _ -= D.lineTop : N.relativeFrom === G.PARAGRAPH && (_ -= D.blockAnchorTop);
+        const M = {
+          relativeFrom: N.relativeFrom,
+          posOffset: _
+        };
+        if (N.posOffset !== M.posOffset) {
+          const E = g.replaceOp(["drawings", S, "docTransform", "positionV"], N, M);
+          w.push(E);
+        }
+      }
+    }
+    const I = {
+      id: Z.id,
+      params: {
+        unitId: o,
+        actions: [],
+        textRanges: null
+      }
+    };
+    I.params.actions = w.reduce((P, S) => k.compose(P, S), null);
+    const C = r.syncExecuteCommand(I.id, I.params);
+    return p.refreshControls(), !!C;
   }
-}, zn = (e) => {
-  b(I);
-  const n = b(k);
-  b(N);
-  const t = b(H), { drawings: r } = e, i = r[0];
-  if (i == null)
-    return;
-  const { unitId: o } = i, a = t.getRenderById(o), s = a == null ? void 0 : a.scene;
+}, Qn = {
+  id: "doc.command.update-doc-drawing-distance",
+  type: $.COMMAND,
+  handler: (i, e) => {
+    if (e == null)
+      return !1;
+    const n = i.get(W), o = i.get(X).getCurrentUniverDocInstance();
+    if (o == null)
+      return !1;
+    const { drawings: r, dist: a, unitId: s } = e, l = k.getInstance(), c = [], { drawings: m = {} } = o.getSnapshot();
+    for (const f of r) {
+      const { drawingId: g } = f;
+      for (const [w, v] of Object.entries(a)) {
+        const I = m[g][w];
+        if (I !== v) {
+          const C = l.replaceOp(["drawings", g, w], I, v);
+          c.push(C);
+        }
+      }
+    }
+    const u = {
+      id: Z.id,
+      params: {
+        unitId: s,
+        actions: [],
+        textRanges: null
+      }
+    };
+    return u.params.actions = c.reduce((f, g) => k.compose(f, g), null), !!n.syncExecuteCommand(u.id, u.params);
+  }
+}, Jn = {
+  id: "doc.command.update-doc-drawing-wrap-text",
+  type: $.COMMAND,
+  handler: (i, e) => {
+    if (e == null)
+      return !1;
+    const n = i.get(W), o = i.get(X).getCurrentUniverDocInstance();
+    if (o == null)
+      return !1;
+    const { drawings: r, wrapText: a, unitId: s } = e, l = k.getInstance(), c = [], { drawings: m = {} } = o.getSnapshot();
+    for (const f of r) {
+      const { drawingId: g } = f, w = m[g].wrapText;
+      if (w !== a) {
+        const v = l.replaceOp(["drawings", g, "wrapText"], w, a);
+        c.push(v);
+      }
+    }
+    const u = {
+      id: Z.id,
+      params: {
+        unitId: s,
+        actions: [],
+        textRanges: null
+      }
+    };
+    return u.params.actions = c.reduce((f, g) => k.compose(f, g), null), !!n.syncExecuteCommand(u.id, u.params);
+  }
+}, xe = {
+  id: "doc.command.update-drawing-doc-transform",
+  type: $.COMMAND,
+  handler: (i, e) => {
+    if (e == null)
+      return !1;
+    const n = i.get(W), t = i.get(X), r = i.get(Q).getRenderById(e.unitId), a = r == null ? void 0 : r.scene;
+    if (a == null)
+      return !1;
+    const s = a.getTransformerByCreate(), l = t.getCurrentUniverDocInstance();
+    if (l == null)
+      return !1;
+    const { drawings: c, unitId: m } = e, u = k.getInstance(), p = [], { drawings: f = {} } = l.getSnapshot();
+    for (const v of c) {
+      const { drawingId: I, key: C, value: P } = v, S = f[I].docTransform[C];
+      if (!_e.diffValue(S, P)) {
+        const O = u.replaceOp(["drawings", I, "docTransform", C], S, P);
+        p.push(O);
+      }
+    }
+    const g = {
+      id: Z.id,
+      params: {
+        unitId: m,
+        actions: [],
+        textRanges: null,
+        debounce: !0
+      }
+    };
+    g.params.actions = p.reduce((v, I) => k.compose(v, I), null);
+    const w = n.syncExecuteCommand(g.id, g.params);
+    return s.refreshControls(), !!w;
+  }
+}, et = {
+  id: "doc.command.move-inline-drawing",
+  type: $.COMMAND,
+  // eslint-disable-next-line max-lines-per-function
+  handler: (i, e) => {
+    var D, b, y, T;
+    if (e == null)
+      return !1;
+    const n = i.get(Q), t = i.get(Le), o = n.getRenderById(e.unitId), r = o == null ? void 0 : o.scene;
+    if (r == null)
+      return !1;
+    const a = r.getTransformerByCreate(), s = i.get(W), c = i.get(X).getCurrentUniverDocInstance();
+    if (c == null)
+      return !1;
+    const { drawing: m, unitId: u, offset: p } = e, f = new Je(), g = k.getInstance(), w = [], { drawingId: v } = m, I = (D = t.getSegment()) != null ? D : "", C = (T = (y = (b = c.getSelfOrHeaderFooterModel(I).getBody()) == null ? void 0 : b.customBlocks) == null ? void 0 : y.find((V) => V.blockId === v)) == null ? void 0 : T.startIndex;
+    if (C == null)
+      return !1;
+    p < C ? (p > 0 && f.push({
+      t: j.RETAIN,
+      len: p,
+      segmentId: I
+    }), f.push({
+      t: j.INSERT,
+      body: {
+        dataStream: "\b",
+        customBlocks: [{
+          startIndex: 0,
+          blockId: m.drawingId
+        }]
+      },
+      len: 1,
+      line: 0,
+      segmentId: I
+    }), f.push({
+      t: j.RETAIN,
+      len: C - p,
+      segmentId: I
+    }), f.push({
+      t: j.DELETE,
+      len: 1,
+      line: 0,
+      segmentId: ""
+    })) : (C > 0 && f.push({
+      t: j.RETAIN,
+      len: C,
+      segmentId: I
+    }), f.push({
+      t: j.DELETE,
+      len: 1,
+      line: 0,
+      segmentId: ""
+    }), p - C - 1 > 0 && f.push({
+      t: j.RETAIN,
+      len: p - C - 1,
+      segmentId: I
+    }), f.push({
+      t: j.INSERT,
+      body: {
+        dataStream: "\b",
+        customBlocks: [{
+          startIndex: 0,
+          blockId: m.drawingId
+        }]
+      },
+      len: 1,
+      line: 0,
+      segmentId: I
+    }));
+    const P = on(c, I), S = g.editOp(f.serialize(), P);
+    w.push(S);
+    const O = {
+      id: Z.id,
+      params: {
+        unitId: u,
+        actions: [],
+        textRanges: null
+      }
+    };
+    O.params.actions = w.reduce((V, x) => k.compose(V, x), null);
+    const R = s.syncExecuteCommand(O.id, O.params);
+    return a.refreshControls(), !!R;
+  }
+}, nt = {
+  id: "doc.command.transform-non-inline-drawing",
+  type: $.COMMAND,
+  // eslint-disable-next-line max-lines-per-function
+  handler: (i, e) => {
+    var x, L, z, N;
+    if (e == null)
+      return !1;
+    const n = i.get(Le), o = i.get(Q).getRenderById(e.unitId), r = o == null ? void 0 : o.scene;
+    if (r == null)
+      return !1;
+    const a = r.getTransformerByCreate(), s = i.get(W), c = i.get(X).getCurrentUniverDocInstance();
+    if (c == null)
+      return !1;
+    const { drawing: m, unitId: u, offset: p, docTransform: f } = e, g = new Je(), w = k.getInstance(), v = [], { drawingId: I } = m, C = (x = n.getSegment()) != null ? x : "", P = (N = (z = (L = c.getSelfOrHeaderFooterModel(C).getBody()) == null ? void 0 : L.customBlocks) == null ? void 0 : z.find((_) => _.blockId === I)) == null ? void 0 : N.startIndex;
+    if (P == null)
+      return !1;
+    if (p < P ? (p > 0 && g.push({
+      t: j.RETAIN,
+      len: p,
+      segmentId: C
+    }), g.push({
+      t: j.INSERT,
+      body: {
+        dataStream: "\b",
+        customBlocks: [{
+          startIndex: 0,
+          blockId: m.drawingId
+        }]
+      },
+      len: 1,
+      line: 0,
+      segmentId: C
+    }), g.push({
+      t: j.RETAIN,
+      len: P - p,
+      segmentId: C
+    }), g.push({
+      t: j.DELETE,
+      len: 1,
+      line: 0,
+      segmentId: ""
+    })) : p > P && (P > 0 && g.push({
+      t: j.RETAIN,
+      len: P,
+      segmentId: C
+    }), g.push({
+      t: j.DELETE,
+      len: 1,
+      line: 0,
+      segmentId: ""
+    }), p - P - 1 > 0 && g.push({
+      t: j.RETAIN,
+      len: p - P - 1,
+      segmentId: C
+    }), g.push({
+      t: j.INSERT,
+      body: {
+        dataStream: "\b",
+        customBlocks: [{
+          startIndex: 0,
+          blockId: m.drawingId
+        }]
+      },
+      len: 1,
+      line: 0,
+      segmentId: C
+    })), p !== P) {
+      const _ = on(c, C), M = w.editOp(g.serialize(), _);
+      v.push(M);
+    }
+    const { drawings: S = {} } = c.getSnapshot(), O = S[I].docTransform, { positionH: R, positionV: D, size: b, angle: y } = O;
+    if (!_e.diffValue(R, f.positionH)) {
+      const _ = w.replaceOp(["drawings", I, "docTransform", "positionH"], R, f.positionH);
+      v.push(_);
+    }
+    if (!_e.diffValue(D, f.positionV)) {
+      const _ = w.replaceOp(["drawings", I, "docTransform", "positionV"], D, f.positionV);
+      v.push(_);
+    }
+    if (!_e.diffValue(b, f.size)) {
+      const _ = w.replaceOp(["drawings", I, "docTransform", "size"], b, f.size);
+      v.push(_);
+    }
+    if (!_e.diffValue(y, f.angle)) {
+      const _ = w.replaceOp(["drawings", I, "docTransform", "angle"], y, f.angle);
+      v.push(_);
+    }
+    const T = {
+      id: Z.id,
+      params: {
+        unitId: u,
+        actions: [],
+        textRanges: null,
+        debounce: !0
+      }
+    };
+    T.params.actions = v.reduce((_, M) => k.compose(_, M), null);
+    const V = s.syncExecuteCommand(T.id, T.params);
+    return a.refreshControls(), !!V;
+  }
+}, je = 0, ke = 100, Ri = (i) => {
+  const e = ie(W), n = ie(en), t = ie(ge), o = ie(Q), r = ie(X), { drawings: a } = i, s = a[0];
   if (s == null)
+    return null;
+  const { unitId: l } = s, c = r.getUniverDocInstance(l), m = o.getRenderById(l);
+  if ((m == null ? void 0 : m.scene) == null)
+    return null;
+  const [p, f] = te(!0), [g, w] = te(!0), [v, I] = te(!0), [C, P] = te(re.INLINE), [S, O] = te(""), [R, D] = te({
+    distT: 0,
+    distL: 0,
+    distB: 0,
+    distR: 0
+  }), [b, y] = te(!0);
+  function T(N) {
+    P(N);
+    const _ = t.getFocusDrawings();
+    if (_.length === 0)
+      return;
+    const { unitId: M, subUnitId: E } = _[0], A = _.map(({ unitId: U, subUnitId: F, drawingId: q }) => ({
+      unitId: U,
+      subUnitId: F,
+      drawingId: q
+    }));
+    e.executeCommand(Zn.id, {
+      unitId: M,
+      subUnitId: E,
+      drawings: A,
+      wrappingStyle: N
+    });
+  }
+  function V(N) {
+    O(N);
+    const _ = t.getFocusDrawings();
+    if (_.length === 0)
+      return;
+    const M = _.map((E) => ({
+      unitId: E.unitId,
+      subUnitId: E.subUnitId,
+      drawingId: E.drawingId
+    }));
+    e.executeCommand(Jn.id, {
+      unitId: _[0].unitId,
+      subUnitId: _[0].unitId,
+      drawings: M,
+      wrapText: N
+    });
+  }
+  function x(N, _) {
+    if (N == null)
+      return;
+    const M = { ...R, [_]: N };
+    D(M);
+    const E = t.getFocusDrawings();
+    if (E.length === 0)
+      return;
+    const A = E.map((U) => ({
+      unitId: U.unitId,
+      subUnitId: U.subUnitId,
+      drawingId: U.drawingId
+    }));
+    e.executeCommand(Qn.id, {
+      unitId: E[0].unitId,
+      subUnitId: E[0].unitId,
+      drawings: A,
+      dist: {
+        [_]: N
+      }
+    });
+  }
+  function L() {
+    const N = t.getFocusDrawings();
+    N.length !== 0 && z(N[0]);
+  }
+  function z(N) {
+    var ce, pe;
+    const _ = (pe = (ce = c == null ? void 0 : c.getSnapshot()) == null ? void 0 : ce.drawings) == null ? void 0 : pe[N.drawingId];
+    if (_ == null)
+      return;
+    const {
+      distT: M = 0,
+      distL: E = 0,
+      distB: A = 0,
+      distR: U = 0,
+      layoutType: F = B.INLINE,
+      behindDoc: q = Me.FALSE,
+      wrapText: J = Ae.BOTH_SIDES
+    } = _;
+    if (D({
+      distT: M,
+      distL: E,
+      distB: A,
+      distR: U
+    }), O(J), f(F !== B.WRAP_SQUARE), F === B.WRAP_NONE || F === B.INLINE ? w(!0) : w(!1), F === B.WRAP_NONE || F === B.INLINE || F === B.WRAP_TOP_AND_BOTTOM ? I(!0) : I(!1), F === B.WRAP_NONE)
+      q === Me.TRUE ? P(re.BEHIND_TEXT) : P(re.IN_FRONT_OF_TEXT);
+    else
+      switch (F) {
+        case B.INLINE:
+          P(re.INLINE);
+          break;
+        case B.WRAP_SQUARE:
+          P(re.WRAP_SQUARE);
+          break;
+        case B.WRAP_TOP_AND_BOTTOM:
+          P(re.WRAP_TOP_AND_BOTTOM);
+          break;
+        default:
+          throw new Error(`Unsupported layout type: ${F}`);
+      }
+  }
+  return gn(() => {
+    L();
+    const N = t.focus$.subscribe((M) => {
+      if (M.length === 0) {
+        y(!1);
+        return;
+      }
+      y(!0), z(M[0]);
+    }), _ = e.onCommandExecuted(async (M) => {
+      M.id === Z.id && L();
+    });
+    return () => {
+      N.unsubscribe(), _.dispose();
+    };
+  }, []), /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelGrid, h.imageCommonPanelBorder), style: { display: b ? "block" : "none" } }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelTitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-text-wrap.title")))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-text-wrap.wrappingStyle")))), /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelRow) }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn) }, /* @__PURE__ */ d.createElement(Mn, { value: C, onChange: T, direction: "vertical" }, /* @__PURE__ */ d.createElement(Ie, { value: re.INLINE }, n.t("image-text-wrap.inline")), /* @__PURE__ */ d.createElement(Ie, { value: re.WRAP_SQUARE }, n.t("image-text-wrap.square")), /* @__PURE__ */ d.createElement(Ie, { value: re.WRAP_TOP_AND_BOTTOM }, n.t("image-text-wrap.topAndBottom")), /* @__PURE__ */ d.createElement(Ie, { value: re.BEHIND_TEXT }, n.t("image-text-wrap.behindText")), /* @__PURE__ */ d.createElement(Ie, { value: re.IN_FRONT_OF_TEXT }, n.t("image-text-wrap.inFrontText"))))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-text-wrap.wrapText")))), /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelRow) }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn) }, /* @__PURE__ */ d.createElement(Mn, { disabled: p, value: S, onChange: V, direction: "horizontal" }, /* @__PURE__ */ d.createElement(Ie, { value: Ae.BOTH_SIDES }, n.t("image-text-wrap.bothSide")), /* @__PURE__ */ d.createElement(Ie, { value: Ae.LEFT }, n.t("image-text-wrap.leftOnly")), /* @__PURE__ */ d.createElement(Ie, { value: Ae.RIGHT }, n.t("image-text-wrap.rightOnly"))))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-text-wrap.distanceFromText")))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, n.t("image-text-wrap.top"))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
+    Te,
+    {
+      min: je,
+      max: ke,
+      disabled: g,
+      precision: 1,
+      value: R.distT,
+      onChange: (N) => {
+        x(N, "distT");
+      },
+      className: h.imageCommonPanelInput
+    }
+  ))))), /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, n.t("image-text-wrap.left"))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
+    Te,
+    {
+      min: je,
+      max: ke,
+      disabled: v,
+      precision: 1,
+      value: R.distL,
+      onChange: (N) => {
+        x(N, "distL");
+      },
+      className: h.imageCommonPanelInput
+    }
+  )))))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, n.t("image-text-wrap.bottom"))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
+    Te,
+    {
+      min: je,
+      max: ke,
+      disabled: g,
+      precision: 1,
+      value: R.distB,
+      onChange: (N) => {
+        x(N, "distB");
+      },
+      className: h.imageCommonPanelInput
+    }
+  ))))), /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, n.t("image-text-wrap.right"))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
+    Te,
+    {
+      min: je,
+      max: ke,
+      disabled: v,
+      precision: 1,
+      value: R.distR,
+      onChange: (N) => {
+        x(N, "distR");
+      },
+      className: h.imageCommonPanelInput
+    }
+  )))))));
+}, Rn = -1e3, Nn = 1e3, Ni = (i) => {
+  const e = ie(W), n = ie(en), t = ie(ge), o = ie(Q), r = ie(X), a = ie(Le), { drawings: s } = i, l = s[0];
+  if (l == null)
     return;
-  const c = s.getTransformerByCreate(), [u, m] = Z(!0);
-  Z(""), Ie(() => {
-    const l = c.clearControl$.subscribe((g) => {
-      g === !0 && m(!1);
+  const { unitId: c } = l, m = r.getUniverDocInstance(c), u = o.getRenderById(c), p = u == null ? void 0 : u.scene;
+  if (p == null)
+    return;
+  const f = p.getTransformerByCreate(), g = [{
+    label: n.t("image-position.column"),
+    value: String(Y.COLUMN)
+  }, {
+    label: n.t("image-position.page"),
+    value: String(Y.PAGE)
+  }, {
+    label: n.t("image-position.margin"),
+    value: String(Y.MARGIN)
+  }], w = [{
+    label: n.t("image-position.line"),
+    value: String(G.LINE)
+  }, {
+    label: n.t("image-position.page"),
+    value: String(G.PAGE)
+  }, {
+    label: n.t("image-position.margin"),
+    value: String(G.MARGIN)
+  }, {
+    label: n.t("image-position.paragraph"),
+    value: String(G.PARAGRAPH)
+  }], [v, I] = te(!0), [C, P] = te({
+    relativeFrom: Y.PAGE,
+    posOffset: 0
+  }), [S, O] = te({
+    relativeFrom: G.PAGE,
+    posOffset: 0
+  }), [R, D] = te(!0), [b, y] = te(!0);
+  function T(_, M) {
+    _ === "positionH" ? P(M) : O(M);
+    const E = t.getFocusDrawings();
+    if (E.length === 0)
+      return;
+    const A = E.map((U) => ({
+      unitId: U.unitId,
+      subUnitId: U.subUnitId,
+      drawingId: U.drawingId
+    }));
+    e.executeCommand(xe.id, {
+      unitId: E[0].unitId,
+      subUnitId: E[0].unitId,
+      drawings: A.map((U) => ({
+        drawingId: U.drawingId,
+        key: _,
+        value: M
+      }))
+    }), a.blur(), f.refreshControls();
+  }
+  function V(_) {
+    var ee;
+    const M = C.relativeFrom, E = C.posOffset, A = Number(_);
+    if (M === A)
+      return;
+    const U = t.getFocusDrawings();
+    if (U.length === 0)
+      return;
+    const F = U[0].drawingId, q = U[0].unitId;
+    let J = null, ue = 0;
+    const ce = (ee = o.getRenderById(q)) == null ? void 0 : ee.with(me).getSkeleton(), pe = ce == null ? void 0 : ce.getSkeletonData();
+    if (pe == null)
+      return;
+    for (const we of pe.pages) {
+      const { marginLeft: ve, skeDrawings: ne } = we;
+      if (ne.has(F)) {
+        J = ne.get(F), ue = ve;
+        break;
+      }
+    }
+    if (J == null)
+      return;
+    let oe = 0;
+    M === Y.COLUMN ? oe -= J.columnLeft : M === Y.MARGIN && (oe -= ue), A === Y.COLUMN ? oe += J.columnLeft : A === Y.MARGIN ? oe += ue : Y.PAGE;
+    const K = {
+      relativeFrom: A,
+      posOffset: (E != null ? E : 0) - oe
+    };
+    T("positionH", K);
+  }
+  function x(_) {
+    var Ge, fn, hn, wn, vn;
+    const M = S.relativeFrom, E = S.posOffset, A = Number(_);
+    if (M === A)
+      return;
+    const U = t.getFocusDrawings();
+    if (U.length === 0)
+      return;
+    const { drawingId: F, unitId: q } = U[0], J = r.getUniverDocInstance(q), ue = (Ge = o.getRenderById(q)) == null ? void 0 : Ge.with(me).getSkeleton(), ce = (hn = (fn = J == null ? void 0 : J.getBody()) == null ? void 0 : fn.customBlocks) == null ? void 0 : hn.find((We) => We.blockId === F);
+    if (ce == null || ue == null)
+      return;
+    const { startIndex: pe } = ce, oe = ue.findNodeByCharIndex(pe), K = (wn = oe == null ? void 0 : oe.parent) == null ? void 0 : wn.parent, ee = K == null ? void 0 : K.parent, we = ee == null ? void 0 : ee.lines.find((We) => We.paragraphIndex === (K == null ? void 0 : K.paragraphIndex) && We.paragraphStart), ve = (vn = ee == null ? void 0 : ee.parent) == null ? void 0 : vn.parent;
+    if (oe == null || K == null || we == null || ee == null || ve == null)
+      return;
+    let ne = 0;
+    M === G.PARAGRAPH ? ne -= we.top : M === G.LINE ? ne -= K.top : M === G.PAGE && (ne += ve.marginTop), A === G.PARAGRAPH ? ne += we.top : A === G.LINE ? ne += K.top : A === G.PAGE && (ne -= ve.marginTop);
+    const le = {
+      relativeFrom: A,
+      posOffset: (E != null ? E : 0) - ne
+    };
+    T("positionV", le);
+  }
+  function L(_) {
+    var q;
+    const M = m == null ? void 0 : m.getSnapshot(), E = (q = M == null ? void 0 : M.drawings) == null ? void 0 : q[_.drawingId];
+    if (E == null)
+      return;
+    const { layoutType: A } = E, {
+      positionH: U,
+      positionV: F
+    } = E.docTransform;
+    P(U), O(F), I(A === B.INLINE), D(F.relativeFrom === G.PARAGRAPH || F.relativeFrom === G.LINE);
+  }
+  function z() {
+    const _ = t.getFocusDrawings();
+    _.length !== 0 && L(_[0]);
+  }
+  function N(_) {
+    D(_), x(String(_ ? G.PARAGRAPH : G.PAGE));
+  }
+  return gn(() => {
+    z();
+    const _ = t.focus$.subscribe((E) => {
+      if (E.length === 0) {
+        y(!1);
+        return;
+      }
+      y(!0), L(E[0]);
+    }), M = e.onCommandExecuted(async (E) => {
+      E.id === Z.id && z();
     });
     return () => {
-      l.unsubscribe();
+      _.unsubscribe(), M.dispose();
     };
-  }, []);
-  const d = (l) => l ? "block" : "none";
-  return /* @__PURE__ */ C.createElement("div", { className: j(O.imageCommonPanelGrid, O.imageCommonPanelBorder), style: { display: d(u) } }, /* @__PURE__ */ C.createElement("div", { className: O.imageCommonPanelRow }, /* @__PURE__ */ C.createElement("div", { className: j(O.imageCommonPanelColumn, O.imageCommonPanelTitle) }, /* @__PURE__ */ C.createElement("div", null, n.t("drawing-anchor.title")))), /* @__PURE__ */ C.createElement("div", { className: j(O.imageCommonPanelRow) }, /* @__PURE__ */ C.createElement("div", { className: j(O.imageCommonPanelColumn) })));
-}, Kn = () => {
-  const e = b(N), n = e.getFocusDrawings(), [t, r] = Z(n);
-  return Ie(() => {
-    const i = e.focus$.subscribe((o) => {
-      r(o);
+  }, []), /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelGrid, h.imageCommonPanelBorder), style: { display: b ? "block" : "none" } }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelTitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-position.title")))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-position.horizontal")))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, n.t("image-position.absolutePosition"))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
+    Te,
+    {
+      min: Rn,
+      max: Nn,
+      precision: 1,
+      disabled: v,
+      value: C.posOffset,
+      onChange: (_) => {
+        T("positionH", {
+          relativeFrom: C.relativeFrom,
+          posOffset: _
+        });
+      },
+      className: h.imageCommonPanelInput
+    }
+  ))))), /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, n.t("image-position.toTheRightOf"))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
+    yn,
+    {
+      value: String(C.relativeFrom),
+      disabled: v,
+      options: g,
+      onChange: V
+    }
+  )))))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-position.vertical")))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, n.t("image-position.absolutePosition"))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
+    Te,
+    {
+      min: Rn,
+      max: Nn,
+      precision: 1,
+      disabled: v,
+      value: S.posOffset,
+      onChange: (_) => {
+        T("positionV", {
+          relativeFrom: S.relativeFrom,
+          posOffset: _
+        });
+      },
+      className: h.imageCommonPanelInput
+    }
+  ))))), /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSpan2) }, /* @__PURE__ */ d.createElement("label", null, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, n.t("image-position.bellow"))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(
+    yn,
+    {
+      disabled: v,
+      value: String(S.relativeFrom),
+      options: w,
+      onChange: x
+    }
+  )))))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow }, /* @__PURE__ */ d.createElement("div", { className: H(h.imageCommonPanelColumn, h.imageCommonPanelSubtitle) }, /* @__PURE__ */ d.createElement("div", null, n.t("image-position.options")))), /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelRow, style: { marginBottom: "50px" } }, /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanelColumn }, /* @__PURE__ */ d.createElement(ei, { disabled: v, checked: R, onChange: N }, n.t("image-position.moveObjectWithText")))));
+}, Ai = () => {
+  const i = ie(ge), e = i.getFocusDrawings(), [n, t] = te(e);
+  return gn(() => {
+    const o = i.focus$.subscribe((r) => {
+      t(r);
     });
     return () => {
-      i.unsubscribe();
+      o.unsubscribe();
     };
-  }, []), !!(t != null && t.length) && /* @__PURE__ */ C.createElement("div", { className: O.imageCommonPanel }, /* @__PURE__ */ C.createElement(Xe, { drawings: t }), /* @__PURE__ */ C.createElement(zn, { drawings: t }));
-}, x = {
+  }, []), !!(n != null && n.length) && /* @__PURE__ */ d.createElement("div", { className: h.imageCommonPanel }, /* @__PURE__ */ d.createElement(Pt, { drawings: n, hasAlign: !1, hasCropper: !1, hasGroup: !1, hasTransform: !1 }), /* @__PURE__ */ d.createElement(Ri, { drawings: n }), /* @__PURE__ */ d.createElement(Ni, { drawings: n }));
+}, Oe = {
+  id: "doc.operation.clear-drawing-transformer",
+  type: $.MUTATION,
+  handler: (i, e) => {
+    const n = i.get(Q);
+    return e.forEach((t) => {
+      var o, r;
+      (r = (o = n.getRenderById(t)) == null ? void 0 : o.scene.getTransformer()) == null || r.debounceRefreshControls();
+    }), !0;
+  }
+}, Fe = {
   id: "doc.command.move-drawing",
-  type: S.COMMAND,
-  handler: (e, n) => {
-    const t = e.get(I), r = e.get(M), { direction: i } = n, o = r.getFocusDrawings();
-    if (o.length === 0)
+  type: $.COMMAND,
+  handler: (i, e) => {
+    const n = i.get(W), t = i.get(De), o = i.get(X), r = i.get(Q), { direction: a } = e, s = t.getFocusDrawings();
+    if (s.length === 0)
+      return !1;
+    const l = s[0].unitId, c = r.getRenderById(l), m = c == null ? void 0 : c.scene;
+    if (m == null)
       return !1;
-    const a = o[0].unitId, s = o.map((u) => {
-      const { transform: m } = u;
-      if (m == null)
+    const u = m.getTransformerByCreate(), p = o.getUniverDocInstance(l), f = s.map((w) => {
+      var R, D, b, y, T;
+      const { drawingId: v } = w, I = (R = p == null ? void 0 : p.getSnapshot().drawings) == null ? void 0 : R[v];
+      if (I == null || I.layoutType === B.INLINE)
         return null;
-      const d = { ...m }, { left: l = 0, top: g = 0 } = m;
-      return i === P.UP ? d.top = g - 1 : i === P.DOWN ? d.top = g + 1 : i === P.LEFT ? d.left = l - 1 : i === P.RIGHT && (d.left = l + 1), {
-        ...u,
-        transform: d,
-        docTransform: le(d)
+      const { positionH: C, positionV: P } = I.docTransform, S = { ...C }, O = { ...P };
+      return a === ae.UP ? O.posOffset = ((D = O.posOffset) != null ? D : 0) - 2 : a === ae.DOWN ? O.posOffset = ((b = O.posOffset) != null ? b : 0) + 2 : a === ae.LEFT ? S.posOffset = ((y = S.posOffset) != null ? y : 0) - 2 : a === ae.RIGHT && (S.posOffset = ((T = S.posOffset) != null ? T : 0) + 2), {
+        drawingId: v,
+        key: a === ae.UP || a === ae.DOWN ? "positionV" : "positionH",
+        value: a === ae.UP || a === ae.DOWN ? O : S
       };
-    }).filter((u) => u != null);
-    return t.syncExecuteCommand(q.id, {
-      unitId: a,
-      drawings: s
-    }) ? (t.syncExecuteCommand(w.id, [a]), !0) : !1;
+    }).filter((w) => w != null);
+    if (f.length === 0)
+      return !1;
+    const g = n.syncExecuteCommand(xe.id, {
+      unitId: l,
+      subUnitId: l,
+      drawings: f
+    });
+    return u.refreshControls(), !!g;
   }
-}, ye = {
+}, tt = {
   id: "doc.command.delete-drawing",
-  type: S.COMMAND,
-  handler: (e) => {
-    const n = e.get(I), r = e.get(M).getFocusDrawings();
-    if (r.length === 0)
+  type: $.COMMAND,
+  handler: (i) => {
+    const e = i.get(W), t = i.get(De).getFocusDrawings();
+    if (t.length === 0)
       return !1;
-    const i = r[0].unitId, o = r.map((a) => {
-      const { unitId: s, subUnitId: c, drawingId: u, drawingType: m } = a;
+    const { unitId: o } = t[0], r = t.map((a) => {
+      const { unitId: s, subUnitId: l, drawingId: c, drawingType: m } = a;
       return {
         unitId: s,
-        subUnitId: c,
-        drawingId: u,
+        subUnitId: l,
+        drawingId: c,
         drawingType: m
       };
     });
-    return n.executeCommand(X.id, {
-      unitId: i,
-      drawings: o
+    return e.executeCommand(pn.id, {
+      unitId: o,
+      drawings: r
     });
   }
-}, be = {
+}, it = {
   id: "doc.command.set-drawing-arrange",
-  type: S.COMMAND,
-  handler: (e, n) => {
-    const t = e.get(I), r = e.get(U);
-    if (!n) return !1;
-    const i = e.get(M), { unitId: o, subUnitId: a, drawingIds: s, arrangeType: c } = n, u = { unitId: o, subUnitId: a, drawingIds: s };
-    let m;
-    if (c === L.forward ? m = i.getForwardDrawingsOp(u) : c === L.backward ? m = i.getBackwardDrawingOp(u) : c === L.front ? m = i.getFrontDrawingsOp(u) : c === L.back && (m = i.getBackDrawingsOp(u)), m == null)
+  type: $.COMMAND,
+  handler: (i, e) => {
+    const n = i.get(W), t = i.get(De);
+    if (e == null)
       return !1;
-    const { objects: d, redo: l, undo: g } = m;
-    return t.syncExecuteCommand(p.id, { op: l, unitId: o, subUnitId: a, objects: d, type: f.ARRANGE }) ? (r.pushUndoRedo({
-      unitID: o,
+    const { unitId: o, subUnitId: r, drawingIds: a, arrangeType: s } = e, l = { unitId: o, subUnitId: r, drawingIds: a };
+    let c;
+    if (s === He.forward ? c = t.getForwardDrawingsOp(l) : s === He.backward ? c = t.getBackwardDrawingOp(l) : s === He.front ? c = t.getFrontDrawingsOp(l) : s === He.back && (c = t.getBackDrawingsOp(l)), c == null)
+      return !1;
+    const { redo: m } = c;
+    if (m == null)
+      return !1;
+    const u = [];
+    let p = _e.deepClone(m);
+    p = p.slice(3), p.unshift("drawingsOrder"), u.push(p);
+    const f = {
+      id: Z.id,
+      params: {
+        unitId: o,
+        actions: [],
+        textRanges: null
+      }
+    };
+    return f.params.actions = u.reduce((w, v) => k.compose(w, v), null), !!n.syncExecuteCommand(f.id, f.params);
+  }
+}, ot = {
+  id: "doc.command.set-doc-image",
+  type: $.COMMAND,
+  handler: (i, e) => {
+    const n = i.get(W), t = i.get(mn), o = i.get(De);
+    if (!e) return !1;
+    const { drawings: r } = e, a = o.getBatchUpdateOp(r), { unitId: s, subUnitId: l, undo: c, redo: m, objects: u } = a;
+    return n.syncExecuteCommand(fe.id, { unitId: s, subUnitId: l, op: m, objects: u, type: he.UPDATE }) ? (t.pushUndoRedo({
+      unitID: s,
       undoMutations: [
-        { id: p.id, params: { op: g, unitId: o, subUnitId: a, objects: d, type: f.ARRANGE } }
+        { id: fe.id, params: { unitId: s, subUnitId: l, op: c, objects: u, type: he.UPDATE } },
+        { id: Oe.id, params: [s] }
       ],
       redoMutations: [
-        { id: p.id, params: { op: l, unitId: o, subUnitId: a, objects: d, type: f.ARRANGE } }
+        { id: fe.id, params: { unitId: s, subUnitId: l, op: m, objects: u, type: he.UPDATE } },
+        { id: Oe.id, params: [s] }
       ]
     }), !0) : !1;
   }
 };
-function Zn(e) {
-  const n = [];
-  return e.forEach((t) => {
-    const { parent: r, children: i } = t, { unitId: o, subUnitId: a, drawingId: s } = r, c = an(0, 0, i.map((d) => d.transform || {})), u = i.map((d) => {
-      const l = d.transform || { left: 0, top: 0 }, { unitId: g, subUnitId: h, drawingId: v } = d;
+function xi(i) {
+  const e = [];
+  return i.forEach((n) => {
+    const { parent: t, children: o } = n, { unitId: r, subUnitId: a, drawingId: s } = t, l = Nt(0, 0, o.map((u) => u.transform || {})), c = o.map((u) => {
+      const p = u.transform || { left: 0, top: 0 }, { unitId: f, subUnitId: g, drawingId: w } = u;
       return {
-        unitId: g,
-        subUnitId: h,
-        drawingId: v,
+        unitId: f,
+        subUnitId: g,
+        drawingId: w,
         transform: {
-          ...l,
-          left: l.left - c.left,
-          top: l.top - c.top
+          ...p,
+          left: p.left - l.left,
+          top: p.top - l.top
         },
         groupId: s
       };
     }), m = {
-      unitId: o,
+      unitId: r,
       subUnitId: a,
       drawingId: s,
-      drawingType: Q.DRAWING_GROUP,
-      transform: c
+      drawingType: un.DRAWING_GROUP,
+      transform: l
     };
-    n.push({
+    e.push({
       parent: m,
-      children: u
+      children: c
     });
-  }), n;
+  }), e;
 }
-function Yn(e) {
-  const n = [];
-  return e.forEach((t) => {
-    const { parent: r, children: i } = t, { unitId: o, subUnitId: a, drawingId: s, transform: c = { width: 0, height: 0 } } = r;
-    if (c == null)
+function Ui(i) {
+  const e = [];
+  return i.forEach((n) => {
+    const { parent: t, children: o } = n, { unitId: r, subUnitId: a, drawingId: s, transform: l = { width: 0, height: 0 } } = t;
+    if (l == null)
       return;
-    const u = i.map((d) => {
-      const { transform: l } = d, { unitId: g, subUnitId: h, drawingId: v } = d, xe = sn(l || {}, c, c.width || 0, c.height || 0);
+    const c = o.map((u) => {
+      const { transform: p } = u, { unitId: f, subUnitId: g, drawingId: w } = u, v = At(p || {}, l, l.width || 0, l.height || 0);
       return {
-        unitId: g,
-        subUnitId: h,
-        drawingId: v,
-        transform: xe,
+        unitId: f,
+        subUnitId: g,
+        drawingId: w,
+        transform: v,
         groupId: void 0
       };
     }), m = {
-      unitId: o,
+      unitId: r,
       subUnitId: a,
       drawingId: s,
-      drawingType: Q.DRAWING_GROUP,
+      drawingType: un.DRAWING_GROUP,
       transform: {
         left: 0,
         top: 0
       }
     };
-    n.push({
+    e.push({
       parent: m,
-      children: u
+      children: c
     });
-  }), n;
+  }), e;
 }
-const Re = {
+const rt = {
   id: "doc.command.ungroup-doc-image",
-  type: S.COMMAND,
-  handler: (e, n) => {
-    const t = e.get(I), r = e.get(U), i = e.get(M);
-    if (!n) return !1;
-    const o = [];
-    n.forEach(({ parent: g, children: h }) => {
-      o.push(g.unitId), h.forEach((v) => {
-        o.push(v.unitId);
+  type: $.COMMAND,
+  handler: (i, e) => {
+    const n = i.get(W), t = i.get(mn), o = i.get(De);
+    if (!e) return !1;
+    const r = [];
+    e.forEach(({ parent: f, children: g }) => {
+      r.push(f.unitId), g.forEach((w) => {
+        r.push(w.unitId);
       });
     });
-    const a = i.getUngroupDrawingOp(n), { unitId: s, subUnitId: c, undo: u, redo: m, objects: d } = a;
-    return t.syncExecuteCommand(p.id, { op: m, unitId: s, subUnitId: c, objects: d, type: f.UNGROUP }) ? (r.pushUndoRedo({
+    const a = o.getUngroupDrawingOp(e), { unitId: s, subUnitId: l, undo: c, redo: m, objects: u } = a;
+    return n.syncExecuteCommand(fe.id, { op: m, unitId: s, subUnitId: l, objects: u, type: he.UNGROUP }) ? (t.pushUndoRedo({
       unitID: s,
       undoMutations: [
-        { id: p.id, params: { op: u, unitId: s, subUnitId: c, objects: Zn(d), type: f.GROUP } },
-        { id: w.id, params: o }
+        { id: fe.id, params: { op: c, unitId: s, subUnitId: l, objects: xi(u), type: he.GROUP } },
+        { id: Oe.id, params: r }
       ],
       redoMutations: [
-        { id: p.id, params: { op: m, unitId: s, subUnitId: c, objects: d, type: f.UNGROUP } },
-        { id: w.id, params: o }
+        { id: fe.id, params: { op: m, unitId: s, subUnitId: l, objects: u, type: he.UNGROUP } },
+        { id: Oe.id, params: r }
       ]
     }), !0) : !1;
   }
-}, Ue = {
+}, at = {
   id: "doc.command.group-doc-image",
-  type: S.COMMAND,
-  handler: (e, n) => {
-    const t = e.get(I), r = e.get(U), i = e.get(M);
-    if (!n) return !1;
-    const o = [];
-    n.forEach(({ parent: g, children: h }) => {
-      o.push(g.unitId), h.forEach((v) => {
-        o.push(v.unitId);
+  type: $.COMMAND,
+  handler: (i, e) => {
+    const n = i.get(W), t = i.get(mn), o = i.get(De);
+    if (!e) return !1;
+    const r = [];
+    e.forEach(({ parent: f, children: g }) => {
+      r.push(f.unitId), g.forEach((w) => {
+        r.push(w.unitId);
       });
     });
-    const a = i.getGroupDrawingOp(n), { unitId: s, subUnitId: c, undo: u, redo: m, objects: d } = a;
-    return t.syncExecuteCommand(p.id, { op: m, unitId: s, subUnitId: c, objects: d, type: f.GROUP }) ? (r.pushUndoRedo({
+    const a = o.getGroupDrawingOp(e), { unitId: s, subUnitId: l, undo: c, redo: m, objects: u } = a;
+    return n.syncExecuteCommand(fe.id, { op: m, unitId: s, subUnitId: l, objects: u, type: he.GROUP }) ? (t.pushUndoRedo({
       unitID: s,
       undoMutations: [
-        { id: p.id, params: { op: u, unitId: s, subUnitId: c, objects: Yn(d), type: f.UNGROUP } },
-        { id: w.id, params: o }
+        { id: fe.id, params: { op: c, unitId: s, subUnitId: l, objects: Ui(u), type: he.UNGROUP } },
+        { id: Oe.id, params: r }
       ],
       redoMutations: [
-        { id: p.id, params: { op: m, unitId: s, subUnitId: c, objects: d, type: f.GROUP } },
-        { id: w.id, params: o }
+        { id: fe.id, params: { op: m, unitId: s, subUnitId: l, objects: u, type: he.GROUP } },
+        { id: Oe.id, params: r }
       ]
     }), !0) : !1;
   }
-}, Ne = {
+}, st = {
   id: "doc.command.insert-doc-image",
-  type: S.COMMAND,
-  handler: (e, n) => {
-    const t = e.get(I), r = e.get(U), i = e.get(M);
-    if (!n) return !1;
-    const o = n.drawings, a = o.map((h) => h.unitId), s = i.getBatchAddOp(o), { unitId: c, subUnitId: u, undo: m, redo: d, objects: l } = s;
-    return t.syncExecuteCommand(p.id, { op: d, unitId: c, subUnitId: u, objects: l, type: f.INSERT }) ? (r.pushUndoRedo({
-      unitID: c,
-      undoMutations: [
-        { id: p.id, params: { op: m, unitId: c, subUnitId: u, objects: l, type: f.REMOVE } },
-        { id: w.id, params: a }
-      ],
-      redoMutations: [
-        { id: p.id, params: { op: d, unitId: c, subUnitId: u, objects: l, type: f.INSERT } },
-        { id: w.id, params: a }
-      ]
-    }), !0) : !1;
+  type: $.COMMAND,
+  // eslint-disable-next-line max-lines-per-function
+  handler: (i, e) => {
+    var O, R;
+    if (e == null)
+      return !1;
+    const n = i.get(W), t = i.get(cn), o = i.get(X), r = t.getActiveRange(), a = o.getCurrentUniverDocInstance();
+    if (r == null || a == null)
+      return !1;
+    const s = a.getUnitId(), { drawings: l } = e, { collapsed: c, startOffset: m, segmentId: u } = r, p = a.getSelfOrHeaderFooterModel(u).getBody();
+    if (p == null)
+      return !1;
+    const f = new Je(), g = k.getInstance(), w = [], v = (R = (O = a.getSnapshot().drawingsOrder) == null ? void 0 : O.length) != null ? R : 0;
+    if (c)
+      m > 0 && f.push({
+        t: j.RETAIN,
+        len: m,
+        segmentId: u
+      });
+    else {
+      const { dos: D } = jt(r, u, 0, p);
+      f.push(...D);
+    }
+    f.push({
+      t: j.INSERT,
+      body: {
+        dataStream: "\b".repeat(l.length),
+        customBlocks: l.map((D, b) => ({
+          startIndex: b,
+          blockId: D.drawingId
+        }))
+      },
+      len: l.length,
+      line: 0,
+      segmentId: u
+    });
+    const I = on(a, u), C = g.editOp(f.serialize(), I);
+    w.push(C);
+    for (const D of l) {
+      const { drawingId: b } = D, y = g.insertOp(["drawings", b], D), T = g.insertOp(["drawingsOrder", v], b);
+      w.push(y), w.push(T);
+    }
+    const P = {
+      id: Z.id,
+      params: {
+        unitId: s,
+        actions: [],
+        textRanges: []
+      }
+    };
+    return P.params.actions = w.reduce((D, b) => k.compose(D, b), null), !!n.syncExecuteCommand(P.id, P.params);
   }
 };
-function G(e) {
-  return !e.getContextValue($e) && e.getContextValue(V);
+function Be(i) {
+  return i.getContextValue(pt) && i.getContextValue(Ze);
 }
-const kn = {
-  id: x.id,
+const Li = {
+  id: Fe.id,
   description: "shortcut.doc.drawing-move-down",
   group: "4_doc-drawing-view",
-  binding: R.ARROW_DOWN,
+  binding: ye.ARROW_DOWN,
   priority: 100,
-  preconditions: G,
+  preconditions: Be,
   staticParameters: {
-    direction: P.DOWN
+    direction: ae.DOWN
   }
-}, Qn = {
-  id: x.id,
+}, Fi = {
+  id: Fe.id,
   description: "shortcut.doc.drawing-move-up",
   group: "4_doc-drawing-view",
-  binding: R.ARROW_UP,
+  binding: ye.ARROW_UP,
   priority: 100,
-  preconditions: G,
+  preconditions: Be,
   staticParameters: {
-    direction: P.UP
+    direction: ae.UP
   }
-}, Xn = {
-  id: x.id,
+}, Bi = {
+  id: Fe.id,
   description: "shortcut.doc.drawing-move-left",
   group: "4_doc-drawing-view",
-  binding: R.ARROW_LEFT,
+  binding: ye.ARROW_LEFT,
   priority: 100,
-  preconditions: G,
+  preconditions: Be,
   staticParameters: {
-    direction: P.LEFT
+    direction: ae.LEFT
   }
-}, qn = {
-  id: x.id,
+}, Gi = {
+  id: Fe.id,
   description: "shortcut.doc.drawing-move-right",
   group: "4_doc-drawing-view",
-  binding: R.ARROW_RIGHT,
+  binding: ye.ARROW_RIGHT,
   priority: 100,
-  preconditions: G,
+  preconditions: Be,
   staticParameters: {
-    direction: P.RIGHT
+    direction: ae.RIGHT
   }
-}, Jn = {
-  id: ye.id,
+}, Wi = {
+  id: tt.id,
   description: "shortcut.doc.drawing-delete",
   group: "4_doc-drawing-view",
   // when focusing on any other input tag do not trigger this shortcut
-  preconditions: G,
-  binding: R.DELETE,
-  mac: R.BACKSPACE
+  preconditions: Be,
+  binding: ye.DELETE,
+  mac: ye.BACKSPACE
 };
-var et = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, tt = (e, n, t, r) => {
-  for (var i = r > 1 ? void 0 : r ? nt(n, t) : n, o = e.length - 1, a; o >= 0; o--)
-    (a = e[o]) && (i = (r ? a(n, t, i) : a(i)) || i);
-  return r && i && et(n, t, i), i;
-}, T = (e, n) => (t, r) => n(t, r, e);
-let $ = class extends ue {
-  constructor(e, n, t, r, i) {
-    super(), this._injector = e, this._componentManager = n, this._menuService = t, this._commandService = r, this._shortcutService = i, this._init();
+var Hi = Object.defineProperty, Vi = Object.getOwnPropertyDescriptor, ji = (i, e, n, t) => {
+  for (var o = t > 1 ? void 0 : t ? Vi(e, n) : e, r = i.length - 1, a; r >= 0; r--)
+    (a = i[r]) && (o = (t ? a(e, n, o) : a(o)) || o);
+  return t && o && Hi(e, n, o), o;
+}, Re = (i, e) => (n, t) => e(n, t, i);
+let qe = class extends Ue {
+  constructor(i, e, n, t, o) {
+    super(), this._injector = i, this._componentManager = e, this._menuService = n, this._commandService = t, this._shortcutService = o, this._init();
   }
   _initCustomComponents() {
-    const e = this._componentManager;
-    this.disposeWithMe(e.register(Pe, Me)), this.disposeWithMe(e.register(Oe, yn)), this.disposeWithMe(e.register(_e, Kn));
+    const i = this._componentManager;
+    this.disposeWithMe(i.register(Kn, Xn)), this.disposeWithMe(i.register(qn, mi)), this.disposeWithMe(i.register(Vn, Ai));
   }
   _initMenus() {
     [
-      bn,
-      Rn
-    ].forEach((e) => {
-      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(e), {}));
+      gi,
+      pi
+    ].forEach((i) => {
+      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(i), {}));
     });
   }
   _initCommands() {
     [
-      z,
-      Ne,
-      X,
-      q,
-      we,
-      w,
-      Se,
-      Ue,
-      Re,
-      x,
-      ye,
-      be
-    ].forEach((e) => this.disposeWithMe(this._commandService.registerCommand(e)));
+      rn,
+      st,
+      Zn,
+      Qn,
+      Jn,
+      xe,
+      et,
+      nt,
+      pn,
+      ot,
+      jn,
+      Oe,
+      kn,
+      at,
+      rt,
+      Fe,
+      tt,
+      it
+    ].forEach((i) => this.disposeWithMe(this._commandService.registerCommand(i)));
   }
   _initShortcuts() {
     [
       // sheet drawing shortcuts
-      kn,
-      Qn,
-      Xn,
-      qn,
-      Jn
-    ].forEach((e) => {
-      this.disposeWithMe(this._shortcutService.registerShortcut(e));
+      Li,
+      Fi,
+      Bi,
+      Gi,
+      Wi
+    ].forEach((i) => {
+      this.disposeWithMe(this._shortcutService.registerShortcut(i));
     });
   }
   _init() {
     this._initCommands(), this._initCustomComponents(), this._initMenus(), this._initShortcuts();
   }
 };
-$ = tt([
-  se(ce.Ready, $),
-  T(0, y(me)),
-  T(1, y(ln)),
-  T(2, gn),
-  T(3, I),
-  T(4, pn)
-], $);
-var rt = Object.defineProperty, it = Object.getOwnPropertyDescriptor, ot = (e, n, t, r) => {
-  for (var i = r > 1 ? void 0 : r ? it(n, t) : n, o = e.length - 1, a; o >= 0; o--)
-    (a = e[o]) && (i = (r ? a(n, t, i) : a(i)) || i);
-  return r && i && rt(n, t, i), i;
-}, D = (e, n) => (t, r) => n(t, r, e);
-let Y = class extends ue {
-  constructor(e, n, t, r, i, o, a, s, c, u) {
-    super(), this._context = e, this._commandService = n, this._textSelectionManagerService = t, this._docSkeletonManagerService = r, this._sheetDrawingService = i, this._imageIoService = o, this._drawingManagerService = a, this._contextService = s, this._messageService = c, this._localeService = u, this._initCommandListeners(), this._updateDrawingListener(), this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener();
+qe = ji([
+  nn(tn.Ready, qe),
+  Re(0, Se(Un)),
+  Re(1, Se(Kt)),
+  Re(2, Yt),
+  Re(3, W),
+  Re(4, Zt)
+], qe);
+var ki = Object.defineProperty, $i = Object.getOwnPropertyDescriptor, zi = (i, e, n, t) => {
+  for (var o = t > 1 ? void 0 : t ? $i(e, n) : e, r = i.length - 1, a; r >= 0; r--)
+    (a = i[r]) && (o = (t ? a(e, n, o) : a(o)) || o);
+  return t && o && ki(e, n, o), o;
+}, de = (i, e) => (n, t) => e(n, t, i);
+let ln = class extends Ue {
+  constructor(i, e, n, t, o, r, a, s, l, c, m, u) {
+    super(), this._context = i, this._commandService = e, this._textSelectionManagerService = n, this._renderManagerSrv = t, this._imageIoService = o, this._docDrawingService = r, this._drawingManagerService = a, this._contextService = s, this._messageService = l, this._localeService = c, this._textSelectionManager = m, this._textSelectionRenderManager = u, this._initCommandListeners(), this._updateDrawingListener(), this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener();
   }
   /**
    * Upload image to cell or float image
    */
   _initCommandListeners() {
-    this.disposeWithMe(this._commandService.onCommandExecuted(async (e) => {
-      if (e.id === z.id) {
-        const n = e.params;
-        if (n.files == null)
-          return;
-        const t = n.files.length;
-        if (t > ee) {
-          this._messageService.show({
-            type: W.Error,
-            content: this._localeService.t("update-status.exceedMaxCount", String(ee))
-          });
-          return;
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted(async (i) => {
+        if (i.id === rn.id) {
+          const e = i.params;
+          if (e.files == null)
+            return;
+          const n = e.files.length;
+          if (n > _n) {
+            this._messageService.show({
+              type: Ve.Error,
+              content: this._localeService.t("update-status.exceedMaxCount", String(_n))
+            });
+            return;
+          }
+          this._imageIoService.setWaitCount(n), await this._insertFloatImages(e.files);
         }
-        this._imageIoService.setWaitCount(t), n.files.forEach(async (r) => {
-          await this._insertFloatImage(r);
-        });
-      }
-    }));
+      })
+    );
   }
-  async _insertFloatImage(e) {
-    var g;
-    let n;
+  // eslint-disable-next-line max-lines-per-function
+  async _insertFloatImages(i) {
+    let e = [];
     try {
-      n = await this._imageIoService.saveImage(e);
-    } catch (h) {
-      const v = h.message;
-      v === K.ERROR_EXCEED_SIZE ? this._messageService.show({
-        type: W.Error,
-        content: this._localeService.t("update-status.exceedMaxSize", String(en / (1024 * 1024)))
-      }) : v === K.ERROR_IMAGE_TYPE ? this._messageService.show({
-        type: W.Error,
+      e = await Promise.all(i.map((o) => this._imageIoService.saveImage(o)));
+    } catch (o) {
+      const r = o.message;
+      r === an.ERROR_EXCEED_SIZE ? this._messageService.show({
+        type: Ve.Error,
+        content: this._localeService.t("update-status.exceedMaxSize", String(Tt / (1024 * 1024)))
+      }) : r === an.ERROR_IMAGE_TYPE ? this._messageService.show({
+        type: Ve.Error,
         content: this._localeService.t("update-status.invalidImageType")
-      }) : v === K.ERROR_IMAGE && this._messageService.show({
-        type: W.Error,
+      }) : r === an.ERROR_IMAGE && this._messageService.show({
+        type: Ve.Error,
         content: this._localeService.t("update-status.invalidImage")
       });
     }
-    if (n == null)
+    if (e.length === 0)
       return;
-    const { unitId: t } = this._context, { imageId: r, imageSourceType: i, source: o, base64Cache: a } = n, { width: s, height: c, image: u } = await nn(a || "");
-    this._imageIoService.addImageSourceCache(r, i, u);
-    let m = 1;
-    if (s > ne || c > te) {
-      const h = ne / s, v = te / c;
-      m = Math.max(h, v);
+    const { unitId: n } = this._context, t = [];
+    for (const o of e) {
+      if (o == null)
+        continue;
+      const { imageId: r, imageSourceType: a, source: s, base64Cache: l } = o, { width: c, height: m, image: u } = await Mt(l || "");
+      this._imageIoService.addImageSourceCache(r, a, u);
+      let p = 1;
+      if (c > Cn || m > Sn) {
+        const w = Cn / c, v = Sn / m;
+        p = Math.min(w, v);
+      }
+      const f = this._getImagePosition(c * p, m * p);
+      if (f == null)
+        return;
+      const g = {
+        unitId: n,
+        subUnitId: n,
+        drawingId: r,
+        drawingType: un.DRAWING_IMAGE,
+        imageSourceType: a,
+        source: s,
+        transform: Tn(f),
+        docTransform: f,
+        behindDoc: Me.FALSE,
+        title: "",
+        description: "",
+        layoutType: B.INLINE,
+        wrapText: Ae.BOTH_SIDES,
+        distB: 0,
+        distL: 0,
+        distR: 0,
+        distT: 0
+      };
+      t.push(g);
     }
-    const d = this._getImagePosition(s * m, c * m);
-    if (d == null)
-      return;
-    const l = {
-      unitId: t,
-      subUnitId: t,
-      drawingId: r,
-      drawingType: Q.DRAWING_IMAGE,
-      imageSourceType: i,
-      source: o,
-      transform: ie(d),
-      docTransform: d,
-      title: "",
-      description: "",
-      layoutType: Ve.WRAP_SQUARE
-    };
-    this._commandService.executeCommand(Ne.id, {
-      unitId: t,
-      drawings: [l]
-    }), (g = this._docSkeletonManagerService.getSkeleton()) == null || g.calculate();
+    this._commandService.executeCommand(st.id, {
+      unitId: n,
+      drawings: t
+    });
   }
-  _getImagePosition(e, n) {
-    const t = this._textSelectionManagerService.getActiveTextRange(), r = (t == null ? void 0 : t.getAbsolutePosition()) || {
+  _getImagePosition(i, e) {
+    const n = this._textSelectionManagerService.getActiveTextRange(), t = (n == null ? void 0 : n.getAbsolutePosition()) || {
       left: 0,
       top: 0
     };
     return {
       size: {
-        width: e,
-        height: n
+        width: i,
+        height: e
       },
       positionH: {
-        relativeFrom: Be.MARGIN,
-        posOffset: r.left
+        relativeFrom: Y.PAGE,
+        posOffset: t.left
       },
       positionV: {
-        relativeFrom: He.PAGE,
-        posOffset: r.top
+        relativeFrom: G.MARGIN,
+        posOffset: t.top
       },
       angle: 0
     };
   }
   _updateOrderListener() {
-    this._drawingManagerService.featurePluginOrderUpdate$.subscribe((e) => {
-      const { unitId: n, subUnitId: t, drawingIds: r, arrangeType: i } = e;
-      this._commandService.executeCommand(be.id, {
-        unitId: n,
-        subUnitId: t,
-        drawingIds: r,
-        arrangeType: i
+    this._drawingManagerService.featurePluginOrderUpdate$.subscribe((i) => {
+      const { unitId: e, subUnitId: n, drawingIds: t, arrangeType: o } = i;
+      this._commandService.executeCommand(it.id, {
+        unitId: e,
+        subUnitId: n,
+        drawingIds: t,
+        arrangeType: o
       });
     });
   }
   _updateDrawingListener() {
-    this._drawingManagerService.featurePluginUpdate$.subscribe((e) => {
-      if (e.length === 0)
+    this._drawingManagerService.featurePluginUpdate$.subscribe((i) => {
+      if (i.length === 0)
         return;
-      const n = [];
-      if (e.forEach((t) => {
-        const { unitId: r, subUnitId: i, drawingId: o, transform: a } = t;
+      const e = [];
+      if (i.forEach((n) => {
+        const { unitId: t, subUnitId: o, drawingId: r, transform: a } = n;
         if (a == null)
           return;
-        const s = this._sheetDrawingService.getDrawingByParam({ unitId: r, subUnitId: i, drawingId: o });
+        const s = this._docDrawingService.getDrawingByParam({ unitId: t, subUnitId: o, drawingId: r });
         if (s == null)
           return;
-        const c = le({ ...s.transform, ...a });
-        if (c == null)
+        const l = Vt({ ...s.transform, ...a });
+        if (l == null)
           return;
-        const u = {
-          ...t,
-          transform: { ...a, ...ie(c) },
-          docTransform: { ...c }
+        const c = {
+          ...n,
+          transform: { ...a, ...Tn(l) },
+          docTransform: { ...l }
         };
-        n.push(u);
-      }), n.length > 0) {
-        const t = e[0].unitId;
-        this._commandService.syncExecuteCommand(q.id, {
-          unitId: t,
-          drawings: n
+        e.push(c);
+      }), e.length > 0) {
+        const n = i[0].unitId;
+        this._commandService.syncExecuteCommand(ot.id, {
+          unitId: n,
+          drawings: e
         }), this._refreshDocSkeleton();
       }
     });
   }
   _refreshDocSkeleton() {
-    const e = this._docSkeletonManagerService.getSkeleton(), { mainComponent: n } = this._context;
-    e == null || e.calculate(), n == null || n.makeDirty();
+    var t;
+    const { mainComponent: i, unitId: e } = this._context, n = (t = this._renderManagerSrv.getRenderById(e)) == null ? void 0 : t.with(me).getSkeleton();
+    n == null || n.calculate(), i == null || i.makeDirty();
   }
   _groupDrawingListener() {
-    this._drawingManagerService.featurePluginGroupUpdate$.subscribe((e) => {
-      this._commandService.executeCommand(Ue.id, e);
-    }), this._drawingManagerService.featurePluginUngroupUpdate$.subscribe((e) => {
-      this._commandService.executeCommand(Re.id, e);
+    this._drawingManagerService.featurePluginGroupUpdate$.subscribe((i) => {
+      this._commandService.executeCommand(at.id, i);
+    }), this._drawingManagerService.featurePluginUngroupUpdate$.subscribe((i) => {
+      this._commandService.executeCommand(rt.id, i);
     });
   }
+  _getCurrentSceneAndTransformer() {
+    const { scene: i, mainComponent: e } = this._context;
+    if (i == null || e == null)
+      return;
+    const n = i.getTransformerByCreate(), { docsLeft: t, docsTop: o } = e.getOffsetConfig();
+    return { scene: i, transformer: n, docsLeft: t, docsTop: o };
+  }
   _focusDrawingListener() {
     this.disposeWithMe(
-      this._drawingManagerService.focus$.subscribe((e) => {
-        e == null || e.length === 0 ? (this._contextService.setContextValue(V, !1), this._sheetDrawingService.focusDrawing([])) : (this._contextService.setContextValue(V, !0), this._sheetDrawingService.focusDrawing(e));
+      this._drawingManagerService.focus$.subscribe((i) => {
+        var o;
+        const { transformer: e, docsLeft: n, docsTop: t } = (o = this._getCurrentSceneAndTransformer()) != null ? o : {};
+        i == null || i.length === 0 ? (this._contextService.setContextValue(Ze, !1), this._docDrawingService.focusDrawing([]), e && e.resetProps({
+          zeroTop: 0,
+          zeroLeft: 0
+        })) : (this._contextService.setContextValue(Ze, !0), this._docDrawingService.focusDrawing(i), this._textSelectionManager.replaceTextRanges([]), e && e.resetProps({
+          zeroTop: t,
+          zeroLeft: n
+        }));
+      })
+    );
+  }
+};
+ln = zi([
+  de(1, W),
+  de(2, Se(cn)),
+  de(3, Q),
+  de(4, yt),
+  de(5, De),
+  de(6, ge),
+  de(7, xn),
+  de(8, Qt),
+  de(9, Se(en)),
+  de(10, Se(cn)),
+  de(11, Le)
+], ln);
+var Xi = Object.defineProperty, qi = Object.getOwnPropertyDescriptor, Ki = (i, e, n, t) => {
+  for (var o = t > 1 ? void 0 : t ? qi(e, n) : e, r = i.length - 1, a; r >= 0; r--)
+    (a = i[r]) && (o = (t ? a(e, n, o) : a(o)) || o);
+  return t && o && Xi(e, n, o), o;
+}, $e = (i, e) => (n, t) => e(n, t, i);
+let dn = class extends Ue {
+  constructor(e, n, t, o, r) {
+    super();
+    Pe(this, "_liquid", new Ln());
+    this._context = e, this._docSkeletonManagerService = n, this._commandService = t, this._editorService = o, this._drawingManagerService = r, this._initialize(), this._commandExecutedListener();
+  }
+  _initialize() {
+    this._initialRenderRefresh();
+  }
+  _initialRenderRefresh() {
+    const { mainComponent: e } = this._context;
+    this._docSkeletonManagerService.currentSkeleton$.subscribe((n) => {
+      if (n == null)
+        return;
+      e.changeSkeleton(n), this._refreshDrawing(n);
+    });
+  }
+  _commandExecutedListener() {
+    const e = [Z.id, kt.id];
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted((n) => {
+        if (e.includes(n.id)) {
+          const t = n.params, { unitId: o } = t, { unitId: r, mainComponent: a } = this._context;
+          if (o !== r)
+            return;
+          const s = this._docSkeletonManagerService.getSkeleton();
+          if (s == null)
+            return;
+          if (this._editorService.isEditor(r)) {
+            a == null || a.makeDirty();
+            return;
+          }
+          this._refreshDrawing(s);
+        }
       })
     );
   }
+  _refreshDrawing(e) {
+    var w, v;
+    const n = e == null ? void 0 : e.getSkeletonData(), { mainComponent: t, unitId: o } = this._context, r = t;
+    if (!n)
+      return;
+    const { left: a, top: s, pageLayoutType: l, pageMarginLeft: c, pageMarginTop: m } = r, { pages: u, skeHeaders: p, skeFooters: f } = n, g = [];
+    this._liquid.reset();
+    for (let I = 0, C = u.length; I < C; I++) {
+      const P = u[I], { headerId: S, footerId: O, pageWidth: R } = P;
+      if (S) {
+        const D = (w = p.get(S)) == null ? void 0 : w.get(R);
+        D && this._calculateDrawingPosition(o, D, a, s, g);
+      }
+      if (O) {
+        const D = (v = f.get(O)) == null ? void 0 : v.get(R);
+        D && this._calculateDrawingPosition(o, D, a, s, g);
+      }
+      this._calculateDrawingPosition(o, P, a, s, g), this._liquid.translatePage(P, l, c, m);
+    }
+    g.length > 0 && this._drawingManagerService.refreshTransform(g);
+  }
+  _calculateDrawingPosition(e, n, t, o, r) {
+    const { skeDrawings: a } = n;
+    this._liquid.translatePagePadding(n), a.forEach((s) => {
+      const { aLeft: l, aTop: c, height: m, width: u, angle: p, drawingId: f, drawingOrigin: g } = s, w = g.layoutType === B.WRAP_NONE && g.behindDoc === Me.TRUE;
+      r.push({
+        unitId: e,
+        subUnitId: e,
+        drawingId: f,
+        behindText: w,
+        transform: {
+          left: l + t + this._liquid.x,
+          top: c + o + this._liquid.y,
+          width: u,
+          height: m,
+          angle: p
+        }
+      });
+    }), this._liquid.restorePagePadding(n);
+  }
 };
-Y = ot([
-  D(1, I),
-  D(2, y(hn)),
-  D(3, y(vn)),
-  D(4, M),
-  D(5, tn),
-  D(6, N),
-  D(7, de),
-  D(8, fn),
-  D(9, y(k))
-], Y);
-var Ae = Object.defineProperty, at = Object.getOwnPropertyDescriptor, st = (e, n, t) => n in e ? Ae(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t, ct = (e, n, t, r) => {
-  for (var i = r > 1 ? void 0 : r ? at(n, t) : n, o = e.length - 1, a; o >= 0; o--)
-    (a = e[o]) && (i = (r ? a(n, t, i) : a(i)) || i);
-  return r && i && Ae(n, t, i), i;
-}, ae = (e, n) => (t, r) => n(t, r, e), Te = (e, n, t) => st(e, typeof n != "symbol" ? n + "" : n, t);
-const dt = "DOCS_DRAWING_UI_PLUGIN";
-let B = class extends ze {
-  constructor(e, n, t) {
-    super(), this._injector = n, this._renderManagerSrv = t;
-  }
-  onStarting(e) {
+dn = Ki([
+  $e(1, Se(me)),
+  $e(2, W),
+  $e(3, Jt),
+  $e(4, ge)
+], dn);
+var Yi = Object.defineProperty, Zi = Object.getOwnPropertyDescriptor, Qi = (i, e, n, t) => {
+  for (var o = t > 1 ? void 0 : t ? Zi(e, n) : e, r = i.length - 1, a; r >= 0; r--)
+    (a = i[r]) && (o = (t ? a(e, n, o) : a(o)) || o);
+  return t && o && Yi(e, n, o), o;
+}, Ne = (i, e) => (n, t) => e(n, t, i);
+function Ji(i) {
+  var t, o, r, a;
+  if (k.isNoop(i) || !Array.isArray(i))
+    return null;
+  const e = i.find((s) => Array.isArray(s) && (s == null ? void 0 : s[0]) === "drawings");
+  if (e == null || !Array.isArray(e) || e.length < 3 || typeof e[1] == "string" && typeof e[2] != "object" || Array.isArray(e[1]) && typeof e[1][1] != "object")
+    return null;
+  const n = [];
+  if (Array.isArray(e == null ? void 0 : e[1]))
+    for (const s of e)
+      Array.isArray(s) && n.push({
+        type: (t = s == null ? void 0 : s[1]) != null && t.i ? "add" : "remove",
+        drawingId: s == null ? void 0 : s[0],
+        drawing: (o = s == null ? void 0 : s[1]) == null ? void 0 : o.i
+      });
+  else
+    n.push({
+      type: (r = e[2]) != null && r.i ? "add" : "remove",
+      drawingId: e[1],
+      drawing: (a = e[2]) == null ? void 0 : a.i
+    });
+  return n;
+}
+function eo(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 Ke = class extends Ue {
+  constructor(i, e, n, t, o) {
+    super(), this._univerInstanceService = i, this._commandService = e, this._drawingManagerService = n, this._docDrawingService = t, this._renderManagerService = o, this._initialize();
+  }
+  _initialize() {
+    this._commandExecutedListener();
+  }
+  _commandExecutedListener() {
+    this.disposeWithMe(
+      this._commandService.beforeCommandExecuted((i) => {
+        if (i.id !== Z.id)
+          return;
+        const e = i.params, { unitId: n, actions: t } = e, o = Ji(t);
+        if (o != null)
+          for (const { type: r, drawingId: a, drawing: s } of o)
+            r === "add" ? this._addDrawings(n, [s]) : this._removeDrawings(n, [a]);
+      })
+    ), this.disposeWithMe(
+      this._commandService.onCommandExecuted((i) => {
+        if (i.id !== Z.id)
+          return;
+        const e = i.params, { unitId: n, actions: t } = e;
+        eo(t).length > 0 && this._updateDrawingsOrder(n);
+      })
+    ), this.disposeWithMe(
+      this._commandService.onCommandExecuted((i) => {
+        var a;
+        if (i.id !== ft.id && i.id !== ht.id)
+          return;
+        const e = (a = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : a.getUnitId(), n = this._drawingManagerService.getFocusDrawings();
+        if (e == null || n.length === 0)
+          return;
+        const t = this._renderManagerService.getRenderById(e), o = t == null ? void 0 : t.scene;
+        if (o == null)
+          return !1;
+        o.getTransformerByCreate().refreshControls();
+      })
+    );
+  }
+  _addDrawings(i, e) {
+    const n = this._drawingManagerService, t = this._docDrawingService, o = this._docDrawingService.getBatchAddOp(e), { subUnitId: r, redo: a, objects: s } = o;
+    n.applyJson1(i, r, a), t.applyJson1(i, r, a), n.addNotification(s), t.addNotification(s);
+  }
+  _removeDrawings(i, e) {
+    const n = this._drawingManagerService, t = this._docDrawingService, o = this._docDrawingService.getBatchRemoveOp(e.map((l) => ({
+      unitId: i,
+      subUnitId: i,
+      drawingId: l
+    }))), { subUnitId: r, redo: a, objects: s } = o;
+    n.applyJson1(i, r, a), t.applyJson1(i, r, a), n.removeNotification(s), t.removeNotification(s);
+  }
+  _updateDrawingsOrder(i) {
+    const e = this._univerInstanceService.getUniverDocInstance(i);
+    if (e == null)
+      return;
+    const n = e.getSnapshot().drawingsOrder;
+    if (n == null)
+      return;
+    const t = this._drawingManagerService, o = this._docDrawingService;
+    t.setDrawingOrder(i, i, n), o.setDrawingOrder(i, i, n);
+    const r = {
+      unitId: i,
+      subUnitId: i,
+      drawingIds: n
+    };
+    t.orderNotification(r), o.orderNotification(r);
+  }
+};
+Ke = Qi([
+  nn(tn.Steady, Ke),
+  Ne(0, X),
+  Ne(1, W),
+  Ne(2, ge),
+  Ne(3, De),
+  Ne(4, Q)
+], Ke);
+var no = Object.defineProperty, to = Object.getOwnPropertyDescriptor, io = (i, e, n, t) => {
+  for (var o = t > 1 ? void 0 : t ? to(e, n) : e, r = i.length - 1, a; r >= 0; r--)
+    (a = i[r]) && (o = (t ? a(e, n, o) : a(o)) || o);
+  return t && o && no(e, n, o), o;
+}, ze = (i, e) => (n, t) => e(n, t, i);
+const oo = "__InlineDrawingAnchor__";
+let Ye = class extends Ue {
+  constructor(e, n, t, o) {
+    super();
+    Pe(this, "_liquid", new Ln());
+    Pe(this, "_listenerOnImageMap", /* @__PURE__ */ new Set());
+    // Use to cache the drawings is under transforming or scaling.
+    Pe(this, "_transformerCache", /* @__PURE__ */ new Map());
+    Pe(this, "_anchorShape");
+    this._commandService = e, this._univerInstanceService = n, this._drawingManagerService = t, this._renderManagerService = o, this._init();
+  }
+  _init() {
+    this._listenDrawingFocus();
+  }
+  _listenDrawingFocus() {
+    this.disposeWithMe(
+      this._drawingManagerService.add$.subscribe((e) => {
+        if (e.length !== 0)
+          for (const n of e) {
+            const { unitId: t } = n;
+            this._listenerOnImageMap.has(t) || (this._listenTransformerChange(t), this._listenerOnImageMap.add(t));
+          }
+      })
+    );
+  }
+  // Only handle one drawing transformer change.
+  // eslint-disable-next-line max-lines-per-function
+  _listenTransformerChange(e) {
+    var o;
+    const n = (o = this._getSceneAndTransformerByDrawingSearch(e)) == null ? void 0 : o.transformer;
+    if (n == null)
+      return;
+    this.disposeWithMe(
+      Ee(
+        n.changeStart$.subscribe((r) => {
+          var s;
+          this._transformerCache.clear();
+          const { objects: a } = r;
+          for (const l of a.values()) {
+            const { oKey: c, width: m, height: u, left: p, top: f, angle: g } = l, w = this._drawingManagerService.getDrawingOKey(c);
+            if (w == null)
+              continue;
+            const v = this._univerInstanceService.getUniverDocInstance(w.unitId), I = (s = v == null ? void 0 : v.getSnapshot().drawings) == null ? void 0 : s[w.drawingId];
+            (I == null ? void 0 : I.layoutType) === B.INLINE && l.setOpacity(0.2), I != null && this._transformerCache.set(w.drawingId, {
+              drawing: I,
+              top: f,
+              left: p,
+              width: m,
+              height: u,
+              angle: g
+            });
+          }
+        })
+      )
+    );
+    const t = In(this._updateMultipleDrawingDocTransform.bind(this), 50);
+    In(this._nonInlineDrawingTransform.bind(this), 50), this.disposeWithMe(
+      Ee(
+        n.changing$.subscribe((r) => {
+          const { objects: a, offsetX: s, offsetY: l } = r;
+          if (a.size > 1)
+            t(a);
+          else if (a.size === 1) {
+            const c = this._transformerCache.values().next().value, m = a.values().next().value, { width: u, height: p, top: f, left: g, angle: w } = m;
+            if (u === c.width && p === c.height && f === c.top && g === c.left && w === c.angle)
+              return;
+            c && (c.drawing.layoutType, B.INLINE), c && c.drawing.layoutType === B.INLINE && s != null && l != null && this._updateInlineDrawingAnchor(c.drawing, s, l);
+          }
+        })
+      )
+    ), this.disposeWithMe(
+      Ee(
+        n.changeEnd$.subscribe((r) => {
+          const { objects: a, offsetX: s, offsetY: l } = r;
+          for (const c of a.values()) {
+            const m = this._drawingManagerService.getDrawingOKey(c.oKey);
+            if (m == null)
+              continue;
+            const u = this._transformerCache.get(m == null ? void 0 : m.drawingId);
+            (u == null ? void 0 : u.drawing.layoutType) === B.INLINE && c.setOpacity(1);
+          }
+          if (this._anchorShape && this._anchorShape.hide(), a.size > 1)
+            this._updateMultipleDrawingDocTransform(a);
+          else if (a.size === 1) {
+            const c = this._transformerCache.values().next().value, m = a.values().next().value, { width: u, height: p, top: f, left: g, angle: w } = m;
+            if (u === c.width && p === c.height && f === c.top && g === c.left && w === c.angle)
+              return;
+            c && c.drawing.layoutType === B.INLINE ? u !== c.width || p !== c.height || w !== c.angle ? this._updateDrawingSize(c, m) : s != null && l != null && this._moveInlineDrawing(c.drawing, s, l) : c && this._nonInlineDrawingTransform(c.drawing, m);
+          }
+          this._transformerCache.clear();
+        })
+      )
+    );
+  }
+  // eslint-disable-next-line max-lines-per-function
+  _updateMultipleDrawingDocTransform(e) {
+    if (e.size < 1)
+      return;
+    const n = [];
+    let t, o;
+    for (const r of e.values()) {
+      const { oKey: a, left: s, top: l, angle: c } = r;
+      let { width: m, height: u } = r;
+      const p = this._drawingManagerService.getDrawingOKey(a);
+      if (p == null)
+        continue;
+      t == null && (t = p.unitId), o == null && (o = p.subUnitId);
+      const f = this._transformerCache.get(p.drawingId);
+      if (f == null)
+        continue;
+      const { drawing: g, top: w, left: v, width: I, height: C, angle: P } = f, { width: S, height: O } = this._getPageContentSize(g);
+      if (m = Math.min(m, S), u = Math.min(u, O), (I !== m || C !== u) && n.push({
+        drawingId: p.drawingId,
+        key: "size",
+        value: {
+          width: m,
+          height: u
+        }
+      }), P !== c && n.push({
+        drawingId: p.drawingId,
+        key: "angle",
+        value: c
+      }), w !== l || v !== s) {
+        const R = l - w, D = s - v;
+        R !== 0 && n.push({
+          drawingId: p.drawingId,
+          key: "positionV",
+          value: {
+            relativeFrom: g.docTransform.positionV.relativeFrom,
+            posOffset: g.docTransform.positionV.posOffset + R
+          }
+        }), D !== 0 && n.push({
+          drawingId: p.drawingId,
+          key: "positionH",
+          value: {
+            relativeFrom: g.docTransform.positionH.relativeFrom,
+            posOffset: g.docTransform.positionH.posOffset + D
+          }
+        });
+      }
+    }
+    n.length > 0 && t && o && this._commandService.executeCommand(xe.id, {
+      unitId: t,
+      subUnitId: o,
+      drawings: n
+    });
+  }
+  // TODO: @JOCS, Use to draw and update the drawing anchor.
+  _updateDrawingAnchor(e) {
+    if (this._transformerCache.size !== 1)
+      return;
+    const n = this._transformerCache.values().next().value, t = e.values().next().value;
+    this._getDrawingAnchor(n.drawing, t);
+  }
+  _updateInlineDrawingAnchor(e, n, t) {
+    var r;
+    if (this._transformerCache.size !== 1)
+      return;
+    const { contentBoxPointGroup: o } = (r = this._getInlineDrawingAnchor(e, n, t)) != null ? r : {};
+    o != null && this._createOrUpdateInlineAnchor(e.unitId, o);
+  }
+  _getInlineDrawingAnchor(e, n, t) {
+    var V;
+    const o = this._renderManagerService.getRenderById(e.unitId), r = o == null ? void 0 : o.with(me).getSkeleton();
+    if (o == null)
+      return;
+    const { mainComponent: a, scene: s } = o, l = a, c = s.getViewports()[0], {
+      pageLayoutType: m = Dn.VERTICAL,
+      pageMarginLeft: u,
+      pageMarginTop: p
+    } = l.getOffsetConfig();
+    let f = null, g = !1, w = -1;
+    const v = 0.5, I = this._getTransformCoordForDocumentOffset(l, c, n, t);
+    if (I == null)
+      return;
+    const C = r == null ? void 0 : r.findNodeByCoord(I, m, u, p);
+    if (C) {
+      const { node: x, ratioX: L, segmentPage: z } = C;
+      g = L < v, f = x, w = z;
+    }
+    if (f == null)
+      return;
+    const P = r == null ? void 0 : r.findPositionByGlyph(f, w), S = this._getDocObject();
+    if (P == null || r == null || S == null)
+      return;
+    const O = {
+      ...P,
+      isBack: g
+    }, R = S.document.getOffsetConfig(), D = new Pn(R, r), { cursorList: b, contentBoxPointGroup: y } = D.getRangePointData(O, O), { startOffset: T } = (V = En(b)) != null ? V : {};
+    if (T != null)
+      return { offset: T, contentBoxPointGroup: y };
+  }
+  // eslint-disable-next-line max-lines-per-function, complexity
+  _getDrawingAnchor(e, n) {
+    var ee, we, ve, ne;
+    const t = this._renderManagerService.getRenderById(e.unitId), o = t == null ? void 0 : t.with(me).getSkeleton(), r = o == null ? void 0 : o.getViewModel(), a = o == null ? void 0 : o.getSkeletonData();
+    if (a == null || t == null || r == null)
+      return;
+    const { pages: s } = a, { mainComponent: l, scene: c } = t, m = l, u = c.getViewports()[0], { pageLayoutType: p = Dn.VERTICAL, pageMarginLeft: f, pageMarginTop: g, docsLeft: w, docsTop: v } = m.getOffsetConfig(), { left: I, top: C, angle: P } = n;
+    let { width: S, height: O } = n;
+    const { positionV: R, positionH: D } = e.docTransform, { width: b, height: y } = this._getPageContentSize(e);
+    S = Math.min(S, b), O = Math.min(O, y);
+    let T = null, V = -1;
+    const x = !1, L = {
+      ...e.docTransform,
+      size: {
+        width: S,
+        height: O
+      },
+      angle: P
+    }, { x: z, y: N } = c.getViewportScrollXY(u), _ = this._getTransformCoordForDocumentOffset(m, u, I - z, C - N);
+    if (_ == null)
+      return;
+    const M = o == null ? void 0 : o.findNodeByCoord(_, p, f, g);
+    if (M) {
+      const { node: le, segmentPage: Ge } = M;
+      T = le, V = Ge;
+    }
+    if (T == null)
+      return;
+    const E = (ee = T.parent) == null ? void 0 : ee.parent, A = E == null ? void 0 : E.parent, U = (we = A == null ? void 0 : A.lines.find((le) => le.paragraphIndex === (E == null ? void 0 : E.paragraphIndex) && le.paragraphStart)) != null ? we : A == null ? void 0 : A.lines[0], F = (ve = A == null ? void 0 : A.parent) == null ? void 0 : ve.parent;
+    this._liquid.reset();
+    for (const le of s) {
+      if (this._liquid.translatePagePadding(le), le === F)
+        break;
+      this._liquid.restorePagePadding(le), this._liquid.translatePage(le, p, f, g);
+    }
+    if (E == null || A == null || U == null || F == null)
+      return;
+    switch (R.relativeFrom === G.LINE ? T = E.divides[0].glyphGroup[0] : T = U.divides[0].glyphGroup[0], L.positionH = {
+      relativeFrom: D.relativeFrom,
+      posOffset: I - this._liquid.x - w
+    }, D.relativeFrom) {
+      case Y.MARGIN: {
+        L.positionH.posOffset = I - this._liquid.x - w - F.marginLeft;
+        break;
+      }
+      case Y.COLUMN: {
+        L.positionH.posOffset = I - this._liquid.x - w - A.left;
+        break;
+      }
+    }
+    switch (L.positionV = {
+      relativeFrom: R.relativeFrom,
+      posOffset: C - this._liquid.y - v
+    }, R.relativeFrom) {
+      case G.PAGE: {
+        L.positionV.posOffset = C - this._liquid.y - v - F.marginTop;
+        break;
+      }
+      case G.LINE: {
+        L.positionV.posOffset = C - this._liquid.y - v - E.top;
+        break;
+      }
+      case G.PARAGRAPH: {
+        L.positionV.posOffset = C - this._liquid.y - v - U.top;
+        break;
+      }
+    }
+    if (T == null)
+      return;
+    const q = o == null ? void 0 : o.findPositionByGlyph(T, V), J = this._getDocObject();
+    if (q == null || o == null || J == null)
+      return;
+    const ue = {
+      ...q,
+      isBack: x
+    }, ce = J.document.getOffsetConfig(), pe = new Pn(ce, o), { cursorList: oe } = pe.getRangePointData(ue, ue), { startOffset: K } = (ne = En(oe)) != null ? ne : {};
+    if (K != null)
+      return { offset: K, docTransform: L };
+  }
+  // Update drawing when use transformer to resize it.
+  _updateDrawingSize(e, n) {
+    const t = [], { drawing: o, width: r, height: a, angle: s } = e, { unitId: l, subUnitId: c } = o;
+    let { width: m, height: u, angle: p } = n;
+    const { width: f, height: g } = this._getPageContentSize(o);
+    m = Math.min(f, m), u = Math.min(g, u), (m !== r || u !== a) && t.push({
+      drawingId: o.drawingId,
+      key: "size",
+      value: {
+        width: m,
+        height: u
+      }
+    }), p !== s && t.push({
+      drawingId: o.drawingId,
+      key: "angle",
+      value: p
+    }), t.length > 0 && l && c && this._commandService.executeCommand(xe.id, {
+      unitId: l,
+      subUnitId: c,
+      drawings: t
+    });
+  }
+  // Update inline drawing when use transformer to move it.
+  _moveInlineDrawing(e, n, t) {
+    const o = this._getInlineDrawingAnchor(e, n, t), { offset: r } = o != null ? o : {};
+    if (r != null)
+      return this._commandService.executeCommand(et.id, {
+        unitId: e.unitId,
+        subUnitId: e.unitId,
+        drawing: e,
+        offset: r
+      });
+  }
+  // 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: o, top: r, width: a, height: s, angle: l } = n, c = t == null ? void 0 : t.with(me).getSkeleton(), m = c == null ? void 0 : c.getSkeletonData(), { pages: u } = m != null ? m : {};
+    if (m == null || t == null || u == null)
+      return {
+        left: o,
+        top: r,
+        width: a,
+        height: s,
+        angle: l
+      };
+    const { mainComponent: p } = t, f = p, { top: g, pageLayoutType: w, pageMarginLeft: v, pageMarginTop: I } = f;
+    let C = r;
+    this._liquid.reset();
+    for (const P of u) {
+      const { marginBottom: S, pageHeight: O } = P, R = u.indexOf(P), D = u[R + 1];
+      if (D == null)
+        continue;
+      if (_e.hasIntersectionBetweenTwoRanges(
+        r,
+        r + s,
+        this._liquid.y + g + O - S,
+        this._liquid.y + g + O + I + D.marginTop
+      )) {
+        const y = r + s / 2, T = this._liquid.y + g + O + I / 2;
+        y < T ? C = Math.min(r, this._liquid.y + g + O - S - s) : C = Math.max(r, this._liquid.y + g + O + I + D.marginTop);
+      }
+      this._liquid.translatePage(P, w, v, I);
+    }
+    return {
+      left: o,
+      top: C,
+      width: a,
+      height: s,
+      angle: l
+    };
+  }
+  _nonInlineDrawingTransform(e, n, t = !1) {
+    const o = this._limitDrawingInPage(e, n);
+    if (t && o.top !== n.top)
+      return;
+    const r = this._getDrawingAnchor(e, o), { offset: a, docTransform: s } = r != null ? r : {};
+    return a == null || s == null ? this._updateMultipleDrawingDocTransform(/* @__PURE__ */ new Map([[e.drawingId, n]])) : this._commandService.executeCommand(nt.id, {
+      unitId: e.unitId,
+      subUnitId: e.unitId,
+      drawing: e,
+      offset: a,
+      docTransform: s
+    });
+  }
+  _getSceneAndTransformerByDrawingSearch(e) {
+    if (e == null)
+      return;
+    const n = this._renderManagerService.getRenderById(e), t = n == null ? void 0 : n.scene;
+    if (t == null)
+      return;
+    const o = t.getTransformerByCreate();
+    return { scene: t, transformer: o };
+  }
+  _getTransformCoordForDocumentOffset(e, n, t, o) {
+    const { documentTransform: r } = e.getOffsetConfig(), a = n.transformVector2SceneCoord(xt.FromArray([t, o]));
+    if (a)
+      return r.clone().invert().applyPoint(a);
+  }
+  _createOrUpdateInlineAnchor(e, n) {
+    const t = this._renderManagerService.getRenderById(e);
+    if (t == null)
+      return;
+    const { mainComponent: o, scene: r } = t, a = o, {
+      docsLeft: s,
+      docsTop: l
+    } = a.getOffsetConfig(), c = Ut(n), { left: m, top: u, height: p } = c, f = m + s, g = u + l;
+    if (this._anchorShape) {
+      this._anchorShape.transformByState({ left: f, top: g, height: p }), this._anchorShape.show();
+      return;
+    }
+    const w = 6, v = new Lt(oo + _e.generateRandomId(w), {
+      left: f,
+      top: g,
+      height: p,
+      strokeWidth: 2,
+      stroke: Ft(wt.darkGray, 1),
+      evented: !1
+    });
+    this._anchorShape = v, r.addObject(v, Bt);
+  }
+  _getDocObject() {
+    return $t(this._univerInstanceService, this._renderManagerService);
+  }
+  _getPageContentSize(e) {
+    const n = this._renderManagerService.getRenderById(e.unitId), t = n == null ? void 0 : n.with(me).getSkeleton(), o = 500, r = 500, a = t == null ? void 0 : t.getSkeletonData();
+    if (a == null || n == null)
+      return {
+        width: o,
+        height: r
+      };
+    const { pages: s } = a;
+    let l = null;
+    for (const c of s) {
+      const { skeDrawings: m } = c;
+      if (m.has(e.drawingId)) {
+        l = c;
+        break;
+      }
+    }
+    if (l) {
+      const { pageWidth: c, pageHeight: m, marginLeft: u, marginBottom: p, marginRight: f, marginTop: g } = l;
+      return {
+        width: Math.max(o, c - u - f),
+        height: Math.max(r, m - g - p)
+      };
+    } else
+      return {
+        width: o,
+        height: r
+      };
+  }
+};
+Ye = io([
+  nn(tn.Rendered, Ye),
+  ze(0, W),
+  ze(1, X),
+  ze(2, ge),
+  ze(3, Q)
+], Ye);
+var ct = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, ao = (i, e, n) => e in i ? ct(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n, so = (i, e, n, t) => {
+  for (var o = t > 1 ? void 0 : t ? ro(e, n) : e, r = i.length - 1, a; r >= 0; r--)
+    (a = i[r]) && (o = (t ? a(e, n, o) : a(o)) || o);
+  return t && o && ct(e, n, o), o;
+}, An = (i, e) => (n, t) => e(n, t, i), lt = (i, e, n) => ao(i, typeof e != "symbol" ? e + "" : e, n);
+const co = "DOCS_DRAWING_UI_PLUGIN";
+let Qe = class extends vt {
+  constructor(i, e, n) {
+    super(), this._injector = e, this._renderManagerSrv = n;
+  }
+  onStarting(i) {
     [
-      [$],
-      [F]
-    ].forEach((t) => e.add(t));
+      [qe],
+      [Xe],
+      [Ye],
+      [Ke]
+    ].forEach((n) => i.add(n));
   }
   onReady() {
     [
-      Y
-    ].forEach((e) => this._renderManagerSrv.registerRenderModule(E.UNIVER_DOC, e));
+      [ln],
+      [dn]
+    ].forEach((i) => this._renderManagerSrv.registerRenderModule(Ce.UNIVER_DOC, i));
   }
 };
-Te(B, "type", E.UNIVER_DOC);
-Te(B, "pluginName", dt);
-B = ct([
-  Ke(qe, rn, on),
-  ae(1, y(me)),
-  ae(2, H)
-], B);
+lt(Qe, "type", Ce.UNIVER_DOC);
+lt(Qe, "pluginName", co);
+Qe = so([
+  It(Et, bt, Rt),
+  An(1, Se(Un)),
+  An(2, Q)
+], Qe);
 export {
-  w as ClearDocDrawingTransformerOperation,
-  ye as DeleteDocDrawingsCommand,
-  Se as EditDocDrawingOperation,
-  Ue as GroupDocDrawingCommand,
-  Ne as InsertDocDrawingCommand,
-  z as InsertDocImageOperation,
-  x as MoveDocDrawingsCommand,
-  X as RemoveDocDrawingCommand,
-  be as SetDocDrawingArrangeCommand,
-  q as SetDocDrawingCommand,
-  we as SidebarDocDrawingOperation,
-  Re as UngroupDocDrawingCommand,
-  B as UniverDocsDrawingUIPlugin
+  Oe as ClearDocDrawingTransformerOperation,
+  tt as DeleteDocDrawingsCommand,
+  kn as EditDocDrawingOperation,
+  at as GroupDocDrawingCommand,
+  st as InsertDocDrawingCommand,
+  rn as InsertDocImageOperation,
+  Fe as MoveDocDrawingsCommand,
+  pn as RemoveDocDrawingCommand,
+  it as SetDocDrawingArrangeCommand,
+  ot as SetDocDrawingCommand,
+  jn as SidebarDocDrawingOperation,
+  rt as UngroupDocDrawingCommand,
+  Qe as UniverDocsDrawingUIPlugin
 };