fix: slide canvasview to slide render controller (#3032)

packages-experimental/uni-formula-ui/src/services/uni-formula.service.ts

@@ -39,11 +39,11 @@ import {
 import { makeSelection, replaceSelectionFactory } from '@univerjs/docs';
 import { DataSyncPrimaryController } from '@univerjs/rpc';
 import { RegisterOtherFormulaService } from '@univerjs/sheets-formula';
-import { CanvasView } from '@univerjs/slides';
 import type { IDocFormulaCache, ISlideFormulaCache } from '@univerjs/uni-formula';
 import { DumbUniFormulaService, IUniFormulaService } from '@univerjs/uni-formula';
 import { take } from 'rxjs';
 import { RichText } from '@univerjs/engine-render';
+import { CanvasView } from '@univerjs/slides-ui';
 import { type IDocPopupPosition, type ISlidePopupPosition, isSlidePosition } from '../commands/operations/operation';
 
 const PSEUDO_SUBUNIT = 'PSEUDO_SUBUNIT';

packages/engine-render/src/components/slides/slide.ts

@@ -37,6 +37,8 @@ const arrowPath =
 export class Slide extends SceneViewer {
     slideChangePageByNavigation$ = new EventSubject<Nullable<string>>();
 
+    subSceneChanged$ = new EventSubject<Scene>();
+
     private _navigationEnabled = false;
 
     activeFirstPage() {
@@ -48,13 +50,17 @@ export class Slide extends SceneViewer {
         this.changePage(firstKey);
     }
 
-    addPage(scene: Scene) {
-        const key = scene.sceneKey;
-        if (this.getSubScene(key) != null) {
-            return;
+    /**
+     * add pageScene to this._subScenes
+     * @param pageScene
+     */
+    addPageScene(pageScene: Scene) {
+        const key = pageScene.sceneKey;
+        if (!this.getSubScene(key)) {
+            this.addSubScene(pageScene);
         }
-        this.addSubScene(scene);
         this.addNavigation();
+        this.subSceneChanged$.emitEvent(pageScene);
     }
 
     changePage(id?: string) {

packages/engine-render/src/render-manager/render-manager.service.ts

@@ -34,6 +34,12 @@ export interface IRenderManagerService extends IDisposable {
     currentRender$: Observable<Nullable<string>>;
 
     addRender(unitId: string, renderer: IRender): void;
+
+    /**
+     * create renderUnit & init deps from renderDependencies by renderUnit's type.
+     * @param unitId
+     * @returns renderUnit:IRender
+     */
     createRender(unitId: string): IRender;
     removeRender(unitId: string): void;
     setCurrent(unitId: string): void;
@@ -68,6 +74,11 @@ export interface IRenderManagerService extends IDisposable {
     has(unitId: string): boolean;
     withCurrentTypeOfUnit<T>(type: UniverInstanceType, id: DependencyIdentifier<T>): Nullable<T>;
 
+    /**
+     * add dep to _renderDependencies(type, dep)
+     * @param type
+     * @param depCtor
+     */
     registerRenderModule<T extends UnitModel>(type: UnitType, dep: Dependency<T>): IDisposable;
 }
 
@@ -143,32 +154,47 @@ export class RenderManagerService extends Disposable implements IRenderManagerSe
         });
     }
 
-    registerRenderModule(type: UnitType, ctor: Dependency): IDisposable {
+    /**
+     * add dep to _renderDependencies(type, dep)
+     * @param type
+     * @param depCtor
+     */
+    registerRenderModule(type: UnitType, depCtor: Dependency): IDisposable {
         if (!this._renderDependencies.has(type)) {
             this._renderDependencies.set(type, []);
         }
 
         const dependencies = this._renderDependencies.get(type)!;
-        dependencies.push(ctor);
+        dependencies.push(depCtor);
 
         for (const [_, render] of this._renderMap) {
             const renderType = render.type;
             if (renderType === type) {
-                this._tryAddRenderDependencies(render, [ctor]);
+                this._tryAddRenderDependencies(render, [depCtor]);
             }
         }
 
-        return toDisposable(() => remove(dependencies, ctor));
+        return toDisposable(() => remove(dependencies, depCtor));
     }
 
-    private _getRenderControllersForType(type: UnitType): Array<Dependency> {
+    /**
+     * get render dependencies from _renderDependencies
+     * @param type
+     * @returns Dependency[]
+     */
+    private _getRenderDepsByType(type: UnitType): Array<Dependency> {
         return Array.from(this._renderDependencies.get(type) ?? []);
     }
 
     create(unitId: string) {
         this._createRender$.next(unitId);
     }
 
+    /**
+     * create renderUnit & init deps from renderDependencies
+     * @param unitId
+     * @returns renderUnit:IRender
+     */
     createRender(unitId: string): IRender {
         const renderer = this._createRender(unitId, new Engine());
         this._renderCreated$.next(renderer);
@@ -201,12 +227,24 @@ export class RenderManagerService extends Disposable implements IRenderManagerSe
         return this.getRenderById(current.getUnitId())?.with(id);
     }
 
+    /**
+     * init deps by injector.get(dep), and injector derives from renderer.
+     * @param renderer
+     * @param deps
+     */
     private _tryAddRenderDependencies(renderer: IRender, deps: Dependency[]): void {
         if (renderer instanceof RenderUnit) {
             renderer.addRenderDependencies(deps);
         }
     }
 
+    /**
+     * create renderUnit & init deps from renderDependencies by renderUnit's type
+     * @param unitId
+     * @param engine
+     * @param isMainScene
+     * @returns renderUnit:IRender
+     */
     private _createRender(unitId: string, engine: Engine, isMainScene: boolean = true): IRender {
         const existItem = this.getRenderById(unitId);
         let shouldDestroyEngine = true;
@@ -232,15 +270,17 @@ export class RenderManagerService extends Disposable implements IRenderManagerSe
 
         if (unit) {
             const type = this._univerInstanceService.getUnitType(unitId);
-            const ctors = this._getRenderControllersForType(type);
+            const ctorOfDeps = this._getRenderDepsByType(type);
+
             renderUnit = this._injector.createInstance(RenderUnit, {
                 unit,
                 engine,
                 scene,
                 isMainScene,
             });
 
-            this._tryAddRenderDependencies(renderUnit, ctors);
+            // init deps
+            this._tryAddRenderDependencies(renderUnit, ctorOfDeps);
         } else {
             // For slide pages
             renderUnit = {
@@ -256,7 +296,7 @@ export class RenderManagerService extends Disposable implements IRenderManagerSe
                 with(_dependency) {
                     return null;
                 },
-            };
+            } as IRender;
         }
 
         this._addRenderUnit(unitId, renderUnit);
@@ -298,6 +338,11 @@ export class RenderManagerService extends Disposable implements IRenderManagerSe
         return [...this.getRenderAll().values()][0];
     }
 
+    /**
+     * get RenderUnit from this._renderMap
+     * @param unitId
+     * @returns RenderUnit, aka IRender
+     */
     getRenderById(unitId: string): Nullable<IRender> {
         return this._renderMap.get(unitId);
     }

packages/engine-render/src/scene.ts

@@ -565,6 +565,10 @@ export class Scene extends ThinScene {
         });
     }
 
+    /**
+     * create transformer if not exist, and then transformer attach to object that passed in by parameter.
+     * @param o
+     */
     override attachTransformerTo(o: BaseObject) {
         if (!this._transformer) {
             this.initTransformer();

packages/sheets-ui/src/services/sheets-render.service.ts

@@ -72,7 +72,11 @@ export class SheetsRenderService extends RxDisposable {
     private _initWorkbookListener(): void {
         this._instanceSrv.getTypeOfUnitAdded$<Workbook>(UniverInstanceType.UNIVER_SHEET)
             .pipe(takeUntil(this.dispose$))
-            .subscribe((workbook) => this._createRenderer(workbook));
+            .subscribe((workbook) => {
+                // TODO when does this function get called?
+                this._createRenderer(workbook);
+            });
+
         this._instanceSrv.getAllUnitsForType<Workbook>(UniverInstanceType.UNIVER_SHEET)
             .forEach((workbook) => this._createRenderer(workbook));
 

packages/slides-ui/src/commands/operations/activate.operation.ts

@@ -16,7 +16,7 @@
 
 import type { IAccessor, IOperation, SlideDataModel } from '@univerjs/core';
 import { CommandType, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
-import { CanvasView } from '@univerjs/slides';
+import { CanvasView } from '../../controllers/canvas-view';
 
 export interface IActiveSlidePageOperationParams {
     unitId: string;
@@ -34,6 +34,7 @@ export const ActivateSlidePageOperation: IOperation<IActiveSlidePageOperationPar
         if (!id) return false;
 
         const page = canvasView.getRenderUnitByPageId(id);
+        if (!page) return false;
         const transformer = page.scene?.getTransformer();
         if (transformer) {
             transformer.clearControls();

packages/slides-ui/src/commands/operations/append-slide.operation.ts

@@ -16,7 +16,9 @@
 
 import type { IOperation, SlideDataModel } from '@univerjs/core';
 import { CommandType, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
-import { CanvasView } from '@univerjs/slides';
+import { IRenderManagerService } from '@univerjs/engine-render';
+
+import { SlideRenderController } from '../../controllers/slide.render-controller';
 
 export interface IAppendSlideOperationParams {
     unitId: string;
@@ -27,11 +29,15 @@ export const AppendSlideOperation: IOperation<IAppendSlideOperationParams> = {
     type: CommandType.OPERATION,
     handler: (accessor) => {
         const univerInstanceService = accessor.get(IUniverInstanceService);
-        const canvasView = accessor.get(CanvasView);
         const slideData = univerInstanceService.getCurrentUnitForType<SlideDataModel>(UniverInstanceType.UNIVER_SLIDE);
-
         if (!slideData) return false;
-        canvasView.appendPage();
+
+        // const canvasView = accessor.get(CanvasView);
+        const renderManagerService = accessor.get(IRenderManagerService);
+        const renderUnit = renderManagerService
+            .getRenderById(univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE)!.getUnitId())!;
+        const slideRC = renderUnit.with(SlideRenderController);
+        slideRC.appendPage();
 
         return true;
     },

packages/slides-ui/src/commands/operations/delete-element.operation.ts

@@ -16,7 +16,7 @@
 
 import type { ICommand, SlideDataModel } from '@univerjs/core';
 import { CommandType, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
-import { CanvasView } from '@univerjs/slides';
+import { CanvasView } from '../../controllers/canvas-view';
 
 export interface IDeleteElementOperationParams {
     unitId: string;

packages/slides-ui/src/commands/operations/insert-image.operation.ts

@@ -17,7 +17,7 @@
 import type { ICommand, Nullable, SlideDataModel } from '@univerjs/core';
 import { CommandType, IUniverInstanceService, PageElementType, UniverInstanceType } from '@univerjs/core';
 import { getImageSize, IImageIoService } from '@univerjs/drawing';
-import { CanvasView } from '@univerjs/slides';
+import { CanvasView } from '../../controllers/canvas-view';
 
 export interface IInsertImageOperationParams {
     files: Nullable<File[]>;

packages/slides-ui/src/commands/operations/insert-shape.operation.ts

@@ -17,9 +17,10 @@
 import type { IAccessor, ICommand, SlideDataModel } from '@univerjs/core';
 import { BasicShapes, CommandType, generateRandomId, ICommandService, IUniverInstanceService, LocaleService, PageElementType, UniverInstanceType } from '@univerjs/core';
 import { ObjectType } from '@univerjs/engine-render';
-import { CanvasView } from '@univerjs/slides';
+
 import { ISidebarService } from '@univerjs/ui';
 import { COMPONENT_SLIDE_SIDEBAR } from '../../components/sidebar/Sidebar';
+import { CanvasView } from '../../controllers/canvas-view';
 
 export interface IInsertShapeOperationParams {
     unitId: string;

packages/slides-ui/src/commands/operations/insert-text.operation.ts

@@ -16,7 +16,7 @@
 
 import type { ICommand, IPageElement, SlideDataModel } from '@univerjs/core';
 import { CommandType, ICommandService, IUniverInstanceService, PageElementType, Tools, UniverInstanceType } from '@univerjs/core';
-import { CanvasView } from '@univerjs/slides';
+import { CanvasView } from '../../controllers/canvas-view';
 
 export interface ISlideAddTextParam {
     text: string;

packages/slides-ui/src/commands/operations/set-thumb.operation.ts

@@ -16,7 +16,7 @@
 
 import type { IAccessor, IOperation } from '@univerjs/core';
 import { CommandType } from '@univerjs/core';
-import { CanvasView } from '@univerjs/slides';
+import { CanvasView } from '../../controllers/canvas-view';
 
 export const SetSlidePageThumbOperation: IOperation = {
     id: 'slide.operation.set-slide-page-thumb',

packages/slides-ui/src/components/panels/ArrangePanel.tsx

@@ -21,9 +21,10 @@ import { ICommandService, LocaleService, useDependency } from '@univerjs/core';
 import clsx from 'clsx';
 import { Button } from '@univerjs/design';
 import { BottomSingle, MoveDownSingle, MoveUpSingle, TopmostSingle } from '@univerjs/icons';
-import { CanvasView } from '@univerjs/slides';
+
 import type { Image, Rect, RichText } from '@univerjs/engine-render';
 import { UpdateSlideElementOperation } from '../../commands/operations/update-element.operation';
+import { CanvasView } from '../../controllers/canvas-view';
 import styles from './index.module.less';
 
 enum ArrangeTypeEnum {

packages/slides-ui/src/components/panels/FillPanel.tsx

@@ -21,9 +21,10 @@ import { ICommandService, LocaleService, useDependency } from '@univerjs/core';
 import clsx from 'clsx';
 import { ColorPicker, Dropdown } from '@univerjs/design';
 import { MoreDownSingle, PaintBucket } from '@univerjs/icons';
-import { CanvasView } from '@univerjs/slides';
+
 import type { Rect } from '@univerjs/engine-render';
 import { UpdateSlideElementOperation } from '../../commands/operations/update-element.operation';
+import { CanvasView } from '../../controllers/canvas-view';
 import styles from './index.module.less';
 
 interface IProps {

packages/slides-ui/src/components/panels/TransformPanel.tsx

@@ -21,8 +21,8 @@ import { ICommandService, LocaleService, useDependency } from '@univerjs/core';
 import clsx from 'clsx';
 import { InputNumber } from '@univerjs/design';
 import type { BaseObject, IChangeObserverConfig, Image, Rect, RichText } from '@univerjs/engine-render';
-import { CanvasView } from '@univerjs/slides';
 import { UpdateSlideElementOperation } from '../../commands/operations/update-element.operation';
+import { CanvasView } from '../../controllers/canvas-view';
 import styles from './index.module.less';
 
 interface IProps {

packages/slides-ui/src/components/sidebar/Sidebar.tsx

@@ -17,11 +17,12 @@
 import type { Nullable, SlideDataModel } from '@univerjs/core';
 import { IUniverInstanceService, UniverInstanceType, useDependency } from '@univerjs/core';
 import { type BaseObject, ObjectType } from '@univerjs/engine-render';
-import { CanvasView } from '@univerjs/slides';
+
 import React from 'react';
 import ArrangePanel from '../panels/ArrangePanel';
 import TransformPanel from '../panels/TransformPanel';
 import FillPanel from '../panels/FillPanel';
+import { CanvasView } from '../../controllers/canvas-view';
 import styles from './index.module.less';
 
 export const COMPONENT_SLIDE_SIDEBAR = 'COMPONENT_SLIDE_SIDEBAR';