showing map

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.transformPoointToMap(targetPoint)
+      position = canvas.floatingSpace.transformPoointToMap(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.transformPoointToMap(position)
+      targetPoint = canvas.floatingSpace.transformPoointToMap(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.transformPoointToMap(position)
+    }
+
     let radius = thisObject.container.frame.radius
             /* Label Text */
     let labelPoint
@@ -1112,6 +1126,10 @@ function newUiObject () {
 
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPoointToMap(position)
+    }
+
     let radius = thisObject.container.frame.radius * 3.5
             /* Label Text */
     let labelPoint
@@ -1152,6 +1170,10 @@ function newUiObject () {
 
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPoointToMap(position)
+    }
+
     let radius = thisObject.container.frame.radius * 1.5
             /* Label Text */
     let labelPoint
@@ -1255,6 +1277,10 @@ function newUiObject () {
 
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPoointToMap(position)
+    }
+
     let radius = thisObject.container.frame.radius
 
     if (radius > 0.5) {
@@ -1266,7 +1292,12 @@ function newUiObject () {
       }
 
       visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition)
-      visiblePosition = thisObject.fitFunction(visiblePosition)
+
+      if (canvas.floatingSpace.inMapMode === true) {
+        visiblePosition = canvas.floatingSpace.transformPoointToMap(visiblePosition)
+      } else {
+        visiblePosition = thisObject.fitFunction(visiblePosition)
+      }
 
       browserCanvasContext.beginPath()
       browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)

Spaces/FloatingSpace.js

@@ -11,6 +11,8 @@ function newFloatingSpace () {
     floatingLayer: undefined,               // This is the array of floatingObjects being displayed
     uiObjectConstructor: undefined,
     container: undefined,
+    inMapMode: false,
+    transformPoointToMap: transformPoointToMap,
     oneScreenUp: oneScreenUp,
     oneScreenDown: oneScreenDown,
     oneScreenLeft: oneScreenLeft,
@@ -34,6 +36,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 +51,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,6 +78,37 @@ function newFloatingSpace () {
     thisObject.uiObjectConstructor.initialize(thisObject.floatingLayer)
 
     eventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
+  }
+
+  function transformPoointToMap (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 onDoubleClick () {
+    doubleClickCounter = 0
+
+    if (thisObject.inMapMode === false) {
+      thisObject.inMapMode = true
+    } else {
+      thisObject.inMapMode = false
+    }
+    console.log(thisObject.inMapMode)
+  }
+
+  function onDragStarted (event) {
+    if (doubleClickCounter > 0) {
+      onDoubleClick()
+      return
+    } else {
+      doubleClickCounter = 10
+    }
   }
 
   function isItFar (payload, dontCheckParent) {
@@ -260,6 +298,14 @@ function newFloatingSpace () {
     browserZoomPhysics()
     positionContraintsPhysics()
     thisObject.floatingLayer.physics()
+    doubleClickPhysics()
+  }
+
+  function doubleClickPhysics () {
+    doubleClickCounter--
+    if (doubleClickCounter < 0) {
+      doubleClickCounter = 0
+    }
   }
 
   function positionContraintsPhysics () {