@univerjs/docs-drawing-ui 0.6.10-nightly.202504271606 → 0.6.10-nightly.202504281607

package/lib/index.js

@@ -1,7 +1,7 @@
 var kt = Object.defineProperty;
 var Wt = (i, e, n) => e in i ? kt(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n;
 var Se = (i, e, n) => Wt(i, typeof e != "symbol" ? e + "" : e, n);
-import { CommandType as Y, ICommandService as $, IUniverInstanceService as q, TextX as On, JSONX as X, MemoryCursor as Ht, TextXActionType as Q, IUndoRedoService as Jn, BuildTextUtils as Gt, ArrangeTypeEnum as en, Tools as be, Inject as J, IContextService as et, LocaleService as fn, Disposable as Be, WrapTextType as Ke, PositionedObjectLayoutType as W, BooleanNumber as ae, DrawingTypeEnum as Ue, ObjectRelativeFromV as H, ObjectRelativeFromH as ne, FOCUSING_COMMON_DRAWINGS as sn, UniverInstanceType as _e, Direction as fe, DocumentFlavor as In, DOCS_ZEN_EDITOR_UNIT_ID_KEY as Pn, FOCUSING_UNIVER_EDITOR as jt, UndoCommand as Vt, RedoCommand as $t, DisposableCollection as zt, toDisposable as Oe, fromEventSubject as nt, generateRandomId as Xt, Injector as tt, PRINT_CHART_COMPONENT_KEY as qt, throttle as An, COLORS as Kt, RxDisposable as Yt, LifecycleService as Zt, LifecycleStages as xn, DependentOn as Qt, IConfigService as Jt, Plugin as ei, merge as ni } from "@univerjs/core";
+import { CommandType as Y, ICommandService as $, IUniverInstanceService as q, TextX as On, JSONX as X, MemoryCursor as Ht, TextXActionType as Q, IUndoRedoService as Jn, BuildTextUtils as Gt, ArrangeTypeEnum as en, Tools as be, Inject as J, IContextService as et, LocaleService as fn, Disposable as Be, WrapTextType as Ke, PositionedObjectLayoutType as W, BooleanNumber as ae, DrawingTypeEnum as Ue, ObjectRelativeFromV as H, ObjectRelativeFromH as ne, FOCUSING_COMMON_DRAWINGS as sn, UniverInstanceType as _e, Direction as fe, DocumentFlavor as In, DOCS_ZEN_EDITOR_UNIT_ID_KEY as Pn, FOCUSING_UNIVER_EDITOR as jt, UndoCommand as Vt, RedoCommand as $t, DisposableCollection as zt, toDisposable as Oe, fromEventSubject as nt, generateRandomId as Xt, Injector as tt, DOC_DRAWING_PRINTING_COMPONENT_KEY as qt, throttle as An, COLORS as Kt, RxDisposable as Yt, LifecycleService as Zt, LifecycleStages as xn, DependentOn as Qt, IConfigService as Jt, Plugin as ei, merge as ni } from "@univerjs/core";
 import { IDocDrawingService as Fe, UniverDocsDrawingPlugin as ti } from "@univerjs/docs-drawing";
 import { IImageIoService as ii, IDrawingManagerService as we, DRAWING_IMAGE_ALLOW_IMAGE_LIST as ri, DRAWING_IMAGE_COUNT_LIMIT as Ln, ImageUploadStatusType as _n, DRAWING_IMAGE_ALLOW_SIZE as oi, getImageSize as si, getDrawingShapeKeyByDrawingSearch as ai, DRAWING_IMAGE_WIDTH_LIMIT as Un, DRAWING_IMAGE_HEIGHT_LIMIT as Bn, UniverDrawingPlugin as ci } from "@univerjs/drawing";
 import { DrawingCommonPanel as di, DrawingRenderService as it, ImageCropperObject as li, COMPONENT_IMAGE_POPUP_MENU as gi, OpenImageCropOperation as mi, ImageResetSizeOperation as ui, UniverDrawingUIPlugin as hi } from "@univerjs/drawing-ui";
@@ -11,7 +11,7 @@ import { RichTextEditingMutation as te, DocSelectionManagerService as Tn, DocSke
 import { DocSelectionRenderService as Re, getRichTextEditPath as Ye, getCustomBlockIdsInSelections as Ri, docDrawingPositionToTransform as ct, VIEWPORT_KEY as dt, SetDocZoomRatioOperation as lt, DocPrintInterceptorService as Ni, NodePositionConvertToCursor as Hn, getOneTextSelectionRange as Gn, getAnchorBounding as Ei, TEXT_RANGE_LAYER_INDEX as Ai, getDocObject as xi, DocCanvasPopManagerService as Li, IEditorService as Ui } from "@univerjs/docs-ui";
 import { MessageType as jn, clsx as V, InputNumber as He, Select as Vn, Checkbox as Bi, RadioGroup as $n, Radio as Me, render as Fi, unmount as ki } from "@univerjs/design";
 import { BehaviorSubject as yn, debounceTime as gt, Observable as Wi, map as zn, switchMap as Hi, of as Gi, takeUntil as Xn, filter as qn } from "rxjs";
-import { jsxs as K, jsx as h } from "react/jsx-runtime";
+import { jsxs as K, jsx as f } from "react/jsx-runtime";
 import { forwardRef as mt, useRef as ji, createElement as ut, useState as se, useEffect as Mn, useMemo as Vi } from "react";
 const $i = "docs-drawing-ui.config", Kn = {};
 var pe = function() {
@@ -77,9 +77,9 @@ const bn = {
     const n = i.get($), 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(Re), { drawings: c } = e, d = (b = s.getSegment()) != null ? b : "", a = new On(), g = X.getInstance(), m = (E = (y = o.getSelfOrHeaderFooterModel(d).getBody()) == null ? void 0 : y.customBlocks) != null ? E : [], l = c.map((N) => m.find((_) => _.blockId === N.drawingId)).filter((N) => !!N).sort((N, _) => N.startIndex > _.startIndex ? 1 : -1), p = c[0].unitId, u = new Ht();
+    const s = r.getRenderById(e.unitId).with(Re), { drawings: c } = e, d = (b = s.getSegment()) != null ? b : "", a = new On(), l = X.getInstance(), m = (E = (y = o.getSelfOrHeaderFooterModel(d).getBody()) == null ? void 0 : y.customBlocks) != null ? E : [], g = c.map((N) => m.find((_) => _.blockId === N.drawingId)).filter((N) => !!N).sort((N, _) => N.startIndex > _.startIndex ? 1 : -1), h = c[0].unitId, u = new Ht();
     u.reset();
-    const v = l[0].startIndex, w = [
+    const v = g[0].startIndex, w = [
       {
         startOffset: v,
         endOffset: v
@@ -87,12 +87,12 @@ const bn = {
     ], I = {
       id: te.id,
       params: {
-        unitId: p,
+        unitId: h,
         actions: [],
         textRanges: w
       }
     }, O = [];
-    for (const N of l) {
+    for (const N of g) {
       const { startIndex: _ } = N;
       _ > u.cursor && a.push({
         t: Q.RETAIN,
@@ -103,9 +103,9 @@ const bn = {
       }), u.moveCursorTo(_ + 1);
     }
     const C = Ye(o, d);
-    O.push(g.editOp(a.serialize(), C));
-    for (const N of l) {
-      const { blockId: _ } = N, L = ((B = o.getDrawings()) != null ? B : {})[_], x = o.getDrawingsOrder().indexOf(_), j = g.removeOp(["drawings", _], L), S = g.removeOp(["drawingsOrder", x], _);
+    O.push(l.editOp(a.serialize(), C));
+    for (const N of g) {
+      const { blockId: _ } = N, L = ((B = o.getDrawings()) != null ? B : {})[_], x = o.getDrawingsOrder().indexOf(_), j = l.removeOp(["drawings", _], L), S = l.removeOp(["drawingsOrder", x], _);
       O.push(j), O.push(S);
     }
     return I.params.actions = O.reduce((N, _) => X.compose(N, _), null), !!n.syncExecuteCommand(I.id, I.params);
@@ -118,12 +118,12 @@ const bn = {
     if (t.length === 0)
       return !1;
     const { unitId: r } = t[0], o = t.map((s) => {
-      const { unitId: c, subUnitId: d, drawingId: a, drawingType: g } = s;
+      const { unitId: c, subUnitId: d, drawingId: a, drawingType: l } = s;
       return {
         unitId: c,
         subUnitId: d,
         drawingId: a,
-        drawingType: g
+        drawingType: l
       };
     });
     return e.executeCommand(bn.id, {
@@ -139,9 +139,9 @@ const bn = {
     const n = i.get(Fe);
     if (!e) return !1;
     const t = [];
-    e.forEach(({ parent: g, children: m }) => {
-      t.push(g.unitId), m.forEach((l) => {
-        t.push(l.unitId);
+    e.forEach(({ parent: l, children: m }) => {
+      t.push(l.unitId), m.forEach((g) => {
+        t.push(g.unitId);
       });
     });
     const r = n.getGroupDrawingOp(e), { unitId: o, subUnitId: s, undo: c, redo: d, objects: a } = r;
@@ -158,20 +158,20 @@ const bn = {
     const n = i.get($), t = i.get(Tn), 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: g, segmentId: m } = o, l = s.getSelfOrHeaderFooterModel(m).getBody();
-    if (l == null)
+    const c = s.getUnitId(), { drawings: d } = e, { collapsed: a, startOffset: l, segmentId: m } = o, g = s.getSelfOrHeaderFooterModel(m).getBody();
+    if (g == null)
       return !1;
-    const p = new On(), u = X.getInstance(), v = [], w = (E = (y = s.getSnapshot().drawingsOrder) == null ? void 0 : y.length) != null ? E : 0;
+    const h = new On(), u = X.getInstance(), v = [], w = (E = (y = s.getSnapshot().drawingsOrder) == null ? void 0 : y.length) != null ? E : 0;
     let I = 0;
     if (a)
-      g > 0 && p.push({
+      l > 0 && h.push({
         t: Q.RETAIN,
-        len: g
+        len: l
       });
     else {
-      const _ = Gt.selection.delete([o], l, 0, null, !1);
-      p.push(..._);
-      const L = Ri(l, [o]), G = (B = s.getDrawings()) != null ? B : {}, x = (N = s.getDrawingsOrder()) != null ? N : [], j = L.sort((S, D) => x.indexOf(S) > x.indexOf(D) ? -1 : x.indexOf(S) < x.indexOf(D) ? 1 : 0);
+      const _ = Gt.selection.delete([o], g, 0, null, !1);
+      h.push(..._);
+      const L = Ri(g, [o]), G = (B = s.getDrawings()) != null ? B : {}, x = (N = s.getDrawingsOrder()) != null ? N : [], j = L.sort((S, D) => x.indexOf(S) > x.indexOf(D) ? -1 : x.indexOf(S) < x.indexOf(D) ? 1 : 0);
       if (j.length > 0)
         for (const S of j) {
           const D = G[S], R = x.indexOf(S);
@@ -181,7 +181,7 @@ const bn = {
           v.push(T), v.push(U), I++;
         }
     }
-    p.push({
+    h.push({
       t: Q.INSERT,
       body: {
         dataStream: "\b".repeat(d.length),
@@ -192,7 +192,7 @@ const bn = {
       },
       len: d.length
     });
-    const O = Ye(s, m), C = u.editOp(p.serialize(), O);
+    const O = Ye(s, m), C = u.editOp(h.serialize(), O);
     v.push(C);
     for (const _ of d) {
       const { drawingId: L } = _, G = u.insertOp(["drawings", L], _), x = u.insertOp(["drawingsOrder", w - I], L);
@@ -219,13 +219,13 @@ const bn = {
     let a;
     if (c === en.forward ? a = t.getForwardDrawingsOp(d) : c === en.backward ? a = t.getBackwardDrawingOp(d) : c === en.front ? a = t.getFrontDrawingsOp(d) : c === en.back && (a = t.getBackDrawingsOp(d)), a == null)
       return !1;
-    const { redo: g } = a;
-    if (g == null)
+    const { redo: l } = a;
+    if (l == null)
       return !1;
     const m = [];
-    let l = be.deepClone(g);
-    l = l.slice(3), l.unshift("drawingsOrder"), m.push(l);
-    const p = {
+    let g = be.deepClone(l);
+    g = g.slice(3), g.unshift("drawingsOrder"), m.push(g);
+    const h = {
       id: te.id,
       params: {
         unitId: r,
@@ -233,7 +233,7 @@ const bn = {
         textRanges: null
       }
     };
-    return p.params.actions = m.reduce((v, w) => X.compose(v, w), null), !!n.syncExecuteCommand(p.id, p.params);
+    return h.params.actions = m.reduce((v, w) => X.compose(v, w), null), !!n.syncExecuteCommand(h.id, h.params);
   }
 }, _t = {
   id: "doc.command.ungroup-doc-image",
@@ -243,9 +243,9 @@ const bn = {
     const n = i.get(Fe);
     if (!e) return !1;
     const t = [];
-    e.forEach(({ parent: g, children: m }) => {
-      t.push(g.unitId), m.forEach((l) => {
-        t.push(l.unitId);
+    e.forEach(({ parent: l, children: m }) => {
+      t.push(l.unitId), m.forEach((g) => {
+        t.push(g.unitId);
       });
     });
     const r = n.getUngroupDrawingOp(e), { unitId: o, subUnitId: s, undo: c, redo: d, objects: a } = r;
@@ -267,8 +267,8 @@ var Zi = Object.getOwnPropertyDescriptor, Qi = (i, e, n, t) => {
   return r;
 }, ue = (i, e) => (n, t) => e(n, t, i);
 let an = class extends Be {
-  constructor(i, e, n, t, r, o, s, c, d, a, g, m, l) {
-    super(), this._context = i, this._commandService = e, this._docSelectionManagerService = n, this._renderManagerSrv = t, this._imageIoService = r, this._docDrawingService = o, this._drawingManagerService = s, this._contextService = c, this._messageService = d, this._localeService = a, this._docSelectionRenderService = g, this._docRefreshDrawingsService = m, this._fileOpenerService = l, this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener(), this._transformDrawingListener(), this._editAreaChangeListener();
+  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();
   }
   async insertDocImage() {
     const i = await this._fileOpenerService.openFile({
@@ -310,15 +310,15 @@ let an = class extends Be {
     for (const r of e) {
       if (r == null)
         continue;
-      const { imageId: o, imageSourceType: s, source: c, base64Cache: d } = r, { width: a, height: g, image: m } = await si(d || "");
+      const { imageId: o, imageSourceType: s, source: c, base64Cache: d } = r, { width: a, height: l, image: m } = await si(d || "");
       this._imageIoService.addImageSourceCache(o, s, m);
-      let l = 1;
-      if (a > Un || g > Bn) {
-        const w = Un / a, I = Bn / g;
-        l = Math.min(w, I);
+      let g = 1;
+      if (a > Un || l > Bn) {
+        const w = Un / a, I = Bn / l;
+        g = Math.min(w, I);
       }
-      const p = this._getImagePosition(a * l, g * l);
-      if (p == null)
+      const h = this._getImagePosition(a * g, l * g);
+      if (h == null)
         return;
       const u = {
         unitId: n,
@@ -327,8 +327,8 @@ let an = class extends Be {
         drawingType: Ue.DRAWING_IMAGE,
         imageSourceType: s,
         source: c,
-        transform: ct(p),
-        docTransform: p,
+        transform: ct(h),
+        docTransform: h,
         behindDoc: ae.FALSE,
         title: "",
         description: "",
@@ -433,10 +433,10 @@ let an = class extends Be {
     if (((s = n == null ? void 0 : n.customBlocks) != null ? s : []).some((a) => a.blockId === i))
       return "";
     for (const a of Object.keys(t))
-      if ((c = t[a].body.customBlocks) != null && c.some((g) => g.blockId === i))
+      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((g) => g.blockId === i))
+      if ((d = r[a].body.customBlocks) != null && d.some((l) => l.blockId === i))
         return a;
     return "";
   }
@@ -448,18 +448,18 @@ let an = class extends Be {
       return;
     const r = i.getSnapshot(), { drawings: o = {} } = r, s = t.getEditArea() === Ge.BODY;
     for (const d of Object.keys(o)) {
-      const a = o[d], g = ai({ unitId: n, drawingId: a.drawingId, subUnitId: n }), m = e.fuzzyMathObjects(g, !0);
+      const a = o[d], l = ai({ unitId: n, drawingId: a.drawingId, subUnitId: n }), m = e.fuzzyMathObjects(l, !0);
       if (m.length)
-        for (const l of m) {
-          e.detachTransformerFrom(l);
+        for (const g of m) {
+          e.detachTransformerFrom(g);
           try {
-            l.setOpacity(0.5);
+            g.setOpacity(0.5);
           } catch {
           }
           if (s && a.isMultiTransform !== ae.TRUE || !s && a.isMultiTransform === ae.TRUE) {
-            a.allowTransform !== !1 && e.attachTransformerTo(l);
+            a.allowTransform !== !1 && e.attachTransformerTo(g);
             try {
-              l.setOpacity(1);
+              g.setOpacity(1);
             } catch {
             }
           }
@@ -526,14 +526,14 @@ const Ji = {
   behindText: W.WRAP_NONE
 };
 function Dt(i, e, n, t, r, o, s) {
-  var p, u;
-  const c = new On(), d = X.getInstance(), a = [], g = o.getSelfOrHeaderFooterModel(e).getBody(), m = o.getSelfOrHeaderFooterModel(i).getBody();
-  if (g == null || m == null)
+  var h, u;
+  const c = new On(), d = X.getInstance(), a = [], l = o.getSelfOrHeaderFooterModel(e).getBody(), m = o.getSelfOrHeaderFooterModel(i).getBody();
+  if (l == null || m == null)
     return;
-  const l = (u = (p = g.customBlocks) == null ? void 0 : p.find((v) => v.blockId === r)) == null ? void 0 : u.startIndex;
-  if (l != null) {
+  const g = (u = (h = l.customBlocks) == null ? void 0 : h.find((v) => v.blockId === r)) == null ? void 0 : u.startIndex;
+  if (g != null) {
     if (t = Math.min(m.dataStream.length - 2, t), i === e) {
-      if (t < l ? (t > 0 && c.push({
+      if (t < g ? (t > 0 && c.push({
         t: Q.RETAIN,
         len: t
       }), c.push({
@@ -548,19 +548,19 @@ function Dt(i, e, n, t, r, o, s) {
         len: 1
       }), c.push({
         t: Q.RETAIN,
-        len: l - t
+        len: g - t
       }), c.push({
         t: Q.DELETE,
         len: 1
-      })) : (l > 0 && c.push({
+      })) : (g > 0 && c.push({
         t: Q.RETAIN,
-        len: l
+        len: g
       }), c.push({
         t: Q.DELETE,
         len: 1
-      }), t - l - 1 > 0 && c.push({
+      }), t - g - 1 > 0 && c.push({
         t: Q.RETAIN,
-        len: t - l - 1
+        len: t - g - 1
       }), c.push({
         t: Q.INSERT,
         body: {
@@ -571,14 +571,14 @@ function Dt(i, e, n, t, r, o, s) {
           }]
         },
         len: 1
-      })), t !== l) {
+      })), t !== g) {
         const v = Ye(o, e), w = d.editOp(c.serialize(), v);
         a.push(w);
       }
     } else {
-      l > 0 && c.push({
+      g > 0 && c.push({
         t: Q.RETAIN,
-        len: l
+        len: g
       }), c.push({
         t: Q.DELETE,
         len: 1
@@ -610,10 +610,10 @@ const Ct = {
     var E, B;
     if (e == null)
       return !1;
-    const { drawings: n, wrappingStyle: t, unitId: r } = e, o = i.get($), s = i.get(q), d = i.get(ee).getRenderById(r), a = d == null ? void 0 : d.with(ie).getSkeleton().getSkeletonData(), g = d == null ? void 0 : d.with(ie).getViewModel(), m = d == null ? void 0 : d.scene, l = s.getCurrentUniverDocInstance();
-    if (l == null || a == null || m == null || g == null)
+    const { drawings: n, wrappingStyle: t, unitId: r } = e, o = i.get($), s = i.get(q), d = i.get(ee).getRenderById(r), a = d == null ? void 0 : d.with(ie).getSkeleton().getSkeletonData(), l = d == null ? void 0 : d.with(ie).getViewModel(), m = d == null ? void 0 : d.scene, g = s.getCurrentUniverDocInstance();
+    if (g == null || a == null || m == null || l == null)
       return !1;
-    const p = g.getEditArea(), u = m.getTransformerByCreate(), { pages: v, skeHeaders: w, skeFooters: I } = a, O = X.getInstance(), C = [], { drawings: P = {} } = l.getSnapshot();
+    const h = l.getEditArea(), u = m.getTransformerByCreate(), { pages: v, skeHeaders: w, skeFooters: I } = a, O = X.getInstance(), C = [], { drawings: P = {} } = g.getSnapshot();
     for (const N of n) {
       const { drawingId: _ } = N, L = P[_].layoutType, G = Ji[t];
       if (L !== G) {
@@ -632,7 +632,7 @@ const Ct = {
       let x = null, j = 0, S = 0;
       for (const D of v) {
         const { headerId: R, footerId: T, marginTop: U, marginLeft: F, marginBottom: M, pageWidth: A, pageHeight: z } = D;
-        switch (p) {
+        switch (h) {
           case Ge.HEADER: {
             const k = (E = w.get(R)) == null ? void 0 : E.get(A);
             k != null && k.skeDrawings.has(_) && (x = k.skeDrawings.get(_), j = k.marginTop, S = F);
@@ -697,11 +697,11 @@ const Ct = {
     const n = i.get($), r = i.get(q).getCurrentUniverDocInstance();
     if (r == null)
       return !1;
-    const { drawings: o, dist: s, unitId: c } = e, d = X.getInstance(), a = [], { drawings: g = {} } = r.getSnapshot();
-    for (const p of o) {
-      const { drawingId: u } = p;
+    const { drawings: o, dist: s, unitId: c } = e, d = X.getInstance(), a = [], { drawings: l = {} } = r.getSnapshot();
+    for (const h of o) {
+      const { drawingId: u } = h;
       for (const [v, w] of Object.entries(s)) {
-        const I = g[u][v];
+        const I = l[u][v];
         if (I !== w) {
           const O = d.replaceOp(["drawings", u, v], I, w);
           a.push(O);
@@ -716,7 +716,7 @@ const Ct = {
         textRanges: null
       }
     };
-    return m.params.actions = a.reduce((p, u) => X.compose(p, u), null), !!n.syncExecuteCommand(m.id, m.params);
+    return m.params.actions = a.reduce((h, u) => X.compose(h, u), null), !!n.syncExecuteCommand(m.id, m.params);
   }
 }, Pt = {
   id: "doc.command.update-doc-drawing-wrap-text",
@@ -727,9 +727,9 @@ const Ct = {
     const n = i.get($), r = i.get(q).getCurrentUniverDocInstance();
     if (r == null)
       return !1;
-    const { drawings: o, wrapText: s, unitId: c } = e, d = X.getInstance(), a = [], { drawings: g = {} } = r.getSnapshot();
-    for (const p of o) {
-      const { drawingId: u } = p, v = g[u].wrapText;
+    const { drawings: o, wrapText: s, unitId: c } = e, d = X.getInstance(), a = [], { drawings: l = {} } = r.getSnapshot();
+    for (const h of o) {
+      const { drawingId: u } = h, v = l[u].wrapText;
       if (v !== s) {
         const w = d.replaceOp(["drawings", u, "wrapText"], v, s);
         a.push(w);
@@ -743,7 +743,7 @@ const Ct = {
         textRanges: null
       }
     };
-    return m.params.actions = a.reduce((p, u) => X.compose(p, u), null), !!n.syncExecuteCommand(m.id, m.params);
+    return m.params.actions = a.reduce((h, u) => X.compose(h, u), null), !!n.syncExecuteCommand(m.id, m.params);
   }
 }, Ze = {
   id: "doc.command.update-drawing-doc-transform",
@@ -757,24 +757,24 @@ const Ct = {
     const c = s.getTransformerByCreate(), d = t.getCurrentUniverDocInstance();
     if (d == null)
       return !1;
-    const { drawings: a, unitId: g } = e, m = X.getInstance(), l = [], { drawings: p = {} } = d.getSnapshot();
+    const { drawings: a, unitId: l } = e, m = X.getInstance(), g = [], { drawings: h = {} } = d.getSnapshot();
     for (const w of a) {
-      const { drawingId: I, key: O, value: C } = w, P = p[I].docTransform[O];
+      const { drawingId: I, key: O, value: C } = w, P = h[I].docTransform[O];
       if (!be.diffValue(P, C)) {
         const b = m.replaceOp(["drawings", I, "docTransform", O], P, C);
-        l.push(b);
+        g.push(b);
       }
     }
     const u = {
       id: te.id,
       params: {
-        unitId: g,
+        unitId: l,
         actions: [],
         textRanges: null,
         debounce: !0
       }
     };
-    u.params.actions = l.reduce((w, I) => X.compose(w, I), null);
+    u.params.actions = g.reduce((w, I) => X.compose(w, I), null);
     const v = n.syncExecuteCommand(u.id, u.params);
     return c.refreshControls(), !!v;
   }
@@ -791,10 +791,10 @@ const Ct = {
     const d = s.getTransformerByCreate(), a = i.get($), m = i.get(q).getCurrentUniverDocInstance();
     if (m == null)
       return !1;
-    const { drawing: l, unitId: p, offset: u, segmentId: v, segmentPage: w, needRefreshDrawings: I } = e;
+    const { drawing: g, unitId: h, offset: u, segmentId: v, segmentPage: w, needRefreshDrawings: I } = e;
     if (I)
       return r.refreshDrawings(c), d.refreshControls(), !0;
-    const O = [], { drawingId: C } = l, P = (N = t.getSegment()) != null ? N : "", b = Dt(
+    const O = [], { drawingId: C } = g, P = (N = t.getSegment()) != null ? N : "", b = Dt(
       v,
       P,
       w,
@@ -809,7 +809,7 @@ const Ct = {
     const y = {
       id: te.id,
       params: {
-        unitId: p,
+        unitId: h,
         actions: [],
         textRanges: null
       }
@@ -832,11 +832,11 @@ const Ct = {
     const s = o.getTransformerByCreate(), c = i.get($), a = i.get(q).getCurrentUniverDocInstance();
     if (a == null)
       return !1;
-    const { drawing: g, unitId: m, offset: l, docTransform: p, segmentId: u, segmentPage: v } = e, w = [], { drawingId: I } = g, O = (j = t.getSegment()) != null ? j : "", C = Dt(
+    const { drawing: l, unitId: m, offset: g, docTransform: h, segmentId: u, segmentPage: v } = e, w = [], { drawingId: I } = l, O = (j = t.getSegment()) != null ? j : "", C = Dt(
       u,
       O,
       v,
-      l,
+      g,
       I,
       a,
       t
@@ -845,20 +845,20 @@ const Ct = {
       return !1;
     C.length > 0 && w.push(...C);
     const P = X.getInstance(), { drawings: b = {} } = a.getSnapshot(), y = b[I].docTransform, { positionH: E, positionV: B, size: N, angle: _ } = y;
-    if (!be.diffValue(E, p.positionH)) {
-      const S = P.replaceOp(["drawings", I, "docTransform", "positionH"], E, p.positionH);
+    if (!be.diffValue(E, h.positionH)) {
+      const S = P.replaceOp(["drawings", I, "docTransform", "positionH"], E, h.positionH);
       w.push(S);
     }
-    if (!be.diffValue(B, p.positionV)) {
-      const S = P.replaceOp(["drawings", I, "docTransform", "positionV"], B, p.positionV);
+    if (!be.diffValue(B, h.positionV)) {
+      const S = P.replaceOp(["drawings", I, "docTransform", "positionV"], B, h.positionV);
       w.push(S);
     }
-    if (!be.diffValue(N, p.size)) {
-      const S = P.replaceOp(["drawings", I, "docTransform", "size"], N, p.size);
+    if (!be.diffValue(N, h.size)) {
+      const S = P.replaceOp(["drawings", I, "docTransform", "size"], N, h.size);
       w.push(S);
     }
-    if (!be.diffValue(_, p.angle)) {
-      const S = P.replaceOp(["drawings", I, "docTransform", "angle"], _, p.angle);
+    if (!be.diffValue(_, h.angle)) {
+      const S = P.replaceOp(["drawings", I, "docTransform", "angle"], _, h.angle);
       w.push(S);
     }
     const L = {
@@ -881,12 +881,12 @@ const Ct = {
     const n = i.get($), t = i.get(Fe), r = i.get(q), o = i.get(ee), { direction: s } = e, c = t.getFocusDrawings();
     if (c.length === 0)
       return !1;
-    const d = c[0].unitId, a = o.getRenderById(d), g = a == null ? void 0 : a.scene;
-    if (g == null)
+    const d = c[0].unitId, a = o.getRenderById(d), l = a == null ? void 0 : a.scene;
+    if (l == null)
       return !1;
-    const m = g.getTransformerByCreate(), l = r.getUniverDocInstance(d), p = c.map((v) => {
+    const m = l.getTransformerByCreate(), g = r.getUniverDocInstance(d), h = c.map((v) => {
       var y, E, B, N, _;
-      const { drawingId: w } = v, I = (y = l == null ? void 0 : l.getSnapshot().drawings) == null ? void 0 : y[w];
+      const { drawingId: w } = v, I = (y = g == null ? void 0 : g.getSnapshot().drawings) == null ? void 0 : y[w];
       if (I == null || I.layoutType === W.INLINE)
         return null;
       const { positionH: O, positionV: C } = I.docTransform, P = { ...O }, b = { ...C };
@@ -896,12 +896,12 @@ const Ct = {
         value: s === fe.UP || s === fe.DOWN ? b : P
       };
     }).filter((v) => v != null);
-    if (p.length === 0)
+    if (h.length === 0)
       return !1;
     const u = n.syncExecuteCommand(Ze.id, {
       unitId: d,
       subUnitId: d,
-      drawings: p
+      drawings: h
     });
     return m.refreshControls(), !!u;
   }
@@ -945,7 +945,7 @@ const Ct = {
     const n = i.get(we), t = i.get($);
     return e == null ? !1 : (n.focusDrawing([e]), t.executeCommand(bt.id, { value: "open" }), !0);
   }
-}, nr = "univer-image-common-panel", tr = "univer-image-common-panel-grid", ir = "univer-image-common-panel-border", rr = "univer-image-common-panel-title", or = "univer-image-common-panel-subtitle", sr = "univer-image-common-panel-row", ar = "univer-image-common-panel-column", cr = "univer-image-common-panel-span2", dr = "univer-image-common-panel-input", f = {
+}, nr = "univer-image-common-panel", tr = "univer-image-common-panel-grid", ir = "univer-image-common-panel-border", rr = "univer-image-common-panel-title", or = "univer-image-common-panel-subtitle", sr = "univer-image-common-panel-row", ar = "univer-image-common-panel-column", cr = "univer-image-common-panel-span2", dr = "univer-image-common-panel-input", p = {
   imageCommonPanel: nr,
   imageCommonPanelGrid: tr,
   imageCommonPanelBorder: ir,
@@ -959,10 +959,10 @@ const Ct = {
   const e = Ie($), n = Ie(fn), t = Ie(we), r = Ie(ee), o = Ie(q), { drawings: s } = i, c = s[0];
   if (c == null)
     return;
-  const { unitId: d } = c, a = o.getUniverDocInstance(d), g = a == null ? void 0 : a.getSnapshot().documentStyle.documentFlavor, m = r.getRenderById(d), l = m == null ? void 0 : m.scene;
-  if (l == null)
+  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;
+  if (g == null)
     return;
-  const p = l.getTransformerByCreate(), u = [{
+  const h = g.getTransformerByCreate(), u = [{
     label: n.t("image-position.column"),
     value: String(ne.COLUMN)
   }, {
@@ -974,15 +974,15 @@ const Ct = {
   }], v = [{
     label: n.t("image-position.line"),
     value: String(H.LINE),
-    disabled: g === In.MODERN
+    disabled: l === In.MODERN
   }, {
     label: n.t("image-position.page"),
     value: String(H.PAGE),
-    disabled: g === In.MODERN
+    disabled: l === In.MODERN
   }, {
     label: n.t("image-position.margin"),
     value: String(H.MARGIN),
-    disabled: g === In.MODERN
+    disabled: l === In.MODERN
   }, {
     label: n.t("image-position.paragraph"),
     value: String(H.PARAGRAPH)
@@ -1014,7 +1014,7 @@ const Ct = {
       }))
     });
     const F = (M = r.getRenderById(d)) == null ? void 0 : M.with(Re);
-    F && F.blur(), p.refreshControls();
+    F && F.blur(), h.refreshControls();
   }
   function L(D) {
     var oe, De, Ce;
@@ -1111,13 +1111,13 @@ const Ct = {
     return () => {
       D.unsubscribe(), R.dispose();
     };
-  }, []), /* @__PURE__ */ K("div", { className: V(f.imageCommonPanelGrid, f.imageCommonPanelBorder), style: { display: B ? "block" : "none" }, children: [
-    /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelTitle), children: /* @__PURE__ */ h("div", { children: n.t("image-position.title") }) }) }),
-    /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ h("div", { children: n.t("image-position.horizontal") }) }) }),
-    /* @__PURE__ */ K("div", { className: f.imageCommonPanelRow, children: [
-      /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: n.t("image-position.absolutePosition") }) }),
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ h(
+  }, []), /* @__PURE__ */ K("div", { className: V(p.imageCommonPanelGrid, p.imageCommonPanelBorder), style: { display: B ? "block" : "none" }, children: [
+    /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelTitle), children: /* @__PURE__ */ f("div", { children: n.t("image-position.title") }) }) }),
+    /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSubtitle), children: /* @__PURE__ */ f("div", { children: n.t("image-position.horizontal") }) }) }),
+    /* @__PURE__ */ K("div", { className: p.imageCommonPanelRow, children: [
+      /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: n.t("image-position.absolutePosition") }) }),
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: /* @__PURE__ */ f(
           He,
           {
             min: Yn,
@@ -1131,13 +1131,13 @@ const Ct = {
                 posOffset: D
               });
             },
-            className: f.imageCommonPanelInput
+            className: p.imageCommonPanelInput
           }
         ) }) })
       ] }) }),
-      /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: n.t("image-position.toTheRightOf") }) }),
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ h(
+      /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: n.t("image-position.toTheRightOf") }) }),
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: /* @__PURE__ */ f(
           Vn,
           {
             value: String(O.relativeFrom),
@@ -1148,11 +1148,11 @@ const Ct = {
         ) }) })
       ] }) })
     ] }),
-    /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ h("div", { children: n.t("image-position.vertical") }) }) }),
-    /* @__PURE__ */ K("div", { className: f.imageCommonPanelRow, children: [
-      /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: n.t("image-position.absolutePosition") }) }),
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ h(
+    /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSubtitle), children: /* @__PURE__ */ f("div", { children: n.t("image-position.vertical") }) }) }),
+    /* @__PURE__ */ K("div", { className: p.imageCommonPanelRow, children: [
+      /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: n.t("image-position.absolutePosition") }) }),
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: /* @__PURE__ */ f(
           He,
           {
             min: Yn,
@@ -1166,13 +1166,13 @@ const Ct = {
                 posOffset: D
               });
             },
-            className: f.imageCommonPanelInput
+            className: p.imageCommonPanelInput
           }
         ) }) })
       ] }) }),
-      /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: n.t("image-position.bellow") }) }),
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ h(
+      /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: n.t("image-position.bellow") }) }),
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: /* @__PURE__ */ f(
           Vn,
           {
             disabled: w,
@@ -1183,17 +1183,17 @@ const Ct = {
         ) }) })
       ] }) })
     ] }),
-    /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ h("div", { children: n.t("image-position.options") }) }) }),
-    /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, style: { marginBottom: "50px" }, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ h(Bi, { disabled: w, checked: y, onChange: S, children: n.t("image-position.moveObjectWithText") }) }) })
+    /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSubtitle), children: /* @__PURE__ */ f("div", { children: n.t("image-position.options") }) }) }),
+    /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, style: { marginBottom: "50px" }, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: /* @__PURE__ */ f(Bi, { disabled: w, checked: y, onChange: S, children: n.t("image-position.moveObjectWithText") }) }) })
   ] });
 }, nn = 0, tn = 100, gr = (i) => {
   const e = Ie($), n = Ie(fn), t = Ie(we), r = Ie(ee), o = Ie(q), { drawings: s } = i, c = s[0];
   if (c == null)
     return null;
-  const { unitId: d } = c, a = o.getUniverDocInstance(d), g = r.getRenderById(d);
-  if ((g == null ? void 0 : g.scene) == null)
+  const { unitId: d } = c, a = o.getUniverDocInstance(d), l = r.getRenderById(d);
+  if ((l == null ? void 0 : l.scene) == null)
     return null;
-  const [l, p] = se(!0), [u, v] = se(!0), [w, I] = se(!0), [O, C] = se(he.INLINE), [P, b] = se(""), [y, E] = se({
+  const [g, h] = se(!0), [u, v] = se(!0), [w, I] = se(!0), [O, C] = se(he.INLINE), [P, b] = se(""), [y, E] = se({
     distT: 0,
     distL: 0,
     distB: 0,
@@ -1278,7 +1278,7 @@ const Ct = {
       distL: T,
       distB: U,
       distR: F
-    }), b(z), p(M !== W.WRAP_SQUARE), M === W.WRAP_NONE || M === W.INLINE ? v(!0) : v(!1), M === W.WRAP_NONE || M === W.INLINE || M === W.WRAP_TOP_AND_BOTTOM ? I(!0) : I(!1), M === W.WRAP_NONE)
+    }), b(z), h(M !== W.WRAP_SQUARE), M === W.WRAP_NONE || M === W.INLINE ? v(!0) : v(!1), M === W.WRAP_NONE || M === W.INLINE || M === W.WRAP_TOP_AND_BOTTOM ? I(!0) : I(!1), M === W.WRAP_NONE)
       A === ae.TRUE ? C(he.BEHIND_TEXT) : C(he.IN_FRONT_OF_TEXT);
     else
       switch (M) {
@@ -1309,27 +1309,27 @@ const Ct = {
     return () => {
       S.unsubscribe(), D.dispose();
     };
-  }, []), /* @__PURE__ */ K("div", { className: V(f.imageCommonPanelGrid, f.imageCommonPanelBorder), style: { display: B ? "block" : "none" }, children: [
-    /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelTitle), children: /* @__PURE__ */ h("div", { children: n.t("image-text-wrap.title") }) }) }),
-    /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ h("div", { children: n.t("image-text-wrap.wrappingStyle") }) }) }),
-    /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelRow), children: /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn), children: /* @__PURE__ */ K($n, { value: O, onChange: _, direction: "vertical", children: [
-      /* @__PURE__ */ h(Me, { value: he.INLINE, children: n.t("image-text-wrap.inline") }),
-      /* @__PURE__ */ h(Me, { value: he.WRAP_SQUARE, children: n.t("image-text-wrap.square") }),
-      /* @__PURE__ */ h(Me, { value: he.WRAP_TOP_AND_BOTTOM, children: n.t("image-text-wrap.topAndBottom") }),
-      /* @__PURE__ */ h(Me, { value: he.BEHIND_TEXT, children: n.t("image-text-wrap.behindText") }),
-      /* @__PURE__ */ h(Me, { value: he.IN_FRONT_OF_TEXT, children: n.t("image-text-wrap.inFrontText") })
+  }, []), /* @__PURE__ */ K("div", { className: V(p.imageCommonPanelGrid, p.imageCommonPanelBorder), style: { display: B ? "block" : "none" }, children: [
+    /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelTitle), children: /* @__PURE__ */ f("div", { children: n.t("image-text-wrap.title") }) }) }),
+    /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSubtitle), children: /* @__PURE__ */ f("div", { children: n.t("image-text-wrap.wrappingStyle") }) }) }),
+    /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelRow), children: /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn), children: /* @__PURE__ */ K($n, { value: O, onChange: _, direction: "vertical", children: [
+      /* @__PURE__ */ f(Me, { value: he.INLINE, children: n.t("image-text-wrap.inline") }),
+      /* @__PURE__ */ f(Me, { value: he.WRAP_SQUARE, children: n.t("image-text-wrap.square") }),
+      /* @__PURE__ */ f(Me, { value: he.WRAP_TOP_AND_BOTTOM, children: n.t("image-text-wrap.topAndBottom") }),
+      /* @__PURE__ */ f(Me, { value: he.BEHIND_TEXT, children: n.t("image-text-wrap.behindText") }),
+      /* @__PURE__ */ f(Me, { value: he.IN_FRONT_OF_TEXT, children: n.t("image-text-wrap.inFrontText") })
     ] }) }) }),
