From 95629486b3c851d2e78d93496f1a027ed87cdadb Mon Sep 17 00:00:00 2001 From: austaras Date: Mon, 25 Jul 2022 11:15:14 +0800 Subject: [PATCH] fix(select): select rect position --- .../components/editor-core/src/RenderRoot.tsx | 12 ++++----- .../src/{selection.tsx => Selection.tsx} | 27 ++++++++----------- .../editor-core/src/editor/editor.ts | 15 +++++------ .../src/menu/left-menu/LeftMenuPlugin.tsx | 1 + .../workspace-sidebar/page-tree/PageTree.tsx | 19 +++++++++++++ .../src/workspace-sidebar/page-tree/index.ts | 2 +- .../workspace-sidebar/page-tree/page-tree.tsx | 22 --------------- 7 files changed, 44 insertions(+), 54 deletions(-) rename libs/components/editor-core/src/{selection.tsx => Selection.tsx} (94%) create mode 100755 libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx delete mode 100755 libs/components/layout/src/workspace-sidebar/page-tree/page-tree.tsx diff --git a/libs/components/editor-core/src/RenderRoot.tsx b/libs/components/editor-core/src/RenderRoot.tsx index 2afd3f039..d6af706eb 100644 --- a/libs/components/editor-core/src/RenderRoot.tsx +++ b/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> = ({ {children} {patchedNodes} - {editor.isWhiteboard ? null : } {/** TODO: remove selectionManager insert */} {container && editor && ( - + )} + {editor.isWhiteboard ? null : } ); }; +// 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', }) ); diff --git a/libs/components/editor-core/src/selection.tsx b/libs/components/editor-core/src/Selection.tsx similarity index 94% rename from libs/components/editor-core/src/selection.tsx rename to libs/components/editor-core/src/Selection.tsx index 93316c284..26880a987 100644 --- a/libs/components/editor-core/src/selection.tsx +++ b/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({ - selectionRect: { - backgroundColor: 'rgba(152, 172, 189, 0.1)', - position: 'absolute', - zIndex: 99, - }, +const RectContainer = styled('div')({ + backgroundColor: 'rgba(152, 172, 189, 0.1)', + position: 'absolute', + zIndex: 99, }); type VerticalTypes = 'up' | 'down' | null; @@ -103,10 +99,10 @@ const setSelectedNodesByPoints = async ( export const SelectionRect = forwardRef( (props, ref) => { - const { container, editor } = props; + const { editor } = props; const { selectionManager, scrollManager } = editor; - const [isShow, setIsShow] = useState(false); + const [show, setShow] = useState(false); const startPointRef = useRef(); const endPointRef = useRef(); const [rect, setRect] = useState(Rect.fromLTRB(0, 0, 0, 0)); @@ -137,7 +133,7 @@ export const SelectionRect = forwardRef( 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( const onMouseUp = () => { mouseType.current = 'up'; startPointAtBlock.current = false; - setIsShow(false); + setShow(false); scrollManager.stopAutoScroll(); }; @@ -250,11 +246,10 @@ export const SelectionRect = forwardRef( scrollManager.onScrolling(scrollingCallback); return () => scrollManager.removeScrolling(scrollingCallback); - }, [scrollManager]); + }, [editor, scrollManager]); - return isShow ? ( -
>({ + private _cacheManager = new LRUCache>({ 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 { - 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; } diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx index 7fd4f7722..65323f6d1 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx +++ b/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(); } } diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/PageTree.tsx new file mode 100755 index 000000000..d40442ce0 --- /dev/null +++ b/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 ( + + + + ); +}; diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/index.ts b/libs/components/layout/src/workspace-sidebar/page-tree/index.ts index b16107ca8..3e1ca6026 100644 --- a/libs/components/layout/src/workspace-sidebar/page-tree/index.ts +++ b/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'; diff --git a/libs/components/layout/src/workspace-sidebar/page-tree/page-tree.tsx b/libs/components/layout/src/workspace-sidebar/page-tree/page-tree.tsx deleted file mode 100755 index 3d7109b66..000000000 --- a/libs/components/layout/src/workspace-sidebar/page-tree/page-tree.tsx +++ /dev/null @@ -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 ( -
- -
- ); -};