Enable some features to improve the programming experience (#1022)

* Update pxtarget.json

Enable addNewTypeScriptFile so that you can split your code into multiple files. Enable blocksCollapsing to collapse blocks for convenience. Turn off highContrast it doesn't work now. We'll see later...

* enable-errorlist-option

* Update pxtarget.json

Co-authored-by: Joey Wunderlich <jwunderl@users.noreply.github.com>

---------

Co-authored-by: Joey Wunderlich <jwunderl@users.noreply.github.com>

SECURITY.md

@@ -0,0 +1,41 @@
+<!-- BEGIN MICROSOFT SECURITY.MD V0.0.7 BLOCK -->
+
+## Security
+
+Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
+
+If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://aka.ms/opensource/security/definition), please report it to us as described below.
+
+## Reporting Security Issues
+
+**Please do not report security vulnerabilities through public GitHub issues.**
+
+Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://aka.ms/opensource/security/create-report).
+
+If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com).  If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/opensource/security/pgpkey).
+
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://aka.ms/opensource/security/msrc). 
+
+Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
+
+  * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
+  * Full paths of source file(s) related to the manifestation of the issue
+  * The location of the affected source code (tag/branch/commit or direct URL)
+  * Any special configuration required to reproduce the issue
+  * Step-by-step instructions to reproduce the issue
+  * Proof-of-concept or exploit code (if possible)
+  * Impact of the issue, including how an attacker might exploit the issue
+
+This information will help us triage your report more quickly.
+
+If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://aka.ms/opensource/security/bounty) page for more details about our active programs.
+
+## Preferred Languages
+
+We prefer all communications to be in English.
+
+## Policy
+
+Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://aka.ms/opensource/security/cvd).
+
+<!-- END MICROSOFT SECURITY.MD BLOCK -->

docs/beta-ref.json

@@ -1,3 +1,3 @@
 {
-    "appref": "v1.4.24"
+    "appref": "v1.4"
 }

editor/dialogs.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import { canUseWebSerial, enableWebSerialAsync } from "./deploy";
 import { projectView } from "./extension";
 
