feat: map page (#390)

* feat: add boilerplate * feat: add working paths * feat: improve building selection controls and add week schedule Signed-off-by: doprz <52579214+doprz@users.noreply.github.com> * fix: sort week schedule Signed-off-by: doprz <52579214+doprz@users.noreply.github.com> * feat(testing): improve pathfinding * Revert "feat(testing): improve pathfinding" This reverts commit 87998cedbf. * feat: add pathfinding with building selection controls Signed-off-by: doprz <52579214+doprz@users.noreply.github.com> * feat: improve path finding algorithm thresholds * feat: add DaySelector, PathStats, and WeekSchedule components * feat: add working stats and daily schedule * chore: refactor everything * feat: add linear walkway node generation * feat: add bezier curve walkway node generation * feat: add circular walkway node generation * docs: add docs * feat: add individual path selection and bump version * fix: tsdoc and updated components/utils * chore(deps): update deps * feat: add UTRP Map and Debug Page to Settings > Developer Mode * chore: fix pr review comments * chore: add showDebugNodes * chore: add all buildings around the UT tower * chore: add stadium POIs * chore: add east mall buildings * chore: update DaySelector to use proper button styling * chore: add university ave walkway * feat: add zoom, pan, and dev controls functionality - Fix SVG Overlay Alignment - Use SVG for map - Add Dev Controls - Fix day selector position - Update the SVG's `preserveAspectRatio` attribute to `xMidYMid` meet to ensure proper scaling - Use `useCallback` for event handlers to prevent unnecessary re-renders - Remove old PNG map * feat: add dynamic rendering" * feat: add dynamicRendering dev toggle and fullscreen support * chore: update deps * chore: disable viewport svg overlay culling if dynamic rendering is off * chore: update pnpm-lock.yaml * chore: add north mall buildings * chore: add buildings next to JES * refactor: map components into individual files * fix: missing import --------- Signed-off-by: doprz <52579214+doprz@users.noreply.github.com>
2025-02-27 19:44:03 -06:00
parent 766c0bc1b4
commit 218477404f
23 changed files with 11142 additions and 1407 deletions
--- a/src/views/components/map/Path.tsx
+++ b/src/views/components/map/Path.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { PathFinder } from './PathFinder';
+import { type Graph, isValidNode, type NodeId } from './types';
+
+type PathProps = {
+    startId: NodeId;
+    endId: NodeId;
+    graph: Graph;
+    color: string;
+    className?: string;
+};
+
+/**
+ * Renders a path between two nodes in a graph.
+ *
+ * @param startId - The ID of the starting node.
+ * @param endId - The ID of the ending node.
+ * @param graph - The graph object containing nodes and edges.
+ * @param color - The color of the path.
+ * @param className - Additional CSS classes for the path.
+ *
+ * @returns The rendered path as a series of SVG lines, or null if an error occurs.
+ */
+export const Path = ({ startId, endId, graph, color, className = '' }: PathProps): JSX.Element | null => {
+    try {
+        const pathFinder = new PathFinder(graph);
+        const path = pathFinder.findPath(startId, endId);
+
+        return (
+            <>
+                {path.slice(0, -1).map((nodeId, index) => {
+                    const nextNodeId = path[index + 1];
+                    if (!nextNodeId) return null;
+
+                    const start = graph[nodeId];
+                    const end = graph[nextNodeId];
+
+                    if (!isValidNode(start) || !isValidNode(end)) return null;
+
+                    return (
+                        <line
+                            key={`${nodeId}-${nextNodeId}`}
+                            x1={start.x}
+                            y1={start.y}
+                            x2={end.x}
+                            y2={end.y}
+                            strokeLinecap='round'
+                            stroke={color}
+                            // TODO: use clsx
+                            className={`stroke-8 ${className} opacity-50`}
+                        />
+                    );
+                })}
+            </>
+        );
+    } catch (error) {
+        console.error('Error rendering path:', error instanceof Error ? error.message : 'Unknown error');
+        return null;
+    }
+};