From cc9bbb30ad3661943fc496cba39af897aeff3468 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 15 Mar 2020 15:27:17 +0100 Subject: [PATCH] snapping to hierarchy heads --- CanvasApp/DesignSpace/Workspace/Workspace.js | 15 +++++ CanvasApp/FloatingSpace/FloatingLayer.js | 19 ------ CanvasApp/Spaces/FloatingSpace.js | 70 +++++++++++--------- 3 files changed, 55 insertions(+), 49 deletions(-) diff --git a/CanvasApp/DesignSpace/Workspace/Workspace.js b/CanvasApp/DesignSpace/Workspace/Workspace.js index 41d4fd779..48e48b21c 100644 --- a/CanvasApp/DesignSpace/Workspace/Workspace.js +++ b/CanvasApp/DesignSpace/Workspace/Workspace.js @@ -11,6 +11,7 @@ function newWorkspace () { container: undefined, enabled: false, nodeChildren: undefined, + getHierarchyHeads: getHierarchyHeads, getNodeThatIsOnFocus: getNodeThatIsOnFocus, getNodeByShortcutKey: getNodeByShortcutKey, stopAllRunningTasks: stopAllRunningTasks, @@ -217,6 +218,20 @@ function newWorkspace () { } } + function getHierarchyHeads () { + let nodes = [] + for (let i = 0; i < thisObject.workspaceNode.rootNodes.length; i++) { + let rootNode = thisObject.workspaceNode.rootNodes[i] + let nodeDefinition = APP_SCHEMA_MAP.get(rootNode.type) + if (nodeDefinition !== undefined) { + if (nodeDefinition.isHierarchyHead === true) { + nodes.push(rootNode) + } + } + } + return nodes + } + function spawn (nodeText, mousePointer) { try { let point = { diff --git a/CanvasApp/FloatingSpace/FloatingLayer.js b/CanvasApp/FloatingSpace/FloatingLayer.js index 066533c25..8be7ec11f 100644 --- a/CanvasApp/FloatingSpace/FloatingLayer.js +++ b/CanvasApp/FloatingSpace/FloatingLayer.js @@ -24,7 +24,6 @@ function newFloatingLayer () { removeFloatingObject: removeFloatingObject, getFloatingObject: getFloatingObject, physics: physics, - changeTargetRepulsion: changeTargetRepulsion, draw: draw, getContainer: getContainer, initialize: initialize, @@ -619,24 +618,6 @@ function newFloatingLayer () { } } - function changeTargetRepulsion (pDelta) { - try { - if (pDelta > 0) { - pDelta = 1 - } else { - pDelta = -1 - } - - maxTargetRepulsionForce = maxTargetRepulsionForce + pDelta / 1000 - - if (maxTargetRepulsionForce < 0.0000000001) { - maxTargetRepulsionForce = 0.0000000001 - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] changeTargetRepulsion -> err= ' + err.stack) } - } - } - function colliding (floatingObject1, floatingObject2) { try { /* This function detects weather 2 floatingObjects collide with each other. */ diff --git a/CanvasApp/Spaces/FloatingSpace.js b/CanvasApp/Spaces/FloatingSpace.js index 68c801a98..2f6acb310 100644 --- a/CanvasApp/Spaces/FloatingSpace.js +++ b/CanvasApp/Spaces/FloatingSpace.js @@ -13,6 +13,7 @@ function newFloatingSpace () { container: undefined, inMapMode: false, toggleMapMode: toggleMapMode, + enterMapMode: enterMapMode, exitMapMode: exitMapMode, transformPointToMap: transformPointToMap, transformRadiusToMap: transformRadiusToMap, @@ -54,15 +55,11 @@ function newFloatingSpace () { let visible = false 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() @@ -81,7 +78,6 @@ function newFloatingSpace () { thisObject.uiObjectConstructor = newUiObjectConstructor() thisObject.uiObjectConstructor.initialize(thisObject.floatingLayer) - eventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted) } @@ -105,19 +101,17 @@ function newFloatingSpace () { return imageSize / IMAGE_REDUCTION_FACTOR } - function onDoubleClick () { - doubleClickCounter = 0 + function enterMapMode () { thisObject.inMapMode = true } function exitMapMode () { thisObject.inMapMode = false - doubleClickCounter = 0 } function toggleMapMode () { if (thisObject.inMapMode === false) { - thisObject.inMapMode = true + enterMapMode() } else { exitMapMode() } @@ -125,15 +119,43 @@ function newFloatingSpace () { function onDragStarted (event) { if (thisObject.inMapMode === false) { - if (doubleClickCounter > 0) { - onDoubleClick() - return - } else { - doubleClickCounter = 8 - } + if (event.buttons !== 2) { return } + + enterMapMode() } 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 + if (event.buttons !== 1) { return } + + let mousePosition = { + x: event.x, + y: event.y + } + + let mouseAtSpace = { + x: mousePosition.x / browserCanvas.width * SPACE_SIZE, + y: mousePosition.y / browserCanvas.height * SPACE_SIZE + } + /* Let's see if we can snap to some of the root nodes that are isHierarchyHead */ + let snapCandidateNodes = canvas.designSpace.workspace.getHierarchyHeads() + for (let i = 0; i < snapCandidateNodes.length; i++) { + let node = snapCandidateNodes[i] + let nodePosition = { + x: node.payload.floatingObject.container.frame.position.x, + y: node.payload.floatingObject.container.frame.position.y + } + // nodePosition = node.payload.floatingObject.container.frame.frameThisPoint(nodePosition) + + let distance = Math.sqrt(Math.pow(mouseAtSpace.x - nodePosition.x, 2) + Math.pow(mouseAtSpace.y - nodePosition.y, 2)) + const SNAP_THREASHOLD = 1000 + if (distance < SNAP_THREASHOLD) { + mousePosition.x = nodePosition.x / SPACE_SIZE * browserCanvas.width + mousePosition.y = nodePosition.y / SPACE_SIZE * browserCanvas.height + } + } + + /* Movign the Floating Space to where the mouse is. */ + thisObject.container.frame.position.x = -mousePosition.x / browserCanvas.width * SPACE_SIZE + browserCanvas.width / 2 + thisObject.container.frame.position.y = -mousePosition.y / browserCanvas.height * SPACE_SIZE + browserCanvas.height / 2 + exitMapMode() } } @@ -292,11 +314,6 @@ function newFloatingSpace () { return true } - function onMouseWheel (event) { - if (visible === false) { return } - thisObject.floatingLayer.changeTargetRepulsion(event.wheelDelta) - } - function makeVisible () { visible = true } @@ -326,14 +343,6 @@ function newFloatingSpace () { browserZoomPhysics() positionContraintsPhysics() thisObject.floatingLayer.physics() - doubleClickPhysics() - } - - function doubleClickPhysics () { - doubleClickCounter-- - if (doubleClickCounter < 0) { - doubleClickCounter = 0 - } } function positionContraintsPhysics () { @@ -376,3 +385,4 @@ function newFloatingSpace () { browserCanvasContext.fill() } } +