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
89 lines
2.3 KiB
JavaScript
89 lines
2.3 KiB
JavaScript
import { useConstant } from '../../utils/use-constant.mjs';
|
|
|
|
/**
|
|
* Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
|
|
*
|
|
* ```jsx
|
|
* const dragControls = useDragControls()
|
|
*
|
|
* function startDrag(event) {
|
|
* dragControls.start(event, { snapToCursor: true })
|
|
* }
|
|
*
|
|
* return (
|
|
* <>
|
|
* <div onPointerDown={startDrag} />
|
|
* <motion.div drag="x" dragControls={dragControls} />
|
|
* </>
|
|
* )
|
|
* ```
|
|
*
|
|
* @public
|
|
*/
|
|
class DragControls {
|
|
constructor() {
|
|
this.componentControls = new Set();
|
|
}
|
|
/**
|
|
* Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
|
|
*
|
|
* @internal
|
|
*/
|
|
subscribe(controls) {
|
|
this.componentControls.add(controls);
|
|
return () => this.componentControls.delete(controls);
|
|
}
|
|
/**
|
|
* Start a drag gesture on every `motion` component that has this set of drag controls
|
|
* passed into it via the `dragControls` prop.
|
|
*
|
|
* ```jsx
|
|
* dragControls.start(e, {
|
|
* snapToCursor: true
|
|
* })
|
|
* ```
|
|
*
|
|
* @param event - PointerEvent
|
|
* @param options - Options
|
|
*
|
|
* @public
|
|
*/
|
|
start(event, options) {
|
|
this.componentControls.forEach((controls) => {
|
|
controls.start(event.nativeEvent || event, options);
|
|
});
|
|
}
|
|
}
|
|
const createDragControls = () => new DragControls();
|
|
/**
|
|
* Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
|
|
* and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
|
|
* might want to initiate that dragging from a different component than the draggable one.
|
|
*
|
|
* By creating a `dragControls` using the `useDragControls` hook, we can pass this into
|
|
* the draggable component's `dragControls` prop. It exposes a `start` method
|
|
* that can start dragging from pointer events on other components.
|
|
*
|
|
* ```jsx
|
|
* const dragControls = useDragControls()
|
|
*
|
|
* function startDrag(event) {
|
|
* dragControls.start(event, { snapToCursor: true })
|
|
* }
|
|
*
|
|
* return (
|
|
* <>
|
|
* <div onPointerDown={startDrag} />
|
|
* <motion.div drag="x" dragControls={dragControls} />
|
|
* </>
|
|
* )
|
|
* ```
|
|
*
|
|
* @public
|
|
*/
|
|
function useDragControls() {
|
|
return useConstant(createDragControls);
|
|
}
|
|
|
|
export { DragControls, useDragControls };
|