@open-pioneer/selection 0.1.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "type": "module",
+  "name": "@open-pioneer/selection",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@open-pioneer/chakra-integration": "^1.1.1",
+    "@open-pioneer/runtime": "^2.1.0",
+    "@open-pioneer/core": "^1.2.1",
+    "ol": "^8.2.0",
+    "react": "^18.2.0",
+    "classnames": "^2.3.2",
+    "chakra-react-select": "^4.7.6",
+    "@chakra-ui/icons": "^2.1.1",
+    "react-icons": "^4.12.0",
+    "@open-pioneer/map": "^0.3.0",
+    "@open-pioneer/notifier": "^0.3.0",
+    "@open-pioneer/react-utils": "^0.2.1"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./services": {
+      "import": "./services.js",
+      "types": "./services.d.ts"
+    },
+    "./selection.css": "./selection.css"
+  },
+  "openPioneerFramework": {
+    "styles": "./selection.css",
+    "services": [
+      {
+        "serviceName": "VectorSelectionSourceFactory",
+        "provides": [
+          {
+            "interfaceName": "selection.VectorSelectionSourceFactory"
+          }
+        ],
+        "references": []
+      }
+    ],
+    "servicesModule": "./services",
+    "i18n": {
+      "languages": [
+        "en",
+        "de"
+      ]
+    },
+    "ui": {
+      "references": [
+        {
+          "type": "unique",
+          "interfaceName": "notifier.NotificationService"
+        }
+      ]
+    },
+    "properties": [],
+    "packageFormatVersion": "1.0.0"
+  }
+}

package/selection.css

@@ -0,0 +1,40 @@
+.selection-drag-box {
+    background-color: rgba(255, 255, 255, 0.3) !important;
+    border: 3px solid var(--chakra-colors-background_primary) !important;
+}
+
+.selection-tooltip {
+    position: relative;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 4px;
+    color: black;
+    padding: 4px 8px;
+    opacity: 1;
+    white-space: nowrap;
+    font-size: 12px;
+    cursor: default;
+    user-select: none;
+    font-weight: bold;
+}
+
+.selection .react-select {
+    cursor: default;
+}
+
+.map-container .selection-active {
+    cursor: crosshair;
+}
+
+.map-container .selection-inactive {
+    cursor: no-drop;
+}
+
+.selection-source-value.selection-source-value--disabled {
+    opacity: 0.4;
+}
+
+.selection-source-value.selection-source-value--disabled span {
+    margin: 0px 6px 0px 0px;
+}
+
+/*# sourceMappingURL=selection.css.map */

package/selection.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["selection.css"],"names":[],"mappings":"AAAA;IACI,qDAAqD;IACrD,oEAAoE;AACxE;;AAEA;IACI,kBAAkB;IAClB,oCAAoC;IACpC,kBAAkB;IAClB,YAAY;IACZ,gBAAgB;IAChB,UAAU;IACV,mBAAmB;IACnB,eAAe;IACf,eAAe;IACf,iBAAiB;IACjB,iBAAiB;AACrB;;AAEA;IACI,eAAe;AACnB;;AAEA;IACI,iBAAiB;AACrB;;AAEA;IACI,eAAe;AACnB;;AAEA;IACI,YAAY;AAChB;;AAEA;IACI,uBAAuB;AAC3B","file":"selection.css","sourcesContent":[".selection-drag-box {\n    background-color: rgba(255, 255, 255, 0.3) !important;\n    border: 3px solid var(--chakra-colors-background_primary) !important;\n}\n\n.selection-tooltip {\n    position: relative;\n    background: rgba(255, 255, 255, 0.8);\n    border-radius: 4px;\n    color: black;\n    padding: 4px 8px;\n    opacity: 1;\n    white-space: nowrap;\n    font-size: 12px;\n    cursor: default;\n    user-select: none;\n    font-weight: bold;\n}\n\n.selection .react-select {\n    cursor: default;\n}\n\n.map-container .selection-active {\n    cursor: crosshair;\n}\n\n.map-container .selection-inactive {\n    cursor: no-drop;\n}\n\n.selection-source-value.selection-source-value--disabled {\n    opacity: 0.4;\n}\n\n.selection-source-value.selection-source-value--disabled span {\n    margin: 0px 6px 0px 0px;\n}\n"]}

