add grid size (#255)

src/App/App.tsx

@@ -67,6 +67,7 @@ export const assignments = [
 
 export const analysisResults = analyzing(nodes, elements, assignments);`;
   const defaultSettings: SettingsType = {
+    gridSize: 25,
     nodes: true,
     elements: true,
     nodesIndices: false,
@@ -242,8 +243,8 @@ export const analysisResults = analyzing(nodes, elements, assignments);`;
 
       <Login />
 
-      <Viewer>
-        <Grid />
+      <Viewer size={[settings.gridSize, 1]}>
+        <Grid size={[settings.gridSize, 1]} />
 
         <Show when={settings.nodes}>
           <Index each={nodes()}>{(node) => <Node position={node()} />}</Index>

src/Settings/Settings.stories-dev.tsx

@@ -8,6 +8,7 @@ export default {
   render: () => (
     <Settings
       settings={{
+        gridSize: 40,
         nodes: true,
         elements: true,
         nodesIndices: false,

src/Settings/Settings.tsx

@@ -2,6 +2,7 @@ import { createEffect } from "solid-js";
 import { Pane, TpChangeEvent } from "tweakpane";
 
 export type SettingsType = {
+  gridSize: number;
   nodes: boolean;
   elements: boolean;
   nodesIndices: boolean;
@@ -21,6 +22,7 @@ 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, "nodes");
   pane.addInput(props.settings, "elements");
   pane.addInput(props.settings, "nodesIndices", { label: "nodes indices" });

src/Viewer/Viewer.stories.tsx

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

src/Viewer/Viewer.tsx

@@ -2,24 +2,19 @@ import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import { children, createEffect, createSignal, on, onMount } from "solid-js";
 
-export function Viewer(props: any) {
+type ViewerProps = {
+  size: [number, number];
+  children: any;
+};
+
+export function Viewer(props: ViewerProps) {
   let container: HTMLDivElement;
 
   const scene = new THREE.Scene();
-  const camera = new THREE.PerspectiveCamera(75, 1.0, 0.1, 1000);
+  const camera = new THREE.PerspectiveCamera(45, 1.0, 0.1, 2 * 1e6); // supported view till 1e6
   const renderer = new THREE.WebGLRenderer({ antialias: true });
   const controls = new OrbitControls(camera, renderer.domElement);
 
-  camera.position.set(0, 5, 10);
-  controls.minDistance = 1;
-  controls.maxDistance = 40;
-  controls.update();
-
-  // on control change
-  controls.addEventListener("change", () => {
-    renderer.render(scene, camera);
-  });
-
   onMount(() => {
     container.appendChild(renderer.domElement);
 
@@ -35,6 +30,16 @@ export function Viewer(props: any) {
     }).observe(container);
   });
 
+  // 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);
+    controls.minDistance = 1;
+    controls.maxDistance = z2fit * 1.5;
+    controls.update();
+  });
+
   // on children (objects) change
   createEffect(() => {
     const objects = children(() => props.children).toArray();
@@ -47,6 +52,11 @@ export function Viewer(props: any) {
     renderer.render(scene, camera);
   });
 
+  // on control change
+  controls.addEventListener("change", () => {
+    renderer.render(scene, camera);
+  });
+
   // on render action
   createEffect(
     on(renderAction, () => {

src/Viewer/objects/ElementResults2.stories.tsx

@@ -10,8 +10,8 @@ export default {
   title: "ElementResults2",
   render: () => (
     <div class="w-screen h-screen">
-      <Viewer>
-        <Grid />
+      <Viewer size={[15, 0]}>
+        <Grid size={[15, 0]} />
 
         <ElementResult2
           start={undefined}

src/Viewer/objects/Grid.tsx

@@ -1,10 +1,26 @@
-import { onCleanup } from "solid-js";
+import { createEffect, onCleanup } from "solid-js";
 import * as THREE from "three";
+import { setRenderAction } from "../Viewer";
 
-export function Grid() {
-  const grid = new THREE.GridHelper(40, 20, 0x666666, 0x404040);
+type GridProps = {
+  size: [number, number];
+};
 
-  onCleanup(() => grid.dispose());
+export function Grid(props: GridProps) {
+  const group = new THREE.Group();
+  let grid: THREE.GridHelper;
 
-  return <>{grid}</>;
+  createEffect(() => {
+    group.clear();
+    grid?.dispose();
+
+    grid = new THREE.GridHelper(props.size[0], 20, 0x666666, 0x404040);
+    group.add(grid);
+
+    setRenderAction((v) => v + 1);
+  });
+
+  onCleanup(() => grid?.dispose());
+
+  return <>{group}</>;
 }