scratchfoundation/scratch-svg-renderer
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-svg-renderer.git synced 2025-08-28 22:20:12 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added basic testing playground

Browse source
This commit is contained in:
adroitwhiz 2019-01-04 02:25:17 -05:00 • committed by Christopher Willis-Ford
parent 630a33d834
commit 7fd834d811
4 changed files with 86 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -7,6 +7,7 @@ npm-*
# Build
dist/*
/playground
# Editors
/#*

3
package.json
View file

@ -6,6 +6,7 @@
"scripts": {
"build": "npm run clean && webpack --progress --colors --bail",
"clean": "rimraf ./dist",
"start": "webpack-dev-server",
"test": "npm run test:lint && npm run test:unit",
"test:lint": "eslint . --ext .js",
"test:unit": "tap ./test/*.js",
@ -30,6 +31,7 @@
"babel-eslint": "^8.1.2",
"babel-loader": "7.1.5",
"babel-preset-env": "1.6.1",
"copy-webpack-plugin": "^4.5.1",
"eslint": "^4.14.0",
"eslint-config-scratch": "^5.0.0",
"eslint-plugin-import": "^2.12.0",
@ -41,6 +43,7 @@
"tap": "^11.0.1",
"webpack": "^4.8.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.4",
"xmldom": "^0.1.27"
}
}

55
src/playground/index.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scratch SVG rendering playground</title>
</head>
<body>
<p>
<input type="file" id="svg-file-upload", accept="image/svg+xml">
</p>
<p>
<label for="render-scale">Scale:</label>
<input type="range" id="render-scale" value="1" min="0.5" max="2" step="0.1">
</p>
<p>
<input type="button" id="trigger-render" value="Render">
</p>
<canvas id="render-canvas"></canvas>
<script src="scratch-svg-renderer.js"></script>
<script>
const renderCanvas = document.getElementById("render-canvas");
const fileChooser = document.getElementById("svg-file-upload");
const scaleSlider = document.getElementById("render-scale");
const renderButton = document.getElementById("trigger-render");
const renderer = new ScratchSVGRenderer.SVGRenderer(renderCanvas);
function renderSVGString(str) {
renderer.fromString(str);
renderer._draw(parseFloat(scaleSlider.value));
}
function readFileAsText(file) {
return new Promise((res, rej) => {
const reader = new FileReader();
reader.onload = function(event) {
res(reader.result);
}
reader.onerror = console.log;
reader.readAsText(file);
})
}
renderButton.addEventListener("click", (event => {
readFileAsText(fileChooser.files[0]).then(renderSVGString).catch(console.error);
}));
</script>
</body>
</html>

30
webpack.config.js
View file

@ -1,8 +1,14 @@
const CopyWebpackPlugin = require('copy-webpack-plugin');
const defaultsDeep = require('lodash.defaultsdeep');
const path = require('path');
const base = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
devServer: {
contentBase: false,
host: '0.0.0.0',
port: process.env.PORT || 8576
},
devtool: 'cheap-module-source-map',
entry: {
'scratch-svg-renderer': './src/index.js'
@ -19,10 +25,27 @@ const base = {
presets: [['env', {targets: {}}]]
}
}]
}
},
plugins: []
};
module.exports =
module.exports = [
defaultsDeep({}, base, {
target: 'web',
output: {
library: 'ScratchSVGRenderer',
libraryTarget: 'umd',
path: path.resolve('playground'),
filename: '[name].js'
},
plugins: base.plugins.concat([
new CopyWebpackPlugin([
{
from: 'src/playground'
}
])
])
}),
defaultsDeep({}, base, {
output: {
library: 'ScratchSVGRenderer',
@ -40,4 +63,5 @@ module.exports =
optimization: {
minimize: process.env.NODE_ENV === 'production'
}
});
})
];