@m4l/components 0.2.1 → 0.2.2

package/components/maps/Map.9fc17398.js

@@ -0,0 +1,474 @@
+import "leaflet/dist/leaflet.css";
+import { MapContainer, LayerGroup, useMap, TileLayer } from "react-leaflet";
+import { styled } from "@mui/material/styles";
+import { shallow } from "zustand/shallow";
+import React__default, { useEffect, useState, useCallback, createContext, useRef, useContext } from "react";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { createStore, useStore } from "zustand";
+import L__default from "leaflet";
+import { T as ToggleButton } from "../mui_extended/ToggleButton/index.4b7b7df0.js";
+import { T as ToggleIconButton } from "../mui_extended/ToggleIconButton/index.e430bed4.js";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { generateUtilityClasses } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../utils/index.b22c4c1a.js";
+import { cloneDeep } from "lodash";
+import { G as GpsToolsContext } from "./GpsTools.34a27c0a.js";
+const COMPONENT_CLASS_NAME = "M4LMap";
+const MAP_ZINDEX_DEFAULT = 0;
+const MAP_ZINDEX_OVER_MAP = 1100;
+const mapClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "root",
+  "mapContainer",
+  "svgLayersContainer",
+  "svgLayer",
+  "svgLayerMultiPoints",
+  "layerMarker",
+  "mainToolsRoot",
+  "measureMarkerRoot",
+  "measureMarkerContainer",
+  "measureMarkerContainerRhomb",
+  "measureMarkerContainerSlot",
+  "measureMarkerContainerSlotNumber",
+  "measureLabelMarkerRoot",
+  "measureLabelMarkerContainer",
+  "measureLabelMarkerDistance",
+  "measureLabelMarkerRemove"
+]);
+const useMapUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root"],
+    mapContainer: ["mapContainer"],
+    svgLayersContainer: ["svgLayersContainer"],
+    svgLayer: ["svgLayer"],
+    svgLayerMultiPoints: ["svgLayerMultiPoints"],
+    layerMarker: ["layerMarker"],
+    mainToolsRoot: ["mainToolsRoot"],
+    measureMarkerRoot: ["measureMarkerRoot"],
+    measureMarkerContainer: ["measureMarkerContainer"],
+    measureMarkerContainerRhomb: ["measureMarkerContainerRhomb"],
+    measureMarkerContainerSlot: ["measureMarkerContainerSlot"],
+    measureMarkerContainerSlotNumber: ["measureMarkerContainerSlotNumber"],
+    measureLabelMarkerRoot: ["measureLabelMarkerRoot"],
+    measureLabelMarkerContainer: ["measureLabelMarkerContainer"],
+    measureLabelMarkerDistance: ["measureLabelMarkerDistance"],
+    measureLabelMarkerRemove: ["measureLabelMarkerRemove"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(COMPONENT_CLASS_NAME), {});
+};
+const MapRootContainer = styled(MapContainer)`
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+    overflow: auto;
+    position: relative;
+
+    .leaflet-control-scale-line{
+        color: red; //Ejemplo de como estilar el control de scala
+    }
+    .${mapClasses.mainToolsRoot} {
+        display: flex;
+        top: 20px;
+        left: 80px;
+        position: absolute;
+        background-color: gray;
+        z-index: ${MAP_ZINDEX_OVER_MAP};
+    }
+    .${mapClasses.svgLayersContainer} {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+    }
+
+    .${mapClasses.svgLayer} {
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        user-select: none;
+        pointer-events: none;
+        position: absolute !important;
+    }
+
+    .${mapClasses.layerMarker} {
+        z-index: 2;
+    }
+
+
+    
+    .${mapClasses.measureMarkerRoot} {
+        --color: red;
+    }
+
+    .${mapClasses.measureMarkerContainer} {
+        position: relative;
+        cursor: pointer;
+    }
+
+    .${mapClasses.measureMarkerContainerRhomb} {
+        position: absolute;
+        filter: drop-shadow(0px 0px 3px rgba(0,0,0,.4));
+        width: 31px;
+        height: 31px;
+        border-radius: 50% 50% 50% 0;
+        border: 4px solid var(--color);
+        background-color: var(--color);
+        transform: rotate(-45deg);
+
+    }
+    .${mapClasses.measureMarkerContainerSlot} {
+        position: absolute;
+        background: #fff;
+        border-radius: 50%;
+        overflow: hidden;
+        top: 3px;
+        left: 3px;
+        width: 25px;
+        height: 24px;
+
+    },
+
+    .${mapClasses.measureMarkerContainerSlotNumber} {
+        font-size: 14px;
+        font-weight: 600;
+        text-align: center;
+        margin-top: 1px;
+        color: black;
+    }
+
+    .${mapClasses.measureLabelMarkerContainer} {
+        background-color:white;
+        border:1px solid gray;
+        color:#fff;
+        width:80px;
+        margin-left:15px;
+        margin-top:15px;
+    }
+    .${mapClasses.measureLabelMarkerDistance} {
+        color:gray;
+    }
+    .${mapClasses.measureLabelMarkerRemove} {
+        color:blue;
+    }
+
+`;
+const RenderByEachFeatureComponent = ({
+  renderFeature,
+  ...props
+}) => {
+  const feature = renderFeature(props);
+  return feature ? /* @__PURE__ */ jsx(Fragment, {
+    children: feature
+  }) : null;
+};
+const MemonizedRenderByEachFeatureComponent = React__default.memo(RenderByEachFeatureComponent);
+const LeafletLayer = (props) => {
+  const {
+    layerId
+  } = props;
+  const featureIdOrCollection = useMapStore((state) => {
+    const geoJsonObject = state.hashLayers[layerId]?.geoJsonObject;
+    if (geoJsonObject && geoJsonObject.object.type === "Feature") {
+      return geoJsonObject.object.id;
+    } else if (geoJsonObject && geoJsonObject.object.type === "FeatureCollection") {
+      return geoJsonObject && geoJsonObject.object.features.map((feature) => feature.id);
+    }
+  }, shallow);
+  const renderFeature = useMapStore((state) => state.hashLayers[layerId]?.renderFeature, shallow);
+  if (!featureIdOrCollection || !renderFeature) {
+    return null;
+  }
+  if (!Array.isArray(featureIdOrCollection)) {
+    return /* @__PURE__ */ jsx(RenderByEachFeatureComponent, {
+      renderFeature,
+      id: featureIdOrCollection,
+      layerId
+    });
+  } else {
+    return /* @__PURE__ */ jsx(LayerGroup, {
+      children: featureIdOrCollection.map((featureId) => {
+        return /* @__PURE__ */ jsx(MemonizedRenderByEachFeatureComponent, {
+          renderFeature,
+          id: featureId,
+          layerId
+        }, `k_${featureId}`);
+      })
+    });
+  }
+};
+const LayersContainer = () => {
+  const layersId = useMapStore((state) => state.layersIds, shallow);
+  const isSkeleton = useMapStore((state) => state.ownerState.isSkeleton, shallow);
+  const map = useMap();
+  useEffect(() => {
+    console.log("LayersContainer useEffect", map);
+    if (!map) {
+      return;
+    }
+    L__default.control.scale().addTo(map);
+  }, [map]);
+  if (isSkeleton) {
+    return null;
+  }
+  console.log("LayersContainer Render", layersId);
+  return /* @__PURE__ */ jsx(React__default.Fragment, {
+    children: layersId.map((l) => /* @__PURE__ */ jsx(LeafletLayer, {
+      layerId: l
+    }, l))
+  });
+};
+function MainTools(props) {
+  const {
+    gpsTools,
+    aditionalMainTools
+  } = props;
+  const [isPressed, setIsPressed] = useState(true);
+  const onClick = useCallback((e, isPressed2) => {
+    setIsPressed(!!isPressed2);
+    e.stopPropagation();
+    console.log("ButtonisPressed", isPressed2);
+  }, []);
+  console.log("Render MainTools", gpsTools);
+  return /* @__PURE__ */ jsxs("div", {
+    className: mapClasses.mainToolsRoot,
+    children: [/* @__PURE__ */ jsx(ToggleButton, {
+      defaultIsPressed: true,
+      onClick,
+      children: "Hola"
+    }), /* @__PURE__ */ jsx(ToggleIconButton, {
+      src: "",
+      onClick
+    }), isPressed && gpsTools, aditionalMainTools]
+  });
+}
+function Map(props) {
+  const {
+    children,
+    gpsTools,
+    aditionalMainTools
+  } = props;
+  return /* @__PURE__ */ jsxs(MapRootContainer, {
+    className: mapClasses.root,
+    center: [6.215749485905093, -75.58622905191254],
+    zoom: 16,
+    maxZoom: 22,
+    preferCanvas: true,
+    children: [/* @__PURE__ */ jsx(TileLayer, {
+      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      attribution: '\xA9 <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+    }), /* @__PURE__ */ jsx(LayersContainer, {}), children, /* @__PURE__ */ jsx(MainTools, {
+      aditionalMainTools,
+      gpsTools
+    })]
+  });
+}
+const updateOwnerStateClasses = (state) => {
+  state.classes = useMapUtilityClasses(state.ownerState);
+};
+const createMapStore = (initProps) => {
+  const startProps = {
+    classes: useMapUtilityClasses(initProps.ownerState),
+    layersIds: [],
+    hashLayers: {},
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        mapActions: {
+          init: (layersStore) => {
+            set((state) => {
+              for (let index = 0; index < layersStore.length; index++) {
+                state.hashLayers[layersStore[index].layerId] = cloneDeep(
+                  layersStore[index]
+                );
+                state.layersIds.push(layersStore[index].layerId);
+              }
+            });
+          },
+          setMapState: (status) => {
+            set((state) => {
+              state.ownerState.status = status;
+            });
+          },
+          setDataLayer: (layerId, geoJson) => {
+            if (!get().hashLayers[layerId]) {
+              throw new Error(`Layer with id ${layerId} not found`);
+            }
+            set((state) => {
+              const layer = state.hashLayers[layerId];
+              layer.geoJsonObject = geoJson;
+            });
+          },
+          getFeatureIds: (layerId) => {
+            if (!get().hashLayers[layerId]) {
+              throw new Error(`Layer with id ${layerId} not found`);
+            }
+            const geoJsonObject = get().hashLayers[layerId]?.geoJsonObject;
+            if (geoJsonObject && geoJsonObject.object.type === "Feature") {
+              return [geoJsonObject.object.id];
+            } else if (geoJsonObject && geoJsonObject.object.type === "FeatureCollection") {
+              return geoJsonObject.object.features.map((feature) => feature.id);
+            }
+            return [];
+          },
+          setFeatureData: (layerId, featureId, geometry, properties) => {
+            if (!get().hashLayers[layerId]) {
+              throw new Error(`Layer with id ${layerId} not found`);
+            }
+            set((state) => {
+              if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
+                const layer = state.hashLayers[layerId].geoJsonObject?.object;
+                let feature = layer.features.find((f) => f.id === featureId);
+                if (feature) {
+                  feature.geometry = cloneDeep(geometry);
+                  feature.properties = cloneDeep(properties);
+                } else {
+                  feature = {
+                    type: "Feature",
+                    geometry,
+                    id: featureId,
+                    properties
+                  };
+                  layer.features.push(feature);
+                }
+              } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
+                const layer = state.hashLayers[layerId].geoJsonObject?.object;
+                layer.id = featureId;
+                layer.geometry = cloneDeep(geometry);
+                layer.properties = cloneDeep(properties);
+              }
+            });
+          },
+          removeFeature: (layerId, featureId) => {
+            if (!get().hashLayers[layerId]) {
+              throw new Error(`Layer with id ${layerId} not found`);
+            }
+            set((state) => {
+              if (state.hashLayers[layerId].geoJsonObject?.object.type === "FeatureCollection") {
+                const layer = state.hashLayers[layerId].geoJsonObject?.object;
+                const index = layer.features.findIndex((f) => f.id === featureId);
+                if (index !== -1) {
+                  layer.features.splice(index, 1);
+                }
+              } else if (state.hashLayers[layerId].geoJsonObject?.object.type === "Feature") {
+                const layer = state.hashLayers[layerId].geoJsonObject?.object;
+                layer.geometry = { type: "Point", coordinates: [0, 0] };
+                layer.properties = {};
+              }
+            });
+          },
+          setLayerRenderProp: (layerId, renderProp) => {
+            set((state) => {
+              state.hashLayers[layerId].renderFeature = renderProp;
+            });
+          },
+          addLayer: (layer) => {
+            if (get().hashLayers[layer.layerId]) {
+              throw new Error(`Layer with id ${layer.layerId} already exists`);
+            }
+            set((state) => {
+              state.hashLayers[layer.layerId] = layer;
+              state.layersIds.push(layer.layerId);
+            });
+          },
+          removeLayer: (layerId) => {
+            if (!get().hashLayers[layerId]) {
+              return;
+            }
+            set((state) => {
+              state.layersIds.splice(state.layersIds.indexOf(layerId), 1);
+              delete state.hashLayers[layerId];
+            });
+          },
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+              updateOwnerStateClasses(state);
+            });
+          }
+        }
+      })),
+      { name: `Map store` }
+    )
+  );
+};
+const MapContext = createContext(null);
+function MapProvider(props) {
+  const {
+    children,
+    initialLayers
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([getLabel]);
+  const mapStoreRef = useRef();
+  if (!mapStoreRef.current) {
+    mapStoreRef.current = createMapStore({
+      getLabel,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton,
+        focus: false
+      }
+    });
+    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
+  });
+}
+function useMapStore(selector, equalityFn) {
+  const context = useContext(MapContext);
+  if (!context)
+    throw new Error("useMapStore context must be use inside MapContext");
+  return useStore(context, selector, equalityFn);
+}
+function useMapToolsStore(selector, equalityFn) {
+  const context = useContext(GpsToolsContext);
+  if (!context)
+    throw new Error("useMapToolsStore context must be use inside GpsToolsContext");
+  return useStore(context, selector, equalityFn);
+}
+export {
+  MAP_ZINDEX_DEFAULT as M,
+  useMapStore as a,
+  MAP_ZINDEX_OVER_MAP as b,
+  Map as c,
+  MapProvider as d,
+  MapContext as e,
+  mapClasses as m,
+  useMapToolsStore as u
+};

