Added multible user movement

ChangeLog.md

@@ -1,4 +1,9 @@
 # Changelog:
+* **19.01.19**
+    - Added multi user movement
+    - Improved connection profile error handling
+    - Added possibility to move the deviders
+    
 * **23.12.18**
     - Added query account management (since server 1.2.32b)
     

shared/js/ui/client.ts

@@ -95,9 +95,13 @@ class ClientEntry {
         if(this._listener_initialized) return;
         this._listener_initialized = true;
 
+        this.tag.on('mouseup', event => {
+            if(!this.channelTree.client_mover.is_active()) {
+                this.channelTree.onSelect(this);
+            }
+        });
         this.tag.click(event => {
             console.log("Clicked!");
-            this.channelTree.onSelect(this);
         });
 
         if(!(this instanceof LocalClientEntry) && !(this instanceof MusicClientEntry))
@@ -117,9 +121,7 @@ class ClientEntry {
                 }
 
                 this.channelTree.onSelect(this, true);
-                this.showContextMenu(event.pageX, event.pageY, () => {
-                    this.channelTree.onSelect(undefined, true);
-                });
+                this.showContextMenu(event.pageX, event.pageY, () => {});
                 return false;
             });
         }
@@ -127,21 +129,30 @@ class ClientEntry {
         this.tag.mousedown(event => {
             if(event.which != 1) return; //Only the left button
 
-            this.channelTree.client_mover.activate(this, target => {
-                if(!target) return;
-                if(target == this._channel) return;
+            let clients = this.channelTree.currently_selected as (ClientEntry | ClientEntry[]);
+            if(clients != this && !($.isArray(clients) && clients.indexOf(this) != -1))
+               clients = $.isArray(clients) ? [...clients, this] : [clients, this];
 
-                const source = this._channel;
-                const self = this.channelTree.client.getClient();
-                this.channelTree.client.serverConnection.sendCommand("clientmove", {
-                    clid: this.clientId(),
-                    cid: target.getChannelId()
-                }).then(event => {
-                    if(this.clientId() == this.channelTree.client.clientId)
-                        sound.play(Sound.CHANNEL_JOINED);
-                    else if(target !== source && target != self.currentChannel())
-                        sound.play(Sound.USER_MOVED);
-                });
+            this.channelTree.client_mover.activate(clients, target => {
+                if(!target) return;
+
+                for(const client of $.isArray(clients) ? clients : [clients]) {
+                    if(target == client._channel) continue;
+
+                    const source = client._channel;
+                    const self = this.channelTree.client.getClient();
+                    this.channelTree.client.serverConnection.sendCommand("clientmove", {
+                        clid: client.clientId(),
+                        cid: target.getChannelId()
+                    }).then(event => {
+                        if(client.clientId() == this.channelTree.client.clientId)
+                            sound.play(Sound.CHANNEL_JOINED);
+                        else if(target !== source && target != self.currentChannel())
+                            sound.play(Sound.USER_MOVED);
+                    });
+                }
+
+                this.channelTree.onSelect();
             }, event);
         });
     }

shared/js/ui/client_move.ts

@@ -5,7 +5,7 @@ class ClientMover {
     static readonly move_element = $("#mouse-move");
     readonly channel_tree: ChannelTree;
 
-    selected_client: ClientEntry;
+    selected_client: ClientEntry | ClientEntry[];
 
     hovered_channel: HTMLDivElement;
     callback: (channel?: ChannelEntry) => any;
@@ -20,7 +20,23 @@ class ClientMover {
         this.channel_tree = tree;
     }
 
-    activate(client: ClientEntry, callback: (channel?: ChannelEntry) => any, event: any) {
+    is_active() { return this._active; }
+
+    private hover_text() {
+        if($.isArray(this.selected_client)) {
+            let result = "";
+            for(const client of this.selected_client)
+                result = result + ", " + client.clientNickName();
+            if(result.length < 2)
+                return result;
+            return result.substr(2);
+        } else if(this.selected_client) {
+            return (<ClientEntry>this.selected_client).clientNickName();
+        } else
+            return "";
+    }
+
+    activate(client: ClientEntry | ClientEntry[], callback: (channel?: ChannelEntry) => any, event: any) {
         this.finish_listener(undefined);
 
         this.selected_client = client;
@@ -32,7 +48,7 @@ class ClientMover {
         {
             const content = ClientMover.move_element.find(".container");
             content.empty();
-            content.append($.spawn("a").text(client.clientNickName()));
+            content.append($.spawn("a").text(this.hover_text()));
         }
         this.move_listener(event);
     }
@@ -54,8 +70,15 @@ class ClientMover {
             this._active = Math.sqrt(d_x * d_x + d_y * d_y) > 5 * 5;
 
             if(this._active) {
+                if($.isArray(this.selected_client)) {
+                    this.channel_tree.onSelect(this.selected_client[0], true);
+                    for(const client of this.selected_client.slice(1))
+                        this.channel_tree.onSelect(client, false, true);
+                } else {
+                    this.channel_tree.onSelect(this.selected_client, true);
+                }
+
                 ClientMover.move_element.show();
-                this.channel_tree.onSelect(this.selected_client, true);
             }
         }
 

shared/js/ui/view.ts

@@ -362,8 +362,9 @@ class ChannelTree {
         return a == b;
     }
 
-    onSelect(entry?: ChannelEntry | ClientEntry | ServerEntry, enforce_single?: boolean) {
-        if(this.currently_selected && ppt.key_pressed(ppt.SpecialKey.SHIFT) && entry instanceof ClientEntry) { //Currently we're only supporting client multiselects :D
+    onSelect(entry?: ChannelEntry | ClientEntry | ServerEntry, enforce_single?: boolean, flag_shift?: boolean) {
+        console.log("Select: " + entry);
+        if(this.currently_selected && (ppt.key_pressed(ppt.SpecialKey.SHIFT) || flag_shift) && entry instanceof ClientEntry) { //Currently we're only supporting client multiselects :D
             if(!entry) return; //Nowhere
 
             if($.isArray(this.currently_selected)) {