From 29b0c61658f8fcf1a6d0bd3c27ba6272b8b47957 Mon Sep 17 00:00:00 2001 From: Chris Hart Date: Wed, 9 Oct 2019 12:11:59 -0400 Subject: [PATCH 1/7] Switch from submodule to node module --- .gitmodules | 3 --- package.json | 1 + src/lab/lab.build.js | 2 +- vendor/pixi.js | 1 - 4 files changed, 2 insertions(+), 5 deletions(-) delete mode 160000 vendor/pixi.js 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/package.json b/package.json index f9e62a7e3d..9f9f495dca 100755 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "markdown": ">=0.5.0", "mustache": "~0.7.2", "optimist": ">=0.6.0", + "pixi.js": "^5.1.5", "requirejs": ">=2.1.8", "screenfull": "^4.0.0", "uglify-js": "2.7.0", diff --git a/src/lab/lab.build.js b/src/lab/lab.build.js index ea2ce5fd19..de3a2809a8 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/dist/pixi', 'canvg': '../../vendor/canvg-1.3/canvg', 'rgbcolor': '../../vendor/canvg-1.3/rgbcolor', 'fastclick': '../../vendor/fastclick/lib/fastclick', diff --git a/vendor/pixi.js b/vendor/pixi.js deleted file mode 160000 index 433f466d94..0000000000 --- a/vendor/pixi.js +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 433f466d94ed2765de1510fede3d07686aa05bb6 From 0aa2085c66e1a4b6e2007e9493587718e7515ba7 Mon Sep 17 00:00:00 2001 From: Chris Hart Date: Wed, 9 Oct 2019 14:47:40 -0400 Subject: [PATCH 2/7] Test a bump to Pixi.js v2 --- Makefile | 1 - package.json | 2 +- src/lab/common/views/svg-container.js | 4 +--- src/lab/lab.build.js | 2 +- 4 files changed, 3 insertions(+), 6 deletions(-) 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 9f9f495dca..025fd296ae 100755 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "markdown": ">=0.5.0", "mustache": "~0.7.2", "optimist": ">=0.6.0", - "pixi.js": "^5.1.5", + "pixi.js": "^2.2.9", "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..960d921f04 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; diff --git a/src/lab/lab.build.js b/src/lab/lab.build.js index de3a2809a8..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': '../../node_modules/pixi.js/dist/pixi', + 'pixi': '../../node_modules/pixi.js/bin/pixi', 'canvg': '../../vendor/canvg-1.3/canvg', 'rgbcolor': '../../vendor/canvg-1.3/rgbcolor', 'fastclick': '../../vendor/fastclick/lib/fastclick', From 65cfc81f18d8272e2e2712053d04d5a2414f8502 Mon Sep 17 00:00:00 2001 From: Chris Hart Date: Wed, 9 Oct 2019 16:41:20 -0400 Subject: [PATCH 3/7] Bump Pixi to v3, first pass (no errors but black background) --- package.json | 2 +- src/lab/common/views/svg-container.js | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 025fd296ae..dd564fdb4d 100755 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "markdown": ">=0.5.0", "mustache": "~0.7.2", "optimist": ">=0.6.0", - "pixi.js": "^2.2.9", + "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 960d921f04..5597f46699 100644 --- a/src/lab/common/views/svg-container.js +++ b/src/lab/common/views/svg-container.js @@ -56,7 +56,7 @@ define(function (require) { backgroundRect, backgroundGroup, foregroundGroup, brushContainer, - pixiRenderers, pixiStages, pixiContainers, + pixiRenderers, pixiContainers, pixiStages, hitTestingHelper, viewportZIndex = 0, @@ -293,9 +293,9 @@ define(function (require) { // 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() { @@ -678,7 +678,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) @@ -694,7 +694,7 @@ 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); From c34d2ddb4bfd7d213ecd4bfcdd7c727f79ca62a6 Mon Sep 17 00:00:00 2001 From: Chris Hart Date: Wed, 9 Oct 2019 17:11:43 -0400 Subject: [PATCH 4/7] Clarify additional changes to migrate to V3 of Pixi.js including: The removal of PIXI.Stage The rename of PIXI.DisplayObjectContainer to PIXI.Container The refactor of setTexture function to a property texture = textureToApply Also added a small piece to the SVG atom just in case that is what the underlying issue on iOS 13 is. Sadly this has not fixed the problem --- src/lab/common/views/svg-container.js | 14 +++++++++----- src/lab/models/md2d/views/atoms-renderer.js | 10 +++++----- src/lab/models/md2d/views/field-renderer.js | 2 +- src/lab/models/md2d/views/vdw-lines-renderer.js | 2 +- src/lab/models/md2d/views/vectors-renderer.js | 2 +- 5 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/lab/common/views/svg-container.js b/src/lab/common/views/svg-container.js index 5597f46699..763e9054b3 100644 --- a/src/lab/common/views/svg-container.js +++ b/src/lab/common/views/svg-container.js @@ -26,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); } @@ -288,6 +288,9 @@ 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 @@ -424,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: @@ -698,6 +701,7 @@ define(function (require) { 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 { @@ -733,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/models/md2d/views/atoms-renderer.js b/src/lab/models/md2d/views/atoms-renderer.js index 62632a6599..6b27c816da 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"> \