[editor] Fix/Add drag boundaries

projects/editor/src/app/components/unit-view/page-view/canvas/dynamic-canvas-overlay.component.ts

@@ -11,11 +11,13 @@ import { UnitUIElement } from '../../../../../../../common/unit';
       <div #draggableElement class="draggable-element" [class.draggable-element-selected]="selected"
            cdkDrag [cdkDragData]="{dragType: 'move', element: element}" [cdkDragDisabled]="!selected"
            (click)="selectElement($event.shiftKey)" (dblclick)="openEditDialog()" (cdkDragStarted)="selectElement()"
+           cdkDragBoundary=".canvasFrame"
            [style.height.%]="100"
            [style.border]="selected ? '1px solid' : ''">
           <div *ngIf="selected" class="resizeHandle"
                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>

projects/editor/src/app/components/unit-view/page-view/canvas/static-canvas-overlay.component.ts

@@ -8,35 +8,37 @@ import { CanvasElementOverlay } from './canvas-element-overlay';
     <!--    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()">
-      <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">
+         (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">
         <!-- 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)"
-               [style.right.px]="-1"
-               [style.bottom.px]="-7"
-               [style.z-index]="5">
-            <mat-icon>aspect_ratio</mat-icon>
-            <div *cdkDragPlaceholder></div>
-          </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>
-        <ng-template #elementContainer></ng-template>
       </div>
+      <ng-template #elementContainer></ng-template>
     </div>
   `,
   styles: [
+    '.draggable-element {position: absolute}',
     '.resizeHandle {position: absolute}',
     '.resize-droplist {position: absolute}',
     '.draggable-element-selected .resizeHandle {cursor: nwse-resize}',