From 2d48fe7c4b6df549cbefa87434419e3bb9d05e0b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 19:01:54 +0200 Subject: [PATCH] Menu Items being highlighted! --- Canvas.js | 30 ++++++++------ FloatingSpace/CircularMenu.js | 15 ++++--- FloatingSpace/CircularMenuItem.js | 66 +++++++++++++++++-------------- FloatingSpace/FloatingObject.js | 18 ++++----- FloatingSpace/StrategyPart.js | 8 ++-- Scales/RateScale.js | 2 +- Scales/TimePeriodScale.js | 2 +- Scales/TimeScale.js | 2 +- 8 files changed, 82 insertions(+), 61 deletions(-) diff --git a/Canvas.js b/Canvas.js index 5b0643147..e137a69c8 100644 --- a/Canvas.js +++ b/Canvas.js @@ -47,7 +47,7 @@ function newCanvas () { thisObject.eventHandler = newEventHandler() let splashScreen - + let lastContainerMouseOver return thisObject /* @@ -538,10 +538,6 @@ function newCanvas () { try { if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') } - /* First we raise the event signaling theat the mouse is potentially over another item, so that the current item can turn itself off. */ - - thisObject.eventHandler.raiseEvent('onMouseNotOver') - /* Then we check who is the current object underneeth the mounse. */ let point = { @@ -557,7 +553,7 @@ function newCanvas () { container = thisObject.strategySpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } @@ -568,7 +564,7 @@ function newCanvas () { container = thisObject.topSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } @@ -579,7 +575,7 @@ function newCanvas () { container = thisObject.bottomSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } @@ -590,7 +586,7 @@ function newCanvas () { container = thisObject.panelsSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } @@ -600,7 +596,7 @@ function newCanvas () { container = thisObject.floatingSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } @@ -611,10 +607,21 @@ function newCanvas () { container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) + containerFound() return } } + + function containerFound () { + if (lastContainerMouseOver !== undefined) { + if (container.id !== lastContainerMouseOver.id) { + lastContainerMouseOver.eventHandler.raiseEvent('onMouseNotOver', point) + } + } + + container.eventHandler.raiseEvent('onMouseOver', point) + lastContainerMouseOver = container + } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) } } @@ -738,3 +745,4 @@ function newCanvas () { } } } + diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index b1254425f..bf458d7b9 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -42,7 +42,7 @@ function newCircularMenu () { menuItem.angle = menuItemInitialValue.angle menuItem.initialize() - menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false) + menuItem.container.connectToParent(thisObject.container, false, false, true, true, true, true) menuItems.push(menuItem) } @@ -53,10 +53,12 @@ function newCircularMenu () { function getContainer (point) { let container - for (let i = 0; i < menuItems.length; i++) { - let menutItem = menuItems[i] - container = menutItem.getContainer(point) - if (container !== undefined) { return container } + if (thisObject.isDeployed === true) { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + container = menutItem.getContainer(point) + if (container !== undefined) { return container } + } } } @@ -74,6 +76,7 @@ function newCircularMenu () { menutItem.isDeployed = true } thisObject.isDeployed = true + console.log('mouse over') } function onMouseNotOver () { @@ -83,6 +86,7 @@ function newCircularMenu () { menutItem.isDeployed = false } thisObject.isDeployed = false + console.log('mouse not over') } function drawBackground (pFloatingObject) { @@ -99,3 +103,4 @@ function newCircularMenu () { } } } + diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 18274ec54..52ebdedcc 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -32,6 +32,8 @@ function newCircularMenuItem () { thisObject.container.frame.width = 150 thisObject.container.frame.height = 30 + let isMouseOver = false + return thisObject function initialize () { @@ -59,11 +61,12 @@ function newCircularMenuItem () { function getContainer (point) { let container - - if (thisObject.container.frame.isThisPointHere(point, true, true) === true) { - return thisObject.container - } else { - return undefined + if (thisObject.isDeployed === true) { + if (thisObject.container.frame.isThisPointHere(point, true, true) === true) { + return thisObject.container + } else { + return undefined + } } } @@ -75,14 +78,21 @@ function newCircularMenuItem () { thisObject.currentRadius = thisObject.currentRadius - 0.5 } } + + thisObject.container.frame.position.x = thisObject.container.frame.radius * 3 / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius + thisObject.container.frame.position.y = thisObject.container.frame.radius * 3 / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2 } - function onMouseOver () { - + function onMouseOver (point) { + if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { + isMouseOver = true + } else { + isMouseOver = false + } } - function onMouseNotOver () { - + function onMouseNotOver (point) { + isMouseOver = false } function onMouseClick (event) { @@ -90,16 +100,23 @@ function newCircularMenuItem () { } function drawBackground () { - if (thisObject.isDeployed === true) { - let point = { - x: thisObject.container.frame.position.x, - y: thisObject.container.frame.position.y + if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true) { + let position = { + x: 0, + y: 0 } + position = thisObject.container.frame.frameThisPoint(position) + browserCanvasContext.beginPath() - browserCanvasContext.rect(point.x, point.y, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' + browserCanvasContext.rect(position.x, position.y, thisObject.container.frame.width, thisObject.container.frame.height) + + if (isMouseOver === true) { + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' + } else { + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 0.5)' + } browserCanvasContext.closePath() browserCanvasContext.fill() @@ -107,25 +124,16 @@ function newCircularMenuItem () { } function drawForeground () { - let position = { - x: 0, - y: 0 + let menuPosition = { + x: thisObject.currentRadius, + y: thisObject.container.frame.height / 2 } - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 - position = thisObject.container.frame.frameThisPoint(position) + menuPosition = thisObject.container.frame.frameThisPoint(menuPosition) /* Menu Item */ - if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) { - let menuPosition = { - x: position.x + thisObject.container.frame.radius * 4 / 7 * Math.cos(toRadians(thisObject.angle)), - y: position.y - thisObject.container.frame.radius * 4 / 7 * Math.sin(toRadians(thisObject.angle)) } - - thisObject.container.frame.position.x = menuPosition.x - thisObject.currentRadius - thisObject.container.frame.position.y = menuPosition.y - thisObject.container.frame.height / 2 - + if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) { browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) /* Menu Label */ diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 526fcbdf3..11557b0b0 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -102,7 +102,7 @@ function newFloatingObject () { thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) - canvas.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { @@ -132,11 +132,11 @@ function newFloatingObject () { function thisObjectPhysics () { // The radius also have a target. - if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 1) { + if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 3) { if (thisObject.container.frame.radius < thisObject.targetRadius) { - thisObject.container.frame.radius = thisObject.container.frame.radius + 2.5 + thisObject.container.frame.radius = thisObject.container.frame.radius + 3 } else { - thisObject.container.frame.radius = thisObject.container.frame.radius - 2.5 + thisObject.container.frame.radius = thisObject.container.frame.radius - 3 } thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } @@ -162,20 +162,20 @@ function newFloatingObject () { } } - function onMouseOver () { - thisObject.targetRadius = thisObject.rawRadius * 5.0 + function onMouseOver (point) { + thisObject.targetRadius = thisObject.rawRadius * 6.0 thisObject.targetImageSize = thisObject.rawImageSize * 2.0 thisObject.targetFontSize = thisObject.rawFontSize * 2.0 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver') + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver', point) } - function onMouseNotOver () { + function onMouseNotOver (point) { thisObject.targetRadius = thisObject.rawRadius * 1 thisObject.targetImageSize = thisObject.rawImageSize * 1 thisObject.targetFontSize = thisObject.rawFontSize * 1 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver') + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver', point) } function onMouseClick (pPoint) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 909a9ff8e..77747bc87 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -277,12 +277,12 @@ function newStrategyPart () { } function onMouseOver () { - thisObject.menu.container.eventHandler.raiseEvent('onMouseOver') + // thisObject.menu.container.eventHandler.raiseEvent('onMouseOver') isMouseOver = true } function onMouseNotOver () { - thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver') + // thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver') isMouseOver = false } @@ -399,7 +399,7 @@ function newStrategyPart () { if (label !== undefined) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius / 2 - fontSize * FONT_ASPECT_RATIO - 10 + y: position.y - radius / 3 - fontSize * FONT_ASPECT_RATIO - 10 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -412,7 +412,7 @@ function newStrategyPart () { if (label !== undefined && isMouseOver === true) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y + radius / 2 + fontSize * FONT_ASPECT_RATIO + 15 + y: position.y + radius / 3 + fontSize * FONT_ASPECT_RATIO + 15 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY diff --git a/Scales/RateScale.js b/Scales/RateScale.js index f448c6aee..300587042 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -33,7 +33,7 @@ function newRateScale () { } } - let visible = false + let visible = true let timeLineCoordinateSystem return thisObject diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 6ed8308da..ab3712520 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -27,7 +27,7 @@ function newTimePeriodScale () { } } - let visible = false + let visible = true let timeLineCoordinateSystem let objectStorage = {} let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 5ceb30589..5cc926436 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -27,7 +27,7 @@ function newTimeScale () { } } - let visible = false + let visible = true let timeLineCoordinateSystem return thisObject