@flowmap.gl/data 9.0.0 → 9.1.0

package/src/FlowmapSelectors.ts

@@ -48,11 +48,13 @@ import {
   FlowAccessors,
   FlowCirclesLayerAttributes,
   FlowLinesLayerAttributes,
+  FlowLinesRenderingMode,
   FlowmapData,
   FlowmapDataAccessors,
   LayersData,
   LocationFilterMode,
   LocationTotals,
+  ViewportProps,
   isLocationClusterNode,
 } from './types';
 
@@ -141,10 +143,15 @@ export default class FlowmapSelectors<
     props: FlowmapData<L, F>,
   ) => state.settings.fadeAmount;
 
-  getAnimate: Selector<L, F, boolean> = (
+  getFlowLinesRenderingMode: Selector<L, F, FlowLinesRenderingMode> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settings.animationEnabled;
+  ) => state.settings.flowLinesRenderingMode;
+
+  getAnimate: Selector<L, F, boolean> = createSelector(
+    this.getFlowLinesRenderingMode,
+    (flowLinesRenderingMode) => flowLinesRenderingMode === 'animated-straight',
+  );
 
   getInvalidLocationIds: Selector<L, F, (string | number)[] | undefined> =
     createSelector(this.getLocationsFromProps, (locations) => {
@@ -1101,7 +1108,8 @@ export default class FlowmapSelectors<
     this.getInCircleSizeGetter,
     this.getOutCircleSizeGetter,
     this.getFlowThicknessScale,
-    this.getAnimate,
+    this.getViewport,
+    this.getFlowLinesRenderingMode,
     this.getLocationLabelsEnabled,
     (
       locations,
@@ -1112,7 +1120,8 @@ export default class FlowmapSelectors<
       getInCircleSize,
       getOutCircleSize,
       flowThicknessScale,
-      animationEnabled,
+      viewport,
+      flowLinesRenderingMode,
       locationLabelsEnabled,
     ) => {
       return this._prepareLayersData(
@@ -1124,7 +1133,8 @@ export default class FlowmapSelectors<
         getInCircleSize,
         getOutCircleSize,
         flowThicknessScale,
-        animationEnabled,
+        viewport,
+        flowLinesRenderingMode,
         locationLabelsEnabled,
       );
     },
@@ -1142,6 +1152,7 @@ export default class FlowmapSelectors<
     const getOutCircleSize = this.getOutCircleSizeGetter(state, props);
     const flowThicknessScale = this.getFlowThicknessScale(state, props);
     const locationLabelsEnabled = this.getLocationLabelsEnabled(state, props);
+    const viewport = this.getViewport(state, props);
     return this._prepareLayersData(
       locations,
       flows,
@@ -1151,7 +1162,8 @@ export default class FlowmapSelectors<
       getInCircleSize,
       getOutCircleSize,
       flowThicknessScale,
-      state.settings.animationEnabled,
+      viewport,
+      state.settings.flowLinesRenderingMode,
       locationLabelsEnabled,
     );
   }
@@ -1165,7 +1177,8 @@ export default class FlowmapSelectors<
     getInCircleSize: (locationId: string | number) => number,
     getOutCircleSize: (locationId: string | number) => number,
     flowThicknessScale: ScaleLinear<number, number, never> | undefined,
-    animationEnabled: boolean,
+    viewport: ViewportProps,
+    flowLinesRenderingMode: FlowLinesRenderingMode,
     locationLabelsEnabled: boolean,
   ): LayersData {
     if (!locations) locations = [];
@@ -1187,7 +1200,7 @@ export default class FlowmapSelectors<
     const flowColorScale = getFlowColorScale(
       flowmapColors,
       flowMagnitudeExtent,
-      false,
+      flowLinesRenderingMode === 'animated-straight',
     );
 
     // Using a generator here helps to avoid creating intermediary arrays
@@ -1278,16 +1291,30 @@ export default class FlowmapSelectors<
       })(),
     );
 
