search

MrBlenny / react-flow-chart

🌊 A flexible, stateless, declarative flow chart library for react.
https://mrblenny.github.io/react-flow-chart/index.html
MIT License
1.48k stars 306 forks source link

TypeError: Cannot read properties of undefined (reading 'x') #246

Closed jbflow closed 2 years ago

jbflow commented 2 years ago

Seem to be getting an error that I can't trace. Hoping someone might be able to point out something obvious that I'm missing perhaps? As far as I can tell the object matches what is expected. I'm generating this elsewhere with some Python.

My data looks like this (sorry, it's quite long):

export const OBJECT = {
  hovered: {},
  links: {
    link0: {
      from: {
        nodeId: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc",
        portId: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-port0",
      },
      id: "link0",
      to: {
        nodeId: "b31656a9-98f0-47f8-ab80-7e7f92c46a77",
        portId: "b31656a9-98f0-47f8-ab80-7e7f92c46a77-input",
      },
    },
    link1: {
      from: {
        nodeId: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc",
        portId: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-port1",
      },
      id: "link1",
      to: {
        nodeId: "b31656a9-98f0-47f8-ab80-7e7f92c46a77",
        portId: "b31656a9-98f0-47f8-ab80-7e7f92c46a77-input",
      },
    },
    link2: {
      from: {
        nodeId: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc",
        portId: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-port2",
      },
      id: "link2",
      to: {
        nodeId: "b31656a9-98f0-47f8-ab80-7e7f92c46a77",
        portId: "b31656a9-98f0-47f8-ab80-7e7f92c46a77-input",
      },
    },
    link3: {
      from: {
        nodeId: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc",
        portId: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-port3",
      },
      id: "link3",
      to: {
        nodeId: "b31656a9-98f0-47f8-ab80-7e7f92c46a77",
        portId: "b31656a9-98f0-47f8-ab80-7e7f92c46a77-input",
      },
    },
    link4: {
      from: {
        nodeId: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc",
        portId: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-port4",
      },
      id: "link4",
      to: {
        nodeId: "e3df8d12-4d26-4a75-ab7a-e5e7f92521e1",
        portId: "e3df8d12-4d26-4a75-ab7a-e5e7f92521e1-input",
      },
    },
    link5: {
      from: {
        nodeId: "e3df8d12-4d26-4a75-ab7a-e5e7f92521e1",
        portId: "e3df8d12-4d26-4a75-ab7a-e5e7f92521e1-port0",
      },
      id: "link5",
      to: {
        nodeId: "c441e37a-29c5-4e61-8fb9-dd123b8625e5",
        portId: "c441e37a-29c5-4e61-8fb9-dd123b8625e5-input",
      },
    },
    link6: {
      from: {
        nodeId: "e3df8d12-4d26-4a75-ab7a-e5e7f92521e1",
        portId: "e3df8d12-4d26-4a75-ab7a-e5e7f92521e1-port1",
      },
      id: "link6",
      to: {
        nodeId: "e8fba996-8fbd-4af1-ad96-d9ecfa83cf85",
        portId: "e8fba996-8fbd-4af1-ad96-d9ecfa83cf85-input",
      },
    },
    link7: {
      from: {
        nodeId: "ea32d77f-5721-43b5-b71e-eedfed39a3d9",
        portId: "ea32d77f-5721-43b5-b71e-eedfed39a3d9-port0",
      },
      id: "link7",
      to: {
        nodeId: "78d66469-6449-40b9-8813-3d44cafc04f5",
        portId: "78d66469-6449-40b9-8813-3d44cafc04f5-input",
      },
    },
    link8: {
      from: {
        nodeId: "78d66469-6449-40b9-8813-3d44cafc04f5",
        portId: "78d66469-6449-40b9-8813-3d44cafc04f5-port0",
      },
      id: "link8",
      to: {
        nodeId: "4641ca2b-a80b-4ad8-a042-4ca5421d5a95",
        portId: "4641ca2b-a80b-4ad8-a042-4ca5421d5a95-input",
      },
    },
  },
  nodes: {
    node0: {
      id: "b31656a9-98f0-47f8-ab80-7e7f92c46a77",
      ports: {
        input: {
          id: "b31656a9-98f0-47f8-ab80-7e7f92c46a77-input",
          type: "input",
        },
      },
      position: { x: 596, y: 187 },
      type: "input-output",
    },
    node1: {
      id: "bbb165e8-ecb1-478a-aae4-4f62866b0dfd",
      ports: {
        input: {
          id: "bbb165e8-ecb1-478a-aae4-4f62866b0dfd-input",
          type: "input",
        },
      },
      position: { x: 66, y: 180 },
      type: "input-output",
    },
    node10: {
      id: "4641ca2b-a80b-4ad8-a042-4ca5421d5a95",
      ports: {
        input: {
          id: "4641ca2b-a80b-4ad8-a042-4ca5421d5a95-input",
          type: "input",
        },
      },
      position: { x: 1815, y: 118 },
      type: "input-output",
    },
    node11: {
      id: "ea32d77f-5721-43b5-b71e-eedfed39a3d9",
      ports: {
        input: {
          id: "ea32d77f-5721-43b5-b71e-eedfed39a3d9-input",
          type: "input",
        },
        port: {
          id: "ea32d77f-5721-43b5-b71e-eedfed39a3d9-port",
          type: "output",
        },
        port0: {
          id: "ea32d77f-5721-43b5-b71e-eedfed39a3d9-port0",
          type: "output",
        },
      },
      position: { x: 1466, y: 439 },
      type: "input-output",
    },
    node12: {
      id: "78d66469-6449-40b9-8813-3d44cafc04f5",
      ports: {
        input: {
          id: "78d66469-6449-40b9-8813-3d44cafc04f5-input",
          type: "input",
        },
        port: {
          id: "78d66469-6449-40b9-8813-3d44cafc04f5-port",
          type: "output",
        },
        port0: {
          id: "78d66469-6449-40b9-8813-3d44cafc04f5-port0",
          type: "output",
        },
      },
      position: { x: 1534, y: 96 },
      type: "input-output",
    },
    node13: {
      id: "6032ac33-6235-4cf3-9cf5-6ced0bc80341",
      ports: {
        input: {
          id: "6032ac33-6235-4cf3-9cf5-6ced0bc80341-input",
          type: "input",
        },
      },
      position: { x: 1809, y: 350 },
      type: "input-output",
    },
    node2: {
      id: "fc6afefc-a6c9-4abf-b325-c4fad6202b98",
      ports: {
        input: {
          id: "fc6afefc-a6c9-4abf-b325-c4fad6202b98-input",
          type: "input",
        },
      },
      position: { x: 90, y: 364 },
      type: "input-output",
    },
    node3: {
      id: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc",
      ports: {
        input: {
          id: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-input",
          type: "input",
        },
        port: {
          id: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-port",
          type: "output",
        },
        port0: {
          id: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-port0",
          type: "output",
        },
        port1: {
          id: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-port1",
          type: "output",
        },
        port2: {
          id: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-port2",
          type: "output",
        },
        port3: {
          id: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-port3",
          type: "output",
        },
        port4: {
          id: "82c3499c-3082-4bdf-9c7b-b47e8d8457cc-port4",
          type: "output",
        },
      },
      position: { x: 321, y: 212 },
      type: "input-output",
    },
    node4: {
      id: "e3df8d12-4d26-4a75-ab7a-e5e7f92521e1",
      ports: {
        input: {
          id: "e3df8d12-4d26-4a75-ab7a-e5e7f92521e1-input",
          type: "input",
        },
        port: {
          id: "e3df8d12-4d26-4a75-ab7a-e5e7f92521e1-port",
          type: "output",
        },
        port0: {
          id: "e3df8d12-4d26-4a75-ab7a-e5e7f92521e1-port0",
          type: "output",
        },
        port1: {
          id: "e3df8d12-4d26-4a75-ab7a-e5e7f92521e1-port1",
          type: "output",
        },
      },
      position: { x: 881, y: 389 },
      type: "input-output",
    },
    node5: {
      id: "e8fba996-8fbd-4af1-ad96-d9ecfa83cf85",
      ports: {
        input: {
          id: "e8fba996-8fbd-4af1-ad96-d9ecfa83cf85-input",
          type: "input",
        },
      },
      position: { x: 1106, y: 829 },
      type: "input-output",
    },
    node6: {
      id: "fca1f2fa-2bb3-4266-a8cd-974dfeaa358b",
      ports: {
        input: {
          id: "fca1f2fa-2bb3-4266-a8cd-974dfeaa358b-input",
          type: "input",
        },
      },
      position: { x: 1836, y: 914 },
      type: "input-output",
    },
    node7: {
      id: "c441e37a-29c5-4e61-8fb9-dd123b8625e5",
      ports: {
        input: {
          id: "c441e37a-29c5-4e61-8fb9-dd123b8625e5-input",
          type: "input",
        },
      },
      position: { x: 1116, y: 165 },
      type: "input-output",
    },
    node8: {
      id: "b91fb6cc-0702-4275-91d0-64e0d221d7be",
      ports: {
        input: {
          id: "b91fb6cc-0702-4275-91d0-64e0d221d7be-input",
          type: "input",
        },
      },
      position: { x: 2055, y: 328 },
      type: "input-output",
    },
    node9: {
      id: "1d5b0026-abe1-4481-b0db-bb7442106215",
      ports: {
        input: {
          id: "1d5b0026-abe1-4481-b0db-bb7442106215-input",
          type: "input",
        },
      },
      position: { x: 1412, y: 760 },
      type: "input-output",
    },
  },
  offset: { x: 0, y: 0 },
  scale: 1,
  selected: {},
};