feat(image): add event and enum (#4429)

packages/core/src/services/image-io/image-io.service.ts

@@ -18,9 +18,21 @@ import type { Observable } from 'rxjs';
 import type { Nullable } from '../../shared/types';
 import { createIdentifier } from '../../common/di';
 
+/**
+ * The type of image data source
+ */
 export enum ImageSourceType {
+    /**
+     * The image source is a URL, for example: https://avatars.githubusercontent.com/u/61444807?s=48&v=4
+     */
     URL = 'URL',
+    /**
+     * The image source is a UUID, this ID is generated by the Univer image hosting service. For specific generation rules, please refer to the Univer image hosting service API documentation.
+     */
     UUID = 'UUID',
+    /**
+     * The image source is BASE64, for example: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB7ZJ...
+     */
     BASE64 = 'BASE64',
 }
 

packages/core/src/shared/check-if-move.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { ITransformState } from '../types/interfaces/i-document-data';
+import type { ITransformState } from '../types/interfaces/i-drawing';
 import type { Nullable } from './types';
 
 export const MOVE_BUFFER_VALUE = 2;

packages/core/src/types/interfaces/i-document-data.ts

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import type { IAbsoluteTransform, ISize } from '../../shared/shape';
-import type { Nullable } from '../../shared/types';
+import type { ISize } from '../../shared/shape';
 import type { BooleanNumber, CellValueType, HorizontalAlign, LocaleType, TextDirection, VerticalAlign, WrapStrategy } from '../enum';
+import type { IDrawingParam } from './i-drawing';
 import type { IMention } from './i-mention';
 import type { IColorStyle, IStyleBase } from './i-style-data';
 
@@ -1084,66 +1084,3 @@ export enum PageOrientType {
 
 // #region - tech dept
 
-// TODO@Jocs: these types are here because of drawing coupled into the core of the document's model, which
-// is an anti-pattern. After fixing the problem, these types should be removed.
-
-/** @deprecated */
-export enum ArrangeTypeEnum {
-    forward,
-    backward,
-    front,
-    back,
-}
-
-/** @deprecated */
-export enum DrawingTypeEnum {
-    UNRECOGNIZED = -1,
-    DRAWING_IMAGE = 0,
-    DRAWING_SHAPE = 1,
-    DRAWING_CHART = 2,
-    DRAWING_TABLE = 3,
-    DRAWING_SMART_ART = 4,
-    DRAWING_VIDEO = 5,
-    DRAWING_GROUP = 6,
-    DRAWING_UNIT = 7,
-    DRAWING_DOM = 8,
-}
-
-/** @deprecated */
-export type DrawingType = DrawingTypeEnum | number;
-
-/** @deprecated */
-export interface IDrawingSpace {
-    unitId: string;
-    subUnitId: string; //sheetId, pageId and so on, it has a default name in doc business
-}
-
-/** @deprecated */
-export interface IDrawingSearch extends IDrawingSpace {
-    drawingId: string;
-}
-
-/** @deprecated */
-export interface IRotationSkewFlipTransform {
-    angle?: number;
-    skewX?: number;
-    skewY?: number;
-    flipX?: boolean;
-    flipY?: boolean;
-}
-
-/** @deprecated */
-export interface ITransformState extends IAbsoluteTransform, IRotationSkewFlipTransform {}
-
-/** @deprecated */
-export interface IDrawingParam extends IDrawingSearch {
-    drawingType: DrawingType;
-    transform?: Nullable<ITransformState>;
-    transforms?: Nullable<ITransformState[]>;
-    // The same drawing render in different place, like image in header and footer.
-    // The default value is BooleanNumber.FALSE. if it's true, Please use transforms.
-    isMultiTransform?: BooleanNumber;
-    groupId?: string;
-}
-
-// #endregion

packages/core/src/types/interfaces/i-drawing.ts

@@ -0,0 +1,120 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * 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 { IAbsoluteTransform } from '../../shared/shape';
+import type { Nullable } from '../../shared/types';
+import type { BooleanNumber } from '../enum/text-style';
+
+/**
+ * The layer type of Drawing, used to distinguish between forward, backward, front, and back
+ */
+export enum ArrangeTypeEnum {
+    /**
+     * Move the current object one layer up, possibly covering other objects
+     */
+    forward,
+    /**
+     * Move the current object one layer down, possibly being covered by other objects
+     */
+    backward,
+    /**
+     * Move the current object to the top layer
+     */
+    front,
+    /**
+     * Move the current object to the bottom layer
+     */
+    back,
+}
+
+/**
+ * Types of drawings, used to distinguish between images, shapes, charts, tables, SmartArt, videos, DrawingGroup, Unit, Dom, etc.
+ */
+export enum DrawingTypeEnum {
+    /**
+     * Unrecognized drawing type, requires user to determine
+     */
+    UNRECOGNIZED = -1,
+    /**
+     * Image
+     */
+    DRAWING_IMAGE = 0,
+    /**
+     * Shape, similar to shapes in Office, including circles, rectangles, lines, etc.
+     */
+    DRAWING_SHAPE = 1,
+    /**
+     * Chart
+     */
+    DRAWING_CHART = 2,
+    /**
+     * Table
+     */
+    DRAWING_TABLE = 3,
+    /**
+     * SmartArt, similar to SmartArt in Office
+     */
+    DRAWING_SMART_ART = 4,
+    /**
+     * Video
+     */
+    DRAWING_VIDEO = 5,
+    /**
+     * Drawing group
+     */
+    DRAWING_GROUP = 6,
+    /**
+     * Univer object, allows inserting images, tables, documents, slides as floating objects into the document
+     */
+    DRAWING_UNIT = 7,
+    /**
+     * Dom element, allows inserting HTML elements as floating objects into the document
+     */
+    DRAWING_DOM = 8,
+}
+
+export type DrawingType = DrawingTypeEnum | number;
+
+export interface IDrawingSpace {
+    unitId: string;
+    subUnitId: string; //sheetId, pageId and so on, it has a default name in doc business
+}
+
+export interface IDrawingSearch extends IDrawingSpace {
+    drawingId: string;
+}
+
+export interface IRotationSkewFlipTransform {
+    angle?: number;
+    skewX?: number;
+    skewY?: number;
+    flipX?: boolean;
+    flipY?: boolean;
+}
+
+export interface ITransformState extends IAbsoluteTransform, IRotationSkewFlipTransform {}
+
+export interface IDrawingParam extends IDrawingSearch {
+    drawingType: DrawingType;
+    transform?: Nullable<ITransformState>;
+    transforms?: Nullable<ITransformState[]>;
+    // The same drawing render in different place, like image in header and footer.
+    // The default value is BooleanNumber.FALSE. if it's true, Please use transforms.
+    isMultiTransform?: BooleanNumber;
+    groupId?: string;
+}
+
+// #endregion

packages/core/src/types/interfaces/i-slide-data.ts

@@ -19,7 +19,8 @@ import type { IKeyType, Nullable } from '../../shared/types';
 import type { IWorksheetData } from '../../sheets/typedef';
 import type { LocaleType, ThemeColorType } from '../enum';
 import type { ShapeType } from '../enum/prst-geom-type';
-import type { ICustomBlock, IDocumentData, ILists, ITransformState } from './i-document-data';
+import type { ICustomBlock, IDocumentData, ILists } from './i-document-data';
+import type { ITransformState } from './i-drawing';
 import type { IImageProperties } from './i-image-properties';
 import type { IPlaceholder } from './i-placeholder';
 import type { IShapeProperties } from './i-shape-properties';

packages/core/src/types/interfaces/index.ts

@@ -16,6 +16,7 @@
 
 export * from './i-document-data';
 export * from './i-document-data-interceptor';
+export * from './i-drawing';
 export * from './i-image-properties';
 export * from './i-mention';
 export * from './i-need-check-disposable';

packages/drawing-ui/src/controllers/drawing-update.controller.ts

@@ -25,7 +25,7 @@ import {
     IUniverInstanceService,
     toDisposable,
 } from '@univerjs/core';
-import { getDrawingShapeKeyByDrawingSearch, IDrawingManagerService } from '@univerjs/drawing';
+import { getDrawingShapeKeyByDrawingSearch, IDrawingManagerService, SetDrawingSelectedOperation } from '@univerjs/drawing';
 import { DRAWING_OBJECT_LAYER_INDEX, Group, IRenderManagerService, RENDER_CLASS_TYPE } from '@univerjs/engine-render';
 import { AlignType, SetDrawingAlignOperation } from '../commands/operations/drawing-align.operation';
 import { CloseImageCropOperation } from '../commands/operations/image-crop.operation';
@@ -663,6 +663,8 @@ export class DrawingUpdateController extends Disposable {
                     }
 
                     drawingShape.transformByState({ left, top, width, height, angle, flipX, flipY, skewX, skewY });
+
+                    scene.getTransformer()?.debounceRefreshControls();
                 });
             })
         );
