ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-18 20:47:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Code optimization

Browse Source
This commit is contained in:
piotrpekala7 2021-04-12 13:15:45 +02:00
parent 1dc4887071
commit bba7d8b221
730 changed files with 21307 additions and 19956 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/app.e2e-spec.ts
View File

@ -10,7 +10,7 @@ describe('GNS3 Web UI Application', () => {
it('should have correct page title', async () => {
// arrange
await page.navigateTo();
// act
let text = await page.getTitleText();

26
e2e/helpers/common.po.ts
View File

@ -2,21 +2,21 @@ import { browser, by, element } from 'protractor';
import { ServersPage } from './server.po';
export class TestHelper {
sleep(value: number) {
browser.sleep(value);
}
sleep(value: number) {
browser.sleep(value);
}
waitForLoading() {
browser.waitForAngular();
}
waitForLoading() {
browser.waitForAngular();
}
async asyncForEach(array, callback) {
for (let index = 0; index < array.length; index++) {
await callback(array[index], index, array);
}
async asyncForEach(array, callback) {
for (let index = 0; index < array.length; index++) {
await callback(array[index], index, array);
}
}
getCurrentUrl() {
return browser.getCurrentUrl();
}
getCurrentUrl() {
return browser.getCurrentUrl();
}
}

84
e2e/helpers/project-map.po.ts
View File

@ -1,50 +1,50 @@
import { TestHelper } from "./common.po"
import { browser, by } from "protractor";
import { TestHelper } from './common.po';
import { browser, by } from 'protractor';
export class ProjectMapPage {
helper = new TestHelper();
helper = new TestHelper();
async openAddProjectDialog() {
let addButton = await browser.driver.findElement(by.css('button.addNode'));
await addButton.click();
async openAddProjectDialog() {
let addButton = await browser.driver.findElement(by.css('button.addNode'));
await addButton.click();
}
async addNode() {
let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
await inputs[0].sendKeys('VPCS');
this.helper.sleep(1000);
let selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
await selects[1].click();
this.helper.sleep(1000);
let options = await browser.driver.findElements(by.css('mat-option.mat-option'));
await options[1].click(); //first option should be chosen
this.helper.sleep(1000);
// new select appears after refreshing data
selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
if (selects[2]) {
await selects[2].click();
this.helper.sleep(1000);
options = await browser.driver.findElements(by.css('mat-option.mat-option'));
await options[0].click();
this.helper.sleep(1000);
}
async addNode() {
let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
await inputs[0].sendKeys('VPCS');
this.helper.sleep(1000);
let addButton = await browser.driver.findElement(by.css('button.addButton'));
await addButton.click();
this.helper.sleep(1000);
}
let selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
await selects[1].click();
this.helper.sleep(1000);
async verifyIfNodeWithLabelExists(labelToFind: string) {
this.helper.sleep(5000);
let nodeLabel = await browser.driver.findElement(by.css('#map > g > g.layer > g.nodes > g > g > g > g > text'));
let selectedNode;
let textFromNodeLabel = await nodeLabel.getText();
if (textFromNodeLabel == labelToFind) selectedNode = nodeLabel;
let options = await browser.driver.findElements(by.css('mat-option.mat-option'));
await options[1].click(); //first option should be chosen
this.helper.sleep(1000);
// new select appears after refreshing data
selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
if (selects[2]) {
await selects[2].click();
this.helper.sleep(1000);
options = await browser.driver.findElements(by.css('mat-option.mat-option'));
await options[0].click();
this.helper.sleep(1000);
}
let addButton = await browser.driver.findElement(by.css('button.addButton'));
await addButton.click();
this.helper.sleep(1000);
}
async verifyIfNodeWithLabelExists(labelToFind: string) {
this.helper.sleep(5000);
let nodeLabel = await browser.driver.findElement(by.css('#map > g > g.layer > g.nodes > g > g > g > g > text'));
let selectedNode;
let textFromNodeLabel = await nodeLabel.getText();
if (textFromNodeLabel == labelToFind) selectedNode = nodeLabel;
return selectedNode ? true : false;
}
return selectedNode ? true : false;
}
}

30
e2e/helpers/project.po.ts
View File

@ -1,20 +1,20 @@
import { TestHelper } from "./common.po"
import { browser, by } from "protractor";
import { TestHelper } from './common.po';
import { browser, by } from 'protractor';
export class ProjectsPage {
helper = new TestHelper();
helper = new TestHelper();
async openAddProjectDialog() {
let addButton = await browser.driver.findElement(by.css('button.add-button'));
await addButton.click();
}
async openAddProjectDialog() {
let addButton = await browser.driver.findElement(by.css('button.add-button'));
await addButton.click();
}
async createProject() {
let today = new Date();
let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
await inputs[1].sendKeys('test project ' + today.getUTCMilliseconds());
this.helper.sleep(2000);
let dialogButton = await browser.driver.findElement(by.css('button.add-project-button'));
await dialogButton.click();
}
async createProject() {
let today = new Date();
let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
await inputs[1].sendKeys('test project ' + today.getUTCMilliseconds());
this.helper.sleep(2000);
let dialogButton = await browser.driver.findElement(by.css('button.add-project-button'));
await dialogButton.click();
}
}

58
e2e/helpers/server.po.ts
View File

@ -2,40 +2,40 @@ import { browser, by, element } from 'protractor';
import { TestHelper } from './common.po';
export class ServersPage {
helper = new TestHelper;
helper = new TestHelper();
maximizeWindow() {
browser.driver.manage().window().maximize();
}
maximizeWindow() {
browser.driver.manage().window().maximize();
}
navigateToServersPage() {
return browser.get('/servers');
}
navigateToServersPage() {
return browser.get('/servers');
}
getAddServerNotificationText() {
return browser.driver.findElement(by.className('mat-card-content')).getText();
}
getAddServerNotificationText() {
return browser.driver.findElement(by.className('mat-card-content')).getText();
}
async clickAddServer() {
let serversTable = await this.checkServersTable();
if (serversTable.length === 0) {
let buttons = await browser.driver.findElements(by.className('mat-button mat-button-base'));
await buttons[3].click();
}
async clickAddServer() {
let serversTable = await this.checkServersTable();
if (serversTable.length === 0) {
let buttons = await browser.driver.findElements(by.className('mat-button mat-button-base'));
await buttons[3].click();
}
}
checkServersTable() {
return browser.driver.findElements(by.css('mat-cell'));
}
checkServersTable() {
return browser.driver.findElements(by.css('mat-cell'));
}
async navigateToServerProjects() {
this.helper.sleep(2000);
let hyperlinks = await browser.driver.findElements(by.css('a.table-link'));
let serverLink;
await this.helper.asyncForEach(hyperlinks, async element => {
let text = await element.getText();
if (text === '127.0.0.1') serverLink = element;
});
await serverLink.click();
}
async navigateToServerProjects() {
this.helper.sleep(2000);
let hyperlinks = await browser.driver.findElements(by.css('a.table-link'));
let serverLink;
await this.helper.asyncForEach(hyperlinks, async (element) => {
let text = await element.getText();
if (text === '127.0.0.1') serverLink = element;
});
await serverLink.click();
}
}

56
e2e/project-map.e2e-spec.ts
View File

@ -5,37 +5,37 @@ import { ProjectsPage } from './helpers/project.po';
import { ProjectMapPage } from './helpers/project-map.po';
describe('Project map page', () => {
let serversPage: ServersPage;
let projectsPage: ProjectsPage;
let projectMapPage: ProjectMapPage;
let helper: TestHelper;
let serversPage: ServersPage;
let projectsPage: ProjectsPage;
let projectMapPage: ProjectMapPage;
let helper: TestHelper;
beforeEach(async () => {
serversPage = new ServersPage();
projectsPage = new ProjectsPage();
projectMapPage = new ProjectMapPage();
helper = new TestHelper();
beforeEach(async () => {
serversPage = new ServersPage();
projectsPage = new ProjectsPage();
projectMapPage = new ProjectMapPage();
helper = new TestHelper();
serversPage.maximizeWindow();
await serversPage.navigateToServersPage();
await serversPage.clickAddServer();
await serversPage.navigateToServerProjects();
await projectsPage.openAddProjectDialog();
helper.sleep(2000);
await projectsPage.createProject();
helper.sleep(2000);
});
serversPage.maximizeWindow();
await serversPage.navigateToServersPage();
await serversPage.clickAddServer();
await serversPage.navigateToServerProjects();
await projectsPage.openAddProjectDialog();
helper.sleep(2000);
await projectsPage.createProject();
helper.sleep(2000);
});
it('user should have possibility to add nodes to map', async () => {
// arrange
projectMapPage.openAddProjectDialog();
helper.sleep(2000);
it('user should have possibility to add nodes to map', async () => {
// arrange
projectMapPage.openAddProjectDialog();
helper.sleep(2000);
//act
projectMapPage.addNode();
helper.sleep(2000);
//act
projectMapPage.addNode();
helper.sleep(2000);
//assert
expect(await projectMapPage.verifyIfNodeWithLabelExists('PC1')).toBe(true);
});
//assert
expect(await projectMapPage.verifyIfNodeWithLabelExists('PC1')).toBe(true);
});
});

46
e2e/projects.e2e-spec.ts
View File

@ -4,31 +4,31 @@ import { element } from 'protractor';
import { ProjectsPage } from './helpers/project.po';
describe('Projects page', () => {
let serversPage: ServersPage;
let projectsPage: ProjectsPage;
let helper: TestHelper;
let serversPage: ServersPage;
let projectsPage: ProjectsPage;
let helper: TestHelper;
beforeEach(() => {
serversPage = new ServersPage();
projectsPage = new ProjectsPage();
helper = new TestHelper();
});
beforeEach(() => {
serversPage = new ServersPage();
projectsPage = new ProjectsPage();
helper = new TestHelper();
});
it('user should have possibility to create new project', async () => {
// arrange
serversPage.maximizeWindow();
await serversPage.navigateToServersPage();
await serversPage.clickAddServer();
await serversPage.navigateToServerProjects();
helper.sleep(2000);
it('user should have possibility to create new project', async () => {
// arrange
serversPage.maximizeWindow();
await serversPage.navigateToServersPage();
await serversPage.clickAddServer();
await serversPage.navigateToServerProjects();
helper.sleep(2000);
//act
await projectsPage.openAddProjectDialog();
helper.sleep(2000);
await projectsPage.createProject();
helper.sleep(2000);
//act
await projectsPage.openAddProjectDialog();
helper.sleep(2000);
await projectsPage.createProject();
helper.sleep(2000);
//assert
expect(helper.getCurrentUrl()).toMatch('server/1/project/');
});
//assert
expect(helper.getCurrentUrl()).toMatch('server/1/project/');
});
});

70
e2e/servers.e2e-spec.ts
View File

@ -3,42 +3,42 @@ import { TestHelper } from './helpers/common.po';
import { element } from 'protractor';
describe('Servers page', () => {
let page: ServersPage;
let helper: TestHelper;
let page: ServersPage;
let helper: TestHelper;
beforeEach(() => {
page = new ServersPage();
helper = new TestHelper();
beforeEach(() => {
page = new ServersPage();
helper = new TestHelper();
});
xit('user should have possibility to add server', async () => {
// arrange
page.maximizeWindow();
await page.navigateToServersPage();
// act
let text = await page.getAddServerNotificationText();
// assert
expect(text).toBe("We've discovered GNS3 server on 127.0.0.1:3080, would you like to add to the list?");
});
it('user should see added server in the list', async () => {
// arrange
page.maximizeWindow();
await page.navigateToServersPage();
await page.clickAddServer();
helper.sleep(1000);
// act
let firstRowOfServersTable = await page.checkServersTable();
let serverData = [];
await helper.asyncForEach(firstRowOfServersTable, async (element) => {
serverData.push(await element.getText());
});
xit('user should have possibility to add server', async () => {
// arrange
page.maximizeWindow();
await page.navigateToServersPage();
// act
let text = await page.getAddServerNotificationText();
// assert
expect(text).toBe("We've discovered GNS3 server on 127.0.0.1:3080, would you like to add to the list?");
});
it('user should see added server in the list', async () => {
// arrange
page.maximizeWindow();
await page.navigateToServersPage();
await page.clickAddServer();
helper.sleep(1000);
// act
let firstRowOfServersTable = await page.checkServersTable();
let serverData = [];
await helper.asyncForEach(firstRowOfServersTable, async element => {
serverData.push(await element.getText());
});
// assert
expect(serverData).toContain('127.0.0.1');
expect(serverData).toContain('3080');
});
// assert
expect(serverData).toContain('127.0.0.1');
expect(serverData).toContain('3080');
});
});

119
src/app/app-routing.module.ts
View File

@ -74,10 +74,10 @@ const routes: Routes = [
{ path: '', redirectTo: 'servers', pathMatch: 'full' },
{ path: 'servers', component: ServersComponent },
{ path: 'bundled', component: BundledServerFinderComponent },
{
path: 'server/:server_id/projects',
{
path: 'server/:server_id/projects',
component: ProjectsComponent,
resolve: { server : ServerResolve }
resolve: { server: ServerResolve },
},
{ path: 'help', component: HelpComponent },
{ path: 'help/reportissue', component: ReportIssueComponent },
@ -86,54 +86,87 @@ const routes: Routes = [
{ path: 'installed-software', component: InstalledSoftwareComponent },
{ path: 'server/:server_id/systemstatus', component: SystemStatusComponent },
{ path: 'server/:server_ip/:server_port/project/:project_id', component: DirectLinkComponent},
{
path: 'server/:server_id/project/:project_id/snapshots',
{ path: 'server/:server_ip/:server_port/project/:project_id', component: DirectLinkComponent },
{
path: 'server/:server_id/project/:project_id/snapshots',
component: ListOfSnapshotsComponent,
resolve: { server : ServerResolve }
resolve: { server: ServerResolve },
},
{ path: 'server/:server_id/preferences', component: PreferencesComponent },
{ path: 'server/:server_id/preferences/gns3vm', component: Gns3vmComponent },
// { path: 'server/:server_id/preferences/general', component: GeneralPreferencesComponent },
{ path: 'server/:server_id/preferences/builtin', component: BuiltInPreferencesComponent},
{ path: 'server/:server_id/preferences/builtin', component: BuiltInPreferencesComponent },
{ path: 'server/:server_id/preferences/builtin/ethernet-hubs', component: EthernetHubsTemplatesComponent },
{ path: 'server/:server_id/preferences/builtin/ethernet-hubs/addtemplate', component: EthernetHubsAddTemplateComponent },
{ path: 'server/:server_id/preferences/builtin/ethernet-hubs/:template_id', component: EthernetHubsTemplateDetailsComponent },
{
path: 'server/:server_id/preferences/builtin/ethernet-hubs/addtemplate',
component: EthernetHubsAddTemplateComponent,
},
{
path: 'server/:server_id/preferences/builtin/ethernet-hubs/:template_id',
component: EthernetHubsTemplateDetailsComponent,
},
{ path: 'server/:server_id/preferences/builtin/ethernet-switches', component: EthernetSwitchesTemplatesComponent },
{ path: 'server/:server_id/preferences/builtin/ethernet-switches/addtemplate', component: EthernetSwitchesAddTemplateComponent },
{ path: 'server/:server_id/preferences/builtin/ethernet-switches/:template_id', component: EthernetSwitchesTemplateDetailsComponent },
{
path: 'server/:server_id/preferences/builtin/ethernet-switches',
component: EthernetSwitchesTemplatesComponent,
},
{
path: 'server/:server_id/preferences/builtin/ethernet-switches/addtemplate',
component: EthernetSwitchesAddTemplateComponent,
},
{
path: 'server/:server_id/preferences/builtin/ethernet-switches/:template_id',
component: EthernetSwitchesTemplateDetailsComponent,
},
{ path: 'server/:server_id/preferences/builtin/cloud-nodes', component: CloudNodesTemplatesComponent },
{ path: 'server/:server_id/preferences/builtin/cloud-nodes/addtemplate', component: CloudNodesAddTemplateComponent },
{ path: 'server/:server_id/preferences/builtin/cloud-nodes/:template_id', component: CloudNodesTemplateDetailsComponent },
{
path: 'server/:server_id/preferences/builtin/cloud-nodes/addtemplate',
component: CloudNodesAddTemplateComponent,
},
{
path: 'server/:server_id/preferences/builtin/cloud-nodes/:template_id',
component: CloudNodesTemplateDetailsComponent,
},
//{ path: 'server/:server_id/preferences/dynamips', component: DynamipsPreferencesComponent },
{ path: 'server/:server_id/preferences/dynamips/templates', component: IosTemplatesComponent },
{ path: 'server/:server_id/preferences/dynamips/templates/addtemplate', component: AddIosTemplateComponent },
{ path: 'server/:server_id/preferences/dynamips/templates/:template_id', component: IosTemplateDetailsComponent },
{ path: 'server/:server_id/preferences/dynamips/templates/:template_id/copy', component: CopyIosTemplateComponent },
{
path: 'server/:server_id/preferences/dynamips/templates/:template_id/copy',
component: CopyIosTemplateComponent,
},
// { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
{ path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },
{ path: 'server/:server_id/preferences/qemu/templates/:template_id/copy', component: CopyQemuVmTemplateComponent },
{
path: 'server/:server_id/preferences/qemu/templates/:template_id/copy',
component: CopyQemuVmTemplateComponent,
},
{ path: 'server/:server_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent },
{ path: 'server/:server_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent },
// { path: 'server/:server_id/preferences/vpcs', component: VpcsPreferencesComponent },
{ path: 'server/:server_id/preferences/vpcs/templates', component: VpcsTemplatesComponent },
{ path: 'server/:server_id/preferences/vpcs/templates/:template_id', component: VpcsTemplateDetailsComponent},
{ path: 'server/:server_id/preferences/vpcs/templates/:template_id', component: VpcsTemplateDetailsComponent },
{ path: 'server/:server_id/preferences/vpcs/addtemplate', component: AddVpcsTemplateComponent },
// { path: 'server/:server_id/preferences/virtualbox', component: VirtualBoxPreferencesComponent },
{ path: 'server/:server_id/preferences/virtualbox/templates', component: VirtualBoxTemplatesComponent },
{ path: 'server/:server_id/preferences/virtualbox/templates/:template_id', component: VirtualBoxTemplateDetailsComponent },
{
path: 'server/:server_id/preferences/virtualbox/templates/:template_id',
component: VirtualBoxTemplateDetailsComponent,
},
{ path: 'server/:server_id/preferences/virtualbox/addtemplate', component: AddVirtualBoxTemplateComponent },
// { path: 'server/:server_id/preferences/vmware', component: VmwarePreferencesComponent },
{ path: 'server/:server_id/preferences/vmware/templates', component: VmwareTemplatesComponent },
{ path: 'server/:server_id/preferences/vmware/templates/:template_id', component: VmwareTemplateDetailsComponent },
{
path: 'server/:server_id/preferences/vmware/templates/:template_id',
component: VmwareTemplateDetailsComponent,
},
{ path: 'server/:server_id/preferences/vmware/addtemplate', component: AddVmwareTemplateComponent },
// { path: 'server/:server_id/preferences/traceng', component: TracengPreferencesComponent },
@ -142,37 +175,49 @@ const routes: Routes = [
// { path: 'server/:server_id/preferences/traceng/addtemplate', component: AddTracengTemplateComponent },
{ path: 'server/:server_id/preferences/docker/templates', component: DockerTemplatesComponent },
{ path: 'server/:server_id/preferences/docker/templates/:template_id', component: DockerTemplateDetailsComponent },
{ path: 'server/:server_id/preferences/docker/templates/:template_id/copy', component: CopyDockerTemplateComponent },
{
path: 'server/:server_id/preferences/docker/templates/:template_id',
component: DockerTemplateDetailsComponent,
},
{
path: 'server/:server_id/preferences/docker/templates/:template_id/copy',
component: CopyDockerTemplateComponent,
},
{ path: 'server/:server_id/preferences/docker/addtemplate', component: AddDockerTemplateComponent },
{ path: 'server/:server_id/preferences/iou/templates', component: IouTemplatesComponent },
{ path: 'server/:server_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent },
{ path: 'server/:server_id/preferences/iou/templates/:template_id/copy', component: CopyIouTemplateComponent },
{ path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent }
]
{ path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent },
],
},
{
path: 'server/:server_id/project/:project_id',
{
path: 'server/:server_id/project/:project_id',
component: ProjectMapComponent,
canDeactivate: [ConsoleGuard]
canDeactivate: [ConsoleGuard],
},
{
path: 'server/:server_id/project/:project_id/nodes/:node_id',
component: WebConsoleFullWindowComponent
{
path: 'server/:server_id/project/:project_id/nodes/:node_id',
component: WebConsoleFullWindowComponent,
},
{
path: 'static/web-ui/server/:server_id/project/:project_id/nodes/:node_id',
component: WebConsoleFullWindowComponent
{
path: 'static/web-ui/server/:server_id/project/:project_id/nodes/:node_id',
component: WebConsoleFullWindowComponent,
},
{
path: '**',
component: PageNotFoundComponent
}
component: PageNotFoundComponent,
},
];
@NgModule({
imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled', enableTracing: false, scrollPositionRestoration: 'enabled'})],
exports: [RouterModule]
imports: [
RouterModule.forRoot(routes, {
anchorScrolling: 'enabled',
enableTracing: false,
scrollPositionRestoration: 'enabled',
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}

6
src/app/app.component.html
View File

@ -1,4 +1,4 @@
<div [ngClass]="{dark: darkThemeEnabled, light: !darkThemeEnabled}">
<router-outlet></router-outlet>
<app-adbutler></app-adbutler>
<div [ngClass]="{ dark: darkThemeEnabled, light: !darkThemeEnabled }">
<router-outlet></router-outlet>
<app-adbutler></app-adbutler>
</div>

6
src/app/app.component.scss
View File

@ -1,11 +1,11 @@
mat-menu-panel {
min-height: 0px;
min-height: 0px;
}
.dark {
background: #263238!important;
background: #263238 !important;
}
.light {
background: white!important;
background: white !important;
}

2
src/app/app.component.spec.ts
View File

@ -22,7 +22,7 @@ describe('AppComponent', () => {
declarations: [AppComponent],
imports: [RouterTestingModule, MatIconModule, NgxElectronModule],
providers: [SettingsService, PersistenceService, ProgressService],
schemas: [NO_ERRORS_SCHEMA]
schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();
electronService = TestBed.get(ElectronService);

18
src/app/app.component.ts
View File

@ -6,12 +6,12 @@ import { SettingsService } from './services/settings.service';
import { ThemeService } from './services/theme.service';
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
import { ProgressService } from './common/progress/progress.service';
import { OverlayContainer} from '@angular/cdk/overlay';
import { OverlayContainer } from '@angular/cdk/overlay';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
public darkThemeEnabled: boolean = false;
@ -38,7 +38,7 @@ export class AppComponent implements OnInit {
ngOnInit(): void {
if (this.electronService.isElectronApp) {
this.settingsService.subscribe(settings => {
this.settingsService.subscribe((settings) => {
this.electronService.ipcRenderer.send('settings.changed', settings);
});
}
@ -59,14 +59,14 @@ export class AppComponent implements OnInit {
this.componentCssClass = theme;
}
checkEvent(routerEvent) : void {
checkEvent(routerEvent): void {
if (routerEvent instanceof NavigationStart) {
this.progressService.activate();
}
else if (routerEvent instanceof NavigationEnd ||
routerEvent instanceof NavigationCancel ||
routerEvent instanceof NavigationError) {
} else if (
routerEvent instanceof NavigationEnd ||
routerEvent instanceof NavigationCancel ||
routerEvent instanceof NavigationError
) {
this.progressService.deactivate();
}
}

12
src/app/app.module.ts
View File

@ -470,7 +470,7 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
TemplateNameDialogComponent,
ConfigureCustomAdaptersDialogComponent,
EditNetworkConfigurationDialogComponent,
ReportIssueComponent
ReportIssueComponent,
],
imports: [
AngularReactBrowserModule,
@ -492,7 +492,7 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
NgxChildProcessModule,
MATERIAL_IMPORTS,
NgCircleProgressModule.forRoot(),
OverlayModule
OverlayModule,
],
providers: [
SettingsService,
@ -567,7 +567,7 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
ConsoleGuard,
Title,
ApplianceService,
UpdatesService
UpdatesService,
],
entryComponents: [
AddServerDialogComponent,
@ -615,10 +615,10 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
ChangeHostnameDialogComponent,
ApplianceInfoDialogComponent,
ConfigureCustomAdaptersDialogComponent,
EditNetworkConfigurationDialogComponent
EditNetworkConfigurationDialogComponent,
],
bootstrap: [AppComponent]
bootstrap: [AppComponent],
})
export class AppModule {
constructor(protected _googleAnalyticsService: GoogleAnalyticsService) { }
constructor(protected _googleAnalyticsService: GoogleAnalyticsService) {}
}

2
src/app/cartography/angular-map.imports.ts
View File

@ -23,5 +23,5 @@ export const ANGULAR_MAP_DECLARATIONS = [
TextComponent,
DraggableComponent,
SelectionComponent,
InterfaceLabelComponent
InterfaceLabelComponent,
];

8
src/app/cartography/cartography.module.ts
View File

@ -37,7 +37,7 @@ import {
MapNodesDataSource,
MapLinksDataSource,
MapDrawingsDataSource,
MapSymbolsDataSource
MapSymbolsDataSource,
} from './datasources/map-datasource';
import { LinksEventSource } from './events/links-event-source';
import { D3MapComponent } from './components/d3-map/d3-map.component';
@ -75,7 +75,7 @@ import { SerialLinkWidget } from './widgets/links/serial-link';
SelectionSelectComponent,
DraggableSelectionComponent,
MovingCanvasDirective,
ZoomingCanvasDirective
ZoomingCanvasDirective,
],
providers: [
CssFixer,
@ -122,8 +122,8 @@ import { SerialLinkWidget } from './widgets/links/serial-link';
StylesToFontConverter,
EthernetLinkWidget,
SerialLinkWidget,
...D3_MAP_IMPORTS
...D3_MAP_IMPORTS,
],
exports: [D3MapComponent, ExperimentalMapComponent]
exports: [D3MapComponent, ExperimentalMapComponent],
})
export class CartographyModule {}

32
src/app/cartography/components/d3-map/d3-map.component.html
View File

@ -1,14 +1,38 @@
<svg id="map" #svg class="map" preserveAspectRatio="none" movingCanvas zoomingCanvas>
<filter id="grayscale"><feColorMatrix id="feGrayscale" type="saturate" values="0" /></filter>
<defs>
<pattern attr.x="{{drawingGridX}}" attr.y="{{drawingGridY}}" id="gridDrawing" attr.width="{{project.drawing_grid_size}}" attr.height="{{project.drawing_grid_size}}" patternUnits="userSpaceOnUse">
<path attr.d="M {{project.drawing_grid_size}} 0 L 0 0 0 {{project.drawing_grid_size}}" fill="none" stroke="silver" attr.stroke-width="{{gridVisibility}}"/>
<pattern
attr.x="{{ drawingGridX }}"
attr.y="{{ drawingGridY }}"
id="gridDrawing"
attr.width="{{ project.drawing_grid_size }}"
attr.height="{{ project.drawing_grid_size }}"
patternUnits="userSpaceOnUse"
>
<path
attr.d="M {{ project.drawing_grid_size }} 0 L 0 0 0 {{ project.drawing_grid_size }}"
fill="none"
stroke="silver"
attr.stroke-width="{{ gridVisibility }}"
/>
</pattern>
</defs>
<defs>
<pattern attr.x="{{nodeGridX}}" attr.y="{{nodeGridY}}" id="gridNode" attr.width="{{project.grid_size}}" attr.height="{{project.grid_size}}" patternUnits="userSpaceOnUse">
<path attr.d="M {{project.grid_size}} 0 L 0 0 0 {{project.grid_size}}" fill="none" stroke="DarkSlateGray" attr.stroke-width="{{gridVisibility}}"/>
<pattern
attr.x="{{ nodeGridX }}"
attr.y="{{ nodeGridY }}"
id="gridNode"
attr.width="{{ project.grid_size }}"
attr.height="{{ project.grid_size }}"
patternUnits="userSpaceOnUse"
>
<path
attr.d="M {{ project.grid_size }} 0 L 0 0 0 {{ project.grid_size }}"
fill="none"
stroke="DarkSlateGray"
attr.stroke-width="{{ gridVisibility }}"
/>
</pattern>
</defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

2
src/app/cartography/components/d3-map/d3-map.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('D3MapComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [D3MapComponent]
declarations: [D3MapComponent],
}).compileComponents();
}));

37
src/app/cartography/components/d3-map/d3-map.component.ts
View File

@ -9,7 +9,7 @@ import {
SimpleChange,
EventEmitter,
Output,
ViewChild
ViewChild,
} from '@angular/core';
import { Selection, select } from 'd3-selection';
@ -38,7 +38,7 @@ import { MapSettingsService } from '../../../services/mapsettings.service';
@Component({
selector: 'app-d3-map',
templateUrl: './d3-map.component.html',
styleUrls: ['./d3-map.component.scss']
styleUrls: ['./d3-map.component.scss'],
})
export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
@Input() nodes: Node[] = [];
@ -60,7 +60,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
private subscriptions: Subscription[] = [];
private drawLinkTool: boolean;
protected settings = {
show_interface_labels: true
show_interface_labels: true,
};
public gridVisibility: number = 0;
@ -148,9 +148,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
}
});
this.subscriptions.push(
this.mapScaleService.scaleChangeEmitter.subscribe((value: number) => this.redraw())
);
this.subscriptions.push(this.mapScaleService.scaleChangeEmitter.subscribe((value: number) => this.redraw()));
this.subscriptions.push(
this.toolsService.isMovingToolActivated.subscribe((value: boolean) => {
@ -172,7 +170,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
);
this.gridVisibility = localStorage.getItem('gridVisibility') === 'true' ? 1 : 0;
this.mapSettingsService.isScrollDisabled.subscribe(val => this.resize(val));
this.mapSettingsService.isScrollDisabled.subscribe((val) => this.resize(val));
}
ngOnDestroy() {
@ -190,10 +188,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
public createGraph(domElement: HTMLElement) {
const rootElement = select(domElement);
this.svg = rootElement.select<SVGSVGElement>('svg');
this.graphLayout.connect(
this.svg,
this.context
);
this.graphLayout.connect(this.svg, this.context);
this.graphLayout.draw(this.svg, this.context);
this.mapChangeDetectorRef.hasBeenDrawn = true;
}
@ -227,11 +222,23 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
}
updateGrid() {
if (this.project.grid_size && this.project.grid_size > 0) this.nodeGridX = (this.project.scene_width/2 - (Math.floor(this.project.scene_width/2 / this.project.grid_size) * this.project.grid_size));
if (this.project.grid_size && this.project.grid_size > 0) this.nodeGridY = (this.project.scene_height/2 - (Math.floor(this.project.scene_height/2 / this.project.grid_size) * this.project.grid_size));
if (this.project.grid_size && this.project.grid_size > 0)
this.nodeGridX =
this.project.scene_width / 2 -
Math.floor(this.project.scene_width / 2 / this.project.grid_size) * this.project.grid_size;
if (this.project.grid_size && this.project.grid_size > 0)
this.nodeGridY =
this.project.scene_height / 2 -
Math.floor(this.project.scene_height / 2 / this.project.grid_size) * this.project.grid_size;
if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0) this.drawingGridX = (this.project.scene_width/2 - (Math.floor(this.project.scene_width/2 / this.project.drawing_grid_size) * this.project.drawing_grid_size));
if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0) this.drawingGridY = (this.project.scene_height/2 - (Math.floor(this.project.scene_height/2 / this.project.drawing_grid_size) * this.project.drawing_grid_size));
if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0)
this.drawingGridX =
this.project.scene_width / 2 -
Math.floor(this.project.scene_width / 2 / this.project.drawing_grid_size) * this.project.drawing_grid_size;
if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0)
this.drawingGridY =
this.project.scene_height / 2 -
Math.floor(this.project.scene_height / 2 / this.project.drawing_grid_size) * this.project.drawing_grid_size;
}
@HostListener('window:resize', ['$event'])

28
src/app/cartography/components/draggable-selection/draggable-selection.component.spec.ts
View File

@ -67,8 +67,8 @@ describe('DraggableSelectionComponent', () => {
draggable: {
start: nodesStartEventEmitter,
drag: nodesDragEventEmitter,
end: nodesEndEventEmitter
}
end: nodesEndEventEmitter,
},
};
const drawingsWidgetStub = {
@ -76,11 +76,11 @@ describe('DraggableSelectionComponent', () => {
draggable: {
start: drawingsStartEventEmitter,
drag: drawingsDragEventEmitter,
end: drawingsEndEventEmitter
}
end: drawingsEndEventEmitter,
},
};
const linksWidgetStub = {
redrawLink: () => {}
redrawLink: () => {},
};
const labelWidgetStub = {
@ -88,27 +88,27 @@ describe('DraggableSelectionComponent', () => {
draggable: {
start: labelStartEventEmitter,
drag: labelDragEventEmitter,
end: labelEndEventEmitter
}
end: labelEndEventEmitter,
},
};
const interfaceLabelWidgetStub = {
draggable: {
start: interfaceLabelStartEventEmitter,
drag: interfaceLabelDragEventEmitter,
end: interfaceLabelEndEventEmitter
}
end: interfaceLabelEndEventEmitter,
},
};
const nodesEventSourceStub = {
dragged: { emit: () => {} },
labelDragged: { emit: () => {} }
labelDragged: { emit: () => {} },
};
const drawingsEventSourceStub = {
dragged: { emit: () => {} }
dragged: { emit: () => {} },
};
const linksEventSourceStub = {
interfaceDragged: { emit: () => {} }
interfaceDragged: { emit: () => {} },
};
TestBed.configureTestingModule({
@ -123,9 +123,9 @@ describe('DraggableSelectionComponent', () => {
{ provide: DrawingsEventSource, useValue: drawingsEventSourceStub },
{ provide: GraphDataManager, useValue: mockedGraphDataManager },
{ provide: LinksEventSource, useValue: linksEventSourceStub },
{ provide: MapSettingsService, useClass: MapSettingsService }
{ provide: MapSettingsService, useClass: MapSettingsService },
],
declarations: [DraggableSelectionComponent]
declarations: [DraggableSelectionComponent],
}).compileComponents();
}));

58
src/app/cartography/components/draggable-selection/draggable-selection.component.ts
View File

@ -22,7 +22,7 @@ import { MapSettingsService } from '../../../services/mapsettings.service';
@Component({
selector: 'app-draggable-selection',
templateUrl: './draggable-selection.component.html',
styleUrls: ['./draggable-selection.component.scss']
styleUrls: ['./draggable-selection.component.scss'],
})
export class DraggableSelectionComponent implements OnInit, OnDestroy {
private start: Subscription;
@ -62,25 +62,25 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
).subscribe((evt: DraggableStart<any>) => {
const selected = this.selectionManager.getSelected();
if (evt.datum instanceof MapNode) {
if (selected.filter(item => item instanceof MapNode && item.id === evt.datum.id).length === 0) {
if (selected.filter((item) => item instanceof MapNode && item.id === evt.datum.id).length === 0) {
this.selectionManager.setSelected([evt.datum]);
}
}
if (evt.datum instanceof MapDrawing) {
if (selected.filter(item => item instanceof MapDrawing && item.id === evt.datum.id).length === 0) {
if (selected.filter((item) => item instanceof MapDrawing && item.id === evt.datum.id).length === 0) {
this.selectionManager.setSelected([evt.datum]);
}
}
if (evt.datum instanceof MapLabel) {
if (selected.filter(item => item instanceof MapLabel && item.id === evt.datum.id).length === 0) {
if (selected.filter((item) => item instanceof MapLabel && item.id === evt.datum.id).length === 0) {
this.selectionManager.setSelected([evt.datum]);
}
}
if (evt.datum instanceof MapLinkNode) {
if (selected.filter(item => item instanceof MapLinkNode && item.id === evt.datum.id).length === 0) {
if (selected.filter((item) => item instanceof MapLinkNode && item.id === evt.datum.id).length === 0) {
this.selectionManager.setSelected([evt.datum]);
}
}
@ -95,7 +95,7 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
if (!this.isMapLocked) {
const selected = this.selectionManager.getSelected();
// update nodes
let mapNodes = selected.filter(item => item instanceof MapNode);
let mapNodes = selected.filter((item) => item instanceof MapNode);
const lockedNodes = mapNodes.filter((item: MapNode) => item.locked);
const selectedNodes = mapNodes.filter((item: MapNode) => !item.locked);
selectedNodes.forEach((node: MapNode) => {
@ -107,18 +107,18 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
const links = this.graphDataManager
.getLinks()
.filter(
link =>
(link) =>
(link.target !== undefined && link.target.id === node.id) ||
(link.source !== undefined && link.source.id === node.id)
);
links.forEach(link => {
links.forEach((link) => {
this.linksWidget.redrawLink(svg, link);
});
});
// update drawings
let mapDrawings = selected.filter(item => item instanceof MapDrawing);
let mapDrawings = selected.filter((item) => item instanceof MapDrawing);
const selectedDrawings = mapDrawings.filter((item: MapDrawing) => !item.locked);
selectedDrawings.forEach((drawing: MapDrawing) => {
drawing.x += evt.dx;
@ -127,32 +127,36 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
});
// update labels
let mapLabels = selected.filter(item => item instanceof MapLabel);
const selectedLabels = mapLabels.filter((item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0);
let mapLabels = selected.filter((item) => item instanceof MapLabel);
const selectedLabels = mapLabels.filter(
(item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
);
selectedLabels.forEach((label: MapLabel) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
const isParentNodeSelected = selectedNodes.filter((node) => node.id === label.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}
const node = this.graphDataManager.getNodes().filter(node => node.id === label.nodeId)[0];
const node = this.graphDataManager.getNodes().filter((node) => node.id === label.nodeId)[0];
node.label.x += evt.dx;
node.label.y += evt.dy;
this.labelWidget.redrawLabel(svg, label);
});
// update interface labels
let mapLinkNodes = selected.filter(item => item instanceof MapLinkNode);
const selectedLinkNodes = mapLinkNodes.filter((item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0);
let mapLinkNodes = selected.filter((item) => item instanceof MapLinkNode);
const selectedLinkNodes = mapLinkNodes.filter(
(item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
);
selectedLinkNodes.forEach((interfaceLabel: MapLinkNode) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === interfaceLabel.nodeId).length > 0;
const isParentNodeSelected = selectedNodes.filter((node) => node.id === interfaceLabel.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}
const link = this.graphDataManager
.getLinks()
.filter(link => link.nodes[0].id === interfaceLabel.id || link.nodes[1].id === interfaceLabel.id)[0];
.filter((link) => link.nodes[0].id === interfaceLabel.id || link.nodes[1].id === interfaceLabel.id)[0];
if (link.nodes[0].id === interfaceLabel.id) {
link.nodes[0].label.x += evt.dx;
link.nodes[0].label.y += evt.dy;
@ -176,23 +180,25 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
if (!this.isMapLocked) {
const selected = this.selectionManager.getSelected();
let mapNodes = selected.filter(item => item instanceof MapNode);
let mapNodes = selected.filter((item) => item instanceof MapNode);
const lockedNodes = mapNodes.filter((item: MapNode) => item.locked);
const selectedNodes = mapNodes.filter((item: MapNode) => !item.locked);
selectedNodes.forEach((item: MapNode) => {
this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode>(item, evt.dx, evt.dy));
});
let mapDrawings = selected.filter(item => item instanceof MapDrawing);
let mapDrawings = selected.filter((item) => item instanceof MapDrawing);
const selectedDrawings = mapDrawings.filter((item: MapDrawing) => !item.locked);
selectedDrawings.forEach((item: MapDrawing) => {
this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing>(item, evt.dx, evt.dy));
});
let mapLabels = selected.filter(item => item instanceof MapLabel);
const selectedLabels = mapLabels.filter((item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0);
let mapLabels = selected.filter((item) => item instanceof MapLabel);
const selectedLabels = mapLabels.filter(
(item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
);
selectedLabels.forEach((label: MapLabel) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
const isParentNodeSelected = selectedNodes.filter((node) => node.id === label.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}
@ -200,10 +206,12 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
this.nodesEventSource.labelDragged.emit(new DraggedDataEvent<MapLabel>(label, evt.dx, evt.dy));
});
let mapLinkNodes = selected.filter(item => item instanceof MapLinkNode);
const selectedLinkNodes = mapLinkNodes.filter((item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0)
let mapLinkNodes = selected.filter((item) => item instanceof MapLinkNode);
const selectedLinkNodes = mapLinkNodes.filter(
(item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
);
selectedLinkNodes.forEach((label: MapLinkNode) => {
const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
const isParentNodeSelected = selectedNodes.filter((node) => node.id === label.nodeId).length > 0;
if (isParentNodeSelected) {
return;
}

4
src/app/cartography/components/drawing-adding/drawing-adding.component.spec.ts
View File

@ -14,9 +14,9 @@ describe('DrawingAddingComponent', () => {
imports: [NoopAnimationsModule],
providers: [
{ provide: DrawingsEventSource, useValue: drawingsEventSource },
{ provide: Context, useClass: Context }
{ provide: Context, useClass: Context },
],
declarations: [DrawingAddingComponent]
declarations: [DrawingAddingComponent],
}).compileComponents();
}));

12
src/app/cartography/components/drawing-adding/drawing-adding.component.ts
View File

@ -7,7 +7,7 @@ import { Subscription } from 'rxjs';
@Component({
selector: 'app-drawing-adding',
templateUrl: './drawing-adding.component.html',
styleUrls: ['./drawing-adding.component.scss']
styleUrls: ['./drawing-adding.component.scss'],
})
export class DrawingAddingComponent implements OnInit, OnDestroy {
@Input('svg') svg: SVGSVGElement;
@ -18,15 +18,19 @@ export class DrawingAddingComponent implements OnInit, OnDestroy {
constructor(private drawingsEventSource: DrawingsEventSource, private context: Context) {}
ngOnInit() {
this.drawingSelected = this.drawingsEventSource.selected.subscribe(evt => {
this.drawingSelected = this.drawingsEventSource.selected.subscribe((evt) => {
evt === '' ? this.deactivate() : this.activate();
});
}
activate() {
let listener = (event: MouseEvent) => {
let x = (event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x))/this.context.transformation.k;
let y = (event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y))/this.context.transformation.k;
let x =
(event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x)) /
this.context.transformation.k;
let y =
(event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y)) /
this.context.transformation.k;
this.drawingsEventSource.pointToAddSelected.emit(new AddedDataEvent(x, y));
this.deactivate();

4
src/app/cartography/components/drawing-resizing/drawing-resizing.component.spec.ts
View File

@ -36,9 +36,9 @@ describe('DrawingResizingComponent', () => {
imports: [NoopAnimationsModule],
providers: [
{ provide: DrawingsWidget, useValue: drawingsWidgetMock },
{ provide: DrawingsEventSource, useValue: drawingsEventSource }
{ provide: DrawingsEventSource, useValue: drawingsEventSource },
],
declarations: [DrawingResizingComponent]
declarations: [DrawingResizingComponent],
}).compileComponents();
}));

6
src/app/cartography/components/drawing-resizing/drawing-resizing.component.ts
View File

@ -8,10 +8,8 @@ import { ResizingEnd } from '../../events/resizing';
@Component({
selector: 'app-drawing-resizing',
template: `
<ng-content></ng-content>
`,
styleUrls: ['./drawing-resizing.component.scss']
template: ` <ng-content></ng-content> `,
styleUrls: ['./drawing-resizing.component.scss'],
})
export class DrawingResizingComponent implements OnInit, OnDestroy {
resizingFinished: Subscription;

2
src/app/cartography/components/experimental-map/draggable/draggable.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('DraggableComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DraggableComponent]
declarations: [DraggableComponent],
}).compileComponents();
}));

6
src/app/cartography/components/experimental-map/draggable/draggable.component.ts
View File

@ -8,10 +8,8 @@ export class DraggableDraggedEvent {
@Component({
selector: '[app-draggable]',
template: `
<ng-content></ng-content>
`,
styleUrls: ['./draggable.component.scss']
template: ` <ng-content></ng-content> `,
styleUrls: ['./draggable.component.scss'],
})
export class DraggableComponent implements OnInit, AfterViewInit, OnDestroy {
@Input('app-draggable') item: Point;

2
src/app/cartography/components/experimental-map/drawing/drawing.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('DrawingComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DrawingComponent]
declarations: [DrawingComponent],
}).compileComponents();
}));

2
src/app/cartography/components/experimental-map/drawing/drawing.component.ts
View File

@ -12,7 +12,7 @@ import { DrawingsEventSource } from '../../../events/drawings-event-source';
@Component({
selector: '[app-drawing]',
templateUrl: './drawing.component.html',
styleUrls: ['./drawing.component.scss']
styleUrls: ['./drawing.component.scss'],
})
export class DrawingComponent implements OnInit {
@Input('app-drawing') drawing: MapDrawing;

2
src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('EllipseComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [EllipseComponent]
declarations: [EllipseComponent],
}).compileComponents();
}));

2
src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.ts
View File

@ -5,7 +5,7 @@ import { QtDasharrayFixer } from '../../../../../helpers/qt-dasharray-fixer';
@Component({
selector: '[app-ellipse]',
templateUrl: './ellipse.component.html',
styleUrls: ['./ellipse.component.scss']
styleUrls: ['./ellipse.component.scss'],
})
export class EllipseComponent implements OnInit {
@Input('app-ellipse') ellipse: EllipseElement;

2
src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('ImageComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ImageComponent]
declarations: [ImageComponent],
}).compileComponents();
}));

2
src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.ts
View File

@ -4,7 +4,7 @@ import { ImageElement } from '../../../../../models/drawings/image-element';
@Component({
selector: '[app-image]',
templateUrl: './image.component.html',
styleUrls: ['./image.component.scss']
styleUrls: ['./image.component.scss'],
})
export class ImageComponent implements OnInit {
@Input('app-image') image: ImageElement;

2
src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('LineComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LineComponent]
declarations: [LineComponent],
}).compileComponents();
}));

2
src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.ts
View File

@ -5,7 +5,7 @@ import { LineElement } from '../../../../../models/drawings/line-element';
@Component({
selector: '[app-line]',
templateUrl: './line.component.html',
styleUrls: ['./line.component.scss']
styleUrls: ['./line.component.scss'],
})
export class LineComponent implements OnInit {
@Input('app-line') line: LineElement;

2
src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('RectComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [RectComponent]
declarations: [RectComponent],
}).compileComponents();
}));

2
src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.ts
View File

@ -5,7 +5,7 @@ import { QtDasharrayFixer } from '../../../../../helpers/qt-dasharray-fixer';
@Component({
selector: '[app-rect]',
templateUrl: './rect.component.html',
styleUrls: ['./rect.component.scss']
styleUrls: ['./rect.component.scss'],
})
export class RectComponent implements OnInit {
@Input('app-rect') rect: RectElement;

2
src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('TextComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TextComponent]
declarations: [TextComponent],
}).compileComponents();
}));

2
src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.ts
View File

@ -6,7 +6,7 @@ import { FontFixer } from '../../../../../helpers/font-fixer';
@Component({
selector: '[app-text]',
templateUrl: './text.component.html',
styleUrls: ['./text.component.scss']
styleUrls: ['./text.component.scss'],
})
export class TextComponent implements OnInit, DoCheck {
static MARGIN = 4;

6
src/app/cartography/components/experimental-map/experimental-map.component.ts
View File

@ -9,7 +9,7 @@ import {
SimpleChange,
ChangeDetectionStrategy,
ChangeDetectorRef,
ViewChild
ViewChild,
} from '@angular/core';
import { GraphLayout } from '../../widgets/graph-layout';
@ -29,7 +29,7 @@ import { LayersManager } from '../../managers/layers-manager';
selector: 'app-experimental-map',
templateUrl: './experimental-map.component.html',
styleUrls: ['./experimental-map.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
@Input() nodes: Node[] = [];
@ -48,7 +48,7 @@ export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
private changesDetected: Subscription;
protected settings = {
show_interface_labels: true
show_interface_labels: true,
};
constructor(

2
src/app/cartography/components/experimental-map/interface-label/interface-label.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('InterfaceLabelComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [InterfaceLabelComponent]
declarations: [InterfaceLabelComponent],
}).compileComponents();
}));

4
src/app/cartography/components/experimental-map/interface-label/interface-label.component.ts
View File

@ -5,7 +5,7 @@ import { CssFixer } from '../../../helpers/css-fixer';
@Component({
selector: '[app-interface-label]',
templateUrl: './interface-label.component.html',
styleUrls: ['./interface-label.component.scss']
styleUrls: ['./interface-label.component.scss'],
})
export class InterfaceLabelComponent implements OnInit {
@Input('app-interface-label') ignore: any;
@ -17,7 +17,7 @@ export class InterfaceLabelComponent implements OnInit {
y: 0,
text: '',
style: '',
rotation: 0
rotation: 0,
};
borderSize = 5;

2
src/app/cartography/components/experimental-map/link/link.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('LinkComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LinkComponent]
declarations: [LinkComponent],
}).compileComponents();
}));

