From 99c8e61f4c73ad09e19a048bd53ac41854d07971 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 23 Jan 2019 11:01:15 -0500
Subject: [PATCH] Move the mask on the audio meter outside the svg for repaint
performance
---
src/components/meter/meter.css | 18 ++++++++++++
src/components/meter/meter.jsx | 54 ++++++++++++++++++----------------
2 files changed, 47 insertions(+), 25 deletions(-)
diff --git a/src/components/meter/meter.css b/src/components/meter/meter.css
index c16e920cd..953f3641b 100644
--- a/src/components/meter/meter.css
+++ b/src/components/meter/meter.css
@@ -1,3 +1,5 @@
+@import "../../css/colors.css";
+
.green {
fill: rgb(171, 220, 170);
stroke: rgb(174, 211, 168);
@@ -12,3 +14,19 @@
fill: rgb(251, 194, 142);
stroke: rgb(235, 189, 142);
}
+
+.mask-container {
+ position: relative;
+}
+
+.mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ transform-origin: top;
+ will-change: transform;
+ background: $ui-primary;
+ opacity: 0.75;
+}
diff --git a/src/components/meter/meter.jsx b/src/components/meter/meter.jsx
index 2d16ce681..4f0711916 100644
--- a/src/components/meter/meter.jsx
+++ b/src/components/meter/meter.jsx
@@ -20,36 +20,40 @@ const Meter = props => {
const barHeight = (height - (barSpacing * (nBars + 1))) / nBars;
const nBarsToMask = nBars - Math.floor(level * nBars);
+ const scale = ((nBarsToMask * (barHeight + barSpacing)) + (barSpacing / 2)) / height;
return (
- <svg
- className={styles.container}
- height={height}
- width={width}
+ <div
+ className={styles.maskContainer}
+ style={{height: `${height}px`}}
>
- {Array(nBars).fill(0)
- .map((value, index) => (
- <rect
- className={index < nGreen ? styles.green :
- (index < nGreen + nYellow ? styles.yellow : styles.red)}
- height={barHeight}
- key={index}
- rx={barRounding}
- ry={barRounding}
- width={width - 2}
- x={1}
- y={height - ((barSpacing + barHeight) * (index + 1))}
- />
- ))}
- <rect
- fill="hsla(215, 100%, 95%, 1)"
- height={(nBarsToMask * (barHeight + barSpacing)) + (barSpacing / 2)}
- opacity="0.75"
+ <svg
+ className={styles.container}
+ height={height}
width={width}
- x={0}
- y={0}
+ >
+ {Array(nBars).fill(0)
+ .map((value, index) => (
+ <rect
+ className={index < nGreen ? styles.green :
+ (index < nGreen + nYellow ? styles.yellow : styles.red)}
+ height={barHeight}
+ key={index}
+ rx={barRounding}
+ ry={barRounding}
+ width={width - 2}
+ x={1}
+ y={height - ((barSpacing + barHeight) * (index + 1))}
+ />
+ ))}
+ </svg>
+ <div
+ className={styles.mask}
+ style={{
+ transform: `scaleY(${scale})`
+ }}
/>
- </svg>
+ </div>
);
};
--
GitLab