diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a970b723..37ec9a2c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -182,6 +182,7 @@ import { ResumeLinkActionComponent } from './components/project-map/context-menu import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component'; import { ConsoleService } from './services/settings/console.service'; import { DefaultConsoleService } from './services/settings/default-console.service'; +import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer'; if (environment.production) { Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', { @@ -369,7 +370,8 @@ if (environment.production) { RecentlyOpenedProjectService, ServerManagementService, ConsoleService, - DefaultConsoleService + DefaultConsoleService, + NodeCreatedLabelStylesFixer ], entryComponents: [ AddServerDialogComponent, diff --git a/src/app/components/project-map/helpers/node-created-label-styles-fixer.spec.ts b/src/app/components/project-map/helpers/node-created-label-styles-fixer.spec.ts new file mode 100644 index 00000000..3e58ec29 --- /dev/null +++ b/src/app/components/project-map/helpers/node-created-label-styles-fixer.spec.ts @@ -0,0 +1,37 @@ +import { NodeCreatedLabelStylesFixer } from "./node-created-label-styles-fixer"; +import { Node } from '../../../cartography/models/node'; +import { Label } from '../../../cartography/models/label'; + +describe('NodeCreatedLabelStylesFixer', () => { + let fixer: NodeCreatedLabelStylesFixer; + let calculator; + + beforeEach(() => { + calculator = { + calculate: (text, styles) => { + return { + width: 50, + height: 10 + }; + } + }; + + fixer = new NodeCreatedLabelStylesFixer( + calculator + ); + }); + + it('should fix label styles and position', () => { + const node = new Node(); + node.width = 100; + node.height = 100; + node.label = new Label(); + node.label.text = "my new label"; + + const fixed = fixer.fix(node); + + expect(fixed.label.style).toEqual('font-family: TypeWriter;font-size: 10.0;font-weight: bold;fill: #000000;fill-opacity: 1.0;'); + expect(fixed.label.x).toEqual(25); + expect(fixed.label.y).toEqual(-18); + }); +}); diff --git a/src/app/components/project-map/helpers/node-created-label-styles-fixer.ts b/src/app/components/project-map/helpers/node-created-label-styles-fixer.ts new file mode 100644 index 00000000..43a3e33d --- /dev/null +++ b/src/app/components/project-map/helpers/node-created-label-styles-fixer.ts @@ -0,0 +1,24 @@ +import { Injectable } from '@angular/core'; +import { Node } from '../../../cartography/models/node'; +import { FontBBoxCalculator } from '../../../cartography/helpers/font-bbox-calculator'; + +@Injectable() +export class NodeCreatedLabelStylesFixer { + MARGIN_BETWEEN_NODE_AND_LABEL = 8; + + constructor( + private fontBBCalculator: FontBBoxCalculator + ) {} + + fix(node: Node): Node { + node.label.style = 'font-family: TypeWriter;font-size: 10.0;font-weight: bold;fill: #000000;fill-opacity: 1.0;'; + const bb = this.fontBBCalculator.calculate(node.label.text, node.label.style); + + // center label + node.label.x = node.width / 2 - bb.width / 2; + + // move above the node + node.label.y = -bb.height - this.MARGIN_BETWEEN_NODE_AND_LABEL; + return node; + } +} 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 11ea2a36..bd399179 100644 --- a/src/app/components/project-map/project-map.component.spec.ts +++ b/src/app/components/project-map/project-map.component.spec.ts @@ -42,6 +42,7 @@ import { Link } from '../../models/link'; import { Project } from '../../models/project'; import { CapturingSettings } from '../../models/capturingSettings'; import { LinkWidget } from '../../cartography/widgets/link'; +import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer'; export class MockedProgressService { public activate() {} @@ -182,8 +183,13 @@ describe('ProjectMapComponent', () => { let drawingsDataSource = new MockedDrawingsDataSource(); let nodesDataSource = new MockedNodesDataSource(); let linksDataSource = new MockedLinksDataSource(); + let nodeCreatedLabelStylesFixer; beforeEach(async(() => { + nodeCreatedLabelStylesFixer = { + fix: (node) => node + }; + TestBed.configureTestingModule({ imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule], providers: [ @@ -214,6 +220,7 @@ describe('ProjectMapComponent', () => { provide: RecentlyOpenedProjectService, useClass: RecentlyOpenedProjectService }, + { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer} ], declarations: [ProjectMapComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS], schemas: [NO_ERRORS_SCHEMA] diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 67f88fb5..1d9ebc27 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -43,6 +43,7 @@ import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProje 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'; @Component({ @@ -108,7 +109,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy { private toolsService: ToolsService, private selectionManager: SelectionManager, private selectionTool: SelectionTool, - private recentlyOpenedProjectService: RecentlyOpenedProjectService + private recentlyOpenedProjectService: RecentlyOpenedProjectService, + private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer ) {} ngOnInit() { @@ -274,6 +276,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.nodeService.createFromTemplate(this.server, this.project, template, 0, 0, 'local').subscribe(() => { this.projectService.nodes(this.server, this.project.project_id).subscribe((nodes: Node[]) => { + + nodes.filter((node) => node.label.style === null).forEach((node) => { + const fixedNode = this.nodeCreatedLabelStylesFixer.fix(node); + this.nodeService.updateLabel(this.server, node, fixedNode.label).subscribe(); + }); + this.nodesDataSource.set(nodes); }); }); diff --git a/src/app/services/settings/console.service.spec.ts b/src/app/services/settings/console.service.spec.ts index 1cbbd288..07c0ac8a 100644 --- a/src/app/services/settings/console.service.spec.ts +++ b/src/app/services/settings/console.service.spec.ts @@ -1,9 +1,5 @@ -import { TestBed } from '@angular/core/testing'; - import { ConsoleService } from './console.service'; import { MockedSettingsService } from '../settings.service.spec'; -import { SettingsService } from '../settings.service'; -import { DefaultConsoleService } from './default-console.service'; describe('ConsoleService', () => { let service: ConsoleService;