From cf4946276052d43e47d17c9889e1761de7554a3a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 16 Mar 2020 09:25:56 +0100 Subject: [PATCH] only with mouse over --- Panels/LayersPanel.js | 57 ++++++++- Panels/LeftRightButton.js | 245 ++++++++++++++++++++++++++++++++++++++ Panels/UpDownButton.js | 13 +- 3 files changed, 302 insertions(+), 13 deletions(-) create mode 100644 Panels/LeftRightButton.js diff --git a/Panels/LayersPanel.js b/Panels/LayersPanel.js index 6d37195da..b5bed93e9 100644 --- a/Panels/LayersPanel.js +++ b/Panels/LayersPanel.js @@ -7,6 +7,7 @@ function newLayersPanel () { payload: undefined, isVisible: true, upDownButton: undefined, + leftRightButton: undefined, physics: physics, draw: draw, getContainer: getContainer, @@ -38,13 +39,23 @@ function newLayersPanel () { let posiblePanelHeight = (layerHeight + LAYER_SEPARATION) * posibleVisibleLayers + headerHeight + footerHeight let onMouseWheelEventSuscriptionId + let onMouseOverEventSubscriptionId + let onMouseNotOverEventSubscriptionId + + let isMouseOver return thisObject function finalize () { thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId) + thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) thisObject.upDownButton.finalize() thisObject.upDownButton = undefined + + thisObject.leftRightButton.finalize() + thisObject.leftRightButton = undefined + layersMap = undefined visibleLayers = undefined @@ -75,19 +86,39 @@ function newLayersPanel () { thisObject.upDownButton.fitFunction = thisObject.fitFunction thisObject.upDownButton.initialize() + thisObject.leftRightButton = newLeftRightButton() + thisObject.leftRightButton.parentContainer = thisObject.container + thisObject.leftRightButton.container.frame.parentFrame = thisObject.container.frame + thisObject.leftRightButton.fitFunction = thisObject.fitFunction + thisObject.leftRightButton.initialize() + onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) + onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) readObjectState() isInitialized = true } + function onMouseOver (event) { + isMouseOver = true + } + + function onMouseNotOver () { + isMouseOver = false + } + function saveObjectStateVisibleLayers () { savePropertyAtNodeConfig(thisObject.payload, 'visibleLayers', desiredVisibleLayers) } function saveObjectStatePanelLocation () { - savePropertyAtNodeConfig(thisObject.payload, 'panelLocation', thisObject.upDownButton.status) + let panelLocation = { + upOrDown: thisObject.upDownButton.status, + leftOrRight: thisObject.leftRightButton.status + } + savePropertyAtNodeConfig(thisObject.payload, 'panelLocation', panelLocation) } function readObjectState () { @@ -119,11 +150,16 @@ function newLayersPanel () { saveObjectStatePanelLocation() // this overrides any invalid value at the config. return } else { - if (storedValue !== 'up' && storedValue !== 'down') { + if (storedValue.upOrDown !== 'up' && storedValue.upOrDown !== 'down') { saveObjectStatePanelLocation() // this overrides any invalid value at the config. return } - thisObject.upDownButton.setStatus(storedValue) + if (storedValue.leftOrRight !== 'left' && storedValue.leftOrRight !== 'right') { + saveObjectStatePanelLocation() // this overrides any invalid value at the config. + return + } + thisObject.upDownButton.setStatus(storedValue.upOrDown) + thisObject.leftRightButton.setStatus(storedValue.leftOrRight) saveObjectStatePanelLocation() } } @@ -247,8 +283,13 @@ function newLayersPanel () { if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return } let container - container = thisObject.upDownButton.getContainer(point) - if (container !== undefined) { return container } + if (isMouseOver === true && purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) { + container = thisObject.upDownButton.getContainer(point) + if (container !== undefined) { return container } + + container = thisObject.leftRightButton.getContainer(point) + if (container !== undefined) { return container } + } /* First we check if thisObject point is inside thisObject space. */ if (thisObject.container.frame.isThisPointHere(point, true) === true) { @@ -302,6 +343,7 @@ function newLayersPanel () { if (thisObject.payload.node === undefined) { return } thisObject.upDownButton.physics() + thisObject.leftRightButton.physics() saveFrame(thisObject.payload, thisObject.container.frame) syncWithConfigPhysics() @@ -387,7 +429,10 @@ function newLayersPanel () { visibleLayers[i].draw() } drawScrollBar() - thisObject.upDownButton.draw() + if (isMouseOver === true) { + thisObject.upDownButton.draw() + thisObject.leftRightButton.draw() + } } function drawHeader () { diff --git a/Panels/LeftRightButton.js b/Panels/LeftRightButton.js new file mode 100644 index 000000000..1ff62802b --- /dev/null +++ b/Panels/LeftRightButton.js @@ -0,0 +1,245 @@ +function newLeftRightButton () { + let thisObject = { + container: undefined, + fitFunction: undefined, + parentContainer: undefined, + status: undefined, + setStatus: setStatus, + physics: physics, + draw: draw, + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + initialize: initialize, + finalize: finalize + } + + let isInitialized = false + /* Cointainer stuff */ + + thisObject.container = newContainer() + thisObject.container.name = 'Left Right Button' + thisObject.container.initialize() + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.containerName = 'Left Right Button' + + thisObject.status = 'left' + let leftPosition = {} + let rightPosition = {} + let transitionPosition = {} + + let onMouseClickEventSuscriptionId + return thisObject + + function finalize () { + thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId) + thisObject.container.finalize() + thisObject.container = undefined + thisObject.fitFunction = undefined + thisObject.parentContainer = undefined + + thisObject.status = undefined + leftPosition = undefined + rightPosition = undefined + transitionPosition = undefined + } + + function initialize () { + thisObject.container.frame.width = 12 + thisObject.container.frame.height = 12 + + let position = { + x: thisObject.container.frame.parentFrame.width * 2.25 / 8 - thisObject.container.frame.width / 2, + y: 40 * 4 / 8 - thisObject.container.frame.height / 2 + } + + thisObject.container.frame.position = position + + leftPosition.x = thisObject.parentContainer.frame.position.x + leftPosition.y = thisObject.parentContainer.frame.position.y + + rightPosition.x = thisObject.parentContainer.frame.position.x + rightPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y + + transitionPosition.x = leftPosition.x + transitionPosition.y = leftPosition.y + + /* Lets listen to our own events to react when we have a Mouse Click */ + onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + + isInitialized = true + } + + function setStatus (value) { + if (value === 'left' && thisObject.status === 'right') { + thisObject.status = 'going left' + } + if (value === 'right' && thisObject.status === 'left') { + thisObject.status = 'going right' + } + } + + function onMouseClick (event) { + if (thisObject.status === 'left') { + transitionPosition.x = leftPosition.x + transitionPosition.y = leftPosition.y + + thisObject.status = 'going right' + } else { + transitionPosition.x = rightPosition.x + transitionPosition.y = rightPosition.y + + thisObject.status = 'going left' + } + } + + function physics () { + return + if (isInitialized === false) { return } + + leftPosition.x = thisObject.parentContainer.frame.position.x + leftPosition.y = canvas.chartingSpace.viewport.visibleArea.topRight.y + + rightPosition.x = thisObject.parentContainer.frame.position.x + rightPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y + + if (thisObject.status === 'going right') { + if (transitionPosition.x < rightPosition.x) { + transitionPosition.x = transitionPosition.x + 50 + thisObject.parentContainer.frame.position.x = transitionPosition.x + } else { + thisObject.parentContainer.frame.position.x = rightPosition.x + thisObject.status = 'right' + } + } + if (thisObject.status === 'going left') { + if (transitionPosition.x > leftPosition.x) { + transitionPosition.x = transitionPosition.x - 50 + thisObject.parentContainer.frame.position.x = transitionPosition.x + } else { + thisObject.parentContainer.frame.position.x = leftPosition.x + thisObject.status = 'left' + } + } + } + + function draw () { + if (isInitialized === false) { return } + + drawButton() + } + + function getContainer (point, purpose) { + let container + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } + } + + function drawButton () { + let point1 + let point2 + let point3 + + switch (thisObject.status) { + case 'left': { + point1 = { + x: 3, + y: 3 + } + + point2 = { + x: 3, + y: thisObject.container.frame.height - 3 + } + + point3 = { + x: thisObject.container.frame.width - 3, + y: thisObject.container.frame.height / 2 + } + break + } + + case 'going right': { + point1 = { + x: 4, + y: 4 + } + + point2 = { + x: 4, + y: thisObject.container.frame.height - 4 + } + + point3 = { + x: thisObject.container.frame.width - 4, + y: thisObject.container.frame.height / 2 + } + break + } + + case 'going left': { + point1 = { + x: thisObject.container.frame.width - 4, + y: 4 + } + + point2 = { + x: thisObject.container.frame.width - 4, + y: thisObject.container.frame.height - 4 + } + + point3 = { + x: 4, + y: thisObject.container.frame.height / 2 + } + break + } + + case 'right': { + point1 = { + x: thisObject.container.frame.width - 3, + y: 3 + } + + point2 = { + x: thisObject.container.frame.width - 3, + y: thisObject.container.frame.height - 3 + } + + point3 = { + x: 3, + y: thisObject.container.frame.height / 2 + } + break + } + } + + /* Now the transformations. */ + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + + if (thisObject.fitFunction !== undefined) { + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + } + + /* Lets start the drawing. */ + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point1.x, point1.y) + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(250, 250, 250, 1)' + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + + browserCanvasContext.fillStyle = 'rgba(250, 250, 250, 1)' + browserCanvasContext.fill() + } +} diff --git a/Panels/UpDownButton.js b/Panels/UpDownButton.js index e68e9fdf1..bb542d183 100644 --- a/Panels/UpDownButton.js +++ b/Panels/UpDownButton.js @@ -16,13 +16,12 @@ function newUpDownButton () { /* Cointainer stuff */ thisObject.container = newContainer() - thisObject.container.name = 'Panel Tab Button' + thisObject.container.name = 'Up Down Button' thisObject.container.initialize() thisObject.container.isClickeable = true thisObject.container.isDraggeable = false - thisObject.container.frame.containerName = 'Panel Tab Button' + thisObject.container.frame.containerName = 'Up Down Button' - /* Animation to hide the pannel */ thisObject.status = 'up' let upPosition = {} let downPosition = {} @@ -45,12 +44,12 @@ function newUpDownButton () { } function initialize () { - thisObject.container.frame.width = 10 - thisObject.container.frame.height = 10 + thisObject.container.frame.width = 12 + thisObject.container.frame.height = 12 let position = { - x: thisObject.parentContainer.frame.width - 14, - y: 1 + x: thisObject.container.frame.parentFrame.width * 5.75 / 8 - thisObject.container.frame.width / 2, + y: 40 * 4 / 8 - thisObject.container.frame.height / 2 } thisObject.container.frame.position = position