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 f44024a46f1599d55f8e6085d1e05ad62b21fcee..0263d57f6ab8f1f362d135942ca4c4cc66f299eb 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,7 +1,7 @@ import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events'; import { ChangeDetectorRef, - Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges + Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { UIElement, UIElementType } from '../../../../../../../common/interfaces/elements'; import { UnitService } from '../../../../services/unit.service'; @@ -45,7 +45,7 @@ export class DynamicSectionHelperGridComponent implements OnInit, OnChanges { columnCountArray: unknown[] = []; rowCountArray: unknown[] = []; - constructor(public unitService: UnitService) {} + constructor(public unitService: UnitService, public ele: ElementRef) {} ngOnInit(): void { this.calculateColumnCount(); diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts index 881425cf6f5982ef4b463eafa6469fa0b0c070b6..66a8c297a944829b933a0ed10a2c050c2cfd9f60 100644 --- a/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts +++ b/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts @@ -12,7 +12,7 @@ import { UIElement } from '../../../../../../../../common/interfaces/elements'; <!-- DragStart and DragEnd are part of a cursor hack to style the body. See global styling file. --> <div #draggableElement class="draggable-element" [class.fixed-size-content-wrapper]="element.position?.dynamicPositioning && - element.position?.fixedSize" + element.position?.fixedSize" [class.temporaryHighlight]="temporaryHighlight" [style.display]="dragging ? 'none' : ''" tabindex="-1" @@ -61,7 +61,8 @@ import { UIElement } from '../../../../../../../../common/interfaces/elements'; }) export class DynamicCanvasOverlayComponent extends CanvasElementOverlay { @Input() dynamicPositioning!: boolean; - @Output() resize = new EventEmitter<{ dragging: boolean, elementWidth?: number, elementHeight?: number }>(); + @Output() dragStart = new EventEmitter(); + @Output() dragEnd = new EventEmitter(); @ViewChild('draggableElement') dragElement!: ElementRef; private gridElementWidth: number = 0; @@ -81,32 +82,20 @@ export class DynamicCanvasOverlayComponent extends CanvasElementOverlay { this.gridElementHeight = this.dragElement.nativeElement.offsetHeight - 2; this.elementWidth = this.dragElement.nativeElement.offsetWidth - 2; this.elementHeight = this.dragElement.nativeElement.offsetHeight - 2; - - this.resize.emit({ - dragging: true, - elementWidth: this.dragElement.nativeElement.offsetWidth - 2, - elementHeight: this.dragElement.nativeElement.offsetHeight - 2 - }); + this.dragStart.emit(); } resizeDragMove(event: CdkDragMove<{ dragType: string; element: UIElement }>): void { this.dragging = true; this.elementWidth = this.gridElementWidth + event.distance.x; this.elementHeight = this.gridElementHeight + event.distance.y; - this.resize.emit({ - dragging: true, - elementWidth: this.gridElementWidth + event.distance.x, - elementHeight: this.gridElementHeight + event.distance.y - }); } resizeDragEnd(): void { this.bodyElement.classList.remove('inheritCursors'); this.bodyElement.style.cursor = 'unset'; this.dragging = false; - this.resize.emit({ - dragging: false - }); + this.dragEnd.emit(); } moveDragStart(): void { 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 11e320851cc58c1c8655381a180524981aa2694d..a391be8a9320ab06cebc3fa7730ef4448dc1f145 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 @@ -1,10 +1,6 @@ import { - Component, - Input, - Output, - EventEmitter, - ViewChildren, - QueryList, ViewChild, ElementRef + Component, Input, Output, EventEmitter, + ViewChildren, QueryList, ViewChild } from '@angular/core'; import { CanvasElementOverlay } from './overlays/canvas-element-overlay'; import { Section } from '../../../../../../../common/interfaces/unit'; @@ -20,7 +16,8 @@ import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid [style.grid-auto-rows]="'auto'" cdkDropListGroup [style.border]="isSelected ? '2px solid #ff4081': '1px dotted'" - [style.min-height.px]="section.autoRowSize ? 50 : section.height" + [style.min-height.px]="section.autoRowSize ? 50 : null" + [style.height.px]="section.autoRowSize ? dragging ? currentHeight : null : section.height" [style.background-color]="section.backgroundColor" app-dynamic-section-helper-grid [autoColumnSize]="section.autoColumnSize" @@ -56,7 +53,8 @@ import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid [gridColumnEnd]="element.position.gridColumnEnd" [gridRowStart]="element.position.gridRowStart" [gridRowEnd]="element.position.gridRowEnd" - (resize)="resizeOverlay($event)" + (dragStart)="dragging = true" + (dragEnd)="dragging = false" (elementChanged)="helperGrid?.refresh()"> </aspect-dynamic-canvas-overlay> </div> @@ -73,8 +71,5 @@ export class SectionDynamicComponent { @ViewChildren('elementComponent') childElementComponents!: QueryList<CanvasElementOverlay>; dragging = false; - - resizeOverlay(event: { dragging: boolean, elementWidth?: number, elementHeight?: number }): void { - this.dragging = event.dragging; - } + currentHeight: number = 0; }