Market Panorame Implemented

Animation.js

@@ -144,12 +144,20 @@ function newAnimation () {
         browserCanvas.height = 1
       }
 
-      /* Media Recording */
+      /* Video Recording */
       videoRecorder.physics()
-      if (areWeRecording === true) {
+      if (ARE_WE_RECORDING_A_VIDEO === true) {
         videoRecorder.recordCanvas()
       }
 
+      /* Panorama Recording */
+      if (ARE_WE_RECORDING_A_MARKET_PANORAMA === true) {
+        if (PANORAMA_WAS_PANNED === true) {
+          addToMarketPanorama()
+          PANORAMA_WAS_PANNED = false
+        }
+      }
+
       /* We request the next frame to be drawn, and stablishing a loop */
 
       /* Use this code for full animation speed. */

Canvas.js

@@ -213,30 +213,35 @@ function newCanvas () {
     if ((event.ctrlKey === true || event.metaKey === true)) {
       let constructorParams
       switch (event.keyCode) {
+        case 118: { //  F7
+          downloadPanorama('Superalgos.Market.Panorama')
+          return
+          break
+        }
         case 119: { //  F8
-          downloadCanvas('Superalgos.image.capture')
+          downloadCanvas('Superalgos.Image.Capture', browserCanvas)
           return
           break
         }
         case 120: { //  F9
-          constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 8, name: 'Superalgos.video.capture'}
+          constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 8, name: 'Superalgos.Video.Capture'}
           break
         }
         case 121: { //  F10
-          constructorParams = { format: 'webm', framerate: 8, name: 'Superalgos.video.capture' }
+          constructorParams = { format: 'webm', framerate: 8, name: 'Superalgos.Video.Capture' }
           break
         }
         default: return
       }
 
-      if (areWeRecording === false) {
+      if (ARE_WE_RECORDING_A_VIDEO === false) {
         console.log('RECORDING', constructorParams.format)
         mediaRecorder = new CCapture(constructorParams)
         mediaRecorder.start()
-        areWeRecording = true
+        ARE_WE_RECORDING_A_VIDEO = true
       } else {
         console.log('SAVING', constructorParams.format)
-        areWeRecording = false
+        ARE_WE_RECORDING_A_VIDEO = false
         mediaRecorder.stop()
         mediaRecorder.save()
       }

ChartingSpace/EdgeEditor.js

@@ -195,9 +195,18 @@ function newEdgeEditor () {
     }
 
     if (event.shiftKey === false && event.ctrlKey === false && event.code === 'ArrowRight') {
-      onDragStarted(event)
-      thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP
-      whatHappened = 'left or right arrow key pressed'
+      if (ARE_WE_RECORDING_A_MARKET_PANORAMA === true) {
+        if (PANORAMA_WAS_PANNED === false) {
+          PANORAMA_WAS_PANNED = true
+          onDragStarted(event)
+          thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP * 2
+          whatHappened = 'left or right arrow key pressed'
+        }
+      } else {
+        onDragStarted(event)
+        thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP
+        whatHappened = 'left or right arrow key pressed'
+      }
       return
     }
 

DesignSpace/Workspace/Workspace.js

@@ -198,7 +198,9 @@ function newWorkspace () {
         if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
           window.localStorage.setItem('Last Used Workspace', workspace.name)
           window.localStorage.setItem('Session Timestamp', sessionTimestamp)
-          canvas.cockpitSpace.setStatus(workspace.name + ' Saved.', 50, canvas.cockpitSpace.statusTypes.ALL_GOOD)
+          if (ARE_WE_RECORDING_A_MARKET_PANORAMA === false) {
+            canvas.cockpitSpace.setStatus(workspace.name + ' Saved.', 50, canvas.cockpitSpace.statusTypes.ALL_GOOD)
+          }
         } else {
           canvas.cockpitSpace.setStatus('Could not save the Workspace at the Backend. Please check the Backend Console for more information.', 150, canvas.cockpitSpace.statusTypes.WARNING)
         }

Globals.js

@@ -222,9 +222,13 @@ const TIME_MACHINE_WIDTH = 8;
 const TIME_MACHINE_HEIGHT = 8;
 
 let mediaRecorder // to downloadText canvas animation as a mediaRecorder
-let areWeRecording = false
+let marketPanoramaCanvas 
+let ARE_WE_RECORDING_A_VIDEO = false
+let ARE_WE_RECORDING_A_MARKET_PANORAMA = false
+let PANORAMA_WAS_PANNED = false
+let CURRENT_PANORAMA_POSITION = 0
 
-let canWeDraw = false // This global variable regulates when spaces can or can not draw their contents. 
+let canWeDraw = false // This global variable regulates when spaces can or can not draw their contents.
 
 function toRadians(angle) {
     return angle * (Math.PI / 180);

Spaces/TopSpace.js

@@ -66,7 +66,7 @@ function newTopSpace () {
     let opacity = 1
     browserCanvasContext.beginPath()
     browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
-    if (areWeRecording === true) {
+    if (ARE_WE_RECORDING_A_VIDEO === true) {
       browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
     } else {
       browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'

Utilities.js

@@ -108,8 +108,8 @@ function downloadText (filename, text) {
   document.body.removeChild(element)
 }
 
-function downloadCanvas (filename) {
-  let data = browserCanvas.toDataURL('image/png', 1)
+function downloadCanvas (filename, canvasToUse) {
+  let data = canvasToUse.toDataURL('image/png', 1)
   /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
   data = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream')
 
@@ -125,6 +125,37 @@ function downloadCanvas (filename) {
   document.body.removeChild(element)
 };
 
+function downloadPanorama (filename) {
+  let INITIAL_WIDTH = 800
+  let FINAL_WIDTH = browserCanvas.width - INITIAL_WIDTH
+
+  if (ARE_WE_RECORDING_A_MARKET_PANORAMA === false) {
+    /* We start recording the panorame. */
+    ARE_WE_RECORDING_A_MARKET_PANORAMA = true
+    marketPanoramaCanvas = document.createElement('canvas')
+    marketPanoramaCanvas.width = INITIAL_WIDTH * 50
+    marketPanoramaCanvas.height = browserCanvas.height
+    marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, 0, 0, INITIAL_WIDTH, browserCanvas.height, 0, 0, INITIAL_WIDTH, browserCanvas.height)
+    CURRENT_PANORAMA_POSITION = INITIAL_WIDTH
+  } else {
+    /* We stop recording and download the resulting image. */
+    ARE_WE_RECORDING_A_MARKET_PANORAMA = false
+    marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, browserCanvas.width - FINAL_WIDTH, 0, FINAL_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, FINAL_WIDTH, browserCanvas.height)
+    let finalResultCanvas = document.createElement('canvas')
+    finalResultCanvas.width = CURRENT_PANORAMA_POSITION + FINAL_WIDTH
+    finalResultCanvas.height = browserCanvas.height
+    finalResultCanvas.getContext('2d').drawImage(marketPanoramaCanvas, 0, 0, finalResultCanvas.width, browserCanvas.height, 0, 0, finalResultCanvas.width, browserCanvas.height)
+    downloadCanvas(filename, finalResultCanvas)
+  }
+}
+
+function addToMarketPanorama () {
+  let SECTION_WIDTH = 80 * 2
+  let INITIAL_POSITION = 800 - SECTION_WIDTH
+  marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, INITIAL_POSITION, 0, SECTION_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, SECTION_WIDTH, browserCanvas.height)
+  CURRENT_PANORAMA_POSITION = CURRENT_PANORAMA_POSITION + SECTION_WIDTH
+}
+
 function transformThisPoint (point, container) {
     /* We make the point relative to the current frame */