-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat: Introduce Layercontrol datetime tool (#1162)
* feat: introduce `datetime` tool * chore: clock icon * fix: add datetime to default tools * feat: introduce `disablePlay` and `slider` to `layerDatetime` * chore: format * fix: tools order * fix: return layer def on `datetime:updated` * fix: adapt story * chore: format * chore(docs): add basic docs for layerDateTime * fix: mirror timecontrol API naming --------- Co-authored-by: silvester-pari <silvester.pari@eox.at>
- Loading branch information
1 parent
a1a2fcb
commit 6df8daa
Showing
11 changed files
with
342 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import { LitElement, html } from "lit"; | ||
| import { when } from "lit/directives/when.js"; | ||
|
|
||
| /** | ||
| * `EOxLayerControlLayerDatetime` is a component that handles date time options for layers using eox-timecontrol. | ||
| * It triggers an event of the currently selected datetime value; allowing users to show and update a specific layer for a specific time. | ||
| * | ||
| * | ||
| * @element eox-layercontrol-layer-datetime | ||
| * @extends LitElement | ||
| */ | ||
| export class EOxLayerControlLayerDatetime extends LitElement { | ||
| // Define static properties for the component | ||
| static properties = { | ||
| unstyled: { type: Boolean }, | ||
| noShadow: { type: Boolean }, | ||
| layerDatetime: { attribute: false }, | ||
| layer: { attribute: false }, | ||
| }; | ||
|
|
||
| constructor() { | ||
| super(); | ||
|
|
||
| /** | ||
| * Render the element without additional styles | ||
| * | ||
| * @type {Boolean} | ||
| */ | ||
| this.unstyled = false; | ||
|
|
||
| /** | ||
| * Renders the element without a shadow root | ||
| * | ||
| * @type {Boolean} | ||
| */ | ||
| this.noShadow = false; | ||
|
|
||
| /** | ||
| * Layer config for eox-jsonform | ||
| * | ||
| * @type {{ | ||
| * disablePlay?: boolean; | ||
| * slider?: boolean; | ||
| * currentStep: string|number; | ||
| * controlValues: (string|number)[] | ||
| * }} | ||
| */ | ||
| this.layerDatetime = null; | ||
|
|
||
| /** | ||
| * The native OL layer | ||
| * | ||
| * @type {import("ol/layer").Layer} | ||
| * @see {@link https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer-Layer.html} | ||
| */ | ||
| this.layer = null; | ||
| } | ||
|
|
||
| /** | ||
| * Overrides createRenderRoot to handle shadow DOM creation based on the noShadow property. | ||
| */ | ||
| createRenderRoot() { | ||
| return this.noShadow ? this : super.createRenderRoot(); | ||
| } | ||
|
|
||
| /** | ||
| * Handles timecontrol Stepchange & | ||
| * triggers `datetime:updated` event on step change | ||
| * | ||
| * @param {CustomEvent<{currentStep:string|number}>} evt | ||
| **/ | ||
| #handleStepChange(evt) { | ||
| this.dispatchEvent( | ||
| new CustomEvent("datetime:updated", { | ||
| bubbles: true, | ||
| detail: { | ||
| datetime: evt.detail.currentStep, | ||
| layer: this.layer, | ||
| }, | ||
| }) | ||
| ); | ||
|
|
||
| this.layerDatetime.currentStep = evt.detail.currentStep; | ||
| this.requestUpdate(); | ||
| } | ||
|
|
||
| /** | ||
| * Renders a Time Control for datetime options of a layer. | ||
| */ | ||
| render() { | ||
| if (!customElements.get("eox-timecontrol")) { | ||
| console.error( | ||
| "Please import @eox/timecontrol in order to use layerDatetime" | ||
| ); | ||
| } | ||
| return html` | ||
| <style> | ||
| ${this.#styleBasic} | ||
| ${!this.unstyled && this.#styleEOX} | ||
| </style> | ||
| ${when( | ||
| this.layerDatetime, | ||
| () => html` | ||
| <!-- Render a Timecontrol for layer date time --> | ||
| <eox-timecontrol | ||
| ?unstyled=${this.unstyled} | ||
| .for=${undefined} | ||
| .layer=${undefined} | ||
| .slider=${this.layerDatetime.slider ?? false} | ||
| .disablePlay=${this.layerDatetime.disablePlay ?? false} | ||
| .controlValues=${this.layerDatetime.controlValues} | ||
| .controlProperty=${undefined} | ||
| current-step=${this.layerDatetime.currentStep} | ||
| @stepchange=${this.#handleStepChange} | ||
| ></eox-timecontrol> | ||
| ` | ||
| )} | ||
| `; | ||
| } | ||
|
|
||
| #styleBasic = ``; | ||
| #styleEOX = ``; | ||
| } | ||
|
|
||
| customElements.define( | ||
| "eox-layercontrol-layer-datetime", | ||
| EOxLayerControlLayerDatetime | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { html } from "lit"; | ||
| import { | ||
| STORIES_LAYER_VESSEL_DENSITY_CARGO, | ||
| STORIES_MAP_STYLE, | ||
| STORIES_LAYER_TERRAIN_LIGHT, | ||
| } from "../src/enums"; | ||
|
|
||
| export const LayerDateTime = { | ||
| args: { | ||
| /** @param {CustomEvent<{datetime:string|number,layer:import("ol/layer").Layer}>} evt */ | ||
| onDatetimeUpdated: (evt) => { | ||
| evt.detail.layer.getSource().updateParams({ TIME: evt.detail.datetime }); | ||
| }, | ||
| }, | ||
| render: (args) => html` | ||
| <eox-layercontrol | ||
| .tools=${["datetime"]} | ||
| for="eox-map#datetime" | ||
| @datetime:updated=${args.onDatetimeUpdated} | ||
| ></eox-layercontrol> | ||
| <hr /> | ||
| <eox-map | ||
| .center=${[2000000, 8000000]} | ||
| .zoom=${4} | ||
| id="datetime" | ||
| .style=${STORIES_MAP_STYLE} | ||
| .layers=${[ | ||
| STORIES_LAYER_VESSEL_DENSITY_CARGO, | ||
| STORIES_LAYER_TERRAIN_LIGHT, | ||
| ]} | ||
| > | ||
| </eox-map> | ||
| `, | ||
| }; | ||
|
|
||
| export default LayerDateTime; |
Oops, something went wrong.