From da930eea7ff24986cd0b03f82ff0a2473ef11d69 Mon Sep 17 00:00:00 2001 From: Karl-Petter Lindegaard Date: Sun, 7 Jul 2024 02:39:39 +0200 Subject: [PATCH] Resize gauge and donut on resize events --- dist/gauge.coffee | 46 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/dist/gauge.coffee b/dist/gauge.coffee index 0cabbc7..936ca9f 100644 --- a/dist/gauge.coffee +++ b/dist/gauge.coffee @@ -153,6 +153,26 @@ class BaseGauge extends ValueUpdater value = parseFloat(value) || Number(value) return if isFinite(value) then value else 0 + attachResizeHandler: () -> + if typeof ResizeObserver != 'undefined' + @resizeObserver = new ResizeObserver (entries) => + @handleResize(entries) + @resizeObserver.observe(@canvas) + + handleResize: (entries) -> + for entry in entries + if entry.target.id == @canvas.id + @canvas.height = entry.contentRect.height + @canvas.width = entry.contentRect.width + @resize() + + resize: () -> + # Must be overridden + + detachAll: () -> + if @resizeObserver? + @resizeObserver.unobserve(@canvas) + class TextRenderer constructor: (@el, @fractionDigits) -> @@ -316,7 +336,11 @@ class Gauge extends BaseGauge @gp = [new GaugePointer(@)] @setOptions() - + @attachResizeHandler() + + resize: (s) -> + @setOptions(@options) + @set(@lastValue) setOptions: (options = null) -> super(options) @@ -332,7 +356,7 @@ class Gauge extends BaseGauge for gauge in @gp gauge.setOptions(@options.pointer) - gauge.render() + # gauge.render() @render() return @ @@ -347,6 +371,7 @@ class Gauge extends BaseGauge @percentColors[i] = { pct: @options.percentColors[i][0], color: { r: rval, g: gval, b: bval } } set: (value) -> + @lastValue = value if not (value instanceof Array) value = [value] # Ensure values are OK @@ -547,7 +572,7 @@ class Gauge extends BaseGauge if @options.gradientType == 0 start = radius - @lineWidth / 2 stop = radius + @lineWidth / 2 - fillStyle = this.ctx.createRadialGradient(w, h, start, w, h, stop) + fillStyle = this.ctx.createRadialGradient(w, h, Math.max(start, 1), w, h, stop) else fillStyle = this.ctx.createLinearGradient(0, 0, w, 0) fillStyle.addColorStop(0, @options.colorStart) @@ -603,6 +628,15 @@ class BaseDonut extends BaseGauge @canvas = window.G_vmlCanvasManager.initElement(@canvas) @ctx = @canvas.getContext('2d') @setOptions() + @attachResizeHandler() + @render() + + resize: () -> + @lineWidth = @canvas.height * @options.lineWidth + @radius = @options.radiusScale * (Math.min(@canvas.height, @canvas.width) / 2 - @lineWidth / 2) + start = @radius - @lineWidth / 2 + stop = @radius + @lineWidth / 2 + @options.strokeColor = @strokeGradient(@canvas.width / 2, @canvas.height / 2, start, stop) @render() getAngle: (value) -> @@ -611,7 +645,7 @@ class BaseDonut extends BaseGauge setOptions: (options = null) -> super(options) @lineWidth = @canvas.height * @options.lineWidth - @radius = @options.radiusScale * (@canvas.height / 2 - @lineWidth / 2) + @radius = @options.radiusScale * (Math.min(@canvas.height, @canvas.width) / 2 - @lineWidth / 2) return @ set: (value) -> @@ -642,7 +676,7 @@ class BaseDonut extends BaseGauge start = @radius - @lineWidth / 2 stop = @radius + @lineWidth / 2 - grdFill = @ctx.createRadialGradient(w, h, start, w, h, stop) + grdFill = @ctx.createRadialGradient(w, h, Math.max(start, 1), w, h, stop) grdFill.addColorStop(0, @options.colorStart) grdFill.addColorStop(1, @options.colorStop) @@ -661,7 +695,7 @@ class BaseDonut extends BaseGauge class Donut extends BaseDonut strokeGradient: (w, h, start, stop) -> - grd = @ctx.createRadialGradient(w, h, start, w, h, stop) + grd = @ctx.createRadialGradient(w, h, Math.max(start, 1), w, h, stop) grd.addColorStop(0, @options.shadowColor) grd.addColorStop(0.12, @options._orgStrokeColor) grd.addColorStop(0.88, @options._orgStrokeColor)