diff --git a/.gitmodules b/.gitmodules index 0e04919412..a0e773c977 100644 --- a/.gitmodules +++ b/.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 diff --git a/Makefile b/Makefile index 54f9797b32..f7d87d791f 100755 --- a/Makefile +++ b/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 \ diff --git a/package.json b/package.json index f9e62a7e3d..54ed9f0e90 100755 --- a/package.json +++ b/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", diff --git a/src/lab/common/views/svg-container.js b/src/lab/common/views/svg-container.js index 4b37367997..763e9054b3 100644 --- a/src/lab/common/views/svg-container.js +++ b/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]); } diff --git a/src/lab/lab.build.js b/src/lab/lab.build.js index ea2ce5fd19..f008e8beab 100644 --- a/src/lab/lab.build.js +++ b/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', diff --git a/src/lab/models/md2d/views/atoms-renderer.js b/src/lab/models/md2d/views/atoms-renderer.js index 62632a6599..46eaa4d859 100644 --- a/src/lab/models/md2d/views/atoms-renderer.js +++ b/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 = ' \ + viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"> \