@scratch/scratch-gui-standalone 11.6.0-face-sensing

package/src/lib/default-project/messages.js

@@ -0,0 +1,16 @@
+import {defineMessages} from 'react-intl';
+
+const messages = defineMessages({
+    meow: {
+        defaultMessage: 'Meow',
+        description: 'Name for the meow sound',
+        id: 'gui.defaultProject.meow'
+    },
+    variable: {
+        defaultMessage: 'my variable',
+        description: 'Name for the default variable',
+        id: 'gui.defaultProject.variable'
+    }
+});
+
+export default messages;

package/src/lib/default-project/project-data.ts

@@ -0,0 +1,113 @@
+import projectDataMessages from './messages';
+import sharedMessages from '../shared-messages';
+import {MessageObject, TranslatorFunction} from '../../gui-config';
+
+const messages = {...projectDataMessages, ...sharedMessages};
+
+// use the default message if a translation function is not passed
+const defaultTranslator = (msgObj: MessageObject) => msgObj.defaultMessage;
+
+/**
+ * Generate a localized version of the default project
+ * @param {function} translateFunction a function to use for translating the default names
+ * @return {object} the project data json for the default project
+ */
+const projectData = (translateFunction?: TranslatorFunction): object => {
+    const translator = translateFunction || defaultTranslator;
+    return ({
+        targets: [
+            {
+                isStage: true,
+                name: 'Stage',
+                variables: {
+                    '`jEk@4|i[#Fk?(8x)AV.-my variable': [
+                        translator(messages.variable),
+                        0
+                    ]
+                },
+                lists: {},
+                broadcasts: {},
+                blocks: {},
+                currentCostume: 0,
+                costumes: [
+                    {
+                        assetId: 'cd21514d0531fdffb22204e0ec5ed84a',
+                        name: translator(messages.backdrop, {index: 1}),
+                        md5ext: 'cd21514d0531fdffb22204e0ec5ed84a.svg',
+                        dataFormat: 'svg',
+                        rotationCenterX: 240,
+                        rotationCenterY: 180
+                    }
+                ],
+                sounds: [
+                    {
+                        assetId: '83a9787d4cb6f3b7632b4ddfebf74367',
+                        name: translator(messages.pop),
+                        dataFormat: 'wav',
+                        format: '',
+                        rate: 11025,
+                        sampleCount: 258,
+                        md5ext: '83a9787d4cb6f3b7632b4ddfebf74367.wav'
+                    }
+                ],
+                volume: 100
+            },
+            {
+                isStage: false,
+                name: translator(messages.sprite, {index: 1}),
+                variables: {},
+                lists: {},
+                broadcasts: {},
+                blocks: {},
+                currentCostume: 0,
+                costumes: [
+                    {
+                        assetId: 'bcf454acf82e4504149f7ffe07081dbc',
+                        name: translator(messages.costume, {index: 1}),
+                        bitmapResolution: 1,
+                        md5ext: 'bcf454acf82e4504149f7ffe07081dbc.svg',
+                        dataFormat: 'svg',
+                        rotationCenterX: 48,
+                        rotationCenterY: 50
+                    },
+                    {
+                        assetId: '0fb9be3e8397c983338cb71dc84d0b25',
+                        name: translator(messages.costume, {index: 2}),
+                        bitmapResolution: 1,
+                        md5ext: '0fb9be3e8397c983338cb71dc84d0b25.svg',
+                        dataFormat: 'svg',
+                        rotationCenterX: 46,
+                        rotationCenterY: 53
+                    }
+                ],
+                sounds: [
+                    {
+                        assetId: '83c36d806dc92327b9e7049a565c6bff',
+                        name: translator(messages.meow),
+                        dataFormat: 'wav',
+                        format: '',
+                        rate: 22050,
+                        sampleCount: 18688,
+                        md5ext: '83c36d806dc92327b9e7049a565c6bff.wav'
+                    }
+                ],
+                volume: 100,
+                visible: true,
+                x: 0,
+                y: 0,
+                size: 100,
+                direction: 90,
+                draggable: false,
+                rotationStyle: 'all around'
+            }
+        ],
+        meta: {
+            semver: '3.0.0',
+            vm: '0.1.0',
+            agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36' // eslint-disable-line max-len
+        }
+    });
+};
+
+
+export default projectData;

