Support for client offset in scrolled area

This commit is contained in:
Piotr Pekala
2019-02-25 01:42:39 -08:00
parent f553c7a200
commit c063620cbf
13 changed files with 92 additions and 34 deletions

View File

@ -1,7 +1,7 @@
<div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition" *ngIf="node">
<span [matMenuTriggerFor]="selectInterfaceMenu"></span>
<mat-menu #selectInterfaceMenu="matMenu" class="context-menu-items">
<button mat-menu-item *ngFor="let port of node.ports" (click)="chooseInterface(port)">
<button mat-menu-item *ngFor="let port of availablePorts" (click)="chooseInterface(port)">
<mat-icon>add_circle_outline</mat-icon>
<span>{{ port.name }}</span>
</button>

View File

@ -3,6 +3,8 @@ import { MatMenuTrigger } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
import { Node } from '../../../cartography/models/node';
import { Port } from '../../../models/port';
import { Link } from '../../../models/link';
import { LinkNode } from '../../../models/link-node';
@Component({
selector: 'app-node-select-interface',
@ -10,6 +12,7 @@ import { Port } from '../../../models/port';
styleUrls: ['./node-select-interface.component.scss']
})
export class NodeSelectInterfaceComponent implements OnInit {
@Input() links: Link[];
@Output() onChooseInterface = new EventEmitter<any>();
@ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
@ -17,8 +20,12 @@ export class NodeSelectInterfaceComponent implements OnInit {
protected topPosition;
protected leftPosition;
public node: Node;
public availablePorts: Port[];
constructor(private sanitizer: DomSanitizer, private changeDetector: ChangeDetectorRef) {}
constructor(
private sanitizer: DomSanitizer,
private changeDetector: ChangeDetectorRef
) {}
ngOnInit() {
this.setPosition(0, 0);
@ -32,10 +39,29 @@ export class NodeSelectInterfaceComponent implements OnInit {
public open(node: Node, top: number, left: number) {
this.node = node;
this.filterNodePorts();
this.setPosition(top, left);
this.contextMenu.openMenu();
}
public filterNodePorts() {
let linkNodes: LinkNode[] = [];
this.links.forEach((link: Link) => {
link.nodes.forEach((linkNode: LinkNode) => {
if(linkNode.node_id === this.node.node_id) {
linkNodes.push(linkNode);
}
});
});
this.availablePorts = [];
this.node.ports.forEach((port: Port) => {
if(linkNodes.filter((linkNode: LinkNode) => linkNode.port_number === port.port_number).length === 0){
this.availablePorts.push(port);
}
});
}
public chooseInterface(port: Port) {
this.onChooseInterface.emit({
node: this.node,