✨ 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
140 lines
4.8 KiB
JavaScript
140 lines
4.8 KiB
JavaScript
"use client";
|
|
|
|
// src/presence.tsx
|
|
import * as React2 from "react";
|
|
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
|
|
|
|
// src/use-state-machine.tsx
|
|
import * as React from "react";
|
|
function useStateMachine(initialState, machine) {
|
|
return React.useReducer((state, event) => {
|
|
const nextState = machine[state][event];
|
|
return nextState ?? state;
|
|
}, initialState);
|
|
}
|
|
|
|
// src/presence.tsx
|
|
var Presence = (props) => {
|
|
const { present, children } = props;
|
|
const presence = usePresence(present);
|
|
const child = typeof children === "function" ? children({ present: presence.isPresent }) : React2.Children.only(children);
|
|
const ref = useComposedRefs(presence.ref, getElementRef(child));
|
|
const forceMount = typeof children === "function";
|
|
return forceMount || presence.isPresent ? React2.cloneElement(child, { ref }) : null;
|
|
};
|
|
Presence.displayName = "Presence";
|
|
function usePresence(present) {
|
|
const [node, setNode] = React2.useState();
|
|
const stylesRef = React2.useRef(null);
|
|
const prevPresentRef = React2.useRef(present);
|
|
const prevAnimationNameRef = React2.useRef("none");
|
|
const initialState = present ? "mounted" : "unmounted";
|
|
const [state, send] = useStateMachine(initialState, {
|
|
mounted: {
|
|
UNMOUNT: "unmounted",
|
|
ANIMATION_OUT: "unmountSuspended"
|
|
},
|
|
unmountSuspended: {
|
|
MOUNT: "mounted",
|
|
ANIMATION_END: "unmounted"
|
|
},
|
|
unmounted: {
|
|
MOUNT: "mounted"
|
|
}
|
|
});
|
|
React2.useEffect(() => {
|
|
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
|
|
}, [state]);
|
|
useLayoutEffect(() => {
|
|
const styles = stylesRef.current;
|
|
const wasPresent = prevPresentRef.current;
|
|
const hasPresentChanged = wasPresent !== present;
|
|
if (hasPresentChanged) {
|
|
const prevAnimationName = prevAnimationNameRef.current;
|
|
const currentAnimationName = getAnimationName(styles);
|
|
if (present) {
|
|
send("MOUNT");
|
|
} else if (currentAnimationName === "none" || styles?.display === "none") {
|
|
send("UNMOUNT");
|
|
} else {
|
|
const isAnimating = prevAnimationName !== currentAnimationName;
|
|
if (wasPresent && isAnimating) {
|
|
send("ANIMATION_OUT");
|
|
} else {
|
|
send("UNMOUNT");
|
|
}
|
|
}
|
|
prevPresentRef.current = present;
|
|
}
|
|
}, [present, send]);
|
|
useLayoutEffect(() => {
|
|
if (node) {
|
|
let timeoutId;
|
|
const ownerWindow = node.ownerDocument.defaultView ?? window;
|
|
const handleAnimationEnd = (event) => {
|
|
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
const isCurrentAnimation = currentAnimationName.includes(event.animationName);
|
|
if (event.target === node && isCurrentAnimation) {
|
|
send("ANIMATION_END");
|
|
if (!prevPresentRef.current) {
|
|
const currentFillMode = node.style.animationFillMode;
|
|
node.style.animationFillMode = "forwards";
|
|
timeoutId = ownerWindow.setTimeout(() => {
|
|
if (node.style.animationFillMode === "forwards") {
|
|
node.style.animationFillMode = currentFillMode;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
const handleAnimationStart = (event) => {
|
|
if (event.target === node) {
|
|
prevAnimationNameRef.current = getAnimationName(stylesRef.current);
|
|
}
|
|
};
|
|
node.addEventListener("animationstart", handleAnimationStart);
|
|
node.addEventListener("animationcancel", handleAnimationEnd);
|
|
node.addEventListener("animationend", handleAnimationEnd);
|
|
return () => {
|
|
ownerWindow.clearTimeout(timeoutId);
|
|
node.removeEventListener("animationstart", handleAnimationStart);
|
|
node.removeEventListener("animationcancel", handleAnimationEnd);
|
|
node.removeEventListener("animationend", handleAnimationEnd);
|
|
};
|
|
} else {
|
|
send("ANIMATION_END");
|
|
}
|
|
}, [node, send]);
|
|
return {
|
|
isPresent: ["mounted", "unmountSuspended"].includes(state),
|
|
ref: React2.useCallback((node2) => {
|
|
stylesRef.current = node2 ? getComputedStyle(node2) : null;
|
|
setNode(node2);
|
|
}, [])
|
|
};
|
|
}
|
|
function getAnimationName(styles) {
|
|
return styles?.animationName || "none";
|
|
}
|
|
function getElementRef(element) {
|
|
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
if (mayWarn) {
|
|
return element.ref;
|
|
}
|
|
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
if (mayWarn) {
|
|
return element.props.ref;
|
|
}
|
|
return element.props.ref || element.ref;
|
|
}
|
|
var Root = Presence;
|
|
export {
|
|
Presence,
|
|
Root
|
|
};
|
|
//# sourceMappingURL=index.mjs.map
|