fixing button down issues on touch/mouse (#294)

package.json

@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "pxt-common-packages": "0.17.13",
-    "pxt-core": "3.1.1"
+    "pxt-core": "3.1.2"
   },
   "scripts": {
     "test": "node node_modules/pxt-core/built/pxt.js travis"

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

@@ -174,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/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);