@univerjs/sheets-drawing-ui 0.2.12 → 0.2.14

package/lib/es/index.js

@@ -5,11 +5,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "sym
 import { CommandType, ICommandService, IUndoRedoService, LocaleService, IUniverInstanceService, useDependency, RxDisposable, UniverInstanceType, connectInjector, toDisposable, FOCUSING_COMMON_DRAWINGS, OnLifecycle, LifecycleStages, Inject, Injector, IContextService, Disposable, Direction, FOCUSING_FX_BAR_EDITOR, EDITOR_ACTIVATED, Rectangle, DrawingTypeEnum as DrawingTypeEnum$1, DisposableCollection, generateRandomId, Tools, UserManagerService, IPermissionService, LifecycleService, Plugin, DependentOn, IConfigService } from "@univerjs/core";
 import { ImageCropperObject, COMPONENT_IMAGE_POPUP_MENU, OpenImageCropOperation, ImageResetSizeOperation, DrawingCommonPanel, DrawingRenderService, UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
 import { ISheetDrawingService, SetDrawingApplyMutation, DrawingApplyType, SheetDrawingAnchorType, UniverSheetsDrawingPlugin } from "@univerjs/sheets-drawing";
-import { IDrawingManagerService, IImageIoService, DrawingTypeEnum, ArrangeTypeEnum, DRAWING_IMAGE_COUNT_LIMIT, ImageUploadStatusType, DRAWING_IMAGE_ALLOW_SIZE, getImageSize, DRAWING_IMAGE_WIDTH_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_ALLOW_IMAGE_LIST, getDrawingShapeKeyByDrawingSearch, UniverDrawingPlugin } from "@univerjs/drawing";
-import { IRenderManagerService, getGroupState, transformObjectOutOfGroup, precisionTo, Rect, DRAWING_OBJECT_LAYER_INDEX, SHEET_VIEWPORT_KEY, RENDER_CLASS_TYPE } from "@univerjs/engine-render";
+import { IDrawingManagerService, IImageIoService, DrawingTypeEnum, ArrangeTypeEnum, DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, ImageUploadStatusType, DRAWING_IMAGE_ALLOW_SIZE, getImageSize, DRAWING_IMAGE_WIDTH_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, getDrawingShapeKeyByDrawingSearch, UniverDrawingPlugin } from "@univerjs/drawing";
+import { IRenderManagerService, precisionTo, getGroupState, transformObjectOutOfGroup, Rect, DRAWING_OBJECT_LAYER_INDEX, SHEET_VIEWPORT_KEY, RENDER_CLASS_TYPE } from "@univerjs/engine-render";
 import { SheetCanvasPopManagerService, attachRangeWithCoord, SheetSkeletonManagerService, ISheetSelectionRenderService, getCurrentRangeDisable$, SetScrollOperation, SetZoomRatioOperation, SheetPrintInterceptorService, COPY_TYPE, PREDEFINED_HOOK_NAME, virtualizeDiscreteRanges, ISheetClipboardService } from "@univerjs/sheets-ui";
+import { ISidebarService, BuiltInUIPart, IUIPartsService, ILocalFileService, IMessageService, MenuItemType, getMenuHiddenObservable, KeyCode, RibbonStartGroup, ComponentManager, IMenuManagerService, IShortcutService, CanvasFloatDomService } from "@univerjs/ui";
 import { takeUntil, Subject, BehaviorSubject, combineLatest, map, filter, distinctUntilChanged } from "rxjs";
-import { ISidebarService, BuiltInUIPart, IUIPartsService, IMessageService, MenuItemType, getMenuHiddenObservable, KeyCode, RibbonStartGroup, ComponentManager, IMenuManagerService, IShortcutService, CanvasFloatDomService } from "@univerjs/ui";
 import { getSheetCommandTarget, SheetsSelectionsService, WorkbookEditablePermission, WorksheetEditPermission, RangeProtectionPermissionEditPoint, InsertRowCommand, InsertColCommand, RemoveRowCommand, RemoveColCommand, DeleteRangeMoveLeftCommand, DeleteRangeMoveUpCommand, InsertRangeMoveDownCommand, InsertRangeMoveRightCommand, DeltaRowHeightCommand, SetRowHeightCommand, DeltaColumnWidthCommand, SetColWidthCommand, SetRowHiddenCommand, SetSpecificRowsVisibleCommand, SetSpecificColsVisibleCommand, SetColHiddenCommand, MoveColsCommand, MoveRowsCommand, MoveRangeCommand, SetRowVisibleMutation, SetRowHiddenMutation, SetColVisibleMutation, SetColHiddenMutation, SetWorksheetRowHeightMutation, SetWorksheetColWidthMutation, SetWorksheetActiveOperation, SheetInterceptorService, SetFrozenMutation, WorkbookViewPermission, WorksheetViewPermission } from "@univerjs/sheets";
 import React, { useEffect, forwardRef, useRef, createElement, useState } from "react";
 import { MessageType, RadioGroup, Radio } from "@univerjs/design";
@@ -79,7 +79,7 @@ const ClearSheetDrawingTransformerOperation = {
     const drawingManagerService = accessor.get(IDrawingManagerService), commandService = accessor.get(ICommandService);
     return params == null ? !1 : (drawingManagerService.focusDrawing([params]), commandService.executeCommand(SidebarSheetDrawingOperation.id, { value: "open" }), !0);
   }, "handler")
