'How to change only 1 point of a dojox.gfx.Line?
I am creating an editor where nodes (dojo groups) are connected to each other via links (dojo lines). When moving these nodes using applyTransform(matrix) the node moves correctly but the entire line moves according to the transformation. What I want is for only the point connected to the node to move with it and for the other point to stay where it is.
I have a custom mover which should move the node and the connected line point
dojo.declare("customMover", dojox.gfx.Mover, {
onMouseMove: function(event) {
let transform = this.shape.getTransform();
if (transform==null) {
transform = { dx: 0, dy: 0 };
}
let x = event.clientX;
let y = event.clientY;
this.shape.applyLeftTransform({
dx: x - this.lastX,
dy: y - this.lastY
});
this.shape.bonds.forEach(bond => {
console.log(bond)
for (let nodeIndex = 0; nodeIndex < bond.nodes.length; nodeIndex++) {
let node = bond.nodes[nodeIndex];
if (node === this.shape) {
// do something to change 1 point of the line
}
}
})
this.lastX = x;
this.lastY = y;
dojo.stopEvent(event);
}
})
and a function that creates lines between two nodes.
export function createLine(start, end, group) {
let startMat = null;
let endMat = null;
let startNode = start.getParent()
let endNode = end.getParent()
if (startNode.matrix) {
startMat = startNode.matrix
}
if (endNode.matrix) {
endMat = endNode.matrix
}
let line = group.createLine({
x1: startMat ? start.shape.cx + startMat.dx : start.shape.cx,
y1: startMat ? start.shape.cy + startMat.dy : start.shape.cy,
x2: endMat ? end.shape.cx + endMat.dx : end.shape.cx,
y2: endMat ? end.shape.cy + endMat.dy : end.shape.cy})
line.moveToBack()
line.setStroke({})
line.nodes = [startNode, endNode]
startNode.bonds.push(line)
endNode.bonds.push(line)
}
How could I change one point of the line?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
