@unovis/ts 1.6.0-pre.1 → 1.6.0

package/components/crosshair/index.js

@@ -5,6 +5,7 @@ import { isArray, isNumber, getNearest, clamp, getNumber, isFunction, getStacked
 import { smartTransition } from '../../utils/d3.js';
 import { getColor } from '../../utils/color.js';
 import { Position } from '../../types/position.js';
+import { FindNearestDirection } from '../../types/data.js';
 import { CrosshairDefaultConfig } from './config.js';
 import * as style from './style.js';
 import { line, circle } from './style.js';
@@ -15,8 +16,9 @@ class Crosshair extends XYComponentCore {
         this.clippable = true; // Don't apply clipping path to this component. See XYContainer
         this._defaultConfig = CrosshairDefaultConfig;
         this.config = this._defaultConfig;
-        this.x = 0;
-        this.show = false;
+        this._xPx = undefined;
+        this._yPx = undefined;
+        this._mouseEvent = undefined;
         this._animFrameId = null;
         /** Accessors passed externally (e.g. from XYContainer) */
         this._accessors = {
@@ -27,7 +29,7 @@ class Crosshair extends XYComponentCore {
         };
         if (config)
             this.setConfig(config);
-        this.g.style('opacity', this.show ? 1 : 0);
+        this.g.style('opacity', 0);
         this.line = this.g.append('line')
             .attr('class', line);
     }
@@ -43,26 +45,106 @@ class Crosshair extends XYComponentCore {
         const baseline = (_a = config.baseline) !== null && _a !== void 0 ? _a : this._accessors.baseline;
         return { x, y, yStacked, baseline };
     }
+    _isContainerInViewport() {
+        var _a;
+        if (!((_a = this.container) === null || _a === void 0 ? void 0 : _a.node()))
+            return false;
+        const containerRect = this.container.node().getBoundingClientRect();
+        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+        const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+        // Calculate the visible area of the container
+        const visibleWidth = Math.max(0, Math.min(containerRect.right, viewportWidth) - Math.max(containerRect.left, 0));
+        const visibleHeight = Math.max(0, Math.min(containerRect.bottom, viewportHeight) - Math.max(containerRect.top, 0));
+        const containerArea = containerRect.width * containerRect.height;
+        const visibleArea = visibleWidth * visibleHeight;
+        // Container must be at least 35% visible
+        return containerArea > 0 && (visibleArea / containerArea) >= 0.35;
+    }
     setContainer(containerSvg) {
-        // Set up mousemove event for Crosshair
+        if (this.container === containerSvg)
+            return;
         this.container = containerSvg;
         this.container.on('mousemove.crosshair', this._onMouseMove.bind(this));
         this.container.on('mouseout.crosshair', this._onMouseOut.bind(this));
+        this.container.on('wheel.crosshair', this._onWheel.bind(this));
     }
     _render(customDuration) {
-        const { config } = this;
-        if (config.snapToData && !this.datum)
-            return;
+        var _a, _b, _c, _d, _e;
+        const { config, datamodel } = this;
         const duration = isNumber(customDuration) ? customDuration : config.duration;
+        const isForceShowAtDefined = config.forceShowAt !== undefined;
+        const xPx = isForceShowAtDefined ? this.xScale(config.forceShowAt) : this._xPx;
+        const xValue = this.xScale.invert(xPx);
+        const leftNearestDatumIndex = (((_a = datamodel.data) === null || _a === void 0 ? void 0 : _a.length) && this.accessors.x)
+            ? datamodel.data.indexOf(getNearest(datamodel.data, xValue, this.accessors.x, FindNearestDirection.Left)) : undefined;
+        // If `snapToData` is `true`, we need to find the nearest datum to the crosshair
+        // It can be from a mouse interaction or from a `forceShowAt` setting
+        let nearestDatum;
+        let nearestDatumIndex;
+        if (config.snapToData) {
+            if (!this.accessors.y && !this.accessors.yStacked && ((_b = datamodel.data) === null || _b === void 0 ? void 0 : _b.length)) {
+                console.warn('Unovis | Crosshair: Y accessors have not been configured. Please check if they\'re present in the configuration object');
+            }
+            // Emit a warning if there's no data to snap to.
+            // To keep the console clean, only emit the warning when there's mouse interaction.
+            if (!((_c = datamodel.data) === null || _c === void 0 ? void 0 : _c.length) && this._mouseEvent) {
+                console.warn('Unovis | Crosshair: No data to snap to. Make sure the data has been passed to the container or to the crosshair itself');
+            }
+            nearestDatum = getNearest(datamodel.data, xValue, this.accessors.x);
+            nearestDatumIndex = datamodel.data.indexOf(nearestDatum);
+        }
+        const xRange = this.xScale.range();
+        const yRange = this.yScale.range();
+        const xClamped = config.snapToData && nearestDatum
+            ? clamp(Math.round(this.xScale(getNumber(nearestDatum, this.accessors.x, nearestDatumIndex))), 0, this._width)
+            : clamp(xPx, xRange[0], xRange[1]);
+        const isCrosshairWithinXRange = (xPx >= xRange[0]) && (xPx <= xRange[1]);
+        const isCrosshairWithinYRange = (this._yPx >= yRange[1]) && (this._yPx <= yRange[0]);
+        let shouldShow = this._xPx ? isCrosshairWithinXRange && isCrosshairWithinYRange : isCrosshairWithinXRange;
+        // If the crosshair is far from the mouse pointer (usually when `snapToData` is `true` and data resolution is low), hide it
+        if (config.hideWhenFarFromPointer && ((Math.abs(xClamped - (+xPx)) >= config.hideWhenFarFromPointerDistance))) {
+            shouldShow = false;
+        }
+        const tooltip = (_d = config.tooltip) !== null && _d !== void 0 ? _d : this.tooltip;
+        if (shouldShow && tooltip && this._isContainerInViewport()) {
+            const container = tooltip.getContainer() || this.container.node();
+            const isContainerBody = tooltip.isContainerBody();
+            if (isForceShowAtDefined) {
+                // Convert SVG coordinates to screen coordinates
+                const containerRect = this.container.node().getBoundingClientRect();
+                // Use the actual left margin from the container
+                const screenX = (isContainerBody ? xPx + containerRect.left : xPx) + this._containerMargin.left;
+                const screenY = this._height / 2 + (isContainerBody ? containerRect.top : 0);
+                const pos = [screenX, screenY];
+                this._showTooltip(nearestDatum, xValue, pos, leftNearestDatumIndex);
+            }
+            else if (this._mouseEvent) {
+                const pos = (isContainerBody ? [this._mouseEvent.clientX, this._mouseEvent.clientY] : pointer(this._mouseEvent, container));
+                this._showTooltip(nearestDatum, xValue, pos, leftNearestDatumIndex);
+            }
+        }
+        else
+            this._hideTooltip();
+        // Trigger `onCrosshairMove` if the render was triggered by a mouse move event
+        if (this._mouseEvent) {
+            (_e = config.onCrosshairMove) === null || _e === void 0 ? void 0 : _e.call(config, shouldShow ? this.xScale.invert(this._xPx) : undefined, nearestDatum, nearestDatumIndex, this._mouseEvent);
+            this._mouseEvent = undefined;
+        }
         smartTransition(this.g, duration)
-            .style('opacity', this.show ? 1 : 0);
+            .style('opacity', shouldShow ? 1 : 0);
+        // When `config.forceShowAt` becomes `undefined`, the crosshair "jumps" to the edge of the chart.
+        // This looks off, so we stop further rendering when the `xPx` value is not finite.
+        if (!isFinite(xPx))
+            return;
         this.line
             .attr('y1', 0)
-            .attr('y1', this._height);
+            .attr('y2', this._height);
         smartTransition(this.line, duration, easeLinear)
-            .attr('x1', this.x)
-            .attr('x2', this.x);
-        const circleData = this.getCircleData();
+            .attr('x1', xClamped)
+            .attr('x2', xClamped);
+        const circleData = isFunction(config.getCircles)
+            ? config.getCircles(xValue, datamodel.data, this.yScale, leftNearestDatumIndex)
+            : this.getCircleData(nearestDatum, nearestDatumIndex);
         const circles = this.g
             .selectAll('circle')
             .data(circleData, (d, i) => { var _a; return (_a = d.id) !== null && _a !== void 0 ? _a : i; });
@@ -70,13 +152,13 @@ class Crosshair extends XYComponentCore {
             .append('circle')
             .attr('class', circle)
             .attr('r', 0)
-            .attr('cx', this.x)
+            .attr('cx', xClamped)
             .attr('cy', d => d.y)
             .style('fill', d => d.color)
             .style('stroke', d => d.strokeColor)
             .style('stroke-width', d => d.strokeWidth);
         smartTransition(circlesEnter.merge(circles), duration, easeLinear)
-            .attr('cx', this.x)
+            .attr('cx', xClamped)
             .attr('cy', d => d.y)
             .attr('r', 4)
             .style('opacity', d => d.opacity)
@@ -85,62 +167,54 @@ class Crosshair extends XYComponentCore {
             .style('stroke-width', d => d.strokeWidth);
         circles.exit().remove();
     }
-    hide() {
-        this._onMouseOut();
+    hide(sourceEvent) {
+        window.cancelAnimationFrame(this._animFrameId);
+        this._animFrameId = window.requestAnimationFrame(() => {
+            var _a, _b;
+            this._xPx = undefined;
+            this._yPx = undefined;
+            this._mouseEvent = undefined;
+            // We call `onCrosshairMove` with all the arguments set to `undefined` because we want
+            // the users to be able to hide the crosshair easily when using `forceShowAt`
+            (_b = (_a = this.config).onCrosshairMove) === null || _b === void 0 ? void 0 : _b.call(_a, undefined, undefined, undefined, sourceEvent);
+            this._render();
+        });
     }
     _onMouseMove(event) {
-        var _a, _b;
-        const { config, datamodel, element } = this;
+        var _a;
+        const { datamodel, element } = this;
         if (!this.accessors.x && ((_a = datamodel.data) === null || _a === void 0 ? void 0 : _a.length)) {
             console.warn('Unovis | Crosshair: X accessor function has not been configured. Please check if it\'s present in the configuration object');
         }
-        const [x] = pointer(event, element);
-        const xRange = this.xScale.range();
-        if (config.snapToData) {
-            if (!this.accessors.y && !this.accessors.yStacked && ((_b = datamodel.data) === null || _b === void 0 ? void 0 : _b.length)) {
-                console.warn('Unovis | Crosshair: Y accessors have not been configured. Please check if they\'re present in the configuration object');
-            }
-            const scaleX = this.xScale;
-            const valueX = scaleX.invert(x);
-            this.datum = getNearest(datamodel.data, valueX, this.accessors.x);
-            this.datumIndex = datamodel.data.indexOf(this.datum);
-            if (!this.datum)
-                return;
-            this.x = clamp(Math.round(scaleX(getNumber(this.datum, this.accessors.x, this.datumIndex))), 0, this._width);
-            // Show the crosshair only if it's in the chart range and not far from mouse pointer (if configured)
-            this.show = (this.x >= 0) && (this.x <= this._width) && (!config.hideWhenFarFromPointer || (Math.abs(this.x - x) < config.hideWhenFarFromPointerDistance));
-        }
-        else {
-            const tolerance = 2; // Show the crosshair when it is at least 2 pixels close to the chart area
-            this.x = clamp(x, xRange[0], xRange[1]);
-            this.show = (x >= (xRange[0] - tolerance)) && (x <= (xRange[1] + tolerance));
-        }
+        const [x, y] = pointer(event, element);
+        this._xPx = x;
+        this._yPx = y;
+        this._mouseEvent = event;
         window.cancelAnimationFrame(this._animFrameId);
         this._animFrameId = window.requestAnimationFrame(() => {
+            // We'll call `config.onCrosshairMove` in `_render` with the found `nearestDatum` and `nearestDatumIndex`,
+            // which can come from the mouse interaction or from the `forceShowAt` setting
             this._render();
         });
-        if (this.show)
-            this._showTooltip(event);
-        else
-            this._hideTooltip();
     }
-    _onMouseOut() {
-        this.show = false;
-        window.cancelAnimationFrame(this._animFrameId);
-        this._animFrameId = window.requestAnimationFrame(() => {
-            this._render();
-        });
-        this._hideTooltip();
+    _onMouseOut(event) {
+        var _a;
+        // Only hide if the mouse actually left the SVG, not just moved to a child
+        if (!event || !((_a = this.container) === null || _a === void 0 ? void 0 : _a.node().contains(event.relatedTarget))) {
+            this.hide(event);
+        }
+    }
+    _onWheel(event) {
+        this.hide(event);
     }
-    _showTooltip(event) {
+    _showTooltip(datum, xValue, pos, nearestDatumIndex) {
         var _a;
-        const { config } = this;
+        const { config, datamodel } = this;
         const tooltip = (_a = config.tooltip) !== null && _a !== void 0 ? _a : this.tooltip;
-        if (!tooltip)
+        if (!tooltip || !pos)
             return;
-        const container = tooltip.getContainer() || this.container.node();
-        const [x, y] = tooltip.isContainerBody() ? [event.clientX, event.clientY] : pointer(event, container);
-        const content = config.template(this.datum, this.xScale.invert(this.x));
+        const [x, y] = pos;
+        const content = config.template(datum, xValue, datamodel.data, nearestDatumIndex);
         // Force set `followCursor` to `true` because we don't want Crosshair's tooltip to be hoverable
         tooltip.config.followCursor = true;
         // Set tooltip placement based on Crosshair's position (left / right)
@@ -161,32 +235,30 @@ class Crosshair extends XYComponentCore {
     getYDataExtent() {
         return [undefined, undefined];
     }
-    getCircleData() {
+    getCircleData(datum, datumIndex) {
         var _a, _b;
-        const { config, datamodel: { data } } = this;
-        if (isFunction(config.getCircles))
-            return config.getCircles(this.xScale.invert(this.x), data, this.yScale);
-        if (config.snapToData && this.datum) {
+        const { config } = this;
+        if (config.snapToData && datum) {
             const yAccessors = (_a = this.accessors.y) !== null && _a !== void 0 ? _a : [];
             const yStackedAccessors = (_b = this.accessors.yStacked) !== null && _b !== void 0 ? _b : [];
-            const baselineValue = getNumber(this.datum, this.accessors.baseline, this.datumIndex) || 0;
-            const stackedValues = getStackedValues(this.datum, this.datumIndex, ...yStackedAccessors)
-                .map((value, index, arr) => ({
+            const baselineValue = getNumber(datum, this.accessors.baseline, datumIndex) || 0;
+            const stackedValues = getStackedValues(datum, datumIndex, ...yStackedAccessors)
+                .map((value, index) => ({
                 y: this.yScale(value + baselineValue),
-                opacity: isNumber(getNumber(this.datum, yStackedAccessors[index])) ? 1 : 0,
-                color: getColor(this.datum, config.color, index),
-                strokeColor: config.strokeColor ? getColor(this.datum, config.strokeColor, index) : undefined,
-                strokeWidth: config.strokeWidth ? getNumber(this.datum, config.strokeWidth, index) : undefined,
+                opacity: isNumber(getNumber(datum, yStackedAccessors[index], index)) ? 1 : 0,
+                color: getColor(datum, config.color, index),
+                strokeColor: config.strokeColor ? getColor(datum, config.strokeColor, index) : undefined,
+                strokeWidth: config.strokeWidth ? getNumber(datum, config.strokeWidth, index) : undefined,
             }));
             const regularValues = yAccessors
                 .map((a, index) => {
-                const value = getNumber(this.datum, a);
+                const value = getNumber(datum, a, datumIndex);
                 return {
                     y: this.yScale(value),
                     opacity: isNumber(value) ? 1 : 0,
-                    color: getColor(this.datum, config.color, stackedValues.length + index),
-                    strokeColor: config.strokeColor ? getColor(this.datum, config.strokeColor, index) : undefined,
-                    strokeWidth: config.strokeWidth ? getNumber(this.datum, config.strokeWidth, index) : undefined,
+                    color: getColor(datum, config.color, stackedValues.length + index),
+                    strokeColor: config.strokeColor ? getColor(datum, config.strokeColor, index) : undefined,
+                    strokeWidth: config.strokeWidth ? getNumber(datum, config.strokeWidth, index) : undefined,
                 };
             });
             return stackedValues.concat(regularValues);

package/components/crosshair/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/crosshair/index.ts"],"sourcesContent":["import { Selection, pointer } from 'd3-selection'\nimport { easeLinear } from 'd3-ease'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\nimport { Tooltip } from 'components/tooltip'\n\n// Utils\nimport { isNumber, isArray, getNumber, clamp, getStackedValues, getNearest, isFunction } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Position } from 'types/position'\n\n// Local Types\nimport { CrosshairAccessors, CrosshairCircle } from './types'\n\n// Config\nimport { CrosshairDefaultConfig, CrosshairConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Crosshair<Datum> extends XYComponentCore<Datum, CrosshairConfigInterface<Datum>> {\n  static selectors = s\n  clippable = true // Don't apply clipping path to this component. See XYContainer\n  protected _defaultConfig = CrosshairDefaultConfig as CrosshairConfigInterface<Datum>\n  public config: CrosshairConfigInterface<Datum> = this._defaultConfig\n  container: Selection<SVGSVGElement, any, SVGSVGElement, any>\n  line: Selection<SVGLineElement, any, SVGElement, any>\n  x = 0\n  datum: Datum\n  datumIndex: number\n  show = false\n  private _animFrameId: number = null\n\n  /** Tooltip component to be used by Crosshair if not provided by the config.\n   * This property is supposed to be set externally by a container component like XYContainer. */\n  public tooltip: Tooltip\n\n  /** Accessors passed externally (e.g. from XYContainer) */\n  private _accessors: CrosshairAccessors<Datum> = {\n    x: undefined,\n    y: undefined,\n    yStacked: undefined,\n    baseline: undefined,\n  }\n\n  public set accessors (accessors: CrosshairAccessors<Datum>) { this._accessors = accessors }\n  public get accessors (): CrosshairAccessors<Datum> {\n    const { config } = this\n\n    const hasConfig = !!(config.x || config.y || config.yStacked)\n    const x = hasConfig ? config.x : this._accessors.x\n    const yAcc = hasConfig ? config.y : this._accessors.y\n    const y = yAcc ? (isArray(yAcc) ? yAcc : [yAcc]) : undefined\n    const yStacked = hasConfig ? config.yStacked : this._accessors.yStacked\n    const baseline = config.baseline ?? this._accessors.baseline\n\n    return { x, y, yStacked, baseline }\n  }\n\n  constructor (config?: CrosshairConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n\n    this.g.style('opacity', this.show ? 1 : 0)\n    this.line = this.g.append('line')\n      .attr('class', s.line)\n  }\n\n  setContainer (containerSvg: Selection<SVGSVGElement, unknown, SVGSVGElement, unknown>): void {\n    // Set up mousemove event for Crosshair\n    this.container = containerSvg\n    this.container.on('mousemove.crosshair', this._onMouseMove.bind(this))\n    this.container.on('mouseout.crosshair', this._onMouseOut.bind(this))\n  }\n\n  _render (customDuration?: number): void {\n    const { config } = this\n    if (config.snapToData && !this.datum) return\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    smartTransition(this.g, duration)\n      .style('opacity', this.show ? 1 : 0)\n\n    this.line\n      .attr('y1', 0)\n      .attr('y1', this._height)\n\n    smartTransition(this.line, duration, easeLinear)\n      .attr('x1', this.x)\n      .attr('x2', this.x)\n\n    const circleData = this.getCircleData()\n    const circles = this.g\n      .selectAll<SVGCircleElement, CrosshairCircle>('circle')\n      .data(circleData, (d, i) => d.id ?? i)\n\n    const circlesEnter = circles.enter()\n      .append('circle')\n      .attr('class', s.circle)\n      .attr('r', 0)\n      .attr('cx', this.x)\n      .attr('cy', d => d.y)\n      .style('fill', d => d.color)\n      .style('stroke', d => d.strokeColor)\n      .style('stroke-width', d => d.strokeWidth)\n\n    smartTransition(circlesEnter.merge(circles), duration, easeLinear)\n      .attr('cx', this.x)\n      .attr('cy', d => d.y)\n      .attr('r', 4)\n      .style('opacity', d => d.opacity)\n      .style('fill', d => d.color)\n      .style('stroke', d => d.strokeColor)\n      .style('stroke-width', d => d.strokeWidth)\n\n    circles.exit().remove()\n  }\n\n  hide (): void {\n    this._onMouseOut()\n  }\n\n  _onMouseMove (event: MouseEvent): void {\n    const { config, datamodel, element } = this\n    if (!this.accessors.x && datamodel.data?.length) {\n      console.warn('Unovis | Crosshair: X accessor function has not been configured. Please check if it\\'s present in the configuration object')\n    }\n    const [x] = pointer(event, element)\n    const xRange = this.xScale.range()\n\n    if (config.snapToData) {\n      if (!this.accessors.y && !this.accessors.yStacked && datamodel.data?.length) {\n        console.warn('Unovis | Crosshair: Y accessors have not been configured. Please check if they\\'re present in the configuration object')\n      }\n      const scaleX = this.xScale\n      const valueX = scaleX.invert(x) as number\n\n      this.datum = getNearest(datamodel.data, valueX, this.accessors.x)\n      this.datumIndex = datamodel.data.indexOf(this.datum)\n      if (!this.datum) return\n\n      this.x = clamp(Math.round(scaleX(getNumber(this.datum, this.accessors.x, this.datumIndex))), 0, this._width)\n\n      // Show the crosshair only if it's in the chart range and not far from mouse pointer (if configured)\n      this.show = (this.x >= 0) && (this.x <= this._width) && (!config.hideWhenFarFromPointer || (Math.abs(this.x - x) < config.hideWhenFarFromPointerDistance))\n    } else {\n      const tolerance = 2 // Show the crosshair when it is at least 2 pixels close to the chart area\n      this.x = clamp(x, xRange[0], xRange[1])\n      this.show = (x >= (xRange[0] - tolerance)) && (x <= (xRange[1] + tolerance))\n    }\n\n    window.cancelAnimationFrame(this._animFrameId)\n    this._animFrameId = window.requestAnimationFrame(() => {\n      this._render()\n    })\n\n    if (this.show) this._showTooltip(event)\n    else this._hideTooltip()\n  }\n\n  _onMouseOut (): void {\n    this.show = false\n\n    window.cancelAnimationFrame(this._animFrameId)\n    this._animFrameId = window.requestAnimationFrame(() => {\n      this._render()\n    })\n    this._hideTooltip()\n  }\n\n  _showTooltip (event: MouseEvent): void {\n    const { config } = this\n    const tooltip = config.tooltip ?? this.tooltip\n    if (!tooltip) return\n\n    const container = tooltip.getContainer() || this.container.node()\n    const [x, y] = tooltip.isContainerBody() ? [event.clientX, event.clientY] : pointer(event, container)\n    const content = config.template(this.datum, this.xScale.invert(this.x))\n    // Force set `followCursor` to `true` because we don't want Crosshair's tooltip to be hoverable\n    tooltip.config.followCursor = true\n\n    // Set tooltip placement based on Crosshair's position (left / right)\n    if (!tooltip.config.horizontalPlacement || tooltip.config.horizontalPlacement === Position.Auto) {\n      const xRelative = tooltip.isContainerBody() ? x - this.container.node().getBoundingClientRect().left : x\n      tooltip.overrideHorizontalPlacement(xRelative > this._containerWidth / 2 ? Position.Left : Position.Right)\n    }\n\n    if (content) tooltip.show(content, { x, y })\n  }\n\n  _hideTooltip (): void {\n    const { config } = this\n    const tooltip = config.tooltip ?? this.tooltip\n    tooltip?.hide()\n  }\n\n  // We don't want Crosshair to be be taken in to account in domain calculations\n  getYDataExtent (): number[] {\n    return [undefined, undefined]\n  }\n\n  private getCircleData (): CrosshairCircle[] {\n    const { config, datamodel: { data } } = this\n\n    if (isFunction(config.getCircles)) return config.getCircles(this.xScale.invert(this.x), data, this.yScale)\n\n    if (config.snapToData && this.datum) {\n      const yAccessors = this.accessors.y ?? []\n      const yStackedAccessors = this.accessors.yStacked ?? []\n      const baselineValue = getNumber(this.datum, this.accessors.baseline, this.datumIndex) || 0\n      const stackedValues: CrosshairCircle[] = getStackedValues(this.datum, this.datumIndex, ...yStackedAccessors)\n        .map((value, index, arr) => ({\n          y: this.yScale(value + baselineValue),\n          opacity: isNumber(getNumber(this.datum, yStackedAccessors[index])) ? 1 : 0,\n          color: getColor(this.datum, config.color, index),\n          strokeColor: config.strokeColor ? getColor(this.datum, config.strokeColor, index) : undefined,\n          strokeWidth: config.strokeWidth ? getNumber(this.datum, config.strokeWidth, index) : undefined,\n        }))\n\n      const regularValues: CrosshairCircle[] = yAccessors\n        .map((a, index) => {\n          const value = getNumber(this.datum, a)\n          return {\n            y: this.yScale(value),\n            opacity: isNumber(value) ? 1 : 0,\n            color: getColor(this.datum, config.color, stackedValues.length + index),\n            strokeColor: config.strokeColor ? getColor(this.datum, config.strokeColor, index) : undefined,\n            strokeWidth: config.strokeWidth ? getNumber(this.datum, config.strokeWidth, index) : undefined,\n          }\n        })\n\n      return stackedValues.concat(regularValues)\n    }\n\n    return []\n  }\n}\n"],"names":["s.line","s.circle","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/crosshair/index.ts"],"sourcesContent":["import { Selection, pointer } from 'd3-selection'\nimport { easeLinear } from 'd3-ease'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\nimport { Tooltip } from 'components/tooltip'\n\n// Utils\nimport { isNumber, isArray, getNumber, clamp, getStackedValues, getNearest, isFunction } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Position } from 'types/position'\nimport { FindNearestDirection } from 'types/data'\n\n// Local Types\nimport { CrosshairAccessors, CrosshairCircle } from './types'\n\n// Config\nimport { CrosshairDefaultConfig, CrosshairConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\n\nexport class Crosshair<Datum> extends XYComponentCore<Datum, CrosshairConfigInterface<Datum>> {\n  static selectors = s\n  clippable = true // Don't apply clipping path to this component. See XYContainer\n  protected _defaultConfig = CrosshairDefaultConfig as CrosshairConfigInterface<Datum>\n  public config: CrosshairConfigInterface<Datum> = this._defaultConfig\n  container: Selection<SVGSVGElement, any, SVGSVGElement, any>\n  line: Selection<SVGLineElement, any, SVGElement, any>\n  private _xPx: number | undefined = undefined\n  private _yPx: number | undefined = undefined\n  private _mouseEvent: MouseEvent | undefined = undefined\n  private _animFrameId: number = null\n\n  /** Tooltip component to be used by Crosshair if not provided by the config.\n   * This property is supposed to be set externally by a container component like XYContainer. */\n  public tooltip: Tooltip\n\n  /** Accessors passed externally (e.g. from XYContainer) */\n  private _accessors: CrosshairAccessors<Datum> = {\n    x: undefined,\n    y: undefined,\n    yStacked: undefined,\n    baseline: undefined,\n  }\n\n  public set accessors (accessors: CrosshairAccessors<Datum>) { this._accessors = accessors }\n  public get accessors (): CrosshairAccessors<Datum> {\n    const { config } = this\n\n    const hasConfig = !!(config.x || config.y || config.yStacked)\n    const x = hasConfig ? config.x : this._accessors.x\n    const yAcc = hasConfig ? config.y : this._accessors.y\n    const y = yAcc ? (isArray(yAcc) ? yAcc : [yAcc]) : undefined\n    const yStacked = hasConfig ? config.yStacked : this._accessors.yStacked\n    const baseline = config.baseline ?? this._accessors.baseline\n\n    return { x, y, yStacked, baseline }\n  }\n\n  private _isContainerInViewport (): boolean {\n    if (!this.container?.node()) return false\n\n    const containerRect = this.container.node().getBoundingClientRect()\n    const viewportWidth = window.innerWidth || document.documentElement.clientWidth\n    const viewportHeight = window.innerHeight || document.documentElement.clientHeight\n\n    // Calculate the visible area of the container\n    const visibleWidth = Math.max(0, Math.min(containerRect.right, viewportWidth) - Math.max(containerRect.left, 0))\n    const visibleHeight = Math.max(0, Math.min(containerRect.bottom, viewportHeight) - Math.max(containerRect.top, 0))\n    const containerArea = containerRect.width * containerRect.height\n    const visibleArea = visibleWidth * visibleHeight\n\n    // Container must be at least 35% visible\n    return containerArea > 0 && (visibleArea / containerArea) >= 0.35\n  }\n\n  constructor (config?: CrosshairConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n\n    this.g.style('opacity', 0)\n    this.line = this.g.append('line')\n      .attr('class', s.line)\n  }\n\n  setContainer (containerSvg: Selection<SVGSVGElement, unknown, SVGSVGElement, unknown>): void {\n    if (this.container === containerSvg) return\n\n    this.container = containerSvg\n    this.container.on('mousemove.crosshair', this._onMouseMove.bind(this))\n    this.container.on('mouseout.crosshair', this._onMouseOut.bind(this))\n    this.container.on('wheel.crosshair', this._onWheel.bind(this))\n  }\n\n  _render (customDuration?: number): void {\n    const { config, datamodel } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n    const isForceShowAtDefined = config.forceShowAt !== undefined\n    const xPx = isForceShowAtDefined ? this.xScale(config.forceShowAt) : this._xPx\n\n    const xValue = this.xScale.invert(xPx) as number\n\n    const leftNearestDatumIndex = (datamodel.data?.length && this.accessors.x)\n      ? datamodel.data.indexOf(\n        getNearest(datamodel.data, xValue, this.accessors.x, FindNearestDirection.Left)\n      ) : undefined\n\n    // If `snapToData` is `true`, we need to find the nearest datum to the crosshair\n    // It can be from a mouse interaction or from a `forceShowAt` setting\n    let nearestDatum: Datum | undefined\n    let nearestDatumIndex: number | undefined\n    if (config.snapToData) {\n      if (!this.accessors.y && !this.accessors.yStacked && datamodel.data?.length) {\n        console.warn('Unovis | Crosshair: Y accessors have not been configured. Please check if they\\'re present in the configuration object')\n      }\n\n      // Emit a warning if there's no data to snap to.\n      // To keep the console clean, only emit the warning when there's mouse interaction.\n      if (!datamodel.data?.length && this._mouseEvent) {\n        console.warn('Unovis | Crosshair: No data to snap to. Make sure the data has been passed to the container or to the crosshair itself')\n      }\n\n      nearestDatum = getNearest(datamodel.data, xValue, this.accessors.x)\n      nearestDatumIndex = datamodel.data.indexOf(nearestDatum)\n    }\n\n    const xRange = this.xScale.range()\n    const yRange = this.yScale.range()\n    const xClamped = config.snapToData && nearestDatum\n      ? clamp(Math.round(this.xScale(getNumber(nearestDatum, this.accessors.x, nearestDatumIndex))), 0, this._width)\n      : clamp(xPx, xRange[0], xRange[1])\n\n    const isCrosshairWithinXRange = (xPx >= xRange[0]) && (xPx <= xRange[1])\n    const isCrosshairWithinYRange = (this._yPx >= yRange[1]) && (this._yPx <= yRange[0])\n    let shouldShow = this._xPx ? isCrosshairWithinXRange && isCrosshairWithinYRange : isCrosshairWithinXRange\n\n    // If the crosshair is far from the mouse pointer (usually when `snapToData` is `true` and data resolution is low), hide it\n    if (config.hideWhenFarFromPointer && ((Math.abs(xClamped - (+xPx)) >= config.hideWhenFarFromPointerDistance))) {\n      shouldShow = false\n    }\n\n    const tooltip = config.tooltip ?? this.tooltip\n    if (shouldShow && tooltip && this._isContainerInViewport()) {\n      const container = tooltip.getContainer() || this.container.node()\n      const isContainerBody = tooltip.isContainerBody()\n\n      if (isForceShowAtDefined) {\n        // Convert SVG coordinates to screen coordinates\n        const containerRect = this.container.node().getBoundingClientRect()\n\n        // Use the actual left margin from the container\n        const screenX = (isContainerBody ? xPx + containerRect.left : xPx) + this._containerMargin.left\n        const screenY = this._height / 2 + (isContainerBody ? containerRect.top : 0)\n        const pos = [screenX, screenY] as [number, number]\n        this._showTooltip(nearestDatum, xValue, pos, leftNearestDatumIndex)\n      } else if (this._mouseEvent) {\n        const pos = (isContainerBody ? [this._mouseEvent.clientX, this._mouseEvent.clientY] : pointer(this._mouseEvent, container)) as [number, number]\n        this._showTooltip(nearestDatum, xValue, pos, leftNearestDatumIndex)\n      }\n    } else this._hideTooltip()\n\n    // Trigger `onCrosshairMove` if the render was triggered by a mouse move event\n    if (this._mouseEvent) {\n      config.onCrosshairMove?.(shouldShow ? this.xScale.invert(this._xPx) as number : undefined, nearestDatum, nearestDatumIndex, this._mouseEvent)\n      this._mouseEvent = undefined\n    }\n\n    smartTransition(this.g, duration)\n      .style('opacity', shouldShow ? 1 : 0)\n\n    // When `config.forceShowAt` becomes `undefined`, the crosshair \"jumps\" to the edge of the chart.\n    // This looks off, so we stop further rendering when the `xPx` value is not finite.\n    if (!isFinite(xPx)) return\n\n    this.line\n      .attr('y1', 0)\n      .attr('y2', this._height)\n\n    smartTransition(this.line, duration, easeLinear)\n      .attr('x1', xClamped)\n      .attr('x2', xClamped)\n\n    const circleData = isFunction(config.getCircles)\n      ? config.getCircles(xValue, datamodel.data, this.yScale, leftNearestDatumIndex)\n      : this.getCircleData(nearestDatum, nearestDatumIndex)\n\n    const circles = this.g\n      .selectAll<SVGCircleElement, CrosshairCircle>('circle')\n      .data(circleData, (d, i) => d.id ?? i)\n\n    const circlesEnter = circles.enter()\n      .append('circle')\n      .attr('class', s.circle)\n      .attr('r', 0)\n      .attr('cx', xClamped)\n      .attr('cy', d => d.y)\n      .style('fill', d => d.color)\n      .style('stroke', d => d.strokeColor)\n      .style('stroke-width', d => d.strokeWidth)\n\n    smartTransition(circlesEnter.merge(circles), duration, easeLinear)\n      .attr('cx', xClamped)\n      .attr('cy', d => d.y)\n      .attr('r', 4)\n      .style('opacity', d => d.opacity)\n      .style('fill', d => d.color)\n      .style('stroke', d => d.strokeColor)\n      .style('stroke-width', d => d.strokeWidth)\n\n    circles.exit().remove()\n  }\n\n  hide (sourceEvent?: MouseEvent | WheelEvent): void {\n    window.cancelAnimationFrame(this._animFrameId)\n    this._animFrameId = window.requestAnimationFrame(() => {\n      this._xPx = undefined\n      this._yPx = undefined\n      this._mouseEvent = undefined\n      // We call `onCrosshairMove` with all the arguments set to `undefined` because we want\n      // the users to be able to hide the crosshair easily when using `forceShowAt`\n      this.config.onCrosshairMove?.(undefined, undefined, undefined, sourceEvent)\n      this._render()\n    })\n  }\n\n  _onMouseMove (event: MouseEvent): void {\n    const { datamodel, element } = this\n    if (!this.accessors.x && datamodel.data?.length) {\n      console.warn('Unovis | Crosshair: X accessor function has not been configured. Please check if it\\'s present in the configuration object')\n    }\n    const [x, y] = pointer(event, element)\n    this._xPx = x\n    this._yPx = y\n    this._mouseEvent = event\n\n    window.cancelAnimationFrame(this._animFrameId)\n    this._animFrameId = window.requestAnimationFrame(() => {\n      // We'll call `config.onCrosshairMove` in `_render` with the found `nearestDatum` and `nearestDatumIndex`,\n      // which can come from the mouse interaction or from the `forceShowAt` setting\n      this._render()\n    })\n  }\n\n  _onMouseOut (event?: MouseEvent): void {\n    // Only hide if the mouse actually left the SVG, not just moved to a child\n    if (!event || !this.container?.node().contains((event as MouseEvent).relatedTarget as Node)) {\n      this.hide(event)\n    }\n  }\n\n  _onWheel (event: WheelEvent): void {\n    this.hide(event)\n  }\n\n  _showTooltip (datum: Datum, xValue: number, pos: [number, number], nearestDatumIndex: number | undefined): void {\n    const { config, datamodel } = this\n    const tooltip = config.tooltip ?? this.tooltip\n    if (!tooltip || !pos) return\n\n    const [x, y] = pos\n    const content = config.template(datum, xValue, datamodel.data, nearestDatumIndex)\n    // Force set `followCursor` to `true` because we don't want Crosshair's tooltip to be hoverable\n    tooltip.config.followCursor = true\n\n    // Set tooltip placement based on Crosshair's position (left / right)\n    if (!tooltip.config.horizontalPlacement || tooltip.config.horizontalPlacement === Position.Auto) {\n      const xRelative = tooltip.isContainerBody() ? x - this.container.node().getBoundingClientRect().left : x\n      tooltip.overrideHorizontalPlacement(xRelative > this._containerWidth / 2 ? Position.Left : Position.Right)\n    }\n\n    if (content) tooltip.show(content, { x, y })\n  }\n\n  _hideTooltip (): void {\n    const { config } = this\n    const tooltip = config.tooltip ?? this.tooltip\n    tooltip?.hide()\n  }\n\n  // We don't want Crosshair to be be taken in to account in domain calculations\n  getYDataExtent (): number[] {\n    return [undefined, undefined]\n  }\n\n  private getCircleData (datum: Datum, datumIndex: number): CrosshairCircle[] {\n    const { config } = this\n\n    if (config.snapToData && datum) {\n      const yAccessors = this.accessors.y ?? []\n      const yStackedAccessors = this.accessors.yStacked ?? []\n      const baselineValue = getNumber(datum, this.accessors.baseline, datumIndex) || 0\n      const stackedValues: CrosshairCircle[] = getStackedValues(datum, datumIndex, ...yStackedAccessors)\n        .map((value, index) => ({\n          y: this.yScale(value + baselineValue),\n          opacity: isNumber(getNumber(datum, yStackedAccessors[index], index)) ? 1 : 0,\n          color: getColor(datum, config.color, index),\n          strokeColor: config.strokeColor ? getColor(datum, config.strokeColor, index) : undefined,\n          strokeWidth: config.strokeWidth ? getNumber(datum, config.strokeWidth, index) : undefined,\n        }))\n\n      const regularValues: CrosshairCircle[] = yAccessors\n        .map((a, index) => {\n          const value = getNumber(datum, a, datumIndex)\n          return {\n            y: this.yScale(value),\n            opacity: isNumber(value) ? 1 : 0,\n            color: getColor(datum, config.color, stackedValues.length + index),\n            strokeColor: config.strokeColor ? getColor(datum, config.strokeColor, index) : undefined,\n            strokeWidth: config.strokeWidth ? getNumber(datum, config.strokeWidth, index) : undefined,\n          }\n        })\n\n      return stackedValues.concat(regularValues)\n    }\n\n    return []\n  }\n}\n"],"names":["s.line","s.circle","s"],"mappings":"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"}

package/components/graph/config.d.ts

@@ -62,6 +62,14 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
      * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
      * Default: `1` */
     layoutParallelSubGroupsPerRow?: number;
+    /** Spacing between nodes, dynamic by default.
+     * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
+     * Default: `undefined` */
+    layoutParallelNodeSpacing?: number | [number, number];
+    /** Spacing between sub-groups.
+     * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
+     * Default: `40` */
+    layoutParallelSubGroupSpacing?: number;
     /** Spacing between groups.
      * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
      * Default: `undefined` */

package/components/graph/config.js

@@ -4,7 +4,7 @@ import { TrimMode } from '../../types/text.js';
 import { GraphLayoutType, GraphFitViewAlignment, GraphLinkStyle, GraphNodeShape, GraphNodeSelectionHighlightMode } from './types.js';
 
 // Utils
-const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { duration: 1000, zoomScaleExtent: [0.35, 1.25], disableZoom: false, zoomEventFilter: undefined, disableDrag: false, disableBrush: false, zoomThrottledUpdateNodeThreshold: 100, layoutType: GraphLayoutType.Force, layoutAutofit: true, layoutAutofitTolerance: 8.0, layoutNonConnectedAside: false, fitViewPadding: 50, fitViewAlign: GraphFitViewAlignment.Center, layoutGroupOrder: [], layoutParallelSubGroupsPerRow: 1, layoutParallelNodesPerColumn: 6, layoutParallelGroupSpacing: undefined, layoutParallelSortConnectionsByGroup: undefined, layoutNodeGroup: (n) => n.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
+const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { duration: 1000, zoomScaleExtent: [0.35, 1.25], disableZoom: false, zoomEventFilter: undefined, disableDrag: false, disableBrush: false, zoomThrottledUpdateNodeThreshold: 100, layoutType: GraphLayoutType.Force, layoutAutofit: true, layoutAutofitTolerance: 8.0, layoutNonConnectedAside: false, fitViewPadding: 50, fitViewAlign: GraphFitViewAlignment.Center, layoutGroupOrder: [], layoutParallelNodeSpacing: undefined, layoutParallelSubGroupsPerRow: 1, layoutParallelNodesPerColumn: 6, layoutParallelGroupSpacing: undefined, layoutParallelSubGroupSpacing: 40, layoutParallelSortConnectionsByGroup: undefined, layoutNodeGroup: (n) => n.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
         linkDistance: 60,
         linkStrength: 0.45,
         charge: -500,

package/components/graph/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { D3DragEvent } from 'd3-drag'\nimport { D3ZoomEvent, ZoomTransform } from 'd3-zoom'\nimport { Selection } from 'd3-selection'\nimport { ElkShape } from 'elkjs'\n\n// Core\nimport type { GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { isEqual } from 'utils/data'\n\n// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { Spacing } from 'types/spacing'\nimport { GraphInputLink, GraphInputNode, GraphInputData } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n  GraphLayoutType,\n  GraphCircleLabel,\n  GraphLinkStyle,\n  GraphLinkArrowStyle,\n  GraphPanelConfig,\n  GraphForceLayoutSettings,\n  GraphElkLayoutSettings,\n  GraphNodeShape,\n  GraphDagreLayoutSetting,\n  GraphNode,\n  GraphLink,\n  GraphNodeSelectionHighlightMode,\n  GraphFitViewAlignment,\n} from './types'\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n  // Zoom and drag\n  /** Zoom level constraints. Default: [0.35, 1.25] */\n  zoomScaleExtent?: [number, number];\n  /** Disable zooming. Default: `false` */\n  disableZoom?: boolean;\n  /** Custom Zoom event filter to better control which actions should trigger zooming.\n   * Learn more: https://d3js.org/d3-zoom#zoom_filter.\n   * Default: `undefined` */\n  zoomEventFilter?: (event: PointerEvent) => boolean;\n  /** Disable node dragging. Default: `false` */\n  disableDrag?: boolean;\n  /** Disable brush for multiple node selection. Default: `false` */\n  disableBrush?: boolean;\n  /** Interval to re-render the graph when zooming. Default: `100` */\n  zoomThrottledUpdateNodeThreshold?: number;\n  /** Padding for the graph when fitting to container. Default: `50` */\n  fitViewPadding?: Spacing | number;\n  /** Default alignment when fitting the graph view. Default: `GraphFitViewAlignment.Center` */\n  fitViewAlign?: GraphFitViewAlignment;\n\n  // Layout general settings\n  /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n  layoutType?: GraphLayoutType | string;\n  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n  layoutAutofit?: boolean;\n  /** Tolerance constant defining whether the graph should be fitted to container\n   * (on data or config update, or container resize) after a zoom / pan interaction or not.\n   * `0` — Stop fitting after any pan or zoom\n   * `Number.POSITIVE_INFINITY` — Always fit\n   * Default: `8.0` */\n  layoutAutofitTolerance?: number;\n  /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n  layoutNonConnectedAside?: boolean;\n\n  // Settings for Parallel and Concentric layouts\n  /** Node group accessor function.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `node => node.group` */\n  layoutNodeGroup?: StringAccessor<N>;\n  /** Order of the layout groups.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `[]` */\n  layoutGroupOrder?: string[];\n\n  // Setting for Parallel layouts only\n  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n   * `GraphLayoutType.ParallelHorizontal`).\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `6` */\n  layoutParallelNodesPerColumn?: number;\n  /** Node sub-group accessor function.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `node => node.subgroup` */\n  layoutParallelNodeSubGroup?: StringAccessor<N>;\n  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `1` */\n  layoutParallelSubGroupsPerRow?: number;\n  /** Spacing between groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelGroupSpacing?: number;\n  /** Set a group by name to have priority in sorting the graph links.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelSortConnectionsByGroup?: string;\n\n  // Force layout\n  /** Force Layout settings, see the `d3-force` package for more details */\n  forceLayoutSettings?: GraphForceLayoutSettings<N, L>;\n\n  // Dagre layout\n  /** Darge Layout settings, see the `dagrejs` package\n   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n  */\n  dagreLayoutSettings?: GraphDagreLayoutSetting;\n\n  // ELK layout\n  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n   * If you want to specify custom layout option for each node group, you can provide an accessor function that\n   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n   * layout options. Default: `undefined`\n  */\n  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n  /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n   * E.g.: `[n => n.group, n => n.subGroup]`.\n   * Default: `undefined` */\n  layoutElkNodeGroups?: StringAccessor<N>[];\n  /** A function to be called per graph node to get the ELK shape object.\n   * This enables you to provide custom node dimensions (through the `width` and `height` properties)\n   * and coordinates (through the `x` and `y` properties) if needed.\n   * Default: `undefined`\n  */\n  layoutElkGetNodeShape?: (d: GraphNode<N, L>, i: number) => ElkShape;\n\n  // Links\n  /** Link width accessor function ot constant value. Default: `1` */\n  linkWidth?: NumericAccessor<L>;\n  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */\n  linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n  /** Link band width accessor function or constant value. Default: `0` */\n  linkBandWidth?: NumericAccessor<L>;\n  /** Link arrow accessor function or constant value. Default: `undefined` */\n  linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;\n  /** Link stroke color accessor function or constant value. Default: `undefined` */\n  linkStroke?: ColorAccessor<L>;\n  /** Link disabled state accessor function or constant value. Default: `false` */\n  linkDisabled?: BooleanAccessor<L>;\n  /** Link flow animation accessor function or constant value. Default: `false` */\n  linkFlow?: BooleanAccessor<L>;\n  /** Animation duration of the flow (traffic) circles in milliseconds. If `linkFlowParticleSpeed` is provided,\n   * this duration will be calculated based on the link length and particle speed. Default: `20000` */\n  linkFlowAnimDuration?: NumericAccessor<L>;\n  /** Size of the moving particles that represent traffic flow. Default: `2` */\n  linkFlowParticleSize?: NumericAccessor<L>;\n  /** Speed of the moving particles in pixels per second. This property takes precedence over `linkFlowAnimDuration`. Default: `undefined` */\n  linkFlowParticleSpeed?: NumericAccessor<L>;\n  /** Link label accessor function or constant value. Default: `undefined` */\n  linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;\n  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n  linkLabelShiftFromCenter?: BooleanAccessor<L>;\n  /** Spacing between neighboring links. Default: `8` */\n  linkNeighborSpacing?: number;\n  /** Curvature of the link. Recommended value range: [0:1.5].\n   * `0` - straight line,\n   * `1` - nice curvature,\n   * `1.5` - very curve.\n   * Default: `0` */\n  linkCurvature?: NumericAccessor<L>;\n  /** Highlight links on hover. Default: `true` */\n  linkHighlightOnHover?: boolean;\n  /** Offset [x,y] in pixels from the source node's center point where the link should start. Default: `undefined` */\n  linkSourcePointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n  /** Offset [x,y] in pixels from the target node's center point where the link should end. Default: `undefined` */\n  linkTargetPointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n  /** Set selected link by its unique id. Default: `undefined` */\n  selectedLinkId?: number | string;\n\n  // Nodes\n  /** Node size accessor function or constant value. Default: `30` */\n  nodeSize?: NumericAccessor<N>;\n  /** Node stroke width accessor function or constant value. Default: `3` */\n  nodeStrokeWidth?: NumericAccessor<N>;\n  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n  nodeGaugeValue?: NumericAccessor<N>;\n  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n  nodeGaugeFill?: ColorAccessor<N>;\n  /** Animation duration of the node gauge outline. Default: `1500` */\n  nodeGaugeAnimDuration?: number;\n  /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n  nodeIcon?: StringAccessor<N>;\n  /** Node central icon size accessor function or constant value. Default: `undefined` */\n  nodeIconSize?: NumericAccessor<N>;\n  /** Node label accessor function or constant value. Default: `node => node.label` */\n  nodeLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node labels or not. Default: `true` */\n  nodeLabelTrim?: BooleanAccessor<N>;\n  /** Node label trimming mode. Default: `TrimMode.Middle` */\n  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeLabelTrimLength?: NumericAccessor<N>;\n  /** Node sub-label accessor function or constant value: Default: `''` */\n  nodeSubLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node sub-labels or not. Default: `true` */\n  nodeSubLabelTrim?: BooleanAccessor<N>;\n  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeSubLabelTrimLength?: NumericAccessor<N>;\n  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n  /** Node bottom icon accessor function. Default: `undefined` */\n  nodeBottomIcon?: StringAccessor<N>;\n  /** Node disabled state accessor function or constant value. Default: `false` */\n  nodeDisabled?: BooleanAccessor<N>;\n  /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n  nodeFill?: ColorAccessor<N>;\n  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n  nodeStroke?: ColorAccessor<N>;\n  /** Sorting function to determine node placement. Default: `undefined` */\n  nodeSort?: ((a: N, b: N) => number);\n  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n  nodeEnterScale?: NumericAccessor<N> | undefined;\n  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n  nodeExitScale?: NumericAccessor<N> | undefined;\n  /** Custom \"enter\" function for node rendering. Default: `undefined` */\n  nodeEnterCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"update\" function for node rendering. Default: `undefined` */\n  nodeUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom partial \"update\" function for node rendering which will be triggered after the following events:\n   * - Full node update (`nodeUpdateCustomRenderFunction`);\n   * - Background click;\n   * - Node and Link mouseover and mouseout;\n   * - Node brushing,\n   * Default: `undefined` */\n  nodePartialUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"exit\" function for node rendering. Default: `undefined` */\n  nodeExitCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom render function that will be called while zooming / panning the graph. Default: `undefined` */\n  nodeOnZoomCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, zoomLevel: number) => void;\n  /** Define the mode for highlighting selected nodes in the graph. Default: `GraphNodeSelectionHighlightMode.GreyoutNonConnected` */\n  nodeSelectionHighlightMode?: GraphNodeSelectionHighlightMode;\n  /** Set selected node by unique id. Default: `undefined` */\n  selectedNodeId?: number | string;\n  /** Set selected nodes by unique id. Default: `undefined` */\n  selectedNodeIds?: number[] | string[];\n\n  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n  panels?: GraphPanelConfig[] | undefined;\n\n  // Events\n  /** Graph node drag start callback function. Default: `undefined` */\n  onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag callback function. Default: `undefined` */\n  onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag end callback function. Default: `undefined` */\n  onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Zoom event callback. Default: `undefined` */\n  onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom start event callback. Default: `undefined` */\n  onZoomStart?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom end event callback. Default: `undefined` */\n  onZoomEnd?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Callback function to be called when the graph layout is calculated. Default: `undefined` */\n  onLayoutCalculated?: (nodes: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;\n  /** Graph node selection brush callback function. Default: `undefined` */\n  onNodeSelectionBrush?: (selectedNodes: GraphNode<N, L>[], event: D3BrushEvent<SVGGElement> | undefined) => void;\n  /** Graph multiple node drag callback function. Default: `undefined` */\n  onNodeSelectionDrag?: (selectedNodes: GraphNode<N, L>[], event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void;\n  /** Callback function to be called when the graph rendering is complete. Default: `undefined` */\n  onRenderComplete?: (\n    g: Selection<SVGGElement, unknown, null, undefined>,\n    nodes: GraphNode<N, L>[],\n    links: GraphLink<N, L>[],\n    config: GraphConfigInterface<N, L>,\n    duration: number,\n    zoomLevel: number,\n    width: number,\n    height: number\n  ) => void;\n\n  /** Determines whether the component should update when new data is provided.\n   * This function takes the previous and new data as parameters and returns a boolean\n   * indicating whether the update should proceed. Useful for fine-grained control over\n   * update behavior when your data has a complex nested structure.\n   * By default the `isEqual` function from Unovis will be used to do the comparison.\n   */\n  shouldDataUpdate?: (\n    prevData: GraphInputData<N, L>,\n    nextData: GraphInputData<N, L>,\n    datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>\n  ) => boolean;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n  ...ComponentDefaultConfig,\n  duration: 1000,\n  zoomScaleExtent: [0.35, 1.25],\n  disableZoom: false,\n  zoomEventFilter: undefined,\n  disableDrag: false,\n  disableBrush: false,\n  zoomThrottledUpdateNodeThreshold: 100,\n  layoutType: GraphLayoutType.Force,\n  layoutAutofit: true,\n  layoutAutofitTolerance: 8.0,\n  layoutNonConnectedAside: false,\n  fitViewPadding: 50,\n  fitViewAlign: GraphFitViewAlignment.Center,\n\n  layoutGroupOrder: [],\n  layoutParallelSubGroupsPerRow: 1,\n  layoutParallelNodesPerColumn: 6,\n  layoutParallelGroupSpacing: undefined,\n  layoutParallelSortConnectionsByGroup: undefined,\n  layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n  layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n  forceLayoutSettings: {\n    linkDistance: 60,\n    linkStrength: 0.45,\n    charge: -500,\n    forceXStrength: 0.15,\n    forceYStrength: 0.25,\n    numIterations: undefined,\n    fixNodePositionAfterSimulation: false,\n  },\n\n  dagreLayoutSettings: {\n    rankdir: 'BT',\n    ranker: 'longest-path',\n  },\n\n  layoutElkSettings: undefined,\n  layoutElkNodeGroups: undefined,\n  layoutElkGetNodeShape: undefined,\n\n  linkFlowAnimDuration: 20000,\n  linkFlowParticleSize: 2,\n  linkFlowParticleSpeed: undefined,\n  linkWidth: 1,\n  linkStyle: GraphLinkStyle.Solid,\n  linkBandWidth: 0,\n  linkArrow: undefined,\n  linkStroke: undefined,\n  linkFlow: false,\n  linkLabel: undefined,\n  linkLabelShiftFromCenter: true,\n  linkNeighborSpacing: 8,\n  linkDisabled: false,\n  linkCurvature: 0,\n  linkHighlightOnHover: true,\n  linkSourcePointOffset: undefined,\n  linkTargetPointOffset: undefined,\n  selectedLinkId: undefined,\n\n  nodeSize: 30,\n  nodeStrokeWidth: 3,\n  nodeShape: GraphNodeShape.Circle,\n  nodeGaugeValue: 0,\n  nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n  nodeIconSize: undefined,\n  nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n  nodeLabelTrim: true,\n  nodeLabelTrimLength: 15,\n  nodeLabelTrimMode: TrimMode.Middle,\n  nodeSubLabel: '',\n  nodeSubLabelTrim: true,\n  nodeSubLabelTrimLength: 15,\n  nodeSubLabelTrimMode: TrimMode.Middle,\n  nodeSideLabels: undefined,\n  nodeBottomIcon: undefined,\n  nodeDisabled: false,\n  nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n  nodeGaugeFill: undefined,\n  nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n  nodeEnterPosition: undefined,\n  nodeEnterScale: 0.75,\n  nodeExitPosition: undefined,\n  nodeExitScale: 0.75,\n  nodeSort: undefined,\n  nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,\n  nodeGaugeAnimDuration: 1500,\n\n  selectedNodeId: undefined,\n  selectedNodeIds: undefined,\n\n  panels: undefined,\n\n  onNodeDragStart: undefined,\n  onNodeDrag: undefined,\n  onNodeDragEnd: undefined,\n  onZoom: undefined,\n  onZoomStart: undefined,\n  onZoomEnd: undefined,\n  onLayoutCalculated: undefined,\n  onNodeSelectionBrush: undefined,\n  onNodeSelectionDrag: undefined,\n  onRenderComplete: undefined,\n\n  shouldDataUpdate: (prevData: GraphInputData<GraphInputNode, GraphInputLink>, nextData: GraphInputData<GraphInputNode, GraphInputLink>): boolean => {\n    return !isEqual(prevData, nextData)\n  },\n}\n"],"names":[],"mappings":";;;;;AASA;AAuSa,MAAA,kBAAkB,GAC1B,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,sBAAsB,KACzB,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,EAC7B,WAAW,EAAE,KAAK,EAClB,eAAe,EAAE,SAAS,EAC1B,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,KAAK,EACnB,gCAAgC,EAAE,GAAG,EACrC,UAAU,EAAE,eAAe,CAAC,KAAK,EACjC,aAAa,EAAE,IAAI,EACnB,sBAAsB,EAAE,GAAG,EAC3B,uBAAuB,EAAE,KAAK,EAC9B,cAAc,EAAE,EAAE,EAClB,YAAY,EAAE,qBAAqB,CAAC,MAAM,EAE1C,gBAAgB,EAAE,EAAE,EACpB,6BAA6B,EAAE,CAAC,EAChC,4BAA4B,EAAE,CAAC,EAC/B,0BAA0B,EAAE,SAAS,EACrC,oCAAoC,EAAE,SAAS,EAC/C,eAAe,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EAC9E,0BAA0B,EAAE,CAAC,CAAiB,KAAc,CAA0B,CAAC,QAAQ,EAE/F,mBAAmB,EAAE;AACnB,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,YAAY,EAAE,IAAI;QAClB,MAAM,EAAE,CAAC,GAAG;AACZ,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,8BAA8B,EAAE,KAAK;AACtC,KAAA,EAED,mBAAmB,EAAE;AACnB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,MAAM,EAAE,cAAc;AACvB,KAAA,EAED,iBAAiB,EAAE,SAAS,EAC5B,mBAAmB,EAAE,SAAS,EAC9B,qBAAqB,EAAE,SAAS,EAEhC,oBAAoB,EAAE,KAAK,EAC3B,oBAAoB,EAAE,CAAC,EACvB,qBAAqB,EAAE,SAAS,EAChC,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,cAAc,CAAC,KAAK,EAC/B,aAAa,EAAE,CAAC,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,SAAS,EACpB,wBAAwB,EAAE,IAAI,EAC9B,mBAAmB,EAAE,CAAC,EACtB,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,CAAC,EAChB,oBAAoB,EAAE,IAAI,EAC1B,qBAAqB,EAAE,SAAS,EAChC,qBAAqB,EAAE,SAAS,EAChC,cAAc,EAAE,SAAS,EAEzB,QAAQ,EAAE,EAAE,EACZ,eAAe,EAAE,CAAC,EAClB,SAAS,EAAE,cAAc,CAAC,MAAM,EAChC,cAAc,EAAE,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EACxE,aAAa,EAAE,IAAI,EACnB,mBAAmB,EAAE,EAAE,EACvB,iBAAiB,EAAE,QAAQ,CAAC,MAAM,EAClC,YAAY,EAAE,EAAE,EAChB,gBAAgB,EAAE,IAAI,EACtB,sBAAsB,EAAE,EAAE,EAC1B,oBAAoB,EAAE,QAAQ,CAAC,MAAM,EACrC,cAAc,EAAE,SAAS,EACzB,cAAc,EAAE,SAAS,EACzB,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,CAAC,CAAiB,KAAc,CAAwB,CAAC,MAAM,EAC3E,iBAAiB,EAAE,SAAS,EAC5B,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,SAAS,EAC3B,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,SAAS,EACnB,0BAA0B,EAAE,+BAA+B,CAAC,mBAAmB,EAC/E,qBAAqB,EAAE,IAAI,EAE3B,cAAc,EAAE,SAAS,EACzB,eAAe,EAAE,SAAS,EAE1B,MAAM,EAAE,SAAS,EAEjB,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAE,SAAS,EACrB,aAAa,EAAE,SAAS,EACxB,MAAM,EAAE,SAAS,EACjB,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,SAAS,EAC7B,oBAAoB,EAAE,SAAS,EAC/B,mBAAmB,EAAE,SAAS,EAC9B,gBAAgB,EAAE,SAAS,EAE3B,gBAAgB,EAAE,CAAC,QAAwD,EAAE,QAAwD,KAAa;AAChJ,QAAA,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;AACrC,KAAC;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { D3DragEvent } from 'd3-drag'\nimport { D3ZoomEvent, ZoomTransform } from 'd3-zoom'\nimport { Selection } from 'd3-selection'\nimport { ElkShape } from 'elkjs'\n\n// Core\nimport type { GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { isEqual } from 'utils/data'\n\n// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { Spacing } from 'types/spacing'\nimport { GraphInputLink, GraphInputNode, GraphInputData } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n  GraphLayoutType,\n  GraphCircleLabel,\n  GraphLinkStyle,\n  GraphLinkArrowStyle,\n  GraphPanelConfig,\n  GraphForceLayoutSettings,\n  GraphElkLayoutSettings,\n  GraphNodeShape,\n  GraphDagreLayoutSetting,\n  GraphNode,\n  GraphLink,\n  GraphNodeSelectionHighlightMode,\n  GraphFitViewAlignment,\n} from './types'\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n  // Zoom and drag\n  /** Zoom level constraints. Default: [0.35, 1.25] */\n  zoomScaleExtent?: [number, number];\n  /** Disable zooming. Default: `false` */\n  disableZoom?: boolean;\n  /** Custom Zoom event filter to better control which actions should trigger zooming.\n   * Learn more: https://d3js.org/d3-zoom#zoom_filter.\n   * Default: `undefined` */\n  zoomEventFilter?: (event: PointerEvent) => boolean;\n  /** Disable node dragging. Default: `false` */\n  disableDrag?: boolean;\n  /** Disable brush for multiple node selection. Default: `false` */\n  disableBrush?: boolean;\n  /** Interval to re-render the graph when zooming. Default: `100` */\n  zoomThrottledUpdateNodeThreshold?: number;\n  /** Padding for the graph when fitting to container. Default: `50` */\n  fitViewPadding?: Spacing | number;\n  /** Default alignment when fitting the graph view. Default: `GraphFitViewAlignment.Center` */\n  fitViewAlign?: GraphFitViewAlignment;\n\n  // Layout general settings\n  /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n  layoutType?: GraphLayoutType | string;\n  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n  layoutAutofit?: boolean;\n  /** Tolerance constant defining whether the graph should be fitted to container\n   * (on data or config update, or container resize) after a zoom / pan interaction or not.\n   * `0` — Stop fitting after any pan or zoom\n   * `Number.POSITIVE_INFINITY` — Always fit\n   * Default: `8.0` */\n  layoutAutofitTolerance?: number;\n  /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n  layoutNonConnectedAside?: boolean;\n\n  // Settings for Parallel and Concentric layouts\n  /** Node group accessor function.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `node => node.group` */\n  layoutNodeGroup?: StringAccessor<N>;\n  /** Order of the layout groups.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `[]` */\n  layoutGroupOrder?: string[];\n\n  // Setting for Parallel layouts only\n  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n   * `GraphLayoutType.ParallelHorizontal`).\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `6` */\n  layoutParallelNodesPerColumn?: number;\n  /** Node sub-group accessor function.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `node => node.subgroup` */\n  layoutParallelNodeSubGroup?: StringAccessor<N>;\n  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `1` */\n  layoutParallelSubGroupsPerRow?: number;\n  /** Spacing between nodes, dynamic by default.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelNodeSpacing?: number | [number, number];\n  /** Spacing between sub-groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `40` */\n  layoutParallelSubGroupSpacing?: number;\n  /** Spacing between groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelGroupSpacing?: number;\n  /** Set a group by name to have priority in sorting the graph links.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelSortConnectionsByGroup?: string;\n\n  // Force layout\n  /** Force Layout settings, see the `d3-force` package for more details */\n  forceLayoutSettings?: GraphForceLayoutSettings<N, L>;\n\n  // Dagre layout\n  /** Darge Layout settings, see the `dagrejs` package\n   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n  */\n  dagreLayoutSettings?: GraphDagreLayoutSetting;\n\n  // ELK layout\n  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n   * If you want to specify custom layout option for each node group, you can provide an accessor function that\n   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n   * layout options. Default: `undefined`\n  */\n  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n  /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n   * E.g.: `[n => n.group, n => n.subGroup]`.\n   * Default: `undefined` */\n  layoutElkNodeGroups?: StringAccessor<N>[];\n  /** A function to be called per graph node to get the ELK shape object.\n   * This enables you to provide custom node dimensions (through the `width` and `height` properties)\n   * and coordinates (through the `x` and `y` properties) if needed.\n   * Default: `undefined`\n  */\n  layoutElkGetNodeShape?: (d: GraphNode<N, L>, i: number) => ElkShape;\n\n  // Links\n  /** Link width accessor function ot constant value. Default: `1` */\n  linkWidth?: NumericAccessor<L>;\n  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */\n  linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n  /** Link band width accessor function or constant value. Default: `0` */\n  linkBandWidth?: NumericAccessor<L>;\n  /** Link arrow accessor function or constant value. Default: `undefined` */\n  linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;\n  /** Link stroke color accessor function or constant value. Default: `undefined` */\n  linkStroke?: ColorAccessor<L>;\n  /** Link disabled state accessor function or constant value. Default: `false` */\n  linkDisabled?: BooleanAccessor<L>;\n  /** Link flow animation accessor function or constant value. Default: `false` */\n  linkFlow?: BooleanAccessor<L>;\n  /** Animation duration of the flow (traffic) circles in milliseconds. If `linkFlowParticleSpeed` is provided,\n   * this duration will be calculated based on the link length and particle speed. Default: `20000` */\n  linkFlowAnimDuration?: NumericAccessor<L>;\n  /** Size of the moving particles that represent traffic flow. Default: `2` */\n  linkFlowParticleSize?: NumericAccessor<L>;\n  /** Speed of the moving particles in pixels per second. This property takes precedence over `linkFlowAnimDuration`. Default: `undefined` */\n  linkFlowParticleSpeed?: NumericAccessor<L>;\n  /** Link label accessor function or constant value. Default: `undefined` */\n  linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;\n  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n  linkLabelShiftFromCenter?: BooleanAccessor<L>;\n  /** Spacing between neighboring links. Default: `8` */\n  linkNeighborSpacing?: number;\n  /** Curvature of the link. Recommended value range: [0:1.5].\n   * `0` - straight line,\n   * `1` - nice curvature,\n   * `1.5` - very curve.\n   * Default: `0` */\n  linkCurvature?: NumericAccessor<L>;\n  /** Highlight links on hover. Default: `true` */\n  linkHighlightOnHover?: boolean;\n  /** Offset [x,y] in pixels from the source node's center point where the link should start. Default: `undefined` */\n  linkSourcePointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n  /** Offset [x,y] in pixels from the target node's center point where the link should end. Default: `undefined` */\n  linkTargetPointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n  /** Set selected link by its unique id. Default: `undefined` */\n  selectedLinkId?: number | string;\n\n  // Nodes\n  /** Node size accessor function or constant value. Default: `30` */\n  nodeSize?: NumericAccessor<N>;\n  /** Node stroke width accessor function or constant value. Default: `3` */\n  nodeStrokeWidth?: NumericAccessor<N>;\n  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n  nodeGaugeValue?: NumericAccessor<N>;\n  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n  nodeGaugeFill?: ColorAccessor<N>;\n  /** Animation duration of the node gauge outline. Default: `1500` */\n  nodeGaugeAnimDuration?: number;\n  /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n  nodeIcon?: StringAccessor<N>;\n  /** Node central icon size accessor function or constant value. Default: `undefined` */\n  nodeIconSize?: NumericAccessor<N>;\n  /** Node label accessor function or constant value. Default: `node => node.label` */\n  nodeLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node labels or not. Default: `true` */\n  nodeLabelTrim?: BooleanAccessor<N>;\n  /** Node label trimming mode. Default: `TrimMode.Middle` */\n  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeLabelTrimLength?: NumericAccessor<N>;\n  /** Node sub-label accessor function or constant value: Default: `''` */\n  nodeSubLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node sub-labels or not. Default: `true` */\n  nodeSubLabelTrim?: BooleanAccessor<N>;\n  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeSubLabelTrimLength?: NumericAccessor<N>;\n  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n  /** Node bottom icon accessor function. Default: `undefined` */\n  nodeBottomIcon?: StringAccessor<N>;\n  /** Node disabled state accessor function or constant value. Default: `false` */\n  nodeDisabled?: BooleanAccessor<N>;\n  /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n  nodeFill?: ColorAccessor<N>;\n  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n  nodeStroke?: ColorAccessor<N>;\n  /** Sorting function to determine node placement. Default: `undefined` */\n  nodeSort?: ((a: N, b: N) => number);\n  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n  nodeEnterScale?: NumericAccessor<N> | undefined;\n  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n  nodeExitScale?: NumericAccessor<N> | undefined;\n  /** Custom \"enter\" function for node rendering. Default: `undefined` */\n  nodeEnterCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"update\" function for node rendering. Default: `undefined` */\n  nodeUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom partial \"update\" function for node rendering which will be triggered after the following events:\n   * - Full node update (`nodeUpdateCustomRenderFunction`);\n   * - Background click;\n   * - Node and Link mouseover and mouseout;\n   * - Node brushing,\n   * Default: `undefined` */\n  nodePartialUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"exit\" function for node rendering. Default: `undefined` */\n  nodeExitCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom render function that will be called while zooming / panning the graph. Default: `undefined` */\n  nodeOnZoomCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, zoomLevel: number) => void;\n  /** Define the mode for highlighting selected nodes in the graph. Default: `GraphNodeSelectionHighlightMode.GreyoutNonConnected` */\n  nodeSelectionHighlightMode?: GraphNodeSelectionHighlightMode;\n  /** Set selected node by unique id. Default: `undefined` */\n  selectedNodeId?: number | string;\n  /** Set selected nodes by unique id. Default: `undefined` */\n  selectedNodeIds?: number[] | string[];\n\n  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n  panels?: GraphPanelConfig[] | undefined;\n\n  // Events\n  /** Graph node drag start callback function. Default: `undefined` */\n  onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag callback function. Default: `undefined` */\n  onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag end callback function. Default: `undefined` */\n  onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Zoom event callback. Default: `undefined` */\n  onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom start event callback. Default: `undefined` */\n  onZoomStart?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom end event callback. Default: `undefined` */\n  onZoomEnd?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Callback function to be called when the graph layout is calculated. Default: `undefined` */\n  onLayoutCalculated?: (nodes: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;\n  /** Graph node selection brush callback function. Default: `undefined` */\n  onNodeSelectionBrush?: (selectedNodes: GraphNode<N, L>[], event: D3BrushEvent<SVGGElement> | undefined) => void;\n  /** Graph multiple node drag callback function. Default: `undefined` */\n  onNodeSelectionDrag?: (selectedNodes: GraphNode<N, L>[], event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void;\n  /** Callback function to be called when the graph rendering is complete. Default: `undefined` */\n  onRenderComplete?: (\n    g: Selection<SVGGElement, unknown, null, undefined>,\n    nodes: GraphNode<N, L>[],\n    links: GraphLink<N, L>[],\n    config: GraphConfigInterface<N, L>,\n    duration: number,\n    zoomLevel: number,\n    width: number,\n    height: number\n  ) => void;\n\n  /** Determines whether the component should update when new data is provided.\n   * This function takes the previous and new data as parameters and returns a boolean\n   * indicating whether the update should proceed. Useful for fine-grained control over\n   * update behavior when your data has a complex nested structure.\n   * By default the `isEqual` function from Unovis will be used to do the comparison.\n   */\n  shouldDataUpdate?: (\n    prevData: GraphInputData<N, L>,\n    nextData: GraphInputData<N, L>,\n    datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>\n  ) => boolean;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n  ...ComponentDefaultConfig,\n  duration: 1000,\n  zoomScaleExtent: [0.35, 1.25],\n  disableZoom: false,\n  zoomEventFilter: undefined,\n  disableDrag: false,\n  disableBrush: false,\n  zoomThrottledUpdateNodeThreshold: 100,\n  layoutType: GraphLayoutType.Force,\n  layoutAutofit: true,\n  layoutAutofitTolerance: 8.0,\n  layoutNonConnectedAside: false,\n  fitViewPadding: 50,\n  fitViewAlign: GraphFitViewAlignment.Center,\n\n  layoutGroupOrder: [],\n  layoutParallelNodeSpacing: undefined,\n  layoutParallelSubGroupsPerRow: 1,\n  layoutParallelNodesPerColumn: 6,\n  layoutParallelGroupSpacing: undefined,\n  layoutParallelSubGroupSpacing: 40,\n  layoutParallelSortConnectionsByGroup: undefined,\n  layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n  layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n  forceLayoutSettings: {\n    linkDistance: 60,\n    linkStrength: 0.45,\n    charge: -500,\n    forceXStrength: 0.15,\n    forceYStrength: 0.25,\n    numIterations: undefined,\n    fixNodePositionAfterSimulation: false,\n  },\n\n  dagreLayoutSettings: {\n    rankdir: 'BT',\n    ranker: 'longest-path',\n  },\n\n  layoutElkSettings: undefined,\n  layoutElkNodeGroups: undefined,\n  layoutElkGetNodeShape: undefined,\n\n  linkFlowAnimDuration: 20000,\n  linkFlowParticleSize: 2,\n  linkFlowParticleSpeed: undefined,\n  linkWidth: 1,\n  linkStyle: GraphLinkStyle.Solid,\n  linkBandWidth: 0,\n  linkArrow: undefined,\n  linkStroke: undefined,\n  linkFlow: false,\n  linkLabel: undefined,\n  linkLabelShiftFromCenter: true,\n  linkNeighborSpacing: 8,\n  linkDisabled: false,\n  linkCurvature: 0,\n  linkHighlightOnHover: true,\n  linkSourcePointOffset: undefined,\n  linkTargetPointOffset: undefined,\n  selectedLinkId: undefined,\n\n  nodeSize: 30,\n  nodeStrokeWidth: 3,\n  nodeShape: GraphNodeShape.Circle,\n  nodeGaugeValue: 0,\n  nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n  nodeIconSize: undefined,\n  nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n  nodeLabelTrim: true,\n  nodeLabelTrimLength: 15,\n  nodeLabelTrimMode: TrimMode.Middle,\n  nodeSubLabel: '',\n  nodeSubLabelTrim: true,\n  nodeSubLabelTrimLength: 15,\n  nodeSubLabelTrimMode: TrimMode.Middle,\n  nodeSideLabels: undefined,\n  nodeBottomIcon: undefined,\n  nodeDisabled: false,\n  nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n  nodeGaugeFill: undefined,\n  nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n  nodeEnterPosition: undefined,\n  nodeEnterScale: 0.75,\n  nodeExitPosition: undefined,\n  nodeExitScale: 0.75,\n  nodeSort: undefined,\n  nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,\n  nodeGaugeAnimDuration: 1500,\n\n  selectedNodeId: undefined,\n  selectedNodeIds: undefined,\n\n  panels: undefined,\n\n  onNodeDragStart: undefined,\n  onNodeDrag: undefined,\n  onNodeDragEnd: undefined,\n  onZoom: undefined,\n  onZoomStart: undefined,\n  onZoomEnd: undefined,\n  onLayoutCalculated: undefined,\n  onNodeSelectionBrush: undefined,\n  onNodeSelectionDrag: undefined,\n  onRenderComplete: undefined,\n\n  shouldDataUpdate: (prevData: GraphInputData<GraphInputNode, GraphInputLink>, nextData: GraphInputData<GraphInputNode, GraphInputLink>): boolean => {\n    return !isEqual(prevData, nextData)\n  },\n}\n"],"names":[],"mappings":"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"}

package/components/graph/index.d.ts

@@ -62,6 +62,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
     private _brushBehavior;
     private _groupDragInit;
     private _linkPathLengthMap;
+    private _linkFlowFrameElapsed;
     events: {
         [x: string]: {
             click: () => void;

package/components/graph/index.js

@@ -37,6 +37,7 @@ class Graph extends ComponentCore {
         this._isDragging = false;
         // A map for storing link total path lengths to optimize rendering performance
         this._linkPathLengthMap = new Map();
+        this._linkFlowFrameElapsed = 0;
         this.events = {
             [Graph.selectors.background]: {
                 click: this._onBackgroundClick.bind(this),
@@ -521,20 +522,24 @@ class Graph extends ComponentCore {
         const hasLinksWithFlow = links.some((d, i) => getBoolean(d, config.linkFlow, i));
         if (!hasLinksWithFlow)
             return;
+        const deltaTime = elapsed - this._linkFlowFrameElapsed;
         const linkGroups = this._linksGroup.selectAll(`.${gLink}`);
         linkGroups.each((l, i, els) => {
             var _a;
-            let linkFlowAnimDuration = getNumber(l, config.linkFlowAnimDuration, l._indexGlobal);
             const linkFlowParticleSpeed = getNumber(l, config.linkFlowParticleSpeed, l._indexGlobal);
-            // If particle speed is provided, calculate duration based on link length and speed
-            if (linkFlowParticleSpeed) {
-                const linkPathElement = els[i].querySelector(`.${linkSupport}`);
-                const pathLength = linkPathElement ? ((_a = this._linkPathLengthMap.get(linkPathElement.getAttribute('d'))) !== null && _a !== void 0 ? _a : linkPathElement.getTotalLength()) : 0;
-                if (pathLength > 0)
-                    linkFlowAnimDuration = (pathLength / linkFlowParticleSpeed) * 1000; // Convert to milliseconds
-            }
-            l._state.flowAnimTime = (elapsed % linkFlowAnimDuration) / linkFlowAnimDuration;
+            // Get path length
+            const pathElement = els[i].querySelector(`.${linkSupport}`);
+            const pathLength = pathElement ? ((_a = this._linkPathLengthMap.get(pathElement.getAttribute('d'))) !== null && _a !== void 0 ? _a : pathElement.getTotalLength()) : 0;
+            if (pathLength <= 0)
+                return; // Skip if no valid path
+            // Calculate speed: either provided or derived from duration
+            const speed = linkFlowParticleSpeed || (pathLength / getNumber(l, config.linkFlowAnimDuration, l._indexGlobal) * 1000);
+            // Initialize and update distance
+            l._state.flowAnimDistancePx = (l._state.flowAnimDistancePx || 0) + (deltaTime / 1000) * speed;
+            // Convert to relative position
+            l._state.flowAnimDistanceRelative = (l._state.flowAnimDistancePx % pathLength) / pathLength;
         });
+        this._linkFlowFrameElapsed = elapsed;
         animateLinkFlow(linkGroups, this.config, this._scale, this._linkPathLengthMap);
     }
     _onZoom(t, event) {