First_Dev_Dept/ParkingRobot
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add observation chart viewport zoom

Browse Source
This commit is contained in:
梁薄云
2026-08-07 10:05:43 +08:00
parent b7772370dc
commit 8a51629edb
3 changed files with 271 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ClumsyPilot/TrajectoryPlanningVisualization/Web/app.css
+7 -1
View File
@@ -23,7 +23,13 @@ main { max-width: 1500px; margin: auto; padding: 22px 30px 36px; }
#occupancy-grid, #world-overlay { position: absolute; inset: 0; width: 100%; height: 100%; } #world-overlay { pointer-events: none; }
main > section[hidden] { display: none !important; }
#ls-st:not([hidden]), #kinematics:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; }
.chart { min-height: 280px; border: 1px solid var(--grid); padding: 8px; } .chart svg { display: block; width: 100%; height: 244px; }
.chart { position: relative; min-height: 280px; border: 1px solid var(--grid); padding: 8px; } .chart svg { display: block; width: 100%; height: 244px; touch-action: none; }
.chart-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 6px; }
.chart-tools button { width: 26px; height: 26px; border: 1px solid var(--grid); background: #fff; color: #59636d; cursor: pointer; font: 12px/1 sans-serif; }
.chart-tools button:hover { border-color: #8d959d; color: #20252b; }
.chart-zoom-box { fill: rgba(23, 105, 170, .08); stroke: #1769aa; stroke-width: .8; }
.chart.is-fullscreen { position: fixed; inset: 0; z-index: 100; min-height: 100vh; padding: 18px; overflow: auto; background: var(--paper); }
.chart.is-fullscreen svg { height: calc(100vh - 110px); min-height: 320px; }
.chart-title { font-size: 14px; font-weight: 600; } .chart-note { min-height: 20px; color: #66707a; font-size: 12px; }
.chart-grid { stroke: var(--grid); stroke-width: .55; } .chart-axis { stroke: #59636d; stroke-width: .8; } .chart-data { fill: none; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.chart-solid { stroke: var(--current-trajectory); } .chart-dashed { stroke: var(--previous-trajectory); stroke-dasharray: 5 4; } .chart-limit { stroke: var(--failure); stroke-dasharray: 3 3; }