add timber design concept

src/App/App.stories.tsx

@@ -164,6 +164,58 @@ export const settings = {
   },
 };
 
+export const TimberDesign: StoryObj<Args> = {
+  args: {
+    script: `import { analyze } from 'https://unpkg.com/awatif';
+
+    export const nodes = [[8, 12.5, 0], [15, 12.5, 0], [8, 12.5, 8]];;
+    export const elements = [[0, 1], [1, 2]]
+
+    export const assignments = [
+        {
+            node: 0,
+            support: [true, true, true]
+        },
+        {
+            node: 2,
+            support: [true, true, true]
+        },
+        {
+            node: 1,
+            load: [0, 0, -10]
+        },
+        {
+            element: 0,
+            area: 1.2,
+            elasticity: 200
+        },
+        {
+            element: 1,
+            area: 1.2,
+            elasticity: 200
+        }
+    ]
+
+    export const analysisResults = analyze(nodes, elements, assignments);
+    export const designResults = timberDesign(nodes, elements, assignments, analysisResults)
+
+    function timberDesign(nodes, elements, assignments, analysisResults) {
+        return [
+          {
+              elements: 0,
+              utilizationFactor: 0.5,
+              effectiveLength: 10
+          },
+          {
+              elements: 1,
+              utilizationFactor: 0.9,
+              effectiveLength: 5
+          }
+        ]
+    }`,
+  },
+};
+
 export default {
   title: "App",
   render: (props) => <App {...props} />,

src/App/App.tsx

@@ -25,7 +25,12 @@ import { Parameters, ParametersType } from "../Parameters/Parameters";
 import { Login, supabase } from "../Login/Login";
 import { Axes } from "../Viewer/objects/Axes";
 import { Export } from "../Export/Export";
+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
 type AppProps = {
   script?: string;
 };
@@ -89,6 +94,7 @@ export const analysisResults = analyze(nodes, elements, assignments);`;
   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);
@@ -235,6 +241,7 @@ export const analysisResults = analyze(nodes, elements, assignments);`;
           setNodeLoads(e.data.nodeLoads);
           setNodeResults(e.data.nodeResults);
           setElementResults(e.data.elementResults);
+          setDesignResults(e.data.designResults);
 
           Object.assign(settings, e.data.settings);
         });
@@ -390,12 +397,12 @@ export const analysisResults = analyze(nodes, elements, assignments);`;
         nodes={undeformedNodes()}
         analysisResults={elementResults()}
       />
-      {/*       
-      <Report
+      {/* <Report
         elements={elements()}
         assignments={assignments()}
         nodes={undeformedNodes()}
         analysisResults={elementResults()}
+        designResults={designResults()}
       /> */}
     </Layouter>
   );

src/App/solveWorker.ts

@@ -43,6 +43,8 @@ self.onmessage = async (e) => {
   const assignments = onChangeResults?.assignments || module?.assignments || [];
   const analysisResults = onChangeResults?.analysisResults ||
     module?.analysisResults || { default: [] };
+  const designResults =
+    onChangeResults?.designResults || module?.designResults || [];
 
   const nodeSupports: any[] = [];
   const nodeLoads: any[] = [];
@@ -66,6 +68,7 @@ self.onmessage = async (e) => {
     nodeLoads,
     nodeResults,
     elementResults,
+    designResults,
     assignments,
     settings: module?.settings || {},
   });

src/Report/Report.css

@@ -18,4 +18,8 @@
     height: 100%;
     margin: 0;
   }
+
+  #printArea * {
+    visibility: visible;
+  }
 }

src/Report/Report.tsx

@@ -1,14 +1,18 @@
+import { createEffect, createSignal } from "solid-js";
 import "./Report.css";
 
 type ReportProps = {
   nodes: any;
   elements: any;
   assignments: any[];
-  analysisResults: any;
+  analysisResults: any[];
+  designResults: any[];
 };
 
 // TODO: refactor modal into own Component store in common/Modal.tsx
 export function Report(props: ReportProps) {
+  const [elementIndex, setElementIndex] = createSignal(0);
+
   return (
     <>
       <button
@@ -35,9 +39,23 @@ export function Report(props: ReportProps) {
           {/* code begin */}
           <div class="flex mt-4">
             <div class="flex-grow">
-              <a class="btn btn-sm">«</a>
-              <span class="mt-3 px-2">Element 22 fo 100</span>
-              <a class="btn btn-sm">»</a>
+              <button
+                class="btn btn-sm"
+                onclick={() => setElementIndex((c) => c - 1)}
+                disabled={elementIndex() === 0}
+              >
+                «
+              </button>
+              <span class="mt-3 px-2">
+                Element {elementIndex()} fo {props.analysisResults.length - 1}
+              </span>
+              <button
+                class="btn btn-sm"
+                onclick={() => setElementIndex((c) => c + 1)}
+                disabled={elementIndex() === props.analysisResults.length - 1}
+              >
+                »
+              </button>
             </div>
 
             <a class="btn btn-sm btn-primary" onclick={() => window.print()}>
@@ -48,7 +66,17 @@ export function Report(props: ReportProps) {
             id="printArea"
             class="flex-grow mt-5 p-4 bg-white text-slate-500"
           >
-            The report goes here
+            <p>The report goes here:</p>
+            <ul>
+              <li>
+                Utilization factor:
+                {props.designResults[elementIndex()]?.utilizationFactor}
+              </li>
+              <li>
+                Effective Length:
+                {props.designResults[elementIndex()]?.effectiveLength}
+              </li>
+            </ul>
           </div>
         </form>