From d363c8fe92c3b9d26a7dc7bca7c362e56151f56c Mon Sep 17 00:00:00 2001 From: paul Date: Sun, 15 Sep 2024 19:22:32 +0530 Subject: [PATCH] working on draggable api --- src/App.js | 2 +- src/canvas/canvas.js | 36 ++++++++++-- src/components/cards.js | 33 ++++++----- src/components/utils/draggable.js | 47 +++++++++------- src/components/utils/draggableDnd.js | 27 +++++++++ src/components/utils/droppable.js | 82 ++++++++++++++++++++++------ src/components/utils/droppableDnd.js | 20 +++++++ src/components/utils/panzoom.js | 2 +- 8 files changed, 190 insertions(+), 59 deletions(-) create mode 100644 src/components/utils/draggableDnd.js create mode 100644 src/components/utils/droppableDnd.js diff --git a/src/App.js b/src/App.js index 6f56097..88734fd 100644 --- a/src/App.js +++ b/src/App.js @@ -156,7 +156,7 @@ function App() { collisionDetection={rectIntersection} onDragStart={handleDragStart} onDragMove={handleDragMove} - onDragEnd={handleDragEnd} + // onDragEnd={handleDragEnd} >
diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index 7ab41e7..dd4ae5b 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -5,7 +5,7 @@ import {DndContext} from '@dnd-kit/core' import { CloseOutlined, DeleteOutlined, EditOutlined, FullscreenOutlined, ReloadOutlined } from "@ant-design/icons" import { Button, Tooltip, Dropdown } from "antd" -import Droppable from "../components/utils/droppable" +import Droppable from "../components/utils/droppableDnd" import Widget from "./widgets/base" import Cursor from "./constants/cursor" @@ -18,6 +18,7 @@ import { WidgetContext } from './context/widgetContext' // import {ReactComponent as DotsBackground} from "../assets/background/dots.svg" import DotsBackground from "../assets/background/dots.svg" +import DroppableWrapper from "../components/utils/droppable" // const DotsBackground = require("../assets/background/dots.svg") @@ -524,6 +525,30 @@ class Canvas extends React.Component { } + handleDropEvent = (e) => { + + e.preventDefault() + + console.log("event: ", e, this.canvasContainerRef.current.offsetTop) + + const canvasContainerRect = this.getCanvasContainerBoundingRect() + const canvasRect = this.getCanvasBoundingRect() + + const { clientX, clientY } = e + + let finalPosition = { + x: (e.clientX - canvasContainerRect.left - this.state.currentTranslate.x) / this.state.zoom, + y: (e.clientY - canvasContainerRect.top - this.state.currentTranslate.y) / this.state.zoom, + } + + console.log("final: ", finalPosition) + + this.addWidget(Widget, ({id, widgetRef}) => { + widgetRef.current.setPos(finalPosition.x, finalPosition.y) + }) + + } + renderWidget(widget){ const { id, widgetType: ComponentType } = widget // console.log("widet: ", this.widgetRefs, id) @@ -549,7 +574,8 @@ class Canvas extends React.Component {
- +
- + - + /> */} ) } diff --git a/src/components/cards.js b/src/components/cards.js index 8ee0b01..e25c639 100644 --- a/src/components/cards.js +++ b/src/components/cards.js @@ -1,9 +1,10 @@ import { useEffect, useMemo, useRef } from "react" -import Draggable from "./utils/draggable" +import Draggable from "./utils/draggableDnd" import { FileImageOutlined, GithubOutlined, GitlabOutlined, LinkOutlined, AudioOutlined, VideoCameraOutlined, FileTextOutlined} from "@ant-design/icons" +import DraggableWrapper from "./utils/draggable" export function DraggableWidgetCard({ name, img, url, innerRef}){ @@ -28,21 +29,25 @@ export function DraggableWidgetCard({ name, img, url, innerRef}){ return ( - -
-
- {name} -
- {name} -
+ // + +
+
+ {name} +
+ {name} +
-
- + + // ) } diff --git a/src/components/utils/draggable.js b/src/components/utils/draggable.js index 7cca531..6b0b7eb 100644 --- a/src/components/utils/draggable.js +++ b/src/components/utils/draggable.js @@ -1,27 +1,32 @@ -import React from "react" -import {useDraggable} from "@dnd-kit/core" -import { CSS } from "@dnd-kit/utilities" -function Draggable(props) { - const {attributes, listeners, setNodeRef, transform} = useDraggable({ - id: props.id, - data: {title: props.children} - }) - const style = transform ? { - transform: CSS.Translate.toString(transform), - } : undefined - - + +const DraggableWrapper = (props) => { + + + const handleDragStart = () => { + console.log("Drag start") + } + + const handleDragOver = () => { + // console.log("Drag over") + } + + const handleDragEnd = (e) => { + // console.log("Drag end: ", e, e.target.closest('div')) + + } + return ( - +
+ {props.children} +
) + } -export default Draggable \ No newline at end of file +export default DraggableWrapper \ No newline at end of file diff --git a/src/components/utils/draggableDnd.js b/src/components/utils/draggableDnd.js new file mode 100644 index 0000000..7cca531 --- /dev/null +++ b/src/components/utils/draggableDnd.js @@ -0,0 +1,27 @@ +import React from "react" +import {useDraggable} from "@dnd-kit/core" +import { CSS } from "@dnd-kit/utilities" + +function Draggable(props) { + const {attributes, listeners, setNodeRef, transform} = useDraggable({ + id: props.id, + data: {title: props.children} + }) + const style = transform ? { + transform: CSS.Translate.toString(transform), + } : undefined + + + return ( + + ) +} + + +export default Draggable \ No newline at end of file diff --git a/src/components/utils/droppable.js b/src/components/utils/droppable.js index a732888..6c6c259 100644 --- a/src/components/utils/droppable.js +++ b/src/components/utils/droppable.js @@ -1,20 +1,68 @@ -import React from 'react' -import {useDroppable} from '@dnd-kit/core' +import { useState } from "react" + + +const DroppableWrapper = ({onDrop, ...props}) => { + + + const [showDroppable, setShowDroppable] = useState({ + show: false, + allow: false + }) + + const handleDragEnter = () => { + console.log("Drag start") + setShowDroppable({ + allow: true, + show: true + }) + } + + const handleDragOver = (e) => { + // console.log("Drag over: ", e) + e.preventDefault() + } + + const handleDropEvent = (e) => { + + setShowDroppable({ + allow: false, + show: false + }) + + if(onDrop){ + onDrop(e) + } + } + + + const handleDragLeave = (e) => { + if (!e.currentTarget.contains(e.relatedTarget)) { + setShowDroppable({ + allow: false, + show: false + }) + } + } + + return ( +
+ {/* { + showDroppable.show && +
+
+ } */} + {props.children} + +
+ ) -function Droppable(props) { - const {isOver, setNodeRef} = useDroppable({ - id: props.id, - }) - const style = { - backgroundColor: isOver ? 'green' : '', - } - - - return ( -
- {props.children} -
- ) } -export default Droppable \ No newline at end of file + +export default DroppableWrapper \ No newline at end of file diff --git a/src/components/utils/droppableDnd.js b/src/components/utils/droppableDnd.js new file mode 100644 index 0000000..a732888 --- /dev/null +++ b/src/components/utils/droppableDnd.js @@ -0,0 +1,20 @@ +import React from 'react' +import {useDroppable} from '@dnd-kit/core' + +function Droppable(props) { + const {isOver, setNodeRef} = useDroppable({ + id: props.id, + }) + const style = { + backgroundColor: isOver ? 'green' : '', + } + + + return ( +
+ {props.children} +
+ ) +} + +export default Droppable \ No newline at end of file diff --git a/src/components/utils/panzoom.js b/src/components/utils/panzoom.js index cff9ae4..6fcb320 100644 --- a/src/components/utils/panzoom.js +++ b/src/components/utils/panzoom.js @@ -1,4 +1,4 @@ -// This is only for testing purpose, not really meant to be used +//NOTE: This is only for testing purpose, not really meant to be used import './polyfills' import {