v1.6.06 - lock axis on point drag

This commit is contained in:
Azgaar 2021-03-05 17:12:09 +03:00
parent 95124e686b
commit 4a1dba33f8
2 changed files with 17 additions and 3 deletions

View file

@ -140,6 +140,10 @@ class LinearRuler {
let circle = context.el.select(`circle:nth-child(${pointId+1})`); let circle = context.el.select(`circle:nth-child(${pointId+1})`);
const line = context.el.selectAll("polyline"); const line = context.el.selectAll("polyline");
let x0 = rn(d3.event.x, 1);
let y0 = rn(d3.event.y, 1);
let axis;
d3.event.on("drag", function() { d3.event.on("drag", function() {
if (edge) { if (edge) {
if (d3.event.dx < .1 && d3.event.dy < .1) return; if (d3.event.dx < .1 && d3.event.dy < .1) return;
@ -150,8 +154,18 @@ class LinearRuler {
edge = false; edge = false;
} }
const x = rn(d3.event.x, 1); const shiftPressed = d3.event.sourceEvent.shiftKey;
const y = rn(d3.event.y, 1); if (shiftPressed && !axis) axis = Math.abs(d3.event.dx) > Math.abs(d3.event.dy) ? "x" : "y";
const x = axis === "y" ? x0 : rn(d3.event.x, 1);
const y = axis === "x" ? y0 : rn(d3.event.y, 1);
if (!shiftPressed) {
axis = null;
x0 = x;
y0 = y;
}
context.updatePoint(pointId, x, y); context.updatePoint(pointId, x, y);
line.attr("points", context.getPointsString()); line.attr("points", context.getPointsString());
circle.attr("cx", x).attr("cy", y); circle.attr("cx", x).attr("cy", y);

View file

@ -206,7 +206,7 @@ function editUnits() {
pt.x = graphWidth / 2, pt.y = graphHeight / 4; pt.x = graphWidth / 2, pt.y = graphHeight / 4;
const p = pt.matrixTransform(viewbox.node().getScreenCTM().inverse()); const p = pt.matrixTransform(viewbox.node().getScreenCTM().inverse());
const dx = graphWidth / 4 / scale; const dx = graphWidth / 4 / scale;
const dy = (rulers.data.length * 10) % (graphHeight / 2); const dy = (rulers.data.length * 40) % (graphHeight / 2);
const from = [p.x-dx | 0, p.y+dy | 0]; const from = [p.x-dx | 0, p.y+dy | 0];
const to = [p.x+dx | 0, p.y+dy | 0]; const to = [p.x+dx | 0, p.y+dy | 0];
rulers.linear([from, to]).draw(); rulers.linear([from, to]).draw();