@univerjs/drawing-ui 0.21.1 → 0.22.0

package/lib/index.js

@@ -9,18 +9,6 @@ import { useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/commands/operations/drawing-align.operation.ts
-let AlignType = /* @__PURE__ */ function(AlignType) {
-	AlignType["default"] = "0";
-	AlignType["left"] = "1";
-	AlignType["center"] = "2";
-	AlignType["right"] = "3";
-	AlignType["top"] = "4";
-	AlignType["middle"] = "5";
-	AlignType["bottom"] = "6";
-	AlignType["horizon"] = "7";
-	AlignType["vertical"] = "8";
-	return AlignType;
-}({});
 /**
 * Set drawing align operation, including left, center, right, top, middle, bottom, horizon and vertical align.
 */
@@ -35,56 +23,56 @@ const SetDrawingAlignLeftOperation = {
 	id: "sheet.operation.set-drawing-align-left",
 	type: CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.left });
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "1" });
 	}
 };
 const SetDrawingAlignCenterOperation = {
 	id: "sheet.operation.set-drawing-align-center",
 	type: CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.center });
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "2" });
 	}
 };
 const SetDrawingAlignRightOperation = {
 	id: "sheet.operation.set-drawing-align-right",
 	type: CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.right });
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "3" });
 	}
 };
 const SetDrawingAlignTopOperation = {
 	id: "sheet.operation.set-drawing-align-top",
 	type: CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.top });
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "4" });
 	}
 };
 const SetDrawingAlignMiddleOperation = {
 	id: "sheet.operation.set-drawing-align-middle",
 	type: CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.middle });
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "5" });
 	}
 };
 const SetDrawingAlignBottomOperation = {
 	id: "sheet.operation.set-drawing-align-bottom",
 	type: CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.bottom });
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "6" });
 	}
 };
 const SetDrawingAlignHorizonOperation = {
 	id: "sheet.operation.set-drawing-align-horizon",
 	type: CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.horizon });
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "7" });
 	}
 };
 const SetDrawingAlignVerticalOperation = {
 	id: "sheet.operation.set-drawing-align-vertical",
 	type: CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.vertical });
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "8" });
 	}
 };
 
@@ -260,19 +248,6 @@ const CloseImageCropOperation = {
 		return true;
 	}
 };
