2d:null 2e:["$","title",null,{"children":"Spline Editor / Splice: Insert control points between existing ones | Christophe Yamahata | Observable"}] 33:T49e,viewof line = { const form = html``; form.select.oninput = () => form.value = d3.line().curve(d3[form.select.value]); form.select.oninput(); return form; }34:T10dc,chart = { var height = 600; var color_dot_selected = "#C000A0"; var color_dot = "#C0C0C0"; var color_dot_stroke = "#404040" var color_curve = "orange"; var radius = 1.6; var radius_selected = 5; var radius_new_dot = 4; var dot_stroke = 1.0; var line_stroke = 0.5; var size_selectable_area = 5.5; var BKG_selectable = "white"; var transition_duration = 150; if(points.length>0){ if(mutable selected.length == 0){ mutable selected = mutable points[points.length-1]; } } svg.attr("viewBox", [0, 0, width, height]) .style("border", "2px solid lightblue") .attr("tabindex", 1) .attr("pointer-events", "all") .call(d3.drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged)); svg.append("path") .datum(mutable points) .attr("fill", "none") .attr("stroke", color_curve) .attr("stroke-width", line_stroke) .call(update); d3.select(window) .on("keydown", keydown); function update() { const spline = svg.selectAll(".spline") .data([0]); const splineEnter = spline.enter().append("path").attr("class", "spline"); spline.merge(splineEnter) .attr("fill", "none") .attr("stroke", color_curve) .attr("stroke-width", line_stroke) .attr("d", line(mutable points)) const circle = svg.selectAll("g") .data(mutable points, d => d); circle.enter().append("g") .call(g => g.append("circle") .attr("r", 1.3*size_selectable_area) .attr("stroke", "none") .attr("cursor", "move") .attr("fill", BKG_selectable) .transition() .duration(2*transition_duration) .attr("r", size_selectable_area) ) .call(g => g.append("circle") .attr("r", radius) .attr("stroke", "black") .attr("stroke-width", dot_stroke) .transition() // 1st transition .duration(transition_duration) .delay(0.6*transition_duration) .ease(d3.easeElastic) .attr("r", radius_new_dot) .transition() // 2nd transition .duration(transition_duration) .delay(1.5*transition_duration) .attr("r", radius) ) .merge(circle) .attr("transform", d => `translate(${d})`) .select("circle:last-child") .attr("fill", d=> { return d===mutable selected ? color_dot_selected : color_dot}) .attr("stroke", d=> { return d===mutable selected ? color_dot_selected : color_dot_stroke}) .attr("r", d=> { return d===mutable selected ? radius_selected: radius}) .attr("cursor", d=> { return d===mutable selected ? "default" : "move"}) spline.exit().remove(); circle.exit().remove(); } function dragsubject(event){ let subject = event.sourceEvent.target.__data__; if(!subject){ subject = [event.x,event.y]; // The splice() method is used to add new control points in place (i.e., between existing ones) const i = mutable points.indexOf(selected); mutable points.splice(i+1, 0, subject); update() } else{ mutable points = mutable points; update() } return subject } function dragstarted({subject}){ mutable selected = subject; mutable points = mutable points; update(); } function dragged(event) { event.subject[0] = Math.max(0, Math.min(width, event.x)); event.subject[1] = Math.max(0, Math.min(height, event.y)); mutable points = mutable points; update(); } function keydown(event) { if (!mutable selected) return; switch (event.key) { case "Backspace": case "Delete": { event.preventDefault(); const i = mutable points.indexOf(selected); mutable points.splice(i, 1); mutable points = mutable points; mutable selected = mutable points.length ? mutable points[i > 0 ? i - 1 : 0] : null; update(); break; } } } return svg.node(); }35:[] 31:{"id":"8df7de3c0d509797","slug":"spline-editor-splice-insert","title":"Spline Editor / Splice: Insert control points between existing ones","thumbnail":"0a259b50d543f47d67f5d57680f66187659523c9f358765f3392519894d21acf","access_level":"public","create_time":"$D2022-09-16T14:40:48.958Z","update_time":"$D2022-09-19T16:16:48.412Z","view_time":null,"first_public_time":"$D2022-09-16T16:59:34.498Z","has_unpublished_edits":null,"fork":{"id":"bdc6b28d7e364a21","slug":"spline-editor-without-bug","title":"Spline Editor (without bug)","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"stars":1,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":673,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"ddde4e59d0fdf525","slug":"curves","title":"Curves, Graphs and Diagrams","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"Spline Editor / Splice: Insert control points between existing ones","cells":[{"id":0,"value":"# Spline Editor / Splice: Insert control points between existing ones","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":435,"value":"

Click below to place a new control point, or to drag an existing one. \n
Select an existing control point if you want to add a new one right after it.\n
Hitting Delete will delete the selected control point.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"mutable points = [[44,431.8125],[65,456.8125],[87,403.8125],[107,325.8125],[128,246.8125],[162,166.8125],[191,141.8125],[219,148.8125],[243,183.8125],[256,216.8125],[273,269.8125],[292,337.8125],[329,431.8125],[358,467.8125],[374,460.8125],[698,128.8125],[725,118.8125],[757,129.8125],[780,157.8125],[845,312.8125],[882,292.8125],[907,349.8125]];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"mutable selected = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"svg = d3.create(\"svg\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"