-}, uploadLoading = "univer-upload-loading", uploadLoadingBody = "univer-upload-loading-body", uploadLoadingBodyAnimation = "univer-upload-loading-body-animation", univerCircleAnimation = "univer-UniverCircleAnimation", uploadLoadingBodyText = "univer-upload-loading-body-text", styles$2 = {
+}, uploadLoading = "univer-upload-loading", uploadLoadingBody = "univer-upload-loading-body", uploadLoadingBodyAnimation = "univer-upload-loading-body-animation", univerCircleAnimation = "univer-UniverCircleAnimation", uploadLoadingBodyText = "univer-upload-loading-body-text", styles$1 = {
   uploadLoading,
   uploadLoadingBody,
   uploadLoadingBodyAnimation,
@@ -94,7 +94,7 @@ const ClearSheetDrawingTransformerOperation = {
     return () => {
       sub.unsubscribe();
     };
-  }, [imageIoService]), /* @__PURE__ */ React.createElement("div", { style: { display: remain > 0 ? "block" : "none" }, className: styles$2.uploadLoading }, /* @__PURE__ */ React.createElement("div", { className: styles$2.uploadLoadingBody }, /* @__PURE__ */ React.createElement("div", { className: styles$2.uploadLoadingBodyAnimation }), /* @__PURE__ */ React.createElement("div", { className: styles$2.uploadLoadingBodyText }, `${localeService.t("uploadLoading.loading")}: ${remain}`)));
+  }, [imageIoService]), /* @__PURE__ */ React.createElement("div", { style: { display: remain > 0 ? "block" : "none" }, className: styles$1.uploadLoading }, /* @__PURE__ */ React.createElement("div", { className: styles$1.uploadLoadingBody }, /* @__PURE__ */ React.createElement("div", { className: styles$1.uploadLoadingBodyAnimation }), /* @__PURE__ */ React.createElement("div", { className: styles$1.uploadLoadingBodyText }, `${localeService.t("uploadLoading.loading")}: ${remain}`)));
 }, "UploadLoading");
 var __defProp$9 = Object.defineProperty, __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor, __decorateClass$9 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
@@ -153,18 +153,18 @@ let DrawingPopupMenuController = (_a = class extends RxDisposable {
           if (!drawingParam)
             return;
           const { unitId: unitId2, subUnitId, drawingId, drawingType } = drawingParam;
-          drawingType !== DrawingTypeEnum.DRAWING_DOM && (singletonPopupDisposer == null || singletonPopupDisposer.dispose(), singletonPopupDisposer = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
+          singletonPopupDisposer == null || singletonPopupDisposer.dispose(), singletonPopupDisposer = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
             componentKey: COMPONENT_IMAGE_POPUP_MENU,
             direction: "horizontal",
             offset: [2, 0],
             extraProps: {
-              menuItems: this._getImageMenuItems(unitId2, subUnitId, drawingId)
+              menuItems: this._getImageMenuItems(unitId2, subUnitId, drawingId, drawingType)
             }
           })), this._drawingManagerService.focusDrawing([{
             unitId: unitId2,
             subUnitId,
             drawingId
-          }]));
+          }]);
         })
       )
     ), this.disposeWithMe(
@@ -177,14 +177,14 @@ let DrawingPopupMenuController = (_a = class extends RxDisposable {
       })
     );
   }