package/src/lib/define-dynamic-block.js

@@ -0,0 +1,107 @@
+// TODO: access `BlockType` and `ArgumentType` without reaching into VM
+// Should we move these into a new extension support module or something?
+import {ArgumentType, BlockType} from '@scratch/scratch-vm';
+
+/**
+ * Define a block using extension info which has the ability to dynamically determine (and update) its layout.
+ * This functionality is used for extension blocks which can change its properties based on different state
+ * information. For example, the `control_stop` block changes its shape based on which menu item is selected
+ * and a variable block changes its text to reflect the variable name without using an editable field.
+ * @param {object} ScratchBlocks - The ScratchBlocks name space.
+ * @param {object} categoryInfo - Information about this block's extension category, including any menus and icons.
+ * @param {object} staticBlockInfo - The base block information before any dynamic changes.
+ * @param {string} extendedOpcode - The opcode for the block (including the extension ID).
+ */
+// TODO: grow this until it can fully replace `_convertForScratchBlocks` in the VM runtime
+const defineDynamicBlock = (ScratchBlocks, categoryInfo, staticBlockInfo, extendedOpcode) => ({
+    init: function () {
+        const blockJson = {
+            type: extendedOpcode,
+            inputsInline: true,
+            category: categoryInfo.name,
+            colour: categoryInfo.color1,
+            colourSecondary: categoryInfo.color2,
+            colourTertiary: categoryInfo.color3
+        };
+        // There is a scratch-blocks / Blockly extension called "scratch_extension" which adjusts the styling of
+        // blocks to allow for an icon, a feature of Scratch extension blocks. However, Scratch "core" extension
+        // blocks don't have icons and so they should not use 'scratch_extension'. Adding a scratch-blocks / Blockly
+        // extension after `jsonInit` isn't fully supported (?), so we decide now whether there will be an icon.
+        if (staticBlockInfo.blockIconURI || categoryInfo.blockIconURI) {
+            blockJson.extensions = ['scratch_extension'];
+        }
+        // initialize the basics of the block, to be overridden & extended later by `domToMutation`
+        this.jsonInit(blockJson);
+        // initialize the cached block info used to carry block info from `domToMutation` to `mutationToDom`
+        this.blockInfoText = '{}';
+        // we need a block info update (through `domToMutation`) before we have a completely initialized block
+        this.needsBlockInfoUpdate = true;
+    },
+    mutationToDom: function () {
+        const container = document.createElement('mutation');
+        container.setAttribute('blockInfo', this.blockInfoText);
+        return container;
+    },
+    domToMutation: function (xmlElement) {
+        const blockInfoText = xmlElement.getAttribute('blockInfo');
+        if (!blockInfoText) return;
+        if (!this.needsBlockInfoUpdate) {
+            throw new Error('Attempted to update block info twice');
+        }
+        delete this.needsBlockInfoUpdate;
+        this.blockInfoText = blockInfoText;
+        const blockInfo = JSON.parse(blockInfoText);
+
+        switch (blockInfo.blockType) {
+        case BlockType.COMMAND:
+        case BlockType.CONDITIONAL:
+        case BlockType.LOOP:
+            this.setOutputShape(ScratchBlocks.OUTPUT_SHAPE_SQUARE);
+            this.setPreviousStatement(true);
+            this.setNextStatement(!blockInfo.isTerminal);
+            break;
+        case BlockType.REPORTER:
+            this.setOutput(true);
+            this.setOutputShape(ScratchBlocks.OUTPUT_SHAPE_ROUND);
+            if (!blockInfo.disableMonitor) {
+                this.setCheckboxInFlyout(true);
+            }
+            break;
+        case BlockType.BOOLEAN:
+            this.setOutput(true);
+            this.setOutputShape(ScratchBlocks.OUTPUT_SHAPE_HEXAGONAL);
+            break;
+        case BlockType.HAT:
+        case BlockType.EVENT:
+            this.setOutputShape(ScratchBlocks.OUTPUT_SHAPE_SQUARE);
+            this.setNextStatement(true);
+            break;
+        }
+
+        if (blockInfo.color1 || blockInfo.color2 || blockInfo.color3) {
+            // `setColour` handles undefined parameters by adjusting defined colors
+            this.setColour(blockInfo.color1, blockInfo.color2, blockInfo.color3);
+        }
+
+        // Layout block arguments
+        // TODO handle E/C Blocks
+        const blockText = blockInfo.text;
+        const args = [];
+        let argCount = 0;
+        const scratchBlocksStyleText = blockText.replace(/\[(.+?)]/g, (match, argName) => {
+            const arg = blockInfo.arguments[argName];
+            switch (arg.type) {
+            case ArgumentType.STRING:
+                args.push({type: 'input_value', name: argName});
+                break;
+            case ArgumentType.BOOLEAN:
+                args.push({type: 'input_value', name: argName, check: 'Boolean'});
+                break;
+            }
+            return `%${++argCount}`;
+        });
+        this.interpolate_(scratchBlocksStyleText, args);
+    }
+});
+
+export default defineDynamicBlock;

