Fix zoom slider is not centered

LinwoodDev · Jan 2, 2025 · 788ab5d · 788ab5d
1 parent d1099ea
commit 788ab5d
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 70 deletions.
diff --git a/app/lib/cubits/current_index.dart b/app/lib/cubits/current_index.dart
@@ -799,6 +799,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';
@@ -17,6 +18,7 @@ class CameraViewport extends Equatable {
   final double pixelRatio;
   final double scale;
   final double x, y;
+  final RenderResolution resolution;
 
   const CameraViewport.unbaked(
       [this.backgrounds = const [],
@@ -32,7 +34,8 @@ class CameraViewport extends Equatable {
         pixelRatio = 1,
         x = 0,
         y = 0,
-        visibleElements = visibleElements ?? unbakedElements;
+        visibleElements = visibleElements ?? unbakedElements,
+        resolution = RenderResolution.performance;
 
   const CameraViewport.baked(
       {this.backgrounds = const [],
@@ -47,6 +50,7 @@ class CameraViewport extends Equatable {
       required this.visibleElements,
       this.scale = 1,
       this.x = 0,
+      required this.resolution,
       this.y = 0});
 
   get center => null;
@@ -61,6 +65,8 @@ class CameraViewport extends Equatable {
 
   ui.Rect toRect() => toOffset() & toSize(true);
 
+  ui.Size toRealSize() => toSize() / resolution.multiplier;
+
   Area toArea() => Area(
         name: '',
         position: toPoint(),
@@ -93,6 +99,7 @@ class CameraViewport extends Equatable {
         y: y,
         aboveLayerImage: aboveLayerImage,
         belowLayerImage: belowLayerImage,
+        resolution: resolution,
       );
 
   CameraViewport unbake({
@@ -123,6 +130,7 @@ class CameraViewport extends Equatable {
     double scale = 1,
     double x = 0,
     double y = 0,
+    required RenderResolution resolution,
   }) =>
       CameraViewport.baked(
         backgrounds: backgrounds,
@@ -138,6 +146,7 @@ class CameraViewport extends Equatable {
         visibleElements: visibleElements,
         aboveLayerImage: aboveLayerImage,
         belowLayerImage: belowLayerImage,
+        resolution: resolution,
       );
 
   CameraViewport withoutLayers() => CameraViewport.baked(
@@ -154,6 +163,7 @@ class CameraViewport extends Equatable {
         visibleElements: visibleElements,
         aboveLayerImage: null,
         belowLayerImage: null,
+        resolution: resolution,
       );
 
   CameraViewport withBackgrounds(List<Renderer<Background>> backgrounds) =>
@@ -171,6 +181,7 @@ class CameraViewport extends Equatable {
         visibleElements: visibleElements,
         aboveLayerImage: aboveLayerImage,
         belowLayerImage: belowLayerImage,
+        resolution: resolution,
       );
 
   @override
@@ -188,5 +199,6 @@ class CameraViewport extends Equatable {
         visibleElements,
         aboveLayerImage,
         belowLayerImage,
+        resolution,
       ];
 }
diff --git a/app/lib/selections/file.dart → app/lib/selections/document.dart b/app/lib/selections/file.dart → app/lib/selections/document.dart
@@ -1,7 +1,7 @@
 part of 'selection.dart';
 
-class FileSelection extends Selection<CurrentIndexCubit> {
-  FileSelection(CurrentIndexCubit cubit) : super([cubit]);
+class DocumentSelection extends Selection<CurrentIndexCubit> {
+  DocumentSelection(CurrentIndexCubit cubit) : super([cubit]);
 
   @override
   IconGetter get icon => PhosphorIcons.wrench;
@@ -141,25 +141,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 = (realHeight - height) / 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/selections/selection.dart b/app/lib/selections/selection.dart
@@ -44,7 +44,7 @@ part 'properties/path.dart';
 part 'properties/pen.dart';
 
 part 'area.dart';
-part 'file.dart';
+part 'document.dart';
 
 abstract class Selection<T> {
   List<T> _selected;
@@ -64,7 +64,7 @@ abstract class Selection<T> {
       return AreaSelection([selected]) as Selection<T>;
     }
     if (selected is CurrentIndexCubit) {
-      return FileSelection(selected) as Selection<T>;
+      return DocumentSelection(selected) as Selection<T>;
     }
     throw UnsupportedError('Unsupported selection type: $T');
   }

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",