refactor(ama-mfe-ng-utils): simplify resize directive

Author: maxokorokov

packages/@ama-mfe/ng-utils/src/resize/resize.consumer.service.ts

@@ -22,22 +22,22 @@ import {
 /**
  * This service listens for resize messages and updates the height of elements based on the received messages.
  */
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable()
 export class ResizeConsumerService implements MessageConsumer<ResizeMessage> {
-  private readonly newHeight = signal<{ height: number; channelId: string } | undefined>(undefined);
+  private readonly heightPxSignal = signal<number | undefined>(undefined);
 
   /**
    * A readonly signal that provides the new height information from the channel.
    */
-  public readonly newHeightFromChannel = this.newHeight.asReadonly();
+  public readonly heightPx = this.heightPxSignal.asReadonly();
 
   /**
    * The type of messages this service handles ('resize').
    */
   public readonly type = RESIZE_MESSAGE_TYPE;
 
+  public from = '';
+
   /**
    * The supported versions of resize messages and their handlers.
    */
@@ -46,7 +46,11 @@ export class ResizeConsumerService implements MessageConsumer<ResizeMessage> {
      * Use the message paylod to compute a new height and emit it via the public signal
      * @param message message to consume
      */
-    '1.0': (message: RoutedMessage<ResizeV1_0>) => this.newHeight.set({ height: message.payload.height, channelId: message.from })
+    '1.0': (message: RoutedMessage<ResizeV1_0>) => {
+      if (this.from === message.from) {
+        this.heightPxSignal.set(message.payload.height);
+      }
+    }
   };
 
   private readonly consumerManagerService = inject(ConsumerManagerService);

packages/@ama-mfe/ng-utils/src/resize/resize.directive.ts

@@ -1,11 +1,8 @@
 import {
-  computed,
   Directive,
   effect,
-  ElementRef,
   inject,
   input,
-  Renderer2,
 } from '@angular/core';
 import {
   ResizeConsumerService,
@@ -15,47 +12,24 @@ import {
  * A directive that adjusts the height of an element based on resize messages from a specified channel.
  */
 @Directive({
-  selector: '[scalable]',
-  standalone: true
+  selector: '[connect][scalable]',
+  standalone: true,
+  host: {
+    '[style.height.px]': 'resizeConsumer.heightPx()'
+  },
+  providers: [ResizeConsumerService]
 })
 export class ScalableDirective {
   /**
-   * The connection ID for the element, used as channel id backup
+   * The connection ID for the element
    */
   public connect = input<string>();
 
-  /**
-   * The channel id
-   */
-  public scalable = input<string>();
-
-  private readonly resizeHandler = inject(ResizeConsumerService);
-
-  /**
-   * This signal checks if the current channel requesting the resize matches the channel ID from the resize handler.
-   * If they match, it returns the new height information; otherwise, it returns undefined.
-   */
-  private readonly newHeightFromChannel = computed(() => {
-    const channelAskingResize = this.scalable() || this.connect();
-    const newHeightFromChannel = this.resizeHandler.newHeightFromChannel();
-    if (channelAskingResize && newHeightFromChannel?.channelId === channelAskingResize) {
-      return newHeightFromChannel;
-    }
-    return undefined;
-  });
+  protected readonly resizeConsumer = inject(ResizeConsumerService);
 
   constructor() {
-    const elem = inject(ElementRef);
-    const renderer = inject(Renderer2);
-
-    this.resizeHandler.start();
-
-    /** When a new height value is received set the height of the host element (in pixels) */
     effect(() => {
-      const newHeightFromChannel = this.newHeightFromChannel();
-      if (newHeightFromChannel) {
-        renderer.setStyle(elem.nativeElement, 'height', `${newHeightFromChannel.height}px`);
-      }
+      this.resizeConsumer.from = this.connect() ?? '';
     });
   }
 }