buttons to check expor/import mouse shadow (#28)

* buttons to check expor/import mouse shadow

* update style

* not use ansynapi store

* update ansyn version

* xvdb as service

README.md

@@ -15,7 +15,7 @@ yarn upgrade @ansyn/ansyn @ansyn/assets
 ```
 
 ## Usage
-add ansyn to your assets / styles on `angular.json` file,  under yourProject/architect/build/options:
+1.add ansyn to your assets / styles on `angular.json` file,  under yourProject/architect/build/options:
 
 ```json
              "assets": [
@@ -38,15 +38,24 @@ add ansyn to your assets / styles on `angular.json` file,  under yourProject/arc
              ]
 ```
 
-on `main.ts` file:
+2.on `main.ts` file:
 
 ```typescript
 import { fetchConfigProviders } from '@ansyn/ansyn';
 
 fetchConfigProviders('assets/config/app.config.json').then(providers =>  platformBrowserDynamic(providers).bootstrapModule(AppModule).catch(err => console.log(err)));
 ```
 
-on `app.module.ts`:
+You can provide an object that override the default configuration of your Ansyn app.(let's say we called it overrideConfig) , 
+then you need to pass it to the `fetchConfigProviders` function from `@ansyn/ansyn` with the path of the original configuration('assets/config/app.config.json') which return you a promise with provider then pass it to `platformBrowserDynamic` function.
+```typescript
+fetchConfigProviders('assets/config/app.config.json', overrideConfig)
+  .then(providers => platformBrowserDynamic(providers).bootstrapModule(AppModule).catch(err => console.log(err)));
+``` 
+Learn more about `Ansyn` [configuration](https://github.com/AnSyn/ansyn/wiki/Ansyn-configuration).
+
+
+3.on `app.module.ts`:
 ```typescript
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
@@ -67,29 +76,15 @@ import { AnsynModule } from '@ansyn/ansyn';
 export class AppModule { }
 ```
 
-on `app.component.html`:
+4.on `app.component.html`:
 
 ```html
   ...
   <ansyn-app></ansyn-app>
   ...
 ```
-`AnsynApi` service on `ansyn.component.ts`:
-```typescript
-import { AnsynApi } from '@ansyn/ansyn';
-
-@Component({
-...
-})
-export class AppComponent {
-  constructor(protected ansynApi: AnsynApi) {
-  }
-}
-```
 
-Learn more about [AnsynApi](https://github.com/AnSyn/ansyn/wiki/Ansyn-Package).
-
-on `app.component.css`:
+5.on `app.component.css`:
 
 The element `ansyn-app` has to receive height. It can be explicit height, or implicit like "display:flex" + "flex:1"
 For example:
@@ -102,15 +97,20 @@ ansyn-app {
 }
 ```
 
-on `main.ts`:
-
-You can provide an object that override the default configuration of your Ansyn app.(let's say we called it overrideConfig) , 
-then you need to pass it to the `fetchConfigProviders` function from `@ansyn/ansyn` with the path of the original configuration('assets/config/app.config.json') which return you a promise with provider then pass it to `platformBrowserDynamic` function.
+6.inject `AnsynApi` service on `ansyn.component.ts`:
 ```typescript
-fetchConfigProviders('assets/config/app.config.json', overrideConfig)
-  .then(providers => platformBrowserDynamic(providers).bootstrapModule(AppModule).catch(err => console.log(err)));
-``` 
-Learn more about `Ansyn` [configuration](https://github.com/AnSyn/ansyn/wiki/Ansyn-configuration).
+import { AnsynApi } from '@ansyn/ansyn';
+
+@Component({
+...
+})
+export class AppComponent {
+  constructor(protected ansynApi: AnsynApi) {
+  }
+}
+```
+Learn more about [AnsynApi](https://github.com/AnSyn/ansyn/wiki/Ansyn-Package#AnsynApi).
+
 
 ### Add custome menu item
 

src/app/app.component.html

@@ -11,6 +11,10 @@ <h1> Angular 2 implementation </h1>
   <button (click)="setOverlays()">set overlays</button>
   <button (click)="displayOverlay()">display overlay</button>
   <button (click)="displayTwoOverlays()">display two overlays</button>
+  <button (click)="getMouseShadowPoint()">
+    {{mouseShadowOutputSubscription? 'disable get mouse coordinate' : 'enable get mouse coordinate'}}
+  </button>
+  <button (click)="setMouseShadowPoint()">get mouse coordinate</button>
 
 </div>
 

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { AnsynApi, GeoRegisteration, IOverlay } from '@ansyn/ansyn';
 import { FeatureCollection } from 'geojson';
 import * as momentNs from 'moment';
-import { Observable } from 'rxjs';
+import {Observable, Subscription} from 'rxjs';
 import { take, tap } from 'rxjs/operators';
 import { layoutOptions } from '@ansyn/map-facade';
 import { LayoutKey } from '@ansyn/map-facade';
@@ -20,6 +20,7 @@ const moment = momentNs;
 export class AppComponent {
   layoutKeys: LayoutKey[] = Array.from(layoutOptions.keys());
   featureOptions: FeatureCollection<any>;
+  mouseShadowOutputSubscription: Subscription;
 
   overlays = [
     this.overlay('000', 'https://upload.wikimedia.org/wikipedia/commons/e/e2/Reeipublic_Banana.gif',
@@ -86,8 +87,9 @@ export class AppComponent {
     this.getFeatureCollectionFromFile().subscribe(response => {
       this.featureOptions = response.featureCollection;
     });
-    this.ansynApi.getActiveCenter$.subscribe((center) => {
-      console.log(center);
+
+    this.ansynApi.onReady.subscribe( (ready) => {
+      console.log('ready: ' + ready);
     });
   }
 
@@ -129,4 +131,19 @@ export class AppComponent {
       take(1)
     ).subscribe();
   }
+
+  getMouseShadowPoint() {
+    if (this.mouseShadowOutputSubscription) {
+      this.mouseShadowOutputSubscription.unsubscribe();
+      this.mouseShadowOutputSubscription = undefined;
+    } else {
+      this.mouseShadowOutputSubscription = this.ansynApi.onShadowMouseProduce$.pipe(
+        tap(coordinate => console.log('Shadow mouse: ' + coordinate))
+      ).subscribe();
+    }
+  }
+
+  setMouseShadowPoint() {
+    this.ansynApi.setOutSourceMouseShadow([-122.3857620823084, 37.62041171284878]);
+  }
 }