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

fix: added initialPosition to createWidget

Browse Source
This commit is contained in:
paul
2025-03-16 15:43:41 +05:30
parent 5f2d80755e
commit 81ddfc58c5
6 changed files with 135 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/canvas/canvas.js
View File

@@ -761,8 +761,8 @@ class Canvas extends React.Component {
}
// if the widget is being dropped from the sidebar, use the info to create the widget first
this.createWidget(widgetClass, ({ id, widgetRef }) => {
widgetRef.current.setPos(finalPosition.x, finalPosition.y)
this.createWidget(widgetClass, {x: finalPosition.x, y: finalPosition.y},({ id, widgetRef }) => {
// widgetRef.current.setPos(finalPosition.x, finalPosition.y)
})
} else if ([WidgetContainer.CANVAS, WidgetContainer.WIDGET].includes(container)) {
@@ -1045,7 +1045,7 @@ class Canvas extends React.Component {
*
* @param {Widget} widgetComponentType - don't pass <Widget /> instead pass Widget object/class
*/
createWidget(widgetComponentType, callback) {
createWidget(widgetComponentType, initialPos={x: 0, y: 0}, callback,) {
if (!isSubClassOfWidget(widgetComponentType)) {
throw new Error("widgetComponentType must be a subclass of Widget class")
@@ -1067,7 +1067,7 @@ class Canvas extends React.Component {
widgetType: widgetComponentType,
children: [],
parent: "",
initialData: {} // useful for serializing and deserializing (aka, saving and loading)
initialData: {pos: initialPos} // useful for serializing and deserializing (aka, saving and loading)
}
const widgets = [...this.widgets, newWidget] // don't add the widget refs in the state
@@ -1180,7 +1180,7 @@ class Canvas extends React.Component {
}
onActiveWidgetUpdate(widgetId) {
// TODO: remove this as it may no longer be required also remove toolbarAttrs
if (!this.selectedWidget || widgetId !== this.selectedWidget.__id)
return

43
src/canvas/toolbar.js
View File

@@ -12,6 +12,7 @@ import { Layouts } from "./constants/layouts.js"
import { DynamicRadioInputList } from "../components/inputs.js"
import { useFileUploadContext } from "../contexts/fileUploadContext.js"
import { AudioOutlined, FileImageOutlined, FileTextOutlined, VideoCameraOutlined } from "@ant-design/icons"
import { useWidgetContext } from "./context/widgetContext.js"
// FIXME: Maximum recursion error
@@ -22,16 +23,44 @@ import { AudioOutlined, FileImageOutlined, FileTextOutlined, VideoCameraOutlined
* @param {string} widgetType
* @param {object} attrs - widget attributes
*/
const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
const CanvasToolBar = memo(({ isOpen, widgetType, }) => {
// const { activeWidgetAttrs } = useActiveWidget()
const {activeWidget} = useWidgetContext()
console.log("active widget: ", activeWidget)
// console.log("active widget context: ", activeWidgetAttrs)
const [toolbarOpen, setToolbarOpen] = useState(isOpen)
const [toolbarAttrs, setToolbarAttrs] = useState(attrs)
const [toolbarAttrs, setToolbarAttrs] = useState({})
const {uploadedAssets} = useFileUploadContext()
useEffect(() => {
const stateUpdatedCallback = () => {
setToolbarAttrs(activeWidget.getToolbarAttrs())
}
if (activeWidget){
activeWidget.stateChangeSubscriberCallback(stateUpdatedCallback)
// console.log("sytate update: ", activeWidget.getToolbarAttrs())
setToolbarAttrs(activeWidget.getToolbarAttrs())
}
}, [activeWidget]) // , activeWidget?.state
useEffect(() => {
setToolbarOpen(isOpen)
}, [isOpen])
// useEffect(() => {
// setToolbarAttrs(activeWidget.getToolbarAttrs())
// }, [])
const uploadItems = useMemo(() => {
const returnComponentBasedOnFileType = (file) => {
@@ -81,14 +110,6 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
}, [uploadedAssets])
useEffect(() => {
setToolbarOpen(isOpen)
}, [isOpen])
useEffect(() => {
setToolbarAttrs(attrs)
}, [attrs])
const handleChange = (value, callback) => {
if (callback) {
@@ -407,7 +428,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
>
<h3 className="tw-text-lg tw-text-center tw-bg-[#FAFAFA] tw-border-[1px] tw-border-solid tw-border-[#D9D9D9]
tw-p-1 tw-px-2 tw-rounded-md tw-font-medium">
{capitalize(`${widgetType || ""}`).replace(/_/g, " ")}
{capitalize(`${activeWidget?.getDisplayName() || ""}`).replace(/_/g, " ")}
</h3>
<div className="tw-flex tw-flex-col tw-gap-2">

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

@@ -202,6 +202,8 @@ class Widget extends React.Component {
this.getRenderSize = this.getRenderSize.bind(this)
this.getInnerRenderStyling = this.getInnerRenderStyling.bind(this)
this.stateUpdateCallback = null // allowing other components such as toolbar to subscribe to changes in this widget
}
componentDidMount() {
@@ -227,6 +229,12 @@ class Widget extends React.Component {
}
stateChangeSubscriberCallback = (callback) => {
// NOTE: don't subscribe to multiple callbacks, only the last one will work
// allowing other components such as toolbar to subscribe to changes in this widget
this.stateUpdateCallback = callback
}
/**
* This function will notify the canvas of the updates to the widgets
*
@@ -234,15 +242,18 @@ class Widget extends React.Component {
* @param {*} callback - callback to run after setState
*/
updateState = (newState, callback) => {
console.log("updatstate called: ", newState, this.state.attrs)
// FIXME: maximum recursion error when updating size, color etc
this.setState(newState, () => {
console.log("updatinhg./..: ", this.state)
const { onWidgetUpdate } = this.props
if (onWidgetUpdate) {
onWidgetUpdate(this.__id)
}
if (this.stateUpdateCallback)
this.stateUpdateCallback()
// if (onWidgetUpdate) {
// onWidgetUpdate(this.__id)
// }
// const { activeWidgetId, updateToolAttrs } = this.context
@@ -318,7 +329,7 @@ class Widget extends React.Component {
}
forceRerender = () => {
this.forceUpdate(() => console.log("forced"))
this.forceUpdate()
}
// TODO: add context menu items such as delete, add etc
@@ -487,9 +498,9 @@ class Widget extends React.Component {
* @param {string} path - path to the key, eg: styling.backgroundColor
* @param {any} value
*/
setAttrValue(path, value) {
setAttrValue(path, value, callback) {
this.setState((prevState) => { // since the setState is Async only the prevState contains the latest state
this.updateState((prevState) => { // since the setState is Async only the prevState contains the latest state
const keys = path.split('.')
const lastKey = keys.pop()
@@ -511,9 +522,7 @@ class Widget extends React.Component {
return { attrs: newAttrs }
}, () => {
console.log("new data updated: ", this.state.attrs)
})
}, callback)
}
/**
@@ -533,7 +542,6 @@ class Widget extends React.Component {
return undefined // Return undefined if the key doesn't exist
}
}
console.log("found value: ", nestedObject, path)
return nestedObject?.value // Return the value (assuming it has a 'value' field)
}
@@ -822,7 +830,7 @@ class Widget extends React.Component {
data = {...data} // create a shallow copy
const {attrs, parentLayout, ...restData} = data
const {attrs={}, pos={x: 0, y: 0}, parentLayout=null, ...restData} = data
let layoutUpdates = {
@@ -846,7 +854,8 @@ class Widget extends React.Component {
const newData = {
...restData,
...layoutUpdates
...layoutUpdates,
pos
}
this.setState(newData, () => {
@@ -1079,7 +1088,17 @@ class Widget extends React.Component {
// initialPos: newInitialPos,
// }
// console.log("Dropped on Sidebar: ", this.__id)
this.props.onCreateWidgetRequest(widgetClass, ({ id, widgetRef }) => {
const parentRect = this.getBoundingRect()
const {zoom, pan} = this.props.canvasMetaData
let initialPos = {
x: (e.clientX - parentRect.left) / zoom,
y: (e.clientY - parentRect.top) / zoom,
}
this.props.onCreateWidgetRequest(widgetClass, {x: initialPos.x, y: initialPos.y},({ id, widgetRef }) => {
this.props.onAddChildWidget({
event: e,
parentWidgetId: this.__id,