@open-pioneer/map 0.1.0

package/model/layers/WMSLayerImpl.js

@@ -0,0 +1,177 @@
+import { createLogger } from '@open-pioneer/core';
+import ImageLayer from 'ol/layer/Image';
+import ImageWMS from 'ol/source/ImageWMS';
+import { defer } from '../../util/defer.js';
+import { AbstractLayer } from '../AbstractLayer.js';
+import { AbstractLayerBase } from '../AbstractLayerBase.js';
+import { SublayersCollectionImpl } from '../SublayersCollectionImpl.js';
+
+const LOG = createLogger("map:WMSLayer");
+class WMSLayerImpl extends AbstractLayer {
+  #url;
+  #sublayers;
+  #deferredSublayerUpdate;
+  #layer;
+  #source;
+  constructor(config) {
+    const layer = new ImageLayer();
+    super({
+      ...config,
+      olLayer: layer
+    });
+    const source = new ImageWMS({
+      ...config.sourceOptions,
+      url: config.url,
+      params: {
+        ...config.sourceOptions?.params
+      }
+    });
+    this.#url = config.url;
+    this.#source = source;
+    this.#layer = layer;
+    this.#sublayers = new SublayersCollectionImpl(constructSublayers(config.sublayers));
+    this.#updateLayersParam();
+  }
+  get url() {
+    return this.#url;
+  }
+  get sublayers() {
+    return this.#sublayers;
+  }
+  __attach(map) {
+    super.__attach(map);
+    for (const sublayer of this.#sublayers.getSublayers()) {
+      sublayer.__attach(map, this, this);
+    }
+  }
+  /** Called by the sublayers when their visibility changed. */
+  __updateSublayerVisibility() {
+    if (this.#deferredSublayerUpdate?.reschedule()) {
+      return;
+    }
+    this.#deferredSublayerUpdate = defer(() => {
+      try {
+        this.#updateLayersParam();
+        this.#deferredSublayerUpdate = void 0;
+      } catch (e) {
+        LOG.error(`Failed to update sublayer visibility on WMS layer '${this.id}'.`, e);
+      }
+    });
+  }
+  /**
+   * Gathers the visibility of _all_ sublayers and assembles the 'layers' WMS parameter.
+   * The parameters are then applied to the WMS source.
+   */
+  #updateLayersParam() {
+    const layers = this.#getVisibleLayerNames();
+    this.#source.updateParams({
+      "LAYERS": layers
+    });
+    const source = layers.length === 0 ? null : this.#source;
+    if (this.#layer.getSource() !== source) {
+      this.#layer.setSource(source);
+    }
+  }
+  #getVisibleLayerNames() {
+    const layers = [];
+    const visitSublayer = (sublayer) => {
+      if (!sublayer.visible) {
+        return;
+      }
+      const nestedSublayers = sublayer.sublayers.__getRawSublayers();
+      if (nestedSublayers.length) {
+        for (const nestedSublayer of nestedSublayers) {
+          visitSublayer(nestedSublayer);
+        }
+      } else {
+        layers.push(sublayer.name);
+      }
+    };
+    for (const sublayer of this.sublayers.__getRawSublayers()) {
+      visitSublayer(sublayer);
+    }
+    return layers;
+  }
+}
+class WMSSublayerImpl extends AbstractLayerBase {
+  #parent;
+  #parentLayer;
+  #name;
+  #sublayers;
+  #visible;
+  constructor(config) {
+    super(config);
+    this.#name = config.name;
+    this.#visible = config.visible ?? true;
+    this.#sublayers = new SublayersCollectionImpl(constructSublayers(config.sublayers));
+  }
+  get name() {
+    return this.#name;
+  }
+  get sublayers() {
+    return this.#sublayers;
+  }
+  get parent() {
+    const parent = this.#parent;
+    if (!parent) {
+      throw new Error(`WMS sublayer ${this.id} has not been attached to its parent yet.`);
+    }
+    return parent;
+  }
+  get parentLayer() {
+    const parentLayer = this.#parentLayer;
+    if (!parentLayer) {
+      throw new Error(`WMS sublayer ${this.id} has not been attached to its parent yet.`);
+    }
+    return parentLayer;
+  }
+  /**
+   * Called by the parent layer when it is attached to the map to attach all sublayers.
+   */
+  __attach(map, parentLayer, parent) {
+    super.__attachToMap(map);
+    if (this.#parent) {
+      throw new Error(
+        `WMS sublayer '${this.id}' has already been attached to parent '${this.#parent.id}'`
+      );
+    }
+    this.#parent = parent;
+    if (this.#parentLayer) {
+      throw new Error(
+        `WMS sublayer '${this.id}' has already been attached to parent layer '${this.#parentLayer.id}'`
+      );
+    }
+    this.#parentLayer = parentLayer;
+    for (const sublayer of this.sublayers.__getRawSublayers()) {
+      sublayer.__attach(map, parentLayer, this);
+    }
+  }
+  get visible() {
+    return this.#visible;
+  }
+  setVisible(newVisibility) {
+    if (this.visible !== newVisibility) {
+      this.#visible = newVisibility;
+      this.#parentLayer?.__updateSublayerVisibility();
+      this.__emitChangeEvent("changed:visible");
+    }
+  }
+}
+function constructSublayers(sublayerConfigs = []) {
+  const sublayers = [];
+  try {
+    for (const sublayerConfig of sublayerConfigs) {
+      sublayers.push(new WMSSublayerImpl(sublayerConfig));
+    }
+    return sublayers;
+  } catch (e) {
+    while (sublayers.length) {
+      const layer = sublayers.pop();
+      layer?.destroy();
+    }
+    throw new Error("Failed to construct sublayers.", { cause: e });
+  }
+}
+
+export { WMSLayerImpl };
+//# sourceMappingURL=WMSLayerImpl.js.map

