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

working on resize handler fix

Browse Source
This commit is contained in:
paul
2025-03-06 21:38:23 +05:30
parent 2898bdd817
commit 9439eface6
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/canvas/canvas.js
View File

@@ -1055,7 +1055,6 @@ class Canvas extends React.Component {
})
}
return (
<ComponentType
@@ -1133,7 +1132,7 @@ class Canvas extends React.Component {
}}
/>
{/* Canvas */}
<div data-canvas className="tw-w-full tw-h-full tw-absolute tw-top-0 tw-select-none"
<div data-canvas className="tw-w-full tw-h-full tw-absolute tw-bg-red-300 tw-top-0 tw-select-none"
ref={this.canvasRef}>
<div className="tw-relative tw-w-full tw-h-full">
{

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

@@ -213,6 +213,12 @@ class Widget extends React.Component {
this.load(this.props.initialData || {}) // load the initial data
}
componentDidUpdate(prevProps, prevState) {
if (prevProps !== this.props) {
console.log("Updated sstare: ", this.state.pos)
this.canvasMetaData = this.props.canvasMetaData
}
}
componentWillUnmount() {
}
@@ -1162,7 +1168,9 @@ class Widget extends React.Component {
// const boundingRect = this.getBoundingRect
const {zoom: canvasPan, pan: canvasZoom} = this.canvasMetaData
const {zoom: canvasZoom, pan: canvasPan} = this.canvasMetaData
console.log("Zooming and stuff: ", canvasZoom, canvasPan)
// FIXME: if the parent container has tw-overflow-none, then the resizable indicator are also hidden
return (
@@ -1174,6 +1182,7 @@ class Widget extends React.Component {
const canvasRect = this.canvas.getBoundingClientRect()
const elementRect = this.getBoundingRect()
console.log("Canvas rect: ", canvasRect)
return (
<div data-widget-id={this.__id}
@@ -1247,11 +1256,14 @@ class Widget extends React.Component {
// top: (this.state.pos.y - 10 - canvasPan.y) / canvasZoom,
// left: (this.state.pos.x - 10),
// top: (this.state.pos.y - 10),
// left: ((elementRect?.x || 0) - 10),
// top: ((elementRect?.y || 0) - 10),
// left: (((elementRect?.left || 0 - canvasRect.left)/canvasZoom)) - 10 - (canvasPan.x),
// top: (((elementRect?.top || 0 - canvasRect.top)/canvasZoom)) - 10 - (canvasPan.y ),
// FIXME: from here
left: ((elementRect?.left || 0) - 20 - canvasPan.x) ,
top: ((elementRect?.top || 0) - 20 - canvasPan.y) ,
// left: ((elementRect?.left || 0) - 10 - canvasPan.x) / canvasZoom ,
// top: ((elementRect?.top || 0) - 10 - canvasPan.y) / canvasZoom ,
left: 1,
top: 1,
position: "fixed",
width: this.state.size.width + 20,
height: this.state.size.height + 20,
zIndex: 1,
@@ -1267,7 +1279,7 @@ class Widget extends React.Component {
/>
<div
className="tw-w-2 tw-h-2 tw-absolute tw-pointer-events-auto tw--left-1 tw--top-1 tw-bg-blue-500"
className="tw-w-2 tw-bg-red-500 tw-h-2 tw-absolute tw-pointer-events-auto tw--left-1 tw--top-1 tw-bg-blue-500"
style={{ cursor: Cursor.NW_RESIZE }}
onMouseDown={(e) => {
e.stopPropagation()