@univerjs/docs-drawing-ui 0.6.0 → 0.6.1-nightly.202502221605

package/lib/es/index.js

@@ -1,38 +1,38 @@
 var Ct = Object.defineProperty;
 var Dt = (i, e, n) => e in i ? Ct(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n;
 var Ce = (i, e, n) => Dt(i, typeof e != "symbol" ? e + "" : e, n);
-import { Disposable as Xe, UndoCommand as Ot, RedoCommand as Tt, JSONX as q, IUniverInstanceService as Q, ICommandService as z, PositionedObjectLayoutType as H, CommandType as K, BooleanNumber as oe, ObjectRelativeFromH as ne, ObjectRelativeFromV as V, Tools as ye, TextX as vn, TextXActionType as Z, toDisposable as Le, throttle as On, COLORS as Pt, MemoryCursor as yt, IUndoRedoService as Gn, BuildTextUtils as bt, ArrangeTypeEnum as Ze, Inject as ve, IContextService as Vn, LocaleService as ln, WrapTextType as $e, DrawingTypeEnum as Mt, FOCUSING_COMMON_DRAWINGS as tn, UniverInstanceType as be, Direction as fe, DocumentFlavor as fn, FOCUSING_UNIVER_EDITOR as Rt, RxDisposable as Nt, SHEET_EDITOR_UNITS as At, LifecycleService as Et, DOCS_ZEN_EDITOR_UNIT_ID_KEY as xt, fromEventSubject as Lt, LifecycleStages as Tn, DependentOn as Bt, Injector as Ut, IConfigService as kt, Plugin as Ft, merge as Ht } from "@univerjs/core";
+import { Disposable as Xe, UndoCommand as Ot, RedoCommand as Tt, JSONX as q, IUniverInstanceService as Q, ICommandService as z, PositionedObjectLayoutType as H, CommandType as K, BooleanNumber as oe, ObjectRelativeFromH as ne, ObjectRelativeFromV as V, Tools as Pe, TextX as vn, TextXActionType as Z, toDisposable as Le, throttle as On, COLORS as yt, MemoryCursor as Pt, IUndoRedoService as Gn, BuildTextUtils as bt, ArrangeTypeEnum as Ze, Inject as ve, IContextService as Vn, LocaleService as ln, WrapTextType as $e, DrawingTypeEnum as Mt, FOCUSING_COMMON_DRAWINGS as tn, UniverInstanceType as be, Direction as fe, DocumentFlavor as fn, FOCUSING_UNIVER_EDITOR as Rt, RxDisposable as Nt, SHEET_EDITOR_UNITS as At, LifecycleService as Et, DOCS_ZEN_EDITOR_UNIT_ID_KEY as xt, fromEventSubject as Lt, LifecycleStages as Tn, DependentOn as Bt, Injector as Ut, IConfigService as kt, Plugin as Ft, merge as Ht } from "@univerjs/core";
 import { IDocDrawingService as Be, UniverDocsDrawingPlugin as Wt } from "@univerjs/docs-drawing";
-import { IDrawingManagerService as Ie, IImageIoService as Gt, DRAWING_IMAGE_ALLOW_IMAGE_LIST as Vt, DRAWING_IMAGE_COUNT_LIMIT as Pn, ImageUploadStatusType as hn, DRAWING_IMAGE_ALLOW_SIZE as jt, getImageSize as $t, getDrawingShapeKeyByDrawingSearch as zt, DRAWING_IMAGE_WIDTH_LIMIT as yn, DRAWING_IMAGE_HEIGHT_LIMIT as bn, UniverDrawingPlugin as qt } from "@univerjs/drawing";
+import { IDrawingManagerService as Ie, IImageIoService as Gt, DRAWING_IMAGE_ALLOW_IMAGE_LIST as Vt, DRAWING_IMAGE_COUNT_LIMIT as yn, ImageUploadStatusType as hn, DRAWING_IMAGE_ALLOW_SIZE as jt, getImageSize as $t, getDrawingShapeKeyByDrawingSearch as zt, DRAWING_IMAGE_WIDTH_LIMIT as Pn, DRAWING_IMAGE_HEIGHT_LIMIT as bn, UniverDrawingPlugin as qt } from "@univerjs/drawing";
 import { DrawingCommonPanel as Xt, ImageCropperObject as Kt, COMPONENT_IMAGE_POPUP_MENU as Yt, OpenImageCropOperation as Zt, ImageResetSizeOperation as Qt, UniverDrawingUIPlugin as Jt } from "@univerjs/drawing-ui";
 import { IRenderManagerService as ee, DocumentEditArea as Fe, Liquid as jn, PageLayoutType as Mn, DocumentSkeletonPageType as Rn, Vector2 as ei, Rect as ni, getColor as ti, TRANSFORM_CHANGE_OBSERVABLE_TYPE as ii } from "@univerjs/engine-render";
 import { IMessageService as ri, ILocalFileService as oi, ISidebarService as si, useDependency as we, getMenuHiddenObservable as $n, MenuItemType as zn, RibbonStartGroup as ai, KeyCode as He, ComponentManager as ci, IMenuManagerService as di, IShortcutService as li, UniverUIPlugin as gi } from "@univerjs/ui";
 import { RichTextEditingMutation as J, DocSkeletonManagerService as se, DocSelectionManagerService as In } from "@univerjs/docs";
 import { DocSelectionRenderService as Me, getRichTextEditPath as ze, NodePositionConvertToCursor as Nn, getOneTextSelectionRange as An, getAnchorBounding as mi, TEXT_RANGE_LAYER_INDEX as ui, getDocObject as fi, getCustomBlockIdsInSelections as hi, docDrawingPositionToTransform as pi, DocCanvasPopManagerService as wi, IEditorService as vi, SetDocZoomRatioOperation as Ii } from "@univerjs/docs-ui";
 import { BehaviorSubject as _i, debounceTime as qn, Observable as Si, takeUntil as En, filter as xn } from "rxjs";
-import { MessageType as Ln, InputNumber as ke, Select as Bn, Checkbox as Ci, RadioGroup as Un, Radio as Pe } from "@univerjs/design";
+import { MessageType as Ln, InputNumber as ke, Select as Bn, Checkbox as Ci, RadioGroup as Un, Radio as ye } from "@univerjs/design";
 import { jsxs as X, jsx as f } from "react/jsx-runtime";
 import { forwardRef as Xn, useRef as Di, createElement as Kn, useState as re, useEffect as _n } from "react";
 const Oi = "docs-drawing-ui.config", kn = {};
-var Ti = Object.getOwnPropertyDescriptor, Pi = (i, e, n, t) => {
+var Ti = Object.getOwnPropertyDescriptor, yi = (i, e, n, t) => {
   for (var r = t > 1 ? void 0 : t ? Ti(e, n) : e, o = i.length - 1, s; o >= 0; o--)
     (s = i[o]) && (r = s(r) || r);
   return r;
 }, Ve = (i, e) => (n, t) => e(n, t, i);
-function yi(i) {
+function Pi(i) {
   var t, r, o, s;
   if (q.isNoop(i) || !Array.isArray(i))
     return null;
-  const e = i.find((c) => Array.isArray(c) && (c == null ? void 0 : c[0]) === "drawings");
+  const e = i.find((a) => Array.isArray(a) && (a == null ? void 0 : a[0]) === "drawings");
   if (e == null || !Array.isArray(e) || e.length < 3 || typeof e[1] == "string" && typeof e[2] != "object" || Array.isArray(e[1]) && typeof e[1][1] != "object")
     return null;
   const n = [];
   if (Array.isArray(e == null ? void 0 : e[1]))
-    for (const c of e)
-      Array.isArray(c) && n.push({
-        type: (t = c == null ? void 0 : c[1]) != null && t.i ? "add" : "remove",
-        drawingId: c == null ? void 0 : c[0],
-        drawing: (r = c == null ? void 0 : c[1]) == null ? void 0 : r.i
+    for (const a of e)
+      Array.isArray(a) && n.push({
+        type: (t = a == null ? void 0 : a[1]) != null && t.i ? "add" : "remove",
+        drawingId: a == null ? void 0 : a[0],
+        drawing: (r = a == null ? void 0 : a[1]) == null ? void 0 : r.i
       });
   else
     n.push({
@@ -69,10 +69,10 @@ let rn = class extends Xe {
       this._commandService.beforeCommandExecuted((i) => {
         if (i.id !== J.id)
           return;
-        const e = i.params, { unitId: n, actions: t } = e, r = yi(t);
+        const e = i.params, { unitId: n, actions: t } = e, r = Pi(t);
         if (r != null)
-          for (const { type: o, drawingId: s, drawing: c } of r)
-            o === "add" ? this._addDrawings(n, [c]) : this._removeDrawings(n, [s]);
+          for (const { type: o, drawingId: s, drawing: a } of r)
+            o === "add" ? this._addDrawings(n, [a]) : this._removeDrawings(n, [s]);
       })
     ), this.disposeWithMe(
       this._commandService.onCommandExecuted((i) => {
@@ -97,16 +97,16 @@ let rn = class extends Xe {
     );
   }
   _addDrawings(i, e) {
-    const n = this._drawingManagerService, t = this._docDrawingService, r = this._docDrawingService.getBatchAddOp(e), { subUnitId: o, redo: s, objects: c } = r;
-    n.applyJson1(i, o, s), t.applyJson1(i, o, s), n.addNotification(c), t.addNotification(c);
+    const n = this._drawingManagerService, t = this._docDrawingService, r = this._docDrawingService.getBatchAddOp(e), { subUnitId: o, redo: s, objects: a } = r;
+    n.applyJson1(i, o, s), t.applyJson1(i, o, s), n.addNotification(a), t.addNotification(a);
   }
   _removeDrawings(i, e) {
     const n = this._drawingManagerService, t = this._docDrawingService, r = this._docDrawingService.getBatchRemoveOp(e.map((d) => ({
       unitId: i,
       subUnitId: i,
       drawingId: d
-    }))), { subUnitId: o, redo: s, objects: c } = r;
-    n.applyJson1(i, o, s), t.applyJson1(i, o, s), n.removeNotification(c), t.removeNotification(c);
+    }))), { subUnitId: o, redo: s, objects: a } = r;
+    n.applyJson1(i, o, s), t.applyJson1(i, o, s), n.removeNotification(a), t.removeNotification(a);
   }
   _updateDrawingsOrder(i) {
     const e = this._univerInstanceService.getUniverDocInstance(i);
@@ -125,7 +125,7 @@ let rn = class extends Xe {
     t.orderNotification(o), r.orderNotification(o);
   }
 };
-rn = Pi([
+rn = yi([
   Ve(0, Q),
   Ve(1, z),
   Ve(2, Ie),
@@ -151,16 +151,16 @@ const Mi = {
 };
 function Yn(i, e, n, t, r, o, s) {
   var p, h;
-  const c = new vn(), d = q.getInstance(), a = [], l = o.getSelfOrHeaderFooterModel(e).getBody(), m = o.getSelfOrHeaderFooterModel(i).getBody();
+  const a = new vn(), d = q.getInstance(), c = [], l = o.getSelfOrHeaderFooterModel(e).getBody(), m = o.getSelfOrHeaderFooterModel(i).getBody();
   if (l == null || m == null)
     return;
   const g = (h = (p = l.customBlocks) == null ? void 0 : p.find((v) => v.blockId === r)) == null ? void 0 : h.startIndex;
   if (g != null) {
     if (t = Math.min(m.dataStream.length - 2, t), i === e) {
-      if (t < g ? (t > 0 && c.push({
+      if (t < g ? (t > 0 && a.push({
         t: Z.RETAIN,
         len: t
-      }), c.push({
+      }), a.push({
         t: Z.INSERT,
         body: {
           dataStream: "\b",
@@ -170,22 +170,22 @@ function Yn(i, e, n, t, r, o, s) {
           }]
         },
         len: 1
-      }), c.push({
+      }), a.push({
         t: Z.RETAIN,
         len: g - t
-      }), c.push({
+      }), a.push({
         t: Z.DELETE,
         len: 1
-      })) : (g > 0 && c.push({
+      })) : (g > 0 && a.push({
         t: Z.RETAIN,
         len: g
-      }), c.push({
+      }), a.push({
         t: Z.DELETE,
         len: 1
-      }), t - g - 1 > 0 && c.push({
+      }), t - g - 1 > 0 && a.push({
         t: Z.RETAIN,
         len: t - g - 1
-      }), c.push({
+      }), a.push({
         t: Z.INSERT,
         body: {
           dataStream: "\b",
@@ -196,22 +196,22 @@ function Yn(i, e, n, t, r, o, s) {
         },
         len: 1
       })), t !== g) {
-        const v = ze(o, e), w = d.editOp(c.serialize(), v);
-        a.push(w);
+        const v = ze(o, e), w = d.editOp(a.serialize(), v);
+        c.push(w);
       }
     } else {
-      g > 0 && c.push({
+      g > 0 && a.push({
         t: Z.RETAIN,
         len: g
-      }), c.push({
+      }), a.push({
         t: Z.DELETE,
         len: 1
       });
-      let v = ze(o, e), w = d.editOp(c.serialize(), v);
-      a.push(w), c.empty(), t > 0 && c.push({
+      let v = ze(o, e), w = d.editOp(a.serialize(), v);
+      c.push(w), a.empty(), t > 0 && a.push({
         t: Z.RETAIN,
         len: t
-      }), c.push({
+      }), a.push({
         t: Z.INSERT,
         body: {
           dataStream: "\b",
@@ -221,9 +221,9 @@ function Yn(i, e, n, t, r, o, s) {
           }]
         },
         len: 1
-      }), v = ze(o, i), w = d.editOp(c.serialize(), v), a.push(w), s.setSegment(i), s.setSegmentPage(n);
+      }), v = ze(o, i), w = d.editOp(a.serialize(), v), c.push(w), s.setSegment(i), s.setSegmentPage(n);
     }
-    return a;
+    return c;
   }
 }
 const Zn = {
@@ -234,10 +234,10 @@ const Zn = {
     var A, U;
     if (e == null)
       return !1;
-    const { drawings: n, wrappingStyle: t, unitId: r } = e, o = i.get(z), s = i.get(Q), d = i.get(ee).getRenderById(r), a = d == null ? void 0 : d.with(se).getSkeleton().getSkeletonData(), l = d == null ? void 0 : d.with(se).getViewModel(), m = d == null ? void 0 : d.scene, g = s.getCurrentUniverDocInstance();
-    if (g == null || a == null || m == null || l == null)
+    const { drawings: n, wrappingStyle: t, unitId: r } = e, o = i.get(z), s = i.get(Q), d = i.get(ee).getRenderById(r), c = d == null ? void 0 : d.with(se).getSkeleton().getSkeletonData(), l = d == null ? void 0 : d.with(se).getViewModel(), m = d == null ? void 0 : d.scene, g = s.getCurrentUniverDocInstance();
+    if (g == null || c == null || m == null || l == null)
       return !1;
-    const p = l.getEditArea(), h = m.getTransformerByCreate(), { pages: v, skeHeaders: w, skeFooters: S } = a, O = q.getInstance(), D = [], { drawings: T = {} } = g.getSnapshot();
+    const p = l.getEditArea(), h = m.getTransformerByCreate(), { pages: v, skeHeaders: w, skeFooters: S } = c, O = q.getInstance(), D = [], { drawings: T = {} } = g.getSnapshot();
     for (const N of n) {
       const { drawingId: I } = N, L = T[I].layoutType, W = Mi[t];
       if (L !== W) {
@@ -247,15 +247,15 @@ const Zn = {
       if (t === "behindText" || t === "inFrontOfText") {
         const C = T[I].behindDoc, R = t === "behindText" ? oe.TRUE : oe.FALSE;
         if (C !== R) {
-          const P = O.replaceOp(["drawings", I, "behindDoc"], C, R);
-          D.push(P);
+          const y = O.replaceOp(["drawings", I, "behindDoc"], C, R);
+          D.push(y);
         }
       }
       if (t === "inline")
         continue;
       let x = null, G = 0, _ = 0;
       for (const C of v) {
-        const { headerId: R, footerId: P, marginTop: B, marginLeft: k, marginBottom: b, pageWidth: E, pageHeight: $ } = C;
+        const { headerId: R, footerId: y, marginTop: B, marginLeft: k, marginBottom: b, pageWidth: E, pageHeight: $ } = C;
         switch (p) {
           case Fe.HEADER: {
             const F = (A = w.get(R)) == null ? void 0 : A.get(E);
@@ -263,7 +263,7 @@ const Zn = {
             break;
           }
           case Fe.FOOTER: {
-            const F = (U = S.get(P)) == null ? void 0 : U.get(E);
+            const F = (U = S.get(y)) == null ? void 0 : U.get(E);
             F != null && F.skeDrawings.has(I) && (x = F.skeDrawings.get(I), G = $ - b + F.marginTop, _ = k);
             break;
           }
@@ -276,15 +276,15 @@ const Zn = {
           break;
       }
       if (x != null) {
-        const { aTop: C, aLeft: R } = x, P = T[I].docTransform.positionH;
+        const { aTop: C, aLeft: R } = x, y = T[I].docTransform.positionH;
         let B = R;
-        P.relativeFrom === ne.MARGIN ? B -= _ : P.relativeFrom === ne.COLUMN && (B -= x.columnLeft);
+        y.relativeFrom === ne.MARGIN ? B -= _ : y.relativeFrom === ne.COLUMN && (B -= x.columnLeft);
         const k = {
-          relativeFrom: P.relativeFrom,
+          relativeFrom: y.relativeFrom,
           posOffset: B
         };
-        if (P.posOffset !== k.posOffset) {
-          const F = O.replaceOp(["drawings", I, "docTransform", "positionH"], P, k);
+        if (y.posOffset !== k.posOffset) {
+          const F = O.replaceOp(["drawings", I, "docTransform", "positionH"], y, k);
           D.push(F);
         }
         const b = T[I].docTransform.positionV;
@@ -309,8 +309,8 @@ const Zn = {
       }
     };
     M.params.actions = D.reduce((N, I) => q.compose(N, I), null);
-    const y = o.syncExecuteCommand(M.id, M.params);
-    return h.refreshControls(), !!y;
+    const P = o.syncExecuteCommand(M.id, M.params);
+    return h.refreshControls(), !!P;
   }
 }, Qn = {
   id: "doc.command.update-doc-drawing-distance",
@@ -321,26 +321,26 @@ const Zn = {
     const n = i.get(z), r = i.get(Q).getCurrentUniverDocInstance();
     if (r == null)
       return !1;
-    const { drawings: o, dist: s, unitId: c } = e, d = q.getInstance(), a = [], { drawings: l = {} } = r.getSnapshot();
+    const { drawings: o, dist: s, unitId: a } = e, d = q.getInstance(), c = [], { drawings: l = {} } = r.getSnapshot();
     for (const p of o) {
       const { drawingId: h } = p;
       for (const [v, w] of Object.entries(s)) {
         const S = l[h][v];
         if (S !== w) {
           const O = d.replaceOp(["drawings", h, v], S, w);
-          a.push(O);
+          c.push(O);
         }
       }
     }
     const m = {
       id: J.id,
       params: {
-        unitId: c,
+        unitId: a,
         actions: [],
         textRanges: null
       }
     };
-    return m.params.actions = a.reduce((p, h) => q.compose(p, h), null), !!n.syncExecuteCommand(m.id, m.params);
+    return m.params.actions = c.reduce((p, h) => q.compose(p, h), null), !!n.syncExecuteCommand(m.id, m.params);
   }
 }, Jn = {
   id: "doc.command.update-doc-drawing-wrap-text",
@@ -351,23 +351,23 @@ const Zn = {
     const n = i.get(z), r = i.get(Q).getCurrentUniverDocInstance();
     if (r == null)
       return !1;
-    const { drawings: o, wrapText: s, unitId: c } = e, d = q.getInstance(), a = [], { drawings: l = {} } = r.getSnapshot();
+    const { drawings: o, wrapText: s, unitId: a } = e, d = q.getInstance(), c = [], { drawings: l = {} } = r.getSnapshot();
     for (const p of o) {
       const { drawingId: h } = p, v = l[h].wrapText;
       if (v !== s) {
         const w = d.replaceOp(["drawings", h, "wrapText"], v, s);
-        a.push(w);
+        c.push(w);
       }
     }
     const m = {
       id: J.id,
       params: {
-        unitId: c,
+        unitId: a,
         actions: [],
         textRanges: null
       }
     };
-    return m.params.actions = a.reduce((p, h) => q.compose(p, h), null), !!n.syncExecuteCommand(m.id, m.params);
+    return m.params.actions = c.reduce((p, h) => q.compose(p, h), null), !!n.syncExecuteCommand(m.id, m.params);
   }
 }, qe = {
   id: "doc.command.update-drawing-doc-transform",
@@ -378,13 +378,13 @@ const Zn = {
     const n = i.get(z), t = i.get(Q), o = i.get(ee).getRenderById(e.unitId), s = o == null ? void 0 : o.scene;
     if (s == null)
       return !1;
-    const c = s.getTransformerByCreate(), d = t.getCurrentUniverDocInstance();
+    const a = s.getTransformerByCreate(), d = t.getCurrentUniverDocInstance();
     if (d == null)
       return !1;
-    const { drawings: a, unitId: l } = e, m = q.getInstance(), g = [], { drawings: p = {} } = d.getSnapshot();
-    for (const w of a) {
+    const { drawings: c, unitId: l } = e, m = q.getInstance(), g = [], { drawings: p = {} } = d.getSnapshot();
+    for (const w of c) {
       const { drawingId: S, key: O, value: D } = w, T = p[S].docTransform[O];
-      if (!ye.diffValue(T, D)) {
+      if (!Pe.diffValue(T, D)) {
         const M = m.replaceOp(["drawings", S, "docTransform", O], T, D);
         g.push(M);
       }
@@ -400,7 +400,7 @@ const Zn = {
     };
     h.params.actions = g.reduce((w, S) => q.compose(w, S), null);
     const v = n.syncExecuteCommand(h.id, h.params);
-    return c.refreshControls(), !!v;
+    return a.refreshControls(), !!v;
   }
 }, et = {
   id: "doc.command.move-inline-drawing",
@@ -409,15 +409,15 @@ const Zn = {
     var U, N;
     if (e == null)
       return !1;
-    const n = i.get(ee), t = (U = n.getRenderById(e.unitId)) == null ? void 0 : U.with(Me), r = i.get(gn), o = n.getRenderById(e.unitId), s = o == null ? void 0 : o.scene, c = o == null ? void 0 : o.with(se).getSkeleton();
+    const n = i.get(ee), t = (U = n.getRenderById(e.unitId)) == null ? void 0 : U.with(Me), r = i.get(gn), o = n.getRenderById(e.unitId), s = o == null ? void 0 : o.scene, a = o == null ? void 0 : o.with(se).getSkeleton();
     if (s == null || t == null)
       return !1;
-    const d = s.getTransformerByCreate(), a = i.get(z), m = i.get(Q).getCurrentUniverDocInstance();
+    const d = s.getTransformerByCreate(), c = i.get(z), m = i.get(Q).getCurrentUniverDocInstance();
     if (m == null)
       return !1;
     const { drawing: g, unitId: p, offset: h, segmentId: v, segmentPage: w, needRefreshDrawings: S } = e;
     if (S)
-      return r.refreshDrawings(c), d.refreshControls(), !0;
+      return r.refreshDrawings(a), d.refreshControls(), !0;
     const O = [], { drawingId: D } = g, T = (N = t.getSegment()) != null ? N : "", M = Yn(
       v,
       T,
@@ -428,9 +428,9 @@ const Zn = {
       t
     );
     if (M == null || M.length === 0)
-      return r.refreshDrawings(c), d.refreshControls(), !1;
+      return r.refreshDrawings(a), d.refreshControls(), !1;
     O.push(...M);
-    const y = {
+    const P = {
       id: J.id,
       params: {
         unitId: p,
@@ -438,8 +438,8 @@ const Zn = {
         textRanges: null
       }
     };
-    y.params.actions = O.reduce((I, L) => q.compose(I, L), null);
-    const A = a.syncExecuteCommand(y.id, y.params);
+    P.params.actions = O.reduce((I, L) => q.compose(I, L), null);
+    const A = c.syncExecuteCommand(P.id, P.params);
     return d.refreshControls(), !!A;
   }
 }, nt = {
@@ -453,8 +453,8 @@ const Zn = {
     const n = i.get(ee), t = (x = n.getRenderById(e.unitId)) == null ? void 0 : x.with(Me), r = n.getRenderById(e.unitId), o = r == null ? void 0 : r.scene;
     if (o == null || t == null)
       return !1;
-    const s = o.getTransformerByCreate(), c = i.get(z), a = i.get(Q).getCurrentUniverDocInstance();
-    if (a == null)
+    const s = o.getTransformerByCreate(), a = i.get(z), c = i.get(Q).getCurrentUniverDocInstance();
+    if (c == null)
       return !1;
     const { drawing: l, unitId: m, offset: g, docTransform: p, segmentId: h, segmentPage: v } = e, w = [], { drawingId: S } = l, O = (G = t.getSegment()) != null ? G : "", D = Yn(
       h,
@@ -462,26 +462,26 @@ const Zn = {
       v,
       g,
       S,
-      a,
+      c,
       t
     );
     if (D == null)
       return !1;
     D.length > 0 && w.push(...D);
-    const T = q.getInstance(), { drawings: M = {} } = a.getSnapshot(), y = M[S].docTransform, { positionH: A, positionV: U, size: N, angle: I } = y;
-    if (!ye.diffValue(A, p.positionH)) {
+    const T = q.getInstance(), { drawings: M = {} } = c.getSnapshot(), P = M[S].docTransform, { positionH: A, positionV: U, size: N, angle: I } = P;
+    if (!Pe.diffValue(A, p.positionH)) {
       const _ = T.replaceOp(["drawings", S, "docTransform", "positionH"], A, p.positionH);
       w.push(_);
     }
-    if (!ye.diffValue(U, p.positionV)) {
+    if (!Pe.diffValue(U, p.positionV)) {
       const _ = T.replaceOp(["drawings", S, "docTransform", "positionV"], U, p.positionV);
       w.push(_);
     }
-    if (!ye.diffValue(N, p.size)) {
+    if (!Pe.diffValue(N, p.size)) {
       const _ = T.replaceOp(["drawings", S, "docTransform", "size"], N, p.size);
       w.push(_);
     }
-    if (!ye.diffValue(I, p.angle)) {
+    if (!Pe.diffValue(I, p.angle)) {
       const _ = T.replaceOp(["drawings", S, "docTransform", "angle"], I, p.angle);
       w.push(_);
     }
@@ -495,7 +495,7 @@ const Zn = {
       }
     };
     L.params.actions = w.reduce((_, C) => q.compose(_, C), null);
-    const W = c.syncExecuteCommand(L.id, L.params);
+    const W = a.syncExecuteCommand(L.id, L.params);
     return s.refreshControls(), !!W;
   }
 };
@@ -543,14 +543,14 @@ let on = class extends Xe {
     this.disposeWithMe(
       Le(
         n.changeStart$.subscribe((o) => {
-          var c;
+          var a;
           this._transformerCache.clear();
           const { objects: s } = o;
           for (const d of s.values()) {
-            const { oKey: a, width: l, height: m, left: g, top: p, angle: h } = d, v = this._drawingManagerService.getDrawingOKey(a);
+            const { oKey: c, width: l, height: m, left: g, top: p, angle: h } = d, v = this._drawingManagerService.getDrawingOKey(c);
             if (v == null)
               continue;
-            const w = this._univerInstanceService.getUniverDocInstance(v.unitId), S = (c = w == null ? void 0 : w.getSnapshot().drawings) == null ? void 0 : c[v.drawingId];
+            const w = this._univerInstanceService.getUniverDocInstance(v.unitId), S = (a = w == null ? void 0 : w.getSnapshot().drawings) == null ? void 0 : a[v.drawingId];
             (S == null ? void 0 : S.layoutType) === H.INLINE && d.setOpacity(0.2), S != null && this._transformerCache.set(v.drawingId, {
               drawing: S,
               top: p,
@@ -567,14 +567,14 @@ let on = class extends Xe {
     On(this._nonInlineDrawingTransform.bind(this), 50), this.disposeWithMe(
       Le(
         n.changing$.subscribe((o) => {
-          const { objects: s, offsetX: c, offsetY: d } = o;
+          const { objects: s, offsetX: a, offsetY: d } = o;
           if (s.size > 1)
             t(s);
           else if (s.size === 1) {
-            const a = this._transformerCache.values().next().value, l = s.values().next().value, { width: m, height: g, top: p, left: h, angle: v } = l;
-            if (a && m === a.width && g === a.height && p === a.top && h === a.left && v === a.angle)
+            const c = this._transformerCache.values().next().value, l = s.values().next().value, { width: m, height: g, top: p, left: h, angle: v } = l;
+            if (c && m === c.width && g === c.height && p === c.top && h === c.left && v === c.angle)
               return;
-            a && (a.drawing.layoutType, H.INLINE), a && a.drawing.layoutType === H.INLINE && c != null && d != null && this._updateInlineDrawingAnchor(a.drawing, c, d);
+            c && (c.drawing.layoutType, H.INLINE), c && c.drawing.layoutType === H.INLINE && a != null && d != null && this._updateInlineDrawingAnchor(c.drawing, a, d);
           }
         })
       )
@@ -582,21 +582,21 @@ let on = class extends Xe {
       Le(
         // eslint-disable-next-line complexity
         n.changeEnd$.subscribe((o) => {
-          const { objects: s, offsetX: c, offsetY: d } = o;
-          for (const a of s.values()) {
-            const l = this._drawingManagerService.getDrawingOKey(a.oKey);
+          const { objects: s, offsetX: a, offsetY: d } = o;
+          for (const c of s.values()) {
+            const l = this._drawingManagerService.getDrawingOKey(c.oKey);
             if (l == null)
               continue;
             const m = this._transformerCache.get(l == null ? void 0 : l.drawingId);
-            (m == null ? void 0 : m.drawing.layoutType) === H.INLINE && a.setOpacity(1);
+            (m == null ? void 0 : m.drawing.layoutType) === H.INLINE && c.setOpacity(1);
           }
           if (this._anchorShape && this._anchorShape.hide(), s.size > 1)
             this._updateMultipleDrawingDocTransform(s);
           else if (s.size === 1) {
-            const a = this._transformerCache.values().next().value, l = s.values().next().value, { width: m, height: g, top: p, left: h, angle: v } = l;
-            if (a && m === a.width && g === a.height && p === a.top && h === a.left && v === a.angle)
+            const c = this._transformerCache.values().next().value, l = s.values().next().value, { width: m, height: g, top: p, left: h, angle: v } = l;
+            if (c && m === c.width && g === c.height && p === c.top && h === c.left && v === c.angle)
               return;
-            a && a.drawing.layoutType === H.INLINE ? m !== a.width || g !== a.height || v !== a.angle ? this._updateDrawingSize(a, l) : c != null && d != null && this._moveInlineDrawing(a.drawing, c, d) : a && this._nonInlineDrawingTransform(a.drawing, l);
+            c && c.drawing.layoutType === H.INLINE ? m !== c.width || g !== c.height || v !== c.angle ? this._updateDrawingSize(c, l) : a != null && d != null && this._moveInlineDrawing(c.drawing, a, d) : c && this._nonInlineDrawingTransform(c.drawing, l);
           }
           this._transformerCache.clear();
         })
@@ -610,7 +610,7 @@ let on = class extends Xe {
     const n = [];
     let t, r;
     for (const o of e.values()) {
-      const { oKey: s, left: c, top: d, angle: a } = o;
+      const { oKey: s, left: a, top: d, angle: c } = o;
       let { width: l, height: m } = o;
       const g = this._drawingManagerService.getDrawingOKey(s);
       if (g == null)
@@ -627,18 +627,18 @@ let on = class extends Xe {
           width: l,
           height: m
         }
-      }), D !== a && n.push({
+      }), D !== c && n.push({
         drawingId: g.drawingId,
         key: "angle",
-        value: a
-      }), v !== d || w !== c) {
-        const y = d - v, A = c - w;
-        y !== 0 && n.push({
+        value: c
+      }), v !== d || w !== a) {
+        const P = d - v, A = a - w;
+        P !== 0 && n.push({
           drawingId: g.drawingId,
           key: "positionV",
           value: {
             relativeFrom: h.docTransform.positionV.relativeFrom,
-            posOffset: h.docTransform.positionV.posOffset + y
+            posOffset: h.docTransform.positionV.posOffset + P
           }
         }), A !== 0 && n.push({
           drawingId: g.drawingId,
@@ -675,13 +675,13 @@ let on = class extends Xe {
     const r = this._renderManagerService.getRenderById(e.unitId), o = r == null ? void 0 : r.with(se).getSkeleton();
     if (r == null)
       return;
-    const { mainComponent: s, scene: c } = r, d = s, a = c.getViewports()[0], {
+    const { mainComponent: s, scene: a } = r, d = s, c = a.getViewports()[0], {
       pageLayoutType: l = Mn.VERTICAL,
       pageMarginLeft: m,
       pageMarginTop: g
     } = d.getOffsetConfig();
     let p = null, h = !1, v = -1, w = "";
-    const S = 0.5, O = this._getTransformCoordForDocumentOffset(d, a, n, t);
+    const S = 0.5, O = this._getTransformCoordForDocumentOffset(d, c, n, t);
     if (O == null)
       return;
     const D = (x = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : x.with(Me);
@@ -699,18 +699,18 @@ let on = class extends Xe {
       }
     );
     if (T) {
-      const { node: _, ratioX: C, segmentPage: R, segmentId: P } = T;
-      h = C < S, p = _, v = R, w = P;
+      const { node: _, ratioX: C, segmentPage: R, segmentId: y } = T;
+      h = C < S, p = _, v = R, w = y;
     }
     if (p == null)
       return;
-    const M = o == null ? void 0 : o.findPositionByGlyph(p, v), y = this._getDocObject();
-    if (M == null || o == null || y == null || Fn(M))
+    const M = o == null ? void 0 : o.findPositionByGlyph(p, v), P = this._getDocObject();
+    if (M == null || o == null || P == null || Fn(M))
       return;
     const A = {
       ...M,
       isBack: h
-    }, U = y.document.getOffsetConfig(), N = new Nn(U, o), { cursorList: I, contentBoxPointGroup: L } = N.getRangePointData(A, A), { startOffset: W } = (G = An(I)) != null ? G : {};
+    }, U = P.document.getOffsetConfig(), N = new Nn(U, o), { cursorList: I, contentBoxPointGroup: L } = N.getRangePointData(A, A), { startOffset: W } = (G = An(I)) != null ? G : {};
     if (W != null)
       return { offset: W, contentBoxPointGroup: L, segmentId: w, segmentPage: v };
   }
@@ -720,25 +720,25 @@ let on = class extends Xe {
     const t = this._renderManagerService.getRenderById(e.unitId), r = t == null ? void 0 : t.with(se).getSkeleton(), o = r == null ? void 0 : r.getSkeletonData();
     if (o == null || t == null)
       return;
-    const { pages: s, skeHeaders: c, skeFooters: d } = o, { mainComponent: a, scene: l } = t, m = a, g = l.getViewports()[0], { pageLayoutType: p = Mn.VERTICAL, pageMarginLeft: h, pageMarginTop: v, docsLeft: w, docsTop: S } = m.getOffsetConfig(), { left: O, top: D, angle: T } = n;
-    let { width: M, height: y } = n;
+    const { pages: s, skeHeaders: a, skeFooters: d } = o, { mainComponent: c, scene: l } = t, m = c, g = l.getViewports()[0], { pageLayoutType: p = Mn.VERTICAL, pageMarginLeft: h, pageMarginTop: v, docsLeft: w, docsTop: S } = m.getOffsetConfig(), { left: O, top: D, angle: T } = n;
+    let { width: M, height: P } = n;
     const { positionV: A, positionH: U } = e.docTransform, { width: N, height: I } = this._getPageContentSize(e);
-    M = Math.min(M, N), y = Math.min(y, I);
+    M = Math.min(M, N), P = Math.min(P, I);
     let L = null, W = "", x = -1;
     const G = !1, _ = {
       ...e.docTransform,
       size: {
         width: M,
-        height: y
+        height: P
       },
       angle: T
-    }, { x: C, y: R } = l.getViewportScrollXY(g), P = this._getTransformCoordForDocumentOffset(m, g, O - C, D - R);
-    if (P == null)
+    }, { x: C, y: R } = l.getViewportScrollXY(g), y = this._getTransformCoordForDocumentOffset(m, g, O - C, D - R);
+    if (y == null)
       return;
     const B = (_e = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : _e.with(Me);
     if (B == null)
       return;
-    const k = r == null ? void 0 : r.findNodeByCoord(P, p, h, v, {
+    const k = r == null ? void 0 : r.findNodeByCoord(y, p, h, v, {
       strict: !1,
       segmentId: B.getSegment(),
       segmentPage: B.getSegmentPage()
@@ -759,7 +759,7 @@ let on = class extends Xe {
       if (x > -1 && St === x) {
         switch (Y) {
           case Rn.HEADER: {
-            const Ge = (Oe = c.get(mn)) == null ? void 0 : Oe.get(Cn);
+            const Ge = (Oe = a.get(mn)) == null ? void 0 : Oe.get(Cn);
             if (Ge)
               this._liquid.translatePagePadding({
                 marginTop: Ge.marginTop,
@@ -831,7 +831,7 @@ let on = class extends Xe {
   }
   // Update drawing when use transformer to resize it.
   _updateDrawingSize(e, n) {
-    const t = [], { drawing: r, width: o, height: s, angle: c } = e, { unitId: d, subUnitId: a } = r;
+    const t = [], { drawing: r, width: o, height: s, angle: a } = e, { unitId: d, subUnitId: c } = r;
     let { width: l, height: m, angle: g } = n;
     const { width: p, height: h } = this._getPageContentSize(r);
     l = Math.min(p, l), m = Math.min(h, m), (l !== o || m !== s) && t.push({
@@ -841,56 +841,56 @@ let on = class extends Xe {
         width: l,
         height: m
       }
-    }), g !== c && t.push({
+    }), g !== a && t.push({
       drawingId: r.drawingId,
       key: "angle",
       value: g
-    }), t.length > 0 && d && a && this._commandService.executeCommand(qe.id, {
+    }), t.length > 0 && d && c && this._commandService.executeCommand(qe.id, {
       unitId: d,
-      subUnitId: a,
+      subUnitId: c,
       drawings: t
     });
   }
   // Update inline drawing when use transformer to move it.
   _moveInlineDrawing(e, n, t) {
-    const r = this._getInlineDrawingAnchor(e, n, t), { offset: o, segmentId: s, segmentPage: c } = r != null ? r : {};
+    const r = this._getInlineDrawingAnchor(e, n, t), { offset: o, segmentId: s, segmentPage: a } = r != null ? r : {};
     return this._commandService.executeCommand(et.id, {
       unitId: e.unitId,
       subUnitId: e.unitId,
       drawing: e,
       offset: o,
       segmentId: s,
-      segmentPage: c,
+      segmentPage: a,
       needRefreshDrawings: o == null
     });
   }
   // Limit the drawing to the page area, mainly in the vertical direction,
   // and the upper and lower limits cannot exceed the page margin area.
   _limitDrawingInPage(e, n) {
-    const t = this._renderManagerService.getRenderById(e.unitId), { left: r, top: o, width: s, height: c, angle: d } = n, a = t == null ? void 0 : t.with(se).getSkeleton(), l = a == null ? void 0 : a.getSkeletonData(), { pages: m } = l != null ? l : {};
+    const t = this._renderManagerService.getRenderById(e.unitId), { left: r, top: o, width: s, height: a, angle: d } = n, c = t == null ? void 0 : t.with(se).getSkeleton(), l = c == null ? void 0 : c.getSkeletonData(), { pages: m } = l != null ? l : {};
     if (l == null || t == null || m == null)
       return {
         left: r,
         top: o,
         width: s,
-        height: c,
+        height: a,
         angle: d
       };
     const { mainComponent: g } = t, p = g, { top: h, pageLayoutType: v, pageMarginLeft: w, pageMarginTop: S } = p;
     let O = o;
     this._liquid.reset();
     for (const D of m) {
-      const { marginBottom: T, pageHeight: M } = D, y = m.indexOf(D), A = m[y + 1];
+      const { marginBottom: T, pageHeight: M } = D, P = m.indexOf(D), A = m[P + 1];
       if (A == null)
         continue;
-      if (ye.hasIntersectionBetweenTwoRanges(
+      if (Pe.hasIntersectionBetweenTwoRanges(
         o,
-        o + c,
+        o + a,
         this._liquid.y + h + M - T,
         this._liquid.y + h + M + S + A.marginTop
       )) {
-        const N = o + c / 2, I = this._liquid.y + h + M + S / 2;
-        N < I ? O = Math.min(o, this._liquid.y + h + M - T - c) : O = Math.max(o, this._liquid.y + h + M + S + A.marginTop);
+        const N = o + a / 2, I = this._liquid.y + h + M + S / 2;
+        N < I ? O = Math.min(o, this._liquid.y + h + M - T - a) : O = Math.max(o, this._liquid.y + h + M + S + A.marginTop);
       }
       this._liquid.translatePage(D, v, w, S);
     }
@@ -898,7 +898,7 @@ let on = class extends Xe {
       left: r,
       top: O,
       width: s,
-      height: c,
+      height: a,
       angle: d
     };
   }
@@ -906,15 +906,15 @@ let on = class extends Xe {
     const r = e.isMultiTransform === oe.TRUE ? n : this._limitDrawingInPage(e, n);
     if (t && r.top !== n.top)
       return;
-    const o = this._getDrawingAnchor(e, r), { offset: s, docTransform: c, segmentId: d, segmentPage: a } = o != null ? o : {};
-    return s == null || c == null ? this._updateMultipleDrawingDocTransform(/* @__PURE__ */ new Map([[e.drawingId, n]])) : this._commandService.executeCommand(nt.id, {
+    const o = this._getDrawingAnchor(e, r), { offset: s, docTransform: a, segmentId: d, segmentPage: c } = o != null ? o : {};
+    return s == null || a == null ? this._updateMultipleDrawingDocTransform(/* @__PURE__ */ new Map([[e.drawingId, n]])) : this._commandService.executeCommand(nt.id, {
       unitId: e.unitId,
       subUnitId: e.unitId,
       drawing: e,
       offset: s,
-      docTransform: c,
+      docTransform: a,
       segmentId: d,
-      segmentPage: a
+      segmentPage: c
     });
   }
   _getSceneAndTransformerByDrawingSearch(e) {
@@ -936,19 +936,19 @@ let on = class extends Xe {
     if (t == null)
       return;
     const { mainComponent: r, scene: o } = t, s = r, {
-      docsLeft: c,
+      docsLeft: a,
       docsTop: d
-    } = s.getOffsetConfig(), a = mi(n), { left: l, top: m, height: g } = a, p = l + c, h = m + d;
+    } = s.getOffsetConfig(), c = mi(n), { left: l, top: m, height: g } = c, p = l + a, h = m + d;
     if (this._anchorShape) {
       this._anchorShape.transformByState({ left: p, top: h, height: g }), this._anchorShape.show();
       return;
     }
-    const v = 6, w = new ni(Ai + ye.generateRandomId(v), {
+    const v = 6, w = new ni(Ai + Pe.generateRandomId(v), {
       left: p,
       top: h,
       height: g,
       strokeWidth: 2,
-      stroke: ti(Pt.darkGray, 1),
+      stroke: ti(yt.darkGray, 1),
       evented: !1
     });
     this._anchorShape = w, o.addObject(w, ui);
@@ -963,19 +963,19 @@ let on = class extends Xe {
         width: r,
         height: o
       };
-    const { pages: c } = s;
+    const { pages: a } = s;
     let d = null;
-    for (const a of c) {
-      const { skeDrawings: l } = a;
+    for (const c of a) {
+      const { skeDrawings: l } = c;
       if (l.has(e.drawingId)) {
-        d = a;
+        d = c;
         break;
       }
     }
     if (d) {
-      const { pageWidth: a, pageHeight: l, marginLeft: m, marginBottom: g, marginRight: p, marginTop: h } = d;
+      const { pageWidth: c, pageHeight: l, marginLeft: m, marginBottom: g, marginRight: p, marginTop: h } = d;
       return {
-        width: Math.max(r, a - m - p),
+        width: Math.max(r, c - m - p),
         height: Math.max(o, l - h - g)
       };
     } else
@@ -1007,8 +1007,8 @@ var he = function() {
       e.indexOf(t[r]) < 0 && Object.prototype.propertyIsEnumerable.call(i, t[r]) && (n[t[r]] = i[t[r]]);
   return n;
 }, tt = Xn(function(i, e) {
-  var n = i.icon, t = i.id, r = i.className, o = i.extend, s = Ei(i, ["icon", "id", "className", "extend"]), c = "univerjs-icon univerjs-icon-".concat(t, " ").concat(r || "").trim(), d = Di("_".concat(Bi()));
-  return it(n, "".concat(t), { defIds: n.defIds, idSuffix: d.current }, he({ ref: e, className: c }, s), o);
+  var n = i.icon, t = i.id, r = i.className, o = i.extend, s = Ei(i, ["icon", "id", "className", "extend"]), a = "univerjs-icon univerjs-icon-".concat(t, " ").concat(r || "").trim(), d = Di("_".concat(Bi()));
+  return it(n, "".concat(t), { defIds: n.defIds, idSuffix: d.current }, he({ ref: e, className: a }, s), o);
 });
 function it(i, e, n, t, r) {
   return Kn(i.tag, he(he({ key: e }, xi(i, n, r)), t), (Li(i, n).children || []).map(function(o, s) {
@@ -1017,11 +1017,14 @@ function it(i, e, n, t, r) {
 }
 function xi(i, e, n) {
   var t = he({}, i.attrs);
-  n != null && n.colorChannel1 && t.fill === "colorChannel1" && (t.fill = n.colorChannel1);
+  n != null && n.colorChannel1 && t.fill === "colorChannel1" && (t.fill = n.colorChannel1), i.tag === "mask" && t.id && (t.id = t.id + e.idSuffix), Object.entries(t).forEach(function(o) {
+    var s = o[0], a = o[1];
+    s === "mask" && typeof a == "string" && (t[s] = a.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+  });
   var r = e.defIds;
   return !r || r.length === 0 || (i.tag === "use" && t["xlink:href"] && (t["xlink:href"] = t["xlink:href"] + e.idSuffix), Object.entries(t).forEach(function(o) {
-    var s = o[0], c = o[1];
-    typeof c == "string" && (t[s] = c.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+    var s = o[0], a = o[1];
+    typeof a == "string" && (t[s] = a.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
   })), t;
 }
 function Li(i, e) {
@@ -1047,11 +1050,11 @@ const Sn = {
   type: K.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: (i, e) => {
-    var M, y, A, U;
+    var M, P, A, U;
     const n = i.get(z), t = i.get(Q), r = i.get(ee), o = t.getCurrentUniverDocInstance();
     if (e == null || o == null)
       return !1;
-    const s = r.getRenderById(e.unitId).with(Me), { drawings: c } = e, d = (M = s.getSegment()) != null ? M : "", a = new vn(), l = q.getInstance(), m = (A = (y = o.getSelfOrHeaderFooterModel(d).getBody()) == null ? void 0 : y.customBlocks) != null ? A : [], g = c.map((N) => m.find((I) => I.blockId === N.drawingId)).filter((N) => !!N).sort((N, I) => N.startIndex > I.startIndex ? 1 : -1), p = c[0].unitId, h = new yt();
+    const s = r.getRenderById(e.unitId).with(Me), { drawings: a } = e, d = (M = s.getSegment()) != null ? M : "", c = new vn(), l = q.getInstance(), m = (A = (P = o.getSelfOrHeaderFooterModel(d).getBody()) == null ? void 0 : P.customBlocks) != null ? A : [], g = a.map((N) => m.find((I) => I.blockId === N.drawingId)).filter((N) => !!N).sort((N, I) => N.startIndex > I.startIndex ? 1 : -1), p = a[0].unitId, h = new Pt();
     h.reset();
     const v = g[0].startIndex, w = [
       {
@@ -1068,16 +1071,16 @@ const Sn = {
     }, O = [];
     for (const N of g) {
       const { startIndex: I } = N;
-      I > h.cursor && a.push({
+      I > h.cursor && c.push({
         t: Z.RETAIN,
         len: I - h.cursor
-      }), a.push({
+      }), c.push({
         t: Z.DELETE,
         len: 1
       }), h.moveCursorTo(I + 1);
     }
     const D = ze(o, d);
-    O.push(l.editOp(a.serialize(), D));
+    O.push(l.editOp(c.serialize(), D));
     for (const N of g) {
       const { blockId: I } = N, L = ((U = o.getDrawings()) != null ? U : {})[I], x = o.getDrawingsOrder().indexOf(I), G = l.removeOp(["drawings", I], L), _ = l.removeOp(["drawingsOrder", x], I);
       O.push(G), O.push(_);
@@ -1092,11 +1095,11 @@ const Sn = {
     if (t.length === 0)
       return !1;
     const { unitId: r } = t[0], o = t.map((s) => {
-      const { unitId: c, subUnitId: d, drawingId: a, drawingType: l } = s;
+      const { unitId: a, subUnitId: d, drawingId: c, drawingType: l } = s;
       return {
-        unitId: c,
+        unitId: a,
         subUnitId: d,
-        drawingId: a,
+        drawingId: c,
         drawingType: l
       };
     });
@@ -1118,7 +1121,7 @@ const Sn = {
         t.push(g.unitId);
       });
     });
-    const r = n.getGroupDrawingOp(e), { unitId: o, subUnitId: s, undo: c, redo: d, objects: a } = r;
+    const r = n.getGroupDrawingOp(e), { unitId: o, subUnitId: s, undo: a, redo: d, objects: c } = r;
     return !1;
   }
 }, at = {
@@ -1126,18 +1129,18 @@ const Sn = {
   type: K.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: (i, e) => {
-    var y, A, U, N;
+    var P, A, U, N;
     if (e == null)
       return !1;
     const n = i.get(z), t = i.get(In), r = i.get(Q), o = t.getActiveTextRange(), s = r.getCurrentUniverDocInstance();
     if (o == null || s == null)
       return !1;
-    const c = s.getUnitId(), { drawings: d } = e, { collapsed: a, startOffset: l, segmentId: m } = o, g = s.getSelfOrHeaderFooterModel(m).getBody();
+    const a = s.getUnitId(), { drawings: d } = e, { collapsed: c, startOffset: l, segmentId: m } = o, g = s.getSelfOrHeaderFooterModel(m).getBody();
     if (g == null)
       return !1;
-    const p = new vn(), h = q.getInstance(), v = [], w = (A = (y = s.getSnapshot().drawingsOrder) == null ? void 0 : y.length) != null ? A : 0;
+    const p = new vn(), h = q.getInstance(), v = [], w = (A = (P = s.getSnapshot().drawingsOrder) == null ? void 0 : P.length) != null ? A : 0;
     let S = 0;
-    if (a)
+    if (c)
       l > 0 && p.push({
         t: Z.RETAIN,
         len: l
@@ -1151,8 +1154,8 @@ const Sn = {
           const C = W[_], R = x.indexOf(_);
           if (C == null || R < 0)
             continue;
-          const P = h.removeOp(["drawings", _], C), B = h.removeOp(["drawingsOrder", R], _);
-          v.push(P), v.push(B), S++;
+          const y = h.removeOp(["drawings", _], C), B = h.removeOp(["drawingsOrder", R], _);
+          v.push(y), v.push(B), S++;
         }
     }
     p.push({
@@ -1175,7 +1178,7 @@ const Sn = {
     const T = {
       id: J.id,
       params: {
-        unitId: c,
+        unitId: a,
         actions: [],
         textRanges: []
       }
@@ -1189,15 +1192,15 @@ const Sn = {
     const n = i.get(z), t = i.get(Be);
     if (e == null)
       return !1;
-    const { unitId: r, subUnitId: o, drawingIds: s, arrangeType: c } = e, d = { unitId: r, subUnitId: o, drawingIds: s };
-    let a;
-    if (c === Ze.forward ? a = t.getForwardDrawingsOp(d) : c === Ze.backward ? a = t.getBackwardDrawingOp(d) : c === Ze.front ? a = t.getFrontDrawingsOp(d) : c === Ze.back && (a = t.getBackDrawingsOp(d)), a == null)
+    const { unitId: r, subUnitId: o, drawingIds: s, arrangeType: a } = e, d = { unitId: r, subUnitId: o, drawingIds: s };
+    let c;
+    if (a === Ze.forward ? c = t.getForwardDrawingsOp(d) : a === Ze.backward ? c = t.getBackwardDrawingOp(d) : a === Ze.front ? c = t.getFrontDrawingsOp(d) : a === Ze.back && (c = t.getBackDrawingsOp(d)), c == null)
       return !1;
-    const { redo: l } = a;
+    const { redo: l } = c;
     if (l == null)
       return !1;
     const m = [];
-    let g = ye.deepClone(l);
+    let g = Pe.deepClone(l);
     g = g.slice(3), g.unshift("drawingsOrder"), m.push(g);
     const p = {
       id: J.id,
@@ -1222,7 +1225,7 @@ const Sn = {
         t.push(g.unitId);
       });
     });
-    const r = n.getUngroupDrawingOp(e), { unitId: o, subUnitId: s, undo: c, redo: d, objects: a } = r;
+    const r = n.getUngroupDrawingOp(e), { unitId: o, subUnitId: s, undo: a, redo: d, objects: c } = r;
     return !1;
   }
 };
@@ -1232,17 +1235,17 @@ var ki = Object.getOwnPropertyDescriptor, Fi = (i, e, n, t) => {
   return r;
 }, me = (i, e) => (n, t) => e(n, t, i);
 let sn = class extends Xe {
-  constructor(i, e, n, t, r, o, s, c, d, a, l, m, g) {
-    super(), this._context = i, this._commandService = e, this._docSelectionManagerService = n, this._renderManagerSrv = t, this._imageIoService = r, this._docDrawingService = o, this._drawingManagerService = s, this._contextService = c, this._messageService = d, this._localeService = a, this._docSelectionRenderService = l, this._docRefreshDrawingsService = m, this._fileOpenerService = g, this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener(), this._transformDrawingListener(), this._editAreaChangeListener();
+  constructor(i, e, n, t, r, o, s, a, d, c, l, m, g) {
+    super(), this._context = i, this._commandService = e, this._docSelectionManagerService = n, this._renderManagerSrv = t, this._imageIoService = r, this._docDrawingService = o, this._drawingManagerService = s, this._contextService = a, this._messageService = d, this._localeService = c, this._docSelectionRenderService = l, this._docRefreshDrawingsService = m, this._fileOpenerService = g, this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener(), this._transformDrawingListener(), this._editAreaChangeListener();
   }
   async insertDocImage() {
     const i = await this._fileOpenerService.openFile({
       multiple: !0,
       accept: Vt.map((n) => `.${n.replace("image/", "")}`).join(",")
     }), e = i.length;
-    return e > Pn ? (this._messageService.show({
+    return e > yn ? (this._messageService.show({
       type: Ln.Error,
-      content: this._localeService.t("update-status.exceedMaxCount", String(Pn))
+      content: this._localeService.t("update-status.exceedMaxCount", String(yn))
     }), !1) : e === 0 ? !1 : (await this._insertFloatImages(i), !0);
   }
   // eslint-disable-next-line max-lines-per-function
@@ -1275,14 +1278,14 @@ let sn = class extends Xe {
     for (const r of e) {
       if (r == null)
         continue;
-      const { imageId: o, imageSourceType: s, source: c, base64Cache: d } = r, { width: a, height: l, image: m } = await $t(d || "");
+      const { imageId: o, imageSourceType: s, source: a, base64Cache: d } = r, { width: c, height: l, image: m } = await $t(d || "");
       this._imageIoService.addImageSourceCache(o, s, m);
       let g = 1;
-      if (a > yn || l > bn) {
-        const w = yn / a, S = bn / l;
+      if (c > Pn || l > bn) {
+        const w = Pn / c, S = bn / l;
         g = Math.min(w, S);
       }
-      const p = this._getImagePosition(a * g, l * g);
+      const p = this._getImagePosition(c * g, l * g);
       if (p == null)
         return;
       const h = {
@@ -1291,7 +1294,7 @@ let sn = class extends Xe {
         drawingId: o,
         drawingType: Mt.DRAWING_IMAGE,
         imageSourceType: s,
-        source: c,
+        source: a,
         transform: pi(p),
         docTransform: p,
         behindDoc: oe.FALSE,
@@ -1393,30 +1396,30 @@ let sn = class extends Xe {
     );
   }
   _findSegmentIdByDrawingId(i) {
-    var s, c, d;
+    var s, a, d;
     const { unit: e } = this._context, { body: n, headers: t = {}, footers: r = {} } = e.getSnapshot();
-    if (((s = n == null ? void 0 : n.customBlocks) != null ? s : []).some((a) => a.blockId === i))
+    if (((s = n == null ? void 0 : n.customBlocks) != null ? s : []).some((c) => c.blockId === i))
       return "";
-    for (const a of Object.keys(t))
-      if ((c = t[a].body.customBlocks) != null && c.some((l) => l.blockId === i))
-        return a;
-    for (const a of Object.keys(r))
-      if ((d = r[a].body.customBlocks) != null && d.some((l) => l.blockId === i))
-        return a;
+    for (const c of Object.keys(t))
+      if ((a = t[c].body.customBlocks) != null && a.some((l) => l.blockId === i))
+        return c;
+    for (const c of Object.keys(r))
+      if ((d = r[c].body.customBlocks) != null && d.some((l) => l.blockId === i))
+        return c;
     return "";
   }
   // Update drawings edit status and opacity. You can not edit header footer images when you are editing body. and vice verse.
   _updateDrawingsEditStatus() {
-    var c;
-    const { unit: i, scene: e, unitId: n } = this._context, t = (c = this._renderManagerSrv.getRenderById(n)) == null ? void 0 : c.with(se).getViewModel();
+    var a;
+    const { unit: i, scene: e, unitId: n } = this._context, t = (a = this._renderManagerSrv.getRenderById(n)) == null ? void 0 : a.with(se).getViewModel();
     if (t == null || i == null)
       return;
     const r = i.getSnapshot(), { drawings: o = {} } = r, s = t.getEditArea() === Fe.BODY;
     for (const d of Object.keys(o)) {
-      const a = o[d], l = zt({ unitId: n, drawingId: a.drawingId, subUnitId: n }), m = e.fuzzyMathObjects(l, !0);
+      const c = o[d], l = zt({ unitId: n, drawingId: c.drawingId, subUnitId: n }), m = e.fuzzyMathObjects(l, !0);
       if (m.length)
         for (const g of m)
-          e.detachTransformerFrom(g), g.setOpacity(0.5), (s && a.isMultiTransform !== oe.TRUE || !s && a.isMultiTransform === oe.TRUE) && (e.attachTransformerTo(g), g.setOpacity(1));
+          e.detachTransformerFrom(g), g.setOpacity(0.5), (s && c.isMultiTransform !== oe.TRUE || !s && c.isMultiTransform === oe.TRUE) && (e.attachTransformerTo(g), g.setOpacity(1));
     }
   }
   _editAreaChangeListener() {
@@ -1441,7 +1444,7 @@ let sn = class extends Xe {
   _setDrawingSelections(i) {
     var r, o;
     const { unit: e } = this._context, n = (o = (r = e.getSnapshot().body) == null ? void 0 : r.customBlocks) != null ? o : [], t = i.map((s) => {
-      const c = s.drawingId, d = n.find((a) => a.blockId === c);
+      const a = s.drawingId, d = n.find((c) => c.blockId === a);
       return d ? d.startIndex : null;
     }).filter((s) => s !== null).map((s) => ({ startOffset: s, endOffset: s + 1 }));
     this._docSelectionManagerService.replaceDocRanges(t);
@@ -1472,15 +1475,15 @@ const lt = {
   id: "doc.command.move-drawing",
   type: K.COMMAND,
   handler: (i, e) => {
-    const n = i.get(z), t = i.get(Be), r = i.get(Q), o = i.get(ee), { direction: s } = e, c = t.getFocusDrawings();
-    if (c.length === 0)
+    const n = i.get(z), t = i.get(Be), r = i.get(Q), o = i.get(ee), { direction: s } = e, a = t.getFocusDrawings();
+    if (a.length === 0)
       return !1;
-    const d = c[0].unitId, a = o.getRenderById(d), l = a == null ? void 0 : a.scene;
+    const d = a[0].unitId, c = o.getRenderById(d), l = c == null ? void 0 : c.scene;
     if (l == null)
       return !1;
-    const m = l.getTransformerByCreate(), g = r.getUniverDocInstance(d), p = c.map((v) => {
-      var y, A, U, N, I;
-      const { drawingId: w } = v, S = (y = g == null ? void 0 : g.getSnapshot().drawings) == null ? void 0 : y[w];
+    const m = l.getTransformerByCreate(), g = r.getUniverDocInstance(d), p = a.map((v) => {
+      var P, A, U, N, I;
+      const { drawingId: w } = v, S = (P = g == null ? void 0 : g.getSnapshot().drawings) == null ? void 0 : P[w];
       if (S == null || S.layoutType === H.INLINE)
         return null;
       const { positionH: O, positionV: D } = S.docTransform, T = { ...O }, M = { ...D };
@@ -1564,10 +1567,10 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
   imageCommonPanelSpan2: Xi,
   imageCommonPanelInput: Ki
 }, Hn = -1e3, Wn = 1e3, Yi = (i) => {
-  const e = we(z), n = we(ln), t = we(Ie), r = we(ee), o = we(Q), { drawings: s } = i, c = s[0];
-  if (c == null)
+  const e = we(z), n = we(ln), t = we(Ie), r = we(ee), o = we(Q), { drawings: s } = i, a = s[0];
+  if (a == null)
     return;
-  const { unitId: d } = c, a = o.getUniverDocInstance(d), l = a == null ? void 0 : a.getSnapshot().documentStyle.documentFlavor, m = r.getRenderById(d), g = m == null ? void 0 : m.scene;
+  const { unitId: d } = a, c = o.getUniverDocInstance(d), l = c == null ? void 0 : c.getSnapshot().documentStyle.documentFlavor, m = r.getRenderById(d), g = m == null ? void 0 : m.scene;
   if (g == null)
     return;
   const p = g.getTransformerByCreate(), h = [{
@@ -1600,21 +1603,21 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
   }), [T, M] = re({
     relativeFrom: V.PAGE,
     posOffset: 0
-  }), [y, A] = re(!0), [U, N] = re(!0);
+  }), [P, A] = re(!0), [U, N] = re(!0);
   function I(C, R) {
     var b;
     C === "positionH" ? D(R) : M(R);
-    const P = t.getFocusDrawings();
-    if (P.length === 0)
+    const y = t.getFocusDrawings();
+    if (y.length === 0)
       return;
-    const B = P.map((E) => ({
+    const B = y.map((E) => ({
       unitId: E.unitId,
       subUnitId: E.subUnitId,
       drawingId: E.drawingId
     }));
     e.executeCommand(qe.id, {
-      unitId: P[0].unitId,
-      subUnitId: P[0].unitId,
+      unitId: y[0].unitId,
+      subUnitId: y[0].unitId,
       drawings: B.map((E) => ({
         drawingId: E.drawingId,
         key: C,
@@ -1626,7 +1629,7 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
   }
   function L(C) {
     var ie, _e, Se;
-    const R = O.relativeFrom, P = O.posOffset, B = Number(C);
+    const R = O.relativeFrom, y = O.posOffset, B = Number(C);
     if (R === B)
       return;
     const k = t.getFocusDrawings();
@@ -1661,13 +1664,13 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
     R === ne.COLUMN ? ce -= $.columnLeft : R === ne.MARGIN && (ce -= F), B === ne.COLUMN ? ce += $.columnLeft : B === ne.MARGIN ? ce += F : ne.PAGE;
     const te = {
       relativeFrom: B,
-      posOffset: (P != null ? P : 0) - ce
+      posOffset: (y != null ? y : 0) - ce
     };
     I("positionH", te);
   }
   function W(C) {
     var Oe, Ne, Ae, Te, le, ge;
-    const R = T.relativeFrom, P = T.posOffset, B = Number(C);
+    const R = T.relativeFrom, y = T.posOffset, B = Number(C);
     if (R === B)
       return;
     const k = t.getFocusDrawings();
@@ -1683,19 +1686,19 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
     R === V.PARAGRAPH ? de -= _e.top : R === V.LINE ? de -= te.top : R === V.PAGE && (de += Se.marginTop), B === V.PARAGRAPH ? de += _e.top : B === V.LINE ? de += te.top : B === V.PAGE && (de -= Se.marginTop);
     const De = {
       relativeFrom: B,
-      posOffset: (P != null ? P : 0) - de
+      posOffset: (y != null ? y : 0) - de
     };
     I("positionV", De);
   }
   function x(C) {
     var E;
-    const R = a == null ? void 0 : a.getSnapshot(), P = (E = R == null ? void 0 : R.drawings) == null ? void 0 : E[C.drawingId];
-    if (P == null)
+    const R = c == null ? void 0 : c.getSnapshot(), y = (E = R == null ? void 0 : R.drawings) == null ? void 0 : E[C.drawingId];
+    if (y == null)
       return;
-    const { layoutType: B } = P, {
+    const { layoutType: B } = y, {
       positionH: k,
       positionV: b
-    } = P.docTransform;
+    } = y.docTransform;
     D(k), M(b), S(B === H.INLINE), A(b.relativeFrom === V.PARAGRAPH || b.relativeFrom === V.LINE);
   }
   function G() {
@@ -1707,14 +1710,14 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
   }
   return _n(() => {
     G();
-    const C = t.focus$.subscribe((P) => {
-      if (P.length === 0) {
+    const C = t.focus$.subscribe((y) => {
+      if (y.length === 0) {
         N(!1);
         return;
       }
-      N(!0), x(P[0]);
-    }), R = e.onCommandExecuted(async (P) => {
-      P.id === J.id && G();
+      N(!0), x(y[0]);
+    }), R = e.onCommandExecuted(async (y) => {
+      y.id === J.id && G();
     });
     return () => {
       C.unsubscribe(), R.dispose();
@@ -1792,16 +1795,16 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
       ] }) })
     ] }),
     /* @__PURE__ */ f("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: j(u.imageCommonPanelColumn, u.imageCommonPanelSubtitle), children: /* @__PURE__ */ f("div", { children: n.t("image-position.options") }) }) }),
-    /* @__PURE__ */ f("div", { className: u.imageCommonPanelRow, style: { marginBottom: "50px" }, children: /* @__PURE__ */ f("div", { className: u.imageCommonPanelColumn, children: /* @__PURE__ */ f(Ci, { disabled: w, checked: y, onChange: _, children: n.t("image-position.moveObjectWithText") }) }) })
+    /* @__PURE__ */ f("div", { className: u.imageCommonPanelRow, style: { marginBottom: "50px" }, children: /* @__PURE__ */ f("div", { className: u.imageCommonPanelColumn, children: /* @__PURE__ */ f(Ci, { disabled: w, checked: P, onChange: _, children: n.t("image-position.moveObjectWithText") }) }) })
   ] });
 }, Je = 0, en = 100, Zi = (i) => {
-  const e = we(z), n = we(ln), t = we(Ie), r = we(ee), o = we(Q), { drawings: s } = i, c = s[0];
-  if (c == null)
+  const e = we(z), n = we(ln), t = we(Ie), r = we(ee), o = we(Q), { drawings: s } = i, a = s[0];
+  if (a == null)
     return null;
-  const { unitId: d } = c, a = o.getUniverDocInstance(d), l = r.getRenderById(d);
+  const { unitId: d } = a, c = o.getUniverDocInstance(d), l = r.getRenderById(d);
   if ((l == null ? void 0 : l.scene) == null)
     return null;
-  const [g, p] = re(!0), [h, v] = re(!0), [w, S] = re(!0), [O, D] = re(ue.INLINE), [T, M] = re(""), [y, A] = re({
+  const [g, p] = re(!0), [h, v] = re(!0), [w, S] = re(!0), [O, D] = re(ue.INLINE), [T, M] = re(""), [P, A] = re({
     distT: 0,
     distL: 0,
     distB: 0,
@@ -1812,14 +1815,14 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
     const C = t.getFocusDrawings();
     if (C.length === 0)
       return;
-    const { unitId: R, subUnitId: P } = C[0], B = C.map(({ unitId: k, subUnitId: b, drawingId: E }) => ({
+    const { unitId: R, subUnitId: y } = C[0], B = C.map(({ unitId: k, subUnitId: b, drawingId: E }) => ({
       unitId: k,
       subUnitId: b,
       drawingId: E
     }));
     e.executeCommand(Zn.id, {
       unitId: R,
-      subUnitId: P,
+      subUnitId: y,
       drawings: B,
       wrappingStyle: _
     });
@@ -1829,10 +1832,10 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
     const C = t.getFocusDrawings();
     if (C.length === 0)
       return;
-    const R = C.map((P) => ({
-      unitId: P.unitId,
-      subUnitId: P.subUnitId,
-      drawingId: P.drawingId
+    const R = C.map((y) => ({
+      unitId: y.unitId,
+      subUnitId: y.subUnitId,
+      drawingId: y.drawingId
     }));
     e.executeCommand(Jn.id, {
       unitId: C[0].unitId,
@@ -1844,19 +1847,19 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
   function W(_, C) {
     if (_ == null)
       return;
-    const R = { ...y, [C]: _ };
+    const R = { ...P, [C]: _ };
     A(R);
-    const P = t.getFocusDrawings();
-    if (P.length === 0)
+    const y = t.getFocusDrawings();
+    if (y.length === 0)
       return;
-    const B = P.map((k) => ({
+    const B = y.map((k) => ({
       unitId: k.unitId,
       subUnitId: k.subUnitId,
       drawingId: k.drawingId
     }));
     e.executeCommand(Qn.id, {
-      unitId: P[0].unitId,
-      subUnitId: P[0].unitId,
+      unitId: y[0].unitId,
+      subUnitId: y[0].unitId,
       drawings: B,
       dist: {
         [C]: _
@@ -1869,12 +1872,12 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
   }
   function G(_) {
     var Y, ae;
-    const C = (ae = (Y = a == null ? void 0 : a.getSnapshot()) == null ? void 0 : Y.drawings) == null ? void 0 : ae[_.drawingId];
+    const C = (ae = (Y = c == null ? void 0 : c.getSnapshot()) == null ? void 0 : Y.drawings) == null ? void 0 : ae[_.drawingId];
     if (C == null)
       return;
     const {
       distT: R = 0,
-      distL: P = 0,
+      distL: y = 0,
       distB: B = 0,
       distR: k = 0,
       layoutType: b = H.INLINE,
@@ -1883,7 +1886,7 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
     } = C;
     if (A({
       distT: R,
-      distL: P,
+      distL: y,
       distB: B,
       distR: k
     }), M($), p(b !== H.WRAP_SQUARE), b === H.WRAP_NONE || b === H.INLINE ? v(!0) : v(!1), b === H.WRAP_NONE || b === H.INLINE || b === H.WRAP_TOP_AND_BOTTOM ? S(!0) : S(!1), b === H.WRAP_NONE)
@@ -1921,17 +1924,17 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
     /* @__PURE__ */ f("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: j(u.imageCommonPanelColumn, u.imageCommonPanelTitle), children: /* @__PURE__ */ f("div", { children: n.t("image-text-wrap.title") }) }) }),
     /* @__PURE__ */ f("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: j(u.imageCommonPanelColumn, u.imageCommonPanelSubtitle), children: /* @__PURE__ */ f("div", { children: n.t("image-text-wrap.wrappingStyle") }) }) }),
     /* @__PURE__ */ f("div", { className: j(u.imageCommonPanelRow), children: /* @__PURE__ */ f("div", { className: j(u.imageCommonPanelColumn), children: /* @__PURE__ */ X(Un, { value: O, onChange: I, direction: "vertical", children: [
-      /* @__PURE__ */ f(Pe, { value: ue.INLINE, children: n.t("image-text-wrap.inline") }),
-      /* @__PURE__ */ f(Pe, { value: ue.WRAP_SQUARE, children: n.t("image-text-wrap.square") }),
-      /* @__PURE__ */ f(Pe, { value: ue.WRAP_TOP_AND_BOTTOM, children: n.t("image-text-wrap.topAndBottom") }),
-      /* @__PURE__ */ f(Pe, { value: ue.BEHIND_TEXT, children: n.t("image-text-wrap.behindText") }),
-      /* @__PURE__ */ f(Pe, { value: ue.IN_FRONT_OF_TEXT, children: n.t("image-text-wrap.inFrontText") })
+      /* @__PURE__ */ f(ye, { value: ue.INLINE, children: n.t("image-text-wrap.inline") }),
+      /* @__PURE__ */ f(ye, { value: ue.WRAP_SQUARE, children: n.t("image-text-wrap.square") }),
+      /* @__PURE__ */ f(ye, { value: ue.WRAP_TOP_AND_BOTTOM, children: n.t("image-text-wrap.topAndBottom") }),
+      /* @__PURE__ */ f(ye, { value: ue.BEHIND_TEXT, children: n.t("image-text-wrap.behindText") }),
+      /* @__PURE__ */ f(ye, { value: ue.IN_FRONT_OF_TEXT, children: n.t("image-text-wrap.inFrontText") })
     ] }) }) }),
     /* @__PURE__ */ f("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: j(u.imageCommonPanelColumn, u.imageCommonPanelSubtitle), children: /* @__PURE__ */ f("div", { children: n.t("image-text-wrap.wrapText") }) }) }),
     /* @__PURE__ */ f("div", { className: j(u.imageCommonPanelRow), children: /* @__PURE__ */ f("div", { className: j(u.imageCommonPanelColumn), children: /* @__PURE__ */ X(Un, { disabled: g, value: T, onChange: L, direction: "horizontal", children: [
-      /* @__PURE__ */ f(Pe, { value: $e.BOTH_SIDES, children: n.t("image-text-wrap.bothSide") }),
-      /* @__PURE__ */ f(Pe, { value: $e.LEFT, children: n.t("image-text-wrap.leftOnly") }),
-      /* @__PURE__ */ f(Pe, { value: $e.RIGHT, children: n.t("image-text-wrap.rightOnly") })
+      /* @__PURE__ */ f(ye, { value: $e.BOTH_SIDES, children: n.t("image-text-wrap.bothSide") }),
+      /* @__PURE__ */ f(ye, { value: $e.LEFT, children: n.t("image-text-wrap.leftOnly") }),
+      /* @__PURE__ */ f(ye, { value: $e.RIGHT, children: n.t("image-text-wrap.rightOnly") })
     ] }) }) }),
     /* @__PURE__ */ f("div", { className: u.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: j(u.imageCommonPanelColumn, u.imageCommonPanelSubtitle), children: /* @__PURE__ */ f("div", { children: n.t("image-text-wrap.distanceFromText") }) }) }),
     /* @__PURE__ */ X("div", { className: u.imageCommonPanelRow, children: [
@@ -1944,7 +1947,7 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
             max: en,
             disabled: h,
             precision: 1,
-            value: y.distT,
+            value: P.distT,
             onChange: (_) => {
               W(_, "distT");
             },
@@ -1961,7 +1964,7 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
             max: en,
             disabled: w,
             precision: 1,
-            value: y.distL,
+            value: P.distL,
             onChange: (_) => {
               W(_, "distL");
             },
@@ -1980,7 +1983,7 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
             max: en,
             disabled: h,
             precision: 1,
-            value: y.distB,
+            value: P.distB,
             onChange: (_) => {
               W(_, "distB");
             },
@@ -1997,7 +2000,7 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
             max: en,
             disabled: w,
             precision: 1,
-            value: y.distR,
+            value: P.distR,
             onChange: (_) => {
               W(_, "distR");
             },
@@ -2028,10 +2031,10 @@ const Wi = "univer-image-common-panel", Gi = "univer-image-common-panel-grid", V
       var s;
       const o = e.getActiveTextRange();
       if (o) {
-        const { segmentId: c, startOffset: d, endOffset: a } = o, l = n.getCurrentUniverDocInstance(), m = (s = l == null ? void 0 : l.getSelfOrHeaderFooterModel(c).getBody()) == null ? void 0 : s.tables;
+        const { segmentId: a, startOffset: d, endOffset: c } = o, l = n.getCurrentUniverDocInstance(), m = (s = l == null ? void 0 : l.getSelfOrHeaderFooterModel(a).getBody()) == null ? void 0 : s.tables;
         if (m && m.length && m.some((g) => {
           const { startIndex: p, endIndex: h } = g;
-          return d >= p && d < h || a >= p && a < h;
+          return d >= p && d < h || c >= p && c < h;
         })) {
           t.next(!0);
           return;
@@ -2235,14 +2238,14 @@ let cn = class extends Nt {
           const s = t.getSelectedObjectMap();
           if (r.forEach((w) => w.dispose()), r.length = 0, s.size > 1)
             return;
-          const c = s.values().next().value;
-          if (!c)
-            return;
-          const d = c.oKey, a = this._drawingManagerService.getDrawingOKey(d);
+          const a = s.values().next().value;
           if (!a)
             return;
-          const { unitId: l, subUnitId: m, drawingId: g } = a, p = this._canvasPopManagerService.attachPopupToObject(
-            c,
+          const d = a.oKey, c = this._drawingManagerService.getDrawingOKey(d);
+          if (!c)
+            return;
+          const { unitId: l, subUnitId: m, drawingId: g } = c, p = this._canvasPopManagerService.attachPopupToObject(
+            a,
             {
               componentKey: Yt,
               direction: "horizontal",
@@ -2328,10 +2331,10 @@ var mr = Object.getOwnPropertyDescriptor, ur = (i, e, n, t) => {
   return r;
 }, xe = (i, e) => (n, t) => e(n, t, i);
 let wn = class extends Xe {
-  constructor(e, n, t, r, o, s, c, d) {
+  constructor(e, n, t, r, o, s, a, d) {
     super();
     Ce(this, "_liquid", new jn());
-    this._context = e, this._docSkeletonManagerService = n, this._commandService = t, this._editorService = r, this._drawingManagerService = o, this._docRefreshDrawingsService = s, this._univerInstanceService = c, this._lifecycleService = d, this._initialize(), this._commandExecutedListener();
+    this._context = e, this._docSkeletonManagerService = n, this._commandService = t, this._editorService = r, this._drawingManagerService = o, this._docRefreshDrawingsService = s, this._univerInstanceService = a, this._lifecycleService = d, this._initialize(), this._commandExecutedListener();
   }
   _initialize() {
     this._initialRenderRefresh(), this._drawingInitializeListener(), this._initResize();
@@ -2351,14 +2354,14 @@ let wn = class extends Xe {
           const t = n.params, { unitId: r } = t, { unitId: o, mainComponent: s } = this._context;
           if (r !== o)
             return;
-          const c = this._docSkeletonManagerService.getSkeleton();
-          if (c == null)
+          const a = this._docSkeletonManagerService.getSkeleton();
+          if (a == null)
             return;
           if (this._editorService.isEditor(o) && o !== xt) {
             s == null || s.makeDirty();
             return;
           }
-          this._refreshDrawing(c);
+          this._refreshDrawing(a);
         }
       })
     );
@@ -2380,20 +2383,20 @@ let wn = class extends Xe {
     const n = e == null ? void 0 : e.getSkeletonData(), { mainComponent: t, unitId: r } = this._context, o = t;
     if (!n)
       return;
-    const { left: s, top: c, pageLayoutType: d, pageMarginLeft: a, pageMarginTop: l } = o, { pages: m, skeHeaders: g, skeFooters: p } = n, h = {};
+    const { left: s, top: a, pageLayoutType: d, pageMarginLeft: c, pageMarginTop: l } = o, { pages: m, skeHeaders: g, skeFooters: p } = n, h = {};
     this._liquid.reset();
     for (let T = 0, M = m.length; T < M; T++) {
-      const y = m[T], { headerId: A, footerId: U, pageWidth: N } = y;
+      const P = m[T], { headerId: A, footerId: U, pageWidth: N } = P;
       if (A) {
         const I = (O = g.get(A)) == null ? void 0 : O.get(N);
         I && this._calculateDrawingPosition(
           r,
           I,
           s,
-          c,
+          a,
           h,
           I.marginTop,
-          y.marginLeft
+          P.marginLeft
         );
       }
       if (U) {
@@ -2402,13 +2405,13 @@ let wn = class extends Xe {
           r,
           I,
           s,
-          c,
+          a,
           h,
-          y.pageHeight - y.marginBottom + I.marginTop,
-          y.marginLeft
+          P.pageHeight - P.marginBottom + I.marginTop,
+          P.marginLeft
         );
       }
-      this._calculateDrawingPosition(r, y, s, c, h, y.marginTop, y.marginLeft), this._liquid.translatePage(y, d, a, l);
+      this._calculateDrawingPosition(r, P, s, a, h, P.marginTop, P.marginLeft), this._liquid.translatePage(P, d, c, l);
     }
     const v = Object.values(h), w = v.filter((T) => !T.isMultiTransform), S = v.filter((T) => T.isMultiTransform);
     w.length > 0 && this._drawingManagerService.refreshTransform(w), this._handleMultiDrawingsTransform(S);
@@ -2416,23 +2419,23 @@ let wn = class extends Xe {
   _handleMultiDrawingsTransform(e) {
     const { scene: n, unitId: t } = this._context, r = n.getTransformerByCreate();
     e.forEach((d) => {
-      const a = this._drawingManagerService.getDrawingByParam(d);
-      a != null && (a.transform = d.transform, a.transforms = d.transforms, a.isMultiTransform = d.isMultiTransform);
+      const c = this._drawingManagerService.getDrawingByParam(d);
+      c != null && (c.transform = d.transform, c.transforms = d.transforms, c.isMultiTransform = d.isMultiTransform);
     });
-    const s = [...r.getSelectedObjectMap().keys()], c = Object.values(this._drawingManagerService.getDrawingData(t, t)).filter((d) => d.isMultiTransform === oe.TRUE);
-    this._drawingManagerService.removeNotification(c), e.length > 0 && this._drawingManagerService.addNotification(e);
+    const s = [...r.getSelectedObjectMap().keys()], a = Object.values(this._drawingManagerService.getDrawingData(t, t)).filter((d) => d.isMultiTransform === oe.TRUE);
+    this._drawingManagerService.removeNotification(a), e.length > 0 && this._drawingManagerService.addNotification(e);
     for (const d of s) {
-      const a = n.getObject(d);
-      a && r.setSelectedControl(a);
+      const c = n.getObject(d);
+      c && r.setSelectedControl(c);
     }
   }
-  _calculateDrawingPosition(e, n, t, r, o, s, c) {
+  _calculateDrawingPosition(e, n, t, r, o, s, a) {
     const { skeDrawings: d } = n;
     this._liquid.translatePagePadding({
       marginTop: s,
-      marginLeft: c
-    }), d.forEach((a) => {
-      const { aLeft: l, aTop: m, height: g, width: p, angle: h, drawingId: v, drawingOrigin: w } = a, S = w.layoutType === H.WRAP_NONE && w.behindDoc === oe.TRUE, { isMultiTransform: O = oe.FALSE } = w, D = {
+      marginLeft: a
+    }), d.forEach((c) => {
+      const { aLeft: l, aTop: m, height: g, width: p, angle: h, drawingId: v, drawingOrigin: w } = c, S = w.layoutType === H.WRAP_NONE && w.behindDoc === oe.TRUE, { isMultiTransform: O = oe.FALSE } = w, D = {
         left: l + t + this._liquid.x,
         top: m + r + this._liquid.y,
         width: p,
@@ -2450,7 +2453,7 @@ let wn = class extends Xe {
       } : O === oe.TRUE && o[v].transforms.push(D);
     }), this._liquid.restorePagePadding({
       marginTop: s,
-      marginLeft: c
+      marginLeft: a
     });
   }
   _drawingInitializeListener() {