-let CropType = /* @__PURE__ */ function(CropType) {
-	CropType["FREE"] = "0";
-	CropType["R1_1"] = "1";
-	CropType["R16_9"] = "2";
-	CropType["R9_16"] = "3";
-	CropType["R5_4"] = "4";
-	CropType["R4_5"] = "5";
-	CropType["R4_3"] = "6";
-	CropType["R3_4"] = "7";
-	CropType["R3_2"] = "8";
-	CropType["R2_3"] = "9";
-	return CropType;
-}({});
 const AutoImageCropOperation = {
 	id: "sheet.operation.Auto-image-crop",
 	type: CommandType.OPERATION,
@@ -346,7 +321,7 @@ function getCurrentUnitInfo(currentUniverService, propUnitId) {
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "0.21.1";
+var version = "0.22.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -685,7 +660,7 @@ function ImagePopupMenu(props) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/decorateParam.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -693,7 +668,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -810,7 +785,7 @@ function getUpdateParams(objects, drawingManagerService) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -821,7 +796,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -834,14 +809,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -1011,7 +986,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 	_drawingAlign(params) {
 		const { alignType } = params;
 		const drawings = params.drawings || this._drawingManagerService.getFocusDrawings();
-		if (alignType === AlignType.default) return;
+		if (alignType === "0") return;
 		const drawingTransformCaches = [];
 		let minLeft = Number.POSITIVE_INFINITY;
 		let minTop = Number.POSITIVE_INFINITY;
@@ -1057,28 +1032,28 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 			let newLeft = left;
 			let newTop = top;
 			switch (alignType) {
-				case AlignType.left:
+				case "1":
 					newLeft = minLeft;
 					break;
-				case AlignType.center:
+				case "2":
 					newLeft = minLeft + (maxRight - minLeft) / 2 - width / 2;
 					break;
-				case AlignType.right:
+				case "3":
 					newLeft = maxRight - width;
 					break;
-				case AlignType.top:
+				case "4":
 					newTop = minTop;
 					break;
-				case AlignType.middle:
+				case "5":
 					newTop = minTop + (maxBottom - minTop) / 2 - height / 2;
 					break;
-				case AlignType.bottom:
+				case "6":
 					newTop = maxBottom - height;
 					break;
-				case AlignType.horizon:
+				case "7":
 					newLeft = minLeft + averageHorizon * index;
 					break;
-				case AlignType.vertical:
+				case "8":
 					newTop = minTop + averageVertical * index;
 					break;
 				default: break;
@@ -1104,14 +1079,14 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 			const { left: aLeft = 0, top: aTop = 0, width: aWidth = 0, height: aHeight = 0 } = aTransform;
 			const { left: bLeft = 0, top: bTop = 0, width: bWidth = 0, height: bHeight = 0 } = bTransform;
 			switch (alignType) {
-				case AlignType.left: return aLeft - bLeft;
-				case AlignType.center: return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
-				case AlignType.right: return aLeft + aWidth - (bLeft + bWidth);
-				case AlignType.top: return aTop - bTop;
-				case AlignType.middle: return aTop + aHeight / 2 - (bTop + bHeight / 2);
-				case AlignType.bottom: return aTop + aHeight - (bTop + bHeight);
-				case AlignType.horizon: return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
-				case AlignType.vertical: return aTop + aHeight / 2 - (bTop + bHeight / 2);
+				case "1": return aLeft - bLeft;
+				case "2": return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
+				case "3": return aLeft + aWidth - (bLeft + bWidth);
+				case "4": return aTop - bTop;
+				case "5": return aTop + aHeight / 2 - (bTop + bHeight / 2);
+				case "6": return aTop + aHeight - (bTop + bHeight);
+				case "7": return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
+				case "8": return aTop + aHeight / 2 - (bTop + bHeight / 2);
 				default: return 0;
 			}
 		});
@@ -1343,11 +1318,6 @@ DrawingUpdateController = __decorate([
 
 //#endregion
 //#region src/views/crop/image-cropper-object.ts
-var ImageCropperObjectType = /* @__PURE__ */ function(ImageCropperObjectType) {
-	ImageCropperObjectType[ImageCropperObjectType["RECT"] = 0] = "RECT";
-	ImageCropperObjectType[ImageCropperObjectType["PATH"] = 1] = "PATH";
-	return ImageCropperObjectType;
-}(ImageCropperObjectType || {});
 var ImageCropperObject = class extends Shape {
 	constructor(key, props) {
 		if (props == null) props = {};
@@ -1426,11 +1396,11 @@ var ImageCropperObject = class extends Shape {
 		cacheCtx.restore();
 	}
 	_clipForApplyObject(cacheCtx) {
-		let objectType = ImageCropperObjectType.RECT;
-		if (this._prstGeom != null) objectType = ImageCropperObjectType.PATH;
+		let objectType = 0;
+		if (this._prstGeom != null) objectType = 1;
 		cacheCtx.globalCompositeOperation = "destination-out";
 		cacheCtx.beginPath();
-		if (objectType === ImageCropperObjectType.RECT) {
+		if (objectType === 0) {
 			const m = this.transform.getMatrix();
 			cacheCtx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
 			cacheCtx.rect(0, 0, this.width, this.height);
@@ -1561,34 +1531,34 @@ let ImageCropperController = class ImageCropperController extends Disposable {
 		const { left, top, width, height } = imageShape.calculateTransformWithSrcRect();
 		let newSrcRect;
 		switch (cropType) {
-			case CropType.R1_1:
+			case "1":
 				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 1, 1);
 				break;
-			case CropType.R16_9:
+			case "2":
 				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 16, 9);
 				break;
-			case CropType.R9_16:
+			case "3":
 				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 9, 16);
 				break;
-			case CropType.R5_4:
+			case "4":
 				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 5, 4);
 				break;
-			case CropType.R4_5:
+			case "5":
 				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 4, 5);
 				break;
-			case CropType.R4_3:
+			case "6":
 				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 4, 3);
 				break;
-			case CropType.R3_4:
+			case "7":
 				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 3, 4);
 				break;
-			case CropType.R3_2:
+			case "8":
 				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 3, 2);
 				break;
-			case CropType.R2_3:
+			case "9":
 				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 2, 3);
 				break;
-			case CropType.FREE:
+			case "0":
 			default: break;
 		}
 		if (newSrcRect == null) return;
