@decidables/discountable-elements 0.5.0 → 0.6.0

package/lib/discountableElements.esm.js

@@ -13059,54 +13059,90 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
           /* shape-rendering: crispEdges; */
         }
 
-        .curve {
-          fill: none;
-          stroke: var(---color-element-emphasis);
-          stroke-width: 2;
+        .option .interactive {
+          filter: url("#shadow-2");
         }
 
-        .curve.interactive {
-          cursor: nwse-resize;
-          
-          filter: url("#shadow-2");
-          outline: none;
+        .option .interactive:hover {
+          filter: url("#shadow-4");
         }
 
-        .curve.interactive:hover {
+        .option .body.interactive:has(~ .point:hover) {
           filter: url("#shadow-4");
         }
 
-        .curve.interactive:active {
+        .option .interactive:active {
           filter: url("#shadow-8");
         }
 
-        :host(.keyboard) .curve.interactive:focus {
+        .option .body.interactive:has(~ .point:active) {
           filter: url("#shadow-8");
         }
 
-        .bar {
-          fill: none;
-          stroke: var(---color-element-emphasis);
-          stroke-width: 2;
+        :host(.keyboard) .option .interactive:focus-within {
+          filter: url("#shadow-8");
         }
 
-        .bar.interactive {
-          cursor: ew-resize;
-          
-          filter: url("#shadow-2");
+        :host(.keyboard) .option .body.interactive:has(~ .point:focus-within) {
+          filter: url("#shadow-8");
+        }
+
+        .gradient.sooner stop {
+          stop-color: var(---color-sooner);
+        }
+
+        .gradient.later stop {
+          stop-color: var(---color-later);
+        }
+
+        .stop-0,
+        .stop-before {
+          stop-opacity: 0;
+        }
+
+        .stop-after,
+        .stop-100 {
+          stop-opacity: 1;
+        }
+
+        .fill {
+          fill: var(---color-element-enabled);
+          fill-opacity: 0.5;
+          stroke: none;
+        }
+
+        .interactive .fill {
+          cursor: move;
+
           outline: none;
         }
 
-        .bar.interactive:hover {
-          filter: url("#shadow-4");
+        .sooner .fill {
+          fill: var(---color-sooner);
         }
 
-        .bar.interactive:active {
-          filter: url("#shadow-8");
+        .later .fill {
+          fill: var(---color-later);
         }
 
-        :host(.keyboard) .bar.interactive:focus {
-          filter: url("#shadow-8");
+        .trial.sooner .fill {
+          fill: url("#sooner-gradient");
+        }
+
+        .trial.later .fill {
+          fill: url("#later-gradient");
+        }
+
+        .bar {
+          fill: none;
+          stroke: var(---color-element-emphasis);
+          stroke-width: 2;
+        }
+
+        .interactive .bar {
+          cursor: ew-resize;
+
+          outline: none;
         }
 
         .point .mark {
@@ -13124,38 +13160,22 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
           fill: var(---color-text-inverse);
         }
 
-        .point.interactive {
+        .point.interact {
           cursor: ns-resize;
 
-          filter: url("#shadow-2");
           outline: none;
-
-          /* HACK: This gets Safari to correctly apply the filter! */
-          /* https://github.com/emilbjorklund/svg-weirdness/issues/27 */
-          stroke: #000000;
-          stroke-opacity: 0;
-          stroke-width: 0;
         }
 
-        .point.interactive:hover {
-          filter: url("#shadow-4");
-
-          /* HACK: This gets Safari to correctly apply the filter! */
-          stroke: #ff0000;
-        }
-
-        .point.interactive:active {
-          filter: url("#shadow-8");
-
-          /* HACK: This gets Safari to correctly apply the filter! */
-          stroke: #00ff00;
+        .curve {
+          fill: none;
+          stroke: var(---color-element-emphasis);
+          stroke-width: 2;
         }
 
-        :host(.keyboard) .point.interactive:focus {
-          filter: url("#shadow-8");
+        .curve.interactive {
+          cursor: nwse-resize;
 
-          /* HACK: This gets Safari to correctly apply the filter! */
-          stroke: #0000ff;
+          outline: none;
         }
 
         /* Make larger targets for touch users */
@@ -13232,6 +13252,18 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
     //  ENTER
     const svgEnter = svgUpdate.enter().append('svg').classed('main', true);
     svgEnter.html(DiscountableElement.svgDefs);
+    // Gradients for fill animations
+    const svgDefs = svgEnter.append('defs');
+    const soonerGradient = svgDefs.append('linearGradient').classed('gradient sooner', true).attr('id', 'sooner-gradient');
+    soonerGradient.append('stop').classed('stop-0', true).attr('offset', '0');
+    soonerGradient.append('stop').classed('stop-before animation', true).attr('offset', '1');
+    soonerGradient.append('stop').classed('stop-after animation', true).attr('offset', '1');
+    soonerGradient.append('stop').classed('stop-100', true).attr('offset', '1');
+    const laterGradient = svgDefs.append('linearGradient').classed('gradient later', true).attr('id', 'later-gradient');
+    laterGradient.append('stop').classed('stop-0', true).attr('offset', '0');
+    laterGradient.append('stop').classed('stop-before animation', true).attr('offset', '1');
+    laterGradient.append('stop').classed('stop-after animation', true).attr('offset', '1');
+    laterGradient.append('stop').classed('stop-100', true).attr('offset', '1');
     //  MERGE
     const svgMerge = svgEnter.merge(svgUpdate).attr('viewBox', `0 0 ${elementWidth} ${elementHeight}`);
 
@@ -13308,42 +13340,39 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
       return datum.name;
     });
     //  ENTER
-    const optionEnter = optionUpdate.enter().append('g').classed('option', true);
-    // Curve
-    const curveEnter = optionEnter.append('g').classed('curve', true).attr('clip-path', 'url(#clip-htd-curves)');
-    curveEnter.append('path').classed('path', true).attr('d', datum => {
-      const curve = range$1(xScale(datum.d), xScale(0), -1).map(range => {
-        return {
-          d: xScale.invert(range),
-          v: HTDMath.adk2v(datum.a, datum.d - xScale.invert(range), this.k)
-        };
-      });
-      return line(curve);
-    }).attr('stroke-dasharray', (datum, index, nodes) => {
+    const optionEnter = optionUpdate.enter().append('g').attr('class', datum => {
+      const labelClass = datum.label === 's' ? 'sooner' : datum.label === 'l' ? 'later' : '';
+      const trialClass = datum.trial ? 'trial' : '';
+      return `option ${labelClass} ${trialClass}`;
+    });
+    // Body (Fill, Bar, Point)
+    const bodyEnter = optionEnter.append('g').classed('body', true);
+    // Fill
+    const fillEnter = bodyEnter.append('g').classed('fill', true).attr('clip-path', 'url(#clip-htd-curves)').each(datum => {
       if (datum.trial) {
-        const length = nodes[index].getTotalLength();
-        return `0,${length}`;
+        svgMerge.selectAll('.gradient .animation').attr('offset', 1);
       }
-      return 'none';
     });
-    curveEnter.append('path').classed('path touch', true).attr('d', datum => {
+    fillEnter.append('path').classed('region', true).attr('d', datum => {
       const curve = range$1(xScale(datum.d), xScale(0), -1).map(range => {
         return {
           d: xScale.invert(range),
           v: HTDMath.adk2v(datum.a, datum.d - xScale.invert(range), this.k)
         };
       });
-      return line(curve);
-    }).attr('stroke-dasharray', (datum, index, nodes) => {
-      if (datum.trial) {
-        const length = nodes[index].getTotalLength();
-        return `0,${length}`;
-      }
-      return 'none';
+      return line([...curve, {
+        d: 0,
+        v: 0
+      }, {
+        d: datum.d,
+        v: 0
+      }]);
     });
     // Bar
-    const barEnter = optionEnter.append('g').classed('bar', true);
-    barEnter.append('line').classed('line', true).attr('x1', datum => {
+    const barEnter = bodyEnter.append('g').classed('bar', true);
+    barEnter.append('line').classed('line', true);
+    barEnter.append('line').classed('line touch', true);
+    barEnter.selectAll('.line').attr('x1', datum => {
       return xScale(datum.d);
     }).attr('x2', datum => {
       return xScale(datum.d);
@@ -13356,12 +13385,21 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
       }
       return 'none';
     });
-    barEnter.append('line').classed('line touch', true).attr('x1', datum => {
-      return xScale(datum.d);
-    }).attr('x2', datum => {
-      return xScale(datum.d);
-    }).attr('y1', yScale(0)).attr('y2', datum => {
-      return yScale(datum.a);
+    // Point
+    const pointEnter = bodyEnter.append('g').classed('point', true);
+    pointEnter.append('circle').classed('mark touch', true);
+    // Curve
+    const curveEnter = optionEnter.append('g').classed('curve', true).attr('clip-path', 'url(#clip-htd-curves)');
+    curveEnter.append('path').classed('path', true);
+    curveEnter.append('path').classed('path touch', true);
+    curveEnter.selectAll('.path').attr('d', datum => {
+      const curve = range$1(xScale(datum.d), xScale(0), -1).map(range => {
+        return {
+          d: xScale.invert(range),
+          v: HTDMath.adk2v(datum.a, datum.d - xScale.invert(range), this.k)
+        };
+      });
+      return line(curve);
     }).attr('stroke-dasharray', (datum, index, nodes) => {
       if (datum.trial) {
         const length = nodes[index].getTotalLength();
@@ -13369,8 +13407,11 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
       }
       return 'none';
     });
-    // Point
-    const pointEnter = optionEnter.append('g').classed('point', true).attr('transform', datum => {
+    // Point (again)
+    const topPointEnter = optionEnter.append('g').classed('point top-point', true);
+    topPointEnter.append('circle').classed('mark touch', true);
+    topPointEnter.append('text').classed('label', true);
+    optionEnter.selectAll('.point').attr('transform', datum => {
       return `translate(${xScale(datum.d)}, ${yScale(datum.a)})`;
     }).attr('opacity', datum => {
       if (datum.trial) {
@@ -13378,33 +13419,37 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
       }
       return 1;
     });
-    pointEnter.append('circle').classed('mark touch', true);
-    pointEnter.append('text').classed('label', true);
+
     //  MERGE
     const optionMerge = optionEnter.merge(optionUpdate);
 
     // Interactive options
-    // Curve
-    optionMerge.filter((datum, index, nodes) => {
-      return this.interactive && !select(nodes[index]).select('.curve').classed('interactive');
-    }).select('.curve').classed('interactive', true).attr('tabindex', 0)
+    // Body (Fill, Bar, Point)
+    const bodyMergeInteractive = optionMerge.filter((datum, index, nodes) => {
+      return this.interactive && !datum.trial && !select(nodes[index]).select('.body').classed('interactive');
+    }).select('.body');
+    bodyMergeInteractive.classed('interactive', true);
+    // Fill
+    bodyMergeInteractive.select('.fill').attr('tabindex', 0)
     // Drag interaction
-    .call(drag().subject(event => {
+    .call(drag().subject((event, datum) => {
       return {
-        x: event.x,
-        y: event.y
+        x: xScale(datum.d),
+        y: yScale(datum.a)
       };
     }).on('start', event => {
       const element = event.currentTarget;
       select(element).classed('dragging', true);
     }).on('drag', (event, datum) => {
       this.drag = true;
-      const dragD = datum.d - xScale.invert(event.x);
-      const d = dragD < 0 ? 0 : dragD > datum.d ? datum.d : dragD;
-      const dragV = yScale.invert(event.y);
-      const v = dragV <= 0 ? 0.001 : dragV > datum.a ? datum.a : dragV;
-      const k = HTDMath.adv2k(datum.a, d, v);
-      this.k = k < HTDMath.k.MIN ? HTDMath.k.MIN : k > HTDMath.k.MAX ? HTDMath.k.MAX : k;
+      const d = xScale.invert(event.x);
+      const a = yScale.invert(event.y);
+      datum.d = d < this.scale.time.min ? this.scale.time.min : d > this.scale.time.max ? this.scale.time.max : this.scale.time.round(d);
+      datum.a = a < this.scale.value.min ? this.scale.value.min : a > this.scale.value.max ? this.scale.value.max : this.scale.value.round(a);
+      if (datum.name === 'default') {
+        this.d = datum.d;
+        this.a = datum.a;
+      }
       this.alignState();
       this.requestUpdate();
       this.dispatchEvent(new CustomEvent('htd-curves-change', {
@@ -13423,24 +13468,33 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
     }))
     // Keyboard interaction
     .on('keydown', (event, datum) => {
-      if (['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
-        let {
-          k
-        } = this;
+      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+        let keyA = datum.a;
+        let keyD = datum.d;
         switch (event.key) {
           case 'ArrowUp':
-          case 'ArrowLeft':
-            k *= event.shiftKey ? 0.95 : 0.85;
+            keyA += event.shiftKey ? 1 : 5;
             break;
           case 'ArrowDown':
+            keyA -= event.shiftKey ? 1 : 5;
+            break;
           case 'ArrowRight':
-            k *= event.shiftKey ? 1 / 0.95 : 1 / 0.85;
+            keyD += event.shiftKey ? 1 : 5;
+            break;
+          case 'ArrowLeft':
+            keyD -= event.shiftKey ? 1 : 5;
             break;
           // no-op
         }
-        k = k < HTDMath.k.MIN ? HTDMath.k.MIN : k > HTDMath.k.MAX ? HTDMath.k.MAX : k;
-        if (k !== this.k) {
-          this.k = k;
+        keyD = keyD < this.scale.time.min ? this.scale.time.min : keyD > this.scale.time.max ? this.scale.time.max : keyD;
+        keyA = keyA < this.scale.value.min ? this.scale.value.min : keyA > this.scale.value.max ? this.scale.value.max : keyA;
+        if (keyD !== datum.d || keyA !== datum.a) {
+          datum.d = keyD;
+          datum.a = keyA;
+          if (datum.name === 'default') {
+            this.d = datum.d;
+            this.a = datum.a;
+          }
           this.alignState();
           this.requestUpdate();
           this.dispatchEvent(new CustomEvent('htd-curves-change', {
@@ -13458,9 +13512,7 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
       }
     });
     // Bar
-    optionMerge.filter((datum, index, nodes) => {
-      return this.interactive && !datum.trial && !select(nodes[index]).select('.bar').classed('interactive');
-    }).select('.bar').classed('interactive', true).attr('tabindex', 0)
+    bodyMergeInteractive.select('.bar')
     // Drag interaction
     .call(drag().subject((event, datum) => {
       return {
@@ -13530,8 +13582,8 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
     });
     // Point
     optionMerge.filter((datum, index, nodes) => {
-      return this.interactive && !datum.trial && !select(nodes[index]).select('.point').classed('interactive');
-    }).select('.point').classed('interactive', true).attr('tabindex', 0)
+      return this.interactive && !datum.trial && !select(nodes[index]).select('.top-point').classed('interact');
+    }).select('.top-point').classed('interact', true)
     // Drag interaction
     .call(drag().subject((event, datum) => {
       return {
@@ -13599,26 +13651,125 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
         event.preventDefault();
       }
     });
+    // Curve
+    optionMerge.filter((datum, index, nodes) => {
+      return this.interactive && !select(nodes[index]).select('.curve').classed('interactive');
+    }).select('.curve').classed('interactive', true).attr('tabindex', 0)
+    // Drag interaction
+    .call(drag().subject(event => {
+      return {
+        x: event.x,
+        y: event.y
+      };
+    }).on('start', event => {
+      const element = event.currentTarget;
+      select(element).classed('dragging', true);
+    }).on('drag', (event, datum) => {
+      this.drag = true;
+      const dragD = datum.d - xScale.invert(event.x);
+      const d = dragD < 0 ? 0 : dragD > datum.d ? datum.d : dragD;
+      const dragV = yScale.invert(event.y);
+      const v = dragV <= 0 ? 0.001 : dragV > datum.a ? datum.a : dragV;
+      const k = HTDMath.adv2k(datum.a, d, v);
+      this.k = k < HTDMath.k.MIN ? HTDMath.k.MIN : k > HTDMath.k.MAX ? HTDMath.k.MAX : k;
+      this.alignState();
+      this.requestUpdate();
+      this.dispatchEvent(new CustomEvent('htd-curves-change', {
+        detail: {
+          name: datum.name,
+          a: datum.a,
+          d: datum.d,
+          k: this.k,
+          label: datum.label
+        },
+        bubbles: true
+      }));
+    }).on('end', event => {
+      const element = event.currentTarget;
+      select(element).classed('dragging', false);
+    }))
+    // Keyboard interaction
+    .on('keydown', (event, datum) => {
+      if (['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
+        let {
+          k
+        } = this;
+        switch (event.key) {
+          case 'ArrowUp':
+          case 'ArrowLeft':
+            k *= event.shiftKey ? 0.95 : 0.85;
+            break;
+          case 'ArrowDown':
+          case 'ArrowRight':
+            k *= event.shiftKey ? 1 / 0.95 : 1 / 0.85;
+            break;
+          // no-op
+        }
+        k = k < HTDMath.k.MIN ? HTDMath.k.MIN : k > HTDMath.k.MAX ? HTDMath.k.MAX : k;
+        if (k !== this.k) {
+          this.k = k;
+          this.alignState();
+          this.requestUpdate();
+          this.dispatchEvent(new CustomEvent('htd-curves-change', {
+            detail: {
+              name: datum.name,
+              a: datum.a,
+              d: datum.d,
+              k: this.k,
+              label: datum.label
+            },
+            bubbles: true
+          }));
+        }
+        event.preventDefault();
+      }
+    });
 
     // Non-interactive options
+    // Body (Fill, Bar, Point)
+    const bodyMergeNoninteractive = optionMerge.filter((datum, index, nodes) => {
+      return (!this.interactive || datum.trial) && select(nodes[index]).select('.body').classed('interactive');
+    });
+    bodyMergeNoninteractive.classed('interactive', false);
+    // Fill
+    bodyMergeNoninteractive.select('.fill').attr('tabindex', null).on('drag', null).on('keydown', null);
+    // Bar
+    bodyMergeNoninteractive.select('.bar').on('drag', null).on('keydown', null);
+    // Point
+    optionMerge.filter((datum, index, nodes) => {
+      return (!this.interactive || datum.trial) && select(nodes[index]).select('.top-point').classed('interact');
+    }).select('.top-point').classed('interact', false).on('drag', null).on('keydown', null);
     // Curve
     optionMerge.filter((datum, index, nodes) => {
       return !this.interactive && select(nodes[index]).select('.curve').classed('interactive');
     }).select('.curve').classed('interactive', false).attr('tabindex', null).on('drag', null).on('keydown', null);
-    // Bar
-    optionMerge.filter((datum, index, nodes) => {
-      return (!this.interactive || datum.trial) && select(nodes[index]).select('.bar').classed('interactive');
-    }).select('.bar').classed('interactive', false).attr('tabindex', null).on('drag', null).on('keydown', null);
-    // Point
-    optionMerge.filter((datum, index, nodes) => {
-      return (!this.interactive || datum.trial) && select(nodes[index]).select('.point').classed('interactive');
-    }).select('.point').classed('interactive', false).attr('tabindex', null).on('drag', null).on('keydown', null);
 
     // Trial Animation
+    // Fill
+    optionMerge.filter(datum => {
+      return datum.new;
+    }).each(() => {
+      svgMerge.selectAll('.gradient .animation').transition().duration(transitionDuration).delay(transitionDuration + transitionDuration / 10).ease(linear$1).attrTween('offset', () => {
+        return interpolate$1(1, 0);
+      });
+    });
+    // Bar
+    optionMerge.filter(datum => {
+      return datum.new;
+    }).selectAll('.bar .line').transition().duration(transitionDuration).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
+      const length = nodes[index].getTotalLength();
+      return interpolate$1(`0,${length}`, `${length},${length}`);
+    });
+    // Point
+    optionMerge.filter(datum => {
+      return datum.new;
+    }).selectAll('.point').transition().duration(transitionDuration / 10).delay(transitionDuration).ease(linear$1).attrTween('opacity', () => {
+      return interpolate$1(0, 1);
+    });
     // Curve
     optionMerge.filter(datum => {
       return datum.new;
-    }).select('.curve .path').transition().duration(transitionDuration).delay(transitionDuration + transitionDuration / 10).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
+    }).selectAll('.curve .path').transition().duration(transitionDuration).delay(transitionDuration + transitionDuration / 10).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
       const length = nodes[index].getTotalLength();
       return interpolate$1(`0,${length}`, `${length},${0}`);
     }).on('end', datum => {
@@ -13635,50 +13786,16 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
         bubbles: true
       }));
     });
-    optionMerge.filter(datum => {
-      return datum.new;
-    }).select('.curve .path.touch').transition().duration(transitionDuration).delay(transitionDuration + transitionDuration / 10).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
-      const length = nodes[index].getTotalLength();
-      return interpolate$1(`0,${length}`, `${length},${0}`);
-    });
-    // Bar
-    optionMerge.filter(datum => {
-      return datum.new;
-    }).select('.bar .line').transition().duration(transitionDuration).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
-      const length = nodes[index].getTotalLength();
-      return interpolate$1(`0,${length}`, `${length},${length}`);
-    });
-    optionMerge.filter(datum => {
-      return datum.new;
-    }).select('.bar .line.touch').transition().duration(transitionDuration).ease(linear$1).attrTween('stroke-dasharray', (datum, index, nodes) => {
-      const length = nodes[index].getTotalLength();
-      return interpolate$1(`0,${length}`, `${length},${length}`);
-    });
-    // Point
-    optionMerge.filter(datum => {
-      return datum.new;
-    }).select('.point').transition().duration(transitionDuration / 10).delay(transitionDuration).ease(linear$1).attrTween('opacity', () => {
-      return interpolate$1(0, 1);
-    });
 
     // All options
-    optionUpdate.select('.curve .path').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('d', (datum, index, elements) => {
-      const element = elements[index];
-      const interpolateA = interpolate$1(element.a !== undefined ? element.a : datum.a, datum.a);
-      const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
-      return time => {
-        element.a = interpolateA(time);
-        element.d = interpolateD(time);
-        const curve = range$1(xScale(element.d), xScale(0), -1).map(range => {
-          return {
-            d: xScale.invert(range),
-            v: HTDMath.adk2v(element.a, element.d - xScale.invert(range), this.k)
-          };
-        });
-        return line(curve);
-      };
-    });
-    optionUpdate.select('.curve .path.touch').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('d', (datum, index, elements) => {
+    optionMerge.filter(datum => {
+      return datum.label === 's';
+    }).raise();
+    optionMerge.filter(datum => {
+      return datum.label === 'l';
+    }).lower();
+    // Fill
+    optionUpdate.select('.fill .region').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('d', (datum, index, elements) => {
       const element = elements[index];
       const interpolateA = interpolate$1(element.a !== undefined ? element.a : datum.a, datum.a);
       const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
@@ -13691,10 +13808,17 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
             v: HTDMath.adk2v(element.a, element.d - xScale.invert(range), this.k)
           };
         });
-        return line(curve);
+        return line([...curve, {
+          d: 0,
+          v: 0
+        }, {
+          d: element.d,
+          v: 0
+        }]);
       };
     });
-    optionUpdate.select('.bar .line').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('x1', (datum, index, elements) => {
+    // Bar
+    optionUpdate.selectAll('.bar .line').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('x1', (datum, index, elements) => {
       const element = elements[index];
       const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
       return time => {
@@ -13716,41 +13840,37 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
         return `${yScale(element.a)}`;
       };
     });
-    optionUpdate.select('.bar .line.touch').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('x1', (datum, index, elements) => {
-      const element = elements[index];
-      const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
-      return time => {
-        element.d = interpolateD(time);
-        return `${xScale(element.d)}`;
-      };
-    }).attrTween('x2', (datum, index, elements) => {
+    // Point
+    optionUpdate.selectAll('.point').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('transform', (datum, index, elements) => {
       const element = elements[index];
       const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
-      return time => {
-        element.d = interpolateD(time);
-        return `${xScale(element.d)}`;
-      };
-    }).attrTween('y2', (datum, index, elements) => {
-      const element = elements[index];
       const interpolateA = interpolate$1(element.a !== undefined ? element.a : datum.a, datum.a);
       return time => {
+        element.d = interpolateD(time);
         element.a = interpolateA(time);
-        return `${yScale(element.a)}`;
+        return `translate(${xScale(element.d)}, ${yScale(element.a)})`;
       };
     });
-    optionUpdate.select('.point').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('transform', (datum, index, elements) => {
+    optionMerge.select('.point .label').text(datum => {
+      return datum.label;
+    });
+    // Curve
+    optionUpdate.selectAll('.curve .path').transition().duration(this.drag ? 0 : this.firstUpdate ? transitionDuration * 2 : transitionDuration).ease(cubicOut).attrTween('d', (datum, index, elements) => {
       const element = elements[index];
-      const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
       const interpolateA = interpolate$1(element.a !== undefined ? element.a : datum.a, datum.a);
+      const interpolateD = interpolate$1(element.d !== undefined ? element.d : datum.d, datum.d);
       return time => {
-        element.d = interpolateD(time);
         element.a = interpolateA(time);
-        return `translate(${xScale(element.d)}, ${yScale(element.a)})`;
+        element.d = interpolateD(time);
+        const curve = range$1(xScale(element.d), xScale(0), -1).map(range => {
+          return {
+            d: xScale.invert(range),
+            v: HTDMath.adk2v(element.a, element.d - xScale.invert(range), this.k)
+          };
+        });
+        return line(curve);
       };
     });
-    optionMerge.select('.point .label').text(datum => {
-      return datum.label;
-    });
     //  EXIT
     // NOTE: Could add a transition here
     optionUpdate.exit().remove();