4
src/app/cartography/components/experimental-map/link/link.component.ts
View File

@ -6,7 +6,7 @@ import {
ElementRef,
EventEmitter,
ChangeDetectorRef,
OnDestroy
OnDestroy,
} from '@angular/core';
import { Subscription } from 'rxjs';
import { LinkStrategy } from './strategies/link-strategy';
@ -19,7 +19,7 @@ import { MapLink } from '../../../models/map/map-link';
@Component({
selector: '[app-link]',
templateUrl: './link.component.html',
styleUrls: ['./link.component.scss']
styleUrls: ['./link.component.scss'],
})
export class LinkComponent implements OnInit, OnDestroy {
@Input('app-link') link: MapLink;

2
src/app/cartography/components/experimental-map/link/strategies/ethernet-link-strategy.ts
View File

@ -6,7 +6,7 @@ export class EthernetLinkStrategy implements LinkStrategy {
public d(link: MapLink): string {
const points = [
[link.source.x + link.source.width / 2, link.source.y + link.source.height / 2],
[link.target.x + link.target.width / 2, link.target.y + link.target.height / 2]
[link.target.x + link.target.width / 2, link.target.y + link.target.height / 2],
];
const line_generator = path();

8
src/app/cartography/components/experimental-map/link/strategies/serial-link-strategy.ts
View File

@ -6,11 +6,11 @@ export class SerialLinkStrategy implements LinkStrategy {
private linkToPoints(link: MapLink) {
const source = {
x: link.source.x + link.source.width / 2,
y: link.source.y + link.source.height / 2
y: link.source.y + link.source.height / 2,
};
const target = {
x: link.target.x + link.target.width / 2,
y: link.target.y + link.target.height / 2
y: link.target.y + link.target.height / 2,
};
const dx = target.x - source.x;
@ -22,12 +22,12 @@ export class SerialLinkStrategy implements LinkStrategy {
const angle_source: [number, number] = [
source.x + dx / 2.0 + 15 * vect_rot[0],
source.y + dy / 2.0 + 15 * vect_rot[1]
source.y + dy / 2.0 + 15 * vect_rot[1],
];
const angle_target: [number, number] = [
target.x - dx / 2.0 - 15 * vect_rot[0],
target.y - dy / 2.0 - 15 * vect_rot[1]
target.y - dy / 2.0 - 15 * vect_rot[1],
];
return [[source.x, source.y], angle_source, angle_target, [target.x, target.y]];

2
src/app/cartography/components/experimental-map/node/node.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('NodeComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [NodeComponent]
declarations: [NodeComponent],
}).compileComponents();
}));

4
src/app/cartography/components/experimental-map/node/node.component.ts
View File

@ -10,7 +10,7 @@ import {
EventEmitter,
OnDestroy,
OnChanges,
AfterViewInit
AfterViewInit,
} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Subscription } from 'rxjs';
@ -25,7 +25,7 @@ import { DraggedDataEvent } from '../../../events/event-source';
selector: '[app-node]',
templateUrl: './node.component.html',
styleUrls: ['./node.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
static NODE_LABEL_MARGIN = 3;

2
src/app/cartography/components/experimental-map/selection/selection.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('SelectionComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [SelectionComponent]
declarations: [SelectionComponent],
}).compileComponents();
}));