package/model/layers/WMSLayerImpl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WMSLayerImpl.js","sources":["WMSLayerImpl.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { createLogger } from \"@open-pioneer/core\";\nimport ImageLayer from \"ol/layer/Image\";\nimport type ImageSource from \"ol/source/Image\";\nimport ImageWMS from \"ol/source/ImageWMS\";\nimport { Sublayer, WMSLayerConfig, WMSLayer, WMSSublayerConfig } from \"../../api\";\nimport { DeferredExecution, defer } from \"../../util/defer\";\nimport { AbstractLayer } from \"../AbstractLayer\";\nimport { AbstractLayerBase } from \"../AbstractLayerBase\";\nimport { MapModelImpl } from \"../MapModelImpl\";\nimport { SublayersCollectionImpl } from \"../SublayersCollectionImpl\";\n\nconst LOG = createLogger(\"map:WMSLayer\");\n\nexport class WMSLayerImpl extends AbstractLayer implements WMSLayer {\n    #url: string;\n    #sublayers: SublayersCollectionImpl<WMSSublayerImpl>;\n    #deferredSublayerUpdate: DeferredExecution | undefined;\n    #layer: ImageLayer<ImageSource>;\n    #source: ImageWMS;\n\n    constructor(config: WMSLayerConfig) {\n        const layer = new ImageLayer();\n        super({\n            ...config,\n            olLayer: layer\n        });\n        const source = new ImageWMS({\n            ...config.sourceOptions,\n            url: config.url,\n            params: {\n                ...config.sourceOptions?.params\n            }\n        });\n        this.#url = config.url;\n        this.#source = source;\n        this.#layer = layer;\n        this.#sublayers = new SublayersCollectionImpl(constructSublayers(config.sublayers));\n        this.#updateLayersParam();\n    }\n\n    get url(): string {\n        return this.#url;\n    }\n\n    get sublayers(): SublayersCollectionImpl<WMSSublayerImpl> {\n        return this.#sublayers;\n    }\n\n    __attach(map: MapModelImpl): void {\n        super.__attach(map);\n        for (const sublayer of this.#sublayers.getSublayers()) {\n            sublayer.__attach(map, this, this);\n        }\n    }\n\n    /** Called by the sublayers when their visibility changed. */\n    __updateSublayerVisibility() {\n        if (this.#deferredSublayerUpdate?.reschedule()) {\n            return;\n        }\n        this.#deferredSublayerUpdate = defer(() => {\n            try {\n                this.#updateLayersParam();\n                this.#deferredSublayerUpdate = undefined;\n            } catch (e) {\n                LOG.error(`Failed to update sublayer visibility on WMS layer '${this.id}'.`, e);\n            }\n        });\n    }\n\n    /**\n     * Gathers the visibility of _all_ sublayers and assembles the 'layers' WMS parameter.\n     * The parameters are then applied to the WMS source.\n     */\n    #updateLayersParam() {\n        const layers = this.#getVisibleLayerNames();\n        this.#source.updateParams({\n            \"LAYERS\": layers\n        });\n\n        // only set source if there are visible sublayers, otherwise\n        // we send an invalid http request\n        const source = layers.length === 0 ? null : this.#source;\n        if (this.#layer.getSource() !== source) {\n            this.#layer.setSource(source);\n        }\n    }\n\n    #getVisibleLayerNames() {\n        const layers: string[] = [];\n        const visitSublayer = (sublayer: WMSSublayerImpl) => {\n            if (!sublayer.visible) {\n                return;\n            }\n\n            const nestedSublayers = sublayer.sublayers.__getRawSublayers();\n            if (nestedSublayers.length) {\n                for (const nestedSublayer of nestedSublayers) {\n                    visitSublayer(nestedSublayer);\n                }\n            } else {\n                layers.push(sublayer.name);\n            }\n        };\n\n        for (const sublayer of this.sublayers.__getRawSublayers()) {\n            visitSublayer(sublayer);\n        }\n        return layers;\n    }\n}\n\nclass WMSSublayerImpl extends AbstractLayerBase implements Sublayer {\n    #parent: WMSSublayerImpl | WMSLayerImpl | undefined;\n    #parentLayer: WMSLayerImpl | undefined;\n    #name: string;\n    #sublayers: SublayersCollectionImpl<WMSSublayerImpl>;\n    #visible: boolean;\n\n    constructor(config: WMSSublayerConfig) {\n        super(config);\n        this.#name = config.name;\n        this.#visible = config.visible ?? true;\n        this.#sublayers = new SublayersCollectionImpl(constructSublayers(config.sublayers));\n    }\n\n    get name(): string {\n        return this.#name;\n    }\n\n    get sublayers(): SublayersCollectionImpl<WMSSublayerImpl> {\n        return this.#sublayers;\n    }\n\n    get parent(): WMSSublayerImpl | WMSLayerImpl {\n        const parent = this.#parent;\n        if (!parent) {\n            throw new Error(`WMS sublayer ${this.id} has not been attached to its parent yet.`);\n        }\n        return parent;\n    }\n\n    get parentLayer(): WMSLayerImpl {\n        const parentLayer = this.#parentLayer;\n        if (!parentLayer) {\n            throw new Error(`WMS sublayer ${this.id} has not been attached to its parent yet.`);\n        }\n        return parentLayer;\n    }\n\n    /**\n     * Called by the parent layer when it is attached to the map to attach all sublayers.\n     */\n    __attach(\n        map: MapModelImpl,\n        parentLayer: WMSLayerImpl,\n        parent: WMSLayerImpl | WMSSublayerImpl\n    ): void {\n        super.__attachToMap(map);\n        if (this.#parent) {\n            throw new Error(\n                `WMS sublayer '${this.id}' has already been attached to parent '${this.#parent.id}'`\n            );\n        }\n        this.#parent = parent;\n        if (this.#parentLayer) {\n            throw new Error(\n                `WMS sublayer '${this.id}' has already been attached to parent layer '${\n                    this.#parentLayer.id\n                }'`\n            );\n        }\n        this.#parentLayer = parentLayer;\n\n        // Recurse into nested sublayers\n        for (const sublayer of this.sublayers.__getRawSublayers()) {\n            sublayer.__attach(map, parentLayer, this);\n        }\n    }\n\n    get visible(): boolean {\n        return this.#visible;\n    }\n\n    setVisible(newVisibility: boolean): void {\n        if (this.visible !== newVisibility) {\n            this.#visible = newVisibility;\n            this.#parentLayer?.__updateSublayerVisibility();\n            this.__emitChangeEvent(\"changed:visible\");\n        }\n    }\n}\n\nfunction constructSublayers(sublayerConfigs: WMSSublayerConfig[] = []): WMSSublayerImpl[] {\n    const sublayers: WMSSublayerImpl[] = [];\n    try {\n        for (const sublayerConfig of sublayerConfigs) {\n            sublayers.push(new WMSSublayerImpl(sublayerConfig));\n        }\n        return sublayers;\n    } catch (e) {\n        // Ensure previous sublayers are destroyed if a single constructor throws\n        while (sublayers.length) {\n            const layer = sublayers.pop()!;\n            layer?.destroy();\n        }\n        throw new Error(\"Failed to construct sublayers.\", { cause: e });\n    }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "type": "module",
+  "name": "@open-pioneer/map",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "uuid": "^9.0.0"
+  },
+  "peerDependencies": {
+    "@open-pioneer/chakra-integration": "^1.1.0",
+    "@open-pioneer/core": "^1.1.0",
+    "@open-pioneer/runtime": "^1.1.0",
+    "@types/proj4": "^2.5.2",
+    "ol": "^8.2.0",
+    "proj4": "^2.9.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-use": "^17.4.0",
+    "@open-pioneer/react-utils": "^0.1.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./services": {
+      "import": "./services.js",
+      "types": "./services.d.ts"
+    },
+    "./ui/styles.css": "./ui/styles.css"
+  },
+  "openPioneerFramework": {
+    "styles": "./ui/styles.css",
+    "services": [
+      {
+        "serviceName": "MapRegistryImpl",
+        "provides": [
+          {
+            "interfaceName": "map.MapRegistry"
+          }
+        ],
+        "references": [
+          {
+            "referenceName": "providers",
+            "type": "all",
+            "interfaceName": "map.MapConfigProvider"
+          }
+        ]
+      }
+    ],
+    "servicesModule": "./services",
+    "i18n": {
+      "languages": []
+    },
+    "ui": {
+      "references": [
+        {
+          "type": "unique",
+          "interfaceName": "map.MapRegistry"
+        }
+      ]
+    },
+    "properties": [],
+    "packageFormatVersion": "1.0.0"
+  }
+}

