72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import {FC, HTMLProps, PropsWithChildren, useMemo} from "react";
|
|
import styles from './ProducingGraph.module.css'
|
|
import {EntityIcon} from "../../home/EntityIcon/EntityIcon";
|
|
import {sortByProperty} from "../../../src/utils";
|
|
import {EnrichedEntity, Recipe} from "../../../src/types";
|
|
|
|
interface GraphNodeBase {
|
|
inputs: string[]
|
|
outputs: string[]
|
|
name: string
|
|
}
|
|
|
|
export type GraphNode<T extends Record<string, unknown>> = GraphNodeBase & T
|
|
|
|
interface Props<T extends {}> {
|
|
nodes: GraphNode<T>[]
|
|
inputs: string[]
|
|
outputs?: string[]
|
|
childType: FC<HTMLProps<HTMLDivElement> & {node: GraphNode<T>}>
|
|
}
|
|
|
|
export const ProducingGraph = <T extends Record<string, unknown>,>({nodes, inputs, outputs, childType: ChildType}: PropsWithChildren<Props<T>>) => {
|
|
const rows: GraphNode<T>[][] = useMemo(() => {
|
|
const available = new Set(inputs)
|
|
let todo = [...nodes]
|
|
const result: GraphNode<T>[][] = []
|
|
while (todo.length) {
|
|
const amount = todo.length
|
|
const thisRow: string[] = []
|
|
result.push([])
|
|
|
|
todo = todo.filter((node) => {
|
|
if (node.inputs.every(input => available.has(input))) {
|
|
result[result.length - 1].push(node)
|
|
thisRow.push(...node.outputs)
|
|
return false
|
|
}
|
|
return true
|
|
})
|
|
thisRow.map(uid => available.add(uid))
|
|
result[result.length - 1].sort(sortByProperty(val => -val.outputs.length * 1000 + -val.inputs.length))
|
|
|
|
if (amount === todo.length) {
|
|
console.warn("Loop detected! Left over:", todo)
|
|
result.pop()
|
|
break
|
|
}
|
|
}
|
|
return result
|
|
}, [inputs, nodes])
|
|
|
|
return <div className={styles.plane}>
|
|
<div className={styles.row}>
|
|
{inputs.map((input, idx) => <EntityIcon className={styles.input} key={input} value={input} />)}
|
|
</div>
|
|
{rows.map((row, colIdx) => {
|
|
return <div className={styles.row} key={colIdx}>
|
|
{
|
|
row.map((node) => <ChildType
|
|
className={styles.node}
|
|
key={node.name}
|
|
node={node}
|
|
/>)
|
|
}
|
|
</div>
|
|
})}
|
|
{outputs ? <div className={styles.row}>
|
|
{outputs.map((input, idx) => <EntityIcon className={styles.input} key={input} value={input} />)}
|
|
</div> : null }
|
|
</div>
|
|
}
|