From 5f79511391e372516181f2640a10308825b7871b Mon Sep 17 00:00:00 2001 From: liabru Date: Sun, 13 Aug 2023 16:31:30 +0100 Subject: [PATCH 1/4] update ci --- .github/workflows/ci.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 From 7ec38a1f1c7cbfc5e37cc2a1c1b9a2978dc06ab0 Mon Sep 17 00:00:00 2001 From: liabru Date: Sun, 13 Aug 2023 18:59:33 +0100 Subject: [PATCH 2/4] added pixel ratio scaling to render debug stats --- src/render/Render.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/render/Render.js b/src/render/Render.js index 1002a42..9507049 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); })(); }; From b3e28decc7fed62ea134fbe8d6842fe21bfd8e5e Mon Sep 17 00:00:00 2001 From: liabru Date: Sun, 11 Feb 2024 19:14:22 +0000 Subject: [PATCH 3/4] added multi example testing tool to demo --- demo/src/Multi.js | 97 +++++++++++++++++++++++++++++++++++++++++++++++ demo/src/index.js | 5 +++ 2 files changed, 102 insertions(+) create mode 100644 demo/src/Multi.js 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.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); } From 0cc4d964e2523da3d2a084e8fc75a4c16bae442f Mon Sep 17 00:00:00 2001 From: liabru Date: Sun, 11 Feb 2024 19:30:03 +0000 Subject: [PATCH 4/4] fixed compare tool layer order in demo testbed --- demo/index.html | 1 + demo/src/index.ejs | 12 +++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) 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/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; + } }