@unovis/ts 1.6.2 → 1.7.0-stellar.1

package/components/topojson-map/index.js

@@ -1,19 +1,24 @@
+import { select } from 'd3-selection';
 import { zoom, zoomIdentity } from 'd3-zoom';
 import { timeout } from 'd3-timer';
+import { easeCubicInOut } from 'd3-ease';
 import { geoPath } from 'd3-geo';
 import { color } from 'd3-color';
+import { packSiblings } from 'd3-hierarchy';
 import { feature } from 'topojson-client';
 import { ComponentCore } from '../../core/component/index.js';
 import { MapGraphDataModel } from '../../data-models/map-graph.js';
-import { isNumber, getString, getNumber, clamp } from '../../utils/data.js';
+import { getNumber, isNumber, getString, clamp } from '../../utils/data.js';
 import { smartTransition } from '../../utils/d3.js';
 import { getColor, hexToBrightness } from '../../utils/color.js';
-import { isStringCSSVariable, getCSSVariableValue } from '../../utils/misc.js';
-import { MapProjection, MapPointLabelPosition } from './types.js';
+import { rectIntersect, isStringCSSVariable, getCSSVariableValue } from '../../utils/misc.js';
+import { estimateStringPixelLength } from '../../utils/text.js';
+import { MapProjection, TopoJSONMapPointShape, MapPointLabelPosition } from './types.js';
 import { TopoJSONMapDefaultConfig } from './config.js';
-import { getLonLat, arc } from './utils.js';
+import { calculateClusterIndex, getLonLat, arc, getDonutData, getPointPathData, getClustersAndPoints, geoJsonPointToScreenPoint, getNextZoomLevelOnClusterClick } from './utils.js';
+import { updateDonut } from './modules/donut.js';
 import * as style from './style.js';
