@univerjs/sheets-drawing-ui 0.2.11 → 0.2.13

package/lib/es/index.js

@@ -2,15 +2,15 @@ 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 { 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 } from "@univerjs/core";
+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, ArrangeTypeEnum, DrawingTypeEnum, 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 { takeUntil, Subject, BehaviorSubject, combineLatest, map, filter, distinctUntilChanged, first } from "rxjs";
-import { ISidebarService, BuiltInUIPart, IUIPartsService, IMessageService, MenuItemType, MenuPosition, MenuGroup, getMenuHiddenObservable, KeyCode, ComponentManager, IMenuService, 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, SetRowVisibleMutation, SetRowHiddenMutation, SetColVisibleMutation, SetColHiddenMutation, SetWorksheetRowHeightMutation, SetWorksheetColWidthMutation, SetWorksheetActiveOperation, SheetInterceptorService, SetFrozenMutation, WorkbookViewPermission, WorksheetViewPermission } from "@univerjs/sheets";
+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 { 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";
 import clsx from "clsx";
@@ -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--)
@@ -152,13 +152,13 @@ let DrawingPopupMenuController = (_a = class extends RxDisposable {
           const oKey = object.oKey, drawingParam = this._drawingManagerService.getDrawingOKey(oKey);
           if (!drawingParam)
             return;
-          const { unitId: unitId2, subUnitId, drawingId } = drawingParam;
+          const { unitId: unitId2, subUnitId, drawingId, drawingType } = drawingParam;
           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,
@@ -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,40 +686,18 @@ 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,
     type: MenuItemType.SUBITEMS,
-    positions: [MenuPosition.TOOLBAR_START],
-    group: MenuGroup.TOOLBAR_FORMULAS_INSERT,
     icon: IMAGE_UPLOAD_ICON,
     tooltip: "sheetImage.title",
     hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
@@ -759,16 +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
-      }
-    },
-    positions: [IMAGE_MENU_ID],
+    type: MenuItemType.BUTTON,
     hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SHEET)
   };
 }
