Updated the channel tree move semantics

ChangeLog.md

@@ -1,4 +1,9 @@
 # Changelog:
+* **02.12.20**
+    - Fixed a bug within the client entry move mechanic of the channel tree which prevented any client selection
+    - Selecting clicked client when moving 
+    - When a client has been moved into another client his channel will be used
+    
 * **29.11.20**
     - Added support for the native client to show and broadcast video
     - By default using a quick select method when sharing the screen

shared/js/tree/ChannelTree.tsx

@@ -134,7 +134,7 @@ export class ChannelTreeEntrySelect {
      * append    := Append these entries to the current selection
      * remove    := Remove these entries from the current selection
      */
-    select(entries: ChannelTreeEntry<any>[], mode: "auto" | "exclusive" | "append" | "remove") {
+    select(entries: ChannelTreeEntry<any>[], mode: "auto" | "auto-add" | "exclusive" | "append" | "remove") {
         entries = entries.filter(entry => !!entry);
 
         if(mode === "exclusive") {
@@ -193,7 +193,7 @@ export class ChannelTreeEntrySelect {
             if(deleted_entries.length !== 0) {
                 this.handle.events.fire("notify_selection_changed");
             }
-        } else if(mode === "auto") {
+        } else if(mode === "auto" || mode === "auto-add") {
             let deleted_entries = [];
             let new_entries = [];
 
@@ -203,7 +203,7 @@ export class ChannelTreeEntrySelect {
                     if(index === -1) {
                         this.selectedEntries.push(entry);
                         new_entries.push(entry);
-                    } else {
+                    } else if(mode === "auto") {
                         this.selectedEntries.splice(index, 1);
                         deleted_entries.push(entry);
                     }
@@ -213,10 +213,11 @@ export class ChannelTreeEntrySelect {
                 if(entries.length !== 0) {
                     const entry = entries[entries.length - 1];
                     this.selectedEntries.push(entry);
-                    if(!deleted_entries.remove(entry))
+                    if(!deleted_entries.remove(entry)) {
                         new_entries.push(entry); /* entry wans't selected yet */
                     }
                 }
+            }
 
             for(const deleted of deleted_entries) {
                 deleted["onUnselect"]();

shared/js/ui/tree/Controller.tsx

@@ -657,7 +657,9 @@ export function initializeChannelTreeController(events: Registry<ChannelTreeUIEv
     });
 
     events.on("action_select", event => {
+        console.error("Select mode: %o", moveSelection);
         if(!event.ignoreClientMove && moveSelection?.length) {
+            console.error("X");
             return;
         }
 
@@ -795,17 +797,28 @@ export function initializeChannelTreeController(events: Registry<ChannelTreeUIEv
         }
 
         const entry = channelTree.findEntryId(event.treeEntryId);
-        if(!entry || !(entry instanceof ChannelEntry)) {
-            logWarn(LogCategory.CHANNEL, tr("Tried to move clients to an invalid tree entry with id %o"), event.treeEntryId);
+
+
+        let targetChannel: ChannelEntry;
+        if(entry instanceof ChannelEntry) {
+            targetChannel = entry;
+        } else if(entry instanceof ClientEntry) {
+            targetChannel = entry.currentChannel();
+        }
+
+        if(!targetChannel) {
+            logWarn(LogCategory.CHANNEL, tr("Tried to move clients to an tree entry which has no target channel. Tree entry id %o"), event.treeEntryId);
+            moveSelection = undefined;
             return;
         }
 
         moveSelection.filter(e => e.currentChannel() !== entry).forEach(e => {
             channelTree.client.serverConnection.send_command("clientmove", {
                 clid: e.clientId(),
-                cid: entry.channelId
+                cid: targetChannel.channelId
             });
         });
+
         moveSelection = undefined;
     });
 

shared/js/ui/tree/Definitions.ts

@@ -34,7 +34,7 @@ export interface ChannelTreeUIEvents {
     action_set_collapsed_state: { treeEntryId: number, state: "collapsed" | "expended" },
     action_select: {
         entryIds: number[],
-        mode: "auto" | "exclusive" | "append" | "remove",
+        mode: "auto" | "auto-add" | "exclusive" | "append" | "remove",
         ignoreClientMove: boolean
     },
     action_select_auto: { direction: "next" | "previous" },

shared/js/ui/tree/RendererMove.tsx

@@ -34,7 +34,7 @@ export class RendererMove extends ReactComponentBase<TreeEntryMoveProps, TreeEnt
             if (e.type === "mouseup") {
                 if (e.button !== 0) return;
 
-                this.props.onMoveEnd({x: e.pageX, y: e.pageY});
+                this.props.onMoveEnd({ x: e.pageX, y: e.pageY });
             } else {
                 this.props.onMoveCancel();
             }

shared/js/ui/tree/RendererView.tsx

@@ -234,8 +234,16 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
     }
 
     private onMouseMove(e: React.MouseEvent) {
-        if (!this.mouseMove.down || this.mouseMove.fired) return;
+        if (!this.mouseMove.down || this.mouseMove.fired) {
+            return;
+        }
+
         if (Math.abs((this.mouseMove.x - e.pageX) * (this.mouseMove.y - e.pageY)) > (this.props.moveThreshold || 9)) {
+            const sourceEntry = this.getEntryFromPoint(this.mouseMove.x, this.mouseMove.y);
+            if(!sourceEntry) { return; }
+
+            this.props.events.fire("action_select", { entryIds: [ sourceEntry ], mode: "auto-add", ignoreClientMove: true });
+
             this.mouseMove.fired = true;
             this.props.events.fire("action_start_entry_move", {
                 current: { x: e.pageX, y: e.pageY },
@@ -286,11 +294,13 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
         pageY -= bounds.y;
         pageX -= bounds.x;
 
-        if (pageX < 0 || pageY < 0)
+        if (pageX < 0 || pageY < 0) {
             return undefined;
+        }
 
-        if (pageX > container.clientWidth)
+        if (pageX > container.clientWidth) {
             return undefined;
+        }
 
         const total_offset = container.scrollTop + pageY;
         return this.state.tree[Math.floor(total_offset / ChannelTreeView.EntryHeight)]?.entryId;