Update simulator as per latest lego UI design for sensors. Fix full screen layout issues. (#554)

sim/visuals/nodes/colorSensorView.ts

@@ -5,6 +5,8 @@ namespace pxsim.visuals {
 
         private control: ColorGridControl;
 
+        private static sensor_hole_id = 'color_sensor_white_big';
+
         constructor(port: number) {
             super(COLOR_SENSOR_SVG, "color", NodeType.ColorSensor, port);
         }
@@ -19,7 +21,22 @@ namespace pxsim.visuals {
 
         public updateState() {
             super.updateState();
-            // TODO: show different color modes
+
+            const colorState = ev3board().getInputNodes()[this.port];
+            if (!colorState) return;
+            const mode = colorState.getMode();
+
+            switch (mode) {
+                case ColorSensorMode.Colors: this.updateSensorLightVisual('#0062DD'); return; // blue
+                case ColorSensorMode.Reflected: this.updateSensorLightVisual('#F86262'); return; // red
+                case ColorSensorMode.Ambient: this.updateSensorLightVisual('#67C3E2'); return; // light blue
+            }
+            this.updateSensorLightVisual('#ffffff');
+        }
+
+        private updateSensorLightVisual(color: string) {
+            const sensorHole = this.content.getElementById(this.normalizeId(ColorSensorView.sensor_hole_id)) as SVGCircleElement;
+            sensorHole.style.fill = color;
         }
     }
 }

sim/visuals/nodes/moduleView.ts

@@ -107,7 +107,7 @@ namespace pxsim.visuals {
         public attachEvents() {
         }
 
-        public resize(width: number, height: number) {
+        public resize(width: number, height: number, strict?: boolean) {
             super.resize(width, height);
             this.updateDimensions(width, height);
         }
@@ -120,6 +120,7 @@ namespace pxsim.visuals {
                 const newWidth = currentWidth / currentHeight * height;
                 this.content.setAttribute('width', `${width}`);
                 this.content.setAttribute('height', `${newHeight}`);
+                this.height = newHeight;
             }
         }
 
@@ -138,16 +139,22 @@ namespace pxsim.visuals {
 
         protected updateOpacity() {
             if (this.rendered) {
-                const opacity = this.selected ? 0.2 : 1;
+                const opacity = this.selected && this.fadeWhenSelected() ? 0.2 : 1;
                 if (this.hasClick() && this.opacity != opacity) {
                     this.opacity = opacity;
                     this.setOpacity(this.opacity);
+                }
+                if (this.hasClick()) {
                     if (this.selected) this.content.style.cursor = "";
                     else this.content.style.cursor = "pointer";
                 }
             }
         }
 
+        protected fadeWhenSelected() {
+            return true;
+        }
+
         protected setOpacity(opacity: number) {
             this.element.setAttribute("opacity", `${opacity}`);
         }

sim/visuals/nodes/sensorView.ts

@@ -6,14 +6,16 @@ namespace pxsim.visuals {
 
         constructor(xml: string, prefix: string, id: NodeType, port: NodeType) {
             super(xml, prefix, id, port);
+            // Shown by default
+            this.selected = true;
         }
 
-        public getSelected() {
-            return true;
-        }
-
-        public hasClose() {
+        protected fadeWhenSelected() {
             return false;
         }
+
+        public hasBackground() {
+            return true;
+        }
     }
 }