-    const staggeringValues = animationEnabled
-      ? Float32Array.from(
-          (function* () {
-            for (const f of flows) {
-              // @ts-ignore
-              yield new alea(`${getFlowOriginId(f)}-${getFlowDestId(f)}`)();
-            }
-          })(),
-        )
-      : undefined;
+    const staggeringValues =
+      flowLinesRenderingMode === 'animated-straight'
+        ? Float32Array.from(
+            (function* () {
+              for (const f of flows) {
+                // @ts-ignore
+                yield new alea(`${getFlowOriginId(f)}-${getFlowDestId(f)}`)();
+              }
+            })(),
+          )
+        : undefined;
+
+    const curveOffsets =
+      flowLinesRenderingMode === 'curved'
+        ? calculateCurveOffsets(
+            flows,
+            viewport,
+            locationsById,
+            getFlowOriginId,
+            getFlowDestId,
+            getLocationLon,
+            getLocationLat,
+          )
+        : undefined;
 
     return {
       circleAttributes: {
@@ -1310,6 +1337,9 @@ export default class FlowmapSelectors<
           ...(staggeringValues
             ? {getStaggering: {value: staggeringValues, size: 1}}
             : {}),
+          ...(curveOffsets
+            ? {getCurveOffset: {value: curveOffsets, size: 1}}
+            : {}),
         },
       },
       ...(locationLabelsEnabled
@@ -1502,6 +1532,7 @@ export function getFlowLineAttributesByIndex(
 ): FlowLinesLayerAttributes {
   const {
     getColor,
+    getCurveOffset,
     getEndpointOffsets,
     getSourcePosition,
     getTargetPosition,
@@ -1545,6 +1576,122 @@ export function getFlowLineAttributesByIndex(
             },
           }
         : undefined),
+      ...(getCurveOffset
+        ? {
+            getCurveOffset: {
+              value: getCurveOffset.value.subarray(index, index + 1),
+              size: 1,
+            },
+          }
+        : undefined),
     },
   };
 }
+
+type FlowLineScreenGeometry = {
+  index: number;
+  originId: string | number;
+  destId: string | number;
+  sx: number;
+  sy: number;
+  tx: number;
+  ty: number;
+  chordLengthPx: number;
+};
+
+function calculateCurveOffsets<L, F>(
+  flows: (F | AggregateFlow)[],
+  viewport: ViewportProps,
+  locationsById: Map<string | number, L | ClusterNode> | undefined,
+  getFlowOriginId: (flow: F | AggregateFlow) => string | number,
+  getFlowDestId: (flow: F | AggregateFlow) => string | number,
+  getLocationLon: (location: L | ClusterNode) => number,
+  getLocationLat: (location: L | ClusterNode) => number,
+): Float32Array {
+  const curveOffsets = new Float32Array(flows.length);
+  const corridorBuckets = new Map<string, FlowLineScreenGeometry[]>();
+  const worldScale = 512 * Math.pow(2, viewport.zoom ?? 0);
+
+  flows.forEach((flow, index) => {
+    const originId = getFlowOriginId(flow);
+    const destId = getFlowDestId(flow);
+    const origin = locationsById?.get(originId);
+    const dest = locationsById?.get(destId);
+    if (!origin || !dest) {
+      return;
+    }
+
+    const sourceLon = getLocationLon(origin);
+    const sourceLat = getLocationLat(origin);
+    const targetLon = getLocationLon(dest);
+    const targetLat = getLocationLat(dest);
+    const sx = lngX(sourceLon) * worldScale;
+    const sy = latY(sourceLat) * worldScale;
+    const tx = lngX(targetLon) * worldScale;
+    const ty = latY(targetLat) * worldScale;
+
+    let corridorSourceX = sx;
+    let corridorSourceY = sy;
+    let corridorTargetX = tx;
+    let corridorTargetY = ty;
+    if (
+      corridorSourceX > corridorTargetX ||
+      (corridorSourceX === corridorTargetX && corridorSourceY > corridorTargetY)
+    ) {
+      [corridorSourceX, corridorTargetX] = [corridorTargetX, corridorSourceX];
+      [corridorSourceY, corridorTargetY] = [corridorTargetY, corridorSourceY];
+    }
+
+    const dx = corridorTargetX - corridorSourceX;
+    const dy = corridorTargetY - corridorSourceY;
+    const chordLengthPx = Math.hypot(dx, dy);
+    if (!isFinite(chordLengthPx) || chordLengthPx < 1) {
+      return;
+    }
+
+    const angle = ((Math.atan2(dy, dx) % Math.PI) + Math.PI) % Math.PI;
+    const signedDistance =
+      (corridorSourceX * corridorTargetY - corridorSourceY * corridorTargetX) /
+      chordLengthPx;
+    const key = [
+      Math.round(angle / ((6 * Math.PI) / 180)),
+      Math.round(signedDistance / 18),
+      Math.round(chordLengthPx / 24),
+    ].join(':');
+
+    const bucket = corridorBuckets.get(key) ?? [];
+    bucket.push({index, originId, destId, sx, sy, tx, ty, chordLengthPx});
+    corridorBuckets.set(key, bucket);
+  });
+
+  corridorBuckets.forEach((bucket) => {
+    bucket
+      .sort((a, b) => {
+        const originCompare = compareIds(a.originId, b.originId);
+        if (originCompare !== 0) return originCompare;
+        const destCompare = compareIds(a.destId, b.destId);
+        if (destCompare !== 0) return destCompare;
+        return a.index - b.index;
+      })
+      .forEach((entry, bucketIndex) => {
+        const maxOffsetPx = Math.min(72, entry.chordLengthPx * 0.35);
+        curveOffsets[entry.index] = Math.min(
+          maxOffsetPx,
+          (bucketIndex + 1) * 18,
+        );
+      });
+  });
+
+  return curveOffsets;
+}
+
+function compareIds(a: string | number, b: string | number): number {
+  if (typeof a === 'number' && typeof b === 'number') {
+    return a - b;
+  }
+  const aString = String(a);
+  const bString = String(b);
+  if (aString < bString) return -1;
+  if (aString > bString) return 1;
+  return 0;
+}

