@univerjs/docs-drawing-ui 0.4.1 → 0.4.2

package/lib/es/index.js

@@ -2,7 +2,7 @@ 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, IUniverInstanceService, TextX, JSONX, MemoryCursor, TextXActionType, IUndoRedoService, BuildTextUtils, Tools, Inject, LocaleService, Disposable, BooleanNumber, PositionedObjectLayoutType, WrapTextType, ObjectRelativeFromH, ObjectRelativeFromV, FOCUSING_COMMON_DRAWINGS, IContextService, UniverInstanceType, Direction, useDependency, FOCUSING_UNIVER_EDITOR, UndoCommand, RedoCommand, toDisposable, throttle, COLORS, RxDisposable, LifecycleService, fromEventSubject, LifecycleStages, DependentOn, Injector, Plugin, IConfigService } from "@univerjs/core";
+import { CommandType, ICommandService, IUniverInstanceService, TextX, JSONX, MemoryCursor, TextXActionType, IUndoRedoService, BuildTextUtils, Tools, Inject, LocaleService, Disposable, BooleanNumber, PositionedObjectLayoutType, WrapTextType, ObjectRelativeFromH, ObjectRelativeFromV, FOCUSING_COMMON_DRAWINGS, IContextService, UniverInstanceType, Direction, useDependency, DocumentFlavor, FOCUSING_UNIVER_EDITOR, UndoCommand, RedoCommand, toDisposable, throttle, COLORS, RxDisposable, LifecycleService, fromEventSubject, LifecycleStages, DependentOn, Injector, Plugin, IConfigService } from "@univerjs/core";
 import { IDocDrawingService, UniverDocsDrawingPlugin } from "@univerjs/docs-drawing";
 import { ArrangeTypeEnum, DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, ImageUploadStatusType, DRAWING_IMAGE_ALLOW_SIZE, getImageSize, DrawingTypeEnum, getDrawingShapeKeyByDrawingSearch, IImageIoService, IDrawingManagerService, DRAWING_IMAGE_WIDTH_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, UniverDrawingPlugin } from "@univerjs/drawing";
 import { DrawingCommonPanel, ImageCropperObject, COMPONENT_IMAGE_POPUP_MENU, OpenImageCropOperation, ImageResetSizeOperation, UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
@@ -10,7 +10,7 @@ import { IRenderManagerService, DocumentEditArea, Liquid, PageLayoutType, Docume
 import { IMessageService, ILocalFileService, ISidebarService, MenuItemType, getMenuHiddenObservable, RibbonStartGroup, KeyCode, ComponentManager, IMenuManagerService, IShortcutService, UniverUIPlugin } from "@univerjs/ui";
 import { RichTextEditingMutation, DocSelectionManagerService, DocSkeletonManagerService } from "@univerjs/docs";
 import { DocSelectionRenderService, getRichTextEditPath, getCustomBlockIdsInSelections, docDrawingPositionToTransform, NodePositionConvertToCursor, getOneTextSelectionRange, getAnchorBounding, TEXT_RANGE_LAYER_INDEX, getDocObject, DocCanvasPopManagerService, IEditorService, SetDocZoomRatioOperation } from "@univerjs/docs-ui";
-import { MessageType, RadioGroup, Radio, InputNumber, Select, Checkbox } from "@univerjs/design";
+import { MessageType, InputNumber, Select, Checkbox, RadioGroup, Radio } from "@univerjs/design";
 import { BehaviorSubject, Observable, takeUntil, filter, debounceTime } from "rxjs";
 import React, { forwardRef, useRef, createElement, useState, useEffect } from "react";
 const PLUGIN_CONFIG_KEY = "docs-drawing-ui.config", defaultPluginConfig = {};
@@ -97,13 +97,10 @@ const RemoveDocDrawingCommand = {
       const { startIndex } = block;
       startIndex > memoryCursor.cursor && textX.push({
         t: TextXActionType.RETAIN,
-        len: startIndex - memoryCursor.cursor,
-        segmentId: ""
+        len: startIndex - memoryCursor.cursor
       }), textX.push({
         t: TextXActionType.DELETE,
-        len: 1,
-        line: 0,
-        segmentId: ""
+        len: 1
       }), memoryCursor.moveCursorTo(startIndex + 1);
     }
     const path = getRichTextEditPath(documentDataModel, segmentId);
@@ -168,8 +165,7 @@ const RemoveDocDrawingCommand = {
     if (collapsed)
       startOffset > 0 && textX.push({
         t: TextXActionType.RETAIN,
-        len: startOffset,
-        segmentId
+        len: startOffset
       });
     else {
       const { dos } = BuildTextUtils.selection.getDeleteActions(activeTextRange, segmentId, 0, body);
@@ -193,9 +189,7 @@ const RemoveDocDrawingCommand = {
           blockId: drawing.drawingId
         }))
       },
-      len: drawings.length,
-      line: 0,
-      segmentId
+      len: drawings.length
     });
     const path = getRichTextEditPath(documentDataModel, segmentId), placeHolderAction = jsonX.editOp(textX.serialize(), path);
     rawActions.push(placeHolderAction);
