@decidables/accumulable-elements 0.3.6 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/accumulable-elements",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "accumulable-elements: Web Components for visualizing the Diffusion Decision Model",
   "keywords": [
     "web component",
@@ -55,12 +55,12 @@
   },
   "dependencies": {
     "@decidables/accumulable-math": "^0.2.5",
-    "@decidables/decidables-elements": "^0.5.5",
-    "@lit-labs/motion": "^1.0.9",
+    "@decidables/decidables-elements": "^0.5.7",
+    "@lit-labs/motion": "^1.1.0",
     "@observablehq/plot": "^0.6.17",
     "bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
     "d3": "^7.9.0",
-    "lit": "^3.3.1"
+    "lit": "^3.3.2"
   },
-  "gitHead": "045955a4696ea4b38440d84d467cad3ddaad812d"
+  "gitHead": "6fcd31a19c082ec41bde7d351bcb52161c5b654b"
 }

package/src/components/accumulable-control.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/button';
 import '@decidables/decidables-elements/slider';

package/src/components/accumulable-response.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import DDMMath from '@decidables/accumulable-math';
 import '@decidables/decidables-elements/button';

package/src/components/accumulable-table.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/spinner';
 

package/src/components/ddm-fit.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import DDMMath from '@decidables/accumulable-math';
 

package/src/components/ddm-model.js

@@ -1,5 +1,5 @@
 
-import {css, html} from 'lit';
+import {css, html, render} from 'lit';
 import * as d3 from 'd3';
 
 import DDMMath from '@decidables/accumulable-math';
@@ -477,31 +477,50 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
         /*
           OVERLAYER
         */
-        .interactive {
+        .boundary.interactive {
+          cursor: ns-resize;
+        }
+
+        .t0z.interactive {
+          cursor: move;
+        }
+
+        .boundary.interactive,
+        .t0z.interactive {
           filter: url("#shadow-2");
           outline: none;
         }
 
-        .interactive:hover {
+        .boundary.interactive:hover,
+        .t0z.interactive:hover {
           filter: url("#shadow-4");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          /* https://github.com/emilbjorklund/svg-weirdness/issues/27 */
+          transform: translateX(0);
         }
 
-        .interactive:active {
+        .boundary.interactive:active,
+        .t0z.interactive:active {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateY(0);
         }
 
-        :host(.keyboard) .interactive:focus {
+        :host(.keyboard) .boundary.interactive:focus,
+        :host(.keyboard) .t0z.interactive:focus {
           filter: url("#shadow-8");
-        }
 
-        .boundary {
-          fill: none;
-          stroke: var(---color-element-emphasis);
-          stroke-width: 2;
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateZ(0);
         }
 
-        .boundary.interactive {
-          cursor: ns-resize;
+        .t0z .point {
+          fill: var(---color-element-emphasis);
+          stroke-width: 0;
+
+          r: 6px;
         }
 
         .drift {
@@ -515,21 +534,38 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
 
         .drift.interactive {
           cursor: ns-resize;
+
+          filter: url("#shadow-2");
+          outline: none;
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          fill: #000000;
+          fill-opacity: 0;
         }
 
-        .drift .arrow {
-          stroke-dasharray: none;
+        .drift.interactive:hover {
+          filter: url("#shadow-4");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          fill: #ff0000;
         }
 
-        .t0z.interactive {
-          cursor: move;
+        .drift.interactive:active {
+          filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          fill: #00ff00;
         }
 
-        .t0z .point {
-          fill: var(---color-element-emphasis);
-          stroke-width: 0;
+        :host(.keyboard) .drift.interactive:focus {
+          filter: url("#shadow-8");
 
-          r: 6px;
+          /* HACK: This gets Safari to correctly apply the filter! */
+          fill: #0000ff;
+        }
+
+        .drift .arrow {
+          stroke-dasharray: none;
         }
 
         /* Make larger targets for touch users */
@@ -938,12 +974,16 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     //  ENTER
     const svgEnter = svgUpdate.enter().append('svg')
       .classed('main', true)
-      .html(AccumulableElement.svgDefs);
-    const svgDefs = svgEnter.append('defs');
+      .each((datum, index, nodes) => {
+        // Filters for shadows
+        render(AccumulableElement.svgFilters, nodes[index]);
+      });
+    const svgMarkers = svgEnter.append('defs')
+      .classed('markers', true);
     // Arrowhead marker for measures
     const measureArrow = (parameter) => {
       /* Hack to avoid lack of context-stroke and context-fill in Safari */
-      svgDefs.append('marker')
+      svgMarkers.append('marker')
         .attr('id', `measure-arrow-${parameter}`)
         .attr('class', `measure-arrow ${parameter}`)
         .attr('orient', 'auto-start-reverse')
@@ -959,7 +999,7 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     };
     const measureCappedArrow = (parameter) => {
       /* Hack to avoid lack of context-stroke and context-fill in Safari */
-      const marker = svgDefs.append('marker')
+      const marker = svgMarkers.append('marker')
         .attr('id', `measure-capped-arrow-${parameter}`)
         .attr('class', `measure-arrow capped ${parameter}`)
         .attr('orient', 'auto-start-reverse')
@@ -986,7 +1026,7 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     // Flat markers for SDs
     const sdCap = (outcome) => {
       /* Hack to avoid lack of context-stroke and context-fill in Safari */
-      svgDefs.append('marker')
+      svgMarkers.append('marker')
         .attr('id', `model-sd-cap-${outcome}`)
         .attr('class', `model-sd cap ${outcome}`)
         .attr('orient', 'auto-start-reverse')
@@ -1001,7 +1041,7 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
         .attr('fill', 'context-stroke')
         .attr('stroke-width', '2')
         .attr('d', 'M 0 -4 l 0 8');
-      svgDefs.append('marker')
+      svgMarkers.append('marker')
         .attr('id', `data-sd-cap-${outcome}`)
         .attr('class', `data-sd cap ${outcome}`)
         .attr('orient', 'auto-start-reverse')
@@ -1019,7 +1059,7 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     };
     sdCap('error');
     sdCap('correct');
-    const gradient = svgDefs.append('linearGradient')
+    const gradient = svgMarkers.append('linearGradient')
       .attr('id', 'path-animate')
       .attr('gradientUnits', 'userSpaceOnUse')
       .attr('color-interpolation', 'linearRGB')

package/src/components/ddm-parameters.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/slider';
 import DDMMath from '@decidables/accumulable-math';

package/src/components/rdk-2afc-task.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 import * as d3 from 'd3';
 
 import {DecidablesMixinResizeable} from '@decidables/decidables-elements';

package/src/examples/ddm-example.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import AccumulableElement from '../accumulable-element';