Reworked the channel tree selected lines

ChangeLog.md

@@ -10,6 +10,7 @@
     - Fixed query visibility setting
     - Removed useless client infos for query clients
     - Added an auto reconnect system
+    - Reworked the channel tree selected lines
     
 * **15.02.19**
     - Fixed MS Edge loading/document issues

shared/js/proto.ts

@@ -17,6 +17,7 @@ interface JQuery<TElement = HTMLElement> {
 
 
     visible_height() : number;
+    visible_width() : number;
 
     /* bootstrap */
     alert() : JQuery<TElement>;
@@ -151,7 +152,19 @@ if(typeof ($) !== "undefined") {
             });
 
             const result = this.height();
-            console.log(original_style);
+            this.attr("style", original_style || "");
+            return result;
+        }
+    if(!$.fn.visible_width)
+        $.fn.visible_width = function (this: JQuery<HTMLElement>) {
+            const original_style = this.attr("style");
+            this.css({
+                position:   'absolute!important',
+                visibility: 'hidden!important',
+                display:    'block!important'
+            });
+
+            const result = this.width();
             this.attr("style", original_style || "");
             return result;
         }

shared/js/ui/channel.ts

@@ -139,7 +139,7 @@ class ChannelEntry {
             let current = entry.currentChannel();
             if(deep) {
                 while(current) {
-                    if(current.parent_channel() == self) {
+                    if(current == self) {
                         result.push(entry);
                         break;
                     }
@@ -171,15 +171,16 @@ class ChannelEntry {
         return clients;
     }
 
-    update_family_index() {
+    update_family_index(enforce?: boolean) {
         const current_index = this._family_index;
         const new_index = this.calculate_family_index(true);
-        if(current_index == new_index) return;
+        if(current_index == new_index && !enforce) return;
 
         this._tag_channel.css("z-index", this._family_index);
+        this._tag_channel.css("padding-left", (this._family_index + 1) * 16 + "px");
     }
 
-    private calculate_family_index(enforce_recalculate: boolean = false) : number {
+    calculate_family_index(enforce_recalculate: boolean = false) : number {
         if(this._family_index !== undefined && !enforce_recalculate)
             return this._family_index;
 
@@ -202,7 +203,6 @@ class ChannelEntry {
 
             container_entry.attr("channel-id", this.channelId);
             container_entry.addClass(this._channel_name_alignment);
-            container_entry.css('z-index', this.calculate_family_index());
 
             /* channel icon (type) */
             {
@@ -290,6 +290,7 @@ class ChannelEntry {
             }
 
             tag_channel.append(this._tag_channel = container_entry);
+            this.update_family_index(true);
         }
         {
             const container_client = $.spawn("div").addClass("container-clients");

shared/js/ui/client.ts

@@ -762,6 +762,13 @@ class ClientEntry {
             return undefined;
         }
     }
+
+    update_family_index() {
+        if(!this._channel) return;
+        const index = this._channel.calculate_family_index();
+
+        this.tag.css('padding-left', (index + 2) * 16 + "px");
+    }
 }
 
 class LocalClientEntry extends ClientEntry {

shared/js/ui/view.ts

@@ -236,7 +236,6 @@ class ChannelTree {
             this.channel_first = channel.channel_next;
 
 
-        let oldParent = channel.parent_channel();
         channel.channel_next = undefined;
         channel.channel_previous = channel_previous;
         channel.parent = parent;
@@ -253,19 +252,18 @@ class ChannelTree {
                 channel.channel_next.channel_previous = channel;
         } else {
             if(parent) {
-                let siblings = parent.children();
-                if(siblings.length <= 1) { //Self should be already in there
+                let children = parent.children();
+                if(children.length <= 1) { //Self should be already in there
                     let left = channel.rootTag();
                     left.appendTo(parent.siblingTag());
 
                     channel.channel_next = undefined;
                 } else {
-                    channel.channel_previous = siblings[siblings.length - 2];
-                    channel.channel_previous.rootTag().after(channel.rootTag());
+                    channel.channel_previous = undefined;
+                    channel.rootTag().prependTo(parent.siblingTag());
 
-                    channel.channel_next = channel.channel_previous.channel_next;
+                    channel.channel_next = children[1]; /* children 0 shall be the channel itself */
                     channel.channel_next.channel_previous = channel;
-                    channel.channel_previous.channel_next = channel;
                 }
             } else {
                 this.htmlTree.find(".server").after(channel.rootTag());
@@ -279,10 +277,17 @@ class ChannelTree {
         }
 
         channel.update_family_index();
-        if(channel.channel_previous == channel) /* shall never happen */
+        channel.children(true).forEach(e => e.update_family_index());
+        channel.clients(true).forEach(e => e.update_family_index());
+
+        if(channel.channel_previous == channel) {  /* shall never happen */
             channel.channel_previous = undefined;
-        if(channel.channel_next == channel) /* shall never happen */
+            debugger;
+        }
+        if(channel.channel_next == channel) {  /* shall never happen */
             channel.channel_next = undefined;
+            debugger;
+        }
     }
 
     deleteClient(client: ClientEntry) {
@@ -312,6 +317,7 @@ class ChannelTree {
         client.currentChannel().reorderClients();
 
         channel.updateChannelTypeIcon();
+        client.update_family_index();
         return client;
     }
 
@@ -320,11 +326,6 @@ class ChannelTree {
         client.channelTree = this;
     }
 
-    reorderAllClients() {
-        for(let channel of this.channels)
-            channel.reorderClients();
-    }
-
     moveClient(client: ClientEntry, channel: ChannelEntry) {
         let oldChannel = client.currentChannel();
         client["_channel"] = channel;
@@ -340,6 +341,7 @@ class ChannelTree {
             client.currentChannel().updateChannelTypeIcon();
         }
         client.updateClientStatusIcons();
+        client.update_family_index();
     }
 
     findClient?(clientId: number) : ClientEntry {