@univerjs/drawing-ui 0.21.1 → 0.22.0

package/README.md

@@ -1,27 +1,42 @@
 # @univerjs/drawing-ui
 
+[![npm version](https://img.shields.io/npm/v/@univerjs/drawing-ui?style=flat-square)](https://npmjs.com/package/@univerjs/drawing-ui)
+[![license](https://img.shields.io/npm/l/@univerjs/drawing-ui?style=flat-square)](https://npmjs.com/package/@univerjs/drawing-ui)
+[![downloads](https://img.shields.io/npm/dm/@univerjs/drawing-ui?style=flat-square)](https://npmjs.com/package/@univerjs/drawing-ui)
+
+`@univerjs/drawing-ui` provides common drawing UI services and components that document- or sheet-specific drawing packages build on.
+
 ## Package Overview
 
-| Package Name | UMD Namespace | Version | License | Downloads | Contains CSS | Contains i18n locales |
-| --- | --- | --- | --- | --- | :---: | :---: |
-| `@univerjs/drawing-ui` | `UniverDrawingUi` | [![][npm-version-shield]][npm-version-link] | ![][npm-license-shield] | ![][npm-downloads-shield] | ❌ | ❌ |
+| Package | UMD global | CSS | Locales | Facade entry |
+| --- | --- | :---: | :---: | :---: |
+| `@univerjs/drawing-ui` | `UniverDrawingUi` | Yes | Yes | No |
 
-## Introduction
+## Installation
+
+```sh
+pnpm add @univerjs/drawing-ui
+# or
+npm install @univerjs/drawing-ui
+```
+
+Keep all `@univerjs/*` packages on the same version.
 
 ## Usage
 
-### Installation
+```ts
+import '@univerjs/drawing-ui/lib/index.css';
+import EnUS from '@univerjs/drawing-ui/locale/en-US';
+import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui';
 
-```shell
-# Using npm
-npm install @univerjs/drawing
+univer.registerPlugin(UniverDrawingUIPlugin);
 
-# Using pnpm
-pnpm add @univerjs/drawing
+// Merge EnUS into your Univer locale map when this package contributes UI text.
 ```
 
-<!-- Links -->
-[npm-version-shield]: https://img.shields.io/npm/v/@univerjs/drawing-ui?style=flat-square
-[npm-version-link]: https://npmjs.com/package/@univerjs/drawing-ui
-[npm-license-shield]: https://img.shields.io/npm/l/@univerjs/drawing-ui?style=flat-square
-[npm-downloads-shield]: https://img.shields.io/npm/dm/@univerjs/drawing-ui?style=flat-square
+## Resources
+
+- [Documentation](https://docs.univer.ai)
+- [NPM package](https://npmjs.com/package/@univerjs/drawing-ui)
+- [GitHub repository](https://github.com/dream-num/univer)
+

package/lib/cjs/index.js

@@ -10,18 +10,6 @@ let react = require("react");
 let react_jsx_runtime = require("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.
 */
@@ -36,56 +24,56 @@ const SetDrawingAlignLeftOperation = {
 	id: "sheet.operation.set-drawing-align-left",
 	type: _univerjs_core.CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.left });
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "1" });
 	}
 };
 const SetDrawingAlignCenterOperation = {
 	id: "sheet.operation.set-drawing-align-center",
 	type: _univerjs_core.CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.center });
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "2" });
 	}
 };
 const SetDrawingAlignRightOperation = {
 	id: "sheet.operation.set-drawing-align-right",
 	type: _univerjs_core.CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.right });
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "3" });
 	}
 };
 const SetDrawingAlignTopOperation = {
 	id: "sheet.operation.set-drawing-align-top",
 	type: _univerjs_core.CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.top });
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "4" });
 	}
 };
 const SetDrawingAlignMiddleOperation = {
 	id: "sheet.operation.set-drawing-align-middle",
 	type: _univerjs_core.CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.middle });
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "5" });
 	}
 };
 const SetDrawingAlignBottomOperation = {
 	id: "sheet.operation.set-drawing-align-bottom",
 	type: _univerjs_core.CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.bottom });
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "6" });
 	}
 };
 const SetDrawingAlignHorizonOperation = {
 	id: "sheet.operation.set-drawing-align-horizon",
 	type: _univerjs_core.CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.horizon });
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "7" });
 	}
 };
 const SetDrawingAlignVerticalOperation = {
 	id: "sheet.operation.set-drawing-align-vertical",
 	type: _univerjs_core.CommandType.OPERATION,
 	handler: (accessor) => {
-		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.vertical });
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: "8" });
 	}
 };
 
@@ -261,19 +249,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: _univerjs_core.CommandType.OPERATION,
@@ -347,7 +322,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
@@ -686,7 +661,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);
@@ -694,7 +669,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);
@@ -811,7 +786,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) {
@@ -822,7 +797,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];
@@ -835,14 +810,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,
@@ -1012,7 +987,7 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 	_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;
@@ -1058,28 +1033,28 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 			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;
@@ -1105,14 +1080,14 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 			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;
 			}
 		});
@@ -1344,11 +1319,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 _univerjs_engine_render.Shape {
 	constructor(key, props) {
 		if (props == null) props = {};
@@ -1427,11 +1397,11 @@ var ImageCropperObject = class extends _univerjs_engine_render.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);
@@ -1562,34 +1532,34 @@ let ImageCropperController = class ImageCropperController extends _univerjs_core
 		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;
@@ -2226,46 +2196,46 @@ const DrawingAlign = (props) => {
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const { drawings, alignShow } = props;
-	const [alignValue, setAlignValue] = (0, react.useState)(AlignType.default);
+	const [alignValue, setAlignValue] = (0, react.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) {
@@ -2689,48 +2659,48 @@ const ImageCropper = (props) => {
 	const canUseShapeClip = (0, _univerjs_ui.useObservable)(clipService.canUseShapeClip$, false);
 	const { drawings, cropperShow } = props;
 	if (drawings[0] == null) return;
-	const [cropValue, setCropValue] = (0, react.useState)(CropType.FREE);
+	const [cropValue, setCropValue] = (0, react.useState)("0");
 	const cropStateRef = (0, react.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"
 		}
 	];
 	(0, react.useEffect)(() => {