@m4l/gclick 0.1.0 → 0.2.0-JAEBeta.1

package/components/maps/components/GpsMap/classes/types.d.ts

@@ -8,6 +8,10 @@ export interface MapClasses {
      * Root element for the top right tools
      */
     topRigthToolsRoot: string;
+    /**
+     * Root element for the bottom right tools
+     */
+    bottomRightToolsRoot: string;
     /**
      * Container de zoom buttons
      */
@@ -28,13 +32,6 @@ export interface MapClasses {
      * Contenedor de las etiquetas de las marcas, poligonoes, etc, en general de los features
      */
     featureLabel: string;
-    meaureToolRoot: string;
-    measureToolFormValue: string;
-    measureToolFormValueDistance: string;
-    measureToolFormValueSymbol: string;
-    measureToolLabel: string;
-    meausureToolLabelDistance: string;
-    meausureToolLabelSymbol: string;
     /**
      * Root element de la marca cread con L.divIcon, esta al mismo nivel de leaflet-marker-icon para denotar las marcas de medición
      */
@@ -43,6 +40,7 @@ export interface MapClasses {
      * Contenedor de la marca de medición, que indica el numero y forma el forma el rombo de la marca
      */
     measureMarkerContainer: string;
+    measureMarkerSvgRoot: string;
     measureMarkerContainerRhomb: string;
     measureMarkerContainerSlot: string;
     measureMarkerContainerSlotNumber: string;
@@ -50,15 +48,6 @@ export interface MapClasses {
     measureLabelMarkerContainer: string;
     measureLabelMarkerDistance: string;
     measureLabelMarkerRemove: string;
-    /**
-     * Map sources
-     */
-    mapSourcesPopoverRoot: string;
-    mapSourcesRoot: string;
-    mapSourcesOption: string;
-    mapSourcesOptionIconLabel: string;
-    mapSourcesOptionRoadOptions: string;
-    mapSourcesOptionRoadOptionsCheck: string;
     /**
      * Layers
      */

package/components/maps/components/GpsMap/constants.d.ts

@@ -1,5 +1,6 @@
-export declare const COMPONENT_TEST_ID = "M4LMap";
-export declare const COMPONET_KEY_COMPONENT = "M4LMap";
+import { RNDDefaultPosition } from '@m4l/components';
+export declare const MAP_COMPONENT_TEST_ID = "M4LMap";
+export declare const MAP_COMPONET_KEY_COMPONENT = "M4LMap";
 export declare const EARTH_RADIO = 6378137;
 export declare const DN = 500;
 export declare const DE = 500;
@@ -13,6 +14,9 @@ export declare const MARKER_COLOR_DEFAULT = "#1E96DC";
 export declare const LABEL_BK_COLOR_DEFAULT = "#1E96DC";
 export declare const LABEL_COLOR_DEFAULT = "#FFFFFF";
 export declare const GPS_TOOLS_POPUP_ID = "gpsTools";
+export declare const LAT_LON_FIXED_DIGITS = 8;
+export declare const MAP_SOURCES_TOOL_POPUP_DEFAULT_POSITION: RNDDefaultPosition;
+export declare const MAP_LAYERS_TOOL_POPUP_DEFAULT_POSITION: RNDDefaultPosition;
 export declare const GPS_TOOLS_POPUP_DEFAULT_POSITION: {
     vertical: {
         top: number;
@@ -21,9 +25,10 @@ export declare const GPS_TOOLS_POPUP_DEFAULT_POSITION: {
     horizontal: {
         right: number;
         width: number;
+        magnetize: boolean;
     };
 };
-export declare const MESURE_POPUP_DEFAULT_POSITION: {
+export declare const MESURE_TOOL_POPUP_DEFAULT_POSITION: {
     vertical: {
         top: number;
         height: number;
@@ -31,6 +36,7 @@ export declare const MESURE_POPUP_DEFAULT_POSITION: {
     horizontal: {
         right: number;
         width: number;
+        magnetize: boolean;
     };
 };
 export declare const SVG_ICON_DEFAULT = "<svg viewBox=\"0 0 640 640\" height=\"32\" width=\"32\" xmlns=\"http://www.w3.org/2000/svg\">\n<g>\n    <circle\n        cx=\"320\"\n        cy=\"320\"\n        r=\"280\"\n        fill=\"#1E96DC\"\n    />\n    <text\n        x=\"320\"\n        y=\"320\"\n        font-size=\"320\"\n        font-family=\"sans-serif\"\n        fill=\"#FFFFFF\"\n        text-anchor=\"middle\"\n        alignment-baseline=\"central\"\n        dominant-baseline=\"central\"\n    >P</text>\n</g>\n</svg>";

package/components/maps/components/GpsMap/constants.js

@@ -1,4 +1,4 @@
-const COMPONET_KEY_COMPONENT = "M4LMap";
+const MAP_COMPONET_KEY_COMPONENT = "M4LMap";
 const MAP_ZINDEX_DEFAULT = 0;
 const MAP_ZINDEX_OVER_MAP = 1100;
 const TIME_DOUBLE_CLICK = 250;
@@ -6,13 +6,22 @@ const MARKER_COLOR_DEFAULT = "#1E96DC";
 const LABEL_BK_COLOR_DEFAULT = "#1E96DC";
 const LABEL_COLOR_DEFAULT = "#FFFFFF";
 const GPS_TOOLS_POPUP_ID = "gpsTools";
+const LAT_LON_FIXED_DIGITS = 8;
+const MAP_SOURCES_TOOL_POPUP_DEFAULT_POSITION = {
+  vertical: { top: 16, height: 430 },
+  horizontal: { right: -55, width: 280, magnetize: true }
+};
+const MAP_LAYERS_TOOL_POPUP_DEFAULT_POSITION = {
+  vertical: { top: 16, height: 160 },
+  horizontal: { right: -55, width: 280, magnetize: true }
+};
 const GPS_TOOLS_POPUP_DEFAULT_POSITION = {
-  vertical: { top: 50, bottom: 50 },
-  horizontal: { right: 50, width: 380 }
+  vertical: { top: 16, bottom: 50 },
+  horizontal: { right: -55, width: 280, magnetize: true }
 };
-const MESURE_POPUP_DEFAULT_POSITION = {
-  vertical: { top: 50, height: 250 },
-  horizontal: { right: 50, width: 300 }
+const MESURE_TOOL_POPUP_DEFAULT_POSITION = {
+  vertical: { top: 16, height: 215 },
+  horizontal: { right: -55, width: 280, magnetize: true }
 };
 const SVG_ICON_DEFAULT = `<svg viewBox="0 0 640 640" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
 <g>
@@ -35,15 +44,18 @@ const SVG_ICON_DEFAULT = `<svg viewBox="0 0 640 640" height="32" width="32" xmln
 </g>
 </svg>`;
 export {
-  COMPONET_KEY_COMPONENT as C,
   GPS_TOOLS_POPUP_DEFAULT_POSITION as G,
   LABEL_BK_COLOR_DEFAULT as L,
-  MARKER_COLOR_DEFAULT as M,
+  MAP_COMPONET_KEY_COMPONENT as M,
   SVG_ICON_DEFAULT as S,
   TIME_DOUBLE_CLICK as T,
-  LABEL_COLOR_DEFAULT as a,
-  MAP_ZINDEX_OVER_MAP as b,
-  GPS_TOOLS_POPUP_ID as c,
-  MESURE_POPUP_DEFAULT_POSITION as d,
-  MAP_ZINDEX_DEFAULT as e
+  MARKER_COLOR_DEFAULT as a,
+  LABEL_COLOR_DEFAULT as b,
+  MAP_ZINDEX_OVER_MAP as c,
+  MAP_SOURCES_TOOL_POPUP_DEFAULT_POSITION as d,
+  MAP_LAYERS_TOOL_POPUP_DEFAULT_POSITION as e,
+  MESURE_TOOL_POPUP_DEFAULT_POSITION as f,
+  MAP_ZINDEX_DEFAULT as g,
+  GPS_TOOLS_POPUP_ID as h,
+  LAT_LON_FIXED_DIGITS as i
 };

package/components/maps/components/GpsMap/contexts/MapContext/MapContext.js

@@ -1,24 +1,19 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useRef, useEffect } from "react";
-import { useStore } from "zustand";
-import { shallow } from "zustand/shallow";
-import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
-import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { createContext, useRef } from "react";
+import { useModuleDictionary } from "@m4l/core";
 import { c as createMapStore } from "./store.js";
 const MapContext = createContext(null);
 function MapProvider(props) {
   const {
     children,
     initialLayers,
+    initialMapData,
     googleMapsApiKey: apiKey,
     googleMapVersion = "weekly",
     storeId,
     storeDevtoolsEnabled = false
   } = props;
   const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const isFirstRender = useFirstRender([getLabel]);
   const mapStoreRef = useRef();
   if (!mapStoreRef.current) {
     mapStoreRef.current = createMapStore({
@@ -26,31 +21,14 @@ function MapProvider(props) {
       getLabel,
       ownerState: {
         status: "init",
-        isMobile: !isDesktop,
-        isSkeleton,
         focus: false
       },
+      hasMapData: initialMapData || {},
       googleMapsApiKey: apiKey,
       googleMapVersion
     }, storeDevtoolsEnabled);
     mapStoreRef.current?.getState().mapActions.init(initialLayers || []);
   }
-  const { setHandlerGetLabel, setExternalState } = useStore(
-    mapStoreRef.current,
-    (state) => state.mapActions,
-    shallow
-  );
-  useEffect(() => {
-    if (!isFirstRender) {
-      setHandlerGetLabel(getLabel);
-    }
-  }, [getLabel]);
-  useEffect(() => {
-    if (isFirstRender) {
-      return;
-    }
-    setExternalState({ isMobile: !isDesktop, isSkeleton });
-  }, [isDesktop, isSkeleton]);
   return /* @__PURE__ */ jsx(MapContext.Provider, { value: mapStoreRef.current, children });
 }
 export {

package/components/maps/components/GpsMap/contexts/MapContext/index.d.ts

@@ -1,2 +1,2 @@
 export { MapProvider, MapContext } from './MapContext';
-export type { RendePropFeatureArgs, ComponentRenderPropFeature, FeatureId, FeatureCollection, Feature, Geometry, Point as GeometryPoint, GeoJsonProperties, } from './types';
+export type { RendePropFeatureArgs, ComponentRenderPropFeature, FeatureId, FeatureCollection, Feature, Geometry, Point as GeometryPoint, GeoJsonProperties, FeatureLayerData, } from './types';

package/components/maps/components/GpsMap/contexts/MapContext/store.js

@@ -1,12 +1,11 @@
 import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { u as useMapUtilityClasses } from "../../classes/index.js";
 import cloneDeep from "lodash-es/cloneDeep";
 import merge from "lodash-es/merge";
-import { T as TILE_LAYER_OSM } from "../../subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/osm.js";
-import { T as TILE_LAYER_GOOGLE_HYBRID, a as TILE_LAYER_GOOGLE_SATELLITE, b as TILE_LAYER_GOOGLE } from "../../subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/google.js";
-import { T as TILE_LAYER_BING } from "../../subcomponents/Controls/subcomponents/TopLeftTools/subcomponents/PopoverToolButton/subcomponentes/MapSourcesTool/sourceTypes/bing.js";
+import { T as TILE_LAYER_OTHERS } from "../../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/others.js";
+import { T as TILE_SORCE_GOOGLE } from "../../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/google.js";
+import { T as TILE_LAYER_BING } from "../../subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/sourceTypes/bing.js";
 const createDevtools = (immerMiddlewere, config) => {
   const { enabled = false } = config;
   if (enabled && process.env.NODE_ENV === "development") {
@@ -16,17 +15,16 @@ const createDevtools = (immerMiddlewere, config) => {
 };
 const createMapStore = (initProps, storeDevtoolsEnabled = false) => {
   const startProps = {
-    classes: useMapUtilityClasses(initProps.ownerState),
-    visibleCheckedLayers: /* @__PURE__ */ new Set(),
-    autoFocusCheckedLayers: /* @__PURE__ */ new Set(),
-    clusterCheckedLayers: /* @__PURE__ */ new Set(),
-    currentMapSourceId: "",
-    hashMapSources: {},
-    mapSourcesIds: [],
+    currentMapSourceLayer: {
+      mapSourceId: "google",
+      mapSourceLayerId: "streets"
+    },
+    mapSources: [TILE_SORCE_GOOGLE, TILE_LAYER_BING, TILE_LAYER_OTHERS],
     layersIds: [],
     hashLayers: {},
     ...initProps
   };
+  let mapRef = null;
   return createStore(
     createDevtools(
       immer((set, get) => ({
@@ -37,36 +35,24 @@ const createMapStore = (initProps, storeDevtoolsEnabled = false) => {
            */
           init: (layersStore) => {
             set((state) => {
-              state.hashMapSources = {
-                osm_roadmap: TILE_LAYER_OSM,
-                google_rodmap: TILE_LAYER_GOOGLE,
-                google_satellite: TILE_LAYER_GOOGLE_SATELLITE,
-                google_hybrid: TILE_LAYER_GOOGLE_HYBRID,
-                bing_rodmap: TILE_LAYER_BING
-              };
-              state.mapSourcesIds = [
-                "osm_roadmap",
-                "google_rodmap",
-                "google_satellite",
-                "google_hybrid",
-                "bing_rodmap"
-              ];
-              state.currentMapSourceId = "osm_roadmap";
               for (let index = 0; index < layersStore.length; index++) {
                 state.hashLayers[layersStore[index].layerId] = cloneDeep(layersStore[index]);
                 state.layersIds.push(layersStore[index].layerId);
-                if (layersStore[index].visible !== false) {
-                  state.visibleCheckedLayers.add(layersStore[index].layerId);
-                }
-                if (state.hashLayers[layersStore[index].layerId].autoFocus !== false) {
-                  state.autoFocusCheckedLayers.add(layersStore[index].layerId);
-                }
-                if (state.hashLayers[layersStore[index].layerId].cluster !== false) {
-                  state.clusterCheckedLayers.add(layersStore[index].layerId);
-                }
               }
             });
           },
+          /**
+           * Actualiza el ref del mapa
+           */
+          setMapRef: (map) => {
+            mapRef = map;
+          },
+          /**
+           * Retorna el ref del mapa
+           */
+          getMap: () => {
+            return mapRef;
+          },
           /**
            * TODO: Documentar
            */
@@ -75,6 +61,14 @@ const createMapStore = (initProps, storeDevtoolsEnabled = false) => {
               state.ownerState.status = status;
             });
           },
+          /**
+           * Actualiza la información transversal a todas las capas.
+           */
+          setMapData: (data) => {
+            set((state) => {
+              state.hasMapData = { ...state.hasMapData, ...data };
+            });
+          },
           // isEqualsMapProperties: (_newMapProperties: MapProperties) => {
           //     // if (get().mapProperties === undefined) {
           //     //     return false;
@@ -156,14 +150,14 @@ const createMapStore = (initProps, storeDevtoolsEnabled = false) => {
                 if (feature) {
                   feature.geometry = cloneDeep(geometry);
                   feature.properties = merge(feature.properties, properties);
-                  feature.featureLabel = featureLabel;
+                  feature.label = featureLabel;
                 } else {
                   feature = {
                     type: "Feature",
                     geometry,
                     id: featureId,
                     properties,
-                    featureLabel
+                    label: featureLabel
                   };
                   layer.features.push(feature);
                 }
@@ -216,15 +210,12 @@ const createMapStore = (initProps, storeDevtoolsEnabled = false) => {
               state.layersIds.push(layer.layerId);
               if (layer.visible !== false) {
                 state.hashLayers[layer.layerId].visible = true;
-                state.visibleCheckedLayers.add(layer.layerId);
               }
               if (layer.autoFocus !== false) {
                 state.hashLayers[layer.layerId].autoFocus = true;
-                state.autoFocusCheckedLayers.add(layer.layerId);
               }
               if (layer.clusterAble && layer.cluster !== false) {
                 state.hashLayers[layer.layerId].cluster = true;
-                state.clusterCheckedLayers.add(layer.layerId);
               }
             });
           },
@@ -239,7 +230,6 @@ const createMapStore = (initProps, storeDevtoolsEnabled = false) => {
                   const feature = layer.features.find((f) => f.id === featureId);
                   if (feature) {
                     feature.layerData = merge(feature.layerData || {}, layerData);
-                    feature.juan = "hola juan";
                   }
                 } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
                   const feature = state.hashLayers[layerId].geoJsonObject?.object;
@@ -258,10 +248,6 @@ const createMapStore = (initProps, storeDevtoolsEnabled = false) => {
               return;
             }
             set((state) => {
-              if (!state.hashLayers[layerId].visible) {
-                state.visibleCheckedLayers.delete(layerId);
-                state.autoFocusCheckedLayers.delete(layerId);
-              }
               state.layersIds.splice(state.layersIds.indexOf(layerId), 1);
               delete state.hashLayers[layerId];
             });
@@ -314,55 +300,44 @@ const createMapStore = (initProps, storeDevtoolsEnabled = false) => {
           /**
            * TODO: Documentar
            */
-          setCheckedLayers: (checkedNameSet, newCheckedSet) => {
+          setCheckedLayers: (layerId, checkedNameProp, newValue) => {
             set((state) => {
-              state[`${checkedNameSet}CheckedLayers`] = new Set(newCheckedSet);
-              for (const layerId in state.hashLayers) {
-                state.hashLayers[layerId][checkedNameSet] = newCheckedSet.has(layerId);
+              if (state.hashLayers[layerId]) {
+                state.hashLayers[layerId][checkedNameProp] = newValue;
               }
             });
           },
           /**
-           * TODO: Documentar
+           * Actualizar la capa actual del mapa
            */
-          setCurrentMapSource: (newId) => {
+          setCurrentMapSourceLayer: (mapSourceId, mapSourceLayerId) => {
             set((state) => {
-              if (newId in state.hashMapSources) {
-                state.currentMapSourceId = newId;
+              const source = state.mapSources.find((source2) => source2.id === mapSourceId);
+              if (source && source.layers.find((layer) => layer.id === mapSourceLayerId)) {
+                state.currentMapSourceLayer = {
+                  mapSourceId,
+                  mapSourceLayerId
+                };
               }
             });
           },
           /**
            * TODO: Documentar
            */
-          setMapSourceRoadOptions: (partialRoadOptions) => {
+          setMapSourceLayerRoadOptions: (mapSourceId, mapSourceLayerId, partialRoadOptions) => {
             set((state) => {
-              if (!state.hashMapSources[state.currentMapSourceId]) {
+              const source = state.mapSources.find((source2) => source2.id === mapSourceId);
+              const layer = source?.layers.find((layer2) => layer2.id === mapSourceLayerId);
+              if (!layer) {
                 return;
               }
-              state.hashMapSources[state.currentMapSourceId].roadSelectedOptions = {
-                bicyclingLayer: state.hashMapSources[state.currentMapSourceId]?.roadSelectedOptions?.bicyclingLayer || false,
-                trafficLayer: state.hashMapSources[state.currentMapSourceId]?.roadSelectedOptions?.trafficLayer || false,
-                transitLayer: state.hashMapSources[state.currentMapSourceId]?.roadSelectedOptions?.transitLayer || false,
+              layer.roadSelectedOptions = {
+                bicyclingLayer: layer.roadSelectedOptions?.bicyclingLayer || false,
+                trafficLayer: layer.roadSelectedOptions?.trafficLayer || false,
+                transitLayer: layer.roadSelectedOptions?.transitLayer || false,
                 ...partialRoadOptions
               };
             });
-          },
-          /**
-           * TODO: Documentar
-           */
-          setHandlerGetLabel: (newHandler) => {
-            set((state) => {
-              state.getLabel = newHandler;
-            });
-          },
-          /**
-           * TODO: Documentar
-           */
-          setExternalState: (newExternalState) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, ...newExternalState };
-            });
           }
         }
       })),