Spaces:
Running
Running
Commit Β·
d97b165
1
Parent(s): 69b88d9
Refactor trail management in app.js to streamline code and improve performance
Browse files- Removed unused variables and functions related to trail management, including `clearTrail`, `flushTrailPoly`, and `appendTrail`.
- Simplified icon angle calculation logic for better readability.
- Updated the rendering logic to eliminate the boat trail polyline, enhancing overall performance.
app.js
CHANGED
|
@@ -49,6 +49,7 @@
|
|
| 49 |
var trajLine = null
|
| 50 |
var boatTrail = null
|
| 51 |
var bearingLine = null
|
|
|
|
| 52 |
var anchorSOuter = null
|
| 53 |
var anchorS = null
|
| 54 |
var anchorEOuter = null
|
|
@@ -167,6 +168,7 @@
|
|
| 167 |
prevDetectedStreak = prevBlindStreak = prevVisible = null
|
| 168 |
}
|
| 169 |
|
|
|
|
| 170 |
function clearTrail(resetIconAngle) {
|
| 171 |
trailFlat.length = 0
|
| 172 |
if (resetIconAngle !== false) lastTrailIconAngle = NaN
|
|
@@ -248,6 +250,7 @@
|
|
| 248 |
camDot.setAttribute('stroke', rgba(C.pr, 0.5))
|
| 249 |
trajLine.setAttribute('stroke', rgba(C.dr, 0.25))
|
| 250 |
bearingLine.setAttribute('stroke', rgba(C.dr, 0.12))
|
|
|
|
| 251 |
for (var i = 0; i < 4; i++) camCorners[i].setAttribute('stroke', rgba(C.pr, 0.5))
|
| 252 |
anchorSOuter.setAttribute('stroke', rgba(C.dr, 0.72))
|
| 253 |
anchorS.setAttribute('fill', rgba(C.dr, 0.52))
|
|
@@ -257,16 +260,12 @@
|
|
| 257 |
anchorE.setAttribute('stroke', rgba(C.wr, 0.42))
|
| 258 |
anchorSLabel.setAttribute('fill', rgba(C.dr, 0.88))
|
| 259 |
anchorELabel.setAttribute('fill', rgba(C.wr, 0.88))
|
| 260 |
-
if (boatTrail) boatTrail.setAttribute('stroke', rgba(C.dr, 0.55))
|
| 261 |
}
|
| 262 |
|
| 263 |
function updateTrackSvgGeomIfNeeded() {
|
| 264 |
if (boatStart.x === lastTrackSx && boatStart.y === lastTrackSy &&
|
| 265 |
boatEnd.x === lastTrackEx && boatEnd.y === lastTrackEy) return
|
| 266 |
-
if (!isNaN(lastTrackSx)
|
| 267 |
-
(boatStart.x !== lastTrackSx || boatStart.y !== lastTrackSy ||
|
| 268 |
-
boatEnd.x !== lastTrackEx || boatEnd.y !== lastTrackEy))
|
| 269 |
-
clearTrail()
|
| 270 |
lastTrackSx = boatStart.x
|
| 271 |
lastTrackSy = boatStart.y
|
| 272 |
lastTrackEx = boatEnd.x
|
|
@@ -658,6 +657,8 @@
|
|
| 658 |
var by = boatStart.y + (boatEnd.y - boatStart.y) * boatT
|
| 659 |
var visible = isBoatVisible(bx, by, camHeading, p.fov)
|
| 660 |
var distThisFrame = p.boatSpeed * 0.514 * dt
|
|
|
|
|
|
|
| 661 |
if (prevVisible !== null && visible !== prevVisible) {
|
| 662 |
if (visible) {
|
| 663 |
clearTrail(false)
|
|
@@ -674,8 +675,6 @@
|
|
| 674 |
else blindStreak += distThisFrame
|
| 675 |
prevVisible = visible
|
| 676 |
|
| 677 |
-
if (coneEl && SCALE > 0 && pathLen > 0.001 && !visible) appendTrail(bx, by)
|
| 678 |
-
|
| 679 |
if (!coneEl || SCALE === 0) updateStats(p, bx, by, visible)
|
| 680 |
else {
|
| 681 |
draw(p, bx, by, visible)
|
|
|
|
| 49 |
var trajLine = null
|
| 50 |
var boatTrail = null
|
| 51 |
var bearingLine = null
|
| 52 |
+
|
| 53 |
var anchorSOuter = null
|
| 54 |
var anchorS = null
|
| 55 |
var anchorEOuter = null
|
|
|
|
| 168 |
prevDetectedStreak = prevBlindStreak = prevVisible = null
|
| 169 |
}
|
| 170 |
|
| 171 |
+
|
| 172 |
function clearTrail(resetIconAngle) {
|
| 173 |
trailFlat.length = 0
|
| 174 |
if (resetIconAngle !== false) lastTrailIconAngle = NaN
|
|
|
|
| 250 |
camDot.setAttribute('stroke', rgba(C.pr, 0.5))
|
| 251 |
trajLine.setAttribute('stroke', rgba(C.dr, 0.25))
|
| 252 |
bearingLine.setAttribute('stroke', rgba(C.dr, 0.12))
|
| 253 |
+
if (boatTrail) boatTrail.setAttribute('stroke', rgba(C.dr, 0.55))
|
| 254 |
for (var i = 0; i < 4; i++) camCorners[i].setAttribute('stroke', rgba(C.pr, 0.5))
|
| 255 |
anchorSOuter.setAttribute('stroke', rgba(C.dr, 0.72))
|
| 256 |
anchorS.setAttribute('fill', rgba(C.dr, 0.52))
|
|
|
|
| 260 |
anchorE.setAttribute('stroke', rgba(C.wr, 0.42))
|
| 261 |
anchorSLabel.setAttribute('fill', rgba(C.dr, 0.88))
|
| 262 |
anchorELabel.setAttribute('fill', rgba(C.wr, 0.88))
|
|
|
|
| 263 |
}
|
| 264 |
|
| 265 |
function updateTrackSvgGeomIfNeeded() {
|
| 266 |
if (boatStart.x === lastTrackSx && boatStart.y === lastTrackSy &&
|
| 267 |
boatEnd.x === lastTrackEx && boatEnd.y === lastTrackEy) return
|
| 268 |
+
if (!isNaN(lastTrackSx)) clearTrail()
|
|
|
|
|
|
|
|
|
|
| 269 |
lastTrackSx = boatStart.x
|
| 270 |
lastTrackSy = boatStart.y
|
| 271 |
lastTrackEx = boatEnd.x
|
|
|
|
| 657 |
var by = boatStart.y + (boatEnd.y - boatStart.y) * boatT
|
| 658 |
var visible = isBoatVisible(bx, by, camHeading, p.fov)
|
| 659 |
var distThisFrame = p.boatSpeed * 0.514 * dt
|
| 660 |
+
if (coneEl && SCALE > 0 && pathLen > 0.001 && !visible) appendTrail(bx, by)
|
| 661 |
+
|
| 662 |
if (prevVisible !== null && visible !== prevVisible) {
|
| 663 |
if (visible) {
|
| 664 |
clearTrail(false)
|
|
|
|
| 675 |
else blindStreak += distThisFrame
|
| 676 |
prevVisible = visible
|
| 677 |
|
|
|
|
|
|
|
| 678 |
if (!coneEl || SCALE === 0) updateStats(p, bx, by, visible)
|
| 679 |
else {
|
| 680 |
draw(p, bx, by, visible)
|
style.css
CHANGED
|
@@ -205,47 +205,6 @@ body {
|
|
| 205 |
user-select: none;
|
| 206 |
}
|
| 207 |
|
| 208 |
-
/* Draggable anchor affordance β discrete pulse; opacity stacks with fill/stroke alphas from JS. */
|
| 209 |
-
@keyframes drag-anchor-ring-pulse {
|
| 210 |
-
0%, 100% { opacity: 0.8; }
|
| 211 |
-
50% { opacity: 1; }
|
| 212 |
-
}
|
| 213 |
-
|
| 214 |
-
@keyframes drag-anchor-core-pulse {
|
| 215 |
-
0%, 100% { opacity: 0.9; }
|
| 216 |
-
50% { opacity: 1; }
|
| 217 |
-
}
|
| 218 |
-
|
| 219 |
-
@keyframes drag-anchor-label-pulse {
|
| 220 |
-
0%, 100% { opacity: 0.84; }
|
| 221 |
-
50% { opacity: 1; }
|
| 222 |
-
}
|
| 223 |
-
|
| 224 |
-
#canvas-wrap svg .drag-anchor-ring {
|
| 225 |
-
animation: drag-anchor-ring-pulse 2.75s ease-in-out infinite;
|
| 226 |
-
}
|
| 227 |
-
|
| 228 |
-
#canvas-wrap svg .drag-anchor-ring--end,
|
| 229 |
-
#canvas-wrap svg .drag-anchor-core--end,
|
| 230 |
-
#canvas-wrap svg .drag-anchor-label--end {
|
| 231 |
-
animation-delay: 1.38s;
|
| 232 |
-
}
|
| 233 |
-
|
| 234 |
-
#canvas-wrap svg .drag-anchor-core {
|
| 235 |
-
animation: drag-anchor-core-pulse 2.75s ease-in-out infinite;
|
| 236 |
-
}
|
| 237 |
-
|
| 238 |
-
#canvas-wrap svg .drag-anchor-label {
|
| 239 |
-
animation: drag-anchor-label-pulse 2.75s ease-in-out infinite;
|
| 240 |
-
}
|
| 241 |
-
|
| 242 |
-
@media (prefers-reduced-motion: reduce) {
|
| 243 |
-
#canvas-wrap svg .drag-anchor-ring,
|
| 244 |
-
#canvas-wrap svg .drag-anchor-core,
|
| 245 |
-
#canvas-wrap svg .drag-anchor-label {
|
| 246 |
-
animation: none;
|
| 247 |
-
}
|
| 248 |
-
}
|
| 249 |
|
| 250 |
/* ββ Zoom bar ββββββββββββββββββββββββββββββββββββββββββ */
|
| 251 |
|
|
|
|
| 205 |
user-select: none;
|
| 206 |
}
|
| 207 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 208 |
|
| 209 |
/* ββ Zoom bar ββββββββββββββββββββββββββββββββββββββββββ */
|
| 210 |
|