function chartEditor(config = {}) { let { easePreview, boundFirstLast = false, defaultCurve, enableD3Easing = false, title } = config; let useD3Easing = false; let editor = html`

`; let titleEditor = html`${title}`; let resetButton = ``; let copyButton = ``; let easingSelect = `D3 easing: `; let action = html``; let previewTitle = html`

Ease preview

`; let curve = new Curve([ new Keyframe({ time: 0, value: 0, inTangent: 0, outTangent: 0 }), new Keyframe({ time: 1, value: 1, inTangent: 0, outTangent: 0 }) ]); if (defaultCurve !== undefined) { if (typeof defaultCurve === "string") { useD3Easing = true; } else { action.d3Ease.value = undefined; curve = defaultCurve.copy(); } } else { action.d3Ease.value = undefined; } const line = d3.line(); action.d3Ease.onchange = event => { useD3Easing = true; updateValue(); update(true); }; action.reset.onclick = event => { resetCurve(); updateValue(); update(true); }; action.onsubmit = event => { event.preventDefault(); }; action.copy.onclick = event => { useD3Easing ? copy(`d3.${action.d3Ease.value}()`) : copy( `new Curve([${curve.keyframes .map(k => `new Keyframe(${JSON.stringify(k)})`) .join(',')}])` ); }; function resetCurve() { if (defaultCurve !== undefined) { if (typeof defaultCurve === "string") { useD3Easing = true; curve = new Curve([ new Keyframe({ time: 0, value: 0, inTangent: 0, outTangent: 0 }), new Keyframe({ time: 1, value: 1, inTangent: 0, outTangent: 0 }) ]); action.d3Ease.value = defaultCurve; } else { action.d3Ease.value = undefined; useD3Easing = false; curve = defaultCurve.copy(); } } else { action.d3Ease.value = undefined; useD3Easing = false; curve = new Curve([ new Keyframe({ time: 0, value: 0, inTangent: 0, outTangent: 0 }), new Keyframe({ time: 1, value: 1, inTangent: 0, outTangent: 0 }) ]); } } const svg = d3 .create("svg") .attr("cursor", "pointer") .attr("viewBox", [0, 0, width, height]) .style("max-width", `${width}px`) .style("overflow", "visible"); svg .append("g") .call(xAxis) .call(g => g .append("text") .attr("x", width - margin.right) .attr("y", -3) .attr("fill", "currentColor") .attr("font-weight", "bold") .text("t") ); svg .append("g") .call(yAxis) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("t′") ); let g = svg .append("g") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linecap", "round"); svg.on("click", function(d) { if (d3.event.defaultPrevented) return; if (useD3Easing) { resetCurve(); useD3Easing = false; } curve.addKey( new Keyframe({ time: x.invert(d3.mouse(this)[0]), value: y.invert(d3.mouse(this)[1]) }) ); updateValue(); update(true); }); function updateValue() { if (useD3Easing) { curve.evaluate = d3[action.d3Ease.value]; } editor.value = t => curve.evaluate(t); editor.dispatchEvent(new CustomEvent("input")); } function update(runTransition) { g.selectAll("path") .data([t => curve.evaluate(t)]) .join("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linecap", "round") .transition() .duration(runTransition ? 500 : 0) .attr("d", e => line(d3.ticks(0, 1, width).map(t => [x(t), y(e(t))]))); g.selectAll(".tangentesCont") .data(useD3Easing ? [] : curve.keyframes, (d, i) => d.id) .join(enter => enter .append("g") .attr("class", "tangentesCont") .each(function(d) { d3.select(this) .append("line") .attr("opacity", d => (d.id === curve.firstKeyframe.id ? 0 : 1)) .attr("class", "inTangLine") .attr("fill", "none") .attr("stroke", "#008ec4"); d3.select(this) .append("line") .attr("class", "outTangLine") .attr("opacity", d => (d.id === curve.lastKeyframe.id ? 0 : 1)) .attr("fill", "none") .attr("stroke", "#008ec4"); d3.select(this) .append("circle") .attr("stroke", "black") .attr("opacity", d => (d.id === curve.firstKeyframe.id ? 0 : 1)) .attr("class", "inTangKey") .attr("stroke", "#008ec4") .attr("fill", "#008ec4") .attr("r", 5) .attr("cursor", "move") .call( d3 .drag() .on("start", dragstartedKey) .on("drag", draggedTangIn) .on("end", dragendedKey) ); d3.select(this) .append("circle") .attr("stroke", "black") .attr("opacity", d => (d.id === curve.lastKeyframe.id ? 0 : 1)) .attr("class", "outTangKey") .attr("stroke", "#008ec4") .attr("fill", "#008ec4") .attr("r", 5) .attr("cursor", "move") .call( d3 .drag() .on("start", dragstartedKey) .on("drag", draggedTangOut) .on("end", dragendedKey) ); d3.select(this) .append("circle") .attr("class", "keyframe") .attr("stroke", "black") .attr("fill", "white") .attr("r", 5) .attr("cursor", "move") .on("contextmenu", d => { d3.event.preventDefault(); curve.removeKey(d); updateValue(); update(true); }) .call( d3 .drag() .on("start", dragstartedKey) .on("drag", draggedKey) .on("end", dragendedKey) ); }) ) .each(function(d) { d3.select(this) .select(".keyframe") .attr("cx", x(d.time)) .attr("cy", y(d.value)) .attr("cursor", "move"); d3.select(this) .select(".inTangKey") .attr("cx", x(d.getHandles().in.x)) .attr("cy", y(d.getHandles().in.y)) .attr("cursor", "move"); d3.select(this) .select(".outTangKey") .attr("cx", x(d.getHandles().out.x)) .attr("cy", y(d.getHandles().out.y)); d3.select(this) .select(".inTangLine") .attr("stroke-width", '1') .attr("x1", x(d.getHandles().in.x)) .attr("y1", y(d.getHandles().in.y)) .attr("x2", x(d.time)) .attr("y2", y(d.value)); d3.select(this) .select(".outTangLine") .attr("stroke-width", '1') .attr("x1", x(d.time)) .attr("y1", y(d.value)) .attr("x2", x(d.getHandles().out.x)) .attr("y2", y(d.getHandles().out.y)); }); } function dragstartedKey(d, i) { d3.select(this) .raise() .attr("r", 6); } function draggedKey(d) { curve.move( d, x.invert(d3.mouse(this)[0]), y.invert(d3.mouse(this)[1]), boundFirstLast ); update(); } function dragendedKey(d, i) { d3.select(this) .raise() .attr("r", 5); updateValue(); update(); } function draggedTangIn(d) { d.setInTangentFromHandle( x.invert(d3.mouse(this)[0]), y.invert(d3.mouse(this)[1]) ); update(); } function draggedTangOut(d) { d.setOutTangentFromHandle( x.invert(d3.mouse(this)[0]), y.invert(d3.mouse(this)[1]) ); update(); } updateValue(); update(); if (title !== undefined) editor.append(titleEditor); editor.append(action); editor.append(svg.node()); if (easePreview) { editor.append(previewTitle); editor.append(chartEase(t => curve.evaluate(t), invalidation)); } return editor; }