- npm updates, remove rxjs

- add draw.component.vue
- only load needed leaflet classes into map.component.vue an Submitter/Create.vue
- rename js/store.Map.ts to js/Stores/map.service.ts
-

resources/js/Components/Map/EventEmitter.ts

@@ -1,4 +1,4 @@
-import {PartialObserver, Subject, Subscription} from 'rxjs';
+// import { PartialObserver, Subject, Subscription } from 'rxjs';
 
 /**
  * Use in components with the `@Output` directive to emit custom events
@@ -51,103 +51,149 @@ import {PartialObserver, Subject, Subscription} from 'rxjs';
  * @see [Observables in Angular](guide/observables-in-angular)
  * @publicApi
  */
-export interface EventEmitter<T> extends Subject<T> {
-  /**
-   * @internal
-   */
-  __isAsync: boolean;
+// export interface EventEmitter<T> extends Subject<T> {
+//   /**
+//    * @internal
+//    */
+//   __isAsync: boolean;
 
-  /**
-   * Creates an instance of this class that can
-   * deliver events synchronously or asynchronously.
-   *
-   * @param [isAsync=false] When true, deliver events asynchronously.
-   *
-   */
-  new(isAsync?: boolean): EventEmitter<T>;
+//   /**
+//    * Creates an instance of this class that can
+//    * deliver events synchronously or asynchronously.
+//    *
+//    * @param [isAsync=false] When true, deliver events asynchronously.
+//    *
+//    */
+//   new(isAsync?: boolean): EventEmitter<T>;
 
-  /**
-   * Emits an event containing a given value.
-   * @param value The value to emit.
-   */
-  emit(value?: T): void;
+//   /**
+//    * Emits an event containing a given value.
+//    * @param value The value to emit.
+//    */
+//   emit(value?: T): void;
 
-  /**
-   * Registers handlers for events emitted by this instance.
-   * @param next When supplied, a custom handler for emitted events.
-   * @param error When supplied, a custom handler for an error notification from this emitter.
-   * @param complete When supplied, a custom handler for a completion notification from this
-   *     emitter.
-   */
-  subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void):
-      Subscription;
-  /**
-   * Registers handlers for events emitted by this instance.
-   * @param observerOrNext When supplied, a custom handler for emitted events, or an observer
-   *     object.
-   * @param error When supplied, a custom handler for an error notification from this emitter.
-   * @param complete When supplied, a custom handler for a completion notification from this
-   *     emitter.
-   */
-  subscribe(observerOrNext?: any, error?: any, complete?: any): Subscription;
+//   /**
+//    * Registers handlers for events emitted by this instance.
+//    * @param next When supplied, a custom handler for emitted events.
+//    * @param error When supplied, a custom handler for an error notification from this emitter.
+//    * @param complete When supplied, a custom handler for a completion notification from this
+//    *     emitter.
+//    */
+//   subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void):
+//       Subscription;
+//   /**
+//    * Registers handlers for events emitted by this instance.
+//    * @param observerOrNext When supplied, a custom handler for emitted events, or an observer
+//    *     object.
+//    * @param error When supplied, a custom handler for an error notification from this emitter.
+//    * @param complete When supplied, a custom handler for a completion notification from this
+//    *     emitter.
+//    */
+//   subscribe(observerOrNext?: any, error?: any, complete?: any): Subscription;
+// }
+
+// class EventEmitter_ extends Subject<any> {
+//   __isAsync: boolean;  // tslint:disable-line
+
+//   constructor(isAsync: boolean = false) {
+//     super();
+//     this.__isAsync = isAsync;
+//   }
+
+//   emit(value?: any) {
+//     super.next(value);
+//   }
+
+//   override subscribe(observerOrNext?: any, error?: any, complete?: any): Subscription {
+//     let nextFn = observerOrNext;
+//     let errorFn = error || (() => null);
+//     let completeFn = complete;
+
+//     if (observerOrNext && typeof observerOrNext === 'object') {
+//       const observer = observerOrNext as PartialObserver<unknown>;
+//       nextFn = observer.next?.bind(observer);
+//       errorFn = observer.error?.bind(observer);
+//       completeFn = observer.complete?.bind(observer);
+//     }
+
+//     if (this.__isAsync) {
+//       errorFn = _wrapInTimeout(errorFn);
+
+//       if (nextFn) {
+//         nextFn = _wrapInTimeout(nextFn);
+//       }
+
+//       if (completeFn) {
+//         completeFn = _wrapInTimeout(completeFn);
+//       }
+//     }
+
+//     const sink = super.subscribe({next: nextFn, error: errorFn, complete: completeFn});
+
+//     if (observerOrNext instanceof Subscription) {
+//       observerOrNext.add(sink);
+//     }
+
+//     return sink;
+//   }
+// }
+
+// function _wrapInTimeout(fn: (value: unknown) => any) {
+//   return (value: unknown) => {
+//     setTimeout(fn, undefined, value);
+//   };
+// }
+
+// /**
+//  * @publicApi
+//  */
+// export const EventEmitter: {
+//   new (isAsync?: boolean): EventEmitter<any>; new<T>(isAsync?: boolean): EventEmitter<T>;
+//   readonly prototype: EventEmitter<any>;
+// } = EventEmitter_ as any;
+
+export interface Listener<T> {
+    (event: T): any;
 }
 