package/selectionSources.d.ts

@@ -0,0 +1,37 @@
+import { SelectionSource, SelectionResult, SelectionOptions, SelectionSourceStatus, SelectionSourceEvents, SelectionKind, VectorLayerSelectionSource } from "./api";
+import { Point } from "ol/geom";
+import { EventEmitter } from "@open-pioneer/core";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+export declare const fakeSelectedPointFeatures: Point[];
+export declare class FakePointSelectionSource extends EventEmitter<SelectionSourceEvents> implements SelectionSource {
+    #private;
+    readonly label: string;
+    constructor(timeout?: number, status?: SelectionSourceStatus, pointFeatures?: Point[]);
+    get status(): SelectionSourceStatus;
+    set status(value: SelectionSourceStatus);
+    select(selectionKind: SelectionKind, options: SelectionOptions): Promise<SelectionResult[]>;
+}
+/**
+ * A SelectionSource to use an OpenLayers VectorLayer with an OpenLayers VectorSource (e.g. layer of the map).
+ * Features are:
+ * -   using only the extent as selection kind
+ * -   listening to layer visibility changes and updating the status of the source
+ * -   limiting the number of returned selection results to the corresponding selection option
+ * -   throwing an event `changed:status` when the status updates
+ */
+export declare class VectorLayerSelectionSourceImpl extends EventEmitter<SelectionSourceEvents> implements VectorLayerSelectionSource {
+    #private;
+    readonly label: string;
+    constructor(vectorLayer: VectorLayer<VectorSource>, label: string, layerNotVisibleReason: string);
+    destroy(): void;
+    get status(): import("./api").SelectionSourceStatusObject;
+    select(selectionKind: SelectionKind, options: SelectionOptions): Promise<SelectionResult[]>;
+}
+/**
+ * For testing purposes only
+ */
+export declare class NoStatusSelectionSource extends EventEmitter<SelectionSourceEvents> implements SelectionSource {
+    readonly label: string;
+    select(_: SelectionKind, __: SelectionOptions): Promise<SelectionResult[]>;
+}

package/selectionSources.js

@@ -0,0 +1,64 @@
+import { Point } from 'ol/geom';
+import { EventEmitter } from '@open-pioneer/core';
+import { unByKey } from 'ol/Observable';
+
+[
+  new Point([407354, 5754673]),
+  // con terra (Bottom Right)
+  new Point([404740, 5757893])
+  // Schloss (Top Left)
+];
+class VectorLayerSelectionSourceImpl extends EventEmitter {
+  label;
+  #status = { kind: "available" };
+  #vectorLayer;
+  #eventHandler;
+  #layerNotVisibleReason;
+  constructor(vectorLayer, label, layerNotVisibleReason) {
+    super();
+    this.label = label;
+    this.#vectorLayer = vectorLayer;
+    this.#layerNotVisibleReason = layerNotVisibleReason;
+    this.#updateStatus();
+    this.#eventHandler = this.#vectorLayer.on("change:visible", () => {
+      this.#updateStatus();
+    });
+  }
+  destroy() {
+    unByKey(this.#eventHandler);
+  }
+  get status() {
+    return this.#status;
+  }
+  async select(selectionKind, options) {
+    if (selectionKind.type !== "extent") {
+      throw new Error(`Unsupported selection kind: ${selectionKind.type}`);
+    }
+    if (this.#status.kind !== "available" || this.#vectorLayer.getSource() === null)
+      return [];
+    const allResults = [];
+    this.#vectorLayer.getSource().forEachFeatureIntersectingExtent(selectionKind.extent, (feature) => {
+      if (!feature.getGeometry())
+        return;
+      const result = {
+        id: feature.getId()?.toString() || feature.getGeometry.toString(),
+        geometry: feature.getGeometry()
+      };
+      allResults.push(result);
+    });
+    const selectedFeatures = allResults.filter((s) => s != null);
+    const limitedFeatures = selectedFeatures.length > options.maxResults ? selectedFeatures.slice(0, options.maxResults) : selectedFeatures;
+    return limitedFeatures;
+  }
+  #updateStatus() {
+    const layerIsVisible = this.#vectorLayer.getVisible();
+    const newStatus = layerIsVisible ? { kind: "available" } : { kind: "unavailable", reason: this.#layerNotVisibleReason };
+    if (newStatus.kind !== this.#status.kind) {
+      this.#status = newStatus;
+      this.emit("changed:status");
+    }
+  }
+}
+
+export { VectorLayerSelectionSourceImpl };
+//# sourceMappingURL=selectionSources.js.map

