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

bug fixes related to styling

Browse Source
This commit is contained in:
paul
2024-10-01 11:22:45 +05:30
parent f8dbd10231
commit ee8b2a0cae
13 changed files with 84 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -5,6 +5,9 @@
/.pnp
.pnp.js
.env-cmdrc.json
build
python-tests/
# testing

4
notes.md
View File

@@ -6,4 +6,6 @@
### F\*CK Javascript, why the fu\*k, this.bind(this), classes sucks in js, you can also use arrow functions, but you won't be able to override it in the subclass, because arrow functions, inherits from the surrounding context.
### F\*CK Javascript, why the fu\*k, this.bind(this), classes sucks in js, you can also use arrow functions, but you won't be able to override it in the subclass, because arrow functions, inherits from the surrounding context.
## Running a build: serve -s build

30
package-lock.json generated
View File

@@ -20,6 +20,7 @@
"antd": "^5.20.0",
"autoprefixer": "^10.4.20",
"dom-to-image-more": "^3.4.5",
"env-cmd": "^10.1.0",
"fabric": "^6.1.0",
"file-saver": "^2.0.5",
"jszip": "^3.10.1",
@@ -8514,6 +8515,29 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/env-cmd": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/env-cmd/-/env-cmd-10.1.0.tgz",
"integrity": "sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==",
"dependencies": {
"commander": "^4.0.0",
"cross-spawn": "^7.0.0"
},
"bin": {
"env-cmd": "bin/env-cmd.js"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/env-cmd/node_modules/commander": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
"engines": {
"node": ">= 6"
}
},
"node_modules/error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -18726,9 +18750,9 @@
}
},
"node_modules/rollup": {
"version": "2.79.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
"integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
"version": "2.79.2",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
"integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
"bin": {
"rollup": "dist/bin/rollup"
},

1
package.json
View File

@@ -15,6 +15,7 @@
"antd": "^5.20.0",
"autoprefixer": "^10.4.20",
"dom-to-image-more": "^3.4.5",
"env-cmd": "^10.1.0",
"fabric": "^6.1.0",
"file-saver": "^2.0.5",
"jszip": "^3.10.1",

5
public/index.html
View File

@@ -18,13 +18,13 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LN34DDJFPS"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_ANALYTICS_SCRIPT_ID%"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-LN34DDJFPS');
gtag('config', '%REACT_APP_ANALYTICS_SCRIPT_ID%');
</script>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
@@ -42,4 +42,5 @@
<div id="root"></div>
</body>
<!-- Author: Paul Github: PaulleDemon -->
</html>

23
src/App.js
View File

@@ -1,4 +1,8 @@
import { useRef, useState } from 'react'
/**
* Author: Paul
* Github: PaulleDemon
*/
import { useEffect, useRef, useState } from 'react'
import { LayoutFilled, ProductFilled, CloudUploadOutlined, DatabaseFilled } from "@ant-design/icons"
// import { DndContext, useSensors, useSensor, PointerSensor, closestCorners, DragOverlay, rectIntersection } from '@dnd-kit/core'
@@ -25,6 +29,9 @@ import TkinterWidgets from './frameworks/tkinter/sidebarWidgets'
import TkinterPluginWidgets from './frameworks/tkinter/sidebarPlugins'
import generateTkinterCode from './frameworks/tkinter/engine/code'
import TkMainWindow from './frameworks/tkinter/widgets/mainWindow'
import CTkMainWindow from './frameworks/customtk/widgets/mainWindow'
function App() {
@@ -69,6 +76,18 @@ function App() {
}
]
useEffect(() => {
if (UIFramework === FrameWorks.TKINTER){
canvasRef?.current?.createWidget(TkMainWindow)
}else if (UIFramework === FrameWorks.CUSTOMTK){
canvasRef?.current?.createWidget(CTkMainWindow)
}
}, [UIFramework])
// const handleDragStart = (event) => {
// console.log("Drag start: ", event)
// const draggedItem = sidebarWidgets.find((item) => item.name === event.active.id)
@@ -168,6 +187,8 @@ function App() {
if (framework === FrameWorks.TKINTER){
setSidebarPlugins(TkinterPluginWidgets)
setSidebarWidgets(TkinterWidgets)
}else if (framework === FrameWorks.CUSTOMTK){
setSidebarPlugins(CustomTkPluginWidgets)
setSidebarWidgets(CustomTkWidgets)

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

@@ -436,19 +436,19 @@ class Widget extends React.Component {
* @param {any} value
*/
setAttrValue(path, value) {
const keys = path.split('.')
const lastKey = keys.pop()
// 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 })

2
src/frameworks/customtk/widgets/mainWindow.js
View File

@@ -34,8 +34,8 @@ class MainWindow extends CustomTkBase{
}
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#23272D")
super.componentDidMount()
// this.setWidgetName("main") // Don't do this as this will cause conflicts while loading names
}

2
src/frameworks/customtk/widgets/toplevel.js
View File

@@ -33,8 +33,8 @@ class TopLevel extends Widget{
}
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#23272D")
super.componentDidMount()
}
generateCode(variableName, parent){

14
src/frameworks/tkinter/widgets/mainWindow.js
View File

@@ -33,10 +33,18 @@ class MainWindow extends TkinterBase{
}
// componentDidMount(){
// super.componentDidMount()
// //this.setAttrValue("styling", { backgroundColor: "#E4E2E2" }) refactor to something like this?
// this.setAttrValue("styling.backgroundColor", "#E4E2E2")
// console.log("mounted: ", this.state)
// }
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
// this.setWidgetName("main") // Don't do this as this will cause conflicts while loading names
super.componentDidMount()
}
generateCode(variableName, parent){
@@ -80,7 +88,7 @@ class MainWindow extends TkinterBase{
</div>
</div>
<div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start"
style={this.state.widgetInnerStyling}>
style={this.getInnerRenderStyling()}>
{this.props.children}
</div>
</div>

4
src/frameworks/tkinter/widgets/optionMenu.js
View File

@@ -44,10 +44,10 @@ class OptionMenu extends TkinterWidgetBase{
}
}
componentDidMount(){
super.componentDidMount()
this.setWidgetInnerStyle("backgroundColor", "#fff")
this.setWidgetInnerStyle("backgroundColor", "#E4E2E2")
}
generateCode(variableName, parent){

2
src/frameworks/tkinter/widgets/toplevel.js
View File

@@ -33,8 +33,8 @@ class TopLevel extends Widget{
}
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
super.componentDidMount()
}
generateCode(variableName, parent){

8
src/sidebar/sidebar.js
View File

@@ -1,3 +1,7 @@
/**
* Author: Paul
* Github: PaulleDemon
*/
import { useEffect, useRef, useMemo, useState } from "react";
import { BookOutlined, CloseCircleFilled, CrownFilled, GithubFilled, ShareAltOutlined } from "@ant-design/icons";
@@ -125,9 +129,9 @@ function Sidebar({tabs}){
</div>
</div>
);
)
}
export default Sidebar;
export default Sidebar