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

fix: now can drop directly from sidebar into the widget

Browse Source
This commit is contained in:
paul
2024-09-22 15:00:34 +05:30
parent 740a5400f8
commit 542abb9dbb
2 changed files with 33 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/canvas/canvas.js
View File

@@ -25,6 +25,7 @@ import { ActiveWidgetContext, ActiveWidgetProvider, withActiveWidget } from "./a
import { DragWidgetProvider } from "./widgets/draggableWidgetContext"
import { PosType } from "./constants/layouts"
import WidgetContainer from "./constants/containers"
import { isSubClassOfWidget } from "../utils/widget"
// const DotsBackground = require("../assets/background/dots.svg")
@@ -106,6 +107,8 @@ class Canvas extends React.Component {
this.clearSelections = this.clearSelections.bind(this)
this.clearCanvas = this.clearCanvas.bind(this)
this.createWidget = this.createWidget.bind(this)
// this.updateCanvasDimensions = this.updateCanvasDimensions.bind(this)
}
@@ -625,19 +628,20 @@ class Canvas extends React.Component {
* @param {object} dragElement
* @param {boolean} create - if create is set to true the widget will be created before adding to the child tree
*/
handleAddWidgetChild = ({ parentWidgetId, dragElementID, create = false, swap = false }) => {
handleAddWidgetChild = ({ parentWidgetId, dragElementID, swap = false }) => {
// TODO: creation of the child widget if its not created
// widgets data structure { id, widgetType: widgetComponentType, children: [], parent: "" }
const dropWidgetObj = this.findWidgetFromListById(parentWidgetId)
// Find the dragged widget object
let dragWidgetObj = this.findWidgetFromListById(dragElementID)
console.log("Drag widget obj: ", dragWidgetObj)
if (dropWidgetObj && dragWidgetObj) {
const dragWidget = this.widgetRefs[dragWidgetObj.id]
const dragData = dragWidget.current.serialize()
if (swap) {
// If swapping, we need to find the common parent
const grandParentWidgetObj = this.findWidgetFromListById(dropWidgetObj.parent)
@@ -704,6 +708,11 @@ class Canvas extends React.Component {
* @param {Widget} widgetComponentType - don't pass <Widget /> instead pass Widget object/class
*/
createWidget(widgetComponentType, callback) {
if (!isSubClassOfWidget(widgetComponentType)){
throw new Error("widgetComponentType must be a subclass of Widget class")
}
const widgetRef = React.createRef()
const id = `${widgetComponentType.widgetType}_${UID()}`
@@ -933,6 +942,7 @@ class Canvas extends React.Component {
canvasRef={this.canvasContainerRef}
onWidgetUpdate={this.onActiveWidgetUpdate}
onAddChildWidget={this.handleAddWidgetChild}
onCreateWidgetRequest={this.createWidget} // create widget when dropped from sidebar
onWidgetResizing={(resizeSide) => this.setState({ widgetResizing: resizeSide })}
>
{/* Render children inside the parent with layout applied */}

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

@@ -187,7 +187,7 @@ class Widget extends React.Component {
updateState = (newState, callback) => {
// FIXME: maximum recursion error when updating size
// FIXME: maximum recursion error when updating size, color etc
this.setState(newState, () => {
const { onWidgetUpdate } = this.props
@@ -368,23 +368,22 @@ class Widget extends React.Component {
* @param {any} value
*/
setAttrValue(path, value) {
this.setState((prevState) => {
// Split the path to access the nested property (e.g., "styling.backgroundColor")
const keys = path.split('.')
const lastKey = keys.pop()
// Traverse the state and update the nested value immutably
let newAttrs = { ...prevState.attrs }
let nestedObject = newAttrs
const keys = path.split('.')
const lastKey = keys.pop()
keys.forEach(key => {
nestedObject[key] = { ...nestedObject[key] } // Ensure immutability
nestedObject = nestedObject[key]
})
nestedObject[lastKey].value = value
return { attrs: newAttrs }
// Traverse the state and update the nested value immutably
let newAttrs = { ...this.state.attrs }
let nestedObject = newAttrs
keys.forEach(key => {
nestedObject[key] = { ...nestedObject[key] } // Ensure immutability
nestedObject = nestedObject[key]
})
nestedObject[lastKey].value = value
this.updateState({attrs: newAttrs})
}
/**
@@ -677,7 +676,7 @@ class Widget extends React.Component {
}
handleDropEvent = (e, draggedElement) => {
handleDropEvent = (e, draggedElement, widgetClass=null) => {
e.preventDefault()
e.stopPropagation()
// FIXME: sometimes the elements showDroppableStyle is not gone, when dropping on the same widget
@@ -731,7 +730,9 @@ class Widget extends React.Component {
}else if (container === WidgetContainer.SIDEBAR){
// console.log("Dropped on Sidebar: ", this.__id)
this.props.onAddChildWidget({parentWidgetId: this.__id, create: true}) // if dragged from the sidebar create the widget first
this.props.onCreateWidgetRequest(widgetClass, ({id, widgetRef}) => {
this.props.onAddChildWidget({parentWidgetId: this.__id, dragElementID: id}) // if dragged from the sidebar create the widget first
})
}
@@ -802,7 +803,7 @@ class Widget extends React.Component {
<DragContext.Consumer>
{
({draggedElement, onDragStart, onDragEnd, setOverElement}) => (
({draggedElement, widgetClass, onDragStart, onDragEnd, setOverElement}) => (
<div data-widget-id={this.__id}
ref={this.elementRef}
@@ -814,7 +815,7 @@ class Widget extends React.Component {
draggable={this.state.dragEnabled}
onDragOver={(e) => this.handleDragOver(e, draggedElement)}
onDrop={(e) => this.handleDropEvent(e, draggedElement)}
onDrop={(e) => this.handleDropEvent(e, draggedElement, widgetClass)}
onDragEnter={(e) => this.handleDragEnter(e, draggedElement, setOverElement)}
onDragLeave={(e) => this.handleDragLeave(e, draggedElement)}