[EGON-108] Refactor header buttons

.archlint/layers.json

@@ -67,9 +67,9 @@
           "mayUseAllBelow": true
         },
         {
-          "name": "header",
+          "name": "title",
           "include": [
-            "*/header/**"
+            "*/title/**"
           ],
           "mayUseAllBelow": true
         },

.archlint/technical_layers.json

@@ -11,7 +11,10 @@
     "app.*.ts",
     "tools/import/services/import-domain-story.service.ts",
     "tools/modeler/services/initializer.service.ts",
-    "tools/header/presentation/dialog/header-dialog/header-dialog.component.ts"
+    "tools/title/presentation/title-dialog/title-dialog.component.ts",
+    "domain/presentation/info-dialog/info-dialog.component.ts",
+    "tools/export/presentation/export-dialog/export-dialog.component.ts",
+    "tools/label-dictionary/presentation/label-dictionary-dialog/label-dictionary-dialog.component.ts"
   ],
   "artifacts": [
     {

src/app/app.component.spec.ts

@@ -2,13 +2,13 @@ import { TestBed } from '@angular/core/testing';
 import { AppComponent } from 'src/app/app.component';
 import { MockComponent, MockProviders } from 'ng-mocks';
 import { SettingsService } from './workbench/services/settings/settings.service';
-import { TitleService } from './tools/header/services/title.service';
+import { TitleService } from './tools/title/services/title.service';
 import { ExportService } from './tools/export/services/export.service';
 import { ModelerComponent } from './tools/modeler/presentation/modeler/modeler.component';
-import { HeaderComponent } from './workbench/presentation/header/header/header.component';
 import { ReplayService } from 'src/app/tools/replay/services/replay.service';
 import { AutosaveService } from './tools/autosave/services/autosave.service';
 import { ColorPickerModule } from 'ngx-color-picker';
+import { HeaderComponent } from './workbench/presentation/header/header/header.component';
 
 describe('AppComponent', () => {
   let autosaveService: jasmine.SpyObj<AutosaveService>;

src/app/app.component.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { SettingsService } from 'src/app/workbench/services/settings/settings.service';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { TitleService } from './tools/header/services/title.service';
+import { TitleService } from './tools/title/services/title.service';
 import { ExportService } from './tools/export/services/export.service';
 import { ReplayService } from './tools/replay/services/replay.service';
 import { environment } from '../environments/environment';

src/app/app.module.ts

@@ -11,29 +11,27 @@ import {
 } from '@angular/material/checkbox';
 
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { HeaderComponent } from 'src/app/workbench/presentation/header/header/header.component';
 import { SettingsComponent } from 'src/app/workbench/presentation/settings/settings.component';
 import { AppComponent } from 'src/app/app.component';
 import { ExportService } from 'src/app/tools/export/services/export.service';
 import { ImportDomainStoryService } from 'src/app/tools/import/services/import-domain-story.service';
 import { ImportRepairService } from 'src/app/tools/import/services/import-repair.service';
 import { ModelerService } from 'src/app/tools/modeler/services/modeler.service';
-import { TitleService } from 'src/app/tools/header/services/title.service';
+import { TitleService } from 'src/app/tools/title/services/title.service';
 import { LabelDictionaryService } from 'src/app/tools/label-dictionary/services/label-dictionary.service';
 import { ReplayService } from 'src/app/tools/replay/services/replay.service';
 import { ElementRegistryService } from 'src/app/domain/services/element-registry.service';
 import { IconSetConfigurationService } from 'src/app/tools/icon-set-config/services/icon-set-configuration.service';
 import { MassNamingService } from 'src/app/tools/label-dictionary/services/mass-naming.service';
-import { InfoDialogComponent } from 'src/app/tools/import/presentation/info-dialog/info-dialog.component';
+import { InfoDialogComponent } from 'src/app/domain/presentation/info-dialog/info-dialog.component';
 import { ExportDialogComponent } from 'src/app/tools/export/presentation/export-dialog/export-dialog.component';
 import { ActivityDialogComponent } from 'src/app/tools/modeler/presentation/activity-dialog/activity-dialog.component';
 import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
-import { HeaderDialogComponent } from 'src/app/tools/header/presentation/dialog/header-dialog/header-dialog.component';
+import { TitleDialogComponent } from 'src/app/tools/title/presentation/title-dialog/title-dialog.component';
 import { IconDictionaryService } from 'src/app/tools/icon-set-config/services/icon-dictionary.service';
 import { ModelerComponent } from 'src/app/tools/modeler/presentation/modeler/modeler.component';
 import { SettingsModule } from 'src/app/workbench/presentation/settings/settings.module';
 import { AutosaveService } from './tools/autosave/services/autosave.service';
-import { DomainStoryModelerModuleModule } from './workbench/presentation/header/domain-story-modeler-module.module';
 import { LabelDictionaryDialogComponent } from './tools/label-dictionary/presentation/label-dictionary-dialog/label-dictionary-dialog.component';
 import { MaterialModule } from './material.module';
 import { ColorPickerModule } from 'ngx-color-picker';
@@ -46,6 +44,8 @@ import { initializeLabelEditingProvider } from './tools/modeler/bpmn/modeler/lab
 import { initializeReplaceOptions } from './tools/modeler/bpmn/modeler/change-icon/replaceOptions';
 import { initializeNumbering } from './tools/modeler/bpmn/modeler/numbering/numbering';
 import { initializeActivityUpdateHandler } from './tools/modeler/bpmn/modeler/updateHandler/activityUpdateHandlers';
+import { HeaderComponent } from './workbench/presentation/header/header/header.component';
+import { DomainStoryModelerModuleModule } from './workbench/presentation/header/domain-story-modeler-module.module';
 
 @NgModule({
   declarations: [
@@ -55,7 +55,7 @@ import { initializeActivityUpdateHandler } from './tools/modeler/bpmn/modeler/up
     InfoDialogComponent,
     ExportDialogComponent,
     ActivityDialogComponent,
-    HeaderDialogComponent,
+    TitleDialogComponent,
     ModelerComponent,
     LabelDictionaryDialogComponent,
   ],

src/app/tools/import/presentation/info-dialog/info-dialog.component.spec.ts → src/app/domain/presentation/info-dialog/info-dialog.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { InfoDialogComponent } from 'src/app/tools/import/presentation/info-dialog/info-dialog.component';
+import { InfoDialogComponent } from 'src/app/domain/presentation/info-dialog/info-dialog.component';
 import { MockProviders } from 'ng-mocks';
 import {
   MAT_DIALOG_DATA,
@@ -9,7 +9,7 @@ import {
   MatDialogModule,
 } from '@angular/material/dialog';
 import { UntypedFormBuilder } from '@angular/forms';
-import { InfoDialogData } from '../../../header/domain/infoDialogData';
+import { InfoDialogData } from '../../entities/infoDialogData';
 
 describe('InfoDialogComponent', () => {
   let component: InfoDialogComponent;

src/app/tools/import/presentation/info-dialog/info-dialog.component.ts → src/app/domain/presentation/info-dialog/info-dialog.component.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { InfoDialogData } from 'src/app/tools/header/domain/infoDialogData';
+import { InfoDialogData } from 'src/app/domain/entities/infoDialogData';
 
 @Component({
   selector: 'app-info-dialog',

src/app/domain/services/dialog.service.spec.ts

@@ -2,8 +2,8 @@ import { TestBed } from '@angular/core/testing';
 
 import { DialogService } from 'src/app/domain/services/dialog.service';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import { InfoDialogData } from '../../tools/header/domain/infoDialogData';
-import { InfoDialogComponent } from '../../tools/import/presentation/info-dialog/info-dialog.component';
+import { InfoDialogData } from '../entities/infoDialogData';
+import { InfoDialogComponent } from '../presentation/info-dialog/info-dialog.component';
 import { MockProvider, MockProviders } from 'ng-mocks';
 import { of } from 'rxjs';
 

src/app/domain/services/dialog.service.ts

@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { ComponentType } from '@angular/cdk/overlay';
+import { InfoDialogData } from '../entities/infoDialogData';
+import { InfoDialogComponent } from '../presentation/info-dialog/info-dialog.component';
 
 @Injectable({
   providedIn: 'root',
@@ -11,4 +13,27 @@ export class DialogService {
   openDialog(dialog: ComponentType<any>, config: MatDialogConfig): void {
     this.matDialog.open(dialog, config);
   }
+
+  openKeyboardShortcutsDialog(): void {
+    const title = 'Keyboard Shortcuts';
+    const shortCutText =
+      'Undo:\t\t\t\t\tctrl + Z \n' +
+      'Redo:\t\t\t\t\tctrl + Y    OR   ctrl + shift + Z\n' +
+      'Select All:\t\t\t\tctrl + A\n' +
+      'Export as EGN:\t\t\tctrl + S\n' +
+      'Import Domain Story: \tctrl + L\n' +
+      'Search for text:\t\t\tctrl + F\n' +
+      'Direct editing:\t\t\tE\n' +
+      'Hand tool:\t\t\t\tH\n' +
+      'Lasso tool:\t\t\t\tL\n' +
+      'Space tool:\t\t\t\tS';
+
+    const config = new MatDialogConfig();
+    config.disableClose = false;
+    config.autoFocus = true;
+
+    config.data = new InfoDialogData(title, shortCutText, true);
+
+    this.openDialog(InfoDialogComponent, config);
+  }
 }

src/app/tools/autosave/services/autosave.service.ts

@@ -6,7 +6,7 @@ import { AutosaveConfigurationService } from './autosave-configuration.service';
 import { IconDictionaryService } from '../../icon-set-config/services/icon-dictionary.service';
 import { ElementTypes } from '../../../domain/entities/elementTypes';
 import { StorageService } from '../../../domain/services/storage.service';
-import { TitleService } from '../../header/services/title.service';
+import { TitleService } from '../../title/services/title.service';
 import { AutosaveConfiguration } from '../domain/autosave-configuration';
 import { Subject } from 'rxjs';
 import {

src/app/tools/export/services/export.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { IconSetConfigurationService } from 'src/app/tools/icon-set-config/services/icon-set-configuration.service';
 import { sanitizeForDesktop } from 'src/app/utils/sanitizer';
-import { TitleService } from 'src/app/tools/header/services/title.service';
+import { TitleService } from 'src/app/tools/title/services/title.service';
 import { ConfigAndDST } from 'src/app/tools/export/domain/export/configAndDst';
 import { DirtyFlagService } from 'src/app/domain/services/dirty-flag.service';
 import { PngService } from 'src/app/tools/export/services/png.service';
@@ -11,6 +11,19 @@ import { RendererService } from '../../modeler/services/renderer.service';
 import { HtmlPresentationService } from './html-presentation.service';
 import { formatDate } from '@angular/common';
 import { environment } from '../../../../environments/environment';
+import {
+  ExportDialogData,
+  ExportOption,
+} from '../domain/dialog/exportDialogData';
+import { MatDialogConfig } from '@angular/material/dialog';
+import { ExportDialogComponent } from '../presentation/export-dialog/export-dialog.component';
+import {
+  SNACKBAR_DURATION,
+  SNACKBAR_INFO,
+} from '../../../domain/entities/constants';
+import { ModelerService } from '../../modeler/services/modeler.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { DialogService } from '../../../domain/services/dialog.service';
 
 @Injectable({
   providedIn: 'root',
@@ -30,6 +43,9 @@ export class ExportService implements OnDestroy {
     private svgService: SvgService,
     private htmlPresentationService: HtmlPresentationService,
     private rendererService: RendererService,
+    private modelerService: ModelerService,
+    private dialogService: DialogService,
+    private snackbar: MatSnackBar,
   ) {
     this.titleSubscription = this.titleService.title$.subscribe(
       (title: string) => {
@@ -205,4 +221,47 @@ export class ExportService implements OnDestroy {
   private getCurrentDateString(): string {
     return formatDate(new Date(), 'YYYY-MM-dd', 'en-GB');
   }
+
+  openDownloadDialog() {
+    if (this.isDomainStoryExportable()) {
+      const SVGDownloadOption = new ExportOption(
+        'SVG',
+        'Download an SVG-Image with the Domain-Story embedded. Can be used to save and share your Domain-Story.',
+        (withTitle: boolean, useWhiteBackground: boolean) =>
+          this.downloadSVG(withTitle, useWhiteBackground),
+      );
+      const EGNDownloadOption = new ExportOption(
+        'EGN',
+        'Download an EGN-File with the Domain-Story. Can be used to save and share your Domain-Story.',
+        () => this.downloadDST(),
+      );
+      const PNGDownloadOption = new ExportOption(
+        'PNG',
+        'Download a PNG-Image of the Domain-Story. This does not include the Domain-Story!',
+        (withTitle: boolean) => this.downloadPNG(withTitle),
+      );
+      const HTMLDownloadOption = new ExportOption(
+        'HTML-Presentation',
+        'Download an HTML-Presentation. This does not include the Domain-Story!',
+        () => this.downloadHTMLPresentation(this.modelerService.getModeler()),
+      );
+
+      const config = new MatDialogConfig();
+      config.disableClose = false;
+      config.autoFocus = true;
+      config.data = new ExportDialogData('Export', [
+        SVGDownloadOption,
+        EGNDownloadOption,
+        PNGDownloadOption,
+        HTMLDownloadOption,
+      ]);
+
+      this.dialogService.openDialog(ExportDialogComponent, config);
+    } else {
+      this.snackbar.open('No Domain Story to be exported', undefined, {
+        duration: SNACKBAR_DURATION,
+        panelClass: SNACKBAR_INFO,
+      });
+    }
+  }
 }

src/app/tools/export/services/html-presentation.service.spec.ts

@@ -6,7 +6,7 @@ import { ElementRegistryService } from '../../../domain/services/element-registr
 import { DialogService } from '../../../domain/services/dialog.service';
 import { StoryCreatorService } from '../../replay/services/story-creator.service';
 import { ReplayService } from '../../replay/services/replay.service';
-import { TitleService } from '../../header/services/title.service';
+import { TitleService } from '../../title/services/title.service';
 
 describe('HtmlPresentationService', () => {
   let service: HtmlPresentationService;

src/app/tools/export/services/html-presentation.service.ts

@@ -3,7 +3,7 @@ import { sanitizeForDesktop } from '../../../utils/sanitizer';
 import { ReplayService } from '../../replay/services/replay.service';
 // @ts-ignore
 import doT from 'dot';
-import { TitleService } from '../../header/services/title.service';
+import { TitleService } from '../../title/services/title.service';
 import { StoryCreatorService } from '../../replay/services/story-creator.service';
 
 @Injectable({
@@ -41,8 +41,7 @@ export class HtmlPresentationService {
   ): Promise<void> {
     const svgData = [];
     // export all sentences of domain story
-    const story = this.storyCreatorService.traceActivitiesAndCreateStory();
-    this.replayService.startReplay(story);
+    this.replayService.startReplay();
     try {
       const result = await modeler.saveSVG({});
       this.fixActivityMarkersForEachSentence(

src/app/tools/icon-set-config/presentation/icon-set-details/icon-set-details.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { IconSetCustomizationService } from 'src/app/tools/icon-set-config/services/icon-set-customization.service';
 import { IconListItem } from 'src/app/tools/icon-set-config/domain/iconListItem';
-import { TitleService } from 'src/app/tools/header/services/title.service';
+import { TitleService } from 'src/app/tools/title/services/title.service';
 
 @Component({
   selector: 'app-icon-set-details',

src/app/tools/icon-set-config/services/icon-set-configuration.service.ts

@@ -4,7 +4,7 @@ import { IconDictionaryService } from 'src/app/tools/icon-set-config/services/ic
 import { Dictionary } from 'src/app/domain/entities/dictionary';
 import { ElementTypes } from 'src/app/domain/entities/elementTypes';
 import { defaultConf } from '../domain/iconConfiguration';
-import { TitleService } from '../../header/services/title.service';
+import { TitleService } from '../../title/services/title.service';
 import {
   ICON_SET_CONFIGURATION_TAG,
   INITIAL_ICON_SET_NAME,

src/app/tools/icon-set-config/services/icon-set-customization.service.spec.ts

@@ -6,7 +6,7 @@ import {
 } from './icon-set-customization.service';
 import { IconDictionaryService } from './icon-dictionary.service';
 import { MockProvider, MockProviders } from 'ng-mocks';
-import { TitleService } from '../../header/services/title.service';
+import { TitleService } from '../../title/services/title.service';
 import { IconSetConfigurationService } from './icon-set-configuration.service';
 import { ImportDomainStoryService } from '../../import/services/import-domain-story.service';
 import { Dictionary } from '../../../domain/entities/dictionary';

src/app/tools/icon-set-config/services/icon-set-customization.service.ts

@@ -11,7 +11,7 @@ import {
 import { Dictionary } from '../../../domain/entities/dictionary';
 import { ElementTypes } from '../../../domain/entities/elementTypes';
 import { IconListItem } from '../domain/iconListItem';
-import { TitleService } from '../../header/services/title.service';
+import { TitleService } from '../../title/services/title.service';
 import { IconSetConfigurationService } from './icon-set-configuration.service';
 import { IconDictionaryService } from './icon-dictionary.service';
 import getIconId = ElementTypes.getIconId;

src/app/tools/import/services/import-domain-story.service.spec.ts

@@ -5,7 +5,7 @@ import { ElementRegistryService } from '../../../domain/services/element-registr
 import { IconDictionaryService } from '../../icon-set-config/services/icon-dictionary.service';
 import { DirtyFlagService } from '../../../domain/services/dirty-flag.service';
 import { ImportRepairService } from './import-repair.service';
-import { TitleService } from '../../header/services/title.service';
+import { TitleService } from '../../title/services/title.service';
 import { RendererService } from '../../modeler/services/renderer.service';
 import { MockService } from 'ng-mocks';
 import { DialogService } from '../../../domain/services/dialog.service';