From 4f0156c33a054025b1cecc70fed89a349840f41a Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Sat, 19 Jan 2019 15:21:37 +0100 Subject: [PATCH] Added multible user movement --- ChangeLog.md | 5 ++++ shared/js/ui/client.ts | 47 +++++++++++++++++++++++-------------- shared/js/ui/client_move.ts | 31 ++++++++++++++++++++---- shared/js/ui/view.ts | 5 ++-- 4 files changed, 64 insertions(+), 24 deletions(-) diff --git a/ChangeLog.md b/ChangeLog.md index 34d76981..23a3826a 100644 --- a/ChangeLog.md +++ b/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) diff --git a/shared/js/ui/client.ts b/shared/js/ui/client.ts index c74e7bf4..cd7face2 100644 --- a/shared/js/ui/client.ts +++ b/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); }); } diff --git a/shared/js/ui/client_move.ts b/shared/js/ui/client_move.ts index 0be56523..26eb13ff 100644 --- a/shared/js/ui/client_move.ts +++ b/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 (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); } } diff --git a/shared/js/ui/view.ts b/shared/js/ui/view.ts index e828b918..bf475f82 100644 --- a/shared/js/ui/view.ts +++ b/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)) {