PhongPham
c65cc97a33
✨ 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
58 lines
2.2 KiB
JavaScript
58 lines
2.2 KiB
JavaScript
import { useMemo } from 'react';
|
|
import { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';
|
|
import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
|
|
import { buildHTMLStyles } from './utils/build-styles.mjs';
|
|
import { createHtmlRenderState } from './utils/create-render-state.mjs';
|
|
|
|
function copyRawValuesOnly(target, source, props) {
|
|
for (const key in source) {
|
|
if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
function useInitialMotionValues({ transformTemplate }, visualState, isStatic) {
|
|
return useMemo(() => {
|
|
const state = createHtmlRenderState();
|
|
buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
|
|
return Object.assign({}, state.vars, state.style);
|
|
}, [visualState]);
|
|
}
|
|
function useStyle(props, visualState, isStatic) {
|
|
const styleProp = props.style || {};
|
|
const style = {};
|
|
/**
|
|
* Copy non-Motion Values straight into style
|
|
*/
|
|
copyRawValuesOnly(style, styleProp, props);
|
|
Object.assign(style, useInitialMotionValues(props, visualState, isStatic));
|
|
return props.transformValues ? props.transformValues(style) : style;
|
|
}
|
|
function useHTMLProps(props, visualState, isStatic) {
|
|
// The `any` isn't ideal but it is the type of createElement props argument
|
|
const htmlProps = {};
|
|
const style = useStyle(props, visualState, isStatic);
|
|
if (props.drag && props.dragListener !== false) {
|
|
// Disable the ghost element when a user drags
|
|
htmlProps.draggable = false;
|
|
// Disable text selection
|
|
style.userSelect =
|
|
style.WebkitUserSelect =
|
|
style.WebkitTouchCallout =
|
|
"none";
|
|
// Disable scrolling on the draggable direction
|
|
style.touchAction =
|
|
props.drag === true
|
|
? "none"
|
|
: `pan-${props.drag === "x" ? "y" : "x"}`;
|
|
}
|
|
if (props.tabIndex === undefined &&
|
|
(props.onTap || props.onTapStart || props.whileTap)) {
|
|
htmlProps.tabIndex = 0;
|
|
}
|
|
htmlProps.style = style;
|
|
return htmlProps;
|
|
}
|
|
|
|
export { copyRawValuesOnly, useHTMLProps };
|