diff --git a/package.json b/package.json
index 5861c4b64df07d60594dbc353176ee705a45b93d..4dd5312780bdafb4fcbf0b1bcdb77c7204e9d813 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
"config": {
"player_version": "1.20.1",
"editor_version": "1.26.1",
- "unit_definition_version": "2.0.0"
+ "unit_definition_version": "3.0.0"
},
"scripts": {
"ng": "ng",
diff --git a/projects/common/interfaces/elements.ts b/projects/common/interfaces/elements.ts
index 0fb9e510ce3ce833cae130544a33a1e9f2a4b718..aa0048e0f11e8917237aa99057f14a65026d8cd2 100644
--- a/projects/common/interfaces/elements.ts
+++ b/projects/common/interfaces/elements.ts
@@ -55,10 +55,10 @@ export interface PositionProperties {
xPosition: number;
yPosition: number;
useMinHeight: boolean;
- gridColumnStart: number;
- gridColumnEnd: number;
- gridRowStart: number;
- gridRowEnd: number;
+ gridColumn: number;
+ gridColumnRange: number;
+ gridRow: number;
+ gridRowRange: number;
marginLeft: number;
marginRight: number;
marginTop: number;
diff --git a/projects/common/util/element.factory.ts b/projects/common/util/element.factory.ts
index 8656b35d4c6738778ada40b01d3ff55ede6ab54a..faaa9f80bbbc34c252fc5a37698ca99a435c3eee 100644
--- a/projects/common/util/element.factory.ts
+++ b/projects/common/util/element.factory.ts
@@ -111,10 +111,10 @@ export abstract class ElementFactory {
xPosition: defaults.xPosition !== undefined ? defaults.xPosition as number : 0,
yPosition: defaults.yPosition !== undefined ? defaults.yPosition as number : 0,
useMinHeight: defaults.useMinHeight !== undefined ? defaults.useMinHeight as boolean : false,
- gridColumnStart: defaults.gridColumnStart !== undefined ? defaults.gridColumnStart as number : 1,
- gridColumnEnd: defaults.gridColumnEnd !== undefined ? defaults.gridColumnEnd as number : 2,
- gridRowStart: defaults.gridRowStart !== undefined ? defaults.gridRowStart as number : 1,
- gridRowEnd: defaults.gridRowEnd !== undefined ? defaults.gridRowEnd as number : 2,
+ gridColumn: defaults.gridColumn !== undefined ? defaults.gridColumn as number : 1,
+ gridColumnRange: defaults.gridColumnRange !== undefined ? defaults.gridColumnRange as number : 1,
+ gridRow: defaults.gridRow !== undefined ? defaults.gridRow as number : 1,
+ gridRowRange: defaults.gridRowRange !== undefined ? defaults.gridRowRange as number : 1,
marginLeft: defaults.marginLeft !== undefined ? defaults.marginLeft as number : 0,
marginRight: defaults.marginRight !== undefined ? defaults.marginRight as number : 0,
marginTop: defaults.marginTop !== undefined ? defaults.marginTop as number : 0,
@@ -216,7 +216,7 @@ export abstract class ElementFactory {
asLink: element.asLink !== undefined ? element.asLink : false,
action: element.action || null,
actionParam: element.actionParam !== undefined ? element.actionParam : null,
- position: ElementFactory.initPositionProps(element.positionProps as Record<string, UIElementValue>),
+ position: ElementFactory.initPositionProps(element.position as Record<string, UIElementValue>),
styling: {
...ElementFactory.initBasicStyles(element.styling),
borderRadius: element.borderRadius !== undefined ? element.borderRadius as number : 0
diff --git a/projects/common/util/unit-definition-sanitizer.ts b/projects/common/util/unit-definition-sanitizer.ts
index 7eeb2d5a4f9701a007ce3595f62ddcad782badbc..fd99cff9c93b39b6940946ae6d48a298e5c070ef 100644
--- a/projects/common/util/unit-definition-sanitizer.ts
+++ b/projects/common/util/unit-definition-sanitizer.ts
@@ -35,7 +35,7 @@ export abstract class UnitDefinitionSanitizer {
}
if (UnitDefinitionSanitizer.isVersionOlderThanCurrent(UnitDefinitionSanitizer.unitDefinitionVersion)) {
- console.log('SANATIZING');
+ console.log('Sanatizing unit definition...');
const x = {
...unitDefinition,
pages: unitDefinition.pages.map((page: Page) => UnitDefinitionSanitizer.sanatizePage(page))
@@ -106,8 +106,17 @@ export abstract class UnitDefinitionSanitizer {
return newElement as unknown as UIElement;
}
- private static getPositionProps(element: Record<string, UIElementValue>): PositionProperties {
+ private static getPositionProps(element: Record<string, any>): PositionProperties {
if (element.position !== undefined) {
+ if (element.position?.gridColumnStart !== undefined) {
+ return {
+ ...element.position,
+ gridColumn: element.position.gridColumnStart,
+ gridColumnRange: element.position.gridColumnEnd - element.position.gridColumnStart,
+ gridRow: element.position.gridRowStart,
+ gridRowRange: element.position.gridRowEnd - element.position.gridRowStart
+ };
+ }
return element.position as PositionProperties;
}
if (element.positionProps !== undefined) {
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-section-helper-grid.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-section-helper-grid.component.ts
index 0263d57f6ab8f1f362d135942ca4c4cc66f299eb..9e40235047b7cf38d8cdc47a9dea6d4b0c6e52d6 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-section-helper-grid.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-section-helper-grid.component.ts
@@ -1,6 +1,5 @@
import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events';
import {
- ChangeDetectorRef,
Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges
} from '@angular/core';
import { UIElement, UIElementType } from '../../../../../../../common/interfaces/elements';
@@ -70,11 +69,12 @@ export class DynamicSectionHelperGridComponent implements OnInit, OnChanges {
let numberOfColumns;
if (this.autoColumnSize) {
numberOfColumns = this.section.elements
- .reduce((accumulator, currentValue) => Math.max(accumulator, currentValue.position.gridColumnEnd as number),
+ .reduce((accumulator, currentValue) => Math.max(accumulator, currentValue.position.gridColumn + currentValue.position.gridColumnRange),
0) - 1;
} else {
numberOfColumns = this.gridColumnSizes.split(' ').length;
}
+ console.log('numberOfColumns', numberOfColumns);
this.columnCountArray = Array(Math.max(numberOfColumns, 1));
}
@@ -82,7 +82,7 @@ export class DynamicSectionHelperGridComponent implements OnInit, OnChanges {
let numberOfRows;
if (this.autoRowSize) {
numberOfRows = this.section.elements
- .reduce((accumulator, currentValue) => Math.max(accumulator, currentValue.position.gridRowEnd as number),
+ .reduce((accumulator, currentValue) => Math.max(accumulator, currentValue.position.gridRow + currentValue.position.gridRowRange),
0) - 1;
} else {
numberOfRows = this.gridRowSizes.split(' ').length;
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/element-grid-change-listener.directive.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/element-grid-change-listener.directive.ts
index 5378abecec304b669404489fb58f92f653f98d5b..4cc49c5c33293ef7f8f24f3cc2da04f70eadd371 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/element-grid-change-listener.directive.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/element-grid-change-listener.directive.ts
@@ -7,10 +7,10 @@ import {
})
export class ElementGridChangeListenerDirective implements OnChanges {
@Input() autoColumnSize!: boolean;
- @Input() gridColumnStart!: number;
- @Input() gridColumnEnd!: number;
- @Input() gridRowStart!: number;
- @Input() gridRowEnd!: number;
+ @Input() gridColumn!: number;
+ @Input() gridColumnRange!: number;
+ @Input() gridRow!: number;
+ @Input() gridRowRange!: number;
@Output() elementChanged = new EventEmitter();
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts
index a391be8a9320ab06cebc3fa7730ef4448dc1f145..cd613817236cfe09cd6b8b618e82bdaf3b889ab3 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/section-dynamic.component.ts
@@ -39,20 +39,20 @@ import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid
[style.margin-right.px]="element.position.marginRight"
[style.margin-top.px]="element.position.marginTop"
[style.margin-bottom.px]="element.position.marginBottom"
- [style.grid-column-start]="element.position.gridColumnStart"
- [style.grid-column-end]="element.position.gridColumnEnd"
- [style.grid-row-start]="element.position.gridRowStart"
- [style.grid-row-end]="element.position.gridRowEnd"
+ [style.grid-column-start]="element.position.gridColumn"
+ [style.grid-column-end]="element.position.gridColumn + element.position.gridColumnRange"
+ [style.grid-row-start]="element.position.gridRow"
+ [style.grid-row-end]="element.position.gridRow + element.position.gridRowRange"
cdkDropList cdkDropListSortingDisabled
[cdkDropListData]="{ sectionIndex: sectionIndex }"
[cdkDropListConnectedTo]="dropListList"
[style.position]="'relative'"
[style.pointer-events]="dragging ? 'none' : 'auto'"
appElementGridChangeListener
- [gridColumnStart]="element.position.gridColumnStart"
- [gridColumnEnd]="element.position.gridColumnEnd"
- [gridRowStart]="element.position.gridRowStart"
- [gridRowEnd]="element.position.gridRowEnd"
+ [gridColumn]="element.position.gridColumn"
+ [gridColumnRange]="element.position.gridColumnRange"
+ [gridRow]="element.position.gridRow"
+ [gridRowRange]="element.position.gridRowRange"
(dragStart)="dragging = true"
(dragEnd)="dragging = false"
(elementChanged)="helperGrid?.refresh()">
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/position-properties-tab/element-position-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties-panel/position-properties-tab/element-position-properties.component.ts
index 786f47b9a554f2ffadbaea9fd69ffc5b1185a859..54a517b7a7563d631aed63326c98263969c67ec0 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/position-properties-tab/element-position-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/position-properties-tab/element-position-properties.component.ts
@@ -47,7 +47,7 @@ export class ElementPositionPropertiesComponent {
@Input() dimensions!: { width: number; height: number; };
@Input() positionProperties!: PositionProperties;
@Output() updateModel =
- new EventEmitter<{ property: string; value: string | boolean, isInputValid?: boolean | null }>();
+ new EventEmitter<{ property: string; value: string | number | boolean, isInputValid?: boolean | null }>();
constructor(private unitService: UnitService, public selectionService: SelectionService) { }
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts
index 0bad4861737d04bd37a2fc55f4346384e8afbe6b..3e0bf6af753357dff77686dbf28d247f04193672 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts
@@ -30,30 +30,29 @@ import { PositionProperties } from '../../../../../../../../../common/interfaces
<ng-template #elseBlock>
{{'propertiesPanel.grid' | translate }}
<div class="input-group">
- <div fxLayoutAlign="row">
- <mat-form-field class="small-input">
- <mat-label>{{'propertiesPanel.startColumn' | translate }}</mat-label>
- <input matInput type="number" [ngModel]="positionProperties.gridColumnStart"
- (ngModelChange)="updateModel.emit({ property: 'gridColumnStart', value: $event })">
- </mat-form-field>
- <mat-form-field class="small-input">
- <mat-label>{{'propertiesPanel.endColumn' | translate }}</mat-label>
- <input matInput type="number" [ngModel]="positionProperties.gridColumnEnd"
- (ngModelChange)="updateModel.emit({ property: 'gridColumnEnd', value: $event })">
- </mat-form-field>
- </div>
- <div fxLayoutAlign="row">
- <mat-form-field class="small-input">
- <mat-label>{{'propertiesPanel.startRow' | translate }}</mat-label>
- <input matInput type="number" [ngModel]="positionProperties.gridRowStart"
- (ngModelChange)="updateModel.emit({ property: 'gridRowStart', value: $event })">
- </mat-form-field>
- <mat-form-field class="small-input">
- <mat-label>{{'propertiesPanel.endRow' | translate }}</mat-label>
- <input matInput type="number" [ngModel]="positionProperties.gridRowEnd"
- (ngModelChange)="updateModel.emit({ property: 'gridRowEnd', value: $event })">
- </mat-form-field>
- </div>
+ <mat-form-field>
+ <mat-label>{{'propertiesPanel.column' | translate }}</mat-label>
+ <input matInput type="number" [ngModel]="positionProperties.gridColumn"
+ (ngModelChange)="updateModel.emit({ property: 'gridColumn', value: $event })">
+ </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'propertiesPanel.row' | translate }}</mat-label>
+ <input matInput type="number" [ngModel]="positionProperties.gridRow"
+ (ngModelChange)="updateModel.emit({ property: 'gridRow', value: $event })">
+ </mat-form-field>
+
+ <mat-form-field>
+ <mat-label>{{'propertiesPanel.columnRange' | translate }}</mat-label>
+ <input matInput type="number"
+ [ngModel]="positionProperties.gridColumnRange"
+ (ngModelChange)="updateModel.emit({ property: 'gridColumnRange', value: $event })">
+ </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'propertiesPanel.rowRange' | translate }}</mat-label>
+ <input matInput type="number"
+ [ngModel]="positionProperties.gridRowRange"
+ (ngModelChange)="updateModel.emit({ property: 'gridRowRange', value: $event })">
+ </mat-form-field>
</div>
{{'propertiesPanel.margin' | translate }}
@@ -70,8 +69,11 @@ import { PositionProperties } from '../../../../../../../../../common/interfaces
<mat-label>{{'propertiesPanel.left' | translate }}</mat-label>
<input matInput type="number" #marginLeft="ngModel"
[ngModel]="positionProperties.marginLeft"
- (ngModelChange)="updateModel.emit(
- { property: 'marginLeft', value: $event, isInputValid: marginLeft.valid && $event !== null })">
+ (ngModelChange)="updateModel.emit({
+ property: 'marginLeft',
+ value: $event,
+ isInputValid: marginLeft.valid && $event !== null
+ })">
</mat-form-field>
<mat-form-field class="right-form-field small-input">
<mat-label>{{'propertiesPanel.right' | translate }}</mat-label>
@@ -119,5 +121,5 @@ import { PositionProperties } from '../../../../../../../../../common/interfaces
export class PositionFieldSetComponent {
@Input() positionProperties!: PositionProperties;
@Output() updateModel =
- new EventEmitter<{ property: string; value: string | boolean, isInputValid?: boolean | null }>();
+ new EventEmitter<{ property: string; value: string | number | boolean, isInputValid?: boolean | null }>();
}
diff --git a/projects/editor/src/app/services/unit.service.ts b/projects/editor/src/app/services/unit.service.ts
index 381cbad8ded818b202cebd23aa629303d5eaeb74..75befb2a4a28b71da105875884f8554dc8cb7a74 100644
--- a/projects/editor/src/app/services/unit.service.ts
+++ b/projects/editor/src/app/services/unit.service.ts
@@ -139,10 +139,10 @@ export class UnitService {
} as unknown as UIElement) as PositionedElement;
}
if (coordinates && section.dynamicPositioning) {
- newElement.position.gridColumnStart = coordinates.x;
- newElement.position.gridColumnEnd = coordinates.x + 1;
- newElement.position.gridRowStart = coordinates.y;
- newElement.position.gridRowEnd = coordinates.y + 1;
+ newElement.position.gridColumn = coordinates.x;
+ newElement.position.gridColumnRange = 1;
+ newElement.position.gridRow = coordinates.y;
+ newElement.position.gridRowRange = 1;
} else if (coordinates && !section.dynamicPositioning) {
newElement.position.xPosition = coordinates.x;
newElement.position.yPosition = coordinates.y;
@@ -256,8 +256,8 @@ export class UnitService {
row.readOnly = value as boolean;
});
}
- } else if (['fixedSize', 'dynamicPositioning', 'xPosition', 'yPosition', 'useMinHeight', 'gridColumnStart',
- 'gridColumnEnd', 'gridRowStart', 'gridRowEnd', 'marginLeft', 'marginRight', 'marginTop',
+ } else if (['fixedSize', 'dynamicPositioning', 'xPosition', 'yPosition', 'useMinHeight', 'gridColumn',
+ 'gridColumnRange', 'gridRow', 'gridRowRange', 'marginLeft', 'marginRight', 'marginTop',
'marginBottom', 'zIndex'].includes(property)) {
element.position![property] = Copy.getCopy(value);
} else if (['fontColor', 'font', 'fontSize', 'lineHeight', 'bold', 'italic', 'underline',
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 0bf327a453e612cee54154e46775caf6d125ec43..00fbf0ff861ac2dc39109609f429ea0d175bfcb1 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -55,10 +55,10 @@
"useMinHeight": "Mindesthöhe setzen",
"minHeight": "Mindesthöhe",
"grid": "Raster",
- "startColumn": "Start-Spalte",
- "endColumn": "End-Spalte",
- "startRow": "Start-Zeile",
- "endRow": "End-Zeile",
+ "column": "Spalte",
+ "row": "Zeile",
+ "columnRange": "Spaltenspanne",
+ "rowRange": "Zeilenspanne",
"margin": "Abstand",
"top": "oben",
"left": "links",
@@ -79,10 +79,6 @@
"requiredField": "Pflichtfeld",
"requiredWarnMessage": "Warnmeldung",
"options": "Optionen",
- "vertical": "vertikal",
- "column": "vertikal",
- "horizontal": "horizontal",
- "row": "horizontal",
"resizeEnabled": "größenverstellbar",
"action": "Aktion",
"actionParam": "Aktionsparameter",