diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.html b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.html
index ddf998ee5175d87a3d2db1619194709797daaa0a..ea25625e5f41a136bd3fba42286b825f740000da 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.html
@@ -12,6 +12,7 @@
[allowMoveUp]="i != 0"
[allowMoveDown]="i < page.sections.length - 1"
[allowDelete]="page.sections.length > 1"
+ (changeLayout)="generateDropListList()"
(moveSection)="unitService.moveSection(section, page, $event)"
(duplicateSection)="unitService.duplicateSection(section, page, i)"
(selectElementComponent)="selectElementComponent($event)"
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.ts
index 55aba5c29f213dbe78957d8208f417cccb278291..5266afe706ae0bd8e81e6e27563e55959b087cb6 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas.component.ts
@@ -1,9 +1,7 @@
import {
- Component, Input, OnDestroy, OnInit, QueryList, ViewChildren
+ Component, Input, QueryList, ViewChildren
} from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
import { UnitService } from '../../../../services/unit.service';
import { SelectionService } from '../../../../services/selection.service';
import { Page } from '../../../../../../../common/models/page';
@@ -25,22 +23,16 @@ import { SectionDynamicComponent } from './section-dynamic.component';
'.section-menu.open {opacity:1; transition-delay:0s;}'
]
})
-export class CanvasComponent implements OnInit, OnDestroy {
+export class CanvasComponent {
@Input() page!: Page;
dropListList: string[] = [];
hoveredSection: number = -1;
- private ngUnsubscribe = new Subject<void>();
- @ViewChildren('sectionComponent') childSectionComponents!: QueryList<SectionStaticComponent | SectionDynamicComponent>;
+ @ViewChildren('sectionComponent')
+ childSectionComponents!: QueryList<SectionStaticComponent | SectionDynamicComponent>;
constructor(public selectionService: SelectionService, public unitService: UnitService) { }
- ngOnInit(): void {
- this.unitService.unit
- .pipe(takeUntil(this.ngUnsubscribe))
- .subscribe(() => this.generateDropListList());
- }
-
/*
To make it work that the section itself can handle drop events, but also have the canvas to handle drops
when outside of the section, all the allowed dropLists have to be connected. Because the lists are not properly
@@ -58,17 +50,19 @@ export class CanvasComponent implements OnInit, OnDestroy {
Resizing in dynamic sections is handled by the section/element-overlays themselves.
*/
generateDropListList(): void {
- this.dropListList = [];
- this.page.sections.forEach((section: Section, index: number) => {
- if (!section.dynamicPositioning) {
- this.dropListList.push(`section-${index}`);
- } else {
- section.gridColumnSizes.split(' ').forEach((columnSize: string, columnIndex: number) => {
- section.gridRowSizes.split(' ').forEach((rowSize: string, rowIndex: number) => {
- this.dropListList.push(`list-${index}-${columnIndex + 1}-${rowIndex + 1}`); // grid starts counting at 1
+ setTimeout(() => {
+ this.dropListList = [];
+ this.page.sections.forEach((section: Section, index: number) => {
+ if (!section.dynamicPositioning) {
+ this.dropListList.push(`section-${index}`);
+ } else {
+ section.gridColumnSizes.split(' ').forEach((columnSize: string, columnIndex: number) => {
+ section.gridRowSizes.split(' ').forEach((rowSize: string, rowIndex: number) => {
+ this.dropListList.push(`list-${index}-${columnIndex + 1}-${rowIndex + 1}`); // grid starts counting at 1
+ });
});
- });
- }
+ }
+ });
});
}
@@ -78,7 +72,7 @@ export class CanvasComponent implements OnInit, OnDestroy {
this.page.sections[newSectionIndex]);
}
- elementDropped(event: CdkDragDrop<DropListData>): void {
+ elementDropped(event: CdkDragDrop<{ sectionIndex: number; gridCoordinates?: number[]; }>): void {
const selectedElements = this.selectionService.getSelectedElements() as PositionedElement[];
if (event.previousContainer !== event.container) {
@@ -137,19 +131,4 @@ export class CanvasComponent implements OnInit, OnDestroy {
}
return null;
}
-
- ngOnDestroy(): void {
- this.ngUnsubscribe.next();
- this.ngUnsubscribe.complete();
- }
-}
-
-export interface DragItemData {
- dragType: string;
- element: UIElement;
-}
-
-export interface DropListData {
- sectionIndex: number;
- gridCoordinates?: number[];
}
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 8977537ae3da2846b9de51b9209dda3712d5f3fd..d8c5a9e9d28881c8811967542f07ae85f813bdbb 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
@@ -2,10 +2,9 @@ import {
Component, Input, Output, EventEmitter, ViewChildren, QueryList
} from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events';
-import { DragItemData, DropListData } from './canvas.component';
import { UnitService } from '../../../../services/unit.service';
import { Section } from '../../../../../../../common/models/section';
-import { UIElementType } from '../../../../../../../common/models/uI-element';
+import { UIElement, UIElementType } from '../../../../../../../common/models/uI-element';
import { CanvasElementOverlay } from './overlays/canvas-element-overlay';
@Component({
@@ -77,8 +76,8 @@ export class SectionDynamicComponent {
constructor(public unitService: UnitService) { }
- drop(event: CdkDragDrop<DropListData>): void {
- const dragItemData: DragItemData = event.item.data;
+ drop(event: CdkDragDrop<{ sectionIndex: number; gridCoordinates?: number[]; }>): void {
+ const dragItemData: { dragType: string; element: UIElement; } = event.item.data;
// Move element to other section - handled by parent (page-canvas).
if (event.previousContainer.data.sectionIndex !== event.container.data.sectionIndex) {
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts
index f7774d056f719347c9815681e13c35afc3b1f6ac..23e31341c2a4b0a4779c3a17cae4031170ec1cfe 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts
@@ -154,6 +154,7 @@ export class SectionMenuComponent implements OnInit, OnDestroy {
@Output() moveSection = new EventEmitter<'up' | 'down'>();
@Output() duplicateSection = new EventEmitter();
@Output() selectElementComponent = new EventEmitter<UIElement>();
+ @Output() changeLayout = new EventEmitter();
@ViewChild('colorPicker') colorPicker!: ElementRef;
columnSizes: { value: string, unit: string }[] = [];
@@ -170,6 +171,7 @@ export class SectionMenuComponent implements OnInit, OnDestroy {
updateModel(property: string, value: string | number | boolean): void {
this.unitService.updateSectionProperty(this.section, property, value);
+ this.changeLayout.emit();
}
selectElement(element: UIElement): void {
@@ -200,6 +202,7 @@ export class SectionMenuComponent implements OnInit, OnDestroy {
this.section.gridRowSizes.split(' ').forEach((size: string) => {
this.rowSizes.push({ value: size.slice(0, -2), unit: size.slice(-2) });
});
+ this.changeLayout.emit();
}
/* Add elements to size array. Default value 1fr. */