Can now create widgets through the GUI

EliCDavis · Sep 27, 2024 · b567d1e · b567d1e
1 parent b651641
commit b567d1e
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 33 deletions.
diff --git a/src/node.ts b/src/node.ts
@@ -15,6 +15,12 @@ import { nodeFlowGroup } from "./nodes/subsystem";
 import { SetStringPopup } from "./popups/string";
 import { ButtonWidget } from "./widgets/button";
 import { FormPopup } from "./popups/form";
+import { NumberWidget } from "./widgets/number";
+import { StringWidget } from "./widgets/string";
+import { ToggleWidget } from "./widgets/toggle";
+import { ColorWidget } from "./widgets/color";
+import { SliderWidget } from "./widgets/slider";
+import { ImageWidget } from "./widgets/image";
 
 type AnyPropertyChangeCallback = (propertyName: string, oldValue: any, newValue: any) => void
 type PropertyChangeCallback = (oldValue: any, newValue: any) => void
@@ -302,6 +308,100 @@ export class FlowNode {
         }).Show()
     }
 
+    #widgetSubmenu(): ContextMenuConfig {
+        return {
+            name: "Widget",
+            items: [
+                {
+                    name: "Button",
+                    callback: this.#popupNewButtonWidget.bind(this),
+                },
+                {
+                    name: "Number",
+                    callback: () => {
+                        this.addWidget(new NumberWidget(this))
+                    }
+                },
+                {
+                    name: "Color",
+                    callback: () => {
+                        this.addWidget(new ColorWidget(this))
+                    }
+                },
+                {
+                    name: "Slider",
+                    callback: () => {
+                        FormPopup({
+                            title: "New Slider",
+                            form: [
+                                {
+                                    name: "min",
+                                    type: "number",
+                                    startingValue: 0
+                                },
+                                {
+                                    name: "max",
+                                    type: "number",
+                                    startingValue: 100
+                                }
+                            ],
+                            onUpdate: (data: Array<any>) => {
+                                this.addWidget(new SliderWidget(this, {
+                                    min: data[0],
+                                    max: data[1],
+                                }));
+                            }
+                        }).Show();
+                    }
+                },
+                {
+                    name: "String",
+                    callback: () => {
+                        this.addWidget(new StringWidget(this))
+                    }
+                },
+                {
+                    name: "Toggle",
+                    callback: () => {
+                        this.addWidget(new ToggleWidget(this))
+                    }
+                },
+                {
+                    name: "Image",
+                    callback: () => {
+                        FormPopup({
+                            title: "New Image",
+                            form: [
+                                {
+                                    name: "URL",
+                                    type: "text",
+                                    startingValue: "https://pbs.twimg.com/media/GYabtu6bsAA7m99?format=jpg&name=medium"
+                                },
+                                {
+                                    name: "Max Width",
+                                    type: "number",
+                                    startingValue: 150
+                                },
+                                {
+                                    name: "Max Height",
+                                    type: "number",
+                                    startingValue: 150
+                                }
+                            ],
+                            onUpdate: (data: Array<any>) => {
+                                this.addWidget(new ImageWidget({
+                                  image: data[0],
+                                  maxWidth: data[1],
+                                  maxHeight: data[2],
+                                }));
+                            }
+                        }).Show();
+                    }
+                }
+            ]
+        };
+    }
+
     public contextMenu(): ContextMenuConfig {
         let config: ContextMenuConfig = {
             group: nodeFlowGroup,
@@ -332,12 +432,12 @@ export class FlowNode {
                                     form: [
                                         {
                                             name: "name",
-                                            type: "string",
+                                            type: "text",
                                             startingValue: "input"
                                         },
                                         {
                                             name: "type",
-                                            type: "string",
+                                            type: "text",
                                             startingValue: "string"
                                         }
                                     ],
@@ -358,12 +458,12 @@ export class FlowNode {
                                     form: [
                                         {
                                             name: "name",
-                                            type: "string",
-                                            startingValue: "input"
+                                            type: "text",
+                                            startingValue: "output"
                                         },
                                         {
                                             name: "type",
-                                            type: "string",
+                                            type: "text",
                                             startingValue: "string"
                                         }
                                     ],
@@ -378,33 +478,7 @@ export class FlowNode {
                         },
                     ],
                     subMenus: [
-                        {
-                            name: "Widget",
-                            items: [
-                                {
-                                    name: "Button",
-                                    callback: this.#popupNewButtonWidget.bind(this),
-                                },
-                                {
-                                    name: "Number",
-                                },
-                                {
-                                    name: "Color",
-                                },
-                                {
-                                    name: "Slider",
-                                },
-                                {
-                                    name: "String",
-                                },
-                                {
-                                    name: "Toggle",
-                                },
-                                {
-                                    name: "Image",
-                                }
-                            ]
-                        }
+                        this.#widgetSubmenu(),
                     ]
                 }],
             })

diff --git a/src/popups/form.ts b/src/popups/form.ts
@@ -2,7 +2,10 @@ import { Popup } from "../popup";
 
 interface FormValue {
     name: string;
+
+    // https://html.spec.whatwg.org/multipage/input.html#dom-input-type
     type: string;
+
     startingValue: any;
 }
 
@@ -21,12 +24,20 @@ export function FormPopup(config: Config): Popup {
         options: ["Set", "Cancel"],
         content: () => {
             const container = document.createElement('div');
+            container.style.flexDirection = "column";
+            container.style.display = "flex";
 
             for (let i = 0; i < config.form.length; i++) {
-                const ele = document.createElement('input')
+                const title = document.createElement("h4");
+                title.innerText = config.form[i].name;
+                container.append(title);
+
+                const ele = document.createElement('input');
                 ele.value = config.form[i].startingValue;
+                ele.type = config.form[i].type;
                 container.append(ele);
                 input.push(ele);
+                container.append(document.createElement("br"));
             }
 
             return container;