package/selectionSources.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionSources.js","sources":["selectionSources.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    SelectionSource,\n    SelectionResult,\n    SelectionOptions,\n    SelectionSourceStatus,\n    SelectionSourceEvents,\n    SelectionKind,\n    VectorLayerSelectionSource\n} from \"./api\";\nimport { Point } from \"ol/geom\";\nimport { EventEmitter } from \"@open-pioneer/core\";\nimport VectorSource from \"ol/source/Vector\";\nimport VectorLayer from \"ol/layer/Vector\";\nimport { EventsKey } from \"ol/events\";\nimport { unByKey } from \"ol/Observable\";\n\nexport const fakeSelectedPointFeatures = [\n    new Point([407354, 5754673]), // con terra (Bottom Right)\n    new Point([404740, 5757893]) // Schloss (Top Left)\n];\n\nlet count = 0;\n\nexport class FakePointSelectionSource\n    extends EventEmitter<SelectionSourceEvents>\n    implements SelectionSource\n{\n    readonly label = `Fake Selection Source #${++count}`;\n    #timeout: number;\n    #status: SelectionSourceStatus;\n    #pointFeatures: Point[];\n\n    constructor(\n        timeout?: number,\n        status?: SelectionSourceStatus,\n        pointFeatures: Point[] = fakeSelectedPointFeatures\n    ) {\n        super();\n        this.#timeout = timeout || 0;\n        this.#status = status || \"unavailable\";\n        this.#pointFeatures = pointFeatures;\n    }\n\n    get status(): SelectionSourceStatus {\n        return this.#status;\n    }\n\n    set status(value: SelectionSourceStatus) {\n        if (value !== this.#status) {\n            this.#status = value;\n            this.emit(\"changed:status\");\n        }\n    }\n\n    async select(\n        selectionKind: SelectionKind,\n        options: SelectionOptions\n    ): Promise<SelectionResult[]> {\n        if (selectionKind.type !== \"extent\") {\n            throw new Error(`Unsupported selection kind: ${selectionKind.type}`);\n        }\n\n        if (this.#status !== \"available\") return [];\n\n        await new Promise((resolve) => setTimeout(resolve, this.#timeout));\n\n        const allPoints = this.#pointFeatures.map((point, index) => {\n            const result: SelectionResult = {\n                id: index,\n                geometry: point\n            };\n            if (!point.intersectsExtent(selectionKind.extent)) {\n                return undefined;\n            }\n            return result;\n        });\n\n        const selectedPoints = allPoints.filter((s): s is SelectionResult => s != null);\n        const limitedResults =\n            selectedPoints.length > options.maxResults\n                ? selectedPoints.slice(0, options.maxResults)\n                : selectedPoints;\n        return limitedResults;\n    }\n}\n\n/**\n * A SelectionSource to use an OpenLayers VectorLayer with an OpenLayers VectorSource (e.g. layer of the map).\n * Features are:\n * -   using only the extent as selection kind\n * -   listening to layer visibility changes and updating the status of the source\n * -   limiting the number of returned selection results to the corresponding selection option\n * -   throwing an event `changed:status` when the status updates\n */\nexport class VectorLayerSelectionSourceImpl\n    extends EventEmitter<SelectionSourceEvents>\n    implements VectorLayerSelectionSource\n{\n    readonly label: string;\n    #status: Exclude<SelectionSourceStatus, string> = { kind: \"available\" };\n    #vectorLayer: VectorLayer<VectorSource>;\n    #eventHandler: EventsKey;\n    #layerNotVisibleReason: string;\n\n    constructor(\n        vectorLayer: VectorLayer<VectorSource>,\n        label: string,\n        layerNotVisibleReason: string\n    ) {\n        super();\n        this.label = label;\n        this.#vectorLayer = vectorLayer;\n        this.#layerNotVisibleReason = layerNotVisibleReason;\n        this.#updateStatus();\n        this.#eventHandler = this.#vectorLayer.on(\"change:visible\", () => {\n            this.#updateStatus();\n        });\n    }\n\n    destroy() {\n        unByKey(this.#eventHandler);\n    }\n\n    get status() {\n        return this.#status;\n    }\n\n    async select(\n        selectionKind: SelectionKind,\n        options: SelectionOptions\n    ): Promise<SelectionResult[]> {\n        if (selectionKind.type !== \"extent\") {\n            throw new Error(`Unsupported selection kind: ${selectionKind.type}`);\n        }\n\n        if (this.#status.kind !== \"available\" || this.#vectorLayer.getSource() === null) return [];\n\n        const allResults: SelectionResult[] = [];\n        this.#vectorLayer\n            .getSource()!\n            .forEachFeatureIntersectingExtent(selectionKind.extent, (feature) => {\n                if (!feature.getGeometry()) return;\n                const result: SelectionResult = {\n                    id: feature.getId()?.toString() || feature.getGeometry.toString(),\n                    geometry: feature.getGeometry()!\n                };\n                allResults.push(result);\n            });\n        const selectedFeatures = allResults.filter((s): s is SelectionResult => s != null);\n        const limitedFeatures =\n            selectedFeatures.length > options.maxResults\n                ? selectedFeatures.slice(0, options.maxResults)\n                : selectedFeatures;\n        return limitedFeatures;\n    }\n\n    #updateStatus() {\n        const layerIsVisible = this.#vectorLayer.getVisible();\n        const newStatus: SelectionSourceStatus = layerIsVisible\n            ? { kind: \"available\" }\n            : { kind: \"unavailable\", reason: this.#layerNotVisibleReason };\n        if (newStatus.kind !== this.#status.kind) {\n            this.#status = newStatus;\n            this.emit(\"changed:status\");\n        }\n    }\n}\n\n/**\n * For testing purposes only\n */\nexport class NoStatusSelectionSource\n    extends EventEmitter<SelectionSourceEvents>\n    implements SelectionSource\n{\n    readonly label: string = \"Testlabel\";\n\n    async select(_: SelectionKind, __: SelectionOptions): Promise<SelectionResult[]> {\n        const allPoints = fakeSelectedPointFeatures.map((point, index) => {\n            const result: SelectionResult = {\n                id: index,\n                geometry: point\n            };\n            return result;\n        });\n        return allPoints;\n    }\n}\n"],"names":[],"mappings":";;;;AAkByC;AAAA,EACrC,IAAI,KAAA,CAAM,CAAC,MAAA,EAAQ,OAAO,CAAC,CAAA;AAAA;AAAA,EAC3B,IAAI,KAAA,CAAM,CAAC,MAAA,EAAQ,OAAO,CAAC,CAAA;AAAA;AAC/B,EAAA;AA2EO,MAAM,uCACD,YAEZ,CAAA;AAAA,EACa,KAAA,CAAA;AAAA,EACT,OAAA,GAAkD,EAAE,IAAA,EAAM,WAAY,EAAA,CAAA;AAAA,EACtE,YAAA,CAAA;AAAA,EACA,aAAA,CAAA;AAAA,EACA,sBAAA,CAAA;AAAA,EAEA,WAAA,CACI,WACA,EAAA,KAAA,EACA,qBACF,EAAA;AACE,IAAM,KAAA,EAAA,CAAA;AACN,IAAA,IAAA,CAAK,KAAQ,GAAA,KAAA,CAAA;AACb,IAAA,IAAA,CAAK,YAAe,GAAA,WAAA,CAAA;AACpB,IAAA,IAAA,CAAK,sBAAyB,GAAA,qBAAA,CAAA;AAC9B,IAAA,IAAA,CAAK,aAAc,EAAA,CAAA;AACnB,IAAA,IAAA,CAAK,aAAgB,GAAA,IAAA,CAAK,YAAa,CAAA,EAAA,CAAG,kBAAkB,MAAM;AAC9D,MAAA,IAAA,CAAK,aAAc,EAAA,CAAA;AAAA,KACtB,CAAA,CAAA;AAAA,GACL;AAAA,EAEA,OAAU,GAAA;AACN,IAAA,OAAA,CAAQ,KAAK,aAAa,CAAA,CAAA;AAAA,GAC9B;AAAA,EAEA,IAAI,MAAS,GAAA;AACT,IAAA,OAAO,IAAK,CAAA,OAAA,CAAA;AAAA,GAChB;AAAA,EAEA,MAAM,MACF,CAAA,aAAA,EACA,OAC0B,EAAA;AAC1B,IAAI,IAAA,aAAA,CAAc,SAAS,QAAU,EAAA;AACjC,MAAA,MAAM,IAAI,KAAA,CAAM,CAA+B,4BAAA,EAAA,aAAA,CAAc,IAAI,CAAE,CAAA,CAAA,CAAA;AAAA,KACvE;AAEA,IAAA,IAAI,KAAK,OAAQ,CAAA,IAAA,KAAS,eAAe,IAAK,CAAA,YAAA,CAAa,WAAgB,KAAA,IAAA;AAAM,MAAA,OAAO,EAAC,CAAA;AAEzF,IAAA,MAAM,aAAgC,EAAC,CAAA;AACvC,IAAA,IAAA,CAAK,aACA,SAAU,EAAA,CACV,iCAAiC,aAAc,CAAA,MAAA,EAAQ,CAAC,OAAY,KAAA;AACjE,MAAI,IAAA,CAAC,QAAQ,WAAY,EAAA;AAAG,QAAA,OAAA;AAC5B,MAAA,MAAM,MAA0B,GAAA;AAAA,QAC5B,EAAA,EAAI,QAAQ,KAAM,EAAA,EAAG,UAAc,IAAA,OAAA,CAAQ,YAAY,QAAS,EAAA;AAAA,QAChE,QAAA,EAAU,QAAQ,WAAY,EAAA;AAAA,OAClC,CAAA;AACA,MAAA,UAAA,CAAW,KAAK,MAAM,CAAA,CAAA;AAAA,KACzB,CAAA,CAAA;AACL,IAAA,MAAM,mBAAmB,UAAW,CAAA,MAAA,CAAO,CAAC,CAAA,KAA4B,KAAK,IAAI,CAAA,CAAA;AACjF,IAAM,MAAA,eAAA,GACF,gBAAiB,CAAA,MAAA,GAAS,OAAQ,CAAA,UAAA,GAC5B,iBAAiB,KAAM,CAAA,CAAA,EAAG,OAAQ,CAAA,UAAU,CAC5C,GAAA,gBAAA,CAAA;AACV,IAAO,OAAA,eAAA,CAAA;AAAA,GACX;AAAA,EAEA,aAAgB,GAAA;AACZ,IAAM,MAAA,cAAA,GAAiB,IAAK,CAAA,YAAA,CAAa,UAAW,EAAA,CAAA;AACpD,IAAM,MAAA,SAAA,GAAmC,cACnC,GAAA,EAAE,IAAM,EAAA,WAAA,EACR,GAAA,EAAE,IAAM,EAAA,aAAA,EAAe,MAAQ,EAAA,IAAA,CAAK,sBAAuB,EAAA,CAAA;AACjE,IAAA,IAAI,SAAU,CAAA,IAAA,KAAS,IAAK,CAAA,OAAA,CAAQ,IAAM,EAAA;AACtC,MAAA,IAAA,CAAK,OAAU,GAAA,SAAA,CAAA;AACf,MAAA,IAAA,CAAK,KAAK,gBAAgB,CAAA,CAAA;AAAA,KAC9B;AAAA,GACJ;AACJ;;;;"}

