Hi Walter,
I’m trying to delete a “bend point” by double clicking on the point adornment “handle”. I’m not sure what’s the right approach to do that, and I couldn’t find any samples, hence, asking for help here :)
I know you can drag the bend point to close-to-a-straight-line-as-possible and the point disappears, but the end user would like something simpler and more obvious.
I’ve been trying to extend the LinkReshapingTool to do that, by overriding doMouseUp() and kind of “hacking a doubleclick detector” to run custom code.
doMouseUp() {
if (
this.previousMouseUpTick &&
(Date.now() - this.previousMouseUpTick) < 400 &&
this.adornedLink
) {
const index = this.originalPoints.indexOf(this.originalPoint);
const fromPreviousX = index === 1 ? this.adornedLink.fromNode.position.x + (this.adornedLink.fromNode.width / 2) : this.originalPoints.elt(index - 1).x;
const fromPreviousY = index === 1 ? this.adornedLink.fromNode.position.y + (this.adornedLink.fromNode.height / 2) : this.originalPoints.elt(index - 1).y;
const toNextX = index === this.originalPoints.count - 2 ? this.adornedLink.toNode.position.x + (this.adornedLink.toNode.width / 2) : this.originalPoints.elt(index + 1).x;
const toNextY = index === this.originalPoints.count - 2 ? this.adornedLink.toNode.position.y + (this.adornedLink.toNode.height / 2) : this.originalPoints.elt(index + 1).y;
const newPoint = new go.Point(
fromPreviousX + ((toNextX - fromPreviousX) / 2),
fromPreviousY + ((toNextY - fromPreviousY) / 2),
);
const computedNewPoint = this.computeReshape(DiagramUtils.roundPointToInt(newPoint));
// the double click may "shift the point by a few pixels", so we don't want to run this code if this was an actual move.
if (Math.abs(computedNewPoint.x - this.originalPoint.x) > 5 || Math.abs(computedNewPoint.y - this.originalPoint.y) > 5) {
this.reshape(computedNewPoint);
this.diagram.raiseDiagramEvent('LinkReshaped');
this.transactionResult = 'LinkReshaped';
this.stopTool();
} else {
this.stopTool();
}
} else {
this.previousMouseUpTick = Date.now();
super.doMouseUp();
}
}
you can ignore all the weird newPoint calculations for now - In summary, I’m trying to figure out the newPoint that turns that segment into a straight line.
This has a few issues though:
- the double click is not very natural because it first runs the click operation as normal;
- in a simple scenario (only 1 bend point, meaning, link as 3 points), I can straighten out the link but the bend point doesn’t disappear like it would if I dragged the point manually straightening the link. Is it possible to know what extra piece of code the super.doMouseUp() is running to clean up that point?
- if I click on mid-handles (so, not the bend point, but the other handles the user can drag to create additional bend points) I get weird results.
Am I looking at this all wrong? is there a simpler way to achieve this?
Thanks,
Nuno