From 141dbb188c436626771b74197db6464915549f07 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 28 Apr 2019 08:30:04 +0200 Subject: [PATCH 01/15] Cleaning unused files --- Candle.js | 15 --------------- VolumeBar.js | 10 ---------- 2 files changed, 25 deletions(-) delete mode 100644 Candle.js delete mode 100644 VolumeBar.js diff --git a/Candle.js b/Candle.js deleted file mode 100644 index f04ac6ec2..000000000 --- a/Candle.js +++ /dev/null @@ -1,15 +0,0 @@ -function newCandle () { - let candle = { - open: undefined, - close: undefined, - min: 10000000000000, - max: 0, - begin: undefined, - end: undefined, - direction: undefined, - beginId: undefined, - endId: undefined - } - - return candle -} diff --git a/VolumeBar.js b/VolumeBar.js deleted file mode 100644 index dc86ab466..000000000 --- a/VolumeBar.js +++ /dev/null @@ -1,10 +0,0 @@ - function newVolumeBar () { - var volumeBar = { - amountBuy: 0, - amountSell: 0, - begin: undefined, - end: undefined - } - - return volumeBar - } From 9df9ad15802dbcc326bb0ef28687ba4e73bcf926 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 28 Apr 2019 08:50:39 +0200 Subject: [PATCH 02/15] Fixing BUG whe reloading page a different timePeriod Appeared. --- Scales/RateScale.js | 5 ----- Scales/TimePeriodScale.js | 6 +----- Scales/TimeScale.js | 5 ----- 3 files changed, 1 insertion(+), 15 deletions(-) diff --git a/Scales/RateScale.js b/Scales/RateScale.js index 670128339..679dbe118 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -1,10 +1,5 @@ function newRateScale () { const MODULE_NAME = 'Right Scale' - const INFO_LOG = false - const INTENSIVE_LOG = false - const ERROR_LOG = true - const logger = newWebDebugLog() - logger.fileName = MODULE_NAME let thisObject = { container: undefined, diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index cb836d04e..4df23f8f5 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -1,10 +1,5 @@ function newTimePeriodScale () { const MODULE_NAME = 'Time Period Scale' - const INFO_LOG = false - const INTENSIVE_LOG = false - const ERROR_LOG = true - const logger = newWebDebugLog() - logger.fileName = MODULE_NAME let thisObject = { container: undefined, @@ -78,6 +73,7 @@ function newTimePeriodScale () { } } } + saveObjectState() newTimePeriod() } } diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index d994e99bc..316e4ea3d 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -1,10 +1,5 @@ function newTimeScale () { const MODULE_NAME = 'Time Scale' - const INFO_LOG = false - const INTENSIVE_LOG = false - const ERROR_LOG = true - const logger = newWebDebugLog() - logger.fileName = MODULE_NAME let thisObject = { container: undefined, From eb106f30a346ad12b92d26332485db4a4443c356 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 29 Apr 2019 08:51:36 +0200 Subject: [PATCH 03/15] Switch to show AAMaster Simulation without changing the code --- Panels/ProductsPanel.js | 5 ++++- Utilities.js | 16 ++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 8e7e1a99a..ce5fdbe11 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -82,7 +82,10 @@ if (bot.products !== undefined) { for (let k = 0; k < bot.products.length; k++) { let product = bot.products[k] - if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue } + + if (window.localStorage.getItem('Show AAMaster Layers') === null) { + if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue } + } /* Now we create Product objects */ let productCard = newProductCard() diff --git a/Utilities.js b/Utilities.js index cffc22713..c1aa877fe 100644 --- a/Utilities.js +++ b/Utilities.js @@ -153,3 +153,19 @@ function removeTime (datetime) { return dateOnly } + +function loadEmoji (pPath) { + let newImage + + newImage = new Image() + newImage.onload = onImageLoaded + + function onImageLoaded () { + newImage.isLoaded = true + } + + newImage.src = window.canvasApp.urlPrefix + 'Images/Emoji/' + pPath + + return newImage +} + From f234a5f3dfeec865ee090642a9cf969420686ea6 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 29 Apr 2019 11:36:07 +0200 Subject: [PATCH 04/15] Datetime BUG corrected --- Panels/ProductsPanel.js | 2 +- Scales/TimeScale.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index ce5fdbe11..45dc3deb1 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -41,7 +41,7 @@ thisObject.container.name = 'Layers @ ' + exchange + ' ' + market.assetB + '/' + market.assetA thisObject.container.frame.containerName = thisObject.container.name thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE - thisObject.container.frame.height = viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE; + thisObject.container.frame.height = UI_PANEL.HEIGHT.LARGE // viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE; var position = { x: viewPort.visibleArea.topLeft.x, diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 316e4ea3d..1516bcdef 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -178,7 +178,7 @@ to be visible at the top of the viewPort. */ y: point1.y - viewPort.margins.TOP } - let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem) date = new Date(date) let label = date.toUTCString() From 0d1d5717bcd144e4dfa6526daec9bc39b6c074a7 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 29 Apr 2019 16:30:03 +0200 Subject: [PATCH 05/15] printLabel Function --- Utilities.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/Utilities.js b/Utilities.js index c1aa877fe..8bc732ab9 100644 --- a/Utilities.js +++ b/Utilities.js @@ -169,3 +169,15 @@ function loadEmoji (pPath) { return newImage } +function printLabel (labelToPrint, x, y, opacity, fontSize) { + let labelPoint + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + + let label = '' + labelToPrint + + let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' + browserCanvasContext.fillText(label, x, y) +} From 9e13ec47c4bb7b8d9bbf5fe0603501f3dd904059 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 30 Apr 2019 13:36:35 +0200 Subject: [PATCH 06/15] Balance Controls Implemented --- Panels/ProductsPanel.js | 2 +- Spaces/BottomSpace.js | 71 +++++++++++++++++++++++++++++++++++++++++ Spaces/PanelsSpace.js | 8 ++--- UIControl.js | 55 +++++++++++++++++++++++++++++++ 4 files changed, 131 insertions(+), 5 deletions(-) create mode 100644 UIControl.js diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 45dc3deb1..0c532a7e0 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -45,7 +45,7 @@ var position = { x: viewPort.visibleArea.topLeft.x, - y: viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height + y: viewPort.visibleArea.topLeft.y// viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height } thisObject.container.frame.position = position diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 14b7c22a8..25938b9e2 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -5,6 +5,9 @@ function newBottomSpace () { container: undefined, draw: draw, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + createNewControl: createNewControl, + destroyControl: destroyControl, + getControl: getControl, initialize: initialize } @@ -14,6 +17,7 @@ function newBottomSpace () { container.isDraggeable = false + controlsMap = new Map() resize() return thisObject @@ -22,6 +26,57 @@ function newBottomSpace () { window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) } + function createNewControl (pType, pDrawFunction, pOwner) { + let control + + switch (pType) { + + case 'Over The Line': + { + control = newUIControl() + control.initialize() + control.drawFunction = pDrawFunction + break + } + } + + let controlArray = controlsMap.get(pOwner) + if (controlArray === undefined) { + controlArray = [] + controlsMap.set(pOwner, controlArray) + } + + controlArray.push(control) + + control.handle = Math.floor((Math.random() * 10000000) + 1) + + return control.handle + } + + function destroyControl (pControlHandle) { + for (let i = 0; i < thisObject.controls.length; i++) { + let control = thisObject.controls[i] + + if (control.handle === pControlHandle) { + thisObject.controls.splice(i, 1) // Delete item from array. + return + } + } + } + + function getControl (pControlHandle, pOwner) { + thisObject.controls = controlsMap.get(pOwner) + if (thisObject.controls != undefined) { + for (let i = 0; i < thisObject.controls.length; i++) { + let control = thisObject.controls[i] + + if (control.handle === pControlHandle) { + return control + } + } + } + } + function resize () { container.frame.position.x = 0 container.frame.position.y = viewPort.visibleArea.bottomLeft.y @@ -40,6 +95,22 @@ function newBottomSpace () { thisObject.container.frame.draw(false, false) drawBackground() + + thisObject.controls = controlsMap.get('Global') + if (thisObject.controls !== undefined) { + for (let i = 0; i < thisObject.controls.length; i++) { + let control = thisObject.controls[i] + control.draw() + } + } + + thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS) + if (thisObject.controls !== undefined) { + for (let i = 0; i < thisObject.controls.length; i++) { + let control = thisObject.controls[i] + control.draw() + } + } } function drawBackground () { diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 054510c84..89f7420b2 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -16,7 +16,7 @@ function newPanelsSpace () { initialize: initialize } - var container = newContainer() + let container = newContainer() container.initialize() thisObject.container = container thisObject.container.isDraggeable = false @@ -99,8 +99,8 @@ function newPanelsSpace () { thisObject.container.frame.draw(false, false) thisObject.panels = panelsMap.get('Global') - if (thisObject.panels != undefined) { - for (var i = 0; i < thisObject.panels.length; i++) { + if (thisObject.panels !== undefined) { + for (let i = 0; i < thisObject.panels.length; i++) { let panel = thisObject.panels[i] panel.draw() } @@ -108,7 +108,7 @@ function newPanelsSpace () { thisObject.panels = panelsMap.get(window.CHART_ON_FOCUS) if (thisObject.panels !== undefined) { - for (var i = 0; i < thisObject.panels.length; i++) { + for (let i = 0; i < thisObject.panels.length; i++) { let panel = thisObject.panels[i] panel.draw() } diff --git a/UIControl.js b/UIControl.js new file mode 100644 index 000000000..ab8a9de48 --- /dev/null +++ b/UIControl.js @@ -0,0 +1,55 @@ +function newUIControl () { + let thisObject = { + drawFunction: undefined, + paramsArray: undefined, + container: undefined, + draw: draw, + parentContainer: undefined, + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + initialize: initialize + } + + let isInitialized = false + /* Cointainer stuff */ + + let container = newContainer() + + container.name = 'UI Control' + container.initialize() + + container.isClickeable = true + + thisObject.container = container + thisObject.container.frame.containerName = 'Panel Tab Button' + + return thisObject + + function initialize () { + isInitialized = true + } + + function draw () { + if (isInitialized === false) { return } + + if (thisObject.drawFunction !== undefined && thisObject.paramsArray !== undefined) { + thisObject.drawFunction(thisObject.paramsArray) + } + } + + function getContainer (point) { + var container + + /* First we check if thisObject point is inside thisObject space. */ + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + /* Now we see which is the inner most container that has it */ + + return thisObject.container + } else { + /* This point does not belong to thisObject space. */ + + return undefined + } + } +} + From 8e2436d5de9e8dbcba9425de4f57ca3050f810f5 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 30 Apr 2019 15:21:51 +0200 Subject: [PATCH 07/15] REmoving Controls --- Spaces/BottomSpace.js | 23 ++++++++++++++++++----- Spaces/PanelsSpace.js | 4 ++++ 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 25938b9e2..eccf98ad2 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -54,12 +54,25 @@ function newBottomSpace () { } function destroyControl (pControlHandle) { - for (let i = 0; i < thisObject.controls.length; i++) { - let control = thisObject.controls[i] + thisObject.controls = controlsMap.get('Global') + if (thisObject.controls !== undefined) { + for (let i = 0; i < thisObject.controls.length; i++) { + let control = thisObject.controls[i] + if (control.handle === pControlHandle) { + thisObject.controls.splice(i, 1) // Delete item from array. + return + } + } + } - if (control.handle === pControlHandle) { - thisObject.controls.splice(i, 1) // Delete item from array. - return + thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS) + if (thisObject.controls !== undefined) { + for (let i = 0; i < thisObject.controls.length; i++) { + let control = thisObject.controls[i] + if (control.handle === pControlHandle) { + thisObject.controls.splice(i, 1) // Delete item from array. + return + } } } } diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 89f7420b2..151d5af65 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -76,6 +76,10 @@ function newPanelsSpace () { let panel = thisObject.panels[i] if (panel.handle === pPanelHandle) { + if (panel.finalize !== undefined) { + panel.finalize() + } + thisObject.panels.splice(i, 1) // Delete item from array. return } From 475ff0de3afd7f72c9c69705ba80f2ab250cdc85 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 1 May 2019 16:24:18 +0200 Subject: [PATCH 08/15] New Strategy Space added, connected to Strategizer --- Canvas.js | 41 ++++- Spaces/StrategySpace.js | 54 +++++++ StrategySpace/StrategyCollection.js | 228 ++++++++++++++++++++++++++++ TopSpace/Login.js | 9 +- WebDebugLog.js | 2 +- 5 files changed, 327 insertions(+), 7 deletions(-) create mode 100644 Spaces/StrategySpace.js create mode 100644 StrategySpace/StrategyCollection.js diff --git a/Canvas.js b/Canvas.js index 761054077..ec02e85ed 100644 --- a/Canvas.js +++ b/Canvas.js @@ -38,6 +38,7 @@ function newCanvas () { floatingSpace: undefined, panelsSpace: undefined, bottomSpace: undefined, + strategySpace: undefined, animation: undefined, initialize: initialize, finalize: finalize @@ -52,13 +53,14 @@ function newCanvas () { /* The canvas object represents a layer on top of the browser canvas object. - Graphically, thiscanvas object has 4 spaces: + Graphically, thiscanvas object has 5 spaces: 1. The "Top Space": It is where Team and User information is displayed. 2. The "Chart Space": It is where the charts are plotted. 3. The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow. 4. The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space. - 5. The "Bottom Space": Includes the breakpoint bar and a toolbar. + 5. The "Bottom Space": Includes UIControls that other panels can add there. + 6. The "Strategy Spece": Functionality to manage Strategies All these spaces are child objects of the Canvas object. @@ -78,6 +80,9 @@ function newCanvas () { | | ---> bottomSpace + | + | + ---> strategySpace */ function finalize () { @@ -120,6 +125,9 @@ function newCanvas () { thisObject.topSpace = newTopSpace() await thisObject.topSpace.initialize() + thisObject.strategySpace = newStrategySpace() + await thisObject.strategySpace.initialize() + thisObject.bottomSpace = newBottomSpace() thisObject.bottomSpace.initialize() @@ -168,6 +176,7 @@ function newCanvas () { animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded) animation.start(onStart) function onFunctionAdded (err) { @@ -298,6 +307,16 @@ function newCanvas () { let container + /* We check if the mouse is over an element of the Strategy Space / */ + + container = thisObject.strategySpace.getContainer(point) + + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } + /* We check if the mouse is over an element of the Top Space / */ container = thisObject.topSpace.getContainer(point) @@ -373,6 +392,15 @@ function newCanvas () { let container + /* We check if the mouse is over an element of the Strategy Space / */ + + container = thisObject.strategySpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + /* We check if the mouse is over an element of the Top Space / */ container = thisObject.topSpace.getContainer(point) @@ -506,6 +534,15 @@ function newCanvas () { let container + /* We check if the mouse is over an element of the Strategy Space / */ + + container = thisObject.strategySpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) + return + } + /* We check if the mouse is over an element of the Top Space / */ container = thisObject.topSpace.getContainer(point) diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js new file mode 100644 index 000000000..fd6a3f1cd --- /dev/null +++ b/Spaces/StrategySpace.js @@ -0,0 +1,54 @@ + +function newStrategySpace () { + let thisObject = { + container: undefined, + draw: draw, + strategyCollection: undefined, + getContainer: getContainer, + initialize: initialize + } + + let container = newContainer() + container.initialize() + thisObject.container = container + + resize() + + container.isDraggeable = false + + return thisObject + + async function initialize () { + thisObject.strategyCollection = newStrategyCollection() + await thisObject.strategyCollection.initialize() + + window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) + } + + function resize () { + thisObject.container.frame.width = viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x + thisObject.container.frame.height = viewPort.visibleArea.topLeft.y - viewPort.visibleArea.bottomLeft.y + + container.frame.position.x = viewPort.visibleArea.topLeft.x + container.frame.position.y = viewPort.visibleArea.topLeft.y + } + + function getContainer (point) { + let container + + container = thisObject.strategyCollection.getContainer(point) + if (container !== undefined) { return container } + + /* The point does not belong to any inner container, so we return the current container. */ + + return thisObject.container + } + + function draw () { + drawBackground() + } + + function drawBackground () { + + } +} diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js new file mode 100644 index 000000000..abc0ab273 --- /dev/null +++ b/StrategySpace/StrategyCollection.js @@ -0,0 +1,228 @@ + +function newStrategyCollection () { + const MODULE_NAME = 'Strategy Collection' + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, + initialize: initialize + } + + let container = newContainer() + container.initialize() + thisObject.container = container + + thisObject.container.frame.width = viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x + thisObject.container.frame.height = viewPort.visibleArea.topLeft.y - viewPort.visibleArea.bottomLeft.y + + container.frame.position.x = viewPort.visibleArea.topLeft.x + container.frame.position.y = viewPort.visibleArea.topLeft.y + + container.isDraggeable = false + container.isClickeable = true + + return thisObject + + async function initialize () { + try { + const accessToken = window.localStorage.getItem('access_token') + let user = window.localStorage.getItem('user') + + if (user === null) { + // if there is no user that means that we are logged off, which means this object can not be used. + return + } + + thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick) + + user = JSON.parse(user) + + const authId = user.authId + + let sessionToken + + const apolloClient = new Apollo.lib.ApolloClient({ + networkInterface: Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl, + transportBatching: true + }), + connectToDevTools: true + }) + + /* Getting the FB that own the Strategies */ + + let strategySimulationClone = '' + let clones = window.localStorage.getItem('userClones') + if (clones === null || clones === '') { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> no user clones found at local storage. Can not get Strategies without them. ') } + return + } + clones = JSON.parse(clones) + for (let i = 0; i < clones.length; i++) { + let clone = clones[i] + if (clone.botType === 'Indicator') { + strategySimulationClone = clone.botSlug + } + } + + /* Getting all Strategies */ + + const networkInterface = Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl + }) + + networkInterface.use([{ + applyMiddleware (req, next) { + req.options.headers = { + authorization: `Bearer ${accessToken}` + } + next() + } + }]) + + const QUERY = Apollo.gql` + query($fbSlug: String!){ + + strategizer_StrategyByFb(fbSlug: $fbSlug){ + subStrategies(activeOnly: true){ + name + entryPoint{ + situations{ + name + conditions{ + name + code + } + } + } + exitPoint{ + situations{ + name + conditions{ + name + code + } + } + } + sellPoint{ + situations{ + name + conditions{ + name + code + } + } + } + buyPoint{ + situations{ + name + conditions{ + name + code + } + } + } + stopLoss{ + phases{ + name + code + situations{ + name + conditions{ + name + code + } + } + } + } + buyOrder{ + phases{ + name + code + situations{ + name + conditions{ + name + code + } + } + } + } + sellOrder{ + phases{ + name + code + situations{ + name + conditions{ + name + code + } + } + } + } + } + } + } + ` + + const getStrategies = () => { + return new Promise((resolve, reject) => { + apolloClient.query({ + query: QUERY, + variables: { fbSlug: strategySimulationClone} + }) + .then(response => { + window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) + let strategies = response.data.strategizer_StrategyByFb.subStrategies + resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) + }) + .catch(error => { + console.log('apolloClient error getting user strategies', error.graphQLErrors, error.stack) + reject(error) + }) + }) + } + + // To avoid race conditions, add asynchronous fetches to array + let fetchDataPromises = [] + + fetchDataPromises.push(getStrategies()) + + // When all asynchronous fetches resolve, authenticate user or throw error. + await Promise.all(fetchDataPromises).then(result => { + + }, err => { + console.error('[ERROR] Login -> GraphQL Fetch Error -> err = ', err.stack) + }) + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + } + } + + function onClick () { + + } + + function getContainer (point) { + let container + + /* First we check if this point is inside this object UI. */ + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return this.container + } else { + /* This point does not belong to this space. */ + + return undefined + } + } + + function draw () { + return // nothing to show. + } +} diff --git a/TopSpace/Login.js b/TopSpace/Login.js index bca896575..7d242191c 100644 --- a/TopSpace/Login.js +++ b/TopSpace/Login.js @@ -5,6 +5,7 @@ function newLogin () { const INTENSIVE_LOG = false const ERROR_LOG = true const logger = newWebDebugLog() + logger.fileName = MODULE_NAME let thisObject = { container: undefined, @@ -100,7 +101,7 @@ function newLogin () { resolve({ user: response.data.users_UserByAuthId}) }) .catch(error => { - console.log('apolloClient error getting user query', error) + console.log('apolloClient error getting user query', error.graphQLErrors, error.stack) reject(error) }) }) @@ -170,7 +171,7 @@ function newLogin () { resolve({ teams: response.data.teams_TeamsByOwner}) }) .catch(error => { - console.log('apolloClient error getting user teams', error) + console.log('apolloClient error getting user teams', error.graphQLErrors, error.stack) reject(error) }) }) @@ -233,7 +234,7 @@ function newLogin () { resolve({ currentEvents: response.data.events_Events}) }) .catch(error => { - console.log('apolloClient error getting current events', error) + console.log('apolloClient error getting current events', error.graphQLErrors, error.stack) reject(error) }) }) @@ -320,7 +321,7 @@ function newLogin () { resolve({ clones: response.data.operations_Clones}) }) .catch(error => { - console.log('apolloClient error getting user clones', error) + console.log('apolloClient error getting user clones', error.graphQLErrors, error.stack) reject(error) }) }) diff --git a/WebDebugLog.js b/WebDebugLog.js index 9845f59dc..b6aa23539 100644 --- a/WebDebugLog.js +++ b/WebDebugLog.js @@ -2,7 +2,7 @@ function newWebDebugLog () { let thisObject = { write: write, - fileName: undefined + fileName: 'undefined' } return thisObject From 72efde7021b1c719656154feab534bdc8616c3b9 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 1 May 2019 19:14:42 +0200 Subject: [PATCH 09/15] Side Panel Working --- Canvas.js | 4 + ControlsToolBox/SidePanel.js | 109 ++++++++++++++++++ ControlsToolBox/SidePanelTab.js | 192 ++++++++++++++++++++++++++++++++ Globals.js | 1 + Spaces/StrategySpace.js | 28 ++--- 5 files changed, 315 insertions(+), 19 deletions(-) create mode 100644 ControlsToolBox/SidePanel.js create mode 100644 ControlsToolBox/SidePanelTab.js diff --git a/Canvas.js b/Canvas.js index ec02e85ed..f4c090d6e 100644 --- a/Canvas.js +++ b/Canvas.js @@ -317,6 +317,10 @@ function newCanvas () { return } + if (container !== undefined && container.isDraggeable === false) { + return + } + /* We check if the mouse is over an element of the Top Space / */ container = thisObject.topSpace.getContainer(point) diff --git a/ControlsToolBox/SidePanel.js b/ControlsToolBox/SidePanel.js new file mode 100644 index 000000000..a61e1aecf --- /dev/null +++ b/ControlsToolBox/SidePanel.js @@ -0,0 +1,109 @@ +function newSidePanel () { + const MODULE_NAME = 'Side Panel' + let thisObject = { + sidePanelTab: undefined, + container: undefined, + draw: draw, + getContainer: getContainer, + initialize: initialize + } + + const SIDE_PANEL_WIDTH = 450 + const SIDE_PANEL_TAB_WIDTH = 400 + + let isInitialized = false + + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize() + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + + resize() + return thisObject + + function initialize () { + thisObject.sidePanelTab = newSidePanelTab() + thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false) + thisObject.sidePanelTab.initialize() + + window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) + isInitialized = true + } + + function resize () { + thisObject.container.frame.width = SIDE_PANEL_WIDTH + thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT + thisObject.container.frame.position.x = -SIDE_PANEL_WIDTH + thisObject.container.frame.position.y = 0 // TOP_SPACE_HEIGHT + } + + function getContainer (point) { + let container + + container = thisObject.sidePanelTab.getContainer(point) + if (container !== undefined) { return container } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function draw () { + if (isInitialized === false) { return } + borders() + thisObject.sidePanelTab.draw() + } + + function borders () { + let point1 + let point2 + let point3 + let point4 + + point1 = { + x: 0, + y: 0 + } + + point2 = { + x: thisObject.container.frame.width, + y: 0 + } + + point3 = { + x: thisObject.container.frame.width, + y: thisObject.container.frame.height + } + + point4 = { + x: 0, + y: thisObject.container.frame.height + } + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + point4 = thisObject.container.frame.frameThisPoint(point4) + + browserCanvasContext.setLineDash([0, 0]) + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.lineTo(point1.x, point1.y) + browserCanvasContext.closePath() + + let opacity = 1 + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT + ', ' + opacity + '' + browserCanvasContext.fill() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + '' + browserCanvasContext.lineWidth = 0.3 + browserCanvasContext.stroke() + } +} diff --git a/ControlsToolBox/SidePanelTab.js b/ControlsToolBox/SidePanelTab.js new file mode 100644 index 000000000..70182c117 --- /dev/null +++ b/ControlsToolBox/SidePanelTab.js @@ -0,0 +1,192 @@ +function newSidePanelTab () { + const MODULE_NAME = 'Side Panel Tab' + let thisObject = { + pointerDirection: 'left', + container: undefined, + draw: draw, + getContainer: getContainer, + initialize: initialize + } + + const TAB_WIDTH = 20 + const TAB_HEIGHT = 60 + + let isInitialized = false + let animation = 'none' + let ORIGINAL_PARENT_POSITON + let xOffset = 0 + + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize() + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + + return thisObject + + function initialize () { + thisObject.container.frame.width = TAB_WIDTH + thisObject.container.frame.height = TAB_HEIGHT + thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width + thisObject.container.frame.position.y = 20 + + ORIGINAL_PARENT_POSITON = thisObject.container.parentContainer.frame.position.x + + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + isInitialized = true + } + + function onMouseClick (event) { + if (thisObject.pointerDirection === 'left') { + animation = 'opening' + } else { + animation = 'closing' + } + } + + function getContainer (point) { + let container + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function draw () { + if (isInitialized === false) { return } + animate() + borders() + arrow() + } + + function animate () { + const STEP = 50 + + if (animation === 'opening') { + xOffset = xOffset + STEP + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset + if (xOffset > thisObject.container.parentContainer.frame.width) { + animation = 'none' + xOffset = thisObject.container.parentContainer.frame.width + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset + thisObject.pointerDirection = 'right' + } + } + + if (animation === 'closing') { + xOffset = xOffset - STEP + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset + if (xOffset < 0) { + animation = 'none' + xOffset = 0 + thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + thisObject.pointerDirection = 'left' + } + } + } + + function arrow () { + let point1 + let point2 + let point3 + + if (thisObject.pointerDirection === 'left') { + point1 = { + x: TAB_WIDTH * 1 / 5, + y: TAB_HEIGHT * 12 / 30 + } + + point2 = { + x: TAB_WIDTH * 3 / 5, + y: TAB_HEIGHT * 15 / 30 + } + + point3 = { + x: TAB_WIDTH * 1 / 5, + y: TAB_HEIGHT * 18 / 30 + } + } else { + point1 = { + x: TAB_WIDTH * 3 / 5, + y: TAB_HEIGHT * 12 / 30 + } + + point2 = { + x: TAB_WIDTH * 1 / 5, + y: TAB_HEIGHT * 15 / 30 + } + + point3 = { + x: TAB_WIDTH * 3 / 5, + y: TAB_HEIGHT * 18 / 30 + } + } + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.closePath() + + let opacity = 1 + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + '' + browserCanvasContext.fill() + } + + function borders () { + let point1 + let point2 + let point3 + let point4 + + point1 = { + x: 0, + y: 0 + } + + point2 = { + x: TAB_WIDTH, + y: 0 + } + + point3 = { + x: TAB_WIDTH, + y: TAB_HEIGHT + } + + point4 = { + x: 0, + y: TAB_HEIGHT + } + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + point4 = thisObject.container.frame.frameThisPoint(point4) + + browserCanvasContext.setLineDash([0, 0]) + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.lineTo(point1.x, point1.y) + browserCanvasContext.closePath() + + let opacity = 1 + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + '' + browserCanvasContext.fill() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + '' + browserCanvasContext.lineWidth = 0.3 + browserCanvasContext.stroke() + } +} + diff --git a/Globals.js b/Globals.js index 30c706c36..55bedccba 100644 --- a/Globals.js +++ b/Globals.js @@ -17,6 +17,7 @@ const DEFAULT_MARKET = { UI_COLOR = { DARK: "48, 48, 54", + GREY: "150, 150, 150", LIGHT: "234, 226, 222", WHITE: "255, 255, 255", GOLDEN_ORANGE: "240, 162, 2", diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index fd6a3f1cd..ebc5b393d 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -1,9 +1,11 @@ function newStrategySpace () { + const MODULE_NAME = 'Strategy Space' let thisObject = { + sidePanel: undefined, + strategyCollection: undefined, container: undefined, draw: draw, - strategyCollection: undefined, getContainer: getContainer, initialize: initialize } @@ -12,8 +14,6 @@ function newStrategySpace () { container.initialize() thisObject.container = container - resize() - container.isDraggeable = false return thisObject @@ -22,15 +22,8 @@ function newStrategySpace () { thisObject.strategyCollection = newStrategyCollection() await thisObject.strategyCollection.initialize() - window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) - } - - function resize () { - thisObject.container.frame.width = viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x - thisObject.container.frame.height = viewPort.visibleArea.topLeft.y - viewPort.visibleArea.bottomLeft.y - - container.frame.position.x = viewPort.visibleArea.topLeft.x - container.frame.position.y = viewPort.visibleArea.topLeft.y + thisObject.sidePanel = newSidePanel() + thisObject.sidePanel.initialize() } function getContainer (point) { @@ -39,16 +32,13 @@ function newStrategySpace () { container = thisObject.strategyCollection.getContainer(point) if (container !== undefined) { return container } - /* The point does not belong to any inner container, so we return the current container. */ + container = thisObject.sidePanel.getContainer(point) + if (container !== undefined) { return container } - return thisObject.container + return } function draw () { - drawBackground() - } - - function drawBackground () { - + thisObject.sidePanel.draw() } } From 64d8ac3f032e89f392212268cb26ad446f9534fd Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 2 May 2019 09:31:17 +0200 Subject: [PATCH 10/15] Side Panel with shadows --- ControlsToolBox/SidePanel.js | 22 ++++++++++++++- ControlsToolBox/SidePanelTab.js | 48 ++++++++++++++++++++++++--------- Globals.js | 6 +++-- 3 files changed, 61 insertions(+), 15 deletions(-) diff --git a/ControlsToolBox/SidePanel.js b/ControlsToolBox/SidePanel.js index a61e1aecf..f71684bb2 100644 --- a/ControlsToolBox/SidePanel.js +++ b/ControlsToolBox/SidePanel.js @@ -18,6 +18,7 @@ function newSidePanel () { thisObject.container.initialize() thisObject.container.isClickeable = true thisObject.container.isDraggeable = false + thisObject.container.status = 'hidden' resize() return thisObject @@ -99,11 +100,30 @@ function newSidePanel () { let opacity = 1 - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT + ', ' + opacity + '' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + opacity + '' browserCanvasContext.fill() browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + '' browserCanvasContext.lineWidth = 0.3 browserCanvasContext.stroke() + + /* Shadow */ + + if (thisObject.container.status !== 'hidden') { + for (let i = 0; i <= 30; i++) { + opacity = 1 - (i / 300) - 0.95 + + browserCanvasContext.setLineDash([0, 0]) + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point2.x + i, point2.y) + browserCanvasContext.lineTo(point3.x + i, point3.y) + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + '' + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + } + } } } + diff --git a/ControlsToolBox/SidePanelTab.js b/ControlsToolBox/SidePanelTab.js index 70182c117..8bd0bd253 100644 --- a/ControlsToolBox/SidePanelTab.js +++ b/ControlsToolBox/SidePanelTab.js @@ -8,7 +8,7 @@ function newSidePanelTab () { initialize: initialize } - const TAB_WIDTH = 20 + const TAB_WIDTH = 25 const TAB_HEIGHT = 60 let isInitialized = false @@ -70,6 +70,7 @@ function newSidePanelTab () { animation = 'none' xOffset = thisObject.container.parentContainer.frame.width thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset + thisObject.container.parentContainer.status = 'visible' thisObject.pointerDirection = 'right' } } @@ -81,6 +82,7 @@ function newSidePanelTab () { animation = 'none' xOffset = 0 thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + thisObject.container.parentContainer.status = 'hidden' thisObject.pointerDirection = 'left' } } @@ -93,33 +95,33 @@ function newSidePanelTab () { if (thisObject.pointerDirection === 'left') { point1 = { - x: TAB_WIDTH * 1 / 5, - y: TAB_HEIGHT * 12 / 30 + x: TAB_WIDTH * 3.5 / 10, + y: TAB_HEIGHT * 12.5 / 30 } point2 = { - x: TAB_WIDTH * 3 / 5, + x: TAB_WIDTH * 6.5 / 10, y: TAB_HEIGHT * 15 / 30 } point3 = { - x: TAB_WIDTH * 1 / 5, - y: TAB_HEIGHT * 18 / 30 + x: TAB_WIDTH * 3.5 / 10, + y: TAB_HEIGHT * 17.5 / 30 } } else { point1 = { - x: TAB_WIDTH * 3 / 5, - y: TAB_HEIGHT * 12 / 30 + x: TAB_WIDTH * 6.5 / 10, + y: TAB_HEIGHT * 12.5 / 30 } point2 = { - x: TAB_WIDTH * 1 / 5, + x: TAB_WIDTH * 3.5 / 10, y: TAB_HEIGHT * 15 / 30 } point3 = { - x: TAB_WIDTH * 3 / 5, - y: TAB_HEIGHT * 18 / 30 + x: TAB_WIDTH * 6.5 / 10, + y: TAB_HEIGHT * 17.5 / 30 } } @@ -170,6 +172,28 @@ function newSidePanelTab () { point3 = thisObject.container.frame.frameThisPoint(point3) point4 = thisObject.container.frame.frameThisPoint(point4) + let opacity + + /* Shadow */ + + for (let i = 0; i <= 5; i++) { + opacity = 1 - (i / 100) - 0.93 + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x + i, point1.y + i) + browserCanvasContext.lineTo(point2.x + i, point2.y + i) + browserCanvasContext.lineTo(point3.x + i, point3.y + i) + browserCanvasContext.lineTo(point4.x + i, point4.y + i) + browserCanvasContext.lineTo(point1.x + i, point1.y + i) + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + '' + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + } + + /* Background and Border */ + browserCanvasContext.setLineDash([0, 0]) browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) @@ -179,7 +203,7 @@ function newSidePanelTab () { browserCanvasContext.lineTo(point1.x, point1.y) browserCanvasContext.closePath() - let opacity = 1 + opacity = 1 browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + '' browserCanvasContext.fill() diff --git a/Globals.js b/Globals.js index 55bedccba..4fa5de32a 100644 --- a/Globals.js +++ b/Globals.js @@ -17,9 +17,11 @@ const DEFAULT_MARKET = { UI_COLOR = { DARK: "48, 48, 54", - GREY: "150, 150, 150", LIGHT: "234, 226, 222", + GREY: "150, 150, 150", + LIGHT_GREY: "247, 247, 247", WHITE: "255, 255, 255", + BLACK: "0, 0, 0", GOLDEN_ORANGE: "240, 162, 2", RUSTED_RED: "204, 88, 53", GREEN: "188, 214, 67", @@ -152,7 +154,7 @@ let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS // This value will be overwrit let maxDate = new Date(); maxDate.setMilliseconds(0); -maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that projects data into the future. +maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that projects data into the future. const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; From b48450eb66302d77affe107ad386a1fe339d30ea Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 2 May 2019 11:22:54 +0200 Subject: [PATCH 11/15] Strategy List appearing --- Canvas.js | 2 +- ControlsToolBox/SidePanel.js | 7 ++++++- Spaces/StrategySpace.js | 1 + StrategySpace/StrategyCollection.js | 26 ++++++++++++++++++++++++-- 4 files changed, 32 insertions(+), 4 deletions(-) diff --git a/Canvas.js b/Canvas.js index f4c090d6e..fceef9090 100644 --- a/Canvas.js +++ b/Canvas.js @@ -172,11 +172,11 @@ function newCanvas () { animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded) animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded) + animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) animation.start(onStart) function onFunctionAdded (err) { diff --git a/ControlsToolBox/SidePanel.js b/ControlsToolBox/SidePanel.js index f71684bb2..6b68073e3 100644 --- a/ControlsToolBox/SidePanel.js +++ b/ControlsToolBox/SidePanel.js @@ -1,6 +1,7 @@ function newSidePanel () { const MODULE_NAME = 'Side Panel' let thisObject = { + areas: [], sidePanelTab: undefined, container: undefined, draw: draw, @@ -56,6 +57,11 @@ function newSidePanel () { if (isInitialized === false) { return } borders() thisObject.sidePanelTab.draw() + + for (let i = 0; i < thisObject.areas.length; i++) { + let area = thisObject.areas[i] + area.draw() + } } function borders () { @@ -126,4 +132,3 @@ function newSidePanel () { } } } - diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index ebc5b393d..59a87f3e9 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -24,6 +24,7 @@ function newStrategySpace () { thisObject.sidePanel = newSidePanel() thisObject.sidePanel.initialize() + thisObject.sidePanel.areas.push(thisObject.strategyCollection) } function getContainer (point) { diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index abc0ab273..d3c65f497 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -6,6 +6,7 @@ function newStrategyCollection () { logger.fileName = MODULE_NAME let thisObject = { + collection: undefined, container: undefined, draw: draw, getContainer: getContainer, @@ -178,7 +179,7 @@ function newStrategyCollection () { }) .then(response => { window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - let strategies = response.data.strategizer_StrategyByFb.subStrategies + thisObject.collection = response.data.strategizer_StrategyByFb.subStrategies resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) .catch(error => { @@ -223,6 +224,27 @@ function newStrategyCollection () { } function draw () { - return // nothing to show. + if (thisObject.collection === undefined) { + return + } + + const ROW_HEIGHT = 50 + const LEFT_MARGIN = 50 + const TOP_MARGIN = 10 + + for (let i = 0; i < thisObject.collection.length; i++) { + let strategy = thisObject.collection[i] + + let labelPoint = { + x: LEFT_MARGIN, + y: TOP_MARGIN + i * ROW_HEIGHT + } + + let labelToPrint = strategy.name + let opacity = 1 + let fontSize = 12 + + printLabel(labelToPrint, labelPoint.x, labelPoint.y, opacity, fontSize) + } } } From 54b300f9796a8bb9c6908499b5b25b5ac39246e7 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 2 May 2019 13:36:22 +0200 Subject: [PATCH 12/15] Collection Items Implemented --- Spaces/StrategySpace.js | 18 +-- StrategySpace/StrategyCollection.js | 68 ++++++----- StrategySpace/StrategyCollectionItem.js | 155 ++++++++++++++++++++++++ 3 files changed, 201 insertions(+), 40 deletions(-) create mode 100644 StrategySpace/StrategyCollectionItem.js diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 59a87f3e9..befe0c9d4 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -19,23 +19,23 @@ function newStrategySpace () { return thisObject async function initialize () { - thisObject.strategyCollection = newStrategyCollection() - await thisObject.strategyCollection.initialize() - thisObject.sidePanel = newSidePanel() thisObject.sidePanel.initialize() + + thisObject.strategyCollection = newStrategyCollection() + thisObject.strategyCollection.container.connectToParent(thisObject.sidePanel.container, true, true) + await thisObject.strategyCollection.initialize() + thisObject.sidePanel.areas.push(thisObject.strategyCollection) } function getContainer (point) { let container - container = thisObject.strategyCollection.getContainer(point) - if (container !== undefined) { return container } - - container = thisObject.sidePanel.getContainer(point) - if (container !== undefined) { return container } - + if (thisObject.sidePanel !== undefined) { + container = thisObject.sidePanel.getContainer(point) + if (container !== undefined) { return container } + } return } diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index d3c65f497..e97dfa2a6 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -6,32 +6,34 @@ function newStrategyCollection () { logger.fileName = MODULE_NAME let thisObject = { - collection: undefined, + strategies: undefined, container: undefined, draw: draw, getContainer: getContainer, initialize: initialize } - let container = newContainer() - container.initialize() - thisObject.container = container + let colletionItems = [] - thisObject.container.frame.width = viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x - thisObject.container.frame.height = viewPort.visibleArea.topLeft.y - viewPort.visibleArea.bottomLeft.y + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize() - container.frame.position.x = viewPort.visibleArea.topLeft.x - container.frame.position.y = viewPort.visibleArea.topLeft.y + thisObject.container.frame.width = 0 + thisObject.container.frame.height = 0 - container.isDraggeable = false - container.isClickeable = true + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + + thisObject.container.isDraggeable = false + thisObject.container.isClickeable = true return thisObject async function initialize () { try { - const accessToken = window.localStorage.getItem('access_token') - let user = window.localStorage.getItem('user') + const accessToken = window.localStorage.getItem('xaccess_token') + let user = window.localStorage.getItem('xuser') if (user === null) { // if there is no user that means that we are logged off, which means this object can not be used. @@ -179,7 +181,8 @@ function newStrategyCollection () { }) .then(response => { window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - thisObject.collection = response.data.strategizer_StrategyByFb.subStrategies + thisObject.strategies = response.data.strategizer_StrategyByFb.subStrategies + createCollectionItems() resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) .catch(error => { @@ -205,6 +208,23 @@ function newStrategyCollection () { } } + function createCollectionItems () { + const TOP_MARGIN = 100 + const ITEMS_SEPARATION = 70 + + for (let i = 0; i < thisObject.strategies.length; i++) { + let strategy = thisObject.strategies[i] + let collectionItem = newStrategyCollectionItem() + + collectionItem.container.connectToParent(thisObject.container, false, false) + collectionItem.initialize() + collectionItem.strategy = strategy + collectionItem.container.frame.position.y = i * ITEMS_SEPARATION + TOP_MARGIN + + colletionItems.push(collectionItem) + } + } + function onClick () { } @@ -224,27 +244,13 @@ function newStrategyCollection () { } function draw () { - if (thisObject.collection === undefined) { + if (colletionItems === undefined) { return } - const ROW_HEIGHT = 50 - const LEFT_MARGIN = 50 - const TOP_MARGIN = 10 - - for (let i = 0; i < thisObject.collection.length; i++) { - let strategy = thisObject.collection[i] - - let labelPoint = { - x: LEFT_MARGIN, - y: TOP_MARGIN + i * ROW_HEIGHT - } - - let labelToPrint = strategy.name - let opacity = 1 - let fontSize = 12 - - printLabel(labelToPrint, labelPoint.x, labelPoint.y, opacity, fontSize) + for (let i = 0; i < colletionItems.length; i++) { + let item = colletionItems[i] + item.draw() } } } diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js new file mode 100644 index 000000000..53767ee7b --- /dev/null +++ b/StrategySpace/StrategyCollectionItem.js @@ -0,0 +1,155 @@ +function newStrategyCollectionItem () { + const MODULE_NAME = 'Strategy Collection Item' + let thisObject = { + strategy: undefined, + container: undefined, + draw: draw, + getContainer: getContainer, + initialize: initialize + } + + let isInitialized = false + + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize() + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + + return thisObject + + function initialize () { + const ITEM_WIDTH = 400 + const ITEM_HEIGHT = 60 + + thisObject.container.frame.width = ITEM_WIDTH + thisObject.container.frame.height = ITEM_HEIGHT + + const LEFT_MARGIN = (thisObject.container.parentContainer.frame.width - thisObject.container.frame.width) / 2 + const TOP_MARGIN = 100 + + thisObject.container.frame.position.x = LEFT_MARGIN + thisObject.container.frame.position.y = TOP_MARGIN + + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + isInitialized = true + } + + function onMouseClick (event) { + + } + + function getContainer (point) { + let container + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function draw () { + if (isInitialized === false) { return } + + borders() + text() + } + + function text () { + if (thisObject.strategy === undefined) { + return + } + + const LEFT_MARGIN = 50 + const TOP_MARGIN = 30 + + let strategy = thisObject.strategy + + let labelPoint = { + x: LEFT_MARGIN, + y: TOP_MARGIN + } + + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + + let labelToPrint = strategy.name + labelToPrint = labelToPrint.toUpperCase() + labelToPrint = labelToPrint.substring(0, 30) + let opacity = 1 + let fontSize = 15 + + printLabel(labelToPrint, labelPoint.x, labelPoint.y, opacity, fontSize) + } + + function borders () { + let point1 + let point2 + let point3 + let point4 + + point1 = { + x: 0, + y: 0 + } + + point2 = { + x: thisObject.container.frame.width, + y: 0 + } + + point3 = { + x: thisObject.container.frame.width, + y: thisObject.container.frame.height + } + + point4 = { + x: 0, + y: thisObject.container.frame.height + } + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + point4 = thisObject.container.frame.frameThisPoint(point4) + + let opacity + + /* Shadow */ + + for (let i = 0; i <= 5; i++) { + opacity = 1 - (i / 100) - 0.93 + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x + i, point1.y + i) + browserCanvasContext.lineTo(point2.x + i, point2.y + i) + browserCanvasContext.lineTo(point3.x + i, point3.y + i) + browserCanvasContext.lineTo(point4.x + i, point4.y + i) + browserCanvasContext.lineTo(point1.x + i, point1.y + i) + browserCanvasContext.closePath() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + '' + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + } + + /* Background and Border */ + + browserCanvasContext.setLineDash([0, 0]) + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + browserCanvasContext.lineTo(point4.x, point4.y) + browserCanvasContext.lineTo(point1.x, point1.y) + browserCanvasContext.closePath() + + opacity = 1 + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + '' + browserCanvasContext.fill() + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + '' + browserCanvasContext.lineWidth = 0.3 + browserCanvasContext.stroke() + } +} From 518efd58b6473adc9d498d5637e2f443716be3e3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 2 May 2019 17:06:46 +0200 Subject: [PATCH 13/15] Rounded Corners Working --- Frame.js | 50 +++------------------ StrategySpace/StrategyCollectionItem.js | 36 ++++----------- Utilities/RoundedCornersBackground.js | 58 +++++++++++++++++++++++++ 3 files changed, 72 insertions(+), 72 deletions(-) create mode 100644 Utilities/RoundedCornersBackground.js diff --git a/Frame.js b/Frame.js index 28df28c82..c7b6ce70c 100644 --- a/Frame.js +++ b/Frame.js @@ -290,25 +290,14 @@ function newFrame () { } function background () { - borderPoint1 = { - x: PANEL_CORNERS_RADIOUS, - y: PANEL_CORNERS_RADIOUS + let params = { + cornerRadious: 5, + lineWidth: 0.1, + opacity: 0.75, + container: frame.container } - borderPoint2 = { - x: frame.width - PANEL_CORNERS_RADIOUS, - y: PANEL_CORNERS_RADIOUS - } - - borderPoint3 = { - x: frame.width - PANEL_CORNERS_RADIOUS, - y: frame.height - PANEL_CORNERS_RADIOUS - } - - borderPoint4 = { - x: PANEL_CORNERS_RADIOUS, - y: frame.height - PANEL_CORNERS_RADIOUS - } + roundedCornersBackground(params) titleBarPoint1 = { x: 0, @@ -322,36 +311,9 @@ function newFrame () { /* Now the transformations. */ - borderPoint1 = frameThisPoint(borderPoint1) - borderPoint2 = frameThisPoint(borderPoint2) - borderPoint3 = frameThisPoint(borderPoint3) - borderPoint4 = frameThisPoint(borderPoint4) - titleBarPoint1 = frameThisPoint(titleBarPoint1) titleBarPoint2 = frameThisPoint(titleBarPoint2) - /* We paint the panel background first */ - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.75)' - browserCanvasContext.beginPath() - - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint3.x + PANEL_CORNERS_RADIOUS, borderPoint3.y) - browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, PANEL_CORNERS_RADIOUS, 0 * Math.PI, 0.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + PANEL_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, PANEL_CORNERS_RADIOUS, 0.5 * Math.PI, 1.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y) - - browserCanvasContext.closePath() - - browserCanvasContext.fill() - - browserCanvasContext.lineWidth = 0.1 - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.75)' - browserCanvasContext.stroke() - /* We paint the title bar now */ browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)' diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 53767ee7b..6b3f89209 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -82,37 +82,16 @@ function newStrategyCollectionItem () { } function borders () { - let point1 - let point2 - let point3 - let point4 - - point1 = { - x: 0, - y: 0 + let params = { + cornerRadious: 5, + lineWidth: 0.5, + opacity: 0.8, + container: thisObject.container } - point2 = { - x: thisObject.container.frame.width, - y: 0 - } + roundedCornersBackground(params) - point3 = { - x: thisObject.container.frame.width, - y: thisObject.container.frame.height - } - - point4 = { - x: 0, - y: thisObject.container.frame.height - } - - point1 = thisObject.container.frame.frameThisPoint(point1) - point2 = thisObject.container.frame.frameThisPoint(point2) - point3 = thisObject.container.frame.frameThisPoint(point3) - point4 = thisObject.container.frame.frameThisPoint(point4) - - let opacity + return /* Shadow */ @@ -153,3 +132,4 @@ function newStrategyCollectionItem () { browserCanvasContext.stroke() } } + diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js new file mode 100644 index 000000000..8a9edae8b --- /dev/null +++ b/Utilities/RoundedCornersBackground.js @@ -0,0 +1,58 @@ +function roundedCornersBackground (params) { + borderPoint1 = { + x: params.cornerRadious, + y: params.cornerRadious + } + + borderPoint2 = { + x: params.container.frame.width - params.cornerRadious, + y: params.cornerRadious + } + + borderPoint3 = { + x: params.container.frame.width - params.cornerRadious, + y: params.container.frame.height - params.cornerRadious + } + + borderPoint4 = { + x: params.cornerRadious, + y: params.container.frame.height - params.cornerRadious + } + + /* Now the transformations. */ + + borderPoint1 = params.container.frame.frameThisPoint(borderPoint1) + borderPoint2 = params.container.frame.frameThisPoint(borderPoint2) + borderPoint3 = params.container.frame.frameThisPoint(borderPoint3) + borderPoint4 = params.container.frame.frameThisPoint(borderPoint4) + + /* We paint the panel background */ + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + params.opacity + ')' + + browserCanvasContext.setLineDash([0, 0]) + + browserCanvasContext.beginPath() + + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadious) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious, borderPoint3.y) + browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadious) + browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious, borderPoint1.y) + + browserCanvasContext.closePath() + + browserCanvasContext.lineWidth = params.lineWidth * 15 + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.05 + ')' + browserCanvasContext.stroke() + + browserCanvasContext.fill() + + browserCanvasContext.lineWidth = params.lineWidth + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + params.opacity + ')' + browserCanvasContext.stroke() +} + From ae27f4ee8dacaee99d187a4b535ea8ccff763ba9 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 2 May 2019 17:35:42 +0200 Subject: [PATCH 14/15] Items displayed in text --- Frame.js | 4 +- StrategySpace/StrategyCollectionItem.js | 57 +++++-------------------- Utilities/RoundedCornersBackground.js | 43 +++++++++++++++---- 3 files changed, 48 insertions(+), 56 deletions(-) diff --git a/Frame.js b/Frame.js index c7b6ce70c..f7b3eec4f 100644 --- a/Frame.js +++ b/Frame.js @@ -294,7 +294,9 @@ function newFrame () { cornerRadious: 5, lineWidth: 0.1, opacity: 0.75, - container: frame.container + container: frame.container, + borderColor: UI_COLOR.DARK, + backgroundColor: UI_COLOR.WHITE } roundedCornersBackground(params) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 6b3f89209..afc92e31d 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -19,7 +19,7 @@ function newStrategyCollectionItem () { return thisObject function initialize () { - const ITEM_WIDTH = 400 + const ITEM_WIDTH = 430 const ITEM_HEIGHT = 60 thisObject.container.frame.width = ITEM_WIDTH @@ -60,8 +60,8 @@ function newStrategyCollectionItem () { return } - const LEFT_MARGIN = 50 - const TOP_MARGIN = 30 + const LEFT_MARGIN = 70 + const TOP_MARGIN = 35 let strategy = thisObject.strategy @@ -83,53 +83,16 @@ function newStrategyCollectionItem () { function borders () { let params = { - cornerRadious: 5, - lineWidth: 0.5, - opacity: 0.8, - container: thisObject.container + cornerRadious: 8, + lineWidth: 0.1, + opacity: 1, + container: thisObject.container, + borderColor: UI_COLOR.DARK, + backgroundColor: UI_COLOR.WHITE, + castShadow: true } roundedCornersBackground(params) - - return - - /* Shadow */ - - for (let i = 0; i <= 5; i++) { - opacity = 1 - (i / 100) - 0.93 - - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x + i, point1.y + i) - browserCanvasContext.lineTo(point2.x + i, point2.y + i) - browserCanvasContext.lineTo(point3.x + i, point3.y + i) - browserCanvasContext.lineTo(point4.x + i, point4.y + i) - browserCanvasContext.lineTo(point1.x + i, point1.y + i) - browserCanvasContext.closePath() - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + '' - browserCanvasContext.lineWidth = 1 - browserCanvasContext.stroke() - } - - /* Background and Border */ - - browserCanvasContext.setLineDash([0, 0]) - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.lineTo(point1.x, point1.y) - browserCanvasContext.closePath() - - opacity = 1 - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + '' - browserCanvasContext.fill() - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + '' - browserCanvasContext.lineWidth = 0.3 - browserCanvasContext.stroke() } } diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js index 8a9edae8b..76863de02 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/Utilities/RoundedCornersBackground.js @@ -26,12 +26,41 @@ function roundedCornersBackground (params) { borderPoint3 = params.container.frame.frameThisPoint(borderPoint3) borderPoint4 = params.container.frame.frameThisPoint(borderPoint4) - /* We paint the panel background */ - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + params.opacity + ')' - browserCanvasContext.setLineDash([0, 0]) + /* Shadow */ + + if (params.castShadow === true) { + let SHADOW_OFFSET = 2 + + browserCanvasContext.beginPath() + + browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadious + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadious + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET) + + browserCanvasContext.closePath() + + browserCanvasContext.lineWidth = 10 + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')' + browserCanvasContext.stroke() + + browserCanvasContext.lineWidth = 5 + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')' + browserCanvasContext.stroke() + + browserCanvasContext.lineWidth = 1 + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.15 + ')' + browserCanvasContext.stroke() + } + + /* Background */ + browserCanvasContext.beginPath() browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI) @@ -45,14 +74,12 @@ function roundedCornersBackground (params) { browserCanvasContext.closePath() - browserCanvasContext.lineWidth = params.lineWidth * 15 - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.05 + ')' - browserCanvasContext.stroke() + browserCanvasContext.fillStyle = 'rgba(' + params.backgroundColor + ', ' + params.opacity + ')' browserCanvasContext.fill() browserCanvasContext.lineWidth = params.lineWidth - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + params.opacity + ')' + browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')' browserCanvasContext.stroke() } From 4b6ada1a41ea653d69becf8679dd7bebdc765e3f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 2 May 2019 18:20:03 +0200 Subject: [PATCH 15/15] Images appearing well --- StrategySpace/StrategyCollection.js | 10 +++- StrategySpace/StrategyCollectionItem.js | 80 ++++++++++++++++++++++--- 2 files changed, 82 insertions(+), 8 deletions(-) diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index e97dfa2a6..2f7b52400 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -210,7 +210,7 @@ function newStrategyCollection () { function createCollectionItems () { const TOP_MARGIN = 100 - const ITEMS_SEPARATION = 70 + const ITEMS_SEPARATION = 90 for (let i = 0; i < thisObject.strategies.length; i++) { let strategy = thisObject.strategies[i] @@ -222,6 +222,14 @@ function newStrategyCollection () { collectionItem.container.frame.position.y = i * ITEMS_SEPARATION + TOP_MARGIN colletionItems.push(collectionItem) + + /* Load Strategies Icons */ + + let imageIndex = i + 1 + if (imageIndex > 14) { imageIndex = 14 } + + let strategyImage = loadEmoji('Symbols/Emoji Symbols-' + (112 + imageIndex) + '.png') + collectionItem.icon = strategyImage } } diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index afc92e31d..efc1a0eae 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -1,6 +1,7 @@ function newStrategyCollectionItem () { const MODULE_NAME = 'Strategy Collection Item' let thisObject = { + icon: undefined, strategy: undefined, container: undefined, draw: draw, @@ -20,7 +21,7 @@ function newStrategyCollectionItem () { function initialize () { const ITEM_WIDTH = 430 - const ITEM_HEIGHT = 60 + const ITEM_HEIGHT = 80 thisObject.container.frame.width = ITEM_WIDTH thisObject.container.frame.height = ITEM_HEIGHT @@ -41,7 +42,7 @@ function newStrategyCollectionItem () { function getContainer (point) { let container - if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThispointHere(point, true) === true) { return thisObject.container } else { return undefined @@ -53,6 +54,8 @@ function newStrategyCollectionItem () { borders() text() + arrow() + icon() } function text () { @@ -60,17 +63,17 @@ function newStrategyCollectionItem () { return } - const LEFT_MARGIN = 70 - const TOP_MARGIN = 35 + const LEFT_MARGIN = 80 + const TOP_MARGIN = 45 let strategy = thisObject.strategy - let labelPoint = { + let labelpoint = { x: LEFT_MARGIN, y: TOP_MARGIN } - labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + labelpoint = thisObject.container.frame.frameThisPoint(labelpoint) let labelToPrint = strategy.name labelToPrint = labelToPrint.toUpperCase() @@ -78,7 +81,7 @@ function newStrategyCollectionItem () { let opacity = 1 let fontSize = 15 - printLabel(labelToPrint, labelPoint.x, labelPoint.y, opacity, fontSize) + printLabel(labelToPrint, labelpoint.x, labelpoint.y, opacity, fontSize) } function borders () { @@ -94,5 +97,68 @@ function newStrategyCollectionItem () { roundedCornersBackground(params) } + + function arrow () { + const X_OFFSET = 400 + const Y_OFFSET = 40 + const HEIGHT = 12 + const WIDTH = 6 + const LINE_WIDTH = 2 + const OPACITY = 0.6 + + point1 = { + x: X_OFFSET, + y: Y_OFFSET - HEIGHT / 2 + } + + point2 = { + x: X_OFFSET + WIDTH, + y: Y_OFFSET + } + + point3 = { + x: X_OFFSET, + y: Y_OFFSET + HEIGHT / 2 + } + + /* Now the transformations. */ + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + + browserCanvasContext.setLineDash([0, 0]) + + /* The Arrow */ + + browserCanvasContext.beginPath() + + browserCanvasContext.moveTo(point1.x, point1.y) + browserCanvasContext.lineTo(point2.x, point2.y) + browserCanvasContext.lineTo(point3.x, point3.y) + + browserCanvasContext.lineWidth = LINE_WIDTH + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' + browserCanvasContext.stroke() + } + + function icon () { + if (thisObject.icon === undefined) { return } + + const X_OFFSET = 45 + const Y_OFFSET = 40 + const IMAGE_SIZE = 40 + + point1 = { + x: X_OFFSET, + y: Y_OFFSET + } + + /* Now the transformations. */ + + point1 = thisObject.container.frame.frameThisPoint(point1) + + browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) + } }