map implemented

CanvasApp/Canvas.js

@@ -252,6 +252,10 @@ function newCanvas () {
     checkMediaRecording(event)
     canvas.chartingSpace.onKeyPressed(event)
 
+    if (event.key === 'Escape' && canvas.floatingSpace.inMapMode === true) {
+      canvas.floatingSpace.exitMapMode()
+    }
+
     let nodeOnFocus = canvas.designSpace.workspace.getNodeThatIsOnFocus()
     if (nodeOnFocus !== undefined) {
       if (nodeOnFocus.payload.uiObject.codeEditor !== undefined) {

CanvasApp/FloatingSpace/FloatingObject.js

@@ -108,6 +108,7 @@ function newFloatingObject () {
 
   function getContainer (point) {
     if ((thisObject.isCollapsed === true && thisObject.collapsedManually === false) || thisObject.isParentCollapsed === true) { return }
+    if (canvas.floatingSpace.inMapMode === true) { return }
     let container
 
     container = thisObject.payload.uiObject.getContainer(point)

CanvasApp/FloatingSpace/UiObject.js

@@ -960,6 +960,11 @@ function newUiObject () {
     targetPoint = canvas.floatingSpace.container.frame.frameThisPoint(targetPoint)
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      targetPoint = canvas.floatingSpace.transformPointToMap(targetPoint)
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
     if (thisObject.container.frame.radius > 1) {
       let LINE_STYLE = UI_COLOR.TITANIUM_YELLOW
       if (thisObject.payload.floatingObject.angleToParent !== ANGLE_TO_PARENT.NOT_FIXED) {
@@ -1030,6 +1035,11 @@ function newUiObject () {
     targetPoint = canvas.floatingSpace.container.frame.frameThisPoint(targetPoint)
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+      targetPoint = canvas.floatingSpace.transformPointToMap(targetPoint)
+    }
+
     let LINE_STYLE = UI_COLOR.GREY
 
     if (thisObject.container.frame.radius > 1) {
@@ -1072,6 +1082,10 @@ function newUiObject () {
 
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
     let radius = thisObject.container.frame.radius
             /* Label Text */
     let labelPoint
@@ -1094,6 +1108,16 @@ function newUiObject () {
           y: position.y + radius * 4 / 5 + fontSize * FONT_ASPECT_RATIO + 15
         }
 
+        if (canvas.floatingSpace.inMapMode === true) {
+          labelPoint.y = labelPoint.y - 20
+          let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+          if (nodeDefinition !== undefined) {
+            if (nodeDefinition.isHierarchyHead !== true) {
+              return
+            }
+          }
+        }
+
         browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
         browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
@@ -1112,6 +1136,10 @@ function newUiObject () {
 
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
     let radius = thisObject.container.frame.radius * 3.5
             /* Label Text */
     let labelPoint
@@ -1152,6 +1180,10 @@ function newUiObject () {
 
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
     let radius = thisObject.container.frame.radius * 1.5
             /* Label Text */
     let labelPoint
@@ -1255,6 +1287,10 @@ function newUiObject () {
 
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
     let radius = thisObject.container.frame.radius
 
     if (radius > 0.5) {
@@ -1266,7 +1302,14 @@ function newUiObject () {
       }
 
       visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition)
-      visiblePosition = thisObject.fitFunction(visiblePosition)
+
+      if (canvas.floatingSpace.inMapMode === true) {
+        visiblePosition = canvas.floatingSpace.transformPointToMap(visiblePosition)
+        radius = canvas.floatingSpace.transformRadiusToMap(radius)
+        VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
+      } else {
+        visiblePosition = thisObject.fitFunction(visiblePosition)
+      }
 
       browserCanvasContext.beginPath()
       browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
@@ -1288,6 +1331,9 @@ function newUiObject () {
       if (nodeDefinition !== undefined) {
         if (nodeDefinition.isHierarchyHead === true) {
           VISIBLE_RADIUS = thisObject.payload.floatingObject.currentHierarchyRing * 2.8
+          if (canvas.floatingSpace.inMapMode === true) {
+            VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
+          }
           let OPACITY = 1
 
           browserCanvasContext.beginPath()
@@ -1457,7 +1503,15 @@ function newUiObject () {
         let additionalImageSize = 0
         if (thisObject.isExecuting === true || isReadyToReferenceAttach === true || isReadyToChainAttach === true) { additionalImageSize = 20 }
         let totalImageSize = additionalImageSize + thisObject.payload.floatingObject.currentImageSize
-
+        if (canvas.floatingSpace.inMapMode === true) {
+          totalImageSize = canvas.floatingSpace.transformImagesizeToMap(totalImageSize)
+          let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+          if (nodeDefinition !== undefined) {
+            if (nodeDefinition.isHierarchyHead !== true) {
+              totalImageSize = totalImageSize / 4
+            }
+          }
+        }
         browserCanvasContext.drawImage(
           icon, position.x - totalImageSize / 2,
           position.y - totalImageSize / 2,

CanvasApp/FloatingSpace/UiObjectTitle.js

@@ -292,6 +292,19 @@ function newUiObjectTitle () {
 
           labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
 
+          if (canvas.floatingSpace.inMapMode === true) {
+            labelPoint = canvas.floatingSpace.transformPointToMap(labelPoint)
+            labelPoint.x = labelPoint.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO
+            labelPoint.y = labelPoint.y - 35
+
+            let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+            if (nodeDefinition !== undefined) {
+              if (nodeDefinition.isHierarchyHead !== true) {
+                return
+              }
+            }
+          }
+
           browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
           browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle
           browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
@@ -309,3 +322,4 @@ function newUiObjectTitle () {
     return title
   }
 }
+

CanvasApp/Spaces/FloatingSpace.js

@@ -11,6 +11,11 @@ function newFloatingSpace () {
     floatingLayer: undefined,               // This is the array of floatingObjects being displayed
     uiObjectConstructor: undefined,
     container: undefined,
+    inMapMode: false,
+    exitMapMode: exitMapMode,
+    transformPointToMap: transformPointToMap,
+    transformRadiusToMap: transformRadiusToMap,
+    transformImagesizeToMap: transformImagesizeToMap,
     oneScreenUp: oneScreenUp,
     oneScreenDown: oneScreenDown,
     oneScreenLeft: oneScreenLeft,
@@ -34,6 +39,7 @@ function newFloatingSpace () {
   thisObject.container.isDraggeable = true
   thisObject.container.isWheelable = true
   thisObject.container.detectMouseOver = true
+  thisObject.container.isClickeable = false
   thisObject.container.frame.radius = 0
 
   let devicePixelRatio = window.devicePixelRatio
@@ -48,11 +54,15 @@ function newFloatingSpace () {
 
   const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 25
   let eventSubscriptionId
+  let onDragStartedEventSubscriptionId
+
+  let doubleClickCounter = 0
 
   return thisObject
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(eventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId)
 
     thisObject.floatingLayer.finalize()
     thisObject.uiObjectConstructor.finalize()
@@ -71,11 +81,58 @@ function newFloatingSpace () {
     thisObject.uiObjectConstructor.initialize(thisObject.floatingLayer)
 
     eventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
+  }
+
+  function transformPointToMap (point) {
+    let returnPoint = {
+      x: point.x - thisObject.container.frame.position.x,
+      y: point.y - thisObject.container.frame.position.y
+    }
+    returnPoint.x = returnPoint.x / SPACE_SIZE * browserCanvas.width
+    returnPoint.y = returnPoint.y / SPACE_SIZE * browserCanvas.height
+    return returnPoint
+  }
+
+  function transformRadiusToMap (radius) {
+    const RADIUS_REDUCTION_FACTOR = 2
+    return radius / RADIUS_REDUCTION_FACTOR
+  }
+
+  function transformImagesizeToMap (imageSize) {
+    const IMAGE_REDUCTION_FACTOR = 3
+    return imageSize / IMAGE_REDUCTION_FACTOR
+  }
+
+  function onDoubleClick () {
+    doubleClickCounter = 0
+    thisObject.inMapMode = true
+  }
+
+  function exitMapMode () {
+    thisObject.inMapMode = false
+    doubleClickCounter = 0
+  }
+
+  function onDragStarted (event) {
+    if (thisObject.inMapMode === false) {
+      if (doubleClickCounter > 0) {
+        onDoubleClick()
+        return
+      } else {
+        doubleClickCounter = 10
+      }
+    } else {
+      thisObject.container.frame.position.x = -event.x / browserCanvas.width * SPACE_SIZE + browserCanvas.width / 2
+      thisObject.container.frame.position.y = -event.y / browserCanvas.height * SPACE_SIZE + browserCanvas.height / 2
+      exitMapMode()
+    }
   }
 
   function isItFar (payload, dontCheckParent) {
     /* If for any reason the paylaod is undefined we return false */
     if (payload === undefined) { return false }
+    if (thisObject.inMapMode === true) { return false }
 
     let radarFactor = 2 // How big is the margin
 
@@ -260,6 +317,14 @@ function newFloatingSpace () {
     browserZoomPhysics()
     positionContraintsPhysics()
     thisObject.floatingLayer.physics()
+    doubleClickPhysics()
+  }
+
+  function doubleClickPhysics () {
+    doubleClickCounter--
+    if (doubleClickCounter < 0) {
+      doubleClickCounter = 0
+    }
   }
 
   function positionContraintsPhysics () {