diff --git a/Canvas.js b/Canvas.js index f0920a50f..a9e8bd1f8 100644 --- a/Canvas.js +++ b/Canvas.js @@ -452,11 +452,10 @@ function newCanvas () { function onMouseDown (event) { try { - let point = { - x: event.pageX, - y: event.pageY - CURRENT_TOP_MARGIN, - button: event.button - } + let point = event + point.x = event.pageX + point.y = event.pageY - CURRENT_TOP_MARGIN + point.button = event.button dragVector.downX = point.x dragVector.downY = point.y @@ -509,7 +508,7 @@ function newCanvas () { container = thisObject.panelsSpace.getContainer(point) - if (container !== undefined && container.isDraggeable === true && event.button === 2) { + if (container !== undefined && container.isDraggeable === true && event.shiftKey === false) { containerBeingDragged = container containerDragStarted = true containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point) @@ -526,7 +525,7 @@ function newCanvas () { container = thisObject.chartSpace.getContainer(point) if (container !== undefined) { - if (container.isDraggeable === true && event.button === 2) { + if (container.isDraggeable === true) { containerBeingDragged = container containerDragStarted = true containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point) @@ -562,10 +561,10 @@ function newCanvas () { ignoreNextClick = false return } - let point = { - x: event.pageX, - y: event.pageY - CURRENT_TOP_MARGIN - } + let point = event + point.x = event.pageX + point.y = event.pageY - CURRENT_TOP_MARGIN + point.button = event.button let container @@ -644,10 +643,10 @@ function newCanvas () { function onMouseMove (event) { try { /* Processing the event */ - let point = { - x: event.pageX, - y: event.pageY - CURRENT_TOP_MARGIN - } + let point = event + point.x = event.pageX + point.y = event.pageY - CURRENT_TOP_MARGIN + point.button = event.button if (canvas.chartSpace.viewport !== undefined) { canvas.chartSpace.viewport.mousePosition.x = point.x @@ -691,20 +690,16 @@ function newCanvas () { function onMouseOver (event) { try { + let point = event + point.x = event.pageX + point.y = event.pageY - CURRENT_TOP_MARGIN + point.button = event.button if (containerDragStarted === true) { - let point = { - x: event.pageX, - y: event.pageY - CURRENT_TOP_MARGIN - } containerBeingDragged.eventHandler.raiseEvent('onMouseOver', point) return } /* Then we check who is the current object underneeth the mounse. */ - let point = { - x: event.pageX, - y: event.pageY - CURRENT_TOP_MARGIN - } let container diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js index 5ddad9ca7..7fc921ccd 100644 --- a/ChartsSpace/EdgeEditor.js +++ b/ChartsSpace/EdgeEditor.js @@ -22,17 +22,20 @@ function newEdgeEditor () { thisObject.container.isWheelable = false thisObject.container.detectMouseOver = true + let buttonUsedForDragging let isMouseOver let whereIsMouseOver = 'outside' let onMouseOverEventSubscriptionId let onMouseNotOverEventSubscriptionId + let onDragStartedEventSubscriptionId return thisObject function finalize () { thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId) thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId) thisObject.container.finalize() thisObject.container = undefined @@ -42,6 +45,7 @@ function newEdgeEditor () { function initialize () { onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted) } function onMouseOver (event) { @@ -52,13 +56,26 @@ function newEdgeEditor () { isMouseOver = false } - function getContainer (mousePoint) { - if (thisObject.container.frame.isThisPointHere(mousePoint, undefined, undefined, -EDGE_SIZE) === true) { + function onDragStarted (event) { + switch (event.button) { + case 1: { + buttonUsedForDragging = 'left' + break + } + case 2: { + buttonUsedForDragging = 'right' + break + } + } + } + + function getContainer (event) { + if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.shiftKey !== true) { console.log('isThisPointHere ', true) let point = { - x: mousePoint.x, - y: mousePoint.y + x: event.x, + y: event.y } point = unTransformThisPoint(point, thisObject.container) @@ -83,6 +100,7 @@ function newEdgeEditor () { } whereIsMouseOver = 'center' + return thisObject.container } else { isMouseOver = false whereIsMouseOver = 'outside' @@ -92,57 +110,61 @@ function newEdgeEditor () { function physics () { if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return } + let newPosition = { + x: thisObject.container.frame.position.x, + y: thisObject.container.frame.position.y + } + + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + + // newPosition = transformThisPoint(newPosition, thisObject.container) + const MIN_WIDTH = 100 const MIN_HEIGHT = 50 switch (whereIsMouseOver) { + case 'center': { + /* This is equivalent to drag the whole Time Machine, so we will apply the translation received onto the Time Machine container. */ + thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + newPosition.x + thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + newPosition.y + break + } case 'top' : { - if (thisObject.container.parentContainer.frame.height - thisObject.container.frame.position.y < MIN_HEIGHT) { - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 + if (thisObject.container.parentContainer.frame.height - newPosition.y < MIN_HEIGHT) { return } - thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + thisObject.container.frame.position.y - thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - thisObject.container.frame.position.y - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 + thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + newPosition.y + thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - newPosition.y + thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event) break } case 'bottom' : { - if (thisObject.container.parentContainer.frame.height + thisObject.container.frame.position.y < MIN_HEIGHT) { - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 + if (thisObject.container.parentContainer.frame.height + newPosition.y < MIN_HEIGHT) { return } - thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + thisObject.container.frame.position.y - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 + thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + newPosition.y + thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event) break } case 'left' : { - if (thisObject.container.parentContainer.frame.width - thisObject.container.frame.position.x < MIN_WIDTH) { - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 + if (thisObject.container.parentContainer.frame.width - newPosition.x < MIN_WIDTH) { return } - thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + thisObject.container.frame.position.x - thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - thisObject.container.frame.position.x - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 + thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + newPosition.x + thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - newPosition.x + thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event) break } case 'right' : { - if (thisObject.container.parentContainer.frame.width + thisObject.container.frame.position.x < MIN_WIDTH) { - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 + if (thisObject.container.parentContainer.frame.width + newPosition.x < MIN_WIDTH) { return } - thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + thisObject.container.frame.position.x - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 + thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + newPosition.x + thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event) break } diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 9a044f572..287c4e7fa 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -275,11 +275,6 @@ function newTimeMachine () { function getContainer (point, purpose) { let container - container = thisObject.edgeEditor.getContainer(point) - if (container !== undefined) { - return container - } - if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { container = thisObject.rateScale.getContainer(point) if (container !== undefined) { @@ -318,8 +313,9 @@ function newTimeMachine () { } } - if (thisObject.container.frame.isThisPointHere(point) === true) { - return thisObject.container + container = thisObject.edgeEditor.getContainer(point) + if (container !== undefined) { + return container } }