mirror of
https://github.com/scratchfoundation/scratch-render.git
synced 2025-07-03 18:31:06 -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-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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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 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) => {
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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 () => {
|
||||
|
|
|
@ -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')
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue