mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-19 13:07:52 +00:00
Separate events
This commit is contained in:
parent
c6f59243ff
commit
22ddb3d51e
@ -39,6 +39,6 @@ import { D3_MAP_IMPORTS } from './d3-map.imports';
|
||||
Context,
|
||||
...D3_MAP_IMPORTS
|
||||
],
|
||||
exports: [MapComponent]
|
||||
exports: [ MapComponent ]
|
||||
})
|
||||
export class CartographyModule { }
|
||||
|
@ -2,20 +2,13 @@ import { Component, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@
|
||||
import { Port } from '../../../models/port';
|
||||
import { DrawingLineWidget } from '../../widgets/drawing-line';
|
||||
import { Node } from '../../models/node';
|
||||
import { NodesWidget, NodeEvent } from '../../widgets/nodes';
|
||||
import { NodesWidget } from '../../widgets/nodes';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { NodeSelectInterfaceComponent } from '../node-select-interface/node-select-interface.component';
|
||||
import { LinkCreated } from '../../events/links';
|
||||
import { NodeClicked } from '../../events/nodes';
|
||||
|
||||
|
||||
export class LinkCreated {
|
||||
constructor(
|
||||
public sourceNode: Node,
|
||||
public sourcePort: Port,
|
||||
public targetNode: Node,
|
||||
public targetPort: Port
|
||||
){}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-draw-link-tool',
|
||||
templateUrl: './draw-link-tool.component.html',
|
||||
@ -34,7 +27,7 @@ export class DrawLinkToolComponent implements OnInit, OnDestroy {
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.onNodeClicked = this.nodesWidget.onNodeClicked.subscribe((eventNode: NodeEvent) => {
|
||||
this.onNodeClicked = this.nodesWidget.onNodeClicked.subscribe((eventNode: NodeClicked) => {
|
||||
this.nodeSelectInterfaceMenu.open(
|
||||
eventNode.node,
|
||||
eventNode.event.clientY,
|
||||
|
@ -11,14 +11,15 @@ import { Context } from "../../models/context";
|
||||
import { Size } from "../../models/size";
|
||||
import { Drawing } from "../../models/drawing";
|
||||
import { Symbol } from '../../../models/symbol';
|
||||
import { NodeEvent, NodesWidget } from '../../widgets/nodes';
|
||||
import { NodesWidget } from '../../widgets/nodes';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { InterfaceLabelWidget } from '../../widgets/interface-label';
|
||||
import { SelectionTool } from '../../tools/selection-tool';
|
||||
import { MovingTool } from '../../tools/moving-tool';
|
||||
import { LinksWidget } from '../../widgets/links';
|
||||
import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
|
||||
import { LinkCreated } from '../draw-link-tool/draw-link-tool.component';
|
||||
import { NodeDragging, NodeDragged } from '../../events/nodes';
|
||||
import { LinkCreated } from '../../events/links';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -35,7 +36,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
|
||||
@Input() width = 1500;
|
||||
@Input() height = 600;
|
||||
|
||||
@Output() onNodeDragged: EventEmitter<NodeEvent>;
|
||||
@Output() onNodeDragged: EventEmitter<NodeDragged>;
|
||||
@Output() onLinkCreated = new EventEmitter<LinkCreated>();
|
||||
|
||||
private d3: D3;
|
||||
@ -125,7 +126,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
|
||||
}
|
||||
this.context.size = this.getSize();
|
||||
|
||||
this.onNodeDraggingSubscription = this.nodesWidget.onNodeDragging.subscribe((eventNode: NodeEvent) => {
|
||||
this.onNodeDraggingSubscription = this.nodesWidget.onNodeDragging.subscribe((eventNode: NodeDragging) => {
|
||||
const links = this.links.filter((link) => link.target.node_id === eventNode.node.node_id || link.source.node_id === eventNode.node.node_id)
|
||||
|
||||
links.forEach((link) => {
|
||||
|
@ -1,8 +1,8 @@
|
||||
import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild, OnDestroy} from '@angular/core';
|
||||
import {MatMenuTrigger} from "@angular/material";
|
||||
import {DomSanitizer} from "@angular/platform-browser";
|
||||
import {Node} from "../../../cartography/models/node";
|
||||
import {Port} from "../../../models/port";
|
||||
import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { MatMenuTrigger } from "@angular/material";
|
||||
import { DomSanitizer } from "@angular/platform-browser";
|
||||
import { Node } from "../../../cartography/models/node";
|
||||
import { Port } from "../../../models/port";
|
||||
|
||||
|
||||
@Component({
|
||||
|
12
src/app/cartography/events/links.ts
Normal file
12
src/app/cartography/events/links.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { Node } from "../models/node";
|
||||
import { Port } from "../../models/port";
|
||||
|
||||
|
||||
export class LinkCreated {
|
||||
constructor(
|
||||
public sourceNode: Node,
|
||||
public sourcePort: Port,
|
||||
public targetNode: Node,
|
||||
public targetPort: Port
|
||||
){}
|
||||
}
|
14
src/app/cartography/events/nodes.ts
Normal file
14
src/app/cartography/events/nodes.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { Node } from "../models/node";
|
||||
|
||||
class NodeEvent {
|
||||
constructor(
|
||||
public event: any,
|
||||
public node: Node
|
||||
) {}
|
||||
}
|
||||
|
||||
export class NodeDragging extends NodeEvent {}
|
||||
export class NodeDragged extends NodeEvent {}
|
||||
|
||||
export class NodeClicked extends NodeEvent {}
|
||||
export class NodeContextMenu extends NodeEvent {}
|
@ -1,5 +1,6 @@
|
||||
import {Link} from "../../models/link";
|
||||
import { Injectable } from "@angular/core";
|
||||
import { Link } from "../../models/link";
|
||||
|
||||
|
||||
@Injectable()
|
||||
export class MultiLinkCalculatorHelper {
|
||||
|
@ -10,14 +10,7 @@ import { Symbol } from "../../models/symbol";
|
||||
import { Layer } from "../models/layer";
|
||||
import { CssFixer } from "../helpers/css-fixer";
|
||||
import { FontFixer } from "../helpers/font-fixer";
|
||||
|
||||
|
||||
export class NodeEvent {
|
||||
constructor(
|
||||
public event: any,
|
||||
public node: Node
|
||||
) {}
|
||||
}
|
||||
import { NodeDragging, NodeDragged, NodeContextMenu, NodeClicked } from "../events/nodes";
|
||||
|
||||
|
||||
@Injectable()
|
||||
@ -29,10 +22,10 @@ export class NodesWidget implements Widget {
|
||||
|
||||
private symbols: Symbol[] = [];
|
||||
|
||||
public onContextMenu = new EventEmitter<NodeEvent>();
|
||||
public onNodeClicked = new EventEmitter<NodeEvent>();
|
||||
public onNodeDragged = new EventEmitter<NodeEvent>();
|
||||
public onNodeDragging = new EventEmitter<NodeEvent>();
|
||||
public onContextMenu = new EventEmitter<NodeContextMenu>();
|
||||
public onNodeClicked = new EventEmitter<NodeClicked>();
|
||||
public onNodeDragged = new EventEmitter<NodeDragged>();
|
||||
public onNodeDragging = new EventEmitter<NodeDragging>();
|
||||
|
||||
constructor(
|
||||
private cssFixer: CssFixer,
|
||||
@ -137,10 +130,10 @@ export class NodesWidget implements Widget {
|
||||
.classed('selected', (n: Node) => n.is_selected)
|
||||
.on("contextmenu", function (n: Node, i: number) {
|
||||
event.preventDefault();
|
||||
self.onContextMenu.emit(new NodeEvent(event, n));
|
||||
self.onContextMenu.emit(new NodeContextMenu(event, n));
|
||||
})
|
||||
.on('click', (n: Node) => {
|
||||
this.onNodeClicked.emit(new NodeEvent(event, n));
|
||||
this.onNodeClicked.emit(new NodeClicked(event, n));
|
||||
});
|
||||
|
||||
// update image of node
|
||||
@ -174,7 +167,7 @@ export class NodesWidget implements Widget {
|
||||
n.y = e.y;
|
||||
|
||||
self.revise(select(this));
|
||||
self.onNodeDragging.emit(new NodeEvent(event, n));
|
||||
self.onNodeDragging.emit(new NodeDragging(event, n));
|
||||
};
|
||||
|
||||
const dragging = () => {
|
||||
@ -182,7 +175,7 @@ export class NodesWidget implements Widget {
|
||||
.on('drag', callback)
|
||||
.on('end', (n: Node) => {
|
||||
const e: D3DragEvent<SVGGElement, Node, Node> = event;
|
||||
self.onNodeDragged.emit(new NodeEvent(e, n));
|
||||
self.onNodeDragged.emit(new NodeDragged(e, n));
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -26,9 +26,9 @@ import { SelectionManager } from "../../cartography/managers/selection-manager";
|
||||
import { InRectangleHelper } from "../../cartography/helpers/in-rectangle-helper";
|
||||
import { DrawingsDataSource } from "../../cartography/datasources/drawings-datasource";
|
||||
import { ProgressService } from "../../common/progress/progress.service";
|
||||
import { NodeEvent } from '../../cartography/widgets/nodes';
|
||||
import { MapChangeDetectorRef } from '../../cartography/services/map-change-detector-ref';
|
||||
import { LinkCreated } from '../../cartography/components/draw-link-tool/draw-link-tool.component';
|
||||
import { NodeContextMenu, NodeDragged } from '../../cartography/events/nodes';
|
||||
import { LinkCreated } from '../../cartography/events/links';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -190,7 +190,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
setUpMapCallbacks(project: Project) {
|
||||
this.mapChild.graphLayout.getNodesWidget().setDraggingEnabled(!this.readonly);
|
||||
|
||||
const onContextMenu = this.mapChild.graphLayout.getNodesWidget().onContextMenu.subscribe((eventNode: NodeEvent) => {
|
||||
const onContextMenu = this.mapChild.graphLayout.getNodesWidget().onContextMenu.subscribe((eventNode: NodeContextMenu) => {
|
||||
this.nodeContextMenu.open(
|
||||
eventNode.node,
|
||||
eventNode.event.clientY,
|
||||
@ -220,7 +220,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
onNodeDragged(nodeEvent: NodeEvent) {
|
||||
onNodeDragged(nodeEvent: NodeDragged) {
|
||||
this.nodesDataSource.update(nodeEvent.node);
|
||||
this.nodeService
|
||||
.updatePosition(this.server, nodeEvent.node, nodeEvent.node.x, nodeEvent.node.y)
|
||||
|
Loading…
Reference in New Issue
Block a user