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

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

@@ -1,60 +0,0 @@
-/* eslint-disable dot-notation */
-
-// Config
-import { LeafletMapConfig, LeafletMapConfigInterface } from 'components/leaflet-map/config'
-
-// Types
-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>;
-
-  // Events
-  /** 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 class LeafletFlowMapConfig<
-  PointDatum extends GenericDataRecord = GenericDataRecord,
-  FlowDatum extends GenericDataRecord = GenericDataRecord,
-> extends LeafletMapConfig<PointDatum> implements LeafletFlowMapConfigInterface<PointDatum, FlowDatum> {
-  sourceLongitude = (f: FlowDatum): number => f['sourceLongitude'] as number
-  sourceLatitude = (f: FlowDatum): number => f['sourceLatitude'] as number
-  targetLongitude = (f: FlowDatum): number => f['targetLongitude'] as number
-  targetLatitude = (f: FlowDatum): number => f['targetLatitude'] as number
-  sourcePointRadius = 3
-  sourcePointColor = '#88919f'
-  flowParticleColor = '#949dad'
-  flowParticleRadius = 1.1
-  flowParticleSpeed = 0.07
-  flowParticleDensity = 0.6
-
-  // Events
-  onSourcePointClick = undefined
-  onSourcePointMouseEnter = undefined
-  onSourcePointMouseLeave = undefined
-}

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

@@ -1,279 +0,0 @@
-import { select } from 'd3-selection'
-import { ResizeObserver } from '@juggle/resize-observer'
-
-import { ComponentCore } from 'core/component'
-import { ComponentType } from 'types/component'
-
-// Utils
-import { getNumber, throttle } from 'utils/data'
-import { getDataLatLngBounds } from 'utils/map'
-import { getColor } from 'utils/color'
-
-// Components
-import { LeafletMap } from 'components/leaflet-map'
-
-// Types
-import { Bounds } from 'components/leaflet-map/types'
-import { GenericDataRecord } from 'types/data'
-
-// Config
-import { LeafletFlowMapConfig, LeafletFlowMapConfigInterface } from './config'
-
-// Local Types
-import { LatLon, Particle } from './types'
-
-// Renderer
-import { PointRenderer as PointRendererType } from './renderer'
-
-export class LeafletFlowMap<
-  PointDatum extends GenericDataRecord,
-  FlowDatum extends GenericDataRecord,
-> extends ComponentCore<
-  { points: PointDatum[]; flows?: FlowDatum[] },
-  LeafletFlowMapConfig<PointDatum, FlowDatum>,
-  LeafletFlowMapConfigInterface<PointDatum, FlowDatum>
-  > {
-  static selectors = LeafletMap.selectors
-  type = ComponentType.HTML
-  private leafletMap: LeafletMap<PointDatum>
-  private leafletMapInstance: L.Map
-  private flows: FlowDatum[] = []
-  private points: PointDatum[] = []
-  private hoveredSourcePoint: FlowDatum | undefined
-  private onCanvasMouseMoveBound = throttle(this.onCanvasMouseMove.bind(this), 60)
-  private onCanvasClickBound = this.onCanvasClick.bind(this)
-  private canvasElement: HTMLCanvasElement | undefined
-  config: LeafletFlowMapConfig<PointDatum, FlowDatum> = new LeafletFlowMapConfig()
-  private panningOffset = { x: 0, y: 0 }
-
-  private resizeObserver: ResizeObserver | undefined
-  private renderer: PointRendererType | undefined
-  particles: Particle[] = []
-
-  constructor (container: HTMLDivElement, config?: LeafletFlowMapConfigInterface<PointDatum, FlowDatum>, data?: { points: PointDatum[]; flows?: FlowDatum[] }) {
-    super(ComponentType.HTML)
-
-    this.leafletMap = new LeafletMap<PointDatum>(container, config, data?.points ?? [])
-
-    const rendererImportPromise = import('./renderer')
-    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 as HTMLDivElement
-
-        // 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: LeafletFlowMapConfigInterface<PointDatum, FlowDatum>): void {
-    super.setConfig(config)
-    this.leafletMap.setConfig({ ...config, clusteringDistance: 0 })
-  }
-
-  setData (data: { points: PointDatum[]; flows?: FlowDatum[] }): void {
-    super.setData(data)
-    this.flows = data.flows
-    this.points = data.points
-    this.initParticles()
-    this.leafletMap.setData(this.points)
-    this.render()
-  }
-
-  render (): void {
-    super.render()
-  }
-
-  initParticles (): void {
-    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((target.lat - source.lat) ** 2 + (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)
-      }
-    }
-
-    this.renderer?.update(this.particles)
-  }
-
-  private addParticle (source: LatLon, target: LatLon, location = source, velocity = 0.05, r = 0.75, color?: string): void {
-    const x = 0
-    const y = 0
-    this.particles.push({ x, y, source, target, location, velocity, r, color })
-  }
-
-  private clearParticles (): void {
-    this.particles = []
-  }
-
-  private animate (): void {
-    const map = this.leafletMapInstance
-
-    requestAnimationFrame(() => {
-      const zoomLevel = map?.getZoom()
-      for (const p of this.particles) {
-        const fullDist = Math.sqrt((p.target.lat - p.source.lat) ** 2 + (p.target.lon - p.source.lon) ** 2)
-        const remainedDist = Math.sqrt((p.target.lat - p.location.lat) ** 2 + (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?.latLngToLayerPoint([p.location.lat, p.location.lon])
-        const orthogonalArcShift = -(zoomLevel ** 2 * fullDist / 8) * Math.cos(Math.PI / 2 * (fullDist / 2 - remainedDist) / (fullDist / 2)) || 0
-        p.x = pos?.x - this.panningOffset.x
-        p.y = pos?.y + orthogonalArcShift - this.panningOffset.y
-      }
-
-      this.renderer.updatePointsPosition(this.particles)
-      this.renderer.draw()
-      this.animate()
-    })
-  }
-
-  private getPointByScreenPos (x: number, y: number): [FlowDatum, number, number] | [] {
-    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?.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 []
-  }
-
-  private onCanvasMouseMove (event: MouseEvent): void {
-    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) config.onSourcePointMouseEnter?.(hoveredPoint, x, y, event)
-      if (this.hoveredSourcePoint) config.onSourcePointMouseLeave?.(this.hoveredSourcePoint, event)
-      this.hoveredSourcePoint = hoveredPoint
-    }
-  }
-
-  private onCanvasClick (event: MouseEvent): void {
-    const { config } = this
-
-    const [clickedPoint, x, y] = this.getPointByScreenPos(event.offsetX, event.offsetY)
-    if (clickedPoint) config.onSourcePointClick?.(clickedPoint, x, y, event)
-  }
-
-  private onMapMove (leaflet: L.Map): void {
-    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)`
-  }
-
-  public destroy (): void {
-    this.resizeObserver?.disconnect()
-    this.renderer?.destroy()
-    this.canvasElement?.removeEventListener('mousemove', this.onCanvasMouseMoveBound)
-    this.canvasElement?.removeEventListener('click', this.onCanvasClickBound)
-    super.destroy()
-  }
-
-  // Leaflet Map useful methods
-  public selectPointById (id: string, centerPoint = false): void { this.leafletMap.selectPointById(id, centerPoint) }
-  public getSelectedPointId (): string | number | undefined { return this.leafletMap.getSelectedPointId() }
-  public unselectPoint (): void { this.leafletMap.unselectPoint() }
-  public zoomToPointById (id: string, selectNode = false, customZoomLevel?: number): void { this.leafletMap.zoomToPointById(id, selectNode, customZoomLevel) }
-  public zoomIn (increment = 1): void { this.leafletMap.zoomIn(increment) }
-  public zoomOut (increment = 1): void { this.leafletMap.zoomOut(increment) }
-  public setZoom (zoomLevel: number): void { this.leafletMap.setZoom(zoomLevel) }
-  public fitView (): void {
-    const points: { lat: number; lon: number }[] = []
-
-    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: Bounds = {
-      northEast: { lat: boundsArray[0][0], lng: boundsArray[1][1] },
-      southWest: { lat: boundsArray[1][0], lng: boundsArray[0][1] },
-    }
-    this.leafletMap.fitToBounds(bounds)
-  }
-}

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

@@ -1,14 +0,0 @@
-import { Color } from 'three/src/math/Color.js'
-
-export const DEFAULT_POINT_RADIUS = 1
-export const DEFAULT_POINT_COLOR = 'rgba(255, 113, 111, 1.000)'
-
-export function getRadius (r: number | undefined, devicePixelRatio: number): number {
-  return (r ?? DEFAULT_POINT_RADIUS) * devicePixelRatio
-}
-
-export function getColor (color: string | undefined): Color {
-  const c = new Color()
-  c.set(color ?? DEFAULT_POINT_COLOR)
-  return c
-}

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

@@ -1,146 +0,0 @@
-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 { InterleavedBufferAttribute } from 'three/src/core/InterleavedBufferAttribute.js'
-import { ShaderMaterial } from 'three/src/materials/ShaderMaterial.js'
-import { Color } from 'three/src/math/Color.js'
-
-import { Particle } from './types'
-
-import { vertex, fragment } from './shaders'
-import { DEFAULT_POINT_RADIUS, getRadius, getColor } from './renderer-utils'
-
-export class PointRenderer {
-  private width: number
-  private height: number
-  private devicePixelRatio = window.devicePixelRatio || 1
-  private containerNode: HTMLDivElement
-  private renderer: WebGLRenderer
-  private rendererCanvasElement: HTMLCanvasElement
-  private readonly camera: OrthographicCamera
-  private readonly scene: Scene
-
-  // Points
-  private pointsGeometry: BufferGeometry | undefined
-  private pointsBuffer: Points | undefined
-  private pointsPositions: BufferAttribute | InterleavedBufferAttribute | undefined
-  private pointsColors: BufferAttribute | InterleavedBufferAttribute | undefined
-  private pointsSizes: BufferAttribute | InterleavedBufferAttribute | undefined
-  private pointData: Particle[] = []
-
-  constructor (containerNode: HTMLDivElement, width: number, height: number, canvas?: HTMLCanvasElement) {
-    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()
-  }
-
-  private initGeometry (): void {
-    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)
-  }
-
-  private initPointsAttributes (): void {
-    const numPoints = this.pointData.length
-    const pointsPositions = new Float32Array(numPoints * 3)
-    const pointsColors = new Float32Array(numPoints * 4)
-    const pointsSizes = new Float32Array(numPoints)
-    this.pointsGeometry?.setAttribute('position', new BufferAttribute(pointsPositions, 3))
-    this.pointsGeometry?.setAttribute('customColor', new BufferAttribute(pointsColors, 4))
-    this.pointsGeometry?.setAttribute('size', new BufferAttribute(pointsSizes, 1))
-    this.pointsPositions = this.pointsBuffer?.geometry.attributes.position
-    this.pointsColors = this.pointsBuffer?.geometry.attributes.customColor
-    this.pointsSizes = this.pointsBuffer?.geometry.attributes.size
-  }
-
-  public draw (): void {
-    this.renderer.render(this.scene, this.camera)
-  }
-
-  public update (points: Particle[]): void {
-    this.pointData = points
-
-    this.initPointsAttributes()
-    this.pointData.forEach((p, i) => {
-      const color = getColor(p.color)
-      const opacity = 1
-      const radius = getRadius(p.r, this.devicePixelRatio)
-      this.pointsColors?.setXYZW(i, color.r, color.g, color.b, opacity)
-      this.pointsSizes?.setX(i, radius)
-    })
-    const pointsColors = this.pointsColors as BufferAttribute
-    const pointsSizes = this.pointsSizes as BufferAttribute
-    pointsColors.needsUpdate = true
-    pointsSizes.needsUpdate = true
-
-    this.updatePointsPosition(points)
-  }
-
-  public updatePointsPosition (points: Particle[]): void {
-    points.forEach((p, i) => {
-      this.pointsPositions?.setXYZ(i, p.x, p.y, 0)
-    })
-    const pointsPosition = this.pointsPositions as BufferAttribute
-    pointsPosition.needsUpdate = true
-  }
-
-  public setSize (width: number, height: number): void {
-    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)
-  }
-
-  public getCanvasElement (): HTMLCanvasElement {
-    return this.rendererCanvasElement
-  }
-
-  public destroy (): void {
-    this.renderer.dispose()
-    this.renderer.domElement.remove()
-  }
-}

package/src/components/leaflet-flow-map/types.ts

@@ -1,18 +0,0 @@
-export interface Particle {
-  // Geographical properties
-  source: { lat: number; lon: number };
-  target: { lat: number; lon: number };
-  location: { lat: number; lon: number };
-  velocity: number;
-
-  // Screen properties (passed to three.js renderer)
-  x: number;
-  y: number;
-  r?: number;
-  color?: string;
-}
-
-export interface LatLon {
-  lat: number;
-  lon: number;
-}