package/components/maps/components/GpsTools/GpsTools.d.ts

@@ -0,0 +1 @@
+export declare function GpsTools(): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/GpsTools/classes/index.d.ts

@@ -0,0 +1,4 @@
+import { MapToolsClasses } from './types';
+export declare const mapToolsClasses: MapToolsClasses;
+export declare const useUtilityClasses: () => Record<"root" | "tabToolsRoot" | "tabContentRoot" | "toolGeofences" | "toolGeofencesList" | "toolGeofencesAddEdit" | "toolGeofencesAddEditGeneral" | "toolGeofencesAddEditStyle" | "toolMeasure" | "toolMeasureFormValue" | "toolMeasureFormValueDistance" | "toolMeasureFormValueSymbol" | "toolMeausureLabel" | "toolMeausureLabelDistance" | "toolMeausureLabelSymbol", string>;
+export declare type Classes = ReturnType<typeof useUtilityClasses>;

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

@@ -0,0 +1,20 @@
+export interface MapToolsClasses {
+    root: string;
+    tabToolsRoot: string;
+    tabContentRoot: string;
+    toolGeofences: string;
+    toolGeofencesList: string;
+    toolGeofencesAddEdit: string;
+    toolGeofencesAddEditGeneral: string;
+    toolGeofencesAddEditStyle: string;
+    toolMeasure: string;
+    toolMeasureFormValue: string;
+    toolMeasureFormValueDistance: string;
+    toolMeasureFormValueSymbol: string;
+    toolMeausureLabel: string;
+    toolMeausureLabelDistance: string;
+    toolMeausureLabelSymbol: string;
+    visible: string;
+    hidden: string;
+}
+export declare type MapToolsClassesKey = keyof MapToolsClasses;

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

