Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +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 | --> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 16 | <svg:defs xmlns:svg="http://www.w3.org/2000/svg"> |
| 17 | <!-- Template explanation: Define an SVG Filter that in |
| 18 | line 1) render the target object in to a bit map and apply a blur to it |
| 19 | based on its alpha channel |
| 20 | line 2) take that blurred layer and shift it down and to the right by 4 |
| 21 | line 3) Merge this blurred and shifted layer and overlay it with the |
| 22 | original target object |
| 23 | --> |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 24 | <svg:filter id="drop-shadow-host" x="-25%" y="-25%" width="200%" height="200%"> |
| 25 | <svg:feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" /> |
| 26 | <svg:feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 27 | <svg:feMerge > |
| 28 | <svg:feMergeNode in="offsetBlur" /> |
| 29 | <svg:feMergeNode in="SourceGraphic" /> |
| 30 | </svg:feMerge> |
| 31 | </svg:filter> |
| 32 | <svg:radialGradient id="three_stops_radial"> |
| 33 | <svg:stop offset= "0%" style="stop-color: #e3e5d6;" /> |
| 34 | <svg:stop offset= "70%" style="stop-color: #c3c5b6;" /> |
| 35 | <svg:stop offset="100%" style="stop-color: #a3a596;" /> |
| 36 | </svg:radialGradient> |
| 37 | </svg:defs> |
| 38 | <!-- Template explanation: Creates an SVG Group and in |
| 39 | line 1) transform it to the position calculated by the d3 force graph engine |
| 40 | line 2) Give it various CSS styles depending on attributes |
| 41 | line 3) When it is clicked, call the method that toggles the selection and |
| 42 | emits an event. |
| 43 | Other child objects have their own description |
| 44 | --> |
Sean Condon | 021f0fa | 2018-12-06 23:31:11 -0800 | [diff] [blame] | 45 | <svg:g xmlns:svg="http://www.w3.org/2000/svg" |
| 46 | [attr.transform]="'translate(' + host?.x + ',' + host?.y + '), scale(' + scale + ')'" |
| 47 | [ngClass]="['node', 'host', 'endstation', 'fixed', selected?'selected':'', 'hovered']" |
Sean Condon | d88f366 | 2019-04-03 16:35:30 +0100 | [diff] [blame] | 48 | (click)="toggleSelected(host, $event)"> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 49 | <svg:desc>Host {{host.id}}</svg:desc> |
| 50 | <!-- Template explanation: Creates an SVG Circle and in |
| 51 | line 1) Apply the drop shadow defined above to this circle |
| 52 | line 2) Apply the radial gradient defined above to the circle |
| 53 | --> |
| 54 | <svg:circle r="15" |
| 55 | filter="url(#drop-shadow-host)" |
| 56 | style="fill: url(#three_stops_radial)"> |
| 57 | </svg:circle> |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 58 | <svg:use xlink:href="#m_endstation" width="22.5" height="22.5" x="-11.25" y="-11.25"> |
| 59 | </svg:use> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 60 | <!-- Template explanation: Creates an SVG Text |
| 61 | line 1) if the labelToggle is not 0 |
| 62 | line 2) shift it below the circle, and have it centred with the circle |
| 63 | line 3) apply a scale and call on the hostName(0 method to get the |
| 64 | displayed value |
| 65 | --> |
| 66 | <svg:text |
| 67 | *ngIf="labelToggle != 0" |
| 68 | dy="30" text-anchor="middle" |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 69 | >{{hostName()}}</svg:text> |
Sean Condon | 590b34b | 2019-12-04 18:44:37 +0000 | [diff] [blame] | 70 | <svg:g *ngIf="badge" onos-badgesvg [badge]="badge"></svg:g> |
Sean Condon | d88f366 | 2019-04-03 16:35:30 +0100 | [diff] [blame] | 71 | </svg:g> |