@@ -371,8 +365,8 @@ let DocDrawingUpdateRenderController = (_a = class extends Disposable {
         posOffset: position.left
       },
       positionV: {
-        relativeFrom: ObjectRelativeFromV.MARGIN,
-        posOffset: position.top
+        relativeFrom: ObjectRelativeFromV.PARAGRAPH,
+        posOffset: 0
       },
       angle: 0
     };
@@ -510,8 +504,7 @@ function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPa
     if (offset = Math.min(body.dataStream.length - 2, offset), segmentId === oldSegmentId) {
       if (offset < oldOffset ? (offset > 0 && textX.push({
         t: TextXActionType.RETAIN,
-        len: offset,
-        segmentId: oldSegmentId
+        len: offset
       }), textX.push({
         t: TextXActionType.INSERT,
         body: {
@@ -521,31 +514,22 @@ function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPa
             blockId: drawingId
           }]
         },
-        len: 1,
-        line: 0,
-        segmentId: oldSegmentId
+        len: 1
       }), textX.push({
         t: TextXActionType.RETAIN,
-        len: oldOffset - offset,
-        segmentId: oldSegmentId
+        len: oldOffset - offset
       }), textX.push({
         t: TextXActionType.DELETE,
-        len: 1,
-        line: 0,
-        segmentId: ""
+        len: 1
       })) : (oldOffset > 0 && textX.push({
         t: TextXActionType.RETAIN,
-        len: oldOffset,
-        segmentId: oldSegmentId
+        len: oldOffset
       }), textX.push({
         t: TextXActionType.DELETE,
-        len: 1,
-        line: 0,
-        segmentId: ""
+        len: 1
       }), offset - oldOffset - 1 > 0 && textX.push({
         t: TextXActionType.RETAIN,
-        len: offset - oldOffset - 1,
-        segmentId: oldSegmentId
+        len: offset - oldOffset - 1
       }), textX.push({
         t: TextXActionType.INSERT,
         body: {
@@ -555,9 +539,7 @@ function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPa
             blockId: drawingId
           }]
         },
-        len: 1,
-        line: 0,
-        segmentId: oldSegmentId
+        len: 1
       })), offset !== oldOffset) {
         const path = getRichTextEditPath(documentDataModel, oldSegmentId), action = jsonX.editOp(textX.serialize(), path);
         rawActions.push(action);
@@ -565,19 +547,15 @@ function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPa
     } else {
       oldOffset > 0 && textX.push({
         t: TextXActionType.RETAIN,
-        len: oldOffset,
-        segmentId: oldSegmentId
+        len: oldOffset
       }), textX.push({
         t: TextXActionType.DELETE,
-        len: 1,
-        line: 0,
-        segmentId: ""
+        len: 1
       });
       let path = getRichTextEditPath(documentDataModel, oldSegmentId), action = jsonX.editOp(textX.serialize(), path);
       rawActions.push(action), textX.empty(), offset > 0 && textX.push({
         t: TextXActionType.RETAIN,
-        len: offset,
-        segmentId
+        len: offset
       }), textX.push({
         t: TextXActionType.INSERT,
         body: {
@@ -587,9 +565,7 @@ function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPa
             blockId: drawingId
           }]
         },
-        len: 1,
-        line: 0,
-        segmentId
+        len: 1
       }), path = getRichTextEditPath(documentDataModel, segmentId), action = jsonX.editOp(textX.serialize(), path), rawActions.push(action), docSelectionRenderManager.setSegment(segmentId), docSelectionRenderManager.setSegmentPage(segmentPage);
     }
     return rawActions;
@@ -939,22 +915,6 @@ const UpdateDocDrawingWrappingStyleCommand = {
     const drawingManagerService = accessor.get(IDrawingManagerService), commandService = accessor.get(ICommandService);
     return params == null ? !1 : (drawingManagerService.focusDrawing([params]), commandService.executeCommand(SidebarDocDrawingOperation.id, { value: "open" }), !0);
   }, "handler")
