chore(package): update webpack-cli to version 3.3.4

Merge pull request #463 from LLK/greenkeeper/scratch-svg-renderer-0.2.0-prerelease.20190523193400
Update scratch-svg-renderer to the latest version 🚀
2019-06-11 09:13:13 +00:00 · 2019-06-05 11:02:10 -04:00 · 2019-05-30 11:58:22 -04:00 · 2019-05-30 11:50:54 -04:00 · 2019-05-28 16:10:36 -07:00 · 2019-05-28 15:39:34 -07:00
6 changed files with 123 additions and 49 deletions
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
    "travis-after-all": "^1.4.4",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "webpack": "^4.8.0",
-    "webpack-cli": "^3.1.0",
+    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
@@ -53,7 +53,7 @@
    "minilog": "3.1.0",
    "raw-loader": "^0.5.1",
    "scratch-storage": "^1.0.0",
-    "scratch-svg-renderer": "0.2.0-prerelease.20190521170426",
+    "scratch-svg-renderer": "0.2.0-prerelease.20190523193400",
    "twgl.js": "4.4.0"
  }
 }
--- a/src/playground/index.html
+++ b/src/playground/index.html
@@ -3,13 +3,11 @@
 <head>
    <meta charset="UTF-8">
    <title>Scratch WebGL rendering demo</title>
-    <style>
-        #scratch-stage { width: 480px; }
-    </style>
+    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
-<body style="background: lightsteelblue">
-<canvas id="scratch-stage" width="10" height="10" style="border:3px dashed black"></canvas>
-<canvas id="debug-canvas" width="10" height="10" style="border:3px dashed red"></canvas>
+<body>
+<canvas id="scratch-stage" width="10" height="10"></canvas>
+<canvas id="debug-canvas" width="10" height="10"></canvas>
 <p>
    <label for="fudgeproperty">Property to tweak:</label>
    <select id="fudgeproperty">
@@ -18,6 +16,7 @@
        <option value="direction">Direction</option>
        <option value="scalex">Scale X</option>
        <option value="scaley">Scale Y</option>
+        <option value="scaleboth">Scale (both dimensions)</option>
        <option value="color">Color</option>
        <option value="fisheye">Fisheye</option>
        <option value="whirl">Whirl</option>
@@ -30,8 +29,12 @@
    <input type="range" id="fudge" style="width:50%" value="90" min="-90" max="270" step="any">
 </p>
 <p>
-    <label for="fudgeMin">Min:</label><input id="fudgeMin" type="number">
-    <label for="fudgeMax">Max:</label><input id="fudgeMax" type="number">
+    <label for="stage-scale">Stage scale:</label>
+    <input type="range" style="width:50%" id="stage-scale" value="1" min="1" max="2.5" step="any">
+</p>
+<p>
+    <label for="fudgeMin">Min:</label><input id="fudgeMin" type="number" value="0">
+    <label for="fudgeMax">Max:</label><input id="fudgeMax" type="number" value="200">
 </p>
 <script src="playground.js"></script>
 </body>
--- a/src/playground/playground.js
+++ b/src/playground/playground.js
@@ -1,26 +1,32 @@
 const ScratchRender = require('../RenderWebGL');
 const getMousePosition = require('./getMousePosition');

-var canvas = document.getElementById('scratch-stage');
-var fudge = 90;
-var renderer = new ScratchRender(canvas);
+const canvas = document.getElementById('scratch-stage');
+let fudge = 90;
+const renderer = new ScratchRender(canvas);
 renderer.setLayerGroupOrdering(['group1']);

-var drawableID = renderer.createDrawable('group1');
+const drawableID = renderer.createDrawable('group1');
 renderer.updateDrawableProperties(drawableID, {
    position: [0, 0],
    scale: [100, 100],
    direction: 90
 });

-var drawableID2 = renderer.createDrawable('group1');
-var wantBitmapSkin = false;
+const WantedSkinType = {
+    bitmap: 'bitmap',
+    vector: 'vector',
+    pen: 'pen'
+};
+
+const drawableID2 = renderer.createDrawable('group1');
+const wantedSkin = WantedSkinType.vector;

 // Bitmap (squirrel)
