[Bug]: Segments tool throw errors

[ceitflow]

What happened?

Sometimes when using segments tool with links we can see errors in the console. I was able to reproduce this in Kitchensink demo as well:

Looks like the method onHandleChanging is assigning undefined in the vertices list, and this is further passed down to the link.

Version

3.6.3

What browsers are you seeing the problem on?

Chrome

What operating system are you seeing the problem on?

Windows, Linux

[kumilingus]

@ceitflow, could you please share the JSON of the graph (or better the link JSON) when the error occurred?

[ceitflow]

@kumilingus Sure, here is a simplified JSON from our project with 2 rectangles with ports and a single link, to reproduce just use segments tool and pull the link down:

        "cells": [
          {
            "z": -1,
            "type": "standard.Link",
            "router": {
              "name": "manhattan"
            },
            "source": {
              "id": 4,
              "port": "right",
              "magnet": "portBody"
            },
            "target": {
              "id": 6,
              "port": "left",
              "magnet": "portBody"
            },
            "id": "cf1c72a2-6ebc-4f76-b17e-0ed0f0340504",
            "connector": {
              "name": "normal"
            },
          },
          {
            "portLabelMarkup": [],
            "ports": {
              "items": [
                {
                  "id": "right",
                  "group": "right",
                  "args": {
                    "dx": 2,
                    "dy": 0
                  }
                },
                {
                  "id": "left",
                  "group": "left",
                  "args": {
                    "dx": -2,
                    "dy": 0
                  }
                }
              ],
              "groups": {
                "right": {
                  "position": {
                    "name": "right"
                  },
                  "attrs": {
                    "root": {
                      "magnet-selector": "portBody"
                    },
                    "portBody": {
                      "magnet": true,
                      "r": 4,
                      "strokeWidth": 1,
                    },
                    "wrapper": {
                      "magnet": true,
                      "fill": "transparent",
                      "magnet-selector": "portBody",
                      "r": 24,
                    }
                  },
                  "markup": [
                    {
                      "tagName": "circle",
                      "selector": "wrapper"
                    },
                    {
                      "tagName": "circle",
                      "selector": "portBody"
                    }
                  ]
                },
                "left": {
                  "position": {
                    "name": "left"
                  },
                  "attrs": {
                    "root": {
                      "magnet-selector": "portBody"
                    },
                    "portBody": {
                      "magnet": true,
                      "r": 4,
                      "strokeWidth": 1,
                    },
                    "wrapper": {
                      "magnet": true,
                      "fill": "transparent",
                      "magnet-selector": "portBody",
                      "r": 24,
                    }
                  },
                  "markup": [
                    {
                      "tagName": "circle",
                      "selector": "wrapper"
                    },
                    {
                      "tagName": "circle",
                      "selector": "portBody"
                    }
                  ]
                }
              }
            },
            "type": "standard.Rectangle",
            "size": {
              "width": 224,
              "height": 48
            },
            "position": {
              "x": 512,
              "y": 320
            },
            "markup": [
              {
                "tagName": "rect",
                "selector": "body"
              },
            ],
            "id": 4,
          },
          {
            "portLabelMarkup": [],
            "ports": {
              "items": [
                {
                  "id": "right",
                  "group": "right",
                  "args": {
                    "dx": 2,
                    "dy": 0
                  }
                },
                {
                  "id": "left",
                  "group": "left",
                  "args": {
                    "dx": -2,
                    "dy": 0
                  }
                }
              ],
              "groups": {
                "right": {
                  "position": {
                    "name": "right"
                  },
                  "attrs": {
                    "root": {
                      "magnet-selector": "portBody"
                    },
                    "portBody": {
                      "magnet": true,
                      "r": 4,
                      "strokeWidth": 1,
                    },
                    "wrapper": {
                      "magnet": true,
                      "fill": "transparent",
                      "magnet-selector": "portBody",
                      "r": 24,
                    }
                  },
                  "markup": [
                    {
                      "tagName": "circle",
                      "selector": "wrapper"
                    },
                    {
                      "tagName": "circle",
                      "selector": "portBody"
                    }
                  ]
                },
                "left": {
                  "position": {
                    "name": "left"
                  },
                  "attrs": {
                    "root": {
                      "magnet-selector": "portBody"
                    },
                    "portBody": {
                      "magnet": true,
                      "r": 4,
                      "strokeWidth": 1,
                    },
                    "wrapper": {
                      "magnet": true,
                      "fill": "transparent",
                      "magnet-selector": "portBody",
                      "r": 24,
                    }
                  },
                  "markup": [
                    {
                      "tagName": "circle",
                      "selector": "wrapper"
                    },
                    {
                      "tagName": "circle",
                      "selector": "portBody"
                    }
                  ]
                }
              }
            },
            "type": "standard.Rectangle",
            "size": {
              "width": 224,
              "height": 48
            },
            "position": {
              "x": 992,
              "y": 320
            },
            "markup": [
              {
                "tagName": "rect",
                "selector": "body"
              },
            ],
            "id": 6,
          }
        ]
 }

[kumilingus]

The segment tool is meant to be used with normal router. It adjusts vertices, not route.

1. We should mention this in the docs
2. Perhaps we should throw an error saying not to use it with manhattan or orthogonal router. Mainly, we have to exit before the Cannot read properties of undefined exception.
3. Do not show segment tools in the Kitchen Sink app for links with other than normal router.

---

If you want to use segment tools with orthogonal like router you can check out this CodePen. Introduces a custom element view that translates near vertices when moving.

[ceitflow]

Thanks for clarification @kumilingus, I'll let my team know

[kumilingus]

Fixed in #2334.