@mim/histui 0.2.0 → 0.2.2

package/README.md

@@ -157,7 +157,7 @@ createHistuiTimeline({
       measurement: {
         enabled: true,
         transient: true,
-        fadeOutMs: 3000
+        fadeOutMs: 1200
       },
       explode: {
         maxVisible: 42,
@@ -169,7 +169,7 @@ createHistuiTimeline({
 });
 ```
 
-`timeline.measurement.enabled` draws a dimension-style line across the currently visible timeline span and labels it with the visible year count. Set `timeline.measurement.transient` to `true` to show it only after the viewport changes; it fades out after `fadeOutMs` milliseconds, defaulting to `3000`.
+`timeline.measurement.enabled` draws a dimension-style line across the currently visible timeline span and labels it with the visible year count. Set `timeline.measurement.transient` to `true` to show it only after the viewport changes; it fades out after `fadeOutMs` milliseconds, defaulting to `1200`.
 
 ## Check
 

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Reusable Histui interactive timeline package for PastStruct and normalized historical records.",
   "type": "module",
   "main": "./src/index.js",

package/src/default-config.js

@@ -32,7 +32,7 @@ export const DEFAULT_HISTUI_CONFIG = {
     measurement: {
       enabled: false,
       transient: false,
-      fadeOutMs: 3000
+      fadeOutMs: 1200
     },
     lod: {
       enabled: true,

package/src/styles.css

@@ -169,7 +169,7 @@
 
 .histui-measurement-line {
   position: absolute;
-  z-index: 6;
+  z-index: 240;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-4px);

package/src/timeline-view.js

@@ -1575,13 +1575,13 @@ export class TimelineView {
 
   getMeasurementConfig() {
     const measurement = this.config.timeline?.measurement || {};
-    const fadeOutMs = Number(measurement.fadeOutMs ?? measurement.hideAfterMs ?? 3000);
+    const fadeOutMs = Number(measurement.fadeOutMs ?? measurement.hideAfterMs ?? 1200);
     return {
       enabled: measurement.enabled === true,
       transient: measurement.transient === true ||
         measurement.showOnChangeOnly === true ||
         measurement.visibleOnChangeOnly === true,
-      fadeOutMs: Number.isFinite(fadeOutMs) ? Math.max(0, fadeOutMs) : 3000,
+      fadeOutMs: Number.isFinite(fadeOutMs) ? Math.max(0, fadeOutMs) : 1200,
       offsetPx: Number.isFinite(Number(measurement.offsetPx)) ? Number(measurement.offsetPx) : null
     };
   }
@@ -1595,14 +1595,15 @@ export class TimelineView {
     }
 
     if (metrics.placement === "center") {
-      return clamp(this.direction === "rtl" ? metrics.width - offset : offset, 18, metrics.width - 18);
+      const side = this.direction === "rtl" ? -1 : 1;
+      return clamp(metrics.axisCoordinate + side * offset, 18, metrics.width - 18);
     }
 
     const side = metrics.axisCoordinate < metrics.width / 2 ? 1 : -1;
     return clamp(metrics.axisCoordinate + side * offset, 18, metrics.width - 18);
   }
 
-  showMeasurementLine({ persistent = false, fadeOutMs = 3000 } = {}) {
+  showMeasurementLine({ persistent = false, fadeOutMs = 1200 } = {}) {
     if (!this.measurementLine) return;
     const wasHidden = this.measurementLine.hidden;
     this.measurementLine.hidden = false;