-var image = new Image();
+const image = new Image();
 image.addEventListener('load', () => {
-    var bitmapSkinId = renderer.createBitmapSkin(image);
-    if (wantBitmapSkin) {
+    const bitmapSkinId = renderer.createBitmapSkin(image);
+    if (wantedSkin === WantedSkinType.bitmap) {
        renderer.updateDrawableProperties(drawableID2, {
            skinId: bitmapSkinId
        });
@@ -30,44 +36,83 @@ image.crossOrigin = 'anonymous';
 image.src = 'https://cdn.assets.scratch.mit.edu/internalapi/asset/7e24c99c1b853e52f8e7f9004416fa34.png/get/';

 // SVG (cat 1-a)
-var xhr = new XMLHttpRequest();
+const xhr = new XMLHttpRequest();
 xhr.addEventListener('load', function () {
-    var skinId = renderer.createSVGSkin(xhr.responseText);
-    if (!wantBitmapSkin) {
+    const skinId = renderer.createSVGSkin(xhr.responseText);
+    if (wantedSkin === WantedSkinType.vector) {
        renderer.updateDrawableProperties(drawableID2, {
            skinId: skinId
        });
    }
 });
-xhr.open('GET', 'https://cdn.assets.scratch.mit.edu/internalapi/asset/f88bf1935daea28f8ca098462a31dbb0.svg/get/');
+xhr.open('GET', 'https://cdn.assets.scratch.mit.edu/internalapi/asset/b7853f557e4426412e64bb3da6531a99.svg/get/');
 xhr.send();

-var posX = 0;
-var posY = 0;
-var scaleX = 100;
-var scaleY = 100;
-var fudgeProperty = 'posx';
+if (wantedSkin === WantedSkinType.pen) {
+    const penSkinID = renderer.createPenSkin();

-const fudgePropertyInput = document.getElementById('fudgeproperty');
-fudgePropertyInput.addEventListener('change', event => {
-    fudgeProperty = event.target.value;
-});
+    renderer.updateDrawableProperties(drawableID2, {
+        skinId: penSkinID
+    });
+
+    canvas.addEventListener('click', event => {
+        let rect = canvas.getBoundingClientRect();
+
+        let x = event.clientX - rect.left;
+        let y = event.clientY - rect.top;
+
+        renderer.penLine(penSkinID, {
+            color4f: [Math.random(), Math.random(), Math.random(), 1],
+            diameter: 8
+        },
+        x - 240, 180 - y, (Math.random() * 480) - 240, (Math.random() * 360) - 180);
+    });
+}
+
+let posX = 0;
+let posY = 0;
+let scaleX = 100;
+let scaleY = 100;
+let fudgeProperty = 'posx';

 const fudgeInput = document.getElementById('fudge');
-
+const fudgePropertyInput = document.getElementById('fudgeproperty');
 const fudgeMinInput = document.getElementById('fudgeMin');
-fudgeMinInput.addEventListener('change', event => {
-    fudgeInput.min = event.target.valueAsNumber;
-});
-
 const fudgeMaxInput = document.getElementById('fudgeMax');
-fudgeMaxInput.addEventListener('change', event => {
+
+/* eslint require-jsdoc: 0 */
+const updateFudgeProperty = event => {
+    fudgeProperty = event.target.value;
+};
+
+const updateFudgeMin = event => {
+    fudgeInput.min = event.target.valueAsNumber;
+};
+
+const updateFudgeMax = event => {
    fudgeInput.max = event.target.valueAsNumber;
-});
+};
+
+fudgePropertyInput.addEventListener('change', updateFudgeProperty);
+fudgePropertyInput.addEventListener('init', updateFudgeProperty);
+
+fudgeMinInput.addEventListener('change', updateFudgeMin);
+fudgeMinInput.addEventListener('init', updateFudgeMin);
+
+fudgeMaxInput.addEventListener('change', updateFudgeMax);
+fudgeMaxInput.addEventListener('init', updateFudgeMax);
+
+// Ugly hack to properly set the values of the inputs on page load,
+// since they persist across reloads, at least in Firefox.
+// The best ugly hacks are the ones that reduce code duplication!
+fudgePropertyInput.dispatchEvent(new CustomEvent('init'));
+fudgeMinInput.dispatchEvent(new CustomEvent('init'));
+fudgeMaxInput.dispatchEvent(new CustomEvent('init'));
+fudgeInput.dispatchEvent(new CustomEvent('init'));

 const handleFudgeChanged = function (event) {
    fudge = event.target.valueAsNumber;
-    var props = {};
+    const props = {};
    switch (fudgeProperty) {
    case 'posx':
        props.position = [fudge, posY];
@@ -88,6 +133,11 @@ const handleFudgeChanged = function (event) {
        props.scale = [scaleX, fudge];
        scaleY = fudge;
        break;
+    case 'scaleboth':
+        props.scale = [fudge, fudge];
+        scaleX = fudge;
+        scaleY = fudge;
+        break;
    case 'color':
        props.color = fudge;
        break;
@@ -112,17 +162,28 @@ const handleFudgeChanged = function (event) {
    }
    renderer.updateDrawableProperties(drawableID2, props);
 };
+
 fudgeInput.addEventListener('input', handleFudgeChanged);
 fudgeInput.addEventListener('change', handleFudgeChanged);
+fudgeInput.addEventListener('init', handleFudgeChanged);
+
+const updateStageScale = event => {
+    renderer.resize(480 * event.target.valueAsNumber, 360 * event.target.valueAsNumber);
+};
+
+const stageScaleInput = document.getElementById('stage-scale');
+
+stageScaleInput.addEventListener('input', updateStageScale);
+stageScaleInput.addEventListener('change', updateStageScale);

 canvas.addEventListener('mousemove', event => {
-    var mousePos = getMousePosition(event, canvas);
+    const mousePos = getMousePosition(event, canvas);
    renderer.extractColor(mousePos.x, mousePos.y, 30);
 });

 canvas.addEventListener('click', event => {
-    var mousePos = getMousePosition(event, canvas);
-    var pickID = renderer.pick(mousePos.x, mousePos.y);
+    const mousePos = getMousePosition(event, canvas);
+    const pickID = renderer.pick(mousePos.x, mousePos.y);
    console.log('You clicked on ' + (pickID < 0 ? 'nothing' : 'ID# ' + pickID));
    if (pickID >= 0) {
        console.dir(renderer.extractDrawable(pickID, mousePos.x, mousePos.y));
@@ -137,5 +198,5 @@ const drawStep = function () {
 };
 drawStep();

-var debugCanvas = /** @type {canvas} */ document.getElementById('debug-canvas');
+const debugCanvas = /** @type {canvas} */ document.getElementById('debug-canvas');
 renderer.setDebugCanvas(debugCanvas);
--- a/src/playground/queryPlayground.html
+++ b/src/playground/queryPlayground.html
@@ -3,6 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <title>Scratch WebGL Query Playground</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        input[type=range][orient=vertical] {
            writing-mode: bt-lr; /* IE */
@@ -11,8 +12,6 @@
            padding: 0 0.5rem;
        }
        canvas {
-            border: 3px dashed black;
-
            /* https://stackoverflow.com/a/7665647 */
            image-rendering: optimizeSpeed; /* Older versions of FF */
            image-rendering: -moz-crisp-edges; /* FF 6.0+ */
@@ -23,7 +22,7 @@
        }
    </style>
 </head>
-<body style="background: lightsteelblue">
+<body>
    <div>
        <fieldset>
            <legend>Query Canvases</legend>
@@ -63,7 +62,7 @@
                        <input id="cursorY" type="range" orient="vertical" step="0.25" value="0" />
                    </td>
                    <td>
-                        <canvas id="renderCanvas" width="480" height="360" style="border:3px dashed black"></canvas>
+                        <canvas id="renderCanvas" width="480" height="360"></canvas>
                    </td>
                </tr>
            </table>
--- a/src/playground/style.css
+++ b/src/playground/style.css
@@ -0,0 +1,11 @@
+body {
+	background: lightsteelblue;
+}
+
+canvas {
+	border: 3px dashed black;
+}
+
+#debug-canvas {
+	border-color: red;
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -51,7 +51,7 @@ module.exports = [
            new CopyWebpackPlugin([
                {
                    context: 'src/playground',
-                    from: '*.html'
+                    from: '*.+(html|css)'
                }
            ])
        ])
Author	SHA1	Message	Date
greenkeeper[bot]	dee791c50f	chore(package): update webpack-cli to version 3.3.4	2019-06-11 09:13:13 +00:00
Karishma Chadha	27c70a7542	Merge pull request #463 from LLK/greenkeeper/scratch-svg-renderer-0.2.0-prerelease.20190523193400 Update scratch-svg-renderer to the latest version 🚀	2019-06-05 11:02:10 -04:00
Benjamin Wheeler	a79df7af59	Merge pull request #466 from LLK/revert-423-more-circular-pen-dots Revert "Tweak scalingVector to make dots appear to be more circular"	2019-05-30 11:58:22 -04:00
Benjamin Wheeler	ed6c707cba	Revert "Tweak scalingVector to make dots appear to be more circular"	2019-05-30 11:50:54 -04:00
Chris Willis-Ford	6bdaebcb3b	Merge pull request #426 from adroitwhiz/playground-improvements Playground improvements	2019-05-28 16:10:36 -07:00
Chris Willis-Ford	8b54df18af	Merge pull request #423 from ktbee/more-circular-pen-dots Tweak scalingVector to make dots appear to be more circular	2019-05-28 15:39:34 -07:00
greenkeeper[bot]	c3d07db39a	fix(package): update scratch-svg-renderer to version 0.2.0-prerelease.20190523193400	2019-05-23 19:37:48 +00:00
adroitwhiz	ab14e224d6	add default fudge min/max values	2019-05-22 05:02:44 -04:00
adroitwhiz	1a5bd39f77	replace janky boolean logic	2019-05-22 05:01:16 -04:00
adroitwhiz	e478ad4590	es6ify playground.js	2019-05-22 04:58:06 -04:00
Katie Broida	9fc82a8fc3	Tweak scalingVector to make dots appear to be more circular instead of oval	2019-05-13 13:27:08 -04:00
adroitwhiz	e8d30d7629	Merge branch 'develop' of https://github.com/LLK/scratch-render into playground-improvements	2019-05-05 16:52:05 -04:00
adroitwhiz	b92354b1bf	Merge branch 'develop' of https://github.com/LLK/scratch-render into playground-improvements	2019-04-23 13:21:41 -04:00
adroitwhiz	6c8b5bc2a9	Fix webpack glob	2019-04-23 13:21:40 -04:00
adroitwhiz	95a3c0dc6f	Appease ESLint	2019-04-19 13:50:52 -04:00
adroitwhiz	05928eb400	Add very basic pen testing to playground	2019-04-19 13:44:47 -04:00
adroitwhiz	924050baaf	Merge branch 'develop' of https://github.com/LLK/scratch-render into playground-improvements	2019-03-29 10:19:41 -04:00
adroitwhiz	0b9ee47fa1	Add "Scale (both)" option and fix quotes	2019-03-29 10:19:37 -04:00
adroitwhiz	3e710e66ec	Move playground style rules into stylesheet	2019-03-24 03:03:51 -04:00
adroitwhiz	2f14126d0b	Add stage scale slider to playground	2019-03-24 02:50:11 -04:00
adroitwhiz	4e9223adc6	More fixes for loading in playground	2019-03-24 02:43:15 -04:00
adroitwhiz	5419d3d2c3	Use updated Scratch cat SVG in playground	2019-03-24 02:42:13 -04:00
adroitwhiz	d4df59b23b	Fix playground not re-reading inputs after page reload	2019-03-24 02:38:05 -04:00