diff --git a/src/app/cartography/shared/widgets/graph.widget.ts b/src/app/cartography/shared/widgets/graph.widget.ts index 118f4e35..656455aa 100644 --- a/src/app/cartography/shared/widgets/graph.widget.ts +++ b/src/app/cartography/shared/widgets/graph.widget.ts @@ -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; diff --git a/src/app/cartography/shared/widgets/links.widget.ts b/src/app/cartography/shared/widgets/links.widget.ts index 2d7ff4fb..db7167ce 100644 --- a/src/app/cartography/shared/widgets/links.widget.ts +++ b/src/app/cartography/shared/widgets/links.widget.ts @@ -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) { const self = this; - selection.each(function (this: SVGGElement, l: Link) { + selection + .each(function (this: SVGGElement, l: Link) { const link_group = select(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('circle.status_started') + const status_started = link_group + .selectAll('circle.status_started') .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started')); - const status_started_enter = status_started.enter().append('circle'); + const status_started_enter = status_started + .enter() + .append('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('rect.status_stopped') + const status_stopped = link_group + .selectAll('rect.status_stopped') .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped')); - const status_stopped_enter = status_stopped.enter().append('rect'); + const status_stopped_enter = status_stopped + .enter() + .append('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(); } } diff --git a/src/app/cartography/shared/widgets/nodes.widget.ts b/src/app/cartography/shared/widgets/nodes.widget.ts index 5fe3ff7e..ed52d6bd 100644 --- a/src/app/cartography/shared/widgets/nodes.widget.ts +++ b/src/app/cartography/shared/widgets/nodes.widget.ts @@ -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('g.node') + const node = view + .selectAll('g.node') .data(nodes, (n: Node) => { return n.node_id; }); - const node_enter = node.enter() - .append('g') - .attr('class', 'node'); + const node_enter = node + .enter() + .append('g') + .attr('class', 'node'); - const node_image = node_enter.append('image') + node_enter + .append('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('text') + .attr('class', 'label'); - node_enter.append('circle') - .attr('class', 'node_point') - .attr('r', 2); + if (this.debug) { + node_enter + .append('circle') + .attr('class', 'node_point') + .attr('r', 2); - node_enter.append('text') - .attr('class', 'label'); - - node_enter.append('text') - .attr('class', 'node_point_label') - .attr('x', '-100') - .attr('y', '0'); + node_enter + .append('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(); } }