All files / src/built-in rect.tsx

86.36% Statements 19/22
77.78% Branches 14/18
66.67% Functions 4/6
90.48% Lines 19/21

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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 981x 1x   1x   1x                   1x   63286x     63286x     10550x                   10550x               10550x 10550x 10550x 10550x 10550x 10550x   10550x 10540x     10550x   10550x                                                                                      
import * as React from "react";
import { GraphNodeState, ICanvasNode, TSetData } from "../components";
import { INodeConfig, INodeDrawArgs } from "../contexts";
import { updateNode } from "../utils";
 
const getChangeHandler = (node: ICanvasNode, setData: TSetData) => (
  e: React.ChangeEvent<HTMLInputElement>
) => {
  updateNode(
    node.id,
    { data: { ...node.data, comment: e.target.value } },
    setData
  );
};
 
export const rect: INodeConfig = {
  getHeight(): number {
    return 150;
  },
  getWidth(): number {
    return 150;
  },
  getStyle(node: ICanvasNode): Partial<React.CSSProperties> {
    Iif (
      node.state === GraphNodeState.selected ||
      node.state === GraphNodeState.activated
    ) {
      return {
        fill: "#ffffff",
        stroke: "#0078D4"
      };
    }
 
    return {
      fill: "#ffffff",
      fillOpacity: 0.1,
      stroke: "#cccccc",
      borderRadius: "5"
    };
  },
  render(args: INodeDrawArgs): React.ReactNode {
    const node = args.model;
    const graphProps = args.graphProps;
    const width = rect.getWidth(node);
    const height = rect.getHeight(node);
    const style = rect.getStyle ? rect.getStyle(node) : {};
    const textY = node.y + height / 3;
 
    if (!graphProps.isNodeDraggingDisabled) {
      style.cursor = "move";
    }
 
    const comment = node.data && node.data.comment ? node.data.comment : "";
 
    return (
      <g key={node.id}>
        <rect
          width={width}
          height={height}
          x={node.x}
          y={node.y}
          style={style}
          rx={style.borderRadius}
        />
        <text x={node.x} y={textY} fontSize={12}>
          {node.name}
        </text>
        {node.data &&
          node.data.comment &&
          node.state !== GraphNodeState.editing && (
            <text
              x={node.x}
              y={textY + 20}
              fontSize={12}
              className={`comment-${node.id}`}
            >
              {node.data.comment}
            </text>
          )}
        {node.state === GraphNodeState.editing && (
          <foreignObject
            x={node.x}
            y={textY}
            height={height / 2.5}
            width={width - 5}
          >
            <input
              value={comment}
              placeholder="Input your comment here"
              onChange={getChangeHandler(node, args.setData.bind(null))}
            />
          </foreignObject>
        )}
      </g>
    );
  }
};