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 (
+
+ );
+}
+
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 (
- }>
+