@geops/rvf-mobility-web-component 0.1.127-beta.0 → 0.1.127-beta.2

package/src/LayerTreeMenu/LayerTreeMenu.tsx

@@ -1,147 +0,0 @@
-import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
-import { getUid } from "ol";
-import { unByKey } from "ol/Observable";
-import { memo, useEffect, useMemo, useState } from "preact/compat";
-
-import LayerTree from "../LayerTree";
-import { SelectionType } from "../LayerTree/TreeItem";
-import {
-  LAYER_TREE_HIDE_PROP,
-  LAYER_TREE_ORDER,
-  LAYER_TREE_TITLE_FUNC_PROP,
-} from "../utils/constants";
-import useLayersConfig from "../utils/hooks/useLayersConfig";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { Group } from "ol/layer";
-import type BaseLayer from "ol/layer/Base";
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-import type { LayerTreeProps } from "../LayerTree/LayerTree";
-import type { LayerConfig } from "../utils/hooks/useLayersConfig";
-
-export interface LayerTreeConfig {
-  childItems: LayerTreeConfig[];
-  id: string;
-  isControlChecked: boolean;
-  layer: BaseLayer;
-  revision: number;
-  selectionType: SelectionType;
-  title: string;
-}
-
-export type LayerTreeMenuProps = {
-  filter?: (layer: BaseLayer) => boolean;
-  order?: string[];
-} & HTMLAttributes<HTMLDivElement> &
-  Partial<LayerTreeProps> &
-  PreactDOMAttributes;
-
-const getConfigForLayer = (
-  layer: BaseLayer,
-  revision: number,
-  layersConfig: Record<string, LayerConfig> = {},
-): LayerTreeConfig => {
-  const defaultTitle = layersConfig[layer.get("name")]?.title || "";
-  const customTitleFunction = layer.get(LAYER_TREE_TITLE_FUNC_PROP);
-  let title = defaultTitle;
-  if (typeof customTitleFunction === "function") {
-    title = customTitleFunction(title);
-  }
-
-  return {
-    childItems:
-      (layer as Group)
-        ?.getLayers?.()
-        .getArray()
-        .map((subLayer) => {
-          return getConfigForLayer(subLayer, revision, layersConfig);
-        }) || [],
-    id: getUid(layer),
-    isControlChecked: layer.getVisible(),
-    layer,
-    revision,
-    selectionType: SelectionType.CHECKBOX,
-    title,
-  };
-};
-
-function LayerTreeMenu({
-  filter,
-  order = LAYER_TREE_ORDER,
-  ...props
-}: LayerTreeMenuProps) {
-  const { map } = useMapContext();
-  const [revision, setRevision] = useState(0);
-  const layersConfig = useLayersConfig();
-
-  const layers: LayerTreeConfig[] = useMemo(() => {
-    const config =
-      map
-        ?.getLayers()
-        .getArray()
-        .filter(
-          filter ??
-            ((layer) => {
-              return (
-                (layer.get(LAYER_TREE_HIDE_PROP) ||
-                  layersConfig[layer.get("name")]?.[LAYER_TREE_HIDE_PROP]) !==
-                true
-              );
-            }),
-        )
-        .sort((a, b) => {
-          if (
-            order &&
-            order.indexOf(a.get("name")) > order.indexOf(b.get("name"))
-          ) {
-            return 1;
-          } else {
-            return -1;
-          }
-        })
-        .map((layer) => {
-          return getConfigForLayer(layer, revision, layersConfig);
-        }) || [];
-    return config;
-  }, [filter, layersConfig, map, order, revision]);
-
-  // Force update of config when a layers`s visibility changes progammatically
-  useEffect(() => {
-    const keys = [];
-    const layerss = getLayersAsFlatArray(map.getLayers().getArray());
-    layerss.forEach((layer) => {
-      const key = layer.on("change:visible", () => {
-        setRevision((prev) => {
-          return prev + 1;
-        });
-      });
-      keys.push(key);
-    });
-    keys.push(
-      map.on("change:layergroup", () => {
-        setRevision((prev) => {
-          return prev + 1;
-        });
-      }),
-      map.getLayers().on("add", () => {
-        setRevision((prev) => {
-          return prev + 1;
-        });
-      }),
-      map.getLayers().on("remove", () => {
-        setRevision((prev) => {
-          return prev + 1;
-        });
-      }),
-    );
-    return () => {
-      // Clean up all listeners
-      unByKey(keys);
-    };
-  }, [map]);
-
-  return <LayerTree layers={layers} {...props} />;
-}
-
-export default memo(LayerTreeMenu);

package/src/LayerTreeMenu/index.tsx

@@ -1 +0,0 @@
-export { default } from "./LayerTreeMenu";

package/src/LayoutState/LayoutState.tsx

