diff --git a/CandlePanel.js b/CandlePanel.js index 17e04819a..c160b95aa 100644 --- a/CandlePanel.js +++ b/CandlePanel.js @@ -44,9 +44,9 @@ function newAAMastersPlottersCandlesVolumesCandlesCandlePanel() { /* First we check if this point is inside this space. */ - if (this.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return this.container; + return thisObject.container; } else { @@ -67,7 +67,7 @@ function newAAMastersPlottersCandlesVolumesCandlesCandlePanel() { function draw() { - this.container.frame.draw(false, false, true); + thisObject.container.frame.draw(false, false, true); plotCurrentCandleInfo(); diff --git a/Candles.js b/Candles.js index 27241b7aa..933c184a0 100644 --- a/Candles.js +++ b/Candles.js @@ -32,9 +32,8 @@ /* this is part of the module template */ - let container = newContainer(); // Do not touch this 3 lines, they are just needed. - container.initialize(); - thisObject.container = container; + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) let timeLineCoordinateSystem = newTimeLineCoordinateSystem(); // Needed to be able to plot on the timeline, otherwise not. @@ -64,6 +63,7 @@ viewPort.eventHandler.stopListening("Offset Changed", onOffsetChanged); marketFiles.eventHandler.stopListening("Files Updated", onFilesUpdated); canvas.eventHandler.stopListening("Drag Finished", onDragFinished); + thisObject.container.eventHandler.stopListening('Dimmensions Changed', onContainerDimmensionsChanged) /* Destroyd References */ @@ -118,6 +118,13 @@ recalculate(); + thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', onContainerDimmensionsChanged) + + function onContainerDimmensionsChanged() { + recalculateScale() + recalculate(); + } + callBackFunction(); } catch (err) { @@ -136,9 +143,9 @@ /* First we check if this point is inside this space. */ - if (this.container.frame.isThisPointHere(point) === true) { + if (thisObject.container.frame.isThisPointHere(point) === true) { - return this.container; + return thisObject.container; } else { @@ -348,7 +355,7 @@ if (INTENSIVE_LOG === true) { logger.write("[INFO] draw -> Entering function."); } - this.container.frame.draw(); + thisObject.container.frame.draw(); plotChart(); @@ -605,6 +612,9 @@ if (INTENSIVE_LOG === true) { logger.write("[INFO] plotChart -> Entering function."); } + let userPosition = getUserPosition() + userPositionDate = userPosition.point.x + if (candles.length > 0) { /* Now we calculate and plot the candles */ @@ -698,21 +708,11 @@ browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; browserCanvasContext.fill(); - if (datetime !== undefined) { + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT + ', 1)'; - let dateValue = datetime.valueOf(); - - if (dateValue >= candle.begin && dateValue <= candle.end) { - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'; // Current candle accroding to time - - } else { - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT + ', 1)'; - } - - } else { - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT + ', 1)'; - } + if (userPositionDate >= candle.begin && userPositionDate <= candle.end) { + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'; // Current candle accroding to time + } browserCanvasContext.lineWidth = 1; browserCanvasContext.stroke(); @@ -730,45 +730,28 @@ if (candle.direction === 'down') { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', 1)'; } if (candle.direction === 'side') { browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; } - if (datetime !== undefined) { + if (candle.direction === 'up') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'; } + if (candle.direction === 'down') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'; } + if (candle.direction === 'side') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; } - let dateValue = datetime.valueOf(); + if (userPositionDate >= candle.begin && userPositionDate <= candle.end) { - if (dateValue >= candle.begin && dateValue <= candle.end) { + /* highlight the current candle */ - /* highlight the current candle */ - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'; // Current candle accroding to time - - let currentCandle = { - bodyWidth: candlePoint2.x - candlePoint1.x, - bodyHeight: candlePoint3.y - candlePoint2.y, - stickHeight: stickPoint4.y - stickPoint2.y, - stickWidth: stickPoint2.x - stickPoint1.x, - stickStart: candlePoint2.y - stickPoint2.y, - period: timePeriod, - innerCandle: candle - }; - - thisObject.container.eventHandler.raiseEvent("Current Candle Changed", currentCandle); - - } else { - - if (candle.direction === 'up') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'; } - if (candle.direction === 'down') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'; } - if (candle.direction === 'side') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; } - } - - } else { - - if (candle.direction === 'up') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'; } - if (candle.direction === 'down') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'; } - if (candle.direction === 'side') { browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'; } + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'; // Current candle accroding to time + let currentCandle = { + bodyWidth: candlePoint2.x - candlePoint1.x, + bodyHeight: candlePoint3.y - candlePoint2.y, + stickHeight: stickPoint4.y - stickPoint2.y, + stickWidth: stickPoint2.x - stickPoint1.x, + stickStart: candlePoint2.y - stickPoint2.y, + period: timePeriod, + innerCandle: candle + }; + thisObject.container.eventHandler.raiseEvent("Current Candle Changed", currentCandle); } - - - + if ( candlePoint1.x < viewPort.visibleArea.topLeft.x + 50 || diff --git a/VolumePanel.js b/VolumePanel.js index 1e7214bee..e09f06871 100644 --- a/VolumePanel.js +++ b/VolumePanel.js @@ -44,9 +44,9 @@ function newAAMastersPlottersCandlesVolumesVolumesVolumePanel() { /* First we check if this point is inside this space. */ - if (this.container.frame.isThisPointHere(point, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return this.container; + return thisObject.container; } else { @@ -67,7 +67,7 @@ function newAAMastersPlottersCandlesVolumesVolumesVolumePanel() { function draw() { - this.container.frame.draw(false, false, true); + thisObject.container.frame.draw(false, false, true); plotCurrentVolumeInfo(); diff --git a/Volumes.js b/Volumes.js index 512c3d4c7..810a2b154 100644 --- a/Volumes.js +++ b/Volumes.js @@ -27,9 +27,8 @@ /* this is part of the module template */ - let container = newContainer(); // Do not touch this 3 lines, they are just needed. - container.initialize(); - thisObject.container = container; + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) let timeLineCoordinateSystem = newTimeLineCoordinateSystem(); // Needed to be able to plot on the timeline, otherwise not. let plotAreaFrame = newTimeLineCoordinateSystem(); // This chart uses this extra object. @@ -62,6 +61,7 @@ viewPort.eventHandler.stopListening("Offset Changed", onOffsetChanged); marketFiles.eventHandler.stopListening("Files Updated", onFilesUpdated); canvas.eventHandler.stopListening("Drag Finished", onDragFinished); + thisObject.container.eventHandler.stopListening('Dimmensions Changed', onContainerDimmensionsChanged) /* Destroyd References */ @@ -116,6 +116,14 @@ recalculate(); recalculateScaleY(); + thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', onContainerDimmensionsChanged) + + function onContainerDimmensionsChanged() { + recalculateScaleX(); + recalculate(); + recalculateScaleY(); + } + callBackFunction(); } catch (err) { @@ -142,9 +150,9 @@ /* First we check if this point is inside this space. */ - if (this.container.frame.isThisPointHere(point) === true) { + if (thisObject.container.frame.isThisPointHere(point) === true) { - return this.container; + return thisObject.container; } else { @@ -257,7 +265,7 @@ if (INTENSIVE_LOG === true) { logger.write("[INFO] draw -> Entering function."); } - this.container.frame.draw(); + thisObject.container.frame.draw(); plotChart(); @@ -522,6 +530,9 @@ if (INTENSIVE_LOG === true) { logger.write("[INFO] plotChart -> Entering function."); } + let userPosition = getUserPosition() + userPositionDate = userPosition.point.x + if (volumes.length > 0) { /* Now we calculate and plot the volumes */ @@ -728,25 +739,11 @@ browserCanvasContext.closePath(); + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.40)'; - if (datetime !== undefined) { - - let dateValue = datetime.valueOf(); - - if (dateValue >= volume.begin && dateValue <= volume.end) { - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)'; // Current bar accroding to time - - } else { - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.40)'; - } - - } else { - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 0.40)'; - - } + if (userPositionDate >= volume.begin && userPositionDate <= volume.end) { + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)'; // Current bar accroding to time + } browserCanvasContext.fill(); browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 0.40)'; @@ -763,24 +760,11 @@ browserCanvasContext.closePath(); - if (datetime !== undefined) { + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 0.40)'; - let dateValue = datetime.valueOf(); - - if (dateValue >= volume.begin && dateValue <= volume.end) { - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)'; // Current volume accroding to time - - } else { - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 0.40)'; - } - - } else { - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 0.40)'; - - } + if (userPositionDate >= volume.begin && userPositionDate <= volume.end) { + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 0.40)'; // Current volume accroding to time + } browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', 0.40)'; @@ -788,8 +772,6 @@ browserCanvasContext.lineWidth = 1; browserCanvasContext.stroke(); - - if (datetime !== undefined) { let dateValue = datetime.valueOf();