@univerjs/sheets-drawing-ui 0.3.0 → 0.4.0-alpha.1

package/lib/es/index.js

@@ -2,19 +2,18 @@ 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, OnLifecycle, LifecycleStages, Inject, Injector, RxDisposable, UniverInstanceType, connectInjector, toDisposable, FOCUSING_COMMON_DRAWINGS, IContextService, Disposable, Direction, FOCUSING_FX_BAR_EDITOR, EDITOR_ACTIVATED, Rectangle, DrawingTypeEnum as DrawingTypeEnum$1, DisposableCollection, generateRandomId, Tools, UserManagerService, IPermissionService, LifecycleService, DependentOn, Plugin, IConfigService } from "@univerjs/core";
+import { CommandType, ICommandService, IUndoRedoService, LocaleService, IUniverInstanceService, useDependency, Inject, Injector, IContextService, RxDisposable, UniverInstanceType, connectInjector, toDisposable, FOCUSING_COMMON_DRAWINGS, Disposable, Direction, FOCUSING_FX_BAR_EDITOR, EDITOR_ACTIVATED, Tools, UserManagerService, IPermissionService, Rectangle, DrawingTypeEnum as DrawingTypeEnum$1, DisposableCollection, generateRandomId, DependentOn, Plugin, registerDependencies, touchDependencies, IConfigService } from "@univerjs/core";
+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 { ImageCropperObject, COMPONENT_IMAGE_POPUP_MENU, OpenImageCropOperation, ImageResetSizeOperation, DrawingCommonPanel, DrawingRenderService, UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
+import { IRenderManagerService, precisionTo, getGroupState, transformObjectOutOfGroup, RENDER_CLASS_TYPE, Rect, DRAWING_OBJECT_LAYER_INDEX, SHEET_VIEWPORT_KEY } from "@univerjs/engine-render";
 import { ISheetDrawingService, SetDrawingApplyMutation, DrawingApplyType, SheetDrawingAnchorType, UniverSheetsDrawingPlugin } from "@univerjs/sheets-drawing";
-import { IDrawingManagerService, IImageIoService, DrawingTypeEnum, ArrangeTypeEnum, DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, ImageUploadStatusType, DRAWING_IMAGE_ALLOW_SIZE, getImageSize, DRAWING_IMAGE_WIDTH_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, getDrawingShapeKeyByDrawingSearch, UniverDrawingPlugin } from "@univerjs/drawing";
-import { IRenderManagerService, precisionTo, getGroupState, transformObjectOutOfGroup, Rect, DRAWING_OBJECT_LAYER_INDEX, SHEET_VIEWPORT_KEY, RENDER_CLASS_TYPE } from "@univerjs/engine-render";
-import { SheetCanvasPopManagerService, attachRangeWithCoord, SheetSkeletonManagerService, ISheetSelectionRenderService, getCurrentRangeDisable$, SetScrollOperation, SetZoomRatioOperation, SheetPrintInterceptorService, COPY_TYPE, PREDEFINED_HOOK_NAME, virtualizeDiscreteRanges, ISheetClipboardService } from "@univerjs/sheets-ui";
-import { ISidebarService, IUIPartsService, BuiltInUIPart, 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, SheetInterceptorService, SetWorksheetActiveOperation, SetFrozenMutation, WorkbookViewPermission, WorksheetViewPermission } from "@univerjs/sheets";
+import { SheetCanvasPopManagerService, attachRangeWithCoord, ISheetSelectionRenderService, SheetSkeletonManagerService, getCurrentRangeDisable$, COPY_TYPE, PREDEFINED_HOOK_NAME, virtualizeDiscreteRanges, ISheetClipboardService, SheetPrintInterceptorService, SetScrollOperation, SetZoomRatioOperation } from "@univerjs/sheets-ui";
+import { ISidebarService, IUIPartsService, BuiltInUIPart, ILocalFileService, IMessageService, MenuItemType, getMenuHiddenObservable, RibbonStartGroup, KeyCode, ComponentManager, IMenuManagerService, IShortcutService, CanvasFloatDomService } from "@univerjs/ui";
+import { takeUntil, combineLatest, map, filter, distinctUntilChanged, Subject, BehaviorSubject } from "rxjs";
+import { getSheetCommandTarget, SheetsSelectionsService, WorkbookEditablePermission, WorksheetEditPermission, RangeProtectionPermissionEditPoint, WorkbookViewPermission, WorksheetViewPermission, 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, SheetInterceptorService, SetWorksheetActiveOperation, SetFrozenMutation } from "@univerjs/sheets";
 import React, { useEffect, forwardRef, useRef, createElement, useState } from "react";
 import { MessageType, RadioGroup, Radio } from "@univerjs/design";
-import clsx from "clsx";
-const ClearSheetDrawingTransformerOperation = {
+const PLUGIN_CONFIG_KEY = "sheets-drawing-ui.config", defaultPluginConfig = {}, ClearSheetDrawingTransformerOperation = {
   id: "sheet.operation.clear-drawing-transformer",
   type: CommandType.MUTATION,
   handler: /* @__PURE__ */ __name((accessor, params) => {
@@ -211,7 +210,6 @@ let DrawingPopupMenuController = (_a = class extends RxDisposable {
   }
 }, __name(_a, "DrawingPopupMenuController"), _a);
 DrawingPopupMenuController = __decorateClass$9([
-  OnLifecycle(LifecycleStages.Steady, DrawingPopupMenuController),
   __decorateParam$9(0, Inject(Injector)),
   __decorateParam$9(1, IDrawingManagerService),
   __decorateParam$9(2, Inject(SheetCanvasPopManagerService)),
@@ -283,6 +281,114 @@ function transformToDrawingPosition(transform, selectionRenderService) {
   };
 }
 __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 SheetsDrawingRenderController = (_a2 = class extends Disposable {
+  constructor(_context, _sheetDrawingService, _drawingManagerService, _sheetSelectionRenderService, _sheetSkeletonManagerService) {
+    super(), this._context = _context, this._sheetDrawingService = _sheetDrawingService, this._drawingManagerService = _drawingManagerService, this._sheetSelectionRenderService = _sheetSelectionRenderService, this._sheetSkeletonManagerService = _sheetSkeletonManagerService, this._init();
+  }
+  _init() {
+    this._drawingInitializeListener();
+  }
+  _drawingInitializeListener() {
+    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(_a2, "SheetsDrawingRenderController"), _a2);
+SheetsDrawingRenderController = __decorateClass$8([
+  __decorateParam$8(1, ISheetDrawingService),
+  __decorateParam$8(2, IDrawingManagerService),
+  __decorateParam$8(3, Inject(ISheetSelectionRenderService)),
+  __decorateParam$8(4, Inject(SheetSkeletonManagerService))
+], SheetsDrawingRenderController);
+var __assign = function() {
+  return __assign = Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
+    }
+    return t;
+  }, __assign.apply(this, arguments);
+}, __rest = function(s, e) {
+  var t = {};
+  for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+  if (s != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++)
+      e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+  return t;
+}, IconBase = forwardRef(function(props, ref) {
+  var icon = props.icon, id = props.id, className = props.className, extend = props.extend, restProps = __rest(props, ["icon", "id", "className", "extend"]), cls = "univerjs-icon univerjs-icon-".concat(id, " ").concat(className || "").trim(), idSuffix = useRef("_".concat(generateShortUuid()));
+  return render(icon, "".concat(id), { defIds: icon.defIds, idSuffix: idSuffix.current }, __assign({ ref, className: cls }, restProps), extend);
+});
+function render(node, id, runtimeProps, rootProps, extend) {
+  return createElement(node.tag, __assign(__assign({ key: id }, replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend)), rootProps), (replaceRuntimeIdsInDefs(node, runtimeProps).children || []).map(function(child, index) {
+    return render(child, "".concat(id, "-").concat(node.tag, "-").concat(index), runtimeProps, void 0, extend);
+  }));
+}
+__name(render, "render");
+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(_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 _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;
+}
+__name(replaceRuntimeIdsInDefs, "replaceRuntimeIdsInDefs");
+function generateShortUuid() {
+  return Math.random().toString(36).substring(2, 8);
+}
+__name(generateShortUuid, "generateShortUuid");
+IconBase.displayName = "UniverIcon";
+var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M2.2498 3.65005C2.2498 2.87685 2.87661 2.25005 3.64981 2.25005H7.9998C8.33118 2.25005 8.5998 1.98142 8.5998 1.65005C8.5998 1.31868 8.33118 1.05005 7.9998 1.05005H3.64981C2.21387 1.05005 1.0498 2.21411 1.0498 3.65005V12.35C1.0498 13.786 2.21386 14.95 3.6498 14.95H12.3498C13.7857 14.95 14.9498 13.786 14.9498 12.3501V8.00005C14.9498 7.66868 14.6812 7.40005 14.3498 7.40005C14.0184 7.40005 13.7498 7.66868 13.7498 8.00005V9.23974L12.2385 8.1063C11.7252 7.72129 11.0068 7.7723 10.5531 8.22605L9.00869 9.77041L6.73916 7.8251C6.24387 7.40055 5.5095 7.41278 5.02864 7.85359L2.2498 10.4009V3.65005ZM2.2498 12.0287V12.35C2.2498 13.1232 2.87661 13.75 3.6498 13.75H12.3498C13.123 13.75 13.7498 13.1232 13.7498 12.3501V10.7397L11.5186 9.06631C11.4829 9.03956 11.433 9.04314 11.4016 9.07458L9.92249 10.5537L11.1015 11.5642C11.3531 11.7799 11.3822 12.1587 11.1666 12.4103C10.9509 12.6619 10.5721 12.691 10.3205 12.4753L5.9582 8.7362C5.92384 8.70674 5.87288 8.70758 5.83952 8.73816L2.2498 12.0287Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M11.8097 1.14783C12.1411 1.14783 12.4097 1.41646 12.4097 1.74783V3.297H14.1541C14.4855 3.297 14.7541 3.56563 14.7541 3.897C14.7541 4.22837 14.4855 4.497 14.1541 4.497H12.4097V6.24167C12.4097 6.57304 12.1411 6.84167 11.8097 6.84167C11.4783 6.84167 11.2097 6.57304 11.2097 6.24167V4.497H9.6603C9.32893 4.497 9.0603 4.22837 9.0603 3.897C9.0603 3.56563 9.32893 3.297 9.6603 3.297H11.2097V1.74783C11.2097 1.41646 11.4783 1.14783 11.8097 1.14783Z" } }] }, AddImageSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
+    id: "add-image-single",
+    ref,
+    icon: element
+  }));
+});
+AddImageSingle.displayName = "AddImageSingle";
+const DeleteDrawingsCommand = {
+  id: "sheet.command.delete-drawing",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor) => {
+    const commandService = accessor.get(ICommandService), drawings = accessor.get(ISheetDrawingService).getFocusDrawings();
+    if (drawings.length === 0)
+      return !1;
+    const unitId = drawings[0].unitId, newDrawings = drawings.map((drawing) => {
+      const { unitId: unitId2, subUnitId, drawingId, drawingType } = drawing;
+      return {
+        unitId: unitId2,
+        subUnitId,
+        drawingId,
+        drawingType
+      };
+    });
+    return commandService.executeCommand(RemoveSheetDrawingCommand.id, {
+      unitId,
+      drawings: newDrawings
+    });
+  }, "handler")
+};
 function ungroupToGroup(ungroupParams) {
   const newGroupParams = [];
   return ungroupParams.forEach((ungroupParam) => {
@@ -455,12 +561,12 @@ const GroupSheetDrawingCommand = {
     }), !0) : !1;
   }, "handler")
 };
