Skip to content

Commit

Permalink
First version of map composable to replace mapable mixin
Browse files Browse the repository at this point in the history
  • Loading branch information
@sronveaux
sronveaux committed Oct 19, 2024
1 parent 6bf79b2 commit 1cd5e1e
Show file tree
Hide file tree
Showing 19 changed files with 475 additions and 314 deletions.
19 changes: 17 additions & 2 deletions app-starter/components/SampleModule.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
// the module card is a the template for a typical Wegue module
import ModuleCard from '../../src/components/modulecore/ModuleCard';
// we import a so called "mixin" that helps us to interact with the map
import { Mapable } from '../../src/mixins/Mapable';
// import { Mapable } from '../../src/mixins/Mapable';
import { useMap } from '../../src/composables/Map';
// an OpenLayers helper function to display coordinates
import { toStringXY } from 'ol/coordinate';
// an OpenLayer helper function to transform coordinate reference systems
Expand All @@ -39,7 +40,7 @@ import { transform } from 'ol/proj.js';
export default {
name: 'sample-module',
// make sure to register the 'Mapable' mixin
mixins: [Mapable],
// mixins: [Mapable],
inheritAttrs: false,
components: {
'wgu-module-card': ModuleCard
Expand All @@ -48,12 +49,26 @@ export default {
icon: { type: String, required: false, default: 'md:star' }
},
// here we define variables that are used in the HTML above
setup () {
const { map, layers } = useMap();
return { map, layers };
},
data () {
return {
zoom: '',
center: ''
};
},
watch: {
map: {
handler (newMap) {
if (newMap) {
this.onMapBound();
}
},
immediate: true
}
},
methods: {
/**
* This function is called once the map is bound to the application
Expand Down
9 changes: 6 additions & 3 deletions src/components/attributeTable/AttributeTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,16 @@

<script>
import { useDisplay } from 'vuetify'
import { Mapable } from '../../mixins/Mapable';
// import { Mapable } from '../../mixins/Mapable';
import { useMap } from '../../composables/Map';
import LayerUtil from '../../util/Layer';
import { WguEventBus } from '../../WguEventBus';
import MapInteractionUtil from '../../util/MapInteraction';
import ViewAnimationUtil from '../../util/ViewAnimation';
export default {
name: 'wgu-attributetable',
mixins: [Mapable],
// mixins: [Mapable],
props: {
/** The ID of the vector layer to display */
layerId: { type: String, required: false, default: null },
Expand Down Expand Up @@ -69,8 +70,10 @@ export default {
}
},
setup () {
const { map } = useMap();
const { name: breakpoint } = useDisplay();
return { breakpoint };
return { map, breakpoint };
},
data () {
return {
Expand Down
74 changes: 40 additions & 34 deletions src/components/attributeTable/AttributeTableWin.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@

<script>
import ModuleCard from './../modulecore/ModuleCard';
import { Mapable } from '../../mixins/Mapable';
// import { Mapable } from '../../mixins/Mapable';
import { useMap } from '../../composables/Map';
import { useColorTheme } from '../../composables/ColorTheme';
import VectorLayer from 'ol/layer/Vector'
import AttributeTable from './AttributeTable';
Expand All @@ -49,21 +50,23 @@ export default {
syncTableMapSelection: { type: Boolean, required: false, default: false }
},
setup () {
const { layers } = useMap();
const { isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme } = useColorTheme();
return { isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme };
return { layers, isDarkTheme, isPrimaryDark, isPrimaryDarkWithLightTheme };
},
data () {
return {
moduleName: 'wgu-attributetable',
layers: [],
displayedLayers: [],
// layers: [],
// displayedLayers: [],
selLayerLid: null
}
},
beforeUnmount () {
this.unregisterLayersCollectionChangedEvent(this.layersChanged);
},
mixins: [Mapable],
// beforeUnmount () {
// this.unregisterLayersCollectionChangedEvent(this.layersChanged);
// },
// mixins: [Mapable],
components: {
'wgu-module-card': ModuleCard,
'wgu-attributetable': AttributeTable
Expand All @@ -73,40 +76,43 @@ export default {
* This function is executed, after the map is bound (see mixins/Mapable).
* Bind to the layers from the OpenLayers map.
*/
onMapBound () {
this.layers = this.map.getLayers().getArray();
this.computeDisplayedLayers();
this.registerLayersCollectionChangedEvent(this.layersChanged);
},
layersChanged () {
this.computeDisplayedLayers();
},
computeDisplayedLayers () {
this.displayedLayers = this.layers
// onMapBound () {
// this.layers = this.map.getLayers().getArray();
// this.computeDisplayedLayers();
// this.registerLayersCollectionChangedEvent(this.layersChanged);
// },
// layersChanged () {
// this.computeDisplayedLayers();
// },
// computeDisplayedLayers () {
// this.displayedLayers = this.layers
// .filter(layer =>
// layer instanceof VectorLayer &&
// layer.get('lid') !== 'wgu-measure-layer' &&
// layer.get('lid') !== 'wgu-geolocator-layer'
// )
// .reverse();
// }
},
computed: {
/**
* Reactive property to return the OpenLayers vector layers to be shown in the selection menu.
*/
displayedLayers () {
return this.layers
.filter(layer =>
layer instanceof VectorLayer &&
layer.get('lid') !== 'wgu-measure-layer' &&
layer.get('lid') !== 'wgu-geolocator-layer'
)
.reverse();
}
},
computed: {
},
/**
* Reactive property to return the items object to bind to the selection menu.
*/
displayedItems () {
return this.displayedLayers.map((layer) => { return { title: layer.get('name'), value: layer.get('lid') } })
return this.displayedLayers.map((layer) => { return { title: layer.get('name'), value: layer.get('lid') } });
}
// /**
// * Reactive property to return the OpenLayers vector layers to be shown in the selection menu.
// */
// displayedLayers () {
// return this.layers
// .filter(layer =>
// layer instanceof VectorLayer &&
// layer.get('lid') !== 'wgu-measure-layer' &&
// layer.get('lid') !== 'wgu-geolocator-layer'
// )
// .reverse();
// }
}
};
</script>
Expand Down
99 changes: 52 additions & 47 deletions src/components/bglayerswitcher/BgLayerList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,58 +40,63 @@
</template>

<script>
import { Mapable } from '../../mixins/Mapable';
// import { Mapable } from '../../mixins/Mapable';
import { useMap } from '../../composables/Map';
import LayerPreviewImage from './LayerPreviewImage';
export default {
name: 'wgu-bglayerlist',
components: {
'wgu-layerpreviewimage': LayerPreviewImage
},
mixins: [Mapable],
// mixins: [Mapable],
props: {
imageWidth: { type: Number, required: true },
imageHeight: { type: Number, required: true },
previewIcon: { type: String, required: true }
},
data () {
return {
layers: [],
displayedLayers: []
}
},
beforeUnmount () {
this.unregisterLayersCollectionChangedEvent(this.layersChanged);
setup () {
const { map, layers } = useMap();
return { map, layers };
},
// data () {
// return {
// layers: [],
// displayedLayers: []
// }
// },
// beforeUnmount () {
// this.unregisterLayersCollectionChangedEvent(this.layersChanged);
// },
methods: {
/**
* This function is executed, after the map is bound (see mixins/Mapable).
* Bind to the layers from the OpenLayers map.
*/
onMapBound () {
this.layers = this.map.getLayers().getArray();
// In Vuetify2, a mandatory slide group automatically selected the first item when value was null.
// In Vuetify3, we should assign it ourselves down here if we want to keep the same behaviour.
// if (!this.selectedLid && this.displayedLayers.length) {
// this.displayedLayers[0].setVisible(true);
// }
this.layers = this.map.getLayers().getArray();
this.computeDisplayedLayers();
this.registerLayersCollectionChangedEvent(this.layersChanged);
},
layersChanged () {
this.computeDisplayedLayers();
},
computeDisplayedLayers () {
this.displayedLayers = this.layers
.filter(layer => layer.get('isBaseLayer'))
.reverse();
},
* This function is executed, after the map is bound (see mixins/Mapable).
* Bind to the layers from the OpenLayers map.
*/
// onMapBound () {
// this.layers = this.map.getLayers().getArray();
// // In Vuetify2, a mandatory slide group automatically selected the first item when value was null.
// // In Vuetify3, we should assign it ourselves down here if we want to keep the same behaviour.
// // if (!this.selectedLid && this.displayedLayers.length) {
// // this.displayedLayers[0].setVisible(true);
// // }
// this.layers = this.map.getLayers().getArray();
// this.computeDisplayedLayers();
// this.registerLayersCollectionChangedEvent(this.layersChanged);
// },
// layersChanged () {
// this.computeDisplayedLayers();
// },
// computeDisplayedLayers () {
// this.displayedLayers = this.layers
// .filter(layer => layer.get('isBaseLayer'))
// .reverse();
// },
/**
* Handler for click on item in layer list:
* Set the selected background layer to visible and hide all other background layers.
* @param {Object} selLid ID of layer selected by the user
*/
* Handler for click on item in layer list:
* Set the selected background layer to visible and hide all other background layers.
* @param {Object} selLid ID of layer selected by the user
*/
onSelectLayer (selLid) {
const selLayer = this.displayedLayers.find(layer => layer.get('lid') === selLid);
selLayer.setVisible(true);
Expand All @@ -104,18 +109,18 @@ export default {
},
computed: {
/**
* Reactive property to return the OpenLayers layers marked as 'isBaseLayer'.
*/
// displayedLayers () {
// return this.layers
// .filter(layer => layer.get('isBaseLayer'))
// .reverse();
// },
* Reactive property to return the OpenLayers layers marked as 'isBaseLayer'.
*/
displayedLayers () {
return this.layers
.filter(layer => layer.get('isBaseLayer'))
.reverse();
},
/**
* Reactive property to return the currently visible OpenLayers background layer.
* To disambiguate multiple selected background layers - which may occur programmatically -
* this returns the first in the list of background layers.
*/
* Reactive property to return the currently visible OpenLayers background layer ID.
* To disambiguate multiple selected background layers - which may occur programmatically -
* this returns the first in the list of background layers.
*/
selectedLid () {
return this.displayedLayers.find(layer => layer.getVisible())?.get('lid');
}
Expand Down
Loading

0 comments on commit 1cd5e1e

Please sign in to comment.