From c8c2e4ed434a9a9b474152c40db49d1f06523a6f Mon Sep 17 00:00:00 2001 From: Jonas Geertsen Lund Date: Thu, 7 Nov 2024 15:13:21 +0100 Subject: [PATCH 1/3] Fix timeline close --- src/components/timeline.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index 0e1e9e7..c3e7573 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -1,5 +1,6 @@ import { useEffect } from 'react' import { useVesselGuiContext } from '../contexts/vesselGuiContext' +import CloseSVG from '../svgs/closeSVG' interface ITimelineProps { timestamps: Date[] onChange(index: number): void @@ -8,7 +9,7 @@ interface ITimelineProps { } export default function Timeline({ timestamps, onChange, timelineVal, setTimelineVal }: ITimelineProps) { - const { setSelectedVesselPath, selectedVesselmmsi, selectedVesselPath } = useVesselGuiContext() + const { setSelectedVesselPath, selectedVesselmmsi, selectedVesselPath, setPathIsShown } = useVesselGuiContext() function handleChange(val: string) { try { const intVal: number = parseInt(val) @@ -21,6 +22,7 @@ export default function Timeline({ timestamps, onChange, timelineVal, setTimelin function closePath() { setSelectedVesselPath([]) + setPathIsShown(false) } useEffect(() => { @@ -32,7 +34,7 @@ export default function Timeline({ timestamps, onChange, timelineVal, setTimelin }, [selectedVesselmmsi, setSelectedVesselPath, setTimelineVal]) return selectedVesselPath.length !== 0 ? ( -
+

Timestamp:{' '} @@ -40,8 +42,8 @@ export default function Timeline({ timestamps, onChange, timelineVal, setTimelin ? timestamps[timelineVal].toISOString().replace('T', ' ').replace('Z', '').slice(0, 19) : 'unknown'}

-
Date: Thu, 7 Nov 2024 15:24:07 +0100 Subject: [PATCH 2/3] Change color of vessel on path --- src/components/pathOverlay.tsx | 4 ++-- src/components/timeline.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/pathOverlay.tsx b/src/components/pathOverlay.tsx index 19c9be0..f2a1d57 100644 --- a/src/components/pathOverlay.tsx +++ b/src/components/pathOverlay.tsx @@ -74,7 +74,7 @@ function pathToGraphic(path: ILocation[]): IGraphicOptions { }) graphic.clear() - graphic.lineStyle(1 / scale, 0x5858ff, 1) + graphic.lineStyle(1 / scale, 0x005cc8, 1) graphic.moveTo(projectedCords[0].x, projectedCords[0].y) for (let i = 1; i < projectedCords.length; i++) { graphic.lineTo(projectedCords[i].x, projectedCords[i].y) @@ -97,7 +97,7 @@ function vesselToGraphic( const sprite: PIXI.Sprite = new PIXI.Sprite(location.heading ? arrowTexture : circleTexture) sprite.anchor.set(0.5, 0.5) sprite.rotation = Math.PI / 2 + (location.heading ? (location.heading * Math.PI) / 180 : 0) - sprite.tint = 0x5858ff + sprite.tint = 0x005cc8 sprite.x = projectedCords.x sprite.y = projectedCords.y sprite.width = 20 / scale diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx index c3e7573..81f7dfe 100644 --- a/src/components/timeline.tsx +++ b/src/components/timeline.tsx @@ -42,7 +42,7 @@ export default function Timeline({ timestamps, onChange, timelineVal, setTimelin ? timestamps[timelineVal].toISOString().replace('T', ' ').replace('Z', '').slice(0, 19) : 'unknown'}

-
From 2852d7194366908d641bfd607517ccb3aa6dba50 Mon Sep 17 00:00:00 2001 From: Jonas Geertsen Lund Date: Thu, 7 Nov 2024 15:44:21 +0100 Subject: [PATCH 3/3] Add mouseover and mouseout effect on vessels --- src/components/vesselMarkerOverlay.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/vesselMarkerOverlay.tsx b/src/components/vesselMarkerOverlay.tsx index ef41ff5..9bf9cf0 100644 --- a/src/components/vesselMarkerOverlay.tsx +++ b/src/components/vesselMarkerOverlay.tsx @@ -71,7 +71,6 @@ export default function VesselMarkerOverlay({ simpleVessels, monitoredVessels }: setSelectedVesselmmsi((selectedVesselmmsi) => selectedVesselmmsi === vessel.simpleVessel.mmsi ? undefined : vessel.simpleVessel.mmsi ) - markerOptions.push( displayVesselToSpriteMarkerOption( vessel, @@ -80,7 +79,8 @@ export default function VesselMarkerOverlay({ simpleVessels, monitoredVessels }: circleTexture, selectedCircleTexture, selectedVesselmmsi === vessel.simpleVessel.mmsi, - onClick + onClick, + () => overlay.redraw() ) ) } @@ -139,7 +139,8 @@ function displayVesselToSpriteMarkerOption( circleTexture: PIXI.Texture, selectedCircleTexture: PIXI.Texture, isSelected: boolean, - onClick: () => void + onClick: () => void, + redraw: () => void ): ISpriteMarkerOptions { const { simpleVessel, monitoredInfo } = vessel @@ -165,6 +166,14 @@ function displayVesselToSpriteMarkerOption( sprite.eventMode = 'dynamic' sprite.cursor = 'pointer' sprite.on('click', onClick) + sprite.on('mouseover', () => { + sprite.alpha = monitoredInfo ? 1 : 0.7 + redraw() + }) + sprite.on('mouseout', () => { + sprite.alpha = monitoredInfo ? 1 : 0.3 + redraw() + }) const size = isSelected ? 20 : 13 const position: L.LatLngTuple = [simpleVessel.location.point.lat, simpleVessel.location.point.lon]