package/src/lib/detect-locale.js

@@ -0,0 +1,45 @@
+/**
+ * @fileoverview
+ * Utility function to detect locale from the browser setting or paramenter on the URL.
+ */
+
+import queryString from 'query-string';
+
+/**
+ * look for language setting in the browser. Check against supported locales.
+ * If there's a parameter in the URL, override the browser setting
+ * @param {Array.string} supportedLocales An array of supported locale codes.
+ * @return {string} the preferred locale
+ */
+const detectLocale = supportedLocales => {
+    let locale = 'en'; // default
+    let browserLocale = window.navigator.userLanguage || window.navigator.language;
+    browserLocale = browserLocale.toLowerCase();
+    // try to set locale from browserLocale
+    if (supportedLocales.includes(browserLocale)) {
+        locale = browserLocale;
+    } else {
+        browserLocale = browserLocale.split('-')[0];
+        if (supportedLocales.includes(browserLocale)) {
+            locale = browserLocale;
+        }
+    }
+
+    const queryParams = queryString.parse(location.search);
+    // Flatten potential arrays and remove falsy values
+    const potentialLocales = [].concat(queryParams.locale, queryParams.lang).filter(l => l);
+    if (!potentialLocales.length) {
+        return locale;
+    }
+
+    const urlLocale = potentialLocales[0].toLowerCase();
+    if (supportedLocales.includes(urlLocale)) {
+        return urlLocale;
+    }
+
+    return locale;
+};
+
+export {
+    detectLocale
+};

package/src/lib/download-blob.js

@@ -0,0 +1,33 @@
+export default (filename, blob) => {
+    const downloadLink = document.createElement('a');
+    document.body.appendChild(downloadLink);
+
+    // Use special ms version if available to get it working on Edge.
+    if (navigator.msSaveOrOpenBlob) {
+        navigator.msSaveOrOpenBlob(blob, filename);
+        return;
+    }
+
+    if ('download' in HTMLAnchorElement.prototype) {
+        const url = window.URL.createObjectURL(blob);
+        downloadLink.href = url;
+        downloadLink.download = filename;
+        downloadLink.type = blob.type;
+        downloadLink.click();
+        // remove the link after a timeout to prevent a crash on iOS 13 Safari
+        window.setTimeout(() => {
+            document.body.removeChild(downloadLink);
+            window.URL.revokeObjectURL(url);
+        }, 1000);
+    } else {
+        // iOS 12 Safari, open a new page and set href to data-uri
+        let popup = window.open('', '_blank');
+        const reader = new FileReader();
+        reader.onloadend = function () {
+            popup.location.href = reader.result;
+            popup = null;
+        };
+        reader.readAsDataURL(blob);
+    }
+
+};

