@univerjs/drawing-ui 0.4.1 → 0.4.2

package/lib/es/index.js

@@ -4,9 +4,9 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
 import { getDrawingShapeKeyByDrawingSearch, DrawingTypeEnum, ImageSourceType, IDrawingManagerService, IImageIoService, ArrangeTypeEnum } from "@univerjs/drawing";
 import { Group, DRAWING_OBJECT_LAYER_INDEX, Image, IRenderManagerService, getGroupState, transformObjectOutOfGroup, RENDER_CLASS_TYPE, Shape, Rect, Canvas, precisionTo, CURSOR_TYPE, Vector2, degToRad } from "@univerjs/engine-render";
-import { UniverInstanceType, useDependency, LocaleService, debounce, CommandType, ICommandService, Tools, Inject, Disposable, checkIfMove, toDisposable, IUniverInstanceService, Injector, Plugin, IConfigService } from "@univerjs/core";
-import React, { forwardRef, useRef, createElement, useState, useEffect } from "react";
-import { Button, InputNumber, Checkbox, Select, Dropdown, MessageType } from "@univerjs/design";
+import { UniverInstanceType, CommandType, useDependency, ICommandService, LocaleService, Tools, debounce, Inject, Disposable, checkIfMove, toDisposable, IUniverInstanceService, Injector, Plugin, IConfigService } from "@univerjs/core";
+import React, { useState, forwardRef, useRef, createElement, useEffect } from "react";
+import { Select, Button, InputNumber, Checkbox, Dropdown, MessageType } from "@univerjs/design";
 import { ComponentManager, IMessageService, IDialogService } from "@univerjs/ui";
 import { filter, switchMap } from "rxjs";
 function insertGroupObject(objectParam, object, scene, drawingManagerService) {
@@ -139,6 +139,100 @@ function getUpdateParams(objects, drawingManagerService) {
   }), params;
 }
 __name(getUpdateParams, "getUpdateParams");
+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");
+var AlignType = /* @__PURE__ */ ((AlignType2) => (AlignType2.default = "0", AlignType2.left = "1", AlignType2.center = "2", AlignType2.right = "3", AlignType2.top = "4", AlignType2.middle = "5", AlignType2.bottom = "6", AlignType2.horizon = "7", AlignType2.vertical = "8", AlignType2))(AlignType || {});
+const SetDrawingAlignOperation = {
+  id: "sheet.operation.set-image-align",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => !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", styles$1 = {
+  imageCommonPanel,
+  imageCommonPanelGrid,
+  imageCommonPanelBorder,
+  imageCommonPanelTitle,
+  imageCommonPanelSubtitle,
+  imageCommonPanelRow,
+  imageCommonPanelRowVertical,
+  imageCommonPanelColumn,
+  imageCommonPanelColumnCenter,
+  imageCommonPanelInline,
+  imageCommonPanelSpan2,
+  imageCommonPanelSpan3,
+  imageCommonPanelInput
+}, DrawingAlign = /* @__PURE__ */ __name((props) => {
+  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), { alignShow } = props, [alignValue, setAlignValue] = useState(AlignType.default), alignOptions = [
+    {
+      label: localeService.t("image-panel.align.default"),
+      value: AlignType.default
+    },
+    {
+      options: [
+        {
+          label: localeService.t("image-panel.align.left"),
+          value: AlignType.left
+        },
+        {
+          label: localeService.t("image-panel.align.center"),
+          value: AlignType.center
+        },
+        {
+          label: localeService.t("image-panel.align.right"),
+          value: AlignType.right
+        }
+      ]
+    },
+    {
+      options: [
+        {
+          label: localeService.t("image-panel.align.top"),
+          value: AlignType.top
+        },
+        {
+          label: localeService.t("image-panel.align.middle"),
+          value: AlignType.middle
+        },
+        {
+          label: localeService.t("image-panel.align.bottom"),
+          value: AlignType.bottom
+        }
+      ]
+    },
+    {
+      options: [
+        {
+          label: localeService.t("image-panel.align.horizon"),
+          value: AlignType.horizon
+        },
+        {
+          label: localeService.t("image-panel.align.vertical"),
+          value: AlignType.vertical
+        }
+      ]
+    }
+  ];
+  function handleAlignChange(value) {
+    setAlignValue(value), commandService.executeCommand(SetDrawingAlignOperation.id, {
+      alignType: value
+    });
+  }
+  __name(handleAlignChange, "handleAlignChange");
+  const gridDisplay = /* @__PURE__ */ __name((isShow) => isShow ? "block" : "none", "gridDisplay");
+  return /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelGrid, styles$1.imageCommonPanelBorder), style: { display: gridDisplay(alignShow) } }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-panel.align.title")))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn) }, /* @__PURE__ */ React.createElement(Select, { value: alignValue, options: alignOptions, onChange: handleAlignChange }))));
+}, "DrawingAlign");
 var __assign = function() {
   return __assign = Object.assign || function(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -258,36 +352,7 @@ var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width:
   }));
 });
 UngroupSingle.displayName = "UngroupSingle";
