Separate events

This commit is contained in:
ziajka 2018-11-06 13:04:52 +01:00
parent c6f59243ff
commit 22ddb3d51e
9 changed files with 56 additions and 42 deletions

View File

@ -39,6 +39,6 @@ import { D3_MAP_IMPORTS } from './d3-map.imports';
Context,
...D3_MAP_IMPORTS
],
exports: [MapComponent]
exports: [ MapComponent ]
})
export class CartographyModule { }

View File

@ -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,

View File

@ -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) => {

View File

@ -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({

View 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
){}
}

View 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 {}

View File

@ -1,5 +1,6 @@
import {Link} from "../../models/link";
import { Injectable } from "@angular/core";
import { Link } from "../../models/link";
@Injectable()
export class MultiLinkCalculatorHelper {

View File

@ -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));
});
};

View File

@ -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)