let w = 115;
let editPath = d3.select('path.edit-path');
let paths = d3.selectAll('path.path');
let zones = d3.select('g.zones').selectAll('g')
.data(d3.range(6).map(d => ({i: d, x:135 + d*w})))
.enter().append('g')
.attr('transform', d => translate(${d.x}, 0));
let circles = zones.append('circle').classed('loader', true)
.attr('r', 20).attr('cx', 60).attr('cy', 170);
let marks = zones.append('path').attr('stroke', 'transparent')
.attr('fill', 'none').attr('stroke-width', 4)
.attr('d', "M40,165 l15,20 l20,-30");
let rects = zones.append('rect').attr('width', w).attr('height', 480);
let arrow = d3.select(".arrow");
let pathNode = editPath.node();
let totalLength = pathNode.getTotalLength();
d3.select('input#modify').on('change', () => {
let editMode = d3.select('input#modify').node().checked;
paths.classed('no-dasharray', editMode);
rects.classed('no-dasharray', editMode);
d3.selectAll('circle.knob').classed('no-dasharray', editMode);
});
editor(editPath);
anim();
function anim() {
paths.attr('d', editPath.attr('d'));
draw(true);
function draw(now) {
var t = d3.transition()
.duration(16000)
.delay(now ? 0 : 1000)
.on("start", function() {
d3.selectAll("path").style("display", "block");
marks.attr('stroke','transparent')
circles.attr('stroke', 'transparent')
.each(d => {d.started = d.done = d.checked = false});
})
.on("end", draw);
arrow.transition(t).attrTween("transform", function() {
return function(t) {
let pos = t * totalLength;
let pt = pointAtLength(pos);
circles.each(function(d) {
let dx = Math.abs(d.x - pt[0] + w/2);
if (!d.started && dx < w/2) {
d.started = true;
d3.select(this) .transition(100).attr('stroke', 'black');
}
if (!d.done && d.started && dx > w/2) {
d.done = true;
d3.select(this).transition(300).attr('stroke','transparent')
}
})
marks.each(function(d) {
if (!d.checked && d.done) {
d.checked = true;
d3.select(this).transition(300).attr('stroke','green')
}
})
return `translate(${pt}) rotate(${tangentAt(pos)})`;
};
});
paths.transition(t).attrTween("stroke-dasharray", function() {
return d3.interpolateString("0," + totalLength, totalLength + "," + totalLength);
});
circles.transition(t).attrTween("stroke-dashoffset", function() {
return d3.interpolate(0, 1000);
});
}
function pointAtLength(l) {
let xy = pathNode.getPointAtLength(l);
return [xy.x, xy.y];
}
function tangentAt(l) {
let a = pointAtLength(Math.max(l - 0.01, 0)),
b = pointAtLength(l + 0.01);
return Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI;
}
}
function editor(target) {
let size = 800;
let points = d3.range(0, 13).map(function(i) {
return [135 + i*w/2, 250-100*Math.random()];
});
let dragged = null,
selected = points[points.length-1];
let line = d3.line().curve(d3.curveCardinal);
let svg = d3.select("svg");
svg.append("rect")
.attr("width", size)
.attr("height", size);
d3.select(window)
.on("mousemove", mousemove)
.on("mouseup", mouseup);
redraw();
function redraw() {
paths.datum(points).attr("d", line);
totalLength = pathNode.getTotalLength();
var circle = svg.selectAll("circle.knob")
.data(points, d => d);
circle.exit().remove();
let newNodes = circle.enter()
.append("circle").classed('knob', true)
.attr("r", 1e-6)
.on("mousedown", d => {
selected = dragged = d;
redraw();
})
.transition()
.duration(250)
.attr("r", 6.5);
circle.merge(newNodes)
.classed("selected", d => d === selected)
.attr("cx", d => d[0])
.attr("cy", d => d[1]);
if (d3.event) {
d3.event.preventDefault();
d3.event.stopPropagation();
}
}
function mousemove() {
if (!dragged)
return;
let m = d3.mouse(svg.node());
dragged[0] = m[0];
dragged[1] = m[1];
redraw();
}
function mouseup() {
if (!dragged)
return;
mousemove();
dragged = null;
}
}