package/projections.d.ts

@@ -0,0 +1,27 @@
+import { ProjectionDefinition as Proj4ProjectionDefinition } from "proj4";
+export type ProjectionDefinition = string | Proj4ProjectionDefinition;
+/**
+ * Adds new registrations to the global [proj4js](https://github.com/proj4js/proj4js) definition set.
+ *
+ * See the proj4js documentation for more details.
+ *
+ * Example:
+ *
+ * ```ts
+ * import { registerProjections } from "@open-pioneer/map";
+ *
+ * registerProjections({
+ *   "EPSG:25832": "+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs",
+ *   // ... more projections
+ * });
+ * ```
+ *
+ * @param projections
+ *      An object containing (key, definition) pairs. The key must be projection name (such as `"EPSG:4326"`).
+ *      The value can be a string defining the projection or an existing proj4 definition object.
+ */
+export declare function registerProjections(projections: Record<string, ProjectionDefinition>): void;
+/**
+ * Searches the global [proj4js](https://github.com/proj4js/proj4js) definition set for a definition with the given name.
+ */
+export declare function getProjection(name: string): Proj4ProjectionDefinition;

package/projections.js

@@ -0,0 +1,15 @@
+import { register } from 'ol/proj/proj4';
+import proj4 from 'proj4';
+
+function registerProjections(projections) {
+  for (const [name, definition] of Object.entries(projections)) {
+    proj4.defs(name, definition);
+  }
+  register(proj4);
+}
+function getProjection(name) {
+  return proj4.defs(name);
+}
+
+export { getProjection, registerProjections };
+//# sourceMappingURL=projections.js.map