2
src/app/cartography/components/experimental-map/selection/selection.component.ts
View File

@ -5,7 +5,7 @@ import { Rectangle } from '../../../models/rectangle';
@Component({
selector: '[app-selection]',
templateUrl: './selection.component.html',
styleUrls: ['./selection.component.scss']
styleUrls: ['./selection.component.scss'],
})
export class SelectionComponent implements OnInit, AfterViewInit {
@Input('app-selection') svg: SVGSVGElement;

2
src/app/cartography/components/experimental-map/status/status.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('StatusComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [StatusComponent]
declarations: [StatusComponent],
}).compileComponents();
}));

4
src/app/cartography/components/experimental-map/status/status.component.ts
View File

@ -3,7 +3,7 @@ import { Component, ElementRef, Input, ChangeDetectorRef } from '@angular/core';
@Component({
selector: '[app-status]',
templateUrl: './status.component.html',
styleUrls: ['./status.component.scss']
styleUrls: ['./status.component.scss'],
})
export class StatusComponent {
static STOPPED_STATUS_RECT_WIDTH = 10;
@ -12,7 +12,7 @@ export class StatusComponent {
status: '',
path: null,
direction: null,
d: null
d: null,
};
constructor(protected element: ElementRef, private ref: ChangeDetectorRef) {}

22
src/app/cartography/components/selection-control/selection-control.component.ts
View File

@ -9,7 +9,7 @@ import { Rectangle } from '../../models/rectangle';
@Component({
selector: 'app-selection-control',
templateUrl: './selection-control.component.html',
styleUrls: ['./selection-control.component.scss']
styleUrls: ['./selection-control.component.scss'],
})
export class SelectionControlComponent implements OnInit, OnDestroy {
private onSelection: Subscription;
@ -23,21 +23,21 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
ngOnInit() {
this.onSelection = this.selectionEventSource.selected.subscribe((rectangle: Rectangle) => {
const selectedNodes = this.graphDataManager.getNodes().filter(node => {
const selectedNodes = this.graphDataManager.getNodes().filter((node) => {
return this.inRectangleHelper.inRectangle(rectangle, node.x, node.y);
});
const selectedLinks = this.graphDataManager.getLinks().filter(link => {
const selectedLinks = this.graphDataManager.getLinks().filter((link) => {
return this.inRectangleHelper.inRectangle(rectangle, link.x, link.y);
});
const selectedDrawings = this.graphDataManager.getDrawings().filter(drawing => {
const selectedDrawings = this.graphDataManager.getDrawings().filter((drawing) => {
return this.inRectangleHelper.inRectangle(rectangle, drawing.x, drawing.y);
});
const selectedLabels = this.graphDataManager
.getNodes()
.filter(node => {
.filter((node) => {
if (node.label === undefined) {
return false;
}
@ -45,11 +45,11 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
const labelY = node.y + node.label.y;
return this.inRectangleHelper.inRectangle(rectangle, labelX, labelY);
})
.map(node => node.label);
.map((node) => node.label);
const selectedInterfacesLabelsSources = this.graphDataManager
.getLinks()
.filter(link => {
.filter((link) => {
if (link.source === undefined || link.nodes.length != 2 || link.nodes[0].label === undefined) {
return false;
}
@ -57,11 +57,11 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
const interfaceLabelY = link.source.y + link.nodes[0].label.y;
return this.inRectangleHelper.inRectangle(rectangle, interfaceLabelX, interfaceLabelY);
})
.map(link => link.nodes[0]);
.map((link) => link.nodes[0]);
const selectedInterfacesLabelsTargets = this.graphDataManager
.getLinks()
.filter(link => {
.filter((link) => {
if (link.target === undefined || link.nodes.length != 2 || link.nodes[1].label === undefined) {
return false;
}
@ -69,7 +69,7 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
const interfaceLabelY = link.target.y + link.nodes[1].label.y;
return this.inRectangleHelper.inRectangle(rectangle, interfaceLabelX, interfaceLabelY);
})
.map(link => link.nodes[1]);
.map((link) => link.nodes[1]);
const selectedInterfaces = [...selectedInterfacesLabelsSources, ...selectedInterfacesLabelsTargets];
@ -78,7 +78,7 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
...selectedLinks,
...selectedDrawings,
...selectedLabels,
...selectedInterfaces
...selectedInterfaces,
];
this.selectionManager.setSelected(selected);

2
src/app/cartography/components/selection-select/selection-select.component.spec.ts
View File

@ -8,7 +8,7 @@ describe('SelectionSelectComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [SelectionSelectComponent]
declarations: [SelectionSelectComponent],
}).compileComponents();
}));

7
src/app/cartography/components/selection-select/selection-select.component.ts
View File

@ -6,16 +6,13 @@ import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
@Component({
selector: 'app-selection-select',
templateUrl: './selection-select.component.html',
styleUrls: ['./selection-select.component.scss']
styleUrls: ['./selection-select.component.scss'],
})
export class SelectionSelectComponent implements OnInit, OnDestroy {
private onSelected: Subscription;
private onUnselected: Subscription;
constructor(
private selectionManager: SelectionManager,
private mapChangeDetectorRef: MapChangeDetectorRef
) {}
constructor(private selectionManager: SelectionManager, private mapChangeDetectorRef: MapChangeDetectorRef) {}
ngOnInit() {
this.onSelected = this.selectionManager.selected.subscribe(() => {

4
src/app/cartography/components/text-editor/text-editor.component.spec.ts
View File

@ -31,9 +31,9 @@ describe('TextEditorComponent', () => {
{ provide: NodesDataSource, useClass: NodesDataSource },
{ provide: LinksDataSource, useClass: LinksDataSource },
{ provide: SelectionManager, useClass: SelectionManager },
{ provide: FontFixer, useClass: FontFixer }
{ provide: FontFixer, useClass: FontFixer },
],
declarations: [TextEditorComponent]
declarations: [TextEditorComponent],
}).compileComponents();
}));

82
src/app/cartography/components/text-editor/text-editor.component.ts
View File

@ -1,4 +1,14 @@
import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestroy, Renderer2, NgZone } from '@angular/core';
import {
Component,
ViewChild,
ElementRef,
OnInit,
Input,
EventEmitter,
OnDestroy,
Renderer2,
NgZone,
} from '@angular/core';
import { DrawingsEventSource } from '../../events/drawings-event-source';
import { TextAddedDataEvent, TextEditedDataEvent } from '../../events/event-source';
import { ToolsService } from '../../../services/tools.service';
@ -24,7 +34,7 @@ import { Font } from '../../models/font';
@Component({
selector: 'app-text-editor',
templateUrl: './text-editor.component.html',
styleUrls: ['./text-editor.component.scss']
styleUrls: ['./text-editor.component.scss'],
})
export class TextEditorComponent implements OnInit, OnDestroy {
@ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
@ -73,7 +83,11 @@ export class TextEditorComponent implements OnInit, OnDestroy {
this.leftPosition = event.pageX.toString() + 'px';
this.topPosition = event.pageY.toString() + 'px';
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
this.renderer.setStyle(
this.temporaryTextElement.nativeElement,
'transform',
`scale(${this.mapScaleService.getScale()})`
);
this.temporaryTextElement.nativeElement.focus();
let textListener = () => {
@ -113,7 +127,11 @@ export class TextEditorComponent implements OnInit, OnDestroy {
this.selectionManager.setSelected([]);
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
this.renderer.setStyle(
this.temporaryTextElement.nativeElement,
'transform',
`scale(${this.mapScaleService.getScale()})`
);
this.editedLink = elem;
select(textElements[index]).attr('visibility', 'hidden');
@ -121,34 +139,52 @@ export class TextEditorComponent implements OnInit, OnDestroy {
this.editedNode = this.nodesDataSource.get(elem.nodeId);
this.editedLink = elem;
let x = ((elem.label.originalX + this.editedNode.x - 1) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
let y = ((elem.label.originalY + this.editedNode.y + 4) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
let x =
(elem.label.originalX + this.editedNode.x - 1) * this.context.transformation.k +
this.context.getZeroZeroTransformationPoint().x +
this.context.transformation.x;
let y =
(elem.label.originalY + this.editedNode.y + 4) * this.context.transformation.k +
this.context.getZeroZeroTransformationPoint().y +
this.context.transformation.y;
this.leftPosition = x.toString() + 'px';
this.topPosition = y.toString() + 'px';
this.temporaryTextElement.nativeElement.innerText = elem.label.text;
let styleProperties: StyleProperty[] = [];
for (let property of elem.label.style.split(";")){
for (let property of elem.label.style.split(';')) {
styleProperties.push({
property: property.split(": ")[0],
value: property.split(": ")[1]
property: property.split(': ')[0],
value: property.split(': ')[1],
});
}
let font: Font = {
font_family: styleProperties.find(p => p.property === 'font-family') ? styleProperties.find(p => p.property === 'font-family').value : 'TypeWriter',
font_size: styleProperties.find(p => p.property === 'font-size') ? Number(styleProperties.find(p => p.property === 'font-size').value) : 10.0,
font_weight: styleProperties.find(p => p.property === 'font-weight') ? styleProperties.find(p => p.property === 'font-weight').value : 'normal'
font_family: styleProperties.find((p) => p.property === 'font-family')
? styleProperties.find((p) => p.property === 'font-family').value
: 'TypeWriter',
font_size: styleProperties.find((p) => p.property === 'font-size')
? Number(styleProperties.find((p) => p.property === 'font-size').value)
: 10.0,
font_weight: styleProperties.find((p) => p.property === 'font-weight')
? styleProperties.find((p) => p.property === 'font-weight').value
: 'normal',
};
font = this.fontFixer.fix(font);
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', styleProperties.find(p => p.property === 'fill') ? styleProperties.find(p => p.property === 'fill').value : '#000000');
this.renderer.setStyle(
this.temporaryTextElement.nativeElement,
'color',
styleProperties.find((p) => p.property === 'fill')
? styleProperties.find((p) => p.property === 'fill').value
: '#000000'
);
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', font.font_family);
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', `${font.font_size}pt`);
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-weight', font.font_weight);
let listener = () => {
let innerText = this.temporaryTextElement.nativeElement.innerText;
let link: Link = this.linksDataSource.get(this.editedLink.linkId);
link.nodes.find(n => n.node_id === this.editedNode.node_id).label.text = innerText;
link.nodes.find((n) => n.node_id === this.editedNode.node_id).label.text = innerText;
this.linkService.updateLink(this.server, link).subscribe((link: Link) => {
rootElement
@ -177,7 +213,11 @@ export class TextEditorComponent implements OnInit, OnDestroy {
.selectAll<SVGTextElement, TextElement>('text.text_element')
.on('dblclick', (elem, index, textElements) => {
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
this.renderer.setStyle(
this.temporaryTextElement.nativeElement,
'transform',
`scale(${this.mapScaleService.getScale()})`
);
this.editedElement = elem;
select(textElements[index]).attr('visibility', 'hidden');
@ -185,8 +225,14 @@ export class TextEditorComponent implements OnInit, OnDestroy {
this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute('drawing_id');
var transformData = textElements[index].parentElement.getAttribute('transform').split(/\(|\)/);
var x = (Number(transformData[1].split(/,/)[0]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
var y = (Number(transformData[1].split(/,/)[1]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
var x =
Number(transformData[1].split(/,/)[0]) * this.context.transformation.k +
this.context.getZeroZeroTransformationPoint().x +
this.context.transformation.x;
var y =
Number(transformData[1].split(/,/)[1]) * this.context.transformation.k +
this.context.getZeroZeroTransformationPoint().y +
this.context.transformation.y;
this.leftPosition = x.toString() + 'px';
this.topPosition = y.toString() + 'px';
this.temporaryTextElement.nativeElement.innerText = elem.text;

4
src/app/cartography/converters/map/link-to-map-link-converter.ts
View File

@ -17,7 +17,9 @@ export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
mapLink.capturing = link.capturing;
mapLink.filters = link.filters;
mapLink.linkType = link.link_type;
mapLink.nodes = link.nodes.map(linkNode => this.linkNodeToMapLinkNode.convert(linkNode, { link_id: link.link_id }));
mapLink.nodes = link.nodes.map((linkNode) =>
this.linkNodeToMapLinkNode.convert(linkNode, { link_id: link.link_id })
);
mapLink.projectId = link.project_id;
mapLink.suspend = link.suspend;
return mapLink;

22
src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
View File

@ -15,27 +15,13 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
let elem = ``;
if (mapDrawing.element instanceof RectElement) {
elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${
mapDrawing.element.height
}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${
mapDrawing.element.stroke_width
}\" />`;
elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
} else if (mapDrawing.element instanceof EllipseElement) {
elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${
mapDrawing.element.cx
}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${
mapDrawing.element.stroke
}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
} else if (mapDrawing.element instanceof LineElement) {
elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${
mapDrawing.element.x1
}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" />`;
elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" />`;
} else if (mapDrawing.element instanceof TextElement) {
elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${
mapDrawing.element.font_family
}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${
mapDrawing.element.text
}</text>`;
elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${mapDrawing.element.font_family}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${mapDrawing.element.text}</text>`;
} else return '';
return `<svg height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\">${elem}</svg>`;

2
src/app/cartography/converters/map/map-link-to-link-converter.ts
View File

@ -17,7 +17,7 @@ export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
link.capturing = mapLink.capturing;
link.filters = mapLink.filters;
link.link_type = mapLink.linkType;
link.nodes = mapLink.nodes.map(mapLinkNode => this.mapLinkNodeToMapLinkNode.convert(mapLinkNode));
link.nodes = mapLink.nodes.map((mapLinkNode) => this.mapLinkNodeToMapLinkNode.convert(mapLinkNode));
link.project_id = mapLink.projectId;
link.suspend = mapLink.suspend;
return link;

2
src/app/cartography/converters/map/map-node-to-node-converter.ts
View File

@ -27,7 +27,7 @@ export class MapNodeToNodeConverter implements Converter<MapNode, Node> {
node.node_type = mapNode.nodeType;
node.port_name_format = mapNode.portNameFormat;
node.port_segment_size = mapNode.portSegmentSize;
node.ports = mapNode.ports ? mapNode.ports.map(mapPort => this.mapPortToPort.convert(mapPort)) : [];
node.ports = mapNode.ports ? mapNode.ports.map((mapPort) => this.mapPortToPort.convert(mapPort)) : [];
node.project_id = mapNode.projectId;
node.status = mapNode.status;
node.symbol = mapNode.symbol;

6
src/app/cartography/converters/map/node-to-map-node-converter.ts
View File

@ -29,14 +29,16 @@ export class NodeToMapNodeConverter implements Converter<Node, MapNode> {
mapNode.consoleType = node.console_type;
mapNode.firstPortName = node.first_port_name;
mapNode.height = node.height;
mapNode.label = this.labelToMapLabel ? this.labelToMapLabel.convert(node.label, { node_id: node.node_id }) : undefined;
mapNode.label = this.labelToMapLabel
? this.labelToMapLabel.convert(node.label, { node_id: node.node_id })
: undefined;
mapNode.locked = node.locked;
mapNode.name = node.name;
mapNode.nodeDirectory = node.node_directory;
mapNode.nodeType = node.node_type;
mapNode.portNameFormat = node.port_name_format;
mapNode.portSegmentSize = node.port_segment_size;
mapNode.ports = node.ports ? node.ports.map(port => this.portToMapPort.convert(port)) : [];
mapNode.ports = node.ports ? node.ports.map((port) => this.portToMapPort.convert(port)) : [];
mapNode.projectId = node.project_id;
mapNode.status = node.status;
mapNode.symbol = node.symbol;

2
src/app/cartography/converters/styles-to-font-converter.spec.ts
View File

@ -14,7 +14,7 @@ describe('StylesToFontConverter', () => {
const expectedFont: Font = {
font_family: 'TypeWriter',
font_size: 10,
font_weight: 'bold'
font_weight: 'bold',
};
expect(converter.convert(styles)).toEqual(expectedFont);

12
src/app/cartography/converters/styles-to-font-converter.ts
View File

@ -10,30 +10,30 @@ export class StylesToFontConverter implements Converter<string, Font> {
const font: Font = {
font_family: undefined,
font_size: undefined,
font_weight: undefined
font_weight: undefined,
};
const ast = csstree.parse(styles, {
context: 'declarationList'
context: 'declarationList',
});
ast.children.forEach(child => {
ast.children.forEach((child) => {
if (child.property === 'font-size' && child.value && child.value.children) {
child.value.children.forEach(value => {
child.value.children.forEach((value) => {
if (value.type === 'Dimension') {
font.font_size = parseInt(value.value);
}
});
}
if (child.property === 'font-family' && child.value && child.value.children) {
child.value.children.forEach(value => {
child.value.children.forEach((value) => {
if (value.type === 'Identifier') {
font.font_family = value.name;
}
});
}
if (child.property === 'font-weight' && child.value && child.value.children) {
child.value.children.forEach(value => {
child.value.children.forEach((value) => {
if (value.type === 'Identifier') {
font.font_weight = value.name;
}

2
src/app/cartography/d3-map.imports.ts
View File

@ -37,5 +37,5 @@ export const D3_MAP_IMPORTS = [
LineDrawingWidget,
RectDrawingWidget,
TextDrawingWidget,
DrawingWidget
DrawingWidget,
];

6
src/app/cartography/datasources/datasource.ts
View File

@ -20,7 +20,7 @@ export abstract class DataSource<T> {
}
public set(data: T[]) {
data.forEach(item => {
data.forEach((item) => {
const index = this.findIndex(item);
if (index >= 0) {
const updated = Object.assign(this.data[index], item);
@ -31,9 +31,9 @@ export abstract class DataSource<T> {
});
const toRemove = this.data.filter(
item => data.filter(i => this.getItemKey(i) === this.getItemKey(item)).length === 0
(item) => data.filter((i) => this.getItemKey(i) === this.getItemKey(item)).length === 0
);
toRemove.forEach(item => this.remove(item));
toRemove.forEach((item) => this.remove(item));
this.dataChange.next(this.data);
}

310
src/app/cartography/directives/moving-canvas.directive.spec.ts
View File

@ -6,164 +6,188 @@ import { MovingCanvasDirective } from './moving-canvas.directive';
import { Component } from '@angular/core';
@Component({
template: `<svg #svg class="map" preserveAspectRatio="none" movingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>`
template: `<svg #svg class="map" preserveAspectRatio="none" movingCanvas>
<g class="canvas" transform="translate(0, 0) scale(1)"></g>
</svg>`,
})
class DummyComponent {
constructor(){}
constructor() {}
}
describe('MovingCanvasDirective', () => {
let component: DummyComponent;
let fixture: ComponentFixture<DummyComponent>;
let movingEventSource = new MovingEventSource();
let component: DummyComponent;
let fixture: ComponentFixture<DummyComponent>;
let movingEventSource = new MovingEventSource();
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [NoopAnimationsModule],
providers: [
{ provide: MovingEventSource, useValue: movingEventSource },
{ provide: Context, useClass: Context }
],
declarations: [DummyComponent, MovingCanvasDirective]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DummyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [NoopAnimationsModule],
providers: [
{ provide: MovingEventSource, useValue: movingEventSource },
{ provide: Context, useClass: Context },
],
declarations: [DummyComponent, MovingCanvasDirective],
}).compileComponents();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
beforeEach(() => {
fixture = TestBed.createComponent(DummyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should move canvas if moving mode is activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let xMovement: number = 200;
let yMovement: number = 200;
it('should create', () => {
expect(component).toBeTruthy();
});
canvas.dispatchEvent(new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window
}));
tick();
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement
} as MouseEventInit));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
}));
it('should move canvas if moving mode is activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let xMovement: number = 200;
let yMovement: number = 200;
it('should not move canvas if moving mode is not activated', fakeAsync(() => {
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
canvas.dispatchEvent(
new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window,
})
);
tick();
canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement,
} as MouseEventInit)
);
tick();
canvas.dispatchEvent(new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window
}));
tick();
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: 1000,
movementY: 1000
} as MouseEventInit));
tick();
expect(canvas.getAttribute('transform')).toEqual('translate(0, 0) scale(1)');
}));
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
}));
it('should not move canvas after mouseup event', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let xMovement: number = 200;
let yMovement: number = 200;
it('should not move canvas if moving mode is not activated', fakeAsync(() => {
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
canvas.dispatchEvent(new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window
}));
tick();
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement
} as MouseEventInit));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
canvas.dispatchEvent(new MouseEvent('mouseup', {
bubbles: true,
relatedTarget: canvas,
movementX: 1000,
movementY: 1000
} as MouseEventInit));
tick();
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement
} as MouseEventInit));
tick();
canvas.dispatchEvent(
new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window,
})
);
tick();
canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: 1000,
movementY: 1000,
} as MouseEventInit)
);
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
}));
expect(canvas.getAttribute('transform')).toEqual('translate(0, 0) scale(1)');
}));
it('should not move canvas after deactivation of moving mode', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let xMovement: number = 200;
let yMovement: number = 200;
it('should not move canvas after mouseup event', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let xMovement: number = 200;
let yMovement: number = 200;
canvas.dispatchEvent(new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window
}));
tick();
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement
} as MouseEventInit));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
movingEventSource.movingModeState.emit(false);
canvas.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: 1000,
movementY: 1000
} as MouseEventInit));
tick();
canvas.dispatchEvent(
new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window,
})
);
tick();
canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement,
} as MouseEventInit)
);
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
}));
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
canvas.dispatchEvent(
new MouseEvent('mouseup', {
bubbles: true,
relatedTarget: canvas,
movementX: 1000,
movementY: 1000,
} as MouseEventInit)
);
tick();
canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement,
} as MouseEventInit)
);
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
}));
it('should not move canvas after deactivation of moving mode', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let xMovement: number = 200;
let yMovement: number = 200;
canvas.dispatchEvent(
new MouseEvent('mousedown', {
bubbles: true,
clientX: 0,
clientY: 0,
screenY: 0,
screenX: 0,
view: window,
})
);
tick();
canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: xMovement,
movementY: yMovement,
} as MouseEventInit)
);
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
movingEventSource.movingModeState.emit(false);
canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true,
relatedTarget: canvas,
movementX: 1000,
movementY: 1000,
} as MouseEventInit)
);
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
}));
});

