diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ab96992..e5f4915 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/demo/index.html b/demo/index.html index 7a417c5..c1f2e0b 100644 --- a/demo/index.html +++ b/demo/index.html @@ -46,6 +46,7 @@ .matter-js-compare-build.matter-demo canvas { opacity: 0.5; background: transparent !important; + z-index: 25 !important; } diff --git a/demo/src/Multi.js b/demo/src/Multi.js new file mode 100644 index 0000000..a0f52ac --- /dev/null +++ b/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 }; diff --git a/demo/src/index.ejs b/demo/src/index.ejs index cb568ca..ba3197c 100644 --- a/demo/src/index.ejs +++ b/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; + } } diff --git a/demo/src/index.js b/demo/src/index.js index a03cf8b..7e74983 100644 --- a/demo/src/index.js +++ b/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); } diff --git a/src/render/Render.js b/src/render/Render.js index af5a833..3cfd80a 100644 --- a/src/render/Render.js +++ b/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); })(); };