svg refactoring

igvteam · Aug 2, 2024 · 1e01a76 · 1e01a76
1 parent e55cdfe
commit 1e01a76
Showing 1 changed file with 43 additions and 59 deletions.
diff --git a/js/trackViewport.js b/js/trackViewport.js
@@ -6,7 +6,7 @@ import $ from "./vendor/jquery-3.3.1.slim.js"
 import Popover from "./ui/popover.js"
 import Viewport from "./viewport.js"
 import {FileUtils} from "../node_modules/igv-utils/src/index.js"
-import  * as DOMUtils  from "./ui/utils/dom-utils.js"
+import * as DOMUtils from "./ui/utils/dom-utils.js"
 import C2S from "./canvas2svg.js"
 import GenomeUtils from "./genome/genomeUtils.js"
 import {bppSequenceThreshold} from "./sequenceTrack.js"
@@ -419,22 +419,17 @@ class TrackViewport extends Viewport {
 
  const config =
  {
-
  width,
  height: h_render,
-
  backdropColor: 'white',
-
  multiLocusGap: 0,
-
  viewbox:
  {
  x: 0,
  y: 0,
  width,
  height: h_render
  }
-
  }
 
  const context = new C2S(config)
@@ -445,7 +440,7 @@ class TrackViewport extends Viewport {
  deltaY: marginTop
  }
 
- this.renderViewportToSVG(context, delta)
+ this.renderSVGContext(context, delta, false)
 
  // reset height to trim away unneeded svg canvas real estate. Yes, a bit of a hack.
  context.setHeight(height)
@@ -461,37 +456,57 @@ class TrackViewport extends Viewport {
 
  }
 
- // called by trackView.renderSVGContext() when rendering
- // entire browser as SVG
 
- renderViewportToSVG(context, {deltaX, deltaY}) {
+ renderSVGContext(context, {deltaX, deltaY}, includeLabel = true) {
 
- if (this.$zoomInNotice && this.$zoomInNotice.is(":visible")) {
- return
- }
+ const zoomInNotice = this.$zoomInNotice && this.$zoomInNotice.is(":visible")
 
- const {width, height} = this.$viewport.get(0).getBoundingClientRect()
+ if (!zoomInNotice) {
 
- const str = (this.trackView.track.name || this.trackView.track.id).replace(/\W/g, '')
- const index = this.browser.referenceFrameList.indexOf(this.referenceFrame)
- const id = `${str}_referenceFrame_${index}_guid_${DOMUtils.guid()}`
- this.drawSVGWithContext(context, width, height, id, deltaX, deltaY + this.contentTop, -this.contentTop)
+ const {width, height} = this.$viewport.get(0).getBoundingClientRect()
 
- }
+ const str = (this.trackView.track.name || this.trackView.track.id).replace(/\W/g, '')
+ const index = this.browser.referenceFrameList.indexOf(this.referenceFrame)
+ const id = `${str}_referenceFrame_${index}_guid_${DOMUtils.guid()}`
 
- renderSVGContext(context, {deltaX, deltaY}) {
+ const x = deltaX
+ const y = deltaY + this.contentTop
+ const yClipOffset = -this.contentTop
 
- this.renderViewportToSVG(context, {deltaX, deltaY})
+ if (context.saveWithTranslationAndClipRect) {
+ context.saveWithTranslationAndClipRect(id, x, y, width, height, yClipOffset)
+ }
 
- if (this.$zoomInNotice && this.$zoomInNotice.is(":visible")) {
- return
+ let {start, bpPerPixel} = this.referenceFrame
+
+ const config =
+ {
+ context,
+ viewport: this,
+ referenceFrame: this.referenceFrame,
+ top: yClipOffset,
+ pixelTop: yClipOffset,
+ pixelWidth: width,
+ pixelHeight: height,
+ bpStart: start,
+ bpEnd: start + (width * bpPerPixel),
+ bpPerPixel,
+ viewportWidth: width,
+ selection: this.selection
+ }
+
+ const features = this.featureCache ? this.featureCache.features : undefined
+ const roiFeatures = this.featureCache ? this.featureCache.roiFeatures : undefined
+ this.draw(config, features, roiFeatures)
+
+ context.restore()
  }
 
- if (this.$trackLabel && true === this.browser.doShowTrackLabels) {
+
+ if (includeLabel && this.$trackLabel && this.browser.doShowTrackLabels) {
  const {x, y, width, height} = DOMUtils.relativeDOMBBox(this.$viewport.get(0), this.$trackLabel.get(0))
  this.renderTrackLabelSVG(context, deltaX + x, deltaY + y, width, height)
  }
-
  }
 
  // render track label element called from renderSVGContext()
@@ -520,37 +535,6 @@ class TrackViewport extends Viewport {
 
  }
 
- // called by renderSVGContext()
- drawSVGWithContext(context, width, height, id, x, y, yClipOffset) {
-
- context.saveWithTranslationAndClipRect(id, x, y, width, height, yClipOffset)
-
- let {start, bpPerPixel} = this.referenceFrame
-
- const config =
- {
- context,
- viewport: this,
- referenceFrame: this.referenceFrame,
- top: yClipOffset,
- pixelTop: yClipOffset,
- pixelWidth: width,
- pixelHeight: height,
- bpStart: start,
- bpEnd: start + (width * bpPerPixel),
- bpPerPixel,
- viewportWidth: width,
- selection: this.selection
- }
-
- const features = this.featureCache ? this.featureCache.features : undefined
- const roiFeatures = this.featureCache ? this.featureCache.roiFeatures : undefined
- this.draw(config, features, roiFeatures)
-
- context.restore()
-
- }
-
  get cachedFeatures() {
  return this.featureCache ? this.featureCache.features : []
  }
@@ -806,7 +790,7 @@ class TrackViewport extends Viewport {
  po.dispose()
  })
 
- trackViewportPopoverList.push( po )
+ trackViewportPopoverList.push(po)
 
  po.presentContentWithEvent(event, content)
  }
@@ -952,7 +936,7 @@ class FeatureCache {
 
  containsRange(chr, start, end, bpPerPixel, windowFunction) {
 
- if(windowFunction && windowFunction !== this.windowFunction) return false
+ if (windowFunction && windowFunction !== this.windowFunction) return false
 
  // For multi-resolution tracks allow for a 2X change in bpPerPixel
  const r = this.multiresolution ? this.bpPerPixel / bpPerPixel : 1
@@ -978,5 +962,5 @@ function mergeArrays(a, b) {
 
 }
 
-export { trackViewportPopoverList }
+export {trackViewportPopoverList}
 export default TrackViewport