108
src/app/cartography/directives/moving-canvas.directive.ts
View File

@ -1,65 +1,73 @@
import { HostListener, ElementRef, Directive, Input, OnInit, OnDestroy, Renderer2 } from '@angular/core'
import { HostListener, ElementRef, Directive, Input, OnInit, OnDestroy, Renderer2 } from '@angular/core';
import { Subscription } from 'rxjs';
import { MovingEventSource } from '../events/moving-event-source';
import { Context } from '../models/context';
import { select } from 'd3-selection';
@Directive({
selector: '[movingCanvas]',
selector: '[movingCanvas]',
})
export class MovingCanvasDirective implements OnInit, OnDestroy {
private mouseupListener: Function;
private mousemoveListener: Function;
private movingModeState: Subscription;
private activated: boolean = false;
constructor(
private element: ElementRef,
private movingEventSource: MovingEventSource,
private context: Context
) {}
private mouseupListener: Function;
private mousemoveListener: Function;
private movingModeState: Subscription;
private activated: boolean = false;
ngOnInit() {
this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
this.activated = event;
if (!event) this.removelisteners();
constructor(private element: ElementRef, private movingEventSource: MovingEventSource, private context: Context) {}
ngOnInit() {
this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
this.activated = event;
if (!event) this.removelisteners();
});
}
ngOnDestroy() {
this.movingModeState.unsubscribe();
}
@HostListener('mousedown', ['$event'])
onMouseDown(event: MouseEvent) {
if (this.activated) {
this.mousemoveListener = (event: MouseEvent) => {
const view = select(this.element.nativeElement);
const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
canvas.attr('transform', () => {
this.context.transformation.x = this.context.transformation.x + event.movementX;
this.context.transformation.y = this.context.transformation.y + event.movementY;
const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
const kTrans = this.context.transformation.k;
return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
});
}
};
ngOnDestroy() {
this.movingModeState.unsubscribe();
}
this.mouseupListener = (event: MouseEvent) => {
this.removelisteners();
};
@HostListener('mousedown', ['$event'])
onMouseDown(event: MouseEvent) {
if (this.activated) {
this.mousemoveListener = (event: MouseEvent) => {
const view = select(this.element.nativeElement);
const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
canvas.attr('transform', () => {
this.context.transformation.x = this.context.transformation.x + event.movementX;
this.context.transformation.y = this.context.transformation.y + event.movementY;
const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
const kTrans = this.context.transformation.k;
return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
});
};
this.mouseupListener = (event: MouseEvent) => {
this.removelisteners();
};
this.element.nativeElement.addEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
this.element.nativeElement.addEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
}
this.element.nativeElement.addEventListener(
'mouseup',
this.mouseupListener as EventListenerOrEventListenerObject
);
this.element.nativeElement.addEventListener(
'mousemove',
this.mousemoveListener as EventListenerOrEventListenerObject
);
}
}
removelisteners() {
this.element.nativeElement.removeEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
this.element.nativeElement.removeEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
}
removelisteners() {
this.element.nativeElement.removeEventListener(
'mouseup',
this.mouseupListener as EventListenerOrEventListenerObject
);
this.element.nativeElement.removeEventListener(
'mousemove',
this.mousemoveListener as EventListenerOrEventListenerObject
);
}
}

