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

package/src/components/leaflet-map/modules/map.ts

@@ -1,178 +0,0 @@
-import type L from 'leaflet'
-import { select, Selection } from 'd3-selection'
-import { GeoJSONSource, Map } from 'maplibre-gl'
-import { feature } from 'topojson-client'
-
-// Types
-import { GenericDataRecord } from 'types/data'
-
-// Config
-import { LeafletMapConfig } from '../config'
-
-// Local Types
-
-// Utils
-import { constraintMapView, mapboxglWheelEventThrottled } from '../renderer/mapboxgl-utils'
-
-// Styles
-import * as s from '../style'
-import { LeafletMapRenderer } from '../types'
-
-export const initialMapCenter: L.LatLngExpression = [36, 14]
-export const initialMapZoom = 1.9
-
-export function updateTopoJson<T extends GenericDataRecord> (maplibreMap: Map, config: LeafletMapConfig<T>): void {
-  const { topoJSONLayer } = config
-
-  if (topoJSONLayer.sources) {
-    const featureObject = topoJSONLayer.sources?.objects?.[topoJSONLayer.featureName]
-    if (featureObject) {
-      const mapSource = maplibreMap.getSource(topoJSONLayer.featureName) as GeoJSONSource
-      const featureCollection = feature(topoJSONLayer.sources, featureObject)
-      if (mapSource) {
-        mapSource.setData(featureCollection)
-      } else {
-        maplibreMap.addSource(topoJSONLayer.featureName, { type: 'geojson', data: featureCollection })
-      }
-    }
-  }
-
-  const fillLayer = maplibreMap.getLayer(`${topoJSONLayer.featureName}-area`)
-  if (topoJSONLayer.fillProperty) {
-    if (!fillLayer) {
-      maplibreMap.addLayer({
-        id: `${topoJSONLayer.featureName}-area`,
-        type: 'fill',
-        source: topoJSONLayer.featureName,
-        paint: {
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          'fill-antialias': false,
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          'fill-opacity': topoJSONLayer.fillOpacity,
-        },
-      })
-    }
-    maplibreMap.setPaintProperty(`${topoJSONLayer.featureName}-area`, 'fill-color', [
-      'case',
-      ['!', ['has', topoJSONLayer.fillProperty]],
-      'rgba(255, 255, 255, 0)',
-      ['get', topoJSONLayer.fillProperty],
-    ])
-  } else if (fillLayer) maplibreMap.removeLayer(`${topoJSONLayer.featureName}-area`)
-
-  const strokeLayer = maplibreMap.getLayer(`${topoJSONLayer.featureName}-stroke`)
-  if (topoJSONLayer.strokeProperty) {
-    if (!strokeLayer) {
-      maplibreMap.addLayer({
-        id: `${topoJSONLayer.featureName}-stroke`,
-        type: 'line',
-        source: topoJSONLayer.featureName,
-        paint: {
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          'line-opacity': topoJSONLayer.strokeOpacity,
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          'line-width': topoJSONLayer.strokeWidth,
-        },
-      })
-    }
-    maplibreMap.setPaintProperty(`${topoJSONLayer.featureName}-stroke`, 'line-color', [
-      'case',
-      ['!', ['has', topoJSONLayer.strokeProperty]],
-      'rgba(255, 255, 255, 0)',
-      ['get', topoJSONLayer.strokeProperty],
-    ])
-  } else if (strokeLayer) { maplibreMap.removeLayer(`${topoJSONLayer.featureName}-stroke`) }
-}
-
-export async function setupMap<T extends GenericDataRecord> (mapContainer: HTMLElement, config: LeafletMapConfig<T>): Promise<{
-  leaflet: L.Map;
-  layer: L.Layer;
-  svgOverlay: Selection<SVGSVGElement, unknown, null, undefined>;
-  svgGroup: Selection<SVGGElement, unknown, SVGElement, undefined>;
-}> {
-  const { style, renderer, topoJSONLayer } = config
-  const leaflet = await import('leaflet')
-  const L = leaflet.default
-
-  if (!style) {
-    console.error('Unovis | Leaflet Map: Please provide style settings in the map configuration object')
-    return
-  }
-
-  const leafletMap = L.map(mapContainer, {
-    scrollWheelZoom: renderer === LeafletMapRenderer.Raster, // We define custom scroll event for MapboxGL to enabling smooth zooming
-    zoomControl: false,
-    zoomDelta: renderer === LeafletMapRenderer.Raster ? 1 : 0.5,
-    zoomSnap: renderer === LeafletMapRenderer.Raster ? 1 : 0,
-    attributionControl: true,
-    center: initialMapCenter,
-    zoom: initialMapZoom,
-    minZoom: Math.sqrt(mapContainer.offsetWidth) / 17,
-    maxZoom: 23,
-    maxBounds: L.latLngBounds(
-      [-75, -290],
-      [85, 290]
-    ),
-    maxBoundsViscosity: 1,
-  })
-
-  for (const attr of config.attribution) {
-    leafletMap.attributionControl.addAttribution(attr)
-  }
-
-  let layer: L.Layer
-  let maplibreMap = null
-
-  switch (renderer) {
-    case LeafletMapRenderer.MapLibre:
-      // eslint-disable-next-line no-case-declarations
-      const maplibre = await import('maplibre-gl')
-      // eslint-disable-next-line no-case-declarations
-      const { getMaplibreGLLayer } = await import('../renderer/mapboxgl-layer')
-      layer = getMaplibreGLLayer(config, L, maplibre.default)
-      maplibreMap = (layer as ReturnType<typeof getMaplibreGLLayer>).getMaplibreMap?.()
-      break
-    case LeafletMapRenderer.Raster:
-      layer = L.tileLayer(style)
-      break
-  }
-  layer.addTo(leafletMap)
-
-  // leaflet-mapbox-gl has a layer positioning issue on far zoom levels which leads to having wrong
-  //   map points projection. We constraint the view to prevent that.
-  constraintMapView(leafletMap)
-  select(mapContainer).on('wheel', (event: WheelEvent) => {
-    event.preventDefault()
-    mapboxglWheelEventThrottled(leafletMap, layer, event)
-  })
-
-  if (maplibreMap && topoJSONLayer?.sources) {
-    const canvas = maplibreMap.getCanvas()
-    const canvasSelection = select(canvas).classed(s.mapboxglCanvas, true)
-    const tilePaneSelection = select(leafletMap.getPanes().tilePane)
-
-    maplibreMap.on('mousemove', (event) => {
-      const layerName = `${topoJSONLayer.featureName}-area`
-      const layer = maplibreMap.getLayer(layerName)
-      if (!layer) return
-
-      const features = maplibreMap.queryRenderedFeatures(event.point, { layers: [layerName] })
-      tilePaneSelection.datum(features[0])
-      canvasSelection.classed(s.onFeatureHover, Boolean(features[0]))
-    })
-
-    maplibreMap.on('load', () => {
-      updateTopoJson(maplibreMap, config)
-    })
-  }
-
-  const svgOverlay = select(leafletMap.getPanes().overlayPane).append('svg')
-  const svgGroup = svgOverlay.append('g')
-
-  return {
-    leaflet: leafletMap,
-    layer,
-    svgOverlay,
-    svgGroup,
-  }
-}

