Layer opacity control #304
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -18,7 +18,17 @@ | |||||
| {{ layer.get('name') }} | ||||||
| </v-list-item-title> | ||||||
| </template> | ||||||
| <v-list-item | ||||||
| v-if="showOpacityControl" | ||||||
| class="overflow-visible" | ||||||
| > | ||||||
| <wgu-layeropacitycontrol | ||||||
| :layer="layer" | ||||||
| /> | ||||||
| </v-list-item> | ||||||
| <v-list-item | ||||||
| v-if="showLegend" | ||||||
| > | ||||||
| <!-- Remarks: | ||||||
| The legend image item is wrapped by an v-if block to avoid unneccesary image | ||||||
| requests when the layer item is not expanded. | ||||||
|
|
@@ -53,11 +63,13 @@ | |||||
|
|
||||||
| <script> | ||||||
| import LayerLegendImage from './LayerLegendImage' | ||||||
| import LayerOpacityControl from './LayerOpacityControl' | ||||||
|
|
||||||
| export default { | ||||||
| name: 'wgu-layerlistitem', | ||||||
| components: { | ||||||
| 'wgu-layerlegendimage': LayerLegendImage, | ||||||
| 'wgu-layeropacitycontrol': LayerOpacityControl | ||||||
| }, | ||||||
| data () { | ||||||
| return { | ||||||
|
|
@@ -67,7 +79,8 @@ export default { | |||||
| props: { | ||||||
| layer: { type: Object, required: true }, | ||||||
| mapView: { type: Object, required: true }, | ||||||
| showLegends: { type: Boolean, required: true }, | ||||||
| showOpacityControls: { type: Boolean, required: true } | ||||||
| }, | ||||||
| methods: { | ||||||
| /** | ||||||
|
|
@@ -76,6 +89,26 @@ export default { | |||||
| onItemClick () { | ||||||
| this.layer.setVisible(!this.layer.getVisible()); | ||||||
| } | ||||||
| }, | ||||||
| computed: { | ||||||
| /** | ||||||
| * Returns true, if the layer item should show an extension slider with layer details. | ||||||
| **/ | ||||||
|
There was a problem hiding this comment.
Suggested change
There was a problem hiding this comment. Fixed by b74def0. |
||||||
| showDetails () { | ||||||
| return this.showLegend || this.showOpacityControl; | ||||||
| }, | ||||||
| /** | ||||||
| * Returns true, if the layer item should show a legend image. | ||||||
| */ | ||||||
| showLegend () { | ||||||
| return this.showLegends && !!this.layer.get('legend'); | ||||||
| }, | ||||||
| /** | ||||||
| * Returns true, if the layer item should show an opacity control. | ||||||
| */ | ||||||
| showOpacityControl () { | ||||||
| return this.showOpacityControls && !!this.layer.get('opacityControl'); | ||||||
| } | ||||||
| } | ||||||
| }; | ||||||
| </script> | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,31 @@ | ||||||
| <template> | ||||||
| <v-slider | ||||||
| color="secondary" | ||||||
| prepend-icon="opacity" | ||||||
| :value="layer.getOpacity()" | ||||||
| min="0" | ||||||
| max="1" | ||||||
| step="0.01" | ||||||
| thumb-label | ||||||
| hide-details | ||||||
| @input="onOpacitySliderInput" | ||||||
| > | ||||||
| </v-slider> | ||||||
| </template> | ||||||
|
|
||||||
| <script> | ||||||
| export default { | ||||||
| name: 'wgu-layeropacitycontrol', | ||||||
| props: { | ||||||
| layer: { type: Object, required: true } | ||||||
| }, | ||||||
| methods: { | ||||||
| /** | ||||||
| * Handler for input on the opacity slider, updates the layer`s opacity. | ||||||
| **/ | ||||||
|
There was a problem hiding this comment.
Suggested change
There was a problem hiding this comment. Fixed by b74def0. |
||||||
| onOpacitySliderInput (value) { | ||||||
| this.layer.setOpacity(value); | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
| </script> | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -17,7 +17,8 @@ const view = new View({ | |||||
| const moduleProps = { | ||||||
| 'mapView': view, | ||||||
| 'layer': osmLayer, | ||||||
| 'showLegends': true, | ||||||
| 'showOpacityControls': true | ||||||
| }; | ||||||
|
|
||||||
| describe('layerlist/LayerListItem.vue', () => { | ||||||
|
|
@@ -38,7 +39,8 @@ describe('layerlist/LayerListItem.vue', () => { | |||||
| it('has correct props', () => { | ||||||
| expect(vm.mapView).to.equal(view); | ||||||
| expect(vm.layer).to.equal(osmLayer); | ||||||
| expect(vm.showLegends).to.equal(true); | ||||||
| expect(vm.showOpacityControls).to.equal(true) | ||||||
|
There was a problem hiding this comment.
Suggested change
There was a problem hiding this comment. Fixed by b74def0. |
||||||
| }); | ||||||
|
|
||||||
| afterEach(() => { | ||||||
|
|
@@ -81,8 +83,63 @@ describe('layerlist/LayerListItem.vue', () => { | |||||
|
|
||||||
| it('onItemClick toggles layer visibility', () => { | ||||||
| expect(osmLayer.getVisible()).to.equal(true); | ||||||
| vm.onItemClick(); | ||||||
| expect(osmLayer.getVisible()).to.equal(false); | ||||||
| }); | ||||||
| }); | ||||||
|
|
||||||
| describe('computed properties', () => { | ||||||
| let comp; | ||||||
| let vm; | ||||||
| beforeEach(() => { | ||||||
| comp = shallowMount(LayerListItem, { | ||||||
| propsData: moduleProps | ||||||
| }); | ||||||
| vm = comp.vm; | ||||||
| }); | ||||||
|
|
||||||
| it('has correct showLegend property for layer', () => { | ||||||
| expect(vm.showLegend).to.equal(false); | ||||||
|
|
||||||
| const osmLayer2 = new TileLayer({ | ||||||
| source: new OSM(), | ||||||
| legend: true | ||||||
| }); | ||||||
| comp.setProps({ layer: osmLayer2 }); | ||||||
| expect(vm.showLegend).to.equal(true); | ||||||
| }); | ||||||
|
|
||||||
| it('has correct showOpacityControl property for layer', () => { | ||||||
| expect(vm.showOpacityControl).to.equal(false); | ||||||
|
|
||||||
| const osmLayer2 = new TileLayer({ | ||||||
| source: new OSM(), | ||||||
| opacityControl: true | ||||||
| }); | ||||||
| comp.setProps({ layer: osmLayer2 }); | ||||||
| expect(vm.showOpacityControl).to.equal(true); | ||||||
| }); | ||||||
|
|
||||||
| it('has correct showDetails property for layer', () => { | ||||||
| expect(vm.showDetails).to.equal(false); | ||||||
|
|
||||||
| const osmLayer2 = new TileLayer({ | ||||||
| source: new OSM(), | ||||||
| legend: true | ||||||
| }); | ||||||
| comp.setProps({ layer: osmLayer2 }); | ||||||
| expect(vm.showDetails).to.equal(true); | ||||||
|
|
||||||
| const osmLayer3 = new TileLayer({ | ||||||
| source: new OSM(), | ||||||
| opacityControl: true | ||||||
| }); | ||||||
| comp.setProps({ layer: osmLayer3 }); | ||||||
| expect(vm.showDetails).to.equal(true); | ||||||
| }); | ||||||
|
|
||||||
| afterEach(() => { | ||||||
| comp.destroy(); | ||||||
| }); | ||||||
| }); | ||||||
| }); | ||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what does this do?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
From what I can see this has been added in eef26a6. Quoted from map-layer-configuration.md:
Ratio 1 means image requests are the size of the map viewport, 2 means twice the width and height of the map viewport. Must be 1 or higher.The whole purpose here is to sync the documentation example to the current app-conf.json, as I added new properties. Since this hasn`t been done for quite some time, some unrelated changes to this PR will pop up in the documentation file.