refactoring of chat room

projects/ucap-webmessenger-app/src/app/store/messenger/event/effects.ts

@@ -424,6 +424,9 @@ export class Effects {
                   break;
                 case SSVC_TYPE_EVENT_INFO_RES:
                   {
+                    if (!!infoList && 0 < infoList.length) {
+                      infoList = infoList.sort((a, b) => a.seq - b.seq);
+                    }
                     if (
                       infoList.length > 0 &&
                       infoList.length >= req.requestCount &&

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

@@ -23,6 +23,7 @@
   </ucap-chat-message-box-date-splitter>
 
   <div
+    #mbChatRow
     class="chat-row"
     [@shake]="{
       value: shakeIt,

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

@@ -96,6 +96,9 @@ export class MessageBoxComponent implements OnInit, AfterViewInit {
   @ViewChild('mbContainer', { static: true })
   mbContainer: ElementRef<HTMLElement>;
 
+  @ViewChild('mbChatRow', { static: true })
+  mbChatRow: ElementRef<HTMLElement>;
+
   EventType = EventType;
 
   moment = moment;
@@ -104,13 +107,17 @@ export class MessageBoxComponent implements OnInit, AfterViewInit {
   existReadHere = false;
   shakeIt = false;
 
+  get offsetTop() {
+    return this.mbChatRow.nativeElement.offsetTop;
+  }
+
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
   ) {}
 
   ngOnInit() {
-    this.mbContainer.nativeElement.classList.add('hide');
+    // this.mbContainer.nativeElement.classList.add('hide');
   }
 
   ngAfterViewInit(): void {
@@ -122,7 +129,7 @@ export class MessageBoxComponent implements OnInit, AfterViewInit {
     //   .nativeElement.offsetHeight + 20}px`;
     // this.elementRef.nativeElement.style.maxHeight = `${this.mbContainer
     //   .nativeElement.offsetHeight + 20}px`;
-    this.mbContainer.nativeElement.classList.remove('hide');
+    // this.mbContainer.nativeElement.classList.remove('hide');
   }
 
   /**

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

@@ -122,6 +122,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
   chatMessageBoxList: QueryList<MessageBoxComponent>;
 
   storedScrollItem: Info<EventJson>; // 이전대화를 불러올 경우 현재 스크롤 포지션 유지를 위한 값. 0 이면 초기로딩.
+  storedScrollItemOffsetTop: number | undefined;
   scrollUpInitalized = false; // ps 에서 초기 로딩시 scroll reach start 이벤트 발생 버그를 우회하기 위한 init 값으로 scrollUp 에 의해 true 로 된다.
   firstCheckReadHere = true;
   initRoomLastEventSeq: number;
@@ -395,6 +396,17 @@ export class MessagesComponent implements OnInit, OnDestroy {
     this.storedScrollItem = this.eventList[
       this.virtualScroller.viewPortInfo.startIndex
     ];
+
+    const chatMessageBox = this.chatMessageBoxList.find(
+      el =>
+        el.message.seq ===
+        this.eventList[this.virtualScroller.viewPortInfo.startIndex].seq
+    );
+    if (!!chatMessageBox) {
+      this.storedScrollItemOffsetTop = chatMessageBox.offsetTop;
+    } else {
+      this.storedScrollItemOffsetTop = 0;
+    }
   }
 
   swapScrollTo(
@@ -408,14 +420,23 @@ export class MessagesComponent implements OnInit, OnDestroy {
     if (!!preCallback) {
       preCallback();
     }
-    this.virtualScroller.scrollInto(to, true, 0, 0, () => {
+
+    this.virtualScroller.scrollInto(
+      to,
+      true,
+      undefined !== this.storedScrollItemOffsetTop
+        ? -this.storedScrollItemOffsetTop
+        : 0,
+      0,
+      () => {
         setTimeout(() => {
           if (!!postCallback) {
             postCallback();
           }
           this.postSwapScroll(useHide, useSwap);
         });
-    });
+      }
+    );
   }
 
   preSwapScroll(useHide: boolean, useSwap: boolean) {
@@ -465,15 +486,12 @@ export class MessagesComponent implements OnInit, OnDestroy {
           true
         );
       } else {
-        const index = this.eventList.findIndex(
-          i => i.seq === this.storedScrollItem.seq
-        );
-
         this.swapScrollTo(
-          1 <= index ? this.eventList[index - 1] : this.eventList[0],
+          this.storedScrollItem,
           () => {},
           () => {
             this.storedScrollItem = undefined;
+            this.storedScrollItemOffsetTop = undefined;
           },
           true,
           true
@@ -525,18 +543,17 @@ export class MessagesComponent implements OnInit, OnDestroy {
     // 방정보가 바뀌면 이전대화 보기 관련 값들을 초기화 한다.
     this.scrollUpInitalized = false;
     this.storedScrollItem = undefined;
+    this.storedScrollItemOffsetTop = undefined;
   }
 
   clear() {}
 
   gotoPosition(eventSeq: number) {
     if (!!this.virtualScroller) {
-      const index = this.eventList.findIndex(v => v.seq === eventSeq);
+      const e = this.eventList.find(v => v.seq === eventSeq);
-      this.virtualScroller.scrollInto(
+      this.swapScrollTo(
-        1 <= index ? this.eventList[index - 1] : this.eventList[0],
+        e,
-        true,
+        () => {},
-        0,
-        100,
         () => {
           const chatMessageBox = this.chatMessageBoxList.find(
             el => el.message.seq === eventSeq
@@ -544,7 +561,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
           if (!!chatMessageBox) {
             chatMessageBox.shake();
           }
-        }
+        },
+        true,
+        true
       );
     }
   }