From bdafe34ae0b6c0802d5fbd487494680c052c3034 Mon Sep 17 00:00:00 2001 From: Mohamed Adil Date: Thu, 17 Aug 2023 17:20:50 +0200 Subject: [PATCH] change size for nodes/elements/indices according to inputs --- src/App/App.stories.tsx | 14 +++++--- src/App/App.tsx | 48 +++++++++++++++++++++------ src/Settings/Settings.stories-dev.tsx | 1 + src/Settings/Settings.tsx | 9 ++++- src/Viewer/Viewer.stories.tsx | 14 ++++---- src/Viewer/Viewer.tsx | 7 ++-- src/Viewer/objects/Element.tsx | 7 +++- src/Viewer/objects/Grid.tsx | 4 +-- src/Viewer/objects/Node.tsx | 9 +++-- src/Viewer/objects/Text.tsx | 17 +++++----- 10 files changed, 88 insertions(+), 42 deletions(-) diff --git a/src/App/App.stories.tsx b/src/App/App.stories.tsx index 7a3d9f87..3a7b15dc 100644 --- a/src/App/App.stories.tsx +++ b/src/App/App.stories.tsx @@ -10,7 +10,7 @@ export const Invalid: StoryObj = { }, }; -export const Basic: StoryObj = { +export const Default: StoryObj = { args: { script: `import { analyzing } from 'https://unpkg.com/awatif'; @@ -46,7 +46,7 @@ export const analysisResults = analyzing(nodes, elements, assignments);`, }, }; -export const Undeformed: StoryObj = { +export const UndeformedAndSize: StoryObj = { 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 = { +export const ParametersAndResults: StoryObj = { 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", + }, }, }; diff --git a/src/App/App.tsx b/src/App/App.tsx index c33f62c0..71bce2fc 100644 --- a/src/App/App.tsx +++ b/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({}); const [awatifKey, setAwatifKey] = createSignal(""); const [userPlan, setUserPlan] = createSignal(""); - const nodes = () => - settings.deformedShape ? deformedNodes() : undeformedNodes(); onMount(async () => { // set User plan and Awatif key @@ -148,6 +147,18 @@ 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], () => @@ -155,11 +166,19 @@ export const analysisResults = analyzing(nodes, elements, assignments);`; ) ); - // 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);`; - - + + - {(node) => } + + {(node) => } + @@ -256,6 +277,7 @@ export const analysisResults = analyzing(nodes, elements, assignments);`; )} @@ -264,7 +286,11 @@ export const analysisResults = analyzing(nodes, elements, assignments);`; {(node, index) => ( - + )} @@ -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} /> )} diff --git a/src/Settings/Settings.stories-dev.tsx b/src/Settings/Settings.stories-dev.tsx index d22cc217..cb18f3c7 100644 --- a/src/Settings/Settings.stories-dev.tsx +++ b/src/Settings/Settings.stories-dev.tsx @@ -9,6 +9,7 @@ export default { (
- - + + - - - - + + + + - + diff --git a/src/Viewer/Viewer.tsx b/src/Viewer/Viewer.tsx index 09189e06..4a3c0aa8 100644 --- a/src/Viewer/Viewer.tsx +++ b/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(); diff --git a/src/Viewer/objects/Element.tsx b/src/Viewer/objects/Element.tsx index 6127d09c..90187523 100644 --- a/src/Viewer/objects/Element.tsx +++ b/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(); diff --git a/src/Viewer/objects/Grid.tsx b/src/Viewer/objects/Grid.tsx index 051bf763..26f8b645 100644 --- a/src/Viewer/objects/Grid.tsx +++ b/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); diff --git a/src/Viewer/objects/Node.tsx b/src/Viewer/objects/Node.tsx index c7159c63..7f01f620 100644 --- a/src/Viewer/objects/Node.tsx +++ b/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(); diff --git a/src/Viewer/objects/Text.tsx b/src/Viewer/objects/Text.tsx index c52cd6fd..78c8fac8 100644 --- a/src/Viewer/objects/Text.tsx +++ b/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}; }