retropilot
/
cabana
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

only render messagebytes in view

main
Joost Wooning 2022-03-21 16:22:26 +01:00
parent be9060f27e
commit ca1318cc33
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/MessageBytes.js
View File

@ -22,6 +22,7 @@ export default class MessageBytes extends Component {
this.onVisibilityChange = this.onVisibilityChange.bind(this);
this.onCanvasRefAvailable = this.onCanvasRefAvailable.bind(this);
this.updateCanvas = this.updateCanvas.bind(this);
this.canvasInView = this.canvasInView.bind(this);
}
componentDidMount() {
@ -48,6 +49,11 @@ export default class MessageBytes extends Component {
}
}
canvasInView() {
return (!window.visualViewport || !this.canvas || (this.canvas.getBoundingClientRect().y >= 270 &&
window.visualViewport.height >= this.canvas.getBoundingClientRect().y));
}
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.live && nextProps.message.entries.length) {
const nextLastEntry = nextProps.message.entries[nextProps.message.entries.length - 1];
@ -93,7 +99,9 @@ export default class MessageBytes extends Component {
updateCanvas() {
const { message, live, seekTime } = this.props;
if (!this.canvas || message.entries.length === 0) return;
if (!this.canvas || message.entries.length === 0 || !this.canvasInView()) {
return;
}
let mostRecentMsg = message.entries[message.entries.length - 1];
if (!live) {
@ -140,6 +148,9 @@ export default class MessageBytes extends Component {
rowCount = Math.ceil(DbcUtils.maxMessageSize(this.props.message, this.state.maxMessageBytes) / 8);
}
this.canvas.height = rowCount * 15;
const observer = new IntersectionObserver(this.updateCanvas);
observer.observe(this.canvas);
}
render() {