-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$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$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 {
+  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"), _a3;
+let SheetDrawingUpdateController = (_a3 = class extends Disposable {
   constructor(_context, _skeletonManagerService, _commandService, _selectionRenderService, _imageIoService, _fileOpenerService, _sheetDrawingService, _drawingManagerService, _contextService, _messageService, _localeService, selectionManagerService) {
     super();
     __publicField(this, "_workbookSelections");
@@ -617,75 +723,20 @@ let SheetDrawingUpdateController = (_a2 = class extends Disposable {
       })
     );
   }
-}, __name(_a2, "SheetDrawingUpdateController"), _a2);
-SheetDrawingUpdateController = __decorateClass$8([
-  __decorateParam$8(1, Inject(SheetSkeletonManagerService)),
-  __decorateParam$8(2, ICommandService),
-  __decorateParam$8(3, ISheetSelectionRenderService),
-  __decorateParam$8(4, IImageIoService),
-  __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))
+}, __name(_a3, "SheetDrawingUpdateController"), _a3);
+SheetDrawingUpdateController = __decorateClass$7([
+  __decorateParam$7(1, Inject(SheetSkeletonManagerService)),
+  __decorateParam$7(2, ICommandService),
+  __decorateParam$7(3, ISheetSelectionRenderService),
+  __decorateParam$7(4, IImageIoService),
+  __decorateParam$7(5, ILocalFileService),
+  __decorateParam$7(6, ISheetDrawingService),
+  __decorateParam$7(7, IDrawingManagerService),
+  __decorateParam$7(8, IContextService),
+  __decorateParam$7(9, IMessageService),
+  __decorateParam$7(10, Inject(LocaleService)),
+  __decorateParam$7(11, Inject(SheetsSelectionsService))
 ], SheetDrawingUpdateController);
-var __assign = function() {
-  return __assign = Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
-    }
-    return t;
-  }, __assign.apply(this, arguments);
-}, __rest = function(s, e) {
-  var t = {};
-  for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
-  if (s != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++)
-      e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
-  return t;
-}, IconBase = forwardRef(function(props, ref) {
-  var icon = props.icon, id = props.id, className = props.className, extend = props.extend, restProps = __rest(props, ["icon", "id", "className", "extend"]), cls = "univerjs-icon univerjs-icon-".concat(id, " ").concat(className || "").trim(), idSuffix = useRef("_".concat(generateShortUuid()));
-  return render(icon, "".concat(id), { defIds: icon.defIds, idSuffix: idSuffix.current }, __assign({ ref, className: cls }, restProps), extend);
-});
-function render(node, id, runtimeProps, rootProps, extend) {
-  return createElement(node.tag, __assign(__assign({ key: id }, replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend)), rootProps), (replaceRuntimeIdsInDefs(node, runtimeProps).children || []).map(function(child, index) {
-    return render(child, "".concat(id, "-").concat(node.tag, "-").concat(index), runtimeProps, void 0, extend);
-  }));
-}
-__name(render, "render");
-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(_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 _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;
-}
-__name(replaceRuntimeIdsInDefs, "replaceRuntimeIdsInDefs");
-function generateShortUuid() {
-  return Math.random().toString(36).substring(2, 8);
-}
-__name(generateShortUuid, "generateShortUuid");
-IconBase.displayName = "UniverIcon";
-var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M2.2498 3.65005C2.2498 2.87685 2.87661 2.25005 3.64981 2.25005H7.9998C8.33118 2.25005 8.5998 1.98142 8.5998 1.65005C8.5998 1.31868 8.33118 1.05005 7.9998 1.05005H3.64981C2.21387 1.05005 1.0498 2.21411 1.0498 3.65005V12.35C1.0498 13.786 2.21386 14.95 3.6498 14.95H12.3498C13.7857 14.95 14.9498 13.786 14.9498 12.3501V8.00005C14.9498 7.66868 14.6812 7.40005 14.3498 7.40005C14.0184 7.40005 13.7498 7.66868 13.7498 8.00005V9.23974L12.2385 8.1063C11.7252 7.72129 11.0068 7.7723 10.5531 8.22605L9.00869 9.77041L6.73916 7.8251C6.24387 7.40055 5.5095 7.41278 5.02864 7.85359L2.2498 10.4009V3.65005ZM2.2498 12.0287V12.35C2.2498 13.1232 2.87661 13.75 3.6498 13.75H12.3498C13.123 13.75 13.7498 13.1232 13.7498 12.3501V10.7397L11.5186 9.06631C11.4829 9.03956 11.433 9.04314 11.4016 9.07458L9.92249 10.5537L11.1015 11.5642C11.3531 11.7799 11.3822 12.1587 11.1666 12.4103C10.9509 12.6619 10.5721 12.691 10.3205 12.4753L5.9582 8.7362C5.92384 8.70674 5.87288 8.70758 5.83952 8.73816L2.2498 12.0287Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M11.8097 1.14783C12.1411 1.14783 12.4097 1.41646 12.4097 1.74783V3.297H14.1541C14.4855 3.297 14.7541 3.56563 14.7541 3.897C14.7541 4.22837 14.4855 4.497 14.1541 4.497H12.4097V6.24167C12.4097 6.57304 12.1411 6.84167 11.8097 6.84167C11.4783 6.84167 11.2097 6.57304 11.2097 6.24167V4.497H9.6603C9.32893 4.497 9.0603 4.22837 9.0603 3.897C9.0603 3.56563 9.32893 3.297 9.6603 3.297H11.2097V1.74783C11.2097 1.41646 11.4783 1.14783 11.8097 1.14783Z" } }] }, AddImageSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
-    id: "add-image-single",
-    ref,
-    icon: element
-  }));
-});
-AddImageSingle.displayName = "AddImageSingle";
 const InsertFloatImageCommand = {
   id: "sheet.command.insert-float-image",
   type: CommandType.COMMAND,
@@ -693,6 +744,29 @@ const InsertFloatImageCommand = {
     var _a11, _b;
     return (_b = (_a11 = accessor.get(IRenderManagerService).getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a11.with(SheetDrawingUpdateController).insertFloatImage()) != null ? _b : !1;
   }, "handler")
+}, MoveDrawingsCommand = {
+  id: "sheet.command.move-drawing",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const commandService = accessor.get(ICommandService), drawingManagerService = accessor.get(ISheetDrawingService), selectionRenderService = accessor.get(ISheetSelectionRenderService), { direction } = params, drawings = drawingManagerService.getFocusDrawings();
+    if (drawings.length === 0)
+      return !1;
+    const unitId = drawings[0].unitId, newDrawings = drawings.map((drawing) => {
+      const { transform } = drawing;
+      if (transform == null)
+        return null;
+      const newTransform = { ...transform }, { left = 0, top = 0 } = transform;
+      return direction === Direction.UP ? newTransform.top = top - 1 : direction === Direction.DOWN ? newTransform.top = top + 1 : direction === Direction.LEFT ? newTransform.left = left - 1 : direction === Direction.RIGHT && (newTransform.left = left + 1), {
+        ...drawing,
+        transform: newTransform,
+        sheetTransform: transformToDrawingPosition(newTransform, selectionRenderService)
+      };
+    }).filter((drawing) => drawing != null);
+    return commandService.syncExecuteCommand(SetSheetDrawingCommand.id, {
+      unitId,
+      drawings: newDrawings
+    }) ? (commandService.syncExecuteCommand(ClearSheetDrawingTransformerOperation.id, [unitId]), !0) : !1;
+  }, "handler")
 }, IMAGE_UPLOAD_ICON = "addition-and-subtraction-single", IMAGE_MENU_ID = "sheet.menu.image";
 function ImageMenuFactory(accessor) {
   return {
@@ -730,7 +804,23 @@ const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "un
   imageCommonPanelInput,
   sheetImageMenu,
   sheetImageMenuInput
-}, SheetDrawingAnchor = /* @__PURE__ */ __name((props) => {
+};
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number") n += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+__name(r, "r");
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+__name(clsx, "clsx");
+const SheetDrawingAnchor = /* @__PURE__ */ __name((props) => {
   var _a11;
   const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), { drawings } = props, drawingParam = drawings[0];
   if (drawingParam == null)
@@ -803,50 +893,17 @@ const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "un
       focusDispose.unsubscribe();
     };
   }, []), !!(drawings != null && drawings.length) && /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanel }, /* @__PURE__ */ React.createElement(DrawingCommonPanel, { drawings }), /* @__PURE__ */ React.createElement(SheetDrawingAnchor, { drawings }));
