@univerjs/drawing-ui 1.0.3 → 1.1.0

package/lib/index.js

@@ -1,10 +1,10 @@
 import { ArrangeTypeEnum, BooleanNumber, CommandType, DependentOn, Disposable, DisposableCollection, DrawingTypeEnum, ICommandService, IConfigService, IImageIoService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, PositionedObjectLayoutType, ThemeService, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
-import { DRAWING_GROUPABLE_TYPES, IDrawingManagerService, SetDrawingSelectedOperation, UniverDrawingPlugin, getDrawingShapeKeyByDrawingSearch, isGroupableDrawingType, resolveDrawingRotateEnabled } from "@univerjs/drawing";
+import { DRAWING_GROUPABLE_TYPES, IDrawingManagerService, SetDrawingSelectedOperation, UniverDrawingPlugin, getDrawingShapeKeyByDrawingSearch, isGroupableDrawingType, normalizeImageOpacity, resolveDrawingRotateEnabled } from "@univerjs/drawing";
 import { CURSOR_TYPE, Canvas, DRAWING_OBJECT_LAYER_INDEX, DrawingGroupObject, Group, IRenderManagerService, Image as Image$1, RENDER_CLASS_TYPE, Rect, Shape, UniverRenderEnginePlugin, Vector2, degToRad, getGroupState, precisionTo, transformObjectOutOfGroup } from "@univerjs/engine-render";
 import { BuiltInUIPart, ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, ILayoutService, IMenuManagerService, IMessageService, IShortcutService, IUIPartsService, IconManager, KeyCode, MenuItemType, MobileMenu, connectInjector, useDependency, useObservable } from "@univerjs/ui";
 import { BehaviorSubject, Observable, bufferTime, combineLatest, filter, map, merge as merge$1, of, startWith, switchMap } from "rxjs";
 import { ArrowDownIcon, ArrowUpIcon, AutofillDoubleIcon, BottomIcon, ChartIcon, CheckMarkIcon, CloseIcon, CreateCopyIcon, CropIcon, DeleteIcon, DocSettingIcon, ExpandIcon, EyeIcon, EyelashIcon, GroupIcon, LocateFixedIcon, LockIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, TextWrapShapeIcon, TopmostIcon, UngroupIcon, UnlockIcon } from "@univerjs/icons";
-import { Button, Checkbox, Dropdown, DropdownMenu, Input, InputNumber, MessageType, MobileActionRow, MobileSelect, Select, Separator, StateIconButton, Tooltip, borderClassName, clsx, render, unmount } from "@univerjs/design";
+import { Button, Checkbox, Dropdown, DropdownMenu, Input, InputNumber, MessageType, MobileActionRow, MobileSelect, Select, Separator, StateIconButton, Textarea, Tooltip, borderClassName, clsx, render, unmount } from "@univerjs/design";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement, useEffect, useMemo, useRef, useState } from "react";
 