package/src/components/leaflet-map/modules/node.ts

@@ -1,208 +0,0 @@
-import { select, Selection } from 'd3-selection'
-import { color } from 'd3-color'
-import type L from 'leaflet'
-
-// Types
-import { Rect } from 'types/misc'
-import { GenericDataRecord } from 'types/data'
-
-// Utils
-import { smartTransition } from 'utils/d3'
-import { estimateTextSize, trimStringMiddle } from 'utils/text'
-import { clamp, getString } from 'utils/data'
-import { getCSSVariableValueInPixels, rectIntersect } from 'utils/misc'
-import { hexToBrightness } from 'utils/color'
-import { cssvar } from 'utils/style'
-import { getPointPos } from './utils'
-
-
-// Local Types
-import { LeafletMapPointDatum, LeafletMapClusterDatum, LeafletMapPoint, LeafletMapPointShape } from '../types'
-
-// Modules
-import { updateDonut } from './donut'
-
-// Config
-import { LeafletMapConfigInterface } from '../config'
-
-import * as s from '../style'
-
-const BOTTOM_LABEL_TOP_MARGIN = 10
-
-export function createNodes<D extends GenericDataRecord> (
-  selection: Selection<SVGGElement, LeafletMapPoint<D>, SVGGElement, unknown>
-): void {
-  selection.append('path')
-    .attr('class', s.pointPath)
-    .attr('id', d => `point-${d.id}`)
-    .style('opacity', 0)
-
-  selection.append('g')
-    .attr('class', s.donutCluster)
-
-  selection.append('text')
-    .attr('class', s.innerLabel)
-    .classed(s.innerLabelCluster, d => (d.properties as LeafletMapClusterDatum<D>).cluster)
-    .attr('id', d => `label-${d.id}`)
-    .attr('dy', '0.32em')
-
-  selection.append('text')
-    .attr('class', s.bottomLabel)
-    .attr('dy', '0.32em')
-    .attr('opacity', 1)
-}
-
-export function updateNodes<D extends GenericDataRecord> (
-  selection: Selection<SVGGElement, LeafletMapPoint<D>, SVGGElement, unknown>,
-  config: LeafletMapConfigInterface<D>,
-  leafletMap: L.Map,
-  mapMoveZoomUpdateOnly: boolean
-): void {
-  selection.each((d, i, elements) => {
-    const group = select(elements[i])
-    const node: Selection<SVGPathElement, any, SVGGElement, any> = group.select(`.${s.pointPath}`)
-    const innerLabel: Selection<SVGTextElement, any, SVGElement, any> = group.select(`.${s.innerLabel}`)
-    const bottomLabel: Selection<SVGTextElement, any, SVGElement, any> = group.select(`.${s.bottomLabel}`)
-
-    const { x, y } = getPointPos(d, leafletMap)
-    const donutData = d.donutData
-    const isCluster = (d.properties as LeafletMapClusterDatum<D>).cluster
-    const fromExpandedCluster = !!(d.properties as LeafletMapPointDatum<D>).expandedClusterPoint
-
-    const innerLabelText = (isCluster
-      ? getString(d.properties as LeafletMapClusterDatum<D>, config.clusterLabel)
-      : getString(d.properties as LeafletMapPointDatum<D>, config.pointLabel)
-    ) ?? ''
-    const innerLabelColor = (isCluster
-      ? getString(d.properties as LeafletMapClusterDatum<D>, config.clusterLabelColor)
-      : getString(d.properties as LeafletMapPointDatum<D>, config.pointLabelColor)
-    ) ?? null
-    const bottomLabelText = (isCluster
-      ? getString(d.properties as LeafletMapClusterDatum<D>, config.clusterBottomLabel)
-      : getString(d.properties as LeafletMapPointDatum<D>, config.pointBottomLabel)
-    ) ?? ''
-    const pointCursor = getString(d.properties as LeafletMapPointDatum<D>, config.pointCursor)
-    const pointShape = getString(d.properties as LeafletMapPointDatum<D>, config.pointShape)
-    const isRing = pointShape === LeafletMapPointShape.Ring
-    const isCircular = (pointShape === LeafletMapPointShape.Circle) || isRing || isCluster || !pointShape
-
-    // To get updated on every render call
-    const ringWidth = (isCluster && config.clusterRingWidth) || (isRing && config.pointRingWidth) || 0
-    group.attr('transform', `translate(${x},${y})`)
-    group.select<SVGGElement>(`.${s.donutCluster}`)
-      .call(updateDonut, donutData, isCircular ? d.radius : 0, ringWidth)
-
-    node.attr('d', d.path)
-    node.style('cursor', isCluster ? 'pointer' : pointCursor)
-    bottomLabel.attr('transform', `translate(0,${d.radius + BOTTOM_LABEL_TOP_MARGIN})`)
-    innerLabel.attr('font-size', () => {
-      const fontSize = d.radius / Math.pow(innerLabelText.length, 0.4)
-      return clamp(fontSize, fontSize, 16)
-    })
-
-    if (mapMoveZoomUpdateOnly) return
-
-    // Updates required only when data changes
-    node
-      .classed(s.pointPathCluster, isCluster)
-      .classed(s.pointPathRing, isRing)
-      .style('fill', d.color)
-      .style('stroke', d.color) // being used for hover
-      .style('stroke-width', ringWidth)
-      .style('opacity', 1)
-
-    innerLabel
-      .text(innerLabelText || null)
-      .attr('visibility', innerLabelText ? null : 'hidden')
-      .style('fill', () => {
-        if (innerLabelColor) return innerLabelColor
-
-        // Determine the label color based on the point brightness
-        const c = getComputedStyle(node.node()).fill
-        const hex = color(c)?.hex()
-        if (!hex) return null
-
-        const brightness = hexToBrightness(hex)
-        return brightness > 0.5
-          ? (isCluster ? cssvar(s.variables.mapClusterInnerLabelTextColorDark) : cssvar(s.variables.mapPointInnerLabelTextColorDark))
-          : (isCluster ? cssvar(s.variables.mapClusterInnerLabelTextColorLight) : cssvar(s.variables.mapPointInnerLabelTextColorLight))
-      })
-
-    const bottomLabelTextTrimmed = trimStringMiddle(bottomLabelText, 15)
-    bottomLabel
-      .text(bottomLabelTextTrimmed)
-      .attr('font-size', getCSSVariableValueInPixels(cssvar(s.variables.mapPointBottomLabelFontSize), selection.node()))
-      .attr('visibility', fromExpandedCluster ? 'hidden' : null)
-  })
-}
-
-export function collideLabels<D extends GenericDataRecord> (
-  selection: Selection<SVGGElement, LeafletMapPoint<D>, SVGGElement, unknown>,
-  leafletMap: L.Map
-): void {
-  selection.each((datum1: LeafletMapPoint<D>, i, elements) => {
-    const group1HTMLNode = elements[i]
-    const group1 = select(group1HTMLNode)
-    const label1: Selection<SVGTextElement, any, SVGElement, any> = group1.select(`.${s.bottomLabel}`)
-    // eslint-disable-next-line dot-notation
-    group1HTMLNode['labelVisible'] = true
-
-    // Calculate bounding rect of point's bottom label
-    const bottomLabelFontSizePx = getCSSVariableValueInPixels(cssvar(s.variables.mapPointBottomLabelFontSize), selection.node())
-    const p1Pos = getPointPos(datum1, leafletMap)
-    const label1Size = estimateTextSize(label1, bottomLabelFontSizePx, 0.32, true, 0.6)
-    const label1BoundingRect: Rect = {
-      x: p1Pos.x - label1Size.width / 2,
-      y: p1Pos.y - label1Size.height / 2 + datum1.radius + BOTTOM_LABEL_TOP_MARGIN,
-      width: label1Size.width,
-      height: label1Size.height,
-    }
-
-    for (let j = 0; j < elements.length; j += 1) {
-      if (i === j) continue
-      const group2HTMLNode = elements[j]
-      const group2 = select(group2HTMLNode)
-      const label2: Selection<SVGTextElement, any, SVGElement, any> = group2.select(`.${s.bottomLabel}`)
-      const datum2 = group2.datum() as LeafletMapPoint<D>
-
-      // Calculate bounding rect of the second point's circle
-      const p2Pos = getPointPos(datum2, leafletMap)
-      const point2BoundingRect = {
-        x: p2Pos.x - datum2.radius,
-        y: p2Pos.y - datum2.radius,
-        width: 2 * datum2.radius,
-        height: 2 * datum2.radius,
-      }
-
-      let intersect = rectIntersect(label1BoundingRect, point2BoundingRect)
-
-      // If there's not intersection, check a collision with the second point's label
-      // eslint-disable-next-line dot-notation
-      const label2Visible = group2HTMLNode['labelVisible']
-      if (!intersect && label2Visible) {
-        const label2Size = estimateTextSize(label2, bottomLabelFontSizePx, 0.32, true, 0.6)
-        intersect = rectIntersect(label1BoundingRect, {
-          x: p2Pos.x - label2Size.width / 2,
-          y: p2Pos.y + datum2.radius + BOTTOM_LABEL_TOP_MARGIN - label2Size.height / 2,
-          width: label2Size.width,
-          height: label2Size.height,
-        })
-      }
-
-      if (intersect) {
-        // eslint-disable-next-line dot-notation
-        group1HTMLNode['labelVisible'] = false
-        break
-      }
-    }
-
-    // eslint-disable-next-line dot-notation
-    smartTransition(label1, 0).attr('opacity', group1HTMLNode['labelVisible'] ? 1 : 0)
-  })
-}
-
-export function removeNodes<D extends GenericDataRecord> (
-  selection: Selection<SVGGElement, LeafletMapPoint<D>, SVGGElement, unknown>
-): void {
-  selection.remove()
-}

