[dev-v5] MultiSplitter - Add the Touch mode (#4358)

* Update the Splitter to use Touch screens

* Update Tests frameworks

Author: dvoituron

examples/Demo/FluentUI.Demo/Properties/launchSettings.json

@@ -4,7 +4,7 @@
       "https": {
         "commandName": "Project",
         "dotnetRunMessages": true,
-        "launchBrowser": true,
+        "launchBrowser": false,
         "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
         "applicationUrl": "https://localhost:7197;http://localhost:5219",
         "environmentVariables": {

src/Core.Scripts/src/Components/Splitter/FluentMultiSplitter.ts

@@ -173,8 +173,16 @@ export namespace Microsoft.FluentUI.Blazor.Components.MultiSplitter {
       },
 
       touchMoveHandler: (e: TouchEvent) => {
+        if (e.touches.length < 1) {
+          return;
+        }
+
+        if (e.cancelable) {
+          e.preventDefault(); // Prevent scrolling while dragging
+        }
+
         const splitteDataElement = ((document as any).splitter as SplitterData)?.Data.get(el);
-        const touch = e.changedTouches[0]
+        const touch = e.touches[0]
 
         const eventArgs = new MouseEvent("mouseup", {
           bubbles: true,
@@ -198,8 +206,8 @@ export namespace Microsoft.FluentUI.Blazor.Components.MultiSplitter {
     if (splitterDataElement) {
       document.addEventListener('mousemove', splitterDataElement.mouseMoveHandler);
       document.addEventListener('mouseup', splitterDataElement.mouseUpHandler);
-      document.addEventListener('touchmove', splitterDataElement.touchMoveHandler, { passive: true });
-      document.addEventListener('touchend', splitterDataElement.mouseUpHandler, { passive: true });
+      document.addEventListener('touchmove', splitterDataElement.touchMoveHandler, { passive: false });
+      document.addEventListener('touchend', splitterDataElement.mouseUpHandler, { passive: false });
     }
   }
 

src/Core/Components/Splitter/FluentMultiSplitter.razor.cs

@@ -295,6 +295,23 @@ internal async Task ExpandExecAsync(int paneIndex)
         StateHasChanged();
     }
 
+    /// <summary />
+    internal Task ResizeExecAsync(TouchEventArgs args, int paneIndex)
+    {
+        if (args.Touches.Length < 1)
+        {
+            return Task.CompletedTask;
+        }
+
+        var mouseArgs = new MouseEventArgs
+        {
+            ClientX = args.Touches[0].ClientX,
+            ClientY = args.Touches[0].ClientY,
+        };
+
+        return ResizeExecAsync(mouseArgs, paneIndex);
+    }
+
     /// <summary />
     internal async Task ResizeExecAsync(MouseEventArgs args, int paneIndex)
     {

src/Core/Components/Splitter/FluentMultiSplitterPane.razor

@@ -16,6 +16,7 @@
     <div class="fluent-multi-splitter-bar"
          status="@GetClassStatus()"
          @onmousedown="@(e => Splitter?.ResizeExecAsync(e, Index) ?? Task.CompletedTask)"
+         @ontouchstart="@(e => Splitter?.ResizeExecAsync(e, Index) ?? Task.CompletedTask)"
          @onclick:preventDefault="true"
          @onclick:stopPropagation="true">
 

tests/Core/Components.Tests.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <TargetFramework>net10.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <OutputType>Exe</OutputType>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>

tests/Integration/Components.IntegrationTests.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net10.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <OutputType>Exe</OutputType>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>