bug of chat room is fixed

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -82,7 +82,9 @@
 </virtual-scroller>
 
 <div
-  #chatMessagesBuffer
+  #chatMessagesBufferContainer
   fxFlexFill
-  class="chat-messages-buffer disappear"
+  class="chat-messages-buffer-container disappear"
-></div>
+>
+  <div #chatMessagesBuffer fxFlexFill class="chat-messages-buffer"></div>
+</div>

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss

@@ -164,10 +164,12 @@ $tablet-l-width: 1024px;
   display: none !important;
 }
 
-.chat-messages-buffer {
+.chat-messages-buffer-container {
   position: absolute;
   top: 0px;
   overflow-y: hidden !important;
-  padding: 30px 40px;
+  padding: 2vh 2vw;
   flex-direction: column;
+  .chat-messages-buffer {
+  }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -112,6 +112,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
   @ViewChild('chatMessagesBuffer', { static: false })
   chatMessagesBuffer: ElementRef<HTMLElement>;
 
+  @ViewChild('chatMessagesBufferContainer', { static: false })
+  chatMessagesBufferContainer: ElementRef<HTMLElement>;
+
   @ViewChild(VirtualScrollerComponent, { static: false })
   private virtualScroller: VirtualScrollerComponent;
 
@@ -148,6 +151,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
   readToHereEvent: Info<EventJson>;
   existReadToHereEvent = true;
   hidden = false;
+  swapped = false;
 
   constructor(
     private logger: NGXLogger,
@@ -393,13 +397,14 @@ export class MessagesComponent implements OnInit, OnDestroy {
     ];
   }
 
-  scrollTo(
+  swapScrollTo(
     to: Info<EventJson>,
     preCallback: () => void,
     postCallback: () => void,
-    useHide: boolean
+    useHide: boolean,
+    useSwap: boolean
   ) {
-    this.preSwapScroll(useHide);
+    this.preSwapScroll(useHide, useSwap);
     if (!!preCallback) {
       preCallback();
     }
@@ -408,19 +413,35 @@ export class MessagesComponent implements OnInit, OnDestroy {
         if (!!postCallback) {
           postCallback();
         }
-        this.postSwapScroll(useHide);
+        this.postSwapScroll(useHide, useSwap);
       });
     });
   }
 
-  preSwapScroll(useHide: boolean) {
+  preSwapScroll(useHide: boolean, useSwap: boolean) {
+    if (useSwap && !this.swapped) {
+      this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
+      this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
+      this.chatMessagesBufferContainer.nativeElement.classList.remove(
+        'disappear'
+      );
+      this.swapped = true;
+    }
+
     if (useHide && !this.hidden) {
       this.chatMessagesContainer.nativeElement.classList.add('hide');
       this.hidden = true;
     }
   }
 
-  postSwapScroll(useHide: boolean) {
+  postSwapScroll(useHide: boolean, useSwap: boolean) {
+    if (useSwap && this.swapped) {
+      this.chatMessagesBuffer.nativeElement.innerHTML = '';
+      this.chatMessagesBuffer.nativeElement.scrollTop = 0;
+      this.chatMessagesBufferContainer.nativeElement.classList.add('disappear');
+      this.swapped = false;
+    }
+
     if (useHide && this.hidden) {
       this.chatMessagesContainer.nativeElement.classList.remove('hide');
       this.hidden = false;
@@ -434,12 +455,13 @@ export class MessagesComponent implements OnInit, OnDestroy {
   scrollToBottom(): void {
     if (!!this.storedScrollItem) {
       if (!!this.readToHereEvent && this.firstCheckReadHere) {
-        this.scrollTo(
+        this.swapScrollTo(
           this.readToHereEvent,
           () => {},
           () => {
             this.firstCheckReadHere = false;
           },
+          true,
           true
         );
       } else {
@@ -447,13 +469,14 @@ export class MessagesComponent implements OnInit, OnDestroy {
           i => i.seq === this.storedScrollItem.seq
         );
 
-        this.scrollTo(
+        this.swapScrollTo(
           1 <= index ? this.eventList[index - 1] : this.eventList[0],
           () => {},
           () => {
             this.storedScrollItem = undefined;
           },
-          false
+          true,
+          true
         );
       }
     } else if (this.scrollUpInitalized) {
@@ -464,31 +487,34 @@ export class MessagesComponent implements OnInit, OnDestroy {
       }
     } else {
       if (!!this.readToHereEvent && this.firstCheckReadHere) {
-        this.scrollTo(
+        this.swapScrollTo(
           this.readToHereEvent,
           () => {},
           () => {
             this.firstCheckReadHere = false;
           },
-          true
+          true,
+          false
         );
       } else {
         if (
           this.virtualScroller.viewPortInfo.endIndex ===
           this.eventList.length - 2
         ) {
-          this.scrollTo(
+          this.swapScrollTo(
             this.eventList[this.eventList.length - 1],
             () => {},
             () => {},
+            true,
             false
           );
         } else {
-          this.scrollTo(
+          this.swapScrollTo(
             this.eventList[this.eventList.length - 1],
             () => {},
             () => {},
-            true
+            true,
+            false
           );
         }
       }
@@ -534,7 +560,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
     if (this.scrollUpInitalized && this.eventRemained) {
       this.storeScrollPosition();
 
-      this.preSwapScroll(false);
+      this.preSwapScroll(true, true);
 
       this.moreEvent.emit(this.eventList[0].seq);
 

projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts

@@ -4,9 +4,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
-
 import { MatTooltipModule } from '@angular/material';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -78,9 +75,6 @@ const PROVIDERS = [DatePipe];
     ReactiveFormsModule,
     FlexLayoutModule,
 
-    ScrollingModule,
-    ExperimentalScrollingModule,
-
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,