@univerjs/sheets-drawing-ui 0.9.1 → 0.9.2

package/lib/es/facade.js

@@ -1,83 +1,83 @@
-var V = Object.defineProperty;
-var X = (i, e, t) => e in i ? V(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var x = (i, e, t) => X(i, typeof e != "symbol" ? e + "" : e, t);
-import { Inject as j, Injector as P, ICommandService as W, ImageSourceType as f, ArrangeTypeEnum as w, DrawingTypeEnum as S, generateRandomId as Y, toDisposable as D, CanceledError as v, UniverInstanceType as q, IUniverInstanceService as J } from "@univerjs/core";
-import { FBase as Q, FEnum as M, FEventName as H, FUniver as z } from "@univerjs/core/facade";
-import { getImageSize as Z, IDrawingManagerService as I, SetDrawingSelectedOperation as F } from "@univerjs/drawing";
-import { IRenderManagerService as T, getCurrentTypeOfRenderer as ee } from "@univerjs/engine-render";
-import { RemoveSheetDrawingCommand as p, SetSheetDrawingCommand as h, SetDrawingArrangeCommand as _, SheetCanvasFloatDomManagerService as R, InsertSheetDrawingCommand as b, SheetDrawingUpdateController as te } from "@univerjs/sheets-drawing-ui";
-import { SheetSkeletonManagerService as A, ISheetSelectionRenderService as ie, convertPositionSheetOverGridToAbsolute as re, convertPositionCellToSheetOverGrid as ne } from "@univerjs/sheets-ui";
-import { ISheetDrawingService as l, SheetDrawingAnchorType as se } from "@univerjs/sheets-drawing";
-import { transformComponentKey as G } from "@univerjs/sheets-ui/facade";
-import { FWorksheet as N, FRange as $ } from "@univerjs/sheets/facade";
-import { ComponentManager as B } from "@univerjs/ui";
-var oe = Object.getOwnPropertyDescriptor, K = (i, e, t, r) => {
-  for (var n = r > 1 ? void 0 : r ? oe(e, t) : e, s = i.length - 1, o; s >= 0; s--)
-    (o = i[s]) && (n = o(n) || n);
-  return n;
-}, U = (i, e) => (t, r) => e(t, r, i);
-function ae(i, e) {
-  const { from: t, to: r, flipY: n = !1, flipX: s = !1, angle: o = 0, skewX: d = 0, skewY: a = 0 } = i.sheetTransform, { column: g, columnOffset: c, row: u, rowOffset: O } = t, E = re(
-    i.unitId,
-    i.subUnitId,
-    { from: t, to: r },
-    e
-  ), { width: C, height: y } = E;
+var q = Object.defineProperty;
+var J = (o, r, t) => r in o ? q(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
+var P = (o, r, t) => J(o, typeof r != "symbol" ? r + "" : r, t);
+import { Inject as H, Injector as K, ICommandService as N, ImageSourceType as E, ArrangeTypeEnum as C, DrawingTypeEnum as I, generateRandomId as Q, toDisposable as T, CanceledError as S, UniverInstanceType as Z, IUniverInstanceService as ee } from "@univerjs/core";
+import { FBase as te, FEnum as z, FEventName as X, FUniver as Y } from "@univerjs/core/facade";
+import { getImageSize as re, IDrawingManagerService as p, SetDrawingSelectedOperation as W } from "@univerjs/drawing";
+import { IRenderManagerService as y, getCurrentTypeOfRenderer as ie } from "@univerjs/engine-render";
+import { RemoveSheetDrawingCommand as k, SetSheetDrawingCommand as f, SetDrawingArrangeCommand as R, SheetCanvasFloatDomManagerService as D, transformToDrawingPosition as j, InsertSheetDrawingCommand as b, SheetDrawingUpdateController as ne } from "@univerjs/sheets-drawing-ui";
+import { SheetSkeletonManagerService as M, ISheetSelectionRenderService as A, convertPositionSheetOverGridToAbsolute as oe, convertPositionCellToSheetOverGrid as se } from "@univerjs/sheets-ui";
+import { ISheetDrawingService as w, SheetDrawingAnchorType as ae } from "@univerjs/sheets-drawing";
+import { transformComponentKey as U } from "@univerjs/sheets-ui/facade";
+import { FWorksheet as $, FRange as L } from "@univerjs/sheets/facade";
+import { ComponentManager as G } from "@univerjs/ui";
+var de = Object.getOwnPropertyDescriptor, V = (o, r, t, e) => {
+  for (var i = e > 1 ? void 0 : e ? de(r, t) : r, n = o.length - 1, s; n >= 0; n--)
+    (s = o[n]) && (i = s(i) || i);
+  return i;
+}, x = (o, r) => (t, e) => r(t, e, o);
+function ce(o, r) {
+  const { from: t, to: e, flipY: i = !1, flipX: n = !1, angle: s = 0, skewX: a = 0, skewY: d = 0 } = o.sheetTransform, { column: g, columnOffset: c, row: m, rowOffset: l } = t, _ = oe(
+    o.unitId,
+    o.subUnitId,
+    { from: t, to: e },
+    r
+  ), { width: h, height: u } = _;
   return {
-    ...i,
+    ...o,
     column: g,
     columnOffset: c,
-    row: u,
-    rowOffset: O,
-    width: C,
-    height: y,
-    flipY: n,
-    flipX: s,
-    angle: o,
-    skewX: d,
-    skewY: a
+    row: m,
+    rowOffset: l,
+    width: h,
+    height: u,
+    flipY: i,
+    flipX: n,
+    angle: s,
+    skewX: a,
+    skewY: d
   };
 }
-function de(i, e, t) {
-  const { column: r, columnOffset: n, row: s, rowOffset: o, flipY: d = !1, flipX: a = !1, angle: g = 0, skewX: c = 0, skewY: u = 0, width: O, height: E } = i, C = ne(
-    i.unitId,
-    i.subUnitId,
-    { column: r, columnOffset: n, row: s, rowOffset: o },
-    O,
-    E,
-    e,
+function ge(o, r, t) {
+  const { column: e, columnOffset: i, row: n, rowOffset: s, flipY: a = !1, flipX: d = !1, angle: g = 0, skewX: c = 0, skewY: m = 0, width: l, height: _ } = o, h = se(
+    o.unitId,
+    o.subUnitId,
+    { column: e, columnOffset: i, row: n, rowOffset: s },
+    l,
+    _,
+    r,
     t
-  ), { sheetTransform: y, transform: L } = C;
+  ), { sheetTransform: u, transform: B } = h;
   return {
-    ...i,
+    ...o,
     sheetTransform: {
-      ...y,
-      flipY: d,
-      flipX: a,
+      ...u,
+      flipY: a,
+      flipX: d,
       angle: g,
       skewX: c,
-      skewY: u
+      skewY: m
     },
     transform: {
-      ...L,
-      flipY: d,
-      flipX: a,
+      ...B,
+      flipY: a,
+      flipX: d,
       angle: g,
       skewX: c,
-      skewY: u
+      skewY: m
     }
   };
 }
-let k = class {
-  constructor(i, e, t) {
-    x(this, "_image");
+let F = class {
+  constructor(o, r, t) {
+    P(this, "_image");
     this._injector = t, this._image = {
-      drawingId: Y(6),
-      drawingType: S.DRAWING_IMAGE,
-      imageSourceType: f.BASE64,
+      drawingId: Q(6),
+      drawingType: I.DRAWING_IMAGE,
+      imageSourceType: E.BASE64,
       source: "",
-      unitId: i,
-      subUnitId: e,
+      unitId: o,
+      subUnitId: r,
       column: 0,
       columnOffset: 0,
       row: 0,
@@ -111,12 +111,12 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setImage(i) {
-    const t = this._injector.get(T).getRenderById(i.unitId);
+  setImage(o) {
+    const t = this._injector.get(y).getRenderById(o.unitId);
     if (!t)
-      throw new Error(`Render Unit with unitId ${i.unitId} not found`);
-    const r = t.with(A);
-    return i.sheetTransform == null && (i.sheetTransform = {
+      throw new Error(`Render Unit with unitId ${o.unitId} not found`);
+    const e = t.with(M);
+    return o.sheetTransform == null && (o.sheetTransform = {
       from: {
         column: 0,
         columnOffset: 0,
@@ -129,11 +129,11 @@ let k = class {
         row: 0,
         rowOffset: 0
       }
-    }), this._image = ae(i, r), this;
+    }), this._image = ce(o, e), this;
   }
-  setSource(i, e) {
-    const t = e != null ? e : f.URL;
-    return this._image.source = i, this._image.imageSourceType = t, this;
+  setSource(o, r) {
+    const t = r != null ? r : E.URL;
+    return this._image.source = o, this._image.imageSourceType = t, this;
   }
   /**
    * Get the source of the image
@@ -185,8 +185,8 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setColumn(i) {
-    return this._image.column = i, this;
+  setColumn(o) {
+    return this._image.column = o, this;
   }
   /**
    * Set the vertical position of the image
@@ -206,8 +206,8 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setRow(i) {
-    return this._image.row = i, this;
+  setRow(o) {
+    return this._image.row = o, this;
   }
   /**
    * Set the horizontal offset of the image
@@ -228,8 +228,8 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setColumnOffset(i) {
-    return this._image.columnOffset = i, this;
+  setColumnOffset(o) {
+    return this._image.columnOffset = o, this;
   }
   /**
    * Set the vertical offset of the image
@@ -250,8 +250,8 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setRowOffset(i) {
-    return this._image.rowOffset = i, this;
+  setRowOffset(o) {
+    return this._image.rowOffset = o, this;
   }
   /**
    * Set the width of the image
@@ -273,8 +273,8 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setWidth(i) {
-    return this._image.width = i, this;
+  setWidth(o) {
+    return this._image.width = o, this;
   }
   /**
    * Set the height of the image
@@ -296,8 +296,8 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setHeight(i) {
-    return this._image.height = i, this;
+  setHeight(o) {
+    return this._image.height = o, this;
   }
   /**
    * Set the anchor type of the image, whether the position and size change with the cell
@@ -345,8 +345,8 @@ let k = class {
    * }, 2000);
    * ```
    */
-  setAnchorType(i) {
-    return this._image.anchorType = i, this;
+  setAnchorType(o) {
+    return this._image.anchorType = o, this;
   }
   /**
    * Set the cropping region of the image by defining the top edges, thereby displaying the specific part of the image you want.
@@ -367,8 +367,8 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setCropTop(i) {
-    return this._initializeSrcRect(), this._image.srcRect.top = i, this;
+  setCropTop(o) {
+    return this._initializeSrcRect(), this._image.srcRect.top = o, this;
   }
   /**
    * Set the cropping region of the image by defining the left edges, thereby displaying the specific part of the image you want.
@@ -389,8 +389,8 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setCropLeft(i) {
-    return this._initializeSrcRect(), this._image.srcRect.left = i, this;
+  setCropLeft(o) {
+    return this._initializeSrcRect(), this._image.srcRect.left = o, this;
   }
   /**
    * Set the cropping region of the image by defining the bottom edges, thereby displaying the specific part of the image you want.
@@ -411,8 +411,8 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setCropBottom(i) {
-    return this._initializeSrcRect(), this._image.srcRect.bottom = i, this;
+  setCropBottom(o) {
+    return this._initializeSrcRect(), this._image.srcRect.bottom = o, this;
   }
   /**
    * Set the cropping region of the image by defining the right edges, thereby displaying the specific part of the image you want.
@@ -433,8 +433,8 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setCropRight(i) {
-    return this._initializeSrcRect(), this._image.srcRect.right = i, this;
+  setCropRight(o) {
+    return this._initializeSrcRect(), this._image.srcRect.right = o, this;
   }
   _initializeSrcRect() {
     this._image.srcRect == null && (this._image.srcRect = {
@@ -463,33 +463,33 @@ let k = class {
    * fWorksheet.insertImages([image]);
    * ```
    */
-  setRotate(i) {
-    return this._image.angle = i, this;
+  setRotate(o) {
+    return this._image.angle = o, this;
   }
-  setUnitId(i) {
-    return this._image.unitId = i, this;
+  setUnitId(o) {
+    return this._image.unitId = o, this;
   }
-  setSubUnitId(i) {
-    return this._image.subUnitId = i, this;
+  setSubUnitId(o) {
+    return this._image.subUnitId = o, this;
   }
   async buildAsync() {
-    const e = this._injector.get(T).getRenderById(this._image.unitId);
-    if (!e)
+    const r = this._injector.get(y).getRenderById(this._image.unitId);
+    if (!r)
       throw new Error(`Render Unit with unitId ${this._image.unitId} not found`);
-    const t = e.with(ie), r = e.with(A);
+    const t = r.with(A), e = r.with(M);
     if (this._image.width === 0 || this._image.height === 0) {
-      const n = await Z(this._image.source), s = n.width, o = n.height;
-      this._image.width === 0 && (this._image.width = s), this._image.height === 0 && (this._image.height = o);
+      const i = await re(this._image.source), n = i.width, s = i.height;
+      this._image.width === 0 && (this._image.width = n), this._image.height === 0 && (this._image.height = s);
     }
-    return de(this._image, t, r);
+    return ge(this._image, t, e);
   }
 };
-k = K([
-  U(2, j(P))
-], k);
-let m = class extends Q {
-  constructor(i, e, t) {
-    super(), this._image = i, this._commandService = e, this._injector = t;
+F = V([
+  x(2, H(K))
+], F);
+let v = class extends te {
+  constructor(o, r, t) {
+    super(), this._image = o, this._commandService = r, this._injector = t;
   }
   /**
    * Get the id of the image
@@ -536,7 +536,7 @@ let m = class extends Q {
    * ```
    */
   remove() {
-    return this._commandService.syncExecuteCommand(p.id, { unitId: this._image.unitId, drawings: [this._image] });
+    return this._commandService.syncExecuteCommand(k.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
   /**
    * Convert the image to a FOverGridImageBuilder
@@ -552,18 +552,18 @@ let m = class extends Q {
    * ```
    */
   toBuilder() {
-    const i = this._injector.createInstance(k);
-    return i.setImage(this._image), i;
+    const o = this._injector.createInstance(F);
+    return o.setImage(this._image), o;
   }
-  setSource(i, e) {
-    const t = e != null ? e : f.URL;
-    return this._image.source = i, this._image.imageSourceType = t, this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+  setSource(o, r) {
+    const t = r != null ? r : E.URL;
+    return this._image.source = o, this._image.imageSourceType = t, this._commandService.syncExecuteCommand(f.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
-  async setPositionAsync(i, e, t, r) {
-    const n = this.toBuilder();
-    n.setColumn(e), n.setRow(i), t != null && n.setRowOffset(t), r != null && n.setColumnOffset(r);
-    const s = await n.buildAsync();
-    return this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [s] });
+  async setPositionAsync(o, r, t, e) {
+    const i = this.toBuilder();
+    i.setColumn(r), i.setRow(o), t != null && i.setRowOffset(t), e != null && i.setColumnOffset(e);
+    const n = await i.buildAsync();
+    return this._commandService.syncExecuteCommand(f.id, { unitId: this._image.unitId, drawings: [n] });
   }
   /**
    * Set the size of the image
@@ -580,11 +580,11 @@ let m = class extends Q {
    * console.log(result);
    * ```
    */
-  async setSizeAsync(i, e) {
+  async setSizeAsync(o, r) {
     const t = this.toBuilder();
-    t.setWidth(i), t.setHeight(e);
-    const r = await t.buildAsync();
-    return this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [r] });
+    t.setWidth(o), t.setHeight(r);
+    const e = await t.buildAsync();
+    return this._commandService.syncExecuteCommand(f.id, { unitId: this._image.unitId, drawings: [e] });
   }
   /**
    * Set the cropping region of the image by defining the top, bottom, left, and right edges, thereby displaying the specific part of the image you want.
@@ -603,13 +603,13 @@ let m = class extends Q {
    * console.log(result);
    * ```
    */
-  setCrop(i, e, t, r) {
+  setCrop(o, r, t, e) {
     return this._image.srcRect == null && (this._image.srcRect = {
       top: 0,
       left: 0,
       bottom: 0,
       right: 0
-    }), i != null && (this._image.srcRect.top = i), e != null && (this._image.srcRect.left = e), t != null && (this._image.srcRect.bottom = t), r != null && (this._image.srcRect.right = r), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+    }), o != null && (this._image.srcRect.top = o), r != null && (this._image.srcRect.left = r), t != null && (this._image.srcRect.bottom = t), e != null && (this._image.srcRect.right = e), this._commandService.syncExecuteCommand(f.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
   /**
    * Set the rotation angle of the image
@@ -625,8 +625,8 @@ let m = class extends Q {
    * console.log(result);
    * ```
    */
-  setRotate(i) {
-    return this._image.sheetTransform.angle = i, this._image.transform && (this._image.transform.angle = i), this._commandService.syncExecuteCommand(h.id, { unitId: this._image.unitId, drawings: [this._image] });
+  setRotate(o) {
+    return this._image.sheetTransform.angle = o, this._image.transform && (this._image.transform.angle = o), this._commandService.syncExecuteCommand(f.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
   /**
    * Move the image layer forward by one level
@@ -641,11 +641,11 @@ let m = class extends Q {
    * ```
    */
   setForward() {
-    return this._commandService.syncExecuteCommand(_.id, {
+    return this._commandService.syncExecuteCommand(R.id, {
       unitId: this._image.unitId,
       subUnitId: this._image.subUnitId,
       drawingIds: [this._image.drawingId],
-      arrangeType: w.forward
+      arrangeType: C.forward
     });
   }
   /**
@@ -661,11 +661,11 @@ let m = class extends Q {
    * ```
    */
   setBackward() {
-    return this._commandService.syncExecuteCommand(_.id, {
+    return this._commandService.syncExecuteCommand(R.id, {
       unitId: this._image.unitId,
       subUnitId: this._image.subUnitId,
       drawingIds: [this._image.drawingId],
-      arrangeType: w.backward
+      arrangeType: C.backward
     });
   }
   /**
@@ -681,11 +681,11 @@ let m = class extends Q {
    * ```
    */
   setBack() {
-    return this._commandService.syncExecuteCommand(_.id, {
+    return this._commandService.syncExecuteCommand(R.id, {
       unitId: this._image.unitId,
       subUnitId: this._image.subUnitId,
       drawingIds: [this._image.drawingId],
-      arrangeType: w.back
+      arrangeType: C.back
     });
   }
   /**
@@ -701,140 +701,299 @@ let m = class extends Q {
    * ```
    */
   setFront() {
-    return this._commandService.syncExecuteCommand(_.id, {
+    return this._commandService.syncExecuteCommand(R.id, {
       unitId: this._image.unitId,
       subUnitId: this._image.subUnitId,
       drawingIds: [this._image.drawingId],
-      arrangeType: w.front
+      arrangeType: C.front
     });
   }
 };
-m = K([
-  U(1, W),
-  U(2, j(P))
-], m);
-class ce extends N {
-  addFloatDomToPosition(e, t) {
-    const r = this._workbook.getUnitId(), n = this._worksheet.getSheetId(), { key: s, disposableCollection: o } = G(e, this._injector.get(B)), a = this._injector.get(R).addFloatDomToPosition({ ...e, componentKey: s, unitId: r, subUnitId: n }, t);
-    return a ? (o.add(a.dispose), {
-      id: a.id,
+v = V([
+  x(1, N),
+  x(2, H(K))
+], v);
+class me extends $ {
+  getFloatDomById(r) {
+    const e = this._injector.get(D).getFloatDomInfo(r);
+    if (!e) return null;
+    const { unitId: i, subUnitId: n } = e, { rect: s } = e, a = s.getState(), { left: d = 0, top: g = 0, width: c = 0, height: m = 0, flipX: l = !1, flipY: _ = !1, angle: h = 0, skewX: u = 0, skewY: B = 0 } = a, O = this._injector.get(w).getDrawingByParam({
+      drawingId: e.id,
+      unitId: i,
+      subUnitId: n
+    });
+    return O ? {
+      position: {
+        left: d,
+        top: g,
+        width: c,
+        height: m,
+        flipX: l,
+        flipY: _,
+        angle: h,
+        skewX: u,
+        skewY: B
+      },
+      componentKey: O.componentKey,
+      allowTransform: O.allowTransform,
+      data: O.data,
+      id: e.id
+    } : null;
+  }
+  getAllFloatDoms() {
+    const r = this._injector.get(D), t = this._workbook.getUnitId(), e = this._worksheet.getSheetId();
+    return Array.from(r.getFloatDomsBySubUnitId(t, e).values()).map((i) => {
+      const { rect: n } = i, s = this._injector.get(w).getDrawingByParam({
+        drawingId: i.id,
+        unitId: t,
+        subUnitId: e
+      }), { left: a, top: d, width: g, height: c, flipX: m, flipY: l, angle: _, skewX: h, skewY: u } = n.getState();
+      return {
+        position: {
+          left: a,
+          top: d,
+          width: g,
+          height: c,
+          flipX: m,
+          flipY: l,
+          angle: _,
+          skewX: h,
+          skewY: u
+        },
+        componentKey: s.componentKey,
+        allowTransform: s.allowTransform,
+        data: s.data,
+        id: i.id
+      };
+    });
+  }
+  updateFloatDom(r, t) {
+    var h, u;
+    const i = this._injector.get(D).getFloatDomInfo(r);
+    if (!i) return this;
+    const { unitId: n, subUnitId: s } = i, a = this._injector.get(w).getDrawingByParam({
+      unitId: n,
+      subUnitId: s,
+      drawingId: r
+    }), d = this._injector.get(y);
+    if (!d.getRenderById(n)) return this;
+    if (!this.getSkeleton()) return this;
+    const m = (h = d.getRenderById(this.getWorkbook().getUnitId())) == null ? void 0 : h.with(A);
+    if (!m) return this;
+    const l = {
+      ...a,
+      componentKey: t.componentKey || a.componentKey,
+      allowTransform: t.allowTransform !== void 0 ? t.allowTransform : a.allowTransform,
+      data: t.data || a.data,
+      sheetTransform: t.position && (u = j(
+        t.position,
+        m
+      )) != null ? u : a.sheetTransform,
+      transform: {
+        ...a.transform,
+        ...t.position
+        // Merge with existing transform
+      }
+    };
+    if (!this._commandService.syncExecuteCommand(f.id, { unitId: n, subUnitId: s, drawings: [l] }))
+      throw new Error("updateFloatDom failed");
+    return this;
+  }
+  batchUpdateFloatDoms(r) {
+    var s;
+    const t = this._injector.get(D), e = this._injector.get(w), i = this._injector.get(y), n = [];
+    for (const a of r) {
+      const d = t.getFloatDomInfo(a.id);
+      if (!d) continue;
+      const { unitId: g, subUnitId: c } = d, m = e.getDrawingByParam({
+        unitId: g,
+        subUnitId: c,
+        drawingId: a.id
+      });
+      if (!m) continue;
+      const l = i.getRenderById(g);
+      if (!l || !this.getSkeleton()) continue;
+      const h = l.with(A);
+      if (!h) return this;
+      const u = {
+        ...m,
+        componentKey: a.config.componentKey || m.componentKey,
+        allowTransform: a.config.allowTransform !== void 0 ? a.config.allowTransform : m.allowTransform,
+        data: a.config.data || m.data,
+        sheetTransform: a.config.position && (s = j(
+          a.config.position,
+          h
+        )) != null ? s : m.sheetTransform,
+        transform: {
+          ...m.transform,
+          ...a.config.position
+          // Merge with existing transform
+        }
+      };
+      n.push(u);
+    }
+    if (n.length > 0) {
+      const a = this._workbook.getUnitId(), d = this._worksheet.getSheetId();
+      if (!this._commandService.syncExecuteCommand(f.id, { unitId: a, subUnitId: d, drawings: n }))
+        throw new Error("batchUpdateFloatDoms failed");
+    }
+    return this;
+  }
+  removeFloatDom(r) {
+    const e = this._injector.get(D).getFloatDomInfo(r);
+    if (!e) return this;
+    const { unitId: i, subUnitId: n } = e, a = this._injector.get(w).getDrawingByParam({
+      unitId: i,
+      subUnitId: n,
+      drawingId: r
+    });
+    if (!a) return this;
+    if (!this._commandService.syncExecuteCommand(k.id, {
+      unitId: i,
+      drawings: [a]
+    }))
+      throw new Error("removeFloatDom failed");
+    return this;
+  }
+  addFloatDomToPosition(r, t) {
+    const e = this._workbook.getUnitId(), i = this._worksheet.getSheetId(), { key: n, disposableCollection: s } = U(r, this._injector.get(G)), d = this._injector.get(D).addFloatDomToPosition({ ...r, componentKey: n, unitId: e, subUnitId: i }, t);
+    return d ? (s.add(d.dispose), {
+      id: d.id,
       dispose: () => {
-        o.dispose(), a.dispose();
+        s.dispose(), d.dispose();
       }
-    }) : (o.dispose(), null);
+    }) : (s.dispose(), null);
   }
-  addFloatDomToRange(e, t, r, n) {
-    const s = this._workbook.getUnitId(), o = this._worksheet.getSheetId(), { key: d, disposableCollection: a } = G(t, this._injector.get(B)), c = this._injector.get(R).addFloatDomToRange(e.getRange(), { ...t, componentKey: d, unitId: s, subUnitId: o }, r, n);
-    return c ? (a.add(c.dispose), {
+  addFloatDomToRange(r, t, e, i) {
+    const n = this._workbook.getUnitId(), s = this._worksheet.getSheetId(), { key: a, disposableCollection: d } = U(t, this._injector.get(G)), c = this._injector.get(D).addFloatDomToRange(r.getRange(), { ...t, componentKey: a, unitId: n, subUnitId: s }, e, i);
+    return c ? (d.add(c.dispose), {
       id: c.id,
       dispose: () => {
-        a.dispose(), c.dispose();
+        d.dispose(), c.dispose();
       }
-    }) : (a.dispose(), null);
+    }) : (d.dispose(), null);
   }
-  addFloatDomToColumnHeader(e, t, r, n) {
-    const s = this._workbook.getUnitId(), o = this._worksheet.getSheetId(), { key: d, disposableCollection: a } = G(t, this._injector.get(B)), c = this._injector.get(R).addFloatDomToColumnHeader(e, { ...t, componentKey: d, unitId: s, subUnitId: o }, r, n);
-    return c ? (a.add(c.dispose), {
+  addFloatDomToColumnHeader(r, t, e, i) {
+    const n = this._workbook.getUnitId(), s = this._worksheet.getSheetId(), { key: a, disposableCollection: d } = U(t, this._injector.get(G)), c = this._injector.get(D).addFloatDomToColumnHeader(r, { ...t, componentKey: a, unitId: n, subUnitId: s }, e, i);
+    return c ? (d.add(c.dispose), {
       id: c.id,
       dispose: () => {
-        a.dispose(), c.dispose();
+        d.dispose(), c.dispose();
       }
-    }) : (a.dispose(), null);
+    }) : (d.dispose(), null);
   }
-  async insertImage(e, t, r, n, s) {
-    const o = this.newOverGridImage();
-    if (typeof e == "string")
-      o.setSource(e);
+  async insertImage(r, t, e, i, n) {
+    const s = this.newOverGridImage();
+    if (typeof r == "string")
+      s.setSource(r);
     else {
-      const g = await e.getBlob().getDataAsString();
-      o.setSource(g, f.BASE64);
+      const g = await r.getBlob().getDataAsString();
+      s.setSource(g, E.BASE64);
     }
-    t !== void 0 ? o.setColumn(t) : o.setColumn(0), r !== void 0 ? o.setRow(r) : o.setRow(0), n !== void 0 ? o.setColumnOffset(n) : o.setColumnOffset(0), s !== void 0 ? o.setRowOffset(s) : o.setRowOffset(0);
-    const d = await o.buildAsync();
-    return this._commandService.syncExecuteCommand(b.id, { unitId: this._fWorkbook.getId(), drawings: [d] });
+    t !== void 0 ? s.setColumn(t) : s.setColumn(0), e !== void 0 ? s.setRow(e) : s.setRow(0), i !== void 0 ? s.setColumnOffset(i) : s.setColumnOffset(0), n !== void 0 ? s.setRowOffset(n) : s.setRowOffset(0);
+    const a = await s.buildAsync();
+    return this._commandService.syncExecuteCommand(b.id, { unitId: this._fWorkbook.getId(), drawings: [a] });
   }
-  insertImages(e) {
-    const t = e.map((r) => (r.unitId = this._fWorkbook.getId(), r.subUnitId = this.getSheetId(), r));
+  insertImages(r) {
+    const t = r.map((e) => (e.unitId = this._fWorkbook.getId(), e.subUnitId = this.getSheetId(), e));
     return this._commandService.syncExecuteCommand(b.id, { unitId: this._fWorkbook.getId(), drawings: t }), this;
   }
-  deleteImages(e) {
-    const t = e.map((r) => ({
+  deleteImages(r) {
+    const t = r.map((e) => ({
       unitId: this._fWorkbook.getId(),
-      drawingId: r.getId(),
+      drawingId: e.getId(),
       subUnitId: this.getSheetId(),
-      drawingType: r.getType()
+      drawingType: e.getType()
     }));
-    return this._commandService.syncExecuteCommand(p.id, { unitId: this._fWorkbook.getId(), drawings: t }), this;
+    return this._commandService.syncExecuteCommand(k.id, { unitId: this._fWorkbook.getId(), drawings: t }), this;
   }
   getImages() {
-    const t = this._injector.get(l).getDrawingData(this._fWorkbook.getId(), this.getSheetId()), r = [];
-    for (const n in t) {
-      const s = t[n];
-      s.drawingType === S.DRAWING_IMAGE && r.push(this._injector.createInstance(m, s));
+    const t = this._injector.get(w).getDrawingData(this._fWorkbook.getId(), this.getSheetId()), e = [];
+    for (const i in t) {
+      const n = t[i];
+      n.drawingType === I.DRAWING_IMAGE && e.push(this._injector.createInstance(v, n));
     }
-    return r;
+    return e;
   }
-  getImageById(e) {
-    const r = this._injector.get(l).getDrawingByParam({ unitId: this._fWorkbook.getId(), subUnitId: this.getSheetId(), drawingId: e });
-    return r && r.drawingType === S.DRAWING_IMAGE ? this._injector.createInstance(m, r) : null;
+  getImageById(r) {
+    const e = this._injector.get(w).getDrawingByParam({ unitId: this._fWorkbook.getId(), subUnitId: this.getSheetId(), drawingId: r });
+    return e && e.drawingType === I.DRAWING_IMAGE ? this._injector.createInstance(v, e) : null;
   }
   getActiveImages() {
-    const t = this._injector.get(l).getFocusDrawings(), r = [];
-    for (const n in t) {
-      const s = t[n];
-      r.push(this._injector.createInstance(m, s));
+    const t = this._injector.get(w).getFocusDrawings(), e = [];
+    for (const i in t) {
+      const n = t[i];
+      e.push(this._injector.createInstance(v, n));
     }
-    return r;
+    return e;
   }
-  updateImages(e) {
-    return this._commandService.syncExecuteCommand(h.id, { unitId: this._fWorkbook.getId(), drawings: e }), this;
+  updateImages(r) {
+    return this._commandService.syncExecuteCommand(f.id, { unitId: this._fWorkbook.getId(), drawings: r }), this;
   }
-  onImageInserted(e) {
-    const t = this._injector.get(l);
-    return D(t.add$.subscribe((r) => {
-      const n = r.map(
-        (s) => this._injector.createInstance(m, t.getDrawingByParam(s))
+  onImageInserted(r) {
+    const t = this._injector.get(w);
+    return T(t.add$.subscribe((e) => {
+      const i = e.map(
+        (n) => this._injector.createInstance(v, t.getDrawingByParam(n))
       );
-      e(n);
+      r(i);
     }));
   }
-  onImageDeleted(e) {
-    const t = this._injector.get(l);
-    return D(t.remove$.subscribe((r) => {
-      const n = r.map(
-        (s) => this._injector.createInstance(m, t.getDrawingByParam(s))
+  onImageDeleted(r) {
+    const t = this._injector.get(w);
+    return T(t.remove$.subscribe((e) => {
+      const i = e.map(
+        (n) => this._injector.createInstance(v, t.getDrawingByParam(n))
       );
-      e(n);
+      r(i);
     }));
   }
-  onImageChanged(e) {
-    const t = this._injector.get(l);
-    return D(t.update$.subscribe((r) => {
-      const n = r.map(
-        (s) => this._injector.createInstance(m, t.getDrawingByParam(s))
+  onImageChanged(r) {
+    const t = this._injector.get(w);
+    return T(t.update$.subscribe((e) => {
+      const i = e.map(
+        (n) => this._injector.createInstance(v, t.getDrawingByParam(n))
       );
-      e(n);
+      r(i);
     }));
   }
   newOverGridImage() {
-    const e = this._fWorkbook.getId(), t = this.getSheetId();
-    return this._injector.createInstance(k, e, t);
+    const r = this._fWorkbook.getId(), t = this.getSheetId();
+    return this._injector.createInstance(F, r, t);
   }
 }
-N.extend(ce);
-class ge extends M {
+$.extend(me);
+class he extends z {
   get DrawingType() {
-    return S;
+    return I;
   }
   get ImageSourceType() {
-    return f;
+    return E;
   }
   get SheetDrawingAnchorType() {
-    return se;
+    return ae;
   }
 }
-M.extend(ge);
-class me extends H {
+z.extend(he);
+class le extends X {
+  get BeforeFloatDomAdd() {
+    return "BeforeFloatDomAdd";
+  }
+  get FloatDomAdded() {
+    return "FloatDomAdded";
+  }
+  get BeforeFloatDomUpdate() {
+    return "BeforeFloatDomUpdate";
+  }
+  get FloatDomUpdated() {
+    return "FloatDomUpdated";
+  }
+  get BeforeFloatDomDelete() {
+    return "BeforeFloatDomDelete";
+  }
+  get FloatDomDeleted() {
+    return "FloatDomDeleted";
+  }
   get BeforeOverGridImageChange() {
     return "BeforeOverGridImageChange";
   }
@@ -860,151 +1019,253 @@ class me extends H {
     return "OverGridImageSelected";
   }
 }
-H.extend(me);
-class he extends z {
+X.extend(le);
+class ue extends Y {
   /**
    * @ignore
    */
   // eslint-disable-next-line max-lines-per-function
-  _initialize(e) {
-    const t = e.get(W);
+  _initialize(r) {
+    const t = r.get(N);
     this.registerEventHandler(
+      this.Event.BeforeFloatDomAdd,
+      () => t.beforeCommandExecuted((e) => {
+        if (e.id !== b.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
+          return;
+        const { drawings: s } = i, a = s.filter(
+          (g) => g.drawingType === I.DRAWING_DOM
+        );
+        if (a.length === 0)
+          return;
+        const d = {
+          workbook: n,
+          drawings: a
+        };
+        if (this.fireEvent(this.Event.BeforeFloatDomAdd, d), d.cancel)
+          throw new S();
+      })
+    ), this.registerEventHandler(
+      this.Event.FloatDomAdded,
+      () => t.onCommandExecuted((e) => {
+        if (e.id !== b.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
+          return;
+        const { drawings: s } = i, a = s.filter(
+          (d) => d.drawingType === I.DRAWING_DOM
+        );
+        a.length !== 0 && this.fireEvent(this.Event.FloatDomAdded, {
+          workbook: n,
+          drawings: a
+        });
+      })
+    ), this.registerEventHandler(
       this.Event.BeforeOverGridImageInsert,
-      () => t.beforeCommandExecuted((r) => {
-        if (r.id !== b.id) return;
-        const n = r.params, s = this.getActiveWorkbook();
-        if (s == null || n == null)
+      () => t.beforeCommandExecuted((e) => {
+        if (e.id !== b.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
           return;
-        const { drawings: o } = n, d = {
-          workbook: s,
-          insertImageParams: o
+        const { drawings: s } = i, a = {
+          workbook: n,
+          insertImageParams: s
         };
-        if (this.fireEvent(this.Event.BeforeOverGridImageInsert, d), d.cancel)
-          throw new v();
+        if (this.fireEvent(this.Event.BeforeOverGridImageInsert, a), a.cancel)
+          throw new S();
       })
     ), this.registerEventHandler(
       this.Event.BeforeOverGridImageRemove,
-      () => t.beforeCommandExecuted((r) => {
-        if (r.id !== p.id) return;
-        const n = r.params, s = this.getActiveWorkbook();
-        if (s == null || n == null)
+      () => t.beforeCommandExecuted((e) => {
+        if (e.id !== k.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
           return;
-        const o = e.get(I), { drawings: d } = n, a = d.map((c) => o.getDrawingByParam(c)), g = {
-          workbook: s,
-          images: this._createFOverGridImage(a)
+        const s = r.get(p), { drawings: a } = i, d = a.map((c) => s.getDrawingByParam(c)), g = {
+          workbook: n,
+          images: this._createFOverGridImage(d)
         };
         if (this.fireEvent(this.Event.BeforeOverGridImageRemove, g), g.cancel)
-          throw new v();
+          throw new S();
       })
     ), this.registerEventHandler(
       this.Event.BeforeOverGridImageChange,
-      () => t.beforeCommandExecuted((r) => {
-        if (r.id !== h.id) return;
-        const n = r.params, s = this.getActiveWorkbook();
-        if (s == null || n == null)
+      () => t.beforeCommandExecuted((e) => {
+        if (e.id !== f.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
           return;
-        const { drawings: o } = n, d = e.get(I), a = [];
-        o.forEach((c) => {
-          const u = d.getDrawingByParam(c);
-          u != null && a.push({
+        const { drawings: s } = i, a = r.get(p), d = [];
+        s.forEach((c) => {
+          const m = a.getDrawingByParam(c);
+          m != null && d.push({
             changeParam: c,
-            image: this._injector.createInstance(m, u)
+            image: this._injector.createInstance(v, m)
           });
         });
         const g = {
-          workbook: s,
-          images: a
+          workbook: n,
+          images: d
         };
         if (this.fireEvent(this.Event.BeforeOverGridImageChange, g), g.cancel)
-          throw d.updateNotification(o), new v();
+          throw a.updateNotification(s), new S();
+      })
+    ), this.registerEventHandler(
+      this.Event.BeforeFloatDomUpdate,
+      () => t.beforeCommandExecuted((e) => {
+        if (e.id !== f.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
+          return;
+        const { drawings: s } = i, a = r.get(p), d = [];
+        if (s.forEach((c) => {
+          const m = a.getDrawingByParam(c);
+          (m == null ? void 0 : m.drawingType) === I.DRAWING_DOM && d.push(m);
+        }), d.length === 0)
+          return;
+        const g = {
+          workbook: n,
+          drawings: d
+        };
+        if (this.fireEvent(this.Event.BeforeFloatDomUpdate, g), g.cancel)
+          throw a.updateNotification(s), new S();
+      })
+    ), this.registerEventHandler(
+      this.Event.FloatDomUpdated,
+      () => t.onCommandExecuted((e) => {
+        if (e.id !== f.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
+          return;
+        const { drawings: s } = i, a = r.get(p), d = [];
+        s.forEach((g) => {
+          const c = a.getDrawingByParam(g);
+          (c == null ? void 0 : c.drawingType) === I.DRAWING_DOM && d.push(c);
+        }), d.length !== 0 && this.fireEvent(this.Event.FloatDomUpdated, {
+          workbook: n,
+          drawings: d
+        });
+      })
+    ), this.registerEventHandler(
+      this.Event.BeforeFloatDomDelete,
+      () => t.beforeCommandExecuted((e) => {
+        if (e.id !== k.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
+          return;
+        const s = r.get(p), { drawings: a } = i, d = a.map((c) => s.getDrawingByParam(c)).filter(
+          (c) => (c == null ? void 0 : c.drawingType) === I.DRAWING_DOM
+        );
+        if (d.length === 0)
+          return;
+        const g = {
+          workbook: n,
+          drawings: d
+        };
+        if (this.fireEvent(this.Event.BeforeFloatDomDelete, g), g.cancel)
+          throw new S();
+      })
+    ), this.registerEventHandler(
+      this.Event.FloatDomDeleted,
+      () => t.onCommandExecuted((e) => {
+        if (e.id !== k.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
+          return;
+        const { drawings: s } = i;
+        this.fireEvent(this.Event.FloatDomDeleted, {
+          workbook: n,
+          drawings: s.filter((a) => a.drawingType === I.DRAWING_DOM).map((a) => a.drawingId)
+        });
       })
     ), this.registerEventHandler(
       this.Event.BeforeOverGridImageSelect,
-      () => t.beforeCommandExecuted((r) => {
-        if (r.id !== F.id) return;
-        const n = r.params, s = this.getActiveWorkbook();
-        if (s == null)
+      () => t.beforeCommandExecuted((e) => {
+        if (e.id !== W.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null)
           return;
-        const o = e.get(I), d = o.getFocusDrawings(), a = n.map((c) => o.getDrawingByParam(c)), g = {
-          workbook: s,
-          selectedImages: this._createFOverGridImage(a),
-          oldSelectedImages: this._createFOverGridImage(d)
+        const s = r.get(p), a = s.getFocusDrawings(), d = i.map((c) => s.getDrawingByParam(c)), g = {
+          workbook: n,
+          selectedImages: this._createFOverGridImage(d),
+          oldSelectedImages: this._createFOverGridImage(a)
         };
         if (this.fireEvent(this.Event.BeforeOverGridImageSelect, g), g.cancel)
-          throw new v();
+          throw new S();
       })
     ), this.registerEventHandler(
       this.Event.OverGridImageInserted,
-      () => t.onCommandExecuted((r) => {
-        if (r.id !== b.id) return;
-        const n = r.params, s = this.getActiveWorkbook();
-        if (s == null || n == null)
+      () => t.onCommandExecuted((e) => {
+        if (e.id !== b.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
           return;
-        const { drawings: o } = n;
+        const { drawings: s } = i;
         this.fireEvent(this.Event.OverGridImageInserted, {
-          workbook: s,
-          images: this._createFOverGridImage(o)
+          workbook: n,
+          images: this._createFOverGridImage(s)
         });
       })
     ), this.registerEventHandler(
       this.Event.OverGridImageRemoved,
-      () => t.onCommandExecuted((r) => {
-        if (r.id !== p.id) return;
-        const n = r.params, s = this.getActiveWorkbook();
-        if (s == null || n == null)
+      () => t.onCommandExecuted((e) => {
+        if (e.id !== k.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
           return;
-        const { drawings: o } = n;
+        const { drawings: s } = i;
         this.fireEvent(this.Event.OverGridImageRemoved, {
-          workbook: s,
-          removeImageParams: o
+          workbook: n,
+          removeImageParams: s
         });
       })
     ), this.registerEventHandler(
       this.Event.OverGridImageChanged,
-      () => t.onCommandExecuted((r) => {
-        if (r.id !== h.id) return;
-        const n = r.params, s = this.getActiveWorkbook();
-        if (s == null || n == null)
+      () => t.onCommandExecuted((e) => {
+        if (e.id !== f.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null || i == null)
           return;
-        const { drawings: o } = n, d = e.get(I), a = o.map((g) => this._injector.createInstance(m, d.getDrawingByParam(g)));
+        const { drawings: s } = i, a = r.get(p), d = s.map((g) => this._injector.createInstance(v, a.getDrawingByParam(g)));
         this.fireEvent(this.Event.OverGridImageChanged, {
-          workbook: s,
-          images: a
+          workbook: n,
+          images: d
         });
       })
     ), this.registerEventHandler(
       this.Event.OverGridImageSelected,
-      () => t.onCommandExecuted((r) => {
-        if (r.id !== F.id) return;
-        const n = r.params, s = this.getActiveWorkbook();
-        if (s == null)
+      () => t.onCommandExecuted((e) => {
+        if (e.id !== W.id) return;
+        const i = e.params, n = this.getActiveWorkbook();
+        if (n == null)
           return;
-        const o = e.get(I), d = n.map((a) => o.getDrawingByParam(a));
+        const s = r.get(p), a = i.map((d) => s.getDrawingByParam(d));
         this.fireEvent(this.Event.OverGridImageSelected, {
-          workbook: s,
-          selectedImages: this._createFOverGridImage(d)
+          workbook: n,
+          selectedImages: this._createFOverGridImage(a)
         });
       })
     );
   }
-  _createFOverGridImage(e) {
-    return e.map((t) => this._injector.createInstance(m, t));
+  _createFOverGridImage(r) {
+    return r.map((t) => this._injector.createInstance(v, t));
   }
 }
-z.extend(he);
-class ue extends $ {
-  async insertCellImageAsync(e) {
-    var s;
-    const t = this._injector.get(T), r = (s = ee(q.UNIVER_SHEET, this._injector.get(J), t)) == null ? void 0 : s.with(te);
-    if (!r)
+Y.extend(ue);
+class fe extends L {
+  async insertCellImageAsync(r) {
+    var n;
+    const t = this._injector.get(y), e = (n = ie(Z.UNIVER_SHEET, this._injector.get(ee), t)) == null ? void 0 : n.with(ne);
+    if (!e)
       return !1;
-    const n = {
+    const i = {
       unitId: this._workbook.getUnitId(),
       subUnitId: this._worksheet.getSheetId(),
       row: this.getRow(),
       col: this.getColumn()
     };
-    return typeof e == "string" ? r.insertCellImageByUrl(e, n) : r.insertCellImageByFile(e, n);
+    return typeof r == "string" ? e.insertCellImageByUrl(r, i) : e.insertCellImageByFile(r, i);
   }
 }
-$.extend(ue);
+L.extend(fe);