Aw5739 Add ngx openlayers

projects/ngx-openlayers/src/lib/styles/circle.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, Host, AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { AtlasManager, Circle, Fill, Stroke } from 'ol/style';
+import { StyleComponent } from './style.component';
+
+@Component({
+  selector: 'aol-style-circle',
+  template: ` <ng-content></ng-content> `,
+})
+export class StyleCircleComponent implements AfterContentInit, OnChanges, OnDestroy {
+  @Input()
+  fill: Fill;
+  @Input()
+  radius: number;
+  @Input()
+  snapToPixel: boolean;
+  @Input()
+  stroke: Stroke;
+  @Input()
+  atlasManager: AtlasManager;
+
+  componentType = 'style-circle';
+  instance: Circle;
+
+  constructor(@Host() private host: StyleComponent) {}
+
+  /**
+   * WORK-AROUND: since the re-rendering is not triggered on style change
+   * we trigger a radius change.
+   * see openlayers #6233 and #5775
+   */
+  update() {
+    if (!!this.instance) {
+      // console.log('setting ol.style.Circle instance\'s radius');
+      this.instance.setRadius(this.radius);
+    }
+    this.host.update();
+  }
+
+  ngAfterContentInit() {
+    // console.log('creating ol.style.Circle instance with: ', this);
+    this.instance = new Circle(this);
+    this.host.instance.setImage(this.instance);
+    this.host.update();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!this.instance) {
+      return;
+    }
+    if (changes.radius) {
+      this.instance.setRadius(changes.radius.currentValue);
+    }
+    // console.log('changes detected in aol-style-circle, setting new radius: ', changes['radius'].currentValue);
+  }
+
+  ngOnDestroy() {
+    // console.log('removing aol-style-circle');
+    this.host.instance.setImage(null);
+  }
+}