252
src/app/cartography/directives/zooming-canvas.directive.spec.ts
View File

@ -7,133 +7,145 @@ import { ZoomingCanvasDirective } from './zooming-canvas.directive';
import { MapScaleService } from '../../services/mapScale.service';
@Component({
template: `<svg #svg class="map" preserveAspectRatio="none" zoomingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>`
template: `<svg #svg class="map" preserveAspectRatio="none" zoomingCanvas>
<g class="canvas" transform="translate(0, 0) scale(1)"></g>
</svg>`,
})
class DummyComponent {
constructor(){}
constructor() {}
}
describe('ZoomingCanvasDirective', () => {
let component: DummyComponent;
let fixture: ComponentFixture<DummyComponent>;
let movingEventSource = new MovingEventSource();
let component: DummyComponent;
let fixture: ComponentFixture<DummyComponent>;
let movingEventSource = new MovingEventSource();
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [NoopAnimationsModule],
providers: [
{ provide: MovingEventSource, useValue: movingEventSource },
{ provide: Context, useClass: Context },
{ provide: MapScaleService, useClass: MapScaleService }
],
declarations: [DummyComponent, ZoomingCanvasDirective]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DummyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [NoopAnimationsModule],
providers: [
{ provide: MovingEventSource, useValue: movingEventSource },
{ provide: Context, useClass: Context },
{ provide: MapScaleService, useClass: MapScaleService },
],
declarations: [DummyComponent, ZoomingCanvasDirective],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DummyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should zoom in canvas if moving mode is activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
canvas.dispatchEvent(
new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom,
})
);
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
}));
it('should zoom out canvas if moving mode is activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = 100;
canvas.dispatchEvent(
new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom,
})
);
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(0.9)`);
}));
it('should not zoom in/out canvas if moving mode is not activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
canvas.dispatchEvent(
new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom,
})
);
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
movingEventSource.movingModeState.emit(false);
canvas.dispatchEvent(
new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom,
})
);
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
}));
it('should not zoom in/out canvas after deactivation of moving mode', fakeAsync(() => {
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
canvas.dispatchEvent(
new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom,
})
);
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(1)`);
}));
it('should prevent from default wheel behaviour when moving mode activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
const event = new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom,
});
spyOn(event, 'preventDefault');
it('should create', () => {
expect(component).toBeTruthy();
});
canvas.dispatchEvent(event);
tick();
it('should zoom in canvas if moving mode is activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
}));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
}));
it('should zoom out canvas if moving mode is activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = 100;
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
}));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(0.9)`);
}));
it('should not zoom in/out canvas if moving mode is not activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
}));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
movingEventSource.movingModeState.emit(false);
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
}));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
}));
it('should not zoom in/out canvas after deactivation of moving mode', fakeAsync(() => {
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
canvas.dispatchEvent(new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
}));
tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(1)`);
}));
it('should prevent from default wheel behaviour when moving mode activated', fakeAsync(() => {
movingEventSource.movingModeState.emit(true);
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
let deltaMode: number = 0;
let zoom: number = -1000;
const event = new WheelEvent('wheel', {
bubbles: true,
relatedTarget: canvas,
deltaMode: deltaMode,
deltaY: zoom
});
spyOn(event, 'preventDefault');
canvas.dispatchEvent(event);
tick();
expect(event.preventDefault).toHaveBeenCalled();
}));
expect(event.preventDefault).toHaveBeenCalled();
}));
});

