web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html

<!--
~ 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
    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
        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]"
        [ngStyle]="{'stroke-width': (enhanced ? 4 : 2) * scale + 'px'}"
        (click)="toggleSelected(link, $event)"
        (mouseover)="enhance()"
        [attr.filter]="highlighted?'url(#glow)':'none'">
</svg:line>
<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
        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"
       [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]="2 - textLength(link.portA)/2" 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 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"
       [attr.transform]="'translate(' + labelPosTgt.x + ',' + labelPosTgt.y + '),scale(' + scale + ')'">
    <svg:rect
            [attr.x]="2 - textLength(link.portB)/2" y="-8"
            [attr.width]="4 + textLength(link.portB)" height="16">
    </svg:rect>
    <svg:text x="2" y="2" text-anchor="middle"
            [attr.textLength]= "textLength(link.portB)" lengthAdjust="spacing"
    >{{ link.portB }}</svg:text>
</svg:g>