From c5cef8eeee11e36910e89814cb26d319b195520e Mon Sep 17 00:00:00 2001
From: Augustin Gjini <augustin.gjini@pm.me>
Date: Thu, 17 Oct 2024 15:05:24 +0200
Subject: [PATCH] feat(app): improve point selection

---
 .../map/layers/RallyingPointsDisplayLayer.tsx | 73 +++++++++++--------
 app/src/screens/publish/SelectOnMapView.tsx   | 19 +----
 2 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/app/src/components/map/layers/RallyingPointsDisplayLayer.tsx b/app/src/components/map/layers/RallyingPointsDisplayLayer.tsx
index 1319dc31..2b307be8 100644
--- a/app/src/components/map/layers/RallyingPointsDisplayLayer.tsx
+++ b/app/src/components/map/layers/RallyingPointsDisplayLayer.tsx
@@ -1,13 +1,16 @@
 import { RallyingPoint, Ref } from "@liane/common";
 import React from "react";
-import { AppColors, AppColorPalettes } from "@/theme/colors";
+import { AppColors } from "@/theme/colors";
 import MapLibreGL from "@maplibre/maplibre-react-native";
 import { Feature, Point } from "geojson";
 import { useAppMapViewController } from "@/components/map/AppMapView";
 import { RNAppEnv } from "@/api/env";
 
