change size for nodes/elements/indices according to inputs

src/App/App.stories.tsx

@@ -10,7 +10,7 @@ export const Invalid: StoryObj<Args> = {
   },
 };
 
-export const Basic: StoryObj<Args> = {
+export const Default: StoryObj<Args> = {
   args: {
     script: `import { analyzing } from 'https://unpkg.com/awatif';
 
@@ -46,7 +46,7 @@ export const analysisResults = analyzing(nodes, elements, assignments);`,
   },
 };
 
-export const Undeformed: StoryObj<Args> = {
+export const UndeformedAndSize: StoryObj<Args> = {
   args: {
     script: `import { analyzing } from 'https://unpkg.com/awatif';
 
@@ -79,11 +79,11 @@ export const assignments = [
 ]
 
 export const analysisResults = analyzing(nodes, elements, assignments);`,
-    settings: { deformedShape: false },
+    settings: { gridSize: 10, deformedShape: false },
   },
 };
 
-export const Parameters: StoryObj<Args> = {
+export const ParametersAndResults: StoryObj<Args> = {
   args: {
     script: `import { analyzing } from 'https://unpkg.com/awatif';
 
@@ -139,7 +139,11 @@ export const onParameterChange = (parameters) => {
   return { nodes, elements, assignments, analysisResults }
 }
 `,
-    settings: { elementResults: "force", nodeResults: "reaction" },
+    settings: {
+      displayScale: 2,
+      elementResults: "normal",
+      nodeResults: "reaction",
+    },
   },
 };
 

src/App/App.tsx

@@ -68,6 +68,7 @@ export const assignments = [
 export const analysisResults = analyzing(nodes, elements, assignments);`;
   const defaultSettings: SettingsType = {
     gridSize: 25,
+    displayScale: 1,
     nodes: true,
     elements: true,
     nodesIndices: false,
@@ -95,8 +96,6 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
   const [parameters, setParameters] = createSignal<ParametersType>({});
   const [awatifKey, setAwatifKey] = createSignal("");
   const [userPlan, setUserPlan] = createSignal("");
-  const nodes = () =>
-    settings.deformedShape ? deformedNodes() : undeformedNodes();
 
   onMount(async () => {
     // set User plan and Awatif key
@@ -148,18 +147,38 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
     });
   });
 
+  // on setting deformedShape change: set nodes
+  const nodes = () =>
+    settings.deformedShape ? deformedNodes() : undeformedNodes();
+
+  // on settings.displayScale change: set displayScale
+  const displayScale = () =>
+    settings.displayScale === 0
+      ? 1
+      : settings.displayScale > 0
+      ? settings.displayScale
+      : -1 / settings.displayScale;
+
   // on script change: define saving status
   createEffect(
     on([currentScript, script], () =>
       setShowSave(currentScript() === script() ? false : true)
     )
   );
 
-  // on settings node/element results change: render the scene
+  // on settings change: render the scene
   createEffect(
-    on([() => settings.nodeResults, () => settings.elementResults], () => {
-      setRenderAction((c) => c + 1);
-    })
+    on(
+      [
+        () => settings.gridSize,
+        () => settings.displayScale,
+        () => settings.nodeResults,
+        () => settings.elementResults,
+      ],
+      () => {
+        setRenderAction((c) => c + 1);
+      }
+    )
   );
 
   // on undeformed node change: compute deformed nodes
@@ -243,11 +262,13 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
 
       <Login />
 
-      <Viewer size={[settings.gridSize, 1]}>
-        <Grid size={[settings.gridSize, 1]} />
+      <Viewer gridSize={settings.gridSize}>
+        <Grid size={settings.gridSize} />
 
         <Show when={settings.nodes}>
-          <Index each={nodes()}>{(node) => <Node position={node()} />}</Index>
+          <Index each={nodes()}>
+            {(node) => <Node position={node()} size={settings.gridSize / 40} />}
+          </Index>
         </Show>
 
         <Show when={settings.elements}>
@@ -256,6 +277,7 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
               <Element
                 start={nodes()[element()[0]]}
                 end={nodes()[element()[1]]}
+                size={settings.gridSize / 8}
               />
             )}
           </Index>
@@ -264,7 +286,11 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
         <Show when={settings.nodesIndices}>
           <Index each={nodes()}>
             {(node, index) => (
-              <Text text={`${index}`} position={node()} size={0.4} />
+              <Text
+                text={`${index}`}
+                position={node()}
+                size={(settings.gridSize * displayScale()) / 40}
+              />
             )}
           </Index>
         </Show>
@@ -278,7 +304,7 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
                   nodes()[element()[0]],
                   nodes()[element()[1]]
                 )}
-                size={0.4}
+                size={(settings.gridSize * displayScale()) / 40}
               />
             )}
           </Index>

src/Settings/Settings.stories-dev.tsx

@@ -9,6 +9,7 @@ export default {
     <Settings
       settings={{
         gridSize: 40,
+        displayScale: 1,
         nodes: true,
         elements: true,
         nodesIndices: false,

src/Settings/Settings.tsx

@@ -3,6 +3,7 @@ import { Pane, TpChangeEvent } from "tweakpane";
 
 export type SettingsType = {
   gridSize: number;
+  displayScale: number;
   nodes: boolean;
   elements: boolean;
   nodesIndices: boolean;
@@ -22,7 +23,13 @@ export type SettingsProps = {
 export function Settings(props: SettingsProps) {
   let pane = new Pane({ title: "Settings", expanded: false });
 
-  pane.addInput(props.settings, "gridSize", { label: "grid size" });
+  pane.addInput(props.settings, "gridSize", { label: "grid size", min: 1 });
+  pane.addInput(props.settings, "displayScale", {
+    label: "display scale",
+    min: -10,
+    max: 10,
+    step: 1,
+  });
   pane.addInput(props.settings, "nodes");
   pane.addInput(props.settings, "elements");
   pane.addInput(props.settings, "nodesIndices", { label: "nodes indices" });

src/Viewer/Viewer.stories.tsx

@@ -15,15 +15,15 @@ export default {
   title: "Viewer",
   render: () => (
     <div class="w-screen h-screen">
-      <Viewer size={[10, 0]}>
-        <Grid size={[20, 0]} />
+      <Viewer gridSize={10}>
+        <Grid size={10} />
 
-        <Node position={undefined} />
-        <Node position={[5, 0]} />
-        <Node position={[5, 0, "k"]} />
-        <Node position={[5, , 0]} />
+        <Node position={undefined} size={10 / 40} />
+        <Node position={[5, 0]} size={10 / 40} />
+        <Node position={[5, 0, "k"]} size={10 / 40} />
+        <Node position={[5, , 0]} size={10 / 40} />
 
-        <Node position={[5, 0, 0]} />
+        <Node position={[5, 0, 0]} size={10 / 40} />
 
         <Element start={undefined} end={undefined} />
         <Element start={[0, 0]} end={[5, 0]} />

src/Viewer/Viewer.tsx

@@ -3,8 +3,8 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import { children, createEffect, createSignal, on, onMount } from "solid-js";
 
 type ViewerProps = {
-  size: [number, number];
   children: any;
+  gridSize: number;
 };
 
 export function Viewer(props: ViewerProps) {
@@ -32,9 +32,8 @@ export function Viewer(props: ViewerProps) {
 
   // on grid size change
   createEffect(() => {
-    const gridSize = Math.abs(props.size[0]);
-    const z2fit = gridSize / 2 + gridSize / 2 / Math.tan(45 / 2);
-    camera.position.set(0, gridSize / 2, z2fit);
+    const z2fit = props.gridSize / 2 + props.gridSize / 2 / Math.tan(45 / 2);
+    camera.position.set(0, props.gridSize / 2, z2fit);
     controls.minDistance = 1;
     controls.maxDistance = z2fit * 1.5;
     controls.update();

src/Viewer/objects/Element.tsx

@@ -2,11 +2,12 @@ import * as THREE from "three";
 import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2";
 import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
-import { onCleanup } from "solid-js";
+import { createEffect, onCleanup } from "solid-js";
 
 type ElementProps = {
   start: any;
   end: any;
+  size: number;
 };
 
 export function Element(props: ElementProps) {
@@ -37,6 +38,10 @@ export function Element(props: ElementProps) {
   line.geometry.setPositions([...swapYZStart, ...swapYZEnd]);
   line.geometry.setColors([...Array(6).fill(1)]);
 
+  createEffect(() => {
+    line.material.linewidth = props.size;
+  });
+
   onCleanup(() => {
     line.geometry.dispose();
     line.material.dispose();

src/Viewer/objects/Grid.tsx

@@ -3,7 +3,7 @@ import * as THREE from "three";
 import { setRenderAction } from "../Viewer";
 
 type GridProps = {
-  size: [number, number];
+  size: number;
 };
 
 export function Grid(props: GridProps) {
@@ -14,7 +14,7 @@ export function Grid(props: GridProps) {
     group.clear();
     grid?.dispose();
 
-    grid = new THREE.GridHelper(props.size[0], 20, 0x666666, 0x404040);
+    grid = new THREE.GridHelper(props.size, 20, 0x666666, 0x404040);
     group.add(grid);
 
     setRenderAction((v) => v + 1);

src/Viewer/objects/Node.tsx

@@ -1,8 +1,9 @@
 import * as THREE from "three";
-import { onCleanup } from "solid-js";
+import { createEffect, onCleanup } from "solid-js";
 
 type NodeProps = {
   position: any;
+  size: number;
 };
 
 export function Node(props: NodeProps) {
@@ -15,7 +16,7 @@ export function Node(props: NodeProps) {
 
   const points = new THREE.Points(
     new THREE.BufferGeometry(),
-    new THREE.PointsMaterial({ size: 0.3 })
+    new THREE.PointsMaterial()
   );
 
   points.geometry.setAttribute(
@@ -26,6 +27,10 @@ export function Node(props: NodeProps) {
     )
   );
 
+  createEffect(() => {
+    points.material.size = props.size;
+  });
+
   onCleanup(() => {
     points.geometry.dispose();
     points.material.dispose();

src/Viewer/objects/Text.tsx

@@ -4,7 +4,7 @@ import * as THREE from "three";
 type TextProps = {
   text: any;
   position: any;
-  size: any;
+  size: number;
 };
 
 export function Text(props: TextProps) {
@@ -15,8 +15,7 @@ export function Text(props: TextProps) {
     typeof props.text != "string" ||
     props.position.length != 3 ||
     props.position.some((e: any) => typeof e !== "number") ||
-    props.position.flat().length != props.position.length ||
-    typeof props.size != "number"
+    props.position.flat().length != props.position.length
   )
     return;
 
@@ -34,12 +33,6 @@ export function Text(props: TextProps) {
     1
   );
 
-  onCleanup(() => {
-    text.geometry.dispose();
-    material.map?.dispose();
-    material.dispose();
-  });
-
   // on text change or size change
   createEffect(() => {
     material.map?.dispose();
@@ -51,6 +44,12 @@ export function Text(props: TextProps) {
     );
   });
 
+  onCleanup(() => {
+    text.geometry.dispose();
+    material.map?.dispose();
+    material.dispose();
+  });
+
   return <>{text}</>;
 }