@scratch/scratch-vm 11.0.0-beta.1

package/src/io/keyboard.js

@@ -0,0 +1,146 @@
+const Cast = require('../util/cast');
+
+/**
+ * Names used internally for keys used in scratch, also known as "scratch keys".
+ * @enum {string}
+ */
+const KEY_NAME = {
+    SPACE: 'space',
+    LEFT: 'left arrow',
+    UP: 'up arrow',
+    RIGHT: 'right arrow',
+    DOWN: 'down arrow',
+    ENTER: 'enter'
+};
+
+/**
+ * An array of the names of scratch keys.
+ * @type {Array<string>}
+ */
+const KEY_NAME_LIST = Object.keys(KEY_NAME).map(name => KEY_NAME[name]);
+
+class Keyboard {
+    constructor (runtime) {
+        /**
+         * List of currently pressed scratch keys.
+         * A scratch key is:
+         * A key you can press on a keyboard, excluding modifier keys.
+         * An uppercase string of length one;
+         *     except for special key names for arrow keys and space (e.g. 'left arrow').
+         * Can be a non-english unicode letter like: æ ø ש נ 手 廿.
+         * @type{Array.<string>}
+         */
+        this._keysPressed = [];
+        /**
+         * Reference to the owning Runtime.
+         * Can be used, for example, to activate hats.
+         * @type{!Runtime}
+         */
+        this.runtime = runtime;
+    }
+
+    /**
+     * Convert from a keyboard event key name to a Scratch key name.
+     * @param  {string} keyString the input key string.
+     * @return {string} the corresponding Scratch key, or an empty string.
+     */
+    _keyStringToScratchKey (keyString) {
+        keyString = Cast.toString(keyString);
+        // Convert space and arrow keys to their Scratch key names.
+        switch (keyString) {
+        case ' ': return KEY_NAME.SPACE;
+        case 'ArrowLeft':
+        case 'Left': return KEY_NAME.LEFT;
+        case 'ArrowUp':
+        case 'Up': return KEY_NAME.UP;
+        case 'Right':
+        case 'ArrowRight': return KEY_NAME.RIGHT;
+        case 'Down':
+        case 'ArrowDown': return KEY_NAME.DOWN;
+        case 'Enter': return KEY_NAME.ENTER;
+        }
+        // Ignore modifier keys
+        if (keyString.length > 1) {
+            return '';
+        }
+        return keyString.toUpperCase();
+    }
+
+    /**
+     * Convert from a block argument to a Scratch key name.
+     * @param  {string} keyArg the input arg.
+     * @return {string} the corresponding Scratch key.
+     */
+    _keyArgToScratchKey (keyArg) {
+        // If a number was dropped in, try to convert from ASCII to Scratch key.
+        if (typeof keyArg === 'number') {
+            // Check for the ASCII range containing numbers, some punctuation,
+            // and uppercase letters.
+            if (keyArg >= 48 && keyArg <= 90) {
+                return String.fromCharCode(keyArg);
+            }
+            switch (keyArg) {
+            case 32: return KEY_NAME.SPACE;
+            case 37: return KEY_NAME.LEFT;
+            case 38: return KEY_NAME.UP;
+            case 39: return KEY_NAME.RIGHT;
+            case 40: return KEY_NAME.DOWN;
+            }
+        }
+
+        keyArg = Cast.toString(keyArg);
+
+        // If the arg matches a special key name, return it.
+        if (KEY_NAME_LIST.includes(keyArg)) {
+            return keyArg;
+        }
+
+        // Use only the first character.
+        if (keyArg.length > 1) {
+            keyArg = keyArg[0];
+        }
+
+        // Check for the space character.
+        if (keyArg === ' ') {
+            return KEY_NAME.SPACE;
+        }
+
+        return keyArg.toUpperCase();
+    }
+
+    /**
+     * Keyboard DOM event handler.
+     * @param  {object} data Data from DOM event.
+     */
+    postData (data) {
+        if (!data.key) return;
+        const scratchKey = this._keyStringToScratchKey(data.key);
+        if (scratchKey === '') return;
+        const index = this._keysPressed.indexOf(scratchKey);
+        if (data.isDown) {
+            this.runtime.emit('KEY_PRESSED', scratchKey);
+            // If not already present, add to the list.
+            if (index < 0) {
+                this._keysPressed.push(scratchKey);
+            }
+        } else if (index > -1) {
+            // If already present, remove from the list.
+            this._keysPressed.splice(index, 1);
+        }
+    }
+
+    /**
+     * Get key down state for a specified key.
+     * @param  {Any} keyArg key argument.
+     * @return {boolean} Is the specified key down?
+     */
+    getKeyIsDown (keyArg) {
+        if (keyArg === 'any') {
+            return this._keysPressed.length > 0;
+        }
+        const scratchKey = this._keyArgToScratchKey(keyArg);
+        return this._keysPressed.indexOf(scratchKey) > -1;
+    }
+}
+
+module.exports = Keyboard;

