Add chart view model
This commit is contained in:
parent
2792b20e80
commit
c2e4bd1bc4
@ -52,8 +52,11 @@ export default class MapViewModel extends ViewModel {
|
|||||||
/** @type {?number} */
|
/** @type {?number} */
|
||||||
markerOver: null,
|
markerOver: null,
|
||||||
/** @type {?number} */
|
/** @type {?number} */
|
||||||
markerSelect: null
|
markerSelect: null,
|
||||||
|
// click handler
|
||||||
|
onMenuToggle: null
|
||||||
});
|
});
|
||||||
|
this.model.onMenuToggle = () => this.onMapResize();
|
||||||
this.state = state;
|
this.state = state;
|
||||||
/** @type HTMLElement */
|
/** @type HTMLElement */
|
||||||
this.mapElement = document.querySelector('#map-canvas');
|
this.mapElement = document.querySelector('#map-canvas');
|
||||||
@ -61,6 +64,11 @@ export default class MapViewModel extends ViewModel {
|
|||||||
this.api = null;
|
this.api = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.bindAll();
|
||||||
|
this.setObservers();
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dynamic change of map api
|
* Dynamic change of map api
|
||||||
* @param {string} apiName API name
|
* @param {string} apiName API name
|
||||||
@ -102,10 +110,16 @@ export default class MapViewModel extends ViewModel {
|
|||||||
if (this.state.currentTrack) {
|
if (this.state.currentTrack) {
|
||||||
this.api.displayTrack(this.state.currentTrack, this.savedBounds === null);
|
this.api.displayTrack(this.state.currentTrack, this.savedBounds === null);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setObservers() {
|
||||||
config.onChanged('mapApi', (mapApi) => {
|
config.onChanged('mapApi', (mapApi) => {
|
||||||
this.loadMapAPI(mapApi);
|
this.loadMapAPI(mapApi);
|
||||||
});
|
});
|
||||||
this.state.onChanged('currentTrack', (track) => {
|
this.state.onChanged('currentTrack', (track) => {
|
||||||
|
if (!this.api) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
this.api.clearMap();
|
this.api.clearMap();
|
||||||
if (track) {
|
if (track) {
|
||||||
uObserve.observe(track, 'positions', () => {
|
uObserve.observe(track, 'positions', () => {
|
||||||
@ -207,4 +221,10 @@ export default class MapViewModel extends ViewModel {
|
|||||||
<g><path stroke="black" fill="${fill}" d="${MapViewModel.getMarkerPath(isLarge)}"/>${isExtra ? MapViewModel.getMarkerExtra(isLarge) : ''}</g></svg>`;
|
<g><path stroke="black" fill="${fill}" d="${MapViewModel.getMarkerPath(isLarge)}"/>${isExtra ? MapViewModel.getMarkerExtra(isLarge) : ''}</g></svg>`;
|
||||||
return `data:image/svg+xml,${encodeURIComponent(svg)}`;
|
return `data:image/svg+xml,${encodeURIComponent(svg)}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMapResize() {
|
||||||
|
if (this.api) {
|
||||||
|
this.api.updateSize();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -171,7 +171,7 @@ describe('MapViewModel tests', () => {
|
|||||||
// given
|
// given
|
||||||
spyOn(vm, 'loadMapAPI');
|
spyOn(vm, 'loadMapAPI');
|
||||||
vm.api = mockApi;
|
vm.api = mockApi;
|
||||||
vm.onReady();
|
vm.setObservers();
|
||||||
const newApi = 'newapi';
|
const newApi = 'newapi';
|
||||||
// when
|
// when
|
||||||
config.mapApi = newApi;
|
config.mapApi = newApi;
|
||||||
@ -187,7 +187,7 @@ describe('MapViewModel tests', () => {
|
|||||||
// given
|
// given
|
||||||
vm.api = mockApi;
|
vm.api = mockApi;
|
||||||
state.currentTrack = null;
|
state.currentTrack = null;
|
||||||
vm.onReady();
|
vm.setObservers();
|
||||||
uObserve.setSilently(state, 'currentTrack', track);
|
uObserve.setSilently(state, 'currentTrack', track);
|
||||||
// when
|
// when
|
||||||
state.currentTrack = null;
|
state.currentTrack = null;
|
||||||
@ -203,7 +203,7 @@ describe('MapViewModel tests', () => {
|
|||||||
// given
|
// given
|
||||||
vm.api = mockApi;
|
vm.api = mockApi;
|
||||||
state.currentTrack = null;
|
state.currentTrack = null;
|
||||||
vm.onReady();
|
vm.setObservers();
|
||||||
// when
|
// when
|
||||||
state.currentTrack = track;
|
state.currentTrack = track;
|
||||||
// then
|
// then
|
||||||
|
Loading…
x
Reference in New Issue
Block a user