feat: add canvas offset for slide editor pos

dream-num · Aug 5, 2024 · b2ad5ce · b2ad5ce
1 parent 6589dff
commit b2ad5ce
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 17 deletions.
diff --git a/examples/src/data/slides/default-pages/page1.ts b/examples/src/data/slides/default-pages/page1.ts
@@ -106,7 +106,7 @@ export const DEFAULT_FIRST_PAGE = {
             zIndex: 2,
             left: 430,
             top: 42,
-            width: 100,
+            width: 120,
             height: 40,
             title: 'mask',
             description: '',

diff --git a/packages/engine-render/src/render-manager/render-manager.service.ts b/packages/engine-render/src/render-manager/render-manager.service.ts
@@ -37,6 +37,10 @@ export interface IRenderManagerService extends IDisposable {
     createRender(unitId: string): IRender;
     removeRender(unitId: string): void;
     setCurrent(unitId: string): void;
+    /**
+     * get RenderUnit By Id, RenderUnit implements IRender
+     * @param unitId
+     */
     getRenderById(unitId: string): Nullable<IRender>;
     getAllRenderersOfType(type: UniverInstanceType): RenderUnit[];
     getCurrentTypeOfRenderer(type: UniverInstanceType): Nullable<RenderUnit>;

diff --git a/packages/slides-ui/src/controllers/slide-editing.render-controller.ts b/packages/slides-ui/src/controllers/slide-editing.render-controller.ts
@@ -186,6 +186,7 @@ export class SlideEditingRenderController extends Disposable implements IRenderM
     }
 
     private _initEditorVisibilityListener(): void {
+        // startEditing --> slide-editor-bridge.render-controller.ts@changeVisible --> _editorBridgeService.changeVisible
         this.disposeWithMe(this._editorBridgeService.visible$
             // .pipe(distinctUntilChanged((prev, curr) => prev.visible === curr.visible))
             .subscribe((param) => {
@@ -242,7 +243,9 @@ export class SlideEditingRenderController extends Disposable implements IRenderM
      * @param d DisposableCollection
      */
     private _subscribeToCurrentCell(d: DisposableCollection) {
-        // invoked by slide-editor-bridge.service.ts@setEditorRectn---> currentEditRectState$.next
+        // first part of editing.
+        // startEditing --> _updateEditor --> slide-editor-bridge.service.ts@setEditorRect---> currentEditRectState$.next(editCellState)
+        // startEditing --> changeVisible
         d.add(this._editorBridgeService.currentEditRectState$.subscribe((editCellState) => {
             if (editCellState == null) {
                 return;
@@ -272,11 +275,13 @@ export class SlideEditingRenderController extends Disposable implements IRenderM
                 endOffset: 0,
             }]);
 
-            // hide the editor, but the editor is still exist.
             // the last active, calling stack trace:
             // EditorContainer.tsx cellEditorManagerService.state$.subscribe -->
             // EditorContainer.tsx cellEditorManagerService.setFocus(true) -->
             // _textSelectionRenderManager.sync() --> _updateInputPosition --> activate
+
+            // hide the editor, but the editor is still exist.
+            // the last and valid call activate is in _textSelectionRenderManager.sync() --> _updateInputPosition
             this._textSelectionRenderManager.activate(HIDDEN_EDITOR_POSITION, HIDDEN_EDITOR_POSITION);
         }));
     }
@@ -427,6 +432,9 @@ export class SlideEditingRenderController extends Disposable implements IRenderM
 
         let { startX, startY } = actualRangeWithCoord;
 
+        startX += canvasOffset.left;
+        startY += canvasOffset.top;
+
         const { document: documentComponent, scene, engine: docEngine } = editorObject;
 
         const viewportMain = scene.getViewport(DOC_VIEWPORT_KEY.VIEW_MAIN);
@@ -546,10 +554,14 @@ export class SlideEditingRenderController extends Disposable implements IRenderM
     }
 
     /**
+     * show input area, resize input area and then place input to right place.
      * invoked when this._editorBridgeService.visible$ param.visible = true
+     *
+     * handleVisible is the 2nd part of editing.
+     * startEditing --> _updateEditor
+     * startEditing --> changeVisible --> slide-editor-bridge.render-controller.ts@changeVisible --> _editorBridgeService.changeVisible
      * @param param
      */
-
     private _handleEditorVisible(param: IEditorBridgeServiceVisibleParam) {
         const { eventType, keycode } = param;
 

diff --git a/packages/slides-ui/src/controllers/slide-editor-bridge.render-controller.ts b/packages/slides-ui/src/controllers/slide-editor-bridge.render-controller.ts
@@ -104,31 +104,37 @@ export class SlideEditorBridgeRenderController extends RxDisposable implements I
 
             if (!transformer) return;
 
-            // calling twice when add an object.
+            // This is the start of editing.
+            //TODO: @lumixraku calling twice when add an object.
             d.add(transformer.changeStart$.subscribe((param: IChangeObserverConfig) => {
                 const target = param.target;
                 if (!target) return;
                 if (target.objectType !== ObjectType.RICH_TEXT) {
-                    this.saveCurrEditingState();
+                    this.setEditorVisible(false);
+                    this.endEditing();
 
                     // rm other text editor
-                    this.changeVisible(false);
                 } else {
                     // const elementData = (target as RichText).toJson();
-                    this._curRichText = target as RichText;
                     this.startEditing(target as RichText);
                 }
             }));
         }
     }
 
-    saveCurrEditingState() {
+    /**
+     * invoked when picking other object.
+     *
+     * save editing state to curr richText.
+     */
+    endEditing() {
         if (!this._curRichText) return;
         const curRichText = this._curRichText;
 
         const slideData = this._instanceSrv.getCurrentUnitForType<SlideDataModel>(UniverInstanceType.UNIVER_SLIDE);
         if (!slideData) return false;
         curRichText.updateDocumentByDocData();
+        this._curRichText = null;
     }
 
     /**
@@ -140,11 +146,17 @@ export class SlideEditorBridgeRenderController extends RxDisposable implements I
      */
     startEditing(target: RichText) {
         // this.setSlideTextEditor$.next({ content, rect });
+        this._curRichText = target as RichText;
         this._updateEditor(target);
-        this.changeVisible(true);
+        this.setEditorVisible(true);
     }
 
-    changeVisible(visible: boolean) {
+    setEditorVisible(visible: boolean) {
+        if (visible) {
+            this._curRichText?.hide();
+        } else {
+            this._curRichText?.show();
+        }
         const { unitId } = this._renderContext;
         this._editorBridgeService.changeVisible({ visible, eventType: 3, unitId });
     }

diff --git a/packages/slides-ui/src/services/slide-editor-bridge.service.ts b/packages/slides-ui/src/services/slide-editor-bridge.service.ts
@@ -30,11 +30,20 @@ import {
 } from '@univerjs/core';
 import type { Engine, IDocumentLayoutObject, IRenderContext, RichText, Scene } from '@univerjs/engine-render';
 import { DeviceInputEventType, IRenderManagerService } from '@univerjs/engine-render';
+import { SLIDE_KEY } from '@univerjs/slides';
 import type { KeyCode } from '@univerjs/ui';
 import { IEditorService } from '@univerjs/ui';
 import type { Observable } from 'rxjs';
 import { BehaviorSubject } from 'rxjs';
 
+// TODO same as @univerjs/slides/views/render/adaptors/index.js
+export enum SLIDE_VIEW_KEY {
+    MAIN = '__SLIDERender__',
+    SCENE_VIEWER = '__SLIDEViewer__',
+    SCENE = '__SLIDEScene__',
+    VIEWPORT = '__SLIDEViewPort_',
+}
+
 export const ISlideEditorBridgeService = createIdentifier<SlideEditorBridgeService>('univer.slide-editor-bridge.service');
 
 export interface IEditorBridgeServiceParam {
@@ -146,7 +155,7 @@ export class SlideEditorBridgeService extends Disposable implements ISlideEditor
         const editCellState = this.getEditRectState();
         this._currentEditRectState = editCellState;
 
-        // editing render controller @_subscribeToCurrentCell
+        // slide-editing.render-controller.ts@_subscribeToCurrentCell --> activate(-1000, -1000)
         this._currentEditRectState$.next(editCellState);
     }
 
@@ -174,8 +183,9 @@ export class SlideEditorBridgeService extends Disposable implements ISlideEditor
 
     /**
      * get info from _currentEditRectInfo
+     *
+     * invoked by slide-editing.render-controller.ts@_handleEditorVisible & this@setEditorRect
      */
-
     getEditRectState(): Readonly<Nullable<IEditorBridgeServiceParam>> {
         const editorUnitId = DOCS_NORMAL_EDITOR_UNIT_ID_KEY;
 
@@ -211,6 +221,26 @@ export class SlideEditorBridgeService extends Disposable implements ISlideEditor
         const editorHeight = editorRectInfo.richTextObj.height;
         const left = editorRectInfo.richTextObj.left;
         const top = editorRectInfo.richTextObj.top;
+
+        const canvasOffset = {
+            left: 0,
+            top: 0,
+        };
+        // canvasOffset will be used in slide-editing.render-controller.ts@_handleEditorVisible
+        // const mainScene = this._mainScene;
+        const renderUnit = this._renderManagerService.getRenderById(unitId);
+        const mainScene = renderUnit?.scene;
+        const mainViewport = mainScene?.getViewport(SLIDE_KEY.VIEW);
+        const slideMainRect = mainScene?.getObject(SLIDE_KEY.COMPONENT);
+        const slidePos = {
+            x: slideMainRect?.left || 0,
+            y: slideMainRect?.top || 0,
+        };
+        const scrollX = mainViewport?.viewportScrollX || 0;
+        const scrollY = mainViewport?.viewportScrollY || 0;
+        canvasOffset.left = slidePos.x - scrollX;
+        canvasOffset.top = slidePos.y - scrollY;
+
         return {
             position: {
                 startX: left,
@@ -220,7 +250,7 @@ export class SlideEditorBridgeService extends Disposable implements ISlideEditor
             },
             scaleX: 1,
             scaleY: 1,
-            canvasOffset: { left: 0, top: 0 },
+            canvasOffset,
             unitId,
             editorUnitId,
             documentLayoutObject,

diff --git a/packages/slides-ui/src/views/editor-container/EditorContainer.tsx b/packages/slides-ui/src/views/editor-container/EditorContainer.tsx
@@ -121,7 +121,7 @@ export const EditorContainer: React.FC<ICellIEditorProps> = () => {
 
     return (
         <div
-            className={styles.editorContainer}
+            className={styles.slideEditorContainer}
             style={{
                 left: state.left,
                 top: state.top,

diff --git a/packages/slides-ui/src/views/editor-container/index.module.less b/packages/slides-ui/src/views/editor-container/index.module.less
@@ -1,4 +1,4 @@
-.editor-container {
+.slide-editor-container {
     position: absolute;
     z-index: 10;
     top: 200px;
@@ -21,7 +21,7 @@
         width: 100%;
         height: 100%;
 
-        background: white;
+        background: rgba(174, 174, 174, 0.2);
 
         canvas {
             position: absolute;