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

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

@@ -1,436 +0,0 @@
-import { Selection } from 'd3-selection'
-import { D3ZoomEvent, zoom, ZoomBehavior, zoomIdentity, ZoomTransform } from 'd3-zoom'
-import { timeout } from 'd3-timer'
-import { geoPath, GeoProjection } from 'd3-geo'
-import { color } from 'd3-color'
-import { feature } from 'topojson-client'
-
-// Core
-import { ComponentCore } from 'core/component'
-import { MapGraphDataModel } from 'data-models/map-graph'
-
-// Utils
-import { clamp, getNumber, getString, isNumber } from 'utils/data'
-import { smartTransition } from 'utils/d3'
-import { getColor, hexToBrightness } from 'utils/color'
-import { getCSSVariableValue, isStringCSSVariable } from 'utils/misc'
-
-// Types
-import { MapLink } from 'types/map'
-
-// Local Types
-import { MapData, MapFeature, MapPointLabelPosition } from './types'
-
-// Config
-import { TopoJSONMapConfig, TopoJSONMapConfigInterface } from './config'
-
-// Modules
-import { arc, getLonLat } from './utils'
-
-// Styles
-import * as s from './style'
-
-export class TopoJSONMap<
-  AreaDatum,
-  PointDatum = unknown,
-  LinkDatum = unknown,
-> extends ComponentCore<
-  MapData<AreaDatum, PointDatum, LinkDatum>,
-  TopoJSONMapConfig<AreaDatum, PointDatum, LinkDatum>,
-  TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>
-  > {
-  static selectors = s
-  config: TopoJSONMapConfig<AreaDatum, PointDatum, LinkDatum> = new TopoJSONMapConfig()
-  datamodel: MapGraphDataModel<AreaDatum, PointDatum, LinkDatum> = new MapGraphDataModel()
-  g: Selection<SVGGElement, unknown, null, undefined>
-  private _firstRender = true
-  private _isResizing = false
-  private _initialScale: number = undefined
-  private _center: [number, number]
-  private _currentZoomLevel: number = undefined
-  private _transform: ZoomTransform
-  private _path = geoPath()
-  private _projection: GeoProjection
-  private _prevWidth: number
-  private _prevHeight: number
-  private _animFrameId: number
-
-  private _featureCollection: GeoJSON.FeatureCollection
-  private _zoomBehavior: ZoomBehavior<SVGGElement, unknown> = zoom()
-  private _backgroundRect = this.g.append('rect').attr('class', s.background)
-  private _featuresGroup = this.g.append('g').attr('class', s.features)
-  private _linksGroup = this.g.append('g').attr('class', s.links)
-  private _pointsGroup = this.g.append('g').attr('class', s.points)
-
-  events = {
-    [TopoJSONMap.selectors.point]: {},
-    [TopoJSONMap.selectors.feature]: {},
-  }
-
-  constructor (config?: TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>, data?: MapData<AreaDatum, PointDatum, LinkDatum>) {
-    super()
-    this._zoomBehavior.on('zoom', this._onZoom.bind(this))
-
-    if (config) this.setConfig(config)
-    if (data) this.setData(data)
-
-    this.g.append('defs')
-      .append('filter')
-      .attr('id', 'heatmapFilter')
-      .html(`
-        <feGaussianBlur in="SourceGraphic" stdDeviation="${this.config.heatmapModeBlurStdDeviation}" color-interpolation-filters="sRGB" result="blur"></feGaussianBlur>
-        <feColorMatrix class="blurValues" in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -4"></feColorMatrix>
-      `)
-  }
-
-  setData (data: MapData<AreaDatum, PointDatum, LinkDatum>): void {
-    const { config } = this
-
-    this.datamodel.pointId = config.pointId
-    this.datamodel.linkSource = config.linkSource
-    this.datamodel.linkTarget = config.linkTarget
-    this.datamodel.data = data
-  }
-
-  setConfig (config?: TopoJSONMapConfigInterface<AreaDatum, PointDatum, LinkDatum>): void {
-    super.setConfig(config)
-
-    const newProjection = this.config.projection
-    if (this._projection) {
-      newProjection.scale(this._projection.scale()).translate(this._projection.translate())
-    }
-    this._projection = newProjection
-  }
-
-  _render (customDuration?: number): void {
-    const { config } = this
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-
-    this._renderBackground()
-    this._renderMap(duration)
-    this._renderGroups(duration)
-    this._renderLinks(duration)
-    this._renderPoints(duration)
-
-    // When animation is running we need to temporary disable zoom behaviour
-    if (duration && !config.disableZoom) {
-      this.g.on('.zoom', null)
-      timeout(() => {
-        this.g.call(this._zoomBehavior)
-      }, duration)
-    }
-
-    // When zoom behaviour is active we assign the `draggable` class to show the grabbing cursor
-    this.g.classed('draggable', !config.disableZoom)
-    this._firstRender = false
-  }
-
-  _renderBackground (): void {
-    this._backgroundRect
-      .attr('width', '100%')
-      .attr('height', '100%')
-      .attr('transform', `translate(${-this.bleed.left}, ${-this.bleed.top})`)
-  }
-
-  _renderGroups (duration: number): void {
-    const transformString = this._transform.toString()
-    smartTransition(this._featuresGroup, duration)
-      .attr('transform', transformString)
-      .attr('stroke-width', 1 / this._currentZoomLevel)
-
-    smartTransition(this._linksGroup, duration)
-      .attr('transform', transformString)
-
-    smartTransition(this._pointsGroup, duration)
-      .attr('transform', transformString)
-  }
-
-  _renderMap (duration: number): void {
-    const { bleed, config, datamodel } = this
-
-    this.g.attr('transform', `translate(${bleed.left}, ${bleed.top})`)
-    const mapData: TopoJSON.Topology = config.topojson
-    const featureName = config.mapFeatureName
-    const featureObject = mapData?.objects?.[featureName]
-    if (!featureObject) return
-
-    this._featureCollection = feature(mapData, featureObject) as GeoJSON.FeatureCollection
-    const featureData = (this._featureCollection?.features ?? []) as MapFeature<AreaDatum>[]
-
-    if (this._firstRender) {
-      // Rendering the map for the first time.
-      this._projection.fitExtent([[0, 0], [this._width, this._height]], this._featureCollection)
-      this._initialScale = this._projection.scale()
-      this._center = this._projection.translate()
-
-      if (config.mapFitToPoints) {
-        this._fitToPoints()
-      }
-
-      const zoomExtent = config.zoomExtent
-      this._zoomBehavior.scaleExtent([zoomExtent[0] * this._initialScale, zoomExtent[1] * this._initialScale])
-      this.setZoom(config.zoomFactor || 1)
-
-      if (!config.disableZoom) {
-        this.g.call(this._zoomBehavior)
-        this._applyZoom()
-      }
-
-      this._prevWidth = this._width
-      this._prevHeight = this._height
-    }
-
-    if (this._prevWidth !== this._width || this._prevHeight !== this._height) {
-      this._onResize()
-    }
-
-    this._path.projection(this._projection)
-
-    // Merge passed area data and map feature data
-    const areaData = datamodel.areas
-    areaData.forEach(a => {
-      const feature = featureData.find(f => f.id.toString() === getString(a, config.areaId).toString())
-      if (feature) feature.data = a
-      else if (this._firstRender) console.warn(`Can't find feature by area code ${getString(a, config.areaId)}`)
-    })
-
-    const features = this._featuresGroup
-      .selectAll<SVGPathElement, unknown>(`.${s.feature}`)
-      .data(featureData)
-
-    const featuresEnter = features.enter().append('path').attr('class', s.feature)
-    smartTransition(featuresEnter.merge(features), duration)
-      .attr('d', this._path)
-      .style('fill', (d, i) => d.data ? getColor(d.data, config.areaColor, i) : null)
-      .style('cursor', d => d.data ? getString(d.data, config.areaCursor) : null)
-    features.exit().remove()
-  }
-
-  _renderLinks (duration: number): void {
-    const { config, datamodel } = this
-    const links = datamodel.links
-
-    const edges = this._linksGroup
-      .selectAll<SVGPathElement, MapLink<PointDatum, LinkDatum>>(`.${s.link}`)
-      .data(links, (d, i) => getString(d, config.linkId, i))
-
-    const edgesEnter = edges.enter().append('path').attr('class', s.link)
-      .style('stroke-width', 0)
-
-    smartTransition(edgesEnter.merge(edges), duration)
-      .attr('d', link => {
-        const source = this._projection(getLonLat(link.source, config.longitude, config.latitude))
-        const target = this._projection(getLonLat(link.target, config.longitude, config.latitude))
-        return arc(source, target)
-      })
-      .style('stroke-width', link => getNumber(link, config.linkWidth) / this._currentZoomLevel)
-      .style('cursor', link => getString(link, config.linkCursor))
-      .style('stroke', (link, i) => getColor(link, config.linkColor, i))
-    edges.exit().remove()
-  }
-
-  _renderPoints (duration: number): void {
-    const { config, datamodel } = this
-    const pointData = datamodel.points
-
-    const points = this._pointsGroup
-      .selectAll<SVGGElement, PointDatum>(`.${s.point}`)
-      .data(pointData, (d, i) => getString(d, config.pointId, i))
-
-    // Enter
-    const pointsEnter = points.enter().append('g').attr('class', s.point)
-      .attr('transform', d => {
-        const pos = this._projection(getLonLat(d, config.longitude, config.latitude))
-        return `translate(${pos[0]},${pos[1]})`
-      })
-
-    pointsEnter.append('circle').attr('class', s.pointCircle)
-      .attr('r', 0)
-      .style('fill', (d, i) => getColor(d, config.pointColor, i))
-      .style('stroke-width', d => getNumber(d, config.pointStrokeWidth))
-
-    pointsEnter.append('text').attr('class', s.pointLabel)
-      .style('opacity', 0)
-
-    // Update
-    const pointsMerged = pointsEnter.merge(points)
-    smartTransition(pointsMerged, duration)
-      .attr('transform', d => {
-        const pos = this._projection(getLonLat(d, config.longitude, config.latitude))
-        return `translate(${pos[0]},${pos[1]})`
-      })
-      .style('cursor', d => getString(d, config.pointCursor))
-
-    smartTransition(pointsMerged.select(`.${s.pointCircle}`), duration)
-      .attr('r', d => getNumber(d, config.pointRadius) / this._currentZoomLevel)
-      .style('fill', (d, i) => getColor(d, config.pointColor, i))
-      .style('stroke', (d, i) => getColor(d, config.pointColor, i))
-      .style('stroke-width', d => getNumber(d, config.pointStrokeWidth) / this._currentZoomLevel)
-
-    const pointLabelsMerged = pointsMerged.select(`.${s.pointLabel}`)
-    pointLabelsMerged
-      .text(config.pointLabel ?? '')
-      .style('font-size', d => {
-        if (config.pointLabelPosition === MapPointLabelPosition.Bottom) {
-          return `calc(var(--vis-map-point-label-font-size) / ${this._currentZoomLevel}`
-        }
-        const pointDiameter = 2 * getNumber(d, config.pointRadius)
-        const pointLabelText = getString(d, config.pointLabel) || ''
-        const textLength = pointLabelText.length
-        const fontSize = 0.5 * pointDiameter / Math.pow(textLength, 0.4)
-        return clamp(fontSize, fontSize, 16)
-      })
-      .attr('y', d => {
-        if (config.pointLabelPosition === MapPointLabelPosition.Center) return null
-
-        const pointRadius = getNumber(d, config.pointRadius) / this._currentZoomLevel
-        return pointRadius
-      })
-      .attr('dy', config.pointLabelPosition === MapPointLabelPosition.Center ? '0.32em' : '1em')
-
-    smartTransition(pointLabelsMerged, duration)
-      .style('fill', (d, i) => {
-        if (config.pointLabelPosition === MapPointLabelPosition.Bottom) return null
-
-        const pointColor = getColor(d, config.pointColor, i)
-        const hex = color(isStringCSSVariable(pointColor) ? getCSSVariableValue(pointColor, this.element) : pointColor)?.hex()
-        if (!hex) return null
-
-        const brightness = hexToBrightness(hex)
-        return brightness > config.pointLabelTextBrightnessRatio ? 'var(--vis-map-point-label-text-color-dark)' : 'var(--vis-map-point-label-text-color-light)'
-      })
-      .style('opacity', 1)
-
-    // Exit
-    points.exit().remove()
-
-    // Heatmap
-    this._pointsGroup.style('filter', (config.heatmapMode && this._currentZoomLevel < config.heatmapModeZoomLevelThreshold) ? 'url(#heatmapFilter)' : null)
-    this._pointsGroup.selectAll(`.${s.pointLabel}`).style('display', (config.heatmapMode && (this._currentZoomLevel < config.heatmapModeZoomLevelThreshold)) ? 'none' : null)
-  }
-
-  _fitToPoints (points?: PointDatum[], pad = 0.1): void {
-    const { config, datamodel } = this
-    const pointData = points || datamodel.points
-    if (pointData.length === 0) return
-
-    const featureCollection = {
-      type: 'FeatureCollection',
-      features: [{
-        type: 'Feature',
-        properties: {},
-        geometry: {
-          type: 'MultiPoint',
-          coordinates: pointData.map(p => {
-            return [
-              getNumber(p, d => getNumber(d, config.longitude)),
-              getNumber(p, d => getNumber(d, config.latitude)),
-            ]
-          }),
-        },
-      }],
-      geometries: [],
-    }
-
-    this._projection.fitExtent([
-      [this._width * pad, this._height * pad],
-      [this._width * (1 - pad), this._height * (1 - pad)],
-    ], featureCollection)
-
-    const maxScale = config.zoomExtent[1] * this._initialScale
-    if (this._projection.scale() > maxScale) this._projection.scale(maxScale)
-
-    this._applyZoom()
-  }
-
-  _applyZoom (): void {
-    const translate = this._center ?? this._projection.translate()
-    const scale = this._initialScale * this._currentZoomLevel
-    this.g.call(this._zoomBehavior.transform, zoomIdentity.translate(translate[0], translate[1]).scale(scale))
-  }
-
-  _onResize (): void {
-    this._isResizing = true
-    const prevTranslate = this._projection.translate()
-
-    this._projection.fitExtent([[0, 0], [this._width, this._height]], this._featureCollection)
-    this._initialScale = this._projection.scale()
-    this._center = [
-      this._projection.translate()[0] * this._center[0] / prevTranslate[0],
-      this._projection.translate()[1] * this._center[1] / prevTranslate[1],
-    ]
-    this._applyZoom()
-
-    this._isResizing = false
-    this._prevWidth = this._width
-    this._prevHeight = this._height
-  }
-
-  _onZoom (event: D3ZoomEvent<any, any>): void {
-    if (this._firstRender) return // To prevent double render because of binding zoom behaviour
-    const isMouseEvent = event.sourceEvent !== undefined
-    const isExternalEvent = !event?.sourceEvent && !this._isResizing
-
-    window.cancelAnimationFrame(this._animFrameId)
-    this._animFrameId = window.requestAnimationFrame(this._onZoomHandler.bind(this, event.transform, isMouseEvent, isExternalEvent))
-
-    if (isMouseEvent) {
-      // Update the center coordinate so that the next call to _applyZoom()
-      // will zoom with respect to the current view
-      this._center = [event.transform.x, event.transform.y]
-    }
-    this._currentZoomLevel = (event?.transform.k / this._initialScale) || 1
-  }
-
-  _onZoomHandler (transform: ZoomTransform, isMouseEvent: boolean, isExternalEvent: boolean): void {
-    const scale = transform.k / this._initialScale || 1
-    const center = this._projection.translate()
-
-    this._transform = zoomIdentity
-      .translate(transform.x - center[0] * scale, transform.y - center[1] * scale)
-      .scale(scale)
-
-    const customDuration = isExternalEvent
-      ? this.config.zoomDuration
-      : (isMouseEvent ? 0 : null)
-
-    // Call render functions that depend on this._transform
-    this._renderGroups(customDuration)
-    this._renderLinks(customDuration)
-    this._renderPoints(customDuration)
-  }
-
-  public zoomIn (increment = 0.5): void {
-    this.setZoom(this._currentZoomLevel + increment)
-  }
-
-  public zoomOut (increment = 0.5): void {
-    this.setZoom(this._currentZoomLevel - increment)
-  }
-
-  public setZoom (zoomLevel: number): void {
-    const { config } = this
-    this._currentZoomLevel = clamp(zoomLevel, config.zoomExtent[0], config.zoomExtent[1])
-    this._transform = zoomIdentity
-      .translate(this._center[0] * (1 - this._currentZoomLevel), this._center[1] * (1 - this._currentZoomLevel))
-      .scale(this._currentZoomLevel)
-    // We are using this._applyZoom() instead of directly calling this._render(config.zoomDuration) because
-    // we've to "attach" new transform to the map group element. Otherwise zoomBehavior  will not know
-    // that the zoom state has changed
-    this._applyZoom()
-  }
-
-  public fitView (): void {
-    this._projection.fitExtent([[0, 0], [this._width, this._height]], this._featureCollection)
-    this._currentZoomLevel = (this._projection?.scale() / this._initialScale) || 1
-    this._center = this._projection.translate()
-    // We are using this._applyZoom() instead of directly calling this._render(config.zoomDuration) because
-    // we've to "attach" new transform to the map group element. Otherwise zoomBehavior  will not know
-    // that the zoom state has changed
-    this._applyZoom()
-  }
-
-  destroy (): void {
-    window.cancelAnimationFrame(this._animFrameId)
-  }
-}

