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}) => {
-
diff --git a/src/sidebar/pluginsContainer.js b/src/sidebar/pluginsContainer.js index 848ff09..e7a84ec 100644 --- a/src/sidebar/pluginsContainer.js +++ b/src/sidebar/pluginsContainer.js @@ -78,7 +78,7 @@ function PluginsContainer({sidebarContent, onWidgetsUpdate}){ target="_blank" rel="noopener noreferrer" className="tw-flex tw-mt-6 btn" > - Request new plugin support + Request new plugin ) diff --git a/src/sidebar/treeviewContainer.js b/src/sidebar/treeviewContainer.js index ea2b77d..26ec959 100644 --- a/src/sidebar/treeviewContainer.js +++ b/src/sidebar/treeviewContainer.js @@ -18,7 +18,7 @@ function transformWidgets(widgets, widgetRefs, isTopLevel=true) { isTopLevel: isTopLevel, widgetRef: widgetRefs.current[widget.id], children: widget.children.length > 0 ? transformWidgets(widget.children, widgetRefs, false) : [] - })); + })) } @@ -62,6 +62,13 @@ function TreeviewContainer() { + { + Object.keys(transformedContent || {}).length === 0 && +
+ Start adding widgets to view it in tree view +
+ } + ) diff --git a/src/sidebar/utils/share.js b/src/sidebar/utils/share.js index 738bf53..bfc0ff0 100644 --- a/src/sidebar/utils/share.js +++ b/src/sidebar/utils/share.js @@ -45,6 +45,10 @@ function Share({children, className=""}){ footer={null} open={shareModalOpen}> +
+ Share and help speed up development +
+