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

Add single-click drag-n-drop of points

Browse Source
This commit is contained in:
Wuzzy 2023-10-23 18:09:23 +02:00
parent 3c91316715
commit 2a00c90cd9
1 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
mibpov.js
View File

@ -11,6 +11,18 @@ const GRID_STEP = 10
// be selected by clicking on it // be selected by clicking on it
const POINT_SELECT_DISTANCE = 25 const POINT_SELECT_DISTANCE = 25
// Distance a point has to be dragged after a single click
// before drag-n-drop starts.
// Normally, the user can drag-n-drop a point
// when clickong and dragging it *after* it has already been
// selected; there's no distance requirement.
// But it is also possible to select the point (by clicking
// on it) and dragging it with the same mouse click. But for
// this method, the mouse had to move the distance below
// from the point coordinates (in pixels) before drag-n-drop
// activates.
const ONE_CLICK_DRAG_DROP_DISTANCE = 30
// Name to display if empty // Name to display if empty
const FALLBACK_NAME = "(no name)" const FALLBACK_NAME = "(no name)"
@ -836,7 +848,7 @@ function selectPoint(point) {
if (biomeID !== null) { if (biomeID !== null) {
if (point.id === biomeID) { if (point.id === biomeID) {
if (elem.selected) { if (elem.selected) {
return [true, true]; return [true, true];
} }
elem.selected = "selected"; elem.selected = "selected";
draw(true); draw(true);
@ -903,11 +915,17 @@ function getNearestPointFromCanvasPos(x, y, maxDist) {
// Whether the mouse is currently pressed // Whether the mouse is currently pressed
let mouseIsDown = false; let mouseIsDown = false;
// Coordinates of canvas pixel where the mouse was clicked.
// Used for drag-n-drop.
let mouseIsDownStartPos = null;
// ID of point being currently dragged by the user // ID of point being currently dragged by the user
// or null if none. // or null if none.
let dragDropPointID = null; let dragDropPointID = null;
// True while drag-n-drop is active
let dragDropActive = false;
/* Move and update the biome point while the user /* Move and update the biome point while the user
is dragging it */ is dragging it */
function updatePointWhenDragged(pointID) { function updatePointWhenDragged(pointID) {
@ -1019,8 +1037,15 @@ function unhideContent() {
/* Canvas events */ /* Canvas events */
voronoiCanvas.onmousemove = function(event) { voronoiCanvas.onmousemove = function(event) {
if ((!dragDropActive) && (dragDropPointID !== null)) {
if (!dragDropActive && (mouseIsDown && mouseIsDownStartPos !== null)) {
if (getDistance(mouseIsDownStartPos.x, mouseIsDownStartPos.y, event.offsetX, event.offsetY) > ONE_CLICK_DRAG_DROP_DISTANCE) {
dragDropActive = true;
}
}
}
// drag-n-drop // drag-n-drop
if (mouseIsDown) { if (dragDropActive) {
updatePointWhenDragged(dragDropPointID); updatePointWhenDragged(dragDropPointID);
} }
updateCoordinateDisplay(event.offsetX, event.offsetY); updateCoordinateDisplay(event.offsetX, event.offsetY);
@ -1035,6 +1060,7 @@ voronoiCanvas.onmousedown = function(event) {
// select point by clicking. // select point by clicking.
// initiate drag-n-drop if already selected. // initiate drag-n-drop if already selected.
mouseIsDown = true; mouseIsDown = true;
mouseIsDownStartPos = { x: event.offsetX, y: event.offsetY };
if (!showPoints) { if (!showPoints) {
// Points need to be shown for drag-n-drop to work // Points need to be shown for drag-n-drop to work
return; return;
@ -1043,8 +1069,9 @@ voronoiCanvas.onmousedown = function(event) {
if (nearest !== null) { if (nearest !== null) {
let success, alreadySelected let success, alreadySelected
[success, alreadySelected] = selectPoint(nearest); [success, alreadySelected] = selectPoint(nearest);
dragDropPointID = nearest.id;
if (alreadySelected) { if (alreadySelected) {
dragDropPointID = nearest.id; dragDropActive = true;
} }
updateDragDropCursorStatus(); updateDragDropCursorStatus();
} }
@ -1053,12 +1080,16 @@ voronoiCanvas.onmouseup = function(event) {
// end drag-n-drop // end drag-n-drop
updatePointWhenDragged(dragDropPointID); updatePointWhenDragged(dragDropPointID);
mouseIsDown = false; mouseIsDown = false;
mouseIsDownStartPos = null;
dragDropPointID = null; dragDropPointID = null;
dragDropActive = false;
} }
voronoiCanvas.onmouseleave = function() { voronoiCanvas.onmouseleave = function() {
// end drag-n-drop // end drag-n-drop
mouseIsDown = false; mouseIsDown = false;
mouseIsDownStartPos = null;
dragDropPointID = null; dragDropPointID = null;
dragDropActive = false;
coordinateDisplay.innerHTML = " "; coordinateDisplay.innerHTML = " ";
} }