-class EventEmitter_ extends Subject<any> {
-  __isAsync: boolean;  // tslint:disable-line
-
-  constructor(isAsync: boolean = false) {
-    super();
-    this.__isAsync = isAsync;
-  }
-
-  emit(value?: any) {
-    super.next(value);
-  }
-
-  override subscribe(observerOrNext?: any, error?: any, complete?: any): Subscription {
-    let nextFn = observerOrNext;
-    let errorFn = error || (() => null);
-    let completeFn = complete;
-
-    if (observerOrNext && typeof observerOrNext === 'object') {
-      const observer = observerOrNext as PartialObserver<unknown>;
-      nextFn = observer.next?.bind(observer);
-      errorFn = observer.error?.bind(observer);
-      completeFn = observer.complete?.bind(observer);
-    }
-
-    if (this.__isAsync) {
-      errorFn = _wrapInTimeout(errorFn);
-
-      if (nextFn) {
-        nextFn = _wrapInTimeout(nextFn);
-      }
-
-      if (completeFn) {
-        completeFn = _wrapInTimeout(completeFn);
-      }
-    }
-
-    const sink = super.subscribe({next: nextFn, error: errorFn, complete: completeFn});
-
-    if (observerOrNext instanceof Subscription) {
-      observerOrNext.add(sink);
-    }
-
-    return sink;
-  }
+export interface Disposable {
+    dispose();
 }
 
-function _wrapInTimeout(fn: (value: unknown) => any) {
-  return (value: unknown) => {
-    setTimeout(fn, undefined, value);
-  };
-}
+/** passes through events as they happen. You will not get events from before you start listening */
+export class EventEmitter<T> {
+    private listeners: Listener<T>[] = [];
+    private listenersOncer: Listener<T>[] = [];
 
-/**
- * @publicApi
- */
-export const EventEmitter: {
-  new (isAsync?: boolean): EventEmitter<any>; new<T>(isAsync?: boolean): EventEmitter<T>;
-  readonly prototype: EventEmitter<any>;
-} = EventEmitter_ as any;
+    on = (listener: Listener<T>): Disposable => {
+        this.listeners.push(listener);
+        return {
+            dispose: () => this.off(listener),
+        };
+    };
+
+    once = (listener: Listener<T>): void => {
+        this.listenersOncer.push(listener);
+    };
+
+    off = (listener: Listener<T>) => {
+        var callbackIndex = this.listeners.indexOf(listener);
+        if (callbackIndex > -1) this.listeners.splice(callbackIndex, 1);
+    };
+
+    emit = (event: T) => {
+        /** Update any general listeners */
+        this.listeners.forEach((listener) => listener(event));
+
+        /** Clear the `once` queue */
+        if (this.listenersOncer.length > 0) {
+            const toCall = this.listenersOncer;
+            this.listenersOncer = [];
+            toCall.forEach((listener) => listener(event));
+        }
+    };
+
+    pipe = (te: EventEmitter<T>): Disposable => {
+        return this.on((e) => te.emit(e));
+    };
+}

resources/js/Components/Map/LayerOptions.ts

@@ -0,0 +1,14 @@
+import type { Layer } from 'leaflet/src/layer/Layer';
+
+// https://github.com/52North/helgoland-toolbox/blob/develop/libs/map/src/lib/base/map-options.ts
+
+export interface LayerOptions {
+    label: string;
+    visible: boolean;
+    layer: Layer;
+}
+
+// export type LayerMap = Map<string, LayerOptions>;
+
+export class LayerMap extends Map<string, LayerOptions> {
+ }

resources/js/Components/Map/MapOptions.ts

@@ -1,14 +1,61 @@
-import { Layer } from 'leaflet';
+import type { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
+import type { LatLngExpression } from 'leaflet/src/geo/LatLng';
+import type { Layer } from 'leaflet/src/layer/Layer';
+import type { CRS } from 'leaflet/src/geo/crs/CRS';
 
-// https://github.com/52North/helgoland-toolbox/blob/develop/libs/map/src/lib/base/map-options.ts
+export interface MapOptions {
+    preferCanvas?: boolean | undefined;
 
-export interface LayerOptions {
-    label: string;
-    visible: boolean;
-    layer: Layer;
+    // Control options
+    attributionControl?: boolean | undefined;
+    zoomControl?: boolean | undefined;
+
+    // Interaction options
+    closePopupOnClick?: boolean | undefined;
+    zoomSnap?: number | undefined;
+    zoomDelta?: number | undefined;
+    trackResize?: boolean | undefined;
+    boxZoom?: boolean | undefined;
+    // doubleClickZoom?: Zoom | undefined;
+    dragging?: boolean | undefined;
+
+    // Map state options
+    crs?: CRS | undefined;
+    center?: LatLngExpression | undefined;
+    zoom?: number | undefined;
+    minZoom?: number | undefined;
+    maxZoom?: number | undefined;
+    layers?: Layer[] | undefined;
+    maxBounds?: LatLngBoundsExpression | undefined;
+    // renderer?: Renderer | undefined;
+
+    // Animation options
+    fadeAnimation?: boolean | undefined;
+    markerZoomAnimation?: boolean | undefined;
+    transform3DLimit?: number | undefined;
+    zoomAnimation?: boolean | undefined;
+    zoomAnimationThreshold?: number | undefined;
+
+    // Panning inertia options
+    inertia?: boolean | undefined;
+    inertiaDeceleration?: number | undefined;
+    inertiaMaxSpeed?: number | undefined;
+    easeLinearity?: number | undefined;
+    worldCopyJump?: boolean | undefined;
+    maxBoundsViscosity?: number | undefined;
+
+    // Keyboard navigation options
+    keyboard?: boolean | undefined;
+    keyboardPanDelta?: number | undefined;
+
+    // Mousewheel options
+    // scrollWheelZoom?: Zoom | undefined;
+    wheelDebounceTime?: number | undefined;
+    wheelPxPerZoomLevel?: number | undefined;
+
+    // Touch interaction options
+    tap?: boolean | undefined;
+    tapTolerance?: number | undefined;
+    // touchZoom?: Zoom | undefined;
+    bounceAtZoomLimits?: boolean | undefined;
 }
-
-// export type LayerMap = Map<string, LayerOptions>;
-
-export class LayerMap extends Map<string, LayerOptions> {
- }

resources/js/Components/Map/draw.component.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="gba-control-draw btn-group-vertical map-control">
+        <!-- <button type="button" class="button is-light is-small" (click)="locateUser()" [ngClass]="isToggled ? 'is-primary': 'is-active'">
+      <fa-icon [icon]="faSearchLocation"></fa-icon>
+    </button> -->
+    <!--  -->
+        <button
+            ref="inputDraw"
+            class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
+            type="button"
+            :class="[isToggled ? 'cursor-not-allowed bg-gray-200' : 'bg-teal-50 is-active']"
+            @click.prevent="draw"
+        >
+            <BaseIcon v-if="mdiDrawPen" :path="mdiDrawPen" />
+        </button>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator';
+
+import BaseIcon from '@/Components/BaseIcon.vue';
+import { mdiDrawPen } from '@mdi/js';
+
+@Component({
+    name: 'zoom-control',
+    components: {
+        BaseIcon,
+    },
+})
+export default class DrawControlComponent extends Vue {
+    mdiDrawPen = mdiDrawPen;
+
+
+
+    /**
+     * Connect map id.
+     */
+    @Prop() public mapId: string;
+
+    public isToggled = false;
+
+    // @Ref('inputDraw') private _inputDraw: HTMLElement;
+
+    public draw() {
+        this.isToggled = !this.isToggled;
+    }
+}
+</script>
+
+<style lang="css">
+.gba-control-draw {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    border-radius: 4px;
+    position: absolute;
+    left: 10px;
+    top: 100px;
+    z-index: 500;
+}
+
+.btn-group-vertical button {
+    display: block;
+
+    margin-left: 0;
+    margin-top: 0.5em;
+}
+</style>

resources/js/Components/Map/map.component.vue

@@ -3,6 +3,7 @@
         <!-- <Map className="h-36" :center="state.center" :zoom="state.zoom"> // map component content </Map> -->
         <div :id="mapId" class="map-container mapDesktop rounded">
             <ZoomControlComponent :mapId="mapId"></ZoomControlComponent>
+            <DrawControlComponent :mapId="mapId"></DrawControlComponent>
         </div>
     </div>
 </template>
@@ -11,10 +12,21 @@
 import { EventEmitter } from './EventEmitter';
 import { Component, Vue, Prop } from 'vue-facing-decorator';
 // import type { Coverage } from '@/Dataset';
-import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, latLng, latLngBounds, FeatureGroup } from 'leaflet';
-import { LayerOptions, LayerMap } from './MapOptions';
-import { MapService } from '@/Stores/map';
+// import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, latLng, latLngBounds, FeatureGroup } from 'leaflet';
+import { Map } from 'leaflet/src/map/index';
+import { Control } from 'leaflet/src/control/Control';
+import { LatLngBoundsExpression, toLatLngBounds } from 'leaflet/src/geo/LatLngBounds';
+import { toLatLng } from 'leaflet/src/geo/LatLng';
+import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
+import { Attribution } from 'leaflet/src/control/Control.Attribution';
+// import { Attribution } from 'leaflet';
+// import { FeatureGroup } from 'leaflet/src/layer/FeatureGroup';
+
+import { MapOptions } from './MapOptions';
+import { LayerOptions, LayerMap } from './LayerOptions';
+import { MapService } from '@/Stores/map.service';
 import ZoomControlComponent from './zoom.component.vue';
+import DrawControlComponent from './draw.component.vue';
 
 const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
 // const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
@@ -24,6 +36,7 @@ const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://o
     name: 'MapComponent',
     components: {
         ZoomControlComponent,
+        DrawControlComponent
     },
 })
 export default class MapComponent extends Vue {
@@ -64,7 +77,7 @@ export default class MapComponent extends Vue {
     public onMapInitializedEvent: EventEmitter<string> = new EventEmitter<string>();
 
     protected map!: Map;
-    protected drawnItems!: FeatureGroup<any>;
+    // protected drawnItems!: FeatureGroup<any>;
 
     // @Prop({ type: Object })
     // geolocation: Coverage;
@@ -91,14 +104,17 @@ export default class MapComponent extends Vue {
         // if (this.fitBounds) {
         //     this.map.fitBounds(this.fitBounds);
         // }
-        const southWest = latLng(46.5, 9.9);
-        const northEast = latLng(48.9, 16.9);
-        const bounds = latLngBounds(southWest, northEast);
+        const southWest = toLatLng(46.5, 9.9);
+        const northEast = toLatLng(48.9, 16.9);
+        const bounds = toLatLngBounds(southWest, northEast);
         map.fitBounds(bounds);
 
+        const attributionControl = new Attribution().addTo(this.map);
+        attributionControl.setPrefix(false);
+
         // Initialise the FeatureGroup to store editable layers
-        let drawnItems = (this.drawnItems = new FeatureGroup());
-        map.addLayer(drawnItems);
+        // let drawnItems = (this.drawnItems = new FeatureGroup());
+        // map.addLayer(drawnItems);
     }
 
     private addBaseMap(layerOptions?: LayerOptions): void {
@@ -108,7 +124,7 @@ export default class MapComponent extends Vue {
                 //         subdomains: ['maps', 'maps1', 'maps2', 'maps3', 'maps4'],
                 //         attribution: 'Datenquelle: <a href="http://www.basemap.at/">basemap.at</a>',
                 // });
-                let osmGgray = tileLayer.wms('https://ows.terrestris.de/osm-gray/service', {
+                let osmGgray = tileLayerWMS('https://ows.terrestris.de/osm-gray/service', {
                     format: 'image/png',
                     attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
                     layers: 'OSM-WMS',
@@ -118,7 +134,6 @@ export default class MapComponent extends Vue {
                     visible: true,
                     layer: osmGgray,
                 };
-                this.map.attributionControl.setPrefix(false);
                 layerOptions.layer.addTo(this.map);
             }
         }

resources/js/Components/Map/zoom.component.vue

@@ -1,9 +1,5 @@
 <template>
     <div class="gba-control-zoom btn-group-vertical">
-        <!-- <button ref="inputPlus" type="button" class="button is-light is-small" :click.prevent="zoomIn">
-            <fa-icon [icon]="faPlus"></fa-icon>
-        </button> -->
-        <!-- <BaseButton ref="inputPlus" :icon="mdiPlus" color="white" rounded small @click.prevent="zoomIn" /> -->
         <button
             ref="inputPlus"
             class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
@@ -26,7 +22,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Ref } from 'vue-facing-decorator';
-import { MapService } from '@/Stores/map';
+import { MapService } from '@/Stores/map.service';
 
 import BaseIcon from '@/Components/BaseIcon.vue';
 import { mdiPlus, mdiMinus } from '@mdi/js';
@@ -34,7 +30,7 @@ import { mdiPlus, mdiMinus } from '@mdi/js';
 @Component({
     name: 'zoom-control',
     components: {
-        BaseIcon       
+        BaseIcon,
     },
 })
 export default class ZoomControlComponent extends Vue {
@@ -50,6 +46,16 @@ export default class ZoomControlComponent extends Vue {
     @Ref('inputMinus') private _inpuMinus: HTMLElement;
 
     mapService = MapService();
+    map;
+
+    // mounted() {
+    //     let map = (this.map = this.mapService.getMap(this.mapId));
+    //     map.on('zoomend zoomlevelschange', this.updateDisabled, this);
+    // }
+
+    // unmounted() {
+    //     this.map.off('zoomend zoomlevelschange');
+    // }
 
     public zoomIn() {
         let map = this.mapService.getMap(this.mapId);

resources/js/Components/NavBar.vue

@@ -34,7 +34,7 @@ import UserAvatarCurrentUser from '@/Components/UserAvatarCurrentUser.vue';
 import BaseIcon from '@/Components/BaseIcon.vue';
 import NavBarSearch from '@/Components/NavBarSearch.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
-import IUser from "App/Models/User";
+import type User from "App/Models/User";
 
 // const mainStore = MainService();
 // const userName = computed(() =>mainStore.userName);
@@ -50,8 +50,8 @@ const styleService = StyleService();
 // });
 // const userName = computed(() => usePage().props.user.login)
 
-const user: ComputedRef<IUser>= computed(() => {
-	return usePage().props.authUser as IUser;
+const user: ComputedRef<User>= computed(() => {
+	return usePage().props.authUser as User;
 });
 // const userName = computed(() => props.user.login)