diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index 94cbce3..7b6c4f5 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -851,7 +851,8 @@ class Canvas extends React.Component { 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 = { ...dragWidgetObj, @@ -1063,6 +1064,12 @@ class Canvas extends React.Component { ref={this.widgetRefs[id]} initialData={initialData} canvasRef={this.canvasContainerRef} + + canvasMetaData={{ + zoom: this.state.zoom, + pan: this.state.currentTranslate + }} + onWidgetUpdate={this.onActiveWidgetUpdate} onAddChildWidget={this.handleAddWidgetChild} onCreateWidgetRequest={this.createWidget} // create widget when dropped from sidebar diff --git a/src/canvas/context/selectedWidgetContext.js b/src/canvas/context/selectedWidgetContext.js new file mode 100644 index 0000000..8600265 --- /dev/null +++ b/src/canvas/context/selectedWidgetContext.js @@ -0,0 +1,18 @@ +import React, { createContext, useContext, useState } from 'react'; + +const selectedWidgetContext = createContext() + +export const useSelectedWidgetContext = () => useContext(selectedWidgetContext) + +// NOTE: not in use +export const SelectedWidgetProvider = ({ children }) => { + const [selectedWidget, setSelectedWidget] = useState(null) + + // const [] + + return ( + + {children} + + ) +} diff --git a/src/canvas/resizeContainer.js b/src/canvas/resizeContainer.js index 3a04150..355497d 100644 --- a/src/canvas/resizeContainer.js +++ b/src/canvas/resizeContainer.js @@ -16,6 +16,8 @@ const ResizeWidgetContainer = ({selectedWidget, onResize}) => { const [pos, setPos] = useState({x: 0, y: 0}) const [size, setSize] = useState({width: 0, height: 0}) + console.log("selected widget: ", selectedWidget) + useEffect(() => { if (selectedWidget){ @@ -25,15 +27,15 @@ const ResizeWidgetContainer = ({selectedWidget, onResize}) => { console.log("selected widget resizable: ", selectedWidget) - }, [selectedWidget, selectedWidget?.getPos(), selectedWidget?.getSize()]) - + }, [selectedWidget]) + console.log("pos: ", pos, size) return ( -
{ + + if (this.state.parentLayout?.layout === Layouts.FLEX || this.state.parentLayout?.layout === Layouts.GRID ){ + const elementRect = this.elementRef.current.getBoundingClientRect() + const {pan: canvasPan, zoom: canvasZoom} = this.canvasMetaData + console.log("elemnt rect: ", elementRect) + + + const pos = { // if the layout is flex or grid the position should be the where it stays + // x: ((elementRect?.x || 0) - canvasPan.x) / canvasZoom, + // y: ((elementRect?.y || 0) - canvasPan.y) / canvasZoom, + + x: elementRect?.x, + y: elementRect?.y, + } + + this.setState({ + ...this.state, + pos: pos + }) + } + + } + updateState = (newState, callback) => { // FIXME: maximum recursion error when updating size, color etc @@ -547,12 +573,13 @@ class Widget extends React.Component { } if (layout === Layouts.FLEX || layout === Layouts.GRID){ - + + updates = { ...updates, - positionType: PosType.NONE + positionType: PosType.NONE, } - + }else if (layout === Layouts.PLACE){ updates = { ...updates, @@ -750,9 +777,13 @@ class Widget extends React.Component { if (parentLayout?.layout === Layouts.FLEX || parentLayout?.layout === Layouts.GRID){ + const elementRect = this.elementRef.current.getBoundingClientRect() + const {pan: canvasPan, zoom: canvasZoom} = this.canvasMetaData + console.log("elemnt rect2: ", elementRect) + layoutUpdates = { ...layoutUpdates, - positionType: PosType.NONE + positionType: PosType.NONE, } }else if (parentLayout?.layout === Layouts.PLACE){ @@ -1121,7 +1152,7 @@ class Widget extends React.Component { const posMetaData = { dragStartCursorPos: {x: clientX, y: clientY}, - initialPos: this.getPos() + initialPos: {...this.state.pos} } setPosMetaData(posMetaData) @@ -1131,6 +1162,8 @@ class Widget extends React.Component { // const boundingRect = this.getBoundingRect + const {zoom: canvasPan, pan: canvasZoom} = this.canvasMetaData + // FIXME: if the parent container has tw-overflow-none, then the resizable indicator are also hidden return ( @@ -1138,7 +1171,10 @@ class Widget extends React.Component { { ({ draggedElement, widgetClass, onDragStart, onDragEnd, overElement, setOverElement, setPosMetaData }) => { - + const canvasRect = this.canvas.getBoundingClientRect() + + const elementRect = this.getBoundingRect() + return (
} {/* FIXME: the resize handles get clipped in parent container */} -
+ >
{/* ${this.state.isDragging ? "tw-pointer-events-none" : "tw-pointer-events-auto"} */}
{ e.stopPropagation() @@ -1233,7 +1278,7 @@ class Widget extends React.Component { onMouseUp={() => this.setState({ dragEnabled: true })} />
{ e.stopPropagation() @@ -1244,7 +1289,7 @@ class Widget extends React.Component { onMouseUp={() => this.setState({ dragEnabled: true })} />
{ e.stopPropagation() @@ -1255,7 +1300,7 @@ class Widget extends React.Component { onMouseUp={() => this.setState({ dragEnabled: true })} />
{ e.stopPropagation() diff --git a/src/contexts/resizeContext.js b/src/contexts/resizeContext.js new file mode 100644 index 0000000..e69de29 diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js index 1d3f60e..68dc7bc 100644 --- a/src/frameworks/tkinter/widgets/base.js +++ b/src/frameworks/tkinter/widgets/base.js @@ -344,6 +344,8 @@ export class TkinterBase extends Widget { */ load(data, callback=null){ + // TODO: call the base widget + if (Object.keys(data).length === 0) return // no data to load data = {...data} // create a shallow copy @@ -412,6 +414,7 @@ export class TkinterBase extends Widget { }) + }