v1.6.03 - linear ruler: getSegmentId

This commit is contained in:
Azgaar 2021-03-05 13:54:52 +03:00
parent e6a79f540d
commit ee324a3fef
4 changed files with 47 additions and 3 deletions

View file

@ -32,7 +32,8 @@ class Ruler {
const dash = rn(30 / distanceScaleInput.value, 2);
const el = this.el = ruler.append("g").attr("class", "ruler").call(d3.drag().on("start", this.drag)).attr("font-size", 10 * size)
el.append("polyline").attr("points", points).attr("class", "white").attr("stroke-width", size);
el.append("polyline").attr("points", points).attr("class", "white").attr("stroke-width", size)
.call(d3.drag().on("start", () => this.addControl(this)));
el.append("polyline").attr("points", points).attr("class", "gray").attr("stroke-width", rn(size * 1.2, 2)).attr("stroke-dasharray", dash);
el.append("g").attr("class", "rulerPoints").attr("stroke-width", .5 * size).attr("font-size", 2 * size);
el.append("text").attr("dx", ".35em").attr("dy", "-.45em").on("click", this.remove);
@ -115,6 +116,16 @@ class Ruler {
});
}
addControl(context) {
const x = rn(d3.event.x, 1);
const y = rn(d3.event.y, 1);
const pointId = getSegmentId(context.points, [x, y]);
context.points.splice(pointId, 0, [x, y]);
context.renderPoints(context.el);
context.dragControl(context, pointId);
}
removePoint(context, pointId) {
this.points.splice(pointId, 1);
if (this.points.length < 2) context.el.remove();