From c70632a0c3fa612a9c8abc0438b89543754ad2fc Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:02:27 +0200 Subject: [PATCH 001/221] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 03dec3aac..9e5542b16 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ The Canvas App is the in-house charting system of Superalgos. It is the software capable of running the Plotters that can represent datasets graphically. -![image](https://user-images.githubusercontent.com/9479367/55588708-ca8f1e80-572e-11e9-9073-a591b1143171.png) +![image](https://user-images.githubusercontent.com/9479367/56820881-520f0f80-684d-11e9-9f47-4b3ca38370e9.png) ## Installation From 522a06f053ff3a8bf104be6b7d61e93f09b692ca Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:09:12 +0200 Subject: [PATCH 002/221] Update README.md --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index 9e5542b16..d3acef1bd 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,16 @@ https://github.com/Superalgos/AAWeb/blob/develop/README.md ## Usage +First time you enter you will see this screen, with no chart displayed, since the app exects you to select one of the available layers at the left panel: + +![image](https://user-images.githubusercontent.com/9479367/56821029-a3b79a00-684d-11e9-8226-2471e32b70e7.png) + +Click on the first layer "Candles" and wait a few second to load the data and plot the candles chart. At that point you should see something like this: + +![image](https://user-images.githubusercontent.com/9479367/56821266-1fb1e200-684e-11e9-9492-8bcbc3ed84d8.png) + +As you can see, the candles belong to the market BTC/USDT @ Poloniex. Even though the app already support other markets and other exchanges, for us is better to have only this one active while the codebase matures. + + + Use your mouse wheel to zoom out and zoom in, and left click to drag and drop the charts. The Canvas App is designed to have a similar experience than Google Maps in the sense that allows you to easily navigate through different markets, potentially at different exchanges just by zooming out, dragging / dropping and zooming in at your destination. From 8509f9712c78058835c1ee4778c26e5e47418072 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:20:25 +0200 Subject: [PATCH 003/221] Update README.md --- README.md | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d3acef1bd..58c4790e8 100644 --- a/README.md +++ b/README.md @@ -16,12 +16,37 @@ First time you enter you will see this screen, with no chart displayed, since th ![image](https://user-images.githubusercontent.com/9479367/56821029-a3b79a00-684d-11e9-8226-2471e32b70e7.png) +### Layers Panel + +This panel includes different layers you can visualize just by turning them on with a mounse click. A second click would turn them off. +The layer title bar can have 3 possibles colors: + +1. Red: layer is off. +2. Green: layer is on. +3. Yellow: layer is loading or can not completelly load if it stay in this color/state. + Click on the first layer "Candles" and wait a few second to load the data and plot the candles chart. At that point you should see something like this: ![image](https://user-images.githubusercontent.com/9479367/56821266-1fb1e200-684e-11e9-9492-8bcbc3ed84d8.png) As you can see, the candles belong to the market BTC/USDT @ Poloniex. Even though the app already support other markets and other exchanges, for us is better to have only this one active while the codebase matures. +You need to notice these 3 things on your screen: + +### Main Elements + +1. The current datetime at the top. This is the date and time at the mouse pointer position. +2. The current rate at the right. This is the current rate (in this case USDT per BTC) at the mouse pointer position. +3. The current time period (or candle size if you wish) at the bottom. This is the currently diplayed time period, not only for candles but for any other object plotted across any of the available layers. + +### Mouse Wheel Operations + +There are many things you can do with your mouse wheel. + +1. Use your mouse wheel next to the datetime to produce an horizontal scaling. +2. Use your mouse wheel at the displayed rate to produce a vertical scaling. +3. Use your mouse wheel next to the time period to change it amoung all the possible available time periods. +4. User you mouse wheel over the Layers panel to scroll up or down the layers (in case they are not all already displayed). +5. User your mouse wheel overt the chart, and not close to the previous elements to zoom in and out the chart. The App will not only zoom in and out but also automatically adjust the time period to the most convinient for the zoom level you are in. -Use your mouse wheel to zoom out and zoom in, and left click to drag and drop the charts. The Canvas App is designed to have a similar experience than Google Maps in the sense that allows you to easily navigate through different markets, potentially at different exchanges just by zooming out, dragging / dropping and zooming in at your destination. From 31b04a8a12f7c87223b2b2d950903a080558ff55 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:23:29 +0200 Subject: [PATCH 004/221] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 58c4790e8..6c74adcb6 100644 --- a/README.md +++ b/README.md @@ -49,4 +49,8 @@ There are many things you can do with your mouse wheel. 4. User you mouse wheel over the Layers panel to scroll up or down the layers (in case they are not all already displayed). 5. User your mouse wheel overt the chart, and not close to the previous elements to zoom in and out the chart. The App will not only zoom in and out but also automatically adjust the time period to the most convinient for the zoom level you are in. +After zooming in the main elements stay at the top, left and bottom of the viewport as you can see in the next screenshot: + +![image](https://user-images.githubusercontent.com/9479367/56822037-30635780-6850-11e9-8d1c-1c58959f46e9.png) + From 299d020eb48a0a4c3f529dfeed6dfaa5cc5bc317 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:27:59 +0200 Subject: [PATCH 005/221] Update README.md --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 6c74adcb6..23beb2dbd 100644 --- a/README.md +++ b/README.md @@ -53,4 +53,13 @@ After zooming in the main elements stay at the top, left and bottom of the viewp ![image](https://user-images.githubusercontent.com/9479367/56822037-30635780-6850-11e9-8d1c-1c58959f46e9.png) +### Hiding Panels +There are two ways to hide the panels on the screen: + +1. Drag them from their title bar with the right mouse button. +2. Click over the small triangle at the left of their title bar. This will automatically position them at the bottom of the screen. Clicking again restores its previous position. + +Here I gragged the Layers panel to the left, and I clicked at the Current Candle Panel: + +![image](https://user-images.githubusercontent.com/9479367/56822276-db741100-6850-11e9-9e23-d3fabb82754c.png) From 7ba2712c7eb59dbfe06437b108671a21e8d061c5 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:43:58 +0200 Subject: [PATCH 006/221] Update README.md --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index 23beb2dbd..2fac7179c 100644 --- a/README.md +++ b/README.md @@ -63,3 +63,25 @@ There are two ways to hide the panels on the screen: Here I gragged the Layers panel to the left, and I clicked at the Current Candle Panel: ![image](https://user-images.githubusercontent.com/9479367/56822276-db741100-6850-11e9-9e23-d3fabb82754c.png) + +### Available Layers + +Superalgos is an open system, that means anyone can build more layers for this chart app. So far with our current limited manpower we managed to create these ones: + +1. Candles: tipical candlesticks. + +![image](https://user-images.githubusercontent.com/9479367/56822785-6acdf400-6852-11e9-98d9-0bd19ca98d61.png) + +2. Volumes: here I innovated a little bit, putting the buy volume down and in green, and the sell volume up and red. + +![image](https://user-images.githubusercontent.com/9479367/56822811-8638ff00-6852-11e9-9f25-6b97720a9d1b.png) + +3. Candle Stairs Patterns: this is an unusual pattern to prove anything can be added to the system. A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think about this patterns as "Candle Channels" as are channels with direction up or down based on underlaying candles direction. + +![image](https://user-images.githubusercontent.com/9479367/56822884-b6809d80-6852-11e9-999a-bccddfb68229.png) + +4. Volume Stairs Patterns: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ast from a trading bot: is sell volume going up? is buy volume going down? + +![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) + + From 4642775eb9a1a54371412d9ce98a2c20c2bdfae2 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 18:45:50 +0200 Subject: [PATCH 007/221] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2fac7179c..3785f211e 100644 --- a/README.md +++ b/README.md @@ -80,7 +80,7 @@ Superalgos is an open system, that means anyone can build more layers for this c ![image](https://user-images.githubusercontent.com/9479367/56822884-b6809d80-6852-11e9-999a-bccddfb68229.png) -4. Volume Stairs Patterns: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ast from a trading bot: is sell volume going up? is buy volume going down? +4. Volume Stairs Patterns: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ask from a trading bot: is sell volume going up? is buy volume going down? ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) From 46384b0d5274aa5e890addd05d4142d0d6a26191 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 22:04:05 +0200 Subject: [PATCH 008/221] Update README.md --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 3785f211e..bac69825d 100644 --- a/README.md +++ b/README.md @@ -84,4 +84,13 @@ Superalgos is an open system, that means anyone can build more layers for this c ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) +5. Bollinger Bands: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands + +Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. + +![image](https://user-images.githubusercontent.com/9479367/56833341-82b37100-686e-11e9-8b17-55b3bf7a8fdb.png) + + + + From 55c1b0d6aec1f986cb07316b03ba73ff155a2796 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 22:28:47 +0200 Subject: [PATCH 009/221] Update README.md --- README.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index bac69825d..a41fa6095 100644 --- a/README.md +++ b/README.md @@ -84,12 +84,15 @@ Superalgos is an open system, that means anyone can build more layers for this c ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) -5. Bollinger Bands: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands - -Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. +5. Bollinger Bands: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands . Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. ![image](https://user-images.githubusercontent.com/9479367/56833341-82b37100-686e-11e9-8b17-55b3bf7a8fdb.png) +6. Percentage Bandwidth or %B: this is a well known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since these are the most common values used by traders to forecast when it will reverse it course. It our chart %B is the one represented at #1. I found usefull to add a moving average in order to smooth a little bit its volatility and be able to ask at any time if it is going up or down. The moving average calcualted with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatity and is plotted at #3. + +![image](https://user-images.githubusercontent.com/9479367/56834223-1c7c1d80-6871-11e9-9687-ae5dc12d0336.png) + + From 201f61f79563b68ec20597631cf176e0379071f4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 26 Apr 2019 22:44:17 +0200 Subject: [PATCH 010/221] Update README.md --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index a41fa6095..89efa79c2 100644 --- a/README.md +++ b/README.md @@ -92,7 +92,13 @@ Superalgos is an open system, that means anyone can build more layers for this c ![image](https://user-images.githubusercontent.com/9479367/56834223-1c7c1d80-6871-11e9-9687-ae5dc12d0336.png) +7. Bollinger Channels: this is a non-standard indicator derived from the Bollinger Bands. This type of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turn from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward ones in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. +![image](https://user-images.githubusercontent.com/9479367/56834955-30c11a00-6873-11e9-8601-9d8abc8fab84.png) + +8. Bollinger Sub-Channels: if we consider that one Bollinger Chanel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channeles. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. + +![image](https://user-images.githubusercontent.com/9479367/56835528-c610de00-6874-11e9-8431-3cfe0c515f3e.png) From 141dbb188c436626771b74197db6464915549f07 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 28 Apr 2019 08:30:04 +0200 Subject: [PATCH 011/221] 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 012/221] 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 a9072c80add3ef7c687fd3887150b29c82a9266a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 28 Apr 2019 09:31:26 +0200 Subject: [PATCH 013/221] Update README.md --- README.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 89efa79c2..69ccd2ce0 100644 --- a/README.md +++ b/README.md @@ -64,9 +64,11 @@ Here I gragged the Layers panel to the left, and I clicked at the Current Candle ![image](https://user-images.githubusercontent.com/9479367/56822276-db741100-6850-11e9-9e23-d3fabb82754c.png) -### Available Layers +### Layers -Superalgos is an open system, that means anyone can build more layers for this chart app. So far with our current limited manpower we managed to create these ones: +Superalgos is an open system, that means anyone can build more layers for this chart app. So far with our current limited manpower we managed to create 8 public layers (available to anyone without being logged in) and 2 extra private layers for when users are logged in: + +#### Public Layers 1. Candles: tipical candlesticks. @@ -100,6 +102,14 @@ Superalgos is an open system, that means anyone can build more layers for this c ![image](https://user-images.githubusercontent.com/9479367/56835528-c610de00-6874-11e9-8431-3cfe0c515f3e.png) +#### Private Layers +1. Trading Simulation: The Trading Simulation layer displays a backtest + fordwartest (paper trading) of whatever strategies you have created in the system. At sign up, you are provided with an initial set of strategies so that you can be up and running as quickly as possilbe. By activating the Trading Simulation layer you should be able to see something like this: + +![image](https://user-images.githubusercontent.com/9479367/56860461-0799aa00-6997-11e9-9c2d-5ace122a5c25.png) + +Let's take a moment to understand what you see on the chart: + +A. This shows you when you entered into one of your strategies (think as if the strategy was activated because the activation conditions were met). The first icon represent the moment when you entered into that strategy and the second one when you left the strategy. From 6f436698fac937908f1d2c4d18dac83410303004 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 28 Apr 2019 09:34:09 +0200 Subject: [PATCH 014/221] Update README.md --- README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 69ccd2ce0..174ec79a7 100644 --- a/README.md +++ b/README.md @@ -21,9 +21,9 @@ First time you enter you will see this screen, with no chart displayed, since th This panel includes different layers you can visualize just by turning them on with a mounse click. A second click would turn them off. The layer title bar can have 3 possibles colors: -1. Red: layer is off. -2. Green: layer is on. -3. Yellow: layer is loading or can not completelly load if it stay in this color/state. +1. **Red**: layer is off. +2. **Green**: layer is on. +3. **Yellow**: layer is loading or can not completelly load if it stay in this color/state. Click on the first layer "Candles" and wait a few second to load the data and plot the candles chart. At that point you should see something like this: @@ -70,41 +70,41 @@ Superalgos is an open system, that means anyone can build more layers for this c #### Public Layers -1. Candles: tipical candlesticks. +1. **Candles**: tipical candlesticks. ![image](https://user-images.githubusercontent.com/9479367/56822785-6acdf400-6852-11e9-98d9-0bd19ca98d61.png) -2. Volumes: here I innovated a little bit, putting the buy volume down and in green, and the sell volume up and red. +2. **Volumes**: here I innovated a little bit, putting the buy volume down and in green, and the sell volume up and red. ![image](https://user-images.githubusercontent.com/9479367/56822811-8638ff00-6852-11e9-9f25-6b97720a9d1b.png) -3. Candle Stairs Patterns: this is an unusual pattern to prove anything can be added to the system. A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think about this patterns as "Candle Channels" as are channels with direction up or down based on underlaying candles direction. +3. **Candle Stairs Patterns**: this is an unusual pattern to prove anything can be added to the system. A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think about this patterns as "Candle Channels" as are channels with direction up or down based on underlaying candles direction. ![image](https://user-images.githubusercontent.com/9479367/56822884-b6809d80-6852-11e9-999a-bccddfb68229.png) -4. Volume Stairs Patterns: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ask from a trading bot: is sell volume going up? is buy volume going down? +4. **Volume Stairs Patterns**: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ask from a trading bot: is sell volume going up? is buy volume going down? ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) -5. Bollinger Bands: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands . Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. +5. **Bollinger Bands**: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands . Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. ![image](https://user-images.githubusercontent.com/9479367/56833341-82b37100-686e-11e9-8b17-55b3bf7a8fdb.png) -6. Percentage Bandwidth or %B: this is a well known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since these are the most common values used by traders to forecast when it will reverse it course. It our chart %B is the one represented at #1. I found usefull to add a moving average in order to smooth a little bit its volatility and be able to ask at any time if it is going up or down. The moving average calcualted with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatity and is plotted at #3. +6. **Percentage Bandwidth or %B**: this is a well known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since these are the most common values used by traders to forecast when it will reverse it course. It our chart %B is the one represented at #1. I found usefull to add a moving average in order to smooth a little bit its volatility and be able to ask at any time if it is going up or down. The moving average calcualted with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatity and is plotted at #3. ![image](https://user-images.githubusercontent.com/9479367/56834223-1c7c1d80-6871-11e9-9687-ae5dc12d0336.png) -7. Bollinger Channels: this is a non-standard indicator derived from the Bollinger Bands. This type of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turn from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward ones in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. +7. **Bollinger Channels**: this is a non-standard indicator derived from the Bollinger Bands. This type of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turn from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward ones in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. ![image](https://user-images.githubusercontent.com/9479367/56834955-30c11a00-6873-11e9-8601-9d8abc8fab84.png) -8. Bollinger Sub-Channels: if we consider that one Bollinger Chanel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channeles. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. +8. **Bollinger Sub-Channels**: if we consider that one Bollinger Chanel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channeles. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. ![image](https://user-images.githubusercontent.com/9479367/56835528-c610de00-6874-11e9-8431-3cfe0c515f3e.png) #### Private Layers -1. Trading Simulation: The Trading Simulation layer displays a backtest + fordwartest (paper trading) of whatever strategies you have created in the system. At sign up, you are provided with an initial set of strategies so that you can be up and running as quickly as possilbe. By activating the Trading Simulation layer you should be able to see something like this: +1. **Trading Simulation**: The Trading Simulation layer displays a backtest + fordwartest (paper trading) of whatever strategies you have created in the system. At sign up, you are provided with an initial set of strategies so that you can be up and running as quickly as possilbe. By activating the Trading Simulation layer you should be able to see something like this: ![image](https://user-images.githubusercontent.com/9479367/56860461-0799aa00-6997-11e9-9c2d-5ace122a5c25.png) From d0f1e34dd313563a2f5b7209d0efc481a316bcfc Mon Sep 17 00:00:00 2001 From: Julian Molina Date: Sun, 28 Apr 2019 18:26:51 +0200 Subject: [PATCH 015/221] Update README.md Revision --- README.md | 70 +++++++++++++++++++++++++++---------------------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index 174ec79a7..0d2e7eb94 100644 --- a/README.md +++ b/README.md @@ -1,115 +1,115 @@ # Welcome to the Canvas App -The Canvas App is the in-house charting system of Superalgos. It is the software capable of running the Plotters that can represent datasets graphically. +The Canvas App is the built-in charting system of Superalgos. It is the software capable of running the Plotters that represent datasets graphically. ![image](https://user-images.githubusercontent.com/9479367/56820881-520f0f80-684d-11e9-9f47-4b3ca38370e9.png) ## Installation -To install the Canvas App, you need to install AAWeb. Please follow this guide: +To install the Canvas App, you need to install AAWeb, following this guide: https://github.com/Superalgos/AAWeb/blob/develop/README.md ## Usage -First time you enter you will see this screen, with no chart displayed, since the app exects you to select one of the available layers at the left panel: +The first time you access the Canvas App, you will see the following screen with no chart displayed, since the app expects you to select one of the available layers at the Layers Panel on the left: ![image](https://user-images.githubusercontent.com/9479367/56821029-a3b79a00-684d-11e9-8226-2471e32b70e7.png) ### Layers Panel -This panel includes different layers you can visualize just by turning them on with a mounse click. A second click would turn them off. -The layer title bar can have 3 possibles colors: +This panel includes different layers you may visualize by toggling them on and off with a single mouse clicks. +The layer title bar can have 3 possible background colors: 1. **Red**: layer is off. 2. **Green**: layer is on. -3. **Yellow**: layer is loading or can not completelly load if it stay in this color/state. +3. **Yellow**: layer is loading. If it stays yellow, it means it can't load fully. -Click on the first layer "Candles" and wait a few second to load the data and plot the candles chart. At that point you should see something like this: +Click on the "Candles" layer and wait a few seconds date is loaded and candles are plotted. You should see something like this: ![image](https://user-images.githubusercontent.com/9479367/56821266-1fb1e200-684e-11e9-9492-8bcbc3ed84d8.png) -As you can see, the candles belong to the market BTC/USDT @ Poloniex. Even though the app already support other markets and other exchanges, for us is better to have only this one active while the codebase matures. +As you may see, the candles belong to the BTC/USDT market @ Poloniex. Even though the app supports other markets and exchanges, it is better for us to have only this one active, while the codebase matures. -You need to notice these 3 things on your screen: +Notice the following 3 elements relative to the position of the mouse pointer: ### Main Elements -1. The current datetime at the top. This is the date and time at the mouse pointer position. -2. The current rate at the right. This is the current rate (in this case USDT per BTC) at the mouse pointer position. -3. The current time period (or candle size if you wish) at the bottom. This is the currently diplayed time period, not only for candles but for any other object plotted across any of the available layers. +1. Above, the current datetime. This is the date and time at the mouse pointer position. +2. To the right, the current rate. This is the rate (in this case USDT per BTC) at the mouse pointer position. +3. Below, the current time period (or candle size if you wish). This is the currently displayed time period—not only for candles, but for any other object plotted across available layers. ### Mouse Wheel Operations There are many things you can do with your mouse wheel. -1. Use your mouse wheel next to the datetime to produce an horizontal scaling. -2. Use your mouse wheel at the displayed rate to produce a vertical scaling. -3. Use your mouse wheel next to the time period to change it amoung all the possible available time periods. -4. User you mouse wheel over the Layers panel to scroll up or down the layers (in case they are not all already displayed). -5. User your mouse wheel overt the chart, and not close to the previous elements to zoom in and out the chart. The App will not only zoom in and out but also automatically adjust the time period to the most convinient for the zoom level you are in. +1. Scroll on top of or next to the datetime to produce a horizontal scaling. +1. Scroll on top of or next to the displayed rate to produce a vertical scaling. +1. Scroll on top of or next to the time period to change the time period to available values. +1. Scroll elsewhere over the chart to zoom in and out. The App will not only zoom in and out of the chart, but also automatically adjust the time period to the most convenient one (for the current zoom level). +1. Scroll over the Layers Panel to access layers that may be out of reach downwards. After zooming in the main elements stay at the top, left and bottom of the viewport as you can see in the next screenshot: ![image](https://user-images.githubusercontent.com/9479367/56822037-30635780-6850-11e9-8d1c-1c58959f46e9.png) -### Hiding Panels +### Moving Panels -There are two ways to hide the panels on the screen: +Drag and drop right-clicking on the title bar. -1. Drag them from their title bar with the right mouse button. -2. Click over the small triangle at the left of their title bar. This will automatically position them at the bottom of the screen. Clicking again restores its previous position. +### Minimizing Panels -Here I gragged the Layers panel to the left, and I clicked at the Current Candle Panel: +Click on the small triangle on the right of their title bar. This will automatically position the panel at the bottom of the screen. Clicking again restores the panel to its previous position. +In the following image, the Layers Panel was dragged to the left and the Current Candle Panel was minimized: + ![image](https://user-images.githubusercontent.com/9479367/56822276-db741100-6850-11e9-9e23-d3fabb82754c.png) ### Layers -Superalgos is an open system, that means anyone can build more layers for this chart app. So far with our current limited manpower we managed to create 8 public layers (available to anyone without being logged in) and 2 extra private layers for when users are logged in: +Superalgos is an open system, meaning anyone can build layers for this charting app. So far—with our current limited manpower—we have created 8 public layers (available without logging in) and 2 private layers (available to logged-in users): #### Public Layers -1. **Candles**: tipical candlesticks. +1. **Candles**: Typical candlesticks. ![image](https://user-images.githubusercontent.com/9479367/56822785-6acdf400-6852-11e9-98d9-0bd19ca98d61.png) -2. **Volumes**: here I innovated a little bit, putting the buy volume down and in green, and the sell volume up and red. +1. **Volumes**: I innovated a bit placing the buy volume at the bottom (in green), and the sell volume at the top (in red). ![image](https://user-images.githubusercontent.com/9479367/56822811-8638ff00-6852-11e9-9f25-6b97720a9d1b.png) -3. **Candle Stairs Patterns**: this is an unusual pattern to prove anything can be added to the system. A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think about this patterns as "Candle Channels" as are channels with direction up or down based on underlaying candles direction. +1. **Candle Stairs Patterns**: This is an unusual pattern proving any dataset may be plotted on the charts (and by extension, that anything can be added to the system). A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think of these patterns as "Candle Channels", as they represent channels with an up or down direction based on underlying candles direction. ![image](https://user-images.githubusercontent.com/9479367/56822884-b6809d80-6852-11e9-999a-bccddfb68229.png) -4. **Volume Stairs Patterns**: similar concept but with volumes. Whenever we find a sequence of volume bars each one bigger than the previous one, they are bundled together in a "Stair". The same when they are going down (or the next is smaller than the previous one). In this way you can ask easily ask from a trading bot: is sell volume going up? is buy volume going down? +1. **Volume Stairs Patterns**: A similar concept, this time with volumes. Whenever a sequence of volume bars is found where each one is bigger than the previous one, they are bundled together in a "Stair". The same applies when they are going down (the next is smaller than the previous one). For a trading bot, this serves to identify if sell or buy volumes are raising or declining, if any. ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) -5. **Bollinger Bands**: this is the traditional Bollinger Bands indicator as described here: https://en.wikipedia.org/wiki/Bollinger_Bands . Bollinger Bands have a moving average, in our case calculated with the last 20 periods. (It is the line in the middle of the bands.). We are plotting the moving average with one color when it is going up, and another color when it is going down. The upper band is at 2 Standard Deviations from the center and the lower band too, at 2 Standard Deviations. It is the most widely used Bollinger Bands settings. +1. **Bollinger Bands**: This is the traditional (Bollinger Bands indicator)[https://en.wikipedia.org/wiki/Bollinger_Bands]. Bollinger Bands have a moving average, in our case calculated with the last 20 periods (the line in the middle of the bands). We are plotting the moving average with one color when it is going up, and with a different color when it's going down. The upper band is at 2 Standard Deviations from the center, pretty much like the lower band, also at 2 Standard Deviations. These are the most widely used Bollinger Bands settings. ![image](https://user-images.githubusercontent.com/9479367/56833341-82b37100-686e-11e9-8b17-55b3bf7a8fdb.png) -6. **Percentage Bandwidth or %B**: this is a well known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since these are the most common values used by traders to forecast when it will reverse it course. It our chart %B is the one represented at #1. I found usefull to add a moving average in order to smooth a little bit its volatility and be able to ask at any time if it is going up or down. The moving average calcualted with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatity and is plotted at #3. +1. **Percentage Bandwidth or %B**: This is a well-known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since those are the most common values for traders to forecast when a reversal may happen. In our chart, %B is the one represented at #1. I've found useful to add a moving average in order to smooth volatility a bit, and to be able to ask—at any time—if it is going up or down. The moving average calculated with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatility and is plotted at #3. ![image](https://user-images.githubusercontent.com/9479367/56834223-1c7c1d80-6871-11e9-9687-ae5dc12d0336.png) -7. **Bollinger Channels**: this is a non-standard indicator derived from the Bollinger Bands. This type of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turn from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward ones in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. +1. **Bollinger Channels**: This is a non-standard indicator derived from the Bollinger Bands. These types of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to going up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turns from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward channels in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. ![image](https://user-images.githubusercontent.com/9479367/56834955-30c11a00-6873-11e9-8601-9d8abc8fab84.png) -8. **Bollinger Sub-Channels**: if we consider that one Bollinger Chanel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channeles. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. +1. **Bollinger Sub-Channels**: If we consider that one Bollinger Channel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channels. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. ![image](https://user-images.githubusercontent.com/9479367/56835528-c610de00-6874-11e9-8431-3cfe0c515f3e.png) #### Private Layers -1. **Trading Simulation**: The Trading Simulation layer displays a backtest + fordwartest (paper trading) of whatever strategies you have created in the system. At sign up, you are provided with an initial set of strategies so that you can be up and running as quickly as possilbe. By activating the Trading Simulation layer you should be able to see something like this: +1. **Trading Simulation**: The Trading Simulation layer displays a backtest + fordwardtest (paper trading) of whatever strategies you have created in the system. At sign up, you are provided with an initial set of strategies so that you can be up and running as quickly as possible. By activating the Trading Simulation layer you should be able to see something like this: ![image](https://user-images.githubusercontent.com/9479367/56860461-0799aa00-6997-11e9-9c2d-5ace122a5c25.png) -Let's take a moment to understand what you see on the chart: - -A. This shows you when you entered into one of your strategies (think as if the strategy was activated because the activation conditions were met). The first icon represent the moment when you entered into that strategy and the second one when you left the strategy. +Let's take a moment to analyze what you see on the chart: +A. This shows you when you entered into one of your strategies (think of it as if the strategy was activated because when activation conditions were met). The first icon represents the moment when you entered into that particular strategy, and the second icon represents the moment you left the strategy. From 595c920e0322309806cf670fd6a6a1b5f1beac74 Mon Sep 17 00:00:00 2001 From: Julian Molina Date: Sun, 28 Apr 2019 18:30:01 +0200 Subject: [PATCH 016/221] Update README.md Revision --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 0d2e7eb94..7fa3a65e8 100644 --- a/README.md +++ b/README.md @@ -75,31 +75,31 @@ Superalgos is an open system, meaning anyone can build layers for this charting ![image](https://user-images.githubusercontent.com/9479367/56822785-6acdf400-6852-11e9-98d9-0bd19ca98d61.png) -1. **Volumes**: I innovated a bit placing the buy volume at the bottom (in green), and the sell volume at the top (in red). +2. **Volumes**: I innovated a bit placing the buy volume at the bottom (in green), and the sell volume at the top (in red). ![image](https://user-images.githubusercontent.com/9479367/56822811-8638ff00-6852-11e9-9f25-6b97720a9d1b.png) -1. **Candle Stairs Patterns**: This is an unusual pattern proving any dataset may be plotted on the charts (and by extension, that anything can be added to the system). A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think of these patterns as "Candle Channels", as they represent channels with an up or down direction based on underlying candles direction. +3. **Candle Stairs Patterns**: This is an unusual pattern proving any dataset may be plotted on the charts (and by extension, that anything can be added to the system). A Stair Pattern is defined as a set of candles going in the same direction, either up or down. You can think of these patterns as "Candle Channels", as they represent channels with an up or down direction based on underlying candles direction. ![image](https://user-images.githubusercontent.com/9479367/56822884-b6809d80-6852-11e9-999a-bccddfb68229.png) -1. **Volume Stairs Patterns**: A similar concept, this time with volumes. Whenever a sequence of volume bars is found where each one is bigger than the previous one, they are bundled together in a "Stair". The same applies when they are going down (the next is smaller than the previous one). For a trading bot, this serves to identify if sell or buy volumes are raising or declining, if any. +4. **Volume Stairs Patterns**: A similar concept, this time with volumes. Whenever a sequence of volume bars is found where each one is bigger than the previous one, they are bundled together in a "Stair". The same applies when they are going down (the next is smaller than the previous one). For a trading bot, this serves to identify if sell or buy volumes are raising or declining, if any. ![image](https://user-images.githubusercontent.com/9479367/56822975-f34c9480-6852-11e9-9175-19d397b89441.png) -1. **Bollinger Bands**: This is the traditional (Bollinger Bands indicator)[https://en.wikipedia.org/wiki/Bollinger_Bands]. Bollinger Bands have a moving average, in our case calculated with the last 20 periods (the line in the middle of the bands). We are plotting the moving average with one color when it is going up, and with a different color when it's going down. The upper band is at 2 Standard Deviations from the center, pretty much like the lower band, also at 2 Standard Deviations. These are the most widely used Bollinger Bands settings. +5. **Bollinger Bands**: This is the traditional (Bollinger Bands indicator)[https://en.wikipedia.org/wiki/Bollinger_Bands]. Bollinger Bands have a moving average, in our case calculated with the last 20 periods (the line in the middle of the bands). We are plotting the moving average with one color when it is going up, and with a different color when it's going down. The upper band is at 2 Standard Deviations from the center, pretty much like the lower band, also at 2 Standard Deviations. These are the most widely used Bollinger Bands settings. ![image](https://user-images.githubusercontent.com/9479367/56833341-82b37100-686e-11e9-8b17-55b3bf7a8fdb.png) -1. **Percentage Bandwidth or %B**: This is a well-known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since those are the most common values for traders to forecast when a reversal may happen. In our chart, %B is the one represented at #1. I've found useful to add a moving average in order to smooth volatility a bit, and to be able to ask—at any time—if it is going up or down. The moving average calculated with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatility and is plotted at #3. +6. **Percentage Bandwidth or %B**: This is a well-known indicator that derives from the Bollinger Bands. In a nutshell it tells you how close the price is either to the upper band or the lower band at any point in time. When the price is in the middle of the bands (it is calculated with the close value of each candle), then %B is in the middle of its chart, at value 50. When the price touches the upper band, then %B is at 100, and finally when the price is at the lower band, then %B is at 0. The chart contains lines at %B value 30 and 70 since those are the most common values for traders to forecast when a reversal may happen. In our chart, %B is the one represented at #1. I've found useful to add a moving average in order to smooth volatility a bit, and to be able to ask—at any time—if it is going up or down. The moving average calculated with the last 5 %B values is plotted as line #2. Finally I also added a property called Bandwidth, which represents the separation of the upper band from the lower band. It is a measure of the volatility and is plotted at #3. ![image](https://user-images.githubusercontent.com/9479367/56834223-1c7c1d80-6871-11e9-9687-ae5dc12d0336.png) -1. **Bollinger Channels**: This is a non-standard indicator derived from the Bollinger Bands. These types of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to going up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turns from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward channels in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. +7. **Bollinger Channels**: This is a non-standard indicator derived from the Bollinger Bands. These types of channels are calculated using the Bollinger Bands moving average. Essentially an upward channel begins when the moving average turns from going down to going up, and the channel finishes when it turns from going up to down. A downward channel starts when the Bollinger Band moving average turns from going up to down, and it finishes when it starts going up again. Upward channels are plotted in green, while downward channels in red. Additional information can be found at the indicator's panel, like the number of periods contained at the channel. ![image](https://user-images.githubusercontent.com/9479367/56834955-30c11a00-6873-11e9-8601-9d8abc8fab84.png) -1. **Bollinger Sub-Channels**: If we consider that one Bollinger Channel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channels. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. +8. **Bollinger Sub-Channels**: If we consider that one Bollinger Channel can have sub-channels with the same direction (up or down) but different slopes, then we get to the concept of Bollinger Sub-Channels. The most important property of a sub-channel is its slope. The possible values are: side, gentle, medium, high and extreme. With this information, a trading bot could easily ask if it is in a sub-channel with a certain slope and for how many periods. ![image](https://user-images.githubusercontent.com/9479367/56835528-c610de00-6874-11e9-8431-3cfe0c515f3e.png) From eb106f30a346ad12b92d26332485db4a4443c356 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 29 Apr 2019 08:51:36 +0200 Subject: [PATCH 017/221] 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 018/221] 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 019/221] 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 020/221] 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 021/221] 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 022/221] 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 023/221] 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 024/221] 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 025/221] 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 026/221] 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 027/221] 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 028/221] 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 029/221] 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) + } } From bccb7b3e94b22a752bf1f3468aa6d6c8dca94605 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 10:18:51 +0200 Subject: [PATCH 030/221] TimePeriod with Circle --- Scales/TimePeriodScale.js | 70 ++++++++++++++++++++++++++++----------- 1 file changed, 50 insertions(+), 20 deletions(-) diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 4df23f8f5..85e3afc74 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -209,35 +209,64 @@ to be visible at the top of the viewPort. */ thisObject.container.frame.width = point2.x - point1.x thisObject.container.frame.height = point3.y - point2.y - let point = { + /* Common Variables */ + + let label = timePeriodLabel.split('-') + let label1 = label[0] + let label2 = label[1].toUpperCase() + let fontSize1 = 25 + let fontSize2 = 10 + + /* We draw the circle container */ + + const RED_LINE_HIGHT = 5 + const RADIOUS = 25 + const OPACITY = 1 + + let centerPoint = { x: mouse.position.x, + y: point1.y + viewPort.margins.BOTTOM - 5 + } + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' + browserCanvasContext.fill() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS, 0.0 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' + browserCanvasContext.fill() + + /* Place the Text */ + + let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO + + let labelPoint1 = { + x: mouse.position.x - xOffset1 / 2 - 3, y: point1.y + viewPort.margins.BOTTOM } - let label = timePeriodLabel - let fontSize = 10 + browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - let xOffset = label.length * fontSize * FONT_ASPECT_RATIO + browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' + let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO - if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } + let labelPoint2 = { + x: mouse.position.x - xOffset2 / 2 - 3, + y: point1.y + viewPort.margins.BOTTOM + fontSize2 + } - browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 1) -/* - browserCanvasContext.beginPath() + browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.moveTo(point.x, point1.y) - browserCanvasContext.lineTo(point.x, point5.y) - - browserCanvasContext.closePath() - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' - browserCanvasContext.lineWidth = 0.2 - browserCanvasContext.setLineDash([1, 5]) - browserCanvasContext.stroke() -*/ + browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y) } function saveObjectState () { @@ -265,3 +294,4 @@ to be visible at the top of the viewPort. */ thisObject.container.eventHandler.raiseEvent('Time Period Changed', event) } } + From b5d49e5148b0982bbc34bdc3d22de4b00cad4f79 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 10:45:40 +0200 Subject: [PATCH 031/221] Switching to font PRIMARY --- FloatingSpace/Note.js | 4 ++-- FloatingSpace/ProfileBall.js | 6 +++--- Frame.js | 4 ++-- Panels/TimeControlPanel.js | 6 +++--- ProductCard.js | 8 ++++---- Utilities.js | 2 +- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index ed8de1b4e..7fb35b9b9 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -214,7 +214,7 @@ function newNote () { if (label !== undefined) { if (SIZE_PERCENTAGE > 0.9) { - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2 @@ -292,7 +292,7 @@ function newNote () { y: startingPosition.y + (i + 1) * (fontSize * FONT_ASPECT_RATIO + 10) } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, ' + ALPHA + ')' browserCanvasContext.fillText(labelRow, labelPoint.x, labelPoint.y) } diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 8675a3003..426f0ad1a 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -278,7 +278,7 @@ function newProfileBall () { let labelPoint let fontSize = pFloatingObject.currentFontSize - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label @@ -290,7 +290,7 @@ function newProfileBall () { y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } @@ -303,7 +303,7 @@ function newProfileBall () { y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } diff --git a/Frame.js b/Frame.js index f7b3eec4f..405d5213b 100644 --- a/Frame.js +++ b/Frame.js @@ -1,7 +1,7 @@  function newFrame () { const PANEL_CORNERS_RADIOUS = 5 - const TITLE_BAR_HEIGHT = 14 // this must be grater than radius + const TITLE_BAR_HEIGHT = 15 // this must be grater than radius let frame = { containerName: '', // This is for debugging purposes only. @@ -340,7 +340,7 @@ function newFrame () { let labelPoint let fontSize = 10 - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label = frame.containerName diff --git a/Panels/TimeControlPanel.js b/Panels/TimeControlPanel.js index 7a1b51e8e..2f650b65c 100644 --- a/Panels/TimeControlPanel.js +++ b/Panels/TimeControlPanel.js @@ -115,7 +115,7 @@ function newTimeControlPanel () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -132,7 +132,7 @@ function newTimeControlPanel () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -151,7 +151,7 @@ function newTimeControlPanel () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } diff --git a/ProductCard.js b/ProductCard.js index 46512e69c..a6d3c5eff 100644 --- a/ProductCard.js +++ b/ProductCard.js @@ -609,7 +609,7 @@ function newProductCard () { let labelPoint let fontSize = 10 - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label @@ -626,7 +626,7 @@ function newProductCard () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -642,7 +642,7 @@ function newProductCard () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } @@ -665,7 +665,7 @@ function newProductCard () { labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) diff --git a/Utilities.js b/Utilities.js index 8bc732ab9..663e3eb4b 100644 --- a/Utilities.js +++ b/Utilities.js @@ -172,7 +172,7 @@ function loadEmoji (pPath) { function printLabel (labelToPrint, x, y, opacity, fontSize) { let labelPoint - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + ' Saira' + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label = '' + labelToPrint From 1e315841b8d0abfcfb1de196a71ba4c64a06d281 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 12:41:22 +0200 Subject: [PATCH 032/221] Strategy items get clicked --- FloatingSpace/StrategyPart.js | 312 ++++++++++++++++++++++++ FloatingSpace/StrategyParts.js | 69 ++++++ Spaces/StrategySpace.js | 7 + StrategySpace/StrategyCollection.js | 24 +- StrategySpace/StrategyCollectionItem.js | 5 +- 5 files changed, 399 insertions(+), 18 deletions(-) create mode 100644 FloatingSpace/StrategyPart.js create mode 100644 FloatingSpace/StrategyParts.js diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js new file mode 100644 index 000000000..c42db919e --- /dev/null +++ b/FloatingSpace/StrategyPart.js @@ -0,0 +1,312 @@ + +function newStrategyPart () { + let thisObject = { + + physicsLoop: physicsLoop, + onMouseOver: onMouseOver, + onMouseClick: onMouseClick, + onMouseNotOver: onMouseNotOver, + drawBackground: drawBackground, + drawForeground: drawForeground, + initialize: initialize + + } + + let ballStringMenu = [ + { + visible: false, + imagePathOn: 'Images/menu.icon.on.1.gif', + imagePathOff: 'Images/menu.icon.off.1.gif', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }/*, + { + visible: false, + imagePathOn: "Images/menu.icon.on.2.gif", + imagePathOff: "Images/menu.icon.off.2.gif", + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 * 1 + }, + { + visible: false, + imagePathOn: "Images/menu.icon.on.3.gif", + imagePathOff: "Images/menu.icon.off.3.gif", + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }, + { + visible: false, + imagePathOn: "Images/menu.icon.on.4.gif", + imagePathOff: "Images/menu.icon.off.4.gif", + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -60 + } */ + ] + + return thisObject + + function initialize (callBackFunction) { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + + menuItem.iconOn = new Image() + + menuItem.iconOn.onload = onImageLoad + + function onImageLoad () { + menuItem.iconOff = new Image() + + menuItem.iconOff.onload = onImageLoad + + function onImageLoad () { + menuItem.canDrawIcon = true + } + + menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff + } + + menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn + + menuItem.icon = menuItem.iconOn // The default value is ON. + } + + callBackFunction() + } + + function physicsLoop () { + // The menuItems also have a target. + + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + + if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) { + if (menuItem.currentRadius < menuItem.targetRadius) { + menuItem.currentRadius = menuItem.currentRadius + 0.5 + } else { + menuItem.currentRadius = menuItem.currentRadius - 0.5 + } + } + } + } + + function onMouseOver () { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + + menuItem.targetRadius = menuItem.rawRadius * 1.5 + } + } + + function onMouseNotOver () { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + + menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5 + } + } + + function onMouseClick (pPoint, pFloatingObject) { + /* What we need to do here is to check which menu item was clicked, if any. */ + + let menuItemIndex + + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + + if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { + let position = { + x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) + } + + browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) + + let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2)) + + if (distance < menuItem.currentRadius) { + menuItemIndex = i + } + } + } + + if (menuItemIndex !== undefined) { + switch (menuItemIndex) { + + case 0: { + // This menu item is to turn ON / OFF the plotting of this bot. + + if (pFloatingObject.payload.profile.plot === true) { + pFloatingObject.payload.profile.plot = false + + let menuItem = ballStringMenu[0] + menuItem.icon = menuItem.iconOff + } else { + pFloatingObject.payload.profile.plot = true + + let menuItem = ballStringMenu[0] + menuItem.icon = menuItem.iconOn + } + + break + } + + case 1: { + // This menu item is to turn ON the Debug Log pannel for the bot. + + break + } + } + } + } + + function drawBackground (pFloatingObject) { + let point = { + x: pFloatingObject.payload.profile.position.x, + y: pFloatingObject.payload.profile.position.y + } + + point = viewPort.fitIntoVisibleArea(point) + + if (pFloatingObject.currentRadius > 1) { + /* Target Line */ + + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y) + browserCanvasContext.lineTo(point.x, point.y) + browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' + browserCanvasContext.setLineDash([4, 2]) + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + browserCanvasContext.setLineDash([0, 0]) + } + + if (pFloatingObject.currentRadius > 0.5) { + /* Target Spot */ + + var radius = 1 + + browserCanvasContext.beginPath() + browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)' + browserCanvasContext.fill() + } + } + + function drawForeground (pFloatingObject) { + if (pFloatingObject.currentRadius > 5) { + /* Contourn */ + + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + } + + if (pFloatingObject.currentRadius > 0.5) { + /* Main FloatingObject */ + + var alphaA + + if (pFloatingObject.currentRadius < 3) { + alphaA = 1 + } else { + alphaA = 0.75 + } + + alphaA = 0.75 + + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = pFloatingObject.fillStyle + + browserCanvasContext.fill() + } + + /* Image */ + + if (pFloatingObject.payload.profile.imageId !== undefined) { + let image = pFloatingObject.payload.profile.botAvatar + + if (image !== null && image !== undefined) { + browserCanvasContext.save() + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.clip() + browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.clip() + browserCanvasContext.closePath() + browserCanvasContext.restore() + } + } + + /* StringBall Menu */ + + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + + if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { + let position = { + x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) + } + + browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) + } + } + + /* Label Text */ + + if (pFloatingObject.currentRadius > 6) { + browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle + + let labelPoint + let fontSize = pFloatingObject.currentFontSize + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + let label + + label = pFloatingObject.payload.profile.upLabel + + if (label !== undefined) { + labelPoint = { + x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + + label = pFloatingObject.payload.profile.downLabel + + if (label !== undefined) { + labelPoint = { + x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } +} diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js new file mode 100644 index 000000000..fcd42b795 --- /dev/null +++ b/FloatingSpace/StrategyParts.js @@ -0,0 +1,69 @@ + +function newStrategyParts () { + const MODULE_NAME = 'Strategy Parts' + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + /* + + This object deals with Strategy Parts, a type of Floating Object that shows together with other parts a graphical representation of a strategy. + + */ + + let thisObject = { + + createNewStrategyPart: createNewStrategyPart, + destroyStrategyPart: destroyStrategyPart, + initialize: initialize, + finalize: finalize + + } + + let floatingLayer + + return thisObject + + function finalize () { + floatingLayer.finalize() + } + + function initialize (pFloatingLayer, callBackFunction) { + try { + floatingLayer = pFloatingLayer + + callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + function createNewStrategyPart (pPayload, callBackFunction) { + let floatingObject = newFloatingObject() + floatingObject.initialize('Profile Ball', onInitialized) + + function onInitialized (err) { + floatingObject.payload = pPayload + + floatingObject.friction = 0.995 + + floatingObject.initializeMass(100) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' + floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' + + floatingLayer.addFloatingObject(floatingObject) + + callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, floatingObject.handle) + } + } + + function destroyStrategyPart (pFloatingObjectHandle) { + floatingLayer.killFloatingObject(pFloatingObjectHandle) + } +} + diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index befe0c9d4..18c73f82d 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -32,10 +32,16 @@ function newStrategySpace () { function getContainer (point) { let container + if (thisObject.strategyCollection !== undefined) { + container = thisObject.strategyCollection.getContainer(point) + if (container !== undefined) { return container } + } + if (thisObject.sidePanel !== undefined) { container = thisObject.sidePanel.getContainer(point) if (container !== undefined) { return container } } + return } @@ -43,3 +49,4 @@ function newStrategySpace () { thisObject.sidePanel.draw() } } + diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index 2f7b52400..6056f801c 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -26,7 +26,7 @@ function newStrategyCollection () { thisObject.container.frame.position.y = 0 thisObject.container.isDraggeable = false - thisObject.container.isClickeable = true + thisObject.container.isClickeable = false return thisObject @@ -40,8 +40,6 @@ function newStrategyCollection () { return } - thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick) - user = JSON.parse(user) const authId = user.authId @@ -233,22 +231,18 @@ function newStrategyCollection () { } } - 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 + for (let i = 0; i < colletionItems.length; i++) { + let item = colletionItems[i] + container = item.getContainer(point) + if (container !== undefined) { + return container + } } + + return undefined } function draw () { diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index efc1a0eae..a17c1900b 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -37,12 +37,12 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { - + console.log('ITEM CLICKED') } 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 @@ -161,4 +161,3 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } - From 48734a1ef0cc800635a29a55c510811c68d8c07d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 13:00:45 +0200 Subject: [PATCH 033/221] Initializing Strategy Parts --- FloatingSpace/FloatingLayer.js | 12 ++---------- FloatingSpace/NoteSets.js | 17 ++--------------- FloatingSpace/ProfileBalls.js | 13 ++----------- FloatingSpace/StrategyParts.js | 11 ++--------- Spaces/FloatingSpace.js | 21 +++++++++------------ StrategySpace/StrategyCollectionItem.js | 17 ++++++++++++++++- 6 files changed, 33 insertions(+), 58 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 0f83cf7e8..7a37e67d6 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -78,17 +78,9 @@ function newFloatingLayer () { } } - function initialize (callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + function initialize () { - /* We dont need to initialize anything right now. */ - - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err.message = ' + err.message) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } - } + /* We dont need to initialize anything right now. */ } function addFloatingObject (pFloatingObject, callBackFunction) { diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index d3e2ce42e..4db399504 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -31,21 +31,8 @@ function newNoteSets () { return thisObject - function initialize (pFloatingLayer, callBackFunction) { - /* - During the initialization process, we receive the floatingLayer where all the floatingObjects we will be creating here will live at. - */ - - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - - floatingLayer = pFloatingLayer - - callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + function initialize (pFloatingLayer) { + floatingLayer = pFloatingLayer } function createNoteSet (pPayload, pEventHandler, callBackFunction) { diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index de67bfca6..0501269ba 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -35,17 +35,8 @@ function newProfileBalls () { } } - function initialize (pFloatingLayer, callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - - floatingLayer = pFloatingLayer - - callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + function initialize (pFloatingLayer) { + floatingLayer = pFloatingLayer } function createNewProfileBall (pPayload, callBackFunction) { diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index fcd42b795..a8c4bb0ee 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -28,15 +28,8 @@ function newStrategyParts () { floatingLayer.finalize() } - function initialize (pFloatingLayer, callBackFunction) { - try { - floatingLayer = pFloatingLayer - - callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + function initialize (pFloatingLayer) { + floatingLayer = pFloatingLayer } function createNewStrategyPart (pPayload, callBackFunction) { diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 0e0010638..e7f6e494d 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -11,6 +11,7 @@ function newFloatingSpace () { let thisObject = { floatingLayer: undefined, // This is the array of floatingObjects being displayed profileBalls: undefined, + strategyParts: undefined, noteSets: undefined, initialize: initialize, finalize: finalize @@ -24,6 +25,7 @@ function newFloatingSpace () { thisObject.floatingLayer.finalize() thisObject.profileBalls.finalize() + thisObject.strategyParts.finalize() } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } @@ -31,21 +33,16 @@ function newFloatingSpace () { function initialize (callBackFunction) { thisObject.floatingLayer = newFloatingLayer() - thisObject.floatingLayer.initialize(onFloatingLayerInitialized) + thisObject.floatingLayer.initialize() - function onFloatingLayerInitialized (err) { - thisObject.profileBalls = newProfileBalls() - thisObject.profileBalls.initialize(thisObject.floatingLayer, onProfileBallsInitialized) + thisObject.profileBalls = newProfileBalls() + thisObject.profileBalls.initialize(thisObject.floatingLayer) - function onProfileBallsInitialized (err) { - thisObject.noteSets = newNoteSets() - thisObject.noteSets.initialize(thisObject.floatingLayer, onNoteSetsInitialized) + thisObject.noteSets = newNoteSets() + thisObject.noteSets.initialize(thisObject.floatingLayer) - function onNoteSetsInitialized (err) { - - } - } - } + thisObject.strategyParts = newStrategyParts() + thisObject.strategyParts.initialize(thisObject.floatingLayer) } } diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index a17c1900b..9abf2644c 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -37,7 +37,22 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { - console.log('ITEM CLICKED') + if (productPlotter.plotter.payload !== undefined) { + let imageId = pProductCard.bot.devTeam + '.' + pProductCard.bot.profilePicture + + productPlotter.plotter.payload.profile.upLabel = pProductCard.product.shortDisplayName + productPlotter.plotter.payload.profile.downLabel = pProductCard.bot.displayName + productPlotter.plotter.payload.profile.imageId = imageId + productPlotter.plotter.payload.profile.botAvatar = pProductCard.bot.avatar + + canvas.floatingSpace.profileBalls.createNewProfileBall(productPlotter.plotter.payload, onProfileBallCreated) + + function onProfileBallCreated (err, pProfileHandle) { + productPlotter.profile = pProfileHandle + + /* There is no policy yet of what to do if this fails. */ + } + } } function getContainer (point) { From 7426b5d9cfe1113de8832befc1363ac193a0b0ba Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 13:37:00 +0200 Subject: [PATCH 034/221] Mouse Over Corrected in Canvas --- Canvas.js | 65 +++++++++++++++---------- StrategySpace/StrategyCollectionItem.js | 30 +++++++----- 2 files changed, 57 insertions(+), 38 deletions(-) diff --git a/Canvas.js b/Canvas.js index fceef9090..8a6f1eab3 100644 --- a/Canvas.js +++ b/Canvas.js @@ -170,12 +170,12 @@ function newCanvas () { animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) 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('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('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded) animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) animation.start(onStart) @@ -540,58 +540,69 @@ function newCanvas () { /* We check if the mouse is over an element of the Strategy Space / */ - container = thisObject.strategySpace.getContainer(point) + if (thisObject.strategySpace !== undefined) { + container = thisObject.strategySpace.getContainer(point) - if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) - return + 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) + if (thisObject.topSpace !== undefined) { + container = thisObject.topSpace.getContainer(point) - if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) - return + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) + return + } } /* We check if the mouse is over an element of the Bottom Space / */ - container = thisObject.bottomSpace.getContainer(point) + if (thisObject.bottomSpace !== undefined) { + container = thisObject.bottomSpace.getContainer(point) - if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) - return + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) + return + } } /* We check if the mouse is over a panel/ */ - container = thisObject.panelsSpace.getContainer(point) + if (thisObject.panelsSpace !== undefined) { + container = thisObject.panelsSpace.getContainer(point) - if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) - return + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) + return + } } /* We check if the mouse is over a floatingObject/ */ + if (thisObject.floatingSpace !== undefined) { + let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) + if (floatingObjectBeingClicked >= 0) { + let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) + floatingObject.eventHandler.raiseEvent('onMouseOver', point) - if (floatingObjectBeingClicked >= 0) { - let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) - floatingObject.eventHandler.raiseEvent('onMouseOver', point) - - return + return + } } /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) + if (thisObject.chartSpace !== undefined) { + container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) - if (container !== undefined && container.detectMouseOver === true) { - container.eventHandler.raiseEvent('onMouseOver', point) - return + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) + return + } } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) } diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 9abf2644c..1ac83be78 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -37,21 +37,29 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { - if (productPlotter.plotter.payload !== undefined) { - let imageId = pProductCard.bot.devTeam + '.' + pProductCard.bot.profilePicture + let handle + let payload = { + profile: { + position: { + x: 500, + y: 500 + }, + visible: true + }, + notes: [] + } - productPlotter.plotter.payload.profile.upLabel = pProductCard.product.shortDisplayName - productPlotter.plotter.payload.profile.downLabel = pProductCard.bot.displayName - productPlotter.plotter.payload.profile.imageId = imageId - productPlotter.plotter.payload.profile.botAvatar = pProductCard.bot.avatar + let imageId = 'My Image.png' - canvas.floatingSpace.profileBalls.createNewProfileBall(productPlotter.plotter.payload, onProfileBallCreated) + payload.profile.upLabel = thisObject.strategy.name + payload.profile.downLabel = thisObject.strategy.name + payload.profile.imageId = imageId + payload.profile.botAvatar = 'dont know what this is' - function onProfileBallCreated (err, pProfileHandle) { - productPlotter.profile = pProfileHandle + canvas.floatingSpace.profileBalls.createNewProfileBall(payload, onProfileBallCreated) - /* There is no policy yet of what to do if this fails. */ - } + function onProfileBallCreated (err, pProfileHandle) { + handle = pProfileHandle } } From 462dfd8ae344f3ccef619178cecc899f6ca86426 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 14:08:59 +0200 Subject: [PATCH 035/221] Strategy Parts showing up --- FloatingSpace/FloatingLayer.js | 37 +++++++++++++++++++++++-- FloatingSpace/FloatingObject.js | 13 +++++++++ FloatingSpace/ProfileBalls.js | 10 +++---- FloatingSpace/StrategyParts.js | 2 +- StrategySpace/StrategyCollectionItem.js | 8 +++--- 5 files changed, 58 insertions(+), 12 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 7a37e67d6..e70b52045 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -11,6 +11,8 @@ function newFloatingLayer () { to specify the location of a bot instance. 2. Notes: Notes are a rectangular area where some text is posted. It has a subject and a body. + + 3. Strategy Parts: These are small balls that represent parts of an strategy. */ const MODULE_NAME = 'Floating Layer' @@ -210,6 +212,21 @@ function newFloatingLayer () { pFloatingObject.payload = payload break } + case 'Strategy Part': { + if (pFloatingObject.payload.profile.visible === false) { return } + + payload.profile = { + position: { + x: pFloatingObject.payload.profile.position.x, + y: pFloatingObject.payload.profile.position.y + }, + visible: pFloatingObject.payload.profile.visible, + botAvatar: pFloatingObject.payload.profile.botAvatar + } + + pFloatingObject.payload = payload + break + } default: { break } @@ -339,6 +356,11 @@ function newFloatingLayer () { break } + case 'Strategy Part': { + payload.position = floatingObject.payload.profile.position + payload.visible = floatingObject.payload.profile.visible + break + } default: { break } @@ -481,7 +503,11 @@ function newFloatingLayer () { payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible } - + break + } + case 'Strategy Part': { + payload.position = floatingObject.payload.profile.position + payload.visible = floatingObject.payload.profile.visible break } default: { @@ -543,6 +569,10 @@ function newFloatingLayer () { payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible break } + case 'Strategy Part': { + payload.visible = floatingObject.payload.profile.visible + break + } default: { break } @@ -768,6 +798,10 @@ function newFloatingLayer () { payload.position = floatingObject2.payload.notes[floatingObject2.payloadNoteIndex].position break } + case 'Strategy Part': { + payload.position = floatingObject2.payload.profile.position + break + } default: { break } @@ -991,4 +1025,3 @@ function newFloatingLayer () { } } } - diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 6afa87e03..8f1325d97 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -89,7 +89,20 @@ function newFloatingObject () { } break } + + case 'Strategy Part': { + underlayingObject = newStrategyPart() + underlayingObject.initialize(onInitialized) + + function onInitialized (err) { + + } + + break + } default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Unsopported type received -> pType = ' + pType) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) break } } diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 0501269ba..8be1a1992 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -1,4 +1,4 @@ -  + function newProfileBalls () { const MODULE_NAME = 'Profile Balls' const INFO_LOG = false @@ -6,11 +6,11 @@ function newProfileBalls () { const logger = newWebDebugLog() logger.fileName = MODULE_NAME - /* + /* - This object deals with Profile Balls, a type of Floating Object that shows profile info in a floating ball. + This object deals with Profile Balls, a type of Floating Object that shows profile info in a floating ball. - */ + */ let thisObject = { @@ -58,7 +58,7 @@ function newProfileBalls () { floatingLayer.addFloatingObject(floatingObject) - callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, floatingObject.handle) + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE, floatingObject.handle) } } diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index a8c4bb0ee..19de9247a 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -34,7 +34,7 @@ function newStrategyParts () { function createNewStrategyPart (pPayload, callBackFunction) { let floatingObject = newFloatingObject() - floatingObject.initialize('Profile Ball', onInitialized) + floatingObject.initialize('Strategy Part', onInitialized) function onInitialized (err) { floatingObject.payload = pPayload diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 1ac83be78..d60268250 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -49,17 +49,17 @@ function newStrategyCollectionItem () { notes: [] } - let imageId = 'My Image.png' + let imageId // 'My Image.png' payload.profile.upLabel = thisObject.strategy.name payload.profile.downLabel = thisObject.strategy.name payload.profile.imageId = imageId payload.profile.botAvatar = 'dont know what this is' - canvas.floatingSpace.profileBalls.createNewProfileBall(payload, onProfileBallCreated) + canvas.floatingSpace.strategyParts.createNewStrategyPart(payload, onStrategyPartCreated) - function onProfileBallCreated (err, pProfileHandle) { - handle = pProfileHandle + function onStrategyPartCreated (err, pPartHandle) { + handle = pPartHandle } } From 035a0cc06e5f7bc9194d81eed05c61df17600ff1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 15:46:47 +0200 Subject: [PATCH 036/221] Centering strategy parts --- ControlsToolBox/SidePanel.js | 3 --- Globals.js | 3 ++- StrategySpace/StrategyCollectionItem.js | 6 +++--- ViewPort.js | 5 +++++ 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/ControlsToolBox/SidePanel.js b/ControlsToolBox/SidePanel.js index 6b68073e3..c6f0e772a 100644 --- a/ControlsToolBox/SidePanel.js +++ b/ControlsToolBox/SidePanel.js @@ -9,9 +9,6 @@ function newSidePanel () { initialize: initialize } - const SIDE_PANEL_WIDTH = 450 - const SIDE_PANEL_TAB_WIDTH = 400 - let isInitialized = false thisObject.container = newContainer() diff --git a/Globals.js b/Globals.js index 4fa5de32a..09dfce412 100644 --- a/Globals.js +++ b/Globals.js @@ -162,7 +162,8 @@ const MAX_PLOTABLE_DATE = maxDate; const TOP_SPACE_HEIGHT = 5; const BOTTOM_SPACE_HEIGHT = 35; const BREAKPOINT_HEIGHT = 15; - +const SIDE_PANEL_WIDTH = 450 + const PRODUCT_CARD_STATUS = { ON: 'on', LOADING: 'loading', diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index d60268250..bee5c4941 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -20,7 +20,7 @@ function newStrategyCollectionItem () { return thisObject function initialize () { - const ITEM_WIDTH = 430 + const ITEM_WIDTH = SIDE_PANEL_WIDTH - 20 const ITEM_HEIGHT = 80 thisObject.container.frame.width = ITEM_WIDTH @@ -41,8 +41,8 @@ function newStrategyCollectionItem () { let payload = { profile: { position: { - x: 500, - y: 500 + x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, + y: viewPort.height / 2 }, visible: true }, diff --git a/ViewPort.js b/ViewPort.js index 70d4aeae1..11b286d3c 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -23,6 +23,8 @@ function newViewPort () { let thisObject = { visibleArea: undefined, + width: undefined, + height: undefined, eventHandler: undefined, zoomTargetLevel: undefined, zoomLevel: undefined, @@ -81,6 +83,9 @@ function newViewPort () { bottomLeft: { x: LEFT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN} } + thisObject.width = thisObject.visibleArea.topRight.x - thisObject.visibleArea.topLeft.x + thisObject.height = thisObject.visibleArea.bottomRight.y - thisObject.visibleArea.topLeft.y + readObjectState() } From 43dbfa4420aafd9691aba3c2d05556784f18048b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 16:12:09 +0200 Subject: [PATCH 037/221] Generating all Strategy Parts --- FloatingSpace/StrategyPart.js | 56 +++++++++--------- FloatingSpace/StrategyParts.js | 6 +- StrategySpace/StrategyCollectionItem.js | 78 ++++++++++++++++++++++++- 3 files changed, 107 insertions(+), 33 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index c42db919e..75f676d57 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -21,34 +21,34 @@ function newStrategyPart () { targetRadius: 0, currentRadius: 0, angle: 60 - }/*, - { - visible: false, - imagePathOn: "Images/menu.icon.on.2.gif", - imagePathOff: "Images/menu.icon.off.2.gif", - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 20 * 1 - }, - { - visible: false, - imagePathOn: "Images/menu.icon.on.3.gif", - imagePathOff: "Images/menu.icon.off.3.gif", - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }, - { - visible: false, - imagePathOn: "Images/menu.icon.on.4.gif", - imagePathOff: "Images/menu.icon.off.4.gif", - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -60 - } */ + }, + { + visible: false, + imagePathOn: 'Images/menu.icon.on.2.gif', + imagePathOff: 'Images/menu.icon.off.2.gif', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 * 1 + }, + { + visible: false, + imagePathOn: 'Images/menu.icon.on.3.gif', + imagePathOff: 'Images/menu.icon.off.3.gif', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }, + { + visible: false, + imagePathOn: 'Images/menu.icon.on.4.gif', + imagePathOff: 'Images/menu.icon.off.4.gif', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -60 + } ] return thisObject diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 19de9247a..6f52971c2 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -41,9 +41,9 @@ function newStrategyParts () { floatingObject.friction = 0.995 - floatingObject.initializeMass(100) - floatingObject.initializeRadius(30) - floatingObject.initializeImageSize(50) + floatingObject.initializeMass(50) + floatingObject.initializeRadius(15) + floatingObject.initializeImageSize(25) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index bee5c4941..b01964b16 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -37,6 +37,10 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { + generateStrategyParts() + } + + function createPart (upLabel, downLabel) { let handle let payload = { profile: { @@ -51,8 +55,8 @@ function newStrategyCollectionItem () { let imageId // 'My Image.png' - payload.profile.upLabel = thisObject.strategy.name - payload.profile.downLabel = thisObject.strategy.name + payload.profile.upLabel = upLabel + payload.profile.downLabel = downLabel payload.profile.imageId = imageId payload.profile.botAvatar = 'dont know what this is' @@ -63,6 +67,76 @@ function newStrategyCollectionItem () { } } + function generateStrategyParts () { + let strategy = thisObject.strategy + createPart('Strategy', strategy.name) + + createPart('Strategy Entry', '') + for (let k = 0; k < strategy.entryPoint.situations.length; k++) { + let situation = strategy.entryPoint.situations[k] + createPart('Situation', situation.name) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name) + } + } + + createPart('Strategy Exit', '') + for (let k = 0; k < strategy.exitPoint.situations.length; k++) { + let situation = strategy.exitPoint.situations[k] + createPart('Situation', situation.name) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name) + } + } + + createPart('Trade Entry', '') + for (let k = 0; k < strategy.sellPoint.situations.length; k++) { + let situation = strategy.sellPoint.situations[k] + createPart('Situation', situation.name) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name) + } + } + + createPart('Stop', '') + for (let p = 0; p < strategy.stopLoss.phases.length; p++) { + let phase = strategy.stopLoss.phases[p] + createPart('Phase', phase.name) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name) + } + } + } + + createPart('Take Profit', '') + for (let p = 0; p < strategy.buyOrder.phases.length; p++) { + let phase = strategy.buyOrder.phases[p] + createPart('Phase', phase.name) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name) + } + } + } + } + function getContainer (point) { let container if (thisObject.container.frame.isThisPointHere(point, true) === true) { From 69cce193bb778c8489051112402996640e3d6746 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 16:20:38 +0200 Subject: [PATCH 038/221] turning chartspace invisible works --- Spaces/ChartSpace.js | 7 +++++-- Spaces/PanelsSpace.js | 5 +++++ StrategySpace/StrategyCollectionItem.js | 2 ++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 25f51f709..3a25d6cc7 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -14,6 +14,7 @@ function newChartSpace () { logger.fileName = MODULE_NAME let thisObject = { + visible: true, container: undefined, drawBackground: drawBackground, draw: draw, @@ -83,6 +84,8 @@ function newChartSpace () { } function drawBackground () { + if (thisObject.visible !== true) { return } + for (var i = 0; i < thisObject.timeMachines.length; i++) { var timeMachine = thisObject.timeMachines[i] timeMachine.drawBackground() @@ -90,7 +93,7 @@ function newChartSpace () { } function draw () { - // thisObject.container.frame.draw(false, false) + if (thisObject.visible !== true) { return } for (var i = 0; i < thisObject.timeMachines.length; i++) { var timeMachine = thisObject.timeMachines[i] @@ -99,7 +102,7 @@ function newChartSpace () { } function getContainer (point, purpose) { - if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') } + if (thisObject.visible !== true) { return } let container diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 151d5af65..74b00c25e 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -6,6 +6,7 @@ The Panel Space y the place wehre all panels live, no matter who create them. function newPanelsSpace () { let thisObject = { + visible: true, container: undefined, createNewPanel: createNewPanel, destroyPanel: destroyPanel, @@ -100,6 +101,8 @@ function newPanelsSpace () { } function draw () { + if (thisObject.visible !== true) { return } + thisObject.container.frame.draw(false, false) thisObject.panels = panelsMap.get('Global') @@ -120,6 +123,8 @@ function newPanelsSpace () { } function getContainer (point) { + if (thisObject.visible !== true) { return } + let container /* diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index b01964b16..e982517b0 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -37,6 +37,8 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { + canvas.chartSpace.visible = false + canvas.panelsSpace.visible = false generateStrategyParts() } From 4e579df61ea507c71c23edce17eb0bb355d9d795 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 18:13:12 +0200 Subject: [PATCH 039/221] Equilibrium reached --- FloatingSpace/FloatingObject.js | 4 +- FloatingSpace/NoteSets.js | 2 +- FloatingSpace/ProfileBalls.js | 2 +- FloatingSpace/StrategyPart.js | 17 ++- FloatingSpace/StrategyParts.js | 69 ++++++++++-- StrategySpace/StrategyCollection.js | 2 +- StrategySpace/StrategyCollectionItem.js | 140 +++++++++++++++++++----- 7 files changed, 195 insertions(+), 41 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 8f1325d97..4486fb94a 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -64,7 +64,7 @@ function newFloatingObject () { return thisObject - function initialize (pType, callBackFunction) { + function initialize (pType, floatingLayer, callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } @@ -92,7 +92,7 @@ function newFloatingObject () { case 'Strategy Part': { underlayingObject = newStrategyPart() - underlayingObject.initialize(onInitialized) + underlayingObject.initialize(floatingLayer, onInitialized) function onInitialized (err) { diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index 4db399504..f341d8aab 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -219,7 +219,7 @@ function newNoteSets () { */ let floatingObject = newFloatingObject() - floatingObject.initialize('Note', onInitialized) + floatingObject.initialize('Note', floatingLayer, onInitialized) function onInitialized (err) { if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Entering function.') } diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 8be1a1992..65a0e4a95 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -41,7 +41,7 @@ function newProfileBalls () { function createNewProfileBall (pPayload, callBackFunction) { let floatingObject = newFloatingObject() - floatingObject.initialize('Profile Ball', onInitialized) + floatingObject.initialize('Profile Ball', floatingLayer, onInitialized) function onInitialized (err) { floatingObject.payload = pPayload diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 75f676d57..8ae664530 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -51,9 +51,13 @@ function newStrategyPart () { } ] + let floatingLayer + return thisObject - function initialize (callBackFunction) { + function initialize (pFloatingLayer, callBackFunction) { + floatingLayer = pFloatingLayer + for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] @@ -168,6 +172,17 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { + /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ + + if (pFloatingObject.payload.parentNode !== undefined) { + let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) + + pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x + pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y + } + + /* Here I continue painting the background */ + let point = { x: pFloatingObject.payload.profile.position.x, y: pFloatingObject.payload.profile.position.y diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 6f52971c2..5aeb54f4e 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -32,19 +32,73 @@ function newStrategyParts () { floatingLayer = pFloatingLayer } - function createNewStrategyPart (pPayload, callBackFunction) { + function createNewStrategyPart (type, pPayload, callBackFunction) { let floatingObject = newFloatingObject() - floatingObject.initialize('Strategy Part', onInitialized) + floatingObject.initialize('Strategy Part', floatingLayer, onInitialized) function onInitialized (err) { floatingObject.payload = pPayload - floatingObject.friction = 0.995 + switch (type) { + case 'Strategy': { + level_1() + break + } + case 'Strategy Entry': { + level_2() + break + } + case 'Strategy Exit': { + level_2() + break + } + case 'Trade Entry': { + level_2() + break + } + case 'Trade Exit': { + level_2() + break + } + case 'Stop': { + level_2() + break + } + case 'Take Profit': { + level_2() + break + } + default: { + level_3() + } + } - floatingObject.initializeMass(50) - floatingObject.initializeRadius(15) - floatingObject.initializeImageSize(25) - floatingObject.initializeFontSize(10) + function level_1 () { + floatingObject.friction = 0.9 + + floatingObject.initializeMass(100) + floatingObject.initializeRadius(50) + floatingObject.initializeImageSize(60) + floatingObject.initializeFontSize(10) + } + + function level_2 () { + floatingObject.friction = 0.85 + + floatingObject.initializeMass(50) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) + floatingObject.initializeFontSize(10) + } + + function level_3 () { + floatingObject.friction = 0.8 + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(10) + floatingObject.initializeImageSize(50) + floatingObject.initializeFontSize(10) + } floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' @@ -59,4 +113,3 @@ function newStrategyParts () { floatingLayer.killFloatingObject(pFloatingObjectHandle) } } - diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index 6056f801c..2069ae1dc 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -179,7 +179,7 @@ function newStrategyCollection () { }) .then(response => { window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - thisObject.strategies = response.data.strategizer_StrategyByFb.subStrategies + thisObject.strategies = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) createCollectionItems() resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index e982517b0..c7b725bc3 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -17,6 +17,8 @@ function newStrategyCollectionItem () { thisObject.container.isClickeable = true thisObject.container.isDraggeable = false + let visible = false + return thisObject function initialize () { @@ -37,13 +39,20 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { - canvas.chartSpace.visible = false - canvas.panelsSpace.visible = false - generateStrategyParts() + if (visible === false) { + canvas.chartSpace.visible = false + canvas.panelsSpace.visible = false + generateStrategyParts() + visible = true + } else { + canvas.chartSpace.visible = true + canvas.panelsSpace.visible = true + destroyStrategyParts() + visible = false + } } - function createPart (upLabel, downLabel) { - let handle + function createPart (partType, name, node, parentNode) { let payload = { profile: { position: { @@ -57,83 +66,160 @@ function newStrategyCollectionItem () { let imageId // 'My Image.png' - payload.profile.upLabel = upLabel - payload.profile.downLabel = downLabel + payload.profile.upLabel = partType + payload.profile.downLabel = name payload.profile.imageId = imageId payload.profile.botAvatar = 'dont know what this is' + payload.parentNode = parentNode - canvas.floatingSpace.strategyParts.createNewStrategyPart(payload, onStrategyPartCreated) + node.payload = payload + + canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload, onStrategyPartCreated) function onStrategyPartCreated (err, pPartHandle) { - handle = pPartHandle + node.handle = pPartHandle } } + function destroyPart (node) { + canvas.floatingSpace.strategyParts.destroyStrategyPart(node.handle) + } + function generateStrategyParts () { let strategy = thisObject.strategy - createPart('Strategy', strategy.name) + createPart('Strategy', strategy.name, strategy, undefined) - createPart('Strategy Entry', '') + createPart('Strategy Entry', '', strategy.entryPoint, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name) + createPart('Situation', situation.name, situation, strategy.entryPoint) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name) + createPart('Condition', condition.name, condition, situation) } } - createPart('Strategy Exit', '') + createPart('Strategy Exit', '', strategy.exitPoint, strategy) for (let k = 0; k < strategy.exitPoint.situations.length; k++) { let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name) + createPart('Situation', situation.name, situation, strategy.exitPoint) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name) + createPart('Condition', condition.name, condition, situation) } } - createPart('Trade Entry', '') + createPart('Trade Entry', '', strategy.sellPoint, strategy) for (let k = 0; k < strategy.sellPoint.situations.length; k++) { let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name) + createPart('Situation', situation.name, situation, strategy.sellPoint) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name) + createPart('Condition', condition.name, condition, situation) } } - createPart('Stop', '') + createPart('Stop', '', strategy.stopLoss, strategy) for (let p = 0; p < strategy.stopLoss.phases.length; p++) { let phase = strategy.stopLoss.phases[p] - createPart('Phase', phase.name) + createPart('Phase', phase.name, phase, strategy.stopLoss) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name) + createPart('Situation', situation.name, situation, phase) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name) + createPart('Condition', condition.name, condition, situation) } } } - createPart('Take Profit', '') + createPart('Take Profit', '', strategy.buyOrder, strategy) for (let p = 0; p < strategy.buyOrder.phases.length; p++) { let phase = strategy.buyOrder.phases[p] - createPart('Phase', phase.name) + createPart('Phase', phase.name, phase, strategy.buyOrder) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name) + createPart('Situation', situation.name, situation, phase) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name) + createPart('Condition', condition.name, condition, situation) + } + } + } + } + + function destroyStrategyParts () { + let strategy = thisObject.strategy + destroyPart(strategy) + + destroyPart(strategy.entryPoint) + for (let k = 0; k < strategy.entryPoint.situations.length; k++) { + let situation = strategy.entryPoint.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + + destroyPart(strategy.exitPoint) + for (let k = 0; k < strategy.exitPoint.situations.length; k++) { + let situation = strategy.exitPoint.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + + destroyPart(strategy.sellPoint) + for (let k = 0; k < strategy.sellPoint.situations.length; k++) { + let situation = strategy.sellPoint.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + + destroyPart(strategy.stopLoss) + for (let p = 0; p < strategy.stopLoss.phases.length; p++) { + let phase = strategy.stopLoss.phases[p] + destroyPart(strategy.stopLoss) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + } + + destroyPart(strategy.buyOrder) + for (let p = 0; p < strategy.buyOrder.phases.length; p++) { + let phase = strategy.buyOrder.phases[p] + destroyPart(strategy.buyOrder) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) } } } From 1687f96166879b91bc35ee0da04d2b1e14ec3edc Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 19:10:37 +0200 Subject: [PATCH 040/221] Dancing Stuff --- FloatingSpace/FloatingLayer.js | 2 +- FloatingSpace/StrategyPart.js | 7 +++- FloatingSpace/StrategyParts.js | 56 +++++++++++++++++++++---- StrategySpace/StrategyCollectionItem.js | 33 ++++++++------- 4 files changed, 74 insertions(+), 24 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index e70b52045..01ba5ab27 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -63,7 +63,7 @@ function newFloatingLayer () { let dyingFloatingObjects = [] - let maxTargetRepulsionForce = 0.003 + let maxTargetRepulsionForce = 0.001 let currentHandle = 0 return thisObject diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 8ae664530..7ee530a3b 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -52,6 +52,7 @@ function newStrategyPart () { ] let floatingLayer + let isMouseOver = false return thisObject @@ -107,6 +108,8 @@ function newStrategyPart () { menuItem.targetRadius = menuItem.rawRadius * 1.5 } + + isMouseOver = true } function onMouseNotOver () { @@ -115,6 +118,8 @@ function newStrategyPart () { menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5 } + + isMouseOver = false } function onMouseClick (pPoint, pFloatingObject) { @@ -312,7 +317,7 @@ function newStrategyPart () { label = pFloatingObject.payload.profile.downLabel - if (label !== undefined) { + if (label !== undefined && isMouseOver === true) { labelPoint = { x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 5aeb54f4e..e37a09ccd 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -37,6 +37,7 @@ function newStrategyParts () { floatingObject.initialize('Strategy Part', floatingLayer, onInitialized) function onInitialized (err) { + const FRICTION = 0.98 floatingObject.payload = pPayload switch (type) { @@ -68,39 +69,78 @@ function newStrategyParts () { level_2() break } - default: { + case 'Phase': { level_3() + break + } + case 'Situation': { + level_4() + break + } + case 'Condition': { + level_5() + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + type) } } } function level_1 () { - floatingObject.friction = 0.9 + floatingObject.friction = FRICTION floatingObject.initializeMass(100) - floatingObject.initializeRadius(50) - floatingObject.initializeImageSize(60) + floatingObject.initializeRadius(40) + floatingObject.initializeImageSize(70) floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' } function level_2 () { - floatingObject.friction = 0.85 + floatingObject.friction = FRICTION floatingObject.initializeMass(50) floatingObject.initializeRadius(30) floatingObject.initializeImageSize(50) floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.5)' } function level_3 () { - floatingObject.friction = 0.8 + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(20) + floatingObject.initializeImageSize(30) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 0.5)' + } + + function level_4 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(15) + floatingObject.initializeImageSize(20) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 0.5)' + } + + function level_5 () { + floatingObject.friction = FRICTION floatingObject.initializeMass(10) floatingObject.initializeRadius(10) - floatingObject.initializeImageSize(50) + floatingObject.initializeImageSize(10) floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.5)' } - floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' floatingLayer.addFloatingObject(floatingObject) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index c7b725bc3..118a528f0 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -52,7 +52,7 @@ function newStrategyCollectionItem () { } } - function createPart (partType, name, node, parentNode) { + function createPart (partType, name, node, parentNode, title) { let payload = { profile: { position: { @@ -66,7 +66,12 @@ function newStrategyCollectionItem () { let imageId // 'My Image.png' - payload.profile.upLabel = partType + if (title !== undefined) { + payload.profile.upLabel = title + } else { + payload.profile.upLabel = partType + } + payload.profile.downLabel = name payload.profile.imageId = imageId payload.profile.botAvatar = 'dont know what this is' @@ -92,48 +97,48 @@ function newStrategyCollectionItem () { createPart('Strategy Entry', '', strategy.entryPoint, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint) + createPart('Situation', situation.name, situation, strategy.entryPoint, 'Situation' + ' ' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) } } createPart('Strategy Exit', '', strategy.exitPoint, strategy) for (let k = 0; k < strategy.exitPoint.situations.length; k++) { let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint) + createPart('Situation', situation.name, situation, strategy.exitPoint, 'Situation' + ' ' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) } } createPart('Trade Entry', '', strategy.sellPoint, strategy) for (let k = 0; k < strategy.sellPoint.situations.length; k++) { let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint) + createPart('Situation', situation.name, situation, strategy.sellPoint, 'Situation' + ' ' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) } } createPart('Stop', '', strategy.stopLoss, strategy) for (let p = 0; p < strategy.stopLoss.phases.length; p++) { let phase = strategy.stopLoss.phases[p] - createPart('Phase', phase.name, phase, strategy.stopLoss) + createPart('Phase', phase.name, phase, strategy.stopLoss, 'Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase) + createPart('Situation', situation.name, situation, phase, 'Situation' + ' ' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) } } } @@ -141,15 +146,15 @@ function newStrategyCollectionItem () { createPart('Take Profit', '', strategy.buyOrder, strategy) for (let p = 0; p < strategy.buyOrder.phases.length; p++) { let phase = strategy.buyOrder.phases[p] - createPart('Phase', phase.name, phase, strategy.buyOrder) + createPart('Phase', phase.name, phase, strategy.buyOrder, 'Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase) + createPart('Situation', situation.name, situation, phase, 'Situation' + ' ' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) } } } From 87e8a108f7bff193fce261c5c16d4429f8c50c2f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 19:36:29 +0200 Subject: [PATCH 041/221] Phases linked --- Animation.js | 2 -- FloatingSpace/StrategyParts.js | 2 +- StrategySpace/StrategyCollectionItem.js | 33 +++++++++++++++++++++++-- 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/Animation.js b/Animation.js index 063725ada..d27dc114c 100644 --- a/Animation.js +++ b/Animation.js @@ -131,8 +131,6 @@ function newAnimation () { } function clearBrowserCanvas () { - if (INFO_LOG === true) { logger.write('[INFO] clearBrowserCanvas -> Entering function.') } - browserCanvasContext.beginPath() browserCanvasContext.rect(0, 0, browserCanvas.width, browserCanvas.height) diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index e37a09ccd..81b524ad5 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -37,7 +37,7 @@ function newStrategyParts () { floatingObject.initialize('Strategy Part', floatingLayer, onInitialized) function onInitialized (err) { - const FRICTION = 0.98 + const FRICTION = 0.97 floatingObject.payload = pPayload switch (type) { diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 118a528f0..4a93b2c1f 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -91,6 +91,7 @@ function newStrategyCollectionItem () { } function generateStrategyParts () { + let lastPhase let strategy = thisObject.strategy createPart('Strategy', strategy.name, strategy, undefined) @@ -130,7 +131,15 @@ function newStrategyCollectionItem () { createPart('Stop', '', strategy.stopLoss, strategy) for (let p = 0; p < strategy.stopLoss.phases.length; p++) { let phase = strategy.stopLoss.phases[p] - createPart('Phase', phase.name, phase, strategy.stopLoss, 'Phase' + ' ' + (p + 1)) + + let parent + if (p === 0) { + parent = strategy.stopLoss + } else { + parent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] @@ -146,7 +155,14 @@ function newStrategyCollectionItem () { createPart('Take Profit', '', strategy.buyOrder, strategy) for (let p = 0; p < strategy.buyOrder.phases.length; p++) { let phase = strategy.buyOrder.phases[p] - createPart('Phase', phase.name, phase, strategy.buyOrder, 'Phase' + ' ' + (p + 1)) + let parent + if (p === 0) { + parent = strategy.buyOrder + } else { + parent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] @@ -246,6 +262,19 @@ function newStrategyCollectionItem () { text() arrow() icon() + floatingBackground() + } + + function floatingBackground () { + if (visible === false) { return } + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)' + + browserCanvasContext.closePath() + browserCanvasContext.fill() } function text () { From ef2daea137b0f7a755eeb3a2d2def4d1e5d58955 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 19:48:05 +0200 Subject: [PATCH 042/221] Black Background --- FloatingSpace/StrategyPart.js | 3 ++- FloatingSpace/StrategyParts.js | 12 ++++++------ StrategySpace/StrategyCollectionItem.js | 3 ++- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 7ee530a3b..cd9ddd378 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -247,7 +247,7 @@ function newStrategyPart () { alphaA = 0.75 browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius / 2, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = pFloatingObject.fillStyle @@ -330,3 +330,4 @@ function newStrategyPart () { } } } + diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 81b524ad5..b010dde7e 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -94,7 +94,7 @@ function newStrategyParts () { floatingObject.initializeImageSize(70) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' } function level_2 () { @@ -105,7 +105,7 @@ function newStrategyParts () { floatingObject.initializeImageSize(50) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.5)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' } function level_3 () { @@ -116,7 +116,7 @@ function newStrategyParts () { floatingObject.initializeImageSize(30) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 0.5)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' } function level_4 () { @@ -127,7 +127,7 @@ function newStrategyParts () { floatingObject.initializeImageSize(20) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 0.5)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)' } function level_5 () { @@ -138,10 +138,10 @@ function newStrategyParts () { floatingObject.initializeImageSize(10) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.5)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 1)' } - floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' + floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' floatingLayer.addFloatingObject(floatingObject) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 4a93b2c1f..8add4cea7 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -271,7 +271,7 @@ function newStrategyCollectionItem () { browserCanvasContext.beginPath() browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' browserCanvasContext.closePath() browserCanvasContext.fill() @@ -380,3 +380,4 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } + From c7af4af7e25ef71660e367815dd46b0b66650828 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 20:02:52 +0200 Subject: [PATCH 043/221] better radious --- FloatingSpace/StrategyPart.js | 4 ++-- FloatingSpace/StrategyParts.js | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index cd9ddd378..41bea693e 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -106,7 +106,7 @@ function newStrategyPart () { for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] - menuItem.targetRadius = menuItem.rawRadius * 1.5 + menuItem.targetRadius = menuItem.rawRadius * 2.5 } isMouseOver = true @@ -247,7 +247,7 @@ function newStrategyPart () { alphaA = 0.75 browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius / 2, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 2 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = pFloatingObject.fillStyle diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index b010dde7e..ae0d78a8a 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -90,8 +90,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(100) - floatingObject.initializeRadius(40) - floatingObject.initializeImageSize(70) + floatingObject.initializeRadius(60) + floatingObject.initializeImageSize(110) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' @@ -101,8 +101,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(50) - floatingObject.initializeRadius(30) - floatingObject.initializeImageSize(50) + floatingObject.initializeRadius(45) + floatingObject.initializeImageSize(80) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' @@ -112,8 +112,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(20) - floatingObject.initializeImageSize(30) + floatingObject.initializeRadius(40) + floatingObject.initializeImageSize(70) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' @@ -123,8 +123,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(15) - floatingObject.initializeImageSize(20) + floatingObject.initializeRadius(35) + floatingObject.initializeImageSize(60) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)' @@ -134,8 +134,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(10) - floatingObject.initializeImageSize(10) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 1)' From f7f27159e32e06241c047b3a6d110db9d015e9bf Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 20:07:26 +0200 Subject: [PATCH 044/221] More expansion when mouse over --- FloatingSpace/FloatingObject.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 4486fb94a..20aab6a21 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -134,9 +134,9 @@ function newFloatingObject () { } function onMouseOver () { - thisObject.targetRadius = thisObject.rawRadius * 1.5 - thisObject.targetImageSize = thisObject.rawImageSize * 1.5 - thisObject.targetFontSize = thisObject.rawFontSize * 1.5 + thisObject.targetRadius = thisObject.rawRadius * 2.5 + thisObject.targetImageSize = thisObject.rawImageSize * 2.5 + thisObject.targetFontSize = thisObject.rawFontSize * 2.5 underlayingObject.onMouseOver() } From 4d2e9dcf637647548ee602b155d43586c98e5177 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 08:56:10 +0200 Subject: [PATCH 045/221] Menues per subtype --- FloatingSpace/FloatingObject.js | 29 +++--- FloatingSpace/NoteSets.js | 2 +- FloatingSpace/ProfileBalls.js | 2 +- FloatingSpace/StrategyPart.js | 152 +++++++++++++++++++------------- FloatingSpace/StrategyParts.js | 27 +++--- 5 files changed, 123 insertions(+), 89 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 20aab6a21..5f17169c9 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -15,6 +15,7 @@ function newFloatingObject () { 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. + underlayingObject: undefined, physicsEnabled: false, @@ -58,21 +59,19 @@ function newFloatingObject () { } - let underlayingObject - thisObject.eventHandler = newEventHandler() return thisObject - function initialize (pType, floatingLayer, callBackFunction) { + function initialize (pType, pSubType, floatingLayer, callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } switch (pType) { case 'Profile Ball': { - underlayingObject = newProfileBall() - underlayingObject.initialize(onInitialized) + thisObject.underlayingObject = newProfileBall() + thisObject.underlayingObject.initialize(onInitialized) function onInitialized (err) { @@ -81,8 +80,8 @@ function newFloatingObject () { break } case 'Note': { - underlayingObject = newNote() - underlayingObject.initialize(onInitialized) + thisObject.underlayingObject = newNote() + thisObject.underlayingObject.initialize(onInitialized) function onInitialized (err) { @@ -91,8 +90,8 @@ function newFloatingObject () { } case 'Strategy Part': { - underlayingObject = newStrategyPart() - underlayingObject.initialize(floatingLayer, onInitialized) + thisObject.underlayingObject = newStrategyPart() + thisObject.underlayingObject.initialize(floatingLayer, pSubType, onInitialized) function onInitialized (err) { @@ -124,7 +123,7 @@ function newFloatingObject () { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - underlayingObject.physicsLoop() + thisObject.underlayingObject.physicsLoop() if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { @@ -138,7 +137,7 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 2.5 thisObject.targetFontSize = thisObject.rawFontSize * 2.5 - underlayingObject.onMouseOver() + thisObject.underlayingObject.onMouseOver() } function onMouseNotOver () { @@ -146,19 +145,19 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 1 thisObject.targetFontSize = thisObject.rawFontSize * 1 - underlayingObject.onMouseNotOver() + thisObject.underlayingObject.onMouseNotOver() } function onMouseClick (pPoint) { - underlayingObject.onMouseClick(pPoint, thisObject) + thisObject.underlayingObject.onMouseClick(pPoint, thisObject) } function drawBackground () { - underlayingObject.drawBackground(thisObject) + thisObject.underlayingObject.drawBackground(thisObject) } function drawForeground () { - underlayingObject.drawForeground(thisObject) + thisObject.underlayingObject.drawForeground(thisObject) } function initializeMass (suggestedValue) { diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index f341d8aab..a5acfa44f 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -219,7 +219,7 @@ function newNoteSets () { */ let floatingObject = newFloatingObject() - floatingObject.initialize('Note', floatingLayer, onInitialized) + floatingObject.initialize('Note', '', floatingLayer, onInitialized) function onInitialized (err) { if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Entering function.') } diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 65a0e4a95..627bb7fe8 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -41,7 +41,7 @@ function newProfileBalls () { function createNewProfileBall (pPayload, callBackFunction) { let floatingObject = newFloatingObject() - floatingObject.initialize('Profile Ball', floatingLayer, onInitialized) + floatingObject.initialize('Profile Ball', '', floatingLayer, onInitialized) function onInitialized (err) { floatingObject.payload = pPayload diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 41bea693e..b1963cbf1 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -1,7 +1,7 @@ function newStrategyPart () { let thisObject = { - + type: undefined, physicsLoop: physicsLoop, onMouseOver: onMouseOver, onMouseClick: onMouseClick, @@ -12,53 +12,89 @@ function newStrategyPart () { } - let ballStringMenu = [ - { - visible: false, - imagePathOn: 'Images/menu.icon.on.1.gif', - imagePathOff: 'Images/menu.icon.off.1.gif', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 60 - }, - { - visible: false, - imagePathOn: 'Images/menu.icon.on.2.gif', - imagePathOff: 'Images/menu.icon.off.2.gif', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 20 * 1 - }, - { - visible: false, - imagePathOn: 'Images/menu.icon.on.3.gif', - imagePathOff: 'Images/menu.icon.off.3.gif', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }, - { - visible: false, - imagePathOn: 'Images/menu.icon.on.4.gif', - imagePathOff: 'Images/menu.icon.off.4.gif', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -60 - } - ] + let ballStringMenu = [] let floatingLayer let isMouseOver = false return thisObject - function initialize (pFloatingLayer, callBackFunction) { + function initialize (pFloatingLayer, pType, callBackFunction) { floatingLayer = pFloatingLayer + switch (pType) { + case 'Strategy': { + break + } + case 'Strategy Entry': { + break + } + case 'Strategy Exit': { + break + } + case 'Trade Entry': { + break + } + case 'Trade Exit': { + break + } + case 'Stop': { + break + } + case 'Take Profit': { + break + } + case 'Phase': { + break + } + case 'Situation': { + break + } + case 'Condition': { + ballStringMenu = [ + { + visible: false, + imagePathOn: 'Images/icons/style-01/html.png', + imagePathOff: 'Images/icons/style-01/html.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }, + { + visible: false, + imagePathOn: 'Images/icons/style-01/settings.png', + imagePathOff: 'Images/icons/style-01/settings.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 * 1 + }, + { + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/tools.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }, + { + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/trash.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -60 + }] + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + pType) } + } + } + for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] @@ -106,7 +142,7 @@ function newStrategyPart () { for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] - menuItem.targetRadius = menuItem.rawRadius * 2.5 + menuItem.targetRadius = menuItem.rawRadius * 1.5 } isMouseOver = true @@ -177,14 +213,13 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { + if (pFloatingObject.payload.parentNode === undefined) { return } + /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ + let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) - if (pFloatingObject.payload.parentNode !== undefined) { - let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) - - pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x - pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y - } + pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x + pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y /* Here I continue painting the background */ @@ -202,7 +237,7 @@ function newStrategyPart () { browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y) browserCanvasContext.lineTo(point.x, point.y) browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' - browserCanvasContext.setLineDash([4, 2]) + browserCanvasContext.setLineDash([1, 4]) browserCanvasContext.lineWidth = 1 browserCanvasContext.stroke() browserCanvasContext.setLineDash([0, 0]) @@ -224,28 +259,19 @@ function newStrategyPart () { function drawForeground (pFloatingObject) { if (pFloatingObject.currentRadius > 5) { /* Contourn */ - +/* browserCanvasContext.beginPath() browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' browserCanvasContext.lineWidth = 1 browserCanvasContext.stroke() + */ } if (pFloatingObject.currentRadius > 0.5) { /* Main FloatingObject */ - var alphaA - - if (pFloatingObject.currentRadius < 3) { - alphaA = 1 - } else { - alphaA = 0.75 - } - - alphaA = 0.75 - browserCanvasContext.beginPath() browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 2 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() @@ -253,6 +279,14 @@ function newStrategyPart () { browserCanvasContext.fillStyle = pFloatingObject.fillStyle browserCanvasContext.fill() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 1 / 3, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' + + browserCanvasContext.fill() } /* Image */ diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index ae0d78a8a..1cef46868 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -34,7 +34,8 @@ function newStrategyParts () { function createNewStrategyPart (type, pPayload, callBackFunction) { let floatingObject = newFloatingObject() - floatingObject.initialize('Strategy Part', floatingLayer, onInitialized) + floatingObject.initialize('Strategy Part', type, floatingLayer, onInitialized) + floatingObject.underlayingObject.type = type function onInitialized (err) { const FRICTION = 0.97 @@ -90,8 +91,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(100) - floatingObject.initializeRadius(60) - floatingObject.initializeImageSize(110) + floatingObject.initializeRadius(45) + floatingObject.initializeImageSize(80) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' @@ -101,8 +102,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(50) - floatingObject.initializeRadius(45) - floatingObject.initializeImageSize(80) + floatingObject.initializeRadius(40) + floatingObject.initializeImageSize(70) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' @@ -112,8 +113,8 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(40) - floatingObject.initializeImageSize(70) + floatingObject.initializeRadius(35) + floatingObject.initializeImageSize(60) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' @@ -123,22 +124,22 @@ function newStrategyParts () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(35) - floatingObject.initializeImageSize(60) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)' } function level_5 () { floatingObject.friction = FRICTION floatingObject.initializeMass(10) - floatingObject.initializeRadius(30) - floatingObject.initializeImageSize(50) + floatingObject.initializeRadius(25) + floatingObject.initializeImageSize(40) floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 1)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' } floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' From a87a9b58da00ed292f1fde43ed8dc2a1a440cd19 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 09:03:59 +0200 Subject: [PATCH 046/221] Code Cleaning --- FloatingSpace/FloatingObject.js | 13 ++----------- FloatingSpace/Note.js | 8 ++++---- FloatingSpace/ProfileBall.js | 10 ++++------ FloatingSpace/StrategyPart.js | 10 +--------- 4 files changed, 11 insertions(+), 30 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 5f17169c9..1ca828acd 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -81,22 +81,13 @@ function newFloatingObject () { } case 'Note': { thisObject.underlayingObject = newNote() - thisObject.underlayingObject.initialize(onInitialized) - - function onInitialized (err) { - - } + thisObject.underlayingObject.initialize() break } case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() - thisObject.underlayingObject.initialize(floatingLayer, pSubType, onInitialized) - - function onInitialized (err) { - - } - + thisObject.underlayingObject.initialize(floatingLayer, pSubType) break } default: { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 7fb35b9b9..26e76668d 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -14,8 +14,8 @@ function newNote () { return thisObject - function initialize (callBackFunction) { - callBackFunction() + function initialize () { + } function physicsLoop () { @@ -214,7 +214,7 @@ function newNote () { if (label !== undefined) { if (SIZE_PERCENTAGE > 0.9) { - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2 @@ -292,7 +292,7 @@ function newNote () { y: startingPosition.y + (i + 1) * (fontSize * FONT_ASPECT_RATIO + 10) } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, ' + ALPHA + ')' browserCanvasContext.fillText(labelRow, labelPoint.x, labelPoint.y) } diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 426f0ad1a..2e0c52f8f 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -53,7 +53,7 @@ function newProfileBall () { return thisObject - function initialize (callBackFunction) { + function initialize () { for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] @@ -77,8 +77,6 @@ function newProfileBall () { menuItem.icon = menuItem.iconOn // The default value is ON. } - - callBackFunction() } function physicsLoop () { @@ -278,7 +276,7 @@ function newProfileBall () { let labelPoint let fontSize = pFloatingObject.currentFontSize - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label @@ -290,7 +288,7 @@ function newProfileBall () { y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } @@ -303,7 +301,7 @@ function newProfileBall () { y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 } - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index b1963cbf1..1579950f1 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -19,7 +19,7 @@ function newStrategyPart () { return thisObject - function initialize (pFloatingLayer, pType, callBackFunction) { + function initialize (pFloatingLayer, pType) { floatingLayer = pFloatingLayer switch (pType) { @@ -97,29 +97,21 @@ function newStrategyPart () { for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] - menuItem.iconOn = new Image() - menuItem.iconOn.onload = onImageLoad function onImageLoad () { menuItem.iconOff = new Image() - menuItem.iconOff.onload = onImageLoad function onImageLoad () { menuItem.canDrawIcon = true } - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff } - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn - menuItem.icon = menuItem.iconOn // The default value is ON. } - - callBackFunction() } function physicsLoop () { From 6ff2315460338e26ce66b4d1101144a21936a608 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 09:54:50 +0200 Subject: [PATCH 047/221] Polishing Conditions --- FloatingSpace/FloatingObject.js | 4 +- FloatingSpace/StrategyPart.js | 86 ++++++++++++++++++--------------- FloatingSpace/StrategyParts.js | 2 +- 3 files changed, 50 insertions(+), 42 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 1ca828acd..903f05d3d 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -125,8 +125,8 @@ function newFloatingObject () { function onMouseOver () { thisObject.targetRadius = thisObject.rawRadius * 2.5 - thisObject.targetImageSize = thisObject.rawImageSize * 2.5 - thisObject.targetFontSize = thisObject.rawFontSize * 2.5 + thisObject.targetImageSize = thisObject.rawImageSize * 2.0 + thisObject.targetFontSize = thisObject.rawFontSize * 2.0 thisObject.underlayingObject.onMouseOver() } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 1579950f1..123b4f755 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -16,6 +16,8 @@ function newStrategyPart () { let floatingLayer let isMouseOver = false + let image + let imagePath return thisObject @@ -51,11 +53,12 @@ function newStrategyPart () { break } case 'Condition': { + imagePath = 'Images/icons/style-01/brainstorming.png' ballStringMenu = [ { visible: false, imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/html.png', + imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -64,7 +67,7 @@ function newStrategyPart () { { visible: false, imagePathOn: 'Images/icons/style-01/settings.png', - imagePathOff: 'Images/icons/style-01/settings.png', + imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -73,7 +76,7 @@ function newStrategyPart () { { visible: false, imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -82,7 +85,7 @@ function newStrategyPart () { { visible: false, imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -95,6 +98,20 @@ function newStrategyPart () { } } +/* Load Part Image */ + + if (imagePath !== undefined) { + image = new Image() + image.onload = onImageLoad + + function onImageLoad () { + image.canDrawIcon = true + } + image.src = window.canvasApp.urlPrefix + imagePath + } + +/* Load Menu Images */ + for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] menuItem.iconOn = new Image() @@ -160,8 +177,8 @@ function newStrategyPart () { if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) + x: pFloatingObject.currentPosition.x + pFloatingObject.currentRadius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.currentPosition.y - pFloatingObject.currentRadius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) @@ -220,8 +237,6 @@ function newStrategyPart () { y: pFloatingObject.payload.profile.position.y } - point = viewPort.fitIntoVisibleArea(point) - if (pFloatingObject.currentRadius > 1) { /* Target Line */ @@ -249,11 +264,18 @@ function newStrategyPart () { } function drawForeground (pFloatingObject) { - if (pFloatingObject.currentRadius > 5) { + let position = { + x: pFloatingObject.currentPosition.x, + y: pFloatingObject.currentPosition.y + } + + let radius = pFloatingObject.currentRadius + + if (radius > 5) { /* Contourn */ /* browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(position.x, position.y, radius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' browserCanvasContext.lineWidth = 1 @@ -261,11 +283,11 @@ function newStrategyPart () { */ } - if (pFloatingObject.currentRadius > 0.5) { + if (radius > 0.5 && image === undefined) { /* Main FloatingObject */ browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 2 / 3, 0, Math.PI * 2, true) + browserCanvasContext.arc(position.x, position.y, radius * 2 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = pFloatingObject.fillStyle @@ -273,7 +295,7 @@ function newStrategyPart () { browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 1 / 3, 0, Math.PI * 2, true) + browserCanvasContext.arc(position.x, position.y, radius * 1 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' @@ -283,21 +305,9 @@ function newStrategyPart () { /* Image */ - if (pFloatingObject.payload.profile.imageId !== undefined) { - let image = pFloatingObject.payload.profile.botAvatar - - if (image !== null && image !== undefined) { - browserCanvasContext.save() - browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.closePath() - browserCanvasContext.clip() - browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) - browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) - browserCanvasContext.clip() - browserCanvasContext.closePath() - browserCanvasContext.restore() + if (image !== undefined) { + if (image.canDrawIcon === true) { + browserCanvasContext.drawImage(image, position.x - pFloatingObject.currentImageSize / 2, position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) } } @@ -307,18 +317,17 @@ function newStrategyPart () { let menuItem = ballStringMenu[i] if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) - } + let menuPosition = { + x: position.x + radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), + y: position.y - radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } - browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) + browserCanvasContext.drawImage(menuItem.icon, menuPosition.x - menuItem.currentRadius, menuPosition.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) } } /* Label Text */ - if (pFloatingObject.currentRadius > 6) { + if (radius > 6) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle let labelPoint @@ -332,8 +341,8 @@ function newStrategyPart () { if (label !== undefined) { labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y - radius - fontSize * FONT_ASPECT_RATIO - 10 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -345,8 +354,8 @@ function newStrategyPart () { if (label !== undefined && isMouseOver === true) { labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y + radius + fontSize * FONT_ASPECT_RATIO + 15 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -356,4 +365,3 @@ function newStrategyPart () { } } } - diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 1cef46868..53f50272b 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -136,7 +136,7 @@ function newStrategyParts () { floatingObject.initializeMass(10) floatingObject.initializeRadius(25) - floatingObject.initializeImageSize(40) + floatingObject.initializeImageSize(30) floatingObject.initializeFontSize(10) floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' From f66867516575fb3a536906559a60b69123450668 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 13:16:21 +0200 Subject: [PATCH 048/221] Menu Labels done --- FloatingSpace/StrategyPart.js | 195 +++++++++++++++++++++--- StrategySpace/StrategyCollectionItem.js | 7 +- 2 files changed, 176 insertions(+), 26 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 123b4f755..a67650352 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -26,36 +26,125 @@ function newStrategyPart () { switch (pType) { case 'Strategy': { + imagePath = 'Images/icons/style-01/quality.png' + ballStringMenu = [ + { + label: 'Settings', + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }, + { + label: 'Delete', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 * 1 + }] break } case 'Strategy Entry': { + imagePath = 'Images/icons/style-01/startup.png' + ballStringMenu = [ + { + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Strategy Exit': { + imagePath = 'Images/icons/style-01/support.png' + ballStringMenu = [ + { + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Trade Entry': { + imagePath = 'Images/icons/style-01/compass.png' + ballStringMenu = [ + { + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Trade Exit': { + imagePath = 'Images/icons/style-01/broken-link.png' + ballStringMenu = [ + { + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Stop': { + imagePath = 'Images/icons/style-01/pixel.png' + ballStringMenu = [ + { + label: 'Add Phase', + visible: false, + imagePathOn: 'Images/icons/style-01/placeholder.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Take Profit': { + imagePath = 'Images/icons/style-01/competition.png' + ballStringMenu = [ + { + label: 'Add Phase', + visible: false, + imagePathOn: 'Images/icons/style-01/placeholder.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] break } case 'Phase': { - break - } - case 'Situation': { - break - } - case 'Condition': { - imagePath = 'Images/icons/style-01/brainstorming.png' + imagePath = 'Images/icons/style-01/placeholder.png' ballStringMenu = [ { + label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', imagePathOff: 'Images/icons/style-01/target.png', @@ -65,8 +154,9 @@ function newStrategyPart () { angle: 60 }, { + label: 'Add Situation', visible: false, - imagePathOn: 'Images/icons/style-01/settings.png', + imagePathOn: 'Images/icons/style-01/attractive.png', imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, @@ -74,22 +164,64 @@ function newStrategyPart () { angle: 20 * 1 }, { - visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }, - { + label: 'Delete', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: -60 + angle: -20 + }] + break + } + case 'Situation': { + imagePath = 'Images/icons/style-01/attractive.png' + ballStringMenu = [ + { + label: 'Add Condition', + visible: false, + imagePathOn: 'Images/icons/style-01/testing.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }, + { + label: 'Delete', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 * 1 + }] + break + } + case 'Condition': { + imagePath = 'Images/icons/style-01/testing.png' + ballStringMenu = [ + { + label: 'Edit Code', + visible: false, + imagePathOn: 'Images/icons/style-01/html.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }, + { + label: 'Delete', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 * 1 }] break } @@ -227,8 +359,10 @@ function newStrategyPart () { /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) - pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x - pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y + if (isMouseOver === false) { + pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x + pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y + } /* Here I continue painting the background */ @@ -322,12 +456,30 @@ function newStrategyPart () { y: position.y - radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, menuPosition.x - menuItem.currentRadius, menuPosition.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) + + /* Menu Label */ + + let labelPoint + let fontSize = 10 + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + if (menuItem.label !== undefined && menuItem.currentRadius >= menuItem.targetRadius) { + labelPoint = { + x: menuPosition.x + menuItem.currentRadius + 10, + y: menuPosition.y + fontSize * FONT_ASPECT_RATIO + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fillText(menuItem.label, labelPoint.x, labelPoint.y) + } } } /* Label Text */ - if (radius > 6) { + if (radius > 6 && isMouseOver === true) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle let labelPoint @@ -365,3 +517,4 @@ function newStrategyPart () { } } } + diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 8add4cea7..ac8afe798 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -73,8 +73,6 @@ function newStrategyCollectionItem () { } payload.profile.downLabel = name - payload.profile.imageId = imageId - payload.profile.botAvatar = 'dont know what this is' payload.parentNode = parentNode node.payload = payload @@ -139,7 +137,7 @@ function newStrategyCollectionItem () { parent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1)) + createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] @@ -162,7 +160,7 @@ function newStrategyCollectionItem () { parent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1)) + createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' ' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] @@ -380,4 +378,3 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } - From cce96c9a90d9bcf1ffa06e49c290420f044830ca Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 13:27:53 +0200 Subject: [PATCH 049/221] Tyding up Floating Space --- FloatingSpace/NoteSets.js | 8 +++++++- FloatingSpace/ProfileBalls.js | 15 +++++---------- FloatingSpace/StrategyPart.js | 8 ++++---- FloatingSpace/StrategyParts.js | 1 + Spaces/FloatingSpace.js | 14 ++++---------- 5 files changed, 21 insertions(+), 25 deletions(-) diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index a5acfa44f..c10eb6121 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -23,7 +23,8 @@ function newNoteSets () { let thisObject = { createNoteSet: createNoteSet, destroyNoteSet: destroyNoteSet, - initialize: initialize + initialize: initialize, + finalize: finalize } let noteSets = [] @@ -35,6 +36,11 @@ function newNoteSets () { floatingLayer = pFloatingLayer } + function finalize () { + floatingLayer.finalize() + floatingLayer = undefined + } + function createNoteSet (pPayload, pEventHandler, callBackFunction) { try { /* diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 627bb7fe8..136e6d9be 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -25,20 +25,15 @@ function newProfileBalls () { return thisObject - function finalize () { - try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - - floatingLayer.finalize() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } - } - } - function initialize (pFloatingLayer) { floatingLayer = pFloatingLayer } + function finalize () { + floatingLayer.finalize() + floatingLayer = undefined + } + function createNewProfileBall (pPayload, callBackFunction) { let floatingObject = newFloatingObject() floatingObject.initialize('Profile Ball', '', floatingLayer, onInitialized) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index a67650352..12842d9ba 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -39,7 +39,7 @@ function newStrategyPart () { angle: 60 }, { - label: 'Delete', + label: 'Delete This Strategy', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', imagePathOff: 'Images/icons/style-01/target.png', @@ -164,7 +164,7 @@ function newStrategyPart () { angle: 20 * 1 }, { - label: 'Delete', + label: 'Delete This Phase', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', imagePathOff: 'Images/icons/style-01/target.png', @@ -189,7 +189,7 @@ function newStrategyPart () { angle: 60 }, { - label: 'Delete', + label: 'Delete This Situation', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', imagePathOff: 'Images/icons/style-01/target.png', @@ -214,7 +214,7 @@ function newStrategyPart () { angle: 60 }, { - label: 'Delete', + label: 'Delete This Condition', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', imagePathOff: 'Images/icons/style-01/target.png', diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 53f50272b..da2a6bb88 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -26,6 +26,7 @@ function newStrategyParts () { function finalize () { floatingLayer.finalize() + floatingLayer = undefined } function initialize (pFloatingLayer) { diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index e7f6e494d..810ca77b6 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -1,7 +1,6 @@  function newFloatingSpace () { const MODULE_NAME = 'Floating Space' - const INFO_LOG = false const ERROR_LOG = true /* The Floating Space is the place where floating elements like floatingObjects, live and are rendered. @@ -20,15 +19,10 @@ function newFloatingSpace () { return thisObject function finalize () { - try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - - thisObject.floatingLayer.finalize() - thisObject.profileBalls.finalize() - thisObject.strategyParts.finalize() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } - } + thisObject.floatingLayer.finalize() + thisObject.profileBalls.finalize() + thisObject.strategyParts.finalize() + thisObject.noteSets.finalize() } function initialize (callBackFunction) { From 23f8f4b99a1333c30fe3b4c2503daa46b64a3aad Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 13:56:10 +0200 Subject: [PATCH 050/221] Improvements at Frame --- FloatingSpace/FloatingLayer.js | 2 - Frame.js | 207 +++++++++++++++++---------------- 2 files changed, 105 insertions(+), 104 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 01ba5ab27..a541d5dca 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -900,8 +900,6 @@ function newFloatingLayer () { function isInside (x, y) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] isInside -> Entering function.') } - /* This function detects weather the point x,y is inside any of the floatingObjects. */ for (var i = 0; i < visibleFloatingObjects.length; i++) { diff --git a/Frame.js b/Frame.js index 405d5213b..0fba2522b 100644 --- a/Frame.js +++ b/Frame.js @@ -3,7 +3,8 @@ function newFrame () { const PANEL_CORNERS_RADIOUS = 5 const TITLE_BAR_HEIGHT = 15 // this must be grater than radius - let frame = { + let thisObject = { + type: 'Rectangle', containerName: '', // This is for debugging purposes only. parentFrame: undefined, // Here we store the parent cointainer zoom object. width: browserCanvas.width, @@ -22,19 +23,21 @@ function newFrame () { initialize: initialize } - return frame + return thisObject - function initialize () { - var position = { + function initialize (pType) { + if (pType !== undefined) { thisObject.type = pType } + + let position = { x: 0, y: 0 } - this.position = position + thisObject.position = position } function getBodyHeight () { - return frame.height - TITLE_BAR_HEIGHT + return thisObject.height - TITLE_BAR_HEIGHT } function isInViewPort () { @@ -44,14 +47,14 @@ function newFrame () { } point3 = { - x: frame.width, - y: frame.height + x: thisObject.width, + y: thisObject.height } /* Now the transformations. */ - point1 = transformThisPoint(point1, frame.container) - point3 = transformThisPoint(point3, frame.container) + point1 = transformThisPoint(point1, thisObject.container) + point3 = transformThisPoint(point3, thisObject.container) if (point1.x < viewPort.visibleArea.topRight.x && point1.y < viewPort.visibleArea.bottomRight.y && point3.x > viewPort.visibleArea.bottomLeft.x && point3.y > viewPort.visibleArea.topLeft.y) { return true @@ -63,16 +66,16 @@ function newFrame () { function fitIntoFrame (point) { /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ - if (point.x > frame.width) { - point.x = frame.width + if (point.x > thisObject.width) { + point.x = thisObject.width } if (point.x < 0) { point.x = 0 } - if (point.y > frame.height) { - point.y = frame.height + if (point.y > thisObject.height) { + point.y = thisObject.height } if (point.y < 0) { @@ -83,23 +86,23 @@ function newFrame () { } function frameThisPoint (point) { - if (this.parentFrame !== undefined) { - point = this.parentFrame.frameThisPoint(point) + if (thisObject.parentFrame !== undefined) { + point = thisObject.parentFrame.frameThisPoint(point) } - point.x = point.x + frame.position.x - point.y = point.y + frame.position.y + point.x = point.x + thisObject.position.x + point.y = point.y + thisObject.position.y return point } function unframeThisPoint (point) { - if (this.parentFrame !== undefined) { - point = this.parentFrame.unframeThisPoint(point) + if (thisObject.parentFrame !== undefined) { + point = thisObject.parentFrame.unframeThisPoint(point) } - point.x = point.x - this.position.x - point.y = point.y - this.position.y + point.x = point.x - thisObject.position.x + point.y = point.y - thisObject.position.y return point } @@ -113,34 +116,34 @@ function newFrame () { */ point1 = { - x: this.position.x, - y: this.position.y + x: thisObject.position.x, + y: thisObject.position.y } point2 = { - x: this.position.x + this.width, - y: this.position.y + x: thisObject.position.x + thisObject.width, + y: thisObject.position.y } point3 = { - x: this.position.x + this.width, - y: this.position.y + this.height + x: thisObject.position.x + thisObject.width, + y: thisObject.position.y + thisObject.height } point4 = { - x: this.position.x, - y: this.position.y + this.height + x: thisObject.position.x, + y: thisObject.position.y + thisObject.height } /* Now the transformations. */ - if (this.parentFrame !== undefined) { + if (thisObject.parentFrame !== undefined) { // If there is not a parent then there is no point to check bounderies. - point1 = this.parentFrame.frameThisPoint(point1) - point2 = this.parentFrame.frameThisPoint(point2) - point3 = this.parentFrame.frameThisPoint(point3) - point4 = this.parentFrame.frameThisPoint(point4) + point1 = thisObject.parentFrame.frameThisPoint(point1) + point2 = thisObject.parentFrame.frameThisPoint(point2) + point3 = thisObject.parentFrame.frameThisPoint(point3) + point4 = thisObject.parentFrame.frameThisPoint(point4) /* We apply the temporary displacement. */ @@ -151,24 +154,24 @@ function newFrame () { /* We add the actual displacement. */ - point1 = this.container.displacement.displaceThisPoint(point1) - point2 = this.container.displacement.displaceThisPoint(point2) - point3 = this.container.displacement.displaceThisPoint(point3) - point4 = this.container.displacement.displaceThisPoint(point4) + point1 = thisObject.container.displacement.displaceThisPoint(point1) + point2 = thisObject.container.displacement.displaceThisPoint(point2) + point3 = thisObject.container.displacement.displaceThisPoint(point3) + point4 = thisObject.container.displacement.displaceThisPoint(point4) - if (this.parentFrame.isThisPointHere(point1) === false) { + if (thisObject.parentFrame.isThisPointHere(point1) === false) { return false } - if (this.parentFrame.isThisPointHere(point2) === false) { + if (thisObject.parentFrame.isThisPointHere(point2) === false) { return false } - if (this.parentFrame.isThisPointHere(point3) === false) { + if (thisObject.parentFrame.isThisPointHere(point3) === false) { return false } - if (this.parentFrame.isThisPointHere(point4) === false) { + if (thisObject.parentFrame.isThisPointHere(point4) === false) { return false } } @@ -178,41 +181,41 @@ function newFrame () { function canYouZoomHere (tempZoom) { point1 = { - x: this.position.x, - y: this.position.y + x: thisObject.position.x, + y: thisObject.position.y } point2 = { - x: this.position.x + this.width, - y: this.position.y + x: thisObject.position.x + thisObject.width, + y: thisObject.position.y } point3 = { - x: this.position.x + this.width, - y: this.position.y + this.height + x: thisObject.position.x + thisObject.width, + y: thisObject.position.y + thisObject.height } point4 = { - x: this.position.x, - y: this.position.y + this.height + x: thisObject.position.x, + y: thisObject.position.y + thisObject.height } /* Now the transformations. */ - if (this.parentFrame !== undefined) { + if (thisObject.parentFrame !== undefined) { // If there is not a parent then there is no point to check bounderies. - point1 = this.parentFrame.frameThisPoint(point1) - point2 = this.parentFrame.frameThisPoint(point2) - point3 = this.parentFrame.frameThisPoint(point3) - point4 = this.parentFrame.frameThisPoint(point4) + point1 = thisObject.parentFrame.frameThisPoint(point1) + point2 = thisObject.parentFrame.frameThisPoint(point2) + point3 = thisObject.parentFrame.frameThisPoint(point3) + point4 = thisObject.parentFrame.frameThisPoint(point4) /* We add the actual displacement. */ - point1 = this.container.displacement.displaceThisPoint(point1) - point2 = this.container.displacement.displaceThisPoint(point2) - point3 = this.container.displacement.displaceThisPoint(point3) - point4 = this.container.displacement.displaceThisPoint(point4) + point1 = thisObject.container.displacement.displaceThisPoint(point1) + point2 = thisObject.container.displacement.displaceThisPoint(point2) + point3 = thisObject.container.displacement.displaceThisPoint(point3) + point4 = thisObject.container.displacement.displaceThisPoint(point4) /* We temp zoom. */ @@ -221,19 +224,19 @@ function newFrame () { point3 = tempZoom.zoomThisPoint(point3) point4 = tempZoom.zoomThisPoint(point4) - if (this.parentFrame.isThisPointHere(point1) === false) { + if (thisObject.parentFrame.isThisPointHere(point1) === false) { return false } - if (this.parentFrame.isThisPointHere(point2) === false) { + if (thisObject.parentFrame.isThisPointHere(point2) === false) { return false } - if (this.parentFrame.isThisPointHere(point3) === false) { + if (thisObject.parentFrame.isThisPointHere(point3) === false) { return false } - if (this.parentFrame.isThisPointHere(point4) === false) { + if (thisObject.parentFrame.isThisPointHere(point4) === false) { return false } } @@ -246,7 +249,7 @@ function newFrame () { /* We need not to modify the point received, so me make a copy of it. */ - var checkPoint = { + let checkPoint = { x: point.x, y: point.y } @@ -255,16 +258,16 @@ function newFrame () { in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */ if (dontTransform === false || dontTransform === undefined) { if (outsideViewPort === true) { - checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint) - checkPoint = this.container.frame.unframeThisPoint(checkPoint) + checkPoint = thisObject.container.displacement.undisplaceThisPoint(checkPoint) + checkPoint = thisObject.container.frame.unframeThisPoint(checkPoint) } else { - checkPoint = unTransformThisPoint(checkPoint, frame.container) + checkPoint = unTransformThisPoint(checkPoint, thisObject.container) } } /* Now we check if the resulting point is whin the current Frame. */ - if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > frame.width || checkPoint.y > frame.height) { + if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) { /* The point received is not in this frame */ return false @@ -294,7 +297,7 @@ function newFrame () { cornerRadious: 5, lineWidth: 0.1, opacity: 0.75, - container: frame.container, + container: thisObject.container, borderColor: UI_COLOR.DARK, backgroundColor: UI_COLOR.WHITE } @@ -307,7 +310,7 @@ function newFrame () { } titleBarPoint2 = { - x: frame.width, + x: thisObject.width, y: TITLE_BAR_HEIGHT } @@ -342,17 +345,17 @@ function newFrame () { browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - let label = frame.containerName + let label = thisObject.containerName let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2 labelPoint = { - x: frame.width / 2 - xOffset, + x: thisObject.width / 2 - xOffset, y: TITLE_BAR_HEIGHT - yOffset } - labelPoint = frame.frameThisPoint(labelPoint) + labelPoint = thisObject.frameThisPoint(labelPoint) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -372,26 +375,26 @@ function newFrame () { } point2 = { - x: frame.width, + x: thisObject.width, y: 0 } point3 = { - x: frame.width, - y: frame.height + x: thisObject.width, + y: thisObject.height } point4 = { x: 0, - y: frame.height + y: thisObject.height } /* Now the transformations. */ - point1 = transformThisPoint(point1, frame.container) - point2 = transformThisPoint(point2, frame.container) - point3 = transformThisPoint(point3, frame.container) - point4 = transformThisPoint(point4, frame.container) + point1 = transformThisPoint(point1, thisObject.container) + point2 = transformThisPoint(point2, thisObject.container) + point3 = transformThisPoint(point3, thisObject.container) + point4 = transformThisPoint(point4, thisObject.container) /* Lets start the drawing. */ @@ -414,41 +417,41 @@ function newFrame () { if (smallLines === true) { /* Small Lines */ - var step = frame.width / 100 + let step = thisObject.width / 100 browserCanvasContext.beginPath() - for (var i = 0; i < frame.width; i = i + step) { - for (var j = 0; j < frame.height; j = j + step) { + for (let i = 0; i < thisObject.width; i = i + step) { + for (let j = 0; j < thisObject.height; j = j + step) { let point1 = { x: 0, y: j } let point2 = { - x: frame.width, + x: thisObject.width, y: j } - point1 = transformThisPoint(point1, frame.container) - point2 = transformThisPoint(point2, frame.container) + point1 = transformThisPoint(point1, thisObject.container) + point2 = transformThisPoint(point2, thisObject.container) browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) } let point3 = { - x: frame.width, - y: frame.height + x: thisObject.width, + y: thisObject.height } let point4 = { x: 0, - y: frame.height + y: thisObject.height } - point3 = transformThisPoint(point3, frame.container) - point4 = transformThisPoint(point4, frame.container) + point3 = transformThisPoint(point3, thisObject.container) + point4 = transformThisPoint(point4, thisObject.container) browserCanvasContext.moveTo(point3.x, point3.y) browserCanvasContext.lineTo(point4.x, point4.y) @@ -461,24 +464,24 @@ function newFrame () { /* Main Lines */ - var step = frame.width / 20 + let step = thisObject.width / 20 browserCanvasContext.beginPath() - for (var i = 0; i < frame.width; i = i + step) { - for (var j = 0; j < frame.height; j = j + step) { + for (let i = 0; i < thisObject.width; i = i + step) { + for (let j = 0; j < thisObject.height; j = j + step) { let point1 = { x: 0, y: j } let point2 = { - x: frame.width, + x: thisObject.width, y: j } - point1 = transformThisPoint(point1, frame.container) - point2 = transformThisPoint(point2, frame.container) + point1 = transformThisPoint(point1, thisObject.container) + point2 = transformThisPoint(point2, thisObject.container) browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -491,11 +494,11 @@ function newFrame () { let point4 = { x: i, - y: frame.height + y: thisObject.height } - point3 = transformThisPoint(point3, frame.container) - point4 = transformThisPoint(point4, frame.container) + point3 = transformThisPoint(point3, thisObject.container) + point4 = transformThisPoint(point4, thisObject.container) browserCanvasContext.moveTo(point3.x, point3.y) browserCanvasContext.lineTo(point4.x, point4.y) From 7f432a6686954af9f35c779df4affc79413930d2 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 14:04:34 +0200 Subject: [PATCH 051/221] Possible Circular Frames --- Frame.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/Frame.js b/Frame.js index 0fba2522b..acc87a992 100644 --- a/Frame.js +++ b/Frame.js @@ -9,6 +9,7 @@ function newFrame () { parentFrame: undefined, // Here we store the parent cointainer zoom object. width: browserCanvas.width, height: browserCanvas.height, + radius: 0, position: undefined, getBodyHeight: getBodyHeight, draw: draw, @@ -265,16 +266,24 @@ function newFrame () { } } - /* Now we check if the resulting point is whin the current Frame. */ + /* Now we check if the resulting point is whin the current Frame. */ - if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) { - /* The point received is not in this frame */ + if (thisObject.type === 'Circle') { + let distance = Math.sqrt(Math.pow(thisObject.position.x - point.x, 2) + Math.pow(thisObject.position.y - point.y, 2)) - return false - } else { - /* The point is within this frame. */ + if (distance < thisObject.radius) { + return true + } else { + return false + } + } - return true + if (thisObject.type === 'Rectangle') { + if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) { + return false + } else { + return true + } } } From ac51249195009d348fd38643b1fe9a9bb0bfeacd Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 14:14:56 +0200 Subject: [PATCH 052/221] Cleaning Frame unused code --- Frame.js | 91 ++------------------------------------------------------ 1 file changed, 2 insertions(+), 89 deletions(-) diff --git a/Frame.js b/Frame.js index acc87a992..2fd4391da 100644 --- a/Frame.js +++ b/Frame.js @@ -16,11 +16,9 @@ function newFrame () { container: undefined, frameThisPoint: frameThisPoint, // This function changes the actual frame coordinate system to the screen coordinate system. unframeThisPoint: unframeThisPoint, - fitIntoFrame: fitIntoFrame, isThisPointHere: isThisPointHere, // This function return true is the point received as parameter lives within this frame. isInViewPort: isInViewPort, canYouMoveHere: canYouMoveHere, - canYouZoomHere: canYouZoomHere, initialize: initialize } @@ -42,6 +40,8 @@ function newFrame () { } function isInViewPort () { + /* This function is usefull to know if the object who has this frame is currently appearing at least in part at the viewPort */ + point1 = { x: 0, y: 0 @@ -64,28 +64,6 @@ function newFrame () { } } - function fitIntoFrame (point) { - /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ - - if (point.x > thisObject.width) { - point.x = thisObject.width - } - - if (point.x < 0) { - point.x = 0 - } - - if (point.y > thisObject.height) { - point.y = thisObject.height - } - - if (point.y < 0) { - point.y = 0 - } - - return point - } - function frameThisPoint (point) { if (thisObject.parentFrame !== undefined) { point = thisObject.parentFrame.frameThisPoint(point) @@ -180,71 +158,6 @@ function newFrame () { return true } - function canYouZoomHere (tempZoom) { - point1 = { - x: thisObject.position.x, - y: thisObject.position.y - } - - point2 = { - x: thisObject.position.x + thisObject.width, - y: thisObject.position.y - } - - point3 = { - x: thisObject.position.x + thisObject.width, - y: thisObject.position.y + thisObject.height - } - - point4 = { - x: thisObject.position.x, - y: thisObject.position.y + thisObject.height - } - - /* Now the transformations. */ - - if (thisObject.parentFrame !== undefined) { - // If there is not a parent then there is no point to check bounderies. - - point1 = thisObject.parentFrame.frameThisPoint(point1) - point2 = thisObject.parentFrame.frameThisPoint(point2) - point3 = thisObject.parentFrame.frameThisPoint(point3) - point4 = thisObject.parentFrame.frameThisPoint(point4) - - /* We add the actual displacement. */ - - point1 = thisObject.container.displacement.displaceThisPoint(point1) - point2 = thisObject.container.displacement.displaceThisPoint(point2) - point3 = thisObject.container.displacement.displaceThisPoint(point3) - point4 = thisObject.container.displacement.displaceThisPoint(point4) - - /* We temp zoom. */ - - point1 = tempZoom.zoomThisPoint(point1) - point2 = tempZoom.zoomThisPoint(point2) - point3 = tempZoom.zoomThisPoint(point3) - point4 = tempZoom.zoomThisPoint(point4) - - if (thisObject.parentFrame.isThisPointHere(point1) === false) { - return false - } - - if (thisObject.parentFrame.isThisPointHere(point2) === false) { - return false - } - - if (thisObject.parentFrame.isThisPointHere(point3) === false) { - return false - } - - if (thisObject.parentFrame.isThisPointHere(point4) === false) { - return false - } - } - - return true - } - function isThisPointHere (point, outsideViewPort, dontTransform) { // The second parameter is usefull when you want to check a point that you already know is outside the viewport. From 7115daf686bd2f52e4ebfd78493aa67e52001377 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 17:22:26 +0200 Subject: [PATCH 053/221] NUmerals --- StrategySpace/StrategyCollectionItem.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index ac8afe798..17023b061 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -96,33 +96,33 @@ function newStrategyCollectionItem () { createPart('Strategy Entry', '', strategy.entryPoint, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, 'Situation' + ' ' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.entryPoint, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) } } createPart('Strategy Exit', '', strategy.exitPoint, strategy) for (let k = 0; k < strategy.exitPoint.situations.length; k++) { let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, 'Situation' + ' ' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.exitPoint, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) } } createPart('Trade Entry', '', strategy.sellPoint, strategy) for (let k = 0; k < strategy.sellPoint.situations.length; k++) { let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, 'Situation' + ' ' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.sellPoint, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) } } @@ -137,15 +137,15 @@ function newStrategyCollectionItem () { parent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' ' + (p + 1)) + createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' #' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' ' + (k + 1)) + createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) } } } @@ -160,15 +160,15 @@ function newStrategyCollectionItem () { parent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' ' + (p + 1)) + createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' #' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' ' + (k + 1)) + createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1)) + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) } } } From 276db501b64864d7b3c2540294e1a20de55a04ce Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 18:06:21 +0200 Subject: [PATCH 054/221] getContainer added across floating space --- Container.js | 4 ++-- FloatingSpace/FloatingLayer.js | 13 +++++++++++++ FloatingSpace/FloatingObject.js | 25 ++++++++++++++++++++++++- FloatingSpace/Note.js | 25 +++++++++++++++++++++++-- FloatingSpace/ProfileBall.js | 25 +++++++++++++++++++++++-- FloatingSpace/StrategyPart.js | 25 +++++++++++++++++++++++-- Spaces/FloatingSpace.js | 10 ++++++++++ 7 files changed, 118 insertions(+), 9 deletions(-) diff --git a/Container.js b/Container.js index cacb0bec1..5d743b388 100644 --- a/Container.js +++ b/Container.js @@ -33,11 +33,11 @@ function newContainer () { } } - function initialize (pName) { + function initialize (pName, pType) { thisObject.name = pName thisObject.frame = newFrame() - thisObject.frame.initialize() + thisObject.frame.initialize(pType) thisObject.frame.containerName = pName thisObject.frame.container = thisObject diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index a541d5dca..c2a07b07d 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -30,6 +30,7 @@ function newFloatingLayer () { isInside: isInside, isInsideFloatingObject: isInsideFloatingObject, changeTargetRepulsion: changeTargetRepulsion, + getContainer: getContainer, initialize: initialize, finalize: finalize } @@ -85,6 +86,18 @@ function newFloatingLayer () { /* We dont need to initialize anything right now. */ } + function getContainer (point) { + let container + + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + container = floatingObject.getContainer(point) + if (container !== undefined) { return container } + } + + return container + } + function addFloatingObject (pFloatingObject, callBackFunction) { /* As you can see here, even though the floating objects are created outside this layer, its creator it is not supossed to keep diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 903f05d3d..357547743 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -54,11 +54,21 @@ function newFloatingObject () { linkedObject: undefined, // This is a reference to the object that this floating object is representing. linkedObjectType: '', // Since there might be floating objects for different types of objects, here we store the type of object we are linking to. - container: undefined, // This is a pointer to the object where the floating object belongs to. + getContainer: getContainer, + container: undefined, initialize: initialize } + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize('Circle') + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + thisObject.eventHandler = newEventHandler() return thisObject @@ -110,6 +120,19 @@ function newFloatingObject () { } } + function getContainer (point) { + let container + + container = thisObject.underlayingObject.getContainer(point) + if (container !== undefined) { return container } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + function physicsLoop (callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 26e76668d..3a1aa4ead 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -1,23 +1,44 @@  function newNote () { - let thisObject = { + const MODULE_NAME = 'Note' + let thisObject = { + container: undefined, physicsLoop: physicsLoop, onMouseOver: onMouseOver, onMouseClick: onMouseClick, onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, + getContainer: getContainer, initialize: initialize - } + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize('Circle') + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + return thisObject function initialize () { } + function getContainer (point) { + let container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + function physicsLoop () { } diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 2e0c52f8f..3a2c6c22e 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -1,17 +1,28 @@ function newProfileBall () { - let thisObject = { + const MODULE_NAME = 'Profile Ball' + let thisObject = { + container: undefined, physicsLoop: physicsLoop, onMouseOver: onMouseOver, onMouseClick: onMouseClick, onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, + getContainer: getContainer, initialize: initialize - } + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize('Circle') + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + let ballStringMenu = [ { visible: false, @@ -79,6 +90,16 @@ function newProfileBall () { } } + function getContainer (point) { + let container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + function physicsLoop () { // The menuItems also have a target. diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 12842d9ba..44a20db78 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -1,19 +1,30 @@ function newStrategyPart () { + const MODULE_NAME = 'Strategy Part' + let thisObject = { type: undefined, + container: undefined, physicsLoop: physicsLoop, onMouseOver: onMouseOver, onMouseClick: onMouseClick, onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, + getContainer: getContainer, initialize: initialize - } - let ballStringMenu = [] + thisObject.container = newContainer() + thisObject.container.name = MODULE_NAME + thisObject.container.initialize('Circle') + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + let ballStringMenu = [] let floatingLayer let isMouseOver = false let image @@ -263,6 +274,16 @@ function newStrategyPart () { } } + function getContainer (point) { + let container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + function physicsLoop () { // The menuItems also have a target. diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 810ca77b6..632666043 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -12,6 +12,7 @@ function newFloatingSpace () { profileBalls: undefined, strategyParts: undefined, noteSets: undefined, + getContainer: getContainer, initialize: initialize, finalize: finalize } @@ -38,5 +39,14 @@ function newFloatingSpace () { thisObject.strategyParts = newStrategyParts() thisObject.strategyParts.initialize(thisObject.floatingLayer) } + + function getContainer (point) { + let container + + container = thisObject.floatingLayer.getContainer(point) + if (container !== undefined) { return container } + + return container + } } From df353348bb0f1879270335048bb65dc9eb85ea13 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 18:23:09 +0200 Subject: [PATCH 055/221] Current Position from the Frame --- Canvas.js | 4 +-- FloatingSpace/FloatingLayer.js | 52 ++++++++++++++++----------------- FloatingSpace/FloatingObject.js | 6 ++-- FloatingSpace/Note.js | 14 ++++----- FloatingSpace/ProfileBall.js | 28 +++++++++--------- FloatingSpace/StrategyPart.js | 15 +++++----- 6 files changed, 58 insertions(+), 61 deletions(-) diff --git a/Canvas.js b/Canvas.js index 8a6f1eab3..b05bc1674 100644 --- a/Canvas.js +++ b/Canvas.js @@ -687,8 +687,8 @@ function newCanvas () { if (floatingObjectDragStarted) { let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingDragged) - floatingObject.currentPosition.x = dragVector.upX - floatingObject.currentPosition.y = dragVector.upY + floatingObject.container.frame.position.x = dragVector.upX + floatingObject.container.frame.position.y = dragVector.upY } if (containerDragStarted || viewPortBeingDragged) { diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index c2a07b07d..0d2c63ecc 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -341,8 +341,8 @@ function newFloatingLayer () { if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Change position based on speed.') } - floatingObject.currentPosition.x = floatingObject.currentPosition.x + floatingObject.currentSpeed.x - floatingObject.currentPosition.y = floatingObject.currentPosition.y + floatingObject.currentSpeed.y + floatingObject.container.frame.position.x = floatingObject.container.frame.position.x + floatingObject.currentSpeed.x + floatingObject.container.frame.position.y = floatingObject.container.frame.position.y + floatingObject.currentSpeed.y if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Apply some friction to desaccelerate.') } @@ -379,13 +379,13 @@ function newFloatingLayer () { } } - if (floatingObject.currentPosition.x < payload.position.x) { + if (floatingObject.container.frame.position.x < payload.position.x) { floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + 0.005 } else { floatingObject.currentSpeed.x = floatingObject.currentSpeed.x - 0.005 } - if (floatingObject.currentPosition.y < payload.position.y) { + if (floatingObject.container.frame.position.y < payload.position.y) { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + 0.005 } else { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y - 0.005 @@ -676,7 +676,7 @@ function newFloatingLayer () { const coulomb = 0.00001 const minForce = 0.01 - var d = Math.sqrt(Math.pow(payload.position.x - floatingObject.currentPosition.x, 2) + Math.pow(payload.position.y - floatingObject.currentPosition.y, 2)) // ... we calculate the distance ... + var d = Math.sqrt(Math.pow(payload.position.x - floatingObject.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject.container.frame.position.y, 2)) // ... we calculate the distance ... var force = coulomb * d * d / floatingObject.currentMass // In this case the mass of the floatingObject affects the gravity force that it receives, that gives priority to target position to bigger floatingObjects. @@ -685,8 +685,8 @@ function newFloatingLayer () { } var pos1 = { - x: floatingObject.currentPosition.x, - y: floatingObject.currentPosition.y + x: floatingObject.container.frame.position.x, + y: floatingObject.container.frame.position.y } var pos2 = { @@ -736,7 +736,7 @@ function newFloatingLayer () { var floatingObject2 = visibleFloatingObjects[i] // So, for each floatingObject... - var d = Math.sqrt(Math.pow(floatingObject2.currentPosition.x - floatingObject1.currentPosition.x, 2) + Math.pow(floatingObject2.currentPosition.y - floatingObject1.currentPosition.y, 2)) // ... we calculate the distance ... + var d = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2)) // ... we calculate the distance ... var force = coulomb * floatingObject2.currentMass / (d * d) // ... and with it the repulsion force. @@ -747,13 +747,13 @@ function newFloatingLayer () { } var pos1 = { - x: floatingObject1.currentPosition.x, - y: floatingObject1.currentPosition.y + x: floatingObject1.container.frame.position.x, + y: floatingObject1.container.frame.position.y } var pos2 = { - x: floatingObject2.currentPosition.x, - y: floatingObject2.currentPosition.y + x: floatingObject2.container.frame.position.x, + y: floatingObject2.container.frame.position.y } var posDiff = { // Next we need the vector resulting from the 2 positions. @@ -820,7 +820,7 @@ function newFloatingLayer () { } } - var d = Math.sqrt(Math.pow(payload.position.x - floatingObject1.currentPosition.x, 2) + Math.pow(payload.position.y - floatingObject1.currentPosition.y, 2)) // ... we calculate the distance ... + var d = Math.sqrt(Math.pow(payload.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject1.container.frame.position.y, 2)) // ... we calculate the distance ... var force = coulomb * floatingObject2.currentMass / (d * d) // ... and with it the repulsion force. @@ -831,8 +831,8 @@ function newFloatingLayer () { } var pos1 = { - x: floatingObject1.currentPosition.x, - y: floatingObject1.currentPosition.y + x: floatingObject1.container.frame.position.x, + y: floatingObject1.container.frame.position.y } var pos2 = { @@ -894,7 +894,7 @@ function newFloatingLayer () { var r1 = floatingObject1.currentRadius var r2 = floatingObject2.currentRadius - var distance = Math.sqrt(Math.pow(floatingObject2.currentPosition.x - floatingObject1.currentPosition.x, 2) + Math.pow(floatingObject2.currentPosition.y - floatingObject1.currentPosition.y, 2)) + var distance = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2)) if (distance > (r1 + r2)) { // No solutions, the circles are too far apart. @@ -917,7 +917,7 @@ function newFloatingLayer () { for (var i = 0; i < visibleFloatingObjects.length; i++) { var floatingObject = visibleFloatingObjects[i] - var distance = Math.sqrt(Math.pow(floatingObject.currentPosition.x - x, 2) + Math.pow(floatingObject.currentPosition.y - y, 2)) + var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) if (distance < floatingObject.currentRadius) { return i @@ -936,7 +936,7 @@ function newFloatingLayer () { /* This function detects weather the point x,y is inside one particular floatingObjects. */ var floatingObject = visibleFloatingObjects[floatingObjectIndex] - var distance = Math.sqrt(Math.pow(floatingObject.currentPosition.x - x, 2) + Math.pow(floatingObject.currentPosition.y - y, 2)) + var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) if (distance < floatingObject.currentRadius) { return true @@ -964,7 +964,7 @@ function newFloatingLayer () { /* This function changes speed and position of floatingObjects that are in collision */ - var collisionision_angle = Math.atan2((floatingObject2.currentPosition.y - floatingObject1.currentPosition.y), (floatingObject2.currentPosition.x - floatingObject1.currentPosition.x)) + var collisionision_angle = Math.atan2((floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y), (floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x)) var speed1 = Math.sqrt(floatingObject1.currentSpeed.x * floatingObject1.currentSpeed.x + floatingObject1.currentSpeed.y * floatingObject1.currentSpeed.y) // Magnitude of Speed Vector for floatingObject 1 var speed2 = Math.sqrt(floatingObject2.currentSpeed.x * floatingObject2.currentSpeed.x + floatingObject2.currentSpeed.y * floatingObject2.currentSpeed.y) // Magnitude of Speed Vector for floatingObject 2 @@ -992,13 +992,13 @@ function newFloatingLayer () { floatingObject2.currentSpeed.y = sinAngle * final_xspeed_2 + cosAngle * final_yspeed_2 var pos1 = { - x: floatingObject1.currentPosition.x, - y: floatingObject1.currentPosition.y + x: floatingObject1.container.frame.position.x, + y: floatingObject1.container.frame.position.y } var pos2 = { - x: floatingObject2.currentPosition.x, - y: floatingObject2.currentPosition.y + x: floatingObject2.container.frame.position.x, + y: floatingObject2.container.frame.position.y } // get the mtd @@ -1007,7 +1007,7 @@ function newFloatingLayer () { y: pos1.y - pos2.y } - var d = Math.sqrt(Math.pow(floatingObject2.currentPosition.x - floatingObject1.currentPosition.x, 2) + Math.pow(floatingObject2.currentPosition.y - floatingObject1.currentPosition.y, 2)) + var d = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2)) // minimum translation distance to push floatingObjects apart after intersecting var scalar = (((floatingObject1.currentRadius + floatingObject2.currentRadius) - d) / d) @@ -1029,8 +1029,8 @@ function newFloatingLayer () { pos2.x = pos2.x - minTD.x * (im2 / (im1 + im2)) pos2.y = pos2.y - minTD.y * (im2 / (im1 + im2)) - floatingObject1.currentPosition = pos1 - floatingObject2.currentPosition = pos2 + floatingObject1.container.frame.position = pos1 + floatingObject2.container.frame.position = pos2 } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] resolveCollision -> err.message = ' + err.message) } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 357547743..bc023a4a4 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -26,7 +26,6 @@ function newFloatingObject () { imageId: undefined, - currentPosition: 0, // Current x,y position of the floating object at the floating object's layer, where there is no displacement or zoom. This position is always changing towards the target position. currentSpeed: 0, // This is the current speed of the floating object. currentRadius: 0, // This is the current radius of the floating object, including its zoom applied. currentMass: 0, // This is the current mass of the floating object, including its zoom applied. @@ -218,12 +217,12 @@ function newFloatingObject () { } function radomizeCurrentPosition (arroundPoint) { - var position = { + let position = { x: Math.floor((Math.random() * (200) - 100)) + arroundPoint.x, y: Math.floor((Math.random() * (200) - 100)) + arroundPoint.y } - thisObject.currentPosition = position + thisObject.container.frame.position = position } function radomizeCurrentSpeed () { @@ -263,4 +262,3 @@ function newFloatingObject () { } } - diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 3a1aa4ead..24fd8fbb5 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -67,7 +67,7 @@ function newNote () { /* Target Line */ browserCanvasContext.beginPath() - browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y) + browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y) browserCanvasContext.lineTo(point.x, point.y) browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' browserCanvasContext.setLineDash([4, 2]) @@ -102,8 +102,8 @@ function newNote () { let borderPoint4 let intialDisplace = { - x: pFloatingObject.currentPosition.x - BUBBLE_WIDTH / 2, - y: pFloatingObject.currentPosition.y - BUBBLE_HEIGHT / 2 + x: pFloatingObject.container.frame.position.x - BUBBLE_WIDTH / 2, + y: pFloatingObject.container.frame.position.y - BUBBLE_HEIGHT / 2 } if (pFloatingObject.currentRadius > 5) { @@ -185,8 +185,8 @@ function newNote () { /* Image */ let imagePosition = { - x: pFloatingObject.currentPosition.x, - y: pFloatingObject.currentPosition.y + BUBBLE_HEIGHT / 2 + x: pFloatingObject.container.frame.position.x, + y: pFloatingObject.container.frame.position.y + BUBBLE_HEIGHT / 2 } if (pFloatingObject.payloadImageId !== undefined) { @@ -304,8 +304,8 @@ function newNote () { let labelRow = labelRows[i] let startingPosition = { - x: pFloatingObject.currentPosition.x, - y: pFloatingObject.currentPosition.y - labelRows.length / 2 * (fontSize * FONT_ASPECT_RATIO + 10) + x: pFloatingObject.container.frame.position.x, + y: pFloatingObject.container.frame.position.y - labelRows.length / 2 * (fontSize * FONT_ASPECT_RATIO + 10) } labelPoint = { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 3a2c6c22e..b3c387050 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -142,8 +142,8 @@ function newProfileBall () { if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) + x: pFloatingObject.container.frame.position.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) @@ -198,7 +198,7 @@ function newProfileBall () { /* Target Line */ browserCanvasContext.beginPath() - browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y) + browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y) browserCanvasContext.lineTo(point.x, point.y) browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' browserCanvasContext.setLineDash([4, 2]) @@ -225,7 +225,7 @@ function newProfileBall () { /* Contourn */ browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' browserCanvasContext.lineWidth = 1 @@ -246,7 +246,7 @@ function newProfileBall () { alphaA = 0.75 browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = pFloatingObject.fillStyle @@ -262,12 +262,12 @@ function newProfileBall () { if (image !== null && image !== undefined) { browserCanvasContext.save() browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.clip() - browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) + browserCanvasContext.drawImage(image, pFloatingObject.container.frame.position.x - pFloatingObject.currentImageSize / 2, pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x - pFloatingObject.currentImageSize / 2, pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) browserCanvasContext.clip() browserCanvasContext.closePath() browserCanvasContext.restore() @@ -281,8 +281,8 @@ function newProfileBall () { if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) + x: pFloatingObject.container.frame.position.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) @@ -305,8 +305,8 @@ function newProfileBall () { if (label !== undefined) { labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 + x: pFloatingObject.container.frame.position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -318,8 +318,8 @@ function newProfileBall () { if (label !== undefined) { labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 + x: pFloatingObject.container.frame.position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: pFloatingObject.container.frame.position.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 44a20db78..0df9d3cf4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -330,8 +330,8 @@ function newStrategyPart () { if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentRadius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentRadius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) + x: pFloatingObject.container.frame.position.x + pFloatingObject.currentRadius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.container.frame.position.y - pFloatingObject.currentRadius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) @@ -381,8 +381,8 @@ function newStrategyPart () { let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) if (isMouseOver === false) { - pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x - pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y + pFloatingObject.payload.profile.position.x = parentFloatingObject.container.frame.position.x + pFloatingObject.payload.profile.position.y = parentFloatingObject.container.frame.position.y } /* Here I continue painting the background */ @@ -396,7 +396,7 @@ function newStrategyPart () { /* Target Line */ browserCanvasContext.beginPath() - browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y) + browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y) browserCanvasContext.lineTo(point.x, point.y) browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' browserCanvasContext.setLineDash([1, 4]) @@ -420,8 +420,8 @@ function newStrategyPart () { function drawForeground (pFloatingObject) { let position = { - x: pFloatingObject.currentPosition.x, - y: pFloatingObject.currentPosition.y + x: pFloatingObject.container.frame.position.x, + y: pFloatingObject.container.frame.position.y } let radius = pFloatingObject.currentRadius @@ -538,4 +538,3 @@ function newStrategyPart () { } } } - From 7cdb22cc1eaeac4a436f4e53d8813abc9be44e26 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 18:25:12 +0200 Subject: [PATCH 056/221] Just Tyding --- FloatingSpace/FloatingObject.js | 7 +------ FloatingSpace/ProfileBall.js | 8 -------- 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index bc023a4a4..14e4594b7 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -80,12 +80,7 @@ function newFloatingObject () { case 'Profile Ball': { thisObject.underlayingObject = newProfileBall() - thisObject.underlayingObject.initialize(onInitialized) - - function onInitialized (err) { - - } - + thisObject.underlayingObject.initialize() break } case 'Note': { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index b3c387050..eaead239d 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -67,25 +67,17 @@ function newProfileBall () { function initialize () { for (let i = 0; i < ballStringMenu.length; i++) { let menuItem = ballStringMenu[i] - menuItem.iconOn = new Image() - menuItem.iconOn.onload = onImageLoad - function onImageLoad () { menuItem.iconOff = new Image() - menuItem.iconOff.onload = onImageLoad - function onImageLoad () { menuItem.canDrawIcon = true } - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff } - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn - menuItem.icon = menuItem.iconOn // The default value is ON. } } From b56f1bba59a898c9d539aa0126a9811f22726fdc Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 18:32:52 +0200 Subject: [PATCH 057/221] Event Handler from the Container --- Canvas.js | 4 ++-- FloatingSpace/FloatingObject.js | 7 ++----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/Canvas.js b/Canvas.js index b05bc1674..319b77274 100644 --- a/Canvas.js +++ b/Canvas.js @@ -438,7 +438,7 @@ function newCanvas () { if (floatingObjectBeingClicked >= 0) { let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) - floatingObject.eventHandler.raiseEvent('onMouseClick', point) + floatingObject.container.eventHandler.raiseEvent('onMouseClick', point) return } @@ -588,7 +588,7 @@ function newCanvas () { if (floatingObjectBeingClicked >= 0) { let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) - floatingObject.eventHandler.raiseEvent('onMouseOver', point) + floatingObject.container.eventHandler.raiseEvent('onMouseOver', point) return } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 14e4594b7..d135e58d6 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -11,7 +11,6 @@ function newFloatingObject () { let thisObject = { physicsLoop: physicsLoop, - eventHandler: undefined, 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. @@ -68,8 +67,6 @@ function newFloatingObject () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.eventHandler = newEventHandler() - return thisObject function initialize (pType, pSubType, floatingLayer, callBackFunction) { @@ -103,9 +100,9 @@ function newFloatingObject () { thisObject.type = pType - thisObject.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) canvas.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) - thisObject.eventHandler.listenToEvent('onMouseClick', onMouseClick) if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { From 10ca03678cf3f212935e67c20c964327f35df535 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 18:48:43 +0200 Subject: [PATCH 058/221] Removed events as direct calls --- FloatingSpace/FloatingObject.js | 10 +++++++--- FloatingSpace/Note.js | 12 ++++++------ FloatingSpace/ProfileBall.js | 12 ++++++++---- FloatingSpace/StrategyPart.js | 12 ++++++++---- 4 files changed, 29 insertions(+), 17 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index d135e58d6..56083e009 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -142,7 +142,7 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 2.0 thisObject.targetFontSize = thisObject.rawFontSize * 2.0 - thisObject.underlayingObject.onMouseOver() + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver') } function onMouseNotOver () { @@ -150,11 +150,15 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 1 thisObject.targetFontSize = thisObject.rawFontSize * 1 - thisObject.underlayingObject.onMouseNotOver() + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver') } function onMouseClick (pPoint) { - thisObject.underlayingObject.onMouseClick(pPoint, thisObject) + let event = { + point: pPoint, + parent: thisObject + } + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseClick', event) } function drawBackground () { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 24fd8fbb5..6ffd0c76d 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -5,9 +5,6 @@ function newNote () { let thisObject = { container: undefined, physicsLoop: physicsLoop, - onMouseOver: onMouseOver, - onMouseClick: onMouseClick, - onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -26,7 +23,9 @@ function newNote () { return thisObject function initialize () { - + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { @@ -51,8 +50,9 @@ function newNote () { } - function onMouseClick (pPoint, pFloatingObject) { - + function onMouseClick (event) { + pPoint = event.point + pFloatingObject = event.parent } function drawBackground (pFloatingObject) { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index eaead239d..e25b39cc9 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -5,9 +5,6 @@ function newProfileBall () { let thisObject = { container: undefined, physicsLoop: physicsLoop, - onMouseOver: onMouseOver, - onMouseClick: onMouseClick, - onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -80,6 +77,10 @@ function newProfileBall () { menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn menuItem.icon = menuItem.iconOn // The default value is ON. } + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { @@ -124,9 +125,12 @@ function newProfileBall () { } } - function onMouseClick (pPoint, pFloatingObject) { + function onMouseClick (event) { /* What we need to do here is to check which menu item was clicked, if any. */ + pPoint = event.point + pFloatingObject = event.parent + let menuItemIndex for (let i = 0; i < ballStringMenu.length; i++) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 0df9d3cf4..d990a205f 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -6,9 +6,6 @@ function newStrategyPart () { type: undefined, container: undefined, physicsLoop: physicsLoop, - onMouseOver: onMouseOver, - onMouseClick: onMouseClick, - onMouseNotOver: onMouseNotOver, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -272,6 +269,10 @@ function newStrategyPart () { menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn menuItem.icon = menuItem.iconOn // The default value is ON. } + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { @@ -320,9 +321,12 @@ function newStrategyPart () { isMouseOver = false } - function onMouseClick (pPoint, pFloatingObject) { + function onMouseClick (event) { /* What we need to do here is to check which menu item was clicked, if any. */ + pPoint = event.point + pFloatingObject = event.parent + let menuItemIndex for (let i = 0; i < ballStringMenu.length; i++) { From 7f735c1d8ef2a37437b0535258c3b0e88bf3c3ee Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 19:05:04 +0200 Subject: [PATCH 059/221] radius moved to the radius at the frame --- Canvas.js | 9 +++------ FloatingSpace/FloatingLayer.js | 22 +++++++++++----------- FloatingSpace/FloatingObject.js | 3 +-- FloatingSpace/Note.js | 18 +++++++++--------- FloatingSpace/ProfileBall.js | 16 ++++++++-------- FloatingSpace/StrategyPart.js | 10 +++++----- 6 files changed, 37 insertions(+), 41 deletions(-) diff --git a/Canvas.js b/Canvas.js index 319b77274..ab2d9ecd4 100644 --- a/Canvas.js +++ b/Canvas.js @@ -433,13 +433,10 @@ function newCanvas () { } /* We check if the mouse is over a floatingObject/ */ + container = thisObject.floatingSpace.getContainer(point) - let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - - if (floatingObjectBeingClicked >= 0) { - let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) - floatingObject.container.eventHandler.raiseEvent('onMouseClick', point) - + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) return } diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 0d2c63ecc..55bcd47eb 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -413,11 +413,11 @@ function newFloatingLayer () { // The radius also have a target. - if (Math.abs(floatingObject.currentRadius - floatingObject.targetRadius) >= 1) { - if (floatingObject.currentRadius < floatingObject.targetRadius) { - floatingObject.currentRadius = floatingObject.currentRadius + 0.5 + if (Math.abs(floatingObject.container.frame.radius - floatingObject.targetRadius) >= 1) { + if (floatingObject.container.frame.radius < floatingObject.targetRadius) { + floatingObject.container.frame.radius = floatingObject.container.frame.radius + 0.5 } else { - floatingObject.currentRadius = floatingObject.currentRadius - 0.5 + floatingObject.container.frame.radius = floatingObject.container.frame.radius - 0.5 } } @@ -625,10 +625,10 @@ function newFloatingLayer () { for (let i = 0; i < dyingFloatingObjects.length; i++) { let floatingObject = dyingFloatingObjects[i] - if (Math.abs(floatingObject.currentRadius - floatingObject.targetRadius) >= 5) { + if (Math.abs(floatingObject.container.frame.radius - floatingObject.targetRadius) >= 5) { let speed = Math.random() - floatingObject.currentRadius = floatingObject.currentRadius - speed * 3 + floatingObject.container.frame.radius = floatingObject.container.frame.radius - speed * 3 } else { /* Here is when the floatingObjects are definetelly killed. */ @@ -891,8 +891,8 @@ function newFloatingLayer () { /* This function detects weather 2 floatingObjects collide with each other. */ - var r1 = floatingObject1.currentRadius - var r2 = floatingObject2.currentRadius + var r1 = floatingObject1.container.frame.radius + var r2 = floatingObject2.container.frame.radius var distance = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2)) @@ -919,7 +919,7 @@ function newFloatingLayer () { var floatingObject = visibleFloatingObjects[i] var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) - if (distance < floatingObject.currentRadius) { + if (distance < floatingObject.container.frame.radius) { return i } } @@ -938,7 +938,7 @@ function newFloatingLayer () { var floatingObject = visibleFloatingObjects[floatingObjectIndex] var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) - if (distance < floatingObject.currentRadius) { + if (distance < floatingObject.container.frame.radius) { return true } @@ -1010,7 +1010,7 @@ function newFloatingLayer () { var d = Math.sqrt(Math.pow(floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y, 2)) // minimum translation distance to push floatingObjects apart after intersecting - var scalar = (((floatingObject1.currentRadius + floatingObject2.currentRadius) - d) / d) + var scalar = (((floatingObject1.container.frame.radius + floatingObject2.container.frame.radius) - d) / d) var minTD = { x: posDiff.x * scalar, diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 56083e009..85c1e8488 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -26,7 +26,6 @@ function newFloatingObject () { imageId: undefined, currentSpeed: 0, // This is the current speed of the floating object. - currentRadius: 0, // This is the current radius of the floating object, including its zoom applied. currentMass: 0, // This is the current mass of the floating object, including its zoom applied. friction: 0, // This is a factor that will ultimatelly desacelerate the floating object. @@ -187,7 +186,7 @@ function newFloatingObject () { thisObject.rawRadius = radius thisObject.targetRadius = radius - thisObject.currentRadius = radius / 3 + thisObject.container.frame.radius = radius / 3 } function initializeImageSize (suggestedValue) { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 6ffd0c76d..3d8e596a0 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -63,7 +63,7 @@ function newNote () { point = viewPort.fitIntoVisibleArea(point) - if (pFloatingObject.currentRadius > 1) { + if (pFloatingObject.container.frame.radius > 1) { /* Target Line */ browserCanvasContext.beginPath() @@ -76,7 +76,7 @@ function newNote () { browserCanvasContext.setLineDash([0, 0]) } - if (pFloatingObject.currentRadius > 0.5) { + if (pFloatingObject.container.frame.radius > 0.5) { /* Target Spot */ var radius = 1 @@ -93,8 +93,8 @@ function newNote () { const BUBBLE_CORNERS_RADIOUS = 5 const TITLE_BAR_HEIGHT = 14 - const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS + pFloatingObject.currentRadius * 4 - const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS + pFloatingObject.currentRadius * 2 + const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS + pFloatingObject.container.frame.radius * 4 + const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS + pFloatingObject.container.frame.radius * 2 let borderPoint1 let borderPoint2 @@ -106,7 +106,7 @@ function newNote () { y: pFloatingObject.container.frame.position.y - BUBBLE_HEIGHT / 2 } - if (pFloatingObject.currentRadius > 5) { + if (pFloatingObject.container.frame.radius > 5) { /* Rounded Background */ borderPoint1 = { @@ -181,7 +181,7 @@ function newNote () { browserCanvasContext.stroke() } - if (pFloatingObject.currentRadius > 0.5) { + if (pFloatingObject.container.frame.radius > 0.5) { /* Image */ let imagePosition = { @@ -208,10 +208,10 @@ function newNote () { /* Labels */ - if (pFloatingObject.currentRadius > 6) { + if (pFloatingObject.container.frame.radius > 6) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle - const SIZE_PERCENTAGE = Math.trunc(pFloatingObject.currentRadius / pFloatingObject.targetRadius * 100) / 100 + const SIZE_PERCENTAGE = Math.trunc(pFloatingObject.container.frame.radius / pFloatingObject.targetRadius * 100) / 100 let ALPHA if (pFloatingObject.targetRadius > 0) { @@ -219,7 +219,7 @@ function newNote () { } else { // Object is dying... - ALPHA = Math.trunc((0.5 - (100 - pFloatingObject.currentRadius / 100)) * 100) / 100 + ALPHA = Math.trunc((0.5 - (100 - pFloatingObject.container.frame.radius / 100)) * 100) / 100 if (ALPHA < 0) { ALPHA = 0 } } diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index e25b39cc9..07bf74b20 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -190,7 +190,7 @@ function newProfileBall () { point = viewPort.fitIntoVisibleArea(point) - if (pFloatingObject.currentRadius > 1) { + if (pFloatingObject.container.frame.radius > 1) { /* Target Line */ browserCanvasContext.beginPath() @@ -203,7 +203,7 @@ function newProfileBall () { browserCanvasContext.setLineDash([0, 0]) } - if (pFloatingObject.currentRadius > 0.5) { + if (pFloatingObject.container.frame.radius > 0.5) { /* Target Spot */ var radius = 1 @@ -217,23 +217,23 @@ function newProfileBall () { } function drawForeground (pFloatingObject) { - if (pFloatingObject.currentRadius > 5) { + if (pFloatingObject.container.frame.radius > 5) { /* Contourn */ browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.container.frame.radius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' browserCanvasContext.lineWidth = 1 browserCanvasContext.stroke() } - if (pFloatingObject.currentRadius > 0.5) { + if (pFloatingObject.container.frame.radius > 0.5) { /* Main FloatingObject */ var alphaA - if (pFloatingObject.currentRadius < 3) { + if (pFloatingObject.container.frame.radius < 3) { alphaA = 1 } else { alphaA = 0.75 @@ -242,7 +242,7 @@ function newProfileBall () { alphaA = 0.75 browserCanvasContext.beginPath() - browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.container.frame.radius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = pFloatingObject.fillStyle @@ -287,7 +287,7 @@ function newProfileBall () { /* Label Text */ - if (pFloatingObject.currentRadius > 6) { + if (pFloatingObject.container.frame.radius > 6) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle let labelPoint diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index d990a205f..18604c166 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -334,8 +334,8 @@ function newStrategyPart () { if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { let position = { - x: pFloatingObject.container.frame.position.x + pFloatingObject.currentRadius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.container.frame.position.y - pFloatingObject.currentRadius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) + x: pFloatingObject.container.frame.position.x + pFloatingObject.container.frame.radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.container.frame.position.y - pFloatingObject.container.frame.radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) @@ -396,7 +396,7 @@ function newStrategyPart () { y: pFloatingObject.payload.profile.position.y } - if (pFloatingObject.currentRadius > 1) { + if (pFloatingObject.container.frame.radius > 1) { /* Target Line */ browserCanvasContext.beginPath() @@ -409,7 +409,7 @@ function newStrategyPart () { browserCanvasContext.setLineDash([0, 0]) } - if (pFloatingObject.currentRadius > 0.5) { + if (pFloatingObject.container.frame.radius > 0.5) { /* Target Spot */ var radius = 1 @@ -428,7 +428,7 @@ function newStrategyPart () { y: pFloatingObject.container.frame.position.y } - let radius = pFloatingObject.currentRadius + let radius = pFloatingObject.container.frame.radius if (radius > 5) { /* Contourn */ From 0e24dfbe8b65d30f1233bb6c48e59a4028c31b9e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 19:46:17 +0200 Subject: [PATCH 060/221] Preparing to draw from the Floating Space --- Canvas.js | 3 ++- FloatingSpace/FloatingLayer.js | 4 +++ Spaces/FloatingSpace.js | 33 +++++++++++++++++++++++++ StrategySpace/StrategyCollectionItem.js | 27 +++++--------------- 4 files changed, 45 insertions(+), 22 deletions(-) diff --git a/Canvas.js b/Canvas.js index ab2d9ecd4..e72b0e1f8 100644 --- a/Canvas.js +++ b/Canvas.js @@ -175,7 +175,8 @@ function newCanvas () { 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('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded) + animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded) animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) animation.start(onStart) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 55bcd47eb..e0f55859f 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -302,6 +302,10 @@ function newFloatingLayer () { } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] getFloatingObject -> err.message = ' + err.message) } } + } + + function draw () { + } /******************************************/ diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 632666043..e38c0b7b8 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -12,11 +12,16 @@ function newFloatingSpace () { profileBalls: undefined, strategyParts: undefined, noteSets: undefined, + makeVisible: makeVisible, + makeInvisible: makeInvisible, + draw: draw, getContainer: getContainer, initialize: initialize, finalize: finalize } + let visible = false + return thisObject function finalize () { @@ -40,6 +45,18 @@ function newFloatingSpace () { thisObject.strategyParts.initialize(thisObject.floatingLayer) } + function makeVisible () { + canvas.chartSpace.visible = false + canvas.panelsSpace.visible = false + visible = true + } + + function makeInvisible () { + canvas.chartSpace.visible = true + canvas.panelsSpace.visible = true + visible = false + } + function getContainer (point) { let container @@ -48,5 +65,21 @@ function newFloatingSpace () { return container } + + function draw () { + if (visible === true) { + drawBackground() + } + } + + function drawBackground () { + browserCanvasContext.beginPath() + + browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' + + browserCanvasContext.closePath() + browserCanvasContext.fill() + } } diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 17023b061..325433b9f 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -17,7 +17,7 @@ function newStrategyCollectionItem () { thisObject.container.isClickeable = true thisObject.container.isDraggeable = false - let visible = false + let status = 'off' return thisObject @@ -39,16 +39,14 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { - if (visible === false) { - canvas.chartSpace.visible = false - canvas.panelsSpace.visible = false + if (status === 'off') { + canvas.floatingSpace.makeVisible() generateStrategyParts() - visible = true + status = 'on' } else { - canvas.chartSpace.visible = true - canvas.panelsSpace.visible = true + canvas.floatingSpace.makeInvisible() destroyStrategyParts() - visible = false + status = 'off' } } @@ -260,19 +258,6 @@ function newStrategyCollectionItem () { text() arrow() icon() - floatingBackground() - } - - function floatingBackground () { - if (visible === false) { return } - - browserCanvasContext.beginPath() - - browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' - - browserCanvasContext.closePath() - browserCanvasContext.fill() } function text () { From 65f9772553b0987b46ac2445bf7535801bac73d7 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 21:55:52 +0200 Subject: [PATCH 061/221] phisics refactored --- Canvas.js | 2 +- FloatingSpace/FloatingLayer.js | 368 ++++++++++++++++---------------- FloatingSpace/FloatingObject.js | 8 +- Spaces/FloatingSpace.js | 7 + 4 files changed, 196 insertions(+), 189 deletions(-) diff --git a/Canvas.js b/Canvas.js index e72b0e1f8..8624f0b4b 100644 --- a/Canvas.js +++ b/Canvas.js @@ -176,7 +176,7 @@ function newCanvas () { animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded) animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded) + animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) animation.start(onStart) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index e0f55859f..075e6a536 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -1,6 +1,4 @@ -  -function newFloatingLayer () { - /* +/* This module represent one layer of many possible layers that could be at the Floating Space. Objects in the same layer are subject to the same physics, and by being at the same level, they interact with each other. For example, they can bounce when one hit the other. This module posesses its own physics engine. There are different types of floating objects, but this layer takes care of each of them. @@ -15,6 +13,7 @@ function newFloatingLayer () { 3. Strategy Parts: These are small balls that represent parts of an strategy. */ +function newFloatingLayer () { const MODULE_NAME = 'Floating Layer' const INFO_LOG = false let INTENSIVE_LOG = false @@ -26,10 +25,11 @@ function newFloatingLayer () { addFloatingObject: addFloatingObject, killFloatingObject: killFloatingObject, getFloatingObject: getFloatingObject, - physicsLoop: physicsLoop, + physics: physics, isInside: isInside, isInsideFloatingObject: isInsideFloatingObject, changeTargetRepulsion: changeTargetRepulsion, + draw: draw, getContainer: getContainer, initialize: initialize, finalize: finalize @@ -305,7 +305,175 @@ function newFloatingLayer () { } function draw () { + drawVisibleObjects() + function drawVisibleObjects () { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> drawVisibleObjects -> Entering function.') } + + /* We draw all the visibleFloatingObjects. */ + + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + floatingObject.drawBackground() + } + + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1] + floatingObject.drawForeground() + } + + makeVisible() + } catch (err) { + if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physics -> drawVisibleObjects -> err.message = ' + err.message) } + } + } + + function makeVisible () { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> makeVisible -> Entering function.') } + + /* Now we check if any of the created FloatingObjects where enabled to run under the Physics Engine. */ + + for (let i = 0; i < invisibleFloatingObjects.length; i++) { + let floatingObject = invisibleFloatingObjects[i] + + let payload = { + position: undefined, + visible: false + } + + switch (floatingObject.type) { + + case 'Profile Ball': { + payload.position = floatingObject.payload.profile.position + payload.visible = floatingObject.payload.profile.visible + break + } + case 'Note': { + if (floatingObject.payload.notes[floatingObject.payloadNoteIndex] !== undefined) { + payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position + payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible + } + break + } + case 'Strategy Part': { + payload.position = floatingObject.payload.profile.position + payload.visible = floatingObject.payload.profile.visible + break + } + default: { + break + } + } + + if (payload.visible === true) { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> payload.visible = ' + payload.visible) } + + /* The first time that the floatingObject becomes visible, we need to do this. */ + + floatingObject.radomizeCurrentPosition(payload.position) + floatingObject.radomizeCurrentSpeed() + + visibleFloatingObjects.push(floatingObject) + + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject added to visibleFloatingObjects') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } + + invisibleFloatingObjects.splice(i, 1) // Delete item from array. + + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject removed from invisibleFloatingObjects') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } + + return // Only one at the time. + } + } + + makeInvisible() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeVisible -> err.message = ' + err.message) } + } + } + + function makeInvisible () { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> makeInvisible -> Entering function.') } + + /* Finally we check if any of the currently visible floatingObjects has become invisible and must be removed from the Physics Engine. */ + + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + + let payload = { + position: undefined, + visible: true + } + + switch (floatingObject.type) { + + case 'Profile Ball': { + payload.visible = floatingObject.payload.profile.visible + break + } + case 'Note': { + payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible + break + } + case 'Strategy Part': { + payload.visible = floatingObject.payload.profile.visible + break + } + default: { + break + } + } + + if (payload.visible === false) { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> payload.visible = ' + payload.visible) } + + invisibleFloatingObjects.push(floatingObject) + + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject added to invisibleFloatingObjects') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } + + visibleFloatingObjects.splice(i, 1) // Delete item from array. + + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject removed from visibleFloatingObjects') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } + + return // Only one at the time. + } + } + + drawDyingObjects() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeInvisible -> err.message = ' + err.message) } + } + } + + function drawDyingObjects () { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> drawDyingObjects -> Entering function.') } + + /* We also draw all the dyingFloatingObjects */ + + for (let i = 0; i < dyingFloatingObjects.length; i++) { + let floatingObject = dyingFloatingObjects[i] + floatingObject.drawBackground() + } + + for (let i = 0; i < dyingFloatingObjects.length; i++) { + let floatingObject = dyingFloatingObjects[dyingFloatingObjects.length - i - 1] + floatingObject.drawForeground() + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> drawDyingObjects -> err.message = ' + err.message) } + } + } } /******************************************/ @@ -314,7 +482,7 @@ function newFloatingLayer () { /* */ /******************************************/ - function physicsLoop () { + function physics () { /* The Physics engine is hooked at the animation loop, so it executes very very often. According to this Physics engine, each floating object has a position and a speed. In fact, each floating object has two positions at the same time: @@ -330,7 +498,7 @@ function newFloatingLayer () { */ try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Entering function.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Entering function.') } applyPhysics() @@ -338,22 +506,22 @@ function newFloatingLayer () { /* This function makes all the calculations to apply phisycs on all visible floatingObjects in this layer. */ try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> applyPhysics -> Entering function.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> applyPhysics -> Entering function.') } for (let i = 0; i < visibleFloatingObjects.length; i++) { let floatingObject = visibleFloatingObjects[i] - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Change position based on speed.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Change position based on speed.') } floatingObject.container.frame.position.x = floatingObject.container.frame.position.x + floatingObject.currentSpeed.x floatingObject.container.frame.position.y = floatingObject.container.frame.position.y + floatingObject.currentSpeed.y - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Apply some friction to desaccelerate.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Apply some friction to desaccelerate.') } floatingObject.currentSpeed.x = floatingObject.currentSpeed.x * floatingObject.friction // Desaceleration factor. floatingObject.currentSpeed.y = floatingObject.currentSpeed.y * floatingObject.friction // Desaceleration factor. - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Gives a minimun speed towards their taget.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Gives a minimun speed towards their taget.') } let payload = { position: undefined, @@ -395,7 +563,7 @@ function newFloatingLayer () { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y - 0.005 } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> Set a maximun speed.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Set a maximun speed.') } const MAX_SPEED = 50 @@ -447,7 +615,7 @@ function newFloatingLayer () { // We let the Floating Object animate the physics loops by itself. - floatingObject.physicsLoop() + floatingObject.physics() /* Collision Control */ @@ -466,163 +634,15 @@ function newFloatingLayer () { gravityForce(floatingObject, payload) } - drawVisibleObjects() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> applyPhysics -> err.message = ' + err.message) } - } - } - - function drawVisibleObjects () { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> drawVisibleObjects -> Entering function.') } - - /* We draw all the visibleFloatingObjects. */ - - for (let i = 0; i < visibleFloatingObjects.length; i++) { - let floatingObject = visibleFloatingObjects[i] - floatingObject.drawBackground() - } - - for (let i = 0; i < visibleFloatingObjects.length; i++) { - let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1] - floatingObject.drawForeground() - } - - makeVisible() - } catch (err) { - if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physicsLoop -> drawVisibleObjects -> err.message = ' + err.message) } - } - } - - function makeVisible () { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> makeVisible -> Entering function.') } - - /* Now we check if any of the created FloatingObjects where enabled to run under the Physics Engine. */ - - for (let i = 0; i < invisibleFloatingObjects.length; i++) { - let floatingObject = invisibleFloatingObjects[i] - - let payload = { - position: undefined, - visible: false - } - - switch (floatingObject.type) { - - case 'Profile Ball': { - payload.position = floatingObject.payload.profile.position - payload.visible = floatingObject.payload.profile.visible - break - } - case 'Note': { - if (floatingObject.payload.notes[floatingObject.payloadNoteIndex] !== undefined) { - payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position - payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible - } - break - } - case 'Strategy Part': { - payload.position = floatingObject.payload.profile.position - payload.visible = floatingObject.payload.profile.visible - break - } - default: { - break - } - } - - if (payload.visible === true) { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> payload.visible = ' + payload.visible) } - - /* The first time that the floatingObject becomes visible, we need to do this. */ - - floatingObject.radomizeCurrentPosition(payload.position) - floatingObject.radomizeCurrentSpeed() - - visibleFloatingObjects.push(floatingObject) - - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject added to visibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - - invisibleFloatingObjects.splice(i, 1) // Delete item from array. - - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject removed from invisibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - - return // Only one at the time. - } - } - - makeInvisible() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> makeVisible -> err.message = ' + err.message) } - } - } - - function makeInvisible () { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> makeInvisible -> Entering function.') } - - /* Finally we check if any of the currently visible floatingObjects has become invisible and must be removed from the Physics Engine. */ - - for (let i = 0; i < visibleFloatingObjects.length; i++) { - let floatingObject = visibleFloatingObjects[i] - - let payload = { - position: undefined, - visible: true - } - - switch (floatingObject.type) { - - case 'Profile Ball': { - payload.visible = floatingObject.payload.profile.visible - break - } - case 'Note': { - payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible - break - } - case 'Strategy Part': { - payload.visible = floatingObject.payload.profile.visible - break - } - default: { - break - } - } - - if (payload.visible === false) { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> payload.visible = ' + payload.visible) } - - invisibleFloatingObjects.push(floatingObject) - - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject added to invisibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - - visibleFloatingObjects.splice(i, 1) // Delete item from array. - - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> floatingObject removed from visibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - - return // Only one at the time. - } - } - animateDyingObjects() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> makeInvisible -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> applyPhysics -> err.message = ' + err.message) } } } function animateDyingObjects () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> animateDyingObjects -> Entering function.') } + if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> animateDyingObjects -> Entering function.') } /* We animate some parts of the dying objects */ @@ -643,31 +663,11 @@ function newFloatingLayer () { drawDyingObjects() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> animateDyingObjects -> err.message = ' + err.message) } - } - } - - function drawDyingObjects () { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physicsLoop -> drawDyingObjects -> Entering function.') } - - /* We also draw all the dyingFloatingObjects */ - - for (let i = 0; i < dyingFloatingObjects.length; i++) { - let floatingObject = dyingFloatingObjects[i] - floatingObject.drawBackground() - } - - for (let i = 0; i < dyingFloatingObjects.length; i++) { - let floatingObject = dyingFloatingObjects[dyingFloatingObjects.length - i - 1] - floatingObject.drawForeground() - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> drawDyingObjects -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err.message = ' + err.message) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err.message = ' + err.message) } } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 85c1e8488..953ddae6f 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -10,7 +10,7 @@ function newFloatingObject () { let thisObject = { - physicsLoop: physicsLoop, + physics: physics, 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. @@ -123,15 +123,15 @@ function newFloatingObject () { } } - function physicsLoop (callBackFunction) { + function physics (callBackFunction) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - thisObject.underlayingObject.physicsLoop() + thisObject.underlayingObject.physics() if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err.message = ' + err.message) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index e38c0b7b8..7be029bf8 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -15,6 +15,7 @@ function newFloatingSpace () { makeVisible: makeVisible, makeInvisible: makeInvisible, draw: draw, + physics: physics, getContainer: getContainer, initialize: initialize, finalize: finalize @@ -66,10 +67,16 @@ function newFloatingSpace () { return container } + function physics () { + thisObject.floatingLayer.physics() + } + function draw () { if (visible === true) { drawBackground() } + + thisObject.floatingLayer.draw() } function drawBackground () { From 26308b3704a6c5cb83e9e2b7532298d564fc623f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 23:13:59 +0200 Subject: [PATCH 062/221] Dragging working with containers --- Canvas.js | 51 ++++++++++++++++++--------------- Container.js | 1 + FloatingSpace/FloatingLayer.js | 2 -- FloatingSpace/FloatingObject.js | 6 ++-- FloatingSpace/Note.js | 9 +++--- FloatingSpace/ProfileBall.js | 9 +++--- FloatingSpace/StrategyPart.js | 17 ++++------- 7 files changed, 45 insertions(+), 50 deletions(-) diff --git a/Canvas.js b/Canvas.js index 8624f0b4b..390375463 100644 --- a/Canvas.js +++ b/Canvas.js @@ -357,16 +357,21 @@ function newCanvas () { return } - /* We check if the mouse is over a floatingObject/ */ + container = thisObject.floatingSpace.getContainer(point) - floatingObjectBeingDragged = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - - if (floatingObjectBeingDragged >= 0) { + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true floatingObjectDragStarted = true return } - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + if (container !== undefined && container.isClickeable === true) { + /* We dont want to mess up with the click */ + return + } + + /* we check if it is over any of the existing containers at the Chart Space. */ container = thisObject.chartSpace.getContainer(point) @@ -497,12 +502,22 @@ function newCanvas () { if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { if (floatingObjectDragStarted === true) { - if (thisObject.floatingSpace.floatingLayer.isInsideFloatingObject(floatingObjectBeingDragged, point.x, point.y) === false) { - /* This means that the user stop moving the mouse and the floatingObject floatingObject out of the pointer. - In this case we cancell the drag operation . */ - + let targetContainer = thisObject.floatingSpace.getContainer(point) + if (targetContainer !== undefined) { + if (targetContainer.id !== containerBeingDragged.id) { + containerBeingDragged = undefined + containerDragStarted = false + floatingObjectDragStarted = false + browserCanvas.style.cursor = 'auto' + ignoreNextClick = true + return + } + } else { + containerDragStarted = false + containerBeingDragged = undefined floatingObjectDragStarted = false browserCanvas.style.cursor = 'auto' + ignoreNextClick = true return } } @@ -582,12 +597,10 @@ function newCanvas () { /* We check if the mouse is over a floatingObject/ */ if (thisObject.floatingSpace !== undefined) { - let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - - if (floatingObjectBeingClicked >= 0) { - let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked) - floatingObject.container.eventHandler.raiseEvent('onMouseOver', point) + container = thisObject.floatingSpace.getContainer(point) + if (container !== undefined && container.detectMouseOver === true) { + container.eventHandler.raiseEvent('onMouseOver', point) return } } @@ -680,15 +693,6 @@ function newCanvas () { browserCanvas.style.cursor = 'grabbing' thisObject.eventHandler.raiseEvent('Dragging', undefined) - let targetFloatingObject = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y) - - if (floatingObjectDragStarted) { - let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingDragged) - - floatingObject.container.frame.position.x = dragVector.upX - floatingObject.container.frame.position.y = dragVector.upY - } - if (containerDragStarted || viewPortBeingDragged) { /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */ @@ -734,3 +738,4 @@ function newCanvas () { } } } + diff --git a/Container.js b/Container.js index 5d743b388..f2823a8ad 100644 --- a/Container.js +++ b/Container.js @@ -1,6 +1,7 @@ function newContainer () { let thisObject = { + id: Math.trunc(Math.random() * 10000000), frame: undefined, displacement: undefined, eventHandler: undefined, diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 075e6a536..8c344a70a 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -660,8 +660,6 @@ function newFloatingLayer () { break // only one at the time. } } - - drawDyingObjects() } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err.message = ' + err.message) } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 953ddae6f..6b61f65c7 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -58,10 +58,10 @@ function newFloatingObject () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') + thisObject.container.initialize(MODULE_NAME, 'Circle') thisObject.container.isClickeable = true - thisObject.container.isDraggeable = false + thisObject.container.isDraggeable = true + thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 3d8e596a0..46288c127 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -4,7 +4,7 @@ function newNote () { let thisObject = { container: undefined, - physicsLoop: physicsLoop, + physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -12,9 +12,8 @@ function newNote () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') - thisObject.container.isClickeable = true + thisObject.container.initialize(MODULE_NAME, 'Circle') + thisObject.container.isClickeable = false thisObject.container.isDraggeable = false thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 @@ -38,7 +37,7 @@ function newNote () { } } - function physicsLoop () { + function physics () { } diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 07bf74b20..32a2c9b73 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -4,7 +4,7 @@ function newProfileBall () { let thisObject = { container: undefined, - physicsLoop: physicsLoop, + physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -12,9 +12,8 @@ function newProfileBall () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') - thisObject.container.isClickeable = true + thisObject.container.initialize(MODULE_NAME, 'Circle') + thisObject.container.isClickeable = false thisObject.container.isDraggeable = false thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 @@ -93,7 +92,7 @@ function newProfileBall () { } } - function physicsLoop () { + function physics () { // The menuItems also have a target. for (let i = 0; i < ballStringMenu.length; i++) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 18604c166..34bceccdd 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -5,7 +5,7 @@ function newStrategyPart () { let thisObject = { type: undefined, container: undefined, - physicsLoop: physicsLoop, + physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, @@ -13,9 +13,8 @@ function newStrategyPart () { } thisObject.container = newContainer() - thisObject.container.name = MODULE_NAME - thisObject.container.initialize('Circle') - thisObject.container.isClickeable = true + thisObject.container.initialize(MODULE_NAME, 'Circle') + thisObject.container.isClickeable = false thisObject.container.isDraggeable = false thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 @@ -276,16 +275,10 @@ function newStrategyPart () { } function getContainer (point) { - let container - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return thisObject.container - } else { - return undefined - } + return undefined } - function physicsLoop () { + function physics () { // The menuItems also have a target. for (let i = 0; i < ballStringMenu.length; i++) { From 3757f8bbacace7f9a16b37a27e3c05603b053d46 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 23:32:43 +0200 Subject: [PATCH 063/221] Wheel to change repulsion working --- Canvas.js | 11 +++++------ Spaces/FloatingSpace.js | 21 ++++++++++++++++++++- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/Canvas.js b/Canvas.js index 390375463..1d73c1032 100644 --- a/Canvas.js +++ b/Canvas.js @@ -636,7 +636,7 @@ function newCanvas () { } event.mousePosition = point - + let container let panelContainer = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) if (panelContainer !== undefined && panelContainer.isWheelable === true) { @@ -644,12 +644,12 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } - /* We try second with floating objects. */ + /* We try second with floating objects. */ - let floatingObjectIndex = canvas.floatingSpace.floatingLayer.isInside(point.x, point.y) + container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) - if (floatingObjectIndex > 0) { - canvas.floatingSpace.floatingLayer.changeTargetRepulsion(event.wheelDelta) + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -738,4 +738,3 @@ function newCanvas () { } } } - diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 7be029bf8..6070b086d 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -12,6 +12,7 @@ function newFloatingSpace () { profileBalls: undefined, strategyParts: undefined, noteSets: undefined, + container: undefined, makeVisible: makeVisible, makeInvisible: makeInvisible, draw: draw, @@ -21,6 +22,15 @@ function newFloatingSpace () { finalize: finalize } + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = true + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + let visible = false return thisObject @@ -44,6 +54,12 @@ function newFloatingSpace () { thisObject.strategyParts = newStrategyParts() thisObject.strategyParts.initialize(thisObject.floatingLayer) + + thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + } + + function onMouseWheel (event) { + thisObject.floatingLayer.changeTargetRepulsion(event.wheelDelta) } function makeVisible () { @@ -64,6 +80,10 @@ function newFloatingSpace () { container = thisObject.floatingLayer.getContainer(point) if (container !== undefined) { return container } + if (visible === true) { + return thisObject.container + } + return container } @@ -89,4 +109,3 @@ function newFloatingSpace () { browserCanvasContext.fill() } } - From a72115b1d46ce122ea735ba8eff514cdd9af59c1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 4 May 2019 23:39:09 +0200 Subject: [PATCH 064/221] Cleaning non used code --- Canvas.js | 18 ++++++++-------- FloatingSpace/FloatingLayer.js | 39 ---------------------------------- 2 files changed, 9 insertions(+), 48 deletions(-) diff --git a/Canvas.js b/Canvas.js index 1d73c1032..d74f04d2d 100644 --- a/Canvas.js +++ b/Canvas.js @@ -637,10 +637,10 @@ function newCanvas () { event.mousePosition = point let container - let panelContainer = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) + container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) - if (panelContainer !== undefined && panelContainer.isWheelable === true) { - panelContainer.eventHandler.raiseEvent('Mouse Wheel', event) + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -655,19 +655,19 @@ function newCanvas () { /* We try the Bottom Space. */ - let bottomContainer = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) + container = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) - if (bottomContainer !== undefined && bottomContainer.isWheelable === true) { - bottomContainer.eventHandler.raiseEvent('Mouse Wheel', event) + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } /* Finally we try the Chart Space. */ - let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) + container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) - if (chartContainer !== undefined && chartContainer.isWheelable === true) { - chartContainer.eventHandler.raiseEvent('Mouse Wheel', event) + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('Mouse Wheel', event) return false // This instructs the browser not to take the event and scroll the page. } else { /* If all the above fails, we fallback into applying zoom to the viewPort */ diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 8c344a70a..dd3188f99 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -26,8 +26,6 @@ function newFloatingLayer () { killFloatingObject: killFloatingObject, getFloatingObject: getFloatingObject, physics: physics, - isInside: isInside, - isInsideFloatingObject: isInsideFloatingObject, changeTargetRepulsion: changeTargetRepulsion, draw: draw, getContainer: getContainer, @@ -913,43 +911,6 @@ function newFloatingLayer () { } } - function isInside (x, y) { - try { - /* This function detects weather the point x,y is inside any of the floatingObjects. */ - - for (var i = 0; i < visibleFloatingObjects.length; i++) { - var floatingObject = visibleFloatingObjects[i] - var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) - - if (distance < floatingObject.container.frame.radius) { - return i - } - } - return -1 - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] isInside -> err.message = ' + err.message) } - } - } - - function isInsideFloatingObject (floatingObjectIndex, x, y) { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] isInsideFloatingObject -> Entering function.') } - - /* This function detects weather the point x,y is inside one particular floatingObjects. */ - - var floatingObject = visibleFloatingObjects[floatingObjectIndex] - var distance = Math.sqrt(Math.pow(floatingObject.container.frame.position.x - x, 2) + Math.pow(floatingObject.container.frame.position.y - y, 2)) - - if (distance < floatingObject.container.frame.radius) { - return true - } - - return false - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] isInsideFloatingObject -> err.message = ' + err.message) } - } - } - function distance (x1, y1, x2, y2) { try { if (INTENSIVE_LOG === true) { logger.write('[INFO] distance -> Entering function.') } From 8294ec85563f4bf3283de65877f85795be83d69b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 12:29:14 +0200 Subject: [PATCH 065/221] Running without menues --- CompetitionStorage.js | 2 +- Container.js | 13 +- FloatingSpace/CircularMenu.js | 99 ++++++++++++ FloatingSpace/CircularMenuItem.js | 148 ++++++++++++++++++ FloatingSpace/FloatingLayer.js | 36 ++--- FloatingSpace/FloatingObject.js | 11 +- FloatingSpace/Note.js | 46 +++--- FloatingSpace/StrategyPart.js | 194 +++++------------------- Frame.js | 12 +- ProductStorage.js | 8 +- Scales/TimePeriodScale.js | 6 +- StrategySpace/StrategyCollectionItem.js | 2 +- TimelineChart.js | 2 +- Utilities/RoundedCornersBackground.js | 48 +++--- 14 files changed, 386 insertions(+), 241 deletions(-) create mode 100644 FloatingSpace/CircularMenu.js create mode 100644 FloatingSpace/CircularMenuItem.js diff --git a/CompetitionStorage.js b/CompetitionStorage.js index aebec6a93..b10a06b2a 100644 --- a/CompetitionStorage.js +++ b/CompetitionStorage.js @@ -94,7 +94,7 @@ function newCompetitionStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err= ' + err.stack) } if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> This bot has not starting competing yet.') } break diff --git a/Container.js b/Container.js index f2823a8ad..e3a64e4b8 100644 --- a/Container.js +++ b/Container.js @@ -2,6 +2,7 @@ function newContainer () { let thisObject = { id: Math.trunc(Math.random() * 10000000), + type: 'Rectangle', frame: undefined, displacement: undefined, eventHandler: undefined, @@ -18,6 +19,7 @@ function newContainer () { let connectedToParentWidth = false let connectedToParentHeight = false + let connectedToParentRadius = false let isConnectedToParent = false let dimensionsChangedEventSubscriptionId @@ -36,6 +38,7 @@ function newContainer () { function initialize (pName, pType) { thisObject.name = pName + thisObject.type = pType thisObject.frame = newFrame() thisObject.frame.initialize(pType) @@ -50,9 +53,10 @@ function newContainer () { thisObject.displacement.containerName = pName } - function connectToParent (parentContainer, onWidth, onHeight) { + function connectToParent (parentContainer, onWidth, onHeight, onRadius) { connectedToParentWidth = onWidth connectedToParentHeight = onHeight + connectedToParentRadius = onRadius isConnectedToParent = true thisObject.displacement.parentDisplacement = parentContainer.displacement @@ -69,6 +73,9 @@ function newContainer () { if (connectedToParentHeight) { thisObject.frame.height = thisObject.parentContainer.frame.height } + if (connectedToParentRadius) { + thisObject.frame.radius = thisObject.parentContainer.frame.radius + } } function onParentDimmensionsChanged (event) { @@ -81,6 +88,10 @@ function newContainer () { thisObject.frame.height = thisObject.parentContainer.frame.height dimmensionsChanged = true } + if (connectedToParentRadius) { + thisObject.frame.radius = thisObject.parentContainer.frame.radius + dimmensionsChanged = true + } if (dimmensionsChanged) { thisObject.eventHandler.raiseEvent('Dimmensions Changed', event) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js new file mode 100644 index 000000000..d1b1ed450 --- /dev/null +++ b/FloatingSpace/CircularMenu.js @@ -0,0 +1,99 @@ + +function newCircularMenu () { + const MODULE_NAME = 'Circular Menu' + + let thisObject = { + container: undefined, + physics: physics, + drawBackground: drawBackground, + drawForeground: drawForeground, + getContainer: getContainer, + initialize: initialize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME, 'Circle') + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + + let menuItemsInitialValues = [] + let menuItems = [] + + let isMouseOver = false + + return thisObject + + function initialize (menuItemsInitialValues) { +/* Create the array of Menu Items */ + + for (let i = 0; i < menuItemsInitialValues.length; i++) { + let menuItem = newCircularMenuItem() + let menuItemInitialValue = menuItemsInitialValues[i] + + menuItem.label = menuItemInitialValue.label + menuItem.visible = menuItemInitialValue.visible + menuItem.imagePathOn = menuItemInitialValue.imagePathOn + menuItem.imagePathOff = menuItemInitialValue.imagePathOff + menuItem.rawRadius = menuItemInitialValue.rawRadius + menuItem.targetRadius = menuItemInitialValue.label + menuItem.currentRadius = menuItemInitialValue.currentRadius + menuItem.angle = menuItemInitialValue.angle + + menuItem.initialize() + menuItems.push(menuItem) + } + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + } + + 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 } + } + } + + function physics () { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.physics() + } + } + + function onMouseOver () { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.targetRadius = menutItem.rawRadius * 1.5 + } + isMouseOver = true + } + + function onMouseNotOver () { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.targetRadius = menutItem.rawRadius * 1 - i * 5 + } + isMouseOver = false + } + + function drawBackground (pFloatingObject) { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.drawBackground() + } + } + + function drawForeground (pFloatingObject) { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.drawForeground() + } + } +} diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js new file mode 100644 index 000000000..7869f8590 --- /dev/null +++ b/FloatingSpace/CircularMenuItem.js @@ -0,0 +1,148 @@ + +function newCircularMenuItem () { + const MODULE_NAME = 'Circular Menu Iem' + + let thisObject = { + iconOn: undefined, + iconOff: undefined, + label: undefined, + visible: false, + imagePathOn: undefined, + imagePathOff: undefined, + rawRadius: undefined, + targetRadius: undefined, + currentRadius: undefined, + angle: undefined, + container: undefined, + physics: physics, + drawBackground: drawBackground, + drawForeground: drawForeground, + getContainer: getContainer, + initialize: initialize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + thisObject.container.frame.width = 100 + thisObject.container.frame.height = 50 + + let isMouseOver = false + + return thisObject + + function initialize () { + /* Load Menu Images */ + + thisObject.iconOn = new Image() + thisObject.iconOn.onload = onImageLoad + + function onImageLoad () { + thisObject.iconOff = new Image() + thisObject.iconOff.onload = onImageLoad + + function onImageLoad () { + thisObject.canDrawIcon = true + } + thisObject.iconOff.src = window.canvasApp.urlPrefix + thisObject.imagePathOff + } + 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('onMouseNotOver', onMouseNotOver) + } + + function getContainer (point) { + let container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function physics () { + if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) { + if (thisObject.currentRadius < thisObject.targetRadius) { + thisObject.currentRadius = thisObject.currentRadius + 0.5 + } else { + thisObject.currentRadius = thisObject.currentRadius - 0.5 + } + } + } + + function onMouseOver () { + isMouseOver = true + } + + function onMouseNotOver () { + isMouseOver = false + } + + function onMouseClick (event) { + + } + + function drawBackground () { + if (isMouseOver === true) { + let point = { + x: thisObject.container.frame.position.x, + y: thisObject.container.frame.position.y + } + + point = thisObject.container.frame.frameThisPoint(point) + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(point.x, point.y, thisObject.container.frame.width, thisObject.container.frame.height) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' + + browserCanvasContext.closePath() + browserCanvasContext.fill() + } + } + + function drawForeground () { + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + /* Menu Item */ + + if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) { + let menuPosition = { + x: position.x + thisObject.currentRadius * 3 / 4 * Math.cos(toRadians(thisObject.angle)), + y: position.y - thisObject.currentRadius * 3 / 4 * Math.sin(toRadians(thisObject.angle)) } + + browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) + + /* Menu Label */ + + let labelPoint + let fontSize = 10 + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + if (thisObject.label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) { + labelPoint = { + x: menuPosition.x + thisObject.currentRadius + 10, + y: menuPosition.y + fontSize * FONT_ASPECT_RATIO + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fillText(thisObject.label, labelPoint.x, labelPoint.y) + } + } + } +} diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index dd3188f99..8ee181c27 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -119,7 +119,7 @@ function newFloatingLayer () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] addFloatingObject -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -250,12 +250,12 @@ function newFloatingLayer () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -298,7 +298,7 @@ function newFloatingLayer () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] getFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] getFloatingObject -> err= ' + err.stack) } } } @@ -323,7 +323,7 @@ function newFloatingLayer () { makeVisible() } catch (err) { - if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physics -> drawVisibleObjects -> err.message = ' + err.message) } + if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physics -> drawVisibleObjects -> err= ' + err.stack) } } } @@ -391,7 +391,7 @@ function newFloatingLayer () { makeInvisible() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeVisible -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeVisible -> err= ' + err.stack) } } } @@ -449,7 +449,7 @@ function newFloatingLayer () { drawDyingObjects() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeInvisible -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeInvisible -> err= ' + err.stack) } } } @@ -469,7 +469,7 @@ function newFloatingLayer () { floatingObject.drawForeground() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> drawDyingObjects -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> drawDyingObjects -> err= ' + err.stack) } } } } @@ -634,7 +634,7 @@ function newFloatingLayer () { animateDyingObjects() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> applyPhysics -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> applyPhysics -> err= ' + err.stack) } } } @@ -659,11 +659,11 @@ function newFloatingLayer () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err= ' + err.stack) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err= ' + err.stack) } } } @@ -714,7 +714,7 @@ function newFloatingLayer () { floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + forceVector.x floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + forceVector.y } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] gravityForce -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] gravityForce -> err= ' + err.stack) } } } @@ -778,7 +778,7 @@ function newFloatingLayer () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] currentRepulsionForce -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] currentRepulsionForce -> err= ' + err.stack) } } } @@ -861,7 +861,7 @@ function newFloatingLayer () { floatingObject1.currentSpeed.y = floatingObject1.currentSpeed.y - forceVector.y } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] targetRepulsionForce -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] targetRepulsionForce -> err= ' + err.stack) } } } @@ -881,7 +881,7 @@ function newFloatingLayer () { maxTargetRepulsionForce = 0.0001 } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] changeTargetRepulsion -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] changeTargetRepulsion -> err= ' + err.stack) } } } @@ -907,7 +907,7 @@ function newFloatingLayer () { return true } else return true } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] colliding -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] colliding -> err= ' + err.stack) } } } @@ -917,7 +917,7 @@ function newFloatingLayer () { return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] distance -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] distance -> err= ' + err.stack) } } } @@ -995,7 +995,7 @@ function newFloatingLayer () { floatingObject1.container.frame.position = pos1 floatingObject2.container.frame.position = pos2 } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] resolveCollision -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] resolveCollision -> err= ' + err.stack) } } } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 6b61f65c7..81cc7f39e 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -88,6 +88,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() thisObject.underlayingObject.initialize(floatingLayer, pSubType) + thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true) break } default: { @@ -105,7 +106,7 @@ function newFloatingObject () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -131,7 +132,7 @@ function newFloatingObject () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -169,7 +170,7 @@ function newFloatingObject () { } function initializeMass (suggestedValue) { - var mass = suggestedValue + let mass = suggestedValue if (mass < 0.1) { mass = 0.1 } @@ -179,7 +180,7 @@ function newFloatingObject () { } function initializeRadius (suggestedValue) { - var radius = suggestedValue + let radius = suggestedValue if (radius < 2) { radius = 2 } @@ -187,6 +188,8 @@ function newFloatingObject () { thisObject.rawRadius = radius thisObject.targetRadius = radius thisObject.container.frame.radius = radius / 3 + + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } function initializeImageSize (suggestedValue) { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 46288c127..0fda6958f 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -89,11 +89,11 @@ function newNote () { } function drawForeground (pFloatingObject) { - const BUBBLE_CORNERS_RADIOUS = 5 + const BUBBLE_CORNERS_RADIUS = 5 const TITLE_BAR_HEIGHT = 14 - const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS + pFloatingObject.container.frame.radius * 4 - const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS + pFloatingObject.container.frame.radius * 2 + const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIUS + pFloatingObject.container.frame.radius * 4 + const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIUS + pFloatingObject.container.frame.radius * 2 let borderPoint1 let borderPoint2 @@ -109,23 +109,23 @@ function newNote () { /* Rounded Background */ borderPoint1 = { - x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + BUBBLE_CORNERS_RADIUS } borderPoint2 = { - x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + BUBBLE_CORNERS_RADIUS } borderPoint3 = { - x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIUS } borderPoint4 = { - x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + +BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + +BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIUS } titleBarPoint1 = { @@ -143,14 +143,14 @@ function newNote () { browserCanvasContext.fillStyle = 'rgba(255, 249, 196, 0.75)' browserCanvasContext.beginPath() - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint3.x + BUBBLE_CORNERS_RADIOUS, borderPoint3.y) - browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, BUBBLE_CORNERS_RADIOUS, 0 * Math.PI, 0.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + BUBBLE_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, BUBBLE_CORNERS_RADIOUS, 0.5 * Math.PI, 1.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIOUS, borderPoint1.y) + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + BUBBLE_CORNERS_RADIUS, borderPoint3.y) + browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, BUBBLE_CORNERS_RADIUS, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + BUBBLE_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, BUBBLE_CORNERS_RADIUS, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIUS, borderPoint1.y) browserCanvasContext.closePath() @@ -166,10 +166,10 @@ function newNote () { browserCanvasContext.beginPath() browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y) - browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIOUS, borderPoint1.y) - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIUS, borderPoint1.y) + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI) browserCanvasContext.lineTo(titleBarPoint2.x, titleBarPoint2.y) browserCanvasContext.closePath() diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 34bceccdd..03066a88a 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -4,6 +4,7 @@ function newStrategyPart () { let thisObject = { type: undefined, + menu: undefined, container: undefined, physics: physics, drawBackground: drawBackground, @@ -20,7 +21,6 @@ function newStrategyPart () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - let ballStringMenu = [] let floatingLayer let isMouseOver = false let image @@ -31,10 +31,11 @@ function newStrategyPart () { function initialize (pFloatingLayer, pType) { floatingLayer = pFloatingLayer + let menuItemsInitialValues = [] switch (pType) { case 'Strategy': { imagePath = 'Images/icons/style-01/quality.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Settings', visible: false, @@ -59,7 +60,7 @@ function newStrategyPart () { } case 'Strategy Entry': { imagePath = 'Images/icons/style-01/startup.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -74,7 +75,7 @@ function newStrategyPart () { } case 'Strategy Exit': { imagePath = 'Images/icons/style-01/support.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -89,7 +90,7 @@ function newStrategyPart () { } case 'Trade Entry': { imagePath = 'Images/icons/style-01/compass.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -104,7 +105,7 @@ function newStrategyPart () { } case 'Trade Exit': { imagePath = 'Images/icons/style-01/broken-link.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -119,7 +120,7 @@ function newStrategyPart () { } case 'Stop': { imagePath = 'Images/icons/style-01/pixel.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Phase', visible: false, @@ -134,7 +135,7 @@ function newStrategyPart () { } case 'Take Profit': { imagePath = 'Images/icons/style-01/competition.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Phase', visible: false, @@ -149,7 +150,7 @@ function newStrategyPart () { } case 'Phase': { imagePath = 'Images/icons/style-01/placeholder.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Edit Code', visible: false, @@ -184,7 +185,7 @@ function newStrategyPart () { } case 'Situation': { imagePath = 'Images/icons/style-01/attractive.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Condition', visible: false, @@ -209,7 +210,7 @@ function newStrategyPart () { } case 'Condition': { imagePath = 'Images/icons/style-01/testing.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Edit Code', visible: false, @@ -237,6 +238,9 @@ function newStrategyPart () { } } + thisObject.menu = newCircularMenu() + thisObject.menu.initialize(menuItemsInitialValues) + /* Load Part Image */ if (imagePath !== undefined) { @@ -249,129 +253,48 @@ function newStrategyPart () { image.src = window.canvasApp.urlPrefix + imagePath } -/* Load Menu Images */ - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - menuItem.iconOn = new Image() - menuItem.iconOn.onload = onImageLoad - - function onImageLoad () { - menuItem.iconOff = new Image() - menuItem.iconOff.onload = onImageLoad - - function onImageLoad () { - menuItem.canDrawIcon = true - } - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff - } - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn - menuItem.icon = menuItem.iconOn // The default value is ON. - } - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { - return undefined + let container + + container = thisObject.menu.getContainer(point) + if (container !== undefined) { return container } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } } function physics () { - // The menuItems also have a target. - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) { - if (menuItem.currentRadius < menuItem.targetRadius) { - menuItem.currentRadius = menuItem.currentRadius + 0.5 - } else { - menuItem.currentRadius = menuItem.currentRadius - 0.5 - } - } - } + thisObject.menu.physics() } function onMouseOver () { - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - menuItem.targetRadius = menuItem.rawRadius * 1.5 - } - + thisObject.menu.container.eventHandler.raiseEvent('onMouseOver') isMouseOver = true } function onMouseNotOver () { - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5 - } - + thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver') isMouseOver = false } function onMouseClick (event) { - /* What we need to do here is to check which menu item was clicked, if any. */ - pPoint = event.point - pFloatingObject = event.parent - - let menuItemIndex - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - let position = { - x: pFloatingObject.container.frame.position.x + pFloatingObject.container.frame.radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.container.frame.position.y - pFloatingObject.container.frame.radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) - } - - browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) - - let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2)) - - if (distance < menuItem.currentRadius) { - menuItemIndex = i - } - } - } - - if (menuItemIndex !== undefined) { - switch (menuItemIndex) { - - case 0: { - // This menu item is to turn ON / OFF the plotting of this bot. - - if (pFloatingObject.payload.profile.plot === true) { - pFloatingObject.payload.profile.plot = false - - let menuItem = ballStringMenu[0] - menuItem.icon = menuItem.iconOff - } else { - pFloatingObject.payload.profile.plot = true - - let menuItem = ballStringMenu[0] - menuItem.icon = menuItem.iconOn - } - - break - } - - case 1: { - // This menu item is to turn ON the Debug Log pannel for the bot. - - break - } - } - } } function drawBackground (pFloatingObject) { + drawPartBackground(pFloatingObject) + thisObject.menu.drawBackground() + } + + function drawPartBackground (pFloatingObject) { if (pFloatingObject.payload.parentNode === undefined) { return } /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ @@ -405,7 +328,7 @@ function newStrategyPart () { if (pFloatingObject.container.frame.radius > 0.5) { /* Target Spot */ - var radius = 1 + let radius = 1 browserCanvasContext.beginPath() browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true) @@ -416,6 +339,11 @@ function newStrategyPart () { } function drawForeground (pFloatingObject) { + drawPartForeground(pFloatingObject) + thisObject.menu.drawForeground() + } + + function drawPartForeground (pFloatingObject) { let position = { x: pFloatingObject.container.frame.position.x, y: pFloatingObject.container.frame.position.y @@ -423,18 +351,6 @@ function newStrategyPart () { let radius = pFloatingObject.container.frame.radius - if (radius > 5) { - /* Contourn */ -/* - browserCanvasContext.beginPath() - browserCanvasContext.arc(position.x, position.y, radius, 0, Math.PI * 2, true) - browserCanvasContext.closePath() - browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' - browserCanvasContext.lineWidth = 1 - browserCanvasContext.stroke() - */ - } - if (radius > 0.5 && image === undefined) { /* Main FloatingObject */ @@ -463,38 +379,6 @@ function newStrategyPart () { } } - /* StringBall Menu */ - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - let menuPosition = { - x: position.x + radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), - y: position.y - radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } - - browserCanvasContext.drawImage(menuItem.icon, menuPosition.x - menuItem.currentRadius, menuPosition.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) - - /* Menu Label */ - - let labelPoint - let fontSize = 10 - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - if (menuItem.label !== undefined && menuItem.currentRadius >= menuItem.targetRadius) { - labelPoint = { - x: menuPosition.x + menuItem.currentRadius + 10, - y: menuPosition.y + fontSize * FONT_ASPECT_RATIO - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fillText(menuItem.label, labelPoint.x, labelPoint.y) - } - } - } - /* Label Text */ if (radius > 6 && isMouseOver === true) { diff --git a/Frame.js b/Frame.js index 2fd4391da..f46f70630 100644 --- a/Frame.js +++ b/Frame.js @@ -1,6 +1,6 @@  function newFrame () { - const PANEL_CORNERS_RADIOUS = 5 + const PANEL_CORNERS_RADIUS = 5 const TITLE_BAR_HEIGHT = 15 // this must be grater than radius let thisObject = { @@ -216,7 +216,7 @@ function newFrame () { function background () { let params = { - cornerRadious: 5, + cornerRadius: 5, lineWidth: 0.1, opacity: 0.75, container: thisObject.container, @@ -247,10 +247,10 @@ function newFrame () { browserCanvasContext.beginPath() browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y) - browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y) - 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(borderPoint1.x - PANEL_CORNERS_RADIUS, borderPoint1.y) + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI) browserCanvasContext.lineTo(titleBarPoint2.x, titleBarPoint2.y) browserCanvasContext.closePath() diff --git a/ProductStorage.js b/ProductStorage.js index 66c3ea939..bc0d98456 100644 --- a/ProductStorage.js +++ b/ProductStorage.js @@ -171,7 +171,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> err= ' + err.stack) } callBackFunction(err) return @@ -227,7 +227,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> err= ' + err.stack) } callBackFunction(err) return @@ -282,7 +282,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> err= ' + err.stack) } callBackFunction(err) return @@ -334,7 +334,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err= ' + err.stack) } callBackFunction(err) return diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 85e3afc74..95c9ff5e3 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -220,7 +220,7 @@ to be visible at the top of the viewPort. */ /* We draw the circle container */ const RED_LINE_HIGHT = 5 - const RADIOUS = 25 + const RADIUS = 25 const OPACITY = 1 let centerPoint = { @@ -229,14 +229,14 @@ to be visible at the top of the viewPort. */ } browserCanvasContext.beginPath() - browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS, 0.0 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS, 0.0 * Math.PI, 2.0 * Math.PI) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 325433b9f..182338665 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -288,7 +288,7 @@ function newStrategyCollectionItem () { function borders () { let params = { - cornerRadious: 8, + cornerRadius: 8, lineWidth: 0.1, opacity: 1, container: thisObject.container, diff --git a/TimelineChart.js b/TimelineChart.js index a5f15f160..bdad50c22 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -135,7 +135,7 @@ if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> Plotter Manager Initialization Failed. ') } - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err= ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) return diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js index 76863de02..f9386eb86 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/Utilities/RoundedCornersBackground.js @@ -1,22 +1,22 @@ function roundedCornersBackground (params) { borderPoint1 = { - x: params.cornerRadious, - y: params.cornerRadious + x: params.cornerRadius, + y: params.cornerRadius } borderPoint2 = { - x: params.container.frame.width - params.cornerRadious, - y: params.cornerRadious + x: params.container.frame.width - params.cornerRadius, + y: params.cornerRadius } borderPoint3 = { - x: params.container.frame.width - params.cornerRadious, - y: params.container.frame.height - params.cornerRadious + x: params.container.frame.width - params.cornerRadius, + y: params.container.frame.height - params.cornerRadius } borderPoint4 = { - x: params.cornerRadious, - y: params.container.frame.height - params.cornerRadious + x: params.cornerRadius, + y: params.container.frame.height - params.cornerRadius } /* Now the transformations. */ @@ -35,14 +35,14 @@ function roundedCornersBackground (params) { 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.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadius + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadius + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET) browserCanvasContext.closePath() @@ -63,14 +63,14 @@ function roundedCornersBackground (params) { 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.arc(borderPoint1.x, borderPoint1.y, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadius) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius, borderPoint3.y) + browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadius) + browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius, borderPoint1.y) browserCanvasContext.closePath() From d7acb36f39d5ca3f8fcda8535c18313e230e8071 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 13:05:26 +0200 Subject: [PATCH 066/221] Physics distributed --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 4 +-- FloatingSpace/FloatingLayer.js | 30 ---------------------- FloatingSpace/FloatingObject.js | 41 +++++++++++++++++++++++++------ FloatingSpace/StrategyPart.js | 1 + 5 files changed, 37 insertions(+), 40 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index d1b1ed450..0abe8e308 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -43,6 +43,7 @@ function newCircularMenu () { menuItem.angle = menuItemInitialValue.angle menuItem.initialize() + menuItem.container.connectToParent(thisObject.container, false, false, true) menuItems.push(menuItem) } diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 7869f8590..442ab6cb7 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -121,8 +121,8 @@ function newCircularMenuItem () { if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) { let menuPosition = { - x: position.x + thisObject.currentRadius * 3 / 4 * Math.cos(toRadians(thisObject.angle)), - y: position.y - thisObject.currentRadius * 3 / 4 * Math.sin(toRadians(thisObject.angle)) } + x: position.x + thisObject.container.frame.radius * 3 / 4 * Math.cos(toRadians(thisObject.angle)), + y: position.y - thisObject.container.frame.radius * 3 / 4 * Math.sin(toRadians(thisObject.angle)) } browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 8ee181c27..ff6c93287 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -581,36 +581,6 @@ function newFloatingLayer () { floatingObject.currentSpeed.y = -MAX_SPEED } - // The radius also have a target. - - if (Math.abs(floatingObject.container.frame.radius - floatingObject.targetRadius) >= 1) { - if (floatingObject.container.frame.radius < floatingObject.targetRadius) { - floatingObject.container.frame.radius = floatingObject.container.frame.radius + 0.5 - } else { - floatingObject.container.frame.radius = floatingObject.container.frame.radius - 0.5 - } - } - - // The imageSize also have a target. - - if (Math.abs(floatingObject.currentImageSize - floatingObject.targetImageSize) >= 1) { - if (floatingObject.currentImageSize < floatingObject.targetImageSize) { - floatingObject.currentImageSize = floatingObject.currentImageSize + 1 - } else { - floatingObject.currentImageSize = floatingObject.currentImageSize - 1 - } - } - - // The fontSize also have a target. - - if (Math.abs(floatingObject.currentFontSize - floatingObject.targetFontSize) >= 0.2) { - if (floatingObject.currentFontSize < floatingObject.targetFontSize) { - floatingObject.currentFontSize = floatingObject.currentFontSize + 0.2 - } else { - floatingObject.currentFontSize = floatingObject.currentFontSize - 0.2 - } - } - // We let the Floating Object animate the physics loops by itself. floatingObject.physics() diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 81cc7f39e..471ec4acb 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -124,16 +124,41 @@ function newFloatingObject () { } } - function physics (callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + function physics () { + thisObjectPhysics() + thisObject.underlayingObject.physics() + } - thisObject.underlayingObject.physics() + function thisObjectPhysics () { + // The radius also have a target. - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err= ' + err.stack) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } + if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 1) { + if (thisObject.container.frame.radius < thisObject.targetRadius) { + thisObject.container.frame.radius = thisObject.container.frame.radius + 0.5 + } else { + thisObject.container.frame.radius = thisObject.container.frame.radius - 0.5 + } + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) + } + + // The imageSize also have a target. + + if (Math.abs(thisObject.currentImageSize - thisObject.targetImageSize) >= 1) { + if (thisObject.currentImageSize < thisObject.targetImageSize) { + thisObject.currentImageSize = thisObject.currentImageSize + 1 + } else { + thisObject.currentImageSize = thisObject.currentImageSize - 1 + } + } + + // The fontSize also have a target. + + if (Math.abs(thisObject.currentFontSize - thisObject.targetFontSize) >= 0.2) { + if (thisObject.currentFontSize < thisObject.targetFontSize) { + thisObject.currentFontSize = thisObject.currentFontSize + 0.2 + } else { + thisObject.currentFontSize = thisObject.currentFontSize - 0.2 + } } } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 03066a88a..7aabdcbd6 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -240,6 +240,7 @@ function newStrategyPart () { thisObject.menu = newCircularMenu() thisObject.menu.initialize(menuItemsInitialValues) + thisObject.menu.container.connectToParent(thisObject.container, false, false, true) /* Load Part Image */ From 6476fd642884adb07a9cb2b3eb7d7c5415e0aafd Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 13:44:57 +0200 Subject: [PATCH 067/221] Ready for capturing events at menu items --- FloatingSpace/CircularMenu.js | 2 +- FloatingSpace/CircularMenuItem.js | 10 ++++++--- FloatingSpace/FloatingObject.js | 23 ++++++++++---------- FloatingSpace/StrategyPart.js | 35 ++++++++++++++++--------------- 4 files changed, 38 insertions(+), 32 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 0abe8e308..22c55c56d 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -79,7 +79,7 @@ function newCircularMenu () { function onMouseNotOver () { for (let i = 0; i < menuItems.length; i++) { let menutItem = menuItems[i] - menutItem.targetRadius = menutItem.rawRadius * 1 - i * 5 + menutItem.targetRadius = menutItem.rawRadius * 0 - i * 5 } isMouseOver = false } diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 442ab6cb7..7b3091237 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -61,7 +61,7 @@ function newCircularMenuItem () { function getContainer (point) { let container - if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, true, true) === true) { return thisObject.container } else { return undefined @@ -115,15 +115,18 @@ function newCircularMenuItem () { y: 0 } + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 position = thisObject.container.frame.frameThisPoint(position) /* Menu Item */ if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) { let menuPosition = { - x: position.x + thisObject.container.frame.radius * 3 / 4 * Math.cos(toRadians(thisObject.angle)), - y: position.y - thisObject.container.frame.radius * 3 / 4 * Math.sin(toRadians(thisObject.angle)) } + 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 = menuPosition browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) /* Menu Label */ @@ -146,3 +149,4 @@ function newCircularMenuItem () { } } } + diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 471ec4acb..4ae674585 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -1,4 +1,4 @@ -  + function newFloatingObject () { const MODULE_NAME = 'Floating Object' const INFO_LOG = false @@ -130,28 +130,28 @@ function newFloatingObject () { } function thisObjectPhysics () { - // The radius also have a target. + // The radius also have a target. if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 1) { if (thisObject.container.frame.radius < thisObject.targetRadius) { - thisObject.container.frame.radius = thisObject.container.frame.radius + 0.5 + thisObject.container.frame.radius = thisObject.container.frame.radius + 2 } else { - thisObject.container.frame.radius = thisObject.container.frame.radius - 0.5 + thisObject.container.frame.radius = thisObject.container.frame.radius - 2 } thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } - // The imageSize also have a target. + // The imageSize also have a target. if (Math.abs(thisObject.currentImageSize - thisObject.targetImageSize) >= 1) { if (thisObject.currentImageSize < thisObject.targetImageSize) { - thisObject.currentImageSize = thisObject.currentImageSize + 1 + thisObject.currentImageSize = thisObject.currentImageSize + 2 } else { - thisObject.currentImageSize = thisObject.currentImageSize - 1 + thisObject.currentImageSize = thisObject.currentImageSize - 2 } } - // The fontSize also have a target. + // The fontSize also have a target. if (Math.abs(thisObject.currentFontSize - thisObject.targetFontSize) >= 0.2) { if (thisObject.currentFontSize < thisObject.targetFontSize) { @@ -163,7 +163,7 @@ function newFloatingObject () { } function onMouseOver () { - thisObject.targetRadius = thisObject.rawRadius * 2.5 + thisObject.targetRadius = thisObject.rawRadius * 4.0 thisObject.targetImageSize = thisObject.rawImageSize * 2.0 thisObject.targetFontSize = thisObject.rawFontSize * 2.0 @@ -275,13 +275,14 @@ function newFloatingObject () { function updateMass () { - // thisObject.currentMass = thisObject.rawMass + thisObject.rawMass * thisObject.container.zoom.incrementM * thisObject.container.zoom.levelM; + // thisObject.currentMass = thisObject.rawMass + thisObject.rawMass * thisObject.container.zoom.incrementM * thisObject.container.zoom.levelM; } function updateRadius () { - // thisObject.targetRadius = thisObject.rawRadius + thisObject.rawRadius * thisObject.container.zoom.incrementR * thisObject.container.zoom.levelR; + // thisObject.targetRadius = thisObject.rawRadius + thisObject.rawRadius * thisObject.container.zoom.incrementR * thisObject.container.zoom.levelR; } } + diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 7aabdcbd6..5192aa977 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -44,7 +44,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 20 }, { label: 'Delete This Strategy', @@ -54,7 +54,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 20 * 1 + angle: -20 }] break } @@ -69,7 +69,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -84,7 +84,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -99,7 +99,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -114,7 +114,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -129,7 +129,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -144,7 +144,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 0 }] break } @@ -159,7 +159,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 40 }, { label: 'Add Situation', @@ -169,7 +169,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 20 * 1 + angle: 0 }, { label: 'Delete This Phase', @@ -179,7 +179,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: -20 + angle: -40 }] break } @@ -194,7 +194,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 20 }, { label: 'Delete This Situation', @@ -204,7 +204,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 20 * 1 + angle: -20 }] break } @@ -219,7 +219,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 60 + angle: 20 }, { label: 'Delete This Condition', @@ -229,7 +229,7 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 20 * 1 + angle: -20 }] break } @@ -397,7 +397,7 @@ function newStrategyPart () { if (label !== undefined) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius - fontSize * FONT_ASPECT_RATIO - 10 + y: position.y - radius / 2 - fontSize * FONT_ASPECT_RATIO - 10 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -410,7 +410,7 @@ function newStrategyPart () { if (label !== undefined && isMouseOver === true) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y + radius + fontSize * FONT_ASPECT_RATIO + 15 + y: position.y + radius / 2 + fontSize * FONT_ASPECT_RATIO + 15 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -420,3 +420,4 @@ function newStrategyPart () { } } } + From c69c8fc5b72395aeb49c043cd511b55576372564 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 14:03:49 +0200 Subject: [PATCH 068/221] Final touches on radius animation --- FloatingSpace/FloatingObject.js | 6 +++--- FloatingSpace/StrategyPart.js | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 4ae674585..ff77d6ce9 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -134,9 +134,9 @@ function newFloatingObject () { if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 1) { if (thisObject.container.frame.radius < thisObject.targetRadius) { - thisObject.container.frame.radius = thisObject.container.frame.radius + 2 + thisObject.container.frame.radius = thisObject.container.frame.radius + 2.5 } else { - thisObject.container.frame.radius = thisObject.container.frame.radius - 2 + thisObject.container.frame.radius = thisObject.container.frame.radius - 2.5 } thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } @@ -163,7 +163,7 @@ function newFloatingObject () { } function onMouseOver () { - thisObject.targetRadius = thisObject.rawRadius * 4.0 + thisObject.targetRadius = thisObject.rawRadius * 5.0 thisObject.targetImageSize = thisObject.rawImageSize * 2.0 thisObject.targetFontSize = thisObject.rawFontSize * 2.0 diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 5192aa977..6b0e395e0 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -291,7 +291,9 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { - drawPartBackground(pFloatingObject) + if (isMouseOver === false) { + drawPartBackground(pFloatingObject) + } thisObject.menu.drawBackground() } From fbba9b217e71e1b03a31cb10ef5ed93c81315ddf Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 15:33:03 +0200 Subject: [PATCH 069/221] frame position at item fixed --- FloatingSpace/CircularMenuItem.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 7b3091237..c4678ec24 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -28,8 +28,8 @@ function newCircularMenuItem () { thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = 100 - thisObject.container.frame.height = 50 + thisObject.container.frame.width = 150 + thisObject.container.frame.height = 30 let isMouseOver = false @@ -97,8 +97,6 @@ function newCircularMenuItem () { y: thisObject.container.frame.position.y } - point = thisObject.container.frame.frameThisPoint(point) - browserCanvasContext.beginPath() browserCanvasContext.rect(point.x, point.y, thisObject.container.frame.width, thisObject.container.frame.height) @@ -126,7 +124,9 @@ function newCircularMenuItem () { 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 = menuPosition + thisObject.container.frame.position.x = menuPosition.x - thisObject.currentRadius + thisObject.container.frame.position.y = menuPosition.y - thisObject.container.frame.height / 2 + browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) /* Menu Label */ From 9b295b8aad66e4155098d58aad9518398221a172 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 15:45:58 +0200 Subject: [PATCH 070/221] refactoring onMouseWheel --- Canvas.js | 8 ++++---- Panels/ProductsPanel.js | 4 ++-- Scales/RateScale.js | 2 +- Scales/TimePeriodScale.js | 2 +- Scales/TimeScale.js | 2 +- Spaces/FloatingSpace.js | 2 +- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/Canvas.js b/Canvas.js index d74f04d2d..5b0643147 100644 --- a/Canvas.js +++ b/Canvas.js @@ -640,7 +640,7 @@ function newCanvas () { container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('Mouse Wheel', event) + container.eventHandler.raiseEvent('onMouseWheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -649,7 +649,7 @@ function newCanvas () { container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('Mouse Wheel', event) + container.eventHandler.raiseEvent('onMouseWheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -658,7 +658,7 @@ function newCanvas () { container = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('Mouse Wheel', event) + container.eventHandler.raiseEvent('onMouseWheel', event) return false // This instructs the browser not to take the event and scroll the page. } @@ -667,7 +667,7 @@ function newCanvas () { container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('Mouse Wheel', event) + container.eventHandler.raiseEvent('onMouseWheel', event) return false // This instructs the browser not to take the event and scroll the page. } else { /* If all the above fails, we fallback into applying zoom to the viewPort */ diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 0c532a7e0..38887727b 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -132,13 +132,13 @@ /* Listen to Status Changes Events */ productCard.container.eventHandler.listenToEvent('Status Changed', onProductCardStatusChanged) - productCard.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + productCard.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) } } } } - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) isInitialized = true } diff --git a/Scales/RateScale.js b/Scales/RateScale.js index 679dbe118..f448c6aee 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -41,7 +41,7 @@ function newRateScale () { function initialize (pTimeLineCoordinateSystem) { timeLineCoordinateSystem = pTimeLineCoordinateSystem - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) if (!thisObject.heightPercentage) { diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 95c9ff5e3..6ed8308da 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -40,7 +40,7 @@ function newTimePeriodScale () { function initialize (pTimeLineCoordinateSystem) { timeLineCoordinateSystem = pTimeLineCoordinateSystem - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) readObjectState() newTimePeriod() diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 1516bcdef..5ceb30589 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -35,7 +35,7 @@ function newTimeScale () { function initialize (pTimeLineCoordinateSystem) { timeLineCoordinateSystem = pTimeLineCoordinateSystem - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME) if (!thisObject.lenghtPercentage) { diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 6070b086d..56ce68e95 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -55,7 +55,7 @@ function newFloatingSpace () { thisObject.strategyParts = newStrategyParts() thisObject.strategyParts.initialize(thisObject.floatingLayer) - thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) } function onMouseWheel (event) { From 94f80bc686e62c51b0dce8a7637a952a046c0579 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 16:06:50 +0200 Subject: [PATCH 071/221] container connect to events implemented --- Container.js | 14 ++++++++++---- FloatingSpace/CircularMenu.js | 2 +- FloatingSpace/FloatingObject.js | 2 +- FloatingSpace/StrategyPart.js | 2 +- PlottersManager.js | 4 ++-- Spaces/ChartSpace.js | 2 -- TimeMachine.js | 8 ++++---- TimelineChart.js | 4 ++-- 8 files changed, 21 insertions(+), 17 deletions(-) diff --git a/Container.js b/Container.js index e3a64e4b8..5b552e295 100644 --- a/Container.js +++ b/Container.js @@ -20,6 +20,8 @@ function newContainer () { let connectedToParentWidth = false let connectedToParentHeight = false let connectedToParentRadius = false + let connectedToParentEvents = false + let isConnectedToParent = false let dimensionsChangedEventSubscriptionId @@ -53,19 +55,23 @@ function newContainer () { thisObject.displacement.containerName = pName } - function connectToParent (parentContainer, onWidth, onHeight, onRadius) { + function connectToParent (parentContainer, onWidth, onHeight, onRadius, onEvents) { connectedToParentWidth = onWidth connectedToParentHeight = onHeight connectedToParentRadius = onRadius + connectedToParentEvents = onEvents + isConnectedToParent = true thisObject.displacement.parentDisplacement = parentContainer.displacement thisObject.frame.parentFrame = parentContainer.frame thisObject.parentContainer = parentContainer - dimensionsChangedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) - onMouseOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver) - onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + if (connectedToParentEvents === true) { + dimensionsChangedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) + onMouseOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver) + onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + } if (connectedToParentWidth) { thisObject.frame.width = thisObject.parentContainer.frame.width diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 22c55c56d..c3bd93af9 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -43,7 +43,7 @@ function newCircularMenu () { menuItem.angle = menuItemInitialValue.angle menuItem.initialize() - menuItem.container.connectToParent(thisObject.container, false, false, true) + menuItem.container.connectToParent(thisObject.container, false, false, true, true) menuItems.push(menuItem) } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index ff77d6ce9..a4f414869 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -88,7 +88,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() thisObject.underlayingObject.initialize(floatingLayer, pSubType) - thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true) + thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true) break } default: { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 6b0e395e0..67d4862e5 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -240,7 +240,7 @@ function newStrategyPart () { thisObject.menu = newCircularMenu() thisObject.menu.initialize(menuItemsInitialValues) - thisObject.menu.container.connectToParent(thisObject.container, false, false, true) + thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true) /* Load Part Image */ diff --git a/PlottersManager.js b/PlottersManager.js index 99e544dcb..0c1ad5299 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -221,7 +221,7 @@ function newPlottersManager () { let plotter = getNewPlotter(competition.plotter.host, competition.plotter.codeName, competition.plotter.moduleName) - plotter.container.connectToParent(thisObject.container, true, true) + plotter.container.connectToParent(thisObject.container, true, true, false, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 @@ -463,7 +463,7 @@ function newPlottersManager () { let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName) - plotter.container.connectToParent(thisObject.container, true, true) + plotter.container.connectToParent(thisObject.container, true, true, false, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 3a25d6cc7..912ccf219 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -54,8 +54,6 @@ function newChartSpace () { var timeMachine = newTimeMachine() - // timeMachine.container.connectToParent(thisObject.container, true, true) - /* We make the time machine a little bit smaller than the current space. */ timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2 diff --git a/TimeMachine.js b/TimeMachine.js index d25a9aaa1..ee1455dcc 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -82,7 +82,7 @@ function newTimeMachine () { let timelineChart = newTimelineChart() - timelineChart.container.connectToParent(thisObject.container, true, true) + timelineChart.container.connectToParent(thisObject.container, true, true, false, true) timelineChart.container.frame.height = thisObject.container.frame.height timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 @@ -106,7 +106,7 @@ function newTimeMachine () { /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() - timeScale.container.connectToParent(thisObject.container, false, false) + timeScale.container.connectToParent(thisObject.container, false, false, false, true) timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) @@ -115,7 +115,7 @@ function newTimeMachine () { timeScale.initialize(timeLineCoordinateSystem) rigthScale = newRateScale() - rigthScale.container.connectToParent(thisObject.container, false, false) + rigthScale.container.connectToParent(thisObject.container, false, false, false, true) rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) @@ -157,7 +157,7 @@ function newTimeMachine () { let timelineChart = newTimelineChart() - timelineChart.container.connectToParent(thisObject.container, true, true) + timelineChart.container.connectToParent(thisObject.container, true, true, false, true) timelineChart.container.frame.height = thisObject.container.frame.height diff --git a/TimelineChart.js b/TimelineChart.js index bdad50c22..7b1655bca 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -123,7 +123,7 @@ plotterManager = newPlottersManager() - plotterManager.container.connectToParent(thisObject.container, true, true) + plotterManager.container.connectToParent(thisObject.container, true, true, false, true) plotterManager.container.frame.position.x = 0 plotterManager.container.frame.position.y = 0 @@ -142,7 +142,7 @@ } timePeriodScale = newTimePeriodScale() - timePeriodScale.container.connectToParent(thisObject.container, false, false) + timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true) timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { let currentTimePeriod = timePeriod timePeriod = event.timePeriod From 7e4163cb54c341857d3fec1c88e7a0f2aed447f0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 16:32:07 +0200 Subject: [PATCH 072/221] Container with connect to parent with individual events --- Container.js | 18 ++++++++++++++---- FloatingSpace/CircularMenu.js | 11 ++++++----- FloatingSpace/CircularMenuItem.js | 9 ++++----- FloatingSpace/FloatingObject.js | 2 +- FloatingSpace/StrategyPart.js | 2 +- PlottersManager.js | 4 ++-- TimeMachine.js | 8 ++++---- TimelineChart.js | 4 ++-- 8 files changed, 34 insertions(+), 24 deletions(-) diff --git a/Container.js b/Container.js index 5b552e295..f0ab7bb37 100644 --- a/Container.js +++ b/Container.js @@ -20,7 +20,10 @@ function newContainer () { let connectedToParentWidth = false let connectedToParentHeight = false let connectedToParentRadius = false - let connectedToParentEvents = false + + let onDimmensionsChangedParentEvent = false + let onMouseOverParentEvent = false + let onMouseNotOverParentEvent = false let isConnectedToParent = false @@ -55,11 +58,14 @@ function newContainer () { thisObject.displacement.containerName = pName } - function connectToParent (parentContainer, onWidth, onHeight, onRadius, onEvents) { + function connectToParent (parentContainer, onWidth, onHeight, onRadius, onDimmensionsChangedEvent, onMouseOverEvent, onMouseNotOverEvent) { connectedToParentWidth = onWidth connectedToParentHeight = onHeight connectedToParentRadius = onRadius - connectedToParentEvents = onEvents + + onDimmensionsChangedParentEvent = onDimmensionsChangedEvent + onMouseOverParentEvent = onMouseOverEvent + onMouseNotOverParentEvent = onMouseNotOverEvent isConnectedToParent = true @@ -67,9 +73,13 @@ function newContainer () { thisObject.frame.parentFrame = parentContainer.frame thisObject.parentContainer = parentContainer - if (connectedToParentEvents === true) { + if (onDimmensionsChangedParentEvent === true) { dimensionsChangedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged) + } + if (onMouseOverParentEvent === true) { onMouseOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver) + } + if (onMouseNotOverParentEvent === true) { onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index c3bd93af9..b1254425f 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -4,6 +4,7 @@ function newCircularMenu () { let thisObject = { container: undefined, + isDeployed: undefined, physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, @@ -22,8 +23,6 @@ function newCircularMenu () { let menuItemsInitialValues = [] let menuItems = [] - let isMouseOver = false - return thisObject function initialize (menuItemsInitialValues) { @@ -43,7 +42,7 @@ function newCircularMenu () { menuItem.angle = menuItemInitialValue.angle menuItem.initialize() - menuItem.container.connectToParent(thisObject.container, false, false, true, true) + menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false) menuItems.push(menuItem) } @@ -72,16 +71,18 @@ function newCircularMenu () { for (let i = 0; i < menuItems.length; i++) { let menutItem = menuItems[i] menutItem.targetRadius = menutItem.rawRadius * 1.5 + menutItem.isDeployed = true } - isMouseOver = true + thisObject.isDeployed = true } function onMouseNotOver () { for (let i = 0; i < menuItems.length; i++) { let menutItem = menuItems[i] menutItem.targetRadius = menutItem.rawRadius * 0 - i * 5 + menutItem.isDeployed = false } - isMouseOver = false + thisObject.isDeployed = false } function drawBackground (pFloatingObject) { diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index c4678ec24..18274ec54 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -3,6 +3,7 @@ function newCircularMenuItem () { const MODULE_NAME = 'Circular Menu Iem' let thisObject = { + isDeployed: undefined, iconOn: undefined, iconOff: undefined, label: undefined, @@ -31,8 +32,6 @@ function newCircularMenuItem () { thisObject.container.frame.width = 150 thisObject.container.frame.height = 30 - let isMouseOver = false - return thisObject function initialize () { @@ -79,11 +78,11 @@ function newCircularMenuItem () { } function onMouseOver () { - isMouseOver = true + } function onMouseNotOver () { - isMouseOver = false + } function onMouseClick (event) { @@ -91,7 +90,7 @@ function newCircularMenuItem () { } function drawBackground () { - if (isMouseOver === true) { + if (thisObject.isDeployed === true) { let point = { x: thisObject.container.frame.position.x, y: thisObject.container.frame.position.y diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index a4f414869..526fcbdf3 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -88,7 +88,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() thisObject.underlayingObject.initialize(floatingLayer, pSubType) - thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true) + thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, true, true) break } default: { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 67d4862e5..909a9ff8e 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -240,7 +240,7 @@ function newStrategyPart () { thisObject.menu = newCircularMenu() thisObject.menu.initialize(menuItemsInitialValues) - thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true) + thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, true, true) /* Load Part Image */ diff --git a/PlottersManager.js b/PlottersManager.js index 0c1ad5299..d3c00d03f 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -221,7 +221,7 @@ function newPlottersManager () { let plotter = getNewPlotter(competition.plotter.host, competition.plotter.codeName, competition.plotter.moduleName) - plotter.container.connectToParent(thisObject.container, true, true, false, true) + plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 @@ -463,7 +463,7 @@ function newPlottersManager () { let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName) - plotter.container.connectToParent(thisObject.container, true, true, false, true) + plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true) plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2 plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2 diff --git a/TimeMachine.js b/TimeMachine.js index ee1455dcc..3de634771 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -82,7 +82,7 @@ function newTimeMachine () { let timelineChart = newTimelineChart() - timelineChart.container.connectToParent(thisObject.container, true, true, false, true) + timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true) timelineChart.container.frame.height = thisObject.container.frame.height timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2 @@ -106,7 +106,7 @@ function newTimeMachine () { /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() - timeScale.container.connectToParent(thisObject.container, false, false, false, true) + timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) @@ -115,7 +115,7 @@ function newTimeMachine () { timeScale.initialize(timeLineCoordinateSystem) rigthScale = newRateScale() - rigthScale.container.connectToParent(thisObject.container, false, false, false, true) + rigthScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) @@ -157,7 +157,7 @@ function newTimeMachine () { let timelineChart = newTimelineChart() - timelineChart.container.connectToParent(thisObject.container, true, true, false, true) + timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true) timelineChart.container.frame.height = thisObject.container.frame.height diff --git a/TimelineChart.js b/TimelineChart.js index 7b1655bca..baf381f59 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -123,7 +123,7 @@ plotterManager = newPlottersManager() - plotterManager.container.connectToParent(thisObject.container, true, true, false, true) + plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true) plotterManager.container.frame.position.x = 0 plotterManager.container.frame.position.y = 0 @@ -142,7 +142,7 @@ } timePeriodScale = newTimePeriodScale() - timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true) + timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { let currentTimePeriod = timePeriod timePeriod = event.timePeriod From 2d48fe7c4b6df549cbefa87434419e3bb9d05e0b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 19:01:54 +0200 Subject: [PATCH 073/221] 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 From 26a081391f8249b62b8b4a491e35148d812a730e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 19:22:59 +0200 Subject: [PATCH 074/221] Mouse over detected when leaving an object --- Container.js | 1 + Spaces/FloatingSpace.js | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/Container.js b/Container.js index f0ab7bb37..7a49461ab 100644 --- a/Container.js +++ b/Container.js @@ -10,6 +10,7 @@ function newContainer () { isDraggeable: true, isClickeable: false, isWheelable: false, + detectMouseOver: false, name: undefined, initialize: initialize, finalize: finalize, diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 56ce68e95..d234f61e5 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -27,9 +27,12 @@ function newFloatingSpace () { thisObject.container.isClickeable = false thisObject.container.isDraggeable = false thisObject.container.isWheelable = true + thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.x = SIDE_PANEL_WIDTH thisObject.container.frame.position.y = 0 + thisObject.container.frame.width = browserCanvas.width - SIDE_PANEL_WIDTH + thisObject.container.frame.height = browserCanvas.height let visible = false @@ -83,8 +86,6 @@ function newFloatingSpace () { if (visible === true) { return thisObject.container } - - return container } function physics () { @@ -102,7 +103,7 @@ function newFloatingSpace () { function drawBackground () { browserCanvasContext.beginPath() - browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height) + browserCanvasContext.rect(thisObject.container.frame.position.x, thisObject.container.frame.position.y, thisObject.container.frame.width, thisObject.container.frame.height) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' browserCanvasContext.closePath() From b2c631c3125949484337986403252d11621e894e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 20:30:00 +0200 Subject: [PATCH 075/221] Could not get it without moving --- FloatingSpace/CircularMenu.js | 2 - FloatingSpace/CircularMenuItem.js | 2 +- FloatingSpace/FloatingLayer.js | 120 +++++++++--------------------- FloatingSpace/FloatingObject.js | 5 ++ FloatingSpace/StrategyPart.js | 4 +- 5 files changed, 42 insertions(+), 91 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index bf458d7b9..461419026 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -76,7 +76,6 @@ function newCircularMenu () { menutItem.isDeployed = true } thisObject.isDeployed = true - console.log('mouse over') } function onMouseNotOver () { @@ -86,7 +85,6 @@ function newCircularMenu () { menutItem.isDeployed = false } thisObject.isDeployed = false - console.log('mouse not over') } function drawBackground (pFloatingObject) { diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 52ebdedcc..83687751b 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -100,7 +100,7 @@ function newCircularMenuItem () { } function drawBackground () { - if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true) { + if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) { let position = { x: 0, y: 0 diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index ff6c93287..6208366ef 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -16,7 +16,6 @@ function newFloatingLayer () { const MODULE_NAME = 'Floating Layer' const INFO_LOG = false - let INTENSIVE_LOG = false const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -307,8 +306,6 @@ function newFloatingLayer () { function drawVisibleObjects () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> drawVisibleObjects -> Entering function.') } - /* We draw all the visibleFloatingObjects. */ for (let i = 0; i < visibleFloatingObjects.length; i++) { @@ -323,14 +320,11 @@ function newFloatingLayer () { makeVisible() } catch (err) { - if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physics -> drawVisibleObjects -> err= ' + err.stack) } } } function makeVisible () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> makeVisible -> Entering function.') } - /* Now we check if any of the created FloatingObjects where enabled to run under the Physics Engine. */ for (let i = 0; i < invisibleFloatingObjects.length; i++) { @@ -366,8 +360,6 @@ function newFloatingLayer () { } if (payload.visible === true) { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> payload.visible = ' + payload.visible) } - /* The first time that the floatingObject becomes visible, we need to do this. */ floatingObject.radomizeCurrentPosition(payload.position) @@ -375,16 +367,8 @@ function newFloatingLayer () { visibleFloatingObjects.push(floatingObject) - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject added to visibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - invisibleFloatingObjects.splice(i, 1) // Delete item from array. - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject removed from invisibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - return // Only one at the time. } } @@ -397,8 +381,6 @@ function newFloatingLayer () { function makeInvisible () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> makeInvisible -> Entering function.') } - /* Finally we check if any of the currently visible floatingObjects has become invisible and must be removed from the Physics Engine. */ for (let i = 0; i < visibleFloatingObjects.length; i++) { @@ -429,20 +411,10 @@ function newFloatingLayer () { } if (payload.visible === false) { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> payload.visible = ' + payload.visible) } - invisibleFloatingObjects.push(floatingObject) - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject added to invisibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - visibleFloatingObjects.splice(i, 1) // Delete item from array. - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject.handle = ' + floatingObject.handle) } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> floatingObject removed from visibleFloatingObjects') } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - return // Only one at the time. } } @@ -455,8 +427,6 @@ function newFloatingLayer () { function drawDyingObjects () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> drawDyingObjects -> Entering function.') } - /* We also draw all the dyingFloatingObjects */ for (let i = 0; i < dyingFloatingObjects.length; i++) { @@ -496,31 +466,23 @@ function newFloatingLayer () { */ try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Entering function.') } - applyPhysics() function applyPhysics () { /* This function makes all the calculations to apply phisycs on all visible floatingObjects in this layer. */ try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> applyPhysics -> Entering function.') } - for (let i = 0; i < visibleFloatingObjects.length; i++) { let floatingObject = visibleFloatingObjects[i] - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Change position based on speed.') } - - floatingObject.container.frame.position.x = floatingObject.container.frame.position.x + floatingObject.currentSpeed.x - floatingObject.container.frame.position.y = floatingObject.container.frame.position.y + floatingObject.currentSpeed.y - - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Apply some friction to desaccelerate.') } + if (floatingObject.positionLocked === false) { + floatingObject.container.frame.position.x = floatingObject.container.frame.position.x + floatingObject.currentSpeed.x + floatingObject.container.frame.position.y = floatingObject.container.frame.position.y + floatingObject.currentSpeed.y + } floatingObject.currentSpeed.x = floatingObject.currentSpeed.x * floatingObject.friction // Desaceleration factor. floatingObject.currentSpeed.y = floatingObject.currentSpeed.y * floatingObject.friction // Desaceleration factor. - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Gives a minimun speed towards their taget.') } - let payload = { position: undefined, visible: false @@ -561,8 +523,6 @@ function newFloatingLayer () { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y - 0.005 } - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> Set a maximun speed.') } - const MAX_SPEED = 50 if (floatingObject.currentSpeed.x > MAX_SPEED) { @@ -610,8 +570,6 @@ function newFloatingLayer () { function animateDyingObjects () { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] physics -> animateDyingObjects -> Entering function.') } - /* We animate some parts of the dying objects */ for (let i = 0; i < dyingFloatingObjects.length; i++) { @@ -639,8 +597,6 @@ function newFloatingLayer () { function gravityForce (floatingObject, payload) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] gravityForce -> Entering function.') } - /* We simulate a kind of gravity towards the target point of each floatingObject. This force will make the floatingObject to keep pushing to reach that point. */ const coulomb = 0.00001 @@ -669,20 +625,22 @@ function newFloatingLayer () { y: pos2.y - pos1.y } - var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. - x: posDiff.x / d, - y: posDiff.y / d + if (d !== 0) { + var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. + x: posDiff.x / d, + y: posDiff.y / d + } + + var forceVector = { + x: unitVector.x * force, + y: unitVector.y * force + } + + /* We add the force vector to the speed vector */ + + floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + forceVector.x + floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + forceVector.y } - - var forceVector = { - x: unitVector.x * force, - y: unitVector.y * force - } - - /* We add the force vector to the speed vector */ - - floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + forceVector.x - floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + forceVector.y } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] gravityForce -> err= ' + err.stack) } } @@ -690,8 +648,6 @@ function newFloatingLayer () { function currentRepulsionForce (currentFloatingObject) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] currentRepulsionForce -> Entering function.') } - /* We generate a repulsion force between floatingObjects, that prevents them to be collisioning so often. */ const coulomb = 2 @@ -754,8 +710,6 @@ function newFloatingLayer () { function targetRepulsionForce (currentFloatingObject) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] targetRepulsionForce -> Entering function.') } - /* We generate a repulsion force between floatingObjects, that prevents them to be collisioning so often. */ const coulomb = 2 @@ -815,20 +769,22 @@ function newFloatingLayer () { y: pos2.y - pos1.y } - var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. - x: posDiff.x / d, - y: posDiff.y / d + if (d !== 0) { + var unitVector = { // To find the unit vector, we divide each component by the magnitude of the vector. + x: posDiff.x / d, + y: posDiff.y / d + } + + var forceVector = { + x: unitVector.x * force, + y: unitVector.y * force + } + + /* We substract the force vector to the speed vector of the current floatingObject */ + + floatingObject1.currentSpeed.x = floatingObject1.currentSpeed.x - forceVector.x + floatingObject1.currentSpeed.y = floatingObject1.currentSpeed.y - forceVector.y } - - var forceVector = { - x: unitVector.x * force, - y: unitVector.y * force - } - - /* We substract the force vector to the speed vector of the current floatingObject */ - - floatingObject1.currentSpeed.x = floatingObject1.currentSpeed.x - forceVector.x - floatingObject1.currentSpeed.y = floatingObject1.currentSpeed.y - forceVector.y } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] targetRepulsionForce -> err= ' + err.stack) } @@ -837,8 +793,6 @@ function newFloatingLayer () { function changeTargetRepulsion (pDelta) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] changeTargetRepulsion -> Entering function.') } - if (pDelta > 0) { pDelta = 1 } else { @@ -857,8 +811,6 @@ function newFloatingLayer () { function colliding (floatingObject1, floatingObject2) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] colliding -> Entering function.') } - /* This function detects weather 2 floatingObjects collide with each other. */ var r1 = floatingObject1.container.frame.radius @@ -883,8 +835,6 @@ function newFloatingLayer () { function distance (x1, y1, x2, y2) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] distance -> Entering function.') } - return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] distance -> err= ' + err.stack) } @@ -893,8 +843,6 @@ function newFloatingLayer () { function resolveCollision (floatingObject1, floatingObject2) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] resolveCollision -> Entering function.') } - /* This function changes speed and position of floatingObjects that are in collision */ var collisionision_angle = Math.atan2((floatingObject2.container.frame.position.y - floatingObject1.container.frame.position.y), (floatingObject2.container.frame.position.x - floatingObject1.container.frame.position.x)) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 11557b0b0..4db202c68 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -11,6 +11,7 @@ function newFloatingObject () { let thisObject = { physics: physics, + positionLocked: 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. @@ -168,6 +169,8 @@ function newFloatingObject () { thisObject.targetFontSize = thisObject.rawFontSize * 2.0 thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver', point) + + thisObject.positionLocked = true } function onMouseNotOver (point) { @@ -176,6 +179,8 @@ function newFloatingObject () { thisObject.targetFontSize = thisObject.rawFontSize * 1 thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver', point) + + thisObject.positionLocked = false } function onMouseClick (pPoint) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 77747bc87..e7feb426b 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -399,7 +399,7 @@ function newStrategyPart () { if (label !== undefined) { labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius / 3 - fontSize * FONT_ASPECT_RATIO - 10 + y: position.y - radius * 1 / 2 - 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 / 3 + fontSize * FONT_ASPECT_RATIO + 15 + y: position.y + radius * 1 / 2 + fontSize * FONT_ASPECT_RATIO + 15 } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY From d0cb562b2b8ea0acba290191404331323c86c72b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 20:45:34 +0200 Subject: [PATCH 076/221] Target line shown again --- FloatingSpace/FloatingLayer.js | 8 ++++++-- FloatingSpace/FloatingObject.js | 1 - FloatingSpace/StrategyPart.js | 11 ++++------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 6208366ef..413ea80ec 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -910,8 +910,12 @@ function newFloatingLayer () { pos2.x = pos2.x - minTD.x * (im2 / (im1 + im2)) pos2.y = pos2.y - minTD.y * (im2 / (im1 + im2)) - floatingObject1.container.frame.position = pos1 - floatingObject2.container.frame.position = pos2 + if (floatingObject1.positionLocked === false) { + floatingObject1.container.frame.position = pos1 + } + if (floatingObject2.positionLocked === false) { + floatingObject2.container.frame.position = pos2 + } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] resolveCollision -> err= ' + err.stack) } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 4db202c68..12d00d38f 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -290,4 +290,3 @@ function newFloatingObject () { } } - diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index e7feb426b..d4c1f9a10 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -291,9 +291,8 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { - if (isMouseOver === false) { - drawPartBackground(pFloatingObject) - } + drawPartBackground(pFloatingObject) + thisObject.menu.drawBackground() } @@ -303,10 +302,8 @@ function newStrategyPart () { /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) - if (isMouseOver === false) { - pFloatingObject.payload.profile.position.x = parentFloatingObject.container.frame.position.x - pFloatingObject.payload.profile.position.y = parentFloatingObject.container.frame.position.y - } + pFloatingObject.payload.profile.position.x = parentFloatingObject.container.frame.position.x + pFloatingObject.payload.profile.position.y = parentFloatingObject.container.frame.position.y /* Here I continue painting the background */ From fb9448220b6c201010bdc334ba46ea79f035bae8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 20:51:49 +0200 Subject: [PATCH 077/221] Text Improved --- StrategySpace/StrategyCollectionItem.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 182338665..dc808e2dc 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -94,7 +94,7 @@ function newStrategyCollectionItem () { createPart('Strategy Entry', '', strategy.entryPoint, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] @@ -105,7 +105,7 @@ function newStrategyCollectionItem () { createPart('Strategy Exit', '', strategy.exitPoint, strategy) for (let k = 0; k < strategy.exitPoint.situations.length; k++) { let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] @@ -116,7 +116,7 @@ function newStrategyCollectionItem () { createPart('Trade Entry', '', strategy.sellPoint, strategy) for (let k = 0; k < strategy.sellPoint.situations.length; k++) { let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] From e6a462fd72f77d9b5eb2ef9f509b99c2048403f2 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 21:17:55 +0200 Subject: [PATCH 078/221] Ready for Click --- FloatingSpace/CircularMenuItem.js | 28 ++++++++++++++++------------ FloatingSpace/StrategyPart.js | 17 +++++++++++++---- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 83687751b..d04fa8ee5 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -79,7 +79,7 @@ function newCircularMenuItem () { } } - thisObject.container.frame.position.x = thisObject.container.frame.radius * 3 / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius + thisObject.container.frame.position.x = thisObject.container.frame.radius * 3 / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5 thisObject.container.frame.position.y = thisObject.container.frame.radius * 3 / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2 } @@ -108,24 +108,28 @@ function newCircularMenuItem () { position = thisObject.container.frame.frameThisPoint(position) - browserCanvasContext.beginPath() - - 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)' + let params = { + cornerRadius: 3, + lineWidth: 0.1, + container: thisObject.container, + borderColor: UI_COLOR.DARK, + backgroundColor: UI_COLOR.RED, + castShadow: false } - browserCanvasContext.closePath() - browserCanvasContext.fill() + if (isMouseOver === true) { + params.opacity = 1 + } else { + params.opacity = 0.8 + } + + roundedCornersBackground(params) } } function drawForeground () { let menuPosition = { - x: thisObject.currentRadius, + x: thisObject.currentRadius * 1.5, y: thisObject.container.frame.height / 2 } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index d4c1f9a10..30aa2b387 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -291,9 +291,13 @@ function newStrategyPart () { } function drawBackground (pFloatingObject) { - drawPartBackground(pFloatingObject) + if (isMouseOver === false) { + drawPartBackground(pFloatingObject) + thisObject.menu.drawBackground() - thisObject.menu.drawBackground() + drawPartForeground(pFloatingObject) + thisObject.menu.drawForeground() + } } function drawPartBackground (pFloatingObject) { @@ -339,8 +343,13 @@ function newStrategyPart () { } function drawForeground (pFloatingObject) { - drawPartForeground(pFloatingObject) - thisObject.menu.drawForeground() + if (isMouseOver === true) { + drawPartBackground(pFloatingObject) + thisObject.menu.drawBackground() + + drawPartForeground(pFloatingObject) + thisObject.menu.drawForeground() + } } function drawPartForeground (pFloatingObject) { From 17c2fb59d07fb8241f3209452357376563c13b73 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 08:53:59 +0200 Subject: [PATCH 079/221] low level BUG in Frame fixed --- FloatingSpace/CircularMenuItem.js | 13 ++----- Frame.js | 60 +++++++++++++++++++++++++------ 2 files changed, 53 insertions(+), 20 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index d04fa8ee5..f02a8ab08 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -24,8 +24,9 @@ function newCircularMenuItem () { thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) - thisObject.container.isClickeable = false + thisObject.container.isClickeable = true thisObject.container.isDraggeable = false + thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 @@ -96,18 +97,11 @@ function newCircularMenuItem () { } function onMouseClick (event) { - + console.log('Menu item clicked') } function drawBackground () { if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) { - let position = { - x: 0, - y: 0 - } - - position = thisObject.container.frame.frameThisPoint(position) - let params = { cornerRadius: 3, lineWidth: 0.1, @@ -160,4 +154,3 @@ function newCircularMenuItem () { } } } - diff --git a/Frame.js b/Frame.js index f46f70630..24eab5872 100644 --- a/Frame.js +++ b/Frame.js @@ -65,25 +65,65 @@ function newFrame () { } function frameThisPoint (point) { - if (thisObject.parentFrame !== undefined) { - point = thisObject.parentFrame.frameThisPoint(point) + /* We need not to modify the point received, so me make a copy of it. */ + + let checkPoint = { + x: point.x, + y: point.y } - point.x = point.x + thisObject.position.x - point.y = point.y + thisObject.position.y + let parentPoint = { + x: 0, + y: 0 + } - return point + let returnPoint = { + x: 0, + y: 0 + } + + if (thisObject.parentFrame !== undefined) { + parentPoint = thisObject.parentFrame.frameThisPoint(checkPoint) + + returnPoint.x = parentPoint.x + thisObject.position.x + returnPoint.y = parentPoint.y + thisObject.position.y + } else { + returnPoint.x = checkPoint.x + thisObject.position.x + returnPoint.y = checkPoint.y + thisObject.position.y + } + + return returnPoint } function unframeThisPoint (point) { - if (thisObject.parentFrame !== undefined) { - point = thisObject.parentFrame.unframeThisPoint(point) + /* We need not to modify the point received, so me make a copy of it. */ + + let checkPoint = { + x: point.x, + y: point.y } - point.x = point.x - thisObject.position.x - point.y = point.y - thisObject.position.y + let parentPoint = { + x: 0, + y: 0 + } - return point + let returnPoint = { + x: 0, + y: 0 + } + + if (thisObject.parentFrame !== undefined) { + parentPoint = thisObject.parentFrame.unframeThisPoint(checkPoint) + + returnPoint.x = parentPoint.x - thisObject.position.x + returnPoint.y = parentPoint.y - thisObject.position.y + } else { + returnPoint.x = checkPoint.x - thisObject.position.x + returnPoint.y = checkPoint.y - thisObject.position.y + } + + return returnPoint } function canYouMoveHere (tempDisplacement) { From 9dfd5f3e8d7cc26dff6030c55cc3dd0ced931959 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 09:20:23 +0200 Subject: [PATCH 080/221] Focus removed correctly --- FloatingSpace/FloatingObject.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 12d00d38f..13b2eced3 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -103,7 +103,10 @@ function newFloatingObject () { thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) - thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + + /* To consider that this object lost the focus, we monitor the space for 2 key events */ + canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) + canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { @@ -171,14 +174,25 @@ function newFloatingObject () { thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseOver', point) thisObject.positionLocked = true + canvas.floatingSpace.container.eventHandler.raiseEvent('onFocusAquired', thisObject.container) } - function onMouseNotOver (point) { + function mouseOverFlotingSpace (point) { + removeFocus() + } + + function someoneAquiredFocus (container) { + if (container.id !== thisObject.container.id) { + removeFocus() + } + } + + function removeFocus () { thisObject.targetRadius = thisObject.rawRadius * 1 thisObject.targetImageSize = thisObject.rawImageSize * 1 thisObject.targetFontSize = thisObject.rawFontSize * 1 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver', point) + thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseNotOver') thisObject.positionLocked = false } From fdaf32227812ee55eba4126786eda1df54a4c9b3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 10:41:14 +0200 Subject: [PATCH 081/221] 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 From 7de9979f56a1f13bde3667c598e355ea21f9490a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 12:17:42 +0200 Subject: [PATCH 082/221] payload properly shared --- FloatingSpace/CircularMenu.js | 6 ++++-- FloatingSpace/CircularMenuItem.js | 6 ++++-- FloatingSpace/FloatingObject.js | 2 +- FloatingSpace/StrategyPart.js | 6 ++++-- FloatingSpace/StrategyParts.js | 2 +- StrategySpace/StrategyCollectionItem.js | 11 +++++++---- 6 files changed, 21 insertions(+), 12 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index a54d3729b..9b46af711 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -22,10 +22,12 @@ function newCircularMenu () { let menuItemsInitialValues = [] let menuItems = [] + let payload return thisObject - function initialize (menuItemsInitialValues) { + function initialize (menuItemsInitialValues, pPayload) { + payload = pPayload /* Create the array of Menu Items */ for (let i = 0; i < menuItemsInitialValues.length; i++) { @@ -41,7 +43,7 @@ function newCircularMenu () { menuItem.currentRadius = menuItemInitialValue.currentRadius menuItem.angle = menuItemInitialValue.angle - menuItem.initialize() + menuItem.initialize(payload) menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) menuItems.push(menuItem) } diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index f0e7899f5..cf0df353e 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -34,10 +34,12 @@ function newCircularMenuItem () { thisObject.container.frame.height = 30 let isMouseOver = false + let payload return thisObject - function initialize () { + function initialize (pPayload) { + payload = pPayload /* Load Menu Images */ thisObject.iconOn = new Image() @@ -97,7 +99,7 @@ function newCircularMenuItem () { } function onMouseClick (event) { - console.log('Menu item clicked') + payload.onMenuItemClick(payload) } function drawBackground () { diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 30cccdf24..0e7cb7824 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -89,7 +89,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() - thisObject.underlayingObject.initialize(floatingLayer, pSubType) + thisObject.underlayingObject.initialize(floatingLayer, pSubType, thisObject.payload) thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) break } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 1602a60d4..3228c90ba 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -25,10 +25,12 @@ function newStrategyPart () { let floatingLayer let image let imagePath + let payload return thisObject - function initialize (pFloatingLayer, pType) { + function initialize (pFloatingLayer, pType, pPayload) { + payload = pPayload floatingLayer = pFloatingLayer let menuItemsInitialValues = [] @@ -239,7 +241,7 @@ function newStrategyPart () { } thisObject.menu = newCircularMenu() - thisObject.menu.initialize(menuItemsInitialValues) + thisObject.menu.initialize(menuItemsInitialValues, payload) thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) /* Load Part Image */ diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index da2a6bb88..9726c15a6 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -35,12 +35,12 @@ function newStrategyParts () { function createNewStrategyPart (type, pPayload, callBackFunction) { let floatingObject = newFloatingObject() + floatingObject.payload = pPayload floatingObject.initialize('Strategy Part', type, floatingLayer, onInitialized) floatingObject.underlayingObject.type = type function onInitialized (err) { const FRICTION = 0.97 - floatingObject.payload = pPayload switch (type) { case 'Strategy': { diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index dc808e2dc..a954d5868 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -50,6 +50,11 @@ function newStrategyCollectionItem () { } } + function onMenuItemClick (payload) { + console.log('onMenuItemClick') + payload.profile.upLabel = payload.profile.upLabel + '1' + } + function createPart (partType, name, node, parentNode, title) { let payload = { profile: { @@ -62,8 +67,6 @@ function newStrategyCollectionItem () { notes: [] } - let imageId // 'My Image.png' - if (title !== undefined) { payload.profile.upLabel = title } else { @@ -71,9 +74,9 @@ function newStrategyCollectionItem () { } payload.profile.downLabel = name + payload.node = node payload.parentNode = parentNode - - node.payload = payload + payload.onMenuItemClick = onMenuItemClick canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload, onStrategyPartCreated) From cf30ff38a2743b2cf3ad81bedb0c7745844412a3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 12:39:04 +0200 Subject: [PATCH 083/221] action added --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 3 ++- FloatingSpace/StrategyPart.js | 29 ++++++++++----------- StrategySpace/StrategyCollectionItem.js | 34 +++++++++++++++++++++++-- 4 files changed, 49 insertions(+), 18 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 9b46af711..6c2af8b94 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -34,6 +34,7 @@ function newCircularMenu () { let menuItem = newCircularMenuItem() let menuItemInitialValue = menuItemsInitialValues[i] + menuItem.action = menuItemInitialValue.action menuItem.label = menuItemInitialValue.label menuItem.visible = menuItemInitialValue.visible menuItem.imagePathOn = menuItemInitialValue.imagePathOn diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index cf0df353e..4e63c5af7 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -6,6 +6,7 @@ function newCircularMenuItem () { isDeployed: undefined, iconOn: undefined, iconOff: undefined, + action: undefined, label: undefined, visible: false, imagePathOn: undefined, @@ -99,7 +100,7 @@ function newCircularMenuItem () { } function onMouseClick (event) { - payload.onMenuItemClick(payload) + payload.onMenuItemClick(payload, action) } function drawBackground () { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 3228c90ba..f271c77b4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -39,6 +39,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/quality.png' menuItemsInitialValues = [ { + action: 'Open Settings', label: 'Settings', visible: false, imagePathOn: 'Images/icons/style-01/tools.png', @@ -49,6 +50,7 @@ function newStrategyPart () { angle: 20 }, { + action: 'Delete Strategy', label: 'Delete This Strategy', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -64,6 +66,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/startup.png' menuItemsInitialValues = [ { + action: 'Add Situation', label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -79,6 +82,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/support.png' menuItemsInitialValues = [ { + action: 'Add Situation', label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -94,21 +98,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/compass.png' menuItemsInitialValues = [ { - label: 'Add Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Trade Exit': { - imagePath = 'Images/icons/style-01/broken-link.png' - menuItemsInitialValues = [ - { + action: 'Add Situation', label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -124,6 +114,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/pixel.png' menuItemsInitialValues = [ { + action: 'Add Phase', label: 'Add Phase', visible: false, imagePathOn: 'Images/icons/style-01/placeholder.png', @@ -139,6 +130,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/competition.png' menuItemsInitialValues = [ { + action: 'Add Phase', label: 'Add Phase', visible: false, imagePathOn: 'Images/icons/style-01/placeholder.png', @@ -154,6 +146,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/placeholder.png' menuItemsInitialValues = [ { + action: 'Edit Code', label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', @@ -164,6 +157,7 @@ function newStrategyPart () { angle: 40 }, { + action: 'Add Situation', label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -174,6 +168,7 @@ function newStrategyPart () { angle: 0 }, { + action: 'Delete Phase', label: 'Delete This Phase', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -189,6 +184,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/attractive.png' menuItemsInitialValues = [ { + action: 'Add Condition', label: 'Add Condition', visible: false, imagePathOn: 'Images/icons/style-01/testing.png', @@ -199,6 +195,7 @@ function newStrategyPart () { angle: 20 }, { + action: 'Delete Situation', label: 'Delete This Situation', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -214,6 +211,7 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/testing.png' menuItemsInitialValues = [ { + action: 'Edit Code', label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', @@ -224,6 +222,7 @@ function newStrategyPart () { angle: 20 }, { + action: 'Delete Condition', label: 'Delete This Condition', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index a954d5868..a7cf84372 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -50,8 +50,38 @@ function newStrategyCollectionItem () { } } - function onMenuItemClick (payload) { - console.log('onMenuItemClick') + function onMenuItemClick (payload, action) { + console.log('onMenuItemClick ' + action) + + switch (action) { + case 'Open Settings': + + break + case 'Delete Strategy': + + break + case 'Add Situation': + + break + case 'Add Phase': + + break + case 'Edit Code': + + break + case 'Delete Phase': + + break + case 'Delete Situation': + + break + case 'Delete Condition': + + break + default: + + } + payload.profile.upLabel = payload.profile.upLabel + '1' } From 29aed3f4a227884c4d9570ab7ad1d65b453b81a4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 13:41:22 +0200 Subject: [PATCH 084/221] Deleting sutuation without removing floating object --- FloatingSpace/CircularMenuItem.js | 3 ++- StrategySpace/StrategyCollectionItem.js | 9 ++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 4e63c5af7..4be819d05 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -100,7 +100,7 @@ function newCircularMenuItem () { } function onMouseClick (event) { - payload.onMenuItemClick(payload, action) + payload.onMenuItemClick(payload, thisObject.action) } function drawBackground () { @@ -157,3 +157,4 @@ function newCircularMenuItem () { } } } + diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index a7cf84372..957d8652f 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -73,7 +73,13 @@ function newStrategyCollectionItem () { break case 'Delete Situation': - + for (let i = 0; i < payload.parentNode.situations.length; i++) { + let situation = payload.parentNode.situations[i] + if (situation.name === payload.node.name) { + payload.parentNode.situations.splice(i) + return + } + } break case 'Delete Condition': @@ -396,3 +402,4 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } + From f70292fd1f3285f74c3abc73d25549d5b43f3d1e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 14:01:34 +0200 Subject: [PATCH 085/221] profile deleted from payload --- FloatingSpace/FloatingLayer.js | 16 ++++++++-------- FloatingSpace/ProfileBall.js | 4 ++-- FloatingSpace/StrategyPart.js | 12 ++++++------ StrategySpace/StrategyCollectionItem.js | 19 +++++++------------ 4 files changed, 23 insertions(+), 28 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 413ea80ec..95f18f03f 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -227,8 +227,8 @@ function newFloatingLayer () { payload.profile = { position: { - x: pFloatingObject.payload.profile.position.x, - y: pFloatingObject.payload.profile.position.y + x: pFloatingObject.payload.position.x, + y: pFloatingObject.payload.position.y }, visible: pFloatingObject.payload.profile.visible, botAvatar: pFloatingObject.payload.profile.botAvatar @@ -350,8 +350,8 @@ function newFloatingLayer () { break } case 'Strategy Part': { - payload.position = floatingObject.payload.profile.position - payload.visible = floatingObject.payload.profile.visible + payload.position = floatingObject.payload.position + payload.visible = floatingObject.payload.visible break } default: { @@ -402,7 +402,7 @@ function newFloatingLayer () { break } case 'Strategy Part': { - payload.visible = floatingObject.payload.profile.visible + payload.visible = floatingObject.payload.visible break } default: { @@ -502,8 +502,8 @@ function newFloatingLayer () { break } case 'Strategy Part': { - payload.position = floatingObject.payload.profile.position - payload.visible = floatingObject.payload.profile.visible + payload.position = floatingObject.payload.position + payload.visible = floatingObject.payload.visible break } default: { @@ -736,7 +736,7 @@ function newFloatingLayer () { break } case 'Strategy Part': { - payload.position = floatingObject2.payload.profile.position + payload.position = floatingObject2.payload.position break } default: { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 32a2c9b73..2e8c5c526 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -183,8 +183,8 @@ function newProfileBall () { function drawBackground (pFloatingObject) { let point = { - x: pFloatingObject.payload.profile.position.x, - y: pFloatingObject.payload.profile.position.y + x: pFloatingObject.payload.position.x, + y: pFloatingObject.payload.position.y } point = viewPort.fitIntoVisibleArea(point) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index f271c77b4..cda32802d 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -305,14 +305,14 @@ function newStrategyPart () { /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) - pFloatingObject.payload.profile.position.x = parentFloatingObject.container.frame.position.x - pFloatingObject.payload.profile.position.y = parentFloatingObject.container.frame.position.y + pFloatingObject.payload.position.x = parentFloatingObject.container.frame.position.x + pFloatingObject.payload.position.y = parentFloatingObject.container.frame.position.y /* Here I continue painting the background */ let point = { - x: pFloatingObject.payload.profile.position.x, - y: pFloatingObject.payload.profile.position.y + x: pFloatingObject.payload.position.x, + y: pFloatingObject.payload.position.y } if (pFloatingObject.container.frame.radius > 1) { @@ -399,7 +399,7 @@ function newStrategyPart () { let label - label = pFloatingObject.payload.profile.upLabel + label = pFloatingObject.payload.upLabel if (label !== undefined) { labelPoint = { @@ -412,7 +412,7 @@ function newStrategyPart () { browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } - label = pFloatingObject.payload.profile.downLabel + label = pFloatingObject.payload.downLabel if (label !== undefined && thisObject.isOnFocus === true) { labelPoint = { diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 957d8652f..928a3b384 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -87,29 +87,24 @@ function newStrategyCollectionItem () { default: } - - payload.profile.upLabel = payload.profile.upLabel + '1' } function createPart (partType, name, node, parentNode, title) { let payload = { - profile: { - position: { - x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, - y: viewPort.height / 2 - }, - visible: true + position: { + x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, + y: viewPort.height / 2 }, - notes: [] + visible: true } if (title !== undefined) { - payload.profile.upLabel = title + payload.upLabel = title } else { - payload.profile.upLabel = partType + payload.upLabel = partType } - payload.profile.downLabel = name + payload.downLabel = name payload.node = node payload.parentNode = parentNode payload.onMenuItemClick = onMenuItemClick From 29a349b50d5d0094d59943597efb8e7a05b656ce Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 14:10:06 +0200 Subject: [PATCH 086/221] Cleaning Floating Object --- FloatingSpace/FloatingObject.js | 38 ++++++--------------------------- 1 file changed, 7 insertions(+), 31 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 0e7cb7824..4ec78d3b8 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -9,54 +9,31 @@ function newFloatingObject () { logger.fileName = MODULE_NAME let thisObject = { - - 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. underlayingObject: undefined, - - physicsEnabled: false, - + currentSpeed: 0, // This is the current speed of the floating object. + currentMass: 0, // This is the current mass of the floating object, including its zoom applied. + friction: 0, // This is a factor that will ultimatelly desacelerate the floating object. + rawMass: 0, // This is the mass value without zoom. + rawRadius: 0, // This is the radius of this floating object without zoom. + targetRadius: 0, // This is the target radius of the floating object with zoom applied. It should be animated until reaching this value. + physics: physics, initializeMass: initializeMass, initializeRadius: initializeRadius, initializeImageSize: initializeImageSize, initializeFontSize: initializeFontSize, - - imageId: undefined, - - currentSpeed: 0, // This is the current speed of the floating object. - currentMass: 0, // This is the current mass of the floating object, including its zoom applied. - - friction: 0, // This is a factor that will ultimatelly desacelerate the floating object. - - rawMass: 0, // This is the mass value without zoom. - rawRadius: 0, // This is the radius of this floating object without zoom. - - targetRadius: 0, // This is the target radius of the floating object with zoom applied. It should be animated until reaching this value. - - fillStyle: '', - - labelStrokeStyle: '', - radomizeCurrentPosition: radomizeCurrentPosition, radomizeCurrentSpeed: radomizeCurrentSpeed, - drawBackground: drawBackground, drawForeground: drawForeground, - updateMass: updateMass, // Function to update the mass when the zoom level changed. updateRadius: updateRadius, // Function to update the radius when the zoom level changed. - - linkedObject: undefined, // This is a reference to the object that this floating object is representing. - linkedObjectType: '', // Since there might be floating objects for different types of objects, here we store the type of object we are linking to. - getContainer: getContainer, container: undefined, initialize: initialize - } thisObject.container = newContainer() @@ -312,4 +289,3 @@ function newFloatingObject () { } } - From 297d2d500feb8249fff58ed9801a6812dad2c0b7 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 14:39:30 +0200 Subject: [PATCH 087/221] Simplifying Code --- FloatingSpace/FloatingObject.js | 74 ++++---- FloatingSpace/NoteSets.js | 42 +++-- FloatingSpace/ProfileBalls.js | 24 ++- FloatingSpace/StrategyParts.js | 215 ++++++++++++------------ StrategySpace/StrategyCollectionItem.js | 6 +- 5 files changed, 164 insertions(+), 197 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 4ec78d3b8..ccff86ceb 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -1,8 +1,6 @@ function newFloatingObject () { const MODULE_NAME = 'Floating Object' - const INFO_LOG = false - const INTENSIVE_LOG = false const ERROR_LOG = true const logger = newWebDebugLog() @@ -47,50 +45,41 @@ function newFloatingObject () { return thisObject - function initialize (pType, pSubType, floatingLayer, callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + function initialize (pType, pSubType, floatingLayer) { + switch (pType) { - switch (pType) { - - case 'Profile Ball': { - thisObject.underlayingObject = newProfileBall() - thisObject.underlayingObject.initialize() - break - } - case 'Note': { - thisObject.underlayingObject = newNote() - thisObject.underlayingObject.initialize() - break - } - - case 'Strategy Part': { - thisObject.underlayingObject = newStrategyPart() - thisObject.underlayingObject.initialize(floatingLayer, pSubType, thisObject.payload) - thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) - break - } - default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Unsopported type received -> pType = ' + pType) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - break - } + case 'Profile Ball': { + thisObject.underlayingObject = newProfileBall() + thisObject.underlayingObject.initialize() + break + } + case 'Note': { + thisObject.underlayingObject = newNote() + thisObject.underlayingObject.initialize() + break } - thisObject.type = pType + case 'Strategy Part': { + thisObject.underlayingObject = newStrategyPart() + thisObject.underlayingObject.initialize(floatingLayer, pSubType, thisObject.payload) + thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Unsopported type received -> pType = ' + pType) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + break + } + } - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.type = pType + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) /* To consider that this object lost the focus, we monitor the space for 2 key events */ - canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) - canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) - - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err= ' + err.stack) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } - } + canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) + canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) } function getContainer (point) { @@ -279,13 +268,8 @@ function newFloatingObject () { function updateMass () { - // thisObject.currentMass = thisObject.rawMass + thisObject.rawMass * thisObject.container.zoom.incrementM * thisObject.container.zoom.levelM; - } function updateRadius () { - - // thisObject.targetRadius = thisObject.rawRadius + thisObject.rawRadius * thisObject.container.zoom.incrementR * thisObject.container.zoom.levelR; - } } diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index c10eb6121..50a2f7c3b 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -225,21 +225,18 @@ function newNoteSets () { */ let floatingObject = newFloatingObject() - floatingObject.initialize('Note', '', floatingLayer, onInitialized) + floatingObject.initialize('Note', '', floatingLayer) - function onInitialized (err) { - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Entering function.') } + floatingObject.payload = noteSet.payload + floatingObject.payloadNoteIndex = i + floatingObject.payloadImageId = noteSet.imageId - floatingObject.payload = noteSet.payload - floatingObject.payloadNoteIndex = i - floatingObject.payloadImageId = noteSet.imageId + floatingObject.friction = 0.995 - floatingObject.friction = 0.995 - - floatingObject.initializeMass(200) + floatingObject.initializeMass(200) // let bodyText = pNewNotes[i].body; - let radius + let radius /* if (bodyText.length < 100) { @@ -248,27 +245,26 @@ function newNoteSets () { radius = bodyText.length; } */ - radius = 50 + radius = 50 - floatingObject.initializeRadius(radius) - floatingObject.initializeImageSize(15) + floatingObject.initializeRadius(radius) + floatingObject.initializeImageSize(15) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' - floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' + floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' - floatingLayer.addFloatingObject(floatingObject) + floatingLayer.addFloatingObject(floatingObject) - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> New Note added to Layer.') } + if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> New Note added to Layer.') } - plotterNote.floatingHandle = floatingObject.handle + plotterNote.floatingHandle = floatingObject.handle - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> plotterNote.floatingHandle = ' + plotterNote.floatingHandle) } + if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> plotterNote.floatingHandle = ' + plotterNote.floatingHandle) } - newFloatingNotes.push(plotterNote) + newFloatingNotes.push(plotterNote) - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Added to newFloatingNotes.') } - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> newFloatingNotes.length = ' + newFloatingNotes.length) } - } + if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Added to newFloatingNotes.') } + if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> newFloatingNotes.length = ' + newFloatingNotes.length) } } else { newFloatingNotes.push(floatingNote) diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 136e6d9be..98d4de498 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -36,25 +36,23 @@ function newProfileBalls () { function createNewProfileBall (pPayload, callBackFunction) { let floatingObject = newFloatingObject() - floatingObject.initialize('Profile Ball', '', floatingLayer, onInitialized) + floatingObject.initialize('Profile Ball', '', floatingLayer) - function onInitialized (err) { - floatingObject.payload = pPayload + floatingObject.payload = pPayload - floatingObject.friction = 0.995 + floatingObject.friction = 0.995 - floatingObject.initializeMass(100) - floatingObject.initializeRadius(30) - floatingObject.initializeImageSize(50) - floatingObject.initializeFontSize(10) + floatingObject.initializeMass(100) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) + floatingObject.initializeFontSize(10) - floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' - floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' + floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' - floatingLayer.addFloatingObject(floatingObject) + floatingLayer.addFloatingObject(floatingObject) - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE, floatingObject.handle) - } + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE, floatingObject.handle) } function destroyProfileBall (pFloatingObjectHandle) { diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 9726c15a6..9f08b849a 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -5,12 +5,6 @@ function newStrategyParts () { const logger = newWebDebugLog() logger.fileName = MODULE_NAME - /* - - This object deals with Strategy Parts, a type of Floating Object that shows together with other parts a graphical representation of a strategy. - - */ - let thisObject = { createNewStrategyPart: createNewStrategyPart, @@ -33,122 +27,121 @@ function newStrategyParts () { floatingLayer = pFloatingLayer } - function createNewStrategyPart (type, pPayload, callBackFunction) { + function createNewStrategyPart (type, pPayload) { let floatingObject = newFloatingObject() floatingObject.payload = pPayload - floatingObject.initialize('Strategy Part', type, floatingLayer, onInitialized) - floatingObject.underlayingObject.type = type + floatingObject.initialize('Strategy Part', type, floatingLayer) + floatingObject.underlayingObject.type = type // after initialize - function onInitialized (err) { - const FRICTION = 0.97 + const FRICTION = 0.97 - switch (type) { - case 'Strategy': { - level_1() - break - } - case 'Strategy Entry': { - level_2() - break - } - case 'Strategy Exit': { - level_2() - break - } - case 'Trade Entry': { - level_2() - break - } - case 'Trade Exit': { - level_2() - break - } - case 'Stop': { - level_2() - break - } - case 'Take Profit': { - level_2() - break - } - case 'Phase': { - level_3() - break - } - case 'Situation': { - level_4() - break - } - case 'Condition': { - level_5() - break - } - default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + type) } - } + switch (type) { + case 'Strategy': { + level_1() + break } - - function level_1 () { - floatingObject.friction = FRICTION - - floatingObject.initializeMass(100) - floatingObject.initializeRadius(45) - floatingObject.initializeImageSize(80) - floatingObject.initializeFontSize(10) - - floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + case 'Strategy Entry': { + level_2() + break } - - function level_2 () { - floatingObject.friction = FRICTION - - floatingObject.initializeMass(50) - floatingObject.initializeRadius(40) - floatingObject.initializeImageSize(70) - floatingObject.initializeFontSize(10) - - floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' + case 'Strategy Exit': { + level_2() + break } - - function level_3 () { - floatingObject.friction = FRICTION - - floatingObject.initializeMass(10) - floatingObject.initializeRadius(35) - floatingObject.initializeImageSize(60) - floatingObject.initializeFontSize(10) - - floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' + case 'Trade Entry': { + level_2() + break } - - function level_4 () { - floatingObject.friction = FRICTION - - floatingObject.initializeMass(10) - floatingObject.initializeRadius(30) - floatingObject.initializeImageSize(50) - floatingObject.initializeFontSize(10) - - floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)' + case 'Trade Exit': { + level_2() + break } - - function level_5 () { - floatingObject.friction = FRICTION - - floatingObject.initializeMass(10) - floatingObject.initializeRadius(25) - floatingObject.initializeImageSize(30) - floatingObject.initializeFontSize(10) - - floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' + case 'Stop': { + level_2() + break + } + case 'Take Profit': { + level_2() + break + } + case 'Phase': { + level_3() + break + } + case 'Situation': { + level_4() + break + } + case 'Condition': { + level_5() + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + type) } + return } - - floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - - floatingLayer.addFloatingObject(floatingObject) - - callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, floatingObject.handle) } + + function level_1 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(100) + floatingObject.initializeRadius(45) + floatingObject.initializeImageSize(80) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + } + + function level_2 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(50) + floatingObject.initializeRadius(40) + floatingObject.initializeImageSize(70) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)' + } + + function level_3 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(35) + floatingObject.initializeImageSize(60) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)' + } + + function level_4 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)' + } + + function level_5 () { + floatingObject.friction = FRICTION + + floatingObject.initializeMass(10) + floatingObject.initializeRadius(25) + floatingObject.initializeImageSize(30) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' + } + + floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + + floatingLayer.addFloatingObject(floatingObject) + + return floatingObject.handle } function destroyStrategyPart (pFloatingObjectHandle) { diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 928a3b384..7767eb20c 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -109,11 +109,7 @@ function newStrategyCollectionItem () { payload.parentNode = parentNode payload.onMenuItemClick = onMenuItemClick - canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload, onStrategyPartCreated) - - function onStrategyPartCreated (err, pPartHandle) { - node.handle = pPartHandle - } + node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) } function destroyPart (node) { From 8feb3cd401b5a1ae7851adbd28803c51d7eee857 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 15:07:51 +0200 Subject: [PATCH 088/221] Strategy Object Implemented --- StrategySpace/Strategy.js | 261 ++++++++++++++++++++++++ StrategySpace/StrategyCollection.js | 3 +- StrategySpace/StrategyCollectionItem.js | 237 +-------------------- 3 files changed, 271 insertions(+), 230 deletions(-) create mode 100644 StrategySpace/Strategy.js diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js new file mode 100644 index 000000000..be7a830b4 --- /dev/null +++ b/StrategySpace/Strategy.js @@ -0,0 +1,261 @@ + +function newStrategy () { + const MODULE_NAME = 'Strategy' + + let thisObject = { + strategySource: undefined, + container: undefined, + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false + thisObject.container.detectMouseOver = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + thisObject.container.frame.width = 0 + thisObject.container.frame.height = 0 + + return thisObject + + function finalize () { + destroyStrategyParts() + } + + function initialize (pStrategySource) { + thisObject.strategySource = pStrategySource + generateStrategyParts() + } + + function getContainer (point) { + + } + + function createPart (partType, name, node, parentNode, title) { + let payload = { + position: { + x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, + y: viewPort.height / 2 + }, + visible: true + } + + if (title !== undefined) { + payload.upLabel = title + } else { + payload.upLabel = partType + } + + payload.downLabel = name + payload.node = node + payload.parentNode = parentNode + payload.onMenuItemClick = onMenuItemClick + + node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) + } + + function destroyPart (node) { + canvas.floatingSpace.strategyParts.destroyStrategyPart(node.handle) + } + + function generateStrategyParts () { + let lastPhase + let strategy = thisObject.strategySource + createPart('Strategy', strategy.name, strategy, undefined) + + createPart('Strategy Entry', '', strategy.entryPoint, strategy) + for (let k = 0; k < strategy.entryPoint.situations.length; k++) { + let situation = strategy.entryPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + } + } + + createPart('Strategy Exit', '', strategy.exitPoint, strategy) + for (let k = 0; k < strategy.exitPoint.situations.length; k++) { + let situation = strategy.exitPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + } + } + + createPart('Trade Entry', '', strategy.sellPoint, strategy) + for (let k = 0; k < strategy.sellPoint.situations.length; k++) { + let situation = strategy.sellPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + } + } + + createPart('Stop', '', strategy.stopLoss, strategy) + for (let p = 0; p < strategy.stopLoss.phases.length; p++) { + let phase = strategy.stopLoss.phases[p] + + let parent + if (p === 0) { + parent = strategy.stopLoss + } else { + parent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' #' + (p + 1)) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + } + } + } + + createPart('Take Profit', '', strategy.buyOrder, strategy) + for (let p = 0; p < strategy.buyOrder.phases.length; p++) { + let phase = strategy.buyOrder.phases[p] + let parent + if (p === 0) { + parent = strategy.buyOrder + } else { + parent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' #' + (p + 1)) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + } + } + } + } + + function destroyStrategyParts () { + let strategy = thisObject.strategySource + destroyPart(strategy) + + destroyPart(strategy.entryPoint) + for (let k = 0; k < strategy.entryPoint.situations.length; k++) { + let situation = strategy.entryPoint.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + + destroyPart(strategy.exitPoint) + for (let k = 0; k < strategy.exitPoint.situations.length; k++) { + let situation = strategy.exitPoint.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + + destroyPart(strategy.sellPoint) + for (let k = 0; k < strategy.sellPoint.situations.length; k++) { + let situation = strategy.sellPoint.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + + destroyPart(strategy.stopLoss) + for (let p = 0; p < strategy.stopLoss.phases.length; p++) { + let phase = strategy.stopLoss.phases[p] + destroyPart(strategy.stopLoss) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + } + + destroyPart(strategy.buyOrder) + for (let p = 0; p < strategy.buyOrder.phases.length; p++) { + let phase = strategy.buyOrder.phases[p] + destroyPart(strategy.buyOrder) + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + destroyPart(situation) + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + destroyPart(condition) + } + } + } + } + + function onMenuItemClick (payload, action) { + console.log('onMenuItemClick ' + action) + + switch (action) { + case 'Open Settings': + + break + case 'Delete Strategy': + + break + case 'Add Situation': + + break + case 'Add Phase': + + break + case 'Edit Code': + + break + case 'Delete Phase': + + break + case 'Delete Situation': + for (let i = 0; i < payload.parentNode.situations.length; i++) { + let situation = payload.parentNode.situations[i] + if (situation.name === payload.node.name) { + payload.parentNode.situations.splice(i) + return + } + } + break + case 'Delete Condition': + + break + default: + + } + } +} diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index 2069ae1dc..0713e7918 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -215,8 +215,7 @@ function newStrategyCollection () { let collectionItem = newStrategyCollectionItem() collectionItem.container.connectToParent(thisObject.container, false, false) - collectionItem.initialize() - collectionItem.strategy = strategy + collectionItem.initialize(strategy) collectionItem.container.frame.position.y = i * ITEMS_SEPARATION + TOP_MARGIN colletionItems.push(collectionItem) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 7767eb20c..01b8b9f90 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -2,6 +2,7 @@ function newStrategyCollectionItem () { const MODULE_NAME = 'Strategy Collection Item' let thisObject = { icon: undefined, + strategySource: undefined, strategy: undefined, container: undefined, draw: draw, @@ -21,7 +22,9 @@ function newStrategyCollectionItem () { return thisObject - function initialize () { + function initialize (strategy) { + thisObject.strategySource = strategy + const ITEM_WIDTH = SIDE_PANEL_WIDTH - 20 const ITEM_HEIGHT = 80 @@ -41,237 +44,16 @@ function newStrategyCollectionItem () { function onMouseClick (event) { if (status === 'off') { canvas.floatingSpace.makeVisible() - generateStrategyParts() + thisObject.strategy = newStrategy() + thisObject.strategy.initialize(thisObject.strategySource) status = 'on' } else { canvas.floatingSpace.makeInvisible() - destroyStrategyParts() + thisObject.strategy.finalize() status = 'off' } } - function onMenuItemClick (payload, action) { - console.log('onMenuItemClick ' + action) - - switch (action) { - case 'Open Settings': - - break - case 'Delete Strategy': - - break - case 'Add Situation': - - break - case 'Add Phase': - - break - case 'Edit Code': - - break - case 'Delete Phase': - - break - case 'Delete Situation': - for (let i = 0; i < payload.parentNode.situations.length; i++) { - let situation = payload.parentNode.situations[i] - if (situation.name === payload.node.name) { - payload.parentNode.situations.splice(i) - return - } - } - break - case 'Delete Condition': - - break - default: - - } - } - - function createPart (partType, name, node, parentNode, title) { - let payload = { - position: { - x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, - y: viewPort.height / 2 - }, - visible: true - } - - if (title !== undefined) { - payload.upLabel = title - } else { - payload.upLabel = partType - } - - payload.downLabel = name - payload.node = node - payload.parentNode = parentNode - payload.onMenuItemClick = onMenuItemClick - - node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) - } - - function destroyPart (node) { - canvas.floatingSpace.strategyParts.destroyStrategyPart(node.handle) - } - - function generateStrategyParts () { - let lastPhase - let strategy = thisObject.strategy - createPart('Strategy', strategy.name, strategy, undefined) - - createPart('Strategy Entry', '', strategy.entryPoint, strategy) - for (let k = 0; k < strategy.entryPoint.situations.length; k++) { - let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) - } - } - - createPart('Strategy Exit', '', strategy.exitPoint, strategy) - for (let k = 0; k < strategy.exitPoint.situations.length; k++) { - let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) - } - } - - createPart('Trade Entry', '', strategy.sellPoint, strategy) - for (let k = 0; k < strategy.sellPoint.situations.length; k++) { - let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) - } - } - - createPart('Stop', '', strategy.stopLoss, strategy) - for (let p = 0; p < strategy.stopLoss.phases.length; p++) { - let phase = strategy.stopLoss.phases[p] - - let parent - if (p === 0) { - parent = strategy.stopLoss - } else { - parent = lastPhase - } - lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' #' + (p + 1)) - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) - } - } - } - - createPart('Take Profit', '', strategy.buyOrder, strategy) - for (let p = 0; p < strategy.buyOrder.phases.length; p++) { - let phase = strategy.buyOrder.phases[p] - let parent - if (p === 0) { - parent = strategy.buyOrder - } else { - parent = lastPhase - } - lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' #' + (p + 1)) - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) - } - } - } - } - - function destroyStrategyParts () { - let strategy = thisObject.strategy - destroyPart(strategy) - - destroyPart(strategy.entryPoint) - for (let k = 0; k < strategy.entryPoint.situations.length; k++) { - let situation = strategy.entryPoint.situations[k] - destroyPart(situation) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - destroyPart(condition) - } - } - - destroyPart(strategy.exitPoint) - for (let k = 0; k < strategy.exitPoint.situations.length; k++) { - let situation = strategy.exitPoint.situations[k] - destroyPart(situation) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - destroyPart(condition) - } - } - - destroyPart(strategy.sellPoint) - for (let k = 0; k < strategy.sellPoint.situations.length; k++) { - let situation = strategy.sellPoint.situations[k] - destroyPart(situation) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - destroyPart(condition) - } - } - - destroyPart(strategy.stopLoss) - for (let p = 0; p < strategy.stopLoss.phases.length; p++) { - let phase = strategy.stopLoss.phases[p] - destroyPart(strategy.stopLoss) - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - destroyPart(situation) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - destroyPart(condition) - } - } - } - - destroyPart(strategy.buyOrder) - for (let p = 0; p < strategy.buyOrder.phases.length; p++) { - let phase = strategy.buyOrder.phases[p] - destroyPart(strategy.buyOrder) - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - destroyPart(situation) - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - destroyPart(condition) - } - } - } - } - function getContainer (point) { let container if (thisObject.container.frame.isThisPointHere(point, true) === true) { @@ -291,14 +73,14 @@ function newStrategyCollectionItem () { } function text () { - if (thisObject.strategy === undefined) { + if (thisObject.strategySource === undefined) { return } const LEFT_MARGIN = 80 const TOP_MARGIN = 45 - let strategy = thisObject.strategy + let strategy = thisObject.strategySource let labelpoint = { x: LEFT_MARGIN, @@ -393,4 +175,3 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } - From 28cfb393d8beefbcb9b35a25da10bd2538b5144c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 16:42:09 +0200 Subject: [PATCH 089/221] Conditions and Situations being deleted, but buggy --- FloatingSpace/FloatingLayer.js | 17 +++--------- StrategySpace/Strategy.js | 47 ++++++++++++++++++++++++++-------- 2 files changed, 41 insertions(+), 23 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 95f18f03f..9f3cab8a1 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -130,18 +130,12 @@ function newFloatingLayer () { at each of the arrays until we find it. Once found, we remove it and is sent to the dying floating objects array. */ - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> Entering function.') } - for (let i = 0; i < invisibleFloatingObjects.length; i++) { let floatingObject = invisibleFloatingObjects[i] if (floatingObject.handle === pFloatingObjectHandle) { invisibleFloatingObjects.splice(i, 1) // Delete item from array. - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> floatingObject.handle = ' + floatingObject.handle) } - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> Removing floatingObject from invisibleFloatingObjects.') } - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - sendToDie(floatingObject) return } @@ -153,10 +147,6 @@ function newFloatingLayer () { if (floatingObject.handle === pFloatingObjectHandle) { visibleFloatingObjects.splice(i, 1) // Delete item from array. - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> floatingObject.handle = ' + floatingObject.handle) } - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> Removing floatingObject from visibleFloatingObjects.') } - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> visibleFloatingObjects.length = ' + visibleFloatingObjects.length) } - sendToDie(floatingObject) return } @@ -223,15 +213,15 @@ function newFloatingLayer () { break } case 'Strategy Part': { - if (pFloatingObject.payload.profile.visible === false) { return } + if (pFloatingObject.payload.visible === false) { return } payload.profile = { position: { x: pFloatingObject.payload.position.x, y: pFloatingObject.payload.position.y }, - visible: pFloatingObject.payload.profile.visible, - botAvatar: pFloatingObject.payload.profile.botAvatar + visible: pFloatingObject.payload.visible, + botAvatar: pFloatingObject.payload.botAvatar } pFloatingObject.payload = payload @@ -921,3 +911,4 @@ function newFloatingLayer () { } } } + diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index be7a830b4..156c2bed3 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -58,6 +58,7 @@ function newStrategy () { payload.onMenuItemClick = onMenuItemClick node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) + node.payload = payload } function destroyPart (node) { @@ -242,20 +243,46 @@ function newStrategy () { case 'Delete Phase': break - case 'Delete Situation': - for (let i = 0; i < payload.parentNode.situations.length; i++) { - let situation = payload.parentNode.situations[i] - if (situation.name === payload.node.name) { - payload.parentNode.situations.splice(i) - return - } - } + case 'Delete Situation': { + deleteSituation(payload.node) break - case 'Delete Condition': - + } break + case 'Delete Condition': { + deleteCondition(payload.node) + break + } default: } } + + function deleteSituation (node) { + let payload = node.payload + for (let j = 0; j < payload.parentNode.situations.length; j++) { + let situation = payload.parentNode.situations[j] + if (situation.name === node.name) { + for (let i = 0; i < situation.conditions.length; i++) { + let condition = situation.conditions[i] + destroyPart(condition) + } + payload.parentNode.situations.splice(j) + destroyPart(node) + return + } + } + } + + function deleteCondition (node) { + let payload = node.payload + for (let i = 0; i < payload.parentNode.conditions.length; i++) { + let condition = payload.parentNode.conditions[i] + if (condition.name === node.name) { + payload.parentNode.conditions.splice(i) + destroyPart(node) + return + } + } + } } + From cf3097d62e85d84bda7a8caabe0c88596354ac68 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 16:58:56 +0200 Subject: [PATCH 090/221] cleanNode --- StrategySpace/Strategy.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 156c2bed3..8d675f59d 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -265,9 +265,12 @@ function newStrategy () { for (let i = 0; i < situation.conditions.length; i++) { let condition = situation.conditions[i] destroyPart(condition) + cleanNode(condition) } + situation.conditions = [] + destroyPart(situation) payload.parentNode.situations.splice(j) - destroyPart(node) + cleanNode(situation) return } } @@ -278,11 +281,25 @@ function newStrategy () { for (let i = 0; i < payload.parentNode.conditions.length; i++) { let condition = payload.parentNode.conditions[i] if (condition.name === node.name) { - payload.parentNode.conditions.splice(i) destroyPart(node) + payload.parentNode.conditions.splice(i) + cleanNode(condition) return } } } + + function cleanNode (node) { + node.payload.position.x = undefined + node.payload.position.y = undefined + node.payload.visible = undefined + node.payload.upLabel = undefined + node.payload.downLabel = undefined + node.payload.node = undefined + node.payload.parentNode = undefined + node.payload.onMenuItemClick = undefined + node.handle = undefined + node.payload = undefined + } } From 7a571383ecbdd1864bf331c9f3f177fa8384d3a1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 18:12:42 +0200 Subject: [PATCH 091/221] All finalize functions implemented --- Container.js | 3 + EventHandler.js | 9 +- FloatingSpace/CircularMenu.js | 28 ++++- FloatingSpace/CircularMenuItem.js | 29 +++-- FloatingSpace/FloatingLayer.js | 184 ++---------------------------- FloatingSpace/FloatingObject.js | 29 ++++- FloatingSpace/NoteSets.js | 14 +-- FloatingSpace/StrategyPart.js | 34 ++++-- FloatingSpace/StrategyParts.js | 1 - 9 files changed, 115 insertions(+), 216 deletions(-) diff --git a/Container.js b/Container.js index b5d2872df..b6ef7eace 100644 --- a/Container.js +++ b/Container.js @@ -45,6 +45,9 @@ function newContainer () { thisObject.parentContainer.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onFocusEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onNotFocusEventSubscriptionId) + + thisObject.parentContainer = undefined + thisObject.eventHandler.finalize() } } diff --git a/EventHandler.js b/EventHandler.js index ad843afeb..da29745a9 100644 --- a/EventHandler.js +++ b/EventHandler.js @@ -4,13 +4,18 @@ function newEventHandler () { name: undefined, // This is for debugging purposes only. listenToEvent: listenToEvent, stopListening: stopListening, - raiseEvent: raiseEvent + raiseEvent: raiseEvent, + finalize: finalize } - var eventHandlers = [] // Here we store all the functions we will call when an event is raiseed. + let eventHandlers = [] // Here we store all the functions we will call when an event is raiseed. return thisObject + function finalize () { + eventHandlers = [] + } + function listenToEvent (eventType, handler, extraData) { let eventSubscriptionId = Math.trunc(Math.random() * 1000000) eventHandlers.push([eventType, handler, extraData, eventSubscriptionId]) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 6c2af8b94..8e286884b 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -9,6 +9,7 @@ function newCircularMenu () { drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, + finalize: finalize, initialize: initialize } @@ -20,14 +21,29 @@ function newCircularMenu () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - let menuItemsInitialValues = [] let menuItems = [] - let payload + + let selfFocusEventSubscriptionId + let selfNotFocuskEventSubscriptionId return thisObject - function initialize (menuItemsInitialValues, pPayload) { - payload = pPayload + function finalize () { + thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + + for (let i = 0; i < menuItems.length; i++) { + let menuItem = menuItems[i] + menuItem.finalize() + } + + menuItems = undefined + } + + function initialize (menuItemsInitialValues, payload) { /* Create the array of Menu Items */ for (let i = 0; i < menuItemsInitialValues.length; i++) { @@ -49,8 +65,8 @@ function newCircularMenu () { menuItems.push(menuItem) } - thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) - thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) + selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) + selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) } function getContainer (point) { diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 4be819d05..cb8a25ea4 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -16,10 +16,12 @@ function newCircularMenuItem () { currentRadius: undefined, angle: undefined, container: undefined, + payload: undefined, physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, + finalize: finalize, initialize: initialize } @@ -35,12 +37,26 @@ function newCircularMenuItem () { thisObject.container.frame.height = 30 let isMouseOver = false - let payload + let selfMouseOverEventSubscriptionId + let selfMouseClickEventSubscriptionId + let selfMouseNotOverEventSubscriptionId return thisObject + function finalize () { + thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + thisObject.iconOn = undefined + thisObject.iconOff = undefined + thisObject.payload = undefined + } + function initialize (pPayload) { - payload = pPayload + thisObject.payload = pPayload /* Load Menu Images */ thisObject.iconOn = new Image() @@ -58,9 +74,9 @@ function newCircularMenuItem () { thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn thisObject.icon = thisObject.iconOn // The default value is ON. - thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { @@ -100,7 +116,7 @@ function newCircularMenuItem () { } function onMouseClick (event) { - payload.onMenuItemClick(payload, thisObject.action) + thisObject.payload.onMenuItemClick(thisObject.payload, thisObject.action) } function drawBackground () { @@ -157,4 +173,3 @@ function newCircularMenuItem () { } } } - diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 9f3cab8a1..c74b7f9ba 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -52,30 +52,14 @@ function newFloatingLayer () { let visibleFloatingObjects = [] - /* - The creator of the floatingObject at any time can decide to get rid of it and kill it. But we dont want the object just to dissapear because - that doesnt look good. What this module does is to remove it from the visible or invisible layer where they are and move them to the - dyingFloatingObjects array. Object in this array have a short animation until they finally graphically dissapear and at thay point they are also - removed from the dying array for good. - */ - - let dyingFloatingObjects = [] - let maxTargetRepulsionForce = 0.001 let currentHandle = 0 return thisObject function finalize () { - try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - - invisibleFloatingObjects = [] - visibleFloatingObjects = [] - dyingFloatingObjects = [] - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } - } + invisibleFloatingObjects = [] + visibleFloatingObjects = [] } function initialize () { @@ -95,35 +79,19 @@ function newFloatingLayer () { return container } - function addFloatingObject (pFloatingObject, callBackFunction) { + function addFloatingObject (pFloatingObject) { /* As you can see here, even though the floating objects are created outside this layer, its creator it is not supossed to keep the reference to the object, so that the managment of the objects references can live entirely inside this module. What the creator keeps, is a handle to the object which it can use to retrieve the floating object when needed. */ - try { - if (INFO_LOG === true) { logger.write('[INFO] addFloatingObject -> Entering function.') } - - invisibleFloatingObjects.push(pFloatingObject) - - if (INFO_LOG === true) { logger.write('[INFO] addFloatingObject -> invisibleFloatingObjects.length = ' + invisibleFloatingObjects.length) } - - currentHandle++ - - pFloatingObject.handle = currentHandle // Math.floor((Math.random() * 10000000) + 1); - - if (INFO_LOG === true) { logger.write('[INFO] addFloatingObject -> pFloatingObject.handle = ' + pFloatingObject.handle) } - if (INFO_LOG === true) { logger.write('[INFO] addFloatingObject -> pFloatingObject.type = ' + pFloatingObject.type) } - - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addFloatingObject -> err= ' + err.stack) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } - } + invisibleFloatingObjects.push(pFloatingObject) + currentHandle++ + pFloatingObject.handle = currentHandle // Math.floor((Math.random() * 10000000) + 1); } - function killFloatingObject (pFloatingObjectHandle, callBackFunction) { + function killFloatingObject (pFloatingObjectHandle) { try { /* The floting object to be killed can be either at the visible or the invisible array. What we do here is look for it @@ -136,7 +104,7 @@ function newFloatingLayer () { if (floatingObject.handle === pFloatingObjectHandle) { invisibleFloatingObjects.splice(i, 1) // Delete item from array. - sendToDie(floatingObject) + floatingObject.finalize() return } } @@ -147,7 +115,7 @@ function newFloatingLayer () { if (floatingObject.handle === pFloatingObjectHandle) { visibleFloatingObjects.splice(i, 1) // Delete item from array. - sendToDie(floatingObject) + floatingObject.finalize() return } } @@ -155,97 +123,8 @@ function newFloatingLayer () { if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> Floating Object Not Found.') } if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> Floating Object cannot be killed.') } if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> pFloatingObjectHandle = ' + pFloatingObjectHandle) } - - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } - - function sendToDie (pFloatingObject) { - try { - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> sendToDie -> Entering function.') } - - /* Lets mofigy the targerRadius */ - - pFloatingObject.targetRadius = 0 - - /* Lets transfer the payload to a new payload structure. */ - - let payload = {} - - switch (pFloatingObject.type) { - - case 'Profile Ball': { - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> sendToDie -> Profile Ball -> Entering function.') } - - if (pFloatingObject.payload.profile.visible === false) { return } - - payload.profile = { - position: { - x: pFloatingObject.payload.profile.position.x, - y: pFloatingObject.payload.profile.position.y - }, - visible: pFloatingObject.payload.profile.visible, - botAvatar: pFloatingObject.payload.profile.botAvatar - } - - pFloatingObject.payload = payload - break - } - case 'Note': { - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> sendToDie -> Note -> Entering function.') } - - if (pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].visible === false) { return } - - payload.notes = [] - let note = { - title: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].title, - body: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].body, - date: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].date, - rate: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].rate, - position: { - x: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].position.x, - y: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].position.y - }, - visible: pFloatingObject.payload.notes[pFloatingObject.payloadNoteIndex].visible - } - payload.notes.push(note) - pFloatingObject.payloadNoteIndex = 0 - - pFloatingObject.payload = payload - break - } - case 'Strategy Part': { - if (pFloatingObject.payload.visible === false) { return } - - payload.profile = { - position: { - x: pFloatingObject.payload.position.x, - y: pFloatingObject.payload.position.y - }, - visible: pFloatingObject.payload.visible, - botAvatar: pFloatingObject.payload.botAvatar - } - - pFloatingObject.payload = payload - break - } - default: { - break - } - } - - dyingFloatingObjects.push(pFloatingObject) - - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> sendToDie -> Adding floatingObject to dyingFloatingObjects.') } - if (INFO_LOG === true) { logger.write('[INFO] killFloatingObject -> sendToDie -> dyingFloatingObjects.length = ' + dyingFloatingObjects.length) } - - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } - } - } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } - if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -408,30 +287,10 @@ function newFloatingLayer () { return // Only one at the time. } } - - drawDyingObjects() } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeInvisible -> err= ' + err.stack) } } } - - function drawDyingObjects () { - try { - /* We also draw all the dyingFloatingObjects */ - - for (let i = 0; i < dyingFloatingObjects.length; i++) { - let floatingObject = dyingFloatingObjects[i] - floatingObject.drawBackground() - } - - for (let i = 0; i < dyingFloatingObjects.length; i++) { - let floatingObject = dyingFloatingObjects[dyingFloatingObjects.length - i - 1] - floatingObject.drawForeground() - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> drawDyingObjects -> err= ' + err.stack) } - } - } } /******************************************/ @@ -551,35 +410,10 @@ function newFloatingLayer () { gravityForce(floatingObject, payload) } - - animateDyingObjects() } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] physics -> applyPhysics -> err= ' + err.stack) } } } - - function animateDyingObjects () { - try { - /* We animate some parts of the dying objects */ - - for (let i = 0; i < dyingFloatingObjects.length; i++) { - let floatingObject = dyingFloatingObjects[i] - - if (Math.abs(floatingObject.container.frame.radius - floatingObject.targetRadius) >= 5) { - let speed = Math.random() - - floatingObject.container.frame.radius = floatingObject.container.frame.radius - speed * 3 - } else { - /* Here is when the floatingObjects are definetelly killed. */ - - dyingFloatingObjects.splice(i, 1) // Delete item from array. - break // only one at the time. - } - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err= ' + err.stack) } - } - } } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err= ' + err.stack) } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index ccff86ceb..6fcc5236c 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -7,6 +7,7 @@ function newFloatingObject () { logger.fileName = MODULE_NAME let thisObject = { + container: undefined, 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. @@ -30,7 +31,7 @@ function newFloatingObject () { updateMass: updateMass, // Function to update the mass when the zoom level changed. updateRadius: updateRadius, // Function to update the radius when the zoom level changed. getContainer: getContainer, - container: undefined, + finalize: finalize, initialize: initialize } @@ -43,8 +44,26 @@ function newFloatingObject () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 + let selfMouseOverEventSubscriptionId + let selfMouseClickEventSubscriptionId + let spaceMouseOverEventSubscriptionId + let spaceFocusAquiredEventSubscriptionId + return thisObject + function finalize () { + thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + canvas.floatingSpace.container.eventHandler.stopListening(spaceMouseOverEventSubscriptionId) + canvas.floatingSpace.container.eventHandler.stopListening(spaceFocusAquiredEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + thisObject.payload = undefined + thisObject.underlayingObject.finalize() + thisObject.underlayingObject = undefined + } + function initialize (pType, pSubType, floatingLayer) { switch (pType) { @@ -74,12 +93,12 @@ function newFloatingObject () { thisObject.type = pType - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) /* To consider that this object lost the focus, we monitor the space for 2 key events */ - canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) - canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) + spaceMouseOverEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) + spaceFocusAquiredEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) } function getContainer (point) { diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index 50a2f7c3b..e0a5d8093 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -124,19 +124,7 @@ function newNoteSets () { Each time we identify a floatingObject that is not at the raw data anymore, we request the floatinglayer to kill it. */ - floatingLayer.killFloatingObject(floatingNote.floatingHandle, onObjectKilled) - - function onObjectKilled (err) { - if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> Remove old Notes -> Floating Object Not Found.') } - if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> Remove old Notes -> Floating Object cannot be killed.') } - if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> Remove old Notes -> floatingNote.floatingHandle = ' + floatingNote.floatingHandle) } - return - } - - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Remove old Notes -> floatingNote.floatingHandle = ' + floatingNote.floatingHandle) } - if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Remove old Notes -> Removed from Layer.') } - } + floatingLayer.killFloatingObject(floatingNote.floatingHandle) } else { newFloatingNotes.push(floatingNote) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index cda32802d..d0f0ccd63 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -7,10 +7,12 @@ function newStrategyPart () { menu: undefined, isOnFocus: false, container: undefined, + payload: undefined, physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, getContainer: getContainer, + finalize: finalize, initialize: initialize } @@ -25,12 +27,31 @@ function newStrategyPart () { let floatingLayer let image let imagePath - let payload + + let selfFocusEventSubscriptionId + let selfNotFocuskEventSubscriptionId + let selfMouseClickEventSubscriptionId return thisObject + function finalize () { + thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + thisObject.payload = undefined + thisObject.menu.finalize() + thisObject.menu = undefined + + floatingLayer = undefined + image = undefined + imagePath = undefined + } + function initialize (pFloatingLayer, pType, pPayload) { - payload = pPayload + thisObject.payload = pPayload floatingLayer = pFloatingLayer let menuItemsInitialValues = [] @@ -240,7 +261,7 @@ function newStrategyPart () { } thisObject.menu = newCircularMenu() - thisObject.menu.initialize(menuItemsInitialValues, payload) + thisObject.menu.initialize(menuItemsInitialValues, thisObject.payload) thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) /* Load Part Image */ @@ -255,9 +276,9 @@ function newStrategyPart () { image.src = window.canvasApp.urlPrefix + imagePath } - thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) - thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) - thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) + selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) } function getContainer (point) { @@ -427,4 +448,3 @@ function newStrategyPart () { } } } - diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 9f08b849a..1f0e31869 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -19,7 +19,6 @@ function newStrategyParts () { return thisObject function finalize () { - floatingLayer.finalize() floatingLayer = undefined } From b66ccc8182d4b64a0ebff37ec45772a3a6a9fc34 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 6 May 2019 20:58:31 +0200 Subject: [PATCH 092/221] BUG related to SPLICE fixed --- FloatingSpace/FloatingLayer.js | 26 ++++++++++++-------------- FloatingSpace/StrategyPart.js | 5 +++++ StrategySpace/Strategy.js | 7 +++---- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index c74b7f9ba..bb4ebe3c4 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -86,9 +86,9 @@ function newFloatingLayer () { creator keeps, is a handle to the object which it can use to retrieve the floating object when needed. */ - invisibleFloatingObjects.push(pFloatingObject) currentHandle++ pFloatingObject.handle = currentHandle // Math.floor((Math.random() * 10000000) + 1); + invisibleFloatingObjects.push(pFloatingObject) } function killFloatingObject (pFloatingObjectHandle) { @@ -105,6 +105,7 @@ function newFloatingLayer () { invisibleFloatingObjects.splice(i, 1) // Delete item from array. floatingObject.finalize() + return } } @@ -174,22 +175,19 @@ function newFloatingLayer () { drawVisibleObjects() function drawVisibleObjects () { - try { /* We draw all the visibleFloatingObjects. */ - for (let i = 0; i < visibleFloatingObjects.length; i++) { - let floatingObject = visibleFloatingObjects[i] - floatingObject.drawBackground() - } - - for (let i = 0; i < visibleFloatingObjects.length; i++) { - let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1] - floatingObject.drawForeground() - } - - makeVisible() - } catch (err) { + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + floatingObject.drawBackground() } + + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1] + floatingObject.drawForeground() + } + + makeVisible() } function makeVisible () { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index d0f0ccd63..61053d1f2 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -326,6 +326,11 @@ function newStrategyPart () { /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) + if (parentFloatingObject === undefined) { + console.log(pFloatingObject) + console.log('Now') + } + pFloatingObject.payload.position.x = parentFloatingObject.container.frame.position.x pFloatingObject.payload.position.y = parentFloatingObject.container.frame.position.y diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 8d675f59d..3afbe11b3 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -222,8 +222,6 @@ function newStrategy () { } function onMenuItemClick (payload, action) { - console.log('onMenuItemClick ' + action) - switch (action) { case 'Open Settings': @@ -269,7 +267,7 @@ function newStrategy () { } situation.conditions = [] destroyPart(situation) - payload.parentNode.situations.splice(j) + payload.parentNode.situations.splice(j, 1) cleanNode(situation) return } @@ -282,7 +280,7 @@ function newStrategy () { let condition = payload.parentNode.conditions[i] if (condition.name === node.name) { destroyPart(node) - payload.parentNode.conditions.splice(i) + payload.parentNode.conditions.splice(i, 1) cleanNode(condition) return } @@ -300,6 +298,7 @@ function newStrategy () { node.payload.onMenuItemClick = undefined node.handle = undefined node.payload = undefined + node.cleaned = true } } From f5b5f4b852bedc2935a9f3907d544b6ca16a87da Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 09:58:45 +0200 Subject: [PATCH 093/221] Delete Phases Working --- FloatingSpace/StrategyPart.js | 12 +++-- FloatingSpace/StrategyParts.js | 8 +-- StrategySpace/Strategy.js | 90 +++++++++++++++++++++++----------- 3 files changed, 73 insertions(+), 37 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 61053d1f2..b1f32d2de 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -1,6 +1,10 @@ function newStrategyPart () { const MODULE_NAME = 'Strategy Part' + const ERROR_LOG = true + + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME let thisObject = { type: undefined, @@ -83,7 +87,7 @@ function newStrategyPart () { }] break } - case 'Strategy Entry': { + case 'Strategy Entry Event': { imagePath = 'Images/icons/style-01/startup.png' menuItemsInitialValues = [ { @@ -99,7 +103,7 @@ function newStrategyPart () { }] break } - case 'Strategy Exit': { + case 'Strategy Exit Event': { imagePath = 'Images/icons/style-01/support.png' menuItemsInitialValues = [ { @@ -115,7 +119,7 @@ function newStrategyPart () { }] break } - case 'Trade Entry': { + case 'Trade Entry Event': { imagePath = 'Images/icons/style-01/compass.png' menuItemsInitialValues = [ { @@ -324,7 +328,7 @@ function newStrategyPart () { if (pFloatingObject.payload.parentNode === undefined) { return } /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ - let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle) + let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.chainParent.handle) if (parentFloatingObject === undefined) { console.log(pFloatingObject) diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 1f0e31869..248012cc9 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -39,19 +39,19 @@ function newStrategyParts () { level_1() break } - case 'Strategy Entry': { + case 'Strategy Entry Event': { level_2() break } - case 'Strategy Exit': { + case 'Strategy Exit Event': { level_2() break } - case 'Trade Entry': { + case 'Trade Entry Event': { level_2() break } - case 'Trade Exit': { + case 'Trade Exit Event': { level_2() break } diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 3afbe11b3..9b9b58483 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -37,7 +37,7 @@ function newStrategy () { } - function createPart (partType, name, node, parentNode, title) { + function createPart (partType, name, node, parentNode, chainParent, title) { let payload = { position: { x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, @@ -55,6 +55,7 @@ function newStrategy () { payload.downLabel = name payload.node = node payload.parentNode = parentNode + payload.chainParent = chainParent payload.onMenuItemClick = onMenuItemClick node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) @@ -68,84 +69,84 @@ function newStrategy () { function generateStrategyParts () { let lastPhase let strategy = thisObject.strategySource - createPart('Strategy', strategy.name, strategy, undefined) + createPart('Strategy', strategy.name, strategy, undefined, undefined) - createPart('Strategy Entry', '', strategy.entryPoint, strategy) + createPart('Strategy Entry Event', '', strategy.entryPoint, strategy, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.entryPoint, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) } } - createPart('Strategy Exit', '', strategy.exitPoint, strategy) + createPart('Strategy Exit Event', '', strategy.exitPoint, strategy, strategy) for (let k = 0; k < strategy.exitPoint.situations.length; k++) { let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.exitPoint, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) } } - createPart('Trade Entry', '', strategy.sellPoint, strategy) + createPart('Trade Entry Event', '', strategy.sellPoint, strategy, strategy) for (let k = 0; k < strategy.sellPoint.situations.length; k++) { let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.sellPoint, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) } } - createPart('Stop', '', strategy.stopLoss, strategy) + createPart('Stop', '', strategy.stopLoss, strategy, strategy) for (let p = 0; p < strategy.stopLoss.phases.length; p++) { let phase = strategy.stopLoss.phases[p] - let parent + let chainParent if (p === 0) { - parent = strategy.stopLoss + chainParent = strategy.stopLoss } else { - parent = lastPhase + chainParent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Stop Phase' + ' #' + (p + 1)) + createPart('Phase', phase.name, phase, strategy.stopLoss, chainParent, 'Stop Phase' + ' #' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) } } } - createPart('Take Profit', '', strategy.buyOrder, strategy) + createPart('Take Profit', '', strategy.buyOrder, strategy, strategy) for (let p = 0; p < strategy.buyOrder.phases.length; p++) { let phase = strategy.buyOrder.phases[p] - let parent + let chainParent if (p === 0) { - parent = strategy.buyOrder + chainParent = strategy.buyOrder } else { - parent = lastPhase + chainParent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, parent, 'Take Profit Phase' + ' #' + (p + 1)) + createPart('Phase', phase.name, phase, strategy.buyOrder, chainParent, 'Take Profit Phase' + ' #' + (p + 1)) for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (k + 1)) for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) } } } @@ -238,14 +239,14 @@ function newStrategy () { case 'Edit Code': break - case 'Delete Phase': - + case 'Delete Phase': { + deletePhase(payload.node) break + } case 'Delete Situation': { deleteSituation(payload.node) break } - break case 'Delete Condition': { deleteCondition(payload.node) break @@ -255,6 +256,37 @@ function newStrategy () { } } + function deletePhase (node) { + let payload = node.payload + for (let k = 0; k < payload.parentNode.phases.length; k++) { + let phase = payload.parentNode.phases[k] + if (phase.name === node.name) { + for (let j = 0; j < phase.situations.length; j++) { + let situation = phase.situations[j] + for (let i = 0; i < situation.conditions.length; i++) { + let condition = situation.conditions[i] + destroyPart(condition) + cleanNode(condition) + } + situation.conditions = [] + destroyPart(situation) + phase.situations.splice(j, 1) + cleanNode(situation) + } + phase.situations = [] + /* Before deleting this phase we need to give its chainParent to the next phase down the chain */ + if (k < payload.parentNode.phases.length - 1) { + payload.parentNode.phases[k + 1].payload.chainParent = payload.chainParent + } + /* Continue destroying this phase */ + destroyPart(phase) + payload.parentNode.phases.splice(k, 1) + cleanNode(phase) + return + } + } + } + function deleteSituation (node) { let payload = node.payload for (let j = 0; j < payload.parentNode.situations.length; j++) { @@ -295,10 +327,10 @@ function newStrategy () { node.payload.downLabel = undefined node.payload.node = undefined node.payload.parentNode = undefined + node.payload.chainParent = undefined node.payload.onMenuItemClick = undefined node.handle = undefined node.payload = undefined node.cleaned = true } } - From 43ba575d1fbfd7cbe810af7752e02497ffbf943d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 10:33:01 +0200 Subject: [PATCH 094/221] Cleaning References not needed --- FloatingSpace/StrategyPart.js | 119 +++++++++++++++++++--------------- 1 file changed, 65 insertions(+), 54 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index b1f32d2de..a693f2745 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -328,29 +328,31 @@ function newStrategyPart () { if (pFloatingObject.payload.parentNode === undefined) { return } /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ - let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.chainParent.handle) + let parentFloatingObject = floatingLayer.getFloatingObject(thisObject.payload.chainParent.handle) - if (parentFloatingObject === undefined) { - console.log(pFloatingObject) - console.log('Now') - } - - pFloatingObject.payload.position.x = parentFloatingObject.container.frame.position.x - pFloatingObject.payload.position.y = parentFloatingObject.container.frame.position.y + thisObject.payload.position.x = parentFloatingObject.container.frame.position.x + thisObject.payload.position.y = parentFloatingObject.container.frame.position.y /* Here I continue painting the background */ - let point = { - x: pFloatingObject.payload.position.x, - y: pFloatingObject.payload.position.y + let targetPoint = { + x: thisObject.payload.position.x, + y: thisObject.payload.position.y } - if (pFloatingObject.container.frame.radius > 1) { + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + if (thisObject.container.frame.radius > 1) { /* Target Line */ browserCanvasContext.beginPath() - browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y) - browserCanvasContext.lineTo(point.x, point.y) + browserCanvasContext.moveTo(position.x, position.y) + browserCanvasContext.lineTo(targetPoint.x, targetPoint.y) browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' browserCanvasContext.setLineDash([1, 4]) browserCanvasContext.lineWidth = 1 @@ -364,11 +366,59 @@ function newStrategyPart () { let radius = 1 browserCanvasContext.beginPath() - browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true) + browserCanvasContext.arc(targetPoint.x, targetPoint.y, radius, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)' browserCanvasContext.fill() } + + drawText() + + function drawText () { + /* Text Follows */ + let position = { + x: pFloatingObject.container.frame.position.x, + y: pFloatingObject.container.frame.position.y + } + let radius = pFloatingObject.container.frame.radius + /* Label Text */ + let labelPoint + let fontSize = pFloatingObject.currentFontSize + let label + + if (radius > 6 && thisObject.isOnFocus === true) { + browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + label = pFloatingObject.payload.downLabel + + if (label !== undefined) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + if (radius > 6) { + label = pFloatingObject.payload.upLabel + + if (label !== undefined) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } } function drawForeground (pFloatingObject) { @@ -415,45 +465,6 @@ function newStrategyPart () { if (image.canDrawIcon === true) { browserCanvasContext.drawImage(image, position.x - pFloatingObject.currentImageSize / 2, position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) } - } - - /* Label Text */ - - if (radius > 6 && thisObject.isOnFocus === true) { - browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle - - let labelPoint - let fontSize = pFloatingObject.currentFontSize - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - let label - - label = pFloatingObject.payload.upLabel - - if (label !== undefined) { - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - - label = pFloatingObject.payload.downLabel - - 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 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } } } } From b03026d24abb23bf24cb2a9b1c7a2455a573d6b3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 10:56:13 +0200 Subject: [PATCH 095/221] middeground and draw focus implemented --- FloatingSpace/FloatingLayer.js | 10 +++ FloatingSpace/FloatingObject.js | 10 +++ FloatingSpace/Note.js | 10 +++ FloatingSpace/ProfileBall.js | 10 +++ FloatingSpace/StrategyPart.js | 116 ++++++++++++++++++-------------- 5 files changed, 104 insertions(+), 52 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index bb4ebe3c4..31f49330a 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -182,11 +182,21 @@ function newFloatingLayer () { floatingObject.drawBackground() } + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + floatingObject.drawMiddleground() + } + for (let i = 0; i < visibleFloatingObjects.length; i++) { let floatingObject = visibleFloatingObjects[visibleFloatingObjects.length - i - 1] floatingObject.drawForeground() } + for (let i = 0; i < visibleFloatingObjects.length; i++) { + let floatingObject = visibleFloatingObjects[i] + floatingObject.drawOnFocus() + } + makeVisible() } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 6fcc5236c..2ef8ca566 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -27,7 +27,9 @@ function newFloatingObject () { radomizeCurrentPosition: radomizeCurrentPosition, radomizeCurrentSpeed: radomizeCurrentSpeed, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, updateMass: updateMass, // Function to update the mass when the zoom level changed. updateRadius: updateRadius, // Function to update the radius when the zoom level changed. getContainer: getContainer, @@ -202,10 +204,18 @@ function newFloatingObject () { thisObject.underlayingObject.drawBackground(thisObject) } + function drawMiddleground () { + thisObject.underlayingObject.drawMiddleground(thisObject) + } + function drawForeground () { thisObject.underlayingObject.drawForeground(thisObject) } + function drawOnFocus () { + thisObject.underlayingObject.drawOnFocus(thisObject) + } + function initializeMass (suggestedValue) { let mass = suggestedValue if (mass < 0.1) { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 0fda6958f..6bb4e5858 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -6,7 +6,9 @@ function newNote () { container: undefined, physics: physics, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, getContainer: getContainer, initialize: initialize } @@ -88,6 +90,14 @@ function newNote () { } } + function drawOnFocus () { + + } + + function drawMiddleground () { + + } + function drawForeground (pFloatingObject) { const BUBBLE_CORNERS_RADIUS = 5 const TITLE_BAR_HEIGHT = 14 diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 2e8c5c526..544370e61 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -6,7 +6,9 @@ function newProfileBall () { container: undefined, physics: physics, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, getContainer: getContainer, initialize: initialize } @@ -215,6 +217,14 @@ function newProfileBall () { } } + function drawOnFocus () { + + } + + function drawMiddleground () { + + } + function drawForeground (pFloatingObject) { if (pFloatingObject.container.frame.radius > 5) { /* Contourn */ diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index a693f2745..f4482fcb4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -14,7 +14,9 @@ function newStrategyPart () { payload: undefined, physics: physics, drawBackground: drawBackground, + drawMiddleground: drawMiddleground, drawForeground: drawForeground, + drawOnFocus: drawOnFocus, getContainer: getContainer, finalize: finalize, initialize: initialize @@ -316,15 +318,37 @@ function newStrategyPart () { function drawBackground (pFloatingObject) { if (thisObject.isOnFocus === false) { - drawPartBackground(pFloatingObject) + drawConnectingLine(pFloatingObject) thisObject.menu.drawBackground() + } + } - drawPartForeground(pFloatingObject) + function drawMiddleground (pFloatingObject) { + if (thisObject.isOnFocus === false) { + drawText(pFloatingObject) + } + } + + function drawForeground (pFloatingObject) { + if (thisObject.isOnFocus === false) { + drawBodyAndPicture(pFloatingObject) thisObject.menu.drawForeground() } } - function drawPartBackground (pFloatingObject) { + function drawOnFocus (pFloatingObject) { + if (thisObject.isOnFocus === true) { + drawConnectingLine(pFloatingObject) + thisObject.menu.drawBackground() + + drawText(pFloatingObject) + + drawBodyAndPicture(pFloatingObject) + thisObject.menu.drawForeground() + } + } + + function drawConnectingLine (pFloatingObject) { if (pFloatingObject.payload.parentNode === undefined) { return } /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ @@ -371,67 +395,55 @@ function newStrategyPart () { browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)' browserCanvasContext.fill() } + } - drawText() + function drawText (pFloatingObject) { +/* Text Follows */ + let position = { + x: pFloatingObject.container.frame.position.x, + y: pFloatingObject.container.frame.position.y + } + let radius = pFloatingObject.container.frame.radius + /* Label Text */ + let labelPoint + let fontSize = pFloatingObject.currentFontSize + let label - function drawText () { - /* Text Follows */ - let position = { - x: pFloatingObject.container.frame.position.x, - y: pFloatingObject.container.frame.position.y - } - let radius = pFloatingObject.container.frame.radius - /* Label Text */ - let labelPoint - let fontSize = pFloatingObject.currentFontSize - let label + if (radius > 6 && thisObject.isOnFocus === true) { + browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle - if (radius > 6 && thisObject.isOnFocus === true) { - browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + label = pFloatingObject.payload.downLabel + + if (label !== undefined) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - label = pFloatingObject.payload.downLabel - - if (label !== undefined) { - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } - if (radius > 6) { - label = pFloatingObject.payload.upLabel + } + if (radius > 6) { + label = pFloatingObject.payload.upLabel - if (label !== undefined) { - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + if (label !== undefined) { + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } } - function drawForeground (pFloatingObject) { - if (thisObject.isOnFocus === true) { - drawPartBackground(pFloatingObject) - thisObject.menu.drawBackground() - - drawPartForeground(pFloatingObject) - thisObject.menu.drawForeground() - } - } - - function drawPartForeground (pFloatingObject) { + function drawBodyAndPicture (pFloatingObject) { let position = { x: pFloatingObject.container.frame.position.x, y: pFloatingObject.container.frame.position.y From d098f726295d24f278fb8bc1390eb1e7bfd4132a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 11:15:12 +0200 Subject: [PATCH 096/221] tyding code --- FloatingSpace/StrategyPart.js | 77 ++++++++++++++++++----------------- 1 file changed, 40 insertions(+), 37 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index f4482fcb4..ef3a8b5f6 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -302,6 +302,14 @@ function newStrategyPart () { function physics () { thisObject.menu.physics() + + if (thisObject.payload.chainParent === undefined) { return } + + /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ + let parentFloatingObject = floatingLayer.getFloatingObject(thisObject.payload.chainParent.handle) + + thisObject.payload.position.x = parentFloatingObject.container.frame.position.x + thisObject.payload.position.y = parentFloatingObject.container.frame.position.y } function onFocus () { @@ -316,48 +324,40 @@ function newStrategyPart () { } - function drawBackground (pFloatingObject) { + function drawBackground (params) { if (thisObject.isOnFocus === false) { - drawConnectingLine(pFloatingObject) + drawConnectingLine() thisObject.menu.drawBackground() } } - function drawMiddleground (pFloatingObject) { + function drawMiddleground (params) { if (thisObject.isOnFocus === false) { - drawText(pFloatingObject) + drawText(params) } } - function drawForeground (pFloatingObject) { + function drawForeground (params) { if (thisObject.isOnFocus === false) { - drawBodyAndPicture(pFloatingObject) + drawBodyAndPicture(params) thisObject.menu.drawForeground() } } - function drawOnFocus (pFloatingObject) { + function drawOnFocus (params) { if (thisObject.isOnFocus === true) { - drawConnectingLine(pFloatingObject) + drawConnectingLine() thisObject.menu.drawBackground() - drawText(pFloatingObject) + drawText(params) - drawBodyAndPicture(pFloatingObject) + drawBodyAndPicture(params) thisObject.menu.drawForeground() } } - function drawConnectingLine (pFloatingObject) { - if (pFloatingObject.payload.parentNode === undefined) { return } - - /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ - let parentFloatingObject = floatingLayer.getFloatingObject(thisObject.payload.chainParent.handle) - - thisObject.payload.position.x = parentFloatingObject.container.frame.position.x - thisObject.payload.position.y = parentFloatingObject.container.frame.position.y - - /* Here I continue painting the background */ + function drawConnectingLine () { + if (thisObject.payload.chainParent === undefined) { return } let targetPoint = { x: thisObject.payload.position.x, @@ -384,7 +384,7 @@ function newStrategyPart () { browserCanvasContext.setLineDash([0, 0]) } - if (pFloatingObject.container.frame.radius > 0.5) { + if (thisObject.container.frame.radius > 0.5) { /* Target Spot */ let radius = 1 @@ -397,24 +397,27 @@ function newStrategyPart () { } } - function drawText (pFloatingObject) { + function drawText (params) { /* Text Follows */ let position = { - x: pFloatingObject.container.frame.position.x, - y: pFloatingObject.container.frame.position.y + x: 0, + y: 0 } - let radius = pFloatingObject.container.frame.radius + + position = thisObject.container.frame.frameThisPoint(position) + + let radius = thisObject.container.frame.radius /* Label Text */ let labelPoint - let fontSize = pFloatingObject.currentFontSize + let fontSize = params.currentFontSize let label if (radius > 6 && thisObject.isOnFocus === true) { - browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.strokeStyle = params.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - label = pFloatingObject.payload.downLabel + label = params.payload.downLabel if (label !== undefined) { labelPoint = { @@ -423,12 +426,12 @@ function newStrategyPart () { } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillStyle = params.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } if (radius > 6) { - label = pFloatingObject.payload.upLabel + label = params.payload.upLabel if (label !== undefined) { labelPoint = { @@ -437,19 +440,19 @@ function newStrategyPart () { } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillStyle = params.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } } - function drawBodyAndPicture (pFloatingObject) { + function drawBodyAndPicture (params) { let position = { - x: pFloatingObject.container.frame.position.x, - y: pFloatingObject.container.frame.position.y + x: params.container.frame.position.x, + y: params.container.frame.position.y } - let radius = pFloatingObject.container.frame.radius + let radius = params.container.frame.radius if (radius > 0.5 && image === undefined) { /* Main FloatingObject */ @@ -458,7 +461,7 @@ function newStrategyPart () { browserCanvasContext.arc(position.x, position.y, radius * 2 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() - browserCanvasContext.fillStyle = pFloatingObject.fillStyle + browserCanvasContext.fillStyle = params.fillStyle browserCanvasContext.fill() @@ -475,7 +478,7 @@ function newStrategyPart () { if (image !== undefined) { if (image.canDrawIcon === true) { - browserCanvasContext.drawImage(image, position.x - pFloatingObject.currentImageSize / 2, position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) + browserCanvasContext.drawImage(image, position.x - params.currentImageSize / 2, position.y - params.currentImageSize / 2, params.currentImageSize, params.currentImageSize) } } } From d2953a5b5a5f53e9b8b2b3fc0cab666024bb8bc8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 12:29:39 +0200 Subject: [PATCH 097/221] Adding Conditions done --- StrategySpace/Strategy.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 9b9b58483..86e01bad4 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -239,6 +239,19 @@ function newStrategy () { case 'Edit Code': break + + case 'Add Condition': + { + let situation = payload.node + let m = situation.conditions.length + let condition = { + name: 'New Condition' + ' #' + (m + 1), + code: '' + } + situation.conditions.push(condition) + createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + } + break case 'Delete Phase': { deletePhase(payload.node) break From 88d029a72b5c8d5c9e3c6a40d6b8a04bfe5ff995 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 12:51:15 +0200 Subject: [PATCH 098/221] Improvements at the place where it is generated --- FloatingSpace/StrategyParts.js | 4 ++-- StrategySpace/Strategy.js | 14 ++++++++++---- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index 248012cc9..f53cf01eb 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -26,9 +26,9 @@ function newStrategyParts () { floatingLayer = pFloatingLayer } - function createNewStrategyPart (type, pPayload) { + function createNewStrategyPart (type, payload) { let floatingObject = newFloatingObject() - floatingObject.payload = pPayload + floatingObject.payload = payload floatingObject.initialize('Strategy Part', type, floatingLayer) floatingObject.underlayingObject.type = type // after initialize diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 86e01bad4..3983613a9 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -38,12 +38,17 @@ function newStrategy () { } function createPart (partType, name, node, parentNode, chainParent, title) { - let payload = { - position: { + let payload = {} + if (chainParent === undefined) { + payload.position = { x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, y: viewPort.height / 2 - }, - visible: true + } + } else { + payload.position = { + x: chainParent.payload.position.x, + y: chainParent.payload.position.y + } } if (title !== undefined) { @@ -52,6 +57,7 @@ function newStrategy () { payload.upLabel = partType } + payload.visible = true payload.downLabel = name payload.node = node payload.parentNode = parentNode From 16b5b2ad2f94d5ba6f22561fb03f74f467d6fef8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 15:12:39 +0200 Subject: [PATCH 099/221] Better positioning when adding a new element --- FloatingSpace/FloatingLayer.js | 40 ++++++++++++++------------------- FloatingSpace/FloatingObject.js | 20 +++++++++++++++++ FloatingSpace/ProfileBall.js | 4 ++-- FloatingSpace/StrategyPart.js | 11 ++++----- StrategySpace/Strategy.js | 8 +++---- 5 files changed, 47 insertions(+), 36 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 31f49330a..d1dc9a1d1 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -215,19 +215,19 @@ function newFloatingLayer () { switch (floatingObject.type) { case 'Profile Ball': { - payload.position = floatingObject.payload.profile.position + payload.targetPosition = floatingObject.payload.profile.position payload.visible = floatingObject.payload.profile.visible break } case 'Note': { if (floatingObject.payload.notes[floatingObject.payloadNoteIndex] !== undefined) { - payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position + payload.targetPosition = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible } break } case 'Strategy Part': { - payload.position = floatingObject.payload.position + payload.targetPosition = floatingObject.payload.targetPosition payload.visible = floatingObject.payload.visible break } @@ -237,11 +237,6 @@ function newFloatingLayer () { } if (payload.visible === true) { - /* The first time that the floatingObject becomes visible, we need to do this. */ - - floatingObject.radomizeCurrentPosition(payload.position) - floatingObject.radomizeCurrentSpeed() - visibleFloatingObjects.push(floatingObject) invisibleFloatingObjects.splice(i, 1) // Delete item from array. @@ -348,18 +343,18 @@ function newFloatingLayer () { switch (floatingObject.type) { case 'Profile Ball': { - payload.position = floatingObject.payload.profile.position + payload.targetPosition = floatingObject.payload.profile.position payload.visible = floatingObject.payload.profile.visible break } case 'Note': { - payload.position = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position + payload.targetPosition = floatingObject.payload.notes[floatingObject.payloadNoteIndex].position payload.visible = floatingObject.payload.notes[floatingObject.payloadNoteIndex].visible break } case 'Strategy Part': { - payload.position = floatingObject.payload.position + payload.targetPosition = floatingObject.payload.targetPosition payload.visible = floatingObject.payload.visible break } @@ -368,13 +363,13 @@ function newFloatingLayer () { } } - if (floatingObject.container.frame.position.x < payload.position.x) { + if (floatingObject.container.frame.position.x < payload.targetPosition.x) { floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + 0.005 } else { floatingObject.currentSpeed.x = floatingObject.currentSpeed.x - 0.005 } - if (floatingObject.container.frame.position.y < payload.position.y) { + if (floatingObject.container.frame.position.y < payload.targetPosition.y) { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + 0.005 } else { floatingObject.currentSpeed.y = floatingObject.currentSpeed.y - 0.005 @@ -434,7 +429,7 @@ function newFloatingLayer () { const coulomb = 0.00001 const minForce = 0.01 - var d = Math.sqrt(Math.pow(payload.position.x - floatingObject.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject.container.frame.position.y, 2)) // ... we calculate the distance ... + var d = Math.sqrt(Math.pow(payload.targetPosition.x - floatingObject.container.frame.position.x, 2) + Math.pow(payload.targetPosition.y - floatingObject.container.frame.position.y, 2)) // ... we calculate the distance ... var force = coulomb * d * d / floatingObject.currentMass // In this case the mass of the floatingObject affects the gravity force that it receives, that gives priority to target position to bigger floatingObjects. @@ -448,8 +443,8 @@ function newFloatingLayer () { } var pos2 = { - x: payload.position.x, - y: payload.position.y + x: payload.targetPosition.x, + y: payload.targetPosition.y } var posDiff = { // Next we need the vector resulting from the 2 positions. @@ -560,15 +555,15 @@ function newFloatingLayer () { switch (floatingObject2.type) { case 'Profile Ball': { - payload.position = floatingObject2.payload.profile.position + payload.targetPosition = floatingObject2.payload.profile.position break } case 'Note': { - payload.position = floatingObject2.payload.notes[floatingObject2.payloadNoteIndex].position + payload.targetPosition = floatingObject2.payload.notes[floatingObject2.payloadNoteIndex].position break } case 'Strategy Part': { - payload.position = floatingObject2.payload.position + payload.targetPosition = floatingObject2.payload.targetPosition break } default: { @@ -576,7 +571,7 @@ function newFloatingLayer () { } } - var d = Math.sqrt(Math.pow(payload.position.x - floatingObject1.container.frame.position.x, 2) + Math.pow(payload.position.y - floatingObject1.container.frame.position.y, 2)) // ... we calculate the distance ... + var d = Math.sqrt(Math.pow(payload.targetPosition.x - floatingObject1.container.frame.position.x, 2) + Math.pow(payload.targetPosition.y - floatingObject1.container.frame.position.y, 2)) // ... we calculate the distance ... var force = coulomb * floatingObject2.currentMass / (d * d) // ... and with it the repulsion force. @@ -592,8 +587,8 @@ function newFloatingLayer () { } var pos2 = { - x: payload.position.x, - y: payload.position.y + x: payload.targetPosition.x, + y: payload.targetPosition.y } var posDiff = { // Next we need the vector resulting from the 2 positions. @@ -753,4 +748,3 @@ function newFloatingLayer () { } } } - diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 2ef8ca566..560f1d3d5 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -101,6 +101,11 @@ function newFloatingObject () { /* To consider that this object lost the focus, we monitor the space for 2 key events */ spaceMouseOverEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace) spaceFocusAquiredEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus) + + /* Assign a position and speed */ + + thisObject.radomizeCurrentPosition(thisObject.payload.targetPosition) + thisObject.radomizeCurrentSpeed() } function getContainer (point) { @@ -152,6 +157,17 @@ function newFloatingObject () { thisObject.currentFontSize = thisObject.currentFontSize - 0.2 } } + + /* Floating object position in screen coordinates */ + + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + thisObject.payload.position = position } function onMouseOver (point) { @@ -268,6 +284,10 @@ function newFloatingObject () { } thisObject.container.frame.position = position + thisObject.payload.position = { + x: position.x, + y: position.y + } } function radomizeCurrentSpeed () { diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 544370e61..8328b7b25 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -185,8 +185,8 @@ function newProfileBall () { function drawBackground (pFloatingObject) { let point = { - x: pFloatingObject.payload.position.x, - y: pFloatingObject.payload.position.y + x: pFloatingObject.payload.targetPosition.x, + y: pFloatingObject.payload.targetPosition.y } point = viewPort.fitIntoVisibleArea(point) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index ef3a8b5f6..66639bde1 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -305,11 +305,8 @@ function newStrategyPart () { if (thisObject.payload.chainParent === undefined) { return } - /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ - let parentFloatingObject = floatingLayer.getFloatingObject(thisObject.payload.chainParent.handle) - - thisObject.payload.position.x = parentFloatingObject.container.frame.position.x - thisObject.payload.position.y = parentFloatingObject.container.frame.position.y + thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x + thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y } function onFocus () { @@ -360,8 +357,8 @@ function newStrategyPart () { if (thisObject.payload.chainParent === undefined) { return } let targetPoint = { - x: thisObject.payload.position.x, - y: thisObject.payload.position.y + x: thisObject.payload.targetPosition.x, + y: thisObject.payload.targetPosition.y } let position = { diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 3983613a9..af75c2eba 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -40,12 +40,12 @@ function newStrategy () { function createPart (partType, name, node, parentNode, chainParent, title) { let payload = {} if (chainParent === undefined) { - payload.position = { + payload.targetPosition = { x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, y: viewPort.height / 2 } } else { - payload.position = { + payload.targetPosition = { x: chainParent.payload.position.x, y: chainParent.payload.position.y } @@ -339,8 +339,8 @@ function newStrategy () { } function cleanNode (node) { - node.payload.position.x = undefined - node.payload.position.y = undefined + node.payload.targetPosition.x = undefined + node.payload.targetPosition.y = undefined node.payload.visible = undefined node.payload.upLabel = undefined node.payload.downLabel = undefined From c4cec14fc10a4a6fa60ddb162183d21b98104213 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 15:24:14 +0200 Subject: [PATCH 100/221] Can add situations --- StrategySpace/Strategy.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index af75c2eba..89c2e4346 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -236,16 +236,25 @@ function newStrategy () { case 'Delete Strategy': break - case 'Add Situation': - break case 'Add Phase': break case 'Edit Code': break - + case 'Add Situation': + { + let phase = payload.node + let m = phase.situations.length + let situation = { + name: 'New Situation' + ' #' + (m + 1), + conditions: [] + } + phase.situations.push(situation) + createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (m + 1)) + } + break case 'Add Condition': { let situation = payload.node @@ -353,3 +362,4 @@ function newStrategy () { node.cleaned = true } } + From 746dac5b06e2cf2efc4595a6122e6ba6ef28d42b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 7 May 2019 15:43:07 +0200 Subject: [PATCH 101/221] Adding Phases --- StrategySpace/Strategy.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 89c2e4346..ce1b8d40c 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -237,11 +237,27 @@ function newStrategy () { break - case 'Add Phase': - - break case 'Edit Code': + break + case 'Add Phase': + { + let phaseParent = payload.node + let m = phaseParent.phases.length + let phase = { + name: 'New Phase' + ' #' + (m + 1), + code: '', + situations: [] + } + phaseParent.phases.push(phase) + let phaseChainParent + if (m > 0) { + phaseChainParent = phaseParent.phases[m - 1] + } else { + phaseChainParent = phaseParent + } + createPart('Phase', phase.name, phase, phaseParent, phaseChainParent, 'Phase' + ' #' + (m + 1)) + } break case 'Add Situation': { From 5af73fd9b8168b91a2869e5a3114b0ad09e19669 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 12:24:10 +0200 Subject: [PATCH 102/221] code editor version 1 implemented --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 4 +- FloatingSpace/CodeEditor.js | 215 ++++++++++++++++++++++++++++++ FloatingSpace/StrategyPart.js | 37 +++++ 4 files changed, 256 insertions(+), 1 deletion(-) create mode 100644 FloatingSpace/CodeEditor.js diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 8e286884b..b623c7c34 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -51,6 +51,7 @@ function newCircularMenu () { let menuItemInitialValue = menuItemsInitialValues[i] menuItem.action = menuItemInitialValue.action + menuItem.actionFunction = menuItemInitialValue.actionFunction menuItem.label = menuItemInitialValue.label menuItem.visible = menuItemInitialValue.visible menuItem.imagePathOn = menuItemInitialValue.imagePathOn diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index cb8a25ea4..b22524258 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -7,6 +7,7 @@ function newCircularMenuItem () { iconOn: undefined, iconOff: undefined, action: undefined, + actionFunction: undefined, label: undefined, visible: false, imagePathOn: undefined, @@ -53,6 +54,7 @@ function newCircularMenuItem () { thisObject.iconOn = undefined thisObject.iconOff = undefined thisObject.payload = undefined + thisObject.actionFunction = undefined } function initialize (pPayload) { @@ -116,7 +118,7 @@ function newCircularMenuItem () { } function onMouseClick (event) { - thisObject.payload.onMenuItemClick(thisObject.payload, thisObject.action) + thisObject.actionFunction(thisObject.payload, thisObject.action) } function drawBackground () { diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js new file mode 100644 index 000000000..a9cf2ed8d --- /dev/null +++ b/FloatingSpace/CodeEditor.js @@ -0,0 +1,215 @@ + +function newCodeEditor () { + const MODULE_NAME = 'Circular Menu Iem' + + let thisObject = { + isDeployed: undefined, + iconOK: undefined, + iconNOT_OK: undefined, + visible: false, + imagePathOK: undefined, + imagePathNOT_OK: undefined, + rawRadius: undefined, + targetRadius: undefined, + currentRadius: undefined, + container: undefined, + payload: undefined, + deactivate: deactivate, + activate: activate, + physics: physics, + drawBackground: drawBackground, + drawForeground: drawForeground, + getContainer: getContainer, + finalize: finalize, + initialize: initialize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = false + thisObject.container.detectMouseOver = false + thisObject.container.frame.radius = 0 + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + thisObject.container.frame.width = 150 + thisObject.container.frame.height = 30 + + let isMouseOver = false + + let selfMouseOverEventSubscriptionId + let selfMouseClickEventSubscriptionId + let selfMouseNotOverEventSubscriptionId + return thisObject + + function finalize () { + thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + thisObject.iconOK = undefined + thisObject.iconNOT_OK = undefined + thisObject.payload = undefined + } + + function initialize () { + /* Load Images */ + + thisObject.iconOK = new Image() + thisObject.iconOK.onload = onImageLoad + + function onImageLoad () { + thisObject.iconNOT_OK = new Image() + thisObject.iconNOT_OK.onload = onImageLoad + + function onImageLoad () { + thisObject.canDrawIcon = true + } + thisObject.iconNOT_OK.src = window.canvasApp.urlPrefix + thisObject.imagePathNOT_OK + } + thisObject.iconOK.src = window.canvasApp.urlPrefix + thisObject.imagePathOK + thisObject.icon = thisObject.iconOK // The default value is ON. + + selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + } + + function deactivate () { + if (thisObject.visible === true) { + thisObject.visible = false + let textArea = document.getElementById('textArea') + textArea.style.display = 'none' + thisObject.payload.node.code = textArea.value + } + } + + function activate (payload) { + thisObject.visible = true + thisObject.payload = payload + thisObject.rawRadius = 8 + thisObject.targetRadius = thisObject.container.frame.radius + thisObject.currentRadius = 0 + + const WIDTH = thisObject.container.frame.radius * 2.2 + const HEIGHT = thisObject.container.frame.radius * 1 + + let textArea = document.getElementById('textArea') + textArea.value = payload.node.code + textArea.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: 12px; background-color: rgb(204, 88, 53);color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' + textArea.style.display = 'block' + + let textAreaPosition = { + x: 0 - WIDTH / 2, + y: 0 + } + + textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) + + let textAreaDiv = document.getElementById('textAreaDiv') + textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' + } + + function getContainer (point) { + let container + if (thisObject.isDeployed === true) { + if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { + return thisObject.container + } else { + return undefined + } + } + } + + function physics () { + if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) { + if (thisObject.currentRadius < thisObject.targetRadius) { + thisObject.currentRadius = thisObject.currentRadius + 0.5 + } else { + thisObject.currentRadius = thisObject.currentRadius - 0.5 + } + } + + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = 0 + } + + function onMouseOver (point) { + if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { + isMouseOver = true + } else { + isMouseOver = false + } + } + + function onMouseNotOver (point) { + isMouseOver = false + } + + function onMouseClick (event) { + + } + + function drawBackground () { + if (thisObject.visible === true) { + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + let radius = thisObject.container.frame.radius + + if (radius > 0.5) { + browserCanvasContext.beginPath() + browserCanvasContext.arc(position.x, position.y, radius * 1.5 + 3, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')' + browserCanvasContext.fill() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(position.x, position.y, radius * 1.5, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + 1 + ')' + browserCanvasContext.fill() + } + } + } + function drawForeground () { + let iconPosition = { + x: 0, + y: thisObject.currentRadius * 1.5 + } + + iconPosition = thisObject.container.frame.frameThisPoint(iconPosition) + + /* Menu Item */ + + if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) { + browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) + + /* Menu Label */ + + let label = 'Code looks good!' + let labelPoint + let fontSize = 10 + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) { + labelPoint = { + x: iconPosition.x + thisObject.currentRadius + 10, + y: iconPosition.y + fontSize * FONT_ASPECT_RATIO + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } +} + diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 66639bde1..2dc24d638 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -12,6 +12,7 @@ function newStrategyPart () { isOnFocus: false, container: undefined, payload: undefined, + codeEditor: undefined, physics: physics, drawBackground: drawBackground, drawMiddleground: drawMiddleground, @@ -51,6 +52,11 @@ function newStrategyPart () { thisObject.menu.finalize() thisObject.menu = undefined + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.finalize() + thisObject.codeEditor = undefined + } + floatingLayer = undefined image = undefined imagePath = undefined @@ -67,6 +73,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Open Settings', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Settings', visible: false, imagePathOn: 'Images/icons/style-01/tools.png', @@ -78,6 +85,7 @@ function newStrategyPart () { }, { action: 'Delete Strategy', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -94,6 +102,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Situation', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -110,6 +119,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Situation', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -126,6 +136,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Situation', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -142,6 +153,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Phase', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Phase', visible: false, imagePathOn: 'Images/icons/style-01/placeholder.png', @@ -158,6 +170,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Phase', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Phase', visible: false, imagePathOn: 'Images/icons/style-01/placeholder.png', @@ -174,6 +187,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Edit Code', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', @@ -185,6 +199,7 @@ function newStrategyPart () { }, { action: 'Add Situation', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', @@ -196,6 +211,7 @@ function newStrategyPart () { }, { action: 'Delete Phase', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Delete This Phase', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -212,6 +228,7 @@ function newStrategyPart () { menuItemsInitialValues = [ { action: 'Add Condition', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Add Condition', visible: false, imagePathOn: 'Images/icons/style-01/testing.png', @@ -223,6 +240,7 @@ function newStrategyPart () { }, { action: 'Delete Situation', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Delete This Situation', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -236,9 +254,13 @@ function newStrategyPart () { } case 'Condition': { imagePath = 'Images/icons/style-01/testing.png' + thisObject.codeEditor = newCodeEditor() + thisObject.codeEditor.initialize() + thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) menuItemsInitialValues = [ { action: 'Edit Code', + actionFunction: thisObject.codeEditor.activate, label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', @@ -250,6 +272,7 @@ function newStrategyPart () { }, { action: 'Delete Condition', + actionFunction: thisObject.payload.onMenuItemClick, label: 'Delete This Condition', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', @@ -303,6 +326,10 @@ function newStrategyPart () { function physics () { thisObject.menu.physics() + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.physics() + } + if (thisObject.payload.chainParent === undefined) { return } thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x @@ -315,6 +342,10 @@ function newStrategyPart () { function onNotFocus () { thisObject.isOnFocus = false + + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.deactivate() + } } function onMouseClick (event) { @@ -350,6 +381,11 @@ function newStrategyPart () { drawBodyAndPicture(params) thisObject.menu.drawForeground() + + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.drawBackground() + thisObject.codeEditor.drawForeground() + } } } @@ -480,3 +516,4 @@ function newStrategyPart () { } } } + From 70cd66f7be350ffa982d79a526180e34c52de485 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 12:34:28 +0200 Subject: [PATCH 103/221] Cannot go out of vewport --- FloatingSpace/CodeEditor.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index a9cf2ed8d..933297c70 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -87,26 +87,28 @@ function newCodeEditor () { } function activate (payload) { - thisObject.visible = true - thisObject.payload = payload - thisObject.rawRadius = 8 - thisObject.targetRadius = thisObject.container.frame.radius - thisObject.currentRadius = 0 - const WIDTH = thisObject.container.frame.radius * 2.2 const HEIGHT = thisObject.container.frame.radius * 1 - let textArea = document.getElementById('textArea') - textArea.value = payload.node.code - textArea.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: 12px; background-color: rgb(204, 88, 53);color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' - textArea.style.display = 'block' - let textAreaPosition = { x: 0 - WIDTH / 2, y: 0 } textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) + if (textAreaPosition.y < window.canvasApp.topMargin) { return } + + thisObject.visible = true + thisObject.payload = payload + thisObject.rawRadius = 8 + thisObject.targetRadius = thisObject.container.frame.radius + thisObject.currentRadius = 0 + + let textArea = document.getElementById('textArea') + textArea.value = payload.node.code + textArea.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: 12px; background-color: rgb(204, 88, 53);color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' + textArea.style.display = 'block' + textArea.focus() let textAreaDiv = document.getElementById('textAreaDiv') textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' From 9ded6a86d8cb972e52b7ae2a3550b18b38ac3efe Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 12:59:32 +0200 Subject: [PATCH 104/221] showing titles inside code editor. --- FloatingSpace/CodeEditor.js | 4 ++-- FloatingSpace/StrategyPart.js | 31 +++++++++++++++++++++++++------ 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index 933297c70..d606461f9 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -167,13 +167,13 @@ function newCodeEditor () { if (radius > 0.5) { browserCanvasContext.beginPath() - browserCanvasContext.arc(position.x, position.y, radius * 1.5 + 3, 0, Math.PI * 2, true) + browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')' browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.arc(position.x, position.y, radius * 1.5, 0, Math.PI * 2, true) + browserCanvasContext.arc(position.x, position.y, radius * 1.3, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + 1 + ')' browserCanvasContext.fill() diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 2dc24d638..f81e6e3ab 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -377,15 +377,22 @@ function newStrategyPart () { drawConnectingLine() thisObject.menu.drawBackground() - drawText(params) - - drawBodyAndPicture(params) - thisObject.menu.drawForeground() - if (thisObject.codeEditor !== undefined) { thisObject.codeEditor.drawBackground() thisObject.codeEditor.drawForeground() } + + drawText(params) + + if (thisObject.codeEditor !== undefined) { + if (thisObject.codeEditor.visible === false) { + drawBodyAndPicture(params) + thisObject.menu.drawForeground() + } + } else { + drawBodyAndPicture(params) + thisObject.menu.drawForeground() + } } } @@ -446,6 +453,8 @@ function newStrategyPart () { let label if (radius > 6 && thisObject.isOnFocus === true) { + const MAX_LABEL_LENGTH = 25 + browserCanvasContext.strokeStyle = params.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -453,8 +462,12 @@ function newStrategyPart () { label = params.payload.downLabel if (label !== undefined) { + if (label.length > MAX_LABEL_LENGTH) { + label = label.substring(0, MAX_LABEL_LENGTH) + '...' + } + labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2, y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 } @@ -464,9 +477,15 @@ function newStrategyPart () { } } if (radius > 6) { + const MAX_LABEL_LENGTH = 30 + label = params.payload.upLabel if (label !== undefined) { + if (label.length > MAX_LABEL_LENGTH) { + label = label.substring(0, MAX_LABEL_LENGTH) + '...' + } + labelPoint = { x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 From 6b680431862ac449311da130c0504f7a824fb368 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 17:09:31 +0200 Subject: [PATCH 105/221] Edit code of a Phase DONE --- FloatingSpace/StrategyPart.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index f81e6e3ab..733b41f43 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -183,11 +183,16 @@ function newStrategyPart () { break } case 'Phase': { + imagePath = 'Images/icons/style-01/testing.png' + thisObject.codeEditor = newCodeEditor() + thisObject.codeEditor.initialize() + thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) + imagePath = 'Images/icons/style-01/placeholder.png' menuItemsInitialValues = [ { action: 'Edit Code', - actionFunction: thisObject.payload.onMenuItemClick, + actionFunction: thisObject.codeEditor.activate, label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', @@ -535,4 +540,3 @@ function newStrategyPart () { } } } - From 99acdafdaf4bca11137c41852928228765808f94 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 17:51:11 +0200 Subject: [PATCH 106/221] Dinamic numbering of parts of different types --- FloatingSpace/StrategyPart.js | 43 +++++++++++++++++++++++++++++++++++ StrategySpace/Strategy.js | 30 ++++++++++++------------ 2 files changed, 58 insertions(+), 15 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 733b41f43..6ffd5dda7 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -485,6 +485,7 @@ function newStrategyPart () { const MAX_LABEL_LENGTH = 30 label = params.payload.upLabel + label = addIndexNumber(label) if (label !== undefined) { if (label.length > MAX_LABEL_LENGTH) { @@ -503,6 +504,47 @@ function newStrategyPart () { } } + function addIndexNumber (label) { + switch (thisObject.type) { + case 'Phase': { + let parent = thisObject.payload.parentNode + for (let i = 0; i < parent.phases.length; i++) { + let phase = parent.phases[i] + if (phase.name === thisObject.payload.node.name) { + label = label + ' #' + (i + 1) + return label + } + } + break + } + case 'Situation': { + let parent = thisObject.payload.parentNode + for (let i = 0; i < parent.situations.length; i++) { + let situation = parent.situations[i] + if (situation.name === thisObject.payload.node.name) { + label = label + ' #' + (i + 1) + return label + } + } + break + } + case 'Condition': { + let parent = thisObject.payload.parentNode + for (let i = 0; i < parent.conditions.length; i++) { + let condition = parent.conditions[i] + if (condition.name === thisObject.payload.node.name) { + label = label + ' #' + (i + 1) + return label + } + } + break + } + default: { + return label + } + } + } + function drawBodyAndPicture (params) { let position = { x: params.container.frame.position.x, @@ -540,3 +582,4 @@ function newStrategyPart () { } } } + diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index ce1b8d40c..5fe185c67 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -80,33 +80,33 @@ function newStrategy () { createPart('Strategy Entry Event', '', strategy.entryPoint, strategy, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.entryPoint, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } createPart('Strategy Exit Event', '', strategy.exitPoint, strategy, strategy) for (let k = 0; k < strategy.exitPoint.situations.length; k++) { let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.exitPoint, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } createPart('Trade Entry Event', '', strategy.sellPoint, strategy, strategy) for (let k = 0; k < strategy.sellPoint.situations.length; k++) { let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, strategy.sellPoint, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } @@ -121,15 +121,15 @@ function newStrategy () { chainParent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, strategy.stopLoss, chainParent, 'Stop Phase' + ' #' + (p + 1)) + createPart('Phase', phase.name, phase, strategy.stopLoss, chainParent, 'Stop Phase') for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, phase, phase, 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } } @@ -144,15 +144,15 @@ function newStrategy () { chainParent = lastPhase } lastPhase = phase - createPart('Phase', phase.name, phase, strategy.buyOrder, chainParent, 'Take Profit Phase' + ' #' + (p + 1)) + createPart('Phase', phase.name, phase, strategy.buyOrder, chainParent, 'Take Profit Phase') for (let k = 0; k < phase.situations.length; k++) { let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (k + 1)) + createPart('Situation', situation.name, situation, phase, phase, 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } } @@ -256,7 +256,7 @@ function newStrategy () { } else { phaseChainParent = phaseParent } - createPart('Phase', phase.name, phase, phaseParent, phaseChainParent, 'Phase' + ' #' + (m + 1)) + createPart('Phase', phase.name, phase, phaseParent, phaseChainParent, 'Phase') } break case 'Add Situation': @@ -268,7 +268,7 @@ function newStrategy () { conditions: [] } phase.situations.push(situation) - createPart('Situation', situation.name, situation, phase, phase, 'Situation' + ' #' + (m + 1)) + createPart('Situation', situation.name, situation, phase, phase, 'Situation') } break case 'Add Condition': @@ -280,7 +280,7 @@ function newStrategy () { code: '' } situation.conditions.push(condition) - createPart('Condition', condition.name, condition, situation, situation, 'Condition' + ' #' + (m + 1)) + createPart('Condition', condition.name, condition, situation, situation, 'Condition') } break case 'Delete Phase': { From 42968635f702ce7c2d248099d6065552cf902274 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 18:15:01 +0200 Subject: [PATCH 107/221] Use of Ids instead of names to find parts --- FloatingSpace/StrategyPart.js | 6 +++--- StrategySpace/Strategy.js | 17 ++++++++++------- Utilities.js | 9 ++++++++- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 6ffd5dda7..7642c3a7f 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -510,7 +510,7 @@ function newStrategyPart () { let parent = thisObject.payload.parentNode for (let i = 0; i < parent.phases.length; i++) { let phase = parent.phases[i] - if (phase.name === thisObject.payload.node.name) { + if (phase.id === thisObject.payload.node.id) { label = label + ' #' + (i + 1) return label } @@ -521,7 +521,7 @@ function newStrategyPart () { let parent = thisObject.payload.parentNode for (let i = 0; i < parent.situations.length; i++) { let situation = parent.situations[i] - if (situation.name === thisObject.payload.node.name) { + if (situation.id === thisObject.payload.node.id) { label = label + ' #' + (i + 1) return label } @@ -532,7 +532,7 @@ function newStrategyPart () { let parent = thisObject.payload.parentNode for (let i = 0; i < parent.conditions.length; i++) { let condition = parent.conditions[i] - if (condition.name === thisObject.payload.node.name) { + if (condition.id === thisObject.payload.node.id) { label = label + ' #' + (i + 1) return label } diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 5fe185c67..14c9efb9c 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -66,6 +66,10 @@ function newStrategy () { node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) node.payload = payload + + if (node.id === undefined) { + node.id = newUniqueId() + } } function destroyPart (node) { @@ -245,7 +249,7 @@ function newStrategy () { let phaseParent = payload.node let m = phaseParent.phases.length let phase = { - name: 'New Phase' + ' #' + (m + 1), + name: 'New Phase', code: '', situations: [] } @@ -264,7 +268,7 @@ function newStrategy () { let phase = payload.node let m = phase.situations.length let situation = { - name: 'New Situation' + ' #' + (m + 1), + name: 'New Situation', conditions: [] } phase.situations.push(situation) @@ -276,7 +280,7 @@ function newStrategy () { let situation = payload.node let m = situation.conditions.length let condition = { - name: 'New Condition' + ' #' + (m + 1), + name: 'New Condition', code: '' } situation.conditions.push(condition) @@ -304,7 +308,7 @@ function newStrategy () { let payload = node.payload for (let k = 0; k < payload.parentNode.phases.length; k++) { let phase = payload.parentNode.phases[k] - if (phase.name === node.name) { + if (phase.id === node.id) { for (let j = 0; j < phase.situations.length; j++) { let situation = phase.situations[j] for (let i = 0; i < situation.conditions.length; i++) { @@ -335,7 +339,7 @@ function newStrategy () { let payload = node.payload for (let j = 0; j < payload.parentNode.situations.length; j++) { let situation = payload.parentNode.situations[j] - if (situation.name === node.name) { + if (situation.id === node.id) { for (let i = 0; i < situation.conditions.length; i++) { let condition = situation.conditions[i] destroyPart(condition) @@ -354,7 +358,7 @@ function newStrategy () { let payload = node.payload for (let i = 0; i < payload.parentNode.conditions.length; i++) { let condition = payload.parentNode.conditions[i] - if (condition.name === node.name) { + if (condition.id === node.id) { destroyPart(node) payload.parentNode.conditions.splice(i, 1) cleanNode(condition) @@ -378,4 +382,3 @@ function newStrategy () { node.cleaned = true } } - diff --git a/Utilities.js b/Utilities.js index 663e3eb4b..8f38d99d8 100644 --- a/Utilities.js +++ b/Utilities.js @@ -172,7 +172,7 @@ function loadEmoji (pPath) { function printLabel (labelToPrint, x, y, opacity, fontSize) { let labelPoint - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label = '' + labelToPrint @@ -181,3 +181,10 @@ function printLabel (labelToPrint, x, y, opacity, fontSize) { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' browserCanvasContext.fillText(label, x, y) } + +function newUniqueId () { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { + var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8) + return v.toString(16) + }) +} From b19effd58f4e21d42169c0358416a6bad8afde7c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 18:51:52 +0200 Subject: [PATCH 108/221] Preparing to Save the strategy --- FloatingSpace/StrategyPart.js | 35 +++++++++-- StrategySpace/ConstDeleteStrategy.js | 0 StrategySpace/ConstGetStrategies.js | 85 +++++++++++++++++++++++++++ StrategySpace/ConstNewStrategy.js | 0 StrategySpace/ConstUpdateStrategy.js | 0 StrategySpace/Strategy.js | 8 +++ StrategySpace/StrategyCollection.js | 88 +--------------------------- 7 files changed, 123 insertions(+), 93 deletions(-) create mode 100644 StrategySpace/ConstDeleteStrategy.js create mode 100644 StrategySpace/ConstGetStrategies.js create mode 100644 StrategySpace/ConstNewStrategy.js create mode 100644 StrategySpace/ConstUpdateStrategy.js diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 7642c3a7f..0eeb1ed7e 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -72,16 +72,28 @@ function newStrategyPart () { imagePath = 'Images/icons/style-01/quality.png' menuItemsInitialValues = [ { - action: 'Open Settings', + action: 'Reload Strategy', actionFunction: thisObject.payload.onMenuItemClick, - label: 'Settings', + label: 'Reload Last Saved', visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOn: 'Images/icons/style-01/pixel.png', imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: 20 + angle: -60 + }, + { + action: 'Save Strategy', + actionFunction: thisObject.payload.onMenuItemClick, + label: 'Save Changes', + visible: false, + imagePathOn: 'Images/icons/style-01/upload.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 }, { action: 'Delete Strategy', @@ -93,7 +105,19 @@ function newStrategyPart () { rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: -20 + angle: 20 + }, + { + action: 'Open Settings', + actionFunction: thisObject.payload.onMenuItemClick, + label: 'Settings', + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 }] break } @@ -582,4 +606,3 @@ function newStrategyPart () { } } } - diff --git a/StrategySpace/ConstDeleteStrategy.js b/StrategySpace/ConstDeleteStrategy.js new file mode 100644 index 000000000..e69de29bb diff --git a/StrategySpace/ConstGetStrategies.js b/StrategySpace/ConstGetStrategies.js new file mode 100644 index 000000000..46acca721 --- /dev/null +++ b/StrategySpace/ConstGetStrategies.js @@ -0,0 +1,85 @@ +const GRAPHQL_QUERY_GET_STRATEGIES = 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 + } + } + } + } + } + } + } + ` diff --git a/StrategySpace/ConstNewStrategy.js b/StrategySpace/ConstNewStrategy.js new file mode 100644 index 000000000..e69de29bb diff --git a/StrategySpace/ConstUpdateStrategy.js b/StrategySpace/ConstUpdateStrategy.js new file mode 100644 index 000000000..e69de29bb diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 14c9efb9c..af427bb89 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -241,6 +241,14 @@ function newStrategy () { break + case 'Reload Strategy': + + break + + case 'Save Strategy': + + break + case 'Edit Code': break diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index 0713e7918..c5f9075c6 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -85,96 +85,10 @@ function newStrategyCollection () { } }]) - 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, + query: GRAPHQL_QUERY_GET_STRATEGIES, variables: { fbSlug: strategySimulationClone} }) .then(response => { From 702a0b818956e86f5e967dbb376fc4617bdc1f33 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 8 May 2019 19:24:27 +0200 Subject: [PATCH 109/221] First Constants at their own file --- StrategySpace/ConstNewStrategy.js | 267 +++++++++++++++++++++++++++ StrategySpace/ConstUpdateStrategy.js | 85 +++++++++ 2 files changed, 352 insertions(+) diff --git a/StrategySpace/ConstNewStrategy.js b/StrategySpace/ConstNewStrategy.js index e69de29bb..197c07277 100644 --- a/StrategySpace/ConstNewStrategy.js +++ b/StrategySpace/ConstNewStrategy.js @@ -0,0 +1,267 @@ + const GRAPHQL_MUTATION_UPDATE_STRATEGY = Apollo.gql` +mutation { + strategizer_EditStrategy( + id: "sdfs" + strategy: { + subStrategies: [ + { + active: true + name: "Trend Following" + entryPoint: { + situations: [ + { + name: "Price Collapsing" + conditions: [ + { + name: "%B Moving Average going down" + code: "percentageBandwidth.previous.direction === 'down' && percentageBandwidth.direction === 'down'" + } + { + name: "%B Bandwidth going up" + code: "percentageBandwidth.previous.previous.bandwidth < percentageBandwidth.previous.bandwidth && percentageBandwidth.previous.bandwidth < percentageBandwidth.bandwidth" + } + { + name: "Candles Min going down" + code: "candle.previous.previous.min > candle.previous.min && candle.previous.min > candle.min" + } + ] + } + ] + } + exitPoint: { + situations: [ + { + name: "Market Reversing" + conditions: [ + { + name: "Close above Band Moving Average" + code: "candle.close > bollingerBand.movingAverage" + } + ] + } + ] + } + sellPoint: { + situations: [ + { + name: "Min below lower bollingerBand." + conditions: [ + { + name: "3 Candles MIN below Lower Band" + code: "candle.previous.previous.min < bollingerBand.previous.previous.movingAverage - bollingerBand.previous.previous.deviation && candle.previous.min < bollingerBand.previous.movingAverage - bollingerBand.previous.deviation && candle.min < bollingerBand.movingAverage - bollingerBand.deviation" + } + ] + } + ] + } + stopLoss: { + phases: [ + { + name: "Following Sell Rate" + code: "newStopLoss = sellRate + sellRate * (stopLossPercentage - stopLossDecay) / 100" + situations: [ + { + name: "Candle below Moving Average" + conditions: [ + { + name: "Candle fully below Band Moving Average" + code: "candle.max < bollingerBand.movingAverage" + } + { + name: "Band Moving Average going down" + code: "bollingerBand.direction === 'down'" + } + ] + } + ] + } + { + name: "Above Bands Moving Average" + code: "newStopLoss = bollingerBand.movingAverage + bollingerBand.movingAverage * (stopLossPercentage - stopLossDecay) / 100" + situations: [ + { + name: "Candle below Moving Average" + conditions: [ + { + name: "Candle MAX below lower band" + code: "candle.max < bollingerBand.movingAverage - bollingerBand.deviation" + } + ] + } + ] + } + { + name: "At Bands Moving Average" + code: "newStopLoss = bollingerBand.movingAverage" + situations: [] + } + ] + } + buyOrder: { + phases: [ + { + name: "12 times standard deviation" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 12" + situations: [ + { + name: "Candle cut by lower band" + conditions: [ + { +name: "Max above lower band" + code: "candle.max > bollingerBand.movingAverage - bollingerBand.deviation" + } + { + name: "MIN below lower band" + code: "candle.min < bollingerBand.movingAverage - bollingerBand.deviation" + } + { + name: "Band Moving Average going down" + code: "bollingerBand.previous.movingAverage > bollingerBand.movingAverage" + } + ] + } + ] + } + { + name: "10 times standard deviation" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 10" + situations: [ + { + name: "%B starting to revert" + conditions: [ + { + name: "%B Moving Average going up" + code: "percentageBandwidth.direction === 'up'" + } + { + name: "%B Moving Average above 0" + code: "percentageBandwidth.movingAverage > 0" + } + ] + } + ] + } + { + name: "4 times standard deviation" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 4" + situations: [ + { + name: "%B going down again" + conditions: [ + { + name: "%B Moving Average going down" + code: "percentageBandwidth.direction === 'down'" + } + ] + } + ] + } + { + name: "3 times standard deviation" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 3" + situations: [ + { + name: "%B going up and above 30" + conditions: [ + { + name: "%B Moving Average going up" + code: "percentageBandwidth.direction === 'up'" + } + { + name: "%B Moving Average above 30" + code: "percentageBandwidth.movingAverage > 30" + } + ] + } + ] + } + { + name: "At lower band" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 2" + situations: [] + } + ] + } + } + { + active: true + name: "Range Trading" + entryPoint: { + situations: [ + { + name: "Gentle Up Trend" + conditions: [ + { + name: "Sub-Channel going up" + code: "subChannel.direction === 'up'" + } + { + name: "Sub-Channel Side|Gentle|Medium" + code: "subChannel.slope === 'Side' || subChannel.slope === 'Gentle' || subChannel.slope === 'Medium'" + } + { + name: "Candle Close above Lower Band" + code: "candle.close > bollingerBand.movingAverage + bollingerBand.deviation" + } + ] + } + ] + } + exitPoint: { + situations: [ + { + name: "Outside Sub-Channel" + conditions: [ + { + name: "Going down or too Steep" + code: "subChannel.direction === 'Down' || subChannel.slope === 'Steep' || subChannel.slope === 'Extreme'" + + +} + ] + } + ] + } + sellPoint: { + situations: [ + { + name: "Min below lower bollingerBand." + conditions: [ + { + name: "%B Moving Average going down" + code: "percentageBandwidth.previous.movingAverage > percentageBandwidth.movingAverage" + } + { + name: "%B Moving Average above 90" + code: "percentageBandwidth.previous.movingAverage > 90" + } + ] + } + ] + } + stopLoss: { + phases: [ + { + name: "Following Sell Rate" + code: "newStopLoss = sellRate + sellRate * (stopLossPercentage - stopLossDecay) / 100" + situations: [] + } + ] + } + buyOrder: { + phases: [ + { + name: "Between Band Moving Average and Lower Band" + code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation" + situations: [] + } + ] + } + } + ] + } + ) { + id + } +} +` diff --git a/StrategySpace/ConstUpdateStrategy.js b/StrategySpace/ConstUpdateStrategy.js index e69de29bb..72be45218 100644 --- a/StrategySpace/ConstUpdateStrategy.js +++ b/StrategySpace/ConstUpdateStrategy.js @@ -0,0 +1,85 @@ +const GRAPHQL_MUTATION_UPDATE_STRATEGY = 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 + } + } + } + } + } + } + } + ` From 42d9fc7e2c1b7f7b0a1258786ed82ab01c9ae5b8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 08:04:57 +0200 Subject: [PATCH 110/221] Part Title as different object --- FloatingSpace/FloatingObject.js | 4 +- FloatingSpace/StrategyPart.js | 53 +++--- FloatingSpace/StrategyPartTitle.js | 171 ++++++++++++++++++ FloatingSpace/StrategyParts.js | 10 +- StrategySpace/ConstNewStrategy.js | 267 ----------------------------- StrategySpace/Strategy.js | 6 +- 6 files changed, 202 insertions(+), 309 deletions(-) create mode 100644 FloatingSpace/StrategyPartTitle.js diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 560f1d3d5..d4c27396d 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -66,7 +66,7 @@ function newFloatingObject () { thisObject.underlayingObject = undefined } - function initialize (pType, pSubType, floatingLayer) { + function initialize (pType, floatingLayer) { switch (pType) { case 'Profile Ball': { @@ -82,7 +82,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() - thisObject.underlayingObject.initialize(floatingLayer, pSubType, thisObject.payload) + thisObject.underlayingObject.initialize(floatingLayer, thisObject.payload) thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) break } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 0eeb1ed7e..b70212ae2 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -13,6 +13,7 @@ function newStrategyPart () { container: undefined, payload: undefined, codeEditor: undefined, + partTitle: undefined, physics: physics, drawBackground: drawBackground, drawMiddleground: drawMiddleground, @@ -51,6 +52,8 @@ function newStrategyPart () { thisObject.payload = undefined thisObject.menu.finalize() thisObject.menu = undefined + thisObject.partTitle.finalize() + thisObject.partTitle = undefined if (thisObject.codeEditor !== undefined) { thisObject.codeEditor.finalize() @@ -62,12 +65,12 @@ function newStrategyPart () { imagePath = undefined } - function initialize (pFloatingLayer, pType, pPayload) { - thisObject.payload = pPayload + function initialize (pFloatingLayer, payload) { + thisObject.payload = payload floatingLayer = pFloatingLayer let menuItemsInitialValues = [] - switch (pType) { + switch (thisObject.payload.node.type) { case 'Strategy': { imagePath = 'Images/icons/style-01/quality.png' menuItemsInitialValues = [ @@ -314,14 +317,22 @@ function newStrategyPart () { break } default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + pType) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + thisObject.payload.node.type) } } } +/* Initialize the Menu */ + thisObject.menu = newCircularMenu() thisObject.menu.initialize(menuItemsInitialValues, thisObject.payload) thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) +/* Initialize Part Title */ + + thisObject.partTitle = newStrategyPartTitle() + thisObject.partTitle.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) + thisObject.partTitle.initialize(thisObject.payload) + /* Load Part Image */ if (imagePath !== undefined) { @@ -342,6 +353,9 @@ function newStrategyPart () { function getContainer (point) { let container + container = thisObject.partTitle.getContainer(point) + if (container !== undefined) { return container } + container = thisObject.menu.getContainer(point) if (container !== undefined) { return container } @@ -354,6 +368,7 @@ function newStrategyPart () { function physics () { thisObject.menu.physics() + thisObject.partTitle.physics() if (thisObject.codeEditor !== undefined) { thisObject.codeEditor.physics() @@ -371,10 +386,6 @@ function newStrategyPart () { function onNotFocus () { thisObject.isOnFocus = false - - if (thisObject.codeEditor !== undefined) { - thisObject.codeEditor.deactivate() - } } function onMouseClick (event) { @@ -391,6 +402,7 @@ function newStrategyPart () { function drawMiddleground (params) { if (thisObject.isOnFocus === false) { drawText(params) + thisObject.partTitle.draw(params) } } @@ -412,6 +424,7 @@ function newStrategyPart () { } drawText(params) + thisObject.partTitle.draw(params) if (thisObject.codeEditor !== undefined) { if (thisObject.codeEditor.visible === false) { @@ -481,30 +494,6 @@ function newStrategyPart () { let fontSize = params.currentFontSize let label - if (radius > 6 && thisObject.isOnFocus === true) { - const MAX_LABEL_LENGTH = 25 - - browserCanvasContext.strokeStyle = params.labelStrokeStyle - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - label = params.payload.downLabel - - if (label !== undefined) { - if (label.length > MAX_LABEL_LENGTH) { - label = label.substring(0, MAX_LABEL_LENGTH) + '...' - } - - labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2, - y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = params.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) - } - } if (radius > 6) { const MAX_LABEL_LENGTH = 30 diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js new file mode 100644 index 000000000..fddf36c15 --- /dev/null +++ b/FloatingSpace/StrategyPartTitle.js @@ -0,0 +1,171 @@ + +function newStrategyPartTitle () { + const MODULE_NAME = 'Strategy Part Title' + const ERROR_LOG = true + + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let thisObject = { + container: undefined, + payload: undefined, + physics: physics, + draw: draw, + getContainer: getContainer, + finalize: finalize, + initialize: initialize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false + thisObject.container.frame.radius = 0 + + let selfFocusEventSubscriptionId + let selfNotFocuskEventSubscriptionId + let selfMouseClickEventSubscriptionId + + return thisObject + + function finalize () { + thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + + thisObject.container.finalize() + thisObject.container = undefined + thisObject.payload = undefined + } + + function initialize (payload) { + thisObject.payload = payload + + switch (payload.node.type) { + case 'Strategy': { + break + } + case 'Strategy Entry Event': { + break + } + case 'Strategy Exit Event': { + break + } + case 'Trade Entry Event': { + break + } + case 'Stop': { + break + } + case 'Take Profit': { + break + } + case 'Phase': { + break + } + case 'Situation': { + break + } + case 'Condition': { + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + payload.node.type) } + } + } + + selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) + selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + } + + function getContainer (point) { + let container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function physics () { + thisObject.container.frame.position.x = 0 - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2 + thisObject.container.frame.position.y = 0 - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + + thisObject.container.frame.width = thisObject.container.frame.radius + thisObject.container.frame.height = 20 + } + + function onFocus () { + thisObject.isOnFocus = true + } + + function onNotFocus () { + thisObject.isOnFocus = false + } + + function onMouseClick (event) { + + } + + function draw (params) { + if (thisObject.isOnFocus === true) { + drawText(params) + } + } + + function drawText (params) { +/* Text Follows */ + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + let backgroundParams = { + cornerRadius: 3, + lineWidth: 0.1, + container: thisObject.container, + borderColor: UI_COLOR.DARK, + backgroundColor: UI_COLOR.RED, + castShadow: false, + opacity: 1 + } + + roundedCornersBackground(backgroundParams) + + let radius = thisObject.container.frame.radius + /* Label Text */ + let labelPoint + let fontSize = params.currentFontSize + let label + + if (radius > 6 && thisObject.isOnFocus === true) { + const MAX_LABEL_LENGTH = 25 + + browserCanvasContext.strokeStyle = params.labelStrokeStyle + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + label = params.payload.downLabel + + if (label !== undefined) { + if (label.length > MAX_LABEL_LENGTH) { + label = label.substring(0, MAX_LABEL_LENGTH) + '...' + } + + labelPoint = { + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2, + y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = params.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } +} + diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js index f53cf01eb..25391cacc 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyParts.js @@ -26,15 +26,14 @@ function newStrategyParts () { floatingLayer = pFloatingLayer } - function createNewStrategyPart (type, payload) { + function createNewStrategyPart (payload) { let floatingObject = newFloatingObject() floatingObject.payload = payload - floatingObject.initialize('Strategy Part', type, floatingLayer) - floatingObject.underlayingObject.type = type // after initialize + floatingObject.initialize('Strategy Part', payload.node.type, floatingLayer) const FRICTION = 0.97 - switch (type) { + switch (payload.node.type) { case 'Strategy': { level_1() break @@ -76,7 +75,7 @@ function newStrategyParts () { break } default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + type) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + payload.node.type) } return } } @@ -147,3 +146,4 @@ function newStrategyParts () { floatingLayer.killFloatingObject(pFloatingObjectHandle) } } + diff --git a/StrategySpace/ConstNewStrategy.js b/StrategySpace/ConstNewStrategy.js index 197c07277..e69de29bb 100644 --- a/StrategySpace/ConstNewStrategy.js +++ b/StrategySpace/ConstNewStrategy.js @@ -1,267 +0,0 @@ - const GRAPHQL_MUTATION_UPDATE_STRATEGY = Apollo.gql` -mutation { - strategizer_EditStrategy( - id: "sdfs" - strategy: { - subStrategies: [ - { - active: true - name: "Trend Following" - entryPoint: { - situations: [ - { - name: "Price Collapsing" - conditions: [ - { - name: "%B Moving Average going down" - code: "percentageBandwidth.previous.direction === 'down' && percentageBandwidth.direction === 'down'" - } - { - name: "%B Bandwidth going up" - code: "percentageBandwidth.previous.previous.bandwidth < percentageBandwidth.previous.bandwidth && percentageBandwidth.previous.bandwidth < percentageBandwidth.bandwidth" - } - { - name: "Candles Min going down" - code: "candle.previous.previous.min > candle.previous.min && candle.previous.min > candle.min" - } - ] - } - ] - } - exitPoint: { - situations: [ - { - name: "Market Reversing" - conditions: [ - { - name: "Close above Band Moving Average" - code: "candle.close > bollingerBand.movingAverage" - } - ] - } - ] - } - sellPoint: { - situations: [ - { - name: "Min below lower bollingerBand." - conditions: [ - { - name: "3 Candles MIN below Lower Band" - code: "candle.previous.previous.min < bollingerBand.previous.previous.movingAverage - bollingerBand.previous.previous.deviation && candle.previous.min < bollingerBand.previous.movingAverage - bollingerBand.previous.deviation && candle.min < bollingerBand.movingAverage - bollingerBand.deviation" - } - ] - } - ] - } - stopLoss: { - phases: [ - { - name: "Following Sell Rate" - code: "newStopLoss = sellRate + sellRate * (stopLossPercentage - stopLossDecay) / 100" - situations: [ - { - name: "Candle below Moving Average" - conditions: [ - { - name: "Candle fully below Band Moving Average" - code: "candle.max < bollingerBand.movingAverage" - } - { - name: "Band Moving Average going down" - code: "bollingerBand.direction === 'down'" - } - ] - } - ] - } - { - name: "Above Bands Moving Average" - code: "newStopLoss = bollingerBand.movingAverage + bollingerBand.movingAverage * (stopLossPercentage - stopLossDecay) / 100" - situations: [ - { - name: "Candle below Moving Average" - conditions: [ - { - name: "Candle MAX below lower band" - code: "candle.max < bollingerBand.movingAverage - bollingerBand.deviation" - } - ] - } - ] - } - { - name: "At Bands Moving Average" - code: "newStopLoss = bollingerBand.movingAverage" - situations: [] - } - ] - } - buyOrder: { - phases: [ - { - name: "12 times standard deviation" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 12" - situations: [ - { - name: "Candle cut by lower band" - conditions: [ - { -name: "Max above lower band" - code: "candle.max > bollingerBand.movingAverage - bollingerBand.deviation" - } - { - name: "MIN below lower band" - code: "candle.min < bollingerBand.movingAverage - bollingerBand.deviation" - } - { - name: "Band Moving Average going down" - code: "bollingerBand.previous.movingAverage > bollingerBand.movingAverage" - } - ] - } - ] - } - { - name: "10 times standard deviation" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 10" - situations: [ - { - name: "%B starting to revert" - conditions: [ - { - name: "%B Moving Average going up" - code: "percentageBandwidth.direction === 'up'" - } - { - name: "%B Moving Average above 0" - code: "percentageBandwidth.movingAverage > 0" - } - ] - } - ] - } - { - name: "4 times standard deviation" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 4" - situations: [ - { - name: "%B going down again" - conditions: [ - { - name: "%B Moving Average going down" - code: "percentageBandwidth.direction === 'down'" - } - ] - } - ] - } - { - name: "3 times standard deviation" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 3" - situations: [ - { - name: "%B going up and above 30" - conditions: [ - { - name: "%B Moving Average going up" - code: "percentageBandwidth.direction === 'up'" - } - { - name: "%B Moving Average above 30" - code: "percentageBandwidth.movingAverage > 30" - } - ] - } - ] - } - { - name: "At lower band" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation * 2" - situations: [] - } - ] - } - } - { - active: true - name: "Range Trading" - entryPoint: { - situations: [ - { - name: "Gentle Up Trend" - conditions: [ - { - name: "Sub-Channel going up" - code: "subChannel.direction === 'up'" - } - { - name: "Sub-Channel Side|Gentle|Medium" - code: "subChannel.slope === 'Side' || subChannel.slope === 'Gentle' || subChannel.slope === 'Medium'" - } - { - name: "Candle Close above Lower Band" - code: "candle.close > bollingerBand.movingAverage + bollingerBand.deviation" - } - ] - } - ] - } - exitPoint: { - situations: [ - { - name: "Outside Sub-Channel" - conditions: [ - { - name: "Going down or too Steep" - code: "subChannel.direction === 'Down' || subChannel.slope === 'Steep' || subChannel.slope === 'Extreme'" - - -} - ] - } - ] - } - sellPoint: { - situations: [ - { - name: "Min below lower bollingerBand." - conditions: [ - { - name: "%B Moving Average going down" - code: "percentageBandwidth.previous.movingAverage > percentageBandwidth.movingAverage" - } - { - name: "%B Moving Average above 90" - code: "percentageBandwidth.previous.movingAverage > 90" - } - ] - } - ] - } - stopLoss: { - phases: [ - { - name: "Following Sell Rate" - code: "newStopLoss = sellRate + sellRate * (stopLossPercentage - stopLossDecay) / 100" - situations: [] - } - ] - } - buyOrder: { - phases: [ - { - name: "Between Band Moving Average and Lower Band" - code: "buyOrder = bollingerBand.movingAverage - bollingerBand.standardDeviation" - situations: [] - } - ] - } - } - ] - } - ) { - id - } -} -` diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index af427bb89..2567cbc9d 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -64,12 +64,12 @@ function newStrategy () { payload.chainParent = chainParent payload.onMenuItemClick = onMenuItemClick - node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload) - node.payload = payload - if (node.id === undefined) { node.id = newUniqueId() } + node.payload = payload + node.type = partType + node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(payload) } function destroyPart (node) { From e10425f85253897fdf9254ee86fa3b76b3a3356a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 08:07:43 +0200 Subject: [PATCH 111/221] Refactoring to Constructor --- FloatingSpace/{StrategyParts.js => StrategyPartConstructor.js} | 3 +-- Spaces/FloatingSpace.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) rename FloatingSpace/{StrategyParts.js => StrategyPartConstructor.js} (98%) diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyPartConstructor.js similarity index 98% rename from FloatingSpace/StrategyParts.js rename to FloatingSpace/StrategyPartConstructor.js index 25391cacc..93a2c1d85 100644 --- a/FloatingSpace/StrategyParts.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -1,5 +1,5 @@ -function newStrategyParts () { +function newStrategyPartConstructor () { const MODULE_NAME = 'Strategy Parts' const ERROR_LOG = true const logger = newWebDebugLog() @@ -146,4 +146,3 @@ function newStrategyParts () { floatingLayer.killFloatingObject(pFloatingObjectHandle) } } - diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index d234f61e5..14ea12a3b 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -55,7 +55,7 @@ function newFloatingSpace () { thisObject.noteSets = newNoteSets() thisObject.noteSets.initialize(thisObject.floatingLayer) - thisObject.strategyParts = newStrategyParts() + thisObject.strategyParts = newStrategyPartConstructor() thisObject.strategyParts.initialize(thisObject.floatingLayer) thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) From 8bad7502109307655cfa0faf06dfa1b6568e6e69 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 09:01:46 +0200 Subject: [PATCH 112/221] Big reorg of where things are, departure from Profile Balls and Notes --- FloatingSpace/FloatingLayer.js | 12 +++--- FloatingSpace/FloatingObject.js | 52 ++++++------------------ FloatingSpace/NoteSets.js | 4 +- FloatingSpace/ProfileBall.js | 4 +- FloatingSpace/ProfileBalls.js | 2 +- FloatingSpace/StrategyPart.js | 7 +--- FloatingSpace/StrategyPartConstructor.js | 30 ++++++++++---- FloatingSpace/StrategyPartTitle.js | 7 ++-- PlottersManager.js | 6 +-- Spaces/FloatingSpace.js | 8 ++-- StrategySpace/Strategy.js | 14 +++---- 11 files changed, 64 insertions(+), 82 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index d1dc9a1d1..db281d20f 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -22,7 +22,7 @@ function newFloatingLayer () { let thisObject = { addFloatingObject: addFloatingObject, - killFloatingObject: killFloatingObject, + removeFloatingObject: removeFloatingObject, getFloatingObject: getFloatingObject, physics: physics, changeTargetRepulsion: changeTargetRepulsion, @@ -91,7 +91,7 @@ function newFloatingLayer () { invisibleFloatingObjects.push(pFloatingObject) } - function killFloatingObject (pFloatingObjectHandle) { + function removeFloatingObject (pFloatingObjectHandle) { try { /* The floting object to be killed can be either at the visible or the invisible array. What we do here is look for it @@ -121,11 +121,11 @@ function newFloatingLayer () { } } - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> Floating Object Not Found.') } - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> Floating Object cannot be killed.') } - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> pFloatingObjectHandle = ' + pFloatingObjectHandle) } + if (ERROR_LOG === true) { logger.write('[ERROR] removeFloatingObject -> Floating Object Not Found.') } + if (ERROR_LOG === true) { logger.write('[ERROR] removeFloatingObject -> Floating Object cannot be killed.') } + if (ERROR_LOG === true) { logger.write('[ERROR] removeFloatingObject -> pFloatingObjectHandle = ' + pFloatingObjectHandle) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] removeFloatingObject -> err= ' + err.stack) } } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index d4c27396d..743726606 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -12,7 +12,6 @@ function newFloatingObject () { 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. - underlayingObject: undefined, currentSpeed: 0, // This is the current speed of the floating object. currentMass: 0, // This is the current mass of the floating object, including its zoom applied. friction: 0, // This is a factor that will ultimatelly desacelerate the floating object. @@ -62,38 +61,11 @@ function newFloatingObject () { thisObject.container.finalize() thisObject.container = undefined thisObject.payload = undefined - thisObject.underlayingObject.finalize() - thisObject.underlayingObject = undefined } - function initialize (pType, floatingLayer) { - switch (pType) { - - case 'Profile Ball': { - thisObject.underlayingObject = newProfileBall() - thisObject.underlayingObject.initialize() - break - } - case 'Note': { - thisObject.underlayingObject = newNote() - thisObject.underlayingObject.initialize() - break - } - - case 'Strategy Part': { - thisObject.underlayingObject = newStrategyPart() - thisObject.underlayingObject.initialize(floatingLayer, thisObject.payload) - thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) - break - } - default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Unsopported type received -> pType = ' + pType) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - break - } - } - - thisObject.type = pType + function initialize (type, payload) { + thisObject.payload = payload + thisObject.type = type selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) @@ -111,7 +83,7 @@ function newFloatingObject () { function getContainer (point) { let container - container = thisObject.underlayingObject.getContainer(point) + container = thisObject.payload.uiObject.getContainer(point) if (container !== undefined) { return container } if (thisObject.container.frame.isThisPointHere(point, true) === true) { @@ -123,7 +95,7 @@ function newFloatingObject () { function physics () { thisObjectPhysics() - thisObject.underlayingObject.physics() + thisObject.payload.uiObject.physics() } function thisObjectPhysics () { @@ -176,7 +148,7 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 2.0 thisObject.targetFontSize = thisObject.rawFontSize * 2.0 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onFocus', point) + thisObject.payload.uiObject.container.eventHandler.raiseEvent('onFocus', point) thisObject.positionLocked = true @@ -201,7 +173,7 @@ function newFloatingObject () { thisObject.targetImageSize = thisObject.rawImageSize * 1 thisObject.targetFontSize = thisObject.rawFontSize * 1 - thisObject.underlayingObject.container.eventHandler.raiseEvent('onNotFocus') + thisObject.payload.uiObject.container.eventHandler.raiseEvent('onNotFocus') thisObject.positionLocked = false thisObject.isOnFocus = false @@ -213,23 +185,23 @@ function newFloatingObject () { point: pPoint, parent: thisObject } - thisObject.underlayingObject.container.eventHandler.raiseEvent('onMouseClick', event) + thisObject.payload.uiObject.container.eventHandler.raiseEvent('onMouseClick', event) } function drawBackground () { - thisObject.underlayingObject.drawBackground(thisObject) + thisObject.payload.uiObject.drawBackground(thisObject) } function drawMiddleground () { - thisObject.underlayingObject.drawMiddleground(thisObject) + thisObject.payload.uiObject.drawMiddleground(thisObject) } function drawForeground () { - thisObject.underlayingObject.drawForeground(thisObject) + thisObject.payload.uiObject.drawForeground(thisObject) } function drawOnFocus () { - thisObject.underlayingObject.drawOnFocus(thisObject) + thisObject.payload.uiObject.drawOnFocus(thisObject) } function initializeMass (suggestedValue) { diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js index e0a5d8093..f61a55c67 100644 --- a/FloatingSpace/NoteSets.js +++ b/FloatingSpace/NoteSets.js @@ -124,7 +124,7 @@ function newNoteSets () { Each time we identify a floatingObject that is not at the raw data anymore, we request the floatinglayer to kill it. */ - floatingLayer.killFloatingObject(floatingNote.floatingHandle) + floatingLayer.removeFloatingObject(floatingNote.floatingHandle) } else { newFloatingNotes.push(floatingNote) @@ -299,7 +299,7 @@ function newNoteSets () { for (let j = 0; j < noteSet.floatingNotes.length; j++) { let floatingNote = noteSet.floatingNotes[j] - floatingLayer.killFloatingObject(floatingNote.floatingHandle) + floatingLayer.removeFloatingObject(floatingNote.floatingHandle) } noteSets.splice(i, 1) // Delete item from array. diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index 8328b7b25..c940bfbd1 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -306,7 +306,7 @@ function newProfileBall () { let label - label = pFloatingObject.payload.profile.upLabel + label = pFloatingObject.payload.profile.subTitle if (label !== undefined) { labelPoint = { @@ -319,7 +319,7 @@ function newProfileBall () { browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } - label = pFloatingObject.payload.profile.downLabel + label = pFloatingObject.payload.profile.title if (label !== undefined) { labelPoint = { diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js index 98d4de498..45f53e013 100644 --- a/FloatingSpace/ProfileBalls.js +++ b/FloatingSpace/ProfileBalls.js @@ -56,7 +56,7 @@ function newProfileBalls () { } function destroyProfileBall (pFloatingObjectHandle) { - floatingLayer.killFloatingObject(pFloatingObjectHandle) + floatingLayer.removeFloatingObject(pFloatingObjectHandle) } } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index b70212ae2..888c9292b 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -32,7 +32,6 @@ function newStrategyPart () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - let floatingLayer let image let imagePath @@ -60,14 +59,12 @@ function newStrategyPart () { thisObject.codeEditor = undefined } - floatingLayer = undefined image = undefined imagePath = undefined } - function initialize (pFloatingLayer, payload) { + function initialize (payload) { thisObject.payload = payload - floatingLayer = pFloatingLayer let menuItemsInitialValues = [] switch (thisObject.payload.node.type) { @@ -497,7 +494,7 @@ function newStrategyPart () { if (radius > 6) { const MAX_LABEL_LENGTH = 30 - label = params.payload.upLabel + label = params.payload.subTitle label = addIndexNumber(label) if (label !== undefined) { diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 93a2c1d85..6b848c628 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -1,13 +1,13 @@ function newStrategyPartConstructor () { - const MODULE_NAME = 'Strategy Parts' + const MODULE_NAME = 'Strategy Part Constructor' const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME let thisObject = { - createNewStrategyPart: createNewStrategyPart, + createStrategyPart: createStrategyPart, destroyStrategyPart: destroyStrategyPart, initialize: initialize, finalize: finalize @@ -20,16 +20,24 @@ function newStrategyPartConstructor () { function finalize () { floatingLayer = undefined + + payload.uiObject.finalize() + payload.uiObject = undefined } function initialize (pFloatingLayer) { floatingLayer = pFloatingLayer } - function createNewStrategyPart (payload) { + function createStrategyPart (payload) { let floatingObject = newFloatingObject() - floatingObject.payload = payload - floatingObject.initialize('Strategy Part', payload.node.type, floatingLayer) + floatingObject.initialize('Strategy Part', payload) + payload.floatingObject = floatingObject + + let strategyPart = newStrategyPart() + strategyPart.initialize(payload) + strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true) + payload.uiObject = strategyPart const FRICTION = 0.97 @@ -139,10 +147,16 @@ function newStrategyPartConstructor () { floatingLayer.addFloatingObject(floatingObject) - return floatingObject.handle + return } - function destroyStrategyPart (pFloatingObjectHandle) { - floatingLayer.killFloatingObject(pFloatingObjectHandle) + function destroyStrategyPart (payload) { + floatingLayer.removeFloatingObject(payload.floatingObject.handle) + + payload.floatingObject.finalize() + payload.floatingObject = undefined + + payload.uiObject.finalize() + payload.uiObject = undefined } } diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index fddf36c15..9428289be 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -93,8 +93,8 @@ function newStrategyPartTitle () { thisObject.container.frame.position.x = 0 - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2 thisObject.container.frame.position.y = 0 - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 - thisObject.container.frame.width = thisObject.container.frame.radius - thisObject.container.frame.height = 20 + // thisObject.container.frame.width = thisObject.container.frame.radius + // thisObject.container.frame.height = 20 } function onFocus () { @@ -149,7 +149,7 @@ function newStrategyPartTitle () { browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - label = params.payload.downLabel + label = params.payload.title if (label !== undefined) { if (label.length > MAX_LABEL_LENGTH) { @@ -168,4 +168,3 @@ function newStrategyPartTitle () { } } } - diff --git a/PlottersManager.js b/PlottersManager.js index d3c00d03f..dd693d6d6 100644 --- a/PlottersManager.js +++ b/PlottersManager.js @@ -285,7 +285,7 @@ function newPlottersManager () { botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT) - competitionPlotter.plotter.payload[k].profile.downLabel = bot.displayName + competitionPlotter.plotter.payload[k].profile.title = bot.displayName competitionPlotter.plotter.payload[k].profile.imageId = imageId competitionPlotter.plotter.payload[k].profile.botAvatar = botAvatar @@ -525,8 +525,8 @@ function newPlottersManager () { if (productPlotter.plotter.payload !== undefined) { let imageId = pProductCard.bot.devTeam + '.' + pProductCard.bot.profilePicture - productPlotter.plotter.payload.profile.upLabel = pProductCard.product.shortDisplayName - productPlotter.plotter.payload.profile.downLabel = pProductCard.bot.displayName + productPlotter.plotter.payload.profile.subTitle = pProductCard.product.shortDisplayName + productPlotter.plotter.payload.profile.title = pProductCard.bot.displayName productPlotter.plotter.payload.profile.imageId = imageId productPlotter.plotter.payload.profile.botAvatar = pProductCard.bot.avatar diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 14ea12a3b..f11be01dd 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -10,7 +10,7 @@ function newFloatingSpace () { let thisObject = { floatingLayer: undefined, // This is the array of floatingObjects being displayed profileBalls: undefined, - strategyParts: undefined, + strategyPartConstructor: undefined, noteSets: undefined, container: undefined, makeVisible: makeVisible, @@ -41,7 +41,7 @@ function newFloatingSpace () { function finalize () { thisObject.floatingLayer.finalize() thisObject.profileBalls.finalize() - thisObject.strategyParts.finalize() + thisObject.strategyPartConstructor.finalize() thisObject.noteSets.finalize() } @@ -55,8 +55,8 @@ function newFloatingSpace () { thisObject.noteSets = newNoteSets() thisObject.noteSets.initialize(thisObject.floatingLayer) - thisObject.strategyParts = newStrategyPartConstructor() - thisObject.strategyParts.initialize(thisObject.floatingLayer) + thisObject.strategyPartConstructor = newStrategyPartConstructor() + thisObject.strategyPartConstructor.initialize(thisObject.floatingLayer) thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) } diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 2567cbc9d..5ca65a714 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -52,13 +52,13 @@ function newStrategy () { } if (title !== undefined) { - payload.upLabel = title + payload.subTitle = title } else { - payload.upLabel = partType + payload.subTitle = partType } payload.visible = true - payload.downLabel = name + payload.title = name payload.node = node payload.parentNode = parentNode payload.chainParent = chainParent @@ -69,11 +69,11 @@ function newStrategy () { } node.payload = payload node.type = partType - node.handle = canvas.floatingSpace.strategyParts.createNewStrategyPart(payload) + canvas.floatingSpace.strategyPartConstructor.createStrategyPart(payload) } function destroyPart (node) { - canvas.floatingSpace.strategyParts.destroyStrategyPart(node.handle) + canvas.floatingSpace.strategyPartConstructor.destroyStrategyPart(payload) } function generateStrategyParts () { @@ -379,8 +379,8 @@ function newStrategy () { node.payload.targetPosition.x = undefined node.payload.targetPosition.y = undefined node.payload.visible = undefined - node.payload.upLabel = undefined - node.payload.downLabel = undefined + node.payload.subTitle = undefined + node.payload.title = undefined node.payload.node = undefined node.payload.parentNode = undefined node.payload.chainParent = undefined From 5aff61371077556590cbf383c7e2b9c9effbea76 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 09:49:01 +0200 Subject: [PATCH 113/221] Title Object done --- FloatingSpace/CodeEditor.js | 4 +- FloatingSpace/StrategyPartTitle.js | 60 ++++++++++++++++-------------- 2 files changed, 34 insertions(+), 30 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index d606461f9..0a955e3c2 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -3,7 +3,6 @@ function newCodeEditor () { const MODULE_NAME = 'Circular Menu Iem' let thisObject = { - isDeployed: undefined, iconOK: undefined, iconNOT_OK: undefined, visible: false, @@ -116,7 +115,7 @@ function newCodeEditor () { function getContainer (point) { let container - if (thisObject.isDeployed === true) { + if (thisObject.visitble === true) { if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { return thisObject.container } else { @@ -214,4 +213,3 @@ function newCodeEditor () { } } } - diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 9428289be..494a3b545 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -90,11 +90,13 @@ function newStrategyPartTitle () { } function physics () { - thisObject.container.frame.position.x = 0 - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2 - thisObject.container.frame.position.y = 0 - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + const FRAME_HEIGHT = 25 + const FRAME_WIDTH = thisObject.payload.title.length / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2 + thisObject.container.frame.position.x = 0 - FRAME_WIDTH / 2 + thisObject.container.frame.position.y = 0 - thisObject.container.frame.radius * 1 / 2 - thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO - 10 - FRAME_HEIGHT - // thisObject.container.frame.width = thisObject.container.frame.radius - // thisObject.container.frame.height = 20 + thisObject.container.frame.width = FRAME_WIDTH + thisObject.container.frame.height = FRAME_HEIGHT } function onFocus () { @@ -109,47 +111,48 @@ function newStrategyPartTitle () { } - function draw (params) { + function draw () { if (thisObject.isOnFocus === true) { - drawText(params) + if (thisObject.payload.uiObject.codeEditor !== undefined) { + if (thisObject.payload.uiObject.codeEditor.visible !== true) { + drawTitleBackground() + } + } else { + drawTitleBackground() + } + + drawText() } } - function drawText (params) { -/* Text Follows */ - let position = { - x: 0, - y: 0 - } - - position = thisObject.container.frame.frameThisPoint(position) - - let backgroundParams = { + function drawTitleBackground () { + let params = { cornerRadius: 3, lineWidth: 0.1, container: thisObject.container, - borderColor: UI_COLOR.DARK, - backgroundColor: UI_COLOR.RED, + borderColor: UI_COLOR.BLACK, + backgroundColor: UI_COLOR.BLACK, castShadow: false, - opacity: 1 + opacity: 0.25 } - roundedCornersBackground(backgroundParams) + roundedCornersBackground(params) + } + function drawText () { let radius = thisObject.container.frame.radius - /* Label Text */ let labelPoint - let fontSize = params.currentFontSize + let fontSize = thisObject.payload.floatingObject.currentFontSize let label if (radius > 6 && thisObject.isOnFocus === true) { const MAX_LABEL_LENGTH = 25 - browserCanvasContext.strokeStyle = params.labelStrokeStyle + browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - label = params.payload.title + label = thisObject.payload.title if (label !== undefined) { if (label.length > MAX_LABEL_LENGTH) { @@ -157,14 +160,17 @@ function newStrategyPartTitle () { } labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO * 1.2, - y: position.y - radius * 1 / 2 - fontSize * FONT_ASPECT_RATIO - 10 + x: 0, + y: thisObject.container.frame.height * 0.8 } + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = params.labelStrokeStyle + browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } } } + From bac3f0ac5f4b00d9358820790fddd8eb83ba4886 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 09:59:39 +0200 Subject: [PATCH 114/221] codeEditor cleaned and working --- FloatingSpace/CodeEditor.js | 27 --------------------------- FloatingSpace/StrategyPart.js | 3 +++ 2 files changed, 3 insertions(+), 27 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index 0a955e3c2..36a78e68e 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -36,16 +36,9 @@ function newCodeEditor () { let isMouseOver = false - let selfMouseOverEventSubscriptionId - let selfMouseClickEventSubscriptionId - let selfMouseNotOverEventSubscriptionId return thisObject function finalize () { - thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId) - thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) - thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId) - thisObject.container.finalize() thisObject.container = undefined thisObject.iconOK = undefined @@ -70,10 +63,6 @@ function newCodeEditor () { } thisObject.iconOK.src = window.canvasApp.urlPrefix + thisObject.imagePathOK thisObject.icon = thisObject.iconOK // The default value is ON. - - selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) - selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) - selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function deactivate () { @@ -137,22 +126,6 @@ function newCodeEditor () { thisObject.container.frame.position.y = 0 } - function onMouseOver (point) { - if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { - isMouseOver = true - } else { - isMouseOver = false - } - } - - function onMouseNotOver (point) { - isMouseOver = false - } - - function onMouseClick (event) { - - } - function drawBackground () { if (thisObject.visible === true) { let position = { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 888c9292b..db1072685 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -383,6 +383,9 @@ function newStrategyPart () { function onNotFocus () { thisObject.isOnFocus = false + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.deactivate() + } } function onMouseClick (event) { From 1e4398b1453c99b5bab9eee989a4a2589c2fe21a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 10:08:37 +0200 Subject: [PATCH 115/221] Cleaned passig floating object as a referrence on draw functions --- FloatingSpace/FloatingObject.js | 8 +++--- FloatingSpace/StrategyPart.js | 48 ++++++++++++++++++--------------- 2 files changed, 31 insertions(+), 25 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 743726606..85d610619 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -189,19 +189,19 @@ function newFloatingObject () { } function drawBackground () { - thisObject.payload.uiObject.drawBackground(thisObject) + thisObject.payload.uiObject.drawBackground() } function drawMiddleground () { - thisObject.payload.uiObject.drawMiddleground(thisObject) + thisObject.payload.uiObject.drawMiddleground() } function drawForeground () { - thisObject.payload.uiObject.drawForeground(thisObject) + thisObject.payload.uiObject.drawForeground() } function drawOnFocus () { - thisObject.payload.uiObject.drawOnFocus(thisObject) + thisObject.payload.uiObject.drawOnFocus() } function initializeMass (suggestedValue) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index db1072685..9bb28fdac 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -392,28 +392,28 @@ function newStrategyPart () { } - function drawBackground (params) { + function drawBackground () { if (thisObject.isOnFocus === false) { drawConnectingLine() thisObject.menu.drawBackground() } } - function drawMiddleground (params) { + function drawMiddleground () { if (thisObject.isOnFocus === false) { - drawText(params) - thisObject.partTitle.draw(params) + drawText() + thisObject.partTitle.draw() } } - function drawForeground (params) { + function drawForeground () { if (thisObject.isOnFocus === false) { - drawBodyAndPicture(params) + drawBodyAndPicture() thisObject.menu.drawForeground() } } - function drawOnFocus (params) { + function drawOnFocus () { if (thisObject.isOnFocus === true) { drawConnectingLine() thisObject.menu.drawBackground() @@ -423,16 +423,16 @@ function newStrategyPart () { thisObject.codeEditor.drawForeground() } - drawText(params) - thisObject.partTitle.draw(params) + drawText() + thisObject.partTitle.draw() if (thisObject.codeEditor !== undefined) { if (thisObject.codeEditor.visible === false) { - drawBodyAndPicture(params) + drawBodyAndPicture() thisObject.menu.drawForeground() } } else { - drawBodyAndPicture(params) + drawBodyAndPicture() thisObject.menu.drawForeground() } } @@ -479,7 +479,7 @@ function newStrategyPart () { } } - function drawText (params) { + function drawText () { /* Text Follows */ let position = { x: 0, @@ -491,13 +491,13 @@ function newStrategyPart () { let radius = thisObject.container.frame.radius /* Label Text */ let labelPoint - let fontSize = params.currentFontSize + let fontSize = thisObject.payload.floatingObject.currentFontSize let label if (radius > 6) { const MAX_LABEL_LENGTH = 30 - label = params.payload.subTitle + label = thisObject.payload.subTitle label = addIndexNumber(label) if (label !== undefined) { @@ -511,7 +511,7 @@ function newStrategyPart () { } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = params.labelStrokeStyle + browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } @@ -558,13 +558,15 @@ function newStrategyPart () { } } - function drawBodyAndPicture (params) { + function drawBodyAndPicture () { let position = { - x: params.container.frame.position.x, - y: params.container.frame.position.y + x: thisObject.container.frame.position.x, + y: thisObject.container.frame.position.y } - let radius = params.container.frame.radius + position = thisObject.container.frame.frameThisPoint(position) + + let radius = thisObject.container.frame.radius if (radius > 0.5 && image === undefined) { /* Main FloatingObject */ @@ -573,7 +575,7 @@ function newStrategyPart () { browserCanvasContext.arc(position.x, position.y, radius * 2 / 3, 0, Math.PI * 2, true) browserCanvasContext.closePath() - browserCanvasContext.fillStyle = params.fillStyle + browserCanvasContext.fillStyle = thisObject.payload.floatingObject.fillStyle browserCanvasContext.fill() @@ -590,7 +592,11 @@ function newStrategyPart () { if (image !== undefined) { if (image.canDrawIcon === true) { - browserCanvasContext.drawImage(image, position.x - params.currentImageSize / 2, position.y - params.currentImageSize / 2, params.currentImageSize, params.currentImageSize) + browserCanvasContext.drawImage( + image, position.x - thisObject.payload.floatingObject.currentImageSize / 2, + position.y - thisObject.payload.floatingObject.currentImageSize / 2, + thisObject.payload.floatingObject.currentImageSize, + thisObject.payload.floatingObject.currentImageSize) } } } From 5232056822ade898ce4759e98e86f68e49adf798 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 10:20:58 +0200 Subject: [PATCH 116/221] Creating and Destroying objects working well again --- FloatingSpace/FloatingLayer.js | 16 ---------------- StrategySpace/Strategy.js | 2 +- 2 files changed, 1 insertion(+), 17 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index db281d20f..cade6407a 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -80,12 +80,6 @@ function newFloatingLayer () { } function addFloatingObject (pFloatingObject) { - /* - As you can see here, even though the floating objects are created outside this layer, its creator it is not supossed to keep - the reference to the object, so that the managment of the objects references can live entirely inside this module. What the - creator keeps, is a handle to the object which it can use to retrieve the floating object when needed. - */ - currentHandle++ pFloatingObject.handle = currentHandle // Math.floor((Math.random() * 10000000) + 1); invisibleFloatingObjects.push(pFloatingObject) @@ -93,19 +87,11 @@ function newFloatingLayer () { function removeFloatingObject (pFloatingObjectHandle) { try { - /* - The floting object to be killed can be either at the visible or the invisible array. What we do here is look for it - at each of the arrays until we find it. Once found, we remove it and is sent to the dying floating objects array. - */ - for (let i = 0; i < invisibleFloatingObjects.length; i++) { let floatingObject = invisibleFloatingObjects[i] if (floatingObject.handle === pFloatingObjectHandle) { invisibleFloatingObjects.splice(i, 1) // Delete item from array. - - floatingObject.finalize() - return } } @@ -115,8 +101,6 @@ function newFloatingLayer () { if (floatingObject.handle === pFloatingObjectHandle) { visibleFloatingObjects.splice(i, 1) // Delete item from array. - - floatingObject.finalize() return } } diff --git a/StrategySpace/Strategy.js b/StrategySpace/Strategy.js index 5ca65a714..c37ca321a 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/Strategy.js @@ -73,7 +73,7 @@ function newStrategy () { } function destroyPart (node) { - canvas.floatingSpace.strategyPartConstructor.destroyStrategyPart(payload) + canvas.floatingSpace.strategyPartConstructor.destroyStrategyPart(node.payload) } function generateStrategyParts () { From 13deb2658bc61f12c2f489fd791b45d058623888 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 10:26:33 +0200 Subject: [PATCH 117/221] Numbering parts working again --- FloatingSpace/StrategyPart.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 9bb28fdac..d3c8724b2 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -518,7 +518,7 @@ function newStrategyPart () { } function addIndexNumber (label) { - switch (thisObject.type) { + switch (thisObject.payload.node.type) { case 'Phase': { let parent = thisObject.payload.parentNode for (let i = 0; i < parent.phases.length; i++) { @@ -601,3 +601,4 @@ function newStrategyPart () { } } } + From cee123dcfb003a26cdfe2e483997905f894a37a1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 12:01:41 +0200 Subject: [PATCH 118/221] Updating Name works! --- FloatingSpace/StrategyPartTitle.js | 63 ++++++++++++++++++++++++++---- 1 file changed, 56 insertions(+), 7 deletions(-) diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 494a3b545..d9f96bcb9 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -7,6 +7,7 @@ function newStrategyPartTitle () { logger.fileName = MODULE_NAME let thisObject = { + editMode: undefined, container: undefined, payload: undefined, physics: physics, @@ -90,8 +91,10 @@ function newStrategyPartTitle () { } function physics () { + let title = trimTitle(thisObject.payload.title) + const FRAME_HEIGHT = 25 - const FRAME_WIDTH = thisObject.payload.title.length / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2 + const FRAME_WIDTH = title.length / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2 thisObject.container.frame.position.x = 0 - FRAME_WIDTH / 2 thisObject.container.frame.position.y = 0 - thisObject.container.frame.radius * 1 / 2 - thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO - 10 - FRAME_HEIGHT @@ -105,10 +108,53 @@ function newStrategyPartTitle () { function onNotFocus () { thisObject.isOnFocus = false + exitEditMode() } function onMouseClick (event) { + enterEditMode() + } + function exitEditMode () { + if (thisObject.editMode === true) { + thisObject.editMode = false + let input = document.getElementById('input') + input.style.display = 'none' + thisObject.payload.title = input.value + thisObject.payload.node.name = input.value + } + } + + function enterEditMode () { + const WIDTH = thisObject.container.frame.width + const HEIGHT = thisObject.container.frame.height + let fontSize = thisObject.payload.floatingObject.currentFontSize + + let inputPosition = { + x: 0, + y: 0 + window.canvasApp.topMargin + } + + inputPosition = thisObject.container.frame.frameThisPoint(inputPosition) + if (inputPosition.y < window.canvasApp.topMargin) { return } + + thisObject.editMode = true + let input = document.getElementById('input') + input.value = thisObject.payload.title + + let backgroundColor = '0, 0, 0' + if (thisObject.payload.uiObject.codeEditor !== undefined) { + if (thisObject.payload.uiObject.codeEditor.visible === true) { + backgroundColor = '204, 88, 53' + } + } + + input.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: ' + fontSize + 'px; background-color: rgb(' + backgroundColor + ');color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' + input.style.display = 'block' + input.focus() + + let inputDiv = document.getElementById('inputDiv') + inputDiv.style = 'position:absolute; top:' + inputPosition.y + 'px; left:' + inputPosition.x + 'px; z-index:1; ' } function draw () { @@ -146,8 +192,6 @@ function newStrategyPartTitle () { let label if (radius > 6 && thisObject.isOnFocus === true) { - const MAX_LABEL_LENGTH = 25 - browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY @@ -155,9 +199,7 @@ function newStrategyPartTitle () { label = thisObject.payload.title if (label !== undefined) { - if (label.length > MAX_LABEL_LENGTH) { - label = label.substring(0, MAX_LABEL_LENGTH) + '...' - } + label = trimTitle(label) labelPoint = { x: 0, @@ -172,5 +214,12 @@ function newStrategyPartTitle () { } } } -} + function trimTitle (title) { + const MAX_LABEL_LENGTH = 25 + if (title.length > MAX_LABEL_LENGTH) { + title = title.substring(0, MAX_LABEL_LENGTH) + '...' + } + return title + } +} From 6a1bf574c670b97c18bdbbff361129c20d91961a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 12:21:41 +0200 Subject: [PATCH 119/221] BUG Exiting edit mode in title fixed --- FloatingSpace/StrategyPart.js | 4 ++++ FloatingSpace/StrategyPartTitle.js | 28 +++++++++++++++++----------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index d3c8724b2..8d60c765b 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -357,6 +357,10 @@ function newStrategyPart () { if (container !== undefined) { return container } if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.codeEditor !== undefined) { + thisObject.codeEditor.deactivate() + } + thisObject.partTitle.exitEditMode() return thisObject.container } else { return undefined diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index d9f96bcb9..8522e9003 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -10,6 +10,8 @@ function newStrategyPartTitle () { editMode: undefined, container: undefined, payload: undefined, + enterEditMode: enterEditMode, + exitEditMode: exitEditMode, physics: physics, draw: draw, getContainer: getContainer, @@ -100,6 +102,20 @@ function newStrategyPartTitle () { thisObject.container.frame.width = FRAME_WIDTH thisObject.container.frame.height = FRAME_HEIGHT + + if (thisObject.editMode === true) { + let inputPosition = { + x: 0, + y: 0 + window.canvasApp.topMargin + } + + inputPosition = thisObject.container.frame.frameThisPoint(inputPosition) + + if (inputPosition.y < window.canvasApp.topMargin) { exitEditMode() } + + let inputDiv = document.getElementById('inputDiv') + inputDiv.style = 'position:absolute; top:' + inputPosition.y + 'px; left:' + inputPosition.x + 'px; z-index:1; ' + } } function onFocus () { @@ -130,14 +146,6 @@ function newStrategyPartTitle () { const HEIGHT = thisObject.container.frame.height let fontSize = thisObject.payload.floatingObject.currentFontSize - let inputPosition = { - x: 0, - y: 0 + window.canvasApp.topMargin - } - - inputPosition = thisObject.container.frame.frameThisPoint(inputPosition) - if (inputPosition.y < window.canvasApp.topMargin) { return } - thisObject.editMode = true let input = document.getElementById('input') input.value = thisObject.payload.title @@ -152,9 +160,6 @@ function newStrategyPartTitle () { input.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: ' + fontSize + 'px; background-color: rgb(' + backgroundColor + ');color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' input.style.display = 'block' input.focus() - - let inputDiv = document.getElementById('inputDiv') - inputDiv.style = 'position:absolute; top:' + inputPosition.y + 'px; left:' + inputPosition.x + 'px; z-index:1; ' } function draw () { @@ -223,3 +228,4 @@ function newStrategyPartTitle () { return title } } + From c9ed3cb78eb719156b091a9dd27be6f504f830ae Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 12:44:36 +0200 Subject: [PATCH 120/221] code editor bug corrected, no bugs to fix now --- FloatingSpace/CodeEditor.js | 44 +++++++++++++++++++++-------------- FloatingSpace/StrategyPart.js | 4 ---- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index 36a78e68e..99df8b58f 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -31,8 +31,6 @@ function newCodeEditor () { thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = 150 - thisObject.container.frame.height = 30 let isMouseOver = false @@ -75,17 +73,6 @@ function newCodeEditor () { } function activate (payload) { - const WIDTH = thisObject.container.frame.radius * 2.2 - const HEIGHT = thisObject.container.frame.radius * 1 - - let textAreaPosition = { - x: 0 - WIDTH / 2, - y: 0 - } - - textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) - if (textAreaPosition.y < window.canvasApp.topMargin) { return } - thisObject.visible = true thisObject.payload = payload thisObject.rawRadius = 8 @@ -94,12 +81,19 @@ function newCodeEditor () { let textArea = document.getElementById('textArea') textArea.value = payload.node.code - textArea.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira; font-size: 12px; background-color: rgb(204, 88, 53);color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px' + textArea.style = 'resize: none;' + + ' border: none;' + + ' outline: none;' + + 'box-shadow: none;' + + 'overflow:hidden;' + + 'font-family: ' + UI_FONT.PRIMARY + ';' + + 'font-size: 12px;' + + 'background-color: rgb(204, 88, 53);' + + 'color:rgb(255, 255, 255);' + + 'width: ' + thisObject.container.frame.width + 'px;' + + 'height: ' + thisObject.container.frame.height + 'px' textArea.style.display = 'block' textArea.focus() - - let textAreaDiv = document.getElementById('textAreaDiv') - textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' } function getContainer (point) { @@ -124,6 +118,21 @@ function newCodeEditor () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 + + thisObject.container.frame.width = thisObject.container.frame.radius * 2.2 + thisObject.container.frame.height = thisObject.container.frame.radius * 1 + + let textAreaPosition = { + x: 0 - thisObject.container.frame.width / 2, + y: 0 + } + + textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) + if (textAreaPosition.y < window.canvasApp.topMargin) { deactivate() } + if (thisObject.visible === true) { + let textAreaDiv = document.getElementById('textAreaDiv') + textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' + } } function drawBackground () { @@ -186,3 +195,4 @@ function newCodeEditor () { } } } + diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 8d60c765b..d3c8724b2 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -357,10 +357,6 @@ function newStrategyPart () { if (container !== undefined) { return container } if (thisObject.container.frame.isThisPointHere(point, true) === true) { - if (thisObject.codeEditor !== undefined) { - thisObject.codeEditor.deactivate() - } - thisObject.partTitle.exitEditMode() return thisObject.container } else { return undefined From 6eb8e0a8b7665983f50e6d00a05545d47a112cd3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 15:21:35 +0200 Subject: [PATCH 121/221] Investment Plan added --- FloatingSpace/StrategyPart.js | 48 ++++-- FloatingSpace/StrategyPartConstructor.js | 4 + FloatingSpace/StrategyPartTitle.js | 33 ---- .../{Strategy.js => InvestmentPlan.js} | 150 +++++++++--------- StrategySpace/StrategyCollection.js | 2 +- StrategySpace/StrategyCollectionItem.js | 5 +- 6 files changed, 125 insertions(+), 117 deletions(-) rename StrategySpace/{Strategy.js => InvestmentPlan.js} (71%) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index d3c8724b2..e86c10b21 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -68,15 +68,15 @@ function newStrategyPart () { let menuItemsInitialValues = [] switch (thisObject.payload.node.type) { - case 'Strategy': { - imagePath = 'Images/icons/style-01/quality.png' + case 'Investment Plan': { + imagePath = 'Images/icons/style-01/analysis.png' menuItemsInitialValues = [ { - action: 'Reload Strategy', + action: 'Reload Investment Plan', actionFunction: thisObject.payload.onMenuItemClick, - label: 'Reload Last Saved', + label: 'Reload', visible: false, - imagePathOn: 'Images/icons/style-01/pixel.png', + imagePathOn: 'Images/icons/style-01/vector.png', imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, @@ -84,7 +84,7 @@ function newStrategyPart () { angle: -60 }, { - action: 'Save Strategy', + action: 'Save Investment Plan', actionFunction: thisObject.payload.onMenuItemClick, label: 'Save Changes', visible: false, @@ -96,11 +96,11 @@ function newStrategyPart () { angle: -20 }, { - action: 'Delete Strategy', + action: 'New Strategy', actionFunction: thisObject.payload.onMenuItemClick, - label: 'Delete This Strategy', + label: 'New Strategy', visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOn: 'Images/icons/style-01/quality.png', imagePathOff: 'Images/icons/style-01/target.png', rawRadius: 8, targetRadius: 0, @@ -121,6 +121,35 @@ function newStrategyPart () { }] break } + case 'Strategy': { + imagePath = 'Images/icons/style-01/quality.png' + menuItemsInitialValues = [ + { + action: 'Delete Strategy', + actionFunction: thisObject.payload.onMenuItemClick, + label: 'Delete This Strategy', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }, + { + action: 'Open Settings', + actionFunction: thisObject.payload.onMenuItemClick, + label: 'Settings', + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 + }] + break + } case 'Strategy Entry Event': { imagePath = 'Images/icons/style-01/startup.png' menuItemsInitialValues = [ @@ -601,4 +630,3 @@ function newStrategyPart () { } } } - diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 6b848c628..b07eace8a 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -42,6 +42,10 @@ function newStrategyPartConstructor () { const FRICTION = 0.97 switch (payload.node.type) { + case 'Investment Plan': { + level_1() + break + } case 'Strategy': { level_1() break diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 8522e9003..94319a052 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -44,39 +44,6 @@ function newStrategyPartTitle () { function initialize (payload) { thisObject.payload = payload - switch (payload.node.type) { - case 'Strategy': { - break - } - case 'Strategy Entry Event': { - break - } - case 'Strategy Exit Event': { - break - } - case 'Trade Entry Event': { - break - } - case 'Stop': { - break - } - case 'Take Profit': { - break - } - case 'Phase': { - break - } - case 'Situation': { - break - } - case 'Condition': { - break - } - default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + payload.node.type) } - } - } - selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) diff --git a/StrategySpace/Strategy.js b/StrategySpace/InvestmentPlan.js similarity index 71% rename from StrategySpace/Strategy.js rename to StrategySpace/InvestmentPlan.js index c37ca321a..7c04c121d 100644 --- a/StrategySpace/Strategy.js +++ b/StrategySpace/InvestmentPlan.js @@ -1,9 +1,9 @@ -function newStrategy () { - const MODULE_NAME = 'Strategy' +function newInvestmentPlan () { + const MODULE_NAME = 'Investment Plan' let thisObject = { - strategySource: undefined, + investmentPlan: undefined, container: undefined, getContainer: getContainer, initialize: initialize, @@ -28,8 +28,10 @@ function newStrategy () { destroyStrategyParts() } - function initialize (pStrategySource) { - thisObject.strategySource = pStrategySource + function initialize (strategies) { + thisObject.investmentPlan = { + strategies: strategies + } generateStrategyParts() } @@ -78,92 +80,98 @@ function newStrategy () { function generateStrategyParts () { let lastPhase - let strategy = thisObject.strategySource - createPart('Strategy', strategy.name, strategy, undefined, undefined) + let investmentPlan = thisObject.investmentPlan - createPart('Strategy Entry Event', '', strategy.entryPoint, strategy, strategy) - for (let k = 0; k < strategy.entryPoint.situations.length; k++) { - let situation = strategy.entryPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.entryPoint, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation') + createPart('Investment Plan', '', investmentPlan, undefined, undefined) - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition') - } - } + for (m = 0; m < investmentPlan.strategies.length; m++) { + let strategy = investmentPlan.strategies[m] + createPart('Strategy', strategy.name, strategy, investmentPlan, investmentPlan) - createPart('Strategy Exit Event', '', strategy.exitPoint, strategy, strategy) - for (let k = 0; k < strategy.exitPoint.situations.length; k++) { - let situation = strategy.exitPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.exitPoint, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation') - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition') - } - } - - createPart('Trade Entry Event', '', strategy.sellPoint, strategy, strategy) - for (let k = 0; k < strategy.sellPoint.situations.length; k++) { - let situation = strategy.sellPoint.situations[k] - createPart('Situation', situation.name, situation, strategy.sellPoint, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation') - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - createPart('Condition', condition.name, condition, situation, situation, 'Condition') - } - } - - createPart('Stop', '', strategy.stopLoss, strategy, strategy) - for (let p = 0; p < strategy.stopLoss.phases.length; p++) { - let phase = strategy.stopLoss.phases[p] - - let chainParent - if (p === 0) { - chainParent = strategy.stopLoss - } else { - chainParent = lastPhase - } - lastPhase = phase - createPart('Phase', phase.name, phase, strategy.stopLoss, chainParent, 'Stop Phase') - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, phase, 'Situation') + createPart('Strategy Entry Event', '', strategy.entryPoint, strategy, strategy) + for (let k = 0; k < strategy.entryPoint.situations.length; k++) { + let situation = strategy.entryPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.entryPoint, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } - } - createPart('Take Profit', '', strategy.buyOrder, strategy, strategy) - for (let p = 0; p < strategy.buyOrder.phases.length; p++) { - let phase = strategy.buyOrder.phases[p] - let chainParent - if (p === 0) { - chainParent = strategy.buyOrder - } else { - chainParent = lastPhase - } - lastPhase = phase - createPart('Phase', phase.name, phase, strategy.buyOrder, chainParent, 'Take Profit Phase') - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - createPart('Situation', situation.name, situation, phase, phase, 'Situation') + createPart('Strategy Exit Event', '', strategy.exitPoint, strategy, strategy) + for (let k = 0; k < strategy.exitPoint.situations.length; k++) { + let situation = strategy.exitPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.exitPoint, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation') for (let m = 0; m < situation.conditions.length; m++) { let condition = situation.conditions[m] createPart('Condition', condition.name, condition, situation, situation, 'Condition') } } + + createPart('Trade Entry Event', '', strategy.sellPoint, strategy, strategy) + for (let k = 0; k < strategy.sellPoint.situations.length; k++) { + let situation = strategy.sellPoint.situations[k] + createPart('Situation', situation.name, situation, strategy.sellPoint, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation') + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, situation, 'Condition') + } + } + + createPart('Stop', '', strategy.stopLoss, strategy, strategy) + for (let p = 0; p < strategy.stopLoss.phases.length; p++) { + let phase = strategy.stopLoss.phases[p] + + let chainParent + if (p === 0) { + chainParent = strategy.stopLoss + } else { + chainParent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, strategy.stopLoss, chainParent, 'Stop Phase') + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name, situation, phase, phase, 'Situation') + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, situation, 'Condition') + } + } + } + + createPart('Take Profit', '', strategy.buyOrder, strategy, strategy) + for (let p = 0; p < strategy.buyOrder.phases.length; p++) { + let phase = strategy.buyOrder.phases[p] + let chainParent + if (p === 0) { + chainParent = strategy.buyOrder + } else { + chainParent = lastPhase + } + lastPhase = phase + createPart('Phase', phase.name, phase, strategy.buyOrder, chainParent, 'Take Profit Phase') + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + createPart('Situation', situation.name, situation, phase, phase, 'Situation') + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + createPart('Condition', condition.name, condition, situation, situation, 'Condition') + } + } + } } } function destroyStrategyParts () { - let strategy = thisObject.strategySource + let strategy = thisObject.investmentPlan destroyPart(strategy) destroyPart(strategy.entryPoint) diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index c5f9075c6..727e0d77d 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -129,7 +129,7 @@ function newStrategyCollection () { let collectionItem = newStrategyCollectionItem() collectionItem.container.connectToParent(thisObject.container, false, false) - collectionItem.initialize(strategy) + collectionItem.initialize(thisObject.strategies) collectionItem.container.frame.position.y = i * ITEMS_SEPARATION + TOP_MARGIN colletionItems.push(collectionItem) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 01b8b9f90..38dbef787 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -44,7 +44,7 @@ function newStrategyCollectionItem () { function onMouseClick (event) { if (status === 'off') { canvas.floatingSpace.makeVisible() - thisObject.strategy = newStrategy() + thisObject.strategy = newInvestmentPlan() thisObject.strategy.initialize(thisObject.strategySource) status = 'on' } else { @@ -90,7 +90,7 @@ function newStrategyCollectionItem () { labelpoint = thisObject.container.frame.frameThisPoint(labelpoint) let labelToPrint = strategy.name - labelToPrint = labelToPrint.toUpperCase() + labelToPrint = '' labelToPrint = labelToPrint.substring(0, 30) let opacity = 1 let fontSize = 15 @@ -175,3 +175,4 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } + From c8df19f24d163ecdca09b2de8d9c1395e594dc31 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 15:51:56 +0200 Subject: [PATCH 122/221] Adjusting gravity --- FloatingSpace/StrategyPartConstructor.js | 19 ++++++++--- FloatingSpace/StrategyPartTitle.js | 42 ++++++++++++++++++++++-- 2 files changed, 55 insertions(+), 6 deletions(-) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index b07eace8a..cddb36254 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -43,7 +43,7 @@ function newStrategyPartConstructor () { switch (payload.node.type) { case 'Investment Plan': { - level_1() + level_0() break } case 'Strategy': { @@ -92,10 +92,21 @@ function newStrategyPartConstructor () { } } - function level_1 () { - floatingObject.friction = FRICTION + function level_0 () { + floatingObject.friction = 0.93 - floatingObject.initializeMass(100) + floatingObject.initializeMass(500) + floatingObject.initializeRadius(45) + floatingObject.initializeImageSize(80) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + } + + function level_1 () { + floatingObject.friction = 0.94 + + floatingObject.initializeMass(250) floatingObject.initializeRadius(45) floatingObject.initializeImageSize(80) floatingObject.initializeFontSize(10) diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 94319a052..a13229cd6 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -7,6 +7,7 @@ function newStrategyPartTitle () { logger.fileName = MODULE_NAME let thisObject = { + allwaysVisible: undefined, editMode: undefined, container: undefined, payload: undefined, @@ -44,6 +45,43 @@ function newStrategyPartTitle () { function initialize (payload) { thisObject.payload = payload + switch (payload.node.type) { + case 'Investment Plan': { + break + } + case 'Strategy': { + thisObject.allwaysVisible = true + break + } + case 'Strategy Entry Event': { + break + } + case 'Strategy Exit Event': { + break + } + case 'Trade Entry Event': { + break + } + case 'Stop': { + break + } + case 'Take Profit': { + break + } + case 'Phase': { + break + } + case 'Situation': { + break + } + case 'Condition': { + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + payload.node.type) } + } + } + selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) @@ -130,7 +168,7 @@ function newStrategyPartTitle () { } function draw () { - if (thisObject.isOnFocus === true) { + if (thisObject.isOnFocus === true || thisObject.allwaysVisible === true) { if (thisObject.payload.uiObject.codeEditor !== undefined) { if (thisObject.payload.uiObject.codeEditor.visible !== true) { drawTitleBackground() @@ -163,7 +201,7 @@ function newStrategyPartTitle () { let fontSize = thisObject.payload.floatingObject.currentFontSize let label - if (radius > 6 && thisObject.isOnFocus === true) { + if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true)) { browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY From fa4e4e0e0a26d0c2f5f7b8281cb08cfd30fd21ab Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 18:06:30 +0200 Subject: [PATCH 123/221] Can Drag Floating Space --- FloatingSpace/FloatingObject.js | 2 +- FloatingSpace/StrategyPartConstructor.js | 1 + Frame.js | 88 +++++++++++++++++------- Spaces/FloatingSpace.js | 6 +- 4 files changed, 67 insertions(+), 30 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 85d610619..2a3a5e667 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -86,7 +86,7 @@ function newFloatingObject () { container = thisObject.payload.uiObject.getContainer(point) if (container !== undefined) { return container } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThisScreenPointHere(point) === true) { return thisObject.container } else { return undefined diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index cddb36254..bcabcfaa2 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -33,6 +33,7 @@ function newStrategyPartConstructor () { let floatingObject = newFloatingObject() floatingObject.initialize('Strategy Part', payload) payload.floatingObject = floatingObject + floatingObject.container.connectToParent(canvas.floatingSpace.container, false, false, false, false, false, false, false, false) let strategyPart = newStrategyPart() strategyPart.initialize(payload) diff --git a/Frame.js b/Frame.js index 24eab5872..b91736738 100644 --- a/Frame.js +++ b/Frame.js @@ -1,4 +1,4 @@ -  + function newFrame () { const PANEL_CORNERS_RADIUS = 5 const TITLE_BAR_HEIGHT = 15 // this must be grater than radius @@ -17,6 +17,7 @@ function newFrame () { frameThisPoint: frameThisPoint, // This function changes the actual frame coordinate system to the screen coordinate system. unframeThisPoint: unframeThisPoint, isThisPointHere: isThisPointHere, // This function return true is the point received as parameter lives within this frame. + isThisScreenPointHere: isThisScreenPointHere, isInViewPort: isInViewPort, canYouMoveHere: canYouMoveHere, initialize: initialize @@ -40,7 +41,7 @@ function newFrame () { } function isInViewPort () { - /* This function is usefull to know if the object who has this frame is currently appearing at least in part at the viewPort */ + /* This function is usefull to know if the object who has this frame is currently appearing at least in part at the viewPort */ point1 = { x: 0, @@ -52,7 +53,7 @@ function newFrame () { y: thisObject.height } - /* Now the transformations. */ + /* Now the transformations. */ point1 = transformThisPoint(point1, thisObject.container) point3 = transformThisPoint(point3, thisObject.container) @@ -65,7 +66,7 @@ function newFrame () { } function frameThisPoint (point) { - /* We need not to modify the point received, so me make a copy of it. */ + /* We need not to modify the point received, so me make a copy of it. */ let checkPoint = { x: point.x, @@ -96,7 +97,7 @@ function newFrame () { } function unframeThisPoint (point) { - /* We need not to modify the point received, so me make a copy of it. */ + /* We need not to modify the point received, so me make a copy of it. */ let checkPoint = { x: point.x, @@ -127,12 +128,12 @@ function newFrame () { } function canYouMoveHere (tempDisplacement) { - /* + /* - The current frame has a position and a displacement. We need to check that none of the boundaries points of the frame fall outside of its container frame. - First we apply the theoreticall displacement. + The current frame has a position and a displacement. We need to check that none of the boundaries points of the frame fall outside of its container frame. + First we apply the theoreticall displacement. - */ + */ point1 = { x: thisObject.position.x, @@ -154,24 +155,24 @@ function newFrame () { y: thisObject.position.y + thisObject.height } - /* Now the transformations. */ + /* Now the transformations. */ if (thisObject.parentFrame !== undefined) { - // If there is not a parent then there is no point to check bounderies. + // If there is not a parent then there is no point to check bounderies. point1 = thisObject.parentFrame.frameThisPoint(point1) point2 = thisObject.parentFrame.frameThisPoint(point2) point3 = thisObject.parentFrame.frameThisPoint(point3) point4 = thisObject.parentFrame.frameThisPoint(point4) - /* We apply the temporary displacement. */ + /* We apply the temporary displacement. */ point1 = tempDisplacement.displaceThisPoint(point1) point2 = tempDisplacement.displaceThisPoint(point2) point3 = tempDisplacement.displaceThisPoint(point3) point4 = tempDisplacement.displaceThisPoint(point4) - /* We add the actual displacement. */ + /* We add the actual displacement. */ point1 = thisObject.container.displacement.displaceThisPoint(point1) point2 = thisObject.container.displacement.displaceThisPoint(point2) @@ -199,17 +200,17 @@ function newFrame () { } function isThisPointHere (point, outsideViewPort, dontTransform) { - // The second parameter is usefull when you want to check a point that you already know is outside the viewport. + // The second parameter is usefull when you want to check a point that you already know is outside the viewport. - /* We need not to modify the point received, so me make a copy of it. */ + /* We need not to modify the point received, so me make a copy of it. */ let checkPoint = { x: point.x, y: point.y } - /* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement - in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */ + /* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement + in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */ if (dontTransform === false || dontTransform === undefined) { if (outsideViewPort === true) { checkPoint = thisObject.container.displacement.undisplaceThisPoint(checkPoint) @@ -219,7 +220,7 @@ function newFrame () { } } - /* Now we check if the resulting point is whin the current Frame. */ + /* Now we check if the resulting point is whin the current Frame. */ if (thisObject.type === 'Circle') { let distance = Math.sqrt(Math.pow(thisObject.position.x - point.x, 2) + Math.pow(thisObject.position.y - point.y, 2)) @@ -240,6 +241,40 @@ function newFrame () { } } + function isThisScreenPointHere (point) { + let checkPoint = { + x: point.x, + y: point.y + } + + let thisPoint = { + x: thisObject.position.x, + y: thisObject.position.y + } + + thisPoint = thisObject.parentFrame.frameThisPoint(thisPoint) + + /* Now we check if the resulting point is whin the current Frame. */ + + if (thisObject.type === 'Circle') { + let distance = Math.sqrt(Math.pow(thisPoint.x - checkPoint.x, 2) + Math.pow(thisPoint.y - checkPoint.y, 2)) + + if (distance < thisObject.radius) { + return true + } else { + return false + } + } + + if (thisObject.type === 'Rectangle') { + if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) { + return false + } else { + return true + } + } + } + function draw (drawGrid, drawBorders, drawBackground) { if (drawBorders === true) { borders() @@ -276,12 +311,12 @@ function newFrame () { y: TITLE_BAR_HEIGHT } - /* Now the transformations. */ + /* Now the transformations. */ titleBarPoint1 = frameThisPoint(titleBarPoint1) titleBarPoint2 = frameThisPoint(titleBarPoint2) - /* We paint the title bar now */ + /* We paint the title bar now */ browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)' browserCanvasContext.beginPath() @@ -300,7 +335,7 @@ function newFrame () { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.75)' browserCanvasContext.stroke() - /* print the title */ + /* print the title */ let labelPoint let fontSize = 10 @@ -324,7 +359,7 @@ function newFrame () { } function borders () { - /* Lest get the important points of the drawing so as to apply the needed transformations. */ + /* Lest get the important points of the drawing so as to apply the needed transformations. */ let point1 let point2 @@ -351,14 +386,14 @@ function newFrame () { y: thisObject.height } - /* Now the transformations. */ + /* Now the transformations. */ point1 = transformThisPoint(point1, thisObject.container) point2 = transformThisPoint(point2, thisObject.container) point3 = transformThisPoint(point3, thisObject.container) point4 = transformThisPoint(point4, thisObject.container) - /* Lets start the drawing. */ + /* Lets start the drawing. */ browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) @@ -377,7 +412,7 @@ function newFrame () { function grid (smallLines) { if (smallLines === true) { - /* Small Lines */ + /* Small Lines */ let step = thisObject.width / 100 @@ -424,7 +459,7 @@ function newFrame () { browserCanvasContext.stroke() } - /* Main Lines */ + /* Main Lines */ let step = thisObject.width / 20 @@ -471,3 +506,4 @@ function newFrame () { browserCanvasContext.stroke() } } + diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index f11be01dd..b5336be04 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -25,13 +25,13 @@ function newFloatingSpace () { thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) thisObject.container.isClickeable = false - thisObject.container.isDraggeable = false + thisObject.container.isDraggeable = true thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.position.x = SIDE_PANEL_WIDTH + thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = browserCanvas.width - SIDE_PANEL_WIDTH + thisObject.container.frame.width = browserCanvas.width thisObject.container.frame.height = browserCanvas.height let visible = false From 3ef9adadb2f73dfadf163995422e9dc99aa009e0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 18:17:01 +0200 Subject: [PATCH 124/221] Can expand the floating space size --- Spaces/FloatingSpace.js | 8 ++++---- StrategySpace/InvestmentPlan.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index b5336be04..e4d4d54fd 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -29,10 +29,10 @@ function newFloatingSpace () { thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = browserCanvas.width - thisObject.container.frame.height = browserCanvas.height + thisObject.container.frame.width = browserCanvas.width * 1.5 + thisObject.container.frame.height = browserCanvas.height * 1.5 + thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 + thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 let visible = false diff --git a/StrategySpace/InvestmentPlan.js b/StrategySpace/InvestmentPlan.js index 7c04c121d..0eefe04e2 100644 --- a/StrategySpace/InvestmentPlan.js +++ b/StrategySpace/InvestmentPlan.js @@ -43,8 +43,8 @@ function newInvestmentPlan () { let payload = {} if (chainParent === undefined) { payload.targetPosition = { - x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH, - y: viewPort.height / 2 + x: canvas.floatingSpace.container.frame.width / 2, + y: canvas.floatingSpace.container.frame.height / 2 } } else { payload.targetPosition = { From 032db15106bf7599b5bb3b72e31932d52c7a3428 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 23:25:52 +0200 Subject: [PATCH 125/221] Fucking BUG with targetPosition fixed --- FloatingSpace/FloatingLayer.js | 12 ++++-------- FloatingSpace/StrategyPart.js | 13 +++++++++---- FloatingSpace/StrategyPartConstructor.js | 4 ++-- Spaces/FloatingSpace.js | 8 ++++---- StrategySpace/InvestmentPlan.js | 4 ++-- 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index cade6407a..db03f70b4 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -391,7 +391,7 @@ function newFloatingLayer () { /* Calculate repulsion force produced by all other floatingObjects */ - currentRepulsionForce(i) + repulsionForceBetweenFloatingObjects(i) targetRepulsionForce(i) @@ -457,7 +457,7 @@ function newFloatingLayer () { } } - function currentRepulsionForce (currentFloatingObject) { + function repulsionForceBetweenFloatingObjects (currentFloatingObject) { try { /* We generate a repulsion force between floatingObjects, that prevents them to be collisioning so often. */ @@ -515,7 +515,7 @@ function newFloatingLayer () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] currentRepulsionForce -> err= ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] repulsionForceBetweenFloatingObjects -> err= ' + err.stack) } } } @@ -645,11 +645,7 @@ function newFloatingLayer () { } function distance (x1, y1, x2, y2) { - try { - return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] distance -> err= ' + err.stack) } - } + return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) } function resolveCollision (floatingObject1, floatingObject2) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index e86c10b21..6bfa2f17d 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -400,10 +400,13 @@ function newStrategyPart () { thisObject.codeEditor.physics() } - if (thisObject.payload.chainParent === undefined) { return } - - thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x - thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y + if (thisObject.payload.chainParent === undefined) { + thisObject.payload.targetPosition.x = canvas.floatingSpace.container.frame.width / 2, + thisObject.payload.targetPosition.y = canvas.floatingSpace.container.frame.height / 2 + } else { + thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x - canvas.floatingSpace.container.frame.position.x + thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y - canvas.floatingSpace.container.frame.position.y + } } function onFocus () { @@ -480,6 +483,7 @@ function newStrategyPart () { y: 0 } + targetPoint = canvas.floatingSpace.container.frame.frameThisPoint(targetPoint) position = thisObject.container.frame.frameThisPoint(position) if (thisObject.container.frame.radius > 1) { @@ -630,3 +634,4 @@ function newStrategyPart () { } } } + diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index bcabcfaa2..0904eb5d7 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -94,7 +94,7 @@ function newStrategyPartConstructor () { } function level_0 () { - floatingObject.friction = 0.93 + floatingObject.friction = FRICTION// 0.93 floatingObject.initializeMass(500) floatingObject.initializeRadius(45) @@ -105,7 +105,7 @@ function newStrategyPartConstructor () { } function level_1 () { - floatingObject.friction = 0.94 + floatingObject.friction = FRICTION // 0.94 floatingObject.initializeMass(250) floatingObject.initializeRadius(45) diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index e4d4d54fd..13841bf2b 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -29,10 +29,10 @@ function newFloatingSpace () { thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.width = browserCanvas.width * 1.5 - thisObject.container.frame.height = browserCanvas.height * 1.5 - thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 - thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 + thisObject.container.frame.width = browserCanvas.width * 1 + thisObject.container.frame.height = browserCanvas.height * 1 + thisObject.container.frame.position.x = 0 // browserCanvas.width / 2// - thisObject.container.frame.width / 2 + thisObject.container.frame.position.y = 0 // browserCanvas.height / 2// - thisObject.container.frame.height / 2 let visible = false diff --git a/StrategySpace/InvestmentPlan.js b/StrategySpace/InvestmentPlan.js index 0eefe04e2..c9ad1afe8 100644 --- a/StrategySpace/InvestmentPlan.js +++ b/StrategySpace/InvestmentPlan.js @@ -43,8 +43,8 @@ function newInvestmentPlan () { let payload = {} if (chainParent === undefined) { payload.targetPosition = { - x: canvas.floatingSpace.container.frame.width / 2, - y: canvas.floatingSpace.container.frame.height / 2 + x: canvas.floatingSpace.container.frame.position.x + canvas.floatingSpace.container.frame.width / 2, + y: canvas.floatingSpace.container.frame.position.y + canvas.floatingSpace.container.frame.height / 2 } } else { payload.targetPosition = { From 38f160b0eec7140502e3802eb7fa986a8ae5ffbb Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 9 May 2019 23:56:15 +0200 Subject: [PATCH 126/221] Bounderies for floating space implemented --- FloatingSpace/FloatingLayer.js | 24 ++++++++++++++++++++++++ FloatingSpace/StrategyPartConstructor.js | 4 ++-- Spaces/FloatingSpace.js | 8 ++++---- StrategySpace/InvestmentPlan.js | 8 ++++---- 4 files changed, 34 insertions(+), 10 deletions(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index db03f70b4..f3889b6f1 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -378,6 +378,7 @@ function newFloatingLayer () { } // We let the Floating Object animate the physics loops by itself. + checkBoundaries(floatingObject) floatingObject.physics() @@ -406,6 +407,28 @@ function newFloatingLayer () { } } + function checkBoundaries (floatingObject) { + if (floatingObject.container.frame.position.x - floatingObject.container.frame.radius < 0) { + floatingObject.container.frame.position.x = floatingObject.container.frame.radius + floatingObject.currentSpeed.x = -floatingObject.currentSpeed.x + } + + if (floatingObject.container.frame.position.x + floatingObject.container.frame.radius > canvas.floatingSpace.container.frame.width) { + floatingObject.container.frame.position.x = canvas.floatingSpace.container.frame.width - floatingObject.container.frame.radius + floatingObject.currentSpeed.x = -floatingObject.currentSpeed.x + } + + if (floatingObject.container.frame.position.y - floatingObject.container.frame.radius < 0) { + floatingObject.container.frame.position.y = floatingObject.container.frame.radius + floatingObject.currentSpeed.y = -floatingObject.currentSpeed.y + } + + if (floatingObject.container.frame.position.y + floatingObject.container.frame.radius > canvas.floatingSpace.container.frame.height) { + floatingObject.container.frame.position.y = canvas.floatingSpace.container.frame.height - floatingObject.container.frame.radius + floatingObject.currentSpeed.y = -floatingObject.currentSpeed.y + } + } + function gravityForce (floatingObject, payload) { try { /* We simulate a kind of gravity towards the target point of each floatingObject. This force will make the floatingObject to keep pushing to reach that point. */ @@ -728,3 +751,4 @@ function newFloatingLayer () { } } } + diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 0904eb5d7..bcabcfaa2 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -94,7 +94,7 @@ function newStrategyPartConstructor () { } function level_0 () { - floatingObject.friction = FRICTION// 0.93 + floatingObject.friction = 0.93 floatingObject.initializeMass(500) floatingObject.initializeRadius(45) @@ -105,7 +105,7 @@ function newStrategyPartConstructor () { } function level_1 () { - floatingObject.friction = FRICTION // 0.94 + floatingObject.friction = 0.94 floatingObject.initializeMass(250) floatingObject.initializeRadius(45) diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 13841bf2b..fc3f5a9c9 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -29,10 +29,10 @@ function newFloatingSpace () { thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.width = browserCanvas.width * 1 - thisObject.container.frame.height = browserCanvas.height * 1 - thisObject.container.frame.position.x = 0 // browserCanvas.width / 2// - thisObject.container.frame.width / 2 - thisObject.container.frame.position.y = 0 // browserCanvas.height / 2// - thisObject.container.frame.height / 2 + thisObject.container.frame.width = browserCanvas.width * 3 + thisObject.container.frame.height = browserCanvas.height * 3 + thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 + thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 let visible = false diff --git a/StrategySpace/InvestmentPlan.js b/StrategySpace/InvestmentPlan.js index c9ad1afe8..34a3da0d9 100644 --- a/StrategySpace/InvestmentPlan.js +++ b/StrategySpace/InvestmentPlan.js @@ -43,13 +43,13 @@ function newInvestmentPlan () { let payload = {} if (chainParent === undefined) { payload.targetPosition = { - x: canvas.floatingSpace.container.frame.position.x + canvas.floatingSpace.container.frame.width / 2, - y: canvas.floatingSpace.container.frame.position.y + canvas.floatingSpace.container.frame.height / 2 + x: canvas.floatingSpace.container.frame.width / 2, + y: canvas.floatingSpace.container.frame.height / 2 } } else { payload.targetPosition = { - x: chainParent.payload.position.x, - y: chainParent.payload.position.y + x: chainParent.payload.position.x - canvas.floatingSpace.container.frame.position.x, + y: chainParent.payload.position.y - canvas.floatingSpace.container.frame.position.y } } From 8ddd3e8c9e6d161cccac5c289e9d6c8400a31d59 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 08:22:19 +0200 Subject: [PATCH 127/221] var to let --- Spaces/ChartSpace.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 912ccf219..ca8f8226e 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -52,7 +52,7 @@ function newChartSpace () { /* We create the first of many possible time machines that could live at the Chart Space. */ - var timeMachine = newTimeMachine() + let timeMachine = newTimeMachine() /* We make the time machine a little bit smaller than the current space. */ @@ -84,8 +84,8 @@ function newChartSpace () { function drawBackground () { if (thisObject.visible !== true) { return } - for (var i = 0; i < thisObject.timeMachines.length; i++) { - var timeMachine = thisObject.timeMachines[i] + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] timeMachine.drawBackground() } } @@ -93,8 +93,8 @@ function newChartSpace () { function draw () { if (thisObject.visible !== true) { return } - for (var i = 0; i < thisObject.timeMachines.length; i++) { - var timeMachine = thisObject.timeMachines[i] + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] timeMachine.draw() } } @@ -106,7 +106,7 @@ function newChartSpace () { /* Now we see which is the inner most container that has it */ - for (var i = 0; i < this.timeMachines.length; i++) { + for (let i = 0; i < this.timeMachines.length; i++) { container = this.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { if (container.isForThisPurpose(purpose)) { From 769395fb729b700a363bd8f81342d0ecb030699e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 08:46:07 +0200 Subject: [PATCH 128/221] Removing list of strategies on side panel --- Spaces/StrategySpace.js | 15 +++++---- StrategySpace/StrategyCollection.js | 47 +++++------------------------ 2 files changed, 14 insertions(+), 48 deletions(-) diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 18c73f82d..0b683f576 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -3,7 +3,7 @@ function newStrategySpace () { const MODULE_NAME = 'Strategy Space' let thisObject = { sidePanel: undefined, - strategyCollection: undefined, + investmentPlanWorkspace: undefined, container: undefined, draw: draw, getContainer: getContainer, @@ -22,18 +22,18 @@ function newStrategySpace () { thisObject.sidePanel = newSidePanel() thisObject.sidePanel.initialize() - thisObject.strategyCollection = newStrategyCollection() - thisObject.strategyCollection.container.connectToParent(thisObject.sidePanel.container, true, true) - await thisObject.strategyCollection.initialize() + thisObject.investmentPlanWorkspace = newInvestmentPlanWorkspace() + thisObject.investmentPlanWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) + await thisObject.investmentPlanWorkspace.initialize() - thisObject.sidePanel.areas.push(thisObject.strategyCollection) + thisObject.sidePanel.areas.push(thisObject.investmentPlanWorkspace) } function getContainer (point) { let container - if (thisObject.strategyCollection !== undefined) { - container = thisObject.strategyCollection.getContainer(point) + if (thisObject.investmentPlanWorkspace !== undefined) { + container = thisObject.investmentPlanWorkspace.getContainer(point) if (container !== undefined) { return container } } @@ -49,4 +49,3 @@ function newStrategySpace () { thisObject.sidePanel.draw() } } - diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index 727e0d77d..c5fb45744 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -1,6 +1,6 @@ -function newStrategyCollection () { - const MODULE_NAME = 'Strategy Collection' +function newInvestmentPlanWorkspace () { + const MODULE_NAME = 'Investment Plan Workspace' const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -94,7 +94,7 @@ function newStrategyCollection () { .then(response => { window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) thisObject.strategies = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - createCollectionItems() + deploydInvestmentPlan() resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) .catch(error => { @@ -120,52 +120,19 @@ function newStrategyCollection () { } } - function createCollectionItems () { - const TOP_MARGIN = 100 - const ITEMS_SEPARATION = 90 - - 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(thisObject.strategies) - 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 - } + function deploydInvestmentPlan () { + canvas.floatingSpace.makeVisible() + thisObject.strategy = newInvestmentPlan() + thisObject.strategy.initialize(thisObject.strategySource) } function getContainer (point) { let container - for (let i = 0; i < colletionItems.length; i++) { - let item = colletionItems[i] - container = item.getContainer(point) - if (container !== undefined) { - return container - } - } - return undefined } function draw () { - if (colletionItems === undefined) { - return - } - for (let i = 0; i < colletionItems.length; i++) { - let item = colletionItems[i] - item.draw() - } } } From 9e55536b7db1f86a29bb2ce8b7d9925baed50ce3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 08:58:16 +0200 Subject: [PATCH 129/221] BottomSpace improved --- Spaces/BottomSpace.js | 264 ++++++++++++++++++++++-------------------- 1 file changed, 141 insertions(+), 123 deletions(-) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index eccf98ad2..c142f757c 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -1,154 +1,172 @@ -  -function newBottomSpace () { - let thisObject = { - 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 - } + function newBottomSpace () { + const MODULE_NAME = 'Bottom Space' + const ERROR_LOG = true - var container = newContainer() - container.initialize() - thisObject.container = container + let thisObject = { + container: undefined, + draw: draw, + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + createNewControl: createNewControl, + destroyControl: destroyControl, + getControl: getControl, + finalize: finalize, + initialize: initialize + } - container.isDraggeable = false + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.isClickeable = true + thisObject.container.isDraggeable = false - controlsMap = new Map() - resize() + controlsMap = new Map() + resize() - return thisObject + let selfMouseClickEventSubscriptionId + let canvasBroserResizedEventSubscriptionId - function initialize () { - window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) - } + return thisObject - function createNewControl (pType, pDrawFunction, pOwner) { - let control + function finalize () { + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + thisObject.container.eventHandler.stopListening(canvasBroserResizedEventSubscriptionId) - switch (pType) { + thisObject.container.finalize() + thisObject.container = undefined + } - case 'Over The Line': - { - control = newUIControl() - control.initialize() - control.drawFunction = pDrawFunction - break - } - } + function initialize () { + canvasBroserResizedEventSubscriptionId = window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + } - let controlArray = controlsMap.get(pOwner) - if (controlArray === undefined) { - controlArray = [] - controlsMap.set(pOwner, controlArray) - } + function onMouseClick (event) { - controlArray.push(control) + } - control.handle = Math.floor((Math.random() * 10000000) + 1) + function createNewControl (pType, pDrawFunction, pOwner) { + let control - return control.handle - } + switch (pType) { - function destroyControl (pControlHandle) { - 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 - } - } - } + case 'Over The Line': + { + control = newUIControl() + control.initialize() + control.drawFunction = pDrawFunction + break + } + } - 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 - } - } - } - } + let controlArray = controlsMap.get(pOwner) + if (controlArray === undefined) { + controlArray = [] + controlsMap.set(pOwner, controlArray) + } - 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] + controlArray.push(control) - if (control.handle === pControlHandle) { - return control - } - } - } - } + control.handle = Math.floor((Math.random() * 10000000) + 1) - function resize () { - container.frame.position.x = 0 - container.frame.position.y = viewPort.visibleArea.bottomLeft.y + return control.handle + } - thisObject.container.frame.width = browserCanvas.width - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT - } + function destroyControl (pControlHandle) { + 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 + } + } + } - function getContainer (point) { - let container + 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 + } + } + } + } - return thisObject.container - } + 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] - function draw () { - thisObject.container.frame.draw(false, false) + if (control.handle === pControlHandle) { + return control + } + } + } + } - drawBackground() + function resize () { + container.frame.position.x = 0 + container.frame.position.y = viewPort.visibleArea.bottomLeft.y - 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.container.frame.width = browserCanvas.width + thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + } - 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 getContainer (point) { + let container - function drawBackground () { - let opacity = 1 + return thisObject.container + } - let zeroPoint = { - x: 0, - y: 0 - } + function draw () { + thisObject.container.frame.draw(false, false) - zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint) + drawBackground() - let breakpointsHeight = 15 - const RED_LINE_HIGHT = 5 + 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() + } + } - browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' - browserCanvasContext.closePath() - browserCanvasContext.fill() + 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() + } + } + } - browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, RED_LINE_HIGHT) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' - browserCanvasContext.closePath() - browserCanvasContext.fill() - } -} + function drawBackground () { + let opacity = 1 + + let zeroPoint = { + x: 0, + y: 0 + } + + zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint) + + let breakpointsHeight = 15 + const RED_LINE_HIGHT = 5 + + browserCanvasContext.beginPath() + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, thisObject.container.frame.height) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() + + browserCanvasContext.beginPath() + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() + } + } From 2b49bbad2c201ef07d876098080a03f8e5e231fd Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 09:16:44 +0200 Subject: [PATCH 130/221] Can drag the bottom space --- Spaces/BottomSpace.js | 24 ++++++++++--------- ...llection.js => InvestmentPlanWorkspace.js} | 0 2 files changed, 13 insertions(+), 11 deletions(-) rename StrategySpace/{StrategyCollection.js => InvestmentPlanWorkspace.js} (100%) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index c142f757c..91fa400a4 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -16,32 +16,32 @@ thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) - thisObject.container.isClickeable = true - thisObject.container.isDraggeable = false + thisObject.container.isClickeable = false + thisObject.container.isDraggeable = true controlsMap = new Map() resize() let selfMouseClickEventSubscriptionId - let canvasBroserResizedEventSubscriptionId + let canvasBrowserResizedEventSubscriptionId return thisObject function finalize () { thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) - thisObject.container.eventHandler.stopListening(canvasBroserResizedEventSubscriptionId) + thisObject.container.eventHandler.stopListening(canvasBrowserResizedEventSubscriptionId) thisObject.container.finalize() thisObject.container = undefined } function initialize () { - canvasBroserResizedEventSubscriptionId = window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) + canvasBrowserResizedEventSubscriptionId = window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) } function onMouseClick (event) { - + // canvas.strategySpace.investmentPlanWorkspace.showUp() } function createNewControl (pType, pDrawFunction, pOwner) { @@ -109,17 +109,19 @@ } function resize () { - container.frame.position.x = 0 - container.frame.position.y = viewPort.visibleArea.bottomLeft.y + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = viewPort.visibleArea.bottomLeft.y thisObject.container.frame.width = browserCanvas.width thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT } function getContainer (point) { - let container - - return thisObject.container + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } } function draw () { diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/InvestmentPlanWorkspace.js similarity index 100% rename from StrategySpace/StrategyCollection.js rename to StrategySpace/InvestmentPlanWorkspace.js From 6301102a79bb4d0b02ade5eb764119d4a5155b80 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 09:29:04 +0200 Subject: [PATCH 131/221] Dragging on one axis is now possible --- Canvas.js | 9 +++++++-- Container.js | 2 ++ Spaces/BottomSpace.js | 22 ++++++++++++++-------- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/Canvas.js b/Canvas.js index e137a69c8..4f7f8c567 100644 --- a/Canvas.js +++ b/Canvas.js @@ -173,6 +173,7 @@ function newCanvas () { animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded) animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) @@ -730,8 +731,12 @@ function newCanvas () { } if (containerBeingDragged !== undefined) { - containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x - containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y + if (containerBeingDragged.notDraggingOnX === false) { + containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x + } + if (containerBeingDragged.notDraggingOnY === false) { + containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y + } } } diff --git a/Container.js b/Container.js index b6ef7eace..88c619091 100644 --- a/Container.js +++ b/Container.js @@ -8,6 +8,8 @@ function newContainer () { eventHandler: undefined, parentContainer: undefined, isDraggeable: true, + notDraggingOnX: false, + notDraggingOnY: false, isClickeable: false, isWheelable: false, detectMouseOver: false, diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 91fa400a4..3defae6e1 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -6,6 +6,7 @@ let thisObject = { container: undefined, draw: draw, + physics: physics, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. createNewControl: createNewControl, destroyControl: destroyControl, @@ -18,6 +19,7 @@ thisObject.container.initialize(MODULE_NAME) thisObject.container.isClickeable = false thisObject.container.isDraggeable = true + thisObject.container.notDraggingOnX = true controlsMap = new Map() resize() @@ -44,6 +46,18 @@ // canvas.strategySpace.investmentPlanWorkspace.showUp() } + function resize () { + thisObject.container.frame.position.x = 0 + thisObject.container.frame.position.y = viewPort.visibleArea.bottomLeft.y + + thisObject.container.frame.width = browserCanvas.width + thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + } + + function physics () { + + } + function createNewControl (pType, pDrawFunction, pOwner) { let control @@ -108,14 +122,6 @@ } } - function resize () { - thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = viewPort.visibleArea.bottomLeft.y - - thisObject.container.frame.width = browserCanvas.width - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT - } - function getContainer (point) { if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container From ebe1b74165226ebb5d076d675b4c3a46db06bf5f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 09:53:07 +0200 Subject: [PATCH 132/221] Resizing Viewport is now possible --- Globals.js | 8 ++++---- Spaces/BottomSpace.js | 3 ++- ViewPort.js | 30 +++++++++++++++++++++++------- 3 files changed, 29 insertions(+), 12 deletions(-) diff --git a/Globals.js b/Globals.js index 09dfce412..b48c52910 100644 --- a/Globals.js +++ b/Globals.js @@ -159,10 +159,10 @@ maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that proj const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; -const TOP_SPACE_HEIGHT = 5; -const BOTTOM_SPACE_HEIGHT = 35; -const BREAKPOINT_HEIGHT = 15; -const SIDE_PANEL_WIDTH = 450 +let TOP_SPACE_HEIGHT = 5; +let BOTTOM_SPACE_HEIGHT = 35; +let BREAKPOINT_HEIGHT = 15; +let SIDE_PANEL_WIDTH = 450 const PRODUCT_CARD_STATUS = { ON: 'on', diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 3defae6e1..f9c07db5c 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -55,7 +55,8 @@ } function physics () { - + BOTTOM_SPACE_HEIGHT = browserCanvas.height - thisObject.container.frame.position.y + viewPort.resize() } function createNewControl (pType, pDrawFunction, pOwner) { diff --git a/ViewPort.js b/ViewPort.js index 11b286d3c..dbfdbde98 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -10,11 +10,12 @@ function newViewPort () { const CONSOLE_LOG = true let ANIMATION_INCREMENT = 0.25 - const TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT - const LEFT_MARGIN = 50 - const RIGHT_MARGIN = 50 - const MARGINS = { + + let TOP_MARGIN = 15 + TOP_SPACE_HEIGHT + let BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT + let LEFT_MARGIN = 50 + let RIGHT_MARGIN = 50 + let MARGINS = { TOP: TOP_MARGIN, BOTTOM: BOTTOM_MARGIN, LEFT: LEFT_MARGIN, @@ -44,6 +45,7 @@ function newViewPort () { animate: animate, draw: draw, raiseEvents: raiseEvents, + resize: resize, initialize: initialize } @@ -76,6 +78,22 @@ function newViewPort () { return thisObject function initialize () { + resize() + readObjectState() + } + + function resize () { + TOP_MARGIN = 15 + TOP_SPACE_HEIGHT + BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT + LEFT_MARGIN = 50 + RIGHT_MARGIN = 50 + MARGINS = { + TOP: TOP_MARGIN, + BOTTOM: BOTTOM_MARGIN, + LEFT: LEFT_MARGIN, + RIGHT: RIGHT_MARGIN + } + thisObject.visibleArea = { topLeft: { x: LEFT_MARGIN, y: TOP_MARGIN }, topRight: { x: browserCanvas.width - RIGHT_MARGIN, y: TOP_MARGIN }, @@ -85,8 +103,6 @@ function newViewPort () { thisObject.width = thisObject.visibleArea.topRight.x - thisObject.visibleArea.topLeft.x thisObject.height = thisObject.visibleArea.bottomRight.y - thisObject.visibleArea.topLeft.y - - readObjectState() } function getDisplacement () { From 028f97c1f325dd85de635d2fdd3078d06cbc8827 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 09:56:31 +0200 Subject: [PATCH 133/221] dinamic heigh --- Spaces/BottomSpace.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index f9c07db5c..b69429438 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -57,6 +57,7 @@ function physics () { BOTTOM_SPACE_HEIGHT = browserCanvas.height - thisObject.container.frame.position.y viewPort.resize() + thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT } function createNewControl (pType, pDrawFunction, pOwner) { From c367bb498574d1a3c348775e0b19df558c535021 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 10:39:43 +0200 Subject: [PATCH 134/221] working but with BOTTOM_SPACE_HEIGHT --- Canvas.js | 4 ++-- Globals.js | 2 ++ Spaces/BottomSpace.js | 27 +++++++++++++++++++++++- Spaces/FloatingSpace.js | 4 ---- Spaces/StrategySpace.js | 14 ++++++++++++ StrategySpace/InvestmentPlanWorkspace.js | 8 ++++--- 6 files changed, 49 insertions(+), 10 deletions(-) diff --git a/Canvas.js b/Canvas.js index 4f7f8c567..1e9e3091a 100644 --- a/Canvas.js +++ b/Canvas.js @@ -167,6 +167,8 @@ function newCanvas () { /* Here we add all the functions that will be called during the animation cycle. */ + animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded) @@ -176,8 +178,6 @@ function newCanvas () { animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded) - animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded) animation.start(onStart) diff --git a/Globals.js b/Globals.js index b48c52910..6b3ed9d1d 100644 --- a/Globals.js +++ b/Globals.js @@ -159,6 +159,8 @@ maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that proj const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; +const BOTTOM_SPACE_MIN_HEIGHT = 35; +const BOTTOM_SPACE_MAX_HEIGHT = browserCanvas.height; let TOP_SPACE_HEIGHT = 5; let BOTTOM_SPACE_HEIGHT = 35; let BREAKPOINT_HEIGHT = 15; diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index b69429438..43664d3cd 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -48,7 +48,7 @@ function resize () { thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = viewPort.visibleArea.bottomLeft.y + thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT thisObject.container.frame.width = browserCanvas.width thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT @@ -56,6 +56,30 @@ function physics () { BOTTOM_SPACE_HEIGHT = browserCanvas.height - thisObject.container.frame.position.y + + /* Check the limits */ + + if (BOTTOM_SPACE_HEIGHT < BOTTOM_SPACE_MIN_HEIGHT) { + BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MIN_HEIGHT + thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + canvas.strategySpace.makeInvisible() + } + if (BOTTOM_SPACE_HEIGHT > BOTTOM_SPACE_MAX_HEIGHT) { + BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MAX_HEIGHT + thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + canvas.chartSpace.visible = false + canvas.panelsSpace.visible = false + } + + if (BOTTOM_SPACE_HEIGHT > browserCanvas.height * 25 / 100) { + canvas.strategySpace.makeVisible() + } + + if (BOTTOM_SPACE_HEIGHT < browserCanvas.height * 95 / 100) { + canvas.chartSpace.visible = true + canvas.panelsSpace.visible = true + } + viewPort.resize() thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT } @@ -180,3 +204,4 @@ browserCanvasContext.fill() } } + diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index fc3f5a9c9..cc2887e18 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -66,14 +66,10 @@ function newFloatingSpace () { } function makeVisible () { - canvas.chartSpace.visible = false - canvas.panelsSpace.visible = false visible = true } function makeInvisible () { - canvas.chartSpace.visible = true - canvas.panelsSpace.visible = true visible = false } diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 0b683f576..8885bd5a3 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -7,6 +7,8 @@ function newStrategySpace () { container: undefined, draw: draw, getContainer: getContainer, + makeVisible: makeVisible, + makeInvisible: makeInvisible, initialize: initialize } @@ -29,6 +31,18 @@ function newStrategySpace () { thisObject.sidePanel.areas.push(thisObject.investmentPlanWorkspace) } + function makeVisible () { + if (thisObject.investmentPlanWorkspace.isDeployed !== true) { + thisObject.investmentPlanWorkspace.deploydInvestmentPlan() + } + canvas.floatingSpace.makeVisible() + visible = true + } + + function makeInvisible () { + visible = false + } + function getContainer (point) { let container diff --git a/StrategySpace/InvestmentPlanWorkspace.js b/StrategySpace/InvestmentPlanWorkspace.js index c5fb45744..d2ceaa8b9 100644 --- a/StrategySpace/InvestmentPlanWorkspace.js +++ b/StrategySpace/InvestmentPlanWorkspace.js @@ -6,8 +6,10 @@ function newInvestmentPlanWorkspace () { logger.fileName = MODULE_NAME let thisObject = { + isDeployed: false, strategies: undefined, container: undefined, + deploydInvestmentPlan: deploydInvestmentPlan, draw: draw, getContainer: getContainer, initialize: initialize @@ -94,7 +96,7 @@ function newInvestmentPlanWorkspace () { .then(response => { window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) thisObject.strategies = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - deploydInvestmentPlan() + resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) .catch(error => { @@ -121,9 +123,9 @@ function newInvestmentPlanWorkspace () { } function deploydInvestmentPlan () { - canvas.floatingSpace.makeVisible() thisObject.strategy = newInvestmentPlan() - thisObject.strategy.initialize(thisObject.strategySource) + thisObject.strategy.initialize(thisObject.strategies) + thisObject.isDeployed = true } function getContainer (point) { From 6fde43db50754dd62a6cf52a4acdae36bea02ab8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 11:32:44 +0200 Subject: [PATCH 135/221] floating space apeearing --- Globals.js | 11 ++++----- Spaces/BottomSpace.js | 33 ++++++++++++++------------- Spaces/ChartSpace.js | 53 +++++++++++++++++++++++++++++++++++++++---- TimelineChart.js | 5 +++- ViewPort.js | 2 +- 5 files changed, 76 insertions(+), 28 deletions(-) diff --git a/Globals.js b/Globals.js index 6b3ed9d1d..e89a71204 100644 --- a/Globals.js +++ b/Globals.js @@ -159,12 +159,11 @@ maxDate.setDate(maxDate.getDate() + 365 * 1); // We might have charts that proj const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; -const BOTTOM_SPACE_MIN_HEIGHT = 35; -const BOTTOM_SPACE_MAX_HEIGHT = browserCanvas.height; -let TOP_SPACE_HEIGHT = 5; -let BOTTOM_SPACE_HEIGHT = 35; -let BREAKPOINT_HEIGHT = 15; -let SIDE_PANEL_WIDTH = 450 +const TOP_SPACE_HEIGHT = 5; +const BOTTOM_SPACE_HEIGHT = 35; +const BREAKPOINT_HEIGHT = 15; +const SIDE_PANEL_WIDTH = 450 +let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT const PRODUCT_CARD_STATUS = { ON: 'on', diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 43664d3cd..519aae910 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -55,33 +55,29 @@ } function physics () { - BOTTOM_SPACE_HEIGHT = browserCanvas.height - thisObject.container.frame.position.y - /* Check the limits */ - if (BOTTOM_SPACE_HEIGHT < BOTTOM_SPACE_MIN_HEIGHT) { - BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MIN_HEIGHT + if (thisObject.container.frame.position.y > browserCanvas.height - BOTTOM_SPACE_HEIGHT) { thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT canvas.strategySpace.makeInvisible() } - if (BOTTOM_SPACE_HEIGHT > BOTTOM_SPACE_MAX_HEIGHT) { - BOTTOM_SPACE_HEIGHT = BOTTOM_SPACE_MAX_HEIGHT - thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + if (thisObject.container.frame.position.y < BOTTOM_SPACE_HEIGHT) { + thisObject.container.frame.position.y = BOTTOM_SPACE_HEIGHT canvas.chartSpace.visible = false canvas.panelsSpace.visible = false } - if (BOTTOM_SPACE_HEIGHT > browserCanvas.height * 25 / 100) { + if (thisObject.container.frame.position.y < browserCanvas.height * 90 / 100) { canvas.strategySpace.makeVisible() } - if (BOTTOM_SPACE_HEIGHT < browserCanvas.height * 95 / 100) { + if (thisObject.container.frame.position.y < browserCanvas.height * 10 / 100) { canvas.chartSpace.visible = true canvas.panelsSpace.visible = true } + BOTTOM_SPACE_POSITION = thisObject.container.frame.position.y viewPort.resize() - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT } function createNewControl (pType, pDrawFunction, pOwner) { @@ -186,19 +182,24 @@ y: 0 } - zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint) - - let breakpointsHeight = 15 const RED_LINE_HIGHT = 5 + zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint) + browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() + + browserCanvasContext.beginPath() + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index ca8f8226e..752188c91 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -1,4 +1,4 @@ - /* +/* The chart space is where all the charts live. What this space contains is a type of object we call Time Machine. A Time Machine is a cointainer of charts objects. The idea is simple, all the chart objects are ploted according to the time of the Time Machine object. When the time of the Time Machine @@ -16,6 +16,7 @@ function newChartSpace () { let thisObject = { visible: true, container: undefined, + fitIntoVisibleArea: fitIntoVisibleArea, drawBackground: drawBackground, draw: draw, timeMachines: [], @@ -50,11 +51,11 @@ function newChartSpace () { let initializedCounter = 0 let toInitialize = 1 - /* We create the first of many possible time machines that could live at the Chart Space. */ + /* We create the first of many possible time machines that could live at the Chart Space. */ let timeMachine = newTimeMachine() - /* We make the time machine a little bit smaller than the current space. */ + /* We make the time machine a little bit smaller than the current space. */ timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2 timeMachine.container.frame.position.y = this.container.frame.height / 2 - timeMachine.container.frame.height / 2 @@ -81,15 +82,58 @@ function newChartSpace () { } } + function fitIntoVisibleArea (point) { + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + + if (point.x > browserCanvas.width) { + point.x = browserCanvas.width + } + + if (point.x < 0) { + point.x = 0 + } + + if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + point.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + } + + if (point.y < 0) { + point.y = 0 + } + + return point + } + function drawBackground () { if (thisObject.visible !== true) { return } + drawSpaceBackground() + for (let i = 0; i < thisObject.timeMachines.length; i++) { let timeMachine = thisObject.timeMachines[i] timeMachine.drawBackground() } } + function drawSpaceBackground () { + let opacity = '1' + let fromPoint = { + x: 0, + y: 0 + } + + let toPoint = { + x: browserCanvas.width, + y: BOTTOM_SPACE_POSITION + } + + browserCanvasContext.beginPath() + browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() + } + function draw () { if (thisObject.visible !== true) { return } @@ -104,7 +148,7 @@ function newChartSpace () { let container - /* Now we see which is the inner most container that has it */ + /* Now we see which is the inner most container that has it */ for (let i = 0; i < this.timeMachines.length; i++) { container = this.timeMachines[i].getContainer(point, purpose) @@ -117,3 +161,4 @@ function newChartSpace () { return this.container } } + diff --git a/TimelineChart.js b/TimelineChart.js index baf381f59..9cac52b13 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -299,6 +299,9 @@ fromPoint = transformThisPoint(fromPoint, thisObject.container) toPoint = transformThisPoint(toPoint, thisObject.container) + fromPoint = canvas.chartSpace.fitIntoVisibleArea(fromPoint) + toPoint = canvas.chartSpace.fitIntoVisibleArea(toPoint) + browserCanvasContext.beginPath() browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) @@ -338,7 +341,7 @@ let imageWidth = 150 let MAX_COLUMNS = 16 - let MAX_ROWS = 7 + let MAX_ROWS = 5 let Y_TOP_MARGIN = 30 let point1 = { diff --git a/ViewPort.js b/ViewPort.js index dbfdbde98..c34100d5e 100644 --- a/ViewPort.js +++ b/ViewPort.js @@ -84,7 +84,7 @@ function newViewPort () { function resize () { TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT + BOTTOM_MARGIN = 15 + browserCanvas.height - BOTTOM_SPACE_POSITION LEFT_MARGIN = 50 RIGHT_MARGIN = 50 MARGINS = { From 38ec00be8642fbe976d1a128c27a76d7ff87f465 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 12:38:59 +0200 Subject: [PATCH 136/221] Drag with snapping --- Canvas.js | 81 ++++++++++++++++++++++--------------------- Spaces/BottomSpace.js | 21 +++++------ Spaces/ChartSpace.js | 20 ++++++++++- TimeMachine.js | 33 +++++++++--------- 4 files changed, 86 insertions(+), 69 deletions(-) diff --git a/Canvas.js b/Canvas.js index 1e9e3091a..41d071313 100644 --- a/Canvas.js +++ b/Canvas.js @@ -171,14 +171,15 @@ function newCanvas () { animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) - animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, 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.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) + animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) animation.start(onStart) function onFunctionAdded (err) { @@ -358,6 +359,21 @@ function newCanvas () { return } + /* we check if it is over any of the existing containers at the Chart Space. */ + + container = thisObject.chartSpace.getContainer(point) + + if (container !== undefined) { + if (container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } else { + viewPortBeingDragged = true + return + } + } + container = thisObject.floatingSpace.getContainer(point) if (container !== undefined && container.isDraggeable === true) { @@ -371,18 +387,6 @@ function newCanvas () { /* We dont want to mess up with the click */ return } - - /* we check if it is over any of the existing containers at the Chart Space. */ - - container = thisObject.chartSpace.getContainer(point) - - if (container !== undefined && container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - return - } - - viewPortBeingDragged = true } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) } } @@ -439,17 +443,17 @@ function newCanvas () { return } - /* We check if the mouse is over a floatingObject/ */ - container = thisObject.floatingSpace.getContainer(point) + /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + + container = thisObject.chartSpace.getContainer(point) if (container !== undefined && container.isClickeable === true) { container.eventHandler.raiseEvent('onMouseClick', point) return } - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - - container = thisObject.chartSpace.getContainer(point) + /* We check if the mouse is over a floatingObject/ */ + container = thisObject.floatingSpace.getContainer(point) if (container !== undefined && container.isClickeable === true) { container.eventHandler.raiseEvent('onMouseClick', point) @@ -592,9 +596,10 @@ function newCanvas () { } } - /* We check if the mouse is over a floatingObject/ */ - if (thisObject.floatingSpace !== undefined) { - container = thisObject.floatingSpace.getContainer(point) + /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + + if (thisObject.chartSpace !== undefined) { + container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) if (container !== undefined && container.detectMouseOver === true) { containerFound() @@ -602,10 +607,9 @@ function newCanvas () { } } - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - - if (thisObject.chartSpace !== undefined) { - container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) + /* We check if the mouse is over a floatingObject/ */ + if (thisObject.floatingSpace !== undefined) { + container = thisObject.floatingSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { containerFound() @@ -647,15 +651,6 @@ function newCanvas () { let container container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) - if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('onMouseWheel', event) - return false // This instructs the browser not to take the event and scroll the page. - } - - /* We try second with floating objects. */ - - container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) - if (container !== undefined && container.isWheelable === true) { container.eventHandler.raiseEvent('onMouseWheel', event) return false // This instructs the browser not to take the event and scroll the page. @@ -670,9 +665,17 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } - /* Finally we try the Chart Space. */ + /* Chart Space. */ container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('onMouseWheel', event) + return false // This instructs the browser not to take the event and scroll the page. + } + + /* We try second with floating objects. */ + + container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { container.eventHandler.raiseEvent('onMouseWheel', event) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 519aae910..c69e15151 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -57,22 +57,17 @@ function physics () { /* Check the limits */ - if (thisObject.container.frame.position.y > browserCanvas.height - BOTTOM_SPACE_HEIGHT) { + if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) { thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT canvas.strategySpace.makeInvisible() - } - if (thisObject.container.frame.position.y < BOTTOM_SPACE_HEIGHT) { - thisObject.container.frame.position.y = BOTTOM_SPACE_HEIGHT - canvas.chartSpace.visible = false - canvas.panelsSpace.visible = false - } - - if (thisObject.container.frame.position.y < browserCanvas.height * 90 / 100) { + } else { canvas.strategySpace.makeVisible() } - if (thisObject.container.frame.position.y < browserCanvas.height * 10 / 100) { - canvas.chartSpace.visible = true + if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) { + thisObject.container.frame.position.y = 0 + canvas.panelsSpace.visible = false + } else { canvas.panelsSpace.visible = true } @@ -188,7 +183,7 @@ browserCanvasContext.beginPath() browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ')' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() @@ -199,7 +194,7 @@ browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 752188c91..8932c25f3 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -17,6 +17,7 @@ function newChartSpace () { visible: true, container: undefined, fitIntoVisibleArea: fitIntoVisibleArea, + physics: physics, drawBackground: drawBackground, draw: draw, timeMachines: [], @@ -104,6 +105,18 @@ function newChartSpace () { return point } + function physics () { + thisObject.container.frame.height = BOTTOM_SPACE_POSITION + + if (thisObject.container.frame.height <= 0 / 100) { + thisObject.visible = false + } else { + thisObject.visible = true + } + + viewPort.resize() + } + function drawBackground () { if (thisObject.visible !== true) { return } @@ -158,7 +171,12 @@ function newChartSpace () { } } } - return this.container + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } } } diff --git a/TimeMachine.js b/TimeMachine.js index 3de634771..642ed2387 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -1,4 +1,4 @@ - /* +/* Markets are a function of time. When watching them, end users must be positioned at one particular point in time. The system currently allows users to position themselves at any time they like. @@ -37,7 +37,7 @@ function newTimeMachine () { thisObject.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2 let controlPanelHandle // We need this to destroy the Panel when this object is itself destroyed or no longer needs it... - // ... also to request a reference to the object for the cases we need it. + // ... also to request a reference to the object for the cases we need it. const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 let timeScale @@ -63,7 +63,7 @@ function newTimeMachine () { function initialize (callBackFunction) { if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - /* Each Time Machine has a Control Panel. */ + /* Each Time Machine has a Control Panel. */ let panelOwner = 'Global' controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner) @@ -76,7 +76,7 @@ function newTimeMachine () { moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition) }) - /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ + /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ let position = 0 // This defines the position of each chart respect to each other. @@ -103,7 +103,7 @@ function newTimeMachine () { controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined) timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime) - /* Each Time Machine has a Time Scale and a Right Scale. */ + /* Each Time Machine has a Time Scale and a Right Scale. */ timeScale = newTimeScale() timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) @@ -143,10 +143,10 @@ function newTimeMachine () { let market = SUPPORTED_MARKETS[j] if ( - exchange === DEFAULT_EXCHANGE && - market.assetA === DEFAULT_MARKET.assetA && - market.assetB === DEFAULT_MARKET.assetB - ) { continue } + exchange === DEFAULT_EXCHANGE && + market.assetA === DEFAULT_MARKET.assetA && + market.assetB === DEFAULT_MARKET.assetB + ) { continue } initializeTimelineChart(exchange, market) } @@ -203,7 +203,7 @@ function newTimeMachine () { if (timeScale !== undefined) { timeScale.draw() } if (rigthScale !== undefined) { rigthScale.draw() } - // thisObject.container.frame.draw(false, true, false) + // thisObject.container.frame.draw(false, true, false) } } @@ -237,7 +237,7 @@ function newTimeMachine () { } } - if (thisObject.container.frame.isThisPointHere(point) === true) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) { @@ -261,10 +261,11 @@ function newTimeMachine () { } timeLineCoordinateSystem.initialize( - minValue, - maxValue, - thisObject.container.frame.width, - thisObject.container.frame.height - ) + minValue, + maxValue, + thisObject.container.frame.width, + thisObject.container.frame.height + ) } } + From 4618f145b6017b9430dd4088333794d6796e61db Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 12:47:59 +0200 Subject: [PATCH 137/221] Finished working with bottom space --- Canvas.js | 2 +- Spaces/BottomSpace.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Canvas.js b/Canvas.js index 41d071313..c7fe85f66 100644 --- a/Canvas.js +++ b/Canvas.js @@ -175,9 +175,9 @@ function newCanvas () { animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) + animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) - animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) animation.start(onStart) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index c69e15151..707fe917f 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -188,7 +188,7 @@ browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() From c6c95d8e6bc479edffd36199cadad79ee4263f80 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 13:08:04 +0200 Subject: [PATCH 138/221] Chart Background images not showm when to little space: fixed --- Spaces/ChartSpace.js | 8 +++++--- TimelineChart.js | 10 ---------- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 8932c25f3..db35893a9 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -122,9 +122,11 @@ function newChartSpace () { drawSpaceBackground() - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.drawBackground() + if (thisObject.container.frame.height > browserCanvas.height * 15 / 100) { + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.drawBackground() + } } } diff --git a/TimelineChart.js b/TimelineChart.js index 9cac52b13..4733030b1 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -237,8 +237,6 @@ } function tooTiny () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] tooTiny -> Entering function.') } - if (viewPort.zoomLevel < Math.trunc(-28.25 * 100) / 100) { return true } else { @@ -247,8 +245,6 @@ } function tooSmall () { - if (INFO_LOG === true) { logger.write('[INFO] tooSmall -> Entering function.') } - if (viewPort.zoomLevel < Math.trunc(-27.25 * 100) / 100) { return true } else { @@ -257,8 +253,6 @@ } function drawBackground () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') } - if (thisObject.container.frame.isInViewPort()) { if (window.CHART_ON_FOCUS === '') { window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA @@ -269,8 +263,6 @@ } function draw () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') } - if (thisObject.container.frame.isInViewPort()) { drawChartsBackground() @@ -313,8 +305,6 @@ } function drawChartsBackgroundImages () { - if (INTENSIVE_LOG === true) { logger.write('[INFO] drawChartsBackground -> Entering function.') } - if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return } /* Fist we calculate the corners of the current frame so as not to draw imaages ourside of it */ From ee5f43ce88512ba1c30a62a7da4f69336b2211d5 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 13:30:16 +0200 Subject: [PATCH 139/221] frame supporting fitFunction --- Frame.js | 53 +++++++++++++++++++++++---- Panels/ProductsPanel.js | 2 +- Utilities/RoundedCornersBackground.js | 7 ++++ 3 files changed, 53 insertions(+), 9 deletions(-) diff --git a/Frame.js b/Frame.js index b91736738..9f169ccd3 100644 --- a/Frame.js +++ b/Frame.js @@ -275,28 +275,29 @@ function newFrame () { } } - function draw (drawGrid, drawBorders, drawBackground) { + function draw (drawGrid, drawBorders, drawBackground, fitFunction) { if (drawBorders === true) { - borders() + borders(fitFunction) } if (drawGrid === true) { - grid() + grid(fitFunction) } if (drawBackground === true) { - background() + background(fitFunction) } } - function background () { + function background (fitFunction) { let params = { cornerRadius: 5, lineWidth: 0.1, opacity: 0.75, container: thisObject.container, borderColor: UI_COLOR.DARK, - backgroundColor: UI_COLOR.WHITE + backgroundColor: UI_COLOR.WHITE, + fitFunction: fitFunction } roundedCornersBackground(params) @@ -316,6 +317,11 @@ function newFrame () { titleBarPoint1 = frameThisPoint(titleBarPoint1) titleBarPoint2 = frameThisPoint(titleBarPoint2) + if (fitFunction !== undefined) { + titleBarPoint1 = fitFunction(titleBarPoint1) + titleBarPoint2 = fitFunction(titleBarPoint2) + } + /* We paint the title bar now */ browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)' @@ -354,11 +360,15 @@ function newFrame () { labelPoint = thisObject.frameThisPoint(labelPoint) + if (fitFunction !== undefined) { + labelPoint = fitFunction(labelPoint) + } + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } - function borders () { + function borders (fitFunction) { /* Lest get the important points of the drawing so as to apply the needed transformations. */ let point1 @@ -393,6 +403,13 @@ function newFrame () { point3 = transformThisPoint(point3, thisObject.container) point4 = transformThisPoint(point4, thisObject.container) + if (fitFunction !== undefined) { + point1 = fitFunction(point1) + point2 = fitFunction(point2) + point3 = fitFunction(point3) + point4 = fitFunction(point4) + } + /* Lets start the drawing. */ browserCanvasContext.beginPath() @@ -410,7 +427,7 @@ function newFrame () { browserCanvasContext.closePath() } - function grid (smallLines) { + function grid (fitFunction, smallLines) { if (smallLines === true) { /* Small Lines */ @@ -433,6 +450,11 @@ function newFrame () { point1 = transformThisPoint(point1, thisObject.container) point2 = transformThisPoint(point2, thisObject.container) + if (fitFunction !== undefined) { + point1 = fitFunction(point1) + point2 = fitFunction(point2) + } + browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) } @@ -450,6 +472,11 @@ function newFrame () { point3 = transformThisPoint(point3, thisObject.container) point4 = transformThisPoint(point4, thisObject.container) + if (fitFunction !== undefined) { + point3 = fitFunction(point3) + point4 = fitFunction(point4) + } + browserCanvasContext.moveTo(point3.x, point3.y) browserCanvasContext.lineTo(point4.x, point4.y) } @@ -480,6 +507,11 @@ function newFrame () { point1 = transformThisPoint(point1, thisObject.container) point2 = transformThisPoint(point2, thisObject.container) + if (fitFunction !== undefined) { + point1 = fitFunction(point1) + point2 = fitFunction(point2) + } + browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) } @@ -497,6 +529,11 @@ function newFrame () { point3 = transformThisPoint(point3, thisObject.container) point4 = transformThisPoint(point4, thisObject.container) + if (fitFunction !== undefined) { + point3 = fitFunction(point3) + point4 = fitFunction(point4) + } + browserCanvasContext.moveTo(point3.x, point3.y) browserCanvasContext.lineTo(point4.x, point4.y) } diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 38887727b..115b7cefa 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -234,7 +234,7 @@ function draw () { if (isInitialized === false) { return } - thisObject.container.frame.draw(false, false, true) + thisObject.container.frame.draw(false, false, true, canvas.chartSpace.fitIntoVisibleArea) for (let i = 0; i < visibleProductCards.length; i++) { visibleProductCards[i].draw() diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js index f9386eb86..3dd7bbf38 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/Utilities/RoundedCornersBackground.js @@ -26,6 +26,13 @@ function roundedCornersBackground (params) { borderPoint3 = params.container.frame.frameThisPoint(borderPoint3) borderPoint4 = params.container.frame.frameThisPoint(borderPoint4) + if (params.fitFunction !== undefined) { + borderPoint1 = params.fitFunction(borderPoint1) + borderPoint2 = params.fitFunction(borderPoint2) + borderPoint3 = params.fitFunction(borderPoint3) + borderPoint4 = params.fitFunction(borderPoint4) + } + browserCanvasContext.setLineDash([0, 0]) /* Shadow */ From 3790c6e1bc36cb66ff548073b9d3323dd6d76b3e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 14:14:22 +0200 Subject: [PATCH 140/221] Finished with Product Panels hidding below bottom bar --- Panels/PanelTabButton.js | 10 +++- ProductCard.js => Panels/ProductCard.js | 61 ++++++++++++++++++++----- Panels/ProductsPanel.js | 3 +- Spaces/ChartSpace.js | 15 ++++-- 4 files changed, 70 insertions(+), 19 deletions(-) rename ProductCard.js => Panels/ProductCard.js (94%) diff --git a/Panels/PanelTabButton.js b/Panels/PanelTabButton.js index a1d44c195..fe41ecbf6 100644 --- a/Panels/PanelTabButton.js +++ b/Panels/PanelTabButton.js @@ -1,8 +1,9 @@ function newPanelTabButton () { let thisObject = { container: undefined, - draw: draw, + fitFunction: undefined, parentContainer: undefined, + draw: draw, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize } @@ -203,6 +204,12 @@ function newPanelTabButton () { point2 = thisObject.container.frame.frameThisPoint(point2) point3 = thisObject.container.frame.frameThisPoint(point3) + if (thisObject.fitFunction !== undefined) { + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + } + /* Lets start the drawing. */ browserCanvasContext.beginPath() @@ -220,4 +227,3 @@ function newPanelTabButton () { browserCanvasContext.fill() } } - diff --git a/ProductCard.js b/Panels/ProductCard.js similarity index 94% rename from ProductCard.js rename to Panels/ProductCard.js index a6d3c5eff..f98d94155 100644 --- a/ProductCard.js +++ b/Panels/ProductCard.js @@ -16,15 +16,13 @@ function newProductCard () { bot: undefined, product: undefined, code: undefined, - + fitFunction: undefined, setDatetime: setDatetime, setTimePeriod: setTimePeriod, - onMarketFileLoaded: onMarketFileLoaded, onDailyFileLoaded: onDailyFileLoaded, onSingleFileLoaded: onSingleFileLoaded, onFileSequenceLoaded: onFileSequenceLoaded, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize } @@ -429,6 +427,11 @@ function newProductCard () { */ + let fitImagePoint = { + x: 0, + y: 0 + } + const devTeamImageSize = 20 const botImageSize = 20 const plotterImageSize = { @@ -448,6 +451,8 @@ function newProductCard () { teamImagePoint = thisObject.container.frame.frameThisPoint(teamImagePoint) + fitImagePoint = thisObject.fitFunction(teamImagePoint) + let teamImage if (legacyTeamAvatarLoaded === true) { @@ -458,7 +463,7 @@ function newProductCard () { teamImage = teamAvatar } - if (teamImage !== undefined) { + if (teamImage !== undefined && teamImagePoint.y === fitImagePoint.y) { if (teamImage.naturalHeight !== 0) { /* The image is rounded before being displayed. */ @@ -485,6 +490,7 @@ function newProductCard () { } botImagePoint = thisObject.container.frame.frameThisPoint(botImagePoint) + fitImagePoint = thisObject.fitFunction(botImagePoint) let imageId = thisObject.bot.devTeam + '.' + thisObject.bot.profilePicture @@ -493,7 +499,7 @@ function newProductCard () { botImage = thisObject.bot.avatar - if (botImage !== undefined) { + if (botImage !== undefined && botImagePoint.y === fitImagePoint.y) { if (botImage.naturalHeight !== 0) { /* The image is rounded before being displayed. */ @@ -522,11 +528,17 @@ function newProductCard () { } plotterImagePoint = thisObject.container.frame.frameThisPoint(plotterImagePoint) + fitImagePoint = { + x: 0, + y: plotterImagePoint.y + plotterImageSize.height + } + + fitImagePoint = thisObject.fitFunction(fitImagePoint) let imageId = thisObject.product.plotter.devTeam + '.' + thisObject.product.plotter.codeName + '.' + thisObject.product.plotter.moduleName + '.' + thisObject.product.plotter.profilePicture let plotterImage = legacyPlotterBanner - if (plotterImage !== undefined) { + if (plotterImage !== undefined && plotterImagePoint.y + plotterImageSize.height === fitImagePoint.y) { if (plotterImage.naturalHeight !== 0) { browserCanvasContext.drawImage(plotterImage, plotterImagePoint.x, plotterImagePoint.y, plotterImageSize.width, plotterImageSize.height) } @@ -588,6 +600,11 @@ function newProductCard () { point3 = thisObject.container.frame.frameThisPoint(point3) point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + point4 = thisObject.fitFunction(point4) + browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -609,7 +626,7 @@ function newProductCard () { let labelPoint let fontSize = 10 - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY let label @@ -625,8 +642,9 @@ function newProductCard () { } labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + labelPoint = thisObject.fitFunction(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -641,8 +659,9 @@ function newProductCard () { } labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + labelPoint = thisObject.fitFunction(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } @@ -664,8 +683,9 @@ function newProductCard () { } labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + labelPoint = thisObject.fitFunction(labelPoint) - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) @@ -728,6 +748,11 @@ function newProductCard () { point3 = thisObject.container.frame.frameThisPoint(point3) point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + point4 = thisObject.fitFunction(point4) + browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -790,6 +815,11 @@ function newProductCard () { point3 = thisObject.container.frame.frameThisPoint(point3) point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + point4 = thisObject.fitFunction(point4) + browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -852,6 +882,11 @@ function newProductCard () { point3 = thisObject.container.frame.frameThisPoint(point3) point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + point4 = thisObject.fitFunction(point4) + browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -914,6 +949,11 @@ function newProductCard () { point3 = thisObject.container.frame.frameThisPoint(point3) point4 = thisObject.container.frame.frameThisPoint(point4) + point1 = thisObject.fitFunction(point1) + point2 = thisObject.fitFunction(point2) + point3 = thisObject.fitFunction(point3) + point4 = thisObject.fitFunction(point4) + browserCanvasContext.beginPath() browserCanvasContext.moveTo(point1.x, point1.y) browserCanvasContext.lineTo(point2.x, point2.y) @@ -929,4 +969,3 @@ function newProductCard () { browserCanvasContext.stroke() } } - diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 115b7cefa..eed9b2abe 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -53,6 +53,7 @@ panelTabButton = newPanelTabButton() panelTabButton.parentContainer = thisObject.container panelTabButton.container.frame.parentFrame = thisObject.container.frame + panelTabButton.fitFunction = canvas.chartSpace.fitIntoVisibleArea panelTabButton.initialize() /* Get the current teams of the logged in user. */ @@ -93,7 +94,7 @@ productCard.devTeam = devTeam productCard.bot = bot productCard.product = product - + productCard.fitFunction = canvas.chartSpace.fitIntoVisibleArea productCard.code = exchange + '-' + market.assetB + '/' + market.assetA + '-' + devTeam.codeName + '-' + bot.codeName + '-' + product.codeName /* Initialize it */ diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index db35893a9..8fce84ab3 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -86,23 +86,28 @@ function newChartSpace () { function fitIntoVisibleArea (point) { /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + let returnPoint = { + x: point.x, + y: point.y + } + if (point.x > browserCanvas.width) { - point.x = browserCanvas.width + returnPoint.x = browserCanvas.width } if (point.x < 0) { - point.x = 0 + returnPoint.x = 0 } if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { - point.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 } if (point.y < 0) { - point.y = 0 + returnPoint.y = 0 } - return point + return returnPoint } function physics () { From 16fb5edd0a44c745428f96b3ce8a3d9be100767a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 14:37:19 +0200 Subject: [PATCH 141/221] Problem with scales not appearing fixed --- Spaces/ChartSpace.js | 50 ++++++++++++++++++++++---------------------- TimeMachine.js | 44 +++++++++++++++++++------------------- 2 files changed, 47 insertions(+), 47 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 8fce84ab3..5e0c6a3f7 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -58,8 +58,8 @@ function newChartSpace () { /* We make the time machine a little bit smaller than the current space. */ - timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2 - timeMachine.container.frame.position.y = this.container.frame.height / 2 - timeMachine.container.frame.height / 2 + timeMachine.container.frame.position.x = thisObject.container.frame.width / 2 - timeMachine.container.frame.width / 2 + timeMachine.container.frame.position.y = thisObject.container.frame.height / 2 - timeMachine.container.frame.height / 2 timeMachine.initialize(onTimeMachineInitialized) @@ -83,6 +83,29 @@ function newChartSpace () { } } + function getContainer (point, purpose) { + if (thisObject.visible !== true) { return } + + let container + + /* Now we see which is the inner most container that has it */ + + for (let i = 0; i < thisObject.timeMachines.length; i++) { + container = thisObject.timeMachines[i].getContainer(point, purpose) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + return container + } + } + } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + function fitIntoVisibleArea (point) { /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ @@ -162,28 +185,5 @@ function newChartSpace () { timeMachine.draw() } } - - function getContainer (point, purpose) { - if (thisObject.visible !== true) { return } - - let container - - /* Now we see which is the inner most container that has it */ - - for (let i = 0; i < this.timeMachines.length; i++) { - container = this.timeMachines[i].getContainer(point, purpose) - if (container !== undefined) { - if (container.isForThisPurpose(purpose)) { - return container - } - } - } - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return thisObject.container - } else { - return undefined - } - } } diff --git a/TimeMachine.js b/TimeMachine.js index 642ed2387..ab58e874f 100644 --- a/TimeMachine.js +++ b/TimeMachine.js @@ -186,27 +186,6 @@ function newTimeMachine () { } } - function drawBackground () { - for (let i = 0; i < this.charts.length; i++) { - let chart = this.charts[i] - chart.drawBackground() - } - } - - function draw () { - if (thisObject.container.frame.isInViewPort()) { - for (let i = 0; i < this.charts.length; i++) { - let chart = this.charts[i] - chart.draw() - } - - if (timeScale !== undefined) { timeScale.draw() } - if (rigthScale !== undefined) { rigthScale.draw() } - - // thisObject.container.frame.draw(false, true, false) - } - } - function getContainer (point, purpose) { let container @@ -237,7 +216,7 @@ function newTimeMachine () { } } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThisPointHere(point) === true) { return thisObject.container } else { if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) { @@ -247,6 +226,27 @@ function newTimeMachine () { } } + function drawBackground () { + for (let i = 0; i < this.charts.length; i++) { + let chart = this.charts[i] + chart.drawBackground() + } + } + + function draw () { + if (thisObject.container.frame.isInViewPort()) { + for (let i = 0; i < this.charts.length; i++) { + let chart = this.charts[i] + chart.draw() + } + + if (timeScale !== undefined) { timeScale.draw() } + if (rigthScale !== undefined) { rigthScale.draw() } + + // thisObject.container.frame.draw(false, true, false) + } + } + function recalculateScale () { if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') } From 8a4849e4b11718ef2ece7cf547e4a360455de6cf Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 14:48:34 +0200 Subject: [PATCH 142/221] zooms at the charts working again --- Canvas.js | 12 +++++++----- Spaces/ChartSpace.js | 1 + 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/Canvas.js b/Canvas.js index c7fe85f66..d69ea61a4 100644 --- a/Canvas.js +++ b/Canvas.js @@ -673,6 +673,11 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } + if (container !== undefined) { + viewPort.applyZoom(delta) + return false + } + /* We try second with floating objects. */ container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) @@ -680,12 +685,9 @@ function newCanvas () { if (container !== undefined && container.isWheelable === true) { container.eventHandler.raiseEvent('onMouseWheel', event) return false // This instructs the browser not to take the event and scroll the page. - } else { - /* If all the above fails, we fallback into applying zoom to the viewPort */ - - viewPort.applyZoom(delta) - return false // This instructs the browser not to take the event and scroll the page. } + + return false } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err.stack) } } diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 5e0c6a3f7..5d2a5db81 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -30,6 +30,7 @@ function newChartSpace () { thisObject.container.initialize(MODULE_NAME) thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false return thisObject From a807340d8d2f40caa1e836c7d45bb47e396cea0d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 14:57:21 +0200 Subject: [PATCH 143/221] periodScale now on foreground --- TimelineChart.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/TimelineChart.js b/TimelineChart.js index 4733030b1..7ba204e95 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -265,11 +265,8 @@ function draw () { if (thisObject.container.frame.isInViewPort()) { drawChartsBackground() - - // chartGrid.draw(thisObject.container, timeLineCoordinateSystem) - - timePeriodScale.draw() plotterManager.draw() + timePeriodScale.draw() } } From d0b54b6e31a5caf7e0d09d97f977c5b5dec1940b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 15:04:31 +0200 Subject: [PATCH 144/221] Organizing code Files --- ChartUtilities.js => ChartsSpace/ChartUtilities.js | 0 PlottersManager.js => ChartsSpace/PlottersManager.js | 0 .../TimeLineCoordinateSystem.js | 0 TimeMachine.js => ChartsSpace/TimeMachine.js | 0 TimelineChart.js => ChartsSpace/TimelineChart.js | 0 ViewPort.js => ChartsSpace/ViewPort.js | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename ChartUtilities.js => ChartsSpace/ChartUtilities.js (100%) rename PlottersManager.js => ChartsSpace/PlottersManager.js (100%) rename TimeLineCoordinateSystem.js => ChartsSpace/TimeLineCoordinateSystem.js (100%) rename TimeMachine.js => ChartsSpace/TimeMachine.js (100%) rename TimelineChart.js => ChartsSpace/TimelineChart.js (100%) rename ViewPort.js => ChartsSpace/ViewPort.js (100%) diff --git a/ChartUtilities.js b/ChartsSpace/ChartUtilities.js similarity index 100% rename from ChartUtilities.js rename to ChartsSpace/ChartUtilities.js diff --git a/PlottersManager.js b/ChartsSpace/PlottersManager.js similarity index 100% rename from PlottersManager.js rename to ChartsSpace/PlottersManager.js diff --git a/TimeLineCoordinateSystem.js b/ChartsSpace/TimeLineCoordinateSystem.js similarity index 100% rename from TimeLineCoordinateSystem.js rename to ChartsSpace/TimeLineCoordinateSystem.js diff --git a/TimeMachine.js b/ChartsSpace/TimeMachine.js similarity index 100% rename from TimeMachine.js rename to ChartsSpace/TimeMachine.js diff --git a/TimelineChart.js b/ChartsSpace/TimelineChart.js similarity index 100% rename from TimelineChart.js rename to ChartsSpace/TimelineChart.js diff --git a/ViewPort.js b/ChartsSpace/ViewPort.js similarity index 100% rename from ViewPort.js rename to ChartsSpace/ViewPort.js From 7673864efd4b20ae46729454c5f22cb75d47da0a Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 16:47:45 +0200 Subject: [PATCH 145/221] Problem with floating objects appearing anywhere solved --- FloatingSpace/FloatingObject.js | 23 ++++++++++------------- FloatingSpace/StrategyPart.js | 4 ++-- FloatingSpace/StrategyPartConstructor.js | 2 +- StrategySpace/InvestmentPlan.js | 4 ++-- 4 files changed, 15 insertions(+), 18 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 2a3a5e667..b90da54a3 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -132,14 +132,8 @@ function newFloatingObject () { /* Floating object position in screen coordinates */ - let position = { - x: 0, - y: 0 - } - - position = thisObject.container.frame.frameThisPoint(position) - - thisObject.payload.position = position + thisObject.payload.position.x = thisObject.container.frame.position.x + thisObject.payload.position.y = thisObject.container.frame.position.y } function onMouseOver (point) { @@ -255,11 +249,14 @@ function newFloatingObject () { y: Math.floor((Math.random() * (200) - 100)) + arroundPoint.y } - thisObject.container.frame.position = position - thisObject.payload.position = { - x: position.x, - y: position.y - } + // thisObject.container.frame.position = thisObject.container.frame.frameThisPoint(position) + + thisObject.container.frame.position.x = position.x + thisObject.container.frame.position.y = position.y + + thisObject.payload.position = {} + thisObject.payload.position.x = position.x + thisObject.payload.position.y = position.y } function radomizeCurrentSpeed () { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 6bfa2f17d..57c02c27d 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -404,8 +404,8 @@ function newStrategyPart () { thisObject.payload.targetPosition.x = canvas.floatingSpace.container.frame.width / 2, thisObject.payload.targetPosition.y = canvas.floatingSpace.container.frame.height / 2 } else { - thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x - canvas.floatingSpace.container.frame.position.x - thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y - canvas.floatingSpace.container.frame.position.y + thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x + thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y } } diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index bcabcfaa2..f3f475ef8 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -31,9 +31,9 @@ function newStrategyPartConstructor () { function createStrategyPart (payload) { let floatingObject = newFloatingObject() + floatingObject.container.connectToParent(canvas.floatingSpace.container, false, false, false, false, false, false, false, false) floatingObject.initialize('Strategy Part', payload) payload.floatingObject = floatingObject - floatingObject.container.connectToParent(canvas.floatingSpace.container, false, false, false, false, false, false, false, false) let strategyPart = newStrategyPart() strategyPart.initialize(payload) diff --git a/StrategySpace/InvestmentPlan.js b/StrategySpace/InvestmentPlan.js index 34a3da0d9..0eefe04e2 100644 --- a/StrategySpace/InvestmentPlan.js +++ b/StrategySpace/InvestmentPlan.js @@ -48,8 +48,8 @@ function newInvestmentPlan () { } } else { payload.targetPosition = { - x: chainParent.payload.position.x - canvas.floatingSpace.container.frame.position.x, - y: chainParent.payload.position.y - canvas.floatingSpace.container.frame.position.y + x: chainParent.payload.position.x, + y: chainParent.payload.position.y } } From b437581f59247f95c66167a3f35cdc7152645397 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 16:54:20 +0200 Subject: [PATCH 146/221] Mouse over floating space working again --- Spaces/ChartSpace.js | 824 ++++++++++++++++++++++++++++++++++++------- 1 file changed, 696 insertions(+), 128 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 5d2a5db81..d69ea61a4 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -1,189 +1,757 @@ -/* -The chart space is where all the charts live. What this space contains is a type of object we call Time Machine. A Time Machine is a cointainer of -charts objects. The idea is simple, all the chart objects are ploted according to the time of the Time Machine object. When the time of the Time Machine -changes, then all charts in it are replotted with the corresponging data. +let browserCanvasContext // The context of the canvas object. -*/ +let stepsInitializationCounter = 0 // This counter the initialization steps required to be able to turn off the splash screen. +let marketInitializationCounter = 0 // This counter the initialization of markets required to be able to turn off the splash screen. +let splashScreenNeeded = true -function newChartSpace () { - const MODULE_NAME = 'Chart Space' +function newCanvas () { + const MODULE_NAME = 'Canvas' const INFO_LOG = false const ERROR_LOG = true + const INTENSIVE_LOG = false const logger = newWebDebugLog() logger.fileName = MODULE_NAME + /* Mouse event related variables. */ + + let containerDragStarted = false + let floatingObjectDragStarted = false + let floatingObjectBeingDragged + let containerBeingDragged + let viewPortBeingDragged = false + let ignoreNextClick = false + + let dragVector = { + downX: 0, + downY: 0, + upX: 0, + upY: 0 + } + + /* canvas object */ + let thisObject = { - visible: true, - container: undefined, - fitIntoVisibleArea: fitIntoVisibleArea, - physics: physics, - drawBackground: drawBackground, - draw: draw, - timeMachines: [], - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + eventHandler: undefined, + topSpace: undefined, + chartSpace: undefined, + floatingSpace: undefined, + panelsSpace: undefined, + bottomSpace: undefined, + strategySpace: undefined, + animation: undefined, initialize: initialize, finalize: finalize } - thisObject.container = newContainer() - thisObject.container.initialize(MODULE_NAME) - - thisObject.container.isDraggeable = false - thisObject.container.isWheelable = false + thisObject.eventHandler = newEventHandler() + let splashScreen + let lastContainerMouseOver return thisObject +/* + The canvas object represents a layer on top of the browser canvas object. + + 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 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. + + Canvas + | + | + ---> topSpace + | + | + ---> chartSpace + | + | + ---> flaotingSpace + | + | + ---> panelsSpace + | + | + ---> bottomSpace + | + | + ---> strategySpace +*/ + function finalize () { try { if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.finalize() + thisObject.chartSpace.finalize() + thisObject.floatingSpace.finalize() + + browserCanvas.removeEventListener('mousedown', onMouseDown, false) + browserCanvas.removeEventListener('mouseup', onMouseUp, false) + browserCanvas.removeEventListener('mousemove', onMouseMove, false) + browserCanvas.removeEventListener('click', onMouseClick, false) + + /* Mouse wheel events. */ + + if (browserCanvas.removeEventListener) { + // IE9, Chrome, Safari, Opera + browserCanvas.removeEventListener('mousewheel', onMouseWheel, false) + // Firefox + browserCanvas.removeEventListener('DOMMouseScroll', onMouseWheel, false) } + // IE 6/7/8 + else browserCanvas.detachEvent('onmousewheel', onMouseWheel) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } - function initialize (callBackFunction) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + async function initialize (callBackFunction) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - let initializedCounter = 0 - let toInitialize = 1 + initializeBrowserCanvas() - /* We create the first of many possible time machines that could live at the Chart Space. */ + addCanvasEvents() - let timeMachine = newTimeMachine() + /* Instantiate all the children spaces of Canvas object */ - /* We make the time machine a little bit smaller than the current space. */ + thisObject.topSpace = newTopSpace() + await thisObject.topSpace.initialize() - timeMachine.container.frame.position.x = thisObject.container.frame.width / 2 - timeMachine.container.frame.width / 2 - timeMachine.container.frame.position.y = thisObject.container.frame.height / 2 - timeMachine.container.frame.height / 2 + thisObject.strategySpace = newStrategySpace() + await thisObject.strategySpace.initialize() - timeMachine.initialize(onTimeMachineInitialized) + thisObject.bottomSpace = newBottomSpace() + thisObject.bottomSpace.initialize() - function onTimeMachineInitialized (err) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Entering function.') } + thisObject.panelsSpace = newPanelsSpace() + thisObject.panelsSpace.initialize() - initializedCounter++ + thisObject.floatingSpace = newFloatingSpace() + thisObject.floatingSpace.initialize() - if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Initialization of a Time Machine failed.') } + thisObject.chartSpace = newChartSpace() + thisObject.chartSpace.initialize(onCharSpaceInitialized) - callBackFunction(err) + function onCharSpaceInitialized (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCharSpaceInitialized -> Entering function.') } + + viewPort.raiseEvents() // These events will impacts on objects just initialized. + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + /* Splash Screen */ + + splashScreen = newSplashScreen() + splashScreen.initialize() + + let animation = newAnimation() + animation.initialize(onAnimationInitialized) + + function onAnimationInitialized (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> Entering function.') } + + thisObject.animation = animation + + /* Here we add all the functions that will be called during the animation cycle. */ + + animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) + animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) + animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) + animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) + animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) + animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) + animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) + animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) + animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) + animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) + animation.start(onStart) + + function onFunctionAdded (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onFunctionAdded -> Entering function.') } + + if (err.result === GLOBAL.DEFAULT_FAIL_RESPONSE.result) { + animation.stop() + + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> Animation Stopped since a vital funtion could not be added.') } + + /* Display some Error Page here. */ + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + function onStart (err) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Entering function.') } + + switch (err.result) { + case GLOBAL.DEFAULT_OK_RESPONSE.result: { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received OK Response.') } + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + return + } + + case GLOBAL.DEFAULT_FAIL_RESPONSE.result: { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received FAIL Response.') } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + return + } + + default: { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received Unexpected Response.') } + callBackFunction(err) + return + } + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + function initializeBrowserCanvas () { + try { + if (INFO_LOG === true) { logger.write('[INFO] initializeBrowserCanvas -> Entering function.') } + + browserCanvasContext = browserCanvas.getContext('2d') + // browserCanvasContext.font = 'italic small-caps bold 12px Saira' + browserCanvasContext.font = 'Saira' + + viewPort.initialize() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err.stack) } + } + } + + function addCanvasEvents () { + try { + if (INFO_LOG === true) { logger.write('[INFO] addCanvasEvents -> Entering function.') } + + /* Mouse down and up events to control the drag of the canvas. */ + + browserCanvas.addEventListener('mousedown', onMouseDown, false) + browserCanvas.addEventListener('mouseup', onMouseUp, false) + browserCanvas.addEventListener('mousemove', onMouseMove, false) + browserCanvas.addEventListener('click', onMouseClick, false) + + /* Mouse wheel events. */ + + if (browserCanvas.addEventListener) { + // IE9, Chrome, Safari, Opera + browserCanvas.addEventListener('mousewheel', onMouseWheel, false) + // Firefox + browserCanvas.addEventListener('DOMMouseScroll', onMouseWheel, false) + } + // IE 6/7/8 + else browserCanvas.attachEvent('onmousewheel', onMouseWheel) + + // Disables the context menu when you right mouse click the canvas. + browserCanvas.oncontextmenu = function (e) { + e.preventDefault() + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err.stack) } + } + } + + function onMouseDown (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseDown -> Entering function.') } + + /* + + There are four types of elements that can be dragged. + + 1. Panels. + 2. Floating Elements (Currently only FloatingObjects). + 3. Charts. + 4. The Viewport. + + We eveluate each space in order to see if they are holding the element being dragged, and we fallout at the Viewport. + + */ + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + dragVector.downX = point.x + dragVector.downY = point.y + + 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 } - thisObject.timeMachines.push(timeMachine) - - if (initializedCounter === toInitialize) { - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + if (container !== undefined && container.isDraggeable === false) { + return } - } - } - function getContainer (point, purpose) { - if (thisObject.visible !== true) { return } + /* We check if the mouse is over an element of the Top Space / */ - let container + container = thisObject.topSpace.getContainer(point) - /* Now we see which is the inner most container that has it */ + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } + + /* We check if the mouse is over an element of the Bottom Space / */ + + container = thisObject.bottomSpace.getContainer(point) + + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } + + /* We check if the mouse is over a panel/ */ + + container = thisObject.panelsSpace.getContainer(point) + + if (container !== undefined && container.isDraggeable === true && event.button === 2) { + containerBeingDragged = container + containerDragStarted = true + return + } + + if (container !== undefined && container.isClickeable === true) { + /* We dont want to mess up with the click */ + return + } + + /* we check if it is over any of the existing containers at the Chart Space. */ + + container = thisObject.chartSpace.getContainer(point) - for (let i = 0; i < thisObject.timeMachines.length; i++) { - container = thisObject.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { - if (container.isForThisPurpose(purpose)) { - return container + if (container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + return + } else { + viewPortBeingDragged = true + return } } - } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return thisObject.container - } else { - return undefined - } - } + container = thisObject.floatingSpace.getContainer(point) - function fitIntoVisibleArea (point) { - /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ - - let returnPoint = { - x: point.x, - y: point.y - } - - if (point.x > browserCanvas.width) { - returnPoint.x = browserCanvas.width - } - - if (point.x < 0) { - returnPoint.x = 0 - } - - if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 - } - - if (point.y < 0) { - returnPoint.y = 0 - } - - return returnPoint - } - - function physics () { - thisObject.container.frame.height = BOTTOM_SPACE_POSITION - - if (thisObject.container.frame.height <= 0 / 100) { - thisObject.visible = false - } else { - thisObject.visible = true - } - - viewPort.resize() - } - - function drawBackground () { - if (thisObject.visible !== true) { return } - - drawSpaceBackground() - - if (thisObject.container.frame.height > browserCanvas.height * 15 / 100) { - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.drawBackground() + if (container !== undefined && container.isDraggeable === true) { + containerBeingDragged = container + containerDragStarted = true + floatingObjectDragStarted = true + return } + + if (container !== undefined && container.isClickeable === true) { + /* We dont want to mess up with the click */ + return + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) } } } - function drawSpaceBackground () { - let opacity = '1' - let fromPoint = { - x: 0, - y: 0 - } + function onMouseClick (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseClick -> Entering function.') } - let toPoint = { - x: browserCanvas.width, - y: BOTTOM_SPACE_POSITION - } + if (ignoreNextClick === true) { + ignoreNextClick = false + return + } + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } - browserCanvasContext.beginPath() - browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - browserCanvasContext.closePath() - browserCanvasContext.fill() + 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) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + + /* We check if the mouse is over an element of the Bottom Space / */ + + container = thisObject.bottomSpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + + /* We check if the mouse is over a panel/ */ + + container = thisObject.panelsSpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + + /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + + container = thisObject.chartSpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + + /* We check if the mouse is over a floatingObject/ */ + container = thisObject.floatingSpace.getContainer(point) + + if (container !== undefined && container.isClickeable === true) { + container.eventHandler.raiseEvent('onMouseClick', point) + return + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err.stack) } + } } - function draw () { - if (thisObject.visible !== true) { return } + function onMouseUp (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseUp -> Entering function.') } - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.draw() + if (containerDragStarted || viewPortBeingDragged || floatingObjectDragStarted) { + thisObject.eventHandler.raiseEvent('Drag Finished', undefined) + } + + if ( + containerDragStarted || + floatingObjectDragStarted || + viewPortBeingDragged + ) { + ignoreNextClick = true + } + /* Turn off all the possible things that can be dragged. */ + + containerDragStarted = false + floatingObjectDragStarted = false + viewPortBeingDragged = false + + containerBeingDragged = undefined + + browserCanvas.style.cursor = 'auto' + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err.stack) } + } + } + + function onMouseMove (event) { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] onMouseMove -> Entering function.') } + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + viewPort.mousePosition.x = point.x + viewPort.mousePosition.y = point.y + + if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { + if (floatingObjectDragStarted === true) { + let targetContainer = thisObject.floatingSpace.getContainer(point) + if (targetContainer !== undefined) { + if (targetContainer.id !== containerBeingDragged.id) { + containerBeingDragged = undefined + containerDragStarted = false + floatingObjectDragStarted = false + browserCanvas.style.cursor = 'auto' + ignoreNextClick = true + return + } + } else { + containerDragStarted = false + containerBeingDragged = undefined + floatingObjectDragStarted = false + browserCanvas.style.cursor = 'auto' + ignoreNextClick = true + return + } + } + + dragVector.upX = point.x + dragVector.upY = point.y + + checkDrag(event) + } else { + onMouseOver(event) + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseMove -> err = ' + err.stack) } + } + } + + function onMouseOver (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') } + + /* Then we check who is the current object underneeth the mounse. */ + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + let container + + /* We check if the mouse is over an element of the Strategy Space / */ + + if (thisObject.strategySpace !== undefined) { + container = thisObject.strategySpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over an element of the Top Space / */ + + if (thisObject.topSpace !== undefined) { + container = thisObject.topSpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over an element of the Bottom Space / */ + + if (thisObject.bottomSpace !== undefined) { + container = thisObject.bottomSpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over a panel/ */ + + if (thisObject.panelsSpace !== undefined) { + container = thisObject.panelsSpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ + + if (thisObject.chartSpace !== undefined) { + container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) + + if (container !== undefined && container.detectMouseOver === true) { + containerFound() + return + } + } + + /* We check if the mouse is over a floatingObject/ */ + if (thisObject.floatingSpace !== undefined) { + container = thisObject.floatingSpace.getContainer(point) + + if (container !== undefined && container.detectMouseOver === true) { + 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) } + } + } + + function onMouseWheel (event) { + try { + if (INFO_LOG === true) { logger.write('[INFO] onMouseWheel -> Entering function.') } + + // cross-browser wheel delta + var event = window.event || event // old IE support + let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail)) + + /* We try first with panels. */ + + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + event.mousePosition = point + let container + container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) + + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('onMouseWheel', event) + return false // This instructs the browser not to take the event and scroll the page. + } + + /* We try the Bottom Space. */ + + container = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) + + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('onMouseWheel', event) + return false // This instructs the browser not to take the event and scroll the page. + } + + /* Chart Space. */ + + container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('onMouseWheel', event) + return false // This instructs the browser not to take the event and scroll the page. + } + + if (container !== undefined) { + viewPort.applyZoom(delta) + return false + } + + /* We try second with floating objects. */ + + container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) + + if (container !== undefined && container.isWheelable === true) { + container.eventHandler.raiseEvent('onMouseWheel', event) + return false // This instructs the browser not to take the event and scroll the page. + } + + return false + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err.stack) } + } + } + + function checkDrag (event) { + try { + if (INTENSIVE_LOG === true) { logger.write('[INFO] checkDrag -> Entering function.') } + + if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { + let point = { + x: event.pageX, + y: event.pageY - window.canvasApp.topMargin + } + + browserCanvas.style.cursor = 'grabbing' + thisObject.eventHandler.raiseEvent('Dragging', undefined) + + if (containerDragStarted || viewPortBeingDragged) { + /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */ + + let downCopy = { + x: dragVector.downX, + y: dragVector.downY + } + + let downCopyNoTransf + downCopyNoTransf = viewPort.unzoomThisPoint(downCopy) + // downCopyNoTransf = containerBeingDragged.zoom.unzoomThisPoint(downCopyNoTransf); + + let upCopy = { + x: dragVector.upX, + y: dragVector.upY + } + + let upCopyNoTranf + upCopyNoTranf = viewPort.unzoomThisPoint(upCopy) + + let displaceVector = { + x: dragVector.upX - dragVector.downX, + y: dragVector.upY - dragVector.downY + } + + if (viewPortBeingDragged) { + viewPort.displace(displaceVector) + } + + if (containerBeingDragged !== undefined) { + if (containerBeingDragged.notDraggingOnX === false) { + containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x + } + if (containerBeingDragged.notDraggingOnY === false) { + containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y + } + } + } + + /* Finally we set the starting point of the new dragVector at this current point. */ + + dragVector.downX = dragVector.upX + dragVector.downY = dragVector.upY + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] checkDrag -> err = ' + err.stack) } } } } From 362664460cdaa328451e9a29be7f09868f1ee490 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 18:35:15 +0200 Subject: [PATCH 147/221] restoring the original code --- Spaces/ChartSpace.js | 816 +++++++------------------------------------ 1 file changed, 124 insertions(+), 692 deletions(-) diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index d69ea61a4..5d2a5db81 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -1,757 +1,189 @@ +/* -let browserCanvasContext // The context of the canvas object. +The chart space is where all the charts live. What this space contains is a type of object we call Time Machine. A Time Machine is a cointainer of +charts objects. The idea is simple, all the chart objects are ploted according to the time of the Time Machine object. When the time of the Time Machine +changes, then all charts in it are replotted with the corresponging data. -let stepsInitializationCounter = 0 // This counter the initialization steps required to be able to turn off the splash screen. -let marketInitializationCounter = 0 // This counter the initialization of markets required to be able to turn off the splash screen. -let splashScreenNeeded = true +*/ -function newCanvas () { - const MODULE_NAME = 'Canvas' +function newChartSpace () { + const MODULE_NAME = 'Chart Space' const INFO_LOG = false const ERROR_LOG = true - const INTENSIVE_LOG = false const logger = newWebDebugLog() logger.fileName = MODULE_NAME - /* Mouse event related variables. */ - - let containerDragStarted = false - let floatingObjectDragStarted = false - let floatingObjectBeingDragged - let containerBeingDragged - let viewPortBeingDragged = false - let ignoreNextClick = false - - let dragVector = { - downX: 0, - downY: 0, - upX: 0, - upY: 0 - } - - /* canvas object */ - let thisObject = { - eventHandler: undefined, - topSpace: undefined, - chartSpace: undefined, - floatingSpace: undefined, - panelsSpace: undefined, - bottomSpace: undefined, - strategySpace: undefined, - animation: undefined, + visible: true, + container: undefined, + fitIntoVisibleArea: fitIntoVisibleArea, + physics: physics, + drawBackground: drawBackground, + draw: draw, + timeMachines: [], + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize, finalize: finalize } - thisObject.eventHandler = newEventHandler() + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false - let splashScreen - let lastContainerMouseOver return thisObject -/* - The canvas object represents a layer on top of the browser canvas object. - - 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 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. - - Canvas - | - | - ---> topSpace - | - | - ---> chartSpace - | - | - ---> flaotingSpace - | - | - ---> panelsSpace - | - | - ---> bottomSpace - | - | - ---> strategySpace -*/ - function finalize () { try { if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - thisObject.chartSpace.finalize() - thisObject.floatingSpace.finalize() - - browserCanvas.removeEventListener('mousedown', onMouseDown, false) - browserCanvas.removeEventListener('mouseup', onMouseUp, false) - browserCanvas.removeEventListener('mousemove', onMouseMove, false) - browserCanvas.removeEventListener('click', onMouseClick, false) - - /* Mouse wheel events. */ - - if (browserCanvas.removeEventListener) { - // IE9, Chrome, Safari, Opera - browserCanvas.removeEventListener('mousewheel', onMouseWheel, false) - // Firefox - browserCanvas.removeEventListener('DOMMouseScroll', onMouseWheel, false) + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.finalize() } - // IE 6/7/8 - else browserCanvas.detachEvent('onmousewheel', onMouseWheel) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } } } - async function initialize (callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + function initialize (callBackFunction) { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - initializeBrowserCanvas() + let initializedCounter = 0 + let toInitialize = 1 - addCanvasEvents() + /* We create the first of many possible time machines that could live at the Chart Space. */ - /* Instantiate all the children spaces of Canvas object */ + let timeMachine = newTimeMachine() - thisObject.topSpace = newTopSpace() - await thisObject.topSpace.initialize() + /* We make the time machine a little bit smaller than the current space. */ - thisObject.strategySpace = newStrategySpace() - await thisObject.strategySpace.initialize() + timeMachine.container.frame.position.x = thisObject.container.frame.width / 2 - timeMachine.container.frame.width / 2 + timeMachine.container.frame.position.y = thisObject.container.frame.height / 2 - timeMachine.container.frame.height / 2 - thisObject.bottomSpace = newBottomSpace() - thisObject.bottomSpace.initialize() + timeMachine.initialize(onTimeMachineInitialized) - thisObject.panelsSpace = newPanelsSpace() - thisObject.panelsSpace.initialize() + function onTimeMachineInitialized (err) { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Entering function.') } - thisObject.floatingSpace = newFloatingSpace() - thisObject.floatingSpace.initialize() + initializedCounter++ - thisObject.chartSpace = newChartSpace() - thisObject.chartSpace.initialize(onCharSpaceInitialized) + if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Initialization of a Time Machine failed.') } - function onCharSpaceInitialized (err) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCharSpaceInitialized -> Entering function.') } - - viewPort.raiseEvents() // These events will impacts on objects just initialized. - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + callBackFunction(err) + return } - /* Splash Screen */ + thisObject.timeMachines.push(timeMachine) - splashScreen = newSplashScreen() - splashScreen.initialize() - - let animation = newAnimation() - animation.initialize(onAnimationInitialized) - - function onAnimationInitialized (err) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> Entering function.') } - - thisObject.animation = animation - - /* Here we add all the functions that will be called during the animation cycle. */ - - animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) - animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) - animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) - animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) - animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) - animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) - animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) - animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) - animation.start(onStart) - - function onFunctionAdded (err) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onFunctionAdded -> Entering function.') } - - if (err.result === GLOBAL.DEFAULT_FAIL_RESPONSE.result) { - animation.stop() - - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> Animation Stopped since a vital funtion could not be added.') } - - /* Display some Error Page here. */ - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } - } - - function onStart (err) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Entering function.') } - - switch (err.result) { - case GLOBAL.DEFAULT_OK_RESPONSE.result: { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received OK Response.') } - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) - return - } - - case GLOBAL.DEFAULT_FAIL_RESPONSE.result: { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received FAIL Response.') } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - return - } - - default: { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received Unexpected Response.') } - callBackFunction(err) - return - } - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + if (initializedCounter === toInitialize) { + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } - function initializeBrowserCanvas () { - try { - if (INFO_LOG === true) { logger.write('[INFO] initializeBrowserCanvas -> Entering function.') } + function getContainer (point, purpose) { + if (thisObject.visible !== true) { return } - browserCanvasContext = browserCanvas.getContext('2d') - // browserCanvasContext.font = 'italic small-caps bold 12px Saira' - browserCanvasContext.font = 'Saira' + let container - viewPort.initialize() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err.stack) } - } - } - - function addCanvasEvents () { - try { - if (INFO_LOG === true) { logger.write('[INFO] addCanvasEvents -> Entering function.') } - - /* Mouse down and up events to control the drag of the canvas. */ - - browserCanvas.addEventListener('mousedown', onMouseDown, false) - browserCanvas.addEventListener('mouseup', onMouseUp, false) - browserCanvas.addEventListener('mousemove', onMouseMove, false) - browserCanvas.addEventListener('click', onMouseClick, false) - - /* Mouse wheel events. */ - - if (browserCanvas.addEventListener) { - // IE9, Chrome, Safari, Opera - browserCanvas.addEventListener('mousewheel', onMouseWheel, false) - // Firefox - browserCanvas.addEventListener('DOMMouseScroll', onMouseWheel, false) - } - // IE 6/7/8 - else browserCanvas.attachEvent('onmousewheel', onMouseWheel) - - // Disables the context menu when you right mouse click the canvas. - browserCanvas.oncontextmenu = function (e) { - e.preventDefault() - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addCanvasEvents -> err = ' + err.stack) } - } - } - - function onMouseDown (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseDown -> Entering function.') } - - /* - - There are four types of elements that can be dragged. - - 1. Panels. - 2. Floating Elements (Currently only FloatingObjects). - 3. Charts. - 4. The Viewport. - - We eveluate each space in order to see if they are holding the element being dragged, and we fallout at the Viewport. - - */ - - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - dragVector.downX = point.x - dragVector.downY = point.y - - 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 - } - - 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) - - if (container !== undefined && container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - return - } - - /* We check if the mouse is over an element of the Bottom Space / */ - - container = thisObject.bottomSpace.getContainer(point) - - if (container !== undefined && container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - return - } - - /* We check if the mouse is over a panel/ */ - - container = thisObject.panelsSpace.getContainer(point) - - if (container !== undefined && container.isDraggeable === true && event.button === 2) { - containerBeingDragged = container - containerDragStarted = true - return - } - - if (container !== undefined && container.isClickeable === true) { - /* We dont want to mess up with the click */ - return - } - - /* we check if it is over any of the existing containers at the Chart Space. */ - - container = thisObject.chartSpace.getContainer(point) + /* Now we see which is the inner most container that has it */ + for (let i = 0; i < thisObject.timeMachines.length; i++) { + container = thisObject.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { - if (container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - return - } else { - viewPortBeingDragged = true - return + if (container.isForThisPurpose(purpose)) { + return container } } + } - container = thisObject.floatingSpace.getContainer(point) - - if (container !== undefined && container.isDraggeable === true) { - containerBeingDragged = container - containerDragStarted = true - floatingObjectDragStarted = true - return - } - - if (container !== undefined && container.isClickeable === true) { - /* We dont want to mess up with the click */ - return - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) } + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined } } - function onMouseClick (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseClick -> Entering function.') } + function fitIntoVisibleArea (point) { + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ - if (ignoreNextClick === true) { - ignoreNextClick = false - return + let returnPoint = { + x: point.x, + y: point.y + } + + if (point.x > browserCanvas.width) { + returnPoint.x = browserCanvas.width + } + + if (point.x < 0) { + returnPoint.x = 0 + } + + if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + } + + if (point.y < 0) { + returnPoint.y = 0 + } + + return returnPoint + } + + function physics () { + thisObject.container.frame.height = BOTTOM_SPACE_POSITION + + if (thisObject.container.frame.height <= 0 / 100) { + thisObject.visible = false + } else { + thisObject.visible = true + } + + viewPort.resize() + } + + function drawBackground () { + if (thisObject.visible !== true) { return } + + drawSpaceBackground() + + if (thisObject.container.frame.height > browserCanvas.height * 15 / 100) { + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.drawBackground() } - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - 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) - - if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', point) - return - } - - /* We check if the mouse is over an element of the Bottom Space / */ - - container = thisObject.bottomSpace.getContainer(point) - - if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', point) - return - } - - /* We check if the mouse is over a panel/ */ - - container = thisObject.panelsSpace.getContainer(point) - - if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', point) - return - } - - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - - container = thisObject.chartSpace.getContainer(point) - - if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', point) - return - } - - /* We check if the mouse is over a floatingObject/ */ - container = thisObject.floatingSpace.getContainer(point) - - if (container !== undefined && container.isClickeable === true) { - container.eventHandler.raiseEvent('onMouseClick', point) - return - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err.stack) } } } - function onMouseUp (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseUp -> Entering function.') } - - if (containerDragStarted || viewPortBeingDragged || floatingObjectDragStarted) { - thisObject.eventHandler.raiseEvent('Drag Finished', undefined) - } - - if ( - containerDragStarted || - floatingObjectDragStarted || - viewPortBeingDragged - ) { - ignoreNextClick = true - } - /* Turn off all the possible things that can be dragged. */ - - containerDragStarted = false - floatingObjectDragStarted = false - viewPortBeingDragged = false - - containerBeingDragged = undefined - - browserCanvas.style.cursor = 'auto' - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseUp -> err = ' + err.stack) } + function drawSpaceBackground () { + let opacity = '1' + let fromPoint = { + x: 0, + y: 0 } + + let toPoint = { + x: browserCanvas.width, + y: BOTTOM_SPACE_POSITION + } + + browserCanvasContext.beginPath() + browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() } - function onMouseMove (event) { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] onMouseMove -> Entering function.') } + function draw () { + if (thisObject.visible !== true) { return } - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - viewPort.mousePosition.x = point.x - viewPort.mousePosition.y = point.y - - if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { - if (floatingObjectDragStarted === true) { - let targetContainer = thisObject.floatingSpace.getContainer(point) - if (targetContainer !== undefined) { - if (targetContainer.id !== containerBeingDragged.id) { - containerBeingDragged = undefined - containerDragStarted = false - floatingObjectDragStarted = false - browserCanvas.style.cursor = 'auto' - ignoreNextClick = true - return - } - } else { - containerDragStarted = false - containerBeingDragged = undefined - floatingObjectDragStarted = false - browserCanvas.style.cursor = 'auto' - ignoreNextClick = true - return - } - } - - dragVector.upX = point.x - dragVector.upY = point.y - - checkDrag(event) - } else { - onMouseOver(event) - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseMove -> err = ' + err.stack) } - } - } - - function onMouseOver (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') } - - /* Then we check who is the current object underneeth the mounse. */ - - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - let container - - /* We check if the mouse is over an element of the Strategy Space / */ - - if (thisObject.strategySpace !== undefined) { - container = thisObject.strategySpace.getContainer(point) - - if (container !== undefined && container.detectMouseOver === true) { - containerFound() - return - } - } - - /* We check if the mouse is over an element of the Top Space / */ - - if (thisObject.topSpace !== undefined) { - container = thisObject.topSpace.getContainer(point) - - if (container !== undefined && container.detectMouseOver === true) { - containerFound() - return - } - } - - /* We check if the mouse is over an element of the Bottom Space / */ - - if (thisObject.bottomSpace !== undefined) { - container = thisObject.bottomSpace.getContainer(point) - - if (container !== undefined && container.detectMouseOver === true) { - containerFound() - return - } - } - - /* We check if the mouse is over a panel/ */ - - if (thisObject.panelsSpace !== undefined) { - container = thisObject.panelsSpace.getContainer(point) - - if (container !== undefined && container.detectMouseOver === true) { - containerFound() - return - } - } - - /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */ - - if (thisObject.chartSpace !== undefined) { - container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER) - - if (container !== undefined && container.detectMouseOver === true) { - containerFound() - return - } - } - - /* We check if the mouse is over a floatingObject/ */ - if (thisObject.floatingSpace !== undefined) { - container = thisObject.floatingSpace.getContainer(point) - - if (container !== undefined && container.detectMouseOver === true) { - 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) } - } - } - - function onMouseWheel (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseWheel -> Entering function.') } - - // cross-browser wheel delta - var event = window.event || event // old IE support - let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail)) - - /* We try first with panels. */ - - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - event.mousePosition = point - let container - container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y }) - - if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('onMouseWheel', event) - return false // This instructs the browser not to take the event and scroll the page. - } - - /* We try the Bottom Space. */ - - container = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) - - if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('onMouseWheel', event) - return false // This instructs the browser not to take the event and scroll the page. - } - - /* Chart Space. */ - - container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL) - if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('onMouseWheel', event) - return false // This instructs the browser not to take the event and scroll the page. - } - - if (container !== undefined) { - viewPort.applyZoom(delta) - return false - } - - /* We try second with floating objects. */ - - container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y }) - - if (container !== undefined && container.isWheelable === true) { - container.eventHandler.raiseEvent('onMouseWheel', event) - return false // This instructs the browser not to take the event and scroll the page. - } - - return false - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err.stack) } - } - } - - function checkDrag (event) { - try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] checkDrag -> Entering function.') } - - if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { - let point = { - x: event.pageX, - y: event.pageY - window.canvasApp.topMargin - } - - browserCanvas.style.cursor = 'grabbing' - thisObject.eventHandler.raiseEvent('Dragging', undefined) - - if (containerDragStarted || viewPortBeingDragged) { - /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */ - - let downCopy = { - x: dragVector.downX, - y: dragVector.downY - } - - let downCopyNoTransf - downCopyNoTransf = viewPort.unzoomThisPoint(downCopy) - // downCopyNoTransf = containerBeingDragged.zoom.unzoomThisPoint(downCopyNoTransf); - - let upCopy = { - x: dragVector.upX, - y: dragVector.upY - } - - let upCopyNoTranf - upCopyNoTranf = viewPort.unzoomThisPoint(upCopy) - - let displaceVector = { - x: dragVector.upX - dragVector.downX, - y: dragVector.upY - dragVector.downY - } - - if (viewPortBeingDragged) { - viewPort.displace(displaceVector) - } - - if (containerBeingDragged !== undefined) { - if (containerBeingDragged.notDraggingOnX === false) { - containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x - } - if (containerBeingDragged.notDraggingOnY === false) { - containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y - } - } - } - - /* Finally we set the starting point of the new dragVector at this current point. */ - - dragVector.downX = dragVector.upX - dragVector.downY = dragVector.upY - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] checkDrag -> err = ' + err.stack) } + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.draw() } } } From 329556322bd74cff72c2b673b885d4d53ac64b09 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 19:12:05 +0200 Subject: [PATCH 148/221] Restoring a function that was deleted by mistake --- Frame.js | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/Frame.js b/Frame.js index 9f169ccd3..567f77c2b 100644 --- a/Frame.js +++ b/Frame.js @@ -7,13 +7,14 @@ function newFrame () { type: 'Rectangle', containerName: '', // This is for debugging purposes only. parentFrame: undefined, // Here we store the parent cointainer zoom object. - width: browserCanvas.width, - height: browserCanvas.height, radius: 0, position: undefined, + container: undefined, + width: browserCanvas.width, + height: browserCanvas.height, getBodyHeight: getBodyHeight, draw: draw, - container: undefined, + fitIntoFrame: fitIntoFrame, frameThisPoint: frameThisPoint, // This function changes the actual frame coordinate system to the screen coordinate system. unframeThisPoint: unframeThisPoint, isThisPointHere: isThisPointHere, // This function return true is the point received as parameter lives within this frame. @@ -127,6 +128,28 @@ function newFrame () { return returnPoint } + function fitIntoFrame (point) { + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + + if (point.x > thisObject.width) { + point.x = thisObject.width + } + + if (point.x < 0) { + point.x = 0 + } + + if (point.y > thisObject.height) { + point.y = thisObject.height + } + + if (point.y < 0) { + point.y = 0 + } + + return point + } + function canYouMoveHere (tempDisplacement) { /* @@ -543,4 +566,3 @@ function newFrame () { browserCanvasContext.stroke() } } - From 189a5babe981d1c174249903ac05e4a922300f04 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 19:38:18 +0200 Subject: [PATCH 149/221] Fix to Mouse Over --- ChartsSpace/TimeMachine.js | 4 +++- Spaces/ChartSpace.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index ab58e874f..435636caa 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -211,7 +211,9 @@ function newTimeMachine () { container = this.charts[i].getContainer(point) if (container !== undefined) { if (container.isForThisPurpose(purpose)) { - return container + if (thisObject.container.frame.isThisPointHere(point) === true) { + return container + } } } } diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 5d2a5db81..3533d5dd8 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -95,7 +95,9 @@ function newChartSpace () { container = thisObject.timeMachines[i].getContainer(point, purpose) if (container !== undefined) { if (container.isForThisPurpose(purpose)) { - return container + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return container + } } } } From 2f4404b513bad57fe55f8df9b6d233fb3fa1740c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 20:59:33 +0200 Subject: [PATCH 150/221] fitFunction applied to Products Panel --- Panels/ProductsPanel.js | 363 +++++++++++++++++++++------------------- Spaces/PanelsSpace.js | 1 + 2 files changed, 190 insertions(+), 174 deletions(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index eed9b2abe..222ae19e1 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -1,246 +1,261 @@ - function newProductsPanel () { - let thisObject = { - container: undefined, - getLoadingProductCards: getLoadingProductCards, - draw: draw, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - initialize: initialize - } +function newProductsPanel () { + let thisObject = { + container: undefined, + getLoadingProductCards: getLoadingProductCards, + draw: draw, + getContainer: getContainer, // returns the inner most container that holds the point received by parameter. + initialize: initialize + } - /* Cointainer stuff */ + /* Cointainer stuff */ - var container = newContainer() + var container = newContainer() - container.initialize() + container.initialize() - container.isDraggeable = true - container.isWheelable = true + container.isDraggeable = true + container.isWheelable = true - thisObject.container = container + thisObject.container = container - let isInitialized = false - let productCards = [] + let isInitialized = false + let productCards = [] - let visibleProductCards = [] - let firstVisibleCard = 1 + let visibleProductCards = [] + let firstVisibleCard = 1 - /* Needed Variables */ + /* Needed Variables */ - let lastY = 5 - let panelTabButton + let lastY = 5 + let panelTabButton - let exchange - let market + let exchange + let market - return thisObject + return thisObject - function initialize (pExchange, pMarket) { - exchange = pExchange - market = pMarket + function initialize (pExchange, pMarket) { + exchange = pExchange + market = pMarket - 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 = UI_PANEL.HEIGHT.LARGE // viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE; + 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 = UI_PANEL.HEIGHT.LARGE // viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE; - var position = { - x: viewPort.visibleArea.topLeft.x, - y: viewPort.visibleArea.topLeft.y// viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height - } + thisObject.fitFunction = canvas.chartSpace.fitIntoVisibleArea - thisObject.container.frame.position = position + var position = { + x: viewPort.visibleArea.topLeft.x, + y: viewPort.visibleArea.topLeft.y// viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height + } - panelTabButton = newPanelTabButton() - panelTabButton.parentContainer = thisObject.container - panelTabButton.container.frame.parentFrame = thisObject.container.frame - panelTabButton.fitFunction = canvas.chartSpace.fitIntoVisibleArea - panelTabButton.initialize() + thisObject.container.frame.position = position - /* Get the current teams of the logged in user. */ + panelTabButton = newPanelTabButton() + panelTabButton.parentContainer = thisObject.container + panelTabButton.container.frame.parentFrame = thisObject.container.frame + panelTabButton.fitFunction = thisObject.fitFunction + panelTabButton.initialize() - let storedTeams = window.localStorage.getItem('userTeams') - let userTeams - let userTeam = {slug: ''} - if (storedTeams !== null && storedTeams !== undefined && storedTeams !== '') { - userTeams = JSON.parse(storedTeams) - userTeam = userTeams[0] // Currently we assume a user can be at only one team. - } - if (userTeam === undefined) { userTeam = {slug: ''} } + /* Get the current teams of the logged in user. */ - /* First thing is to build the productCards array */ + let storedTeams = window.localStorage.getItem('userTeams') + let userTeams + let userTeam = {slug: ''} + if (storedTeams !== null && storedTeams !== undefined && storedTeams !== '') { + userTeams = JSON.parse(storedTeams) + userTeam = userTeams[0] // Currently we assume a user can be at only one team. + } + if (userTeam === undefined) { userTeam = {slug: ''} } - let devTeams = ecosystem.getTeams() + /* First thing is to build the productCards array */ - for (let i = 0; i < devTeams.length; i++) { - let devTeam = devTeams[i] + let devTeams = ecosystem.getTeams() - for (let j = 0; j < devTeam.bots.length; j++) { - let bot = devTeam.bots[j] + for (let i = 0; i < devTeams.length; i++) { + let devTeam = devTeams[i] - if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue } - if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== userTeam.slug)) { continue } + for (let j = 0; j < devTeam.bots.length; j++) { + let bot = devTeam.bots[j] - if (bot.products !== undefined) { - for (let k = 0; k < bot.products.length; k++) { - let product = bot.products[k] + if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue } + if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && 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 */ + if (bot.products !== undefined) { + for (let k = 0; k < bot.products.length; k++) { + let product = bot.products[k] - let productCard = newProductCard() + if (window.localStorage.getItem('Show AAMaster Layers') === null) { + if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue } + } + /* Now we create Product objects */ - productCard.devTeam = devTeam - productCard.bot = bot - productCard.product = product - productCard.fitFunction = canvas.chartSpace.fitIntoVisibleArea - productCard.code = exchange + '-' + market.assetB + '/' + market.assetA + '-' + devTeam.codeName + '-' + bot.codeName + '-' + product.codeName + let productCard = newProductCard() - /* Initialize it */ + productCard.devTeam = devTeam + productCard.bot = bot + productCard.product = product + productCard.fitFunction = thisObject.fitFunction + productCard.code = exchange + '-' + market.assetB + '/' + market.assetA + '-' + devTeam.codeName + '-' + bot.codeName + '-' + product.codeName - productCard.initialize() + /* Initialize it */ - /* Container Stuff */ + productCard.initialize() - productCard.container.displacement.parentDisplacement = thisObject.container.displacement - productCard.container.frame.parentFrame = thisObject.container.frame - productCard.container.parentContainer = thisObject.container - productCard.container.isWheelable = true + /* Container Stuff */ - /* Positioning within thisObject Panel */ + productCard.container.displacement.parentDisplacement = thisObject.container.displacement + productCard.container.frame.parentFrame = thisObject.container.frame + productCard.container.parentContainer = thisObject.container + productCard.container.isWheelable = true - let position = { - x: 10, - y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight() - } + /* Positioning within thisObject Panel */ - productCard.container.frame.position.x = position.x - productCard.container.frame.position.y = position.y + lastY + let position = { + x: 10, + y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight() + } - lastY = lastY + productCard.container.frame.height + productCard.container.frame.position.x = position.x + productCard.container.frame.position.y = position.y + lastY - /* Add to the Product Array */ + lastY = lastY + productCard.container.frame.height - productCards.push(productCard) + /* Add to the Product Array */ - /* Add to Visible Product Array */ + productCards.push(productCard) - if (productCard.container.frame.position.y + productCard.container.frame.height < thisObject.container.frame.height) { - visibleProductCards.push(productCard) - } + /* Add to Visible Product Array */ - /* Listen to Status Changes Events */ + if (productCard.container.frame.position.y + productCard.container.frame.height < thisObject.container.frame.height) { + visibleProductCards.push(productCard) + } - productCard.container.eventHandler.listenToEvent('Status Changed', onProductCardStatusChanged) - productCard.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) - } - } - } - } + /* Listen to Status Changes Events */ - thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) - isInitialized = true - } + productCard.container.eventHandler.listenToEvent('Status Changed', onProductCardStatusChanged) + productCard.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) + } + } + } + } - function onMouseWheel (event) { - delta = event.wheelDelta - if (delta > 0) { - delta = -1 - } else { - delta = 1 - } + thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) + isInitialized = true + } - firstVisibleCard = firstVisibleCard + delta + function onMouseWheel (event) { + delta = event.wheelDelta + if (delta > 0) { + delta = -1 + } else { + delta = 1 + } - let availableSlots = visibleProductCards.length + firstVisibleCard = firstVisibleCard + delta - if (firstVisibleCard < 1) { firstVisibleCard = 1 } - if (firstVisibleCard > (productCards.length - availableSlots + 1)) { firstVisibleCard = productCards.length - availableSlots + 1 } + let availableSlots = visibleProductCards.length - visibleProductCards = [] - var lastY = 5 + if (firstVisibleCard < 1) { firstVisibleCard = 1 } + if (firstVisibleCard > (productCards.length - availableSlots + 1)) { firstVisibleCard = productCards.length - availableSlots + 1 } - for (let i = 0; i < productCards.length; i++) { - if (i + 1 >= firstVisibleCard && i + 1 < firstVisibleCard + availableSlots) { - let productCard = productCards[i] + visibleProductCards = [] + var lastY = 5 - /* Positioning within thisObject Panel */ + for (let i = 0; i < productCards.length; i++) { + if (i + 1 >= firstVisibleCard && i + 1 < firstVisibleCard + availableSlots) { + let productCard = productCards[i] - let position = { - x: 10, - y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight() - } - productCard.container.frame.position.x = position.x - productCard.container.frame.position.y = position.y + lastY + /* Positioning within thisObject Panel */ - lastY = lastY + productCard.container.frame.height + let position = { + x: 10, + y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight() + } + productCard.container.frame.position.x = position.x + productCard.container.frame.position.y = position.y + lastY - /* Add to Visible Product Array */ + lastY = lastY + productCard.container.frame.height - visibleProductCards.push(productCard) - } - } - } + /* Add to Visible Product Array */ - function onProductCardStatusChanged (pProductCard) { - thisObject.container.eventHandler.raiseEvent('Product Card Status Changed', pProductCard) - } + visibleProductCards.push(productCard) + } + } + } - function getLoadingProductCards () { - /* Returns all productCards which status is LOADING */ + function onProductCardStatusChanged (pProductCard) { + thisObject.container.eventHandler.raiseEvent('Product Card Status Changed', pProductCard) + } - let onProducts = [] + function getLoadingProductCards () { + /* Returns all productCards which status is LOADING */ - for (let i = 0; i < productCards.length; i++) { - if (productCards[i].status === PRODUCT_CARD_STATUS.LOADING) { - onProducts.push(productCards[i]) - } - } + let onProducts = [] - return onProducts - } + for (let i = 0; i < productCards.length; i++) { + if (productCards[i].status === PRODUCT_CARD_STATUS.LOADING) { + onProducts.push(productCards[i]) + } + } - function getContainer (point) { - var container + return onProducts + } - container = panelTabButton.getContainer(point) - if (container !== undefined) { return container } + function getContainer (point) { + var container - /* First we check if thisObject point is inside thisObject space. */ + container = panelTabButton.getContainer(point) + if (container !== undefined) { return container } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - /* Now we see which is the inner most container that has it */ + /* First we check if thisObject point is inside thisObject space. */ - for (var i = 0; i < visibleProductCards.length; i++) { - container = visibleProductCards[i].getContainer(point) + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + /* Now we see which is the inner most container that has it */ - if (container !== undefined) { - /* We found an inner container which has the point. We return it. */ + for (var i = 0; i < visibleProductCards.length; i++) { + container = visibleProductCards[i].getContainer(point) - return container - } - } + if (container !== undefined) { + let checkPoint = { + x: point.x, + y: point.y + } - /* The point does not belong to any inner container, so we return the current container. */ + checkPoint = thisObject.fitFunction(checkPoint) - return thisObject.container - } else { - /* This point does not belong to thisObject space. */ + if (point.x === checkPoint.x && point.y === checkPoint.y) { + return container + } + } + } - return undefined - } - } + /* The point does not belong to any inner container, so we return the current container. */ - function draw () { - if (isInitialized === false) { return } + let checkPoint = { + x: point.x, + y: point.y + } - thisObject.container.frame.draw(false, false, true, canvas.chartSpace.fitIntoVisibleArea) + checkPoint = thisObject.fitFunction(checkPoint) - for (let i = 0; i < visibleProductCards.length; i++) { - visibleProductCards[i].draw() - } + if (point.x === checkPoint.x && point.y === checkPoint.y) { + return thisObject.container + } + } + } + + function draw () { + if (isInitialized === false) { return } + + thisObject.container.frame.draw(false, false, true, thisObject.fitFunction) + + for (let i = 0; i < visibleProductCards.length; i++) { + visibleProductCards[i].draw() + } + + panelTabButton.draw() + } +} - panelTabButton.draw() - } - } diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 74b00c25e..6d3265132 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -54,6 +54,7 @@ function newPanelsSpace () { case 'Plotter Panel': { panel = getNewPlotterPanel(pParameters.devTeam, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelCodeName) + panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea panel.initialize() break } From 5075a70c85d77b6aa633c89f15b19e85f90d3279 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 10 May 2019 21:24:58 +0200 Subject: [PATCH 151/221] background images with fit function --- ChartsSpace/TimelineChart.js | 825 ++++++++++++++++++----------------- Spaces/ChartSpace.js | 8 +- 2 files changed, 434 insertions(+), 399 deletions(-) diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js index 7ba204e95..f9d1aad60 100644 --- a/ChartsSpace/TimelineChart.js +++ b/ChartsSpace/TimelineChart.js @@ -1,474 +1,511 @@ - function newTimelineChart () { - const MODULE_NAME = 'Timeline Chart' - const INFO_LOG = false - const INTENSIVE_LOG = false - const ERROR_LOG = true - const logger = newWebDebugLog() - logger.fileName = MODULE_NAME - - let timeLineCoordinateSystem - - let timePeriod = INITIAL_TIME_PERIOD - let datetime = NEW_SESSION_INITIAL_DATE - - let thisObject = { - setDatetime: setDatetime, - container: undefined, - drawBackground: drawBackground, - draw: draw, - getContainer: getContainer, - initialize: initialize, - finalize: finalize - } +function newTimelineChart () { + const MODULE_NAME = 'Timeline Chart' + const INFO_LOG = false + const INTENSIVE_LOG = false + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + let timeLineCoordinateSystem - thisObject.container = newContainer() - thisObject.container.initialize(MODULE_NAME) - thisObject.container.detectMouseOver = true + let timePeriod = INITIAL_TIME_PERIOD + let datetime = NEW_SESSION_INITIAL_DATE + + let thisObject = { + container: undefined, + fitFunction: undefined, + setDatetime: setDatetime, + drawBackground: drawBackground, + draw: draw, + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } - let initializationReady = false + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + thisObject.container.detectMouseOver = true - let productsPanel + thisObject.fitFunction = canvas.chartSpace.fitIntoVisibleArea - /* Background */ - let logoAssetA - let logoAssetB - let logoExchange - let logoAA - let canDrawLogoA = false - let canDrawLogoB = false - let canDrawLogoExchange = false - let canDrawLogoAA = false + let initializationReady = false - let plotterManager - let exchange - let market + let productsPanel - let productsPanelHandle - let timePeriodScale + /* Background */ + let logoAssetA + let logoAssetB + let logoExchange + let logoAA + let canDrawLogoA = false + let canDrawLogoB = false + let canDrawLogoExchange = false + let canDrawLogoAA = false - return thisObject + let plotterManager + let exchange + let market - function finalize () { - try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } + let productsPanelHandle + let timePeriodScale - plotterManager.finalize() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } - } - } + return thisObject - function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - - /* We load the logow we will need for the background. */ - exchange = pExchange - market = pMarket - timeLineCoordinateSystem = pTimeLineCoordinateSystem + function finalize () { + try { + if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { - saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) - }) + plotterManager.finalize() + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } + } + } - let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA - productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner) - let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner) - productsPanel.initialize(exchange, market) + function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) { + try { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - logoA = new Image() - logoB = new Image() - logoExchange = new Image() - logoAA = new Image() + /* We load the logow we will need for the background. */ + exchange = pExchange + market = pMarket + timeLineCoordinateSystem = pTimeLineCoordinateSystem - logoA.onload = onImageALoaded + thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { + saveUserPosition(thisObject.container, timeLineCoordinateSystem, event) + }) - function onImageALoaded () { - canDrawLogoA = true - } + let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA + productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner) + let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner) + productsPanel.initialize(exchange, market) - logoB.onload = onImageBLoaded + logoA = new Image() + logoB = new Image() + logoExchange = new Image() + logoAA = new Image() - function onImageBLoaded () { - canDrawLogoB = true - } + logoA.onload = onImageALoaded - logoExchange.onload = onImageExchangeLoaded - - function onImageExchangeLoaded () { - canDrawLogoExchange = true - } + function onImageALoaded () { + canDrawLogoA = true + } - logoAA.onload = onImageAALoaded + logoB.onload = onImageBLoaded - function onImageAALoaded () { - canDrawLogoAA = true - } + function onImageBLoaded () { + canDrawLogoB = true + } - logoA.src = window.canvasApp.urlPrefix + 'Images/tether-logo-background.png' - logoB.src = window.canvasApp.urlPrefix + 'Images/bitcoin-logo-background.png' - logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png' - logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png' + logoExchange.onload = onImageExchangeLoaded + + function onImageExchangeLoaded () { + canDrawLogoExchange = true + } - // moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true) - timePeriod = INITIAL_TIME_PERIOD - datetime = NEW_SESSION_INITIAL_DATE + logoAA.onload = onImageAALoaded - /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */ + function onImageAALoaded () { + canDrawLogoAA = true + } - viewPort.eventHandler.listenToEvent('Offset Changed', onOffsetChanged) - viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged) + logoA.src = window.canvasApp.urlPrefix + 'Images/tether-logo-background.png' + logoB.src = window.canvasApp.urlPrefix + 'Images/bitcoin-logo-background.png' + logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png' + logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png' - /* Initialize the Plotter Manager */ + // moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true) + timePeriod = INITIAL_TIME_PERIOD + datetime = NEW_SESSION_INITIAL_DATE - plotterManager = newPlottersManager() + /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */ - plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true) + viewPort.eventHandler.listenToEvent('Offset Changed', onOffsetChanged) + viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged) - plotterManager.container.frame.position.x = 0 - plotterManager.container.frame.position.y = 0 + /* Initialize the Plotter Manager */ - plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady) + plotterManager = newPlottersManager() - function onPlotterManagerReady (err) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onPlotterManagerReady -> Entering function.') } + plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true) - if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> Plotter Manager Initialization Failed. ') } - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err= ' + err.stack) } + plotterManager.container.frame.position.x = 0 + plotterManager.container.frame.position.y = 0 - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - return - } + plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady) - timePeriodScale = newTimePeriodScale() - timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) - timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { - let currentTimePeriod = timePeriod - timePeriod = event.timePeriod - if (timePeriod !== currentTimePeriod) { - plotterManager.setTimePeriod(timePeriod) - } - }) + function onPlotterManagerReady (err) { + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onPlotterManagerReady -> Entering function.') } - timePeriodScale.initialize(timeLineCoordinateSystem) + if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> Plotter Manager Initialization Failed. ') } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err= ' + err.stack) } - initializationReady = true - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) - return - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } - } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + return + } - function onZoomChanged (event) { - if (INFO_LOG === true) { logger.write('[INFO] onZoomChanged -> Entering function.') } + timePeriodScale = newTimePeriodScale() + timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) + timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) { + let currentTimePeriod = timePeriod + timePeriod = event.timePeriod + if (timePeriod !== currentTimePeriod) { + plotterManager.setTimePeriod(timePeriod) + } + }) - if (initializationReady === true) { - recalculateCurrentDatetime() + timePeriodScale.initialize(timeLineCoordinateSystem) - // saveUserPosition(thisObject.container, timeLineCoordinateSystem) - } - } + initializationReady = true + callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) + return + } + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } - function setDatetime (pDatetime) { - if (INFO_LOG === true) { logger.write('[INFO] setDatetime -> Entering function.') } + function onZoomChanged (event) { + if (INFO_LOG === true) { logger.write('[INFO] onZoomChanged -> Entering function.') } - /* This function is used when the time is changed through the user interface, but without zooming or panning. */ - /* No matter if the day changed or not, we need to inform all visible Plotters. */ + if (initializationReady === true) { + recalculateCurrentDatetime() - if (thisObject.container.frame.isInViewPort()) { - plotterManager.setDatetime(pDatetime) - plotterManager.positionAtDatetime(pDatetime) - } - } + // saveUserPosition(thisObject.container, timeLineCoordinateSystem) + } + } - function onOffsetChanged () { - if (INFO_LOG === true) { logger.write('[INFO] onOffsetChanged -> Entering function.') } + function setDatetime (pDatetime) { + if (INFO_LOG === true) { logger.write('[INFO] setDatetime -> Entering function.') } - if (initializationReady === true) { - if (thisObject.container.frame.isInViewPort()) { - recalculateCurrentDatetime() - // saveUserPosition(thisObject.container, timeLineCoordinateSystem) - } - } - } + /* This function is used when the time is changed through the user interface, but without zooming or panning. */ + /* No matter if the day changed or not, we need to inform all visible Plotters. */ - function recalculateCurrentDatetime () { - if (INFO_LOG === true) { logger.write('[INFO] recalculateCurrentDatetime -> Entering function.') } + if (thisObject.container.frame.isInViewPort()) { + plotterManager.setDatetime(pDatetime) + plotterManager.positionAtDatetime(pDatetime) + } + } - /* + function onOffsetChanged () { + if (INFO_LOG === true) { logger.write('[INFO] onOffsetChanged -> Entering function.') } - The view port was moved or the view port zoom level was changed and the center of the screen points to a different datetime that we - must calculate. + if (initializationReady === true) { + if (thisObject.container.frame.isInViewPort()) { + recalculateCurrentDatetime() + // saveUserPosition(thisObject.container, timeLineCoordinateSystem) + } + } + } - */ + function recalculateCurrentDatetime () { + if (INFO_LOG === true) { logger.write('[INFO] recalculateCurrentDatetime -> Entering function.') } - let center = { - x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.bottomLeft.x) / 2, - y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2 - } + /* - center = unTransformThisPoint(center, thisObject.container) - center = timeLineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height) + The view port was moved or the view port zoom level was changed and the center of the screen points to a different datetime that we + must calculate. - let newDate = new Date(0) - newDate.setUTCSeconds(center.x / 1000) + */ - datetime = newDate + let center = { + x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.bottomLeft.x) / 2, + y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2 + } - plotterManager.setDatetime(datetime) + center = unTransformThisPoint(center, thisObject.container) + center = timeLineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height) - thisObject.container.eventHandler.raiseEvent('Datetime Changed', datetime) - } + let newDate = new Date(0) + newDate.setUTCSeconds(center.x / 1000) - function getContainer (point) { - if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') } + datetime = newDate - let container + plotterManager.setDatetime(datetime) - container = timePeriodScale.getContainer(point) + thisObject.container.eventHandler.raiseEvent('Datetime Changed', datetime) + } - if (container !== undefined) { return container } + function getContainer (point) { + if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') } - return container - } + let container - function tooTiny () { - if (viewPort.zoomLevel < Math.trunc(-28.25 * 100) / 100) { - return true - } else { - return false - } - } + container = timePeriodScale.getContainer(point) - function tooSmall () { - if (viewPort.zoomLevel < Math.trunc(-27.25 * 100) / 100) { - return true - } else { - return false - } - } + if (container !== undefined) { return container } - function drawBackground () { - if (thisObject.container.frame.isInViewPort()) { - if (window.CHART_ON_FOCUS === '') { - window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA + return container + } - drawChartsBackgroundImages() - } - } - } + function tooTiny () { + if (viewPort.zoomLevel < Math.trunc(-28.25 * 100) / 100) { + return true + } else { + return false + } + } - function draw () { - if (thisObject.container.frame.isInViewPort()) { - drawChartsBackground() - plotterManager.draw() - timePeriodScale.draw() - } - } + function tooSmall () { + if (viewPort.zoomLevel < Math.trunc(-27.25 * 100) / 100) { + return true + } else { + return false + } + } - function drawChartsBackground () { - /* We will paint some transparent background here. */ + function drawBackground () { + if (thisObject.container.frame.isInViewPort()) { + if (window.CHART_ON_FOCUS === '') { + window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA - let opacity = '0.9' + drawChartsBackgroundImages() + } + } + } - let fromPoint = { - x: 0, - y: 0 - } + function draw () { + if (thisObject.container.frame.isInViewPort()) { + drawChartsBackground() + plotterManager.draw() + timePeriodScale.draw() + } + } - let toPoint = { - x: thisObject.container.frame.width, - y: thisObject.container.frame.height - } + function drawChartsBackground () { + /* We will paint some transparent background here. */ - fromPoint = transformThisPoint(fromPoint, thisObject.container) - toPoint = transformThisPoint(toPoint, thisObject.container) + let opacity = '0.9' - fromPoint = canvas.chartSpace.fitIntoVisibleArea(fromPoint) - toPoint = canvas.chartSpace.fitIntoVisibleArea(toPoint) + let fromPoint = { + x: 0, + y: 0 + } - browserCanvasContext.beginPath() + let toPoint = { + x: thisObject.container.frame.width, + y: thisObject.container.frame.height + } - browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' + fromPoint = transformThisPoint(fromPoint, thisObject.container) + toPoint = transformThisPoint(toPoint, thisObject.container) - browserCanvasContext.closePath() + fromPoint = canvas.chartSpace.fitIntoVisibleArea(fromPoint) + toPoint = canvas.chartSpace.fitIntoVisibleArea(toPoint) - browserCanvasContext.fill() - } + browserCanvasContext.beginPath() - function drawChartsBackgroundImages () { - if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return } + browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')' - /* Fist we calculate the corners of the current frame so as not to draw imaages ourside of it */ + browserCanvasContext.closePath() - let fromPoint = { - x: 0, - y: 0 - } + browserCanvasContext.fill() + } - let toPoint = { - x: thisObject.container.frame.width, - y: thisObject.container.frame.height - } + function drawChartsBackgroundImages () { + if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return } - fromPoint = transformThisPoint(fromPoint, thisObject.container) - toPoint = transformThisPoint(toPoint, thisObject.container) + /* Fist we calculate the corners of the current frame so as not to draw imaages ourside of it */ - /* Second we calculate the points for the images themselves */ + let fromPoint = { + x: 0, + y: 0 + } - let backgroundLogoPoint1 - let backgroundLogoPoint2 - - let imageHeight = 42 - let imageWidth = 150 - - let MAX_COLUMNS = 16 - let MAX_ROWS = 5 - let Y_TOP_MARGIN = 30 - - let point1 = { - x: viewPort.visibleArea.topLeft.x, - y: viewPort.visibleArea.topLeft.y - } - - backgroundLogoPoint1 = { - x: getDateFromPoint(point1, thisObject.container, timeLineCoordinateSystem).valueOf(), - y: getRateFromPoint(point1, thisObject.container, timeLineCoordinateSystem) - } - - let point2 = { - x: viewPort.visibleArea.topLeft.x + imageWidth * 8, - y: viewPort.visibleArea.topLeft.y - } - - backgroundLogoPoint2 = { - x: getDateFromPoint(point2, thisObject.container, timeLineCoordinateSystem).valueOf(), - y: getRateFromPoint(point2, thisObject.container, timeLineCoordinateSystem) - } - - let currentCorner = { - x: getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem).valueOf(), - y: getRateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem) - } - - currentCorner.x = Math.trunc(currentCorner.x / (backgroundLogoPoint2.x - backgroundLogoPoint1.x)) * (backgroundLogoPoint2.x - backgroundLogoPoint1.x) - - let rowHight = (viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y) / 4.5 - - imagePoint = timeLineCoordinateSystem.transformThisPoint(currentCorner) - imagePoint = transformThisPoint(imagePoint, thisObject.container) - - let offSet = 0 - let imagePosition = { - x: 0, - y: 0 - } - - for (let j = 0; j < MAX_ROWS; j++) { - if (offSet === -imageWidth * 8) { - offSet = -imageWidth * 4 - imageWidth - } else { - offSet = -imageWidth * 8 - } - - for (let i = 0; i < MAX_COLUMNS; i = i + 4) { - let logo = logoA - - imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet - imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN - - if ( - imagePosition.x > fromPoint.x && - imagePosition.x + imageWidth < toPoint.x && - imagePosition.y > fromPoint.y && - imagePosition.y + imageHeight < toPoint.y - ) { - browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) - } - } - } - - offSet = 0 - - for (let j = 0; j < MAX_ROWS; j++) { - if (offSet === -imageWidth * 8) { - offSet = -imageWidth * 4 - imageWidth - } else { - offSet = -imageWidth * 8 - } - - for (let i = 1; i < MAX_COLUMNS; i = i + 4) { - let logo = logoB - - imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet - imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN - - if ( - imagePosition.x > fromPoint.x && - imagePosition.x + imageWidth < toPoint.x && - imagePosition.y > fromPoint.y && - imagePosition.y + imageHeight < toPoint.y - ) { - browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) - } - } - } - - offSet = 0 - - for (let j = 0; j < MAX_ROWS; j++) { - if (offSet === -imageWidth * 8) { - offSet = -imageWidth * 4 - imageWidth - } else { - offSet = -imageWidth * 8 - } - - for (let i = 2; i < MAX_COLUMNS; i = i + 4) { - let logo = logoExchange - - imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet - imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN - - if ( - imagePosition.x > fromPoint.x && - imagePosition.x + imageWidth < toPoint.x && - imagePosition.y > fromPoint.y && - imagePosition.y + imageHeight < toPoint.y - ) { - browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) - } - } - } - - offSet = 0 - - for (let j = 0; j < MAX_ROWS; j++) { - if (offSet === -imageWidth * 8) { - offSet = -imageWidth * 4 - imageWidth - } else { - offSet = -imageWidth * 8 - } - - for (let i = 3; i < MAX_COLUMNS; i = i + 4) { - let logo = logoAA - - imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet - imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN - - if ( - imagePosition.x > fromPoint.x && - imagePosition.x + imageWidth < toPoint.x && - imagePosition.y > fromPoint.y && - imagePosition.y + imageHeight < toPoint.y - ) { - browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) - } - } - } - } - } + let toPoint = { + x: thisObject.container.frame.width, + y: thisObject.container.frame.height + } + + fromPoint = transformThisPoint(fromPoint, thisObject.container) + toPoint = transformThisPoint(toPoint, thisObject.container) + + /* Second we calculate the points for the images themselves */ + + let backgroundLogoPoint1 + let backgroundLogoPoint2 + + let imageHeight = 42 + let imageWidth = 150 + + const MAX_COLUMNS = 16 + const MAX_ROWS = 5 + const Y_TOP_MARGIN = 30 + const MIN_ROW_HIGHT = 100 + + let point1 = { + x: viewPort.visibleArea.topLeft.x, + y: viewPort.visibleArea.topLeft.y + } + + backgroundLogoPoint1 = { + x: getDateFromPoint(point1, thisObject.container, timeLineCoordinateSystem).valueOf(), + y: getRateFromPoint(point1, thisObject.container, timeLineCoordinateSystem) + } + + let point2 = { + x: viewPort.visibleArea.topLeft.x + imageWidth * 8, + y: viewPort.visibleArea.topLeft.y + } + + backgroundLogoPoint2 = { + x: getDateFromPoint(point2, thisObject.container, timeLineCoordinateSystem).valueOf(), + y: getRateFromPoint(point2, thisObject.container, timeLineCoordinateSystem) + } + + let currentCorner = { + x: getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem).valueOf(), + y: getRateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem) + } + + currentCorner.x = Math.trunc(currentCorner.x / (backgroundLogoPoint2.x - backgroundLogoPoint1.x)) * (backgroundLogoPoint2.x - backgroundLogoPoint1.x) + + let rowHight = (viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y) / 4.5 + if (rowHight < MIN_ROW_HIGHT) { rowHight = MIN_ROW_HIGHT } + + imagePoint = timeLineCoordinateSystem.transformThisPoint(currentCorner) + imagePoint = transformThisPoint(imagePoint, thisObject.container) + + let offSet = 0 + let imagePosition = { + x: 0, + y: 0 + } + + for (let j = 0; j < MAX_ROWS; j++) { + if (offSet === -imageWidth * 8) { + offSet = -imageWidth * 4 - imageWidth + } else { + offSet = -imageWidth * 8 + } + + for (let i = 0; i < MAX_COLUMNS; i = i + 4) { + let logo = logoA + + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + let checkPoint = { + x: imagePosition.x, + y: imagePosition.y + imageHeight + } + + checkPoint = thisObject.fitFunction(checkPoint) + if (checkPoint.y === imagePosition.y + imageHeight) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } + } + } + } + + offSet = 0 + + for (let j = 0; j < MAX_ROWS; j++) { + if (offSet === -imageWidth * 8) { + offSet = -imageWidth * 4 - imageWidth + } else { + offSet = -imageWidth * 8 + } + + for (let i = 1; i < MAX_COLUMNS; i = i + 4) { + let logo = logoB + + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + let checkPoint = { + x: imagePosition.x, + y: imagePosition.y + imageHeight + } + + checkPoint = thisObject.fitFunction(checkPoint) + if (checkPoint.y === imagePosition.y + imageHeight) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } + } + } + } + + offSet = 0 + + for (let j = 0; j < MAX_ROWS; j++) { + if (offSet === -imageWidth * 8) { + offSet = -imageWidth * 4 - imageWidth + } else { + offSet = -imageWidth * 8 + } + + for (let i = 2; i < MAX_COLUMNS; i = i + 4) { + let logo = logoExchange + + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + let checkPoint = { + x: imagePosition.x, + y: imagePosition.y + imageHeight + } + + checkPoint = thisObject.fitFunction(checkPoint) + if (checkPoint.y === imagePosition.y + imageHeight) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } + } + } + } + + offSet = 0 + + for (let j = 0; j < MAX_ROWS; j++) { + if (offSet === -imageWidth * 8) { + offSet = -imageWidth * 4 - imageWidth + } else { + offSet = -imageWidth * 8 + } + + for (let i = 3; i < MAX_COLUMNS; i = i + 4) { + let logo = logoAA + + imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet + imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN + + if ( + imagePosition.x > fromPoint.x && + imagePosition.x + imageWidth < toPoint.x && + imagePosition.y > fromPoint.y && + imagePosition.y + imageHeight < toPoint.y + ) { + let checkPoint = { + x: imagePosition.x, + y: imagePosition.y + imageHeight + } + + checkPoint = thisObject.fitFunction(checkPoint) + if (checkPoint.y === imagePosition.y + imageHeight) { + browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight) + } + } + } + } + } +} diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 3533d5dd8..380246842 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -153,11 +153,9 @@ function newChartSpace () { drawSpaceBackground() - if (thisObject.container.frame.height > browserCanvas.height * 15 / 100) { - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.drawBackground() - } + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.drawBackground() } } From c01bcefc4637ded23dccd4bb5c8f28f4ff2e7285 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 08:21:21 +0200 Subject: [PATCH 152/221] Mouse moving out of the canvas: fixed --- Canvas.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/Canvas.js b/Canvas.js index d69ea61a4..0362fae51 100644 --- a/Canvas.js +++ b/Canvas.js @@ -9,7 +9,6 @@ function newCanvas () { const MODULE_NAME = 'Canvas' const INFO_LOG = false const ERROR_LOG = true - const INTENSIVE_LOG = false const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -96,6 +95,7 @@ function newCanvas () { browserCanvas.removeEventListener('mouseup', onMouseUp, false) browserCanvas.removeEventListener('mousemove', onMouseMove, false) browserCanvas.removeEventListener('click', onMouseClick, false) + browserCanvas.removeEventListener('mouseout', onMouseOut, false) /* Mouse wheel events. */ @@ -262,6 +262,7 @@ function newCanvas () { browserCanvas.addEventListener('mouseup', onMouseUp, false) browserCanvas.addEventListener('mousemove', onMouseMove, false) browserCanvas.addEventListener('click', onMouseClick, false) + browserCanvas.addEventListener('mouseout', onMouseOut, false) /* Mouse wheel events. */ @@ -464,10 +465,23 @@ function newCanvas () { } } - function onMouseUp (event) { - try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseUp -> Entering function.') } + function onMouseOut (event) { + deactivateDragging(event) + /* When the mouse leaves the canvas, our elements needs to react to the fact that the mouse is over a far away place */ + let thisEvent = { + pageX: 100000000000, + pageY: 100000000000 + } + onMouseOver(thisEvent) + } + + function onMouseUp (event) { + deactivateDragging(event) + } + + function deactivateDragging (event) { + try { if (containerDragStarted || viewPortBeingDragged || floatingObjectDragStarted) { thisObject.eventHandler.raiseEvent('Drag Finished', undefined) } @@ -495,8 +509,6 @@ function newCanvas () { function onMouseMove (event) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] onMouseMove -> Entering function.') } - let point = { x: event.pageX, y: event.pageY - window.canvasApp.topMargin @@ -541,8 +553,6 @@ function newCanvas () { function onMouseOver (event) { try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') } - /* Then we check who is the current object underneeth the mounse. */ let point = { @@ -695,8 +705,6 @@ function newCanvas () { function checkDrag (event) { try { - if (INTENSIVE_LOG === true) { logger.write('[INFO] checkDrag -> Entering function.') } - if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) { let point = { x: event.pageX, From 060e2650df0bf9d4a371cb30ee77defd75b9a73f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 08:46:27 +0200 Subject: [PATCH 153/221] draggTo function implemented at container --- Canvas.js | 7 +------ Container.js | 10 ++++++++++ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/Canvas.js b/Canvas.js index 0362fae51..9969ce316 100644 --- a/Canvas.js +++ b/Canvas.js @@ -744,12 +744,7 @@ function newCanvas () { } if (containerBeingDragged !== undefined) { - if (containerBeingDragged.notDraggingOnX === false) { - containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x - } - if (containerBeingDragged.notDraggingOnY === false) { - containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y - } + containerBeingDragged.draggTo(displaceVector) } } diff --git a/Container.js b/Container.js index 88c619091..c9db63103 100644 --- a/Container.js +++ b/Container.js @@ -14,6 +14,7 @@ function newContainer () { isWheelable: false, detectMouseOver: false, name: undefined, + draggTo: draggTo, initialize: initialize, finalize: finalize, connectToParent: connectToParent, @@ -184,4 +185,13 @@ function newContainer () { } return false } + + function draggTo (point) { + if (thisObject.notDraggingOnX === false) { + thisObject.frame.position.x = thisObject.frame.position.x + point.x + } + if (thisObject.notDraggingOnY === false) { + thisObject.frame.position.y = thisObject.frame.position.y + point.y + } + } } From de087c1661449f5952220cbb07cd7731d35e09e0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 09:39:39 +0200 Subject: [PATCH 154/221] Plotter panels cannot be dragged outside the chart space --- Canvas.js | 5 ++++- Container.js | 38 +++++++++++++++++++++++++++----- Spaces/ChartSpace.js | 21 ++++++++++++++++++ Spaces/FloatingSpace.js | 49 +++++++++++++++++++++++++++++++++++++++++ Spaces/PanelsSpace.js | 1 + 5 files changed, 107 insertions(+), 7 deletions(-) diff --git a/Canvas.js b/Canvas.js index 9969ce316..345887e08 100644 --- a/Canvas.js +++ b/Canvas.js @@ -744,7 +744,10 @@ function newCanvas () { } if (containerBeingDragged !== undefined) { - containerBeingDragged.draggTo(displaceVector) + let moveSucceed = containerBeingDragged.moveTo(displaceVector) + if (moveSucceed === false) { + deactivateDragging(event) + } } } diff --git a/Container.js b/Container.js index c9db63103..c29b5ee0b 100644 --- a/Container.js +++ b/Container.js @@ -14,7 +14,9 @@ function newContainer () { isWheelable: false, detectMouseOver: false, name: undefined, - draggTo: draggTo, + fitFunction: undefined, + isVisibleFunction: undefined, + moveTo: moveTo, initialize: initialize, finalize: finalize, connectToParent: connectToParent, @@ -186,12 +188,36 @@ function newContainer () { return false } - function draggTo (point) { - if (thisObject.notDraggingOnX === false) { - thisObject.frame.position.x = thisObject.frame.position.x + point.x + function moveTo (point) { + /* This function will move the container to the destination point. If it has a visible function will use it + to see if the container can be moved there or not. It wont if the center will not be visible. + + Returns true if move was possible, false if not. */ + + let checkPoint = {} + + if (thisObject.isVisibleFunction === undefined) { + drag() + return true + } else { + checkPoint.x = thisObject.frame.position.x + point.x + thisObject.frame.width / 2 + checkPoint.y = thisObject.frame.position.y + point.y + thisObject.frame.height / 2 + let isVisible = thisObject.isVisibleFunction(checkPoint) + if (isVisible === true) { + drag() + return true + } else { + return false + } } - if (thisObject.notDraggingOnY === false) { - thisObject.frame.position.y = thisObject.frame.position.y + point.y + function drag () { + if (thisObject.notDraggingOnX === false) { + thisObject.frame.position.x = thisObject.frame.position.x + point.x + } + if (thisObject.notDraggingOnY === false) { + thisObject.frame.position.y = thisObject.frame.position.y + point.y + } } } } + diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 380246842..0ffeab7c3 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -17,6 +17,7 @@ function newChartSpace () { visible: true, container: undefined, fitIntoVisibleArea: fitIntoVisibleArea, + isThisPointVisible: isThisPointVisible, physics: physics, drawBackground: drawBackground, draw: draw, @@ -136,6 +137,26 @@ function newChartSpace () { return returnPoint } + function isThisPointVisible (point) { + if (point.x > browserCanvas.width) { + return false + } + + if (point.x < 0) { + return false + } + + if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + return false + } + + if (point.y < 0) { + return false + } + + return true + } + function physics () { thisObject.container.frame.height = BOTTOM_SPACE_POSITION diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index cc2887e18..521ae07d6 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -13,6 +13,8 @@ function newFloatingSpace () { strategyPartConstructor: undefined, noteSets: undefined, container: undefined, + fitIntoVisibleArea: fitIntoVisibleArea, + isThisPointVisible: isThisPointVisible, makeVisible: makeVisible, makeInvisible: makeInvisible, draw: draw, @@ -61,6 +63,53 @@ function newFloatingSpace () { thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) } + function fitIntoVisibleArea (point) { + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + + let returnPoint = { + x: point.x, + y: point.y + } + + if (point.x > browserCanvas.width) { + returnPoint.x = browserCanvas.width + } + + if (point.x < 0) { + returnPoint.x = 0 + } + + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + } + + if (point.y > browserCanvas.height) { + returnPoint.y = browserCanvas.height + } + + return returnPoint + } + + function isThisPointVisible (point) { + if (point.x > browserCanvas.width) { + return false + } + + if (point.x < 0) { + return false + } + + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + return false + } + + if (point.y > browserCanvas.height) { + return false + } + + return true + } + function onMouseWheel (event) { thisObject.floatingLayer.changeTargetRepulsion(event.wheelDelta) } diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index 6d3265132..f182da1c3 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -55,6 +55,7 @@ function newPanelsSpace () { { panel = getNewPlotterPanel(pParameters.devTeam, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelCodeName) panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea + panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible panel.initialize() break } From 24e378ca7f774a7f89450f331d22b1b67ae22385 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 09:46:27 +0200 Subject: [PATCH 155/221] Product Panel not leaving the chart area --- Panels/ProductsPanel.js | 13 ++++++------- Spaces/PanelsSpace.js | 2 ++ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 222ae19e1..5f690130c 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -1,5 +1,6 @@ function newProductsPanel () { let thisObject = { + fitFunction: undefined, container: undefined, getLoadingProductCards: getLoadingProductCards, draw: draw, @@ -9,7 +10,7 @@ function newProductsPanel () { /* Cointainer stuff */ - var container = newContainer() + let container = newContainer() container.initialize() @@ -43,9 +44,7 @@ function newProductsPanel () { thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE thisObject.container.frame.height = UI_PANEL.HEIGHT.LARGE // viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE; - thisObject.fitFunction = canvas.chartSpace.fitIntoVisibleArea - - var position = { + let position = { x: viewPort.visibleArea.topLeft.x, y: viewPort.visibleArea.topLeft.y// viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height } @@ -161,7 +160,7 @@ function newProductsPanel () { if (firstVisibleCard > (productCards.length - availableSlots + 1)) { firstVisibleCard = productCards.length - availableSlots + 1 } visibleProductCards = [] - var lastY = 5 + let lastY = 5 for (let i = 0; i < productCards.length; i++) { if (i + 1 >= firstVisibleCard && i + 1 < firstVisibleCard + availableSlots) { @@ -204,7 +203,7 @@ function newProductsPanel () { } function getContainer (point) { - var container + let container container = panelTabButton.getContainer(point) if (container !== undefined) { return container } @@ -214,7 +213,7 @@ function newProductsPanel () { if (thisObject.container.frame.isThisPointHere(point, true) === true) { /* Now we see which is the inner most container that has it */ - for (var i = 0; i < visibleProductCards.length; i++) { + for (let i = 0; i < visibleProductCards.length; i++) { container = visibleProductCards[i].getContainer(point) if (container !== undefined) { diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js index f182da1c3..04753532f 100644 --- a/Spaces/PanelsSpace.js +++ b/Spaces/PanelsSpace.js @@ -49,6 +49,8 @@ function newPanelsSpace () { case 'Products Panel': { panel = newProductsPanel() + panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea + panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible break } case 'Plotter Panel': From 37fc30d90fe2a2c6d3170aaef308f11b097fc4e0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 09:50:09 +0200 Subject: [PATCH 156/221] fine tuning viewport margin --- ChartsSpace/ViewPort.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js index c34100d5e..e3d4ee247 100644 --- a/ChartsSpace/ViewPort.js +++ b/ChartsSpace/ViewPort.js @@ -12,7 +12,7 @@ function newViewPort () { let ANIMATION_INCREMENT = 0.25 let TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - let BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT + let BOTTOM_MARGIN = 20 + BOTTOM_SPACE_HEIGHT let LEFT_MARGIN = 50 let RIGHT_MARGIN = 50 let MARGINS = { @@ -84,7 +84,7 @@ function newViewPort () { function resize () { TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - BOTTOM_MARGIN = 15 + browserCanvas.height - BOTTOM_SPACE_POSITION + BOTTOM_MARGIN = 20 + browserCanvas.height - BOTTOM_SPACE_POSITION LEFT_MARGIN = 50 RIGHT_MARGIN = 50 MARGINS = { From abc586b18ce9af762f0769f4fa179bdb7ce7c57d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 14:20:19 +0200 Subject: [PATCH 157/221] Visible body and larger workspace --- FloatingSpace/FloatingObject.js | 2 ++ FloatingSpace/StrategyPart.js | 18 ++++++++++++---- FloatingSpace/StrategyPartConstructor.js | 2 ++ Spaces/FloatingSpace.js | 27 ++++++++++++++---------- 4 files changed, 34 insertions(+), 15 deletions(-) diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index b90da54a3..5137e6d2d 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -7,6 +7,7 @@ function newFloatingObject () { logger.fileName = MODULE_NAME let thisObject = { + fitFunction: undefined, container: undefined, positionLocked: false, isOnFocus: false, @@ -61,6 +62,7 @@ function newFloatingObject () { thisObject.container.finalize() thisObject.container = undefined thisObject.payload = undefined + thisObject.fitFunction = undefined } function initialize (type, payload) { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 57c02c27d..50d0cd8a0 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -7,6 +7,7 @@ function newStrategyPart () { logger.fileName = MODULE_NAME let thisObject = { + fitFunction: undefined, type: undefined, menu: undefined, isOnFocus: false, @@ -53,6 +54,7 @@ function newStrategyPart () { thisObject.menu = undefined thisObject.partTitle.finalize() thisObject.partTitle = undefined + thisObject.fitFunction = undefined if (thisObject.codeEditor !== undefined) { thisObject.codeEditor.finalize() @@ -601,11 +603,19 @@ function newStrategyPart () { let radius = thisObject.container.frame.radius - if (radius > 0.5 && image === undefined) { - /* Main FloatingObject */ + if (radius > 0.5) { + const VISIBLE_RADIUS = 5 + + let visiblePosition = { + x: thisObject.container.frame.position.x, + y: thisObject.container.frame.position.y + } + + visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition) + visiblePosition = thisObject.fitFunction(visiblePosition) browserCanvasContext.beginPath() - browserCanvasContext.arc(position.x, position.y, radius * 2 / 3, 0, Math.PI * 2, true) + browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = thisObject.payload.floatingObject.fillStyle @@ -613,7 +623,7 @@ function newStrategyPart () { browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.arc(position.x, position.y, radius * 1 / 3, 0, Math.PI * 2, true) + browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS / 2, 0, Math.PI * 2, true) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)' diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index f3f475ef8..4f32eb23c 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -31,11 +31,13 @@ function newStrategyPartConstructor () { function createStrategyPart (payload) { let floatingObject = newFloatingObject() + floatingObject.fitFunction = canvas.floatingSpace.fitIntoVisibleArea floatingObject.container.connectToParent(canvas.floatingSpace.container, false, false, false, false, false, false, false, false) floatingObject.initialize('Strategy Part', payload) payload.floatingObject = floatingObject let strategyPart = newStrategyPart() + strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea strategyPart.initialize(payload) strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true) payload.uiObject = strategyPart diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 521ae07d6..d160d6bc8 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -1,11 +1,11 @@ -  + function newFloatingSpace () { const MODULE_NAME = 'Floating Space' const ERROR_LOG = true - /* - The Floating Space is the place where floating elements like floatingObjects, live and are rendered. - This space has its own physics which helps with the animation of these objects and also preventing them to overlap. - */ + /* + The Floating Space is the place where floating elements like floatingObjects, live and are rendered. + This space has its own physics which helps with the animation of these objects and also preventing them to overlap. + */ let thisObject = { floatingLayer: undefined, // This is the array of floatingObjects being displayed @@ -31,8 +31,8 @@ function newFloatingSpace () { thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.width = browserCanvas.width * 3 - thisObject.container.frame.height = browserCanvas.height * 3 + thisObject.container.frame.width = browserCanvas.width * 10 + thisObject.container.frame.height = browserCanvas.height * 10 thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 @@ -64,7 +64,9 @@ function newFloatingSpace () { } function fitIntoVisibleArea (point) { - /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + + const RED_LINE = 5 let returnPoint = { x: point.x, @@ -79,8 +81,8 @@ function newFloatingSpace () { returnPoint.x = 0 } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE) { + returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE } if (point.y > browserCanvas.height) { @@ -91,6 +93,8 @@ function newFloatingSpace () { } function isThisPointVisible (point) { + const RED_LINE = 5 + if (point.x > browserCanvas.width) { return false } @@ -99,7 +103,7 @@ function newFloatingSpace () { return false } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE) { return false } @@ -155,3 +159,4 @@ function newFloatingSpace () { browserCanvasContext.fill() } } + From cdd9d1fc82bb143cfd785683f7ef520cd80e057d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 17:04:22 +0200 Subject: [PATCH 158/221] BUG FIXED when moving over textarea --- Canvas.js | 4 ++-- FloatingSpace/CodeEditor.js | 9 ++++++++- FloatingSpace/StrategyPart.js | 5 +++++ Globals.js | 1 + 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/Canvas.js b/Canvas.js index 345887e08..52410f6b9 100644 --- a/Canvas.js +++ b/Canvas.js @@ -470,8 +470,8 @@ function newCanvas () { /* When the mouse leaves the canvas, our elements needs to react to the fact that the mouse is over a far away place */ let thisEvent = { - pageX: 100000000000, - pageY: 100000000000 + pageX: VERY_LARGE_NUMBER, + pageY: VERY_LARGE_NUMBER } onMouseOver(thisEvent) } diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index 99df8b58f..cd671d28d 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -98,7 +98,14 @@ function newCodeEditor () { function getContainer (point) { let container - if (thisObject.visitble === true) { + if (thisObject.visible === true) { + if (point.x === VERY_LARGE_NUMBER) { + /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that + anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is + triggered. We compensate recognizing this coordinate and returning our container. */ + return thisObject.container + } + if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { return thisObject.container } else { diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 50d0cd8a0..dc854e14f 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -381,6 +381,11 @@ function newStrategyPart () { function getContainer (point) { let container + if (thisObject.codeEditor !== undefined) { + container = thisObject.codeEditor.getContainer(point) + if (container !== undefined) { return container } + } + container = thisObject.partTitle.getContainer(point) if (container !== undefined) { return container } diff --git a/Globals.js b/Globals.js index e89a71204..6e72065c2 100644 --- a/Globals.js +++ b/Globals.js @@ -151,6 +151,7 @@ const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000; let NEW_SESSION_INITIAL_DATE = new Date(); // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. let INITIAL_ZOOM_LEVEL = -28.25 // This is the zoom level at the view port in which the APP starts. let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser. +let VERY_LARGE_NUMBER = 100000000000 let maxDate = new Date(); maxDate.setMilliseconds(0); From 711829f46de244cd69f0f3cbbb73fd23680c2445 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 17:40:24 +0200 Subject: [PATCH 159/221] moveTo refactored --- Canvas.js | 2 +- Container.js | 6 +++--- FloatingSpace/StrategyPartTitle.js | 9 ++++++++- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/Canvas.js b/Canvas.js index 52410f6b9..481516273 100644 --- a/Canvas.js +++ b/Canvas.js @@ -744,7 +744,7 @@ function newCanvas () { } if (containerBeingDragged !== undefined) { - let moveSucceed = containerBeingDragged.moveTo(displaceVector) + let moveSucceed = containerBeingDragged.displace(displaceVector) if (moveSucceed === false) { deactivateDragging(event) } diff --git a/Container.js b/Container.js index c29b5ee0b..3fe909ec9 100644 --- a/Container.js +++ b/Container.js @@ -16,7 +16,7 @@ function newContainer () { name: undefined, fitFunction: undefined, isVisibleFunction: undefined, - moveTo: moveTo, + displace: displace, initialize: initialize, finalize: finalize, connectToParent: connectToParent, @@ -188,8 +188,8 @@ function newContainer () { return false } - function moveTo (point) { - /* This function will move the container to the destination point. If it has a visible function will use it + function displace (point) { + /* This function will move the container according to the vector received. If it has a visible function will use it to see if the container can be moved there or not. It wont if the center will not be visible. Returns true if move was possible, false if not. */ diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index a13229cd6..8725bd7ce 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -90,6 +90,14 @@ function newStrategyPartTitle () { function getContainer (point) { let container + if (thisObject.editMode === true) { + if (point.x === VERY_LARGE_NUMBER) { + /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that + anyone can react. In our case, this object has an html input element that is not part of the canvas, so the event is + triggered. We compensate recognizing this coordinate and returning our container. */ + return thisObject.container + } + } if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { @@ -233,4 +241,3 @@ function newStrategyPartTitle () { return title } } - From f2e0a01522674212c9de7bc870bea91aa6b9f29e Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 17:56:34 +0200 Subject: [PATCH 160/221] exiting editing mode on time --- Container.js | 16 +++++- FloatingSpace/StrategyPart.js | 10 ++-- FloatingSpace/StrategyPartConstructor.js | 2 +- FloatingSpace/StrategyPartTitle.js | 68 +++++++++++++----------- 4 files changed, 56 insertions(+), 40 deletions(-) diff --git a/Container.js b/Container.js index 3fe909ec9..2b467470f 100644 --- a/Container.js +++ b/Container.js @@ -32,6 +32,7 @@ function newContainer () { let onMouseNotOverParentEvent = false let onFocusParentEvent = false let onNotFocusParentEvent = false + let onDisplaceParentEvent = false let isConnectedToParent = false @@ -40,6 +41,7 @@ function newContainer () { let onMouseNotOverEventSubscriptionId let onFocusEventSubscriptionId let onNotFocusEventSubscriptionId + let onDisplaceEventSubscriptionId return thisObject @@ -50,6 +52,7 @@ function newContainer () { thisObject.parentContainer.eventHandler.stopListening(onMouseNotOverEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onFocusEventSubscriptionId) thisObject.parentContainer.eventHandler.stopListening(onNotFocusEventSubscriptionId) + thisObject.parentContainer.eventHandler.stopListening(onDisplaceEventSubscriptionId) thisObject.parentContainer = undefined thisObject.eventHandler.finalize() @@ -82,7 +85,8 @@ function newContainer () { onMouseOverEvent, onMouseNotOverEvent, onFocusEvent, - onNotFocusEvent + onNotFocusEvent, + onDisplaceEvent ) { connectedToParentWidth = onWidth connectedToParentHeight = onHeight @@ -93,6 +97,7 @@ function newContainer () { onMouseNotOverParentEvent = onMouseNotOverEvent onFocusParentEvent = onFocusEvent onNotFocusParentEvent = onNotFocusEvent + onDisplaceParentEvent = onDisplaceEvent isConnectedToParent = true @@ -115,6 +120,9 @@ function newContainer () { if (onNotFocusParentEvent === true) { onNotFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onNotFocus', onNotFocus) } + if (onDisplaceParentEvent === true) { + onDisplaceEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onDisplace', onDisplace) + } if (connectedToParentWidth) { thisObject.frame.width = thisObject.parentContainer.frame.width @@ -163,6 +171,10 @@ function newContainer () { thisObject.eventHandler.raiseEvent('onNotFocus', event) } + function onDisplace (event) { + thisObject.eventHandler.raiseEvent('onDisplace', event) + } + function isForThisPurpose (purpose) { if (purpose !== undefined) { switch (purpose) { @@ -217,7 +229,7 @@ function newContainer () { if (thisObject.notDraggingOnY === false) { thisObject.frame.position.y = thisObject.frame.position.y + point.y } + thisObject.eventHandler.raiseEvent('onDisplace', event) } } } - diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index dc854e14f..147996974 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -38,14 +38,14 @@ function newStrategyPart () { let selfFocusEventSubscriptionId let selfNotFocuskEventSubscriptionId - let selfMouseClickEventSubscriptionId + let selfDisplaceEventSubscriptionId return thisObject function finalize () { thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId) thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId) - thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfDisplaceEventSubscriptionId) thisObject.container.finalize() thisObject.container = undefined @@ -375,7 +375,7 @@ function newStrategyPart () { selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) - selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + selfDisplaceEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDisplace', onDisplace) } function getContainer (point) { @@ -427,8 +427,8 @@ function newStrategyPart () { } } - function onMouseClick (event) { - + function onDisplace (event) { + thisObject.partTitle.exitEditMode() } function drawBackground () { diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 4f32eb23c..68dc58a74 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -39,7 +39,7 @@ function newStrategyPartConstructor () { let strategyPart = newStrategyPart() strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea strategyPart.initialize(payload) - strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true) + strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true, true) payload.uiObject = strategyPart const FRICTION = 0.97 diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 8725bd7ce..d39e90aa3 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -190,45 +190,49 @@ function newStrategyPartTitle () { } function drawTitleBackground () { - let params = { - cornerRadius: 3, - lineWidth: 0.1, - container: thisObject.container, - borderColor: UI_COLOR.BLACK, - backgroundColor: UI_COLOR.BLACK, - castShadow: false, - opacity: 0.25 - } + if (thisObject.editMode !== true) { + let params = { + cornerRadius: 3, + lineWidth: 0.1, + container: thisObject.container, + borderColor: UI_COLOR.BLACK, + backgroundColor: UI_COLOR.BLACK, + castShadow: false, + opacity: 0.25 + } - roundedCornersBackground(params) + roundedCornersBackground(params) + } } function drawText () { - let radius = thisObject.container.frame.radius - let labelPoint - let fontSize = thisObject.payload.floatingObject.currentFontSize - let label + if (thisObject.editMode !== true) { + let radius = thisObject.container.frame.radius + let labelPoint + let fontSize = thisObject.payload.floatingObject.currentFontSize + let label - if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true)) { - browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - label = thisObject.payload.title - - if (label !== undefined) { - label = trimTitle(label) - - labelPoint = { - x: 0, - y: thisObject.container.frame.height * 0.8 - } - - labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true)) { + browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + + label = thisObject.payload.title + + if (label !== undefined) { + label = trimTitle(label) + + labelPoint = { + x: 0, + y: thisObject.container.frame.height * 0.8 + } + + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } } } } From 61f69b89494e450c52e82d210599de10e07f11df Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 18:01:08 +0200 Subject: [PATCH 161/221] min amount of caracters in title --- FloatingSpace/StrategyPartTitle.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index d39e90aa3..38d1ca5d4 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -149,8 +149,10 @@ function newStrategyPartTitle () { thisObject.editMode = false let input = document.getElementById('input') input.style.display = 'none' - thisObject.payload.title = input.value - thisObject.payload.node.name = input.value + if (input.value.length > 2) { + thisObject.payload.title = input.value + thisObject.payload.node.name = input.value + } } } From 8365f81e3b16793690635387379032c6be02b1c4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 18:25:05 +0200 Subject: [PATCH 162/221] FIXED: cannot edit title outside visible area --- FloatingSpace/StrategyPart.js | 3 +++ FloatingSpace/StrategyPartConstructor.js | 1 + FloatingSpace/StrategyPartTitle.js | 13 ++++++++++++- 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 147996974..9c308a3f4 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -8,6 +8,7 @@ function newStrategyPart () { let thisObject = { fitFunction: undefined, + isVisibleFunction: undefined, type: undefined, menu: undefined, isOnFocus: false, @@ -55,6 +56,7 @@ function newStrategyPart () { thisObject.partTitle.finalize() thisObject.partTitle = undefined thisObject.fitFunction = undefined + thisObject.isVisibleFunction = undefined if (thisObject.codeEditor !== undefined) { thisObject.codeEditor.finalize() @@ -358,6 +360,7 @@ function newStrategyPart () { /* Initialize Part Title */ thisObject.partTitle = newStrategyPartTitle() + thisObject.partTitle.isVisibleFunction = thisObject.isVisibleFunction thisObject.partTitle.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) thisObject.partTitle.initialize(thisObject.payload) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 68dc58a74..bc00726d8 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -38,6 +38,7 @@ function newStrategyPartConstructor () { let strategyPart = newStrategyPart() strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea + strategyPart.isVisibleFunction = canvas.floatingSpace.isThisPointVisible strategyPart.initialize(payload) strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true, true) payload.uiObject = strategyPart diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 38d1ca5d4..74553641d 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -7,6 +7,7 @@ function newStrategyPartTitle () { logger.fileName = MODULE_NAME let thisObject = { + isVisibleFunction: undefined, allwaysVisible: undefined, editMode: undefined, container: undefined, @@ -40,6 +41,7 @@ function newStrategyPartTitle () { thisObject.container.finalize() thisObject.container = undefined thisObject.payload = undefined + thisObject.isVisibleFunction = undefined } function initialize (payload) { @@ -141,7 +143,15 @@ function newStrategyPartTitle () { } function onMouseClick (event) { - enterEditMode() + let checkPoint = { + x: 0, + y: 0 + } + checkPoint = thisObject.container.frame.frameThisPoint(checkPoint) + + if (thisObject.isVisibleFunction(checkPoint) === true) { + enterEditMode() + } } function exitEditMode () { @@ -247,3 +257,4 @@ function newStrategyPartTitle () { return title } } + From 2a50934f910c88da35868790c8b8a9848de717a4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 18:52:01 +0200 Subject: [PATCH 163/221] FIXED: Text editor cannot open outside visible area --- FloatingSpace/CodeEditor.js | 12 +++++++++++- FloatingSpace/StrategyPart.js | 2 ++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index cd671d28d..edd2cfd74 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -3,6 +3,7 @@ function newCodeEditor () { const MODULE_NAME = 'Circular Menu Iem' let thisObject = { + isVisibleFunction: undefined, iconOK: undefined, iconNOT_OK: undefined, visible: false, @@ -42,6 +43,7 @@ function newCodeEditor () { thisObject.iconOK = undefined thisObject.iconNOT_OK = undefined thisObject.payload = undefined + thisObject.isVisibleFunction = undefined } function initialize () { @@ -135,7 +137,15 @@ function newCodeEditor () { } textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) - if (textAreaPosition.y < window.canvasApp.topMargin) { deactivate() } + if (thisObject.visible === true) { + let checkPosition = { + x: textAreaPosition.x, + y: textAreaPosition.y - window.canvasApp.topMargin + } + if (thisObject.isVisibleFunction(checkPosition) === false) { + deactivate() + } + } if (thisObject.visible === true) { let textAreaDiv = document.getElementById('textAreaDiv') textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 9c308a3f4..30569f65e 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -242,6 +242,7 @@ function newStrategyPart () { case 'Phase': { imagePath = 'Images/icons/style-01/testing.png' thisObject.codeEditor = newCodeEditor() + thisObject.codeEditor.isVisibleFunction = thisObject.isVisibleFunction thisObject.codeEditor.initialize() thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) @@ -317,6 +318,7 @@ function newStrategyPart () { case 'Condition': { imagePath = 'Images/icons/style-01/testing.png' thisObject.codeEditor = newCodeEditor() + thisObject.codeEditor.isVisibleFunction = thisObject.isVisibleFunction thisObject.codeEditor.initialize() thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) menuItemsInitialValues = [ From 1262897c7a7a2009e8baed687aa6aa3ebfee3c17 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 11 May 2019 19:05:27 +0200 Subject: [PATCH 164/221] Side Panel Hidden --- Spaces/StrategySpace.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 8885bd5a3..d150059e9 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -21,14 +21,14 @@ function newStrategySpace () { return thisObject async function initialize () { - thisObject.sidePanel = newSidePanel() - thisObject.sidePanel.initialize() + // thisObject.sidePanel = newSidePanel() + // thisObject.sidePanel.initialize() thisObject.investmentPlanWorkspace = newInvestmentPlanWorkspace() - thisObject.investmentPlanWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) + // thisObject.investmentPlanWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) await thisObject.investmentPlanWorkspace.initialize() - thisObject.sidePanel.areas.push(thisObject.investmentPlanWorkspace) + // thisObject.sidePanel.areas.push(thisObject.investmentPlanWorkspace) } function makeVisible () { @@ -60,6 +60,8 @@ function newStrategySpace () { } function draw () { - thisObject.sidePanel.draw() + if (thisObject.sidePanel !== undefined) { + thisObject.sidePanel.draw() + } } } From 15a18b2b3f7a6bf865abb5d2f22ba2053c276601 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 10:13:09 +0200 Subject: [PATCH 165/221] REmoving Side Bar for now --- Canvas.js | 1 - Frame.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/Canvas.js b/Canvas.js index 481516273..e8543455c 100644 --- a/Canvas.js +++ b/Canvas.js @@ -169,7 +169,6 @@ function newCanvas () { animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) - animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded) animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) diff --git a/Frame.js b/Frame.js index 567f77c2b..a726eae7d 100644 --- a/Frame.js +++ b/Frame.js @@ -347,7 +347,7 @@ function newFrame () { /* We paint the title bar now */ - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)' browserCanvasContext.beginPath() browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y) From 2de41a3ae9f2f577522a1818db618afde440a3ef Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 11:16:31 +0200 Subject: [PATCH 166/221] Try to put a border to the time machine --- ChartsSpace/TimeMachine.js | 26 ++++++++++++++++++++++---- Spaces/ChartSpace.js | 11 +---------- Utilities/RoundedCornersBackground.js | 23 ++++++++++++++++++----- 3 files changed, 41 insertions(+), 19 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 435636caa..b5a373126 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -229,9 +229,13 @@ function newTimeMachine () { } function drawBackground () { - for (let i = 0; i < this.charts.length; i++) { - let chart = this.charts[i] - chart.drawBackground() + thisBackground() + + if (thisObject.container.frame.isInViewPort()) { + for (let i = 0; i < this.charts.length; i++) { + let chart = this.charts[i] + chart.drawBackground() + } } } @@ -249,6 +253,21 @@ function newTimeMachine () { } } + function thisBackground () { + let params = { + cornerRadius: 15, + lineWidth: 5, + opacity: 1, + container: thisObject.container, + borderColor: UI_COLOR.RUSTED_RED, + backgroundColor: UI_COLOR.WHITE, + fitFunction: thisObject.fitFunction, + coordinateSystem: timeLineCoordinateSystem + } + + roundedCornersBackground(params) + } + function recalculateScale () { if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') } @@ -270,4 +289,3 @@ function newTimeMachine () { ) } } - diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 0ffeab7c3..39b9ac34b 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -8,7 +8,6 @@ changes, then all charts in it are replotted with the corresponging data. function newChartSpace () { const MODULE_NAME = 'Chart Space' - const INFO_LOG = false const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -37,8 +36,6 @@ function newChartSpace () { function finalize () { try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - for (let i = 0; i < thisObject.timeMachines.length; i++) { let timeMachine = thisObject.timeMachines[i] timeMachine.finalize() @@ -49,8 +46,6 @@ function newChartSpace () { } function initialize (callBackFunction) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - let initializedCounter = 0 let toInitialize = 1 @@ -62,17 +57,13 @@ function newChartSpace () { timeMachine.container.frame.position.x = thisObject.container.frame.width / 2 - timeMachine.container.frame.width / 2 timeMachine.container.frame.position.y = thisObject.container.frame.height / 2 - timeMachine.container.frame.height / 2 - + timeMachine.container.fitFunction = fitIntoVisibleArea timeMachine.initialize(onTimeMachineInitialized) function onTimeMachineInitialized (err) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Entering function.') } - initializedCounter++ if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Initialization of a Time Machine failed.') } - callBackFunction(err) return } diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js index 3dd7bbf38..a940c81c8 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/Utilities/RoundedCornersBackground.js @@ -21,10 +21,24 @@ function roundedCornersBackground (params) { /* 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) + if (params.coordinateSystem !== undefined) { // For instance Candles would use this + borderPoint1 = params.coordinateSystem.transformThisPoint(borderPoint1) + borderPoint2 = params.coordinateSystem.transformThisPoint(borderPoint2) + borderPoint3 = params.coordinateSystem.transformThisPoint(borderPoint3) + borderPoint4 = params.coordinateSystem.transformThisPoint(borderPoint4) + } else { + if (params.outsideViewPort === true) { // If the element is not affected by zoom + borderPoint1 = transformThisPoint(borderPoint1, params.container) + borderPoint2 = transformThisPoint(borderPoint2, params.container) + borderPoint3 = transformThisPoint(borderPoint3, params.container) + borderPoint4 = transformThisPoint(borderPoint4, params.container) + } else { // For instance Panels use this + borderPoint1 = params.container.frame.frameThisPoint(borderPoint1) + borderPoint2 = params.container.frame.frameThisPoint(borderPoint2) + borderPoint3 = params.container.frame.frameThisPoint(borderPoint3) + borderPoint4 = params.container.frame.frameThisPoint(borderPoint4) + } + } if (params.fitFunction !== undefined) { borderPoint1 = params.fitFunction(borderPoint1) @@ -89,4 +103,3 @@ function roundedCornersBackground (params) { browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')' browserCanvasContext.stroke() } - From c5a5b3365bad4b85ce7177a470fc485b7b64f478 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 11:37:17 +0200 Subject: [PATCH 167/221] Tyding into a folder --- UIControl.js => BottomSpace/UIControl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename UIControl.js => BottomSpace/UIControl.js (98%) diff --git a/UIControl.js b/BottomSpace/UIControl.js similarity index 98% rename from UIControl.js rename to BottomSpace/UIControl.js index ab8a9de48..515640b31 100644 --- a/UIControl.js +++ b/BottomSpace/UIControl.js @@ -37,7 +37,7 @@ function newUIControl () { } function getContainer (point) { - var container + let container /* First we check if thisObject point is inside thisObject space. */ From f76c511c05904a8156764aeaab5adbc5299ba07c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 12:07:36 +0200 Subject: [PATCH 168/221] Arrows at bottom space --- Spaces/BottomSpace.js | 92 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 707fe917f..875fbab59 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -5,6 +5,7 @@ let thisObject = { container: undefined, + status: 'BOTTOM', draw: draw, physics: physics, getContainer: getContainer, // returns the inner most container that holds the point received by parameter. @@ -57,8 +58,11 @@ function physics () { /* Check the limits */ + thisObject.status = 'MIDDLE' + if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) { thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + thisObject.status = 'BOTTOM' canvas.strategySpace.makeInvisible() } else { canvas.strategySpace.makeVisible() @@ -66,6 +70,7 @@ if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) { thisObject.container.frame.position.y = 0 + thisObject.status = 'TOP' canvas.panelsSpace.visible = false } else { canvas.panelsSpace.visible = true @@ -198,6 +203,93 @@ browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() + + arrow() + } + + function arrow () { + const X_OFFSET = thisObject.container.frame.width / 2 + const Y_OFFSET = thisObject.container.frame.height / 2 + const HEIGHT = 6 + const WIDTH = 18 + const LINE_WIDTH = 3 + const OPACITY = 1 + const DISTANCE_BETWEEN_ARROWS = 9 + let ARROW_1_DIRECTION = 0 + let ARROW_2_DIRECTION = 0 + + switch (thisObject.status) { + + case ('TOP'): { + ARROW_1_DIRECTION = -1 + ARROW_2_DIRECTION = -1 + break + } + case ('MIDDLE'): { + ARROW_1_DIRECTION = 1 + ARROW_2_DIRECTION = -1 + break + } + case ('BOTTOM'): { + ARROW_1_DIRECTION = 1 + ARROW_2_DIRECTION = 1 + break + } + } + + point1 = { + x: X_OFFSET - WIDTH / 2, + y: Y_OFFSET + HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 + } + + point2 = { + x: X_OFFSET, + y: Y_OFFSET - HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 + } + + point3 = { + x: X_OFFSET + WIDTH / 2, + y: Y_OFFSET + HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 + } + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + + point4 = { + x: X_OFFSET - WIDTH / 2, + y: Y_OFFSET + HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 + } + + point5 = { + x: X_OFFSET, + y: Y_OFFSET - HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 + } + + point6 = { + x: X_OFFSET + WIDTH / 2, + y: Y_OFFSET + HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 + } + + point4 = thisObject.container.frame.frameThisPoint(point4) + point5 = thisObject.container.frame.frameThisPoint(point5) + point6 = thisObject.container.frame.frameThisPoint(point6) + + 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.moveTo(point4.x, point4.y) + browserCanvasContext.lineTo(point5.x, point5.y) + browserCanvasContext.lineTo(point6.x, point6.y) + + browserCanvasContext.lineWidth = LINE_WIDTH + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.stroke() } } From a4f199f792b0e7825a75a209e4b0be2cbd2dcd71 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 12:18:26 +0200 Subject: [PATCH 169/221] adjustment on arrows --- Spaces/BottomSpace.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 875fbab59..acc7d5cde 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -214,7 +214,7 @@ const WIDTH = 18 const LINE_WIDTH = 3 const OPACITY = 1 - const DISTANCE_BETWEEN_ARROWS = 9 + let DISTANCE_BETWEEN_ARROWS = 0 let ARROW_1_DIRECTION = 0 let ARROW_2_DIRECTION = 0 @@ -223,16 +223,19 @@ case ('TOP'): { ARROW_1_DIRECTION = -1 ARROW_2_DIRECTION = -1 + DISTANCE_BETWEEN_ARROWS = 6 break } case ('MIDDLE'): { ARROW_1_DIRECTION = 1 ARROW_2_DIRECTION = -1 + DISTANCE_BETWEEN_ARROWS = 9 break } case ('BOTTOM'): { ARROW_1_DIRECTION = 1 ARROW_2_DIRECTION = 1 + DISTANCE_BETWEEN_ARROWS = 6 break } } From 2fcd49ff13a3c46d0163cb2e98a0f9bb3a6cf1a3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 14:07:41 +0200 Subject: [PATCH 170/221] Refactoring to Trading System --- FloatingSpace/StrategyPart.js | 6 +++--- FloatingSpace/StrategyPartConstructor.js | 2 +- FloatingSpace/StrategyPartTitle.js | 2 +- Spaces/BottomSpace.js | 2 +- Spaces/StrategySpace.js | 18 ++++++++--------- StrategySpace/StrategyCollectionItem.js | 3 +-- .../{InvestmentPlan.js => TradingSystem.js} | 20 +++++++++---------- ...Workspace.js => TradingSystemWorkspace.js} | 10 +++++----- 8 files changed, 31 insertions(+), 32 deletions(-) rename StrategySpace/{InvestmentPlan.js => TradingSystem.js} (95%) rename StrategySpace/{InvestmentPlanWorkspace.js => TradingSystemWorkspace.js} (94%) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 30569f65e..41cd9e751 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -72,11 +72,11 @@ function newStrategyPart () { let menuItemsInitialValues = [] switch (thisObject.payload.node.type) { - case 'Investment Plan': { + case 'Trading System': { imagePath = 'Images/icons/style-01/analysis.png' menuItemsInitialValues = [ { - action: 'Reload Investment Plan', + action: 'Reload Trading System', actionFunction: thisObject.payload.onMenuItemClick, label: 'Reload', visible: false, @@ -88,7 +88,7 @@ function newStrategyPart () { angle: -60 }, { - action: 'Save Investment Plan', + action: 'Save Trading System', actionFunction: thisObject.payload.onMenuItemClick, label: 'Save Changes', visible: false, diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index bc00726d8..662c806b2 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -46,7 +46,7 @@ function newStrategyPartConstructor () { const FRICTION = 0.97 switch (payload.node.type) { - case 'Investment Plan': { + case 'Trading System': { level_0() break } diff --git a/FloatingSpace/StrategyPartTitle.js b/FloatingSpace/StrategyPartTitle.js index 74553641d..8597bff14 100644 --- a/FloatingSpace/StrategyPartTitle.js +++ b/FloatingSpace/StrategyPartTitle.js @@ -48,7 +48,7 @@ function newStrategyPartTitle () { thisObject.payload = payload switch (payload.node.type) { - case 'Investment Plan': { + case 'Trading System': { break } case 'Strategy': { diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index acc7d5cde..5e6ae3b05 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -44,7 +44,7 @@ } function onMouseClick (event) { - // canvas.strategySpace.investmentPlanWorkspace.showUp() + // canvas.strategySpace.tradingSystemWorkspace.showUp() } function resize () { diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index d150059e9..0d4264972 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -3,7 +3,7 @@ function newStrategySpace () { const MODULE_NAME = 'Strategy Space' let thisObject = { sidePanel: undefined, - investmentPlanWorkspace: undefined, + tradingSystemWorkspace: undefined, container: undefined, draw: draw, getContainer: getContainer, @@ -24,16 +24,16 @@ function newStrategySpace () { // thisObject.sidePanel = newSidePanel() // thisObject.sidePanel.initialize() - thisObject.investmentPlanWorkspace = newInvestmentPlanWorkspace() - // thisObject.investmentPlanWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) - await thisObject.investmentPlanWorkspace.initialize() + thisObject.tradingSystemWorkspace = newTradingSystemWorkspace() + // thisObject.tradingSystemWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) + await thisObject.tradingSystemWorkspace.initialize() - // thisObject.sidePanel.areas.push(thisObject.investmentPlanWorkspace) + // thisObject.sidePanel.areas.push(thisObject.tradingSystemWorkspace) } function makeVisible () { - if (thisObject.investmentPlanWorkspace.isDeployed !== true) { - thisObject.investmentPlanWorkspace.deploydInvestmentPlan() + if (thisObject.tradingSystemWorkspace.isDeployed !== true) { + thisObject.tradingSystemWorkspace.deploydTradingSystem() } canvas.floatingSpace.makeVisible() visible = true @@ -46,8 +46,8 @@ function newStrategySpace () { function getContainer (point) { let container - if (thisObject.investmentPlanWorkspace !== undefined) { - container = thisObject.investmentPlanWorkspace.getContainer(point) + if (thisObject.tradingSystemWorkspace !== undefined) { + container = thisObject.tradingSystemWorkspace.getContainer(point) if (container !== undefined) { return container } } diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 38dbef787..2b1b8c920 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -44,7 +44,7 @@ function newStrategyCollectionItem () { function onMouseClick (event) { if (status === 'off') { canvas.floatingSpace.makeVisible() - thisObject.strategy = newInvestmentPlan() + thisObject.strategy = newTradingSystem() thisObject.strategy.initialize(thisObject.strategySource) status = 'on' } else { @@ -175,4 +175,3 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } - diff --git a/StrategySpace/InvestmentPlan.js b/StrategySpace/TradingSystem.js similarity index 95% rename from StrategySpace/InvestmentPlan.js rename to StrategySpace/TradingSystem.js index 0eefe04e2..c06e3912c 100644 --- a/StrategySpace/InvestmentPlan.js +++ b/StrategySpace/TradingSystem.js @@ -1,9 +1,9 @@ -function newInvestmentPlan () { - const MODULE_NAME = 'Investment Plan' +function newTradingSystem () { + const MODULE_NAME = 'Trading System' let thisObject = { - investmentPlan: undefined, + tradingSystem: undefined, container: undefined, getContainer: getContainer, initialize: initialize, @@ -29,7 +29,7 @@ function newInvestmentPlan () { } function initialize (strategies) { - thisObject.investmentPlan = { + thisObject.tradingSystem = { strategies: strategies } generateStrategyParts() @@ -80,13 +80,13 @@ function newInvestmentPlan () { function generateStrategyParts () { let lastPhase - let investmentPlan = thisObject.investmentPlan + let tradingSystem = thisObject.tradingSystem - createPart('Investment Plan', '', investmentPlan, undefined, undefined) + createPart('Trading System', '', tradingSystem, undefined, undefined) - for (m = 0; m < investmentPlan.strategies.length; m++) { - let strategy = investmentPlan.strategies[m] - createPart('Strategy', strategy.name, strategy, investmentPlan, investmentPlan) + for (m = 0; m < tradingSystem.strategies.length; m++) { + let strategy = tradingSystem.strategies[m] + createPart('Strategy', strategy.name, strategy, tradingSystem, tradingSystem) createPart('Strategy Entry Event', '', strategy.entryPoint, strategy, strategy) for (let k = 0; k < strategy.entryPoint.situations.length; k++) { @@ -171,7 +171,7 @@ function newInvestmentPlan () { } function destroyStrategyParts () { - let strategy = thisObject.investmentPlan + let strategy = thisObject.tradingSystem destroyPart(strategy) destroyPart(strategy.entryPoint) diff --git a/StrategySpace/InvestmentPlanWorkspace.js b/StrategySpace/TradingSystemWorkspace.js similarity index 94% rename from StrategySpace/InvestmentPlanWorkspace.js rename to StrategySpace/TradingSystemWorkspace.js index d2ceaa8b9..a8ee995e4 100644 --- a/StrategySpace/InvestmentPlanWorkspace.js +++ b/StrategySpace/TradingSystemWorkspace.js @@ -1,6 +1,6 @@ -function newInvestmentPlanWorkspace () { - const MODULE_NAME = 'Investment Plan Workspace' +function newTradingSystemWorkspace () { + const MODULE_NAME = 'Trading System Workspace' const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -9,7 +9,7 @@ function newInvestmentPlanWorkspace () { isDeployed: false, strategies: undefined, container: undefined, - deploydInvestmentPlan: deploydInvestmentPlan, + deploydTradingSystem: deploydTradingSystem, draw: draw, getContainer: getContainer, initialize: initialize @@ -122,8 +122,8 @@ function newInvestmentPlanWorkspace () { } } - function deploydInvestmentPlan () { - thisObject.strategy = newInvestmentPlan() + function deploydTradingSystem () { + thisObject.strategy = newTradingSystem() thisObject.strategy.initialize(thisObject.strategies) thisObject.isDeployed = true } From eb59fab26098fc2a9503083ce9c681c4d1005e41 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 14:26:19 +0200 Subject: [PATCH 171/221] Access to Strategy System only when logged in --- Globals.js | 2 +- Spaces/BottomSpace.js | 13 +++++++++++-- Spaces/StrategySpace.js | 3 ++- StrategySpace/TradingSystemWorkspace.js | 13 +++++++++---- 4 files changed, 23 insertions(+), 8 deletions(-) diff --git a/Globals.js b/Globals.js index 6e72065c2..79694da26 100644 --- a/Globals.js +++ b/Globals.js @@ -121,7 +121,7 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; - +const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. const WIDHTER_VOLUME_BAR_BASE_FACTOR = 2.5; diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 5e6ae3b05..3e03f4c77 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -60,6 +60,13 @@ thisObject.status = 'MIDDLE' + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) + if (user !== null) { // Only if user is logged in + thisObject.container.isDraggeable = true + } else { + thisObject.container.isDraggeable = false + } + if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) { thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT thisObject.status = 'BOTTOM' @@ -204,7 +211,10 @@ browserCanvasContext.closePath() browserCanvasContext.fill() - arrow() + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) + if (user !== null) { // Only if user is logged in + arrow() + } } function arrow () { @@ -295,4 +305,3 @@ browserCanvasContext.stroke() } } - diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 0d4264972..86bc7b275 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -26,7 +26,8 @@ function newStrategySpace () { thisObject.tradingSystemWorkspace = newTradingSystemWorkspace() // thisObject.tradingSystemWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) - await thisObject.tradingSystemWorkspace.initialize() + thisObject.tradingSystemWorkspace.initialize() + await thisObject.tradingSystemWorkspace.loadFromStrategyzer() // thisObject.sidePanel.areas.push(thisObject.tradingSystemWorkspace) } diff --git a/StrategySpace/TradingSystemWorkspace.js b/StrategySpace/TradingSystemWorkspace.js index a8ee995e4..f5be5854a 100644 --- a/StrategySpace/TradingSystemWorkspace.js +++ b/StrategySpace/TradingSystemWorkspace.js @@ -9,6 +9,7 @@ function newTradingSystemWorkspace () { isDeployed: false, strategies: undefined, container: undefined, + loadFromStrategyzer: loadFromStrategyzer, deploydTradingSystem: deploydTradingSystem, draw: draw, getContainer: getContainer, @@ -33,10 +34,14 @@ function newTradingSystemWorkspace () { return thisObject async function initialize () { + + } + + async function loadFromStrategyzer () { try { const accessToken = window.localStorage.getItem('xaccess_token') - let user = window.localStorage.getItem('xuser') + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) if (user === null) { // if there is no user that means that we are logged off, which means this object can not be used. return @@ -100,7 +105,7 @@ function newTradingSystemWorkspace () { resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) .catch(error => { - console.log('apolloClient error getting user strategies', error.graphQLErrors, error.stack) + if (ERROR_LOG === true) { logger.write('[ERROR] ApolloClient error getting user strategies -> err = ' + err.stack) } reject(error) }) }) @@ -115,10 +120,10 @@ function newTradingSystemWorkspace () { await Promise.all(fetchDataPromises).then(result => { }, err => { - console.error('[ERROR] Login -> GraphQL Fetch Error -> err = ', err.stack) + if (ERROR_LOG === true) { logger.write('[ERROR] GraphQL Fetch Error -> err = ' + err.stack) } }) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> err = ' + err.stack) } } } From dcec3b93e0d6832856a3e2d9e4328f25c4672d62 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 14:30:27 +0200 Subject: [PATCH 172/221] just workpace --- Spaces/StrategySpace.js | 2 +- StrategySpace/{TradingSystemWorkspace.js => Workspace.js} | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename StrategySpace/{TradingSystemWorkspace.js => Workspace.js} (97%) diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 86bc7b275..69aa27093 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -24,7 +24,7 @@ function newStrategySpace () { // thisObject.sidePanel = newSidePanel() // thisObject.sidePanel.initialize() - thisObject.tradingSystemWorkspace = newTradingSystemWorkspace() + thisObject.tradingSystemWorkspace = newWorkspace() // thisObject.tradingSystemWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) thisObject.tradingSystemWorkspace.initialize() await thisObject.tradingSystemWorkspace.loadFromStrategyzer() diff --git a/StrategySpace/TradingSystemWorkspace.js b/StrategySpace/Workspace.js similarity index 97% rename from StrategySpace/TradingSystemWorkspace.js rename to StrategySpace/Workspace.js index f5be5854a..11ede6092 100644 --- a/StrategySpace/TradingSystemWorkspace.js +++ b/StrategySpace/Workspace.js @@ -1,6 +1,6 @@ -function newTradingSystemWorkspace () { - const MODULE_NAME = 'Trading System Workspace' +function newWorkspace () { + const MODULE_NAME = 'Workspace' const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME From ac83fa5f5a6266445ff6dab7272a1b938a6fd5a2 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 14:44:18 +0200 Subject: [PATCH 173/221] protocol as name --- StrategySpace/TradingSystem.js | 11 +++++++---- StrategySpace/Workspace.js | 10 +++++----- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index c06e3912c..9b8e38174 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -3,7 +3,7 @@ function newTradingSystem () { const MODULE_NAME = 'Trading System' let thisObject = { - tradingSystem: undefined, + protocolData: undefined, container: undefined, getContainer: getContainer, initialize: initialize, @@ -26,10 +26,13 @@ function newTradingSystem () { function finalize () { destroyStrategyParts() + thisObject.protocolData = undefined + thisObject.container.finalize() + thisObject.container = undefined } function initialize (strategies) { - thisObject.tradingSystem = { + thisObject.protocolData = { strategies: strategies } generateStrategyParts() @@ -80,7 +83,7 @@ function newTradingSystem () { function generateStrategyParts () { let lastPhase - let tradingSystem = thisObject.tradingSystem + let tradingSystem = thisObject.protocolData createPart('Trading System', '', tradingSystem, undefined, undefined) @@ -171,7 +174,7 @@ function newTradingSystem () { } function destroyStrategyParts () { - let strategy = thisObject.tradingSystem + let strategy = thisObject.protocolData destroyPart(strategy) destroyPart(strategy.entryPoint) diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 11ede6092..27ec027d2 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -63,7 +63,7 @@ function newWorkspace () { /* Getting the FB that own the Strategies */ - let strategySimulationClone = '' + let tradingSystemSimulationClone = '' 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. ') } @@ -73,7 +73,7 @@ function newWorkspace () { for (let i = 0; i < clones.length; i++) { let clone = clones[i] if (clone.botType === 'Indicator') { - strategySimulationClone = clone.botSlug + tradingSystemSimulationClone = clone.botSlug } } @@ -96,7 +96,7 @@ function newWorkspace () { return new Promise((resolve, reject) => { apolloClient.query({ query: GRAPHQL_QUERY_GET_STRATEGIES, - variables: { fbSlug: strategySimulationClone} + variables: { fbSlug: tradingSystemSimulationClone} }) .then(response => { window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) @@ -128,8 +128,8 @@ function newWorkspace () { } function deploydTradingSystem () { - thisObject.strategy = newTradingSystem() - thisObject.strategy.initialize(thisObject.strategies) + thisObject.tradingSystem = newTradingSystem() + thisObject.tradingSystem.initialize(thisObject.strategies) thisObject.isDeployed = true } From 716de14b9e9b62746c52c401da343d94a2463121 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 15:50:49 +0200 Subject: [PATCH 174/221] saving to strategizer part 1: creating the graphql query --- Spaces/StrategySpace.js | 20 ++-- StrategySpace/TradingSystem.js | 3 + StrategySpace/Workspace.js | 178 +++++++++++++++++++++++++++++++++ 3 files changed, 191 insertions(+), 10 deletions(-) diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 69aa27093..c0a9dcad7 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -3,7 +3,7 @@ function newStrategySpace () { const MODULE_NAME = 'Strategy Space' let thisObject = { sidePanel: undefined, - tradingSystemWorkspace: undefined, + workplace: undefined, container: undefined, draw: draw, getContainer: getContainer, @@ -24,17 +24,17 @@ function newStrategySpace () { // thisObject.sidePanel = newSidePanel() // thisObject.sidePanel.initialize() - thisObject.tradingSystemWorkspace = newWorkspace() - // thisObject.tradingSystemWorkspace.container.connectToParent(thisObject.sidePanel.container, true, true) - thisObject.tradingSystemWorkspace.initialize() - await thisObject.tradingSystemWorkspace.loadFromStrategyzer() + thisObject.workplace = newWorkspace() + // thisObject.workplace.container.connectToParent(thisObject.sidePanel.container, true, true) + thisObject.workplace.initialize() + await thisObject.workplace.loadFromStrategyzer() - // thisObject.sidePanel.areas.push(thisObject.tradingSystemWorkspace) + // thisObject.sidePanel.areas.push(thisObject.workplace) } function makeVisible () { - if (thisObject.tradingSystemWorkspace.isDeployed !== true) { - thisObject.tradingSystemWorkspace.deploydTradingSystem() + if (thisObject.workplace.isDeployed !== true) { + thisObject.workplace.deploydTradingSystem() } canvas.floatingSpace.makeVisible() visible = true @@ -47,8 +47,8 @@ function newStrategySpace () { function getContainer (point) { let container - if (thisObject.tradingSystemWorkspace !== undefined) { - container = thisObject.tradingSystemWorkspace.getContainer(point) + if (thisObject.workplace !== undefined) { + container = thisObject.workplace.getContainer(point) if (container !== undefined) { return container } } diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index 9b8e38174..aaae4beb6 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -245,6 +245,9 @@ function newTradingSystem () { function onMenuItemClick (payload, action) { switch (action) { + case 'Save Trading System': + canvas.strategySpace.workplace.saveToStrategyzer() + break case 'Open Settings': break diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 27ec027d2..ef566381f 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -9,7 +9,9 @@ function newWorkspace () { isDeployed: false, strategies: undefined, container: undefined, + tradingSystem: undefined, loadFromStrategyzer: loadFromStrategyzer, + saveToStrategyzer: saveToStrategyzer, deploydTradingSystem: deploydTradingSystem, draw: draw, getContainer: getContainer, @@ -37,6 +39,182 @@ function newWorkspace () { } + function saveToStrategyzer () { + let graphQL_Mutation = '' + + graphQL_Mutation = graphQL_Mutation + 'strategy: { ' + graphQL_Mutation = graphQL_Mutation + 'subStrategies: [ ' + + for (m = 0; m < thisObject.tradingSystem.protocolData.strategies.length; m++) { + let strategy = thisObject.tradingSystem.protocolData.strategies[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'active: true ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + strategy.name + '" ' + + graphQL_Mutation = graphQL_Mutation + 'entryPoint: { ' + graphQL_Mutation = graphQL_Mutation + 'situations: [ ' + + for (let k = 0; k < strategy.entryPoint.situations.length; k++) { + let situation = strategy.entryPoint.situations[k] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + graphQL_Mutation = graphQL_Mutation + 'exitPoint: { ' + graphQL_Mutation = graphQL_Mutation + 'situations: [ ' + + for (let k = 0; k < strategy.exitPoint.situations.length; k++) { + let situation = strategy.exitPoint.situations[k] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + graphQL_Mutation = graphQL_Mutation + 'sellPoint: { ' + graphQL_Mutation = graphQL_Mutation + 'situations: [ ' + + for (let k = 0; k < strategy.sellPoint.situations.length; k++) { + let situation = strategy.sellPoint.situations[k] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + graphQL_Mutation = graphQL_Mutation + 'stopLoss: { ' + graphQL_Mutation = graphQL_Mutation + 'phases: [ ' + + for (let p = 0; p < strategy.stopLoss.phases.length; p++) { + let phase = strategy.stopLoss.phases[p] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + phase.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + phase.code + '" ' + graphQL_Mutation = graphQL_Mutation + 'situations: [ ' + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + graphQL_Mutation = graphQL_Mutation + 'buyOrder: { ' + graphQL_Mutation = graphQL_Mutation + 'phases: [ ' + + for (let p = 0; p < strategy.buyOrder.phases.length; p++) { + let phase = strategy.buyOrder.phases[p] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + phase.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + phase.code + '" ' + graphQL_Mutation = graphQL_Mutation + 'situations: [ ' + + for (let k = 0; k < phase.situations.length; k++) { + let situation = phase.situations[k] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' + + for (let m = 0; m < situation.conditions.length; m++) { + let condition = situation.conditions[m] + + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' + graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + graphQL_Mutation = graphQL_Mutation + '} ' + } + + graphQL_Mutation = graphQL_Mutation + '] ' + graphQL_Mutation = graphQL_Mutation + '} ' + + console.log(graphQL_Mutation) + } + async function loadFromStrategyzer () { try { const accessToken = window.localStorage.getItem('xaccess_token') From 5c89cf1aac6e0a48298a32f11a6508b029817c5f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 16:37:32 +0200 Subject: [PATCH 175/221] Getting the Id of the FB for the update query --- Globals.js | 2 + StrategySpace/ConstGetStrategies.js | 1 + StrategySpace/ConstUpdateStrategy.js | 85 --------------------- StrategySpace/TradingSystem.js | 5 +- StrategySpace/Workspace.js | 106 ++++++++++++++++++++++++--- 5 files changed, 101 insertions(+), 98 deletions(-) diff --git a/Globals.js b/Globals.js index 79694da26..7d348fbc5 100644 --- a/Globals.js +++ b/Globals.js @@ -122,6 +122,8 @@ window.AT_BREAKPOINT = false; const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" +const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "xaccess_token" + const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. const WIDHTER_VOLUME_BAR_BASE_FACTOR = 2.5; diff --git a/StrategySpace/ConstGetStrategies.js b/StrategySpace/ConstGetStrategies.js index 46acca721..cbecf4f9e 100644 --- a/StrategySpace/ConstGetStrategies.js +++ b/StrategySpace/ConstGetStrategies.js @@ -2,6 +2,7 @@ const GRAPHQL_QUERY_GET_STRATEGIES = Apollo.gql` query($fbSlug: String!){ strategizer_StrategyByFb(fbSlug: $fbSlug){ + id subStrategies(activeOnly: true){ name entryPoint{ diff --git a/StrategySpace/ConstUpdateStrategy.js b/StrategySpace/ConstUpdateStrategy.js index 72be45218..e69de29bb 100644 --- a/StrategySpace/ConstUpdateStrategy.js +++ b/StrategySpace/ConstUpdateStrategy.js @@ -1,85 +0,0 @@ -const GRAPHQL_MUTATION_UPDATE_STRATEGY = 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 - } - } - } - } - } - } - } - ` diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index aaae4beb6..ddf329f24 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -31,9 +31,10 @@ function newTradingSystem () { thisObject.container = undefined } - function initialize (strategies) { + function initialize (protocolData) { thisObject.protocolData = { - strategies: strategies + id: protocolData.id, + strategies: protocolData.subStrategies } generateStrategyParts() } diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index ef566381f..7573ff923 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -7,7 +7,7 @@ function newWorkspace () { let thisObject = { isDeployed: false, - strategies: undefined, + strategizerData: undefined, container: undefined, tradingSystem: undefined, loadFromStrategyzer: loadFromStrategyzer, @@ -35,13 +35,91 @@ function newWorkspace () { return thisObject - async function initialize () { + function initialize () { } - function saveToStrategyzer () { + async function saveToStrategyzer () { + const GRAPHQL_MUTATION_UPDATE_STRATEGIES = buildUpdateGraphQlQuery() + + try { + const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE) + + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) + if (user === null) { + if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> Can not save because user is not logged in. ') } + return + } + + user = JSON.parse(user) + + const authId = user.authId + + const apolloClient = new Apollo.lib.ApolloClient({ + networkInterface: Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl, + transportBatching: true + }), + connectToDevTools: true + }) + + /* Updating 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 getStrategies = () => { + return new Promise((resolve, reject) => { + apolloClient.query({ + query: GRAPHQL_QUERY_GET_STRATEGIES, + variables: { fbSlug: tradingSystemSimulationClone} + }) + .then(response => { + window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) + thisObject.strategizerData = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) + + resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) + }) + .catch(error => { + if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> ApolloClient error getting user strategies -> err = ' + err.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 => { + if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } + }) + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> err = ' + err.stack) } + } + } + + function buildUpdateGraphQlQuery () { let graphQL_Mutation = '' + graphQL_Mutation = graphQL_Mutation + 'mutation { ' + graphQL_Mutation = graphQL_Mutation + 'strategizer_EditStrategy( ' + graphQL_Mutation = graphQL_Mutation + 'id: "sdfs" ' + graphQL_Mutation = graphQL_Mutation + 'strategy: { ' graphQL_Mutation = graphQL_Mutation + 'subStrategies: [ ' @@ -212,12 +290,18 @@ function newWorkspace () { graphQL_Mutation = graphQL_Mutation + '] ' graphQL_Mutation = graphQL_Mutation + '} ' - console.log(graphQL_Mutation) + graphQL_Mutation = graphQL_Mutation + ') ' + graphQL_Mutation = graphQL_Mutation + '{ ' + graphQL_Mutation = graphQL_Mutation + 'id ' + graphQL_Mutation = graphQL_Mutation + '} ' + graphQL_Mutation = graphQL_Mutation + '} ' + + return graphQL_Mutation } async function loadFromStrategyzer () { try { - const accessToken = window.localStorage.getItem('xaccess_token') + const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE) let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) if (user === null) { @@ -244,7 +328,7 @@ function newWorkspace () { let tradingSystemSimulationClone = '' 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. ') } + if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> no user clones found at local storage. Can not get Strategies without them. ') } return } clones = JSON.parse(clones) @@ -277,13 +361,13 @@ function newWorkspace () { variables: { fbSlug: tradingSystemSimulationClone} }) .then(response => { - window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - thisObject.strategies = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) + window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb)) + thisObject.strategizerData = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb)) resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) .catch(error => { - if (ERROR_LOG === true) { logger.write('[ERROR] ApolloClient error getting user strategies -> err = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) } reject(error) }) }) @@ -298,7 +382,7 @@ function newWorkspace () { await Promise.all(fetchDataPromises).then(result => { }, err => { - if (ERROR_LOG === true) { logger.write('[ERROR] GraphQL Fetch Error -> err = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } }) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> err = ' + err.stack) } @@ -307,7 +391,7 @@ function newWorkspace () { function deploydTradingSystem () { thisObject.tradingSystem = newTradingSystem() - thisObject.tradingSystem.initialize(thisObject.strategies) + thisObject.tradingSystem.initialize(thisObject.strategizerData) thisObject.isDeployed = true } From ee556b659ed7fe373a384a3a65f86ad555870df7 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 18:00:24 +0200 Subject: [PATCH 176/221] saving prevented by circular references --- StrategySpace/ConstUpdateStrategy.js | 7 ++++++ StrategySpace/TradingSystem.js | 5 ++-- StrategySpace/Workspace.js | 37 ++++++++++++++-------------- 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/StrategySpace/ConstUpdateStrategy.js b/StrategySpace/ConstUpdateStrategy.js index e69de29bb..d84ce30cf 100644 --- a/StrategySpace/ConstUpdateStrategy.js +++ b/StrategySpace/ConstUpdateStrategy.js @@ -0,0 +1,7 @@ +const GRAPHQL_MUTATION_UPDATE_STRATEGIES = Apollo.gql` + mutation strategizer_EditStrategy($id: ID!, $strategy: strategizer_StrategyInput!) { + strategizer_EditStrategy(id: $id, strategy: $strategy) { + id + } + } +` diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index ddf329f24..6befa1852 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -244,10 +244,11 @@ function newTradingSystem () { } } - function onMenuItemClick (payload, action) { + async function onMenuItemClick (payload, action) { switch (action) { case 'Save Trading System': - canvas.strategySpace.workplace.saveToStrategyzer() + let wasSaved + await canvas.strategySpace.workplace.saveToStrategyzer() break case 'Open Settings': diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 7573ff923..58662075d 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -40,8 +40,6 @@ function newWorkspace () { } async function saveToStrategyzer () { - const GRAPHQL_MUTATION_UPDATE_STRATEGIES = buildUpdateGraphQlQuery() - try { const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE) @@ -78,21 +76,22 @@ function newWorkspace () { } }]) - const getStrategies = () => { + const updateStrategies = () => { return new Promise((resolve, reject) => { - apolloClient.query({ - query: GRAPHQL_QUERY_GET_STRATEGIES, - variables: { fbSlug: tradingSystemSimulationClone} + apolloClient.mutate({ + mutation: GRAPHQL_MUTATION_UPDATE_STRATEGIES, + variables: { + id: thisObject.strategizerData.id, + strategy: thisObject.strategizerData + } }) .then(response => { - window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - thisObject.strategizerData = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies)) - - resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) + console.log('FUNCO!!') + resolve(true) }) - .catch(error => { - if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) } - reject(error) + .catch(err => { + if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) } + reject(err) }) }) } @@ -100,16 +99,16 @@ function newWorkspace () { // To avoid race conditions, add asynchronous fetches to array let fetchDataPromises = [] - fetchDataPromises.push(getStrategies()) + fetchDataPromises.push(updateStrategies()) // When all asynchronous fetches resolve, authenticate user or throw error. await Promise.all(fetchDataPromises).then(result => { - + console.log('parece que anda??') }, err => { - if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } }) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] saveTotrategyzer -> err = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> err = ' + err.stack) } } } @@ -366,9 +365,9 @@ function newWorkspace () { resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies}) }) - .catch(error => { + .catch(err => { if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) } - reject(error) + reject(err) }) }) } From 753e1066996dcb02a69078b0f7c77061585d5be6 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 12 May 2019 20:09:57 +0200 Subject: [PATCH 177/221] Saving the Strategies to Strategizer! --- StrategySpace/Workspace.js | 317 ++++++++++++++++--------------------- 1 file changed, 139 insertions(+), 178 deletions(-) diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 58662075d..1f34ecd5a 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -76,13 +76,15 @@ function newWorkspace () { } }]) + let dataToSave = buildGraphQLDataToSave() + const updateStrategies = () => { return new Promise((resolve, reject) => { apolloClient.mutate({ mutation: GRAPHQL_MUTATION_UPDATE_STRATEGIES, variables: { id: thisObject.strategizerData.id, - strategy: thisObject.strategizerData + strategy: dataToSave.strategy } }) .then(response => { @@ -112,190 +114,149 @@ function newWorkspace () { } } - function buildUpdateGraphQlQuery () { + function buildGraphQLDataToSave () { let graphQL_Mutation = '' - graphQL_Mutation = graphQL_Mutation + 'mutation { ' - graphQL_Mutation = graphQL_Mutation + 'strategizer_EditStrategy( ' - graphQL_Mutation = graphQL_Mutation + 'id: "sdfs" ' - - graphQL_Mutation = graphQL_Mutation + 'strategy: { ' - graphQL_Mutation = graphQL_Mutation + 'subStrategies: [ ' - - for (m = 0; m < thisObject.tradingSystem.protocolData.strategies.length; m++) { - let strategy = thisObject.tradingSystem.protocolData.strategies[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'active: true ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + strategy.name + '" ' - - graphQL_Mutation = graphQL_Mutation + 'entryPoint: { ' - graphQL_Mutation = graphQL_Mutation + 'situations: [ ' - - for (let k = 0; k < strategy.entryPoint.situations.length; k++) { - let situation = strategy.entryPoint.situations[k] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' + let dataToSave = { + strategy: { + subStrategies: [] } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - - graphQL_Mutation = graphQL_Mutation + 'exitPoint: { ' - graphQL_Mutation = graphQL_Mutation + 'situations: [ ' - - for (let k = 0; k < strategy.exitPoint.situations.length; k++) { - let situation = strategy.exitPoint.situations[k] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - - graphQL_Mutation = graphQL_Mutation + 'sellPoint: { ' - graphQL_Mutation = graphQL_Mutation + 'situations: [ ' - - for (let k = 0; k < strategy.sellPoint.situations.length; k++) { - let situation = strategy.sellPoint.situations[k] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - - graphQL_Mutation = graphQL_Mutation + 'stopLoss: { ' - graphQL_Mutation = graphQL_Mutation + 'phases: [ ' - - for (let p = 0; p < strategy.stopLoss.phases.length; p++) { - let phase = strategy.stopLoss.phases[p] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + phase.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + phase.code + '" ' - graphQL_Mutation = graphQL_Mutation + 'situations: [ ' - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - - graphQL_Mutation = graphQL_Mutation + 'buyOrder: { ' - graphQL_Mutation = graphQL_Mutation + 'phases: [ ' - - for (let p = 0; p < strategy.buyOrder.phases.length; p++) { - let phase = strategy.buyOrder.phases[p] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + phase.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + phase.code + '" ' - graphQL_Mutation = graphQL_Mutation + 'situations: [ ' - - for (let k = 0; k < phase.situations.length; k++) { - let situation = phase.situations[k] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + situation.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'conditions: [ ' - - for (let m = 0; m < situation.conditions.length; m++) { - let condition = situation.conditions[m] - - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'name: "' + condition.name + '" ' - graphQL_Mutation = graphQL_Mutation + 'code: "' + condition.code + '" ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - } - - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' - - graphQL_Mutation = graphQL_Mutation + '} ' } - graphQL_Mutation = graphQL_Mutation + '] ' - graphQL_Mutation = graphQL_Mutation + '} ' + for (m = 0; m < thisObject.tradingSystem.protocolData.strategies.length; m++) { + let workspaceStrategy = thisObject.tradingSystem.protocolData.strategies[m] + let strategy = { + entryPoint: { + situations: [] + }, + exitPoint: { + situations: [] + }, + sellPoint: { + situations: [] + }, + stopLoss: { + phases: [] + }, + buyOrder: { + phases: [] + } + } - graphQL_Mutation = graphQL_Mutation + ') ' - graphQL_Mutation = graphQL_Mutation + '{ ' - graphQL_Mutation = graphQL_Mutation + 'id ' - graphQL_Mutation = graphQL_Mutation + '} ' - graphQL_Mutation = graphQL_Mutation + '} ' + for (let k = 0; k < workspaceStrategy.entryPoint.situations.length; k++) { + let workspaceSituation = workspaceStrategy.entryPoint.situations[k] + let situation = { + name: workspaceSituation.name, + conditions: [] + } - return graphQL_Mutation + for (let m = 0; m < workspaceSituation.conditions.length; m++) { + let workspaceCondition = workspaceSituation.conditions[m] + let condition = { + name: workspaceCondition.name, + code: workspaceCondition.code + } + situation.conditions.push(condition) + } + strategy.entryPoint.situations.push(situation) + } + + for (let k = 0; k < workspaceStrategy.exitPoint.situations.length; k++) { + let workspaceSituation = workspaceStrategy.exitPoint.situations[k] + let situation = { + name: workspaceSituation.name, + conditions: [] + } + + for (let m = 0; m < workspaceSituation.conditions.length; m++) { + let workspaceCondition = workspaceSituation.conditions[m] + let condition = { + name: workspaceCondition.name, + code: workspaceCondition.code + } + situation.conditions.push(condition) + } + strategy.exitPoint.situations.push(situation) + } + + for (let k = 0; k < workspaceStrategy.sellPoint.situations.length; k++) { + let workspaceSituation = workspaceStrategy.sellPoint.situations[k] + let situation = { + name: workspaceSituation.name, + conditions: [] + } + + for (let m = 0; m < workspaceSituation.conditions.length; m++) { + let workspaceCondition = workspaceSituation.conditions[m] + let condition = { + name: workspaceCondition.name, + code: workspaceCondition.code + } + situation.conditions.push(condition) + } + strategy.sellPoint.situations.push(situation) + } + + for (let p = 0; p < workspaceStrategy.stopLoss.phases.length; p++) { + let workspacePhase = workspaceStrategy.stopLoss.phases[p] + let phase = { + name: workspacePhase.name, + code: workspacePhase.code, + situations: [] + } + + for (let k = 0; k < workspacePhase.situations.length; k++) { + let workspaceSituation = workspacePhase.situations[k] + let situation = { + name: workspaceSituation.name, + conditions: [] + } + + for (let m = 0; m < workspaceSituation.conditions.length; m++) { + let workspaceCondition = workspaceSituation.conditions[m] + let condition = { + name: workspaceCondition.name, + code: workspaceCondition.code + } + situation.conditions.push(condition) + } + phase.situations.push(situation) + } + strategy.stopLoss.phases.push(phase) + } + + for (let p = 0; p < workspaceStrategy.buyOrder.phases.length; p++) { + let workspacePhase = workspaceStrategy.buyOrder.phases[p] + let phase = { + name: workspacePhase.name, + code: workspacePhase.code, + situations: [] + } + + for (let k = 0; k < workspacePhase.situations.length; k++) { + let workspaceSituation = workspacePhase.situations[k] + let situation = { + name: workspaceSituation.name, + conditions: [] + } + + for (let m = 0; m < workspaceSituation.conditions.length; m++) { + let workspaceCondition = workspaceSituation.conditions[m] + let condition = { + name: workspaceCondition.name, + code: workspaceCondition.code + } + situation.conditions.push(condition) + } + phase.situations.push(situation) + } + strategy.buyOrder.phases.push(phase) + } + dataToSave.strategy.subStrategies.push(strategy) + } + + console.log(dataToSave) + return dataToSave } async function loadFromStrategyzer () { From 665062d4da45b75822d911a84061c9275a00f6a2 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 08:49:30 +0200 Subject: [PATCH 178/221] strategy name was missing --- StrategySpace/Workspace.js | 1 + 1 file changed, 1 insertion(+) diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 1f34ecd5a..03415be42 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -126,6 +126,7 @@ function newWorkspace () { for (m = 0; m < thisObject.tradingSystem.protocolData.strategies.length; m++) { let workspaceStrategy = thisObject.tradingSystem.protocolData.strategies[m] let strategy = { + name: workspaceStrategy.name, entryPoint: { situations: [] }, From 308f564509e2db5c9f0a43f112cd0d36ec4f19b0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 08:57:54 +0200 Subject: [PATCH 179/221] considering active property of strategies --- StrategySpace/ConstGetStrategies.js | 1 + StrategySpace/Workspace.js | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/StrategySpace/ConstGetStrategies.js b/StrategySpace/ConstGetStrategies.js index cbecf4f9e..aa77d1d5c 100644 --- a/StrategySpace/ConstGetStrategies.js +++ b/StrategySpace/ConstGetStrategies.js @@ -5,6 +5,7 @@ const GRAPHQL_QUERY_GET_STRATEGIES = Apollo.gql` id subStrategies(activeOnly: true){ name + active entryPoint{ situations{ name diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index 03415be42..b70472015 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -88,7 +88,7 @@ function newWorkspace () { } }) .then(response => { - console.log('FUNCO!!') + console.log('Strategies Saved') resolve(true) }) .catch(err => { @@ -105,7 +105,7 @@ function newWorkspace () { // When all asynchronous fetches resolve, authenticate user or throw error. await Promise.all(fetchDataPromises).then(result => { - console.log('parece que anda??') + }, err => { if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } }) @@ -127,6 +127,7 @@ function newWorkspace () { let workspaceStrategy = thisObject.tradingSystem.protocolData.strategies[m] let strategy = { name: workspaceStrategy.name, + active: workspaceStrategy.active, entryPoint: { situations: [] }, From 8f478c5ca30ce56b337e7976700736ffa2abe37c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 10:14:50 +0200 Subject: [PATCH 180/221] Saving working with states shown at manu item --- FloatingSpace/CircularMenuItem.js | 38 +++++++++++++++++++++++++++---- StrategySpace/TradingSystem.js | 9 +++++--- StrategySpace/Workspace.js | 10 +------- 3 files changed, 40 insertions(+), 17 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index b22524258..f1ee11bf3 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -42,6 +42,11 @@ function newCircularMenuItem () { let selfMouseOverEventSubscriptionId let selfMouseClickEventSubscriptionId let selfMouseNotOverEventSubscriptionId + + let labelToPrint = '' + let defaultBackgroudColor = UI_COLOR.RED + let backgroundColorToUse = UI_COLOR.RED + let temporaryStatus = 0 return thisObject function finalize () { @@ -103,6 +108,15 @@ function newCircularMenuItem () { thisObject.container.frame.position.x = thisObject.container.frame.radius * 3 / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5 thisObject.container.frame.position.y = thisObject.container.frame.radius * 3 / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2 + + temporaryStatus-- + if (temporaryStatus < 0) { + temporaryStatus = 0 + } + if (temporaryStatus === 0) { + labelToPrint = thisObject.label + backgroundColorToUse = defaultBackgroudColor + } } function onMouseOver (point) { @@ -117,8 +131,21 @@ function newCircularMenuItem () { isMouseOver = false } - function onMouseClick (event) { - thisObject.actionFunction(thisObject.payload, thisObject.action) + async function onMouseClick (event) { + if (temporaryStatus === 0) { + setTemporaryStatus('Saving...', UI_COLOR.GREY) + await thisObject.actionFunction(thisObject.payload, thisObject.action).then(result => { + setTemporaryStatus('Saved', UI_COLOR.PATINATED_TURQUOISE) + }, err => { + setTemporaryStatus('Not Saved', UI_COLOR.TITANIUM_YELLOW) + }) + } + } + + function setTemporaryStatus (text, backgroundColor) { + labelToPrint = text + backgroundColorToUse = backgroundColor + temporaryStatus = 500 } function drawBackground () { @@ -128,7 +155,7 @@ function newCircularMenuItem () { lineWidth: 0.1, container: thisObject.container, borderColor: UI_COLOR.DARK, - backgroundColor: UI_COLOR.RED, + backgroundColor: backgroundColorToUse, castShadow: false } @@ -162,7 +189,7 @@ function newCircularMenuItem () { browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - if (thisObject.label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) { + if (thisObject.currentRadius >= thisObject.targetRadius) { labelPoint = { x: menuPosition.x + thisObject.currentRadius + 10, y: menuPosition.y + fontSize * FONT_ASPECT_RATIO @@ -170,8 +197,9 @@ function newCircularMenuItem () { browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fillText(thisObject.label, labelPoint.x, labelPoint.y) + browserCanvasContext.fillText(labelToPrint, labelPoint.x, labelPoint.y) } } } } + diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index 6befa1852..c2d3fd060 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -247,9 +247,12 @@ function newTradingSystem () { async function onMenuItemClick (payload, action) { switch (action) { case 'Save Trading System': - let wasSaved - await canvas.strategySpace.workplace.saveToStrategyzer() - break + { + await canvas.strategySpace.workplace.saveToStrategyzer() + + break + } + case 'Open Settings': break diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index b70472015..ea534794d 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -88,7 +88,6 @@ function newWorkspace () { } }) .then(response => { - console.log('Strategies Saved') resolve(true) }) .catch(err => { @@ -98,17 +97,11 @@ function newWorkspace () { }) } - // To avoid race conditions, add asynchronous fetches to array let fetchDataPromises = [] fetchDataPromises.push(updateStrategies()) - // When all asynchronous fetches resolve, authenticate user or throw error. - await Promise.all(fetchDataPromises).then(result => { - - }, err => { - if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) } - }) + await Promise.all(fetchDataPromises) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> err = ' + err.stack) } } @@ -257,7 +250,6 @@ function newWorkspace () { dataToSave.strategy.subStrategies.push(strategy) } - console.log(dataToSave) return dataToSave } From 92bad2738bba773222ecf2bcb8718ea0a83fa7dc Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 11:59:29 +0200 Subject: [PATCH 181/221] Improvement on asyc calls --- FloatingSpace/CircularMenuItem.js | 19 ++++++++++--------- StrategySpace/TradingSystem.js | 4 ++-- StrategySpace/Workspace.js | 6 ++---- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index f1ee11bf3..8c21ac556 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -133,19 +133,21 @@ function newCircularMenuItem () { async function onMouseClick (event) { if (temporaryStatus === 0) { - setTemporaryStatus('Saving...', UI_COLOR.GREY) - await thisObject.actionFunction(thisObject.payload, thisObject.action).then(result => { - setTemporaryStatus('Saved', UI_COLOR.PATINATED_TURQUOISE) - }, err => { - setTemporaryStatus('Not Saved', UI_COLOR.TITANIUM_YELLOW) - }) + setTemporaryStatus('Saving...', UI_COLOR.GREY, 500) + let result = await thisObject.actionFunction(thisObject.payload, thisObject.action) + + if (result === true) { + setTemporaryStatus('Saved', UI_COLOR.PATINATED_TURQUOISE, 250) + } else { + setTemporaryStatus('Not Saved', UI_COLOR.TITANIUM_YELLOW, 500) + } } } - function setTemporaryStatus (text, backgroundColor) { + function setTemporaryStatus (text, backgroundColor, waitingCycles) { labelToPrint = text backgroundColorToUse = backgroundColor - temporaryStatus = 500 + temporaryStatus = waitingCycles } function drawBackground () { @@ -202,4 +204,3 @@ function newCircularMenuItem () { } } } - diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index c2d3fd060..e4d3f6775 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -248,8 +248,8 @@ function newTradingSystem () { switch (action) { case 'Save Trading System': { - await canvas.strategySpace.workplace.saveToStrategyzer() - + let result = await canvas.strategySpace.workplace.saveToStrategyzer() + return result break } diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index ea534794d..d03cf2b35 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -97,11 +97,9 @@ function newWorkspace () { }) } - let fetchDataPromises = [] + let result = await updateStrategies() - fetchDataPromises.push(updateStrategies()) - - await Promise.all(fetchDataPromises) + return result } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> err = ' + err.stack) } } From b66e8cd41d6c0c51f8f588e4cd839b4a89a4b20b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 12:13:43 +0200 Subject: [PATCH 182/221] Temporary Labels can be parametrized now --- FloatingSpace/CircularMenu.js | 3 +++ FloatingSpace/CircularMenuItem.js | 16 +++++++++++++--- FloatingSpace/StrategyPart.js | 4 +++- StrategySpace/TradingSystem.js | 1 - 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index b623c7c34..97edde860 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -53,6 +53,9 @@ function newCircularMenu () { menuItem.action = menuItemInitialValue.action menuItem.actionFunction = menuItemInitialValue.actionFunction menuItem.label = menuItemInitialValue.label + menuItem.workingLabel = menuItemInitialValue.workingLabel + menuItem.workDoneLabel = menuItemInitialValue.workDoneLabel + menuItem.workFailedLabel = menuItemInitialValue.workFailedLabel menuItem.visible = menuItemInitialValue.visible menuItem.imagePathOn = menuItemInitialValue.imagePathOn menuItem.imagePathOff = menuItemInitialValue.imagePathOff diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 8c21ac556..4aef13239 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -9,6 +9,9 @@ function newCircularMenuItem () { action: undefined, actionFunction: undefined, label: undefined, + workingLabel: undefined, + workDoneLabel: undefined, + workFailedLabel: undefined, visible: false, imagePathOn: undefined, imagePathOff: undefined, @@ -133,13 +136,20 @@ function newCircularMenuItem () { async function onMouseClick (event) { if (temporaryStatus === 0) { - setTemporaryStatus('Saving...', UI_COLOR.GREY, 500) + if (thisObject.workingLabel !== undefined) { + setTemporaryStatus(thisObject.workingLabel, UI_COLOR.GREY, 500) + } + let result = await thisObject.actionFunction(thisObject.payload, thisObject.action) if (result === true) { - setTemporaryStatus('Saved', UI_COLOR.PATINATED_TURQUOISE, 250) + if (thisObject.workDoneLabel !== undefined) { + setTemporaryStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250) + } } else { - setTemporaryStatus('Not Saved', UI_COLOR.TITANIUM_YELLOW, 500) + if (thisObject.workFailedLabel != undefined) { + setTemporaryStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 500) + } } } } diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 41cd9e751..6417fb09e 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -91,6 +91,9 @@ function newStrategyPart () { action: 'Save Trading System', actionFunction: thisObject.payload.onMenuItemClick, label: 'Save Changes', + workingLabel: 'Saving...', + workDoneLabel: 'Saved', + workFailedLabel: 'Not Saved', visible: false, imagePathOn: 'Images/icons/style-01/upload.png', imagePathOff: 'Images/icons/style-01/target.png', @@ -654,4 +657,3 @@ function newStrategyPart () { } } } - diff --git a/StrategySpace/TradingSystem.js b/StrategySpace/TradingSystem.js index e4d3f6775..9cd76e864 100644 --- a/StrategySpace/TradingSystem.js +++ b/StrategySpace/TradingSystem.js @@ -254,7 +254,6 @@ function newTradingSystem () { } case 'Open Settings': - break case 'Delete Strategy': From c0d3ba174b1cfe30d0e3f16caca67066ff3d6191 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 14:13:55 +0200 Subject: [PATCH 183/221] Ready to deployd in develop --- Globals.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Globals.js b/Globals.js index 7d348fbc5..d3b973c71 100644 --- a/Globals.js +++ b/Globals.js @@ -19,7 +19,7 @@ UI_COLOR = { DARK: "48, 48, 54", LIGHT: "234, 226, 222", GREY: "150, 150, 150", - LIGHT_GREY: "247, 247, 247", + LIGHT_GREY: "247, 247, 247", WHITE: "255, 255, 255", BLACK: "0, 0, 0", GOLDEN_ORANGE: "240, 162, 2", @@ -121,8 +121,8 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; -const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" -const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "xaccess_token" +const LOGGED_IN_USER_LOCAL_STORAGE = "user" +const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "access_token" const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. @@ -167,7 +167,7 @@ const BOTTOM_SPACE_HEIGHT = 35; const BREAKPOINT_HEIGHT = 15; const SIDE_PANEL_WIDTH = 450 let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT - + const PRODUCT_CARD_STATUS = { ON: 'on', LOADING: 'loading', From ca54f8635cd054673ff4943baefa1c68f2d221a8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 15:08:50 +0200 Subject: [PATCH 184/221] Putting the red lines inside the bottom space --- Globals.js | 2 +- Spaces/BottomSpace.js | 5 +++-- Spaces/FloatingSpace.js | 10 +++------- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/Globals.js b/Globals.js index d3b973c71..77d9ed28c 100644 --- a/Globals.js +++ b/Globals.js @@ -163,7 +163,7 @@ const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; const TOP_SPACE_HEIGHT = 5; -const BOTTOM_SPACE_HEIGHT = 35; +const BOTTOM_SPACE_HEIGHT = 40; const BREAKPOINT_HEIGHT = 15; const SIDE_PANEL_WIDTH = 450 let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT diff --git a/Spaces/BottomSpace.js b/Spaces/BottomSpace.js index 3e03f4c77..3bee0df9d 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/BottomSpace.js @@ -200,13 +200,13 @@ browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y - RED_LINE_HIGHT, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + thisObject.container.frame.height, thisObject.container.frame.width, RED_LINE_HIGHT) + browserCanvasContext.rect(zeroPoint.x, zeroPoint.y - RED_LINE_HIGHT + thisObject.container.frame.height, thisObject.container.frame.width, RED_LINE_HIGHT) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() @@ -305,3 +305,4 @@ browserCanvasContext.stroke() } } + diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index d160d6bc8..32752e594 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -66,8 +66,6 @@ function newFloatingSpace () { function fitIntoVisibleArea (point) { /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ - const RED_LINE = 5 - let returnPoint = { x: point.x, y: point.y @@ -81,8 +79,8 @@ function newFloatingSpace () { returnPoint.x = 0 } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { + returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT } if (point.y > browserCanvas.height) { @@ -93,8 +91,6 @@ function newFloatingSpace () { } function isThisPointVisible (point) { - const RED_LINE = 5 - if (point.x > browserCanvas.width) { return false } @@ -103,7 +99,7 @@ function newFloatingSpace () { return false } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + RED_LINE) { + if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { return false } From 11c479594e739ba36e55a20b59c48a3adcb27276 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 15:14:14 +0200 Subject: [PATCH 185/221] Top Space to the front in relation with Bottom space --- Canvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Canvas.js b/Canvas.js index e8543455c..970b151fb 100644 --- a/Canvas.js +++ b/Canvas.js @@ -174,9 +174,9 @@ function newCanvas () { animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) + animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) animation.start(onStart) From ef06f7bc8b0291c8ab955d56a8c659e62b171744 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 15:56:24 +0200 Subject: [PATCH 186/221] Reorganization to clean strategyPart object --- FloatingSpace/StrategyPart.js | 292 +--------------------- FloatingSpace/StrategyPartConstructor.js | 305 ++++++++++++++++++++++- Globals.js | 4 +- 3 files changed, 305 insertions(+), 296 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 6417fb09e..3bd8d5f24 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -67,295 +67,9 @@ function newStrategyPart () { imagePath = undefined } - function initialize (payload) { + function initialize (payload, menuItemsInitialValues) { thisObject.payload = payload - let menuItemsInitialValues = [] - switch (thisObject.payload.node.type) { - case 'Trading System': { - imagePath = 'Images/icons/style-01/analysis.png' - menuItemsInitialValues = [ - { - action: 'Reload Trading System', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Reload', - visible: false, - imagePathOn: 'Images/icons/style-01/vector.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -60 - }, - { - action: 'Save Trading System', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Save Changes', - workingLabel: 'Saving...', - workDoneLabel: 'Saved', - workFailedLabel: 'Not Saved', - visible: false, - imagePathOn: 'Images/icons/style-01/upload.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }, - { - action: 'New Strategy', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'New Strategy', - visible: false, - imagePathOn: 'Images/icons/style-01/quality.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 20 - }, - { - action: 'Open Settings', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Settings', - visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 60 - }] - break - } - case 'Strategy': { - imagePath = 'Images/icons/style-01/quality.png' - menuItemsInitialValues = [ - { - action: 'Delete Strategy', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Delete This Strategy', - visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }, - { - action: 'Open Settings', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Settings', - visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 20 - }] - break - } - case 'Strategy Entry Event': { - imagePath = 'Images/icons/style-01/startup.png' - menuItemsInitialValues = [ - { - action: 'Add Situation', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Strategy Exit Event': { - imagePath = 'Images/icons/style-01/support.png' - menuItemsInitialValues = [ - { - action: 'Add Situation', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Trade Entry Event': { - imagePath = 'Images/icons/style-01/compass.png' - menuItemsInitialValues = [ - { - action: 'Add Situation', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Stop': { - imagePath = 'Images/icons/style-01/pixel.png' - menuItemsInitialValues = [ - { - action: 'Add Phase', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Phase', - visible: false, - imagePathOn: 'Images/icons/style-01/placeholder.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Take Profit': { - imagePath = 'Images/icons/style-01/competition.png' - menuItemsInitialValues = [ - { - action: 'Add Phase', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Phase', - visible: false, - imagePathOn: 'Images/icons/style-01/placeholder.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }] - break - } - case 'Phase': { - imagePath = 'Images/icons/style-01/testing.png' - thisObject.codeEditor = newCodeEditor() - thisObject.codeEditor.isVisibleFunction = thisObject.isVisibleFunction - thisObject.codeEditor.initialize() - thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) - - imagePath = 'Images/icons/style-01/placeholder.png' - menuItemsInitialValues = [ - { - action: 'Edit Code', - actionFunction: thisObject.codeEditor.activate, - label: 'Edit Code', - visible: false, - imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 40 - }, - { - action: 'Add Situation', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 0 - }, - { - action: 'Delete Phase', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Delete This Phase', - visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -40 - }] - break - } - case 'Situation': { - imagePath = 'Images/icons/style-01/attractive.png' - menuItemsInitialValues = [ - { - action: 'Add Condition', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Add Condition', - visible: false, - imagePathOn: 'Images/icons/style-01/testing.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 20 - }, - { - action: 'Delete Situation', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Delete This Situation', - visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }] - break - } - case 'Condition': { - imagePath = 'Images/icons/style-01/testing.png' - thisObject.codeEditor = newCodeEditor() - thisObject.codeEditor.isVisibleFunction = thisObject.isVisibleFunction - thisObject.codeEditor.initialize() - thisObject.codeEditor.container.connectToParent(thisObject.container, false, false, true, true, false, false, false, false) - menuItemsInitialValues = [ - { - action: 'Edit Code', - actionFunction: thisObject.codeEditor.activate, - label: 'Edit Code', - visible: false, - imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 20 - }, - { - action: 'Delete Condition', - actionFunction: thisObject.payload.onMenuItemClick, - label: 'Delete This Condition', - visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: -20 - }] - break - } - default: { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + thisObject.payload.node.type) } - } - } - /* Initialize the Menu */ thisObject.menu = newCircularMenu() @@ -371,14 +85,14 @@ function newStrategyPart () { /* Load Part Image */ - if (imagePath !== undefined) { + if (thisObject.imagePath !== undefined) { image = new Image() image.onload = onImageLoad function onImageLoad () { image.canDrawIcon = true } - image.src = window.canvasApp.urlPrefix + imagePath + image.src = window.canvasApp.urlPrefix + thisObject.imagePath } selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 662c806b2..1a46ff08f 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -39,10 +39,309 @@ function newStrategyPartConstructor () { let strategyPart = newStrategyPart() strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea strategyPart.isVisibleFunction = canvas.floatingSpace.isThisPointVisible - strategyPart.initialize(payload) + let menuItemsInitialValues = getMenuItemsInitialValues(strategyPart, payload) + strategyPart.initialize(payload, menuItemsInitialValues) strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true, true) payload.uiObject = strategyPart + setFloatingObjectBasicProperties(floatingObject, payload) + + floatingLayer.addFloatingObject(floatingObject) + + return + } + + function getMenuItemsInitialValues (strategyPart, payload) { + let menuItemsInitialValues = [] + switch (payload.node.type) { + case 'Trading System': { + strategyPart.imagePath = 'Images/icons/style-01/analysis.png' + menuItemsInitialValues = [ + { + action: 'Reload Trading System', + actionFunction: payload.onMenuItemClick, + label: 'Reload', + visible: false, + imagePathOn: 'Images/icons/style-01/vector.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -60 + }, + { + action: 'Save Trading System', + actionFunction: payload.onMenuItemClick, + label: 'Save Changes', + workingLabel: 'Saving...', + workDoneLabel: 'Saved', + workFailedLabel: 'Not Saved', + visible: false, + imagePathOn: 'Images/icons/style-01/upload.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }, + { + action: 'New Strategy', + actionFunction: payload.onMenuItemClick, + label: 'New Strategy', + visible: false, + imagePathOn: 'Images/icons/style-01/quality.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 + }, + { + action: 'Open Settings', + actionFunction: payload.onMenuItemClick, + label: 'Settings', + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }] + break + } + case 'Strategy': { + strategyPart.imagePath = 'Images/icons/style-01/quality.png' + menuItemsInitialValues = [ + { + action: 'Delete Strategy', + actionFunction: payload.onMenuItemClick, + label: 'Delete This Strategy', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }, + { + action: 'Open Settings', + actionFunction: payload.onMenuItemClick, + label: 'Settings', + visible: false, + imagePathOn: 'Images/icons/style-01/tools.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 + }] + break + } + case 'Strategy Entry Event': { + strategyPart.imagePath = 'Images/icons/style-01/startup.png' + menuItemsInitialValues = [ + { + action: 'Add Situation', + actionFunction: payload.onMenuItemClick, + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }] + break + } + case 'Strategy Exit Event': { + strategyPart.imagePath = 'Images/icons/style-01/support.png' + menuItemsInitialValues = [ + { + action: 'Add Situation', + actionFunction: payload.onMenuItemClick, + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }] + break + } + case 'Trade Entry Event': { + strategyPart.imagePath = 'Images/icons/style-01/compass.png' + menuItemsInitialValues = [ + { + action: 'Add Situation', + actionFunction: payload.onMenuItemClick, + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }] + break + } + case 'Stop': { + strategyPart.imagePath = 'Images/icons/style-01/pixel.png' + menuItemsInitialValues = [ + { + action: 'Add Phase', + actionFunction: payload.onMenuItemClick, + label: 'Add Phase', + visible: false, + imagePathOn: 'Images/icons/style-01/placeholder.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }] + break + } + case 'Take Profit': { + strategyPart.imagePath = 'Images/icons/style-01/competition.png' + menuItemsInitialValues = [ + { + action: 'Add Phase', + actionFunction: payload.onMenuItemClick, + label: 'Add Phase', + visible: false, + imagePathOn: 'Images/icons/style-01/placeholder.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }] + break + } + case 'Phase': { + strategyPart.imagePath = 'Images/icons/style-01/placeholder.png' + strategyPart.codeEditor = newCodeEditor() + strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction + strategyPart.codeEditor.initialize() + strategyPart.codeEditor.container.connectToParent(strategyPart.container, false, false, true, true, false, false, false, false) + + menuItemsInitialValues = [ + { + action: 'Edit Code', + actionFunction: strategyPart.codeEditor.activate, + label: 'Edit Code', + visible: false, + imagePathOn: 'Images/icons/style-01/html.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 40 + }, + { + action: 'Add Situation', + actionFunction: payload.onMenuItemClick, + label: 'Add Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/attractive.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 0 + }, + { + action: 'Delete Phase', + actionFunction: payload.onMenuItemClick, + label: 'Delete This Phase', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -40 + }] + break + } + case 'Situation': { + strategyPart.imagePath = 'Images/icons/style-01/attractive.png' + menuItemsInitialValues = [ + { + action: 'Add Condition', + actionFunction: payload.onMenuItemClick, + label: 'Add Condition', + visible: false, + imagePathOn: 'Images/icons/style-01/testing.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 + }, + { + action: 'Delete Situation', + actionFunction: payload.onMenuItemClick, + label: 'Delete This Situation', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }] + break + } + case 'Condition': { + strategyPart.imagePath = 'Images/icons/style-01/testing.png' + strategyPart.codeEditor = newCodeEditor() + strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction + strategyPart.codeEditor.initialize() + strategyPart.codeEditor.container.connectToParent(strategyPart.container, false, false, true, true, false, false, false, false) + + menuItemsInitialValues = [ + { + action: 'Edit Code', + actionFunction: strategyPart.codeEditor.activate, + label: 'Edit Code', + visible: false, + imagePathOn: 'Images/icons/style-01/html.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 + }, + { + action: 'Delete Condition', + actionFunction: payload.onMenuItemClick, + label: 'Delete This Condition', + visible: false, + imagePathOn: 'Images/icons/style-01/trash.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }] + break + } + default: { + if (ERROR_LOG === true) { logger.write('[ERROR] getMenuItemsInitialValues -> Part Type not Recognized -> type = ' + payload.node.type) } + } + } + + return menuItemsInitialValues + } + + function setFloatingObjectBasicProperties (floatingObject, payload) { const FRICTION = 0.97 switch (payload.node.type) { @@ -163,10 +462,6 @@ function newStrategyPartConstructor () { } floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - - floatingLayer.addFloatingObject(floatingObject) - - return } function destroyStrategyPart (payload) { diff --git a/Globals.js b/Globals.js index 77d9ed28c..039d5dbcd 100644 --- a/Globals.js +++ b/Globals.js @@ -121,8 +121,8 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; -const LOGGED_IN_USER_LOCAL_STORAGE = "user" -const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "access_token" +const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" +const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "xaccess_token" const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. From 21c22bf4a577d4ffd89fec49745725bc33c28481 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 17:16:57 +0200 Subject: [PATCH 187/221] Pinning objects working --- FloatingSpace/CircularMenu.js | 7 +- FloatingSpace/CircularMenuItem.js | 85 +++++++++++++++--------- FloatingSpace/FloatingObject.js | 15 ++++- FloatingSpace/StrategyPartConstructor.js | 16 ++++- 4 files changed, 88 insertions(+), 35 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 97edde860..1de5f77b1 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -64,6 +64,12 @@ function newCircularMenu () { menuItem.currentRadius = menuItemInitialValue.currentRadius menuItem.angle = menuItemInitialValue.angle + if (menuItem.label === undefined) { + menuItem.type = 'Icon Only' + } else { + menuItem.type = 'Icon & Text' + } + menuItem.initialize(payload) menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true) menuItems.push(menuItem) @@ -124,4 +130,3 @@ function newCircularMenu () { } } } - diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 4aef13239..9140f1f4b 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -3,6 +3,7 @@ function newCircularMenuItem () { const MODULE_NAME = 'Circular Menu Iem' let thisObject = { + type: undefined, isDeployed: undefined, iconOn: undefined, iconOff: undefined, @@ -37,7 +38,7 @@ function newCircularMenuItem () { thisObject.container.frame.radius = 0 thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = 150 + thisObject.container.frame.width = 0 thisObject.container.frame.height = 30 let isMouseOver = false @@ -50,6 +51,8 @@ function newCircularMenuItem () { let defaultBackgroudColor = UI_COLOR.RED let backgroundColorToUse = UI_COLOR.RED let temporaryStatus = 0 + + const EXTRA_MOUSE_OVER_ICON_SIZE = 2 return thisObject function finalize () { @@ -87,6 +90,12 @@ function newCircularMenuItem () { selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + + if (thisObject.type === 'Icon & Text') { + thisObject.container.frame.width = 150 + } else { + thisObject.container.frame.width = 50 + } } function getContainer (point) { @@ -101,11 +110,13 @@ function newCircularMenuItem () { } function physics () { - if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) { + const INCREASE_STEP = 0.25 + + if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= INCREASE_STEP) { if (thisObject.currentRadius < thisObject.targetRadius) { - thisObject.currentRadius = thisObject.currentRadius + 0.5 + thisObject.currentRadius = thisObject.currentRadius + INCREASE_STEP } else { - thisObject.currentRadius = thisObject.currentRadius - 0.5 + thisObject.currentRadius = thisObject.currentRadius - INCREASE_STEP } } @@ -162,22 +173,24 @@ function newCircularMenuItem () { function drawBackground () { if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) { - let params = { - cornerRadius: 3, - lineWidth: 0.1, - container: thisObject.container, - borderColor: UI_COLOR.DARK, - backgroundColor: backgroundColorToUse, - castShadow: false - } + if (thisObject.type === 'Icon & Text') { + let params = { + cornerRadius: 3, + lineWidth: 0.1, + container: thisObject.container, + borderColor: UI_COLOR.DARK, + backgroundColor: backgroundColorToUse, + castShadow: false + } - if (isMouseOver === true) { - params.opacity = 1 - } else { - params.opacity = 0.8 - } + if (isMouseOver === true) { + params.opacity = 1 + } else { + params.opacity = 0.8 + } - roundedCornersBackground(params) + roundedCornersBackground(params) + } } } @@ -191,26 +204,36 @@ function newCircularMenuItem () { /* Menu Item */ + let iconSize + if (isMouseOver === true) { + iconSize = thisObject.currentRadius + EXTRA_MOUSE_OVER_ICON_SIZE + } else { + iconSize = thisObject.currentRadius + } + 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) + browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - iconSize, menuPosition.y - iconSize, iconSize * 2, iconSize * 2) /* Menu Label */ - let labelPoint - let fontSize = 10 - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - if (thisObject.currentRadius >= thisObject.targetRadius) { - labelPoint = { - x: menuPosition.x + thisObject.currentRadius + 10, - y: menuPosition.y + fontSize * FONT_ASPECT_RATIO - } + if (thisObject.type === 'Icon & Text') { + let labelPoint + let fontSize = 10 browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fillText(labelToPrint, labelPoint.x, labelPoint.y) + + if (thisObject.currentRadius >= thisObject.targetRadius) { + labelPoint = { + x: menuPosition.x + thisObject.currentRadius + 10, + y: menuPosition.y + fontSize * FONT_ASPECT_RATIO + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fillText(labelToPrint, labelPoint.x, labelPoint.y) + } } } } } + diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 5137e6d2d..fdaa69dbe 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -19,6 +19,8 @@ function newFloatingObject () { rawMass: 0, // This is the mass value without zoom. rawRadius: 0, // This is the radius of this floating object without zoom. targetRadius: 0, // This is the target radius of the floating object with zoom applied. It should be animated until reaching this value. + isPinned: undefined, + pinToggle: pinToggle, physics: physics, initializeMass: initializeMass, initializeRadius: initializeRadius, @@ -95,6 +97,15 @@ function newFloatingObject () { } } + function pinToggle () { + if (thisObject.isPinned !== true) { + thisObject.isPinned = true + thisObject.positionLocked = true + } else { + thisObject.isPinned = false + } + } + function physics () { thisObjectPhysics() thisObject.payload.uiObject.physics() @@ -171,7 +182,9 @@ function newFloatingObject () { thisObject.payload.uiObject.container.eventHandler.raiseEvent('onNotFocus') - thisObject.positionLocked = false + if (thisObject.isPinned !== true) { + thisObject.positionLocked = false + } thisObject.isOnFocus = false } } diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 1a46ff08f..d85905835 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -39,7 +39,7 @@ function newStrategyPartConstructor () { let strategyPart = newStrategyPart() strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea strategyPart.isVisibleFunction = canvas.floatingSpace.isThisPointVisible - let menuItemsInitialValues = getMenuItemsInitialValues(strategyPart, payload) + let menuItemsInitialValues = getMenuItemsInitialValues(strategyPart, floatingObject, payload) strategyPart.initialize(payload, menuItemsInitialValues) strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true, true) payload.uiObject = strategyPart @@ -51,12 +51,24 @@ function newStrategyPartConstructor () { return } - function getMenuItemsInitialValues (strategyPart, payload) { + function getMenuItemsInitialValues (strategyPart, floatingObject, payload) { let menuItemsInitialValues = [] switch (payload.node.type) { case 'Trading System': { strategyPart.imagePath = 'Images/icons/style-01/analysis.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/target.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -120 + }, { action: 'Reload Trading System', actionFunction: payload.onMenuItemClick, From c5e6d55fc0380d4efd5e79d23e13e8969d238910 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 18:08:35 +0200 Subject: [PATCH 188/221] Pinning implementation complete --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 40 ++++-- FloatingSpace/FloatingObject.js | 3 +- FloatingSpace/StrategyPartConstructor.js | 160 ++++++++++++++++++++--- 4 files changed, 172 insertions(+), 32 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 1de5f77b1..f2181a6b5 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -63,6 +63,7 @@ function newCircularMenu () { menuItem.targetRadius = menuItemInitialValue.label menuItem.currentRadius = menuItemInitialValue.currentRadius menuItem.angle = menuItemInitialValue.angle + menuItem.currentStatus = menuItemInitialValue.currentStatus if (menuItem.label === undefined) { menuItem.type = 'Icon Only' diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 9140f1f4b..53803a756 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -7,6 +7,7 @@ function newCircularMenuItem () { isDeployed: undefined, iconOn: undefined, iconOff: undefined, + currentIcon: undefined, action: undefined, actionFunction: undefined, label: undefined, @@ -64,6 +65,7 @@ function newCircularMenuItem () { thisObject.container = undefined thisObject.iconOn = undefined thisObject.iconOff = undefined + thisObject.currentIcon = undefined thisObject.payload = undefined thisObject.actionFunction = undefined } @@ -73,19 +75,26 @@ function newCircularMenuItem () { /* Load Menu Images */ thisObject.iconOn = new Image() - thisObject.iconOn.onload = onImageLoad + thisObject.iconOn.onload = onOnImageLoad - function onImageLoad () { - thisObject.iconOff = new Image() - thisObject.iconOff.onload = onImageLoad + function onOnImageLoad () { + if (thisObject.imagePathOff !== undefined) { + thisObject.iconOff = new Image() + thisObject.iconOff.onload = onOffImageLoad - function onImageLoad () { - thisObject.canDrawIcon = true + function onOffImageLoad () { + thisObject.canDrawIcon = true + } + thisObject.iconOff.src = window.canvasApp.urlPrefix + thisObject.imagePathOff } - thisObject.iconOff.src = window.canvasApp.urlPrefix + thisObject.imagePathOff } thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn - thisObject.icon = thisObject.iconOn // The default value is ON. + + if (thisObject.currentStatus === true) { + thisObject.icon = thisObject.iconOn + } else { + thisObject.icon = thisObject.iconOff + } selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) @@ -123,6 +132,8 @@ function newCircularMenuItem () { thisObject.container.frame.position.x = thisObject.container.frame.radius * 3 / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5 thisObject.container.frame.position.y = thisObject.container.frame.radius * 3 / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2 + /* Temporary Status impacts on the label to use and the background of that label */ + temporaryStatus-- if (temporaryStatus < 0) { temporaryStatus = 0 @@ -131,6 +142,14 @@ function newCircularMenuItem () { labelToPrint = thisObject.label backgroundColorToUse = defaultBackgroudColor } + + /* Current Status sets the icon to be used */ + + if (thisObject.currentStatus === true) { + thisObject.icon = thisObject.iconOn + } else { + thisObject.icon = thisObject.iconOff + } } function onMouseOver (point) { @@ -151,9 +170,9 @@ function newCircularMenuItem () { setTemporaryStatus(thisObject.workingLabel, UI_COLOR.GREY, 500) } - let result = await thisObject.actionFunction(thisObject.payload, thisObject.action) + thisObject.currentStatus = await thisObject.actionFunction(thisObject.payload, thisObject.action) - if (result === true) { + if (thisObject.currentStatus === true) { if (thisObject.workDoneLabel !== undefined) { setTemporaryStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250) } @@ -236,4 +255,3 @@ function newCircularMenuItem () { } } } - diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index fdaa69dbe..818d734da 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -19,7 +19,7 @@ function newFloatingObject () { rawMass: 0, // This is the mass value without zoom. rawRadius: 0, // This is the radius of this floating object without zoom. targetRadius: 0, // This is the target radius of the floating object with zoom applied. It should be animated until reaching this value. - isPinned: undefined, + isPinned: false, pinToggle: pinToggle, physics: physics, initializeMass: initializeMass, @@ -104,6 +104,7 @@ function newFloatingObject () { } else { thisObject.isPinned = false } + return thisObject.isPinned } function physics () { diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index d85905835..758c2892c 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -55,19 +55,22 @@ function newStrategyPartConstructor () { let menuItemsInitialValues = [] switch (payload.node.type) { case 'Trading System': { + floatingObject.isPinned = true + floatingObject.positionLocked = true strategyPart.imagePath = 'Images/icons/style-01/analysis.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', actionFunction: floatingObject.pinToggle, + currentStatus: true, label: undefined, visible: false, imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, - angle: -120 + angle: -135 }, { action: 'Reload Trading System', @@ -75,7 +78,7 @@ function newStrategyPartConstructor () { label: 'Reload', visible: false, imagePathOn: 'Images/icons/style-01/vector.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/vector.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -90,7 +93,7 @@ function newStrategyPartConstructor () { workFailedLabel: 'Not Saved', visible: false, imagePathOn: 'Images/icons/style-01/upload.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/upload.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -102,7 +105,7 @@ function newStrategyPartConstructor () { label: 'New Strategy', visible: false, imagePathOn: 'Images/icons/style-01/quality.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/quality.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -114,7 +117,7 @@ function newStrategyPartConstructor () { label: 'Settings', visible: false, imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/tools.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -125,13 +128,26 @@ function newStrategyPartConstructor () { case 'Strategy': { strategyPart.imagePath = 'Images/icons/style-01/quality.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { action: 'Delete Strategy', actionFunction: payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -143,7 +159,7 @@ function newStrategyPartConstructor () { label: 'Settings', visible: false, imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/tools.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -154,13 +170,26 @@ function newStrategyPartConstructor () { case 'Strategy Entry Event': { strategyPart.imagePath = 'Images/icons/style-01/startup.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { action: 'Add Situation', actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -171,13 +200,26 @@ function newStrategyPartConstructor () { case 'Strategy Exit Event': { strategyPart.imagePath = 'Images/icons/style-01/support.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { action: 'Add Situation', actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -188,13 +230,26 @@ function newStrategyPartConstructor () { case 'Trade Entry Event': { strategyPart.imagePath = 'Images/icons/style-01/compass.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { action: 'Add Situation', actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -205,13 +260,26 @@ function newStrategyPartConstructor () { case 'Stop': { strategyPart.imagePath = 'Images/icons/style-01/pixel.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { action: 'Add Phase', actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, imagePathOn: 'Images/icons/style-01/placeholder.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/placeholder.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -222,13 +290,26 @@ function newStrategyPartConstructor () { case 'Take Profit': { strategyPart.imagePath = 'Images/icons/style-01/competition.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { action: 'Add Phase', actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, imagePathOn: 'Images/icons/style-01/placeholder.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/placeholder.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -244,13 +325,26 @@ function newStrategyPartConstructor () { strategyPart.codeEditor.container.connectToParent(strategyPart.container, false, false, true, true, false, false, false, false) menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { action: 'Edit Code', actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/html.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -262,7 +356,7 @@ function newStrategyPartConstructor () { label: 'Add Situation', visible: false, imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -274,7 +368,7 @@ function newStrategyPartConstructor () { label: 'Delete This Phase', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -285,13 +379,26 @@ function newStrategyPartConstructor () { case 'Situation': { strategyPart.imagePath = 'Images/icons/style-01/attractive.png' menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { action: 'Add Condition', actionFunction: payload.onMenuItemClick, label: 'Add Condition', visible: false, imagePathOn: 'Images/icons/style-01/testing.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/testing.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -303,7 +410,7 @@ function newStrategyPartConstructor () { label: 'Delete This Situation', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -319,13 +426,26 @@ function newStrategyPartConstructor () { strategyPart.codeEditor.container.connectToParent(strategyPart.container, false, false, true, true, false, false, false, false) menuItemsInitialValues = [ + { + action: 'Pin / Unpin', + actionFunction: floatingObject.pinToggle, + currentStatus: false, + label: undefined, + visible: false, + imagePathOn: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/security.png', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -135 + }, { action: 'Edit Code', actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/html.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -337,7 +457,7 @@ function newStrategyPartConstructor () { label: 'Delete This Condition', visible: false, imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/target.png', + imagePathOff: 'Images/icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, From f72aeebc58e039aa3491cfbbfe4ca14cdb9a7f4f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 18:17:32 +0200 Subject: [PATCH 189/221] Develop ready --- Globals.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Globals.js b/Globals.js index 039d5dbcd..77d9ed28c 100644 --- a/Globals.js +++ b/Globals.js @@ -121,8 +121,8 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; -const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" -const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "xaccess_token" +const LOGGED_IN_USER_LOCAL_STORAGE = "user" +const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "access_token" const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. From d77f5094ca851792a794d89b235030b68c18599d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 13 May 2019 22:02:41 +0200 Subject: [PATCH 190/221] Capital on images path --- FloatingSpace/StrategyPartConstructor.js | 132 +++++++++++------------ Spaces/StrategySpace.js | 56 ++++++++++ 2 files changed, 122 insertions(+), 66 deletions(-) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 758c2892c..b3335ee6c 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -57,7 +57,7 @@ function newStrategyPartConstructor () { case 'Trading System': { floatingObject.isPinned = true floatingObject.positionLocked = true - strategyPart.imagePath = 'Images/icons/style-01/analysis.png' + strategyPart.imagePath = 'Images/Icons/style-01/analysis.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -65,8 +65,8 @@ function newStrategyPartConstructor () { currentStatus: true, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -77,8 +77,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Reload', visible: false, - imagePathOn: 'Images/icons/style-01/vector.png', - imagePathOff: 'Images/icons/style-01/vector.png', + imagePathOn: 'Images/Icons/style-01/vector.png', + imagePathOff: 'Images/Icons/style-01/vector.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -92,8 +92,8 @@ function newStrategyPartConstructor () { workDoneLabel: 'Saved', workFailedLabel: 'Not Saved', visible: false, - imagePathOn: 'Images/icons/style-01/upload.png', - imagePathOff: 'Images/icons/style-01/upload.png', + imagePathOn: 'Images/Icons/style-01/upload.png', + imagePathOff: 'Images/Icons/style-01/upload.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -104,8 +104,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'New Strategy', visible: false, - imagePathOn: 'Images/icons/style-01/quality.png', - imagePathOff: 'Images/icons/style-01/quality.png', + imagePathOn: 'Images/Icons/style-01/quality.png', + imagePathOff: 'Images/Icons/style-01/quality.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -116,8 +116,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/tools.png', + imagePathOn: 'Images/Icons/style-01/tools.png', + imagePathOff: 'Images/Icons/style-01/tools.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -126,7 +126,7 @@ function newStrategyPartConstructor () { break } case 'Strategy': { - strategyPart.imagePath = 'Images/icons/style-01/quality.png' + strategyPart.imagePath = 'Images/Icons/style-01/quality.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -134,8 +134,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -146,8 +146,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/trash.png', + imagePathOn: 'Images/Icons/style-01/trash.png', + imagePathOff: 'Images/Icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -158,8 +158,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'Images/icons/style-01/tools.png', - imagePathOff: 'Images/icons/style-01/tools.png', + imagePathOn: 'Images/Icons/style-01/tools.png', + imagePathOff: 'Images/Icons/style-01/tools.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -168,7 +168,7 @@ function newStrategyPartConstructor () { break } case 'Strategy Entry Event': { - strategyPart.imagePath = 'Images/icons/style-01/startup.png' + strategyPart.imagePath = 'Images/Icons/style-01/startup.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -176,8 +176,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -188,8 +188,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/attractive.png', + imagePathOn: 'Images/Icons/style-01/attractive.png', + imagePathOff: 'Images/Icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -198,7 +198,7 @@ function newStrategyPartConstructor () { break } case 'Strategy Exit Event': { - strategyPart.imagePath = 'Images/icons/style-01/support.png' + strategyPart.imagePath = 'Images/Icons/style-01/support.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -206,8 +206,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -218,8 +218,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/attractive.png', + imagePathOn: 'Images/Icons/style-01/attractive.png', + imagePathOff: 'Images/Icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -228,7 +228,7 @@ function newStrategyPartConstructor () { break } case 'Trade Entry Event': { - strategyPart.imagePath = 'Images/icons/style-01/compass.png' + strategyPart.imagePath = 'Images/Icons/style-01/compass.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -236,8 +236,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -248,8 +248,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/attractive.png', + imagePathOn: 'Images/Icons/style-01/attractive.png', + imagePathOff: 'Images/Icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -258,7 +258,7 @@ function newStrategyPartConstructor () { break } case 'Stop': { - strategyPart.imagePath = 'Images/icons/style-01/pixel.png' + strategyPart.imagePath = 'Images/Icons/style-01/pixel.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -266,8 +266,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -278,8 +278,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/icons/style-01/placeholder.png', - imagePathOff: 'Images/icons/style-01/placeholder.png', + imagePathOn: 'Images/Icons/style-01/placeholder.png', + imagePathOff: 'Images/Icons/style-01/placeholder.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -288,7 +288,7 @@ function newStrategyPartConstructor () { break } case 'Take Profit': { - strategyPart.imagePath = 'Images/icons/style-01/competition.png' + strategyPart.imagePath = 'Images/Icons/style-01/competition.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -296,8 +296,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -308,8 +308,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/icons/style-01/placeholder.png', - imagePathOff: 'Images/icons/style-01/placeholder.png', + imagePathOn: 'Images/Icons/style-01/placeholder.png', + imagePathOff: 'Images/Icons/style-01/placeholder.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -318,7 +318,7 @@ function newStrategyPartConstructor () { break } case 'Phase': { - strategyPart.imagePath = 'Images/icons/style-01/placeholder.png' + strategyPart.imagePath = 'Images/Icons/style-01/placeholder.png' strategyPart.codeEditor = newCodeEditor() strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction strategyPart.codeEditor.initialize() @@ -331,8 +331,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -343,8 +343,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/html.png', + imagePathOn: 'Images/Icons/style-01/html.png', + imagePathOff: 'Images/Icons/style-01/html.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -355,8 +355,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/icons/style-01/attractive.png', - imagePathOff: 'Images/icons/style-01/attractive.png', + imagePathOn: 'Images/Icons/style-01/attractive.png', + imagePathOff: 'Images/Icons/style-01/attractive.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -367,8 +367,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Phase', visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/trash.png', + imagePathOn: 'Images/Icons/style-01/trash.png', + imagePathOff: 'Images/Icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -377,7 +377,7 @@ function newStrategyPartConstructor () { break } case 'Situation': { - strategyPart.imagePath = 'Images/icons/style-01/attractive.png' + strategyPart.imagePath = 'Images/Icons/style-01/attractive.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -385,8 +385,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -397,8 +397,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Condition', visible: false, - imagePathOn: 'Images/icons/style-01/testing.png', - imagePathOff: 'Images/icons/style-01/testing.png', + imagePathOn: 'Images/Icons/style-01/testing.png', + imagePathOff: 'Images/Icons/style-01/testing.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -409,8 +409,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Situation', visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/trash.png', + imagePathOn: 'Images/Icons/style-01/trash.png', + imagePathOff: 'Images/Icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -419,7 +419,7 @@ function newStrategyPartConstructor () { break } case 'Condition': { - strategyPart.imagePath = 'Images/icons/style-01/testing.png' + strategyPart.imagePath = 'Images/Icons/style-01/testing.png' strategyPart.codeEditor = newCodeEditor() strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction strategyPart.codeEditor.initialize() @@ -432,8 +432,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/icons/style-01/target.png', - imagePathOff: 'Images/icons/style-01/security.png', + imagePathOn: 'Images/Icons/style-01/target.png', + imagePathOff: 'Images/Icons/style-01/security.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -444,8 +444,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'Images/icons/style-01/html.png', - imagePathOff: 'Images/icons/style-01/html.png', + imagePathOn: 'Images/Icons/style-01/html.png', + imagePathOff: 'Images/Icons/style-01/html.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -456,8 +456,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Condition', visible: false, - imagePathOn: 'Images/icons/style-01/trash.png', - imagePathOff: 'Images/icons/style-01/trash.png', + imagePathOn: 'Images/Icons/style-01/trash.png', + imagePathOff: 'Images/Icons/style-01/trash.png', rawRadius: 8, targetRadius: 0, currentRadius: 0, diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index c0a9dcad7..8b666a730 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -32,6 +32,62 @@ function newStrategySpace () { // thisObject.sidePanel.areas.push(thisObject.workplace) } + function loadIconCollection () { + const iconsNames = [ + 'analysis', + 'analysis-1', + 'approve', + 'attach', + 'attractive', + 'brainstorming', + 'broken-link', + 'chat', + 'chronometer', + 'compass', + 'competition', + 'content', + 'design-tool', + 'grid', + 'headphones', + 'html', + 'image', + 'layout', + 'loading', + 'login', + 'pantone', + 'paper-plane', + 'photo-camera', + 'piggy-bank', + 'pipette', + 'pixel', + 'placeholder', + 'planning', + 'promotion', + 'pyramid', + 'quality', + 'responsive', + 'schedule', + 'search', + 'security', + 'settings', + 'sitemap', + 'startup', + 'support', + 'tap', + 'target', + 'targeting', + 'task', + 'testing', + 'text', + 'timeline', + 'tools', + 'trash', + 'upload', + 'vector', + 'video-player' + ] + } + function makeVisible () { if (thisObject.workplace.isDeployed !== true) { thisObject.workplace.deploydTradingSystem() From 59dd490c3f0f363ab4f5fa4d5bb89133f5b174b1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 00:21:36 +0200 Subject: [PATCH 191/221] Adjusted code editor to live inside the master app --- FloatingSpace/CodeEditor.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index edd2cfd74..0d3b28d1d 100644 --- a/FloatingSpace/CodeEditor.js +++ b/FloatingSpace/CodeEditor.js @@ -92,7 +92,7 @@ function newCodeEditor () { 'font-size: 12px;' + 'background-color: rgb(204, 88, 53);' + 'color:rgb(255, 255, 255);' + - 'width: ' + thisObject.container.frame.width + 'px;' + + 'width: ' + thisObject.container.frame.width + 'px;' + 'height: ' + thisObject.container.frame.height + 'px' textArea.style.display = 'block' textArea.focus() @@ -128,12 +128,12 @@ function newCodeEditor () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - thisObject.container.frame.width = thisObject.container.frame.radius * 2.2 + thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 thisObject.container.frame.height = thisObject.container.frame.radius * 1 let textAreaPosition = { x: 0 - thisObject.container.frame.width / 2, - y: 0 + y: 0 + thisObject.container.frame.height * 2 / 7 } textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition) @@ -148,7 +148,7 @@ function newCodeEditor () { } if (thisObject.visible === true) { let textAreaDiv = document.getElementById('textAreaDiv') - textAreaDiv.style = 'position:absolute; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' + textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; ' } } From 574897b6a15e1374c0da82db0bac52bdfb666152 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 09:50:37 +0200 Subject: [PATCH 192/221] Image by part type implemented --- FloatingSpace/StrategyPart.js | 22 +++------- FloatingSpace/StrategyPartConstructor.js | 10 ----- Globals.js | 4 +- Spaces/StrategySpace.js | 52 +++++++++++++++++++++--- 4 files changed, 55 insertions(+), 33 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 3bd8d5f24..b662e24dc 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -34,8 +34,7 @@ function newStrategyPart () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - let image - let imagePath + let icon let selfFocusEventSubscriptionId let selfNotFocuskEventSubscriptionId @@ -63,8 +62,7 @@ function newStrategyPart () { thisObject.codeEditor = undefined } - image = undefined - imagePath = undefined + icon = undefined } function initialize (payload, menuItemsInitialValues) { @@ -85,15 +83,7 @@ function newStrategyPart () { /* Load Part Image */ - if (thisObject.imagePath !== undefined) { - image = new Image() - image.onload = onImageLoad - - function onImageLoad () { - image.canDrawIcon = true - } - image.src = window.canvasApp.urlPrefix + thisObject.imagePath - } + icon = canvas.strategySpace.iconByPartType.get(payload.node.type) selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) @@ -360,10 +350,10 @@ function newStrategyPart () { /* Image */ - if (image !== undefined) { - if (image.canDrawIcon === true) { + if (icon !== undefined) { + if (icon.canDrawIcon === true) { browserCanvasContext.drawImage( - image, position.x - thisObject.payload.floatingObject.currentImageSize / 2, + icon, position.x - thisObject.payload.floatingObject.currentImageSize / 2, position.y - thisObject.payload.floatingObject.currentImageSize / 2, thisObject.payload.floatingObject.currentImageSize, thisObject.payload.floatingObject.currentImageSize) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index b3335ee6c..eb8fc1ce7 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -57,7 +57,6 @@ function newStrategyPartConstructor () { case 'Trading System': { floatingObject.isPinned = true floatingObject.positionLocked = true - strategyPart.imagePath = 'Images/Icons/style-01/analysis.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -126,7 +125,6 @@ function newStrategyPartConstructor () { break } case 'Strategy': { - strategyPart.imagePath = 'Images/Icons/style-01/quality.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -168,7 +166,6 @@ function newStrategyPartConstructor () { break } case 'Strategy Entry Event': { - strategyPart.imagePath = 'Images/Icons/style-01/startup.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -198,7 +195,6 @@ function newStrategyPartConstructor () { break } case 'Strategy Exit Event': { - strategyPart.imagePath = 'Images/Icons/style-01/support.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -228,7 +224,6 @@ function newStrategyPartConstructor () { break } case 'Trade Entry Event': { - strategyPart.imagePath = 'Images/Icons/style-01/compass.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -258,7 +253,6 @@ function newStrategyPartConstructor () { break } case 'Stop': { - strategyPart.imagePath = 'Images/Icons/style-01/pixel.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -288,7 +282,6 @@ function newStrategyPartConstructor () { break } case 'Take Profit': { - strategyPart.imagePath = 'Images/Icons/style-01/competition.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -318,7 +311,6 @@ function newStrategyPartConstructor () { break } case 'Phase': { - strategyPart.imagePath = 'Images/Icons/style-01/placeholder.png' strategyPart.codeEditor = newCodeEditor() strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction strategyPart.codeEditor.initialize() @@ -377,7 +369,6 @@ function newStrategyPartConstructor () { break } case 'Situation': { - strategyPart.imagePath = 'Images/Icons/style-01/attractive.png' menuItemsInitialValues = [ { action: 'Pin / Unpin', @@ -419,7 +410,6 @@ function newStrategyPartConstructor () { break } case 'Condition': { - strategyPart.imagePath = 'Images/Icons/style-01/testing.png' strategyPart.codeEditor = newCodeEditor() strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction strategyPart.codeEditor.initialize() diff --git a/Globals.js b/Globals.js index 77d9ed28c..039d5dbcd 100644 --- a/Globals.js +++ b/Globals.js @@ -121,8 +121,8 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; -const LOGGED_IN_USER_LOCAL_STORAGE = "user" -const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "access_token" +const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" +const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "xaccess_token" const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index 8b666a730..e4bfcca0c 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -5,6 +5,8 @@ function newStrategySpace () { sidePanel: undefined, workplace: undefined, container: undefined, + iconCollection: undefined, + iconByPartType: undefined, draw: draw, getContainer: getContainer, makeVisible: makeVisible, @@ -18,18 +20,40 @@ function newStrategySpace () { container.isDraggeable = false + thisObject.iconCollection = new Map() + thisObject.iconByPartType = new Map() + return thisObject async function initialize () { - // thisObject.sidePanel = newSidePanel() - // thisObject.sidePanel.initialize() - thisObject.workplace = newWorkspace() - // thisObject.workplace.container.connectToParent(thisObject.sidePanel.container, true, true) + thisObject.workplace.initialize() await thisObject.workplace.loadFromStrategyzer() - // thisObject.sidePanel.areas.push(thisObject.workplace) + loadIconCollection() + buildIconByPartTypeMap() + } + + function buildIconByPartTypeMap () { + const relationshipArray = [ + ['Trading System', 'analysis'], + ['Strategy', 'quality'], + ['Strategy Entry Event', 'startup'], + ['Strategy Exit Event', 'support'], + ['Trade Entry Event', 'compass'], + ['Stop', 'pixel'], + ['Take Profit', 'competition'], + ['Phase', 'placeholder'], + ['Situation', 'attractive'], + ['Condition', 'testing'] + ] + + for (let i = 0; i < relationshipArray.length; i++) { + let record = relationshipArray[i] + let icon = thisObject.iconCollection.get(record[1]) + thisObject.iconByPartType.set(record[0], icon) + } } function loadIconCollection () { @@ -86,6 +110,24 @@ function newStrategySpace () { 'vector', 'video-player' ] + + for (let i = 0; i < iconsNames.length; i++) { + let name = iconsNames[i] + loadImage(name) + } + + function loadImage (name) { + const PATH = 'Images/Icons/style-01/' + let image = new Image() + image.onload = onImageLoad + image.fileName = name + + function onImageLoad () { + image.canDrawIcon = true + } + image.src = window.canvasApp.urlPrefix + PATH + name + '.png' + thisObject.iconCollection.set(name, image) + } } function makeVisible () { From a01b7f645d8dd6eea5309b837b82caab4447ca54 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:04:56 +0200 Subject: [PATCH 193/221] Menu Item Icons not loadeed locally --- FloatingSpace/CircularMenuItem.js | 17 +--- FloatingSpace/StrategyPartConstructor.js | 112 +++++++++++------------ 2 files changed, 58 insertions(+), 71 deletions(-) diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 53803a756..af26ef4d2 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -74,21 +74,8 @@ function newCircularMenuItem () { thisObject.payload = pPayload /* Load Menu Images */ - thisObject.iconOn = new Image() - thisObject.iconOn.onload = onOnImageLoad - - function onOnImageLoad () { - if (thisObject.imagePathOff !== undefined) { - thisObject.iconOff = new Image() - thisObject.iconOff.onload = onOffImageLoad - - function onOffImageLoad () { - thisObject.canDrawIcon = true - } - thisObject.iconOff.src = window.canvasApp.urlPrefix + thisObject.imagePathOff - } - } - thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn + thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.imagePathOn) + thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.imagePathOff) if (thisObject.currentStatus === true) { thisObject.icon = thisObject.iconOn diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index eb8fc1ce7..438b19085 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -64,8 +64,8 @@ function newStrategyPartConstructor () { currentStatus: true, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -76,8 +76,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Reload', visible: false, - imagePathOn: 'Images/Icons/style-01/vector.png', - imagePathOff: 'Images/Icons/style-01/vector.png', + imagePathOn: 'vector', + imagePathOff: 'vector', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -91,8 +91,8 @@ function newStrategyPartConstructor () { workDoneLabel: 'Saved', workFailedLabel: 'Not Saved', visible: false, - imagePathOn: 'Images/Icons/style-01/upload.png', - imagePathOff: 'Images/Icons/style-01/upload.png', + imagePathOn: 'upload', + imagePathOff: 'upload', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -103,8 +103,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'New Strategy', visible: false, - imagePathOn: 'Images/Icons/style-01/quality.png', - imagePathOff: 'Images/Icons/style-01/quality.png', + imagePathOn: 'quality', + imagePathOff: 'quality', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -115,8 +115,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'Images/Icons/style-01/tools.png', - imagePathOff: 'Images/Icons/style-01/tools.png', + imagePathOn: 'tools', + imagePathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -132,8 +132,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -144,8 +144,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -156,8 +156,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'Images/Icons/style-01/tools.png', - imagePathOff: 'Images/Icons/style-01/tools.png', + imagePathOn: 'tools', + imagePathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -173,8 +173,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -185,8 +185,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -202,8 +202,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -214,8 +214,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -231,8 +231,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -243,8 +243,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -260,8 +260,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -272,8 +272,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/Icons/style-01/placeholder.png', - imagePathOff: 'Images/Icons/style-01/placeholder.png', + imagePathOn: 'placeholder', + imagePathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -289,8 +289,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -301,8 +301,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'Images/Icons/style-01/placeholder.png', - imagePathOff: 'Images/Icons/style-01/placeholder.png', + imagePathOn: 'placeholder', + imagePathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -323,8 +323,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -335,8 +335,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'Images/Icons/style-01/html.png', - imagePathOff: 'Images/Icons/style-01/html.png', + imagePathOn: 'html', + imagePathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -347,8 +347,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/attractive.png', - imagePathOff: 'Images/Icons/style-01/attractive.png', + imagePathOn: 'attractive', + imagePathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -359,8 +359,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Phase', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -376,8 +376,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -388,8 +388,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Condition', visible: false, - imagePathOn: 'Images/Icons/style-01/testing.png', - imagePathOff: 'Images/Icons/style-01/testing.png', + imagePathOn: 'testing', + imagePathOff: 'testing', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -400,8 +400,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Situation', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -422,8 +422,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'Images/Icons/style-01/target.png', - imagePathOff: 'Images/Icons/style-01/security.png', + imagePathOn: 'target', + imagePathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -434,8 +434,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'Images/Icons/style-01/html.png', - imagePathOff: 'Images/Icons/style-01/html.png', + imagePathOn: 'html', + imagePathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -446,8 +446,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Condition', visible: false, - imagePathOn: 'Images/Icons/style-01/trash.png', - imagePathOff: 'Images/Icons/style-01/trash.png', + imagePathOn: 'trash', + imagePathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, From 6db14dfa1fe7af3d725f48d879a2fc2f6f9b325f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:26:29 +0200 Subject: [PATCH 194/221] Refactoring for icon --- FloatingSpace/CircularMenu.js | 4 +- FloatingSpace/CircularMenuItem.js | 10 +- FloatingSpace/ProfileBall.js | 20 ++-- FloatingSpace/StrategyPartConstructor.js | 112 +++++++++++------------ 4 files changed, 73 insertions(+), 73 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index f2181a6b5..2a5e3baf2 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -57,8 +57,8 @@ function newCircularMenu () { menuItem.workDoneLabel = menuItemInitialValue.workDoneLabel menuItem.workFailedLabel = menuItemInitialValue.workFailedLabel menuItem.visible = menuItemInitialValue.visible - menuItem.imagePathOn = menuItemInitialValue.imagePathOn - menuItem.imagePathOff = menuItemInitialValue.imagePathOff + menuItem.iconPathOn = menuItemInitialValue.iconPathOn + menuItem.iconPathOff = menuItemInitialValue.iconPathOff menuItem.rawRadius = menuItemInitialValue.rawRadius menuItem.targetRadius = menuItemInitialValue.label menuItem.currentRadius = menuItemInitialValue.currentRadius diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index af26ef4d2..496a4d491 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -15,8 +15,8 @@ function newCircularMenuItem () { workDoneLabel: undefined, workFailedLabel: undefined, visible: false, - imagePathOn: undefined, - imagePathOff: undefined, + iconPathOn: undefined, + iconPathOff: undefined, rawRadius: undefined, targetRadius: undefined, currentRadius: undefined, @@ -74,8 +74,8 @@ function newCircularMenuItem () { thisObject.payload = pPayload /* Load Menu Images */ - thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.imagePathOn) - thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.imagePathOff) + thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.iconPathOn) + thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.iconPathOff) if (thisObject.currentStatus === true) { thisObject.icon = thisObject.iconOn @@ -217,7 +217,7 @@ function newCircularMenuItem () { iconSize = thisObject.currentRadius } - if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) { + if (thisObject.icon.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) { browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - iconSize, menuPosition.y - iconSize, iconSize * 2, iconSize * 2) /* Menu Label */ diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index c940bfbd1..18b853346 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -24,8 +24,8 @@ function newProfileBall () { let ballStringMenu = [ { visible: false, - imagePathOn: 'Images/menu.icon.on.1.gif', - imagePathOff: 'Images/menu.icon.off.1.gif', + iconPathOn: 'Images/menu.icon.on.1.gif', + iconPathOff: 'Images/menu.icon.off.1.gif', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -33,8 +33,8 @@ function newProfileBall () { }/*, { visible: false, - imagePathOn: "Images/menu.icon.on.2.gif", - imagePathOff: "Images/menu.icon.off.2.gif", + iconPathOn: "Images/menu.icon.on.2.gif", + iconPathOff: "Images/menu.icon.off.2.gif", rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -42,8 +42,8 @@ function newProfileBall () { }, { visible: false, - imagePathOn: "Images/menu.icon.on.3.gif", - imagePathOff: "Images/menu.icon.off.3.gif", + iconPathOn: "Images/menu.icon.on.3.gif", + iconPathOff: "Images/menu.icon.off.3.gif", rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -51,8 +51,8 @@ function newProfileBall () { }, { visible: false, - imagePathOn: "Images/menu.icon.on.4.gif", - imagePathOff: "Images/menu.icon.off.4.gif", + iconPathOn: "Images/menu.icon.on.4.gif", + iconPathOff: "Images/menu.icon.off.4.gif", rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -73,9 +73,9 @@ function newProfileBall () { function onImageLoad () { menuItem.canDrawIcon = true } - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff + menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.iconPathOff } - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn + menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.iconPathOn menuItem.icon = menuItem.iconOn // The default value is ON. } diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 438b19085..1fc87a391 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -64,8 +64,8 @@ function newStrategyPartConstructor () { currentStatus: true, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -76,8 +76,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Reload', visible: false, - imagePathOn: 'vector', - imagePathOff: 'vector', + iconPathOn: 'vector', + iconPathOff: 'vector', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -91,8 +91,8 @@ function newStrategyPartConstructor () { workDoneLabel: 'Saved', workFailedLabel: 'Not Saved', visible: false, - imagePathOn: 'upload', - imagePathOff: 'upload', + iconPathOn: 'upload', + iconPathOff: 'upload', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -103,8 +103,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'New Strategy', visible: false, - imagePathOn: 'quality', - imagePathOff: 'quality', + iconPathOn: 'quality', + iconPathOff: 'quality', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -115,8 +115,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'tools', - imagePathOff: 'tools', + iconPathOn: 'tools', + iconPathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -132,8 +132,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -144,8 +144,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -156,8 +156,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Settings', visible: false, - imagePathOn: 'tools', - imagePathOff: 'tools', + iconPathOn: 'tools', + iconPathOff: 'tools', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -173,8 +173,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -185,8 +185,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -202,8 +202,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -214,8 +214,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -231,8 +231,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -243,8 +243,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -260,8 +260,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -272,8 +272,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'placeholder', - imagePathOff: 'placeholder', + iconPathOn: 'placeholder', + iconPathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -289,8 +289,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -301,8 +301,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Phase', visible: false, - imagePathOn: 'placeholder', - imagePathOff: 'placeholder', + iconPathOn: 'placeholder', + iconPathOff: 'placeholder', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -323,8 +323,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -335,8 +335,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'html', - imagePathOff: 'html', + iconPathOn: 'html', + iconPathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -347,8 +347,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Situation', visible: false, - imagePathOn: 'attractive', - imagePathOff: 'attractive', + iconPathOn: 'attractive', + iconPathOff: 'attractive', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -359,8 +359,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Phase', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -376,8 +376,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -388,8 +388,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Add Condition', visible: false, - imagePathOn: 'testing', - imagePathOff: 'testing', + iconPathOn: 'testing', + iconPathOff: 'testing', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -400,8 +400,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Situation', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -422,8 +422,8 @@ function newStrategyPartConstructor () { currentStatus: false, label: undefined, visible: false, - imagePathOn: 'target', - imagePathOff: 'security', + iconPathOn: 'target', + iconPathOff: 'security', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -434,8 +434,8 @@ function newStrategyPartConstructor () { actionFunction: strategyPart.codeEditor.activate, label: 'Edit Code', visible: false, - imagePathOn: 'html', - imagePathOff: 'html', + iconPathOn: 'html', + iconPathOff: 'html', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -446,8 +446,8 @@ function newStrategyPartConstructor () { actionFunction: payload.onMenuItemClick, label: 'Delete This Condition', visible: false, - imagePathOn: 'trash', - imagePathOff: 'trash', + iconPathOn: 'trash', + iconPathOff: 'trash', rawRadius: 8, targetRadius: 0, currentRadius: 0, From 4f469bc28faff6462c17f2a5d1757a1fd7977a3c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:28:49 +0200 Subject: [PATCH 195/221] Fine tuning text position --- FloatingSpace/StrategyPart.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index b662e24dc..9da4db4c8 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -258,7 +258,7 @@ function newStrategyPart () { } labelPoint = { - x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5, y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15 } @@ -361,3 +361,4 @@ function newStrategyPart () { } } } + From f045312dcb0b6f6434f04e4cfab3b4cf5c5e1eca Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:46:12 +0200 Subject: [PATCH 196/221] Menu Item Ready to get the icons dinamically --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 23 ++++++++++++++--------- FloatingSpace/StrategyPartConstructor.js | 8 ++++++++ 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 2a5e3baf2..d79c9c099 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -64,6 +64,7 @@ function newCircularMenu () { menuItem.currentRadius = menuItemInitialValue.currentRadius menuItem.angle = menuItemInitialValue.angle menuItem.currentStatus = menuItemInitialValue.currentStatus + menuItem.relatedStrategyPart = menuItemInitialValue.relatedStrategyPart if (menuItem.label === undefined) { menuItem.type = 'Icon Only' diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 496a4d491..30553ac7a 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -23,6 +23,7 @@ function newCircularMenuItem () { angle: undefined, container: undefined, payload: undefined, + relatedStrategyPart: undefined, physics: physics, drawBackground: drawBackground, drawForeground: drawForeground, @@ -72,16 +73,8 @@ function newCircularMenuItem () { function initialize (pPayload) { thisObject.payload = pPayload - /* Load Menu Images */ - thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.iconPathOn) - thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.iconPathOff) - - if (thisObject.currentStatus === true) { - thisObject.icon = thisObject.iconOn - } else { - thisObject.icon = thisObject.iconOff - } + iconPhysics() selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) @@ -130,6 +123,18 @@ function newCircularMenuItem () { backgroundColorToUse = defaultBackgroudColor } + iconPhysics() + } + + function iconPhysics () { + if (thisObject.relatedStrategyPart !== undefined) { + thisObject.iconOn = canvas.strategySpace.iconByPartType.get(thisObject.relatedStrategyPart) + thisObject.iconOff = canvas.strategySpace.iconByPartType.get(thisObject.relatedStrategyPart) + } else { + thisObject.iconOn = canvas.strategySpace.iconCollection.get(thisObject.iconPathOn) + thisObject.iconOff = canvas.strategySpace.iconCollection.get(thisObject.iconPathOff) + } + /* Current Status sets the icon to be used */ if (thisObject.currentStatus === true) { diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 1fc87a391..a4715cd3b 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -105,6 +105,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'quality', iconPathOff: 'quality', + relatedStrategyPart: 'Strategy', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -187,6 +188,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -216,6 +218,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -245,6 +248,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -274,6 +278,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'placeholder', iconPathOff: 'placeholder', + relatedStrategyPart: 'Phase', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -303,6 +308,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'placeholder', iconPathOff: 'placeholder', + relatedStrategyPart: 'Phase', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -349,6 +355,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'attractive', iconPathOff: 'attractive', + relatedStrategyPart: 'Situation', rawRadius: 8, targetRadius: 0, currentRadius: 0, @@ -390,6 +397,7 @@ function newStrategyPartConstructor () { visible: false, iconPathOn: 'testing', iconPathOff: 'testing', + relatedStrategyPart: 'Condition', rawRadius: 8, targetRadius: 0, currentRadius: 0, From d92455804f7e5d4d2d6b7fc57c98829465828513 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 12:48:14 +0200 Subject: [PATCH 197/221] strategy part also with iconPhysics --- FloatingSpace/StrategyPart.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 9da4db4c8..3d07e5eda 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -83,7 +83,7 @@ function newStrategyPart () { /* Load Part Image */ - icon = canvas.strategySpace.iconByPartType.get(payload.node.type) + iconPhysics() selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus) selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus) @@ -126,6 +126,12 @@ function newStrategyPart () { thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y } + + iconPhysics() + } + + function iconPhysics () { + icon = canvas.strategySpace.iconByPartType.get(payload.node.type) } function onFocus () { @@ -361,4 +367,3 @@ function newStrategyPart () { } } } - From 011c870ed67ef601aa488472f73abf50d66fd8bf Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 16:14:25 +0200 Subject: [PATCH 198/221] Refactoring to Cockpit Space --- Canvas.js | 65 ++++++---------------- ChartsSpace/ViewPort.js | 4 +- {BottomSpace => CockpitSpace}/UIControl.js | 0 Globals.js | 4 +- Project.njsproj | 10 ++-- Scales/TimePeriodScale.js | 2 +- Spaces/ChartSpace.js | 11 ++-- Spaces/{BottomSpace.js => CockpitSpace.js} | 15 +++-- Spaces/FloatingSpace.js | 6 +- TopSpace/CurrentEvent.js | 2 +- TopSpace/EndUser.js | 2 +- TopSpace/Login.js | 2 +- 12 files changed, 44 insertions(+), 79 deletions(-) rename {BottomSpace => CockpitSpace}/UIControl.js (100%) rename Spaces/{BottomSpace.js => CockpitSpace.js} (96%) diff --git a/Canvas.js b/Canvas.js index 970b151fb..3bc45b757 100644 --- a/Canvas.js +++ b/Canvas.js @@ -36,6 +36,7 @@ function newCanvas () { chartSpace: undefined, floatingSpace: undefined, panelsSpace: undefined, + cockpitSpace: undefined, bottomSpace: undefined, strategySpace: undefined, animation: undefined, @@ -49,41 +50,6 @@ function newCanvas () { let lastContainerMouseOver return thisObject -/* - The canvas object represents a layer on top of the browser canvas object. - - 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 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. - - Canvas - | - | - ---> topSpace - | - | - ---> chartSpace - | - | - ---> flaotingSpace - | - | - ---> panelsSpace - | - | - ---> bottomSpace - | - | - ---> strategySpace -*/ - function finalize () { try { if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } @@ -128,8 +94,8 @@ function newCanvas () { thisObject.strategySpace = newStrategySpace() await thisObject.strategySpace.initialize() - thisObject.bottomSpace = newBottomSpace() - thisObject.bottomSpace.initialize() + thisObject.cockpitSpace = newCockpitSpace() + thisObject.cockpitSpace.initialize() thisObject.panelsSpace = newPanelsSpace() thisObject.panelsSpace.initialize() @@ -140,6 +106,8 @@ function newCanvas () { thisObject.chartSpace = newChartSpace() thisObject.chartSpace.initialize(onCharSpaceInitialized) + thisObject.bottomSpace = thisObject.cockpitSpace + function onCharSpaceInitialized (err) { try { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCharSpaceInitialized -> Entering function.') } @@ -174,8 +142,8 @@ function newCanvas () { animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded) + animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw, onFunctionAdded) + animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics, onFunctionAdded) animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) @@ -334,9 +302,9 @@ function newCanvas () { return } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - container = thisObject.bottomSpace.getContainer(point) + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.isDraggeable === true) { containerBeingDragged = container @@ -425,9 +393,9 @@ function newCanvas () { return } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - container = thisObject.bottomSpace.getContainer(point) + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.isClickeable === true) { container.eventHandler.raiseEvent('onMouseClick', point) @@ -583,10 +551,10 @@ function newCanvas () { } } - /* We check if the mouse is over an element of the Bottom Space / */ + /* We check if the mouse is over an element of the CockpitSpace / */ - if (thisObject.bottomSpace !== undefined) { - container = thisObject.bottomSpace.getContainer(point) + if (thisObject.cockpitSpace !== undefined) { + container = thisObject.cockpitSpace.getContainer(point) if (container !== undefined && container.detectMouseOver === true) { containerFound() @@ -665,9 +633,9 @@ function newCanvas () { return false // This instructs the browser not to take the event and scroll the page. } - /* We try the Bottom Space. */ + /* We try the CockpitSpace. */ - container = canvas.bottomSpace.getContainer({ x: point.x, y: point.y }) + container = canvas.cockpitSpace.getContainer({ x: point.x, y: point.y }) if (container !== undefined && container.isWheelable === true) { container.eventHandler.raiseEvent('onMouseWheel', event) @@ -760,4 +728,3 @@ function newCanvas () { } } } - diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js index e3d4ee247..264c5b07b 100644 --- a/ChartsSpace/ViewPort.js +++ b/ChartsSpace/ViewPort.js @@ -12,7 +12,7 @@ function newViewPort () { let ANIMATION_INCREMENT = 0.25 let TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - let BOTTOM_MARGIN = 20 + BOTTOM_SPACE_HEIGHT + let BOTTOM_MARGIN = 20 + COCKPIT_SPACE_HEIGHT let LEFT_MARGIN = 50 let RIGHT_MARGIN = 50 let MARGINS = { @@ -84,7 +84,7 @@ function newViewPort () { function resize () { TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - BOTTOM_MARGIN = 20 + browserCanvas.height - BOTTOM_SPACE_POSITION + BOTTOM_MARGIN = 20 + browserCanvas.height - COCKPIT_SPACE_POSITION LEFT_MARGIN = 50 RIGHT_MARGIN = 50 MARGINS = { diff --git a/BottomSpace/UIControl.js b/CockpitSpace/UIControl.js similarity index 100% rename from BottomSpace/UIControl.js rename to CockpitSpace/UIControl.js diff --git a/Globals.js b/Globals.js index 039d5dbcd..3261d18fd 100644 --- a/Globals.js +++ b/Globals.js @@ -163,10 +163,10 @@ const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0); const MAX_PLOTABLE_DATE = maxDate; const TOP_SPACE_HEIGHT = 5; -const BOTTOM_SPACE_HEIGHT = 40; +const COCKPIT_SPACE_HEIGHT = 40; const BREAKPOINT_HEIGHT = 15; const SIDE_PANEL_WIDTH = 450 -let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT +let COCKPIT_SPACE_POSITION = browserCanvas.height - COCKPIT_SPACE_HEIGHT const PRODUCT_CARD_STATUS = { ON: 'on', diff --git a/Project.njsproj b/Project.njsproj index 4634a91ad..7cc00eb05 100644 --- a/Project.njsproj +++ b/Project.njsproj @@ -32,13 +32,13 @@ - + Code Code - + Code @@ -85,7 +85,7 @@ Code - + Code @@ -112,7 +112,7 @@ Code - + Code @@ -177,7 +177,7 @@ - + diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index ab3712520..55ba9a6b8 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -187,7 +187,7 @@ to be visible at the top of the viewPort. */ /* Lets start the drawing. */ - let displacement = viewPort.margins.BOTTOM - BOTTOM_SPACE_HEIGHT + let displacement = viewPort.margins.BOTTOM - COCKPIT_SPACE_HEIGHT /* browserCanvasContext.beginPath() diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 39b9ac34b..2af37d1d0 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -117,8 +117,8 @@ function newChartSpace () { returnPoint.x = 0 } - if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2 + if (point.y > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) { + returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2 } if (point.y < 0) { @@ -137,7 +137,7 @@ function newChartSpace () { return false } - if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) { + if (point.y > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) { return false } @@ -149,7 +149,7 @@ function newChartSpace () { } function physics () { - thisObject.container.frame.height = BOTTOM_SPACE_POSITION + thisObject.container.frame.height = COCKPIT_SPACE_POSITION if (thisObject.container.frame.height <= 0 / 100) { thisObject.visible = false @@ -180,7 +180,7 @@ function newChartSpace () { let toPoint = { x: browserCanvas.width, - y: BOTTOM_SPACE_POSITION + y: COCKPIT_SPACE_POSITION } browserCanvasContext.beginPath() @@ -199,4 +199,3 @@ function newChartSpace () { } } } - diff --git a/Spaces/BottomSpace.js b/Spaces/CockpitSpace.js similarity index 96% rename from Spaces/BottomSpace.js rename to Spaces/CockpitSpace.js index 3bee0df9d..c84447c60 100644 --- a/Spaces/BottomSpace.js +++ b/Spaces/CockpitSpace.js @@ -1,6 +1,6 @@ - function newBottomSpace () { - const MODULE_NAME = 'Bottom Space' + function newCockpitSpace () { + const MODULE_NAME = 'CockpitSpace' const ERROR_LOG = true let thisObject = { @@ -49,10 +49,10 @@ function resize () { thisObject.container.frame.position.x = 0 - thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT thisObject.container.frame.width = browserCanvas.width - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT } function physics () { @@ -67,8 +67,8 @@ thisObject.container.isDraggeable = false } - if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) { - thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT + if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - COCKPIT_SPACE_HEIGHT) { + thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT thisObject.status = 'BOTTOM' canvas.strategySpace.makeInvisible() } else { @@ -83,7 +83,7 @@ canvas.panelsSpace.visible = true } - BOTTOM_SPACE_POSITION = thisObject.container.frame.position.y + COCKPIT_SPACE_POSITION = thisObject.container.frame.position.y viewPort.resize() } @@ -305,4 +305,3 @@ browserCanvasContext.stroke() } } - diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 32752e594..1c9aeb5dd 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -79,8 +79,8 @@ function newFloatingSpace () { returnPoint.x = 0 } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { - returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT + if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) { + returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT } if (point.y > browserCanvas.height) { @@ -99,7 +99,7 @@ function newFloatingSpace () { return false } - if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) { + if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) { return false } diff --git a/TopSpace/CurrentEvent.js b/TopSpace/CurrentEvent.js index 81a5c92d3..b2831e277 100644 --- a/TopSpace/CurrentEvent.js +++ b/TopSpace/CurrentEvent.js @@ -70,7 +70,7 @@ function newCurrentEvent () { thisObject.container = container thisObject.container.frame.width = 150 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT resize() diff --git a/TopSpace/EndUser.js b/TopSpace/EndUser.js index 6edaf5b44..b8699eb69 100644 --- a/TopSpace/EndUser.js +++ b/TopSpace/EndUser.js @@ -12,7 +12,7 @@ function newEndUser () { thisObject.container = container thisObject.container.frame.width = 200 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 5 container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT diff --git a/TopSpace/Login.js b/TopSpace/Login.js index 7d242191c..61aa996c1 100644 --- a/TopSpace/Login.js +++ b/TopSpace/Login.js @@ -19,7 +19,7 @@ function newLogin () { thisObject.container = container thisObject.container.frame.width = 200 - thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width * 1 container.frame.position.y = viewPort.visibleArea.bottomLeft.y + BREAKPOINT_HEIGHT From cb60bf2e90220327ea627b61cb159a0517cede6b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 17:14:59 +0200 Subject: [PATCH 199/221] Controls showing up again, now as part of the cockpit --- CockpitSpace/AssetBalances.js | 122 ++++++++++++++++++ CockpitSpace/Speedometer.js | 236 ++++++++++++++++++++++++++++++++++ CockpitSpace/UIControl.js | 55 -------- Spaces/CockpitSpace.js | 98 ++------------ 4 files changed, 371 insertions(+), 140 deletions(-) create mode 100644 CockpitSpace/AssetBalances.js create mode 100644 CockpitSpace/Speedometer.js delete mode 100644 CockpitSpace/UIControl.js diff --git a/CockpitSpace/AssetBalances.js b/CockpitSpace/AssetBalances.js new file mode 100644 index 000000000..5b7db2c35 --- /dev/null +++ b/CockpitSpace/AssetBalances.js @@ -0,0 +1,122 @@ + +function newAssetBalances () { + const MODULE_NAME = 'Asset Balances' + + let thisObject = { + visible: true, + container: undefined, + paramsArray: undefined, + setParamsArray: setParamsArray, + physics: physics, + draw: draw, + speedometers: [], + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false + + return thisObject + + function finalize () { + for (let i = 0; i < thisObject.speedometers.length; i++) { + let speedometer = thisObject.speedometers[i] + speedometer.finalize() + } + thisObject.container.finalize() + thisObject.container = undefined + thisObject.paramsArray = undefined + } + + function initialize () { + for (let i = 0; i < 2; i++) { + let speedometer = newSpeedometer() + + speedometer.container.frame.position.x = thisObject.container.frame.width / 2 - speedometer.container.frame.width / 2 + speedometer.container.frame.position.y = thisObject.container.frame.height / 2 - speedometer.container.frame.height / 2 + + speedometer.initialize() + thisObject.speedometers.push(speedometer) + } + } + + function getContainer (point, purpose) { + if (thisObject.visible !== true) { return } + + let container + for (let i = 0; i < thisObject.speedometers.length; i++) { + container = thisObject.speedometers[i].getContainer(point, purpose) + if (container !== undefined) { + if (container.isForThisPurpose(purpose)) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return container + } + } + } + } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function setParamsArray (paramsArray) { + thisObject.paramsArray = paramsArray + for (let i = 0; i < thisObject.speedometers.length; i++) { + let speedometer = thisObject.speedometers[i] + speedometer.params = paramsArray[i] + } + } + + function physics () { + + } + + function draw () { + if (thisObject.visible !== true) { return } + + for (let i = 0; i < thisObject.speedometers.length; i++) { + let speedometer = thisObject.speedometers[i] + speedometer.draw() + } + + drawAssetBalances() + } + + function drawAssetBalances () { + if (thisObject.paramsArray === undefined) { return } + + let fontSize + let label + let xOffset + let yOffset + + const OPACITY = 1 + + /* We put the params.VALUE in the middle */ + + fontSize = 15 + + browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY + + label = 'ASSET BALANCES' + + xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + yOffset = -45 + + labelPoint = { + x: 0 - xOffset + (thisObject.paramsArray[1].LEFT_OFFSET - thisObject.paramsArray[0].LEFT_OFFSET) / 2 + thisObject.paramsArray[0].LEFT_OFFSET - 20, + y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 - yOffset + } + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } +} diff --git a/CockpitSpace/Speedometer.js b/CockpitSpace/Speedometer.js new file mode 100644 index 000000000..afa2b1204 --- /dev/null +++ b/CockpitSpace/Speedometer.js @@ -0,0 +1,236 @@ + +function newSpeedometer () { + const MODULE_NAME = 'Speedometer' + + let thisObject = { + visible: true, + container: undefined, + params: undefined, + physics: physics, + draw: draw, + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false + + return thisObject + + function finalize () { + thisObject.container.finalize() + thisObject.container = undefined + thisObject.params = undefined + } + + function initialize () { + + } + + function getContainer (point, purpose) { + if (thisObject.visible !== true) { return } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function physics () { + + } + + function draw () { + if (thisObject.params === undefined) { return } + drawAssetCircle() + } + + function drawAssetCircle () { + const RED_LINE_HIGHT = 5 + const RADIOUS = 50 + const OPACITY = 1 + + let centerPoint = { + x: thisObject.params.LEFT_OFFSET, + y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 + } + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + RED_LINE_HIGHT, 0.85 * Math.PI, 2.15 * Math.PI) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' + browserCanvasContext.fill() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS, 0.0 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.closePath() + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' + browserCanvasContext.fill() + + /* We draw the circle bar */ + + const DEFAULT_THICKNESS = 2 + const VALUE_THICKNESS = 8 + const VALUE_BG_THICKNESS = 1 + const BAR_RADIOUS = RADIOUS * 0.85 + + let BAR_START_ANGLE = 0.85 * Math.PI + let BAR_END_ANGLE = 2.15 * Math.PI + let CURRENT_VALUE_ANGLE = thisObject.params.VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE + let MIN_VALUE_ANGLE = thisObject.params.MIN_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE + let INIT_VALUE_ANGLE = thisObject.params.INIT_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE + let PROFIT_VALUE_ANGLE = CURRENT_VALUE_ANGLE + + if (CURRENT_VALUE_ANGLE > INIT_VALUE_ANGLE) { CURRENT_VALUE_ANGLE = INIT_VALUE_ANGLE } + + if (thisObject.params.VALUE > 0) { + browserCanvasContext.setLineDash([0, 0]) + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, BAR_START_ANGLE, MIN_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_BG_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_BG_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_BG_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) { + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_BG_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + } + + browserCanvasContext.setLineDash([2, 3]) + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, BAR_START_ANGLE, MIN_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + + if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) { + browserCanvasContext.beginPath() + browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE) + + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')' + browserCanvasContext.lineWidth = VALUE_THICKNESS + browserCanvasContext.stroke() + browserCanvasContext.closePath() + } + } + + /* Common Variables */ + + let fontSize + let label + let xOffset + let yOffset + + /* We put the thisObject.params.VALUE in the middle */ + + fontSize = 22 + + browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY + + label = thisObject.params.VALUE + if (isNaN(label) === false) { + label = Number(label) + if (label === 0) { label = label.toFixed(2) } else { label = label.toLocaleString() } + } + + label = label.substring(0, 5) + + xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 7 + + labelPoint = { + x: centerPoint.x - xOffset, + y: centerPoint.y + } + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + + /* We put the top label */ + + fontSize = 12 + + browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY + + label = thisObject.params.ASSET_LABEL + + xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 3 + yOffset = 22 + + labelPoint = { + x: centerPoint.x - xOffset, + y: centerPoint.y - yOffset + } + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + + /* We put the bottom label */ + + fontSize = 12 + + browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY + + label = thisObject.params.ASSET_NAME + + xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 3 + yOffset = -15 + + labelPoint = { + x: centerPoint.x - xOffset, + y: centerPoint.y - yOffset + } + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } +} diff --git a/CockpitSpace/UIControl.js b/CockpitSpace/UIControl.js deleted file mode 100644 index 515640b31..000000000 --- a/CockpitSpace/UIControl.js +++ /dev/null @@ -1,55 +0,0 @@ -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) { - let 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 - } - } -} - diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index c84447c60..a6b7b8fae 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -1,17 +1,14 @@ function newCockpitSpace () { const MODULE_NAME = 'CockpitSpace' - const ERROR_LOG = true let thisObject = { container: undefined, status: 'BOTTOM', + assetBalances: undefined, draw: draw, physics: physics, - getContainer: getContainer, // returns the inner most container that holds the point received by parameter. - createNewControl: createNewControl, - destroyControl: destroyControl, - getControl: getControl, + getContainer: getContainer, finalize: finalize, initialize: initialize } @@ -36,15 +33,19 @@ thisObject.container.finalize() thisObject.container = undefined + thisObject.assetBalances = undefined } function initialize () { canvasBrowserResizedEventSubscriptionId = window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + + thisObject.assetBalances = newAssetBalances() + thisObject.assetBalances.initialize() } function onMouseClick (event) { - // canvas.strategySpace.tradingSystemWorkspace.showUp() + } function resize () { @@ -87,71 +88,12 @@ viewPort.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) { - 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 - } - } - } - - 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 - } - } - } - } - - 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 getContainer (point) { + let container = thisObject.assetBalances.getContainer(point) + if (container !== undefined) { + return container + } + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { @@ -164,21 +106,7 @@ 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() - } - } + thisObject.assetBalances.draw() } function drawBackground () { From 407d13d299688d05bf9cc6e7791bc93ef179b34d Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 17:46:18 +0200 Subject: [PATCH 200/221] BUG strategy space not showing fixed --- FloatingSpace/StrategyPart.js | 2 +- Spaces/CockpitSpace.js | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 3d07e5eda..aab937faa 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -131,7 +131,7 @@ function newStrategyPart () { } function iconPhysics () { - icon = canvas.strategySpace.iconByPartType.get(payload.node.type) + icon = canvas.strategySpace.iconByPartType.get(thisObject.payload.node.type) } function onFocus () { diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index a6b7b8fae..eb1872cd6 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -89,11 +89,6 @@ } function getContainer (point) { - let container = thisObject.assetBalances.getContainer(point) - if (container !== undefined) { - return container - } - if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { From 4b812349af9c82f38fd4008843a6d319b2d0b193 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 14 May 2019 19:08:08 +0200 Subject: [PATCH 201/221] New Turquise color --- CockpitSpace/Speedometer.js | 3 ++- Globals.js | 4 +++- Spaces/CockpitSpace.js | 3 ++- Utilities.js | 15 --------------- 4 files changed, 7 insertions(+), 18 deletions(-) diff --git a/CockpitSpace/Speedometer.js b/CockpitSpace/Speedometer.js index afa2b1204..e93c434ba 100644 --- a/CockpitSpace/Speedometer.js +++ b/CockpitSpace/Speedometer.js @@ -71,7 +71,7 @@ function newSpeedometer () { browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS, 0.0 * Math.PI, 2.0 * Math.PI) browserCanvasContext.closePath() - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')' browserCanvasContext.fill() /* We draw the circle bar */ @@ -234,3 +234,4 @@ function newSpeedometer () { browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } + diff --git a/Globals.js b/Globals.js index 3261d18fd..7fb404879 100644 --- a/Globals.js +++ b/Globals.js @@ -28,7 +28,9 @@ UI_COLOR = { RED: "223, 70, 60", PATINATED_TURQUOISE: "27,153,139", TITANIUM_YELLOW: "244,228,9", - MANGANESE_PURPLE: "91,80,122" + MANGANESE_PURPLE: "91,80,122", + TURQUOISE: "74,207,217", + DARK_TURQUOISE: "2,149,170" }; /* User Interface Fonts */ diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index eb1872cd6..29096fa78 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -118,7 +118,7 @@ browserCanvasContext.beginPath() browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height) - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + opacity + ')' browserCanvasContext.closePath() browserCanvasContext.fill() @@ -228,3 +228,4 @@ browserCanvasContext.stroke() } } + diff --git a/Utilities.js b/Utilities.js index 8f38d99d8..a72310054 100644 --- a/Utilities.js +++ b/Utilities.js @@ -154,21 +154,6 @@ 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 -} - function printLabel (labelToPrint, x, y, opacity, fontSize) { let labelPoint From 2abe3caa73e875a53f590667c1a19da88c4f9dc9 Mon Sep 17 00:00:00 2001 From: Matias Date: Tue, 14 May 2019 18:45:31 -0300 Subject: [PATCH 202/221] Multiple team support --- Panels/ProductsPanel.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 5f690130c..f59909faa 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -61,12 +61,9 @@ function newProductsPanel () { let storedTeams = window.localStorage.getItem('userTeams') let userTeams - let userTeam = {slug: ''} if (storedTeams !== null && storedTeams !== undefined && storedTeams !== '') { userTeams = JSON.parse(storedTeams) - userTeam = userTeams[0] // Currently we assume a user can be at only one team. } - if (userTeam === undefined) { userTeam = {slug: ''} } /* First thing is to build the productCards array */ @@ -77,16 +74,16 @@ function newProductsPanel () { for (let j = 0; j < devTeam.bots.length; j++) { let bot = devTeam.bots[j] - + let userTeam = isUserTeam(devTeam.codeName, userTeams) if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue } - if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== userTeam.slug)) { continue } + if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && !userTeam)) { continue } if (bot.products !== undefined) { for (let k = 0; k < bot.products.length; k++) { let product = bot.products[k] if (window.localStorage.getItem('Show AAMaster Layers') === null) { - if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue } + if (product.shareWith !== 'Public' && !userTeam) { continue } } /* Now we create Product objects */ @@ -256,5 +253,14 @@ function newProductsPanel () { panelTabButton.draw() } + + function isUserTeam(team, userTeams){ + for (let index = 0; index < userTeams.length; index++) { + if(team === userTeams[index].slug){ + return true + } + } + return false + } } From ab148f340e36383c5c13cb8cd1ec791fe05b85b7 Mon Sep 17 00:00:00 2001 From: Matias Date: Tue, 14 May 2019 18:53:56 -0300 Subject: [PATCH 203/221] No selected team --- Panels/ProductsPanel.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index f59909faa..34b60e92c 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -255,6 +255,9 @@ function newProductsPanel () { } function isUserTeam(team, userTeams){ + if(userTeams === undefined) + return false + for (let index = 0; index < userTeams.length; index++) { if(team === userTeams[index].slug){ return true From 92f74d12d54c2bf093209887d83b814e4eef6355 Mon Sep 17 00:00:00 2001 From: Matias Date: Tue, 14 May 2019 19:03:03 -0300 Subject: [PATCH 204/221] Any team can have public indicators --- Panels/ProductsPanel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js index 34b60e92c..d570d778f 100644 --- a/Panels/ProductsPanel.js +++ b/Panels/ProductsPanel.js @@ -76,7 +76,6 @@ function newProductsPanel () { let bot = devTeam.bots[j] let userTeam = isUserTeam(devTeam.codeName, userTeams) if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue } - if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && !userTeam)) { continue } if (bot.products !== undefined) { for (let k = 0; k < bot.products.length; k++) { From 2365fbdb9c024230767cfe951c98b9124d9062fa Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 15 May 2019 09:51:06 +0200 Subject: [PATCH 205/221] FIXED: variable for user storage --- Globals.js | 12 ++++++++++-- Spaces/CockpitSpace.js | 5 ++--- StrategySpace/Workspace.js | 8 ++++---- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/Globals.js b/Globals.js index 7fb404879..d25a99d1c 100644 --- a/Globals.js +++ b/Globals.js @@ -122,9 +122,17 @@ function convertTimePeriodToName(pTimePeriod) { window.AT_BREAKPOINT = false; +let testUser = window.localStorage.getItem("test_user") +let LOGGED_IN_USER_LOCAL_STORAGE_KEY +let LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY -const LOGGED_IN_USER_LOCAL_STORAGE = "xuser" -const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE = "xaccess_token" +if (testUser !== null) { + LOGGED_IN_USER_LOCAL_STORAGE_KEY = "test_user" + LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY = "test_access_token" +} else { + LOGGED_IN_USER_LOCAL_STORAGE_KEY = "user" + LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY = "access_token" +} const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line. diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index 29096fa78..6696a400b 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -61,7 +61,7 @@ thisObject.status = 'MIDDLE' - let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE_KEY) if (user !== null) { // Only if user is logged in thisObject.container.isDraggeable = true } else { @@ -134,7 +134,7 @@ browserCanvasContext.closePath() browserCanvasContext.fill() - let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE_KEY) if (user !== null) { // Only if user is logged in arrow() } @@ -228,4 +228,3 @@ browserCanvasContext.stroke() } } - diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index d03cf2b35..dd9e8b5b5 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -41,9 +41,9 @@ function newWorkspace () { async function saveToStrategyzer () { try { - const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE) + const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY) - let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE_KEY) if (user === null) { if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> Can not save because user is not logged in. ') } return @@ -253,9 +253,9 @@ function newWorkspace () { async function loadFromStrategyzer () { try { - const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE) + const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY) - let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE) + let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE_KEY) if (user === null) { // if there is no user that means that we are logged off, which means this object can not be used. return From 9b346dde8fa33f822126ab796a401274f9c082ac Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 15 May 2019 10:19:31 +0200 Subject: [PATCH 206/221] Restart Simulation Buttom partially implemented --- CockpitSpace/RestartSimulation.js | 83 +++++++++++++++++++++++++++++++ Spaces/CockpitSpace.js | 12 +++++ 2 files changed, 95 insertions(+) create mode 100644 CockpitSpace/RestartSimulation.js diff --git a/CockpitSpace/RestartSimulation.js b/CockpitSpace/RestartSimulation.js new file mode 100644 index 000000000..509748b53 --- /dev/null +++ b/CockpitSpace/RestartSimulation.js @@ -0,0 +1,83 @@ + +function newRestartSimulation () { + const MODULE_NAME = 'Restart Simulation' + + let thisObject = { + visible: true, + container: undefined, + physics: physics, + draw: draw, + getContainer: getContainer, + initialize: initialize, + finalize: finalize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + + thisObject.container.isDraggeable = false + thisObject.container.isWheelable = false + thisObject.container.isClickeable = true + + return thisObject + + function finalize () { + thisObject.container.finalize() + thisObject.container = undefined + } + + function initialize () { + thisObject.container.frame.position.x = thisObject.container.parentContainer.frame.width * 80 / 100 + thisObject.container.frame.position.y = 6 + thisObject.container.frame.width = 100 + thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT - 12 + } + + function getContainer (point, purpose) { + if (thisObject.visible !== true) { return } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } + } + + function physics () { + + } + + function draw () { + if (thisObject.visible !== true) { return } + + drawRestartSimulation() + } + + function drawRestartSimulation () { + let fontSize + let label + let xOffset + let yOffset + + const OPACITY = 1 + + /* We put the params.VALUE in the middle */ + + fontSize = 15 + + browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY + + label = 'RESTART SIMULATION' + + xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + yOffset = -45 + + labelPoint = { + x: 0 - xOffset + (thisObject.paramsArray[1].LEFT_OFFSET - thisObject.paramsArray[0].LEFT_OFFSET) / 2 + thisObject.paramsArray[0].LEFT_OFFSET - 20, + y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 - yOffset + } + + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } +} diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index 6696a400b..a47822da3 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -6,6 +6,7 @@ container: undefined, status: 'BOTTOM', assetBalances: undefined, + restartSimulation: undefined, draw: draw, physics: physics, getContainer: getContainer, @@ -34,6 +35,7 @@ thisObject.container.finalize() thisObject.container = undefined thisObject.assetBalances = undefined + thisObject.restartSimulation = undefined } function initialize () { @@ -42,6 +44,10 @@ thisObject.assetBalances = newAssetBalances() thisObject.assetBalances.initialize() + + thisObject.restartSimulation = newRestartSimulation() + thisObject.restartSimulation.initialize() + thisObject.restartSimulation.container.connectToParent(thisObject.container) } function onMouseClick (event) { @@ -89,6 +95,11 @@ } function getContainer (point) { + let container + + container = thisObject.restartSimulation.getContainer(point) + if (container !== undefined) { return container } + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { @@ -102,6 +113,7 @@ drawBackground() thisObject.assetBalances.draw() + thisObject.restartSimulation.draw() } function drawBackground () { From 0d3f451a0ca7d988005eb5aaf84c6ae922a714b1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 15 May 2019 10:40:50 +0200 Subject: [PATCH 207/221] Extensive code cleaning --- Animation.js | 66 +++---------------- Canvas.js | 106 +++++------------------------- CockpitSpace/RestartSimulation.js | 11 ++-- Dashboard.js | 13 ---- Spaces/CockpitSpace.js | 2 +- 5 files changed, 32 insertions(+), 166 deletions(-) diff --git a/Animation.js b/Animation.js index d27dc114c..01ce1f6f5 100644 --- a/Animation.js +++ b/Animation.js @@ -1,7 +1,6 @@ function newAnimation () { const MODULE_NAME = 'Animation' - const INFO_LOG = false const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -29,75 +28,31 @@ function newAnimation () { return thisObject function finalize () { - try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - - thisObject.stop() - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } - }s + thisObject.stop() } - function initialize (callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } + function initialize () { - /* Nothing to do here yet. */ - callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } } - function start (callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] start -> Entering function.') } - - animationLoop() // Inside this function the animation process is started, and at the same time it creates a loop. - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + function start () { + animationLoop() // Inside this function the animation process is started, and at the same time it creates a loop. } - function stop (callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] stop -> Entering function.') } - - window.cancelAnimationFrame(animationLoopHandle) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] stop -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + function stop () { + window.cancelAnimationFrame(animationLoopHandle) } - function addCallBackFunction (key, callBack, callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] addCallBackFunction -> Entering function.') } - - callBackFunctions.set(key, callBack) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addCallBackFunction -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + function addCallBackFunction (key, callBack) { + callBackFunctions.set(key, callBack) } - function removeCallBackFunction (key, callBackFunction) { - try { - if (INFO_LOG === true) { logger.write('[INFO] removeCallBackFunction -> Entering function.') } - - callBackFunctions.delete(key) - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] removeCallBackFunction -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } + function removeCallBackFunction (key) { + callBackFunctions.delete(key) } function animationLoop () { try { - if (INFO_LOG === true) { logger.write('[INFO] animationLoop -> Entering function.') } - if (window.canvasApp.visible === true) { /* We set the canvas to its normal width and height */ @@ -140,4 +95,3 @@ function newAnimation () { browserCanvasContext.fill() } } - diff --git a/Canvas.js b/Canvas.js index 3bc45b757..e29cecb67 100644 --- a/Canvas.js +++ b/Canvas.js @@ -7,7 +7,6 @@ let splashScreenNeeded = true function newCanvas () { const MODULE_NAME = 'Canvas' - const INFO_LOG = false const ERROR_LOG = true const logger = newWebDebugLog() logger.fileName = MODULE_NAME @@ -52,8 +51,6 @@ function newCanvas () { function finalize () { try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - thisObject.chartSpace.finalize() thisObject.floatingSpace.finalize() @@ -78,10 +75,8 @@ function newCanvas () { } } - async function initialize (callBackFunction) { + async function initialize () { try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - initializeBrowserCanvas() addCanvasEvents() @@ -110,12 +105,9 @@ function newCanvas () { function onCharSpaceInitialized (err) { try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCharSpaceInitialized -> Entering function.') } - viewPort.raiseEvents() // These events will impacts on objects just initialized. } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onCharSpaceInitialized -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } @@ -125,90 +117,32 @@ function newCanvas () { splashScreen.initialize() let animation = newAnimation() - animation.initialize(onAnimationInitialized) + animation.initialize() - function onAnimationInitialized (err) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> Entering function.') } - - thisObject.animation = animation + thisObject.animation = animation /* Here we add all the functions that will be called during the animation cycle. */ - animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded) - animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded) - animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded) - animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded) - animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded) - animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw, onFunctionAdded) - animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics, onFunctionAdded) - animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded) - animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded) - animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded) - animation.start(onStart) - - function onFunctionAdded (err) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onFunctionAdded -> Entering function.') } - - if (err.result === GLOBAL.DEFAULT_FAIL_RESPONSE.result) { - animation.stop() - - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> Animation Stopped since a vital funtion could not be added.') } - - /* Display some Error Page here. */ - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onFunctionAdded -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } - } - - function onStart (err) { - try { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Entering function.') } - - switch (err.result) { - case GLOBAL.DEFAULT_OK_RESPONSE.result: { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received OK Response.') } - callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) - return - } - - case GLOBAL.DEFAULT_FAIL_RESPONSE.result: { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received FAIL Response.') } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - return - } - - default: { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onAnimationInitialized -> onStart -> Received Unexpected Response.') } - callBackFunction(err) - return - } - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> onStart -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onAnimationInitialized -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) - } - } + animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw) + animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics) + animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground) + animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw) + animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics) + animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw) + animation.addCallBackFunction('ViewPort Animate', viewPort.animate) + animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw) + animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics) + animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw) + animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw) + animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw) + animation.start() } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } - callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } function initializeBrowserCanvas () { try { - if (INFO_LOG === true) { logger.write('[INFO] initializeBrowserCanvas -> Entering function.') } - browserCanvasContext = browserCanvas.getContext('2d') // browserCanvasContext.font = 'italic small-caps bold 12px Saira' browserCanvasContext.font = 'Saira' @@ -221,8 +155,6 @@ function newCanvas () { function addCanvasEvents () { try { - if (INFO_LOG === true) { logger.write('[INFO] addCanvasEvents -> Entering function.') } - /* Mouse down and up events to control the drag of the canvas. */ browserCanvas.addEventListener('mousedown', onMouseDown, false) @@ -253,8 +185,6 @@ function newCanvas () { function onMouseDown (event) { try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseDown -> Entering function.') } - /* There are four types of elements that can be dragged. @@ -362,8 +292,6 @@ function newCanvas () { function onMouseClick (event) { try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseClick -> Entering function.') } - if (ignoreNextClick === true) { ignoreNextClick = false return @@ -611,8 +539,6 @@ function newCanvas () { function onMouseWheel (event) { try { - if (INFO_LOG === true) { logger.write('[INFO] onMouseWheel -> Entering function.') } - // cross-browser wheel delta var event = window.event || event // old IE support let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail)) diff --git a/CockpitSpace/RestartSimulation.js b/CockpitSpace/RestartSimulation.js index 509748b53..1437955a3 100644 --- a/CockpitSpace/RestartSimulation.js +++ b/CockpitSpace/RestartSimulation.js @@ -69,15 +69,14 @@ function newRestartSimulation () { label = 'RESTART SIMULATION' - xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO - yOffset = -45 - - labelPoint = { - x: 0 - xOffset + (thisObject.paramsArray[1].LEFT_OFFSET - thisObject.paramsArray[0].LEFT_OFFSET) / 2 + thisObject.paramsArray[0].LEFT_OFFSET - 20, - y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 - yOffset + let labelPoint = { + x: 0, + y: thisObject.container.frame.height - 9 } + labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } + diff --git a/Dashboard.js b/Dashboard.js index cb57b4fe3..63e3176af 100644 --- a/Dashboard.js +++ b/Dashboard.js @@ -6,7 +6,6 @@ let viewPort = newViewPort() function newDashboard () { const MODULE_NAME = 'Dashboard' - const INFO_LOG = false const ERROR_LOG = true const INTENSIVE_LOG = false const logger = newWebDebugLog() @@ -25,8 +24,6 @@ function newDashboard () { function start () { try { - if (INFO_LOG === true) { logger.write('[INFO] start -> Entering function.') } - /* If this method is executed for a second time, it should finalize the current execution structure */ if (canvas !== undefined) { canvas.finalize() } @@ -40,8 +37,6 @@ function newDashboard () { loadImages(onImagesLoaded) function onImagesLoaded () { - if (INFO_LOG === true) { logger.write('[INFO] start -> onImagesLoaded -> Entering function.') } - /* Next we start the App */ setTimeout(delayedStart, DEBUG_START_UP_DELAY) @@ -53,8 +48,6 @@ function newDashboard () { function delayedStart () { try { - if (INFO_LOG === true) { logger.write('[INFO] delayedStart -> Entering function.') } - /* For now, we are supporting only one market. */ let market = { @@ -76,8 +69,6 @@ function newDashboard () { function userProfileChanged () { try { - if (INFO_LOG === true) { logger.write('[INFO] userProfileChanged -> Entering function.') } - canvas.topSpace.initialize() } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] userProfileChanged -> err = ' + err.stack) } @@ -86,8 +77,6 @@ function newDashboard () { function browserResized () { try { - if (INFO_LOG === true) { logger.write('[INFO] browserResized -> Entering function.') } - browserCanvas = document.getElementById('canvas') browserCanvas.width = window.innerWidth @@ -101,8 +90,6 @@ function newDashboard () { function loadImages (callBack) { try { - if (INFO_LOG === true) { logger.write('[INFO] loadImages -> Entering function.') } - const accessToken = '' /* diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index a47822da3..d0bf1a3e9 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -46,8 +46,8 @@ thisObject.assetBalances.initialize() thisObject.restartSimulation = newRestartSimulation() - thisObject.restartSimulation.initialize() thisObject.restartSimulation.container.connectToParent(thisObject.container) + thisObject.restartSimulation.initialize() } function onMouseClick (event) { From 716163a574ddada50b231a99afa3b12265d6aaa9 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 15 May 2019 11:19:43 +0200 Subject: [PATCH 208/221] Restart Simulation Button with mouse over / out working --- CockpitSpace/RestartSimulation.js | 60 ++++++++++++++++++++++++++++--- Spaces/CockpitSpace.js | 1 + 2 files changed, 56 insertions(+), 5 deletions(-) diff --git a/CockpitSpace/RestartSimulation.js b/CockpitSpace/RestartSimulation.js index 1437955a3..a5c4c3286 100644 --- a/CockpitSpace/RestartSimulation.js +++ b/CockpitSpace/RestartSimulation.js @@ -18,10 +18,21 @@ function newRestartSimulation () { thisObject.container.isDraggeable = false thisObject.container.isWheelable = false thisObject.container.isClickeable = true + thisObject.container.detectMouseOver = true + + let selfMouseOverEventSubscriptionId + let selfMouseClickEventSubscriptionId + let selfMouseNotOverEventSubscriptionId + + let isMouseOver = false return thisObject function finalize () { + thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId) + thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId) + thisObject.container.finalize() thisObject.container = undefined } @@ -29,8 +40,12 @@ function newRestartSimulation () { function initialize () { thisObject.container.frame.position.x = thisObject.container.parentContainer.frame.width * 80 / 100 thisObject.container.frame.position.y = 6 - thisObject.container.frame.width = 100 + thisObject.container.frame.width = 200 thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT - 12 + + selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point, purpose) { @@ -43,17 +58,52 @@ function newRestartSimulation () { } } + function onMouseOver (point) { + if (thisObject.container.frame.isThisPointHere(point, true, false) === true) { + isMouseOver = true + } else { + isMouseOver = false + } + } + + function onMouseNotOver (point) { + isMouseOver = false + } + + async function onMouseClick (event) { + + } + function physics () { } function draw () { if (thisObject.visible !== true) { return } - - drawRestartSimulation() + drawBackground() + drawText() } - function drawRestartSimulation () { + function drawBackground () { + let params = { + cornerRadius: 3, + lineWidth: 0.01, + container: thisObject.container, + borderColor: UI_COLOR.DARK, + castShadow: false, + opacity: 1 + } + + if (isMouseOver === true) { + params.backgroundColor = UI_COLOR.TURQUOISE + } else { + params.backgroundColor = UI_COLOR.DARK_TURQUOISE + } + + roundedCornersBackground(params) + } + + function drawText () { let fontSize let label let xOffset @@ -70,7 +120,7 @@ function newRestartSimulation () { label = 'RESTART SIMULATION' let labelPoint = { - x: 0, + x: 21, y: thisObject.container.frame.height - 9 } labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index d0bf1a3e9..ce5ec6420 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -17,6 +17,7 @@ thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) thisObject.container.isClickeable = false + thisObject.container.detectMouseOver = true thisObject.container.isDraggeable = true thisObject.container.notDraggingOnX = true From 920d16a8888e6da5cf39cdd19bd08c2c643ea101 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 15 May 2019 13:02:04 +0200 Subject: [PATCH 209/221] Restart Simulation Mutation implemented --- CockpitSpace/GraphQLRestartSimulation.js | 64 ++++++++++++++++++++++++ CockpitSpace/RestartSimulation.js | 9 +++- StrategySpace/Workspace.js | 2 +- 3 files changed, 73 insertions(+), 2 deletions(-) create mode 100644 CockpitSpace/GraphQLRestartSimulation.js diff --git a/CockpitSpace/GraphQLRestartSimulation.js b/CockpitSpace/GraphQLRestartSimulation.js new file mode 100644 index 000000000..e066a5cbb --- /dev/null +++ b/CockpitSpace/GraphQLRestartSimulation.js @@ -0,0 +1,64 @@ + +const GRAPHQL_MUTATION_RESTART_SIMULATION = Apollo.gql` + mutation operations_RunSimulation( + $simulation: operations_SimulationInput) + { + operations_RunSimulation(simulation: $simulation) + } + ` + +async function restartSimulation (simulationParams) { + try { + const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY) + + if (accessToken === null) { + if (ERROR_LOG === true) { logger.write('[ERROR] restartSimulation -> Can not restart the simulation because the user is not logged in. ') } + return + } + + const apolloClient = new Apollo.lib.ApolloClient({ + networkInterface: Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl, + transportBatching: true + }), + connectToDevTools: true + }) + + const networkInterface = Apollo.lib.createNetworkInterface({ + uri: window.canvasApp.graphQL.masterAppApiUrl + }) + + networkInterface.use([{ + applyMiddleware (req, next) { + req.options.headers = { + authorization: `Bearer ${accessToken}` + } + next() + } + }]) + + const graphQlRestartSimuulation = () => { + return new Promise((resolve, reject) => { + apolloClient.mutate({ + mutation: GRAPHQL_MUTATION_RESTART_SIMULATION, + variables: { + simulation: simulationParams + } + }) + .then(response => { + resolve(true) + }) + .catch(err => { + if (ERROR_LOG === true) { logger.write('[ERROR] restartSimulation -> ApolloClient error restarting simulation -> err = ' + err.stack) } + reject(err) + }) + }) + } + + let result = await graphQlRestartSimuulation() + + return result + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] restartSimulation -> err = ' + err.stack) } + } +} diff --git a/CockpitSpace/RestartSimulation.js b/CockpitSpace/RestartSimulation.js index a5c4c3286..efb0350ed 100644 --- a/CockpitSpace/RestartSimulation.js +++ b/CockpitSpace/RestartSimulation.js @@ -71,7 +71,15 @@ function newRestartSimulation () { } async function onMouseClick (event) { + let simulationParams = { + beginDatetime: 1554087600, + resumeExecution: true, + timePeriodDailyArray: ['05-min', '10-min'], + timePeriodMarketArray: ['01-hs', '02-hs'] + } + let result = await restartSimulation(simulationParams) + console.log('GRAPH QL EXECUTION ' + result) } function physics () { @@ -129,4 +137,3 @@ function newRestartSimulation () { browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } - diff --git a/StrategySpace/Workspace.js b/StrategySpace/Workspace.js index dd9e8b5b5..d533d8c14 100644 --- a/StrategySpace/Workspace.js +++ b/StrategySpace/Workspace.js @@ -91,7 +91,7 @@ function newWorkspace () { resolve(true) }) .catch(err => { - if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) } + if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> ApolloClient error updating user strategies -> err = ' + err.stack) } reject(err) }) }) From e0db4ec80b0091a80e5388f67030cf77f1ec0479 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 15 May 2019 15:39:55 +0200 Subject: [PATCH 210/221] Simulation Restarted using Axios --- Canvas.js | 13 ----- CockpitSpace/GraphQLRestartSimulation.js | 72 ++++++++---------------- CockpitSpace/RestartSimulation.js | 3 +- 3 files changed, 23 insertions(+), 65 deletions(-) diff --git a/Canvas.js b/Canvas.js index e29cecb67..33e8e77d4 100644 --- a/Canvas.js +++ b/Canvas.js @@ -185,19 +185,6 @@ function newCanvas () { function onMouseDown (event) { try { - /* - - There are four types of elements that can be dragged. - - 1. Panels. - 2. Floating Elements (Currently only FloatingObjects). - 3. Charts. - 4. The Viewport. - - We eveluate each space in order to see if they are holding the element being dragged, and we fallout at the Viewport. - - */ - let point = { x: event.pageX, y: event.pageY - window.canvasApp.topMargin diff --git a/CockpitSpace/GraphQLRestartSimulation.js b/CockpitSpace/GraphQLRestartSimulation.js index e066a5cbb..b71b8fa48 100644 --- a/CockpitSpace/GraphQLRestartSimulation.js +++ b/CockpitSpace/GraphQLRestartSimulation.js @@ -1,64 +1,36 @@ -const GRAPHQL_MUTATION_RESTART_SIMULATION = Apollo.gql` - mutation operations_RunSimulation( - $simulation: operations_SimulationInput) - { - operations_RunSimulation(simulation: $simulation) - } - ` - -async function restartSimulation (simulationParams) { +async function graphQlRestartSimulation (simulationParams) { try { const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY) if (accessToken === null) { - if (ERROR_LOG === true) { logger.write('[ERROR] restartSimulation -> Can not restart the simulation because the user is not logged in. ') } - return + throw new Error('Can not restart the simulation because the user is not logged in. ') } - const apolloClient = new Apollo.lib.ApolloClient({ - networkInterface: Apollo.lib.createNetworkInterface({ - uri: window.canvasApp.graphQL.masterAppApiUrl, - transportBatching: true - }), - connectToDevTools: true - }) - - const networkInterface = Apollo.lib.createNetworkInterface({ - uri: window.canvasApp.graphQL.masterAppApiUrl - }) - - networkInterface.use([{ - applyMiddleware (req, next) { - req.options.headers = { - authorization: `Bearer ${accessToken}` + const graphQLServer = await axios({ + url: window.canvasApp.graphQL.masterAppApiUrl, + method: 'post', + data: { + query: ` + mutation operations_RunSimulation( + $simulation: operations_SimulationInput) + { + operations_RunSimulation(simulation: $simulation) + } + `, + variables: { + simulation: simulationParams } - next() + }, + headers: { + authorization: 'Bearer ' + accessToken } - }]) + }) - const graphQlRestartSimuulation = () => { - return new Promise((resolve, reject) => { - apolloClient.mutate({ - mutation: GRAPHQL_MUTATION_RESTART_SIMULATION, - variables: { - simulation: simulationParams - } - }) - .then(response => { - resolve(true) - }) - .catch(err => { - if (ERROR_LOG === true) { logger.write('[ERROR] restartSimulation -> ApolloClient error restarting simulation -> err = ' + err.stack) } - reject(err) - }) - }) + if (graphQLServer.data.errors) { + throw new Error(graphQLServer.data.errors[0].message) } - - let result = await graphQlRestartSimuulation() - - return result } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] restartSimulation -> err = ' + err.stack) } + throw new Error('There has been an error restarting the simulation. Error: ' + err.stack) } } diff --git a/CockpitSpace/RestartSimulation.js b/CockpitSpace/RestartSimulation.js index efb0350ed..ae5372145 100644 --- a/CockpitSpace/RestartSimulation.js +++ b/CockpitSpace/RestartSimulation.js @@ -78,8 +78,7 @@ function newRestartSimulation () { timePeriodMarketArray: ['01-hs', '02-hs'] } - let result = await restartSimulation(simulationParams) - console.log('GRAPH QL EXECUTION ' + result) + let result = await graphQlRestartSimulation(simulationParams) } function physics () { From 562bc0dc52ece2972787c1e16eea81847420be2f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 15 May 2019 17:50:26 +0200 Subject: [PATCH 211/221] Restarting Simulation at right date and timePeriod --- ChartsSpace/TimeMachine.js | 60 ++++++++++++++++--------------- ChartsSpace/TimelineChart.js | 14 ++++++++ CockpitSpace/RestartSimulation.js | 30 +++++++++++++--- Scales/RateScale.js | 9 +++-- Scales/TimePeriodScale.js | 1 + Scales/TimeScale.js | 17 +++++++-- Spaces/ChartSpace.js | 12 +++++++ 7 files changed, 106 insertions(+), 37 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index b5a373126..b511509aa 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -11,15 +11,15 @@ each one with it own charts, and each one positioned at an especific point in ti function newTimeMachine () { const MODULE_NAME = 'Time Machine' - const INFO_LOG = false const logger = newWebDebugLog() logger.fileName = MODULE_NAME let thisObject = { container: undefined, + charts: [], + physics: physics, drawBackground: drawBackground, draw: draw, - charts: [], getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize, finalize: finalize @@ -41,28 +41,20 @@ function newTimeMachine () { const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 let timeScale - let rigthScale + let rateScale let timeLineCoordinateSystem = newTimeLineCoordinateSystem() return thisObject function finalize () { - try { - if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') } - - for (let i = 0; i < thisObject.charts.length; i++) { - let chart = thisObject.charts[i] - chart.finalize() - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } + for (let i = 0; i < thisObject.charts.length; i++) { + let chart = thisObject.charts[i] + chart.finalize() } } function initialize (callBackFunction) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') } - /* Each Time Machine has a Control Panel. */ let panelOwner = 'Global' @@ -114,21 +106,19 @@ function newTimeMachine () { timeScale.initialize(timeLineCoordinateSystem) - rigthScale = newRateScale() - rigthScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) - rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { + rateScale = newRateScale() + rateScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) + rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) - rigthScale.initialize(timeLineCoordinateSystem) + rateScale.initialize(timeLineCoordinateSystem) initializeTheRest() } function initializeTheRest () { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> Entering function.') } - let leftToInitialize = SUPPORTED_EXCHANGES.length * SUPPORTED_MARKETS.length - 1 // The default exchange and market was already initialized. let alreadyInitialized = 0 @@ -153,8 +143,6 @@ function newTimeMachine () { } function initializeTimelineChart (exchange, market) { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> initializeTimelineChart -> Entering function.') } - let timelineChart = newTimelineChart() timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true) @@ -169,8 +157,6 @@ function newTimeMachine () { timelineChart.initialize(exchange, market, timeLineCoordinateSystem, finalSteps) function finalSteps () { - if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> initializeTimelineChart -> finalSteps -> Entering function.') } - thisObject.charts.push(timelineChart) controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined) @@ -198,8 +184,8 @@ function newTimeMachine () { } } - if (rigthScale !== undefined) { - container = rigthScale.getContainer(point) + if (rateScale !== undefined) { + container = rateScale.getContainer(point) if (container !== undefined) { if (container.isForThisPurpose(purpose)) { return container @@ -228,6 +214,24 @@ function newTimeMachine () { } } + function physics () { + thisObjectPhysics() + childrenPhysics() + } + + function thisObjectPhysics () { + + } + + function childrenPhysics () { + timeScale.physics() + rateScale.physics() + for (let i = 0; i < thisObject.charts.length; i++) { + let chart = thisObject.charts[i] + chart.physics() + } + } + function drawBackground () { thisBackground() @@ -247,7 +251,7 @@ function newTimeMachine () { } if (timeScale !== undefined) { timeScale.draw() } - if (rigthScale !== undefined) { rigthScale.draw() } + if (rateScale !== undefined) { rateScale.draw() } // thisObject.container.frame.draw(false, true, false) } @@ -269,8 +273,6 @@ function newTimeMachine () { } function recalculateScale () { - if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') } - let minValue = { x: MIN_PLOTABLE_DATE.valueOf(), y: 0 diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js index f9d1aad60..bce46cf18 100644 --- a/ChartsSpace/TimelineChart.js +++ b/ChartsSpace/TimelineChart.js @@ -14,6 +14,7 @@ function newTimelineChart () { let thisObject = { container: undefined, fitFunction: undefined, + physics: physics, setDatetime: setDatetime, drawBackground: drawBackground, draw: draw, @@ -239,6 +240,19 @@ function newTimelineChart () { return container } + function physics () { + thisObjectPhysics() + childrenPhysics() + } + + function thisObjectPhysics () { + + } + + function childrenPhysics () { + + } + function tooTiny () { if (viewPort.zoomLevel < Math.trunc(-28.25 * 100) / 100) { return true diff --git a/CockpitSpace/RestartSimulation.js b/CockpitSpace/RestartSimulation.js index ae5372145..8515fd996 100644 --- a/CockpitSpace/RestartSimulation.js +++ b/CockpitSpace/RestartSimulation.js @@ -71,11 +71,32 @@ function newRestartSimulation () { } async function onMouseClick (event) { + let dateAtScreenCorner = new Date(window.localStorage.getItem('Date @ Screen Corner')) + let currentTimePeriod = JSON.parse(window.localStorage.getItem('Current Time Period')) + + let timePeriodsMasterArray = [marketFilesPeriods, dailyFilePeriods] + let timePeriodArray = timePeriodsMasterArray[currentTimePeriod.filePeriodIndex] + let timePeriod = timePeriodArray[currentTimePeriod.timePeriodIndex][1] + + let timePeriodDailyArray = [] + let timePeriodMarketArray = [] + + switch (currentTimePeriod.filePeriodIndex) { + case 0: { + timePeriodMarketArray.push(timePeriod) + break + } + case 1: { + timePeriodDailyArray.push(timePeriod) + break + } + } + let simulationParams = { - beginDatetime: 1554087600, - resumeExecution: true, - timePeriodDailyArray: ['05-min', '10-min'], - timePeriodMarketArray: ['01-hs', '02-hs'] + beginDatetime: dateAtScreenCorner.valueOf() / 1000 | 0, + resumeExecution: false, + timePeriodDailyArray: timePeriodDailyArray, + timePeriodMarketArray: timePeriodMarketArray } let result = await graphQlRestartSimulation(simulationParams) @@ -136,3 +157,4 @@ function newRestartSimulation () { browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } + diff --git a/Scales/RateScale.js b/Scales/RateScale.js index 300587042..4d5a08252 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -2,11 +2,12 @@ function newRateScale () { const MODULE_NAME = 'Right Scale' let thisObject = { + heightPercentage: 100, container: undefined, + physics: physics, draw: draw, getContainer: getContainer, - initialize: initialize, - heightPercentage: 100 + initialize: initialize } const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 @@ -101,6 +102,10 @@ function newRateScale () { } } + function physics () { + + } + function draw () { if (visible === false) { return } diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 55ba9a6b8..705e4fafe 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -292,6 +292,7 @@ to be visible at the top of the viewPort. */ let event = {} event.timePeriod = thisObject.timePeriod thisObject.container.eventHandler.raiseEvent('Time Period Changed', event) + window.localStorage.setItem('Current Time Period', JSON.stringify({filePeriodIndex: filePeriodIndex, timePeriodIndex: timePeriodIndex})) } } diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 5cc926436..631cdb697 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -2,11 +2,12 @@ function newTimeScale () { const MODULE_NAME = 'Time Scale' let thisObject = { + lenghtPercentage: undefined, container: undefined, + physics: physics, draw: draw, getContainer: getContainer, - initialize: initialize, - lenghtPercentage: undefined + initialize: initialize } const LENGHT_PERCENTAGE_DEFAULT_VALUE = 5 @@ -96,6 +97,17 @@ function newTimeScale () { } } + function physics () { + let point = { + x: 0, + y: 0 + } + + let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem) + date = new Date(date) + window.localStorage.setItem('Date @ Screen Corner', date.toUTCString()) + } + function draw () { if (visible === false) { return } @@ -206,3 +218,4 @@ to be visible at the top of the viewPort. */ browserCanvasContext.stroke() } } + diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 2af37d1d0..96aaa7bbc 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -149,6 +149,11 @@ function newChartSpace () { } function physics () { + thisObjectPhysics() + childrenPhysics() + } + + function thisObjectPhysics () { thisObject.container.frame.height = COCKPIT_SPACE_POSITION if (thisObject.container.frame.height <= 0 / 100) { @@ -160,6 +165,13 @@ function newChartSpace () { viewPort.resize() } + function childrenPhysics () { + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.physics() + } + } + function drawBackground () { if (thisObject.visible !== true) { return } From 5181f2fcd8d9b733be9ec5555a62bb689a5694cd Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 15 May 2019 19:07:19 +0200 Subject: [PATCH 212/221] Different states on Restart Simulation Button done --- CockpitSpace/GraphQLRestartSimulation.js | 3 + CockpitSpace/RestartSimulation.js | 78 ++++++++++++++++++++---- Spaces/CockpitSpace.js | 8 +++ 3 files changed, 78 insertions(+), 11 deletions(-) diff --git a/CockpitSpace/GraphQLRestartSimulation.js b/CockpitSpace/GraphQLRestartSimulation.js index b71b8fa48..53c5d2e37 100644 --- a/CockpitSpace/GraphQLRestartSimulation.js +++ b/CockpitSpace/GraphQLRestartSimulation.js @@ -28,9 +28,12 @@ async function graphQlRestartSimulation (simulationParams) { }) if (graphQLServer.data.errors) { + console.log(err.stack) throw new Error(graphQLServer.data.errors[0].message) } } catch (err) { + console.log(err.stack) throw new Error('There has been an error restarting the simulation. Error: ' + err.stack) } } + diff --git a/CockpitSpace/RestartSimulation.js b/CockpitSpace/RestartSimulation.js index 8515fd996..f82de480c 100644 --- a/CockpitSpace/RestartSimulation.js +++ b/CockpitSpace/RestartSimulation.js @@ -5,6 +5,7 @@ function newRestartSimulation () { let thisObject = { visible: true, container: undefined, + status: undefined, physics: physics, draw: draw, getContainer: getContainer, @@ -25,6 +26,7 @@ function newRestartSimulation () { let selfMouseNotOverEventSubscriptionId let isMouseOver = false + let counterTillNextState = 0 return thisObject @@ -40,16 +42,18 @@ function newRestartSimulation () { function initialize () { thisObject.container.frame.position.x = thisObject.container.parentContainer.frame.width * 80 / 100 thisObject.container.frame.position.y = 6 - thisObject.container.frame.width = 200 + thisObject.container.frame.width = 250 thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT - 12 selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + + thisObject.status = 'Ready' } function getContainer (point, purpose) { - if (thisObject.visible !== true) { return } + if (thisObject.visible !== true || thisObject.status !== 'Ready') { return } if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container @@ -98,12 +102,38 @@ function newRestartSimulation () { timePeriodDailyArray: timePeriodDailyArray, timePeriodMarketArray: timePeriodMarketArray } - - let result = await graphQlRestartSimulation(simulationParams) + try { + thisObject.status = 'Restarting' + await graphQlRestartSimulation(simulationParams) + thisObject.status = 'Calculating' + counterTillNextState = 1000 + } catch (err) { + thisObject.status = 'Error' + counterTillNextState = 500 + } } function physics () { + if (counterTillNextState > 0) { + counterTillNextState-- + if (counterTillNextState === 0) { + switch (thisObject.status) { + case 'Ready': + + break + case 'Restarting': + + break + case 'Calculating': + thisObject.status = 'Ready' + break + case 'Error': + thisObject.status = 'Ready' + break + } + } + } } function draw () { @@ -122,10 +152,24 @@ function newRestartSimulation () { opacity: 1 } - if (isMouseOver === true) { - params.backgroundColor = UI_COLOR.TURQUOISE - } else { - params.backgroundColor = UI_COLOR.DARK_TURQUOISE + switch (thisObject.status) { + case 'Ready': { + if (isMouseOver === true) { + params.backgroundColor = UI_COLOR.TURQUOISE + } else { + params.backgroundColor = UI_COLOR.DARK_TURQUOISE + } + break + } + case 'Restarting': + params.backgroundColor = UI_COLOR.GREY + break + case 'Calculating': + params.backgroundColor = UI_COLOR.TITANIUM_YELLOW + break + case 'Error': + params.backgroundColor = UI_COLOR.RUSTED_RED + break } roundedCornersBackground(params) @@ -145,10 +189,23 @@ function newRestartSimulation () { browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY - label = 'RESTART SIMULATION' + switch (thisObject.status) { + case 'Ready': + label = 'RESTART SIMULATION' + break + case 'Restarting': + label = 'RESTARTING...' + break + case 'Calculating': + label = 'CALCULATING...' + break + case 'Error': + label = 'NOT POSSIBLE NOW' + break + } let labelPoint = { - x: 21, + x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 15, y: thisObject.container.frame.height - 9 } labelPoint = thisObject.container.frame.frameThisPoint(labelPoint) @@ -157,4 +214,3 @@ function newRestartSimulation () { browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } - diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js index ce5ec6420..36d5477ff 100644 --- a/Spaces/CockpitSpace.js +++ b/Spaces/CockpitSpace.js @@ -64,6 +64,14 @@ } function physics () { + thisObjectPhysics() + childrenPhysics() + } + + function childrenPhysics () { + thisObject.restartSimulation.physics() + } + function thisObjectPhysics () { /* Check the limits */ thisObject.status = 'MIDDLE' From f2fbc10520606c07a09f37899cd316a161a4685f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 07:44:39 +0200 Subject: [PATCH 213/221] Time Period Display Improved --- Scales/TimePeriodScale.js | 92 ++++++++++++++++++++------------------- 1 file changed, 48 insertions(+), 44 deletions(-) diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 705e4fafe..5c57b5430 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -129,6 +129,32 @@ function newTimePeriodScale () { } } + function saveObjectState () { + objectStorage.filePeriodIndex = filePeriodIndex + objectStorage.timePeriodIndex = timePeriodIndex + window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage)) + } + + function readObjectState () { + let objectStorageString = window.localStorage.getItem(MODULE_NAME) + if (objectStorageString !== null && objectStorageString !== '') { + objectStorage = JSON.parse(objectStorageString) + filePeriodIndex = objectStorage.filePeriodIndex + timePeriodIndex = objectStorage.timePeriodIndex + } + } + + function newTimePeriod () { + let timePeriodArray = timePeriodsMasterArray[filePeriodIndex] + thisObject.timePeriod = timePeriodArray[timePeriodIndex][0] + timePeriodLabel = timePeriodArray[timePeriodIndex][1] + + let event = {} + event.timePeriod = thisObject.timePeriod + thisObject.container.eventHandler.raiseEvent('Time Period Changed', event) + window.localStorage.setItem('Current Time Period', JSON.stringify({filePeriodIndex: filePeriodIndex, timePeriodIndex: timePeriodIndex})) + } + function draw () { if (visible === false) { return } @@ -214,41 +240,45 @@ to be visible at the top of the viewPort. */ let label = timePeriodLabel.split('-') let label1 = label[0] let label2 = label[1].toUpperCase() - let fontSize1 = 25 + let fontSize1 = 20 let fontSize2 = 10 /* We draw the circle container */ const RED_LINE_HIGHT = 5 - const RADIUS = 25 const OPACITY = 1 let centerPoint = { x: mouse.position.x, - y: point1.y + viewPort.margins.BOTTOM - 5 + y: point1.y + viewPort.margins.BOTTOM } - browserCanvasContext.beginPath() - browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.closePath() + let container = newContainer() + container.initialize('Visible Time Scale') + container.frame.width = 60 + container.frame.height = 25 + container.frame.position.x = centerPoint.x - container.frame.width / 2 + container.frame.position.y = centerPoint.y - container.frame.height / 2 - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' - browserCanvasContext.fill() + let params = { + cornerRadius: 3, + lineWidth: RED_LINE_HIGHT, + container: container, + borderColor: UI_COLOR.RUSTED_RED, + castShadow: false, + backgroundColor: UI_COLOR.DARK, + opacity: OPACITY + } - browserCanvasContext.beginPath() - browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS, 0.0 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.closePath() - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' - browserCanvasContext.fill() + roundedCornersBackground(params) /* Place the Text */ let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO let labelPoint1 = { - x: mouse.position.x - xOffset1 / 2 - 3, - y: point1.y + viewPort.margins.BOTTOM + x: mouse.position.x - xOffset1 / 2 - 14, + y: point1.y + viewPort.margins.BOTTOM + 6 } browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY @@ -259,8 +289,8 @@ to be visible at the top of the viewPort. */ let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO let labelPoint2 = { - x: mouse.position.x - xOffset2 / 2 - 3, - y: point1.y + viewPort.margins.BOTTOM + fontSize2 + x: mouse.position.x - xOffset2 / 2 - 3 + 14, + y: point1.y + viewPort.margins.BOTTOM + 6 } browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY @@ -268,31 +298,5 @@ to be visible at the top of the viewPort. */ browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y) } - - function saveObjectState () { - objectStorage.filePeriodIndex = filePeriodIndex - objectStorage.timePeriodIndex = timePeriodIndex - window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage)) - } - - function readObjectState () { - let objectStorageString = window.localStorage.getItem(MODULE_NAME) - if (objectStorageString !== null && objectStorageString !== '') { - objectStorage = JSON.parse(objectStorageString) - filePeriodIndex = objectStorage.filePeriodIndex - timePeriodIndex = objectStorage.timePeriodIndex - } - } - - function newTimePeriod () { - let timePeriodArray = timePeriodsMasterArray[filePeriodIndex] - thisObject.timePeriod = timePeriodArray[timePeriodIndex][0] - timePeriodLabel = timePeriodArray[timePeriodIndex][1] - - let event = {} - event.timePeriod = thisObject.timePeriod - thisObject.container.eventHandler.raiseEvent('Time Period Changed', event) - window.localStorage.setItem('Current Time Period', JSON.stringify({filePeriodIndex: filePeriodIndex, timePeriodIndex: timePeriodIndex})) - } } From c4eb7dbdac4ee948ebbd09c9404238db2e0e5479 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 08:24:11 +0200 Subject: [PATCH 214/221] time scale upgraded --- Scales/TimePeriodScale.js | 2 - Scales/TimeScale.js | 80 +++++++++++++++++++++++++-------------- 2 files changed, 51 insertions(+), 31 deletions(-) diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 5c57b5430..7ffce22f1 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -243,8 +243,6 @@ to be visible at the top of the viewPort. */ let fontSize1 = 20 let fontSize2 = 10 - /* We draw the circle container */ - const RED_LINE_HIGHT = 5 const OPACITY = 1 diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 631cdb697..721fc4e10 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -164,21 +164,6 @@ to be visible at the top of the viewPort. */ point4.y = point2.y + MIN_HEIGHT } - /* Lets start the drawing. */ -/* - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y - viewPort.margins.TOP) - browserCanvasContext.lineTo(point2.x, point2.y - viewPort.margins.TOP) - browserCanvasContext.lineTo(point3.x, point3.y - viewPort.margins.TOP) - browserCanvasContext.lineTo(point4.x, point4.y - viewPort.margins.TOP) - browserCanvasContext.lineTo(point1.x, point1.y - viewPort.margins.TOP) - browserCanvasContext.closePath() - - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' - browserCanvasContext.lineWidth = 1 - browserCanvasContext.stroke() -*/ - thisObject.container.frame.position.x = point1.x thisObject.container.frame.position.y = point1.y @@ -194,28 +179,65 @@ to be visible at the top of the viewPort. */ date = new Date(date) let label = date.toUTCString() - let fontSize = 10 + let labelArray = label.split(' ') + let label1 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3] + let label2 = labelArray[4] - let xOffset = label.length * fontSize * FONT_ASPECT_RATIO + let fontSize1 = 20 + let fontSize2 = 10 - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' + const RED_LINE_HIGHT = 5 + const OPACITY = 1 - if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return } + let centerPoint = { + x: mouse.position.x, + y: point1.y + viewPort.margins.BOTTOM + } - browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 7) + let container = newContainer() + container.initialize('Visible Time Scale') + container.frame.width = 190 + container.frame.height = 25 + container.frame.position.x = centerPoint.x - container.frame.width / 2 + container.frame.position.y = centerPoint.y - container.frame.height / 2 - browserCanvasContext.beginPath() + let params = { + cornerRadius: 3, + lineWidth: RED_LINE_HIGHT, + container: container, + borderColor: UI_COLOR.RUSTED_RED, + castShadow: false, + backgroundColor: UI_COLOR.DARK, + opacity: OPACITY + } - browserCanvasContext.moveTo(point.x, point1.y) - browserCanvasContext.lineTo(point.x, point5.y) + roundedCornersBackground(params) - browserCanvasContext.closePath() + /* Place the Text */ - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' - browserCanvasContext.lineWidth = 0.2 - browserCanvasContext.setLineDash([1, 5]) - browserCanvasContext.stroke() + let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO + + let labelPoint1 = { + x: mouse.position.x - xOffset1 + 15, + y: point1.y + viewPort.margins.BOTTOM + 6 + } + + browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + + browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y) + + let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO + + let labelPoint2 = { + x: mouse.position.x - xOffset2 / 2 - 3 + 70, + y: point1.y + viewPort.margins.BOTTOM + 6 + } + + browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + + browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y) } } From b6623191a234d2be28af53d4b6a2e13d9fa3c1f0 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 10:58:21 +0200 Subject: [PATCH 215/221] timeScale working again --- ChartsSpace/TimeMachine.js | 101 +++++++++++++++++++----- Scales/RateScale.js | 29 +++---- Scales/TimePeriodScale.js | 8 +- Scales/TimeScale.js | 157 ++++++------------------------------- Spaces/ChartSpace.js | 15 ++-- 5 files changed, 136 insertions(+), 174 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index b511509aa..a46e5d0c6 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -16,6 +16,8 @@ function newTimeMachine () { let thisObject = { container: undefined, + timeScale: undefined, + rateScale: undefined, charts: [], physics: physics, drawBackground: drawBackground, @@ -40,11 +42,15 @@ function newTimeMachine () { // ... also to request a reference to the object for the cases we need it. const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5 - let timeScale - let rateScale - let timeLineCoordinateSystem = newTimeLineCoordinateSystem() + let mouse = { + position: { + x: 0, + y: 0 + } + } + return thisObject function finalize () { @@ -52,6 +58,14 @@ function newTimeMachine () { let chart = thisObject.charts[i] chart.finalize() } + + thisObject.container.finalize() + thisObject.container = undefined + + thisObject.timeScale.finalize() + thisObject.timeScale = undefined + thisObject.rateScale.finalize() + thisObject.rateScale = undefined } function initialize (callBackFunction) { @@ -97,27 +111,39 @@ function newTimeMachine () { /* Each Time Machine has a Time Scale and a Right Scale. */ - timeScale = newTimeScale() - timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) - timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { + thisObject.timeScale = newTimeScale() + + thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) - timeScale.initialize(timeLineCoordinateSystem) + thisObject.timeScale.initialize() - rateScale = newRateScale() - rateScale.container.connectToParent(thisObject.container, false, false, false, true, true, true) - rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { + thisObject.rateScale = newRateScale() + + thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) - rateScale.initialize(timeLineCoordinateSystem) + thisObject.rateScale.initialize(timeLineCoordinateSystem) + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) initializeTheRest() } + function onMouseOver (event) { + thisObject.timeScale.visible = true + thisObject.rateScale.visible = true + + mouse.position.x = event.x + mouse.position.y = event.y + + thisObject.rateScale.setMousePosition(event) + } + function initializeTheRest () { let leftToInitialize = SUPPORTED_EXCHANGES.length * SUPPORTED_MARKETS.length - 1 // The default exchange and market was already initialized. let alreadyInitialized = 0 @@ -175,8 +201,8 @@ function newTimeMachine () { function getContainer (point, purpose) { let container - if (timeScale !== undefined) { - container = timeScale.getContainer(point) + if (thisObject.timeScale !== undefined) { + container = thisObject.timeScale.getContainer(point) if (container !== undefined) { if (container.isForThisPurpose(purpose)) { return container @@ -184,8 +210,8 @@ function newTimeMachine () { } } - if (rateScale !== undefined) { - container = rateScale.getContainer(point) + if (thisObject.rateScale !== undefined) { + container = thisObject.rateScale.getContainer(point) if (container !== undefined) { if (container.isForThisPurpose(purpose)) { return container @@ -209,6 +235,8 @@ function newTimeMachine () { } else { if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) { thisObject.container.eventHandler.raiseEvent('onMouseNotOver') + thisObject.timeScale.visible = false + thisObject.rateScale.visible = false } return } @@ -220,16 +248,50 @@ function newTimeMachine () { } function thisObjectPhysics () { + /* Mouse Position Date Calculation */ + let datePoint = { + x: mouse.position.x, + y: 0 + } + + let mouseDate = getDateFromPoint(datePoint, thisObject.container, timeLineCoordinateSystem) + + thisObject.timeScale.date = new Date(mouseDate) + + /* Screen Corner Date Calculation */ + + let point = { + x: 0, + y: 0 + } + + let cornerDate = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem) + cornerDate = new Date(cornerDate) + window.localStorage.setItem('Date @ Screen Corner', cornerDate.toUTCString()) } function childrenPhysics () { - timeScale.physics() - rateScale.physics() + thisObject.timeScale.physics() + thisObject.rateScale.physics() for (let i = 0; i < thisObject.charts.length; i++) { let chart = thisObject.charts[i] chart.physics() } + +/* timeScale Positioning */ + + thisObject.timeScale.container.frame.position.x = mouse.position.x - thisObject.timeScale.container.frame.width / 2 + + let point = { + x: 0, + y: thisObject.container.frame.height / 10 + } + + point = transformThisPoint(point, thisObject.container.frame.container) + point = viewPort.fitIntoVisibleArea(point) + + thisObject.timeScale.container.frame.position.y = point.y + 6 } function drawBackground () { @@ -250,8 +312,8 @@ function newTimeMachine () { chart.draw() } - if (timeScale !== undefined) { timeScale.draw() } - if (rateScale !== undefined) { rateScale.draw() } + if (thisObject.timeScale !== undefined) { thisObject.timeScale.draw() } + // if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() } // thisObject.container.frame.draw(false, true, false) } @@ -291,3 +353,4 @@ function newTimeMachine () { ) } } + diff --git a/Scales/RateScale.js b/Scales/RateScale.js index 4d5a08252..e57f9f746 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -4,10 +4,13 @@ function newRateScale () { let thisObject = { heightPercentage: 100, container: undefined, + visible: true, + setMousePosition: setMousePosition, physics: physics, draw: draw, getContainer: getContainer, - initialize: initialize + initialize: initialize, + finalize: finalize } const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 @@ -34,11 +37,15 @@ function newRateScale () { } } - let visible = true let timeLineCoordinateSystem return thisObject + function finalize () { + thisObject.container.finalize() + thisObject.container = undefined + } + function initialize (pTimeLineCoordinateSystem) { timeLineCoordinateSystem = pTimeLineCoordinateSystem @@ -54,17 +61,11 @@ function newRateScale () { let event = {} event.heightPercentage = thisObject.heightPercentage thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + } - thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { - mouse.position.x = event.x - mouse.position.y = event.y - - visible = true - }) - - thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) { - visible = false - }) + function setMousePosition (point) { + mouse.position.x = point.x + mouse.position.y = point.y } function onMouseWheel (event) { @@ -107,10 +108,10 @@ function newRateScale () { } function draw () { - if (visible === false) { return } + if (thisObject.visible === false) { return } /* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still -to be visible at the top of the viewPort. */ +to be thisObject.visible at the top of the viewPort. */ let frame = thisObject.container.parentContainer.frame let point1 diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 7ffce22f1..25d94cf15 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -2,11 +2,12 @@ function newTimePeriodScale () { const MODULE_NAME = 'Time Period Scale' let thisObject = { + timePeriod: undefined, container: undefined, draw: draw, getContainer: getContainer, initialize: initialize, - timePeriod: undefined + finalize: finalize } const FILES_PERIOD_DEFAULT_VALUE = 0 @@ -37,6 +38,11 @@ function newTimePeriodScale () { return thisObject + function finalize () { + thisObject.container.finalize() + thisObject.container = undefined + } + function initialize (pTimeLineCoordinateSystem) { timeLineCoordinateSystem = pTimeLineCoordinateSystem diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 721fc4e10..57bc83243 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -4,10 +4,13 @@ function newTimeScale () { let thisObject = { lenghtPercentage: undefined, container: undefined, + date: undefined, + visible: true, physics: physics, draw: draw, getContainer: getContainer, - initialize: initialize + initialize: initialize, + finalize: finalize } const LENGHT_PERCENTAGE_DEFAULT_VALUE = 5 @@ -21,21 +24,17 @@ function newTimeScale () { thisObject.container.isClickeable = false thisObject.container.isWheelable = true - let mouse = { - position: { - x: 0, - y: 0 - } - } - - let visible = true - let timeLineCoordinateSystem + thisObject.container.frame.width = 190 + thisObject.container.frame.height = 25 return thisObject - function initialize (pTimeLineCoordinateSystem) { - timeLineCoordinateSystem = pTimeLineCoordinateSystem + function finalize () { + thisObject.container.finalize() + thisObject.container = undefined + } + function initialize () { thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME) @@ -47,18 +46,8 @@ function newTimeScale () { let event = {} event.lenghtPercentage = thisObject.lenghtPercentage + thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) - - thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) { - mouse.position.x = event.x - mouse.position.y = event.y - - visible = true - }) - - thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) { - visible = false - }) } function onMouseWheel (event) { @@ -77,108 +66,20 @@ function newTimeScale () { window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage) } - function getContainer (pPoint) { - let container - -/* In this case we manually frame this point since we do a very special treatment of the position of this scale. */ - let point = { - x: 0, - y: 0 - } - point.x = pPoint.x - thisObject.container.frame.position.x - point.y = pPoint.y - thisObject.container.frame.position.y + viewPort.margins.TOP - - if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { + function getContainer (point) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container - } else { - /* This point does not belong to this space. */ - - return undefined } } function physics () { - let point = { - x: 0, - y: 0 - } - let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem) - date = new Date(date) - window.localStorage.setItem('Date @ Screen Corner', date.toUTCString()) } function draw () { - if (visible === false) { return } + if (thisObject.visible === false || thisObject.date === undefined) { return } -/* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still -to be visible at the top of the viewPort. */ - - let frame = thisObject.container.parentContainer.frame - let point1 - let point2 - let point3 - let point4 - - point1 = { - x: 0, - y: 0 - } - - point2 = { - x: frame.width, - y: 0 - } - - point3 = { - x: frame.width, - y: frame.height / 10 - } - - point4 = { - x: 0, - y: frame.height / 10 - } - - point5 = { - x: 0, - y: frame.height - } - - /* Now the transformations. */ - - point1 = transformThisPoint(point1, frame.container) - point2 = transformThisPoint(point2, frame.container) - point3 = transformThisPoint(point3, frame.container) - point4 = transformThisPoint(point4, frame.container) - point5 = transformThisPoint(point5, frame.container) - - point1 = viewPort.fitIntoVisibleArea(point1) - point2 = viewPort.fitIntoVisibleArea(point2) - point3 = viewPort.fitIntoVisibleArea(point3) - point4 = viewPort.fitIntoVisibleArea(point4) - point5 = viewPort.fitIntoVisibleArea(point5) - - if (point3.y - point2.y < MIN_HEIGHT) { - point3.y = point2.y + MIN_HEIGHT - point4.y = point2.y + MIN_HEIGHT - } - - thisObject.container.frame.position.x = point1.x - thisObject.container.frame.position.y = point1.y - - thisObject.container.frame.width = point2.x - point1.x - thisObject.container.frame.height = point3.y - point2.y - - let point = { - x: mouse.position.x, - y: point1.y - viewPort.margins.TOP - } - - let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem) - date = new Date(date) - - let label = date.toUTCString() + let label = thisObject.date.toUTCString() let labelArray = label.split(' ') let label1 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3] let label2 = labelArray[4] @@ -189,22 +90,10 @@ to be visible at the top of the viewPort. */ const RED_LINE_HIGHT = 5 const OPACITY = 1 - let centerPoint = { - x: mouse.position.x, - y: point1.y + viewPort.margins.BOTTOM - } - - let container = newContainer() - container.initialize('Visible Time Scale') - container.frame.width = 190 - container.frame.height = 25 - container.frame.position.x = centerPoint.x - container.frame.width / 2 - container.frame.position.y = centerPoint.y - container.frame.height / 2 - let params = { cornerRadius: 3, lineWidth: RED_LINE_HIGHT, - container: container, + container: thisObject.container, borderColor: UI_COLOR.RUSTED_RED, castShadow: false, backgroundColor: UI_COLOR.DARK, @@ -218,10 +107,12 @@ to be visible at the top of the viewPort. */ let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO let labelPoint1 = { - x: mouse.position.x - xOffset1 + 15, - y: point1.y + viewPort.margins.BOTTOM + 6 + x: thisObject.container.frame.width / 2 - xOffset1 + 15, + y: thisObject.container.frame.height / 2 + 6 } + labelPoint1 = thisObject.container.frame.frameThisPoint(labelPoint1) + browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' @@ -230,10 +121,12 @@ to be visible at the top of the viewPort. */ let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO let labelPoint2 = { - x: mouse.position.x - xOffset2 / 2 - 3 + 70, - y: point1.y + viewPort.margins.BOTTOM + 6 + x: thisObject.container.frame.width / 2 - xOffset2 / 2 - 3 + 60, + y: thisObject.container.frame.height / 2 + 6 } + labelPoint2 = thisObject.container.frame.frameThisPoint(labelPoint2) + browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js index 96aaa7bbc..e4242795a 100644 --- a/Spaces/ChartSpace.js +++ b/Spaces/ChartSpace.js @@ -15,12 +15,12 @@ function newChartSpace () { let thisObject = { visible: true, container: undefined, + timeMachines: [], fitIntoVisibleArea: fitIntoVisibleArea, isThisPointVisible: isThisPointVisible, physics: physics, drawBackground: drawBackground, draw: draw, - timeMachines: [], getContainer: getContainer, // returns the inner most container that holds the point received by parameter. initialize: initialize, finalize: finalize @@ -35,14 +35,13 @@ function newChartSpace () { return thisObject function finalize () { - try { - for (let i = 0; i < thisObject.timeMachines.length; i++) { - let timeMachine = thisObject.timeMachines[i] - timeMachine.finalize() - } - } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) } + for (let i = 0; i < thisObject.timeMachines.length; i++) { + let timeMachine = thisObject.timeMachines[i] + timeMachine.finalize() } + + thisObject.container.finalize() + thisObject.container = undefined } function initialize (callBackFunction) { From 261815113519c8b52bdf2d1d5482a5d57105c4da Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 11:46:57 +0200 Subject: [PATCH 216/221] Time Scale with arrows finished --- Scales/TimeScale.js | 118 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 117 insertions(+), 1 deletion(-) diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 57bc83243..1a4d6ca7f 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -23,10 +23,12 @@ function newTimeScale () { thisObject.container.isDraggeable = false thisObject.container.isClickeable = false thisObject.container.isWheelable = true + thisObject.container.detectMouseOver = true thisObject.container.frame.width = 190 thisObject.container.frame.height = 25 + let isMouseOver return thisObject function finalize () { @@ -36,6 +38,8 @@ function newTimeScale () { function initialize () { thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME) if (!thisObject.lenghtPercentage) { @@ -50,6 +54,14 @@ function newTimeScale () { thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) } + function onMouseOver () { + isMouseOver = true + } + + function onMouseNotOver () { + isMouseOver = false + } + function onMouseWheel (event) { delta = event.wheelDelta if (delta < 0) { @@ -77,6 +89,111 @@ function newTimeScale () { } function draw () { + drawTime() + drawArrows() + } + + function drawArrows () { + if (isMouseOver !== true) { return } + + const X_OFFSET = thisObject.container.frame.width / 2 + const Y_OFFSET = thisObject.container.frame.height / 2 - 10 + const HEIGHT = 18 + const WIDTH = 6 + const LINE_WIDTH = 3 + const OPACITY = 0.2 + const MIN_DISTANCE_FROM_CENTER = 110 + const CURRENT_VALUE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.lenghtPercentage + const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 100 + let DISTANCE_BETWEEN_ARROWS = 9 + let ARROW_DIRECTION = 0 + + ARROW_DIRECTION = -1 + drawTwoArrows() + ARROW_DIRECTION = 1 + drawTwoArrows() + + function drawTwoArrows () { + point1 = { + x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION, + y: Y_OFFSET - 0 + } + + point2 = { + x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION, + y: Y_OFFSET + HEIGHT / 2 + } + + point3 = { + x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION, + y: Y_OFFSET + HEIGHT + } + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + + point4 = { + x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION, + y: Y_OFFSET - 0 + } + + point5 = { + x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION, + y: Y_OFFSET + HEIGHT / 2 + } + + point6 = { + x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION, + y: Y_OFFSET + HEIGHT + } + + point4 = thisObject.container.frame.frameThisPoint(point4) + point5 = thisObject.container.frame.frameThisPoint(point5) + point6 = thisObject.container.frame.frameThisPoint(point6) + + point7 = { + x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION, + y: Y_OFFSET - 0 + } + + point8 = { + x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION, + y: Y_OFFSET + HEIGHT / 2 + } + + point9 = { + x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION, + y: Y_OFFSET + HEIGHT + } + + point7 = thisObject.container.frame.frameThisPoint(point7) + point8 = thisObject.container.frame.frameThisPoint(point8) + point9 = thisObject.container.frame.frameThisPoint(point9) + + 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.moveTo(point4.x, point4.y) + browserCanvasContext.lineTo(point5.x, point5.y) + browserCanvasContext.lineTo(point6.x, point6.y) + + browserCanvasContext.moveTo(point7.x, point7.y) + browserCanvasContext.lineTo(point8.x, point8.y) + browserCanvasContext.lineTo(point9.x, point9.y) + + browserCanvasContext.lineWidth = LINE_WIDTH + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' + browserCanvasContext.stroke() + } + } + + function drawTime () { if (thisObject.visible === false || thisObject.date === undefined) { return } let label = thisObject.date.toUTCString() @@ -133,4 +250,3 @@ function newTimeScale () { browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y) } } - From 41e95ca1a85671581f82ca9d25e72b5008769892 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 12:09:33 +0200 Subject: [PATCH 217/221] Final BUGS on timeScale fixed --- ChartsSpace/TimeMachine.js | 3 ++- Scales/TimeScale.js | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index a46e5d0c6..86660f227 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -79,7 +79,6 @@ function newTimeMachine () { thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) { recalculateScale() - moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition) }) /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ @@ -116,6 +115,7 @@ function newTimeMachine () { thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) + moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true, event.mousePosition) }) thisObject.timeScale.initialize() @@ -125,6 +125,7 @@ function newTimeMachine () { thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) + moveToUserPosition(thisObject.container, timeLineCoordinateSystem, true, false, event.mousePosition) }) thisObject.rateScale.initialize(timeLineCoordinateSystem) diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 1a4d6ca7f..6c0b9d59d 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -102,10 +102,11 @@ function newTimeScale () { const WIDTH = 6 const LINE_WIDTH = 3 const OPACITY = 0.2 + const DISTANCE_BETWEEN_ARROWS = 10 const MIN_DISTANCE_FROM_CENTER = 110 const CURRENT_VALUE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.lenghtPercentage - const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 100 - let DISTANCE_BETWEEN_ARROWS = 9 + const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 100 + DISTANCE_BETWEEN_ARROWS + let ARROW_DIRECTION = 0 ARROW_DIRECTION = -1 @@ -250,3 +251,4 @@ function newTimeScale () { browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y) } } + From 439dd28ca1d379c663724da19e0bff4485d9ac4c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 12:25:18 +0200 Subject: [PATCH 218/221] Now is really working (timeScale) --- ChartsSpace/TimeMachine.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 86660f227..54e99edc8 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -61,7 +61,6 @@ function newTimeMachine () { thisObject.container.finalize() thisObject.container = undefined - thisObject.timeScale.finalize() thisObject.timeScale = undefined thisObject.rateScale.finalize() @@ -286,13 +285,13 @@ function newTimeMachine () { let point = { x: 0, - y: thisObject.container.frame.height / 10 + y: 0 } point = transformThisPoint(point, thisObject.container.frame.container) - point = viewPort.fitIntoVisibleArea(point) + point = thisObject.container.fitFunction(point) - thisObject.timeScale.container.frame.position.y = point.y + 6 + thisObject.timeScale.container.frame.position.y = point.y } function drawBackground () { From abe3c89c96736d76da1cc41e5b4826f8b36cdb0f Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 13:04:35 +0200 Subject: [PATCH 219/221] BUG fixed: when zoomed in timeScale not worked --- ChartsSpace/TimeMachine.js | 11 ++++------- ChartsSpace/ViewPort.js | 23 ++++++++++++----------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 54e99edc8..322147780 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -76,10 +76,6 @@ function newTimeMachine () { recalculateScale() - thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) { - recalculateScale() - }) - /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */ let position = 0 // This defines the position of each chart respect to each other. @@ -113,8 +109,9 @@ function newTimeMachine () { thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100 - thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) + recalculateScale() moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true, event.mousePosition) + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) thisObject.timeScale.initialize() @@ -123,8 +120,9 @@ function newTimeMachine () { thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100 - thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) + recalculateScale() moveToUserPosition(thisObject.container, timeLineCoordinateSystem, true, false, event.mousePosition) + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) thisObject.rateScale.initialize(timeLineCoordinateSystem) @@ -353,4 +351,3 @@ function newTimeMachine () { ) } } - diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js index 264c5b07b..358f3a1e6 100644 --- a/ChartsSpace/ViewPort.js +++ b/ChartsSpace/ViewPort.js @@ -1,4 +1,4 @@ -  + function newViewPort () { const MODULE_NAME = 'Viewport' const INFO_LOG = false @@ -11,8 +11,8 @@ function newViewPort () { let ANIMATION_INCREMENT = 0.25 - let TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - let BOTTOM_MARGIN = 20 + COCKPIT_SPACE_HEIGHT + let TOP_MARGIN = 30 + TOP_SPACE_HEIGHT + let BOTTOM_MARGIN = 30 + COCKPIT_SPACE_HEIGHT let LEFT_MARGIN = 50 let RIGHT_MARGIN = 50 let MARGINS = { @@ -83,8 +83,8 @@ function newViewPort () { } function resize () { - TOP_MARGIN = 15 + TOP_SPACE_HEIGHT - BOTTOM_MARGIN = 20 + browserCanvas.height - COCKPIT_SPACE_POSITION + TOP_MARGIN = 30 + TOP_SPACE_HEIGHT + BOTTOM_MARGIN = 30 + browserCanvas.height - COCKPIT_SPACE_POSITION LEFT_MARGIN = 50 RIGHT_MARGIN = 50 MARGINS = { @@ -142,7 +142,7 @@ function newViewPort () { if (Math.trunc(Math.abs(targetOffset.y - offset.y) * 1000) >= Math.trunc(Math.abs(offsetIncrement.y) * 1000)) { offset.y = offset.y + offsetIncrement.y - // console.log("offset.y changed to " + offset.y) + // console.log("offset.y changed to " + offset.y) } else { offsetIncrement.y = 0 } @@ -161,7 +161,7 @@ function newViewPort () { thisObject.eventHandler.raiseEvent('Offset Changed', event) - // console.log("displace produced new Offset x = " + offset.x + " y = " + offset.y); + // console.log("displace produced new Offset x = " + offset.x + " y = " + offset.y); } function displaceTarget (displaceVector) { @@ -173,7 +173,7 @@ function newViewPort () { y: (targetOffset.y - offset.y) / 10 } - // console.log("displaceTarget x = " + targetOffset.x + " y = " + targetOffset.y); + // console.log("displaceTarget x = " + targetOffset.x + " y = " + targetOffset.y); } function newZoomLevel (level) { @@ -196,13 +196,13 @@ function newViewPort () { } function isMinZoom () { - /* returns true is we are currently at the min zoom level. */ + /* returns true is we are currently at the min zoom level. */ if (thisObject.zoomTargetLevel === MIN_ZOOM_LEVEL) { return true } else { return false } } function applyZoom (amount) { - // console.log("applyZoom amount: " + amount); + // console.log("applyZoom amount: " + amount); if (amount > 0) { if (thisObject.zoomTargetLevel > -5) { @@ -300,7 +300,7 @@ function newViewPort () { } function fitIntoVisibleArea (point) { - /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ + /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */ if (point.x > thisObject.visibleArea.bottomRight.x + 1) { point.x = thisObject.visibleArea.bottomRight.x + 1 @@ -453,3 +453,4 @@ function newViewPort () { } } } + From fc2fd805a29041c91878cb98239c41d6a9f8ecbe Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 13:19:49 +0200 Subject: [PATCH 220/221] Another bug corrected. Arrows painted when control is not visible. --- Scales/TimeScale.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 6c0b9d59d..14b85566a 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -95,6 +95,7 @@ function newTimeScale () { function drawArrows () { if (isMouseOver !== true) { return } + if (thisObject.visible === false || thisObject.date === undefined) { return } const X_OFFSET = thisObject.container.frame.width / 2 const Y_OFFSET = thisObject.container.frame.height / 2 - 10 From 74d58f8dcba5d22bf7ba76106981c7b77f7682ca Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 16 May 2019 14:51:04 +0200 Subject: [PATCH 221/221] rateScale redesigned --- ChartsSpace/TimeMachine.js | 64 ++++++--- Scales/Commons.js | 50 +++++++ Scales/RateScale.js | 260 ++++++++++++++++++------------------- Scales/TimeScale.js | 49 +------ 4 files changed, 220 insertions(+), 203 deletions(-) create mode 100644 Scales/Commons.js diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 322147780..4ef15162d 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -125,7 +125,7 @@ function newTimeMachine () { thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) }) - thisObject.rateScale.initialize(timeLineCoordinateSystem) + thisObject.rateScale.initialize() thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) @@ -138,8 +138,6 @@ function newTimeMachine () { mouse.position.x = event.x mouse.position.y = event.y - - thisObject.rateScale.setMousePosition(event) } function initializeTheRest () { @@ -246,17 +244,6 @@ function newTimeMachine () { } function thisObjectPhysics () { - /* Mouse Position Date Calculation */ - - let datePoint = { - x: mouse.position.x, - y: 0 - } - - let mouseDate = getDateFromPoint(datePoint, thisObject.container, timeLineCoordinateSystem) - - thisObject.timeScale.date = new Date(mouseDate) - /* Screen Corner Date Calculation */ let point = { @@ -272,24 +259,61 @@ function newTimeMachine () { function childrenPhysics () { thisObject.timeScale.physics() thisObject.rateScale.physics() + for (let i = 0; i < thisObject.charts.length; i++) { let chart = thisObject.charts[i] chart.physics() } -/* timeScale Positioning */ + /* Mouse Position Date Calculation */ + + let timePoint = { + x: mouse.position.x, + y: 0 + } + + let mouseDate = getDateFromPoint(timePoint, thisObject.container, timeLineCoordinateSystem) + + thisObject.timeScale.date = new Date(mouseDate) + + /* Mouse Position Rate Calculation */ + + let ratePoint = { + x: 0, + y: mouse.position.y + } + + let mouseRate = getRateFromPoint(ratePoint, thisObject.container, timeLineCoordinateSystem) + + thisObject.rateScale.rate = mouseRate + + /* timeScale Positioning */ thisObject.timeScale.container.frame.position.x = mouse.position.x - thisObject.timeScale.container.frame.width / 2 - let point = { + timePoint = { x: 0, y: 0 } - point = transformThisPoint(point, thisObject.container.frame.container) - point = thisObject.container.fitFunction(point) + timePoint = transformThisPoint(timePoint, thisObject.container.frame.container) + timePoint = thisObject.container.fitFunction(timePoint) - thisObject.timeScale.container.frame.position.y = point.y + thisObject.timeScale.container.frame.position.y = timePoint.y + + /* rateScale Positioning */ + + thisObject.rateScale.container.frame.position.y = mouse.position.y - thisObject.rateScale.container.frame.height / 2 + + ratePoint = { + x: 10000000000000, + y: 0 + } + + ratePoint = transformThisPoint(ratePoint, thisObject.container.frame.container) + ratePoint = thisObject.container.fitFunction(ratePoint) + + thisObject.rateScale.container.frame.position.x = ratePoint.x - thisObject.rateScale.container.frame.width } function drawBackground () { @@ -311,7 +335,7 @@ function newTimeMachine () { } if (thisObject.timeScale !== undefined) { thisObject.timeScale.draw() } - // if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() } + if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() } // thisObject.container.frame.draw(false, true, false) } diff --git a/Scales/Commons.js b/Scales/Commons.js new file mode 100644 index 000000000..b8497ca08 --- /dev/null +++ b/Scales/Commons.js @@ -0,0 +1,50 @@ + +function drawScaleDisplay (label1, label2, xExtraOffSet1, xExtraOffSet2, container) { + let fontSize1 = 20 + let fontSize2 = 10 + + const RED_LINE_HIGHT = 5 + const OPACITY = 1 + + let params = { + cornerRadius: 3, + lineWidth: RED_LINE_HIGHT, + container: container, + borderColor: UI_COLOR.RUSTED_RED, + castShadow: false, + backgroundColor: UI_COLOR.DARK, + opacity: OPACITY + } + + roundedCornersBackground(params) + + /* Place the Text */ + + let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO + + let labelPoint1 = { + x: container.frame.width / 2 - xOffset1 + xExtraOffSet1, + y: container.frame.height / 2 + 6 + } + + labelPoint1 = container.frame.frameThisPoint(labelPoint1) + + browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + + browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y) + + let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO + + let labelPoint2 = { + x: container.frame.width / 2 - xOffset2 / 2 - 3 + xExtraOffSet2, + y: container.frame.height / 2 + 6 + } + + labelPoint2 = container.frame.frameThisPoint(labelPoint2) + + browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + + browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y) +} diff --git a/Scales/RateScale.js b/Scales/RateScale.js index e57f9f746..10b6c14e1 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -4,8 +4,8 @@ function newRateScale () { let thisObject = { heightPercentage: 100, container: undefined, + rate: undefined, visible: true, - setMousePosition: setMousePosition, physics: physics, draw: draw, getContainer: getContainer, @@ -20,25 +20,15 @@ function newRateScale () { thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) - thisObject.container.frame.width = viewPort.margins.RIGHT - thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y - - thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x - thisObject.container.frame.position.y = TOP_SPACE_HEIGHT - thisObject.container.isDraggeable = false thisObject.container.isClickeable = false thisObject.container.isWheelable = true + thisObject.container.detectMouseOver = true - let mouse = { - position: { - x: 0, - y: 0 - } - } - - let timeLineCoordinateSystem + thisObject.container.frame.width = 110 + thisObject.container.frame.height = 25 + let isMouseOver return thisObject function finalize () { @@ -46,10 +36,10 @@ function newRateScale () { thisObject.container = undefined } - function initialize (pTimeLineCoordinateSystem) { - timeLineCoordinateSystem = pTimeLineCoordinateSystem - + function initialize () { thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME) if (!thisObject.heightPercentage) { @@ -63,9 +53,12 @@ function newRateScale () { thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) } - function setMousePosition (point) { - mouse.position.x = point.x - mouse.position.y = point.y + function onMouseOver () { + isMouseOver = true + } + + function onMouseNotOver () { + isMouseOver = false } function onMouseWheel (event) { @@ -83,23 +76,9 @@ function newRateScale () { window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage) } - function getContainer (pPoint) { - let container - -/* In this case we manually frame this point since we do a very special treatment of the position of this scale. */ - let point = { - x: 0, - y: 0 - } - point.x = pPoint.x - thisObject.container.frame.position.x - viewPort.margins.RIGHT - point.y = pPoint.y - thisObject.container.frame.position.y - - if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) { + function getContainer (point) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container - } else { - /* This point does not belong to this space. */ - - return undefined } } @@ -108,110 +87,121 @@ function newRateScale () { } function draw () { - if (thisObject.visible === false) { return } + drawRate() + drawArrows() + } -/* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still -to be thisObject.visible at the top of the viewPort. */ + function drawArrows () { + if (isMouseOver !== true) { return } + if (thisObject.visible === false || thisObject.rate === undefined) { return } - let frame = thisObject.container.parentContainer.frame - let point1 - let point2 - let point3 - let point4 + const X_OFFSET = thisObject.container.frame.width / 2 + const Y_OFFSET = thisObject.container.frame.height / 2 + const HEIGHT = 6 + const WIDTH = 18 + const LINE_WIDTH = 3 + const OPACITY = 0.2 + const DISTANCE_BETWEEN_ARROWS = 10 + const MIN_DISTANCE_FROM_CENTER = 30 + const CURRENT_VALUE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.heightPercentage + const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 115 + DISTANCE_BETWEEN_ARROWS - point1 = { - x: frame.width - frame.width / 10, - y: 0 + let ARROW_DIRECTION = 0 + + ARROW_DIRECTION = -1 + drawTwoArrows() + ARROW_DIRECTION = 1 + drawTwoArrows() + + function drawTwoArrows () { + point1 = { + x: X_OFFSET - WIDTH / 2, + y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point2 = { + x: X_OFFSET, + y: Y_OFFSET + HEIGHT * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point3 = { + x: X_OFFSET + WIDTH / 2, + y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point1 = thisObject.container.frame.frameThisPoint(point1) + point2 = thisObject.container.frame.frameThisPoint(point2) + point3 = thisObject.container.frame.frameThisPoint(point3) + + point4 = { + x: X_OFFSET - WIDTH / 2, + y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point5 = { + x: X_OFFSET, + y: Y_OFFSET + HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point6 = { + x: X_OFFSET + WIDTH / 2, + y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION + } + + point4 = thisObject.container.frame.frameThisPoint(point4) + point5 = thisObject.container.frame.frameThisPoint(point5) + point6 = thisObject.container.frame.frameThisPoint(point6) + + point7 = { + x: X_OFFSET - WIDTH / 2, + y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION + } + + point8 = { + x: X_OFFSET, + y: Y_OFFSET - HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION + } + + point9 = { + x: X_OFFSET + WIDTH / 2, + y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION + } + + point7 = thisObject.container.frame.frameThisPoint(point7) + point8 = thisObject.container.frame.frameThisPoint(point8) + point9 = thisObject.container.frame.frameThisPoint(point9) + + 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.moveTo(point4.x, point4.y) + browserCanvasContext.lineTo(point5.x, point5.y) + browserCanvasContext.lineTo(point6.x, point6.y) + + browserCanvasContext.moveTo(point7.x, point7.y) + browserCanvasContext.lineTo(point8.x, point8.y) + browserCanvasContext.lineTo(point9.x, point9.y) + + browserCanvasContext.lineWidth = LINE_WIDTH + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' + browserCanvasContext.stroke() } + } - point2 = { - x: frame.width, - y: 0 - } + function drawRate () { + if (thisObject.visible === false || thisObject.rate === undefined) { return } - point3 = { - x: frame.width, - y: frame.height - } + let label = (thisObject.rate - Math.trunc(thisObject.rate)).toFixed(2) + let labelArray = label.split('.') + let label1 = (Math.trunc(thisObject.rate)).toLocaleString() + let label2 = labelArray[1] - point4 = { - x: frame.width - frame.width / 10, - y: frame.height - } - - point5 = { - x: 0, - y: 0 - } - - /* Now the transformations. */ - - point1 = transformThisPoint(point1, frame.container) - point2 = transformThisPoint(point2, frame.container) - point3 = transformThisPoint(point3, frame.container) - point4 = transformThisPoint(point4, frame.container) - point5 = transformThisPoint(point5, frame.container) - - point1 = viewPort.fitIntoVisibleArea(point1) - point2 = viewPort.fitIntoVisibleArea(point2) - point3 = viewPort.fitIntoVisibleArea(point3) - point4 = viewPort.fitIntoVisibleArea(point4) - point5 = viewPort.fitIntoVisibleArea(point5) - - if (point2.x - point1.x < MIN_WIDTH) { - point1.x = point2.x - MIN_WIDTH - point4.x = point2.x - MIN_WIDTH - } - - /* Lets start the drawing. */ -/* - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x + viewPort.margins.RIGHT, point2.y) - browserCanvasContext.lineTo(point3.x + viewPort.margins.RIGHT, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.lineTo(point1.x, point1.y) - browserCanvasContext.closePath() - - browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)' - browserCanvasContext.lineWidth = 1 - browserCanvasContext.stroke() -*/ - thisObject.container.frame.position.x = point1.x - thisObject.container.frame.position.y = point1.y - - thisObject.container.frame.width = point2.x - point1.x - thisObject.container.frame.height = point3.y - point2.y - - let point = { - x: point5.x + viewPort.margins.RIGHT, - y: mouse.position.y - } - - let rate = getRateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem) - - let label = rate.toFixed(2) - let fontSize = 10 - - let xOffset = label.length * fontSize * FONT_ASPECT_RATIO - - if (point.y + fontSize / 2 > point3.y || point.y - fontSize / 2 < point1.y) { return } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)' - - browserCanvasContext.fillText(label, point1.x + viewPort.margins.RIGHT, point.y + fontSize / 2) - - browserCanvasContext.beginPath() - - browserCanvasContext.moveTo(point.x, point.y) - browserCanvasContext.lineTo(point1.x + viewPort.margins.RIGHT, point.y) - - browserCanvasContext.closePath() - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)' - browserCanvasContext.lineWidth = 0.2 - browserCanvasContext.setLineDash([1, 5]) - browserCanvasContext.stroke() + drawScaleDisplay(label1, label2, 10, 40, thisObject.container) } } + diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index 14b85566a..fc0a5c2bd 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -50,7 +50,6 @@ function newTimeScale () { let event = {} event.lenghtPercentage = thisObject.lenghtPercentage - thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) } @@ -203,53 +202,7 @@ function newTimeScale () { let label1 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3] let label2 = labelArray[4] - let fontSize1 = 20 - let fontSize2 = 10 - - const RED_LINE_HIGHT = 5 - const OPACITY = 1 - - let params = { - cornerRadius: 3, - lineWidth: RED_LINE_HIGHT, - container: thisObject.container, - borderColor: UI_COLOR.RUSTED_RED, - castShadow: false, - backgroundColor: UI_COLOR.DARK, - opacity: OPACITY - } - - roundedCornersBackground(params) - - /* Place the Text */ - - let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO - - let labelPoint1 = { - x: thisObject.container.frame.width / 2 - xOffset1 + 15, - y: thisObject.container.frame.height / 2 + 6 - } - - labelPoint1 = thisObject.container.frame.frameThisPoint(labelPoint1) - - browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - - browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y) - - let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO - - let labelPoint2 = { - x: thisObject.container.frame.width / 2 - xOffset2 / 2 - 3 + 60, - y: thisObject.container.frame.height / 2 + 6 - } - - labelPoint2 = thisObject.container.frame.frameThisPoint(labelPoint2) - - browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - - browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y) + drawScaleDisplay(label1, label2, 10, 60, thisObject.container) } }