inviton-powerduck 0.0.128 → 0.0.129

package/app/powerduck-system-resources.ts

@@ -83,4 +83,9 @@ export interface IPowerduckSystemResources {
 	signInX: string;
 	signInFigma: string;
 	signInDribble: string;
+	gpsBoundingBoxLabel: string;
+	gpsBoundingBoxX1: string;
+	gpsBoundingBoxX2: string;
+	gpsBoundingBoxY1: string;
+	gpsBoundingBoxY2: string;
 }

package/components/input/gps-bounding-box.tsx

@@ -0,0 +1,113 @@
+import { Component, Prop, toNative } from 'vue-facing-decorator';
+import TsxComponent from '../../app/vuetsx';
+import { ValidationState } from '../../common/static-wrappers/interfaces/validation-interface';
+import BoundingBox from '../../data/bounding-box';
+import FlexContainer from '../form/flex-container';
+import FlexFormItem from '../form/form-item-flex';
+import FormItemWrapper from '../form/form-item-wrapper';
+import OpenStreetMap from '../open-street-map/open-street-map';
+import NumericInput, { NumericInputMode } from './numeric-input';
+import PowerduckState from '../../app/powerduck-state';
+
+interface GpsBoundingBoxInputArgs {
+	bBoxModel: BoundingBox;
+	mandatory?: boolean;
+}
+
+@Component
+class GpsBoundingBoxInputComponent extends TsxComponent<GpsBoundingBoxInputArgs> implements GpsBoundingBoxInputArgs {
+	@Prop() bBoxModel: BoundingBox;
+	@Prop() mandatory?: boolean;
+
+	onChange (field: keyof BoundingBox, value: number) {
+		if (value) {
+			this.bBoxModel[field] = parseFloat(value.toFixed(7));
+		} else {
+			this.bBoxModel[field] = null;
+		}
+	}
+
+	renderInput (
+		h: any,
+		label: string,
+		value: number,
+		onChanged?: (value: number) => void,
+		showClearValueButton?: boolean,
+		validationState?: ValidationState,
+	) {
+		return (
+			<FlexFormItem flexFill={true}>
+				<NumericInput
+					mandatory={this.mandatory}
+					label={label}
+					value={value}
+					step={0.000001}
+					mode={NumericInputMode.Clasic}
+					showClearValueButton={showClearValueButton}
+					validationState={validationState}
+					changed={(e) => {
+						if (onChanged != null) {
+							onChanged(e);
+						}
+					}}
+				/>
+			</FlexFormItem>
+		);
+	}
+
+	render (h) {
+		if (!this.bBoxModel) {
+			return null;
+		}
+
+		return (
+			<div>
+				<FormItemWrapper label={PowerduckState.getResourceValue('gpsBoundingBoxLabel')} mandatory={this.mandatory}>
+					<FlexContainer fullWidthOnMobile={true}>
+						<FlexFormItem>
+							{this.renderInput(
+								h,
+								PowerduckState.getResourceValue('gpsBoundingBoxX1'),
+								this.bBoxModel.x1,
+								e => this.onChange('x1', e),
+							)}
+							{this.renderInput(
+								h,
+								PowerduckState.getResourceValue('gpsBoundingBoxX2'),
+								this.bBoxModel.x2,
+								e => this.onChange('x2', e),
+							)}
+						</FlexFormItem>
+						<FlexFormItem>
+							{this.renderInput(
+								h,
+								PowerduckState.getResourceValue('gpsBoundingBoxY1'),
+								this.bBoxModel.y1,
+								e => this.onChange('y1', e),
+							)}
+							{this.renderInput(
+								h,
+								PowerduckState.getResourceValue('gpsBoundingBoxY2'),
+								this.bBoxModel.y2,
+								e => this.onChange('y2', e),
+							)}
+						</FlexFormItem>
+					</FlexContainer>
+				</FormItemWrapper>
+
+				<FormItemWrapper label={null} mandatory={false}>
+					<div class="rounded">
+						<OpenStreetMap
+							ref="openStreetMap"
+							isCenterHidden={true}
+							bBox={this.bBoxModel}
+						/>
+					</div>
+				</FormItemWrapper>
+			</div>
+		);
+	}
+}
+
+const GpsBoundingBoxInput = toNative(GpsBoundingBoxInputComponent);
+export default GpsBoundingBoxInput;

package/components/open-street-map/open-street-map.tsx

