@univerjs/drawing-ui 1.0.0-alpha.0 → 1.0.0-alpha.2

package/lib/index.js

@@ -1,5 +1,5 @@
 import { ArrangeTypeEnum, BooleanNumber, CommandType, Disposable, DrawingTypeEnum, ICommandService, IConfigService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, PositionedObjectLayoutType, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
-import { IDrawingManagerService, IImageIoService, ImageSourceType as ImageSourceType$1, SetDrawingSelectedOperation, getDrawingShapeKeyByDrawingSearch } from "@univerjs/drawing";
+import { DRAWING_GROUPABLE_TYPES, IDrawingManagerService, IImageIoService, ImageSourceType as ImageSourceType$1, SetDrawingSelectedOperation, getDrawingShapeKeyByDrawingSearch, isGroupableDrawingType, resolveDrawingRotateEnabled } from "@univerjs/drawing";
 import { CURSOR_TYPE, Canvas, DRAWING_OBJECT_LAYER_INDEX, DrawingGroupObject, Group, IRenderManagerService, Image, RENDER_CLASS_TYPE, Rect, Shape, Vector2, degToRad, getGroupState, precisionTo, transformObjectOutOfGroup } from "@univerjs/engine-render";
 import { AutofillDoubleIcon, BottomIcon, CreateCopyIcon, CropIcon, DeleteIcon, DocSettingIcon, GroupIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, TextWrapShapeIcon, TopmostIcon, UngroupIcon } from "@univerjs/icons";
 import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, IMenuManagerService, IMessageService, IconManager, MenuItemType, useDependency, useObservable } from "@univerjs/ui";
