mirror of
https://github.com/scratchfoundation/scratch-render.git
synced 2025-07-25 21:49:26 -04:00
refactor: [UEPR-17] Removed splitting code to chunks and restored used by tests html files
This commit is contained in:
parent
3ed744c17f
commit
991269bb52
10 changed files with 110 additions and 129 deletions
16
package-lock.json
generated
16
package-lock.json
generated
|
@ -39,7 +39,7 @@
|
||||||
"scratch-render-fonts": "1.0.53",
|
"scratch-render-fonts": "1.0.53",
|
||||||
"scratch-semantic-release-config": "1.0.14",
|
"scratch-semantic-release-config": "1.0.14",
|
||||||
"scratch-storage": "2.3.127",
|
"scratch-storage": "2.3.127",
|
||||||
"scratch-vm": "3.0.21",
|
"scratch-vm": "^4.5.280",
|
||||||
"scratch-webpack-configuration": "^1.3.0",
|
"scratch-webpack-configuration": "^1.3.0",
|
||||||
"semantic-release": "19.0.5",
|
"semantic-release": "19.0.5",
|
||||||
"tap": "11.1.5",
|
"tap": "11.1.5",
|
||||||
|
@ -22788,9 +22788,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/scratch-svg-renderer": {
|
"node_modules/scratch-svg-renderer": {
|
||||||
"version": "2.0.18",
|
"version": "2.3.80",
|
||||||
"resolved": "https://registry.npmjs.org/scratch-svg-renderer/-/scratch-svg-renderer-2.0.18.tgz",
|
"resolved": "https://registry.npmjs.org/scratch-svg-renderer/-/scratch-svg-renderer-2.3.80.tgz",
|
||||||
"integrity": "sha512-1lPR+hJWlbWKrFXaeQvS+38gbmeN115HBdRzxT5ufFysTl3HsvnFS9i4NtsRl15MEoutoegjI8pQp+bjuEIsdQ==",
|
"integrity": "sha512-DFU7NGT2NOH0AUMYW2VInFHLJt0tAUOuH4d9HmIbvmL7ySoIZHo3jXVvhWuDcIRcVI2CJ/WM77QrI8x4hiCXWQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"base64-js": "^1.2.1",
|
"base64-js": "^1.2.1",
|
||||||
"base64-loader": "^1.0.0",
|
"base64-loader": "^1.0.0",
|
||||||
|
@ -22830,9 +22830,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/scratch-vm": {
|
"node_modules/scratch-vm": {
|
||||||
"version": "3.0.21",
|
"version": "4.5.280",
|
||||||
"resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-3.0.21.tgz",
|
"resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-4.5.280.tgz",
|
||||||
"integrity": "sha512-huIk87Qzz4aLD4ZXVcjwkTLF1Rt4EvThBL+O+bF/HC2yHYwOD9LfwF5MTWj0xLBg4L1vqpuvU7WAP4I+N+fPGg==",
|
"integrity": "sha512-9UwPsa02WoTRPA02TFecpYuc4zdnzH6fz3ycdVvsNQwmHOhHB5iypZP5Q33mKmKM0Dg3yNrCA+Sg/HuxakPGKg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vernier/godirect": "^1.5.0",
|
"@vernier/godirect": "^1.5.0",
|
||||||
|
@ -22852,7 +22852,7 @@
|
||||||
"scratch-render": "^1.0.13",
|
"scratch-render": "^1.0.13",
|
||||||
"scratch-sb1-converter": "^1.0.0",
|
"scratch-sb1-converter": "^1.0.0",
|
||||||
"scratch-storage": "^2.3.5",
|
"scratch-storage": "^2.3.5",
|
||||||
"scratch-svg-renderer": "2.0.18",
|
"scratch-svg-renderer": "2.3.80",
|
||||||
"scratch-translate-extension-languages": "^1.0.0",
|
"scratch-translate-extension-languages": "^1.0.0",
|
||||||
"text-encoding": "^0.7.0",
|
"text-encoding": "^0.7.0",
|
||||||
"uuid": "^8.3.2",
|
"uuid": "^8.3.2",
|
||||||
|
|
|
@ -71,7 +71,7 @@
|
||||||
"scratch-render-fonts": "1.0.53",
|
"scratch-render-fonts": "1.0.53",
|
||||||
"scratch-semantic-release-config": "1.0.14",
|
"scratch-semantic-release-config": "1.0.14",
|
||||||
"scratch-storage": "2.3.127",
|
"scratch-storage": "2.3.127",
|
||||||
"scratch-vm": "3.0.21",
|
"scratch-vm": "^4.5.280",
|
||||||
"scratch-webpack-configuration": "^1.3.0",
|
"scratch-webpack-configuration": "^1.3.0",
|
||||||
"semantic-release": "19.0.5",
|
"semantic-release": "19.0.5",
|
||||||
"tap": "11.1.5",
|
"tap": "11.1.5",
|
||||||
|
|
|
@ -1,72 +0,0 @@
|
||||||
<body>
|
|
||||||
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
|
|
||||||
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
|
|
||||||
<script src="../../node_modules/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
The html file generated for the integration tests is located in 'dist/web' and
|
|
||||||
the relative path to the helper file is from there
|
|
||||||
-->
|
|
||||||
<script src="../../test/helper/page-util.js"></script>
|
|
||||||
|
|
||||||
<canvas id="test" width="480" height="360"></canvas>
|
|
||||||
<canvas id="cpu" width="480" height="360"></canvas>
|
|
||||||
<br/>
|
|
||||||
<canvas id="merge" width="480" height="360"></canvas>
|
|
||||||
<input type="file" id="file" name="file">
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// These variables are going to be available in the "window global" intentionally.
|
|
||||||
// Allows you easy access to debug with `vm.greenFlag()` etc.
|
|
||||||
window.devicePixelRatio = 1;
|
|
||||||
const gpuCanvas = document.getElementById('test');
|
|
||||||
var render = new ScratchRender(gpuCanvas);
|
|
||||||
var vm = initVM(render);
|
|
||||||
|
|
||||||
const fileInput = document.getElementById('file');
|
|
||||||
const loadFile = loadFileInputIntoVM.bind(null, fileInput, vm, render);
|
|
||||||
fileInput.addEventListener('change', e => {
|
|
||||||
loadFile()
|
|
||||||
.then(() => {
|
|
||||||
vm.greenFlag();
|
|
||||||
setTimeout(() => {
|
|
||||||
renderCpu();
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const cpuCanvas = document.getElementById('cpu');
|
|
||||||
const cpuCtx = cpuCanvas.getContext('2d');
|
|
||||||
const cpuImageData = cpuCtx.getImageData(0, 0, cpuCanvas.width, cpuCanvas.height);
|
|
||||||
function renderCpu() {
|
|
||||||
cpuImageData.data.fill(255);
|
|
||||||
const drawBits = render._drawList.map(id => {
|
|
||||||
const drawable = render._allDrawables[id];
|
|
||||||
if (!(drawable._visible && drawable.skin)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
drawable.updateCPURenderAttributes();
|
|
||||||
return { id, drawable };
|
|
||||||
}).reverse().filter(Boolean);
|
|
||||||
const color = new Uint8ClampedArray(3);
|
|
||||||
for (let x = -239; x <= 240; x++) {
|
|
||||||
for (let y = -180; y< 180; y++) {
|
|
||||||
render.constructor.sampleColor3b([x, y], drawBits, color);
|
|
||||||
const offset = (((179-y) * 480) + 239 + x) * 4
|
|
||||||
cpuImageData.data.set(color, offset);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
cpuCtx.putImageData(cpuImageData, 0, 0);
|
|
||||||
|
|
||||||
const merge = document.getElementById('merge');
|
|
||||||
const ctx = merge.getContext('2d');
|
|
||||||
ctx.drawImage(gpuCanvas, 0, 0);
|
|
||||||
const gpuImageData = ctx.getImageData(0, 0, 480, 360);
|
|
||||||
for (let x=0; x<gpuImageData.data.length; x++) {
|
|
||||||
gpuImageData.data[x] = 255 - Math.abs(gpuImageData.data[x] - cpuImageData.data[x]);
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.putImageData(gpuImageData, 0, 0);
|
|
||||||
}
|
|
||||||
</script>
|
|
69
test/integration/cpu-render.html
Normal file
69
test/integration/cpu-render.html
Normal file
|
@ -0,0 +1,69 @@
|
||||||
|
<body>
|
||||||
|
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
|
||||||
|
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
|
||||||
|
<script src="../../node_modules/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
|
||||||
|
<script src="../helper/page-util.js"></script>
|
||||||
|
<!-- note: this uses the BUILT version of scratch-render! make sure to npm run build -->
|
||||||
|
<script src="../../dist/web/scratch-render.js"></script>
|
||||||
|
|
||||||
|
<canvas id="test" width="480" height="360"></canvas>
|
||||||
|
<canvas id="cpu" width="480" height="360"></canvas>
|
||||||
|
<br/>
|
||||||
|
<canvas id="merge" width="480" height="360"></canvas>
|
||||||
|
<input type="file" id="file" name="file">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// These variables are going to be available in the "window global" intentionally.
|
||||||
|
// Allows you easy access to debug with `vm.greenFlag()` etc.
|
||||||
|
window.devicePixelRatio = 1;
|
||||||
|
const gpuCanvas = document.getElementById('test');
|
||||||
|
var render = new ScratchRender(gpuCanvas);
|
||||||
|
var vm = initVM(render);
|
||||||
|
|
||||||
|
const fileInput = document.getElementById('file');
|
||||||
|
const loadFile = loadFileInputIntoVM.bind(null, fileInput, vm, render);
|
||||||
|
fileInput.addEventListener('change', e => {
|
||||||
|
loadFile()
|
||||||
|
.then(() => {
|
||||||
|
vm.greenFlag();
|
||||||
|
setTimeout(() => {
|
||||||
|
renderCpu();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const cpuCanvas = document.getElementById('cpu');
|
||||||
|
const cpuCtx = cpuCanvas.getContext('2d');
|
||||||
|
const cpuImageData = cpuCtx.getImageData(0, 0, cpuCanvas.width, cpuCanvas.height);
|
||||||
|
function renderCpu() {
|
||||||
|
cpuImageData.data.fill(255);
|
||||||
|
const drawBits = render._drawList.map(id => {
|
||||||
|
const drawable = render._allDrawables[id];
|
||||||
|
if (!(drawable._visible && drawable.skin)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
drawable.updateCPURenderAttributes();
|
||||||
|
return { id, drawable };
|
||||||
|
}).reverse().filter(Boolean);
|
||||||
|
const color = new Uint8ClampedArray(3);
|
||||||
|
for (let x = -239; x <= 240; x++) {
|
||||||
|
for (let y = -180; y< 180; y++) {
|
||||||
|
render.constructor.sampleColor3b([x, y], drawBits, color);
|
||||||
|
const offset = (((179-y) * 480) + 239 + x) * 4
|
||||||
|
cpuImageData.data.set(color, offset);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cpuCtx.putImageData(cpuImageData, 0, 0);
|
||||||
|
|
||||||
|
const merge = document.getElementById('merge');
|
||||||
|
const ctx = merge.getContext('2d');
|
||||||
|
ctx.drawImage(gpuCanvas, 0, 0);
|
||||||
|
const gpuImageData = ctx.getImageData(0, 0, 480, 360);
|
||||||
|
for (let x=0; x<gpuImageData.data.length; x++) {
|
||||||
|
gpuImageData.data[x] = 255 - Math.abs(gpuImageData.data[x] - cpuImageData.data[x]);
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.putImageData(gpuImageData, 0, 0);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
|
@ -1,31 +0,0 @@
|
||||||
<body>
|
|
||||||
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
|
|
||||||
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
|
|
||||||
<script src="../../node_modules/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
The html file generated for the integration tests is located in 'dist/web' and
|
|
||||||
the relative path to the helper file is from there
|
|
||||||
-->
|
|
||||||
<script src="../../test/helper/page-util.js"></script>
|
|
||||||
|
|
||||||
<canvas id="test" width="480" height="360" style="width: 480px"></canvas>
|
|
||||||
<input type="file" id="file" name="file">
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// These variables are going to be available in the "window global" intentionally.
|
|
||||||
// Allows you easy access to debug with `vm.greenFlag()` etc.
|
|
||||||
window.devicePixelRatio = 1;
|
|
||||||
|
|
||||||
var canvas = document.getElementById('test');
|
|
||||||
var render = new ScratchRender(canvas);
|
|
||||||
var vm = initVM(render);
|
|
||||||
var mockMouse = data => vm.runtime.postIOData('mouse', {
|
|
||||||
canvasWidth: canvas.width,
|
|
||||||
canvasHeight: canvas.height,
|
|
||||||
...data,
|
|
||||||
});
|
|
||||||
|
|
||||||
const loadFile = loadFileInputIntoVM.bind(null, document.getElementById('file'), vm, render);
|
|
||||||
</script>
|
|
28
test/integration/index.html
Normal file
28
test/integration/index.html
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
<body>
|
||||||
|
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
|
||||||
|
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
|
||||||
|
<script src="../../node_modules/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
|
||||||
|
<script src="../helper/page-util.js"></script>
|
||||||
|
<!-- note: this uses the BUILT version of scratch-render! make sure to npm run build -->
|
||||||
|
<script src="../../dist/web/scratch-render.js"></script>
|
||||||
|
|
||||||
|
<canvas id="test" width="480" height="360" style="width: 480px"></canvas>
|
||||||
|
<input type="file" id="file" name="file">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// These variables are going to be available in the "window global" intentionally.
|
||||||
|
// Allows you easy access to debug with `vm.greenFlag()` etc.
|
||||||
|
window.devicePixelRatio = 1;
|
||||||
|
|
||||||
|
var canvas = document.getElementById('test');
|
||||||
|
var render = new ScratchRender(canvas);
|
||||||
|
var vm = initVM(render);
|
||||||
|
var mockMouse = data => vm.runtime.postIOData('mouse', {
|
||||||
|
canvasWidth: canvas.width,
|
||||||
|
canvasHeight: canvas.height,
|
||||||
|
...data,
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadFile = loadFileInputIntoVM.bind(null, document.getElementById('file'), vm, render);
|
||||||
|
</script>
|
||||||
|
</body>
|
|
@ -3,7 +3,7 @@ const {chromium} = require('playwright-chromium');
|
||||||
const test = require('tap').test;
|
const test = require('tap').test;
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
const indexHTML = path.resolve(__dirname, '../../dist/web/index.html');
|
const indexHTML = path.resolve(__dirname, 'index.html');
|
||||||
const testDir = (...args) => path.resolve(__dirname, 'pick-tests', ...args);
|
const testDir = (...args) => path.resolve(__dirname, 'pick-tests', ...args);
|
||||||
|
|
||||||
const runFile = async (file, action, page, script) => {
|
const runFile = async (file, action, page, script) => {
|
||||||
|
|
|
@ -6,7 +6,7 @@ const fs = require('fs');
|
||||||
|
|
||||||
const allGpuModes = ['ForceCPU', 'ForceGPU', 'Automatic'];
|
const allGpuModes = ['ForceCPU', 'ForceGPU', 'Automatic'];
|
||||||
|
|
||||||
const indexHTML = path.resolve(__dirname, '../../dist/web/index.html');
|
const indexHTML = path.resolve(__dirname, 'index.html');
|
||||||
const testDir = (...args) => path.resolve(__dirname, 'scratch-tests', ...args);
|
const testDir = (...args) => path.resolve(__dirname, 'scratch-tests', ...args);
|
||||||
|
|
||||||
const checkOneGpuMode = (t, says) => {
|
const checkOneGpuMode = (t, says) => {
|
||||||
|
|
|
@ -3,7 +3,7 @@ const {chromium} = require('playwright-chromium');
|
||||||
const test = require('tap').test;
|
const test = require('tap').test;
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
const indexHTML = path.resolve(__dirname, '../../dist/web/index.html');
|
const indexHTML = path.resolve(__dirname, 'index.html');
|
||||||
|
|
||||||
// immediately invoked async function to let us wait for each test to finish before starting the next.
|
// immediately invoked async function to let us wait for each test to finish before starting the next.
|
||||||
(async () => {
|
(async () => {
|
||||||
|
|
|
@ -3,7 +3,6 @@ const webpack = require('webpack');
|
||||||
|
|
||||||
const TerserPlugin = require('terser-webpack-plugin');
|
const TerserPlugin = require('terser-webpack-plugin');
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
||||||
|
|
||||||
const ScratchWebpackConfigBuilder = require('scratch-webpack-configuration');
|
const ScratchWebpackConfigBuilder = require('scratch-webpack-configuration');
|
||||||
|
|
||||||
|
@ -41,19 +40,7 @@ const webConfig = baseConfig.clone()
|
||||||
name: 'ScratchRender'
|
name: 'ScratchRender'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
.addPlugin(new HtmlWebpackPlugin({
|
|
||||||
chunks: 'all',
|
|
||||||
filename: 'index.html',
|
|
||||||
template: 'test/integration/index.ejs',
|
|
||||||
scriptLoading: 'blocking'
|
|
||||||
}))
|
|
||||||
.addPlugin(new HtmlWebpackPlugin({
|
|
||||||
chunks: 'all',
|
|
||||||
filename: 'cpu-render.html',
|
|
||||||
template: 'test/integration/cpu-render.ejs',
|
|
||||||
scriptLoading: 'blocking'
|
|
||||||
}));
|
|
||||||
|
|
||||||
const playgroundConfig = baseConfig.clone()
|
const playgroundConfig = baseConfig.clone()
|
||||||
.setTarget('browserslist')
|
.setTarget('browserslist')
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue