@univerjs/sheets-drawing-ui 0.5.4 → 0.5.5-experimental.20250123-34738ff

package/lib/es/facade.js

@@ -1,82 +1,86 @@
-var $ = Object.defineProperty;
-var L = (i, t, e) => t in i ? $(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var D = (i, t, e) => L(i, typeof t != "symbol" ? t + "" : t, e);
-import { Inject as A, Injector as x, ICommandService as P, generateRandomId as X, DrawingTypeEnum as _, ImageSourceType as I, FBase as Y, ArrangeTypeEnum as f, toDisposable as C, FEnum as F, FEventName as W, FUniver as U } from "@univerjs/core";
-import { getImageSize as H, SetDrawingSelectedOperation as B, IDrawingManagerService as u } from "@univerjs/drawing";
-import { IRenderManagerService as j } from "@univerjs/engine-render";
-import { SetSheetDrawingCommand as g, SetDrawingArrangeCommand as w, SheetCanvasFloatDomManagerService as K, InsertSheetDrawingCommand as S, RemoveSheetDrawingCommand as G } from "@univerjs/sheets-drawing-ui";
-import { SheetSkeletonManagerService as T, ISheetSelectionRenderService as V, convertPositionSheetOverGridToAbsolute as q, convertPositionCellToSheetOverGrid as J } from "@univerjs/sheets-ui";
-import { ISheetDrawingService as h, SheetDrawingAnchorType as Q } from "@univerjs/sheets-drawing";
-import { transformComponentKey as Z } from "@univerjs/sheets-ui/facade";
-import { FWorksheet as M } from "@univerjs/sheets/facade";
-import { ComponentManager as ee } from "@univerjs/ui";
-var te = Object.defineProperty, re = Object.getOwnPropertyDescriptor, z = (i, t, e, r) => {
-  for (var n = r > 1 ? void 0 : r ? re(t, e) : t, s = i.length - 1, a; s >= 0; s--)
-    (a = i[s]) && (n = (r ? a(t, e, n) : a(n)) || n);
-  return r && n && te(t, e, n), n;
-}, E = (i, t) => (e, r) => t(e, r, i);
-function ie(i, t) {
-  const { from: e, to: r, flipY: n = !1, flipX: s = !1, angle: a = 0, skewX: o = 0, skewY: c = 0 } = i.sheetTransform, { column: m, columnOffset: l, row: v, rowOffset: O } = e, p = q(
-    i.unitId,
-    i.subUnitId,
-    { from: e, to: r },
-    t
-  ), { left: y, top: R, width: k, height: N } = p;
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
+import { Inject, Injector, ICommandService, generateRandomId, DrawingTypeEnum, ImageSourceType, FBase, ArrangeTypeEnum, toDisposable, FEnum, FEventName, FUniver } from "@univerjs/core";
+import { getImageSize, SetDrawingSelectedOperation, IDrawingManagerService } from "@univerjs/drawing";
+import { IRenderManagerService } from "@univerjs/engine-render";
+import { SetSheetDrawingCommand, SetDrawingArrangeCommand, SheetCanvasFloatDomManagerService, InsertSheetDrawingCommand, RemoveSheetDrawingCommand } from "@univerjs/sheets-drawing-ui";
+import { SheetSkeletonManagerService, ISheetSelectionRenderService, convertPositionSheetOverGridToAbsolute, convertPositionCellToSheetOverGrid } from "@univerjs/sheets-ui";
+import { ISheetDrawingService, SheetDrawingAnchorType } from "@univerjs/sheets-drawing";
+import { transformComponentKey } from "@univerjs/sheets-ui/facade";
+import { FWorksheet } from "@univerjs/sheets/facade";
+import { ComponentManager } from "@univerjs/ui";
+var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp2(target, key, result), result;
+}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam");
+function convertSheetImageToFOverGridImage(sheetImage, sheetSkeletonManagerService) {
+  const { from, to, flipY = !1, flipX = !1, angle = 0, skewX = 0, skewY = 0 } = sheetImage.sheetTransform, { column: fromColumn, columnOffset: fromColumnOffset, row: fromRow, rowOffset: fromRowOffset } = from, absolutePosition = convertPositionSheetOverGridToAbsolute(
+    sheetImage.unitId,
+    sheetImage.subUnitId,
+    { from, to },
+    sheetSkeletonManagerService
+  ), { left, top, width, height } = absolutePosition;
   return {
-    ...i,
-    column: m,
-    columnOffset: l,
-    row: v,
-    rowOffset: O,
-    width: k,
-    height: N,
-    flipY: n,
-    flipX: s,
-    angle: a,
-    skewX: o,
-    skewY: c
+    ...sheetImage,
+    column: fromColumn,
+    columnOffset: fromColumnOffset,
+    row: fromRow,
+    rowOffset: fromRowOffset,
+    width,
+    height,
+    flipY,
+    flipX,
+    angle,
+    skewX,
+    skewY
   };
 }
-function ne(i, t, e) {
-  const { column: r, columnOffset: n, row: s, rowOffset: a, flipY: o = !1, flipX: c = !1, angle: m = 0, skewX: l = 0, skewY: v = 0, width: O, height: p } = i, y = J(
-    i.unitId,
-    i.subUnitId,
-    { column: r, columnOffset: n, row: s, rowOffset: a },
-    O,
-    p,
-    t,
-    e
-  ), { sheetTransform: R, transform: k } = y;
+__name(convertSheetImageToFOverGridImage, "convertSheetImageToFOverGridImage");
+function convertFOverGridImageToSheetImage(fOverGridImage, selectionRenderService, sheetSkeletonManagerService) {
+  const { column: fromColumn, columnOffset: fromColumnOffset, row: fromRow, rowOffset: fromRowOffset, flipY = !1, flipX = !1, angle = 0, skewX = 0, skewY = 0, width, height } = fOverGridImage, absolutePosition = convertPositionCellToSheetOverGrid(
+    fOverGridImage.unitId,
+    fOverGridImage.subUnitId,
+    { column: fromColumn, columnOffset: fromColumnOffset, row: fromRow, rowOffset: fromRowOffset },
+    width,
+    height,
+    selectionRenderService,
+    sheetSkeletonManagerService
+  ), { sheetTransform, transform } = absolutePosition;
   return {
-    ...i,
+    ...fOverGridImage,
     sheetTransform: {
-      ...R,
-      flipY: o,
-      flipX: c,
-      angle: m,
-      skewX: l,
-      skewY: v
+      ...sheetTransform,
+      flipY,
+      flipX,
+      angle,
+      skewX,
+      skewY
     },
     transform: {
-      ...k,
-      flipY: o,
-      flipX: c,
-      angle: m,
-      skewX: l,
-      skewY: v
+      ...transform,
+      flipY,
+      flipX,
+      angle,
+      skewX,
+      skewY
     }
   };
 }
-let b = class {
-  constructor(i, t, e) {
-    D(this, "_image");
-    this._injector = e, this._image = {
-      drawingId: X(6),
-      drawingType: _.DRAWING_IMAGE,
-      imageSourceType: I.BASE64,
+__name(convertFOverGridImageToSheetImage, "convertFOverGridImageToSheetImage");
+var _a;
+let FOverGridImageBuilder = (_a = class {
+  constructor(unitId, subUnitId, _injector) {
+    __publicField(this, "_image");
+    this._injector = _injector, this._image = {
+      drawingId: generateRandomId(6),
+      drawingType: DrawingTypeEnum.DRAWING_IMAGE,
+      imageSourceType: ImageSourceType.BASE64,
       source: "",
-      unitId: i,
-      subUnitId: t,
+      unitId,
+      subUnitId,
       column: 0,
       columnOffset: 0,
       row: 0,
@@ -106,12 +110,12 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setImage(i) {
-    const e = this._injector.get(j).getRenderById(i.unitId);
-    if (!e)
-      throw new Error(`Render Unit with unitId ${i.unitId} not found`);
-    const r = e.with(T);
-    return i.sheetTransform == null && (i.sheetTransform = {
+  setImage(image) {
+    const render = this._injector.get(IRenderManagerService).getRenderById(image.unitId);
+    if (!render)
+      throw new Error(`Render Unit with unitId ${image.unitId} not found`);
+    const skeletonManagerService = render.with(SheetSkeletonManagerService);
+    return image.sheetTransform == null && (image.sheetTransform = {
       from: {
         column: 0,
         columnOffset: 0,
@@ -124,11 +128,11 @@ let b = class {
         row: 0,
         rowOffset: 0
       }
-    }), this._image = ie(i, r), this;
+    }), this._image = convertSheetImageToFOverGridImage(image, skeletonManagerService), this;
   }
-  setSource(i, t) {
-    const e = t != null ? t : I.URL;
-    return this._image.source = i, this._image.imageSourceType = e, this;
+  setSource(source, sourceType) {
+    const sourceTypeVal = sourceType != null ? sourceType : ImageSourceType.URL;
+    return this._image.source = source, this._image.imageSourceType = sourceTypeVal, this;
   }
   getsource() {
     return this._image.source;
@@ -150,8 +154,8 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setColumn(i) {
-    return this._image.column = i, this;
+  setColumn(column) {
+    return this._image.column = column, this;
   }
   /**
    * Set the position of the image
@@ -167,8 +171,8 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setRow(i) {
-    return this._image.row = i, this;
+  setRow(row) {
+    return this._image.row = row, this;
   }
   /**
    * Set the column offset of the image in a unit
@@ -184,8 +188,8 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setColumnOffset(i) {
-    return this._image.columnOffset = i, this;
+  setColumnOffset(offset) {
+    return this._image.columnOffset = offset, this;
   }
   /**
    * Set the row offset of the image in a unit
@@ -201,8 +205,8 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setRowOffset(i) {
-    return this._image.rowOffset = i, this;
+  setRowOffset(offset) {
+    return this._image.rowOffset = offset, this;
   }
   /**
    * set the width of the image
@@ -218,8 +222,8 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setWidth(i) {
-    return this._image.width = i, this;
+  setWidth(width) {
+    return this._image.width = width, this;
   }
   /**
    * Set the height of the image
@@ -235,8 +239,8 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setHeight(i) {
-    return this._image.height = i, this;
+  setHeight(height) {
+    return this._image.height = height, this;
   }
   /**
    * Set the anchor type of the image, whether the position and size change with the cell
@@ -252,8 +256,8 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setAnchorType(i) {
-    return this._image.anchorType = i, this;
+  setAnchorType(anchorType) {
+    return this._image.anchorType = anchorType, this;
   }
   /**
    * Set the cropping region of the image by defining the top edges, thereby displaying the specific part of the image you want.
@@ -269,8 +273,8 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setCropTop(i) {
-    return this._initializeSrcRect(), this._image.srcRect.top = i, this;
+  setCropTop(top) {
+    return this._initializeSrcRect(), this._image.srcRect.top = top, this;
   }
   /**
    * Set the cropping region of the image by defining the left edges, thereby displaying the specific part of the image you want.
@@ -286,8 +290,8 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setCropLeft(i) {
-    return this._initializeSrcRect(), this._image.srcRect.left = i, this;
+  setCropLeft(left) {
+    return this._initializeSrcRect(), this._image.srcRect.left = left, this;
   }
   /**
    * Set the cropping region of the image by defining the bottom edges, thereby displaying the specific part of the image you want.
@@ -303,8 +307,8 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setCropBottom(i) {
-    return this._initializeSrcRect(), this._image.srcRect.bottom = i, this;
+  setCropBottom(bottom) {
+    return this._initializeSrcRect(), this._image.srcRect.bottom = bottom, this;
   }
   /**
    * Set the cropping region of the image by defining the right edges, thereby displaying the specific part of the image you want.
@@ -320,8 +324,8 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setCropRight(i) {
-    return this._initializeSrcRect(), this._image.srcRect.right = i, this;
+  setCropRight(right) {
+    return this._initializeSrcRect(), this._image.srcRect.right = right, this;
   }
   _initializeSrcRect() {
     this._image.srcRect == null && (this._image.srcRect = {
@@ -345,37 +349,38 @@ let b = class {
    * activeSheet.insertImages([param]);
    * ```
    */
-  setRotate(i) {
-    return this._image.angle = i, this;
+  setRotate(angle) {
+    return this._image.angle = angle, this;
   }
   // setPresetGeometry(prstGeom: PresetGeometryType): FOverGridImageBuilder {
   //     this._image.prstGeom = prstGeom;
   //     return this;
   // }
-  setUnitId(i) {
-    return this._image.unitId = i, this;
+  setUnitId(unitId) {
+    return this._image.unitId = unitId, this;
   }
-  setSubUnitId(i) {
-    return this._image.subUnitId = i, this;
+  setSubUnitId(subUnitId) {
+    return this._image.subUnitId = subUnitId, this;
   }
   async buildAsync() {
-    const t = this._injector.get(j).getRenderById(this._image.unitId);
-    if (!t)
+    const render = this._injector.get(IRenderManagerService).getRenderById(this._image.unitId);
+    if (!render)
       throw new Error(`Render Unit with unitId ${this._image.unitId} not found`);
-    const e = t.with(V), r = t.with(T);
+    const selectionRenderService = render.with(ISheetSelectionRenderService), skeletonManagerService = render.with(SheetSkeletonManagerService);
     if (this._image.width === 0 || this._image.height === 0) {
-      const n = await H(this._image.source), s = n.width, a = n.height;
-      this._image.width === 0 && (this._image.width = s), this._image.height === 0 && (this._image.height = a);
+      const size = await getImageSize(this._image.source), width = size.width, height = size.height;
+      this._image.width === 0 && (this._image.width = width), this._image.height === 0 && (this._image.height = height);
     }
-    return ne(this._image, e, r);
+    return convertFOverGridImageToSheetImage(this._image, selectionRenderService, skeletonManagerService);
   }
-};
-b = z([
-  E(2, A(x))
-], b);
-let d = class extends Y {
-  constructor(i, t, e) {
-    super(), this._image = i, this._commandService = t, this._injector = e;
+}, __name(_a, "FOverGridImageBuilder"), _a);
+FOverGridImageBuilder = __decorateClass([
+  __decorateParam(2, Inject(Injector))
+], FOverGridImageBuilder);
+var _a2;
+let FOverGridImage = (_a2 = class extends FBase {
+  constructor(_image, _commandService, _injector) {
+    super(), this._image = _image, this._commandService = _commandService, this._injector = _injector;
   }
   getId() {
     return this._image.drawingId;
@@ -396,7 +401,7 @@ let d = class extends Y {
    * ```
    */
   remove() {
-    return this._commandService.syncExecuteCommand(g.id, { unitId: this._image.unitId, drawings: [this._image] });
+    return this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
   /**
    * Convert the image to a FOverGridImageBuilder
@@ -413,18 +418,18 @@ let d = class extends Y {
    * ```
    */
   toBuilder() {
-    const i = this._injector.createInstance(b);
-    return i.setImage(this._image), i;
+    const builder = this._injector.createInstance(FOverGridImageBuilder);
+    return builder.setImage(this._image), builder;
   }
-  setSource(i, t) {
-    const e = t != null ? t : I.URL;
-    return this._image.source = i, this._image.imageSourceType = e, this._commandService.syncExecuteCommand(g.id, { unitId: this._image.unitId, drawings: [this._image] });
+  setSource(source, sourceType) {
+    const sourceTypeVal = sourceType != null ? sourceType : ImageSourceType.URL;
+    return this._image.source = source, this._image.imageSourceType = sourceTypeVal, this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
-  async setPositionAsync(i, t, e, r) {
-    const n = this.toBuilder();
-    n.setColumn(t), n.setRow(i), e != null && n.setRowOffset(e), r != null && n.setColumnOffset(r);
-    const s = await n.buildAsync();
-    return this._commandService.syncExecuteCommand(g.id, { unitId: this._image.unitId, drawings: [s] });
+  async setPositionAsync(row, column, rowOffset, columnOffset) {
+    const builder = this.toBuilder();
+    builder.setColumn(column), builder.setRow(row), rowOffset != null && builder.setRowOffset(rowOffset), columnOffset != null && builder.setColumnOffset(columnOffset);
+    const param = await builder.buildAsync();
+    return this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, { unitId: this._image.unitId, drawings: [param] });
   }
   /**
    * Set the size of the image
@@ -439,11 +444,11 @@ let d = class extends Y {
    * const image = activeSheet.getImages()[0];
    * console.log('Set size state is ', image.setSize(50, 120));
    */
-  async setSizeAsync(i, t) {
-    const e = this.toBuilder();
-    e.setWidth(i), e.setHeight(t);
-    const r = await e.buildAsync();
-    return this._commandService.syncExecuteCommand(g.id, { unitId: this._image.unitId, drawings: [r] });
+  async setSizeAsync(width, height) {
+    const builder = this.toBuilder();
+    builder.setWidth(width), builder.setHeight(height);
+    const param = await builder.buildAsync();
+    return this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, { unitId: this._image.unitId, drawings: [param] });
   }
   /**
    * 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.
@@ -461,13 +466,13 @@ let d = class extends Y {
    * console.log('Set crop state is ', image.setCrop(10, 10, 10, 10));
    * ```
    */
-  setCrop(i, t, e, r) {
+  setCrop(top, left, bottom, right) {
     return this._image.srcRect == null && (this._image.srcRect = {
       top: 0,
       left: 0,
       bottom: 0,
       right: 0
-    }), i != null && (this._image.srcRect.top = i), t != null && (this._image.srcRect.left = t), e != null && (this._image.srcRect.bottom = e), r != null && (this._image.srcRect.right = r), this._commandService.syncExecuteCommand(g.id, { unitId: this._image.unitId, drawings: [this._image] });
+    }), top != null && (this._image.srcRect.top = top), left != null && (this._image.srcRect.left = left), bottom != null && (this._image.srcRect.bottom = bottom), right != null && (this._image.srcRect.right = right), this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
   // setPresetGeometry(prstGeom: PresetGeometryType): boolean {
   //     this._image.prstGeom = prstGeom;
@@ -486,8 +491,8 @@ let d = class extends Y {
    * console.log('Set rotate state is ', image.setRotate(90));
    * ```
    */
-  setRotate(i) {
-    return this._image.sheetTransform.angle = i, this._commandService.syncExecuteCommand(g.id, { unitId: this._image.unitId, drawings: [this._image] });
+  setRotate(angle) {
+    return this._image.sheetTransform.angle = angle, this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, { unitId: this._image.unitId, drawings: [this._image] });
   }
   /**
    * Move the image layer forward by one level
@@ -502,11 +507,11 @@ let d = class extends Y {
    * ```
    */
   setForward() {
-    return this._commandService.syncExecuteCommand(w.id, {
+    return this._commandService.syncExecuteCommand(SetDrawingArrangeCommand.id, {
       unitId: this._image.unitId,
       subUnitId: this._image.subUnitId,
       drawingIds: [this._image.drawingId],
-      arrangeType: f.forward
+      arrangeType: ArrangeTypeEnum.forward
     });
   }
   /**
@@ -522,11 +527,11 @@ let d = class extends Y {
    * ```
    */
   setBackward() {
-    return this._commandService.syncExecuteCommand(w.id, {
+    return this._commandService.syncExecuteCommand(SetDrawingArrangeCommand.id, {
       unitId: this._image.unitId,
       subUnitId: this._image.subUnitId,
       drawingIds: [this._image.drawingId],
-      arrangeType: f.backward
+      arrangeType: ArrangeTypeEnum.backward
     });
   }
   /**
@@ -542,11 +547,11 @@ let d = class extends Y {
    * ```
    */
   setBack() {
-    return this._commandService.syncExecuteCommand(w.id, {
+    return this._commandService.syncExecuteCommand(SetDrawingArrangeCommand.id, {
       unitId: this._image.unitId,
       subUnitId: this._image.subUnitId,
       drawingIds: [this._image.drawingId],
-      arrangeType: f.back
+      arrangeType: ArrangeTypeEnum.back
     });
   }
   /**
@@ -562,122 +567,144 @@ let d = class extends Y {
    * ```
    */
   setFront() {
-    return this._commandService.syncExecuteCommand(w.id, {
+    return this._commandService.syncExecuteCommand(SetDrawingArrangeCommand.id, {
       unitId: this._image.unitId,
       subUnitId: this._image.subUnitId,
       drawingIds: [this._image.drawingId],
-      arrangeType: f.front
+      arrangeType: ArrangeTypeEnum.front
     });
   }
-};
-d = z([
-  E(1, P),
-  E(2, A(x))
-], d);
-class se extends M {
-  addFloatDomToPosition(t, e) {
-    const r = this._workbook.getUnitId(), n = this._worksheet.getSheetId(), { key: s, disposableCollection: a } = Z(t, this._injector.get(ee)), c = this._injector.get(K).addFloatDomToPosition({ ...t, componentKey: s, unitId: r, subUnitId: n }, e);
-    return c ? (a.add(c.dispose), {
-      id: c.id,
-      dispose: () => {
-        a.dispose(), c.dispose();
-      }
-    }) : (a.dispose(), null);
-  }
-  async insertImage(t, e, r, n, s) {
-    const a = this.newOverGridImage();
-    if (typeof t == "string")
-      a.setSource(t);
+}, __name(_a2, "FOverGridImage"), _a2);
+FOverGridImage = __decorateClass([
+  __decorateParam(1, ICommandService),
+  __decorateParam(2, Inject(Injector))
+], FOverGridImage);
+const _FWorksheetLegacy = class _FWorksheetLegacy extends FWorksheet {
+  addFloatDomToPosition(layer, id) {
+    const unitId = this._workbook.getUnitId(), subUnitId = this._worksheet.getSheetId(), { key, disposableCollection } = transformComponentKey(layer, this._injector.get(ComponentManager)), res = this._injector.get(SheetCanvasFloatDomManagerService).addFloatDomToPosition({ ...layer, componentKey: key, unitId, subUnitId }, id);
+    return res ? (disposableCollection.add(res.dispose), {
+      id: res.id,
+      dispose: /* @__PURE__ */ __name(() => {
+        disposableCollection.dispose(), res.dispose();
+      }, "dispose")
+    }) : (disposableCollection.dispose(), null);
+  }
+  addFloatDomToRange(fRange, layer, domLayout, id) {
+    const unitId = this._workbook.getUnitId(), subUnitId = this._worksheet.getSheetId(), { key, disposableCollection } = transformComponentKey(layer, this._injector.get(ComponentManager)), res = this._injector.get(SheetCanvasFloatDomManagerService).addFloatDomToRange(fRange.getRange(), { ...layer, componentKey: key, unitId, subUnitId }, domLayout, id);
+    return res ? (disposableCollection.add(res.dispose), {
+      id: res.id,
+      dispose: /* @__PURE__ */ __name(() => {
+        disposableCollection.dispose(), res.dispose();
+      }, "dispose")
+    }) : (disposableCollection.dispose(), null);
+  }
+  addFloatDomToColumnHeader(column, layer, domLayout, id) {
+    const unitId = this._workbook.getUnitId(), subUnitId = this._worksheet.getSheetId(), { key, disposableCollection } = transformComponentKey(layer, this._injector.get(ComponentManager)), domRangeDispose = this._injector.get(SheetCanvasFloatDomManagerService).addFloatDomToColumnHeader(column, { ...layer, componentKey: key, unitId, subUnitId }, domLayout, id);
+    return domRangeDispose ? (disposableCollection.add(domRangeDispose.dispose), {
+      id: domRangeDispose.id,
+      dispose: /* @__PURE__ */ __name(() => {
+        disposableCollection.dispose(), domRangeDispose.dispose();
+      }, "dispose")
+    }) : (disposableCollection.dispose(), null);
+  }
+  async insertImage(url, column, row, offsetX, offsetY) {
+    const imageBuilder = this.newOverGridImage();
+    if (typeof url == "string")
+      imageBuilder.setSource(url);
     else {
-      const m = await t.getBlob().getDataAsString();
-      a.setSource(m, I.BASE64);
+      const base64 = await url.getBlob().getDataAsString();
+      imageBuilder.setSource(base64, ImageSourceType.BASE64);
     }
-    e !== void 0 ? a.setColumn(e) : a.setColumn(0), r !== void 0 ? a.setRow(r) : a.setRow(0), n !== void 0 ? a.setColumnOffset(n) : a.setColumnOffset(0), s !== void 0 ? a.setRowOffset(s) : a.setRowOffset(0);
-    const o = await a.buildAsync();
-    return this._commandService.syncExecuteCommand(S.id, { unitId: this._fWorkbook.getId(), drawings: [o] });
+    column !== void 0 ? imageBuilder.setColumn(column) : imageBuilder.setColumn(0), row !== void 0 ? imageBuilder.setRow(row) : imageBuilder.setRow(0), offsetX !== void 0 ? imageBuilder.setColumnOffset(offsetX) : imageBuilder.setColumnOffset(0), offsetY !== void 0 ? imageBuilder.setRowOffset(offsetY) : imageBuilder.setRowOffset(0);
+    const param = await imageBuilder.buildAsync();
+    return this._commandService.syncExecuteCommand(InsertSheetDrawingCommand.id, { unitId: this._fWorkbook.getId(), drawings: [param] });
   }
-  insertImages(t) {
-    const e = t.map((r) => (r.unitId = this._fWorkbook.getId(), r.subUnitId = this.getSheetId(), r));
-    return this._commandService.syncExecuteCommand(S.id, { unitId: this._fWorkbook.getId(), drawings: e }), this;
+  insertImages(sheetImages) {
+    const param = sheetImages.map((image) => (image.unitId = this._fWorkbook.getId(), image.subUnitId = this.getSheetId(), image));
+    return this._commandService.syncExecuteCommand(InsertSheetDrawingCommand.id, { unitId: this._fWorkbook.getId(), drawings: param }), this;
   }
-  deleteImages(t) {
-    const e = t.map((r) => ({
+  deleteImages(sheetImages) {
+    const drawings = sheetImages.map((image) => ({
       unitId: this._fWorkbook.getId(),
-      drawingId: r.getId(),
+      drawingId: image.getId(),
       subUnitId: this.getSheetId(),
-      drawingType: r.getType()
+      drawingType: image.getType()
     }));
-    return this._commandService.syncExecuteCommand(G.id, { unitId: this._fWorkbook.getId(), drawings: e }), this;
+    return this._commandService.syncExecuteCommand(RemoveSheetDrawingCommand.id, { unitId: this._fWorkbook.getId(), drawings }), this;
   }
   getImages() {
-    const e = this._injector.get(h).getDrawingData(this._fWorkbook.getId(), this.getSheetId()), r = [];
-    for (const n in e) {
-      const s = e[n];
-      s.drawingType === _.DRAWING_IMAGE && r.push(this._injector.createInstance(d, s));
+    const drawingData = this._injector.get(ISheetDrawingService).getDrawingData(this._fWorkbook.getId(), this.getSheetId()), images = [];
+    for (const drawingId in drawingData) {
+      const drawing = drawingData[drawingId];
+      drawing.drawingType === DrawingTypeEnum.DRAWING_IMAGE && images.push(this._injector.createInstance(FOverGridImage, drawing));
     }
-    return r;
+    return images;
   }
-  getImageById(t) {
-    const r = this._injector.get(h).getDrawingByParam({ unitId: this._fWorkbook.getId(), subUnitId: this.getSheetId(), drawingId: t });
-    return r && r.drawingType === _.DRAWING_IMAGE ? this._injector.createInstance(d, r) : null;
+  getImageById(id) {
+    const drawing = this._injector.get(ISheetDrawingService).getDrawingByParam({ unitId: this._fWorkbook.getId(), subUnitId: this.getSheetId(), drawingId: id });
+    return drawing && drawing.drawingType === DrawingTypeEnum.DRAWING_IMAGE ? this._injector.createInstance(FOverGridImage, drawing) : null;
   }
   getActiveImages() {
-    const e = this._injector.get(h).getFocusDrawings(), r = [];
-    for (const n in e) {
-      const s = e[n];
-      r.push(this._injector.createInstance(d, s));
+    const drawingData = this._injector.get(ISheetDrawingService).getFocusDrawings(), images = [];
+    for (const drawingId in drawingData) {
+      const drawing = drawingData[drawingId];
+      images.push(this._injector.createInstance(FOverGridImage, drawing));
     }
-    return r;
+    return images;
   }
-  updateImages(t) {
-    return this._commandService.syncExecuteCommand(g.id, { unitId: this._fWorkbook.getId(), drawings: t }), this;
+  updateImages(sheetImages) {
+    return this._commandService.syncExecuteCommand(SetSheetDrawingCommand.id, { unitId: this._fWorkbook.getId(), drawings: sheetImages }), this;
   }
-  onImageInserted(t) {
-    const e = this._injector.get(h);
-    return C(e.add$.subscribe((r) => {
-      const n = r.map(
-        (s) => this._injector.createInstance(d, e.getDrawingByParam(s))
+  onImageInserted(callback) {
+    const sheetDrawingService = this._injector.get(ISheetDrawingService);
+    return toDisposable(sheetDrawingService.add$.subscribe((drawingSearches) => {
+      const drawings = drawingSearches.map(
+        (drawingSearch) => this._injector.createInstance(FOverGridImage, sheetDrawingService.getDrawingByParam(drawingSearch))
       );
-      t(n);
+      callback(drawings);
     }));
   }
-  onImageDeleted(t) {
-    const e = this._injector.get(h);
-    return C(e.remove$.subscribe((r) => {
-      const n = r.map(
-        (s) => this._injector.createInstance(d, e.getDrawingByParam(s))
+  onImageDeleted(callback) {
+    const sheetDrawingService = this._injector.get(ISheetDrawingService);
+    return toDisposable(sheetDrawingService.remove$.subscribe((drawingSearches) => {
+      const drawings = drawingSearches.map(
+        (drawingSearch) => this._injector.createInstance(FOverGridImage, sheetDrawingService.getDrawingByParam(drawingSearch))
       );
-      t(n);
+      callback(drawings);
     }));
   }
-  onImageChanged(t) {
-    const e = this._injector.get(h);
-    return C(e.update$.subscribe((r) => {
-      const n = r.map(
-        (s) => this._injector.createInstance(d, e.getDrawingByParam(s))
+  onImageChanged(callback) {
+    const sheetDrawingService = this._injector.get(ISheetDrawingService);
+    return toDisposable(sheetDrawingService.update$.subscribe((drawingSearches) => {
+      const drawings = drawingSearches.map(
+        (drawingSearch) => this._injector.createInstance(FOverGridImage, sheetDrawingService.getDrawingByParam(drawingSearch))
       );
-      t(n);
+      callback(drawings);
     }));
   }
   newOverGridImage() {
-    const t = this._fWorkbook.getId(), e = this.getSheetId();
-    return this._injector.createInstance(b, t, e);
+    const unitId = this._fWorkbook.getId(), subUnitId = this.getSheetId();
+    return this._injector.createInstance(FOverGridImageBuilder, unitId, subUnitId);
   }
-}
-M.extend(se);
-class ae extends F {
+};
+__name(_FWorksheetLegacy, "FWorksheetLegacy");
+let FWorksheetLegacy = _FWorksheetLegacy;
+FWorksheet.extend(FWorksheetLegacy);
+const _FDrawingEnumMixin = class _FDrawingEnumMixin extends FEnum {
   get DrawingType() {
-    return _;
+    return DrawingTypeEnum;
   }
   get ImageSourceType() {
-    return I;
+    return ImageSourceType;
   }
   get SheetDrawingAnchorType() {
-    return Q;
+    return SheetDrawingAnchorType;
   }
-}
-F.extend(ae);
-class oe extends W {
+};
+__name(_FDrawingEnumMixin, "FDrawingEnumMixin");
+let FDrawingEnumMixin = _FDrawingEnumMixin;
+FEnum.extend(FDrawingEnumMixin);
+const _FDrawingEventNameMixin = class _FDrawingEventNameMixin extends FEventName {
   get BeforeOverGridImageChange() {
     return "BeforeOverGridImageChange";
   }
@@ -702,154 +729,161 @@ class oe extends W {
   get OverGridImageSelected() {
     return "OverGridImageSelected";
   }
-}
-W.extend(oe);
-class ce extends U {
-  _initialize(t) {
-    const e = t.get(P);
-    this.disposeWithMe(e.beforeCommandExecuted((r) => {
-      switch (r.id) {
-        case S.id:
-          this._beforeOverGridImageInsert(r.params);
+};
+__name(_FDrawingEventNameMixin, "FDrawingEventNameMixin");
+let FDrawingEventNameMixin = _FDrawingEventNameMixin;
+FEventName.extend(FDrawingEventNameMixin);
+const _FUniverDrawingMixin = class _FUniverDrawingMixin extends FUniver {
+  /**
+   * @ignore
+   */
+  _initialize(injector) {
+    const commandService = injector.get(ICommandService);
+    this.disposeWithMe(commandService.beforeCommandExecuted((commandInfo) => {
+      switch (commandInfo.id) {
+        case InsertSheetDrawingCommand.id:
+          this._beforeOverGridImageInsert(commandInfo.params);
           break;
-        case G.id:
-          this._beforeOverGridImageRemove(r.params);
+        case RemoveSheetDrawingCommand.id:
+          this._beforeOverGridImageRemove(commandInfo.params);
           break;
-        case g.id:
-          this._beforeOverGridImageChange(r.params);
+        case SetSheetDrawingCommand.id:
+          this._beforeOverGridImageChange(commandInfo.params);
           break;
-        case B.id:
-          this._beforeOverGridImageSelect(r.params);
+        case SetDrawingSelectedOperation.id:
+          this._beforeOverGridImageSelect(commandInfo.params);
           break;
       }
-    })), this.disposeWithMe(e.onCommandExecuted((r) => {
-      switch (r.id) {
-        case S.id:
-          this._overGridImageInserted(r.params);
+    })), this.disposeWithMe(commandService.onCommandExecuted((commandInfo) => {
+      switch (commandInfo.id) {
+        case InsertSheetDrawingCommand.id:
+          this._overGridImageInserted(commandInfo.params);
           break;
-        case G.id:
-          this._overGridImageRemoved(r.params);
+        case RemoveSheetDrawingCommand.id:
+          this._overGridImageRemoved(commandInfo.params);
           break;
-        case g.id:
-          this._overGridImageChanged(r.params);
+        case SetSheetDrawingCommand.id:
+          this._overGridImageChanged(commandInfo.params);
           break;
-        case B.id:
-          this._overGridImageSelected(r.params);
+        case SetDrawingSelectedOperation.id:
+          this._overGridImageSelected(commandInfo.params);
           break;
       }
     }));
   }
-  _beforeOverGridImageInsert(t) {
+  _beforeOverGridImageInsert(params) {
     if (!this.hasEventCallback(this.Event.BeforeOverGridImageInsert))
       return;
-    const e = this.getActiveWorkbook();
-    if (e == null || t == null)
+    const workbook = this.getActiveWorkbook();
+    if (workbook == null || params == null)
       return;
-    const { drawings: r } = t, n = {
-      workbook: e,
-      insertImageParams: r
+    const { drawings } = params, eventParams = {
+      workbook,
+      insertImageParams: drawings
     };
-    if (this.fireEvent(this.Event.BeforeOverGridImageInsert, n), n.cancel)
+    if (this.fireEvent(this.Event.BeforeOverGridImageInsert, eventParams), eventParams.cancel)
       throw new Error("Canceled by BeforeOverGridImageInsert event");
   }
-  _overGridImageInserted(t) {
+  _overGridImageInserted(params) {
     if (!this.hasEventCallback(this.Event.OverGridImageInserted))
       return;
-    const e = this.getActiveWorkbook();
-    if (e == null || t == null)
+    const workbook = this.getActiveWorkbook();
+    if (workbook == null || params == null)
       return;
-    const { drawings: r } = t;
+    const { drawings } = params;
     this.fireEvent(this.Event.OverGridImageInserted, {
-      workbook: e,
-      images: this._createFOverGridImage(r)
+      workbook,
+      images: this._createFOverGridImage(drawings)
     });
   }
-  _beforeOverGridImageRemove(t) {
+  _beforeOverGridImageRemove(params) {
     if (!this.hasEventCallback(this.Event.BeforeOverGridImageRemove))
       return;
-    const e = this.getActiveWorkbook();
-    if (e == null || t == null)
+    const workbook = this.getActiveWorkbook();
+    if (workbook == null || params == null)
       return;
-    const { drawings: r } = t, n = this._injector.get(u), s = r.map((o) => n.getDrawingByParam(o)), a = {
-      workbook: e,
-      images: this._createFOverGridImage(s)
+    const { drawings } = params, drawingManagerService = this._injector.get(IDrawingManagerService), willRemoveDrawings = drawings.map((drawing) => drawingManagerService.getDrawingByParam(drawing)), eventParams = {
+      workbook,
+      images: this._createFOverGridImage(willRemoveDrawings)
     };
-    if (this.fireEvent(this.Event.BeforeOverGridImageRemove, a), a.cancel)
+    if (this.fireEvent(this.Event.BeforeOverGridImageRemove, eventParams), eventParams.cancel)
       throw new Error("Canceled by BeforeOverGridImageRemove event");
   }
-  _overGridImageRemoved(t) {
+  _overGridImageRemoved(params) {
     if (!this.hasEventCallback(this.Event.OverGridImageRemoved))
       return;
-    const e = this.getActiveWorkbook();
-    if (e == null || t == null)
+    const workbook = this.getActiveWorkbook();
+    if (workbook == null || params == null)
       return;
-    const { drawings: r } = t;
+    const { drawings } = params;
     this.fireEvent(this.Event.OverGridImageRemoved, {
-      workbook: e,
-      removeImageParams: r
+      workbook,
+      removeImageParams: drawings
     });
   }
-  _beforeOverGridImageChange(t) {
+  _beforeOverGridImageChange(params) {
     if (!this.hasEventCallback(this.Event.BeforeOverGridImageChange))
       return;
-    const e = this.getActiveWorkbook();
-    if (e == null || t == null)
+    const workbook = this.getActiveWorkbook();
+    if (workbook == null || params == null)
       return;
-    const { drawings: r } = t, n = this._injector.get(u), s = [];
-    r.forEach((o) => {
-      const c = n.getDrawingByParam(o);
-      c != null && s.push({
-        changeParam: o,
-        image: this._injector.createInstance(d, c)
+    const { drawings } = params, drawingManagerService = this._injector.get(IDrawingManagerService), images = [];
+    drawings.forEach((drawing) => {
+      const image = drawingManagerService.getDrawingByParam(drawing);
+      image != null && images.push({
+        changeParam: drawing,
+        image: this._injector.createInstance(FOverGridImage, image)
       });
     });
-    const a = {
-      workbook: e,
-      images: s
+    const eventParams = {
+      workbook,
+      images
     };
-    if (this.fireEvent(this.Event.BeforeOverGridImageChange, a), a.cancel)
-      throw n.updateNotification(r), new Error("Canceled by BeforeOverGridImageChange event");
+    if (this.fireEvent(this.Event.BeforeOverGridImageChange, eventParams), eventParams.cancel)
+      throw drawingManagerService.updateNotification(drawings), new Error("Canceled by BeforeOverGridImageChange event");
   }
-  _overGridImageChanged(t) {
+  _overGridImageChanged(params) {
     if (!this.hasEventCallback(this.Event.OverGridImageChanged))
       return;
-    const e = this.getActiveWorkbook();
-    if (e == null || t == null)
+    const workbook = this.getActiveWorkbook();
+    if (workbook == null || params == null)
       return;
-    const { drawings: r } = t, n = this._injector.get(u), s = r.map((a) => this._injector.createInstance(d, n.getDrawingByParam(a)));
+    const { drawings } = params, drawingManagerService = this._injector.get(IDrawingManagerService), images = drawings.map((drawing) => this._injector.createInstance(FOverGridImage, drawingManagerService.getDrawingByParam(drawing)));
     this.fireEvent(this.Event.OverGridImageChanged, {
-      workbook: e,
-      images: s
+      workbook,
+      images
     });
   }
-  _beforeOverGridImageSelect(t) {
+  _beforeOverGridImageSelect(drawings) {
     if (!this.hasEventCallback(this.Event.BeforeOverGridImageSelect))
       return;
-    const e = this._injector.get(u), r = this.getActiveWorkbook();
-    if (r == null)
+    const drawingManagerService = this._injector.get(IDrawingManagerService), workbook = this.getActiveWorkbook();
+    if (workbook == null)
       return;
-    const n = e.getFocusDrawings(), s = t.map((o) => e.getDrawingByParam(o)), a = {
-      workbook: r,
-      selectedImages: this._createFOverGridImage(s),
-      oldSelectedImages: this._createFOverGridImage(n)
+    const oldSelectedDrawings = drawingManagerService.getFocusDrawings(), selectedDrawings = drawings.map((drawing) => drawingManagerService.getDrawingByParam(drawing)), eventParams = {
+      workbook,
+      selectedImages: this._createFOverGridImage(selectedDrawings),
+      oldSelectedImages: this._createFOverGridImage(oldSelectedDrawings)
     };
-    if (this.fireEvent(this.Event.BeforeOverGridImageSelect, a), a.cancel)
+    if (this.fireEvent(this.Event.BeforeOverGridImageSelect, eventParams), eventParams.cancel)
       throw new Error("Canceled by BeforeOverGridImageSelect event");
   }
-  _overGridImageSelected(t) {
+  _overGridImageSelected(drawings) {
     if (!this.hasEventCallback(this.Event.OverGridImageSelected))
       return;
-    const e = this.getActiveWorkbook(), r = this._injector.get(u);
-    if (e == null)
+    const workbook = this.getActiveWorkbook(), drawingManagerService = this._injector.get(IDrawingManagerService);
+    if (workbook == null)
       return;
-    const n = t.map((s) => r.getDrawingByParam(s));
+    const selectedDrawings = drawings.map((drawing) => drawingManagerService.getDrawingByParam(drawing));
     this.fireEvent(this.Event.OverGridImageSelected, {
-      workbook: e,
-      selectedImages: this._createFOverGridImage(n)
+      workbook,
+      selectedImages: this._createFOverGridImage(selectedDrawings)
     });
   }
-  _createFOverGridImage(t) {
-    return t.map((e) => this._injector.createInstance(d, e));
+  _createFOverGridImage(drawings) {
+    return drawings.map((drawing) => this._injector.createInstance(FOverGridImage, drawing));
   }
-}
-U.extend(ce);
+};
+__name(_FUniverDrawingMixin, "FUniverDrawingMixin");
+let FUniverDrawingMixin = _FUniverDrawingMixin;
+FUniver.extend(FUniverDrawingMixin);