@@ -650,7 +650,7 @@ const menuSchema = { [ContextMenuPosition.DRAWING]: { [ContextMenuGroup.OTHERS]:
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "1.0.3";
+var version = "1.1.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -659,7 +659,7 @@ const configSymbol = Symbol(DRAWING_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -670,7 +670,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -683,14 +683,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -743,7 +743,7 @@ var DrawingImageClipService = class extends Disposable {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -751,7 +751,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/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);
@@ -784,7 +784,7 @@ let DrawingRenderService = class DrawingRenderService {
 		this._drawingImageClipService = _drawingImageClipService;
 	}
 	async renderImages(imageParam, scene, options) {
-		const { transform: singleTransform, drawingType, source, imageSourceType, srcRect, prstGeom, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms, adjustValues, hidden } = imageParam;
+		const { transform: singleTransform, drawingType, source, imageSourceType, srcRect, prstGeom, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms, adjustValues, hidden, opacity } = imageParam;
 		const { docxHeaderFooterDrawing, layoutType } = imageParam;
 		if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
 		if (!this._drawingManagerService.getDrawingVisible()) return;
@@ -815,6 +815,7 @@ let DrawingRenderService = class DrawingRenderService {
 					skewY
 				});
 				(_setClipBounds = imageShape.setClipBounds) === null || _setClipBounds === void 0 || _setClipBounds.call(imageShape, transform.clipBounds);
+				if (this._univerInstanceService.getUnitType(unitId) === UniverInstanceType.UNIVER_SHEET || opacity !== void 0) imageShape.setOpacity(normalizeImageOpacity(opacity));
 				if ("hidden" in imageParam) hidden ? imageShape.hide() : imageShape.show();
 				ensureDrawingRenderLayer(scene, imageShape, imageParam);
 				continue;
@@ -823,6 +824,7 @@ let DrawingRenderService = class DrawingRenderService {
 			const zIndex = orders.indexOf(drawingId);
 			const imageConfig = {
 				...transform,
+				opacity: normalizeImageOpacity(opacity),
 				zIndex: zIndex === -1 ? orders.length - 1 : zIndex
 			};
 			const imageNativeCache = this._imageIoService.getImageSourceCache(source, imageSourceType);
@@ -1297,12 +1299,12 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 				subUnitId,
 				drawingId
 			});
-			const drawingShapes = scene.fuzzyMathObjects(oKey, true);
-			if (drawingShapes == null || drawingShapes.length === 0) return;
+			const drawingObjects = scene.fuzzyMathObjects(oKey, true);
+			if (drawingObjects.length === 0) return;
 			const index = this._drawingManagerService.getDrawingOrder(unitId, subUnitId).indexOf(drawingId);
-			for (const shape of drawingShapes) {
-				shape.setProps({ zIndex: index });
-				shape.makeDirty();
+			for (const object of drawingObjects) {
+				object.zIndex = index;
+				object.makeDirty();
 			}
 		});
 	}
@@ -1337,6 +1339,14 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 				if (disposeDrawingRenderObject(scene, param)) {
 					var _scene$getTransformer2;
 					(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.clearSelectedObjects();
+				} else {
+					const transformer = scene.getTransformer();
+					const key = getDrawingShapeKeyByDrawingSearch(param);
+					const selectedKeys = [...(transformer === null || transformer === void 0 ? void 0 : transformer.getSelectedObjectMap().keys()) ?? []].filter((selectedKey) => selectedKey === key || selectedKey.startsWith(`${key}#-#`));
+					if (selectedKeys.length > 0) {
+						if (selectedKeys.length === (transformer === null || transformer === void 0 ? void 0 : transformer.getSelectedObjectMap().size)) transformer.clearSelectedObjects();
+						else transformer === null || transformer === void 0 || transformer.clearControlByIds(selectedKeys);
+					}
 				}
 			});
 		}));