package/src/lib/drag-constants.js

@@ -0,0 +1,11 @@
+export default {
+    SOUND: 'SOUND',
+    COSTUME: 'COSTUME',
+    SPRITE: 'SPRITE',
+    CODE: 'CODE',
+
+    BACKPACK_SOUND: 'BACKPACK_SOUND',
+    BACKPACK_COSTUME: 'BACKPACK_COSTUME',
+    BACKPACK_SPRITE: 'BACKPACK_SPRITE',
+    BACKPACK_CODE: 'BACKPACK_CODE'
+};

package/src/lib/drag-recognizer.js

@@ -0,0 +1,127 @@
+import bindAll from 'lodash.bindall';
+import {getEventXY} from '../lib/touch-utils';
+
+class DragRecognizer {
+    /* Gesture states */
+    static get STATE_UNIDENTIFIED () {
+        return 'unidentified';
+    }
+    static get STATE_SCROLL () {
+        return 'scroll';
+    }
+    static get STATE_DRAG () {
+        return 'drag';
+    }
+
+    constructor ({
+        onDrag = (() => {}),
+        onDragEnd = (() => {}),
+        touchDragAngle = 70, // Angle and distance thresholds are the same as scratch-blocks
+        distanceThreshold = 3
+    }) {
+        this._onDrag = onDrag;
+        this._onDragEnd = onDragEnd;
+        this._touchDragAngle = touchDragAngle;
+        this._distanceThreshold = distanceThreshold;
+
+        this._initialOffset = null;
+        this._gestureState = DragRecognizer.STATE_UNIDENTIFIED;
+
+        bindAll(this, [
+            'start',
+            'gestureInProgress',
+            'reset',
+            '_handleMove',
+            '_handleEnd'
+        ]);
+    }
+
+    start (event) {
+        this._initialOffset = getEventXY(event);
+        this._bindListeners();
+    }
+
+    gestureInProgress () {
+        return this._gestureState !== DragRecognizer.STATE_UNIDENTIFIED;
+    }
+    
+    reset () {
+        this._unbindListeners();
+        this._initialOffset = null;
+        this._gestureState = DragRecognizer.STATE_UNIDENTIFIED;
+    }
+
+    //
+    // Internal functions
+    //
+
+    _bindListeners () {
+        window.addEventListener('mouseup', this._handleEnd);
+        window.addEventListener('mousemove', this._handleMove);
+        window.addEventListener('touchend', this._handleEnd);
+        // touchmove must be marked as non-passive, or else it cannot prevent scrolling
+        window.addEventListener('touchmove', this._handleMove, {passive: false});
+    }
+
+    _unbindListeners () {
+        window.removeEventListener('mouseup', this._handleEnd);
+        window.removeEventListener('mousemove', this._handleMove);
+        window.removeEventListener('touchend', this._handleEnd);
+        window.removeEventListener('touchmove', this._handleMove, {passive: false});
+    }
+
+    _handleMove (event) {
+        // For gestures identified as vertical scrolls, do not process movement events
+        if (this._isScroll()) return;
+
+        const currentOffset = getEventXY(event);
+
+        // Try to identify this gesture if it hasn't been identified already
+        if (!this.gestureInProgress()) {
+            const dx = currentOffset.x - this._initialOffset.x;
+            const dy = currentOffset.y - this._initialOffset.y;
+            const dragDistance = Math.sqrt((dx * dx) + (dy * dy));
+            if (dragDistance < this._distanceThreshold) return;
+
+            // For touch moves, additionally check if the angle suggests drag vs. scroll
+            if (event.type === 'touchmove') {
+                // Direction goes from -180 to 180, with 0 toward the right.
+                let angle = Math.atan2(dy, dx) / Math.PI * 180;
+                // Fold over horizontal axis, range now 0 to 180
+                angle = Math.abs(angle);
+                // Fold over vertical axis, range now 0 to 90
+                if (angle > 90) angle = 180 - angle;
+                if (angle > this._touchDragAngle) {
+                    this._gestureState = DragRecognizer.STATE_SCROLL;
+                } else {
+                    this._gestureState = DragRecognizer.STATE_DRAG;
+                }
+            } else {
+                // Mouse moves are always considered drags
+                this._gestureState = DragRecognizer.STATE_DRAG;
+            }
+        }
+
+        if (this._isDrag()) {
+            this._onDrag(currentOffset, this._initialOffset);
+            event.preventDefault();
+        }
+    }
+
+    _handleEnd () {
+        this.reset();
+        // Call the callback after reset to make sure if gestureInProgress()
+        // is used in response, it get the correct value (i.e. no gesture in progress)
+        this._onDragEnd();
+    }
+
+    _isDrag () {
+        return this._gestureState === DragRecognizer.STATE_DRAG;
+    }
+
+    _isScroll () {
+        return this._gestureState === DragRecognizer.STATE_SCROLL;
+    }
+}
+
+export default DragRecognizer;