-import { background, features, links, points, feature as feature$1, link, point, pointCircle, pointLabel } from './style.js';
+import { background, features, areaLabel, links, points, flowParticles, sourcePoints, feature as feature$1, link, point, pointCircle, pointLabel, sourcePoint, flowParticle } from './style.js';
 
 class TopoJSONMap extends ComponentCore {
     constructor(config, data) {
@@ -26,11 +31,21 @@ class TopoJSONMap extends ComponentCore {
         this._initialScale = undefined;
         this._currentZoomLevel = undefined;
         this._path = geoPath();
+        this._clusterIndex = null;
+        this._expandedCluster = null;
+        this._eventInitiatedByComponent = false;
         this._zoomBehavior = zoom();
         this._backgroundRect = this.g.append('rect').attr('class', background);
         this._featuresGroup = this.g.append('g').attr('class', features);
+        this._areaLabelsGroup = this.g.append('g').attr('class', areaLabel);
         this._linksGroup = this.g.append('g').attr('class', links);
         this._pointsGroup = this.g.append('g').attr('class', points);
+        // Flow-related properties
+        this._flowParticlesGroup = this.g.append('g').attr('class', flowParticles);
+        this._sourcePointsGroup = this.g.append('g').attr('class', sourcePoints);
+        this._flowParticles = [];
+        this._sourcePoints = [];
+        this._animationId = null;
         this.events = {
             [TopoJSONMap.selectors.point]: {},
             [TopoJSONMap.selectors.feature]: {},
@@ -49,11 +64,26 @@ class TopoJSONMap extends ComponentCore {
       `);
     }
     setData(data) {
+        var _a;
         const { config } = this;
         this.datamodel.pointId = config.pointId;
         this.datamodel.linkSource = config.linkSource;
         this.datamodel.linkTarget = config.linkTarget;
         this.datamodel.data = data;
+        // Reset expanded cluster when data changes
+        this._resetExpandedCluster();
+        // Initialize clustering if enabled
+        if (config.clustering && ((_a = data.points) === null || _a === void 0 ? void 0 : _a.length)) {
+            const dataValid = data.points.filter(d => {
+                const lat = getNumber(d, config.latitude);
+                const lon = getNumber(d, config.longitude);
+                return isNumber(lat) && isNumber(lon);
+            });
+            this._clusterIndex = calculateClusterIndex(dataValid, this.config);
+        }
+        else {
+            this._clusterIndex = null;
+        }
         // If there was a data change and mapFitToPoints is enabled, we will need to re-fit the map
         this._firstRender = this._firstRender || config.mapFitToPoints;
     }
@@ -72,9 +102,20 @@ class TopoJSONMap extends ComponentCore {
         const duration = isNumber(customDuration) ? customDuration : config.duration;
         this._renderBackground();
         this._renderMap(duration);
+        this._renderAreaLabels(duration);
         this._renderGroups(duration);
         this._renderLinks(duration);
         this._renderPoints(duration);
+        // Flow features
+        if (config.enableFlowAnimation) {
+            this._initFlowFeatures();
+            this._renderSourcePoints(duration);
+            this._renderFlowParticles(duration);
+            this._startFlowAnimation();
+        }
+        else {
+            this._stopFlowAnimation();
+        }
         // When animation is running we need to temporary disable zoom behaviour
         if (duration && !config.disableZoom) {
             this.g.on('.zoom', null);
@@ -97,10 +138,17 @@ class TopoJSONMap extends ComponentCore {
         smartTransition(this._featuresGroup, duration)
             .attr('transform', transformString)
             .attr('stroke-width', 1 / this._currentZoomLevel);
+        smartTransition(this._areaLabelsGroup, duration)
+            .attr('transform', transformString);
         smartTransition(this._linksGroup, duration)
             .attr('transform', transformString);
         smartTransition(this._pointsGroup, duration)
             .attr('transform', transformString);
+        // Flow groups
+        smartTransition(this._sourcePointsGroup, duration)
+            .attr('transform', transformString);
+        smartTransition(this._flowParticlesGroup, duration)
+            .attr('transform', transformString);
     }
     _renderMap(duration) {
         var _a, _b, _c;
@@ -154,6 +202,130 @@ class TopoJSONMap extends ComponentCore {
             .style('cursor', d => d.data ? getString(d.data, config.areaCursor) : null);
         features.exit().remove();
     }
+    _renderAreaLabels(duration) {
+        var _a, _b;
+        const { config } = this;
+        // Early return if no area label configuration
+        if (!config.areaLabel) {
+            this._areaLabelsGroup.selectAll('*').remove();
+            return;
+        }
+        const featureData = ((_b = (_a = this._featureCollection) === null || _a === void 0 ? void 0 : _a.features) !== null && _b !== void 0 ? _b : []);
+        // Prepare candidate labels with optimized filtering and calculations
+        const candidateLabels = featureData
+            .map(feature => {
+            var _a;
+            // Get label text from user-provided area data only
+            const labelText = feature.data ? getString(feature.data, config.areaLabel) : null;
+            if (!labelText)
+                return null;
+            const centroid = this._path.centroid(feature);
+            // Skip if centroid is invalid (e.g., for very small or complex shapes)
+            if (!centroid || centroid.some(coord => !isFinite(coord)))
+                return null;
+            const bounds = this._path.bounds(feature);
+            const area = (bounds[1][0] - bounds[0][0]) * (bounds[1][1] - bounds[0][1]);
+            return {
+                feature,
+                centroid,
+                area,
+                labelText,
+                id: feature.data ? getString(feature.data, config.areaId) : (_a = feature.id) === null || _a === void 0 ? void 0 : _a.toString(),
+            };
+        })
+            .filter(Boolean) // Remove null entries
+            .sort((a, b) => b.area - a.area); // Prioritize larger areas
+        // D3 data binding with improved key function
+        const labels = this._areaLabelsGroup
+            .selectAll(`.${areaLabel}`)
+            .data(candidateLabels, d => d.id || '');
+        // Handle entering labels
+        const labelsEnter = labels.enter()
+            .append('text')
+            .attr('class', areaLabel)
+            .attr('transform', d => `translate(${d.centroid[0]},${d.centroid[1]})`)
+            .style('opacity', 0)
+            .style('pointer-events', 'none');
+        // Update all labels (enter + update)
+        const labelsMerged = labelsEnter.merge(labels);
+        labelsMerged
+            .text(d => d.labelText)
+            .attr('transform', d => `translate(${d.centroid[0]},${d.centroid[1]})`)
+            .style('font-size', `calc(var(--vis-map-point-label-font-size) / ${this._currentZoomLevel})`)
+            .style('text-anchor', 'middle')
+            .style('dominant-baseline', 'middle');
+        // Handle exiting labels
+        smartTransition(labels.exit(), duration)
+            .style('opacity', 0)
+            .remove();
+        // Run collision detection immediately to prevent flickering during zoom
+        if (candidateLabels.length > 0) {
+            window.cancelAnimationFrame(this._collideLabelsAnimFrameId);
+            // Run collision detection synchronously first
+            this._collideLabels();
+            // Then schedule follow-up collision detection for any dynamic changes
+            this._collideLabelsAnimFrameId = window.requestAnimationFrame(() => {
+                this._collideLabels();
+            });
+        }
+        // Animate to visible state AFTER collision detection
+        smartTransition(labelsMerged, duration)
+            .style('opacity', 1);
+    }
+    _collideLabels() {
+        const labels = this._areaLabelsGroup.selectAll(`.${areaLabel}`);
+        const labelNodes = labels.nodes();
+        const labelData = labels.data();
+        if (labelNodes.length === 0)
+            return;
+        // Reset all labels to visible and mark them as such
+        labelNodes.forEach((node) => {
+            node._labelVisible = true;
+        });
+        // Helper function to get bounding box
+        const getBBox = (labelData) => {
+            const [x, y] = labelData.centroid;
+            const labelText = labelData.labelText || '';
+            const fontSize = 12; // Default font size
+            const width = estimateStringPixelLength(labelText, fontSize, 0.6);
+            const height = fontSize * 1.2; // Line height factor
+            return {
+                x: x - width / 2,
+                y: y - height / 2,
+                width,
+                height,
+            };
+        };
+        // Run collision detection similar to scatter plot
+        labelNodes.forEach((node1, i) => {
+            const data1 = labelData[i];
+            if (!node1._labelVisible)
+                return;
+            const label1BoundingRect = getBBox(data1);
+            for (let j = 0; j < labelNodes.length; j++) {
+                if (i === j)
+                    continue;
+                const node2 = labelNodes[j];
+                const data2 = labelData[j];
+                if (!node2._labelVisible)
+                    continue;
+                const label2BoundingRect = getBBox(data2);
+                const intersect = rectIntersect(label1BoundingRect, label2BoundingRect, 2);
+                if (intersect) {
+                    // Priority based on area size - larger areas keep their labels
+                    if (data1.area >= data2.area) {
+                        node2._labelVisible = false;
+                    }
+                    else {
+                        node1._labelVisible = false;
+                        break;
+                    }
+                }
+            }
+        });
+        // Apply visibility based on collision detection
+        labels.style('opacity', (d, i) => labelNodes[i]._labelVisible ? 1 : 0);
+    }
     _renderLinks(duration) {
         const { config, datamodel } = this;
         const links = datamodel.links;
@@ -173,48 +345,163 @@ class TopoJSONMap extends ComponentCore {
             .style('stroke', (link, i) => getColor(link, config.linkColor, i));
         edges.exit().remove();
     }
-    _renderPoints(duration) {
+    _getPointData() {
         const { config, datamodel } = this;
-        const pointData = datamodel.points;
+        if (!config.clustering || !this._clusterIndex) {
+            // Return regular points when clustering is disabled
+            return datamodel.points.map((d, i) => {
+                const pos = this._projection(getLonLat(d, config.longitude, config.latitude));
+                const radius = getNumber(d, config.pointRadius);
+                const shape = getString(d, config.pointShape) || TopoJSONMapPointShape.Circle;
+                const donutData = getDonutData(d, config.colorMap);
+                const pointColor = getColor(d, config.pointColor, i);
+                return {
+                    geometry: { type: 'Point', coordinates: getLonLat(d, config.longitude, config.latitude) },
+                    bbox: { x1: pos[0] - radius, y1: pos[1] - radius, x2: pos[0] + radius, y2: pos[1] + radius },
+                    radius,
+                    path: getPointPathData({ x: 0, y: 0 }, radius, shape),
+                    color: pointColor,
+                    id: getString(d, config.pointId, i),
+                    properties: d,
+                    donutData,
+                    isCluster: false,
+                    _zIndex: 0,
+                };
+            });
+        }
+        // Get bounds for clustering
+        const bounds = this._projection.invert ? [
+            this._projection.invert([0, this._height])[0],
+            this._projection.invert([0, this._height])[1],
+            this._projection.invert([this._width, 0])[0],
+            this._projection.invert([this._width, 0])[1],
+        ] : [-180, -90, 180, 90];
+        // Use a capped zoom level for clustering to prevent over-fragmentation
+        const clusterZoom = Math.min(Math.round(this._currentZoomLevel || 1), 8);
+        let geoJsonPoints = getClustersAndPoints(this._clusterIndex, bounds, clusterZoom);
+        // Handle expanded cluster points - replace the expanded cluster with individual points
+        if (this._expandedCluster) {
+            // Remove expanded cluster from the data
+            geoJsonPoints = geoJsonPoints.filter((c) => { var _a; return c.properties.clusterId !== ((_a = this._expandedCluster) === null || _a === void 0 ? void 0 : _a.cluster.properties).clusterId; });
+            // Add points from the expanded cluster
+            geoJsonPoints = geoJsonPoints.concat(this._expandedCluster.points);
+        }
+        return geoJsonPoints.map((geoPoint, i) => geoJsonPointToScreenPoint(geoPoint, i, this._projection, this.config, this._currentZoomLevel || 1));
+    }
+    _renderPoints(duration) {
+        const { config } = this;
+        const hasColorMap = config.colorMap && Object.keys(config.colorMap).length > 0;
+        const pointData = this._getPointData();
         const points = this._pointsGroup
             .selectAll(`.${point}`)
-            .data(pointData, (d, i) => getString(d, config.pointId, i));
+            .data(pointData, (d, i) => d.id.toString());
         // Enter
         const pointsEnter = points.enter().append('g').attr('class', point)
             .attr('transform', d => {
-            const pos = this._projection(getLonLat(d, config.longitude, config.latitude));
-            return `translate(${pos[0]},${pos[1]})`;
+            const pos = this._projection(d.geometry.coordinates);
+            const expandedPoint = d;
+            const dx = expandedPoint.dx || 0;
+            const dy = expandedPoint.dy || 0;
+            return `translate(${pos[0] + dx},${pos[1] + dy})`;
         })
             .style('opacity', 0);
-        pointsEnter.append('circle').attr('class', pointCircle)
-            .attr('r', 0)
-            .style('fill', (d, i) => getColor(d, config.pointColor, i))
-            .style('stroke-width', d => getNumber(d, config.pointStrokeWidth));
+        pointsEnter.append('path').attr('class', pointCircle)
+            .attr('d', 'M0,0')
+            .style('fill', (d, i) => d.color)
+            .style('stroke-width', d => getNumber(d.properties, config.pointStrokeWidth));
+        // Add donut chart group
+        pointsEnter.append('g').attr('class', 'donut-group');
         pointsEnter.append('text').attr('class', pointLabel)
             .style('opacity', 0);
         // Update
         const pointsMerged = pointsEnter.merge(points);
         smartTransition(pointsMerged, duration)
             .attr('transform', d => {
-            const pos = this._projection(getLonLat(d, config.longitude, config.latitude));
-            return `translate(${pos[0]},${pos[1]})`;
+            const pos = this._projection(d.geometry.coordinates);
+            const expandedPoint = d;
+            const dx = expandedPoint.dx || 0;
+            const dy = expandedPoint.dy || 0;
+            return `translate(${pos[0] + dx},${pos[1] + dy})`;
+        })
+            .style('cursor', d => {
+            return (d.isCluster && (config.clusterExpandOnClick || hasColorMap)) ? 'pointer' : getString(d.properties, config.pointCursor);
         })
-            .style('cursor', d => getString(d, config.pointCursor))
             .style('opacity', 1);
+        // Cursor is handled by the parent point element
+        // Add click event handler for clusters
+        pointsMerged
+            .style('pointer-events', 'all') // Ensure pointer events are enabled
+            .on('click', (event, d) => {
+            this._onPointClick(d, event);
+        });
         smartTransition(pointsMerged.select(`.${pointCircle}`), duration)
-            .attr('r', d => getNumber(d, config.pointRadius) / this._currentZoomLevel)
-            .style('fill', (d, i) => getColor(d, config.pointColor, i))
-            .style('stroke', (d, i) => getColor(d, config.pointColor, i))
-            .style('stroke-width', d => getNumber(d, config.pointStrokeWidth) / this._currentZoomLevel);
+            .attr('d', d => {
+            const radius = d.radius / (this._currentZoomLevel || 1);
+            const shape = getString(d.properties, config.pointShape) || TopoJSONMapPointShape.Circle;
+            return getPointPathData({ x: 0, y: 0 }, radius, shape);
+        })
+            .style('fill', d => {
+            const donutData = d.donutData;
+            const shape = getString(d.properties, config.pointShape) || TopoJSONMapPointShape.Circle;
+            const isRing = shape === TopoJSONMapPointShape.Ring;
+            const expandedPoint = d;
+            // For expanded cluster points, use the preserved cluster color
+            if (expandedPoint.expandedClusterPoint) {
+                return expandedPoint.clusterColor || expandedPoint.expandedClusterPoint.color;
+            }
+            if (donutData.length > 0)
+                return 'transparent';
+            return isRing ? 'transparent' : d.color;
+        })
+            .style('stroke', d => {
+            const expandedPoint = d;
+            // For expanded cluster points, use the preserved cluster color
+            if (expandedPoint.expandedClusterPoint) {
+                return expandedPoint.clusterColor || expandedPoint.expandedClusterPoint.color;
+            }
+            return d.color;
+        })
+            .style('stroke-width', d => {
+            const shape = getString(d.properties, config.pointShape) || TopoJSONMapPointShape.Circle;
+            const isRing = shape === TopoJSONMapPointShape.Ring;
+            const baseStrokeWidth = isRing ? getNumber(d.properties, config.pointRingWidth) : getNumber(d.properties, config.pointStrokeWidth);
+            return baseStrokeWidth / (this._currentZoomLevel || 1);
+        });
+        // Update donut charts
+        const currentZoomLevel = this._currentZoomLevel;
+        pointsMerged.select('.donut-group')
+            .style('pointer-events', 'none') // Allow clicks to pass through donut charts
+            .each(function (d) {
+            if (d.donutData.length > 0) {
+                const radius = getNumber(d.properties, config.pointRadius, 0) / (currentZoomLevel || 1);
+                const arcWidth = (d.isCluster ? 4 : 2) / (currentZoomLevel || 1); // Thicker ring for clusters
+                updateDonut(select(this), d.donutData, radius, arcWidth, 0.05);
+            }
+            else {
+                select(this).selectAll('*').remove();
+            }
+        });
         const pointLabelsMerged = pointsMerged.select(`.${pointLabel}`);
         pointLabelsMerged
-            .text(d => { var _a; return (_a = getString(d, config.pointLabel)) !== null && _a !== void 0 ? _a : ''; })
+            .text(d => {
+            var _a, _b;
+            if (d.isCluster) {
+                // Use cluster label for clusters
+                return (_a = getString(d, config.clusterLabel)) !== null && _a !== void 0 ? _a : '';
+            }
+            else {
+                // Use point label for regular points
+                return (_b = getString(d.properties, config.pointLabel)) !== null && _b !== void 0 ? _b : '';
+            }
+        })
             .style('font-size', d => {
             if (config.pointLabelPosition === MapPointLabelPosition.Bottom) {
                 return `calc(var(--vis-map-point-label-font-size) / ${this._currentZoomLevel}`;
             }
-            const pointDiameter = 2 * getNumber(d, config.pointRadius);
-            const pointLabelText = getString(d, config.pointLabel) || '';
+            const pointDiameter = 2 * getNumber(d.properties, config.pointRadius, 0);
+            const pointLabelText = d.isCluster
+                ? (getString(d, config.clusterLabel) || '')
+                : (getString(d.properties, config.pointLabel) || '');
             const textLength = pointLabelText.length;
             const fontSize = 0.5 * pointDiameter / Math.pow(textLength, 0.4);
             return clamp(fontSize, fontSize, 16);
@@ -222,22 +509,36 @@ class TopoJSONMap extends ComponentCore {
             .attr('y', d => {
             if (config.pointLabelPosition === MapPointLabelPosition.Center)
                 return null;
-            const pointRadius = getNumber(d, config.pointRadius) / this._currentZoomLevel;
+            const pointRadius = getNumber(d.properties, config.pointRadius, 0) / this._currentZoomLevel;
             return pointRadius;
         })
             .attr('dy', config.pointLabelPosition === MapPointLabelPosition.Center ? '0.32em' : '1em');
         smartTransition(pointLabelsMerged, duration)
             .style('fill', (d, i) => {
-            var _a;
+            var _a, _b;
             if (config.pointLabelPosition === MapPointLabelPosition.Bottom)
                 return null;
-            const pointColor = getColor(d, config.pointColor, i);
-            const hex = (_a = color(isStringCSSVariable(pointColor) ? getCSSVariableValue(pointColor, this.element) : pointColor)) === null || _a === void 0 ? void 0 : _a.hex();
-            if (!hex)
-                return null;
-            const brightness = hexToBrightness(hex);
-            return brightness > config.pointLabelTextBrightnessRatio ? 'var(--vis-map-point-label-text-color-dark)' : 'var(--vis-map-point-label-text-color-light)';
+            if (d.isCluster) {
+                // For clusters, use contrasting color against cluster background
+                const clusterColor = getColor(d, config.clusterColor, i) || '#2196F3';
+                const hex = (_a = color(isStringCSSVariable(clusterColor) ? getCSSVariableValue(clusterColor, this.element) : clusterColor)) === null || _a === void 0 ? void 0 : _a.hex();
+                if (hex) {
+                    const brightness = hexToBrightness(hex);
+                    return brightness > 0.5 ? '#333' : '#fff';
+                }
+                return '#fff';
+            }
+            else {
+                // Regular point label color logic
+                const pointColor = getColor(d.properties, config.pointColor, i);
+                const hex = (_b = color(isStringCSSVariable(pointColor) ? getCSSVariableValue(pointColor, this.element) : pointColor)) === null || _b === void 0 ? void 0 : _b.hex();
+                if (!hex)
+                    return null;
+                const brightness = hexToBrightness(hex);
+                return brightness > config.pointLabelTextBrightnessRatio ? 'var(--vis-map-point-label-text-color-dark)' : 'var(--vis-map-point-label-text-color-light)';
+            }
         })
+            .style('font-weight', d => d.isCluster ? 'bold' : 'normal')
             .style('opacity', 1);
         // Exit
         points.exit().remove();
@@ -311,6 +612,13 @@ class TopoJSONMap extends ComponentCore {
             return; // To prevent double render because of binding zoom behaviour
         const isMouseEvent = event.sourceEvent !== undefined;
         const isExternalEvent = !(event === null || event === void 0 ? void 0 : event.sourceEvent) && !this._isResizing;
+        // Reset expanded cluster when manually zooming (but not during component-initiated zoom)
+        if (isMouseEvent && !this._eventInitiatedByComponent)
+            this._resetExpandedCluster();
+        // Reset the flag after handling the zoom
+        if (this._eventInitiatedByComponent && !isMouseEvent) {
+            this._eventInitiatedByComponent = false;
+        }
         window.cancelAnimationFrame(this._animFrameId);
         this._animFrameId = window.requestAnimationFrame(this._onZoomHandler.bind(this, event.transform, isMouseEvent, isExternalEvent));
         if (isMouseEvent) {
@@ -331,8 +639,19 @@ class TopoJSONMap extends ComponentCore {
             : (isMouseEvent ? 0 : null);
         // Call render functions that depend on this._transform
         this._renderGroups(customDuration);
+        this._renderAreaLabels(customDuration);
         this._renderLinks(customDuration);
         this._renderPoints(customDuration);
+        // Update flow features on zoom
+        if (this.config.enableFlowAnimation) {
+            this._renderSourcePoints(customDuration);
+            this._renderFlowParticles(customDuration);
+        }
+        // Update flow features on zoom
+        if (this.config.enableFlowAnimation) {
+            this._renderSourcePoints(customDuration);
+            this._renderFlowParticles(customDuration);
+        }
     }
     zoomIn(increment = 0.5) {
         this.setZoom(this._currentZoomLevel + increment);
@@ -361,8 +680,365 @@ class TopoJSONMap extends ComponentCore {
         // that the zoom state has changed
         this._applyZoom();
     }
+    fitViewToFlows(pad = 0.1) {
+        const { config, datamodel } = this;
+        const points = [...(datamodel.points || [])];
+        const links = datamodel.links || [];
+        // Add flow endpoints to the points to consider for fitting
+        links.forEach((link) => {
+            var _a, _b;
+            // Try to get source point
+            if (config.sourceLongitude && config.sourceLatitude) {
+                const sourceLon = getNumber(link, config.sourceLongitude);
+                const sourceLat = getNumber(link, config.sourceLatitude);
+                if (isNumber(sourceLon) && isNumber(sourceLat)) {
+                    points.push({ longitude: sourceLon, latitude: sourceLat });
+                }
+            }
+            else {
+                const sourcePoint = (_a = config.linkSource) === null || _a === void 0 ? void 0 : _a.call(config, link);
+                if (typeof sourcePoint === 'object' && sourcePoint !== null) {
+                    points.push(sourcePoint);
+                }
+            }
+            // Try to get target point
+            if (config.targetLongitude && config.targetLatitude) {
+                const targetLon = getNumber(link, config.targetLongitude);
+                const targetLat = getNumber(link, config.targetLatitude);
+                if (isNumber(targetLon) && isNumber(targetLat)) {
+                    points.push({ longitude: targetLon, latitude: targetLat });
+                }
+            }
+            else {
+                const targetPoint = (_b = config.linkTarget) === null || _b === void 0 ? void 0 : _b.call(config, link);
+                if (typeof targetPoint === 'object' && targetPoint !== null) {
+                    points.push(targetPoint);
+                }
+            }
+        });
+        if (points.length > 0) {
+            this._fitToPoints(points, pad);
+        }
+        else {
+            this.fitView();
+        }
+    }
+    _onPointClick(d, event) {
+        const { config } = this;
+        event.stopPropagation();
+        // Handle clicking on expanded cluster points to collapse them
+        const expandedPoint = d;
+        if (expandedPoint.expandedClusterPoint) {
+            this._resetExpandedCluster();
+            this._renderPoints(config.duration);
+            return;
+        }
+        if (d.isCluster && d.properties.cluster) {
+            // Enable click expansion when clusterExpandOnClick is true OR when colorMap is enabled (for pie chart clusters)
+            const hasColorMap = config.colorMap && Object.keys(config.colorMap).length > 0;
+            if (config.clusterExpandOnClick || hasColorMap) {
+                // Always expand the cluster to show individual points
+                const expandedPoints = this._expandCluster(d);
+                // Calculate the geographic center (centroid) of the expanded points and zoom to it
+                if (expandedPoints && expandedPoints.length > 0) {
+                    const avgLat = expandedPoints.reduce((sum, p) => sum + getNumber(p, config.latitude), 0) / expandedPoints.length;
+                    const avgLon = expandedPoints.reduce((sum, p) => sum + getNumber(p, config.longitude), 0) / expandedPoints.length;
+                    const centroidCoordinates = [avgLon, avgLat];
+                    // Calculate appropriate zoom level
+                    const newZoomLevel = getNextZoomLevelOnClusterClick(this._currentZoomLevel || 1);
+                    // Start zoom immediately for smoother transition
+                    this._zoomToLocation(centroidCoordinates, newZoomLevel);
+                }
+            }
+        }
+    }
+    _expandCluster(clusterPoint) {
+        const { config } = this;
+        if (!clusterPoint.clusterIndex)
+            return undefined;
+        const padding = 1;
+        const clusterId = clusterPoint.properties.clusterId;
+        const points = clusterPoint.clusterIndex.getLeaves(clusterId, Infinity);
+        // Calculate positions for expanded points using d3.packSiblings (same as leaflet map)
+        const packPoints = points.map(() => ({
+            x: 0,
+            y: 0,
+            r: 8 + padding, // Base radius for individual points
+        }));
+        packSiblings(packPoints);
+        // Create expanded points with relative positions
+        const expandedPoints = points.map((point, i) => {
+            const originalData = point.properties;
+            const radius = getNumber(originalData, config.pointRadius) || 8;
+            const shape = getString(originalData, config.pointShape) || TopoJSONMapPointShape.Circle;
+            const donutData = getDonutData(originalData, config.colorMap);
+            // Use the cluster's exact color for all expanded points to maintain visual consistency
+            const pointColor = clusterPoint.color;
+            return {
+                geometry: { type: 'Point', coordinates: clusterPoint.geometry.coordinates },
+                bbox: { x1: 0, y1: 0, x2: 0, y2: 0 },
+                radius,
+                path: getPointPathData({ x: 0, y: 0 }, radius, shape),
+                color: pointColor,
+                id: getString(originalData, config.pointId, i),
+                properties: originalData,
+                donutData,
+                isCluster: false,
+                _zIndex: 1,
+                expandedClusterPoint: clusterPoint,
+                clusterColor: pointColor,
+                dx: packPoints[i].x,
+                dy: packPoints[i].y,
+            };
+        });
+        this._resetExpandedCluster();
+        this._expandedCluster = {
+            cluster: clusterPoint,
+            points: expandedPoints,
+        };
+        // Re-render to show expanded points with smooth animation
+        this._renderPoints(config.duration / 2);
+        // Return the original point data for centroid calculation
+        return points.map(p => p.properties);
+    }
+    _zoomToLocation(coordinates, zoomLevel) {
+        const { config } = this;
+        const clampedZoomLevel = clamp(zoomLevel, config.zoomExtent[0], config.zoomExtent[1]);
+        // Project the target coordinates using the current projection
+        const targetPoint = this._projection(coordinates);
+        if (!targetPoint)
+            return;
+        // Calculate the center of the viewport
+        const centerX = this._width / 2;
+        const centerY = this._height / 2;
+        // Calculate the scale factor
+        const k = this._initialScale * clampedZoomLevel;
+        // Calculate translation to center the target point
+        // We need to account for the current projection center
+        const currentCenter = this._projection.translate();
+        const x = currentCenter[0] + (centerX - targetPoint[0]) * (k / this._initialScale);
+        const y = currentCenter[1] + (centerY - targetPoint[1]) * (k / this._initialScale);
+        const transform = zoomIdentity.translate(x, y).scale(k);
+        // Update internal state
+        this._currentZoomLevel = clampedZoomLevel;
+        this._center = [x, y];
+        // Set flag to indicate this is a component-initiated zoom
+        this._eventInitiatedByComponent = true;
+        // Apply the transform with smooth eased animation
+        this.g
+            .transition()
+            .duration(config.zoomDuration)
+            .ease(easeCubicInOut)
+            .call(this._zoomBehavior.transform, transform);
+    }
+    _resetExpandedCluster() {
+        var _a, _b;
+        (_b = (_a = this._expandedCluster) === null || _a === void 0 ? void 0 : _a.points) === null || _b === void 0 ? void 0 : _b.forEach((d) => { delete d.expandedClusterPoint; });
+        this._expandedCluster = null;
+    }
+    _initFlowFeatures() {
+        var _a;
+        const { config, datamodel } = this;
+        // Use raw links data instead of processed links to avoid point lookup issues for flows
+        const rawLinks = ((_a = datamodel.data) === null || _a === void 0 ? void 0 : _a.links) || [];
+        // Clear existing flow data
+        this._flowParticles = [];
+        this._sourcePoints = [];
+        if (!rawLinks || rawLinks.length === 0)
+            return;
+        // Create source points and flow particles for each link
+        rawLinks.forEach((link, i) => {
+            var _a, _b;
+            // Try to get coordinates from flow-specific accessors first, then fall back to link endpoints
+            let sourceLon, sourceLat, targetLon, targetLat;
+            if (config.sourceLongitude && config.sourceLatitude) {
+                sourceLon = getNumber(link, config.sourceLongitude);
+                sourceLat = getNumber(link, config.sourceLatitude);
+            }
+            else {
+                // Fall back to using linkSource point coordinates
+                const sourcePoint = (_a = config.linkSource) === null || _a === void 0 ? void 0 : _a.call(config, link);
+                if (typeof sourcePoint === 'object' && sourcePoint !== null) {
+                    sourceLon = getNumber(sourcePoint, config.longitude);
+                    sourceLat = getNumber(sourcePoint, config.latitude);
+                }
+                else {
+                    return; // Skip if can't resolve source coordinates
+                }
+            }
+            if (config.targetLongitude && config.targetLatitude) {
+                targetLon = getNumber(link, config.targetLongitude);
+                targetLat = getNumber(link, config.targetLatitude);
+            }
+            else {
+                // Fall back to using linkTarget point coordinates
+                const targetPoint = (_b = config.linkTarget) === null || _b === void 0 ? void 0 : _b.call(config, link);
+                if (typeof targetPoint === 'object' && targetPoint !== null) {
+                    targetLon = getNumber(targetPoint, config.longitude);
+                    targetLat = getNumber(targetPoint, config.latitude);
+                }
+                else {
+                    return; // Skip if can't resolve target coordinates
+                }
+            }
+            if (!isNumber(sourceLon) || !isNumber(sourceLat) || !isNumber(targetLon) || !isNumber(targetLat)) {
+                return;
+            }
+            const source = { lat: sourceLat, lon: sourceLon };
+            const target = { lat: targetLat, lon: targetLon };
+            // Create source point
+            const sourcePos = this._projection([sourceLon, sourceLat]);
+            if (sourcePos) {
+                const sourcePoint = {
+                    lat: sourceLat,
+                    lon: sourceLon,
+                    x: sourcePos[0],
+                    y: sourcePos[1],
+                    radius: getNumber(link, config.sourcePointRadius),
+                    color: getColor(link, config.sourcePointColor, i),
+                    flowData: link,
+                };
+                this._sourcePoints.push(sourcePoint);
+            }
+            // Create flow particles
+            const dist = Math.sqrt(Math.pow((targetLat - sourceLat), 2) + Math.pow((targetLon - sourceLon), 2));
+            const numParticles = Math.max(1, Math.round(dist * getNumber(link, config.flowParticleDensity)));
+            const velocity = getNumber(link, config.flowParticleSpeed);
+            const radius = getNumber(link, config.flowParticleRadius);
+            const color = getColor(link, config.flowParticleColor, i);
+            for (let j = 0; j < numParticles; j += 1) {
+                const progress = j / numParticles;
+                const location = {
+                    lat: sourceLat + (targetLat - sourceLat) * progress,
+                    lon: sourceLon + (targetLon - sourceLon) * progress,
+                };
+                const pos = this._projection([location.lon, location.lat]);
+                if (pos) {
+                    const particle = {
+                        x: pos[0],
+                        y: pos[1],
+                        source,
+                        target,
+                        location,
+                        velocity,
+                        radius,
+                        color,
+                        flowData: link,
+                        progress: 0,
+                        id: `${getString(link, config.linkId, i) || i}-${j}`,
+                    };
+                    this._flowParticles.push(particle);
+                }
+            }
+        });
+    }
+    _renderSourcePoints(duration) {
+        const { config } = this;
+        const sourcePoints = this._sourcePointsGroup
+            .selectAll(`.${sourcePoint}`)
+            .data(this._sourcePoints, (d, i) => `${d.flowData}-${i}`);
+        const sourcePointsEnter = sourcePoints.enter()
+            .append('circle')
+            .attr('class', sourcePoint)
+            .attr('r', 0)
+            .style('opacity', 0)
+            .on('click', (event, d) => {
+            var _a;
+            event.stopPropagation();
+            (_a = config.onSourcePointClick) === null || _a === void 0 ? void 0 : _a.call(config, d.flowData, d.x, d.y, event);
+        })
+            .on('mouseenter', (event, d) => {
+            var _a;
+            (_a = config.onSourcePointMouseEnter) === null || _a === void 0 ? void 0 : _a.call(config, d.flowData, d.x, d.y, event);
+        })
+            .on('mouseleave', (event, d) => {
+            var _a;
+            (_a = config.onSourcePointMouseLeave) === null || _a === void 0 ? void 0 : _a.call(config, d.flowData, event);
+        });
+        smartTransition(sourcePointsEnter.merge(sourcePoints), duration)
+            .attr('cx', d => d.x)
+            .attr('cy', d => d.y)
+            .attr('r', d => d.radius / (this._currentZoomLevel || 1))
+            .style('fill', d => d.color)
+            .style('stroke', d => d.color)
+            .style('opacity', 1);
+        sourcePoints.exit().remove();
+    }
+    _renderFlowParticles(duration) {
+        const flowParticles = this._flowParticlesGroup
+            .selectAll(`.${flowParticle}`)
+            .data(this._flowParticles, d => d.id);
+        const flowParticlesEnter = flowParticles.enter()
+            .append('circle')
+            .attr('class', flowParticle)
+            .attr('r', 0)
+            .style('opacity', 0);
+        smartTransition(flowParticlesEnter.merge(flowParticles), duration)
+            .attr('cx', d => d.x)
+            .attr('cy', d => d.y)
+            .attr('r', d => d.radius / (this._currentZoomLevel || 1))
+            .style('fill', d => d.color)
+            .style('opacity', 0.8);
+        flowParticles.exit().remove();
+    }
+    _startFlowAnimation() {
+        if (this._animationId)
+            return; // Animation already running
+        this._animateFlow();
+    }
+    _animateFlow() {
+        if (!this.config.enableFlowAnimation)
+            return;
+        this._animationId = requestAnimationFrame(() => {
+            this._updateFlowParticles();
+            this._animateFlow(); // Recursive call like LeafletFlowMap
+        });
+    }
+    _stopFlowAnimation() {
+        if (this._animationId) {
+            cancelAnimationFrame(this._animationId);
+            this._animationId = null;
+        }
+    }
+    _updateFlowParticles() {
+        if (this._flowParticles.length === 0)
+            return;
+        const zoomLevel = this._currentZoomLevel || 1;
+        this._flowParticles.forEach(particle => {
+            const { source, target } = particle;
+            // Calculate movement using angle-based velocity (like LeafletFlowMap)
+            const fullDist = Math.sqrt(Math.pow((target.lat - source.lat), 2) + Math.pow((target.lon - source.lon), 2));
+            const remainedDist = Math.sqrt(Math.pow((target.lat - particle.location.lat), 2) + Math.pow((target.lon - particle.location.lon), 2));
+            const angle = Math.atan2(target.lat - source.lat, target.lon - source.lon);
+            // Update geographic location
+            particle.location.lat += particle.velocity * Math.sin(angle);
+            particle.location.lon += particle.velocity * Math.cos(angle);
+            // Reset to start when reaching target (like LeafletFlowMap)
+            if ((((target.lat > source.lat) && (particle.location.lat > target.lat)) || ((target.lon > source.lon) && (particle.location.lon > target.lon))) ||
+                (((target.lat < source.lat) && (particle.location.lat < target.lat)) || ((target.lon < source.lon) && (particle.location.lon < target.lon)))) {
+                particle.location.lat = source.lat;
+                particle.location.lon = source.lon;
+            }
+            // Project to screen coordinates
+            const pos = this._projection([particle.location.lon, particle.location.lat]);
+            if (pos) {
+                // Add orthogonal arc shift (adapted from LeafletFlowMap)
+                const orthogonalArcShift = -(Math.pow(zoomLevel, 2) * fullDist / 8) * Math.cos(Math.PI / 2 * (fullDist / 2 - remainedDist) / (fullDist / 2)) || 0;
+                particle.x = pos[0];
+                particle.y = pos[1] + orthogonalArcShift;
+            }
+        });
+        // Update DOM elements directly without data rebinding (for performance)
+        this._flowParticlesGroup
+            .selectAll(`.${flowParticle}`)
+            .attr('cx', (d, i) => { var _a; return ((_a = this._flowParticles[i]) === null || _a === void 0 ? void 0 : _a.x) || 0; })
+            .attr('cy', (d, i) => { var _a; return ((_a = this._flowParticles[i]) === null || _a === void 0 ? void 0 : _a.y) || 0; })
+            .attr('r', (d, i) => { var _a; return (((_a = this._flowParticles[i]) === null || _a === void 0 ? void 0 : _a.radius) || 1) / zoomLevel; });
+    }
     destroy() {
         window.cancelAnimationFrame(this._animFrameId);
+        this._stopFlowAnimation();
+        window.cancelAnimationFrame(this._collideLabelsAnimFrameId);
     }
 }
 TopoJSONMap.selectors = style;