Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 1x 1x 1x 21166x 1x 10583x 1x 10583x 10583x 10583x 10583x | import * as React from "react"; import { GraphEdgeState, ICanvasEdge } from "../components"; import { IEdgeConfig } from "../contexts"; const getControlPointDistance = (y1: number, y2: number): number => { return Math.min( 5 * 15, // 5 is port height Math.max(5 * 3, Math.abs((y1 - (y2 + 5)) / 2)) ); }; const getPathD = (x1: number, x2: number, y1: number, y2: number): string => { // The ports are even width in px. and paths are 2 px. wide. We therefore subtract 1 from the HalfWidth to have them appear centered -- center of the path lines up with center of the port. return `M${x1 + 2 - 1},${y1}C${x1 + 2 - 1},${y1 - getControlPointDistance(y1, y2)},${x2 + 2 - 1},${y2 + 5 + getControlPointDistance(y1, y2)},${x2 + 2 - 1},${y2 + 5}`; }; export const line: IEdgeConfig = { getStyle(edge: ICanvasEdge): React.CSSProperties { return { cursor: "crosshair", stroke: edge.state === GraphEdgeState.selected ? "#015cda" : "#ccc", strokeWidth: "2" }; }, render(args): React.ReactNode { const edge = args.model; const style = line.getStyle ? line.getStyle(edge) : {}; return ( <path key={edge.id} d={getPathD(args.x2, args.x1, args.y2, args.y1)} fill="none" style={style} id={`edge${edge.id}`} /> ); } }; |