From 96af7dec59435919cff41c6bdbca849d98018b11 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 28 Oct 2021 14:52:20 +0200
Subject: [PATCH] [editor] Fix resize dragging in dynamic section mode
Some things had to be tweaked in regards to positioning and sizing of
elements.
The drag preview is now done with a separate div, which only shows while
dragging and has the temporary dimensions of the element. When dropped
it sets the grid values if the dropzone as before.
---
.../dynamic-canvas-overlay.component.ts | 38 ++++++++++++++-----
.../canvas/section-dynamic.component.ts | 10 +----
2 files changed, 30 insertions(+), 18 deletions(-)
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts b/projects/editor/src/app/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts
index ea04c33e5..44fcb3bdf 100644
--- a/projects/editor/src/app/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts
+++ b/projects/editor/src/app/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts
@@ -12,22 +12,29 @@ import { UIElement } from '../../../../../../common/models/uI-element';
cdkDrag [cdkDragData]="{dragType: 'move', element: element}" [cdkDragDisabled]="!isSelected"
(click)="selectElement($event.shiftKey)" (dblclick)="openEditDialog()"
(cdkDragStarted)="!isSelected && selectElement()"
- [style.height.%]="100"
- [style.border]="isSelected ? '1px solid' : ''">
- <div *ngIf="isSelected" class="resizeHandle"
+ [style.outline]="isSelected ? 'purple solid 1px' : ''">
+ <div *ngIf="isSelected"
+ [style.width.%]="dragging ? 100 : 0"
+ [style.height.%]="dragging ? 100 : 0"
cdkDrag [cdkDragData]="{dragType: 'resize', element: element}"
- (cdkDragStarted)="dragStart()" (cdkDragEnded)="dragEnd()" (cdkDragMoved)="resizeElement($event)"
- cdkDragBoundary=".section-wrapper"
- [style.right.px]="2" [style.bottom.px]="-3">
- <mat-icon>aspect_ratio</mat-icon>
- <div *cdkDragPlaceholder></div>
+ (cdkDragStarted)="dragStart()" (cdkDragEnded)="dragEnd()" (cdkDragMoved)="resizeElement($event)">
+ <div class="resizeHandle">
+ <mat-icon>aspect_ratio</mat-icon>
+ <div *cdkDragPlaceholder></div>
+ </div>
</div>
<ng-template #elementContainer></ng-template>
</div>
+ <div [style.position]="'relative'"
+ [style.width.px]="dragging ? elementWidth : 0"
+ [style.height.px]="dragging ? elementHeight : 0"
+ [style.border]="'1px solid purple'">
+ </div>
`,
styles: [
- '.draggable-element {position: relative}',
- '.resizeHandle {position: absolute}'
+ '.draggable-element {position: relative; width: 100%; height: 100%}',
+ '.resizeHandle {position: absolute; right: 3px; bottom: 3px; z-index: 1; height: 25px}',
+ '.cdk-drag {position: absolute; bottom: 0; right: 0}'
]
})
export class DynamicCanvasOverlayComponent extends CanvasElementOverlay {
@@ -37,10 +44,17 @@ export class DynamicCanvasOverlayComponent extends CanvasElementOverlay {
@ViewChild('draggableElement') dragElement!: ElementRef;
private gridElementWidth: number = 0;
private gridElementHeight: number = 0;
+ elementWidth: number = 0;
+ elementHeight: number = 0;
+
+ dragging = false;
dragStart(): void {
+ this.dragging = true;
this.gridElementWidth = this.dragElement.nativeElement.offsetWidth - 2;
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,
@@ -50,6 +64,9 @@ export class DynamicCanvasOverlayComponent extends CanvasElementOverlay {
}
resizeElement(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,
@@ -58,6 +75,7 @@ export class DynamicCanvasOverlayComponent extends CanvasElementOverlay {
}
dragEnd(): void {
+ this.dragging = false;
this.resize.emit({
dragging: false
});
diff --git a/projects/editor/src/app/unit-view/page-view/canvas/section-dynamic.component.ts b/projects/editor/src/app/unit-view/page-view/canvas/section-dynamic.component.ts
index 09e1af999..f0f54c04e 100644
--- a/projects/editor/src/app/unit-view/page-view/canvas/section-dynamic.component.ts
+++ b/projects/editor/src/app/unit-view/page-view/canvas/section-dynamic.component.ts
@@ -53,10 +53,8 @@ import { UIElementType } from '../../../../../../common/models/uI-element';
[cdkDropListData]="{ sectionIndex: sectionIndex }"
[cdkDropListConnectedTo]="dropListList"
(resize)="resizeOverlay($event)"
- [style.pointer-events]="dragging ? 'none' : 'auto'"
- [style.position]="dragging ? 'absolute' : null"
- [style.width.px]="dragging ? draggingElementWidth : null"
- [style.height.px]="dragging ? draggingElementHeight : null">
+ [style.position]="'relative'"
+ [style.pointer-events]="dragging ? 'none' : 'auto'">
</app-dynamic-canvas-overlay>
</div>
`,
@@ -72,8 +70,6 @@ export class SectionDynamicComponent {
@Output() transferElement = new EventEmitter<{ previousSectionIndex: number, newSectionIndex: number }>();
dragging = false;
- draggingElementWidth: number | undefined = 0;
- draggingElementHeight: number | undefined = 0;
constructor(public unitService: UnitService) { }
@@ -138,7 +134,5 @@ export class SectionDynamicComponent {
resizeOverlay(event: { dragging: boolean, elementWidth?: number, elementHeight?: number }): void {
this.dragging = event.dragging;
- this.draggingElementWidth = event.elementWidth;
- this.draggingElementHeight = event.elementHeight;
}
}
--
GitLab