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

Shrink canvas when shrinking window width

Browse Source
This commit is contained in:
Wuzzy 2023-10-24 23:33:00 +02:00
parent f5ae56cc9c
commit cf923bca51
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
mibpov.js
View File

@ -13,6 +13,9 @@ const RESIZE_CORNER = 18;
// Minimum canvas side length (px)
const MIN_CANVAS_SIZE = 100;
// Minimum required distance of canvas from the right page side
const CANVAS_PAGE_MARGIN_RIGHT = 20
// Grid widths. We use lower grid widths
// as the grid becomes more crammed.
// There are 4 levels from 0 to 3.
@ -1285,9 +1288,35 @@ function initBiomeColorSelectors() {
}
}
function fitCanvasInBody() {
// Get x,y position of canvas
let bodyRect = document.body.getBoundingClientRect();
let canvasRect = voronoiCanvas.getBoundingClientRect();
let cx = canvasRect.left - bodyRect.left;
let cy = canvasRect.top - bodyRect.top;
// Calculate new size
let rx = window.innerWidth - cx - CANVAS_PAGE_MARGIN_RIGHT;
let oldWidth = voronoiCanvas.width;
let newWidth = Math.max(MIN_CANVAS_SIZE, rx);
if (newWidth < oldWidth) {
// Resize
if (voronoiCanvas.height === voronoiCanvas.width) {
voronoiCanvas.height = newWidth;
}
voronoiCanvas.width = newWidth;
draw(false);
}
}
/***** EVENTS *****/
/* Body events */
window.onresize = function(event) {
fitCanvasInBody();
}
document.body.onmousemove = function(event) {
if (resizing) {
// Get x,y position of canvas
@ -1301,7 +1330,7 @@ document.body.onmousemove = function(event) {
let ry = event.pageY - resizing_start_pos_y - cy;
// Limit the width
let maxX = (bodyRect.width - cx) - 20;
let maxX = (bodyRect.width - cx) - CANVAS_PAGE_MARGIN_RIGHT;
// Resize
voronoiCanvas.width = Math.min(maxX, Math.max(MIN_CANVAS_SIZE, resizing_start_size_x + rx));
@ -1636,3 +1665,4 @@ window.addEventListener("load", repopulateBiomeSelector);
window.addEventListener("load", updateWidgetStates);
window.addEventListener("load", updateAltitudeText);
window.addEventListener("load", unhideContent);
window.addEventListener("load", fitCanvasInBody);