package/src/FlowmapState.ts

@@ -4,7 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {LocationFilterMode, ViewportProps} from './types';
+import {
+  FlowLinesRenderingMode,
+  LocationFilterMode,
+  ViewportProps,
+} from './types';
 
 export type FlowEndpointsInViewportMode = 'any' | 'both';
 
@@ -15,7 +19,7 @@ export interface FilterState {
 }
 
 export interface SettingsState {
-  animationEnabled: boolean;
+  flowLinesRenderingMode: FlowLinesRenderingMode;
   fadeEnabled: boolean;
   fadeOpacityEnabled: boolean;
   locationsEnabled: boolean;

package/src/colors.ts

@@ -35,6 +35,7 @@ import {scalePow, scaleSequential, scaleSequentialPow} from 'd3-scale';
 import {interpolateBasis, interpolateRgbBasis} from 'd3-interpolate';
 import {color as d3color, hcl, rgb as colorRgb} from 'd3-color';
 import {SettingsState} from './FlowmapState';
+import {FlowLinesRenderingMode} from './types';
 
 const DEFAULT_OUTLINE_COLOR = '#fff';
 const DEFAULT_DIMMED_OPACITY = 0.4;
@@ -347,10 +348,16 @@ export function getFlowmapColors(settings: SettingsState): Colors | DiffColors {
     settings.fadeEnabled,
     settings.fadeOpacityEnabled,
     settings.fadeAmount,
-    settings.animationEnabled,
+    isAnimatedFlowLinesMode(settings.flowLinesRenderingMode),
   );
 }
 
+function isAnimatedFlowLinesMode(
+  flowLinesRenderingMode: FlowLinesRenderingMode,
+): boolean {
+  return flowLinesRenderingMode === 'animated-straight';
+}
+
 export function getColors(
   diffMode: boolean,
   colorScheme: string | string[] | undefined,

package/src/selector-functions.ts

@@ -30,6 +30,14 @@ export const getViewportBoundingBox = (
   return [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]];
 };
 
+export const makeViewportProjector = (viewport: ViewportProps) => {
+  const mercatorViewport = new WebMercatorViewport(viewport);
+  return (coords: [number, number]): [number, number] => {
+    const [x, y] = mercatorViewport.project(coords);
+    return [x, y];
+  };
+};
+
 export const getFlowThicknessScale = (
   magnitudeExtent: [number, number] | undefined,
 ) => {

package/src/types.ts

@@ -21,6 +21,10 @@ export interface ViewState {
 
 export type FlowAccessor<F, T> = (flow: F) => T; // objectInfo?: AccessorObjectInfo,
 export type LocationAccessor<L, T> = (location: L) => T;
+export type FlowLinesRenderingMode =
+  | 'straight'
+  | 'animated-straight'
+  | 'curved';
 
 export interface FlowAccessors<F> {
   getFlowOriginId: FlowAccessor<F, string | number>;
@@ -160,6 +164,7 @@ export interface FlowLinesLayerAttributes {
     getColor: LayersDataAttrValues<Uint8Array>;
     getEndpointOffsets: LayersDataAttrValues<Float32Array>;
     getStaggering?: LayersDataAttrValues<Float32Array>;
+    getCurveOffset?: LayersDataAttrValues<Float32Array>;
   };
 }