@@ -52,11 +53,12 @@ function explainWebSerialPairingAsync(): Promise<void> {
 
 export function showUploadDialogAsync(fn: string, url: string, _confirmAsync: (options: any) => Promise<number>): Promise<void> {
     confirmAsync = _confirmAsync;
+
     // https://msdn.microsoft.com/en-us/library/cc848897.aspx
     // "For security reasons, data URIs are restricted to downloaded resources.
     // Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements"
     const downloadAgain = !pxt.BrowserUtils.isIE() && !pxt.BrowserUtils.isEdge();
-    const docUrl = pxt.appTarget.appTheme.usbDocs;
+    const docUrl = (pxt.appTarget.appTheme.usbDocs ? pxt.appTarget.appTheme.usbDocs : false);
 
     const jsx =
         <div className="ui grid stackable">
@@ -118,7 +120,7 @@ export function showUploadDialogAsync(fn: string, url: string, _confirmAsync: (o
         hideAgree: false,
         agreeLbl: lf("I got it"),
         className: 'downloaddialog',
-        buttons: [canUseWebSerial() ? {
+        buttons: [canUseWebSerial() && {
             label: lf("Bluetooth"),
             icon: "bluetooth",
             className: "bluetooth focused",
@@ -127,18 +129,18 @@ export function showUploadDialogAsync(fn: string, url: string, _confirmAsync: (o
                 explainWebSerialPairingAsync()
                     .then(() => enableWebSerialAndCompileAsync())
             }
-        } : undefined, downloadAgain ? {
+        }, downloadAgain && {
             label: fn,
             icon: "download",
             className: "lightgrey focused",
             url,
             fileName: fn
-        } : undefined, docUrl ? {
+        }, docUrl && {
             label: lf("Help"),
             icon: "help",
             className: "lightgrey",
             url: docUrl
-        } : undefined]
+        }]
         //timeout: 20000
     }).then(() => { });
 }

editor/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es5",
+        "target": "es2017",
         "noImplicitAny": true,
         "noImplicitReturns": true,
         "noImplicitThis": true,

fieldeditors/extension.ts

@@ -2,6 +2,7 @@
 /// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
 
 import { FieldPorts } from "./field_ports";
+import { FieldMotors } from "./field_motors";
 import { FieldBrickButtons } from "./field_brickbuttons";
 import { FieldColorEnum } from "./field_color";
 import { FieldMusic } from "./field_music";
@@ -13,6 +14,9 @@ pxt.editor.initFieldExtensionsAsync = function (opts: pxt.editor.FieldExtensionO
         fieldEditors: [{
             selector: "ports",
             editor: FieldPorts
+        }, {
+            selector: "motors",
+            editor: FieldMotors
         }, {
             selector: "brickbuttons",
             editor: FieldBrickButtons

fieldeditors/field_brickbuttons.ts

@@ -120,20 +120,17 @@ export class FieldBrickButtons extends Blockly.FieldDropdown implements Blockly.
 
         Blockly.DropDownDiv.setColour('#ffffff', '#dddddd');
 
-        // Calculate positioning based on the field position.
-        let scale = (<Blockly.WorkspaceSvg>this.sourceBlock_.workspace).scale;
-        let bBox = { width: this.size_.width, height: this.size_.height };
-        bBox.width *= scale;
-        bBox.height *= scale;
-        let position = this.fieldGroup_.getBoundingClientRect();
-        let primaryX = position.left + bBox.width / 2;
-        let primaryY = position.top + bBox.height;
-        let secondaryX = primaryX;
-        let secondaryY = position.top;
-        // Set bounds to workspace; show the drop-down.
-        (Blockly.DropDownDiv as any).setBoundsElement((<Blockly.WorkspaceSvg>this.sourceBlock_.workspace).getParentSvg().parentNode);
-        (Blockly.DropDownDiv as any).show(this, primaryX, primaryY, secondaryX, secondaryY,
-            this.onHide_.bind(this));
+        // Position based on the field position.
+        Blockly.DropDownDiv.showPositionedByField(this, this.onHide_.bind(this));
+
+        // Update colour to look selected.
+        let source = this.sourceBlock_ as Blockly.BlockSvg;
+        this.savedPrimary_ = source?.getColour();
+        if (source?.isShadow()) {
+            source.setColour(source.getColourTertiary());
+        } else if (this.borderRect_) {
+            this.borderRect_.setAttribute('fill', (this.sourceBlock_ as Blockly.BlockSvg).getColourTertiary());
+        }
     }
 
     /**
@@ -157,5 +154,12 @@ export class FieldBrickButtons extends Blockly.FieldDropdown implements Blockly.
         content.removeAttribute('aria-haspopup');
         content.removeAttribute('aria-activedescendant');
         (content as HTMLElement).style.width = '';
+        // Update color (deselect) on dropdown hide
+        let source = this.sourceBlock_ as Blockly.BlockSvg;
+        if (source?.isShadow()) {
+            source.setColour(this.savedPrimary_);
+        } else if (this.borderRect_) {
+            this.borderRect_.setAttribute('fill', this.savedPrimary_);
+        }
     };
 }

fieldeditors/field_color.ts

@@ -5,10 +5,14 @@ export interface FieldColorEnumOptions extends pxtblockly.FieldColourNumberOptio
 }
 
 export class FieldColorEnum extends pxtblockly.FieldColorNumber implements Blockly.FieldCustom {
+
     public isFieldCustom_ = true;
+    private paramsData: any[];
 
     constructor(text: string, params: FieldColorEnumOptions, opt_validator?: Function) {
         super(text, params, opt_validator);
+
+        this.paramsData = params["data"];
     }
 
     mapColour(enumString: string) {
@@ -33,11 +37,21 @@ export class FieldColorEnum extends pxtblockly.FieldColorNumber implements Block
             case 'ColorSensorColor.Red': return '#f12a21';
             case 'ColorSensorColor.White': return '#ffffff';
             case 'ColorSensorColor.Brown': return '#6c2d00';
-            case 'ColorSensorColor.None': return '#dfe6e9'; // Grey
+            case 'ColorSensorColor.None': return '#dfe6e9';
             default: return colorString;
         }
     }
 
+    showEditor_() {
+        super.showEditor_();
+        const colorCells = document.querySelectorAll('.legoColorPicker td');
+        colorCells.forEach((cell) => {
+            const titleName = this.mapColour(cell.getAttribute("title"));
+            const index = this.paramsData.findIndex(item => item[1] === titleName);
+            cell.setAttribute("title", this.paramsData[index][0]);
+        });
+    }
+
     /**
      * Return the current colour.
      * @param {boolean} opt_asHex optional field if the returned value should be a hex

fieldeditors/field_motors.ts

@@ -0,0 +1,133 @@
+/// <reference path="../node_modules/pxt-core/localtypings/blockly.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtblocks.d.ts"/>
+/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
+
+export interface FieldMotorsOptions extends pxtblockly.FieldImagesOptions {
+    columns?: string;
+    width?: string;
+    //sort?: boolean;
+}
+
+export class FieldMotors extends pxtblockly.FieldImages implements Blockly.FieldCustom {
+    public isFieldCustom_ = true;
+    //public shouldSort_: boolean;
+
+    constructor(text: string, options: FieldMotorsOptions, validator?: Function) {
+        super(text, options, validator);
+
+        this.columns_ = parseInt(options.columns) || 4;
+        this.width_ = parseInt(options.width) || 400;
+        //this.shouldSort_ = options.sort;
+        this.addLabel_ = true;
+
+        this.renderSelectedImage_ = Blockly.FieldDropdown.prototype.renderSelectedText_;
+        this.updateSize_ = (Blockly.Field as any).prototype.updateSize_;
+    }
+
+    /**
+     * Create a dropdown menu under the text.
+     * @private
+     */
+    public showEditor_() {
+        // If there is an existing drop-down we own, this is a request to hide the drop-down.
+        if (Blockly.DropDownDiv.hideIfOwner(this)) {
+            return;
+        }
+        let sourceBlock = this.sourceBlock_ as Blockly.BlockSvg;
+        // If there is an existing drop-down someone else owns, hide it immediately and clear it.
+        Blockly.DropDownDiv.hideWithoutAnimation();
+        Blockly.DropDownDiv.clearContent();
+        // Populate the drop-down with the icons for this field.
+        let dropdownDiv = Blockly.DropDownDiv.getContentDiv();
+        let contentDiv = document.createElement('div');
+        // Accessibility properties
+        contentDiv.setAttribute('role', 'menu');
+        contentDiv.setAttribute('aria-haspopup', 'true');
+        const options = this.getOptions();
+        //if (this.shouldSort_) options.sort();
+        for (let i = 0; i < options.length; i++) {
+            const content = (options[i] as any)[0]; // Human-readable text or image.
+            const value = (options[i] as any)[1]; // Language-neutral value.
+            // Icons with the type property placeholder take up space but don't have any functionality
+            // Use for special-case layouts
+            if (content.type == 'placeholder') {
+                let placeholder = document.createElement('span');
+                placeholder.setAttribute('class', 'blocklyDropDownPlaceholder');
+                placeholder.style.width = content.width + 'px';
+                placeholder.style.height = content.height + 'px';
+                contentDiv.appendChild(placeholder);
+                continue;
+            }
+            let button = document.createElement('button');
+            button.setAttribute('id', ':' + i); // For aria-activedescendant
+            button.setAttribute('role', 'menuitem');
+            button.setAttribute('class', 'blocklyDropDownButton');
+            button.title = content.alt;
+            if ((this as any).columns_) {
+                button.style.width = (((this as any).width_ / (this as any).columns_) - 8) + 'px';
+                //button.style.height = ((this.width_ / this.columns_) - 8) + 'px';
+            } else {
+                button.style.width = content.width + 'px';
+                button.style.height = content.height + 'px';
+            }
+            let backgroundColor = sourceBlock.getColour();
+            if (value == this.getValue()) {
+                // This icon is selected, show it in a different colour
+                backgroundColor = sourceBlock.getColourTertiary();
+                button.setAttribute('aria-selected', 'true');
+            }
+            button.style.backgroundColor = backgroundColor;
+            button.style.borderColor = sourceBlock.getColourTertiary();
+            Blockly.bindEvent_(button, 'click', this, this.buttonClick_);
+            Blockly.bindEvent_(button, 'mouseover', button, function () {
+                this.setAttribute('class', 'blocklyDropDownButton blocklyDropDownButtonHover');
+                contentDiv.setAttribute('aria-activedescendant', this.id);
+            });
+            Blockly.bindEvent_(button, 'mouseout', button, function () {
+                this.setAttribute('class', 'blocklyDropDownButton');
+                contentDiv.removeAttribute('aria-activedescendant');
+            });
+            let buttonImg = document.createElement('img');
+            buttonImg.src = content.src;
+            //buttonImg.alt = icon.alt;
+            // Upon click/touch, we will be able to get the clicked element as e.target
+            // Store a data attribute on all possible click targets so we can match it to the icon.
+            button.setAttribute('data-value', value);
+            buttonImg.setAttribute('data-value', value);
+            button.appendChild(buttonImg);
+            if (this.addLabel_) {
+                const buttonText = this.createTextNode_(content.alt);
+                buttonText.setAttribute('data-value', value);
+                buttonText.style.whiteSpace = 'inherit';
+                buttonText.style.width = 'auto';
+                buttonText.style.padding = '0 10px';
+                button.appendChild(buttonText);
+            }
+            contentDiv.appendChild(button);
+        }
+        contentDiv.style.width = (this as any).width_ + 'px';
+        dropdownDiv.appendChild(contentDiv);
+
+        Blockly.DropDownDiv.setColour(sourceBlock.getColour(), sourceBlock.getColourTertiary());
+
+        // Position based on the field position.
+        Blockly.DropDownDiv.showPositionedByField(this, this.onHideCallback.bind(this));
+
+        // Update colour to look selected.
+        this.savedPrimary_ = sourceBlock?.getColour();
+        if (sourceBlock?.isShadow()) {
+            sourceBlock.setColour(sourceBlock.style.colourTertiary);
+        } else if (this.borderRect_) {
+            this.borderRect_.setAttribute('fill', sourceBlock.style.colourTertiary);
+        }
+    }
+
+    trimOptions_() {
+    }
+
+    protected buttonClick_ = function (e: any) {
+        let value = e.target.getAttribute('data-value');
+        this.setValue(value);
+        Blockly.DropDownDiv.hide();
+    };
+}

fieldeditors/field_music.ts

@@ -11,6 +11,7 @@ declare const pxtTargetBundle: any;
 
 let soundCache: any;
 let soundIconCache: any;
+let soundIconCacheArray: any;
 
 export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldCustom {
     public isFieldCustom_ = true;
@@ -23,7 +24,7 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
         super(text, { blocksInfo: options.blocksInfo, sort: true, data: options.data }, validator);
 
         this.columns_ = parseInt(options.columns) || 4;
-        this.width_ = parseInt(options.width) || 380;
+        this.width_ = parseInt(options.width) || 450;
 
         this.setText = Blockly.FieldDropdown.prototype.setText;
         this.updateSize_ = (Blockly.Field as any).prototype.updateSize_;
@@ -33,6 +34,7 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
         }
         if (!soundIconCache) {
             soundIconCache = JSON.parse(pxtTargetBundle.bundledpkgs['music']['icons.jres']);
+            soundIconCacheArray = Object.entries(soundIconCache).filter(el => el[0] !== "*");
         }
     }
 
@@ -49,14 +51,17 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
         Blockly.DropDownDiv.hideWithoutAnimation();
         Blockly.DropDownDiv.clearContent();
         // Populate the drop-down with the icons for this field.
-        let dropdownDiv = Blockly.DropDownDiv.getContentDiv();
+        let dropdownDiv = Blockly.DropDownDiv.getContentDiv() as HTMLElement;
         let contentDiv = document.createElement('div');
         // Accessibility properties
         contentDiv.setAttribute('role', 'menu');
         contentDiv.setAttribute('aria-haspopup', 'true');
         contentDiv.className = 'blocklyMusicFieldOptions';
+        contentDiv.style.display = "flex";
+        contentDiv.style.flexWrap = "wrap";
+        contentDiv.style.float = "none";
         const options = this.getOptions();
-        options.sort();
+        //options.sort(); // Do not need to use to not apply sorting in different languages
 
         // Create categoies
         const categories = this.getCategories(options);
@@ -67,8 +72,7 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
         // Accessibility properties
         categoriesDiv.setAttribute('role', 'menu');
         categoriesDiv.setAttribute('aria-haspopup', 'true');
-        // FIXME: tertiary color?
-        categoriesDiv.style.backgroundColor = this.sourceBlock_.getColour();
+        categoriesDiv.style.backgroundColor = (this.sourceBlock_ as Blockly.BlockSvg).getColourTertiary();
         categoriesDiv.className = 'blocklyMusicFieldCategories';
 
         this.refreshCategories(categoriesDiv, categories);
@@ -82,31 +86,18 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
         dropdownDiv.appendChild(categoriesDiv);
         dropdownDiv.appendChild(contentDiv);
 
-        Blockly.DropDownDiv.setColour(this.sourceBlock_.getColour(),
-        // FIXME: tertiary color?
-        this.sourceBlock_.getColour());
-
-        // Calculate positioning based on the field position.
-        let scale = (<Blockly.WorkspaceSvg>this.sourceBlock_.workspace).scale;
-        let bBox = { width: this.size_.width, height: this.size_.height };
-        bBox.width *= scale;
-        bBox.height *= scale;
-        let position = this.fieldGroup_.getBoundingClientRect();
-        let primaryX = position.left + bBox.width / 2;
-        let primaryY = position.top + bBox.height;
-        let secondaryX = primaryX;
-        let secondaryY = position.top;
-        // Set bounds to workspace; show the drop-down.
-        (Blockly.DropDownDiv as any).setBoundsElement((<Blockly.WorkspaceSvg>this.sourceBlock_.workspace).getParentSvg().parentNode);
-        (Blockly.DropDownDiv as any).show(this, primaryX, primaryY, secondaryX, secondaryY,
-            this.onHide_.bind(this));
+        Blockly.DropDownDiv.setColour(this.sourceBlock_.getColour(), (this.sourceBlock_ as Blockly.BlockSvg).getColourTertiary());
+        
+        // Position based on the field position.
+        Blockly.DropDownDiv.showPositionedByField(this, this.onHide_.bind(this));
 
         // Update colour to look selected.
-        if (this.sourceBlock_.isShadow()) {
-            this.savedPrimary_ = this.sourceBlock_.getColour();
-            // FIXME
-            // this.sourceBlock_.setColour(this.sourceBlock_.getColourTertiary(),
-            //     this.sourceBlock_.getColourSecondary(), this.sourceBlock_.getColourTertiary());
+        let source = this.sourceBlock_ as Blockly.BlockSvg;
+        this.savedPrimary_ = source?.getColour();
+        if (source?.isShadow()) {
+            source.setColour(source.getColourTertiary());
+        } else if (this.borderRect_) {
+            this.borderRect_.setAttribute('fill', (this.sourceBlock_ as Blockly.BlockSvg).getColourTertiary());
         }
     }
 
@@ -139,6 +130,7 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
                 backgroundColor = '#0c4e5e';
                 button.setAttribute('aria-selected', 'true');
             }
+            button.style.padding = "2px 6px";
             button.style.backgroundColor = backgroundColor;
             button.style.borderColor = backgroundColor;
             Blockly.bindEvent_(button, 'click', this, this.categoryClick_);
@@ -152,7 +144,7 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
     }
 
     refreshOptions(contentDiv: Element, options: any) {
-
+        const categories = this.getCategories(options);
         // Show options
         for (let i = 0, option: any; option = options[i]; i++) {
             let content = (options[i] as any)[0]; // Human-readable text or image.
@@ -187,13 +179,11 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
             let backgroundColor = this.savedPrimary_ || this.sourceBlock_.getColour();
             if (value == this.getValue()) {
                 // This icon is selected, show it in a different colour
-                // FIXME: tertiary color?
-                backgroundColor = this.sourceBlock_.getColour();
+                backgroundColor = (this.sourceBlock_ as Blockly.BlockSvg).getColourTertiary();
                 button.setAttribute('aria-selected', 'true');
             }
             button.style.backgroundColor = backgroundColor;
-            // FIXME: tertiary color?
-            button.style.borderColor = this.sourceBlock_.getColour();
+            button.style.borderColor = (this.sourceBlock_ as Blockly.BlockSvg).getColourTertiary();
             Blockly.bindEvent_(button, 'click', this, this.buttonClick_);
             Blockly.bindEvent_(button, 'mouseup', this, this.buttonClick_);
             // These are applied manually instead of using the :hover pseudoclass
@@ -218,15 +208,27 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
                 this.setAttribute('class', 'blocklyDropDownButton');
                 contentDiv.removeAttribute('aria-activedescendant');
             });
