All files / src/built-in defaultPort.tsx

88.89% Statements 16/18
77.78% Branches 7/9
100% Functions 2/2
88.24% Lines 15/17

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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 591x 1x             1x   31720x 31720x   31720x     21141x 21141x       31720x             31720x           31720x   31720x   31720x 31720x   31720x                                  
import * as React from "react";
import {
  GraphPortConnectState,
  GraphPortState,
  ICanvasPort
} from "../components";
import { IPortConfig, IPortDrawArgs } from "../contexts";
 
export const defaultPort: IPortConfig = {
  getStyle(port: ICanvasPort): Partial<React.CSSProperties> {
    const stroke = "#ccc";
    let fill = "#fff";
 
    switch (port.connectState) {
      case GraphPortConnectState.connectedAsSource:
      case GraphPortConnectState.connectedAsTarget:
        fill = "gray";
        break;
      default:
    }
 
    switch (port.state) {
      case GraphPortState.activated:
        fill = "#0078D4";
        break;
      default:
    }
 
    return {
      stroke,
      fill
    };
  },
  render(args: IPortDrawArgs): React.ReactNode {
    const port = args.model;
 
    const style = defaultPort.getStyle ? defaultPort.getStyle(port) : {};
 
    const { x, y } = args;
    const polygonPoints = `${x - 5} ${y}, ${x + 7} ${y}, ${x + 1} ${y + 8}`;
 
    return (
      <>
        {port.connectState === GraphPortConnectState.connectedAsTarget ? (
          <polygon points={polygonPoints} style={style} />
        ) : (
          <circle
            key={`${args.parentNode.id}-${args.model.id}`}
            r={5}
            cx={x}
            cy={y}
            style={style}
          />
        )}
      </>
    );
  }
};