package/src/io/mouse.js

@@ -0,0 +1,145 @@
+const MathUtil = require('../util/math-util');
+
+class Mouse {
+    constructor (runtime) {
+        this._x = 0;
+        this._y = 0;
+        this._isDown = false;
+        /**
+         * Reference to the owning Runtime.
+         * Can be used, for example, to activate hats.
+         * @type{!Runtime}
+         */
+        this.runtime = runtime;
+    }
+
+    /**
+     * Activate "event_whenthisspriteclicked" hats.
+     * @param  {Target} target to trigger hats on.
+     * @private
+     */
+    _activateClickHats (target) {
+        // Activate both "this sprite clicked" and "stage clicked"
+        // They were separated into two opcodes for labeling,
+        // but should act the same way.
+        // Intentionally not checking isStage to make it work when sharing blocks.
+        // @todo the blocks should be converted from one to another when shared
+        this.runtime.startHats('event_whenthisspriteclicked',
+            null, target);
+        this.runtime.startHats('event_whenstageclicked',
+            null, target);
+    }
+
+    /**
+     * Find a target by XY location
+     * @param  {number} x X position to be sent to the renderer.
+     * @param  {number} y Y position to be sent to the renderer.
+     * @return {Target} the target at that location
+     * @private
+     */
+    _pickTarget (x, y) {
+        if (this.runtime.renderer) {
+            const drawableID = this.runtime.renderer.pick(x, y);
+            for (let i = 0; i < this.runtime.targets.length; i++) {
+                const target = this.runtime.targets[i];
+                if (Object.prototype.hasOwnProperty.call(target, 'drawableID') &&
+                    target.drawableID === drawableID) {
+                    return target;
+                }
+            }
+        }
+        // Return the stage if no target was found
+        return this.runtime.getTargetForStage();
+    }
+
+    /**
+     * Mouse DOM event handler.
+     * @param  {object} data Data from DOM event.
+     */
+    postData (data) {
+        if (data.x) {
+            this._clientX = data.x;
+            this._scratchX = Math.round(MathUtil.clamp(
+                480 * ((data.x / data.canvasWidth) - 0.5),
+                -240,
+                240
+            ));
+        }
+        if (data.y) {
+            this._clientY = data.y;
+            this._scratchY = Math.round(MathUtil.clamp(
+                -360 * ((data.y / data.canvasHeight) - 0.5),
+                -180,
+                180
+            ));
+        }
+        if (typeof data.isDown !== 'undefined') {
+            const previousDownState = this._isDown;
+            this._isDown = data.isDown;
+
+            // Do not trigger if down state has not changed
+            if (previousDownState === this._isDown) return;
+
+            // Never trigger click hats at the end of a drag
+            if (data.wasDragged) return;
+
+            // Do not activate click hats for clicks outside canvas bounds
+            if (!(data.x > 0 && data.x < data.canvasWidth &&
+                data.y > 0 && data.y < data.canvasHeight)) return;
+
+            const target = this._pickTarget(data.x, data.y);
+            const isNewMouseDown = !previousDownState && this._isDown;
+            const isNewMouseUp = previousDownState && !this._isDown;
+
+            // Draggable targets start click hats on mouse up.
+            // Non-draggable targets start click hats on mouse down.
+            if (target.draggable && isNewMouseUp) {
+                this._activateClickHats(target);
+            } else if (!target.draggable && isNewMouseDown) {
+                this._activateClickHats(target);
+            }
+        }
+    }
+
+    /**
+     * Get the X position of the mouse in client coordinates.
+     * @return {number} Non-clamped X position of the mouse cursor.
+     */
+    getClientX () {
+        return this._clientX;
+    }
+
+    /**
+     * Get the Y position of the mouse in client coordinates.
+     * @return {number} Non-clamped Y position of the mouse cursor.
+     */
+    getClientY () {
+        return this._clientY;
+    }
+
+    /**
+     * Get the X position of the mouse in scratch coordinates.
+     * @return {number} Clamped and integer rounded X position of the mouse cursor.
+     */
+    getScratchX () {
+        return this._scratchX;
+    }
+
+    /**
+     * Get the Y position of the mouse in scratch coordinates.
+     * @return {number} Clamped and integer rounded Y position of the mouse cursor.
+     */
+    getScratchY () {
+        return this._scratchY;
+    }
+
+    /**
+     * Get the down state of the mouse.
+     * @return {boolean} Is the mouse down?
+     */
+    getIsDown () {
+        return this._isDown;
+    }
+}
+
+module.exports = Mouse;

