0.0.85

* avoid atob directly

* prevent port names to be selected

* updated pxt

editor/deploy.ts

@@ -77,7 +77,7 @@ export function deployCoreAsync(resp: pxtc.CompileResult, isCli = false) {
     let rbfBIN = pxt.U.fromHex(rbfHex)
     pxt.HF2.write16(rbfBIN, 4, rbfBIN.length)
 
-    let origElfUF2 = UF2.parseFile(pxt.U.stringToUint8Array(atob(resp.outfiles[pxt.outputName()])))
+    let origElfUF2 = UF2.parseFile(pxt.U.stringToUint8Array(ts.pxtc.decodeBase64(resp.outfiles[pxt.outputName()])))
 
     let mkFile = (ext: string, data: Uint8Array = null) => {
         let f = UF2.newBlockFile()

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.0.80",
+  "version": "0.0.85",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-ev3",
-  "version": "0.0.80",
+  "version": "0.0.85",
   "description": "LEGO Mindstorms EV3 for Microsoft MakeCode",
   "private": true,
   "keywords": [
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "pxt-common-packages": "0.17.13",
-    "pxt-core": "3.1.1"
+    "pxt-core": "3.2.1"
   },
   "scripts": {
     "test": "node node_modules/pxt-core/built/pxt.js travis"

sim/visuals/assets/EV3.svg

@@ -17,17 +17,17 @@
       <stop offset="0.52" stop-color="#6a6a6a"/>
       <stop offset="1" stop-color="#6a6a6a"/>
     </linearGradient>
-    <linearGradient id="linear-gradient-green" x1="-382.07" y1="493.36" x2="-382.07" y2="494.25" gradientTransform="matrix(65.53, 0, 0, -48.84, 25091.11, 24228.69)" gradientUnits="userSpaceOnUse">
+    <linearGradient id="linear-gradient-green" x1="0" y1="0" x2="145" y2="48" gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="#6a6a6a"/>
       <stop offset="0.52" stop-color="#8CE300"/>
       <stop offset="1" stop-color="#6a6a6a"/>
     </linearGradient>
-    <linearGradient id="linear-gradient-red" x1="-382.07" y1="493.36" x2="-382.07" y2="494.25" gradientTransform="matrix(65.53, 0, 0, -48.84, 25091.11, 24228.69)" gradientUnits="userSpaceOnUse">
+    <linearGradient id="linear-gradient-red" x1="0" y1="0" x2="145" y2="48" gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="#6a6a6a"/>
       <stop offset="0.52" stop-color="#D02E26"/>
       <stop offset="1" stop-color="#6a6a6a"/>
     </linearGradient>
-    <linearGradient id="linear-gradient-orange" x1="-382.07" y1="493.36" x2="-382.07" y2="494.25" gradientTransform="matrix(65.53, 0, 0, -48.84, 25091.11, 24228.69)" gradientUnits="userSpaceOnUse">
+    <linearGradient id="linear-gradient-orange" x1="0" y1="0" x2="145" y2="48" gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="#6a6a6a"/>
       <stop offset="0.52" stop-color="#F8D039"/>
       <stop offset="1" stop-color="#6a6a6a"/>

sim/visuals/assets/EV3svg.ts

@@ -1,6 +1,7 @@
 
 namespace pxsim.visuals {
-  export const EV3_SVG = `<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 110.73 170.04">
+  export const EV3_SVG = `
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 110.73 170.04">
   <defs>
     <linearGradient id="linear-gradient" x1="-374.89" y1="432.9" x2="-374.89" y2="432.82" gradientTransform="matrix(110.73, 0, 0, -106.94, 41567.45, 46425.3)" gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="#f1f1f1"/>
@@ -19,17 +20,17 @@ namespace pxsim.visuals {
       <stop offset="0.52" stop-color="#6a6a6a"/>
       <stop offset="1" stop-color="#6a6a6a"/>
     </linearGradient>
-    <linearGradient id="linear-gradient-green" x1="-382.07" y1="493.36" x2="-382.07" y2="494.25" gradientTransform="matrix(65.53, 0, 0, -48.84, 25091.11, 24228.69)" gradientUnits="userSpaceOnUse">
+    <linearGradient id="linear-gradient-green" x1="0" y1="0" x2="145" y2="48" gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="#6a6a6a"/>
       <stop offset="0.52" stop-color="#8CE300"/>
       <stop offset="1" stop-color="#6a6a6a"/>
     </linearGradient>
-    <linearGradient id="linear-gradient-red" x1="-382.07" y1="493.36" x2="-382.07" y2="494.25" gradientTransform="matrix(65.53, 0, 0, -48.84, 25091.11, 24228.69)" gradientUnits="userSpaceOnUse">
+    <linearGradient id="linear-gradient-red" x1="0" y1="0" x2="145" y2="48" gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="#6a6a6a"/>
       <stop offset="0.52" stop-color="#D02E26"/>
       <stop offset="1" stop-color="#6a6a6a"/>
     </linearGradient>
-    <linearGradient id="linear-gradient-orange" x1="-382.07" y1="493.36" x2="-382.07" y2="494.25" gradientTransform="matrix(65.53, 0, 0, -48.84, 25091.11, 24228.69)" gradientUnits="userSpaceOnUse">
+    <linearGradient id="linear-gradient-orange" x1="0" y1="0" x2="145" y2="48" gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="#6a6a6a"/>
       <stop offset="0.52" stop-color="#F8D039"/>
       <stop offset="1" stop-color="#6a6a6a"/>
@@ -104,5 +105,6 @@ namespace pxsim.visuals {
       <path id="ev3_e" data-name="ev3 e" d="M19.39,156.1a.34.34,0,0,1,.38.3v1.17a.33.33,0,0,1-.38.3H14.34c-.11,0-.2.06-.2.14h0v.82h0c0,.08.09.14.2.14h5.05a.33.33,0,0,1,.38.3v1.15a.33.33,0,0,1-.35.3H12.67a.35.35,0,0,1-.38-.3v-6.89a.34.34,0,0,1,.38-.3h6.75a.31.31,0,0,1,.35.28v1.17a.31.31,0,0,1-.33.3H14.36c-.11,0-.22,0-.22.13V156c0,.08.09.14.19.14Z" transform="translate(0 0)" style="fill: #f1f1f1"/>
     </g>
   </g>
-</svg>`;
+</svg>
+`;
 }

sim/visuals/assets/Portsvg.ts

@@ -6,7 +6,7 @@ namespace pxsim.visuals {
     <path id="port_2" data-name="port 2" d="M4.48,0h50V58.93h-50Z" transform="translate(-4.48)" style="fill: #eaeaea"/>
     <path id="port_1" data-name="port 1" d="M9.74,46.49V18.66H26.85V11.75h4.72V2.59H44.49v8.82h5.06V46.49h-8v7.43H38.9V46.41h-2v7.5H34.71v-7.5H32.55v7.5h-2.1v-7.5H28.6v7.5H26.5v-7.5H24.68v7.5H22.22v-7.5H20.54v7.5H18V46.46Z" transform="translate(-4.48)" style="fill: #a8aaa8"/>
     <g id="text10060" style="isolation: isolate">
-      <text id="port_text" transform="translate(22.21 40.2)" style="isolation: isolate;font-size: 16px;fill: white;font-family: ArialMT, Arial">B</text>
+      <text id="port_text" class="user-select-none" transform="translate(22.21 40.2)" style="isolation: isolate;font-size: 16px;fill: white;font-family: ArialMT, Arial">B</text>
     </g>
   </g>
 </svg>`;

sim/visuals/board.ts

@@ -15,6 +15,12 @@ namespace pxsim.visuals {
             -webkit-filter: grayscale(1);
             filter: grayscale(1);
         }
+        .user-select-none, .sim-button {
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;                        
+        }
         .sim-button {
             cursor: pointer;
         }

sim/visuals/controls/colorGrid.ts

@@ -19,18 +19,18 @@ namespace pxsim.visuals {
                 if (c % 2 == 0) cy += 5;
                 if (colorIds[c]) {
                     const circle = pxsim.svg.child(this.group, "circle", { 'class': 'sim-color-grid-circle', 'cx': cx, 'cy': cy, 'r': '2', 'style': `fill: ${colors[c]}` });
-                    circle.addEventListener(pointerEvents.down, ev => {
+                    pointerEvents.down.forEach(evid => circle.addEventListener(evid, ev => {
                         this.setColor(colorValue[c]);
-                    })
+                    }));
                 }
             }
 
             const whiteCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'white-cirlce-wrapper' });
             pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle', 'cx': 2.2, 'cy': '11', 'r': '2', 'style': `fill: #fff` });
             pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '11', 'r': '2', 'style': `fill: none;stroke: #94989b;stroke-width: 0.1px` });
-            whiteCircleWrapper.addEventListener(pointerEvents.down, ev => {
+            pointerEvents.down.forEach(evid => whiteCircleWrapper.addEventListener(evid, ev => {
                 this.setColor(6);
-            })
+            }));
             return this.group;
         }
 

sim/visuals/nodes/brickView.ts

@@ -47,14 +47,17 @@ namespace pxsim.visuals {
         }
 
         private lastLightPattern: number = -1;
-        private lastLightAnimationId: any;
+        private lastLightAnimationId: any = undefined;
         private updateLight() {
             let state = ev3board().getBrickNode().lightState;
 
             const lightPattern = state.lightPattern;
             if (lightPattern == this.lastLightPattern) return;
             this.lastLightPattern = lightPattern;
-            if (this.lastLightAnimationId) cancelAnimationFrame(this.lastLightAnimationId);
+            if (this.lastLightAnimationId) {
+                cancelAnimationFrame(this.lastLightAnimationId);
+                delete this.lastLightAnimationId;
+            }
             switch (lightPattern) {
                 case 0:  // LED_BLACK
                     this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`));
@@ -94,6 +97,7 @@ namespace pxsim.visuals {
         }
 
         private flashLightAnimation(id: string) {
+            const pattern = this.lastLightPattern;
             let fps = 3;
             let now;
             let then = Date.now();
@@ -101,8 +105,9 @@ namespace pxsim.visuals {
             let delta;
             let that = this;
             function draw() {
+                if (that.lastLightPattern != pattern) return;
                 that.lastLightAnimationId = requestAnimationFrame(draw);
-                now = Date.now();
+                now = pxsim.U.now();
                 delta = now - then;
                 if (delta > interval) {
                     then = now - (delta % interval);
@@ -124,6 +129,7 @@ namespace pxsim.visuals {
 
 
         private pulseLightAnimation(id: string) {
+            const pattern = this.lastLightPattern;
             let fps = 8;
             let now;
             let then = Date.now();
@@ -131,8 +137,9 @@ namespace pxsim.visuals {
             let delta;
             let that = this;
             function draw() {
+                if (that.lastLightPattern != pattern) return;
                 that.lastLightAnimationId = requestAnimationFrame(draw);
-                now = Date.now();
+                now = pxsim.U.now();
                 delta = now - then;
                 if (delta > interval) {
                     // update time stuffs
@@ -167,10 +174,10 @@ namespace pxsim.visuals {
             this.buttons.forEach((btn, index) => {
                 let button = stateButtons[index];
 
-                btn.addEventListener(pointerEvents.down, ev => {
+                pointerEvents.down.forEach(evid => btn.addEventListener(evid, ev => {
                     button.setPressed(true);
                     svg.fill(this.buttons[index], this.theme.buttonDown);
-                })
+                }));
                 btn.addEventListener(pointerEvents.leave, ev => {
                     button.setPressed(false);
                     svg.fill(this.buttons[index], this.theme.buttonUps[index]);

sim/visuals/nodes/moduleView.ts

@@ -18,7 +18,7 @@ namespace pxsim.visuals {
                 return `id="${this.normalizeId(id)}"`;
             });
             xml = xml.replace(/url\(#(.*?)\)/g, (m: string, id: string) => {
-                return `url(#${this.normalizeId(id)}`;
+                return `url(#${this.normalizeId(id)})`;
             });
             xml = xml.replace(/xlink:href=\"#(.*?)\"/g, (m: string, id: string) => {
                 return `xlink:href="#${this.normalizeId(id)}"`;

sim/visuals/nodes/touchSensorView.ts

@@ -38,10 +38,10 @@ namespace pxsim.visuals {
             this.content.style.cursor = "pointer";
             const btn = this.content;
             const state = ev3board().getSensor(this.port, DAL.DEVICE_TYPE_TOUCH) as TouchSensorNode;
-            btn.addEventListener(pointerEvents.down, ev => {
+            pointerEvents.down.forEach(evid => btn.addEventListener(evid, ev => {
                 this.setPressed(true);
                 state.setPressed(true);
-            })
+            }))
             btn.addEventListener(pointerEvents.leave, ev => {
                 this.setPressed(false);
                 state.setPressed(false);