Component | TopoJSON: Move certain functions to modules

Author: lee00678

packages/ts/src/components/topojson-map/index.ts

@@ -19,9 +19,9 @@ import { getCSSVariableValue, isStringCSSVariable } from 'utils/misc'
 import { trimStringMiddle } from 'utils/text'
 // Types
 import { MapLink } from 'types/map'
+import { GenericDataRecord } from 'types/data'
 import Supercluster from 'supercluster'
 
-
 // Local Types
 import {
   MapData,
@@ -51,10 +51,13 @@ import {
   calculateClusterIndex,
   getClustersAndPoints,
   geoJsonPointToScreenPoint,
-  getClusterRadius,
   getNextZoomLevelOnClusterClick,
+  getClusterRadius,
 } from './utils'
 import { updateDonut } from './modules/donut'
+import { renderBackground } from './modules/background'
+import { updateSelectionRing } from './modules/selectionRing'
+import { initFlowFeatures, updateFlowParticles, FlowInitContext, FlowUpdateContext } from './modules/flow'
 
 // Styles
 import * as s from './style'
@@ -65,9 +68,9 @@ import * as s from './style'
 const SUPERCLUSTER_MAX_ZOOM = 22
 
 export class TopoJSONMap<
-  AreaDatum,
-  PointDatum = unknown,
-  LinkDatum = unknown,
+  AreaDatum extends GenericDataRecord,
+  PointDatum extends GenericDataRecord = GenericDataRecord,
+  LinkDatum extends GenericDataRecord = GenericDataRecord,
 > extends ComponentCore<
   MapData<AreaDatum, PointDatum, LinkDatum>,
   TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>
@@ -251,15 +254,10 @@ export class TopoJSONMap<
   }
 
   _renderBackground (): void {
-    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, {
+      bleed: { left: this.bleed.left, top: this.bleed.top },
+      onClick: () => this._collapseExpandedCluster(),
+    })
   }
 
   _renderGroups (duration: number): void {
@@ -905,30 +903,14 @@ export class TopoJSONMap<
     this._pointsGroup.selectAll(`.${s.pointBottomLabel}`).style('display', (config.heatmapMode && (this._currentZoomLevel < config.heatmapModeZoomLevelThreshold)) ? 'none' : null)
 
     // Update selection ring
-    const pointSelection = this._pointSelectionRing.select(`.${s.pointSelection}`)
-    if (this._selectedPoint) {
-      const selectedPointId = getString(this._selectedPoint.properties as PointDatum, config.pointId)
-      const foundPoint = pointData.find(d =>
-        this._selectedPoint.isCluster
-          ? (d.id === this._selectedPoint.id)
-          : (selectedPointId && getString(d.properties as PointDatum, config.pointId) === selectedPointId)
-      )
-      const pos = this._projection((foundPoint ?? this._selectedPoint).geometry.coordinates as [number, number])
-      if (pos) {
-        const dx = ((foundPoint as any)?.dx || 0) / currentZoomLevel
-        const dy = ((foundPoint as any)?.dy || 0) / currentZoomLevel
-        this._pointSelectionRing.attr('transform', `translate(${pos[0] + dx},${pos[1] + dy})`)
-      }
-      pointSelection
-        .classed('active', Boolean(foundPoint))
-        .attr('d', foundPoint?.path || null)
-        .style('fill', 'transparent')
-        .style('stroke-width', 1)
-        .style('stroke', (foundPoint || this._selectedPoint)?.color)
-        .style('transform', `scale(${1.25 / currentZoomLevel})`)
-    } else {
-      pointSelection.classed('active', false)
-    }
+    updateSelectionRing<PointDatum>(
+      this._pointSelectionRing,
+      this._selectedPoint,
+      pointData,
+      this.config,
+      this._projection,
+      currentZoomLevel
+    )
   }
 
   _fitToPoints (points?: PointDatum[], pad = 0.1): void {
@@ -1150,103 +1132,9 @@ export class TopoJSONMap<
   }
 
   private _initFlowFeatures (): void {
-    const { config, datamodel } = this
-    // Use raw links data instead of processed links to avoid point lookup issues for flows
-    const rawLinks = datamodel.data?.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) => {
-      // Try to get coordinates from flow-specific accessors first, then fall back to link endpoints
-      let sourceLon: number, sourceLat: number, targetLon: number, targetLat: number
-
-      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 = config.linkSource?.(link)
-        if (typeof sourcePoint === 'object' && sourcePoint !== null) {
-          sourceLon = getNumber(sourcePoint as PointDatum, config.longitude)
-          sourceLat = getNumber(sourcePoint as PointDatum, 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 = config.linkTarget?.(link)
-        if (typeof targetPoint === 'object' && targetPoint !== null) {
-          targetLon = getNumber(targetPoint as PointDatum, config.longitude)
-          targetLat = getNumber(targetPoint as PointDatum, 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((targetLat - sourceLat) ** 2 + (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: FlowParticle = {
-          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<AreaDatum, PointDatum, LinkDatum>(
+      this as unknown as FlowInitContext<AreaDatum, PointDatum, LinkDatum>
+    )
   }
 
   private _renderSourcePoints (duration: number): void {
@@ -1328,31 +1216,11 @@ export class TopoJSONMap<
   }
 
   private _updateFlowParticles (): void {
-    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
-      }
-    })
-
-    // Update DOM elements directly without data rebinding (for performance)
-    this._flowParticlesGroup
-      .selectAll<SVGCircleElement, any>(`.${s.flowParticle}`)
-      .attr('cx', (d, i) => this._flowParticles[i]?.x || 0)
-      .attr('cy', (d, i) => this._flowParticles[i]?.y || 0)
-      .attr('r', (d, i) => (this._flowParticles[i]?.radius || 1) / zoomLevel)
+    updateFlowParticles({
+      _flowParticles: this._flowParticles as FlowParticle[],
+      _currentZoomLevel: this._currentZoomLevel,
+      _flowParticlesGroup: this._flowParticlesGroup as any,
+    } as FlowUpdateContext)
   }
 
   private _onPointClick (d: TopoJSONMapPoint<PointDatum>, event: MouseEvent): void {

packages/ts/src/components/topojson-map/modules/background.ts

@@ -0,0 +1,21 @@
+import { Selection } from 'd3-selection'
+
+export interface BackgroundContext {
+  bleed: { left?: number; top?: number };
+  onClick: () => void;
+}
+
+export function renderBackground (
+  backgroundRect: Selection<SVGRectElement, unknown, null, undefined>,
+  bgContext: BackgroundContext
+): void {
+  backgroundRect
+    .attr('width', '100%')
+    .attr('height', '100%')
+    .attr('transform', `translate(${-(bgContext.bleed.left ?? 0)}, ${-(bgContext.bleed.top ?? 0)})`)
+    .style('cursor', 'default')
+    .on('click', () => {
+      bgContext.onClick()
+    })
+}
+