@@ -1,10 +1,11 @@
-import { LGeoJson, LLayerGroup, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet';
+import { LGeoJson, LLayerGroup, LMap, LMarker, LPolygon, LTileLayer } from '@vue-leaflet/vue-leaflet';
 import L from 'leaflet';
 import * as LCluster from 'leaflet.markercluster';
 import { Prop, toNative, Watch } from 'vue-facing-decorator';
 import TsxComponent, { Component } from '../../app/vuetsx';
 import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
 import { ModalUtils } from '../modal/modal-utils';
+import BoundingBox from '../../data/bounding-box';
 import iconUrl from './img/marker-icon.png';
 import GestureHandling from './ts/gesture-handling/gesture-handling';
 import 'leaflet/dist/leaflet.css';
@@ -57,6 +58,7 @@ interface OpenStreetMapClusterOptions {
 interface OpenStreetMapArgs {
 	latitude?: string;
 	longitude?: string;
+	bBox?: BoundingBox;
 	name?: string;
 	address?: string;
 	is16by9?: boolean;
@@ -75,7 +77,7 @@ interface OpenStreetMapArgs {
 }
 
 export class OpenStreetMapHelper {
-	static getMarkerIcon(): L.Icon<L.IconOptions> {
+	static getMarkerIcon (): L.Icon<L.IconOptions> {
 		return L.icon({
 			iconUrl,
 			iconAnchor: [
@@ -109,11 +111,13 @@ export interface GoogleMapRefreshArgs {
 		'l-marker': LMarker,
 		'l-geo-json': LGeoJson,
 		'l-layer-group': LLayerGroup,
+		'l-polygon': LPolygon,
 	},
 })
 export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> implements OpenStreetMapArgs {
 	@Prop() latitude!: string;
 	@Prop() longitude!: string;
+	@Prop() bBox?: BoundingBox;
 	@Prop() name!: string;
 	@Prop() address!: string;
 	@Prop() is16by9!: boolean;
@@ -132,12 +136,14 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 	leafletIcon: any = null;
 	markerClusters: LCluster.MarkerClusterGroup = null;
 
-	mounted() {
+	mounted () {
 		this.initIcon();
 		this.waitForLeaflet().then(() => {
 			ModalUtils.handleModalMountDelay(this, () => {
 				this.initGestureHandling();
 				this.invalidateSize();
+				this.onBoundingBoxChanged();
+
 				if (this.initComplete != null) {
 					this.$nextTick(() => {
 						this.initComplete(this.getLeaflet(), this.getMap());
@@ -147,7 +153,15 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		});
 	}
 
-	async waitForLeaflet(timeout = 15000, interval = 100) {
+	@Watch('bBox', { immediate: false, deep: true })
+	onBoundingBoxChanged () {
+		const bounds = this.getBoundingBoxLatLngBounds();
+		if (bounds) {
+			this.getLeaflet()?.fitBounds(bounds);
+		}
+	}
+
+	async waitForLeaflet (timeout = 15000, interval = 100) {
 		const startTime = Date.now();
 		while (!this.getLeaflet()) {
 			if (Date.now() - startTime > timeout) {
@@ -160,25 +174,25 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		return this.getLeaflet();
 	}
 
-	initIcon() {
+	initIcon () {
 		if (this.leafletIcon == null) {
 			this.leafletIcon = OpenStreetMapHelper.getMarkerIcon();
 		}
 	}
 
 	@Watch('geoJSON')
-	onGeoJsonChanged() {
+	onGeoJsonChanged () {
 		if (this.geoJSONClustering) {
 			this.initCluster();
 		}
 	}
 
 	@Watch('mapUrl')
-	onMapUrlChanged() {
+	onMapUrlChanged () {
 		this.invalidateSize();
 	}
 
-	initGestureHandling() {
+	initGestureHandling () {
 		if (this.gestureHandling == true) {
 			const leaflet = this.getLeaflet();
 			if ((leaflet as any)._gesturesBinder != true) {
@@ -188,10 +202,10 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		}
 	}
 
-	initCluster() {
+	initCluster () {
 		this.markerClusters?.clearLayers();
 		this.markerClusters = new LCluster.MarkerClusterGroup(this.clusterOptions || {
-			iconCreateFunction(cluster) {
+			iconCreateFunction (cluster) {
 				const html = `<div class="cluster-marker ">${cluster.getChildCount()}<div class="pulse-animation"></div></div>`;
 				return L.divIcon({ html, className: 'cluster-icon' });
 			},
@@ -209,7 +223,7 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		}
 	}
 
-	invalidateSize() {
+	invalidateSize () {
 		const leaflet = this.getLeaflet();
 		if (leaflet != null) {
 			this.$nextTick(() => {
@@ -218,41 +232,88 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		}
 	}
 
-	getNumeric(val: string): number {
+	getNumeric (val: string): number {
 		return Number((val || '').toString().split(',').join(''));
 	}
 
-	getZoomValue(): number {
+	getZoomValue (): number {
 		if (this.defaultZoom != null) {
 			return this.defaultZoom;
+		} else if (this.bBox != null) {
+			return undefined;
 		} else {
 			return 16;
 		}
 	}
 
-	getLocPoint() {
+	getCenter () {
+		if (this.bBox != null) {
+			const { x1, x2, y1, y2 } = this.bBox;
+			const lat = (y1 + y2) / 2;
+			const lng = (x1 + x2) / 2;
+			return [lat, lng];
+		}
+
+		const locArr = this.getLocArr();
+		return locArr;
+	}
+
+	getLocPoint () {
 		return {
 			lat: this.getNumeric(this.latitude),
 			lng: this.getNumeric(this.longitude),
 		};
 	}
 
-	getLocArr() {
+	getLocArr () {
 		return [
 			this.getNumeric(this.latitude),
 			this.getNumeric(this.longitude),
 		];
 	}
 
-	getMap() {
+	getMap () {
 		return this.$refs.mainMap;
 	}
 
-	getLeaflet() {
+	getLeaflet () {
 		return (this.getMap() as any)?.leafletObject;
 	}
 
-	render(h) {
+	getBoundingBoxCorners () {
+		if (!this.bBox) {
+			return [];
+		}
+
+		const { x1, x2, y1, y2 } = this.bBox;
+		if ([x1, x2, y1, y2].some(p => p == null)) {
+			return [];
+		}
+
+		const minLat = Math.min(y1, y2);
+		const maxLat = Math.max(y1, y2);
+		const minLng = Math.min(x1, x2);
+		const maxLng = Math.max(x1, x2);
+
+		return [
+			[maxLat, minLng],
+			[maxLat, maxLng],
+			[minLat, maxLng],
+			[minLat, minLng],
+			[maxLat, minLng],
+		];
+	}
+
+	getBoundingBoxLatLngBounds (): L.LatLngBounds {
+		const corners = this.getBoundingBoxCorners();
+		if (corners.length < 2) {
+			return null;
+		}
+
+		return L.latLngBounds(corners);
+	}
+
+	render (h) {
 		if (this.is16by9 == false) {
 			return this.renderLeaflet(h, { height: '100%' });
 		}
@@ -270,17 +331,26 @@ export class OpenStreetMapComponent extends TsxComponent<OpenStreetMapArgs> impl
 		);
 	}
 
-	private renderLeaflet(h, style: object) {
+	private renderLeaflet (h, style: object) {
 		const locArr = this.getLocArr();
 
 		return (
-			<l-map style={style} zoom={this.getZoomValue()} options={this.mapOptions} maxZoom={this.maxZoom} center={locArr} ref="mainMap">
+			<l-map style={style} zoom={this.getZoomValue()} options={this.mapOptions} maxZoom={this.maxZoom} center={this.getCenter()} ref="mainMap">
 				<l-tile-layer url={this.mapUrl} options={this.options} noWrap attribution={'&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'}></l-tile-layer>
 				{!this.isCenterHidden
-				&& <l-marker lat-lng={locArr} icon={this.leafletIcon}></l-marker>}
+					&& <l-marker lat-lng={locArr} icon={this.leafletIcon}></l-marker>}
 
 				{!isNullOrEmpty(this.geoJSON)
-				&& <l-geo-json ref="geoJson" options={this.geoJSONConfig != null && this.geoJSONConfig} geojson={this.geoJSONClustering ? [] : this.geoJSON}></l-geo-json>}
+					&& <l-geo-json ref="geoJson" options={this.geoJSONConfig != null && this.geoJSONConfig} geojson={this.geoJSONClustering ? [] : this.geoJSON}></l-geo-json>}
+
+				{this.bBox && (
+					<l-polygon
+						lat-lngs={this.getBoundingBoxCorners()}
+						color="blue"
+						weight={2}
+						fillOpacity={0.1}
+					/>
+				)}
 
 				{this.$slots.default?.()}
 			</l-map>

package/data/bounding-box.ts

@@ -0,0 +1,6 @@
+export default class BoundingBox {
+	x1: number = null;
+	x2: number = null;
+	y1: number = null;
+	y2: number = null;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.128",
+	"version": "0.0.129",
 	"files": [
 		"app/",
 		"common/",