Skip to content

Commit 1cd5e1e

Browse files
sronveauxsronveaux
committed
First version of map composable to replace mapable mixin
1 parent 6bf79b2 commit 1cd5e1e

File tree

19 files changed

+475
-314
lines changed

19 files changed

+475
-314
lines changed

Diff for: ‎app-starter/components/SampleModule.vue

+17-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
// the module card is a the template for a typical Wegue module
3131
import ModuleCard from '../../src/components/modulecore/ModuleCard';
3232
// we import a so called "mixin" that helps us to interact with the map
33-
import { Mapable } from '../../src/mixins/Mapable';
33+
// import { Mapable } from '../../src/mixins/Mapable';
34+
import { useMap } from '../../src/composables/Map';
3435
// an OpenLayers helper function to display coordinates
3536
import { toStringXY } from 'ol/coordinate';
3637
// an OpenLayer helper function to transform coordinate reference systems
@@ -39,7 +40,7 @@ import { transform } from 'ol/proj.js';
3940
export default {
4041
name: 'sample-module',
4142
// make sure to register the 'Mapable' mixin
42-
mixins: [Mapable],
43+
// mixins: [Mapable],
4344
inheritAttrs: false,
4445
components: {
4546
'wgu-module-card': ModuleCard
@@ -48,12 +49,26 @@ export default {
4849
icon: { type: String, required: false, default: 'md:star' }
4950
},
5051
// here we define variables that are used in the HTML above
52+
setup () {
53+
const { map, layers } = useMap();
54+
return { map, layers };
55+
},
5156
data () {
5257
return {
5358
zoom: '',
5459
center: ''
5560
};
5661
},
62+
watch: {
63+
map: {
64+
handler (newMap) {
65+
if (newMap) {
66+
this.onMapBound();
67+
}
68+
},
69+
immediate: true
70+
}
71+
},
5772
methods: {
5873
/**
5974
* This function is called once the map is bound to the application

Diff for: ‎src/components/attributeTable/AttributeTable.vue

+6-3
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,16 @@
2828

2929
<script>
3030
import { useDisplay } from 'vuetify'
31-
import { Mapable } from '../../mixins/Mapable';
31+
// import { Mapable } from '../../mixins/Mapable';
32+
import { useMap } from '../../composables/Map';
3233
import LayerUtil from '../../util/Layer';
3334
import { WguEventBus } from '../../WguEventBus';
3435
import MapInteractionUtil from '../../util/MapInteraction';
3536
import ViewAnimationUtil from '../../util/ViewAnimation';
3637
3738
export default {
3839
name: 'wgu-attributetable',
39-
mixins: [Mapable],
40+
// mixins: [Mapable],
4041
props: {
4142
/** The ID of the vector layer to display */
4243
layerId: { type: String, required: false, default: null },
@@ -69,8 +70,10 @@ export default {
6970
}
7071
},
7172
setup () {
73+
const { map } = useMap();
7274
const { name: breakpoint } = useDisplay();
73-
return { breakpoint };
75+
76+
return { map, breakpoint };
7477
},
7578
data () {
7679
return {

Diff for: ‎src/components/attributeTable/AttributeTableWin.vue

+40-34
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@
3535

3636
<script>
3737
import ModuleCard from './../modulecore/ModuleCard';
38-
import { Mapable } from '../../mixins/Mapable';
38+
// import { Mapable } from '../../mixins/Mapable';
39+
import { useMap } from '../../composables/Map';
3940
import { useColorTheme } from '../../composables/ColorTheme';
4041
import VectorLayer from 'ol/layer/Vector'
4142
import AttributeTable from './AttributeTable';
@@ -49,21 +50,23 @@ export default {
4950
syncTableMapSelection: { type: Boolean, required: false, default: false }
5051
},
5152
setup () {
53+
const { layers } = useMap();
5254
const { isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme } = useColorTheme();
53-
return { isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme };
55+
56+
return { layers, isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme };
5457
},
5558
data () {
5659
return {
5760
moduleName: 'wgu-attributetable',
58-
layers: [],
59-
displayedLayers: [],
61+
// layers: [],
62+
// displayedLayers: [],
6063
selLayerLid: null
6164
}
6265
},
63-
beforeUnmount () {
64-
this.unregisterLayersCollectionChangedEvent(this.layersChanged);
65-
},
66-
mixins: [Mapable],
66+
// beforeUnmount () {
67+
// this.unregisterLayersCollectionChangedEvent(this.layersChanged);
68+
// },
69+
// mixins: [Mapable],
6770
components: {
6871
'wgu-module-card': ModuleCard,
6972
'wgu-attributetable': AttributeTable
@@ -73,40 +76,43 @@ export default {
7376
* This function is executed, after the map is bound (see mixins/Mapable).
7477
* Bind to the layers from the OpenLayers map.
7578
*/
76-
onMapBound () {
77-
this.layers = this.map.getLayers().getArray();
78-
this.computeDisplayedLayers();
79-
this.registerLayersCollectionChangedEvent(this.layersChanged);
80-
},
81-
layersChanged () {
82-
this.computeDisplayedLayers();
83-
},
84-
computeDisplayedLayers () {
85-
this.displayedLayers = this.layers
79+
// onMapBound () {
80+
// this.layers = this.map.getLayers().getArray();
81+
// this.computeDisplayedLayers();
82+
// this.registerLayersCollectionChangedEvent(this.layersChanged);
83+
// },
84+
// layersChanged () {
85+
// this.computeDisplayedLayers();
86+
// },
87+
// computeDisplayedLayers () {
88+
// this.displayedLayers = this.layers
89+
// .filter(layer =>
90+
// layer instanceof VectorLayer &&
91+
// layer.get('lid') !== 'wgu-measure-layer' &&
92+
// layer.get('lid') !== 'wgu-geolocator-layer'
93+
// )
94+
// .reverse();
95+
// }
96+
},
97+
computed: {
98+
/**
99+
* Reactive property to return the OpenLayers vector layers to be shown in the selection menu.
100+
*/
101+
displayedLayers () {
102+
return this.layers
86103
.filter(layer =>
87104
layer instanceof VectorLayer &&
88105
layer.get('lid') !== 'wgu-measure-layer' &&
89106
layer.get('lid') !== 'wgu-geolocator-layer'
90107
)
91108
.reverse();
92-
}
93-
},
94-
computed: {
109+
},
110+
/**
111+
* Reactive property to return the items object to bind to the selection menu.
112+
*/
95113
displayedItems () {
96-
return this.displayedLayers.map((layer) => { return { title: layer.get('name'), value: layer.get('lid') } })
114+
return this.displayedLayers.map((layer) => { return { title: layer.get('name'), value: layer.get('lid') } });
97115
}
98-
// /**
99-
// * Reactive property to return the OpenLayers vector layers to be shown in the selection menu.
100-
// */
101-
// displayedLayers () {
102-
// return this.layers
103-
// .filter(layer =>
104-
// layer instanceof VectorLayer &&
105-
// layer.get('lid') !== 'wgu-measure-layer' &&
106-
// layer.get('lid') !== 'wgu-geolocator-layer'
107-
// )
108-
// .reverse();
109-
// }
110116
}
111117
};
112118
</script>

Diff for: ‎src/components/bglayerswitcher/BgLayerList.vue

+52-47
Original file line numberDiff line numberDiff line change
@@ -40,58 +40,63 @@
4040
</template>
4141

4242
<script>
43-
import { Mapable } from '../../mixins/Mapable';
43+
// import { Mapable } from '../../mixins/Mapable';
44+
import { useMap } from '../../composables/Map';
4445
import LayerPreviewImage from './LayerPreviewImage';
4546
4647
export default {
4748
name: 'wgu-bglayerlist',
4849
components: {
4950
'wgu-layerpreviewimage': LayerPreviewImage
5051
},
51-
mixins: [Mapable],
52+
// mixins: [Mapable],
5253
props: {
5354
imageWidth: { type: Number, required: true },
5455
imageHeight: { type: Number, required: true },
5556
previewIcon: { type: String, required: true }
5657
},
57-
data () {
58-
return {
59-
layers: [],
60-
displayedLayers: []
61-
}
62-
},
63-
beforeUnmount () {
64-
this.unregisterLayersCollectionChangedEvent(this.layersChanged);
58+
setup () {
59+
const { map, layers } = useMap();
60+
return { map, layers };
6561
},
62+
// data () {
63+
// return {
64+
// layers: [],
65+
// displayedLayers: []
66+
// }
67+
// },
68+
// beforeUnmount () {
69+
// this.unregisterLayersCollectionChangedEvent(this.layersChanged);
70+
// },
6671
methods: {
6772
/**
68-
* This function is executed, after the map is bound (see mixins/Mapable).
69-
* Bind to the layers from the OpenLayers map.
70-
*/
71-
onMapBound () {
72-
this.layers = this.map.getLayers().getArray();
73-
// In Vuetify2, a mandatory slide group automatically selected the first item when value was null.
74-
// In Vuetify3, we should assign it ourselves down here if we want to keep the same behaviour.
75-
// if (!this.selectedLid && this.displayedLayers.length) {
76-
// this.displayedLayers[0].setVisible(true);
77-
// }
78-
this.layers = this.map.getLayers().getArray();
79-
this.computeDisplayedLayers();
80-
this.registerLayersCollectionChangedEvent(this.layersChanged);
81-
},
82-
layersChanged () {
83-
this.computeDisplayedLayers();
84-
},
85-
computeDisplayedLayers () {
86-
this.displayedLayers = this.layers
87-
.filter(layer => layer.get('isBaseLayer'))
88-
.reverse();
89-
},
73+
* This function is executed, after the map is bound (see mixins/Mapable).
74+
* Bind to the layers from the OpenLayers map.
75+
*/
76+
// onMapBound () {
77+
// this.layers = this.map.getLayers().getArray();
78+
// // In Vuetify2, a mandatory slide group automatically selected the first item when value was null.
79+
// // In Vuetify3, we should assign it ourselves down here if we want to keep the same behaviour.
80+
// // if (!this.selectedLid && this.displayedLayers.length) {
81+
// // this.displayedLayers[0].setVisible(true);
82+
// // }
83+
// this.layers = this.map.getLayers().getArray();
84+
// this.computeDisplayedLayers();
85+
// this.registerLayersCollectionChangedEvent(this.layersChanged);
86+
// },
87+
// layersChanged () {
88+
// this.computeDisplayedLayers();
89+
// },
90+
// computeDisplayedLayers () {
91+
// this.displayedLayers = this.layers
92+
// .filter(layer => layer.get('isBaseLayer'))
93+
// .reverse();
94+
// },
9095
/**
91-
* Handler for click on item in layer list:
92-
* Set the selected background layer to visible and hide all other background layers.
93-
* @param {Object} selLid ID of layer selected by the user
94-
*/
96+
* Handler for click on item in layer list:
97+
* Set the selected background layer to visible and hide all other background layers.
98+
* @param {Object} selLid ID of layer selected by the user
99+
*/
95100
onSelectLayer (selLid) {
96101
const selLayer = this.displayedLayers.find(layer => layer.get('lid') === selLid);
97102
selLayer.setVisible(true);
@@ -104,18 +109,18 @@ export default {
104109
},
105110
computed: {
106111
/**
107-
* Reactive property to return the OpenLayers layers marked as 'isBaseLayer'.
108-
*/
109-
// displayedLayers () {
110-
// return this.layers
111-
// .filter(layer => layer.get('isBaseLayer'))
112-
// .reverse();
113-
// },
112+
* Reactive property to return the OpenLayers layers marked as 'isBaseLayer'.
113+
*/
114+
displayedLayers () {
115+
return this.layers
116+
.filter(layer => layer.get('isBaseLayer'))
117+
.reverse();
118+
},
114119
/**
115-
* Reactive property to return the currently visible OpenLayers background layer.
116-
* To disambiguate multiple selected background layers - which may occur programmatically -
117-
* this returns the first in the list of background layers.
118-
*/
120+
* Reactive property to return the currently visible OpenLayers background layer ID.
121+
* To disambiguate multiple selected background layers - which may occur programmatically -
122+
* this returns the first in the list of background layers.
123+
*/
119124
selectedLid () {
120125
return this.displayedLayers.find(layer => layer.getVisible())?.get('lid');
121126
}

0 commit comments

Comments
 (0)