From 4b60041f8f29801934bb97b90d61570870e77b43 Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Wed, 26 Jun 2019 01:28:52 -0700 Subject: [PATCH 1/3] Menu code moved to separate component --- src/app/app.module.ts | 4 +- .../project-map-menu.component.html | 65 +++++++++++ .../project-map-menu.component.scss | 24 ++++ .../project-map-menu.component.spec.ts | 0 .../project-map-menu.component.ts | 110 ++++++++++++++++++ .../project-map/project-map.component.html | 81 +------------ .../project-map/project-map.component.ts | 93 ++------------- 7 files changed, 214 insertions(+), 163 deletions(-) create mode 100644 src/app/components/project-map/project-map-menu/project-map-menu.component.html create mode 100644 src/app/components/project-map/project-map-menu/project-map-menu.component.scss create mode 100644 src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts create mode 100644 src/app/components/project-map/project-map-menu/project-map-menu.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index cd101275..2e672a41 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -187,6 +187,7 @@ import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/no import { NonNegativeValidator } from './validators/non-negative-validator'; import { RotationValidator } from './validators/rotation-validator'; import { MapSettingService } from './services/mapsettings.service'; +import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component'; if (environment.production) { Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', { @@ -305,7 +306,8 @@ if (environment.production) { AdbutlerComponent, ConsoleDeviceActionComponent, ConsoleComponent, - NodesMenuComponent + NodesMenuComponent, + ProjectMapMenuComponent ], imports: [ BrowserModule, diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.html b/src/app/components/project-map/project-map-menu/project-map-menu.component.html new file mode 100644 index 00000000..b0b20e55 --- /dev/null +++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.html @@ -0,0 +1,65 @@ + + + + + + + + + diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.scss b/src/app/components/project-map/project-map-menu/project-map-menu.component.scss new file mode 100644 index 00000000..f7626cab --- /dev/null +++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.scss @@ -0,0 +1,24 @@ +.menu-button { + outline: 0 !important; + transition: 0.5s; + margin-bottom: 16px; + width: 40px; + margin-right: 12px !important; + margin-left: 12px !important; + background: #263238; + padding: 0; + border: none; + background-color: transparent; +} + +mat-divider.divider { + height: 40px; + margin-left: 1px; + margin-right: 7px; + width: 10px; + color: gray; +} + +.non-visible { + display: none; +} diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts b/src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts new file mode 100644 index 00000000..7f2608c1 --- /dev/null +++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts @@ -0,0 +1,110 @@ +import { Component, OnInit, OnDestroy, Input } from '@angular/core'; +import { Project } from '../../../models/project'; +import { Server } from '../../../models/server'; +import { ToolsService } from '../../../services/tools.service'; +import { MapSettingService } from '../../../services/mapsettings.service'; +import { DrawingService } from '../../../services/drawing.service'; + + +@Component({ + selector: 'app-project-map-menu', + templateUrl: './project-map-menu.component.html', + styleUrls: ['./project-map-menu.component.scss'] +}) +export class ProjectMapMenuComponent implements OnInit, OnDestroy { + @Input() project: Project; + @Input() server: Server; + + public selectedDrawing: string; + protected drawTools = { + isRectangleChosen: false, + isEllipseChosen: false, + isLineChosen: false, + isTextChosen: false + }; + protected isLocked: boolean = false; + + constructor( + private toolsService: ToolsService, + private mapSettingsService: MapSettingService, + private drawingService: DrawingService + ) {} + + ngOnInit() {} + + public addDrawing(selectedObject: string) { + switch (selectedObject) { + case 'rectangle': + this.drawTools.isTextChosen = false; + this.drawTools.isEllipseChosen = false; + this.drawTools.isRectangleChosen = !this.drawTools.isRectangleChosen; + this.drawTools.isLineChosen = false; + break; + case 'ellipse': + this.drawTools.isTextChosen = false; + this.drawTools.isEllipseChosen = !this.drawTools.isEllipseChosen; + this.drawTools.isRectangleChosen = false; + this.drawTools.isLineChosen = false; + break; + case 'line': + this.drawTools.isTextChosen = false; + this.drawTools.isEllipseChosen = false; + this.drawTools.isRectangleChosen = false; + this.drawTools.isLineChosen = !this.drawTools.isLineChosen; + break; + case 'text': + this.drawTools.isTextChosen = !this.drawTools.isTextChosen; + this.drawTools.isEllipseChosen = false; + this.drawTools.isRectangleChosen = false; + this.drawTools.isLineChosen = false; + this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen); + break; + } + + this.selectedDrawing = this.selectedDrawing === selectedObject ? '' : selectedObject; + } + + public onDrawingSaved() { + this.resetDrawToolChoice(); + } + + public resetDrawToolChoice() { + this.drawTools.isRectangleChosen = false; + this.drawTools.isEllipseChosen = false; + this.drawTools.isLineChosen = false; + this.drawTools.isTextChosen = false; + this.selectedDrawing = ''; + this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen); + } + + public changeLockValue() { + this.isLocked = !this.isLocked; + this.mapSettingsService.changeMapLockValue(this.isLocked); + } + + public uploadImageFile(event) { + this.readImageFile(event.target); + } + + private readImageFile(fileInput) { + let file: File = fileInput.files[0]; + let fileReader: FileReader = new FileReader(); + let imageToUpload = new Image(); + + fileReader.onloadend = () => { + let image = fileReader.result; + let svg = this.createSvgFileForImage(image, imageToUpload); + this.drawingService.add(this.server, this.project.project_id, -(imageToUpload.width/2), -(imageToUpload.height/2), svg).subscribe(() => {}); + } + + imageToUpload.onload = () => { fileReader.readAsDataURL(file) }; + imageToUpload.src = window.URL.createObjectURL(file); + } + + private createSvgFileForImage(image: string|ArrayBuffer, imageToUpload: HTMLImageElement) { + return `\n\n` + } + + ngOnDestroy() {} +} diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index 41dcf2df..46430d05 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -87,96 +87,23 @@ -
+
- - - - - + - - diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index c9a84372..bbe77fca 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -44,7 +44,7 @@ import { MapLink } from '../../cartography/models/map/map-link'; import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter'; import { LinkWidget } from '../../cartography/widgets/link'; import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer'; -import { MapSettingService } from '../../services/mapsettings.service'; +import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component'; @Component({ @@ -60,8 +60,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy { public symbols: Symbol[] = []; public project: Project; public server: Server; - public selectedDrawing: string; private ws: Subject; + public isProjectMapMenuVisible: boolean = false; tools = { selection: true, @@ -71,20 +71,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy { }; protected settings: Settings; - - protected drawTools = { - isRectangleChosen: false, - isEllipseChosen: false, - isLineChosen: false, - isTextChosen: false, - visibility: false - }; - protected isLocked: boolean = false; - private inReadOnlyMode = false; @ViewChild(ContextMenuComponent) contextMenu: ContextMenuComponent; @ViewChild(D3MapComponent) mapChild: D3MapComponent; + @ViewChild(ProjectMapMenuComponent) projectMapMenuComponent: ProjectMapMenuComponent; private subscriptions: Subscription[] = []; @@ -112,8 +103,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { private selectionManager: SelectionManager, private selectionTool: SelectionTool, private recentlyOpenedProjectService: RecentlyOpenedProjectService, - private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer, - private mapSettingsService: MapSettingService + private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer ) {} ngOnInit() { @@ -291,7 +281,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { } public onDrawingSaved() { - this.resetDrawToolChoice(); + this.projectMapMenuComponent.resetDrawToolChoice(); } public set readonly(value) { @@ -327,80 +317,13 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.project.show_interface_labels = enabled; } - public addDrawing(selectedObject: string) { - switch (selectedObject) { - case 'rectangle': - this.drawTools.isTextChosen = false; - this.drawTools.isEllipseChosen = false; - this.drawTools.isRectangleChosen = !this.drawTools.isRectangleChosen; - this.drawTools.isLineChosen = false; - break; - case 'ellipse': - this.drawTools.isTextChosen = false; - this.drawTools.isEllipseChosen = !this.drawTools.isEllipseChosen; - this.drawTools.isRectangleChosen = false; - this.drawTools.isLineChosen = false; - break; - case 'line': - this.drawTools.isTextChosen = false; - this.drawTools.isEllipseChosen = false; - this.drawTools.isRectangleChosen = false; - this.drawTools.isLineChosen = !this.drawTools.isLineChosen; - break; - case 'text': - this.drawTools.isTextChosen = !this.drawTools.isTextChosen; - this.drawTools.isEllipseChosen = false; - this.drawTools.isRectangleChosen = false; - this.drawTools.isLineChosen = false; - this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen); - break; - } - - this.selectedDrawing = this.selectedDrawing === selectedObject ? '' : selectedObject; - } - - public resetDrawToolChoice() { - this.drawTools.isRectangleChosen = false; - this.drawTools.isEllipseChosen = false; - this.drawTools.isLineChosen = false; - this.drawTools.isTextChosen = false; - this.selectedDrawing = ''; - this.toolsService.textAddingToolActivation(this.drawTools.isTextChosen); - } - public hideMenu() { - this.resetDrawToolChoice(); - this.drawTools.visibility = false; + this.projectMapMenuComponent.resetDrawToolChoice() + this.isProjectMapMenuVisible = false; } public showMenu() { - this.drawTools.visibility = true; - } - - public uploadImageFile(event) { - this.readImageFile(event.target); - } - - private readImageFile(fileInput) { - let file: File = fileInput.files[0]; - let fileReader: FileReader = new FileReader(); - let imageToUpload = new Image(); - - fileReader.onloadend = () => { - let image = fileReader.result; - let svg = `\n\n`; - this.drawingService.add(this.server, this.project.project_id, -(imageToUpload.width/2), -(imageToUpload.height/2), svg).subscribe(() => {}); - } - - imageToUpload.onload = () => { fileReader.readAsDataURL(file) }; - imageToUpload.src = window.URL.createObjectURL(file); - } - - public changeLockValue() { - this.isLocked = !this.isLocked; - this.mapSettingsService.changeMapLockValue(this.isLocked); + this.isProjectMapMenuVisible = true; } public ngOnDestroy() { From e905a91fd1135f767afc1146c6137d8cf8d7d6c8 Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Wed, 26 Jun 2019 02:48:02 -0700 Subject: [PATCH 2/3] Unit test added --- .../project-map-menu.component.spec.ts | 67 +++++++++++++++++++ .../project-map/project-map.component.spec.ts | 42 +++--------- 2 files changed, 76 insertions(+), 33 deletions(-) diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts b/src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts index e69de29b..f998feac 100644 --- a/src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts +++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts @@ -0,0 +1,67 @@ +import { ProjectMapMenuComponent } from "./project-map-menu.component"; +import { ComponentFixture, async, TestBed } from '@angular/core/testing'; +import { MockedDrawingService } from '../project-map.component.spec'; +import { MapSettingService } from '../../../services/mapsettings.service'; +import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material'; +import { CommonModule } from '@angular/common'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { DrawingService } from '../../../services/drawing.service'; +import { ToolsService } from '../../../services/tools.service'; +import { D3MapComponent } from '../../../cartography/components/d3-map/d3-map.component'; +import { ANGULAR_MAP_DECLARATIONS } from '../../../cartography/angular-map.imports'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; + +describe('ProjectMapMenuComponent', () => { + let component: ProjectMapMenuComponent; + let fixture: ComponentFixture; + let drawingService = new MockedDrawingService(); + let mapSettingService = new MapSettingService(); + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule], + providers: [ + { provide: DrawingService, useValue: drawingService }, + { provide: ToolsService }, + { provide: MapSettingService, useValue: mapSettingService } + ], + declarations: [ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS], + schemas: [NO_ERRORS_SCHEMA] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProjectMapMenuComponent); + component = fixture.componentInstance; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should reset choice on draw menu after saving drawing', () => { + spyOn(component, 'resetDrawToolChoice'); + + component.onDrawingSaved(); + + expect(component.resetDrawToolChoice).toHaveBeenCalled(); + }); + + it('should call map settings service when lock value was changed', () => { + spyOn(mapSettingService, 'changeMapLockValue'); + + component.changeLockValue(); + + expect(mapSettingService.changeMapLockValue).toHaveBeenCalled(); + }); + + it('should call map settings service with proper value', () => { + spyOn(mapSettingService, 'changeMapLockValue'); + + component.changeLockValue(); + expect(mapSettingService.changeMapLockValue).toHaveBeenCalledWith(true); + + component.changeLockValue(); + expect(mapSettingService.changeMapLockValue).toHaveBeenCalledWith(false); + }); +}); 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 2d34ba48..0fc724c0 100644 --- a/src/app/components/project-map/project-map.component.spec.ts +++ b/src/app/components/project-map/project-map.component.spec.ts @@ -44,6 +44,7 @@ import { CapturingSettings } from '../../models/capturingSettings'; import { LinkWidget } from '../../cartography/widgets/link'; import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer'; import { MapSettingService } from '../../services/mapsettings.service'; +import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component'; export class MockedProgressService { public activate() {} @@ -185,7 +186,6 @@ describe('ProjectMapComponent', () => { let nodesDataSource = new MockedNodesDataSource(); let linksDataSource = new MockedLinksDataSource(); let nodeCreatedLabelStylesFixer; - let mapSettingService = new MapSettingService(); beforeEach(async(() => { nodeCreatedLabelStylesFixer = { @@ -222,10 +222,9 @@ describe('ProjectMapComponent', () => { provide: RecentlyOpenedProjectService, useClass: RecentlyOpenedProjectService }, - { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer}, - { provide: MapSettingService, useValue: mapSettingService } + { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer} ], - declarations: [ProjectMapComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS], + declarations: [ProjectMapComponent, ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS], schemas: [NO_ERRORS_SCHEMA] }).compileComponents(); })); @@ -233,6 +232,9 @@ describe('ProjectMapComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(ProjectMapComponent); component = fixture.componentInstance; + component.projectMapMenuComponent = { + resetDrawToolChoice(){} + } as ProjectMapMenuComponent; }); afterEach(() => { @@ -246,38 +248,12 @@ describe('ProjectMapComponent', () => { 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]; + return [dummyElement]; }); - spyOn(component, 'resetDrawToolChoice'); + spyOn(component.projectMapMenuComponent, 'resetDrawToolChoice').and.returnValue(); component.hideMenu(); - expect(component.resetDrawToolChoice).toHaveBeenCalled(); - }); - - it('should reset choice on draw menu after saving drawing', () => { - spyOn(component, 'resetDrawToolChoice'); - - component.onDrawingSaved(); - - expect(component.resetDrawToolChoice).toHaveBeenCalled(); - }); - - it('should call map settings service when lock value was changed', () => { - spyOn(mapSettingService, 'changeMapLockValue'); - - component.changeLockValue(); - - expect(mapSettingService.changeMapLockValue).toHaveBeenCalled(); - }); - - it('should call map settings service with proper value', () => { - spyOn(mapSettingService, 'changeMapLockValue'); - - component.changeLockValue(); - expect(mapSettingService.changeMapLockValue).toHaveBeenCalledWith(true); - - component.changeLockValue(); - expect(mapSettingService.changeMapLockValue).toHaveBeenCalledWith(false); + expect(component.projectMapMenuComponent.resetDrawToolChoice).toHaveBeenCalled(); }); }); From 2c1d85f7b9ef2794796bf6b0e4b1f46e01e31d6a Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Wed, 26 Jun 2019 03:24:32 -0700 Subject: [PATCH 3/3] bugfix --- .../project-map-menu/project-map-menu.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts index 7f2608c1..f7edbc45 100644 --- a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts +++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts @@ -16,13 +16,13 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy { @Input() server: Server; public selectedDrawing: string; - protected drawTools = { + public drawTools = { isRectangleChosen: false, isEllipseChosen: false, isLineChosen: false, isTextChosen: false }; - protected isLocked: boolean = false; + public isLocked: boolean = false; constructor( private toolsService: ToolsService,