Wuzzy/libpov_2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Also render axes when out of bounds

Browse Source
This commit is contained in:
Wuzzy 2023-10-24 17:20:29 +02:00
parent ce7ac17ba9
commit e068f82d29
1 changed files with 86 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
mibpov.js
View File

@ -395,8 +395,16 @@ function putGrid(context) {
/* Put the labelled heat/humidity axes on the draw context */
function putAxes(context) {
// Size of arrows (px)
const AXIS_ARROW_SIZE = 8;
// Offset that arrows have from the border (px)
const ARROW_OFFSET = 1;
// Minimum distance (px) that axis must have from the border
const AXIS_BORDER_OFFSET = 10;
// Maximum distance (px) from certain borders at which the axis
// labels and ticks will be put on the other sides
const AXIS_LABEL_FLIP_OFFSET = 40;
context.lineWidth = 2;
context.strokeStyle = AXIS_COLOR;
let [x0, y0] = biomeCoordsToCanvasPixelCoords(0, 0);
@ -406,13 +414,41 @@ function putAxes(context) {
let w = voronoiCanvas.width;
let h = voronoiCanvas.height;
// If axis would go out of bounds, force them to
// be rendered at the side instead.
let other_side_x = false;
let other_side_y = false;
if (x0 <= AXIS_BORDER_OFFSET) {
x0 = AXIS_BORDER_OFFSET;
} else if (x0 >= w - AXIS_BORDER_OFFSET) {
x0 = w - AXIS_BORDER_OFFSET;
}
if (y0 <= AXIS_BORDER_OFFSET) {
y0 = AXIS_BORDER_OFFSET;
} else if (y0 >= h - AXIS_BORDER_OFFSET) {
y0 = h - AXIS_BORDER_OFFSET;
}
// Flip axis labels if coming close to certain sides
if (x0 <= AXIS_LABEL_FLIP_OFFSET) {
other_side_y = true;
}
if (y0 >= h - AXIS_LABEL_FLIP_OFFSET) {
other_side_x = true;
}
// horizontal axis
context.beginPath();
context.moveTo(0, y0);
context.lineTo(w, y0);
// midpoint tick
context.moveTo(tx, y0);
context.lineTo(tx, y0 + AXIS_ARROW_SIZE);
// tick
if (other_side_x) {
context.moveTo(tx, y0 - AXIS_ARROW_SIZE);
context.lineTo(tx, y0);
} else {
context.moveTo(tx, y0);
context.lineTo(tx, y0 + AXIS_ARROW_SIZE);
}
// arrow
context.moveTo(w-ARROW_OFFSET, y0);
context.lineTo(w-ARROW_OFFSET - AXIS_ARROW_SIZE, y0 - AXIS_ARROW_SIZE);
@ -425,9 +461,14 @@ function putAxes(context) {
context.beginPath();
context.moveTo(x0, 0);
context.lineTo(x0, h);
// midpoint tick
context.moveTo(x0, ty);
context.lineTo(x0 - AXIS_ARROW_SIZE, ty);
// tick
if (other_side_y) {
context.moveTo(x0 + AXIS_ARROW_SIZE, ty);
context.lineTo(x0, ty);
} else {
context.moveTo(x0, ty);
context.lineTo(x0 - AXIS_ARROW_SIZE, ty);
}
// arrow
context.moveTo(x0, ARROW_OFFSET);
context.lineTo(x0 - AXIS_ARROW_SIZE, ARROW_OFFSET+AXIS_ARROW_SIZE);
@ -436,28 +477,57 @@ function putAxes(context) {
context.stroke();
context.closePath();
// axis+midpoint labels
// axis+tick labels
context.fillStyle = "black";
// heat label
context.textAlign = "right";
context.textBaseline = "top";
context.font = "100% sans-serif";
context.fillText("heat", w - AXIS_ARROW_SIZE*2, y0 + 4);
let lx, ly, ttx, tty;
if (other_side_x) {
context.textBaseline = "bottom";
context.textAlign = "right";
lx = w - AXIS_ARROW_SIZE*2;
ly = y0 - 4;
tty = y0 - AXIS_ARROW_SIZE;
} else {
context.textBaseline = "top";
context.textAlign = "right";
lx = w - AXIS_ARROW_SIZE*2;
ly = y0 + 4;
tty = y0 + AXIS_ARROW_SIZE;
}
context.fillText("heat", lx, ly);
context.textAlign = "center";
context.fillText(Math.round(tick_heat), tx, y0 + AXIS_ARROW_SIZE+2);
context.fillText(Math.round(tick_heat), tx, tty);
// humidity label
context.textAlign = "right";
context.textBaseline = "bottom";
context.font = "100% sans-serif";
context.save();
context.rotate(-Math.PI/2);
context.fillText("humidity", -AXIS_ARROW_SIZE*2, x0 - 4);
if (other_side_y) {
context.textBaseline = "top";
context.textAlign = "right";
lx = -AXIS_ARROW_SIZE*2;
ly = x0 + 4;
} else {
context.textBaseline = "bottom";
context.textAlign = "right";
lx = -AXIS_ARROW_SIZE*2;
ly = x0 - 4;
}
context.fillText("humidity", lx, ly);
context.restore();
context.textAlign = "right";
if (other_side_y) {
context.textAlign = "left";
ttx = x0 + AXIS_ARROW_SIZE-2;
} else {
context.textAlign = "right";
ttx = x0 - AXIS_ARROW_SIZE-2;
}
context.textBaseline = "middle";
context.fillText(Math.round(tick_humidity), x0 - AXIS_ARROW_SIZE-2, ty);
context.fillText(Math.round(tick_humidity), ttx, ty);
}
// Cache diagram object for performance boost