Change cursor when hovering point

This commit is contained in:
Wuzzy 2023-10-21 19:26:24 +02:00
parent 55cda1216b
commit 7db81b3ad3

View File

@ -7,6 +7,10 @@ const MAX_Y_DEFAULT = 31000
// Draw a grid line every GRID_STEP units
const GRID_STEP = 10
// Distance from the point's center in which a point can
// be selected by clicking on it
const POINT_SELECT_DISTANCE = 25
// Symbol for storing the biome ID in site objects
// for the Voronoi script
const biomeIDSymbol = Symbol("Biome ID");
@ -384,6 +388,29 @@ function getRenderedPoints(y) {
return points;
}
function getBiomeIDFromHTMLElement(elem) {
let strID = elem.id;
if (strID && strID.startsWith("biome_list_element_")) {
let slice = strID.slice(19);
if (slice) {
return +slice;
}
}
return null;
}
function getSelectedBiomeIDAndElement() {
if (biomeSelector.selectedIndex === -1) {
return [null, null];
}
let elem = biomeSelector.options[biomeSelector.selectedIndex];
let biomeID = getBiomeIDFromHTMLElement(elem);
if (biomeID !== null) {
return [biomeID, elem];
}
return [null, null];
}
function draw(y, recalculate) {
let context = getDrawContext();
clear(context);
@ -488,17 +515,7 @@ function draw(y, recalculate) {
context.stroke();
}
let selElemID = null;
if (biomeSelector.selectedIndex !== -1) {
let selElem = biomeSelector.options[biomeSelector.selectedIndex];
let strID = selElem.id;
if (strID.startsWith("biome_list_element_")) {
let slice = strID.slice(19);
if (slice) {
selElemID = +slice;
}
}
}
let [selElemID, _] = getSelectedBiomeIDAndElement();
// Render biome points
if (showPoints) {
@ -678,16 +695,11 @@ function selectPoint(point) {
for (let elem of biomeSelector.options) {
let strID = elem.id;
let elemID = null;
if (strID.startsWith("biome_list_element_")) {
let slice = strID.slice(19);
if (slice) {
elemID = +slice;
}
}
if (elemID !== null) {
if (point.id === elemID) {
let biomeID = getBiomeIDFromHTMLElement(elem);
if (biomeID !== null) {
if (point.id === biomeID) {
if (elem.selected) {
return [true, true];
return [true, true];
}
elem.selected = "selected";
draw(getViewY(), true);
@ -754,19 +766,10 @@ function updatePointWhenDragged(pointID) {
selectedPoint.name = generateBiomeName(newHeat, newHumidity);
draw(getViewY(), true);
updateWidgetStates();
for (let elem of biomeSelector.options) {
let strID = elem.id;
let elemID = null;
if (strID.startsWith("biome_list_element_")) {
let slice = strID.slice(19);
if (slice) {
elemID = +slice;
}
}
if (elemID !== null && points[i].id === elemID) {
elem.innerText = selectedPoint.name;
break;
}
let [elemID, elem] = getSelectedBiomeIDAndElement();
if (elemID !== null && points[i].id === elemID) {
elem.innerText = selectedPoint.name;
break;
}
return;
}
@ -785,15 +788,36 @@ function updateCoordinateDisplay(pixelX, pixelY) {
}
}
function updateDragDropCursorStatus() {
if (drawError || !showPoints) {
voronoiCanvas.style.cursor = "auto";
return
}
let nearest = getNearestPointFromCanvasPos(event.offsetX, event.offsetY, POINT_SELECT_DISTANCE);
if (nearest !== null) {
let [id, elem] = getSelectedBiomeIDAndElement();
if (id !== null && nearest.id === id) {
voronoiCanvas.style.cursor = "grab";
} else {
voronoiCanvas.style.cursor = "crosshair";
}
} else {
voronoiCanvas.style.cursor = "auto";
}
}
voronoiCanvas.onmousemove = function(event) {
// drag-n-drop
if (mouseIsDown) {
updatePointWhenDragged(dragDropPointID);
}
updateCoordinateDisplay(event.offsetX, event.offsetY);
updateDragDropCursorStatus();
}
voronoiCanvas.onmouseenter = function(event) {
updateCoordinateDisplay(event.offsetX, event.offsetY);
updateDragDropCursorStatus();
}
voronoiCanvas.onmousedown = function(event) {
@ -804,13 +828,14 @@ voronoiCanvas.onmousedown = function(event) {
// Points need to be shown for drag-n-drop to work
return;
}
let nearest = getNearestPointFromCanvasPos(event.offsetX, event.offsetY, 25);
let nearest = getNearestPointFromCanvasPos(event.offsetX, event.offsetY, POINT_SELECT_DISTANCE);
if (nearest !== null) {
let success, alreadySelected
[success, alreadySelected] = selectPoint(nearest);
if (alreadySelected) {
dragDropPointID = nearest.id;
}
updateDragDropCursorStatus();
}
}
voronoiCanvas.onmouseup = function(event) {