From cac58db47af6645bdeda5bb35896995e4cc8f6cf Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 10 Feb 2020 18:32:31 +0100 Subject: [PATCH] edge editor first part implemented --- ChartsSpace/EdgeEditor.js | 247 +++++++++++++++++++++++++++++++++++++ ChartsSpace/TimeMachine.js | 21 ++-- Frame.js | 10 +- Scales/TimeScale.js | 2 + 4 files changed, 269 insertions(+), 11 deletions(-) create mode 100644 ChartsSpace/EdgeEditor.js diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js new file mode 100644 index 000000000..06e82d9cb --- /dev/null +++ b/ChartsSpace/EdgeEditor.js @@ -0,0 +1,247 @@ +function newEdgeEditor () { + const MODULE_NAME = 'Edge Editor' + + let thisObject = { + container: undefined, + fitFunction: undefined, + isVisible: true, + physics: physics, + drawForeground: drawForeground, + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + const EDGE_SIZE = 6 + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = true + thisObject.container.isClickeable = false + thisObject.container.isWheelable = false + thisObject.container.detectMouseOver = true + + let isMouseOver + let whereIsMouseOver = 'outside' + + let onMouseOverEventSubscriptionId + let onMouseNotOverEventSubscriptionId + + let mouse = { + position: { + x: 0, + y: 0 + } + } + + return thisObject + + function finalize () { + thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + thisObject.fitFunction = undefined + + mouse = undefined + } + + function initialize () { + onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + } + + function onMouseOver (event) { + isMouseOver = true + } + + function onMouseNotOver () { + isMouseOver = false + } + + function getContainer (mousePoint) { + if (thisObject.container.frame.isThisPointHere(mousePoint, undefined, undefined, -EDGE_SIZE) === true) { + console.log('isThisPointHere ', true) + + let point = { + x: mousePoint.x, + y: mousePoint.y + } + point = unTransformThisPoint(point, thisObject.container) + + if (point.x <= 0) { + whereIsMouseOver = 'left' + return thisObject.container + } + + if (point.x >= thisObject.container.frame.width) { + whereIsMouseOver = 'right' + return thisObject.container + } + + if (point.y <= 0) { + whereIsMouseOver = 'top' + return thisObject.container + } + + if (point.y >= thisObject.container.frame.height) { + whereIsMouseOver = 'bottom' + return thisObject.container + } + + whereIsMouseOver = 'center' + } else { + isMouseOver = false + whereIsMouseOver = 'outside' + } + } + + function physics () { + + } + + function drawForeground () { + let edgeSize + let lineWidth + + if (whereIsMouseOver === 'outside') { + edgeSize = EDGE_SIZE / 2 + lineWidth = 0.1 + } else { + edgeSize = EDGE_SIZE + lineWidth = 0.5 + } + + const OPACITY = 1 + + console.log('whereIsMouseOver ', whereIsMouseOver, 'isMouseOver ' + isMouseOver) + + pointA1 = { + x: 0, + y: 0 + } + + pointA2 = { + x: thisObject.container.frame.width, + y: 0 + } + + pointA3 = { + x: thisObject.container.frame.width, + y: thisObject.container.frame.height + } + + pointA4 = { + x: 0, + y: thisObject.container.frame.height + } + + pointB1 = { + x: 0, + y: 0 + } + + pointB2 = { + x: thisObject.container.frame.width, + y: 0 + } + + pointB3 = { + x: thisObject.container.frame.width, + y: thisObject.container.frame.height + } + + pointB4 = { + x: 0, + y: thisObject.container.frame.height + } + + pointA1 = transformThisPoint(pointA1, thisObject.container) + pointA2 = transformThisPoint(pointA2, thisObject.container) + pointA3 = transformThisPoint(pointA3, thisObject.container) + pointA4 = transformThisPoint(pointA4, thisObject.container) + + pointB1 = transformThisPoint(pointB1, thisObject.container) + pointB2 = transformThisPoint(pointB2, thisObject.container) + pointB3 = transformThisPoint(pointB3, thisObject.container) + pointB4 = transformThisPoint(pointB4, thisObject.container) + + pointB1 = { + x: pointB1.x - edgeSize, + y: pointB1.y - edgeSize + } + + pointB2 = { + x: pointB2.x + edgeSize, + y: pointB2.y - edgeSize + } + + pointB3 = { + x: pointB3.x + edgeSize, + y: pointB3.y + edgeSize + } + + pointB4 = { + x: pointB4.x - edgeSize, + y: pointB4.y + edgeSize + } + + browserCanvasContext.setLineDash([0, 0]) + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(pointA1.x, pointA1.y) + browserCanvasContext.lineTo(pointA2.x, pointA2.y) + browserCanvasContext.lineTo(pointB2.x, pointB2.y) + browserCanvasContext.lineTo(pointB1.x, pointB1.y) + browserCanvasContext.lineTo(pointA1.x, pointA1.y) + browserCanvasContext.closePath() + + drawEdge('top') + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(pointA2.x, pointA2.y) + browserCanvasContext.lineTo(pointA3.x, pointA3.y) + browserCanvasContext.lineTo(pointB3.x, pointB3.y) + browserCanvasContext.lineTo(pointB2.x, pointB2.y) + browserCanvasContext.lineTo(pointA2.x, pointA2.y) + browserCanvasContext.closePath() + + drawEdge('right') + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(pointA3.x, pointA3.y) + browserCanvasContext.lineTo(pointA4.x, pointA4.y) + browserCanvasContext.lineTo(pointB4.x, pointB4.y) + browserCanvasContext.lineTo(pointB3.x, pointB3.y) + browserCanvasContext.lineTo(pointA3.x, pointA3.y) + browserCanvasContext.closePath() + + drawEdge('bottom') + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(pointA4.x, pointA4.y) + browserCanvasContext.lineTo(pointA1.x, pointA1.y) + browserCanvasContext.lineTo(pointB1.x, pointB1.y) + browserCanvasContext.lineTo(pointB4.x, pointB4.y) + browserCanvasContext.lineTo(pointA4.x, pointA4.y) + browserCanvasContext.closePath() + + drawEdge('left') + + function drawEdge (edgeType) { + if (whereIsMouseOver === edgeType && isMouseOver === true) { + browserCanvasContext.lineWidth = lineWidth + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')' + } else { + browserCanvasContext.lineWidth = lineWidth + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')' + } + browserCanvasContext.fill() + browserCanvasContext.stroke() + } + } +} diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 87571461a..99e663d52 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -21,6 +21,7 @@ function newTimeMachine () { timeScale: undefined, rateScale: undefined, payload: undefined, + edgeEditor: undefined, timelineCharts: [], fitFunction: fitFunction, physics: physics, @@ -101,6 +102,7 @@ function newTimeMachine () { thisObject.container.finalize() thisObject.container = undefined thisObject.payload = undefined + thisObject.edgeEditor = undefined mouse = undefined timelineChartsMap = undefined @@ -149,6 +151,10 @@ function newTimeMachine () { onViewportPositionChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged) onViewportZoomChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged) + thisObject.edgeEditor = newEdgeEditor() + thisObject.edgeEditor.initialize() + thisObject.edgeEditor.container.connectToParent(thisObject.container, true, true, false, true) + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } @@ -269,6 +275,13 @@ function newTimeMachine () { function getContainer (point, purpose) { let container + container = thisObject.edgeEditor.getContainer(point) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + return container + } + } + if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { container = thisObject.rateScale.getContainer(point) if (container !== undefined) { @@ -571,14 +584,8 @@ function newTimeMachine () { if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawForeground() } } - let style = { - color: UI_COLOR.BLACK, - opacity: 1, - lineWidth: 1, - lineDash: [1, 3] - } - thisObject.container.frame.draw(false, true, false, thisObject.fitFunction, style) drawLabel() + thisObject.edgeEditor.drawForeground() } } diff --git a/Frame.js b/Frame.js index ed8a0a25d..46fb4e32c 100644 --- a/Frame.js +++ b/Frame.js @@ -160,11 +160,13 @@ function newFrame () { return point } - function isThisPointHere (point, outsideViewPort, dontTransform) { - // The second parameter is usefull when you want to check a point that you already know is outside the viewport. + function isThisPointHere (point, outsideViewPort, dontTransform, padding) { + // The second parameter is usefull when you want to check a point that you already know is outside the viewport. + // The padding is a distance to the borders of the container. Can be either negative (outside, to increase the cointainer size) or positive (inside to decrease the cointainer size) + + if (padding === undefined) { padding = 0 } /* We need not to modify the point received, so me make a copy of it. */ - let checkPoint = { x: point.x, y: point.y @@ -193,7 +195,7 @@ function newFrame () { } if (thisObject.type === 'Rectangle') { - if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) { + if (checkPoint.x < 0 + padding || checkPoint.y < 0 + padding || checkPoint.x > thisObject.width + padding || checkPoint.y > thisObject.height + padding) { return false } else { return true diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 7e822a723..7078991d4 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -405,6 +405,8 @@ function newTimeScale () { browserCanvasContext.lineTo(point8.x, point8.y) browserCanvasContext.lineTo(point9.x, point9.y) + browserCanvasContext.closePath() + browserCanvasContext.lineWidth = LINE_WIDTH browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' browserCanvasContext.stroke()