-  _getImageMenuItems(unitId, subUnitId, drawingId) {
+  _getImageMenuItems(unitId, subUnitId, drawingId, drawingType) {
     return [
       {
         label: "image-popup.edit",
         index: 0,
         commandId: EditSheetDrawingOperation.id,
         commandParams: { unitId, subUnitId, drawingId },
-        disable: !1
+        disable: drawingType === DrawingTypeEnum.DRAWING_DOM
       },
       {
         label: "image-popup.delete",
@@ -198,14 +198,14 @@ let DrawingPopupMenuController = (_a = class extends RxDisposable {
         index: 2,
         commandId: OpenImageCropOperation.id,
         commandParams: { unitId, subUnitId, drawingId },
-        disable: !1
+        disable: drawingType === DrawingTypeEnum.DRAWING_DOM
       },
       {
         label: "image-popup.reset",
         index: 3,
         commandId: ImageResetSizeOperation.id,
         commandParams: [{ unitId, subUnitId, drawingId }],
-        disable: !1
+        disable: drawingType === DrawingTypeEnum.DRAWING_DOM
       }
     ];
   }
@@ -220,74 +220,69 @@ DrawingPopupMenuController = __decorateClass$9([
   __decorateParam$9(5, IContextService),
   __decorateParam$9(6, Inject(IUIPartsService))
 ], DrawingPopupMenuController);
-const InsertFloatImageOperation = {
-  id: "sheet.operation.insert-float-image",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => !0, "handler")
-}, InsertCellImageOperation = {
-  id: "sheet.operation.insert-cell-image",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => !0, "handler")
-}, InsertSheetDrawingCommand = {
-  id: "sheet.command.insert-sheet-image",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name((accessor, params) => {
-    const commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), sheetDrawingService = accessor.get(ISheetDrawingService);
-    if (!params) return !1;
-    const drawings = params.drawings, unitIds = drawings.map((param) => param.unitId), jsonOp = sheetDrawingService.getBatchAddOp(drawings), { unitId, subUnitId, undo, redo, objects } = jsonOp;
-    return commandService.syncExecuteCommand(SetDrawingApplyMutation.id, { op: redo, unitId, subUnitId, objects, type: DrawingApplyType.INSERT }) ? (undoRedoService.pushUndoRedo({
-      unitID: unitId,
-      undoMutations: [
-        { id: SetDrawingApplyMutation.id, params: { op: undo, unitId, subUnitId, objects, type: DrawingApplyType.REMOVE } },
-        { id: ClearSheetDrawingTransformerOperation.id, params: unitIds }
-      ],
-      redoMutations: [
-        { id: SetDrawingApplyMutation.id, params: { op: redo, unitId, subUnitId, objects, type: DrawingApplyType.INSERT } },
-        { id: ClearSheetDrawingTransformerOperation.id, params: unitIds }
-      ]
-    }), !0) : !1;
-  }, "handler")
-}, SetSheetDrawingCommand = {
-  id: "sheet.command.set-sheet-image",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name((accessor, params) => {
-    const commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), sheetDrawingService = accessor.get(ISheetDrawingService);
-    if (!params) return !1;
-    const { drawings } = params, jsonOp = sheetDrawingService.getBatchUpdateOp(drawings), { unitId, subUnitId, undo, redo, objects } = jsonOp;
-    return commandService.syncExecuteCommand(SetDrawingApplyMutation.id, { unitId, subUnitId, op: redo, objects, type: DrawingApplyType.UPDATE }) ? (undoRedoService.pushUndoRedo({
-      unitID: unitId,
-      undoMutations: [
-        { id: SetDrawingApplyMutation.id, params: { unitId, subUnitId, op: undo, objects, type: DrawingApplyType.UPDATE } },
-        { id: ClearSheetDrawingTransformerOperation.id, params: [unitId] }
-      ],
-      redoMutations: [
-        { id: SetDrawingApplyMutation.id, params: { unitId, subUnitId, op: redo, objects, type: DrawingApplyType.UPDATE } },
-        { id: ClearSheetDrawingTransformerOperation.id, params: [unitId] }
-      ]
-    }), !0) : !1;
-  }, "handler")
-}, SetDrawingArrangeCommand = {
-  id: "sheet.command.set-drawing-arrange",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name((accessor, params) => {
-    const commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService);
-    if (!params) return !1;
-    const sheetDrawingService = accessor.get(ISheetDrawingService), { unitId, subUnitId, drawingIds, arrangeType } = params, drawingOrderMapParam = { unitId, subUnitId, drawingIds };
-    let jsonOp;
-    if (arrangeType === ArrangeTypeEnum.forward ? jsonOp = sheetDrawingService.getForwardDrawingsOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.backward ? jsonOp = sheetDrawingService.getBackwardDrawingOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.front ? jsonOp = sheetDrawingService.getFrontDrawingsOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.back && (jsonOp = sheetDrawingService.getBackDrawingsOp(drawingOrderMapParam)), jsonOp == null)
-      return !1;
-    const { objects, redo, undo } = jsonOp;
-    return commandService.syncExecuteCommand(SetDrawingApplyMutation.id, { op: redo, unitId, subUnitId, objects, type: DrawingApplyType.ARRANGE }) ? (undoRedoService.pushUndoRedo({
-      unitID: unitId,
-      undoMutations: [
-        { id: SetDrawingApplyMutation.id, params: { op: undo, unitId, subUnitId, objects, type: DrawingApplyType.ARRANGE } }
-      ],
-      redoMutations: [
-        { id: SetDrawingApplyMutation.id, params: { op: redo, unitId, subUnitId, objects, type: DrawingApplyType.ARRANGE } }
-      ]
-    }), !0) : !1;
-  }, "handler")
-};
+function drawingPositionToTransform(position, selectionRenderService, sheetSkeletonManagerService) {
+  const { from, to, flipY = !1, flipX = !1, angle = 0, skewX = 0, skewY = 0 } = position, { column: fromColumn, columnOffset: fromColumnOffset, row: fromRow, rowOffset: fromRowOffset } = from, { column: toColumn, columnOffset: toColumnOffset, row: toRow, rowOffset: toRowOffset } = to, skeleton = sheetSkeletonManagerService.getCurrentSkeleton(), startSelectionCell = attachRangeWithCoord(skeleton, {
+    startColumn: fromColumn,
+    endColumn: fromColumn,
+    startRow: fromRow,
+    endRow: fromRow
+  });
+  if (startSelectionCell == null)
+    return;
+  const endSelectionCell = attachRangeWithCoord(skeleton, {
+    startColumn: toColumn,
+    endColumn: toColumn,
+    startRow: toRow,
+    endRow: toRow
+  });
+  if (endSelectionCell == null)
+    return;
+  const { startX: startSelectionX, startY: startSelectionY } = startSelectionCell, { startX: endSelectionX, startY: endSelectionY } = endSelectionCell;
+  let left = precisionTo(startSelectionX + fromColumnOffset, 1), top = precisionTo(startSelectionY + fromRowOffset, 1), width = precisionTo(endSelectionX + toColumnOffset - left, 1), height = precisionTo(endSelectionY + toRowOffset - top, 1);
+  startSelectionCell.startX === endSelectionCell.endX && (width = 0), startSelectionCell.startY === endSelectionCell.endY && (height = 0);
+  const sheetWidth = skeleton.rowHeaderWidth + skeleton.columnTotalWidth, sheetHeight = skeleton.columnHeaderHeight + skeleton.rowTotalHeight;
+  return left + width > sheetWidth && (left = sheetWidth - width), top + height > sheetHeight && (top = sheetHeight - height), {
+    flipY,
+    flipX,
+    angle,
+    skewX,
+    skewY,
+    left,
+    top,
+    width,
+    height
+  };
+}
+__name(drawingPositionToTransform, "drawingPositionToTransform");
+function transformToDrawingPosition(transform, selectionRenderService) {
+  const { left = 0, top = 0, width = 0, height = 0, flipY = !1, flipX = !1, angle = 0, skewX = 0, skewY = 0 } = transform, startSelectionCell = selectionRenderService.getSelectionCellByPosition(left, top);
+  if (startSelectionCell == null)
+    return;
+  const from = {
+    column: startSelectionCell.actualColumn,
+    columnOffset: precisionTo(left - startSelectionCell.startX, 1),
+    row: startSelectionCell.actualRow,
+    rowOffset: precisionTo(top - startSelectionCell.startY, 1)
+  }, endSelectionCell = selectionRenderService.getSelectionCellByPosition(left + width, top + height);
+  if (endSelectionCell == null)
+    return;
+  const to = {
+    column: endSelectionCell.actualColumn,
+    columnOffset: precisionTo(left + width - endSelectionCell.startX, 1),
+    row: endSelectionCell.actualRow,
+    rowOffset: precisionTo(top + height - endSelectionCell.startY, 1)
+  };
+  return {
+    flipY,
+    flipX,
+    angle,
+    skewX,
+    skewY,
+    from,
+    to
+  };
+}
+__name(transformToDrawingPosition, "transformToDrawingPosition");
 function ungroupToGroup(ungroupParams) {
   const newGroupParams = [];
   return ungroupParams.forEach((ungroupParam) => {
@@ -375,6 +370,65 @@ const GroupSheetDrawingCommand = {
       ]
     }), !0) : !1;
   }, "handler")