-    /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ h("div", { children: n.t("image-text-wrap.wrapText") }) }) }),
-    /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelRow), children: /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn), children: /* @__PURE__ */ K($n, { disabled: l, value: P, onChange: L, direction: "horizontal", children: [
-      /* @__PURE__ */ h(Me, { value: Ke.BOTH_SIDES, children: n.t("image-text-wrap.bothSide") }),
-      /* @__PURE__ */ h(Me, { value: Ke.LEFT, children: n.t("image-text-wrap.leftOnly") }),
-      /* @__PURE__ */ h(Me, { value: Ke.RIGHT, children: n.t("image-text-wrap.rightOnly") })
+    /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSubtitle), children: /* @__PURE__ */ f("div", { children: n.t("image-text-wrap.wrapText") }) }) }),
+    /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelRow), children: /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn), children: /* @__PURE__ */ K($n, { disabled: g, value: P, onChange: L, direction: "horizontal", children: [
+      /* @__PURE__ */ f(Me, { value: Ke.BOTH_SIDES, children: n.t("image-text-wrap.bothSide") }),
+      /* @__PURE__ */ f(Me, { value: Ke.LEFT, children: n.t("image-text-wrap.leftOnly") }),
+      /* @__PURE__ */ f(Me, { value: Ke.RIGHT, children: n.t("image-text-wrap.rightOnly") })
     ] }) }) }),