package/projections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"projections.js","sources":["projections.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { register } from \"ol/proj/proj4\";\nimport proj4, { ProjectionDefinition as Proj4ProjectionDefinition } from \"proj4\";\n\nexport type ProjectionDefinition = string | Proj4ProjectionDefinition;\n\n/**\n * Adds new registrations to the global [proj4js](https://github.com/proj4js/proj4js) definition set.\n *\n * See the proj4js documentation for more details.\n *\n * Example:\n *\n * ```ts\n * import { registerProjections } from \"@open-pioneer/map\";\n *\n * registerProjections({\n *   \"EPSG:25832\": \"+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs\",\n *   // ... more projections\n * });\n * ```\n *\n * @param projections\n *      An object containing (key, definition) pairs. The key must be projection name (such as `\"EPSG:4326\"`).\n *      The value can be a string defining the projection or an existing proj4 definition object.\n */\nexport function registerProjections(projections: Record<string, ProjectionDefinition>): void {\n    for (const [name, definition] of Object.entries(projections)) {\n        proj4.defs(name, definition);\n    }\n    register(proj4);\n}\n\n/**\n * Searches the global [proj4js](https://github.com/proj4js/proj4js) definition set for a definition with the given name.\n */\nexport function getProjection(name: string): Proj4ProjectionDefinition {\n    return proj4.defs(name);\n}\n"],"names":[],"mappings":";;;AA2BO,SAAS,oBAAoB,WAAyD,EAAA;AACzF,EAAA,KAAA,MAAW,CAAC,IAAM,EAAA,UAAU,KAAK,MAAO,CAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AAC1D,IAAM,KAAA,CAAA,IAAA,CAAK,MAAM,UAAU,CAAA,CAAA;AAAA,GAC/B;AACA,EAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AAClB,CAAA;AAKO,SAAS,cAAc,IAAyC,EAAA;AACnE,EAAO,OAAA,KAAA,CAAM,KAAK,IAAI,CAAA,CAAA;AAC1B;;;;"}

