import { Layer } from "./Layer" ; import "../src/Lines.css" ; export class Lines extends Layer { dataEdges ; _edgesTransform ; constructor ( ) { super ( ) ; } data ( _ ) { const retVal = Layer . prototype . data . apply ( this , arguments ) ; if ( arguments . length ) { this . dataEdges = [ ] ; _ . forEach ( function ( row ) { this . dataEdges . push ( { type : "LineString" , coordinates : [ [ row [ 1 ] , row [ 0 ] ] , [ row [ 3 ] , row [ 2 ] ] ] } ) ; } , this ) ; } return retVal ; } layerEnter ( base , svgElement , domElement ) { Layer . prototype . layerEnter . apply ( this , arguments ) ; svgElement . append ( "defs" ) . append ( "marker" ) . attr ( "class" , "marker" ) . attr ( "id" , this . _id + "_arrowHead" ) . attr ( "viewBox" , "0 0 10 10" ) . attr ( "refX" , 10 ) . attr ( "refY" , 5 ) . attr ( "markerWidth" , 16 ) . attr ( "markerHeight" , 16 ) . attr ( "markerUnits" , "strokeWidth" ) . attr ( "orient" , "auto" ) . append ( "polyline" ) . attr ( "points" , "0,0 10,5 0,10 1,5" ) ; this . _edgesTransform = svgElement . append ( "g" ) ; } _edgesPaths ; layerUpdate ( base ) { Layer . prototype . layerUpdate . apply ( this , arguments ) ; this . _edgesTransform . style ( "opacity" , this . opacity ( ) ) ; const edgesPaths = this . _edgesTransform . selectAll ( ".dataEdge" ) . data ( this . visible ( ) ? this . dataEdges : [ ] ) ; this . _edgesPaths = edgesPaths . enter ( ) . append ( "path" ) . attr ( "class" , "dataEdge" ) . attr ( "marker-end" , "url(#" + this . _id + "_arrowHead)" ) . merge ( edgesPaths ) . attr ( "d" , base . _d3GeoPath ) ; edgesPaths . exit ( ) . remove ( ) ; } layerZoomed ( base ) { Layer . prototype . layerZoomed . apply ( this , arguments ) ; this . _edgesPaths . attr ( "stroke-width" , `${ 0.5 / base . zoomScale ( ) }px` ) ; } opacity : { ( ) : number ; ( _ ) : Lines ; } ; } Lines . prototype . _class += " map_Lines" ; Lines . prototype . publish ( "opacity" , 1.0 , "number" , "Opacity" , null , { tags : [ "Advanced" ] } ) ;