From 6656d3f6c4434522bed3cc90c9f08d70d07e01a1 Mon Sep 17 00:00:00 2001 From: paul Date: Sat, 1 Mar 2025 19:20:46 +0530 Subject: [PATCH] working on drag and drop using dndkit --- package-lock.json | 83 +++++++++ package.json | 2 + src/App.js | 33 +++- src/canvas/License.txt | 2 +- src/canvas/canvas.js | 10 +- src/canvas/widgets/base.js | 5 +- src/canvas/widgets/widgetDragDrop.js | 2 +- src/components/License.txt | 42 +++++ src/components/cards.js | 92 +++++++++- src/components/draggable/dnd/dndContext.js | 36 ++++ src/components/draggable/dnd/draggableDnd.js | 78 +++++++++ src/components/draggable/dnd/droppableDnd.js | 163 ++++++++++++++++++ .../{utils => draggable/dnd}/panzoom.js | 0 src/components/draggable/draggableContext.js | 16 +- src/components/utils/draggableDnd.js | 28 --- src/components/utils/droppableDnd.js | 20 --- src/frameworks/License.txt | 42 +++++ src/index.js | 6 +- 18 files changed, 591 insertions(+), 69 deletions(-) create mode 100644 src/components/License.txt create mode 100644 src/components/draggable/dnd/dndContext.js create mode 100644 src/components/draggable/dnd/draggableDnd.js create mode 100644 src/components/draggable/dnd/droppableDnd.js rename src/components/{utils => draggable/dnd}/panzoom.js (100%) delete mode 100644 src/components/utils/draggableDnd.js delete mode 100644 src/components/utils/droppableDnd.js create mode 100644 src/frameworks/License.txt diff --git a/package-lock.json b/package-lock.json index 70ead3f..60ed607 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,9 @@ "dependencies": { "@ant-design/icons": "^5.4.0", "@dnd-kit/core": "^6.1.0", + "@dnd-kit/dom": "^0.0.9", "@dnd-kit/modifiers": "^7.0.0", + "@dnd-kit/react": "^0.0.9", "@dnd-kit/utilities": "^3.2.2", "@reduxjs/toolkit": "^2.2.7", "@testing-library/jest-dom": "^5.17.0", @@ -2548,6 +2550,17 @@ "node": ">=10" } }, + "node_modules/@dnd-kit/abstract": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@dnd-kit/abstract/-/abstract-0.0.9.tgz", + "integrity": "sha512-4FjHPOREfJJfRu0clCAnYqYc8JNHQl6CL31FjLKR+1wER+YOGkb3s3JntsqvZost5Xm/G/Z4sQ3ouLdyYQ9KdQ==", + "license": "MIT", + "dependencies": { + "@dnd-kit/geometry": "^0.0.9", + "@dnd-kit/state": "^0.0.9", + "tslib": "^2.6.2" + } + }, "node_modules/@dnd-kit/accessibility": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz", @@ -2559,6 +2572,17 @@ "react": ">=16.8.0" } }, + "node_modules/@dnd-kit/collision": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@dnd-kit/collision/-/collision-0.0.9.tgz", + "integrity": "sha512-8Brbcd0dM/y2yzg/6EI9O/SvsVAglx0fUDvqPSsXACewR+//OGno1GVKndh35GAVKqDxOgG3Q/fw+CVnMnFv6g==", + "license": "MIT", + "dependencies": { + "@dnd-kit/abstract": "^0.0.9", + "@dnd-kit/geometry": "^0.0.9", + "tslib": "^2.6.2" + } + }, "node_modules/@dnd-kit/core": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.1.0.tgz", @@ -2573,6 +2597,29 @@ "react-dom": ">=16.8.0" } }, + "node_modules/@dnd-kit/dom": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@dnd-kit/dom/-/dom-0.0.9.tgz", + "integrity": "sha512-nsDcL6MMdNfGOg0xp24c1xy/eNW7fO1uLU0AM2b1SFYJYsbXUMw6sQXq+2eHCQol/FixCoSbjMgjx9D8jQXb+w==", + "license": "MIT", + "dependencies": { + "@dnd-kit/abstract": "^0.0.9", + "@dnd-kit/collision": "^0.0.9", + "@dnd-kit/geometry": "^0.0.9", + "@dnd-kit/state": "^0.0.9", + "tslib": "^2.6.2" + } + }, + "node_modules/@dnd-kit/geometry": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@dnd-kit/geometry/-/geometry-0.0.9.tgz", + "integrity": "sha512-zqSY7vva+LGs9Y/c37GhD67q+boS27nCmyYYAohlZ29MGz66KwjpbSH5HNHa261kuq90KaaIVQQVHiZGjNfmOw==", + "license": "MIT", + "dependencies": { + "@dnd-kit/state": "^0.0.9", + "tslib": "^2.6.2" + } + }, "node_modules/@dnd-kit/modifiers": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-7.0.0.tgz", @@ -2586,6 +2633,32 @@ "react": ">=16.8.0" } }, + "node_modules/@dnd-kit/react": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@dnd-kit/react/-/react-0.0.9.tgz", + "integrity": "sha512-a2ZUbVVyJwSf5gf0l6I10VqEj8EEe+O1W/q+rSR0fpjbxjwhLT0Gt+udwKZsg3yIKxmxJC4W6eHSS6feNca9aw==", + "license": "MIT", + "dependencies": { + "@dnd-kit/abstract": "^0.0.9", + "@dnd-kit/dom": "^0.0.9", + "@dnd-kit/state": "^0.0.9", + "tslib": "^2.6.2" + }, + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + } + }, + "node_modules/@dnd-kit/state": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@dnd-kit/state/-/state-0.0.9.tgz", + "integrity": "sha512-F43bOum8k/Rh1tfO3DiAUs/zw6KSv5IMm4PGKSPoU2tz+LW+37Kp37NlgwtLLDzx+z6R+6gILnJzE6Q5eVx7OQ==", + "license": "MIT", + "dependencies": { + "@preact/signals-core": "^1.6.0", + "tslib": "^2.6.2" + } + }, "node_modules/@dnd-kit/utilities": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz", @@ -3900,6 +3973,16 @@ "node": ">= 8" } }, + "node_modules/@preact/signals-core": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.8.0.tgz", + "integrity": "sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/@rc-component/async-validator": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.4.tgz", diff --git a/package.json b/package.json index 6fea594..6487559 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ "dependencies": { "@ant-design/icons": "^5.4.0", "@dnd-kit/core": "^6.1.0", + "@dnd-kit/dom": "^0.0.9", "@dnd-kit/modifiers": "^7.0.0", + "@dnd-kit/react": "^0.0.9", "@dnd-kit/utilities": "^3.2.2", "@reduxjs/toolkit": "^2.2.7", "@testing-library/jest-dom": "^5.17.0", diff --git a/src/App.js b/src/App.js index d6bc5da..9608a0e 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ * Github: PaulleDemon */ import { useEffect, useRef, useState } from 'react' +import { createPortal } from "react-dom" import { LayoutFilled, ProductFilled, CloudUploadOutlined, DatabaseFilled } from "@ant-design/icons" // import { DndContext, useSensors, useSensor, PointerSensor, closestCorners, DragOverlay, rectIntersection } from '@dnd-kit/core' @@ -14,7 +15,7 @@ import Sidebar from './sidebar/sidebar' import UploadsContainer from './sidebar/uploadsContainer' import WidgetsContainer from './sidebar/widgetsContainer' -import { DragProvider } from './components/draggable/draggableContext' +import { DragProvider, useDragContext } from './components/draggable/draggableContext' import PluginsContainer from './sidebar/pluginsContainer' import { FileUploadProvider, useFileUploadContext } from './contexts/fileUploadContext' @@ -31,6 +32,8 @@ import generateTkinterCode from './frameworks/tkinter/engine/code' import TkMainWindow from './frameworks/tkinter/widgets/mainWindow' import CTkMainWindow from './frameworks/customtk/widgets/mainWindow' +import { DndContext, DragOverlay } from '@dnd-kit/core' +import { SidebarOverlayWidgetCard, SidebarWidgetCard } from './components/cards' function App() { @@ -45,6 +48,8 @@ function App() { // const [uploadedAssets, setUploadedAssets] = useState([]) // a global storage for assets, since redux can't store files(serialize files) + const { draggedElement, overElement, setOverElement, widgetClass, dragElementMetaData } = useDragContext() + const [sidebarWidgets, setSidebarWidgets] = useState(TkinterWidgets || []) const [sidebarPlugins, setSidebarPlugins] = useState(TkinterPluginWidgets || []) @@ -53,6 +58,7 @@ function App() { // NOTE: the below reference is no longer required const [canvasWidgets, setCanvasWidgets] = useState([]) // contains the reference to the widgets inside the canvas + const sidebarTabs = [ { name: "Widgets", @@ -196,6 +202,9 @@ function App() { } + + // console.log("dragged element: ", dragElementMetaData) + return (
Are you sure you want to change the framework? This will clear the canvas.

