@m4l/components 0.2.4 → 0.2.6

package/components/maps/components/Map/index.665e5c5d.js

@@ -1,474 +0,0 @@
-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.21a1f8e5.js";
-import { T as ToggleIconButton } from "../../../mui_extended/ToggleIconButton/index.00f13c40.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.de903261.js";
-import { cloneDeep } from "lodash";
-import { G as GpsToolsContext } from "../GpsTools/index.889b0c39.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/Map/index.d.ts

@@ -1,5 +0,0 @@
-export { Map } from './Map';
-export type { MapProps } from './types';
-export { MapProvider, MapContext } from './contexts/MapContext/MapContext';
-export { useMapStore } from './hooks/useMapStore';
-export type { RendePropFeatureArgs, ComponentRenderPropFeature, FeatureId, FeatureCollection, Feature, Geometry } from './contexts/MapContext';

package/components/maps/components/Map/subcomponents/LayersContainer/index.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const LayersContainer: React.FC;

package/components/maps/components/Map/subcomponents/LeafletLayer/index.d.ts

@@ -1,3 +0,0 @@
-import { LayerProps } from './types';
-import React from 'react';
-export declare const LeafletLayer: React.FC<LayerProps>;

package/components/maps/components/Map/subcomponents/LeafletLayer/types.d.ts

@@ -1,2 +0,0 @@
-import type { LayerStore } from '../../contexts/MapContext/types';
-export declare type LayerProps = Pick<LayerStore, 'layerId'>;

package/components/maps/components/Map/subcomponents/MainTools/index.d.ts

@@ -1,2 +0,0 @@
-import { MainToolsProps } from './types';
-export declare function MainTools(props: MainToolsProps): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/Map/subcomponents/MainTools/types.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from "react";
-export interface MainToolsProps {
-    aditionalMainTools?: ReactNode;
-    gpsTools?: ReactNode;
-}

package/components/maps/components/Map/types.d.ts

@@ -1,28 +0,0 @@
-import { ReactNode } from "react";
-export declare type Localization = {
-    /**
-     *  "lat" Posición en del eje "Y" en grados.
-     */
-    lat: number;
-    /**
-     *  "lng" Posición en del eje "X" en grados.
-     */
-    lng: number;
-};
-export declare type Point = {
-    /**
-     *  "x" Posición en del eje "X" en pixeles.
-     */
-    x: number;
-    /**
-     *  "y" Posición en del eje "Y" en pixeles.
-     */
-    y: number;
-};
-export interface MapProps {
-    children: ReactNode;
-    startLat?: number;
-    startLon?: number;
-    gpsTools?: ReactNode;
-    aditionalMainTools?: ReactNode;
-}

package/components/maps/index.d.ts

@@ -1,3 +0,0 @@
-export { Map, MapProvider, MapContext, useMapStore } from './components/Map';
-export type { MapProps, RendePropFeatureArgs, ComponentRenderPropFeature, FeatureId, FeatureCollection, Feature, Geometry } from './components/Map';
-export { GpsTools, useMapToolsStore } from './components/GpsTools';

package/hooks/useFormReadyForUpdate/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * hook encargado de activar la bandera de readyToUpdate cuando el formulario este completamente cargado
- * @param statusLoad
- * @returns
- */
-export declare function useFormReadyForUpdate(): boolean;

package/hooks/useFormReadyForUpdate/index.f60f500e.js

@@ -1,20 +0,0 @@
-import { useState, useEffect } from "react";
-import { useFormContext, useWatch } from "react-hook-form";
-function useFormReadyForUpdate() {
-  const [readyToUpdate, setReadyToUpdate] = useState(false);
-  const { control } = useFormContext();
-  const statusLoad = useWatch({
-    control,
-    name: "statusLoad"
-  });
-  useEffect(() => {
-    if (statusLoad !== "ready") {
-      return;
-    }
-    setReadyToUpdate(true);
-  }, [statusLoad]);
-  return readyToUpdate;
-}
-export {
-  useFormReadyForUpdate as u
-};