diff --git a/js/browser.js b/js/browser.js index f589751c6..291f0ea22 100755 --- a/js/browser.js +++ b/js/browser.js @@ -56,6 +56,7 @@ import MultiTrackSelectButton from "./ui/multiTrackSelectButton.js" import MenuUtils from "./ui/menuUtils.js" import Genome from "./genome/genome.js" import {setDefaults} from "./igv-create.js" +import { trackViewportPopoverList } from './trackViewport.js' // css - $igv-scrollbar-outer-width: 14px; const igv_scrollbar_outer_width = 14 @@ -141,6 +142,16 @@ class Browser { } }) + this.on('didchangecolumnlayout', () => { + if (trackViewportPopoverList.length > 0) { + const len = trackViewportPopoverList.length + for (let i = 0; i < len; i++) { + trackViewportPopoverList[ i ].dispose() + } + trackViewportPopoverList.length = 0 + } + }) + this.addMouseHandlers() this.sampleInfo = new SampleInfo(this) @@ -1539,6 +1550,7 @@ class Browser { // TODO -- this is really ugly const {$viewport} = this.trackViews[0].viewports[indexLeft] const viewportColumn = viewportColumnManager.insertAfter($viewport.get(0).parentElement) + this.fireEvent('didchangecolumnlayout') if (indexRight === this.referenceFrameList.length) { this.referenceFrameList.push(newReferenceFrame) @@ -1582,7 +1594,9 @@ class Browser { // find the $column corresponding to this referenceFrame and remove it const index = this.referenceFrameList.indexOf(referenceFrame) const {$viewport} = this.trackViews[0].viewports[index] + viewportColumnManager.removeColumnAtIndex(index, $viewport.parent().get(0)) + this.fireEvent('didchangecolumnlayout') for (let {viewports} of this.trackViews) { viewports[index].dispose() @@ -1721,6 +1735,7 @@ class Browser { // Insert viewport columns preceding the sample info column viewportColumnManager.insertBefore(this.columnContainer.querySelector('.igv-sample-info-column'), this.referenceFrameList.length) + this.fireEvent('didchangecolumnlayout') this.centerLineList = this.createCenterLineList(this.columnContainer) diff --git a/js/roi/ROIManager.js b/js/roi/ROIManager.js index 2109a0546..20746247f 100644 --- a/js/roi/ROIManager.js +++ b/js/roi/ROIManager.js @@ -220,7 +220,7 @@ class ROIManager { if (this.popover) { this.popover.dispose() } - this.popover = new Popover(columnContainer, roiSet.name) + this.popover = new Popover(columnContainer, true, roiSet.name, undefined) this.popover.presentContentWithEvent(event, name) }) } else { diff --git a/js/trackViewport.js b/js/trackViewport.js index 025d35746..53a676f6b 100644 --- a/js/trackViewport.js +++ b/js/trackViewport.js @@ -17,6 +17,9 @@ let mouseDownCoords let lastClickTime = 0 let lastHoverUpdateTime = 0 let popupTimerID +let trackViewportPopoverList = [] + +let popover class TrackViewport extends Viewport { @@ -46,6 +49,7 @@ class TrackViewport extends Viewport { this.stopSpinner() this.addMouseHandlers() + } setContentHeight(contentHeight) { @@ -702,16 +706,12 @@ class TrackViewport extends Viewport { return } - // Close any currently open popups - $('.igv-popover').hide() - - if (this.browser.dragObject || this.browser.isScrolling) { return } - // Treat as a mouse click, its either a single or double click. - // Handle here and stop propogation / default + // Treat as a mouse click, it's either a single or double click. + // Handle here and stop propagation / default event.preventDefault() const mouseX = DOMUtils.translateMouseCoordinates(event, this.$viewport.get(0)).x @@ -756,19 +756,50 @@ class TrackViewport extends Viewport { } else { // single-click - if (event.shiftKey && typeof this.trackView.track.shiftClick === "function") { + /*if (event.shiftKey && typeof this.trackView.track.shiftClick === "function") { this.trackView.track.shiftClick(xBP, event) - } else if (typeof this.trackView.track.popupData === "function") { + } else */ + + if (typeof this.trackView.track.popupData === "function") { popupTimerID = setTimeout(() => { const content = this.getPopupContent(event) if (content) { - if (this.popover) this.popover.dispose() - this.popover = new Popover(this.browser.columnContainer) - this.popover.presentContentWithEvent(event, content) + + if (false === event.shiftKey) { + + if (popover) { + popover.dispose() + } + + if (trackViewportPopoverList.length > 0) { + for (const gp of trackViewportPopoverList) { + gp.dispose() + } + trackViewportPopoverList.length = 0 + } + + popover = new Popover(this.$viewport.get(0).parentElement, true, undefined, () => { + popover.dispose() + }) + + popover.presentContentWithEvent(event, content) + } else { + + let po = new Popover(this.$viewport.get(0).parentElement, true, undefined, () => { + const index = trackViewportPopoverList.indexOf(po) + trackViewportPopoverList.splice(index, 1) + po.dispose() + }) + + trackViewportPopoverList.push( po ) + + po.presentContentWithEvent(event, content) + } + } window.clearTimeout(popupTimerID) popupTimerID = undefined @@ -799,10 +830,9 @@ class TrackViewport extends Viewport { } if (str) { - if (this.popover) { - this.popover.dispose() + if (undefined === this.popover) { + this.popover = new Popover(this.browser.columnContainer, true, (track.name || ''), undefined) } - this.popover = new Popover(this.browser.columnContainer, (track.name || '')) this.popover.presentContentWithEvent(event, str) } }) @@ -856,6 +886,22 @@ class TrackViewport extends Viewport { return content } + dispose() { + + if (this.popover) { + this.popover.dispose() + } + + // if (trackViewportPopoverList) { + // for (let i = 0; i < trackViewportPopoverList.length; i++ ) { + // trackViewportPopoverList[ i ].dispose() + // } + // + // trackViewportPopoverList = undefined + // } + + super.dispose() + } } @@ -921,4 +967,5 @@ function mergeArrays(a, b) { } +export { trackViewportPopoverList } export default TrackViewport diff --git a/js/viewport.js b/js/viewport.js index 86b06fab8..ba662406c 100644 --- a/js/viewport.js +++ b/js/viewport.js @@ -192,10 +192,6 @@ class Viewport { */ dispose() { - if (this.popover) { - this.popover.dispose() - } - this.$viewport.get(0).remove() // Null out all properties -- this should not be neccessary, but just in case there is a diff --git a/package.json b/package.json index e198297ba..b8d67f8b7 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,6 @@ }, "browserslist": "> 1%, not dead", "devDependencies": { - "html2canvas": "^1.4.1", "@rollup/plugin-strip": "^3.0.1", "@rollup/plugin-terser": "^0.4.0", "@xmldom/xmldom": "^0.7.9", @@ -53,7 +52,8 @@ "circular-view": "github:igvteam/circular-view#v0.2.4", "eslint": "^6.4.0", "hdf5-indexed-reader": "github:jrobinso/hdf5-indexed-reader#v0.5.5", - "igv-ui": "github:igvteam/igv-ui#v1.5.5", + "html2canvas": "^1.4.1", + "igv-ui": "github:igvteam/igv-ui#v1.5.6", "igv-utils": "github:igvteam/igv-utils#v1.4.8", "mocha": "^10.2.0", "rollup": "^2.66.0",