+
+            // Find index in array by category name
+            const categoryIndex = categories.indexOf(category);
+
             let buttonImg = document.createElement('img');
-            buttonImg.src = this.getSoundIcon(category);
-            //buttonImg.alt = icon.alt;
+            buttonImg.src = this.getSoundIcon(categoryIndex);
+
             // Upon click/touch, we will be able to get the clicked element as e.target
             // Store a data attribute on all possible click targets so we can match it to the icon.
             const textNode = this.createTextNode_(content);
             button.setAttribute('data-value', value);
             buttonImg.setAttribute('data-value', value);
+            buttonImg.style.height = "auto";
             textNode.setAttribute('data-value', value);
+            if (pxt.Util.userLanguage() !== "en") textNode.setAttribute('lang', pxt.Util.userLanguage()); // for hyphens, here you need to set the correct abbreviation of the selected language 
+            textNode.style.display = "block";
+            textNode.style.lineHeight = "1rem";
+            textNode.style.marginBottom = "5%";
+            textNode.style.padding = "0px 8px";
+            textNode.style.wordBreak = "break-word";
+            textNode.style.hyphens = "auto";
 
             button.appendChild(buttonImg);
             button.appendChild(textNode);
@@ -241,12 +243,19 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
         super.onHide_();
         (Blockly.DropDownDiv.getContentDiv() as HTMLElement).style.maxHeight = '';
         this.stopSounds();
