thêm zustand để cấu hình global state, hook để lấy platform, thêm polyline và polygon b vào map

2025-10-31 19:54:16 +07:00
parent 2fac0b8093
commit 5801992eae
19 changed files with 1202 additions and 89 deletions
--- a/components/map/PolylineWithLabel.tsx
+++ b/components/map/PolylineWithLabel.tsx
@@ -0,0 +1,124 @@
+import {
+  calculateTotalDistance,
+  getMiddlePointOfPolyline,
+} from "@/utils/polyline";
+import React, { memo } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { Marker, Polyline } from "react-native-maps";
+
+export interface PolylineWithLabelProps {
+  coordinates: {
+    latitude: number;
+    longitude: number;
+  }[];
+  label?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+  showDistance?: boolean;
+  zIndex?: number;
+}
+
+/**
+ * Component render Polyline kèm Label/Text ở giữa
+ */
+const PolylineWithLabelComponent: React.FC<PolylineWithLabelProps> = ({
+  coordinates,
+  label,
+  strokeColor = "#FF5733",
+  strokeWidth = 4,
+  showDistance = false,
+  zIndex = 50,
+}) => {
+  if (!coordinates || coordinates.length < 2) {
+    return null;
+  }
+
+  const middlePoint = getMiddlePointOfPolyline(coordinates);
+  const distance = calculateTotalDistance(coordinates);
+
+  let displayText = label || "";
+  if (showDistance) {
+    displayText += displayText
+      ? ` (${distance.toFixed(2)}km)`
+      : `${distance.toFixed(2)}km`;
+  }
+
+  return (
+    <>
+      <Polyline
+        coordinates={coordinates}
+        strokeColor={strokeColor}
+        strokeWidth={strokeWidth}
+        zIndex={zIndex}
+      />
+      {displayText && (
+        <Marker
+          coordinate={middlePoint}
+          zIndex={zIndex + 10}
+          tracksViewChanges={false}
+          anchor={{ x: 0.5, y: 0.5 }}
+        >
+          <View style={styles.markerContainer}>
+            <View style={styles.labelContainer}>
+              <Text
+                style={styles.labelText}
+                numberOfLines={2}
+                adjustsFontSizeToFit
+              >
+                {displayText}
+              </Text>
+            </View>
+          </View>
+        </Marker>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  markerContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  labelContainer: {
+    backgroundColor: "rgba(255, 87, 51, 0.95)",
+    paddingHorizontal: 5,
+    paddingVertical: 5,
+    borderRadius: 18,
+    borderWidth: 1,
+    borderColor: "#fff",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.4,
+    shadowRadius: 5,
+    elevation: 8,
+    minWidth: 80,
+    maxWidth: 180,
+  },
+  labelText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "bold",
+    letterSpacing: 0.3,
+    textAlign: "center",
+  },
+});
+
+// Export memoized component để tránh re-render không cần thiết
+export const PolylineWithLabel = memo(
+  PolylineWithLabelComponent,
+  (prev, next) => {
+    // Custom comparison: chỉ re-render khi coordinates, label hoặc showDistance thay đổi
+    return (
+      prev.coordinates.length === next.coordinates.length &&
+      prev.coordinates.every(
+        (coord, index) =>
+          coord.latitude === next.coordinates[index]?.latitude &&
+          coord.longitude === next.coordinates[index]?.longitude
+      ) &&
+      prev.label === next.label &&
+      prev.showDistance === next.showDistance &&
+      prev.strokeColor === next.strokeColor
+    );
+  }
+);