Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 1 | <!-- |
Sean Condon | 9148182 | 2019-01-01 13:56:14 +0000 | [diff] [blame] | 2 | ~ Copyright 2019-present Open Networking Foundation |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 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 |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 18 | line 0) creates a box big enough to accommodate the drop shadow |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 19 | line 1) render the target object in to a bit map and apply a blur to it |
| 20 | based on its alpha channel |
| 21 | line 2) take that blurred layer and shift it down and to the right by 4 |
| 22 | line 3) Merge this blurred and shifted layer and overlay it with the |
| 23 | original target object |
| 24 | --> |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 25 | <svg:filter id="drop-shadow" x="-25%" y="-25%" width="200%" height="200%"> |
| 26 | <svg:feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" /> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 27 | <svg:feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> |
| 28 | <svg:feMerge > |
| 29 | <svg:feMergeNode in="offsetBlur" /> |
| 30 | <svg:feMergeNode in="SourceGraphic" /> |
| 31 | </svg:feMerge> |
| 32 | </svg:filter> |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 33 | <!-- Template explanation: Define a colour gradient that can be used in icons --> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 34 | <svg:linearGradient id="diagonal_blue" x1="0%" y1="0%" x2="100%" y2="100%"> |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 35 | <svg:stop offset= "0%" style="stop-color: #7fabdb;" /> |
| 36 | <svg:stop offset= "100%" style="stop-color: #5b99d2;" /> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 37 | </svg:linearGradient> |
| 38 | </svg:defs> |
| 39 | <!-- Template explanation: Creates an SVG Group and in |
| 40 | line 1) transform it to the position calculated by the d3 force graph engine |
Sean Condon | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 41 | and scale it inversely to the zoom level |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 42 | line 2) Give it various CSS styles depending on attributes |
| 43 | line 3) When it is clicked, call the method that toggles the selection and |
| 44 | emits an event. |
| 45 | Other child objects have their own description |
| 46 | --> |
| 47 | <svg:g xmlns:svg="http://www.w3.org/2000/svg" |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 48 | [attr.transform]="'translate(' + device?.x + ',' + device?.y + '), scale(' + scale + ')'" |
| 49 | [ngClass]="['node', 'device', device.online?'online':'', selected?'selected':'']" |
Sean Condon | d88f366 | 2019-04-03 16:35:30 +0100 | [diff] [blame] | 50 | (click)="toggleSelected(device, $event)"> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 51 | <svg:desc>Device {{device.id}}</svg:desc> |
| 52 | <!-- Template explanation: Creates an SVG Rectangle and in |
| 53 | line 1) set a css style and shift so that it's centred |
| 54 | line 2) set the initial width and height - width changes with label |
| 55 | line 3) link to the animation 'deviceLabelToggle', pass in to it a width |
| 56 | calculated from the width of the text, and additional padding at the end |
| 57 | line 4) Apply the filter defined above to this rectangle (even as its |
| 58 | width changes |
| 59 | --> |
| 60 | <svg:rect |
| 61 | class="node-container" x="-18" y="-18" |
| 62 | width="36" height="36" |
Sean Condon | b2c483c | 2019-01-16 20:28:55 +0000 | [diff] [blame] | 63 | [@deviceLabelToggle]="{ value: labelToggle, params: {txtWidth: (36 + labelTextLen() * 1.1)+'px' }}" |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 64 | filter= "url(#drop-shadow)"> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 65 | </svg:rect> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 66 | <!-- Template explanation: Creates an SVG Rectangle slightly smaller and |
| 67 | overlaid on the above. This is the blue box, and its width and height does |
| 68 | not change |
| 69 | --> |
Sean Condon | 058804c | 2019-04-16 09:41:52 +0100 | [diff] [blame] | 70 | <svg:rect x="-16" y="-16" width="32" height="32" [ngStyle]="{'fill': panelColor}"> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 71 | </svg:rect> |
Sean Condon | 590b34b | 2019-12-04 18:44:37 +0000 | [diff] [blame] | 72 | <!-- Create an L shaped bracket on bottom left of icon if it has either grid or geo location--> |
Sean Condon | 9de2135 | 2019-04-06 19:22:27 +0100 | [diff] [blame] | 73 | <svg:path *ngIf="device.location && device.location.locType != 'none'" |
Sean Condon | 590b34b | 2019-12-04 18:44:37 +0000 | [diff] [blame] | 74 | d="M-15 12 v3 h3" class="bracket"> |
| 75 | </svg:path> |
| 76 | <!-- Create an L shaped bracket on top right of icon if it has been pinned or has fixed location--> |
Sean Condon | 9de2135 | 2019-04-06 19:22:27 +0100 | [diff] [blame] | 77 | <svg:path *ngIf="device.fx != null" |
Sean Condon | 590b34b | 2019-12-04 18:44:37 +0000 | [diff] [blame] | 78 | d="M15 -12 v-3 h-3" class="bracket"> |
| 79 | </svg:path> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 80 | <!-- Template explanation: Creates an SVG Text element and in |
| 81 | line 1) make it left aligned and slightly down and to the right of the last rect |
| 82 | line 2) set its text length to be the calculated value - see that function |
| 83 | line 3) because of kerning the actual text might be shorter or longer than |
| 84 | the pre-calculated value - if so change the spacing between the letters |
| 85 | (and not the letter width to compensate) |
| 86 | line 4) link to the animation deviceLabelToggleTxt, so that the text appears |
| 87 | in gently |
| 88 | line 5) The text will be one of 3 values - blank, the id or the name |
| 89 | --> |
| 90 | <svg:text |
| 91 | text-anchor="start" y="0.3em" x="22" |
| 92 | [attr.textLength]= "labelTextLen()" |
| 93 | lengthAdjust= "spacing" |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 94 | [@deviceLabelToggleTxt]="labelToggle"> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 95 | {{ labelToggle == 0 ? '': labelToggle == 1 ? device.id:device.props.name }} |
| 96 | </svg:text> |
Sean Condon | 59d3137 | 2019-02-02 20:07:00 +0000 | [diff] [blame] | 97 | <svg:use [attr.xlink:href]="'#' + deviceIcon()" width="36" height="36" x="-18" y="-18"> |
Sean Condon | 021f0fa | 2018-12-06 23:31:11 -0800 | [diff] [blame] | 98 | </svg:use> |
Sean Condon | 590b34b | 2019-12-04 18:44:37 +0000 | [diff] [blame] | 99 | <svg:g *ngIf="badge" onos-badgesvg [badge]="badge"></svg:g> |
Sean Condon | d88f366 | 2019-04-03 16:35:30 +0100 | [diff] [blame] | 100 | </svg:g> |