-}, imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "univer-image-common-panel-grid", imageCommonPanelBorder = "univer-image-common-panel-border", imageCommonPanelTitle = "univer-image-common-panel-title", imageCommonPanelSubtitle = "univer-image-common-panel-subtitle", imageCommonPanelRow = "univer-image-common-panel-row", imageCommonPanelRowVertical = "univer-image-common-panel-row-vertical", imageCommonPanelColumn = "univer-image-common-panel-column", imageCommonPanelColumnCenter = "univer-image-common-panel-column-center", imageCommonPanelInline = "univer-image-common-panel-inline", imageCommonPanelSpan2 = "univer-image-common-panel-span2", imageCommonPanelSpan3 = "univer-image-common-panel-span3", imageCommonPanelInput = "univer-image-common-panel-input", sheetImageMenu = "univer-sheet-image-menu", sheetImageMenuInput = "univer-sheet-image-menu-input", styles = {
-  imageCommonPanel,
-  imageCommonPanelGrid,
-  imageCommonPanelBorder,
-  imageCommonPanelTitle,
-  imageCommonPanelSubtitle,
-  imageCommonPanelRow,
-  imageCommonPanelRowVertical,
-  imageCommonPanelColumn,
-  imageCommonPanelColumnCenter,
-  imageCommonPanelInline,
-  imageCommonPanelSpan2,
-  imageCommonPanelSpan3,
-  imageCommonPanelInput,
-  sheetImageMenu,
-  sheetImageMenuInput
 };
 function r(e) {
   var t, f, n = "";
@@ -971,191 +931,27 @@ function clsx() {
   return n;
 }
 __name(clsx, "clsx");
-const MIN_MARGIN = 0, MAX_MARGIN = 100, DocDrawingTextWrap = /* @__PURE__ */ __name((props) => {
-  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), univerInstanceService = useDependency(IUniverInstanceService), { drawings } = props, drawingParam = drawings[0];
-  if (drawingParam == null)
-    return null;
-  const { unitId } = drawingParam, documentDataModel = univerInstanceService.getUniverDocInstance(unitId), renderObject = renderManagerService.getRenderById(unitId);
-  if ((renderObject == null ? void 0 : renderObject.scene) == null)
-    return null;
-  const [disableWrapText, setDisableWrapText] = useState(!0), [disableDistTB, setDisableDistTB] = useState(!0), [disableDistLR, setDisableDistLR] = useState(!0), [wrappingStyle, setWrappingStyle] = useState(TextWrappingStyle.INLINE), [wrapText, setWrapText] = useState(""), [distToText, setDistToText] = useState({
-    distT: 0,
-    distL: 0,
-    distB: 0,
-    distR: 0
-  }), [showPanel, setShowPanel] = useState(!0);
-  function handleWrappingStyleChange(value) {
-    setWrappingStyle(value);
-    const focusDrawings = drawingManagerService.getFocusDrawings();
-    if (focusDrawings.length === 0)
-      return;
-    const { unitId: unitId2, subUnitId } = focusDrawings[0], drawings2 = focusDrawings.map(({ unitId: unitId3, subUnitId: subUnitId2, drawingId }) => ({
-      unitId: unitId3,
-      subUnitId: subUnitId2,
-      drawingId
-    }));
-    commandService.executeCommand(UpdateDocDrawingWrappingStyleCommand.id, {
-      unitId: unitId2,
-      subUnitId,
-      drawings: drawings2,
-      wrappingStyle: value
-    });
-  }
-  __name(handleWrappingStyleChange, "handleWrappingStyleChange");
-  function handleWrapTextChange(value) {
-    setWrapText(value);
-    const focusDrawings = drawingManagerService.getFocusDrawings();
-    if (focusDrawings.length === 0)
-      return;
-    const drawings2 = focusDrawings.map((drawing) => ({
-      unitId: drawing.unitId,
-      subUnitId: drawing.subUnitId,
-      drawingId: drawing.drawingId
-    }));
-    commandService.executeCommand(UpdateDocDrawingWrapTextCommand.id, {
-      unitId: focusDrawings[0].unitId,
-      subUnitId: focusDrawings[0].unitId,
-      drawings: drawings2,
-      wrapText: value
-    });
-  }
-  __name(handleWrapTextChange, "handleWrapTextChange");
-  function handleDistToTextChange(value, direction) {
-    if (value == null)
-      return;
-    const newDistToText = { ...distToText, [direction]: value };
-    setDistToText(newDistToText);
-    const focusDrawings = drawingManagerService.getFocusDrawings();
-    if (focusDrawings.length === 0)
-      return;
-    const drawings2 = focusDrawings.map((drawing) => ({
-      unitId: drawing.unitId,
-      subUnitId: drawing.subUnitId,
-      drawingId: drawing.drawingId
-    }));
-    commandService.executeCommand(UpdateDocDrawingDistanceCommand.id, {
-      unitId: focusDrawings[0].unitId,
-      subUnitId: focusDrawings[0].unitId,
-      drawings: drawings2,
-      dist: {
-        [direction]: value
-      }
-    });
-  }
-  __name(handleDistToTextChange, "handleDistToTextChange");
-  function updateFocusDrawingState() {
-    const focusDrawings = drawingManagerService.getFocusDrawings();
-    focusDrawings.length !== 0 && updateState(focusDrawings[0]);
-  }
-  __name(updateFocusDrawingState, "updateFocusDrawingState");
-  function updateState(drawingParam2) {
-    var _a8, _b;
-    const drawing = (_b = (_a8 = documentDataModel == null ? void 0 : documentDataModel.getSnapshot()) == null ? void 0 : _a8.drawings) == null ? void 0 : _b[drawingParam2.drawingId];
-    if (drawing == null)
-      return;
-    const {
-      distT = 0,
-      distL = 0,
-      distB = 0,
-      distR = 0,
-      layoutType = PositionedObjectLayoutType.INLINE,
-      behindDoc = BooleanNumber.FALSE,
-      wrapText: wrapText2 = WrapTextType.BOTH_SIDES
-    } = drawing;
-    if (setDistToText({
-      distT,
-      distL,
-      distB,
-      distR
-    }), setWrapText(wrapText2), setDisableWrapText(layoutType !== PositionedObjectLayoutType.WRAP_SQUARE), layoutType === PositionedObjectLayoutType.WRAP_NONE || layoutType === PositionedObjectLayoutType.INLINE ? setDisableDistTB(!0) : setDisableDistTB(!1), layoutType === PositionedObjectLayoutType.WRAP_NONE || layoutType === PositionedObjectLayoutType.INLINE || layoutType === PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM ? setDisableDistLR(!0) : setDisableDistLR(!1), layoutType === PositionedObjectLayoutType.WRAP_NONE)
-      behindDoc === BooleanNumber.TRUE ? setWrappingStyle(TextWrappingStyle.BEHIND_TEXT) : setWrappingStyle(TextWrappingStyle.IN_FRONT_OF_TEXT);
-    else
-      switch (layoutType) {
-        case PositionedObjectLayoutType.INLINE:
-          setWrappingStyle(TextWrappingStyle.INLINE);
-          break;
-        case PositionedObjectLayoutType.WRAP_SQUARE:
-          setWrappingStyle(TextWrappingStyle.WRAP_SQUARE);
-          break;
-        case PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM:
-          setWrappingStyle(TextWrappingStyle.WRAP_TOP_AND_BOTTOM);
-          break;
-        default:
-          throw new Error(`Unsupported layout type: ${layoutType}`);
-      }
-  }
-  return __name(updateState, "updateState"), useEffect(() => {
-    updateFocusDrawingState();
-    const subscription = drawingManagerService.focus$.subscribe((drawingParams) => {
-      if (drawingParams.length === 0) {
-        setShowPanel(!1);
-        return;
-      }
-      setShowPanel(!0), updateState(drawingParams[0]);
-    }), mutationListener = commandService.onCommandExecuted(async (command) => {
-      command.id === RichTextEditingMutation.id && updateFocusDrawingState();
-    });
-    return () => {
-      subscription.unsubscribe(), mutationListener.dispose();
-    };
-  }, []), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder), style: { display: showPanel ? "block" : "none" } }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.title")))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.wrappingStyle")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelRow) }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn) }, /* @__PURE__ */ React.createElement(RadioGroup, { value: wrappingStyle, onChange: handleWrappingStyleChange, direction: "vertical" }, /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.INLINE }, localeService.t("image-text-wrap.inline")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.WRAP_SQUARE }, localeService.t("image-text-wrap.square")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.WRAP_TOP_AND_BOTTOM }, localeService.t("image-text-wrap.topAndBottom")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.BEHIND_TEXT }, localeService.t("image-text-wrap.behindText")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.IN_FRONT_OF_TEXT }, localeService.t("image-text-wrap.inFrontText"))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.wrapText")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelRow) }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn) }, /* @__PURE__ */ React.createElement(RadioGroup, { disabled: disableWrapText, value: wrapText, onChange: handleWrapTextChange, direction: "horizontal" }, /* @__PURE__ */ React.createElement(Radio, { value: WrapTextType.BOTH_SIDES }, localeService.t("image-text-wrap.bothSide")), /* @__PURE__ */ React.createElement(Radio, { value: WrapTextType.LEFT }, localeService.t("image-text-wrap.leftOnly")), /* @__PURE__ */ React.createElement(Radio, { value: WrapTextType.RIGHT }, localeService.t("image-text-wrap.rightOnly"))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.distanceFromText")))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.top"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
-    InputNumber,
-    {
-      min: MIN_MARGIN,
-      max: MAX_MARGIN,
-      disabled: disableDistTB,
-      precision: 1,
-      value: distToText.distT,
-      onChange: /* @__PURE__ */ __name((val) => {
-        handleDistToTextChange(val, "distT");
-      }, "onChange"),
-      className: styles.imageCommonPanelInput
-    }
-  ))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.left"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
-    InputNumber,
-    {
-      min: MIN_MARGIN,
-      max: MAX_MARGIN,
-      disabled: disableDistLR,
-      precision: 1,
-      value: distToText.distL,
-      onChange: /* @__PURE__ */ __name((val) => {
-        handleDistToTextChange(val, "distL");
-      }, "onChange"),
-      className: styles.imageCommonPanelInput
-    }
-  )))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.bottom"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
-    InputNumber,
-    {
-      min: MIN_MARGIN,
-      max: MAX_MARGIN,
-      disabled: disableDistTB,
-      precision: 1,
-      value: distToText.distB,
-      onChange: /* @__PURE__ */ __name((val) => {
-        handleDistToTextChange(val, "distB");
-      }, "onChange"),
-      className: styles.imageCommonPanelInput
-    }
-  ))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.right"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
-    InputNumber,
-    {
-      min: MIN_MARGIN,
-      max: MAX_MARGIN,
-      disabled: disableDistLR,
-      precision: 1,
-      value: distToText.distR,
-      onChange: /* @__PURE__ */ __name((val) => {
-        handleDistToTextChange(val, "distR");
-      }, "onChange"),
-      className: styles.imageCommonPanelInput
-    }
-  )))))));
-}, "DocDrawingTextWrap"), MIN_OFFSET = -1e3, MAX_OFFSET = 1e3, DocDrawingPosition = /* @__PURE__ */ __name((props) => {
+const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "univer-image-common-panel-grid", imageCommonPanelBorder = "univer-image-common-panel-border", imageCommonPanelTitle = "univer-image-common-panel-title", imageCommonPanelSubtitle = "univer-image-common-panel-subtitle", imageCommonPanelRow = "univer-image-common-panel-row", imageCommonPanelRowVertical = "univer-image-common-panel-row-vertical", imageCommonPanelColumn = "univer-image-common-panel-column", imageCommonPanelColumnCenter = "univer-image-common-panel-column-center", imageCommonPanelInline = "univer-image-common-panel-inline", imageCommonPanelSpan2 = "univer-image-common-panel-span2", imageCommonPanelSpan3 = "univer-image-common-panel-span3", imageCommonPanelInput = "univer-image-common-panel-input", sheetImageMenu = "univer-sheet-image-menu", sheetImageMenuInput = "univer-sheet-image-menu-input", styles = {
+  imageCommonPanel,
+  imageCommonPanelGrid,
+  imageCommonPanelBorder,
+  imageCommonPanelTitle,
+  imageCommonPanelSubtitle,
+  imageCommonPanelRow,
+  imageCommonPanelRowVertical,
+  imageCommonPanelColumn,
+  imageCommonPanelColumnCenter,
+  imageCommonPanelInline,
+  imageCommonPanelSpan2,
+  imageCommonPanelSpan3,
+  imageCommonPanelInput,
+  sheetImageMenu,
+  sheetImageMenuInput
+}, MIN_OFFSET = -1e3, MAX_OFFSET = 1e3, DocDrawingPosition = /* @__PURE__ */ __name((props) => {
   const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), univerInstanceService = useDependency(IUniverInstanceService), { drawings } = props, drawingParam = drawings[0];
   if (drawingParam == null)
     return;
-  const { unitId } = drawingParam, documentDataModel = univerInstanceService.getUniverDocInstance(unitId), renderObject = renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
+  const { unitId } = drawingParam, documentDataModel = univerInstanceService.getUniverDocInstance(unitId), documentFlavor = documentDataModel == null ? void 0 : documentDataModel.getSnapshot().documentStyle.documentFlavor, renderObject = renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
   if (scene == null)
     return;
   const transformer = scene.getTransformerByCreate(), HORIZONTAL_RELATIVE_FROM = [{
@@ -1169,13 +965,16 @@ const MIN_MARGIN = 0, MAX_MARGIN = 100, DocDrawingTextWrap = /* @__PURE__ */ __n
     value: String(ObjectRelativeFromH.MARGIN)
   }], VERTICAL_RELATIVE_FROM = [{
     label: localeService.t("image-position.line"),
-    value: String(ObjectRelativeFromV.LINE)
+    value: String(ObjectRelativeFromV.LINE),
+    disabled: documentFlavor === DocumentFlavor.MODERN
   }, {
     label: localeService.t("image-position.page"),
-    value: String(ObjectRelativeFromV.PAGE)
+    value: String(ObjectRelativeFromV.PAGE),
+    disabled: documentFlavor === DocumentFlavor.MODERN
   }, {
     label: localeService.t("image-position.margin"),
-    value: String(ObjectRelativeFromV.MARGIN)
+    value: String(ObjectRelativeFromV.MARGIN),
+    disabled: documentFlavor === DocumentFlavor.MODERN
   }, {
     label: localeService.t("image-position.paragraph"),
     value: String(ObjectRelativeFromV.PARAGRAPH)
@@ -1358,7 +1157,187 @@ const MIN_MARGIN = 0, MAX_MARGIN = 100, DocDrawingTextWrap = /* @__PURE__ */ __n
       onChange: handleVerticalRelativeFromChange
     }
   )))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-position.options")))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow, style: { marginBottom: "50px" } }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(Checkbox, { disabled, checked: followTextMove, onChange: handleFollowTextMoveCheck }, localeService.t("image-position.moveObjectWithText")))));
-}, "DocDrawingPosition"), DocDrawingPanel = /* @__PURE__ */ __name(() => {
+}, "DocDrawingPosition"), MIN_MARGIN = 0, MAX_MARGIN = 100, DocDrawingTextWrap = /* @__PURE__ */ __name((props) => {
+  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), univerInstanceService = useDependency(IUniverInstanceService), { drawings } = props, drawingParam = drawings[0];
+  if (drawingParam == null)
+    return null;
+  const { unitId } = drawingParam, documentDataModel = univerInstanceService.getUniverDocInstance(unitId), renderObject = renderManagerService.getRenderById(unitId);
+  if ((renderObject == null ? void 0 : renderObject.scene) == null)
+    return null;
+  const [disableWrapText, setDisableWrapText] = useState(!0), [disableDistTB, setDisableDistTB] = useState(!0), [disableDistLR, setDisableDistLR] = useState(!0), [wrappingStyle, setWrappingStyle] = useState(TextWrappingStyle.INLINE), [wrapText, setWrapText] = useState(""), [distToText, setDistToText] = useState({
+    distT: 0,
+    distL: 0,
+    distB: 0,
+    distR: 0
+  }), [showPanel, setShowPanel] = useState(!0);
+  function handleWrappingStyleChange(value) {
+    setWrappingStyle(value);
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    if (focusDrawings.length === 0)
+      return;
+    const { unitId: unitId2, subUnitId } = focusDrawings[0], drawings2 = focusDrawings.map(({ unitId: unitId3, subUnitId: subUnitId2, drawingId }) => ({
+      unitId: unitId3,
+      subUnitId: subUnitId2,
+      drawingId
+    }));
+    commandService.executeCommand(UpdateDocDrawingWrappingStyleCommand.id, {
+      unitId: unitId2,
+      subUnitId,
+      drawings: drawings2,
+      wrappingStyle: value
+    });
+  }
+  __name(handleWrappingStyleChange, "handleWrappingStyleChange");
+  function handleWrapTextChange(value) {
+    setWrapText(value);
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    if (focusDrawings.length === 0)
+      return;
+    const drawings2 = focusDrawings.map((drawing) => ({
+      unitId: drawing.unitId,
+      subUnitId: drawing.subUnitId,
+      drawingId: drawing.drawingId
+    }));
+    commandService.executeCommand(UpdateDocDrawingWrapTextCommand.id, {
+      unitId: focusDrawings[0].unitId,
+      subUnitId: focusDrawings[0].unitId,
+      drawings: drawings2,
+      wrapText: value
+    });
+  }
+  __name(handleWrapTextChange, "handleWrapTextChange");
+  function handleDistToTextChange(value, direction) {
+    if (value == null)
+      return;
+    const newDistToText = { ...distToText, [direction]: value };
+    setDistToText(newDistToText);
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    if (focusDrawings.length === 0)
+      return;
+    const drawings2 = focusDrawings.map((drawing) => ({
+      unitId: drawing.unitId,
+      subUnitId: drawing.subUnitId,
+      drawingId: drawing.drawingId
+    }));
+    commandService.executeCommand(UpdateDocDrawingDistanceCommand.id, {
+      unitId: focusDrawings[0].unitId,
+      subUnitId: focusDrawings[0].unitId,
+      drawings: drawings2,
+      dist: {
+        [direction]: value
+      }
+    });
+  }
+  __name(handleDistToTextChange, "handleDistToTextChange");
+  function updateFocusDrawingState() {
+    const focusDrawings = drawingManagerService.getFocusDrawings();
+    focusDrawings.length !== 0 && updateState(focusDrawings[0]);
+  }
+  __name(updateFocusDrawingState, "updateFocusDrawingState");
+  function updateState(drawingParam2) {
+    var _a8, _b;
+    const drawing = (_b = (_a8 = documentDataModel == null ? void 0 : documentDataModel.getSnapshot()) == null ? void 0 : _a8.drawings) == null ? void 0 : _b[drawingParam2.drawingId];
+    if (drawing == null)
+      return;
+    const {
+      distT = 0,
+      distL = 0,
+      distB = 0,
+      distR = 0,
+      layoutType = PositionedObjectLayoutType.INLINE,
+      behindDoc = BooleanNumber.FALSE,
+      wrapText: wrapText2 = WrapTextType.BOTH_SIDES
+    } = drawing;
+    if (setDistToText({
+      distT,
+      distL,
+      distB,
+      distR
+    }), setWrapText(wrapText2), setDisableWrapText(layoutType !== PositionedObjectLayoutType.WRAP_SQUARE), layoutType === PositionedObjectLayoutType.WRAP_NONE || layoutType === PositionedObjectLayoutType.INLINE ? setDisableDistTB(!0) : setDisableDistTB(!1), layoutType === PositionedObjectLayoutType.WRAP_NONE || layoutType === PositionedObjectLayoutType.INLINE || layoutType === PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM ? setDisableDistLR(!0) : setDisableDistLR(!1), layoutType === PositionedObjectLayoutType.WRAP_NONE)
+      behindDoc === BooleanNumber.TRUE ? setWrappingStyle(TextWrappingStyle.BEHIND_TEXT) : setWrappingStyle(TextWrappingStyle.IN_FRONT_OF_TEXT);
+    else
+      switch (layoutType) {
+        case PositionedObjectLayoutType.INLINE:
+          setWrappingStyle(TextWrappingStyle.INLINE);
+          break;
+        case PositionedObjectLayoutType.WRAP_SQUARE:
+          setWrappingStyle(TextWrappingStyle.WRAP_SQUARE);
+          break;
+        case PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM:
+          setWrappingStyle(TextWrappingStyle.WRAP_TOP_AND_BOTTOM);
+          break;
+        default:
+          throw new Error(`Unsupported layout type: ${layoutType}`);
+      }
+  }
+  return __name(updateState, "updateState"), useEffect(() => {
+    updateFocusDrawingState();
+    const subscription = drawingManagerService.focus$.subscribe((drawingParams) => {
+      if (drawingParams.length === 0) {
+        setShowPanel(!1);
+        return;
+      }
+      setShowPanel(!0), updateState(drawingParams[0]);
+    }), mutationListener = commandService.onCommandExecuted(async (command) => {
+      command.id === RichTextEditingMutation.id && updateFocusDrawingState();
+    });
+    return () => {
+      subscription.unsubscribe(), mutationListener.dispose();
+    };
+  }, []), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder), style: { display: showPanel ? "block" : "none" } }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.title")))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.wrappingStyle")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelRow) }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn) }, /* @__PURE__ */ React.createElement(RadioGroup, { value: wrappingStyle, onChange: handleWrappingStyleChange, direction: "vertical" }, /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.INLINE }, localeService.t("image-text-wrap.inline")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.WRAP_SQUARE }, localeService.t("image-text-wrap.square")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.WRAP_TOP_AND_BOTTOM }, localeService.t("image-text-wrap.topAndBottom")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.BEHIND_TEXT }, localeService.t("image-text-wrap.behindText")), /* @__PURE__ */ React.createElement(Radio, { value: TextWrappingStyle.IN_FRONT_OF_TEXT }, localeService.t("image-text-wrap.inFrontText"))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.wrapText")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelRow) }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn) }, /* @__PURE__ */ React.createElement(RadioGroup, { disabled: disableWrapText, value: wrapText, onChange: handleWrapTextChange, direction: "horizontal" }, /* @__PURE__ */ React.createElement(Radio, { value: WrapTextType.BOTH_SIDES }, localeService.t("image-text-wrap.bothSide")), /* @__PURE__ */ React.createElement(Radio, { value: WrapTextType.LEFT }, localeService.t("image-text-wrap.leftOnly")), /* @__PURE__ */ React.createElement(Radio, { value: WrapTextType.RIGHT }, localeService.t("image-text-wrap.rightOnly"))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-text-wrap.distanceFromText")))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.top"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    InputNumber,
+    {
+      min: MIN_MARGIN,
+      max: MAX_MARGIN,
+      disabled: disableDistTB,
+      precision: 1,
+      value: distToText.distT,
+      onChange: /* @__PURE__ */ __name((val) => {
+        handleDistToTextChange(val, "distT");
+      }, "onChange"),
+      className: styles.imageCommonPanelInput
+    }
+  ))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.left"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    InputNumber,
+    {
+      min: MIN_MARGIN,
+      max: MAX_MARGIN,
+      disabled: disableDistLR,
+      precision: 1,
+      value: distToText.distL,
+      onChange: /* @__PURE__ */ __name((val) => {
+        handleDistToTextChange(val, "distL");
+      }, "onChange"),
+      className: styles.imageCommonPanelInput
+    }
+  )))))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.bottom"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    InputNumber,
+    {
+      min: MIN_MARGIN,
+      max: MAX_MARGIN,
+      disabled: disableDistTB,
+      precision: 1,
+      value: distToText.distB,
+      onChange: /* @__PURE__ */ __name((val) => {
+        handleDistToTextChange(val, "distB");
+      }, "onChange"),
+      className: styles.imageCommonPanelInput
+    }
+  ))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, localeService.t("image-text-wrap.right"))), /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(
+    InputNumber,
+    {
+      min: MIN_MARGIN,
+      max: MAX_MARGIN,
+      disabled: disableDistLR,
+      precision: 1,
+      value: distToText.distR,
+      onChange: /* @__PURE__ */ __name((val) => {
+        handleDistToTextChange(val, "distR");
+      }, "onChange"),
+      className: styles.imageCommonPanelInput
+    }
+  )))))));
+}, "DocDrawingTextWrap"), DocDrawingPanel = /* @__PURE__ */ __name(() => {
   const drawingManagerService = useDependency(IDrawingManagerService), focusDrawings = drawingManagerService.getFocusDrawings(), [drawings, setDrawings] = useState(focusDrawings);
   return useEffect(() => {
     const focusDispose = drawingManagerService.focus$.subscribe((drawings2) => {
@@ -2376,7 +2355,7 @@ let DocDrawingTransformUpdateController = (_a6 = class extends Disposable {
       this._calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft), this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
     }
     const updateDrawings = Object.values(updateDrawingMap), nonMultiDrawings = updateDrawings.filter((drawing) => !drawing.isMultiTransform), multiDrawings = updateDrawings.filter((drawing) => drawing.isMultiTransform);
-    nonMultiDrawings.length > 0 && this._drawingManagerService.refreshTransform(nonMultiDrawings), multiDrawings.length > 0 && this._handleMultiDrawingsTransform(multiDrawings);
+    nonMultiDrawings.length > 0 && this._drawingManagerService.refreshTransform(nonMultiDrawings), this._handleMultiDrawingsTransform(multiDrawings);
   }
   _handleMultiDrawingsTransform(multiDrawings) {
     const { scene, unitId } = this._context, transformer = scene.getTransformerByCreate();
@@ -2385,7 +2364,7 @@ let DocDrawingTransformUpdateController = (_a6 = class extends Disposable {
       param != null && (param.transform = updateParam.transform, param.transforms = updateParam.transforms, param.isMultiTransform = updateParam.isMultiTransform);
     });
     const selectedObjectKeys = [...transformer.getSelectedObjectMap().keys()], allMultiDrawings = Object.values(this._drawingManagerService.getDrawingData(unitId, unitId)).filter((drawing) => drawing.isMultiTransform === BooleanNumber.TRUE);
-    this._drawingManagerService.removeNotification(allMultiDrawings), this._drawingManagerService.addNotification(multiDrawings);
+    this._drawingManagerService.removeNotification(allMultiDrawings), multiDrawings.length > 0 && this._drawingManagerService.addNotification(multiDrawings);
     for (const key of selectedObjectKeys) {
       const drawingShape = scene.getObject(key);
       drawingShape && transformer.setSelectedControl(drawingShape);

package/lib/types/controllers/render-controllers/doc-drawing-transform-update.controller.d.ts

@@ -1,8 +1,8 @@
-import { Disposable, ICommandService, IUniverInstanceService, LifecycleService, DocumentDataModel } from '@univerjs/core';
+import { DocumentDataModel, Disposable, ICommandService, IUniverInstanceService, LifecycleService } from '@univerjs/core';
+import { IRenderContext, IRenderModule } from '@univerjs/engine-render';
 import { DocSkeletonManagerService } from '@univerjs/docs';
 import { IEditorService } from '@univerjs/docs-ui';
 import { IDrawingManagerService } from '@univerjs/drawing';
-import { IRenderContext, IRenderModule } from '@univerjs/engine-render';
 import { DocRefreshDrawingsService } from '../../services/doc-refresh-drawings.service';
 export declare class DocDrawingTransformUpdateController extends Disposable implements IRenderModule {
     private readonly _context;