AW6241 ng-18 adopt ng-openlayers

projects/ng-openlayers/src/lib/interactions/default.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { defaults, Interaction } from 'ol/interaction';
+import { Collection } from 'ol';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-default',
+  template: '',
+})
+export class DefaultInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  altShiftDragRotate: boolean;
+  @Input()
+  onFocusOnly: boolean;
+  @Input()
+  doubleClickZoom: boolean;
+  @Input()
+  keyboard: boolean;
+  @Input()
+  mouseWheelZoom: boolean;
+  @Input()
+  shiftDragZoom: boolean;
+  @Input()
+  dragPan: boolean;
+  @Input()
+  pinchRotate: boolean;
+  @Input()
+  pinchZoom: boolean;
+  @Input()
+  zoomDelta: number;
+  @Input()
+  zoomDuration: number;
+
+  instance: Collection<Interaction>;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = defaults(this);
+    this.instance.forEach((i) => this.map.instance.addInteraction(i));
+  }
+
+  ngOnDestroy() {
+    this.instance.forEach((i) => this.map.instance.removeInteraction(i));
+  }
+}

projects/ng-openlayers/src/lib/interactions/doubleclickzoom.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { DoubleClickZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-doubleclickzoom',
+  template: '',
+})
+export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  duration: number;
+  @Input()
+  delta: number;
+
+  instance: DoubleClickZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DoubleClickZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/draganddrop.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { DragAndDrop } from 'ol/interaction';
+import FeatureFormat from 'ol/format/Feature';
+import { MapComponent } from '../map.component';
+import { ProjectionLike } from 'ol/proj';
+
+@Component({
+  selector: 'aol-interaction-draganddrop',
+  template: '',
+})
+export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  formatConstructors: FeatureFormat[];
+  @Input()
+  projection: ProjectionLike;
+  @Input()
+  target: HTMLElement;
+
+  instance: DragAndDrop;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragAndDrop(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/dragbox.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { DragBox } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
+import { EndCondition } from 'ol/interaction/DragBox';
+
+@Component({
+  selector: 'aol-interaction-dragbox',
+  template: '',
+})
+export class DragBoxInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  className: string;
+  @Input()
+  condition: Condition;
+  @Input()
+  boxEndCondition: EndCondition;
+
+  instance: DragBox;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragBox(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/dragpan.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { DragPan } from 'ol/interaction';
+import Kinetic from 'ol/Kinetic';
+import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
+
+@Component({
+  selector: 'aol-interaction-dragpan',
+  template: '',
+})
+export class DragPanInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  condition: Condition;
+  @Input()
+  kinetic: Kinetic;
+
+  instance: DragPan;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragPan(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/dragrotate.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { DragRotate } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
+
+@Component({
+  selector: 'aol-interaction-dragrotate',
+  template: '',
+})
+export class DragRotateInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  condition: Condition;
+  @Input()
+  duration: number;
+
+  instance: DragRotate;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragRotate(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/dragrotateandzoom.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { DragRotateAndZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
+
+@Component({
+  selector: 'aol-interaction-dragrotateandzoom',
+  template: '',
+})
+export class DragRotateAndZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  condition: Condition;
+  @Input()
+  duration: number;
+
+  instance: DragRotateAndZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragRotateAndZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/dragzoom.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { DragZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
+
+@Component({
+  selector: 'aol-interaction-dragzoom',
+  template: '',
+})
+export class DragZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  className: string;
+  @Input()
+  condition: Condition;
+  @Input()
+  duration: number;
+  @Input()
+  out: boolean;
+
+  instance: DragZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new DragZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/draw.component.ts

@@ -0,0 +1,84 @@
+import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core';
+import { MapComponent } from '../map.component';
+import { Draw } from 'ol/interaction';
+import { Collection, Feature } from 'ol';
+import { Vector } from 'ol/source';
+import { Style } from 'ol/style';
+import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
+import { StyleFunction } from 'ol/style/Style';
+import { Condition } from 'ol/events/condition';
+import { Type } from 'ol/geom/Geometry';
+import { ObjectEvent } from 'ol/Object';
+import BaseEvent from 'ol/events/Event';
+
+@Component({
+  selector: 'aol-interaction-draw',
+  template: '',
+})
+export class DrawInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  clickTolerance?: number;
+  @Input()
+  features?: Collection<Feature>;
+  @Input()
+  source?: Vector;
+  @Input()
+  snapTolerance?: number;
+  @Input()
+  type: Type;
+  @Input()
+  maxPoints?: number;
+  @Input()
+  minPoints?: number;
+  @Input()
+  finishCondition?: Condition;
+  @Input()
+  style?: Style | Style[] | StyleFunction;
+  @Input()
+  geometryFunction?: GeometryFunction;
+  @Input()
+  geometryName?: string;
+  @Input()
+  condition?: Condition;
+  @Input()
+  freehandCondition?: Condition;
+  @Input()
+  freehand?: boolean;
+  @Input()
+  wrapX?: boolean;
+
+  @Output()
+  olChange = new EventEmitter<DrawEvent>();
+  @Output()
+  olChangeActive = new EventEmitter<ObjectEvent>();
+  @Output()
+  olDrawAbort = new EventEmitter<DrawEvent>();
+  @Output()
+  drawEnd = new EventEmitter<DrawEvent>();
+  @Output()
+  drawStart = new EventEmitter<DrawEvent>();
+  @Output()
+  olError = new EventEmitter<BaseEvent>();
+  @Output()
+  propertyChange = new EventEmitter<ObjectEvent>();
+
+  instance: Draw;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new Draw(this);
+    this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
+    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
+    this.instance.on('drawabort', (event: DrawEvent) => this.olDrawAbort.emit(event));
+    this.instance.on('drawend', (event: DrawEvent) => this.drawEnd.emit(event));
+    this.instance.on('drawstart', (event: DrawEvent) => this.drawStart.emit(event));
+    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
+    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/keyboardpan.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { KeyboardPan } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-keyboardpan',
+  template: '',
+})
+export class KeyboardPanInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  duration: number;
+  @Input()
+  pixelDelta: number;
+
+  instance: KeyboardPan;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new KeyboardPan(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/keyboardzoom.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { KeyboardZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-keyboardpan',
+  template: '',
+})
+export class KeyboardZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  duration: number;
+  @Input()
+  delta: number;
+
+  instance: KeyboardZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new KeyboardZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/modify.component.ts

@@ -0,0 +1,65 @@
+import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MapComponent } from '../map.component';
+import { Modify } from 'ol/interaction';
+import { Collection, Feature } from 'ol';
+import { Style } from 'ol/style';
+import { Vector } from 'ol/source';
+import { ModifyEvent } from 'ol/interaction/Modify';
+import { StyleFunction } from 'ol/style/Style';
+import { Condition } from 'ol/events/condition';
+import { ObjectEvent } from 'ol/Object';
+import { DrawEvent } from 'ol/interaction/Draw';
+import BaseEvent from 'ol/events/Event';
+
+@Component({
+  selector: 'aol-interaction-modify',
+  template: '',
+})
+export class ModifyInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  condition?: Condition;
+  @Input()
+  deleteCondition?: Condition;
+  @Input()
+  pixelTolerance?: number;
+  @Input()
+  style?: Style | Style[] | StyleFunction;
+  @Input()
+  features: Collection<Feature>;
+  @Input()
+  wrapX?: boolean;
+  @Input()
+  source?: Vector;
+
+  @Output()
+  olChange = new EventEmitter<DrawEvent>();
+  @Output()
+  olChangeActive = new EventEmitter<ObjectEvent>();
+  @Output()
+  olError = new EventEmitter<BaseEvent>();
+  @Output()
+  olModifyEnd = new EventEmitter<ModifyEvent>();
+  @Output()
+  olModifyStart = new EventEmitter<ModifyEvent>();
+  @Output()
+  propertyChange = new EventEmitter<ObjectEvent>();
+
+  instance: Modify;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new Modify(this);
+    this.instance.on('change', (event: DrawEvent) => this.olChange.emit(event));
+    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
+    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
+    this.instance.on('modifyend', (event: ModifyEvent) => this.olModifyEnd.emit(event));
+    this.instance.on('modifystart', (event: ModifyEvent) => this.olModifyStart.emit(event));
+    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/mousewheelzoom.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { MouseWheelZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-mousewheelzoom',
+  template: '',
+})
+export class MouseWheelZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  duration: number;
+  @Input()
+  timeout: number;
+  @Input()
+  useAnchor: boolean;
+
+  instance: MouseWheelZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new MouseWheelZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/pinchzoom.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { PinchZoom } from 'ol/interaction';
+import { MapComponent } from '../map.component';
+
+@Component({
+  selector: 'aol-interaction-pinchzoom',
+  template: '',
+})
+export class PinchZoomInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  duration: number;
+  @Input()
+  constrainResolution: boolean;
+
+  instance: PinchZoom;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new PinchZoom(this);
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/select.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MapComponent } from '../map.component';
+import { Select } from 'ol/interaction';
+import { Layer } from 'ol/layer';
+import { Style } from 'ol/style';
+import { Collection, Feature } from 'ol';
+import { SelectEvent, FilterFunction } from 'ol/interaction/Select';
+import { StyleFunction } from 'ol/style/Style';
+import { Condition } from 'ol/events/condition';
+import { ObjectEvent } from 'ol/Object';
+import BaseEvent from 'ol/events/Event';
+
+@Component({
+  selector: 'aol-interaction-select',
+  template: '',
+})
+export class SelectInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  addCondition?: Condition;
+  @Input()
+  condition?: Condition;
+  @Input()
+  layers?: Layer[] | ((layer: Layer) => boolean);
+  @Input()
+  style?: Style | Style[] | StyleFunction;
+  @Input()
+  removeCondition?: Condition;
+  @Input()
+  toggleCondition?: Condition;
+  @Input()
+  multi?: boolean;
+  @Input()
+  features?: Collection<Feature>;
+  @Input()
+  filter?: FilterFunction;
+  @Input()
+  wrapX?: boolean;
+
+  @Output()
+  olChange = new EventEmitter<SelectEvent>();
+  @Output()
+  olChangeActive = new EventEmitter<ObjectEvent>();
+  @Output()
+  olError = new EventEmitter<BaseEvent>();
+  @Output()
+  propertyChange = new EventEmitter<ObjectEvent>();
+  @Output()
+  olSelect = new EventEmitter<SelectEvent>();
+
+  instance: Select;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new Select(this);
+
+    this.instance.on('change', (event: SelectEvent) => this.olChange.emit(event));
+    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
+    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
+    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
+    this.instance.on('select', (event: SelectEvent) => this.olSelect.emit(event));
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}