package/services.d.ts

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

package/services.js

@@ -0,0 +1,2 @@
+export { MapRegistryImpl } from './MapRegistryImpl.js';
+//# sourceMappingURL=services.js.map

package/services.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"services.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/ui/MapAnchor.d.ts

@@ -0,0 +1,49 @@
+import { StyleProps } from "@open-pioneer/chakra-integration";
+import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { ReactNode } from "react";
+import { MapPadding } from "./MapContainer";
+export type MapAnchorPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export interface MapAnchorProps extends CommonComponentProps {
+    /**
+     * The position of the anchor container above the map.
+     * @default "top-right"
+     */
+    position?: MapAnchorPosition;
+    /**
+     * Horizontal gap in pixel applied to anchor container.
+     *
+     * Applied:
+     * - left, if position `*-left`
+     * - right, if position `*-right`
+     *
+     * @default 0
+     */
+    horizontalGap?: number;
+    /**
+     * Vertical gap in pixel applied to anchor container.
+     *
+     * Applied:
+     * - top, if position `top-*`
+     * - bottom, if position `bottom-*`
+     *
+     * @default 0 (If position `bottom-*`, default verticalGap == `30`)
+     */
+    verticalGap?: number;
+    /**
+     * Prevent some events from the map anchor's children from bubbling towards the map, effectively hiding them from map interactions.
+     * Defaults to `true`.
+     *
+     * If this value is enabled, events such as `pointer-down` are hidden from the map when they occur
+     * within the map anchor.
+     * This is essential when the user wants to select text, or open the browser context menu within the anchor.
+     * If that is not required, set `stopEvents` to `false` instead.
+     */
+    stopEvents?: boolean;
+    children?: ReactNode;
+}
+export declare function MapAnchor(props: MapAnchorProps): JSX.Element;
+export declare function computeAttributionGap(verticalGap?: number): {
+    gap: number;
+    space: number;
+};
+export declare function computePositionStyles(position: MapAnchorPosition, padding: Required<MapPadding>, horizontalGap?: number | undefined, verticalGap?: number | undefined): StyleProps;

package/ui/MapAnchor.js

@@ -0,0 +1,91 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '@open-pioneer/chakra-integration';
+import { useCommonComponentProps } from '@open-pioneer/react-utils';
+import { useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { useMapContext } from './MapContext.js';
+
+const defaultPosition = "top-right";
+function MapAnchor(props) {
+  const {
+    position = defaultPosition,
+    stopEvents = true,
+    children,
+    horizontalGap,
+    verticalGap
+  } = props;
+  const { containerProps } = useCommonComponentProps("map-anchor", props);
+  const { padding, mapAnchorsHost } = useMapContext();
+  const eventHandlers = useMemo(() => {
+    const stopHandler = stopEvents ? stopPropagation : void 0;
+    return {
+      onPointerDown: stopHandler,
+      onPointerUp: stopHandler,
+      onContextMenu: stopHandler
+    };
+  }, [stopEvents]);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        ...containerProps,
+        pointerEvents: "auto",
+        userSelect: "text",
+        ...eventHandlers,
+        ...computePositionStyles(position, padding, horizontalGap, verticalGap),
+        children
+      }
+    ),
+    mapAnchorsHost
+  );
+}
+function computeAttributionGap(verticalGap) {
+  const height = 20;
+  const space = 10;
+  return {
+    gap: verticalGap === void 0 ? height + space : 0,
+    space
+  };
+}
+function computePositionStyles(position, padding, horizontalGap, verticalGap) {
+  const props = {
+    position: "absolute",
+    transitionProperty: "left, right, top, bottom",
+    transitionDuration: "200ms",
+    transitionTimingFunction: "ease-out"
+  };
+  const defaultHorizontalGap = 0;
+  const horizontal = horizontalGap ?? defaultHorizontalGap;
+  const defaultVerticalGap = 0;
+  const vertical = verticalGap ?? defaultVerticalGap;
+  const attribution = computeAttributionGap(verticalGap);
+  const gap = (n) => `${n}px`;
+  switch (position) {
+    case "top-left":
+      props.left = gap(padding.left + horizontal);
+      props.top = gap(padding.top + vertical);
+      break;
+    case "top-right":
+      props.right = gap(padding.right + horizontal);
+      props.top = gap(padding.top + vertical);
+      break;
+    case "bottom-left":
+      props.left = gap(padding.left + horizontal);
+      props.bottom = gap(padding.bottom + vertical + attribution.gap);
+      break;
+    case "bottom-right":
+      props.right = gap(padding.right + horizontal);
+      props.bottom = gap(padding.bottom + vertical + attribution.gap);
+      break;
+  }
+  props.maxH = `calc((100%) - ${props.top ?? "0px"} - ${props.bottom ?? attribution.gap + "px"} - ${vertical + "px"} - ${attribution.space + "px"})`;
+  props.maxW = `calc((100%) - ${props.left ?? "0px"} - ${props.right ?? "0px"} - ${horizontal + "px"})`;
+  props.overflow = "hidden";
+  return props;
+}
+function stopPropagation(e) {
+  e.stopPropagation();
+}
+
+export { MapAnchor, computeAttributionGap, computePositionStyles };
+//# sourceMappingURL=MapAnchor.js.map

