Animation when a workspace is dropped

Canvas.js

@@ -133,8 +133,8 @@ function newCanvas () {
       animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw)
       animation.addCallBackFunction('ViewPort Animate', viewPort.animate)
       animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw)
+      animation.addCallBackFunction('Designer Space Draw', thisObject.designerSpace.draw)
       animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw)
-      animation.addCallBackFunction('Strategy Space Draw', thisObject.designerSpace.draw)
       animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw)
       animation.start()
     } catch (err) {

DesignerSpace/Workspace/Workspace.js

@@ -17,6 +17,7 @@ function newWorkspace () {
     stopAllRunningTasks: stopAllRunningTasks,
     onMenuItemClick: onMenuItemClick,
     physics: physics,
+    draw: draw,
     spawn: spawn,
     chainDetachNode: chainDetachNode,
     chainAttachNode: chainAttachNode,
@@ -59,6 +60,11 @@ function newWorkspace () {
 
   thisObject.nodeChildren = newNodeChildren()
 
+  let workingAtTask = 0
+  let circularProgressBar = newBusyProgressBar()
+  circularProgressBar.fitFunction = canvas.floatingSpace.fitIntoVisibleArea
+  let droppedNode
+
   return thisObject
 
   function finalize () {
@@ -66,6 +72,8 @@ function newWorkspace () {
     thisObject.container.finalize()
     thisObject.container = undefined
     thisObject.workspaceNode = undefined
+    circularProgressBar.finalize()
+    circularProgressBar = undefined
   }
 
   function initialize () {
@@ -112,6 +120,46 @@ function newWorkspace () {
 
     let textToSave = stringifyWorkspace()
     window.localStorage.setItem(CANVAS_APP_NAME + '.' + 'Workspace', textToSave)
+
+    if (workingAtTask > 0) {
+      circularProgressBar.physics()
+
+      switch (workingAtTask) {
+        case 1:
+          stopAllRunningTasks()
+          workingAtTask++
+          break
+        case 2:
+          functionLibraryNodeDeleter.deleteWorkspace(thisObject.workspaceNode, thisObject.workspaceNode.rootNodes)
+          workingAtTask++
+          break
+        case 3:
+          thisObject.workspaceNode = droppedNode
+          droppedNode = undefined
+          workingAtTask++
+          break
+        case 4:
+          functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode)
+          workingAtTask++
+          break
+        case 5:
+          canvas.chartSpace.finalize()
+          workingAtTask++
+          break
+        case 6:
+          canvas.chartSpace.initialize()
+          workingAtTask = 0
+          circularProgressBar.visible = false
+          break
+
+      }
+    }
+  }
+
+  function draw () {
+    if (circularProgressBar !== undefined) {
+      circularProgressBar.draw()
+    }
   }
 
   function stringifyWorkspace (removePersonalData) {
@@ -193,29 +241,22 @@ function newWorkspace () {
     }
   }
 
-  function spawn (nodeText, point) {
+  function spawn (nodeText, mousePointer) {
     try {
+      let point = {
+        x: mousePointer.x,
+        y: mousePointer.y
+      }
       point = canvas.floatingSpace.container.frame.unframeThisPoint(point)
       spawnPosition.x = point.x
       spawnPosition.y = point.y
 
-      let droppedNode = JSON.parse(nodeText)
+      droppedNode = JSON.parse(nodeText)
 
       if (droppedNode.type === 'Workspace') {
-        stopAllRunningTasks()
-        console.log(new Date())
-        functionLibraryNodeDeleter.deleteWorkspace(thisObject.workspaceNode, thisObject.workspaceNode.rootNodes)
-        console.log(new Date())
-        canvas.floatingSpace.warmUp()
-        console.log(new Date())
-        thisObject.workspaceNode = droppedNode
-        console.log(new Date())
-        functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode)
-        console.log(new Date())
-        canvas.chartSpace.finalize()
-        console.log(new Date())
-        canvas.chartSpace.initialize()
-        console.log(new Date())
+        circularProgressBar.initialize(mousePointer)
+        circularProgressBar.visible = true
+        workingAtTask = 1
         return
       }
 
@@ -228,6 +269,8 @@ function newWorkspace () {
       thisObject.workspaceNode.rootNodes.push(droppedNode)
       functionLibraryUiObjectsFromNodes.createUiObjectFromNode(droppedNode, undefined, undefined, positionOffset)
       functionLibraryUiObjectsFromNodes.tryToConnectChildrenWithReferenceParents()
+
+      droppedNode = undefined
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] spawn -> err = ' + err.stack) }
     }

FloatingSpace/BusyProgressBar.js

@@ -0,0 +1,72 @@
+
+function newBusyProgressBar () {
+  const MODULE_NAME = 'Circular Progress Bar'
+
+  let thisObject = {
+    container: undefined,
+    isDeployed: undefined,
+    visible: undefined,
+    physics: physics,
+    draw: draw,
+    finalize: finalize,
+    initialize: initialize
+  }
+
+  let position
+  let addRadius
+
+  let eventSubscriptionHeartbeat
+
+  return thisObject
+
+  function finalize () {
+    thisObject.payload = undefined
+    thisObject.fitFunction = undefined
+  }
+
+  function initialize (pPosition) {
+    position = pPosition
+
+    addRadius = 0
+  }
+
+  function physics () {
+    addRadius = addRadius + 20
+  }
+
+  function draw () {
+    if (thisObject.visible !== true) { return }
+
+    let visiblePosition = {
+      x: position.x,
+      y: position.y
+    }
+
+    visiblePosition = thisObject.fitFunction(visiblePosition)
+
+    const RADIUS = 10 + addRadius
+    let OPACITY = 1
+
+    let initialAngle = 0
+    let finalAngle = Math.PI * 2
+
+    browserCanvasContext.beginPath()
+
+    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, RADIUS, initialAngle, finalAngle, false)
+    browserCanvasContext.closePath()
+
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)'
+
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY * 2 + ')'
+    browserCanvasContext.lineWidth = 15
+    browserCanvasContext.setLineDash([3, 4])
+
+    browserCanvasContext.stroke()
+
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
+    browserCanvasContext.lineWidth = 10
+    browserCanvasContext.setLineDash([3, 4])
+    browserCanvasContext.stroke()
+  }
+}
+

FloatingSpace/CircularProgressBar.js

@@ -94,6 +94,8 @@ function newCircularProgressBar () {
     for (let i = 0; i < 60; i++) {
       let OPACITY = opacityCounters[i] / 1000
 
+      if (OPACITY === 0) { continue }
+
       let initialAngle = Math.PI * 2 / 60 * i - Math.PI / 2
       let finalAngle = Math.PI * 2 / 60 * (i + 1) - Math.PI / 2
 

Spaces/DesignerSpace.js

@@ -223,5 +223,8 @@ function newDesignerSpace () {
     if (thisObject.sidePanel !== undefined) {
       thisObject.sidePanel.draw()
     }
+    if (thisObject.workspace !== undefined) {
+      thisObject.workspace.draw()
+    }
   }
 }