package/src/io/mouseWheel.js

@@ -0,0 +1,28 @@
+class MouseWheel {
+    constructor (runtime) {
+        /**
+         * Reference to the owning Runtime.
+         * @type{!Runtime}
+         */
+        this.runtime = runtime;
+    }
+
+    /**
+     * Mouse wheel DOM event handler.
+     * @param  {object} data Data from DOM event.
+     */
+    postData (data) {
+        const matchFields = {};
+        if (data.deltaY < 0) {
+            matchFields.KEY_OPTION = 'up arrow';
+        } else if (data.deltaY > 0) {
+            matchFields.KEY_OPTION = 'down arrow';
+        } else {
+            return;
+        }
+
+        this.runtime.startHats('event_whenkeypressed', matchFields);
+    }
+}
+
+module.exports = MouseWheel;

package/src/io/userData.js

@@ -0,0 +1,24 @@
+class UserData {
+    constructor () {
+        this._username = '';
+    }
+
+    /**
+     * Handler for updating the username
+     * @param {object} data Data posted to this ioDevice.
+     * @property {!string} username The new username.
+     */
+    postData (data) {
+        this._username = data.username;
+    }
+
+    /**
+     * Getter for username. Initially empty string, until set via postData.
+     * @returns {!string} The current username
+     */
+    getUsername () {
+        return this._username;
+    }
+}
+
+module.exports = UserData;

package/src/io/video.js

