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

fixed sidebar drag and drop issue

Browse Source
This commit is contained in:
paul
2025-03-10 19:10:36 +05:30
parent cce577add3
commit 769615c2cc
5 changed files with 53 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/canvas/canvas.js
View File

@@ -713,7 +713,7 @@ class Canvas extends React.Component {
}
/**
* Handles drop event to canvas from the sidebar and on canvas widget movement
* Handles drop event to canvas from the sidebar and on canvas widget movement (not the drop on child widget)
* @param {DragEvent} e
*/
handleDropEvent = (e, draggedElement, widgetClass = null, posMetaData) => {
@@ -916,10 +916,11 @@ class Canvas extends React.Component {
* Adds the child into the children attribute inside the this.widgets list of objects
* // widgets data structure { id, widgetType: widgetComponentType, children: [], parent: "" }
* @param {string} parentWidgetId
* @param {object} dragElement
* @param {boolean} create - if create is set to true the widget will be created before adding to the child tree
* @param {object} dragElementId,
* @param {object} posMetaData, - meta data about the initial cursor and widget position
* @param {boolean} adjustInitialOffset - if set to false, it won't adjust based on initial position, so you'll have the widget drop at top right corner (useful when dropping from sidebar)
*/
handleAddWidgetChild = ({ event, parentWidgetId, dragElementID, posMetaData }) => {
handleAddWidgetChild = ({ event, parentWidgetId, dragElementID, posMetaData, adjustInitialOffset=true }) => {
// console.log("event: ", event)
// widgets data structure { id, widgetType: widgetComponentType, children: [], parent: "" }
@@ -950,24 +951,24 @@ class Canvas extends React.Component {
y: (clientY - parentRect.top) / this.state.zoom,
}
// FIXME: if the drag is from sidebar in layout absolute the position is wrong
const initialOffset = {
x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom) - (initialPos.x / this.state.zoom),
y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom) - (initialPos.y / this.state.zoom)
}
finalPosition = {
x: finalPosition.x - initialOffset.x,
y: finalPosition.y - initialOffset.y
if (adjustInitialOffset){
const initialOffset = {
x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom) - (initialPos.x / this.state.zoom),
y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom) - (initialPos.y / this.state.zoom)
}
finalPosition = {
x: finalPosition.x - initialOffset.x,
y: finalPosition.y - initialOffset.y
}
}
let updatedWidgets = this.removeWidgetFromCurrentList(dragElementID)
const parentLayout = parentWidget.getLayout()?.layout || null
// FIXME: if the layout is flex or grid the position should be different
dragWidget.current.setPos(finalPosition.x, finalPosition.y)
const updatedDragWidget = {
@@ -1311,7 +1312,7 @@ class Canvas extends React.Component {
/>
{/* Canvas */}
{/* TODO: add translation in class instead of applyTransform function */}
<div data-canvas className={`tw-w-full tw-h-full tw-absolute ${!IS_PRODUCTION ? "tw-bg-red-300" : "tw-bg-transparent"}
<div data-canvas className={`tw-w-full tw-h-full tw-absolute ${!IS_PRODUCTION ? "tw-bg-red-300" : "tw-bg-transparent"} tw-bg-transparent
tw-top-0 tw-select-none
`}

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

@@ -461,14 +461,14 @@ class Widget extends React.Component {
}
hideDroppableIndicator(){
console.log("hide drop indicator")
// console.log("hide drop indicator")
this.setState({
showDroppableStyle: {
allow: false,
show: false
}
}, () => {
console.log("hidden the drop indicator")
// console.log("hidden the drop indicator")
})
}
@@ -603,22 +603,23 @@ class Widget extends React.Component {
}
if (layout === Layouts.FLEX || layout === Layouts.GRID){
updates = {
...updates,
positionType: PosType.NONE,
}
// const elementRect = this.elementRef.current.getBoundingClientRect()
// const canvasInnerRect = this.props.canvasInnerContainerRef.current.getBoundingClientRect()
const elementRect = this.elementRef.current.getBoundingClientRect()
// console.log("winner: ", this.props.parentWidgetRef.current.getBoundingRect())
const parentRect = this.props.parentWidgetRef.current.getBoundingRect()
// let pos = {
// x: elementRect.left - canvasInnerRect.left,
// y: elementRect.top - canvasInnerRect.top
// }
// FIXME: (low priority) once the place is moved and back to flex the position the updated position is not reflected
let pos = {
x: (elementRect.left - parentRect.left) / this.canvasMetaData.zoom,
y: (elementRect.top - parentRect.top) / this.canvasMetaData.zoom
}
// this.setPos(pos.x, pos.y)
this.setPos(pos.x, pos.y)
// console.log("setting pos: ", pos)
}else if (layout === Layouts.PLACE){
@@ -629,6 +630,8 @@ class Widget extends React.Component {
}
this.setState(updates)
return updates
}
getParentLayout(){
@@ -1052,13 +1055,27 @@ class Widget extends React.Component {
} else if (container === WidgetContainer.SIDEBAR) {
// const { initialPos } = posMetaData
// const canvasInnerRect = this.props.canvasInnerContainerRef.current.getBoundingClientRect()
// const newInitialPos = {
// x: (initialPos.x - canvasInnerRect.left),
// y: (initialPos.y - canvasInnerRect.top)
// }
// posMetaData = {
// ...posMetaData,
// initialPos: newInitialPos,
// }
// console.log("Dropped on Sidebar: ", this.__id)
this.props.onCreateWidgetRequest(widgetClass, ({ id, widgetRef }) => {
this.props.onAddChildWidget({
event: e,
parentWidgetId: this.__id,
dragElementID: id,
posMetaData
posMetaData,
adjustInitialOffset: false, // don't adjust for initial offset
}) // if dragged from the sidebar create the widget first
})
@@ -1205,18 +1222,6 @@ class Widget extends React.Component {
y: elementRect.top - canvasInnerRect.top
}
// let parent = this.props.parentWidgetRef?.current;
// while (parent) {
// // accounting for nested parents
// const parentRect = parent.getBoundingRect()
// initialPos.x -= parentRect.left - canvasInnerRect.left
// initialPos.y -= parentRect.top - canvasInnerRect.top
// // Move up to the next parent (if any)
// parent = parent.parentWidgetRef?.current
// }
const posMetaData = {
dragStartCursorPos: {x: clientX, y: clientY},
initialPos: {...initialPos}
@@ -1329,7 +1334,7 @@ class Widget extends React.Component {
/>
<div
className="tw-w-2 tw-h-2 tw-absolute tw-pointer-events-auto tw--left-1 tw--top-1 tw-bg-blue-500"
className="tw-w-2 tw-h-2 tw-rounded-full tw-absolute tw-pointer-events-auto tw--left-1 tw--top-1 tw-bg-blue-500"
style={{ cursor: Cursor.NW_RESIZE }}
onMouseDown={(e) => {
e.stopPropagation()
@@ -1340,7 +1345,7 @@ class Widget extends React.Component {
onMouseUp={() => this.setState({ dragEnabled: true })}
/>
<div
className="tw-w-2 tw-h-2 tw-absolute tw-pointer-events-auto tw--right-1 tw--top-1 tw-bg-blue-500"
className="tw-w-2 tw-h-2 tw-rounded-full tw-absolute tw-pointer-events-auto tw--right-1 tw--top-1 tw-bg-blue-500"
style={{ cursor: Cursor.SW_RESIZE }}
onMouseDown={(e) => {
e.stopPropagation()
@@ -1351,7 +1356,7 @@ class Widget extends React.Component {
onMouseUp={() => this.setState({ dragEnabled: true })}
/>
<div
className="tw-w-2 tw-h-2 tw-absolute tw-pointer-events-auto tw--left-1 tw--bottom-1 tw-bg-blue-500"
className="tw-w-2 tw-h-2 tw-rounded-full tw-absolute tw-pointer-events-auto tw--left-1 tw--bottom-1 tw-bg-blue-500"
style={{ cursor: Cursor.SW_RESIZE }}
onMouseDown={(e) => {
e.stopPropagation()
@@ -1362,7 +1367,7 @@ class Widget extends React.Component {
onMouseUp={() => this.setState({ dragEnabled: true })}
/>
<div
className="tw-w-2 tw-h-2 tw-absolute tw-pointer-events-auto tw--right-1 tw--bottom-1 tw-bg-blue-500"
className="tw-w-2 tw-h-2 tw-rounded-full tw-absolute tw-pointer-events-auto tw--right-1 tw--bottom-1 tw-bg-blue-500"
style={{ cursor: Cursor.SE_RESIZE }}
onMouseDown={(e) => {
e.stopPropagation()

2
src/components/draggable/draggable.js
View File

@@ -20,7 +20,7 @@ const DraggableWrapper = memo(({dragElementType, dragWidgetClass=null, currentPo
const posMetaData = {
dragStartCursorPos: {x: clientX, y: clientY},
initialPos: {x: draggableRect.x, y: draggableRect.y}
initialPos: {x: draggableRect.left, y: draggableRect.top}
}
setPosMetaData(posMetaData)

2
src/frameworks/customtk/widgets/base.js
View File

@@ -104,6 +104,8 @@ export class CustomTkBase extends Widget {
return {}
}
super.setParentLayout(layout)
const {layout: parentLayout, direction, gap} = layout
// show attributes related to the layout manager

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

@@ -101,6 +101,7 @@ export class TkinterBase extends Widget {
if (!layout){
return {}
}
super.setParentLayout(layout)
const {layout: parentLayout, direction, gap} = layout