From eb7a51639401c0c085fd93d682aaa0fda6fa6742 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Wed, 21 Aug 2024 14:13:18 +0800
Subject: [PATCH] fix(Split): iframe drags incorrectly (#4109)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 支持 iframe 拖动

* chore: bump version 8.8.4-beta02
---
 src/BootstrapBlazor/BootstrapBlazor.csproj    |  2 +-
 .../Components/Split/Split.razor.js           | 34 +++++++++++++++++--
 .../Components/Split/Split.razor.scss         |  1 +
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index eaef2bea5..cd098e01e 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.8.4-beta01</Version>
+    <Version>8.8.4-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">
diff --git a/src/BootstrapBlazor/Components/Split/Split.razor.js b/src/BootstrapBlazor/Components/Split/Split.razor.js
index 7efe935ba..d90532a24 100644
--- a/src/BootstrapBlazor/Components/Split/Split.razor.js
+++ b/src/BootstrapBlazor/Components/Split/Split.razor.js
@@ -21,7 +21,12 @@ export function init(id) {
     const isVertical = !splitWrapper.classList.contains('is-horizontal')
     const splitBar = splitWrapper.children[1]
     const splitLeft = splitWrapper.children[0]
-    const splitRight = splitWrapper.children[2]
+    const splitRight = splitWrapper.children[2];
+
+    split.splitBar = splitBar;
+    EventHandler.on(splitBar, 'mousedown', e => showMask(splitLeft, splitRight));
+    EventHandler.on(splitBar, 'mouseup', e => removeMask(splitLeft, splitRight));
+
     Drag.drag(splitBar,
         e => {
             splitWidth = el.offsetWidth
@@ -57,11 +62,36 @@ export function init(id) {
         })
 }
 
+const showMask = (left, right) => {
+    const div = document.createElement('div');
+    div.style = "position: absolute; inset: 0; opacity: 0; z-index: 5;";
+    div.className = "split-mask";
+
+    left.appendChild(div);
+    right.appendChild(div.cloneNode(true));
+}
+
+const removeMask = (left, right) => {
+    deleteMask(left);
+    deleteMask(right);
+}
+
+const deleteMask = el => {
+    let mask = el.querySelector('.split-mask');
+    if (mask) {
+        mask.remove();
+        mask = null;
+    }
+}
+
 export function dispose(id) {
     const split = Data.get(id)
     Data.remove(id)
 
     if (split) {
-        Drag.dispose(split.el)
+        const { el, splitBar } = split;
+        EventHandler.on(splitBar, 'mousedown');
+        EventHandler.on(splitBar, 'mouseup');
+        Drag.dispose(el)
     }
 }
diff --git a/src/BootstrapBlazor/Components/Split/Split.razor.scss b/src/BootstrapBlazor/Components/Split/Split.razor.scss
index 7679f104b..4c477069d 100644
--- a/src/BootstrapBlazor/Components/Split/Split.razor.scss
+++ b/src/BootstrapBlazor/Components/Split/Split.razor.scss
@@ -26,6 +26,7 @@
     .split-pane {
         height: 100%;
         overflow: hidden;
+        position: relative;
     }
 
     .split-bar {