package/src/lib/drag-utils.js

@@ -0,0 +1,55 @@
+/**
+ * @fileoverview
+ * Utility functions for drag interactions, e.g. sorting items in a grid/list.
+ */
+
+/**
+ * From an xy position and a list of boxes {top, left, bottom, right}, return there
+ * corresponding box index the position is over. The boxes are in a (possibly wrapped)
+ * list, the only requirement being all boxes are flush against the edges, that is,
+ * if they are along an outer edge, the position of that edge is identical.
+ * This functionality works for a single column of items, a wrapped list with
+ * many rows, or a single row of items.
+ * @param {{x: number, y: number}} position The xy coordinates to retreive the corresponding index of.
+ * @param {Array.<DOMRect>} boxes The rects of the items, returned from `getBoundingClientRect`
+ * @param {bool} isRtl are the boxes in RTL order.
+ * @return {?number} index of the corresponding box, or null if one could not be found.
+ */
+const indexForPositionOnList = ({x, y}, boxes, isRtl) => {
+    if (boxes.length === 0) return null;
+    let index = null;
+    const leftEdge = Math.min.apply(null, boxes.map(b => b.left));
+    const rightEdge = Math.max.apply(null, boxes.map(b => b.right));
+    const topEdge = Math.min.apply(null, boxes.map(b => b.top));
+    const bottomEdge = Math.max.apply(null, boxes.map(b => b.bottom));
+    for (let n = 0; n < boxes.length; n++) {
+        const box = boxes[n];
+        // Construct an "extended" box for each, extending out to infinity if
+        // the box is along a boundary.
+        let minX = box.left === leftEdge ? -Infinity : box.left;
+        let maxX = box.right === rightEdge ? Infinity : box.right;
+        const minY = box.top === topEdge ? -Infinity : box.top;
+        const maxY = box.bottom === bottomEdge ? Infinity : box.bottom;
+        // The last item in the wrapped list gets a right edge at infinity, even
+        // if it isn't the farthest right, in RTL mode. In LTR mode, it gets a
+        // left edge at infinity.
+        if (n === boxes.length - 1) {
+            if (isRtl) {
+                minX = -Infinity;
+            } else {
+                maxX = Infinity;
+            }
+        }
+
+        // Check if the point is in the bounds.
+        if (x >= minX && x <= maxX && y >= minY && y <= maxY) {
+            index = n;
+            break; // No need to keep looking.
+        }
+    }
+    return index;
+};
+
+export {
+    indexForPositionOnList
+};

package/src/lib/drop-area-hoc.jsx

