ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-20 08:10:49 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

No node points when not in debug

Browse Source
This commit is contained in:
ziajka 2017-12-01 13:20:46 +01:00
parent 732fcae48d
commit e19503d1a3
3 changed files with 66 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/cartography/shared/widgets/graph.widget.ts
View File

@ -7,11 +7,10 @@ import { SVGSelection } from "../../../map/models/types";
import { LinksWidget } from "./links.widget";
import { D3ZoomEvent, zoom } from "d3-zoom";
import { event } from "d3-selection";
import {Drawing} from "../models/drawing.model";
import {DrawingsWidget} from "./drawings.widget";
import { Drawing } from "../models/drawing.model";
import { DrawingsWidget } from "./drawings.widget";
export class GraphLayout implements Widget {
private nodes: Node[] = [];
private links: Link[] = [];
private drawings: Drawing[] = [];
@ -48,10 +47,6 @@ export class GraphLayout implements Widget {
return this.linksWidget;
}
public getCanvas(view: SVGSelection) {
}
draw(view: SVGSelection, context: Context) {
const self = this;

59
src/app/cartography/shared/widgets/links.widget.ts
View File

@ -1,5 +1,4 @@
import {BaseType, select, Selection} from "d3-selection";
import { line } from "d3-shape";
import { Widget } from "./widget";
import { SVGSelection } from "../../../map/models/types";
@ -27,7 +26,8 @@ export class LinksWidget implements Widget {
public revise(selection: Selection<BaseType, Link, SVGElement, any>) {
const self = this;
selection.each(function (this: SVGGElement, l: Link) {
selection
.each(function (this: SVGGElement, l: Link) {
const link_group = select<SVGGElement, Link>(this);
const link_widget = self.getLinkWidget(l);
@ -43,35 +43,48 @@ export class LinksWidget implements Widget {
new LinkStatus(end_point.x, end_point.y, l.target.status)
];
const status_started = link_group.selectAll<SVGCircleElement, LinkStatus>('circle.status_started')
const status_started = link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_started')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
const status_started_enter = status_started.enter().append<SVGCircleElement>('circle');
const status_started_enter = status_started
.enter()
.append<SVGCircleElement>('circle');
status_started.merge(status_started_enter)
.attr('class', 'status_started')
.attr('cx', (ls: LinkStatus) => ls.x)
.attr('cy', (ls: LinkStatus) => ls.y)
.attr('r', 4)
.attr('fill', '#2ecc71');
status_started
.merge(status_started_enter)
.attr('class', 'status_started')
.attr('cx', (ls: LinkStatus) => ls.x)
.attr('cy', (ls: LinkStatus) => ls.y)
.attr('r', 4)
.attr('fill', '#2ecc71');
status_started.exit().remove();
status_started
.exit()
.remove();
const status_stopped = link_group.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
const status_stopped = link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
const status_stopped_enter = status_stopped.enter().append<SVGRectElement>('rect');
const status_stopped_enter = status_stopped
.enter()
.append<SVGRectElement>('rect');
const STOPPED_STATUS_RECT_WIDTH = 6;
status_stopped.merge(status_stopped_enter)
.attr('class', 'status_stopped')
.attr('x', (ls: LinkStatus) => ls.x - STOPPED_STATUS_RECT_WIDTH / 2.)
.attr('y', (ls: LinkStatus) => ls.y - STOPPED_STATUS_RECT_WIDTH / 2.)
.attr('width', STOPPED_STATUS_RECT_WIDTH)
.attr('height', STOPPED_STATUS_RECT_WIDTH)
.attr('fill', 'red');
status_stopped
.merge(status_stopped_enter)
.attr('class', 'status_stopped')
.attr('x', (ls: LinkStatus) => ls.x - STOPPED_STATUS_RECT_WIDTH / 2.)
.attr('y', (ls: LinkStatus) => ls.y - STOPPED_STATUS_RECT_WIDTH / 2.)
.attr('width', STOPPED_STATUS_RECT_WIDTH)
.attr('height', STOPPED_STATUS_RECT_WIDTH)
.attr('fill', 'red');
status_stopped.exit().remove();
status_stopped
.exit()
.remove();
})
.attr('transform', function(l) {
@ -103,6 +116,8 @@ export class LinksWidget implements Widget {
this.revise(link.merge(link_enter));
link.exit().remove();
link
.exit()
.remove();
}
}

46
src/app/cartography/shared/widgets/nodes.widget.ts
View File

@ -5,11 +5,10 @@ import {event, select} from "d3-selection";
import {D3DragEvent, drag} from "d3-drag";
import {Symbol} from "../../../shared/models/symbol";
export interface NodeOnContextMenuListener {
onContextMenu(): void;
};
export class NodesWidget implements Widget {
private debug = false;
private onContextMenuCallback: (event: any, node: Node) => void;
private onNodeDraggedCallback: (event: any, node: Node) => void;
private onNodeDraggingCallbacks: ((event: any, node: Node) => void)[] = [];
@ -62,16 +61,19 @@ export class NodesWidget implements Widget {
public draw(view: SVGSelection, nodes: Node[]) {
const self = this;
const node = view.selectAll<SVGGElement, any>('g.node')
const node = view
.selectAll<SVGGElement, any>('g.node')
.data(nodes, (n: Node) => {
return n.node_id;
});
const node_enter = node.enter()
.append<SVGGElement>('g')
.attr('class', 'node');
const node_enter = node
.enter()
.append<SVGGElement>('g')
.attr('class', 'node');
const node_image = node_enter.append<SVGImageElement>('image')
node_enter
.append<SVGImageElement>('image')
.attr('xlink:href', (n: Node) => {
const symbol = this.symbols.find((s: Symbol) => s.symbol_id === n.symbol);
if (symbol) {
@ -83,18 +85,22 @@ export class NodesWidget implements Widget {
.attr('width', (n: Node) => n.width)
.attr('height', (n: Node) => n.height);
node_enter
.append<SVGTextElement>('text')
.attr('class', 'label');
node_enter.append<SVGCircleElement>('circle')
.attr('class', 'node_point')
.attr('r', 2);
if (this.debug) {
node_enter
.append<SVGCircleElement>('circle')
.attr('class', 'node_point')
.attr('r', 2);
node_enter.append<SVGTextElement>('text')
.attr('class', 'label');
node_enter.append<SVGTextElement>('text')
.attr('class', 'node_point_label')
.attr('x', '-100')
.attr('y', '0');
node_enter
.append<SVGTextElement>('text')
.attr('class', 'node_point_label')
.attr('x', '-100')
.attr('y', '0');
}
const node_merge = node.merge(node_enter)
.on("contextmenu", function (n: Node, i: number) {
@ -129,6 +135,8 @@ export class NodesWidget implements Widget {
node_merge.call(dragging());
node.exit().remove();
node
.exit()
.remove();
}
}