GraphPage: hide double-tap hint after first user interaction

Hint overlay is dismissed on first pan/zoom/click via iframe app://interaction
signal from the vis.js event handler.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gerwin Kuijntjes
2026-03-31 14:47:31 +02:00
parent 06dafb0056
commit 2193026fd9
3 changed files with 38 additions and 1 deletions

View File

@@ -5,6 +5,25 @@
Title="Graph" Title="Graph"
x:Class="Xamarin.Neo4j.Pages.GraphPage"> x:Class="Xamarin.Neo4j.Pages.GraphPage">
<ContentPage.Content> <ContentPage.Content>
<WebView x:Name="webView" Source="{Binding Source}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" /> <Grid>
<WebView x:Name="webView" Source="{Binding Source}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
<!-- Double-tap hint — hidden after first interaction -->
<Border x:Name="hintBorder"
VerticalOptions="End"
HorizontalOptions="Center"
Margin="16,0,16,16"
BackgroundColor="#CC000000"
StrokeThickness="0"
StrokeShape="RoundRectangle 12"
Padding="12,8">
<Label Text="Double-tap a node to expand its relationships"
TextColor="White"
FontSize="13"
HorizontalTextAlignment="Center" />
</Border>
</Grid>
</ContentPage.Content> </ContentPage.Content>
</ContentPage> </ContentPage>

View File

@@ -33,6 +33,13 @@ namespace Xamarin.Neo4j.Pages
{ {
Console.WriteLine($"[Graph] Navigating: {e.Url}"); Console.WriteLine($"[Graph] Navigating: {e.Url}");
if (e.Url.Contains("interaction"))
{
e.Cancel = true;
hintBorder.IsVisible = false;
return;
}
if (!e.Url.Contains("expand") || !e.Url.Contains("nodeId")) return; if (!e.Url.Contains("expand") || !e.Url.Contains("nodeId")) return;
e.Cancel = true; e.Cancel = true;

View File

@@ -440,6 +440,16 @@
// ---- interaction handling (touch + mouse/pointer) ---- // ---- interaction handling (touch + mouse/pointer) ----
var ptrStartX, ptrStartY, ptrEndX, ptrEndY, ptrStartTime, dragging = null, panning = false, mouseDown = false; var ptrStartX, ptrStartY, ptrEndX, ptrEndY, ptrStartTime, dragging = null, panning = false, mouseDown = false;
var interacted = false;
function notifyInteraction() {
if (interacted) return;
interacted = true;
var f = document.createElement('iframe');
f.style.display = 'none';
f.src = 'app://interaction';
document.body.appendChild(f);
setTimeout(function () { document.body.removeChild(f); }, 200);
}
function edgeAt(sx, sy) { function edgeAt(sx, sy) {
var w = toWorld(sx, sy); var w = toWorld(sx, sy);
@@ -477,6 +487,7 @@
function handleStart(e) { function handleStart(e) {
if (e.touches) e.preventDefault(); if (e.touches) e.preventDefault();
notifyInteraction();
var p = coordFromEvent(e); var p = coordFromEvent(e);
ptrStartX = ptrEndX = p.x; ptrStartX = ptrEndX = p.x;
ptrStartY = ptrEndY = p.y; ptrStartY = ptrEndY = p.y;