86
src/app/cartography/directives/zooming-canvas.directive.ts
View File

@ -1,4 +1,4 @@
import { ElementRef, Directive, OnInit, OnDestroy } from '@angular/core'
import { ElementRef, Directive, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { MovingEventSource } from '../events/moving-event-source';
import { Context } from '../models/context';
@ -6,56 +6,58 @@ import { select } from 'd3-selection';
import { MapScaleService } from '../../services/mapScale.service';
@Directive({
selector: '[zoomingCanvas]',
selector: '[zoomingCanvas]',
})
export class ZoomingCanvasDirective implements OnInit, OnDestroy {
private wheelListener: Function;
private movingModeState: Subscription;
constructor(
private element: ElementRef,
private movingEventSource: MovingEventSource,
private context: Context,
private mapsScaleService: MapScaleService
) {}
private wheelListener: Function;
private movingModeState: Subscription;
ngOnInit() {
this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
event ? this.addListener() : this.removeListener();
});
}
constructor(
private element: ElementRef,
private movingEventSource: MovingEventSource,
private context: Context,
private mapsScaleService: MapScaleService
) {}
ngOnDestroy() {
this.movingModeState.unsubscribe();
}
ngOnInit() {
this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
event ? this.addListener() : this.removeListener();
});
}
addListener() {
this.wheelListener = (event: WheelEvent) => {
event.stopPropagation();
event.preventDefault();
ngOnDestroy() {
this.movingModeState.unsubscribe();
}
let zoom = event.deltaY;
zoom = event.deltaMode === 0 ? zoom/100 : zoom/3;
addListener() {
this.wheelListener = (event: WheelEvent) => {
event.stopPropagation();
event.preventDefault();
const view = select(this.element.nativeElement);
const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
canvas.attr('transform', () => {
this.context.transformation.k = this.context.transformation.k - zoom/10;
let zoom = event.deltaY;
zoom = event.deltaMode === 0 ? zoom / 100 : zoom / 3;
const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
const kTrans = this.context.transformation.k;
this.mapsScaleService.setScale(kTrans);
const view = select(this.element.nativeElement);
const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
});
};
canvas.attr('transform', () => {
this.context.transformation.k = this.context.transformation.k - zoom / 10;
this.element.nativeElement.addEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject, {passive: false});
}
const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
const kTrans = this.context.transformation.k;
this.mapsScaleService.setScale(kTrans);
removeListener() {
this.element.nativeElement.removeEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject);
}
return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
});
};
this.element.nativeElement.addEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject, {
passive: false,
});
}
removeListener() {
this.element.nativeElement.removeEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject);
}
}

2
src/app/cartography/events/drawings-event-source.ts
View File

@ -4,7 +4,7 @@ import {
ResizedDataEvent,
TextAddedDataEvent,
TextEditedDataEvent,
AddedDataEvent
AddedDataEvent,
} from './event-source';
import { MapDrawing } from '../models/map/map-drawing';

4
src/app/cartography/events/moving-event-source.ts
View File

@ -1,6 +1,6 @@
import { Injectable, EventEmitter } from "@angular/core";
import { Injectable, EventEmitter } from '@angular/core';
@Injectable()
export class MovingEventSource {
public movingModeState = new EventEmitter<boolean>();
public movingModeState = new EventEmitter<boolean>();
}

6
src/app/cartography/helpers/css-fixer.ts
View File