@@ -0,0 +1,119 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import omit from 'lodash.omit';
+import {connect} from 'react-redux';
+
+/**
+ * Higher Order Component to give components the ability to react to drag overs
+ * and drops of objects stored in the assetDrag redux state.
+ *
+ * Example: You want to enable MyComponent to receive drops from a drag type
+ *    Wrapped = DropAreaHOC([...dragTypes])(
+ *      <MyComponent />
+ *    )
+ *
+ * MyComponent now receives 2 new props
+ *      containerRef: a ref that must be set on the container element
+ *      dragOver: boolean if an asset is being dragged above the component
+ *
+ * Use the wrapped component:
+ *    <Wrapped onDrop={yourDropHandler} />
+ *
+ * NB: This HOC _only_ works with objects that drag using the assetDrag reducer.
+ *     This _does not_ handle drags for blocks coming from the workspace.
+ *
+ * @param {Array.<string>} dragTypes Types to respond to, from DragConstants
+ * @returns {function} The HOC, specialized for those drag types
+ */
+const DropAreaHOC = function (dragTypes) {
+    /**
+     * Return the HOC, specialized for the dragTypes
+     * @param {React.Component} WrappedComponent component to receive drop behaviors
+     * @returns {React.Component} component with drag over/drop behavior
+     */
+    return function (WrappedComponent) {
+        class DropAreaWrapper extends React.Component {
+            constructor (props) {
+                super(props);
+                bindAll(this, [
+                    'setRef'
+                ]);
+
+                this.state = {
+                    dragOver: false
+                };
+
+                this.ref = null;
+                this.containerBox = null;
+            }
+
+            componentWillReceiveProps (newProps) {
+                // If `dragging` becomes true, record the drop area rectangle
+                if (newProps.dragInfo.dragging && !this.props.dragInfo.dragging) {
+                    this.dropAreaRect = this.ref && this.ref.getBoundingClientRect();
+                // If `dragging` becomes false, call the drop handler
+                } else if (!newProps.dragInfo.dragging && this.props.dragInfo.dragging && this.state.dragOver) {
+                    this.props.onDrop(this.props.dragInfo);
+                    this.setState({dragOver: false});
+                }
+
+                // If a drag is in progress (currentOffset) and it matches the relevant drag types,
+                // test if the drag is within the drop area rect and set the state accordingly.
+                if (this.dropAreaRect && newProps.dragInfo.currentOffset &&
+                    dragTypes.includes(newProps.dragInfo.dragType)) {
+                    const {x, y} = newProps.dragInfo.currentOffset;
+                    const {top, right, bottom, left} = this.dropAreaRect;
+                    if (x > left && x < right && y > top && y < bottom) {
+                        this.setState({dragOver: true});
+                    } else {
+                        this.setState({dragOver: false});
+                    }
+                }
+            }
+            setRef (el) {
+                this.ref = el;
+                if (this.props.componentRef) {
+                    this.props.componentRef(this.ref);
+                }
+            }
+            render () {
+                const componentProps = omit(this.props, ['onDrop', 'dragInfo', 'componentRef']);
+                return (
+                    <WrappedComponent
+                        containerRef={this.setRef}
+                        dragOver={this.state.dragOver}
+                        {...componentProps}
+                    />
+                );
+            }
+        }
+
+        DropAreaWrapper.propTypes = {
+            componentRef: PropTypes.func,
+            dragInfo: PropTypes.shape({
+                currentOffset: PropTypes.shape({
+                    x: PropTypes.number,
+                    y: PropTypes.number
+                }),
+                dragType: PropTypes.string,
+                dragging: PropTypes.bool,
+                index: PropTypes.number
+            }),
+            onDrop: PropTypes.func
+        };
+
+        const mapStateToProps = state => ({
+            dragInfo: state.scratchGui.assetDrag
+        });
+
+        const mapDispatchToProps = () => ({});
+
+        return connect(
+            mapStateToProps,
+            mapDispatchToProps
+        )(DropAreaWrapper);
+    };
+};
+
+export default DropAreaHOC;