From 76b06912f2627b92b22a970002bb04d9f684fffc Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 7 Jul 2021 17:11:35 +0200
Subject: [PATCH] Add Z-Index property to elements

This defines the elements priority when stacking elements on the canvas.
Directly maps to the CSS property.

Also show tooltip on the input to explain what it is for.
---
 projects/common/app.module.ts                               | 4 +++-
 projects/common/unit.ts                                     | 1 +
 .../page-view/canvas/canvas-drag-overlay.component.ts       | 1 +
 .../page-view/properties/properties.component.html          | 6 ++++++
 projects/editor/src/app/model/UnitFactory.ts                | 2 +-
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/projects/common/app.module.ts b/projects/common/app.module.ts
index 98d352674..d85cc9b34 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 22be11d30..3ac0dee6e 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 8eba49469..ea81fc4d8 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 b34809daf..1aa3afb67 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 332e68b17..9ce0342fe 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',
-- 
GitLab