Update to using Pixi.js package at v3

.gitmodules

@@ -34,9 +34,6 @@
 [submodule "vendor/fonts/Font-Awesome"]
 	path = vendor/fonts/Font-Awesome
 	url = git://github.com/FortAwesome/Font-Awesome.git
-[submodule "vendor/pixi.js"]
-	path = vendor/pixi.js
-	url = https://github.com/concord-consortium/pixi.js.git
 [submodule "vendor/fastclick"]
 	path = vendor/fastclick
 	url = https://github.com/ftlabs/fastclick.git

Makefile

@@ -393,7 +393,6 @@ bundled-licenses: \
 	public/lab/vendor/bundled-licenses/underscore \
 	public/lab/vendor/bundled-licenses/text \
 	public/lab/vendor/bundled-licenses/seedrandom.js \
-	public/lab/vendor/bundled-licenses/pixi.js \
 	public/lab/vendor/bundled-licenses/lab-grapher \
 	public/lab/vendor/bundled-licenses/iframe-phone \
 	public/lab/vendor/bundled-licenses/fastclick \

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lab",
-  "version": "1.14.0",
+  "version": "1.16.5",
   "description": "HTML5-based scientific models, visualizations, graphing, and probeware",
   "keywords": [
     "molecule",
@@ -42,6 +42,7 @@
     "markdown": ">=0.5.0",
     "mustache": "~0.7.2",
     "optimist": ">=0.6.0",
+    "pixi.js": "^3.0.11",
     "requirejs": ">=2.1.8",
     "screenfull": "^4.0.0",
     "uglify-js": "2.7.0",

src/lab/common/views/svg-container.js

@@ -12,14 +12,12 @@ define(function (require) {
       HitTestingHelper      = require('common/views/hit-testing-helper'),
       console               = require('common/console'),
       PIXI                  = require('pixi'),
-
       CANVAS_OVERSAMPLING = 2,
-
       MAX_Z_INDEX = 1000;
 
     // Assume that we can have *only one* Pixi renderer.
     // This is caused by the Pixi bug: https://github.com/GoodBoyDigital/pixi.js/issues/181
-    function getPixiRenderer(w, h) {
+  function getPixiRenderer(w, h) {
       if (getPixiRenderer.instance == null) {
         var browser = benchmark.browser;
         var newRenderer;
@@ -28,13 +26,13 @@ define(function (require) {
           // WebGL. Note Chrome automatically disables WebGL when using the problematic driver.
           // (Note that sometimes the separator between 10 and 6 is a '.' and sometimes a '_' so
           // use of the '.' matcher works is required)
-          newRenderer = function(w, h, view, transparent) {
-            return new PIXI.CanvasRenderer(w, h, view, transparent);
+          newRenderer = function(w, h, transparent) {
+            return new PIXI.CanvasRenderer(w, h, transparent);
           };
         } else {
           newRenderer = PIXI.autoDetectRenderer;
         }
-        getPixiRenderer.instance = newRenderer(w * CANVAS_OVERSAMPLING, h * CANVAS_OVERSAMPLING, null, true);
+        getPixiRenderer.instance = newRenderer(w * CANVAS_OVERSAMPLING, h * CANVAS_OVERSAMPLING, { transparent: true });
       } else {
         getPixiRenderer.instance.resize(w, h);
       }
@@ -58,7 +56,7 @@ define(function (require) {
 
         backgroundRect, backgroundGroup, foregroundGroup, brushContainer,
 
-        pixiRenderers, pixiStages, pixiContainers,
+        pixiRenderers, pixiContainers, pixiStages,
 
         hitTestingHelper,
         viewportZIndex = 0,
@@ -290,14 +288,17 @@ define(function (require) {
     function setupBackground() {
       var color = model.get("backgroundColor") || "rgba(0, 0, 0, 0)";
       backgroundRect.attr("fill", color);
+      // NOTE Oct 2019: PIXI.Stage is deprecated in v3, so if we still need this fix we will need to apply a background color
+      // to the Renderer as a whole, not the Stage (which is now just a Container)
+
       // Set color of PIXI.Stage to fix an issue with outlines around the objects that are visible
       // when WebGL renderer is being used. It only happens when PIXI.Stage background is different
       // from model container background. It's necessary to convert color into number, as PIXI
       // accepts only numbers. D3 helps us handle color names like "red", "green" etc. It doesn't
       // support rgba values, so ingore alpha channel.
-      pixiStages.forEach(function (pixiStage) {
-        pixiStage.setBackgroundColor(parseInt(d3.rgb(color.replace("rgba", "rgb")).toString().substr(1), 16));
-      });
+      // pixiStages.forEach(function (pixiStage) {
+      //   pixiStage.setBackgroundColor(parseInt(d3.rgb(color.replace("rgba", "rgb")).toString().substr(1), 16));
+      // });
     }
 
     function mousedown() {
@@ -426,7 +427,7 @@ define(function (require) {
 
       pixiContainers.forEach(function (pixiContainer) {
         // It would be nice to set position of PIXI.Stage object, but it doesn't work. We have
-        // to use nested PIXI.DisplayObjectContainer:
+        // to use nested PIXI.Container:
         pixiContainer.pivot.x = model2canvas(viewport.x);
         pixiContainer.pivot.y = model2canvasInv(viewport.y);
         // This would also work:
@@ -680,7 +681,7 @@ define(function (require) {
 
         if (pixiRenderers.length === 0) {
           pixiRenderer = getPixiRenderer(cx, cy);
-          pixiStage = new PIXI.Stage(null);
+          pixiStage = new PIXI.Container();
 
           node.appendChild(pixiRenderer.view);
           d3.select(pixiRenderer.view)
@@ -696,10 +697,11 @@ define(function (require) {
           hitTestingHelper.passMouseMove(foregroundContainer.node(), pixiRenderers[0].view);
         }
 
-        var pixiContainer = new PIXI.DisplayObjectContainer();
+        var pixiContainer = new PIXI.Container();
         pixiStages[0].addChild(pixiContainer);
         pixiContainers.push(pixiContainer);
 
+        // NOTE: PIXI Stages are deprecated in v3 but retained in this code (as Containers) to keep changeset minimal
         // We return container instead of stage, as we can apply view port transformations to it.
         // Stage transformations seem to be ignored by the PIXI renderer.
         return {
@@ -735,7 +737,7 @@ define(function (require) {
 
       renderCanvas: function() {
         var i, len;
-        // For now we follow that each Pixi viewport has just one PIXI.Stage.
+        // For now we follow that each Pixi viewport has just one PIXI.Container "stage".
         for (i = 0, len = pixiRenderers.length; i < len; i++) {
           pixiRenderers[i].render(pixiStages[i]);
         }

src/lab/lab.build.js

@@ -68,7 +68,7 @@
     'cs' :'../../vendor/require-cs/cs',
     'coffee-script': '../../vendor/coffee-script/extras/coffee-script',
     'underscore': '../../vendor/underscore/underscore',
-    'pixi': '../../vendor/pixi.js/bin/pixi.dev',
+    'pixi': '../../node_modules/pixi.js/bin/pixi',
     'canvg': '../../vendor/canvg-1.3/canvg',
     'rgbcolor': '../../vendor/canvg-1.3/rgbcolor',
     'fastclick': '../../vendor/fastclick/lib/fastclick',

src/lab/models/md2d/views/atoms-renderer.js

@@ -14,7 +14,7 @@ define(function(require) {
       // font-family needs to be unescaped to support fonts wrapped in '' (e.g. 'Comic Sans MS').
       ATOM_SVG_TPL =
       '<svg x="0px" y="0px" width="{{ width }}px" height="{{ height }}px" \
-       viewBox="0 0 32 32" xml:space="preserve"> \
+       viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"> \
         <style type="text/css"> \
         <![CDATA[ \
           text { \
@@ -31,18 +31,20 @@ define(function(require) {
         </style> \
          <defs> \
             <radialGradient id="grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%"> \
-              <stop stop-color="{{ lightCol }}" offset="0%"></stop> \
-              <stop stop-color="{{ medCol }}" offset="40%"></stop> \
-              <stop stop-color="{{ darkCol }}" offset="80%"></stop> \
-              <stop stop-color="{{ medCol }}" offset="100%"></stop> \
+              <stop style="stop-color:{{ lightCol }}" offset="0%"/> \
+              <stop style="stop-color:{{ medCol }}" offset="40%"/> \
+              <stop style="stop-color:{{ darkCol }}" offset="80%"/> \
+              <stop style="stop-color:{{ medCol }}" offset="100%"/> \
             </radialGradient> \
          </defs> \
          <g opacity="{{ opacity }}"> \
            {{#excited}} \
             <circle fill="#ffe600" cx="16" cy="16" r="12"/> \
+            <circle fill="{{ medCol }}" cx="16" cy="16" r="8"/> \
             <circle fill="url(#grad)" cx="16" cy="16" r="8"/> \
            {{/excited}} \
            {{^excited}} \
+            <circle fill="{{ medCol }}" stroke="{{ darkCol }}" cx="16" cy="16" r="14"/> \
             <circle fill="url(#grad)" cx="16" cy="16" r="16"/> \
            {{/excited}} \
            <text class="shadow" text-anchor="middle" x="16" y="16" dy="0.31em">{{ label }}</text> \
@@ -246,7 +248,7 @@ define(function(require) {
     function clearTextureCacheAndRedraw() {
       elementTex = {};
       viewAtoms.forEach(function(atom, i) {
-        atom.setTexture(getAtomTexture(i));
+        atom.texture = getAtomTexture(i);
       });
       modelView.renderCanvas();
     }
@@ -295,7 +297,7 @@ define(function(require) {
         if (container) {
           pixiContainer.removeChild(container);
         }
-        container = new PIXI.DisplayObjectContainer();
+        container = new PIXI.Container();
         pixiContainer.addChild(container);
 
         m2px = modelView.model2canvas;
@@ -348,7 +350,7 @@ define(function(require) {
 
           if (modelAtom.marked !== viewAtom.marked) {
             // Make sure that marked state is always reflected by the view.
-            viewAtom.setTexture(getAtomTexture(i));
+            viewAtom.texture = getAtomTexture(i);
             viewAtom.marked = modelAtoms[i].marked;
           }
 
@@ -361,7 +363,7 @@ define(function(require) {
           }
 
           if (model.properties.useQuantumDynamics) {
-            viewAtom.setTexture(getAtomTexture(i));
+            viewAtom.texture = getAtomTexture(i);
           }
         }
       },

src/lab/models/md2d/views/field-renderer.js

@@ -106,7 +106,7 @@ define(function(require) {
         }
         if (!show || count === 0) return;
 
-        container = new PIXI.DisplayObjectContainer();
+        container = new PIXI.Container();
         pixiContainer.addChild(container);
 
         sprites = [];

src/lab/models/md2d/views/vdw-lines-renderer.js

@@ -63,7 +63,7 @@ define(function(require) {
     }
 
     function createContainerAndSprites() {
-      container = new PIXI.DisplayObjectContainer();
+      container = new PIXI.Container();
       pixiContainer.addChild(container);
       sprites = [];
     }

src/lab/models/md2d/views/vectors-renderer.js

@@ -126,7 +126,7 @@ define(function(require) {
         }
         if (!show || count === 0) return;
 
-        container = new PIXI.DisplayObjectContainer();
+        container = new PIXI.Container();
         pixiContainer.addChild(container);
 
         var i, vec, arrowHead, tex;