package/src/components/topojson-map/types.ts

@@ -1,123 +0,0 @@
-import { Feature, Geometry } from 'geojson'
-import {
-  GeoProjection,
-  geoMercator,
-  geoEquirectangular,
-  geoAzimuthalEqualArea,
-  geoAzimuthalEquidistant,
-  geoGnomonic,
-  geoOrthographic,
-  geoStereographic,
-  geoEqualEarth,
-  geoAlbersUsa,
-  geoAlbers,
-  geoConicConformal,
-  geoConicEqualArea,
-  geoConicEquidistant,
-  geoTransverseMercator,
-  geoNaturalEarth1,
-} from 'd3-geo'
-
-import {
-  geoBromley,
-  geoNaturalEarth2,
-  geoKavrayskiy7,
-  geoHufnagel,
-  geoFoucautSinusoidal,
-  geoFahey,
-  geoEckert1,
-  geoEckert3,
-  geoBoggs,
-  geoCylindricalStereographic,
-  geoCraster,
-  geoBaker,
-  geoArmadillo,
-  geoAitoff,
-  geoRobinson,
-} from 'd3-geo-projection'
-
-export type MapData<AreaDatum, PointDatum = unknown, LinkDatum = unknown> = {
-  areas?: AreaDatum[];
-  points?: PointDatum[];
-  links?: LinkDatum[] ;
-}
-
-export enum MapPointLabelPosition {
-  Center = 'center',
-  Bottom = 'bottom',
-}
-
-export type MapFeature<D> = Feature<Geometry> & { data: D }
-
-export enum MapProjectionKind {
-  // Projections form `d3-geo`
-  Mercator = 'Mercator',
-  Equirectangular = 'Equirectangular',
-  AzimuthalEqualArea = 'AzimuthalEqualArea',
-  AzimuthalEquidistant = 'AzimuthalEquidistant',
-  Gnomonic = 'Gnomonic',
-  Orthographic = 'Orthographic',
-  Stereographic = 'Stereographic',
-  EqualEarth = 'EqualEarth',
-  AlbersUsa = 'AlbersUsa',
-  Albers = 'Albers',
-  ConicConformal = 'ConicConformal',
-  ConicEqualArea = 'ConicEqualArea',
-  ConicEquidistant = 'ConicEquidistant',
-  TransverseMercator = 'TransverseMercator',
-  NaturalEarth1 = 'NaturalEarth1',
-
-  // Projections form `d3-geo-projection`
-  Bromley = 'Bromley',
-  NaturalEarth2 = 'NaturalEarth2',
-  Kavrayskiy7 = 'Kavrayskiy7',
-  Hufnagel = 'Hufnagel',
-  FoucautSinusoidal = 'FoucautSinusoidal',
-  Eckert1 = 'Eckert1',
-  Eckert3 = 'Eckert3',
-  Boggs = 'Boggs',
-  CylindricalStereographic = 'CylindricalStereographic',
-  Craster = 'Craster',
-  Baker = 'Baker',
-  Armadillo = 'Armadillo',
-  Aitoff = 'Aitoff',
-  Fahey = 'Fahey',
-  Robinson = 'Robinson',
-}
-
-export const MapProjection = {
-  // Projections form `d3-geo`
-  [MapProjectionKind.Mercator]: geoMercator,
-  [MapProjectionKind.Equirectangular]: geoEquirectangular,
-  [MapProjectionKind.AzimuthalEqualArea]: geoAzimuthalEqualArea,
-  [MapProjectionKind.AzimuthalEquidistant]: geoAzimuthalEquidistant,
-  [MapProjectionKind.Gnomonic]: geoGnomonic,
-  [MapProjectionKind.Orthographic]: geoOrthographic,
-  [MapProjectionKind.Stereographic]: geoStereographic,
-  [MapProjectionKind.EqualEarth]: geoEqualEarth,
-  [MapProjectionKind.AlbersUsa]: geoAlbersUsa,
-  [MapProjectionKind.Albers]: geoAlbers,
-  [MapProjectionKind.ConicConformal]: geoConicConformal,
-  [MapProjectionKind.ConicEqualArea]: geoConicEqualArea,
-  [MapProjectionKind.ConicEquidistant]: geoConicEquidistant,
-  [MapProjectionKind.TransverseMercator]: geoTransverseMercator,
-  [MapProjectionKind.NaturalEarth1]: geoNaturalEarth1,
-
-  // Projections form `d3-geo-projection`
-  [MapProjectionKind.Bromley]: geoBromley as () => GeoProjection,
-  [MapProjectionKind.NaturalEarth2]: geoNaturalEarth2 as () => GeoProjection,
-  [MapProjectionKind.Kavrayskiy7]: geoKavrayskiy7 as () => GeoProjection,
-  [MapProjectionKind.Hufnagel]: geoHufnagel as () => GeoProjection,
-  [MapProjectionKind.FoucautSinusoidal]: geoFoucautSinusoidal as () => GeoProjection,
-  [MapProjectionKind.Eckert1]: geoEckert1 as () => GeoProjection,
-  [MapProjectionKind.Eckert3]: geoEckert3 as () => GeoProjection,
-  [MapProjectionKind.Boggs]: geoBoggs as () => GeoProjection,
-  [MapProjectionKind.CylindricalStereographic]: geoCylindricalStereographic as () => GeoProjection,
-  [MapProjectionKind.Craster]: geoCraster as () => GeoProjection,
-  [MapProjectionKind.Baker]: geoBaker as () => GeoProjection,
-  [MapProjectionKind.Armadillo]: geoArmadillo as () => GeoProjection,
-  [MapProjectionKind.Aitoff]: geoAitoff as () => GeoProjection,
-  [MapProjectionKind.Fahey]: geoFahey as () => GeoProjection,
-  [MapProjectionKind.Robinson]: geoRobinson as () => GeoProjection,
-}
-

