Miko/PyUIBuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on sortable

Browse Source
This commit is contained in:
paul
2025-03-06 11:38:03 +05:30
parent c9e12cccd4
commit ee953107f3
7 changed files with 61 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.js
View File

@@ -241,6 +241,7 @@ function App() {
document.body
)
}
</DragDropProvider>

2
src/canvas/canvas.js
View File

@@ -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)

26
src/canvas/widgets/base.js
View File

@@ -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 {
<WidgetDnd widgetId={this.__id}
disabled={false && this.state.dragEnabled}
data-draggable-type={this.getWidgetType()} // helps with droppable
data-container={this.state.widgetContainer}
dragElementType={this.getWidgetType()}
droppableTags={this.droppableTags}
className="tw-shadow-xl tw-w-fit tw-h-fit"
className="tw-shadow-xl tw-w-full tw-h-full"
currentPos={{ ...this.state.pos }}
onDragStart={this.handleDragStart}
onDragOver={(e) => {this.handleDragOver(e, draggedElement)}}

41
src/canvas/widgets/widgetDnd.js
View File

@@ -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 (
<div ref={handleRef} data-drag-start-within
{...props}
data-widget-id={widgetId}
data-container={WidgetContainer.CANVAS}
data-draggable-type={dragElementType}
className={`${props.className || ''} ${draggable.isDragging && "tw-pointer-events-none"} tw-relative tw-h-max tw-w-max tw-outline-none`}
className={`${props.className || ''} ${draggable.isDragging && "tw-pointer-events-none"} tw-outline
tw-border-2 tw-border-solid tw-border-red-400
tw-relative tw-outline-none`}
>
{props.children}
{/* <div className={`${allowDrop ? "tw-bg-[#82ff1c55]" : "tw-bg-[#eb5d3662]"}
tw-absolute tw-top-0 tw-left-[${rect.}] tw-w-full tw-h-full tw-z-[3]
tw-border-2 tw-border-dashed tw-rounded-lg tw-pointer-events-none
`}>
</div> */}
{
(droppable.isDropTarget && !draggable.isDragSource) &&

4
src/components/draggable/dnd/draggableDnd.js
View File

@@ -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 }
})

33
src/components/draggable/dnd/droppableDnd.js
View File

@@ -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 (
<div ref={handleRef} className={props.className || ''}>
<div ref={handleRef} className={`${props.className}` || ''}>
{props.children}

1
src/frameworks/tkinter/widgets/base.js
View File

@@ -408,7 +408,6 @@ export class TkinterBase extends Widget {
}
this.updateState({ attrs: newAttrs }, callback)
})