-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 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", styles$1 = {
-  imageCommonPanel,
-  imageCommonPanelGrid,
-  imageCommonPanelBorder,
-  imageCommonPanelTitle,
-  imageCommonPanelSubtitle,
-  imageCommonPanelRow,
-  imageCommonPanelRowVertical,
-  imageCommonPanelColumn,
-  imageCommonPanelColumnCenter,
-  imageCommonPanelInline,
-  imageCommonPanelSpan2,
-  imageCommonPanelSpan3,
-  imageCommonPanelInput
-}, DrawingArrange = /* @__PURE__ */ __name((props) => {
+const DrawingArrange = /* @__PURE__ */ __name((props) => {
   const { arrangeShow, drawings: focusDrawings } = props, localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), gridDisplay = /* @__PURE__ */ __name((isShow) => isShow ? "block" : "none", "gridDisplay"), [drawings, setDrawings] = useState(focusDrawings);
   useEffect(() => {
     const focusDispose = drawingManagerService.focus$.subscribe((drawings2) => {
@@ -310,7 +375,87 @@ const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "un
   }, "onClick") }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(TopmostSingle, null), localeService.t("image-panel.arrange.front")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
     onArrangeBtnClick(ArrangeTypeEnum.back);
   }, "onClick") }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(BottomSingle, null), localeService.t("image-panel.arrange.back"))))));
