Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 1 | <!-- |
| 2 | ~ Copyright 2018-present Open Networking Foundation |
| 3 | ~ |
| 4 | ~ Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | ~ you may not use this file except in compliance with the License. |
| 6 | ~ You may obtain a copy of the License at |
| 7 | ~ |
| 8 | ~ http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | ~ |
| 10 | ~ Unless required by applicable law or agreed to in writing, software |
| 11 | ~ distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | ~ See the License for the specific language governing permissions and |
| 14 | ~ limitations under the License. |
| 15 | --> |
| 16 | <svg:defs xmlns:svg="http://www.w3.org/2000/svg"> |
| 17 | <svg:filter id="glow"> |
| 18 | <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" /> |
| 19 | <svg:feGaussianBlur stdDeviation="2.5" result="coloredBlur" /> |
| 20 | <svg:feMerge> |
| 21 | <svg:feMergeNode in="coloredBlur" /> |
| 22 | <svg:feMergeNode in="SourceGraphic"/> |
| 23 | </svg:feMerge> |
| 24 | </svg:filter> |
| 25 | </svg:defs> |
| 26 | <!-- Template explanation: Creates an SVG Line and in |
| 27 | line 1) transform end A to the position calculated by the d3 force graph engine |
| 28 | line 2) transform end B to the position calculated by the d3 force graph engine |
| 29 | line 3) Give it various CSS styles depending on attributes |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 30 | ling 4) Change the line width depending on the scale |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 31 | line 4) When it is clicked, call the method that toggles the selection and |
| 32 | emits an event. |
| 33 | line 5) When the mouse is moved over call on enhance() function. This will |
| 34 | flash up the port labels, and display the link in blue for 1 second |
| 35 | Other child objects have their own description |
| 36 | --> |
| 37 | <svg:line xmlns:svg="http://www.w3.org/2000/svg" |
| 38 | [attr.x1]="link.source?.x" [attr.y1]="link.source?.y" |
| 39 | [attr.x2]="link.target?.x" [attr.y2]="link.target?.y" |
Sean Condon | 4e55c80 | 2019-12-03 22:13:34 +0000 | [diff] [blame] | 40 | [ngClass]="['link', selected?'selected':'', enhanced?'enhanced':'', highlightAsString()]" |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 41 | [ngStyle]="{'stroke-width': (enhanced ? 4 : 2) * scale + 'px'}" |
Sean Condon | d88f366 | 2019-04-03 16:35:30 +0100 | [diff] [blame] | 42 | (click)="toggleSelected(link, $event)" |
Sean Condon | 4e55c80 | 2019-12-03 22:13:34 +0000 | [diff] [blame] | 43 | (mouseover)="enhance()"> |
| 44 | <!-- [attr.filter]="highlighted?'url(#glow)':'none'">--> |
| 45 | <svg:desc>{{link.id}} {{linkHighlight?.css}} {{isHighlighted}}</svg:desc> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 46 | </svg:line> |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 47 | <svg:g xmlns:svg="http://www.w3.org/2000/svg" |
| 48 | [ngClass]="['linkLabel']" |
| 49 | [attr.transform]="'scale(' + scale + ')'"> |
| 50 | <!-- Template explanation: Creates SVG Text in the middle of the link to |
| 51 | show traffic and in: |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 52 | line 1) Performs the animation 'linkLabelVisible' whenever the isHighlighted |
| 53 | boolean value changes |
| 54 | line 2 & 3) Sets the text at half way between the 2 end points of the line |
| 55 | Note: we do not use an *ngIf to enable or disable this, because that would |
| 56 | cause the fade out of the text to not work |
| 57 | --> |
| 58 | <svg:text xmlns:svg="http://www.w3.org/2000/svg" |
| 59 | [@linkLabelVisible]="isHighlighted" |
| 60 | [attr.x]="link.source?.x + (link.target?.x - link.source?.x)/2" |
| 61 | [attr.y]="link.source?.y + (link.target?.y - link.source?.y)/2" |
Sean Condon | 4e55c80 | 2019-12-03 22:13:34 +0000 | [diff] [blame] | 62 | >{{ linkHighlight?.label }}</svg:text> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 63 | </svg:g> |
| 64 | <!-- Template explanation: Creates an SVG Group if |
| 65 | line 1) 'enhanced' is active and port text exists |
| 66 | line 2) assigns classes to it |
| 67 | --> |
| 68 | <svg:g xmlns:svg="http://www.w3.org/2000/svg" |
| 69 | *ngIf="enhanced && link.portA" |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 70 | class="portLabel" |
| 71 | [attr.transform]="'translate(' + labelPosSrc.x + ',' + labelPosSrc.y + '),scale(' + scale + ')'"> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 72 | <!-- Template explanation: Creates an SVG Rectangle and in |
| 73 | line 1) transform end A to the position calculated by the d3 force graph engine |
| 74 | line 2) assigns classes to it |
| 75 | --> |
| 76 | <svg:rect |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 77 | [attr.x]="2 - textLength(link.portA)/2" y="-8" |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 78 | [attr.width]="4 + textLength(link.portA)" height="16" > |
| 79 | </svg:rect> |
| 80 | <!-- Template explanation: Creates SVG Text and in |
| 81 | line 1) transform it to the position calculated by the method labelPosSrc() |
| 82 | line 2) centre aligns it |
| 83 | line 3) ensures that the text fills the rectangle by adjusting spacing |
| 84 | --> |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 85 | <svg:text y="2" text-anchor="middle" |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 86 | [attr.textLength]= "textLength(link.portA)" lengthAdjust="spacing" |
| 87 | >{{ link.portA }}</svg:text> |
| 88 | </svg:g> |
| 89 | <!-- A repeat of the above, but for the other end of the line --> |
| 90 | <svg:g xmlns:svg="http://www.w3.org/2000/svg" |
| 91 | *ngIf="enhanced && link.portB" |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 92 | class="portLabel" |
| 93 | [attr.transform]="'translate(' + labelPosTgt.x + ',' + labelPosTgt.y + '),scale(' + scale + ')'"> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 94 | <svg:rect |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 95 | [attr.x]="2 - textLength(link.portB)/2" y="-8" |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 96 | [attr.width]="4 + textLength(link.portB)" height="16"> |
| 97 | </svg:rect> |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 98 | <svg:text x="2" y="2" text-anchor="middle" |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 99 | [attr.textLength]= "textLength(link.portB)" lengthAdjust="spacing" |
| 100 | >{{ link.portB }}</svg:text> |
| 101 | </svg:g> |