From fdaf32227812ee55eba4126786eda1df54a4c9b3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 10:41:14 +0200 Subject: [PATCH] Menu Item Click Working! --- Container.js | 34 ++++++++++++++++++++++++++++++- FloatingSpace/CircularMenu.js | 10 ++++----- FloatingSpace/CircularMenuItem.js | 4 ++-- FloatingSpace/FloatingObject.js | 33 +++++++++++++++++++----------- FloatingSpace/StrategyPart.js | 26 +++++++++++------------ 5 files changed, 73 insertions(+), 34 deletions(-) diff --git a/Container.js b/Container.js index 7a49461ab..b5d2872df 100644 --- a/Container.js +++ b/Container.js @@ -25,12 +25,16 @@ function newContainer () { let onDimmensionsChangedParentEvent = false let onMouseOverParentEvent = false let onMouseNotOverParentEvent = false + let onFocusParentEvent = false + let onNotFocusParentEvent = false let isConnectedToParent = false let dimensionsChangedEventSubscriptionId let onMouseOverEventSubscriptionId let onMouseNotOverEventSubscriptionId + let onFocusEventSubscriptionId + let onNotFocusEventSubscriptionId return thisObject @@ -39,6 +43,8 @@ function newContainer () { thisObject.parentContainer.eventHandler.stopListening(dimensionsChangedEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onMouseOverEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) + thisObject.parentContainer.eventHandler.stopListening(onFocusEventSubscriptionId) + thisObject.parentContainer.eventHandler.stopListening(onNotFocusEventSubscriptionId) } } @@ -59,7 +65,17 @@ function newContainer () { thisObject.displacement.containerName = pName } - function connectToParent (parentContainer, onWidth, onHeight, onRadius, onDimmensionsChangedEvent, onMouseOverEvent, onMouseNotOverEvent) { + function connectToParent ( + parentContainer, + onWidth, + onHeight, + onRadius, + onDimmensionsChangedEvent, + onMouseOverEvent, + onMouseNotOverEvent, + onFocusEvent, + onNotFocusEvent + ) { connectedToParentWidth = onWidth connectedToParentHeight = onHeight connectedToParentRadius = onRadius @@ -67,6 +83,8 @@ function newContainer () { onDimmensionsChangedParentEvent = onDimmensionsChangedEvent onMouseOverParentEvent = onMouseOverEvent onMouseNotOverParentEvent = onMouseNotOverEvent + onFocusParentEvent = onFocusEvent + onNotFocusParentEvent = onNotFocusEvent isConnectedToParent = true @@ -83,6 +101,12 @@ function newContainer () { if (onMouseNotOverParentEvent === true) { onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } + if (onFocusParentEvent === true) { + onFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onFocus', onFocus) + } + if (onNotFocusParentEvent === true) { + onNotFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onNotFocus', onNotFocus) + } if (connectedToParentWidth) { thisObject.frame.width = thisObject.parentContainer.frame.width @@ -123,6 +147,14 @@ function newContainer () { thisObject.eventHandler.raiseEvent('onMouseNotOver', event) } + function onFocus (event) { + thisObject.eventHandler.raiseEvent('onFocus', event) + } + + function onNotFocus (event) { + thisObject.eventHandler.raiseEvent('onNotFocus', event) + } + function isForThisPurpose (purpose) { if (purpose !== undefined) { switch (purpose) { diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 461419026..a54d3729b 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -42,12 +42,12 @@ function newCircularMenu () { menuItem.angle = menuItemInitialValue.angle menuItem.initialize() - menuItem.container.connectToParent(thisObject.container, false, false, true, true, true, true) + menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) menuItems.push(menuItem) } - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) + thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) } function getContainer (point) { @@ -69,7 +69,7 @@ function newCircularMenu () { } } - function onMouseOver () { + function onFocus () { for (let i = 0; i < menuItems.length; i++) { let menutItem = menuItems[i] menutItem.targetRadius = menutItem.rawRadius * 1.5 @@ -78,7 +78,7 @@ function newCircularMenu () { thisObject.isDeployed = true } - function onMouseNotOver () { + function onNotFocus () { for (let i = 0; i < menuItems.length; i++) { let menutItem = menuItems[i] menutItem.targetRadius = menutItem.rawRadius * 0 - i * 5 diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index f02a8ab08..f0e7899f5 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -55,15 +55,15 @@ function newCircularMenuItem () { thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn thisObject.icon = thisObject.iconOn // The default value is ON. - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { let container if (thisObject.isDeployed === true) { - if (thisObject.container.frame.isThisPointHere(point, true, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { return thisObject.container } else { return undefined diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 13b2eced3..30cccdf24 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -12,6 +12,7 @@ function newFloatingObject () { physics: physics, positionLocked: false, + isOnFocus: false, payload: undefined, // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here. type: undefined, // Currently there are two types of Floating Objects: Profile Balls, and Notes. @@ -89,7 +90,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() thisObject.underlayingObject.initialize(floatingLayer, pSubType) - thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, true, true) + thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) break } default: { @@ -167,14 +168,18 @@ function newFloatingObject () { } function onMouseOver (point) { - thisObject.targetRadius = thisObject.rawRadius * 6.0 - thisObject.targetImageSize = thisObject.rawImageSize * 2.0 - thisObject.targetFontSize = thisObject.rawFontSize * 2.0 + if (thisObject.isOnFocus === false) { + thisObject.targetRadius = thisObject.rawRadius * 6.0 + thisObject.targetImageSize = thisObject.rawImageSize * 2.0 + thisObject.targetFontSize = thisObject.rawFontSize * 2.0 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver', point) + thisObject.underlayingObject.container.eventHandler.raiseEvent('onFocus', point) - thisObject.positionLocked = true - canvas.floatingSpace.container.eventHandler.raiseEvent('onFocusAquired', thisObject.container) + thisObject.positionLocked = true + + canvas.floatingSpace.container.eventHandler.raiseEvent('onFocusAquired', thisObject.container) + thisObject.isOnFocus = true + } } function mouseOverFlotingSpace (point) { @@ -188,13 +193,16 @@ function newFloatingObject () { } function removeFocus () { - thisObject.targetRadius = thisObject.rawRadius * 1 - thisObject.targetImageSize = thisObject.rawImageSize * 1 - thisObject.targetFontSize = thisObject.rawFontSize * 1 + if (thisObject.isOnFocus === true) { + 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('onNotFocus') - thisObject.positionLocked = false + thisObject.positionLocked = false + thisObject.isOnFocus = false + } } function onMouseClick (pPoint) { @@ -304,3 +312,4 @@ function newFloatingObject () { } } + diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 30aa2b387..1602a60d4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -5,6 +5,7 @@ function newStrategyPart () { let thisObject = { type: undefined, menu: undefined, + isOnFocus: false, container: undefined, physics: physics, drawBackground: drawBackground, @@ -22,7 +23,6 @@ function newStrategyPart () { thisObject.container.frame.position.y = 0 let floatingLayer - let isMouseOver = false let image let imagePath @@ -240,7 +240,7 @@ function newStrategyPart () { thisObject.menu = newCircularMenu() thisObject.menu.initialize(menuItemsInitialValues) - thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, true, true) + thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) /* Load Part Image */ @@ -254,9 +254,9 @@ function newStrategyPart () { image.src = window.canvasApp.urlPrefix + imagePath } - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) + thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) - thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { @@ -276,14 +276,12 @@ function newStrategyPart () { thisObject.menu.physics() } - function onMouseOver () { - // thisObject.menu.container.eventHandler.raiseEvent('onMouseOver') - isMouseOver = true + function onFocus () { + thisObject.isOnFocus = true } - function onMouseNotOver () { - // thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver') - isMouseOver = false + function onNotFocus () { + thisObject.isOnFocus = false } function onMouseClick (event) { @@ -291,7 +289,7 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { - if (isMouseOver === false) { + if (thisObject.isOnFocus === false) { drawPartBackground(pFloatingObject) thisObject.menu.drawBackground() @@ -343,7 +341,7 @@ function newStrategyPart () { } function drawForeground (pFloatingObject) { - if (isMouseOver === true) { + if (thisObject.isOnFocus === true) { drawPartBackground(pFloatingObject) thisObject.menu.drawBackground() @@ -390,7 +388,7 @@ function newStrategyPart () { /* Label Text */ - if (radius > 6 && isMouseOver === true) { + if (radius > 6 && thisObject.isOnFocus === true) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle let labelPoint @@ -415,7 +413,7 @@ function newStrategyPart () { label = pFloatingObject.payload.profile.downLabel - if (label !== undefined && isMouseOver === true) { + if (label !== undefined && thisObject.isOnFocus === true) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, y: position.y + radius * 1 / 2 + fontSize * FONT_ASPECT_RATIO + 15