react.joint
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

React JointJS

React wrapper for JointJS: refer to their documentation to learn how to customize JointJS.

React JointJS aims at simplifying the integration with React by letting you render nodes and ports with React components.

Install

yarn add react.joint

Usage

API:

type Port = joint.dia.Element.Port & {
  element: JSX.Element;
  id: string;
  size: { width: number; height: number };
};
 
type Node = joint.dia.Element.Attributes & {
  element: JSX.Element;
  type: string;
  id: string;
  size: { width: number; height: number };
  position: { x: number; y: number };
  ports: Array<Port>;
};
 
type Props = {
  graph: joint.dia.Graph;
  paperOptions: joint.dia.Paper.Options;
  nodes: Array<Node>;
  links: Array<joint.dia.Link>;
  paperRef: (paper: joint.dia.Paper) => void;
};
<ReactJointJS
  nodes={nodes.map(node => ({
    id: node.id,
    position: {
      x: node.x,
      y: node.y
    },
    size: {
      width: 100,
      height: 130
    },
    element: <GraphNode id={node.id} />,
    type: "MyNode",
    ports: [
      {
        id: `${node.id}_1`,
        element: <Port1 label="Out 1" />,
        args: {
          x: 20,
          y: 70
        },
        size: {
          width: 76,
          height: 20
        }
      },
      {
        id: `${node.id}_2`,
        element: <Port2 label="Out 2" />,
        args: {
          x: 20,
          y: 100
        },
        size: {
          width: 76
          height20
        }
      },
      {
        id: `${node.id}_3`,
        element: <div />, // invisible port
        args: {
          x: 8,
          y: 80
        },
        size: {
          width: 0,
          height: 0
        }
      }
    ]
  }))}
  links={links.map(
    link =>
      new joint.shapes.standard.Link({
        source: {
          id: link.source,
          port: `${link.source}_${Math.floor(Math.random() * 2) + 1}` // random port between 1 and 2
        },
        target: { id: link.target, port: `${link.target}_3` },
 
        router: {
          name: "manhattan",
          args: {
            padding: 10
          }
        },
        connector: { name: "rounded" },
        attrs: {
          line: {
            stroke: "#333333",
            strokeWidth: 2
          }
        }
      })
  )}
  paperOptions={{
    width: graphSize.width + 200,
    height: graphSize.height + 200,
    gridSize: 10,
    async: true
  }}
  graph={graph}
  paperRef={paper => {
    this.paper = paper; // save ref to "paper"
  }}
/>

Under the hood

React JointJS uses foreignObject and portals to render your React components inside the svg created and managed by JointJS.

Package Sidebar

Install

npm i react.joint

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

16.4 kB

Total Files

9

Last publish

Collaborators

  • francescocioria