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 | 1ae1580 | 2019-03-02 09:07:18 +0000 | [diff] [blame] | 25 | <!-- Template explanation: Define a colour gradient that can be used in icons --> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 26 | <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] | 27 | <svg:stop offset= "0%" style="stop-color: #7fabdb;" /> |
| 28 | <svg:stop offset= "100%" style="stop-color: #5b99d2;" /> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 29 | </svg:linearGradient> |
| 30 | </svg:defs> |
| 31 | <!-- Template explanation: Creates an SVG Group and in |
| 32 | 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] | 33 | and scale it inversely to the zoom level |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 34 | line 2) Give it various CSS styles depending on attributes |
| 35 | line 3) When it is clicked, call the method that toggles the selection and |
| 36 | emits an event. |
| 37 | Other child objects have their own description |
| 38 | --> |
| 39 | <svg:g xmlns:svg="http://www.w3.org/2000/svg" |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 40 | [attr.transform]="'translate(' + device?.x + ',' + device?.y + '), scale(' + scale + ')'" |
| 41 | [ngClass]="['node', 'device', device.online?'online':'', selected?'selected':'']" |
Sean Condon | d88f366 | 2019-04-03 16:35:30 +0100 | [diff] [blame] | 42 | (click)="toggleSelected(device, $event)"> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 43 | <svg:desc>Device {{device.id}}</svg:desc> |
| 44 | <!-- Template explanation: Creates an SVG Rectangle and in |
| 45 | line 1) set a css style and shift so that it's centred |
| 46 | line 2) set the initial width and height - width changes with label |
| 47 | line 3) link to the animation 'deviceLabelToggle', pass in to it a width |
| 48 | calculated from the width of the text, and additional padding at the end |
| 49 | line 4) Apply the filter defined above to this rectangle (even as its |
| 50 | width changes |
| 51 | --> |
| 52 | <svg:rect |
| 53 | class="node-container" x="-18" y="-18" |
| 54 | width="36" height="36" |
Thomas Vachuska | 28d4e6f | 2020-07-31 14:20:32 -0700 | [diff] [blame^] | 55 | [@deviceLabelToggle]="{ value: labelToggle, params: {txtWidth: (36 + labelTextLen() + (labelTextLen() > 0 ? 10 : 0))+'px' }}"> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 56 | </svg:rect> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 57 | <!-- Template explanation: Creates an SVG Rectangle slightly smaller and |
| 58 | overlaid on the above. This is the blue box, and its width and height does |
| 59 | not change |
| 60 | --> |
Sean Condon | 058804c | 2019-04-16 09:41:52 +0100 | [diff] [blame] | 61 | <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] | 62 | </svg:rect> |
Sean Condon | 9de2135 | 2019-04-06 19:22:27 +0100 | [diff] [blame] | 63 | <svg:path *ngIf="device.location && device.location.locType != 'none'" |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame] | 64 | d="M-15 12 v3 h3" style="stroke: white; stroke-width: 1; fill: none"></svg:path> |
Sean Condon | 9de2135 | 2019-04-06 19:22:27 +0100 | [diff] [blame] | 65 | <svg:path *ngIf="device.fx != null" |
Sean Condon | b0a196a | 2019-04-19 09:50:44 +0100 | [diff] [blame] | 66 | d="M15 -12 v-3 h-3" style="stroke: white; stroke-width: 1; fill: none"></svg:path> |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 67 | <!-- Template explanation: Creates an SVG Text element and in |
| 68 | line 1) make it left aligned and slightly down and to the right of the last rect |
| 69 | line 2) set its text length to be the calculated value - see that function |
| 70 | line 3) because of kerning the actual text might be shorter or longer than |
| 71 | the pre-calculated value - if so change the spacing between the letters |
| 72 | (and not the letter width to compensate) |
| 73 | line 4) link to the animation deviceLabelToggleTxt, so that the text appears |
| 74 | in gently |
| 75 | line 5) The text will be one of 3 values - blank, the id or the name |
| 76 | --> |
| 77 | <svg:text |
| 78 | text-anchor="start" y="0.3em" x="22" |
| 79 | [attr.textLength]= "labelTextLen()" |
| 80 | lengthAdjust= "spacing" |
Sean Condon | 50855cf | 2018-12-23 15:37:42 +0000 | [diff] [blame] | 81 | [@deviceLabelToggleTxt]="labelToggle"> |
Sean Condon | 0c577f6 | 2018-11-18 22:40:05 +0000 | [diff] [blame] | 82 | {{ labelToggle == 0 ? '': labelToggle == 1 ? device.id:device.props.name }} |
| 83 | </svg:text> |
Sean Condon | 59d3137 | 2019-02-02 20:07:00 +0000 | [diff] [blame] | 84 | <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] | 85 | </svg:use> |
Sean Condon | d88f366 | 2019-04-03 16:35:30 +0100 | [diff] [blame] | 86 | </svg:g> |