refactor to use model store

src/App/App.tsx

@@ -7,7 +7,7 @@ import {
   on,
   onMount,
 } from "solid-js";
-import { createMutable } from "solid-js/store";
+import { createMutable, createStore } from "solid-js/store";
 import { Layouter } from "../Layouter/Layouter";
 import { Editor } from "../Editor/Editor";
 import { Viewer, setRenderAction } from "../Viewer/Viewer";
@@ -25,12 +25,13 @@ import { Parameters, ParametersType } from "../Parameters/Parameters";
 import { Login, supabase } from "../Login/Login";
 import { Axes } from "../Viewer/objects/Axes";
 import { Export } from "../Export/Export";
+import { Model } from "./App.types";
 import { Report } from "../Report/Report";
 
-// todo: refactor to use model store
 // todo: split analysis result in convert to 3d object
 // todo: then isolate dynamic script loading from static
 // todo: then refactor editor to be toggled through source-code menu
+// refactor app to accept model and onchange
 type AppProps = {
   script?: string;
 };
@@ -84,17 +85,20 @@ export const analysisResults = analyze(nodes, elements, assignments);`;
     nodeResults: "none",
   };
   const settings = createMutable<SettingsType>(defaultSettings);
+  const [model, setModel] = createStore<Model>({
+    nodes: [],
+    elements: [],
+    assignments: [],
+    analysisResults: {},
+    designResults: [],
+  });
   const [script, setScript] = createSignal("");
   const [currentScript, setCurrentScript] = createSignal("");
   const [showSave, setShowSave] = createSignal(false);
-  const [undeformedNodes, setUndeformedNodes] = createSignal([]);
   const [deformedNodes, setDeformedNodes] = createSignal<any>([]);
-  const [elements, setElements] = createSignal([]);
-  const [assignments, setAssignments] = createSignal([]);
   const [nodeSupports, setNodeSupports] = createSignal([]);
   const [nodeLoads, setNodeLoads] = createSignal([]);
   const [elementResults, setElementResults] = createSignal([]);
-  const [designResults, setDesignResults] = createSignal([]);
   const [nodeResults, setNodeResults] = createSignal([]);
   const [error, setError] = createSignal(undefined);
   const [projectId, setProjectId] = createSignal(undefined);
@@ -155,8 +159,7 @@ export const analysisResults = analyze(nodes, elements, assignments);`;
   });
 
   // on setting deformedShape change: set nodes
-  const nodes = () =>
-    settings.deformedShape ? deformedNodes() : undeformedNodes();
+  const nodes = () => (settings.deformedShape ? deformedNodes() : model.nodes);
 
   // on settings.displayScale change: set displayScale
   const displayScale = () =>
@@ -190,21 +193,25 @@ export const analysisResults = analyze(nodes, elements, assignments);`;
 
   // on undeformed node change: compute deformed nodes
   createEffect(
-    on(undeformedNodes, () => {
-      const deformation = new Map<number, number[]>();
-      if (nodeResults().length) {
-        nodeResults().forEach((nodeResult: any) => {
-          if ("deformation" in nodeResult)
-            deformation.set(nodeResult.node, nodeResult.deformation);
-        });
+    on(
+      () => model.nodes,
+      () => {
+        const deformation = new Map<number, number[]>();
+        if (nodeResults().length) {
+          nodeResults().forEach((nodeResult: any) => {
+            if ("deformation" in nodeResult)
+              deformation.set(nodeResult.node, nodeResult.deformation);
+          });
+        }
+
+        setDeformedNodes(
+          model.nodes.map((v, i) => {
+            const dis = deformation.get(i) || [0, 0, 0];
+            return v.map((vv: any, ii: any) => vv + dis[ii]);
+          })
+        );
       }
-      setDeformedNodes(
-        undeformedNodes().map((v: any, i) => {
-          const dis = deformation.get(i) || [0, 0, 0];
-          return v.map((vv: any, ii: any) => vv + dis[ii]);
-        })
-      );
-    })
+    )
   );
 
   // on save: solve model from the script, then sync the script
@@ -234,25 +241,27 @@ export const analysisResults = analyze(nodes, elements, assignments);`;
           if (e.data.parameters) setParameters(e.data.parameters);
 
           setError(undefined);
-          setUndeformedNodes(e.data.nodes);
-          setElements(e.data.elements);
-          setAssignments(e.data.assignments);
+
+          setModel({
+            nodes: e.data.nodes,
+            elements: e.data.elements,
+            assignments: e.data.assignments,
+            analysisResults: e.data.analysisResults,
+            designResults: e.data.designResults,
+          });
+
           setNodeSupports(e.data.nodeSupports);
           setNodeLoads(e.data.nodeLoads);
+
           setNodeResults(e.data.nodeResults);
           setElementResults(e.data.elementResults);
-          setDesignResults(e.data.designResults);
 
           Object.assign(settings, e.data.settings);
         });
       }
     };
   }
 
