[Bug]: Modifying a link by pulling the segment-handle throws an error in _normalizeVertex (manhattan router)
frnora opened this issue · comments
frnora commented
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:
- Hover the link
- 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