*/} - +
@@ -217,9 +226,25 @@ function App() { {/* */}
{/* dragOverlay (dnd-kit) helps move items from one container to another */} - + + { + createPortal( + + { + draggedElement ? + + : + null + } + , + document.body + ) + } + + +
) } -export default App; +export default App diff --git a/src/canvas/License.txt b/src/canvas/License.txt index 24360c4..0776d65 100644 --- a/src/canvas/License.txt +++ b/src/canvas/License.txt @@ -9,7 +9,7 @@ some parts under a different non-commercial use license. ----------------------- License in short -* You are free fork, modify and redistribute it given the original or derived works is kept free and open-source and under the same licese. +* You are free fork, modify and redistribute it given the original or derived works is kept free and open-source and under the same license. * Another restriction is you can't redistribute in binary or executable formats without asking me first. * If you plan on making money on this work or derived work you need permission first. diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index 36d6a4c..cbc03f4 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -28,6 +28,7 @@ import WidgetContainer from "./constants/containers" import { isSubClassOfWidget } from "../utils/widget" import { ButtonModal } from "../components/modals" import ResizeWidgetContainer from "./resizeContainer" +import Droppable from "../components/draggable/dnd/droppableDnd" // const DotsBackground = require("../assets/background/dots.svg") @@ -1086,11 +1087,12 @@ class Canvas extends React.Component { + {/* */} - + onDrop={this.handleDropEvent}> */} {/* */}
{/* */} - - + {/* */} +