commit 26bb9c6ab28b699b2a107c0e757bb351a13912fc
parent 4f4895535d1d1dad50b6b77496b6c2f33cc49f10
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date: Tue, 20 Mar 2018 13:23:11 -0700
High def canvases
Diffstat:
4 files changed, 55 insertions(+), 39 deletions(-)
diff --git a/src/WaveEditor/index.js b/src/WaveEditor/index.js
@@ -74,7 +74,7 @@ export default class waveEditor extends Component {
class="wave-editor"
ref={(div) => {this.divRef = div}}
>
- <WaveTable resize={true} waveform={this.props.waveform} />
+ <WaveTable waveform={this.props.waveform} />
</div>
);
}
diff --git a/src/WaveTable/index.js b/src/WaveTable/index.js
@@ -1,6 +1,7 @@
import { h, Component } from 'preact';
import helpers from '../helpers';
import consts from '../consts';
+import UpdateOnResize from '../UpdateOnResize/';
import './style.css';
const drawArea = helpers.soon((amplitudes, canvas, begin = 0, end = undefined) => {
@@ -24,39 +25,37 @@ const drawArea = helpers.soon((amplitudes, canvas, begin = 0, end = undefined) =
export default class WaveTable extends Component {
constructor() {
super();
- this.drawArea = helpers.throttle(drawArea, 20);
- }
- componentWillUpdate() {
- return this.props.resize;
+ this.myDrawArea = helpers.throttle(() => {
+ drawArea(this.props.waveform, this.canvasRef);
+ }, 20, true);
}
+
componentDidMount() {
- this.drawArea(this.props.waveform, this.canvasRef);
+ this.myDrawArea(this.props.waveform, this.canvasRef);
if (this.props.setCanvasRef) {
this.props.setCanvasRef(this.canvasRef);
}
- if (this.props.resize) {
- window.addEventListener('resize', (ev) => {
- drawArea(this.props.waveform, this.canvasRef);
- this.forceUpdate();
- });
- }
}
- componentWillReceiveProps(newProps) {
- this.drawArea(newProps.waveform, this.canvasRef);
+
+ componentDidUpdate() {
+ this.myDrawArea();
}
+
render() {
const height = this.props.height || 400;
const width = this.props.width || document.getElementsByTagName('body')[0].clientWidth;
const pixelHeight = height * window.devicePixelRatio;
const pixelWidth = width * window.devicePixelRatio;
return (
- <canvas
- class="wave-table"
- style={`${this.props.myStyle}; color: red; height: ${height}px; width: ${width}px`}
- height={pixelHeight}
- width={pixelWidth}
- ref={(canvas) => {this.canvasRef = canvas}}>
- </canvas>
+ <UpdateOnResize action={this.forceUpdate.bind(this)}>
+ <canvas
+ class="wave-table"
+ style={`${this.props.myStyle}; height: ${height}px; width: ${width}px;`}
+ height={pixelHeight}
+ width={pixelWidth}
+ ref={(canvas) => {this.canvasRef = canvas}}>
+ </canvas>
+ </UpdateOnResize>
);
}
}
diff --git a/src/Wheel/index.js b/src/Wheel/index.js
@@ -1,54 +1,63 @@
import { h, Component} from 'preact';
+import UpdateOnResize from '../UpdateOnResize/';
const drawCircle = (canvas, percent) => {
const context = canvas.getContext('2d');
const color = '#ff735e';
- context.lineWidth = 6;
- context.clearRect(0,0,36,36);
+ const width = canvas.width;
+ const radius = canvas.width / 2;
+ const lineWidth = radius / 3;
+ const innerRadius = radius - lineWidth / 2;
+ context.lineWidth = lineWidth;
+ context.clearRect(0,0, width, width);
context.beginPath();
context.strokeStyle = "#00000011";
if (percent === 0) {
- context.arc(18, 18, 15, 0, 10);
+ context.arc(radius, radius, innerRadius, 0, Math.PI);
context.stroke();
}
else {
const begin = -(Math.PI / 2);
const end = 2 * Math.PI * percent - Math.PI / 2;
- context.arc(18, 18, 15, end, begin);
+ context.arc(radius, radius, innerRadius, end, begin);
context.stroke();
context.beginPath();
context.strokeStyle = color;
- context.arc(18, 18, 15, begin, end);
+ context.arc(radius, radius, innerRadius, begin, end);
context.stroke();
}
}
export default class Wheel extends Component {
- componentWillUpdate() {
- return false;
+ draw = () => {
+ drawCircle(this.wheelRef, this.props.percent);
}
componentDidMount() {
- drawCircle(this.wheelRef, this.props.percent);
+ this.draw();
}
- componentWillReceiveProps(newProps) {
- if (newProps.percent !== this.props.percent);
- drawCircle(this.wheelRef, newProps.percent);
+ componentDidUpdate() {
+ this.draw();
}
render() {
+ const diameter = 36;
+ const scaledDiameter = diameter * window.devicePixelRatio;
return (
- <canvas
- class="wheel"
- height="36"
- width="36"
- ref={(ref) => {this.wheelRef = ref}}
- ></canvas>
+ <UpdateOnResize action={this.forceUpdate.bind(this)}>
+ <canvas
+ class="wheel"
+ height={scaledDiameter}
+ width={scaledDiameter}
+ style={`width:${diameter}px; height: ${diameter}px;`}
+ ref={(ref) => {this.wheelRef = ref}}
+ ></canvas>
+ </UpdateOnResize>
);
}
}
diff --git a/src/helpers.js b/src/helpers.js
@@ -27,14 +27,22 @@ export default {
return (...args) =>
window.setTimeout(partial(fn, ...args), ms);
},
- throttle: (fn, ms) => {
+ throttle: (fn, ms, performFinalCall) => {
let time = 0;
+ let finalCall = null;
return (...args) => {
let now = Date.now();
+ if (finalCall)
+ window.clearTimeout(finalCall);
if (now >= time + ms) {
fn(...args);
time = now;
}
+ else if (performFinalCall) {
+ finalCall = window.setTimeout(() => {
+ fn(...args);
+ }, time - now - ms);
+ }
}
},
clickNDrag: (el, onDown, onMove, onUp, moveEl=document) => {
