@decidables/accumulable-elements 0.3.3 → 0.3.4

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.4](https://github.com/decidables/decidables/compare/@decidables/accumulable-elements@0.3.3...@decidables/accumulable-elements@0.3.4) (2025-11-13)
+
+
+### Bug Fixes
+
+* **accumulable-elements:** fix ddm-model line markers for Safari and add dimension lines ([3269ea1](https://github.com/decidables/decidables/commit/3269ea1066759376ec5fd3d1c88fef1065f83461))
+
+
+
 ## [0.3.3](https://github.com/decidables/decidables/compare/@decidables/accumulable-elements@0.3.2...@decidables/accumulable-elements@0.3.3) (2025-11-03)
 
 **Note:** Version bump only for package @decidables/accumulable-elements

package/lib/accumulableElements.esm.js

@@ -8124,15 +8124,29 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
           text-anchor: end;
         }
 
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.a {
+          fill: var(---color-a);
+          stroke: var(---color-a);
+        }
+
         .measure.z .line {
           stroke: var(---color-z);
         }
 
-        .measure.z .label {
+        .measure.z .label,
+        /* Hack to avoid Safari weirdness */
+        .measure.z .label tspan {
           dominant-baseline: hanging;
           text-anchor: start;
         }
 
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.z {
+          fill: var(---color-z);
+          stroke: var(---color-z);
+        }
+
         .measure.v .line {
           stroke: var(---color-v);
         }
@@ -8142,6 +8156,12 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
           text-anchor: start;
         }
 
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.v {
+          fill: var(---color-v);
+          stroke: var(---color-v);
+        }
+
         .measure.t0 .line {
           stroke: var(---color-t0);
         }
@@ -8151,6 +8171,12 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
           text-anchor: middle;
         }
 
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.t0 {
+          fill: var(---color-t0);
+          stroke: var(---color-t0);
+        }
+
         .sd .indicator,
         .mean .indicator {
           stroke-width: 2;
@@ -8176,6 +8202,20 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
           stroke: var(---color-error-dark);
         }
 
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .cap.correct {
+          fill: var(---color-correct-dark);
+          stroke: var(---color-correct-dark);
+          stroke-dasharray: 100%;
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .cap.error {
+          fill: var(---color-error-dark);
+          stroke: var(---color-error-dark);
+          stroke-dasharray: 100%;
+        }
+
         .rt-label rect {
           filter: url("#shadow-2");
 
@@ -8395,10 +8435,29 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
     const svgEnter = svgUpdate.enter().append('svg').classed('main', true).html(AccumulableElement.svgDefs);
     const svgDefs = svgEnter.append('defs');
     // Arrowhead marker for measures
-    svgDefs.append('marker').attr('id', 'measure-arrow').attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '2').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('d', 'M -3 -3 l 6 3 l -6 3 z');
+    const measureArrow = parameter => {
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      svgDefs.append('marker').attr('id', `measure-arrow-${parameter}`).attr('class', `measure-arrow ${parameter}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '2').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('d', 'M -3 -3 l 6 3 l -6 3 z');
+    };
+    const measureArrowCap = parameter => {
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      const marker = svgDefs.append('marker').attr('id', `measure-arrow-cap-${parameter}`).attr('class', `measure-arrow cap ${parameter}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '2').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10');
+      marker.append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('d', 'M -3 -3 l 6 3 l -6 3 z');
+      marker.append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 4 -4 l 0 8');
+    };
+    measureArrow('a');
+    measureArrow('z');
+    measureArrowCap('v');
+    measureArrow('t0');
+    measureArrowCap('t0');
     // Flat markers for SDs
-    svgDefs.append('marker').attr('id', 'model-sd-cap').attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -4 l 0 8');
-    svgDefs.append('marker').attr('id', 'data-sd-cap').attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -3 l 0 6');
+    const sdCap = outcome => {
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      svgDefs.append('marker').attr('id', `model-sd-cap-${outcome}`).attr('class', `model-sd cap ${outcome}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -4 l 0 8');
+      svgDefs.append('marker').attr('id', `data-sd-cap-${outcome}`).attr('class', `data-sd cap ${outcome}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -3 l 0 6');
+    };
+    sdCap('error');
+    sdCap('correct');
     const gradient = svgDefs.append('linearGradient').attr('id', 'path-animate').attr('gradientUnits', 'userSpaceOnUse').attr('color-interpolation', 'linearRGB').attr('x1', '0').attr('x2', '0').attr('y1', evidenceScale(this.bounds.upper)).attr('y2', evidenceScale(this.bounds.lower));
     gradient.append('stop').classed('stop-0', true).attr('offset', '0%');
     gradient.append('stop').classed('stop-100', true).attr('offset', '100%');
@@ -8991,7 +9050,8 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
     const aUpdate = evidenceOverlayerMerge.selectAll('.measure.a').data(this.measures ? [this.a] : []);
     //  ENTER
     const aEnter = aUpdate.enter().append('g').classed('measure a', true);
-    aEnter.append('line').classed('line', true).attr('marker-start', 'url(#measure-arrow)').attr('marker-end', 'url(#measure-arrow)');
+    aEnter.append('line').classed('line', true)
+    /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', 'url(#measure-arrow-a)').attr('marker-end', 'url(#measure-arrow-a)');
     const aLabel = aEnter.append('text').classed('label', true);
     aLabel.append('tspan').classed('a math-var', true).text('a');
     aLabel.append('tspan').classed('equals', true).text(' = ');
@@ -9009,7 +9069,8 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
     const zUpdate = evidenceOverlayerMerge.selectAll('.measure.z').data(this.measures ? [this.z] : []);
     //  ENTER
     const zEnter = zUpdate.enter().append('g').classed('measure z', true);
-    zEnter.append('line').classed('line', true).attr('marker-start', 'url(#measure-arrow)').attr('marker-end', 'url(#measure-arrow)');
+    zEnter.append('line').classed('line', true)
+    /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', 'url(#measure-arrow-z)').attr('marker-end', 'url(#measure-arrow-z)');
     const zLabel = zEnter.append('text').classed('label', true);
     zLabel.append('tspan').classed('z math-var', true).text('z');
     zLabel.append('tspan').classed('equals', true).text(' = ');
@@ -9027,19 +9088,21 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
     const vUpdate = evidenceOverlayerMerge.selectAll('.measure.v').data(this.measures ? [this.v] : []);
     //  ENTER
     const vEnter = vUpdate.enter().append('g').classed('measure v', true);
-    vEnter.append('path').classed('line', true).attr('marker-start', 'url(#measure-arrow)').attr('marker-end', 'url(#measure-arrow)');
+    vEnter.append('path').classed('line', true)
+    /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', 'url(#measure-arrow-cap-v)').attr('marker-end', 'url(#measure-arrow-cap-v)');
     const vLabel = vEnter.append('text').classed('label', true);
     vLabel.append('tspan').classed('v math-var', true).text('v');
     vLabel.append('tspan').classed('equals', true).text(' = ');
     vLabel.append('tspan').classed('value', true);
     //  MERGE
-    const driftAngle = Math.atan(this.v / 1000 * scaleRatio);
     const driftHypotenuse = timeScale(200) - timeScale(0) + this.rem * 0.75;
+    const driftCorrection = 2 / driftHypotenuse;
+    const driftAngle = Math.atan(this.v / 1000 * scaleRatio) - driftCorrection;
     const driftX = Math.cos(driftAngle) * driftHypotenuse;
     const driftY = Math.sin(driftAngle) * driftHypotenuse;
     const vMerge = vEnter.merge(vUpdate);
     vMerge.select('.line').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('d', `
-        M ${timeScale(this.t0 + 200) + this.rem * 0.75}, ${evidenceScale(this.startingPoint)}
+        M ${timeScale(this.t0 + 200) + this.rem * 0.75}, ${evidenceScale(this.startingPoint) - 2}
         A ${timeScale(200) - timeScale(0)} ${timeScale(200) - timeScale(0)} 0 0 0 ${timeScale(this.t0) + driftX} ${evidenceScale(this.startingPoint) - driftY}
       `);
     const vLabelMerge = vMerge.select('.label').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x', timeScale(this.t0 + 200) + this.rem * 0.5).attr('y', evidenceScale(this.bounds.upper) - this.rem * 0.25);
@@ -9052,7 +9115,8 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
     const t0Update = evidenceOverlayerMerge.selectAll('.measure.t0').data(this.measures ? [this.t0] : []);
     //  ENTER
     const t0Enter = t0Update.enter().append('g').classed('measure t0', true);
-    t0Enter.append('line').classed('line', true).attr('marker-start', 'url(#measure-arrow)').attr('marker-end', 'url(#measure-arrow)');
+    t0Enter.append('line').classed('line', true)
+    /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', 'url(#measure-arrow-t0)').attr('marker-end', 'url(#measure-arrow-cap-t0)');
     const t0Label = t0Enter.append('text').classed('label', true);
     t0Label.append('tspan').classed('t0 math-var', true).text('t₀');
     t0Label.append('tspan').classed('equals', true).text(' = ');
@@ -9128,7 +9192,12 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
     const sdEnter = sdUpdate.enter().append('g').attr('class', datum => {
       return `model sd ${datum.outcome}`;
     });
-    sdEnter.append('line').classed('indicator', true).attr('marker-start', 'url(#model-sd-cap)').attr('marker-end', 'url(#model-sd-cap)');
+    sdEnter.append('line').classed('indicator', true)
+    /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', datum => {
+      return `url(#model-sd-cap-${datum.outcome})`;
+    }).attr('marker-end', datum => {
+      return `url(#model-sd-cap-${datum.outcome})`;
+    });
     //  MERGE
     const sdMerge = sdEnter.merge(sdUpdate);
     sdMerge.select('.indicator').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', datum => {
@@ -9152,7 +9221,12 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
     const dataSDEnter = dataSDUpdate.enter().append('g').attr('class', datum => {
       return `data sd ${datum.outcome}`;
     });
-    dataSDEnter.append('line').classed('indicator', true).attr('marker-start', 'url(#data-sd-cap)').attr('marker-end', 'url(#data-sd-cap)').attr('y1', datum => {
+    dataSDEnter.append('line').classed('indicator', true)
+    /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', datum => {
+      return `url(#data-sd-cap-${datum.outcome})`;
+    }).attr('marker-end', datum => {
+      return `url(#data-sd-cap-${datum.outcome})`;
+    }).attr('y1', datum => {
       return datum.densityScale(0) + (datum.outcome === 'correct' ? 0.375 : -0.375) * this.rem;
     }).attr('y2', datum => {
       return datum.densityScale(0) + (datum.outcome === 'correct' ? 0.375 : -0.375) * this.rem;