Merge pull request #164 from toeverything/feature/new-grid-drop

feat: new grid drop logic

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

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

@@ -95,6 +95,9 @@ export class DragDropManager {
     }
 
     private async _handleDropBlock(event: React.DragEvent<Element>) {
+        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(
+                const dropType =
-                    blockId,
-                    this._blockDragTargetId,
                     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
+            const parentBlock = path[path.length - 2];
-            if (gridBlocks.length >= MAX_GRID_BLOCK_FLOOR) {
+            // 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<Element>) {

libs/components/editor-plugins/src/menu/command-menu/Menu.tsx

@@ -18,7 +18,6 @@ import {
     menuItemsMap,
 } from './config';
 import { QueryResult } from '../../search';
-
 export type CommandMenuProps = {
     editor: Virgo;
     hooks: PluginHooks;

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(
+        const { direction, block: targetBlock } =
-            event,
+            await this.editor.dragDropManager.checkBlockDragTypes(
-            block.dom,
+                event,
-            block.id
+                block.dom,
-        );
+                block.id
+            );
         this._lineInfo.next({
             direction,
             blockInfo: {
-                block,
+                block: targetBlock,
-                rect: block.dom.getBoundingClientRect(),
+                rect: targetBlock.dom.getBoundingClientRect(),
             },
         });
     };