fix(RegionMap.tsx): restrict map interactions to left mouse button for consistency
This commit is contained in:
@@ -119,6 +119,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
|
|||||||
const [indicatedSystem, setIndicatedSystem] = useState<string | null>(null);
|
const [indicatedSystem, setIndicatedSystem] = useState<string | null>(null);
|
||||||
const selectTimerRef = useRef<number | null>(null);
|
const selectTimerRef = useRef<number | null>(null);
|
||||||
const downClientPointRef = useRef<{ x: number; y: number } | null>(null);
|
const downClientPointRef = useRef<{ x: number; y: number } | null>(null);
|
||||||
|
const mouseButtonRef = useRef<number | null>(null);
|
||||||
|
|
||||||
// New: shift-drag circle selection state (VIA mode)
|
// New: shift-drag circle selection state (VIA mode)
|
||||||
const [shiftSelecting, setShiftSelecting] = useState(false);
|
const [shiftSelecting, setShiftSelecting] = useState(false);
|
||||||
@@ -534,8 +535,10 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
|
|||||||
const handleMouseDown = useCallback((e: React.MouseEvent) => {
|
const handleMouseDown = useCallback((e: React.MouseEvent) => {
|
||||||
if (!svgRef.current) return;
|
if (!svgRef.current) return;
|
||||||
|
|
||||||
// SHIFT + VIA mode: start circle selection
|
mouseButtonRef.current = e.button;
|
||||||
if (viaMode && e.shiftKey) {
|
|
||||||
|
// SHIFT + VIA mode: start circle selection (left button only)
|
||||||
|
if (viaMode && e.shiftKey && e.button === 0) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
const svgPt = clientToSvg(e.clientX, e.clientY);
|
const svgPt = clientToSvg(e.clientX, e.clientY);
|
||||||
@@ -550,6 +553,13 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Only left button initiates selection/panning
|
||||||
|
if (e.button !== 0) {
|
||||||
|
clearSelectTimer();
|
||||||
|
setIsSelecting(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// record down point (client) and seed pan origin
|
// record down point (client) and seed pan origin
|
||||||
const rect = svgRef.current.getBoundingClientRect();
|
const rect = svgRef.current.getBoundingClientRect();
|
||||||
setLastPanPoint({ x: e.clientX - rect.left, y: e.clientY - rect.top });
|
setLastPanPoint({ x: e.clientX - rect.left, y: e.clientY - rect.top });
|
||||||
@@ -625,9 +635,11 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
|
|||||||
// if dragging node, delegate
|
// if dragging node, delegate
|
||||||
if (draggingNode) { if (e) handleSvgMouseUp(e); return; }
|
if (draggingNode) { if (e) handleSvgMouseUp(e); return; }
|
||||||
|
|
||||||
// Commit shift selection if active
|
// Commit shift selection if active (only if left button initiated)
|
||||||
if (shiftSelecting) {
|
if (shiftSelecting) {
|
||||||
commitShiftSelection();
|
if (mouseButtonRef.current === 0) {
|
||||||
|
commitShiftSelection();
|
||||||
|
}
|
||||||
setShiftSelecting(false);
|
setShiftSelecting(false);
|
||||||
setShiftCenter(null);
|
setShiftCenter(null);
|
||||||
setShiftRadius(0);
|
setShiftRadius(0);
|
||||||
@@ -636,6 +648,18 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
|
|||||||
setIsSelecting(false);
|
setIsSelecting(false);
|
||||||
setIndicatedSystem(null);
|
setIndicatedSystem(null);
|
||||||
downClientPointRef.current = null;
|
downClientPointRef.current = null;
|
||||||
|
mouseButtonRef.current = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ignore non-left button for selection commit
|
||||||
|
if (mouseButtonRef.current !== 0) {
|
||||||
|
clearSelectTimer();
|
||||||
|
setIsPanning(false);
|
||||||
|
setIsSelecting(false);
|
||||||
|
setIndicatedSystem(null);
|
||||||
|
downClientPointRef.current = null;
|
||||||
|
mouseButtonRef.current = null;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -643,6 +667,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
|
|||||||
|
|
||||||
if (isPanning) {
|
if (isPanning) {
|
||||||
setIsPanning(false);
|
setIsPanning(false);
|
||||||
|
mouseButtonRef.current = null;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -661,6 +686,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
|
|||||||
setIsSelecting(false);
|
setIsSelecting(false);
|
||||||
setIndicatedSystem(null);
|
setIndicatedSystem(null);
|
||||||
downClientPointRef.current = null;
|
downClientPointRef.current = null;
|
||||||
|
mouseButtonRef.current = null;
|
||||||
}, [draggingNode, isPanning, indicatedSystem, positions, systems, shiftSelecting, commitShiftSelection]);
|
}, [draggingNode, isPanning, indicatedSystem, positions, systems, shiftSelecting, commitShiftSelection]);
|
||||||
|
|
||||||
const handleWheel = useCallback((e: React.WheelEvent) => {
|
const handleWheel = useCallback((e: React.WheelEvent) => {
|
||||||
@@ -832,7 +858,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const onWindowMouseUp = () => {
|
const onWindowMouseUp = () => {
|
||||||
// if shift selection ongoing, commit on global mouseup as well
|
// if shift selection ongoing, commit on global mouseup as well
|
||||||
if (shiftSelecting) {
|
if (shiftSelecting && mouseButtonRef.current === 0) {
|
||||||
commitShiftSelection();
|
commitShiftSelection();
|
||||||
}
|
}
|
||||||
clearSelectTimer();
|
clearSelectTimer();
|
||||||
@@ -843,6 +869,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
|
|||||||
setShiftCenter(null);
|
setShiftCenter(null);
|
||||||
setShiftRadius(0);
|
setShiftRadius(0);
|
||||||
downClientPointRef.current = null;
|
downClientPointRef.current = null;
|
||||||
|
mouseButtonRef.current = null;
|
||||||
};
|
};
|
||||||
window.addEventListener('mouseup', onWindowMouseUp);
|
window.addEventListener('mouseup', onWindowMouseUp);
|
||||||
return () => window.removeEventListener('mouseup', onWindowMouseUp);
|
return () => window.removeEventListener('mouseup', onWindowMouseUp);
|
||||||
|
Reference in New Issue
Block a user