From b9f46028a83e268f60167fce007f5ba1003ae094 Mon Sep 17 00:00:00 2001 From: austaras Date: Tue, 26 Jul 2022 17:28:19 +0800 Subject: [PATCH] fix(editor): remove rootRect and modify layout --- apps/ligo-virgo/src/pages/AppContainer.tsx | 1 + .../src/pages/workspace/docs/index.tsx | 51 ++++----- .../components/editor-core/src/RenderRoot.tsx | 62 +++------- .../src/drag-drop-wrapper/DragDropWrapper.tsx | 17 +-- .../editor-core/src/editor/plugin/hooks.ts | 108 ++++++++---------- .../editor-core/src/editor/types.ts | 14 +-- .../editor-plugins/src/base-plugin.ts | 6 +- .../src/block-property/index.tsx | 2 +- .../editor-plugins/src/comment/Plugin.tsx | 2 +- .../src/menu/command-menu/CommandMenu.tsx | 3 +- .../src/menu/group-menu/GropuMenu.tsx | 8 +- .../src/menu/group-menu/Line.tsx | 4 +- .../src/menu/group-menu/Plugin.tsx | 2 +- .../src/menu/inline-menu/Plugin.tsx | 2 +- .../src/menu/left-menu/LeftMenuDraggable.tsx | 26 +++-- .../src/menu/left-menu/LeftMenuPlugin.tsx | 2 +- .../src/menu/reference-menu/index.tsx | 2 +- .../SelectionGroupPlugin.tsx | 2 +- .../src/placeholder/Placeholder.tsx | 2 +- .../index.tsx => PatchElements.tsx} | 18 +-- libs/components/ui/src/index.ts | 4 +- 21 files changed, 138 insertions(+), 200 deletions(-) rename libs/components/ui/src/{patch-elements/index.tsx => PatchElements.tsx} (63%) diff --git a/apps/ligo-virgo/src/pages/AppContainer.tsx b/apps/ligo-virgo/src/pages/AppContainer.tsx index b554cd0faa..18caa7d209 100644 --- a/apps/ligo-virgo/src/pages/AppContainer.tsx +++ b/apps/ligo-virgo/src/pages/AppContainer.tsx @@ -20,6 +20,7 @@ export function LigoVirgoRootContainer() { const StyledMainContainer = styled('div')({ flex: 'auto', display: 'flex', + overflowY: 'hidden', }); const StyledRootContainer = styled('div')({ diff --git a/apps/ligo-virgo/src/pages/workspace/docs/index.tsx b/apps/ligo-virgo/src/pages/workspace/docs/index.tsx index b24816952f..4ccf9f199f 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/index.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/index.tsx @@ -55,7 +55,7 @@ export function Page(props: PageProps) { ); await services.api.editorBlock.clearUndoRedo(props.workspace); }; - update_recent_pages(); + updateRecentPages(); }, [user, props.workspace, page_id]); return ( @@ -89,7 +89,7 @@ export function Page(props: PageProps) { title="Activities" initialOpen={false} > - +
@@ -102,25 +102,23 @@ export function Page(props: PageProps) { - - {page_id ? ( - - ) : ( - - - - )} - + {page_id ? ( + + ) : ( + + + + )} ); @@ -128,7 +126,6 @@ export function Page(props: PageProps) { const LigoApp = styled('div')({ width: '100vw', - position: 'relative', display: 'flex', flex: '1 1 0%', backgroundColor: 'white', @@ -136,19 +133,11 @@ const LigoApp = styled('div')({ }); const LigoRightContainer = styled('div')({ - position: 'relative', width: '100%', + overflowY: 'auto', flex: 'auto', }); -const LigoEditorOuterContainer = styled('div')({ - position: 'absolute', - height: '100%', - width: '100%', - overflowX: 'hidden', - overflowY: 'hidden', -}); - const LigoLeftContainer = styled('div')({ flex: '0 0 auto', }); diff --git a/libs/components/editor-core/src/RenderRoot.tsx b/libs/components/editor-core/src/RenderRoot.tsx index ddeabab4ff..7a4e520f65 100644 --- a/libs/components/editor-core/src/RenderRoot.tsx +++ b/libs/components/editor-core/src/RenderRoot.tsx @@ -31,10 +31,8 @@ export const RenderRoot: FC> = ({ editorElement, children, }) => { - const contentRef = useRef(null); const selectionRef = useRef(null); const triggeredBySelect = useRef(false); - const [container, setContainer] = useState(); const [pageWidth, setPageWidth] = useState(MIN_PAGE_WIDTH); const isOnDrag = useIsOnDrag(editor); @@ -55,13 +53,6 @@ export const RenderRoot: FC> = ({ } }, [editor.workspace, rootId]); - useEffect(() => { - if (container) { - editor.container = container; - editor.getHooks().render(); - } - }, [editor, container]); - useEffect(() => { fetchPageBlockWidth(); @@ -85,11 +76,7 @@ export const RenderRoot: FC> = ({ event: React.MouseEvent ) => { selectionRef.current?.onMouseMove(event); - if (!contentRef.current) { - return; - } - const rootRect: DOMRect = contentRef.current.getBoundingClientRect(); - editor.getHooks().onRootNodeMouseMove(event, rootRect); + editor.getHooks().onRootNodeMouseMove(event); const slidingBlock = await editor.getBlockByPoint( new Point(event.clientX, event.clientY) @@ -100,7 +87,6 @@ export const RenderRoot: FC> = ({ blockId: slidingBlock.id, dom: slidingBlock.dom, rect: slidingBlock.dom.getBoundingClientRect(), - rootRect: rootRect, type: slidingBlock.type, properties: slidingBlock.getProperties(), }); @@ -149,33 +135,21 @@ export const RenderRoot: FC> = ({ }; const onDragOver = (event: React.DragEvent) => { - event.dataTransfer.dropEffect = 'move'; - event.preventDefault(); - if (!contentRef.current) { - return; - } - const rootRect: DOMRect = contentRef.current.getBoundingClientRect(); editor.dragDropManager.handlerEditorDragOver(event); if (editor.dragDropManager.isEnabled()) { - editor.getHooks().onRootNodeDragOver(event, rootRect); + editor.getHooks().onRootNodeDragOver(event); } }; const onDragOverCapture = (event: React.DragEvent) => { - event.preventDefault(); - if (!contentRef.current) { - return; - } - const rootRect: DOMRect = contentRef.current.getBoundingClientRect(); if (editor.dragDropManager.isEnabled()) { - editor.getHooks().onRootNodeDragOver(event, rootRect); + editor.getHooks().onRootNodeDragOver(event); } }; const onDragEnd = (event: React.DragEvent) => { - const rootRect: DOMRect = contentRef.current.getBoundingClientRect(); editor.dragDropManager.handlerEditorDragEnd(event); - editor.getHooks().onRootNodeDragEnd(event, rootRect); + editor.getHooks().onRootNodeDragEnd(event); }; const onDrop = (event: React.DragEvent) => { @@ -192,7 +166,10 @@ export const RenderRoot: FC> = ({ { - ref && setContainer(ref); + if (ref != null && ref !== editor.container) { + editor.container = ref; + editor.getHooks().render(); + } }} onMouseMove={onMouseMove} onMouseDown={onMouseDown} @@ -208,18 +185,13 @@ export const RenderRoot: FC> = ({ onDrop={onDrop} isOnDrag={isOnDrag} > - + {children} - {patchedNodes} {/** TODO: remove selectionManager insert */} - {container && editor && ( - - )} + {editor && } {editor.isWhiteboard ? null : } + {patchedNodes} ); @@ -281,6 +253,8 @@ function ScrollBlank({ editor }: { editor: BlockEditor }) { ); } +const PADDING_X = 150; + const Container = styled('div')( ({ isWhiteboard, @@ -290,9 +264,7 @@ const Container = styled('div')( isOnDrag: boolean; }) => ({ width: '100%', - height: '100%', - overflowY: isWhiteboard ? 'unset' : 'auto', - padding: isWhiteboard ? 0 : '96px 150px 0 150px', + padding: isWhiteboard ? 0 : `96px ${PADDING_X}px 0 ${PADDING_X}px`, minWidth: isWhiteboard ? 'unset' : '940px', position: 'relative', ...(isOnDrag && { @@ -309,7 +281,9 @@ const Content = styled('div')({ margin: '0 auto', transitionDuration: '.2s', transitionTimingFunction: 'ease-in', - position: 'relative', }); -const ScrollBlankContainter = styled('div')({ paddingBottom: '30vh' }); +const ScrollBlankContainter = styled('div')({ + paddingBottom: '30vh', + margin: `0 -${PADDING_X}px`, +}); diff --git a/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx b/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx index 6ef1db4c92..859fea03de 100644 --- a/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx +++ b/libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx @@ -1,8 +1,6 @@ import { AsyncBlock, BlockEditor } from '../editor'; import { ReactElement } from 'react'; -export const dragDropWrapperClass = 'drag-drop-wrapper'; - interface DragDropWrapperProps { editor: BlockEditor; block: AsyncBlock; @@ -14,25 +12,16 @@ export function DragDropWrapper({ editor, block, }: DragDropWrapperProps) { - const handler_drag_over: React.DragEventHandler< - HTMLDivElement - > = async event => { - event.preventDefault(); - const rootDom = await editor.getBlockDomById(editor.getRootBlockId()); - if (block.dom && rootDom) { + const handlerDragOver: React.DragEventHandler = event => { + if (block.dom) { editor.getHooks().afterOnNodeDragOver(event, { blockId: block.id, dom: block.dom, rect: block.dom?.getBoundingClientRect(), - rootRect: rootDom.getBoundingClientRect(), type: block.type, properties: block.getProperties(), }); } }; - return ( -
- {children} -
- ); + return
{children}
; } diff --git a/libs/components/editor-core/src/editor/plugin/hooks.ts b/libs/components/editor-core/src/editor/plugin/hooks.ts index 5798b1982d..b20ee0defa 100644 --- a/libs/components/editor-core/src/editor/plugin/hooks.ts +++ b/libs/components/editor-core/src/editor/plugin/hooks.ts @@ -15,37 +15,37 @@ interface PluginHookInfo { } export class Hooks implements HooksRunner, PluginHooks { - private hooks_map: Map = new Map(); + private _hooksMap: Map = new Map(); dispose() { - this.hooks_map.clear(); + this._hooksMap.clear(); } - private run_hook(key: HookType, ...params: unknown[]): void { - const hook_infos: PluginHookInfo[] = this.hooks_map.get(key) || []; - hook_infos.forEach(hook_info => { - if (hook_info.once) { - this.removeHook(key, hook_info.callback); + private _runHook(key: HookType, ...params: unknown[]): void { + const hookInfos: PluginHookInfo[] = this._hooksMap.get(key) || []; + hookInfos.forEach(hookInfo => { + if (hookInfo.once) { + this.removeHook(key, hookInfo.callback); } - let is_stopped_propagation = false; + let isStoppedPropagation = false; const hookOption: HookBaseArgs = { stopImmediatePropagation: () => { - is_stopped_propagation = true; + isStoppedPropagation = true; }, }; - hook_info.callback.call( - hook_info.thisObj || this, + hookInfo.callback.call( + hookInfo.thisObj || this, ...params, hookOption ); - return is_stopped_propagation; + return isStoppedPropagation; }); } - private has_hook(key: HookType, callback: AnyFunction): boolean { - const hook_infos: PluginHookInfo[] = this.hooks_map.get(key) || []; - for (let i = hook_infos.length - 1; i >= 0; i--) { - if (hook_infos[i].callback === callback) { + private _hasHook(key: HookType, callback: AnyFunction): boolean { + const hookInfos: PluginHookInfo[] = this._hooksMap.get(key) || []; + for (let i = hookInfos.length - 1; i >= 0; i--) { + if (hookInfos[i].callback === callback) { return true; } } @@ -59,14 +59,14 @@ export class Hooks implements HooksRunner, PluginHooks { thisObj?: AnyThisType, once?: boolean ): void { - if (this.has_hook(key, callback)) { + if (this._hasHook(key, callback)) { throw new Error('Duplicate registration of the same class'); } - if (!this.hooks_map.has(key)) { - this.hooks_map.set(key, []); + if (!this._hooksMap.has(key)) { + this._hooksMap.set(key, []); } - const hook_infos: PluginHookInfo[] = this.hooks_map.get(key); - hook_infos.push({ callback, thisObj, once }); + const hookInfos: PluginHookInfo[] = this._hooksMap.get(key); + hookInfos.push({ callback, thisObj, once }); } // 执行一次 @@ -80,122 +80,112 @@ export class Hooks implements HooksRunner, PluginHooks { // 移除 public removeHook(key: HookType, callback: AnyFunction): void { - const hook_infos: PluginHookInfo[] = this.hooks_map.get(key) || []; - for (let i = hook_infos.length - 1; i >= 0; i--) { - if (hook_infos[i].callback === callback) { - hook_infos.splice(i, 1); + const hookInfos: PluginHookInfo[] = this._hooksMap.get(key) || []; + for (let i = hookInfos.length - 1; i >= 0; i--) { + if (hookInfos[i].callback === callback) { + hookInfos.splice(i, 1); } } } public init(): void { - this.run_hook(HookType.INIT); + this._runHook(HookType.INIT); } public render(): void { - this.run_hook(HookType.RENDER); + this._runHook(HookType.RENDER); } public onRootNodeKeyDown(e: React.KeyboardEvent): void { - this.run_hook(HookType.ON_ROOT_NODE_KEYDOWN, e); + this._runHook(HookType.ON_ROOT_NODE_KEYDOWN, e); } public onRootNodeKeyDownCapture( e: React.KeyboardEvent ): void { - this.run_hook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, e); + this._runHook(HookType.ON_ROOT_NODE_KEYDOWN_CAPTURE, e); } public onRootNodeKeyUp(e: React.KeyboardEvent): void { - this.run_hook(HookType.ON_ROOT_NODE_KEYUP, e); + this._runHook(HookType.ON_ROOT_NODE_KEYUP, e); } public onRootNodeMouseDown( e: React.MouseEvent ): void { - this.run_hook(HookType.ON_ROOTNODE_MOUSE_DOWN, e); + this._runHook(HookType.ON_ROOTNODE_MOUSE_DOWN, e); } public onRootNodeMouseMove( - e: React.MouseEvent, - root_rect: DOMRect + e: React.MouseEvent ): void { - this.run_hook(HookType.ON_ROOTNODE_MOUSE_MOVE, e, root_rect); + this._runHook(HookType.ON_ROOTNODE_MOUSE_MOVE, e); } public onRootNodeMouseUp( e: React.MouseEvent ): void { - this.run_hook(HookType.ON_ROOTNODE_MOUSE_UP, e); + this._runHook(HookType.ON_ROOTNODE_MOUSE_UP, e); } public onRootNodeMouseOut( e: React.MouseEvent ): void { - this.run_hook(HookType.ON_ROOTNODE_MOUSE_OUT, e); + this._runHook(HookType.ON_ROOTNODE_MOUSE_OUT, e); } public onRootNodeMouseLeave( e: React.MouseEvent ): void { - this.run_hook(HookType.ON_ROOTNODE_MOUSE_LEAVE, e); + this._runHook(HookType.ON_ROOTNODE_MOUSE_LEAVE, e); } public afterOnNodeMouseMove( e: React.MouseEvent, node: BlockDomInfo ): void { - this.run_hook(HookType.AFTER_ON_NODE_MOUSE_MOVE, e, node); + this._runHook(HookType.AFTER_ON_NODE_MOUSE_MOVE, e, node); } public afterOnResize( e: React.MouseEvent ): void { - this.run_hook(HookType.AFTER_ON_RESIZE, e); + this._runHook(HookType.AFTER_ON_RESIZE, e); } - public onRootNodeDragOver( - e: React.DragEvent, - root_rect: DOMRect - ): void { - this.run_hook(HookType.ON_ROOTNODE_DRAG_OVER, e, root_rect); + public onRootNodeDragOver(e: React.DragEvent): void { + this._runHook(HookType.ON_ROOTNODE_DRAG_OVER, e); } - public onRootNodeDragEnd( - e: React.DragEvent, - root_rect: DOMRect - ): void { - this.run_hook(HookType.ON_ROOTNODE_DRAG_END, e, root_rect); + public onRootNodeDragEnd(e: React.DragEvent): void { + this._runHook(HookType.ON_ROOTNODE_DRAG_END, e); } public onRootNodeDrop(e: React.DragEvent): void { - this.run_hook(HookType.ON_ROOTNODE_DROP, e); + this._runHook(HookType.ON_ROOTNODE_DROP, e); } - public onRootNodeDragOverCapture( - e: React.DragEvent, - root_rect: DOMRect - ): void { - this.run_hook(HookType.ON_ROOTNODE_DRAG_OVER_CAPTURE, e, root_rect); + public onRootNodeDragOverCapture(e: React.DragEvent): void { + this._runHook(HookType.ON_ROOTNODE_DRAG_OVER_CAPTURE, e); } public afterOnNodeDragOver( e: React.DragEvent, node: BlockDomInfo ): void { - this.run_hook(HookType.AFTER_ON_NODE_DRAG_OVER, e, node); + this._runHook(HookType.AFTER_ON_NODE_DRAG_OVER, e, node); } public onSearch(): void { - this.run_hook(HookType.ON_SEARCH); + this._runHook(HookType.ON_SEARCH); } public beforeCopy(e: ClipboardEvent): void { - this.run_hook(HookType.BEFORE_COPY, e); + this._runHook(HookType.BEFORE_COPY, e); } public beforeCut(e: ClipboardEvent): void { - this.run_hook(HookType.BEFORE_CUT, e); + this._runHook(HookType.BEFORE_CUT, e); } public onRootNodeScroll(e: React.UIEvent): void { diff --git a/libs/components/editor-core/src/editor/types.ts b/libs/components/editor-core/src/editor/types.ts index a4166ecfdf..24d8f6a641 100644 --- a/libs/components/editor-core/src/editor/types.ts +++ b/libs/components/editor-core/src/editor/types.ts @@ -186,7 +186,6 @@ export interface BlockDomInfo { dom: HTMLElement; type: BlockFlavorKeys; rect: DOMRect; - rootRect: DOMRect; properties: Record; } @@ -201,8 +200,7 @@ export interface HooksRunner { e: React.MouseEvent ) => void; onRootNodeMouseMove: ( - e: React.MouseEvent, - root_rect: DOMRect + e: React.MouseEvent ) => void; onRootNodeMouseUp: ( e: React.MouseEvent @@ -219,14 +217,8 @@ export interface HooksRunner { node: BlockDomInfo ) => void; afterOnResize: (e: React.MouseEvent) => void; - onRootNodeDragOver: ( - e: React.DragEvent, - root_rect: DOMRect - ) => void; - onRootNodeDragEnd: ( - e: React.DragEvent, - root_rect: DOMRect - ) => void; + onRootNodeDragOver: (e: React.DragEvent) => void; + onRootNodeDragEnd: (e: React.DragEvent) => void; onRootNodeDrop: (e: React.DragEvent) => void; afterOnNodeDragOver: ( e: React.DragEvent, diff --git a/libs/components/editor-plugins/src/base-plugin.ts b/libs/components/editor-plugins/src/base-plugin.ts index ad3d211d86..f6086fe56d 100644 --- a/libs/components/editor-plugins/src/base-plugin.ts +++ b/libs/components/editor-plugins/src/base-plugin.ts @@ -41,8 +41,8 @@ export abstract class BasePlugin implements Plugin { return hooks.removeHook(...args); }, }; - this.on_render = this.on_render.bind(this); - hooks.addHook(HookType.RENDER, this.on_render, this); + this._onRender = this._onRender.bind(this); + hooks.addHook(HookType.RENDER, this._onRender, this); } /** @@ -55,7 +55,7 @@ export abstract class BasePlugin implements Plugin { /** * will trigger multiple times */ - protected on_render(): void { + protected _onRender(): void { // implement in subclass } diff --git a/libs/components/editor-plugins/src/block-property/index.tsx b/libs/components/editor-plugins/src/block-property/index.tsx index 53c00860a5..ced1105839 100644 --- a/libs/components/editor-plugins/src/block-property/index.tsx +++ b/libs/components/editor-plugins/src/block-property/index.tsx @@ -60,7 +60,7 @@ export class BlockPropertyPlugin extends BasePlugin { ); }; - protected override on_render(): void { + protected override _onRender(): void { this.hooks.addHook( HookType.AFTER_ON_NODE_MOUSE_MOVE, this.on_mouse_move, diff --git a/libs/components/editor-plugins/src/comment/Plugin.tsx b/libs/components/editor-plugins/src/comment/Plugin.tsx index a454aafe9f..e1a3b8d102 100644 --- a/libs/components/editor-plugins/src/comment/Plugin.tsx +++ b/libs/components/editor-plugins/src/comment/Plugin.tsx @@ -12,7 +12,7 @@ export class AddCommentPlugin extends BasePlugin { private root: PluginRenderRoot; - protected override on_render(): void { + protected override _onRender(): void { this.root = new PluginRenderRoot({ name: AddCommentPlugin.pluginName, render: this.editor.reactRenderRoot?.render, diff --git a/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx b/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx index 898b471ccf..394ca6ceab 100644 --- a/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx +++ b/libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx @@ -14,8 +14,7 @@ export class CommandMenuPlugin extends BasePlugin { return PLUGIN_NAME; } - protected override on_render(): void { - if (this.editor.isWhiteboard) return; + protected override _onRender(): void { const container = document.createElement('div'); // TODO remove container.classList.add(`id-${PLUGIN_NAME}`); diff --git a/libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx b/libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx index 0c6bc70485..2040cfc33f 100644 --- a/libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx +++ b/libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx @@ -4,7 +4,7 @@ import { PluginHooks, Virgo, } from '@toeverything/components/editor-core'; -import { domToRect, Point } from '@toeverything/utils'; +import { Point } from '@toeverything/utils'; import { GroupDirection } from '@toeverything/framework/virgo'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { DragItem } from './DragItem'; @@ -46,7 +46,7 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) { setShowMenu(false); } }, - [setShowMenu] + [] ); const handleRootDragOver = useCallback( @@ -128,8 +128,8 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) { if (editor.container) { setPosition( new Point( - groupBlock.dom.offsetLeft - editor.container.offsetLeft, - groupBlock.dom.offsetTop - editor.container.offsetTop + groupBlock.dom.offsetLeft, + groupBlock.dom.offsetTop ) ); } diff --git a/libs/components/editor-plugins/src/menu/group-menu/Line.tsx b/libs/components/editor-plugins/src/menu/group-menu/Line.tsx index 4613f37dd2..c826c2ccd9 100644 --- a/libs/components/editor-plugins/src/menu/group-menu/Line.tsx +++ b/libs/components/editor-plugins/src/menu/group-menu/Line.tsx @@ -22,9 +22,9 @@ export const Line = function ({ direction, editor, groupBlock }: LineProps) { if (groupBlock && groupBlock.dom && editor.container) { setRect( Rect.fromLWTH( - groupBlock.dom.offsetLeft - editor.container.offsetLeft, + groupBlock.dom.offsetLeft, groupBlock.dom.offsetWidth, - groupBlock.dom.offsetTop - editor.container.offsetTop, + groupBlock.dom.offsetTop, groupBlock.dom.offsetHeight ) ); diff --git a/libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx b/libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx index 8774d7fca6..115e754202 100644 --- a/libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx +++ b/libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx @@ -13,7 +13,7 @@ export class GroupMenuPlugin extends BasePlugin { return PLUGIN_NAME; } - protected override on_render(): void { + protected override _onRender(): void { if (this.editor.isWhiteboard) return; this.root = new PluginRenderRoot({ name: PLUGIN_NAME, diff --git a/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx b/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx index b0d16140a2..1c47ca9646 100644 --- a/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx +++ b/libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx @@ -12,7 +12,7 @@ export class InlineMenuPlugin extends BasePlugin { private root: PluginRenderRoot; - protected override on_render(): void { + protected override _onRender(): void { this.root = new PluginRenderRoot({ name: InlineMenuPlugin.pluginName, render: this.editor.reactRenderRoot?.render, diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx index af40c73014..44932ac99c 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx @@ -39,8 +39,8 @@ type LineInfo = { blockInfo: BlockDomInfo; }; -function Line(props: { lineInfo: LineInfo }) { - const { lineInfo } = props; +function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) { + const { lineInfo, rootRect } = props; if (!lineInfo || lineInfo.direction === BlockDropPlacement.none) { return null; } @@ -58,7 +58,7 @@ function Line(props: { lineInfo: LineInfo }) { ...lineStyle, width: intersectionRect.width, height: 2, - left: intersectionRect.x - blockInfo.rootRect.x, + left: intersectionRect.x - rootRect.x, }; const topLineStyle = { ...horizontalLineStyle, @@ -66,22 +66,22 @@ function Line(props: { lineInfo: LineInfo }) { }; const bottomLineStyle = { ...horizontalLineStyle, - top: intersectionRect.bottom + 1 - blockInfo.rootRect.y, + top: intersectionRect.bottom + 1 - rootRect.y, }; const verticalLineStyle = { ...lineStyle, width: 2, height: intersectionRect.height, - top: intersectionRect.y - blockInfo.rootRect.y, + top: intersectionRect.y - rootRect.y, }; const leftLineStyle = { ...verticalLineStyle, - left: intersectionRect.x - 10 - blockInfo.rootRect.x, + left: intersectionRect.x - 10 - rootRect.x, }; const rightLineStyle = { ...verticalLineStyle, - left: intersectionRect.right + 10 - blockInfo.rootRect.x, + left: intersectionRect.right + 10 - rootRect.x, }; const styleMap = { left: leftLineStyle, @@ -120,6 +120,7 @@ export const LeftMenuDraggable: FC = props => { const [visible, setVisible] = useState(defaultVisible); const [anchorEl, setAnchorEl] = useState(); + const [rootRect, setRootRect] = useState(() => new DOMRect()); const [block, setBlock] = useState(); const [line, setLine] = useState(undefined); @@ -135,6 +136,7 @@ export const LeftMenuDraggable: FC = props => { const onDragStart = async (event: React.DragEvent) => { editor.dragDropManager.isOnDrag = true; if (block == null) return; + setRootRect(editor.container.getBoundingClientRect()); const dragImage = await editor.blockHelper.getBlockDragImg( block.blockId ); @@ -182,6 +184,7 @@ export const LeftMenuDraggable: FC = props => { const sub = blockInfo.subscribe(block => { setBlock(block); if (block != null) { + setRootRect(editor.container.getBoundingClientRect()); setVisible(true); } }); @@ -194,6 +197,7 @@ export const LeftMenuDraggable: FC = props => { setLine(undefined); } else { const { direction, blockInfo } = data; + setRootRect(editor.container.getBoundingClientRect()); setLine(prev => { if ( prev?.blockInfo.blockId !== blockInfo.blockId || @@ -210,7 +214,7 @@ export const LeftMenuDraggable: FC = props => { } }); return () => sub.unsubscribe(); - }, [editor.dragDropManager, lineInfo]); + }, [editor, lineInfo]); return ( <> @@ -223,8 +227,8 @@ export const LeftMenuDraggable: FC = props => { block.rect.left - MENU_WIDTH - MENU_BUTTON_OFFSET - ) - block.rootRect.left, - top: block.rect.top - block.rootRect.top, + ) - rootRect.left, + top: block.rect.top - rootRect.top, opacity: visible ? 1 : 0, zIndex: 1, }} @@ -246,7 +250,7 @@ export const LeftMenuDraggable: FC = props => { } )} - + ); }; 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 d0e21c8063..98eda5a1e7 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx @@ -147,7 +147,7 @@ export class LeftMenuPlugin extends BasePlugin { this._blockInfo.next(blockInfo); }; - protected override on_render(): void { + protected override _onRender(): void { this.root = new PluginRenderRoot({ name: LeftMenuPlugin.pluginName, render: (...args) => { diff --git a/libs/components/editor-plugins/src/menu/reference-menu/index.tsx b/libs/components/editor-plugins/src/menu/reference-menu/index.tsx index 18174250f6..192be43463 100644 --- a/libs/components/editor-plugins/src/menu/reference-menu/index.tsx +++ b/libs/components/editor-plugins/src/menu/reference-menu/index.tsx @@ -13,7 +13,7 @@ export class ReferenceMenuPlugin extends BasePlugin { return PLUGIN_NAME; } - protected override on_render(): void { + protected override _onRender(): void { const container = document.createElement('div'); // TODO: remove container.classList.add(`id-${PLUGIN_NAME}`); diff --git a/libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx b/libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx index a4e42216af..38726df026 100644 --- a/libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx +++ b/libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx @@ -12,7 +12,7 @@ export class SelectionGroupPlugin extends BasePlugin { private root: PluginRenderRoot | undefined; - protected override on_render() { + protected override _onRender() { this.root = new PluginRenderRoot({ name: SelectionGroupPlugin.pluginName, render: this.editor.reactRenderRoot?.render, diff --git a/libs/components/editor-plugins/src/placeholder/Placeholder.tsx b/libs/components/editor-plugins/src/placeholder/Placeholder.tsx index 5fcfec9e29..4772fc836d 100644 --- a/libs/components/editor-plugins/src/placeholder/Placeholder.tsx +++ b/libs/components/editor-plugins/src/placeholder/Placeholder.tsx @@ -12,7 +12,7 @@ export class PlaceholderPlugin extends BasePlugin { return PLUGIN_NAME; } - protected override on_render(): void { + protected override _onRender(): void { const container = document.createElement('div'); // TODO remove container.classList.add(`id-${PLUGIN_NAME}`); diff --git a/libs/components/ui/src/patch-elements/index.tsx b/libs/components/ui/src/PatchElements.tsx similarity index 63% rename from libs/components/ui/src/patch-elements/index.tsx rename to libs/components/ui/src/PatchElements.tsx index 46794e841c..c1326df98c 100644 --- a/libs/components/ui/src/patch-elements/index.tsx +++ b/libs/components/ui/src/PatchElements.tsx @@ -6,12 +6,12 @@ export type UnPatchNode = () => void; export type PatchNode = (key: string, node: ReactNode) => UnPatchNode; export const usePatchNodes = () => { - const [nodes, set_nodes] = useState>({}); + const [nodes, setNodes] = useState>({}); - const patch_node: PatchNode = (key: string, node: ReactNode) => { - set_nodes(oldNodes => ({ ...oldNodes, [key]: node })); + const patchNode: PatchNode = (key: string, node: ReactNode) => { + setNodes(oldNodes => ({ ...oldNodes, [key]: node })); return () => { - set_nodes(oldNodes => { + setNodes(oldNodes => { const nodes = { ...oldNodes }; delete nodes[key]; return nodes; @@ -19,11 +19,11 @@ export const usePatchNodes = () => { }; }; - const has_node = (key: string) => { + const hasNode = (key: string) => { return has(nodes, key); }; - const patched_nodes = ( + const patchedNodes = ( <> {Object.entries(nodes).map(([key, node]) => { return {node}; @@ -32,8 +32,8 @@ export const usePatchNodes = () => { ); return { - patch: patch_node, - has: has_node, - patchedNodes: patched_nodes, + patch: patchNode, + has: hasNode, + patchedNodes: patchedNodes, }; }; diff --git a/libs/components/ui/src/index.ts b/libs/components/ui/src/index.ts index 24e76564c8..46769d4b9c 100644 --- a/libs/components/ui/src/index.ts +++ b/libs/components/ui/src/index.ts @@ -27,8 +27,8 @@ export { message } from './message'; export { Input } from './input'; export type { InputProps } from './input'; export { Tooltip } from './tooltip'; -export { usePatchNodes } from './patch-elements'; -export type { PatchNode, UnPatchNode } from './patch-elements'; +export { usePatchNodes } from './PatchElements'; +export type { PatchNode, UnPatchNode } from './PatchElements'; export { Tag } from './tag'; export type { TagProps } from './tag'; export { Divider } from './divider';