package/services.d.ts

@@ -0,0 +1,7 @@
+import { type PackageIntl, ServiceOptions } from "@open-pioneer/runtime";
+import { VectorLayerSelectionSource, VectorLayerSelectionSourceFactory, VectorLayerSelectionSourceOptions } from "./api";
+export declare class VectorSelectionSourceFactory implements VectorLayerSelectionSourceFactory {
+    #private;
+    constructor({ intl }: ServiceOptions<PackageIntl>);
+    createSelectionSource(options: VectorLayerSelectionSourceOptions): VectorLayerSelectionSource;
+}

package/services.js

@@ -0,0 +1,18 @@
+import { VectorLayerSelectionSourceImpl } from './selectionSources.js';
+
+class VectorSelectionSourceFactory {
+  #intl;
+  constructor({ intl }) {
+    this.#intl = intl;
+  }
+  createSelectionSource(options) {
+    return new VectorLayerSelectionSourceImpl(
+      options.vectorLayer,
+      options.label,
+      this.#intl.formatMessage({ id: "layerNotVisibleReason" })
+    );
+  }
+}
+
+export { VectorSelectionSourceFactory };
+//# sourceMappingURL=services.js.map

package/services.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"services.js","sources":["services.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { type PackageIntl, ServiceOptions } from \"@open-pioneer/runtime\";\nimport { VectorLayerSelectionSourceImpl } from \"./selectionSources\";\nimport {\n    VectorLayerSelectionSource,\n    VectorLayerSelectionSourceFactory,\n    VectorLayerSelectionSourceOptions\n} from \"./api\";\n\nexport class VectorSelectionSourceFactory implements VectorLayerSelectionSourceFactory {\n    #intl: PackageIntl;\n\n    constructor({ intl }: ServiceOptions<PackageIntl>) {\n        this.#intl = intl;\n    }\n    createSelectionSource(options: VectorLayerSelectionSourceOptions): VectorLayerSelectionSource {\n        return new VectorLayerSelectionSourceImpl(\n            options.vectorLayer,\n            options.label,\n            this.#intl.formatMessage({ id: \"layerNotVisibleReason\" })\n        );\n    }\n}\n"],"names":[],"mappings":";;AAUO,MAAM,4BAA0E,CAAA;AAAA,EACnF,KAAA,CAAA;AAAA,EAEA,WAAA,CAAY,EAAE,IAAA,EAAqC,EAAA;AAC/C,IAAA,IAAA,CAAK,KAAQ,GAAA,IAAA,CAAA;AAAA,GACjB;AAAA,EACA,sBAAsB,OAAwE,EAAA;AAC1F,IAAA,OAAO,IAAI,8BAAA;AAAA,MACP,OAAQ,CAAA,WAAA;AAAA,MACR,OAAQ,CAAA,KAAA;AAAA,MACR,KAAK,KAAM,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,yBAAyB,CAAA;AAAA,KAC5D,CAAA;AAAA,GACJ;AACJ;;;;"}