Clearing the React state on re-run (#21)

[PBI #28511] 

* Catching exceptions from the user's code execution to see errors

* Adding types validation for pixels color : allowing list and correcting hex assignment

* Adding verification on index access to match the device behavior

* Converting the appropriate API methods to private

* Updating private methods calls after merge with dev

* Keeping the simulator in the second pannel when hitting the open command

* Sending errors from the Python process to stderr instead of stdout

* Clearing the state on re-running

* Setting the default Red LED state to blanck

* Reformatting the SVG file instead of having one line

* Changing console.log types

src/extension.ts

@@ -10,7 +10,7 @@ function loadScript(context: vscode.ExtensionContext, path: string) {
 
 // Extension activation
 export function activate(context: vscode.ExtensionContext) {
-  console.log(
+  console.info(
     "Congratulations, your extension Adafruit_Simulator is now active!"
   );
 
@@ -26,7 +26,7 @@ export function activate(context: vscode.ExtensionContext) {
     "adafruit.openSimulator",
     () => {
       if (currentPanel) {
-        currentPanel.reveal(vscode.ViewColumn.One);
+        currentPanel.reveal(vscode.ViewColumn.Two);
       } else {
         currentPanel = vscode.window.createWebviewPanel(
           "adafruitSimulator",
@@ -62,7 +62,7 @@ export function activate(context: vscode.ExtensionContext) {
         return;
       }
 
-      console.log("Running user code");
+      console.info("Running user code");
       const activeTextEditor: vscode.TextEditor | undefined =
         vscode.window.activeTextEditor;
       let currentFileAbsPath: string = "";
@@ -79,6 +79,10 @@ export function activate(context: vscode.ExtensionContext) {
 
       // Create the Python process (after killing the one running if any)
       if (childProcess !== undefined) {
+        if (currentPanel) {
+          console.info("Sending clearing state command");
+          currentPanel.webview.postMessage({ command: "reset-state" });
+        }
         // TODO: We need to check the process was correctly killed
         childProcess.kill();
       }
@@ -99,7 +103,10 @@ export function activate(context: vscode.ExtensionContext) {
           dataFromTheProcess.split("\0").forEach(message => {
             if (currentPanel && message.length > 0 && message != oldState) {
               console.log("Process output = ", message);
-              currentPanel.webview.postMessage(JSON.parse(message));
+              currentPanel.webview.postMessage({
+                command: "set-state",
+                state: JSON.parse(message)
+              });
               oldState = message;
             }
           });
@@ -108,12 +115,12 @@ export function activate(context: vscode.ExtensionContext) {
 
       // Std error output
       childProcess.stderr.on("data", data => {
-        console.log(`Error from the Python process through stderr: ${data}`);
+        console.error(`Error from the Python process through stderr: ${data}`);
       });
 
       // When the process is done
       childProcess.on("end", (code: number) => {
-        console.log(`Command execution exited with code: ${code}`);
+        console.info(`Command execution exited with code: ${code}`);
       });
 
       if (messageListener !== undefined) {

src/view/components/Simulator.tsx

@@ -13,6 +13,26 @@ interface IMyProps {
   children?: any;
 }
 
+const DEFAULT_STATE: IState = {
+  brightness: 1.0,
+  button_a: false,
+  button_b: false,
+  pixels: [
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0]
+  ],
+
+  red_led: false
+};
+
 interface vscode {
   postMessage(message: any): void;
 }
@@ -27,25 +47,7 @@ const sendMessage = (state: any) => {
 class Simulator extends React.Component<any, IState> {
   constructor(props: IMyProps) {
     super(props);
-    this.state = {
-      brightness: 1.0,
-      button_a: false,
-      button_b: false,
-      pixels: [
-        [0, 0, 0],
-        [0, 0, 0],
-        [0, 0, 0],
-        [0, 0, 0],
-        [0, 0, 0],
-        [0, 0, 0],
-        [0, 0, 0],
-        [0, 0, 0],
-        [0, 0, 0],
-        [0, 0, 0]
-      ],
-
-      red_led: false
-    };
+    this.state = DEFAULT_STATE;
 
     this.handleClick = this.handleClick.bind(this);
     this.onMouseDown = this.onMouseDown.bind(this);
@@ -55,8 +57,20 @@ class Simulator extends React.Component<any, IState> {
 
   handleMessage = (event: any): void => {
     const message = event.data; // The JSON data our extension sent
-    console.log("change state:" + message);
-    this.setState(message);
+    switch (message.command) {
+      case "reset-state":
+        console.log("Clearing the state");
+        this.setState(DEFAULT_STATE);
+        break;
+      case "set-state":
+        console.log("Setting the state: " + JSON.stringify(message.state));
+        this.setState(message.state);
+        break;
+      default:
+        console.log("Invalid message received from the extension.");
+        this.setState(DEFAULT_STATE);
+        break;
+    }
   };
 
   componentDidMount() {