| <!-- |
| ~ Copyright 2018-present Open Networking Foundation |
| ~ |
| ~ Licensed under the Apache License, Version 2.0 (the "License"); |
| ~ you may not use this file except in compliance with the License. |
| ~ You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, software |
| ~ distributed under the License is distributed on an "AS IS" BASIS, |
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| ~ See the License for the specific language governing permissions and |
| ~ limitations under the License. |
| --> |
| <svg:g class="topo2-force" xmlns:svg="http://www.w3.org/2000/svg"> |
| <svg:g id="new-zoom-layer"> |
| <svg:g class="topo2-links"> |
| <!-- Template explanation: Creates an SVG Group and in |
| line 1) use the svg component onos-linksvg, setting it's link |
| Input parameter to the link item from the next line |
| line 2) Use the built in NgFor directive to iterate through the |
| set of links filtered by the filteredLinks() function. |
| --> |
| <svg:g onos-linksvg [link]="link" |
| *ngFor="let link of filteredLinks()" |
| (selectedEvent)="updateSelected($event)"> |
| </svg:g> |
| </svg:g> |
| <svg:g class="topo2-linkLabels" /> |
| <svg:g class="topo2-numLinkLabels" /> |
| <svg:g class="topo2-nodes"> |
| <!-- Template explanation - create an SVG Group and |
| line 1) use the svg component onos-devicenodesvg, setting it's device |
| Input parameter to the device item from the next line |
| line 2) Use the built in NgFor directive to iterate through all |
| of the devices in the chosen layer index. The current iteration |
| is in the device variable |
| line 3) Use the onosDraggable directive and pass this device in to |
| its draggableNode Input parameter and setting the draggableInGraph |
| Input parameter to 'graph' |
| line 4) when the onos-devicenodesvg component emits the selectedEvent |
| call the updateSelected() method of this (forcesvg) component |
| --> |
| <svg:g onos-devicenodesvg [device]="device" |
| *ngFor="let device of regionData.devices[visibleLayerIdx()]" |
| onosDraggableNode [draggableNode]="device" [draggableInGraph]="graph" |
| (selectedEvent)="updateSelected($event)"> |
| </svg:g> |
| <!-- Template explanation - only display the hosts if 'showHosts' is set true --> |
| <svg:g *ngIf="showHosts"> |
| <!-- Template explanation - create an SVG Group and |
| line 1) use the svg component onos-hostnodesvg, setting it's host |
| Input parameter to the host item from the next line |
| line 2) Use the built in NgFor directive to iterate through all |
| of the hosts in the chosen layer index. The current iteration |
| is in the 'host' variable |
| line 3) Use the onosDraggable directive and pass this host in to |
| its draggableNode Input parameter and setting the draggableInGraph |
| Input parameter to 'graph' |
| line 4) when the onos-hostnodesvg component emits the selectedEvent |
| call the updateSelected() method of this (forcesvg) component |
| --> |
| <svg:g onos-hostnodesvg [host]="host" |
| *ngFor="let host of regionData.hosts[visibleLayerIdx()]" |
| onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph" |
| (selectedEvent)="updateSelected($event)"> |
| </svg:g> |
| </svg:g> |
| <svg:g onos-subregionnodesvg [subRegion]="subRegion" |
| *ngFor="let subRegion of regionData.subregions" |
| onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph"> |
| </svg:g> |
| </svg:g> |
| </svg:g> |
| <!--<svg:g class="topo2-portLabels">--> |
| <!--<!–TODO make each of these in to a component that can be inserted –>--> |
| <!--<svg:g *ngIf="selectedLink !== null" id="topo-port-src" class="portLabel" opacity="1">--> |
| <!--<rect x="0" y="0" width="1" height="1" [ngStyle]="{'transform': 'scale(1)'}"></rect>--> |
| <!--<text dy="0.3em" [ngStyle]="{'transform': 'scale(1)'}">{{ selectedLink.portA }}</text>--> |
| <!--</svg:g>--> |
| |
| <!--<svg:g *ngIf="selectedLink !== null" id="topo-port-tgt" class="portLabel" opacity="1">--> |
| <!--<rect x="0" y="0" width="1" height="1" [ngStyle]="{'transform': 'scale(1)'}"></rect>--> |
| <!--<text dy="0.3em" [ngStyle]="{'transform': 'scale(1)'}">{{ selectedLink.portA }}</text>--> |
| <!--</svg:g>--> |
| <!--</svg:g>--> |
| </svg:g> |