diff --git a/CanvasApp/Canvas.js b/CanvasApp/Canvas.js index c4e8eb2b6..fb901f6ab 100644 --- a/CanvasApp/Canvas.js +++ b/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) { diff --git a/CanvasApp/FloatingSpace/FloatingObject.js b/CanvasApp/FloatingSpace/FloatingObject.js index cccc6d18b..dd939259f 100644 --- a/CanvasApp/FloatingSpace/FloatingObject.js +++ b/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) diff --git a/CanvasApp/FloatingSpace/UiObject.js b/CanvasApp/FloatingSpace/UiObject.js index ccec4c308..2bda0d9ff 100644 --- a/CanvasApp/FloatingSpace/UiObject.js +++ b/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, diff --git a/CanvasApp/FloatingSpace/UiObjectTitle.js b/CanvasApp/FloatingSpace/UiObjectTitle.js index 9ac05377c..6fde27c23 100644 --- a/CanvasApp/FloatingSpace/UiObjectTitle.js +++ b/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 } } + diff --git a/CanvasApp/Spaces/FloatingSpace.js b/CanvasApp/Spaces/FloatingSpace.js index 36819e044..24237e442 100644 --- a/CanvasApp/Spaces/FloatingSpace.js +++ b/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 () {