blob: b3a5557f29a5c2058be63e8207b1b920731e71a2 [file] [log] [blame]
<!--
~ Copyright 2018-present Open Networking Foundation
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<svg:defs xmlns:svg="http://www.w3.org/2000/svg">
<svg:filter id="glow">
<svg:feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 1 0" />
<svg:feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
<svg:feMerge>
<svg:feMergeNode in="coloredBlur" />
<svg:feMergeNode in="SourceGraphic"/>
</svg:feMerge>
</svg:filter>
</svg:defs>
<!-- Template explanation: Creates an SVG Line and in
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
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
flash up the port labels, and display the link in blue for 1 second
Other child objects have their own description
-->
<svg:line xmlns:svg="http://www.w3.org/2000/svg"
[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]"
(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
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
Note: we do not use an *ngIf to enable or disable this, because that would
cause the fade out of the text to not work
-->
<svg:text xmlns:svg="http://www.w3.org/2000/svg"
[@linkLabelVisible]="isHighlighted"
[attr.x]="link.source?.x + (link.target?.x - link.source?.x)/2"
[attr.y]="link.source?.y + (link.target?.y - link.source?.y)/2"
>{{ label }}</svg:text>
</svg:g>
<!-- Template explanation: Creates an SVG Group if
line 1) 'enhanced' is active and port text exists
line 2) assigns classes to it
-->
<svg:g xmlns:svg="http://www.w3.org/2000/svg"
*ngIf="enhanced && link.portA"
class="portLabel">
<!-- 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.width]="4 + textLength(link.portA)" height="16" >
</svg:rect>
<!-- Template explanation: Creates SVG Text and in
line 1) transform it to the position calculated by the method labelPosSrc()
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"
[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">
<svg:rect
[attr.x]="labelPosTgt.x - 2 - textLength(link.portB)/2" [attr.y]="labelPosTgt.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"
[attr.textLength]= "textLength(link.portB)" lengthAdjust="spacing"
>{{ link.portB }}</svg:text>
</svg:g>