fix some drag and drop issues

packages/client/package.json

@@ -19,8 +19,8 @@
   "gitHead": "f0b335ac30f29f25c95d7d137655fa64d8d67f1e",
   "dependencies": {
     "@antv/g2plot": "^2.3.27",
-    "@dnd-kit/core": "^3.1.1",
-    "@dnd-kit/sortable": "^4.0.0",
+    "@dnd-kit/core": "4.0.0-next-2021720152655",
+    "@dnd-kit/sortable": "5.0.0-next-2021720152655",
     "@formily/antd": "^2.0.0-rc.3",
     "@formily/core": "^2.0.0-rc.3",
     "@formily/react": "^2.0.0-rc.3",

packages/client/src/components/Sortable/index.tsx

@@ -48,7 +48,7 @@ export function DragHandle(props) {
           <Icon
             ref={setDraggableNodeRef}
             {...others}
-            // {...attributes}
+            {...attributes}
             {...listeners}
           />
         )
@@ -134,7 +134,7 @@ export function SortableItem(props: SortableItemProps) {
   return (
     <Component
       {...others}
-      {...attributes}
+      // {...attributes}
       className={cls(className, `droppable-${id}`, {
         isOver,
         isDragging,
@@ -142,9 +142,9 @@ export function SortableItem(props: SortableItemProps) {
       ref={(el: HTMLElement) => {
         previewRef.current = el;
         setDroppableNodeRef(el);
-        if (draggable) {
-          setDraggableNodeRef(el);
-        }
+        // if (draggable) {
+          // setDraggableNodeRef(el);
+        // }
       }}
     >
       <SortableItemContext.Provider

packages/client/src/schemas/grid/index.tsx

@@ -31,6 +31,7 @@ import {
   removeSchema,
   updateSchema,
 } from '..';
+import { createPortal } from 'react-dom';
 
 const GridRowContext = createContext<any>(null);
 const GridColContext = createContext<any>(null);
@@ -47,7 +48,7 @@ export const Grid: any = observer((props: any) => {
   const [clientWidths, setClientWidths] = useState([0, 0]);
   const { addNewComponent } = props;
   const AddNewComponent = useSchemaComponent(addNewComponent);
-  const sensors = useSensors(useSensor(MouseSensor));
+  // const sensors = useSensors(useSensor(MouseSensor));
   const rows = Object.values(schema.properties || {}).filter((item) => {
     return !item['x-hidden'];
   });
@@ -55,21 +56,24 @@ export const Grid: any = observer((props: any) => {
   return (
     <div className={cls('nb-grid', { active })}>
       <DndContext
-        autoScroll
-        sensors={sensors}
+        // autoScroll
+        // sensors={sensors}
         collisionDetection={rectIntersection}
         onDragStart={(event) => {
           setActive(true);
           const el = event?.active?.data?.current?.previewRef
             ?.current as HTMLElement;
           console.log(event, el);
-          setDragOverlayContent(el?.outerHTML);
-          setStyle({ width: el.clientWidth });
+          // setDragOverlayContent(el?.outerHTML);
+          // setStyle({ width: el?.clientWidth, height: el?.clientHeight });
           const activeType = event?.active?.data?.current?.type;
           if (activeType === 'col-resize') {
+            setDragOverlayContent('');
             const prev = el.previousElementSibling as HTMLDivElement;
             const next = el.nextElementSibling as HTMLDivElement;
             setClientWidths([prev.clientWidth, next.clientWidth]);
+          } else {
+            setDragOverlayContent('拖拽');
           }
         }}
         onDragCancel={() => {
@@ -101,6 +105,7 @@ export const Grid: any = observer((props: any) => {
           const targetPath = event?.over?.data?.current?.path;
           const method = event?.over?.data?.current?.method;
           const type = event?.over?.data?.current?.type;
+          console.log({ event, sourcePath, targetPath });
           if (activeType === 'col-resize') {
             const parentPath = event?.active?.data?.current?.parentPath;
             const el = event?.active?.data?.current?.previewRef
@@ -152,6 +157,15 @@ export const Grid: any = observer((props: any) => {
           }
           let data;
           if (['col-divider', 'col-resize'].includes(type)) {
+            if (sourceSchema?.parent?.['x-component'] === 'Grid.Col') {
+              // console.log('datadata', sourcePath, targetPath);
+              if (
+                sourcePath.join('.').startsWith(targetPath.join('.')) &&
+                Object.keys(sourceSchema?.parent?.properties).length < 2
+              ) {
+                return;
+              }
+            }
             data = {
               type: 'void',
               'x-component': 'Grid.Col',
@@ -177,12 +191,13 @@ export const Grid: any = observer((props: any) => {
             };
           }
           if (data) {
+            console.log('datadata', data, type, method);
             const removed = deepRemove(sourcePath);
             const last = removed.pop();
+            const s = fn(data, targetPath);
             if (isGridRowOrCol(last)) {
               await removeSchema(last);
             }
-            const s = fn(data, targetPath);
             if (['block', 'col'].includes(type)) {
               await updateSchema(s);
             } else {
@@ -196,16 +211,18 @@ export const Grid: any = observer((props: any) => {
             duration: 20,
             easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
           }}
-          // style={{ pointerEvents: 'none' }}
+          style={{ whiteSpace: 'nowrap' }}
+          // style={{ ...style, pointerEvents: 'none' }}
         >
-          <div
+          {dragOverlayContent}
+          {/* <div
             className={'nb-grid-drag-overlay'}
             style={{
               ...style,
               transform: 'translate(calc(-100% + 30px), 2px)',
             }}
             dangerouslySetInnerHTML={{ __html: dragOverlayContent }}
-          />
+          /> */}
         </DragOverlay>
         <Droppable
           id={`${schema.name}-row-divider`}

packages/client/src/schemas/grid/style.less

@@ -136,6 +136,10 @@ body.dragging {
   .designable-bar {
     background: rgba(241, 139, 98, 0.1) !important;
   }
+  pointer-events: none;
+  * {
+    pointer-events: none;
+  }
 }
 .nb-grid-row-divider {
   // background-color: #ddd;

packages/client/src/schemas/kanban/DesignableBar.tsx

@@ -73,9 +73,7 @@ export const DesignableBar = observer((props) => {
                     const removed = deepRemove();
                     // console.log({ removed })
                     const last = removed.pop();
-                    if (isGridRowOrCol(last)) {
-                      await removeSchema(last);
-                    }
+                    await removeSchema(last);
                   }}
                 >
                   移除

packages/client/src/schemas/markdown/index.tsx

@@ -145,11 +145,9 @@ Markdown.Void.DesignableBar = observer((props) => {
                   key={'delete'}
                   onClick={async () => {
                     const removed = deepRemove();
-                    // console.log({ removed })
                     const last = removed.pop();
-                    if (isGridRowOrCol(last)) {
-                      await removeSchema(last);
-                    }
+                    console.log({ last })
+                    await removeSchema(last);
                   }}
                 >
                   移除

yarn.lock

@@ -1762,27 +1762,27 @@
   dependencies:
     tslib "^2.0.0"
 
-"@dnd-kit/core@^3.1.1":
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/@dnd-kit/core/-/core-3.1.1.tgz#c5ad6665931f5a51e74226220e58ac7514f3faf0"
-  integrity sha512-18YY5+1lTqJbGSg6JBSa/fjAOTUYAysFrQ5Ti8oppEPHFacQbC+owM51y2z2KN0LkDHBfGZKw2sFT7++ttwfpA==
+"@dnd-kit/core@4.0.0-next-2021720152655":
+  version "4.0.0-next-2021720152655"
+  resolved "https://registry.npmjs.org/@dnd-kit/core/-/core-4.0.0-next-2021720152655.tgz#580175fc182c68b3829f81669ce233c558f25c3c"
+  integrity sha512-dxZDvk4e7EPQy9LiZppyTm9nPLq8AG91iq72jbLG5+J7Nl94u0/jhcdpqmMFptj/ha8nq1lBl9f3T2gaju/KUg==
   dependencies:
     "@dnd-kit/accessibility" "^3.0.0"
-    "@dnd-kit/utilities" "^2.0.0"
+    "@dnd-kit/utilities" "^3.0.0-next-2021720152655"
     tslib "^2.0.0"
 
-"@dnd-kit/sortable@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-4.0.0.tgz#81dd2b014a16527cf89602dc40060d9ee4dad352"
-  integrity sha512-teYVFy6mQG/u6F6CaGxAkzPfiNJvguFzWfJ/zonYQRxfANHX6QJ6GziMG9KON/Ae9Q2ODJP8vib+guWJrDXeGg==
+"@dnd-kit/sortable@5.0.0-next-2021720152655":
+  version "5.0.0-next-2021720152655"
+  resolved "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-5.0.0-next-2021720152655.tgz#bfd1afbaeb7c6b9a87c25dcae791487ceed87a49"
+  integrity sha512-eZFDoVRuPfyURyEBdlwYOK/yfSZFDyuTkoBdswzfeYYzGNYB6UGgZYnASzGa2sL8yk6QYoyfg2tuSu1yXsflDw==
   dependencies:
-    "@dnd-kit/utilities" "^2.0.0"
+    "@dnd-kit/utilities" "^3.0.0-next-2021720152655"
     tslib "^2.0.0"
 
-"@dnd-kit/utilities@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-2.0.0.tgz#a8462dff65c6f606ecbe95273c7e263b14a1ab97"
-  integrity sha512-bjs49yMNzMM+BYRsBUhTqhTk6HEvhuY3leFt6Em6NaYGgygaMbtGbbXof/UXBv7rqyyi0OkmBBnrCCcxqS2t/g==
+"@dnd-kit/utilities@^3.0.0-next-2021720152655":
+  version "3.0.0-next-2021720152655"
+  resolved "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.0.0-next-2021720152655.tgz#e2e4251984f24137f384f4b4087d5cdc56847a03"
+  integrity sha512-H9mhC46UoBSOyTARp7KQ6dJyRoMF4u2UsDfvv6hP150d13MkzGHIYEnQtYiyXYNc42EbdFo7aXHjKRz14py0mQ==
   dependencies:
     tslib "^2.0.0"