107 lines
4.5 KiB
JavaScript
107 lines
4.5 KiB
JavaScript
var miniMapArea = {
|
|
|
|
canvas: document.getElementById("miniMapArea"),
|
|
setup: function() {
|
|
if (lightMode) return;
|
|
|
|
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: function(ratio) {
|
|
if (lightMode) return;
|
|
|
|
this.ctx.fillStyle = "#bbb";
|
|
this.ctx.rect(0, 0, this.canvas.width, this.canvas.height);
|
|
this.ctx.fill();
|
|
this.resolve(ratio);
|
|
},
|
|
resolve: function(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;
|
|
this.ctx.strokeStyle = "green";
|
|
this.ctx.fillStyle = "DarkGreen";
|
|
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: function() {
|
|
if (lightMode) return;
|
|
$("#miniMapArea").css("z-index", "-1");
|
|
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
}
|
|
};
|