From 23519bd24a95bc3219b911761f19149b65bc35d9 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 Apr 2020 10:47:44 +0200 Subject: [PATCH] dragging rate scale bug fixed --- CanvasApp/Scales/RateScale.js | 90 +++++++++++++++++++++++++----- CanvasApp/Scales/TimeFrameScale.js | 15 +---- CanvasApp/Scales/TimeScale.js | 18 +----- 3 files changed, 78 insertions(+), 45 deletions(-) diff --git a/CanvasApp/Scales/RateScale.js b/CanvasApp/Scales/RateScale.js index 8e208d9b3..129a34dd2 100644 --- a/CanvasApp/Scales/RateScale.js +++ b/CanvasApp/Scales/RateScale.js @@ -43,18 +43,30 @@ function newRateScale () { let onMouseOverEventSubscriptionId let onMouseNotOverEventSubscriptionId let onScaleChangedEventSubscriptionId + let onDragStartedEventSubscriptionId let coordinateSystem + let coordinateSystemWhenDragStarted + let limitingContainer let rateCalculationsContainer - let mouse = { + mouseWhenDragStarted = { position: { x: 0, y: 0 } } + parentFrameWhenDragStarted = { + position: { + x: 0, + y: 0 + }, + width: 0, + height: 0 + } + let scaleDisplayTimer = 0 let autoScaleButton @@ -68,16 +80,25 @@ function newRateScale () { thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId) thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) coordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId) + thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId) thisObject.container.finalize() thisObject.container = undefined thisObject.fitFunction = undefined thisObject.payload = undefined + if (coordinateSystemWhenDragStarted !== undefined) { + coordinateSystemWhenDragStarted.finalize() + } + + coordinateSystemWhenDragStarted = undefined + coordinateSystem = undefined limitingContainer = undefined rateCalculationsContainer = undefined - mouse = undefined + + mouseWhenDragStarted = undefined + parentFrameWhenDragStarted = undefined autoScaleButton.finalize() autoScaleButton = undefined @@ -95,6 +116,7 @@ function newRateScale () { onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged) + onDragStartedEventSubscriptionId = draggeableContainer.eventHandler.listenToEvent('onDragStarted', onDragStarted) autoScaleButton = newAutoScaleButton() autoScaleButton.container.connectToParent(thisObject.container) @@ -115,12 +137,6 @@ function newRateScale () { turnOnCounter = 0 } } - mouse = { - position: { - x: event.x, - y: event.y - } - } } function onScaleChanged () { @@ -195,6 +211,38 @@ function newRateScale () { scaleDisplayTimer = 100 } + function onDragStarted (event) { + mouseWhenDragStarted = { + position: { + x: event.x, + y: event.y + } + } + + parentFrameWhenDragStarted = { + position: { + x: limitingContainer.frame.position.x, + y: limitingContainer.frame.position.y + }, + width: limitingContainer.frame.width, + height: limitingContainer.frame.height + } + + coordinateSystemWhenDragStarted = newCoordinateSystem() + + let minValue = { + x: coordinateSystem.min.x, + y: coordinateSystem.min.y + } + + let maxValue = { + x: coordinateSystem.max.x, + y: coordinateSystem.max.y + } + + coordinateSystemWhenDragStarted.initialize(minValue, maxValue, coordinateSystem.maxWidth, coordinateSystem.maxHeight) + } + function getContainer (point, purpose) { if (thisObject.container.frame.isThisPointHere(point, true) === true) { if (purpose === GET_CONTAINER_PURPOSE.DRAGGING) { @@ -262,26 +310,38 @@ function newRateScale () { } function draggingPhysics () { + if (coordinateSystemWhenDragStarted === undefined) { return } if (draggeableContainer.frame.position.y === 0) { return } + let mouseNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(canvas.mouse.position) + let mouseWhenDragStartedNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(mouseWhenDragStarted.position) + + let dragVectorWhenDragStarted = { + x: 0, + y: mouseNoZoom.y - mouseWhenDragStartedNoZoom.y + } + let dragVector = { - x: draggeableContainer.frame.position.x, + x: 0, y: draggeableContainer.frame.position.y } - draggeableContainer.frame.position.x = 0 draggeableContainer.frame.position.y = 0 let point = { x: 0, - y: -dragVector.y + y: (-dragVectorWhenDragStarted.y) } - let newMaxRate = getRateFromPointAtContainer(point, limitingContainer, coordinateSystem) - let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y + let newMaxRate = getRateFromPointAtContainer(point, limitingContainer, coordinateSystemWhenDragStarted) + let yDifferenceMaxMin = coordinateSystemWhenDragStarted.max.y - coordinateSystemWhenDragStarted.min.y coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin coordinateSystem.max.y = newMaxRate + let event = { + type: 'center dragged', + dragVector: dragVector + } coordinateSystem.recalculateScale() } @@ -375,7 +435,7 @@ function newRateScale () { /* Mouse Position Rate Calculation */ let ratePoint = { x: 0, - y: mouse.position.y + y: canvas.mouse.position.y } thisObject.rate = getRateFromPointAtBrowserCanvas(ratePoint, rateCalculationsContainer, coordinateSystem) @@ -387,7 +447,7 @@ function newRateScale () { } ratePoint = transformThisPoint(ratePoint, limitingContainer.frame.container) - ratePoint.y = mouse.position.y - thisObject.container.frame.height / 2 + thisObject.container.frame.height + ratePoint.y = canvas.mouse.position.y - thisObject.container.frame.height / 2 + thisObject.container.frame.height /* Checking against the container limits. */ if (ratePoint.x < upCorner.x) { ratePoint.x = upCorner.x } diff --git a/CanvasApp/Scales/TimeFrameScale.js b/CanvasApp/Scales/TimeFrameScale.js index 9c718e28e..89fdebc8e 100644 --- a/CanvasApp/Scales/TimeFrameScale.js +++ b/CanvasApp/Scales/TimeFrameScale.js @@ -38,12 +38,6 @@ function newTimeFrameScale () { let limitingContainer - let mouse = { - position: { - x: 0, - y: 0 - } - } setupContainer() let wheelDeltaDirection @@ -76,7 +70,6 @@ function newTimeFrameScale () { thisObject.payload = undefined limitingContainer = undefined - mouse = undefined } function initialize (pLimitingContainer) { @@ -103,12 +96,6 @@ function newTimeFrameScale () { turnOnCounter = 0 } } - mouse = { - position: { - x: event.x, - y: event.y - } - } } function onMouseOver (event) { @@ -201,7 +188,7 @@ function newTimeFrameScale () { } timePoint = transformThisPoint(timePoint, limitingContainer.frame.container) - timePoint.x = mouse.position.x - thisObject.container.frame.width / 2 + timePoint.x = canvas.mouse.position.x - thisObject.container.frame.width / 2 /* Checking against the container limits. */ if (timePoint.x < upCorner.x) { timePoint.x = upCorner.x } diff --git a/CanvasApp/Scales/TimeScale.js b/CanvasApp/Scales/TimeScale.js index 5ceeb9492..00d52c530 100644 --- a/CanvasApp/Scales/TimeScale.js +++ b/CanvasApp/Scales/TimeScale.js @@ -42,13 +42,6 @@ function newTimeScale () { let coordinateSystem let limitingContainer - let mouse = { - position: { - x: 0, - y: 0 - } - } - let wheelDeltaDirection let wheelDeltaCounter = 0 @@ -67,7 +60,6 @@ function newTimeScale () { coordinateSystem = undefined limitingContainer = undefined - mouse = undefined autoScaleButton.finalize() autoScaleButton = undefined @@ -101,12 +93,6 @@ function newTimeScale () { turnOnCounter = 0 } } - mouse = { - position: { - x: event.x, - y: event.y - } - } } function onMouseOver (event) { @@ -253,7 +239,7 @@ function newTimeScale () { /* Mouse Position Date Calculation */ let timePoint = { - x: mouse.position.x, + x: canvas.mouse.position.x, y: 0 } @@ -268,7 +254,7 @@ function newTimeScale () { } timePoint = transformThisPoint(timePoint, limitingContainer.frame.container) - timePoint.x = mouse.position.x - thisObject.container.frame.width / 2 + timePoint.x = canvas.mouse.position.x - thisObject.container.frame.width / 2 /* Checking against the container limits. */ if (timePoint.x < upCorner.x) { timePoint.x = upCorner.x }