[Bug]: Modifying a link by pulling the segment-handle throws an error in _normalizeVertex (manhattan router)

[frnora]

What happened?

Hi there!

As the title suggests, trying to modify a link by pulling its segment results in an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'x')
    at child._normalizeVertex (Link.mjs:382:39)
    at child.vertices (Link.mjs:348:1)
    at child.onHandleChanging (Segments.mjs:324:1)
    at triggerEvents (backbone.js:336:1)
    at triggerApi (backbone.js:322:1)
    at eventsApi (backbone.js:110:1)
    at Events.trigger (backbone.js:312:1)
    at child.onPointerMove (Segments.mjs:75:1)
    at HTMLDocument.dispatch (jquery.js:5466:1)
    at elemData.handle (jquery.js:5270:1)

Here is the code to reproduce it:

import { dia, linkTools, shapes, ui } from "@clientio/rappid";

export default class App {
    constructor() {
        let paperEl = document.querySelector('.paper');
        let graph = new dia.Graph();
        let paper = new dia.Paper({
            interactive: true,
            async: true,
            gridSize: 10,
            drawGrid: {
                name: 'mesh',
                args: {
                    color: '#eee'
                }
            },
            width: 500,
            height: 500,
            background: {
                color: '#fff'
            },
            sorting: dia.Paper.sorting.APPROX,
            linkPinning: false,
            model: graph,
            cellViewNamespace: shapes,
            defaultRouter: {
                name: 'manhattan',
                args: {
                    padding: 0
                }
            },
            defaultConnectionPoint: {
                name: 'bbox',
            }
        });

        paper.on('link:mouseenter', this.onLinkMouseEnter);

        let paperScroller = new ui.PaperScroller({
            paper,
            padding: 0
        });

        paperEl.appendChild(paperScroller.el);
        paperScroller.render();

        let circle = this.circle = new shapes.standard.Circle({
            position: { x: 100, y: 100 }
        });
        circle.resize(100, 100);
        graph.addCell(circle);

        let rect = this.rect = new shapes.standard.Rectangle({
            position: { x: 210, y: 100 },
        });
        rect.resize(100, 100);
        graph.addCell(rect);

        let link = new shapes.standard.Link();
        link.source(circle);
        link.target(rect);
        link.addTo(graph);
    }

    onLinkMouseEnter(linkView) {
        let lt = linkTools;
        let toolsView = new dia.ToolsView({
            name: 'link-hover',
            tools: [
                new lt.Vertices(),
                new lt.Segments(),
                new lt.Boundary({ padding: 10 })
            ]
        });
    
        linkView.addTools(toolsView);
    }
}

Steps to reproduce:

1. Hover the link
2. Pull the link's segment handle from above the elements to below the elements

Result:

• Error is thrown and an unnecessary complex connection is made.

Expected result:

• No error and simpler path

Version

3.6.3

What browsers are you seeing the problem on?

Firefox, Chrome

What operating system are you seeing the problem on?

Windows, Mac

[frnora]

Oh, I just realized this is most likely related to #2044

So I assume the solution is not to use Segments with manhattan? Feel free to close if that's the solution and this is not going to be fixed.