Add safearea on toolbar, fix performance on import

Author: CodeDoctorDE

api/lib/src/helpers/import.dart

@@ -1,15 +1,19 @@
 import 'package:butterfly_api/butterfly_api.dart';
 
-(NoteData, List<PadElement>) importAssets(
+typedef ImportAssetOptions = (
   NoteData data,
   List<PadElement> elements, {
   void Function(String source)? onInvalidate,
   Map<String, String>? alreadyImported,
-}) {
-  final imported = alreadyImported ?? {};
+});
+
+(NoteData, List<PadElement>) importAssets(ImportAssetOptions options) {
+  final imported = options.alreadyImported ?? {};
+  var data = options.$1;
+  var elements = options.$2;
   String importAsset(SourcedElement element, String fileExtension) {
     final source = element.source;
-    onInvalidate?.call(source);
+    options.onInvalidate?.call(source);
     if (imported.containsKey(source)) {
       return imported[source]!;
     }

api/pubspec.yaml

@@ -1,6 +1,6 @@
 name: butterfly_api
 description: The Linwood Butterfly API
-version: 2.4.0
+version: 2.4.0-rc.4
 publish_to: none
 
 environment:

app/lib/bloc/document_bloc.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:convert';
+import 'dart:isolate';
 
 import 'package:bloc_concurrency/bloc_concurrency.dart';
 import 'package:butterfly/api/file_system.dart';
@@ -29,6 +30,46 @@ part 'document_state.dart';
 
 enum ConnectionStatus { none, server, client }
 
+typedef ImportAssetSyncOptions = (
+  NoteData data,
+  List<PadElement> elements, {
+  SendPort? onInvalidate,
+  Map<String, String>? alreadyImported,
+});
+(NoteData, List<PadElement>) _importAssetsSync(ImportAssetSyncOptions options) {
+  return importAssets((
+    options.$1,
+    options.$2,
+    onInvalidate: options.onInvalidate != null
+        ? (source) => options.onInvalidate!.send(source)
+        : null,
+    alreadyImported: options.alreadyImported,
+  ));
+}
+
+Future<(NoteData, List<PadElement>)> importAssetsAsync(
+  NoteData data,
+  List<PadElement> elements, {
+  void Function(String source)? onInvalidate,
+  Map<String, String>? alreadyImported,
+}) {
+  ReceivePort? port;
+  if (onInvalidate != null) {
+    port = ReceivePort();
+    port.listen((message) {
+      if (message is String) {
+        onInvalidate(message);
+      }
+    });
+  }
+  return compute(_importAssetsSync, (
+    data,
+    elements,
+    onInvalidate: port?.sendPort,
+    alreadyImported: alreadyImported,
+  ));
+}
+
 class DocumentBloc extends ReplayBloc<DocumentEvent, DocumentState> {
   DocumentBloc(
     ButterflyFileSystem fileSystem,
@@ -82,7 +123,7 @@ class DocumentBloc extends ReplayBloc<DocumentEvent, DocumentState> {
       );
 
   void _init() {
-    on<PagesAdded>((event, emit) {
+    on<PagesAdded>((event, emit) async {
       final current = state;
       if (current is! DocumentLoadSuccess) return;
       var data = current.data;
@@ -92,16 +133,18 @@ class DocumentBloc extends ReplayBloc<DocumentEvent, DocumentState> {
       for (final details in event.pages) {
         page =
             details.page ?? DocumentPage(backgrounds: current.page.backgrounds);
-        final layers = page.layers.map((layer) {
-          List<PadElement> elements;
-          (data, elements) = importAssets(
-            data,
-            layer.content,
-            alreadyImported: imported,
-            onInvalidate: current.assetService.invalidate,
-          );
-          return layer.copyWith(content: elements);
-        }).toList();
+        final layers = await Future.wait(
+          page.layers.map((layer) async {
+            List<PadElement> elements;
+            (data, elements) = await importAssetsAsync(
+              data,
+              layer.content,
+              alreadyImported: imported,
+              onInvalidate: current.assetService.invalidate,
+            );
+            return layer.copyWith(content: elements);
+          }),
+        );
         page = page.copyWith(layers: layers);
         (data, pageName) = data.addPage(
           page,
@@ -165,12 +208,12 @@ class DocumentBloc extends ReplayBloc<DocumentEvent, DocumentState> {
       final newData = current.data.setThumbnail(event.data);
       _saveState(emit, state: current.copyWith(data: newData));
     });
-    on<ElementsCreated>((event, emit) {
+    on<ElementsCreated>((event, emit) async {
       final current = state;
       if (current is! DocumentLoadSuccess) return;
       if (!(current.embedding?.editable ?? true)) return;
       final assetService = current.assetService;
-      final (data, elements) = importAssets(
+      final (data, elements) = await importAssetsAsync(
         current.data,
         event.elements.map((e) => e.copyWith(id: createUniqueId())).toList(),
         onInvalidate: assetService.invalidate,

app/lib/cubits/current_index.dart

@@ -839,6 +839,40 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
   Renderer? getRenderer(PadElement element) =>
       renderers.firstWhereOrNull((renderer) => renderer.element == element);
 
+  Rect getViewportRect({Size? viewportSize}) {
+    var size = viewportSize ?? state.cameraViewport.toSize();
+
+    var transform = state.transformCubit.state;
+    final resolution = state.settingsCubit.state.renderResolution;
+
+    final friction = transform.friction;
+    final realWidth = size.width / transform.size;
+    final realHeight = size.height / transform.size;
+    var rect = Rect.fromLTWH(
+      transform.position.dx,
+      transform.position.dy,
+      realWidth / resolution.multiplier,
+      realHeight / resolution.multiplier,
+    );
+    if (friction != null) {
+      final topLeft = Offset(
+        min(transform.position.dx, friction.beginPosition.dx),
+        min(transform.position.dy, friction.beginPosition.dy),
+      );
+      final bottomRight = Offset(
+        max(transform.position.dx, friction.beginPosition.dx),
+        max(transform.position.dy, friction.beginPosition.dy),
+      ).translate(size.width, size.height);
+      transform = transform.withPosition(topLeft);
+      rect = Rect.fromPoints(topLeft, bottomRight);
+      size =
+          Size(bottomRight.dx - topLeft.dx, bottomRight.dy - topLeft.dy) *
+          transform.size;
+    }
+    rect = resolution.getRect(rect);
+    return rect;
+  }
+
   bool _isBaking = false;
   Function? _queuedBake;
   Completer<void>? _bakeCompleter;
@@ -879,37 +913,13 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
       size *= resolution.multiplier;
     }
     var transform = state.transformCubit.state;
-    final realWidth = size.width / transform.size;
-    final realHeight = size.height / transform.size;
-    var rect = Rect.fromLTWH(
-      transform.position.dx,
-      transform.position.dy,
-      realWidth / resolution.multiplier,
-      realHeight / resolution.multiplier,
-    );
     var renderers = List<Renderer<PadElement>>.from(
       cameraViewport.unbakedElements,
     );
     final recorder = ui.PictureRecorder();
     final canvas = ui.Canvas(recorder);
-    final friction = transform.friction;
-    if (friction != null) {
-      final topLeft = Offset(
-        min(transform.position.dx, friction.beginPosition.dx),
-        min(transform.position.dy, friction.beginPosition.dy),
-      );
-      final bottomRight = Offset(
-        max(transform.position.dx, friction.beginPosition.dx),
-        max(transform.position.dy, friction.beginPosition.dy),
-      ).translate(size.width, size.height);
-      transform = transform.withPosition(topLeft);
-      rect = Rect.fromPoints(topLeft, bottomRight);
-      size =
-          Size(bottomRight.dx - topLeft.dx, bottomRight.dy - topLeft.dy) *
-          transform.size;
-    }
-    final renderTransform = transform.improve(resolution, rect.size);
-    rect = resolution.getRect(rect);
+    final rect = getViewportRect(viewportSize: size);
+    final renderTransform = transform.improve(resolution, rect);
     final document = blocState.data;
     final page = blocState.page;
     final info = blocState.info;
@@ -932,7 +942,7 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
     if (reset) {
       renderers = List<Renderer<PadElement>>.from(this.renderers);
       visibleElements = renderers
-          .where((renderer) => renderer.expandedRect?.overlaps(rect) ?? true)
+          .where((renderer) => renderer.isVisible(rect))
           .toList();
     } else {
       visibleElements = List.from(oldVisible)..addAll(renderers);
@@ -1170,6 +1180,9 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
   }) async {
     final newViewport = state.cameraViewport.unbake(
       unbakedElements: unbakedElements,
+      visibleElements: unbakedElements
+          ?.where((e) => e.isVisible(getViewportRect()))
+          .toList(),
       backgrounds: backgrounds,
     );
     await _updateOnVisible(newViewport, blocState);
@@ -1242,11 +1255,19 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
     );
   }
 
-  Future<void> withUnbaked(
+  Future<void> addUnbaked(
     DocumentLoaded blocState,
-    List<Renderer<PadElement>> unbakedElements,
-  ) async {
-    final newViewport = state.cameraViewport.withUnbaked(unbakedElements);
+    List<Renderer<PadElement>> unbakedElements, [
+    List<Renderer<PadElement>>? visibleElements,
+  ]) async {
+    final rect = getViewportRect();
+    visibleElements ??= unbakedElements
+        .where((e) => e.isVisible(rect))
+        .toList();
+    final newViewport = state.cameraViewport.withUnbaked(
+      [...state.cameraViewport.unbakedElements, ...unbakedElements],
+      [...state.cameraViewport.visibleElements, ...visibleElements],
+    );
     await _updateOnVisible(newViewport, blocState);
     emit(state.copyWith(cameraViewport: newViewport));
   }
@@ -1547,9 +1568,6 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
     bool updateIndex = false,
   }) async {
     final cameraViewport = current.cameraViewport;
-    final elements = List<Renderer<PadElement>>.from(
-      cameraViewport.unbakedElements,
-    );
     for (var renderer in {
       ...?backgrounds,
       ...?replacedElements,
@@ -1562,7 +1580,6 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
         current.page,
       );
     }
-    elements.addAll(addedElements);
     final blocState = bloc.state;
     if (blocState is! DocumentLoadSuccess) return;
 
@@ -1577,7 +1594,11 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
     } else if (backgrounds != null) {
       await this.unbake(blocState, backgrounds: backgrounds);
     } else {
-      await withUnbaked(blocState, elements);
+      final elements = List<Renderer<PadElement>>.from(
+        cameraViewport.unbakedElements,
+      );
+      elements.addAll(addedElements);
+      await addUnbaked(blocState, elements);
     }
 
     setSaveState(saved: SaveState.unsaved);

app/lib/cubits/transform.dart

@@ -117,9 +117,8 @@ class CameraTransform extends Equatable {
     );
   }
 
-  CameraTransform improve(RenderResolution resolution, Size size) {
-    final rect = resolution.getRect(position & size);
-    return CameraTransform(pixelRatio, rect.topLeft, this.size, friction);
+  CameraTransform improve(RenderResolution resolution, Rect rect) {
+    return CameraTransform(pixelRatio, rect.topLeft, size, friction);
   }
 }
 

app/lib/models/viewport.dart

@@ -116,7 +116,8 @@ class CameraViewport extends Equatable {
   }
 
   CameraViewport withUnbaked(
-    List<Renderer<PadElement>> unbakedElements, [
+    List<Renderer<PadElement>> unbakedElements,
+    List<Renderer<PadElement>> visibleElements, [
     List<Renderer<Background>>? backgrounds,
   ]) => CameraViewport.baked(
     backgrounds: backgrounds ?? this.backgrounds,
@@ -127,8 +128,7 @@ class CameraViewport extends Equatable {
     unbakedElements: unbakedElements,
     bakedElements: bakedElements,
     pixelRatio: pixelRatio,
-    visibleElements: List<Renderer<PadElement>>.from(visibleElements)
-      ..addAll(unbakedElements),
+    visibleElements: visibleElements,
     x: x,
     y: y,
     aboveLayerImage: aboveLayerImage,

app/lib/renderers/renderer.dart

@@ -300,6 +300,8 @@ abstract class Renderer<T> {
 
   Rect? get rect => null;
 
+  bool isVisible(Rect rect) => expandedRect?.overlaps(rect) ?? true;
+
   Rect? get expandedRect {
     final current = rect;
     if (current == null) return null;