106 lines
4.4 KiB
TypeScript
106 lines
4.4 KiB
TypeScript
import {FC, HTMLProps, PropsWithChildren, useEffect, useRef, useState} from "react";
|
|
import styles from './ProducingGraph.module.css'
|
|
import {EntityIcon} from "../../home/EntityIcon/EntityIcon";
|
|
import {createPath, drawLine} from "../../../src/svg";
|
|
import {AdditionalNode, GraphNode, GraphNodeWithIds, isAdditionalNode} from "../../../src/graph-untangle/types";
|
|
import {graphUntangled} from "../../../src/graph-untangle";
|
|
import {Dict} from "../../../src/types";
|
|
|
|
interface Props<T extends {}> {
|
|
nodes: GraphNode<T>[]
|
|
inputs: string[]
|
|
outputs?: string[]
|
|
childType: FC<HTMLProps<HTMLDivElement> & {node: GraphNode<T>}>
|
|
}
|
|
|
|
export const ProducingGraph = <T extends Dict<unknown>,>({nodes, inputs, outputs, childType: ChildType}: PropsWithChildren<Props<T>>) => {
|
|
const planeRef = useRef<HTMLDivElement>(null)
|
|
const [[rows, nodeMap], setGraph] = useState<[string[][], Dict<GraphNodeWithIds<T|AdditionalNode>>]>(graphUntangled(nodes, inputs, outputs ?? [], 3000))
|
|
|
|
useEffect(() => {
|
|
if (!planeRef.current) return
|
|
const plane = planeRef.current
|
|
function createSvgElement() {
|
|
const elem = document.createElementNS("http://www.w3.org/2000/svg", "svg")
|
|
elem.id = 'arrows'
|
|
elem.setAttribute('style', 'position: absolute; inset: 0 0 0 0; pointer-events: none; z-index: -10;')
|
|
elem.setAttributeNS(null, 'stroke', 'black')
|
|
elem.setAttributeNS(null, 'fill', 'none')
|
|
plane.appendChild(elem)
|
|
return elem
|
|
}
|
|
const svg = document.getElementById('arrows') ?? createSvgElement()
|
|
const width = Math.round(plane.getBoundingClientRect().width)
|
|
const height = Math.round(plane.getBoundingClientRect().height)
|
|
svg.setAttribute('width', `${width}`)
|
|
svg.setAttribute('height', `${height}`)
|
|
svg.setAttributeNS(null, 'viewBox', `0 0 ${width} ${height}`)
|
|
svg.replaceChildren()
|
|
|
|
let paths: string[] = []
|
|
plane.querySelectorAll('[data-outputs]').forEach(startNode => {
|
|
if (!(startNode instanceof HTMLElement)) return
|
|
(startNode.dataset.outputs?.split(' ') ?? []).forEach(output => {
|
|
const endNode = plane.querySelector(`[data-name="${output}"]`)
|
|
if (!(endNode instanceof HTMLElement)) return
|
|
paths.push(createPath(plane.getBoundingClientRect(), startNode.getBoundingClientRect(), endNode.getBoundingClientRect()))
|
|
})
|
|
})
|
|
plane.querySelectorAll('[data-hidden="true"][data-outputs]').forEach(elem => {
|
|
if (!(elem instanceof HTMLElement)) return
|
|
paths.push(drawLine(plane.getBoundingClientRect(), elem.getBoundingClientRect()))
|
|
})
|
|
const path = document.createElementNS('http://www.w3.org/2000/svg',"path")
|
|
path.setAttributeNS(null, 'd', paths.join(' '))
|
|
svg.appendChild(path)
|
|
})
|
|
|
|
return <div className={styles.plane} ref={planeRef}>
|
|
{rows.map((row, colIdx) => (
|
|
<div className={styles.row} key={colIdx} data-row={true}>
|
|
{
|
|
row.map((uid) => {
|
|
const node = nodeMap[uid]
|
|
return (
|
|
!isAdditionalNode(node)
|
|
? <span
|
|
data-name={node.___uid}
|
|
data-inputs={node.___uidInputs.join(' ')}
|
|
data-outputs={node.___uidOutputs.join(' ')}
|
|
key={node.___uid}
|
|
data-hidden={node.___uidOutputs.length > 0}>
|
|
<ChildType
|
|
className={styles.node}
|
|
node={node}
|
|
/>
|
|
</span>
|
|
: node.___type === 'h'
|
|
? <span
|
|
className={styles.hidden}
|
|
key={node.___uid}
|
|
data-name={node.___uid}
|
|
data-inputs={node.___uidInputs.join(' ')}
|
|
data-outputs={node.___uidOutputs.join(' ')}
|
|
data-hidden={true}></span>
|
|
: node.___type === 'i'
|
|
? <span
|
|
key={node.___uid}
|
|
data-name={node.___uid}
|
|
data-outputs={node.___uidOutputs.join(' ')}
|
|
data-hidden={true}>
|
|
<EntityIcon value={node.name}/>
|
|
</span>
|
|
: <EntityIcon
|
|
key={node.___uid}
|
|
value={node.name}
|
|
data-name={node.___uid}
|
|
data-inputs={node.___uidInputs.join(' ')}
|
|
/>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
))}
|
|
</div>
|
|
}
|