From 36f64f197a5033ea987ec0c27122cc6fc9fae648 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 25 Mar 2022 11:01:39 +0100
Subject: [PATCH] [editor] Remove resize functionality in dynamic sections
This had to many implementation problems and is not really an important
feature. Removing the corresponding stylings also improves the visual
layout - elements can now grow freely and the section resized with them.
---
.../dynamic-canvas-overlay.component.ts | 59 +------------------
1 file changed, 1 insertion(+), 58 deletions(-)
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 14cadff2b..83ebe86a8 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
@@ -1,9 +1,7 @@
import {
- Component, Input, Output, EventEmitter, ViewChild, ElementRef
+ Component, Input, ViewChild, ElementRef
} from '@angular/core';
-import { CdkDragMove } from '@angular/cdk/drag-drop';
import { CanvasElementOverlay } from './canvas-element-overlay';
-import { UIElement } from '../../../../../../../../common/interfaces/elements';
@Component({
selector: 'aspect-dynamic-canvas-overlay',
@@ -14,7 +12,6 @@ import { UIElement } from '../../../../../../../../common/interfaces/elements';
[class.fixed-size-content-wrapper]="element.position?.dynamicPositioning &&
element.position?.fixedSize"
[class.temporaryHighlight]="temporaryHighlight"
- [style.display]="dragging ? 'none' : ''"
tabindex="-1"
cdkDrag [cdkDragData]="{dragType: 'move', element: element}"
(click)="elementClicked($event)" (dblclick)="openEditDialog()"
@@ -23,17 +20,6 @@ import { UIElement } from '../../../../../../../../common/interfaces/elements';
[style.outline]="isSelected ? 'purple solid 1px' : ''"
[style.z-index]="isSelected ? 2 : 1">
<div *cdkDragPlaceholder></div>
- <div *ngIf="isSelected"
- [style.width.%]="dragging ? 100 : 0"
- [style.height.%]="dragging ? 100 : 0"
- cdkDrag [cdkDragData]="{dragType: 'resize', element: element}"
- (cdkDragStarted)="resizeDragStart()" (cdkDragEnded)="resizeDragEnd()"
- (cdkDragMoved)="resizeDragMove($event)">
- <div class="resizeHandle">
- <mat-icon>aspect_ratio</mat-icon>
- <div *cdkDragPlaceholder></div>
- </div>
- </div>
<div [class.fixed-size-content]="element.position?.dynamicPositioning &&
element.position?.fixedSize"
[style.width]="element.position?.dynamicPositioning && element.position?.fixedSize ?
@@ -43,61 +29,18 @@ import { UIElement } from '../../../../../../../../common/interfaces/elements';
<ng-template #elementContainer></ng-template>
</div>
</div>
- <div class="resize-preview"
- [style.position]="'relative'"
- [style.width.px]="dragging ? elementWidth : 0"
- [style.height.px]="dragging ? elementHeight : 0"
- [style.border]="'1px dashed purple'">
- </div>
`,
styles: [
'.draggable-element {position: relative; width: 100%; height: 100%}',
'.draggable-element:active {cursor: grabbing}',
- '.resizeHandle {position: absolute; right: 3px; bottom: 3px; z-index: 1; height: 25px}',
- '.resizeHandle {cursor: nwse-resize}',
- '.cdk-drag {position: absolute; bottom: 0; right: 0}',
'.temporaryHighlight {z-index: 100}'
]
})
export class DynamicCanvasOverlayComponent extends CanvasElementOverlay {
@Input() dynamicPositioning!: boolean;
- @Output() dragStart = new EventEmitter();
- @Output() dragEnd = new EventEmitter();
-
@ViewChild('draggableElement') dragElement!: ElementRef;
- private gridElementWidth: number = 0;
- private gridElementHeight: number = 0;
- elementWidth: number = 0;
- elementHeight: number = 0;
-
- dragging = false;
-
bodyElement: HTMLElement = document.body;
- resizeDragStart(): void {
- this.bodyElement.classList.add('inheritCursors');
- this.bodyElement.style.cursor = 'nwse-resize';
- 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.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;
- }
-
- resizeDragEnd(): void {
- this.bodyElement.classList.remove('inheritCursors');
- this.bodyElement.style.cursor = 'unset';
- this.dragging = false;
- this.dragEnd.emit();
- }
-
moveDragStart(): void {
this.selectElement();
this.bodyElement.classList.add('inheritCursors');
--
GitLab