diff --git a/projects/common/app.module.ts b/projects/common/app.module.ts index 98d352674f57f0574d927b3d80098d25a10687c8..d85cc9b34cb77f06f40b786a9df12aeb45cd2c83 100644 --- a/projects/common/app.module.ts +++ b/projects/common/app.module.ts @@ -18,6 +18,7 @@ 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'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { ButtonComponent } from './element-components/button.component'; import { CorrectionComponent } from './element-components/compound-components/correction.component'; @@ -78,7 +79,8 @@ import { DropdownComponent } from './element-components/dropdown.component'; CheckboxComponent, DropdownComponent, CorrectionComponent, - MatSnackBarModule + MatSnackBarModule, + MatTooltipModule ] }) export class SharedModule { } diff --git a/projects/common/unit.ts b/projects/common/unit.ts index 22be11d30fd0183b882874d74f5b213400315f26..3ac0dee6e37005cb60da6dc63a454ac001e386d0 100644 --- a/projects/common/unit.ts +++ b/projects/common/unit.ts @@ -22,6 +22,7 @@ export interface UnitUIElement { id: string; xPosition: number; yPosition: number; + zIndex: number width: number; height: number; backgroundColor: string; 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 8eba494699794bfd1c8a007b0cd1be5e58006386..ea81fc4d84731c90b59e5d43267ccae1e5b2ccdb 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 @@ -49,6 +49,7 @@ export class CanvasDragOverlayComponent implements OnInit { border: this._selected ? '2px solid' : '', width: `${this.element.width}px`, height: `${this.element.height}px`, + 'z-index': `${this.element.zIndex}`, left: `${this.element.xPosition.toString()}px`, top: `${this.element.yPosition.toString()}px` }; diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties/properties.component.html index b34809daf81cd293f463a4ea9961b495fd053525..1aa3afb675dfa585dadc78ee888bdda4e1420d30 100644 --- a/projects/editor/src/app/components/unit-view/page-view/properties/properties.component.html +++ b/projects/editor/src/app/components/unit-view/page-view/properties/properties.component.html @@ -102,6 +102,12 @@ <input matInput type="number" [value]="combinedProperties.yPosition" (input)="updateModel('yPosition', $any($event.target).value)"> </mat-form-field> + <mat-form-field *ngIf="combinedProperties.hasOwnProperty('zIndex')"> + <mat-label>Z-Index</mat-label> + <input matInput type="number" [value]="combinedProperties.zIndex" + (input)="updateModel('zIndex', $any($event.target).value)" + matTooltip="Priorität beim Stapeln von Elementen. Der höhere Index erscheint vorne."> + </mat-form-field> </div> </mat-tab> diff --git a/projects/editor/src/app/model/UnitFactory.ts b/projects/editor/src/app/model/UnitFactory.ts index 332e68b1709275776c589a61c5ef48d95d5203e6..9ce0342febac49c4e92db98b72d970ba7b955172 100644 --- a/projects/editor/src/app/model/UnitFactory.ts +++ b/projects/editor/src/app/model/UnitFactory.ts @@ -6,7 +6,6 @@ import { VideoElement } from '../../../../common/unit'; - export function createUnit(): Unit { return { pages: [] @@ -37,6 +36,7 @@ export function createUnitUIElement(type: string): UnitUIElement { id: 'id_placeholder', xPosition: 0, yPosition: 0, + zIndex: 0, width: 180, height: 60, backgroundColor: 'lightgrey',