@ -15,9 +15,15 @@
///
///
import L , { LatLngExpression , LeafletMouseEvent } from 'leaflet' ; import L , { LatLngExpression , LeafletMouseEvent } from 'leaflet' ;
import { createTooltip } from './maps-utils' ; import { createTooltip , isCutPolygon } from './maps-utils' ;
import { functionValueCalculator , parseWithTranslation , safeExecute } from './common-maps-utils' ; import {
import { FormattedData , PolygonSettings } from './map-models' ; fillPattern ,
functionValueCalculator ,
parseWithTranslation ,
processPattern ,
safeExecute
} from './common-maps-utils' ;
import { FormattedData , MarkerSettings , PolygonSettings } from './map-models' ;
export class Polygon { export class Polygon {
@ -26,38 +32,47 @@ export class Polygon {
data : FormattedData ; data : FormattedData ;
dataSources : FormattedData [ ] ; dataSources : FormattedData [ ] ;
constructor ( public map , polyData : FormattedData , dataSources : FormattedData [ ] , private settings : PolygonSettings , onDragendListener ? ) { constructor ( public map , data : FormattedData , dataSources : FormattedData [ ] , private settings : PolygonSettings ,
private onDragendListener ? ) {
this . dataSources = dataSources ; this . dataSources = dataSources ;
this . data = polyD ata; this . data = d ata;
const polygonColor = this . getPolygonColor ( settings ) ; const polygonColor = this . getPolygonColor ( settings ) ;
this . leafletPoly = L . polygon ( polyData [ this . settings . polygonKeyName ] , { const polygonStrokeColor = this . getPolygonStrokeColor ( settings ) ;
const polyData = data [ this . settings . polygonKeyName ] ;
const polyConstructor = isCutPolygon ( polyData ) || polyData . length > 2 ? L.polygon : L.rectangle ;
this . leafletPoly = polyConstructor ( polyData , {
fill : true , fill : true ,
fillColor : polygonColor , fillColor : polygonColor ,
color : settings.polygonStrokeColor , color : polygonStrokeColor ,
weight : settings.polygonStrokeWeight , weight : settings.polygonStrokeWeight ,
fillOpacity : settings.polygonOpacity , fillOpacity : settings.polygonOpacity ,
opacity : settings.polygonStrokeOpacity , opacity : settings.polygonStrokeOpacity ,
pmIgnore : ! settings . editablePolygon pmIgnore : ! settings . editablePolygon
} ) . addTo ( this . map ) ; } ) . addTo ( this . map ) ;
if ( settings . editablePolygon && onDragendListener ) { this . updateLabel ( settings ) ;
this . leafletPoly . on ( 'pm:edit' , ( e ) = > onDragendListener ( e , this . data ) ) ;
}
if ( settings . showPolygonTooltip ) { if ( settings . showPolygonTooltip ) {
this . tooltip = createTooltip ( this . leafletPoly , settings , polyData . $datasource ) ; this . tooltip = createTooltip ( this . leafletPoly , settings , data . $datasource ) ;
this . updateTooltip ( polyData ) ; this . updateTooltip ( data ) ;
}
if ( settings . polygonClick ) {
this . leafletPoly . on ( 'click' , ( event : LeafletMouseEvent ) = > {
for ( const action in this . settings . polygonClick ) {
if ( typeof ( this . settings . polygonClick [ action ] ) === 'function' ) {
this . settings . polygonClick [ action ] ( event . originalEvent , polyData . $datasource ) ;
}
}
} ) ;
} }
this . createEventListeners ( ) ;
}
private createEventListeners() {
if ( this . settings . editablePolygon && this . onDragendListener ) {
this . leafletPoly . on ( 'pm:edit' , ( e ) = > this . onDragendListener ( e , this . data ) ) ;
}
if ( this . settings . polygonClick ) {
this . leafletPoly . on ( 'click' , ( event : LeafletMouseEvent ) = > {
for ( const action in this . settings . polygonClick ) {
if ( typeof ( this . settings . polygonClick [ action ] ) === 'function' ) {
this . settings . polygonClick [ action ] ( event . originalEvent , this . data . $datasource ) ;
}
}
} ) ;
}
} }
updateTooltip ( data : FormattedData ) { updateTooltip ( data : FormattedData ) {
@ -67,13 +82,54 @@ export class Polygon {
this . tooltip . setContent ( parseWithTranslation . parseTemplate ( pattern , data , true ) ) ; this . tooltip . setContent ( parseWithTranslation . parseTemplate ( pattern , data , true ) ) ;
} }
updateLabel ( settings : PolygonSettings ) {
this . leafletPoly . unbindTooltip ( ) ;
if ( settings . showPolygonLabel ) {
if ( ! this . map . polygonLabelText || settings . usePolygonLabelFunction ) {
const pattern = settings . usePolygonLabelFunction ?
safeExecute ( settings . polygonLabelFunction , [ this . data , this . dataSources , this . data . dsIndex ] ) : settings . polygonLabel ;
this . map . polygonLabelText = parseWithTranslation . prepareProcessPattern ( pattern , true ) ;
this . map . replaceInfoLabelPolygon = processPattern ( this . map . polygonLabelText , this . data ) ;
}
settings . polygonLabelText = fillPattern ( this . map . polygonLabelText , this . map . replaceInfoLabelPolygon , this . data ) ;
this . leafletPoly . bindTooltip ( ` <div style="color: ${ settings . polygonLabelColor } ;"><b> ${ settings . polygonLabelText } </b></div> ` ,
{ className : 'tb-polygon-label' , permanent : true , sticky : true , direction : 'center' } )
. openTooltip ( this . leafletPoly . getBounds ( ) . getCenter ( ) ) ;
}
}
updatePolygon ( data : FormattedData , dataSources : FormattedData [ ] , settings : PolygonSettings ) { updatePolygon ( data : FormattedData , dataSources : FormattedData [ ] , settings : PolygonSettings ) {
this . data = data ; this . data = data ;
this . dataSources = dataSources ; this . dataSources = dataSources ;
this . leafletPoly . setLatLngs ( data [ this . settings . polygonKeyName ] ) ; const polyData = data [ this . settings . polygonKeyName ] ;
if ( isCutPolygon ( polyData ) || polyData . length > 2 ) {
if ( this . leafletPoly instanceof L . Rectangle ) {
this . map . removeLayer ( this . leafletPoly ) ;
const polygonColor = this . getPolygonColor ( settings ) ;
const polygonStrokeColor = this . getPolygonStrokeColor ( settings ) ;
this . leafletPoly = L . polygon ( polyData , {
fill : true ,
fillColor : polygonColor ,
color : polygonStrokeColor ,
weight : settings.polygonStrokeWeight ,
fillOpacity : settings.polygonOpacity ,
opacity : settings.polygonStrokeOpacity ,
pmIgnore : ! settings . editablePolygon
} ) . addTo ( this . map ) ;
} else {
this . leafletPoly . setLatLngs ( polyData ) ;
}
} else if ( polyData . length === 2 ) {
const bounds = new L . LatLngBounds ( polyData ) ;
// @ts-ignore
this . leafletPoly . setBounds ( bounds ) ;
}
if ( settings . showPolygonTooltip ) { if ( settings . showPolygonTooltip ) {
this . updateTooltip ( this . data ) ; this . updateTooltip ( this . data ) ;
} }
if ( settings . showPolygonLabel ) {
this . updateLabel ( settings ) ;
}
this . updatePolygonColor ( settings ) ; this . updatePolygonColor ( settings ) ;
} }
@ -83,10 +139,11 @@ export class Polygon {
updatePolygonColor ( settings : PolygonSettings ) { updatePolygonColor ( settings : PolygonSettings ) {
const polygonColor = this . getPolygonColor ( settings ) ; const polygonColor = this . getPolygonColor ( settings ) ;
const polygonStrokeColor = this . getPolygonStrokeColor ( settings ) ;
const style : L.PathOptions = { const style : L.PathOptions = {
fill : true , fill : true ,
fillColor : polygonColor , fillColor : polygonColor ,
color : settings. polygonStrokeColor, color : polygonStrokeColor ,
weight : settings.polygonStrokeWeight , weight : settings.polygonStrokeWeight ,
fillOpacity : settings.polygonOpacity , fillOpacity : settings.polygonOpacity ,
opacity : settings.polygonStrokeOpacity opacity : settings.polygonStrokeOpacity
@ -107,4 +164,9 @@ export class Polygon {
return functionValueCalculator ( settings . usePolygonColorFunction , settings . polygonColorFunction , return functionValueCalculator ( settings . usePolygonColorFunction , settings . polygonColorFunction ,
[ this . data , this . dataSources , this . data . dsIndex ] , settings . polygonColor ) ; [ this . data , this . dataSources , this . data . dsIndex ] , settings . polygonColor ) ;
} }
private getPolygonStrokeColor ( settings : PolygonSettings ) : string | null {
return functionValueCalculator ( settings . usePolygonStrokeColorFunction , settings . polygonStrokeColorFunction ,
[ this . data , this . dataSources , this . data . dsIndex ] , settings . polygonStrokeColor ) ;
}
} }
Sergey Matvienko
5 years ago