@@ -2225,46 +2195,46 @@ const DrawingAlign = (props) => {
 	const commandService = useDependency(ICommandService);
 	const localeService = useDependency(LocaleService);
 	const { drawings, alignShow } = props;
-	const [alignValue, setAlignValue] = useState(AlignType.default);
+	const [alignValue, setAlignValue] = useState("0");
 	const alignOptions = [
 		{
 			label: localeService.t("image-panel.align.default"),
-			value: AlignType.default
+			value: "0"
 		},
 		{ options: [
 			{
 				label: localeService.t("image-panel.align.left"),
-				value: AlignType.left
+				value: "1"
 			},
 			{
 				label: localeService.t("image-panel.align.center"),
-				value: AlignType.center
+				value: "2"
 			},
 			{
 				label: localeService.t("image-panel.align.right"),
-				value: AlignType.right
+				value: "3"
 			}
 		] },
 		{ options: [
 			{
 				label: localeService.t("image-panel.align.top"),
-				value: AlignType.top
+				value: "4"
 			},
 			{
 				label: localeService.t("image-panel.align.middle"),
-				value: AlignType.middle
+				value: "5"
 			},
 			{
 				label: localeService.t("image-panel.align.bottom"),
-				value: AlignType.bottom
+				value: "6"
 			}
 		] },
 		{ options: [{
 			label: localeService.t("image-panel.align.horizon"),
-			value: AlignType.horizon
+			value: "7"
 		}, {
 			label: localeService.t("image-panel.align.vertical"),
-			value: AlignType.vertical
+			value: "8"
 		}] }
 	];
 	function handleAlignChange(value) {
@@ -2688,48 +2658,48 @@ const ImageCropper = (props) => {
 	const canUseShapeClip = useObservable(clipService.canUseShapeClip$, false);
 	const { drawings, cropperShow } = props;
 	if (drawings[0] == null) return;
-	const [cropValue, setCropValue] = useState(CropType.FREE);
+	const [cropValue, setCropValue] = useState("0");
 	const cropStateRef = useRef(false);
 	const cropOptions = [
 		{
 			label: localeService.t("image-panel.crop.mode"),
-			value: CropType.FREE
+			value: "0"
 		},
 		{
 			label: "1:1",
-			value: CropType.R1_1
+			value: "1"
 		},
 		{
 			label: "16:9",
-			value: CropType.R16_9
+			value: "2"
 		},
 		{
 			label: "9:16",
-			value: CropType.R9_16
+			value: "3"
 		},
 		{
 			label: "5:4",
-			value: CropType.R5_4
+			value: "4"
 		},
 		{
 			label: "4:5",
-			value: CropType.R4_5
+			value: "5"
 		},
 		{
 			label: "4:3",
-			value: CropType.R4_3
+			value: "6"
 		},
 		{
 			label: "3:4",
-			value: CropType.R3_4
+			value: "7"
 		},
 		{
 			label: "3:2",
-			value: CropType.R3_2
+			value: "8"
 		},
 		{
 			label: "2:3",
-			value: CropType.R2_3
+			value: "9"
 		}
 	];
 	useEffect(() => {