@geops/rvf-mobility-web-component 0.1.127 → 0.1.129

package/src/GeolocationButton/GeolocationButton.tsx

@@ -1,78 +0,0 @@
-import { Geolocation } from "ol";
-import { unByKey } from "ol/Observable";
-import { fromLonLat } from "ol/proj";
-import { memo } from "preact/compat";
-import { useEffect, useMemo } from "preact/hooks";
-
-import GeolocationIcon from "../icons/Geolocation";
-import IconButton from "../ui/IconButton";
-import useI18n from "../utils/hooks/useI18n";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { IconButtonProps } from "../ui/IconButton/IconButton";
-
-export type GeolocationButtonProps = IconButtonProps;
-
-const TRACKING_ZOOM = 16;
-
-function GeolocationButton({ ...props }: GeolocationButtonProps) {
-  const { isTracking, map, setIsTracking } = useMapContext();
-  const { t } = useI18n();
-
-  const geolocation = useMemo(() => {
-    return new Geolocation();
-  }, []);
-
-  useEffect(() => {
-    let keys = [];
-    if (!map || !geolocation) {
-      return;
-    }
-    keys = [
-      // First time we zoom and center on the position
-      geolocation.once("change:position", (evt) => {
-        const position = evt.target.getPosition();
-        if (evt.target.getPosition()) {
-          const coord = fromLonLat(position, "EPSG:3857");
-          map.getView().setZoom(TRACKING_ZOOM);
-          map.getView().setCenter(coord);
-        }
-      }),
-      // then we only center the map.
-      geolocation.on("change:position", (evt) => {
-        const position = evt.target.getPosition();
-        if (evt.target.getPosition()) {
-          const coord = fromLonLat(position, "EPSG:3857");
-          map.getView().setCenter(coord);
-        }
-      }),
-    ];
-
-    return () => {
-      unByKey(keys);
-    };
-  }, [map, geolocation]);
-
-  useEffect(() => {
-    geolocation.setTracking(isTracking);
-  }, [map, geolocation, isTracking]);
-
-  return (
-    <IconButton
-      onClick={() => {
-        return setIsTracking(!isTracking);
-      }}
-      title={
-        isTracking
-          ? t("geolocation_button_title_off")
-          : t("geolocation_button_title_on")
-      }
-      {...props}
-      selected={isTracking}
-    >
-      <GeolocationIcon className={isTracking ? "animate-pulse" : ""} />
-    </IconButton>
-  );
-}
-
-export default memo(GeolocationButton);

package/src/GeolocationButton/index.tsx

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

package/src/I18n/I18n.tsx

@@ -1,38 +0,0 @@
-import { memo, useMemo } from "preact/compat";
-import rosetta from "rosetta";
-
-import { I18nContext } from "../utils/hooks/useI18n";
-import translations from "../utils/translations";
-// import rosetta from 'rosetta/debug';
-
-const i18n = rosetta(translations);
-
-export const defaultLanguage = "en";
-export const languages = ["de", "en", "fr", "it"];
-
-export interface I18nProps {
-  children: React.ReactNode;
-  lngDict?: Record<string, Record<string, string>>;
-  locale?: string;
-}
-
-function I18n({ children, locale = defaultLanguage }: I18nProps) {
-  const i18nWrapper = useMemo(() => {
-    i18n.locale(locale);
-
-    return {
-      locale: (lang?: string) => {
-        return i18n.locale(lang);
-      },
-      t: (...args: [key: string, params?: Record<string, unknown>]) => {
-        return i18n.t(...args);
-      },
-    };
-  }, [locale]);
-
-  return (
-    <I18nContext.Provider value={i18nWrapper}>{children}</I18nContext.Provider>
-  );
-}
-
-export default memo(I18n);

package/src/I18n/index.tsx

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

package/src/LayerTree/LayerTree.tsx

