@mcp-b/geo-openlayers 0.2.0

package/dist/polyline-DXXHbwfm.js

@@ -0,0 +1,89 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { fromLonLat } from "ol/proj.js";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import { Stroke, Style } from "ol/style.js";
+import Feature from "ol/Feature.js";
+import LineString from "ol/geom/LineString.js";
+//#region src/components/polyline/polyline.styles.ts
+var polyline_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/polyline/polyline.ts
+let SigveloOlPolyline = class SigveloOlPolyline extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.positions = [];
+		this.color = "#3388ff";
+		this.width = 3;
+		this.opacity = 1;
+		this.dashArray = [];
+		this._layer = null;
+		this._feature = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [polyline_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-ol-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			this._addLine();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._layer && this._mapEl?.map) this._mapEl.map.removeLayer(this._layer);
+		this._layer = null;
+		this._feature = null;
+	}
+	/** @internal */
+	_toCoords() {
+		return this.positions.map(([lat, lng]) => fromLonLat([lng, lat]));
+	}
+	/** @internal */
+	_hexToRgba(hex, opacity) {
+		return `rgba(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)}, ${opacity})`;
+	}
+	/** @internal */
+	_addLine() {
+		if (!this._mapEl?.map || this.positions.length < 2) return;
+		this._feature = new Feature({ geometry: new LineString(this._toCoords()) });
+		this._layer = new VectorLayer({
+			source: new VectorSource({ features: [this._feature] }),
+			style: new Style({ stroke: new Stroke({
+				color: this._hexToRgba(this.color, this.opacity),
+				width: this.width,
+				lineDash: this.dashArray.length ? this.dashArray : void 0
+			}) })
+		});
+		this._mapEl.map.addLayer(this._layer);
+	}
+	updated(changed) {
+		if (!this._feature || !this._layer) return;
+		if (changed.has("positions")) this._feature.getGeometry().setCoordinates(this._toCoords());
+		if (changed.has("color") || changed.has("width") || changed.has("opacity") || changed.has("dashArray")) this._layer.setStyle(new Style({ stroke: new Stroke({
+			color: this._hexToRgba(this.color, this.opacity),
+			width: this.width,
+			lineDash: this.dashArray.length ? this.dashArray : void 0
+		}) }));
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloOlPolyline.prototype, "positions", void 0);
+__decorate([property()], SigveloOlPolyline.prototype, "color", void 0);
+__decorate([property({ type: Number })], SigveloOlPolyline.prototype, "width", void 0);
+__decorate([property({ type: Number })], SigveloOlPolyline.prototype, "opacity", void 0);
+__decorate([property({ attribute: false })], SigveloOlPolyline.prototype, "dashArray", void 0);
+SigveloOlPolyline = __decorate([customElement("sigvelo-ol-polyline")], SigveloOlPolyline);
+//#endregion
+export { SigveloOlPolyline as t };

package/dist/popup-CpiCysPO.js

@@ -0,0 +1,30 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/popup/popup.styles.ts
+var popup_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/popup/popup.ts
+let SigveloOlPopup = class SigveloOlPopup extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.maxWidth = 300;
+	}
+	static {
+		this.styles = [popup_styles_default];
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({
+	attribute: "max-width",
+	type: Number
+})], SigveloOlPopup.prototype, "maxWidth", void 0);
+SigveloOlPopup = __decorate([customElement("sigvelo-ol-popup")], SigveloOlPopup);
+//#endregion
+export { SigveloOlPopup as t };

package/dist/scale-control-zMLnp2Rt.js

@@ -0,0 +1,57 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import ScaleLine from "ol/control/ScaleLine.js";
+//#region src/components/scale-control/scale-control.styles.ts
+var scale_control_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/scale-control/scale-control.ts
+let SigveloOlScaleControl = class SigveloOlScaleControl extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.units = "metric";
+		this.minWidth = 64;
+		this._control = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [scale_control_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-ol-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			this._addControl();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._control && this._mapEl?.map) this._mapEl.map.removeControl(this._control);
+		this._control = null;
+	}
+	/** @internal */
+	_addControl() {
+		if (!this._mapEl?.map) return;
+		this._control = new ScaleLine({
+			units: this.units,
+			minWidth: this.minWidth
+		});
+		this._mapEl.map.addControl(this._control);
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property()], SigveloOlScaleControl.prototype, "units", void 0);
+__decorate([property({
+	attribute: "min-width",
+	type: Number
+})], SigveloOlScaleControl.prototype, "minWidth", void 0);
+SigveloOlScaleControl = __decorate([customElement("sigvelo-ol-scale-control")], SigveloOlScaleControl);
+//#endregion
+export { SigveloOlScaleControl as t };