-export const RallyingPointsDisplayLayer = ({ onSelect }: { onSelect?: (rp: RallyingPoint) => void; selected?: Ref<RallyingPoint> | undefined }) => {
+export type RallyingPointsDisplayLayerProps = { onSelect?: (rp: RallyingPoint) => void; selected?: Ref<RallyingPoint> | undefined };
+
+export const RallyingPointsDisplayLayer = ({ selected, onSelect }: RallyingPointsDisplayLayerProps) => {
   const controller = useAppMapViewController();
+
   return (
     <MapLibreGL.VectorSource
       id={"all_rallying_points"}
@@ -24,35 +27,39 @@ export const RallyingPointsDisplayLayer = ({ onSelect }: { onSelect?: (rp: Rally
               if (points.length === 1) {
                 const p = points[0];
 
-                //@ts-ignore
-                onSelect({ ...p!.properties!, location: { lat: p.geometry.coordinates[1], lng: p.geometry.coordinates[0] } });
-              } else if (points.length > 0) {
-                const zoom = await controller.getZoom()!;
-
-                let newZoom;
-                if (zoom < 10.5) {
-                  newZoom = 12.1; //rp ? 12.1 : zoom + 1.5;
-                } else if (zoom < 12) {
-                  newZoom = 12.1;
-                } else {
-                  newZoom = zoom + 1;
+                if (!p.properties?.point_count) {
+                  //@ts-ignore
+                  onSelect({ ...p.properties, location: { lat: p.geometry.coordinates[1], lng: p.geometry.coordinates[0] } });
+                  await controller.setCenter(center);
+                  return;
                 }
-                await controller.setCenter(center, newZoom);
               }
+
+              const zoom = await controller.getZoom()!;
+
+              let newZoom;
+              if (zoom < 10.5) {
+                newZoom = 12.1; //rp ? 12.1 : zoom + 1.5;
+              } else if (zoom < 12) {
+                newZoom = 12.1;
+              } else {
+                newZoom = zoom + 1;
+              }
+              await controller.setCenter(center, newZoom);
             }
           : undefined
       }>
       <MapLibreGL.SymbolLayer
         id="rp_symbols"
         sourceLayerID={"rallying_point_display"}
-        minZoomLevel={10.5}
+        filter={["!", ["has", "point_count"]]}
         style={{
           textFont: ["Open Sans Regular", "Noto Sans Regular"],
-          textSize: 12,
-          textColor: AppColors.black,
+          textSize: 14,
+          textColor: ["case", ["==", ["get", "id"], selected ?? "XXXXXXXXX"], AppColors.primaryColor, AppColors.black],
           textHaloColor: AppColors.white,
-          textHaloWidth: 1.5,
-          textField: ["step", ["zoom"], "", 12, ["get", "label"]],
+          textHaloWidth: 1,
+          textField: ["get", "label"],
           textAllowOverlap: false,
           iconAllowOverlap: true,
           textAnchor: "bottom",
@@ -66,17 +73,25 @@ export const RallyingPointsDisplayLayer = ({ onSelect }: { onSelect?: (rp: Rally
           iconSize: ["step", ["zoom"], 0.32, 12, 0.4]
         }}
       />
-      <MapLibreGL.CircleLayer
-        id="rp_symbols_small"
+
+      <MapLibreGL.SymbolLayer
+        id="rp_clusters"
         sourceLayerID={"rallying_point_display"}
-        minZoomLevel={5}
-        maxZoomLevel={10.5}
+        filter={["has", "point_count"]}
         style={{
-          circleColor: AppColorPalettes.pink[500],
-          circleRadius: 4,
-          circleStrokeColor: AppColors.white,
-          circleStrokeWidth: 1,
-          visibility: "visible"
+          textFont: ["Open Sans Regular", "Noto Sans Regular"],
+          textSize: 18,
+          textColor: AppColors.white,
+          textHaloWidth: 0.2,
+          textField: ["get", "point_count"],
+          textAllowOverlap: false,
+          iconAllowOverlap: true,
+          textMaxWidth: 5.4,
+          textOptional: true,
+          visibility: "visible",
+          iconImage: "deposit_cluster",
+          iconAnchor: "center",
+          iconSize: ["step", ["zoom"], 0.5, 12, 0.4]
         }}
       />
     </MapLibreGL.VectorSource>
diff --git a/app/src/screens/publish/SelectOnMapView.tsx b/app/src/screens/publish/SelectOnMapView.tsx
index f38597f2..03f0dc33 100644
--- a/app/src/screens/publish/SelectOnMapView.tsx
+++ b/app/src/screens/publish/SelectOnMapView.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { RallyingPoint } from "@liane/common";
 import { useAppBackController } from "@/components/AppBackContextProvider";
-import { AppColorPalettes, AppColors, defaultTextColor } from "@/theme/colors";
+import { AppColors, defaultTextColor } from "@/theme/colors";
 import { AppStyles } from "@/theme/styles";
 import { Column, Row } from "@/components/base/AppLayout";
 import AppMapView from "@/components/map/AppMapView";
@@ -10,8 +10,6 @@ import LocationPin from "@/assets/location_pin.svg";
 import { RallyingPointItem } from "@/screens/ItinerarySearchForm";
 import { AppRoundedButton } from "@/components/base/AppRoundedButton";
 import { RallyingPointsDisplayLayer } from "@/components/map/layers/RallyingPointsDisplayLayer";
-import { WayPointDisplay } from "@/components/map/markers/WayPointDisplay";
-import Animated, { ZoomIn, ZoomOut } from "react-native-reanimated";
 import { PageHeader } from "@/components/context/Navigation";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AppPressableIcon } from "@/components/base/AppPressable";
@@ -29,21 +27,13 @@ export const SelectOnMapView = ({ onSelect, title }: SelectOnMapViewProps) => {
   return (
     <View style={styles.container}>
       <AppMapView>
-        {<RallyingPointsDisplayLayer selected={selectedRP?.id} onSelect={setSelectedRP} />}
-        {selectedRP && (
-          <Animated.View entering={ZoomIn} exiting={ZoomOut}>
-            <WayPointDisplay rallyingPoint={selectedRP} type={"from"} size={24} offsetY={-24} />
-          </Animated.View>
-        )}
+        <RallyingPointsDisplayLayer selected={selectedRP?.id} onSelect={setSelectedRP} />
       </AppMapView>
       <View style={[styles.headerContainer, AppStyles.shadow]}>
         <PageHeader title={title} goBack={goBack} />
       </View>
       {selectedRP && (
-        <Column style={[styles.footerContainer, AppStyles.shadow, { paddingBottom: bottom }]} spacing={8}>
-          <Row style={{ position: "relative", left: -16, padding: 8 }}>
-            <AppPressableIcon name={"close"} onPress={() => setSelectedRP(undefined)} />
-          </Row>
+        <Column style={[styles.footerContainer, AppStyles.shadow, { paddingTop: 32, paddingBottom: 32 + bottom }]} spacing={8}>
           <Row
             style={{
               alignItems: "center",
@@ -52,8 +42,6 @@ export const SelectOnMapView = ({ onSelect, title }: SelectOnMapViewProps) => {
               paddingVertical: 8,
               paddingHorizontal: 4,
               borderRadius: 16,
-              borderColor: AppColorPalettes.gray[200],
-              borderWidth: 1,
               position: "relative",
               top: -4
             }}
@@ -63,6 +51,7 @@ export const SelectOnMapView = ({ onSelect, title }: SelectOnMapViewProps) => {
               <RallyingPointItem item={selectedRP} labelSize={18} showIcon={false} detailed={true} />
             </View>
             <View style={{ width: 24, flexShrink: 100 }} />
+            <AppPressableIcon name={"close"} onPress={() => setSelectedRP(undefined)} />
           </Row>
           <Row spacing={8}>
             <AppRoundedButton flex={2} backgroundColor={AppColors.primaryColor} text={"Choisir ce point"} onPress={() => onSelect(selectedRP)} />