@@ -1383,7 +1393,6 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 	_drawingRefreshListener() {
 		this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe((params) => {
 			params.forEach((param) => {
-				var _setClipBounds2;
 				const { unitId, subUnitId, drawingId } = param;
 				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 				if (renderObject == null) return;
@@ -1392,38 +1401,44 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 				const { transform } = drawingParam;
 				const { scene } = renderObject;
 				if (transform == null) return true;
-				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
-					unitId,
-					subUnitId,
-					drawingId
-				});
-				const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
 				const drawingParamWithRefreshMetadata = mergeRefreshMetadata(drawingParam, param);
-				if (drawingShape == null) {
-					if (drawingParamWithRefreshMetadata.hidden === true) return true;
-					this._drawingManagerService.addNotification([{
+				const isMultiTransform = drawingParam.isMultiTransform === BooleanNumber.TRUE;
+				const transforms = isMultiTransform ? drawingParam.transforms ?? [] : [transform];
+				let hasMissingShape = false;
+				transforms.forEach((instanceTransform, index) => {
+					var _setClipBounds2;
+					const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
 						unitId,
 						subUnitId,
 						drawingId
-					}]);
-					return true;
-				}
-				const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = false, flipY = false, skewX = 0, skewY = 0 } = transform;
-				drawingShape.transformByState({
-					left,
-					top,
-					width,
-					height,
-					angle,
-					flipX,
-					flipY,
-					skewX,
-					skewY
+					}, isMultiTransform ? index : void 0);
+					const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
+					if (drawingShape == null) {
+						hasMissingShape = true;
+						return;
+					}
+					const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = false, flipY = false, skewX = 0, skewY = 0 } = instanceTransform;
+					drawingShape.transformByState({
+						left,
+						top,
+						width,
+						height,
+						angle,
+						flipX,
+						flipY,
+						skewX,
+						skewY
+					});
+					(_setClipBounds2 = drawingShape.setClipBounds) === null || _setClipBounds2 === void 0 || _setClipBounds2.call(drawingShape, instanceTransform.clipBounds);
+					syncDrawingHiddenState(drawingShape, drawingParamWithRefreshMetadata);
+					syncDrawingSelectableState(drawingShape, drawingParamWithRefreshMetadata, scene, this._drawingManagerService);
+					ensureDrawingRenderLayer(scene, drawingShape, drawingParamWithRefreshMetadata);
 				});
-				(_setClipBounds2 = drawingShape.setClipBounds) === null || _setClipBounds2 === void 0 || _setClipBounds2.call(drawingShape, transform.clipBounds);
-				syncDrawingHiddenState(drawingShape, drawingParamWithRefreshMetadata);
-				syncDrawingSelectableState(drawingShape, drawingParamWithRefreshMetadata, scene, this._drawingManagerService);
-				ensureDrawingRenderLayer(scene, drawingShape, drawingParamWithRefreshMetadata);
+				if (hasMissingShape && drawingParamWithRefreshMetadata.hidden !== true) this._drawingManagerService.addNotification([{
+					unitId,
+					subUnitId,
+					drawingId
+				}]);
 			});
 		}));
 	}
@@ -3274,14 +3289,20 @@ function ToolbarGroup(props) {
 	});
 }
 function ToolbarButton(props) {
+	const [tooltipVisible, setTooltipVisible] = useState(false);
 	return /* @__PURE__ */ jsx(Tooltip, {
 		className: "univer-fill-mode-backwards univer-delay-100",
 		title: props.title,
 		placement: "bottom",
+		visible: tooltipVisible,
+		onVisibleChange: setTooltipVisible,
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			disabled: props.disabled,
-			onClick: props.onClick,
+			onClick: () => {
+				setTooltipVisible(false);
+				props.onClick();
+			},
 			className: clsx("univer-flex univer-h-6 univer-w-6 univer-items-center univer-justify-center univer-rounded-md univer-border-none univer-bg-transparent univer-p-0 univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-40 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-100 univer-text-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-primary-300": props.active }),
 			children: props.children
 		})
