Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 12:55:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(plugin): fix left menu behavior

Browse Source
This commit is contained in:
austaras
2022-08-01 16:37:18 +08:00
committed by Austaras
parent 090cba0671
commit c32878dea9
11 changed files with 173 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
libs/components/editor-core/src/RenderRoot.tsx
View File

@@ -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}

11
libs/components/editor-core/src/Selection.tsx
View File

@@ -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) {

47
libs/components/editor-core/src/editor/drag-drop/drag-drop.ts
View File

@@ -1,4 +1,4 @@
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';
@@ -6,9 +6,10 @@ 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('');
this._setBlockDragTargetId(undefined);
}
public clearDropInfo() {
this._setBlockDragDirection(BlockDropPlacement.none);
this._setBlockDragTargetId(undefined);
}
public async checkDragGroupDirection(

13
libs/components/editor-core/src/editor/editor.ts
View File

@@ -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);
}

12
libs/components/editor-core/src/editor/plugin/hooks.ts
View File

@@ -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);
}

15
libs/components/editor-core/src/editor/selection/selection.ts
View File

@@ -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));
}
/**

10
libs/components/editor-core/src/editor/types.ts
View File

@@ -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>,