Fix merging and layer rendering

app/lib/bloc/document_bloc.dart

@@ -666,21 +666,35 @@ class DocumentBloc extends ReplayBloc<DocumentEvent, DocumentState> {
       if (current is! DocumentLoadSuccess) return;
       if (!(current.embedding?.editable ?? true)) return;
       if (event.layers.length < 2) return;
+      final layers = current.page.layers;
       final mainLayer = event.layers.first;
-      final mergedLayers = event.layers.skip(1).toList();
+      final mainLayerIndex =
+          layers.indexWhere((element) => element.id == mainLayer);
+      final mergedLayers = event.layers.skip(1).toList()
+        ..sort((a, b) => layers
+            .indexWhere((e) => e.id == a)
+            .compareTo(layers.indexWhere((e) => e.id == b)));
+      final belowLayers = mergedLayers.where((element) =>
+          layers.indexWhere((e) => e.id == element) < mainLayerIndex);
+      final aboveLayers = mergedLayers.where((element) =>
+          layers.indexWhere((e) => e.id == element) > mainLayerIndex);
       var layer = current.page.getLayer(mainLayer);
       layer = layer.copyWith(content: [
+        ...belowLayers.expand((e) => current.page.getLayer(e).content),
         ...layer.content,
-        ...mergedLayers.expand((e) => current.page.getLayer(e).content)
+        ...aboveLayers.expand((e) => current.page.getLayer(e).content),
       ]);
-      final newLayers = current.page.layers
+      final newLayers = layers
           .where((e) => !mergedLayers.contains(e.id))
           .map((e) => e.id == mainLayer ? layer : e)
           .toList();
       return _saveState(
         emit,
         state: current.copyWith(
           page: current.page.copyWith(layers: newLayers),
+          currentLayer: mergedLayers.contains(current.currentLayer)
+              ? mainLayer
+              : current.currentLayer,
         ),
       );
     });

app/lib/cubits/current_index.dart

@@ -557,9 +557,10 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
                   .toList(),
               visibleElements: visibleElements,
             )
-          : cameraViewport.withoutLayers(),
+          : cameraViewport,
       renderBackground: false,
       renderBaked: !reset,
+      renderBakedLayers: false,
     ).paint(canvas, size);
 
     var picture = recorder.endRecording();
@@ -586,8 +587,10 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
     if (resetAllLayers) {
       final belowLayerRecorder = ui.PictureRecorder();
       final belowLayerCanvas = ui.Canvas(belowLayerRecorder);
+      belowLayerCanvas.scale(ratio);
       final aboveLayerRecorder = ui.PictureRecorder();
       final aboveLayerCanvas = ui.Canvas(aboveLayerRecorder);
+      aboveLayerCanvas.scale(ratio);
       final belowLayers = [], aboveLayers = [];
       bool above = false;
       for (final layer in page.layers) {

app/lib/view_painter.dart

@@ -92,7 +92,7 @@ class ViewPainter extends CustomPainter {
   final DocumentPage page;
   final DocumentInfo info;
   final Area? currentArea;
-  final bool renderBackground, renderBaked;
+  final bool renderBackground, renderBaked, renderBakedLayers;
   final CameraViewport cameraViewport;
   final CameraTransform transform;
   final ColorScheme? colorScheme;
@@ -108,6 +108,7 @@ class ViewPainter extends CustomPainter {
     this.states = const {},
     this.renderBackground = true,
     this.renderBaked = true,
+    this.renderBakedLayers = true,
     required this.cameraViewport,
     this.colorScheme,
     this.transform = const CameraTransform(),
@@ -143,7 +144,7 @@ class ViewPainter extends CustomPainter {
     final bakedSize = cameraViewport.toSize();
     final pos = transform.globalToLocal(cameraViewport.toOffset());
     final bakedDst = pos & bakedSize * (1 + bakedSizeDiff);
-    if (renderBaked && belowLayerImage != null) {
+    if (renderBakedLayers && belowLayerImage != null) {
       canvas.drawImageRect(
         belowLayerImage,
         Offset.zero &
@@ -214,7 +215,7 @@ class ViewPainter extends CustomPainter {
     canvas.translate(transform.position.dx, transform.position.dy);
     canvas.scale(1 / transform.size, 1 / transform.size);
     final aboveLayerImage = cameraViewport.aboveLayerImage;
-    if (renderBaked && aboveLayerImage != null) {
+    if (renderBakedLayers && aboveLayerImage != null) {
       canvas.drawImageRect(
         aboveLayerImage,
         Offset.zero &

app/pubspec.lock

@@ -418,10 +418,10 @@ packages:
     dependency: transitive
     description:
       name: file_selector_android
-      sha256: "00aafa9ae05a8663d0b4f17abd2a02316911ca0f46f9b9dacb9578b324d99590"
+      sha256: ec439df07c4999faad319ce8ad9e971795c2f1d7132ad5a793b9370a863c6128
       url: "https://pub.dev"
     source: hosted
-    version: "0.5.1+9"
+    version: "0.5.1+10"
   file_selector_ios:
     dependency: transitive
     description:
@@ -1450,10 +1450,10 @@ packages:
     dependency: transitive
     description:
       name: url_launcher_android
-      sha256: "8fc3bae0b68c02c47c5c86fa8bfa74471d42687b0eded01b78de87872db745e2"
+      sha256: "0dea215895a4d254401730ca0ba8204b29109a34a99fb06ae559a2b60988d2de"
       url: "https://pub.dev"
     source: hosted
-    version: "6.3.12"
+    version: "6.3.13"
   url_launcher_ios:
     dependency: transitive
     description:

docs/package.json

@@ -26,6 +26,6 @@
   },
   "packageManager": "[email protected]",
   "devDependencies": {
-    "sass": "^1.80.3"
+    "sass": "^1.80.4"
   }
 }

metadata/en-US/changelogs/120.txt

@@ -1,3 +1,4 @@
 * Add layer merging
+* Fix layer rendering
 
 Read more here: https://linwood.dev/butterfly/2.3.0-beta.0