package/dist/tilelayer-BAC1OCHe.js

@@ -0,0 +1,73 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import TileLayer from "ol/layer/Tile.js";
+import OSM from "ol/source/OSM.js";
+import XYZ from "ol/source/XYZ.js";
+//#region src/components/tilelayer/tilelayer.styles.ts
+var tilelayer_styles_default = css`
+  :host {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/tilelayer/tilelayer.ts
+let SigveloOlTilelayer = class SigveloOlTilelayer extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.url = "";
+		this.attribution = "";
+		this.opacity = 1;
+		this._layer = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [tilelayer_styles_default];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = this.closest("sigvelo-ol-map");
+		if (this._mapEl) {
+			await this._mapEl.mapReady;
+			this._addLayer();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeLayer();
+	}
+	/** @internal */
+	_addLayer() {
+		if (!this._mapEl?.map) return;
+		const source = this.url ? new XYZ({
+			url: this.url,
+			attributions: this.attribution || void 0
+		}) : new OSM();
+		this._layer = new TileLayer({
+			source,
+			opacity: this.opacity
+		});
+		this._mapEl.map.addLayer(this._layer);
+	}
+	/** @internal */
+	_removeLayer() {
+		if (this._layer && this._mapEl?.map) this._mapEl.map.removeLayer(this._layer);
+		this._layer = null;
+	}
+	updated(changed) {
+		if (changed.has("url")) {
+			this._removeLayer();
+			this._addLayer();
+		}
+		if (changed.has("opacity") && this._layer) this._layer.setOpacity(this.opacity);
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property()], SigveloOlTilelayer.prototype, "url", void 0);
+__decorate([property()], SigveloOlTilelayer.prototype, "attribution", void 0);
+__decorate([property({ type: Number })], SigveloOlTilelayer.prototype, "opacity", void 0);
+SigveloOlTilelayer = __decorate([customElement("sigvelo-ol-tilelayer")], SigveloOlTilelayer);
+//#endregion
+export { SigveloOlTilelayer as t };

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@mcp-b/geo-openlayers",
+  "version": "0.2.0",
+  "description": "OpenLayers web components for Sigvelo, built with Lit.",
+  "keywords": [
+    "custom-elements",
+    "geospatial",
+    "gis",
+    "lit-element",
+    "maps",
+    "ogc",
+    "openlayers",
+    "web-components"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WebMCP-org/design-system.git",
+    "directory": "packages/geo-openlayers"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/*": "./dist/components/*",
+    "./custom-elements.json": "./dist/docs/custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@mcp-b/geo-support": "0.2.0",
+    "@mcp-b/wc-support": "0.2.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@storybook/addon-a11y": "^10.5.2",
+    "@storybook/addon-docs": "^10.5.2",
+    "@storybook/addon-vitest": "^10.5.2",
+    "@storybook/web-components-vite": "10.5.2",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@wc-toolkit/cem-inheritance": "^1.2.2",
+    "@wc-toolkit/cem-sorter": "^1.0.1",
+    "@wc-toolkit/type-parser": "^1.2.0",
+    "ol": "^10.5.0",
+    "playwright": "~1.61.0",
+    "storybook": "^10.5.2",
+    "tinyglobby": "^0.2.15",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vite-plugin-static-copy": "^3.3.0",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "lit-html": "^3.0.0",
+    "ol": "^10.0.0"
+  },
+  "customElements": "dist/docs/custom-elements.json",
+  "scripts": {
+    "analyze": "cem analyze",
+    "analyze:dev": "cem analyze --watch",
+    "build": "tsc -p tsconfig.prod.json && vp run build:lib && vp run analyze",
+    "build:lib": "vp pack",
+    "storybook": "vp run @mcp-b/web-components#storybook",
+    "test": "vp run @mcp-b/web-components#test",
+    "typecheck": "tsc --noEmit"
+  }
+}