fix some drag and drop issues

2021-08-21 15:53:22 +08:00 · 2021-08-21 15:53:22 +08:00 · 1012cb6401
commit 1012cb6401
parent 8f1d6a4a2c
7 changed files with 54 additions and 37 deletions
--- a/packages/client/package.json
+++ b/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",
--- a/packages/client/src/components/Sortable/index.tsx
+++ b/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
--- a/packages/client/src/schemas/grid/index.tsx
+++ b/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`}
--- a/packages/client/src/schemas/grid/style.less
+++ b/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;
--- a/packages/client/src/schemas/kanban/DesignableBar.tsx
+++ b/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);
-                    }
                  }}
                >
                  移除
--- a/packages/client/src/schemas/markdown/index.tsx
+++ b/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)) {
+                    console.log({ last })
                    await removeSchema(last);
-                    }
                  }}
                >
                  移除
--- a/yarn.lock
+++ b/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"