Merge pull request #16 from saurabh-prosoft/feature/generic-persistence

Feature/generic persistence

docs/.vuepress/config.cjs

@@ -85,7 +85,7 @@ module.exports = {
           },
         ],
       },
-      { text: "v2.0.3", link: "/" },
+      { text: "v2.0.4", link: "/" },
     ],
     sidebar: {
       "/guide/": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flow-connect",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "FlowConnect is a highly-customizable library for creating node-based editors, graphs and diagrams.",
   "type": "module",
   "main": "dist/cjs/flow-connect.js",

src/ui/radio-group.ts

@@ -24,8 +24,13 @@ export class RadioGroup extends UINode<RadioGroupStyle> {
     if (this.propName) this.setProp(newVal);
     else this._selected = newVal;
 
+    this.setLabelStyle();
+
     if (this.node.flow.state !== FlowState.Stopped) this.call("change", this, oldVal, newVal);
   }
+  get values(): string[] {
+    return [...this._values];
+  }
 
   constructor(node: Node, _options: RadioGroupOptions = DefaultRadioGroupOptions(node)) {
     super();
@@ -72,15 +77,6 @@ export class RadioGroup extends UINode<RadioGroupStyle> {
 
         label.on("click", (event: UIEvent<Label>) => {
           if (event.target.text === this.selected) return;
-          const lastSelectedLabel = this.children[this._values.indexOf(this.selected)];
-          Object.assign(lastSelectedLabel.style, {
-            backgroundColor: this.style.backgroundColor,
-            color: this.style.color,
-          });
-          Object.assign(event.target.style, {
-            backgroundColor: this.style.selectedBackgroundColor,
-            color: this.style.selectedColor,
-          });
           this.selected = event.target.text;
         });
 
@@ -93,6 +89,21 @@ export class RadioGroup extends UINode<RadioGroupStyle> {
     });
   }
 
+  setLabelStyle() {
+    this.children.forEach((label) => {
+      Object.assign(label.style, {
+        backgroundColor: this.style.backgroundColor,
+        color: this.style.color,
+      });
+    });
+
+    const selectedLabel = this.children[this._values.indexOf(this.selected)];
+    Object.assign(selectedLabel.style, {
+      backgroundColor: this.style.selectedBackgroundColor,
+      color: this.style.selectedColor,
+    });
+  }
+
   paint(): void {
     let context = this.context;
     context.strokeStyle = this.style.borderColor;
@@ -147,6 +158,7 @@ export class RadioGroup extends UINode<RadioGroupStyle> {
   onPropChange(_oldVal: any, newVal: any) {
     if (!this._values.includes(newVal)) newVal = this._values[0];
     this._selected = newVal;
+    this.setLabelStyle();
 
     this.output?.setData(this._selected);
   }