From 1a3d4f7dde201dc2edb4ef0ff1d267d1f6399727 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 3 Aug 2021 19:58:12 +0200
Subject: [PATCH] Add dynamic positioning properties
Sections and elements can have this prop. Elements only need it to
determine what properties to show in the props panel.
The others are basic props for grid layouting. Refer to the grid
documentation.
---
projects/common/unit.ts | 11 +++++++++--
projects/editor/src/app/model/UnitFactory.ts | 15 +++++++++++----
projects/editor/src/app/unit.service.ts | 10 ++++++++++
3 files changed, 30 insertions(+), 6 deletions(-)
diff --git a/projects/common/unit.ts b/projects/common/unit.ts
index 40e6a510a..136ca6a52 100644
--- a/projects/common/unit.ts
+++ b/projects/common/unit.ts
@@ -16,17 +16,24 @@ export interface UnitPageSection {
width: number;
height: number;
backgroundColor: string;
+ dynamicPositioning: boolean;
+ gridColumnSizes: string;
}
export interface UnitUIElement {
[index: string]: string | number | boolean | string[] | undefined;
type: string; // TODO maybe use enum or manual enumeration, because possible values are known
id: string;
- xPosition: number;
- yPosition: number;
zIndex: number
width: number;
height: number;
+ dynamicPositioning: boolean;
+ xPosition: number;
+ yPosition: number;
+ gridColumnStart: number;
+ gridColumnEnd: number;
+ gridRowStart: number;
+ gridRowEnd: number;
}
export interface TextUIElement extends UnitUIElement {
diff --git a/projects/editor/src/app/model/UnitFactory.ts b/projects/editor/src/app/model/UnitFactory.ts
index 4d9d6c3f2..ee7351f96 100644
--- a/projects/editor/src/app/model/UnitFactory.ts
+++ b/projects/editor/src/app/model/UnitFactory.ts
@@ -28,7 +28,9 @@ export function createUnitPageSection(): UnitPageSection {
elements: [],
width: 1200,
height: 200,
- backgroundColor: '#FFFAF0'
+ backgroundColor: '#FFFAF0',
+ dynamicPositioning: false,
+ gridColumnSizes: '1fr 1fr 1fr'
};
}
@@ -36,11 +38,16 @@ export function createUnitUIElement(type: string): UnitUIElement {
return {
type,
id: 'id_placeholder',
- xPosition: 0,
- yPosition: 0,
zIndex: 0,
width: 180,
- height: 60
+ height: 60,
+ dynamicPositioning: false,
+ xPosition: 0,
+ yPosition: 0,
+ gridColumnStart: 1,
+ gridColumnEnd: 1,
+ gridRowStart: 1,
+ gridRowEnd: 1
};
}
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts
index 910292be7..9688b3b12 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/projects/editor/src/app/unit.service.ts
@@ -153,6 +153,8 @@ export class UnitService {
throw new Error(`ElementType ${elementType} not found!`);
}
newElement.id = this.idService.getNewID(elementType);
+ newElement.dynamicPositioning = this._unit.value.pages[this._selectedPageIndex.value]
+ .sections[this._selectedPageSectionIndex.value].dynamicPositioning;
this._unit.value.pages[this._selectedPageIndex.value]
.sections[this._selectedPageSectionIndex.value].elements.push(newElement!);
@@ -241,6 +243,14 @@ export class UnitService {
this.elementPropertyUpdated.next();
}
+ setSectionDynamicPositioning(section: UnitPageSection, value: boolean): void {
+ section.dynamicPositioning = value;
+ section.elements.forEach((element: UnitUIElement) => {
+ element.dynamicPositioning = value;
+ });
+ this.elementPropertyUpdated.next();
+ }
+
saveUnit(): void {
const unitJSON = JSON.stringify(this._unit.value);
FileService.saveUnitToFile(unitJSON);
--
GitLab