Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
2.2 kB · 89 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990import CardProvider from "@thorium/context/CardContext";import * as Cores from "@thorium/cores";import { useStation } from "@thorium/routes/station/useStation";import { LoadingSpinner } from "@thorium/ui/LoadingSpinner";import { Layout, TabNode } from "@thorium/utils/FlexLayout";import { forwardRef, Suspense, useContext, useEffect, useState } from "react";import { ErrorBoundary, useErrorBoundary } from "react-error-boundary";
import { CoreFlexLayoutContext } from "./CoreFlexLayoutContext";
export const CoreFlexLayout = forwardRef<Layout>((_, ref) => { const { layoutModel, setInitialModel } = useContext(CoreFlexLayoutContext);
// A hack to make the layout properly render. const [, setState] = useState({}); useEffect(() => { setTimeout(() => { setState({}); }, 500); }, []); return ( <Layout ref={ref} factory={flexLayoutFactory} model={layoutModel} supportsPopout={false} onModelChange={(a) => setInitialModel(a.toJson())} /> );});
CoreFlexLayout.displayName = "CoreFlexLayout";
function flexLayoutFactory(node: TabNode) { const compName = node.getComponent() as keyof typeof Cores;
const Core = Cores[compName]; if (Core) return ( <CardProvider component={compName} name={compName} cardLoaded isWidget={false}> <ErrorBoundary fallback={ <div className="p-4"> Error loading core. <ErrorReset /> </div> } > <Suspense fallback={<LoadingSpinner compact />}> <Core /> </Suspense> </ErrorBoundary> </CardProvider> ); return null;}
function ErrorReset() { const { shipId } = useStation(); const { resetBoundary } = useErrorBoundary(); useEffect(() => { if (shipId) { resetBoundary(); } }, [shipId, resetBoundary]); return null;}
export function useActiveCores() { const flexLayoutContext = useContext(CoreFlexLayoutContext);
if (!flexLayoutContext) return [];
const nodes: { component: string; activate: () => void }[] = []; flexLayoutContext.layoutModel.visitNodes((node) => { const component = node.getAttr("component"); if (component) { nodes.push({ component, activate() { if (node instanceof TabNode) { node.activate(); } }, }); } }); return nodes;}