fix(plugin): fix left menu behavior

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

@@ -1,5 +1,4 @@
 import type { BlockEditor } from './editor';
-import { Point } from '@toeverything/utils';
 import { styled, usePatchNodes } from '@toeverything/components/ui';
 import type { FC, PropsWithChildren } from 'react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
@@ -76,20 +75,6 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
     ) => {
         selectionRef.current?.onMouseMove(event);
         editor.getHooks().onRootNodeMouseMove(event);
-
-        const slidingBlock = await editor.getBlockByPoint(
-            new Point(event.clientX, event.clientY)
-        );
-
-        if (slidingBlock && slidingBlock.dom) {
-            editor.getHooks().afterOnNodeMouseMove(event, {
-                blockId: slidingBlock.id,
-                dom: slidingBlock.dom,
-                rect: slidingBlock.dom.getBoundingClientRect(),
-                type: slidingBlock.type,
-                properties: slidingBlock.getProperties(),
-            });
-        }
     };
 
     const onMouseDown = (
@@ -142,6 +127,12 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
         }
     };
 
+    const onDragLeave = (event: React.DragEvent<Element>) => {
+        if (editor.dragDropManager.isEnabled()) {
+            editor.getHooks().onRootNodeDragLeave(event);
+        }
+    };
+
     const onDragOverCapture = (event: React.DragEvent<Element>) => {
         event.preventDefault();
         if (editor.dragDropManager.isEnabled()) {
@@ -178,6 +169,7 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
                 onKeyDownCapture={onKeyDownCapture}
                 onKeyUp={onKeyUp}
                 onDragOver={onDragOver}
+                onDragLeave={onDragLeave}
                 onDragOverCapture={onDragOverCapture}
                 onDragEnd={onDragEnd}
                 onDrop={onDrop}

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

@@ -119,9 +119,7 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
             startPointRef.current = new Point(event.clientX, event.clientY);
             startPointBlock.current =
                 ((await selectionManager.rootDomReady()) &&
-                    (await selectionManager.getBlockByPoint(
-                        startPointRef.current
-                    ))) ||
+                    (await editor.getBlockByPoint(startPointRef.current))) ||
                 null;
             mouseType.current = 'down';
             if (scrollManager.scrollContainer) {
@@ -137,10 +135,9 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
             if (mouseType.current === 'down') {
                 endPointRef.current = new Point(event.clientX, event.clientY);
                 if (startPointBlock.current) {
-                    const endpointBlock =
-                        await selectionManager.getBlockByPoint(
-                            endPointRef.current
-                        );
+                    const endpointBlock = await editor.getBlockByPoint(
+                        endPointRef.current
+                    );
                     // TODO: delete after multi-block text selection done
                     // if drag out of startblock change selection type to block
                     if (endpointBlock?.id === startPointBlock.current.id) {

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

@@ -1,14 +1,15 @@
-import { domToRect, Point, ValueOf } from '@toeverything/utils';
+import { domToRect, Point } from '@toeverything/utils';
 import { AsyncBlock } from '../..';
 import { GridDropType } from '../commands/types';
 import { Editor } from '../editor';
 import { BlockDropPlacement, GroupDirection } from '../types';
 // TODO: Evaluate implementing custom events with Rxjs
 import EventEmitter from 'eventemitter3';
 
-type DargType =
-    | ValueOf<InstanceType<typeof DragDropManager>['dragActions']>
-    | '';
+enum DragType {
+    dragBlock = 'dragBlock',
+    dragGroup = 'dragGroup',
+}
 
 const DRAG_STATE_CHANGE_EVENT_KEY = 'dragStateChange';
 export class DragDropManager {
@@ -18,16 +19,13 @@ export class DragDropManager {
 
     private _blockIdKey = 'blockId';
     private _rootIdKey = 'rootId';
-    private _dragType: DargType;
+    private _dragType?: DragType;
     private _blockDragDirection: BlockDropPlacement;
-    private _blockDragTargetId = '';
+    private _blockDragTargetId?: string;
 
     private _dragBlockHotDistance = 20;
 
-    private _dragActions = {
-        dragBlock: 'dragBlock',
-        dragGroup: 'dragGroup',
-    } as const;
+    private _dragActions = DragType;
 
     private _isOnDrag = false;
 
@@ -49,7 +47,6 @@ export class DragDropManager {
     constructor(editor: Editor) {
         this._editor = editor;
         this._enabled = true;
-        this._dragType = '';
         this._blockDragDirection = BlockDropPlacement.none;
         this._initMouseEvent();
     }
@@ -58,7 +55,7 @@ export class DragDropManager {
         return this._dragType;
     }
 
-    set dragType(type: DargType) {
+    set dragType(type: DragType) {
         this._dragType = type;
     }
 
@@ -119,22 +116,9 @@ export class DragDropManager {
         }
     }
 
-    public async getGroupBlockByPoint(point: Point) {
-        const blockList = await this._editor.getBlockList();
-        return blockList.find(block => {
-            if (block.type === 'group' && block.dom) {
-                const rect = domToRect(block.dom);
-                if (rect.fromNewLeft(rect.left - 30).isContainPoint(point)) {
-                    return true;
-                }
-            }
-            return false;
-        });
-    }
-
     private async _handleDropGroup(event: React.DragEvent<Element>) {
         const blockId = event.dataTransfer.getData(this._blockIdKey);
-        const toGroup = await this.getGroupBlockByPoint(
+        const toGroup = await this._editor.getGroupBlockByPoint(
             new Point(event.clientX, event.clientY)
         );
         if (toGroup && blockId && toGroup.id !== blockId) {
@@ -262,7 +246,7 @@ export class DragDropManager {
                 this._handleDropGroup(event);
             }
         }
-        this.dragType = '';
+        this.dragType = undefined;
     }
 
     public handlerEditorDragOver(event: React.DragEvent<Element>) {
@@ -280,9 +264,14 @@ export class DragDropManager {
     }
 
     private _resetDragDropData() {
-        this._dragType = '';
+        this._dragType = undefined;
+        this._setBlockDragDirection(BlockDropPlacement.none);
+        this._setBlockDragTargetId(undefined);
+    }
+
+    public clearDropInfo() {
         this._setBlockDragDirection(BlockDropPlacement.none);
-        this._setBlockDragTargetId('');
+        this._setBlockDragTargetId(undefined);
     }
 
     public async checkDragGroupDirection(

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

@@ -389,6 +389,19 @@ export class Editor implements Virgo {
         });
     }
 
+    public async getGroupBlockByPoint(point: Point) {
+        const blockList = await this.getBlockList();
+        return blockList.find(block => {
+            if (block.type === 'group' && block.dom) {
+                const rect = domToRect(block.dom);
+                if (rect.fromNewLeft(rect.left - 30).isContainPoint(point)) {
+                    return true;
+                }
+            }
+            return false;
+        });
+    }
+
     async undo() {
         await services.api.editorBlock.undo(this.workspace);
     }

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

@@ -1,3 +1,4 @@
+import { DragEvent } from 'react';
 import { Observable, Subject } from 'rxjs';
 import { HooksRunner, HookType, BlockDomInfo, PluginHooks } from '../types';
 
@@ -86,13 +87,6 @@ export class Hooks implements HooksRunner, PluginHooks {
         this._runHook(HookType.ON_ROOTNODE_MOUSE_LEAVE, e);
     }
 
-    public afterOnNodeMouseMove(
-        e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-        node: BlockDomInfo
-    ): void {
-        this._runHook(HookType.AFTER_ON_NODE_MOUSE_MOVE, e, node);
-    }
-
     public afterOnResize(
         e: React.MouseEvent<HTMLDivElement, MouseEvent>
     ): void {
@@ -103,6 +97,10 @@ export class Hooks implements HooksRunner, PluginHooks {
         this._runHook(HookType.ON_ROOTNODE_DRAG_OVER, e);
     }
 
+    public onRootNodeDragLeave(e: React.DragEvent<Element>): void {
+        this._runHook(HookType.ON_ROOTNODE_DRAG_LEAVE, e);
+    }
+
     public onRootNodeDragEnd(e: React.DragEvent<Element>): void {
         this._runHook(HookType.ON_ROOTNODE_DRAG_END, e);
     }

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

@@ -293,21 +293,8 @@ export class SelectionManager implements VirgoSelection {
         return Boolean(rootBlock?.dom);
     }
 
-    public async getBlockByPoint(point: Point) {
-        const blockList = await this._editor.getBlockList();
-        const outBlockList = blockList.filter(block => {
-            return (
-                Boolean(block.dom) && domToRect(block.dom).isContainPoint(point)
-            );
-        });
-
-        return outBlockList.length
-            ? outBlockList[outBlockList.length - 1]
-            : undefined;
-    }
-
     public async isPointInBlocks(point: Point) {
-        return Boolean(this.getBlockByPoint(point));
+        return Boolean(this._editor.getBlockByPoint(point));
     }
 
     /**

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

@@ -22,6 +22,7 @@ import type { BlockCommands } from './commands/block-commands';
 import type { DragDropManager } from './drag-drop';
 import { MouseManager } from './mouse';
 import { Observable } from 'rxjs';
+import { Point } from '@toeverything/utils';
 
 // import { BrowserClipboard } from './clipboard/browser-clipboard';
 
@@ -105,6 +106,8 @@ export interface Virgo {
     // clipboard: BrowserClipboard;
     workspace: string;
     getBlockDomById: (id: string) => Promise<HTMLElement>;
+    getBlockByPoint: (point: Point) => Promise<AsyncBlock>;
+    getGroupBlockByPoint: (point: Point) => Promise<AsyncBlock>;
     isWhiteboard: boolean;
     mouseManager: MouseManager;
 }
@@ -166,9 +169,9 @@ export enum HookType {
     ON_ROOTNODE_MOUSE_OUT = 'onRootNodeMouseOut',
     ON_ROOTNODE_MOUSE_LEAVE = 'onRootNodeMouseLeave',
     ON_SEARCH = 'onSearch',
-    AFTER_ON_NODE_MOUSE_MOVE = 'afterOnNodeMouseMove',
     AFTER_ON_RESIZE = 'afterOnResize',
     ON_ROOTNODE_DRAG_OVER = 'onRootNodeDragOver',
+    ON_ROOTNODE_DRAG_LEAVE = 'onRootNodeDragLeave',
     ON_ROOTNODE_DRAG_END = 'onRootNodeDragEnd',
     ON_ROOTNODE_DRAG_OVER_CAPTURE = 'onRootNodeDragOverCapture',
     ON_ROOTNODE_DROP = 'onRootNodeDrop',
@@ -209,13 +212,10 @@ export interface HooksRunner {
         e: React.MouseEvent<HTMLDivElement, MouseEvent>
     ) => void;
     onSearch: () => void;
-    afterOnNodeMouseMove: (
-        e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-        node: BlockDomInfo
-    ) => void;
     afterOnResize: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onRootNodeDragOver: (e: React.DragEvent<Element>) => void;
     onRootNodeDragEnd: (e: React.DragEvent<Element>) => void;
+    onRootNodeDragLeave: (e: React.DragEvent<Element>) => void;
     onRootNodeDrop: (e: React.DragEvent<Element>) => void;
     afterOnNodeDragOver: (
         e: React.DragEvent<Element>,

libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx

@@ -28,14 +28,11 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
 
     const handleRootMouseMove = useCallback(
         async (e: React.MouseEvent<HTMLDivElement>) => {
-            const groupBlockNew =
-                await editor.dragDropManager.getGroupBlockByPoint(
-                    new Point(e.clientX, e.clientY)
-                );
+            const groupBlockNew = await editor.getGroupBlockByPoint(
+                new Point(e.clientX, e.clientY)
+            );
             if (groupBlockNew) {
                 setGroupBlock(groupBlockNew);
-            } else {
-                setGroupBlock(null);
             }
         },
         [editor, setGroupBlock]
@@ -59,10 +56,9 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
             let groupBlockOnDragOver = null;
             const mousePoint = new Point(e.clientX, e.clientY);
             if (editor.dragDropManager.isDragGroup(e)) {
-                groupBlockOnDragOver =
-                    await editor.dragDropManager.getGroupBlockByPoint(
-                        mousePoint
-                    );
+                groupBlockOnDragOver = await editor.getGroupBlockByPoint(
+                    mousePoint
+                );
                 if (groupBlockOnDragOver?.id === groupBlock?.id) {
                     groupBlockOnDragOver = null;
                 }
@@ -83,10 +79,9 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
         async (e: React.DragEvent<Element>) => {
             let groupBlockOnDrop = null;
             if (editor.dragDropManager.isDragGroup(e)) {
-                groupBlockOnDrop =
-                    await editor.dragDropManager.getGroupBlockByPoint(
-                        new Point(e.clientX, e.clientY)
-                    );
+                groupBlockOnDrop = await editor.getGroupBlockByPoint(
+                    new Point(e.clientX, e.clientY)
+                );
                 if (groupBlockOnDrop?.id === groupBlock?.id) {
                     groupBlockOnDrop = null;
                 }
@@ -95,6 +90,8 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
         [editor, groupBlock]
     );
 
+    const handleRootMouseLeave = useCallback(() => setGroupBlock(null), []);
+
     const handleRootDragEnd = () => {
         setDragOverGroup(null);
     };
@@ -118,6 +115,11 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
                 .get(HookType.ON_ROOTNODE_DRAG_END)
                 .subscribe(handleRootDragEnd)
         );
+        sub.add(
+            hooks
+                .get(HookType.ON_ROOTNODE_MOUSE_LEAVE)
+                .subscribe(handleRootMouseLeave)
+        );
         return () => {
             sub.unsubscribe();
         };
@@ -127,6 +129,7 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
         handleRootMouseDown,
         handleRootDragOver,
         handleRootDrop,
+        handleRootMouseLeave,
     ]);
 
     useEffect(() => {