working on draggable api

2024-09-15 19:22:32 +05:30
parent 0a07da7d40
commit d363c8fe92
8 changed files with 190 additions and 59 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -156,7 +156,7 @@ function App() {
 					collisionDetection={rectIntersection}
 					onDragStart={handleDragStart}
 					onDragMove={handleDragMove}
-					onDragEnd={handleDragEnd}
+					// onDragEnd={handleDragEnd}
 					
 				>
 				<div className="tw-w-full tw-h-[94vh] tw-flex">
--- 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 {
                    </Tooltip>
                </div>

-                <Droppable id="canvas-droppable" className="tw-w-full tw-h-full">
+                <DroppableWrapper id="canvas-droppable" 
+                                    className="tw-w-full tw-h-full" onDrop={this.handleDropEvent}>
                    <Dropdown trigger={['contextMenu']} mouseLeaveDelay={0} menu={{items: this.state.contextMenuItems, }}>
                            <div className="dots-bg tw-w-full tw-h-full tw-flex tw-relative tw-bg-[#f2f2f2] tw-overflow-hidden" 
                                    ref={this.canvasContainerRef}
@@ -572,12 +598,12 @@ class Canvas extends React.Component {
                                </div>
                            </div>
                    </Dropdown>
-                </Droppable>
+                </DroppableWrapper>

-                <CanvasToolBar isOpen={this.state.toolbarOpen} 
+                {/* <CanvasToolBar isOpen={this.state.toolbarOpen} 
                                widgetType={this.state.selectedWidgets?.at(0)?.getWidgetType() || ""}
                                attrs={this.state.toolbarAttrs}
-                                />
+                                /> */}
            </div>
        )
    }
--- 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 (
-        <Draggable className="tw-cursor-pointer" id={name}>
-            <div ref={innerRef} className="tw-select-none tw-h-[240px] tw-w-[280px] tw-flex tw-flex-col tw-rounded-md tw-overflow-hidden 
-                            tw-gap-2 tw-text-gray-600 tw-bg-[#ffffff44] tw-border-solid tw-border-[1px] tw-border-[#888] ">
-                <div className="tw-h-[200px] tw-w-full tw-overflow-hidden">
-                    <img src={img} alt={name} className="tw-object-contain tw-h-full tw-w-full tw-select-none" />
-                </div>
-                <span className="tw-text-xl">{name}</span>
-                <div className="tw-flex tw-text-lg  tw-justify-between tw-px-4">
+        // <Draggable className="tw-cursor-pointer" id={name}>
+            <DraggableWrapper className="tw-cursor-pointer tw-w-fit tw-h-fit">
+                <div ref={innerRef} className="tw-select-none tw-pointer-events-none tw-h-[240px] tw-w-[280px] tw-flex tw-flex-col 
+                                                tw-rounded-md tw-overflow-hidden 
+                                                tw-gap-2 tw-text-gray-600 tw-bg-[#ffffff44] tw-border-solid tw-border-[1px]
+                                                tw-border-[#888] ">
+                    <div className="tw-h-[200px] tw-w-full tw-overflow-hidden">
+                        <img src={img} alt={name} className="tw-object-contain tw-h-full tw-w-full tw-select-none" />
+                    </div>
+                    <span className="tw-text-xl tw-text-center">{name}</span>
+                    <div className="tw-flex tw-text-lg tw-place tw-px-4">

-                    <a href={url} className="tw-text-black" target="_blank" rel="noopener noreferrer">
-                        {urlIcon}
-                    </a>
+                        <a href={url} className="tw-text-black" target="_blank" rel="noopener noreferrer">
+                            {urlIcon}
+                        </a>
+                    </div>
                </div>
-            </div>
-        </Draggable>
+            </DraggableWrapper>
+        // </Draggable> 
    )

 }
--- 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 (
-      <button className={`tw-bg-transparent tw-outline-none tw-border-none ${props.className}`} 
-              ref={setNodeRef} 
-              style={style} 
-              {...listeners} 
-              {...attributes}>
-        {props.children}
-      </button>
+        <div className={`${props.className}`} draggable 
+                onDragStart={handleDragStart} 
+                onDragOver={handleDragOver}
+                onDragEnd={handleDragEnd}
+                >
+            {props.children}
+        </div>
    )
+
 }


-export default Draggable
+export default DraggableWrapper
--- a/src/components/utils/draggableDnd.js
+++ 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 (
+      <button className={`tw-bg-transparent tw-outline-none tw-border-none ${props.className}`} 
+              ref={setNodeRef} 
+              style={style} 
+              {...listeners} 
+              {...attributes}>
+        {props.children}
+      </button>
+    )
+}
+
+
+export default Draggable
--- 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 (
+        <div className={`${props.className}`}
+                onDragOver={handleDragOver}
+                onDrop={handleDropEvent}
+                onDragEnter={handleDragEnter}
+                onDragLeave={handleDragLeave}
+                >
+            {/* {
+                showDroppable.show && 
+                <div className={`${showDroppable.allow ? "tw-bg-[#b9f18e77]" : "tw-bg-[#ff7a7a6d]"} 
+                                tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[2]`}>
+                </div>
+            } */}
+            {props.children}
+            
+        </div>
+    )

-function Droppable(props) {
-  const {isOver, setNodeRef} = useDroppable({
-    id: props.id,
-  })
-  const style = {
-    backgroundColor: isOver ? 'green' : '',
-  }
-  
-  
-  return (
-    <div ref={setNodeRef} style={style} className={props.className || ''}>
-      {props.children}
-    </div>
-  )
 }

-export default Droppable
+
+export default DroppableWrapper
--- a/src/components/utils/droppableDnd.js
+++ 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 (
+    <div ref={setNodeRef} style={style} className={props.className || ''}>
+      {props.children}
+    </div>
+  )
+}
+
+export default Droppable
--- 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 {