feat: history-undo-redo (unstable)

lib/canvas_setup_page.dart

@@ -81,7 +81,7 @@ class _CanvasSetupPageState extends State<CanvasSetupPage> {
                       context: context, 
                       builder: (context) => AlertDialog(
                         title: Text('Update Label Size'),
-                        content: Text('updating to smaller label size may cause element lost, Are you sure want to update label size ?'),
+                        content: Text('updating label size will remove all history you have changed, Are you sure want to update label size ?'),
                         actions: [
                           TextButton(
                             onPressed: () => Navigator.pop(context, true), 

lib/history.dart

@@ -0,0 +1,13 @@
+
+import 'package:flutter_canvas_editor/widgets/elements.dart';
+
+enum CanvasHistoryModifyType { add, remove, move, resize, lock, rotate, textEdit, redo}
+
+class CanvasHistory {
+  final CanvasHistoryModifyType type;
+  List<ElementProperty> elementPropeties;
+
+  CanvasHistory(this.type, this.elementPropeties);
+
+  List<ElementProperty> get getState => elementPropeties;
+}

lib/main.dart

@@ -3,6 +3,7 @@ import 'dart:math';
 import 'package:defer_pointer/defer_pointer.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_canvas_editor/canvas_setup_page.dart';
+import 'package:flutter_canvas_editor/history.dart';
 import 'package:flutter_canvas_editor/providers/editor.dart';
 import 'package:flutter_canvas_editor/snaptest_page.dart';
 import 'package:flutter_canvas_editor/test_page.dart';
@@ -81,19 +82,6 @@ class _HomePageState extends State<HomePage> {
   // functions
   void setInitialZoom() {
     Provider.of<Editor>(context, listen: false).setCanvasTransformationInitialZoom(context);
-
-    // double deviceWidth = MediaQuery.of(context).size.width;
-    // double deviceHeight = MediaQuery.of(context).size.height;
-
-    // print('device width: $deviceWidth');
-    // print('device height: $deviceHeight');
-
-    // initialScale = deviceWidth / Provider.of<Editor>(context, listen: false).canvasProperty.width * 0.9;
-    
-    // print('initialScale $initialScale');
-
-    // _transformationController.value = Matrix4.identity()..scale(initialScale);
-    
   }
 
   void setTransformControllerListener() {
@@ -118,6 +106,19 @@ class _HomePageState extends State<HomePage> {
           title: Text('Template Editor'),
           actions: [
 
+            IconButton(
+              onPressed: Provider.of<Editor>(context, listen: false).undoStack.isEmpty ? null : () {
+                Provider.of<Editor>(context, listen: false).undo();
+              },
+              icon: Icon(Icons.undo)
+            ),
+            IconButton(
+              onPressed: Provider.of<Editor>(context, listen: false).redoStack.isEmpty ? null : () {
+                Provider.of<Editor>(context, listen: false).redo();
+              },
+              icon: Icon(Icons.redo)
+            ),
+
             // ! DEBUG BUTTON
             IconButton(
               onPressed: () {

lib/providers/editor.dart

@@ -3,10 +3,12 @@ import 'dart:developer';
 
 import 'package:defer_pointer/defer_pointer.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_canvas_editor/history.dart';
 import 'package:flutter_canvas_editor/style/canvas_style.dart';
 import 'package:flutter_canvas_editor/widgets/elements.dart';
 import 'package:toastification/toastification.dart';
 import 'package:uuid/uuid.dart';
+import 'package:collection/collection.dart';
 
 import '../main.dart';
 
@@ -65,12 +67,91 @@ class Editor extends ChangeNotifier {
       qrScale: 3
     )
   ];
-  // int _reservedIdUntil = 0;
+
+
+
+
+  // ? History stack
+  List<CanvasHistory> undoStack = [];
+  List<List<ElementProperty>> redoStack = [];
+
+
+  void addUndoEntry(CanvasHistoryModifyType canvasHistoryType, List<ElementProperty> elementProperties) {
+    undoStack.add(CanvasHistory(canvasHistoryType, _cloneCurrentState(elementProperties)));
+
+    redoStack.clear();
+
+    notifyListeners();
+  }
+
+  void undo() {
+    addRedoEntry(elementProperties);
+
+    // apply to current state
+    if (undoStack.last.type == CanvasHistoryModifyType.textEdit && undoStack.last.getState != elementProperties) {
+      undoStack.removeLast();
+    }
+
+    elementProperties = undoStack.last.getState;
+
+    // unselect element
+    if (elementProperties.firstWhereOrNull((e) => e.id == selectedElmId) == null) {
+      unSelectElm();
+    }
+
+    undoStack.removeLast();
+
+    notifyListeners();
+  }
+
+
+  void addRedoEntry(List<ElementProperty> elementProperties) {
+    redoStack.add(_cloneCurrentState(elementProperties));
+
+    notifyListeners();
+  }
+
+  void redo() {
+    undoStack.add(CanvasHistory(CanvasHistoryModifyType.redo, _cloneCurrentState(elementProperties)));
+     
+    // apply to current state
+    elementProperties = redoStack.last;
+
+    redoStack.removeLast();
+
+    notifyListeners();
+  }
+
+  List<ElementProperty> _cloneCurrentState(List<ElementProperty> elementProperties) {
+    List<ElementProperty> clonedElementProperties = elementProperties.map((elementProperty) {
+      return ElementProperty(
+        id: elementProperty.id,
+        valueController: TextEditingController(text: elementProperty.valueController.text),
+        type: elementProperty.type,
+        position: ElementPosition(top: elementProperty.position.top, left: elementProperty.position.left),
+        width: elementProperty.width,
+        quarterTurns: elementProperty.quarterTurns,
+        elementKey: elementProperty.elementKey,
+        qrScale: elementProperty.qrScale,
+        fontScale: elementProperty.fontScale,
+        variableType: elementProperty.variableType,
+        isLocked: elementProperty.isLocked
+      );
+    }).toList();
+
+    return clonedElementProperties;
+  }
+
+
+
 
   // ? udpate canvas
   void updateCanvasProperty(BuildContext context, double width, double height) {
     canvasProperty.height = height;
     canvasProperty.width = width;
+    
+    undoStack.clear();
+    redoStack.clear();
 
     _adjustOutOfBoundElement();
 
@@ -122,6 +203,10 @@ class Editor extends ChangeNotifier {
     );
 
 
+    // Save History
+    addUndoEntry(CanvasHistoryModifyType.add, elementProperties);
+
+
     elementProperties.add(element);
     // _reservedIdUntil = elementProperties.length - 1;r
     notifyListeners();
@@ -142,6 +227,9 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
+    // Save History
+    addUndoEntry(CanvasHistoryModifyType.add, elementProperties);
+
     elementProperties.add(element);
     notifyListeners();
 
@@ -164,6 +252,9 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
+    // Save History
+    addUndoEntry(CanvasHistoryModifyType.add, elementProperties);
+
     elementProperties.add(element);
     notifyListeners();
 
@@ -184,6 +275,9 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
+    // Save History
+    addUndoEntry(CanvasHistoryModifyType.add, elementProperties);
+
     elementProperties.add(element);
     notifyListeners();
 
@@ -204,6 +298,9 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
+    // Save History
+    addUndoEntry(CanvasHistoryModifyType.add, elementProperties);
+
     elementProperties.add(element);
     notifyListeners();
 
@@ -224,6 +321,9 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
+    // Save History
+    addUndoEntry(CanvasHistoryModifyType.add, elementProperties);
+
     elementProperties.add(element);
     notifyListeners();
 
@@ -244,6 +344,9 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
+    // Save History
+    addUndoEntry(CanvasHistoryModifyType.add, elementProperties);
+
     elementProperties.add(element);
     notifyListeners();
 
@@ -279,6 +382,9 @@ class Editor extends ChangeNotifier {
   void toggleLockElement() {
     if (selectedElm == null) return;
 
+    // ? Save History
+    addUndoEntry(CanvasHistoryModifyType.lock, elementProperties);
+
     selectedElm!.isLocked = !selectedElm!.isLocked;
     notifyListeners();
   }
@@ -417,7 +523,9 @@ class Editor extends ChangeNotifier {
     }
     
     if (![ElementType.text, ElementType.textbox].contains(element.type)) return;
-
+    
+    // ? Save history
+    addUndoEntry(CanvasHistoryModifyType.rotate, elementProperties);
 
     if (element.type == ElementType.text) _rotateText(element);
 
@@ -463,6 +571,9 @@ class Editor extends ChangeNotifier {
       return;
     }
 
+    // ? Save History
+    addUndoEntry(CanvasHistoryModifyType.resize, elementProperties);
+
     selectedElm!.fontScale = fontSize;
     notifyListeners();
   }
@@ -478,6 +589,9 @@ class Editor extends ChangeNotifier {
     }
     // check if value is allowed for resize
     if (CanvasStyle.fontSizeMap.containsKey(incrementTo)) {
+      // ? Save History
+      addUndoEntry(CanvasHistoryModifyType.resize, elementProperties);
+
       selectedElm!.fontScale = incrementTo;
       print('kepenjet increase');
     } else {
@@ -498,6 +612,9 @@ class Editor extends ChangeNotifier {
     }
     // check if value is allowed for resize
     if (CanvasStyle.fontSizeMap.containsKey(decrementTo)) {
+      // ? Save History
+      addUndoEntry(CanvasHistoryModifyType.resize, elementProperties);
+
       selectedElm!.fontScale = decrementTo;
     } else {
       print('cant decrement');
@@ -596,6 +713,9 @@ class Editor extends ChangeNotifier {
 
     if (!shouldDelete) return;
 
+    // ? Save History
+    addUndoEntry(CanvasHistoryModifyType.remove, elementProperties);
+
     elementProperties.removeWhere((e) => e.id == selectedElm!.id);
     unSelectElm();
 

lib/test.dart

@@ -0,0 +1,60 @@
+// void main() {
+//   List<ElementProperty>elementProperties = [
+//     ElementProperty(top: 0, left: 0)
+//   ];
+
+//   print('Original:');
+//   elementProperties[0].printAll();
+//   print('\n\n\n');
+
+
+//   List<List<ElementProperty>> undoStack = [];
+
+//   // Add to undoStack
+//   undoStack.add(cloneState(elementProperties));
+
+//   // State changes
+//   elementProperties.first.top = 10;
+
+//   print('Original:');
+//   elementProperties[0].printAll();
+//   print('UndoStack:');
+//   undoStack.first.first.printAll();
+
+//   // Add to undoStack
+//   undoStack.add(cloneState(elementProperties));
+
+//   // State changes
+//   elementProperties.first.top = 20;
+
+//   print('Original2:');
+//   elementProperties[0].printAll();
+//   print('UndoStack2:');
+//   undoStack.first.first.printAll();
+//   undoStack.last.first.printAll();
+// }
+
+// List<ElementProperty> cloneState(List<ElementProperty> elementProperties) {
+//   List<ElementProperty> clonedElementProperties = elementProperties.map((elementProperty) {
+//     return ElementProperty(
+//       top: elementProperty.top,
+//       left: elementProperty.left,
+//     );
+//   }).toList();
+
+//   return clonedElementProperties;
+// }
+
+// class ElementProperty {
+//   double top;
+//   double left;
+
+//   ElementProperty({
+//     required this.top,
+//     required this.left,
+//   });
+
+//   void printAll() {
+//     print('top: $top, left: $left');
+//   }
+// }

lib/text_debouncer_test.dart

@@ -0,0 +1,14 @@
+import 'package:easy_debounce/easy_throttle.dart';
+
+void main() {
+  EasyThrottle.throttle(
+    'my-debouncer', 
+    Duration(milliseconds: 1000), 
+    () => {
+      print('Executed !!!')
+    },
+    onAfter: () => {
+      print('After !!!')
+    }
+  );
+}

lib/widgets/elements.dart

@@ -1,6 +1,11 @@
+import 'dart:developer';
+
 import 'package:defer_pointer/defer_pointer.dart';
+import 'package:easy_debounce/easy_debounce.dart';
+import 'package:easy_debounce/easy_throttle.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_canvas_editor/history.dart';
 import 'package:flutter_canvas_editor/providers/editor.dart';
 import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
@@ -76,6 +81,7 @@ class ElementProperty {
   int fontScale;
   int? qrScale; 
   bool isLocked;
+  String? lastSavedText;
 
   ElementProperty({
     required this.id,
@@ -90,7 +96,8 @@ class ElementProperty {
     this.fontScale = 3,
     this.qrScale,
     this.isLocked = false,
-    this.variableType
+    this.variableType,
+    this.lastSavedText
   });
 
 }
@@ -126,6 +133,11 @@ class _ElementWidgetState extends State<ElementWidget> {
 
   late TransformationController _transformController;
 
+  // // TODO: pindhkan ke state element property agar bisa dipake di widget Toolbar
+  // String? _lastSavedText;
+
+  FocusNode? _focus = FocusNode();
+
   @override
   void initState() {
     super.initState();
@@ -136,6 +148,7 @@ class _ElementWidgetState extends State<ElementWidget> {
 
     _setInitialScale();
     _listenTransformationChanges();
+    _addFocusNodeListener();
   }
 
 
@@ -158,12 +171,33 @@ class _ElementWidgetState extends State<ElementWidget> {
     _transformController.removeListener(_updateScale);
   }
 
+  void _addFocusNodeListener() {
+    if ([ElementType.text, ElementType.textbox].contains(widget.elementProperty.type)) {
+      _focus!.addListener(_onTextFieldFocusChange);
+    }
+  }
+
+  void _onTextFieldFocusChange() {
+    if (widget.elementProperty.lastSavedText != widget.elementProperty.valueController.text) {
+      print('executed');
+      Provider.of<Editor>(context, listen: false).addUndoEntry(CanvasHistoryModifyType.textEdit, Provider.of<Editor>(context, listen:  false).elementProperties);
+      widget.elementProperty.lastSavedText = widget.elementProperty.valueController.text;
+    }
+  }
+
+  void _removeFocusNodeListener() {
+    if ([ElementType.text, ElementType.textbox].contains(widget.elementProperty.type)) {
+      _focus!.removeListener(_onTextFieldFocusChange);
+    }
+  }
+
 
 
 
   @override
   void dispose() {
    _removeTransformationListener();
+   _removeFocusNodeListener();
     super.dispose();
   }
 
@@ -179,6 +213,8 @@ class _ElementWidgetState extends State<ElementWidget> {
       _height = element.elementKey.currentContext!.size!.height;
     });
 
+    List<ElementProperty> currentCanvasState = editorProvider.elementProperties;
+
     return Positioned(
       top: element.position.top,
       left: element.position.left,
@@ -192,6 +228,11 @@ class _ElementWidgetState extends State<ElementWidget> {
           print('Element Gesture Detector Tapped!');
           Provider.of<Editor>(context, listen: false).selectElmById(element.id);
         },
+        onPanStart: (details) {
+          log('Pan Start');
+          inspect(editorProvider.elementProperties);
+          editorProvider.addUndoEntry(CanvasHistoryModifyType.move, editorProvider.elementProperties);
+        },
         onPanUpdate: (details) {
           if (!Provider.of<Editor>(context, listen: false).isSelected(element.id)) {
             return;
@@ -288,7 +329,10 @@ class _ElementWidgetState extends State<ElementWidget> {
             }
 
 
-          Provider.of<Editor>(context, listen: false).updateElmPosition(Offset(adjustedElementPosition.left - element.position.left, adjustedElementPosition.top - element.position.top));
+          Provider.of<Editor>(context, listen: false).updateElmPosition(
+            Offset(adjustedElementPosition.left - element.position.left, adjustedElementPosition.top - element.position.top),
+            // Provider.of<Editor>(context, listen: false).elementProperties
+          );
         },
         child: Stack(
           clipBehavior: Clip.none,
@@ -489,6 +533,7 @@ class _ElementWidgetState extends State<ElementWidget> {
     if (Provider.of<Editor>(context, listen: true).isEditing && (Provider.of<Editor>(context, listen: true).selectedElmId == element.id)) {
       return IntrinsicWidth(
         child: TextField(
+          focusNode: _focus,
           controller: Provider.of<Editor>(context).selectedElm!.valueController,
           autofocus: true,
           keyboardType: TextInputType.multiline,
@@ -501,11 +546,22 @@ class _ElementWidgetState extends State<ElementWidget> {
             contentPadding: EdgeInsets.zero,
             border: InputBorder.none,
           ),
-          onChanged: (_) {
-            setState(() {
-              
-            });
-          }
+          onChanged: (newText) {
+
+            if (widget.elementProperty.lastSavedText != null && newText != widget.elementProperty.lastSavedText) {
+              EasyDebounce.debounce(
+                'text-debounce${element.id}', 
+                const Duration(milliseconds: 500), 
+                () {
+                  Provider.of<Editor>(context, listen: false).addUndoEntry(CanvasHistoryModifyType.textEdit, Provider.of<Editor>(context, listen: false).elementProperties);
+                  widget.elementProperty.lastSavedText = newText;
+                }
+              );
+
+            }
+
+            setState(() {});
+          },
         ),
       );
     }

lib/widgets/toolbar.dart

@@ -1,4 +1,6 @@
+import 'package:easy_debounce/easy_debounce.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_canvas_editor/history.dart';
 import 'package:flutter_canvas_editor/providers/editor.dart';
 import 'package:flutter_canvas_editor/style/canvas_style.dart';
 import 'package:flutter_canvas_editor/widgets/elements.dart';
@@ -18,6 +20,10 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
 
   List<DropdownMenuItem<int>> qrSizeDropdownItems= [];
 
+  FocusNode? _focus = FocusNode();
+
+  // String? _lastSavedText;
+
 
   @override
   void initState() {
@@ -26,6 +32,10 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
 
     populateFontSizeDropdownItems();
     populateQrSizeDropdownItems();
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _addFocusNodeListener();
+    });
   }
 
   //functions
@@ -53,6 +63,37 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
     });
   }
 
+  void _addFocusNodeListener() {
+    if (Provider.of<Editor>(context, listen: false).selectedElmKey != null && [ElementType.text, ElementType.textbox].contains(Provider.of<Editor>(context, listen: false).selectedElm!.type)) {
+      _focus!.addListener(_onTextFieldFocusChange);
+    }
+  }
+
+  void _onTextFieldFocusChange() {
+    print('toolbar onfocus change');
+
+    if (Provider.of<Editor>(context, listen: false).selectedElm?.lastSavedText != Provider.of<Editor>(context, listen: false).selectedElm?.valueController.text) {
+      Provider.of<Editor>(context, listen: false).addUndoEntry(CanvasHistoryModifyType.textEdit, Provider.of<Editor>(context, listen: false).elementProperties);
+      Provider.of<Editor>(context, listen: false).selectedElm?.lastSavedText = Provider.of<Editor>(context, listen: false).selectedElm?.valueController.text;
+    }
+  }
+
+  void _removeFocusNodeListener() {
+    if ([ElementType.text, ElementType.textbox].contains(Provider.of<Editor>(context).selectedElm!.type)) {
+      _focus!.removeListener(_onTextFieldFocusChange);
+    }
+  }
+
+
+  @override
+  void dispose() {
+    // TODO: implement dispose
+
+    _removeFocusNodeListener();
+    super.dispose();
+  }
+
+
   @override
   Widget build(BuildContext context) {
     final editorProvider = Provider.of<Editor>(context);
@@ -155,6 +196,7 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
     return [
       // ? Value Editor
       if([ElementType.text, ElementType.textbox].contains(editorProvider.selectedElm!.type)) TextField(
+        focusNode: _focus,
         readOnly: element!.isLocked, 
         controller: element!.valueController,
         onTap: editorProvider.enableEdit,
@@ -165,10 +207,22 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
 
           print('kepenjet');
         },
-        onChanged: (value) {
-          setState(() {
-            
-          });
+        onChanged: (newText) {
+          if (element.lastSavedText != null && newText != element.lastSavedText) {
+            EasyDebounce.debounce(
+              'text-debounce-toolbar${element.id}',
+              const Duration(milliseconds: 500),
+              () {
+                editorProvider.addUndoEntry(CanvasHistoryModifyType.textEdit, editorProvider.elementProperties);
+                element.lastSavedText = newText;
+              },
+              
+            );
+
+          }
+
+
+          setState(() {});
         },
       ),
       

pubspec.lock

@@ -65,6 +65,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.0.2"
+  easy_debounce:
+    dependency: "direct main"
+    description:
+      name: easy_debounce
+      sha256: f082609cfb8f37defb9e37fc28bc978c6712dedf08d4c5a26f820fa10165a236
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.3"
   equatable:
     dependency: transitive
     description:

pubspec.yaml

@@ -37,6 +37,7 @@ dependencies:
   uuid: ^4.5.1
   toastification: ^2.3.0
   intl: ^0.20.2
+  easy_debounce: ^2.0.3
 
 dev_dependencies:
   flutter_lints: ^3.0.0