-    /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSubtitle), children: /* @__PURE__ */ h("div", { children: n.t("image-text-wrap.distanceFromText") }) }) }),
-    /* @__PURE__ */ K("div", { className: f.imageCommonPanelRow, children: [
-      /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: n.t("image-text-wrap.top") }) }),
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ h(
+    /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSubtitle), children: /* @__PURE__ */ f("div", { children: n.t("image-text-wrap.distanceFromText") }) }) }),
+    /* @__PURE__ */ K("div", { className: p.imageCommonPanelRow, children: [
+      /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: n.t("image-text-wrap.top") }) }),
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: /* @__PURE__ */ f(
           He,
           {
             min: nn,
@@ -1340,13 +1340,13 @@ const Ct = {
             onChange: (S) => {
               G(S, "distT");
             },
-            className: f.imageCommonPanelInput
+            className: p.imageCommonPanelInput
           }
         ) }) })
       ] }) }),
-      /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: n.t("image-text-wrap.left") }) }),
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ h(
+      /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: n.t("image-text-wrap.left") }) }),
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: /* @__PURE__ */ f(
           He,
           {
             min: nn,
@@ -1357,15 +1357,15 @@ const Ct = {
             onChange: (S) => {
               G(S, "distL");
             },
-            className: f.imageCommonPanelInput
+            className: p.imageCommonPanelInput
           }
         ) }) })
       ] }) })
     ] }),
