fix(select): select rect position

libs/components/editor-core/src/RenderRoot.tsx

@@ -4,7 +4,7 @@ import { styled, usePatchNodes } from '@toeverything/components/ui';
 import type { FC, PropsWithChildren } from 'react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { RootContext } from './contexts';
-import { SelectionRect, SelectionRef } from './selection';
+import { SelectionRect, SelectionRef } from './Selection';
 import {
     Protocol,
     services,
@@ -205,20 +205,17 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
                     {children}
                     {patchedNodes}
                 </Content>
-                {editor.isWhiteboard ? null : <ScrollBlank editor={editor} />}
                 {/** TODO: remove selectionManager insert */}
                 {container && editor && (
-                    <SelectionRect
+                    <SelectionRect ref={selectionRef} editor={editor} />
-                        ref={selectionRef}
-                        container={container}
-                        editor={editor}
-                    />
                 )}
+                {editor.isWhiteboard ? null : <ScrollBlank editor={editor} />}
             </Container>
         </RootContext.Provider>
     );
 };
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
 function ScrollBlank({ editor }: { editor: BlockEditor }) {
     const mouseMoved = useRef(false);
 
@@ -281,6 +278,7 @@ const Container = styled('div')(
         overflowY: isWhiteboard ? 'unset' : 'auto',
         padding: isWhiteboard ? 0 : '96px 150px 0 150px',
         minWidth: isWhiteboard ? 'unset' : '940px',
+        position: 'relative',
     })
 );
 

libs/components/editor-core/src/Selection.tsx

