From c0d77ed2797cd5b66f63c15a5453bdf3929c3753 Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Mon, 31 Dec 2018 07:14:48 -0800 Subject: [PATCH] Review fixes --- src/app/app.module.ts | 4 +- .../components/d3-map/d3-map.component.ts | 68 +++++++++------ .../interface-label-dragged.component.spec.ts | 5 +- .../project-map/project-map.component.html | 5 -- .../project-map/project-map.component.spec.ts | 86 +++---------------- .../project-map/project-map.component.ts | 14 ++- src/app/services/tools.service.spec.ts | 0 src/app/services/tools.service.ts | 33 +++++++ 8 files changed, 104 insertions(+), 111 deletions(-) create mode 100644 src/app/services/tools.service.spec.ts create mode 100644 src/app/services/tools.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3dbdb464..0ca0f3ad 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -82,6 +82,7 @@ import { NodeLabelDraggedComponent } from './components/drawings-listeners/node- import { DrawingDraggedComponent } from './components/drawings-listeners/drawing-dragged/drawing-dragged.component'; import { LinkCreatedComponent } from './components/drawings-listeners/link-created/link-created.component'; import { InterfaceLabelDraggedComponent } from './components/drawings-listeners/interface-label-dragged/interface-label-dragged.component'; +import { ToolsService } from './services/tools.service'; if (environment.production) { @@ -177,7 +178,8 @@ if (environment.production) { DrawingsDataSource, ServerErrorHandler, ServerDatabase, - ProjectNameValidator + ProjectNameValidator, + ToolsService ], entryComponents: [ AddServerDialogComponent, diff --git a/src/app/cartography/components/d3-map/d3-map.component.ts b/src/app/cartography/components/d3-map/d3-map.component.ts index 97c507ab..b7a8c922 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.ts +++ b/src/app/cartography/components/d3-map/d3-map.component.ts @@ -22,6 +22,7 @@ import { TextEditingTool } from '../../tools/text-editing-tool'; import { TextAddingComponent } from '../text-adding/text-adding.component'; import { Server } from '../../../models/server'; import { TextAddingTool } from '../../tools/text-adding-tool'; +import { ToolsService } from '../../../services/tools.service'; @Component({ @@ -46,6 +47,9 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { private svg: Selection; private onChangesDetected: Subscription; + private subscriptions: Subscription[] = []; + + private drawLinkTool: boolean; protected settings = { 'show_interface_labels': true @@ -64,6 +68,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { protected textAddingToolWidget: TextAddingTool, protected textEditingToolWidget: TextEditingTool, public graphLayout: GraphLayout, + private toolsService: ToolsService ) { this.parentNativeElement = element.nativeElement; } @@ -75,32 +80,6 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { this.mapChangeDetectorRef.detectChanges(); } - @Input('moving-tool') - set movingTool(value) { - this.movingToolWidget.setEnabled(value); - this.mapChangeDetectorRef.detectChanges(); - } - - @Input('selection-tool') - set selectionTool(value) { - this.selectionToolWidget.setEnabled(value); - this.mapChangeDetectorRef.detectChanges(); - } - - @Input('text-adding-tool') - set textAddingTool(value){ - this.textAddingToolWidget.setEnabled(value); - this.mapChangeDetectorRef.detectChanges(); - } - - @Input('text-editing-tool') - set textEditingTool(value){ - this.textEditingToolWidget.setEnabled(value); - this.mapChangeDetectorRef.detectChanges(); - } - - @Input('draw-link-tool') drawLinkTool: boolean; - @Input('readonly') set readonly(value) { this.mapSettings.isReadOnly = value; } @@ -134,11 +113,48 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { this.redraw(); } }); + + this.subscriptions.push( + this.toolsService.isTextAddingToolActivated.subscribe((value: boolean) => { + this.textAddingToolWidget.setEnabled(value); + this.mapChangeDetectorRef.detectChanges(); + }) + ); + + this.subscriptions.push( + this.toolsService.isTextEditingToolActivated.subscribe((value: boolean) => { + this.textEditingToolWidget.setEnabled(value); + this.mapChangeDetectorRef.detectChanges(); + }) + ); + + this.subscriptions.push( + this.toolsService.isMovingToolActivated.subscribe((value: boolean) => { + this.movingToolWidget.setEnabled(value); + this.mapChangeDetectorRef.detectChanges(); + }) + ); + + this.subscriptions.push( + this.toolsService.isSelectionToolActivated.subscribe((value: boolean) => { + this.selectionToolWidget.setEnabled(value); + this.mapChangeDetectorRef.detectChanges(); + }) + ); + + this.subscriptions.push( + this.toolsService.isDrawLinkToolActivated.subscribe((value: boolean) => { + this.drawLinkTool = value; + }) + ); } ngOnDestroy() { this.graphLayout.disconnect(this.svg); this.onChangesDetected.unsubscribe(); + this.subscriptions.forEach((subscription: Subscription) => { + subscription.unsubscribe(); + }); } public createGraph(domElement: HTMLElement) { diff --git a/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.spec.ts b/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.spec.ts index 426882c7..552c54c1 100644 --- a/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.spec.ts +++ b/src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.spec.ts @@ -4,17 +4,14 @@ import { MockedLinkService } from '../../project-map/project-map.component.spec' import { LinksEventSource } from '../../../cartography/events/links-event-source'; import { LinkService } from '../../../services/link.service'; import { LinksDataSource } from '../../../cartography/datasources/links-datasource'; -import { LinkCreatedComponent } from '../link-created/link-created.component'; import { DraggedDataEvent } from '../../../cartography/events/event-source'; -import { DrawingElement } from '../../../cartography/models/drawings/drawing-element'; -import { MapDrawing } from '../../../cartography/models/map/map-drawing'; import { MapLinkNode } from '../../../cartography/models/map/map-link-node'; import { Observable } from 'rxjs'; import { MapLabel } from '../../../cartography/models/map/map-label'; import { Link } from '../../../models/link'; import { Label } from '../../../cartography/models/label'; -fdescribe('InterfaceLabelDraggedComponent', () => { +describe('InterfaceLabelDraggedComponent', () => { let component: InterfaceLabelDraggedComponent; let fixture: ComponentFixture; let mockedLinkService = new MockedLinkService; diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index fe8caa2e..a4f57a13 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -8,11 +8,6 @@ [width]="project.scene_width" [height]="project.scene_height" [show-interface-labels]="project.show_interface_labels" - [selection-tool]="tools.selection" - [moving-tool]="tools.moving" - [text-editing-tool]="tools.text_editing" - [text-adding-tool]="drawTools.isTextChosen" - [draw-link-tool]="tools.draw_link" [readonly]="inReadOnlyMode" (nodeDragged)="onNodeDragged($event)" (drawingDragged)="onDrawingDragged($event)" diff --git a/src/app/components/project-map/project-map.component.spec.ts b/src/app/components/project-map/project-map.component.spec.ts index 831b6a87..e026dcdb 100644 --- a/src/app/components/project-map/project-map.component.spec.ts +++ b/src/app/components/project-map/project-map.component.spec.ts @@ -14,39 +14,23 @@ import { ProjectWebServiceHandler } from '../../handlers/project-web-service-han import { MapChangeDetectorRef } from '../../cartography/services/map-change-detector-ref'; import { NodeWidget } from '../../cartography/widgets/node'; import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-node-to-node-converter'; -import { MapPortToPortConverter } from '../../cartography/converters/map/map-port-to-port-converter'; import { NodesDataSource } from '../../cartography/datasources/nodes-datasource'; import { LinksDataSource } from '../../cartography/datasources/links-datasource'; -import { NodesEventSource } from '../../cartography/events/nodes-event-source'; -import { DrawingsEventSource } from '../../cartography/events/drawings-event-source'; -import { LinksEventSource } from '../../cartography/events/links-event-source'; -import { MapDrawingToSvgConverter } from '../../cartography/converters/map/map-drawing-to-svg-converter'; import { DrawingsDataSource } from '../../cartography/datasources/drawings-datasource'; import { CommonModule } from '@angular/common'; import { ANGULAR_MAP_DECLARATIONS } from '../../cartography/angular-map.imports'; import { NO_ERRORS_SCHEMA } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { SymbolService } from '../../services/symbol.service'; import { MockedSettingsService } from '../../services/settings.service.spec'; import { MockedServerService } from '../../services/server.service.spec'; import { MockedProjectService } from '../../services/project.service.spec'; import { Observable } from 'rxjs/Rx'; import { Drawing } from '../../cartography/models/drawing'; import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component'; -import { Project } from '../../models/project'; import { of } from 'rxjs'; -import { DrawingElement } from '../../cartography/models/drawings/drawing-element'; -import { RectElement } from '../../cartography/models/drawings/rect-element'; -import { MapDrawing } from '../../cartography/models/map/map-drawing'; import { Server } from '../../models/server'; -import { ResizedDataEvent } from '../../cartography/events/event-source'; -import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter'; -import { DefaultDrawingsFactory } from '../../cartography/helpers/default-drawings-factory'; -import { Label } from '../../cartography/models/label'; import { Node } from '../../cartography/models/node'; -import { Port } from '../../models/port'; -import { Link } from '../../models/link'; -import { LinkNode } from '../../models/link-node'; +import { ToolsService } from '../../services/tools.service'; export class MockedProgressService { public activate() {} @@ -56,11 +40,11 @@ export class MockedNodeService { public node = { label: {} } as Node; constructor() {} - updateLabel(server: Server, node: Node, label: Label): Observable { + updateLabel(): Observable { return of(this.node); } - updatePosition(server: Server, node: Node, x: number, y: number): Observable { + updatePosition(): Observable { return of(this.node); } } @@ -97,11 +81,11 @@ export class MockedDrawingService { export class MockedLinkService { constructor() {} - createLink(server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port) { + createLink() { return of({}); } - updateNodes(server: Server, link: Link, nodes: LinkNode[]){ + updateNodes(){ return of({}); } } @@ -142,7 +126,6 @@ describe('ProjectMapComponent', () => { { provide: ActivatedRoute }, { provide: ServerService, useClass: MockedServerService }, { provide: ProjectService, useClass: MockedProjectService }, - { provide: SymbolService }, { provide: NodeService }, { provide: LinkService }, { provide: DrawingService, useValue: drawingService}, @@ -151,19 +134,11 @@ describe('ProjectMapComponent', () => { { provide: MapChangeDetectorRef }, { provide: NodeWidget }, { provide: MapNodeToNodeConverter }, - { provide: MapPortToPortConverter }, { provide: NodesDataSource }, { provide: LinksDataSource }, { provide: DrawingsDataSource, useValue: drawingsDataSource}, - { provide: NodesEventSource }, - { provide: DrawingsEventSource }, - { provide: LinksEventSource }, - { provide: DefaultDrawingsFactory }, - { provide: MapDrawingToSvgConverter, useValue: { - convert: () => { return ''} - } }, { provide: SettingsService, useClass: MockedSettingsService }, - { provide: MapLabelToLabelConverter} + { provide: ToolsService } ], declarations: [ ProjectMapComponent, @@ -186,47 +161,6 @@ describe('ProjectMapComponent', () => { expect(component).toBeTruthy(); }); - xit('should update position on resizing event', () => { - let drawingElement: DrawingElement; - let rect = new RectElement(); - rect.fill = "#ffffff"; - rect.fill_opacity = 1.0; - rect.stroke = "#000000"; - rect.stroke_width = 2; - rect.width = 200; - rect.height = 100; - drawingElement = rect; - let mapDrawing = new MapDrawing; - mapDrawing.id = '1'; - mapDrawing.projectId = '1'; - mapDrawing.rotation = 1; - mapDrawing.svg = ''; - mapDrawing.x = 0; - mapDrawing.y = 0; - mapDrawing.z = 0; - mapDrawing.element = drawingElement; - let event = new ResizedDataEvent(mapDrawing,0,0,100,100); - spyOn(drawingService, 'updateSizeAndPosition').and.returnValue( Observable.of({})); - - //component.onDrawingResized(event); - - expect(drawingService.updateSizeAndPosition).toHaveBeenCalled(); - }); - - xit('should add selected drawing', () => { - component.mapChild = { context: {} } as D3MapComponent; - component.project = { project_id: "1" } as Project; - component.mapChild.context.getZeroZeroTransformationPoint = jasmine.createSpy('HTML element').and.callFake(() => { return {x: 0, y: 0}}); - var dummyElement = document.createElement('map'); - document.getElementsByClassName = jasmine.createSpy('HTML element').and.callFake(() => { return ([dummyElement])}); - spyOn(drawingsDataSource, 'add'); - - component.addDrawing("rectangle"); - dummyElement.click(); - - expect(drawingsDataSource.add).toHaveBeenCalled(); - }); - it('should hide draw tools when hide menu is called', () => { var dummyElement = document.createElement('map'); document.getElementsByClassName = jasmine.createSpy('HTML element').and.callFake(() => { return ([dummyElement])}); @@ -236,4 +170,12 @@ describe('ProjectMapComponent', () => { expect(component.resetDrawToolChoice).toHaveBeenCalled(); }); + + it('should reset choice on draw menu after saving drawing', () => { + spyOn(component, 'resetDrawToolChoice'); + + component.onDrawingSaved(); + + expect(component.resetDrawToolChoice).toHaveBeenCalled(); + }); }); diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index c96e6d5d..7aa8dd83 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -28,6 +28,7 @@ import { DrawingService } from '../../services/drawing.service'; import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-node-to-node-converter'; import { SettingsService, Settings } from '../../services/settings.service'; import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component'; +import { ToolsService } from '../../services/tools.service'; @Component({ @@ -43,6 +44,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { public symbols: Symbol[] = []; public project: Project; public server: Server; + public selectedDrawing: string; private ws: Subject; tools = { @@ -62,8 +64,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy { 'visibility': false }; - protected selectedDrawing: string; - private inReadOnlyMode = false; @ViewChild(NodeContextMenuComponent) nodeContextMenu: NodeContextMenuComponent; @@ -85,7 +85,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy { private nodesDataSource: NodesDataSource, private linksDataSource: LinksDataSource, private drawingsDataSource: DrawingsDataSource, - private settingsService: SettingsService + private settingsService: SettingsService, + private toolsService: ToolsService ) {} ngOnInit() { @@ -221,8 +222,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.inReadOnlyMode = value; if (value) { this.tools.selection = false; + this.toolsService.selectionToolActivation(false); } else { this.tools.selection = true; + this.toolsService.selectionToolActivation(true); } } @@ -232,13 +235,16 @@ export class ProjectMapComponent implements OnInit, OnDestroy { public toggleMovingMode() { this.tools.moving = !this.tools.moving; + this.toolsService.movingToolActivation(this.tools.moving); if (!this.readonly) { this.tools.selection = !this.tools.moving; + this.toolsService.selectionToolActivation(this.tools.selection); } } public toggleDrawLineMode() { this.tools.draw_link = !this.tools.draw_link; + this.toolsService.drawLinkToolActivation(this.tools.draw_link); } public toggleShowInterfaceLabels(enabled: boolean) { @@ -270,6 +276,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.drawTools.isEllipseChosen = false; this.drawTools.isRectangleChosen = false; this.drawTools.isLineChosen = false; + this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen); break; } @@ -282,6 +289,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.drawTools.isLineChosen = false; this.drawTools.isTextChosen = false; this.selectedDrawing = ""; + this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen); } public hideMenu(){ diff --git a/src/app/services/tools.service.spec.ts b/src/app/services/tools.service.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/services/tools.service.ts b/src/app/services/tools.service.ts new file mode 100644 index 00000000..f90593ab --- /dev/null +++ b/src/app/services/tools.service.ts @@ -0,0 +1,33 @@ +import { Injectable } from "@angular/core"; +import { Subject } from 'rxjs'; + +@Injectable() +export class ToolsService { + isSelectionToolActivated = new Subject(); + isMovingToolActivated = new Subject(); + isTextEditingToolActivated = new Subject(); + isTextAddingToolActivated = new Subject(); + isDrawLinkToolActivated = new Subject(); + + constructor(){} + + selectionToolActivation(value: boolean){ + this.isSelectionToolActivated.next(value); + } + + movingToolActivation(value: boolean){ + this.isMovingToolActivated.next(value); + } + + textEditingToolActivation(value: boolean){ + this.isTextEditingToolActivated.next(value); + } + + textAddingToolActivation(value: boolean){ + this.isTextAddingToolActivated.next(value); + } + + drawLinkToolActivation(value: boolean){ + this.isDrawLinkToolActivated.next(value); + } +}