✨ MAJOR FEATURES: • Auto-zoom intelligence với smart bounds fitting • Enhanced 3D GPS markers với pulsing effects • Professional route display với 6-layer rendering • Status-based parking icons với availability indicators • Production-ready build optimizations 🗺️ AUTO-ZOOM FEATURES: • Smart bounds fitting cho GPS + selected parking • Adaptive padding (50px) cho visual balance • Max zoom control (level 16) để tránh quá gần • Dynamic centering khi không có selection 🎨 ENHANCED VISUALS: • 3D GPS marker với multi-layer pulse effects • Advanced parking icons với status colors • Selection highlighting với animation • Dimming system cho non-selected items 🛣️ ROUTE SYSTEM: • OpenRouteService API integration • Multi-layer route rendering (glow, shadow, main, animated) • Real-time distance & duration calculation • Visual route info trong popup 📱 PRODUCTION READY: • SSR safe với dynamic imports • Build errors resolved • Global deployment via Vercel • Optimized performance 🌍 DEPLOYMENT: • Vercel: https://whatever-ctk2auuxr-phong12hexdockworks-projects.vercel.app • Bundle size: 22.8 kB optimized • Global CDN distribution • HTTPS enabled 💾 VERSION CONTROL: • MapView-v2.0.tsx backup created • MAPVIEW_VERSIONS.md documentation • Full version history tracking
82 lines
2.2 KiB
JavaScript
82 lines
2.2 KiB
JavaScript
import { observeTimeline } from '../render/dom/scroll/observe.mjs';
|
|
import { supportsScrollTimeline } from '../render/dom/scroll/supports.mjs';
|
|
|
|
class GroupPlaybackControls {
|
|
constructor(animations) {
|
|
this.animations = animations.filter(Boolean);
|
|
}
|
|
then(onResolve, onReject) {
|
|
return Promise.all(this.animations).then(onResolve).catch(onReject);
|
|
}
|
|
/**
|
|
* TODO: Filter out cancelled or stopped animations before returning
|
|
*/
|
|
getAll(propName) {
|
|
return this.animations[0][propName];
|
|
}
|
|
setAll(propName, newValue) {
|
|
for (let i = 0; i < this.animations.length; i++) {
|
|
this.animations[i][propName] = newValue;
|
|
}
|
|
}
|
|
attachTimeline(timeline) {
|
|
const cancelAll = this.animations.map((animation) => {
|
|
if (supportsScrollTimeline() && animation.attachTimeline) {
|
|
animation.attachTimeline(timeline);
|
|
}
|
|
else {
|
|
animation.pause();
|
|
return observeTimeline((progress) => {
|
|
animation.time = animation.duration * progress;
|
|
}, timeline);
|
|
}
|
|
});
|
|
return () => {
|
|
cancelAll.forEach((cancelTimeline, i) => {
|
|
if (cancelTimeline)
|
|
cancelTimeline();
|
|
this.animations[i].stop();
|
|
});
|
|
};
|
|
}
|
|
get time() {
|
|
return this.getAll("time");
|
|
}
|
|
set time(time) {
|
|
this.setAll("time", time);
|
|
}
|
|
get speed() {
|
|
return this.getAll("speed");
|
|
}
|
|
set speed(speed) {
|
|
this.setAll("speed", speed);
|
|
}
|
|
get duration() {
|
|
let max = 0;
|
|
for (let i = 0; i < this.animations.length; i++) {
|
|
max = Math.max(max, this.animations[i].duration);
|
|
}
|
|
return max;
|
|
}
|
|
runAll(methodName) {
|
|
this.animations.forEach((controls) => controls[methodName]());
|
|
}
|
|
play() {
|
|
this.runAll("play");
|
|
}
|
|
pause() {
|
|
this.runAll("pause");
|
|
}
|
|
stop() {
|
|
this.runAll("stop");
|
|
}
|
|
cancel() {
|
|
this.runAll("cancel");
|
|
}
|
|
complete() {
|
|
this.runAll("complete");
|
|
}
|
|
}
|
|
|
|
export { GroupPlaybackControls };
|