@@ -1,58 +0,0 @@
-import { memo } from "preact/compat";
-import { useEffect, useReducer } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
-
-import {
-  LayersTreeContext,
-  LayersTreeDispatchContext,
-} from "./layersTreeContext";
-import layersTreeReducer from "./layersTreeReducer";
-import TreeItem from "./TreeItem";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-import type { TreeItemProps } from "./TreeItem";
-
-export type LayerTreeProps = {
-  className?: string;
-  layers: TreeItemProps[];
-  treeItemProps?: Partial<TreeItemProps>;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function LayerTree({
-  className,
-  layers,
-  treeItemProps,
-  ...props
-}: LayerTreeProps) {
-  const [tree, dispatch] = useReducer(layersTreeReducer, layers);
-
-  useEffect(() => {
-    dispatch({ payload: layers, type: "INIT" });
-  }, [layers]);
-
-  return (
-    <LayersTreeContext.Provider value={tree}>
-      <LayersTreeDispatchContext.Provider value={dispatch}>
-        <div
-          className={twMerge("relative flex flex-col", className)}
-          {...props}
-        >
-          {layers.map((item) => {
-            return (
-              <TreeItem
-                {...(treeItemProps || {})}
-                className={twMerge("w-full", treeItemProps?.className)}
-                key={item.id}
-                {...item}
-              />
-            );
-          })}
-        </div>
-      </LayersTreeDispatchContext.Provider>
-    </LayersTreeContext.Provider>
-  );
-}
-
-export default memo(LayerTree);

package/src/LayerTree/TreeItem/TreeItem.tsx

@@ -1,153 +0,0 @@
-import { useContext, useEffect, useId, useState } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import ArrowDown from "../../icons/ArrowDown";
-import ArrowUp from "../../icons/ArrowUp";
-import minusGrey from "../../icons/Minus/minus.svg";
-import Checkbox from "../../ui/Checkbox";
-import useI18n from "../../utils/hooks/useI18n";
-// import RadioButton from "../../RadioButton";
-import { LayersTreeDispatchContext } from "../layersTreeContext";
-
-import type BaseLayer from "ol/layer/Base";
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-import type { SVGProps } from "preact/compat";
-
-export enum SelectionType {
-  CHECKBOX = "checkbox",
-  RADIO = "radio",
-}
-
-export type TreeItemProps = {
-  childContainerClassName?: string;
-  childItems: TreeItemProps[];
-  className?: string;
-  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
-  id: string;
-  isCollapsedOnControlClick?: boolean;
-  isControlChecked?: boolean;
-  layer?: BaseLayer;
-  onIconClick?: () => void;
-  selectionType: SelectionType;
-  title: string;
-} & HTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
-
-function TreeItem({
-  childContainerClassName,
-  childItems,
-  className,
-  isCollapsedOnControlClick,
-  isControlChecked,
-  layer,
-  selectionType,
-  title,
-}: TreeItemProps) {
-  const [isContainerVisible, setIsContainerVisible] = useState(true);
-  const dispatch = useContext(LayersTreeDispatchContext);
-  const inputId = useId();
-  const buttonId = useId();
-  const { t } = useI18n();
-
-  useEffect(() => {
-    if (isCollapsedOnControlClick) {
-      setIsContainerVisible(isControlChecked);
-    }
-  }, [isControlChecked, isCollapsedOnControlClick, layer]);
-
-  const handleItemClick = () => {
-    setIsContainerVisible(!isContainerVisible);
-
-    if (isCollapsedOnControlClick && !isContainerVisible) {
-      dispatch({
-        payload: {
-          ...this.props,
-          isControlChecked: true,
-        },
-        type: "SELECT_ITEM",
-      });
-    }
-  };
-
-  const handleSelectionChange = (event) => {
-    dispatch({
-      payload: {
-        ...this.props,
-        isControlChecked: event.target.checked,
-      },
-      type: "SELECT_ITEM",
-    });
-  };
-
-  const renderedLayers = childItems
-    .filter(({ title: titlee }) => {
-      return !!titlee;
-    })
-    .map((item, idx) => {
-      return <TreeItem key={idx} {...item} />;
-    });
-
-  if (!title) {
-    return null;
-  }
-
-  const isMiddleState = () => {
-    if (childItems.length > 0) {
-      const checkedItems = childItems.filter((item) => {
-        return item.isControlChecked;
-      });
-      if (checkedItems.length === childItems.length) {
-        return false;
-      }
-
-      return childItems.some((item) => {
-        return item.isControlChecked;
-      });
-    }
-
-    return false;
-  };
-
-  return (
-    <>
-      <div className={twMerge("flex items-center gap-2 py-2", className)}>
-        {selectionType === SelectionType.RADIO ? null : (
-          // <RadioButton
-          //   checked={isControlChecked}
-          //   id={inputId}
-          //   onChange={handleSelectionChange}
-          // />
-          <Checkbox
-            checked={isControlChecked}
-            checkedIconUrl={isMiddleState() ? minusGrey : null}
-            className={isMiddleState() ? "bg-[length:18px]" : ""}
-            id={inputId}
-            onChange={handleSelectionChange}
-          />
-        )}
-        <label
-          className={`flex-1 cursor-pointer`}
-          htmlFor={renderedLayers.length > 0 ? buttonId : inputId}
-        >
-          {typeof title === "string" ? t(title) || title : title}
-        </label>
-        {renderedLayers.length > 0 && (
-          <button
-            className={`flex cursor-pointer items-center gap-2`}
-            id={buttonId}
-            onClick={handleItemClick}
-          >
-            {isContainerVisible ? <ArrowUp /> : <ArrowDown />}
-          </button>
-        )}
-      </div>
-      {isContainerVisible && renderedLayers.length > 0 && (
-        <div className={twMerge("pl-6", childContainerClassName)}>
-          {renderedLayers}
-        </div>
-      )}
-    </>
-  );
-}
-
-export default TreeItem;

package/src/LayerTree/TreeItem/index.tsx

@@ -1 +0,0 @@
-export { default, SelectionType, TreeItemProps } from "./TreeItem";

package/src/LayerTree/index.tsx

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

package/src/LayerTree/layersTreeContext.ts

@@ -1,4 +0,0 @@
-import { createContext } from "preact";
-
-export const LayersTreeContext = createContext(null);
-export const LayersTreeDispatchContext = createContext(null);

package/src/LayerTree/layersTreeReducer.ts

@@ -1,158 +0,0 @@
-import { SelectionType } from "./TreeItem/TreeItem";
-
-const ROOT = {
-  childItems: [],
-  parent: null,
-};
-
-const mapNode = (childItems, parent) => {
-  for (const child of childItems) {
-    child.parent = parent;
-
-    if (child.childItems.length) {
-      mapNode(child.childItems, child);
-    }
-  }
-};
-
-const initTree = (tree) => {
-  const initializedTree = { ...ROOT };
-  initializedTree.childItems = tree;
-  mapNode(initializedTree.childItems, initializedTree);
-
-  return initializedTree;
-};
-
-const findNodeInTree = (node, nodeToFind) => {
-  if (node.id === nodeToFind.id) {
-    return node;
-  }
-
-  if (node.childItems.length) {
-    for (const child of node.childItems) {
-      const res = findNodeInTree(child, nodeToFind);
-      if (res) {
-        return res;
-      }
-    }
-  }
-};
-
-const updateCheckedControlStatus = (currentItem, newItem, isParentUpdate) => {
-  if (newItem.isControlChecked) {
-    if (newItem.selectionType === SelectionType.CHECKBOX) {
-      currentItem.isControlChecked = newItem.isControlChecked;
-      currentItem.layer.setVisible(currentItem.isControlChecked);
-    } else {
-      for (const child of currentItem.parent.childItems) {
-        child.isControlChecked = child.id === currentItem.id;
-
-        if (!child.isControlChecked) {
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
-          updateRadioChildNodes(child);
-        }
-      }
-    }
-  } else {
-    if (newItem.selectionType === SelectionType.CHECKBOX) {
-      currentItem.isControlChecked = newItem.isControlChecked;
-      currentItem.layer.setVisible(currentItem.isControlChecked);
-    }
-  }
-
-  // check all children
-  if (currentItem.childItems.length && !isParentUpdate) {
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    updateChildNodes(currentItem);
-  }
-
-  // check all parents
-  // eslint-disable-next-line @typescript-eslint/no-use-before-define
-  updateParentNodes(currentItem);
-};
-
-const setNewControlCheckedStatus = (tree, newItem) => {
-  const currentItem = findNodeInTree(tree, newItem);
-
-  if (currentItem) {
-    updateCheckedControlStatus(currentItem, newItem, false);
-  }
-
-  return { ...tree };
-};
-
-const updateChildNodes = (node) => {
-  if (node.childItems[0].selectionType === SelectionType.RADIO) {
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    updateRadioChildNodes(node);
-  } else {
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    updateCheckboxChildNodes(node);
-  }
-};
-
-const updateRadioChildNodes = (parent) => {
-  if (parent.isControlChecked) {
-    for (let i = 0; i < parent.childItems.length; i++) {
-      parent.childItems[i].isControlChecked = i === 0;
-    }
-  } else {
-    for (const child of parent.childItems) {
-      child.isControlChecked = false;
-    }
-  }
-
-  if (parent.childItems.length) {
-    if (parent.childItems[0].childItems.length) {
-      updateChildNodes(parent.childItems[0]);
-    }
-  }
-};
-
-const updateCheckboxChildNodes = (parent) => {
-  for (const child of parent.childItems) {
-    child.isControlChecked = parent.isControlChecked;
-    child.layer.setVisible(child.isControlChecked);
-
-    if (child.childItems.length) {
-      updateChildNodes(child);
-    }
-  }
-};
-
-const updateParentNodes = (node) => {
-  if (node.parent) {
-    if (node.parent.selectionType === SelectionType.CHECKBOX) {
-      const newItem = {
-        ...node.parent,
-        isControlChecked: node.parent.childItems.some((child) => {
-          return child.isControlChecked;
-        }),
-      };
-      updateCheckedControlStatus(node.parent, newItem, true);
-    } else {
-      if (node?.parent?.parent) {
-        const newItem = {
-          ...node.parent,
-          isControlChecked: node.parent.childItems.some((child) => {
-            return child.isControlChecked;
-          }),
-        };
-        updateCheckedControlStatus(node.parent, newItem, true);
-      }
-    }
-  }
-};
-
-function layersTreeReducer(state = ROOT, action) {
-  switch (action.type) {
-    case "INIT":
-      return initTree(action.payload);
-    case "SELECT_ITEM":
-      return setNewControlCheckedStatus(state, action.payload);
-    default:
-      return state;
-  }
-}
-
-export default layersTreeReducer;

package/src/LayerTreeButton/LayerTreeButton.tsx

@@ -1,33 +0,0 @@
-import { memo } from "preact/compat";
-import { useCallback } from "preact/hooks";
-
-import Stack from "../icons/Stack";
-import IconButton from "../ui/IconButton";
-import useI18n from "../utils/hooks/useI18n";
-import useMapContext from "../utils/hooks/useMapContext";
-
-import type { IconButtonProps } from "../ui/IconButton/IconButton";
-
-export type LayerTreeButtonProps = IconButtonProps;
-
-function LayerTreeButton({ ...props }: LayerTreeButtonProps) {
-  const { isLayerTreeOpen, setIsLayerTreeOpen } = useMapContext();
-  const { t } = useI18n();
-
-  const onClick = useCallback(() => {
-    setIsLayerTreeOpen(!isLayerTreeOpen);
-  }, [isLayerTreeOpen, setIsLayerTreeOpen]);
-
-  return (
-    <IconButton
-      title={t("layertree_menu_title")}
-      {...props}
-      onClick={onClick}
-      selected={isLayerTreeOpen}
-    >
-      <Stack />
-    </IconButton>
-  );
-}
-
-export default memo(LayerTreeButton);

package/src/LayerTreeButton/index.tsx

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

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";