From 1012cb64019dd19002af6c3d686f865371c40b2f Mon Sep 17 00:00:00 2001 From: chenos Date: Sat, 21 Aug 2021 15:53:22 +0800 Subject: [PATCH] fix some drag and drop issues --- packages/client/package.json | 4 +-- .../client/src/components/Sortable/index.tsx | 10 +++--- packages/client/src/schemas/grid/index.tsx | 35 ++++++++++++++----- packages/client/src/schemas/grid/style.less | 4 +++ .../src/schemas/kanban/DesignableBar.tsx | 4 +-- .../client/src/schemas/markdown/index.tsx | 6 ++-- yarn.lock | 28 +++++++-------- 7 files changed, 54 insertions(+), 37 deletions(-) diff --git a/packages/client/package.json b/packages/client/package.json index 664625a81..c1b409438 100644 --- 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", diff --git a/packages/client/src/components/Sortable/index.tsx b/packages/client/src/components/Sortable/index.tsx index 7720434f7..d38a1a085 100644 --- a/packages/client/src/components/Sortable/index.tsx +++ b/packages/client/src/components/Sortable/index.tsx @@ -48,7 +48,7 @@ export function DragHandle(props) { ) @@ -134,7 +134,7 @@ export function SortableItem(props: SortableItemProps) { return ( { previewRef.current = el; setDroppableNodeRef(el); - if (draggable) { - setDraggableNodeRef(el); - } + // if (draggable) { + // setDraggableNodeRef(el); + // } }} > (null); const GridColContext = createContext(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 (
{ 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' }} > -
+ /> */} { const removed = deepRemove(); // console.log({ removed }) const last = removed.pop(); - if (isGridRowOrCol(last)) { - await removeSchema(last); - } + await removeSchema(last); }} > 移除 diff --git a/packages/client/src/schemas/markdown/index.tsx b/packages/client/src/schemas/markdown/index.tsx index 2501d1fef..643c06f46 100644 --- 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)) { - await removeSchema(last); - } + console.log({ last }) + await removeSchema(last); }} > 移除 diff --git a/yarn.lock b/yarn.lock index 2e52614cc..e53871d51 100644 --- 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"