T-11 format changes

rontap · Apr 30, 2023 · 3534a58 · 3534a58
1 parent bfd9a71
commit 3534a58
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 44 deletions.
diff --git a/app/src/graph/Serialiser.ts b/app/src/graph/Serialiser.ts
@@ -20,8 +20,8 @@ class Serialiser {
                 ptr: node,
                 name: this.toID(node.ID),
                 [nodeProps.config?.self || "jsonParseError"]: {
-                    ...node._configValues,
-                    ...Object.fromEntries(node._configurableInputValues)
+                    ...node.configValues,
+                    ...Object.fromEntries(node.configurableInputValues)
                 },
                 input: [this.toID(node.ID)],//node.prevNodes.map(this.toID),
                 output: node.nextNodes.map(this.toID)
@@ -122,9 +122,9 @@ class Serialiser {
             // add the export only CSS and close down SVG
             .concat(`<style>${parsedCssExport}</style></svg>`)
             // replace <input>-tags with XML valid <input/> tags
-            .replace(/<input(.*?)(>)/gm, "<input$1\/>")
+            .replace(/<input(.*?)(>)/gm, "<input$1/>")
             // replace <br>-tags with XML valid <br/> tags
-            .replace(/<br(.*?)(>)/gm, "<br$1\/>");
+            .replace(/<br(.*?)(>)/gm, "<br$1/>");
     }
 
     toSvg(download: boolean = false) {

diff --git a/app/src/graph/State.ts b/app/src/graph/State.ts
@@ -65,7 +65,6 @@ const resetIDS = () => {
     Node.ID = 1;
     Line.ID = 1;
 }
-const actions = {}
 
 const State = create<AppState>()(
     devtools(
@@ -76,8 +75,7 @@ const State = create<AppState>()(
                     set((state) => {
                             const activeNode = state.activeNode;
                             if (!activeNode) return {};
-                            //console.log('->> fs', activeNode, to, propertyName, activeNode._configurableInputValues);
-                            activeNode._configurableInputValues.set(propertyName, to);
+                            activeNode.configurableInputValues.set(propertyName, to);
                             return {activeNode}
                         }
                     ),
@@ -124,9 +122,9 @@ const State = create<AppState>()(
                     resetIDS();
                     return set((state) => initialState)
                 },
-                setInspectLine: (line: Line, point: Point) => set((state) =>
+                setInspectLine: (line: Line, point: Point) => set(() =>
                     ({inspectedLine: {line, point}})),
-                removeInspectLine: () => set((state) =>
+                removeInspectLine: () => set(() =>
                     ({inspectedLine: undefined})),
 
                 // store part

diff --git a/app/src/node/Builder.ts b/app/src/node/Builder.ts
@@ -35,9 +35,7 @@ export class NodeBuilder {
             if (!value.hide) {
                 this._types.set(value.name, value);
             }
-
         })
-
         return this._types;
     }
 
@@ -54,7 +52,6 @@ export class NodeBuilder {
         return this.types.get(name);
     }
 
-
 }
 
 //EdgeInvariant(true);
diff --git a/app/src/node/Node.tsx b/app/src/node/Node.tsx
@@ -20,11 +20,10 @@ export class Node {
     public ID: number;
     static ID = 1;
     public coords: Point;
-    readonly _configParams: jsobj;
-    public _configValues: jsobj;
-    public _configurableInputValues: Map<string, string>;
+    readonly configParams: jsobj;
+    public configValues: jsobj;
+    public configurableInputValues: Map<string, string>;
     public orderedNode: NodeId[] = [];
-    public _error: any = "";
     public connectedNodeInputs: NodeEdgeRef[] = [];
     output: Output = Node.ID;
 
@@ -33,15 +32,15 @@ export class Node {
         this.ID = Node.ID++;
 
         this.coords = this.initialCoords;
-        this._configParams = this.nodeProps?.config?.data || {};
+        this.configParams = this.nodeProps?.config?.data || {};
 
-        const configParamKeys = Object.keys(this._configParams);
+        const configParamKeys = Object.keys(this.configParams);
 
-        this._configValues = {};
+        this.configValues = {};
         configParamKeys.forEach(key => {
-            const aDefault = this._configParams[key].default;
+            const aDefault = this.configParams[key].default;
             if (aDefault != undefined) {
-                this._configValues[key] = aDefault;
+                this.configValues[key] = aDefault;
             }
         })
 
@@ -53,7 +52,7 @@ export class Node {
             ).map(value => [value.configurable_input, value.name
             ]);
 
-        this._configurableInputValues = new Map(window.structuredClone(everyConfigurableInput));
+        this.configurableInputValues = new Map(window.structuredClone(everyConfigurableInput));
 
     }
 
@@ -84,18 +83,18 @@ export class Node {
         const configValue = nodeSd[guessedProperty] as jsobj;
 
         // move some values to configurable input values separate value;
-        [...node._configurableInputValues.keys()]
+        [...node.configurableInputValues.keys()]
             .forEach(inputValueKey => {
                 if (configValue[inputValueKey]) {
-                    node._configurableInputValues.set(
+                    node.configurableInputValues.set(
                         inputValueKey,
                         configValue[inputValueKey]
                     )
-                    delete node._configValues[inputValueKey];
+                    delete node.configValues[inputValueKey];
                 }
             })
 
-        node._configValues = configValue;
+        node.configValues = configValue;
         if (svgFO) {
             node.coords = Point.fromString(
                 svgFO.getAttribute('x'),

diff --git a/app/src/node/NodeBlueprintConfigEditor.tsx b/app/src/node/NodeBlueprintConfigEditor.tsx
@@ -12,7 +12,6 @@ export default function NodeBlueprintConfigEditor(props: jsobj) {
                 <textarea
                     defaultValue={JSON.stringify(blueprintedType, null, 2)}>
                 </textarea>
-
             </code>
         </div>
     </>

diff --git a/app/src/node/NodeFC.tsx b/app/src/node/NodeFC.tsx
@@ -12,8 +12,8 @@ import Button from "../ui/components/Button";
 const NodeFC = (props: { Node: Node, blueprint: boolean }) => {
 
     const that: Node = props.Node;
-    const noProperties = Object.values(that._configParams).length;
-    const sumAdditionalHeight = Object.values(that._configParams).reduce(
+    const noProperties = Object.values(that.configParams).length;
+    const sumAdditionalHeight = Object.values(that.configParams).reduce(
         (prev: any, param: any) => (param?.additionalProps?.height || 0) + prev, 0
     )
     const height = 40 + (noProperties * 55) + sumAdditionalHeight;
@@ -56,8 +56,8 @@ const NodeFC = (props: { Node: Node, blueprint: boolean }) => {
 
                 <div className={"configCtn"}>
                     <FormRoot
-                        configValues={that._configValues}
-                        configParams={that._configParams}/>
+                        configValues={that.configValues}
+                        configParams={that.configParams}/>
                 </div>
             </ErrorBoundary>
         </div>

diff --git a/app/src/svg/BlueprintSvg.tsx b/app/src/svg/BlueprintSvg.tsx
@@ -39,7 +39,6 @@ export default function BlueprintSvg(props: jsobj) {
             width="1000%"
             height="10000%" fill="url(#grid)"/>
 
-
         {everyNode.find(node => node.nodeType === blueprinted)
             ?.getSvg(true)}
     </svg>

diff --git a/app/src/svg/InspectLine.tsx b/app/src/svg/InspectLine.tsx
@@ -4,6 +4,7 @@ import State, {End, getState} from "../graph/State";
 import {DragHandler} from "./Draggable";
 import Button from "../ui/components/Button";
 
+const DISPLAY_CONNECTION_ELEMENTS = 10;
 export default function InspectLine() {
     const {line, point} = State((state) => state.inspectedLine) || {};
 
@@ -21,18 +22,18 @@ export default function InspectLine() {
     const fromNodeOutputs = fromNode?.nodeOutputs.concat(
         fromNode?.getConnectedNodeInputs
     ) || []
-    const maxPad = fromNodeOutputs.length > 6 ? 11 : fromNodeOutputs.length / 2
+    const maxPad = fromNodeOutputs.length > 6 ? (DISPLAY_CONNECTION_ELEMENTS + 1) : fromNodeOutputs.length / 2
     return (
         <foreignObject
             x={point.x}
             y={point.y}
             key={"inspectLine"}
             className={"data-node data-node-inspect"}
             width={190}
-            height={maxPad * 10 + 170}
+            height={maxPad * DISPLAY_CONNECTION_ELEMENTS + 170}
         >
             <button className={"minimiseButton"}
-                    onClick={evt => getState().removeInspectLine()}
+                    onClick={() => getState().removeInspectLine()}
             >
                 ×
             </button>
@@ -53,8 +54,9 @@ export default function InspectLine() {
                 Data traveling
                 <div id={"inspectData"} className={"grid gtc-2 m-5"}>
                     {
+                        // displaying connections up to DISPLAY_CONNECTION_ELEMENTS
                         fromNodeOutputs
-                            ?.slice(0, 11)
+                            ?.slice(0, (DISPLAY_CONNECTION_ELEMENTS + 1))
                             .map(
                                 nodeEdgeRef => <div className={"gridItem smallDescr"}
                                                     title={`${nodeEdgeRef.name} | type: ${nodeEdgeRef.type}`}>{
@@ -65,22 +67,26 @@ export default function InspectLine() {
                     }
 
                     {
-                        (fromNodeOutputs?.length && fromNodeOutputs.length > 10) &&
+                        (fromNodeOutputs?.length && fromNodeOutputs.length > DISPLAY_CONNECTION_ELEMENTS) &&
                         <div className={"gridItem smallDescr"}
+                            // showing the previously not displayed elements in a tooltip
                              title={
-                                 fromNodeOutputs.slice(10).map((ref, i) => (i + 1) + ": " + ref.type).join(" \n")
+                                 fromNodeOutputs
+                                     .slice(DISPLAY_CONNECTION_ELEMENTS)
+                                     .map((ref, i) => (i + 1) + ": " + ref.type)
+                                     .join(" \n")
                              }>
-                            + {fromNodeOutputs.length - 10} more
+                            + {fromNodeOutputs.length - DISPLAY_CONNECTION_ELEMENTS} more
                         </div>
                     }
                 </div>
 
-                <Button
-                    onClick={rmAndClose}
-                    small>Remove</Button>
+                <Button onClick={rmAndClose} small>
+                    Remove
+                </Button>
                 <br/>
             </div>
 
         </foreignObject>
     )
-}
+}
diff --git a/app/src/ui/SingleEdgeRef.tsx b/app/src/ui/SingleEdgeRef.tsx
@@ -16,7 +16,7 @@ export default function SingleEdgeRef({
     const actColor = edgeTypes.get(edgeRef.type)?.color || "gray";
     const node = State((state) => state.activeNode);
     const [internalValue, setInternalValue] = useState(
-        node?._configurableInputValues.get(
+        node?.configurableInputValues.get(
             edgeRef.configurable_input || "unnamed"
         ) || "unnamed")
     const setName = (evt: ChangeEvent<HTMLInputElement>) => {