fix: selection should stop response after a popup shown

packages/docs-ui/src/services/selection/doc-selection-render.service.ts

@@ -1025,7 +1025,7 @@ export class DocSelectionRenderService extends RxDisposable implements IRenderMo
 
         this.deactivate();
 
-        this._context.scene?.getEngine()?.setRemainCapture();
+        this._context.scene?.getEngine()?.setCapture();
     }
 
     __attachScrollEvent() {
@@ -1261,4 +1261,3 @@ export class DocSelectionRenderService extends RxDisposable implements IRenderMo
         this._onPointerDown$.complete();
     }
 }
-

packages/docs-ui/src/services/selection/text-range.ts

@@ -476,8 +476,8 @@ export class TextRange implements IDocRange {
         }
 
         this._anchorShape = anchor;
-
         this._scene.addObject(anchor, TEXT_RANGE_LAYER_INDEX);
+        this.activeStatic();
     }
 
     private _setCursorList(cursorList: ITextRange[]) {

packages/engine-render/src/base-object.ts

@@ -676,16 +676,6 @@ export abstract class BaseObject extends Disposable {
         return true;
     }
 
-    // triggerKeyDown(evt: IKeyboardEvent) {
-    //     // this.onKeyDownObservable.notifyObservers(evt);
-    //     this._parent?.triggerKeyDown(evt);
-    // }
-
-    // triggerKeyUp(evt: IKeyboardEvent) {
-    //     // this.onKeyUpObservable.notifyObservers(evt);
-    //     this._parent?.triggerKeyUp(evt);
-    // }
-
     triggerPointerOut(evt: IPointerEvent | IMouseEvent) {
         if (!this.onPointerOut$.emitEvent(evt)?.stopPropagation) {
             this._parent?.triggerPointerOut(evt);
@@ -718,6 +708,14 @@ export abstract class BaseObject extends Disposable {
         return true;
     }
 
+    triggerPointerCancel(evt: IPointerEvent) {
+        if (!this.onPointerEnter$.emitEvent(evt)?.stopPropagation) {
+            this._parent?.triggerPointerCancel(evt);
+            return false;
+        }
+        return true;
+    }
+
     triggerDragLeave(evt: IDragEvent | IMouseEvent) {
         if (!this.onDragLeave$.emitEvent(evt)?.stopPropagation) {
             this._parent?.triggerDragLeave(evt);

packages/engine-render/src/engine.ts

@@ -30,6 +30,13 @@ import { getPointerPrefix, getSizeForDom, IsSafari, requestNewFrame } from './ba
 import { Canvas, CanvasRenderMode } from './canvas';
 import { observeClientRect } from './floating/util';
 
+export interface IEngineOption {
+    elementWidth: number;
+    elementHeight: number;
+    dpr?: number;
+    renderMode?: CanvasRenderMode;
+}
+
 export class Engine extends Disposable {
     renderEvenInBackground = true;
 
@@ -41,6 +48,9 @@ export class Engine extends Disposable {
     readonly renderFrameTimeMetric$ = new Subject<ITimeMetric>();
     readonly renderFrameTags$ = new Subject<[string, any]>();
 
+    /**
+     * Pass event to scene.input-manager
+     */
     onInputChanged$ = new EventSubject<IEvent>();
 
     onTransformChange$ = new EventSubject<ITransformChangeState>();
@@ -79,8 +89,6 @@ export class Engine extends Disposable {
 
     private _renderFrameTasks = new Array<() => void>();
 
-    private _renderFunction = (_timestamp: number) => { /* empty */ };
-
     private _requestNewFrameHandler: number = -1;
 
     /**
@@ -140,10 +148,37 @@ export class Engine extends Disposable {
 
     private _unitId: string = ''; // unitId
 
-    constructor(elemWidth: number = 1, elemHeight: number = 1, pixelRatio?: number, mode?: CanvasRenderMode) {
+    constructor();
+    constructor(unitId: string, options?: IEngineOption);
+    constructor(elemW: number, elemH: number, dpr?: number, renderMode?: CanvasRenderMode);
+    constructor(...args: any[]) {
         super();
+        let elemWidth = 1;
+        let elemHeight = 1;
+        let pixelRatio = 1;
+        let renderMode = CanvasRenderMode.Rendering;
+
+        if (args[0] && typeof args[0] === 'string') {
+            this._unitId = args[0];
+            const options = args[1] ?? {
+                elemWidth: 1,
+                elemHeight: 1,
+                pixelRatio: 1,
+                renderMode: CanvasRenderMode.Rendering,
+            };
+            elemWidth = options.elementWidth;
+            elemHeight = options.elementHeight;
+            pixelRatio = options.pixelRatio ?? 1;
+            renderMode = options.renderMode ?? CanvasRenderMode.Rendering;
+        } else {
+            elemWidth = args[0] ?? 1;
+            elemHeight = args[1] ?? 1;
+            pixelRatio = args[2] ?? 1;
+            renderMode = args[3] ?? CanvasRenderMode.Rendering;
+        }
+
         this._canvas = new Canvas({
-            mode,
+            mode: renderMode,
             width: elemWidth,
             height: elemHeight,
             pixelRatio,
@@ -153,7 +188,7 @@ export class Engine extends Disposable {
         this._handlePointerAction();
         this._handleDragAction();
 
-        if (mode !== CanvasRenderMode.Printing) {
+        if (renderMode !== CanvasRenderMode.Printing) {
             this._matchMediaHandler();
         }
     }
@@ -162,6 +197,10 @@ export class Engine extends Disposable {
         this._performanceMonitor = new PerformanceMonitor();
     }
 
+    get unitId(): string {
+        return this._unitId;
+    }
+
     get elapsedTime(): number {
         return Tools.now() - this._renderStartTime;
     }
@@ -247,7 +286,7 @@ export class Engine extends Disposable {
      * To ensure mouse events remain bound to the host element,
      * preventing the events from becoming ineffective once the mouse leaves the host.
      */
-    setRemainCapture() {
+    setCapture() {
         try {
             this.getCanvasElement().setPointerCapture(this._remainCapture);
         } catch {
@@ -380,7 +419,7 @@ export class Engine extends Disposable {
         if (!this._renderingQueueLaunched) {
             this._renderStartTime = performance.now();
             this._renderingQueueLaunched = true;
-            this._renderFunction = this._renderFunctionCore.bind(this);
+            // this._renderFunction = this._renderFunctionCore.bind(this);
             this._requestNewFrameHandler = requestNewFrame(this._renderFunction);
         }
     }
@@ -394,6 +433,31 @@ export class Engine extends Disposable {
         this.startRenderLoop();
     }
 
+    /**
+     * call itself by raf
+     * Exec all function in _renderFrameTasks in _renderFrame()
+     */
+    private _renderFunction = (timestamp: number) => {
+        let shouldRender = true;
+        if (!this.renderEvenInBackground) {
+            shouldRender = false;
+        }
+
+        if (shouldRender) {
+            // Start new frame
+            this._beginFrame(timestamp);
+            // exec functions in _renderFrameTasks
+            this._renderFrame(timestamp);
+            this._endFrame(timestamp);
+        }
+
+        if (this._renderFrameTasks.length > 0) {
+            this._requestNewFrameHandler = requestNewFrame(this._renderFunction);
+        } else {
+            this._renderingQueueLaunched = false;
+        }
+    };
+
     /**
      * stop executing a render loop function and remove it from the execution array
      * @param renderFunction defines the function to be removed. If not provided all functions will be removed.
@@ -492,48 +556,18 @@ export class Engine extends Disposable {
         return window;
     }
 
-    /**
-     * call itself by raf
-     * Exec all function in _renderFrameTasks in _renderFrame()
-     */
-    private _renderFunctionCore(timestamp: number): void {
-        let shouldRender = true;
-        if (!this.renderEvenInBackground) {
-            shouldRender = false;
-        }
-
-        if (shouldRender) {
-            // Start new frame
-            this._beginFrame(timestamp);
-            this._renderFrame(timestamp);
-            this._endFrame(timestamp);
-        }
-
-        if (this._renderFrameTasks.length > 0) {
-            this._requestNewFrameHandler = requestNewFrame(this._renderFunction);
-        } else {
-            this._renderingQueueLaunched = false;
-        }
-    }
-
     private _handleKeyboardAction() {
         const keyboardDownEvent = (evt: KeyboardEvent) => {
             const deviceEvent = evt as unknown as IKeyboardEvent;
             deviceEvent.deviceType = DeviceType.Keyboard;
             deviceEvent.inputIndex = evt.keyCode;
-            // deviceEvent.previousState = 0;
-            // deviceEvent.currentState = 1;
-
             this.onInputChanged$.emitEvent(deviceEvent);
         };
 
         const keyboardUpEvent = (evt: KeyboardEvent) => {
             const deviceEvent = evt as unknown as IKeyboardEvent;
             deviceEvent.deviceType = DeviceType.Keyboard;
             deviceEvent.inputIndex = evt.keyCode;
-            // deviceEvent.previousState = 1;
-            // deviceEvent.currentState = 0;
-
             this.onInputChanged$.emitEvent(deviceEvent);
         };
 

packages/engine-render/src/index.ts

@@ -49,5 +49,4 @@ export * from './scene-viewer';
 export * from './scroll-timer';
 export * from './shape';
 export { ThinEngine } from './thin-engine';
-export { ThinScene } from './thin-scene';
 export * from './viewport';

packages/engine-render/src/layer.ts

@@ -189,7 +189,6 @@ export class Layer extends Disposable {
 
     makeDirty(state: boolean = true) {
         this._dirty = state;
-
         /**
          * parent is SceneViewer, make it dirty
          */

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

@@ -196,7 +196,7 @@ export class RenderManagerService extends Disposable implements IRenderManagerSe
      * @returns renderUnit:IRender
      */
     createRender(unitId: string): IRender {
-        const renderer = this._createRender(unitId, new Engine());
+        const renderer = this._createRender(unitId, new Engine(unitId));
         this._renderCreated$.next(renderer);
         return renderer;
     }

packages/engine-render/src/scene.input-manager.ts

@@ -149,7 +149,7 @@ export class InputManager extends Disposable {
 
         if (this._checkDirectSceneEventTrigger(!isStop, this._currentObject)) {
             this._scene.onPointerMove$.emitEvent(evt);
-            this._scene.getEngine()?.setRemainCapture();
+            this._scene.getEngine()?.setCapture();
         }
     }
 
@@ -185,30 +185,37 @@ export class InputManager extends Disposable {
 
     _onPointerCancel(evt: IPointerEvent) {
         this._scene.onPointerCancel$.emitEvent(evt);
+        const currentObject = this._getObjectAtPos(evt.offsetX, evt.offsetY);
+        currentObject?.triggerPointerCancel(evt);
     }
 
     _onPointerOut(evt: IPointerEvent) {
         this._scene.onPointerOut$.emitEvent(evt);
+        const currentObject = this._getObjectAtPos(evt.offsetX, evt.offsetY);
+        currentObject?.triggerPointerOut(evt);
     }
 
     _onMouseWheel(evt: IWheelEvent) {
         const currentObject = this._getObjectAtPos(evt.offsetX, evt.offsetY);
         const isStop = currentObject?.triggerMouseWheel(evt);
 
         // for doc
-        const viewportMain = (this._scene as Scene).getMainViewport();
+        const viewportMain = this._scene.getMainViewport();
         viewportMain.onMouseWheel$.emitEvent(evt);
 
+        // what is checkDirectSceneEventTrigger??  for what ???
         if (this._checkDirectSceneEventTrigger(!isStop, currentObject)) {
             this._scene.onMouseWheel$.emitEvent(evt);
         }
     }
 
     _onKeyDown(evt: IKeyboardEvent) {
+        // currently nobody using this. use `fromGlobalEvent('keydown')` from rx.js instead.
         this._scene.onKeyDown$.emitEvent(evt);
     }
 
     _onKeyUp(evt: IKeyboardEvent) {
+        // currently nobody using this. use `fromGlobalEvent('keyup')` from rx.js instead.
         this._scene.onKeyUp$.emitEvent(evt);
     }
 
@@ -233,7 +240,7 @@ export class InputManager extends Disposable {
 
         if (this._checkDirectSceneEventTrigger(!isStop, this._currentObject)) {
             this._scene.onDragOver$.emitEvent(evt);
-            this._scene.getEngine()?.setRemainCapture();
+            this._scene.getEngine()?.setCapture();
         }
     }
 

packages/engine-render/src/scene.ts

@@ -79,7 +79,15 @@ export class Scene extends Disposable {
     onDblclick$ = new EventSubject<IPointerEvent | IMouseEvent>();
     onTripleClick$ = new EventSubject<IPointerEvent | IMouseEvent>();
     onMouseWheel$ = new EventSubject<IWheelEvent>();
+
+    /**
+     * @deprecated  use `fromGlobalEvent('keydown')` from rx.js instead.
+     */
     onKeyDown$ = new EventSubject<IKeyboardEvent>();
+
+    /**
+     * @deprecated  use `fromGlobalEvent('keyup')` from rx.js instead.
+     */
     onKeyUp$ = new EventSubject<IKeyboardEvent>();
 
     private _beforeRender$ = new BehaviorSubject<Nullable<Canvas>>(null);
@@ -1004,19 +1012,19 @@ export class Scene extends Disposable {
         return isPickedObject;
     }
 
-    triggerKeyDown(evt: IKeyboardEvent) {
-        this.onKeyDown$.emitEvent(evt);
+    // triggerKeyDown(evt: IKeyboardEvent) {
+    //     this.onKeyDown$.emitEvent(evt);
         // if (this._parent instanceof SceneViewer) {
         //     this._parent?.triggerKeyDown(evt);
         // }
-    }
+    // }
 
-    triggerKeyUp(evt: IKeyboardEvent) {
-        this.onKeyUp$.emitEvent(evt);
+    // triggerKeyUp(evt: IKeyboardEvent) {
+    //     this.onKeyUp$.emitEvent(evt);
         // if (this._parent instanceof SceneViewer) {
         //     this._parent?.triggerKeyUp(evt);
         // }
-    }
+    // }
 
     triggerPointerUp(evt: IPointerEvent | IMouseEvent) {
         if (
@@ -1115,6 +1123,14 @@ export class Scene extends Disposable {
         return true;
     }
 
+    triggerPointerCancel(evt: IPointerEvent) {
+        if (this._parent.classType === RENDER_CLASS_TYPE.SCENE_VIEWER) {
+            (this._parent as SceneViewer)?.triggerPointerCancel(evt);
+            return false;
+        }
+        return true;
+    }
+
     triggerPointerEnter(evt: IPointerEvent | IMouseEvent) {
         // this.onPointerEnter$.emitEvent(evt);
         if (