Skip to content

Commit

Permalink
feat: allow passing eox-map DOM element to for property reactively (
Browse files Browse the repository at this point in the history 
#1152)

* wip: push current testing environment

* feat: define setter and getters for reactivity of eox-map

* feat: make `for` attribute reactive

* fix: return story to previous state

* chore: remove converter and other unnecessary things

* feat: implement reactive for attribute

* chore: do not raise error if map element is missing

* chore: remove console logs

* chore: run prettier

* fix: actually use EoxMap

* chore: format code

* feat: implement reactive `for` attribute in time control

* chore: remove test attribute

* chore: normalize `for` documentation and defaults

* chore: harmonize description of `for` property

---------

Co-authored-by: silvester-pari <silvester.pari@eox.at>
  • Loading branch information
@spectrachrome @silvester-pari
spectrachrome and silvester-pari authored Aug 5, 2024
1 parent 1f95016 commit 379d885
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 24 deletions.
33 changes: 26 additions & 7 deletions elements/drawtools/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,10 @@ export class EOxDrawTools extends LitElement {
this.allowModify = false;

/**
* The query selector for the map
* @default eox-map
* Query selector of an `eox-map` (`String`, passed as an attribute or property)
* or an `eox-map` DOM element (`HTMLElement`, passed as property)
*
* @type {String|HTMLElement}
*/
this.for = "eox-map";

Expand Down Expand Up @@ -159,7 +161,7 @@ export class EOxDrawTools extends LitElement {
* @param {boolean} replaceFeatures - A boolean flag indicating whether to replace the existing features.
*/
handleFeatureChange(text, replaceFeatures = false) {
this.#eoxMap.parseTextToFeature(
this.eoxMap.parseTextToFeature(
text || JSON.stringify(DUMMY_GEO_JSON),
this.drawLayer,
replaceFeatures
Expand All @@ -185,7 +187,7 @@ export class EOxDrawTools extends LitElement {
*/
updateGeoJSON() {
this.#geoJSON = JSON.stringify(
this.#eoxMap.parseFeature(this.drawnFeatures) || DUMMY_GEO_JSON,
this.eoxMap.parseFeature(this.drawnFeatures) || DUMMY_GEO_JSON,
undefined,
2
);
Expand Down Expand Up @@ -222,14 +224,31 @@ export class EOxDrawTools extends LitElement {
*/
firstUpdated() {
const { EoxMap, OlMap } = initLayerMethod(this, this.multipleFeatures);
(this.#eoxMap = EoxMap), (this.#olMap = OlMap);
(this.eoxMap = EoxMap), (this.#olMap = OlMap);

if (this.importFeatures) initMapDragDropImport(this, this.#eoxMap);
if (this.importFeatures) initMapDragDropImport(this, this.eoxMap);

this.updateGeoJSON();
this.requestUpdate();
}

updated(changedProperties) {
if (changedProperties.has("for")) {
const { EoxMap, OlMap } = initLayerMethod(this, this.multipleFeatures);
(this.eoxMap = EoxMap), (this.#olMap = OlMap);
}
}

get eoxMap() {
return this.#eoxMap;
}

set eoxMap(value) {
const oldValue = this.#eoxMap;
this.#eoxMap = value;
this.requestUpdate("eoxMap", oldValue);
}

// Render method for UI display
render() {
return html`
Expand Down Expand Up @@ -261,7 +280,7 @@ export class EOxDrawTools extends LitElement {
<!-- List Component -->
${this.showList && this.drawnFeatures?.length
? html`<eox-drawtools-list
.eoxMap=${this.#eoxMap}
.eoxMap=${this.eoxMap}
.olMap=${this.#olMap}
.draw=${this.draw}
.drawLayer=${this.drawLayer}
Expand Down
4 changes: 3 additions & 1 deletion elements/drawtools/src/methods/draw/init-layer.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { onDrawEndMethod } from "./";

import { getElement } from "../../../../../utils";

/**
* Initializes the draw layer, interacts with the map, and returns map instances.
*
Expand All @@ -8,7 +10,7 @@ import { onDrawEndMethod } from "./";
* @returns {{EoxMap: import("@eox/map/main").EOxMap, OlMap: import("ol").Map}} - The map instances.
*/
const initLayerMethod = (EoxDrawTool, multipleFeatures) => {
const mapQuery = document.querySelector(EoxDrawTool.for);
const mapQuery = getElement(EoxDrawTool.for);

const EoxMap = /** @type {import("@eox/map/main").EOxMap} */ (mapQuery);
// @ts-ignore
Expand Down
48 changes: 39 additions & 9 deletions elements/geosearch/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import mainStyle from "../../../utils/styles/dist/main.style";
import buttonStyle from "../../../utils/styles/dist/button.style";
import { styleEOX } from "./style.eox";

import { getElement } from "../../../utils/getElement";

class EOxGeoSearch extends LitElement {
static get properties() {
return {
Expand Down Expand Up @@ -34,10 +36,9 @@ class EOxGeoSearch extends LitElement {
*
*/
endpoint: { type: String },
/**
* Selector for the eox-map instance
*/
for: { type: String },
for: {
type: String,
},
/**
* The name of the query parameter to use for the search query in the endpoint URI.
*
Expand Down Expand Up @@ -107,8 +108,10 @@ class EOxGeoSearch extends LitElement {
this._isInputVisible = false;
this._query = "";
/**
* The query selector for the map
* @default eox-map
* Query selector of an `eox-map` (`String`, passed as an attribute or property)
* or an `eox-map` DOM element (`HTMLElement`, passed as property)
*
* @type {String|HTMLElement}
*/
this.for = "eox-map";
this.listDirection = "right";
Expand Down Expand Up @@ -204,7 +207,7 @@ class EOxGeoSearch extends LitElement {
/**
* This for now only supports OpenCage
*/
const viewProjection = this.#eoxMap.map.getView().getProjection().getCode();
const viewProjection = this.eoxMap.map.getView().getProjection().getCode();

let sw = proj4("EPSG:4326", viewProjection, [
event.bounds.southwest.lng,
Expand All @@ -216,20 +219,47 @@ class EOxGeoSearch extends LitElement {
]);
const zoomExtent = [sw[0], sw[1], ne[0], ne[1]];

this.#eoxMap.zoomExtent = zoomExtent;
this.eoxMap.zoomExtent = zoomExtent;

/**
* The select event, including the details of the selected item
*/
this.dispatchEvent(new CustomEvent("geosearchSelect", event));
}

updateMap() {
const foundElement = getElement(this.for);

if (foundElement) {
const EoxMap = /** @type {import("@eox/map/main").EOxMap} */ (
foundElement
);
this.eoxMap = EoxMap;
}
}

/**
* initializes the EOxMap instance
* And stores it in the private property #eoxMap.
*/
firstUpdated() {
this.#eoxMap = document.querySelector(this.for);
this.updateMap();
}

updated(changedProperties) {
if (changedProperties.has("for")) {
this.updateMap();
}
}

get eoxMap() {
return this.#eoxMap;
}

set eoxMap(value) {
const oldValue = this.#eoxMap;
this.#eoxMap = value;
this.requestUpdate("eoxMap", oldValue);
}

render() {
Expand Down
21 changes: 19 additions & 2 deletions elements/layercontrol/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@ export class EOxLayerControl extends LitElement {
super();

/**
* Query selector of an eox-map or another DOM element containing an OL map proeprty
* Query selector of an `eox-map` (`String`, passed as an attribute or property)
* or an `eox-map` DOM element (`HTMLElement`, passed as property)
*
* @type {String|HTMLElement}
*/
Expand Down Expand Up @@ -136,7 +137,23 @@ export class EOxLayerControl extends LitElement {
* Updated #eoxMap after first update.
*/
firstUpdated() {
this.#eoxMap = firstUpdatedMethod(this);
this.eoxMap = firstUpdatedMethod(this);
}

updated(changedProperties) {
if (changedProperties.has("for")) {
this.eoxMap = firstUpdatedMethod(this);
}
}

get eoxMap() {
return this.#eoxMap;
}

set eoxMap(value) {
const oldValue = this.#eoxMap;
this.#eoxMap = value;
this.requestUpdate("eoxMap", oldValue);
}

/**
Expand Down
50 changes: 45 additions & 5 deletions elements/timecontrol/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,6 @@ export class EOxTimeControl extends LitElement {
*/
controlValues: { type: Array, attribute: "control-values" },

/**
* The query selector for the map
*/
for: { type: String },

/**
Expand Down Expand Up @@ -59,6 +56,7 @@ export class EOxTimeControl extends LitElement {
_controlSource: { state: true },
_isAnimationPlaying: { state: true },
_newStepIndex: { state: true },
_eoxMap: { state: true },
unstyled: { type: Boolean },
};
}
Expand All @@ -75,12 +73,19 @@ export class EOxTimeControl extends LitElement {
this.disablePlay = false;
/** @type {boolean} */
this.slider = false;
/** @type {string|HTMLElement} */
this.for = "";
/**
* Query selector of an `eox-map` (`String`, passed as an attribute or property)
* or an `eox-map` DOM element (`HTMLElement`, passed as property)
*
* @type {String|HTMLElement}
*/
this.for = "eox-map";
/** @type {string} */
this.layer = "";
/** @type {string | undefined} */
this.controlProperty = undefined;
/** @type {HTMLElement |undefined} */
this._eoxMap = undefined;
}

/**
Expand Down Expand Up @@ -143,6 +148,41 @@ export class EOxTimeControl extends LitElement {
}
}

/**
* initializes the EOxMap instance
* And stores it in the private property #eoxMap.
*/
firstUpdated() {
this.updateMap();
}

updated(changedProperties) {
if (changedProperties.has("for")) {
this.updateMap();
}
}

updateMap() {
const foundElement = getElement(this.for);

if (foundElement) {
const EoxMap = /** @type {import("@eox/map/main").EOxMap} */ (
foundElement
);
this.eoxMap = EoxMap;
}
}

get eoxMap() {
return this._eoxMap;
}

set eoxMap(value) {
const oldValue = this._eoxMap;
this._eoxMap = value;
this.requestUpdate("eoxMap", oldValue);
}

/**
* @param {number} [step=1]
* @private
Expand Down

0 comments on commit 379d885

Please sign in to comment.