-}, "DrawingArrange"), MIN_DRAWING_WIDTH_LIMIT = 20, MIN_DRAWING_HEIGHT_LIMIT = 20, RANGE_DRAWING_ROTATION_LIMIT = [-3600, 3600], INPUT_DEBOUNCE_TIME = 300, DrawingTransform = /* @__PURE__ */ __name((props) => {
+}, "DrawingArrange"), DrawingGroup = /* @__PURE__ */ __name((props) => {
+  const localeService = useDependency(LocaleService), renderManagerService = useDependency(IRenderManagerService), drawingManagerService = useDependency(IDrawingManagerService), { hasGroup, drawings } = props, [groupShow, setGroupShow] = useState(!1), [groupBtnShow, setGroupBtnShow] = useState(!0), [ungroupBtnShow, setUngroupBtnShow] = useState(!0), gridDisplay = /* @__PURE__ */ __name((isShow) => isShow ? "block" : "none", "gridDisplay"), onGroupBtnClick = /* @__PURE__ */ __name(() => {
+    const focusDrawings = drawingManagerService.getFocusDrawings(), { unitId, subUnitId } = focusDrawings[0], groupId = Tools.generateRandomId(10), groupTransform = getGroupState(0, 0, focusDrawings.map((o) => o.transform || {})), groupParam = {
+      unitId,
+      subUnitId,
+      drawingId: groupId,
+      drawingType: DrawingTypeEnum.DRAWING_GROUP,
+      transform: groupTransform
+    }, children = focusDrawings.map((drawing) => {
+      const transform = drawing.transform || { left: 0, top: 0 }, { unitId: unitId2, subUnitId: subUnitId2, drawingId } = drawing;
+      return {
+        unitId: unitId2,
+        subUnitId: subUnitId2,
+        drawingId,
+        transform: {
+          ...transform,
+          left: transform.left - groupTransform.left,
+          top: transform.top - groupTransform.top
+        },
+        groupId
+      };
+    });
+    drawingManagerService.featurePluginGroupUpdateNotification([{
+      parent: groupParam,
+      children
+    }]);
+  }, "onGroupBtnClick"), ungroup = /* @__PURE__ */ __name((param) => {
+    if (param.drawingType !== DrawingTypeEnum.DRAWING_GROUP)
+      return;
+    const { unitId, subUnitId, drawingId, transform: groupTransform = { width: 0, height: 0 } } = param;
+    if (groupTransform == null)
+      return;
+    const objects = drawingManagerService.getDrawingsByGroup({ unitId, subUnitId, drawingId });
+    if (objects.length === 0)
+      return;
+    const children = objects.map((object) => {
+      const { transform } = object, { unitId: unitId2, subUnitId: subUnitId2, drawingId: drawingId2 } = object, newTransform = transformObjectOutOfGroup(transform || {}, groupTransform, groupTransform.width || 0, groupTransform.height || 0);
+      return {
+        unitId: unitId2,
+        subUnitId: subUnitId2,
+        drawingId: drawingId2,
+        transform: {
+          ...transform,
+          ...newTransform
+        },
+        groupId: void 0
+      };
+    });
+    return {
+      parent: param,
+      children
+    };
+  }, "ungroup"), onUngroupBtnClick = /* @__PURE__ */ __name(() => {
+    const params = drawingManagerService.getFocusDrawings().map(
+      (drawing) => ungroup(drawing)
+    ).filter((o) => o != null);
+    params.length !== 0 && drawingManagerService.featurePluginUngroupUpdateNotification(params);
+  }, "onUngroupBtnClick");
+  return useEffect(() => {
+    const drawingParam = drawings[0];
+    if (drawingParam == null)
+      return;
+    const { unitId } = drawingParam, renderObject = renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
+    if (scene == null)
+      return;
+    const transformer = scene.getTransformerByCreate(), onClearControlObserver = transformer.clearControl$.subscribe((changeSelf) => {
+      changeSelf === !0 && setGroupShow(!1);
+    }), onChangeStartObserver = transformer.changeStart$.subscribe((state) => {
+      const { objects } = state, params = getUpdateParams(objects, drawingManagerService), groupParams = params.filter((o) => (o == null ? void 0 : o.drawingType) === DrawingTypeEnum.DRAWING_GROUP);
+      let groupBtnShow2 = !1, ungroupBtnShow2 = !1;
+      params.length > 1 && (groupBtnShow2 = !0), groupParams.length > 0 && (ungroupBtnShow2 = !0), setGroupShow(groupBtnShow2 || ungroupBtnShow2), setGroupBtnShow(groupBtnShow2), setUngroupBtnShow(ungroupBtnShow2);
+    });
+    return () => {
+      onChangeStartObserver.unsubscribe(), onClearControlObserver.unsubscribe();
+    };
+  }, []), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelGrid, styles$1.imageCommonPanelBorder), style: { display: gridDisplay(hasGroup === !0 ? groupShow : !1) } }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-panel.group.title")))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2, styles$1.imageCommonPanelColumnCenter) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+    onGroupBtnClick();
+  }, "onClick"), style: { display: gridDisplay(groupBtnShow) } }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(GroupSingle, null), localeService.t("image-panel.group.group")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2, styles$1.imageCommonPanelColumnCenter) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+    onUngroupBtnClick();
+  }, "onClick"), style: { display: gridDisplay(ungroupBtnShow) } }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(UngroupSingle, null), localeService.t("image-panel.group.unGroup"))))));
+}, "DrawingGroup"), MIN_DRAWING_WIDTH_LIMIT = 20, MIN_DRAWING_HEIGHT_LIMIT = 20, RANGE_DRAWING_ROTATION_LIMIT = [-3600, 3600], INPUT_DEBOUNCE_TIME = 300, DrawingTransform = /* @__PURE__ */ __name((props) => {
   var _a7;
   const localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), { drawings, transformShow } = props, drawingParam = drawings[0];
   if (drawingParam == null)
@@ -453,72 +598,7 @@ const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "un
   }, "onChange"), className: styles$1.imageCommonPanelInput }))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan3) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, localeService.t("image-panel.transform.y"))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(InputNumber, { precision: 1, value: yPosition, onChange: /* @__PURE__ */ __name((val) => {
     handleYChange(val);
   }, "onChange"), className: styles$1.imageCommonPanelInput }))))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan3) }, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, localeService.t("image-panel.transform.rotate"))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelColumn }, /* @__PURE__ */ React.createElement(InputNumber, { precision: 1, value: rotation, onChange: handleRotationChange, className: styles$1.imageCommonPanelInput })))))));
