Improve smoothness of elements creation for releasing pen

Author: CodeDoctorDE

app/lib/bloc/document_bloc.dart

@@ -223,7 +223,9 @@ class DocumentBloc extends ReplayBloc<DocumentEvent, DocumentState> {
       final assetService = current.assetService;
       final (data, elements) = await importAssetsAsync(
         current.data,
-        event.elements.map((e) => e.copyWith(id: createUniqueId())).toList(),
+        event.elements
+            .map((e) => e.copyWith(id: e.id ?? createUniqueId()))
+            .toList(),
         onInvalidate: assetService.invalidate,
         assets: event.assets,
       );
@@ -257,7 +259,7 @@ class DocumentBloc extends ReplayBloc<DocumentEvent, DocumentState> {
       final elements = event.elements.map(
         (key, value) => MapEntry(
           key,
-          value.map((e) => e.copyWith(id: createUniqueId())).toList(),
+          value.map((e) => e.copyWith(id: e.id ?? createUniqueId())).toList(),
         ),
       );
       final replacedRenderers =

app/lib/cubits/current_index.dart

@@ -192,6 +192,7 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
     if (selectState != SelectState.none) {
       state.handler.dispose(bloc);
       state.temporaryHandler?.dispose(bloc);
+      _disposeTemporaryForegrounds();
       _disposeForegrounds();
       final foregrounds = handler.createForegrounds(
         this,
@@ -264,6 +265,15 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
         change.nextState.userName != change.currentState.userName) {
       _sendNetworkingState();
     }
+    final newViewport = change.nextState.cameraViewport;
+    final currentViewport = change.currentState.cameraViewport;
+    if (change.currentState.cameraViewport != change.nextState.cameraViewport) {
+      change.nextState.handler.onViewportUpdated(currentViewport, newViewport);
+      change.nextState.temporaryHandler?.onViewportUpdated(
+        currentViewport,
+        newViewport,
+      );
+    }
   }
 
   void _sendNetworkingState({
@@ -345,7 +355,6 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
     if (docState is! DocumentLoadSuccess) return;
     state.handler.dispose(bloc);
     final handler = Handler.fromTool(tool);
-    state.handler.dispose(bloc);
     _disposeForegrounds();
     final foregrounds = handler.createForegrounds(
       this,
@@ -694,16 +703,25 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
       e.dispose(bloc);
     }
     _disposeForegrounds();
+    _disposeTemporaryForegrounds();
+    _disposeNetworkingForegrounds();
+    _disposeToggleableForegrounds();
     emit(
       state.copyWith(
         index: null,
         handler: HandHandler(),
         cursor: MouseCursor.defer,
-        foregrounds: [],
+        foregrounds: const <Renderer>[],
         temporaryHandler: null,
         temporaryForegrounds: null,
         temporaryCursor: null,
         temporaryRendererStates: null,
+        toolbar: null,
+        temporaryToolbar: null,
+        rendererStates: const <String, RendererState>{},
+        toggleableHandlers: const <int, Handler<Tool>>{},
+        toggleableForegrounds: const <int, List<Renderer>>{},
+        networkingForegrounds: const <Renderer>[],
         cameraViewport: CameraViewport.unbaked(),
       ),
     );
@@ -1603,7 +1621,6 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
     bool Function()? shouldRefresh,
     bool updateIndex = false,
   }) async {
-    final cameraViewport = current.cameraViewport;
     for (var renderer in {
       ...?backgrounds,
       ...?replacedElements,
@@ -1630,11 +1647,7 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
     } else if (backgrounds != null) {
       await this.unbake(blocState, backgrounds: backgrounds);
     } else {
-      final elements = List<Renderer<PadElement>>.from(
-        cameraViewport.unbakedElements,
-      );
-      elements.addAll(addedElements);
-      await addUnbaked(blocState, elements);
+      await addUnbaked(blocState, addedElements);
     }
 
     setSaveState(saved: SaveState.unsaved);

app/lib/handlers/handler.dart

@@ -239,6 +239,11 @@ abstract class Handler<T> {
     EventContext eventContext,
   ) {}
 
+  void onViewportUpdated(
+    CameraViewport currentViewport,
+    CameraViewport newViewport,
+  ) {}
+
   void onLongPressDown(LongPressDownDetails details, EventContext context) {}
 
   bool canChange(PointerDownEvent event, EventContext context) => true;

app/lib/handlers/pen.dart

@@ -5,6 +5,7 @@ class PenHandler extends Handler<PenTool> with ColoredHandler {
   bool _hideCursorWhileDrawing = false;
   // Map to store the PenElements.
   final Map<int, PenElement> elements = {};
+  final List<PenElement> _submittedElements = [];
   // Map to store the starting positions of each element.
   final Map<int, Offset> startPosition = {};
   // Map to store the last positions of each element.
@@ -29,7 +30,7 @@ class PenHandler extends Handler<PenTool> with ColoredHandler {
     DocumentPage page,
     DocumentInfo info, [
     Area? currentArea,
-  ]) => elements.values
+  ]) => [...elements.values, ..._submittedElements]
       .map((e) {
         if (e.points.length > 1) return PenRenderer(e);
         return null;
@@ -67,21 +68,34 @@ class PenHandler extends Handler<PenTool> with ColoredHandler {
 
   // Flag to check if elements are being submitted.
   bool _currentlyBaking = false;
+  DocumentBloc? _bloc;
 
   // Submit elements for processing and rendering.
   Future<void> submitElements(DocumentBloc bloc, List<int> indexes) async {
+    _bloc = bloc;
     final elements = indexes
         .map((e) => this.elements.remove(e))
         .nonNulls
         .toList();
     if (elements.isEmpty) return;
+    _submittedElements.addAll(elements);
     lastPosition.removeWhere((key, value) => indexes.contains(key));
     bloc.add(ElementsCreated(elements));
+    bloc.refresh();
+  }
+
+  @override
+  Future<void> onViewportUpdated(
+    CameraViewport currentViewport,
+    CameraViewport newViewport,
+  ) async {
+    if (_submittedElements.isEmpty) return;
+    _submittedElements.clear();
     if (_currentlyBaking) return;
     _currentlyBaking = true;
-    await bloc.bake();
+    await _bloc?.bake();
     _currentlyBaking = false;
-    bloc.refresh();
+    await _bloc?.refresh();
   }
 
   // Add a point to the element.
@@ -401,4 +415,9 @@ class PenHandler extends Handler<PenTool> with ColoredHandler {
   MouseCursor get cursor => (_hideCursorWhileDrawing && elements.isNotEmpty)
       ? SystemMouseCursors.none
       : SystemMouseCursors.precise;
+
+  @override
+  Map<String, RendererState> get rendererStates => Map.fromEntries(
+    _submittedElements.map((e) => MapEntry(e.id!, RendererState.hidden)),
+  );
 }

metadata/en-US/changelogs/152.txt

@@ -1,12 +1,14 @@
 * Add delayed autosave ([#883](https://github.com/LinwoodDev/Butterfly/issues/883))
 * Add save state as tooltip
 * Improve memory usage and performance for importing large assets ([#917](https://github.com/LinwoodDev/Butterfly/issues/917))
+* Improve smoothness of elements creation for releasing pen
 * Fix bfly files cannot be imported into existing documents
 * Fix various memory leaks ([#925](https://github.com/LinwoodDev/Butterfly/issues/925))
 * Fix header text color on certain themes
 * Fix theme names not displaying correctly in personalization settings
 * Fix metadata file version not updating if file version is null
 * Fix cache settings not editable correctly
+* Fix elements are duplicated on creation
 * Add 16kb page size support for android
 
 Read more here: https://linwood.dev/butterfly/2.4.1-rc.0