scroll try #9

src/components/scrollable.ts

@@ -73,6 +73,11 @@ export default class Scrollable {
   public splitMutateIntersectionTop: Promise<void> = null;
   public splitMutateIntersectionBottom: Promise<void> = null;
   
+  public getScrollHeightPromises: Array<{
+    element: Element,
+    task: Promise<any>
+  }> = [];
+  
   public onScrollMeasure: Promise<any> = null;
   
   public lastScrollTop: number = 0;
@@ -801,74 +806,221 @@ export default class Scrollable {
     });
   }
   
-  public prepend(...smth: (string | Node)[]) {
+  public prepend(...smth: Element[]) {
     if(this.splitUp) {
-      if(this.hiddenElements.up.length) {
       smth.forEach(node => {
-          if(typeof(node) !== 'string') {
+        this.removeElement(node);
-            this.hiddenElements.up.push({
-              element: node as Element, 
-              height: (node as Element).scrollHeight || 1
       });
+      
+      if(this.hiddenElements.up.length) {
+        fastdom.mutate(() => {
+          this.splitUp.append(...smth);
+        }).then(() => {
+          return fastdom.measure(() => {
+            smth.forEachReverse(node => {
+              let height = node.scrollHeight;
+              this.log('will append element to up hidden', node, height);
+              this.paddings.up += height;
+              this.hiddenElements.up.unshift({
+                element: node, 
+                height: height
+              });
+            });
+          });
+        }).then(() => {
+          fastdom.mutate(() => {
+            smth.forEachReverse(node => {
+              if(node.parentElement) {
+                node.parentElement.removeChild(node);
               }
             });
+            
+            this.paddingTopDiv.style.height = this.paddings.up + 'px';
+            
+            this.onScroll();
+          });
+        });
       } else {
         this.splitUp.prepend(...smth);
+        this.onScroll();
       }
     } else {
       this.container.prepend(...smth);
-    }
-    
       this.onScroll();
     }
     
-  public append(...smth: (string | Node)[]) {
+    //this.onScroll();
-    if(this.splitUp) {
-      if(this.hiddenElements.down.length) {
-        smth.forEachReverse(node => {
-          if(typeof(node) !== 'string') {
-            this.hiddenElements.down.unshift({
-              element: node as Element, 
-              height: (node as Element).scrollHeight || 1
-            });
   }
+  
+  public append(...smth: Element[]) {
+    if(this.splitUp) {
+      smth.forEach(node => {
+        this.removeElement(node);
+      });
+      
+      if(this.hiddenElements.down.length) {
+        fastdom.mutate(() => {
+          this.splitUp.append(...smth);
+        }).then(() => {
+          return fastdom.measure(() => {
+            smth.forEach(node => {
+              let height = node.scrollHeight;
+              this.log('will append element to down hidden', node, height);
+              this.paddings.down += height;
+              this.hiddenElements.down.push({
+                element: node, 
+                height: height
+              });
+            });
+          });
+        }).then(() => {
+          fastdom.mutate(() => {
+            smth.forEach(node => {
+              if(node.parentElement) {
+                node.parentElement.removeChild(node);
+              }
+            });
+            
+            this.paddingBottomDiv.style.height = this.paddings.down + 'px';
+            
+            this.onScroll();
+          });
         });
       } else {
         this.splitUp.append(...smth);
+        this.onScroll();
       }
     } else {
       this.container.append(...smth);
-    }
-    
       this.onScroll();
     }
     
-  public insertBefore(newChild: Element, refChild: Element) {
+    //this.onScroll();
+  }
+  
+  public removeElement(element: Element) {
+    if(!this.splitUp) {
+      if(this.container.contains(element)) {
+        //fastdom.mutate(() => this.container.removeChild(element));
+        this.container.removeChild(element);
+      }
+      
+      return;
+    } else {
+      if(this.splitUp.contains(element)) {
+        //fastdom.mutate(() => this.splitUp.removeChild(element));
+        this.splitUp.removeChild(element);
+        return;
+      }
+    }
+    
+    let index = this.hiddenElements.up.findIndex(c => c.element == element);
+    let child: {element: Element, height: number};
+    let foundUp = false;
+    if(index !== -1) {
+      child = this.hiddenElements.up.splice(index, 1)[0];
+      this.paddings.up -= child.height;
+      foundUp = true;
+    } else {
+      index = this.hiddenElements.down.findIndex(c => c.element == element);
+      if(index !== -1) {
+        child = this.hiddenElements.down.splice(index, 1)[0];
+        this.paddings.down -= child.height;
+      }
+    }
+    
+    if(!child) return;
+    
+    //fastdom.mutate(() => { 
+    if(foundUp) {
+      this.paddingTopDiv.style.height = this.paddings.up + 'px';
+    } else {
+      this.paddingBottomDiv.style.height = this.paddings.down + 'px';
+    }
+    //});
+    
+    return child;
+  }
+  
+  public insertBefore(newChild: Element, refChild: Element, height?: number) {
+    this.log('insertBefore', newChild, refChild);
+    return;
+    
     if(this.splitUp) {
       let index = -1;
       index = this.hiddenElements.up.findIndex(c => c.element == refChild);
       
-      // возможно здесь нужно очищать предыдущую высоту если newChild уже скрыт (но может и не нужно)
+      let child = this.removeElement(newChild);
+      if(child) {
+        height = child.height;
+      } else if(height === undefined) {
+        let p = this.getScrollHeightPromises.find(p => p.element == newChild);
+        if(!p) p = {element: newChild, task: null};
+        else fastdom.clear(p.task);
+        
+        let promise: any;
+        
+        return p.task = promise = fastdom.mutate(() => {
+          this.splitUp.append(newChild);
+          
+          return fastdom.measure(() => {
+            if(p.task != promise) return;
+            
+            let height = newChild.scrollHeight;
+            
+            return fastdom.mutate(() => {
+              if(p.task != promise || !newChild.parentElement) return;
+              
+              this.splitUp.removeChild(newChild);
+              
+              this.insertBefore(newChild, refChild, height);
+              
+              this.getScrollHeightPromises = this.getScrollHeightPromises.filter(p => p.element != newChild);
+              
+              return height;
+            });
+          });
+        });
+      }
+      
       if(index !== -1) {
-        this.hiddenElements.up.splice(index, 0, {element: newChild, height: newChild.scrollHeight || 1});
+        this.hiddenElements.up.splice(index, 0, {element: newChild, height: height});
+        this.paddings.up += height;
+        fastdom.mutate(() => {
+          this.paddingTopDiv.style.height = this.paddings.up + 'px';
           this.onScroll();
+        });
         return index;
       } else {
-        index = this.hiddenElements.down.findIndex(c => c.element == newChild);
+        index = this.hiddenElements.down.findIndex(c => c.element == refChild);
         
         if(index !== -1) {
-          this.hiddenElements.down.splice(index, 0, {element: newChild, height: newChild.scrollHeight || 1});
+          this.hiddenElements.down.splice(index, 0, {element: newChild, height: height});
+          this.paddings.down += height;
+          fastdom.mutate(() => {
+            this.paddingBottomDiv.style.height = this.paddings.down + 'px';
             this.onScroll();
+          });
           return index;
         }
       }
       
-      this.onScroll();
+      fastdom.mutate(() => {
-      return this.splitUp.insertBefore(newChild, refChild);
+        this.log('inserting', newChild, 'before', refChild, this.splitUp.contains(refChild));
+        if(!this.splitUp.contains(refChild)) {
+          this.log.error('no refChild in splitUp', refChild, newChild, this.hiddenElements);
+          return;
         }
         
+        this.splitUp.insertBefore(newChild, refChild);
         this.onScroll();
-    return this.container.insertBefore(newChild, refChild);
+      });
+      return;
+    }
+    
+    let ret = this.container.insertBefore(newChild, refChild);
+    this.onScroll();
+    return ret;
   }
   
   set scrollTop(y: number) {

src/lib/appManagers/appImManager.ts

@@ -1710,7 +1710,7 @@ export class AppImManager {
 
     return this.getHistoryPromise = appMessagesManager.getHistory(this.peerID, maxID, loadCount, backLimit)
     .then((result: any) => {
-      ///////this.log('getHistory result by maxID:', maxID, reverse, isBackLimit, result);
+      this.log('getHistory result by maxID:', maxID, reverse, isBackLimit, result);
 
       //console.timeEnd('render getHistory');