package/src/components/topojson-map/utils.ts

@@ -1,29 +0,0 @@
-import { getNumber } from 'utils/data'
-
-// Config
-import { NumericAccessor } from 'types/accessor'
-
-export function getLonLat<Datum> (d: Datum, pointLongitude: NumericAccessor<Datum>, pointLatitude: NumericAccessor<Datum>): [number, number] {
-  const lat = getNumber(d, pointLatitude)
-  const lon = getNumber(d, pointLongitude)
-  return [lon, lat]
-}
-
-export function arc (source?: number[], target?: number[], curvature?: number): string {
-  if (!target || !source) return 'M0,0,l0,0z'
-  const d = 3
-  const angleOffset = curvature || 0
-  const s = { x: source[0], y: source[1] }
-  const t = { x: target[0], y: target[1] }
-  const ds = { x: (t.x - s.x) / d, y: (t.y - s.y) / d }
-  const dt = { x: (s.x - t.x) / d, y: (s.y - t.y) / d }
-  let angle = 0.16667 * Math.PI * (1 + angleOffset)
-  if (s.x < t.x) angle = -angle
-  const cs = Math.cos(angle)
-  const ss = Math.sin(angle)
-  const ct = Math.cos(-angle)
-  const st = Math.sin(-angle)
-  const dds = { x: (cs * ds.x) - (ss * ds.y), y: (ss * ds.x) + (cs * ds.y) }
-  const ddt = { x: (ct * dt.x) - (st * dt.y), y: (st * dt.x) + (ct * dt.y) }
-  return `M${s.x},${s.y} C${s.x + dds.x},${s.y + dds.y} ${t.x + ddt.x},${t.y + ddt.y} ${t.x},${t.y}`
-}