@@ -793,9 +795,9 @@ export class DrawingUpdateController extends Disposable {
                     }).filter((transform) => transform != null) as ITransformState[];
 
                     if (drawings.length > 0) {
-                        this._drawingManagerService.focusDrawing(drawings);
+                        this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, drawings);
                     } else {
-                        this._drawingManagerService.focusDrawing(null);
+                        this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, []);
                     }
                 })
             )

packages/drawing-ui/src/controllers/image-cropper.controller.ts

@@ -20,7 +20,7 @@ import type { BaseObject, Scene } from '@univerjs/engine-render';
 import type { IOpenImageCropOperationBySrcRectParams } from '../commands/operations/image-crop.operation';
 import { checkIfMove, Disposable, ICommandService, Inject, IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
 import { MessageType } from '@univerjs/design';
-import { getDrawingShapeKeyByDrawingSearch, IDrawingManagerService } from '@univerjs/drawing';
+import { getDrawingShapeKeyByDrawingSearch, IDrawingManagerService, SetDrawingSelectedOperation } from '@univerjs/drawing';
 import { CURSOR_TYPE, degToRad, Image, IRenderManagerService, precisionTo, Vector2 } from '@univerjs/engine-render';
 import { IMessageService } from '@univerjs/ui';
 import { filter, switchMap } from 'rxjs';
@@ -262,7 +262,7 @@ export class ImageCropperController extends Disposable {
                 transformer?.refreshControls();
                 imageCropperObject.makeDirty(true);
 
-                this._drawingManagerService.focusDrawing([{ unitId, subUnitId, drawingId }]);
+                this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, [{ unitId, subUnitId, drawingId }]);
             })
         );
     }

