diff --git a/projects/common/app.module.ts b/projects/common/app.module.ts
index 14b81ebc05302c82d4595569fa5a8f78d250da79..40932a2f2d2cac47179e678265aea7d8612bcecc 100644
--- a/projects/common/app.module.ts
+++ b/projects/common/app.module.ts
@@ -14,7 +14,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
import { MatRadioModule } from '@angular/material/radio';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
import { MatTabsModule } from '@angular/material/tabs';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -71,7 +70,6 @@ import { DropdownComponent } from './element-components/dropdown.component';
MatListModule,
MatExpansionModule,
MatSidenavModule,
- MatDialogModule,
MatFormFieldModule,
ButtonComponent,
TextComponent,
diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts
index 24db55503250d35e7bbb594182fe987107c872f1..91008b27603c0e19b86f1ea8de663528f20771a0 100644
--- a/projects/editor/src/app/app.module.ts
+++ b/projects/editor/src/app/app.module.ts
@@ -4,11 +4,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { createCustomElement } from '@angular/elements';
+import { MatDialogModule } from '@angular/material/dialog';
+
import { AppComponent } from './app.component';
import { ToolbarComponent } from './components/toolbar/toolbar.component';
import { UiElementToolboxComponent } from './components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component';
import { PropertiesComponent } from './components/unit-view/page-view/properties/properties.component';
-import { ConfirmationDialog, UnitViewComponent } from './components/unit-view/unit-view.component';
+import { UnitViewComponent } from './components/unit-view/unit-view.component';
import { PageViewComponent } from './components/unit-view/page-view/page-view.component';
import { PageCanvasComponent } from './components/unit-view/page-view/canvas/page-canvas.component';
import { CanvasToolbarComponent } from './components/unit-view/page-view/canvas/canvas.toolbar.component';
@@ -16,6 +18,7 @@ import { CanvasSectionComponent } from './components/unit-view/page-view/canvas/
import { CanvasSectionToolbarComponent } from './components/unit-view/page-view/canvas/canvas-section-toolbar.component';
import { CanvasDragOverlayComponent } from './components/unit-view/page-view/canvas/canvas-drag-overlay.component';
import { SharedModule } from '../../../common/app.module';
+import { ConfirmationDialog, MultilineTextEditDialog, TextEditDialog } from './dialog.service';
@NgModule({
declarations: [
@@ -29,14 +32,17 @@ import { SharedModule } from '../../../common/app.module';
CanvasToolbarComponent,
CanvasSectionComponent,
CanvasSectionToolbarComponent,
+ CanvasDragOverlayComponent,
ConfirmationDialog,
- CanvasDragOverlayComponent
+ TextEditDialog,
+ MultilineTextEditDialog
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
- SharedModule
+ SharedModule,
+ MatDialogModule
],
providers: []
})
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-drag-overlay.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-drag-overlay.component.ts
index dae87a5651141fc78eb429d66fbd720b08f68eb8..e67b53b63353f5c5ff4eaa9e3a252a8c41aed453 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-drag-overlay.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-drag-overlay.component.ts
@@ -12,7 +12,8 @@ import { UnitService } from '../../../../unit.service';
<!-- Needs extra div because styling can interfere with drag and drop-->
<div class="draggable-element" [class.draggable-element-selected]="selected"
cdkDrag [cdkDragData]="this.element" [cdkDragDisabled]="!selected"
- (click)="click($event)">
+ (click)="click($event)"
+ (dblclick)="openEditDialog()">
<div [style.position]="'absolute'"
[style.border]="selected ? '2px solid' : ''"
[style.width.px]="element.width"
@@ -91,4 +92,8 @@ export class CanvasDragOverlayComponent implements OnInit {
this.unitService.updateSelectedElementProperty('width', Math.max(this.oldX + event.distance.x, 0));
this.unitService.updateSelectedElementProperty('height', Math.max(this.oldY + event.distance.y, 0));
}
+
+ openEditDialog(): void {
+ this.unitService.showDefaultEditDialog(this.element);
+ }
}
diff --git a/projects/editor/src/app/components/unit-view/unit-view.component.ts b/projects/editor/src/app/components/unit-view/unit-view.component.ts
index 848d0692d959201996aa3f36b4e0c7c7be980fa1..49454d1522ddb9109fbc7185c53687599312d6a0 100644
--- a/projects/editor/src/app/components/unit-view/unit-view.component.ts
+++ b/projects/editor/src/app/components/unit-view/unit-view.component.ts
@@ -3,9 +3,9 @@ import {
Component, OnDestroy, OnInit
} from '@angular/core';
import { Observable, Subscription } from 'rxjs';
-import { MatDialog } from '@angular/material/dialog';
import { UnitService } from '../../unit.service';
import { Unit } from '../../../../../common/unit';
+import { DialogService } from '../../dialog.service';
@Component({
selector: 'app-unit-view',
@@ -22,7 +22,7 @@ import { Unit } from '../../../../../common/unit';
]
})
export class UnitViewComponent {
- constructor(public unitService: UnitService, public dialog: MatDialog) { }
+ constructor(public unitService: UnitService, private dialogService: DialogService) { }
addPage(): void {
this.unitService.addPage();
@@ -33,25 +33,10 @@ export class UnitViewComponent {
}
showConfirmDialog(): void {
- const dialogRef = this.dialog.open(ConfirmationDialog);
- dialogRef.afterClosed().subscribe((result: boolean) => {
+ this.dialogService.showConfirmDialog().subscribe((result: boolean) => {
if (result) {
this.unitService.deletePage();
}
});
}
}
-
-@Component({
- selector: 'app-confirmation-dialog',
- template: `
- <mat-dialog-content>
- Seite wirklich löschen?
- </mat-dialog-content>
- <mat-dialog-actions>
- <button mat-button [mat-dialog-close]="true">Okay</button>
- <button mat-button mat-dialog-close>Abbruch</button>
- </mat-dialog-actions>
- `
-})
-export class ConfirmationDialog {}
diff --git a/projects/editor/src/app/dialog.service.ts b/projects/editor/src/app/dialog.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b019bbcdf5705e72158e5386c9ea543038b4a88
--- /dev/null
+++ b/projects/editor/src/app/dialog.service.ts
@@ -0,0 +1,88 @@
+// eslint-disable-next-line max-classes-per-file
+import { Component, Inject, Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DialogService {
+ constructor(private dialog: MatDialog) { }
+
+ showConfirmDialog(): Observable<boolean> {
+ const dialogRef = this.dialog.open(ConfirmationDialog);
+ return dialogRef.afterClosed();
+ }
+
+ showTextEditDialog(oldText: string, multiline: boolean = false): Observable<string> {
+ let dialogRef = null;
+ if (multiline) {
+ dialogRef = this.dialog.open(MultilineTextEditDialog, {
+ width: '600px',
+ data: {
+ oldText: oldText
+ }
+ });
+ } else {
+ dialogRef = this.dialog.open(TextEditDialog, {
+ data: {
+ oldText: oldText
+ }
+ });
+ }
+ return dialogRef.afterClosed();
+ }
+}
+
+@Component({
+ selector: 'app-confirmation-dialog',
+ template: `
+ <mat-dialog-content>
+ Seite wirklich löschen?
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="true">Okay</button>
+ <button mat-button mat-dialog-close>Abbruch</button>
+ </mat-dialog-actions>
+ `
+})
+export class ConfirmationDialog {}
+
+@Component({
+ selector: 'app-text-edit-dialog',
+ template: `
+ <mat-dialog-content>
+ <mat-form-field>
+ <mat-label>Text</mat-label>
+ <input #inputElement matInput type="text" [value]="data.oldText">
+ </mat-form-field>
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="inputElement.value">Okay</button>
+ <button mat-button mat-dialog-close>Abbruch</button>
+ </mat-dialog-actions>
+ `
+})
+export class TextEditDialog {
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { oldText: string }) { }
+}
+
+@Component({
+ selector: 'app-multiline-text-edit-dialog',
+ template: `
+ <mat-dialog-content>
+ <mat-form-field [style.width.%]="100">
+ <mat-label>Text</mat-label>
+ <textarea #inputElement matInput type="text" [value]="data.oldText">
+ </textarea>
+ </mat-form-field>
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="inputElement.value">Okay</button>
+ <button mat-button mat-dialog-close>Abbruch</button>
+ </mat-dialog-actions>
+ `
+})
+export class MultilineTextEditDialog {
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { oldText: string }) { }
+}
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts
index 22651cd756569090a6343431784521c20cb6b2cb..60a3617949f1a0b82d40eea75309f251334ff953 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/projects/editor/src/app/unit.service.ts
@@ -3,12 +3,14 @@ import {
BehaviorSubject, Observable
} from 'rxjs';
import {
+ ButtonElement, TextElement,
Unit, UnitPage, UnitPageSection, UnitUIElement
} from '../../../common/unit';
import { FileService } from '../../../common/file.service';
import * as UnitFactory from './model/UnitFactory';
import { MessageService } from '../../../common/message.service';
import { IdService } from './id.service';
+import { DialogService } from './dialog.service';
@Injectable({
providedIn: 'root'
@@ -22,7 +24,9 @@ export class UnitService {
private _selectedElements: BehaviorSubject<UnitUIElement[]>;
- constructor(private messageService: MessageService, private idService: IdService) {
+ constructor(private messageService: MessageService,
+ private idService: IdService,
+ private dialogService: DialogService) {
const initialUnit = UnitFactory.createUnit();
const initialPage = UnitFactory.createUnitPage();
const initialSection = UnitFactory.createUnitPageSection();
@@ -219,4 +223,20 @@ export class UnitService {
selectPageSection(index: number): void {
this._selectedPageSectionIndex.next(index);
}
+
+ showDefaultEditDialog(element: UnitUIElement): void {
+ if (Object.prototype.hasOwnProperty.call(element, 'label')) {
+ this.dialogService.showTextEditDialog((element as any).label).subscribe((result: string) => {
+ if (result) {
+ this.updateSelectedElementProperty('label', result);
+ }
+ });
+ } else if (Object.prototype.hasOwnProperty.call(element, 'text')) {
+ this.dialogService.showTextEditDialog((element as any).text, true).subscribe((result: string) => {
+ if (result) {
+ this.updateSelectedElementProperty('text', result);
+ }
+ });
+ }
+ }
}