@@ -131,15 +131,13 @@ const SetDrawingArrangeBackwardOperation = {
 //#endregion
 //#region src/commands/operations/drawing-group.operation.ts
 /**
-* Now only support grouping images, shapes, and groups.
+* Now only support grouping images, shapes, charts, and groups.
 */
-const DRAWING_GROUP_TYPES = [
-	DrawingTypeEnum.DRAWING_IMAGE,
-	DrawingTypeEnum.DRAWING_SHAPE,
-	DrawingTypeEnum.DRAWING_GROUP
-];
+const DRAWING_GROUP_TYPES = DRAWING_GROUPABLE_TYPES;
 /**
-* Group the selected drawings into a new group. The selected drawings must be of type image, shape, or group, and there must be at least 2 drawings selected.
+* Group the selected drawings into a new group. The selected drawings must be
+* of type image, shape, chart, or group, and there must be at least 2 drawings
+* selected.
 */
 const SetDrawingGroupOperation = {
 	id: "drawing.operation.set-drawing-group",
@@ -148,7 +146,7 @@ const SetDrawingGroupOperation = {
 		const drawingManagerService = accessor.get(IDrawingManagerService);
 		const drawings = params.drawings || drawingManagerService.getFocusDrawings();
 		if (drawings.length < 2) return false;
-		if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return false;
+		if (!drawings.every((drawing) => isGroupableDrawingType(drawing.drawingType))) return false;
 		const { unitId, subUnitId } = drawings[0];
 		const groupId = generateRandomId(10);
 		const groupTransform = getGroupState(0, 0, drawings.map((o) => o.transform || {}));
@@ -170,11 +168,12 @@ const SetDrawingGroupOperation = {
 				left: 0,
 				top: 0
 			};
-			const { unitId, subUnitId, drawingId } = drawing;
+			const { unitId, subUnitId, drawingId, drawingType } = drawing;
 			return {
 				unitId,
 				subUnitId,
 				drawingId,
+				drawingType,
 				transform: { ...transform },
 				groupId
 			};
@@ -266,8 +265,48 @@ const ImageResetSizeOperation = {
 	}
 };
 
+//#endregion
+//#region src/utils/rotate-enabled.ts
+function isKnownDrawingUINonRotatableType(drawingType) {
+	return drawingType === DrawingTypeEnum.DRAWING_CHART;
+}
+function resolveDrawingUIRotateEnabled(drawing, options = {}) {
+	var _options$isKnownNonRo;
+	return resolveDrawingRotateEnabled(drawing, {
+		...options,
+		isKnownNonRotatableType: (_options$isKnownNonRo = options.isKnownNonRotatableType) !== null && _options$isKnownNonRo !== void 0 ? _options$isKnownNonRo : isKnownDrawingUINonRotatableType
+	});
+}
+
 //#endregion
 //#region src/controllers/utils.ts
+function getDrawingRenderObject(scene, drawingSearch) {
+	var _scene$getObjectInclu;
+	const key = getDrawingShapeKeyByDrawingSearch(drawingSearch);
+	return (_scene$getObjectInclu = scene.getObjectIncludeInGroup(key)) !== null && _scene$getObjectInclu !== void 0 ? _scene$getObjectInclu : null;
+}
+function disposeDrawingRenderObject(scene, drawingSearch) {
+	const object = getDrawingRenderObject(scene, drawingSearch);
+	if (object == null) return false;
+	object.dispose();
+	return true;
+}
+function getRenderObjectForDrawing(scene, drawing) {
+	return getDrawingRenderObject(scene, drawing);
+}
+function syncGroupRotateEnabled(group, groupParam, scene, drawingManagerService, children) {
+	const rotateEnabled = resolveDrawingUIRotateEnabled(groupParam, {
+		getChildren: (drawing) => {
+			if (children && drawing.drawingId === groupParam.drawingId && drawing.unitId === groupParam.unitId && drawing.subUnitId === groupParam.subUnitId) return children;
+			return drawingManagerService.getDrawingsByGroup(drawing);
+		},
+		getRenderObject: (drawing) => getRenderObjectForDrawing(scene, drawing)
+	});
+	group.transformerConfig = {
+		...group.transformerConfig,
+		rotateEnabled
+	};
+}
 function insertGroupObject(objectParam, object, scene, drawingManagerService) {
 	const groupParam = drawingManagerService.getDrawingByParam(objectParam);
 	if (groupParam == null) return;
@@ -278,11 +317,13 @@ function insertGroupObject(objectParam, object, scene, drawingManagerService) {
 		const objects = groupObject.getObjects();
 		for (const obj of objects) if (obj.oKey === object.oKey) return;
 		groupObject.addObject(object);
+		syncGroupRotateEnabled(groupObject, groupParam, scene, drawingManagerService);
 		return;
 	}
 	const group = new DrawingGroupObject(groupKey);
 	scene.addObject(group, DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group);
 	group.addObject(object);
+	syncGroupRotateEnabled(group, groupParam, scene, drawingManagerService);
 	const { transform, groupBaseBound } = groupParam;
 	if (groupBaseBound) group.setBaseBound(groupBaseBound);
 	if (groupParam.groupId) {
@@ -321,7 +362,7 @@ function getCurrentUnitInfo(currentUniverService, propUnitId) {
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "1.0.0-alpha.0";
+var version = "1.0.0-alpha.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -733,6 +774,7 @@ let DrawingRenderService = class DrawingRenderService {
 	}
 	async renderImages(imageParam, scene) {
 		const { transform: singleTransform, drawingType, source, imageSourceType, srcRect, prstGeom, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms, adjustValues, hidden } = imageParam;
+		const { docxHeaderFooterDrawing, layoutType } = imageParam;
 		if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
 		if (!this._drawingManagerService.getDrawingVisible()) return;
 		if (this._univerInstanceService.getUnitType(unitId) === UniverInstanceType.UNIVER_SHEET && subUnitId !== this._getActiveSheetId()) return;
@@ -793,7 +835,8 @@ let DrawingRenderService = class DrawingRenderService {
 				imageConfig.url = source;
 				shouldBeCache = true;
 			}
-			if (hidden) imageConfig.visible = false;
+			const shouldWaitForInlineTransform = docxHeaderFooterDrawing === true && layoutType === PositionedObjectLayoutType.INLINE;
+			if (hidden || shouldWaitForInlineTransform) imageConfig.visible = false;
 			if (scene.getObject(imageShapeKey)) continue;
 			imageConfig.printable = true;
 			const image = new Image(imageShapeKey, imageConfig);
@@ -940,16 +983,18 @@ function getUpdateParams(objects, drawingManagerService) {
 
 //#endregion
 //#region src/controllers/drawing-update.controller.ts
+function hasRefreshMetadata(refreshParam) {
+	return "hidden" in refreshParam || "behindText" in refreshParam;
+}
 function syncDrawingHiddenState(shape, drawingParam) {
 	if (!("hidden" in drawingParam)) return;
 	drawingParam.hidden === true ? shape.hide() : shape.show();
 }
 function mergeRefreshMetadata(drawingParam, refreshParam) {
-	const metadata = refreshParam;
-	if (!("hidden" in metadata) && !("behindText" in metadata)) return drawingParam;
+	if (!hasRefreshMetadata(refreshParam)) return drawingParam;
 	return {
 		...drawingParam,
-		...metadata
+		...refreshParam
 	};
 }
 let DrawingUpdateController = class DrawingUpdateController extends Disposable {
@@ -1056,6 +1101,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 		}));
 		scene.addObject(group, DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group);
 		group.addObjects(...objects);
+		syncGroupRotateEnabled(group, parent, scene, this._drawingManagerService, children);
 		if (parent.groupBaseBound) group.setBaseBound(parent.groupBaseBound);
 		if (parent.groupId) {
 			group.isInGroup = true;
@@ -1268,15 +1314,12 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 				if (renderObject == null) return;
 				const { scene } = renderObject;
-				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+				if (disposeDrawingRenderObject(scene, {
 					unitId,
 					subUnitId,
 					drawingId
-				});
-				const drawingShapes = scene.fuzzyMathObjects(drawingShapeKey, true);
-				if (drawingShapes.length > 0) {
+				})) {
 					var _scene$getTransformer;
-					for (const drawingShape of drawingShapes) drawingShape.dispose();
 					(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.clearSelectedObjects();
 				}
 			});
@@ -1337,7 +1380,7 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 					subUnitId,
 					drawingId
 				});
-				const drawingShape = scene.getObject(drawingShapeKey);
+				const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
 				const drawingParamWithRefreshMetadata = mergeRefreshMetadata(drawingParam, param);
 				if (drawingShape == null) {
 					if (drawingParamWithRefreshMetadata.hidden === true) return true;
@@ -2218,10 +2261,10 @@ function getMenuStateByDrawingFocusChangedObservable$(accessor, type) {
 			if (!drawings || drawings.length === 0) return subscriber.next(true);
 			if (type === "group") {
 				if (drawings.length < 2) return subscriber.next(true);
-				if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return subscriber.next(true);
+				if (!drawings.every((drawing) => isGroupableDrawingType(drawing.drawingType))) return subscriber.next(true);
 			} else if (type === "unGroup") {
 				if (drawings.filter((drawing) => drawing.drawingType === DrawingTypeEnum.DRAWING_GROUP).length === 0) return subscriber.next(true);
-			} else if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return subscriber.next(true);
+			} else if (!drawings.every((drawing) => isGroupableDrawingType(drawing.drawingType))) return subscriber.next(true);
 			subscriber.next(false);
 		};
 		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
@@ -2641,6 +2684,29 @@ const DrawingGroup = (props) => {
 //#region src/utils/config.ts
 const RANGE_DRAWING_ROTATION_LIMIT = [-360, 360];
 
+//#endregion
+//#region src/views/panel/drawing-transform-rotation.ts
+function isDrawingTransformRotationDisabled(rotateEnabled) {
+	return !rotateEnabled;
+}
+function createDrawingTransformRotationChangeHandler(options) {
+	return (val) => {
+		if (isDrawingTransformRotationDisabled(options.rotateEnabled)) return;
+		if (val == null) return;
+		const { unitId, subUnitId, drawingId, drawingType } = options.drawingParam;
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { angle: val }
+		};
+		options.setRotation(val);
+		options.emitUpdate([updateParam]);
+		options.notifyChange();
+	};
+}
+
 //#endregion
 //#region src/views/panel/DrawingTransform.tsx
 const INPUT_DEBOUNCE_TIME = 300;
@@ -2668,6 +2734,8 @@ const DrawingTransform = (props) => {
 	const [yPosition, setYPosition] = useState(originY);
 	const [rotation, setRotation] = useState(originRotation);
 	const [lockRatio, setLockRatio] = useState(transformer.keepRatio);
+	const rotateEnabled = resolveDrawingUIRotateEnabled(drawingParam, { getChildren: (drawing) => drawingManagerService.getDrawingsByGroup(drawing) });
+	const rotationDisabled = isDrawingTransformRotationDisabled(rotateEnabled);
 	const checkMoveBoundary = (left, top, width, height) => {
 		const { width: topSceneWidth, height: topSceneHeight } = topScene;
 		const { ancestorLeft, ancestorTop } = scene;
@@ -2808,19 +2876,18 @@ const DrawingTransform = (props) => {
 		drawingManagerService.featurePluginUpdateNotification([updateParam]);
 		transformer.refreshControls().changeNotification();
 	}, INPUT_DEBOUNCE_TIME);
-	const handleRotationChange = (val) => {
-		if (val == null) return;
-		const updateParam = {
+	const handleRotationChange = createDrawingTransformRotationChangeHandler({
+		rotateEnabled,
+		drawingParam: {
 			unitId,
 			subUnitId,
 			drawingId,
-			drawingType,
-			transform: { angle: val }
-		};
-		setRotation(val);
-		drawingManagerService.featurePluginUpdateNotification([updateParam]);
-		transformer.refreshControls().changeNotification();
-	};
+			drawingType
+		},
+		setRotation,
+		emitUpdate: (updateParams) => drawingManagerService.featurePluginUpdateNotification(updateParams),
+		notifyChange: () => transformer.refreshControls().changeNotification()
+	});
 	const handleLockRatioChange = (val) => {
 		setLockRatio(val);
 		transformer.keepRatio = val;
@@ -2882,6 +2949,7 @@ const DrawingTransform = (props) => {
 						value: rotation,
 						min: RANGE_DRAWING_ROTATION_LIMIT[0],
 						max: RANGE_DRAWING_ROTATION_LIMIT[1],
+						disabled: rotationDisabled,
 						onChange: handleRotationChange
 					})] })
 				]