-}, "DrawingTransform");
-var AlignType = /* @__PURE__ */ ((AlignType2) => (AlignType2.default = "0", AlignType2.left = "1", AlignType2.center = "2", AlignType2.right = "3", AlignType2.top = "4", AlignType2.middle = "5", AlignType2.bottom = "6", AlignType2.horizon = "7", AlignType2.vertical = "8", AlignType2))(AlignType || {});
-const SetDrawingAlignOperation = {
-  id: "sheet.operation.set-image-align",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => !0, "handler")
-}, DrawingAlign = /* @__PURE__ */ __name((props) => {
-  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), { alignShow } = props, [alignValue, setAlignValue] = useState(AlignType.default), alignOptions = [
-    {
-      label: localeService.t("image-panel.align.default"),
-      value: AlignType.default
-    },
-    {
-      options: [
-        {
-          label: localeService.t("image-panel.align.left"),
-          value: AlignType.left
-        },
-        {
-          label: localeService.t("image-panel.align.center"),
-          value: AlignType.center
-        },
-        {
-          label: localeService.t("image-panel.align.right"),
-          value: AlignType.right
-        }
-      ]
-    },
-    {
-      options: [
-        {
-          label: localeService.t("image-panel.align.top"),
-          value: AlignType.top
-        },
-        {
-          label: localeService.t("image-panel.align.middle"),
-          value: AlignType.middle
-        },
-        {
-          label: localeService.t("image-panel.align.bottom"),
-          value: AlignType.bottom
-        }
-      ]
-    },
-    {
-      options: [
-        {
-          label: localeService.t("image-panel.align.horizon"),
-          value: AlignType.horizon
-        },
-        {
-          label: localeService.t("image-panel.align.vertical"),
-          value: AlignType.vertical
-        }
-      ]
-    }
-  ];
-  function handleAlignChange(value) {
-    setAlignValue(value), commandService.executeCommand(SetDrawingAlignOperation.id, {
-      alignType: value
-    });
-  }
-  __name(handleAlignChange, "handleAlignChange");
-  const gridDisplay = /* @__PURE__ */ __name((isShow) => isShow ? "block" : "none", "gridDisplay");
-  return /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelGrid, styles$1.imageCommonPanelBorder), style: { display: gridDisplay(alignShow) } }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-panel.align.title")))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn) }, /* @__PURE__ */ React.createElement(Select, { value: alignValue, options: alignOptions, onChange: handleAlignChange }))));
-}, "DrawingAlign"), OpenImageCropOperation = {
+}, "DrawingTransform"), OpenImageCropOperation = {
   id: "sheet.operation.open-image-crop",
   type: CommandType.OPERATION,
   handler: /* @__PURE__ */ __name((accessor, params) => !0, "handler")
@@ -603,87 +683,7 @@ const AutoImageCropOperation = {
   return /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelGrid, styles$1.imageCommonPanelBorder), style: { display: gridDisplay(cropperShow) } }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-panel.crop.title")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelRow, styles$1.imageCommonPanelRowVertical) }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
     onCropperBtnClick(cropValue);
   }, "onClick") }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(CreateCopySingle, null), localeService.t("image-panel.crop.start")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2) }, /* @__PURE__ */ React.createElement(Select, { value: cropValue, options: cropOptions, onChange: handleCropChange }))));