+}, InsertSheetDrawingCommand = {
+  id: "sheet.command.insert-sheet-image",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), sheetDrawingService = accessor.get(ISheetDrawingService);
+    if (!params) return !1;
+    const drawings = params.drawings, unitIds = drawings.map((param) => param.unitId), jsonOp = sheetDrawingService.getBatchAddOp(drawings), { unitId, subUnitId, undo, redo, objects } = jsonOp;
+    return commandService.syncExecuteCommand(SetDrawingApplyMutation.id, { op: redo, unitId, subUnitId, objects, type: DrawingApplyType.INSERT }) ? (undoRedoService.pushUndoRedo({
+      unitID: unitId,
+      undoMutations: [
+        { id: SetDrawingApplyMutation.id, params: { op: undo, unitId, subUnitId, objects, type: DrawingApplyType.REMOVE } },
+        { id: ClearSheetDrawingTransformerOperation.id, params: unitIds }
+      ],
+      redoMutations: [
+        { id: SetDrawingApplyMutation.id, params: { op: redo, unitId, subUnitId, objects, type: DrawingApplyType.INSERT } },
+        { id: ClearSheetDrawingTransformerOperation.id, params: unitIds }
+      ]
+    }), !0) : !1;
+  }, "handler")
+}, SetDrawingArrangeCommand = {
+  id: "sheet.command.set-drawing-arrange",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService);
+    if (!params) return !1;
+    const sheetDrawingService = accessor.get(ISheetDrawingService), { unitId, subUnitId, drawingIds, arrangeType } = params, drawingOrderMapParam = { unitId, subUnitId, drawingIds };
+    let jsonOp;
+    if (arrangeType === ArrangeTypeEnum.forward ? jsonOp = sheetDrawingService.getForwardDrawingsOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.backward ? jsonOp = sheetDrawingService.getBackwardDrawingOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.front ? jsonOp = sheetDrawingService.getFrontDrawingsOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.back && (jsonOp = sheetDrawingService.getBackDrawingsOp(drawingOrderMapParam)), jsonOp == null)
+      return !1;
+    const { objects, redo, undo } = jsonOp;
+    return commandService.syncExecuteCommand(SetDrawingApplyMutation.id, { op: redo, unitId, subUnitId, objects, type: DrawingApplyType.ARRANGE }) ? (undoRedoService.pushUndoRedo({
+      unitID: unitId,
+      undoMutations: [
+        { id: SetDrawingApplyMutation.id, params: { op: undo, unitId, subUnitId, objects, type: DrawingApplyType.ARRANGE } }
+      ],
+      redoMutations: [
+        { id: SetDrawingApplyMutation.id, params: { op: redo, unitId, subUnitId, objects, type: DrawingApplyType.ARRANGE } }
+      ]
+    }), !0) : !1;
+  }, "handler")
+}, SetSheetDrawingCommand = {
+  id: "sheet.command.set-sheet-image",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), sheetDrawingService = accessor.get(ISheetDrawingService);
+    if (!params) return !1;
+    const { drawings } = params, jsonOp = sheetDrawingService.getBatchUpdateOp(drawings), { unitId, subUnitId, undo, redo, objects } = jsonOp;
+    return commandService.syncExecuteCommand(SetDrawingApplyMutation.id, { unitId, subUnitId, op: redo, objects, type: DrawingApplyType.UPDATE }) ? (undoRedoService.pushUndoRedo({
+      unitID: unitId,
+      undoMutations: [
+        { id: SetDrawingApplyMutation.id, params: { unitId, subUnitId, op: undo, objects, type: DrawingApplyType.UPDATE } },
+        { id: ClearSheetDrawingTransformerOperation.id, params: [unitId] }
+      ],
+      redoMutations: [
+        { id: SetDrawingApplyMutation.id, params: { unitId, subUnitId, op: redo, objects, type: DrawingApplyType.UPDATE } },
+        { id: ClearSheetDrawingTransformerOperation.id, params: [unitId] }
+      ]
+    }), !0) : !1;
+  }, "handler")
 }, UngroupSheetDrawingCommand = {
   id: "sheet.command.ungroup-sheet-image",
   type: CommandType.COMMAND,
@@ -401,108 +455,26 @@ const GroupSheetDrawingCommand = {
     }), !0) : !1;
   }, "handler")
 };
