GUI2 added method to zoom to map size
Change-Id: I3aa578b78ebe2ab26f72a7535b8b5e9e0a822cb6
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html
index b6290b6..9f8faf8 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html
@@ -25,5 +25,5 @@
countries in the northern and southern extremities, and so
the map is squashed horizontally slightly here to compensate
(with no squashing the width would be 2400)-->
-<svg:g xmlns:svg="http://www.w3.org/2000/svg" onos-mapsvg [map]="map"
+<svg:g xmlns:svg="http://www.w3.org/2000/svg" onos-mapsvg [map]="map" (mapBounds)="updatedBounds($event)"
transform="translate(500,500), scale(5.5555,6.666666)"/>
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts
index 0732018..7fb0b3f 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts
@@ -19,9 +19,8 @@
import {MapSvgComponent} from '../mapsvg/mapsvg.component';
import {from} from 'rxjs';
import {HttpClient} from '@angular/common/http';
-import {LogService} from 'gui2-fw-lib';
+import {LocMeta, LogService, ZoomUtils} from 'gui2-fw-lib';
import {MapObject} from '../maputils';
-import {LocMeta} from '../forcesvg/models';
import {ForceSvgComponent} from '../forcesvg/forcesvg.component';
import {
DeviceNodeSvgComponent,
@@ -83,31 +82,8 @@
});
it('should convert latlong to xy', () => {
- const result = BackgroundSvgComponent.convertGeoToCanvas(<LocMeta>{lat: 52, lng: -8});
+ const result = ZoomUtils.convertGeoToCanvas(<LocMeta>{lat: 52, lng: -8});
expect(Math.round(result.x * 100)).toEqual(45556);
expect(Math.round(result.y * 100)).toEqual(15333);
});
-
- /**
- * For some reason including the following causes "ForceSvgComponent should create error
- * TODO: Investigate
- */
-
- // it('should convert xy random extents to latlong', () => {
- // const result = BackgroundSvgComponent.convertXYtoGeo(455.556, 153.33);
- // expect(Math.round(result.equivLoc.lng)).toEqual(-8);
- // expect(Math.round(result.equivLoc.lat)).toEqual(52);
- // });
-
- // it('should convert xy min extents to latlong', () => {
- // const result = BackgroundSvgComponent.convertXYtoGeo(-500, 0);
- // expect(Math.round(result.equivLoc.lng)).toEqual(-180);
- // expect(Math.round(result.equivLoc.lat)).toEqual(75);
- // });
-
- // it('should convert xy full extents to latlong', () => {
- // const result = BackgroundSvgComponent.convertXYtoGeo(1500, 1000);
- // expect(Math.round(result.equivLoc.lng)).toEqual(180);
- // expect(Math.round(result.equivLoc.lat)).toEqual(-75);
- // });
});
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts
index cc41fb6..daa4fcb 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts
@@ -13,9 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
import {MapObject} from '../maputils';
-import {LocMeta, MetaUi} from '../forcesvg/models';
+import {MapBounds, TopoZoomPrefs, LogService, ZoomUtils} from 'gui2-fw-lib';
/**
* model of the topo2CurrentLayout attrs from BgZoom below
@@ -69,53 +69,39 @@
regionName: string;
}
-const LONGITUDE_EXTENT = 180;
-const LATITUDE_EXTENT = 75;
-
/**
* ONOS GUI -- Topology Background Layer View.
+ *
+ * TODO: consider that this layer has only one component the MapSvg and hence
+ * might be able to be eliminated
*/
@Component({
selector: '[onos-backgroundsvg]',
templateUrl: './backgroundsvg.component.html',
styleUrls: ['./backgroundsvg.component.css']
})
-export class BackgroundSvgComponent implements OnInit {
+export class BackgroundSvgComponent {
@Input() map: MapObject;
+ @Output() zoomlevel = new EventEmitter<TopoZoomPrefs>();
layoutData: Layout = <Layout>{};
- static convertGeoToCanvas(location: LocMeta): MetaUi {
- const calcX = (LONGITUDE_EXTENT + location.lng) / ( LONGITUDE_EXTENT * 2 ) * 2000 - 500;
- const calcY = (LATITUDE_EXTENT - location.lat) / ( LATITUDE_EXTENT * 2 ) * 1000;
- return <MetaUi>{
- x: calcX,
- y: calcY,
- equivLoc: {
- lat: location.lat,
- lng: location.lng
- }
- };
+ constructor(
+ private log: LogService
+ ) {
+ this.log.debug('BackgroundSvg constructed');
}
- static convertXYtoGeo(x: number, y: number): MetaUi {
- const calcLong: number = (x + 500) * 2 * LONGITUDE_EXTENT / 2000 - LONGITUDE_EXTENT;
- const calcLat: number = -(y * 2 * LATITUDE_EXTENT / 1000 - LATITUDE_EXTENT);
- return <MetaUi>{
- x: x,
- y: y,
- equivLoc: <LocMeta>{
- lat: calcLat,
- lng: calcLong
- }
- };
+ /**
+ * Called when ever the mapBounds event is raised by the MapSvgComponent
+ *
+ * @param bounds - the bounds of the newly loaded map in terms of Lat and Long
+ */
+ updatedBounds(bounds: MapBounds): void {
+ const zoomPrefs: TopoZoomPrefs =
+ ZoomUtils.convertBoundsToZoomLevel(bounds, this.log);
+
+ this.zoomlevel.emit(zoomPrefs);
}
- constructor() { }
-
- ngOnInit() {
- }
-
-
-
}