-}, "ImageCropper"), DrawingGroup = /* @__PURE__ */ __name((props) => {
-  const localeService = useDependency(LocaleService), renderManagerService = useDependency(IRenderManagerService), drawingManagerService = useDependency(IDrawingManagerService), { hasGroup, drawings } = props, [groupShow, setGroupShow] = useState(!1), [groupBtnShow, setGroupBtnShow] = useState(!0), [ungroupBtnShow, setUngroupBtnShow] = useState(!0), gridDisplay = /* @__PURE__ */ __name((isShow) => isShow ? "block" : "none", "gridDisplay"), onGroupBtnClick = /* @__PURE__ */ __name(() => {
-    const focusDrawings = drawingManagerService.getFocusDrawings(), { unitId, subUnitId } = focusDrawings[0], groupId = Tools.generateRandomId(10), groupTransform = getGroupState(0, 0, focusDrawings.map((o) => o.transform || {})), groupParam = {
-      unitId,
-      subUnitId,
-      drawingId: groupId,
-      drawingType: DrawingTypeEnum.DRAWING_GROUP,
-      transform: groupTransform
-    }, children = focusDrawings.map((drawing) => {
-      const transform = drawing.transform || { left: 0, top: 0 }, { unitId: unitId2, subUnitId: subUnitId2, drawingId } = drawing;
-      return {
-        unitId: unitId2,
-        subUnitId: subUnitId2,
-        drawingId,
-        transform: {
-          ...transform,
-          left: transform.left - groupTransform.left,
-          top: transform.top - groupTransform.top
-        },
-        groupId
-      };
-    });
-    drawingManagerService.featurePluginGroupUpdateNotification([{
-      parent: groupParam,
-      children
-    }]);
-  }, "onGroupBtnClick"), ungroup = /* @__PURE__ */ __name((param) => {
-    if (param.drawingType !== DrawingTypeEnum.DRAWING_GROUP)
-      return;
-    const { unitId, subUnitId, drawingId, transform: groupTransform = { width: 0, height: 0 } } = param;
-    if (groupTransform == null)
-      return;
-    const objects = drawingManagerService.getDrawingsByGroup({ unitId, subUnitId, drawingId });
-    if (objects.length === 0)
-      return;
-    const children = objects.map((object) => {
-      const { transform } = object, { unitId: unitId2, subUnitId: subUnitId2, drawingId: drawingId2 } = object, newTransform = transformObjectOutOfGroup(transform || {}, groupTransform, groupTransform.width || 0, groupTransform.height || 0);
-      return {
-        unitId: unitId2,
-        subUnitId: subUnitId2,
-        drawingId: drawingId2,
-        transform: {
-          ...transform,
-          ...newTransform
-        },
-        groupId: void 0
-      };
-    });
-    return {
-      parent: param,
-      children
-    };
-  }, "ungroup"), onUngroupBtnClick = /* @__PURE__ */ __name(() => {
-    const params = drawingManagerService.getFocusDrawings().map(
-      (drawing) => ungroup(drawing)
-    ).filter((o) => o != null);
-    params.length !== 0 && drawingManagerService.featurePluginUngroupUpdateNotification(params);
-  }, "onUngroupBtnClick");
-  return useEffect(() => {
-    const drawingParam = drawings[0];
-    if (drawingParam == null)
-      return;
-    const { unitId } = drawingParam, renderObject = renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-    if (scene == null)
-      return;
-    const transformer = scene.getTransformerByCreate(), onClearControlObserver = transformer.clearControl$.subscribe((changeSelf) => {
-      changeSelf === !0 && setGroupShow(!1);
-    }), onChangeStartObserver = transformer.changeStart$.subscribe((state) => {
-      const { objects } = state, params = getUpdateParams(objects, drawingManagerService), groupParams = params.filter((o) => (o == null ? void 0 : o.drawingType) === DrawingTypeEnum.DRAWING_GROUP);
-      let groupBtnShow2 = !1, ungroupBtnShow2 = !1;
-      params.length > 1 && (groupBtnShow2 = !0), groupParams.length > 0 && (ungroupBtnShow2 = !0), setGroupShow(groupBtnShow2 || ungroupBtnShow2), setGroupBtnShow(groupBtnShow2), setUngroupBtnShow(ungroupBtnShow2);
-    });
-    return () => {
-      onChangeStartObserver.unsubscribe(), onClearControlObserver.unsubscribe();
-    };
-  }, []), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelGrid, styles$1.imageCommonPanelBorder), style: { display: gridDisplay(hasGroup === !0 ? groupShow : !1) } }, /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelTitle) }, /* @__PURE__ */ React.createElement("div", null, localeService.t("image-panel.group.title")))), /* @__PURE__ */ React.createElement("div", { className: styles$1.imageCommonPanelRow }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2, styles$1.imageCommonPanelColumnCenter) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-    onGroupBtnClick();
-  }, "onClick"), style: { display: gridDisplay(groupBtnShow) } }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(GroupSingle, null), localeService.t("image-panel.group.group")))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$1.imageCommonPanelColumn, styles$1.imageCommonPanelSpan2, styles$1.imageCommonPanelColumnCenter) }, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-    onUngroupBtnClick();
-  }, "onClick"), style: { display: gridDisplay(ungroupBtnShow) } }, /* @__PURE__ */ React.createElement("span", { className: styles$1.imageCommonPanelInline }, /* @__PURE__ */ React.createElement(UngroupSingle, null), localeService.t("image-panel.group.unGroup"))))));
-}, "DrawingGroup"), DrawingCommonPanel = /* @__PURE__ */ __name((props) => {
+}, "ImageCropper"), DrawingCommonPanel = /* @__PURE__ */ __name((props) => {
   const drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), localeService = useDependency(LocaleService), { drawings, hasArrange = !0, hasTransform = !0, hasAlign = !0, hasCropper = !0, hasGroup = !0 } = props, drawingParam = drawings[0];
   if (drawingParam == null)
     return;

package/lib/types/views/panel/DrawingCommonPanel.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
 import { IDrawingParam } from '@univerjs/drawing';
+import { default as React } from 'react';
 export interface IDrawingCommonPanelProps {
     drawings: IDrawingParam[];
     hasArrange?: boolean;