package/src/components/vis-controls/config.ts

@@ -1,16 +0,0 @@
-import { Config } from 'core/config'
-
-// Local Types
-import { VisControlItemInterface, VisControlsOrientation } from './types'
-
-export interface VisControlsConfigInterface {
-  /** Controls items array, VisControlItemInterface[]. Default: `[]` */
-  items?: VisControlItemInterface[];
-  /** Controls orientation. `VisControlsOrientation.Horizontal` or `VisControlsOrientation.Horizontal`. Default: `VisControlsOrientation.Horizontal` */
-  orientation?: VisControlsOrientation;
-}
-
-export class VisControlsConfig extends Config implements VisControlsConfigInterface {
-  items: VisControlItemInterface[] = []
-  orientation = VisControlsOrientation.Horizontal
-}

package/src/components/vis-controls/index.ts

@@ -1,68 +0,0 @@
-import { Selection, select } from 'd3-selection'
-
-// Local Types
-import { VisControlItemInterface, VisControlsOrientation } from './types'
-
-// Config
-import { VisControlsConfig, VisControlsConfigInterface } from './config'
-
-// Style
-import * as s from './style'
-
-export class VisControls {
-  div: Selection<HTMLDivElement, unknown, null, undefined>
-  element: HTMLDivElement
-  config: VisControlsConfig
-  protected _container: HTMLElement
-  protected _items: Selection<HTMLDivElement, unknown, null, undefined>
-
-  constructor (element: HTMLElement, config?: VisControlsConfigInterface) {
-    this._container = element
-
-    this.div = select(this._container)
-      .append('div')
-      .attr('class', s.root)
-    this.element = this.div.node()
-    this._items = this.div.append('div')
-      .attr('class', s.items)
-
-    if (config) this.update(config)
-  }
-
-  update (config: VisControlsConfigInterface): void {
-    this.config = new VisControlsConfig().init(config)
-    this.render()
-  }
-
-  render (): void {
-    const { config: { items, orientation } } = this
-    this._items
-      .classed(s.horizontalItems, orientation === VisControlsOrientation.Horizontal)
-    const controlItems = this._items.selectAll<HTMLDivElement, VisControlItemInterface>(`.${s.item}`)
-      .data(items)
-
-    const controlItemsEnter = controlItems.enter()
-      .append('div')
-      .attr('class', s.item)
-      .on('click', this._onItemClick.bind(this))
-
-    controlItemsEnter.append('button')
-      .attr('class', s.itemButton)
-
-    const controlItemsMerged = controlItemsEnter.merge(controlItems)
-    controlItemsMerged
-      .classed(s.borderLeft, d => d.borderLeft)
-      .classed(s.borderTop, d => d.borderTop)
-      .classed(s.borderRight, d => d.borderRight)
-      .classed(s.borderBottom, d => d.borderBottom)
-      .classed(s.disabled, d => d.disabled)
-    controlItemsMerged.select(`.${s.itemButton}`)
-      .html(item => item.icon)
-
-    controlItems.exit().remove()
-  }
-
-  _onItemClick (event: MouseEvent, item: VisControlItemInterface): void {
-    item.callback?.(event)
-  }
-}

package/src/components/vis-controls/types.ts

@@ -1,14 +0,0 @@
-export interface VisControlItemInterface {
-  icon: string;
-  callback?: (event: MouseEvent) => any;
-  disabled?: boolean;
-  borderLeft?: boolean;
-  borderTop?: boolean;
-  borderRight?: boolean;
-  borderBottom?: boolean;
-}
-
-export enum VisControlsOrientation {
-  Horizontal = 'horizontal',
-  Vertical = 'vertical',
-}