@unovis/ts 1.6.5-topojson.8 → 1.6.5

package/components/topojson-map/index.d.ts

@@ -2,10 +2,11 @@ import { Selection } from 'd3-selection';
 import { D3ZoomEvent, ZoomTransform } from 'd3-zoom';
 import { ComponentCore } from "../../core/component";
 import { MapGraphDataModel } from "../../data-models/map-graph";
+import { GenericDataRecord } from "../../types/data";
 import { MapData } from './types';
 import { TopoJSONMapConfigInterface } from './config';
 import * as s from './style';
-export declare class TopoJSONMap<AreaDatum, PointDatum = unknown, LinkDatum = unknown> extends ComponentCore<MapData<AreaDatum, PointDatum, LinkDatum>, TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>> {
+export declare class TopoJSONMap<AreaDatum, PointDatum = GenericDataRecord, LinkDatum = GenericDataRecord> extends ComponentCore<MapData<AreaDatum, PointDatum, LinkDatum>, TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>> {
     static selectors: typeof s;
     protected _defaultConfig: TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>;
     config: TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>;
@@ -65,10 +66,10 @@ export declare class TopoJSONMap<AreaDatum, PointDatum = unknown, LinkDatum = un
     _fitToPoints(points?: PointDatum[], pad?: number): void;
     _applyZoom(): void;
     _onResize(): void;
-    _onZoom(event: D3ZoomEvent<any, any>): void;
+    _onZoom(event: D3ZoomEvent<SVGGElement, unknown>): void;
     _onZoomEnd(): void;
     private _runCollisionDetection;
-    _onZoomHandler(transform: ZoomTransform, isMouseEvent: boolean, isExternalEvent: boolean): void;
+    _onZoomHandler(transform: ZoomTransform, isMouseEvent: boolean, isExternalEvent: boolean, isResizeEvent?: boolean): void;
     zoomIn(increment?: number): void;
     zoomOut(increment?: number): void;
     setZoom(zoomLevel: number): void;

package/components/topojson-map/index.js

@@ -17,8 +17,11 @@ import { MapProjection, TopoJSONMapPointShape, MapPointLabelPosition } from './t
 import { TopoJSONMapDefaultConfig } from './config.js';
 import { calculateClusterIndex, getClusterRadius, getLonLat, arc, getDonutData, getPointPathData, getClustersAndPoints, geoJsonPointToScreenPoint, collideAreaLabels, collidePointBottomLabels, getNextZoomLevelOnClusterClick, getPointRadius } from './utils.js';
 import { updateDonut } from './modules/donut.js';
+import { renderBackground } from './modules/background.js';
+import { updateSelectionRing } from './modules/selectionRing.js';
+import { initFlowFeatures, updateFlowParticles } from './modules/flow.js';
 import * as style from './style.js';
-import { background, features, areaLabel, links, clusterBackground, points, pointSelectionRing, pointSelection, flowParticles, sourcePoints, feature as feature$1, clusterBackgroundCircle, link, point, pointShape, clusterDonut, pointDonut, pointPathRing, pointLabel, pointBottomLabel, sourcePoint, flowParticle } from './style.js';
+import { background, features, areaLabel, links, clusterBackground, points, pointSelectionRing, pointSelection, flowParticles, sourcePoints, feature as feature$1, variables, clusterBackgroundCircle, link, point, pointShape, clusterDonut, pointDonut, pointPathRing, pointLabel, pointBottomLabel, sourcePoint, flowParticle } from './style.js';
 
 // Supercluster expects zoom levels 0-22 (like map tiles). zoomExtent[1] is a scale factor
 // for the map, so we cap the cluster maxZoom to avoid excessive quadtree depth and wrong
@@ -171,15 +174,7 @@ class TopoJSONMap extends ComponentCore {
         }
     }
     _renderBackground() {
-        this._backgroundRect
-            .attr('width', '100%')
-            .attr('height', '100%')
-            .attr('transform', `translate(${-this.bleed.left}, ${-this.bleed.top})`)
-            .style('cursor', 'default')
-            .on('click', () => {
-            // Collapse expanded cluster when clicking on background
-            this._collapseExpandedCluster();
-        });
+        renderBackground(this._backgroundRect, this.bleed.left, this.bleed.top, () => this._collapseExpandedCluster());
     }
     _renderGroups(duration) {
         const transformString = this._transform.toString();
@@ -200,7 +195,7 @@ class TopoJSONMap extends ComponentCore {
             .attr('transform', transformString);
     }
     _renderMap(duration) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const { bleed, config, datamodel } = this;
         this.g.attr('transform', `translate(${bleed.left}, ${bleed.top})`);
         const mapData = config.topojson;
@@ -213,14 +208,18 @@ class TopoJSONMap extends ComponentCore {
         if (this._firstRender) {
             // Rendering the map for the first time.
             this._projection.fitExtent([[0, 0], [this._width, this._height]], this._featureCollection);
-            this._initialScale = this._projection.scale();
-            this._center = this._projection.translate();
             if (config.mapFitToPoints) {
+                // Re-fit projection to points instead of full topojson
                 this._fitToPoints();
             }
+            // After initial fit (to features or points), treat the current projection
+            // scale as the baseline for zoom level 1.
+            this._initialScale = this._projection.scale();
+            this._center = this._projection.translate();
             const zoomExtent = config.zoomExtent;
             this._zoomBehavior.scaleExtent([zoomExtent[0] * this._initialScale, zoomExtent[1] * this._initialScale]);
-            this.setZoom(config.zoomFactor || 1);
+            this._currentZoomLevel = config.zoomFactor || 1;
+            (_e = (_d = this.g.node()) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.style.setProperty('--vis-map-current-zoom-level', String(this._currentZoomLevel));
             if (!config.disableZoom) {
                 this.g.call(this._zoomBehavior);
                 this._applyZoom();
@@ -252,10 +251,12 @@ class TopoJSONMap extends ComponentCore {
             .data(featureData);
         const featuresEnter = features.enter().append('path').attr('class', feature$1);
         const featuresMerged = featuresEnter.merge(features);
+        // Animate geometry changes, but apply fill immediately to avoid "delay then jump"
         smartTransition(featuresMerged, duration)
             .attr('d', this._path)
-            .style('fill', (d, i) => d.data ? getColor(d.data, config.areaColor, i) : null)
             .style('cursor', d => d.data ? getString(d.data, config.areaCursor) : null);
+        // Set fill directly so color updates are instantaneous instead of snapping at the end of a transition
+        featuresMerged.style('fill', (d, i) => d.data ? getColor(d.data, config.areaColor, i) : null);
         // Add click handler to collapse expanded cluster when clicking on map features
         featuresMerged.on('click', () => {
             this._collapseExpandedCluster();
@@ -312,7 +313,7 @@ class TopoJSONMap extends ComponentCore {
         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('font-size', `calc(var(${variables.mapPointLabelFontSize}) / ${this._currentZoomLevel})`)
             .style('text-anchor', 'middle')
             .style('dominant-baseline', 'middle');
         // Handle exiting labels
@@ -342,7 +343,7 @@ class TopoJSONMap extends ComponentCore {
                 .attr('cx', pos[0])
                 .attr('cy', pos[1])
                 .attr('r', 0)
-                .style('fill', 'var(--vis-map-cluster-expanded-background-fill-color)')
+                .style('fill', `var(${variables.mapClusterExpandedBackgroundFillColor})`)
                 .style('opacity', 0)
                 .style('cursor', 'pointer')
                 .on('click', () => {
@@ -423,12 +424,13 @@ class TopoJSONMap extends ComponentCore {
             const expandedClusterId = this._expandedCluster.cluster.properties.clusterId;
             // Remove the expanded cluster if it still exists at this zoom level
             geoJsonPoints = geoJsonPoints.filter((c) => {
-                const isExpandedCluster = c.properties.cluster && c.properties.clusterId === expandedClusterId;
+                const props = c.properties;
+                const isExpandedCluster = props.cluster && props.clusterId === expandedClusterId;
                 return !isExpandedCluster;
             });
             // Remove any individual points and subclusters that are part of the expanded cluster to avoid duplicates
-            const expandedPointIds = new Set(this._expandedCluster.points.map((p) => p.id));
-            geoJsonPoints = geoJsonPoints.filter((c) => !this._shouldFilterPointOrCluster(c, expandedPointIds));
+            const expandedPointIds = new Set(this._expandedCluster.points.map(p => p.id.toString()));
+            geoJsonPoints = geoJsonPoints.filter(c => !this._shouldFilterPointOrCluster(geoJsonPointToScreenPoint(c, 0, this._projection, this.config, this._currentZoomLevel || 1), expandedPointIds));
             // Add points from the expanded cluster
             geoJsonPoints = geoJsonPoints.concat(this._expandedCluster.points);
         }
@@ -436,7 +438,10 @@ class TopoJSONMap extends ComponentCore {
             // When collapsed, restore the original cluster point instead of relying on clustering algorithm
             const collapsedClusterId = this._collapsedCluster.properties.clusterId;
             // Check if the clustering algorithm has recreated a similar cluster at this zoom level
-            const hasNaturalCluster = geoJsonPoints.some((c) => c.properties.cluster && c.properties.clusterId === collapsedClusterId);
+            const hasNaturalCluster = geoJsonPoints.some(c => {
+                const props = c.properties;
+                return props.cluster && props.clusterId === collapsedClusterId;
+            });
             if (hasNaturalCluster) {
                 // Natural cluster exists, we can safely clear the collapsed cluster
                 this._collapsedCluster = null;
@@ -444,7 +449,7 @@ class TopoJSONMap extends ComponentCore {
             }
             else {
                 // Remove any individual points and subclusters that were part of the collapsed cluster
-                geoJsonPoints = geoJsonPoints.filter((c) => !this._shouldFilterPointOrCluster(c, this._collapsedClusterPointIds));
+                geoJsonPoints = geoJsonPoints.filter(c => !this._shouldFilterPointOrCluster(geoJsonPointToScreenPoint(c, 0, this._projection, this.config, this._currentZoomLevel || 1), this._collapsedClusterPointIds));
                 // Add the original cluster back
                 geoJsonPoints.push(this._collapsedCluster);
             }
@@ -452,14 +457,14 @@ class TopoJSONMap extends ComponentCore {
         return geoJsonPoints.map((geoPoint, i) => geoJsonPointToScreenPoint(geoPoint, i, this._projection, this.config, this._currentZoomLevel || 1));
     }
     _renderPoints(duration) {
-        var _a, _b, _c;
         const { config } = this;
         const pointData = this._getPointData();
         const currentZoomLevel = this._currentZoomLevel || 1;
         // Set z-index for expanded cluster points to ensure proper layering
         if (this._expandedCluster && config.clusterBackground) {
             pointData.forEach((d) => {
-                d._zIndex = d.expandedClusterPoint ? 2 : 0;
+                const expandedPoint = d;
+                expandedPoint._zIndex = expandedPoint.expandedClusterPoint ? 2 : 0;
             });
         }
         const points = this._pointsGroup
@@ -468,11 +473,12 @@ class TopoJSONMap extends ComponentCore {
         // Enter
         const pointsEnter = points.enter().append('g').attr('class', point)
             .attr('transform', d => {
+            var _a, _b;
             const pos = this._projection(d.geometry.coordinates);
             const expandedPoint = d;
             // Divide by zoom level to compensate for the group's zoom transform
-            const dx = (expandedPoint.dx || 0) / currentZoomLevel;
-            const dy = (expandedPoint.dy || 0) / currentZoomLevel;
+            const dx = ((_a = expandedPoint.dx) !== null && _a !== void 0 ? _a : 0) / currentZoomLevel;
+            const dy = ((_b = expandedPoint.dy) !== null && _b !== void 0 ? _b : 0) / currentZoomLevel;
             return `translate(${pos[0] + dx},${pos[1] + dy})`;
         })
             .style('opacity', 1e-6);
@@ -528,11 +534,12 @@ class TopoJSONMap extends ComponentCore {
         const pointsMerged = pointsEnter.merge(points);
         smartTransition(pointsMerged, duration)
             .attr('transform', d => {
+            var _a, _b;
             const pos = this._projection(d.geometry.coordinates);
             const expandedPoint = d;
             // Divide by zoom level to compensate for the group's zoom transform
-            const dx = (expandedPoint.dx || 0) / currentZoomLevel;
-            const dy = (expandedPoint.dy || 0) / currentZoomLevel;
+            const dx = ((_a = expandedPoint.dx) !== null && _a !== void 0 ? _a : 0) / currentZoomLevel;
+            const dy = ((_b = expandedPoint.dy) !== null && _b !== void 0 ? _b : 0) / currentZoomLevel;
             return `translate(${pos[0] + dx},${pos[1] + dy})`;
         })
             .style('cursor', d => {
@@ -643,7 +650,7 @@ class TopoJSONMap extends ComponentCore {
         })
             .style('font-size', d => {
             if (config.pointLabelPosition === MapPointLabelPosition.Bottom) {
-                return `calc(var(--vis-map-point-label-font-size) / ${currentZoomLevel})`;
+                return `calc(var(${variables.mapPointLabelFontSize}) / ${currentZoomLevel})`;
             }
             const radius = d.isCluster
                 ? (d.radius / currentZoomLevel)
@@ -679,7 +686,9 @@ class TopoJSONMap extends ComponentCore {
             var _a;
             if (d.donutData.length > 0) {
                 // Cluster background is white, so use dark text
-                return d.isCluster ? 'var(--vis-map-point-label-text-color-dark)' : 'var(--vis-map-point-label-text-color-light)';
+                return d.isCluster
+                    ? `var(${variables.mapPointLabelTextColorDark})`
+                    : `var(${variables.mapPointLabelTextColorLight})`;
             }
             else {
                 if (config.pointLabelColor) {
@@ -692,7 +701,9 @@ class TopoJSONMap extends ComponentCore {
                 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)';
+                return brightness > config.pointLabelTextBrightnessRatio
+                    ? `var(${variables.mapPointLabelTextColorDark})`
+                    : `var(${variables.mapPointLabelTextColorLight})`;
             }
         })
             .style('opacity', 1)
@@ -722,7 +733,7 @@ class TopoJSONMap extends ComponentCore {
             return radius + (10 / this._currentZoomLevel); // offset below the point/cluster, scaled with zoom
         })
             .attr('dy', '0.32em')
-            .style('font-size', `calc(var(--vis-map-point-bottom-label-font-size, 10px) / ${this._currentZoomLevel})`);
+            .style('font-size', `calc(var(${variables.mapPointBottomLabelFontSize}) / ${this._currentZoomLevel})`);
         smartTransition(bottomLabelsMerged, duration)
             .style('opacity', d => d.expandedClusterPoint ? 0 : 1);
         // Sort elements by z-index to ensure expanded cluster points appear above everything else
@@ -738,36 +749,16 @@ class TopoJSONMap extends ComponentCore {
         this._pointsGroup.selectAll(`.${pointLabel}`).style('display', (config.heatmapMode && (this._currentZoomLevel < config.heatmapModeZoomLevelThreshold)) ? 'none' : null);
         this._pointsGroup.selectAll(`.${pointBottomLabel}`).style('display', (config.heatmapMode && (this._currentZoomLevel < config.heatmapModeZoomLevelThreshold)) ? 'none' : null);
         // Update selection ring
-        const pointSelection$1 = this._pointSelectionRing.select(`.${pointSelection}`);
-        if (this._selectedPoint) {
-            const selectedPointId = getString(this._selectedPoint.properties, config.pointId);
-            const foundPoint = pointData.find(d => this._selectedPoint.isCluster
-                ? (d.id === this._selectedPoint.id)
-                : (selectedPointId && getString(d.properties, config.pointId) === selectedPointId));
-            const pos = this._projection((foundPoint !== null && foundPoint !== void 0 ? foundPoint : this._selectedPoint).geometry.coordinates);
-            if (pos) {
-                const dx = (((_a = foundPoint) === null || _a === void 0 ? void 0 : _a.dx) || 0) / currentZoomLevel;
-                const dy = (((_b = foundPoint) === null || _b === void 0 ? void 0 : _b.dy) || 0) / currentZoomLevel;
-                this._pointSelectionRing.attr('transform', `translate(${pos[0] + dx},${pos[1] + dy})`);
-            }
-            pointSelection$1
-                .classed('active', Boolean(foundPoint))
-                .attr('d', (foundPoint === null || foundPoint === void 0 ? void 0 : foundPoint.path) || null)
-                .style('fill', 'transparent')
-                .style('stroke-width', 1)
-                .style('stroke', (_c = (foundPoint || this._selectedPoint)) === null || _c === void 0 ? void 0 : _c.color)
-                .style('transform', `scale(${1.25 / currentZoomLevel})`);
-        }
-        else {
-            pointSelection$1.classed('active', false);
-        }
+        updateSelectionRing(this._pointSelectionRing, this._selectedPoint, pointData, this.config, this._projection, currentZoomLevel);
+        // Set up events and custom attributes for rendered points (match LeafletMap behavior)
+        this._setUpComponentEventsThrottled();
+        this._setCustomAttributesThrottled();
     }
     _fitToPoints(points, pad = 0.1) {
         const { config, datamodel } = this;
         const pointData = points || datamodel.points;
         if (pointData.length === 0)
             return;
-        this.fitView();
         const coordinates = pointData.map(p => [
             getNumber(p, d => getNumber(d, config.longitude)),
             getNumber(p, d => getNumber(d, config.latitude)),
@@ -802,9 +793,7 @@ class TopoJSONMap extends ComponentCore {
                 ]);
             }
         }
-        // If we don't update the center, the next zoom will be centered around the previous value
         this._center = this._projection.translate();
-        this._applyZoom();
     }
     _applyZoom() {
         var _a;
@@ -819,10 +808,25 @@ class TopoJSONMap extends ComponentCore {
         const prevTranslate = this._projection.translate();
         this._projection.fitExtent([[0, 0], [this._width, this._height]], this._featureCollection);
         this._initialScale = this._projection.scale();
-        this._center = [
-            this._projection.translate()[0] * this._center[0] / prevTranslate[0],
-            this._projection.translate()[1] * this._center[1] / prevTranslate[1],
-        ];
+        // If a point is selected, center the view on it after resize
+        if (this._selectedPoint) {
+            const coords = this._selectedPoint.geometry.coordinates;
+            const pos = this._projection(coords);
+            const projTranslate = this._projection.translate();
+            if (pos) {
+                const k = this._currentZoomLevel;
+                this._center = [
+                    this._width / 2 - (pos[0] - projTranslate[0]) * k,
+                    this._height / 2 - (pos[1] - projTranslate[1]) * k,
+                ];
+            }
+        }
+        else {
+            this._center = [
+                this._projection.translate()[0] * this._center[0] / prevTranslate[0],
+                this._projection.translate()[1] * this._center[1] / prevTranslate[1],
+            ];
+        }
         this._applyZoom();
         this._isResizing = false;
         this._prevWidth = this._width;
@@ -837,8 +841,9 @@ class TopoJSONMap extends ComponentCore {
             (_b = (_a = this.g.node()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.style.setProperty('--vis-map-current-zoom-level', String(this._currentZoomLevel));
             return; // To prevent double render because of binding zoom behaviour
         }
-        const isMouseEvent = event.sourceEvent !== undefined;
+        const isMouseEvent = !!event.sourceEvent;
         const isExternalEvent = !(event === null || event === void 0 ? void 0 : event.sourceEvent) && !this._isResizing;
+        const isResizeEvent = this._isResizing && !(event === null || event === void 0 ? void 0 : event.sourceEvent);
         this._isZooming = true;
         // Clear any pending zoom end timeout
         if (this._zoomEndTimeoutId) {
@@ -852,7 +857,7 @@ class TopoJSONMap extends ComponentCore {
             this._collapsedClusterPointIds = null;
         }
         window.cancelAnimationFrame(this._animFrameId);
-        this._animFrameId = window.requestAnimationFrame(this._onZoomHandler.bind(this, event.transform, isMouseEvent, isExternalEvent));
+        this._animFrameId = window.requestAnimationFrame(this._onZoomHandler.bind(this, event.transform, isMouseEvent, isExternalEvent, isResizeEvent));
         if (isMouseEvent) {
             // Update the center coordinate so that the next call to _applyZoom()
             // will zoom with respect to the current view
@@ -876,21 +881,22 @@ class TopoJSONMap extends ComponentCore {
     _runCollisionDetection() {
         window.cancelAnimationFrame(this._collisionDetectionAnimFrameId);
         this._collisionDetectionAnimFrameId = window.requestAnimationFrame(() => {
+            const duration = this.config.duration;
             // Run collision detection for area labels
             const areaLabels = this._areaLabelsGroup.selectAll(`.${areaLabel}`);
-            collideAreaLabels(areaLabels);
+            collideAreaLabels(areaLabels, duration);
             // Run collision detection for point bottom labels
             const pointBottomLabels = this._pointsGroup.selectAll(`.${point} .${pointBottomLabel}`);
-            collidePointBottomLabels(pointBottomLabels);
+            collidePointBottomLabels(pointBottomLabels, duration);
         });
     }
-    _onZoomHandler(transform, isMouseEvent, isExternalEvent) {
+    _onZoomHandler(transform, isMouseEvent, isExternalEvent, isResizeEvent = false) {
         const scale = transform.k / this._initialScale || 1;
         const center = this._projection.translate();
         this._transform = zoomIdentity
             .translate(transform.x - center[0] * scale, transform.y - center[1] * scale)
             .scale(scale);
-        const customDuration = isExternalEvent
+        const customDuration = (isExternalEvent || isResizeEvent)
             ? this.config.zoomDuration
             : (isMouseEvent ? 0 : null);
         // Call render functions that depend on this._transform
@@ -904,11 +910,13 @@ class TopoJSONMap extends ComponentCore {
     zoomIn(increment = 0.5) {
         if (this._isZooming)
             return;
+        this._resetExpandedCluster();
         this.setZoom(this._currentZoomLevel + increment);
     }
     zoomOut(increment = 0.5) {
         if (this._isZooming)
             return;
+        this._resetExpandedCluster();
         this.setZoom(this._currentZoomLevel - increment);
     }
     setZoom(zoomLevel) {
@@ -935,113 +943,34 @@ class TopoJSONMap extends ComponentCore {
         this._applyZoom();
     }
     fitView() {
-        var _a, _b, _c;
-        this._projection.fitExtent([[0, 0], [this._width, this._height]], this._featureCollection);
-        this._currentZoomLevel = (((_a = this._projection) === null || _a === void 0 ? void 0 : _a.scale()) / this._initialScale) || 1;
-        // Set CSS custom property for zoom level
-        (_c = (_b = this.g.node()) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.style.setProperty('--vis-map-current-zoom-level', String(this._currentZoomLevel));
-        this._center = this._projection.translate();
-        // We are using this._applyZoom() instead of directly calling this._render(config.zoomDuration) because
-        // we've to "attach" new transform to the map group element. Otherwise zoomBehavior  will not know
-        // that the zoom state has changed
-        this._applyZoom();
+        var _a, _b, _c, _d, _e;
+        const { config } = this;
+        this._resetExpandedCluster();
+        if (config.mapFitToPoints) {
+            // When mapFitToPoints is enabled, fitView should refit the projection to the points
+            // and reset the zoom level relative to that fitted scale.
+            this._fitToPoints();
+            // Treat the newly fitted scale as the baseline and reset zoom to 1
+            this._initialScale = this._projection.scale();
+            this._currentZoomLevel = 1;
+            (_b = (_a = this.g.node()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.style.setProperty('--vis-map-current-zoom-level', '1');
+            this._center = this._projection.translate();
+            this._applyZoom();
+        }
+        else {
+            this._projection.fitExtent([[0, 0], [this._width, this._height]], this._featureCollection);
+            this._currentZoomLevel = (((_c = this._projection) === null || _c === void 0 ? void 0 : _c.scale()) / this._initialScale) || 1;
+            // Set CSS custom property for zoom level
+            (_e = (_d = this.g.node()) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.style.setProperty('--vis-map-current-zoom-level', String(this._currentZoomLevel));
+            this._center = this._projection.translate();
+            // We are using this._applyZoom() instead of directly calling this._render(config.zoomDuration) because
+            // we've to "attach" new transform to the map group element. Otherwise zoomBehavior  will not know
+            // that the zoom state has changed
+            this._applyZoom();
+        }
     }
     _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;
-            }
-            // 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);
-            }
-            // Use the same arc as _renderLinks for flow animation
-            const sourceProj = this._projection([sourceLon, sourceLat]);
-            const targetProj = this._projection([targetLon, targetLat]);
-            if (!sourceProj || !targetProj)
-                return;
-            // Generate SVG arc path string using the same arc() function
-            const arcPath = arc(sourceProj, targetProj);
-            // Create a temporary SVG path element for sampling
-            const tempPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            tempPath.setAttribute('d', arcPath);
-            const pathLength = tempPath.getTotalLength();
-            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 pt = tempPath.getPointAtLength(progress * pathLength);
-                const particle = {
-                    x: pt.x,
-                    y: pt.y,
-                    velocity,
-                    radius,
-                    color,
-                    progress,
-                    arcPath,
-                    pathLength,
-                    id: `${getString(link, config.linkId, i) || i}-${j}`,
-                    flowData: undefined,
-                };
-                this._flowParticles.push(particle);
-            }
-        });
+        initFlowFeatures(this);
     }
     _renderSourcePoints(duration) {
         const { config } = this;
@@ -1113,29 +1042,11 @@ class TopoJSONMap extends ComponentCore {
         }
     }
     _updateFlowParticles() {
-        if (this._flowParticles.length === 0)
-            return;
-        const zoomLevel = this._currentZoomLevel || 1;
-        this._flowParticles.forEach(particle => {
-            // Move particle along the arc path using progress
-            particle.progress += particle.velocity * 0.01;
-            if (particle.progress > 1)
-                particle.progress = 0;
-            // Use the stored SVG path and pathLength
-            if (particle.arcPath && typeof particle.pathLength === 'number') {
-                const tempPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                tempPath.setAttribute('d', particle.arcPath);
-                const pt = tempPath.getPointAtLength(particle.progress * particle.pathLength);
-                particle.x = pt.x;
-                particle.y = pt.y;
-            }
+        updateFlowParticles({
+            _flowParticles: this._flowParticles,
+            _currentZoomLevel: this._currentZoomLevel,
+            _flowParticlesGroup: this._flowParticlesGroup,
         });
-        // 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; });
     }
     _onPointClick(d, event) {
         var _a;
@@ -1253,6 +1164,7 @@ class TopoJSONMap extends ComponentCore {
         this._renderPoints(config.duration / 2);
         // Re-bind user-defined events to include newly created expanded cluster points
         this._setUpComponentEventsThrottled();
+        this._setCustomAttributesThrottled();
         // Return the original point data for centroid calculation
         return points.map(p => p.properties);
     }
@@ -1314,10 +1226,11 @@ class TopoJSONMap extends ComponentCore {
             this._collapsedClusterPointIds = expandedPointIds;
             // Clean up all references to prevent memory leaks
             (_a = this._expandedCluster.points) === null || _a === void 0 ? void 0 : _a.forEach((d) => {
-                delete d.expandedClusterPoint;
-                delete d.clusterColor;
-                delete d.dx;
-                delete d.dy;
+                const expandedPoint = d;
+                delete expandedPoint.expandedClusterPoint;
+                delete expandedPoint.clusterColor;
+                delete expandedPoint.dx;
+                delete expandedPoint.dy;
             });
             this._expandedCluster = null;
         }