diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js
index 8b03379..8e0e9f3 100644
--- a/src/canvas/widgets/base.js
+++ b/src/canvas/widgets/base.js
@@ -31,6 +31,9 @@ class Widget extends React.Component{
this._disableResize = false
this._disableSelection = false
+ this.minSize = {width: 50, height: 50} // disable resizing below this number
+ this.maxSize = {width: 500, height: 500} // disable resizing above this number
+
this.cursor = Cursor.POINTER
this.icon = "" // antd icon name representing this widget
@@ -76,18 +79,26 @@ class Widget extends React.Component{
},
zIndex: 0,
pos: {x: 0, y: 0},
+ size: { width: 100, height: 100 },
selected: false,
- widgetName: widgetName || 'unnamed widget' // this will later be converted to variable name
+ widgetName: widgetName || 'unnamed widget', // this will later be converted to variable name
+ resizing: false,
+ resizeCorner: ""
}
this.mousePress = this.mousePress.bind(this)
this.getElement = this.getElement.bind(this)
+ this.getBoundingRect = this.getBoundingRect.bind(this)
this.isSelected = this.isSelected.bind(this)
this.getPos = this.getPos.bind(this)
this.setPos = this.setPos.bind(this)
+ this.startResizing = this.startResizing.bind(this)
+ this.handleResize = this.handleResize.bind(this)
+ this.stopResizing = this.stopResizing.bind(this)
+
}
@@ -101,10 +112,16 @@ class Widget extends React.Component{
componentDidMount(){
console.log("mounted: ")
this.elementRef.current?.addEventListener("click", this.mousePress)
+
+ this.canvas.addEventListener("mousemove", this.handleResize);
+ this.canvas.addEventListener("mouseup", this.stopResizing)
}
componentWillUnmount(){
this.elementRef.current?.removeEventListener("click", this.mousePress)
+
+ this.canvas.addEventListener("mousemove", this.handleResize);
+ this.canvas.addEventListener("mouseup", this.stopResizing)
}
// TODO: add context menu items such as delete, add etc
@@ -143,8 +160,6 @@ class Widget extends React.Component{
this.setState({
selected: false
})
- console.log("DeSelected")
-
}
isSelected(){
@@ -152,6 +167,12 @@ class Widget extends React.Component{
}
setPos(x, y){
+
+ if (this.state.resizing){
+ // don't change position when resizing the widget
+ return
+ }
+
this.setState({
pos: {x: x, y: y}
})
@@ -165,6 +186,48 @@ class Widget extends React.Component{
return this.attrs
}
+ getBoundingRect(){
+ return this.elementRef.current?.getBoundingClientRect()
+ }
+
+ getSize(){
+ const boundingRect = this.getBoundingRect()
+
+ return {width: boundingRect.width, height: boundingRect.height}
+ }
+
+ getScaleAwareDimensions() {
+ // Get the bounding rectangle
+ const rect = this.elementRef.current.getBoundingClientRect()
+
+ // Get the computed style of the element
+ const style = window.getComputedStyle(this.elementRef.current)
+
+ // Get the transform matrix
+ const transform = style.transform
+
+ // Extract scale factors from the matrix
+ let scaleX = 1
+ let scaleY = 1
+
+ if (transform && transform !== 'none') {
+ // For 2D transforms (a, c, b, d)
+ const matrix = transform.match(/^matrix\(([^,]+),[^,]+,([^,]+),[^,]+,[^,]+,[^,]+\)$/);
+
+ if (matrix) {
+ scaleX = parseFloat(matrix[1])
+ scaleY = parseFloat(matrix[2])
+ }
+ }
+
+ // Return scaled width and height
+ return {
+ width: rect.width / scaleX,
+ height: rect.height / scaleY
+ }
+ }
+
+
getWidgetFunctions(){
return this.functions
}
@@ -177,6 +240,59 @@ class Widget extends React.Component{
return this.elementRef.current
}
+ startResizing(corner, event) {
+ event.stopPropagation()
+ this.setState({ resizing: true, resizeCorner: corner })
+ }
+
+ handleResize(event) {
+ if (!this.state.resizing) return
+
+ const { resizeCorner, size, pos } = this.state
+ const deltaX = event.movementX
+ const deltaY = event.movementY
+
+ let newSize = { ...size }
+ let newPos = { ...pos }
+
+ const {width: minWidth, height: minHeight} = this.minSize
+ const {width: maxWidth, height: maxHeight} = this.maxSize
+ console.log("resizing: ", minHeight, minHeight)
+
+ switch (resizeCorner) {
+ case "nw":
+ newSize.width = Math.max(minWidth, Math.min(maxWidth, newSize.width - deltaX))
+ newSize.height = Math.max(minHeight, Math.min(maxHeight, newSize.height - deltaY))
+ newPos.x += (newSize.width !== size.width) ? deltaX : 0
+ newPos.y += (newSize.height !== size.height) ? deltaY : 0
+ break
+ case "ne":
+ newSize.width = Math.max(minWidth, Math.min(maxWidth, newSize.width + deltaX))
+ newSize.height = Math.max(minHeight, Math.min(maxHeight, newSize.height - deltaY))
+ newPos.y += (newSize.height !== size.height) ? deltaY : 0
+ break
+ case "sw":
+ newSize.width = Math.max(minWidth, Math.min(maxWidth, newSize.width - deltaX))
+ newSize.height = Math.max(minHeight, Math.min(maxHeight, newSize.height + deltaY))
+ newPos.x += (newSize.width !== size.width) ? deltaX : 0
+ break
+ case "se":
+ newSize.width = Math.max(minWidth, Math.min(maxWidth, newSize.width + deltaX))
+ newSize.height = Math.max(minHeight, Math.min(maxHeight, newSize.height + deltaY))
+ break
+ default:
+ break
+ }
+
+ this.setState({ size: newSize, pos: newPos })
+ }
+
+ stopResizing() {
+ if (this.state.resizing) {
+ this.setState({ resizing: false })
+ }
+ }
+
renderContent(){
// throw new NotImplementedError("render method has to be implemented")
return (
@@ -196,8 +312,8 @@ class Widget extends React.Component{
cursor: this.cursor,
top: `${this.state.pos.y}px`,
left: `${this.state.pos.x}px`,
- width: this.boundingRect.width,
- height: this.boundingRect.height
+ width: `${this.state.size.width}px`,
+ height: `${this.state.size.height}px`,
}
let selectionStyle = {
@@ -224,20 +340,36 @@ class Widget extends React.Component{
{this.renderContent()}
+ ${this.state.selected ? 'tw-border-2 tw-border-solid tw-border-blue-500' : 'tw-hidden'}`}>
-
- {/*
e.preventDefault()} className="tw-text-sm tw-w-fit tw-min-w-[100px] tw-absolute tw--top-2">
- {this._widgetName}
-
*/}
- { this.state.selected &&
-
- }
+
+
this.startResizing("nw", e)}
+ />
+
this.startResizing("ne", e)}
+ />
+
this.startResizing("sw", e)}
+ />
+
this.startResizing("se", e)}
+ />
+