From 44bda141b86b15e694eb411d2ec25ae6c6eadfe6 Mon Sep 17 00:00:00 2001 From: Dominik Ziajka Date: Thu, 29 Mar 2018 12:36:35 +0200 Subject: [PATCH] Move node to one layer up/down --- src/app/app.module.ts | 4 ++ src/app/cartography/shared/widgets/layers.ts | 4 +- src/app/cartography/shared/widgets/nodes.ts | 53 ++++++++++--------- .../move-layer-down-action.component.html | 4 ++ .../move-layer-down-action.component.spec.ts | 25 +++++++++ .../move-layer-down-action.component.ts | 29 ++++++++++ .../move-layer-up-action.component.html | 4 ++ .../move-layer-up-action.component.spec.ts | 25 +++++++++ .../move-layer-up-action.component.ts | 28 ++++++++++ .../node-context-menu.component.html | 2 + src/app/shared/services/node.service.ts | 10 ++++ 11 files changed, 162 insertions(+), 26 deletions(-) create mode 100644 src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.html create mode 100644 src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.spec.ts create mode 100644 src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.ts create mode 100644 src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.html create mode 100644 src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.spec.ts create mode 100644 src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 18e6ae78..3dbfa992 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -60,6 +60,8 @@ import { SymbolsDataSource } from "./cartography/shared/datasources/symbols-data import { SelectionManager } from "./cartography/shared/managers/selection-manager"; import { InRectangleHelper } from "./cartography/map/helpers/in-rectangle-helper"; import { DrawingsDataSource } from "./cartography/shared/datasources/drawings-datasource"; +import { MoveLayerDownActionComponent } from './shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component'; +import { MoveLayerUpActionComponent } from './shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component'; @NgModule({ @@ -78,6 +80,8 @@ import { DrawingsDataSource } from "./cartography/shared/datasources/drawings-da ApplianceComponent, ApplianceListDialogComponent, NodeSelectInterfaceComponent, + MoveLayerDownActionComponent, + MoveLayerUpActionComponent, ], imports: [ NgbModule.forRoot(), diff --git a/src/app/cartography/shared/widgets/layers.ts b/src/app/cartography/shared/widgets/layers.ts index 193dd89e..a5a1f206 100644 --- a/src/app/cartography/shared/widgets/layers.ts +++ b/src/app/cartography/shared/widgets/layers.ts @@ -11,7 +11,9 @@ export class LayersWidget implements Widget { const layers_selection = view .selectAll('g.layer') - .data(layers); + .data(layers, (l: Layer) => { + return l.index.toString(); + }); const layers_enter = layers_selection .enter() diff --git a/src/app/cartography/shared/widgets/nodes.ts b/src/app/cartography/shared/widgets/nodes.ts index 4ed383ca..c38f4efd 100644 --- a/src/app/cartography/shared/widgets/nodes.ts +++ b/src/app/cartography/shared/widgets/nodes.ts @@ -16,9 +16,11 @@ export class NodesWidget implements Widget { private onNodeDraggedCallback: (event: any, node: Node) => void; private onNodeDraggingCallbacks: ((event: any, node: Node) => void)[] = []; - private symbols: Symbol[] = []; + private symbols: Symbol[]; - constructor() {} + constructor() { + this.symbols = []; + } public setOnContextMenuCallback(onContextMenuCallback: (event: any, node: Node) => void) { this.onContextMenuCallback = onContextMenuCallback; @@ -101,31 +103,11 @@ export class NodesWidget implements Widget { .append('g') .attr('class', 'node'); + // add image to node node_enter - .append('image') - .attr('xlink:href', (n: Node) => { - const symbol = this.symbols.find((s: Symbol) => s.symbol_id === n.symbol); - if (symbol) { - return 'data:image/svg+xml;base64,' + btoa(symbol.raw); - } - // @todo; we need to have default image - return 'data:image/svg+xml;base64,none'; - }) - .attr('width', (n: Node) => n.width) - .attr('height', (n: Node) => n.height) - .attr('x', (n: Node) => -n.width / 2.) - .attr('y', (n: Node) => -n.height / 2.) - .on('mouseover', function (this, n: Node) { - select(this).attr("class", "over"); - }) - .on('mouseout', function (this, n: Node) { - select(this).attr("class", ""); - }); - - // .attr('width', (n: Node) => n.width) - // .attr('height', (n: Node) => n.height); - + .append('image'); + // add label of node node_enter .append('text') .attr('class', 'label'); @@ -158,6 +140,27 @@ export class NodesWidget implements Widget { } }); + // update image of node + node_merge + .select('image') + .attr('xlink:href', (n: Node) => { + const symbol = this.symbols.find((s: Symbol) => s.symbol_id === n.symbol); + if (symbol) { + return 'data:image/svg+xml;base64,' + btoa(symbol.raw); + } + // @todo; we need to have default image + return 'data:image/svg+xml;base64,none'; + }) + .attr('width', (n: Node) => n.width) + .attr('height', (n: Node) => n.height) + .attr('x', (n: Node) => -n.width / 2.) + .attr('y', (n: Node) => -n.height / 2.) + .on('mouseover', function (this, n: Node) { + select(this).attr("class", "over"); + }) + .on('mouseout', function (this, n: Node) { + select(this).attr("class", ""); + }); this.revise(node_merge); diff --git a/src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.html b/src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.html new file mode 100644 index 00000000..0843376c --- /dev/null +++ b/src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.html @@ -0,0 +1,4 @@ + diff --git a/src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.spec.ts b/src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.spec.ts new file mode 100644 index 00000000..1338a0a1 --- /dev/null +++ b/src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MoveLayerDownActionComponent } from './move-layer-down-action.component'; + +describe('MoveLayerDownActionComponent', () => { + let component: MoveLayerDownActionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MoveLayerDownActionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MoveLayerDownActionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.ts b/src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.ts new file mode 100644 index 00000000..81a7051f --- /dev/null +++ b/src/app/shared/node-context-menu/actions/move-layer-down-action/move-layer-down-action.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Server } from '../../../models/server'; +import { Node } from '../../../../cartography/shared/models/node'; +import { NodesDataSource } from '../../../../cartography/shared/datasources/nodes-datasource'; +import { NodeService } from '../../../services/node.service'; + +@Component({ + selector: 'app-move-layer-down-action', + templateUrl: './move-layer-down-action.component.html' +}) +export class MoveLayerDownActionComponent implements OnInit { + @Input() server: Server; + @Input() node: Node; + + constructor( + private nodesDataSource: NodesDataSource, + private nodeService: NodeService + ) { } + + ngOnInit() {} + + moveLayerDown() { + this.node.z--; + this.nodesDataSource.update(this.node); + this.nodeService + .update(this.server, this.node) + .subscribe((node: Node) => {}); + } +} diff --git a/src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.html b/src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.html new file mode 100644 index 00000000..65b81b6c --- /dev/null +++ b/src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.html @@ -0,0 +1,4 @@ + diff --git a/src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.spec.ts b/src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.spec.ts new file mode 100644 index 00000000..9c450912 --- /dev/null +++ b/src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MoveLayerUpActionComponent } from './move-layer-up-action.component'; + +describe('MoveLayerUpActionComponent', () => { + let component: MoveLayerUpActionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MoveLayerUpActionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MoveLayerUpActionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts b/src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts new file mode 100644 index 00000000..0b55f258 --- /dev/null +++ b/src/app/shared/node-context-menu/actions/move-layer-up-action/move-layer-up-action.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Server } from '../../../models/server'; +import { Node } from '../../../../cartography/shared/models/node'; +import { NodesDataSource } from '../../../../cartography/shared/datasources/nodes-datasource'; +import { NodeService } from '../../../services/node.service'; + +@Component({ + selector: 'app-move-layer-up-action', + templateUrl: './move-layer-up-action.component.html' +}) +export class MoveLayerUpActionComponent implements OnInit { + @Input() server: Server; + @Input() node: Node; + + constructor( + private nodesDataSource: NodesDataSource, + private nodeService: NodeService + ) { } + + ngOnInit() {} + + moveLayerUp() { + this.node.z++; + this.nodeService + .update(this.server, this.node) + .subscribe((node: Node) => {}); + } +} diff --git a/src/app/shared/node-context-menu/node-context-menu.component.html b/src/app/shared/node-context-menu/node-context-menu.component.html index 9d669f5b..986aceaf 100644 --- a/src/app/shared/node-context-menu/node-context-menu.component.html +++ b/src/app/shared/node-context-menu/node-context-menu.component.html @@ -3,5 +3,7 @@ + + diff --git a/src/app/shared/services/node.service.ts b/src/app/shared/services/node.service.ts index 0ecedcf6..1d2344ec 100644 --- a/src/app/shared/services/node.service.ts +++ b/src/app/shared/services/node.service.ts @@ -41,4 +41,14 @@ export class NodeService { 'y': y }); } + + update(server: Server, node: Node): Observable { + return this.httpServer + .put(server, `/projects/${node.project_id}/nodes/${node.node_id}`, { + 'x': node.x, + 'y': node.y, + 'z': node.z + }); + } + }