@univerjs/docs-drawing-ui 0.16.1 → 0.17.0

package/lib/index.js

@@ -1,35 +1,35 @@
 var Pn = Object.defineProperty;
 var xn = (r, e, t) => e in r ? Pn(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
 var me = (r, e, t) => xn(r, typeof e != "symbol" ? e + "" : e, t);
-import { CommandType as q, ICommandService as V, IUniverInstanceService as z, TextX as _t, JSONX as $, MemoryCursor as Nn, TextXActionType as Y, IUndoRedoService as Kt, BuildTextUtils as Un, ArrangeTypeEnum as Ze, Tools as Ae, Inject as Z, IContextService as Yt, LocaleService as lt, Disposable as xe, WrapTextType as $e, PositionedObjectLayoutType as k, BooleanNumber as se, DrawingTypeEnum as Pe, ObjectRelativeFromV as W, ObjectRelativeFromH as J, FOCUSING_COMMON_DRAWINGS as nt, UniverInstanceType as ve, Direction as he, DisposableCollection as Ln, toDisposable as ze, fromEventSubject as Zt, generateRandomId as Qt, DocumentFlavor as pt, DOCS_ZEN_EDITOR_UNIT_ID_KEY as St, FOCUSING_DOC as Bn, FOCUSING_UNIVER_EDITOR as Fn, UndoCommand as kn, RedoCommand as Wn, Injector as Jt, DOC_DRAWING_PRINTING_COMPONENT_KEY as Gn, throttle as Et, COLORS as Hn, RxDisposable as Vn, isInternalEditorID as jn, LifecycleService as $n, LifecycleStages as Rt, DependentOn as zn, IConfigService as Xn, Plugin as qn, merge as Kn } from "@univerjs/core";
-import { IDocDrawingService as Ne, UniverDocsDrawingPlugin as Yn } from "@univerjs/docs-drawing";
-import { RichTextEditingMutation as ee, DocSelectionManagerService as Dt, DocSkeletonManagerService as te } from "@univerjs/docs";
-import { DocSelectionRenderService as Me, getRichTextEditPath as Xe, getCustomBlockIdsInSelections as Zn, docDrawingPositionToTransform as en, VIEWPORT_KEY as tn, SetDocZoomRatioOperation as nn, DocPrintInterceptorService as Qn, NodePositionConvertToCursor as At, getOneTextSelectionRange as Pt, getAnchorBounding as Jn, TEXT_RANGE_LAYER_INDEX as ei, getDocObject as ti, DocCanvasPopManagerService as ni, IEditorService as ii } from "@univerjs/docs-ui";
-import { IRenderManagerService as Q, DocumentEditArea as Fe, getCurrentTypeOfRenderer as ri, CURSOR_TYPE as xt, Liquid as rn, PageLayoutType as Nt, DocumentSkeletonPageType as Ut, Vector2 as si, Rect as oi, getColor as ai, TRANSFORM_CHANGE_OBSERVABLE_TYPE as ci } from "@univerjs/engine-render";
-import { MessageType as Lt, clsx as sn, InputNumber as Be, Select as Bt, Checkbox as di, RadioGroup as Ft, Radio as Te, render as gi, unmount as li } from "@univerjs/design";
-import { IImageIoService as ui, IDrawingManagerService as fe, DRAWING_IMAGE_ALLOW_IMAGE_LIST as hi, DRAWING_IMAGE_COUNT_LIMIT as kt, ImageUploadStatusType as mt, DRAWING_IMAGE_ALLOW_SIZE as fi, getImageSize as pi, getDrawingShapeKeyByDrawingSearch as mi, DRAWING_IMAGE_WIDTH_LIMIT as Wt, DRAWING_IMAGE_HEIGHT_LIMIT as Gt, UniverDrawingPlugin as wi } from "@univerjs/drawing";
-import { IMessageService as vi, ILocalFileService as Ii, ISidebarService as _i, CanvasFloatDomService as Si, useDependency as we, getMenuHiddenObservable as on, MenuItemType as an, RibbonInsertGroup as Di, KeyCode as ke, ComponentManager as cn, IMenuManagerService as Oi, IShortcutService as Ti, PrintFloatDomSingle as Mi, connectInjector as yi, UniverUIPlugin as bi } from "@univerjs/ui";
-import { BehaviorSubject as Ot, debounceTime as dn, map as Ht, switchMap as Ci, of as Ei, Observable as Ri, takeUntil as Vt, filter as jt } from "rxjs";
-import { DrawingRenderService as gn, DrawingCommonPanel as Ai, ImageCropperObject as Pi, COMPONENT_IMAGE_POPUP_MENU as xi, OpenImageCropOperation as Ni, ImageResetSizeOperation as Ui, UniverDrawingUIPlugin as Li } from "@univerjs/drawing-ui";
-import { jsxs as X, jsx as M } from "react/jsx-runtime";
-import { useState as re, useEffect as Tt, useMemo as Bi } from "react";
+import { CommandType as q, ICommandService as j, IUniverInstanceService as z, TextX as St, JSONX as $, MemoryCursor as Nn, TextXActionType as Y, BuildTextUtils as Ln, ArrangeTypeEnum as Qe, Tools as Ae, Inject as Z, IContextService as Yt, LocaleService as lt, Disposable as xe, WrapTextType as ze, PositionedObjectLayoutType as k, BooleanNumber as se, DrawingTypeEnum as Pe, ObjectRelativeFromV as W, ObjectRelativeFromH as J, FOCUSING_COMMON_DRAWINGS as it, UniverInstanceType as we, Direction as he, DisposableCollection as Un, toDisposable as Xe, fromEventSubject as Zt, generateRandomId as Qt, DOCS_ZEN_EDITOR_UNIT_ID_KEY as Dt, UndoCommand as Bn, RedoCommand as Fn, Injector as Jt, DOC_DRAWING_PRINTING_COMPONENT_KEY as kn, throttle as Rt, COLORS as Wn, DocumentFlavor as mt, FOCUSING_DOC as Hn, FOCUSING_UNIVER_EDITOR as Gn, LifecycleService as Vn, LifecycleStages as At, RxDisposable as jn, isInternalEditorID as $n, DependentOn as zn, IConfigService as Xn, Plugin as qn, merge as Kn } from "@univerjs/core";
+import { IDocDrawingService as We, UniverDocsDrawingPlugin as Yn } from "@univerjs/docs-drawing";
+import { RichTextEditingMutation as ee, DocSelectionManagerService as Ot, DocSkeletonManagerService as te } from "@univerjs/docs";
+import { DocSelectionRenderService as ye, getRichTextEditPath as qe, getCustomBlockIdsInSelections as Zn, docDrawingPositionToTransform as en, VIEWPORT_KEY as tn, SetDocZoomRatioOperation as nn, DocPrintInterceptorService as Qn, NodePositionConvertToCursor as Pt, getOneTextSelectionRange as xt, getAnchorBounding as Jn, TEXT_RANGE_LAYER_INDEX as ei, getDocObject as ti, IEditorService as ni, DocCanvasPopManagerService as ii } from "@univerjs/docs-ui";
+import { IRenderManagerService as Q, DocumentEditArea as Be, getCurrentTypeOfRenderer as ri, CURSOR_TYPE as Nt, Liquid as rn, PageLayoutType as Lt, DocumentSkeletonPageType as Ut, Vector2 as si, Rect as oi, getColor as ai, TRANSFORM_CHANGE_OBSERVABLE_TYPE as ci } from "@univerjs/engine-render";
+import { MessageType as Bt, render as di, unmount as gi, clsx as sn, InputNumber as Ue, Select as Ft, Checkbox as li, RadioGroup as kt, Radio as Te } from "@univerjs/design";
+import { IImageIoService as ui, IDrawingManagerService as fe, DRAWING_IMAGE_ALLOW_IMAGE_LIST as hi, DRAWING_IMAGE_COUNT_LIMIT as Wt, ImageUploadStatusType as vt, DRAWING_IMAGE_ALLOW_SIZE as fi, getImageSize as pi, getDrawingShapeKeyByDrawingSearch as mi, DRAWING_IMAGE_WIDTH_LIMIT as Ht, DRAWING_IMAGE_HEIGHT_LIMIT as Gt, UniverDrawingPlugin as vi } from "@univerjs/drawing";
+import { IMessageService as wi, ILocalFileService as Ii, ISidebarService as _i, CanvasFloatDomService as Si, getMenuHiddenObservable as on, MenuItemType as an, PrintFloatDomSingle as Di, ComponentManager as cn, connectInjector as Oi, RibbonInsertGroup as Ti, useDependency as ve, KeyCode as Fe, IMenuManagerService as yi, IShortcutService as Mi, UniverUIPlugin as bi } from "@univerjs/ui";
+import { BehaviorSubject as Tt, debounceTime as dn, map as Vt, switchMap as Ci, of as Ei, Observable as Ri, filter as jt, takeUntil as $t } from "rxjs";
+import { DrawingRenderService as gn, DrawingCommonPanel as Ai, ImageCropperObject as Pi, COMPONENT_IMAGE_POPUP_MENU as xi, OpenImageCropOperation as Ni, ImageResetSizeOperation as Li, UniverDrawingUIPlugin as Ui } from "@univerjs/drawing-ui";
+import { jsx as y, jsxs as X } from "react/jsx-runtime";
+import { useMemo as Bi, useState as re, useEffect as yt } from "react";
 const Mt = {
   id: "doc.command.remove-doc-image",
   type: q.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: (r, e) => {
-    var C, y, A, L;
-    const t = r.get(V), n = r.get(z), i = r.get(Q), s = n.getCurrentUniverDocInstance();
+    var C, M, A, U;
+    const t = r.get(j), n = r.get(z), i = r.get(Q), s = n.getCurrentUniverDocInstance();
     if (e == null || s == null)
       return !1;
-    const o = i.getRenderById(e.unitId).with(Me), { drawings: c } = e, d = (C = o.getSegment()) != null ? C : "", a = new _t(), g = $.getInstance(), u = (A = (y = s.getSelfOrHeaderFooterModel(d).getBody()) == null ? void 0 : y.customBlocks) != null ? A : [], l = c.map((R) => u.find((v) => v.blockId === R.drawingId)).filter((R) => !!R).sort((R, v) => R.startIndex > v.startIndex ? 1 : -1), f = c[0].unitId, h = new Nn();
+    const o = i.getRenderById(e.unitId).with(ye), { drawings: c } = e, d = (C = o.getSegment()) != null ? C : "", a = new St(), g = $.getInstance(), u = (A = (M = s.getSelfOrHeaderFooterModel(d).getBody()) == null ? void 0 : M.customBlocks) != null ? A : [], l = c.map((R) => u.find((w) => w.blockId === R.drawingId)).filter((R) => !!R).sort((R, w) => R.startIndex > w.startIndex ? 1 : -1), f = c[0].unitId, h = new Nn();
     h.reset();
     const m = l[0].startIndex, p = [
       {
         startOffset: m,
         endOffset: m
       }
-    ], w = {
+    ], v = {
       id: ee.id,
       params: {
         unitId: f,
@@ -38,28 +38,28 @@ const Mt = {
       }
     }, D = [];
     for (const R of l) {
-      const { startIndex: v } = R;
-      v > h.cursor && a.push({
+      const { startIndex: w } = R;
+      w > h.cursor && a.push({
         t: Y.RETAIN,
-        len: v - h.cursor
+        len: w - h.cursor
       }), a.push({
         t: Y.DELETE,
         len: 1
-      }), h.moveCursorTo(v + 1);
+      }), h.moveCursorTo(w + 1);
     }
-    const S = Xe(s, d);
+    const S = qe(s, d);
     D.push(g.editOp(a.serialize(), S));
     for (const R of l) {
-      const { blockId: v } = R, N = ((L = s.getDrawings()) != null ? L : {})[v], x = s.getDrawingsOrder().indexOf(v), H = g.removeOp(["drawings", v], N), I = g.removeOp(["drawingsOrder", x], v);
-      D.push(H), D.push(I);
+      const { blockId: w } = R, N = ((U = s.getDrawings()) != null ? U : {})[w], x = s.getDrawingsOrder().indexOf(w), G = g.removeOp(["drawings", w], N), I = g.removeOp(["drawingsOrder", x], w);
+      D.push(G), D.push(I);
     }
-    return w.params.actions = D.reduce((R, v) => $.compose(R, v), null), !!t.syncExecuteCommand(w.id, w.params);
+    return v.params.actions = D.reduce((R, w) => $.compose(R, w), null), !!t.syncExecuteCommand(v.id, v.params);
   }
 }, ln = {
   id: "doc.command.delete-drawing",
   type: q.COMMAND,
   handler: (r) => {
-    const e = r.get(V), n = r.get(Ne).getFocusDrawings();
+    const e = r.get(j), n = r.get(We).getFocusDrawings();
     if (n.length === 0)
       return !1;
     const { unitId: i } = n[0], s = n.map((o) => {
@@ -79,69 +79,57 @@ const Mt = {
 }, un = {
   id: "doc.command.group-doc-image",
   type: q.COMMAND,
-  handler: (r, e) => {
-    r.get(V), r.get(Kt);
-    const t = r.get(Ne);
-    if (!e) return !1;
-    const n = [];
-    e.forEach(({ parent: g, children: u }) => {
-      n.push(g.unitId), u.forEach((l) => {
-        n.push(l.unitId);
-      });
-    });
-    const i = t.getGroupDrawingOp(e), { unitId: s, subUnitId: o, undo: c, redo: d, objects: a } = i;
-    return !1;
-  }
-}, yt = {
+  handler: (r, e) => !1
+}, bt = {
   id: "doc.command.insert-doc-image",
   type: q.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: (r, e) => {
-    var y, A, L, R;
+    var M, A, U, R;
     if (e == null)
       return !1;
-    const t = r.get(V), n = r.get(Dt), i = r.get(z), s = n.getActiveTextRange(), o = i.getCurrentUniverDocInstance();
+    const t = r.get(j), n = r.get(Ot), i = r.get(z), s = n.getActiveTextRange(), o = i.getCurrentUniverDocInstance();
     if (s == null || o == null)
       return !1;
     const c = o.getUnitId(), { drawings: d } = e, { collapsed: a, startOffset: g, segmentId: u } = s, l = o.getSelfOrHeaderFooterModel(u).getBody();
     if (l == null)
       return !1;
-    const f = new _t(), h = $.getInstance(), m = [], p = (A = (y = o.getSnapshot().drawingsOrder) == null ? void 0 : y.length) != null ? A : 0;
-    let w = 0;
+    const f = new St(), h = $.getInstance(), m = [], p = (A = (M = o.getSnapshot().drawingsOrder) == null ? void 0 : M.length) != null ? A : 0;
+    let v = 0;
     if (a)
       g > 0 && f.push({
         t: Y.RETAIN,
         len: g
       });
     else {
-      const v = Un.selection.delete([s], l, 0, null, !1);
-      f.push(...v);
-      const N = Zn(l, [s]), G = (L = o.getDrawings()) != null ? L : {}, x = (R = o.getDrawingsOrder()) != null ? R : [], H = N.sort((I, _) => x.indexOf(I) > x.indexOf(_) ? -1 : x.indexOf(I) < x.indexOf(_) ? 1 : 0);
-      if (H.length > 0)
-        for (const I of H) {
-          const _ = G[I], E = x.indexOf(I);
+      const w = Ln.selection.delete([s], l, 0, null, !1);
+      f.push(...w);
+      const N = Zn(l, [s]), H = (U = o.getDrawings()) != null ? U : {}, x = (R = o.getDrawingsOrder()) != null ? R : [], G = N.sort((I, _) => x.indexOf(I) > x.indexOf(_) ? -1 : x.indexOf(I) < x.indexOf(_) ? 1 : 0);
+      if (G.length > 0)
+        for (const I of G) {
+          const _ = H[I], E = x.indexOf(I);
           if (_ == null || E < 0)
             continue;
-          const T = h.removeOp(["drawings", I], _), U = h.removeOp(["drawingsOrder", E], I);
-          m.push(T), m.push(U), w++;
+          const T = h.removeOp(["drawings", I], _), L = h.removeOp(["drawingsOrder", E], I);
+          m.push(T), m.push(L), v++;
         }
     }
     f.push({
       t: Y.INSERT,
       body: {
         dataStream: "\b".repeat(d.length),
-        customBlocks: d.map((v, N) => ({
+        customBlocks: d.map((w, N) => ({
           startIndex: N,
-          blockId: v.drawingId
+          blockId: w.drawingId
         }))
       },
       len: d.length
     });
-    const D = Xe(o, u), S = h.editOp(f.serialize(), D);
+    const D = qe(o, u), S = h.editOp(f.serialize(), D);
     m.push(S);
-    for (const v of d) {
-      const { drawingId: N } = v, G = h.insertOp(["drawings", N], v), x = h.insertOp(["drawingsOrder", p - w], N);
-      m.push(G), m.push(x);
+    for (const w of d) {
+      const { drawingId: N } = w, H = h.insertOp(["drawings", N], w), x = h.insertOp(["drawingsOrder", p - v], N);
+      m.push(H), m.push(x);
     }
     const O = {
       id: ee.id,
@@ -151,18 +139,18 @@ const Mt = {
         textRanges: []
       }
     };
-    return O.params.actions = m.reduce((v, N) => $.compose(v, N), null), !!t.syncExecuteCommand(O.id, O.params);
+    return O.params.actions = m.reduce((w, N) => $.compose(w, N), null), !!t.syncExecuteCommand(O.id, O.params);
   }
 }, hn = {
   id: "doc.command.set-drawing-arrange",
   type: q.COMMAND,
   handler: (r, e) => {
-    const t = r.get(V), n = r.get(Ne);
+    const t = r.get(j), n = r.get(We);
     if (e == null)
       return !1;
     const { unitId: i, subUnitId: s, drawingIds: o, arrangeType: c } = e, d = { unitId: i, subUnitId: s, drawingIds: o };
     let a;
-    if (c === Ze.forward ? a = n.getForwardDrawingsOp(d) : c === Ze.backward ? a = n.getBackwardDrawingOp(d) : c === Ze.front ? a = n.getFrontDrawingsOp(d) : c === Ze.back && (a = n.getBackDrawingsOp(d)), a == null)
+    if (c === Qe.forward ? a = n.getForwardDrawingsOp(d) : c === Qe.backward ? a = n.getBackwardDrawingOp(d) : c === Qe.front ? a = n.getFrontDrawingsOp(d) : c === Qe.back && (a = n.getBackDrawingsOp(d)), a == null)
       return !1;
     const { redo: g } = a;
     if (g == null)
@@ -184,8 +172,7 @@ const Mt = {
   id: "doc.command.ungroup-doc-image",
   type: q.COMMAND,
   handler: (r, e) => {
-    r.get(V), r.get(Kt);
-    const t = r.get(Ne);
+    const t = r.get(We);
     if (!e) return !1;
     const n = [];
     e.forEach(({ parent: g, children: u }) => {
@@ -199,7 +186,7 @@ const Mt = {
 };
 class ut {
   constructor() {
-    me(this, "_refreshDrawings$", new Ot(null));
+    me(this, "_refreshDrawings$", new Tt(null));
     me(this, "refreshDrawings$", this._refreshDrawings$.asObservable());
   }
   refreshDrawings(e) {
@@ -211,7 +198,7 @@ var Fi = Object.getOwnPropertyDescriptor, ki = (r, e, t, n) => {
     (o = r[s]) && (i = o(i) || i);
   return i;
 }, le = (r, e) => (t, n) => e(t, n, r);
-let it = class extends xe {
+let rt = class extends xe {
   constructor(r, e, t, n, i, s, o, c, d, a, g, u, l) {
     super(), this._context = r, this._commandService = e, this._docSelectionManagerService = t, this._renderManagerSrv = n, this._imageIoService = i, this._docDrawingService = s, this._drawingManagerService = o, this._contextService = c, this._messageService = d, this._localeService = a, this._docSelectionRenderService = g, this._docRefreshDrawingsService = u, this._fileOpenerService = l, this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener(), this._transformDrawingListener(), this._editAreaChangeListener();
   }
@@ -223,9 +210,9 @@ let it = class extends xe {
       multiple: !0,
       accept: hi.map((t) => `.${t.replace("image/", "")}`).join(",")
     }), e = r.length;
-    return e > kt ? (this._messageService.show({
-      type: Lt.Error,
-      content: this._localeService.t("update-status.exceedMaxCount", String(kt))
+    return e > Wt ? (this._messageService.show({
+      type: Bt.Error,
+      content: this._localeService.t("update-status.exceedMaxCount", String(Wt))
     }), !1) : e === 0 ? !1 : (await this._insertFloatImages(r), !0);
   }
   // eslint-disable-next-line max-lines-per-function
@@ -237,18 +224,18 @@ let it = class extends xe {
       const s = i.message;
       let o = "";
       switch (s) {
-        case mt.ERROR_EXCEED_SIZE:
+        case vt.ERROR_EXCEED_SIZE:
           o = this._localeService.t("update-status.exceedMaxSize", String(fi / (1024 * 1024)));
           break;
-        case mt.ERROR_IMAGE_TYPE:
+        case vt.ERROR_IMAGE_TYPE:
           o = this._localeService.t("update-status.invalidImageType");
           break;
-        case mt.ERROR_IMAGE:
+        case vt.ERROR_IMAGE:
           o = this._localeService.t("update-status.invalidImage");
           break;
       }
       this._messageService.show({
-        type: Lt.Error,
+        type: Bt.Error,
         content: o
       });
     }
@@ -261,9 +248,9 @@ let it = class extends xe {
       const { imageId: s, imageSourceType: o, source: c, base64Cache: d } = i, { width: a, height: g, image: u } = await pi(d || "");
       this._imageIoService.addImageSourceCache(s, o, u);
       let l = 1;
-      if (a > Wt || g > Gt) {
-        const p = Wt / a, w = Gt / g;
-        l = Math.min(p, w);
+      if (a > Ht || g > Gt) {
+        const p = Ht / a, v = Gt / g;
+        l = Math.min(p, v);
       }
       const f = this._getImagePosition(a * l, g * l);
       if (f == null)
@@ -282,7 +269,7 @@ let it = class extends xe {
         description: "",
         layoutType: k.INLINE,
         // Insert inline drawing by default.
-        wrapText: $e.BOTH_SIDES,
+        wrapText: ze.BOTH_SIDES,
         distB: 0,
         distL: 0,
         distR: 0,
@@ -290,7 +277,7 @@ let it = class extends xe {
       };
       this._isInsertInHeaderFooter() && (h.isMultiTransform = se.TRUE, h.transforms = h.transform ? [h.transform] : null), n.push(h);
     }
-    this._commandService.executeCommand(yt.id, {
+    this._commandService.executeCommand(bt.id, {
       unitId: t,
       drawings: n
     });
@@ -298,7 +285,7 @@ let it = class extends xe {
   _isInsertInHeaderFooter() {
     var n;
     const { unitId: r } = this._context, e = (n = this._renderManagerSrv.getRenderById(r)) == null ? void 0 : n.with(te).getViewModel(), t = e == null ? void 0 : e.getEditArea();
-    return t === Fe.HEADER || t === Fe.FOOTER;
+    return t === Be.HEADER || t === Be.FOOTER;
   }
   _getImagePosition(r, e) {
     const t = this._docSelectionRenderService.getActiveTextRange(), n = (t == null ? void 0 : t.getAbsolutePosition()) || {
@@ -366,12 +353,12 @@ let it = class extends xe {
         var i;
         const { transformer: e, docsLeft: t, docsTop: n } = (i = this._getCurrentSceneAndTransformer()) != null ? i : {};
         if (r == null || r.length === 0)
-          this._contextService.setContextValue(nt, !1), this._docDrawingService.focusDrawing([]), e && e.resetProps({
+          this._contextService.setContextValue(it, !1), this._docDrawingService.focusDrawing([]), e && e.resetProps({
             zeroTop: 0,
             zeroLeft: 0
           });
         else {
-          this._contextService.setContextValue(nt, !0), this._docDrawingService.focusDrawing(r), this._setDrawingSelections(r);
+          this._contextService.setContextValue(it, !0), this._docDrawingService.focusDrawing(r), this._setDrawingSelections(r);
           const s = this._docSelectionRenderService.getSegment(), o = this._findSegmentIdByDrawingId(r[0].drawingId);
           s !== o && this._docSelectionRenderService.setSegment(o), e && e.resetProps({
             zeroTop: n,
@@ -401,7 +388,7 @@ let it = class extends xe {
     const { unit: r, scene: e, unitId: t } = this._context, n = (c = this._renderManagerSrv.getRenderById(t)) == null ? void 0 : c.with(te).getViewModel();
     if (n == null || r == null)
       return;
-    const i = r.getSnapshot(), { drawings: s = {} } = i, o = n.getEditArea() === Fe.BODY;
+    const i = r.getSnapshot(), { drawings: s = {} } = i, o = n.getEditArea() === Be.BODY;
     for (const d of Object.keys(s)) {
       const a = s[d], g = mi({ unitId: t, drawingId: a.drawingId, subUnitId: t }), u = e.fuzzyMathObjects(g, !0);
       if (u.length)
@@ -451,27 +438,27 @@ let it = class extends xe {
     this._docSelectionManagerService.replaceDocRanges(n);
   }
 };
-it = ki([
-  le(1, V),
-  le(2, Z(Dt)),
+rt = ki([
+  le(1, j),
+  le(2, Z(Ot)),
   le(3, Q),
   le(4, ui),
-  le(5, Ne),
+  le(5, We),
   le(6, fe),
   le(7, Yt),
-  le(8, vi),
+  le(8, wi),
   le(9, Z(lt)),
-  le(10, Z(Me)),
+  le(10, Z(ye)),
   le(11, Z(ut)),
   le(12, Ii)
-], it);
+], rt);
 const pn = {
   id: "doc.command.insert-float-image",
   type: q.COMMAND,
   handler: (r) => {
     var n, i;
     const e = r.get(z), t = r.get(Q);
-    return (i = (n = ri(ve.UNIVER_DOC, e, t)) == null ? void 0 : n.with(it).insertDocImage()) != null ? i : !1;
+    return (i = (n = ri(we.UNIVER_DOC, e, t)) == null ? void 0 : n.with(rt).insertDocImage()) != null ? i : !1;
   }
 };
 var ue = /* @__PURE__ */ ((r) => (r.INLINE = "inline", r.BEHIND_TEXT = "behindText", r.IN_FRONT_OF_TEXT = "inFrontOfText", r.WRAP_SQUARE = "wrapSquare", r.WRAP_TOP_AND_BOTTOM = "wrapTopAndBottom", r))(ue || {});
@@ -484,7 +471,7 @@ const Wi = {
 };
 function mn(r, e, t, n, i, s, o) {
   var f, h;
-  const c = new _t(), d = $.getInstance(), a = [], g = s.getSelfOrHeaderFooterModel(e).getBody(), u = s.getSelfOrHeaderFooterModel(r).getBody();
+  const c = new St(), d = $.getInstance(), a = [], g = s.getSelfOrHeaderFooterModel(e).getBody(), u = s.getSelfOrHeaderFooterModel(r).getBody();
   if (g == null || u == null)
     return;
   const l = (h = (f = g.customBlocks) == null ? void 0 : f.find((m) => m.blockId === i)) == null ? void 0 : h.startIndex;
@@ -529,7 +516,7 @@ function mn(r, e, t, n, i, s, o) {
         },
         len: 1
       })), n !== l) {
-        const m = Xe(s, e), p = d.editOp(c.serialize(), m);
+        const m = qe(s, e), p = d.editOp(c.serialize(), m);
         a.push(p);
       }
     } else {
@@ -540,7 +527,7 @@ function mn(r, e, t, n, i, s, o) {
         t: Y.DELETE,
         len: 1
       });
-      let m = Xe(s, e), p = d.editOp(c.serialize(), m);
+      let m = qe(s, e), p = d.editOp(c.serialize(), m);
       a.push(p), c.empty(), n > 0 && c.push({
         t: Y.RETAIN,
         len: n
@@ -554,54 +541,54 @@ function mn(r, e, t, n, i, s, o) {
           }]
         },
         len: 1
-      }), m = Xe(s, r), p = d.editOp(c.serialize(), m), a.push(p), o.setSegment(r), o.setSegmentPage(t);
+      }), m = qe(s, r), p = d.editOp(c.serialize(), m), a.push(p), o.setSegment(r), o.setSegmentPage(t);
     }
     return a;
   }
 }
-const wn = {
+const vn = {
   id: "doc.command.update-doc-drawing-wrapping-style",
   type: q.COMMAND,
   // eslint-disable-next-line max-lines-per-function, complexity
   handler: (r, e) => {
-    var A, L;
+    var A, U;
     if (e == null)
       return !1;
-    const { drawings: t, wrappingStyle: n, unitId: i } = e, s = r.get(V), o = r.get(z), d = r.get(Q).getRenderById(i), a = d == null ? void 0 : d.with(te).getSkeleton().getSkeletonData(), g = d == null ? void 0 : d.with(te).getViewModel(), u = d == null ? void 0 : d.scene, l = o.getCurrentUniverDocInstance();
+    const { drawings: t, wrappingStyle: n, unitId: i } = e, s = r.get(j), o = r.get(z), d = r.get(Q).getRenderById(i), a = d == null ? void 0 : d.with(te).getSkeleton().getSkeletonData(), g = d == null ? void 0 : d.with(te).getViewModel(), u = d == null ? void 0 : d.scene, l = o.getCurrentUniverDocInstance();
     if (l == null || a == null || u == null || g == null)
       return !1;
-    const f = g.getEditArea(), h = u.getTransformerByCreate(), { pages: m, skeHeaders: p, skeFooters: w } = a, D = $.getInstance(), S = [], { drawings: O = {} } = l.getSnapshot();
+    const f = g.getEditArea(), h = u.getTransformerByCreate(), { pages: m, skeHeaders: p, skeFooters: v } = a, D = $.getInstance(), S = [], { drawings: O = {} } = l.getSnapshot();
     for (const R of t) {
-      const { drawingId: v } = R, N = O[v].layoutType, G = Wi[n];
-      if (N !== G) {
-        const _ = D.replaceOp(["drawings", v, "layoutType"], N, G);
+      const { drawingId: w } = R, N = O[w].layoutType, H = Wi[n];
+      if (N !== H) {
+        const _ = D.replaceOp(["drawings", w, "layoutType"], N, H);
         S.push(_);
       }
       if (n === "behindText" || n === "inFrontOfText") {
-        const _ = O[v].behindDoc, E = n === "behindText" ? se.TRUE : se.FALSE;
+        const _ = O[w].behindDoc, E = n === "behindText" ? se.TRUE : se.FALSE;
         if (_ !== E) {
-          const T = D.replaceOp(["drawings", v, "behindDoc"], _, E);
+          const T = D.replaceOp(["drawings", w, "behindDoc"], _, E);
           S.push(T);
         }
       }
       if (n === "inline")
         continue;
-      let x = null, H = 0, I = 0;
+      let x = null, G = 0, I = 0;
       for (const _ of m) {
-        const { headerId: E, footerId: T, marginTop: U, marginLeft: B, marginBottom: b, pageWidth: P, pageHeight: j } = _;
+        const { headerId: E, footerId: T, marginTop: L, marginLeft: B, marginBottom: b, pageWidth: P, pageHeight: V } = _;
         switch (f) {
-          case Fe.HEADER: {
+          case Be.HEADER: {
             const F = (A = p.get(E)) == null ? void 0 : A.get(P);
-            F != null && F.skeDrawings.has(v) && (x = F.skeDrawings.get(v), H = F.marginTop, I = B);
+            F != null && F.skeDrawings.has(w) && (x = F.skeDrawings.get(w), G = F.marginTop, I = B);
             break;
           }
-          case Fe.FOOTER: {
-            const F = (L = w.get(T)) == null ? void 0 : L.get(P);
-            F != null && F.skeDrawings.has(v) && (x = F.skeDrawings.get(v), H = j - b + F.marginTop, I = B);
+          case Be.FOOTER: {
+            const F = (U = v.get(T)) == null ? void 0 : U.get(P);
+            F != null && F.skeDrawings.has(w) && (x = F.skeDrawings.get(w), G = V - b + F.marginTop, I = B);
             break;
           }
-          case Fe.BODY: {
-            _.skeDrawings.has(v) && (x = _.skeDrawings.get(v), H = U, I = B);
+          case Be.BODY: {
+            _.skeDrawings.has(w) && (x = _.skeDrawings.get(w), G = L, I = B);
             break;
           }
         }
@@ -609,26 +596,26 @@ const wn = {
           break;
       }
       if (x != null) {
-        const { aTop: _, aLeft: E } = x, T = O[v].docTransform.positionH;
-        let U = E;
-        T.relativeFrom === J.MARGIN ? U -= I : T.relativeFrom === J.COLUMN && (U -= x.columnLeft);
+        const { aTop: _, aLeft: E } = x, T = O[w].docTransform.positionH;
+        let L = E;
+        T.relativeFrom === J.MARGIN ? L -= I : T.relativeFrom === J.COLUMN && (L -= x.columnLeft);
         const B = {
           relativeFrom: T.relativeFrom,
-          posOffset: U
+          posOffset: L
         };
         if (T.posOffset !== B.posOffset) {
-          const F = D.replaceOp(["drawings", v, "docTransform", "positionH"], T, B);
+          const F = D.replaceOp(["drawings", w, "docTransform", "positionH"], T, B);
           S.push(F);
         }
-        const b = O[v].docTransform.positionV;
+        const b = O[w].docTransform.positionV;
         let P = _;
-        b.relativeFrom === W.PAGE ? P += H : b.relativeFrom === W.LINE ? P -= x.lineTop : b.relativeFrom === W.PARAGRAPH && (P -= x.blockAnchorTop);
-        const j = {
+        b.relativeFrom === W.PAGE ? P += G : b.relativeFrom === W.LINE ? P -= x.lineTop : b.relativeFrom === W.PARAGRAPH && (P -= x.blockAnchorTop);
+        const V = {
           relativeFrom: b.relativeFrom,
           posOffset: P
         };
-        if (b.posOffset !== j.posOffset) {
-          const F = D.replaceOp(["drawings", v, "docTransform", "positionV"], b, j);
+        if (b.posOffset !== V.posOffset) {
+          const F = D.replaceOp(["drawings", w, "docTransform", "positionV"], b, V);
           S.push(F);
         }
       }
@@ -641,26 +628,26 @@ const wn = {
         textRanges: null
       }
     };
-    C.params.actions = S.reduce((R, v) => $.compose(R, v), null);
-    const y = s.syncExecuteCommand(C.id, C.params);
-    return h.refreshControls(), !!y;
+    C.params.actions = S.reduce((R, w) => $.compose(R, w), null);
+    const M = s.syncExecuteCommand(C.id, C.params);
+    return h.refreshControls(), !!M;
   }
-}, vn = {
+}, wn = {
   id: "doc.command.update-doc-drawing-distance",
   type: q.COMMAND,
   handler: (r, e) => {
     if (e == null)
       return !1;
-    const t = r.get(V), i = r.get(z).getCurrentUniverDocInstance();
+    const t = r.get(j), i = r.get(z).getCurrentUniverDocInstance();
     if (i == null)
       return !1;
     const { drawings: s, dist: o, unitId: c } = e, d = $.getInstance(), a = [], { drawings: g = {} } = i.getSnapshot();
     for (const f of s) {
       const { drawingId: h } = f;
       for (const [m, p] of Object.entries(o)) {
-        const w = g[h][m];
-        if (w !== p) {
-          const D = d.replaceOp(["drawings", h, m], w, p);
+        const v = g[h][m];
+        if (v !== p) {
+          const D = d.replaceOp(["drawings", h, m], v, p);
           a.push(D);
         }
       }
@@ -681,7 +668,7 @@ const wn = {
   handler: (r, e) => {
     if (e == null)
       return !1;
-    const t = r.get(V), i = r.get(z).getCurrentUniverDocInstance();
+    const t = r.get(j), i = r.get(z).getCurrentUniverDocInstance();
     if (i == null)
       return !1;
     const { drawings: s, wrapText: o, unitId: c } = e, d = $.getInstance(), a = [], { drawings: g = {} } = i.getSnapshot();
@@ -702,13 +689,13 @@ const wn = {
     };
     return u.params.actions = a.reduce((f, h) => $.compose(f, h), null), !!t.syncExecuteCommand(u.id, u.params);
   }
-}, qe = {
+}, Ke = {
   id: "doc.command.update-drawing-doc-transform",
   type: q.COMMAND,
   handler: (r, e) => {
     if (e == null)
       return !1;
-    const t = r.get(V), n = r.get(z), s = r.get(Q).getRenderById(e.unitId), o = s == null ? void 0 : s.scene;
+    const t = r.get(j), n = r.get(z), s = r.get(Q).getRenderById(e.unitId), o = s == null ? void 0 : s.scene;
     if (o == null)
       return !1;
     const c = o.getTransformerByCreate(), d = n.getCurrentUniverDocInstance();
@@ -716,9 +703,9 @@ const wn = {
       return !1;
     const { drawings: a, unitId: g } = e, u = $.getInstance(), l = [], { drawings: f = {} } = d.getSnapshot();
     for (const p of a) {
-      const { drawingId: w, key: D, value: S } = p, O = f[w].docTransform[D];
+      const { drawingId: v, key: D, value: S } = p, O = f[v].docTransform[D];
       if (!Ae.diffValue(O, S)) {
-        const C = u.replaceOp(["drawings", w, "docTransform", D], O, S);
+        const C = u.replaceOp(["drawings", v, "docTransform", D], O, S);
         l.push(C);
       }
     }
@@ -731,7 +718,7 @@ const wn = {
         debounce: !0
       }
     };
-    h.params.actions = l.reduce((p, w) => $.compose(p, w), null);
+    h.params.actions = l.reduce((p, v) => $.compose(p, v), null);
     const m = t.syncExecuteCommand(h.id, h.params);
     return c.refreshControls(), !!m;
   }
@@ -739,17 +726,17 @@ const wn = {
   id: "doc.command.move-inline-drawing",
   type: q.COMMAND,
   handler: (r, e) => {
-    var L, R;
+    var U, R;
     if (e == null)
       return !1;
-    const t = r.get(Q), n = (L = t.getRenderById(e.unitId)) == null ? void 0 : L.with(Me), i = r.get(ut), s = t.getRenderById(e.unitId), o = s == null ? void 0 : s.scene, c = s == null ? void 0 : s.with(te).getSkeleton();
+    const t = r.get(Q), n = (U = t.getRenderById(e.unitId)) == null ? void 0 : U.with(ye), i = r.get(ut), s = t.getRenderById(e.unitId), o = s == null ? void 0 : s.scene, c = s == null ? void 0 : s.with(te).getSkeleton();
     if (o == null || n == null)
       return !1;
-    const d = o.getTransformerByCreate(), a = r.get(V), u = r.get(z).getCurrentUniverDocInstance();
+    const d = o.getTransformerByCreate(), a = r.get(j), u = r.get(z).getCurrentUniverDocInstance();
     if (u == null)
       return !1;
-    const { drawing: l, unitId: f, offset: h, segmentId: m, segmentPage: p, needRefreshDrawings: w } = e;
-    if (w)
+    const { drawing: l, unitId: f, offset: h, segmentId: m, segmentPage: p, needRefreshDrawings: v } = e;
+    if (v)
       return i.refreshDrawings(c), d.refreshControls(), !0;
     const D = [], { drawingId: S } = l, O = (R = n.getSegment()) != null ? R : "", C = mn(
       m,
@@ -763,7 +750,7 @@ const wn = {
     if (C == null || C.length === 0)
       return i.refreshDrawings(c), d.refreshControls(), !1;
     D.push(...C);
-    const y = {
+    const M = {
       id: ee.id,
       params: {
         unitId: f,
@@ -771,8 +758,8 @@ const wn = {
         textRanges: null
       }
     };
-    y.params.actions = D.reduce((v, N) => $.compose(v, N), null);
-    const A = a.syncExecuteCommand(y.id, y.params);
+    M.params.actions = D.reduce((w, N) => $.compose(w, N), null);
+    const A = a.syncExecuteCommand(M.id, M.params);
     return d.refreshControls(), !!A;
   }
 }, Sn = {
@@ -780,42 +767,42 @@ const wn = {
   type: q.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: (r, e) => {
-    var x, H;
+    var x, G;
     if (e == null)
       return !1;
-    const t = r.get(Q), n = (x = t.getRenderById(e.unitId)) == null ? void 0 : x.with(Me), i = t.getRenderById(e.unitId), s = i == null ? void 0 : i.scene;
+    const t = r.get(Q), n = (x = t.getRenderById(e.unitId)) == null ? void 0 : x.with(ye), i = t.getRenderById(e.unitId), s = i == null ? void 0 : i.scene;
     if (s == null || n == null)
       return !1;
-    const o = s.getTransformerByCreate(), c = r.get(V), a = r.get(z).getCurrentUniverDocInstance();
+    const o = s.getTransformerByCreate(), c = r.get(j), a = r.get(z).getCurrentUniverDocInstance();
     if (a == null)
       return !1;
-    const { drawing: g, unitId: u, offset: l, docTransform: f, segmentId: h, segmentPage: m } = e, p = [], { drawingId: w } = g, D = (H = n.getSegment()) != null ? H : "", S = mn(
+    const { drawing: g, unitId: u, offset: l, docTransform: f, segmentId: h, segmentPage: m } = e, p = [], { drawingId: v } = g, D = (G = n.getSegment()) != null ? G : "", S = mn(
       h,
       D,
       m,
       l,
-      w,
+      v,
       a,
       n
     );
     if (S == null)
       return !1;
     S.length > 0 && p.push(...S);
-    const O = $.getInstance(), { drawings: C = {} } = a.getSnapshot(), y = C[w].docTransform, { positionH: A, positionV: L, size: R, angle: v } = y;
+    const O = $.getInstance(), { drawings: C = {} } = a.getSnapshot(), M = C[v].docTransform, { positionH: A, positionV: U, size: R, angle: w } = M;
     if (!Ae.diffValue(A, f.positionH)) {
-      const I = O.replaceOp(["drawings", w, "docTransform", "positionH"], A, f.positionH);
+      const I = O.replaceOp(["drawings", v, "docTransform", "positionH"], A, f.positionH);
       p.push(I);
     }
-    if (!Ae.diffValue(L, f.positionV)) {
-      const I = O.replaceOp(["drawings", w, "docTransform", "positionV"], L, f.positionV);
+    if (!Ae.diffValue(U, f.positionV)) {
+      const I = O.replaceOp(["drawings", v, "docTransform", "positionV"], U, f.positionV);
       p.push(I);
     }
     if (!Ae.diffValue(R, f.size)) {
-      const I = O.replaceOp(["drawings", w, "docTransform", "size"], R, f.size);
+      const I = O.replaceOp(["drawings", v, "docTransform", "size"], R, f.size);
       p.push(I);
     }
-    if (!Ae.diffValue(v, f.angle)) {
-      const I = O.replaceOp(["drawings", w, "docTransform", "angle"], v, f.angle);
+    if (!Ae.diffValue(w, f.angle)) {
+      const I = O.replaceOp(["drawings", v, "docTransform", "angle"], w, f.angle);
       p.push(I);
     }
     const N = {
@@ -828,26 +815,26 @@ const wn = {
       }
     };
     N.params.actions = p.reduce((I, _) => $.compose(I, _), null);
-    const G = c.syncExecuteCommand(N.id, N.params);
-    return o.refreshControls(), !!G;
+    const H = c.syncExecuteCommand(N.id, N.params);
+    return o.refreshControls(), !!H;
   }
-}, Ke = {
+}, Ye = {
   id: "doc.command.move-drawing",
   type: q.COMMAND,
   handler: (r, e) => {
-    const t = r.get(V), n = r.get(Ne), i = r.get(z), s = r.get(Q), { direction: o } = e, c = n.getFocusDrawings();
+    const t = r.get(j), n = r.get(We), i = r.get(z), s = r.get(Q), { direction: o } = e, c = n.getFocusDrawings();
     if (c.length === 0)
       return !1;
     const d = c[0].unitId, a = s.getRenderById(d), g = a == null ? void 0 : a.scene;
     if (g == null)
       return !1;
     const u = g.getTransformerByCreate(), l = i.getUniverDocInstance(d), f = c.map((m) => {
-      var y, A, L, R, v;
-      const { drawingId: p } = m, w = (y = l == null ? void 0 : l.getSnapshot().drawings) == null ? void 0 : y[p];
-      if (w == null || w.layoutType === k.INLINE)
+      var M, A, U, R, w;
+      const { drawingId: p } = m, v = (M = l == null ? void 0 : l.getSnapshot().drawings) == null ? void 0 : M[p];
+      if (v == null || v.layoutType === k.INLINE)
         return null;
-      const { positionH: D, positionV: S } = w.docTransform, O = { ...D }, C = { ...S };
-      return o === he.UP ? C.posOffset = ((A = C.posOffset) != null ? A : 0) - 2 : o === he.DOWN ? C.posOffset = ((L = C.posOffset) != null ? L : 0) + 2 : o === he.LEFT ? O.posOffset = ((R = O.posOffset) != null ? R : 0) - 2 : o === he.RIGHT && (O.posOffset = ((v = O.posOffset) != null ? v : 0) + 2), {
+      const { positionH: D, positionV: S } = v.docTransform, O = { ...D }, C = { ...S };
+      return o === he.UP ? C.posOffset = ((A = C.posOffset) != null ? A : 0) - 2 : o === he.DOWN ? C.posOffset = ((U = C.posOffset) != null ? U : 0) + 2 : o === he.LEFT ? O.posOffset = ((R = O.posOffset) != null ? R : 0) - 2 : o === he.RIGHT && (O.posOffset = ((w = O.posOffset) != null ? w : 0) + 2), {
         drawingId: p,
         key: o === he.UP || o === he.DOWN ? "positionV" : "positionH",
         value: o === he.UP || o === he.DOWN ? C : O
@@ -855,14 +842,14 @@ const wn = {
     }).filter((m) => m != null);
     if (f.length === 0)
       return !1;
-    const h = t.syncExecuteCommand(qe.id, {
+    const h = t.syncExecuteCommand(Ke.id, {
       unitId: d,
       subUnitId: d,
       drawings: f
     });
     return u.refreshControls(), !!h;
   }
-}, Gi = {
+}, Hi = {
   id: "doc.operation.clear-drawing-transformer",
   type: q.MUTATION,
   handler: (r, e) => {
@@ -890,16 +877,16 @@ const wn = {
   id: "doc.operation.edit-doc-image",
   type: q.OPERATION,
   handler: (r, e) => {
-    const t = r.get(fe), n = r.get(V);
+    const t = r.get(fe), n = r.get(j);
     return e == null ? !1 : (t.focusDrawing([e]), n.executeCommand(On.id, { value: "open" }), !0);
   }
 };
-var Hi = Object.getOwnPropertyDescriptor, Vi = (r, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? Hi(e, t) : e, s = r.length - 1, o; s >= 0; s--)
+var Gi = Object.getOwnPropertyDescriptor, Vi = (r, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? Gi(e, t) : e, s = r.length - 1, o; s >= 0; s--)
     (o = r[s]) && (i = o(i) || i);
   return i;
 }, Le = (r, e) => (t, n) => e(t, n, r);
-function Mn(r, e, t = 1, n = 0) {
+function yn(r, e, t = 1, n = 0) {
   const { top: i, left: s, bottom: o, right: c } = r, d = c - s, a = o - i, g = e.getViewport(tn.VIEW_MAIN), { viewportScrollX: u, viewportScrollY: l } = g, { scaleX: f, scaleY: h } = e.getAncestorScale();
   return {
     startX: (s - u) * f,
@@ -918,9 +905,9 @@ function Mn(r, e, t = 1, n = 0) {
 }
 function wt(r, e) {
   const { top: t, left: n, width: i, height: s, angle: o, opacity: c } = r;
-  return Mn({ top: t, left: n, bottom: t + s, right: n + i }, e.scene, c, o);
+  return yn({ top: t, left: n, bottom: t + s, right: n + i }, e.scene, c, o);
 }
-let rt = class extends xe {
+let st = class extends xe {
   constructor(e, t, n, i, s, o) {
     super();
     me(this, "_domLayerInfoMap", /* @__PURE__ */ new Map());
@@ -957,7 +944,7 @@ let rt = class extends xe {
   _insertRects(e) {
     e.forEach(async (t) => {
       const { unitId: n } = t;
-      if (!this._univerInstanceService.getUnit(n, ve.UNIVER_DOC))
+      if (!this._univerInstanceService.getUnit(n, we.UNIVER_DOC))
         return;
       const s = this._getSceneAndTransformerByDrawingSearch(n);
       if (s == null)
@@ -969,7 +956,7 @@ let rt = class extends xe {
       if (!(c == null || c.length === 0))
         for (const d of c) {
           this._addHoverForRect(d);
-          const a = new Ln(), g = wt(d, s.renderUnit), u = new Ot(g), l = s.canvas, f = o.data, h = {
+          const a = new Un(), g = wt(d, s.renderUnit), u = new Tt(g), l = s.canvas, f = o.data, h = {
             dispose: a,
             rect: d,
             position$: u,
@@ -1008,15 +995,15 @@ let rt = class extends xe {
   }
   _addHoverForRect(e) {
     this.disposeWithMe(
-      ze(
+      Xe(
         e.onPointerEnter$.subscribeEvent(() => {
-          e.cursor = xt.GRAB;
+          e.cursor = Nt.GRAB;
         })
       )
     ), this.disposeWithMe(
-      ze(
+      Xe(
         e.onPointerLeave$.subscribeEvent(() => {
-          e.cursor = xt.DEFAULT;
+          e.cursor = Nt.DEFAULT;
         })
       )
     );
@@ -1040,14 +1027,14 @@ let rt = class extends xe {
       });
     };
     this.disposeWithMe(
-      this._univerInstanceService.getCurrentTypeOfUnit$(ve.UNIVER_DOC).pipe(
-        Ht((t) => {
+      this._univerInstanceService.getCurrentTypeOfUnit$(we.UNIVER_DOC).pipe(
+        Vt((t) => {
           if (!t) return null;
           const n = t.getUnitId(), i = this._renderManagerService.getRenderById(n);
           return i ? { render: i, unitId: n } : null;
         }),
         Ci(
-          (t) => t ? Zt(t.render.scene.getViewport(tn.VIEW_MAIN).onScrollAfter$).pipe(Ht(() => ({ unitId: t.unitId }))) : Ei(null)
+          (t) => t ? Zt(t.render.scene.getViewport(tn.VIEW_MAIN).onScrollAfter$).pipe(Vt(() => ({ unitId: t.unitId }))) : Ei(null)
         )
       ).subscribe((t) => {
         if (!t) return;
@@ -1062,8 +1049,8 @@ let rt = class extends xe {
     }));
   }
   insertFloatDom(e, t) {
-    var m, p, w;
-    const n = this._univerInstanceService.getCurrentUnitOfType(ve.UNIVER_DOC);
+    var m, p, v;
+    const n = this._univerInstanceService.getCurrentUnitOfType(we.UNIVER_DOC);
     if (!n) return !1;
     const i = this._getSceneAndTransformerByDrawingSearch(n.getUnitId());
     if (!i) return !1;
@@ -1083,7 +1070,7 @@ let rt = class extends xe {
         posOffset: 0
       },
       angle: 0
-    }, f = (w = t.drawingId) != null ? w : Qt(), h = {
+    }, f = (v = t.drawingId) != null ? v : Qt(), h = {
       unitId: n.getUnitId(),
       drawings: [
         {
@@ -1100,851 +1087,184 @@ let rt = class extends xe {
         }
       ]
     };
-    return this._commandService.syncExecuteCommand(yt.id, h), f;
+    return this._commandService.syncExecuteCommand(bt.id, h), f;
   }
 };
-rt = Vi([
+st = Vi([
   Le(0, Q),
   Le(1, fe),
   Le(2, Z(gn)),
   Le(3, Z(Si)),
   Le(4, z),
-  Le(5, V)
-], rt);
-const ji = "docs-drawing-ui.config", $t = {}, zt = -1e3, Xt = 1e3, $i = (r) => {
-  const e = we(V), t = we(lt), n = we(fe), i = we(Q), s = we(z), { drawings: o } = r, c = o[0];
-  if (c == null)
-    return;
-  const { unitId: d } = c, a = s.getUniverDocInstance(d), g = a == null ? void 0 : a.getSnapshot().documentStyle.documentFlavor, u = i.getRenderById(d), l = u == null ? void 0 : u.scene;
-  if (l == null)
-    return;
-  const f = l.getTransformerByCreate(), h = [{
-    label: t.t("image-position.column"),
-    value: String(J.COLUMN)
-  }, {
-    label: t.t("image-position.page"),
-    value: String(J.PAGE)
-  }, {
-    label: t.t("image-position.margin"),
-    value: String(J.MARGIN)
-  }], m = [{
-    label: t.t("image-position.line"),
-    value: String(W.LINE),
-    disabled: g === pt.MODERN
-  }, {
-    label: t.t("image-position.page"),
-    value: String(W.PAGE),
-    disabled: g === pt.MODERN
-  }, {
-    label: t.t("image-position.margin"),
-    value: String(W.MARGIN),
-    disabled: g === pt.MODERN
-  }, {
-    label: t.t("image-position.paragraph"),
-    value: String(W.PARAGRAPH)
-  }], [p, w] = re(!0), [D, S] = re({
-    relativeFrom: J.PAGE,
-    posOffset: 0
-  }), [O, C] = re({
-    relativeFrom: W.PAGE,
-    posOffset: 0
-  }), [y, A] = re(!0), [L, R] = re(!0);
-  function v(_, E) {
-    var b;
-    _ === "positionH" ? S(E) : C(E);
-    const T = n.getFocusDrawings();
-    if (T.length === 0)
-      return;
-    const U = T.map((P) => ({
-      unitId: P.unitId,
-      subUnitId: P.subUnitId,
-      drawingId: P.drawingId
-    }));
-    e.executeCommand(qe.id, {
-      unitId: T[0].unitId,
-      subUnitId: T[0].unitId,
-      drawings: U.map((P) => ({
-        drawingId: P.drawingId,
-        key: _,
-        value: E
-      }))
-    });
-    const B = (b = i.getRenderById(d)) == null ? void 0 : b.with(Me);
-    B && B.blur(), f.refreshControls();
-  }
-  function N(_) {
-    var ie, Ie, _e;
-    const E = D.relativeFrom, T = D.posOffset, U = Number(_);
-    if (E === U)
-      return;
-    const B = n.getFocusDrawings();
-    if (B.length === 0)
-      return;
-    const b = B[0].drawingId, P = B[0].unitId;
-    let j = null, F = 0;
-    const K = (ie = i.getRenderById(P)) == null ? void 0 : ie.with(te).getSkeleton(), oe = K == null ? void 0 : K.getSkeletonData();
-    if (oe == null)
-      return;
-    const { pages: Ue, skeHeaders: ye, skeFooters: We } = oe;
-    for (const ce of Ue) {
-      const { marginLeft: Se, skeDrawings: De, headerId: be, footerId: Ce, pageWidth: Oe } = ce;
-      if (De.has(b)) {
-        j = De.get(b), F = Se;
-        break;
-      }
-      const de = (Ie = ye.get(be)) == null ? void 0 : Ie.get(Oe);
-      if (de != null && de.skeDrawings.has(b)) {
-        j = de == null ? void 0 : de.skeDrawings.get(b), F = Se;
-        break;
-      }
-      const ge = (_e = We.get(Ce)) == null ? void 0 : _e.get(Oe);
-      if (ge != null && ge.skeDrawings.has(b)) {
-        j = ge == null ? void 0 : ge.skeDrawings.get(b), F = Se;
-        break;
+  Le(5, j)
+], st);
+const Mn = "doc.menu.image", bn = pn.id, ji = (r) => {
+  const e = r.get(Ot), t = r.get(z);
+  return new Ri((n) => {
+    const i = e.textSelection$.subscribe(() => {
+      var o;
+      const s = e.getActiveTextRange();
+      if (s) {
+        const { segmentId: c, startOffset: d, endOffset: a } = s, g = t.getCurrentUniverDocInstance(), u = (o = g == null ? void 0 : g.getSelfOrHeaderFooterModel(c).getBody()) == null ? void 0 : o.tables;
+        if (u && u.length && u.some((l) => {
+          const { startIndex: f, endIndex: h } = l;
+          return d >= f && d < h || a >= f && a < h;
+        })) {
+          n.next(!0);
+          return;
+        }
+      } else {
+        n.next(!0);
+        return;
       }
+      n.next(!1);
+    });
+    return () => i.unsubscribe();
+  });
+};
+function $i(r) {
+  return {
+    id: Mn,
+    type: an.SUBITEMS,
+    icon: "AddImageIcon",
+    tooltip: "docImage.title",
+    disabled$: ji(r),
+    hidden$: on(r, we.UNIVER_DOC, void 0, Dt)
+  };
+}
+function zi(r) {
+  return {
+    id: bn,
+    title: "docImage.upload.float",
+    type: an.BUTTON,
+    hidden$: on(r, we.UNIVER_DOC, void 0, Dt)
+  };
+}
+const Xi = "@univerjs/docs-drawing-ui", qi = "0.17.0", Cn = {
+  name: Xi,
+  version: qi
+}, Ki = "docs-drawing-ui.config", zt = {};
+var Yi = Object.getOwnPropertyDescriptor, Zi = (r, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? Yi(e, t) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (i = o(i) || i);
+  return i;
+}, Ve = (r, e) => (t, n) => e(t, n, r);
+function Qi(r) {
+  var n, i, s, o;
+  if ($.isNoop(r) || !Array.isArray(r))
+    return null;
+  const e = r.find((c) => Array.isArray(c) && (c == null ? void 0 : c[0]) === "drawings");
+  if (e == null || !Array.isArray(e) || e.length < 3 || typeof e[1] == "string" && typeof e[2] != "object" || Array.isArray(e[1]) && typeof e[1][1] != "object")
+    return null;
+  const t = [];
+  if (Array.isArray(e == null ? void 0 : e[1]))
+    for (const c of e)
+      Array.isArray(c) && t.push({
+        type: (n = c == null ? void 0 : c[1]) != null && n.i ? "add" : "remove",
+        drawingId: c == null ? void 0 : c[0],
+        drawing: (i = c == null ? void 0 : c[1]) == null ? void 0 : i.i
+      });
+  else
+    t.push({
+      type: (s = e[2]) != null && s.i ? "add" : "remove",
+      drawingId: e[1],
+      drawing: (o = e[2]) == null ? void 0 : o.i
+    });
+  return t;
+}
+function Ji(r) {
+  if (!Array.isArray(r) || r.length < 3 || r[0] !== "drawingsOrder")
+    return [];
+  const e = [];
+  for (let t = 1; t < r.length; t++) {
+    const n = r[t];
+    if (Array.isArray(n) && typeof n[0] == "number" && typeof n[1] == "object")
+      e.push(n[0]);
+    else {
+      e.length = 0;
+      break;
     }
-    if (j == null)
-      return;
-    let ae = 0;
-    E === J.COLUMN ? ae -= j.columnLeft : E === J.MARGIN && (ae -= F), U === J.COLUMN ? ae += j.columnLeft : U === J.MARGIN ? ae += F : J.PAGE;
-    const ne = {
-      relativeFrom: U,
-      posOffset: (T != null ? T : 0) - ae
-    };
-    v("positionH", ne);
   }
-  function G(_) {
-    var De, be, Ce, Oe, de, ge;
-    const E = O.relativeFrom, T = O.posOffset, U = Number(_);
-    if (E === U)
-      return;
-    const B = n.getFocusDrawings();
-    if (B.length === 0)
-      return;
-    const { drawingId: b, unitId: P } = B[0], j = s.getUniverDocInstance(P), F = (De = i.getRenderById(P)) == null ? void 0 : De.with(te).getSkeleton(), K = (be = i.getRenderById(P)) == null ? void 0 : be.with(Me), oe = K == null ? void 0 : K.getSegment(), Ue = K == null ? void 0 : K.getSegmentPage(), ye = (Oe = (Ce = j == null ? void 0 : j.getSelfOrHeaderFooterModel(oe).getBody()) == null ? void 0 : Ce.customBlocks) == null ? void 0 : Oe.find((Ee) => Ee.blockId === b);
-    if (ye == null || F == null || K == null)
-      return;
-    const { startIndex: We } = ye, ae = F.findNodeByCharIndex(We, oe, Ue), ne = (de = ae == null ? void 0 : ae.parent) == null ? void 0 : de.parent, ie = ne == null ? void 0 : ne.parent, Ie = ie == null ? void 0 : ie.lines.find((Ee) => Ee.paragraphIndex === (ne == null ? void 0 : ne.paragraphIndex) && Ee.paragraphStart), _e = (ge = ie == null ? void 0 : ie.parent) == null ? void 0 : ge.parent;
-    if (ae == null || ne == null || Ie == null || ie == null || _e == null)
-      return;
-    let ce = 0;
-    E === W.PARAGRAPH ? ce -= Ie.top : E === W.LINE ? ce -= ne.top : E === W.PAGE && (ce += _e.marginTop), U === W.PARAGRAPH ? ce += Ie.top : U === W.LINE ? ce += ne.top : U === W.PAGE && (ce -= _e.marginTop);
-    const Se = {
-      relativeFrom: U,
-      posOffset: (T != null ? T : 0) - ce
-    };
-    v("positionV", Se);
+  return e;
+}
+let ot = class extends xe {
+  constructor(r, e, t, n, i) {
+    super(), this._univerInstanceService = r, this._commandService = e, this._drawingManagerService = t, this._docDrawingService = n, this._renderManagerService = i, this._initialize();
   }
-  function x(_) {
-    var P;
-    const E = a == null ? void 0 : a.getSnapshot(), T = (P = E == null ? void 0 : E.drawings) == null ? void 0 : P[_.drawingId];
-    if (T == null)
-      return;
-    const { layoutType: U } = T, {
-      positionH: B,
-      positionV: b
-    } = T.docTransform;
-    S(B), C(b), w(U === k.INLINE), A(b.relativeFrom === W.PARAGRAPH || b.relativeFrom === W.LINE);
+  _initialize() {
+    this._commandExecutedListener();
   }
-  function H() {
-    const _ = n.getFocusDrawings();
-    _.length !== 0 && x(_[0]);
+  _commandExecutedListener() {
+    this.disposeWithMe(
+      this._commandService.beforeCommandExecuted((r) => {
+        if (r.id !== ee.id)
+          return;
+        const e = r.params, { unitId: t, actions: n } = e, i = Qi(n);
+        if (i != null)
+          for (const { type: s, drawingId: o, drawing: c } of i)
+            s === "add" ? this._addDrawings(t, [c]) : this._removeDrawings(t, [o]);
+      })
+    ), this.disposeWithMe(
+      this._commandService.onCommandExecuted((r) => {
+        if (r.id !== ee.id)
+          return;
+        const e = r.params, { unitId: t, actions: n } = e;
+        Ji(n).length > 0 && this._updateDrawingsOrder(t);
+      })
+    ), this.disposeWithMe(
+      this._commandService.onCommandExecuted((r) => {
+        var o;
+        if (r.id !== Bn.id && r.id !== Fn.id)
+          return;
+        const e = (o = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : o.getUnitId(), t = this._drawingManagerService.getFocusDrawings();
+        if (e == null || t.length === 0)
+          return;
+        const n = this._renderManagerService.getRenderById(e), i = n == null ? void 0 : n.scene;
+        if (i == null)
+          return !1;
+        i.getTransformerByCreate().refreshControls();
+      })
+    );
   }
-  function I(_) {
-    A(_), G(String(_ ? W.PARAGRAPH : W.PAGE));
+  _addDrawings(r, e) {
+    const t = this._drawingManagerService, n = this._docDrawingService, i = this._docDrawingService.getBatchAddOp(e), { subUnitId: s, redo: o, objects: c } = i;
+    t.applyJson1(r, s, o), n.applyJson1(r, s, o), t.addNotification(c), n.addNotification(c);
   }
-  return Tt(() => {
-    H();
-    const _ = n.focus$.subscribe((T) => {
-      if (T.length === 0) {
-        R(!1);
-        return;
-      }
-      R(!0), x(T[0]);
-    }), E = e.onCommandExecuted(async (T) => {
-      T.id === ee.id && H();
-    });
-    return () => {
-      _.unsubscribe(), E.dispose();
-    };
-  }, []), /* @__PURE__ */ X(
-    "div",
-    {
-      className: sn("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", {
-        "univer-hidden": !L
-      }),
-      children: [
-        /* @__PURE__ */ M(
-          "header",
-          {
-            className: "univer-text-gray-600 dark:!univer-text-gray-200",
-            children: /* @__PURE__ */ M("div", { children: t.t("image-position.title") })
-          }
-        ),
-        /* @__PURE__ */ M(
-          "div",
-          {
-            className: "univer-text-gray-600 dark:!univer-text-gray-200",
-            children: /* @__PURE__ */ M("div", { children: t.t("image-position.horizontal") })
-          }
-        ),
-        /* @__PURE__ */ X(
-          "div",
-          {
-            className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-            children: [
-              /* @__PURE__ */ X("div", { children: [
-                /* @__PURE__ */ M("span", { children: t.t("image-position.absolutePosition") }),
-                /* @__PURE__ */ M(
-                  Be,
-                  {
-                    min: zt,
-                    max: Xt,
-                    precision: 1,
-                    disabled: p,
-                    value: D.posOffset,
-                    onChange: (_) => {
-                      v("positionH", {
-                        relativeFrom: D.relativeFrom,
-                        posOffset: _
-                      });
-                    }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ X("div", { children: [
-                /* @__PURE__ */ M("span", { children: t.t("image-position.toTheRightOf") }),
-                /* @__PURE__ */ M(
-                  Bt,
-                  {
-                    value: String(D.relativeFrom),
-                    disabled: p,
-                    options: h,
-                    onChange: N
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ M(
-          "div",
-          {
-            className: "univer-text-gray-600 dark:!univer-text-gray-200",
-            children: /* @__PURE__ */ M("div", { children: t.t("image-position.vertical") })
-          }
-        ),
-        /* @__PURE__ */ X(
-          "div",
-          {
-            className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-            children: [
-              /* @__PURE__ */ X("div", { children: [
-                /* @__PURE__ */ M("span", { children: t.t("image-position.absolutePosition") }),
-                /* @__PURE__ */ M(
-                  Be,
-                  {
-                    min: zt,
-                    max: Xt,
-                    precision: 1,
-                    disabled: p,
-                    value: O.posOffset,
-                    onChange: (_) => {
-                      v("positionV", {
-                        relativeFrom: O.relativeFrom,
-                        posOffset: _
-                      });
-                    }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ X("div", { children: [
-                /* @__PURE__ */ M("span", { children: t.t("image-position.bellow") }),
-                /* @__PURE__ */ M(
-                  Bt,
-                  {
-                    disabled: p,
-                    value: String(O.relativeFrom),
-                    options: m,
-                    onChange: G
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ M(
-          "div",
-          {
-            className: "univer-text-gray-600 dark:!univer-text-gray-200",
-            children: /* @__PURE__ */ M("div", { children: t.t("image-position.options") })
-          }
-        ),
-        /* @__PURE__ */ M("div", { children: /* @__PURE__ */ M(
-          di,
-          {
-            disabled: p,
-            checked: y,
-            onChange: I,
-            children: t.t("image-position.moveObjectWithText")
-          }
-        ) })
-      ]
-    }
-  );
-}, Qe = 0, Je = 100, zi = (r) => {
-  const e = we(V), t = we(lt), n = we(fe), i = we(Q), s = we(z), { drawings: o } = r, c = o[0];
-  if (c == null)
-    return null;
-  const { unitId: d } = c, a = s.getUniverDocInstance(d), g = i.getRenderById(d);
-  if ((g == null ? void 0 : g.scene) == null)
-    return null;
-  const [l, f] = re(!0), [h, m] = re(!0), [p, w] = re(!0), [D, S] = re(ue.INLINE), [O, C] = re(""), [y, A] = re({
-    distT: 0,
-    distL: 0,
-    distB: 0,
-    distR: 0
-  }), [L, R] = re(!0);
-  function v(I) {
-    S(I);
-    const _ = n.getFocusDrawings();
-    if (_.length === 0)
-      return;
-    const { unitId: E, subUnitId: T } = _[0], U = _.map(({ unitId: B, subUnitId: b, drawingId: P }) => ({
-      unitId: B,
-      subUnitId: b,
-      drawingId: P
-    }));
-    e.executeCommand(wn.id, {
-      unitId: E,
-      subUnitId: T,
-      drawings: U,
-      wrappingStyle: I
-    });
-  }
-  function N(I) {
-    C(I);
-    const _ = n.getFocusDrawings();
-    if (_.length === 0)
-      return;
-    const E = _.map((T) => ({
-      unitId: T.unitId,
-      subUnitId: T.subUnitId,
-      drawingId: T.drawingId
-    }));
-    e.executeCommand(In.id, {
-      unitId: _[0].unitId,
-      subUnitId: _[0].unitId,
-      drawings: E,
-      wrapText: I
-    });
-  }
-  function G(I, _) {
-    if (I == null)
-      return;
-    const E = { ...y, [_]: I };
-    A(E);
-    const T = n.getFocusDrawings();
-    if (T.length === 0)
-      return;
-    const U = T.map((B) => ({
-      unitId: B.unitId,
-      subUnitId: B.subUnitId,
-      drawingId: B.drawingId
-    }));
-    e.executeCommand(vn.id, {
-      unitId: T[0].unitId,
-      subUnitId: T[0].unitId,
-      drawings: U,
-      dist: {
-        [_]: I
-      }
-    });
-  }
-  function x() {
-    const I = n.getFocusDrawings();
-    I.length !== 0 && H(I[0]);
-  }
-  function H(I) {
-    var K, oe;
-    const _ = (oe = (K = a == null ? void 0 : a.getSnapshot()) == null ? void 0 : K.drawings) == null ? void 0 : oe[I.drawingId];
-    if (_ == null)
-      return;
-    const {
-      distT: E = 0,
-      distL: T = 0,
-      distB: U = 0,
-      distR: B = 0,
-      layoutType: b = k.INLINE,
-      behindDoc: P = se.FALSE,
-      wrapText: j = $e.BOTH_SIDES
-    } = _;
-    if (A({
-      distT: E,
-      distL: T,
-      distB: U,
-      distR: B
-    }), C(j), f(b !== k.WRAP_SQUARE), b === k.WRAP_NONE || b === k.INLINE ? m(!0) : m(!1), b === k.WRAP_NONE || b === k.INLINE || b === k.WRAP_TOP_AND_BOTTOM ? w(!0) : w(!1), b === k.WRAP_NONE)
-      P === se.TRUE ? S(ue.BEHIND_TEXT) : S(ue.IN_FRONT_OF_TEXT);
-    else
-      switch (b) {
-        case k.INLINE:
-          S(ue.INLINE);
-          break;
-        case k.WRAP_SQUARE:
-          S(ue.WRAP_SQUARE);
-          break;
-        case k.WRAP_TOP_AND_BOTTOM:
-          S(ue.WRAP_TOP_AND_BOTTOM);
-          break;
-        default:
-          throw new Error(`Unsupported layout type: ${b}`);
-      }
-  }
-  return Tt(() => {
-    x();
-    const I = n.focus$.subscribe((E) => {
-      if (E.length === 0) {
-        R(!1);
-        return;
-      }
-      R(!0), H(E[0]);
-    }), _ = e.onCommandExecuted(async (E) => {
-      E.id === ee.id && x();
-    });
-    return () => {
-      I.unsubscribe(), _.dispose();
-    };
-  }, []), /* @__PURE__ */ X(
-    "div",
-    {
-      className: sn("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", {
-        "univer-hidden": !L
-      }),
-      children: [
-        /* @__PURE__ */ M(
-          "header",
-          {
-            className: "univer-text-gray-600 dark:!univer-text-gray-200",
-            children: /* @__PURE__ */ M("div", { children: t.t("image-text-wrap.title") })
-          }
-        ),
-        /* @__PURE__ */ M(
-          "div",
-          {
-            className: "univer-text-gray-600 dark:!univer-text-gray-200",
-            children: /* @__PURE__ */ M("div", { children: t.t("image-text-wrap.wrappingStyle") })
-          }
-        ),
-        /* @__PURE__ */ M("div", { children: /* @__PURE__ */ X(Ft, { value: D, onChange: v, direction: "vertical", children: [
-          /* @__PURE__ */ M(Te, { value: ue.INLINE, children: t.t("image-text-wrap.inline") }),
-          /* @__PURE__ */ M(Te, { value: ue.WRAP_SQUARE, children: t.t("image-text-wrap.square") }),
-          /* @__PURE__ */ M(Te, { value: ue.WRAP_TOP_AND_BOTTOM, children: t.t("image-text-wrap.topAndBottom") }),
-          /* @__PURE__ */ M(Te, { value: ue.BEHIND_TEXT, children: t.t("image-text-wrap.behindText") }),
-          /* @__PURE__ */ M(Te, { value: ue.IN_FRONT_OF_TEXT, children: t.t("image-text-wrap.inFrontText") })
-        ] }) }),
-        /* @__PURE__ */ M(
-          "div",
-          {
-            className: "univer-text-gray-600 dark:!univer-text-gray-200",
-            children: /* @__PURE__ */ M("div", { children: t.t("image-text-wrap.wrapText") })
-          }
-        ),
-        /* @__PURE__ */ M("div", { children: /* @__PURE__ */ X(Ft, { disabled: l, value: O, onChange: N, direction: "horizontal", children: [
-          /* @__PURE__ */ M(Te, { value: $e.BOTH_SIDES, children: t.t("image-text-wrap.bothSide") }),
-          /* @__PURE__ */ M(Te, { value: $e.LEFT, children: t.t("image-text-wrap.leftOnly") }),
-          /* @__PURE__ */ M(Te, { value: $e.RIGHT, children: t.t("image-text-wrap.rightOnly") })
-        ] }) }),
-        /* @__PURE__ */ M(
-          "div",
-          {
-            className: "univer-text-gray-600 dark:!univer-text-gray-200",
-            children: /* @__PURE__ */ M("div", { children: t.t("image-text-wrap.distanceFromText") })
-          }
-        ),
-        /* @__PURE__ */ X(
-          "div",
-          {
-            className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-            children: [
-              /* @__PURE__ */ X("div", { children: [
-                /* @__PURE__ */ M("span", { children: t.t("image-text-wrap.top") }),
-                /* @__PURE__ */ M(
-                  Be,
-                  {
-                    min: Qe,
-                    max: Je,
-                    disabled: h,
-                    precision: 1,
-                    value: y.distT,
-                    onChange: (I) => {
-                      G(I, "distT");
-                    }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ X("div", { children: [
-                /* @__PURE__ */ M("span", { children: t.t("image-text-wrap.left") }),
-                /* @__PURE__ */ M(
-                  Be,
-                  {
-                    min: Qe,
-                    max: Je,
-                    disabled: p,
-                    precision: 1,
-                    value: y.distL,
-                    onChange: (I) => {
-                      G(I, "distL");
-                    }
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ X(
-          "div",
-          {
-            className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
-            children: [
-              /* @__PURE__ */ X("div", { children: [
-                /* @__PURE__ */ M("span", { children: t.t("image-text-wrap.bottom") }),
-                /* @__PURE__ */ M(
-                  Be,
-                  {
-                    min: Qe,
-                    max: Je,
-                    disabled: h,
-                    precision: 1,
-                    value: y.distB,
-                    onChange: (I) => {
-                      G(I, "distB");
-                    }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ X("div", { children: [
-                /* @__PURE__ */ M("span", { children: t.t("image-text-wrap.right") }),
-                /* @__PURE__ */ M(
-                  Be,
-                  {
-                    min: Qe,
-                    max: Je,
-                    disabled: p,
-                    precision: 1,
-                    value: y.distR,
-                    onChange: (I) => {
-                      G(I, "distR");
-                    }
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}, Xi = () => {
-  const r = we(fe), e = r.getFocusDrawings(), [t, n] = re(e);
-  return Tt(() => {
-    const i = r.focus$.subscribe((s) => {
-      n(s);
-    });
-    return () => {
-      i.unsubscribe();
-    };
-  }, []), !!(t != null && t.length) && /* @__PURE__ */ X("div", { className: "univer-text-sm", children: [
-    /* @__PURE__ */ M(Ai, { drawings: t, hasAlign: !1, hasCropper: !1, hasGroup: !1, hasTransform: !1 }),
-    /* @__PURE__ */ M(zi, { drawings: t }),
-    /* @__PURE__ */ M($i, { drawings: t })
-  ] });
-}, yn = "doc.menu.image", bn = pn.id, qi = (r) => {
-  const e = r.get(Dt), t = r.get(z);
-  return new Ri((n) => {
-    const i = e.textSelection$.subscribe(() => {
-      var o;
-      const s = e.getActiveTextRange();
-      if (s) {
-        const { segmentId: c, startOffset: d, endOffset: a } = s, g = t.getCurrentUniverDocInstance(), u = (o = g == null ? void 0 : g.getSelfOrHeaderFooterModel(c).getBody()) == null ? void 0 : o.tables;
-        if (u && u.length && u.some((l) => {
-          const { startIndex: f, endIndex: h } = l;
-          return d >= f && d < h || a >= f && a < h;
-        })) {
-          n.next(!0);
-          return;
-        }
-      } else {
-        n.next(!0);
-        return;
-      }
-      n.next(!1);
-    });
-    return () => i.unsubscribe();
-  });
-};
-function Ki(r) {
-  return {
-    id: yn,
-    type: an.SUBITEMS,
-    icon: "AddImageIcon",
-    tooltip: "docImage.title",
-    disabled$: qi(r),
-    hidden$: on(r, ve.UNIVER_DOC, void 0, St)
-  };
-}
-function Yi(r) {
-  return {
-    id: bn,
-    title: "docImage.upload.float",
-    type: an.BUTTON,
-    hidden$: on(r, ve.UNIVER_DOC, void 0, St)
-  };
-}
-const Zi = {
-  [Di.MEDIA]: {
-    [yn]: {
-      order: 0,
-      menuItemFactory: Ki,
-      [bn]: {
-        order: 0,
-        menuItemFactory: Yi
-      }
-    }
-  }
-};
-function Ye(r) {
-  return r.getContextValue(Bn) && r.getContextValue(Fn) && r.getContextValue(nt);
-}
-const Qi = {
-  id: Ke.id,
-  description: "shortcut.drawing-move-down",
-  group: "4_drawing-view",
-  binding: ke.ARROW_DOWN,
-  priority: 100,
-  preconditions: Ye,
-  staticParameters: {
-    direction: he.DOWN
-  }
-}, Ji = {
-  id: Ke.id,
-  description: "shortcut.drawing-move-up",
-  group: "4_drawing-view",
-  binding: ke.ARROW_UP,
-  priority: 100,
-  preconditions: Ye,
-  staticParameters: {
-    direction: he.UP
-  }
-}, er = {
-  id: Ke.id,
-  description: "shortcut.drawing-move-left",
-  group: "4_drawing-view",
-  binding: ke.ARROW_LEFT,
-  priority: 100,
-  preconditions: Ye,
-  staticParameters: {
-    direction: he.LEFT
-  }
-}, tr = {
-  id: Ke.id,
-  description: "shortcut.drawing-move-right",
-  group: "4_drawing-view",
-  binding: ke.ARROW_RIGHT,
-  priority: 100,
-  preconditions: Ye,
-  staticParameters: {
-    direction: he.RIGHT
-  }
-}, nr = {
-  id: ln.id,
-  description: "shortcut.drawing-delete",
-  group: "4_drawing-view",
-  // when focusing on any other input tag do not trigger this shortcut
-  preconditions: Ye,
-  binding: ke.DELETE,
-  mac: ke.BACKSPACE
-};
-var ir = Object.getOwnPropertyDescriptor, rr = (r, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? ir(e, t) : e, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (i = o(i) || i);
-  return i;
-}, et = (r, e) => (t, n) => e(t, n, r);
-let st = class extends xe {
-  constructor(r, e, t, n) {
-    super(), this._componentManager = r, this._menuManagerService = e, this._commandService = t, this._shortcutService = n, this._init();
-  }
-  _initCustomComponents() {
-    const r = this._componentManager;
-    this.disposeWithMe(r.register(Dn, Xi));
-  }
-  _initMenus() {
-    this._menuManagerService.mergeMenu(Zi);
-  }
-  _initCommands() {
-    [
-      pn,
-      yt,
-      wn,
-      vn,
-      In,
-      qe,
-      _n,
-      Sn,
-      Mt,
-      On,
-      Gi,
-      Tn,
-      un,
-      fn,
-      Ke,
-      ln,
-      hn
-    ].forEach((r) => this.disposeWithMe(this._commandService.registerCommand(r)));
-  }
-  _initShortcuts() {
-    [
-      // sheet drawing shortcuts
-      Qi,
-      Ji,
-      er,
-      tr,
-      nr
-    ].forEach((r) => {
-      this.disposeWithMe(this._shortcutService.registerShortcut(r));
-    });
-  }
-  _init() {
-    this._initCommands(), this._initCustomComponents(), this._initMenus(), this._initShortcuts();
-  }
-};
-st = rr([
-  et(0, Z(cn)),
-  et(1, Oi),
-  et(2, V),
-  et(3, Ti)
-], st);
-var sr = Object.getOwnPropertyDescriptor, or = (r, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? sr(e, t) : e, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (i = o(i) || i);
-  return i;
-}, He = (r, e) => (t, n) => e(t, n, r);
-function ar(r) {
-  var n, i, s, o;
-  if ($.isNoop(r) || !Array.isArray(r))
-    return null;
-  const e = r.find((c) => Array.isArray(c) && (c == null ? void 0 : c[0]) === "drawings");
-  if (e == null || !Array.isArray(e) || e.length < 3 || typeof e[1] == "string" && typeof e[2] != "object" || Array.isArray(e[1]) && typeof e[1][1] != "object")
-    return null;
-  const t = [];
-  if (Array.isArray(e == null ? void 0 : e[1]))
-    for (const c of e)
-      Array.isArray(c) && t.push({
-        type: (n = c == null ? void 0 : c[1]) != null && n.i ? "add" : "remove",
-        drawingId: c == null ? void 0 : c[0],
-        drawing: (i = c == null ? void 0 : c[1]) == null ? void 0 : i.i
-      });
-  else
-    t.push({
-      type: (s = e[2]) != null && s.i ? "add" : "remove",
-      drawingId: e[1],
-      drawing: (o = e[2]) == null ? void 0 : o.i
-    });
-  return t;
-}
-function cr(r) {
-  if (!Array.isArray(r) || r.length < 3 || r[0] !== "drawingsOrder")
-    return [];
-  const e = [];
-  for (let t = 1; t < r.length; t++) {
-    const n = r[t];
-    if (Array.isArray(n) && typeof n[0] == "number" && typeof n[1] == "object")
-      e.push(n[0]);
-    else {
-      e.length = 0;
-      break;
-    }
-  }
-  return e;
-}
-let ot = class extends xe {
-  constructor(r, e, t, n, i) {
-    super(), this._univerInstanceService = r, this._commandService = e, this._drawingManagerService = t, this._docDrawingService = n, this._renderManagerService = i, this._initialize();
-  }
-  _initialize() {
-    this._commandExecutedListener();
-  }
-  _commandExecutedListener() {
-    this.disposeWithMe(
-      this._commandService.beforeCommandExecuted((r) => {
-        if (r.id !== ee.id)
-          return;
-        const e = r.params, { unitId: t, actions: n } = e, i = ar(n);
-        if (i != null)
-          for (const { type: s, drawingId: o, drawing: c } of i)
-            s === "add" ? this._addDrawings(t, [c]) : this._removeDrawings(t, [o]);
-      })
-    ), this.disposeWithMe(
-      this._commandService.onCommandExecuted((r) => {
-        if (r.id !== ee.id)
-          return;
-        const e = r.params, { unitId: t, actions: n } = e;
-        cr(n).length > 0 && this._updateDrawingsOrder(t);
-      })
-    ), this.disposeWithMe(
-      this._commandService.onCommandExecuted((r) => {
-        var o;
-        if (r.id !== kn.id && r.id !== Wn.id)
-          return;
-        const e = (o = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : o.getUnitId(), t = this._drawingManagerService.getFocusDrawings();
-        if (e == null || t.length === 0)
-          return;
-        const n = this._renderManagerService.getRenderById(e), i = n == null ? void 0 : n.scene;
-        if (i == null)
-          return !1;
-        i.getTransformerByCreate().refreshControls();
-      })
-    );
-  }
-  _addDrawings(r, e) {
-    const t = this._drawingManagerService, n = this._docDrawingService, i = this._docDrawingService.getBatchAddOp(e), { subUnitId: s, redo: o, objects: c } = i;
-    t.applyJson1(r, s, o), n.applyJson1(r, s, o), t.addNotification(c), n.addNotification(c);
-  }
-  _removeDrawings(r, e) {
-    const t = this._drawingManagerService, n = this._docDrawingService, i = this._docDrawingService.getBatchRemoveOp(e.map((d) => ({
-      unitId: r,
-      subUnitId: r,
-      drawingId: d
-    }))), { subUnitId: s, redo: o, objects: c } = i;
-    t.applyJson1(r, s, o), n.applyJson1(r, s, o), t.removeNotification(c), n.removeNotification(c);
-  }
-  _updateDrawingsOrder(r) {
-    const e = this._univerInstanceService.getUniverDocInstance(r);
-    if (e == null)
-      return;
-    const t = e.getSnapshot().drawingsOrder;
-    if (t == null)
-      return;
-    const n = this._drawingManagerService, i = this._docDrawingService;
-    n.setDrawingOrder(r, r, t), i.setDrawingOrder(r, r, t);
-    const s = {
-      unitId: r,
-      subUnitId: r,
-      drawingIds: t
+  _removeDrawings(r, e) {
+    const t = this._drawingManagerService, n = this._docDrawingService, i = this._docDrawingService.getBatchRemoveOp(e.map((d) => ({
+      unitId: r,
+      subUnitId: r,
+      drawingId: d
+    }))), { subUnitId: s, redo: o, objects: c } = i;
+    t.applyJson1(r, s, o), n.applyJson1(r, s, o), t.removeNotification(c), n.removeNotification(c);
+  }
+  _updateDrawingsOrder(r) {
+    const e = this._univerInstanceService.getUniverDocInstance(r);
+    if (e == null)
+      return;
+    const t = e.getSnapshot().drawingsOrder;
+    if (t == null)
+      return;
+    const n = this._drawingManagerService, i = this._docDrawingService;
+    n.setDrawingOrder(r, r, t), i.setDrawingOrder(r, r, t);
+    const s = {
+      unitId: r,
+      subUnitId: r,
+      drawingIds: t
     };
     n.orderNotification(s), i.orderNotification(s);
   }
 };
-ot = or([
-  He(0, z),
-  He(1, V),
-  He(2, fe),
-  He(3, Ne),
-  He(4, Q)
+ot = Zi([
+  Ve(0, z),
+  Ve(1, j),
+  Ve(2, fe),
+  Ve(3, We),
+  Ve(4, Q)
 ], ot);
-const dr = (r) => {
+const er = (r) => {
   const { floatDomInfos: e, scene: t, offset: n, bound: i } = r, s = i.right - i.left, o = i.bottom - i.top, c = Bi(() => e.map((d) => {
-    const { width: a = 0, height: g = 0, left: u = 0, top: l = 0 } = d.transform, h = Mn(
+    const { width: a = 0, height: g = 0, left: u = 0, top: l = 0 } = d.transform, h = yn(
       {
         left: u,
         right: u + a,
@@ -1953,7 +1273,7 @@ const dr = (r) => {
       },
       t
     ), m = {
-      position$: new Ot(h),
+      position$: new Tt(h),
       position: h,
       id: d.drawingId,
       componentKey: d.componentKey,
@@ -1970,13 +1290,13 @@ const dr = (r) => {
     };
     return [d.drawingId, m];
   }).filter(([d, a]) => !(a.position.endX < 0 || a.position.endY < 0 || a.position.startX > s || a.position.startY > o)), [e, t, n, s, o]);
-  return /* @__PURE__ */ M("div", { className: "univer-absolute univer-left-0 univer-top-0", children: c.map(([d, a]) => /* @__PURE__ */ M(Mi, { layer: a, id: d, position: a.position }, d)) });
+  return /* @__PURE__ */ y("div", { className: "univer-absolute univer-left-0 univer-top-0", children: c.map(([d, a]) => /* @__PURE__ */ y(Di, { layer: a, id: d, position: a.position }, d)) });
 };
-var gr = Object.getOwnPropertyDescriptor, lr = (r, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? gr(e, t) : e, s = r.length - 1, o; s >= 0; s--)
+var tr = Object.getOwnPropertyDescriptor, nr = (r, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? tr(e, t) : e, s = r.length - 1, o; s >= 0; s--)
     (o = r[s]) && (i = o(i) || i);
   return i;
-}, Ve = (r, e) => (t, n) => e(t, n, r);
+}, je = (r, e) => (t, n) => e(t, n, r);
 let at = class extends xe {
   constructor(r, e, t, n, i) {
     super(), this._docPrintInterceptorService = r, this._drawingRenderService = e, this._drawingManagerService = t, this._componetManager = n, this._injector = i, this._initPrinting(), this._initPrintingDom();
@@ -2010,7 +1330,7 @@ let at = class extends xe {
                 if (a.drawingType === Pe.DRAWING_CHART)
                   return {
                     ...a,
-                    componentKey: this._componetManager.get(Gn)
+                    componentKey: this._componetManager.get(kn)
                   };
                 if (a.drawingType === Pe.DRAWING_DOM) {
                   const g = this._docPrintInterceptorService.getPrintComponent(a.componentKey);
@@ -2020,9 +1340,9 @@ let at = class extends xe {
                   };
                 }
                 return null;
-              }).filter(Boolean), c = yi(dr, this._injector);
-              return gi(
-                /* @__PURE__ */ M(
+              }).filter(Boolean), c = Oi(er, this._injector);
+              return di(
+                /* @__PURE__ */ y(
                   c,
                   {
                     unitId: n,
@@ -2035,7 +1355,7 @@ let at = class extends xe {
                 ),
                 e.root
               ), r == null || r.add(() => {
-                li(e.root);
+                gi(e.root);
               }), t(r);
             }
           }
@@ -2044,20 +1364,20 @@ let at = class extends xe {
     );
   }
 };
-at = lr([
-  Ve(0, Z(Qn)),
-  Ve(1, Z(gn)),
-  Ve(2, fe),
-  Ve(3, Z(cn)),
-  Ve(4, Z(Jt))
+at = nr([
+  je(0, Z(Qn)),
+  je(1, Z(gn)),
+  je(2, fe),
+  je(3, Z(cn)),
+  je(4, Z(Jt))
 ], at);
-var ur = Object.getOwnPropertyDescriptor, hr = (r, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? ur(e, t) : e, s = r.length - 1, o; s >= 0; s--)
+var ir = Object.getOwnPropertyDescriptor, rr = (r, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? ir(e, t) : e, s = r.length - 1, o; s >= 0; s--)
     (o = r[s]) && (i = o(i) || i);
   return i;
-}, tt = (r, e) => (t, n) => e(t, n, r);
-const fr = "__InlineDrawingAnchor__";
-function qt(r) {
+}, Je = (r, e) => (t, n) => e(t, n, r);
+const sr = "__InlineDrawingAnchor__";
+function Xt(r) {
   const { path: e } = r;
   return e.some((t) => t === "cells");
 }
@@ -2093,7 +1413,7 @@ let ct = class extends xe {
     if (t == null)
       return;
     this.disposeWithMe(
-      ze(
+      Xe(
         t.changeStart$.subscribe((s) => {
           var c;
           this._transformerCache.clear();
@@ -2102,14 +1422,14 @@ let ct = class extends xe {
             const { oKey: a, width: g, height: u, left: l, top: f, angle: h } = d, m = this._drawingManagerService.getDrawingOKey(a);
             if (m == null)
               continue;
-            const p = this._univerInstanceService.getUniverDocInstance(m.unitId), w = (c = p == null ? void 0 : p.getSnapshot().drawings) == null ? void 0 : c[m.drawingId];
-            if ((w == null ? void 0 : w.layoutType) === k.INLINE)
+            const p = this._univerInstanceService.getUniverDocInstance(m.unitId), v = (c = p == null ? void 0 : p.getSnapshot().drawings) == null ? void 0 : c[m.drawingId];
+            if ((v == null ? void 0 : v.layoutType) === k.INLINE)
               try {
                 d.setOpacity(0.2);
               } catch {
               }
-            w != null && this._transformerCache.set(m.drawingId, {
-              drawing: w,
+            v != null && this._transformerCache.set(m.drawingId, {
+              drawing: v,
               top: f,
               left: l,
               width: g,
@@ -2120,9 +1440,9 @@ let ct = class extends xe {
         })
       )
     );
-    const n = Et(this._updateMultipleDrawingDocTransform.bind(this), 50);
-    Et(this._nonInlineDrawingTransform.bind(this), 50), this.disposeWithMe(
-      ze(
+    const n = Rt(this._updateMultipleDrawingDocTransform.bind(this), 50);
+    Rt(this._nonInlineDrawingTransform.bind(this), 50), this.disposeWithMe(
+      Xe(
         t.changing$.subscribe((s) => {
           const { objects: o, offsetX: c, offsetY: d } = s;
           if (o.size > 1)
@@ -2136,7 +1456,7 @@ let ct = class extends xe {
         })
       )
     ), this.disposeWithMe(
-      ze(
+      Xe(
         // eslint-disable-next-line complexity
         t.changeEnd$.subscribe((s) => {
           const { objects: o, offsetX: c, offsetY: d } = s;
@@ -2180,8 +1500,8 @@ let ct = class extends xe {
       const f = this._transformerCache.get(l.drawingId);
       if (f == null)
         continue;
-      const { drawing: h, top: m, left: p, width: w, height: D, angle: S } = f, { width: O, height: C } = this._getPageContentSize(h);
-      if (g = Math.min(g, O), u = Math.min(u, C), (w !== g || D !== u) && t.push({
+      const { drawing: h, top: m, left: p, width: v, height: D, angle: S } = f, { width: O, height: C } = this._getPageContentSize(h);
+      if (g = Math.min(g, O), u = Math.min(u, C), (v !== g || D !== u) && t.push({
         drawingId: l.drawingId,
         key: "size",
         value: {
@@ -2193,13 +1513,13 @@ let ct = class extends xe {
         key: "angle",
         value: a
       }), m !== d || p !== c) {
-        const y = d - m, A = c - p;
-        y !== 0 && t.push({
+        const M = d - m, A = c - p;
+        M !== 0 && t.push({
           drawingId: l.drawingId,
           key: "positionV",
           value: {
             relativeFrom: h.docTransform.positionV.relativeFrom,
-            posOffset: h.docTransform.positionV.posOffset + y
+            posOffset: h.docTransform.positionV.posOffset + M
           }
         }), A !== 0 && t.push({
           drawingId: l.drawingId,
@@ -2211,7 +1531,7 @@ let ct = class extends xe {
         });
       }
     }
-    t.length > 0 && n && i && this._commandService.executeCommand(qe.id, {
+    t.length > 0 && n && i && this._commandService.executeCommand(Ke.id, {
       unitId: n,
       subUnitId: i,
       drawings: t
@@ -2232,20 +1552,20 @@ let ct = class extends xe {
     i != null && this._createOrUpdateInlineAnchor(e.unitId, i);
   }
   _getInlineDrawingAnchor(e, t, n) {
-    var x, H;
+    var x, G;
     const i = this._renderManagerService.getRenderById(e.unitId), s = i == null ? void 0 : i.with(te).getSkeleton();
     if (i == null)
       return;
     const { mainComponent: o, scene: c } = i, d = o, a = c.getViewports()[0], {
-      pageLayoutType: g = Nt.VERTICAL,
+      pageLayoutType: g = Lt.VERTICAL,
       pageMarginLeft: u,
       pageMarginTop: l
     } = d.getOffsetConfig();
     let f = null, h = !1, m = -1, p = "";
-    const w = 0.5, D = this._getTransformCoordForDocumentOffset(d, a, t, n);
+    const v = 0.5, D = this._getTransformCoordForDocumentOffset(d, a, t, n);
     if (D == null)
       return;
-    const S = (x = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : x.with(Me);
+    const S = (x = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : x.with(ye);
     if (S == null)
       return;
     const O = s == null ? void 0 : s.findNodeByCoord(D, g, u, l, {
@@ -2255,19 +1575,19 @@ let ct = class extends xe {
     });
     if (O) {
       const { node: I, ratioX: _, segmentPage: E, segmentId: T } = O;
-      h = _ < w, f = I, m = E, p = T;
+      h = _ < v, f = I, m = E, p = T;
     }
     if (f == null)
       return;
-    const C = s == null ? void 0 : s.findPositionByGlyph(f, m), y = this._getDocObject();
-    if (C == null || s == null || y == null || qt(C))
+    const C = s == null ? void 0 : s.findPositionByGlyph(f, m), M = this._getDocObject();
+    if (C == null || s == null || M == null || Xt(C))
       return;
     const A = {
       ...C,
       isBack: h
-    }, L = y.document.getOffsetConfig(), R = new At(L, s), { cursorList: v, contentBoxPointGroup: N } = R.getRangePointData(A, A), { startOffset: G } = (H = Pt(v)) != null ? H : {};
-    if (G != null)
-      return { offset: G, contentBoxPointGroup: N, segmentId: p, segmentPage: m };
+    }, U = M.document.getOffsetConfig(), R = new Pt(U, s), { cursorList: w, contentBoxPointGroup: N } = R.getRangePointData(A, A), { startOffset: H } = (G = xt(w)) != null ? G : {};
+    if (H != null)
+      return { offset: H, contentBoxPointGroup: N, segmentId: p, segmentPage: m };
   }
   // eslint-disable-next-line max-lines-per-function, complexity
   _getDrawingAnchor(e, t) {
@@ -2275,61 +1595,61 @@ let ct = class extends xe {
     const n = this._renderManagerService.getRenderById(e.unitId), i = n == null ? void 0 : n.with(te).getSkeleton(), s = i == null ? void 0 : i.getSkeletonData();
     if (s == null || n == null)
       return;
-    const { pages: o, skeHeaders: c, skeFooters: d } = s, { mainComponent: a, scene: g } = n, u = a, l = g.getViewports()[0], { pageLayoutType: f = Nt.VERTICAL, pageMarginLeft: h, pageMarginTop: m, docsLeft: p, docsTop: w } = u.getOffsetConfig(), { left: D, top: S, angle: O } = t;
-    let { width: C, height: y } = t;
-    const { positionV: A, positionH: L } = e.docTransform, { width: R, height: v } = this._getPageContentSize(e);
-    C = Math.min(C, R), y = Math.min(y, v);
-    let N = null, G = "", x = -1;
-    const H = !1, I = {
+    const { pages: o, skeHeaders: c, skeFooters: d } = s, { mainComponent: a, scene: g } = n, u = a, l = g.getViewports()[0], { pageLayoutType: f = Lt.VERTICAL, pageMarginLeft: h, pageMarginTop: m, docsLeft: p, docsTop: v } = u.getOffsetConfig(), { left: D, top: S, angle: O } = t;
+    let { width: C, height: M } = t;
+    const { positionV: A, positionH: U } = e.docTransform, { width: R, height: w } = this._getPageContentSize(e);
+    C = Math.min(C, R), M = Math.min(M, w);
+    let N = null, H = "", x = -1;
+    const G = !1, I = {
       ...e.docTransform,
       size: {
         width: C,
-        height: y
+        height: M
       },
       angle: O
     }, { x: _, y: E } = g.getViewportScrollXY(l), T = this._getTransformCoordForDocumentOffset(u, l, D - _, S - E);
     if (T == null)
       return;
-    const U = (Ie = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : Ie.with(Me);
-    if (U == null)
+    const L = (Ie = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : Ie.with(ye);
+    if (L == null)
       return;
     const B = i == null ? void 0 : i.findNodeByCoord(T, f, h, m, {
       strict: !1,
-      segmentId: U.getSegment(),
-      segmentPage: U.getSegmentPage()
+      segmentId: L.getSegment(),
+      segmentPage: L.getSegmentPage()
     });
     if (B) {
-      const { node: pe, segmentPage: ht, segmentId: ft } = B;
-      N = pe, x = ht, G = ft;
+      const { node: pe, segmentPage: ft, segmentId: pt } = B;
+      N = pe, x = ft, H = pt;
     }
     if (N == null)
       return;
-    const b = (_e = N.parent) == null ? void 0 : _e.parent, P = b == null ? void 0 : b.parent, j = (ce = P == null ? void 0 : P.lines.find((pe) => pe.paragraphIndex === (b == null ? void 0 : b.paragraphIndex) && pe.paragraphStart)) != null ? ce : P == null ? void 0 : P.lines[0], F = (Se = P == null ? void 0 : P.parent) == null ? void 0 : Se.parent;
-    if (b == null || P == null || j == null || F == null)
+    const b = (_e = N.parent) == null ? void 0 : _e.parent, P = b == null ? void 0 : b.parent, V = (ce = P == null ? void 0 : P.lines.find((pe) => pe.paragraphIndex === (b == null ? void 0 : b.paragraphIndex) && pe.paragraphStart)) != null ? ce : P == null ? void 0 : P.lines[0], F = (Se = P == null ? void 0 : P.parent) == null ? void 0 : Se.parent;
+    if (b == null || P == null || V == null || F == null)
       return;
     this._liquid.reset();
     const K = F.type;
     for (const pe of o) {
-      const { headerId: ht, footerId: ft, pageHeight: En, pageWidth: bt, marginLeft: Ct, marginBottom: Rn } = pe, An = o.indexOf(pe);
+      const { headerId: ft, footerId: pt, pageHeight: En, pageWidth: Ct, marginLeft: Et, marginBottom: Rn } = pe, An = o.indexOf(pe);
       if (x > -1 && An === x) {
         switch (K) {
           case Ut.HEADER: {
-            const Ge = (De = c.get(ht)) == null ? void 0 : De.get(bt);
+            const Ge = (De = c.get(ft)) == null ? void 0 : De.get(Ct);
             if (Ge)
               this._liquid.translatePagePadding({
                 marginTop: Ge.marginTop,
-                marginLeft: Ct
+                marginLeft: Et
               });
             else
               throw new Error("header skeleton not found");
             break;
           }
           case Ut.FOOTER: {
-            const Ge = (be = d.get(ft)) == null ? void 0 : be.get(bt);
+            const Ge = (be = d.get(pt)) == null ? void 0 : be.get(Ct);
             if (Ge)
               this._liquid.translatePagePadding({
                 marginTop: En - Rn + Ge.marginTop,
-                marginLeft: Ct
+                marginLeft: Et
               });
             else
               throw new Error("footer skeleton not found");
@@ -2342,10 +1662,10 @@ let ct = class extends xe {
         break;
       this._liquid.restorePagePadding(pe), this._liquid.translatePage(pe, f, h, m);
     }
-    switch (A.relativeFrom === W.LINE ? N = b.divides[0].glyphGroup[0] : N = (ge = (de = (Oe = (Ce = j.divides) == null ? void 0 : Ce[0]) == null ? void 0 : Oe.glyphGroup) == null ? void 0 : de[0]) != null ? ge : N, I.positionH = {
-      relativeFrom: L.relativeFrom,
+    switch (A.relativeFrom === W.LINE ? N = b.divides[0].glyphGroup[0] : N = (ge = (de = (Oe = (Ce = V.divides) == null ? void 0 : Ce[0]) == null ? void 0 : Oe.glyphGroup) == null ? void 0 : de[0]) != null ? ge : N, I.positionH = {
+      relativeFrom: U.relativeFrom,
       posOffset: D - this._liquid.x - p
-    }, L.relativeFrom) {
+    }, U.relativeFrom) {
       case J.MARGIN: {
         I.positionH.posOffset = D - this._liquid.x - p - F.marginLeft;
         break;
@@ -2357,339 +1677,872 @@ let ct = class extends xe {
     }
     switch (I.positionV = {
       relativeFrom: A.relativeFrom,
-      posOffset: S - this._liquid.y - w
+      posOffset: S - this._liquid.y - v
     }, A.relativeFrom) {
       case W.PAGE: {
-        I.positionV.posOffset = S - this._liquid.y - w - F.marginTop;
+        I.positionV.posOffset = S - this._liquid.y - v - F.marginTop;
+        break;
+      }
+      case W.LINE: {
+        I.positionV.posOffset = S - this._liquid.y - v - b.top;
+        break;
+      }
+      case W.PARAGRAPH: {
+        I.positionV.posOffset = S - this._liquid.y - v - V.top;
+        break;
+      }
+    }
+    if (N == null)
+      return;
+    const oe = i == null ? void 0 : i.findPositionByGlyph(N, x), Ne = this._getDocObject();
+    if (oe == null || i == null || Ne == null || Xt(oe))
+      return;
+    const Me = {
+      ...oe,
+      isBack: G
+    }, He = Ne.document.getOffsetConfig(), ae = new Pt(He, i), { cursorList: ne } = ae.getRangePointData(Me, Me), { startOffset: ie } = (Ee = xt(ne)) != null ? Ee : {};
+    if (ie != null)
+      return { offset: ie, docTransform: I, segmentId: H, segmentPage: x };
+  }
+  // Update drawing when use transformer to resize it.
+  _updateDrawingSize(e, t) {
+    const n = [], { drawing: i, width: s, height: o, angle: c } = e, { unitId: d, subUnitId: a } = i;
+    let { width: g, height: u, angle: l } = t;
+    const { width: f, height: h } = this._getPageContentSize(i);
+    g = Math.min(f, g), u = Math.min(h, u), (g !== s || u !== o) && n.push({
+      drawingId: i.drawingId,
+      key: "size",
+      value: {
+        width: g,
+        height: u
+      }
+    }), l !== c && n.push({
+      drawingId: i.drawingId,
+      key: "angle",
+      value: l
+    }), n.length > 0 && d && a && this._commandService.executeCommand(Ke.id, {
+      unitId: d,
+      subUnitId: a,
+      drawings: n
+    });
+  }
+  // Update inline drawing when use transformer to move it.
+  _moveInlineDrawing(e, t, n) {
+    const i = this._getInlineDrawingAnchor(e, t, n), { offset: s, segmentId: o, segmentPage: c } = i != null ? i : {};
+    return this._commandService.executeCommand(_n.id, {
+      unitId: e.unitId,
+      subUnitId: e.unitId,
+      drawing: e,
+      offset: s,
+      segmentId: o,
+      segmentPage: c,
+      needRefreshDrawings: s == null
+    });
+  }
+  // Limit the drawing to the page area, mainly in the vertical direction,
+  // and the upper and lower limits cannot exceed the page margin area.
+  _limitDrawingInPage(e, t) {
+    const n = this._renderManagerService.getRenderById(e.unitId), { left: i, top: s, width: o, height: c, angle: d } = t, a = n == null ? void 0 : n.with(te).getSkeleton(), g = a == null ? void 0 : a.getSkeletonData(), { pages: u } = g != null ? g : {};
+    if (g == null || n == null || u == null)
+      return {
+        left: i,
+        top: s,
+        width: o,
+        height: c,
+        angle: d
+      };
+    const { mainComponent: l } = n, f = l, { top: h, pageLayoutType: m, pageMarginLeft: p, pageMarginTop: v } = f;
+    let D = s;
+    this._liquid.reset();
+    for (const S of u) {
+      const { marginBottom: O, pageHeight: C } = S, M = u.indexOf(S), A = u[M + 1];
+      if (A == null)
+        continue;
+      if (Ae.hasIntersectionBetweenTwoRanges(
+        s,
+        s + c,
+        this._liquid.y + h + C - O,
+        this._liquid.y + h + C + v + A.marginTop
+      )) {
+        const R = s + c / 2, w = this._liquid.y + h + C + v / 2;
+        R < w ? D = Math.min(s, this._liquid.y + h + C - O - c) : D = Math.max(s, this._liquid.y + h + C + v + A.marginTop);
+      }
+      this._liquid.translatePage(S, m, p, v);
+    }
+    return {
+      left: i,
+      top: D,
+      width: o,
+      height: c,
+      angle: d
+    };
+  }
+  _nonInlineDrawingTransform(e, t, n = !1) {
+    const i = e.isMultiTransform === se.TRUE ? t : this._limitDrawingInPage(e, t);
+    if (n && i.top !== t.top)
+      return;
+    const s = this._getDrawingAnchor(e, i), { offset: o, docTransform: c, segmentId: d, segmentPage: a } = s != null ? s : {};
+    return o == null || c == null ? this._updateMultipleDrawingDocTransform(/* @__PURE__ */ new Map([[e.drawingId, t]])) : this._commandService.executeCommand(Sn.id, {
+      unitId: e.unitId,
+      subUnitId: e.unitId,
+      drawing: e,
+      offset: o,
+      docTransform: c,
+      segmentId: d,
+      segmentPage: a
+    });
+  }
+  _getSceneAndTransformerByDrawingSearch(e) {
+    if (e == null)
+      return;
+    const t = this._renderManagerService.getRenderById(e), n = t == null ? void 0 : t.scene;
+    if (n == null)
+      return;
+    const i = n.getTransformerByCreate();
+    return { scene: n, transformer: i };
+  }
+  _getTransformCoordForDocumentOffset(e, t, n, i) {
+    const { documentTransform: s } = e.getOffsetConfig(), o = t.transformVector2SceneCoord(si.FromArray([n, i]));
+    if (o)
+      return s.clone().invert().applyPoint(o);
+  }
+  _createOrUpdateInlineAnchor(e, t) {
+    const n = this._renderManagerService.getRenderById(e);
+    if (n == null)
+      return;
+    const { mainComponent: i, scene: s } = n, o = i, {
+      docsLeft: c,
+      docsTop: d
+    } = o.getOffsetConfig(), a = Jn(t), { left: g, top: u, height: l } = a, f = g + c, h = u + d;
+    if (this._anchorShape) {
+      this._anchorShape.transformByState({ left: f, top: h, height: l }), this._anchorShape.show();
+      return;
+    }
+    const m = 6, p = new oi(sr + Qt(m), {
+      left: f,
+      top: h,
+      height: l,
+      strokeWidth: 2,
+      stroke: ai(Wn.darkgray, 1),
+      evented: !1
+    });
+    this._anchorShape = p, s.addObject(p, ei);
+  }
+  _getDocObject() {
+    return ti(this._univerInstanceService, this._renderManagerService);
+  }
+  _getPageContentSize(e) {
+    const t = this._renderManagerService.getRenderById(e.unitId), n = t == null ? void 0 : t.with(te).getSkeleton(), i = 500, s = 500, o = n == null ? void 0 : n.getSkeletonData();
+    if (o == null || t == null)
+      return {
+        width: i,
+        height: s
+      };
+    const { pages: c } = o;
+    let d = null;
+    for (const a of c) {
+      const { skeDrawings: g } = a;
+      if (g.has(e.drawingId)) {
+        d = a;
+        break;
+      }
+    }
+    if (d) {
+      const { pageWidth: a, pageHeight: g, marginLeft: u, marginBottom: l, marginRight: f, marginTop: h } = d;
+      return {
+        width: Math.max(i, a - u - f),
+        height: Math.max(s, g - h - l)
+      };
+    } else
+      return {
+        width: i,
+        height: s
+      };
+  }
+};
+ct = rr([
+  Je(0, j),
+  Je(1, z),
+  Je(2, fe),
+  Je(3, Q)
+], ct);
+const or = {
+  [Ti.MEDIA]: {
+    [Mn]: {
+      order: 0,
+      menuItemFactory: $i,
+      [bn]: {
+        order: 0,
+        menuItemFactory: zi
+      }
+    }
+  }
+}, qt = -1e3, Kt = 1e3, ar = (r) => {
+  const e = ve(j), t = ve(lt), n = ve(fe), i = ve(Q), s = ve(z), { drawings: o } = r, c = o[0];
+  if (c == null)
+    return;
+  const { unitId: d } = c, a = s.getUniverDocInstance(d), g = a == null ? void 0 : a.getSnapshot().documentStyle.documentFlavor, u = i.getRenderById(d), l = u == null ? void 0 : u.scene;
+  if (l == null)
+    return;
+  const f = l.getTransformerByCreate(), h = [{
+    label: t.t("image-position.column"),
+    value: String(J.COLUMN)
+  }, {
+    label: t.t("image-position.page"),
+    value: String(J.PAGE)
+  }, {
+    label: t.t("image-position.margin"),
+    value: String(J.MARGIN)
+  }], m = [{
+    label: t.t("image-position.line"),
+    value: String(W.LINE),
+    disabled: g === mt.MODERN
+  }, {
+    label: t.t("image-position.page"),
+    value: String(W.PAGE),
+    disabled: g === mt.MODERN
+  }, {
+    label: t.t("image-position.margin"),
+    value: String(W.MARGIN),
+    disabled: g === mt.MODERN
+  }, {
+    label: t.t("image-position.paragraph"),
+    value: String(W.PARAGRAPH)
+  }], [p, v] = re(!0), [D, S] = re({
+    relativeFrom: J.PAGE,
+    posOffset: 0
+  }), [O, C] = re({
+    relativeFrom: W.PAGE,
+    posOffset: 0
+  }), [M, A] = re(!0), [U, R] = re(!0);
+  function w(_, E) {
+    var b;
+    _ === "positionH" ? S(E) : C(E);
+    const T = n.getFocusDrawings();
+    if (T.length === 0)
+      return;
+    const L = T.map((P) => ({
+      unitId: P.unitId,
+      subUnitId: P.subUnitId,
+      drawingId: P.drawingId
+    }));
+    e.executeCommand(Ke.id, {
+      unitId: T[0].unitId,
+      subUnitId: T[0].unitId,
+      drawings: L.map((P) => ({
+        drawingId: P.drawingId,
+        key: _,
+        value: E
+      }))
+    });
+    const B = (b = i.getRenderById(d)) == null ? void 0 : b.with(ye);
+    B && B.blur(), f.refreshControls();
+  }
+  function N(_) {
+    var ie, Ie, _e;
+    const E = D.relativeFrom, T = D.posOffset, L = Number(_);
+    if (E === L)
+      return;
+    const B = n.getFocusDrawings();
+    if (B.length === 0)
+      return;
+    const b = B[0].drawingId, P = B[0].unitId;
+    let V = null, F = 0;
+    const K = (ie = i.getRenderById(P)) == null ? void 0 : ie.with(te).getSkeleton(), oe = K == null ? void 0 : K.getSkeletonData();
+    if (oe == null)
+      return;
+    const { pages: Ne, skeHeaders: Me, skeFooters: He } = oe;
+    for (const ce of Ne) {
+      const { marginLeft: Se, skeDrawings: De, headerId: be, footerId: Ce, pageWidth: Oe } = ce;
+      if (De.has(b)) {
+        V = De.get(b), F = Se;
         break;
       }
-      case W.LINE: {
-        I.positionV.posOffset = S - this._liquid.y - w - b.top;
+      const de = (Ie = Me.get(be)) == null ? void 0 : Ie.get(Oe);
+      if (de != null && de.skeDrawings.has(b)) {
+        V = de == null ? void 0 : de.skeDrawings.get(b), F = Se;
         break;
       }
-      case W.PARAGRAPH: {
-        I.positionV.posOffset = S - this._liquid.y - w - j.top;
+      const ge = (_e = He.get(Ce)) == null ? void 0 : _e.get(Oe);
+      if (ge != null && ge.skeDrawings.has(b)) {
+        V = ge == null ? void 0 : ge.skeDrawings.get(b), F = Se;
         break;
       }
     }
-    if (N == null)
+    if (V == null)
+      return;
+    let ae = 0;
+    E === J.COLUMN ? ae -= V.columnLeft : E === J.MARGIN && (ae -= F), L === J.COLUMN ? ae += V.columnLeft : L === J.MARGIN ? ae += F : J.PAGE;
+    const ne = {
+      relativeFrom: L,
+      posOffset: (T != null ? T : 0) - ae
+    };
+    w("positionH", ne);
+  }
+  function H(_) {
+    var De, be, Ce, Oe, de, ge;
+    const E = O.relativeFrom, T = O.posOffset, L = Number(_);
+    if (E === L)
+      return;
+    const B = n.getFocusDrawings();
+    if (B.length === 0)
       return;
-    const oe = i == null ? void 0 : i.findPositionByGlyph(N, x), Ue = this._getDocObject();
-    if (oe == null || i == null || Ue == null || qt(oe))
+    const { drawingId: b, unitId: P } = B[0], V = s.getUniverDocInstance(P), F = (De = i.getRenderById(P)) == null ? void 0 : De.with(te).getSkeleton(), K = (be = i.getRenderById(P)) == null ? void 0 : be.with(ye), oe = K == null ? void 0 : K.getSegment(), Ne = K == null ? void 0 : K.getSegmentPage(), Me = (Oe = (Ce = V == null ? void 0 : V.getSelfOrHeaderFooterModel(oe).getBody()) == null ? void 0 : Ce.customBlocks) == null ? void 0 : Oe.find((Ee) => Ee.blockId === b);
+    if (Me == null || F == null || K == null)
       return;
-    const ye = {
-      ...oe,
-      isBack: H
-    }, We = Ue.document.getOffsetConfig(), ae = new At(We, i), { cursorList: ne } = ae.getRangePointData(ye, ye), { startOffset: ie } = (Ee = Pt(ne)) != null ? Ee : {};
-    if (ie != null)
-      return { offset: ie, docTransform: I, segmentId: G, segmentPage: x };
+    const { startIndex: He } = Me, ae = F.findNodeByCharIndex(He, oe, Ne), ne = (de = ae == null ? void 0 : ae.parent) == null ? void 0 : de.parent, ie = ne == null ? void 0 : ne.parent, Ie = ie == null ? void 0 : ie.lines.find((Ee) => Ee.paragraphIndex === (ne == null ? void 0 : ne.paragraphIndex) && Ee.paragraphStart), _e = (ge = ie == null ? void 0 : ie.parent) == null ? void 0 : ge.parent;
+    if (ae == null || ne == null || Ie == null || ie == null || _e == null)
+      return;
+    let ce = 0;
+    E === W.PARAGRAPH ? ce -= Ie.top : E === W.LINE ? ce -= ne.top : E === W.PAGE && (ce += _e.marginTop), L === W.PARAGRAPH ? ce += Ie.top : L === W.LINE ? ce += ne.top : L === W.PAGE && (ce -= _e.marginTop);
+    const Se = {
+      relativeFrom: L,
+      posOffset: (T != null ? T : 0) - ce
+    };
+    w("positionV", Se);
   }
-  // Update drawing when use transformer to resize it.
-  _updateDrawingSize(e, t) {
-    const n = [], { drawing: i, width: s, height: o, angle: c } = e, { unitId: d, subUnitId: a } = i;
-    let { width: g, height: u, angle: l } = t;
-    const { width: f, height: h } = this._getPageContentSize(i);
-    g = Math.min(f, g), u = Math.min(h, u), (g !== s || u !== o) && n.push({
-      drawingId: i.drawingId,
-      key: "size",
-      value: {
-        width: g,
-        height: u
-      }
-    }), l !== c && n.push({
-      drawingId: i.drawingId,
-      key: "angle",
-      value: l
-    }), n.length > 0 && d && a && this._commandService.executeCommand(qe.id, {
-      unitId: d,
-      subUnitId: a,
-      drawings: n
-    });
+  function x(_) {
+    var P;
+    const E = a == null ? void 0 : a.getSnapshot(), T = (P = E == null ? void 0 : E.drawings) == null ? void 0 : P[_.drawingId];
+    if (T == null)
+      return;
+    const { layoutType: L } = T, {
+      positionH: B,
+      positionV: b
+    } = T.docTransform;
+    S(B), C(b), v(L === k.INLINE), A(b.relativeFrom === W.PARAGRAPH || b.relativeFrom === W.LINE);
   }
-  // Update inline drawing when use transformer to move it.
-  _moveInlineDrawing(e, t, n) {
-    const i = this._getInlineDrawingAnchor(e, t, n), { offset: s, segmentId: o, segmentPage: c } = i != null ? i : {};
-    return this._commandService.executeCommand(_n.id, {
-      unitId: e.unitId,
-      subUnitId: e.unitId,
-      drawing: e,
-      offset: s,
-      segmentId: o,
-      segmentPage: c,
-      needRefreshDrawings: s == null
-    });
+  function G() {
+    const _ = n.getFocusDrawings();
+    _.length !== 0 && x(_[0]);
   }
-  // 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, t) {
-    const n = this._renderManagerService.getRenderById(e.unitId), { left: i, top: s, width: o, height: c, angle: d } = t, a = n == null ? void 0 : n.with(te).getSkeleton(), g = a == null ? void 0 : a.getSkeletonData(), { pages: u } = g != null ? g : {};
-    if (g == null || n == null || u == null)
-      return {
-        left: i,
-        top: s,
-        width: o,
-        height: c,
-        angle: d
-      };
-    const { mainComponent: l } = n, f = l, { top: h, pageLayoutType: m, pageMarginLeft: p, pageMarginTop: w } = f;
-    let D = s;
-    this._liquid.reset();
-    for (const S of u) {
-      const { marginBottom: O, pageHeight: C } = S, y = u.indexOf(S), A = u[y + 1];
-      if (A == null)
-        continue;
-      if (Ae.hasIntersectionBetweenTwoRanges(
-        s,
-        s + c,
-        this._liquid.y + h + C - O,
-        this._liquid.y + h + C + w + A.marginTop
-      )) {
-        const R = s + c / 2, v = this._liquid.y + h + C + w / 2;
-        R < v ? D = Math.min(s, this._liquid.y + h + C - O - c) : D = Math.max(s, this._liquid.y + h + C + w + A.marginTop);
+  function I(_) {
+    A(_), H(String(_ ? W.PARAGRAPH : W.PAGE));
+  }
+  return yt(() => {
+    G();
+    const _ = n.focus$.subscribe((T) => {
+      if (T.length === 0) {
+        R(!1);
+        return;
       }
-      this._liquid.translatePage(S, m, p, w);
-    }
-    return {
-      left: i,
-      top: D,
-      width: o,
-      height: c,
-      angle: d
+      R(!0), x(T[0]);
+    }), E = e.onCommandExecuted(async (T) => {
+      T.id === ee.id && G();
+    });
+    return () => {
+      _.unsubscribe(), E.dispose();
     };
-  }
-  _nonInlineDrawingTransform(e, t, n = !1) {
-    const i = e.isMultiTransform === se.TRUE ? t : this._limitDrawingInPage(e, t);
-    if (n && i.top !== t.top)
+  }, []), /* @__PURE__ */ X(
+    "div",
+    {
+      className: sn("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", {
+        "univer-hidden": !U
+      }),
+      children: [
+        /* @__PURE__ */ y(
+          "header",
+          {
+            className: "univer-text-gray-600 dark:!univer-text-gray-200",
+            children: /* @__PURE__ */ y("div", { children: t.t("image-position.title") })
+          }
+        ),
+        /* @__PURE__ */ y(
+          "div",
+          {
+            className: "univer-text-gray-600 dark:!univer-text-gray-200",
+            children: /* @__PURE__ */ y("div", { children: t.t("image-position.horizontal") })
+          }
+        ),
+        /* @__PURE__ */ X(
+          "div",
+          {
+            className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+            children: [
+              /* @__PURE__ */ X("div", { children: [
+                /* @__PURE__ */ y("span", { children: t.t("image-position.absolutePosition") }),
+                /* @__PURE__ */ y(
+                  Ue,
+                  {
+                    min: qt,
+                    max: Kt,
+                    precision: 1,
+                    disabled: p,
+                    value: D.posOffset,
+                    onChange: (_) => {
+                      w("positionH", {
+                        relativeFrom: D.relativeFrom,
+                        posOffset: _
+                      });
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ X("div", { children: [
+                /* @__PURE__ */ y("span", { children: t.t("image-position.toTheRightOf") }),
+                /* @__PURE__ */ y(
+                  Ft,
+                  {
+                    value: String(D.relativeFrom),
+                    disabled: p,
+                    options: h,
+                    onChange: N
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ y(
+          "div",
+          {
+            className: "univer-text-gray-600 dark:!univer-text-gray-200",
+            children: /* @__PURE__ */ y("div", { children: t.t("image-position.vertical") })
+          }
+        ),
+        /* @__PURE__ */ X(
+          "div",
+          {
+            className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+            children: [
+              /* @__PURE__ */ X("div", { children: [
+                /* @__PURE__ */ y("span", { children: t.t("image-position.absolutePosition") }),
+                /* @__PURE__ */ y(
+                  Ue,
+                  {
+                    min: qt,
+                    max: Kt,
+                    precision: 1,
+                    disabled: p,
+                    value: O.posOffset,
+                    onChange: (_) => {
+                      w("positionV", {
+                        relativeFrom: O.relativeFrom,
+                        posOffset: _
+                      });
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ X("div", { children: [
+                /* @__PURE__ */ y("span", { children: t.t("image-position.bellow") }),
+                /* @__PURE__ */ y(
+                  Ft,
+                  {
+                    disabled: p,
+                    value: String(O.relativeFrom),
+                    options: m,
+                    onChange: H
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ y(
+          "div",
+          {
+            className: "univer-text-gray-600 dark:!univer-text-gray-200",
+            children: /* @__PURE__ */ y("div", { children: t.t("image-position.options") })
+          }
+        ),
+        /* @__PURE__ */ y("div", { children: /* @__PURE__ */ y(
+          li,
+          {
+            disabled: p,
+            checked: M,
+            onChange: I,
+            children: t.t("image-position.moveObjectWithText")
+          }
+        ) })
+      ]
+    }
+  );
+}, et = 0, tt = 100, cr = (r) => {
+  const e = ve(j), t = ve(lt), n = ve(fe), i = ve(Q), s = ve(z), { drawings: o } = r, c = o[0];
+  if (c == null)
+    return null;
+  const { unitId: d } = c, a = s.getUniverDocInstance(d), g = i.getRenderById(d);
+  if ((g == null ? void 0 : g.scene) == null)
+    return null;
+  const [l, f] = re(!0), [h, m] = re(!0), [p, v] = re(!0), [D, S] = re(ue.INLINE), [O, C] = re(""), [M, A] = re({
+    distT: 0,
+    distL: 0,
+    distB: 0,
+    distR: 0
+  }), [U, R] = re(!0);
+  function w(I) {
+    S(I);
+    const _ = n.getFocusDrawings();
+    if (_.length === 0)
       return;
-    const s = this._getDrawingAnchor(e, i), { offset: o, docTransform: c, segmentId: d, segmentPage: a } = s != null ? s : {};
-    return o == null || c == null ? this._updateMultipleDrawingDocTransform(/* @__PURE__ */ new Map([[e.drawingId, t]])) : this._commandService.executeCommand(Sn.id, {
-      unitId: e.unitId,
-      subUnitId: e.unitId,
-      drawing: e,
-      offset: o,
-      docTransform: c,
-      segmentId: d,
-      segmentPage: a
+    const { unitId: E, subUnitId: T } = _[0], L = _.map(({ unitId: B, subUnitId: b, drawingId: P }) => ({
+      unitId: B,
+      subUnitId: b,
+      drawingId: P
+    }));
+    e.executeCommand(vn.id, {
+      unitId: E,
+      subUnitId: T,
+      drawings: L,
+      wrappingStyle: I
+    });
+  }
+  function N(I) {
+    C(I);
+    const _ = n.getFocusDrawings();
+    if (_.length === 0)
+      return;
+    const E = _.map((T) => ({
+      unitId: T.unitId,
+      subUnitId: T.subUnitId,
+      drawingId: T.drawingId
+    }));
+    e.executeCommand(In.id, {
+      unitId: _[0].unitId,
+      subUnitId: _[0].unitId,
+      drawings: E,
+      wrapText: I
     });
   }
-  _getSceneAndTransformerByDrawingSearch(e) {
-    if (e == null)
+  function H(I, _) {
+    if (I == null)
       return;
-    const t = this._renderManagerService.getRenderById(e), n = t == null ? void 0 : t.scene;
-    if (n == null)
+    const E = { ...M, [_]: I };
+    A(E);
+    const T = n.getFocusDrawings();
+    if (T.length === 0)
       return;
-    const i = n.getTransformerByCreate();
-    return { scene: n, transformer: i };
+    const L = T.map((B) => ({
+      unitId: B.unitId,
+      subUnitId: B.subUnitId,
+      drawingId: B.drawingId
+    }));
+    e.executeCommand(wn.id, {
+      unitId: T[0].unitId,
+      subUnitId: T[0].unitId,
+      drawings: L,
+      dist: {
+        [_]: I
+      }
+    });
   }
-  _getTransformCoordForDocumentOffset(e, t, n, i) {
-    const { documentTransform: s } = e.getOffsetConfig(), o = t.transformVector2SceneCoord(si.FromArray([n, i]));
-    if (o)
-      return s.clone().invert().applyPoint(o);
+  function x() {
+    const I = n.getFocusDrawings();
+    I.length !== 0 && G(I[0]);
   }
-  _createOrUpdateInlineAnchor(e, t) {
-    const n = this._renderManagerService.getRenderById(e);
-    if (n == null)
-      return;
-    const { mainComponent: i, scene: s } = n, o = i, {
-      docsLeft: c,
-      docsTop: d
-    } = o.getOffsetConfig(), a = Jn(t), { left: g, top: u, height: l } = a, f = g + c, h = u + d;
-    if (this._anchorShape) {
-      this._anchorShape.transformByState({ left: f, top: h, height: l }), this._anchorShape.show();
+  function G(I) {
+    var K, oe;
+    const _ = (oe = (K = a == null ? void 0 : a.getSnapshot()) == null ? void 0 : K.drawings) == null ? void 0 : oe[I.drawingId];
+    if (_ == null)
       return;
+    const {
+      distT: E = 0,
+      distL: T = 0,
+      distB: L = 0,
+      distR: B = 0,
+      layoutType: b = k.INLINE,
+      behindDoc: P = se.FALSE,
+      wrapText: V = ze.BOTH_SIDES
+    } = _;
+    if (A({
+      distT: E,
+      distL: T,
+      distB: L,
+      distR: B
+    }), C(V), f(b !== k.WRAP_SQUARE), b === k.WRAP_NONE || b === k.INLINE ? m(!0) : m(!1), b === k.WRAP_NONE || b === k.INLINE || b === k.WRAP_TOP_AND_BOTTOM ? v(!0) : v(!1), b === k.WRAP_NONE)
+      P === se.TRUE ? S(ue.BEHIND_TEXT) : S(ue.IN_FRONT_OF_TEXT);
+    else
+      switch (b) {
+        case k.INLINE:
+          S(ue.INLINE);
+          break;
+        case k.WRAP_SQUARE:
+          S(ue.WRAP_SQUARE);
+          break;
+        case k.WRAP_TOP_AND_BOTTOM:
+          S(ue.WRAP_TOP_AND_BOTTOM);
+          break;
+        default:
+          throw new Error(`Unsupported layout type: ${b}`);
+      }
+  }
+  return yt(() => {
+    x();
+    const I = n.focus$.subscribe((E) => {
+      if (E.length === 0) {
+        R(!1);
+        return;
+      }
+      R(!0), G(E[0]);
+    }), _ = e.onCommandExecuted(async (E) => {
+      E.id === ee.id && x();
+    });
+    return () => {
+      I.unsubscribe(), _.dispose();
+    };
+  }, []), /* @__PURE__ */ X(
+    "div",
+    {
+      className: sn("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", {
+        "univer-hidden": !U
+      }),
+      children: [
+        /* @__PURE__ */ y(
+          "header",
+          {
+            className: "univer-text-gray-600 dark:!univer-text-gray-200",
+            children: /* @__PURE__ */ y("div", { children: t.t("image-text-wrap.title") })
+          }
+        ),
+        /* @__PURE__ */ y(
+          "div",
+          {
+            className: "univer-text-gray-600 dark:!univer-text-gray-200",
+            children: /* @__PURE__ */ y("div", { children: t.t("image-text-wrap.wrappingStyle") })
+          }
+        ),
+        /* @__PURE__ */ y("div", { children: /* @__PURE__ */ X(kt, { value: D, onChange: w, direction: "vertical", children: [
+          /* @__PURE__ */ y(Te, { value: ue.INLINE, children: t.t("image-text-wrap.inline") }),
+          /* @__PURE__ */ y(Te, { value: ue.WRAP_SQUARE, children: t.t("image-text-wrap.square") }),
+          /* @__PURE__ */ y(Te, { value: ue.WRAP_TOP_AND_BOTTOM, children: t.t("image-text-wrap.topAndBottom") }),
+          /* @__PURE__ */ y(Te, { value: ue.BEHIND_TEXT, children: t.t("image-text-wrap.behindText") }),
+          /* @__PURE__ */ y(Te, { value: ue.IN_FRONT_OF_TEXT, children: t.t("image-text-wrap.inFrontText") })
+        ] }) }),
+        /* @__PURE__ */ y(
+          "div",
+          {
+            className: "univer-text-gray-600 dark:!univer-text-gray-200",
+            children: /* @__PURE__ */ y("div", { children: t.t("image-text-wrap.wrapText") })
+          }
+        ),
+        /* @__PURE__ */ y("div", { children: /* @__PURE__ */ X(kt, { disabled: l, value: O, onChange: N, direction: "horizontal", children: [
+          /* @__PURE__ */ y(Te, { value: ze.BOTH_SIDES, children: t.t("image-text-wrap.bothSide") }),
+          /* @__PURE__ */ y(Te, { value: ze.LEFT, children: t.t("image-text-wrap.leftOnly") }),
+          /* @__PURE__ */ y(Te, { value: ze.RIGHT, children: t.t("image-text-wrap.rightOnly") })
+        ] }) }),
+        /* @__PURE__ */ y(
+          "div",
+          {
+            className: "univer-text-gray-600 dark:!univer-text-gray-200",
+            children: /* @__PURE__ */ y("div", { children: t.t("image-text-wrap.distanceFromText") })
+          }
+        ),
+        /* @__PURE__ */ X(
+          "div",
+          {
+            className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+            children: [
+              /* @__PURE__ */ X("div", { children: [
+                /* @__PURE__ */ y("span", { children: t.t("image-text-wrap.top") }),
+                /* @__PURE__ */ y(
+                  Ue,
+                  {
+                    min: et,
+                    max: tt,
+                    disabled: h,
+                    precision: 1,
+                    value: M.distT,
+                    onChange: (I) => {
+                      H(I, "distT");
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ X("div", { children: [
+                /* @__PURE__ */ y("span", { children: t.t("image-text-wrap.left") }),
+                /* @__PURE__ */ y(
+                  Ue,
+                  {
+                    min: et,
+                    max: tt,
+                    disabled: p,
+                    precision: 1,
+                    value: M.distL,
+                    onChange: (I) => {
+                      H(I, "distL");
+                    }
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ X(
+          "div",
+          {
+            className: "univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+            children: [
+              /* @__PURE__ */ X("div", { children: [
+                /* @__PURE__ */ y("span", { children: t.t("image-text-wrap.bottom") }),
+                /* @__PURE__ */ y(
+                  Ue,
+                  {
+                    min: et,
+                    max: tt,
+                    disabled: h,
+                    precision: 1,
+                    value: M.distB,
+                    onChange: (I) => {
+                      H(I, "distB");
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ X("div", { children: [
+                /* @__PURE__ */ y("span", { children: t.t("image-text-wrap.right") }),
+                /* @__PURE__ */ y(
+                  Ue,
+                  {
+                    min: et,
+                    max: tt,
+                    disabled: p,
+                    precision: 1,
+                    value: M.distR,
+                    onChange: (I) => {
+                      H(I, "distR");
+                    }
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
     }
-    const m = 6, p = new oi(fr + Qt(m), {
-      left: f,
-      top: h,
-      height: l,
-      strokeWidth: 2,
-      stroke: ai(Hn.darkgray, 1),
-      evented: !1
+  );
+}, dr = () => {
+  const r = ve(fe), e = r.getFocusDrawings(), [t, n] = re(e);
+  return yt(() => {
+    const i = r.focus$.subscribe((s) => {
+      n(s);
     });
-    this._anchorShape = p, s.addObject(p, ei);
+    return () => {
+      i.unsubscribe();
+    };
+  }, []), !!(t != null && t.length) && /* @__PURE__ */ X("div", { className: "univer-text-sm", children: [
+    /* @__PURE__ */ y(Ai, { drawings: t, hasAlign: !1, hasCropper: !1, hasGroup: !1, hasTransform: !1 }),
+    /* @__PURE__ */ y(cr, { drawings: t }),
+    /* @__PURE__ */ y(ar, { drawings: t })
+  ] });
+};
+function Ze(r) {
+  return r.getContextValue(Hn) && r.getContextValue(Gn) && r.getContextValue(it);
+}
+const gr = {
+  id: Ye.id,
+  description: "shortcut.drawing-move-down",
+  group: "4_drawing-view",
+  binding: Fe.ARROW_DOWN,
+  priority: 100,
+  preconditions: Ze,
+  staticParameters: {
+    direction: he.DOWN
   }
-  _getDocObject() {
-    return ti(this._univerInstanceService, this._renderManagerService);
+}, lr = {
+  id: Ye.id,
+  description: "shortcut.drawing-move-up",
+  group: "4_drawing-view",
+  binding: Fe.ARROW_UP,
+  priority: 100,
+  preconditions: Ze,
+  staticParameters: {
+    direction: he.UP
   }
-  _getPageContentSize(e) {
-    const t = this._renderManagerService.getRenderById(e.unitId), n = t == null ? void 0 : t.with(te).getSkeleton(), i = 500, s = 500, o = n == null ? void 0 : n.getSkeletonData();
-    if (o == null || t == null)
-      return {
-        width: i,
-        height: s
-      };
-    const { pages: c } = o;
-    let d = null;
-    for (const a of c) {
-      const { skeDrawings: g } = a;
-      if (g.has(e.drawingId)) {
-        d = a;
-        break;
-      }
-    }
-    if (d) {
-      const { pageWidth: a, pageHeight: g, marginLeft: u, marginBottom: l, marginRight: f, marginTop: h } = d;
-      return {
-        width: Math.max(i, a - u - f),
-        height: Math.max(s, g - h - l)
-      };
-    } else
-      return {
-        width: i,
-        height: s
-      };
+}, ur = {
+  id: Ye.id,
+  description: "shortcut.drawing-move-left",
+  group: "4_drawing-view",
+  binding: Fe.ARROW_LEFT,
+  priority: 100,
+  preconditions: Ze,
+  staticParameters: {
+    direction: he.LEFT
+  }
+}, hr = {
+  id: Ye.id,
+  description: "shortcut.drawing-move-right",
+  group: "4_drawing-view",
+  binding: Fe.ARROW_RIGHT,
+  priority: 100,
+  preconditions: Ze,
+  staticParameters: {
+    direction: he.RIGHT
   }
+}, fr = {
+  id: ln.id,
+  description: "shortcut.drawing-delete",
+  group: "4_drawing-view",
+  // when focusing on any other input tag do not trigger this shortcut
+  preconditions: Ze,
+  binding: Fe.DELETE,
+  mac: Fe.BACKSPACE
 };
-ct = hr([
-  tt(0, V),
-  tt(1, z),
-  tt(2, fe),
-  tt(3, Q)
-], ct);
 var pr = Object.getOwnPropertyDescriptor, mr = (r, e, t, n) => {
   for (var i = n > 1 ? void 0 : n ? pr(e, t) : e, s = r.length - 1, o; s >= 0; s--)
     (o = r[s]) && (i = o(i) || i);
   return i;
-}, je = (r, e) => (t, n) => e(t, n, r);
-let dt = class extends Vn {
-  constructor(e, t, n, i, s) {
-    super();
-    me(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
-    me(this, "_disposePopups", []);
-    this._drawingManagerService = e, this._canvasPopManagerService = t, this._renderManagerService = n, this._univerInstanceService = i, this._contextService = s, this._init();
-  }
-  _init() {
-    this.disposeWithMe(
-      this._univerInstanceService.getCurrentTypeOfUnit$(ve.UNIVER_DOC).pipe(Vt(this.dispose$)).subscribe((e) => this._create(e))
-    ), this.disposeWithMe(
-      this._univerInstanceService.getTypeOfUnitDisposed$(ve.UNIVER_DOC).pipe(Vt(this.dispose$)).subscribe((e) => this._dispose(e))
-    ), this._univerInstanceService.getAllUnitsForType(ve.UNIVER_DOC).forEach((e) => this._create(e));
+}, nt = (r, e) => (t, n) => e(t, n, r);
+let dt = class extends xe {
+  constructor(r, e, t, n) {
+    super(), this._componentManager = r, this._menuManagerService = e, this._commandService = t, this._shortcutService = n, this._init();
   }
-  _dispose(e) {
-    const t = e.getUnitId();
-    this._disposePopups.length && (this._disposePopups.forEach((n) => n.dispose()), this._disposePopups.length = 0), this._renderManagerService.removeRender(t);
+  _initCustomComponents() {
+    const r = this._componentManager;
+    this.disposeWithMe(r.register(Dn, dr));
   }
-  _create(e) {
-    if (!e)
-      return;
-    const t = e.getUnitId();
-    jn(t) || this._renderManagerService.has(t) && !this._initImagePopupMenu.has(t) && (this._popupMenuListener(t), this._initImagePopupMenu.add(t));
+  _initMenus() {
+    this._menuManagerService.mergeMenu(or);
   }
-  _hasCropObject(e) {
-    const t = e.getAllObjects();
-    for (const n of t)
-      if (n instanceof Pi)
-        return !0;
-    return !1;
+  _initCommands() {
+    [
+      pn,
+      bt,
+      vn,
+      wn,
+      In,
+      Ke,
+      _n,
+      Sn,
+      Mt,
+      On,
+      Hi,
+      Tn,
+      un,
+      fn,
+      Ye,
+      ln,
+      hn
+    ].forEach((r) => this.disposeWithMe(this._commandService.registerCommand(r)));
   }
-  // eslint-disable-next-line max-lines-per-function
-  _popupMenuListener(e) {
-    var s;
-    const t = (s = this._renderManagerService.getRenderById(e)) == null ? void 0 : s.scene;
-    if (!t)
-      return;
-    const n = t.getTransformerByCreate();
-    if (!n)
-      return;
-    const i = this._disposePopups;
-    this.disposeWithMe(
-      n.createControl$.subscribe(
-        () => {
-          if (this._hasCropObject(t))
-            return;
-          const o = n.getSelectedObjectMap();
-          if (i.forEach((w) => w.dispose()), i.length = 0, o.size > 1)
-            return;
-          const c = o.values().next().value;
-          if (!c)
-            return;
-          const d = c.oKey, a = this._drawingManagerService.getDrawingOKey(d);
-          if (!a || a.drawingType === Pe.DRAWING_DOM)
-            return;
-          const { unitId: g, subUnitId: u, drawingId: l, drawingType: f } = a, h = this._canvasPopManagerService.attachPopupToObject(
-            c,
-            {
-              componentKey: xi,
-              direction: "horizontal",
-              offset: [2, 0],
-              extraProps: {
-                menuItems: this._getImageMenuItems(g, u, l, f)
-              }
-            },
-            g
-          );
-          i.push(this.disposeWithMe(h)), !this._drawingManagerService.getFocusDrawings().find((w) => w.unitId === g && w.subUnitId === u && w.drawingId === l) && this._drawingManagerService.focusDrawing([{
-            unitId: g,
-            subUnitId: u,
-            drawingId: l
-          }]);
-        }
-      )
-    ), this.disposeWithMe(
-      n.clearControl$.subscribe(() => {
-        i.forEach((o) => o.dispose()), i.length = 0, this._contextService.setContextValue(nt, !1), this._drawingManagerService.focusDrawing(null);
-      })
-    ), this.disposeWithMe(
-      n.changing$.subscribe(
-        () => {
-          i.forEach((o) => o.dispose()), i.length = 0;
-        }
-      )
-    ), this.disposeWithMe(
-      n.changeStart$.subscribe(() => {
-        i.forEach((o) => o.dispose()), i.length = 0;
-      })
-    );
+  _initShortcuts() {
+    [
+      // sheet drawing shortcuts
+      gr,
+      lr,
+      ur,
+      hr,
+      fr
+    ].forEach((r) => {
+      this.disposeWithMe(this._shortcutService.registerShortcut(r));
+    });
   }
-  _getImageMenuItems(e, t, n, i) {
-    return [
-      {
-        label: "image-popup.edit",
-        index: 0,
-        commandId: Tn.id,
-        commandParams: { unitId: e, subUnitId: t, drawingId: n },
-        // disable: !!SHEET_EDITOR_UNITS.includes(unitId) || drawingType === DrawingTypeEnum.DRAWING_DOM,
-        disable: !0
-      },
-      {
-        label: "image-popup.delete",
-        index: 1,
-        commandId: Mt.id,
-        commandParams: { unitId: e, drawings: [{ unitId: e, subUnitId: t, drawingId: n }] },
-        disable: !1
-      },
-      {
-        label: "image-popup.crop",
-        index: 2,
-        commandId: Ni.id,
-        commandParams: { unitId: e, subUnitId: t, drawingId: n },
-        disable: !0
-        // TODO: @JOCS, feature is not ready.
-      },
-      {
-        label: "image-popup.reset",
-        index: 3,
-        commandId: Ui.id,
-        commandParams: [{ unitId: e, subUnitId: t, drawingId: n }],
-        disable: !0
-        // TODO: @JOCS, feature is not ready.
-      }
-    ];
+  _init() {
+    this._initCommands(), this._initCustomComponents(), this._initMenus(), this._initShortcuts();
   }
 };
 dt = mr([
-  je(0, fe),
-  je(1, Z(ni)),
-  je(2, Q),
-  je(3, z),
-  je(4, Yt)
+  nt(0, Z(cn)),
+  nt(1, yi),
+  nt(2, j),
+  nt(3, Mi)
 ], dt);
-var wr = Object.getOwnPropertyDescriptor, vr = (r, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? wr(e, t) : e, s = r.length - 1, o; s >= 0; s--)
+var vr = Object.getOwnPropertyDescriptor, wr = (r, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? vr(e, t) : e, s = r.length - 1, o; s >= 0; s--)
     (o = r[s]) && (i = o(i) || i);
   return i;
 }, Re = (r, e) => (t, n) => e(t, n, r);
-let It = class extends xe {
+let _t = class extends xe {
   constructor(e, t, n, i, s, o, c, d) {
     super();
     me(this, "_liquid", new rn());
@@ -2720,7 +2573,7 @@ let It = class extends xe {
           const c = this._docSkeletonManagerService.getSkeleton();
           if (c == null)
             return;
-          if (this._editorService.isEditor(s) && s !== St) {
+          if (this._editorService.isEditor(s) && s !== Dt) {
             o == null || o.makeDirty();
             return;
           }
@@ -2749,35 +2602,35 @@ let It = class extends xe {
     const { left: o, top: c, pageLayoutType: d, pageMarginLeft: a, pageMarginTop: g } = s, { pages: u, skeHeaders: l, skeFooters: f } = t, h = {};
     this._liquid.reset();
     for (let O = 0, C = u.length; O < C; O++) {
-      const y = u[O], { headerId: A, footerId: L, pageWidth: R } = y;
+      const M = u[O], { headerId: A, footerId: U, pageWidth: R } = M;
       if (A) {
-        const v = (D = l.get(A)) == null ? void 0 : D.get(R);
-        v && this._calculateDrawingPosition(
+        const w = (D = l.get(A)) == null ? void 0 : D.get(R);
+        w && this._calculateDrawingPosition(
           i,
-          v,
+          w,
           o,
           c,
           h,
-          v.marginTop,
-          y.marginLeft
+          w.marginTop,
+          M.marginLeft
         );
       }
-      if (L) {
-        const v = (S = f.get(L)) == null ? void 0 : S.get(R);
-        v && this._calculateDrawingPosition(
+      if (U) {
+        const w = (S = f.get(U)) == null ? void 0 : S.get(R);
+        w && this._calculateDrawingPosition(
           i,
-          v,
+          w,
           o,
           c,
           h,
-          y.pageHeight - y.marginBottom + v.marginTop,
-          y.marginLeft
+          M.pageHeight - M.marginBottom + w.marginTop,
+          M.marginLeft
         );
       }
-      this._calculateDrawingPosition(i, y, o, c, h, y.marginTop, y.marginLeft), this._liquid.translatePage(y, d, a, g);
+      this._calculateDrawingPosition(i, M, o, c, h, M.marginTop, M.marginLeft), this._liquid.translatePage(M, d, a, g);
     }
-    const m = Object.values(h), p = m.filter((O) => !O.isMultiTransform), w = m.filter((O) => O.isMultiTransform);
-    p.length > 0 && this._drawingManagerService.refreshTransform(p), this._handleMultiDrawingsTransform(w);
+    const m = Object.values(h), p = m.filter((O) => !O.isMultiTransform), v = m.filter((O) => O.isMultiTransform);
+    p.length > 0 && this._drawingManagerService.refreshTransform(p), this._handleMultiDrawingsTransform(v);
   }
   _handleMultiDrawingsTransform(e) {
     const { scene: t, unitId: n } = this._context, i = t.getTransformerByCreate();
@@ -2798,7 +2651,7 @@ let It = class extends xe {
       marginTop: o,
       marginLeft: c
     }), d.forEach((a) => {
-      const { aLeft: g, aTop: u, height: l, width: f, angle: h, drawingId: m, drawingOrigin: p } = a, w = p.layoutType === k.WRAP_NONE && p.behindDoc === se.TRUE, { isMultiTransform: D = se.FALSE } = p, S = {
+      const { aLeft: g, aTop: u, height: l, width: f, angle: h, drawingId: m, drawingOrigin: p } = a, v = p.layoutType === k.WRAP_NONE && p.behindDoc === se.TRUE, { isMultiTransform: D = se.FALSE } = p, S = {
         left: g + n + this._liquid.x,
         top: u + i + this._liquid.y,
         width: f,
@@ -2809,7 +2662,7 @@ let It = class extends xe {
         unitId: e,
         subUnitId: e,
         drawingId: m,
-        behindText: w,
+        behindText: v,
         transform: S,
         transforms: [S],
         isMultiTransform: D
@@ -2824,76 +2677,215 @@ let It = class extends xe {
       const t = this._docSkeletonManagerService.getSkeleton();
       t != null && (this._refreshDrawing(t), this._drawingManagerService.initializeNotification(this._context.unitId));
     };
-    this._lifecycleService.stage >= Rt.Rendered ? this._docSkeletonManagerService.getSkeleton() ? e() : setTimeout(e, 500) : this.disposeWithMe(this._lifecycleService.lifecycle$.pipe(jt((t) => t === Rt.Rendered)).subscribe(e));
+    this._lifecycleService.stage >= At.Rendered ? this._docSkeletonManagerService.getSkeleton() ? e() : setTimeout(e, 500) : this.disposeWithMe(this._lifecycleService.lifecycle$.pipe(jt((t) => t === At.Rendered)).subscribe(e));
   }
 };
-It = vr([
+_t = wr([
   Re(1, Z(te)),
-  Re(2, V),
-  Re(3, ii),
+  Re(2, j),
+  Re(3, ni),
   Re(4, fe),
   Re(5, Z(ut)),
   Re(6, z),
-  Re(7, Z($n))
-], It);
-var Ir = Object.defineProperty, _r = Object.getOwnPropertyDescriptor, Sr = (r, e, t) => e in r ? Ir(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, Dr = (r, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? _r(e, t) : e, s = r.length - 1, o; s >= 0; s--)
+  Re(7, Z(Vn))
+], _t);
+var Ir = Object.getOwnPropertyDescriptor, _r = (r, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? Ir(e, t) : e, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (i = o(i) || i);
+  return i;
+}, $e = (r, e) => (t, n) => e(t, n, r);
+let gt = class extends jn {
+  constructor(e, t, n, i, s) {
+    super();
+    me(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
+    me(this, "_disposePopups", []);
+    this._drawingManagerService = e, this._canvasPopManagerService = t, this._renderManagerService = n, this._univerInstanceService = i, this._contextService = s, this._init();
+  }
+  _init() {
+    this.disposeWithMe(
+      this._univerInstanceService.getCurrentTypeOfUnit$(we.UNIVER_DOC).pipe($t(this.dispose$)).subscribe((e) => this._create(e))
+    ), this.disposeWithMe(
+      this._univerInstanceService.getTypeOfUnitDisposed$(we.UNIVER_DOC).pipe($t(this.dispose$)).subscribe((e) => this._dispose(e))
+    ), this._univerInstanceService.getAllUnitsForType(we.UNIVER_DOC).forEach((e) => this._create(e));
+  }
+  _dispose(e) {
+    const t = e.getUnitId();
+    this._disposePopups.length && (this._disposePopups.forEach((n) => n.dispose()), this._disposePopups.length = 0), this._renderManagerService.removeRender(t);
+  }
+  _create(e) {
+    if (!e)
+      return;
+    const t = e.getUnitId();
+    $n(t) || this._renderManagerService.has(t) && !this._initImagePopupMenu.has(t) && (this._popupMenuListener(t), this._initImagePopupMenu.add(t));
+  }
+  _hasCropObject(e) {
+    const t = e.getAllObjects();
+    for (const n of t)
+      if (n instanceof Pi)
+        return !0;
+    return !1;
+  }
+  // eslint-disable-next-line max-lines-per-function
+  _popupMenuListener(e) {
+    var s;
+    const t = (s = this._renderManagerService.getRenderById(e)) == null ? void 0 : s.scene;
+    if (!t)
+      return;
+    const n = t.getTransformerByCreate();
+    if (!n)
+      return;
+    const i = this._disposePopups;
+    this.disposeWithMe(
+      n.createControl$.subscribe(
+        () => {
+          if (this._hasCropObject(t))
+            return;
+          const o = n.getSelectedObjectMap();
+          if (i.forEach((v) => v.dispose()), i.length = 0, o.size > 1)
+            return;
+          const c = o.values().next().value;
+          if (!c)
+            return;
+          const d = c.oKey, a = this._drawingManagerService.getDrawingOKey(d);
+          if (!a || a.drawingType === Pe.DRAWING_DOM)
+            return;
+          const { unitId: g, subUnitId: u, drawingId: l, drawingType: f } = a, h = this._canvasPopManagerService.attachPopupToObject(
+            c,
+            {
+              componentKey: xi,
+              direction: "horizontal",
+              offset: [2, 0],
+              extraProps: {
+                menuItems: this._getImageMenuItems(g, u, l, f)
+              }
+            },
+            g
+          );
+          i.push(this.disposeWithMe(h)), !this._drawingManagerService.getFocusDrawings().find((v) => v.unitId === g && v.subUnitId === u && v.drawingId === l) && this._drawingManagerService.focusDrawing([{
+            unitId: g,
+            subUnitId: u,
+            drawingId: l
+          }]);
+        }
+      )
+    ), this.disposeWithMe(
+      n.clearControl$.subscribe(() => {
+        i.forEach((o) => o.dispose()), i.length = 0, this._contextService.setContextValue(it, !1), this._drawingManagerService.focusDrawing(null);
+      })
+    ), this.disposeWithMe(
+      n.changing$.subscribe(
+        () => {
+          i.forEach((o) => o.dispose()), i.length = 0;
+        }
+      )
+    ), this.disposeWithMe(
+      n.changeStart$.subscribe(() => {
+        i.forEach((o) => o.dispose()), i.length = 0;
+      })
+    );
+  }
+  _getImageMenuItems(e, t, n, i) {
+    return [
+      {
+        label: "image-popup.edit",
+        index: 0,
+        commandId: Tn.id,
+        commandParams: { unitId: e, subUnitId: t, drawingId: n },
+        // disable: !!SHEET_EDITOR_UNITS.includes(unitId) || drawingType === DrawingTypeEnum.DRAWING_DOM,
+        disable: !0
+      },
+      {
+        label: "image-popup.delete",
+        index: 1,
+        commandId: Mt.id,
+        commandParams: { unitId: e, drawings: [{ unitId: e, subUnitId: t, drawingId: n }] },
+        disable: !1
+      },
+      {
+        label: "image-popup.crop",
+        index: 2,
+        commandId: Ni.id,
+        commandParams: { unitId: e, subUnitId: t, drawingId: n },
+        disable: !0
+        // TODO: @JOCS, feature is not ready.
+      },
+      {
+        label: "image-popup.reset",
+        index: 3,
+        commandId: Li.id,
+        commandParams: [{ unitId: e, subUnitId: t, drawingId: n }],
+        disable: !0
+        // TODO: @JOCS, feature is not ready.
+      }
+    ];
+  }
+};
+gt = _r([
+  $e(0, fe),
+  $e(1, Z(ii)),
+  $e(2, Q),
+  $e(3, z),
+  $e(4, Yt)
+], gt);
+var Sr = Object.defineProperty, Dr = Object.getOwnPropertyDescriptor, Or = (r, e, t) => e in r ? Sr(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, Tr = (r, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? Dr(e, t) : e, s = r.length - 1, o; s >= 0; s--)
     (o = r[s]) && (i = o(i) || i);
   return i;
-}, vt = (r, e) => (t, n) => e(t, n, r), Cn = (r, e, t) => Sr(r, typeof e != "symbol" ? e + "" : e, t);
-const Or = "DOC_DRAWING_UI_PLUGIN";
-let gt = class extends qn {
-  constructor(r = $t, e, t, n) {
+}, It = (r, e) => (t, n) => e(t, n, r), ht = (r, e, t) => Or(r, typeof e != "symbol" ? e + "" : e, t);
+let ke = class extends qn {
+  constructor(r = zt, e, t, n) {
     super(), this._config = r, this._injector = e, this._renderManagerSrv = t, this._configService = n;
     const { ...i } = Kn(
       {},
-      $t,
+      zt,
       this._config
     );
-    this._configService.setConfig(ji, i);
+    this._configService.setConfig(Ki, i);
   }
   onStarting() {
     [
-      [st],
       [dt],
+      [gt],
       [ct],
       [ot],
       [ut],
-      [rt],
+      [st],
       [at]
     ].forEach((e) => this._injector.add(e));
   }
   onReady() {
     [
-      [it],
-      [It]
-    ].forEach((r) => this._renderManagerSrv.registerRenderModule(ve.UNIVER_DOC, r)), this._injector.get(ot), this._injector.get(st), this._injector.get(ct), this._injector.get(at);
+      [rt],
+      [_t]
+    ].forEach((r) => this._renderManagerSrv.registerRenderModule(we.UNIVER_DOC, r)), this._injector.get(ot), this._injector.get(dt), this._injector.get(ct), this._injector.get(at);
   }
   onRendered() {
-    this._injector.get(dt), this._injector.get(rt);
+    this._injector.get(gt), this._injector.get(st);
   }
 };
-Cn(gt, "type", ve.UNIVER_DOC);
-Cn(gt, "pluginName", Or);
-gt = Dr([
-  zn(Li, wi, Yn, bi),
-  vt(1, Z(Jt)),
-  vt(2, Q),
-  vt(3, Xn)
-], gt);
+ht(ke, "type", we.UNIVER_DOC);
+ht(ke, "pluginName", "DOC_DRAWING_UI_PLUGIN");
+ht(ke, "packageName", Cn.name);
+ht(ke, "version", Cn.version);
+ke = Tr([
+  zn(Ui, vi, Yn, bi),
+  It(1, Z(Jt)),
+  It(2, Q),
+  It(3, Xn)
+], ke);
 export {
-  Gi as ClearDocDrawingTransformerOperation,
-  yn as DOCS_IMAGE_MENU_ID,
+  Hi as ClearDocDrawingTransformerOperation,
+  Mn as DOCS_IMAGE_MENU_ID,
   ln as DeleteDocDrawingsCommand,
-  rt as DocFloatDomController,
+  st as DocFloatDomController,
   Tn as EditDocDrawingOperation,
   un as GroupDocDrawingCommand,
-  yt as InsertDocDrawingCommand,
+  bt as InsertDocDrawingCommand,
   pn as InsertDocImageCommand,
-  Ke as MoveDocDrawingsCommand,
+  Ye as MoveDocDrawingsCommand,
   Mt as RemoveDocDrawingCommand,
   hn as SetDocDrawingArrangeCommand,
   On as SidebarDocDrawingOperation,
   fn as UngroupDocDrawingCommand,
-  gt as UniverDocsDrawingUIPlugin
+  ke as UniverDocsDrawingUIPlugin
 };