Gifs for Tutorial

Canvas.js

@@ -43,7 +43,7 @@ function newCanvas() {
         animation: undefined,
         mouse: undefined,
         shorcutNumbers: new Map(),
-        onKeyDown: onKeyDown, 
+        onKeyDown: onKeyDown,
         initialize: initialize,
         finalize: finalize
     }
@@ -216,12 +216,48 @@ function newCanvas() {
 
         browserCanvas.width = window.innerWidth
         browserCanvas.height = window.innerHeight - CURRENT_TOP_MARGIN
+        browserCanvas.style = "position:absolute; top:0px; left:0px; z-index:1"
     }
 
     function checkMediaRecording(event) {
         if ((event.ctrlKey === true || event.metaKey === true)) {
             let constructorParams
             switch (event.keyCode) {
+                case 113: { //  F2
+                    browserCanvas.width = 400 * 3
+                    browserCanvas.height = 580 * 3
+                    centerCanvar()
+                    return
+                    break
+                }
+                case 114: { //  F2
+                    browserCanvas.width = 400 * 2
+                    browserCanvas.height = 580 * 2
+                    centerCanvar()
+                    return
+                    break
+                }
+                case 115: { //  F3
+                    browserCanvas.width = 400 * 1.5
+                    browserCanvas.height = 580 * 1.5
+                    centerCanvar()
+                    return
+                    break
+                }
+                case 116: { //  F5
+                    browserCanvas.width = 400 * 1
+                    browserCanvas.height = 580 * 1
+                    centerCanvar()
+                    return
+                    break
+                }
+                case 117: { //  F6
+                    browserCanvas.width = window.innerWidth
+                    browserCanvas.height = window.innerHeight - CURRENT_TOP_MARGIN
+                    centerCanvar()
+                    return
+                    break
+                }
                 case 118: { //  F7
                     downloadPanorama('Superalgos.Market.Panorama')
                     return
@@ -255,6 +291,12 @@ function newCanvas() {
                 mediaRecorder.save()
             }
         }
+
+        function centerCanvar() {
+            let top = (window.innerHeight - browserCanvas.height) / 2
+            let left = (window.innerWidth - browserCanvas.width) / 2
+            browserCanvas.style = "position:absolute; top:"+ top + "px; left:"+ left + "px; z-index:1"
+        }
     }
 
     function onKeyUp(event) {

Spaces/TutorialSpace.js

@@ -234,7 +234,7 @@ function newTutorialSpace() {
             currentGifName = newGifName
             htmlGif.src = 'Images/Tutorial/Gifs/' + currentGifName + '.gif'
             htmlGif.width = "400"
-            //htmlGif.height = "100"
+            htmlGif.height = "580"
         }
 
         function checkImage() {
@@ -414,7 +414,7 @@ function newTutorialSpace() {
                                     changeNodeConfigCounter++
                                     if (changeNodeConfigCounter === 5) {
                                         let nodeConfig = JSON.parse(currentNode.payload.referenceParent.config)
-                                        for (const property in config.changeNodeConfigReferenceParent) {                                            
+                                        for (const property in config.changeNodeConfigReferenceParent) {
                                             nodeConfig[property] = config.changeNodeConfigReferenceParent[property]
                                         }
                                         currentNode.payload.referenceParent.config = JSON.stringify(nodeConfig)
@@ -533,7 +533,13 @@ function newTutorialSpace() {
             const MARGIN = 100
             const FORM_HEIGHT = 40
 
-            let nodeConfig = JSON.parse(currentNode.config)
+            let nodeConfig
+            try {
+                nodeConfig = JSON.parse(currentNode.config)
+            } catch (err) {
+                return
+            }
+
             switch (nodeConfig.position) {
                 case 'Left': {
                     tutorialPosition = {
@@ -972,7 +978,7 @@ function newTutorialSpace() {
         if (nodeConfig.title !== undefined && nodeConfig.title !== '') {
             html = html + '<div><h1 class="tutorial-font-large">' + nodeConfig.title + '</h1></div>'
         } else {
-            if (currentNode.name !== 'New ' + currentNode.type) {
+            if (currentNode.name !== 'New ' + currentNode.type && currentNode.name !== 'My ' + currentNode.type) {
                 html = html + '<div><h1 class="tutorial-font-large">' + currentNode.name + '</h1></div>'
             }
         }
@@ -984,7 +990,7 @@ function newTutorialSpace() {
             html = html + '<h2 class="tutorial-font-medium">' + nodeConfig.subTitle + '</h2>'
         }
         if (nodeConfig.gif !== undefined && nodeConfig.gif !== '') {
-            html = html + '<div id="tutorialGifDiv" width="400"/>'
+            html = html + '<div id="tutorialGifDiv" width="200" width="290"/>'
             newGifName = nodeConfig.gif
         }