diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts index ab15a069d4e852a92242eb91cd97e5905797e1e7..6e197fbbbdcaf9be5221e0bca58a96306a0971cc 100644 --- a/projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts +++ b/projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts @@ -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: [