@ -6,13 +6,13 @@ import { Injectable } from '@angular/core';
export class CssFixer {
public fix(styles: string): string {
const ast = csstree.parse(styles, {
context: 'declarationList'
context: 'declarationList',
});
// fixes font-size when unit (pt|px) is not defined
ast.children.forEach(child => {
ast.children.forEach((child) => {
if (child.property === 'font-size' && child.value && child.value.children) {
child.value.children.forEach(value => {
child.value.children.forEach((value) => {
if (value.type === 'Number') {
const fontSize = value.value.toString();
if (!(fontSize.indexOf('pt') >= 0 || fontSize.indexOf('px') >= 0)) {

2
src/app/cartography/helpers/default-drawings-factory.ts
View File

@ -21,7 +21,7 @@ export class DefaultDrawingsFactory {
text: this.textElementFactory,
ellipse: this.ellipseElementFactory,
rectangle: this.rectangleElementFactory,
line: this.lineElementFactory
line: this.lineElementFactory,
};
}

2
src/app/cartography/helpers/font-bbox-calculator.ts
View File

@ -14,7 +14,7 @@ export class FontBBoxCalculator {
return {
width: bbox.width,
height: bbox.height
height: bbox.height,
};
}
}

8
src/app/cartography/helpers/font-fixer.spec.ts
View File

@ -12,13 +12,13 @@ describe('FontFixer', () => {
const font: Font = {
font_family: 'TypeWriter',
font_size: 10,
font_weight: 'bold'
font_weight: 'bold',
};
expect(fixer.fix(font)).toEqual({
font_family: 'Noto Sans',
font_size: 11,
font_weight: 'bold'
font_weight: 'bold',
});
});
@ -26,13 +26,13 @@ describe('FontFixer', () => {
const font: Font = {
font_family: 'OtherFont',
font_size: 11,
font_weight: 'bold'
font_weight: 'bold',
};
expect(fixer.fix(font)).toEqual({
font_family: 'OtherFont',
font_size: 11,
font_weight: 'bold'
font_weight: 'bold',
});
});

10
src/app/cartography/helpers/font-fixer.ts
View File

@ -22,16 +22,16 @@ export class FontFixer {
public fixStyles(styles: string) {
const ast = csstree.parse(styles, {
context: 'declarationList'
context: 'declarationList',
});
let fontFamilyPointer = null;
let fontSizePointer = null;
let isByIdentifier = true;
ast.children.forEach(child => {
ast.children.forEach((child) => {
if (child.property === 'font-family' && child.value && child.value.children) {
child.value.children.forEach(value => {
child.value.children.forEach((value) => {
if (value.type === 'Identifier') {
fontFamilyPointer = value;
}
@ -42,7 +42,7 @@ export class FontFixer {
});
}
if (child.property === 'font-size' && child.value && child.value.children) {
child.value.children.forEach(value => {
child.value.children.forEach((value) => {
if (value.type === 'Dimension') {
fontSizePointer = value;
}
@ -62,7 +62,7 @@ export class FontFixer {
const fixedFont = this.fix({
font_family: fontFamilyValue.split('"').join(''),
font_size: parseInt(fontSizeValue, 10)
font_size: parseInt(fontSizeValue, 10),
} as Font);
if (isByIdentifier) {

2
src/app/cartography/helpers/multi-link-calculator-helper.ts
View File

@ -25,7 +25,7 @@ export class MultiLinkCalculatorHelper {
}
return {
dx: x2_x0,
dy: y2_y0
dy: y2_y0,
};
}

2
src/app/cartography/helpers/qt-dasharray-fixer.ts
View File

@ -11,7 +11,7 @@ export class QtDasharrayFixer {
'25, 25': '10, 2',
'5, 25': '4, 2',
'5, 25, 25': '5, 5, 1, 5',
'25, 25, 5, 25, 5': '5, 2, 5, 2, 5'
'25, 25, 5, 25, 5': '5, 2, 5, 2, 5',
};
public fix(dasharray: string): string {

2
src/app/cartography/helpers/svg-to-drawing-converter.ts
View File

@ -19,7 +19,7 @@ export class SvgToDrawingConverter {
image: new ImageConverter(),
rect: new RectConverter(),
line: new LineConverter(),
ellipse: new EllipseConverter()
ellipse: new EllipseConverter(),
};
}

12
src/app/cartography/managers/graph-data-manager.ts
View File

@ -14,7 +14,7 @@ import {
MapNodesDataSource,
MapLinksDataSource,
MapDrawingsDataSource,
MapSymbolsDataSource
MapSymbolsDataSource,
} from '../datasources/map-datasource';
import { MultiLinkCalculatorHelper } from '../helpers/multi-link-calculator-helper';
@ -35,7 +35,7 @@ export class GraphDataManager {
public setNodes(nodes: Node[]) {
if (nodes) {
const mapNodes = nodes.map(n => this.nodeToMapNode.convert(n));
const mapNodes = nodes.map((n) => this.nodeToMapNode.convert(n));
this.mapNodesDataSource.set(mapNodes);
this.assignDataToLinks();
@ -45,7 +45,7 @@ export class GraphDataManager {
public setLinks(links: Link[]) {
if (links) {
const mapLinks = links.map(l => this.linkToMapLink.convert(l));
const mapLinks = links.map((l) => this.linkToMapLink.convert(l));
this.mapLinksDataSource.set(mapLinks);
this.assignDataToLinks();
@ -55,16 +55,16 @@ export class GraphDataManager {
public setDrawings(drawings: Drawing[]) {
if (drawings) {
const mapDrawings = drawings.map(d => this.drawingToMapDrawing.convert(d));
const mapDrawings = drawings.map((d) => this.drawingToMapDrawing.convert(d));
this.mapDrawingsDataSource.set(mapDrawings);
this.onDataUpdate();
}
}
public setSymbols(symbols: Symbol[]) {
if (symbols) {
const mapSymbols = symbols.map(s => this.symbolToMapSymbol.convert(s));
const mapSymbols = symbols.map((s) => this.symbolToMapSymbol.convert(s));
this.mapSymbolsDataSource.set(mapSymbols);
}
}

12
src/app/cartography/managers/selection-manager.ts
View File

@ -13,16 +13,16 @@ export class SelectionManager {
const dictItems = this.convertToKeyDict(items);
const selected = Object.keys(dictItems)
.filter(key => {
.filter((key) => {
return !this.isSelectedByKey(key);
})
.map(key => dictItems[key]);
.map((key) => dictItems[key]);
const unselected = Object.keys(this.selection)
.filter(key => {
.filter((key) => {
return !(key in dictItems);
})
.map(key => this.selection[key]);
.map((key) => this.selection[key]);
this.selection = dictItems;
@ -36,7 +36,7 @@ export class SelectionManager {
}
public getSelected(): Indexed[] {
return Object.keys(this.selection).map(key => this.selection[key]);
return Object.keys(this.selection).map((key) => this.selection[key]);
}
public isSelected(item): boolean {
@ -55,7 +55,7 @@ export class SelectionManager {
private convertToKeyDict(items: Indexed[]) {
const dict = {};
items.forEach(item => {
items.forEach((item) => {
dict[this.getKey(item)] = item;
});
return dict;

9
src/app/cartography/testing.ts
View File

@ -9,17 +9,12 @@ export class TestSVGCanvas {
}
public create() {
this.svg = select('body')
.append<SVGSVGElement>('svg')
.attr('width', 1000)
.attr('height', 1000);
this.svg = select('body').append<SVGSVGElement>('svg').attr('width', 1000).attr('height', 1000);
this.canvas = this.svg.append<SVGGElement>('g').attr('class', 'canvas');
}
public destroy() {
select('body')
.selectAll('svg')
.remove();
select('body').selectAll('svg').remove();
}
}

12
src/app/cartography/tools/moving-tool.spec.ts
View File

@ -16,11 +16,7 @@ describe('MovingTool', () => {
tool = new MovingTool(context);
svg = new TestSVGCanvas();
node = svg.canvas
.append<SVGGElement>('g')
.attr('class', 'node')
.attr('x', 10)
.attr('y', 20);
node = svg.canvas.append<SVGGElement>('g').attr('class', 'node').attr('x', 10).attr('y', 20);
tool.setEnabled(true);
tool.draw(svg.svg, context);
@ -39,7 +35,7 @@ describe('MovingTool', () => {
relatedTarget: svg.svg.node(),
screenY: 1024,
screenX: 1024,
view: window
view: window,
})
);
@ -70,7 +66,7 @@ describe('MovingTool', () => {
relatedTarget: svg.svg.node(),
screenY: 1024,
screenX: 1024,
view: window
view: window,
})
);
@ -101,7 +97,7 @@ describe('MovingTool', () => {
relatedTarget: svg.svg.node(),
screenY: 1024,
screenX: 1024,
view: window
view: window,
})
);

2
src/app/cartography/tools/moving-tool.ts
View File

@ -42,7 +42,7 @@ export class MovingTool {
private activate(selection: SVGSelection) {
const self = this;
const onZoom = function(this: SVGSVGElement) {
const onZoom = function (this: SVGSVGElement) {
const canvas = selection.select<SVGGElement>('g.canvas');
const e: D3ZoomEvent<SVGSVGElement, any> = event;
canvas.attr('transform', () => {

26
src/app/cartography/tools/selection-tool.ts
View File

@ -17,14 +17,9 @@ export class SelectionTool {
private path;
private enabled = false;
public constructor(
private context: Context,
private selectionEventSource: SelectionEventSource
) {}
public constructor(private context: Context, private selectionEventSource: SelectionEventSource) {}
public disableContextMenu(){
}
public disableContextMenu() {}
public setEnabled(enabled) {
this.enabled = enabled;
@ -34,7 +29,7 @@ export class SelectionTool {
private activate(selection) {
const self = this;
selection.on('mousedown', function() {
selection.on('mousedown', function () {
// prevent deselection on right click
if (event.button == 2) {
selection.on('contextmenu', () => {
@ -55,11 +50,11 @@ export class SelectionTool {
selection.selectAll(SelectionTool.SELECTABLE_CLASS).classed('selected', false);
subject
.on('mousemove.selection', function() {
.on('mousemove.selection', function () {
const end = self.transformation(mouse(parent));
self.moveSelection(start, end);
})
.on('mouseup.selection', function() {
.on('mouseup.selection', function () {
const end = self.transformation(mouse(parent));
self.endSelection(start, end);
subject.on('mousemove.selection', null).on('mouseup.selection', null);
@ -100,9 +95,12 @@ export class SelectionTool {
}
private moveSelection(start, move) {
let x = start[0]/this.context.transformation.k;
let y = start[1]/this.context.transformation.k;
this.path.attr('d', this.rect(x, y, move[0]/this.context.transformation.k - x, move[1]/this.context.transformation.k - y));
let x = start[0] / this.context.transformation.k;
let y = start[1] / this.context.transformation.k;
this.path.attr(
'd',
this.rect(x, y, move[0] / this.context.transformation.k - x, move[1] / this.context.transformation.k - y)
);
this.selectedEvent(start, move);
}
@ -127,7 +125,7 @@ export class SelectionTool {
const transformation_point = this.context.getZeroZeroTransformationPoint();
return [
point[0] - transformation_point.x - this.context.transformation.x,
point[1] - transformation_point.y - this.context.transformation.y
point[1] - transformation_point.y - this.context.transformation.y,
];
}
}

13
src/app/cartography/widgets/drawing-line.ts
View File

@ -23,7 +23,7 @@ export class DrawingLineWidget {
this.drawingLine.start = new Point(x, y);
this.drawingLine.end = new Point(x, y);
const over = function(this, d, i) {
const over = function (this, d, i) {
const node = self.selection.select<SVGGElement>('g.canvas').node();
const coordinates = mouse(node);
self.drawingLine.end.x = coordinates[0];
@ -60,7 +60,10 @@ export class DrawingLineWidget {
if (this.drawing) {
link_data = [
[[this.drawingLine.start.x, this.drawingLine.start.y], [this.drawingLine.end.x, this.drawingLine.end.y]]
[
[this.drawingLine.start.x, this.drawingLine.start.y],
[this.drawingLine.end.x, this.drawingLine.end.y],
],
];
}
@ -72,11 +75,7 @@ export class DrawingLineWidget {
const enter = tool.enter().append<SVGPathElement>('path');
tool
.merge(enter)
.attr('d', value_line)
.attr('stroke', '#000')
.attr('stroke-width', '2');
tool.merge(enter).attr('d', value_line).attr('stroke', '#000').attr('stroke-width', '2');
tool.exit().remove();
}

59
src/app/cartography/widgets/drawing.ts
View File

@ -33,52 +33,49 @@ export class DrawingWidget implements Widget {
this.imageDrawingWidget,
this.rectDrawingWidget,
this.lineDrawingWidget,
this.ellipseDrawingWidget
this.ellipseDrawingWidget,
];
}
public draw(view: SVGSelection) {
const drawing_body = view.selectAll<SVGGElement, MapDrawing>('g.drawing_body').data((l: MapDrawing) => [l]);
const drawing_body_enter = drawing_body
.enter()
.append<SVGGElement>('g')
.attr('class', 'drawing_body');
const drawing_body_enter = drawing_body.enter().append<SVGGElement>('g').attr('class', 'drawing_body');
const drawing_body_merge = drawing_body.merge(drawing_body_enter).attr('transform', (d: MapDrawing) => {
return `translate(${d.x},${d.y}) rotate(${d.rotation})`;
});
this.drawingWidgets.forEach(widget => {
this.drawingWidgets.forEach((widget) => {
widget.draw(drawing_body_merge);
});
drawing_body_merge.select('.layer_label_wrapper').remove();
if (this.mapSettingsService.isLayerNumberVisible) {
drawing_body_merge
.filter(n => ((n.element instanceof RectElement) || (n.element instanceof EllipseElement)))
.filter((n) => n.element instanceof RectElement || n.element instanceof EllipseElement)
.append<SVGRectElement>('rect')
.attr('class', 'layer_label_wrapper')
.attr('width', '26')
.attr('height', '26')
.attr('x', n => n.element ? n.element.width/2 - 13 : 0)
.attr('y', n => n.element ? n.element.height/2 - 13 : 0)
.attr('x', (n) => (n.element ? n.element.width / 2 - 13 : 0))
.attr('y', (n) => (n.element ? n.element.height / 2 - 13 : 0))
.attr('fill', 'red');
}
drawing_body_merge.select('.layer_label').remove();
if (this.mapSettingsService.isLayerNumberVisible) {
drawing_body_merge
.filter(n => ((n.element instanceof RectElement) || (n.element instanceof EllipseElement)))
.filter((n) => n.element instanceof RectElement || n.element instanceof EllipseElement)
.append<SVGTextElement>('text')
.attr('class', 'layer_label')
.text((elem) => elem.z)
.attr('x', function(n) {
if(n.z >= 100 ) return n.element ? n.element.width/2 - 13 : 0
else if(n.z >= 10 ) return n.element ? n.element.width/2 - 9 : 0
else return n.element.width/2 - 5
.attr('x', function (n) {
if (n.z >= 100) return n.element ? n.element.width / 2 - 13 : 0;
else if (n.z >= 10) return n.element ? n.element.width / 2 - 9 : 0;
else return n.element.width / 2 - 5;
})
.attr('y', n => n.element ? n.element.height/2 + 5 : 0)
.attr('y', (n) => (n.element ? n.element.height / 2 + 5 : 0))
.attr('style', () => {
const styles: string[] = [];
styles.push(`font-family: "Noto Sans"`);
@ -93,10 +90,10 @@ export class DrawingWidget implements Widget {
.select<SVGAElement>('line.top')
.attr('stroke', 'transparent')
.attr('stroke-width', '8px')
.attr('x1', drawing =>
.attr('x1', (drawing) =>
drawing.element instanceof EllipseElement ? drawing.element.cx - drawing.element.width / 10 : '0'
)
.attr('x2', drawing =>
.attr('x2', (drawing) =>
drawing.element instanceof EllipseElement
? drawing.element.cx + drawing.element.width / 10
: drawing.element.width
@ -110,16 +107,16 @@ export class DrawingWidget implements Widget {
.select<SVGAElement>('line.bottom')
.attr('stroke', 'transparent')
.attr('stroke-width', '8px')
.attr('x1', drawing =>
.attr('x1', (drawing) =>
drawing.element instanceof EllipseElement ? drawing.element.cx - drawing.element.width / 10 : '0'
)
.attr('x2', drawing =>
.attr('x2', (drawing) =>
drawing.element instanceof EllipseElement
? drawing.element.cx + drawing.element.width / 10
: drawing.element.width
)
.attr('y1', drawing => drawing.element.height)
.attr('y2', drawing => drawing.element.height)
.attr('y1', (drawing) => drawing.element.height)
.attr('y2', (drawing) => drawing.element.height)
.attr('draggable', 'true')
.attr('cursor', 'ns-resize');
@ -129,10 +126,10 @@ export class DrawingWidget implements Widget {
.attr('stroke-width', '8px')
.attr('x1', '0')
.attr('x2', '0')
.attr('y1', drawing =>
.attr('y1', (drawing) =>
drawing.element instanceof EllipseElement ? drawing.element.cy - drawing.element.height / 10 : '0'
)
.attr('y2', drawing =>
.attr('y2', (drawing) =>
drawing.element instanceof EllipseElement
? drawing.element.cy + drawing.element.height / 10
: drawing.element.height
@ -144,12 +141,12 @@ export class DrawingWidget implements Widget {
.select<SVGAElement>('line.left')
.attr('stroke', 'transparent')
.attr('stroke-width', '8px')
.attr('x1', drawing => drawing.element.width)
.attr('x2', drawing => drawing.element.width)
.attr('y1', drawing =>
.attr('x1', (drawing) => drawing.element.width)
.attr('x2', (drawing) => drawing.element.width)
.attr('y1', (drawing) =>
drawing.element instanceof EllipseElement ? drawing.element.cy - drawing.element.height / 10 : '0'
)
.attr('y2', drawing =>
.attr('y2', (drawing) =>
drawing.element instanceof EllipseElement
? drawing.element.cy + drawing.element.height / 10
: drawing.element.height
@ -162,8 +159,8 @@ export class DrawingWidget implements Widget {
.attr('draggable', 'true')
.attr('fill', 'transparent')
.attr('stroke', 'transparent')
.attr('cx', drawing => (drawing.element as LineElement).x1)
.attr('cy', drawing => (drawing.element as LineElement).y1)
.attr('cx', (drawing) => (drawing.element as LineElement).x1)
.attr('cy', (drawing) => (drawing.element as LineElement).y1)
.attr('r', 10)
.attr('cursor', 'move');
@ -172,8 +169,8 @@ export class DrawingWidget implements Widget {
.attr('draggable', 'true')
.attr('fill', 'transparent')
.attr('stroke', 'transparent')
.attr('cx', drawing => (drawing.element as LineElement).x2)
.attr('cy', drawing => (drawing.element as LineElement).y2)
.attr('cx', (drawing) => (drawing.element as LineElement).x2)
.attr('cy', (drawing) => (drawing.element as LineElement).y2)
.attr('r', 10)
.attr('cursor', 'move');

40
src/app/cartography/widgets/drawings.ts
View File

@ -111,15 +111,18 @@ export class DrawingsWidget implements Widget {
}
}
} else {
dy = y - (evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y));
y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
dy =
y -
(evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y));
y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
if (datum.element.height + dy < 0) {
isReflectedVertical = false;
y = topEdge;
datum.element.height = Math.abs(datum.element.height + evt.dy);
} else {
datum.y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
datum.y =
evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
datum.element.height += dy;
if (datum.element instanceof EllipseElement) {
(datum.element as EllipseElement).cy =
@ -143,7 +146,7 @@ export class DrawingsWidget implements Widget {
let top = drag()
.on('start', (datum: MapDrawing) => {
y = event.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
y = event.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
bottomEdge = y + datum.element.height;
document.body.style.cursor = 'ns-resize';
})
@ -151,15 +154,18 @@ export class DrawingsWidget implements Widget {
const evt = event;
if (!isReflectedVertical) {
dy = y - (evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y));
y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
dy =
y -
(evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y));
y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
if (datum.element.height + dy < 0) {
y = bottomEdge;
isReflectedVertical = true;
datum.element.height = Math.abs(datum.element.height + evt.dy);
} else {
datum.y = evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
datum.y =
evt.sourceEvent.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y);
datum.element.height += dy;
if (datum.element instanceof EllipseElement) {
(datum.element as EllipseElement).cy =
@ -207,7 +213,7 @@ export class DrawingsWidget implements Widget {
let isReflectedHorizontal: boolean = false;
let right = drag()
.on('start', (datum: MapDrawing) => {
x = event.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
x = event.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
leftEdge = x + datum.element.width;
document.body.style.cursor = 'ew-resize';
})
@ -215,15 +221,18 @@ export class DrawingsWidget implements Widget {
const evt = event;
if (!isReflectedHorizontal) {
dx = x - (evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x));
x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
dx =
x -
(evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x));
x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
if (datum.element.width + dx < 0) {
x = leftEdge;
isReflectedHorizontal = true;
datum.element.width = Math.abs(datum.element.width + evt.dx);
} else {
datum.x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
datum.x =
evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
datum.element.width += dx;
if (datum.element instanceof EllipseElement) {
(datum.element as EllipseElement).cx =
@ -290,15 +299,18 @@ export class DrawingsWidget implements Widget {
datum.element.width = datum.element.width + evt.dx < 0 ? 1 : (datum.element.width += evt.dx);
}
} else {
dx = x - (evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x));
x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
dx =
x -
(evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x));
x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
if (datum.element.width + dx < 0) {
x = rightEdge;
isReflectedHorizontal = false;
datum.element.width = Math.abs(datum.element.width + evt.dx);
} else {
datum.x = evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
datum.x =
evt.sourceEvent.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x);
datum.element.width += dx;
if (datum.element instanceof EllipseElement) {
(datum.element as EllipseElement).cx =

5
src/app/cartography/widgets/drawings/ellipse-drawing.spec.ts
View File

@ -33,10 +33,7 @@ describe('EllipseDrawingWidget', () => {
drawing.element = ellipse;
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings
.enter()
.append<SVGGElement>('g')
.classed('drawing', true);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);
widget.draw(drawings_merge);

38
src/app/cartography/widgets/drawings/ellipse-drawing.ts
View File

@ -17,25 +17,13 @@ export class EllipseDrawingWidget implements DrawingShapeWidget {
return d.element && d.element instanceof EllipseElement ? [d.element] : [];
});
drawing
.enter()
.append<SVGAElement>('line')
.attr('class', 'top');
drawing.enter().append<SVGAElement>('line').attr('class', 'top');
drawing
.enter()
.append<SVGAElement>('line')
.attr('class', 'bottom');
drawing.enter().append<SVGAElement>('line').attr('class', 'bottom');
drawing
.enter()
.append<SVGAElement>('line')
.attr('class', 'right');
drawing.enter().append<SVGAElement>('line').attr('class', 'right');
drawing
.enter()
.append<SVGAElement>('line')
.attr('class', 'left');
drawing.enter().append<SVGAElement>('line').attr('class', 'left');
const drawing_enter = drawing
.enter()
@ -45,15 +33,15 @@ export class EllipseDrawingWidget implements DrawingShapeWidget {
const merge = drawing.merge(drawing_enter);
merge
.attr('fill', ellipse => ellipse.fill)
.attr('fill-opacity', ellipse => ellipse.fill_opacity)
.attr('stroke', ellipse => ellipse.stroke)
.attr('stroke-width', ellipse => ellipse.stroke_width)
.attr('stroke-dasharray', ellipse => this.qtDasharrayFixer.fix(ellipse.stroke_dasharray))
.attr('cx', ellipse => ellipse.cx)
.attr('cy', ellipse => ellipse.cy)
.attr('rx', ellipse => ellipse.rx)
.attr('ry', ellipse => ellipse.ry);
.attr('fill', (ellipse) => ellipse.fill)
.attr('fill-opacity', (ellipse) => ellipse.fill_opacity)
.attr('stroke', (ellipse) => ellipse.stroke)
.attr('stroke-width', (ellipse) => ellipse.stroke_width)
.attr('stroke-dasharray', (ellipse) => this.qtDasharrayFixer.fix(ellipse.stroke_dasharray))
.attr('cx', (ellipse) => ellipse.cx)
.attr('cy', (ellipse) => ellipse.cy)
.attr('rx', (ellipse) => ellipse.rx)
.attr('ry', (ellipse) => ellipse.ry);
drawing.exit().remove();
}

5
src/app/cartography/widgets/drawings/image-drawing.spec.ts
View File

@ -26,10 +26,7 @@ describe('ImageDrawingWidget', () => {
drawing.element = image;
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings
.enter()
.append<SVGGElement>('g')
.classed('drawing', true);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);
widget.draw(drawings_merge);

9
src/app/cartography/widgets/drawings/image-drawing.ts
View File

@ -12,17 +12,14 @@ export class ImageDrawingWidget implements DrawingShapeWidget {
return d.element && d.element instanceof ImageElement ? [d.element] : [];
});
const drawing_enter = drawing
.enter()
.append<SVGImageElement>('image')
.attr('class', 'image_element noselect');
const drawing_enter = drawing.enter().append<SVGImageElement>('image').attr('class', 'image_element noselect');
const merge = drawing.merge(drawing_enter);
merge
.attr('xlink:href', (image: ImageElement) => image.data)
.attr('width', image => image.width)
.attr('height', image => image.height);
.attr('width', (image) => image.width)
.attr('height', (image) => image.height);
drawing.exit().remove();
}

5
src/app/cartography/widgets/drawings/line-drawing.spec.ts
View File

@ -31,10 +31,7 @@ describe('LineDrawingWidget', () => {
drawing.element = line;
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings
.enter()
.append<SVGGElement>('g')
.classed('drawing', true);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);
widget.draw(drawings_merge);

29
src/app/cartography/widgets/drawings/line-drawing.ts
View File

@ -15,31 +15,22 @@ export class LineDrawingWidget implements DrawingShapeWidget {
return d.element && d.element instanceof LineElement ? [d.element] : [];
});
drawing
.enter()
.append<SVGCircleElement>('circle')
.attr('class', 'right');
drawing.enter().append<SVGCircleElement>('circle').attr('class', 'right');
drawing
.enter()
.append<SVGCircleElement>('circle')
.attr('class', 'left');
drawing.enter().append<SVGCircleElement>('circle').attr('class', 'left');
const drawing_enter = drawing
.enter()
.append<SVGLineElement>('line')
.attr('class', 'line_element noselect');
const drawing_enter = drawing.enter().append<SVGLineElement>('line').attr('class', 'line_element noselect');
const merge = drawing.merge(drawing_enter);
merge
.attr('stroke', line => line.stroke)
.attr('stroke-width', line => line.stroke_width)
.attr('stroke-dasharray', line => this.qtDasharrayFixer.fix(line.stroke_dasharray))
.attr('x1', line => line.x1)
.attr('x2', line => line.x2)
.attr('y1', line => line.y1)
.attr('y2', line => line.y2);
.attr('stroke', (line) => line.stroke)
.attr('stroke-width', (line) => line.stroke_width)
.attr('stroke-dasharray', (line) => this.qtDasharrayFixer.fix(line.stroke_dasharray))
.attr('x1', (line) => line.x1)
.attr('x2', (line) => line.x2)
.attr('y1', (line) => line.y1)
.attr('y2', (line) => line.y2);
drawing.exit().remove();
}

5
src/app/cartography/widgets/drawings/rect-drawing.spec.ts
View File

@ -31,10 +31,7 @@ describe('RectDrawingWidget', () => {
drawing.element = rect;
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings
.enter()
.append<SVGGElement>('g')
.classed('drawing', true);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);
widget.draw(drawings_merge);

39
src/app/cartography/widgets/drawings/rect-drawing.ts
View File

@ -15,41 +15,26 @@ export class RectDrawingWidget implements DrawingShapeWidget {
return d.element && d.element instanceof RectElement ? [d.element] : [];
});
drawing
.enter()
.append<SVGAElement>('line')
.attr('class', 'top');
drawing.enter().append<SVGAElement>('line').attr('class', 'top');
drawing
.enter()
.append<SVGAElement>('line')
.attr('class', 'bottom');
drawing.enter().append<SVGAElement>('line').attr('class', 'bottom');
drawing
.enter()
.append<SVGAElement>('line')
.attr('class', 'right');
drawing.enter().append<SVGAElement>('line').attr('class', 'right');
drawing
.enter()
.append<SVGAElement>('line')
.attr('class', 'left');
drawing.enter().append<SVGAElement>('line').attr('class', 'left');
const drawing_enter = drawing
.enter()
.append<SVGRectElement>('rect')
.attr('class', 'rect_element noselect');
const drawing_enter = drawing.enter().append<SVGRectElement>('rect').attr('class', 'rect_element noselect');
const merge = drawing.merge(drawing_enter);
merge
.attr('fill', rect => rect.fill)
.attr('fill-opacity', rect => rect.fill_opacity)
.attr('stroke', rect => rect.stroke)
.attr('stroke-width', rect => rect.stroke_width)
.attr('stroke-dasharray', rect => this.qtDasharrayFixer.fix(rect.stroke_dasharray))
.attr('width', rect => rect.width)
.attr('height', rect => rect.height);
.attr('fill', (rect) => rect.fill)
.attr('fill-opacity', (rect) => rect.fill_opacity)
.attr('stroke', (rect) => rect.stroke)
.attr('stroke-width', (rect) => rect.stroke_width)
.attr('stroke-dasharray', (rect) => this.qtDasharrayFixer.fix(rect.stroke_dasharray))
.attr('width', (rect) => rect.width)
.attr('height', (rect) => rect.height);
drawing.exit().remove();
}

15
src/app/cartography/widgets/drawings/text-drawing.spec.ts
View File

@ -32,10 +32,7 @@ describe('TextDrawingWidget', () => {
drawing.element = text;
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings
.enter()
.append<SVGGElement>('g')
.classed('drawing', true);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);
widget.draw(drawings_merge);
@ -55,10 +52,7 @@ describe('TextDrawingWidget', () => {
drawing.element = text;
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings
.enter()
.append<SVGGElement>('g')
.classed('drawing', true);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);
widget.draw(drawings_merge);
@ -81,10 +75,7 @@ describe('TextDrawingWidget', () => {
drawing.element = text;
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
const drawings_enter = drawings
.enter()
.append<SVGGElement>('g')
.classed('drawing', true);
const drawings_enter = drawings.enter().append<SVGGElement>('g').classed('drawing', true);
const drawings_merge = drawings.merge(drawings_enter);
widget.draw(drawings_merge);

13
src/app/cartography/widgets/drawings/text-drawing.ts
View File

@ -18,10 +18,7 @@ export class TextDrawingWidget implements DrawingShapeWidget {
return d.element && d.element instanceof TextElement ? [d.element] : [];
});
const drawing_enter = drawing
.enter()
.append<SVGTextElement>('text')
.attr('class', 'text_element noselect');
const drawing_enter = drawing.enter().append<SVGTextElement>('text').attr('class', 'text_element noselect');
const merge = drawing.merge(drawing_enter);
merge
@ -40,8 +37,8 @@ export class TextDrawingWidget implements DrawingShapeWidget {
}
return styles.join('; ');
})
.attr('fill', text => text.fill)
.attr('text-decoration', text => text.text_decoration);
.attr('fill', (text) => text.fill)
.attr('text-decoration', (text) => text.text_decoration);
const lines = merge.selectAll<SVGTSpanElement, string>('tspan').data((text: TextElement) => {
return text.text.split(/\r?\n/);
@ -52,14 +49,14 @@ export class TextDrawingWidget implements DrawingShapeWidget {
const lines_merge = lines.merge(lines_enter);
lines_merge
.text(line => line)
.text((line) => line)
.attr('xml:space', 'preserve')
.attr('x', 0)
.attr('dy', (line, i) => (i === 0 ? '0em' : '1.4em'));
lines.exit().remove();
merge.attr('transform', function(this: SVGTextElement) {
merge.attr('transform', function (this: SVGTextElement) {
// SVG calculates y pos by the /bottom/ of the first tspan, hence we need to make some
// approx and make it matching to GUI
const tspan = select(this).selectAll<SVGTSpanElement, string>('tspan');

10
src/app/cartography/widgets/graph-layout.ts
View File

@ -33,10 +33,7 @@ export class GraphLayout implements Widget {
}
connect(view: SVGSelection, context: Context) {
this.drawingLineTool.connect(
view,
context
);
this.drawingLineTool.connect(view, context);
}
draw(view: SVGSelection, context: Context) {
@ -44,10 +41,7 @@ export class GraphLayout implements Widget {
const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([context]);
const canvasEnter = canvas
.enter()
.append<SVGGElement>('g')
.attr('class', 'canvas');
const canvasEnter = canvas.enter().append<SVGGElement>('g').attr('class', 'canvas');
canvas.merge(canvasEnter).attr('transform', (ctx: Context) => {
const xTrans = ctx.getZeroZeroTransformationPoint().x + ctx.transformation.x;

Some files were not shown because too many files have changed in this diff Show More