projects/ng-openlayers/src/lib/interactions/translate.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Translate } from 'ol/interaction';
+import { Collection, Feature } from 'ol';
+import { Layer } from 'ol/layer';
+import { TranslateEvent } from 'ol/interaction/Translate';
+import { MapComponent } from '../map.component';
+import BaseEvent from 'ol/events/Event';
+import { ObjectEvent } from 'ol/Object';
+
+@Component({
+  selector: 'aol-interaction-translate',
+  template: '',
+})
+export class TranslateInteractionComponent implements OnInit, OnDestroy {
+  @Input()
+  features?: Collection<Feature>;
+  @Input()
+  layers?: Layer[] | ((layer: Layer) => boolean);
+  @Input()
+  hitTolerance?: number;
+
+  @Output()
+  olChange = new EventEmitter<BaseEvent>();
+  @Output()
+  olChangeActive = new EventEmitter<ObjectEvent>();
+  @Output()
+  olError = new EventEmitter<BaseEvent>();
+  @Output()
+  propertyChange = new EventEmitter<ObjectEvent>();
+  @Output()
+  translateEnd = new EventEmitter<TranslateEvent>();
+  @Output()
+  translateStart = new EventEmitter<TranslateEvent>();
+  @Output()
+  translating = new EventEmitter<TranslateEvent>();
+
+  instance: Translate;
+
+  constructor(private map: MapComponent) {}
+
+  ngOnInit() {
+    this.instance = new Translate(this);
+
+    this.instance.on('change', (event: BaseEvent) => this.olChange.emit(event));
+    this.instance.on('change:active', (event: ObjectEvent) => this.olChangeActive.emit(event));
+    this.instance.on('error', (event: BaseEvent) => this.olError.emit(event));
+    this.instance.on('propertychange', (event: ObjectEvent) => this.propertyChange.emit(event));
+    this.instance.on('translateend', (event: TranslateEvent) => this.translateEnd.emit(event));
+    this.instance.on('translatestart', (event: TranslateEvent) => this.translateStart.emit(event));
+    this.instance.on('translating', (event: TranslateEvent) => this.translating.emit(event));
+
+    this.map.instance.addInteraction(this.instance);
+  }
+
+  ngOnDestroy() {
+    this.map.instance.removeInteraction(this.instance);
+  }
+}