package/src/components/leaflet-map/modules/selectionRing.ts

@@ -1,63 +0,0 @@
-import type L from 'leaflet'
-import { Selection } from 'd3-selection'
-
-// Types
-import { GenericDataRecord } from 'types/data'
-
-// Utils
-import { getString } from 'utils/data'
-import { getPointPos } from './utils'
-
-// Local Types
-import { LeafletMapPoint, LeafletMapPointDatum } from '../types'
-
-// Config
-import { LeafletMapConfigInterface } from '../config'
-
-import * as s from '../style'
-
-
-export function createNodeSelectionRing (
-  selection: Selection<SVGGElement, unknown, SVGElement, undefined>
-): void {
-  selection.datum({ _zIndex: 3 })
-  selection.append('path').attr('class', s.pointSelection)
-}
-
-export function updateNodeSelectionRing<D extends GenericDataRecord> (
-  selection: Selection<SVGGElement, unknown, SVGElement, undefined>,
-  selectedPoint: LeafletMapPoint<D>,
-  pointData: LeafletMapPoint<D>[],
-  config: LeafletMapConfigInterface<D>,
-  leafletMap: L.Map
-): void {
-  selection.attr('class', s.pointSelectionRing)
-  const pointSelection = selection.select(`.${s.pointSelection}`)
-  if (selectedPoint) {
-    const isCluster = selectedPoint.isCluster
-    const selectedPointId: string | undefined = getString(selectedPoint.properties as LeafletMapPointDatum<D>, config.pointId)
-    const foundPoint = pointData.find(d =>
-      isCluster
-        ? (d.id === selectedPoint.id)
-        : (selectedPointId && (getString(d.properties as LeafletMapPointDatum<D>, config.pointId) === selectedPointId))
-    )
-    selection
-      .attr('transform', d => {
-        const { x, y } = getPointPos<D>(foundPoint ?? selectedPoint, leafletMap)
-        return `translate(${x},${y})`
-      })
-      .classed(`${(selectedPoint.properties as LeafletMapPointDatum<D>).shape}`, true)
-
-    pointSelection
-      .classed('active', Boolean(foundPoint))
-      .attr('d', foundPoint ? foundPoint.path : null)
-      .style('fill', 'transparent')
-      .style('stroke-width', 1)
-      .style('stroke', d => {
-        const node = foundPoint || selectedPoint
-        return node?.color
-      })
-  } else {
-    pointSelection.classed('active', false)
-  }
-}