GUI2 added method to zoom to map size
Change-Id: I3aa578b78ebe2ab26f72a7535b8b5e9e0a822cb6
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css
index 57a2bd3..204b85c 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.css
@@ -37,7 +37,7 @@
}
g.node.device.online use {
/* NOTE: this gets overridden programatically */
- fill: #454545;
+ fill: #ffffff;
}
g.node.selected .node-container {
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
index 747b1bb..399955c 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
@@ -15,6 +15,7 @@
-->
<svg:defs xmlns:svg="http://www.w3.org/2000/svg">
<!-- Template explanation: Define an SVG Filter that in
+ line 0) creates a box big enough to accommodate the drop shadow
line 1) render the target object in to a bit map and apply a blur to it
based on its alpha channel
line 2) take that blurred layer and shift it down and to the right by 4
@@ -29,6 +30,7 @@
<svg:feMergeNode in="SourceGraphic" />
</svg:feMerge>
</svg:filter>
+ <!-- Template explanation: Define a colour gradient that can be used in icons -->
<svg:linearGradient id="diagonal_blue" x1="0%" y1="0%" x2="100%" y2="100%">
<svg:stop offset= "0%" style="stop-color: #7fabdb;" />
<svg:stop offset= "100%" style="stop-color: #5b99d2;" />
@@ -36,6 +38,7 @@
</svg:defs>
<!-- Template explanation: Creates an SVG Group and in
line 1) transform it to the position calculated by the d3 force graph engine
+ and scale it inversely to the zoom level
line 2) Give it various CSS styles depending on attributes
line 3) When it is clicked, call the method that toggles the selection and
emits an event.
@@ -80,7 +83,6 @@
text-anchor="start" y="0.3em" x="22"
[attr.textLength]= "labelTextLen()"
lengthAdjust= "spacing"
- [ngStyle]="{'transform': 'scale(' + scale + ')'}"
[@deviceLabelToggleTxt]="labelToggle">
{{ labelToggle == 0 ? '': labelToggle == 1 ? device.id:device.props.name }}
</svg:text>
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
index 1cfe7cf..87b7e0a 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
@@ -23,9 +23,10 @@
SimpleChanges,
} from '@angular/core';
import {Device, LabelToggle, UiElement} from '../../models';
-import {IconService, LogService} from 'gui2-fw-lib';
+import {IconService, LocMeta, LogService, MetaUi, ZoomUtils} from 'gui2-fw-lib';
import {NodeVisual} from '../nodevisual';
import {animate, state, style, transition, trigger} from '@angular/animations';
+import {LocationType} from '../../../backgroundsvg/backgroundsvg.component';
/**
* The Device node in the force graph
@@ -113,9 +114,10 @@
*/
labelTextLen() {
if (this.labelToggle === 1) {
- return this.device.id.length * 8 * this.scale;
- } else if (this.labelToggle === 2 && this.device && this.device.props.name && this.device.props.name.trim().length > 0) {
- return this.device.props.name.length * 8 * this.scale;
+ return this.device.id.length * 8;
+ } else if (this.labelToggle === 2 && this.device &&
+ this.device.props.name && this.device.props.name.trim().length > 0) {
+ return this.device.props.name.length * 8;
} else {
return 0;
}
@@ -129,4 +131,25 @@
return 'm_' + this.device.type;
}
}
+
+ resetNodeLocation(): void {
+ this.log.debug('Resetting device', this.device.id, this.device.type);
+ let origLoc: MetaUi;
+
+ if (!this.device.location || this.device.location.locType === LocationType.NONE) {
+ // No location - nothing to do
+ return;
+ } else if (this.device.location.locType === LocationType.GEO) {
+ origLoc = ZoomUtils.convertGeoToCanvas(<LocMeta>{
+ lng: this.device.location.longOrX,
+ lat: this.device.location.latOrY
+ });
+ } else if (this.device.location.locType === LocationType.GRID) {
+ origLoc = ZoomUtils.convertXYtoGeo(
+ this.device.location.longOrX, this.device.location.latOrY);
+ }
+ this.device.metaUi = origLoc;
+ this.device['fx'] = origLoc.x;
+ this.device['fy'] = origLoc.y;
+ }
}
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html
index 5bab75d..ccce65a 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html
@@ -55,7 +55,8 @@
filter="url(#drop-shadow-host)"
style="fill: url(#three_stops_radial)">
</svg:circle>
- <svg:use xlink:href="#m_endstation" width="22.5" height="22.5" x="-11.25" y="-11.25" style="transform: scale(1);"></svg:use>
+ <svg:use xlink:href="#m_endstation" width="22.5" height="22.5" x="-11.25" y="-11.25">
+ </svg:use>
<!-- Template explanation: Creates an SVG Text
line 1) if the labelToggle is not 0
line 2) shift it below the circle, and have it centred with the circle
@@ -65,5 +66,5 @@
<svg:text
*ngIf="labelToggle != 0"
dy="30" text-anchor="middle"
- style="transform: scale(1);">{{hostName()}}</svg:text>
+ >{{hostName()}}</svg:text>
</svg:g>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.html
index b3a5557..c856763 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.html
@@ -27,6 +27,7 @@
line 1) transform end A to the position calculated by the d3 force graph engine
line 2) transform end B to the position calculated by the d3 force graph engine
line 3) Give it various CSS styles depending on attributes
+ ling 4) Change the line width depending on the scale
line 4) When it is clicked, call the method that toggles the selection and
emits an event.
line 5) When the mouse is moved over call on enhance() function. This will
@@ -37,12 +38,16 @@
[attr.x1]="link.source?.x" [attr.y1]="link.source?.y"
[attr.x2]="link.target?.x" [attr.y2]="link.target?.y"
[ngClass]="['link', selected?'selected':'', enhanced?'enhanced':'', highlighted]"
+ [ngStyle]="{'stroke-width': (enhanced ? 4 : 2) * scale + 'px'}"
(click)="toggleSelected(link)"
(mouseover)="enhance()"
[attr.filter]="highlighted?'url(#glow)':'none'">
</svg:line>
-<svg:g xmlns:svg="http://www.w3.org/2000/svg" [ngClass]="['linkLabel']">
- <!-- Template explanation: Creates SVG Text and in
+<svg:g xmlns:svg="http://www.w3.org/2000/svg"
+ [ngClass]="['linkLabel']"
+ [attr.transform]="'scale(' + scale + ')'">
+ <!-- Template explanation: Creates SVG Text in the middle of the link to
+ show traffic and in:
line 1) Performs the animation 'linkLabelVisible' whenever the isHighlighted
boolean value changes
line 2 & 3) Sets the text at half way between the 2 end points of the line
@@ -61,13 +66,14 @@
-->
<svg:g xmlns:svg="http://www.w3.org/2000/svg"
*ngIf="enhanced && link.portA"
- class="portLabel">
+ class="portLabel"
+ [attr.transform]="'translate(' + labelPosSrc.x + ',' + labelPosSrc.y + '),scale(' + scale + ')'">
<!-- Template explanation: Creates an SVG Rectangle and in
line 1) transform end A to the position calculated by the d3 force graph engine
line 2) assigns classes to it
-->
<svg:rect
- [attr.x]="labelPosSrc.x - 2 - textLength(link.portA)/2" [attr.y]="labelPosSrc.y - 8"
+ [attr.x]="2 - textLength(link.portA)/2" y="-8"
[attr.width]="4 + textLength(link.portA)" height="16" >
</svg:rect>
<!-- Template explanation: Creates SVG Text and in
@@ -75,23 +81,20 @@
line 2) centre aligns it
line 3) ensures that the text fills the rectangle by adjusting spacing
-->
- <svg:text
- [attr.x]="labelPosSrc.x" [attr.y]="labelPosSrc.y + 6"
- text-anchor="middle"
+ <svg:text y="2" text-anchor="middle"
[attr.textLength]= "textLength(link.portA)" lengthAdjust="spacing"
>{{ link.portA }}</svg:text>
</svg:g>
<!-- A repeat of the above, but for the other end of the line -->
<svg:g xmlns:svg="http://www.w3.org/2000/svg"
*ngIf="enhanced && link.portB"
- class="portLabel">
+ class="portLabel"
+ [attr.transform]="'translate(' + labelPosTgt.x + ',' + labelPosTgt.y + '),scale(' + scale + ')'">
<svg:rect
- [attr.x]="labelPosTgt.x - 2 - textLength(link.portB)/2" [attr.y]="labelPosTgt.y - 8"
+ [attr.x]="2 - textLength(link.portB)/2" y="-8"
[attr.width]="4 + textLength(link.portB)" height="16">
</svg:rect>
- <svg:text
- [attr.x]="labelPosTgt.x" [attr.y]="labelPosTgt.y + 6"
- text-anchor="middle"
+ <svg:text x="2" y="2" text-anchor="middle"
[attr.textLength]= "textLength(link.portB)" lengthAdjust="spacing"
>{{ link.portB }}</svg:text>
</svg:g>
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.ts
index af4d0a9..eab533f 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/visuals/linksvg/linksvg.component.ts
@@ -28,11 +28,6 @@
y: number;
}
-enum LinkEnd {
- A,
- B
-}
-
@Component({
selector: '[onos-linksvg]',
templateUrl: './linksvg.component.html',
@@ -55,6 +50,7 @@
@Input() highlighted: string = '';
@Input() highlightsEnabled: boolean = true;
@Input() label: string;
+ @Input() scale = 1.0;
isHighlighted: boolean = false;
@Output() selectedEvent = new EventEmitter<UiElement>();
@Output() enhancedEvent = new EventEmitter<Link>();
@@ -100,7 +96,7 @@
}
/**
- * We want to place the label for the port about 40 px from the node
+ * We want to place the label for the port about 40 px from the node.
* If the distance between the nodes is less than 100, then just place the
* label 1/3 of the way from the node
*/