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 |
| 30 | line 4) When it is clicked, call the method that toggles the selection and |
| 31 | emits an event. |
| 32 | line 5) When the mouse is moved over call on enhance() function. This will |
| 33 | flash up the port labels, and display the link in blue for 1 second |
| 34 | Other child objects have their own description |
| 35 | --> |
| 36 | <svg:line xmlns:svg="http://www.w3.org/2000/svg" |
| 37 | [attr.x1]="link.source?.x" [attr.y1]="link.source?.y" |
| 38 | [attr.x2]="link.target?.x" [attr.y2]="link.target?.y" |
| 39 | [ngClass]="['link', selected?'selected':'', enhanced?'enhanced':'', highlighted]" |
| 40 | (click)="toggleSelected(link)" |
| 41 | (mouseover)="enhance()" |
| 42 | [attr.filter]="highlighted?'url(#glow)':'none'"> |
| 43 | </svg:line> |
| 44 | <svg:g xmlns:svg="http://www.w3.org/2000/svg" [ngClass]="['linkLabel']"> |
| 45 | <!-- Template explanation: Creates SVG Text and in |
| 46 | line 1) Performs the animation 'linkLabelVisible' whenever the isHighlighted |
| 47 | boolean value changes |
| 48 | line 2 & 3) Sets the text at half way between the 2 end points of the line |
| 49 | Note: we do not use an *ngIf to enable or disable this, because that would |
| 50 | cause the fade out of the text to not work |
| 51 | --> |
| 52 | <svg:text xmlns:svg="http://www.w3.org/2000/svg" |
| 53 | [@linkLabelVisible]="isHighlighted" |
| 54 | [attr.x]="link.source?.x + (link.target?.x - link.source?.x)/2" |
| 55 | [attr.y]="link.source?.y + (link.target?.y - link.source?.y)/2" |
| 56 | >{{ label }}</svg:text> |
| 57 | </svg:g> |
| 58 | <!-- Template explanation: Creates an SVG Group if |
| 59 | line 1) 'enhanced' is active and port text exists |
| 60 | line 2) assigns classes to it |
| 61 | --> |
| 62 | <svg:g xmlns:svg="http://www.w3.org/2000/svg" |
| 63 | *ngIf="enhanced && link.portA" |
| 64 | class="portLabel"> |
| 65 | <!-- Template explanation: Creates an SVG Rectangle and in |
| 66 | line 1) transform end A to the position calculated by the d3 force graph engine |
| 67 | line 2) assigns classes to it |
| 68 | --> |
| 69 | <svg:rect |
| 70 | [attr.x]="labelPosSrc.x - 2 - textLength(link.portA)/2" [attr.y]="labelPosSrc.y - 8" |
| 71 | [attr.width]="4 + textLength(link.portA)" height="16" > |
| 72 | </svg:rect> |
| 73 | <!-- Template explanation: Creates SVG Text and in |
| 74 | line 1) transform it to the position calculated by the method labelPosSrc() |
| 75 | line 2) centre aligns it |
| 76 | line 3) ensures that the text fills the rectangle by adjusting spacing |
| 77 | --> |
| 78 | <svg:text |
| 79 | [attr.x]="labelPosSrc.x" [attr.y]="labelPosSrc.y + 6" |
| 80 | text-anchor="middle" |
| 81 | [attr.textLength]= "textLength(link.portA)" lengthAdjust="spacing" |
| 82 | >{{ link.portA }}</svg:text> |
| 83 | </svg:g> |
| 84 | <!-- A repeat of the above, but for the other end of the line --> |
| 85 | <svg:g xmlns:svg="http://www.w3.org/2000/svg" |
| 86 | *ngIf="enhanced && link.portB" |
| 87 | class="portLabel"> |
| 88 | <svg:rect |
| 89 | [attr.x]="labelPosTgt.x - 2 - textLength(link.portB)/2" [attr.y]="labelPosTgt.y - 8" |
| 90 | [attr.width]="4 + textLength(link.portB)" height="16"> |
| 91 | </svg:rect> |
| 92 | <svg:text |
| 93 | [attr.x]="labelPosTgt.x" [attr.y]="labelPosTgt.y + 6" |
| 94 | text-anchor="middle" |
| 95 | [attr.textLength]= "textLength(link.portB)" lengthAdjust="spacing" |
| 96 | >{{ link.portB }}</svg:text> |
| 97 | </svg:g> |