[editor] Split canvas overlay into specific positioning overlays

projects/editor/src/app/components/unit-view/page-view/canvas/canvas-drag-overlay.component.ts → projects/editor/src/app/components/unit-view/page-view/canvas/canvas-element-overlay.ts

 import {
-  Component, OnInit, OnDestroy, Input, Output,
+  ComponentFactoryResolver, ComponentRef,
+  Directive,
   EventEmitter,
-  ComponentFactoryResolver, ViewChild, ViewContainerRef, HostListener
+  HostListener,
+  Input,
+  Output,
+  ViewChild, ViewContainerRef
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { CdkDragMove } from '@angular/cdk/drag-drop';
 import { UnitUIElement } from '../../../../../../../common/unit';
-import * as ComponentUtils from '../../../../../../../common/component-utils';
 import { UnitService } from '../../../../unit.service';
+import * as ComponentUtils from '../../../../../../../common/component-utils';
+import { FormElementComponent } from '../../../../../../../common/form-element-component.directive';
 import { ValueChangeElement } from '../../../../../../../common/form';
 import { ElementComponent } from '../../../../../../../common/element-component.directive';
-import { FormElementComponent } from '../../../../../../../common/form-element-component.directive';
 
-@Component({
-  selector: 'app-canvas-drag-overlay',
-  template: `
-    <!--    Needs extra div because styling can interfere with drag and drop-->
-    <div class="draggable-element" [class.draggable-element-selected]="selected"
-         cdkDrag [cdkDragData]="this.element" [cdkDragDisabled]="!selected"
-         (click)="click($event)"
-         (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">
-        <!-- Element only for resizing   -->
-        <!-- Extra droplist is needed to keep parent component droplist from handling the drop event. -->
-        <!-- Also for cursor styling. -->
-        <div cdkDropList class="test" *ngIf="selected"
-             [style.width.%]="100"
-             [style.height.%]="100">
-          <div class="resizeHandle"
-               cdkDrag (cdkDragStarted)="dragStart()" (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>
-        <ng-template #elementContainer></ng-template>
-      </div>
-    </div>
-  `,
-  styles: [
-    'div {position: absolute}',
-    '.draggable-element-selected {cursor: grab}',
-    '.draggable-element-selected:active {cursor: grabbing}',
-    '.draggable-element-selected .resizeHandle {cursor: nwse-resize}',
-    '.test.cdk-drop-list-dragging {cursor: nwse-resize}'
-  ]
-})
-export class CanvasDragOverlayComponent implements OnInit, OnDestroy {
+@Directive()
+export abstract class CanvasElementOverlay {
   @Input() element!: UnitUIElement;
   @Output() elementSelected = new EventEmitter<{
-    componentElement: CanvasDragOverlayComponent,
+    componentElement: CanvasElementOverlay,
     multiSelect: boolean }>();
-
   @ViewChild('elementContainer', { read: ViewContainerRef, static: true }) private elementContainer!: ViewContainerRef;
 
   selected = false;
-  private oldX: number = 0;
-  private oldY: number = 0;
-  private childComponent!: ElementComponent;
+  // protected childComponent!: ElementComponent;
+  protected childComponent!: ComponentRef<ElementComponent>;
   private ngUnsubscribe = new Subject<void>();
 
-  constructor(private unitService: UnitService,
-              private componentFactoryResolver: ComponentFactoryResolver) { }
+  constructor(protected unitService: UnitService,
+              private componentFactoryResolver: ComponentFactoryResolver,
+              protected viewContainerRef: ViewContainerRef) { }
 
   ngOnInit(): void {
     const componentFactory = ComponentUtils.getComponentFactory(this.element.type, this.componentFactoryResolver);
-    this.childComponent = this.elementContainer.createComponent(componentFactory).instance;
-    this.childComponent.elementModel = this.element;
-    if (this.childComponent instanceof FormElementComponent) {
-      this.childComponent.formValueChanged
+    // this.childComponent = this.elementContainer.createComponent(componentFactory).instance;
+    this.childComponent = this.elementContainer.createComponent(componentFactory);
+    this.childComponent.instance.elementModel = this.element;
+
+    // console.log('t0', this.childComponent.location.nativeElement.firstChild);
+    // console.log('t1', this.childComponent.location.nativeElement.firstChild.style);
+    // this.childComponent.location.nativeElement.firstChild.style.width = '100%';
+    // console.log('t2', this.childComponent.location.nativeElement.firstChild.style.width);
+    // console.log('t1', this.childComponent.nativeElement);
+
+    if (this.childComponent.instance instanceof FormElementComponent) {
+      this.childComponent.instance.formValueChanged
         .pipe(takeUntil(this.ngUnsubscribe))
         .subscribe((changeElement: ValueChangeElement) => {
           this.unitService.updateElementProperty(this.element, 'value', changeElement.values[1]);
@@ -86,7 +55,7 @@ export class CanvasDragOverlayComponent implements OnInit, OnDestroy {
       this.unitService.elementPropertyUpdated
         .pipe(takeUntil(this.ngUnsubscribe))
         .subscribe(() => {
-          (this.childComponent as FormElementComponent).updateFormValue(
+          (this.childComponent.instance as FormElementComponent).updateFormValue(
             this.element.value as string | number | boolean | undefined
           );
         });
@@ -118,16 +87,6 @@ export class CanvasDragOverlayComponent implements OnInit, OnDestroy {
     }
   }
 
-  dragStart(): void {
-    this.oldX = this.element.width;
-    this.oldY = this.element.height;
-  }
-
-  resizeElement(event: CdkDragMove): void {
-    this.unitService.updateElementProperty(this.element, 'width', Math.max(this.oldX + event.distance.x, 0));
-    this.unitService.updateElementProperty(this.element, 'height', Math.max(this.oldY + event.distance.y, 0));
-  }
-
   openEditDialog(): void {
     this.unitService.showDefaultEditDialog(this.element);
   }

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

+import { Component, Input } from '@angular/core';
+import { CanvasElementOverlay } from './canvas-element-overlay';
+
+@Component({
+  selector: 'app-dynamic-canvas-overlay',
+  template: `
+    <div class="draggable-element" [class.draggable-element-selected]="selected"
+         cdkDrag [cdkDragData]="this.element" [cdkDragDisabled]="!selected"
+         (click)="click($event)"
+         (dblclick)="openEditDialog()"
+         [style.height.%]="100">
+      <ng-template #elementContainer></ng-template>
+    </div>
+  `
+})
+export class DynamicCanvasOverlayComponent extends CanvasElementOverlay {
+  @Input() dynamicPositioning!: boolean;
+}

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

+import { Component } from '@angular/core';
+import { CdkDragMove } from '@angular/cdk/drag-drop';
+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]="this.element" [cdkDragDisabled]="!selected"
+         (click)="click($event)"
+         (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">
+        <!-- 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)="dragStart()" (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>
+        <ng-template #elementContainer></ng-template>
+      </div>
+    </div>
+  `,
+  styles: [
+    '.resizeHandle {position: absolute}',
+    '.resize-droplist {position: absolute}',
+    '.draggable-element-selected {cursor: grab}',
+    '.draggable-element-selected:active {cursor: grabbing}',
+    '.draggable-element-selected .resizeHandle {cursor: nwse-resize}',
+    '.resize-droplist.cdk-drop-list-dragging {cursor: nwse-resize}'
+  ]
+})
+export class StaticCanvasOverlayComponent extends CanvasElementOverlay {
+  private oldX: number = 0;
+  private oldY: number = 0;
+
+  dragStart(): void {
+    this.oldX = this.element.width;
+    this.oldY = this.element.height;
+  }
+
+  resizeElement(event: CdkDragMove): void {
+    this.unitService.updateElementProperty(this.element, 'width', Math.max(this.oldX + event.distance.x, 0));
+    this.unitService.updateElementProperty(this.element, 'height', Math.max(this.oldY + event.distance.y, 0));
+  }
+}