✨ 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
64 lines
2.7 KiB
JavaScript
64 lines
2.7 KiB
JavaScript
import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';
|
|
import { animateTarget } from './visual-element-target.mjs';
|
|
|
|
function animateVariant(visualElement, variant, options = {}) {
|
|
const resolved = resolveVariant(visualElement, variant, options.custom);
|
|
let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
|
|
if (options.transitionOverride) {
|
|
transition = options.transitionOverride;
|
|
}
|
|
/**
|
|
* If we have a variant, create a callback that runs it as an animation.
|
|
* Otherwise, we resolve a Promise immediately for a composable no-op.
|
|
*/
|
|
const getAnimation = resolved
|
|
? () => Promise.all(animateTarget(visualElement, resolved, options))
|
|
: () => Promise.resolve();
|
|
/**
|
|
* If we have children, create a callback that runs all their animations.
|
|
* Otherwise, we resolve a Promise immediately for a composable no-op.
|
|
*/
|
|
const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
|
|
? (forwardDelay = 0) => {
|
|
const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
|
|
return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
|
|
}
|
|
: () => Promise.resolve();
|
|
/**
|
|
* If the transition explicitly defines a "when" option, we need to resolve either
|
|
* this animation or all children animations before playing the other.
|
|
*/
|
|
const { when } = transition;
|
|
if (when) {
|
|
const [first, last] = when === "beforeChildren"
|
|
? [getAnimation, getChildAnimations]
|
|
: [getChildAnimations, getAnimation];
|
|
return first().then(() => last());
|
|
}
|
|
else {
|
|
return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
|
|
}
|
|
}
|
|
function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
|
|
const animations = [];
|
|
const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
|
|
const generateStaggerDuration = staggerDirection === 1
|
|
? (i = 0) => i * staggerChildren
|
|
: (i = 0) => maxStaggerDuration - i * staggerChildren;
|
|
Array.from(visualElement.variantChildren)
|
|
.sort(sortByTreeOrder)
|
|
.forEach((child, i) => {
|
|
child.notify("AnimationStart", variant);
|
|
animations.push(animateVariant(child, variant, {
|
|
...options,
|
|
delay: delayChildren + generateStaggerDuration(i),
|
|
}).then(() => child.notify("AnimationComplete", variant)));
|
|
});
|
|
return Promise.all(animations);
|
|
}
|
|
function sortByTreeOrder(a, b) {
|
|
return a.sortNodePosition(b);
|
|
}
|
|
|
|
export { animateVariant, sortByTreeOrder };
|