-}, "SheetDrawingPanel"), MoveDrawingsCommand = {
-  id: "sheet.command.move-drawing",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name((accessor, params) => {
-    const commandService = accessor.get(ICommandService), drawingManagerService = accessor.get(ISheetDrawingService), selectionRenderService = accessor.get(ISheetSelectionRenderService), { direction } = params, drawings = drawingManagerService.getFocusDrawings();
-    if (drawings.length === 0)
-      return !1;
-    const unitId = drawings[0].unitId, newDrawings = drawings.map((drawing) => {
-      const { transform } = drawing;
-      if (transform == null)
-        return null;
-      const newTransform = { ...transform }, { left = 0, top = 0 } = transform;
-      return direction === Direction.UP ? newTransform.top = top - 1 : direction === Direction.DOWN ? newTransform.top = top + 1 : direction === Direction.LEFT ? newTransform.left = left - 1 : direction === Direction.RIGHT && (newTransform.left = left + 1), {
-        ...drawing,
-        transform: newTransform,
-        sheetTransform: transformToDrawingPosition(newTransform, selectionRenderService)
-      };
-    }).filter((drawing) => drawing != null);
-    return commandService.syncExecuteCommand(SetSheetDrawingCommand.id, {
-      unitId,
-      drawings: newDrawings
-    }) ? (commandService.syncExecuteCommand(ClearSheetDrawingTransformerOperation.id, [unitId]), !0) : !1;
-  }, "handler")
-}, DeleteDrawingsCommand = {
-  id: "sheet.command.delete-drawing",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name((accessor) => {
-    const commandService = accessor.get(ICommandService), drawings = accessor.get(ISheetDrawingService).getFocusDrawings();
-    if (drawings.length === 0)
-      return !1;
-    const unitId = drawings[0].unitId, newDrawings = drawings.map((drawing) => {
-      const { unitId: unitId2, subUnitId, drawingId, drawingType } = drawing;
-      return {
-        unitId: unitId2,
-        subUnitId,
-        drawingId,
-        drawingType
-      };
-    });
-    return commandService.executeCommand(RemoveSheetDrawingCommand.id, {
-      unitId,
-      drawings: newDrawings
-    });
-  }, "handler")
+}, "SheetDrawingPanel"), menuSchema = {
+  [RibbonStartGroup.FORMULAS_INSERT]: {
+    [IMAGE_MENU_ID]: {
+      order: 3,
+      menuItemFactory: ImageMenuFactory,
+      [InsertFloatImageCommand.id]: {
+        order: 0,
+        menuItemFactory: UploadFloatImageMenuFactory
+      }
+    }
+  }
 };
 function whenSheetDrawingFocused(contextService) {
   return !contextService.getContextValue(FOCUSING_FX_BAR_EDITOR) && !contextService.getContextValue(EDITOR_ACTIVATED) && contextService.getContextValue(FOCUSING_COMMON_DRAWINGS);
@@ -900,26 +957,15 @@ 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--)
+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$7(target, key, result), result;
-}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a3;
-let SheetDrawingUIController = (_a3 = class extends Disposable {
-  constructor(_injector, _componentManager, _menuManagerService, _commandService, _shortcutService) {
-    super(), this._injector = _injector, this._componentManager = _componentManager, this._menuManagerService = _menuManagerService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._init();
+  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"), _a4;
+let SheetDrawingUIController = (_a4 = class extends Disposable {
+  constructor(_componentManager, _menuManagerService, _commandService, _shortcutService) {
+    super(), this._componentManager = _componentManager, this._menuManagerService = _menuManagerService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._init();
   }
   _initCustomComponents() {
     const componentManager = this._componentManager;
@@ -959,22 +1005,370 @@ let SheetDrawingUIController = (_a3 = class extends Disposable {
   _init() {
     this._initCommands(), this._initCustomComponents(), this._initMenus(), this._initShortcuts();
   }
-}, __name(_a3, "SheetDrawingUIController"), _a3);
-SheetDrawingUIController = __decorateClass$7([
-  OnLifecycle(LifecycleStages.Rendered, SheetDrawingUIController),
-  __decorateParam$7(0, Inject(Injector)),
-  __decorateParam$7(1, Inject(ComponentManager)),
-  __decorateParam$7(2, IMenuManagerService),
-  __decorateParam$7(3, ICommandService),
-  __decorateParam$7(4, IShortcutService)
+}, __name(_a4, "SheetDrawingUIController"), _a4);
+SheetDrawingUIController = __decorateClass$6([
+  __decorateParam$6(0, Inject(ComponentManager)),
+  __decorateParam$6(1, IMenuManagerService),
+  __decorateParam$6(2, ICommandService),
+  __decorateParam$6(3, 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--)
+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$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,
+  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"), _a5;
+let SheetsDrawingCopyPasteController = (_a5 = class extends Disposable {
+  constructor(_sheetClipboardService, _renderManagerService, _sheetDrawingService) {
+    super();
+    __publicField(this, "_copyInfo");
+    this._sheetClipboardService = _sheetClipboardService, this._renderManagerService = _renderManagerService, this._sheetDrawingService = _sheetDrawingService, this._initCopyPaste();
+  }
+  _initCopyPaste() {
+    this._sheetClipboardService.addClipboardHook({
+      id: "SHEET_IMAGE_UI_PLUGIN",
+      onBeforeCopy: /* @__PURE__ */ __name((unitId, subUnitId, range) => this._collect(unitId, subUnitId, range), "onBeforeCopy"),
+      onPasteCells: /* @__PURE__ */ __name((pasteFrom, pasteTo, data, payload) => {
+        const { copyType = COPY_TYPE.COPY, pasteType } = payload, { range: copyRange } = pasteFrom || {}, { range: pastedRange, unitId, subUnitId } = pasteTo;
+        return this._generateMutations(pastedRange, { copyType, pasteType, copyRange, unitId, subUnitId });
+      }, "onPasteCells"),
+      onPastePlainText: /* @__PURE__ */ __name((pasteTo, clipText) => ({ undos: [], redos: [] }), "onPastePlainText")
+    });
+  }
+  _collect(unitId, subUnitId, range) {
+    var _a11;
+    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 = [];
+    Object.keys(drawings).forEach((drawingId) => {
+      const drawing = drawings[drawingId], { transform } = drawing;
+      if (drawing.anchorType !== SheetDrawingAnchorType.Both || !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);
+    }), containedDrawings.length && (this._copyInfo = {
+      drawings: containedDrawings,
+      unitId,
+      subUnitId
+    });
+  }
+  // eslint-disable-next-line max-lines-per-function
+  _generateMutations(pastedRange, copyInfo) {
+    var _a11;
+    if (!this._copyInfo)
+      return { redos: [], undos: [] };
+    if ([
+      PREDEFINED_HOOK_NAME.SPECIAL_PASTE_COL_WIDTH,
+      PREDEFINED_HOOK_NAME.SPECIAL_PASTE_VALUE,
+      PREDEFINED_HOOK_NAME.SPECIAL_PASTE_FORMAT,
+      PREDEFINED_HOOK_NAME.SPECIAL_PASTE_FORMULA
+    ].includes(
+      copyInfo.pasteType
+    ))
+      return { redos: [], undos: [] };
+    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), skeletonManagerService = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService);
+    if (!skeletonManagerService)
+      return { redos: [], undos: [] };
+    const copyRect = skeletonManagerService.attachRangeWithCoord({
+      startRow: copyRow,
+      endRow: copyRow,
+      startColumn: copyCol,
+      endColumn: copyCol
+    }), pasteRect = skeletonManagerService.attachRangeWithCoord({
+      startRow: pasteRow,
+      endRow: pasteRow,
+      startColumn: pasteCol,
+      endColumn: pasteCol
+    });
+    if (!copyRect || !pasteRect)
+      return { redos: [], undos: [] };
+    const redos = [], undos = [], leftOffset = pasteRect.startX - copyRect.startX, topOffset = pasteRect.startY - copyRect.startY, rowOffset = pasteRow - copyRow, columnOffset = pasteCol - copyCol, isCut = copyInfo.copyType === COPY_TYPE.CUT, { _sheetDrawingService } = this;
+    return drawings.forEach((drawing) => {
+      const { transform, sheetTransform } = drawing;
+      if (!transform)
+        return;
+      const drawingObject = {
+        ...drawing,
+        unitId,
+        subUnitId,
+        drawingId: isCut ? drawing.drawingId : Tools.generateRandomId(),
+        transform: {
+          ...transform,
+          left: transform.left + leftOffset,
+          top: transform.top + topOffset
+        },
+        sheetTransform: {
+          to: { ...sheetTransform.to, row: sheetTransform.to.row + rowOffset, column: sheetTransform.to.column + columnOffset },
+          from: { ...sheetTransform.from, row: sheetTransform.from.row + rowOffset, column: sheetTransform.from.column + columnOffset }
+        }
+      };
+      if (isCut) {
+        const { undo, redo, objects } = _sheetDrawingService.getBatchUpdateOp([drawingObject]);
+        redos.push({
+          id: SetDrawingApplyMutation.id,
+          params: {
+            unitId,
+            subUnitId,
+            type: DrawingApplyType.UPDATE,
+            op: redo,
+            objects
+          }
+        }), undos.push({
+          id: SetDrawingApplyMutation.id,
+          params: {
+            unitId,
+            subUnitId,
+            type: DrawingApplyType.UPDATE,
+            op: undo,
+            objects
+          }
+        });
+      } else {
+        const { undo, redo, objects } = _sheetDrawingService.getBatchAddOp([drawingObject]);
+        redos.push({ id: SetDrawingApplyMutation.id, params: { op: redo, unitId, subUnitId, objects, type: DrawingApplyType.INSERT } }), undos.push({ id: SetDrawingApplyMutation.id, params: { op: undo, unitId, subUnitId, objects, type: DrawingApplyType.REMOVE } });
+      }
+    }), {
+      redos,
+      undos
+    };
+  }
+}, __name(_a5, "SheetsDrawingCopyPasteController"), _a5);
+SheetsDrawingCopyPasteController = __decorateClass$5([
+  __decorateParam$5(0, ISheetClipboardService),
+  __decorateParam$5(1, IRenderManagerService),
+  __decorateParam$5(2, ISheetDrawingService)
+], SheetsDrawingCopyPasteController);
+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$4(target, key, result), result;
+}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4"), _a6;
+let SheetDrawingPermissionController = (_a6 = 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();
+  }
+  _initDrawingVisible() {
+    const workbook$ = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET);
+    this.disposeWithMe(
+      combineLatest([workbook$, this._userManagerService.currentUser$]).subscribe(([workbook, _]) => {
+        if (!workbook) {
+          this._drawingManagerService.setDrawingVisible(!1);
+          return;
+        }
+        workbook.activeSheet$.subscribe((sheet) => {
+          if (!sheet) {
+            this._drawingManagerService.setDrawingVisible(!1);
+            return;
+          }
+          const unitId = workbook.getUnitId(), subUnitId = sheet.getSheetId();
+          if (this._permissionService.composePermission([new WorkbookViewPermission(unitId).id, new WorksheetViewPermission(unitId, subUnitId).id]).every((permission) => permission.value))
+            this._drawingManagerService.setDrawingVisible(!0);
+          else {
+            this._drawingManagerService.setDrawingVisible(!1);
+            const unitId2 = workbook.getUnitId(), subUnitId2 = sheet.getSheetId(), drawingData = this._drawingManagerService.getDrawingData(unitId2, subUnitId2), drawingDataValues = Object.values(drawingData), renderObject = this._renderManagerService.getRenderById(unitId2), scene = renderObject == null ? void 0 : renderObject.scene;
+            if (scene == null)
+              return;
+            scene.getAllObjectsByOrder().forEach((object) => {
+              object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.removeObject(object);
+            });
+          }
+        });
+      })
+    );
+  }
+  _initDrawingEditable() {
+    const workbook$ = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET);
+    this.disposeWithMe(
+      combineLatest([workbook$, this._userManagerService.currentUser$]).subscribe(([workbook, _]) => {
+        if (!workbook) {
+          this._drawingManagerService.setDrawingEditable(!1);
+          return;
+        }
+        workbook.activeSheet$.subscribe((sheet) => {
+          if (!sheet) {
+            this._drawingManagerService.setDrawingEditable(!1);
+            return;
+          }
+          const unitId = workbook.getUnitId(), subUnitId = sheet.getSheetId();
+          if (this._permissionService.composePermission([new WorkbookEditablePermission(unitId).id, new WorksheetEditPermission(unitId, subUnitId).id]).every((permission) => permission.value))
+            this._drawingManagerService.setDrawingEditable(!0);
+          else {
+            this._drawingManagerService.setDrawingEditable(!1);
+            const unitId2 = workbook.getUnitId(), subUnitId2 = sheet.getSheetId(), drawingData = this._drawingManagerService.getDrawingData(unitId2, subUnitId2), drawingDataValues = Object.values(drawingData), renderObject = this._renderManagerService.getRenderById(unitId2), scene = renderObject == null ? void 0 : renderObject.scene;
+            if (scene == null)
+              return;
+            scene.getAllObjectsByOrder().forEach((object) => {
+              object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.detachTransformerFrom(object);
+            });
+          }
+        });
+      })
+    );
+  }
+  _initViewPermissionChange() {
+    const workbook$ = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET);
+    this.disposeWithMe(
+      combineLatest([workbook$, this._userManagerService.currentUser$]).subscribe(([workbook, _]) => {
+        workbook && workbook.activeSheet$.subscribe((sheet) => {
+          var _a11;
+          if (!sheet)
+            return;
+          const unitId = workbook.getUnitId(), subUnitId = sheet.getSheetId();
+          let initialViewPermission = !0;
+          const renderObject = this._renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
+          if (scene == null)
+            return;
+          const transformer = scene.getTransformerByCreate(), worksheetViewPermission$ = this._permissionService.composePermission$([new WorkbookViewPermission(unitId).id, new WorksheetViewPermission(unitId, subUnitId).id]).pipe(map((permissions) => permissions.every((item) => item.value)));
+          worksheetViewPermission$ == null || worksheetViewPermission$.pipe(
+            filter((permission) => permission !== initialViewPermission),
+            distinctUntilChanged()
+          ).subscribe({
+            next: /* @__PURE__ */ __name((permission) => {
+              initialViewPermission = permission, this._drawingManagerService.setDrawingVisible(permission);
+              const objects = scene.getAllObjectsByOrder(), drawingData = this._drawingManagerService.getDrawingData(unitId, subUnitId), drawingDataValues = Object.values(drawingData);
+              permission ? this._drawingManagerService.addNotification(drawingDataValues) : (objects.forEach((object) => {
+                object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.removeObject(object);
+              }), transformer.clearSelectedObjects());
+            }, "next")
+          }), (_a11 = this._permissionService.getPermissionPoint$(new WorksheetViewPermission(unitId, subUnitId).id)) == null || _a11.pipe(
+            filter((permission) => permission.value !== initialViewPermission),
+            distinctUntilChanged()
+          ).subscribe({
+            complete: /* @__PURE__ */ __name(() => {
+              initialViewPermission = !0, this._drawingManagerService.setDrawingVisible(!0);
+              const drawingData = this._drawingManagerService.getDrawingData(unitId, subUnitId), drawingDataValues = Object.values(drawingData);
+              this._drawingManagerService.addNotification(drawingDataValues);
+            }, "complete")
+          });
+        });
+      })
+    );
+  }
+  _initEditPermissionChange() {
+    const workbook$ = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET);
+    this.disposeWithMe(
+      combineLatest([workbook$, this._userManagerService.currentUser$]).subscribe(([workbook, _]) => {
+        workbook && workbook.activeSheet$.subscribe((sheet) => {
+          var _a11;
+          if (!sheet)
+            return;
+          const unitId = workbook.getUnitId(), subUnitId = sheet.getSheetId();
+          let initialEditPermission = !0;
+          const renderObject = this._renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
+          if (scene == null)
+            return;
+          const transformer = scene.getTransformerByCreate(), composeWorksheetEditPermission = this._permissionService.composePermission$([new WorkbookEditablePermission(unitId).id, new WorksheetEditPermission(unitId, subUnitId).id]).pipe(map((permissions) => permissions.every((item) => item.value)));
+          composeWorksheetEditPermission == null || composeWorksheetEditPermission.pipe(
+            filter((permission) => permission !== initialEditPermission),
+            distinctUntilChanged()
+          ).subscribe({
+            next: /* @__PURE__ */ __name((permission) => {
+              initialEditPermission = permission, this._drawingManagerService.setDrawingEditable(permission);
+              const objects = scene.getAllObjectsByOrder(), drawingData = this._drawingManagerService.getDrawingData(unitId, subUnitId), drawingDataValues = Object.values(drawingData);
+              permission ? (objects.forEach((object) => {
+                object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.attachTransformerTo(object);
+              }), this._drawingManagerService.addNotification(drawingDataValues)) : (objects.forEach((object) => {
+                object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.detachTransformerFrom(object);
+              }), transformer.clearSelectedObjects());
+            }, "next")
+          }), (_a11 = this._permissionService.getPermissionPoint$(new WorksheetEditPermission(unitId, subUnitId).id)) == null || _a11.pipe(
+            filter((permission) => permission.value !== initialEditPermission),
+            distinctUntilChanged()
+          ).subscribe({
+            complete: /* @__PURE__ */ __name(() => {
+              initialEditPermission = !0;
+              const unitId2 = workbook.getUnitId(), subUnitId2 = sheet.getSheetId(), drawingData = this._drawingManagerService.getDrawingData(unitId2, subUnitId2), drawingDataValues = Object.values(drawingData), renderObject2 = this._renderManagerService.getRenderById(unitId2), scene2 = renderObject2 == null ? void 0 : renderObject2.scene;
+              if (scene2 == null)
+                return;
+              this._drawingManagerService.setDrawingEditable(!0), scene2.getAllObjectsByOrder().forEach((object) => {
+                object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene2.detachTransformerFrom(object);
+              });
+            }, "complete")
+          });
+        });
+      })
+    );
+  }
+}, __name(_a6, "SheetDrawingPermissionController"), _a6);
+SheetDrawingPermissionController = __decorateClass$4([
+  __decorateParam$4(0, IDrawingManagerService),
+  __decorateParam$4(1, IRenderManagerService),
+  __decorateParam$4(2, IPermissionService),
+  __decorateParam$4(3, IUniverInstanceService),
+  __decorateParam$4(4, Inject(UserManagerService))
+], SheetDrawingPermissionController);
+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$3(target, key, result), result;
+}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a7;
+let SheetDrawingPrintingController = (_a7 = class extends Disposable {
+  constructor(_sheetPrintInterceptorService, _drawingRenderService, _drawingManagerService, _renderManagerService) {
+    super(), this._sheetPrintInterceptorService = _sheetPrintInterceptorService, this._drawingRenderService = _drawingRenderService, this._drawingManagerService = _drawingManagerService, this._renderManagerService = _renderManagerService, this._initPrinting();
+  }
+  _initPrinting() {
+    this.disposeWithMe(
+      this._sheetPrintInterceptorService.interceptor.intercept(
+        this._sheetPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_COMPONENT_COLLECT,
+        {
+          handler: /* @__PURE__ */ __name((_param, pos, next) => {
+            const { unitId, scene, subUnitId } = pos, unitData = this._drawingManagerService.getDrawingDataForUnit(unitId), subUnitData = unitData == null ? void 0 : unitData[subUnitId];
+            return subUnitData && subUnitData.order.forEach((id) => {
+              this._drawingRenderService.renderDrawing(subUnitData.data[id], scene);
+            }), next();
+          }, "handler")
+        }
+      )
+    ), this.disposeWithMe(
+      this._sheetPrintInterceptorService.interceptor.intercept(
+        this._sheetPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_RANGE,
+        {
+          handler: /* @__PURE__ */ __name((range, pos, next) => {
+            const { unitId, subUnitId } = pos, renderer = this._renderManagerService.getRenderById(unitId);
+            if (!renderer)
+              return next(range);
+            const skeleton = renderer.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId);
+            if (!skeleton)
+              return next(range);
+            const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId), subUnitData = unitData == null ? void 0 : unitData[pos.subUnitId];
+            if (!subUnitData)
+              return next(range);
+            const { scaleX, scaleY } = renderer.scene, newRange = range ? { ...range } : { startColumn: 0, endColumn: 0, endRow: 0, startRow: 0 }, data = subUnitData.order.map((key) => subUnitData.data[key]).filter((item) => item.drawingType !== DrawingTypeEnum.DRAWING_DOM);
+            return data.length ? (data.forEach((param) => {
+              if (!param.groupId && param.transform && Tools.isDefine(param.transform.left) && Tools.isDefine(param.transform.top) && Tools.isDefine(param.transform.width) && Tools.isDefine(param.transform.height)) {
+                const start = skeleton.skeleton.getCellPositionByOffset(param.transform.left, param.transform.top, scaleX, scaleY, { x: 0, y: 0 }), end = skeleton.skeleton.getCellPositionByOffset(param.transform.left + param.transform.width, param.transform.top + param.transform.height, scaleX, scaleY, { x: 0, y: 0 });
+                start.column < newRange.startColumn && (newRange.startColumn = start.column), start.row < newRange.startRow && (newRange.startRow = start.row), newRange.endRow < end.row && (newRange.endRow = end.row), newRange.endColumn < end.column && (newRange.endColumn = end.column);
+              }
+            }), next(newRange)) : next(range);
+          }, "handler")
+        }
+      )
+    );
+  }
+}, __name(_a7, "SheetDrawingPrintingController"), _a7);
+SheetDrawingPrintingController = __decorateClass$3([
+  __decorateParam$3(0, Inject(SheetPrintInterceptorService)),
+  __decorateParam$3(1, Inject(DrawingRenderService)),
+  __decorateParam$3(2, IDrawingManagerService),
+  __decorateParam$3(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--)
+    (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");
+const UPDATE_COMMANDS = [
+  InsertRowCommand.id,
   InsertColCommand.id,
   RemoveRowCommand.id,
   RemoveColCommand.id,
@@ -1001,8 +1395,8 @@ const UPDATE_COMMANDS = [
   SetWorksheetRowHeightMutation.id,
   SetWorksheetColWidthMutation.id
 ];
-var _a4;
-let SheetDrawingTransformAffectedController = (_a4 = class extends Disposable {
+var _a8;
+let SheetDrawingTransformAffectedController = (_a8 = class extends Disposable {
   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();
   }
@@ -1717,22 +2111,22 @@ 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$6([
-  __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)
+}, __name(_a8, "SheetDrawingTransformAffectedController"), _a8);
+SheetDrawingTransformAffectedController = __decorateClass$2([
+  __decorateParam$2(1, IRenderManagerService),
+  __decorateParam$2(2, ICommandService),
+  __decorateParam$2(3, ISheetSelectionRenderService),
+  __decorateParam$2(4, Inject(SheetSkeletonManagerService)),
+  __decorateParam$2(5, Inject(SheetInterceptorService)),
+  __decorateParam$2(6, ISheetDrawingService),
+  __decorateParam$2(7, IDrawingManagerService),
+  __decorateParam$2(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--)
+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$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$1(target, key, result), result;
+}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1");
 function transformBound2DOMBound(originBound, scene, skeleton, worksheet) {
   const { scaleX, scaleY } = scene.getAncestorScale(), viewMain = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN), absolute = {
     left: !0,
@@ -1786,8 +2180,8 @@ const calcPosition = /* @__PURE__ */ __name((targetObject, currentRender, skelet
     absolute: offsetBound.absolute
   };
 }, "calcPosition");
-var _a5;
-let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
+var _a9;
+let SheetCanvasFloatDomManagerService = (_a9 = class extends Disposable {
   constructor(_renderManagerService, _univerInstanceService, _commandService, _drawingManagerService, _canvasFloatDomService, _sheetDrawingService) {
     super();
     __publicField(this, "_domLayerMap", /* @__PURE__ */ new Map());
@@ -1953,488 +2347,99 @@ let SheetCanvasFloatDomManagerService = (_a5 = class extends Disposable {
     };
   }
   _featureUpdateListener() {
-    this.disposeWithMe(
-      this._drawingManagerService.update$.subscribe((params) => {
-        params.forEach((data) => {
-          const sheetDrawing = this._drawingManagerService.getDrawingByParam(data);
-          if (!sheetDrawing || sheetDrawing.drawingType !== DrawingTypeEnum$1.DRAWING_DOM)
-            return;
-          const newValue = {
-            ...sheetDrawing.transform
-          };
-          this._transformChange$.next({ id: data.drawingId, value: newValue });
-        });
-      })
-    );
-  }
-  _deleteListener() {
-    this.disposeWithMe(
-      this._drawingManagerService.remove$.subscribe((params) => {
-        params.forEach((param) => {
-          this._removeDom(param.drawingId);
-        });
-      })
-    );
-  }
-  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, allowTransform = !0 } = layer, id = propId != null ? propId : generateRandomId(), sheetTransform = this._getPosition(initPosition, unitId);
-    if (sheetTransform == null)
-      return;
-    this._ensureMap(unitId, subUnitId).set(id, layer);
-    const sheetDrawingParam = {
-      unitId,
-      subUnitId,
-      drawingId: id,
-      drawingType: DrawingTypeEnum$1.DRAWING_DOM,
-      componentKey,
-      sheetTransform,
-      transform: {
-        left: initPosition.startX,
-        top: initPosition.startY,
-        width: initPosition.endX - initPosition.startX,
-        height: initPosition.endY - initPosition.startY
-      },
-      data,
-      allowTransform
-    };
-    return this._commandService.executeCommand(InsertSheetDrawingCommand.id, {
-      unitId,
-      drawings: [sheetDrawingParam]
-    }), {
-      id,
-      dispose: /* @__PURE__ */ __name(() => {
-        this._removeDom(id, !0);
-      }, "dispose")
-    };
-  }
-  _removeDom(id, removeDrawing = !1) {
-    const info = this._domLayerInfoMap.get(id);
-    if (!info)
-      return;
-    const { unitId, subUnitId } = info;
-    this._domLayerInfoMap.delete(id), info.dispose.dispose();
-    const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
-    if (renderObject && renderObject.scene.removeObject(info.rect), removeDrawing) {
-      this._ensureMap(unitId, subUnitId).delete(id);
-      const param = this._drawingManagerService.getDrawingByParam({ unitId, subUnitId, drawingId: id });
-      if (!param)
-        return;
-      const jsonOp = this._sheetDrawingService.getBatchRemoveOp([param]), { redo, objects } = jsonOp;
-      this._commandService.syncExecuteCommand(SetDrawingApplyMutation.id, { unitId, subUnitId, op: redo, objects, type: DrawingApplyType.REMOVE });
-    }
-  }
-  addHook(hook) {
-    return this._hooks.push(hook), {
-      dispose: /* @__PURE__ */ __name(() => {
-        const index = this._hooks.findIndex((h) => h === hook);
-        this._hooks.splice(index, 1);
-      }, "dispose")
-    };
-  }
-}, __name(_a5, "SheetCanvasFloatDomManagerService"), _a5);
-SheetCanvasFloatDomManagerService = __decorateClass$5([
-  OnLifecycle(LifecycleStages.Starting, SheetCanvasFloatDomManagerService),
-  __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$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$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();
-  }
-  _initPrinting() {
-    this.disposeWithMe(
-      this._sheetPrintInterceptorService.interceptor.intercept(
-        this._sheetPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_COMPONENT_COLLECT,
-        {
-          handler: /* @__PURE__ */ __name((_param, pos, next) => {
-            const { unitId, scene, subUnitId } = pos, unitData = this._drawingManagerService.getDrawingDataForUnit(unitId), subUnitData = unitData == null ? void 0 : unitData[subUnitId];
-            return subUnitData && subUnitData.order.forEach((id) => {
-              this._drawingRenderService.renderDrawing(subUnitData.data[id], scene);
-            }), next();
-          }, "handler")
-        }
-      )
-    ), this.disposeWithMe(
-      this._sheetPrintInterceptorService.interceptor.intercept(
-        this._sheetPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_RANGE,
-        {
-          handler: /* @__PURE__ */ __name((range, pos, next) => {
-            const { unitId, subUnitId } = pos, renderer = this._renderManagerService.getRenderById(unitId);
-            if (!renderer)
-              return next(range);
-            const skeleton = renderer.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId);
-            if (!skeleton)
-              return next(range);
-            const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId), subUnitData = unitData == null ? void 0 : unitData[pos.subUnitId];
-            if (!subUnitData)
-              return next(range);
-            const { scaleX, scaleY } = renderer.scene, newRange = range ? { ...range } : { startColumn: 0, endColumn: 0, endRow: 0, startRow: 0 }, data = subUnitData.order.map((key) => subUnitData.data[key]).filter((item) => item.drawingType !== DrawingTypeEnum.DRAWING_DOM);
-            return data.length ? (data.forEach((param) => {
-              if (!param.groupId && param.transform && Tools.isDefine(param.transform.left) && Tools.isDefine(param.transform.top) && Tools.isDefine(param.transform.width) && Tools.isDefine(param.transform.height)) {
-                const start = skeleton.skeleton.getCellPositionByOffset(param.transform.left, param.transform.top, scaleX, scaleY, { x: 0, y: 0 }), end = skeleton.skeleton.getCellPositionByOffset(param.transform.left + param.transform.width, param.transform.top + param.transform.height, scaleX, scaleY, { x: 0, y: 0 });
-                start.column < newRange.startColumn && (newRange.startColumn = start.column), start.row < newRange.startRow && (newRange.startRow = start.row), newRange.endRow < end.row && (newRange.endRow = end.row), newRange.endColumn < end.column && (newRange.endColumn = end.column);
-              }
-            }), next(newRange)) : next(range);
-          }, "handler")
-        }
-      )
-    );
-  }
-}, __name(_a6, "SheetDrawingPrintingController"), _a6);
-SheetDrawingPrintingController = __decorateClass$4([
-  OnLifecycle(LifecycleStages.Rendered, SheetDrawingPrintingController),
-  __decorateParam$4(0, Inject(SheetPrintInterceptorService)),
-  __decorateParam$4(1, Inject(DrawingRenderService)),
-  __decorateParam$4(2, IDrawingManagerService),
-  __decorateParam$4(3, IRenderManagerService)
-], SheetDrawingPrintingController);
-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$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();
-  }
-  _initDrawingVisible() {
-    const workbook$ = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET);
-    this.disposeWithMe(
-      combineLatest([workbook$, this._userManagerService.currentUser$]).subscribe(([workbook, _]) => {
-        if (!workbook) {
-          this._drawingManagerService.setDrawingVisible(!1);
-          return;
-        }
-        workbook.activeSheet$.subscribe((sheet) => {
-          if (!sheet) {
-            this._drawingManagerService.setDrawingVisible(!1);
-            return;
-          }
-          const unitId = workbook.getUnitId(), subUnitId = sheet.getSheetId();
-          if (this._permissionService.composePermission([new WorkbookViewPermission(unitId).id, new WorksheetViewPermission(unitId, subUnitId).id]).every((permission) => permission.value))
-            this._drawingManagerService.setDrawingVisible(!0);
-          else {
-            this._drawingManagerService.setDrawingVisible(!1);
-            const unitId2 = workbook.getUnitId(), subUnitId2 = sheet.getSheetId(), drawingData = this._drawingManagerService.getDrawingData(unitId2, subUnitId2), drawingDataValues = Object.values(drawingData), renderObject = this._renderManagerService.getRenderById(unitId2), scene = renderObject == null ? void 0 : renderObject.scene;
-            if (scene == null)
-              return;
-            scene.getAllObjectsByOrder().forEach((object) => {
-              object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.removeObject(object);
-            });
-          }
-        });
-      })
-    );
-  }
-  _initDrawingEditable() {
-    const workbook$ = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET);
-    this.disposeWithMe(
-      combineLatest([workbook$, this._userManagerService.currentUser$]).subscribe(([workbook, _]) => {
-        if (!workbook) {
-          this._drawingManagerService.setDrawingEditable(!1);
-          return;
-        }
-        workbook.activeSheet$.subscribe((sheet) => {
-          if (!sheet) {
-            this._drawingManagerService.setDrawingEditable(!1);
-            return;
-          }
-          const unitId = workbook.getUnitId(), subUnitId = sheet.getSheetId();
-          if (this._permissionService.composePermission([new WorkbookEditablePermission(unitId).id, new WorksheetEditPermission(unitId, subUnitId).id]).every((permission) => permission.value))
-            this._drawingManagerService.setDrawingEditable(!0);
-          else {
-            this._drawingManagerService.setDrawingEditable(!1);
-            const unitId2 = workbook.getUnitId(), subUnitId2 = sheet.getSheetId(), drawingData = this._drawingManagerService.getDrawingData(unitId2, subUnitId2), drawingDataValues = Object.values(drawingData), renderObject = this._renderManagerService.getRenderById(unitId2), scene = renderObject == null ? void 0 : renderObject.scene;
-            if (scene == null)
-              return;
-            scene.getAllObjectsByOrder().forEach((object) => {
-              object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.detachTransformerFrom(object);
-            });
-          }
-        });
-      })
-    );
-  }
-  _initViewPermissionChange() {
-    const workbook$ = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET);
-    this.disposeWithMe(
-      combineLatest([workbook$, this._userManagerService.currentUser$]).subscribe(([workbook, _]) => {
-        workbook && workbook.activeSheet$.subscribe((sheet) => {
-          var _a11;
-          if (!sheet)
-            return;
-          const unitId = workbook.getUnitId(), subUnitId = sheet.getSheetId();
-          let initialViewPermission = !0;
-          const renderObject = this._renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-          if (scene == null)
-            return;
-          const transformer = scene.getTransformerByCreate(), worksheetViewPermission$ = this._permissionService.composePermission$([new WorkbookViewPermission(unitId).id, new WorksheetViewPermission(unitId, subUnitId).id]).pipe(map((permissions) => permissions.every((item) => item.value)));
-          worksheetViewPermission$ == null || worksheetViewPermission$.pipe(
-            filter((permission) => permission !== initialViewPermission),
-            distinctUntilChanged()
-          ).subscribe({
-            next: /* @__PURE__ */ __name((permission) => {
-              initialViewPermission = permission, this._drawingManagerService.setDrawingVisible(permission);
-              const objects = scene.getAllObjectsByOrder(), drawingData = this._drawingManagerService.getDrawingData(unitId, subUnitId), drawingDataValues = Object.values(drawingData);
-              permission ? this._drawingManagerService.addNotification(drawingDataValues) : (objects.forEach((object) => {
-                object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.removeObject(object);
-              }), transformer.clearSelectedObjects());
-            }, "next")
-          }), (_a11 = this._permissionService.getPermissionPoint$(new WorksheetViewPermission(unitId, subUnitId).id)) == null || _a11.pipe(
-            filter((permission) => permission.value !== initialViewPermission),
-            distinctUntilChanged()
-          ).subscribe({
-            complete: /* @__PURE__ */ __name(() => {
-              initialViewPermission = !0, this._drawingManagerService.setDrawingVisible(!0);
-              const drawingData = this._drawingManagerService.getDrawingData(unitId, subUnitId), drawingDataValues = Object.values(drawingData);
-              this._drawingManagerService.addNotification(drawingDataValues);
-            }, "complete")
-          });
+    this.disposeWithMe(
+      this._drawingManagerService.update$.subscribe((params) => {
+        params.forEach((data) => {
+          const sheetDrawing = this._drawingManagerService.getDrawingByParam(data);
+          if (!sheetDrawing || sheetDrawing.drawingType !== DrawingTypeEnum$1.DRAWING_DOM)
+            return;
+          const newValue = {
+            ...sheetDrawing.transform
+          };
+          this._transformChange$.next({ id: data.drawingId, value: newValue });
         });
       })
     );
   }
-  _initEditPermissionChange() {
-    const workbook$ = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET);
+  _deleteListener() {
     this.disposeWithMe(
-      combineLatest([workbook$, this._userManagerService.currentUser$]).subscribe(([workbook, _]) => {
-        workbook && workbook.activeSheet$.subscribe((sheet) => {
-          var _a11;
-          if (!sheet)
-            return;
-          const unitId = workbook.getUnitId(), subUnitId = sheet.getSheetId();
-          let initialEditPermission = !0;
-          const renderObject = this._renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-          if (scene == null)
-            return;
-          const transformer = scene.getTransformerByCreate(), composeWorksheetEditPermission = this._permissionService.composePermission$([new WorkbookEditablePermission(unitId).id, new WorksheetEditPermission(unitId, subUnitId).id]).pipe(map((permissions) => permissions.every((item) => item.value)));
-          composeWorksheetEditPermission == null || composeWorksheetEditPermission.pipe(
-            filter((permission) => permission !== initialEditPermission),
-            distinctUntilChanged()
-          ).subscribe({
-            next: /* @__PURE__ */ __name((permission) => {
-              initialEditPermission = permission, this._drawingManagerService.setDrawingEditable(permission);
-              const objects = scene.getAllObjectsByOrder(), drawingData = this._drawingManagerService.getDrawingData(unitId, subUnitId), drawingDataValues = Object.values(drawingData);
-              permission ? (objects.forEach((object) => {
-                object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.attachTransformerTo(object);
-              }), this._drawingManagerService.addNotification(drawingDataValues)) : (objects.forEach((object) => {
-                object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene.detachTransformerFrom(object);
-              }), transformer.clearSelectedObjects());
-            }, "next")
-          }), (_a11 = this._permissionService.getPermissionPoint$(new WorksheetEditPermission(unitId, subUnitId).id)) == null || _a11.pipe(
-            filter((permission) => permission.value !== initialEditPermission),
-            distinctUntilChanged()
-          ).subscribe({
-            complete: /* @__PURE__ */ __name(() => {
-              initialEditPermission = !0;
-              const unitId2 = workbook.getUnitId(), subUnitId2 = sheet.getSheetId(), drawingData = this._drawingManagerService.getDrawingData(unitId2, subUnitId2), drawingDataValues = Object.values(drawingData), renderObject2 = this._renderManagerService.getRenderById(unitId2), scene2 = renderObject2 == null ? void 0 : renderObject2.scene;
-              if (scene2 == null)
-                return;
-              this._drawingManagerService.setDrawingEditable(!0), scene2.getAllObjectsByOrder().forEach((object) => {
-                object.classType === RENDER_CLASS_TYPE.IMAGE && drawingDataValues.some((item) => object.oKey.includes(item.drawingId)) && scene2.detachTransformerFrom(object);
-              });
-            }, "complete")
-          });
+      this._drawingManagerService.remove$.subscribe((params) => {
+        params.forEach((param) => {
+          this._removeDom(param.drawingId);
         });
       })
     );
   }
-}, __name(_a7, "SheetDrawingPermissionController"), _a7);
-SheetDrawingPermissionController = __decorateClass$3([
-  OnLifecycle(LifecycleStages.Rendered, SheetDrawingPermissionController),
-  __decorateParam$3(0, IDrawingManagerService),
-  __decorateParam$3(1, IRenderManagerService),
-  __decorateParam$3(2, IPermissionService),
-  __decorateParam$3(3, IUniverInstanceService),
-  __decorateParam$3(4, Inject(UserManagerService))
-], SheetDrawingPermissionController);
-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$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();
-    __publicField(this, "_copyInfo");
-    this._sheetClipboardService = _sheetClipboardService, this._renderManagerService = _renderManagerService, this._sheetDrawingService = _sheetDrawingService, this._initCopyPaste();
-  }
-  _initCopyPaste() {
-    this._sheetClipboardService.addClipboardHook({
-      id: "SHEET_IMAGE_UI_PLUGIN",
-      onBeforeCopy: /* @__PURE__ */ __name((unitId, subUnitId, range) => this._collect(unitId, subUnitId, range), "onBeforeCopy"),
-      onPasteCells: /* @__PURE__ */ __name((pasteFrom, pasteTo, data, payload) => {
-        const { copyType = COPY_TYPE.COPY, pasteType } = payload, { range: copyRange } = pasteFrom || {}, { range: pastedRange, unitId, subUnitId } = pasteTo;
-        return this._generateMutations(pastedRange, { copyType, pasteType, copyRange, unitId, subUnitId });
-      }, "onPasteCells"),
-      onPastePlainText: /* @__PURE__ */ __name((pasteTo, clipText) => ({ undos: [], redos: [] }), "onPastePlainText")
+  addFloatDomToPosition(layer, propId) {
+    const target = getSheetCommandTarget(this._univerInstanceService, {
+      unitId: layer.unitId,
+      subUnitId: layer.subUnitId
     });
-  }
-  _collect(unitId, subUnitId, range) {
-    var _a11;
-    const skeletonManagerService = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService);
-    if (!skeletonManagerService) return;
-    const selectionRect = skeletonManagerService.attachRangeWithCoord(range);
-    if (!selectionRect)
+    if (!target)
+      throw new Error("cannot find current target!");
+    const { unitId, subUnitId } = target, { initPosition, componentKey, data, allowTransform = !0 } = layer, id = propId != null ? propId : generateRandomId(), sheetTransform = this._getPosition(initPosition, unitId);
+    if (sheetTransform == null)
       return;
-    const { startX, endX, startY, endY } = selectionRect, drawings = this._sheetDrawingService.getDrawingData(unitId, subUnitId), containedDrawings = [];
-    Object.keys(drawings).forEach((drawingId) => {
-      const drawing = drawings[drawingId], { transform } = drawing;
-      if (drawing.anchorType !== SheetDrawingAnchorType.Both || !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);
-    }), containedDrawings.length && (this._copyInfo = {
-      drawings: containedDrawings,
+    this._ensureMap(unitId, subUnitId).set(id, layer);
+    const sheetDrawingParam = {
       unitId,
-      subUnitId
-    });
-  }
-  // eslint-disable-next-line max-lines-per-function
-  _generateMutations(pastedRange, copyInfo) {
-    var _a11;
-    if (!this._copyInfo)
-      return { redos: [], undos: [] };
-    if ([
-      PREDEFINED_HOOK_NAME.SPECIAL_PASTE_COL_WIDTH,
-      PREDEFINED_HOOK_NAME.SPECIAL_PASTE_VALUE,
-      PREDEFINED_HOOK_NAME.SPECIAL_PASTE_FORMAT,
-      PREDEFINED_HOOK_NAME.SPECIAL_PASTE_FORMULA
-    ].includes(
-      copyInfo.pasteType
-    ))
-      return { redos: [], undos: [] };
-    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), skeletonManagerService = (_a11 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a11.with(SheetSkeletonManagerService);
-    if (!skeletonManagerService)
-      return { redos: [], undos: [] };
-    const copyRect = skeletonManagerService.attachRangeWithCoord({
-      startRow: copyRow,
-      endRow: copyRow,
-      startColumn: copyCol,
-      endColumn: copyCol
-    }), pasteRect = skeletonManagerService.attachRangeWithCoord({
-      startRow: pasteRow,
-      endRow: pasteRow,
-      startColumn: pasteCol,
-      endColumn: pasteCol
-    });
-    if (!copyRect || !pasteRect)
-      return { redos: [], undos: [] };
-    const redos = [], undos = [], leftOffset = pasteRect.startX - copyRect.startX, topOffset = pasteRect.startY - copyRect.startY, rowOffset = pasteRow - copyRow, columnOffset = pasteCol - copyCol, isCut = copyInfo.copyType === COPY_TYPE.CUT, { _sheetDrawingService } = this;
-    return drawings.forEach((drawing) => {
-      const { transform, sheetTransform } = drawing;
-      if (!transform)
-        return;
-      const drawingObject = {
-        ...drawing,
-        unitId,
-        subUnitId,
-        drawingId: isCut ? drawing.drawingId : Tools.generateRandomId(),
-        transform: {
-          ...transform,
-          left: transform.left + leftOffset,
-          top: transform.top + topOffset
-        },
-        sheetTransform: {
-          to: { ...sheetTransform.to, row: sheetTransform.to.row + rowOffset, column: sheetTransform.to.column + columnOffset },
-          from: { ...sheetTransform.from, row: sheetTransform.from.row + rowOffset, column: sheetTransform.from.column + columnOffset }
-        }
-      };
-      if (isCut) {
-        const { undo, redo, objects } = _sheetDrawingService.getBatchUpdateOp([drawingObject]);
-        redos.push({
-          id: SetDrawingApplyMutation.id,
-          params: {
-            unitId,
-            subUnitId,
-            type: DrawingApplyType.UPDATE,
-            op: redo,
-            objects
-          }
-        }), undos.push({
-          id: SetDrawingApplyMutation.id,
-          params: {
-            unitId,
-            subUnitId,
-            type: DrawingApplyType.UPDATE,
-            op: undo,
-            objects
-          }
-        });
-      } else {
-        const { undo, redo, objects } = _sheetDrawingService.getBatchAddOp([drawingObject]);
-        redos.push({ id: SetDrawingApplyMutation.id, params: { op: redo, unitId, subUnitId, objects, type: DrawingApplyType.INSERT } }), undos.push({ id: SetDrawingApplyMutation.id, params: { op: undo, unitId, subUnitId, objects, type: DrawingApplyType.REMOVE } });
-      }
+      subUnitId,
+      drawingId: id,
+      drawingType: DrawingTypeEnum$1.DRAWING_DOM,
+      componentKey,
+      sheetTransform,
+      transform: {
+        left: initPosition.startX,
+        top: initPosition.startY,
+        width: initPosition.endX - initPosition.startX,
+        height: initPosition.endY - initPosition.startY
+      },
+      data,
+      allowTransform
+    };
+    return this._commandService.executeCommand(InsertSheetDrawingCommand.id, {
+      unitId,
+      drawings: [sheetDrawingParam]
     }), {
-      redos,
-      undos
+      id,
+      dispose: /* @__PURE__ */ __name(() => {
+        this._removeDom(id, !0);
+      }, "dispose")
     };
   }
-}, __name(_a8, "SheetsDrawingCopyPasteController"), _a8);
-SheetsDrawingCopyPasteController = __decorateClass$2([
-  OnLifecycle(LifecycleStages.Ready, SheetsDrawingCopyPasteController),
-  __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, _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() {
-    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);
+  _removeDom(id, removeDrawing = !1) {
+    const info = this._domLayerInfoMap.get(id);
+    if (!info)
+      return;
+    const { unitId, subUnitId } = info;
+    this._domLayerInfoMap.delete(id), info.dispose.dispose();
+    const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+    if (renderObject && renderObject.scene.removeObject(info.rect), removeDrawing) {
+      this._ensureMap(unitId, subUnitId).delete(id);
+      const param = this._drawingManagerService.getDrawingByParam({ unitId, subUnitId, drawingId: id });
+      if (!param)
+        return;
+      const jsonOp = this._sheetDrawingService.getBatchRemoveOp([param]), { redo, objects } = jsonOp;
+      this._commandService.syncExecuteCommand(SetDrawingApplyMutation.id, { unitId, subUnitId, op: redo, objects, type: DrawingApplyType.REMOVE });
     }
   }
-}, __name(_a9, "SheetsDrawingRenderController"), _a9);
-SheetsDrawingRenderController = __decorateClass$1([
-  __decorateParam$1(1, ISheetDrawingService),
-  __decorateParam$1(2, IDrawingManagerService),
-  __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 = {};
+  addHook(hook) {
+    return this._hooks.push(hook), {
+      dispose: /* @__PURE__ */ __name(() => {
+        const index = this._hooks.findIndex((h) => h === hook);
+        this._hooks.splice(index, 1);
+      }, "dispose")
+    };
+  }
+}, __name(_a9, "SheetCanvasFloatDomManagerService"), _a9);
+SheetCanvasFloatDomManagerService = __decorateClass$1([
+  __decorateParam$1(0, Inject(IRenderManagerService)),
+  __decorateParam$1(1, IUniverInstanceService),
+  __decorateParam$1(2, Inject(ICommandService)),
+  __decorateParam$1(3, IDrawingManagerService),
+  __decorateParam$1(4, Inject(CanvasFloatDomService)),
+  __decorateParam$1(5, ISheetDrawingService)
+], SheetCanvasFloatDomManagerService);
 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);
@@ -2449,20 +2454,31 @@ let UniverSheetsDrawingUIPlugin = (_a10 = class extends Plugin {
     menu && this._configService.setConfig("menu", menu, { merge: !0 }), this._configService.setConfig(PLUGIN_CONFIG_KEY, rest);
   }
   onStarting() {
-    this._initDependencies();
-  }
-  onRendered() {
-    this._registerRenderModules();
-  }
-  _initDependencies() {
-    [
+    registerDependencies(this._injector, [
       [SheetCanvasFloatDomManagerService],
       [SheetDrawingUIController],
       [DrawingPopupMenuController],
       [SheetDrawingPrintingController],
       [SheetDrawingPermissionController],
       [SheetsDrawingCopyPasteController]
-    ].forEach((dependency) => this._injector.add(dependency));
+    ]), touchDependencies(this._injector, [
+      [SheetCanvasFloatDomManagerService]
+    ]);
+  }
+  onReady() {
+    touchDependencies(this._injector, [
+      [SheetsDrawingCopyPasteController]
+    ]);
+  }
+  onRendered() {
+    this._registerRenderModules(), touchDependencies(this._injector, [
+      [SheetDrawingPermissionController],
+      [SheetDrawingPrintingController],
+      [SheetDrawingUIController]
+    ]);
+  }
+  onSteady() {
+    this._injector.get(DrawingPopupMenuController);
   }
   _registerRenderModules() {
     [