Fix zoom slider is not centered

LinwoodDev · Jan 7, 2025 · ac4c287 · ac4c287
1 parent ca56284
commit ac4c287
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 74 deletions.
diff --git a/app/lib/cubits/current_index.dart b/app/lib/cubits/current_index.dart
@@ -649,6 +649,7 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
             height: size.height.ceil(),
             width: size.width.ceil(),
             pixelRatio: ratio,
+            resolution: resolution,
             scale: transform.size,
             x: renderTransform.position.dx,
             y: renderTransform.position.dy,

diff --git a/app/lib/models/viewport.dart b/app/lib/models/viewport.dart
@@ -1,6 +1,7 @@
 import 'dart:math';
 import 'dart:ui' as ui;
 
+import 'package:butterfly/cubits/settings.dart';
 import 'package:butterfly/renderers/renderer.dart';
 import 'package:butterfly_api/butterfly_api.dart';
 import 'package:equatable/equatable.dart';
@@ -18,6 +19,7 @@ class CameraViewport extends Equatable {
   final double pixelRatio;
   final double scale;
   final double x, y;
+  final RenderResolution resolution;
 
   const CameraViewport.unbaked(this.utilities,
       [this.backgrounds = const [],
@@ -33,7 +35,8 @@ class CameraViewport extends Equatable {
         pixelRatio = 1,
         x = 0,
         y = 0,
-        visibleElements = visibleElements ?? unbakedElements;
+        visibleElements = visibleElements ?? unbakedElements,
+        resolution = RenderResolution.performance;
 
   const CameraViewport.baked(this.utilities,
       {this.backgrounds = const [],
@@ -48,6 +51,7 @@ class CameraViewport extends Equatable {
       required this.visibleElements,
       this.scale = 1,
       this.x = 0,
+      required this.resolution,
       this.y = 0});
 
   get center => null;
@@ -62,6 +66,8 @@ class CameraViewport extends Equatable {
 
   ui.Rect toRect() => toOffset() & toSize(true);
 
+  ui.Size toRealSize() => toSize() / resolution.multiplier;
+
   Area toArea() => Area(
         name: '',
         position: toPoint(),
@@ -95,6 +101,7 @@ class CameraViewport extends Equatable {
         y: y,
         aboveLayerImage: aboveLayerImage,
         belowLayerImage: belowLayerImage,
+        resolution: resolution,
       );
 
   CameraViewport unbake({
@@ -127,6 +134,7 @@ class CameraViewport extends Equatable {
     double scale = 1,
     double x = 0,
     double y = 0,
+    required RenderResolution resolution,
   }) =>
       CameraViewport.baked(
         utilities,
@@ -143,6 +151,7 @@ class CameraViewport extends Equatable {
         visibleElements: visibleElements,
         aboveLayerImage: aboveLayerImage,
         belowLayerImage: belowLayerImage,
+        resolution: resolution,
       );
 
   CameraViewport withoutLayers() => CameraViewport.baked(
@@ -160,6 +169,7 @@ class CameraViewport extends Equatable {
         visibleElements: visibleElements,
         aboveLayerImage: null,
         belowLayerImage: null,
+        resolution: resolution,
       );
 
   CameraViewport withBackgrounds(List<Renderer<Background>> backgrounds) =>
@@ -196,6 +206,7 @@ class CameraViewport extends Equatable {
         visibleElements: visibleElements,
         aboveLayerImage: aboveLayerImage,
         belowLayerImage: belowLayerImage,
+        resolution: resolution,
       );
 
   @override
@@ -214,5 +225,6 @@ class CameraViewport extends Equatable {
         utilities,
         aboveLayerImage,
         belowLayerImage,
+        resolution,
       ];
 }
diff --git a/app/lib/selections/utilities.dart b/app/lib/selections/utilities.dart
@@ -144,25 +144,23 @@ class _UtilitiesViewState extends State<_UtilitiesView>
                       onPressed: () async {
                         final viewport =
                             state.currentIndexCubit.state.cameraViewport;
-                        final width = viewport.width?.toDouble() ??
-                            kThumbnailWidth.toDouble();
-                        final realHeight = viewport.height?.toDouble() ??
-                            kThumbnailHeight.toDouble();
+                        final size = viewport.toRealSize();
                         final height =
-                            width * kThumbnailHeight / kThumbnailWidth;
-                        final heightOffset = (height - realHeight) / 2;
-                        final quality = kThumbnailWidth / width;
+                            size.width * kThumbnailHeight / kThumbnailWidth;
+                        final heightOffset = (size.height - height) / 2;
+                        final quality = kThumbnailWidth / size.width;
                         final thumbnail = await state.currentIndexCubit.render(
                           state.data,
                           state.page,
                           state.info,
                           ImageExportOptions(
-                            width: width,
+                            width: size.width,
                             height: height,
                             quality: quality,
                             scale: viewport.scale,
-                            x: viewport.x,
-                            y: viewport.y + heightOffset,
+                            x: viewport.x + size.width / viewport.scale,
+                            y: viewport.y +
+                                (heightOffset + size.height) / viewport.scale,
                           ),
                         );
                         if (thumbnail == null) return;

diff --git a/app/lib/views/zoom.dart b/app/lib/views/zoom.dart
@@ -86,10 +86,10 @@ class _ZoomViewState extends State<ZoomView> with TickerProviderStateMixin {
                           if (state is! DocumentLoaded) {
                             return;
                           }
-                          final viewport = currentIndex.cameraViewport;
+                          final size = currentIndex.cameraViewport.toRealSize();
                           final center = Offset(
-                            (viewport.width ?? 0) / 2,
-                            (viewport.height ?? 0) / 2,
+                            size.width / 2,
+                            size.height / 2,
                           );
                           currentIndex.transformCubit.size(value, center);
                           if (bake) {

diff --git a/app/pubspec.lock b/app/pubspec.lock
@@ -1225,10 +1225,10 @@ packages:
     dependency: "direct main"
     description:
       name: shared_preferences
-      sha256: "3c7e73920c694a436afaf65ab60ce3453d91f84208d761fbd83fc21182134d93"
+      sha256: a752ce92ea7540fc35a0d19722816e04d0e72828a4200e83a98cf1a1eb524c9a
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.4"
+    version: "2.3.5"
   shared_preferences_android:
     dependency: transitive
     description:

diff --git a/docs/package.json b/docs/package.json
@@ -16,7 +16,7 @@
     "@phosphor-icons/react": "^2.1.7",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
-    "astro": "^5.1.1",
+    "astro": "^5.1.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "remark-gemoji": "^8.0.0",