@decidables/discountable-elements 0.6.0 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/discountable-elements",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "discountable-elements: Web Components for visualizing Hyperbolic Temporal Discounting",
   "keywords": [
     "web component",
@@ -52,8 +52,8 @@
     "gulp": "^5.0.1"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.5.2",
-    "@decidables/discountable-math": "^0.2.2",
+    "@decidables/decidables-elements": "^0.5.4",
+    "@decidables/discountable-math": "^0.2.4",
     "@lit-labs/motion": "^1.0.9",
     "@observablehq/plot": "^0.6.17",
     "bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
@@ -61,5 +61,5 @@
     "lit": "^3.3.1",
     "regenerator-runtime": "^0.14.1"
   },
-  "gitHead": "481166fb550a7c616e2e7ebc8658073467081636"
+  "gitHead": "40a8d99faef87f4616aa28ae5299893a59873f1d"
 }

package/src/components/htd-curves.js

@@ -251,25 +251,26 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
 
         .option .interactive {
           filter: url("#shadow-2");
+          outline: none;
         }
 
         .option .interactive:hover {
           filter: url("#shadow-4");
         }
 
-        .option .body.interactive:has(~ .point:hover) {
-          filter: url("#shadow-4");
-        }
-
         .option .interactive:active {
           filter: url("#shadow-8");
         }
 
-        .option .body.interactive:has(~ .point:active) {
+        :host(.keyboard) .option .interactive:focus-within {
           filter: url("#shadow-8");
         }
 
-        :host(.keyboard) .option .interactive:focus-within {
+        .option .body.interactive:has(~ .point:hover) {
+          filter: url("#shadow-4");
+        }
+
+        .option .body.interactive:has(~ .point:active) {
           filter: url("#shadow-8");
         }
 
@@ -721,57 +722,8 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         return (this.interactive && !datum.trial && !d3.select(nodes[index]).select('.body').classed('interactive'));
       })
       .select('.body');
-    bodyMergeInteractive.classed('interactive', true);
-    // Fill
-    bodyMergeInteractive.select('.fill')
+    bodyMergeInteractive.classed('interactive', true)
       .attr('tabindex', 0)
-      // Drag interaction
-      .call(d3.drag()
-        .subject((event, datum) => {
-          return {
-            x: xScale(datum.d),
-            y: yScale(datum.a),
-          };
-        })
-        .on('start', (event) => {
-          const element = event.currentTarget;
-          d3.select(element).classed('dragging', true);
-        })
-        .on('drag', (event, datum) => {
-          this.drag = true;
-          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', {
-            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;
-          d3.select(element).classed('dragging', false);
-        }))
       // Keyboard interaction
       .on('keydown', (event, datum) => {
         if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
@@ -826,8 +778,8 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
           event.preventDefault();
         }
       });
-    // Bar
-    bodyMergeInteractive.select('.bar')
+    // Fill
+    bodyMergeInteractive.select('.fill')
       // Drag interaction
       .call(d3.drag()
         .subject((event, datum) => {
@@ -843,13 +795,20 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         .on('drag', (event, datum) => {
           this.drag = true;
           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();
@@ -867,47 +826,49 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         .on('end', (event) => {
           const element = event.currentTarget;
           d3.select(element).classed('dragging', false);
-        }))
-      // Keyboard interaction
-      .on('keydown', (event, datum) => {
-        if (['ArrowLeft', 'ArrowRight'].includes(event.key)) {
-          let keyD = datum.d;
-          switch (event.key) {
-            case 'ArrowRight':
-              keyD += event.shiftKey ? 1 : 5;
-              break;
-            case 'ArrowLeft':
-              keyD -= event.shiftKey ? 1 : 5;
-              break;
-            default:
-              // no-op
-          }
-          keyD = (keyD < this.scale.time.min)
+        }));
+    // Bar
+    bodyMergeInteractive.select('.bar')
+      // Drag interaction
+      .call(d3.drag()
+        .subject((event, datum) => {
+          return {
+            x: xScale(datum.d),
+            y: yScale(datum.a),
+          };
+        })
+        .on('start', (event) => {
+          const element = event.currentTarget;
+          d3.select(element).classed('dragging', true);
+        })
+        .on('drag', (event, datum) => {
+          this.drag = true;
+          const d = xScale.invert(event.x);
+          datum.d = (d < this.scale.time.min)
             ? this.scale.time.min
-            : ((keyD > this.scale.time.max)
+            : (d > this.scale.time.max)
               ? this.scale.time.max
-              : keyD);
-          if (keyD !== datum.d) {
-            datum.d = keyD;
-            if (datum.name === 'default') {
-              this.d = datum.d;
-            }
-            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,
-            }));
+              : this.scale.time.round(d);
+          if (datum.name === 'default') {
+            this.d = datum.d;
           }
-          event.preventDefault();
-        }
-      });
+          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;
+          d3.select(element).classed('dragging', false);
+        }));
     // Point
     optionMerge
       .filter((datum, index, nodes) => {
@@ -915,6 +876,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
       })
       .select('.top-point')
       .classed('interact', true)
+      .attr('tabindex', -1)
       // Drag interaction
       .call(d3.drag()
         .subject((event, datum) => {
@@ -957,8 +919,9 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         }))
       // Keyboard interaction
       .on('keydown', (event, datum) => {
-        if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
           let keyA = datum.a;
+          let keyD = datum.d;
           switch (event.key) {
             case 'ArrowUp':
               keyA += event.shiftKey ? 1 : 5;
@@ -966,17 +929,30 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
             case 'ArrowDown':
               keyA -= event.shiftKey ? 1 : 5;
               break;
+            case 'ArrowRight':
+              keyD += event.shiftKey ? 1 : 5;
+              break;
+            case 'ArrowLeft':
+              keyD -= event.shiftKey ? 1 : 5;
+              break;
             default:
               // no-op
           }
+          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 (keyA !== datum.a) {
+          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();