@univerjs/docs-drawing-ui 0.8.2 → 0.8.3-nightly.202506271607

package/lib/index.js

@@ -1,19 +1,19 @@
 var An = Object.defineProperty;
 var Pn = (i, e, t) => e in i ? An(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
 var ve = (i, e, t) => Pn(i, typeof e != "symbol" ? e + "" : e, t);
-import { CommandType as q, ICommandService as j, IUniverInstanceService as z, TextX as _t, JSONX as $, MemoryCursor as xn, TextXActionType as Y, IUndoRedoService as Kt, BuildTextUtils as Nn, ArrangeTypeEnum as Ze, Tools as Me, Inject as Z, IContextService as Yt, LocaleService as lt, Disposable as Ne, WrapTextType as ze, PositionedObjectLayoutType as k, BooleanNumber as oe, DrawingTypeEnum as xe, ObjectRelativeFromV as W, ObjectRelativeFromH as J, FOCUSING_COMMON_DRAWINGS as nt, UniverInstanceType as we, Direction as he, DocumentFlavor as pt, DOCS_ZEN_EDITOR_UNIT_ID_KEY as St, FOCUSING_UNIVER_EDITOR as Un, UndoCommand as Ln, RedoCommand as Bn, DisposableCollection as Fn, toDisposable as Se, fromEventSubject as Zt, generateRandomId as kn, Injector as Qt, DOC_DRAWING_PRINTING_COMPONENT_KEY as Wn, throttle as Et, COLORS as Gn, RxDisposable as Hn, LifecycleService as jn, LifecycleStages as Rt, DependentOn as Vn, IConfigService as $n, Plugin as zn, merge as Xn } from "@univerjs/core";
+import { CommandType as q, ICommandService as j, IUniverInstanceService as z, TextX as _t, JSONX as $, MemoryCursor as xn, TextXActionType as Y, IUndoRedoService as Kt, BuildTextUtils as Nn, ArrangeTypeEnum as Ze, Tools as Me, Inject as Z, IContextService as Yt, LocaleService as lt, Disposable as Ne, WrapTextType as ze, PositionedObjectLayoutType as k, BooleanNumber as oe, DrawingTypeEnum as xe, ObjectRelativeFromV as W, ObjectRelativeFromH as J, FOCUSING_COMMON_DRAWINGS as nt, UniverInstanceType as we, Direction as he, DisposableCollection as Un, toDisposable as Se, fromEventSubject as Zt, generateRandomId as Ln, DocumentFlavor as pt, DOCS_ZEN_EDITOR_UNIT_ID_KEY as St, FOCUSING_UNIVER_EDITOR as Bn, UndoCommand as Fn, RedoCommand as kn, Injector as Qt, DOC_DRAWING_PRINTING_COMPONENT_KEY as Wn, throttle as Et, COLORS as Gn, RxDisposable as Hn, LifecycleService as jn, LifecycleStages as Rt, DependentOn as Vn, IConfigService as $n, Plugin as zn, merge as Xn } from "@univerjs/core";
 import { IDocDrawingService as Ue, UniverDocsDrawingPlugin as qn } from "@univerjs/docs-drawing";
-import { IImageIoService as Kn, IDrawingManagerService as fe, DRAWING_IMAGE_ALLOW_IMAGE_LIST as Yn, DRAWING_IMAGE_COUNT_LIMIT as At, ImageUploadStatusType as mt, DRAWING_IMAGE_ALLOW_SIZE as Zn, getImageSize as Qn, getDrawingShapeKeyByDrawingSearch as Jn, DRAWING_IMAGE_WIDTH_LIMIT as Pt, DRAWING_IMAGE_HEIGHT_LIMIT as xt, UniverDrawingPlugin as er } from "@univerjs/drawing";
-import { DrawingCommonPanel as tr, DrawingRenderService as Jt, ImageCropperObject as nr, COMPONENT_IMAGE_POPUP_MENU as rr, OpenImageCropOperation as ir, ImageResetSizeOperation as or, UniverDrawingUIPlugin as sr } from "@univerjs/drawing-ui";
-import { IRenderManagerService as Q, DocumentEditArea as ke, getCurrentTypeOfRenderer as ar, CURSOR_TYPE as Nt, Liquid as en, PageLayoutType as Ut, DocumentSkeletonPageType as Lt, Vector2 as cr, Rect as dr, getColor as gr, TRANSFORM_CHANGE_OBSERVABLE_TYPE as lr } from "@univerjs/engine-render";
-import { IMessageService as ur, ILocalFileService as hr, ISidebarService as fr, useDependency as me, getMenuHiddenObservable as tn, MenuItemType as nn, RibbonInsertGroup as pr, KeyCode as We, ComponentManager as rn, IMenuManagerService as mr, IShortcutService as wr, CanvasFloatDomService as vr, PrintFloatDomSingle as Ir, connectInjector as _r, UniverUIPlugin as Sr } from "@univerjs/ui";
 import { RichTextEditingMutation as ee, DocSelectionManagerService as Dt, DocSkeletonManagerService as te } from "@univerjs/docs";
-import { DocSelectionRenderService as be, getRichTextEditPath as Xe, getCustomBlockIdsInSelections as Dr, docDrawingPositionToTransform as on, VIEWPORT_KEY as sn, SetDocZoomRatioOperation as an, DocPrintInterceptorService as Or, NodePositionConvertToCursor as Bt, getOneTextSelectionRange as Ft, getAnchorBounding as Tr, TEXT_RANGE_LAYER_INDEX as yr, getDocObject as Mr, DocCanvasPopManagerService as br, IEditorService as Cr } from "@univerjs/docs-ui";
-import { MessageType as kt, clsx as cn, InputNumber as Fe, Select as Wt, Checkbox as Er, RadioGroup as Gt, Radio as ye, render as Rr, unmount as Ar } from "@univerjs/design";
-import { BehaviorSubject as Ot, debounceTime as dn, Observable as Pr, map as Ht, switchMap as xr, of as Nr, takeUntil as jt, filter as Vt } from "rxjs";
+import { DocSelectionRenderService as be, getRichTextEditPath as Xe, getCustomBlockIdsInSelections as Kn, docDrawingPositionToTransform as Jt, VIEWPORT_KEY as en, SetDocZoomRatioOperation as tn, DocPrintInterceptorService as Yn, NodePositionConvertToCursor as At, getOneTextSelectionRange as Pt, getAnchorBounding as Zn, TEXT_RANGE_LAYER_INDEX as Qn, getDocObject as Jn, DocCanvasPopManagerService as er, IEditorService as tr } from "@univerjs/docs-ui";
+import { IRenderManagerService as Q, DocumentEditArea as ke, getCurrentTypeOfRenderer as nr, CURSOR_TYPE as xt, Liquid as nn, PageLayoutType as Nt, DocumentSkeletonPageType as Ut, Vector2 as rr, Rect as ir, getColor as or, TRANSFORM_CHANGE_OBSERVABLE_TYPE as sr } from "@univerjs/engine-render";
+import { MessageType as Lt, clsx as rn, InputNumber as Fe, Select as Bt, Checkbox as ar, RadioGroup as Ft, Radio as ye, render as cr, unmount as dr } from "@univerjs/design";
+import { IImageIoService as gr, IDrawingManagerService as fe, DRAWING_IMAGE_ALLOW_IMAGE_LIST as lr, DRAWING_IMAGE_COUNT_LIMIT as kt, ImageUploadStatusType as mt, DRAWING_IMAGE_ALLOW_SIZE as ur, getImageSize as hr, getDrawingShapeKeyByDrawingSearch as fr, DRAWING_IMAGE_WIDTH_LIMIT as Wt, DRAWING_IMAGE_HEIGHT_LIMIT as Gt, UniverDrawingPlugin as pr } from "@univerjs/drawing";
+import { IMessageService as mr, ILocalFileService as wr, ISidebarService as vr, CanvasFloatDomService as Ir, useDependency as me, getMenuHiddenObservable as on, MenuItemType as sn, RibbonInsertGroup as _r, KeyCode as We, ComponentManager as an, IMenuManagerService as Sr, IShortcutService as Dr, PrintFloatDomSingle as Or, connectInjector as Tr, UniverUIPlugin as yr } from "@univerjs/ui";
+import { BehaviorSubject as Ot, debounceTime as cn, map as Ht, switchMap as Mr, of as br, Observable as Cr, takeUntil as jt, filter as Vt } from "rxjs";
+import { DrawingRenderService as dn, DrawingCommonPanel as Er, ImageCropperObject as Rr, COMPONENT_IMAGE_POPUP_MENU as Ar, OpenImageCropOperation as Pr, ImageResetSizeOperation as xr, UniverDrawingUIPlugin as Nr } from "@univerjs/drawing-ui";
 import { jsxs as X, jsx as y } from "react/jsx-runtime";
 import { useState as ie, useEffect as Tt, useMemo as Ur } from "react";
-const Lr = "docs-drawing-ui.config", $t = {}, yt = {
+const yt = {
   id: "doc.command.remove-doc-image",
   type: q.COMMAND,
   // eslint-disable-next-line max-lines-per-function
@@ -116,7 +116,7 @@ const Lr = "docs-drawing-ui.config", $t = {}, yt = {
     else {
       const v = Nn.selection.delete([o], l, 0, null, !1);
       f.push(...v);
-      const N = Dr(l, [o]), G = (L = s.getDrawings()) != null ? L : {}, x = (R = s.getDrawingsOrder()) != null ? R : [], H = N.sort((I, _) => x.indexOf(I) > x.indexOf(_) ? -1 : x.indexOf(I) < x.indexOf(_) ? 1 : 0);
+      const N = Kn(l, [o]), G = (L = s.getDrawings()) != null ? L : {}, x = (R = s.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);
@@ -206,8 +206,8 @@ class ut {
     this._refreshDrawings$.next(e);
   }
 }
-var Br = Object.getOwnPropertyDescriptor, Fr = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Br(e, t) : e, o = i.length - 1, s; o >= 0; o--)
+var Lr = Object.getOwnPropertyDescriptor, Br = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? Lr(e, t) : e, o = i.length - 1, s; o >= 0; o--)
     (s = i[o]) && (r = s(r) || r);
   return r;
 }, le = (i, e) => (t, n) => e(t, n, i);
@@ -218,11 +218,11 @@ let rt = class extends Ne {
   async insertDocImage() {
     const i = await this._fileOpenerService.openFile({
       multiple: !0,
-      accept: Yn.map((t) => `.${t.replace("image/", "")}`).join(",")
+      accept: lr.map((t) => `.${t.replace("image/", "")}`).join(",")
     }), e = i.length;
-    return e > At ? (this._messageService.show({
-      type: kt.Error,
-      content: this._localeService.t("update-status.exceedMaxCount", String(At))
+    return e > kt ? (this._messageService.show({
+      type: Lt.Error,
+      content: this._localeService.t("update-status.exceedMaxCount", String(kt))
     }), !1) : e === 0 ? !1 : (await this._insertFloatImages(i), !0);
   }
   // eslint-disable-next-line max-lines-per-function
@@ -235,7 +235,7 @@ let rt = class extends Ne {
       let s = "";
       switch (o) {
         case mt.ERROR_EXCEED_SIZE:
-          s = this._localeService.t("update-status.exceedMaxSize", String(Zn / (1024 * 1024)));
+          s = this._localeService.t("update-status.exceedMaxSize", String(ur / (1024 * 1024)));
           break;
         case mt.ERROR_IMAGE_TYPE:
           s = this._localeService.t("update-status.invalidImageType");
@@ -245,7 +245,7 @@ let rt = class extends Ne {
           break;
       }
       this._messageService.show({
-        type: kt.Error,
+        type: Lt.Error,
         content: s
       });
     }
@@ -255,11 +255,11 @@ let rt = class extends Ne {
     for (const r of e) {
       if (r == null)
         continue;
-      const { imageId: o, imageSourceType: s, source: c, base64Cache: d } = r, { width: a, height: g, image: u } = await Qn(d || "");
+      const { imageId: o, imageSourceType: s, source: c, base64Cache: d } = r, { width: a, height: g, image: u } = await hr(d || "");
       this._imageIoService.addImageSourceCache(o, s, u);
       let l = 1;
-      if (a > Pt || g > xt) {
-        const p = Pt / a, w = xt / g;
+      if (a > Wt || g > Gt) {
+        const p = Wt / a, w = Gt / g;
         l = Math.min(p, w);
       }
       const f = this._getImagePosition(a * l, g * l);
@@ -272,7 +272,7 @@ let rt = class extends Ne {
         drawingType: xe.DRAWING_IMAGE,
         imageSourceType: s,
         source: c,
-        transform: on(f),
+        transform: Jt(f),
         docTransform: f,
         behindDoc: oe.FALSE,
         title: "",
@@ -345,7 +345,7 @@ let rt = class extends Ne {
   _transformDrawingListener() {
     const i = this._getCurrentSceneAndTransformer();
     if (i && i.transformer)
-      this.disposeWithMe(i.transformer.changeEnd$.pipe(dn(30)).subscribe((e) => {
+      this.disposeWithMe(i.transformer.changeEnd$.pipe(cn(30)).subscribe((e) => {
         this._docSelectionManagerService.refreshSelection();
       }));
     else
@@ -393,7 +393,7 @@ let rt = class extends Ne {
       return;
     const r = i.getSnapshot(), { drawings: o = {} } = r, s = n.getEditArea() === ke.BODY;
     for (const d of Object.keys(o)) {
-      const a = o[d], g = Jn({ unitId: t, drawingId: a.drawingId, subUnitId: t }), u = e.fuzzyMathObjects(g, !0);
+      const a = o[d], g = fr({ unitId: t, drawingId: a.drawingId, subUnitId: t }), u = e.fuzzyMathObjects(g, !0);
       if (u.length)
         for (const l of u) {
           e.detachTransformerFrom(l);
@@ -439,19 +439,19 @@ let rt = class extends Ne {
     this._docSelectionManagerService.replaceDocRanges(n);
   }
 };
-rt = Fr([
+rt = Br([
   le(1, j),
   le(2, Z(Dt)),
   le(3, Q),
-  le(4, Kn),
+  le(4, gr),
   le(5, Ue),
   le(6, fe),
   le(7, Yt),
-  le(8, ur),
+  le(8, mr),
   le(9, Z(lt)),
   le(10, Z(be)),
   le(11, Z(ut)),
-  le(12, hr)
+  le(12, wr)
 ], rt);
 const fn = {
   id: "doc.command.insert-float-image",
@@ -459,11 +459,11 @@ const fn = {
   handler: (i) => {
     var n, r;
     const e = i.get(z), t = i.get(Q);
-    return (r = (n = ar(we.UNIVER_DOC, e, t)) == null ? void 0 : n.with(rt).insertDocImage()) != null ? r : !1;
+    return (r = (n = nr(we.UNIVER_DOC, e, t)) == null ? void 0 : n.with(rt).insertDocImage()) != null ? r : !1;
   }
 };
 var ue = /* @__PURE__ */ ((i) => (i.INLINE = "inline", i.BEHIND_TEXT = "behindText", i.IN_FRONT_OF_TEXT = "inFrontOfText", i.WRAP_SQUARE = "wrapSquare", i.WRAP_TOP_AND_BOTTOM = "wrapTopAndBottom", i))(ue || {});
-const kr = {
+const Fr = {
   inline: k.INLINE,
   wrapSquare: k.WRAP_SQUARE,
   wrapTopAndBottom: k.WRAP_TOP_AND_BOTTOM,
@@ -560,7 +560,7 @@ const mn = {
       return !1;
     const f = g.getEditArea(), h = u.getTransformerByCreate(), { pages: m, skeHeaders: p, skeFooters: w } = a, D = $.getInstance(), S = [], { drawings: O = {} } = l.getSnapshot();
     for (const R of t) {
-      const { drawingId: v } = R, N = O[v].layoutType, G = kr[n];
+      const { drawingId: v } = R, N = O[v].layoutType, G = Fr[n];
       if (N !== G) {
         const _ = D.replaceOp(["drawings", v, "layoutType"], N, G);
         S.push(_);
@@ -850,7 +850,7 @@ const mn = {
     });
     return u.refreshControls(), !!h;
   }
-}, Wr = {
+}, kr = {
   id: "doc.operation.clear-drawing-transformer",
   type: q.MUTATION,
   handler: (i, e) => {
@@ -864,7 +864,7 @@ const mn = {
   id: "sidebar.operation.doc-image",
   type: q.COMMAND,
   handler: async (i, e) => {
-    const t = i.get(fr), n = i.get(lt), r = i.get(fe);
+    const t = i.get(vr), n = i.get(lt), r = i.get(fe);
     switch (e.value) {
       case "open":
         t.open({
@@ -890,7 +890,225 @@ const mn = {
     const t = i.get(fe), n = i.get(j);
     return e == null ? !1 : (t.focusDrawing([e]), n.executeCommand(Dn.id, { value: "open" }), !0);
   }
-}, zt = -1e3, Xt = 1e3, Gr = (i) => {
+};
+var Wr = Object.getOwnPropertyDescriptor, Gr = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? Wr(e, t) : e, o = i.length - 1, s; o >= 0; o--)
+    (s = i[o]) && (r = s(r) || r);
+  return r;
+}, Be = (i, e) => (t, n) => e(t, n, i);
+function Tn(i, e, t = 1, n = 0) {
+  const { top: r, left: o, bottom: s, right: c } = i, d = c - o, a = s - r, g = e.getViewport(en.VIEW_MAIN), { viewportScrollX: u, viewportScrollY: l } = g, { scaleX: f, scaleY: h } = e.getAncestorScale();
+  return {
+    startX: (o - u) * f,
+    startY: (r - l) * h,
+    endX: (o + d - u) * f,
+    endY: (r + a - l) * h,
+    width: d * f,
+    height: a * h,
+    rotate: n,
+    absolute: {
+      left: !1,
+      top: !1
+    },
+    opacity: t != null ? t : 1
+  };
+}
+function wt(i, e) {
+  const { top: t, left: n, width: r, height: o, angle: s, opacity: c } = i;
+  return Tn({ top: t, left: n, bottom: t + o, right: n + r }, e.scene, c, s);
+}
+let it = class extends Ne {
+  constructor(e, t, n, r, o, s) {
+    super();
+    ve(this, "_domLayerInfoMap", /* @__PURE__ */ new Map());
+    this._renderManagerService = e, this._drawingManagerService = t, this._drawingRenderService = n, this._canvasFloatDomService = r, this._univerInstanceService = o, this._commandService = s, this._initialize();
+  }
+  dispose() {
+    super.dispose();
+  }
+  _initialize() {
+    this._drawingAddRemoveListener(), this._initScrollAndZoomEvent();
+  }
+  _getSceneAndTransformerByDrawingSearch(e) {
+    if (e == null)
+      return;
+    const t = this._renderManagerService.getRenderById(e);
+    if (t == null)
+      return null;
+    const n = t.scene, r = n.getTransformerByCreate();
+    return { scene: n, transformer: r, renderUnit: t, canvas: t.engine.getCanvasElement() };
+  }
+  _drawingAddRemoveListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.add$.subscribe((e) => {
+        this._insertRects(e);
+      })
+    ), this.disposeWithMe(
+      this._drawingManagerService.remove$.subscribe((e) => {
+        e.forEach((t) => {
+          this._removeDom(t.drawingId);
+        });
+      })
+    );
+  }
+  _insertRects(e) {
+    e.forEach(async (t) => {
+      const { unitId: n } = t;
+      if (!this._univerInstanceService.getUnit(n, we.UNIVER_DOC))
+        return;
+      const o = this._getSceneAndTransformerByDrawingSearch(n);
+      if (o == null)
+        return;
+      const s = this._drawingManagerService.getDrawingByParam(t);
+      if (s == null)
+        return;
+      const c = await this._drawingRenderService.renderFloatDom(s, o.scene);
+      if (!(c == null || c.length === 0))
+        for (const d of c) {
+          this._addHoverForRect(d);
+          const a = new Un(), g = wt(d, o.renderUnit), u = new Ot(g), l = o.canvas, f = s.data, h = {
+            dispose: a,
+            rect: d,
+            position$: u,
+            unitId: n
+          };
+          this._canvasFloatDomService.addFloatDom({
+            position$: u,
+            id: s.drawingId,
+            componentKey: s.componentKey,
+            onPointerDown: (p) => {
+              l.dispatchEvent(new PointerEvent(p.type, p));
+            },
+            onPointerMove: (p) => {
+              l.dispatchEvent(new PointerEvent(p.type, p));
+            },
+            onPointerUp: (p) => {
+              l.dispatchEvent(new PointerEvent(p.type, p));
+            },
+            onWheel: (p) => {
+              l.dispatchEvent(new WheelEvent(p.type, p));
+            },
+            data: f,
+            unitId: n
+          });
+          const m = d.onTransformChange$.subscribeEvent(() => {
+            const p = wt(d, o.renderUnit);
+            u.next(
+              p
+            );
+          });
+          a.add(() => {
+            this._canvasFloatDomService.removeFloatDom(s.drawingId);
+          }), m && a.add(m), this._domLayerInfoMap.set(s.drawingId, h);
+        }
+    });
+  }
+  _addHoverForRect(e) {
+    this.disposeWithMe(
+      Se(
+        e.onPointerEnter$.subscribeEvent(() => {
+          e.cursor = xt.GRAB;
+        })
+      )
+    ), this.disposeWithMe(
+      Se(
+        e.onPointerLeave$.subscribeEvent(() => {
+          e.cursor = xt.DEFAULT;
+        })
+      )
+    );
+  }
+  _removeDom(e) {
+    const t = this._domLayerInfoMap.get(e);
+    if (!t)
+      return;
+    const { unitId: n } = t;
+    this._domLayerInfoMap.delete(e), t.dispose.dispose();
+    const r = this._getSceneAndTransformerByDrawingSearch(n);
+    r && r.scene.removeObject(t.rect);
+  }
+  _initScrollAndZoomEvent() {
+    const e = (t) => {
+      const n = this._getSceneAndTransformerByDrawingSearch(t);
+      n && this._domLayerInfoMap.forEach((r) => {
+        if (r.unitId !== t) return;
+        const o = wt(r.rect, n.renderUnit);
+        r.position$.next(o);
+      });
+    };
+    this.disposeWithMe(
+      this._univerInstanceService.getCurrentTypeOfUnit$(we.UNIVER_DOC).pipe(
+        Ht((t) => {
+          if (!t) return null;
+          const n = t.getUnitId(), r = this._renderManagerService.getRenderById(n);
+          return r ? { render: r, unitId: n } : null;
+        }),
+        Mr(
+          (t) => t ? Zt(t.render.scene.getViewport(en.VIEW_MAIN).onScrollAfter$).pipe(Ht(() => ({ unitId: t.unitId }))) : br(null)
+        )
+      ).subscribe((t) => {
+        if (!t) return;
+        const { unitId: n } = t;
+        e(n);
+      })
+    ), this.disposeWithMe(this._commandService.onCommandExecuted((t) => {
+      if (t.id === tn.id) {
+        const n = t.params, { unitId: r } = n;
+        e(r);
+      }
+    }));
+  }
+  insertFloatDom(e, t) {
+    var m, p, w;
+    const n = this._univerInstanceService.getCurrentUnitOfType(we.UNIVER_DOC);
+    if (!n) return !1;
+    const r = this._getSceneAndTransformerByDrawingSearch(n.getUnitId());
+    if (!r) return !1;
+    const c = (m = r.renderUnit.with(te).getSkeleton().getSkeletonData()) == null ? void 0 : m.pages[0];
+    if (!c) return !1;
+    const { pageWidth: d, marginLeft: a, marginRight: g } = c, u = d - a - g, l = {
+      size: {
+        width: (p = t.width) != null ? p : u,
+        height: t.height
+      },
+      positionH: {
+        relativeFrom: J.PAGE,
+        posOffset: 0
+      },
+      positionV: {
+        relativeFrom: W.PAGE,
+        posOffset: 0
+      },
+      angle: 0
+    }, f = (w = t.drawingId) != null ? w : Ln(), h = {
+      unitId: n.getUnitId(),
+      drawings: [
+        {
+          drawingId: f,
+          drawingType: xe.DRAWING_DOM,
+          subUnitId: n.getUnitId(),
+          unitId: n.getUnitId(),
+          ...e,
+          title: "",
+          description: "",
+          docTransform: l,
+          layoutType: k.INLINE,
+          transform: Jt(l)
+        }
+      ]
+    };
+    return this._commandService.syncExecuteCommand(Mt.id, h), f;
+  }
+};
+it = Gr([
+  Be(0, Q),
+  Be(1, fe),
+  Be(2, Z(dn)),
+  Be(3, Z(Ir)),
+  Be(4, z),
+  Be(5, j)
+], it);
+const Hr = "docs-drawing-ui.config", $t = {}, zt = -1e3, Xt = 1e3, jr = (i) => {
   const e = me(j), t = me(lt), n = me(fe), r = me(Q), o = me(z), { drawings: s } = i, c = s[0];
   if (c == null)
     return;
@@ -1049,7 +1267,7 @@ const mn = {
   }, []), /* @__PURE__ */ X(
     "div",
     {
-      className: cn("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", {
+      className: rn("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", {
         "univer-hidden": !L
       }),
       children: [
@@ -1094,7 +1312,7 @@ const mn = {
               /* @__PURE__ */ X("div", { children: [
                 /* @__PURE__ */ y("span", { children: t.t("image-position.toTheRightOf") }),
                 /* @__PURE__ */ y(
-                  Wt,
+                  Bt,
                   {
                     value: String(D.relativeFrom),
                     disabled: p,
@@ -1140,7 +1358,7 @@ const mn = {
               /* @__PURE__ */ X("div", { children: [
                 /* @__PURE__ */ y("span", { children: t.t("image-position.bellow") }),
                 /* @__PURE__ */ y(
-                  Wt,
+                  Bt,
                   {
                     disabled: p,
                     value: String(O.relativeFrom),
@@ -1160,7 +1378,7 @@ const mn = {
           }
         ),
         /* @__PURE__ */ y("div", { children: /* @__PURE__ */ y(
-          Er,
+          ar,
           {
             disabled: p,
             checked: M,
@@ -1171,7 +1389,7 @@ const mn = {
       ]
     }
   );
-}, Qe = 0, Je = 100, Hr = (i) => {
+}, Qe = 0, Je = 100, Vr = (i) => {
   const e = me(j), t = me(lt), n = me(fe), r = me(Q), o = me(z), { drawings: s } = i, c = s[0];
   if (c == null)
     return null;
@@ -1297,7 +1515,7 @@ const mn = {
   }, []), /* @__PURE__ */ X(
     "div",
     {
-      className: cn("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", {
+      className: rn("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", {
         "univer-hidden": !L
       }),
       children: [
@@ -1315,7 +1533,7 @@ const mn = {
             children: /* @__PURE__ */ y("div", { children: t.t("image-text-wrap.wrappingStyle") })
           }
         ),
-        /* @__PURE__ */ y("div", { children: /* @__PURE__ */ X(Gt, { value: D, onChange: v, direction: "vertical", children: [
+        /* @__PURE__ */ y("div", { children: /* @__PURE__ */ X(Ft, { value: D, onChange: v, direction: "vertical", children: [
           /* @__PURE__ */ y(ye, { value: ue.INLINE, children: t.t("image-text-wrap.inline") }),
           /* @__PURE__ */ y(ye, { value: ue.WRAP_SQUARE, children: t.t("image-text-wrap.square") }),
           /* @__PURE__ */ y(ye, { value: ue.WRAP_TOP_AND_BOTTOM, children: t.t("image-text-wrap.topAndBottom") }),
@@ -1329,7 +1547,7 @@ const mn = {
             children: /* @__PURE__ */ y("div", { children: t.t("image-text-wrap.wrapText") })
           }
         ),
-        /* @__PURE__ */ y("div", { children: /* @__PURE__ */ X(Gt, { disabled: l, value: O, onChange: N, direction: "horizontal", children: [
+        /* @__PURE__ */ y("div", { children: /* @__PURE__ */ X(Ft, { disabled: l, value: O, onChange: N, direction: "horizontal", children: [
           /* @__PURE__ */ y(ye, { value: ze.BOTH_SIDES, children: t.t("image-text-wrap.bothSide") }),
           /* @__PURE__ */ y(ye, { value: ze.LEFT, children: t.t("image-text-wrap.leftOnly") }),
           /* @__PURE__ */ y(ye, { value: ze.RIGHT, children: t.t("image-text-wrap.rightOnly") })
@@ -1424,7 +1642,7 @@ const mn = {
       ]
     }
   );
-}, jr = () => {
+}, $r = () => {
   const i = me(fe), e = i.getFocusDrawings(), [t, n] = ie(e);
   return Tt(() => {
     const r = i.focus$.subscribe((o) => {
@@ -1434,13 +1652,13 @@ const mn = {
       r.unsubscribe();
     };
   }, []), !!(t != null && t.length) && /* @__PURE__ */ X("div", { className: "univer-text-sm", children: [
-    /* @__PURE__ */ y(tr, { drawings: t, hasAlign: !1, hasCropper: !1, hasGroup: !1, hasTransform: !1 }),
-    /* @__PURE__ */ y(Hr, { drawings: t }),
-    /* @__PURE__ */ y(Gr, { drawings: t })
+    /* @__PURE__ */ y(Er, { drawings: t, hasAlign: !1, hasCropper: !1, hasGroup: !1, hasTransform: !1 }),
+    /* @__PURE__ */ y(Vr, { drawings: t }),
+    /* @__PURE__ */ y(jr, { drawings: t })
   ] });
-}, Tn = "doc.menu.image", yn = fn.id, Vr = (i) => {
+}, yn = "doc.menu.image", Mn = fn.id, zr = (i) => {
   const e = i.get(Dt), t = i.get(z);
-  return new Pr((n) => {
+  return new Cr((n) => {
     const r = e.textSelection$.subscribe(() => {
       var s;
       const o = e.getActiveTextRange();
@@ -1462,40 +1680,40 @@ const mn = {
     return () => r.unsubscribe();
   });
 };
-function $r(i) {
+function Xr(i) {
   return {
-    id: Tn,
-    type: nn.SUBITEMS,
+    id: yn,
+    type: sn.SUBITEMS,
     icon: "AddImageIcon",
     tooltip: "docImage.title",
-    disabled$: Vr(i),
-    hidden$: tn(i, we.UNIVER_DOC, void 0, St)
+    disabled$: zr(i),
+    hidden$: on(i, we.UNIVER_DOC, void 0, St)
   };
 }
-function zr(i) {
+function qr(i) {
   return {
-    id: yn,
+    id: Mn,
     title: "docImage.upload.float",
-    type: nn.BUTTON,
-    hidden$: tn(i, we.UNIVER_DOC, void 0, St)
+    type: sn.BUTTON,
+    hidden$: on(i, we.UNIVER_DOC, void 0, St)
   };
 }
-const Xr = {
-  [pr.MEDIA]: {
-    [Tn]: {
+const Kr = {
+  [_r.MEDIA]: {
+    [yn]: {
       order: 0,
-      menuItemFactory: $r,
-      [yn]: {
+      menuItemFactory: Xr,
+      [Mn]: {
         order: 0,
-        menuItemFactory: zr
+        menuItemFactory: qr
       }
     }
   }
 };
 function Ye(i) {
-  return i.getContextValue(Un) && i.getContextValue(nt);
+  return i.getContextValue(Bn) && i.getContextValue(nt);
 }
-const qr = {
+const Yr = {
   id: Ke.id,
   description: "shortcut.drawing-move-down",
   group: "4_drawing-view",
@@ -1505,7 +1723,7 @@ const qr = {
   staticParameters: {
     direction: he.DOWN
   }
-}, Kr = {
+}, Zr = {
   id: Ke.id,
   description: "shortcut.drawing-move-up",
   group: "4_drawing-view",
@@ -1515,7 +1733,7 @@ const qr = {
   staticParameters: {
     direction: he.UP
   }
-}, Yr = {
+}, Qr = {
   id: Ke.id,
   description: "shortcut.drawing-move-left",
   group: "4_drawing-view",
@@ -1525,7 +1743,7 @@ const qr = {
   staticParameters: {
     direction: he.LEFT
   }
-}, Zr = {
+}, Jr = {
   id: Ke.id,
   description: "shortcut.drawing-move-right",
   group: "4_drawing-view",
@@ -1535,7 +1753,7 @@ const qr = {
   staticParameters: {
     direction: he.RIGHT
   }
-}, Qr = {
+}, ei = {
   id: gn.id,
   description: "shortcut.drawing-delete",
   group: "4_drawing-view",
@@ -1544,21 +1762,21 @@ const qr = {
   binding: We.DELETE,
   mac: We.BACKSPACE
 };
-var Jr = Object.getOwnPropertyDescriptor, ei = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Jr(e, t) : e, o = i.length - 1, s; o >= 0; o--)
+var ti = Object.getOwnPropertyDescriptor, ni = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? ti(e, t) : e, o = i.length - 1, s; o >= 0; o--)
     (s = i[o]) && (r = s(r) || r);
   return r;
 }, et = (i, e) => (t, n) => e(t, n, i);
-let it = class extends Ne {
+let ot = class extends Ne {
   constructor(i, e, t, n) {
     super(), this._componentManager = i, this._menuManagerService = e, this._commandService = t, this._shortcutService = n, this._init();
   }
   _initCustomComponents() {
     const i = this._componentManager;
-    this.disposeWithMe(i.register(Sn, jr));
+    this.disposeWithMe(i.register(Sn, $r));
   }
   _initMenus() {
-    this._menuManagerService.mergeMenu(Xr);
+    this._menuManagerService.mergeMenu(Kr);
   }
   _initCommands() {
     [
@@ -1572,7 +1790,7 @@ let it = class extends Ne {
       _n,
       yt,
       Dn,
-      Wr,
+      kr,
       On,
       ln,
       hn,
@@ -1584,11 +1802,11 @@ let it = class extends Ne {
   _initShortcuts() {
     [
       // sheet drawing shortcuts
-      qr,
-      Kr,
       Yr,
       Zr,
-      Qr
+      Qr,
+      Jr,
+      ei
     ].forEach((i) => {
       this.disposeWithMe(this._shortcutService.registerShortcut(i));
     });
@@ -1597,18 +1815,18 @@ let it = class extends Ne {
     this._initCommands(), this._initCustomComponents(), this._initMenus(), this._initShortcuts();
   }
 };
-it = ei([
-  et(0, Z(rn)),
-  et(1, mr),
+ot = ni([
+  et(0, Z(an)),
+  et(1, Sr),
   et(2, j),
-  et(3, wr)
-], it);
-var ti = Object.getOwnPropertyDescriptor, ni = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? ti(e, t) : e, o = i.length - 1, s; o >= 0; o--)
+  et(3, Dr)
+], ot);
+var ri = Object.getOwnPropertyDescriptor, ii = (i, e, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? ri(e, t) : e, o = i.length - 1, s; o >= 0; o--)
     (s = i[o]) && (r = s(r) || r);
   return r;
 }, je = (i, e) => (t, n) => e(t, n, i);
-function ri(i) {
+function oi(i) {
   var n, r, o, s;
   if ($.isNoop(i) || !Array.isArray(i))
     return null;
@@ -1631,7 +1849,7 @@ function ri(i) {
     });
   return t;
 }
-function ii(i) {
+function si(i) {
   if (!Array.isArray(i) || i.length < 3 || i[0] !== "drawingsOrder")
     return [];
   const e = [];
@@ -1646,7 +1864,7 @@ function ii(i) {
   }
   return e;
 }
-let ot = class extends Ne {
+let st = class extends Ne {
   constructor(i, e, t, n, r) {
     super(), this._univerInstanceService = i, this._commandService = e, this._drawingManagerService = t, this._docDrawingService = n, this._renderManagerService = r, this._initialize();
   }
@@ -1658,7 +1876,7 @@ let ot = class extends Ne {
       this._commandService.beforeCommandExecuted((i) => {
         if (i.id !== ee.id)
           return;
-        const e = i.params, { unitId: t, actions: n } = e, r = ri(n);
+        const e = i.params, { unitId: t, actions: n } = e, r = oi(n);
         if (r != null)
           for (const { type: o, drawingId: s, drawing: c } of r)
             o === "add" ? this._addDrawings(t, [c]) : this._removeDrawings(t, [s]);
@@ -1668,12 +1886,12 @@ let ot = class extends Ne {
         if (i.id !== ee.id)
           return;
         const e = i.params, { unitId: t, actions: n } = e;
-        ii(n).length > 0 && this._updateDrawingsOrder(t);
+        si(n).length > 0 && this._updateDrawingsOrder(t);
       })
     ), this.disposeWithMe(
       this._commandService.onCommandExecuted((i) => {
         var s;
-        if (i.id !== Ln.id && i.id !== Bn.id)
+        if (i.id !== Fn.id && i.id !== kn.id)
           return;
         const e = (s = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : s.getUnitId(), t = this._drawingManagerService.getFocusDrawings();
         if (e == null || t.length === 0)
@@ -1714,233 +1932,16 @@ let ot = class extends Ne {
     n.orderNotification(o), r.orderNotification(o);
   }
 };
-ot = ni([
+st = ii([
   je(0, z),
   je(1, j),
   je(2, fe),
   je(3, Ue),
   je(4, Q)
-], ot);
-var oi = Object.getOwnPropertyDescriptor, si = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? oi(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = s(r) || r);
-  return r;
-}, Be = (i, e) => (t, n) => e(t, n, i);
-function Mn(i, e, t = 1, n = 0) {
-  const { top: r, left: o, bottom: s, right: c } = i, d = c - o, a = s - r, g = e.getViewport(sn.VIEW_MAIN), { viewportScrollX: u, viewportScrollY: l } = g, { scaleX: f, scaleY: h } = e.getAncestorScale();
-  return {
-    startX: (o - u) * f,
-    startY: (r - l) * h,
-    endX: (o + d - u) * f,
-    endY: (r + a - l) * h,
-    width: d * f,
-    height: a * h,
-    rotate: n,
-    absolute: {
-      left: !1,
-      top: !1
-    },
-    opacity: t != null ? t : 1
-  };
-}
-function wt(i, e) {
-  const { top: t, left: n, width: r, height: o, angle: s, opacity: c } = i;
-  return Mn({ top: t, left: n, bottom: t + o, right: n + r }, e.scene, c, s);
-}
-let st = class extends Ne {
-  constructor(e, t, n, r, o, s) {
-    super();
-    ve(this, "_domLayerInfoMap", /* @__PURE__ */ new Map());
-    this._renderManagerService = e, this._drawingManagerService = t, this._drawingRenderService = n, this._canvasFloatDomService = r, this._univerInstanceService = o, this._commandService = s, this._initialize();
-  }
-  dispose() {
-    super.dispose();
-  }
-  _initialize() {
-    this._drawingAddRemoveListener(), this._initScrollAndZoomEvent();
-  }
-  _getSceneAndTransformerByDrawingSearch(e) {
-    if (e == null)
-      return;
-    const t = this._renderManagerService.getRenderById(e);
-    if (t == null)
-      return null;
-    const n = t.scene, r = n.getTransformerByCreate();
-    return { scene: n, transformer: r, renderUnit: t, canvas: t.engine.getCanvasElement() };
-  }
-  _drawingAddRemoveListener() {
-    this.disposeWithMe(
-      this._drawingManagerService.add$.subscribe((e) => {
-        this._insertRects(e);
-      })
-    ), this.disposeWithMe(
-      this._drawingManagerService.remove$.subscribe((e) => {
-        e.forEach((t) => {
-          this._removeDom(t.drawingId);
-        });
-      })
-    );
-  }
-  _insertRects(e) {
-    e.forEach(async (t) => {
-      const { unitId: n } = t;
-      if (!this._univerInstanceService.getUnit(n, we.UNIVER_DOC))
-        return;
-      const o = this._getSceneAndTransformerByDrawingSearch(n);
-      if (o == null)
-        return;
-      const s = this._drawingManagerService.getDrawingByParam(t);
-      if (s == null)
-        return;
-      const c = await this._drawingRenderService.renderFloatDom(s, o.scene);
-      if (!(c == null || c.length === 0))
-        for (const d of c) {
-          this._addHoverForRect(d);
-          const a = new Fn(), g = wt(d, o.renderUnit), u = new Ot(g), l = o.canvas, f = s.data, h = {
-            dispose: a,
-            rect: d,
-            position$: u,
-            unitId: n
-          };
-          this._canvasFloatDomService.addFloatDom({
-            position$: u,
-            id: s.drawingId,
-            componentKey: s.componentKey,
-            onPointerDown: (p) => {
-              l.dispatchEvent(new PointerEvent(p.type, p));
-            },
-            onPointerMove: (p) => {
-              l.dispatchEvent(new PointerEvent(p.type, p));
-            },
-            onPointerUp: (p) => {
-              l.dispatchEvent(new PointerEvent(p.type, p));
-            },
-            onWheel: (p) => {
-              l.dispatchEvent(new WheelEvent(p.type, p));
-            },
-            data: f,
-            unitId: n
-          });
-          const m = d.onTransformChange$.subscribeEvent(() => {
-            const p = wt(d, o.renderUnit);
-            u.next(
-              p
-            );
-          });
-          a.add(() => {
-            this._canvasFloatDomService.removeFloatDom(s.drawingId);
-          }), m && a.add(m), this._domLayerInfoMap.set(s.drawingId, h);
-        }
-    });
-  }
-  _addHoverForRect(e) {
-    this.disposeWithMe(
-      Se(
-        e.onPointerEnter$.subscribeEvent(() => {
-          e.cursor = Nt.GRAB;
-        })
-      )
-    ), this.disposeWithMe(
-      Se(
-        e.onPointerLeave$.subscribeEvent(() => {
-          e.cursor = Nt.DEFAULT;
-        })
-      )
-    );
-  }
-  _removeDom(e) {
-    const t = this._domLayerInfoMap.get(e);
-    if (!t)
-      return;
-    const { unitId: n } = t;
-    this._domLayerInfoMap.delete(e), t.dispose.dispose();
-    const r = this._getSceneAndTransformerByDrawingSearch(n);
-    r && r.scene.removeObject(t.rect);
-  }
-  _initScrollAndZoomEvent() {
-    const e = (t) => {
-      const n = this._getSceneAndTransformerByDrawingSearch(t);
-      n && this._domLayerInfoMap.forEach((r) => {
-        if (r.unitId !== t) return;
-        const o = wt(r.rect, n.renderUnit);
-        r.position$.next(o);
-      });
-    };
-    this.disposeWithMe(
-      this._univerInstanceService.getCurrentTypeOfUnit$(we.UNIVER_DOC).pipe(
-        Ht((t) => {
-          if (!t) return null;
-          const n = t.getUnitId(), r = this._renderManagerService.getRenderById(n);
-          return r ? { render: r, unitId: n } : null;
-        }),
-        xr(
-          (t) => t ? Zt(t.render.scene.getViewport(sn.VIEW_MAIN).onScrollAfter$).pipe(Ht(() => ({ unitId: t.unitId }))) : Nr(null)
-        )
-      ).subscribe((t) => {
-        if (!t) return;
-        const { unitId: n } = t;
-        e(n);
-      })
-    ), this.disposeWithMe(this._commandService.onCommandExecuted((t) => {
-      if (t.id === an.id) {
-        const n = t.params, { unitId: r } = n;
-        e(r);
-      }
-    }));
-  }
-  insertFloatDom(e, t) {
-    var m, p, w;
-    const n = this._univerInstanceService.getCurrentUnitOfType(we.UNIVER_DOC);
-    if (!n) return !1;
-    const r = this._getSceneAndTransformerByDrawingSearch(n.getUnitId());
-    if (!r) return !1;
-    const c = (m = r.renderUnit.with(te).getSkeleton().getSkeletonData()) == null ? void 0 : m.pages[0];
-    if (!c) return !1;
-    const { pageWidth: d, marginLeft: a, marginRight: g } = c, u = d - a - g, l = {
-      size: {
-        width: (p = t.width) != null ? p : u,
-        height: t.height
-      },
-      positionH: {
-        relativeFrom: J.PAGE,
-        posOffset: 0
-      },
-      positionV: {
-        relativeFrom: W.PAGE,
-        posOffset: 0
-      },
-      angle: 0
-    }, f = (w = t.drawingId) != null ? w : kn(), h = {
-      unitId: n.getUnitId(),
-      drawings: [
-        {
-          drawingId: f,
-          drawingType: xe.DRAWING_DOM,
-          subUnitId: n.getUnitId(),
-          unitId: n.getUnitId(),
-          ...e,
-          title: "",
-          description: "",
-          docTransform: l,
-          layoutType: k.INLINE,
-          transform: on(l)
-        }
-      ]
-    };
-    return this._commandService.syncExecuteCommand(Mt.id, h), f;
-  }
-};
-st = si([
-  Be(0, Q),
-  Be(1, fe),
-  Be(2, Z(Jt)),
-  Be(3, Z(vr)),
-  Be(4, z),
-  Be(5, j)
 ], st);
 const ai = (i) => {
   const { floatDomInfos: e, scene: t, offset: n, bound: r } = i, o = r.right - r.left, s = r.bottom - r.top, c = Ur(() => 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 = Tn(
       {
         left: u,
         right: u + a,
@@ -1966,7 +1967,7 @@ const ai = (i) => {
     };
     return [d.drawingId, m];
   }).filter(([d, a]) => !(a.position.endX < 0 || a.position.endY < 0 || a.position.startX > o || a.position.startY > s)), [e, t, n, o, s]);
-  return /* @__PURE__ */ y("div", { className: "univer-absolute univer-left-0 univer-top-0", children: c.map(([d, a]) => /* @__PURE__ */ y(Ir, { 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(Or, { layer: a, id: d, position: a.position }, d)) });
 };
 var ci = Object.getOwnPropertyDescriptor, di = (i, e, t, n) => {
   for (var r = n > 1 ? void 0 : n ? ci(e, t) : e, o = i.length - 1, s; o >= 0; o--)
@@ -2016,8 +2017,8 @@ let at = class extends Ne {
                   };
                 }
                 return null;
-              }).filter(Boolean), c = _r(ai, this._injector);
-              return Rr(
+              }).filter(Boolean), c = Tr(ai, this._injector);
+              return cr(
                 /* @__PURE__ */ y(
                   c,
                   {
@@ -2031,7 +2032,7 @@ let at = class extends Ne {
                 ),
                 e.root
               ), i == null || i.add(() => {
-                Ar(e.root);
+                dr(e.root);
               }), t(i);
             }
           }
@@ -2041,10 +2042,10 @@ let at = class extends Ne {
   }
 };
 at = di([
-  Ve(0, Z(Or)),
-  Ve(1, Z(Jt)),
+  Ve(0, Z(Yn)),
+  Ve(1, Z(dn)),
   Ve(2, fe),
-  Ve(3, Z(rn)),
+  Ve(3, Z(an)),
   Ve(4, Z(Qt))
 ], at);
 var gi = Object.getOwnPropertyDescriptor, li = (i, e, t, n) => {
@@ -2060,7 +2061,7 @@ function qt(i) {
 let ct = class extends Ne {
   constructor(e, t, n, r) {
     super();
-    ve(this, "_liquid", new en());
+    ve(this, "_liquid", new nn());
     ve(this, "_listenerOnImageMap", /* @__PURE__ */ new Set());
     // Use to cache the drawings is under transforming or scaling.
     ve(this, "_transformerCache", /* @__PURE__ */ new Map());
@@ -2233,7 +2234,7 @@ let ct = class extends Ne {
     if (r == null)
       return;
     const { mainComponent: s, scene: c } = r, d = s, a = c.getViewports()[0], {
-      pageLayoutType: g = Ut.VERTICAL,
+      pageLayoutType: g = Nt.VERTICAL,
       pageMarginLeft: u,
       pageMarginTop: l
     } = d.getOffsetConfig();
@@ -2261,7 +2262,7 @@ let ct = class extends Ne {
     const A = {
       ...C,
       isBack: h
-    }, L = M.document.getOffsetConfig(), R = new Bt(L, o), { cursorList: v, contentBoxPointGroup: N } = R.getRangePointData(A, A), { startOffset: G } = (H = Ft(v)) != null ? H : {};
+    }, L = M.document.getOffsetConfig(), R = new At(L, o), { 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 };
   }
@@ -2271,7 +2272,7 @@ let ct = class extends Ne {
     const n = this._renderManagerService.getRenderById(e.unitId), r = n == null ? void 0 : n.with(te).getSkeleton(), o = r == null ? void 0 : r.getSkeletonData();
     if (o == null || n == null)
       return;
-    const { pages: s, skeHeaders: c, skeFooters: d } = o, { mainComponent: a, scene: g } = n, u = a, l = g.getViewports()[0], { pageLayoutType: f = Ut.VERTICAL, pageMarginLeft: h, pageMarginTop: m, docsLeft: p, docsTop: w } = u.getOffsetConfig(), { left: D, top: S, angle: O } = t;
+    const { pages: s, skeHeaders: c, skeFooters: d } = o, { 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: M } = t;
     const { positionV: A, positionH: L } = e.docTransform, { width: R, height: v } = this._getPageContentSize(e);
     C = Math.min(C, R), M = Math.min(M, v);
@@ -2309,7 +2310,7 @@ let ct = class extends Ne {
       const { headerId: ht, footerId: ft, pageHeight: Cn, pageWidth: bt, marginLeft: Ct, marginBottom: En } = pe, Rn = s.indexOf(pe);
       if (x > -1 && Rn === x) {
         switch (K) {
-          case Lt.HEADER: {
+          case Ut.HEADER: {
             const He = (Oe = c.get(ht)) == null ? void 0 : Oe.get(bt);
             if (He)
               this._liquid.translatePagePadding({
@@ -2320,7 +2321,7 @@ let ct = class extends Ne {
               throw new Error("header skeleton not found");
             break;
           }
-          case Lt.FOOTER: {
+          case Ut.FOOTER: {
             const He = (Ee = d.get(ft)) == null ? void 0 : Ee.get(bt);
             if (He)
               this._liquid.translatePagePadding({
@@ -2376,7 +2377,7 @@ let ct = class extends Ne {
     const Ce = {
       ...se,
       isBack: H
-    }, Ge = Le.document.getOffsetConfig(), ae = new Bt(Ge, r), { cursorList: ne } = ae.getRangePointData(Ce, Ce), { startOffset: re } = (Ae = Ft(ne)) != null ? Ae : {};
+    }, Ge = Le.document.getOffsetConfig(), ae = new At(Ge, r), { cursorList: ne } = ae.getRangePointData(Ce, Ce), { startOffset: re } = (Ae = Pt(ne)) != null ? Ae : {};
     if (re != null)
       return { offset: re, docTransform: I, segmentId: G, segmentPage: x };
   }
@@ -2478,7 +2479,7 @@ let ct = class extends Ne {
     return { scene: n, transformer: r };
   }
   _getTransformCoordForDocumentOffset(e, t, n, r) {
-    const { documentTransform: o } = e.getOffsetConfig(), s = t.transformVector2SceneCoord(cr.FromArray([n, r]));
+    const { documentTransform: o } = e.getOffsetConfig(), s = t.transformVector2SceneCoord(rr.FromArray([n, r]));
     if (s)
       return o.clone().invert().applyPoint(s);
   }
@@ -2489,23 +2490,23 @@ let ct = class extends Ne {
     const { mainComponent: r, scene: o } = n, s = r, {
       docsLeft: c,
       docsTop: d
-    } = s.getOffsetConfig(), a = Tr(t), { left: g, top: u, height: l } = a, f = g + c, h = u + d;
+    } = s.getOffsetConfig(), a = Zn(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 dr(ui + Me.generateRandomId(m), {
+    const m = 6, p = new ir(ui + Me.generateRandomId(m), {
       left: f,
       top: h,
       height: l,
       strokeWidth: 2,
-      stroke: gr(Gn.darkGray, 1),
+      stroke: or(Gn.darkGray, 1),
       evented: !1
     });
-    this._anchorShape = p, o.addObject(p, yr);
+    this._anchorShape = p, o.addObject(p, Qn);
   }
   _getDocObject() {
-    return Mr(this._univerInstanceService, this._renderManagerService);
+    return Jn(this._univerInstanceService, this._renderManagerService);
   }
   _getPageContentSize(e) {
     const t = this._renderManagerService.getRenderById(e.unitId), n = t == null ? void 0 : t.with(te).getSkeleton(), r = 500, o = 500, s = n == null ? void 0 : n.getSkeletonData();
@@ -2569,7 +2570,7 @@ let dt = class extends Hn {
   _hasCropObject(e) {
     const t = e.getAllObjects();
     for (const n of t)
-      if (n instanceof nr)
+      if (n instanceof Rr)
         return !0;
     return !1;
   }
@@ -2600,7 +2601,7 @@ let dt = class extends Hn {
           const { unitId: g, subUnitId: u, drawingId: l, drawingType: f } = a, h = this._canvasPopManagerService.attachPopupToObject(
             c,
             {
-              componentKey: rr,
+              componentKey: Ar,
               direction: "horizontal",
               offset: [2, 0],
               extraProps: {
@@ -2656,7 +2657,7 @@ let dt = class extends Hn {
       {
         label: "image-popup.crop",
         index: 2,
-        commandId: ir.id,
+        commandId: Pr.id,
         commandParams: { unitId: e, subUnitId: t, drawingId: n },
         disable: !0
         // TODO: @JOCS, feature is not ready.
@@ -2664,7 +2665,7 @@ let dt = class extends Hn {
       {
         label: "image-popup.reset",
         index: 3,
-        commandId: or.id,
+        commandId: xr.id,
         commandParams: [{ unitId: e, subUnitId: t, drawingId: n }],
         disable: !0
         // TODO: @JOCS, feature is not ready.
@@ -2674,7 +2675,7 @@ let dt = class extends Hn {
 };
 dt = fi([
   $e(0, fe),
-  $e(1, Z(br)),
+  $e(1, Z(er)),
   $e(2, Q),
   $e(3, z),
   $e(4, Yt)
@@ -2687,7 +2688,7 @@ var pi = Object.getOwnPropertyDescriptor, mi = (i, e, t, n) => {
 let It = class extends Ne {
   constructor(e, t, n, r, o, s, c, d) {
     super();
-    ve(this, "_liquid", new en());
+    ve(this, "_liquid", new nn());
     this._context = e, this._docSkeletonManagerService = t, this._commandService = n, this._editorService = r, this._drawingManagerService = o, this._docRefreshDrawingsService = s, this._univerInstanceService = c, this._lifecycleService = d, this._initialize(), this._commandExecutedListener();
   }
   _initialize() {
@@ -2701,7 +2702,7 @@ let It = class extends Ne {
     });
   }
   _commandExecutedListener() {
-    const e = [ee.id, an.id];
+    const e = [ee.id, tn.id];
     this.disposeWithMe(
       this._commandService.onCommandExecuted((t) => {
         if (e.includes(t.id)) {
@@ -2723,8 +2724,8 @@ let It = class extends Ne {
   _initResize() {
     this.disposeWithMe(
       Zt(this._context.engine.onTransformChange$).pipe(
-        Vt((e) => e.type === lr.resize),
-        dn(16)
+        Vt((e) => e.type === sr.resize),
+        cn(16)
       ).subscribe(() => {
         var n;
         const e = this._docSkeletonManagerService.getSkeleton(), { scene: t } = this._context;
@@ -2821,7 +2822,7 @@ let It = class extends Ne {
 It = mi([
   Pe(1, Z(te)),
   Pe(2, j),
-  Pe(3, Cr),
+  Pe(3, tr),
   Pe(4, fe),
   Pe(5, Z(ut)),
   Pe(6, z),
@@ -2841,16 +2842,16 @@ let gt = class extends zn {
       $t,
       this._config
     );
-    this._configService.setConfig(Lr, r);
+    this._configService.setConfig(Hr, r);
   }
   onStarting() {
     [
-      [it],
+      [ot],
       [dt],
       [ct],
-      [ot],
-      [ut],
       [st],
+      [ut],
+      [it],
       [at]
     ].forEach((e) => this._injector.add(e));
   }
@@ -2858,25 +2859,25 @@ let gt = class extends zn {
     [
       [rt],
       [It]
-    ].forEach((i) => this._renderManagerSrv.registerRenderModule(we.UNIVER_DOC, i)), this._injector.get(ot), this._injector.get(it), this._injector.get(ct), this._injector.get(at);
+    ].forEach((i) => this._renderManagerSrv.registerRenderModule(we.UNIVER_DOC, i)), this._injector.get(st), this._injector.get(ot), this._injector.get(ct), this._injector.get(at);
   }
   onRendered() {
-    this._injector.get(dt), this._injector.get(st);
+    this._injector.get(dt), this._injector.get(it);
   }
 };
 bn(gt, "type", we.UNIVER_DOC);
 bn(gt, "pluginName", Si);
 gt = _i([
-  Vn(sr, er, qn, Sr),
+  Vn(Nr, pr, qn, yr),
   vt(1, Z(Qt)),
   vt(2, Q),
   vt(3, $n)
 ], gt);
 export {
-  Wr as ClearDocDrawingTransformerOperation,
-  Tn as DOCS_IMAGE_MENU_ID,
+  kr as ClearDocDrawingTransformerOperation,
+  yn as DOCS_IMAGE_MENU_ID,
   gn as DeleteDocDrawingsCommand,
-  st as DocFloatDomController,
+  it as DocFloatDomController,
   On as EditDocDrawingOperation,
   ln as GroupDocDrawingCommand,
   Mt as InsertDocDrawingCommand,