-  function computeCenter(point1: number[], point2: number[]): number[] {
-    return point1?.map((v, i) => (v + point2[i]) * 0.5);
-  }
-
   return (
     <Layouter>
       <EditorBar
@@ -285,7 +294,7 @@ export const analysisResults = analyze(nodes, elements, assignments);`;
         </Show>
 
         <Show when={settings.elements}>
-          <Index each={elements()}>
+          <Index each={model.elements}>
             {(element) => (
               <Element
                 start={nodes()[element()[0]]}
@@ -308,7 +317,7 @@ export const analysisResults = analyze(nodes, elements, assignments);`;
         </Show>
 
         <Show when={settings.elementsIndices}>
-          <Index each={elements()}>
+          <Index each={model.elements}>
             {(element, index) => (
               <Text
                 text={`${index}`}
@@ -349,12 +358,14 @@ export const analysisResults = analyze(nodes, elements, assignments);`;
         <Show when={settings.elementResults !== "none"}>
           <Index each={elementResults()}>
             {(elementResult) => (
-              <Show when={elements()[(elementResult() as any).element]}>
+              <Show when={model.elements[(elementResult() as any).element]}>
                 <ElementResult
                   start={
-                    nodes()[elements()[(elementResult() as any).element][0]]
+                    nodes()[model.elements[(elementResult() as any).element][0]]
+                  }
+                  end={
+                    nodes()[model.elements[(elementResult() as any).element][1]]
                   }
-                  end={nodes()[elements()[(elementResult() as any).element][1]]}
                   result={
                     (elementResult() as any)[settings.elementResults][0] || 0
                   }
@@ -391,19 +402,13 @@ export const analysisResults = analyze(nodes, elements, assignments);`;
         }
       />
 
-      <Export
-        elements={elements()}
-        assignments={assignments()}
-        nodes={undeformedNodes()}
-        analysisResults={elementResults()}
-      />
-      {/* <Report
-        elements={elements()}
-        assignments={assignments()}
-        nodes={undeformedNodes()}
-        analysisResults={elementResults()}
-        designResults={designResults()}
-      /> */}
+      <Export model={model} />
+
+      {/* <Report model={model} /> */}
     </Layouter>
   );
 }
+
+function computeCenter(point1: number[], point2: number[]): number[] {
+  return point1?.map((v, i) => (v + point2[i]) * 0.5);
+}

src/App/App.types.ts

@@ -0,0 +1,48 @@
+export type Model = {
+  nodes: Node[];
+  elements: Element[];
+  assignments: Assignment[];
+  analysisResults: AnalysisResults;
+  designResults: DesignResults;
+};
+
+// nodes and elements
+export type Node = [number, number, number];
+export type Element = [number, number];
+
+// assignments
+export type Assignment =
+  | supportAssignment
+  | loadAssignment
+  | propertyAssignment;
+type supportAssignment = { node: number; support: [boolean, boolean, boolean] };
+type loadAssignment = { node: number; load: [number, number, number] };
+type propertyAssignment = { element: number; elasticity: number; area: number };
+
+// analysis results
+export type AnalysisResults = Record<
+  string,
+  (deformationResult | reactionResult | normalResult)[]
+>;
+
+type deformationResult = {
+  node: number;
+  deformation: [number, number, number];
+};
+type reactionResult = {
+  node: number;
+  reaction: [number, number, number];
+};
+type normalResult = {
+  element: number;
+  normal: [number, number];
+};
+
+// design results
+export type DesignResults = timberResult[];
+
+type timberResult = {
+  element: number;
+  utilizationFactor: number;
+  effectiveLength: number;
+};

src/App/solveWorker.ts

@@ -64,12 +64,13 @@ self.onmessage = async (e) => {
     parameters: e.data.key ? undefined : parameters,
     nodes,
     elements,
+    assignments,
     nodeSupports,
     nodeLoads,
+    analysisResults,
     nodeResults,
     elementResults,
     designResults,
-    assignments,
     settings: module?.settings || {},
   });
 };

src/Export/Export.tsx

@@ -3,20 +3,18 @@ import { exportToJSON } from "./exportToJSON";
 import FileSaver from "file-saver";
 import { createStore } from "solid-js/store";
 import { exportToDXF } from "./exportToDXF";
+import { Model } from "../App/App.types";
 
 type ExportProps = {
-  nodes: any;
-  elements: any;
-  assignments: any[];
-  analysisResults: any;
+  model: Model;
 };
 
 enum ExportType {
   JSON = "JSON",
   DXF = "DXF",
 }
 
-type ExportOptions = {
+export type ExportOptions = {
   nodes: boolean;
   elements: boolean;
   supports: boolean;
@@ -54,13 +52,7 @@ export function Export(props: ExportProps) {
       [ExportType.DXF]: exportToDXF,
     };
 
-    const string = exporters[exportType()](
-      props.nodes,
-      props.elements,
-      props.assignments,
-      props.analysisResults,
-      exportOptions
-    );
+    const string = exporters[exportType()](props.model, exportOptions);
     var blob = new Blob([string], { type: "text/plain;charset=utf-8" });
     FileSaver.saveAs(blob, `awatif-model.${exportType()}`);
 

src/Export/exportToDXF.ts

@@ -1,18 +1,13 @@
 import { DxfWriter, Units, point3d } from "@tarikjabiri/dxf";
-import { ExportOptions } from "./export.types";
+import { ExportOptions } from "./Export";
+import { Model } from "../App/App.types";
 
-export function exportToDXF(
-  nodes: [number, number, number][],
-  elements: [number, number][],
-  assignments: any[],
-  analysisResults: any,
-  exportOptions: ExportOptions
-) {
+export function exportToDXF(model: Model, exportOptions: ExportOptions) {
   const dxf = new DxfWriter();
   dxf.setUnits(Units.Meters);
 
-  elements.forEach(([e1, e2]) =>
-    dxf.addLine(point3d(...nodes[e1]), point3d(...nodes[e2]))
+  model.elements.forEach(([e1, e2]) =>
+    dxf.addLine(point3d(...model.nodes[e1]), point3d(...model.nodes[e2]))
   );
 
   return dxf.stringify();