+        // Update color (deselect) on dropdown hide
+        let source = this.sourceBlock_ as Blockly.BlockSvg;
+        if (source?.isShadow()) {
+            source.setColour(this.savedPrimary_);
+        } else if (this.borderRect_) {
+            this.borderRect_.setAttribute('fill', this.savedPrimary_);
+        }
     }
 
     protected createTextNode_(content: string) {
         const category = this.parseCategory(content);
         let text = content.substr(content.indexOf(' ') + 1);
-        text = text.length > 15 ? text.substr(0, 12) + "..." : text;
+        
         const textSpan = document.createElement('span');
         textSpan.setAttribute('class', 'blocklyDropdownText');
         textSpan.textContent = text;
@@ -314,9 +323,9 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
         pxsim.AudioContextManager.stop();
     }
 
-    private getSoundIcon(category: string) {
-        if (soundIconCache && soundIconCache[category]) {
-            return soundIconCache[category].icon;
+    private getSoundIcon(indexCategory: number) {
+        if (soundIconCacheArray && soundIconCacheArray[indexCategory]) {
+            return soundIconCacheArray[indexCategory][1].icon;
         }
         return undefined;
     }

fieldeditors/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es5",
+        "target": "es2017",
         "noImplicitAny": false,
         "noImplicitReturns": true,
         "module": "commonjs",

libs/color-sensor/color.ts

@@ -250,7 +250,7 @@ namespace sensors {
         }
 
         /**
-         * Measure the ambient or reflected light value from 0 (darkest) to 100 (brightest).
+         * Measure the ambient or reflected light value from 0 (darkest) to 100 (brightest). In raw reflection light mode, the range will be different.
          * @param sensor the color sensor port
          */
         //% help=sensors/color-sensor/light

libs/color-sensor/ns.ts

@@ -1,5 +1,3 @@
-
-
 namespace sensors {
 
     /**
@@ -9,9 +7,9 @@ namespace sensors {
     //% blockId=colorEnumPicker block="%color" shim=TD_ID
     //% weight=0 blockHidden=1 turnRatio.fieldOptions.decompileLiterals=1
     //% color.fieldEditor="colorenum"
-    //% color.fieldOptions.colours='["#f12a21", "#ffd01b", "#006db3", "#00934b", "#000000", "#6c2d00", "#ffffff"]'
+    //% color.fieldOptions.colours='["#f12a21", "#ffd01b", "#006db3", "#00934b", "#000000", "#6c2d00", "#ffffff", "#dfe6e9"]'
     //% color.fieldOptions.columns=2 color.fieldOptions.className='legoColorPicker'
     export function __colorEnumPicker(color: ColorSensorColor): number {
         return color;
     }
-}
+}                       

libs/core/output.ts

@@ -195,7 +195,7 @@ namespace motors {
          * @param brake a value indicating if the motor should break when off
          */
         //% blockId=outputMotorSetBrakeMode block="set %motor|brake %brake=toggleOnOff"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% weight=60 blockGap=8
         //% group="Properties"
@@ -210,7 +210,7 @@ namespace motors {
          * @param value true to pause; false to continue the program execution
          */
         //% blockId=outputMotorSetPauseMode block="set %motor|pause on run %brake=toggleOnOff"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% weight=60 blockGap=8
         //% group="Properties"
@@ -223,7 +223,7 @@ namespace motors {
          * Inverts the motor polarity
         */
         //% blockId=motorSetInverted block="set %motor|inverted %reversed=toggleOnOff"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% weight=59 blockGap=8
         //% group="Properties"
@@ -241,7 +241,7 @@ namespace motors {
          * Set the settle time after braking in milliseconds (default is 10ms).
         */
         //% blockId=motorSetBrakeSettleTime block="set %motor|brake settle time %millis|ms"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% weight=1 blockGap=8
         //% group="Properties"
@@ -347,7 +347,7 @@ namespace motors {
         //% blockId=motorRun block="run %motor at %speed=motorSpeedPicker|\\%||for %value %unit"
         //% weight=100 blockGap=8
         //% group="Move"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% expandableArgumentMode=toggle
         //% help=motors/motor/run
@@ -397,7 +397,7 @@ namespace motors {
         //% blockId=motorSchedule block="ramp %motor at %speed=motorSpeedPicker|\\%|for %value|%unit||accelerate %acceleration|decelerate %deceleration"
         //% weight=99 blockGap=8
         //% group="Move"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% help=motors/motor/ramp
         //% inlineInputMode=inline
@@ -427,7 +427,7 @@ namespace motors {
          * of run commands.
          */
         //% blockId=outputMotorsetRunRamp block="set %motor|run %ramp to $value||$unit"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% weight=21 blockGap=8
         //% group="Properties"
@@ -499,7 +499,7 @@ namespace motors {
          * @param value true for regulated motor
          */
         //% blockId=outputMotorSetRegulated block="set %motor|regulated %value=toggleOnOff"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% weight=58 blockGap=8
         //% group="Properties"
@@ -525,7 +525,7 @@ namespace motors {
          * @param timeOut optional maximum pausing time in milliseconds
          */
         //% blockId=motorPauseUntilRead block="pause until %motor|ready"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% weight=90 blockGap=8
         //% group="Move"
@@ -584,7 +584,7 @@ namespace motors {
          * @param motor the port which connects to the motor
          */
         //% blockId=motorSpeed block="%motor|speed"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% weight=72
         //% blockGap=8
@@ -600,7 +600,7 @@ namespace motors {
          * @param motor the port which connects to the motor
          */
         //% blockId=motorAngle block="%motor|angle"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% weight=70
         //% blockGap=8
@@ -615,7 +615,7 @@ namespace motors {
          * Clears the motor count
          */
         //% blockId=motorClearCount block="clear %motor|counters"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% weight=68
         //% blockGap=8
@@ -644,7 +644,7 @@ namespace motors {
          * Pauses the program until the motor is stalled.
          */
         //% blockId=motorPauseUntilStall block="pause until %motor|stalled"
-        //% motor.fieldEditor="speed"
+        //% motor.fieldEditor="motors"
         //% motor.fieldOptions.decompileLiterals=1
         //% weight=89
         //% group="Move"
@@ -669,28 +669,28 @@ namespace motors {
         }
     }
 
-    //% whenUsed fixedInstance block="large motor A" jres=icons.portA
+    //% whenUsed fixedInstance block="large motor A" jres=icons.motorLargePortA
     export const largeA = new Motor(Output.A, true);
 
-    //% whenUsed fixedInstance block="large motor B" jres=icons.portB
+    //% whenUsed fixedInstance block="large motor B" jres=icons.motorLargePortB
     export const largeB = new Motor(Output.B, true);
 
-    //% whenUsed fixedInstance block="large motor C" jres=icons.portC
+    //% whenUsed fixedInstance block="large motor C" jres=icons.motorLargePortC
     export const largeC = new Motor(Output.C, true);
 
-    //% whenUsed fixedInstance block="large motor D" jres=icons.portD
+    //% whenUsed fixedInstance block="large motor D" jres=icons.motorLargePortD
     export const largeD = new Motor(Output.D, true);
 
-    //% whenUsed fixedInstance block="medium motor A" jres=icons.portA
+    //% whenUsed fixedInstance block="medium motor A" jres=icons.motorMeduimPortA
     export const mediumA = new Motor(Output.A, false);
 
-    //% whenUsed fixedInstance block="medium motor B" jres=icons.portB
+    //% whenUsed fixedInstance block="medium motor B" jres=icons.motorMeduimPortB
     export const mediumB = new Motor(Output.B, false);
 
-    //% whenUsed fixedInstance block="medium motor C" jres=icons.portC
+    //% whenUsed fixedInstance block="medium motor C" jres=icons.motorMeduimPortC
     export const mediumC = new Motor(Output.C, false);
 
-    //% whenUsed fixedInstance block="medium motor D" jres=icons.portD
+    //% whenUsed fixedInstance block="medium motor D" jres=icons.motorMeduimPortD
     export const mediumD = new Motor(Output.D, false);
 
     //% fixedInstances
@@ -721,7 +721,7 @@ namespace motors {
          * @param unit (optional) unit of the value
          */
         //% blockId=motorPairTank block="tank **motors** %motors %speedLeft=motorSpeedPicker|\\% %speedRight=motorSpeedPicker|\\%||for %value %unit"
-        //% motors.fieldEditor="ports"
+        //% motors.fieldEditor="motors"
         //% weight=96 blockGap=8
         //% inlineInputMode=inline
         //% group="Move"
@@ -751,7 +751,7 @@ namespace motors {
          * @param unit (optional) unit of the value
          */
         //% blockId=motorPairSteer block="steer **motors** %chassis turn ratio %turnRatio=motorTurnRatioPicker speed %speed=motorSpeedPicker|\\%||for %value %unit"
-        //% chassis.fieldEditor="ports"
+        //% chassis.fieldEditor="motors"
         //% weight=95
         //% turnRatio.min=-200 turnRatio=200
         //% inlineInputMode=inline
@@ -824,16 +824,16 @@ namespace motors {
         }
     }
 
-    //% whenUsed fixedInstance block="B+C" jres=icons.portBC
+    //% whenUsed fixedInstance block="large motors B+C" jres=icons.dualMotorLargePortBC
     export const largeBC = new SynchedMotorPair(Output.BC);
 
-    //% whenUsed fixedInstance block="A+D" jres=icons.portAD
+    //% whenUsed fixedInstance block="large motors A+D" jres=icons.dualMotorLargePortAD
     export const largeAD = new SynchedMotorPair(Output.AD);
 
-    //% whenUsed fixedInstance block="A+B" jres=icons.portAB
+    //% whenUsed fixedInstance block="large motors A+B" jres=icons.dualMotorLargePortAB
     export const largeAB = new SynchedMotorPair(Output.AB);
 
-    //% whenUsed fixedInstance block="C+D" jres=icons.portCD
+    //% whenUsed fixedInstance block="large motors C+D" jres=icons.dualMotorLargePortCD
     export const largeCD = new SynchedMotorPair(Output.CD);
 
     function reset(out: Output) {

libs/screen/targetoverrides.ts

@@ -22,6 +22,7 @@ namespace _screen_internal {
 namespace brick {
     const textOffset = 4;
     const lineOffset = 2;
+
     enum ScreenMode {
         None,
         ShowLines,
@@ -29,6 +30,14 @@ namespace brick {
         Ports,
         Custom
     }
+
+    export enum PrintStyle {
+        //% block="black on white"
+        BlackOnWhite,
+        //% block="white on black"
+        WhiteOnBlack
+    }
+
     let screenMode = ScreenMode.None;
     export let font = image.font8;
 
@@ -48,6 +57,48 @@ namespace brick {
         return ((screen.height - textOffset) / lineHeight()) >> 0
     }
 
+    /**
+     * Number of columns
+     */
+    //%
+    export function columnCount(): number {
+        return ((screen.width - textOffset) / font.charWidth) >> 0
+    }
+
+    /**
+     * Show text on the screen on a specific line and starting at a column and the selected print style.
+     * @param text the text to print on the screen, eg: "Hello world"
+     * @param line the line number to print the text at (starting at 1), eg: 1
+     * @param column the column number to print the text at (starting at 1), eg: 1
+     * @param printStyle print style black on white or white on black
+     */
+    //% blockId=screenPrintString block="show string $text|at line $line||column $column|style $printStyle"
+    //% weight=98 group="Screen" inlineInputMode="inline" blockGap=8
+    //% expandableArgumentMode="enabled"
+    //% help=brick/show-string
+    //% line.min=1 line.max=12
+    //% column.min=1 column.max=29
+    export function printString(text: string, line: number, column: number = 1, printStyle: PrintStyle = PrintStyle.BlackOnWhite) {
+        if (screenMode != ScreenMode.ShowLines) {
+            screenMode = ScreenMode.ShowLines;
+            screen.fill(0);
+        }
+
+        line = (line - 1) >> 0; // line indexing starts at 1
+        column = (column - 1) >> 0; // column indexing starts at 1
+        const nlines = lineCount();
+        const nColumn = columnCount();
+        if (line < 0 || line > nlines) return; // out of screen by line
+        if (column < 0 || column > nColumn) return; // out of screen by column
+        
+        const w = font.charWidth;
+        const h = lineHeight();
+        const x = textOffset + w * column;
+        const y = textOffset + h * line;
+        screen.fillRect(x, y, text.length * font.charWidth, h, (printStyle == PrintStyle.BlackOnWhite ? 0 : 255)); // clear background
+        screen.print(text, x, y, (printStyle == PrintStyle.BlackOnWhite ? 1 : 2), font);
+    }
+
     /**
      * Show text on the screen at a specific line.
      * @param text the text to print on the screen, eg: "Hello world"
@@ -56,7 +107,8 @@ namespace brick {
     //% blockId=screen_print block="show string %text|at line %line"
     //% weight=98 group="Screen" inlineInputMode="inline" blockGap=8
     //% help=brick/show-string
-    //% line.min=1 line.max=10
+    //% line.min=1 line.max=12
+    //% deprecated=true
     export function showString(text: string, line: number) {
         if (screenMode != ScreenMode.ShowLines) {
             screenMode = ScreenMode.ShowLines;
@@ -74,19 +126,56 @@ namespace brick {
         screen.print(text, textOffset, y, 1, font);
     }
 
+    /**
+     * Show a number on the screen on a specific line and starting at a column and the selected print style.
+     * @param value the numeric value
+     * @param line the line number to print the text at, eg: 1
+     * @param column the column number to print the text at (starting at 1), eg: 1
+     * @param printStyle print style black on white or white on black
+     */
+    //% blockId=screenPrintNumber block="show number $value|at line $line||column $column|style $printStyle"
+    //% weight=97 group="Screen" inlineInputMode="inline" blockGap=8
+    //% expandableArgumentMode="enabled"
+    //% help=brick/show-number
+    //% line.min=1 line.max=12
+    //% column.min=1 column.max=29
+    export function printNumber(value: number, line: number, column: number = 1, printStyle: PrintStyle = PrintStyle.BlackOnWhite) {
+        printString("" + value, line, column, printStyle);
+    }
+
     /**
      * Show a number on the screen
      * @param value the numeric value
      * @param line the line number to print the text at, eg: 1
      */
     //% blockId=screenShowNumber block="show number %name|at line %line"
-    //% weight=96 group="Screen" inlineInputMode="inline" blockGap=8
+    //% weight=97 group="Screen" inlineInputMode="inline" blockGap=8
     //% help=brick/show-number
-    //% line.min=1 line.max=10
+    //% line.min=1 line.max=12
+    //% deprecated=true
     export function showNumber(value: number, line: number) {
         showString("" + value, line);
     }
 
+    /**
+     * Show a name, value pair on the screen on a specific line and starting at a column and the selected print style.
+     * @param name the value name
+     * @param value the numeric value
+     * @param line the line number to print the text at, eg: 1
+     * @param column the column number to print the text at (starting at 1), eg: 1
+     * @param printStyle print style black on white or white on black
+     */
+    //% blockId=screenPrintValue block="show value $name|= $value|at line $line||column $column|style $printStyle"
+    //% weight=96 group="Screen" inlineInputMode="inline" blockGap=8
+    //% expandableArgumentMode="enabled"
+    //% help=brick/show-value
+    //% line.min=1 line.max=12
+    //% column.min=1 column.max=29
+    export function printValue(name: string, value: number, line: number, column: number = 1, printStyle: PrintStyle = PrintStyle.BlackOnWhite) {
+        value = Math.round(value * 1000) / 1000;
+        printString((name ? name + ": " : "") + value, line, column, printStyle);
+    }
+
     /**
      * Show a name, value pair on the screen
      * @param value the numeric value
@@ -95,7 +184,8 @@ namespace brick {
     //% blockId=screenShowValue block="show value %name|= %text|at line %line"
     //% weight=96 group="Screen" inlineInputMode="inline" blockGap=8
     //% help=brick/show-value
-    //% line.min=1 line.max=10
+    //% line.min=1 line.max=12
+    //% deprecated=true
     export function showValue(name: string, value: number, line: number) {
         value = Math.round(value * 1000) / 1000;
         showString((name ? name + ": " : "") + value, line);
@@ -123,11 +213,11 @@ namespace brick {
     */
     //% blockId=brickShowPorts block="show ports"
     //% help=brick/show-ports blockGap=8
-    //% weight=10 group="Screen"
+    //% weight=95 group="Screen"
     export function showPorts() {
         if (screenMode == ScreenMode.Ports) return;
-
         screenMode = ScreenMode.Ports;
+
         renderPorts();
         control.runInParallel(function () {
             while (screenMode == ScreenMode.Ports) {
@@ -146,11 +236,14 @@ namespace brick {
 
         for (let i = 0; i < 4; ++i) {
             const x = i * col + 2;
-            screen.print("ABCD"[i], x, 1 * lineHeight8, 1, image.font8)
-            screen.print((i + 1).toString(), x, h - lineHeight8, 1, image.font8)
+            if (screenMode != ScreenMode.Ports) return;
+            screen.print("ABCD"[i], x, 1 * lineHeight8, 1, image.font8);
+            screen.print((i + 1).toString(), x, h - lineHeight8, 1, image.font8);
         }
+
+        if (screenMode != ScreenMode.Ports) return;
         screen.drawLine(0, 5 * lineHeight8, screen.width, 5 * lineHeight8, 1);
-        screen.drawLine(0, h - 5 * lineHeight8, screen.width, h - 5 * lineHeight8, 1)
+        screen.drawLine(0, h - 5 * lineHeight8, screen.width, h - 5 * lineHeight8, 1);
 
         function scale(x: number) {
             if (Math.abs(x) >= 5000) {
@@ -167,8 +260,9 @@ namespace brick {
             const data = datas[i];
             const x = i * col + 2;
             if (!data.actualSpeed && !data.count) continue;
-            screen.print(`${scale(data.actualSpeed)}%`, x, 3 * lineHeight8, 1, image.font8)
-            screen.print(`${scale(data.count)}>`, x, 4 * lineHeight8, 1, image.font8)
+            if (screenMode != ScreenMode.Ports) return;
+            screen.print(`${scale(data.actualSpeed)}%`, x, 3 * lineHeight8, 1, image.font8);
+            screen.print(`${scale(data.count)}>`, x, 4 * lineHeight8, 1, image.font8);
         }
 
         // sensors
@@ -177,16 +271,16 @@ namespace brick {
             const si = sis[i];
             const x = (si.port() - 1) * col + 2;
             const inf = si._info();
-            if (inf)
-                screen.print(inf, x, h - 2 * lineHeight8, 1, inf.length > 4 ? image.font5 : image.font8);
+            if (screenMode != ScreenMode.Ports) return;
+            if (inf) screen.print(inf, x, h - 2 * lineHeight8, 1, inf.length > 4 ? image.font5 : image.font8);
         }
     }
 
     export function showBoot() {
         // pulse green, play startup sound, turn off light
         brick.setStatusLight(StatusLight.GreenPulse);
-        // We pause for 100ms to give time to read sensor values, so they work in on_start block
-        pause(400)
+        // We pause to give time to read sensor values, so they work in on_start block
+        pause(400); // It turns out that this time is not enough for the simulator to display the LED change
         // and we're ready
         brick.setStatusLight(StatusLight.Off);
         // always show port by default if no UI is set
@@ -210,11 +304,33 @@ namespace brick {
         return image;
     }
 
+    /**
+     * Clear on the screen at a specific line.
+     * @param line the line number to clear at (starting at 1), eg: 1
+     */
+    //% blockId=clearLine block="clear line $line"
+    //% weight=94 group="Screen" inlineInputMode="inline" blockGap=8
+    //% line.min=1 line.max=12
+    export function clearLine(line: number) {
+        if (screenMode != ScreenMode.ShowLines) {
+            screenMode = ScreenMode.ShowLines;
+            screen.fill(0);
+        }
+
+        line = (line - 1) >> 0; // line indexing starts at 1
+        const nlines = lineCount();
+        if (line < 0 || line > nlines) return; // out of screen by line
+
+        const h = lineHeight();
+        const y = textOffset + h * line;
+        screen.fillRect(0, y, screen.width, h, 0); // clear background
+    }
+
     /**
      * Clear the screen
      */
     //% blockId=screen_clear_screen block="clear screen"
-    //% weight=90 group="Screen"
+    //% weight=93 group="Screen"
     //% help=brick/clear-screen weight=1
     export function clearScreen() {
         screen.fill(0)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "1.4.25",
+  "version": "1.4.32",
   "description": "LEGO MINDSTORMS EV3 for Microsoft MakeCode",
   "private": false,
   "keywords": [
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "pxt-common-packages": "9.2.7",
-    "pxt-core": "7.2.16"
+    "pxt-core": "7.2.27"
   },
   "scripts": {
     "test": "node node_modules/pxt-core/built/pxt.js travis"

pxtarget.json

@@ -107,8 +107,10 @@
         "driveDisplayName": "EV3",
         "boardName": "LEGO® MINDSTORMS® Education EV3",
         "copyrightText": "LEGO, the LEGO logo, MINDSTORMS and the MINDSTORMS EV3 logo are trademarks and/ or copyrights of the LEGO Group. ©2018 The LEGO Group. All rights reserved.",
-        "crowdinProject": "kindscript",
+        "crowdinProject": "makecode",
         "selectLanguage": true,
+        "blocksCollapsing": true,
+        "highContrast": true,
         "greenScreen": true,
         "availableLocales": [
             "en",
@@ -118,7 +120,6 @@
             "zh-CN",
             "fr"
         ],
-        "highContrast": true,
         "lightToc": true,
         "docMenu": [{
                 "name": "Support",
@@ -159,7 +160,10 @@
         "extendEditor": true,
         "extendFieldEditors": true,
         "scriptManager": true,
+        "debugger": true,
+        "errorList": true,
         "importExtensionFiles": true,
+        "addNewTypeScriptFile": true,
         "experiments": [
             "python",
             "alwaysGithubItemBlocks"
@@ -207,4 +211,4 @@
     },
     "ignoreDocsErrors": true,
     "uploadDocs": true
-}
+}

sim/state/color.ts

@@ -21,7 +21,7 @@ namespace pxsim {
     export class ColorSensorNode extends UartSensorNode {
         id = NodeType.ColorSensor;
 
-        private color: number = 50;
+        private color: number = 0;
 
         constructor(port: number) {
             super(port);
@@ -40,5 +40,13 @@ namespace pxsim {
         getValue() {
             return this.color;
         }
+
+        setMode(mode: number) {
+            this.mode = mode;
+            if (this.mode == ColorSensorMode.RefRaw) this.color = 512; 
+            else this.color = 50;
+            this.changed = true;
+            this.modeChanged = true;
+        }
     }
 }

sim/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es5",
+        "target": "es2017",
         "noImplicitAny": true,
         "noImplicitReturns": true,
         "declaration": true,
@@ -8,8 +8,8 @@
         "rootDir": ".",
         "newLine": "LF",
         "sourceMap": false,
-        "lib": ["dom", "dom.iterable", "scripthost", "es6"],
+        "lib": ["dom", "dom.iterable", "scripthost", "es2017"],
         "types": [],
         "typeRoots": ["../node_modules/@types"]
     }
-}
+}

sim/visuals/board.ts

@@ -241,6 +241,8 @@ namespace pxsim.visuals {
                         view = new ColorGridControl(this.element, this.defs, state, port);
                     } else if (state.getMode() == ColorSensorMode.Reflected) {
                         view = new ColorWheelControl(this.element, this.defs, state, port);
+                    } else if (state.getMode() == ColorSensorMode.RefRaw) {
+                        view = new ColorWheelControl(this.element, this.defs, state, port);
                     } else if (state.getMode() == ColorSensorMode.Ambient) {
                         view = new ColorWheelControl(this.element, this.defs, state, port);
                     }

sim/visuals/controls/colorGrid.ts

@@ -5,8 +5,8 @@ namespace pxsim.visuals {
     export class ColorGridControl extends ControlView<ColorSensorNode> {
         private group: SVGGElement;
 
-        private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey', 'white'];
-        private static colorValue = [5, 4, 2, 3, 1, 7, 6];
+        private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'brown', 'white', 'none'];
+        private static colorValue = [5, 4, 2, 3, 1, 7, 6, 0];
 
         private colorDivs: Element[] = [];
 
@@ -15,7 +15,7 @@ namespace pxsim.visuals {
             this.group.setAttribute("transform", `translate(2, 2.5) scale(0.6)`)
 
             const colors = ['#f12a21', '#ffd01b', '#006db3', '#00934b', '#000', '#6c2d00'];
-            const colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey'];
+            const colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'brown'];
 
             let cy = -4;
             for (let c = 0; c < colorIds.length; c++) {
@@ -33,12 +33,19 @@ namespace pxsim.visuals {
             }
 
             const whiteCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'white-cirlce-wrapper' });
-            const circle = pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-white', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
-            this.colorDivs.push(circle);
-            pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: none;stroke: #94989b;stroke-width: 0.1px` });
+            const noneCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'nothing-circle-wrapper' });
+            const whiteCircle = pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-white', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
+            const noneCircle = pxsim.svg.child(noneCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-none', 'cx': 7.5, 'cy': '16', 'r': '2', 'style': `fill: #fff; fill-opacity: 0%;` });
+            this.colorDivs.push(whiteCircle);
+            this.colorDivs.push(noneCircle);
+            pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: none; stroke: #94989b; stroke-width: 0.1px` });
+            pxsim.svg.child(noneCircleWrapper, "circle", { 'cx': 7.5, 'cy': '16', 'r': '2', 'style': `fill: none; stroke: #94989b; stroke-width: 0.1px` });
             pointerEvents.down.forEach(evid => whiteCircleWrapper.addEventListener(evid, ev => {
                 this.setColor(6);
             }));
+            pointerEvents.down.forEach(evid => noneCircleWrapper.addEventListener(evid, ev => {
+                this.setColor(0);
+            }));
             return this.group;
         }
 

sim/visuals/controls/colorWheel.ts

@@ -26,8 +26,12 @@ namespace pxsim.visuals {
             return 131;
         }
 
-        private getMaxValue() {
-            return 100;
+        private getMaxValue(state: ColorSensorMode) {
+            return (state == ColorSensorMode.RefRaw ? 1023 : 100);
+        }
+
+        private mapValue(x: number, inMin: number, inMax: number, outMin: number, outMax: number) {
+            return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
         }
 
         updateState() {
@@ -35,10 +39,12 @@ namespace pxsim.visuals {
                 return;
             }
             const node = this.state;
-            const percentage = node.getValue();
-            const inversePercentage = this.getMaxValue() - percentage;
-            svg.setGradientValue(this.colorGradient, inversePercentage + "%");
-            this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}%`;
+            const value = node.getValue();
+            let inverseValue = this.getMaxValue(node.getMode()) - value;
+            if (node.getMode() == ColorSensorMode.RefRaw) inverseValue = this.mapValue(inverseValue, 0, 1023, 0, 100);
+            svg.setGradientValue(this.colorGradient, inverseValue + "%");
+            this.reporter.textContent = `${parseFloat((value).toString()).toFixed(0)}`;
+            if (node.getMode() != ColorSensorMode.RefRaw) this.reporter.textContent += `%`;
         }
 
         updateColorLevel(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
@@ -47,7 +53,7 @@ namespace pxsim.visuals {
             const height = bBox.height;
             let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height));
             const state = this.state;
-            state.setColor(t * this.getMaxValue());
+            state.setColor(t * this.getMaxValue(state.getMode()));
         }
 
         getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {

sim/visuals/nodes/colorSensorView.ts

@@ -29,6 +29,7 @@ namespace pxsim.visuals {
             switch (mode) {
                 case ColorSensorMode.Colors: this.updateSensorLightVisual('#0062DD'); return; // blue
                 case ColorSensorMode.Reflected: this.updateSensorLightVisual('#F86262'); return; // red
+                case ColorSensorMode.RefRaw: this.updateSensorLightVisual('#F86262'); return; // red
                 case ColorSensorMode.Ambient: this.updateSensorLightVisual('#67C3E2'); return; // light blue
             }
             this.updateSensorLightVisual('#ffffff');

theme/style.less

@@ -92,6 +92,11 @@
     color: white;
 }
 
+/* active toggle */
+.ui.item.editor-menuitem .active~.item.toggle {
+    background: @editorToggleColor!important;
+}
+
 .menubar .ui.item.editor-menuitem .item.toggle {
     height: 45px;
 }