From 5f4bb00007c92a0a2310540e0c97230d73c63e70 Mon Sep 17 00:00:00 2001 From: fufesou Date: Sat, 12 Sep 2026 00:20:28 +0800 Subject: [PATCH] fix(web): align cursor bitmap and hotspot rounding --- flutter/lib/models/model.dart | 2 +- flutter/lib/web/custom_cursor.dart | 8 ++-- flutter/test/cursor_web_test.dart | 64 ++++++++++++++++++++++++++++++ 3 files changed, 69 insertions(+), 5 deletions(-) create mode 100644 flutter/test/cursor_web_test.dart diff --git a/flutter/lib/models/model.dart b/flutter/lib/models/model.dart index eaa82ed6e..7ac4cf95c 100644 --- a/flutter/lib/models/model.dart +++ b/flutter/lib/models/model.dart @@ -2882,7 +2882,7 @@ class CursorData { int _doubleToInt(double v) => (v * 10e6).round().toInt(); - bool get _usesLogicalCursorPixels => isLinux || isMacOS; + bool get _usesLogicalCursorPixels => isLinux || isMacOS || isWeb; int get scaledWidth => _scaledDimension(width, scale); int get scaledHeight => _scaledDimension(height, scale); diff --git a/flutter/lib/web/custom_cursor.dart b/flutter/lib/web/custom_cursor.dart index 54df77e98..cc1ed081a 100644 --- a/flutter/lib/web/custom_cursor.dart +++ b/flutter/lib/web/custom_cursor.dart @@ -52,8 +52,8 @@ class CursorManager { 'cursor', jsonEncode({ 'url': cursorData.url, - 'hotx': cursorData.hotX.toInt(), - 'hoty': cursorData.hotY.toInt(), + 'hotx': cursorData.hotX.round(), + 'hoty': cursorData.hotY.round(), }) ]); } @@ -116,8 +116,8 @@ MouseCursor buildCursorOfCache( CursorManager.instance.registerCursor(CursorData( key: key, url: 'data:image/rgba;base64,${base64Encode(data)}', - width: (cache.width * cache.scale).toInt(), - height: (cache.height * cache.scale).toInt(), + width: cache.scaledWidth, + height: cache.scaledHeight, hotX: cache.hotx, hotY: cache.hoty)); cursor.addKey(key); diff --git a/flutter/test/cursor_web_test.dart b/flutter/test/cursor_web_test.dart new file mode 100644 index 000000000..0e32d35e1 --- /dev/null +++ b/flutter/test/cursor_web_test.dart @@ -0,0 +1,64 @@ +@TestOn('browser') +library; + +import 'dart:convert'; +import 'dart:js' as js; +import 'dart:typed_data'; + +import 'package:flutter_hbb/models/model.dart' as model; +import 'package:flutter_hbb/web/custom_cursor.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:image/image.dart' as img; + +class _CursorModel extends Fake implements model.CursorModel { + @override + final Set cachedKeys = {}; + + @override + void addKey(String key) => cachedKeys.add(key); +} + +void main() { + test('Web cursor rounds its bitmap and hotspot together', () async { + Map? registered; + final original = js.context['setByName']; + js.context['setByName'] = js.allowInterop((String name, String value) { + expect(name, 'cursor'); + registered = jsonDecode(value) as Map; + }); + addTearDown(() => js.context['setByName'] = original); + + const sourceSide = 48; + final image = img.Image(width: sourceSide, height: sourceSide, numChannels: 4); + img.fill(image, color: img.ColorRgba8(255, 255, 255, 255)); + for (final (sourceHotspot, scale, outputSide, expectedHotspot) in [ + ((7.0, 7.0), 633 / 1600, 19, (3, 3)), + ((21.0, 23.0), 633 / 1600, 19, (8, 9)), + ((22.0, 22.0), 633 / 1600, 19, (9, 9)), + ((21.0, 23.0), 0.05, 12, (5, 6)), + ((21.0, 23.0), 0.5, 24, (11, 12)), + ((7.0, 7.0), 1.0, 48, (7, 7)), + ]) { + final cache = model.CursorData( + peerId: 'web-cursor-test', + id: '$sourceHotspot', + image: image, + scale: 1, + data: Uint8List.fromList(img.encodePng(image)), + hotxOrigin: sourceHotspot.$1, + hotyOrigin: sourceHotspot.$2, + width: sourceSide, + height: sourceSide, + ); + final cursor = buildCursorOfCache(_CursorModel(), scale, cache); + final session = cursor.createSession(1); + await session.activate(); + final uri = Uri.parse(registered!['url'] as String); + final bitmap = img.decodePng(uri.data!.contentAsBytes())!; + expect((bitmap.width, bitmap.height), (outputSide, outputSide)); + expect((registered!['hotx'], registered!['hoty']), expectedHotspot); + session.dispose(); + await deleteCustomCursor(cache.updateGetKey(scale)); + } + }); +}