@univerjs/drawing-ui 0.4.1 → 0.4.2-nightly.202410301606

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/locale/en-US.js

@@ -0,0 +1,57 @@
+const locale = {
+  "image-popup": {
+    replace: "Replace",
+    delete: "Delete",
+    edit: "Edit",
+    crop: "Crop",
+    reset: "Reset Size"
+  },
+  "image-cropper": {
+    error: "Cannot crop non-image objects."
+  },
+  "image-panel": {
+    arrange: {
+      title: "Arrange",
+      forward: "Bring Forward",
+      backward: "Send Backward",
+      front: "Bring to Front",
+      back: "Send to Back"
+    },
+    transform: {
+      title: "Transform",
+      rotate: "Rotate (°)",
+      x: "X (px)",
+      y: "Y (px)",
+      width: "Width (px)",
+      height: "Height (px)",
+      lock: "Lock Ratio (%)"
+    },
+    crop: {
+      title: "Crop",
+      start: "Start Crop",
+      mode: "Free"
+    },
+    group: {
+      title: "Group",
+      group: "Group",
+      reGroup: "Regroup",
+      unGroup: "Ungroup"
+    },
+    align: {
+      title: "Align",
+      default: "Select Align Type",
+      left: "Align Left",
+      center: "Align Center",
+      right: "Align Right",
+      top: "Align Top",
+      middle: "Align Middle",
+      bottom: "Align Bottom",
+      horizon: "Distribute Horizontally ",
+      vertical: "Distribute Vertically "
+    },
+    null: "No Object Selection"
+  }
+};
+export {
+  locale as default
+};

package/lib/locale/fa-IR.js

@@ -0,0 +1,57 @@
+const locale = {
+  "image-popup": {
+    replace: "تعویض",
+    delete: "حذف",
+    edit: "ویرایش",
+    crop: "کراپ",
+    reset: "بازنشانی اندازه"
+  },
+  "image-cropper": {
+    error: "کراپ کردن اشیاء غیرتصویری امکان‌پذیر نیست."
+  },
+  "image-panel": {
+    arrange: {
+      title: "ترتیب‌دهی",
+      forward: "آوردن به جلو",
+      backward: "فرستادن به عقب",
+      front: "آوردن به جلوی همه",
+      back: "فرستادن به پشت همه"
+    },
+    transform: {
+      title: "تبدیل",
+      rotate: "چرخش (°)",
+      x: "X (px)",
+      y: "Y (px)",
+      width: "عرض (px)",
+      height: "ارتفاع (px)",
+      lock: "قفل نسبت (%)"
+    },
+    crop: {
+      title: "کراپ",
+      start: "شروع کراپ",
+      mode: "آزاد"
+    },
+    group: {
+      title: "گروه",
+      group: "گروه‌بندی",
+      reGroup: "گروه‌بندی مجدد",
+      unGroup: "لغو گروه‌بندی"
+    },
+    align: {
+      title: "تراز",
+      default: "انتخاب نوع تراز",
+      left: "تراز چپ",
+      center: "تراز وسط",
+      right: "تراز راست",
+      top: "تراز بالا",
+      middle: "تراز وسط",
+      bottom: "تراز پایین",
+      horizon: "توزیع افقی",
+      vertical: "توزیع عمودی"
+    },
+    null: "هیچ شیئی انتخاب نشده است"
+  }
+};
+export {
+  locale as default
+};

package/lib/locale/ru-RU.js

@@ -0,0 +1,57 @@
+const locale = {
+  "image-popup": {
+    replace: "Заменить",
+    delete: "Удалить",
+    edit: "Редактировать",
+    crop: "Обрезать",
+    reset: "Сбросить размер"
+  },
+  "image-cropper": {
+    error: "Невозможно обрезать не изображения."
+  },
+  "image-panel": {
+    arrange: {
+      title: "Расположение",
+      forward: "Переместить вперёд",
+      backward: "Переместить назад",
+      front: "На передний план",
+      back: "На задний план"
+    },
+    transform: {
+      title: "Трансформация",
+      rotate: "Повернуть (°)",
+      x: "X (пкс)",
+      y: "Y (пкс)",
+      width: "Ширина (пкс)",
+      height: "Высота (пкс)",
+      lock: "Заблокировать пропорции (%)"
+    },
+    crop: {
+      title: "Обрезка",
+      start: "Начать обрезку",
+      mode: "Свободный"
+    },
+    group: {
+      title: "Группировка",
+      group: "Сгруппировать",
+      reGroup: "Перегруппировать",
+      unGroup: "Разгруппировать"
+    },
+    align: {
+      title: "Выравнивание",
+      default: "Выберите тип выравнивания",
+      left: "Выровнять по левому краю",
+      center: "Выровнять по центру",
+      right: "Выровнять по правому краю",
+      top: "Выровнять по верхнему краю",
+      middle: "Выровнять посередине",
+      bottom: "Выровнять по нижнему краю",
+      horizon: "Распределить горизонтально",
+      vertical: "Распределить вертикально"
+    },
+    null: "Нет выбранных объектов"
+  }
+};
+export {
+  locale as default
+};

package/lib/locale/vi-VN.js

@@ -0,0 +1,57 @@
+const locale = {
+  "image-popup": {
+    replace: "Thay thế",
+    delete: "Xóa",
+    edit: "Chỉnh sửa",
+    crop: "Cắt",
+    reset: "Đặt lại kích thước"
+  },
+  "image-cropper": {
+    error: "Không thể cắt phần tử không phải hình ảnh"
+  },
+  "image-panel": {
+    arrange: {
+      title: "Sắp xếp",
+      forward: "Di chuyển lên một lớp",
+      backward: "Di chuyển xuống một lớp",
+      front: "Đưa lên trên cùng",
+      back: "Đưa xuống dưới cùng"
+    },
+    transform: {
+      title: "Biến đổi",
+      rotate: "Xoay (°)",
+      x: "X (px)",
+      y: "Y (px)",
+      width: "Chiều rộng (px)",
+      height: "Chiều cao (px)",
+      lock: "Khóa tỷ lệ (%)"
+    },
+    crop: {
+      title: "Cắt",
+      start: "Bắt đầu cắt",
+      mode: "Cắt tự do tỷ lệ"
+    },
+    group: {
+      title: "Nhóm",
+      group: "Nhóm",
+      reGroup: "Nhóm lại",
+      unGroup: "Hủy nhóm"
+    },
+    align: {
+      title: "Căn chỉnh",
+      default: "Chọn cách căn chỉnh",
+      left: "Căn trái",
+      center: "Căn giữa theo chiều ngang",
+      right: "Căn phải",
+      top: "Căn trên",
+      middle: "Căn giữa theo chiều dọc",
+      bottom: "Căn dưới",
+      horizon: "Phân phối theo chiều ngang",
+      vertical: "Phân phối theo chiều dọc"
+    },
+    null: "Không có đối tượng nào được chọn"
+  }
+};
+export {
+  locale as default
+};