refactor(renderer): split insert/remove of views to smaller methods

sis0k0 · sis0k0 · commit 0bc7d77e1c93 · 2017-08-16T13:47:01.000+03:00
methods for insert/remove from:
- internal view queue (NgElements)
- visual tree (NgViews)
diff --git a/nativescript-angular/view-util.ts b/nativescript-angular/view-util.ts
@@ -55,92 +55,113 @@ export class ViewUtil {
     }
 
     public insertChild(parent: NgView, child: NgElement, previous?: NgElement, next?: NgElement) {
-        // handle invisible nodes..
         if (!parent) {
             return;
         }
 
-        if (child instanceof InvisibleNode) {
-            child.templateParent = parent;
-        }
+        this.addToQueue(parent, child, previous, next);
 
-        // add to end of queue if no next
-        if (parent && !next) {
-            if (parent.lastChild) {
-                parent.lastChild.nextSibling = child;
-            }
-            parent.lastChild = child;
+        if (isDetachedElement(child)) {
+            child.templateParent = parent;
+        } else {
+            this.addToVisualTree(parent, child, next);
         }
+    }
 
-        // update queue if there is next
+    private addToQueue(parent: NgElement, child: NgElement, previous: NgElement, next: NgElement) {
         if (next) {
-            previous.nextSibling = child;
-            child.nextSibling = next;
+            this.insertBetween(child, previous, next);
+        } else {
+            this.appendToQueue(parent, child);
         }
+    }
 
-        if (isDetachedElement(child)) {
-            return;
+    private insertBetween(
+        view: NgElement,
+        previous: NgElement,
+        next: NgElement
+    ): void {
+        previous.nextSibling = view;
+        view.nextSibling = next;
+    }
+
+    private appendToQueue(parent: NgElement, view: NgElement) {
+        if (parent.lastChild) {
+            parent.lastChild.nextSibling = view;
         }
 
-        // create actual view
+        parent.lastChild = view;
+    }
+
+    private addToVisualTree(parent: NgView, child: NgView, next: NgView): void {
         if (parent.meta && parent.meta.insertChild) {
             parent.meta.insertChild(parent, child);
         } else if (isLayout(parent)) {
-            // remove child if already exists
-            if (child.parent === parent) {
-                const index = parent.getChildIndex(child);
-                if (index !== -1) {
-                    parent.removeChild(child);
-                }
-            }
-
-            // insert child
-
-            if (next) {
-                const atIndex = parent.getChildIndex(next);
-                parent.insertChild(child, atIndex);
-            } else {
-                parent.addChild(child);
-            }
-
+            this.insertToLayout(parent, child, next);
         } else if (isContentView(parent)) {
             parent.content = child;
         } else if (parent && (<any>parent)._addChildFromBuilder) {
             (<any>parent)._addChildFromBuilder(child.nodeName, child);
         }
     }
 
+    private insertToLayout(
+        parent: NgLayoutBase,
+        child: NgView,
+        next: NgView
+    ): void {
+        if (child.parent === parent) {
+            this.removeLayoutChild(parent, child);
+        }
+
+        if (next) {
+            const index = parent.getChildIndex(next);
+            parent.insertChild(child, index);
+        } else {
+            parent.addChild(child);
+        }
+    }
+
     public removeChild(parent: NgView, child: NgElement) {
-        if (!parent || isDetachedElement(child)) {
-            console.log("skip the removal of detached element")
+        if (!parent) {
             return;
         }
 
         if (parent.meta && parent.meta.removeChild) {
             parent.meta.removeChild(parent, child);
         } else if (isLayout(parent)) {
-            console.log("remove child from layout")
-            const atIndex = parent.getChildIndex(child);
-            if (atIndex === -1) {
-                return;
-            }
+            this.removeLayoutChild(parent, child);
+        } else if (isContentView(parent) && parent.content === child) {
+            parent.content = null;
+        } else if (isView(parent)) {
+            parent._removeView(child);
+        }
+    }
 
-            if (atIndex !== 0) {
-                const previous = parent.getChildAt(atIndex - 1) as NgElement;
-                previous.nextSibling = child.nextSibling;
-            }
+    private removeLayoutChild(parent: NgLayoutBase, child: NgView): void {
+        const index = parent.getChildIndex(child);
+        if (index === -1) {
+            return;
+        }
 
-            parent.removeChild(child);
+        this.removeFromQueue(parent, child, index);
+        parent.removeChild(child);
+    }
 
-        } else if (isContentView(parent)) {
-            console.log("remove child from content view");
-            if (parent.content === child) {
-                parent.content = null;
-            }
-        } else if (isView(parent)) {
-            console.log("remove child from view element");
-            parent._removeView(child);
+    private removeFromQueue(parent: NgLayoutBase, child: NgView, index: number) {
+        let previous = parent.getChildAt(index - 1) as NgElement;
+        if (!previous) {
+            return;
         }
+
+        // since detached elements are not added to the visual tree,
+        // we need to find the actual previous sibling of the view,
+        // which may be an invisible node
+        while (previous && previous !== child && isDetachedElement(previous.nextSibling)) {
+            previous = previous.nextSibling;
+        }
+
+        previous.nextSibling = child.nextSibling;
     }
 
     public getChildIndex(parent: any, child: NgView) {
