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

added panToWidget on Double click tree view

Browse Source
This commit is contained in:
paul
2025-03-10 11:58:27 +05:30
parent 16bfd244e6
commit cce577add3
4 changed files with 78 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/canvas/canvas.js
View File

@@ -554,6 +554,39 @@ class Canvas extends React.Component {
}, this.applyTransform)
}
setPan = (x, y) => {
this.setState({
currentTranslate: {x, y}
})
}
panToWidget = (widgetId) => {
const widget = this.getWidgetById(widgetId).current
const canvasBoundingRect = this.getCanvasBoundingRect(); // Get the canvas dimensions
// Get widget position
const widgetRect = widget.getBoundingRect(); // Get widget's bounding box
// Calculate widget center position in canvas space
const widgetCenter = {
x: (widgetRect.left - canvasBoundingRect.left + widgetRect.width / 2) / this.state.zoom,
y: (widgetRect.top - canvasBoundingRect.top + widgetRect.height / 2) / this.state.zoom
}
// Calculate new translation to center the widget in the viewport
const newTranslate = {
x: (canvasBoundingRect.width / 2) / this.state.zoom - widgetCenter.x,
y: (canvasBoundingRect.height / 2) / this.state.zoom - widgetCenter.y
}
this.setState({
currentTranslate: newTranslate
})
}
// setSelectedWidget(selectedWidget) {
// this.setState({ selectedWidget: [selectedWidget] })
// }
@@ -1053,8 +1086,6 @@ class Canvas extends React.Component {
}
getWidgetById(id) {
console.log("ID: ", id, this.widgetRefs.current)
return this.widgetRefs.current[id]
}
@@ -1198,9 +1229,13 @@ class Canvas extends React.Component {
zoom: this.state.zoom,
pan: this.state.currentTranslate
}}
onSelect={(widgetId) => this.setSelectedWidget(this.getWidgetById(widgetId)?.current)}
onWidgetDeleteRequest={this.removeWidget}
onPanToWidget={this.panToWidget}
onWidgetUpdate={this.onActiveWidgetUpdate}
onAddChildWidget={this.handleAddWidgetChild}
onCreateWidgetRequest={this.createWidget} // create widget when dropped from sidebar
@@ -1275,7 +1310,14 @@ class Canvas extends React.Component {
}}
/>
{/* Canvas */}
<div data-canvas className={`tw-w-full tw-h-full tw-absolute ${!IS_PRODUCTION ? "tw-bg-red-300" : "tw-bg-transparent"} tw-top-0 tw-select-none`}
{/* 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"}
tw-top-0 tw-select-none
`}
style={{
transform: `translate(${this.state.currentTranslate.x}px, ${this.state.currentTranslate.y}px) scale(${this.state.zoom})`
}}
ref={this.canvasRef}>
<div className="tw-relative tw-w-full tw-h-full">
{

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

@@ -225,29 +225,29 @@ class Widget extends React.Component {
componentWillUnmount() {
}
__fixWidgetPosition = () => {
// __fixWidgetPosition = () => {
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)
// 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,
// 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,
}
// x: elementRect?.x,
// y: elementRect?.y,
// }
this.setState({
...this.state,
pos: pos
})
}
// this.setState({
// ...this.state,
// pos: pos
// })
// }
}
// }
updateState = (newState, callback) => {
@@ -394,6 +394,8 @@ class Widget extends React.Component {
selected: true
})
this.props.onSelect(this.__id)
}
deSelect() {
@@ -867,6 +869,9 @@ class Widget extends React.Component {
}
panToWidget = () => {
this.props.onPanToWidget(this.__id)
}
handleDragStart = (e, callback) => {
e.stopPropagation()