Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-14 00:26:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: outer drag 、fix new page selection

Browse Source
This commit is contained in:
SaikaSakura
2022-08-05 19:29:26 +08:00
parent 812af254aa
commit 5c51457761
16 changed files with 358 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
+7 -8
View File
@@ -52,7 +52,6 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
return null;
}
const { direction, blockInfo } = lineInfo;
const finalDirection = direction;
const lineStyle = {
zIndex: 2,
position: 'absolute' as const,
@@ -91,14 +90,14 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
left: intersectionRect.right + 10 - rootRect.x,
};
const styleMap = {
left: leftLineStyle,
right: rightLineStyle,
top: topLineStyle,
bottom: bottomLineStyle,
[BlockDropPlacement.left]: leftLineStyle,
[BlockDropPlacement.right]: rightLineStyle,
[BlockDropPlacement.top]: topLineStyle,
[BlockDropPlacement.bottom]: bottomLineStyle,
[BlockDropPlacement.outerLeft]: leftLineStyle,
[BlockDropPlacement.outerRight]: rightLineStyle,
};
return (
<div className="editor-menu-line" style={styleMap[finalDirection]} />
);
return <div className="editor-menu-line" style={styleMap[direction]} />;
}
function DragComponent(props: {
libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx
+43 -7
View File
@@ -5,8 +5,9 @@ import { ignoreBlockTypes } from './menu-config';
import { LineInfoSubject, LeftMenuDraggable } from './LeftMenuDraggable';
import { PluginRenderRoot } from '../../utils';
import { Subject } from 'rxjs';
import { domToRect, last, Point } from '@toeverything/utils';
import { domToRect, last, Point, throttle } from '@toeverything/utils';
import { BlockDropPlacement } from '@toeverything/framework/virgo';
const DRAG_THROTTLE_DELAY = 150;
export class LeftMenuPlugin extends BasePlugin {
private _mousedown?: boolean;
private _root?: PluginRenderRoot;
@@ -35,11 +36,7 @@ export class LeftMenuPlugin extends BasePlugin {
.get(HookType.ON_ROOTNODE_MOUSE_UP)
.subscribe(this._handleMouseUp)
);
this.sub.add(
this.hooks
.get(HookType.ON_ROOTNODE_DRAG_OVER)
.subscribe(this._handleDragOverBlockNode)
);
this.sub.add(
this.hooks.get(HookType.ON_ROOTNODE_MOUSE_LEAVE).subscribe(() => {
this._hideLeftMenu();
@@ -60,8 +57,47 @@ export class LeftMenuPlugin extends BasePlugin {
this.sub.add(
this.hooks.get(HookType.ON_ROOTNODE_DROP).subscribe(this._onDrop)
);
this.sub.add(
this.hooks.get(HookType.ON_ROOTNODE_DRAG_OVER).subscribe(
throttle(
this._handleRootNodeDragover.bind(this),
DRAG_THROTTLE_DELAY,
{
leading: true,
}
)
)
);
}
private _handleRootNodeDragover = async (
event: React.DragEvent<Element>
) => {
event.preventDefault();
if (this.editor.dragDropManager.isDragBlock(event)) {
const { direction, block, isOuter } =
await this.editor.dragDropManager.checkOuterBlockDragTypes(
event
);
if (direction !== BlockDropPlacement.none && block && block.dom) {
this._lineInfo.next({
direction,
blockInfo: {
blockId: block.id,
dom: block.dom,
type: block.type,
rect: block.dom.getBoundingClientRect(),
properties: block.getProperties(),
},
});
} else if (!isOuter) {
this._handleDragOverBlockNode(event);
} else {
this._lineInfo.next(undefined);
}
}
};
private _onDrop = () => {
this._lineInfo.next(undefined);
};