Merge pull request #754 from ericrosenbaum/feature/pen-block-icon

Extension block icons (including pen icon)
This commit is contained in:
Eric Rosenbaum 2017-11-06 10:02:23 -05:00 committed by GitHub
commit 0540640684
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 1 deletions

View file

@ -7,6 +7,13 @@ const MathUtil = require('../util/math-util');
const RenderedTarget = require('../sprites/rendered-target'); const RenderedTarget = require('../sprites/rendered-target');
const log = require('../util/log'); const log = require('../util/log');
/**
* Icon svg to be displayed at the left edge of each extension block, encoded as a data URI.
* @type {string}
*/
// eslint-disable-next-line max-len
const iconURI = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+cGVuLWljb248L3RpdGxlPjxnIHN0cm9rZT0iIzU3NUU3NSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik04Ljc1MyAzNC42MDJsLTQuMjUgMS43OCAxLjc4My00LjIzN2MxLjIxOC0yLjg5MiAyLjkwNy01LjQyMyA1LjAzLTcuNTM4TDMxLjA2NiA0LjkzYy44NDYtLjg0MiAyLjY1LS40MSA0LjAzMi45NjcgMS4zOCAxLjM3NSAxLjgxNiAzLjE3My45NyA0LjAxNUwxNi4zMTggMjkuNTljLTIuMTIzIDIuMTE2LTQuNjY0IDMuOC03LjU2NSA1LjAxMiIgZmlsbD0iI0ZGRiIvPjxwYXRoIGQ9Ik0yOS40MSA2LjExcy00LjQ1LTIuMzc4LTguMjAyIDUuNzcyYy0xLjczNCAzLjc2Ni00LjM1IDEuNTQ2LTQuMzUgMS41NDYiLz48cGF0aCBkPSJNMzYuNDIgOC44MjVjMCAuNDYzLS4xNC44NzMtLjQzMiAxLjE2NGwtOS4zMzUgOS4zYy4yODItLjI5LjQxLS42NjguNDEtMS4xMiAwLS44NzQtLjUwNy0xLjk2My0xLjQwNi0yLjg2OC0xLjM2Mi0xLjM1OC0zLjE0Ny0xLjgtNC4wMDItLjk5TDMwLjk5IDUuMDFjLjg0NC0uODQgMi42NS0uNDEgNC4wMzUuOTYuODk4LjkwNCAxLjM5NiAxLjk4MiAxLjM5NiAyLjg1NU0xMC41MTUgMzMuNzc0Yy0uNTczLjMwMi0xLjE1Ny41Ny0xLjc2NC44M0w0LjUgMzYuMzgybDEuNzg2LTQuMjM1Yy4yNTgtLjYwNC41My0xLjE4Ni44MzMtMS43NTcuNjkuMTgzIDEuNDQ4LjYyNSAyLjEwOCAxLjI4Mi42Ni42NTggMS4xMDIgMS40MTIgMS4yODcgMi4xMDIiIGZpbGw9IiM0Qzk3RkYiLz48cGF0aCBkPSJNMzYuNDk4IDguNzQ4YzAgLjQ2NC0uMTQuODc0LS40MzMgMS4xNjVsLTE5Ljc0MiAxOS42OGMtMi4xMyAyLjExLTQuNjczIDMuNzkzLTcuNTcyIDUuMDFMNC41IDM2LjM4bC45NzQtMi4zMTYgMS45MjUtLjgwOGMyLjg5OC0xLjIxOCA1LjQ0LTIuOSA3LjU3LTUuMDFsMTkuNzQzLTE5LjY4Yy4yOTItLjI5Mi40MzItLjcwMi40MzItMS4xNjUgMC0uNjQ2LS4yNy0xLjQtLjc4LTIuMTIyLjI1LjE3Mi41LjM3Ny43MzcuNjE0Ljg5OC45MDUgMS4zOTYgMS45ODMgMS4zOTYgMi44NTYiIGZpbGw9IiM1NzVFNzUiIG9wYWNpdHk9Ii4xNSIvPjxwYXRoIGQ9Ik0xOC40NSAxMi44M2MwIC41LS40MDQuOTA1LS45MDQuOTA1cy0uOTA1LS40MDUtLjkwNS0uOTA0YzAtLjUuNDA3LS45MDMuOTA2LS45MDMuNSAwIC45MDQuNDA0LjkwNC45MDR6IiBmaWxsPSIjNTc1RTc1Ii8+PC9nPjwvc3ZnPg==';
/** /**
* Enum for pen color parameters. * Enum for pen color parameters.
* @readonly * @readonly
@ -235,6 +242,7 @@ class Scratch3PenBlocks {
return { return {
id: 'pen', id: 'pen',
name: 'Pen', name: 'Pen',
iconURI: iconURI,
blocks: [ blocks: [
{ {
opcode: 'clear', opcode: 'clear',

View file

@ -421,6 +421,7 @@ class Runtime extends EventEmitter {
const categoryInfo = { const categoryInfo = {
id: extensionInfo.id, id: extensionInfo.id,
name: extensionInfo.name, name: extensionInfo.name,
iconURI: extensionInfo.iconURI,
color1: '#FF6680', color1: '#FF6680',
color2: '#FF4D6A', color2: '#FF4D6A',
color3: '#FF3355', color3: '#FF3355',
@ -524,8 +525,21 @@ class Runtime extends EventEmitter {
// but each `[ARG]` will need to be replaced with the number in this map instead of `args0.length`. // but each `[ARG]` will need to be replaced with the number in this map instead of `args0.length`.
const argsMap = {}; const argsMap = {};
blockJSON.message0 = blockInfo.text.replace(/\[(.+?)]/g, (match, placeholder) => { blockJSON.message0 = '';
// If an icon for the extension exists, prepend it to each block
if (categoryInfo.iconURI) {
blockJSON.message0 = '%1';
const iconJSON = {
type: 'field_image',
src: categoryInfo.iconURI,
width: 40,
height: 40
};
blockJSON.args0.push(iconJSON);
}
blockJSON.message0 += blockInfo.text.replace(/\[(.+?)]/g, (match, placeholder) => {
// Sanitize the placeholder to ensure valid XML // Sanitize the placeholder to ensure valid XML
placeholder = placeholder.replace(/[<"&]/, '_'); placeholder = placeholder.replace(/[<"&]/, '_');