From 6385cb069cc048a252763616413fdc6f268d203c Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Fri, 27 Jan 2017 11:39:37 -0500
Subject: [PATCH 1/2] Cache stage bounding box

`getBoundingClientRect` forces WebKit to recalculate the layout ("force reflow"), so cache the canvas bounding box rather than getting it on every mouse event.
---
 src/containers/stage.jsx | 44 +++++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index 8448115ea..7136f56d3 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -15,18 +15,22 @@ class Stage extends React.Component {
             'onMouseUp',
             'onMouseMove',
             'onMouseDown',
+            'updateRect',
             'setCanvas'
         ]);
     }
     componentDidMount () {
+        this.attachRectEvents();
+        this.attachMouseEvents(this.canvas);
+        this.updateRect();
         this.renderer = new Renderer(this.canvas);
         this.props.vm.attachRenderer(this.renderer);
         this.audioEngine = new AudioEngine();
         this.props.vm.attachAudioEngine(this.audioEngine);
-        this.attachMouseEvents(this.canvas);
     }
     componentWillUnmount () {
         this.detachMouseEvents(this.canvas);
+        this.detachRectEvents();
     }
     attachMouseEvents (canvas) {
         document.addEventListener('mousemove', this.onMouseMove);
@@ -38,36 +42,44 @@ class Stage extends React.Component {
         canvas.removeEventListener('mouseup', this.onMouseUp);
         canvas.removeEventListener('mousedown', this.onMouseDown);
     }
+    attachRectEvents () {
+        window.addEventListener('resize', this.updateRect);
+        window.addEventListener('scroll', this.updateRect);
+    }
+    detachRectEvents () {
+        window.removeEventListener('resize', this.updateRect);
+        window.removeEventListener('scroll', this.updateRect);
+    }
+    updateRect () {
+        this.rect = this.canvas.getBoundingClientRect();
+    }
     onMouseMove (e) {
-        const rect = this.canvas.getBoundingClientRect();
         const coordinates = {
-            x: e.clientX - rect.left,
-            y: e.clientY - rect.top,
-            canvasWidth: rect.width,
-            canvasHeight: rect.height
+            x: e.clientX - this.rect.left,
+            y: e.clientY - this.rect.top,
+            canvasWidth: this.rect.width,
+            canvasHeight: this.rect.height
         };
         this.props.vm.postIOData('mouse', coordinates);
     }
     onMouseUp (e) {
-        const rect = this.canvas.getBoundingClientRect();
         const data = {
             isDown: false,
-            x: e.clientX - rect.left,
-            y: e.clientY - rect.top,
-            canvasWidth: rect.width,
-            canvasHeight: rect.height
+            x: e.clientX - this.rect.left,
+            y: e.clientY - this.rect.top,
+            canvasWidth: this.rect.width,
+            canvasHeight: this.rect.height
         };
         this.props.vm.postIOData('mouse', data);
         e.preventDefault();
     }
     onMouseDown (e) {
-        const rect = this.canvas.getBoundingClientRect();
         const data = {
             isDown: true,
-            x: e.clientX - rect.left,
-            y: e.clientY - rect.top,
-            canvasWidth: rect.width,
-            canvasHeight: rect.height
+            x: e.clientX - this.rect.left,
+            y: e.clientY - this.rect.top,
+            canvasWidth: this.rect.width,
+            canvasHeight: this.rect.height
         };
         this.props.vm.postIOData('mouse', data);
         e.preventDefault();

From 87eab8551d86b98026eb5f01206c674658e0d7fd Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Wed, 1 Feb 2017 10:58:21 -0500
Subject: [PATCH 2/2] Don't render library modals until visible

Previously modal content was rendered before the modal was use, causing a re-render on every spriteInfoReport.
---
 src/components/library/library.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 35374d7e0..e29d2aa7e 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -22,6 +22,7 @@ class LibraryComponent extends React.Component {
         this.setState({selectedItem: id});
     }
     render () {
+        if (!this.props.visible) return null;
         return (
             <ModalComponent
                 visible={this.props.visible}