diff --git a/FloatingSpace/UiObject.js b/FloatingSpace/UiObject.js index ccec4c308..302d9b4f8 100644 --- a/FloatingSpace/UiObject.js +++ b/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) diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 36819e044..3aaaafaf9 100644 --- a/Spaces/FloatingSpace.js +++ b/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 () {