From 4522e0a56c495f237eea152605dab4342734c6e8 Mon Sep 17 00:00:00 2001 From: SaikaSakura Date: Tue, 9 Aug 2022 18:44:14 +0800 Subject: [PATCH 1/2] feat: new grid drop logic --- .../src/editor/commands/block-commands.ts | 4 +- .../src/editor/drag-drop/drag-drop.ts | 54 ++++++++++++++----- .../src/menu/command-menu/Menu.tsx | 1 + .../src/menu/left-menu/LeftMenuPlugin.tsx | 15 +++--- 4 files changed, 52 insertions(+), 22 deletions(-) diff --git a/libs/components/editor-core/src/editor/commands/block-commands.ts b/libs/components/editor-core/src/editor/commands/block-commands.ts index 54f9e5d2fe..5972e9d41d 100644 --- a/libs/components/editor-core/src/editor/commands/block-commands.ts +++ b/libs/components/editor-core/src/editor/commands/block-commands.ts @@ -162,7 +162,7 @@ export class BlockCommands { public async moveInNewGridItem( blockId: string, gridItemId: string, - isBefore = false + type = GridDropType.left ) { const block = await this._editor.getBlockById(blockId); if (block) { @@ -175,7 +175,7 @@ export class BlockCommands { await block.remove(); await gridItemBlock.append(block); if (targetGridItemBlock && gridItemBlock) { - if (isBefore) { + if (type === GridDropType.left) { await targetGridItemBlock.before(gridItemBlock); } else { await targetGridItemBlock.after(gridItemBlock); diff --git a/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts b/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts index eccdfb081e..be64c07b97 100644 --- a/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts +++ b/libs/components/editor-core/src/editor/drag-drop/drag-drop.ts @@ -95,6 +95,9 @@ export class DragDropManager { } private async _handleDropBlock(event: React.DragEvent) { + const targetBlock = await this._editor.getBlockById( + this._blockDragTargetId + ); if (this._blockDragDirection !== BlockDropPlacement.none) { const blockId = event.dataTransfer.getData(this._blockIdKey); if (!(await this._canBeDrop(event))) return; @@ -109,13 +112,24 @@ export class DragDropManager { this._blockDragDirection ) ) { - await this._editor.commands.blockCommands.createLayoutBlock( - blockId, - this._blockDragTargetId, + const dropType = this._blockDragDirection === BlockDropPlacement.left ? GridDropType.left - : GridDropType.right - ); + : GridDropType.right; + // if target is a grid item create grid item + if (targetBlock.type !== Protocol.Block.Type.gridItem) { + await this._editor.commands.blockCommands.createLayoutBlock( + blockId, + this._blockDragTargetId, + dropType + ); + } else { + await this._editor.commands.blockCommands.moveInNewGridItem( + blockId, + this._blockDragTargetId, + dropType + ); + } } if ( [ @@ -123,9 +137,6 @@ export class DragDropManager { BlockDropPlacement.outerRight, ].includes(this._blockDragDirection) ) { - const targetBlock = await this._editor.getBlockById( - this._blockDragTargetId - ); if (targetBlock.type !== Protocol.Block.Type.grid) { await this._editor.commands.blockCommands.createLayoutBlock( blockId, @@ -154,7 +165,7 @@ export class DragDropManager { await this._editor.commands.blockCommands.moveInNewGridItem( blockId, gridItems[0].id, - true + GridDropType.right ); } } @@ -347,10 +358,10 @@ export class DragDropManager { blockId: string ) { const { clientX, clientY } = event; - this._setBlockDragTargetId(blockId); const path = await this._editor.getBlockPath(blockId); const mousePoint = new Point(clientX, clientY); const rect = domToRect(blockDom); + let targetBlock: AsyncBlock = path[path.length - 1]; /** * IMP: compute the level of the target block * future feature drag drop has level support do not delete @@ -386,13 +397,30 @@ export class DragDropManager { const gridBlocks = path.filter( block => block.type === Protocol.Block.Type.grid ); - // limit grid block floor counts, when drag block to init grid - if (gridBlocks.length >= MAX_GRID_BLOCK_FLOOR) { + const parentBlock = path[path.length - 2]; + // a new grid should not be grid item`s child + if ( + parentBlock && + parentBlock.type === Protocol.Block.Type.gridItem + ) { + targetBlock = parentBlock; + // gridItem`s parent must be grid block + const gridItemCounts = (await path[path.length - 3].children()) + .length; + if ( + gridItemCounts >= + this._editor.configManager.grid.maxGridItemCount + ) { + direction = BlockDropPlacement.none; + } + // limit grid block floor counts, when drag block to init grid + } else if (gridBlocks.length >= MAX_GRID_BLOCK_FLOOR) { direction = BlockDropPlacement.none; } } + this._setBlockDragTargetId(targetBlock.id); this._setBlockDragDirection(direction); - return direction; + return { direction, block: targetBlock }; } public handlerEditorDrop(event: React.DragEvent) { diff --git a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx index b6d174e513..d99d53d9bc 100644 --- a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx +++ b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx @@ -18,6 +18,7 @@ import { menuItemsMap, } from './config'; import { QueryResult } from '../../search'; +import { getBlockIdByNode } from '@toeverything/utils'; export type CommandMenuProps = { editor: Virgo; 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 91402bbd95..5281c21b04 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx @@ -105,16 +105,17 @@ export class LeftMenuPlugin extends BasePlugin { new Point(event.clientX, event.clientY) ); if (block == null || ignoreBlockTypes.includes(block.type)) return; - const direction = await this.editor.dragDropManager.checkBlockDragTypes( - event, - block.dom, - block.id - ); + const { direction, block: targetBlock } = + await this.editor.dragDropManager.checkBlockDragTypes( + event, + block.dom, + block.id + ); this._lineInfo.next({ direction, blockInfo: { - block, - rect: block.dom.getBoundingClientRect(), + block: targetBlock, + rect: targetBlock.dom.getBoundingClientRect(), }, }); }; From b5ae4e9a64791f92d57014412835209d00341b14 Mon Sep 17 00:00:00 2001 From: SaikaSakura Date: Wed, 10 Aug 2022 15:34:26 +0800 Subject: [PATCH 2/2] feat: fix review --- libs/components/editor-plugins/src/menu/command-menu/Menu.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx index d99d53d9bc..62fd1436af 100644 --- a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx +++ b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx @@ -18,8 +18,6 @@ import { menuItemsMap, } from './config'; import { QueryResult } from '../../search'; -import { getBlockIdByNode } from '@toeverything/utils'; - export type CommandMenuProps = { editor: Virgo; hooks: PluginHooks;