package/ui/MapAnchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapAnchor.js","sources":["MapAnchor.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, BoxProps, StyleProps } from \"@open-pioneer/chakra-integration\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { BaseSyntheticEvent, ReactNode, useMemo } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { MapPadding } from \"./MapContainer\";\nimport { useMapContext } from \"./MapContext\";\n\nexport type MapAnchorPosition = \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n\nconst defaultPosition: MapAnchorPosition = \"top-right\";\n\nexport interface MapAnchorProps extends CommonComponentProps {\n    /**\n     * The position of the anchor container above the map.\n     * @default \"top-right\"\n     */\n    position?: MapAnchorPosition;\n\n    /**\n     * Horizontal gap in pixel applied to anchor container.\n     *\n     * Applied:\n     * - left, if position `*-left`\n     * - right, if position `*-right`\n     *\n     * @default 0\n     */\n    horizontalGap?: number;\n\n    /**\n     * Vertical gap in pixel applied to anchor container.\n     *\n     * Applied:\n     * - top, if position `top-*`\n     * - bottom, if position `bottom-*`\n     *\n     * @default 0 (If position `bottom-*`, default verticalGap == `30`)\n     */\n    verticalGap?: number;\n\n    /**\n     * Prevent some events from the map anchor's children from bubbling towards the map, effectively hiding them from map interactions.\n     * Defaults to `true`.\n     *\n     * If this value is enabled, events such as `pointer-down` are hidden from the map when they occur\n     * within the map anchor.\n     * This is essential when the user wants to select text, or open the browser context menu within the anchor.\n     * If that is not required, set `stopEvents` to `false` instead.\n     */\n    stopEvents?: boolean;\n\n    children?: ReactNode;\n}\n\nexport function MapAnchor(props: MapAnchorProps): JSX.Element {\n    const {\n        position = defaultPosition,\n        stopEvents = true,\n        children,\n        horizontalGap,\n        verticalGap\n    } = props;\n    const { containerProps } = useCommonComponentProps(\"map-anchor\", props);\n    const { padding, mapAnchorsHost } = useMapContext();\n\n    const eventHandlers: Partial<BoxProps> = useMemo(() => {\n        const stopHandler = stopEvents ? stopPropagation : undefined;\n        return {\n            onPointerDown: stopHandler,\n            onPointerUp: stopHandler,\n            onContextMenu: stopHandler\n        };\n    }, [stopEvents]);\n\n    return createPortal(\n        <Box\n            {...containerProps}\n            /* Overlay container uses pointer-events: none, this restores interactivity */\n            pointerEvents=\"auto\"\n            /* Restore user-select: none set by ol-viewport parent */\n            userSelect=\"text\"\n            /** Hide pointer up/down and context menu events from the map parent.  */\n            {...eventHandlers}\n            {...computePositionStyles(position, padding, horizontalGap, verticalGap)}\n        >\n            {children}\n        </Box>,\n        mapAnchorsHost\n    );\n}\n\nexport function computeAttributionGap(verticalGap?: number): {\n    gap: number;\n    space: number;\n} {\n    /**\n     * height of the ol attribution component\n     * improvement: Get height directly from `Attribution` HTMLDivElement\n     */\n    const height = 20;\n\n    /**\n     * additional space between attribution and map anchor container\n     */\n    const space = 10;\n\n    return {\n        gap: verticalGap === undefined ? height + space : 0,\n        space\n    };\n}\n\nexport function computePositionStyles(\n    position: MapAnchorPosition,\n    padding: Required<MapPadding>,\n    horizontalGap?: number | undefined,\n    verticalGap?: number | undefined\n): StyleProps {\n    const props: StyleProps = {\n        position: \"absolute\",\n        transitionProperty: \"left, right, top, bottom\",\n        transitionDuration: \"200ms\",\n        transitionTimingFunction: \"ease-out\"\n    };\n\n    const defaultHorizontalGap = 0;\n    const horizontal = horizontalGap ?? defaultHorizontalGap;\n\n    const defaultVerticalGap = 0;\n    const vertical = verticalGap ?? defaultVerticalGap;\n\n    const attribution = computeAttributionGap(verticalGap);\n    const gap = (n: number) => `${n}px`;\n\n    switch (position) {\n        case \"top-left\":\n            props.left = gap(padding.left + horizontal);\n            props.top = gap(padding.top + vertical);\n            break;\n        case \"top-right\":\n            props.right = gap(padding.right + horizontal);\n            props.top = gap(padding.top + vertical);\n            break;\n        case \"bottom-left\":\n            props.left = gap(padding.left + horizontal);\n            props.bottom = gap(padding.bottom + vertical + attribution.gap);\n            break;\n        case \"bottom-right\":\n            props.right = gap(padding.right + horizontal);\n            props.bottom = gap(padding.bottom + vertical + attribution.gap);\n            break;\n    }\n\n    /**\n     * Apply max-height and max-width to MapAnchor to avoid content overflow\n     */\n    props.maxH = `calc((100%) - ${props.top ?? \"0px\"} - ${\n        props.bottom ?? attribution.gap + \"px\"\n    } - ${vertical + \"px\"} - ${attribution.space + \"px\"})`;\n\n    props.maxW = `calc((100%) - ${props.left ?? \"0px\"} - ${props.right ?? \"0px\"} - ${\n        horizontal + \"px\"\n    })`;\n    props.overflow = \"hidden\";\n\n    return props;\n}\n\nfunction stopPropagation(e: BaseSyntheticEvent) {\n    e.stopPropagation();\n}\n"],"names":[],"mappings":"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"}

