Single constrLine

This commit is contained in:
muerwre 2019-02-22 09:21:53 +07:00
parent 2e26fecf34
commit e33f3558ba

View file

@ -5,15 +5,14 @@ interface InteractivePolylineOptions extends PolylineOptions {
constraintsStyle?: PolylineOptions, constraintsStyle?: PolylineOptions,
} }
export class InteractivePoly extends Polyline { export class Component extends Polyline {
constructor(latlngs: LatLngExpression[] | LatLngExpression[][], options?: InteractivePolylineOptions) { constructor(latlngs: LatLngExpression[] | LatLngExpression[][], options?: InteractivePolylineOptions) {
super(latlngs, options); super(latlngs, options);
this.constraintsStyle = { ...this.constraintsStyle, ...options.constraintsStyle }; this.constraintsStyle = { ...this.constraintsStyle, ...options.constraintsStyle };
this.maxMarkers = options.maxMarkers || this.maxMarkers; this.maxMarkers = options.maxMarkers || this.maxMarkers;
this.constr1 = new Polyline([], this.constraintsStyle).addTo(this.constraintsLayer); this.constrLine = new Polyline([], this.constraintsStyle).addTo(this.constraintsLayer);
this.constr2 = new Polyline([], this.constraintsStyle).addTo(this.constraintsLayer);
} }
setPoints = (latlngs: LatLng[]) => { setPoints = (latlngs: LatLng[]) => {
@ -149,20 +148,13 @@ export class InteractivePoly extends Polyline {
}; };
setConstraints = (prev?: LatLng, marker?: LatLng, next?: LatLng) => { setConstraints = (prev?: LatLng, marker?: LatLng, next?: LatLng) => {
if (!prev && this._map.hasLayer(this.constr1)) { const coords = [];
this._map.removeLayer(this.constr1);
} else if (prev && !this._map.hasLayer(this.constr1)) {
this._map.removeLayer(this.constr1);
}
if (!next && this._map.hasLayer(this.constr2)) { if (prev) coords.push(prev);
this._map.removeLayer(this.constr2); coords.push(marker);
} else if (next && !this._map.hasLayer(this.constr2)) { if (next) coords.push(next);
this._map.removeLayer(this.constr2);
}
if (prev) this.constr1.setLatLngs([prev, marker]); this.constrLine.setLatLngs(coords);
if (next) this.constr2.setLatLngs([next, marker]);
}; };
markers: Marker[] = []; markers: Marker[] = [];
@ -172,21 +164,21 @@ export class InteractivePoly extends Polyline {
constraintsStyle: InteractivePolylineOptions['constraintsStyle'] = { constraintsStyle: InteractivePolylineOptions['constraintsStyle'] = {
weight: 6, weight: 6,
color: 'red', color: 'red',
dashArray: '2, 10', dashArray: '5, 10',
opacity: 0.5, opacity: 0.5,
}; };
constr1: Polyline; constrLine: Polyline;
constr2: Polyline;
is_editing: boolean = true; is_editing: boolean = true;
is_dragging: boolean = false; is_dragging: boolean = false;
vertex_index?: number = null; vertex_index?: number = null;
markers_visible: boolean = true;
} }
InteractivePoly.addInitHook(function () { Component.addInitHook(function () {
this.once('add', (event) => { this.once('add', (event) => {
console.log('bup');
if (event.target instanceof InteractivePoly) { if (event.target instanceof InteractivePoly) {
this.map = event.target._map; this.map = event.target._map;
this.markerLayer.addTo(event.target._map); this.markerLayer.addTo(event.target._map);
@ -203,6 +195,7 @@ InteractivePoly.addInitHook(function () {
}); });
}); });
export const InteractivePoly = Component;
/* /*
events: events:
vertexdragstart, vertexdragstart,