From 78a1d87741c6a9698b0ba29596d753cce22df2ca Mon Sep 17 00:00:00 2001 From: srijitcoder Date: Wed, 25 Oct 2023 21:09:55 +0530 Subject: [PATCH 01/12] basic structure for list --- elements/drawtools/drawtools.stories.js | 25 +++++++++++++++++++++++++ elements/drawtools/src/main.js | 19 +++++++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/elements/drawtools/drawtools.stories.js b/elements/drawtools/drawtools.stories.js index efe983a58..fb361aec9 100644 --- a/elements/drawtools/drawtools.stories.js +++ b/elements/drawtools/drawtools.stories.js @@ -39,3 +39,28 @@ export const MultiPolygon = { multiple-features >`, }; + +/** + * By setting the `show-list` attribute or `showList` property to `true`, + * List of features will be visible + */ +export const MultiPolygonWithList = { + render: () => html` +
+ + +
+ `, +}; diff --git a/elements/drawtools/src/main.js b/elements/drawtools/src/main.js index 4e79247bf..6b3191ef3 100644 --- a/elements/drawtools/src/main.js +++ b/elements/drawtools/src/main.js @@ -17,6 +17,7 @@ export class EOxDrawTools extends LitElement { layer: { type: String }, modify: { attribute: false, state: true }, multipleFeatures: { attribute: "multiple-features", type: Boolean }, + showList: { attribute: "show-list", type: Boolean }, unstyled: { type: Boolean }, }; } @@ -83,6 +84,11 @@ export class EOxDrawTools extends LitElement { */ this.multipleFeatures = false; + /** + * Show list of features + */ + this.showList = false; + /** * Render the element without additional styles */ @@ -170,6 +176,9 @@ export class EOxDrawTools extends LitElement { ); this.requestUpdate(); + console.log(this.drawLayer) + console.log(this.drawnFeatures) + return html` + + `; + } +} + +customElements.define("eox-drawtools-list", EOxDrawToolsList); diff --git a/elements/drawtools/src/main.js b/elements/drawtools/src/main.js index 6b3191ef3..64fa9d1bf 100644 --- a/elements/drawtools/src/main.js +++ b/elements/drawtools/src/main.js @@ -1,4 +1,5 @@ import { LitElement, html, nothing } from "lit"; +import "./components/list"; import { style } from "./style"; import { styleEOX } from "./style.eox"; @@ -176,9 +177,6 @@ export class EOxDrawTools extends LitElement { ); this.requestUpdate(); - console.log(this.drawLayer) - console.log(this.drawnFeatures) - return html` `; } diff --git a/elements/drawtools/src/helpers.js b/elements/drawtools/src/helpers.js new file mode 100644 index 000000000..d8d1cea81 --- /dev/null +++ b/elements/drawtools/src/helpers.js @@ -0,0 +1,41 @@ +import * as ol from "ol/style.js"; + +/** + * Default polygon style + * + * @returns {ol.Style} + */ +export const getDefaultPolygonStyle = () => { + const fill = new ol.Fill({ + color: "rgba(255,255,255,0.4)", + }); + const stroke = new ol.Stroke({ + color: "#3399CC", + width: 1.25, + }); + + return new ol.Style({ + fill: fill, + stroke: stroke, + }); +}; + +/** + * Default selected polygon style + * + * @returns {ol.Style} + */ +export const getSelectedPolygonStyle = () => { + const fill = new ol.Fill({ + color: "rgba(51, 153, 204,0.5)", + }); + const stroke = new ol.Stroke({ + color: "#3399CC", + width: 2.5, + }); + + return new ol.Style({ + fill: fill, + stroke: stroke, + }); +}; diff --git a/elements/drawtools/src/main.js b/elements/drawtools/src/main.js index 64fa9d1bf..f69a7681d 100644 --- a/elements/drawtools/src/main.js +++ b/elements/drawtools/src/main.js @@ -205,18 +205,19 @@ export class EOxDrawTools extends LitElement { discard - ${this.showList && - html` this.requestUpdate()} - > - `} + ${this.showList && this.drawnFeatures?.length + ? html` this.requestUpdate()} + > + ` + : nothing} `; } } diff --git a/elements/drawtools/src/style.eox.js b/elements/drawtools/src/style.eox.js index bca34c48a..634e8fa75 100644 --- a/elements/drawtools/src/style.eox.js +++ b/elements/drawtools/src/style.eox.js @@ -29,6 +29,9 @@ export const styleListEOX = ` li:hover { background: #f0f5f9; } + li.selected { + background: #f0f5f9; + } li { list-style: none; padding: 4px; From 976486af9c5802f15b7312f7a8b83d3c92661561 Mon Sep 17 00:00:00 2001 From: srijitcoder Date: Thu, 26 Oct 2023 04:03:26 +0530 Subject: [PATCH 04/12] cleaned code --- elements/drawtools/src/components/list.js | 83 ++++++++++++++++------- elements/drawtools/src/style.eox.js | 8 ++- 2 files changed, 64 insertions(+), 27 deletions(-) diff --git a/elements/drawtools/src/components/list.js b/elements/drawtools/src/components/list.js index 33ce0218b..a5f481e38 100644 --- a/elements/drawtools/src/components/list.js +++ b/elements/drawtools/src/components/list.js @@ -1,7 +1,6 @@ import { LitElement, html, nothing } from "lit"; import { keyed } from "lit/directives/keyed.js"; import { styleEOX, styleListEOX } from "../style.eox"; -import * as ol from "ol/style.js"; import { getDefaultPolygonStyle, getSelectedPolygonStyle } from "../helpers"; /** @@ -24,7 +23,7 @@ export class EOxDrawToolsList extends LitElement { super(); /** - * @type import("../../map/main").EOxMap + * @type import("../../../map/main").EOxMap */ this.eoxMap = null; @@ -72,13 +71,51 @@ export class EOxDrawToolsList extends LitElement { this.selectedFeatureIndex = null; } - render() { - console.log(this.drawLayer.getStyle()); - console.log(this.drawnFeatures[0]?.getProperties()); - console.log(this.drawnFeatures[0]?.get("ol_uid")); - console.log(this.drawnFeatures[0]?.getGeometry().getExtent()); - console.log(this.olMap.getView()); + /** + * Delete individual feature @param {any} evt + */ + _handleDelete(evt) { + evt.stopPropagation(); + const index = evt.target.getAttribute("index"); + const feature = this.drawnFeatures[index]; + this.drawLayer.getSource().removeFeature(feature); + this.drawnFeatures.splice(index, 1); + + // If selected feature gets deletes fit to available bound + if (this.selectedFeatureIndex === Number(index)) { + const newExtent = this.drawLayer.getSource().getExtent(); + if (this.drawnFeatures.length) this.olMap.getView().fit(newExtent); + this.selectedFeatureIndex = null; + } + + // If selected index is greater than deleted feature index then changing index cursor by 1 + else if (this.selectedFeatureIndex > Number(index)) { + this.selectedFeatureIndex = this.selectedFeatureIndex - 1; + this._handleSelectFeature( + this.selectedFeatureIndex, + this.drawnFeatures[this.selectedFeatureIndex] + ); + } + this.requestUpdate(); + } + + /** + * Select a feature @param {Number} i + * Select a feature @param {import("ol").Feature} feature + */ + _handleSelectFeature(i, feature) { + if (this.selectedFeatureIndex === i) return; + if (this.selectedFeatureIndex !== null) + this.drawnFeatures[this.selectedFeatureIndex].setStyle( + getDefaultPolygonStyle() + ); + feature.setStyle(getSelectedPolygonStyle()); + this.olMap.getView().fit(feature.getGeometry().getExtent()); + this.selectedFeatureIndex = i; + this.requestUpdate(); + } + render() { return html` `; } diff --git a/elements/drawtools/src/helpers.js b/elements/drawtools/src/helpers.js index d8d1cea81..1e03a96af 100644 --- a/elements/drawtools/src/helpers.js +++ b/elements/drawtools/src/helpers.js @@ -1,41 +1,28 @@ -import * as ol from "ol/style.js"; - /** - * Default polygon style - * - * @returns {ol.Style} + * Default selected option + * @param {string} id + * @param {"click" | "pointermove"} condition + * @param {Boolean} panIn + * @returns {import("../../map/src/select").SelectOptions} */ -export const getDefaultPolygonStyle = () => { - const fill = new ol.Fill({ - color: "rgba(255,255,255,0.4)", - }); - const stroke = new ol.Stroke({ - color: "#3399CC", - width: 1.25, - }); - - return new ol.Style({ - fill: fill, - stroke: stroke, - }); -}; - -/** - * Default selected polygon style - * - * @returns {ol.Style} - */ -export const getSelectedPolygonStyle = () => { - const fill = new ol.Fill({ - color: "rgba(51, 153, 204,0.5)", - }); - const stroke = new ol.Stroke({ - color: "#3399CC", - width: 2.5, - }); - - return new ol.Style({ - fill: fill, - stroke: stroke, - }); +export const getDefaultSelectedOption = (id, condition, panIn = false) => { + return { + id, + condition, + panIn, + layer: { + type: "Vector", + properties: { + id: "selectLayer", + }, + source: { + type: "Vector", + }, + style: { + "fill-color": "rgba(51, 153, 204,0.5)", + "stroke-color": "#3399CC", + "stroke-width": 2.5, + }, + }, + }; }; diff --git a/elements/drawtools/src/main.js b/elements/drawtools/src/main.js index f69a7681d..71d7bb306 100644 --- a/elements/drawtools/src/main.js +++ b/elements/drawtools/src/main.js @@ -210,6 +210,7 @@ export class EOxDrawTools extends LitElement { .eoxMap=${this.#eoxMap} .olMap=${this.#olMap} .draw=${this.draw} + .layer=${this.layer} .drawLayer=${this.drawLayer} .drawnFeatures=${this.drawnFeatures} .modify=${this.modify} diff --git a/elements/map/src/draw.ts b/elements/map/src/draw.ts index d4c6ad5ef..1ea466bc5 100644 --- a/elements/map/src/draw.ts +++ b/elements/map/src/draw.ts @@ -6,6 +6,7 @@ import { LineString, Polygon } from "ol/geom"; import GeoJSON from "ol/format/GeoJSON"; import { Vector as VectorLayer } from "ol/layer"; import { Vector as VectorSource } from "ol/source"; +import { getUid } from "ol"; export type DrawOptions = Omit< import("ol/interaction/Draw").Options, @@ -57,6 +58,10 @@ export function addDraw( const area = getArea(geom, { radius: 6378137, projection: "EPSG:3857" }); e.feature.set("measure", area); } + const uid = getUid(e.feature); + e.feature.set("id", uid); + e.feature.setId(uid); + const geoJsonObject = format.writeFeatureObject(e.feature); const drawendEvt = new CustomEvent("drawend", { detail: { diff --git a/elements/map/src/select.ts b/elements/map/src/select.ts index d56a4dc12..b35f881f7 100644 --- a/elements/map/src/select.ts +++ b/elements/map/src/select.ts @@ -21,6 +21,7 @@ export type SelectOptions = Omit< style?: import("ol/style/flat.js").FlatStyleLike; overlay?: import("ol/Overlay").Options; active?: boolean; + panIn?: boolean; }; export class EOxSelectInteraction { @@ -28,6 +29,7 @@ export class EOxSelectInteraction { layerId: string; options: SelectOptions; active: boolean; + panIn: boolean; tooltip: HTMLElement; selectedFids: Array; selectLayer: VectorTileLayer | VectorLayer; @@ -40,6 +42,7 @@ export class EOxSelectInteraction { this.layerId = layerId; this.options = options; this.active = options.active; + this.panIn = options.panIn || false; this.tooltip = this.eoxMap.querySelector("eox-map-tooltip") || options.overlay?.element; @@ -116,6 +119,15 @@ export class EOxSelectInteraction { return null; }); + // Pan into the feature's extend when `panIn` is true + const panIntoFeature = (feature: Feature | RenderFeature) => { + if (this.panIn) { + this.eoxMap.map + .getView() + .fit(feature.getGeometry().getExtent(), { duration: 750 }); + } + }; + const listener = (event: MapBrowserEvent) => { if (event.dragging || !this.active) { return; @@ -124,8 +136,15 @@ export class EOxSelectInteraction { .getFeatures(event.pixel) .then((features: Array) => { const feature = features.length ? features[0] : null; - this.selectedFids = feature ? [this.getId(feature)] : []; - this.selectStyleLayer.changed(); + + const newSelectFids = feature ? [this.getId(feature)] : []; + const idChanged = this.selectedFids[0] !== newSelectFids[0]; + this.selectedFids = newSelectFids; + + if (idChanged) { + this.selectStyleLayer.changed(); + if (feature) panIntoFeature(feature); + } if (overlay) { const xPosition = @@ -241,4 +260,6 @@ export function addSelect( layerId, options ); + + return EOxMap.selectInteractions[options.id]; } From bacaad74f802c71ebf461ce0259632eaef3572e9 Mon Sep 17 00:00:00 2001 From: srijitcoder Date: Wed, 15 Nov 2023 17:03:44 +0530 Subject: [PATCH 12/12] revert CHANGELOG --- elements/drawtools/CHANGELOG.md | 15 +++++++++------ elements/itemfilter/CHANGELOG.md | 3 ++- elements/layercontrol/CHANGELOG.md | 6 ++++-- elements/stacinfo/CHANGELOG.md | 3 ++- 4 files changed, 17 insertions(+), 10 deletions(-) diff --git a/elements/drawtools/CHANGELOG.md b/elements/drawtools/CHANGELOG.md index 85c0f91da..e938ccd83 100644 --- a/elements/drawtools/CHANGELOG.md +++ b/elements/drawtools/CHANGELOG.md @@ -2,22 +2,25 @@ ## [0.4.2](https://github.com/EOX-A/EOxElements/compare/drawtools-v0.4.1...drawtools-v0.4.2) (2023-10-19) + ### Bug Fixes -- Emit drawupdate event also on discard ([#348](https://github.com/EOX-A/EOxElements/issues/348)) ([04d9ebf](https://github.com/EOX-A/EOxElements/commit/04d9ebf1f086f38a2d1b6d08387142ce5651a0f0)) -- Prevent zoom on double-click while drawing ([#328](https://github.com/EOX-A/EOxElements/issues/328)) ([a79cb2a](https://github.com/EOX-A/EOxElements/commit/a79cb2a16959f5d43469ae0134402f79ee9c3a3c)) -- **style:** Replace buttons with icons ([#347](https://github.com/EOX-A/EOxElements/issues/347)) ([5d0f80b](https://github.com/EOX-A/EOxElements/commit/5d0f80b5806e55e302bcc44c37f10e0088b5842d)) +* Emit drawupdate event also on discard ([#348](https://github.com/EOX-A/EOxElements/issues/348)) ([04d9ebf](https://github.com/EOX-A/EOxElements/commit/04d9ebf1f086f38a2d1b6d08387142ce5651a0f0)) +* Prevent zoom on double-click while drawing ([#328](https://github.com/EOX-A/EOxElements/issues/328)) ([a79cb2a](https://github.com/EOX-A/EOxElements/commit/a79cb2a16959f5d43469ae0134402f79ee9c3a3c)) +* **style:** Replace buttons with icons ([#347](https://github.com/EOX-A/EOxElements/issues/347)) ([5d0f80b](https://github.com/EOX-A/EOxElements/commit/5d0f80b5806e55e302bcc44c37f10e0088b5842d)) + ### Miscellaneous Chores -- **docs:** Add story description ([bf52202](https://github.com/EOX-A/EOxElements/commit/bf522028075a7861c82cba02ce9838edec735ae4)) -- Update readme ([1da4fcf](https://github.com/EOX-A/EOxElements/commit/1da4fcf655ddfc769035d680f93940629f7eabc3)) +* **docs:** Add story description ([bf52202](https://github.com/EOX-A/EOxElements/commit/bf522028075a7861c82cba02ce9838edec735ae4)) +* Update readme ([1da4fcf](https://github.com/EOX-A/EOxElements/commit/1da4fcf655ddfc769035d680f93940629f7eabc3)) ## [0.4.1](https://github.com/EOX-A/EOxElements/compare/drawtools-v0.4.0...drawtools-v0.4.1) (2023-10-19) + ### Bug Fixes -- Prevent zoom on double-click while drawing ([#328](https://github.com/EOX-A/EOxElements/issues/328)) ([a79cb2a](https://github.com/EOX-A/EOxElements/commit/a79cb2a16959f5d43469ae0134402f79ee9c3a3c)) +* Prevent zoom on double-click while drawing ([#328](https://github.com/EOX-A/EOxElements/issues/328)) ([a79cb2a](https://github.com/EOX-A/EOxElements/commit/a79cb2a16959f5d43469ae0134402f79ee9c3a3c)) ## 0.4.0 (2023-10-11) diff --git a/elements/itemfilter/CHANGELOG.md b/elements/itemfilter/CHANGELOG.md index 17f6cd422..34eb88d39 100644 --- a/elements/itemfilter/CHANGELOG.md +++ b/elements/itemfilter/CHANGELOG.md @@ -2,9 +2,10 @@ ## [0.9.0](https://github.com/EOX-A/EOxElements/compare/itemfilter-v0.8.6...itemfilter-v0.9.0) (2023-10-31) + ### Features -- Introduce expandResults property to set initial result accordeon state ([97146ad](https://github.com/EOX-A/EOxElements/commit/97146ad219855798ad5abbf8bf9c65b80382833c)) +* Introduce expandResults property to set initial result accordeon state ([97146ad](https://github.com/EOX-A/EOxElements/commit/97146ad219855798ad5abbf8bf9c65b80382833c)) ## 0.8.6 (2023-10-11) diff --git a/elements/layercontrol/CHANGELOG.md b/elements/layercontrol/CHANGELOG.md index 45cc69b27..9b375a7eb 100644 --- a/elements/layercontrol/CHANGELOG.md +++ b/elements/layercontrol/CHANGELOG.md @@ -9,15 +9,17 @@ ## [0.8.0](https://github.com/EOX-A/EOxElements/compare/layercontrol-v0.7.1...layercontrol-v0.8.0) (2023-10-31) + ### Features -- Introduce layerControlToolsExpand property ([266da0d](https://github.com/EOX-A/EOxElements/commit/266da0df89a6775f7e3def5e5de6b785c963a574)) +* Introduce layerControlToolsExpand property ([266da0d](https://github.com/EOX-A/EOxElements/commit/266da0df89a6775f7e3def5e5de6b785c963a574)) ## [0.7.1](https://github.com/EOX-A/EOxElements/compare/layercontrol-v0.7.0...layercontrol-v0.7.1) (2023-10-19) + ### Bug Fixes -- Removed icon highlight on hover ([#345](https://github.com/EOX-A/EOxElements/issues/345)) ([68692f9](https://github.com/EOX-A/EOxElements/commit/68692f9f6ac24280086c07601c900d350cafd211)) +* Removed icon highlight on hover ([#345](https://github.com/EOX-A/EOxElements/issues/345)) ([68692f9](https://github.com/EOX-A/EOxElements/commit/68692f9f6ac24280086c07601c900d350cafd211)) ## [0.7.0](https://github.com/EOX-A/EOxElements/compare/layercontrol-v0.6.8...layercontrol-v0.7.0) (2023-10-12) diff --git a/elements/stacinfo/CHANGELOG.md b/elements/stacinfo/CHANGELOG.md index 470748078..16f921097 100644 --- a/elements/stacinfo/CHANGELOG.md +++ b/elements/stacinfo/CHANGELOG.md @@ -16,9 +16,10 @@ ## [0.2.0](https://github.com/EOX-A/EOxElements/compare/stacinfo-v0.1.2...stacinfo-v0.2.0) (2023-10-24) + ### Features -- Render single whitelisted property as full-width ([#366](https://github.com/EOX-A/EOxElements/issues/366)) ([bac0f23](https://github.com/EOX-A/EOxElements/commit/bac0f236ebf3f0eed2394673c9dafac69e4986de)) +* Render single whitelisted property as full-width ([#366](https://github.com/EOX-A/EOxElements/issues/366)) ([bac0f23](https://github.com/EOX-A/EOxElements/commit/bac0f236ebf3f0eed2394673c9dafac69e4986de)) ## 0.1.2 (2023-10-11)