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

feat: change cursor when drag

Browse Source
This commit is contained in:
SaikaSakura
2022-07-26 18:49:18 +08:00
parent 9cc55d7f63
commit 8b8529c1be
10 changed files with 100 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@ import {
type ReturnUnobserve,
} from '@toeverything/datasource/db-service';
import { addNewGroup } from './recast-block';
import { HookType } from './editor';
import { useIsOnDrag } from '.';
interface RenderRootProps {
editor: BlockEditor;
@@ -35,6 +35,7 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
const triggeredBySelect = useRef(false);
const [container, setContainer] = useState<HTMLDivElement>();
const [pageWidth, setPageWidth] = useState<number>(MIN_PAGE_WIDTH);
const isOnDrag = useIsOnDrag(editor);
const { patch, has, patchedNodes } = usePatchNodes();
@@ -147,6 +148,8 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
};
const onDragOver = (event: React.DragEvent<Element>) => {
event.dataTransfer.dropEffect = 'move';
event.preventDefault();
if (!contentRef.current) {
return;
}
@@ -155,10 +158,10 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
if (editor.dragDropManager.isEnabled()) {
editor.getHooks().onRootNodeDragOver(event, rootRect);
}
event.preventDefault();
};
const onDragOverCapture = (event: React.DragEvent<Element>) => {
event.preventDefault();
if (!contentRef.current) {
return;
}
@@ -202,7 +205,7 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
onDragOverCapture={onDragOverCapture}
onDragEnd={onDragEnd}
onDrop={onDrop}
onScroll={onScroll}
isOnDrag={isOnDrag}
>
<Content
ref={contentRef}
@@ -278,13 +281,25 @@ function ScrollBlank({ editor }: { editor: BlockEditor }) {
}
const Container = styled('div')(
({ isWhiteboard }: { isWhiteboard: boolean }) => ({
({
isWhiteboard,
isOnDrag,
}: {
isWhiteboard: boolean;
isOnDrag: boolean;
}) => ({
width: '100%',
height: '100%',
overflowY: isWhiteboard ? 'unset' : 'auto',
padding: isWhiteboard ? 0 : '96px 150px 0 150px',
minWidth: isWhiteboard ? 'unset' : '940px',
position: 'relative',
...(isOnDrag && {
cursor: 'grabbing',
// expected css selector
// eslint-disable-next-line @typescript-eslint/naming-convention
'& *': { cursor: 'grabbing' },
}),
})
);

2
libs/components/editor-core/src/drag-drop-wrapper/DragDropWrapper.tsx
View File

@@ -17,8 +17,8 @@ export function DragDropWrapper({
const handler_drag_over: React.DragEventHandler<
HTMLDivElement
> = async event => {
event.preventDefault();
const rootDom = await editor.getBlockDomById(editor.getRootBlockId());
if (block.dom && rootDom) {
editor.getHooks().afterOnNodeDragOver(event, {
blockId: block.id,

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

@@ -9,9 +9,12 @@ import EventEmitter from 'eventemitter3';
type DargType =
| ValueOf<InstanceType<typeof DragDropManager>['dragActions']>
| '';
const DRAG_STATE_CHANGE_EVENT_KEY = 'dragStateChange';
export class DragDropManager {
private _editor: Editor;
private _enabled: boolean;
private _events = new EventEmitter();
private _blockIdKey = 'blockId';
private _rootIdKey = 'rootId';
@@ -26,15 +29,29 @@ export class DragDropManager {
dragGroup: 'dragGroup',
} as const;
private _isOnDrag = false;
get dragActions() {
return this._dragActions;
}
get isOnDrag() {
return this._isOnDrag;
}
set isOnDrag(isOnDrag: boolean) {
if (this._isOnDrag !== isOnDrag) {
this._events.emit(DRAG_STATE_CHANGE_EVENT_KEY, isOnDrag);
}
this._isOnDrag = isOnDrag;
}
constructor(editor: Editor) {
this._editor = editor;
this._enabled = true;
this._dragType = '';
this._blockDragDirection = BlockDropPlacement.none;
this._initMouseEvent();
}
get dragType() {
@@ -45,6 +62,15 @@ export class DragDropManager {
this._dragType = type;
}
private async _initMouseEvent() {
this._editor.mouseManager.onMouseUp(() => {
// IMP: temporarily last protect for dragging across editor instances，bad case
if (this.isOnDrag) {
this.isOnDrag = false;
}
});
}
private _setBlockDragDirection(direction: BlockDropPlacement) {
this._blockDragDirection = direction;
}
@@ -244,6 +270,9 @@ export class DragDropManager {
public handlerEditorDragEnd(event: React.DragEvent<Element>) {
this._resetDragDropData();
if (this.isOnDrag) {
this.isOnDrag = false;
}
if (this.isEnabled()) {
// TODO: handle drag end event flow
}
@@ -287,4 +316,16 @@ export class DragDropManager {
}
return direction;
}
public onDragStateChange(cb: (isOnDrag: boolean) => void) {
this._events.on(DRAG_STATE_CHANGE_EVENT_KEY, cb);
}
public offDragStateChange(cb: (isOnDrag: boolean) => void) {
this._events.off(DRAG_STATE_CHANGE_EVENT_KEY, cb);
}
public dispose() {
this._events.removeAllListeners();
}
}

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

@@ -20,6 +20,7 @@ import type { AsyncBlock } from './block';
import type { BlockHelper } from './block/block-helper';
import type { BlockCommands } from './commands/block-commands';
import type { DragDropManager } from './drag-drop';
import { MouseManager } from './mouse';
// import { BrowserClipboard } from './clipboard/browser-clipboard';
@@ -104,6 +105,7 @@ export interface Virgo {
workspace: string;
getBlockDomById: (id: string) => Promise<HTMLElement>;
isWhiteboard: boolean;
mouseManager: MouseManager;
}
export interface Plugin {

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

@@ -1,5 +1,6 @@
import {
AsyncBlock,
BlockEditor,
SelectEventTypes,
SelectionInfo,
SelectionSettingsMap,
@@ -202,3 +203,21 @@ export const useOnSelectStartWith = (
};
}, [editor, cb, blockId]);
};
/**
*
* hooks run when drag state change
* @export
*/
export const useIsOnDrag = (editor: BlockEditor) => {
const editorInstance = editor;
const [isOnDrag, setIsOnDrag] = useState(false);
useEffect(() => {
const callback = (isDrag: boolean) => setIsOnDrag(isDrag);
editorInstance.dragDropManager.onDragStateChange(callback);
return () => {
editorInstance.dragDropManager.offDragStateChange(callback);
};
}, [editorInstance]);
return isOnDrag;
};

7
libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx
View File

@@ -10,6 +10,7 @@ type DragItemProps = {
isShow: boolean;
groupBlock: AsyncBlock;
editor: Virgo;
item: React.MutableRefObject<HTMLDivElement>;
onPositionChange?: (position: Point) => void;
} & React.HTMLAttributes<HTMLDivElement>;
@@ -17,10 +18,11 @@ export const DragItem = function ({
isShow,
editor,
groupBlock,
item,
...divProps
}: DragItemProps) {
return (
<StyledDiv {...divProps}>
<StyledDiv {...divProps} ref={item}>
<StyledButton>
<HandleParentIcon />
</StyledButton>
@@ -33,13 +35,14 @@ const StyledDiv = styled('div')({
display: 'inlineFlex',
width: `${ICON_WIDTH}px`,
height: `${ICON_WIDTH}px`,
cursor: 'grab',
':hover': {
backgroundColor: '#edeef0',
borderRadius: '4px',
},
});
const StyledButton = styled(Button)({
const StyledButton = styled('div')({
padding: '0',
display: 'inlineFlex',
alignItems: 'center',

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

@@ -23,6 +23,7 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
const [direction, setDirection] = useState<GroupDirection>(
GroupDirection.down
);
const dragItemRef = useRef<HTMLDivElement>(null);
const menuRef = useRef<HTMLUListElement>(null);
const handleRootMouseMove = useCallback(
@@ -50,6 +51,7 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
const handleRootDragOver = useCallback(
async (e: React.DragEvent<Element>) => {
e.preventDefault();
let groupBlockOnDragOver = null;
const mousePoint = new Point(e.clientX, e.clientY);
if (editor.dragDropManager.isDragGroup(e)) {
@@ -89,7 +91,7 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
[editor, groupBlock]
);
const handleRootDragEnd = () => {
const handleRootDragEnd = (e: DragEvent) => {
setDragOverGroup(null);
};
@@ -139,13 +141,16 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
};
const handleDragStart = async (e: React.DragEvent<HTMLDivElement>) => {
editor.dragDropManager.isOnDrag = true;
const dragImage = await editor.blockHelper.getBlockDragImg(
groupBlock.id
);
if (dragImage) {
e.dataTransfer.setDragImage(dragImage, 0, 0);
editor.dragDropManager.setDragGroupInfo(e, groupBlock.id);
dragImage.style.cursor = 'grabbing !important';
e.dataTransfer.setDragImage(dragImage, 0, 0);
}
e.dataTransfer.setData('text/plain', groupBlock.id);
};
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -169,11 +174,15 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
menuRef={menuRef}
>
<DragItem
item={dragItemRef}
editor={editor}
isShow={!!groupBlock}
groupBlock={groupBlock}
onClick={handleClick}
onDragStart={handleDragStart}
onDragCapture={() => {
editor.dragDropManager.isOnDrag = true;
}}
onMouseDown={handleMouseDown}
draggable={true}
/>

3
libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx
View File

@@ -15,9 +15,6 @@ export class GroupMenuPlugin extends BasePlugin {
protected override on_render(): void {
if (this.editor.isWhiteboard) return;
const container = document.createElement('div');
// TODO remove
container.classList.add(`id-${PLUGIN_NAME}`);
this.root = new PluginRenderRoot({
name: PLUGIN_NAME,
render: this.editor.reactRenderRoot.render,

1
libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
View File

@@ -133,6 +133,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
);
const onDragStart = async (event: React.DragEvent<Element>) => {
editor.dragDropManager.isOnDrag = true;
if (block == null) return;
const dragImage = await editor.blockHelper.getBlockDragImg(
block.blockId

2
libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx
View File

@@ -55,8 +55,8 @@ export class LeftMenuPlugin extends BasePlugin {
blockInfo: BlockDomInfo
) => {
const { type, dom, blockId } = blockInfo;
event.preventDefault();
if (this.editor.dragDropManager.isDragBlock(event)) {
event.preventDefault();
if (ignoreBlockTypes.includes(type)) {
return;
}