minimap.js

import simulationArea from './simulationArea';
import { colors } from './themer/themer';
import { layoutModeGet } from './layoutMode';

/**
 * @type {Object} miniMapArea
 * This object is used to draw the miniMap.
 * @property {number} pageY
 * @property {number} pageX
 * @property {HTMLCanvasObject} canvas - the canvas object
 * @property {function} setup - used to setup the parameters and dimensions
 * @property {function} play - used to draw outline of minimap and call resolve
 * @property {function} resolve - used to resolve all objects and draw them on minimap
 * @property {function} clear - used to clear minimap
 * @category minimap
 */
var miniMapArea;
export default miniMapArea = {
    canvas: document.getElementById('miniMapArea'),
    setup() {
        if (lightMode) return;
        this.canvas = document.getElementById('miniMapArea');
        this.pageHeight = height; // Math.round(((parseInt($("#simulationArea").height())))/ratio)*ratio-50; // -50 for tool bar? Check again
        this.pageWidth = width; // Math.round(((parseInt($("#simulationArea").width())))/ratio)*ratio;
        this.pageY = (this.pageHeight - globalScope.oy);
        this.pageX = (this.pageWidth - globalScope.ox);

        if (simulationArea.minHeight != undefined) { this.minY = Math.min(simulationArea.minHeight, (-globalScope.oy) / globalScope.scale); } else { this.minY = (-globalScope.oy) / globalScope.scale; }
        if (simulationArea.maxHeight != undefined) { this.maxY = Math.max(simulationArea.maxHeight, this.pageY / globalScope.scale); } else { this.maxY = this.pageY / globalScope.scale; }
        if (simulationArea.minWidth != undefined) { this.minX = Math.min(simulationArea.minWidth, (-globalScope.ox) / globalScope.scale); } else { this.minX = (-globalScope.ox) / globalScope.scale; }
        if (simulationArea.maxWidth != undefined) { this.maxX = Math.max(simulationArea.maxWidth, (this.pageX) / globalScope.scale); } else { this.maxX = (this.pageX) / globalScope.scale; }

        var h = this.maxY - this.minY;
        var w = this.maxX - this.minX;

        var ratio = Math.min(250 / h, 250 / w);
        if (h > w) {
            this.canvas.height = 250.0;
            this.canvas.width = (250.0 * w) / h;
        } else {
            this.canvas.width = 250.0;
            this.canvas.height = (250.0 * h) / w;
        }

        this.canvas.height += 5;
        this.canvas.width += 5;

        document.getElementById('miniMap').style.height = this.canvas.height;
        document.getElementById('miniMap').style.width = this.canvas.width;
        this.ctx = this.canvas.getContext('2d');
        this.play(ratio);
    },

    play(ratio) {
        if (lightMode || layoutModeGet()) return;

        this.ctx.fillStyle = '#bbb';
        this.ctx.rect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.fill();
        this.resolve(ratio);
    },
    resolve(ratio) {
        if (lightMode) return;
                
        this.ctx.fillStyle = '#ddd';
        this.ctx.beginPath();
        this.ctx.rect(2.5 + ((this.pageX - this.pageWidth) / globalScope.scale - this.minX) * ratio, 2.5 + ((this.pageY - this.pageHeight) / globalScope.scale - this.minY) * ratio, this.pageWidth * ratio / globalScope.scale, this.pageHeight * ratio / globalScope.scale);
        this.ctx.fill();

        //  to show the area of current canvas
        var lst = updateOrder;
        const miniFill = colors["mini_fill"];
        const miniStroke = colors["mini_stroke"];

        this.ctx.strokeStyle = miniStroke;
        this.ctx.fillStyle = miniFill;
        for (var i = 0; i < lst.length; i++) {
            if (lst[i] === 'wires') {
                for (var j = 0; j < globalScope[lst[i]].length; j++) {
                    this.ctx.beginPath();
                    this.ctx.moveTo(2.5 + (globalScope[lst[i]][j].node1.absX() - this.minX) * ratio, 2.5 + (globalScope[lst[i]][j].node1.absY() - this.minY) * ratio);
                    this.ctx.lineTo(2.5 + (globalScope[lst[i]][j].node2.absX() - this.minX) * ratio, 2.5 + (globalScope[lst[i]][j].node2.absY() - this.minY) * ratio);
                    this.ctx.stroke();
                }
            } else if (lst[i] != 'nodes') {
                // Don't include SquareRGBLed here; it has correct size.
                var ledY = 0;
                if (lst[i] == 'DigitalLed' || lst[i] == 'VariableLed' || lst[i] == 'RGBLed') { ledY = 20; }

                for (var j = 0; j < globalScope[lst[i]].length; j++) {
                    var xx = (globalScope[lst[i]][j].x - simulationArea.minWidth);
                    var yy = (globalScope[lst[i]][j].y - simulationArea.minHeight);
                    this.ctx.beginPath();
                    var obj = globalScope[lst[i]][j];
                    this.ctx.rect(2.5 + (obj.x - obj.leftDimensionX - this.minX) * ratio, 2.5 + (obj.y - obj.upDimensionY - this.minY) * ratio, (obj.rightDimensionX + obj.leftDimensionX) * ratio, (obj.downDimensionY + obj.upDimensionY + ledY) * ratio);

                    this.ctx.fill();
                    this.ctx.stroke();
                }
            }
        }
    },
    clear() {
        if (lightMode) return;
        $('#miniMapArea').css('z-index', '-1');
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
};
var lastMiniMapShown;
export function updatelastMinimapShown() {
    lastMiniMapShown = new Date().getTime();
}
export function removeMiniMap() {
    if (lightMode) return;

    if (simulationArea.lastSelected == globalScope.root && simulationArea.mouseDown) return;
    if (lastMiniMapShown + 2000 >= new Date().getTime()) {
        setTimeout(removeMiniMap, lastMiniMapShown + 2000 - new Date().getTime());
        return;
    }
    $('#miniMap').fadeOut('fast');
}