-function drawingPositionToTransform(position, selectionRenderService, sheetSkeletonManagerService) {
-  const { from, to, flipY = !1, flipX = !1, angle = 0, skewX = 0, skewY = 0 } = position, { column: fromColumn, columnOffset: fromColumnOffset, row: fromRow, rowOffset: fromRowOffset } = from, { column: toColumn, columnOffset: toColumnOffset, row: toRow, rowOffset: toRowOffset } = to, skeleton = sheetSkeletonManagerService.getCurrentSkeleton(), startSelectionCell = attachRangeWithCoord(skeleton, {
-    startColumn: fromColumn,
-    endColumn: fromColumn,
-    startRow: fromRow,
-    endRow: fromRow
-  });
-  if (startSelectionCell == null)
-    return;
-  const endSelectionCell = attachRangeWithCoord(skeleton, {
-    startColumn: toColumn,
-    endColumn: toColumn,
-    startRow: toRow,
-    endRow: toRow
-  });
-  if (endSelectionCell == null)
-    return;
-  const { startX: startSelectionX, startY: startSelectionY } = startSelectionCell, { startX: endSelectionX, startY: endSelectionY } = endSelectionCell;
-  let left = precisionTo(startSelectionX + fromColumnOffset, 1), top = precisionTo(startSelectionY + fromRowOffset, 1), width = precisionTo(endSelectionX + toColumnOffset - left, 1), height = precisionTo(endSelectionY + toRowOffset - top, 1);
-  startSelectionCell.startX === endSelectionCell.endX && (width = 0), startSelectionCell.startY === endSelectionCell.endY && (height = 0);
-  const sheetWidth = skeleton.rowHeaderWidth + skeleton.columnTotalWidth, sheetHeight = skeleton.columnHeaderHeight + skeleton.rowTotalHeight;
-  return left + width > sheetWidth && (left = sheetWidth - width), top + height > sheetHeight && (top = sheetHeight - height), {
-    flipY,
-    flipX,
-    angle,
-    skewX,
-    skewY,
-    left,
-    top,
-    width,
-    height
-  };
-}
-__name(drawingPositionToTransform, "drawingPositionToTransform");
-function transformToDrawingPosition(transform, selectionRenderService) {
-  const { left = 0, top = 0, width = 0, height = 0, flipY = !1, flipX = !1, angle = 0, skewX = 0, skewY = 0 } = transform, startSelectionCell = selectionRenderService.getSelectionCellByPosition(left, top);
-  if (startSelectionCell == null)
-    return;
-  const from = {
-    column: startSelectionCell.actualColumn,
-    columnOffset: precisionTo(left - startSelectionCell.startX, 1),
-    row: startSelectionCell.actualRow,
-    rowOffset: precisionTo(top - startSelectionCell.startY, 1)
-  }, endSelectionCell = selectionRenderService.getSelectionCellByPosition(left + width, top + height);
-  if (endSelectionCell == null)
-    return;
-  const to = {
-    column: endSelectionCell.actualColumn,
-    columnOffset: precisionTo(left + width - endSelectionCell.startX, 1),
-    row: endSelectionCell.actualRow,
-    rowOffset: precisionTo(top + height - endSelectionCell.startY, 1)
-  };
-  return {
-    flipY,
-    flipX,
-    angle,
-    skewX,
-    skewY,
-    from,
-    to
-  };
-}
-__name(transformToDrawingPosition, "transformToDrawingPosition");
 var __defProp$8 = Object.defineProperty, __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor, __decorateClass$8 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(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 && __defProp$8(target, key, result), result;
 }, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$8"), _a2;
 let SheetDrawingUpdateController = (_a2 = class extends Disposable {
-  constructor(_context, _skeletonManagerService, _commandService, _selectionRenderService, _imageIoService, _sheetDrawingService, _drawingManagerService, _contextService, _messageService, _localeService, selectionManagerService) {
+  constructor(_context, _skeletonManagerService, _commandService, _selectionRenderService, _imageIoService, _fileOpenerService, _sheetDrawingService, _drawingManagerService, _contextService, _messageService, _localeService, selectionManagerService) {
     super();
     __publicField(this, "_workbookSelections");
-    this._context = _context, this._skeletonManagerService = _skeletonManagerService, this._commandService = _commandService, this._selectionRenderService = _selectionRenderService, this._imageIoService = _imageIoService, this._sheetDrawingService = _sheetDrawingService, this._drawingManagerService = _drawingManagerService, this._contextService = _contextService, this._messageService = _messageService, this._localeService = _localeService, this._workbookSelections = selectionManagerService.getWorkbookSelections(this._context.unitId), this._initCommandListeners(), this._updateImageListener(), this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener();
-  }
-  /**
-   * Upload image to cell or float image
-   */
-  _initCommandListeners() {
-    this.disposeWithMe(
-      this._commandService.onCommandExecuted(async (command) => {
-        if (command.id === InsertCellImageOperation.id || command.id === InsertFloatImageOperation.id) {
-          const params = command.params;
-          if (params.files == null)
-            return;
-          const fileLength = params.files.length;
-          if (fileLength > DRAWING_IMAGE_COUNT_LIMIT) {
-            this._messageService.show({
-              type: MessageType.Error,
-              content: this._localeService.t("update-status.exceedMaxCount", String(DRAWING_IMAGE_COUNT_LIMIT))
-            });
-            return;
-          }
-          this._imageIoService.setWaitCount(fileLength), command.id === InsertCellImageOperation.id ? params.files.forEach(async (file) => {
-            await this._insertCellImage(file);
-          }) : params.files.forEach(async (file) => {
-            await this._insertFloatImage(file);
-          });
-        }
-      })
-    );
-  }
-  async _insertCellImage(file) {
+    this._context = _context, this._skeletonManagerService = _skeletonManagerService, this._commandService = _commandService, this._selectionRenderService = _selectionRenderService, this._imageIoService = _imageIoService, this._fileOpenerService = _fileOpenerService, this._sheetDrawingService = _sheetDrawingService, this._drawingManagerService = _drawingManagerService, this._contextService = _contextService, this._messageService = _messageService, this._localeService = _localeService, this._workbookSelections = selectionManagerService.getWorkbookSelections(this._context.unitId), this._updateImageListener(), this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener();
+  }
+  async insertFloatImage() {
+    const files = await this._fileOpenerService.openFile({
+      multiple: !0,
+      accept: DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace("image/", "")}`).join(",")
+    }), fileLength = files.length;
+    return fileLength > DRAWING_IMAGE_COUNT_LIMIT ? (this._messageService.show({
+      type: MessageType.Error,
+      content: this._localeService.t("update-status.exceedMaxCount", String(DRAWING_IMAGE_COUNT_LIMIT))
+    }), !1) : fileLength === 0 ? !1 : (files.forEach(async (file) => await this._insertFloatImage(file)), !0);
   }
   async _insertFloatImage(file) {
     let imageParam;
@@ -523,10 +495,7 @@ let SheetDrawingUpdateController = (_a2 = class extends Disposable {
     }
     if (imageParam == null)
       return;
-    const info = this._getUnitInfo();
-    if (info == null)
-      return;
-    const { unitId, subUnitId } = info, { imageId, imageSourceType, source, base64Cache } = imageParam, { width, height, image } = await getImageSize(base64Cache || ""), { width: sceneWidth, height: sceneHeight } = this._context.scene;
+    const info = this._getUnitInfo(), { unitId, subUnitId } = info, { imageId, imageSourceType, source, base64Cache } = imageParam, { width, height, image } = await getImageSize(base64Cache || ""), { width: sceneWidth, height: sceneHeight } = this._context.scene;
     this._imageIoService.addImageSourceCache(source, imageSourceType, image);
     let scale = 1;
     if (width > DRAWING_IMAGE_WIDTH_LIMIT || height > DRAWING_IMAGE_HEIGHT_LIMIT) {
@@ -654,12 +623,13 @@ SheetDrawingUpdateController = __decorateClass$8([
   __decorateParam$8(2, ICommandService),
   __decorateParam$8(3, ISheetSelectionRenderService),
   __decorateParam$8(4, IImageIoService),
-  __decorateParam$8(5, ISheetDrawingService),
-  __decorateParam$8(6, IDrawingManagerService),
-  __decorateParam$8(7, IContextService),
-  __decorateParam$8(8, IMessageService),
-  __decorateParam$8(9, Inject(LocaleService)),
-  __decorateParam$8(10, Inject(SheetsSelectionsService))
+  __decorateParam$8(5, ILocalFileService),
+  __decorateParam$8(6, ISheetDrawingService),
+  __decorateParam$8(7, IDrawingManagerService),
+  __decorateParam$8(8, IContextService),
+  __decorateParam$8(9, IMessageService),
+  __decorateParam$8(10, Inject(LocaleService)),
+  __decorateParam$8(11, Inject(SheetsSelectionsService))
 ], SheetDrawingUpdateController);
 var __assign = function() {
   return __assign = Object.assign || function(t) {
@@ -716,34 +686,14 @@ var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width:
   }));
 });
 AddImageSingle.displayName = "AddImageSingle";
-const uploadFileMenu = "univer-upload-file-menu", uploadFileMenuInput = "univer-upload-file-menu-input", styles$1 = {
-  uploadFileMenu,
-  uploadFileMenuInput
-}, COMPONENT_UPLOAD_FILE_MENU = "COMPONENT_UPLOAD_FILE_MENU";
-var UploadFileType = /* @__PURE__ */ ((UploadFileType2) => (UploadFileType2[UploadFileType2.cellImage = 0] = "cellImage", UploadFileType2[UploadFileType2.floatImage = 1] = "floatImage", UploadFileType2))(UploadFileType || {});
-const UploadFileMenu = /* @__PURE__ */ __name((props) => {
-  const { type } = props, commandService = useDependency(ICommandService), fileInputRef = useRef(null), handleButtonClick = /* @__PURE__ */ __name(() => {
-    var _a11;
-    (_a11 = fileInputRef.current) == null || _a11.click();
-  }, "handleButtonClick"), imageAccept = DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace("image/", "")}`).join(","), handleFileChange = /* @__PURE__ */ __name((event) => {
-    const fileList = event.target.files;
-    if (fileList == null)
-      return;
-    const files = Array.from(fileList);
-    type === UploadFileType.floatImage ? commandService.executeCommand(InsertFloatImageOperation.id, { files }) : type === UploadFileType.cellImage && commandService.executeCommand(InsertCellImageOperation.id, { files }), fileInputRef.current && (fileInputRef.current.value = "");
-  }, "handleFileChange");
-  return /* @__PURE__ */ React.createElement("div", { onClick: handleButtonClick, className: styles$1.uploadFileMenu }, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: "file",
-      className: styles$1.uploadFileMenuInput,
-      ref: fileInputRef,
-      onChange: handleFileChange,
-      accept: imageAccept,
-      multiple: !0
-    }
-  ));
-}, "UploadFileMenu"), IMAGE_UPLOAD_ICON = "addition-and-subtraction-single", IMAGE_MENU_ID = "sheet.menu.image";
+const InsertFloatImageCommand = {
+  id: "sheet.command.insert-float-image",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor) => {
+    var _a11, _b;
+    return (_b = (_a11 = accessor.get(IRenderManagerService).getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a11.with(SheetDrawingUpdateController).insertFloatImage()) != null ? _b : !1;
+  }, "handler")
+}, IMAGE_UPLOAD_ICON = "addition-and-subtraction-single", IMAGE_MENU_ID = "sheet.menu.image";
 function ImageMenuFactory(accessor) {
   return {
     id: IMAGE_MENU_ID,
@@ -757,15 +707,9 @@ function ImageMenuFactory(accessor) {
 __name(ImageMenuFactory, "ImageMenuFactory");
 function UploadFloatImageMenuFactory(_accessor) {
   return {
-    id: InsertFloatImageOperation.id,
+    id: InsertFloatImageCommand.id,
     title: "sheetImage.upload.float",
-    type: MenuItemType.SELECTOR,
-    label: {
-      name: COMPONENT_UPLOAD_FILE_MENU,
-      props: {
-        type: UploadFileType.floatImage
-      }
-    },
+    type: MenuItemType.BUTTON,
     hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SHEET)
   };
 }
@@ -961,7 +905,7 @@ const MoveDrawingDownShortcutItem = {
     [IMAGE_MENU_ID]: {
       order: 3,
       menuItemFactory: ImageMenuFactory,
-      [InsertFloatImageOperation.id]: {
+      [InsertFloatImageCommand.id]: {
         order: 0,
         menuItemFactory: UploadFloatImageMenuFactory
       }
@@ -979,15 +923,14 @@ let SheetDrawingUIController = (_a3 = class extends Disposable {
   }
   _initCustomComponents() {
     const componentManager = this._componentManager;
-    this.disposeWithMe(componentManager.register(IMAGE_UPLOAD_ICON, AddImageSingle)), this.disposeWithMe(componentManager.register(COMPONENT_UPLOAD_FILE_MENU, UploadFileMenu)), this.disposeWithMe(componentManager.register(COMPONENT_SHEET_DRAWING_PANEL, SheetDrawingPanel));
+    this.disposeWithMe(componentManager.register(IMAGE_UPLOAD_ICON, AddImageSingle)), this.disposeWithMe(componentManager.register(COMPONENT_SHEET_DRAWING_PANEL, SheetDrawingPanel));
   }
   _initMenus() {
     this._menuManagerService.mergeMenu(menuSchema);
   }
   _initCommands() {
     [
-      InsertFloatImageOperation,
-      InsertCellImageOperation,
+      InsertFloatImageCommand,
       InsertSheetDrawingCommand,
       RemoveSheetDrawingCommand,
       SetSheetDrawingCommand,
@@ -2545,8 +2488,7 @@ export {
   EditSheetDrawingOperation,
   GroupSheetDrawingCommand,
   IMAGE_MENU_ID,
-  InsertCellImageOperation,
-  InsertFloatImageOperation,
+  InsertFloatImageCommand,
   InsertSheetDrawingCommand,
   MoveDrawingsCommand,
   RemoveSheetDrawingCommand,

package/lib/index.css

@@ -1 +1 @@
-.univer-upload-loading{position:absolute;height:100%;width:100%;text-align:center;background-color:rgba(var(--color-black),.5);z-index:1000;user-select:none}.univer-upload-loading-body{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:rgb(var(--color-white));padding:20px 40px;display:flex;align-items:center;justify-items:center;border-radius:var(--border-radius-lg)}.univer-upload-loading-body-animation{width:30px;height:30px;border:2px solid rgb(var(--color-black));border-top-color:transparent;border-radius:100%;animation:univer-UniverCircleAnimation infinite .75s linear}.univer-upload-loading-body-text{font-size:var(--font-size-xs);color:var(--color-black);padding:10px}@keyframes univer-UniverCircleAnimation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.univer-upload-file-menu{position:absolute;height:100%;width:100%;text-align:center}.univer-upload-file-menu-input{display:none}.univer-image-common-panel{text-align:center;padding:var(--padding-sm);font-size:var(--font-size-sm)}.univer-image-common-panel-grid{position:relative;width:100%}.univer-image-common-panel-border{border-top:1px solid rgb(var(--border-color));margin-top:20px}.univer-image-common-panel-title{color:rgb(var(--text-color-secondary));text-align:left}.univer-image-common-panel-subtitle{color:rgb(var(--text-color-primary));text-align:left}.univer-image-common-panel-row{position:relative;display:flex;justify-content:flex-start;align-items:flex-start;height:100%;margin-top:10px}.univer-image-common-panel-row-vertical{justify-content:center;align-items:center;height:36px}.univer-image-common-panel-column{width:100%}.univer-image-common-panel-column-center{display:flex;justify-content:center;align-items:center}.univer-image-common-panel-inline{display:flex;align-items:center;gap:var(--margin-xxs)}.univer-image-common-panel-span2{width:50%}.univer-image-common-panel-span3{width:33.33333333%}.univer-image-common-panel-input{width:90%}.univer-sheet-image-menu{position:absolute;height:100%;width:100%;text-align:center}.univer-sheet-image-menu-input{display:none}
+.univer-upload-loading{position:absolute;height:100%;width:100%;text-align:center;background-color:rgba(var(--color-black),.5);z-index:1000;user-select:none}.univer-upload-loading-body{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:rgb(var(--color-white));padding:20px 40px;display:flex;align-items:center;justify-items:center;border-radius:var(--border-radius-lg)}.univer-upload-loading-body-animation{width:30px;height:30px;border:2px solid rgb(var(--color-black));border-top-color:transparent;border-radius:100%;animation:univer-UniverCircleAnimation infinite .75s linear}.univer-upload-loading-body-text{font-size:var(--font-size-xs);color:var(--color-black);padding:10px}@keyframes univer-UniverCircleAnimation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.univer-image-common-panel{text-align:center;padding:var(--padding-sm);font-size:var(--font-size-sm)}.univer-image-common-panel-grid{position:relative;width:100%}.univer-image-common-panel-border{border-top:1px solid rgb(var(--border-color));margin-top:20px}.univer-image-common-panel-title{color:rgb(var(--text-color-secondary));text-align:left}.univer-image-common-panel-subtitle{color:rgb(var(--text-color-primary));text-align:left}.univer-image-common-panel-row{position:relative;display:flex;justify-content:flex-start;align-items:flex-start;height:100%;margin-top:10px}.univer-image-common-panel-row-vertical{justify-content:center;align-items:center;height:36px}.univer-image-common-panel-column{width:100%}.univer-image-common-panel-column-center{display:flex;justify-content:center;align-items:center}.univer-image-common-panel-inline{display:flex;align-items:center;gap:var(--margin-xxs)}.univer-image-common-panel-span2{width:50%}.univer-image-common-panel-span3{width:33.33333333%}.univer-image-common-panel-input{width:90%}.univer-sheet-image-menu{position:absolute;height:100%;width:100%;text-align:center}.univer-sheet-image-menu-input{display:none}

package/lib/types/commands/commands/insert-image.command.d.ts

@@ -0,0 +1,5 @@
+import { ICommand, Nullable } from '@univerjs/core';
+export interface IInsertImageCommandParams {
+    files: Nullable<File[]>;
+}
+export declare const InsertFloatImageCommand: ICommand<IInsertImageCommandParams>;

package/lib/types/controllers/drawing-popup-menu.controller.d.ts

@@ -1,7 +1,7 @@
 import { IContextService, Injector, IUniverInstanceService, RxDisposable } from '@univerjs/core';
+import { IDrawingManagerService } from '@univerjs/drawing';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { SheetCanvasPopManagerService } from '@univerjs/sheets-ui';
-import { IDrawingManagerService } from '@univerjs/drawing';
 import { IUIPartsService } from '@univerjs/ui';
 export declare class DrawingPopupMenuController extends RxDisposable {
     private _injector;

package/lib/types/controllers/sheet-drawing-update.controller.d.ts

@@ -1,9 +1,9 @@
-import { Workbook, Disposable, ICommandService, IContextService, LocaleService } from '@univerjs/core';
+import { Disposable, ICommandService, IContextService, LocaleService, Workbook } from '@univerjs/core';
 import { IDrawingManagerService, IImageIoService } from '@univerjs/drawing';
-import { ISheetDrawingService } from '@univerjs/sheets-drawing';
 import { SheetsSelectionsService } from '@univerjs/sheets';
+import { ISheetDrawingService } from '@univerjs/sheets-drawing';
 import { ISheetSelectionRenderService, SheetSkeletonManagerService } from '@univerjs/sheets-ui';
-import { IMessageService } from '@univerjs/ui';
+import { ILocalFileService, IMessageService } from '@univerjs/ui';
 import { IRenderContext, IRenderModule } from '@univerjs/engine-render';
 export declare class SheetDrawingUpdateController extends Disposable implements IRenderModule {
     private readonly _context;
@@ -11,18 +11,15 @@ export declare class SheetDrawingUpdateController extends Disposable implements
     private readonly _commandService;
     private readonly _selectionRenderService;
     private readonly _imageIoService;
+    private readonly _fileOpenerService;
     private readonly _sheetDrawingService;
     private readonly _drawingManagerService;
     private readonly _contextService;
     private readonly _messageService;
     private readonly _localeService;
     private readonly _workbookSelections;
-    constructor(_context: IRenderContext<Workbook>, _skeletonManagerService: SheetSkeletonManagerService, _commandService: ICommandService, _selectionRenderService: ISheetSelectionRenderService, _imageIoService: IImageIoService, _sheetDrawingService: ISheetDrawingService, _drawingManagerService: IDrawingManagerService, _contextService: IContextService, _messageService: IMessageService, _localeService: LocaleService, selectionManagerService: SheetsSelectionsService);
-    /**
-     * Upload image to cell or float image
-     */
-    private _initCommandListeners;
-    private _insertCellImage;
+    constructor(_context: IRenderContext<Workbook>, _skeletonManagerService: SheetSkeletonManagerService, _commandService: ICommandService, _selectionRenderService: ISheetSelectionRenderService, _imageIoService: IImageIoService, _fileOpenerService: ILocalFileService, _sheetDrawingService: ISheetDrawingService, _drawingManagerService: IDrawingManagerService, _contextService: IContextService, _messageService: IMessageService, _localeService: LocaleService, selectionManagerService: SheetsSelectionsService);
+    insertFloatImage(): Promise<boolean>;
     private _insertFloatImage;
     private _getUnitInfo;
     private _getImagePosition;

package/lib/types/index.d.ts

@@ -25,6 +25,6 @@ export { SetSheetDrawingCommand } from './commands/commands/set-sheet-drawing.co
 export { UngroupSheetDrawingCommand } from './commands/commands/ungroup-sheet-drawing.command';
 export { ClearSheetDrawingTransformerOperation } from './commands/operations/clear-drawing-transformer.operation';
 export { EditSheetDrawingOperation } from './commands/operations/edit-sheet-drawing.operation';
-export { InsertFloatImageOperation, InsertCellImageOperation } from './commands/operations/insert-image.operation';
+export { InsertFloatImageCommand, type IInsertImageCommandParams } from './commands/commands/insert-image.command';
 export { SidebarSheetDrawingOperation } from './commands/operations/open-drawing-panel.operation';
 export { IMAGE_MENU_ID } from './views/menu/image.menu';

package/lib/types/plugin.d.ts

@@ -8,7 +8,7 @@ export declare class UniverSheetsDrawingUIPlugin extends Plugin {
     private readonly _configService;
     static type: UniverInstanceType;
     static pluginName: string;
-    constructor(_config: Partial<IUniverSheetsDrawingUIConfig>, _injector: Injector, _renderManagerService: IRenderManagerService, _configService: IConfigService);
+    constructor(_config: Partial<IUniverSheetsDrawingUIConfig> | undefined, _injector: Injector, _renderManagerService: IRenderManagerService, _configService: IConfigService);
     onStarting(): void;
     onRendered(): void;
     private _initDependencies;