Zooming

Scales/TimeFrameScale.js

@@ -219,7 +219,7 @@ function newTimeFrameScale() {
 
     function onViewportZoomChanged(event) {
         if (event !== undefined) { // it is undefined when the level is just being animated.
-            if (event.shiftKey === false) { return } // with no shft key pressed, no automatic change in scale
+            if (event.shiftKey === false || event.shiftKey === undefined) { return } // with no shft key pressed, no automatic change in scale
             let currentTimeFrame = thisObject.timeFrame
             let timeFrame = recalculatePeriod(event.newLevel)
             if (timeFrame !== currentTimeFrame) {

Spaces/ChartingSpace.js

@@ -19,6 +19,7 @@ function newChartingSpace() {
         timeMachines: undefined,
         viewport: undefined,
         payload: undefined,
+        findTimeMachine: findTimeMachine,
         onKeyPressed: onKeyPressed,
         reset: reset,
         oneScreenUp: oneScreenUp,
@@ -295,6 +296,15 @@ function newChartingSpace() {
         }
     }
 
+    function findTimeMachine(node) {
+        for (let i = 0; i < thisObject.timeMachines.length; i++) {
+            let timeMachine = thisObject.timeMachines[i]
+            if (timeMachine.payload.node.id === node.id) {
+                return timeMachine
+            }
+        } 
+    }
+
     function syncWithDesigner() {
         if (thisObject.payload === undefined) { return }
         if (thisObject.payload.node === undefined) { return }

Spaces/TutorialSpace.js

@@ -54,6 +54,8 @@ function newTutorialSpace() {
     let lastExecutedAction = ''
     let actionCounter = 0
     let forcingFocus = false
+    let currentZoomStep = 0
+    let viewportCentered = false
 
     return thisObject
 
@@ -119,8 +121,45 @@ function newTutorialSpace() {
         checkDocumentation()
         checkSlider()
         checkReference()
+        checkViewportZoom()
+        checkViewportZoomAtCenter()
         return
 
+        function checkViewportZoom() {
+            if (currentNode === undefined) { return }
+            let config = JSON.parse(currentNode.config)
+            if (config.viewportZoom !== undefined) {
+                let totalZoomSteps = config.viewportZoom
+                let delta
+                if (totalZoomSteps > 0) {
+                    delta = 1
+                } else {
+                    delta = -1
+                }
+                currentZoomStep = currentZoomStep + delta
+                let event = {
+                    delta: delta
+                }
+                if (totalZoomSteps > 0) {
+                    if (currentZoomStep < totalZoomSteps) {
+                        canvas.chartingSpace.viewport.onMouseWheel(event)
+                    }
+                } else {
+                    if (currentZoomStep > totalZoomSteps) {
+                        canvas.chartingSpace.viewport.onMouseWheel(event)
+                    }
+                }
+            }
+        }
+
+        function checkViewportZoomAtCenter() {
+            if (currentNode === undefined) { return }
+            let config = JSON.parse(currentNode.config)
+            if (config.viewportZoomAtCenter !== undefined) {
+                canvas.chartingSpace.viewport.zoomAtCenter(config.viewportZoomAtCenter)
+            }
+        }
+
         function checkPressButton() {
             if (currentNode === undefined) { return }
             let config = JSON.parse(currentNode.config)
@@ -239,7 +278,6 @@ function newTutorialSpace() {
             If there is a reference parent defined, we will highlight it 
             and move the designer so that that node be at the center of the screen.
             */
-
             if (currentNode !== undefined) {
                 if (currentNode.payload !== undefined) {
                     if (currentNode.payload.referenceParent !== undefined) {
@@ -318,6 +356,17 @@ function newTutorialSpace() {
                                 } else {
                                     lastExecutedAction = ""
                                 }
+                                if (
+                                    config.viewportCenterReferenceParent === true
+                                ) {
+                                    if (currentNode.payload.referenceParent.type === 'Time Machine') {
+                                        let timeMachine = canvas.chartingSpace.findTimeMachine(currentNode.payload.referenceParent)
+                                        if (timeMachine !== undefined && viewportCentered === false) {
+                                            canvas.chartingSpace.viewport.displaceToContainer(timeMachine.container)
+                                            viewportCentered = true
+                                        }
+                                    }
+                                }
                             }
                         }
                     }
@@ -466,6 +515,7 @@ function newTutorialSpace() {
     }
 
     function resetAfterButtonPressed() {
+        resetViewport()
         resetActions()
         resetDocumentation()
     }
@@ -475,6 +525,11 @@ function newTutorialSpace() {
         actionCounter = 0
     }
 
+    function resetViewport() {
+        currentZoomStep = 0
+        viewportCentered = false
+    }
+
     function resetDocumentation() {
         currentDocumentationURL = ''
     }