Implement column resizing

microsoft · Oct 26, 2022 · 37603f1 · 37603f1
1 parent d36fd06
commit 37603f1
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 7 deletions.
diff --git a/src/EventLogExpert/Components/EventTable.razor b/src/EventLogExpert/Components/EventTable.razor
@@ -1,25 +1,26 @@
 @inherits FluxorComponent
 
 @inject IState<EventLogState> EventLogState
+@inject IJSRuntime JS
 
 <div class="table-container">
     <table>
         <thead>
         <tr>
             <th style="@GetInlineStyle("RecordId")">Rec</th>
-            <th class="table-divider"></th>
+            <th class="table-divider" @onmousedown="@(e => OnMouseDownDivider(e, "RecordId"))"></th>
             <th style="@GetInlineStyle("TimeCreated")">Time</th>
-            <th class="table-divider"></th>
+            <th class="table-divider" @onmousedown="@(e => OnMouseDownDivider(e, "TimeCreated"))"></th>
             <th style="@GetInlineStyle("Id")x">Id</th>
-            <th class="table-divider"></th>
+            <th class="table-divider" @onmousedown="@(e => OnMouseDownDivider(e, "Id"))"></th>
             <th style="@GetInlineStyle("MachineName")">Machine</th>
-            <th class="table-divider"></th>
+            <th class="table-divider" @onmousedown="@(e => OnMouseDownDivider(e, "MachineName"))"></th>
             <th style="@GetInlineStyle("Level")">Level</th>
-            <th class="table-divider"></th>
+            <th class="table-divider" @onmousedown="@(e => OnMouseDownDivider(e, "Level"))"></th>
             <th style="@GetInlineStyle("ProviderName")">Source</th>
-            <th class="table-divider"></th>
+            <th class="table-divider" @onmousedown="@(e => OnMouseDownDivider(e, "ProviderName"))"></th>
             <th style="@GetInlineStyle("Task")">Task</th>
-            <th class="table-divider"></th>
+            <th class="table-divider" @onmousedown="@(e => OnMouseDownDivider(e, "Task"))"></th>
             <th style="@GetDescriptionStyle()">Description</th>
         </tr>
         </thead>

diff --git a/src/EventLogExpert/Components/EventTable.razor.cs b/src/EventLogExpert/Components/EventTable.razor.cs
@@ -1,6 +1,10 @@
 // // Copyright (c) Microsoft Corporation.
 // // Licensed under the MIT License.
 
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
+using System.Diagnostics;
+
 namespace EventLogExpert.Components;
 
 public partial class EventTable
@@ -20,6 +24,20 @@ public partial class EventTable
 
     private const int ScrollBarWidth = 18;
 
+    private string _columnResizingName = "";
+
+    private double _columnMouseXLast = -1;
+
+    private IJSObjectReference? _jsModule;
+
+    private DotNetObjectReference<EventTable>? _thisObj;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "./Components/EventTable.razor.js");
+        _thisObj = DotNetObjectReference.Create(this);
+    }
+
     private string GetDescriptionStyle()
     {
         var total = _colWidths.Values.Sum() + (TableDividerWidth * _colWidths.Count) + ScrollBarWidth;
@@ -30,4 +48,30 @@ private string GetInlineStyle(string colName)
     {
         return $"min-width: {_colWidths[colName]}px; max-width: {_colWidths[colName]}px;";
     }
+
+    private void OnMouseDownDivider(MouseEventArgs e, string columnName)
+    {
+        _columnResizingName = columnName;
+        _columnMouseXLast = e.ClientX;
+        _jsModule?.InvokeVoidAsync("startColumnResize", new[] {_thisObj});
+    }
+
+    [JSInvokable]
+    public void MouseMoveCallback(MouseEventArgs e)
+    {
+        int difference = (int)(_columnMouseXLast - e.ClientX);
+        var newColumnWidth = _colWidths[_columnResizingName] - difference;
+        if (newColumnWidth < 10) newColumnWidth = 10;
+
+        _colWidths[_columnResizingName] = newColumnWidth;
+        _columnMouseXLast = e.ClientX;
+        StateHasChanged();
+    }
+
+    [JSInvokable]
+    public void MouseUpCallback()
+    {
+        _columnResizingName = "";
+        _columnMouseXLast = -1;
+    }
 }
diff --git a/src/EventLogExpert/Components/EventTable.razor.css b/src/EventLogExpert/Components/EventTable.razor.css
@@ -19,6 +19,11 @@ th {
     position: sticky;
     top: 0;
     background-color: var(--background-darkgray);
+    cursor: default;
+}
+
+th.table-divider {
+    cursor: col-resize;
 }
 
 td {

diff --git a/src/EventLogExpert/Components/EventTable.razor.js b/src/EventLogExpert/Components/EventTable.razor.js
@@ -0,0 +1,13 @@
+export function startColumnResize(dotNetObj) {
+    document.onmousemove = e => {
+        // For some reason we have to manually pass this as a new object. Simply passing the event
+        // to .NET does not work. We're only including the one value we care about.
+        dotNetObj.invokeMethodAsync('MouseMoveCallback', { ClientX: e.clientX });
+    };
+
+    document.onmouseup = e => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+        dotNetObj.invokeMethodAsync('MouseUpCallback');
+    };
+}