Stub queryPlayground.html

src/playground/queryPlayground.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Scratch WebGL Query Playground</title>
+    <style>
+        input[type=range][orient=vertical] {
+            writing-mode: bt-lr; /* IE */
+            -webkit-appearance: slider-vertical;
+            width: 1rem;
+            padding: 0 0.5rem;
+        }
+    </style>
+</head>
+<body style="background: lightsteelblue">
+    <div>
+        <fieldset>
+            <legend>Query Canvas</legend>
+            <div>Touching white? <span id="touchingWhite">maybe</span></div>
+            <div>Touching black? <span id="touchingBlack">maybe</span></div>
+            <canvas id="queryCanvas" width="480" height="360" style="border:3px dashed black"></canvas>
+        </fieldset>
+        <fieldset>
+            <legend>Render Canvas</legend>
+            <div>Cursor Position: <span id="cursorPosition">somewhere</span></div>
+            <table>
+                <tr>
+                    <td></td>
+                    <td>
+                        <input id="cursorX" type="range" step="0.25" value="0" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <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>
+                    </td>
+                </tr>
+            </table>
+        </fieldset>
+    </div>
+</body>
+<script src="queryPlayground.js"></script>
+</html>

src/playground/queryPlayground.js

@@ -0,0 +1,50 @@
+const getMousePosition = require('./getMousePosition');
+
+const renderCanvas = document.getElementById('renderCanvas');
+const inputCursorX = document.getElementById('cursorX');
+const inputCursorY = document.getElementById('cursorY');
+const labelCursorPosition = document.getElementById('cursorPosition');
+
+const handleResizeRenderCanvas = () => {
+    const halfWidth = renderCanvas.clientWidth / 2;
+    const halfHeight = renderCanvas.clientHeight / 2;
+
+    inputCursorX.style.width = `${renderCanvas.clientWidth}px`;
+    inputCursorY.style.height = `${renderCanvas.clientHeight}px`;
+    inputCursorX.min = -halfWidth;
+    inputCursorX.max = halfWidth;
+    inputCursorY.min = -halfHeight;
+    inputCursorY.max = halfHeight;
+};
+renderCanvas.addEventListener('resize', handleResizeRenderCanvas);
+handleResizeRenderCanvas();
+
+const handleCursorPositionChanged = () => {
+    const cursorX = inputCursorX.valueAsNumber;
+    const cursorY = inputCursorY.valueAsNumber;
+    const positionHTML = `${cursorX}, ${cursorY}`;
+    labelCursorPosition.innerHTML = positionHTML;
+};
+inputCursorX.addEventListener('change', handleCursorPositionChanged);
+inputCursorY.addEventListener('change', handleCursorPositionChanged);
+inputCursorX.addEventListener('input', handleCursorPositionChanged);
+inputCursorY.addEventListener('input', handleCursorPositionChanged);
+handleCursorPositionChanged();
+
+let trackingMouse = true;
+renderCanvas.addEventListener('click', event => {
+    trackingMouse = !trackingMouse;
+    if (trackingMouse) {
+        handleMouseMove(event);
+    }
+});
+
+const handleMouseMove = event => {
+    if (trackingMouse) {
+        const mousePosition = getMousePosition(event, renderCanvas);
+        inputCursorX.value = mousePosition.x - (renderCanvas.clientWidth / 2);
+        inputCursorY.value = (renderCanvas.clientHeight / 2) - mousePosition.y;
+        handleCursorPositionChanged();
+    }
+};
+renderCanvas.addEventListener('mousemove', handleMouseMove);

webpack.config.js

@@ -39,7 +39,8 @@ module.exports = [
     Object.assign({}, base, {
         target: 'web',
         entry: {
-            playground: './src/playground/playground.js'
+            playground: './src/playground/playground.js',
+            queryPlayground: './src/playground/queryPlayground.js'
         },
         output: {
             libraryTarget: 'umd',