diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index 16342de1..ffb8c166 100644 --- a/src/components/FlatmapVuer.vue +++ b/src/components/FlatmapVuer.vue @@ -2150,6 +2150,20 @@ export default { return Array.from(new Set(labels)) } }, + /** + * @public + * Function to get and store the state (object) of the map in + * the provided argument + */ + getVisibilityState: function (state) { + const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection'] + refs.forEach(ref => { + let comp = this.$refs[ref] + if (comp) { + state[ref] = comp.getState() + } + }) + }, /** * @public * Function to get the state (object) of the map. @@ -2171,10 +2185,23 @@ export default { state['colour'] = this.colourRadio state['outlinesRadio'] = this.outlinesRadio state['background'] = this.currentBackground + this.getVisibilityState(state) return state } return undefined }, + setVisibilityState: function (state) { + const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection'] + refs.forEach(ref => { + const settings = state[ref] + if (settings) { + const comp = this.$refs[ref] + if (comp) { + comp.setState(settings) + } + } + }) + }, /** * @public * Function to set state (object) for the map. @@ -2230,6 +2257,7 @@ export default { } } } + this.setVisibilityState(state) } }, /** diff --git a/src/components/SelectionsGroup.vue b/src/components/SelectionsGroup.vue index 035bc43f..2672853d 100644 --- a/src/components/SelectionsGroup.vue +++ b/src/components/SelectionsGroup.vue @@ -162,7 +162,6 @@ export default { // Update the stated to send to the emit this.$emit('checkboxMouseEnter', { key: key, value: value, selections: this.selections, checked: this.checkedItems}) }, - handleCheckedItemsChange: function (value) { let checkedCount = value.length this.checkAll = checkedCount === this.selections.length @@ -188,6 +187,33 @@ export default { } return {} }, + getState: function() { + let checkedCount = this.checkedItems.length + const checkAll = checkedCount === this.selections.length + return { + checkAll, + checked: !checkAll ? this.checkedItems : [] + } + }, + setState: function(state) { + this.checkAll = state.checkAll + this.checkedItems.length = 0 + if (state.checked?.length) { + this.checkedItems.push(...state.checked) + this.selections.forEach((item) => { + const key = item[this.identifierKey] + this.$emit('changed', {key, value: this.checkedItems.includes(key)}) + }) + } else { + const keys = this.selections.map((a) => a[this.identifierKey]) + let value = false + if (this.checkAll) { + value = true + this.checkedItems.push(...keys) + } + this.$emit('checkAll', { keys, value }) + } + }, hasLineStyles: function(item) { return 'colour' in item && this.colourStyle === 'line' },