From 26308b3704a6c5cb83e9e2b7532298d564fc623f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 23:13:59 +0200 Subject: [PATCH] Dragging working with containers --- Canvas.js | 51 ++++++++++++++++++--------------- Container.js | 1 + FloatingSpace/FloatingLayer.js | 2 -- FloatingSpace/FloatingObject.js | 6 ++-- FloatingSpace/Note.js | 9 +++--- FloatingSpace/ProfileBall.js | 9 +++--- FloatingSpace/StrategyPart.js | 17 ++++------- 7 files changed, 45 insertions(+), 50 deletions(-) diff --git a/Canvas.js b/Canvas.js index 8624f0b4b..390375463 100644 --- a/Canvas.js +++ b/Canvas.js @@ -357,16 +357,21 @@ function newCanvas () { return } - /* We check if the mouse is over a floatingObject/ */ + container = thisObject.floatingSpace.getContainer(point) - floatingObjectBeingDragged = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - - if (floatingObjectBeingDragged >= 0) { + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true floatingObjectDragStarted = true return } - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + if (container !== undefined && container.isClickeable === true) { + /* We dont want to mess up with the click */ + return + } + + /* we check if it is over any of the existing containers at the Chart Space. */ container = thisObject.chartSpace.getContainer(point) @@ -497,12 +502,22 @@ function newCanvas () { if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { if (floatingObjectDragStarted === true) { - if (thisObject.floatingSpace.floatingLayer.isInsideFloatingObject(floatingObjectBeingDragged, point.x, point.y) === false) { - /* This means that the user stop moving the mouse and the floatingObject floatingObject out of the pointer. - In this case we cancell the drag operation . */ - + let targetContainer = thisObject.floatingSpace.getContainer(point) + if (targetContainer !== undefined) { + if (targetContainer.id !== containerBeingDragged.id) { + containerBeingDragged = undefined + containerDragStarted = false + floatingObjectDragStarted = false + browserCanvas.style.cursor = 'auto' + ignoreNextClick = true + return + } + } else { + containerDragStarted = false + containerBeingDragged = undefined floatingObjectDragStarted = false browserCanvas.style.cursor = 'auto' + ignoreNextClick = true return } } @@ -582,12 +597,10 @@ function newCanvas () { /* We check if the mouse is over a floatingObject/ */ if (thisObject.floatingSpace !== undefined) { - let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - - if (floatingObjectBeingClicked >= 0) { - let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) - floatingObject.container.eventHandler.raiseEvent('onMouseOver', point) + container = thisObject.floatingSpace.getContainer(point) + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) return } } @@ -680,15 +693,6 @@ function newCanvas () { browserCanvas.style.cursor = 'grabbing' thisObject.eventHandler.raiseEvent('Dragging', undefined) - let targetFloatingObject = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - - if (floatingObjectDragStarted) { - let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingDragged) - - floatingObject.container.frame.position.x = dragVector.upX - floatingObject.container.frame.position.y = dragVector.upY - } - if (containerDragStarted || viewPortBeingDragged) { /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */ @@ -734,3 +738,4 @@ function newCanvas () { } } } + diff --git a/Container.js b/Container.js index 5d743b388..f2823a8ad 100644 --- a/Container.js +++ b/Container.js @@ -1,6 +1,7 @@ function newContainer () { let thisObject = { + id: Math.trunc(Math.random() * 10000000), frame: undefined, displacement: undefined, eventHandler: undefined, diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 075e6a536..8c344a70a 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -660,8 +660,6 @@ function newFloatingLayer () { break // only one at the time. } } - - drawDyingObjects() } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err.message = ' + err.message) } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 953ddae6f..6b61f65c7 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -58,10 +58,10 @@ function newFloatingObject () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') + thisObject.container.initialize(MODULE_NAME, 'Circle') thisObject.container.isClickeable = true - thisObject.container.isDraggeable = false + thisObject.container.isDraggeable = true + thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 3d8e596a0..46288c127 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -4,7 +4,7 @@ function newNote () { let thisObject = { container: undefined, - physicsLoop: physicsLoop, + physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -12,9 +12,8 @@ function newNote () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') - thisObject.container.isClickeable = true + thisObject.container.initialize(MODULE_NAME, 'Circle') + thisObject.container.isClickeable = false thisObject.container.isDraggeable = false thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 @@ -38,7 +37,7 @@ function newNote () { } } - function physicsLoop () { + function physics () { } diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 07bf74b20..32a2c9b73 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -4,7 +4,7 @@ function newProfileBall () { let thisObject = { container: undefined, - physicsLoop: physicsLoop, + physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -12,9 +12,8 @@ function newProfileBall () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') - thisObject.container.isClickeable = true + thisObject.container.initialize(MODULE_NAME, 'Circle') + thisObject.container.isClickeable = false thisObject.container.isDraggeable = false thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 @@ -93,7 +92,7 @@ function newProfileBall () { } } - function physicsLoop () { + function physics () { // The menuItems also have a target. for (let i = 0; i < ballStringMenu.length; i++) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 18604c166..34bceccdd 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -5,7 +5,7 @@ function newStrategyPart () { let thisObject = { type: undefined, container: undefined, - physicsLoop: physicsLoop, + physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -13,9 +13,8 @@ function newStrategyPart () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') - thisObject.container.isClickeable = true + thisObject.container.initialize(MODULE_NAME, 'Circle') + thisObject.container.isClickeable = false thisObject.container.isDraggeable = false thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 @@ -276,16 +275,10 @@ function newStrategyPart () { } function getContainer (point) { - let container - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return thisObject.container - } else { - return undefined - } + return undefined } - function physicsLoop () { + function physics () { // The menuItems also have a target. for (let i = 0; i < ballStringMenu.length; i++) {