@univerjs/docs-drawing-ui 0.6.7-nightly.202503291606 → 0.6.7-nightly.202503301606

package/lib/index.js

@@ -151,13 +151,13 @@ const Hi = {
 };
 function dt(i, e, n, t, r, o, s) {
   var f, u;
-  const a = new Dn(), d = X.getInstance(), c = [], l = o.getSelfOrHeaderFooterModel(e).getBody(), m = o.getSelfOrHeaderFooterModel(i).getBody();
-  if (l == null || m == null)
+  const a = new Dn(), d = X.getInstance(), c = [], g = o.getSelfOrHeaderFooterModel(e).getBody(), m = o.getSelfOrHeaderFooterModel(i).getBody();
+  if (g == null || m == null)
     return;
-  const g = (u = (f = l.customBlocks) == null ? void 0 : f.find((v) => v.blockId === r)) == null ? void 0 : u.startIndex;
-  if (g != null) {
+  const l = (u = (f = g.customBlocks) == null ? void 0 : f.find((v) => v.blockId === r)) == null ? void 0 : u.startIndex;
+  if (l != null) {
     if (t = Math.min(m.dataStream.length - 2, t), i === e) {
-      if (t < g ? (t > 0 && a.push({
+      if (t < l ? (t > 0 && a.push({
         t: Q.RETAIN,
         len: t
       }), a.push({
@@ -172,19 +172,19 @@ function dt(i, e, n, t, r, o, s) {
         len: 1
       }), a.push({
         t: Q.RETAIN,
-        len: g - t
+        len: l - t
       }), a.push({
         t: Q.DELETE,
         len: 1
-      })) : (g > 0 && a.push({
+      })) : (l > 0 && a.push({
         t: Q.RETAIN,
-        len: g
+        len: l
       }), a.push({
         t: Q.DELETE,
         len: 1
-      }), t - g - 1 > 0 && a.push({
+      }), t - l - 1 > 0 && a.push({
         t: Q.RETAIN,
-        len: t - g - 1
+        len: t - l - 1
       }), a.push({
         t: Q.INSERT,
         body: {
@@ -195,14 +195,14 @@ function dt(i, e, n, t, r, o, s) {
           }]
         },
         len: 1
-      })), t !== g) {
+      })), t !== l) {
         const v = qe(o, e), w = d.editOp(a.serialize(), v);
         c.push(w);
       }
     } else {
-      g > 0 && a.push({
+      l > 0 && a.push({
         t: Q.RETAIN,
-        len: g
+        len: l
       }), a.push({
         t: Q.DELETE,
         len: 1
@@ -234,10 +234,10 @@ const lt = {
     var N, B;
     if (e == null)
       return !1;
-    const { drawings: n, wrappingStyle: t, unitId: r } = e, o = i.get($), s = i.get(q), d = i.get(J).getRenderById(r), c = d == null ? void 0 : d.with(te).getSkeleton().getSkeletonData(), l = d == null ? void 0 : d.with(te).getViewModel(), m = d == null ? void 0 : d.scene, g = s.getCurrentUniverDocInstance();
-    if (g == null || c == null || m == null || l == null)
+    const { drawings: n, wrappingStyle: t, unitId: r } = e, o = i.get($), s = i.get(q), d = i.get(J).getRenderById(r), c = d == null ? void 0 : d.with(te).getSkeleton().getSkeletonData(), g = d == null ? void 0 : d.with(te).getViewModel(), m = d == null ? void 0 : d.scene, l = s.getCurrentUniverDocInstance();
+    if (l == null || c == null || m == null || g == null)
       return !1;
-    const f = l.getEditArea(), u = m.getTransformerByCreate(), { pages: v, skeHeaders: w, skeFooters: I } = c, O = X.getInstance(), C = [], { drawings: T = {} } = g.getSnapshot();
+    const f = g.getEditArea(), u = m.getTransformerByCreate(), { pages: v, skeHeaders: w, skeFooters: I } = c, O = X.getInstance(), C = [], { drawings: T = {} } = l.getSnapshot();
     for (const E of n) {
       const { drawingId: _ } = E, L = T[_].layoutType, G = Hi[t];
       if (L !== G) {
@@ -321,11 +321,11 @@ const lt = {
     const n = i.get($), r = i.get(q).getCurrentUniverDocInstance();
     if (r == null)
       return !1;
-    const { drawings: o, dist: s, unitId: a } = e, d = X.getInstance(), c = [], { drawings: l = {} } = r.getSnapshot();
+    const { drawings: o, dist: s, unitId: a } = e, d = X.getInstance(), c = [], { drawings: g = {} } = r.getSnapshot();
     for (const f of o) {
       const { drawingId: u } = f;
       for (const [v, w] of Object.entries(s)) {
-        const I = l[u][v];
+        const I = g[u][v];
         if (I !== w) {
           const O = d.replaceOp(["drawings", u, v], I, w);
           c.push(O);
@@ -351,9 +351,9 @@ const lt = {
     const n = i.get($), r = i.get(q).getCurrentUniverDocInstance();
     if (r == null)
       return !1;
-    const { drawings: o, wrapText: s, unitId: a } = e, d = X.getInstance(), c = [], { drawings: l = {} } = r.getSnapshot();
+    const { drawings: o, wrapText: s, unitId: a } = e, d = X.getInstance(), c = [], { drawings: g = {} } = r.getSnapshot();
     for (const f of o) {
-      const { drawingId: u } = f, v = l[u].wrapText;
+      const { drawingId: u } = f, v = g[u].wrapText;
       if (v !== s) {
         const w = d.replaceOp(["drawings", u, "wrapText"], v, s);
         c.push(w);
@@ -381,24 +381,24 @@ const lt = {
     const a = s.getTransformerByCreate(), d = t.getCurrentUniverDocInstance();
     if (d == null)
       return !1;
-    const { drawings: c, unitId: l } = e, m = X.getInstance(), g = [], { drawings: f = {} } = d.getSnapshot();
+    const { drawings: c, unitId: g } = e, m = X.getInstance(), l = [], { drawings: f = {} } = d.getSnapshot();
     for (const w of c) {
       const { drawingId: I, key: O, value: C } = w, T = f[I].docTransform[O];
       if (!be.diffValue(T, C)) {
         const b = m.replaceOp(["drawings", I, "docTransform", O], T, C);
-        g.push(b);
+        l.push(b);
       }
     }
     const u = {
       id: ne.id,
       params: {
-        unitId: l,
+        unitId: g,
         actions: [],
         textRanges: null,
         debounce: !0
       }
     };
-    u.params.actions = g.reduce((w, I) => X.compose(w, I), null);
+    u.params.actions = l.reduce((w, I) => X.compose(w, I), null);
     const v = n.syncExecuteCommand(u.id, u.params);
     return a.refreshControls(), !!v;
   }
@@ -415,10 +415,10 @@ const lt = {
     const d = s.getTransformerByCreate(), c = i.get($), m = i.get(q).getCurrentUniverDocInstance();
     if (m == null)
       return !1;
-    const { drawing: g, unitId: f, offset: u, segmentId: v, segmentPage: w, needRefreshDrawings: I } = e;
+    const { drawing: l, unitId: f, offset: u, segmentId: v, segmentPage: w, needRefreshDrawings: I } = e;
     if (I)
       return r.refreshDrawings(a), d.refreshControls(), !0;
-    const O = [], { drawingId: C } = g, T = (E = t.getSegment()) != null ? E : "", b = dt(
+    const O = [], { drawingId: C } = l, T = (E = t.getSegment()) != null ? E : "", b = dt(
       v,
       T,
       w,
@@ -456,11 +456,11 @@ const lt = {
     const s = o.getTransformerByCreate(), a = i.get($), c = i.get(q).getCurrentUniverDocInstance();
     if (c == null)
       return !1;
-    const { drawing: l, unitId: m, offset: g, docTransform: f, segmentId: u, segmentPage: v } = e, w = [], { drawingId: I } = l, O = (V = t.getSegment()) != null ? V : "", C = dt(
+    const { drawing: g, unitId: m, offset: l, docTransform: f, segmentId: u, segmentPage: v } = e, w = [], { drawingId: I } = g, O = (V = t.getSegment()) != null ? V : "", C = dt(
       u,
       O,
       v,
-      g,
+      l,
       I,
       c,
       t
@@ -547,7 +547,7 @@ let an = class extends Ge {
           this._transformerCache.clear();
           const { objects: s } = o;
           for (const d of s.values()) {
-            const { oKey: c, width: l, height: m, left: g, top: f, angle: u } = d, v = this._drawingManagerService.getDrawingOKey(c);
+            const { oKey: c, width: g, height: m, left: l, top: f, angle: u } = d, v = this._drawingManagerService.getDrawingOKey(c);
             if (v == null)
               continue;
             const w = this._univerInstanceService.getUniverDocInstance(v.unitId), I = (a = w == null ? void 0 : w.getSnapshot().drawings) == null ? void 0 : a[v.drawingId];
@@ -559,8 +559,8 @@ let an = class extends Ge {
             I != null && this._transformerCache.set(v.drawingId, {
               drawing: I,
               top: f,
-              left: g,
-              width: l,
+              left: l,
+              width: g,
               height: m,
               angle: u
             });
@@ -576,8 +576,8 @@ let an = class extends Ge {
           if (s.size > 1)
             t(s);
           else if (s.size === 1) {
-            const c = this._transformerCache.values().next().value, l = s.values().next().value, { width: m, height: g, top: f, left: u, angle: v } = l;
-            if (c && m === c.width && g === c.height && f === c.top && u === c.left && v === c.angle)
+            const c = this._transformerCache.values().next().value, g = s.values().next().value, { width: m, height: l, top: f, left: u, angle: v } = g;
+            if (c && m === c.width && l === c.height && f === c.top && u === c.left && v === c.angle)
               return;
             c && (c.drawing.layoutType, W.INLINE), c && c.drawing.layoutType === W.INLINE && a != null && d != null && this._updateInlineDrawingAnchor(c.drawing, a, d);
           }
@@ -589,10 +589,10 @@ let an = class extends Ge {
         n.changeEnd$.subscribe((o) => {
           const { objects: s, offsetX: a, offsetY: d } = o;
           for (const c of s.values()) {
-            const l = this._drawingManagerService.getDrawingOKey(c.oKey);
-            if (l == null)
+            const g = this._drawingManagerService.getDrawingOKey(c.oKey);
+            if (g == null)
               continue;
-            const m = this._transformerCache.get(l == null ? void 0 : l.drawingId);
+            const m = this._transformerCache.get(g == null ? void 0 : g.drawingId);
             if ((m == null ? void 0 : m.drawing.layoutType) === W.INLINE)
               try {
                 c.setOpacity(1);
@@ -602,10 +602,10 @@ let an = class extends Ge {
           if (this._anchorShape && this._anchorShape.hide(), s.size > 1)
             this._updateMultipleDrawingDocTransform(s);
           else if (s.size === 1) {
-            const c = this._transformerCache.values().next().value, l = s.values().next().value, { width: m, height: g, top: f, left: u, angle: v } = l;
-            if (c && m === c.width && g === c.height && f === c.top && u === c.left && v === c.angle)
+            const c = this._transformerCache.values().next().value, g = s.values().next().value, { width: m, height: l, top: f, left: u, angle: v } = g;
+            if (c && m === c.width && l === c.height && f === c.top && u === c.left && v === c.angle)
               return;
-            c && c.drawing.layoutType === W.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);
+            c && c.drawing.layoutType === W.INLINE ? m !== c.width || l !== c.height || v !== c.angle ? this._updateDrawingSize(c, g) : a != null && d != null && this._moveInlineDrawing(c.drawing, a, d) : c && this._nonInlineDrawingTransform(c.drawing, g);
           }
           this._transformerCache.clear();
         })
@@ -620,37 +620,37 @@ let an = class extends Ge {
     let t, r;
     for (const o of e.values()) {
       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)
+      let { width: g, height: m } = o;
+      const l = this._drawingManagerService.getDrawingOKey(s);
+      if (l == null)
         continue;
-      t == null && (t = g.unitId), r == null && (r = g.subUnitId);
-      const f = this._transformerCache.get(g.drawingId);
+      t == null && (t = l.unitId), r == null && (r = l.subUnitId);
+      const f = this._transformerCache.get(l.drawingId);
       if (f == null)
         continue;
       const { drawing: u, top: v, left: w, width: I, height: O, angle: C } = f, { width: T, height: b } = this._getPageContentSize(u);
-      if (l = Math.min(l, T), m = Math.min(m, b), (I !== l || O !== m) && n.push({
-        drawingId: g.drawingId,
+      if (g = Math.min(g, T), m = Math.min(m, b), (I !== g || O !== m) && n.push({
+        drawingId: l.drawingId,
         key: "size",
         value: {
-          width: l,
+          width: g,
           height: m
         }
       }), C !== c && n.push({
-        drawingId: g.drawingId,
+        drawingId: l.drawingId,
         key: "angle",
         value: c
       }), v !== d || w !== a) {
         const P = d - v, N = a - w;
         P !== 0 && n.push({
-          drawingId: g.drawingId,
+          drawingId: l.drawingId,
           key: "positionV",
           value: {
             relativeFrom: u.docTransform.positionV.relativeFrom,
             posOffset: u.docTransform.positionV.posOffset + P
           }
         }), N !== 0 && n.push({
-          drawingId: g.drawingId,
+          drawingId: l.drawingId,
           key: "positionH",
           value: {
             relativeFrom: u.docTransform.positionH.relativeFrom,
@@ -685,9 +685,9 @@ let an = class extends Ge {
     if (r == null)
       return;
     const { mainComponent: s, scene: a } = r, d = s, c = a.getViewports()[0], {
-      pageLayoutType: l = Ln.VERTICAL,
+      pageLayoutType: g = Ln.VERTICAL,
       pageMarginLeft: m,
-      pageMarginTop: g
+      pageMarginTop: l
     } = d.getOffsetConfig();
     let f = null, u = !1, v = -1, w = "";
     const I = 0.5, O = this._getTransformCoordForDocumentOffset(d, c, n, t);
@@ -696,7 +696,7 @@ let an = class extends Ge {
     const C = (x = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : x.with(Re);
     if (C == null)
       return;
-    const T = o == null ? void 0 : o.findNodeByCoord(O, l, m, g, {
+    const T = o == null ? void 0 : o.findNodeByCoord(O, g, m, l, {
       strict: !1,
       segmentId: C.getSegment(),
       segmentPage: C.getSegmentPage()
@@ -723,7 +723,7 @@ let an = class extends Ge {
     const t = this._renderManagerService.getRenderById(e.unitId), r = t == null ? void 0 : t.with(te).getSkeleton(), o = r == null ? void 0 : r.getSkeletonData();
     if (o == null || t == null)
       return;
-    const { pages: s, skeHeaders: a, skeFooters: d } = o, { mainComponent: c, scene: l } = t, m = c, g = l.getViewports()[0], { pageLayoutType: f = Ln.VERTICAL, pageMarginLeft: u, pageMarginTop: v, docsLeft: w, docsTop: I } = m.getOffsetConfig(), { left: O, top: C, angle: T } = n;
+    const { pages: s, skeHeaders: a, skeFooters: d } = o, { mainComponent: c, scene: g } = t, m = c, l = g.getViewports()[0], { pageLayoutType: f = Ln.VERTICAL, pageMarginLeft: u, pageMarginTop: v, docsLeft: w, docsTop: I } = m.getOffsetConfig(), { left: O, top: C, angle: T } = n;
     let { width: b, height: P } = n;
     const { positionV: N, positionH: B } = e.docTransform, { width: E, height: _ } = this._getPageContentSize(e);
     b = Math.min(b, E), P = Math.min(P, _);
@@ -735,7 +735,7 @@ let an = class extends Ge {
         height: P
       },
       angle: T
-    }, { x: D, y: R } = l.getViewportScrollXY(g), y = this._getTransformCoordForDocumentOffset(m, g, O - D, C - R);
+    }, { x: D, y: R } = g.getViewportScrollXY(l), y = this._getTransformCoordForDocumentOffset(m, l, O - D, C - R);
     if (y == null)
       return;
     const U = (De = this._renderManagerService.getRenderById(e.unitId)) == null ? void 0 : De.with(Re);
@@ -835,19 +835,19 @@ let an = class extends Ge {
   // Update drawing when use transformer to resize it.
   _updateDrawingSize(e, n) {
     const t = [], { drawing: r, width: o, height: s, angle: a } = e, { unitId: d, subUnitId: c } = r;
-    let { width: l, height: m, angle: g } = n;
+    let { width: g, height: m, angle: l } = n;
     const { width: f, height: u } = this._getPageContentSize(r);
-    l = Math.min(f, l), m = Math.min(u, m), (l !== o || m !== s) && t.push({
+    g = Math.min(f, g), m = Math.min(u, m), (g !== o || m !== s) && t.push({
       drawingId: r.drawingId,
       key: "size",
       value: {
-        width: l,
+        width: g,
         height: m
       }
-    }), g !== a && t.push({
+    }), l !== a && t.push({
       drawingId: r.drawingId,
       key: "angle",
-      value: g
+      value: l
     }), t.length > 0 && d && c && this._commandService.executeCommand(Ke.id, {
       unitId: d,
       subUnitId: c,
@@ -870,8 +870,8 @@ let an = class extends Ge {
   // 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: a, angle: d } = n, c = t == null ? void 0 : t.with(te).getSkeleton(), l = c == null ? void 0 : c.getSkeletonData(), { pages: m } = l != null ? l : {};
-    if (l == null || t == null || m == null)
+    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(te).getSkeleton(), g = c == null ? void 0 : c.getSkeletonData(), { pages: m } = g != null ? g : {};
+    if (g == null || t == null || m == null)
       return {
         left: r,
         top: o,
@@ -879,7 +879,7 @@ let an = class extends Ge {
         height: a,
         angle: d
       };
-    const { mainComponent: g } = t, f = g, { top: u, pageLayoutType: v, pageMarginLeft: w, pageMarginTop: I } = f;
+    const { mainComponent: l } = t, f = l, { top: u, pageLayoutType: v, pageMarginLeft: w, pageMarginTop: I } = f;
     let O = o;
     this._liquid.reset();
     for (const C of m) {
@@ -941,15 +941,15 @@ let an = class extends Ge {
     const { mainComponent: r, scene: o } = t, s = r, {
       docsLeft: a,
       docsTop: d
-    } = s.getOffsetConfig(), c = Ti(n), { left: l, top: m, height: g } = c, f = l + a, u = m + d;
+    } = s.getOffsetConfig(), c = Ti(n), { left: g, top: m, height: l } = c, f = g + a, u = m + d;
     if (this._anchorShape) {
-      this._anchorShape.transformByState({ left: f, top: u, height: g }), this._anchorShape.show();
+      this._anchorShape.transformByState({ left: f, top: u, height: l }), this._anchorShape.show();
       return;
     }
     const v = 6, w = new mi(ji + be.generateRandomId(v), {
       left: f,
       top: u,
-      height: g,
+      height: l,
       strokeWidth: 2,
       stroke: ui(Bt.darkGray, 1),
       evented: !1
@@ -969,17 +969,17 @@ let an = class extends Ge {
     const { pages: a } = s;
     let d = null;
     for (const c of a) {
-      const { skeDrawings: l } = c;
-      if (l.has(e.drawingId)) {
+      const { skeDrawings: g } = c;
+      if (g.has(e.drawingId)) {
         d = c;
         break;
       }
     }
     if (d) {
-      const { pageWidth: c, pageHeight: l, marginLeft: m, marginBottom: g, marginRight: f, marginTop: u } = d;
+      const { pageWidth: c, pageHeight: g, marginLeft: m, marginBottom: l, marginRight: f, marginTop: u } = d;
       return {
         width: Math.max(r, c - m - f),
-        height: Math.max(o, l - u - g)
+        height: Math.max(o, g - u - l)
       };
     } else
       return {
@@ -1057,9 +1057,9 @@ const yn = {
     const n = i.get($), t = i.get(q), r = i.get(J), o = t.getCurrentUniverDocInstance();
     if (e == null || o == null)
       return !1;
-    const s = r.getRenderById(e.unitId).with(Re), { drawings: a } = e, d = (b = s.getSegment()) != null ? b : "", c = new Dn(), l = X.getInstance(), m = (N = (P = o.getSelfOrHeaderFooterModel(d).getBody()) == null ? void 0 : P.customBlocks) != null ? N : [], g = a.map((E) => m.find((_) => _.blockId === E.drawingId)).filter((E) => !!E).sort((E, _) => E.startIndex > _.startIndex ? 1 : -1), f = a[0].unitId, u = new Ft();
+    const s = r.getRenderById(e.unitId).with(Re), { drawings: a } = e, d = (b = s.getSegment()) != null ? b : "", c = new Dn(), g = X.getInstance(), m = (N = (P = o.getSelfOrHeaderFooterModel(d).getBody()) == null ? void 0 : P.customBlocks) != null ? N : [], l = a.map((E) => m.find((_) => _.blockId === E.drawingId)).filter((E) => !!E).sort((E, _) => E.startIndex > _.startIndex ? 1 : -1), f = a[0].unitId, u = new Ft();
     u.reset();
-    const v = g[0].startIndex, w = [
+    const v = l[0].startIndex, w = [
       {
         startOffset: v,
         endOffset: v
@@ -1072,7 +1072,7 @@ const yn = {
         textRanges: w
       }
     }, O = [];
-    for (const E of g) {
+    for (const E of l) {
       const { startIndex: _ } = E;
       _ > u.cursor && c.push({
         t: Q.RETAIN,
@@ -1083,9 +1083,9 @@ const yn = {
       }), u.moveCursorTo(_ + 1);
     }
     const C = qe(o, d);
-    O.push(l.editOp(c.serialize(), C));
-    for (const E of g) {
-      const { blockId: _ } = E, L = ((B = o.getDrawings()) != null ? B : {})[_], x = o.getDrawingsOrder().indexOf(_), V = l.removeOp(["drawings", _], L), S = l.removeOp(["drawingsOrder", x], _);
+    O.push(g.editOp(c.serialize(), C));
+    for (const E of l) {
+      const { blockId: _ } = E, L = ((B = o.getDrawings()) != null ? B : {})[_], x = o.getDrawingsOrder().indexOf(_), V = g.removeOp(["drawings", _], L), S = g.removeOp(["drawingsOrder", x], _);
       O.push(V), O.push(S);
     }
     return I.params.actions = O.reduce((E, _) => X.compose(E, _), null), !!n.syncExecuteCommand(I.id, I.params);
@@ -1098,12 +1098,12 @@ const yn = {
     if (t.length === 0)
       return !1;
     const { unitId: r } = t[0], o = t.map((s) => {
-      const { unitId: a, subUnitId: d, drawingId: c, drawingType: l } = s;
+      const { unitId: a, subUnitId: d, drawingId: c, drawingType: g } = s;
       return {
         unitId: a,
         subUnitId: d,
         drawingId: c,
-        drawingType: l
+        drawingType: g
       };
     });
     return e.executeCommand(yn.id, {
@@ -1119,9 +1119,9 @@ const yn = {
     const n = i.get(Ue);
     if (!e) return !1;
     const t = [];
-    e.forEach(({ parent: l, children: m }) => {
-      t.push(l.unitId), m.forEach((g) => {
-        t.push(g.unitId);
+    e.forEach(({ parent: g, children: m }) => {
+      t.push(g.unitId), m.forEach((l) => {
+        t.push(l.unitId);
       });
     });
     const r = n.getGroupDrawingOp(e), { unitId: o, subUnitId: s, undo: a, redo: d, objects: c } = r;
@@ -1138,20 +1138,20 @@ const yn = {
     const n = i.get($), t = i.get(On), r = i.get(q), o = t.getActiveTextRange(), s = r.getCurrentUniverDocInstance();
     if (o == null || s == null)
       return !1;
-    const a = s.getUnitId(), { drawings: d } = e, { collapsed: c, startOffset: l, segmentId: m } = o, g = s.getSelfOrHeaderFooterModel(m).getBody();
-    if (g == null)
+    const a = s.getUnitId(), { drawings: d } = e, { collapsed: c, startOffset: g, segmentId: m } = o, l = s.getSelfOrHeaderFooterModel(m).getBody();
+    if (l == null)
       return !1;
     const f = new Dn(), u = X.getInstance(), v = [], w = (N = (P = s.getSnapshot().drawingsOrder) == null ? void 0 : P.length) != null ? N : 0;
     let I = 0;
     if (c)
-      l > 0 && f.push({
+      g > 0 && f.push({
         t: Q.RETAIN,
-        len: l
+        len: g
       });
     else {
-      const _ = kt.selection.delete([o], g, 0, null, !1);
+      const _ = kt.selection.delete([o], l, 0, null, !1);
       f.push(..._);
-      const L = Mi(g, [o]), G = (B = s.getDrawings()) != null ? B : {}, x = (E = s.getDrawingsOrder()) != null ? E : [], V = L.sort((S, D) => x.indexOf(S) > x.indexOf(D) ? -1 : x.indexOf(S) < x.indexOf(D) ? 1 : 0);
+      const L = Mi(l, [o]), G = (B = s.getDrawings()) != null ? B : {}, x = (E = s.getDrawingsOrder()) != null ? E : [], V = L.sort((S, D) => x.indexOf(S) > x.indexOf(D) ? -1 : x.indexOf(S) < x.indexOf(D) ? 1 : 0);
       if (V.length > 0)
         for (const S of V) {
           const D = G[S], R = x.indexOf(S);
@@ -1199,12 +1199,12 @@ const yn = {
     let c;
     if (a === Qe.forward ? c = t.getForwardDrawingsOp(d) : a === Qe.backward ? c = t.getBackwardDrawingOp(d) : a === Qe.front ? c = t.getFrontDrawingsOp(d) : a === Qe.back && (c = t.getBackDrawingsOp(d)), c == null)
       return !1;
-    const { redo: l } = c;
-    if (l == null)
+    const { redo: g } = c;
+    if (g == null)
       return !1;
     const m = [];
-    let g = be.deepClone(l);
-    g = g.slice(3), g.unshift("drawingsOrder"), m.push(g);
+    let l = be.deepClone(g);
+    l = l.slice(3), l.unshift("drawingsOrder"), m.push(l);
     const f = {
       id: ne.id,
       params: {
@@ -1223,9 +1223,9 @@ const yn = {
     const n = i.get(Ue);
     if (!e) return !1;
     const t = [];
-    e.forEach(({ parent: l, children: m }) => {
-      t.push(l.unitId), m.forEach((g) => {
-        t.push(g.unitId);
+    e.forEach(({ parent: g, children: m }) => {
+      t.push(g.unitId), m.forEach((l) => {
+        t.push(l.unitId);
       });
     });
     const r = n.getUngroupDrawingOp(e), { unitId: o, subUnitId: s, undo: a, redo: d, objects: c } = r;
@@ -1238,8 +1238,8 @@ var Yi = Object.getOwnPropertyDescriptor, Zi = (i, e, n, t) => {
   return r;
 }, me = (i, e) => (n, t) => e(n, t, i);
 let cn = class extends Ge {
-  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();
+  constructor(i, e, n, t, r, o, s, a, d, c, 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 = a, this._messageService = d, this._localeService = c, this._docSelectionRenderService = g, this._docRefreshDrawingsService = m, this._fileOpenerService = l, this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener(), this._transformDrawingListener(), this._editAreaChangeListener();
   }
   async insertDocImage() {
     const i = await this._fileOpenerService.openFile({
@@ -1281,14 +1281,14 @@ let cn = class extends Ge {
     for (const r of e) {
       if (r == null)
         continue;
-      const { imageId: o, imageSourceType: s, source: a, base64Cache: d } = r, { width: c, height: l, image: m } = await ni(d || "");
+      const { imageId: o, imageSourceType: s, source: a, base64Cache: d } = r, { width: c, height: g, image: m } = await ni(d || "");
       this._imageIoService.addImageSourceCache(o, s, m);
-      let g = 1;
-      if (c > An || l > xn) {
-        const w = An / c, I = xn / l;
-        g = Math.min(w, I);
+      let l = 1;
+      if (c > An || g > xn) {
+        const w = An / c, I = xn / g;
+        l = Math.min(w, I);
       }
-      const f = this._getImagePosition(c * g, l * g);
+      const f = this._getImagePosition(c * l, g * l);
       if (f == null)
         return;
       const u = {
@@ -1404,10 +1404,10 @@ let cn = class extends Ge {
     if (((s = n == null ? void 0 : n.customBlocks) != null ? s : []).some((c) => c.blockId === i))
       return "";
     for (const c of Object.keys(t))
-      if ((a = t[c].body.customBlocks) != null && a.some((l) => l.blockId === i))
+      if ((a = t[c].body.customBlocks) != null && a.some((g) => g.blockId === i))
         return c;
     for (const c of Object.keys(r))
-      if ((d = r[c].body.customBlocks) != null && d.some((l) => l.blockId === i))
+      if ((d = r[c].body.customBlocks) != null && d.some((g) => g.blockId === i))
         return c;
     return "";
   }
@@ -1419,18 +1419,18 @@ let cn = class extends Ge {
       return;
     const r = i.getSnapshot(), { drawings: o = {} } = r, s = t.getEditArea() === We.BODY;
     for (const d of Object.keys(o)) {
-      const c = o[d], l = ti({ unitId: n, drawingId: c.drawingId, subUnitId: n }), m = e.fuzzyMathObjects(l, !0);
+      const c = o[d], g = ti({ unitId: n, drawingId: c.drawingId, subUnitId: n }), m = e.fuzzyMathObjects(g, !0);
       if (m.length)
-        for (const g of m) {
-          e.detachTransformerFrom(g);
+        for (const l of m) {
+          e.detachTransformerFrom(l);
           try {
-            g.setOpacity(0.5);
+            l.setOpacity(0.5);
           } catch {
           }
           if (s && c.isMultiTransform !== se.TRUE || !s && c.isMultiTransform === se.TRUE) {
-            c.allowTransform !== !1 && e.attachTransformerTo(g);
+            c.allowTransform !== !1 && e.attachTransformerTo(l);
             try {
-              g.setOpacity(1);
+              l.setOpacity(1);
             } catch {
             }
           }
@@ -1494,12 +1494,12 @@ const Dt = {
     const n = i.get($), t = i.get(Ue), r = i.get(q), o = i.get(J), { direction: s } = e, a = t.getFocusDrawings();
     if (a.length === 0)
       return !1;
-    const d = a[0].unitId, c = o.getRenderById(d), l = c == null ? void 0 : c.scene;
-    if (l == null)
+    const d = a[0].unitId, c = o.getRenderById(d), g = c == null ? void 0 : c.scene;
+    if (g == null)
       return !1;
-    const m = l.getTransformerByCreate(), g = r.getUniverDocInstance(d), f = a.map((v) => {
+    const m = g.getTransformerByCreate(), l = r.getUniverDocInstance(d), f = a.map((v) => {
       var P, N, B, E, _;
-      const { drawingId: w } = v, I = (P = g == null ? void 0 : g.getSnapshot().drawings) == null ? void 0 : P[w];
+      const { drawingId: w } = v, I = (P = l == null ? void 0 : l.getSnapshot().drawings) == null ? void 0 : P[w];
       if (I == null || I.layoutType === W.INLINE)
         return null;
       const { positionH: O, positionV: C } = I.docTransform, T = { ...O }, b = { ...C };
@@ -1572,10 +1572,10 @@ const Dt = {
   const e = ve($), n = ve(un), t = ve(_e), r = ve(J), o = ve(q), { drawings: s } = i, a = s[0];
   if (a == null)
     return;
-  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)
+  const { unitId: d } = a, c = o.getUniverDocInstance(d), g = c == null ? void 0 : c.getSnapshot().documentStyle.documentFlavor, m = r.getRenderById(d), l = m == null ? void 0 : m.scene;
+  if (l == null)
     return;
-  const f = g.getTransformerByCreate(), u = [{
+  const f = l.getTransformerByCreate(), u = [{
     label: n.t("image-position.column"),
     value: String(ee.COLUMN)
   }, {
@@ -1587,15 +1587,15 @@ const Dt = {
   }], v = [{
     label: n.t("image-position.line"),
     value: String(H.LINE),
-    disabled: l === wn.MODERN
+    disabled: g === wn.MODERN
   }, {
     label: n.t("image-position.page"),
     value: String(H.PAGE),
-    disabled: l === wn.MODERN
+    disabled: g === wn.MODERN
   }, {
     label: n.t("image-position.margin"),
     value: String(H.MARGIN),
-    disabled: l === wn.MODERN
+    disabled: g === wn.MODERN
   }, {
     label: n.t("image-position.paragraph"),
     value: String(H.PARAGRAPH)
@@ -1803,10 +1803,10 @@ const Dt = {
   const e = ve($), n = ve(un), t = ve(_e), r = ve(J), o = ve(q), { drawings: s } = i, a = s[0];
   if (a == null)
     return null;
-  const { unitId: d } = a, c = o.getUniverDocInstance(d), l = r.getRenderById(d);
-  if ((l == null ? void 0 : l.scene) == null)
+  const { unitId: d } = a, c = o.getUniverDocInstance(d), g = r.getRenderById(d);
+  if ((g == null ? void 0 : g.scene) == null)
     return null;
-  const [g, f] = oe(!0), [u, v] = oe(!0), [w, I] = oe(!0), [O, C] = oe(ue.INLINE), [T, b] = oe(""), [P, N] = oe({
+  const [l, f] = oe(!0), [u, v] = oe(!0), [w, I] = oe(!0), [O, C] = oe(ue.INLINE), [T, b] = oe(""), [P, N] = oe({
     distT: 0,
     distL: 0,
     distB: 0,
@@ -1933,7 +1933,7 @@ const Dt = {
       /* @__PURE__ */ p(Me, { value: ue.IN_FRONT_OF_TEXT, children: n.t("image-text-wrap.inFrontText") })
     ] }) }) }),
     /* @__PURE__ */ p("div", { className: h.imageCommonPanelRow, children: /* @__PURE__ */ p("div", { className: j(h.imageCommonPanelColumn, h.imageCommonPanelSubtitle), children: /* @__PURE__ */ p("div", { children: n.t("image-text-wrap.wrapText") }) }) }),
-    /* @__PURE__ */ p("div", { className: j(h.imageCommonPanelRow), children: /* @__PURE__ */ p("div", { className: j(h.imageCommonPanelColumn), children: /* @__PURE__ */ K($n, { disabled: g, value: T, onChange: L, direction: "horizontal", children: [
+    /* @__PURE__ */ p("div", { className: j(h.imageCommonPanelRow), children: /* @__PURE__ */ p("div", { className: j(h.imageCommonPanelColumn), children: /* @__PURE__ */ K($n, { disabled: l, value: T, onChange: L, direction: "horizontal", children: [
       /* @__PURE__ */ p(Me, { value: Xe.BOTH_SIDES, children: n.t("image-text-wrap.bothSide") }),
       /* @__PURE__ */ p(Me, { value: Xe.LEFT, children: n.t("image-text-wrap.leftOnly") }),
       /* @__PURE__ */ p(Me, { value: Xe.RIGHT, children: n.t("image-text-wrap.rightOnly") })
@@ -2033,9 +2033,9 @@ const Dt = {
       var s;
       const o = e.getActiveTextRange();
       if (o) {
-        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: f, endIndex: u } = g;
+        const { segmentId: a, startOffset: d, endOffset: c } = o, g = n.getCurrentUniverDocInstance(), m = (s = g == null ? void 0 : g.getSelfOrHeaderFooterModel(a).getBody()) == null ? void 0 : s.tables;
+        if (m && m.length && m.some((l) => {
+          const { startIndex: f, endIndex: u } = l;
           return d >= f && d < u || c >= f && c < u;
         })) {
           t.next(!0);
@@ -2197,14 +2197,14 @@ var Dr = Object.getOwnPropertyDescriptor, Cr = (i, e, n, t) => {
   return r;
 }, Fe = (i, e) => (n, t) => e(n, t, i);
 function In(i, e) {
-  const { top: n, left: t, width: r, height: o, angle: s, opacity: a } = i, d = e.scene, c = d.getViewport(it.VIEW_MAIN), { viewportScrollX: l, viewportScrollY: m } = c, { scaleX: g, scaleY: f } = d.getAncestorScale();
+  const { top: n, left: t, width: r, height: o, angle: s, opacity: a } = i, d = e.scene, c = d.getViewport(it.VIEW_MAIN), { viewportScrollX: g, viewportScrollY: m } = c, { scaleX: l, scaleY: f } = d.getAncestorScale();
   return {
-    startX: (t - l) * g,
+    startX: (t - g) * l,
     startY: (n - m) * f,
-    endX: (t + r - l) * g,
+    endX: (t + r - g) * l,
     endY: (n + o - m) * f,
-    width: r,
-    height: o,
+    width: r * l,
+    height: o * f,
     rotate: s,
     absolute: {
       left: !1,
@@ -2262,7 +2262,7 @@ let ln = class extends Ge {
       if (!(a == null || a.length === 0))
         for (const d of a) {
           this._addHoverForRect(d);
-          const c = new Ht(), l = In(d, o.renderUnit), m = new ot(l), g = o.canvas, f = s.data, u = {
+          const c = new Ht(), g = In(d, o.renderUnit), m = new ot(g), l = o.canvas, f = s.data, u = {
             dispose: c,
             rect: d,
             position$: m,
@@ -2273,16 +2273,16 @@ let ln = class extends Ge {
             id: s.drawingId,
             componentKey: s.componentKey,
             onPointerDown: (w) => {
-              g.dispatchEvent(new PointerEvent(w.type, w));
+              l.dispatchEvent(new PointerEvent(w.type, w));
             },
             onPointerMove: (w) => {
-              g.dispatchEvent(new PointerEvent(w.type, w));
+              l.dispatchEvent(new PointerEvent(w.type, w));
             },
             onPointerUp: (w) => {
-              g.dispatchEvent(new PointerEvent(w.type, w));
+              l.dispatchEvent(new PointerEvent(w.type, w));
             },
             onWheel: (w) => {
-              g.dispatchEvent(new WheelEvent(w.type, w));
+              l.dispatchEvent(new WheelEvent(w.type, w));
             },
             data: f,
             unitId: t
@@ -2362,7 +2362,7 @@ let ln = class extends Ge {
     if (!r) return !1;
     const a = (v = r.renderUnit.with(te).getSkeleton().getSkeletonData()) == null ? void 0 : v.pages[0];
     if (!a) return !1;
-    const { pageWidth: d, marginLeft: c, marginRight: l } = a, m = d - c - l, g = {
+    const { pageWidth: d, marginLeft: c, marginRight: g } = a, m = d - c - g, l = {
       size: {
         width: (w = n.width) != null ? w : m,
         height: n.height
@@ -2387,9 +2387,9 @@ let ln = class extends Ge {
           ...e,
           title: "",
           description: "",
-          docTransform: g,
+          docTransform: l,
           layoutType: W.INLINE,
-          transform: tt(g)
+          transform: tt(l)
         }
       ]
     };
@@ -2459,22 +2459,22 @@ let gn = class extends Vt {
           const d = a.oKey, c = this._drawingManagerService.getDrawingOKey(d);
           if (!c || c.drawingType === rn.DRAWING_DOM)
             return;
-          const { unitId: l, subUnitId: m, drawingId: g, drawingType: f } = c, u = this._canvasPopManagerService.attachPopupToObject(
+          const { unitId: g, subUnitId: m, drawingId: l, drawingType: f } = c, u = this._canvasPopManagerService.attachPopupToObject(
             a,
             {
               componentKey: ai,
               direction: "horizontal",
               offset: [2, 0],
               extraProps: {
-                menuItems: this._getImageMenuItems(l, m, g, f)
+                menuItems: this._getImageMenuItems(g, m, l, f)
               }
             },
-            l
+            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,
+          r.push(this.disposeWithMe(u)), !this._drawingManagerService.getFocusDrawings().find((I) => I.unitId === g && I.subUnitId === m && I.drawingId === l) && this._drawingManagerService.focusDrawing([{
+            unitId: g,
             subUnitId: m,
-            drawingId: g
+            drawingId: l
           }]);
         })
       )
@@ -2598,12 +2598,12 @@ let Sn = class extends Ge {
     const n = e == null ? void 0 : e.getSkeletonData(), { mainComponent: t, unitId: r } = this._context, o = t;
     if (!n)
       return;
-    const { left: s, top: a, pageLayoutType: d, pageMarginLeft: c, pageMarginTop: l } = o, { pages: m, skeHeaders: g, skeFooters: f } = n, u = {};
+    const { left: s, top: a, pageLayoutType: d, pageMarginLeft: c, pageMarginTop: g } = o, { pages: m, skeHeaders: l, skeFooters: f } = n, u = {};
     this._liquid.reset();
     for (let T = 0, b = m.length; T < b; T++) {
       const P = m[T], { headerId: N, footerId: B, pageWidth: E } = P;
       if (N) {
-        const _ = (O = g.get(N)) == null ? void 0 : O.get(E);
+        const _ = (O = l.get(N)) == null ? void 0 : O.get(E);
         _ && this._calculateDrawingPosition(
           r,
           _,
@@ -2626,7 +2626,7 @@ let Sn = class extends Ge {
           P.marginLeft
         );
       }
-      this._calculateDrawingPosition(r, P, s, a, u, P.marginTop, P.marginLeft), this._liquid.translatePage(P, d, c, l);
+      this._calculateDrawingPosition(r, P, s, a, u, P.marginTop, P.marginLeft), this._liquid.translatePage(P, d, c, g);
     }
     const v = Object.values(u), w = v.filter((T) => !T.isMultiTransform), I = v.filter((T) => T.isMultiTransform);
     w.length > 0 && this._drawingManagerService.refreshTransform(w), this._handleMultiDrawingsTransform(I);
@@ -2650,11 +2650,11 @@ let Sn = class extends Ge {
       marginTop: s,
       marginLeft: a
     }), d.forEach((c) => {
-      const { aLeft: l, aTop: m, height: g, width: f, angle: u, drawingId: v, drawingOrigin: w } = c, I = w.layoutType === W.WRAP_NONE && w.behindDoc === se.TRUE, { isMultiTransform: O = se.FALSE } = w, C = {
-        left: l + t + this._liquid.x,
+      const { aLeft: g, aTop: m, height: l, width: f, angle: u, drawingId: v, drawingOrigin: w } = c, I = w.layoutType === W.WRAP_NONE && w.behindDoc === se.TRUE, { isMultiTransform: O = se.FALSE } = w, C = {
+        left: g + t + this._liquid.x,
         top: m + r + this._liquid.y,
         width: f,
-        height: g,
+        height: l,
         angle: u
       };
       o[v] == null ? o[v] = {