@@ -3126,4 +3194,4 @@ const DrawingCommonPanel = (props) => {
 };
 
 //#endregion
-export { AutoImageCropOperation, COMPONENT_IMAGE_POPUP_MENU, CancelDrawingGroupOperation, CloseImageCropOperation, DRAWING_GROUP_TYPES, DrawingCommonPanel, DrawingImageClipService, DrawingRenderService, IMAGE_CLIP_SHAPE_PICKER_COMPONENT, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, SetDrawingAlignOperation, SetDrawingArrangeOperation, SetDrawingGroupOperation, UniverDrawingUIPlugin, getCurrentUnitInfo, getUpdateParams, insertGroupObject };
+export { AutoImageCropOperation, COMPONENT_IMAGE_POPUP_MENU, CancelDrawingGroupOperation, CloseImageCropOperation, DRAWING_GROUP_TYPES, DrawingCommonPanel, DrawingImageClipService, DrawingRenderService, IMAGE_CLIP_SHAPE_PICKER_COMPONENT, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, SetDrawingAlignOperation, SetDrawingArrangeOperation, SetDrawingGroupOperation, UniverDrawingUIPlugin, disposeDrawingRenderObject, getCurrentUnitInfo, getDrawingRenderObject, getUpdateParams, insertGroupObject };