@@ -0,0 +1,8 @@
+import { StyleOpacity, StyleDashArray, StyleWheight } from "./types";
+export declare const COMPONENT_TEST_ID = "M4LGpsTools";
+export declare const COMPONENT_CLASS_NAME = "M4LGpsTools";
+export declare const COOKIE_MAP_GEO_FILTER = "filter_map_geo";
+export declare const COMPONENT_MAP_TOOLS_ID = "gps_tools";
+export declare const STYLE_OPACITIES: StyleOpacity[];
+export declare const STYLE_WHEIGHTS: StyleWheight[];
+export declare const STYLE_PATTERNS: StyleDashArray[];

package/components/maps/components/GpsTools/contexts/GpsToolsContext/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { MapToolsProviderProps } from './types';
+declare const GpsToolsContext: import("react").Context<(Omit<Omit<import("zustand").StoreApi<import("./types").MapToolsStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: import("./types").MapToolsStateWithActions | Partial<import("./types").MapToolsStateWithActions> | ((state: import("./types").MapToolsStateWithActions) => import("./types").MapToolsStateWithActions | Partial<import("./types").MapToolsStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: import("./types").MapToolsStateWithActions | Partial<import("./types").MapToolsStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./types").MapToolsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
+/**
+ * @description Provedor del contexto de los mapas
+ * Expone el store (MapStore) encargado de gestionar la creación, modificación y borrado de capas.
+ * @param props
+ * @returns
+ */
+declare function GpsToolsProvider(props: MapToolsProviderProps): import("react/jsx-runtime").JSX.Element;
+export { GpsToolsProvider, GpsToolsContext };

package/components/maps/components/GpsTools/contexts/GpsToolsContext/store.d.ts

@@ -0,0 +1,16 @@
+import type { MapToolsStateWithActions, InitialMapToolsStoreProps } from './types';
+/**
+ * @description Crea el Store, por defecto inicia en estado 'init'
+ * @param initProps propiedades iniciales del store
+ * @returns
+ */
+export declare const createMapToolsStore: (initProps: InitialMapToolsStoreProps) => Omit<Omit<import("zustand").StoreApi<MapToolsStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: MapToolsStateWithActions | Partial<MapToolsStateWithActions> | ((state: MapToolsStateWithActions) => MapToolsStateWithActions | Partial<MapToolsStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: MapToolsStateWithActions | Partial<MapToolsStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<MapToolsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+};
+export declare type MapStore = ReturnType<typeof createMapToolsStore>;