packages/drawing-ui/src/controllers/image-update.controller.ts

@@ -25,7 +25,7 @@ import {
     IUniverInstanceService,
     toDisposable,
 } from '@univerjs/core';
-import { getDrawingShapeKeyByDrawingSearch, IDrawingManagerService, IImageIoService } from '@univerjs/drawing';
+import { getDrawingShapeKeyByDrawingSearch, IDrawingManagerService, IImageIoService, SetDrawingSelectedOperation } from '@univerjs/drawing';
 import { CURSOR_TYPE, IRenderManagerService } from '@univerjs/engine-render';
 import { IDialogService } from '@univerjs/ui';
 import { ImageResetSizeOperation } from '../commands/operations/image-reset-size.operation';
@@ -151,7 +151,7 @@ export class ImageUpdateController extends Disposable {
             transformer.refreshControls().changeNotification();
         });
 
-        this._drawingManagerService.focusDrawing(params);
+        this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, params);
     }
 
     private _drawingAddListener() {

packages/drawing/src/commands/operations/set-drawing-selected.operation.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * 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 { IAccessor, IDrawingSearch, IOperation } from '@univerjs/core';
+import {
+    CommandType,
+} from '@univerjs/core';
+import { IDrawingManagerService } from '../../services/drawing-manager.service';
+
+export const SetDrawingSelectedOperation: IOperation<IDrawingSearch[]> = {
+    id: 'drawing.operation.set-drawing-selected',
+    type: CommandType.OPERATION,
+    handler: (accessor: IAccessor, params?: IDrawingSearch[]) => {
+        const drawingManagerService = accessor.get(IDrawingManagerService);
+
+        if (params == null) {
+            return false;
+        }
+        drawingManagerService.focusDrawing(params);
+        return true;
+    },
+};

packages/drawing/src/index.ts

@@ -34,3 +34,5 @@ export {
     type IDrawingVisibleParam,
     type IUnitDrawingService,
 } from './services/drawing-manager.service';
+
+export { SetDrawingSelectedOperation } from './commands/operations/set-drawing-selected.operation';

packages/drawing/src/plugin.ts

@@ -17,7 +17,8 @@
 import type { Dependency } from '@univerjs/core';
 import type { IUniverDrawingConfig } from './controllers/config.schema';
 
-import { IConfigService, Inject, Injector, merge, mergeOverrideWithDependencies, Plugin } from '@univerjs/core';
+import { ICommandService, IConfigService, Inject, Injector, merge, mergeOverrideWithDependencies, Plugin } from '@univerjs/core';
+import { SetDrawingSelectedOperation } from './commands/operations/set-drawing-selected.operation';
 import { defaultPluginConfig, DRAWING_PLUGIN_CONFIG_KEY } from './controllers/config.schema';
 import { DrawingManagerService } from './services/drawing-manager-impl.service';
 import { IDrawingManagerService } from './services/drawing-manager.service';
@@ -32,7 +33,8 @@ export class UniverDrawingPlugin extends Plugin {
     constructor(
         private readonly _config: Partial<IUniverDrawingConfig> = defaultPluginConfig,
         @Inject(Injector) protected _injector: Injector,
-        @IConfigService private readonly _configService: IConfigService
+        @IConfigService private readonly _configService: IConfigService,
+        @ICommandService private readonly _commandService: ICommandService
     ) {
         super();
 
@@ -46,6 +48,7 @@ export class UniverDrawingPlugin extends Plugin {
     }
 
     override onStarting(): void {
+        this._initCommands();
         this._initDependencies();
     }
 
@@ -58,4 +61,10 @@ export class UniverDrawingPlugin extends Plugin {
         const dependency = mergeOverrideWithDependencies(dependencies, this._config?.override);
         dependency.forEach((d) => this._injector.add(d));
     }
+
+    private _initCommands() {
+        [
+            SetDrawingSelectedOperation,
+        ].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
+    }
 }