From 1e01a76e0b0a76bf07f6abe043b11cf6afc90ff6 Mon Sep 17 00:00:00 2001
From: jrobinso <933148+jrobinso@users.noreply.github.com>
Date: Fri, 2 Aug 2024 15:19:46 -0700
Subject: [PATCH] svg refactoring

---
 js/trackViewport.js | 102 +++++++++++++++++++-------------------------
 1 file changed, 43 insertions(+), 59 deletions(-)

diff --git a/js/trackViewport.js b/js/trackViewport.js
index 66178a6cd..569d99dce 100644
--- 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,14 +419,10 @@ class TrackViewport extends Viewport {
 
         const config =
             {
-
                 width,
                 height: h_render,
-
                 backdropColor: 'white',
-
                 multiLocusGap: 0,
-
                 viewbox:
                     {
                         x: 0,
@@ -434,7 +430,6 @@ class TrackViewport extends Viewport {
                         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