fix: resize group without focus

juanfran · Feb 20, 2025 · d1ddba3 · d1ddba3
1 parent 438cf93
commit d1ddba3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/apps/web/src/app/modules/board/components/group/group.component.ts b/apps/web/src/app/modules/board/components/group/group.component.ts
@@ -52,7 +52,9 @@ import { boardPageFeature } from '../../reducers/boardPage.reducer';
         }
       }
     </div>
-    <tapiz-resize-single [node]="node()" />
+    <tapiz-resize-single
+      [node]="node()"
+      (initResize)="initResize()" />
   `,
   styleUrls: ['./group.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -274,4 +276,11 @@ export class GroupComponent {
   public get nativeElement(): HTMLElement {
     return this.#el.nativeElement as HTMLElement;
   }
+
+  initResize() {
+    this.#nodesStore.setFocusNode({
+      id: this.node().id,
+      ctrlKey: false,
+    });
+  }
 }
diff --git a/libs/ui/src/lib/resize/resize-handler-single.component.ts b/libs/ui/src/lib/resize/resize-handler-single.component.ts
@@ -4,6 +4,7 @@ import {
   ElementRef,
   afterNextRender,
   inject,
+  output,
 } from '@angular/core';
 
 import { MoveService } from '@tapiz/cdk/services/move.service';
@@ -34,29 +35,30 @@ export class ResizeHandlerSingleComponent implements Resizable {
   private resizeService = inject(ResizeService);
   private el: ElementRef<HTMLElement> = inject(ElementRef);
 
-  public node = input.required<TuNode<Resizable>>();
+  node = input.required<TuNode<Resizable>>();
+  initResize = output();
 
-  public get nodeType() {
+  get nodeType() {
     return this.node().type;
   }
 
-  public get width() {
+  get width() {
     return this.node().content.width;
   }
 
-  public get height() {
+  get height() {
     return this.node().content.height;
   }
 
-  public get position() {
+  get position() {
     return this.node().content.position;
   }
 
-  public get rotation() {
+  get rotation() {
     return this.node().content.rotation;
   }
 
-  public get id() {
+  get id() {
     return this.node().id;
   }
 
@@ -66,11 +68,15 @@ export class ResizeHandlerSingleComponent implements Resizable {
     });
   }
 
-  public listen(handler: HTMLElement, position: ResizePosition) {
+  listen(handler: HTMLElement, position: ResizePosition) {
     this.moveService
       .mouseDownAndMove(handler)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((mouseEvent) => {
+        if (mouseEvent.type === 'start') {
+          this.initResize.emit();
+        }
+
         this.resizeService.resizeEvent.next({
           ...mouseEvent,
           position,