@@ -0,0 +1,210 @@
+const StageLayering = require('../engine/stage-layering');
+
+class Video {
+    constructor (runtime) {
+        this.runtime = runtime;
+
+        /**
+         * @typedef VideoProvider
+         * @property {Function} enableVideo - Requests camera access from the user, and upon success,
+         * enables the video feed
+         * @property {Function} disableVideo - Turns off the video feed
+         * @property {Function} getFrame - Return frame data from the video feed in
+         * specified dimensions, format, and mirroring.
+         */
+        this.provider = null;
+
+        /**
+         * Id representing a Scratch Renderer skin the video is rendered to for
+         * previewing.
+         * @type {number}
+         */
+        this._skinId = -1;
+
+        /**
+         * Id for a drawable using the video's skin that will render as a video
+         * preview.
+         * @type {Drawable}
+         */
+        this._drawable = -1;
+
+        /**
+         * Store the last state of the video transparency ghost effect
+         * @type {number}
+         */
+        this._ghost = 0;
+
+        /**
+         * Store a flag that allows the preview to be forced transparent.
+         * @type {number}
+         */
+        this._forceTransparentPreview = false;
+    }
+
+    static get FORMAT_IMAGE_DATA () {
+        return 'image-data';
+    }
+
+    static get FORMAT_CANVAS () {
+        return 'canvas';
+    }
+
+    /**
+     * Dimensions the video stream is analyzed at after its rendered to the
+     * sample canvas.
+     * @type {Array.<number>}
+     */
+    static get DIMENSIONS () {
+        return [480, 360];
+    }
+
+    /**
+     * Order preview drawable is inserted at in the renderer.
+     * @type {number}
+     */
+    static get ORDER () {
+        return 1;
+    }
+
+    /**
+     * Set a video provider for this device. A default implementation of
+     * a video provider can be found in scratch-gui/src/lib/video/video-provider
+     * @param {VideoProvider} provider - Video provider to use
+     */
+    setProvider (provider) {
+        this.provider = provider;
+    }
+
+    /**
+     * Request video be enabled.  Sets up video, creates video skin and enables preview.
+     *
+     * ioDevices.video.requestVideo()
+     *
+     * @return {Promise.<Video>} resolves a promise to this IO device when video is ready.
+     */
+    enableVideo () {
+        if (!this.provider) return null;
+        return this.provider.enableVideo().then(() => this._setupPreview());
+    }
+
+    /**
+     * Disable video stream (turn video off)
+     * @return {void}
+     */
+    disableVideo () {
+        this._disablePreview();
+        if (!this.provider) return null;
+        this.provider.disableVideo();
+    }
+
+    /**
+     * Return frame data from the video feed in a specified dimensions, format, and mirroring.
+     *
+     * @param {object} frameInfo A descriptor of the frame you would like to receive.
+     * @param {Array.<number>} frameInfo.dimensions [width, height] array of numbers.  Defaults to [480,360]
+     * @param {boolean} frameInfo.mirror If you specificly want a mirror/non-mirror frame, defaults to the global
+     *                                   mirror state (ioDevices.video.mirror)
+     * @param {string} frameInfo.format Requested video format, available formats are 'image-data' and 'canvas'.
+     * @param {number} frameInfo.cacheTimeout Will reuse previous image data if the time since capture is less than
+     *                                        the cacheTimeout.  Defaults to 16ms.
+     *
+     * @return {ArrayBuffer|Canvas|string|null} Frame data in requested format, null when errors.
+     */
+    getFrame ({
+        dimensions = Video.DIMENSIONS,
+        mirror = this.mirror,
+        format = Video.FORMAT_IMAGE_DATA,
+        cacheTimeout = this._frameCacheTimeout
+    }) {
+        if (this.provider) return this.provider.getFrame({dimensions, mirror, format, cacheTimeout});
+        return null;
+    }
+
+    /**
+     * Set the preview ghost effect
+     * @param {number} ghost from 0 (visible) to 100 (invisible) - ghost effect
+     */
+    setPreviewGhost (ghost) {
+        this._ghost = ghost;
+        // Confirm that the default value has been changed to a valid id for the drawable
+        if (this._drawable !== -1) {
+            this.runtime.renderer.updateDrawableEffect(
+                this._drawable,
+                'ghost',
+                this._forceTransparentPreview ? 100 : ghost
+            );
+        }
+    }
+
+    _disablePreview () {
+        if (this._skinId !== -1) {
+            this.runtime.renderer.updateBitmapSkin(this._skinId, new ImageData(...Video.DIMENSIONS), 1);
+            this.runtime.renderer.updateDrawableVisible(this._drawable, false);
+        }
+        this._renderPreviewFrame = null;
+    }
+
+    _setupPreview () {
+        const {renderer} = this.runtime;
+        if (!renderer) return;
+
+        if (this._skinId === -1 && this._drawable === -1) {
+            this._skinId = renderer.createBitmapSkin(new ImageData(...Video.DIMENSIONS), 1);
+            this._drawable = renderer.createDrawable(StageLayering.VIDEO_LAYER);
+            renderer.updateDrawableSkinId(this._drawable, this._skinId);
+        }
+
+        // if we haven't already created and started a preview frame render loop, do so
+        if (!this._renderPreviewFrame) {
+            renderer.updateDrawableEffect(this._drawable, 'ghost', this._forceTransparentPreview ? 100 : this._ghost);
+            renderer.updateDrawableVisible(this._drawable, true);
+
+            this._renderPreviewFrame = () => {
+                clearTimeout(this._renderPreviewTimeout);
+                if (!this._renderPreviewFrame) {
+                    return;
+                }
+
+                this._renderPreviewTimeout = setTimeout(this._renderPreviewFrame, this.runtime.currentStepTime);
+
+                const imageData = this.getFrame({
+                    format: Video.FORMAT_IMAGE_DATA,
+                    cacheTimeout: this.runtime.currentStepTime
+                });
+
+                if (!imageData) {
+                    renderer.updateBitmapSkin(this._skinId, new ImageData(...Video.DIMENSIONS), 1);
+                    return;
+                }
+
+                renderer.updateBitmapSkin(this._skinId, imageData, 1);
+                this.runtime.requestRedraw();
+            };
+
+            this._renderPreviewFrame();
+        }
+    }
+
+    get videoReady () {
+        if (this.provider) return this.provider.videoReady;
+        return false;
+    }
+
+    /**
+     * Method implemented by all IO devices to allow external changes.
+     * The only change available externally is hiding the preview, used e.g. to
+     * prevent drawing the preview into project thumbnails.
+     * @param {object} - data passed to this IO device.
+     * @property {boolean} forceTransparentPreview - whether the preview should be forced transparent.
+     */
+    postData ({forceTransparentPreview}) {
+        this._forceTransparentPreview = forceTransparentPreview;
+        // Setting the ghost to the current value will pick up the forceTransparentPreview
+        // flag and override the current ghost. The complexity is to prevent blocks
+        // from overriding forceTransparentPreview
+        this.setPreviewGhost(this._ghost);
+    }
+}
+
+
+module.exports = Video;

