Skip to content
Snippets Groups Projects
Commit 212c084a authored by rhenck's avatar rhenck
Browse files

[editor] Fix dragNdrop element losing styling

Material cdkDrag elements interfere with dynamic styling. It needs an 
extra div, which was mistakenly removed.
parent 92f68fa6
No related branches found
No related tags found
No related merge requests found
......@@ -5,36 +5,37 @@ import { CanvasElementOverlay } from './canvas-element-overlay';
@Component({
selector: 'app-static-canvas-overlay',
template: `
<!-- Needs extra div because styling can interfere with drag and drop-->
<div class="draggable-element" [class.draggable-element-selected]="selected"
cdkDrag [cdkDragData]="{dragType: 'move', element: element}"
cdkDragBoundary=".canvasFrame"
(click)="selectElement($event.shiftKey)" (cdkDragStarted)="selectElement()"
(dblclick)="openEditDialog()"
[style.position]="'absolute'"
[style.border]="selected ? '2px solid' : ''"
[style.width.px]="element.width"
[style.height.px]="element.height"
[style.left.px]="element.xPosition"
[style.top.px]="element.yPosition"
[style.z-index]="element.zIndex">
(dblclick)="openEditDialog()">
<!-- Needs extra div because styling can interfere with drag and drop-->
<div [style.position]="'absolute'"
[style.border]="selected ? '2px solid' : ''"
[style.width.px]="element.width"
[style.height.px]="element.height"
[style.left.px]="element.xPosition"
[style.top.px]="element.yPosition"
[style.z-index]="element.zIndex">
<!-- Element only for resizing -->
<!-- Extra droplist is needed to keep parent component droplist from handling the drop event. -->
<!-- Also for cursor styling. -->
<div *ngIf="selected" cdkDropList class="resize-droplist"
[style.width.%]="100"
[style.height.%]="100">
<div class="resizeHandle"
cdkDrag (cdkDragStarted)="resizeDragStart()" (cdkDragMoved)="resizeElement($event)"
cdkDragBoundary=".section-wrapper"
[style.right.px]="-1"
[style.bottom.px]="-7"
[style.z-index]="5">
<mat-icon>aspect_ratio</mat-icon>
<div *cdkDragPlaceholder></div>
<div *ngIf="selected" cdkDropList class="resize-droplist"
[style.width.%]="100"
[style.height.%]="100">
<div class="resizeHandle"
cdkDrag (cdkDragStarted)="resizeDragStart()" (cdkDragMoved)="resizeElement($event)"
cdkDragBoundary=".section-wrapper"
[style.right.px]="-1"
[style.bottom.px]="-7"
[style.z-index]="5">
<mat-icon>aspect_ratio</mat-icon>
<div *cdkDragPlaceholder></div>
</div>
</div>
<ng-template #elementContainer></ng-template>
</div>
<ng-template #elementContainer></ng-template>
</div>
`,
styles: [
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment