@decidables/accumulable-elements 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.6](https://github.com/decidables/decidables/compare/@decidables/accumulable-elements@0.3.5...@decidables/accumulable-elements@0.3.6) (2025-11-30)
+
+**Note:** Version bump only for package @decidables/accumulable-elements
+
+
+
+
+
+## [0.3.5](https://github.com/decidables/decidables/compare/@decidables/accumulable-elements@0.3.4...@decidables/accumulable-elements@0.3.5) (2025-11-21)
+
+
+### Bug Fixes
+
+* **accumulable-elements:** in `ddm-model`, improved arrows on dimension lines for measures ([a3b8ac4](https://github.com/decidables/decidables/commit/a3b8ac462223960c9caa72a4c1f399e008b1c439))
+
+
+
 ## [0.3.4](https://github.com/decidables/decidables/compare/@decidables/accumulable-elements@0.3.3...@decidables/accumulable-elements@0.3.4) (2025-11-13)
 
 

package/README.md

@@ -1079,7 +1079,7 @@ export default class AccumulableElementSomething extends AccumulableElement {
   - `gulpfile.js` (Tasks for *gulp*)
   - `package.json` (Package config for *yarn* and *npm*)
   - `README.md` (This file)
-  - `rollup-stats.html` (Report on js bundle composition and size) **\[autogenerated\]**
+  - `rollup-stats.auto.html` (Report on js bundle composition and size) **\[autogenerated\]**
 
 ## [License](https://github.com/decidables/decidables/blob/main/LICENSE.md)
 

package/lib/accumulableElements.esm.js

@@ -8105,8 +8105,13 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
           }
         }
 
-        .measure {
-          stroke-width: 2;
+        .measure .line.short {
+          stroke-width: 0;
+        }
+
+        .measure .markers {
+          fill: none;
+          stroke-width: 0;
         }
 
         .measure .label {
@@ -8124,12 +8129,6 @@ 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);
         }
@@ -8141,12 +8140,6 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
           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);
         }
@@ -8156,12 +8149,6 @@ 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);
         }
@@ -8171,6 +8158,37 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
           text-anchor: middle;
         }
 
+        .measure-arrow {
+          fill: context-stroke;
+          stroke: context-stroke;
+        }
+
+        .measure-arrow .arrow {
+          stroke-width: 1;
+        }
+
+        .measure-arrow.capped .cap {
+          stroke-width: 2;
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.a {
+          fill: var(---color-a);
+          stroke: var(---color-a);
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.z {
+          fill: var(---color-z);
+          stroke: var(---color-z);
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.v {
+          fill: var(---color-v);
+          stroke: var(---color-v);
+        }
+
         /* Hack to avoid lack of context-stroke and context-fill in Safari */
         .measure-arrow.t0 {
           fill: var(---color-t0);
@@ -8437,19 +8455,19 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
     // Arrowhead marker for measures
     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');
+      svgDefs.append('marker').attr('id', `measure-arrow-${parameter}`).attr('class', `measure-arrow ${parameter}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-10 -6 12 12').attr('refX', '0').attr('refY', '0').attr('markerWidth', '12').attr('markerHeight', '12').append('path').attr('class', 'arrow').attr('d', 'M -7 -3 l 6 3 l -6 3 z');
     };
-    const measureArrowCap = parameter => {
+    const measureCappedArrow = 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');
+      const marker = svgDefs.append('marker').attr('id', `measure-capped-arrow-${parameter}`).attr('class', `measure-arrow capped ${parameter}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-10 -6 12 12').attr('refX', '0').attr('refY', '0').attr('markerWidth', '12').attr('markerHeight', '12');
+      marker.append('path').attr('class', 'arrow').attr('d', 'M -7 -3 l 6 3 l -6 3 z');
+      marker.append('path').attr('class', 'cap').attr('d', 'M 0 -4 l 0 8');
     };
     measureArrow('a');
     measureArrow('z');
-    measureArrowCap('v');
+    measureCappedArrow('v');
     measureArrow('t0');
-    measureArrowCap('t0');
+    measureCappedArrow('t0');
     // Flat markers for SDs
     const sdCap = outcome => {
       /* Hack to avoid lack of context-stroke and context-fill in Safari */
@@ -9045,20 +9063,27 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
     //  EXIT
     t0zUpdate.exit().remove();
 
+    // Measures
+    const markerCorrection = 2;
+
     // a Measure
     //  DATA-JOIN
     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)
+    aEnter.append('line').classed('line', true);
+    aEnter.append('line').classed('markers', 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(' = ');
     aLabel.append('tspan').classed('value', true);
     //  MERGE
+    const aLength = Math.abs(evidenceScale(this.bounds.upper) - evidenceScale(this.bounds.lower));
+    const aShort = aLength <= markerCorrection * 2;
     const aMerge = aEnter.merge(aUpdate);
-    aMerge.select('.line').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y1', evidenceScale(this.bounds.upper) + 2).attr('x2', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower) - 2);
+    aMerge.select('.line').classed('short', aShort).transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y1', evidenceScale(this.bounds.upper) + markerCorrection).attr('x2', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower) - markerCorrection);
+    aMerge.select('.markers').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y1', evidenceScale(this.bounds.upper)).attr('x2', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower));
     const aLabelMerge = aMerge.select('.label').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x', timeScale(this.scale.time.max)).attr('y', evidenceScale(this.bounds.upper) - this.rem * 0.25);
     aLabelMerge.select('.value').text(format('.2f')(this.a));
     //  EXIT
@@ -9069,15 +9094,19 @@ 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)
+    zEnter.append('line').classed('line', true);
+    zEnter.append('line').classed('markers', 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(' = ');
     zLabel.append('tspan').classed('value', true);
     //  MERGE
+    const zLength = Math.abs(evidenceScale(this.startingPoint) - evidenceScale(this.bounds.lower));
+    const zShort = zLength <= markerCorrection * 2;
     const zMerge = zEnter.merge(zUpdate);
-    zMerge.select('.line').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y1', evidenceScale(this.startingPoint) + 2).attr('x2', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower) - 2);
+    zMerge.select('.line').classed('short', zShort).transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y1', evidenceScale(this.startingPoint) + markerCorrection).attr('x2', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower) - markerCorrection);
+    zMerge.select('.markers').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y1', evidenceScale(this.startingPoint)).attr('x2', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower));
     const zLabelMerge = zMerge.select('.label').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x', timeScale(this.scale.time.min)).attr('y', evidenceScale(this.bounds.lower) + this.rem * 0.125);
     zLabelMerge.select('.value').text(format('.0%')(this.z));
     //  EXIT
@@ -9088,22 +9117,37 @@ 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)
-    /* 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)');
+    vEnter.append('path').classed('line', true);
+    vEnter.append('path').classed('markers', true)
+    /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', 'url(#measure-capped-arrow-v)').attr('marker-end', 'url(#measure-capped-arrow-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
+    // Full path
     const driftHypotenuse = timeScale(200) - timeScale(0) + this.rem * 0.75;
-    const driftCorrection = 2 / driftHypotenuse;
-    const driftAngle = Math.atan(this.v / 1000 * scaleRatio) - driftCorrection;
+    const driftAngle = Math.atan(this.v / 1000 * scaleRatio);
     const driftX = Math.cos(driftAngle) * driftHypotenuse;
     const driftY = Math.sin(driftAngle) * driftHypotenuse;
+    // Corrected path
+    const driftCorrection = markerCorrection / driftHypotenuse;
+    const driftAngleCorrected = Math.atan(this.v / 1000 * scaleRatio) - driftCorrection;
+    const driftStartX = Math.cos(driftCorrection) * driftHypotenuse;
+    const driftStartY = Math.sin(driftCorrection) * driftHypotenuse;
+    const driftEndX = Math.cos(driftAngleCorrected) * driftHypotenuse;
+    const driftEndY = Math.sin(driftAngleCorrected) * driftHypotenuse;
+    // Short path?
+    const vLength = driftAngleCorrected * driftHypotenuse;
+    const vShort = vLength <= markerCorrection * 2;
     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) - 2}
-        A ${timeScale(200) - timeScale(0)} ${timeScale(200) - timeScale(0)} 0 0 0 ${timeScale(this.t0) + driftX} ${evidenceScale(this.startingPoint) - driftY}
+    vMerge.select('.line').classed('short', vShort).transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('d', `
+        M ${timeScale(this.t0) + driftStartX}, ${evidenceScale(this.startingPoint) - driftStartY}
+        A ${timeScale(200) - timeScale(0) + this.rem * 0.75} ${timeScale(200) - timeScale(0) + this.rem * 0.75} 0 0 0 ${timeScale(this.t0) + driftEndX} ${evidenceScale(this.startingPoint) - driftEndY}
+      `);
+    vMerge.select('.markers').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('d', `
+        M ${timeScale(this.t0 + 200) + this.rem * 0.75}, ${evidenceScale(this.startingPoint)}
+        A ${timeScale(200) - timeScale(0) + this.rem * 0.75} ${timeScale(200) - timeScale(0) + this.rem * 0.75} 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);
     vLabelMerge.select('.value').text(format('.2f')(this.v));
@@ -9115,15 +9159,19 @@ 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)
-    /* 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)');
+    t0Enter.append('line').classed('line', true);
+    t0Enter.append('line').classed('markers', 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-capped-arrow-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(' = ');
     t0Label.append('tspan').classed('value', true);
     //  MERGE
+    const t0Length = Math.abs(timeScale(0) - timeScale(this.t0));
+    const t0Short = t0Length <= markerCorrection * 2;
     const t0Merge = t0Enter.merge(t0Update);
-    t0Merge.select('.line').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(0) + 2).attr('y1', evidenceScale(this.startingPoint) - this.rem * 0.75).attr('x2', timeScale(this.t0) - 2).attr('y2', evidenceScale(this.startingPoint) - this.rem * 0.75);
+    t0Merge.select('.line').classed('short', t0Short).transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(0) + markerCorrection).attr('y1', evidenceScale(this.startingPoint) - this.rem * 0.75).attr('x2', timeScale(this.t0) - markerCorrection).attr('y2', evidenceScale(this.startingPoint) - this.rem * 0.75);
+    t0Merge.select('.markers').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(0)).attr('y1', evidenceScale(this.startingPoint) - this.rem * 0.75).attr('x2', timeScale(this.t0)).attr('y2', evidenceScale(this.startingPoint) - this.rem * 0.75);
     const t0LabelMerge = t0Merge.select('.label').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x', timeScale(this.t0) + this.rem * 0.25).attr('y', evidenceScale(this.bounds.upper) - this.rem * 0.25);
     t0LabelMerge.select('.value').text(format('d')(this.t0));
     //  EXIT