thi-sjsu-project/theia
0
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

hightlight info icon when under gaze

Browse Source
This commit is contained in:
bedlam343 2024-05-23 15:29:54 -07:00
parent 22400e6056
commit 0a2bebfed5
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Widget/MapWarningWidget.tsx
View File

@ -23,27 +23,30 @@ const MapWarningWidget = ({ widget }: MapWarningWidgetProps) => {
const elementsInGaze = useAppSelector(getElementsInGaze);
const dispatch = useAppDispatch();
const inGaze = elementsInGaze.some(
const warningIconInGaze = elementsInGaze.some(
(element) => element.id === iconElement.id,
);
const threatInfoInGaze = elementsInGaze.some(
(element) => element.id === threatInfoElement.id,
);
useEffect(() => {
// show threat info element if icon element is in gaze
if (inGaze && threatInfoElement.collapsed) {
if (warningIconInGaze && threatInfoElement.collapsed) {
dispatch(
updateElement(widget.id, { ...threatInfoElement, collapsed: false }),
);
}
}, [inGaze, dispatch, threatInfoElement, widget.id]);
}, [warningIconInGaze, dispatch, threatInfoElement, widget.id]);
useEffect(() => {
if (inGaze && threatInfoElement.expirationIntervalMs) {
if (warningIconInGaze && threatInfoElement.expirationIntervalMs) {
// update expiration even if only icon element is in gaze
// keep displaying threat info element while we hover over the icon
dispatch(updateElementExpiration(widget.id, threatInfoElement.id));
}
}, [
inGaze,
warningIconInGaze,
dispatch,
threatInfoElement.id,
threatInfoElement.expirationIntervalMs,
@ -67,7 +70,7 @@ const MapWarningWidget = ({ widget }: MapWarningWidgetProps) => {
<div style={{ height: 2, width: 75, border: '2px dashed white' }} />
<MapThreatInfoElement
element={threatInfoElement as InformationElementType}
inGaze={inGaze}
inGaze={warningIconInGaze || threatInfoInGaze}
/>
</>
)}

1
src/hooks/useGaze.ts
View File

@ -40,7 +40,6 @@ const useGaze = ({ screen }: GazeProps) => {
const divId = div.id;
// TODO: just a little off when cursor on left or right side of the div
// find the closest point in the div to the mouse
const closestX =
mouseX < divLeft ? divLeft : mouseX > divRight ? divRight : mouseX;