Merge branch 'master' into performance-2

.github/workflows/ci.yml

@@ -24,7 +24,6 @@ jobs:
         cache: 'npm'
     - run: npm ci
     - run: npm run lint
-    - run: npm run benchmark
-    - run: npm run test
     - run: npm run build
     - run: npm run build-demo
+    - run: npm run test

demo/index.html

@@ -46,6 +46,7 @@
       .matter-js-compare-build.matter-demo canvas {
         opacity: 0.5;
         background: transparent !important;
+        z-index: 25 !important;
       }
     </style>
   </head>

demo/src/Multi.js

@@ -0,0 +1,97 @@
+/**
+* A Matter.js multi example testbed based on MatterTools.
+*
+* Tool to interactively test multiple examples at once.
+*
+* USAGE: [host]?multi#[example1,example2,example3...]
+*  e.g. http://localhost:8000/?multi#mixed
+*
+* @module Multi
+*/
+
+var MatterTools = require('matter-tools');
+
+var multi = function(examples, isDev) {
+    var demo = MatterTools.Demo.create({
+        toolbar: {
+            title: 'matter-js ・ ' + (isDev ? 'dev' : '') + ' ・ multi',
+            url: 'https://github.com/liabru/matter-js',
+            reset: false,
+            source: false,
+            inspector: false,
+            tools: false,
+            fullscreen: false,
+            exampleSelect: false
+        },
+        tools: {
+            inspector: false,
+            gui: false
+        },
+        inline: false,
+        preventZoom: false,
+        resetOnOrientation: false,
+        routing: false,
+        startExample: false
+    });
+
+    var urlHash = window.location.hash,
+        allExampleIds = examples.map(function(example) { return example.id; }),
+        exampleIds = urlHash ? urlHash.slice(1).split(',') : allExampleIds.slice(0, 4),
+        exampleCount = Math.ceil(Math.sqrt(exampleIds.length));
+
+    var container = document.createElement('div');
+    container.style = 'display: grid; grid-template-columns: repeat(' + exampleCount + ', 1fr); grid-template-rows: repeat(' + exampleCount + ', 1fr); max-width: calc(100vmin * 1.25 - 40px); max-height: 100vmin;';
+
+    demo.dom.root.appendChild(container);
+    document.body.appendChild(demo.dom.root);
+
+    document.title = 'Matter.js Multi' + (isDev ? ' ・ Dev' : '');
+    console.info('Demo.Multi: matter-js@' + Matter.version);
+
+    // always show debug info
+    Matter.before('Render.create', function(renderOptions) {
+        renderOptions.options.showDebug = true;
+    });
+
+    Matter.after('Runner.create', function() {
+        this.isFixed = true;
+    });
+
+    var runExamples = function(exampleIds) {
+        for (var i = 0; i < exampleIds.length; i += 1) {
+            var exampleId = exampleIds[i],
+                example = examples.find(function(example) { return example.id === exampleId; });
+
+            if (!example) {
+                continue;
+            }
+
+            var canvas = example.init().render.canvas;
+            container.appendChild(canvas);
+        }
+    };
+
+    runExamples(exampleIds);
+
+    // arrow key navigation of examples
+    document.addEventListener('keyup', function(event) {
+        var isBackKey = event.key === 'ArrowLeft' || event.key === 'ArrowUp',
+            isForwardKey = event.key === 'ArrowRight' || event.key === 'ArrowDown';
+
+        if (isBackKey || isForwardKey) {
+            var direction = isBackKey ? -1 : 1;
+
+            var currentExampleIndex = allExampleIds.findIndex(function(exampleId) { 
+                return exampleId === exampleIds[0];
+            });
+
+            var nextExampleId = (allExampleIds.length + currentExampleIndex + direction * exampleIds.length) % allExampleIds.length,
+                nextExamples = allExampleIds.slice(nextExampleId, (nextExampleId + exampleIds.length) % allExampleIds.length);
+
+            window.location.hash = nextExamples.join(',');
+            window.location.reload();
+        }
+    });
+};
+
+module.exports = { multi: multi };

demo/src/index.ejs

@@ -35,7 +35,6 @@
         width: 100%;
         height: 100%;
         border: 0;
-        z-index: 1;
         pointer-events: none;
       }
 
@@ -43,9 +42,15 @@
         display: none;
       }
 
+      .matter-js.dev.matter-demo canvas {
+        background: transparent !important;
+        z-index: 20;
+      }
+
       .matter-js-compare-build.matter-demo canvas {
         opacity: 0.5;
         background: transparent !important;
+        z-index: 15 !important;
       }
 
       @media only screen and (min-width: 1300px) {
@@ -54,6 +59,11 @@
           position: relative;
           z-index: 20;
         }
+
+        .matter-js-compare-build.matter-demo canvas {
+          position: relative;
+          z-index: 15;
+        }
       }
     </style>
   </head>

demo/src/index.js

@@ -12,6 +12,7 @@
 var Matter = require('matter-js');
 var Examples = require('../../examples/index');
 var compare = require('./Compare').compare;
+var multi = require('./Multi').multi;
 var demo = require('./Demo').demo;
 
 // browser globals
@@ -31,9 +32,13 @@ var examples = Matter.Common.keys(Examples).map(function(id){
 
 // start the requested tool
 var isCompare = window.location.search.indexOf('compare') >= 0;
+var isMulti = window.location.search.indexOf('multi') >= 0;
 var isDev = __MATTER_IS_DEV__;
+
 if (isCompare) {
     compare(examples, isDev);
+} else if (isMulti) {
+    multi(examples, isDev);
 } else {
     demo(examples, isDev);
 }

src/render/Render.js

@@ -144,6 +144,8 @@ var Mouse = require('../core/Mouse');
 
             Render.world(render, time);
 
+            render.context.setTransform(render.options.pixelRatio, 0, 0, render.options.pixelRatio, 0, 0);
+
             if (render.options.showStats || render.options.showDebug) {
                 Render.stats(render, render.context, time);
             }
@@ -151,6 +153,8 @@ var Mouse = require('../core/Mouse');
             if (render.options.showPerformance || render.options.showDebug) {
                 Render.performance(render, render.context, time);
             }
+
+            render.context.setTransform(1, 0, 0, 1, 0, 0);
         })();
     };