@unovis/ts 1.1.1-beta.7 → 1.1.1-beta.8

package/components/leaflet-flow-map/config.d.ts

@@ -0,0 +1,46 @@
+import { LeafletMapConfig, LeafletMapConfigInterface } from "../leaflet-map/config";
+import { ColorAccessor, NumericAccessor } from "../../types/accessor";
+import { GenericDataRecord } from "../../types/data";
+export interface LeafletFlowMapConfigInterface<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord> extends LeafletMapConfigInterface<PointDatum> {
+    /** Flow source point longitude accessor function or value. Default:.`f => f.sourceLongitude` */
+    sourceLongitude?: NumericAccessor<FlowDatum>;
+    /** Flow source point latitude accessor function or value. Default: `f => f.sourceLatitude` */
+    sourceLatitude?: NumericAccessor<FlowDatum>;
+    /** Flow target point longitude accessor function or value. Default: `f => f.targetLongitude` */
+    targetLongitude?: NumericAccessor<FlowDatum>;
+    /** Flow target point latitude accessor function or value. Default: `f => f.targetLatitude` */
+    targetLatitude?: NumericAccessor<FlowDatum>;
+    /** Flow source point radius accessor function or value. Default: `3` */
+    sourcePointRadius?: NumericAccessor<FlowDatum>;
+    /** Source point color accessor function or value. Default: `'#88919f'` */
+    sourcePointColor?: ColorAccessor<FlowDatum>;
+    /** Flow particle color accessor function or value. Default: `'#949dad'` */
+    flowParticleColor?: ColorAccessor<FlowDatum>;
+    /** Flow particle radius accessor function or value. Default: `1.1` */
+    flowParticleRadius?: NumericAccessor<FlowDatum>;
+    /** Flow particle speed accessor function or value. The unit is arbitrary, recommended range is 0 – 0.2. Default: `0.07` */
+    flowParticleSpeed?: NumericAccessor<FlowDatum>;
+    /** Flow particle density accessor function or value on the range of [0, 1]. Default: `0.6` */
+    flowParticleDensity?: NumericAccessor<FlowDatum>;
+    /** Flow source point click callback function. Default: `undefined` */
+    onSourcePointClick?: (f: FlowDatum, x: number, y: number, event: MouseEvent) => void;
+    /** Flow source point mouse over callback function. Default: `undefined` */
+    onSourcePointMouseEnter?: (f: FlowDatum, x: number, y: number, event: MouseEvent) => void;
+    /** Flow source point mouse leave callback function. Default: `undefined` */
+    onSourcePointMouseLeave?: (f: FlowDatum, event: MouseEvent) => void;
+}
+export declare class LeafletFlowMapConfig<PointDatum extends GenericDataRecord = GenericDataRecord, FlowDatum extends GenericDataRecord = GenericDataRecord> extends LeafletMapConfig<PointDatum> implements LeafletFlowMapConfigInterface<PointDatum, FlowDatum> {
+    sourceLongitude: (f: FlowDatum) => number;
+    sourceLatitude: (f: FlowDatum) => number;
+    targetLongitude: (f: FlowDatum) => number;
+    targetLatitude: (f: FlowDatum) => number;
+    sourcePointRadius: number;
+    sourcePointColor: string;
+    flowParticleColor: string;
+    flowParticleRadius: number;
+    flowParticleSpeed: number;
+    flowParticleDensity: number;
+    onSourcePointClick: any;
+    onSourcePointMouseEnter: any;
+    onSourcePointMouseLeave: any;
+}

package/components/leaflet-flow-map/config.js

@@ -0,0 +1,25 @@
+import { LeafletMapConfig } from '../leaflet-map/config.js';
+
+/* eslint-disable dot-notation */
+class LeafletFlowMapConfig extends LeafletMapConfig {
+    constructor() {
+        super(...arguments);
+        this.sourceLongitude = (f) => f['sourceLongitude'];
+        this.sourceLatitude = (f) => f['sourceLatitude'];
+        this.targetLongitude = (f) => f['targetLongitude'];
+        this.targetLatitude = (f) => f['targetLatitude'];
+        this.sourcePointRadius = 3;
+        this.sourcePointColor = '#88919f';
+        this.flowParticleColor = '#949dad';
+        this.flowParticleRadius = 1.1;
+        this.flowParticleSpeed = 0.07;
+        this.flowParticleDensity = 0.6;
+        // Events
+        this.onSourcePointClick = undefined;
+        this.onSourcePointMouseEnter = undefined;
+        this.onSourcePointMouseLeave = undefined;
+    }
+}
+
+export { LeafletFlowMapConfig };
+//# sourceMappingURL=config.js.map

