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