From c73721a70cab5a0ca6b09fac7b7833db6e8e8959 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 3 Jun 2024 17:38:44 +0200
Subject: [PATCH] [editor] Refactor canvas drag and drop - enable drop on frame
Frames are meant to be in the background and putting elements on top is
common with them.
---
.../canvas/canvas-element-overlay.ts | 2 ++
.../dynamic-canvas-overlay.component.ts | 21 ++++++++++++++-----
.../section-dynamic.component.ts | 11 +++++-----
.../src/app/services/drag-n-drop.service.ts | 8 +++++++
4 files changed, 32 insertions(+), 10 deletions(-)
create mode 100644 projects/editor/src/app/services/drag-n-drop.service.ts
diff --git a/projects/editor/src/app/components/unit-view/canvas/canvas-element-overlay.ts b/projects/editor/src/app/components/unit-view/canvas/canvas-element-overlay.ts
index c3b19fc47..eb626de34 100644
--- a/projects/editor/src/app/components/unit-view/canvas/canvas-element-overlay.ts
+++ b/projects/editor/src/app/components/unit-view/canvas/canvas-element-overlay.ts
@@ -15,6 +15,7 @@ import { MathTableComponent } from 'common/components/input-elements/math-table.
import { UnitService } from '../../../services/unit-services/unit.service';
import { SelectionService } from '../../../services/selection.service';
import { ElementService } from 'editor/src/app/services/unit-services/element.service';
+import { DragNDropService } from 'editor/src/app/services/drag-n-drop.service';
@Directive()
export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
@@ -32,6 +33,7 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
constructor(public selectionService: SelectionService,
protected unitService: UnitService,
protected elementService: ElementService,
+ protected dragNDropService: DragNDropService,
private changeDetectorRef: ChangeDetectorRef) { }
ngOnInit(): void {
diff --git a/projects/editor/src/app/components/unit-view/canvas/section-dynamic/dynamic-canvas-overlay.component.ts b/projects/editor/src/app/components/unit-view/canvas/section-dynamic/dynamic-canvas-overlay.component.ts
index bfd97b4a6..b321a6ec2 100644
--- a/projects/editor/src/app/components/unit-view/canvas/section-dynamic/dynamic-canvas-overlay.component.ts
+++ b/projects/editor/src/app/components/unit-view/canvas/section-dynamic/dynamic-canvas-overlay.component.ts
@@ -13,10 +13,10 @@ import { CanvasElementOverlay } from '../canvas-element-overlay';
[class.centered-vertical]="element.dimensions.isHeightFixed"
[class.temporaryHighlight]="temporaryHighlight"
tabindex="-1"
- cdkDrag [cdkDragData]="{dragType: 'move', element: element}"
(click)="selectElement($event)" (dblclick)="openEditDialog()"
- (cdkDragStarted)="selectElement(); moveDragStart()"
- (cdkDragEnded)="moveDragEnd()"
+ cdkDrag [cdkDragData]="{dragType: 'move', element: element}"
+ (cdkDragStarted)="startDrag()"
+ (cdkDragEnded)="endDrag()"
[style.outline]="isSelected ? 'purple solid 1px' : ''"
[style.z-index]="isSelected ? 2 : 1">
<div *cdkDragPlaceholder></div>
@@ -45,12 +45,23 @@ export class DynamicCanvasOverlayComponent extends CanvasElementOverlay {
@ViewChild('draggableElement') dragElement!: ElementRef;
bodyElement: HTMLElement = document.body;
- moveDragStart(): void {
+ startDrag(): void {
+ this.selectElement();
+ this.setCursorFix();
+ this.dragNDropService.isDragInProgress = true;
+ }
+
+ endDrag(): void {
+ this.unsetCursorFix();
+ this.dragNDropService.isDragInProgress = false;
+ }
+
+ setCursorFix(): void {
this.bodyElement.classList.add('inheritCursors');
this.bodyElement.style.cursor = 'move';
}
- moveDragEnd(): void {
+ unsetCursorFix(): void {
this.bodyElement.classList.remove('inheritCursors');
this.bodyElement.style.cursor = 'unset';
}
diff --git a/projects/editor/src/app/components/unit-view/canvas/section-dynamic/section-dynamic.component.ts b/projects/editor/src/app/components/unit-view/canvas/section-dynamic/section-dynamic.component.ts
index 094069dbd..7f6fb03e7 100644
--- a/projects/editor/src/app/components/unit-view/canvas/section-dynamic/section-dynamic.component.ts
+++ b/projects/editor/src/app/components/unit-view/canvas/section-dynamic/section-dynamic.component.ts
@@ -3,6 +3,7 @@ import {
ViewChildren, QueryList, ViewChild
} from '@angular/core';
import { Section } from 'common/models/section';
+import { DragNDropService } from 'editor/src/app/services/drag-n-drop.service';
import { CanvasElementOverlay } from '../canvas-element-overlay';
import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid.component';
@@ -16,7 +17,7 @@ import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid
[style.grid-auto-rows]="'auto'"
[style.border]="isSelected ? '2px solid #ff4081': '1px dotted'"
[style.min-height.px]="section.autoRowSize ? 50 : null"
- [style.height.px]="section.autoRowSize ? dragging ? currentHeight : null : section.height"
+ [style.height.px]="section.autoRowSize ? null : section.height"
[style.background-color]="section.backgroundColor"
app-dynamic-section-helper-grid
[autoColumnSize]="section.autoColumnSize"
@@ -50,7 +51,9 @@ import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid
[cdkDropListData]="{ sectionIndex: sectionIndex }"
[cdkDropListConnectedTo]="dropListList"
[style.position]="'relative'"
- [style.pointer-events]="dragging ? 'none' : 'auto'"
+ [style.pointer-events]="dragNDropService.isDragInProgress &&
+ element.type == 'frame' ?
+ 'none' : 'auto'"
appElementGridChangeListener
[gridColumn]="element.position.gridColumn"
[gridColumnRange]="element.position.gridColumnRange"
@@ -62,7 +65,6 @@ import { DynamicSectionHelperGridComponent } from './dynamic-section-helper-grid
</div>
`
})
-
export class SectionDynamicComponent {
@Input() section!: Section;
@Input() sectionIndex!: number;
@@ -74,6 +76,5 @@ export class SectionDynamicComponent {
@ViewChild(DynamicSectionHelperGridComponent) helperGrid!: DynamicSectionHelperGridComponent;
@ViewChildren('elementComponent') childElementComponents!: QueryList<CanvasElementOverlay>;
- dragging = false;
- currentHeight: number = 0;
+ constructor(protected dragNDropService: DragNDropService) { }
}
diff --git a/projects/editor/src/app/services/drag-n-drop.service.ts b/projects/editor/src/app/services/drag-n-drop.service.ts
new file mode 100644
index 000000000..84b9cd04f
--- /dev/null
+++ b/projects/editor/src/app/services/drag-n-drop.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DragNDropService {
+ isDragInProgress = false;
+}
--
GitLab