package/lib/types/commands/operations/drawing-group.operation.d.ts

@@ -16,14 +16,16 @@
 import type { IDrawingParam, IOperation } from '@univerjs/core';
 import { DrawingTypeEnum } from '@univerjs/core';
 /**
- * Now only support grouping images, shapes, and groups.
+ * Now only support grouping images, shapes, charts, and groups.
  */
-export declare const DRAWING_GROUP_TYPES: DrawingTypeEnum[];
+export declare const DRAWING_GROUP_TYPES: readonly [DrawingTypeEnum.DRAWING_IMAGE, DrawingTypeEnum.DRAWING_SHAPE, DrawingTypeEnum.DRAWING_CHART, DrawingTypeEnum.DRAWING_GROUP];
 export interface IDrawingGroupOperationParams {
     drawings?: IDrawingParam[];
 }
 /**
- * Group the selected drawings into a new group. The selected drawings must be of type image, shape, or group, and there must be at least 2 drawings selected.
+ * Group the selected drawings into a new group. The selected drawings must be
+ * of type image, shape, chart, or group, and there must be at least 2 drawings
+ * selected.
  */
 export declare const SetDrawingGroupOperation: IOperation<IDrawingGroupOperationParams>;
 export interface ICancelDrawingGroupOperationParams {

package/lib/types/controllers/utils.d.ts

@@ -13,10 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { IDrawingSearch, IUniverInstanceService, Nullable } from '@univerjs/core';
+import type { IDrawingParam, IDrawingSearch, IUniverInstanceService, Nullable } from '@univerjs/core';
 import type { IDrawingManagerService } from '@univerjs/drawing';
 import type { BaseObject, Scene } from '@univerjs/engine-render';
 import { UniverInstanceType } from '@univerjs/core';
+import { Group } from '@univerjs/engine-render';
+export declare function getDrawingRenderObject(scene: Scene, drawingSearch: IDrawingSearch): BaseObject | null;
+export declare function disposeDrawingRenderObject(scene: Scene, drawingSearch: IDrawingSearch): boolean;
+export declare function syncGroupRotateEnabled(group: Group, groupParam: IDrawingParam, scene: Scene, drawingManagerService: IDrawingManagerService, children?: readonly IDrawingParam[]): void;
 export declare function insertGroupObject(objectParam: IDrawingSearch, object: BaseObject, scene: Scene, drawingManagerService: IDrawingManagerService): void;
 export declare function getCurrentUnitInfo(currentUniverService: IUniverInstanceService, propUnitId?: string): {
     unitId: string;

package/lib/types/index.d.ts

@@ -22,7 +22,7 @@ export type { ICancelDrawingGroupOperationParams, IDrawingGroupOperationParams,
 export { AutoImageCropOperation, CloseImageCropOperation, OpenImageCropOperation, } from './commands/operations/image-crop.operation';
 export { ImageResetSizeOperation } from './commands/operations/image-reset-size.operation';
 export type { IUniverDrawingUIConfig } from './config/config';
-export { getCurrentUnitInfo, insertGroupObject } from './controllers/utils';
+export { disposeDrawingRenderObject, getCurrentUnitInfo, getDrawingRenderObject, insertGroupObject } from './controllers/utils';
 export { UniverDrawingUIPlugin } from './plugin';
 export { DrawingImageClipService, IMAGE_CLIP_SHAPE_PICKER_COMPONENT } from './services/drawing-image-clip.service';
 export type { ImageShapeClipDelegate } from './services/drawing-image-clip.service';

package/lib/types/services/drawing-render.service.d.ts

@@ -23,6 +23,7 @@ import { IGalleryService } from '@univerjs/ui';
 import { DrawingImageClipService } from './drawing-image-clip.service';
 type IDrawingParamWithBehindText = (Partial<IDrawingParam> | Partial<IImageData>) & {
     behindText?: boolean | BooleanNumber;
+    docxHeaderFooterDrawing?: boolean;
 };
 export declare const DOC_DRAWING_BEHIND_TEXT_LAYER_INDEX = 1;
 export declare function getDrawingRenderLayerIndex(param: IDrawingParamWithBehindText): number;

package/lib/types/utils/rotate-enabled.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { DrawingType, IDrawingParam } from '@univerjs/core';
+import type { IDrawingRotateEnabledResolverOptions } from '@univerjs/drawing';
+export declare function isKnownDrawingUINonRotatableType(drawingType: DrawingType): boolean;
+export declare function resolveDrawingUIRotateEnabled(drawing: IDrawingParam, options?: IDrawingRotateEnabledResolverOptions): boolean;

package/lib/types/views/image-popup-menu/ImagePopupMenu.d.ts

@@ -13,8 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { LocaleKey } from '../../locale/types';
 export interface IImagePopupMenuItem {
-    label: string;
+    label: LocaleKey;
     index: number;
     commandId: string;
     commandParams?: object;

package/lib/types/views/panel/drawing-transform-rotation.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { IDrawingParam } from '@univerjs/core';
+interface IDrawingTransformRotationChangeHandlerOptions {
+    rotateEnabled: boolean;
+    drawingParam: Pick<IDrawingParam, 'unitId' | 'subUnitId' | 'drawingId' | 'drawingType'>;
+    setRotation: (rotation: number) => void;
+    emitUpdate: (updateParams: IDrawingParam[]) => void;
+    notifyChange: () => void;
+}
+export declare function isDrawingTransformRotationDisabled(rotateEnabled: boolean): boolean;
+export declare function createDrawingTransformRotationChangeHandler(options: IDrawingTransformRotationChangeHandlerOptions): (val: number | null) => void;
+export {};