diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index e79dad2..db664d4 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -734,16 +734,28 @@ class Canvas extends React.Component { const canvasBoundingRect = this.getCanvasBoundingRect() // calculate the initial offset from the div to the cursor grab + // const initialOffset = { + // x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom - this.state.currentTranslate.x) - initialPos.x, + // y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom - this.state.currentTranslate.y) - initialPos.y + // } + const initialOffset = { - x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom - this.state.currentTranslate.x) - initialPos.x, - y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom - this.state.currentTranslate.y) - initialPos.y + 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) } + console.log("initial offset:") + // finalPosition = { // x: finalPosition.x - initialOffset.x - this.state.currentTranslate.x, // y: finalPosition.y - initialOffset.y - this.state.currentTranslate.y // } + finalPosition = { + x: finalPosition.x - initialOffset.x, + y: finalPosition.y - initialOffset.y + } + let widgetId = draggedElement.getAttribute("data-widget-id") const widgetObj = this.getWidgetById(widgetId) @@ -927,9 +939,14 @@ class Canvas extends React.Component { // } // TODO: add offset to get the cursor to the correct div + // const initialOffset = { + // x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom - this.state.currentTranslate.x) - initialPos.x, + // y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom - this.state.currentTranslate.y) - initialPos.y + // } + const initialOffset = { - x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom - this.state.currentTranslate.x) - initialPos.x, - y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom - this.state.currentTranslate.y) - initialPos.y + 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) } @@ -943,6 +960,12 @@ class Canvas extends React.Component { // y: (finalPosition.y - parentRect.top) / 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 @@ -1081,7 +1104,7 @@ class Canvas extends React.Component { let activeWidgets = removeDuplicateObjects([...widgets, this.selectedWidget], "__id") - this.selectedWidget(null) + this.setSelectedWidget(null) this.setState({ toolbarAttrs: null, diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index fd8e290..4776bd0 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -1200,17 +1200,17 @@ class Widget extends React.Component { y: elementRect.top - canvasInnerRect.top } - let parent = this.props.parentWidgetRef?.current; + // 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 + // 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 - } + // // Move up to the next parent (if any) + // parent = parent.parentWidgetRef?.current + // } const posMetaData = { dragStartCursorPos: {x: clientX, y: clientY}, @@ -1232,7 +1232,7 @@ class Widget extends React.Component { ({ draggedElement, widgetClass, onDragStart, onDragEnd, overElement, setOverElement, posMetaData, setPosMetaData }) => { // const canvasRect = this.canvas.getBoundingClientRect() - const canvasRectInner = this.props.canvasInnerContainerRef?.current.getBoundingClientRect() + const canvasRectInner = this.props.canvasInnerContainerRef?.current?.getBoundingClientRect() const elementRect = this.getBoundingRect() diff --git a/src/components/cards.js b/src/components/cards.js index 910de55..4e99901 100644 --- a/src/components/cards.js +++ b/src/components/cards.js @@ -183,7 +183,7 @@ export const TreeViewCard = memo(({widgetRef, title, isTopLevel}) => {