refactor: [UEPR-17] Removed splitting code to chunks and restored used by tests html files

This commit is contained in:
MiroslavDionisiev 2024-06-26 17:03:57 +03:00
parent 3ed744c17f
commit 991269bb52
10 changed files with 110 additions and 129 deletions

16
package-lock.json generated
View file

@ -39,7 +39,7 @@
"scratch-render-fonts": "1.0.53",
"scratch-semantic-release-config": "1.0.14",
"scratch-storage": "2.3.127",
"scratch-vm": "3.0.21",
"scratch-vm": "^4.5.280",
"scratch-webpack-configuration": "^1.3.0",
"semantic-release": "19.0.5",
"tap": "11.1.5",
@ -22788,9 +22788,9 @@
}
},
"node_modules/scratch-svg-renderer": {
"version": "2.0.18",
"resolved": "https://registry.npmjs.org/scratch-svg-renderer/-/scratch-svg-renderer-2.0.18.tgz",
"integrity": "sha512-1lPR+hJWlbWKrFXaeQvS+38gbmeN115HBdRzxT5ufFysTl3HsvnFS9i4NtsRl15MEoutoegjI8pQp+bjuEIsdQ==",
"version": "2.3.80",
"resolved": "https://registry.npmjs.org/scratch-svg-renderer/-/scratch-svg-renderer-2.3.80.tgz",
"integrity": "sha512-DFU7NGT2NOH0AUMYW2VInFHLJt0tAUOuH4d9HmIbvmL7ySoIZHo3jXVvhWuDcIRcVI2CJ/WM77QrI8x4hiCXWQ==",
"dependencies": {
"base64-js": "^1.2.1",
"base64-loader": "^1.0.0",
@ -22830,9 +22830,9 @@
"dev": true
},
"node_modules/scratch-vm": {
"version": "3.0.21",
"resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-3.0.21.tgz",
"integrity": "sha512-huIk87Qzz4aLD4ZXVcjwkTLF1Rt4EvThBL+O+bF/HC2yHYwOD9LfwF5MTWj0xLBg4L1vqpuvU7WAP4I+N+fPGg==",
"version": "4.5.280",
"resolved": "https://registry.npmjs.org/scratch-vm/-/scratch-vm-4.5.280.tgz",
"integrity": "sha512-9UwPsa02WoTRPA02TFecpYuc4zdnzH6fz3ycdVvsNQwmHOhHB5iypZP5Q33mKmKM0Dg3yNrCA+Sg/HuxakPGKg==",
"dev": true,
"dependencies": {
"@vernier/godirect": "^1.5.0",
@ -22852,7 +22852,7 @@
"scratch-render": "^1.0.13",
"scratch-sb1-converter": "^1.0.0",
"scratch-storage": "^2.3.5",
"scratch-svg-renderer": "2.0.18",
"scratch-svg-renderer": "2.3.80",
"scratch-translate-extension-languages": "^1.0.0",
"text-encoding": "^0.7.0",
"uuid": "^8.3.2",

View file

@ -71,7 +71,7 @@
"scratch-render-fonts": "1.0.53",
"scratch-semantic-release-config": "1.0.14",
"scratch-storage": "2.3.127",
"scratch-vm": "3.0.21",
"scratch-vm": "^4.5.280",
"scratch-webpack-configuration": "^1.3.0",
"semantic-release": "19.0.5",
"tap": "11.1.5",

View file

@ -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>

View 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>

View file

@ -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>

View 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>

View file

@ -3,7 +3,7 @@ const {chromium} = require('playwright-chromium');
const test = require('tap').test;
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 runFile = async (file, action, page, script) => {

View file

@ -6,7 +6,7 @@ const fs = require('fs');
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 checkOneGpuMode = (t, says) => {

View file

@ -3,7 +3,7 @@ const {chromium} = require('playwright-chromium');
const test = require('tap').test;
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.
(async () => {

View file

@ -3,7 +3,6 @@ const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScratchWebpackConfigBuilder = require('scratch-webpack-configuration');
@ -41,19 +40,7 @@ const webConfig = baseConfig.clone()
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()
.setTarget('browserslist')