diff --git a/app/src/components/FallbackDiagram.tsx b/app/src/components/FallbackDiagram.tsx index 29bb745..22dbe55 100644 --- a/app/src/components/FallbackDiagram.tsx +++ b/app/src/components/FallbackDiagram.tsx @@ -510,6 +510,47 @@ function DynamicsDiagram({ height, freq, scruton, sectionShape, sectionSize, sho ); } +export interface PiperackProps { + width: number; + height: number; + elevation: number; + spacing: number; + numFrames: number; + phiTotal: number; + eta: number; +} + +function PiperackDiagram({ width, height, elevation, spacing, numFrames, phiTotal, eta }: PiperackProps) { + const vw = 400, vh = 300; + const s = Math.min((vw - 80) / width, (vh - 80) / (elevation + height)); + const cx = vw / 2, ground = vh - 40; + const w = width * s; + const h = height * s; + const elev = elevation * s; + + void spacing; + void eta; + + return ( + + + + {/* Colunas */} + + + {/* Viga */} + + + {/* Seta de vento */} + + + Vento + + b = {width}m | h = {height}m | z = {elevation}m | φ = {phiTotal.toFixed(2)} | n = {numFrames} + + ); +} + export type FallbackDiagramProps = | { type: 'warehouse'; props: WarehouseProps } | { type: 'cylinder'; props: CylinderProps } @@ -520,7 +561,8 @@ export type FallbackDiagramProps = | { type: 'bridge'; props: BridgeProps } | { type: 'tower'; props: TowerProps } | { type: 'isolatedRoof'; props: IsolatedRoofProps } - | { type: 'dynamics'; props: DynamicsProps }; + | { type: 'dynamics'; props: DynamicsProps } + | { type: 'piperack'; props: PiperackProps }; export default function FallbackDiagram(input: FallbackDiagramProps) { return ( @@ -536,6 +578,7 @@ export default function FallbackDiagram(input: FallbackDiagramProps) { {input.type === 'tower' && } {input.type === 'isolatedRoof' && } {input.type === 'dynamics' && } + {input.type === 'piperack' && } ); } diff --git a/app/src/components/three/Piperack3D.tsx b/app/src/components/three/Piperack3D.tsx index be63d4a..7358072 100644 --- a/app/src/components/three/Piperack3D.tsx +++ b/app/src/components/three/Piperack3D.tsx @@ -4,6 +4,7 @@ import SceneCanvas from '../SceneCanvas'; import { WindArrow } from './WindArrow'; import { useCanvasTheme } from '@/lib/theme'; import type { PipeDef } from '../../lib/modules/piperack'; +import FallbackDiagram from '../FallbackDiagram'; export interface Piperack3DInput { width: number; @@ -94,8 +95,15 @@ function PiperackModel({ export function Piperack3D(props: Piperack3DInput) { const isDark = useCanvasTheme() === 'dark'; + const fallback = ( + + ); + return ( - }> +