From 1e113892d516069693e233d297b9aa123fbabf55 Mon Sep 17 00:00:00 2001 From: Mark Williams Date: Thu, 16 Jan 2025 15:11:57 +0000 Subject: [PATCH 1/2] LIMS-1496: Fix offset grid scan heatmaps in Safari --- client/src/js/modules/dc/views/gridplot.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/client/src/js/modules/dc/views/gridplot.js b/client/src/js/modules/dc/views/gridplot.js index fd70a0ff6..cd4bc19dd 100644 --- a/client/src/js/modules/dc/views/gridplot.js +++ b/client/src/js/modules/dc/views/gridplot.js @@ -389,7 +389,23 @@ define(['jquery', 'marionette', this.scale = this.perceivedw/(w+this.offset_w) this.ctx.globalAlpha = 1 - this.ctx.drawImage(this.snapshot, stx-this.offset_w/2, sty-this.offset_h/2, w+this.offset_w, h+this.offset_h, 0, 0, this.perceivedw, this.perceivedh) + let sx = stx-this.offset_w/2 + let sy = sty-this.offset_h/2 + let swidth = w+this.offset_w + let sheight = h+this.offset_h + let dx = 0 + let dy = 0 + let dw = this.perceivedw + let dh = this.perceivedh + + let isSafari = /safari/i.test(navigator.userAgent) && !/chromium|edg|ucbrowser|chrome|crios|opr|opera|fxios|firefox/i.test(navigator.userAgent) + // Safari cannot deal with negative numbers passed to drawImage + if (sx < 0 && isSafari) { + dx = -sx*this.scale + dw += sx*this.scale + sx = 0 + } + this.ctx.drawImage(this.snapshot, sx, sy, swidth, sheight, dx, dy, dw, dh) } var d = [] From 3a9599073cd7d19231d328865767108cd5e96b98 Mon Sep 17 00:00:00 2001 From: Mark Williams Date: Mon, 20 Jan 2025 12:01:36 +0000 Subject: [PATCH 2/2] LIMS-1496: Fix offset grid scan heatmaps in Safari --- client/src/js/modules/dc/views/gridplot.js | 23 +++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/client/src/js/modules/dc/views/gridplot.js b/client/src/js/modules/dc/views/gridplot.js index cd4bc19dd..ccf36d6ec 100644 --- a/client/src/js/modules/dc/views/gridplot.js +++ b/client/src/js/modules/dc/views/gridplot.js @@ -395,17 +395,22 @@ define(['jquery', 'marionette', let sheight = h+this.offset_h let dx = 0 let dy = 0 - let dw = this.perceivedw - let dh = this.perceivedh - - let isSafari = /safari/i.test(navigator.userAgent) && !/chromium|edg|ucbrowser|chrome|crios|opr|opera|fxios|firefox/i.test(navigator.userAgent) - // Safari cannot deal with negative numbers passed to drawImage - if (sx < 0 && isSafari) { - dx = -sx*this.scale - dw += sx*this.scale + let dwidth = this.perceivedw + let dheight = this.perceivedh + // Safari ignores sx values less than zero + if (sx < 0) { + dx = Math.abs(sx * this.scale) sx = 0 + swidth = Math.min(this.perceivedw/this.scale, this.snapshot.width) + dwidth = Math.min(this.perceivedw, this.snapshot.width*this.scale) } - this.ctx.drawImage(this.snapshot, sx, sy, swidth, sheight, dx, dy, dw, dh) + // Safari ignores swidth values greater than snapshot width - sx + if (swidth > this.snapshot.width - sx) { + dwidth *= (this.snapshot.width - sx) / swidth + swidth = this.snapshot.width - sx + } + + this.ctx.drawImage(this.snapshot, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) } var d = []