From b350f1b271eabce23c0a0316767882a3bfcdd106 Mon Sep 17 00:00:00 2001
From: Tyler Hallada <tyler@hallada.net>
Date: Thu, 7 Jun 2018 22:33:02 -0400
Subject: [PATCH] Fix occasional failure to init event handlers

If the 'load' event fired on the `window` before Pixi.js ran `.load()`, then the
canvas element would not be in the DOM and an exception would be thrown before
the event handlers could be registered. Now, the event handlers are added at the
end of `loopStart`, the function called on Pixi's `.load()`.
---
 js/proximity.js | 120 ++++++++++++++++++++++++------------------------
 1 file changed, 61 insertions(+), 59 deletions(-)

diff --git a/js/proximity.js b/js/proximity.js
index c2216eb..0db1a7d 100644
--- a/js/proximity.js
+++ b/js/proximity.js
@@ -818,64 +818,7 @@ function loop () {
     window.requestAnimationFrame(loop);
 }
 
-function loopStart () {
-    screenWidth = window.innerWidth;
-    screenHeight = window.innerHeight;
-    // Create the renderer
-    renderer = window.PIXI.autoDetectRenderer(screenWidth, screenHeight, {antialias: true, resolution: resolution});
-
-    // Add the canvas to the HTML document
-    document.body.appendChild(renderer.view);
-
-    // Create a container object called the `stage`
-    stage = new window.PIXI.Container();
-
-    renderer.view.style.position = 'absolute';
-    renderer.view.style.display = 'block';
-    renderer.autoResize = true;
-
-    counter = 0;
-    totalScreenPixels = screenWidth + screenHeight;
-    connectionDistance = Math.min(Math.round(totalScreenPixels / 16), 75);
-    pointShiftDistance = Math.round(totalScreenPixels / 45);
-    clickMaxDistStart = Math.min(Math.round(totalScreenPixels / 20), clickMaxDistStart);
-    hoverMaxDistStart = Math.min(Math.round(totalScreenPixels / 16), hoverMaxDistStart);
-    polygon = new window.PIXI.Graphics();
-    stage.addChild(polygon);
-    numPoints = Math.round(totalScreenPixels / 6);
-    startPoints = getRandomPoints(numPoints, screenWidth, screenHeight, zRange, tweeningFns);
-    polygonPoints = {
-        original: startPoints,
-        target: JSON.parse(JSON.stringify(startPoints)),
-        tweened: JSON.parse(JSON.stringify(startPoints))
-    };
-
-    fpsGraphic = new window.PIXI.Text('0', {font: '25px monospace', fill: 'yellow'});
-    fpsGraphic.anchor = new window.PIXI.Point(1, 0);
-    fpsGraphic.x = screenWidth - 1;
-    fpsGraphic.y = 0;
-
-    if (fpsEnabled) {
-        stage.addChild(fpsGraphic);
-    }
-
-    lastLoop = new Date();
-
-    scrollDelta = 0;
-
-    // Try to fix bug where click initializes to a bogus value
-    click = null;
-    hover = null;
-
-    window.requestAnimationFrame(loop);
-}
-
-// Use PIXI loader to load image and then start animation
-window.PIXI.loader
-    .add(nodeImg)
-    .load(loopStart);
-
-window.addEventListener('load', function () {
+function registerEventHandlers() {
     var tweeningInputs, debugCheckbox, fpsCheckbox, nodeCheckbox, linesCheckbox;
     tweeningInputs = document.getElementsByName('tweening');
     debugCheckbox = document.getElementsByName('debugToggle')[0];
@@ -1148,4 +1091,63 @@ window.addEventListener('load', function () {
     linesCheckbox.addEventListener('change', function (e) {
         toggleLines();
     });
-}, false);
+}
+
+function loopStart () {
+    screenWidth = window.innerWidth;
+    screenHeight = window.innerHeight;
+    // Create the renderer
+    renderer = window.PIXI.autoDetectRenderer(screenWidth, screenHeight, {antialias: true, resolution: resolution});
+
+    // Add the canvas to the HTML document
+    document.body.appendChild(renderer.view);
+
+    // Create a container object called the `stage`
+    stage = new window.PIXI.Container();
+
+    renderer.view.style.position = 'absolute';
+    renderer.view.style.display = 'block';
+    renderer.autoResize = true;
+
+    counter = 0;
+    totalScreenPixels = screenWidth + screenHeight;
+    connectionDistance = Math.min(Math.round(totalScreenPixels / 16), 75);
+    pointShiftDistance = Math.round(totalScreenPixels / 45);
+    clickMaxDistStart = Math.min(Math.round(totalScreenPixels / 20), clickMaxDistStart);
+    hoverMaxDistStart = Math.min(Math.round(totalScreenPixels / 16), hoverMaxDistStart);
+    polygon = new window.PIXI.Graphics();
+    stage.addChild(polygon);
+    numPoints = Math.round(totalScreenPixels / 6);
+    startPoints = getRandomPoints(numPoints, screenWidth, screenHeight, zRange, tweeningFns);
+    polygonPoints = {
+        original: startPoints,
+        target: JSON.parse(JSON.stringify(startPoints)),
+        tweened: JSON.parse(JSON.stringify(startPoints))
+    };
+
+    fpsGraphic = new window.PIXI.Text('0', {font: '25px monospace', fill: 'yellow'});
+    fpsGraphic.anchor = new window.PIXI.Point(1, 0);
+    fpsGraphic.x = screenWidth - 1;
+    fpsGraphic.y = 0;
+
+    if (fpsEnabled) {
+        stage.addChild(fpsGraphic);
+    }
+
+    lastLoop = new Date();
+
+    scrollDelta = 0;
+
+    // Try to fix bug where click initializes to a bogus value
+    click = null;
+    hover = null;
+
+    registerEventHandlers();
+
+    window.requestAnimationFrame(loop);
+}
+
+// Use PIXI loader to load image and then start animation
+window.PIXI.loader
+    .add(nodeImg)
+    .load(loopStart);