diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index 8e9d0f5..924a061 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -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 */} -
{ - 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 { />
{ e.stopPropagation() @@ -1340,7 +1345,7 @@ class Widget extends React.Component { onMouseUp={() => this.setState({ dragEnabled: true })} />
{ e.stopPropagation() @@ -1351,7 +1356,7 @@ class Widget extends React.Component { onMouseUp={() => this.setState({ dragEnabled: true })} />
{ e.stopPropagation() @@ -1362,7 +1367,7 @@ class Widget extends React.Component { onMouseUp={() => this.setState({ dragEnabled: true })} />
{ e.stopPropagation() diff --git a/src/components/draggable/draggable.js b/src/components/draggable/draggable.js index b51bdbd..5eac92f 100644 --- a/src/components/draggable/draggable.js +++ b/src/components/draggable/draggable.js @@ -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) diff --git a/src/frameworks/customtk/widgets/base.js b/src/frameworks/customtk/widgets/base.js index fb18691..3b74899 100644 --- a/src/frameworks/customtk/widgets/base.js +++ b/src/frameworks/customtk/widgets/base.js @@ -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 diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js index 9a2ea34..35bfee7 100644 --- a/src/frameworks/tkinter/widgets/base.js +++ b/src/frameworks/tkinter/widgets/base.js @@ -101,6 +101,7 @@ export class TkinterBase extends Widget { if (!layout){ return {} } + super.setParentLayout(layout) const {layout: parentLayout, direction, gap} = layout