@@ -1,380 +0,0 @@
-import { useCallback, useEffect } from "preact/hooks";
-
-import useFit from "../utils/hooks/useFit";
-import useI18n from "../utils/hooks/useI18n";
-import useLnpLineInfo, { useLnpStopInfo } from "../utils/hooks/useLnp";
-import useMapContext from "../utils/hooks/useMapContext";
-import useRealtimeTrainByRouteIdentifier from "../utils/hooks/useRealtimeTrainsByRouteIdentifier";
-
-/**
- * This component is responsible for updating the layout state in the context.
- */
-function LayoutState() {
-  const {
-    details,
-    embed,
-    geolocation,
-    hasDetails,
-    hasLayerTree,
-    hasLnp,
-    hasNotification,
-    hasPrint,
-    hasRealtime,
-    hasShare,
-    isExportMenuOpen,
-    isLayerTreeOpen,
-    isSearchOpen,
-    isShareMenuOpen,
-    layertree,
-    lineid,
-    linesIds,
-    lnp,
-    mapset,
-    notification,
-    notificationid,
-    notificationId,
-    notificationlang,
-    permalink,
-    previewNotifications,
-    print,
-    realtime,
-    search,
-    selectedFeature,
-    setFeaturesInfos,
-    setHasDetails,
-    setHasGeolocation,
-    setHasLayerTree,
-    setHasLnp,
-    setHasMapset,
-    setHasNotification,
-    setHasPermalink,
-    setHasPrint,
-    setHasRealtime,
-    setHasSearch,
-    setHasShare,
-    setHasStations,
-    setHasToolbar,
-    setIsEmbed,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsOverlayOpen,
-    setIsSearchOpen,
-    setIsShareMenuOpen,
-    setLinesIds,
-    setNotificationId,
-    setNotificationSupportedLanguages,
-    setStationId,
-    setTrainId,
-    share,
-    stationId,
-    stationid,
-    tenant,
-    toolbar,
-    trainid,
-    trainId,
-  } = useMapContext();
-
-  const lineInfo = useLnpLineInfo(lineid);
-  const stopInfo = useLnpStopInfo(stationid);
-  const trainInfo = useRealtimeTrainByRouteIdentifier(trainid);
-  const fit = useFit();
-  const { locale } = useI18n();
-
-  // Define fallback languages from the notifications details
-  useEffect(() => {
-    const fallbackLangs =
-      notificationlang
-        ?.split(",")
-        .map((lang) => {
-          return lang.trim();
-        })
-        .filter((lang) => {
-          return lang !== locale();
-        }) || [];
-    setNotificationSupportedLanguages(fallbackLangs);
-  }, [notificationlang, setNotificationSupportedLanguages, locale]);
-
-  useEffect(() => {
-    setHasStations(!!tenant);
-  }, [setHasStations, tenant]);
-
-  useEffect(() => {
-    setHasRealtime(realtime === "true");
-  }, [realtime, setHasRealtime]);
-
-  useEffect(() => {
-    setHasNotification(notification === "true" || !!previewNotifications);
-  }, [notification, previewNotifications, setHasNotification]);
-
-  useEffect(() => {
-    setHasMapset(mapset === "true");
-  }, [mapset, setHasMapset]);
-
-  useEffect(() => {
-    setHasGeolocation(geolocation === "true");
-  }, [geolocation, setHasGeolocation]);
-
-  useEffect(() => {
-    setHasPermalink(permalink === "true");
-  }, [permalink, setHasPermalink]);
-
-  useEffect(() => {
-    setHasSearch(search === "true");
-  }, [search, setHasSearch]);
-
-  useEffect(() => {
-    setIsEmbed(embed === "true");
-  }, [embed, setIsEmbed]);
-
-  useEffect(() => {
-    setHasLnp(lnp === "true");
-  }, [lnp, setHasLnp]);
-
-  useEffect(() => {
-    setHasShare(share === "true");
-  }, [share, setHasShare]);
-
-  useEffect(() => {
-    setHasPrint(print === "true");
-  }, [print, setHasPrint]);
-
-  useEffect(() => {
-    setHasDetails(details === "true");
-  }, [details, setHasDetails]);
-
-  useEffect(() => {
-    setHasToolbar(toolbar === "true");
-  }, [toolbar, setHasToolbar]);
-
-  useEffect(() => {
-    setHasLayerTree(layertree === "true");
-  }, [layertree, setHasLayerTree]);
-
-  useEffect(() => {
-    setLinesIds(lineInfo?.external_id ? [lineInfo.external_id] : null);
-  }, [lineInfo, setLinesIds]);
-
-  // Zoom when linesids attribute changes
-  useEffect(() => {
-    fit.current(lineInfo, true);
-  }, [lineInfo, fit]);
-
-  useEffect(() => {
-    setStationId(stopInfo?.external_id);
-  }, [stopInfo, setStationId]);
-
-  // Center and zoom when stationid attribute changes
-  useEffect(() => {
-    fit.current(stopInfo, true);
-  }, [stopInfo, fit]);
-
-  useEffect(() => {
-    setNotificationId(notificationid);
-  }, [notificationid, setNotificationId]);
-
-  useEffect(() => {
-    setTrainId(trainInfo?.train_id);
-  }, [setTrainId, trainInfo]);
-
-  // Center and zoom when trainid attribute changes
-  useEffect(() => {
-    fit.current(trainInfo, true);
-  }, [trainInfo, fit]);
-
-  // Close all menus
-  const closeMenus = useCallback(() => {
-    setIsLayerTreeOpen(false);
-    setIsExportMenuOpen(false);
-    setIsSearchOpen(false);
-    setIsShareMenuOpen(false);
-  }, [
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsSearchOpen,
-    setIsShareMenuOpen,
-  ]);
-
-  // Close all features details
-  const closeFeatureDetails = useCallback(() => {
-    setStationId(null);
-    setTrainId(null);
-    setNotificationId(null);
-    setLinesIds(null);
-    setFeaturesInfos(null);
-  }, [
-    setStationId,
-    setTrainId,
-    setNotificationId,
-    setLinesIds,
-    setFeaturesInfos,
-  ]);
-
-  useEffect(() => {
-    if (isSearchOpen) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(false);
-      setIsShareMenuOpen(false);
-      setStationId(null);
-
-      closeFeatureDetails();
-    }
-  }, [
-    closeFeatureDetails,
-    isSearchOpen,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsShareMenuOpen,
-    setStationId,
-  ]);
-
-  useEffect(() => {
-    if (isShareMenuOpen) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(false);
-      setIsSearchOpen(false);
-
-      closeFeatureDetails();
-    }
-  }, [
-    isShareMenuOpen,
-    closeFeatureDetails,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsSearchOpen,
-  ]);
-
-  useEffect(() => {
-    if (isLayerTreeOpen) {
-      setIsExportMenuOpen(false);
-      setIsLayerTreeOpen(isLayerTreeOpen);
-      setIsSearchOpen(false);
-      setIsShareMenuOpen(false);
-
-      closeFeatureDetails();
-    }
-  }, [
-    isLayerTreeOpen,
-    closeFeatureDetails,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsSearchOpen,
-    setIsShareMenuOpen,
-  ]);
-
-  useEffect(() => {
-    if (isExportMenuOpen) {
-      setIsLayerTreeOpen(false);
-      setIsExportMenuOpen(isExportMenuOpen);
-      setIsSearchOpen(false);
-      setIsShareMenuOpen(false);
-
-      closeFeatureDetails();
-    }
-  }, [
-    closeFeatureDetails,
-    isExportMenuOpen,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsSearchOpen,
-    setIsShareMenuOpen,
-  ]);
-
-  useEffect(() => {
-    if (selectedFeature) {
-      closeMenus();
-      setTrainId(selectedFeature?.get("train_id") || null);
-      setStationId(selectedFeature?.get("uid") || null);
-      setNotificationId(selectedFeature?.get("situationId") || null);
-    }
-  }, [
-    selectedFeature,
-    closeMenus,
-    setStationId,
-    setTrainId,
-    setNotificationId,
-  ]);
-
-  useEffect(() => {
-    if (stationId) {
-      closeMenus();
-
-      setTrainId(null);
-      setLinesIds(null);
-      setNotificationId(null);
-    }
-  }, [closeMenus, setLinesIds, setNotificationId, setTrainId, stationId]);
-
-  useEffect(() => {
-    if (trainId) {
-      closeMenus();
-
-      // Close overlay details
-      setStationId(null);
-      setLinesIds(null);
-      setNotificationId(null);
-    }
-  }, [closeMenus, setLinesIds, setNotificationId, setStationId, trainId]);
-
-  useEffect(() => {
-    if (notificationId) {
-      closeMenus();
-
-      // Close overlay details
-      setStationId(null);
-      setLinesIds(null);
-      setTrainId(null);
-    }
-  }, [closeMenus, notificationId, setLinesIds, setStationId, setTrainId]);
-
-  useEffect(() => {
-    if (linesIds?.length) {
-      closeMenus();
-
-      // Close overlay details
-      setStationId(null);
-      setNotificationId(null);
-      setTrainId(null);
-    }
-  }, [
-    closeMenus,
-    linesIds?.length,
-    setNotificationId,
-    setStationId,
-    setTrainId,
-  ]);
-
-  useEffect(() => {
-    setIsOverlayOpen(
-      (hasPrint && isExportMenuOpen) ||
-        (hasLayerTree && isLayerTreeOpen) ||
-        (hasShare && isShareMenuOpen) ||
-        (hasDetails && !!selectedFeature) || // For custom layers details.
-        (hasDetails && hasRealtime && !!trainId) ||
-        (hasDetails && tenant && !!stationId) ||
-        (hasDetails && hasLnp && !!linesIds) ||
-        (hasDetails && hasNotification && !!notificationId),
-    );
-  }, [
-    hasDetails,
-    selectedFeature,
-    hasPrint,
-    isExportMenuOpen,
-    hasLayerTree,
-    isLayerTreeOpen,
-    hasShare,
-    isShareMenuOpen,
-    hasRealtime,
-    trainId,
-    tenant,
-    stationId,
-    setIsOverlayOpen,
-    hasLnp,
-    linesIds,
-    hasNotification,
-    notificationId,
-  ]);
-
-  return null;
-}
-
-export default LayoutState;

package/src/LayoutState/index.tsx

@@ -1 +0,0 @@
-export { default } from "./LayoutState";