diff --git a/.gitignore b/.gitignore index d3e63b4..62994ad 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,9 @@ /.pnp .pnp.js +.env-cmdrc.json +build + python-tests/ # testing diff --git a/notes.md b/notes.md index e735851..69cccde 100644 --- a/notes.md +++ b/notes.md @@ -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. \ No newline at end of file +### 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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9d7cfd9..39154a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" }, diff --git a/package.json b/package.json index 0277adb..216b477 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/index.html b/public/index.html index afbc9a7..eb7df24 100644 --- a/public/index.html +++ b/public/index.html @@ -18,13 +18,13 @@ - + diff --git a/src/App.js b/src/App.js index 783a937..d6bc5da 100644 --- a/src/App.js +++ b/src/App.js @@ -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) diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index b2b828a..d757740 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -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 }) diff --git a/src/frameworks/customtk/widgets/mainWindow.js b/src/frameworks/customtk/widgets/mainWindow.js index 82912a7..4e49556 100644 --- a/src/frameworks/customtk/widgets/mainWindow.js +++ b/src/frameworks/customtk/widgets/mainWindow.js @@ -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 } diff --git a/src/frameworks/customtk/widgets/toplevel.js b/src/frameworks/customtk/widgets/toplevel.js index 86c547b..446153c 100644 --- a/src/frameworks/customtk/widgets/toplevel.js +++ b/src/frameworks/customtk/widgets/toplevel.js @@ -33,8 +33,8 @@ class TopLevel extends Widget{ } componentDidMount(){ - super.componentDidMount() this.setAttrValue("styling.backgroundColor", "#23272D") + super.componentDidMount() } generateCode(variableName, parent){ diff --git a/src/frameworks/tkinter/widgets/mainWindow.js b/src/frameworks/tkinter/widgets/mainWindow.js index f3afb5f..5f8f13b 100644 --- a/src/frameworks/tkinter/widgets/mainWindow.js +++ b/src/frameworks/tkinter/widgets/mainWindow.js @@ -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{
+ style={this.getInnerRenderStyling()}> {this.props.children}
diff --git a/src/frameworks/tkinter/widgets/optionMenu.js b/src/frameworks/tkinter/widgets/optionMenu.js index fe52196..a454006 100644 --- a/src/frameworks/tkinter/widgets/optionMenu.js +++ b/src/frameworks/tkinter/widgets/optionMenu.js @@ -44,10 +44,10 @@ class OptionMenu extends TkinterWidgetBase{ } } - + componentDidMount(){ super.componentDidMount() - this.setWidgetInnerStyle("backgroundColor", "#fff") + this.setWidgetInnerStyle("backgroundColor", "#E4E2E2") } generateCode(variableName, parent){ diff --git a/src/frameworks/tkinter/widgets/toplevel.js b/src/frameworks/tkinter/widgets/toplevel.js index e312b74..35e4183 100644 --- a/src/frameworks/tkinter/widgets/toplevel.js +++ b/src/frameworks/tkinter/widgets/toplevel.js @@ -33,8 +33,8 @@ class TopLevel extends Widget{ } componentDidMount(){ - super.componentDidMount() this.setAttrValue("styling.backgroundColor", "#E4E2E2") + super.componentDidMount() } generateCode(variableName, parent){ diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js index 8dc4834..c28075b 100644 --- a/src/sidebar/sidebar.js +++ b/src/sidebar/sidebar.js @@ -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}){ - ); + ) } -export default Sidebar; \ No newline at end of file +export default Sidebar \ No newline at end of file