@@ -959,36 +900,37 @@ const MoveDrawingDownShortcutItem = {
   preconditions: whenSheetDrawingFocused,
   binding: KeyCode.DELETE,
   mac: KeyCode.BACKSPACE
+}, menuSchema = {
+  [RibbonStartGroup.FORMULAS_INSERT]: {
+    [IMAGE_MENU_ID]: {
+      order: 3,
+      menuItemFactory: ImageMenuFactory,
+      [InsertFloatImageCommand.id]: {
+        order: 0,
+        menuItemFactory: UploadFloatImageMenuFactory
+      }
+    }
+  }
 };
 var __defProp$7 = Object.defineProperty, __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor, __decorateClass$7 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(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$7(target, key, result), result;
-}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7");
-const DefaultSheetsDrawingConfig = {};
-var _a3;
+}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a3;
 let SheetDrawingUIController = (_a3 = class extends Disposable {
-  constructor(_config, _injector, _componentManager, _menuService, _commandService, _shortcutService) {
-    super(), this._config = _config, this._injector = _injector, this._componentManager = _componentManager, this._menuService = _menuService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._init();
+  constructor(_injector, _componentManager, _menuManagerService, _commandService, _shortcutService) {
+    super(), this._injector = _injector, this._componentManager = _componentManager, this._menuManagerService = _menuManagerService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._init();
   }
   _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() {
-    const { menu = {} } = this._config;
-    [
-      ImageMenuFactory,
-      UploadFloatImageMenuFactory
-      // UploadCellImageMenuFactory,
-    ].forEach((menuFactory) => {
-      this._menuService.addMenuItem(menuFactory(this._injector), menu);
-    });
+    this._menuManagerService.mergeMenu(menuSchema);
   }
   _initCommands() {
     [
-      InsertFloatImageOperation,
-      InsertCellImageOperation,
+      InsertFloatImageCommand,
       InsertSheetDrawingCommand,
       RemoveSheetDrawingCommand,
       SetSheetDrawingCommand,
@@ -1020,11 +962,11 @@ let SheetDrawingUIController = (_a3 = class extends Disposable {
 }, __name(_a3, "SheetDrawingUIController"), _a3);
 SheetDrawingUIController = __decorateClass$7([
   OnLifecycle(LifecycleStages.Rendered, SheetDrawingUIController),
-  __decorateParam$7(1, Inject(Injector)),
-  __decorateParam$7(2, Inject(ComponentManager)),
-  __decorateParam$7(3, IMenuService),
-  __decorateParam$7(4, ICommandService),
-  __decorateParam$7(5, IShortcutService)
+  __decorateParam$7(0, Inject(Injector)),
+  __decorateParam$7(1, Inject(ComponentManager)),
+  __decorateParam$7(2, IMenuManagerService),
+  __decorateParam$7(3, ICommandService),
+  __decorateParam$7(4, IShortcutService)
 ], SheetDrawingUIController);
 var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor, __decorateClass$6 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
@@ -1047,7 +989,10 @@ const UPDATE_COMMANDS = [
   SetRowHiddenCommand.id,
   SetSpecificRowsVisibleCommand.id,
   SetSpecificColsVisibleCommand.id,
-  SetColHiddenCommand.id
+  SetColHiddenCommand.id,
+  MoveColsCommand.id,
+  MoveRowsCommand.id,
+  MoveRangeCommand.id
 ], REFRESH_MUTATIONS = [
   SetRowVisibleMutation.id,
   SetRowHiddenMutation.id,
@@ -1058,8 +1003,8 @@ const UPDATE_COMMANDS = [
 ];
 var _a4;
 let SheetDrawingTransformAffectedController = (_a4 = class extends Disposable {
-  constructor(_context, _commandService, _selectionRenderService, _skeletonManagerService, _sheetInterceptorService, _sheetDrawingService, _drawingManagerService, _univerInstanceService) {
-    super(), this._context = _context, this._commandService = _commandService, this._selectionRenderService = _selectionRenderService, this._skeletonManagerService = _skeletonManagerService, this._sheetInterceptorService = _sheetInterceptorService, this._sheetDrawingService = _sheetDrawingService, this._drawingManagerService = _drawingManagerService, this._univerInstanceService = _univerInstanceService, this._sheetInterceptorListener(), this._commandListener(), this._sheetRefreshListener();
+  constructor(_context, _renderManagerService, _commandService, _selectionRenderService, _skeletonManagerService, _sheetInterceptorService, _sheetDrawingService, _drawingManagerService, _univerInstanceService) {
+    super(), this._context = _context, this._renderManagerService = _renderManagerService, this._commandService = _commandService, this._selectionRenderService = _selectionRenderService, this._skeletonManagerService = _skeletonManagerService, this._sheetInterceptorService = _sheetInterceptorService, this._sheetDrawingService = _sheetDrawingService, this._drawingManagerService = _drawingManagerService, this._univerInstanceService = _univerInstanceService, this._sheetInterceptorListener(), this._commandListener(), this._sheetRefreshListener();
   }
   _sheetInterceptorListener() {
     this.disposeWithMe(
@@ -1072,6 +1017,8 @@ let SheetDrawingTransformAffectedController = (_a4 = class extends Disposable {
           const cId = commandInfo.id;
           if (cId === InsertRowCommand.id)
             return this._moveRowInterceptor(commandInfo.params, "insert");
+          if ([MoveColsCommand.id, MoveRowsCommand.id, MoveRangeCommand.id].includes(cId))
+            return this._moveRangeInterceptor(commandInfo.params);
           if (cId === InsertColCommand.id)
             return this._moveColInterceptor(commandInfo.params, "insert");
           if (cId === RemoveRowCommand.id)
@@ -1406,6 +1353,52 @@ let SheetDrawingTransformAffectedController = (_a4 = class extends Disposable {
     }
     return { unitId, subUnitId };
   }
+  _moveRangeInterceptor(params) {
+    var _a11, _b;
+    const { toRange, fromRange } = params, target = getSheetCommandTarget(this._univerInstanceService);
+    if (!target)
+      return { redos: [], undos: [] };
+    const { unitId, subUnitId } = target, skeleton = (_b = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService)) == null ? void 0 : _b.getCurrentSkeleton();
+    if (!skeleton)
+      return { redos: [], undos: [] };
+    const selectionRect = attachRangeWithCoord(skeleton, fromRange);
+    if (!selectionRect)
+      return { redos: [], undos: [] };
+    const { startX, endX, startY, endY } = selectionRect, drawings = this._sheetDrawingService.getDrawingData(unitId, subUnitId), containedDrawings = [];
+    Object.keys(drawings).forEach((drawingId) => {
+      const drawing = drawings[drawingId];
+      if (drawing.anchorType !== SheetDrawingAnchorType.Both)
+        return;
+      const { transform } = drawing;
+      if (!transform)
+        return;
+      const { left = 0, top = 0, width = 0, height = 0 } = transform, { drawingStartX, drawingEndX, drawingStartY, drawingEndY } = {
+        drawingStartX: left,
+        drawingEndX: left + width,
+        drawingStartY: top,
+        drawingEndY: top + height
+      };
+      startX <= drawingStartX && drawingEndX <= endX && startY <= drawingStartY && drawingEndY <= endY && containedDrawings.push(drawing);
+    });
+    const redos = [], undos = [], rowOffset = toRange.startRow - fromRange.startRow, colOffset = toRange.startColumn - fromRange.startColumn, updateDrawings = containedDrawings.map((drawing) => {
+      const oldSheetTransform = drawing.sheetTransform, sheetTransform = {
+        to: { ...oldSheetTransform.to, row: oldSheetTransform.to.row + rowOffset, column: oldSheetTransform.to.column + colOffset },
+        from: { ...oldSheetTransform.from, row: oldSheetTransform.from.row + rowOffset, column: oldSheetTransform.from.column + colOffset }
+      }, transform = drawingPositionToTransform(sheetTransform, this._selectionRenderService, this._skeletonManagerService);
+      return {
+        unitId,
+        subUnitId,
+        drawingId: drawing.drawingId,
+        transform,
+        sheetTransform
+      };
+    });
+    if (updateDrawings.length) {
+      const updateJsonOp = this._sheetDrawingService.getBatchUpdateOp(updateDrawings), { undo, redo, objects } = updateJsonOp;
+      redos.push({ id: SetDrawingApplyMutation.id, params: { unitId, subUnitId, op: redo, objects, type: DrawingApplyType.UPDATE } }), undos.push({ id: SetDrawingApplyMutation.id, params: { unitId, subUnitId, op: undo, objects, type: DrawingApplyType.UPDATE } });
+    }
+    return { redos, undos };
+  }
   _moveRowInterceptor(params, type) {
     const ids = this._getUnitIdAndSubUnitId(params, type);
     if (ids == null)
@@ -1421,7 +1414,7 @@ let SheetDrawingTransformAffectedController = (_a4 = class extends Disposable {
         newSheetTransform = param == null ? void 0 : param.newSheetTransform, newTransform = param == null ? void 0 : param.newTransform;
       } else {
         const { from, to } = sheetTransform, { row: fromRow } = from, { row: toRow } = to;
-        if (fromRow >= rowStartIndex && toRow <= rowEndIndex)
+        if (anchorType === SheetDrawingAnchorType.Both && fromRow >= rowStartIndex && toRow <= rowEndIndex)
           deleteDrawings.push({ unitId, subUnitId, drawingId });
         else {
           const param = this._shrinkRow(sheetTransform, transform, rowStartIndex, rowEndIndex, anchorType);
@@ -1462,7 +1455,7 @@ let SheetDrawingTransformAffectedController = (_a4 = class extends Disposable {
         newSheetTransform = param == null ? void 0 : param.newSheetTransform, newTransform = param == null ? void 0 : param.newTransform;
       } else {
         const { from, to } = sheetTransform, { column: fromColumn } = from, { column: toColumn } = to;
-        if (fromColumn >= colStartIndex && toColumn <= colEndIndex)
+        if (anchorType === SheetDrawingAnchorType.Both && fromColumn >= colStartIndex && toColumn <= colEndIndex)
           deleteDrawings.push({ unitId, subUnitId, drawingId });
         else {
           const param = this._shrinkCol(sheetTransform, transform, colStartIndex, colEndIndex, anchorType);
@@ -1662,7 +1655,7 @@ let SheetDrawingTransformAffectedController = (_a4 = class extends Disposable {
           const params = command.params, { unitId: showUnitId, subUnitId: showSubunitId } = params, drawingMap = this._drawingManagerService.drawingManagerData, insertDrawings = [], removeDrawings = [];
           Object.keys(drawingMap).forEach((unitId) => {
             const subUnitMap = drawingMap[unitId];
-            Object.keys(subUnitMap).forEach((subUnitId) => {
+            subUnitMap != null && Object.keys(subUnitMap).forEach((subUnitId) => {
               const drawingData = subUnitMap[subUnitId].data;
               drawingData != null && Object.keys(drawingData).forEach((drawingId) => {
                 if (unitId === showUnitId && subUnitId === showSubunitId) {
@@ -1690,7 +1683,7 @@ let SheetDrawingTransformAffectedController = (_a4 = class extends Disposable {
   _refreshDrawingTransform(unitId, subUnitId, ranges) {
     const drawingData = this._drawingManagerService.getDrawingData(unitId, subUnitId), updateDrawings = [];
     Object.keys(drawingData).forEach((drawingId) => {
-      const drawing = drawingData[drawingId], { sheetTransform, anchorType = SheetDrawingAnchorType.Position } = drawing;
+      const drawing = drawingData[drawingId], { sheetTransform, transform, anchorType = SheetDrawingAnchorType.Position } = drawing;
       if (anchorType === SheetDrawingAnchorType.None)
         return !0;
       const { from, to } = sheetTransform, { row: fromRow, column: fromColumn } = from, { row: toRow, column: toColumn } = to;
@@ -1710,9 +1703,14 @@ let SheetDrawingTransformAffectedController = (_a4 = class extends Disposable {
             endColumn: toColumn
           }
         ) || fromRow > endRow || fromColumn > endColumn) {
+          const isPositionAnchor = anchorType === SheetDrawingAnchorType.Position, newTransform = drawingPositionToTransform(sheetTransform, this._selectionRenderService, this._skeletonManagerService);
           updateDrawings.push({
             ...drawing,
-            transform: drawingPositionToTransform(sheetTransform, this._selectionRenderService, this._skeletonManagerService)
+            transform: {
+              ...newTransform,
+              width: isPositionAnchor ? transform == null ? void 0 : transform.width : newTransform == null ? void 0 : newTransform.width,
+              height: isPositionAnchor ? transform == null ? void 0 : transform.height : newTransform == null ? void 0 : newTransform.height
+            }
           });
           break;
         }
@@ -1721,13 +1719,14 @@ let SheetDrawingTransformAffectedController = (_a4 = class extends Disposable {
   }
 }, __name(_a4, "SheetDrawingTransformAffectedController"), _a4);
 SheetDrawingTransformAffectedController = __decorateClass$6([
-  __decorateParam$6(1, ICommandService),
-  __decorateParam$6(2, ISheetSelectionRenderService),
-  __decorateParam$6(3, Inject(SheetSkeletonManagerService)),
-  __decorateParam$6(4, Inject(SheetInterceptorService)),
-  __decorateParam$6(5, ISheetDrawingService),
-  __decorateParam$6(6, IDrawingManagerService),
-  __decorateParam$6(7, IUniverInstanceService)
+  __decorateParam$6(1, IRenderManagerService),
+  __decorateParam$6(2, ICommandService),
+  __decorateParam$6(3, ISheetSelectionRenderService),
+  __decorateParam$6(4, Inject(SheetSkeletonManagerService)),
+  __decorateParam$6(5, Inject(SheetInterceptorService)),
+  __decorateParam$6(6, ISheetDrawingService),
+  __decorateParam$6(7, IDrawingManagerService),
+  __decorateParam$6(8, IUniverInstanceService)
 ], SheetDrawingTransformAffectedController);
 var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor, __decorateClass$5 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
@@ -1828,8 +1827,11 @@ let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
       this._drawingManagerService.add$.subscribe((params) => {
         params.forEach((param) => {
           var _a11, _b, _c;
-          const { unitId, subUnitId, drawingId } = param, target = getSheetCommandTarget(this._univerInstanceService, { unitId, subUnitId }), floatDomParam = this._drawingManagerService.getDrawingByParam(param), skeleton = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId);
-          if (floatDomParam == null || target == null || skeleton == null)
+          const { unitId, subUnitId, drawingId } = param, target = getSheetCommandTarget(this._univerInstanceService, { unitId, subUnitId }), floatDomParam = this._drawingManagerService.getDrawingByParam(param);
+          if (!floatDomParam || !target)
+            return;
+          const skeleton = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId);
+          if (!skeleton)
             return;
           const { transform, drawingType, data } = floatDomParam;
           if (drawingType !== DrawingTypeEnum$1.DRAWING_DOM)
@@ -1852,7 +1854,7 @@ let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
             height,
             zIndex: this._drawingManagerService.getDrawingOrder(unitId, subUnitId).length - 1
           }, rect = new Rect(rectShapeKey, imageConfig);
-          scene.addObject(rect, DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(rect);
+          scene.addObject(rect, DRAWING_OBJECT_LAYER_INDEX), floatDomParam.allowTransform !== !1 && scene.attachTransformerTo(rect);
           const map2 = this._ensureMap(unitId, subUnitId), disposableCollection = new DisposableCollection(), initPosition = calcPosition(rect, renderObject.renderObject, skeleton.skeleton, target.worksheet), position$ = new BehaviorSubject(initPosition), info = {
             dispose: disposableCollection,
             rect,
@@ -1981,7 +1983,7 @@ let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
     });
     if (!target)
       throw new Error("cannot find current target!");
-    const { unitId, subUnitId } = target, { initPosition, componentKey, data } = layer, id = propId != null ? propId : generateRandomId(), sheetTransform = this._getPosition(initPosition, unitId);
+    const { unitId, subUnitId } = target, { initPosition, componentKey, data, allowTransform = !0 } = layer, id = propId != null ? propId : generateRandomId(), sheetTransform = this._getPosition(initPosition, unitId);
     if (sheetTransform == null)
       return;
     this._ensureMap(unitId, subUnitId).set(id, layer);
@@ -1998,7 +2000,8 @@ let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
         width: initPosition.endX - initPosition.startX,
         height: initPosition.endY - initPosition.startY
       },
-      data
+      data,
+      allowTransform
     };
     return this._commandService.executeCommand(InsertSheetDrawingCommand.id, {
       unitId,
@@ -2284,9 +2287,9 @@ let SheetsDrawingCopyPasteController = (_a8 = class extends Disposable {
   }
   _collect(unitId, subUnitId, range) {
     var _a11;
-    const skeletonManagetService = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService);
-    if (!skeletonManagetService) return;
-    const selectionRect = skeletonManagetService.attachRangeWithCoord(range);
+    const skeletonManagerService = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService);
+    if (!skeletonManagerService) return;
+    const selectionRect = skeletonManagerService.attachRangeWithCoord(range);
     if (!selectionRect)
       return;
     const { startX, endX, startY, endY } = selectionRect, drawings = this._sheetDrawingService.getDrawingData(unitId, subUnitId), containedDrawings = [];
@@ -2324,15 +2327,15 @@ let SheetsDrawingCopyPasteController = (_a8 = class extends Disposable {
     const { copyRange } = copyInfo;
     if (!copyRange)
       return { redos: [], undos: [] };
-    const { drawings, unitId, subUnitId } = this._copyInfo, { ranges: [vCopyRange, vPastedRange], mapFunc } = virtualizeDiscreteRanges([copyRange, pastedRange]), { row: copyRow, col: copyCol } = mapFunc(vCopyRange.startRow, vCopyRange.startColumn), { row: pasteRow, col: pasteCol } = mapFunc(vPastedRange.startRow, vPastedRange.startColumn), skeletonManagetService = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService);
-    if (!skeletonManagetService)
+    const { drawings, unitId, subUnitId } = this._copyInfo, { ranges: [vCopyRange, vPastedRange], mapFunc } = virtualizeDiscreteRanges([copyRange, pastedRange]), { row: copyRow, col: copyCol } = mapFunc(vCopyRange.startRow, vCopyRange.startColumn), { row: pasteRow, col: pasteCol } = mapFunc(vPastedRange.startRow, vPastedRange.startColumn), skeletonManagerService = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService);
+    if (!skeletonManagerService)
       return { redos: [], undos: [] };
-    const copyRect = skeletonManagetService.attachRangeWithCoord({
+    const copyRect = skeletonManagerService.attachRangeWithCoord({
       startRow: copyRow,
       endRow: copyRow,
       startColumn: copyCol,
       endColumn: copyCol
-    }), pasteRect = skeletonManagetService.attachRangeWithCoord({
+    }), pasteRect = skeletonManagerService.attachRangeWithCoord({
       startRow: pasteRow,
       endRow: pasteRow,
       startColumn: pasteCol,
@@ -2403,23 +2406,35 @@ var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPrope
   return kind && result && __defProp$1(target, key, result), result;
 }, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1"), _a9;
 let SheetsDrawingRenderController = (_a9 = class extends Disposable {
-  constructor(_context, _sheetDrawingService, _drawingManagerService, _lifecycleService) {
-    super(), this._context = _context, this._sheetDrawingService = _sheetDrawingService, this._drawingManagerService = _drawingManagerService, this._lifecycleService = _lifecycleService, this._init();
+  constructor(_context, _sheetDrawingService, _drawingManagerService, _lifecycleService, _sheetSelectionRenderService, _sheetSkeletonManagerService) {
+    super(), this._context = _context, this._sheetDrawingService = _sheetDrawingService, this._drawingManagerService = _drawingManagerService, this._lifecycleService = _lifecycleService, this._sheetSelectionRenderService = _sheetSelectionRenderService, this._sheetSkeletonManagerService = _sheetSkeletonManagerService, this._init();
   }
   _init() {
     this._drawingInitializeListener();
   }
   _drawingInitializeListener() {
-    this._lifecycleService.lifecycle$.pipe(filter((e) => e === LifecycleStages.Steady), first()).subscribe(() => {
-      this._context.type === UniverInstanceType.UNIVER_SHEET && (this._sheetDrawingService.initializeNotification(this._context.unitId), this._drawingManagerService.initializeNotification(this._context.unitId));
-    });
+    if (this._context.type === UniverInstanceType.UNIVER_SHEET) {
+      this._sheetDrawingService.initializeNotification(this._context.unitId);
+      const data = this._sheetDrawingService.getDrawingDataForUnit(this._context.unitId);
+      for (const subUnit in data) {
+        const subUnitData = data[subUnit];
+        for (const drawingId in subUnitData.data) {
+          const drawingData = subUnitData.data[drawingId];
+          drawingData.transform = drawingPositionToTransform(drawingData.sheetTransform, this._sheetSelectionRenderService, this._sheetSkeletonManagerService);
+        }
+      }
+      this._drawingManagerService.registerDrawingData(this._context.unitId, this._sheetDrawingService.getDrawingDataForUnit(this._context.unitId)), this._drawingManagerService.initializeNotification(this._context.unitId);
+    }
   }
 }, __name(_a9, "SheetsDrawingRenderController"), _a9);
 SheetsDrawingRenderController = __decorateClass$1([
   __decorateParam$1(1, ISheetDrawingService),
   __decorateParam$1(2, IDrawingManagerService),
-  __decorateParam$1(3, Inject(LifecycleService))
+  __decorateParam$1(3, Inject(LifecycleService)),
+  __decorateParam$1(4, Inject(ISheetSelectionRenderService)),
+  __decorateParam$1(5, Inject(SheetSkeletonManagerService))
 ], SheetsDrawingRenderController);
+const PLUGIN_CONFIG_KEY = "sheets-drawing-ui.config", defaultPluginConfig = {};
 var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __defNormalProp2 = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, "__defNormalProp"), __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);
@@ -2428,10 +2443,10 @@ var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnProperty
 const PLUGIN_NAME = "SHEET_IMAGE_UI_PLUGIN";
 var _a10;
 let UniverSheetsDrawingUIPlugin = (_a10 = class extends Plugin {
-  constructor(config = {}, _injector, _localeService, _renderManagerService) {
-    super();
-    __publicField(this, "_pluginConfig");
-    this._injector = _injector, this._localeService = _localeService, this._renderManagerService = _renderManagerService, this._pluginConfig = Tools.deepMerge({}, DefaultSheetsDrawingConfig, config);
+  constructor(_config = defaultPluginConfig, _injector, _renderManagerService, _configService) {
+    super(), this._config = _config, this._injector = _injector, this._renderManagerService = _renderManagerService, this._configService = _configService;
+    const { menu, ...rest } = this._config;
+    menu && this._configService.setConfig("menu", menu, { merge: !0 }), this._configService.setConfig(PLUGIN_CONFIG_KEY, rest);
   }
   onStarting() {
     this._initDependencies();
@@ -2442,9 +2457,7 @@ let UniverSheetsDrawingUIPlugin = (_a10 = class extends Plugin {
   _initDependencies() {
     [
       [SheetCanvasFloatDomManagerService],
-      [SheetDrawingUIController, {
-        useFactory: /* @__PURE__ */ __name(() => this._injector.createInstance(SheetDrawingUIController, this._pluginConfig), "useFactory")
-      }],
+      [SheetDrawingUIController],
       [DrawingPopupMenuController],
       [SheetDrawingPrintingController],
       [SheetDrawingPermissionController],
@@ -2466,8 +2479,8 @@ __publicField2(UniverSheetsDrawingUIPlugin, "pluginName", PLUGIN_NAME);
 UniverSheetsDrawingUIPlugin = __decorateClass([
   DependentOn(UniverDrawingPlugin, UniverDrawingUIPlugin, UniverSheetsDrawingPlugin),
   __decorateParam(1, Inject(Injector)),
-  __decorateParam(2, Inject(LocaleService)),
-  __decorateParam(3, IRenderManagerService)
+  __decorateParam(2, IRenderManagerService),
+  __decorateParam(3, IConfigService)
 ], UniverSheetsDrawingUIPlugin);
 export {
   ClearSheetDrawingTransformerOperation,
@@ -2475,8 +2488,7 @@ export {
   EditSheetDrawingOperation,
   GroupSheetDrawingCommand,
   IMAGE_MENU_ID,
-  InsertCellImageOperation,
-  InsertFloatImageOperation,
+  InsertFloatImageCommand,
   InsertSheetDrawingCommand,
   MoveDrawingsCommand,
   RemoveSheetDrawingCommand,