From a47dfbebc79f9a0eef08f0474ad674b0125213e6 Mon Sep 17 00:00:00 2001 From: Douglass Turner Date: Tue, 10 Oct 2023 15:46:19 -0400 Subject: [PATCH] Prep for maintaining multi-select state in sessions (#1711) --- js/trackBase.js | 2 ++ js/trackView.js | 17 +++++++++-------- js/ui/menuUtils.js | 2 +- js/ui/multiTrackSelectButton.js | 13 ++++++------- 4 files changed, 18 insertions(+), 16 deletions(-) diff --git a/js/trackBase.js b/js/trackBase.js index ab5d868b1..5d7d7f0ae 100644 --- a/js/trackBase.js +++ b/js/trackBase.js @@ -108,6 +108,8 @@ class TrackBase { this.minHeight = config.minHeight || Math.min(25, this.height) this.maxHeight = config.maxHeight || Math.max(1000, this.height) + this.isMultiSelection = config.isMultiSelection || false + if (config.onclick) { this.onclick = config.onclick config.onclick = undefined // functions cannot be saved in sessions, clear it here. diff --git a/js/trackView.js b/js/trackView.js index 6f580b87f..147716d3d 100644 --- a/js/trackView.js +++ b/js/trackView.js @@ -49,7 +49,7 @@ class TrackView { this.browser = browser this.track = track track.trackView = this - + this.addDOMToColumnContainer(browser, columnContainer, browser.referenceFrameList) } @@ -132,12 +132,14 @@ class TrackView { event.preventDefault() event.stopPropagation() - setDragHandleSelectionState(this, this.dragHandle, event.target.checked) + this.track.isMultiSelection = event.target.checked if (this.track.autoscaleGroup && false === event.target.checked) { this.track.autoscaleGroup = undefined } + setDragHandleSelectionState(this, this.dragHandle, event.target.checked) + }) setMultiTrackSelectionState(this, axis, ENABLE_MULTI_TRACK_SELECTION) @@ -631,7 +633,6 @@ class TrackView { } else { this.dragHandle = DOMUtils.div({ class: 'igv-track-drag-handle' }) this.dragHandle.classList.add('igv-track-drag-handle-color') - this.dragHandle.dataset.selected = 'no' } browser.columnContainer.querySelector('.igv-track-drag-column').appendChild(this.dragHandle) @@ -736,7 +737,7 @@ class TrackView { event.preventDefault() currentDragHandle = event.target - if ('no' === currentDragHandle.dataset.selected) { + if (false === this.track.isMultiSelection) { currentDragHandle.classList.remove('igv-track-drag-handle-color') currentDragHandle.classList.add('igv-track-drag-handle-hover-color') } @@ -755,7 +756,7 @@ class TrackView { if (currentDragHandle && event.target !== currentDragHandle) { - if ('no' === currentDragHandle.dataset.selected) { + if (false === this.track.isMultiSelection) { currentDragHandle.classList.remove('igv-track-drag-handle-hover-color') currentDragHandle.classList.add('igv-track-drag-handle-color') } @@ -773,7 +774,7 @@ class TrackView { event.preventDefault() if (undefined === currentDragHandle) { - if ('no' === event.target.dataset.selected) { + if (false === this.track.isMultiSelection) { event.target.classList.remove('igv-track-drag-handle-color') event.target.classList.add('igv-track-drag-handle-hover-color') } @@ -788,7 +789,7 @@ class TrackView { event.preventDefault() if (undefined === currentDragHandle) { - if ('no' === event.target.dataset.selected) { + if (false === this.track.isMultiSelection) { event.target.classList.remove('igv-track-drag-handle-hover-color') event.target.classList.add('igv-track-drag-handle-color') } @@ -802,7 +803,7 @@ class TrackView { event.preventDefault() if (undefined === currentDragHandle) { - if ('no' === event.target.dataset.selected) { + if (false === this.track.isMultiSelection) { event.target.classList.remove('igv-track-drag-handle-hover-color') event.target.classList.add('igv-track-drag-handle-color') } diff --git a/js/ui/menuUtils.js b/js/ui/menuUtils.js index 990d53319..815f943ba 100644 --- a/js/ui/menuUtils.js +++ b/js/ui/menuUtils.js @@ -438,7 +438,7 @@ function getMultiSelectedTrackViews(browser) { const candidates = browser.trackViews.filter(({ track }) => { return false === multiTrackSelectExclusionTypes.has(track.type) }) - let selected = candidates.filter(({ namespace, dragHandle }) => { return namespace === dragHandle.dataset.selected }) + let selected = candidates.filter(trackView => true === trackView.track.isMultiSelection) selected = 0 === selected.length ? undefined : selected diff --git a/js/ui/multiTrackSelectButton.js b/js/ui/multiTrackSelectButton.js index 4307a3907..8cc8507b7 100644 --- a/js/ui/multiTrackSelectButton.js +++ b/js/ui/multiTrackSelectButton.js @@ -55,18 +55,19 @@ function setMultiTrackSelectionState(trackView, axis, doEnableMultiSelection) { container.style.display = 'grid' } else { - const trackSelectInput = container.querySelector('[name=track-select]') - - if (trackView.dragHandle) { - setDragHandleSelectionState(trackView, trackView.dragHandle, trackSelectInput.checked) - } + trackView.track.isMultiSelection = false if (trackView.track.autoscaleGroup) { trackView.track.autoscaleGroup = undefined } + const trackSelectInput = container.querySelector('[name=track-select]') trackSelectInput.checked = false + if (trackView.dragHandle) { + setDragHandleSelectionState(trackView, trackView.dragHandle, false) + } + container.style.display = 'none' } @@ -76,12 +77,10 @@ function setMultiTrackSelectionState(trackView, axis, doEnableMultiSelection) { function setDragHandleSelectionState(trackView, dragHandle, isSelected) { if (isSelected) { - dragHandle.dataset.selected = trackView.namespace dragHandle.classList.remove('igv-track-drag-handle-color') dragHandle.classList.remove('igv-track-drag-handle-hover-color') dragHandle.classList.add('igv-track-drag-handle-selected-color') } else { - dragHandle.dataset.selected = 'no' dragHandle.classList.remove('igv-track-drag-handle-hover-color') dragHandle.classList.remove('igv-track-drag-handle-selected-color') dragHandle.classList.add('igv-track-drag-handle-color')