package/src/playground/benchmark.css

@@ -0,0 +1,83 @@
+body {
+    font-family: monospace;
+}
+p {
+    max-width: 400px;
+}
+@media (min-width: 960px) {
+    .profile-tables {
+        top: 0px;
+        position: absolute;
+        left: 450px;
+    }
+}
+.share {
+    display: none;
+}
+.share label {
+    cursor: pointer;
+}
+.share[href] {
+    display: inline;
+}
+
+.render .profile-tables {
+    position: static;
+    left: 0;
+}
+.render .description {
+    display: none;
+}
+.render .run-push {
+    display: none;
+}
+#scratch-stage {
+    border: 5px solid black;
+    display: block;
+    width: 400px;
+    height: 300px;
+}
+.render #scratch-stage {
+    display: none;
+}
+.loading label, .profile-count label{
+    width: 15em;
+    display: inline-block;
+}
+.render .loading {
+    display: none;
+}
+.profile-tables table {
+    margin: 30px 0 30px 0px;
+}
+.profile-tables th {
+    border-bottom: 1px solid #333;
+    text-align: center;
+}
+.profile-tables th:first-child {
+    width: 215px;
+}
+.profile-tables th, .profile-tables td {
+    min-width: 85px;
+    border-bottom: 1px solid #ccc;
+    border-spacing: 0;
+    border-collapse: collapse;
+    padding: 5px;
+}
+.profile-tables td:not(:first-child) {
+    text-align: center;
+}
+.profile-tables img{
+    margin: 0 auto;
+    display: block;
+    clear: both;
+    width: 20%;
+}
+
+.slow {
+    background-color: #ffa1a1;
+}
+.profiler-count-running {
+    height: 4em;
+    background-color: #dddddd;
+}