How to use the @vx/shape.pathVerticalDiagonal function in @vx/shape
To help you get started, we’ve selected a few @vx/shape examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
dagster-io / dagster / js_modules / dagit / src / graph / SolidLinks.tsx View on Github 
import * as React from "react";
import { Colors } from "@blueprintjs/core";
import { pathVerticalDiagonal } from "@vx/shape";
import {
ILayoutConnection,
IFullPipelineLayout,
IFullSolidLayout
} from "./getFullSolidLayout";
import styled from "styled-components";
import { weakmapMemoize } from "../Util";
export type Edge = { a: string; b: string };
const buildSVGPath = pathVerticalDiagonal({
source: (s: any) => s.source,
target: (s: any) => s.target,
x: (s: any) => s.x,
y: (s: any) => s.y
});
const buildSVGPaths = weakmapMemoize(
(
connections: ILayoutConnection[],
solids: { [name: string]: IFullSolidLayout }
) =>
connections.map(({ from, to }) => ({
path: buildSVGPath({
// can also use from.point for the "Dagre" closest point on node
source: solids[from.solidName].outputs[from.edgeName].port,
target: solids[to.solidName].inputs[to.edgeName].port
