46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { Game, Resource } from "@incgame/engine";
|
|
import { GraphNode } from "../ui/graph";
|
|
|
|
type Props = {
|
|
game: Game,
|
|
from: { node: GraphNode, resource: Resource },
|
|
to: { node: GraphNode, resource: Resource },
|
|
}
|
|
|
|
export const LinkLine = function ({ from, to }: Props) {
|
|
const markerId = `node-line-arrow-${from.node.entity.id}-${to.node.entity.id}`.replace(/[^a-zA-Z0-9_-]/g, '_');
|
|
|
|
const fromSocket = from.node.entity.getDisplayInfo().sockets.find((s) => s.type === 'input' && s.resource == from.resource);
|
|
const toSocket = to.node.entity.getDisplayInfo().sockets.find((s) => s.type === 'output' && s.resource == to.resource);
|
|
|
|
if (!fromSocket || !toSocket)
|
|
return null;
|
|
|
|
return (
|
|
<svg>
|
|
<defs>
|
|
<marker
|
|
id={markerId}
|
|
viewBox="0 0 10 10"
|
|
refX="9"
|
|
refY="5"
|
|
markerWidth="6"
|
|
markerHeight="6"
|
|
orient="auto-start-reverse"
|
|
>
|
|
<path d="M0,0 L10,5 L0,10 z" fill="white" />
|
|
</marker>
|
|
</defs>
|
|
<line
|
|
x1={from.node.position.x}
|
|
y1={from.node.position.y}
|
|
x2={to.node.position.x}
|
|
y2={to.node.position.y}
|
|
stroke="white"
|
|
strokeWidth={2}
|
|
markerStart={`url(#${markerId})`}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|