-    /* @__PURE__ */ K("div", { className: f.imageCommonPanelRow, children: [
-      /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: n.t("image-text-wrap.bottom") }) }),
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ h(
+    /* @__PURE__ */ K("div", { className: p.imageCommonPanelRow, children: [
+      /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: n.t("image-text-wrap.bottom") }) }),
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: /* @__PURE__ */ f(
           He,
           {
             min: nn,
@@ -1376,13 +1376,13 @@ const Ct = {
             onChange: (S) => {
               G(S, "distB");
             },
-            className: f.imageCommonPanelInput
+            className: p.imageCommonPanelInput
           }
         ) }) })
       ] }) }),
-      /* @__PURE__ */ h("div", { className: V(f.imageCommonPanelColumn, f.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: n.t("image-text-wrap.right") }) }),
-        /* @__PURE__ */ h("div", { className: f.imageCommonPanelRow, children: /* @__PURE__ */ h("div", { className: f.imageCommonPanelColumn, children: /* @__PURE__ */ h(
+      /* @__PURE__ */ f("div", { className: V(p.imageCommonPanelColumn, p.imageCommonPanelSpan2), children: /* @__PURE__ */ K("label", { children: [
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: n.t("image-text-wrap.right") }) }),
+        /* @__PURE__ */ f("div", { className: p.imageCommonPanelRow, children: /* @__PURE__ */ f("div", { className: p.imageCommonPanelColumn, children: /* @__PURE__ */ f(
           He,
           {
             min: nn,
@@ -1393,7 +1393,7 @@ const Ct = {
             onChange: (S) => {
               G(S, "distR");
             },
-            className: f.imageCommonPanelInput
+            className: p.imageCommonPanelInput
           }
         ) }) })
       ] }) })
@@ -1408,10 +1408,10 @@ const Ct = {
     return () => {
       r.unsubscribe();
     };
-  }, []), !!(n != null && n.length) && /* @__PURE__ */ K("div", { className: f.imageCommonPanel, children: [
-    /* @__PURE__ */ h(di, { drawings: n, hasAlign: !1, hasCropper: !1, hasGroup: !1, hasTransform: !1 }),
-    /* @__PURE__ */ h(gr, { drawings: n }),
-    /* @__PURE__ */ h(lr, { drawings: n })
+  }, []), !!(n != null && n.length) && /* @__PURE__ */ K("div", { className: p.imageCommonPanel, children: [
+    /* @__PURE__ */ f(di, { drawings: n, hasAlign: !1, hasCropper: !1, hasGroup: !1, hasTransform: !1 }),
+    /* @__PURE__ */ f(gr, { drawings: n }),
+    /* @__PURE__ */ f(lr, { drawings: n })
   ] });
 }, Nt = "addition-and-subtraction-single", Et = "doc.menu.image", At = St.id, ur = (i) => {
   const e = i.get(Tn), n = i.get(q);
@@ -1420,10 +1420,10 @@ const Ct = {
       var s;
       const o = e.getActiveTextRange();
       if (o) {
-        const { segmentId: c, startOffset: d, endOffset: a } = o, g = n.getCurrentUniverDocInstance(), m = (s = g == null ? void 0 : g.getSelfOrHeaderFooterModel(c).getBody()) == null ? void 0 : s.tables;
-        if (m && m.length && m.some((l) => {
-          const { startIndex: p, endIndex: u } = l;
-          return d >= p && d < u || a >= p && a < u;
+        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;
+        if (m && m.length && m.some((g) => {
+          const { startIndex: h, endIndex: u } = g;
+          return d >= h && d < u || a >= h && a < u;
         })) {
           t.next(!0);
           return;
@@ -1702,13 +1702,13 @@ var Mr = Object.getOwnPropertyDescriptor, br = (i, e, n, t) => {
   return r;
 }, We = (i, e) => (n, t) => e(n, t, i);
 function xt(i, e, n = 1, t = 0) {
-  const { top: r, left: o, bottom: s, right: c } = i, d = c - o, a = s - r, g = e.getViewport(dt.VIEW_MAIN), { viewportScrollX: m, viewportScrollY: l } = g, { scaleX: p, scaleY: u } = e.getAncestorScale();
+  const { top: r, left: o, bottom: s, right: c } = i, d = c - o, a = s - r, l = e.getViewport(dt.VIEW_MAIN), { viewportScrollX: m, viewportScrollY: g } = l, { scaleX: h, scaleY: u } = e.getAncestorScale();
   return {
-    startX: (o - m) * p,
-    startY: (r - l) * u,
-    endX: (o + d - m) * p,
-    endY: (r + a - l) * u,
-    width: d * p,
+    startX: (o - m) * h,
+    startY: (r - g) * u,
+    endX: (o + d - m) * h,
+    endY: (r + a - g) * u,
+    width: d * h,
     height: a * u,
     rotate: t,
     absolute: {
@@ -1771,7 +1771,7 @@ let ln = class extends Be {
       if (!(c == null || c.length === 0))
         for (const d of c) {
           this._addHoverForRect(d);
-          const a = new zt(), g = Sn(d, o.renderUnit), m = new yn(g), l = o.canvas, p = s.data, u = {
+          const a = new zt(), l = Sn(d, o.renderUnit), m = new yn(l), g = o.canvas, h = s.data, u = {
             dispose: a,
             rect: d,
             position$: m,
@@ -1782,18 +1782,18 @@ let ln = class extends Be {
             id: s.drawingId,
             componentKey: s.componentKey,
             onPointerDown: (w) => {
-              l.dispatchEvent(new PointerEvent(w.type, w));
+              g.dispatchEvent(new PointerEvent(w.type, w));
             },
             onPointerMove: (w) => {
-              l.dispatchEvent(new PointerEvent(w.type, w));
+              g.dispatchEvent(new PointerEvent(w.type, w));
             },
             onPointerUp: (w) => {
-              l.dispatchEvent(new PointerEvent(w.type, w));
+              g.dispatchEvent(new PointerEvent(w.type, w));
             },
             onWheel: (w) => {
-              l.dispatchEvent(new WheelEvent(w.type, w));
+              g.dispatchEvent(new WheelEvent(w.type, w));
             },
-            data: p,
+            data: h,
             unitId: t
           });
           const v = d.onTransformChange$.subscribeEvent(() => {
@@ -1871,7 +1871,7 @@ let ln = class extends Be {
     if (!r) return !1;
     const c = (v = r.renderUnit.with(ie).getSkeleton().getSkeletonData()) == null ? void 0 : v.pages[0];
     if (!c) return !1;
-    const { pageWidth: d, marginLeft: a, marginRight: g } = c, m = d - a - g, l = {
+    const { pageWidth: d, marginLeft: a, marginRight: l } = c, m = d - a - l, g = {
       size: {
         width: (w = n.width) != null ? w : m,
         height: n.height
@@ -1885,24 +1885,24 @@ let ln = class extends Be {
         posOffset: 0
       },
       angle: 0
-    }, p = (I = n.drawingId) != null ? I : Xt(), u = {
+    }, h = (I = n.drawingId) != null ? I : Xt(), u = {
       unitId: t.getUnitId(),
       drawings: [
         {
-          drawingId: p,
+          drawingId: h,
           drawingType: Ue.DRAWING_DOM,
           subUnitId: t.getUnitId(),
           unitId: t.getUnitId(),
           ...e,
           title: "",
           description: "",
-          docTransform: l,
+          docTransform: g,
           layoutType: W.INLINE,
-          transform: ct(l)
+          transform: ct(g)
         }
       ]
     };
-    return this._commandService.syncExecuteCommand(Rn.id, u), p;
+    return this._commandService.syncExecuteCommand(Rn.id, u), h;
   }
 };
 ln = br([
@@ -1914,20 +1914,20 @@ ln = br([
   We(5, $)
 ], ln);
 const Rr = (i) => {
-  const { floatDomInfos: e, scene: n, offset: t } = i, r = Vi(() => e.map((o) => {
-    const { width: s, height: c, left: d, top: a } = o.transform, m = xt(
+  const { floatDomInfos: e, scene: n, offset: t, bound: r } = i, o = r.right - r.left, s = r.bottom - r.top, c = Vi(() => e.map((d) => {
+    const { width: a = 0, height: l = 0, left: m = 0, top: g = 0 } = d.transform, u = xt(
       {
-        left: d != null ? d : 0 - t.x,
-        right: (d != null ? d : 0) + (s != null ? s : 0) - t.x,
-        top: a != null ? a : 0 - t.y,
-        bottom: (a != null ? a : 0) + (c != null ? c : 0) - t.y
+        left: m,
+        right: m + a,
+        top: g,
+        bottom: g + l
       },
       n
-    ), l = {
-      position$: new yn(m),
-      position: m,
-      id: o.drawingId,
-      componentKey: o.componentKey,
+    ), v = {
+      position$: new yn(u),
+      position: u,
+      id: d.drawingId,
+      componentKey: d.componentKey,
       onPointerMove: () => {
       },
       onPointerDown: () => {
@@ -1936,11 +1936,12 @@ const Rr = (i) => {
       },
       onWheel: () => {
       },
-      unitId: o.unitId
+      unitId: d.unitId,
+      data: d.data
     };
-    return [o.drawingId, l];
-  }), [e, n, t]);
-  return /* @__PURE__ */ h("div", { style: { position: "absolute", top: 0, left: 0 }, children: r.map(([o, s]) => /* @__PURE__ */ h(yi, { layer: s, id: o, position: s.position }, o)) });
+    return [d.drawingId, v];
+  }).filter(([d, a]) => !(a.position.endX < 0 || a.position.endY < 0 || a.position.startX > o || a.position.startY > s)), [e, n, t, o, s]);
+  return /* @__PURE__ */ f("div", { style: { position: "absolute", top: 0, left: 0 }, children: c.map(([d, a]) => /* @__PURE__ */ f(yi, { layer: a, id: d, position: a.position }, d)) });
 };
 var Nr = Object.getOwnPropertyDescriptor, Er = (i, e, n, t) => {
   for (var r = t > 1 ? void 0 : t ? Nr(e, n) : e, o = i.length - 1, s; o >= 0; o--)
@@ -1977,23 +1978,30 @@ let gn = class extends Be {
             if (o) {
               const s = o.order.map((d) => {
                 const a = o.data[d];
-                return a.drawingType === Ue.DRAWING_CHART ? {
-                  ...a,
-                  componentKey: this._componetManager.get(qt)
-                } : a.drawingType === Ue.DRAWING_DOM ? {
-                  ...a,
-                  componentKey: this._componetManager.get(a.componentKey)
-                } : null;
+                if (a.drawingType === Ue.DRAWING_CHART)
+                  return {
+                    ...a,
+                    componentKey: this._componetManager.get(qt)
+                  };
+                if (a.drawingType === Ue.DRAWING_DOM) {
+                  const l = this._docPrintInterceptorService.getPrintComponent(a.componentKey);
+                  return {
+                    ...a,
+                    componentKey: this._componetManager.get(l || a.componentKey)
+                  };
+                }
+                return null;
               }).filter(Boolean), c = Mi(Rr, this._injector);
               return Fi(
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ f(
                   c,
                   {
                     unitId: t,
                     floatDomInfos: s,
                     scene: e.scene,
                     skeleton: e.skeleton,
-                    offset: e.offset
+                    offset: e.offset,
+                    bound: e.bound
                   }
                 ),
                 e.root
@@ -2062,7 +2070,7 @@ let mn = class extends Be {
           this._transformerCache.clear();
           const { objects: s } = o;
           for (const d of s.values()) {
-            const { oKey: a, width: g, height: m, left: l, top: p, angle: u } = d, v = this._drawingManagerService.getDrawingOKey(a);
+            const { oKey: a, width: l, height: m, left: g, top: h, angle: u } = d, v = this._drawingManagerService.getDrawingOKey(a);
             if (v == null)
               continue;
             const w = this._univerInstanceService.getUniverDocInstance(v.unitId), I = (c = w == null ? void 0 : w.getSnapshot().drawings) == null ? void 0 : c[v.drawingId];
@@ -2073,9 +2081,9 @@ let mn = class extends Be {
               }
             I != null && this._transformerCache.set(v.drawingId, {
               drawing: I,
-              top: p,
-              left: l,
-              width: g,
+              top: h,
+              left: g,
+              width: l,
               height: m,
               angle: u
             });
@@ -2091,8 +2099,8 @@ let mn = class extends Be {
           if (s.size > 1)
             t(s);
           else if (s.size === 1) {
-            const a = this._transformerCache.values().next().value, g = s.values().next().value, { width: m, height: l, top: p, left: u, angle: v } = g;
-            if (a && m === a.width && l === a.height && p === a.top && u === a.left && v === a.angle)
+            const a = this._transformerCache.values().next().value, l = s.values().next().value, { width: m, height: g, top: h, left: u, angle: v } = l;
+            if (a && m === a.width && g === a.height && h === a.top && u === a.left && v === a.angle)
               return;
             a && (a.drawing.layoutType, W.INLINE), a && a.drawing.layoutType === W.INLINE && c != null && d != null && this._updateInlineDrawingAnchor(a.drawing, c, d);
           }
@@ -2104,10 +2112,10 @@ let mn = class extends Be {
         n.changeEnd$.subscribe((o) => {
           const { objects: s, offsetX: c, offsetY: d } = o;
           for (const a of s.values()) {
-            const g = this._drawingManagerService.getDrawingOKey(a.oKey);
-            if (g == null)
+            const l = this._drawingManagerService.getDrawingOKey(a.oKey);
+            if (l == null)
               continue;
-            const m = this._transformerCache.get(g == null ? void 0 : g.drawingId);
+            const m = this._transformerCache.get(l == null ? void 0 : l.drawingId);
             if ((m == null ? void 0 : m.drawing.layoutType) === W.INLINE)
               try {
                 a.setOpacity(1);
@@ -2117,10 +2125,10 @@ let mn = class extends Be {
           if (this._anchorShape && this._anchorShape.hide(), s.size > 1)
             this._updateMultipleDrawingDocTransform(s);
           else if (s.size === 1) {
-            const a = this._transformerCache.values().next().value, g = s.values().next().value, { width: m, height: l, top: p, left: u, angle: v } = g;
-            if (a && m === a.width && l === a.height && p === a.top && u === a.left && v === a.angle)
+            const a = this._transformerCache.values().next().value, l = s.values().next().value, { width: m, height: g, top: h, left: u, angle: v } = l;
+            if (a && m === a.width && g === a.height && h === a.top && u === a.left && v === a.angle)
               return;
-            a && a.drawing.layoutType === W.INLINE ? m !== a.width || l !== a.height || v !== a.angle ? this._updateDrawingSize(a, g) : c != null && d != null && this._moveInlineDrawing(a.drawing, c, d) : a && this._nonInlineDrawingTransform(a.drawing, g);
+            a && a.drawing.layoutType === W.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);
           }
           this._transformerCache.clear();
         })
@@ -2135,37 +2143,37 @@ let mn = class extends Be {
     let t, r;
     for (const o of e.values()) {
       const { oKey: s, left: c, top: d, angle: a } = o;
-      let { width: g, height: m } = o;
-      const l = this._drawingManagerService.getDrawingOKey(s);
-      if (l == null)
+      let { width: l, height: m } = o;
+      const g = this._drawingManagerService.getDrawingOKey(s);
+      if (g == null)
         continue;
-      t == null && (t = l.unitId), r == null && (r = l.subUnitId);
-      const p = this._transformerCache.get(l.drawingId);
-      if (p == null)
+      t == null && (t = g.unitId), r == null && (r = g.subUnitId);
+      const h = this._transformerCache.get(g.drawingId);
+      if (h == null)
         continue;
-      const { drawing: u, top: v, left: w, width: I, height: O, angle: C } = p, { width: P, height: b } = this._getPageContentSize(u);
-      if (g = Math.min(g, P), m = Math.min(m, b), (I !== g || O !== m) && n.push({
-        drawingId: l.drawingId,
+      const { drawing: u, top: v, left: w, width: I, height: O, angle: C } = h, { width: P, height: b } = this._getPageContentSize(u);
+      if (l = Math.min(l, P), m = Math.min(m, b), (I !== l || O !== m) && n.push({
+        drawingId: g.drawingId,
         key: "size",
         value: {
-          width: g,
+          width: l,
           height: m
         }
       }), C !== a && n.push({
-        drawingId: l.drawingId,
+        drawingId: g.drawingId,
         key: "angle",
         value: a
       }), v !== d || w !== c) {
         const y = d - v, E = c - w;
         y !== 0 && n.push({
-          drawingId: l.drawingId,
+          drawingId: g.drawingId,
           key: "positionV",
           value: {
             relativeFrom: u.docTransform.positionV.relativeFrom,
             posOffset: u.docTransform.positionV.posOffset + y
           }
         }), E !== 0 && n.push({
-          drawingId: l.drawingId,
+          drawingId: g.drawingId,
           key: "positionH",
           value: {
             relativeFrom: u.docTransform.positionH.relativeFrom,
@@ -2200,29 +2208,29 @@ let mn = class extends Be {
     if (r == null)
       return;
     const { mainComponent: s, scene: c } = r, d = s, a = c.getViewports()[0], {
-      pageLayoutType: g = kn.VERTICAL,
+      pageLayoutType: l = kn.VERTICAL,
       pageMarginLeft: m,
-      pageMarginTop: l
+      pageMarginTop: g
     } = d.getOffsetConfig();
-    let p = null, u = !1, v = -1, w = "";
+    let h = null, u = !1, v = -1, w = "";
     const I = 0.5, O = this._getTransformCoordForDocumentOffset(d, a, n, t);
     if (O == null)
       return;
     const C = (x = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : x.with(Re);
     if (C == null)
       return;
-    const P = o == null ? void 0 : o.findNodeByCoord(O, g, m, l, {
+    const P = o == null ? void 0 : o.findNodeByCoord(O, l, m, g, {
       strict: !1,
       segmentId: C.getSegment(),
       segmentPage: C.getSegmentPage()
     });
     if (P) {
       const { node: S, ratioX: D, segmentPage: R, segmentId: T } = P;
-      u = D < I, p = S, v = R, w = T;
+      u = D < I, h = S, v = R, w = T;
     }
-    if (p == null)
+    if (h == null)
       return;
-    const b = o == null ? void 0 : o.findPositionByGlyph(p, v), y = this._getDocObject();
+    const b = o == null ? void 0 : o.findPositionByGlyph(h, v), y = this._getDocObject();
     if (b == null || o == null || y == null || Qn(b))
       return;
     const E = {
@@ -2238,7 +2246,7 @@ let mn = class extends Be {
     const t = this._renderManagerService.getRenderById(e.unitId), r = t == null ? void 0 : t.with(ie).getSkeleton(), o = r == null ? void 0 : r.getSkeletonData();
     if (o == null || t == null)
       return;
-    const { pages: s, skeHeaders: c, skeFooters: d } = o, { mainComponent: a, scene: g } = t, m = a, l = g.getViewports()[0], { pageLayoutType: p = kn.VERTICAL, pageMarginLeft: u, pageMarginTop: v, docsLeft: w, docsTop: I } = m.getOffsetConfig(), { left: O, top: C, angle: P } = n;
+    const { pages: s, skeHeaders: c, skeFooters: d } = o, { mainComponent: a, scene: l } = t, m = a, g = l.getViewports()[0], { pageLayoutType: h = kn.VERTICAL, pageMarginLeft: u, pageMarginTop: v, docsLeft: w, docsTop: I } = m.getOffsetConfig(), { left: O, top: C, angle: P } = n;
     let { width: b, height: y } = n;
     const { positionV: E, positionH: B } = e.docTransform, { width: N, height: _ } = this._getPageContentSize(e);
     b = Math.min(b, N), y = Math.min(y, _);
@@ -2250,13 +2258,13 @@ let mn = class extends Be {
         height: y
       },
       angle: P
-    }, { x: D, y: R } = g.getViewportScrollXY(l), T = this._getTransformCoordForDocumentOffset(m, l, O - D, C - R);
+    }, { x: D, y: R } = l.getViewportScrollXY(g), T = this._getTransformCoordForDocumentOffset(m, g, O - D, C - R);
     if (T == null)
       return;
     const U = (De = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : De.with(Re);
     if (U == null)
       return;
-    const F = r == null ? void 0 : r.findNodeByCoord(T, p, u, v, {
+    const F = r == null ? void 0 : r.findNodeByCoord(T, h, u, v, {
       strict: !1,
       segmentId: U.getSegment(),
       segmentPage: U.getSegmentPage()
@@ -2303,7 +2311,7 @@ let mn = class extends Be {
       }
       if (this._liquid.translatePagePadding(ve), ve === k)
         break;
-      this._liquid.restorePagePadding(ve), this._liquid.translatePage(ve, p, u, v);
+      this._liquid.restorePagePadding(ve), this._liquid.translatePage(ve, h, u, v);
     }
     switch (E.relativeFrom === H.LINE ? L = M.divides[0].glyphGroup[0] : L = (me = (ge = (ye = (Ae = z.divides) == null ? void 0 : Ae[0]) == null ? void 0 : ye.glyphGroup) == null ? void 0 : ge[0]) != null ? me : L, S.positionH = {
       relativeFrom: B.relativeFrom,
@@ -2350,19 +2358,19 @@ let mn = class extends Be {
   // Update drawing when use transformer to resize it.
   _updateDrawingSize(e, n) {
     const t = [], { drawing: r, width: o, height: s, angle: c } = e, { unitId: d, subUnitId: a } = r;
-    let { width: g, height: m, angle: l } = n;
-    const { width: p, height: u } = this._getPageContentSize(r);
-    g = Math.min(p, g), m = Math.min(u, m), (g !== o || m !== s) && t.push({
+    let { width: l, height: m, angle: g } = n;
+    const { width: h, height: u } = this._getPageContentSize(r);
+    l = Math.min(h, l), m = Math.min(u, m), (l !== o || m !== s) && t.push({
       drawingId: r.drawingId,
       key: "size",
       value: {
-        width: g,
+        width: l,
         height: m
       }
-    }), l !== c && t.push({
+    }), g !== c && t.push({
       drawingId: r.drawingId,
       key: "angle",
-      value: l
+      value: g
     }), t.length > 0 && d && a && this._commandService.executeCommand(Ze.id, {
       unitId: d,
       subUnitId: a,
@@ -2385,8 +2393,8 @@ let mn = class extends Be {
   // 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(ie).getSkeleton(), g = a == null ? void 0 : a.getSkeletonData(), { pages: m } = g != null ? g : {};
-    if (g == null || t == null || m == null)
+    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(ie).getSkeleton(), l = a == null ? void 0 : a.getSkeletonData(), { pages: m } = l != null ? l : {};
+    if (l == null || t == null || m == null)
       return {
         left: r,
         top: o,
@@ -2394,7 +2402,7 @@ let mn = class extends Be {
         height: c,
         angle: d
       };
-    const { mainComponent: l } = t, p = l, { top: u, pageLayoutType: v, pageMarginLeft: w, pageMarginTop: I } = p;
+    const { mainComponent: g } = t, h = g, { top: u, pageLayoutType: v, pageMarginLeft: w, pageMarginTop: I } = h;
     let O = o;
     this._liquid.reset();
     for (const C of m) {
@@ -2456,15 +2464,15 @@ let mn = class extends Be {
     const { mainComponent: r, scene: o } = t, s = r, {
       docsLeft: c,
       docsTop: d
-    } = s.getOffsetConfig(), a = Ei(n), { left: g, top: m, height: l } = a, p = g + c, u = m + d;
+    } = s.getOffsetConfig(), a = Ei(n), { left: l, top: m, height: g } = a, h = l + c, u = m + d;
     if (this._anchorShape) {
-      this._anchorShape.transformByState({ left: p, top: u, height: l }), this._anchorShape.show();
+      this._anchorShape.transformByState({ left: h, top: u, height: g }), this._anchorShape.show();
       return;
     }
     const v = 6, w = new wi(Lr + be.generateRandomId(v), {
-      left: p,
+      left: h,
       top: u,
-      height: l,
+      height: g,
       strokeWidth: 2,
       stroke: vi(Kt.darkGray, 1),
       evented: !1
@@ -2484,17 +2492,17 @@ let mn = class extends Be {
     const { pages: c } = s;
     let d = null;
     for (const a of c) {
-      const { skeDrawings: g } = a;
-      if (g.has(e.drawingId)) {
+      const { skeDrawings: l } = a;
+      if (l.has(e.drawingId)) {
         d = a;
         break;
       }
     }
     if (d) {
-      const { pageWidth: a, pageHeight: g, marginLeft: m, marginBottom: l, marginRight: p, marginTop: u } = d;
+      const { pageWidth: a, pageHeight: l, marginLeft: m, marginBottom: g, marginRight: h, marginTop: u } = d;
       return {
-        width: Math.max(r, a - m - p),
-        height: Math.max(o, g - u - l)
+        width: Math.max(r, a - m - h),
+        height: Math.max(o, l - u - g)
       };
     } else
       return {
@@ -2564,22 +2572,22 @@ let un = class extends Yt {
           const d = c.oKey, a = this._drawingManagerService.getDrawingOKey(d);
           if (!a || a.drawingType === Ue.DRAWING_DOM)
             return;
-          const { unitId: g, subUnitId: m, drawingId: l, drawingType: p } = a, u = this._canvasPopManagerService.attachPopupToObject(
+          const { unitId: l, subUnitId: m, drawingId: g, drawingType: h } = a, u = this._canvasPopManagerService.attachPopupToObject(
             c,
             {
               componentKey: gi,
               direction: "horizontal",
               offset: [2, 0],
               extraProps: {
-                menuItems: this._getImageMenuItems(g, m, l, p)
+                menuItems: this._getImageMenuItems(l, m, g, h)
               }
             },
-            g
+            l
           );
-          r.push(this.disposeWithMe(u)), !this._drawingManagerService.getFocusDrawings().find((I) => I.unitId === g && I.subUnitId === m && I.drawingId === l) && this._drawingManagerService.focusDrawing([{
-            unitId: g,
+          r.push(this.disposeWithMe(u)), !this._drawingManagerService.getFocusDrawings().find((I) => I.unitId === l && I.subUnitId === m && I.drawingId === g) && this._drawingManagerService.focusDrawing([{
+            unitId: l,
             subUnitId: m,
-            drawingId: l
+            drawingId: g
           }]);
         })
       )
@@ -2704,12 +2712,12 @@ let Cn = class extends Be {
     const n = e == null ? void 0 : e.getSkeletonData(), { mainComponent: t, unitId: r } = this._context, o = t;
     if (!n)
       return;
-    const { left: s, top: c, pageLayoutType: d, pageMarginLeft: a, pageMarginTop: g } = o, { pages: m, skeHeaders: l, skeFooters: p } = n, u = {};
+    const { left: s, top: c, pageLayoutType: d, pageMarginLeft: a, pageMarginTop: l } = o, { pages: m, skeHeaders: g, skeFooters: h } = n, u = {};
     this._liquid.reset();
     for (let P = 0, b = m.length; P < b; P++) {
       const y = m[P], { headerId: E, footerId: B, pageWidth: N } = y;
       if (E) {
-        const _ = (O = l.get(E)) == null ? void 0 : O.get(N);
+        const _ = (O = g.get(E)) == null ? void 0 : O.get(N);
         _ && this._calculateDrawingPosition(
           r,
           _,
@@ -2721,7 +2729,7 @@ let Cn = class extends Be {
         );
       }
       if (B) {
-        const _ = (C = p.get(B)) == null ? void 0 : C.get(N);
+        const _ = (C = h.get(B)) == null ? void 0 : C.get(N);
         _ && this._calculateDrawingPosition(
           r,
           _,
@@ -2732,7 +2740,7 @@ let Cn = class extends Be {
           y.marginLeft
         );
       }
-      this._calculateDrawingPosition(r, y, s, c, u, y.marginTop, y.marginLeft), this._liquid.translatePage(y, d, a, g);
+      this._calculateDrawingPosition(r, y, s, c, u, y.marginTop, y.marginLeft), this._liquid.translatePage(y, d, a, l);
     }
     const v = Object.values(u), w = v.filter((P) => !P.isMultiTransform), I = v.filter((P) => P.isMultiTransform);
     w.length > 0 && this._drawingManagerService.refreshTransform(w), this._handleMultiDrawingsTransform(I);
@@ -2756,11 +2764,11 @@ let Cn = class extends Be {
       marginTop: s,
       marginLeft: c
     }), d.forEach((a) => {
-      const { aLeft: g, aTop: m, height: l, width: p, angle: u, drawingId: v, drawingOrigin: w } = a, I = w.layoutType === W.WRAP_NONE && w.behindDoc === ae.TRUE, { isMultiTransform: O = ae.FALSE } = w, C = {
-        left: g + t + this._liquid.x,
+      const { aLeft: l, aTop: m, height: g, width: h, angle: u, drawingId: v, drawingOrigin: w } = a, I = w.layoutType === W.WRAP_NONE && w.behindDoc === ae.TRUE, { isMultiTransform: O = ae.FALSE } = w, C = {
+        left: l + t + this._liquid.x,
         top: m + r + this._liquid.y,
-        width: p,
-        height: l,
+        width: h,
+        height: g,
         angle: u
       };
       o[v] == null ? o[v] = {