Changed how link highlight text is updated
Also added in widening of text box and different kerning options
Change-Id: I141251a2b3258de2cd8f7b0d47510ea9b7340fd4
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.html b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.html
index 026ef87..633eccf 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.html
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.html
@@ -33,6 +33,7 @@
<svg:g onos-linksvg [link]="link"
*ngFor="let link of filteredLinks()"
[highlightsEnabled]="highlightPorts"
+ [linkHighlight]="linksHighlighted.get(link.id)"
(selectedEvent)="updateSelected($event)"
[scale]="scale">
</svg:g>
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.ts b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.ts
index 486bb86..e824e20 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.ts
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.ts
@@ -100,6 +100,7 @@
public graph: ForceDirectedGraph;
private selectedNodes: UiElement[] = [];
viewInitialized: boolean = false;
+ linksHighlighted: Map<string, LinkHighlight>;
// References to the children of this component - these are created in the
// template view with the *ngFor and we get them by a query here
@@ -114,6 +115,7 @@
) {
this.selectedLink = null;
this.log.debug('ForceSvgComponent constructed');
+ this.linksHighlighted = new Map<string, LinkHighlight>();
}
/**
@@ -595,14 +597,9 @@
if (fadeMs > 0) {
lh.fadems = fadeMs;
}
- // Don't user .filter() above as it will create a copy of the component which will be discarded
- this.links.forEach((l) => {
- if (l.link.id === Link.linkIdFromShowHighlights(lh.id)) {
- l.linkHighlight = lh;
- this.ref.markForCheck(); // Forces ngOnChange in the LinkSvgComponent
- }
- });
+ this.linksHighlighted.set(Link.linkIdFromShowHighlights(lh.id), lh);
});
+ this.ref.detectChanges(); // Forces ngOnChange in the LinkSvgComponent
}
}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
index 3114a51..3b838bb 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
@@ -60,7 +60,7 @@
<svg:rect
class="node-container" x="-18" y="-18"
width="36" height="36"
- [@deviceLabelToggle]="{ value: labelToggle, params: {txtWidth: (36 + labelTextLen() * 1.1)+'px' }}"
+ [@deviceLabelToggle]="{ value: labelToggle, params: {txtWidth: (36 + labelTextLen() + (labelTextLen() > 0 ? 10 : 0))+'px' }}"
filter= "url(#drop-shadow)">
</svg:rect>
<!-- Template explanation: Creates an SVG Rectangle slightly smaller and
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
index b691417..6e1d219 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
@@ -72,6 +72,9 @@
ngOnChanges(changes: SimpleChanges) {
if (changes['linkHighlight']) {
const hl: LinkHighlight = changes['linkHighlight'].currentValue;
+ if (hl === undefined) {
+ return;
+ }
clearTimeout(this.lastTimer);
this.isHighlighted = true;
this.log.debug('Link highlighted', this.link.id);