package/components/leaflet-flow-map/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/leaflet-flow-map/config.ts"],"sourcesContent":["/* eslint-disable dot-notation */\n\n// Config\nimport { LeafletMapConfig, LeafletMapConfigInterface } from 'components/leaflet-map/config'\n\n// Types\nimport { ColorAccessor, NumericAccessor } from 'types/accessor'\nimport { GenericDataRecord } from 'types/data'\n\nexport interface LeafletFlowMapConfigInterface<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord> extends LeafletMapConfigInterface<PointDatum> {\n  /** Flow source point longitude accessor function or value. Default:.`f => f.sourceLongitude` */\n  sourceLongitude?: NumericAccessor<FlowDatum>;\n  /** Flow source point latitude accessor function or value. Default: `f => f.sourceLatitude` */\n  sourceLatitude?: NumericAccessor<FlowDatum>;\n  /** Flow target point longitude accessor function or value. Default: `f => f.targetLongitude` */\n  targetLongitude?: NumericAccessor<FlowDatum>;\n  /** Flow target point latitude accessor function or value. Default: `f => f.targetLatitude` */\n  targetLatitude?: NumericAccessor<FlowDatum>;\n  /** Flow source point radius accessor function or value. Default: `3` */\n  sourcePointRadius?: NumericAccessor<FlowDatum>;\n  /** Source point color accessor function or value. Default: `'#88919f'` */\n  sourcePointColor?: ColorAccessor<FlowDatum>;\n  /** Flow particle color accessor function or value. Default: `'#949dad'` */\n  flowParticleColor?: ColorAccessor<FlowDatum>;\n  /** Flow particle radius accessor function or value. Default: `1.1` */\n  flowParticleRadius?: NumericAccessor<FlowDatum>;\n  /** Flow particle speed accessor function or value. The unit is arbitrary, recommended range is 0 – 0.2. Default: `0.07` */\n  flowParticleSpeed?: NumericAccessor<FlowDatum>;\n  /** Flow particle density accessor function or value on the range of [0, 1]. Default: `0.6` */\n  flowParticleDensity?: NumericAccessor<FlowDatum>;\n\n  // Events\n  /** Flow source point click callback function. Default: `undefined` */\n  onSourcePointClick?: (f: FlowDatum, x: number, y: number, event: MouseEvent) => void;\n  /** Flow source point mouse over callback function. Default: `undefined` */\n  onSourcePointMouseEnter?: (f: FlowDatum, x: number, y: number, event: MouseEvent) => void;\n  /** Flow source point mouse leave callback function. Default: `undefined` */\n  onSourcePointMouseLeave?: (f: FlowDatum, event: MouseEvent) => void;\n}\n\nexport class LeafletFlowMapConfig<\n  PointDatum extends GenericDataRecord = GenericDataRecord,\n  FlowDatum extends GenericDataRecord = GenericDataRecord,\n> extends LeafletMapConfig<PointDatum> implements LeafletFlowMapConfigInterface<PointDatum, FlowDatum> {\n  sourceLongitude = (f: FlowDatum): number => f['sourceLongitude'] as number\n  sourceLatitude = (f: FlowDatum): number => f['sourceLatitude'] as number\n  targetLongitude = (f: FlowDatum): number => f['targetLongitude'] as number\n  targetLatitude = (f: FlowDatum): number => f['targetLatitude'] as number\n  sourcePointRadius = 3\n  sourcePointColor = '#88919f'\n  flowParticleColor = '#949dad'\n  flowParticleRadius = 1.1\n  flowParticleSpeed = 0.07\n  flowParticleDensity = 0.6\n\n  // Events\n  onSourcePointClick = undefined\n  onSourcePointMouseEnter = undefined\n  onSourcePointMouseLeave = undefined\n}\n"],"names":[],"mappings":";;AAAA;AAwCM,MAAO,oBAGX,SAAQ,gBAA4B,CAAA;AAHtC,IAAA,WAAA,GAAA;;QAIE,IAAe,CAAA,eAAA,GAAG,CAAC,CAAY,KAAa,CAAC,CAAC,iBAAiB,CAAW,CAAA;QAC1E,IAAc,CAAA,cAAA,GAAG,CAAC,CAAY,KAAa,CAAC,CAAC,gBAAgB,CAAW,CAAA;QACxE,IAAe,CAAA,eAAA,GAAG,CAAC,CAAY,KAAa,CAAC,CAAC,iBAAiB,CAAW,CAAA;QAC1E,IAAc,CAAA,cAAA,GAAG,CAAC,CAAY,KAAa,CAAC,CAAC,gBAAgB,CAAW,CAAA;QACxE,IAAiB,CAAA,iBAAA,GAAG,CAAC,CAAA;QACrB,IAAgB,CAAA,gBAAA,GAAG,SAAS,CAAA;QAC5B,IAAiB,CAAA,iBAAA,GAAG,SAAS,CAAA;QAC7B,IAAkB,CAAA,kBAAA,GAAG,GAAG,CAAA;QACxB,IAAiB,CAAA,iBAAA,GAAG,IAAI,CAAA;QACxB,IAAmB,CAAA,mBAAA,GAAG,GAAG,CAAA;;QAGzB,IAAkB,CAAA,kBAAA,GAAG,SAAS,CAAA;QAC9B,IAAuB,CAAA,uBAAA,GAAG,SAAS,CAAA;QACnC,IAAuB,CAAA,uBAAA,GAAG,SAAS,CAAA;KACpC;AAAA;;;;"}

package/components/leaflet-flow-map/index.d.ts

@@ -0,0 +1,52 @@
+import { ComponentCore } from "../../core/component";
+import { ComponentType } from "../../types/component";
+import { GenericDataRecord } from "../../types/data";
+import { LeafletFlowMapConfig, LeafletFlowMapConfigInterface } from './config';
+import { Particle } from './types';
+export declare class LeafletFlowMap<PointDatum extends GenericDataRecord, FlowDatum extends GenericDataRecord> extends ComponentCore<{
+    points: PointDatum[];
+    flows?: FlowDatum[];
+}, LeafletFlowMapConfig<PointDatum, FlowDatum>, LeafletFlowMapConfigInterface<PointDatum, FlowDatum>> {
+    static selectors: typeof import("../leaflet-map/style");
+    type: ComponentType;
+    private leafletMap;
+    private leafletMapInstance;
+    private flows;
+    private points;
+    private hoveredSourcePoint;
+    private onCanvasMouseMoveBound;
+    private onCanvasClickBound;
+    private canvasElement;
+    config: LeafletFlowMapConfig<PointDatum, FlowDatum>;
+    private panningOffset;
+    private resizeObserver;
+    private renderer;
+    particles: Particle[];
+    constructor(container: HTMLDivElement, config?: LeafletFlowMapConfigInterface<PointDatum, FlowDatum>, data?: {
+        points: PointDatum[];
+        flows?: FlowDatum[];
+    });
+    setConfig(config: LeafletFlowMapConfigInterface<PointDatum, FlowDatum>): void;
+    setData(data: {
+        points: PointDatum[];
+        flows?: FlowDatum[];
+    }): void;
+    render(): void;
+    initParticles(): void;
+    private addParticle;
+    private clearParticles;
+    private animate;
+    private getPointByScreenPos;
+    private onCanvasMouseMove;
+    private onCanvasClick;
+    private onMapMove;
+    destroy(): void;
+    selectPointById(id: string, centerPoint?: boolean): void;
+    getSelectedPointId(): string | number | undefined;
+    unselectPoint(): void;
+    zoomToPointById(id: string, selectNode?: boolean, customZoomLevel?: number): void;
+    zoomIn(increment?: number): void;
+    zoomOut(increment?: number): void;
+    setZoom(zoomLevel: number): void;
+    fitView(): void;
+}

package/components/leaflet-flow-map/index.js

