diff --git a/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts b/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts index 426b903acd86271523ef6fcc0eef1db129b031ee..05252760ebfa41bc6056f625dab8653f12b2778e 100644 --- a/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts +++ b/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts @@ -62,19 +62,16 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy { this.changeDetectorRef.detectChanges(); } - selectElement(multiSelect: boolean = false): void { - if (multiSelect) { - this.selectionService.selectElement({ elementComponent: this, multiSelect: true }); - } else { - this.selectionService.selectElement({ elementComponent: this, multiSelect: false }); - } - } - - elementClicked(event: MouseEvent): void { //TODO method name + selectElement(event?: MouseEvent): void { if (!this.isSelected) { - this.selectElement(event.shiftKey); + // this.selectElement(event.shiftKey); + if (event?.shiftKey) { + this.selectionService.selectElement({ elementComponent: this, multiSelect: true }); + } else { + this.selectionService.selectElement({ elementComponent: this, multiSelect: false }); + } } - event.stopPropagation(); + event?.stopPropagation(); this.elementSelected.emit(); } diff --git a/projects/editor/src/app/components/canvas/overlays/dynamic-canvas-overlay.component.ts b/projects/editor/src/app/components/canvas/overlays/dynamic-canvas-overlay.component.ts index 463674409aae453bbea99dda06d134b1b1e03b5f..c0a9cb8d2969be02f15a7d6410c7a01226e67692 100644 --- a/projects/editor/src/app/components/canvas/overlays/dynamic-canvas-overlay.component.ts +++ b/projects/editor/src/app/components/canvas/overlays/dynamic-canvas-overlay.component.ts @@ -6,29 +6,29 @@ import { CanvasElementOverlay } from './canvas-element-overlay'; @Component({ selector: 'aspect-dynamic-canvas-overlay', template: ` - <!-- TabIndex is needed to make the div selectable and catch keyboard events (delete). --> - <!-- DragStart and DragEnd are part of a cursor hack to style the body. See global styling file. --> - <div #draggableElement class="draggable-element" - [class.fixed-size-content-wrapper]="element.position?.dynamicPositioning && + <!-- TabIndex is needed to make the div selectable and catch keyboard events (delete). --> + <!-- DragStart and DragEnd are part of a cursor hack to style the body. See global styling file. --> + <div #draggableElement class="draggable-element" + [class.fixed-size-content-wrapper]="element.position?.dynamicPositioning && element.position?.fixedSize" - [class.temporaryHighlight]="temporaryHighlight" - tabindex="-1" - cdkDrag [cdkDragData]="{dragType: 'move', element: element}" - (click)="elementClicked($event)" (dblclick)="openEditDialog()" - (cdkDragStarted)="moveDragStart()" - (cdkDragEnded)="moveDragEnd()" - [style.outline]="isSelected ? 'purple solid 1px' : ''" - [style.z-index]="isSelected ? 2 : 1"> - <div *cdkDragPlaceholder></div> - <div [class.fixed-size-content]="element.position?.dynamicPositioning && + [class.temporaryHighlight]="temporaryHighlight" + tabindex="-1" + cdkDrag [cdkDragData]="{dragType: 'move', element: element}" + (click)="selectElement($event)" (dblclick)="openEditDialog()" + (cdkDragStarted)="selectElement(); moveDragStart()" + (cdkDragEnded)="moveDragEnd()" + [style.outline]="isSelected ? 'purple solid 1px' : ''" + [style.z-index]="isSelected ? 2 : 1"> + <div *cdkDragPlaceholder></div> + <div [class.fixed-size-content]="element.position?.dynamicPositioning && element.position?.fixedSize" - [style.width]="element.position?.dynamicPositioning && element.position?.fixedSize ? + [style.width]="element.position?.dynamicPositioning && element.position?.fixedSize ? element.width + 'px' : '100%'" - [style.height]="element.position?.dynamicPositioning && element.position?.fixedSize ? + [style.height]="element.position?.dynamicPositioning && element.position?.fixedSize ? element.height + 'px' : '100%'"> - <ng-template #elementContainer></ng-template> - </div> + <ng-template #elementContainer></ng-template> </div> + </div> `, styles: [ '.draggable-element {width: 100%; height: 100%}', @@ -42,7 +42,6 @@ export class DynamicCanvasOverlayComponent extends CanvasElementOverlay { bodyElement: HTMLElement = document.body; moveDragStart(): void { - this.selectElement(); this.bodyElement.classList.add('inheritCursors'); this.bodyElement.style.cursor = 'move'; } diff --git a/projects/editor/src/app/components/canvas/overlays/static-canvas-overlay.component.ts b/projects/editor/src/app/components/canvas/overlays/static-canvas-overlay.component.ts index 3f1b302a733d0ac4b79067a55bb8296c66d528e5..cd2a2f70d965ffa0f9d50650d1ea05921bf893a6 100644 --- a/projects/editor/src/app/components/canvas/overlays/static-canvas-overlay.component.ts +++ b/projects/editor/src/app/components/canvas/overlays/static-canvas-overlay.component.ts @@ -11,11 +11,11 @@ import { CanvasElementOverlay } from './canvas-element-overlay'; <!-- TabIndex is needed to make the div selectable and catch keyboard events (delete). --> <div class="draggable-element" [class.temporaryHighlight]="temporaryHighlight" - (click)="elementClicked($event)" + (click)="selectElement($event)" (dblclick)="openEditDialog()" (keyup.delete)="deleteSelectedElements()" tabindex="-1" cdkDrag [cdkDragData]="{dragType: 'move', element: element}" - (cdkDragStarted)="!isSelected && selectElement()" + (cdkDragStarted)="selectElement()" cdkDropList> <div *cdkDragPlaceholder></div> <!-- Needs extra div because styling can interfere with drag and drop-->