diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 51ad86828..3a2d7baca 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -632,8 +632,12 @@ RED.view = (function() { if (e.type === "keydown" && !spacebarPressed) { spacebarPressed = true; + // Change cursor to grab hand when spacebar is pressed + outer.style('cursor', 'grab'); } else if (e.type === "keyup" && spacebarPressed) { spacebarPressed = false; + // Revert cursor when spacebar is released + outer.style('cursor', ''); } } } @@ -642,6 +646,8 @@ RED.view = (function() { function handleWindowSpacebarUp(e) { if ((e.keyCode === 32 || e.key === ' ') && spacebarPressed) { spacebarPressed = false; + // Revert cursor when spacebar is released outside canvas + outer.style('cursor', ''); e.preventDefault(); e.stopPropagation(); } @@ -656,6 +662,8 @@ RED.view = (function() { window.addEventListener("blur", function() { if (spacebarPressed) { spacebarPressed = false; + // Revert cursor when window loses focus + outer.style('cursor', ''); } }) @@ -1114,6 +1122,8 @@ RED.view = (function() { // Reset spacebar state when chart loses focus to prevent stuck state if (spacebarPressed) { spacebarPressed = false; + // Revert cursor when chart loses focus + outer.style('cursor', ''); } }); @@ -1582,6 +1592,8 @@ RED.view = (function() { mouse_mode = RED.state.PANNING; mouse_position = [d3.event.pageX,d3.event.pageY] scroll_position = [chart.scrollLeft(),chart.scrollTop()]; + // Change cursor to grabbing while actively panning + outer.style('cursor', 'grabbing'); return; } @@ -2497,6 +2509,12 @@ RED.view = (function() { } if (mouse_mode === RED.state.PANNING) { resetMouseVars(); + // Revert to grab cursor if spacebar still held, otherwise clear cursor + if (spacebarPressed) { + outer.style('cursor', 'grab'); + } else { + outer.style('cursor', ''); + } return } if (mouse_mode === RED.state.SELECTING_NODE) {