package/ui/MapContainer.d.ts

@@ -0,0 +1,60 @@
+import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { ReactNode } from "react";
+/**
+ * Map padding, all values are pixels.
+ *
+ * See https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#padding
+ */
+export interface MapPadding {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+}
+export interface MapContainerProps extends CommonComponentProps {
+    /** The id of the map to display. */
+    mapId: string;
+    /**
+     * Sets the map's padding directly.
+     *
+     * See: https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#padding)
+     */
+    viewPadding?: MapPadding | undefined;
+    /**
+     * Behavior performed by the map when the view padding changes.
+     *
+     * - `none`: Do nothing.
+     * - `preserve-center`: Ensures that the center point remains the same by animating the view.
+     * - `preserve-extent`: Ensures that the extent remains the same by zooming.
+     *
+     * @default "preserve-center"
+     */
+    viewPaddingChangeBehavior?: "none" | "preserve-center" | "preserve-extent";
+    children?: ReactNode;
+    /**
+     * Optional role property.
+     *
+     * This property is directly applied to the map's container div element.
+     */
+    role?: string;
+    /**
+     * Optional aria-labelledby property.
+     * Do not use together with aria-label.
+     *
+     * This property is directly applied to the map's container div element.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Optional aria-label property.
+     * Do not use together with aria-label.
+     *
+     * This property is directly applied to the map's container div element.
+     */
+    "aria-label"?: string;
+}
+/**
+ * Displays the map with the given id.
+ *
+ * There can only be at most one MapContainer for every map.
+ */
+export declare function MapContainer(props: MapContainerProps): import("react/jsx-runtime").JSX.Element;