@@ -1,6 +1,5 @@
 import React, {
     forwardRef,
-    useCallback,
     useImperativeHandle,
     useEffect,
     useRef,
@@ -14,16 +13,13 @@ import { styled } from '@toeverything/components/ui';
 type MouseType = 'up' | 'down';
 
 interface SelectionProps {
-    container?: HTMLElement;
     editor: BlockEditor;
 }
 
-const styles = style9.create({
+const RectContainer = styled('div')({
-    selectionRect: {
+    backgroundColor: 'rgba(152, 172, 189, 0.1)',
-        backgroundColor: 'rgba(152, 172, 189, 0.1)',
+    position: 'absolute',
-        position: 'absolute',
+    zIndex: 99,
-        zIndex: 99,
-    },
 });
 
 type VerticalTypes = 'up' | 'down' | null;
@@ -103,10 +99,10 @@ const setSelectedNodesByPoints = async (
 
 export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
     (props, ref) => {
-        const { container, editor } = props;
+        const { editor } = props;
         const { selectionManager, scrollManager } = editor;
 
-        const [isShow, setIsShow] = useState<boolean>(false);
+        const [show, setShow] = useState<boolean>(false);
         const startPointRef = useRef<Point>();
         const endPointRef = useRef<Point>();
         const [rect, setRect] = useState<Rect>(Rect.fromLTRB(0, 0, 0, 0));
@@ -137,7 +133,7 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
             if (mouseType.current === 'down' && !startPointAtBlock.current) {
                 event.preventDefault();
                 endPointRef.current = new Point(event.clientX, event.clientY);
-                setIsShow(true);
+                setShow(true);
 
                 if (startPointRef.current) {
                     await setSelectedNodesByPoints(
@@ -182,7 +178,7 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
         const onMouseUp = () => {
             mouseType.current = 'up';
             startPointAtBlock.current = false;
-            setIsShow(false);
+            setShow(false);
             scrollManager.stopAutoScroll();
         };
 
@@ -250,11 +246,10 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
             scrollManager.onScrolling(scrollingCallback);
 
             return () => scrollManager.removeScrolling(scrollingCallback);
-        }, [scrollManager]);
+        }, [editor, scrollManager]);
 
-        return isShow ? (
+        return show ? (
-            <div
+            <RectContainer
-                className={styles('selectionRect')}
                 style={{
                     left: `${rect.left}px`,
                     top: `${rect.top}px`,

libs/components/editor-core/src/editor/editor.ts

@@ -1,5 +1,4 @@
 /* eslint-disable max-lines */
-import type { ReactNode } from 'react';
 import HotKeys from 'hotkeys-js';
 import LRUCache from 'lru-cache';
 
@@ -9,7 +8,7 @@ import type {
     ReturnEditorBlock,
     UpdateEditorBlock,
 } from '@toeverything/datasource/db-service';
-import type { PatchNode, UnPatchNode } from '@toeverything/components/ui';
+import type { PatchNode } from '@toeverything/components/ui';
 
 import { AsyncBlock } from './block';
 import type { WorkspaceAndBlockId } from './block';
@@ -46,7 +45,7 @@ export interface EditorCtorProps {
 }
 
 export class Editor implements Virgo {
-    private cache_manager = new LRUCache<string, Promise<AsyncBlock | null>>({
+    private _cacheManager = new LRUCache<string, Promise<AsyncBlock | null>>({
         max: 8192,
         ttl: 1000 * 60 * 30,
     });
@@ -136,7 +135,7 @@ export class Editor implements Virgo {
 
     public set container(v: HTMLDivElement) {
         this.ui_container = v;
-        this.init_clipboard();
+        this._initClipboard();
     }
 
     public get container() {
@@ -171,7 +170,7 @@ export class Editor implements Virgo {
         this.clipboard_populator?.disposeInternal();
     }
 
-    private init_clipboard() {
+    private _initClipboard() {
         this._disposeClipboard();
         if (this.ui_container && !this._isDisposed) {
             this.clipboard = new BrowserClipboard(
@@ -261,7 +260,7 @@ export class Editor implements Virgo {
         workspace,
         id,
     }: WorkspaceAndBlockId): Promise<AsyncBlock | null> {
-        const block = this.cache_manager.get(id);
+        const block = this._cacheManager.get(id);
         if (block) {
             return block;
         }
@@ -288,7 +287,7 @@ export class Editor implements Virgo {
             };
             create();
         });
-        this.cache_manager.set(id, block_promise);
+        this._cacheManager.set(id, block_promise);
         return await block_promise;
     }
 
@@ -301,7 +300,7 @@ export class Editor implements Virgo {
         });
         const block = await this._initBlock(blockData);
         if (block) {
-            this.cache_manager.set(block.id, Promise.resolve(block));
+            this._cacheManager.set(block.id, Promise.resolve(block));
         }
         return block;
     }

libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx

@@ -172,5 +172,6 @@ export class LeftMenuPlugin extends BasePlugin {
     public override dispose(): void {
         // TODO: rxjs
         this.root?.unmount();
+        super.dispose();
     }
 }

libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx

@@ -0,0 +1,19 @@
+import { styled } from '@toeverything/components/ui';
+import { DndTree } from './DndTree';
+import { useDndTreeAutoUpdate } from './use-page-tree';
+
+const Root = styled('div')({
+    minWidth: 160,
+    maxWidth: 260,
+    marginLeft: 18,
+    marginRight: 6,
+});
+
+export const PageTree = () => {
+    useDndTreeAutoUpdate();
+    return (
+        <Root>
+            <DndTree collapsible removable />
+        </Root>
+    );
+};

libs/components/layout/src/workspace-sidebar/page-tree/index.ts

@@ -1,4 +1,4 @@
-export { PageTree } from './page-tree';
+export { PageTree } from './PageTree';
 export { usePageTree } from './use-page-tree';
 
 export * from './types';

libs/components/layout/src/workspace-sidebar/page-tree/page-tree.tsx

@@ -1,22 +0,0 @@
-import style9 from 'style9';
-
-import { DndTree } from './DndTree';
-import { useDndTreeAutoUpdate } from './use-page-tree';
-
-const styles = style9.create({
-    root: {
-        minWidth: 160,
-        maxWidth: 260,
-        marginLeft: 18,
-        marginRight: 6,
-    },
-});
-
-export const PageTree = () => {
-    useDndTreeAutoUpdate();
-    return (
-        <div className={styles('root')}>
-            <DndTree collapsible removable />
-        </div>
-    );
-};