From 628c98d58fd09bb664238fe9fe0989b4fc0992ab Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singhs@outlook.in>
Date: Wed, 10 Jul 2024 17:25:17 +0200
Subject: [PATCH] chore: emit VisibleElementsChanged whenever an action happens
 which changes the visible elements

---
 packages/hadron-document/src/document.ts |  5 ++++
 packages/hadron-document/src/element.ts  | 31 ++++++++++++++++++------
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/hadron-document/src/document.ts b/packages/hadron-document/src/document.ts
index 4ea95373a02..844e7b2b6b4 100644
--- a/packages/hadron-document/src/document.ts
+++ b/packages/hadron-document/src/document.ts
@@ -266,6 +266,7 @@ export class Document extends EventEmitter {
   insertBeginning(key: string | number, value: BSONValue): Element {
     const newElement = this.elements.insertBeginning(key, value);
     newElement._bubbleUp(ElementEvents.Added, newElement, this);
+    this.emit(Events.VisibleElementsChanged, this);
     return newElement;
   }
 
@@ -280,6 +281,7 @@ export class Document extends EventEmitter {
   insertEnd(key: string | number, value: BSONValue): Element {
     const newElement = this.elements.insertEnd(key, value);
     newElement._bubbleUp(ElementEvents.Added, newElement, this);
+    this.emit(Events.VisibleElementsChanged, this);
     return newElement;
   }
 
@@ -299,6 +301,7 @@ export class Document extends EventEmitter {
   ): Element | undefined {
     const newElement = this.elements.insertAfter(element, key, value);
     newElement?._bubbleUp(ElementEvents.Added, newElement, this);
+    this.emit(Events.VisibleElementsChanged, this);
     return newElement;
   }
 
@@ -403,6 +406,7 @@ export class Document extends EventEmitter {
       element.expand(true);
     }
     this.emit(Events.Expanded);
+    this.emit(Events.VisibleElementsChanged, this);
   }
 
   /**
@@ -414,6 +418,7 @@ export class Document extends EventEmitter {
       element.collapse();
     }
     this.emit(Events.Collapsed);
+    this.emit(Events.VisibleElementsChanged, this);
   }
 
   getVisibleElements() {
diff --git a/packages/hadron-document/src/element.ts b/packages/hadron-document/src/element.ts
index 56bae0b9f3d..42550d758f3 100644
--- a/packages/hadron-document/src/element.ts
+++ b/packages/hadron-document/src/element.ts
@@ -13,7 +13,7 @@ import type { TypeCastTypes } from 'hadron-type-checker';
 import type { ObjectId } from 'bson';
 import type { BSONArray, BSONObject, BSONValue } from './utils';
 import { getDefaultValueForType } from './utils';
-import { ElementEvents } from '.';
+import { DocumentEvents, ElementEvents } from '.';
 
 export const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSS';
 export { Events };
@@ -303,6 +303,7 @@ export class Element extends EventEmitter {
     }
     const newElement = this.elements.insertAfter(element, key, value);
     newElement!._bubbleUp(Events.Added, newElement, this);
+    this.emitVisibleElementsChanged();
     return newElement!;
   }
 
@@ -320,6 +321,7 @@ export class Element extends EventEmitter {
     }
     const newElement = this.elements.insertEnd(key, value, true);
     this._bubbleUp(Events.Added, newElement);
+    this.emitVisibleElementsChanged();
     return newElement;
   }
 
@@ -692,6 +694,7 @@ export class Element extends EventEmitter {
     this.removed = true;
     if (this.parent) {
       this._bubbleUp(Events.Removed, this, this.parent);
+      this.emitVisibleElementsChanged(this.parent);
     }
   }
 
@@ -702,6 +705,9 @@ export class Element extends EventEmitter {
     if (this.isAdded()) {
       this.parent?.elements?.remove(this);
       this._bubbleUp(Events.Removed, this, this.parent);
+      if (this.parent) {
+        this.emitVisibleElementsChanged(this.parent);
+      }
       delete (this as any).parent;
     } else {
       if (this.originalExpandableValue) {
@@ -739,7 +745,8 @@ export class Element extends EventEmitter {
         element.expand(expandChildren);
       }
     }
-    this._bubbleUp(ElementEvents.Expanded, this);
+    this.emit(ElementEvents.Expanded, this);
+    this.emitVisibleElementsChanged();
   }
 
   /**
@@ -756,7 +763,8 @@ export class Element extends EventEmitter {
         element.collapse();
       }
     }
-    this._bubbleUp(ElementEvents.Collapsed, this);
+    this.emit(ElementEvents.Collapsed, this);
+    this.emitVisibleElementsChanged();
   }
 
   /**
@@ -851,10 +859,7 @@ export class Element extends EventEmitter {
       return;
     }
     this.maxVisibleElementsCount = newCount;
-
-    if (this.expanded) {
-      this._bubbleUp(Events.VisibleElementsChanged, this, this.getRoot());
-    }
+    this.emitVisibleElementsChanged();
   }
 
   getTotalVisibleElementsCount(): number {
@@ -871,6 +876,18 @@ export class Element extends EventEmitter {
     );
   }
 
+  private emitVisibleElementsChanged(targetElement: Element | Document = this) {
+    if (targetElement.isRoot()) {
+      targetElement.emit(DocumentEvents.VisibleElementsChanged, targetElement);
+    } else if (targetElement.expanded) {
+      targetElement._bubbleUp(
+        Events.VisibleElementsChanged,
+        targetElement,
+        targetElement.getRoot()
+      );
+    }
+  }
+
   /**
    * @deprecated Use ElementEvents import instead
    */