@@ -3289,10 +3310,14 @@ function ToolbarButton(props) {
 }
 function ToolbarDropdownButton(props) {
 	const [open, setOpen] = useState(false);
+	const [tooltipVisible, setTooltipVisible] = useState(false);
 	const activeOption = props.options.find((option) => option.value === props.value) ?? props.options[0];
 	return /* @__PURE__ */ jsx(Dropdown, {
 		open,
-		onOpenChange: setOpen,
+		onOpenChange: (open) => {
+			setOpen(open);
+			if (open) setTooltipVisible(false);
+		},
 		overlay: /* @__PURE__ */ jsx("div", {
 			className: "univer-min-w-32 univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 univer-p-1 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-900",
 			children: props.options.map((option) => /* @__PURE__ */ jsxs("button", {
@@ -3315,6 +3340,8 @@ function ToolbarDropdownButton(props) {
 			className: "univer-fill-mode-backwards univer-delay-100",
 			title: props.title,
 			placement: "bottom",
+			visible: tooltipVisible && !open,
+			onVisibleChange: (visible) => setTooltipVisible(visible && !open),
 			children: /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				className: clsx("univer-flex univer-h-6 univer-min-w-9 univer-items-center univer-justify-center univer-gap-1 univer-rounded-md univer-border-none univer-bg-transparent univer-px-1.5 univer-text-sm univer-text-gray-700 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-100 univer-text-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-primary-300": open }),
@@ -4438,7 +4465,7 @@ let ImageUpdateController = class ImageUpdateController extends Disposable {
 				const { unitId, subUnitId, drawingId } = param;
 				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
 				if (drawingParam == null) return;
-				const { transform, drawingType, srcRect, prstGeom, source, imageSourceType } = drawingParam;
+				const { transform, drawingType, srcRect, prstGeom, source, imageSourceType, opacity } = drawingParam;
 				if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
 				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 				if (renderObject == null) return;
@@ -4467,6 +4494,7 @@ let ImageUpdateController = class ImageUpdateController extends Disposable {
 				ensureDrawingRenderLayer(scene, imageShape, drawingParam);
 				imageShape.setSrcRect(srcRect);
 				imageShape.setPrstGeom(prstGeom);
+				syncImageOpacity(imageShape, opacity, this._currentUniverService.getUnitType(unitId) === UniverInstanceType.UNIVER_SHEET);
 				if (source != null && source.length > 0 && (imageSourceType === ImageSourceType.BASE64 || imageSourceType === ImageSourceType.URL)) imageShape.changeSource(source);
 			});
 		}));
@@ -4494,6 +4522,9 @@ ImageUpdateController = __decorate([
 	__decorateParam(3, IUniverInstanceService),
 	__decorateParam(4, Inject(DrawingRenderService))
 ], ImageUpdateController);
+function syncImageOpacity(image, opacity, isSheet) {
+	if (isSheet || opacity !== void 0) image.setOpacity(normalizeImageOpacity(opacity));
+}
 
 //#endregion
 //#region src/controllers/ui.controller.ts
@@ -5249,8 +5280,8 @@ function ObjectDetailsEditor(props) {
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
 					children: labels.description
-				}), /* @__PURE__ */ jsx("textarea", {
-					className: clsx(descriptionClassName, "univer-box-border univer-min-h-16 univer-w-full univer-resize-none univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 univer-p-2 univer-text-sm univer-text-gray-900 univer-outline-none focus:univer-border-primary-500 focus:univer-ring-1 focus:univer-ring-primary-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-70 dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-gray-100 dark:focus:!univer-ring-primary-900"),
+				}), /* @__PURE__ */ jsx(Textarea, {
+					className: clsx("univer-min-h-16 univer-resize-none univer-text-sm", descriptionClassName),
 					value: draftDescription,
 					disabled,
 					placeholder: labels.descriptionPlaceholder,

package/lib/types/index.d.ts

@@ -34,7 +34,7 @@ export { getUpdateParams } from './utils/get-update-params';
 export { getImageCropRect } from './utils/image-crop-transform';
 export { ImageCropperObject } from './views/crop/image-cropper-object';
 export { COMPONENT_IMAGE_POPUP_MENU, COMPONENT_MOBILE_IMAGE_POPUP_MENU, } from './views/image-popup-menu/component-name';
-export type { IImagePopupMenuItem } from './views/image-popup-menu/ImagePopupMenu';
+export type { IImagePopupMenuItem, IImagePopupMenuProps } from './views/image-popup-menu/ImagePopupMenu';
 export { MobileObjectListPanel } from './views/object-list-panel/MobileObjectListPanel';
 export { getObjectListPanelSectionIdForDrawingType, isFloatingObjectListDrawingType, OBJECT_LIST_CANVAS_SECTION_ID, OBJECT_LIST_FLOATING_SECTION_ID, } from './views/object-list-panel/object-list-panel-layer';
 export type { ObjectListPanelSectionId } from './views/object-list-panel/object-list-panel-layer';