diff --git a/src/App.js b/src/App.js index ea78a87..015549e 100644 --- a/src/App.js +++ b/src/App.js @@ -241,6 +241,7 @@ function App() { document.body ) } + diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index efc39c4..7359fdd 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -737,6 +737,8 @@ class Canvas extends React.Component { } else if (container === WidgetContainer.WIDGET) { + console.log("removing") + // if the widget was inside another widget move it outside let childWidgetObj = this.findWidgetFromListById(widgetObj.current.getId()) let parentWidgetObj = this.findWidgetFromListById(childWidgetObj.parent) diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index 46115ee..d2e6e85 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -72,7 +72,7 @@ class Widget extends React.Component { this.state = { - zIndex: 0, + zIndex: 1, selected: false, widgetName: widgetName || 'widget', // this will later be converted to variable name enableRename: false, // will open the widgets editable div for renaming @@ -209,8 +209,7 @@ class Widget extends React.Component { if (this.state.attrs.styling.backgroundColor) this.setWidgetInnerStyle('backgroundColor', this.state.attrs.styling?.backgroundColor.value || "#fff") - this.load(this.props.initialData || {}) // load the initial data - + this.load(this.props.initialData || {}, console.log("loaded")) // load the initial data } componentWillUnmount() { @@ -797,7 +796,6 @@ class Widget extends React.Component { } this.updateState({ attrs: newAttrs }, callback) - }) } @@ -812,7 +810,6 @@ class Widget extends React.Component { handleDragEnter = (e, draggedElement) => { - console.log("Drahg engerted") if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { // if the drag is starting from outside (eg: file drop) or if drag doesn't exist @@ -852,18 +849,6 @@ class Widget extends React.Component { handleDragOver = (e, draggedElement) => { - if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { - // if the drag is starting from outside (eg: file drop) or if drag doesn't exist - return - } - - if (draggedElement === this.elementRef.current) { - // prevent drop on itself, since the widget is invisible when dragging, if dropped on itself, it may consume itself - return - } - - // console.log("Drag over: ", e.dataTransfer.getData("text/plain"), e.dataTransfer) - } handleDropEvent = (e, draggedElement, widgetClass = null) => { @@ -1062,6 +1047,8 @@ class Widget extends React.Component { opacity: this.state.isDragging ? 0.6 : 1, } + console.log("state conatainer: ", this.state.widgetContainer, this.state.widgetName) + const isSortable = this.getParentLayout() === Layouts.FLEX || this.getParentLayout() === Layouts.GRID // const boundingRect = this.getBoundingRect // FIXME: if the parent container has tw-overflow-none, then the resizable indicator are also hidden @@ -1078,10 +1065,13 @@ class Widget extends React.Component { {this.handleDragOver(e, draggedElement)}} diff --git a/src/canvas/widgets/widgetDnd.js b/src/canvas/widgets/widgetDnd.js index 32dc1f4..da412b1 100644 --- a/src/canvas/widgets/widgetDnd.js +++ b/src/canvas/widgets/widgetDnd.js @@ -3,16 +3,20 @@ import { useDragDropManager, useDroppable, useDraggable } from '@dnd-kit/react' import { useDragContext } from '../../components/draggable/draggableContext' import WidgetContainer from '../constants/containers' import { useSortable } from '@dnd-kit/react/sortable' +import { + pointerIntersection, + closestCenter, + shapeIntersection + } from '@dnd-kit/collision' function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onDrop, onDragStart, - onDragEnd, onDragEnter, onDragOver, currentPos={x: 0, y: 0}, - isSortable=false, sortableIndex=0, + onDragEnd, onDragEnter, onDragOver, currentPos={x: 0, y: 0}, + dragElementType, isSortable=false, sortableIndex=0, ...props}) { const dndRef = useRef(null) - const {dragElementType} = props const { draggedElement, setOverElement, widgetClass, setPosMetaData } = useDragContext() @@ -21,6 +25,7 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD const { ref: dropRef, droppable} = useDroppable({ id: widgetId, disabled: isDropDisabled, + collisionDetector: pointerIntersection, // accept: (draggable) => { // const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || @@ -32,21 +37,23 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD // } }) + const { ref: dragRef, draggable } = useDraggable({ id: widgetId, feedback: "move", type: dragElementType, disabled: props.disabled, - + // data: { title: props.children } }) - const {ref: sortableRef} = useSortable({ - id: widgetId, - index: sortableIndex, - disabled: isSortable - }) + // const {ref: sortableRef} = useSortable({ + // id: widgetId, + // index: sortableIndex, + // disabled: false && isSortable, + // feedback: 'move' + // }) const manager = useDragDropManager() @@ -92,7 +99,7 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD widgetRef.current = node dropRef(node) dragRef(node) - sortableRef(node) + // sortableRef(node) } const handleInitialPosOffset = (e) => { @@ -108,7 +115,6 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD const canvasBoundingRect = canvas.getBoundingClientRect() - // FIXME: initial offset is off const posMetaData = { dragStartCursorPos: {x: clientX, y: clientY}, initialPos: currentPos @@ -212,17 +218,24 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD } - + return (
{props.children} + + {/*
+
*/} { (droppable.isDropTarget && !draggable.isDragSource) && diff --git a/src/components/draggable/dnd/draggableDnd.js b/src/components/draggable/dnd/draggableDnd.js index 8c111d7..b89f308 100644 --- a/src/components/draggable/dnd/draggableDnd.js +++ b/src/components/draggable/dnd/draggableDnd.js @@ -4,13 +4,13 @@ import { CSS } from "@dnd-kit/utilities" import { useDragContext } from "../draggableContext" -function Draggable({dragElementType, dragWidgetClass = null, elementMetaData, ...props}) { +function Draggable({dragElementType, draggableType, dragWidgetClass = null, elementMetaData, ...props}) { const draggableRef = useRef(null); const { ref, draggable } = useDraggable({ id: dragElementType, - feedback: props.draggableType || "default", + feedback: draggableType || "default", type: dragElementType // data: { title: props.children } }) diff --git a/src/components/draggable/dnd/droppableDnd.js b/src/components/draggable/dnd/droppableDnd.js index 24d8cbf..dd1e4fc 100644 --- a/src/components/draggable/dnd/droppableDnd.js +++ b/src/components/draggable/dnd/droppableDnd.js @@ -1,7 +1,12 @@ import React, { useEffect, useRef, useState } from 'react' import { useDragDropManager, useDroppable } from '@dnd-kit/react' import { useDragContext } from '../draggableContext' - +import { + pointerIntersection, + closestCenter, + shapeIntersection + } from '@dnd-kit/collision' + function Droppable(props) { @@ -12,15 +17,16 @@ function Droppable(props) { const { ref, isDropTarget, droppable} = useDroppable({ id: props.id, - accept: (draggable) => { + collisionDetector: pointerIntersection, + // accept: (draggable) => { - const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || - (droppableTags.include?.length > 0 && droppableTags.include?.includes(draggable.type)) || - (droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(draggable.type)) - )) + // const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || + // (droppableTags.include?.length > 0 && droppableTags.include?.includes(draggable.type)) || + // (droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(draggable.type)) + // )) - return allowDrop - } + // return allowDrop + // } }) @@ -53,7 +59,7 @@ function Droppable(props) { const {target, source} = e.operation - if (target && target?.id !== props?.id){ + if (!droppable.isDropTarget){ return } @@ -81,7 +87,7 @@ function Droppable(props) { const {target} = e.operation - if (target && target?.id !== props?.id){ + if (!droppable.isDropTarget){ return } // console.log("Over sir1: ", draggedElement) @@ -113,10 +119,12 @@ function Droppable(props) { const {target} = e.operation - if (target && target?.id !== props?.id){ + if (!droppable.isDropTarget){ return } + console.log("dropping") + if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { // if the drag is starting from outside (eg: file drop) or if drag doesn't exist return @@ -135,6 +143,7 @@ function Droppable(props) { console.log("initial POs: ", posMetaData) if (onDrop && dropAllowed) { onDrop(e, draggedElement, widgetClass, posMetaData) + console.log("Dropped") } setTimeout(() => setAllowDrop({allow: true, show: false}), 10) @@ -156,7 +165,7 @@ function Droppable(props) { } return ( -
+
{props.children} diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js index 1d3f60e..7b5d70b 100644 --- a/src/frameworks/tkinter/widgets/base.js +++ b/src/frameworks/tkinter/widgets/base.js @@ -408,7 +408,6 @@ export class TkinterBase extends Widget { } this.updateState({ attrs: newAttrs }, callback) - })