Superalgos/BreakpointsBar.js

function newBreakpointsBar() {

    var thisObject = {
        setDatetime: setDatetime,
        container: undefined,
        draw: draw,
        getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
        initialize: initialize
    };

    var container = newContainer();
    container.initialize();
    thisObject.container = container;

    thisObject.container.frame.width = browserCanvasContext.width;
    thisObject.container.frame.height = 15;

    container.frame.position.x = 0;
    container.frame.position.y = viewPort.visibleArea.bottomRight.y;

    container.isDraggeable = false;
    container.isClickeable = true;

    let logo;
    let canDrawLogo = false;

    let datetime;
    let timePeriod;
    let timeLineCoordinateSystem;
    let chartContainer;

    let breakpointsByTimePeriod = new Map();

    return thisObject;

    function initialize(pChartContainer, pTimeLineCoordinateSystem) {

        timeLineCoordinateSystem = pTimeLineCoordinateSystem;
        chartContainer = pChartContainer;

        viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged);
        timePeriod = INITIAL_TIME_PERIOD;

        thisObject.container.eventHandler.listenToEvent("onMouseClick", onClick);

        for (let i = 0; i < marketFilesPeriods.length; i++) {

            let breakpointsMap = new Map();
            breakpointsByTimePeriod.set(marketFilesPeriods[i][0], breakpointsMap);

        }

        for (let i = 0; i < dailyFilePeriods.length; i++) {

            let breakpointsMap = new Map();
            breakpointsByTimePeriod.set(dailyFilePeriods[i][0], breakpointsMap);

        }
    }

    function onClick(pPoint) {

        let point = {
            x: pPoint.x,
            y: pPoint.y
        };

        let miliSeconds = getMilisecondsFromPoint(point, chartContainer, timeLineCoordinateSystem);

        miliSeconds = normalizeX(miliSeconds); // We are now exactly at the middle of the "candle" correspondind to the point clicked.

        let breakpointsMap = breakpointsByTimePeriod.get(timePeriod);
        let breakpoint = breakpointsMap.get(miliSeconds);

        if (breakpoint === undefined) {

            /* The breakpoint didnt exist, then we create one. */
            breakpointsMap.set(miliSeconds, 1);

        } else {

            /* The breakpoint existed, so we remove it. */
            breakpointsMap.set(miliSeconds, undefined);

        }
    }

    function normalizeX(pX) {

        return Math.trunc(pX / timePeriod) * timePeriod + timePeriod / 2; 

    }

    function onZoomChanged(event) {

        timePeriod = recalculatePeriod(event.newLevel);

    }

    function setDatetime(pDatetime) {

        datetime = new Date(pDatetime);
    }

    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() {

        /*
        To draw the breakpoints, we will calculate the miliseconds for the first x pixel of the breakpoint bar, and for the last x pixel. Once we have that
        we can create an array with all the possible points for breack points. Finally we can see if brealpoints exists at those points. We plot only the ones
        that exists.
        */

        let breakpointsMap = breakpointsByTimePeriod.get(timePeriod);

        let beginX = {
            x: viewPort.visibleArea.bottomLeft.x,
            y: 0
        };

        let endX = {
            x: viewPort.visibleArea.bottomRight.x,
            y: 0
        };

        let beginMiliseconds = getMilisecondsFromPoint(beginX, chartContainer, timeLineCoordinateSystem);
        let endMiliseconds = getMilisecondsFromPoint(endX, chartContainer, timeLineCoordinateSystem);

        beginMiliseconds = normalizeX(beginMiliseconds);
        endMiliseconds = normalizeX(endMiliseconds);

        window.AT_BREAKPOINT = false;

        for (let miliSeconds = beginMiliseconds; miliSeconds < endMiliseconds; miliSeconds = miliSeconds + timePeriod) {

            let breakpoint = breakpointsMap.get(miliSeconds);

            if (breakpoint !== undefined) {

                let point1 = {
                    x: miliSeconds,
                    y: 0
                }

                point1 = timeLineCoordinateSystem.transformThisPoint(point1);
                point1 = transformThisPoint(point1, chartContainer);

                let point2 = {
                    x: miliSeconds,
                    y: thisObject.container.frame.height / 2 + 1
                }

                point2 = thisObject.container.frame.frameThisPoint(point2);

                let point = {
                    x: point1.x,
                    y: point2.y
                }

                let isCurrentRecord = false;

                if (datetime !== undefined) {
                    let dateValue = datetime.valueOf();
                    if (dateValue >= miliSeconds - timePeriod / 2 && dateValue <= miliSeconds + timePeriod / 2 - 1) {
                        isCurrentRecord = true;
                    }
                }

                let radius = 5;

                let opacity = '0.5';

                browserCanvasContext.lineWidth = 1;

                /* Outer Circle */

                browserCanvasContext.beginPath();

                browserCanvasContext.strokeStyle = 'rgba(123, 50, 40, ' + opacity + ')';

                if (isCurrentRecord === false) {
                    browserCanvasContext.fillStyle = 'rgba(223, 70, 60, ' + opacity + ')';
                } else {
                    browserCanvasContext.fillStyle = 'rgba(255, 233, 31, ' + opacity + ')';  /* highlight the current record */

                    window.AT_BREAKPOINT = true; // We are hitting a breakpoint!
                }

                browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true);
                browserCanvasContext.closePath();

                if (point.x < viewPort.visibleArea.topLeft.x + 50 || point.x > viewPort.visibleArea.bottomRight.x - 50) {/*we leave this history without fill. */ } else {
                    browserCanvasContext.fill();
                }

                browserCanvasContext.stroke();
            }
        }
    }
}