@univerjs/sheets-drawing-ui 0.2.6 → 0.2.8

package/lib/es/index.js

@@ -2,13 +2,13 @@ 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_FORMULA_EDITOR, EDITOR_ACTIVATED, Rectangle, DrawingTypeEnum as DrawingTypeEnum$1, DisposableCollection, Tools, UserManagerService, IPermissionService, 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 } 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 { IRenderManagerService, getGroupState, transformObjectOutOfGroup, precisionTo, Rect, DRAWING_OBJECT_LAYER_INDEX, pxToNum, 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 } from "rxjs";
+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 React, { useEffect, forwardRef, useRef, createElement, useState } from "react";
@@ -20,8 +20,8 @@ const ClearSheetDrawingTransformerOperation = {
   handler: /* @__PURE__ */ __name((accessor, params) => {
     const renderManagerService = accessor.get(IRenderManagerService);
     return params.forEach((unitId) => {
-      var _a10, _b;
-      (_b = (_a10 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a10.scene.getTransformer()) == null || _b.debounceRefreshControls();
+      var _a11, _b;
+      (_b = (_a11 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.scene.getTransformer()) == null || _b.debounceRefreshControls();
     }), !0;
   }, "handler")
 }, RemoveSheetDrawingCommand = {
@@ -96,11 +96,11 @@ const ClearSheetDrawingTransformerOperation = {
     };
   }, [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}`)));
 }, "UploadLoading");
-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--)
+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--)
     (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"), _a;
+  return kind && result && __defProp$9(target, key, result), result;
+}, "__decorateClass$9"), __decorateParam$9 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$9"), _a;
 let DrawingPopupMenuController = (_a = class extends RxDisposable {
   constructor(_injector, _drawingManagerService, _canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService, _uiPartsService) {
     super();
@@ -128,8 +128,8 @@ let DrawingPopupMenuController = (_a = class extends RxDisposable {
     return !1;
   }
   _popupMenuListener(unitId) {
-    var _a10;
-    const scene = (_a10 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a10.scene;
+    var _a11;
+    const scene = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.scene;
     if (!scene)
       return;
     const transformer = scene.getTransformerByCreate();
@@ -210,15 +210,15 @@ let DrawingPopupMenuController = (_a = class extends RxDisposable {
     ];
   }
 }, __name(_a, "DrawingPopupMenuController"), _a);
-DrawingPopupMenuController = __decorateClass$8([
+DrawingPopupMenuController = __decorateClass$9([
   OnLifecycle(LifecycleStages.Steady, DrawingPopupMenuController),
-  __decorateParam$8(0, Inject(Injector)),
-  __decorateParam$8(1, IDrawingManagerService),
-  __decorateParam$8(2, Inject(SheetCanvasPopManagerService)),
-  __decorateParam$8(3, IRenderManagerService),
-  __decorateParam$8(4, IUniverInstanceService),
-  __decorateParam$8(5, IContextService),
-  __decorateParam$8(6, Inject(IUIPartsService))
+  __decorateParam$9(0, Inject(Injector)),
+  __decorateParam$9(1, IDrawingManagerService),
+  __decorateParam$9(2, Inject(SheetCanvasPopManagerService)),
+  __decorateParam$9(3, IRenderManagerService),
+  __decorateParam$9(4, IUniverInstanceService),
+  __decorateParam$9(5, IContextService),
+  __decorateParam$9(6, Inject(IUIPartsService))
 ], DrawingPopupMenuController);
 const InsertFloatImageOperation = {
   id: "sheet.operation.insert-float-image",
@@ -402,7 +402,7 @@ const GroupSheetDrawingCommand = {
   }, "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, startSelectionCell = sheetSkeletonManagerService.attachRangeWithCoord({
+  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,
@@ -410,7 +410,7 @@ function drawingPositionToTransform(position, selectionRenderService, sheetSkele
   });
   if (startSelectionCell == null)
     return;
-  const endSelectionCell = sheetSkeletonManagerService.attachRangeWithCoord({
+  const endSelectionCell = attachRangeWithCoord(skeleton, {
     startColumn: toColumn,
     endColumn: toColumn,
     startRow: toRow,
@@ -421,7 +421,7 @@ function drawingPositionToTransform(position, selectionRenderService, sheetSkele
   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 skeleton = sheetSkeletonManagerService.getCurrentSkeleton(), sheetWidth = skeleton.rowHeaderWidth + skeleton.columnTotalWidth, sheetHeight = skeleton.columnHeaderHeight + skeleton.rowTotalHeight;
+  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,
@@ -464,11 +464,11 @@ function transformToDrawingPosition(transform, selectionRenderService) {
   };
 }
 __name(transformToDrawingPosition, "transformToDrawingPosition");
-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--)
+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$7(target, key, result), result;
-}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a2;
+  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) {
     super();
@@ -615,7 +615,7 @@ let SheetDrawingUpdateController = (_a2 = class extends Disposable {
         if (transform == null)
           return;
         const sheetDrawing = this._sheetDrawingService.getDrawingByParam({ unitId, subUnitId, drawingId });
-        if (sheetDrawing == null)
+        if (sheetDrawing == null || sheetDrawing.unitId !== this._context.unitId)
           return;
         const sheetTransform = transformToDrawingPosition({ ...sheetDrawing.transform, ...transform }, this._selectionRenderService);
         if (sheetTransform == null)
@@ -658,7 +658,7 @@ let SheetDrawingUpdateController = (_a2 = class extends Disposable {
   _registerDrawing(params) {
     params.forEach((param) => {
       const drawingParam = this._sheetDrawingService.getDrawingByParam(param);
-      if (drawingParam == null)
+      if (drawingParam == null || drawingParam.unitId !== this._context.unitId)
         return;
       const { sheetTransform } = drawingParam;
       drawingParam.transform = drawingPositionToTransform(sheetTransform, this._selectionRenderService, this._skeletonManagerService);
@@ -667,17 +667,17 @@ let SheetDrawingUpdateController = (_a2 = class extends Disposable {
     this._drawingManagerService.registerDrawingData(unitId, this._sheetDrawingService.getDrawingDataForUnit(unitId)), this._drawingManagerService.initializeNotification(unitId);
   }
 }, __name(_a2, "SheetDrawingUpdateController"), _a2);
-SheetDrawingUpdateController = __decorateClass$7([
-  __decorateParam$7(1, Inject(SheetSkeletonManagerService)),
-  __decorateParam$7(2, ICommandService),
-  __decorateParam$7(3, ISheetSelectionRenderService),
-  __decorateParam$7(4, IImageIoService),
-  __decorateParam$7(5, ISheetDrawingService),
-  __decorateParam$7(6, IDrawingManagerService),
-  __decorateParam$7(7, IContextService),
-  __decorateParam$7(8, IMessageService),
-  __decorateParam$7(9, Inject(LocaleService)),
-  __decorateParam$7(10, Inject(SheetsSelectionsService))
+SheetDrawingUpdateController = __decorateClass$8([
+  __decorateParam$8(1, Inject(SheetSkeletonManagerService)),
+  __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))
 ], SheetDrawingUpdateController);
 var __assign = function() {
   return __assign = Object.assign || function(t) {
@@ -708,15 +708,15 @@ function replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend) {
   var attrs = __assign({}, node.attrs);
   extend != null && extend.colorChannel1 && attrs.fill === "colorChannel1" && (attrs.fill = extend.colorChannel1);
   var defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a10) {
-    var key = _a10[0], value = _a10[1];
+  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a11) {
+    var key = _a11[0], value = _a11[1];
     typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
   })), attrs;
 }
 __name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
 function replaceRuntimeIdsInDefs(node, runtimeProps) {
-  var _a10, defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a10 = node.children) === null || _a10 === void 0) && _a10.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
+  var _a11, defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a11 = node.children) === null || _a11 === void 0) && _a11.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
     return typeof child.attrs.id == "string" && defIds && defIds.indexOf(child.attrs.id) > -1 ? __assign(__assign({}, child), { attrs: __assign(__assign({}, child.attrs), { id: child.attrs.id + runtimeProps.idSuffix }) }) : child;
   }) }) : node;
 }
@@ -741,8 +741,8 @@ const uploadFileMenu = "univer-upload-file-menu", uploadFileMenuInput = "univer-
 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 _a10;
-    (_a10 = fileInputRef.current) == null || _a10.click();
+    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)
@@ -808,14 +808,14 @@ const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "un
   sheetImageMenu,
   sheetImageMenuInput
 }, SheetDrawingAnchor = /* @__PURE__ */ __name((props) => {
-  var _a10;
+  var _a11;
   const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), { drawings } = props, drawingParam = drawings[0];
   if (drawingParam == null)
     return;
   const { unitId } = drawingParam, renderObject = renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
   if (scene == null)
     return;
-  const transformer = scene.getTransformerByCreate(), [anchorShow, setAnchorShow] = useState(!0), type = (_a10 = drawingParam.anchorType) != null ? _a10 : SheetDrawingAnchorType.Position, [value, setValue] = useState(type);
+  const transformer = scene.getTransformerByCreate(), [anchorShow, setAnchorShow] = useState(!0), type = (_a11 = drawingParam.anchorType) != null ? _a11 : SheetDrawingAnchorType.Position, [value, setValue] = useState(type);
   function getUpdateParams(objects, drawingManagerService2) {
     const params = [];
     return objects.forEach((object) => {
@@ -837,13 +837,13 @@ const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "un
     const onClearControlObserver = transformer.clearControl$.subscribe((changeSelf) => {
       changeSelf === !0 && setAnchorShow(!1);
     }), onChangeStartObserver = transformer.changeStart$.subscribe((state) => {
-      var _a11;
+      var _a12;
       const { objects } = state, params = getUpdateParams(objects, drawingManagerService);
       if (params.length === 0)
         setAnchorShow(!1);
       else if (params.length >= 1) {
         setAnchorShow(!0);
-        const anchorType = ((_a11 = params[0]) == null ? void 0 : _a11.anchorType) || SheetDrawingAnchorType.Position;
+        const anchorType = ((_a12 = params[0]) == null ? void 0 : _a12.anchorType) || SheetDrawingAnchorType.Position;
         setValue(anchorType);
       }
     });
@@ -926,7 +926,7 @@ const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "un
   }, "handler")
 };
 function whenSheetDrawingFocused(contextService) {
-  return !contextService.getContextValue(FOCUSING_FORMULA_EDITOR) && !contextService.getContextValue(EDITOR_ACTIVATED) && contextService.getContextValue(FOCUSING_COMMON_DRAWINGS);
+  return !contextService.getContextValue(FOCUSING_FX_BAR_EDITOR) && !contextService.getContextValue(EDITOR_ACTIVATED) && contextService.getContextValue(FOCUSING_COMMON_DRAWINGS);
 }
 __name(whenSheetDrawingFocused, "whenSheetDrawingFocused");
 const MoveDrawingDownShortcutItem = {
@@ -978,11 +978,11 @@ const MoveDrawingDownShortcutItem = {
   binding: KeyCode.DELETE,
   mac: KeyCode.BACKSPACE
 };
-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--)
+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$6(target, key, result), result;
-}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6");
+  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;
 let SheetDrawingUIController = (_a3 = class extends Disposable {
@@ -1036,19 +1036,19 @@ let SheetDrawingUIController = (_a3 = class extends Disposable {
     this._initCommands(), this._initCustomComponents(), this._initMenus(), this._initShortcuts();
   }
 }, __name(_a3, "SheetDrawingUIController"), _a3);
-SheetDrawingUIController = __decorateClass$6([
+SheetDrawingUIController = __decorateClass$7([
   OnLifecycle(LifecycleStages.Rendered, SheetDrawingUIController),
-  __decorateParam$6(1, Inject(Injector)),
-  __decorateParam$6(2, Inject(ComponentManager)),
-  __decorateParam$6(3, IMenuService),
-  __decorateParam$6(4, ICommandService),
-  __decorateParam$6(5, IShortcutService)
+  __decorateParam$7(1, Inject(Injector)),
+  __decorateParam$7(2, Inject(ComponentManager)),
+  __decorateParam$7(3, IMenuService),
+  __decorateParam$7(4, ICommandService),
+  __decorateParam$7(5, IShortcutService)
 ], SheetDrawingUIController);
-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--)
+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--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$5(target, key, result), result;
-}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5");
+  return kind && result && __defProp$6(target, key, result), result;
+}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6");
 const UPDATE_COMMANDS = [
   InsertRowCommand.id,
   InsertColCommand.id,
@@ -1738,20 +1738,20 @@ let SheetDrawingTransformAffectedController = (_a4 = class extends Disposable {
     }), updateDrawings.length !== 0 && (this._drawingManagerService.refreshTransform(updateDrawings), this._commandService.syncExecuteCommand(ClearSheetDrawingTransformerOperation.id, [unitId]));
   }
 }, __name(_a4, "SheetDrawingTransformAffectedController"), _a4);
-SheetDrawingTransformAffectedController = __decorateClass$5([
-  __decorateParam$5(1, ICommandService),
-  __decorateParam$5(2, ISheetSelectionRenderService),
-  __decorateParam$5(3, Inject(SheetSkeletonManagerService)),
-  __decorateParam$5(4, Inject(SheetInterceptorService)),
-  __decorateParam$5(5, ISheetDrawingService),
-  __decorateParam$5(6, IDrawingManagerService),
-  __decorateParam$5(7, IUniverInstanceService)
+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)
 ], SheetDrawingTransformAffectedController);
-var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+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--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$4(target, key, result), result;
-}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4");
+  return kind && result && __defProp$5(target, key, result), result;
+}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5");
 function transformBound2DOMBound(originBound, scene, skeleton, worksheet) {
   const { scaleX, scaleY } = scene.getAncestorScale(), viewMain = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN), absolute = {
     left: !0,
@@ -1788,20 +1788,20 @@ function transformBound2DOMBound(originBound, scene, skeleton, worksheet) {
 }
 __name(transformBound2DOMBound, "transformBound2DOMBound");
 const calcPosition = /* @__PURE__ */ __name((targetObject, currentRender, skeleton, worksheet) => {
-  const { scene } = currentRender, { left, top, width, height, angle } = targetObject, bound = {
+  const { scene, engine } = currentRender, { left, top, width, height, angle } = targetObject, canvasElement = engine.getCanvasElement(), canvasClientRect = canvasElement.getBoundingClientRect(), widthOfCanvas = pxToNum(canvasElement.style.width), { top: topOffset, left: leftOffset, width: domWidth } = canvasClientRect, scaleAdjust = domWidth / widthOfCanvas, bound = {
     left,
     right: left + width,
     top,
     bottom: top + height
   }, offsetBound = transformBound2DOMBound(bound, scene, skeleton, worksheet);
   return {
-    startX: offsetBound.left,
-    endX: offsetBound.right,
-    startY: offsetBound.top,
-    endY: offsetBound.bottom,
+    startX: offsetBound.left * scaleAdjust + leftOffset,
+    endX: offsetBound.right * scaleAdjust + leftOffset,
+    startY: offsetBound.top * scaleAdjust + topOffset,
+    endY: offsetBound.bottom * scaleAdjust + topOffset,
     rotate: angle,
-    width,
-    height,
+    width: width * scaleAdjust,
+    height: height * scaleAdjust,
     absolute: offsetBound.absolute
   };
 }, "calcPosition");
@@ -1845,8 +1845,8 @@ let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
       // eslint-disable-next-line max-lines-per-function
       this._drawingManagerService.add$.subscribe((params) => {
         params.forEach((param) => {
-          var _a10, _b, _c;
-          const { unitId, subUnitId, drawingId } = param, target = getSheetCommandTarget(this._univerInstanceService, { unitId, subUnitId }), floatDomParam = this._drawingManagerService.getDrawingByParam(param), skeleton = (_a10 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a10.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId);
+          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)
             return;
           const { transform, drawingType, data } = floatDomParam;
@@ -1914,10 +1914,10 @@ let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
   }
   _scrollUpdateListener() {
     this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
-      var _a10, _b;
+      var _a11, _b;
       const updateSheet = /* @__PURE__ */ __name((unitId, subUnitId) => {
-        var _a11;
-        const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId), map2 = this._ensureMap(unitId, subUnitId), ids = Array.from(map2.keys()), target = getSheetCommandTarget(this._univerInstanceService, { unitId, subUnitId }), skeleton = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId);
+        var _a12;
+        const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId), map2 = this._ensureMap(unitId, subUnitId), ids = Array.from(map2.keys()), target = getSheetCommandTarget(this._univerInstanceService, { unitId, subUnitId }), skeleton = (_a12 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a12.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId);
         !renderObject || !target || !skeleton || ids.forEach((id) => {
           const info = this._domLayerInfoMap.get(id);
           if (info) {
@@ -1931,7 +1931,7 @@ let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
         updateSheet(unitId, sheetId);
       } else if (commandInfo.id === SetZoomRatioOperation.id) {
         const params = commandInfo.params, { unitId } = params;
-        Array.from((_b = (_a10 = this._domLayerMap.get(unitId)) == null ? void 0 : _a10.keys()) != null ? _b : []).forEach((subUnitId) => {
+        Array.from((_b = (_a11 = this._domLayerMap.get(unitId)) == null ? void 0 : _a11.keys()) != null ? _b : []).forEach((subUnitId) => {
           updateSheet(unitId, subUnitId);
         });
       } else if (commandInfo.id === SetFrozenMutation.id) {
@@ -1941,8 +1941,8 @@ let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
     }));
   }
   _getPosition(position, unitId) {
-    var _a10;
-    const { startX, endX, startY, endY } = position, selectionRenderService = (_a10 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a10.with(ISheetSelectionRenderService);
+    var _a11;
+    const { startX, endX, startY, endY } = position, selectionRenderService = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(ISheetSelectionRenderService);
     if (selectionRenderService == null)
       return;
     const start = selectionRenderService.getSelectionCellByPosition(startX, startY);
@@ -1991,14 +1991,14 @@ let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
       })
     );
   }
-  addFloatDomToPosition(layer) {
+  addFloatDomToPosition(layer, propId) {
     const target = getSheetCommandTarget(this._univerInstanceService, {
       unitId: layer.unitId,
       subUnitId: layer.subUnitId
     });
     if (!target)
       throw new Error("cannot find current target!");
-    const { unitId, subUnitId } = target, { initPosition, componentKey, data } = layer, id = Tools.generateRandomId(), sheetTransform = this._getPosition(initPosition, unitId);
+    const { unitId, subUnitId } = target, { initPosition, componentKey, data } = layer, id = propId != null ? propId : generateRandomId(), sheetTransform = this._getPosition(initPosition, unitId);
     if (sheetTransform == null)
       return;
     this._ensureMap(unitId, subUnitId).set(id, layer);
@@ -2052,20 +2052,20 @@ let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
     };
   }
 }, __name(_a5, "SheetCanvasFloatDomManagerService"), _a5);
-SheetCanvasFloatDomManagerService = __decorateClass$4([
+SheetCanvasFloatDomManagerService = __decorateClass$5([
   OnLifecycle(LifecycleStages.Starting, SheetCanvasFloatDomManagerService),
-  __decorateParam$4(0, Inject(IRenderManagerService)),
-  __decorateParam$4(1, IUniverInstanceService),
-  __decorateParam$4(2, Inject(ICommandService)),
-  __decorateParam$4(3, IDrawingManagerService),
-  __decorateParam$4(4, Inject(CanvasFloatDomService)),
-  __decorateParam$4(5, ISheetDrawingService)
+  __decorateParam$5(0, Inject(IRenderManagerService)),
+  __decorateParam$5(1, IUniverInstanceService),
+  __decorateParam$5(2, Inject(ICommandService)),
+  __decorateParam$5(3, IDrawingManagerService),
+  __decorateParam$5(4, Inject(CanvasFloatDomService)),
+  __decorateParam$5(5, ISheetDrawingService)
 ], SheetCanvasFloatDomManagerService);
-var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(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$3(target, key, result), result;
-}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a6;
+  return kind && result && __defProp$4(target, key, result), result;
+}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4"), _a6;
 let SheetDrawingPrintingController = (_a6 = class extends Disposable {
   constructor(_sheetPrintInterceptorService, _drawingRenderService, _drawingManagerService, _renderManagerService) {
     super(), this._sheetPrintInterceptorService = _sheetPrintInterceptorService, this._drawingRenderService = _drawingRenderService, this._drawingManagerService = _drawingManagerService, this._renderManagerService = _renderManagerService, this._initPrinting();
@@ -2110,18 +2110,18 @@ let SheetDrawingPrintingController = (_a6 = class extends Disposable {
     );
   }
 }, __name(_a6, "SheetDrawingPrintingController"), _a6);
-SheetDrawingPrintingController = __decorateClass$3([
+SheetDrawingPrintingController = __decorateClass$4([
   OnLifecycle(LifecycleStages.Rendered, SheetDrawingPrintingController),
-  __decorateParam$3(0, Inject(SheetPrintInterceptorService)),
-  __decorateParam$3(1, Inject(DrawingRenderService)),
-  __decorateParam$3(2, IDrawingManagerService),
-  __decorateParam$3(3, IRenderManagerService)
+  __decorateParam$4(0, Inject(SheetPrintInterceptorService)),
+  __decorateParam$4(1, Inject(DrawingRenderService)),
+  __decorateParam$4(2, IDrawingManagerService),
+  __decorateParam$4(3, IRenderManagerService)
 ], SheetDrawingPrintingController);
-var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor, __decorateClass$2 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(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$2(target, key, result), result;
-}, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$2"), _a7;
+  return kind && result && __defProp$3(target, key, result), result;
+}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a7;
 let SheetDrawingPermissionController = (_a7 = class extends Disposable {
   constructor(_drawingManagerService, _renderManagerService, _permissionService, _univerInstanceService, _userManagerService) {
     super(), this._drawingManagerService = _drawingManagerService, this._renderManagerService = _renderManagerService, this._permissionService = _permissionService, this._univerInstanceService = _univerInstanceService, this._userManagerService = _userManagerService, this._initDrawingVisible(), this._initDrawingEditable(), this._initViewPermissionChange(), this._initEditPermissionChange();
@@ -2189,7 +2189,7 @@ let SheetDrawingPermissionController = (_a7 = class extends Disposable {
     this.disposeWithMe(
       combineLatest([workbook$, this._userManagerService.currentUser$]).subscribe(([workbook, _]) => {
         workbook && workbook.activeSheet$.subscribe((sheet) => {
-          var _a10;
+          var _a11;
           if (!sheet)
             return;
           const unitId = workbook.getUnitId(), subUnitId = sheet.getSheetId();
@@ -2209,7 +2209,7 @@ let SheetDrawingPermissionController = (_a7 = class extends Disposable {
                 object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.removeObject(object);
               }), transformer.clearSelectedObjects());
             }, "next")
-          }), (_a10 = this._permissionService.getPermissionPoint$(new WorksheetViewPermission(unitId, subUnitId).id)) == null || _a10.pipe(
+          }), (_a11 = this._permissionService.getPermissionPoint$(new WorksheetViewPermission(unitId, subUnitId).id)) == null || _a11.pipe(
             filter((permission) => permission.value !== initialViewPermission),
             distinctUntilChanged()
           ).subscribe({
@@ -2228,7 +2228,7 @@ let SheetDrawingPermissionController = (_a7 = class extends Disposable {
     this.disposeWithMe(
       combineLatest([workbook$, this._userManagerService.currentUser$]).subscribe(([workbook, _]) => {
         workbook && workbook.activeSheet$.subscribe((sheet) => {
-          var _a10;
+          var _a11;
           if (!sheet)
             return;
           const unitId = workbook.getUnitId(), subUnitId = sheet.getSheetId();
@@ -2250,7 +2250,7 @@ let SheetDrawingPermissionController = (_a7 = class extends Disposable {
                 object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.detachTransformerFrom(object);
               }), transformer.clearSelectedObjects());
             }, "next")
-          }), (_a10 = this._permissionService.getPermissionPoint$(new WorksheetEditPermission(unitId, subUnitId).id)) == null || _a10.pipe(
+          }), (_a11 = this._permissionService.getPermissionPoint$(new WorksheetEditPermission(unitId, subUnitId).id)) == null || _a11.pipe(
             filter((permission) => permission.value !== initialEditPermission),
             distinctUntilChanged()
           ).subscribe({
@@ -2269,19 +2269,19 @@ let SheetDrawingPermissionController = (_a7 = class extends Disposable {
     );
   }
 }, __name(_a7, "SheetDrawingPermissionController"), _a7);
-SheetDrawingPermissionController = __decorateClass$2([
+SheetDrawingPermissionController = __decorateClass$3([
   OnLifecycle(LifecycleStages.Rendered, SheetDrawingPermissionController),
-  __decorateParam$2(0, IDrawingManagerService),
-  __decorateParam$2(1, IRenderManagerService),
-  __decorateParam$2(2, IPermissionService),
-  __decorateParam$2(3, IUniverInstanceService),
-  __decorateParam$2(4, Inject(UserManagerService))
+  __decorateParam$3(0, IDrawingManagerService),
+  __decorateParam$3(1, IRenderManagerService),
+  __decorateParam$3(2, IPermissionService),
+  __decorateParam$3(3, IUniverInstanceService),
+  __decorateParam$3(4, Inject(UserManagerService))
 ], SheetDrawingPermissionController);
-var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor, __decorateClass$2 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(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$1(target, key, result), result;
-}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1"), _a8;
+  return kind && result && __defProp$2(target, key, result), result;
+}, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$2"), _a8;
 let SheetsDrawingCopyPasteController = (_a8 = class extends Disposable {
   constructor(_sheetClipboardService, _renderManagerService, _sheetDrawingService) {
     super();
@@ -2300,8 +2300,8 @@ let SheetsDrawingCopyPasteController = (_a8 = class extends Disposable {
     });
   }
   _collect(unitId, subUnitId, range) {
-    var _a10;
-    const skeletonManagetService = (_a10 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a10.with(SheetSkeletonManagerService);
+    var _a11;
+    const skeletonManagetService = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService);
     if (!skeletonManagetService) return;
     const selectionRect = skeletonManagetService.attachRangeWithCoord(range);
     if (!selectionRect)
@@ -2326,7 +2326,7 @@ let SheetsDrawingCopyPasteController = (_a8 = class extends Disposable {
   }
   // eslint-disable-next-line max-lines-per-function
   _generateMutations(pastedRange, copyInfo) {
-    var _a10;
+    var _a11;
     if (!this._copyInfo)
       return { redos: [], undos: [] };
     if ([
@@ -2341,7 +2341,7 @@ 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 = (_a10 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a10.with(SheetSkeletonManagerService);
+    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)
       return { redos: [], undos: [] };
     const copyRect = skeletonManagetService.attachRangeWithCoord({
@@ -2408,20 +2408,42 @@ let SheetsDrawingCopyPasteController = (_a8 = class extends Disposable {
     };
   }
 }, __name(_a8, "SheetsDrawingCopyPasteController"), _a8);
-SheetsDrawingCopyPasteController = __decorateClass$1([
+SheetsDrawingCopyPasteController = __decorateClass$2([
   OnLifecycle(LifecycleStages.Ready, SheetsDrawingCopyPasteController),
-  __decorateParam$1(0, ISheetClipboardService),
-  __decorateParam$1(1, IRenderManagerService),
-  __decorateParam$1(2, ISheetDrawingService)
+  __decorateParam$2(0, ISheetClipboardService),
+  __decorateParam$2(1, IRenderManagerService),
+  __decorateParam$2(2, ISheetDrawingService)
 ], SheetsDrawingCopyPasteController);
+var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(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$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, _lifecycleService) {
+    super(), this._context = _context, this._sheetDrawingService = _sheetDrawingService, this._lifecycleService = _lifecycleService, 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);
+    });
+  }
+}, __name(_a9, "SheetsDrawingRenderController"), _a9);
+SheetsDrawingRenderController = __decorateClass$1([
+  __decorateParam$1(1, ISheetDrawingService),
+  __decorateParam$1(2, Inject(LifecycleService))
+], SheetsDrawingRenderController);
 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);
   return kind && result && __defProp2(target, key, result), result;
 }, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, typeof key != "symbol" ? key + "" : key, value), "__publicField");
 const PLUGIN_NAME = "SHEET_IMAGE_UI_PLUGIN";
-var _a9;
-let UniverSheetsDrawingUIPlugin = (_a9 = class extends Plugin {
+var _a10;
+let UniverSheetsDrawingUIPlugin = (_a10 = class extends Plugin {
   constructor(config = {}, _injector, _localeService, _renderManagerService) {
     super();
     __publicField(this, "_pluginConfig");
@@ -2441,19 +2463,20 @@ let UniverSheetsDrawingUIPlugin = (_a9 = class extends Plugin {
       }],
       [DrawingPopupMenuController],
       [SheetDrawingPrintingController],
-      [SheetDrawingPermissionController]
+      [SheetDrawingPermissionController],
+      [SheetsDrawingCopyPasteController]
     ].forEach((dependency) => this._injector.add(dependency));
   }
   _registerRenderModules() {
     [
       [SheetDrawingUpdateController],
       [SheetDrawingTransformAffectedController],
-      [SheetsDrawingCopyPasteController]
+      [SheetsDrawingRenderController]
     ].forEach((m) => {
       this.disposeWithMe(this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SHEET, m));
     });
   }
-}, __name(_a9, "UniverSheetsDrawingUIPlugin"), _a9);
+}, __name(_a10, "UniverSheetsDrawingUIPlugin"), _a10);
 __publicField2(UniverSheetsDrawingUIPlugin, "type", UniverInstanceType.UNIVER_SHEET);
 __publicField2(UniverSheetsDrawingUIPlugin, "pluginName", PLUGIN_NAME);
 UniverSheetsDrawingUIPlugin = __decorateClass([
@@ -2467,6 +2490,7 @@ export {
   DeleteDrawingsCommand,
   EditSheetDrawingOperation,
   GroupSheetDrawingCommand,
+  IMAGE_MENU_ID,
   InsertCellImageOperation,
   InsertFloatImageOperation,
   InsertSheetDrawingCommand,