@@ -0,0 +1,220 @@
+import { select } from 'd3-selection';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { ComponentCore } from '../../core/component/index.js';
+import { ComponentType } from '../../types/component.js';
+import { throttle, getNumber } from '../../utils/data.js';
+import { getDataLatLngBounds } from '../../utils/map.js';
+import { getColor } from '../../utils/color.js';
+import { LeafletMap } from '../leaflet-map/index.js';
+import { LeafletFlowMapConfig } from './config.js';
+
+class LeafletFlowMap extends ComponentCore {
+    constructor(container, config, data) {
+        var _a;
+        super(ComponentType.HTML);
+        this.type = ComponentType.HTML;
+        this.flows = [];
+        this.points = [];
+        this.onCanvasMouseMoveBound = throttle(this.onCanvasMouseMove.bind(this), 60);
+        this.onCanvasClickBound = this.onCanvasClick.bind(this);
+        this.config = new LeafletFlowMapConfig();
+        this.panningOffset = { x: 0, y: 0 };
+        this.particles = [];
+        this.leafletMap = new LeafletMap(container, config, (_a = data === null || data === void 0 ? void 0 : data.points) !== null && _a !== void 0 ? _a : []);
+        const rendererImportPromise = import('./renderer.js');
+        Promise.all([rendererImportPromise, this.leafletMap.getLeafletInstancePromise()])
+            .then((imports) => {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const [{ PointRenderer }, leaflet] = imports;
+            this.leafletMapInstance = leaflet;
+            const canvasContainer = this.leafletMapInstance.getPanes().overlayPane;
+            // Initialize renderer
+            const canvas = select(canvasContainer).insert('canvas', ':first-child');
+            this.canvasElement = canvas.node();
+            this.renderer = new PointRenderer(canvasContainer, container.offsetWidth, container.offsetHeight, this.canvasElement);
+            this.canvasElement.addEventListener('mousemove', this.onCanvasMouseMoveBound);
+            this.canvasElement.addEventListener('click', this.onCanvasClickBound);
+            this.leafletMap._onMapMoveEndInternal = this.onMapMove.bind(this);
+            // Update renderer size on container resize
+            this.resizeObserver = new ResizeObserver(() => {
+                this.renderer.setSize(container.offsetWidth, container.offsetHeight);
+            });
+            this.resizeObserver.observe(container);
+            if (config)
+                this.setConfig(config);
+            if (data)
+                this.setData(data);
+            this.animate();
+        });
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        this.leafletMap.setConfig(Object.assign(Object.assign({}, config), { clusteringDistance: 0 }));
+    }
+    setData(data) {
+        super.setData(data);
+        this.flows = data.flows;
+        this.points = data.points;
+        this.initParticles();
+        this.leafletMap.setData(this.points);
+        this.render();
+    }
+    render() {
+        super.render();
+    }
+    initParticles() {
+        var _a;
+        this.clearParticles();
+        for (const flow of this.flows) {
+            const source = {
+                lat: getNumber(flow, this.config.sourceLatitude),
+                lon: getNumber(flow, this.config.sourceLongitude),
+            };
+            const target = {
+                lat: getNumber(flow, this.config.targetLatitude),
+                lon: getNumber(flow, this.config.targetLongitude),
+            };
+            // Add source particle, showing the origin of the flow
+            const sourcePointRadius = getNumber(flow, this.config.sourcePointRadius);
+            const sourcePointColor = getColor(flow, this.config.sourcePointColor);
+            this.addParticle(source, source, source, 0, sourcePointRadius, sourcePointColor);
+            // Add flow particles
+            const dist = Math.sqrt(Math.pow((target.lat - source.lat), 2) + Math.pow((target.lon - source.lon), 2));
+            const numParticles = Math.round(dist * getNumber(flow, this.config.flowParticleDensity));
+            const velocity = getNumber(flow, this.config.flowParticleSpeed);
+            const r = getNumber(flow, this.config.flowParticleRadius);
+            const color = getColor(flow, this.config.flowParticleColor);
+            for (let i = 0; i < numParticles; i += 1) {
+                const location = {
+                    lat: source.lat + (target.lat - source.lat) * i / numParticles,
+                    lon: source.lon + (target.lon - source.lon) * i / numParticles,
+                };
+                this.addParticle(source, target, location, velocity, r, color);
+            }
+        }
+        (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.update(this.particles);
+    }
+    addParticle(source, target, location = source, velocity = 0.05, r = 0.75, color) {
+        const x = 0;
+        const y = 0;
+        this.particles.push({ x, y, source, target, location, velocity, r, color });
+    }
+    clearParticles() {
+        this.particles = [];
+    }
+    animate() {
+        const map = this.leafletMapInstance;
+        requestAnimationFrame(() => {
+            const zoomLevel = map === null || map === void 0 ? void 0 : map.getZoom();
+            for (const p of this.particles) {
+                const fullDist = Math.sqrt(Math.pow((p.target.lat - p.source.lat), 2) + Math.pow((p.target.lon - p.source.lon), 2));
+                const remainedDist = Math.sqrt(Math.pow((p.target.lat - p.location.lat), 2) + Math.pow((p.target.lon - p.location.lon), 2));
+                const angle = Math.atan2(p.target.lat - p.source.lat, p.target.lon - p.source.lon);
+                p.location.lat += p.velocity * Math.sin(angle);
+                p.location.lon += p.velocity * Math.cos(angle);
+                if ((((p.target.lat > p.source.lat) && (p.location.lat > p.target.lat)) || ((p.target.lon > p.source.lon) && (p.location.lon > p.target.lon))) ||
+                    (((p.target.lat < p.source.lat) && (p.location.lat < p.target.lat)) || ((p.target.lon < p.source.lon) && (p.location.lon < p.target.lon)))) {
+                    p.location.lat = p.source.lat;
+                    p.location.lon = p.source.lon;
+                }
+                const pos = map === null || map === void 0 ? void 0 : map.latLngToLayerPoint([p.location.lat, p.location.lon]);
+                const orthogonalArcShift = -(Math.pow(zoomLevel, 2) * fullDist / 8) * Math.cos(Math.PI / 2 * (fullDist / 2 - remainedDist) / (fullDist / 2)) || 0;
+                p.x = (pos === null || pos === void 0 ? void 0 : pos.x) - this.panningOffset.x;
+                p.y = (pos === null || pos === void 0 ? void 0 : pos.y) + orthogonalArcShift - this.panningOffset.y;
+            }
+            this.renderer.updatePointsPosition(this.particles);
+            this.renderer.draw();
+            this.animate();
+        });
+    }
+    getPointByScreenPos(x, y) {
+        const map = this.leafletMapInstance;
+        for (const flow of this.flows) {
+            const lat = getNumber(flow, this.config.sourceLatitude);
+            const lon = getNumber(flow, this.config.sourceLongitude);
+            const r = getNumber(flow, this.config.sourcePointRadius);
+            const pos = map === null || map === void 0 ? void 0 : map.latLngToLayerPoint([lat, lon]);
+            const posX = pos.x - this.panningOffset.x;
+            const posY = pos.y - this.panningOffset.y;
+            if ((Math.abs(x - posX) < r) && (Math.abs(y - posY) < r)) {
+                return [flow, posX, posY];
+            }
+        }
+        return [];
+    }
+    onCanvasMouseMove(event) {
+        var _a, _b;
+        const { config } = this;
+        this.canvasElement.style.removeProperty('cursor');
+        const [hoveredPoint, x, y] = this.getPointByScreenPos(event.offsetX, event.offsetY);
+        if (hoveredPoint)
+            this.canvasElement.style.cursor = 'default';
+        if (this.hoveredSourcePoint !== hoveredPoint) {
+            if (hoveredPoint)
+                (_a = config.onSourcePointMouseEnter) === null || _a === void 0 ? void 0 : _a.call(config, hoveredPoint, x, y, event);
+            if (this.hoveredSourcePoint)
+                (_b = config.onSourcePointMouseLeave) === null || _b === void 0 ? void 0 : _b.call(config, this.hoveredSourcePoint, event);
+            this.hoveredSourcePoint = hoveredPoint;
+        }
+    }
+    onCanvasClick(event) {
+        var _a;
+        const { config } = this;
+        const [clickedPoint, x, y] = this.getPointByScreenPos(event.offsetX, event.offsetY);
+        if (clickedPoint)
+            (_a = config.onSourcePointClick) === null || _a === void 0 ? void 0 : _a.call(config, clickedPoint, x, y, event);
+    }
+    onMapMove(leaflet) {
+        const shift = leaflet.containerPointToLayerPoint([0, 0]);
+        this.panningOffset.x = shift.x;
+        this.panningOffset.y = shift.y;
+        this.canvasElement.style.transform = `translate(${shift.x}px, ${shift.y}px)`;
+    }
+    destroy() {
+        var _a, _b, _c, _d;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.renderer) === null || _b === void 0 ? void 0 : _b.destroy();
+        (_c = this.canvasElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('mousemove', this.onCanvasMouseMoveBound);
+        (_d = this.canvasElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('click', this.onCanvasClickBound);
+        super.destroy();
+    }
+    // Leaflet Map useful methods
+    selectPointById(id, centerPoint = false) { this.leafletMap.selectPointById(id, centerPoint); }
+    getSelectedPointId() { return this.leafletMap.getSelectedPointId(); }
+    unselectPoint() { this.leafletMap.unselectPoint(); }
+    zoomToPointById(id, selectNode = false, customZoomLevel) { this.leafletMap.zoomToPointById(id, selectNode, customZoomLevel); }
+    zoomIn(increment = 1) { this.leafletMap.zoomIn(increment); }
+    zoomOut(increment = 1) { this.leafletMap.zoomOut(increment); }
+    setZoom(zoomLevel) { this.leafletMap.setZoom(zoomLevel); }
+    fitView() {
+        const points = [];
+        for (const point of this.points) {
+            points.push({
+                lat: getNumber(point, this.config.pointLatitude),
+                lon: getNumber(point, this.config.pointLongitude),
+            });
+        }
+        for (const flow of this.flows) {
+            const source = {
+                lat: getNumber(flow, this.config.sourceLatitude),
+                lon: getNumber(flow, this.config.sourceLongitude),
+            };
+            const target = {
+                lat: getNumber(flow, this.config.targetLatitude),
+                lon: getNumber(flow, this.config.targetLongitude),
+            };
+            points.push(source);
+            points.push(target);
+        }
+        const boundsArray = getDataLatLngBounds(points, d => d.lat, d => d.lon, 0);
+        const bounds = {
+            northEast: { lat: boundsArray[0][0], lng: boundsArray[1][1] },
+            southWest: { lat: boundsArray[1][0], lng: boundsArray[0][1] },
+        };
+        this.leafletMap.fitToBounds(bounds);
+    }
+}
+LeafletFlowMap.selectors = LeafletMap.selectors;
+
+export { LeafletFlowMap };
+//# sourceMappingURL=index.js.map

package/components/leaflet-flow-map/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/leaflet-flow-map/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { ResizeObserver } from '@juggle/resize-observer'\n\nimport { ComponentCore } from 'core/component'\nimport { ComponentType } from 'types/component'\n\n// Utils\nimport { getNumber, throttle } from 'utils/data'\nimport { getDataLatLngBounds } from 'utils/map'\nimport { getColor } from 'utils/color'\n\n// Components\nimport { LeafletMap } from 'components/leaflet-map'\n\n// Types\nimport { Bounds } from 'components/leaflet-map/types'\nimport { GenericDataRecord } from 'types/data'\n\n// Config\nimport { LeafletFlowMapConfig, LeafletFlowMapConfigInterface } from './config'\n\n// Local Types\nimport { LatLon, Particle } from './types'\n\n// Renderer\nimport { PointRenderer as PointRendererType } from './renderer'\n\nexport class LeafletFlowMap<\n  PointDatum extends GenericDataRecord,\n  FlowDatum extends GenericDataRecord,\n> extends ComponentCore<\n  { points: PointDatum[]; flows?: FlowDatum[] },\n  LeafletFlowMapConfig<PointDatum, FlowDatum>,\n  LeafletFlowMapConfigInterface<PointDatum, FlowDatum>\n  > {\n  static selectors = LeafletMap.selectors\n  type = ComponentType.HTML\n  private leafletMap: LeafletMap<PointDatum>\n  private leafletMapInstance: L.Map\n  private flows: FlowDatum[] = []\n  private points: PointDatum[] = []\n  private hoveredSourcePoint: FlowDatum | undefined\n  private onCanvasMouseMoveBound = throttle(this.onCanvasMouseMove.bind(this), 60)\n  private onCanvasClickBound = this.onCanvasClick.bind(this)\n  private canvasElement: HTMLCanvasElement | undefined\n  config: LeafletFlowMapConfig<PointDatum, FlowDatum> = new LeafletFlowMapConfig()\n  private panningOffset = { x: 0, y: 0 }\n\n  private resizeObserver: ResizeObserver | undefined\n  private renderer: PointRendererType | undefined\n  particles: Particle[] = []\n\n  constructor (container: HTMLDivElement, config?: LeafletFlowMapConfigInterface<PointDatum, FlowDatum>, data?: { points: PointDatum[]; flows?: FlowDatum[] }) {\n    super(ComponentType.HTML)\n\n    this.leafletMap = new LeafletMap<PointDatum>(container, config, data?.points ?? [])\n\n    const rendererImportPromise = import('./renderer')\n    Promise.all([rendererImportPromise, this.leafletMap.getLeafletInstancePromise()])\n      .then((imports) => {\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        const [{ PointRenderer }, leaflet] = imports\n\n        this.leafletMapInstance = leaflet\n        const canvasContainer = this.leafletMapInstance.getPanes().overlayPane as HTMLDivElement\n\n        // Initialize renderer\n        const canvas = select(canvasContainer).insert('canvas', ':first-child')\n        this.canvasElement = canvas.node()\n        this.renderer = new PointRenderer(canvasContainer, container.offsetWidth, container.offsetHeight, this.canvasElement)\n        this.canvasElement.addEventListener('mousemove', this.onCanvasMouseMoveBound)\n        this.canvasElement.addEventListener('click', this.onCanvasClickBound)\n\n        this.leafletMap._onMapMoveEndInternal = this.onMapMove.bind(this)\n\n        // Update renderer size on container resize\n        this.resizeObserver = new ResizeObserver(() => {\n          this.renderer.setSize(container.offsetWidth, container.offsetHeight)\n        })\n        this.resizeObserver.observe(container)\n\n        if (config) this.setConfig(config)\n        if (data) this.setData(data)\n        this.animate()\n      })\n  }\n\n  setConfig (config: LeafletFlowMapConfigInterface<PointDatum, FlowDatum>): void {\n    super.setConfig(config)\n    this.leafletMap.setConfig({ ...config, clusteringDistance: 0 })\n  }\n\n  setData (data: { points: PointDatum[]; flows?: FlowDatum[] }): void {\n    super.setData(data)\n    this.flows = data.flows\n    this.points = data.points\n    this.initParticles()\n    this.leafletMap.setData(this.points)\n    this.render()\n  }\n\n  render (): void {\n    super.render()\n  }\n\n  initParticles (): void {\n    this.clearParticles()\n    for (const flow of this.flows) {\n      const source = {\n        lat: getNumber(flow, this.config.sourceLatitude),\n        lon: getNumber(flow, this.config.sourceLongitude),\n      }\n\n      const target = {\n        lat: getNumber(flow, this.config.targetLatitude),\n        lon: getNumber(flow, this.config.targetLongitude),\n      }\n\n      // Add source particle, showing the origin of the flow\n      const sourcePointRadius = getNumber(flow, this.config.sourcePointRadius)\n      const sourcePointColor = getColor(flow, this.config.sourcePointColor)\n      this.addParticle(source, source, source, 0, sourcePointRadius, sourcePointColor)\n\n      // Add flow particles\n      const dist = Math.sqrt((target.lat - source.lat) ** 2 + (target.lon - source.lon) ** 2)\n      const numParticles = Math.round(dist * getNumber(flow, this.config.flowParticleDensity))\n      const velocity = getNumber(flow, this.config.flowParticleSpeed)\n      const r = getNumber(flow, this.config.flowParticleRadius)\n      const color = getColor(flow, this.config.flowParticleColor)\n      for (let i = 0; i < numParticles; i += 1) {\n        const location = {\n          lat: source.lat + (target.lat - source.lat) * i / numParticles,\n          lon: source.lon + (target.lon - source.lon) * i / numParticles,\n        }\n        this.addParticle(source, target, location, velocity, r, color)\n      }\n    }\n\n    this.renderer?.update(this.particles)\n  }\n\n  private addParticle (source: LatLon, target: LatLon, location = source, velocity = 0.05, r = 0.75, color?: string): void {\n    const x = 0\n    const y = 0\n    this.particles.push({ x, y, source, target, location, velocity, r, color })\n  }\n\n  private clearParticles (): void {\n    this.particles = []\n  }\n\n  private animate (): void {\n    const map = this.leafletMapInstance\n\n    requestAnimationFrame(() => {\n      const zoomLevel = map?.getZoom()\n      for (const p of this.particles) {\n        const fullDist = Math.sqrt((p.target.lat - p.source.lat) ** 2 + (p.target.lon - p.source.lon) ** 2)\n        const remainedDist = Math.sqrt((p.target.lat - p.location.lat) ** 2 + (p.target.lon - p.location.lon) ** 2)\n        const angle = Math.atan2(p.target.lat - p.source.lat, p.target.lon - p.source.lon)\n        p.location.lat += p.velocity * Math.sin(angle)\n        p.location.lon += p.velocity * Math.cos(angle)\n\n        if (\n          (((p.target.lat > p.source.lat) && (p.location.lat > p.target.lat)) || ((p.target.lon > p.source.lon) && (p.location.lon > p.target.lon))) ||\n          (((p.target.lat < p.source.lat) && (p.location.lat < p.target.lat)) || ((p.target.lon < p.source.lon) && (p.location.lon < p.target.lon)))\n        ) {\n          p.location.lat = p.source.lat\n          p.location.lon = p.source.lon\n        }\n\n        const pos = map?.latLngToLayerPoint([p.location.lat, p.location.lon])\n        const orthogonalArcShift = -(zoomLevel ** 2 * fullDist / 8) * Math.cos(Math.PI / 2 * (fullDist / 2 - remainedDist) / (fullDist / 2)) || 0\n        p.x = pos?.x - this.panningOffset.x\n        p.y = pos?.y + orthogonalArcShift - this.panningOffset.y\n      }\n\n      this.renderer.updatePointsPosition(this.particles)\n      this.renderer.draw()\n      this.animate()\n    })\n  }\n\n  private getPointByScreenPos (x: number, y: number): [FlowDatum, number, number] | [] {\n    const map = this.leafletMapInstance\n\n    for (const flow of this.flows) {\n      const lat = getNumber(flow, this.config.sourceLatitude)\n      const lon = getNumber(flow, this.config.sourceLongitude)\n      const r = getNumber(flow, this.config.sourcePointRadius)\n      const pos = map?.latLngToLayerPoint([lat, lon])\n      const posX = pos.x - this.panningOffset.x\n      const posY = pos.y - this.panningOffset.y\n\n      if ((Math.abs(x - posX) < r) && (Math.abs(y - posY) < r)) {\n        return [flow, posX, posY]\n      }\n    }\n\n    return []\n  }\n\n  private onCanvasMouseMove (event: MouseEvent): void {\n    const { config } = this\n\n    this.canvasElement.style.removeProperty('cursor')\n    const [hoveredPoint, x, y] = this.getPointByScreenPos(event.offsetX, event.offsetY)\n    if (hoveredPoint) this.canvasElement.style.cursor = 'default'\n\n    if (this.hoveredSourcePoint !== hoveredPoint) {\n      if (hoveredPoint) config.onSourcePointMouseEnter?.(hoveredPoint, x, y, event)\n      if (this.hoveredSourcePoint) config.onSourcePointMouseLeave?.(this.hoveredSourcePoint, event)\n      this.hoveredSourcePoint = hoveredPoint\n    }\n  }\n\n  private onCanvasClick (event: MouseEvent): void {\n    const { config } = this\n\n    const [clickedPoint, x, y] = this.getPointByScreenPos(event.offsetX, event.offsetY)\n    if (clickedPoint) config.onSourcePointClick?.(clickedPoint, x, y, event)\n  }\n\n  private onMapMove (leaflet: L.Map): void {\n    const shift = leaflet.containerPointToLayerPoint([0, 0])\n    this.panningOffset.x = shift.x\n    this.panningOffset.y = shift.y\n    this.canvasElement.style.transform = `translate(${shift.x}px, ${shift.y}px)`\n  }\n\n  public destroy (): void {\n    this.resizeObserver?.disconnect()\n    this.renderer?.destroy()\n    this.canvasElement?.removeEventListener('mousemove', this.onCanvasMouseMoveBound)\n    this.canvasElement?.removeEventListener('click', this.onCanvasClickBound)\n    super.destroy()\n  }\n\n  // Leaflet Map useful methods\n  public selectPointById (id: string, centerPoint = false): void { this.leafletMap.selectPointById(id, centerPoint) }\n  public getSelectedPointId (): string | number | undefined { return this.leafletMap.getSelectedPointId() }\n  public unselectPoint (): void { this.leafletMap.unselectPoint() }\n  public zoomToPointById (id: string, selectNode = false, customZoomLevel?: number): void { this.leafletMap.zoomToPointById(id, selectNode, customZoomLevel) }\n  public zoomIn (increment = 1): void { this.leafletMap.zoomIn(increment) }\n  public zoomOut (increment = 1): void { this.leafletMap.zoomOut(increment) }\n  public setZoom (zoomLevel: number): void { this.leafletMap.setZoom(zoomLevel) }\n  public fitView (): void {\n    const points: { lat: number; lon: number }[] = []\n\n    for (const point of this.points) {\n      points.push({\n        lat: getNumber(point, this.config.pointLatitude),\n        lon: getNumber(point, this.config.pointLongitude),\n      })\n    }\n\n    for (const flow of this.flows) {\n      const source = {\n        lat: getNumber(flow, this.config.sourceLatitude),\n        lon: getNumber(flow, this.config.sourceLongitude),\n      }\n\n      const target = {\n        lat: getNumber(flow, this.config.targetLatitude),\n        lon: getNumber(flow, this.config.targetLongitude),\n      }\n\n      points.push(source)\n      points.push(target)\n    }\n\n    const boundsArray = getDataLatLngBounds(points, d => d.lat, d => d.lon, 0)\n    const bounds: Bounds = {\n      northEast: { lat: boundsArray[0][0], lng: boundsArray[1][1] },\n      southWest: { lat: boundsArray[1][0], lng: boundsArray[0][1] },\n    }\n    this.leafletMap.fitToBounds(bounds)\n  }\n}\n"],"names":[],"mappings":"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"}

package/components/leaflet-flow-map/renderer-utils.d.ts

@@ -0,0 +1,5 @@
+import { Color } from 'three/src/math/Color.js';
+export declare const DEFAULT_POINT_RADIUS = 1;
+export declare const DEFAULT_POINT_COLOR = "rgba(255, 113, 111, 1.000)";
+export declare function getRadius(r: number | undefined, devicePixelRatio: number): number;
+export declare function getColor(color: string | undefined): Color;

package/components/leaflet-flow-map/renderer-utils.js

@@ -0,0 +1,15 @@
+import { Color } from 'three/src/math/Color.js';
+
+const DEFAULT_POINT_RADIUS = 1;
+const DEFAULT_POINT_COLOR = 'rgba(255, 113, 111, 1.000)';
+function getRadius(r, devicePixelRatio) {
+    return (r !== null && r !== void 0 ? r : DEFAULT_POINT_RADIUS) * devicePixelRatio;
+}
+function getColor(color) {
+    const c = new Color();
+    c.set(color !== null && color !== void 0 ? color : DEFAULT_POINT_COLOR);
+    return c;
+}
+
+export { DEFAULT_POINT_COLOR, DEFAULT_POINT_RADIUS, getColor, getRadius };
+//# sourceMappingURL=renderer-utils.js.map

package/components/leaflet-flow-map/renderer-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer-utils.js","sources":["../../../src/components/leaflet-flow-map/renderer-utils.ts"],"sourcesContent":["import { Color } from 'three/src/math/Color.js'\n\nexport const DEFAULT_POINT_RADIUS = 1\nexport const DEFAULT_POINT_COLOR = 'rgba(255, 113, 111, 1.000)'\n\nexport function getRadius (r: number | undefined, devicePixelRatio: number): number {\n  return (r ?? DEFAULT_POINT_RADIUS) * devicePixelRatio\n}\n\nexport function getColor (color: string | undefined): Color {\n  const c = new Color()\n  c.set(color ?? DEFAULT_POINT_COLOR)\n  return c\n}\n"],"names":[],"mappings":";;AAEO,MAAM,oBAAoB,GAAG,EAAC;AAC9B,MAAM,mBAAmB,GAAG,6BAA4B;AAE/C,SAAA,SAAS,CAAE,CAAqB,EAAE,gBAAwB,EAAA;IACxE,OAAO,CAAC,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAD,CAAC,GAAI,oBAAoB,IAAI,gBAAgB,CAAA;AACvD,CAAC;AAEK,SAAU,QAAQ,CAAE,KAAyB,EAAA;AACjD,IAAA,MAAM,CAAC,GAAG,IAAI,KAAK,EAAE,CAAA;IACrB,CAAC,CAAC,GAAG,CAAC,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAL,KAAK,GAAI,mBAAmB,CAAC,CAAA;AACnC,IAAA,OAAO,CAAC,CAAA;AACV;;;;"}

package/components/leaflet-flow-map/renderer.d.ts

@@ -0,0 +1,26 @@
+import { Particle } from './types';
+export declare class PointRenderer {
+    private width;
+    private height;
+    private devicePixelRatio;
+    private containerNode;
+    private renderer;
+    private rendererCanvasElement;
+    private readonly camera;
+    private readonly scene;
+    private pointsGeometry;
+    private pointsBuffer;
+    private pointsPositions;
+    private pointsColors;
+    private pointsSizes;
+    private pointData;
+    constructor(containerNode: HTMLDivElement, width: number, height: number, canvas?: HTMLCanvasElement);
+    private initGeometry;
+    private initPointsAttributes;
+    draw(): void;
+    update(points: Particle[]): void;
+    updatePointsPosition(points: Particle[]): void;
+    setSize(width: number, height: number): void;
+    getCanvasElement(): HTMLCanvasElement;
+    destroy(): void;
+}

package/components/leaflet-flow-map/renderer.js

@@ -0,0 +1,117 @@
+import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js';
+import { OrthographicCamera } from 'three/src/cameras/OrthographicCamera.js';
+import { Scene } from 'three/src/scenes/Scene.js';
+import { BufferGeometry } from 'three/src/core/BufferGeometry.js';
+import { Points } from 'three/src/objects/Points.js';
+import { BufferAttribute } from 'three/src/core/BufferAttribute.js';
+import { ShaderMaterial } from 'three/src/materials/ShaderMaterial.js';
+import { Color } from 'three/src/math/Color.js';
+import { vertex, fragment } from './shaders.js';
+import { DEFAULT_POINT_RADIUS, getColor, getRadius } from './renderer-utils.js';
+
+class PointRenderer {
+    constructor(containerNode, width, height, canvas) {
+        this.devicePixelRatio = window.devicePixelRatio || 1;
+        this.pointData = [];
+        this.containerNode = containerNode;
+        this.width = width;
+        this.height = height;
+        this.renderer = new WebGLRenderer({
+            antialias: true,
+            alpha: true,
+            canvas,
+        });
+        this.renderer.setSize(this.width, this.height);
+        this.renderer.setPixelRatio(this.devicePixelRatio);
+        this.renderer.setClearColor(0x00000000, 0);
+        this.renderer.clear();
+        if (!canvas) {
+            this.rendererCanvasElement = this.renderer.domElement;
+            this.rendererCanvasElement.style.position = 'absolute';
+            this.rendererCanvasElement.style.top = '0';
+            this.containerNode.appendChild(this.rendererCanvasElement);
+        }
+        // Set up camera
+        this.camera = new OrthographicCamera(-0, this.width, -0, this.height, 0);
+        // Set up scene
+        this.scene = new Scene();
+        // Initialize geometry of points
+        this.initGeometry();
+    }
+    initGeometry() {
+        const pointsMaterial = new ShaderMaterial({
+            uniforms: {
+                color: { value: new Color(0xffffff) },
+                size: { value: DEFAULT_POINT_RADIUS },
+            },
+            vertexShader: vertex,
+            fragmentShader: fragment,
+            transparent: true,
+        });
+        this.pointsGeometry = new BufferGeometry();
+        this.pointsBuffer = new Points(this.pointsGeometry, pointsMaterial);
+        this.pointsBuffer.frustumCulled = false;
+        this.scene.add(this.pointsBuffer);
+        this.camera.lookAt(this.scene.position);
+    }
+    initPointsAttributes() {
+        var _a, _b, _c, _d, _e, _f;
+        const numPoints = this.pointData.length;
+        const pointsPositions = new Float32Array(numPoints * 3);
+        const pointsColors = new Float32Array(numPoints * 4);
+        const pointsSizes = new Float32Array(numPoints);
+        (_a = this.pointsGeometry) === null || _a === void 0 ? void 0 : _a.setAttribute('position', new BufferAttribute(pointsPositions, 3));
+        (_b = this.pointsGeometry) === null || _b === void 0 ? void 0 : _b.setAttribute('customColor', new BufferAttribute(pointsColors, 4));
+        (_c = this.pointsGeometry) === null || _c === void 0 ? void 0 : _c.setAttribute('size', new BufferAttribute(pointsSizes, 1));
+        this.pointsPositions = (_d = this.pointsBuffer) === null || _d === void 0 ? void 0 : _d.geometry.attributes.position;
+        this.pointsColors = (_e = this.pointsBuffer) === null || _e === void 0 ? void 0 : _e.geometry.attributes.customColor;
+        this.pointsSizes = (_f = this.pointsBuffer) === null || _f === void 0 ? void 0 : _f.geometry.attributes.size;
+    }
+    draw() {
+        this.renderer.render(this.scene, this.camera);
+    }
+    update(points) {
+        this.pointData = points;
+        this.initPointsAttributes();
+        this.pointData.forEach((p, i) => {
+            var _a, _b;
+            const color = getColor(p.color);
+            const opacity = 1;
+            const radius = getRadius(p.r, this.devicePixelRatio);
+            (_a = this.pointsColors) === null || _a === void 0 ? void 0 : _a.setXYZW(i, color.r, color.g, color.b, opacity);
+            (_b = this.pointsSizes) === null || _b === void 0 ? void 0 : _b.setX(i, radius);
+        });
+        const pointsColors = this.pointsColors;
+        const pointsSizes = this.pointsSizes;
+        pointsColors.needsUpdate = true;
+        pointsSizes.needsUpdate = true;
+        this.updatePointsPosition(points);
+    }
+    updatePointsPosition(points) {
+        points.forEach((p, i) => {
+            var _a;
+            (_a = this.pointsPositions) === null || _a === void 0 ? void 0 : _a.setXYZ(i, p.x, p.y, 0);
+        });
+        const pointsPosition = this.pointsPositions;
+        pointsPosition.needsUpdate = true;
+    }
+    setSize(width, height) {
+        this.width = width;
+        this.height = height;
+        this.renderer.setSize(this.width, this.height);
+        this.camera.right = this.width;
+        this.camera.bottom = this.height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.render(this.scene, this.camera);
+    }
+    getCanvasElement() {
+        return this.rendererCanvasElement;
+    }
+    destroy() {
+        this.renderer.dispose();
+        this.renderer.domElement.remove();
+    }
+}
+
+export { PointRenderer };
+//# sourceMappingURL=renderer.js.map

package/components/leaflet-flow-map/renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","sources":["../../../src/components/leaflet-flow-map/renderer.ts"],"sourcesContent":["import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js'\nimport { OrthographicCamera } from 'three/src/cameras/OrthographicCamera.js'\nimport { Scene } from 'three/src/scenes/Scene.js'\nimport { BufferGeometry } from 'three/src/core/BufferGeometry.js'\nimport { Points } from 'three/src/objects/Points.js'\nimport { BufferAttribute } from 'three/src/core/BufferAttribute.js'\nimport { InterleavedBufferAttribute } from 'three/src/core/InterleavedBufferAttribute.js'\nimport { ShaderMaterial } from 'three/src/materials/ShaderMaterial.js'\nimport { Color } from 'three/src/math/Color.js'\n\nimport { Particle } from './types'\n\nimport { vertex, fragment } from './shaders'\nimport { DEFAULT_POINT_RADIUS, getRadius, getColor } from './renderer-utils'\n\nexport class PointRenderer {\n  private width: number\n  private height: number\n  private devicePixelRatio = window.devicePixelRatio || 1\n  private containerNode: HTMLDivElement\n  private renderer: WebGLRenderer\n  private rendererCanvasElement: HTMLCanvasElement\n  private readonly camera: OrthographicCamera\n  private readonly scene: Scene\n\n  // Points\n  private pointsGeometry: BufferGeometry | undefined\n  private pointsBuffer: Points | undefined\n  private pointsPositions: BufferAttribute | InterleavedBufferAttribute | undefined\n  private pointsColors: BufferAttribute | InterleavedBufferAttribute | undefined\n  private pointsSizes: BufferAttribute | InterleavedBufferAttribute | undefined\n  private pointData: Particle[] = []\n\n  constructor (containerNode: HTMLDivElement, width: number, height: number, canvas?: HTMLCanvasElement) {\n    this.containerNode = containerNode\n    this.width = width\n    this.height = height\n\n    this.renderer = new WebGLRenderer({\n      antialias: true,\n      alpha: true,\n      canvas,\n    })\n    this.renderer.setSize(this.width, this.height)\n    this.renderer.setPixelRatio(this.devicePixelRatio)\n    this.renderer.setClearColor(0x00000000, 0)\n    this.renderer.clear()\n\n    if (!canvas) {\n      this.rendererCanvasElement = this.renderer.domElement\n      this.rendererCanvasElement.style.position = 'absolute'\n      this.rendererCanvasElement.style.top = '0'\n      this.containerNode.appendChild(this.rendererCanvasElement)\n    }\n\n    // Set up camera\n    this.camera = new OrthographicCamera(-0, this.width, -0, this.height, 0)\n\n    // Set up scene\n    this.scene = new Scene()\n\n    // Initialize geometry of points\n    this.initGeometry()\n  }\n\n  private initGeometry (): void {\n    const pointsMaterial = new ShaderMaterial({\n      uniforms: {\n        color: { value: new Color(0xffffff) },\n        size: { value: DEFAULT_POINT_RADIUS },\n      },\n      vertexShader: vertex,\n      fragmentShader: fragment,\n      transparent: true,\n    })\n    this.pointsGeometry = new BufferGeometry()\n    this.pointsBuffer = new Points(this.pointsGeometry, pointsMaterial)\n    this.pointsBuffer.frustumCulled = false\n    this.scene.add(this.pointsBuffer)\n    this.camera.lookAt(this.scene.position)\n  }\n\n  private initPointsAttributes (): void {\n    const numPoints = this.pointData.length\n    const pointsPositions = new Float32Array(numPoints * 3)\n    const pointsColors = new Float32Array(numPoints * 4)\n    const pointsSizes = new Float32Array(numPoints)\n    this.pointsGeometry?.setAttribute('position', new BufferAttribute(pointsPositions, 3))\n    this.pointsGeometry?.setAttribute('customColor', new BufferAttribute(pointsColors, 4))\n    this.pointsGeometry?.setAttribute('size', new BufferAttribute(pointsSizes, 1))\n    this.pointsPositions = this.pointsBuffer?.geometry.attributes.position\n    this.pointsColors = this.pointsBuffer?.geometry.attributes.customColor\n    this.pointsSizes = this.pointsBuffer?.geometry.attributes.size\n  }\n\n  public draw (): void {\n    this.renderer.render(this.scene, this.camera)\n  }\n\n  public update (points: Particle[]): void {\n    this.pointData = points\n\n    this.initPointsAttributes()\n    this.pointData.forEach((p, i) => {\n      const color = getColor(p.color)\n      const opacity = 1\n      const radius = getRadius(p.r, this.devicePixelRatio)\n      this.pointsColors?.setXYZW(i, color.r, color.g, color.b, opacity)\n      this.pointsSizes?.setX(i, radius)\n    })\n    const pointsColors = this.pointsColors as BufferAttribute\n    const pointsSizes = this.pointsSizes as BufferAttribute\n    pointsColors.needsUpdate = true\n    pointsSizes.needsUpdate = true\n\n    this.updatePointsPosition(points)\n  }\n\n  public updatePointsPosition (points: Particle[]): void {\n    points.forEach((p, i) => {\n      this.pointsPositions?.setXYZ(i, p.x, p.y, 0)\n    })\n    const pointsPosition = this.pointsPositions as BufferAttribute\n    pointsPosition.needsUpdate = true\n  }\n\n  public setSize (width: number, height: number): void {\n    this.width = width\n    this.height = height\n\n    this.renderer.setSize(this.width, this.height)\n    this.camera.right = this.width\n    this.camera.bottom = this.height\n    this.camera.updateProjectionMatrix()\n    this.renderer.render(this.scene, this.camera)\n  }\n\n  public getCanvasElement (): HTMLCanvasElement {\n    return this.rendererCanvasElement\n  }\n\n  public destroy (): void {\n    this.renderer.dispose()\n    this.renderer.domElement.remove()\n  }\n}\n"],"names":[],"mappings":"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"}

package/components/leaflet-flow-map/shaders.d.ts

@@ -0,0 +1,2 @@
+export declare const vertex = "\nattribute float size;\nattribute vec4 customColor;\nvarying vec4 vColor;\nvoid main() {\n    vColor = customColor;\n    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\n    gl_PointSize = size * 2.0;\n    gl_Position = projectionMatrix * mvPosition;\n}\n";
+export declare const fragment = "\nuniform vec3 color;\nvarying vec4 vColor;\nvoid main() {\n    // if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;\n    // gl_FragColor = vec4(color * vColor.rgb,  vColor.a);\n    vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n    float r = dot(cxy, cxy);\n\n    float opacity = 1.0 - smoothstep(0.7, 1.0, r);\n    gl_FragColor = vec4(color * vColor.rgb,  vColor.a * opacity);\n}\n";

package/{src/components/leaflet-flow-map/shaders.ts → components/leaflet-flow-map/shaders.js}

@@ -1,4 +1,4 @@
-export const vertex = `
+const vertex = `
 attribute float size;
 attribute vec4 customColor;
 varying vec4 vColor;
@@ -8,8 +8,8 @@ void main() {
     gl_PointSize = size * 2.0;
     gl_Position = projectionMatrix * mvPosition;
 }
-`
-export const fragment = `
+`;
+const fragment = `
 uniform vec3 color;
 varying vec4 vColor;
 void main() {
@@ -21,4 +21,7 @@ void main() {
     float opacity = 1.0 - smoothstep(0.7, 1.0, r);
     gl_FragColor = vec4(color * vColor.rgb,  vColor.a * opacity);
 }
-`
+`;
+
+export { fragment, vertex };
+//# sourceMappingURL=shaders.js.map