import * as React from 'react' ; import OlLayerBase from 'ol/layer/Base' ; import { Slider } from 'antd' ; import { SliderSingleProps } from 'antd/lib/slider' ; import { ArrayTwoOrMore } from '@terrestris/base-util/dist/types' ; import { CSS_PREFIX } from '../../constants' ; interface DefaultProps { /**
     * The default value(s).
     */ defaultValue : number ; /**
     * layer property that will define the name shown on the lables. Defaults to 'name'.
     */ nameProperty : string ; } export interface export interface BaseProps { /**
     * The layers that should be handled.
     *
     */ layers : ArrayTwoOrMore < OlLayerBase > ; /**
     * An optional CSS class which should be added.
     */ className ? : string ; } export type MultiLayerSliderProps = BaseProps & Partial < DefaultProps > & SliderSingleProps ; class extends React . Component class MultiLayerSlider extends React . Component < MultiLayerSliderProps > { static defaultProps : DefaultProps = { defaultValue : 0 , nameProperty : 'name' } ; private className = `${ CSS_PREFIX }multilayerslider` ; constructs param props constructor ( props ) { super ( props ) ; const { layers } = props ; layers . forEach ( l => l . setOpacity ( 0 ) ) ; layers [ 0 ] . setOpacity ( 1 ) ; } param value return formatTip ( value ) { const { layers , nameProperty } = this . props ; const layerIdx = this . getLayerIndexForSliderValue ( value ) ; let tip ; if ( layers [ layerIdx ] ) { const opacity = Math . round ( layers [ layerIdx ] . get ( 'opacity' ) * 100 ) ; const layer = layers [ layerIdx ] ; const layername = layer . get ( nameProperty ) || `Layer ${ layerIdx + 1 }` ; tip = `${ layername } ${ opacity }%` ; } return tip ; } /**
     * Called when the value of the slider changed.
     */ valueUpdated ( value ) { const layerIdx = this . getLayerIndexForSliderValue ( value ) ; const opacity = this . getOpacityForValue ( value ) ; const layers = this . props . layers ; layers . forEach ( l => l . setOpacity ( 0 ) ) ; if ( layers [ layerIdx ] ) { layers [ layerIdx ] . setOpacity ( 1 - opacity ) ; } if ( layers [ layerIdx - 1 ] && opacity > 0.5 ) { layers [ layerIdx - 1 ] . setOpacity ( opacity - 0.5 ) ; } if ( layers [ layerIdx + 1 ] ) { layers [ layerIdx + 1 ] . setOpacity ( opacity ) ; } } param value return getOpacityForValue ( value ) { const { layers } = this . props ; const length = layers . length - 1 ; const ticksPerLayer = Math . round ( 100 / length ) ; const idx = Math . floor ( value / ticksPerLayer ) ; const opacity = value / ticksPerLayer - ( idx > length ? length : idx ) ; return opacity > 1 ? 1 : opacity ; } param value return getLayerIndexForSliderValue ( value ) { const { layers } = this . props ; const length = layers . length - 1 ; const ticksPerLayer = Math . round ( 100 / length ) ; const idx = Math . floor ( value / ticksPerLayer ) ; return idx > length ? length : idx ; } return getMarks ( ) { const marks = { } ; const { layers , nameProperty } = this . props ; const length = layers . length - 1 ; layers . forEach ( ( layer , index ) => { const layername = layer . get ( nameProperty ) || `Layer ${ index + 1 }` ; const idx = Math . round ( 100 / length * index ) ; marks [ idx ] = layername ; } ) ; return marks ; } /**
     * The render function.
     */ render ( ) { const { layers , defaultValue , className , ... passThroughProps } = this . props ; const finalClassName = className ? `${ className } ${ this . className }` : this . className ; return ( < Slider className = { finalClassName } marks = { this . getMarks ( ) } defaultValue = { defaultValue } min = { 0 } max = { 100 } tipFormatter = { this . formatTip . bind ( this ) } onChange = { this . valueUpdated . bind ( this ) } { ... passThroughProps } />); } } export default MultiLayerSlider ;