Change cursor when hovering point
This commit is contained in:
parent
55cda1216b
commit
7db81b3ad3
93
biome-ui.js
93
biome-ui.js
@ -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) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user