lib/canvas_setup_page.dart

@@ -51,23 +51,52 @@ class _CanvasSetupPageState extends State<CanvasSetupPage> {
 
               TextFormField(
                 controller: _widthController,
-                decoration: InputDecoration(labelText: 'Width'),
+                decoration: InputDecoration(labelText: 'Width (mm)'),
                 keyboardType: TextInputType.number,
                 validator: (value) {
                   if (value == null || value.isEmpty) {
                     return 'Please enter width';
                   }
+
+                  double? parsedValue = double.tryParse(value);
+
+                  if (parsedValue is! double) {
+                    return 'Not a valid input';
+                  }
+
+                  if (parsedValue < 30) {
+                    return 'Width should be >= 30';
+                  }
+
+                  if (parsedValue > 1000) {
+                    return 'Width should be > 1000';
+                  }
+
                   return null;
                 },
               ),
               TextFormField(
                 controller: _heightController,
-                decoration: InputDecoration(labelText: 'Height'),
+                decoration: InputDecoration(labelText: 'Height (mm)'),
                 keyboardType: TextInputType.number,
                 validator: (value) {
                   if (value == null || value.isEmpty) {
                     return 'Please enter height';
                   }
+
+                  double? parsedValue = double.tryParse(value);
+
+                  if (parsedValue is! double) {
+                    return 'Not a valid input';
+                  }
+
+                  if (parsedValue < 15) {
+                    return 'Width should be >= 15';
+                  }
+
+                  if (parsedValue > 1000) {
+                    return 'Width should be >= 1000';
+                  }
                   return null;
                 },
               ),
@@ -81,7 +110,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<ElementState> elementPropeties;
+
+  CanvasHistory(this.type, this.elementPropeties);
+
+  List<ElementState> 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).stateStack.length <= 1 ? 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: () {
@@ -164,7 +165,7 @@ class _HomePageState extends State<HomePage> {
                             width: Provider.of<Editor>(context).canvasProperty.width,
                             child: Stack(
                               children: [
-                                for (ElementProperty elementProperty in Provider.of<Editor>(context).elementProperties) ... [
+                                for (ElementState elementProperty in Provider.of<Editor>(context).currentElementsState) ... [
                                   ElementWidget(
                                     elementProperty: elementProperty,
                                     canvasProperty: Provider.of<Editor>(context).canvasProperty,

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';
 
@@ -21,6 +23,7 @@ class Editor extends ChangeNotifier {
 
   final textboxResizerDeferredPointerHandlerLink = DeferredPointerHandlerLink();
 
+  String? valueOnStartEditing;
 
 
   // ? Canvas State
@@ -53,24 +56,127 @@ class Editor extends ChangeNotifier {
 
 
 
-  List<ElementProperty> elementProperties = [
-    ElementProperty(
-      id: uuid.v4(), 
-      valueController: TextEditingController(text: '{{QRCODE}}'), 
-      type: ElementType.qr, 
-      position: ElementPosition(top: 0, left: 0), 
-      width: 80, 
-      quarterTurns: 0, 
-      elementKey: GlobalKey(),
-      qrScale: 3
-    )
+  // List<ElementProperty> elementProperties = [
+  //   ElementProperty(
+  //     id: uuid.v4(), 
+  //     valueController: TextEditingController(text: '{{QRCODE}}'), 
+  //     type: ElementType.qr, 
+  //     position: ElementPosition(top: 0, left: 0), 
+  //     width: 80, 
+  //     quarterTurns: 0, 
+  //     elementKey: GlobalKey(),
+  //     qrScale: 3
+  //   )
+  // ];
+
+  // This list store all changes history, and currentCanvasState (stackState.last)
+  List<List<ElementState>> stateStack = [
+    // ? default state
+    [
+      ElementState(
+        id: uuid.v4(), 
+        valueController: TextEditingController(text: '{{QRCODE}}'), 
+        type: ElementType.qr, 
+        position: ElementPosition(top: 0, left: 0), 
+        width: 80, 
+        quarterTurns: 0, 
+        elementKey: GlobalKey(),
+        qrScale: 3
+      )
+    ]
   ];
-  // int _reservedIdUntil = 0;
+
+  // current canvas state
+  List<ElementState> get currentElementsState => stateStack.last;
+
+
+
+
+  // ? History stack
+  // List<CanvasHistory> undoStack = [];
+  List<List<ElementState>> redoStack = [];
+
+
+  void setNewElementsState(List<ElementState> newElementsState) {
+    _setNewStateTextEdit(newElementsState);
+
+    stateStack.add(newElementsState);
+
+    redoStack.clear();
+
+    notifyListeners();
+  }
+
+  void undo() {
+    addRedoEntry(stateStack.last);
+
+    // apply to current state
+    // if (undoStack.last.type == CanvasHistoryModifyType.textEdit && undoStack.last.getState != elementProperties) {
+    //   undoStack.removeLast();
+    // }
+
+    // elementProperties = undoStack.last.getState;
+
+    stateStack.removeLast();
+
+    // unselect element
+    if (currentElementsState.firstWhereOrNull((e) => e.id == selectedElmId) == null) {
+      unSelectElm();
+    }
+
+    notifyListeners();
+  }
+
+
+  void addRedoEntry(List<ElementState> elementProperties) {
+    redoStack.add(_cloneElementsState(elementProperties));
+
+    notifyListeners();
+  }
+
+  void redo() {
+    // undoStack.add(CanvasHistory(CanvasHistoryModifyType.redo, _cloneCurrentState(elementProperties)));
+    stateStack.add(_cloneElementsState(redoStack.last));
+     
+    // apply to current state
+    // elementProperties = redoStack.last;
+
+    redoStack.removeLast();
+
+    notifyListeners();
+  }
+
+  List<ElementState> _cloneElementsState(List<ElementState> elementProperties) {
+    List<ElementState> clonedElementProperties = elementProperties.map((elementProperty) {
+      return ElementState(
+        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();
+    stateStack = [currentElementsState];
+    redoStack.clear();
 
     _adjustOutOfBoundElement();
 
@@ -80,7 +186,7 @@ class Editor extends ChangeNotifier {
   }
 
   void _adjustOutOfBoundElement() {
-    for (var element in elementProperties) {
+    for (var element in currentElementsState) {
       bool isOutOfBoundFromTop = (element.position.top + 10) > canvasProperty.height;
       bool isOutOfBoundFromLeft = (element.position.left + 10) > canvasProperty.width;
 
@@ -101,16 +207,16 @@ class Editor extends ChangeNotifier {
 
   }
 
-  void populateElement(List<ElementProperty> elementProperties) {
-    this.elementProperties.addAll(elementProperties);
-    // _reservedIdUntil = this.elementProperties.length - 1;
-    notifyListeners();
-  }
 
+
+
+
+
+  // ? Primitive Element
   void addTextElement(){
     String id = uuid.v4();
 
-    ElementProperty element = ElementProperty(
+    ElementState newElement = ElementState(
       id: id, 
       valueController: TextEditingController(text: 'Double tap to edit text'), 
       type: ElementType.text, 
@@ -122,17 +228,20 @@ class Editor extends ChangeNotifier {
     );
 
 
-    elementProperties.add(element);
-    // _reservedIdUntil = elementProperties.length - 1;r
-    notifyListeners();
+    // Set State
+    // List<ElementState> newElementsState = [..._cloneElementsState(currentElementsState), newElement];
+    // setNewElementsState(newElementsState);
+    _setAddNewElementState(newElement);
 
+
+    notifyListeners();
     selectElmById(id);
   } 
 
   void addTextboxElement() {
     String id = uuid.v4();
 
-    ElementProperty element = ElementProperty(
+    ElementState newElement = ElementState(
       id: id, 
       valueController: TextEditingController(text: 'Double tap to edit text'), 
       type: ElementType.textbox, 
@@ -142,18 +251,23 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
-    elementProperties.add(element);
-    notifyListeners();
 
+    // Set State
+    _setAddNewElementState(newElement);
+
+    notifyListeners();
     selectElmById(id);
   }
 
-  // ? Variable Element
 
+
+
+
+  // ? Variable Element
   void addProductNameElement() {
     String id = uuid.v4();
 
-    ElementProperty element = ElementProperty(
+    ElementState newElement = ElementState(
       id: id, 
       valueController: TextEditingController(text: '{{PRODUCTNAME}}'), 
       type: ElementType.textbox,
@@ -164,16 +278,17 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
-    elementProperties.add(element);
-    notifyListeners();
+    // Set State
+    _setAddNewElementState(newElement);
 
+    notifyListeners();
     selectElmById(id);
   }
 
   void addVariantNameElement() {
     String id = uuid.v4();
 
-    ElementProperty element = ElementProperty(
+    ElementState newElement = ElementState(
       id: id, 
       valueController: TextEditingController(text: '{{VARIANTNAME}}'), 
       type: ElementType.textbox,
@@ -184,16 +299,17 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
-    elementProperties.add(element);
-    notifyListeners();
+    // Set State
+    _setAddNewElementState(newElement);
 
+    notifyListeners();
     selectElmById(id);
   }
 
   void addProductionCodeElement() {
     String id = uuid.v4();
 
-    ElementProperty element = ElementProperty(
+    ElementState newElement = ElementState(
       id: id, 
       valueController: TextEditingController(text: '{{PRODUCTIONCODE}}'), 
       type: ElementType.textbox,
@@ -204,16 +320,17 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
-    elementProperties.add(element);
-    notifyListeners();
+    // Set State
+    _setAddNewElementState(newElement);
 
+    notifyListeners();
     selectElmById(id);
   }
 
   void addProductionDateElement() {
     String id = uuid.v4();
 
-    ElementProperty element = ElementProperty(
+    ElementState newElement = ElementState(
       id: id, 
       valueController: TextEditingController(text: '{{PRODUCTIONDATE}}'), 
       type: ElementType.text,
@@ -224,16 +341,17 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
-    elementProperties.add(element);
-    notifyListeners();
+    // Save History
+    _setAddNewElementState(newElement);
 
+    notifyListeners();
     selectElmById(id);
   }
 
   void addSerialNumberElement() {
     String id = uuid.v4();
 
-    ElementProperty element = ElementProperty(
+    ElementState newElement = ElementState(
       id: id, 
       valueController: TextEditingController(text: '{{SERIALNUMBER}}'), 
       type: ElementType.text,
@@ -244,18 +362,19 @@ class Editor extends ChangeNotifier {
       elementKey: GlobalKey()
     );
 
-    elementProperties.add(element);
-    notifyListeners();
+    // Set State
+    _setAddNewElementState(newElement);
 
+    notifyListeners();
     selectElmById(id);
   }
-  
+
 
 
 
 
   void updateElmPosition(Offset offset) {
-    ElementProperty? element = selectedElm;
+    ElementState? element = selectedElm;
 
     if (element == null) return;
 
@@ -266,8 +385,42 @@ class Editor extends ChangeNotifier {
     notifyListeners();
   }
 
+  // Reset position after drag end
+  void resetElmPosition(ElementPosition? elementPosition) {
+    ElementState? element = selectedElm;
+
+    if (element == null) return;
+
+    if (elementPosition == null) return;
+
+    element.position = elementPosition;
+  }
+
+  void moveElement(Offset offset) {
+    log('[MOVING ELEMENT]');
+    ElementState? element = selectedElm;
+
+    if (element == null) return;
+
+    List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+    var newElement = newElementsState.firstWhere((e) => e.id == selectedElmId);
+
+    newElement.position.top += offset.dy.round();
+    newElement.position.left += offset.dx.round();
+
+    setNewElementsState(newElementsState);
+  }
+
+  ElementPosition getClonedElementPosition(ElementState element) {
+    return ElementPosition(
+      top: element.position.top, 
+      left: element.position.left
+    );
+  }
+
+
   void updateElmWitdh(double width) {
-    ElementProperty? element = selectedElm;
+    ElementState? element = selectedElm;
 
     if (element == null) return;
 
@@ -276,16 +429,51 @@ class Editor extends ChangeNotifier {
     notifyListeners();
   }
 
+  void commitTextboxResize(double width, double textboxDragStartWidth) {
+    if (selectedElm == null) return;
+
+    List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+    var newElement = newElementsState.firstWhere((e) => e.id == selectedElmId);
+
+    newElement.width = width;
+
+    // reset previous element
+    _resetPreviousTextboxWidth(selectedElm!, textboxDragStartWidth);
+
+    setNewElementsState(newElementsState);
+  }
+
+  void _resetPreviousTextboxWidth(ElementState previousElement, double textboxDragStartWidth) {
+    if (selectedElm == null) return;
+
+    previousElement.width = textboxDragStartWidth;
+  }
+
   void toggleLockElement() {
     if (selectedElm == null) return;
 
-    selectedElm!.isLocked = !selectedElm!.isLocked;
+    List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+    var selectedNewElement = newElementsState.firstWhere((e) => e.id == selectedElm!.id);
+    
+    selectedNewElement.isLocked = !selectedNewElement.isLocked;
+
+    setNewElementsState(newElementsState);
+
+    // selectedElm!.isLocked = !selectedElm!.isLocked;
     notifyListeners();
   }
 
+  bool shouldIgnoreTouch(String elementId) {
+    if (elementId == selectedElmId) return false;
+
+    if (selectedElmId == null) return false;
+
+    return true;
+  }
 
   void selectElmById(String id) {
     selectedElmId = id;
+    valueOnStartEditing = currentElementsState.firstWhere((e) => e.id == selectedElmId).valueController.text;
     notifyListeners();
   }
 
@@ -309,6 +497,7 @@ class Editor extends ChangeNotifier {
   void unSelectElm() {
     selectedElmId = null;
     isEditing = false;
+    valueOnStartEditing = null;
     notifyListeners();
   }
 
@@ -318,25 +507,25 @@ class Editor extends ChangeNotifier {
 
   // ? Getters
   String get selectedElmType {
-    if (elementProperties.isNotEmpty && selectedElmId != null) {
-      final selectedElm = elementProperties.firstWhere((element) => element.id == selectedElmId);
+    if (currentElementsState.isNotEmpty && selectedElmId != null) {
+      final selectedElm = currentElementsState.firstWhere((element) => element.id == selectedElmId);
       return elementGetter(selectedElm.type);
     }
 
     return '';
   }
 
-  ElementProperty? get selectedElm {
-    if (elementProperties.isNotEmpty && selectedElmId != null) {
-      return elementProperties.firstWhere((element) => element.id == selectedElmId);
+  ElementState? get selectedElm {
+    if (currentElementsState.isNotEmpty && selectedElmId != null) {
+      return currentElementsState.firstWhereOrNull((element) => element.id == selectedElmId);
     }
 
     return null;
   }
 
   GlobalKey? get selectedElmKey {
-    if (elementProperties.isNotEmpty && selectedElmId != null) {
-      return elementProperties.firstWhere((element) => element.id == selectedElmId).elementKey;
+    if (currentElementsState.isNotEmpty && selectedElmId != null) {
+      return currentElementsState.firstWhere((element) => element.id == selectedElmId).elementKey;
     }
 
     return null;
@@ -407,21 +596,25 @@ class Editor extends ChangeNotifier {
 
   /// Can only rotate [ElementType.text, ElementType.textBox]
   void rotate() {
-    ElementProperty? element = selectedElm;
-
-    if (element == null) return;
+    if (selectedElm == null) return;
 
-    if (element.isLocked) {
+    if (selectedElm!.isLocked) {
       _showLockedToast('Cant rotate locked element');
       return;
     }
     
-    if (![ElementType.text, ElementType.textbox].contains(element.type)) return;
+    if (![ElementType.text, ElementType.textbox].contains(selectedElm!.type)) return;
+    
+    List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+    var newElement = newElementsState.firstWhere((e) => e.id == selectedElmId);
+
 
+    if (newElement.type == ElementType.text) _rotateText(newElement);
 
-    if (element.type == ElementType.text) _rotateText(element);
+    if (newElement.type == ElementType.textbox) _rotateTextBox(newElement);
 
-    if (element.type == ElementType.textbox) _rotateTextBox(element);
+
+    setNewElementsState(newElementsState);
 
 
     // Adjust Size
@@ -436,22 +629,26 @@ class Editor extends ChangeNotifier {
 
   }
 
-  void _rotateText(ElementProperty element) {
-    if (element.quarterTurns < 3) {
-      element.quarterTurns += 1;
-    } else {
-      element.quarterTurns = 0;
-    }
+  
+
+
+  void editText(TextEditingController controller) {
+    if (selectedElm == null) return;
+
+    List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+    var newElement = newElementsState.firstWhere((e) => e.id == selectedElmId);
+
+    newElement.valueController.text = controller.text;
+    // newElement.valueController.selection = TextSelection.collapsed(offset: controller.selection.base.offset);
+    
+    setNewElementsState(newElementsState);
   }
 
-  void _rotateTextBox(ElementProperty element) {
-    if (element.quarterTurns == 0) {
-      element.quarterTurns = 3;
-    } else {
-      element.quarterTurns = 0;
-    }
+  void setValueOnStartEditing(String text) {
+    valueOnStartEditing = text;
   }
 
+
   // FontSize Handler
   void changeFontSize(int? fontSize) {
     if (fontSize == null) return;
@@ -463,7 +660,13 @@ class Editor extends ChangeNotifier {
       return;
     }
 
-    selectedElm!.fontScale = fontSize;
+    List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+    var newElement = newElementsState.firstWhere((e) => e.id == selectedElmId);
+
+    newElement.fontScale = fontSize;
+
+    setNewElementsState(newElementsState);
+
     notifyListeners();
   }
   
@@ -478,7 +681,16 @@ class Editor extends ChangeNotifier {
     }
     // check if value is allowed for resize
     if (CanvasStyle.fontSizeMap.containsKey(incrementTo)) {
-      selectedElm!.fontScale = incrementTo;
+      // // ? Save History
+      // setNewElementsState(CanvasHistoryModifyType.resize, elementProperties);
+
+      List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+      var newElement = newElementsState.firstWhere((e) => e.id == selectedElmId);
+
+      // selectedElm!.fontScale = incrementTo;
+      newElement.fontScale = incrementTo;
+
+      setNewElementsState(newElementsState);
       print('kepenjet increase');
     } else {
       print('cant increment');
@@ -498,12 +710,15 @@ class Editor extends ChangeNotifier {
     }
     // check if value is allowed for resize
     if (CanvasStyle.fontSizeMap.containsKey(decrementTo)) {
-      selectedElm!.fontScale = decrementTo;
+      List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+      var newElement = newElementsState.firstWhere((e) => e.id == selectedElmId);
+
+      newElement.fontScale = decrementTo;
+
+      setNewElementsState(newElementsState);
     } else {
       print('cant decrement');
     }
-
-    notifyListeners();
   }
 
   // Qr Size Handler
@@ -517,8 +732,13 @@ class Editor extends ChangeNotifier {
       return;
     }
 
-    selectedElm!.qrScale = fontSize;
-    notifyListeners();
+    List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+    var newElement = newElementsState.firstWhere((e) => e.id == selectedElmId);
+
+    // selectedElm!.qrScale = fontSize;
+    newElement.qrScale = fontSize;
+
+    setNewElementsState(newElementsState);
   }
   
   void incrementQrSize() {
@@ -534,12 +754,17 @@ class Editor extends ChangeNotifier {
     }
     // check if value is allowed for resize
     if (CanvasStyle.qrSizeMap.containsKey(incrementTo)) {
-      selectedElm!.qrScale = incrementTo;
+      List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+      var newElement = newElementsState.firstWhere((e) => e.id == selectedElmId);
+
+      // selectedElm!.qrScale = incrementTo;
+      newElement.qrScale = incrementTo;
+
+      setNewElementsState(newElementsState);
     } else {
       print('cant increment');
     }
 
-    notifyListeners();
   }
 
   void decrementQrSize() {
@@ -557,7 +782,13 @@ class Editor extends ChangeNotifier {
 
     // check if value is allowed for resize
     if (CanvasStyle.qrSizeMap.containsKey(decrementTo)) {
-      selectedElm!.qrScale = decrementTo;
+      List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+      var newElement = newElementsState.firstWhere((e) => e.id == selectedElmId);
+
+      // selectedElm!.qrScale = decrementTo;
+      newElement.qrScale = decrementTo;
+
+      setNewElementsState(newElementsState);
     } else {
       print('cant decrement');
     }
@@ -596,9 +827,22 @@ class Editor extends ChangeNotifier {
 
     if (!shouldDelete) return;
 
-    elementProperties.removeWhere((e) => e.id == selectedElm!.id);
-    unSelectElm();
+    // // ? Save History
+    // setNewElementsState(CanvasHistoryModifyType.remove, elementProperties);
+
+    // elementProperties.removeWhere((e) => e.id == selectedElm!.id);
 
+    List<ElementState> newElementsState = _cloneElementsState(currentElementsState);
+    log('selectedElmId: ${selectedElm!.id}');
+
+    for (var i = 0; i < newElementsState.length; i++) {
+      log('element[$i]: ${newElementsState[i].id}');
+    }
+    newElementsState.removeWhere((e) => e.id == selectedElm!.id);
+
+    setNewElementsState(newElementsState);
+    
+    unSelectElm();
     notifyListeners();
   }
 
@@ -610,22 +854,6 @@ class Editor extends ChangeNotifier {
   //   }
   // }
 
-  // ? helper method
-  void _showLockedToast(String titleText) {
-    toastification.show(
-      title: Text(titleText),
-      description: Text('unlock to change element property'),
-      closeButtonShowType: CloseButtonShowType.none,
-      style: ToastificationStyle.minimal,
-      type: ToastificationType.warning,
-      autoCloseDuration: const Duration(seconds: 3),
-      alignment: Alignment.bottomCenter,
-      dragToClose: true
-    );
-  }
-
-
-
 
   // ? Template to JSON
   String buildJSON() {
@@ -642,9 +870,9 @@ class Editor extends ChangeNotifier {
       }
     };
 
-    for (var element in elementProperties) {
+    for (var element in currentElementsState) {
       var elementMap = {
-        'id': uuid.v4(),
+        'id': element.id,
         'content': element.valueController.text,
         'height': element.elementKey.currentContext?.size?.height.round() ?? 0,
         'width': element.elementKey.currentContext?.size?.width.round() ?? 0,
@@ -673,7 +901,7 @@ class Editor extends ChangeNotifier {
   }
 
 
-  String _getElementTypeResult(ElementProperty element) {
+  String _getElementTypeResult(ElementState element) {
     switch (element.type) {
       case ElementType.text:
         return 'text';
@@ -699,11 +927,68 @@ class Editor extends ChangeNotifier {
     }
   }
 
-  int _getElementSizeResult(ElementProperty element) {
+  int _getElementSizeResult(ElementState element) {
     if (element.type == ElementType.qr) {
       return element.qrScale ?? 1;
     }
 
     return element.fontScale;
   }
-}
+
+
+
+
+
+
+  // ? Helper Method
+
+  void _setAddNewElementState(ElementState newElement) {
+    List<ElementState> newElementsState = [..._cloneElementsState(currentElementsState), newElement];
+    setNewElementsState(newElementsState);
+  }
+
+  void _rotateText(ElementState element) {
+    if (element.quarterTurns < 3) {
+      element.quarterTurns += 1;
+    } else {
+      element.quarterTurns = 0;
+    }
+  }
+
+  void _rotateTextBox(ElementState element) {
+    if (element.quarterTurns == 0) {
+      element.quarterTurns = 3;
+    } else {
+      element.quarterTurns = 0;
+    }
+  }
+
+
+  void _showLockedToast(String titleText) {
+    toastification.show(
+      title: Text(titleText),
+      description: Text('unlock to change element property'),
+      closeButtonShowType: CloseButtonShowType.none,
+      style: ToastificationStyle.minimal,
+      type: ToastificationType.warning,
+      autoCloseDuration: const Duration(seconds: 3),
+      alignment: Alignment.bottomCenter,
+      dragToClose: true
+    );
+  }
+
+  void _setNewStateTextEdit(List<ElementState> newElementsState) {
+    log(selectedElm?.id ?? 'null');
+    if (selectedElm == null) return;
+    
+    
+    var newElement = newElementsState.firstWhereOrNull((e) => e.id == selectedElmId);
+
+    if (newElement != null && [ElementType.text, ElementType.textbox].contains(newElement.type)) {
+      newElement.valueController.selection = TextSelection.collapsed(offset: selectedElm!.valueController.selection.base.offset);
+    }
+  }
+}
+
+
+enum SetActionType { add, remove, move, resize, lock, rotate, textEdit, redo }

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/utils/debouncer.dart

@@ -0,0 +1,32 @@
+import 'dart:async';
+
+class Debouncer {
+  static Timer? _timer;
+
+  static void run(void Function() callback, [Duration duration = const Duration(milliseconds: 500)]) {
+    if (_timer?.isActive ?? false) {
+      _timer!.cancel();
+    
+    }
+
+    _timer = Timer(duration, callback);
+  }
+}
+
+
+void main() {
+  // Debouncer debouncer = Debouncer(Duration(seconds: 5));
+  print('program running');
+
+
+  // debouncer.run(() {
+  //   print('Terdebounce');
+  // });
+
+  
+
+  Debouncer.run(
+    () => print('terdebounce'),
+    Duration(seconds: 5)
+  );
+}

lib/widgets/elements.dart

@@ -1,7 +1,13 @@
+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:flutter_canvas_editor/utils/debouncer.dart';
 import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
 import 'dart:math' as math;
@@ -62,7 +68,7 @@ class ElementSize {
   ElementSize({required this.width, required this.height});
 }
 
-class ElementProperty {
+class ElementState {
   String id;
   TextEditingController valueController;
   ElementType type;
@@ -76,8 +82,9 @@ class ElementProperty {
   int fontScale;
   int? qrScale; 
   bool isLocked;
+  String? lastSavedText;
 
-  ElementProperty({
+  ElementState({
     required this.id,
     required this.valueController,
     required this.type,
@@ -90,7 +97,8 @@ class ElementProperty {
     this.fontScale = 3,
     this.qrScale,
     this.isLocked = false,
-    this.variableType
+    this.variableType,
+    this.lastSavedText
   });
 
 }
@@ -98,7 +106,7 @@ class ElementProperty {
 
 
 class ElementWidget extends StatefulWidget {
-  final ElementProperty elementProperty;
+  final ElementState elementProperty;
   final CanvasProperty canvasProperty;
   final GlobalKey globalKey;
   
@@ -114,7 +122,11 @@ class ElementWidget extends StatefulWidget {
 }
 
 class _ElementWidgetState extends State<ElementWidget> {
-  Offset? _dragStartPosition;
+  Offset? _textboxDragStartPosition;
+  double? _textboxDragStartWidth;
+
+  ElementPosition? _elementDragStartPosition;
+  // String? _valueOnStartEditing;
 
   // dragable container 
   final double _resizerHeight = 36;
@@ -125,17 +137,27 @@ class _ElementWidgetState extends State<ElementWidget> {
   double _currentScale = 1.0;
 
   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();
     
+    // _valueOnStartEditing = widget.elementProperty.valueController.text;
+
     WidgetsBinding.instance.addPostFrameCallback((_) => _updateScale);
 
     _transformController = Provider.of<Editor>(context, listen: false).canvasTransformationController;
 
     _setInitialScale();
     _listenTransformationChanges();
+    _addFocusNodeListener();
+
+    widget.elementProperty.valueController.addListener(() {});
   }
 
 
@@ -158,12 +180,35 @@ 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).setNewElementsState(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();
   }
 
@@ -172,314 +217,352 @@ class _ElementWidgetState extends State<ElementWidget> {
   Widget build(BuildContext context) {
     final editorProvider = Provider.of<Editor>(context);
 
-    ElementProperty element = widget.elementProperty;
+    ElementState element = widget.elementProperty;
     final CanvasProperty canvas = widget.canvasProperty;
 
     WidgetsBinding.instance.addPostFrameCallback((_) {
       _height = element.elementKey.currentContext!.size!.height;
     });
 
+    // List<ElementState> currentCanvasState = editorProvider.elementProperties;
+
     return Positioned(
       top: element.position.top,
       left: element.position.left,
-      child: GestureDetector(
-        onDoubleTap: () {
-          print('double tap detected');
-          Provider.of<Editor>(context, listen: false).selectElmById(element.id);
-          Provider.of<Editor>(context, listen: false).enableEdit();
-        },
-        onTap: () {
-          print('Element Gesture Detector Tapped!');
-          Provider.of<Editor>(context, listen: false).selectElmById(element.id);
-        },
-        onPanUpdate: (details) {
-          if (!Provider.of<Editor>(context, listen: false).isSelected(element.id)) {
-            return;
-          }
-
-          if (element.isLocked) return;
-    
-          final elmKeyContext = Provider.of<Editor>(context, listen: false).selectedElmKey?.currentContext;
-    
-          if (elmKeyContext == null) {
-            debugPrint('WARNING, elmKeyContext not found');
-          }
-    
-          bool isElmRotatedVertically = [1,3].contains(element.quarterTurns);
-    
-          double width = isElmRotatedVertically ? elmKeyContext!.size!.height : elmKeyContext!.size!.width;
-          double height = isElmRotatedVertically ? elmKeyContext.size!.width : elmKeyContext.size!.height;
-    
-          double right = element.position.left + width;
-          double bottom = element.position.top + height;
-          
-    
-          bool isElmWidthExceedCanvas = width > canvas.width; 
-          bool isElmHeightExceedCanvas = height > canvas.height;
-      
-          // Check if the object is out of the canvas
-          if (element.position.top < 0) {
-            setState(() {
-              element.position.top = 0;
-            });
-      
-            print('object is out of canvas');
-            return;
-          }
-      
-          if (element.position.left < 0) {
-            setState(() {
-              element.position.left = 0;
-            });
-      
-            print('object is out of canvas');
-            return;
-          }
-    
-          if (!isElmHeightExceedCanvas && bottom > canvas.height) {
-            setState(() {
-              element.position.top = (canvas.height - height).roundToDouble() - 1;
-            });
-      
-            print('object is out of canvas');
-            return;
-          }
-      
-      
-          if (!isElmWidthExceedCanvas && right > canvas.width) {
-            setState(() {
-              element.position.left = (canvas.width - width).roundToDouble() - 1;
-            });
-      
-            print('object is out of canvas');
-            return;
-          }
-      
-          Provider.of<Editor>(context, listen: false).updateElmPosition(details.delta);
-        },
-        onPanEnd: (details) {
-          // ? Adjust overflow position
-          ElementPosition adjustedElementPosition = element.position;
-          final elmKeyContext = element.elementKey.currentContext;
-
-          bool isElmRotatedVertically = [1,3].contains(element.quarterTurns);
-    
-          double width = isElmRotatedVertically ? elmKeyContext!.size!.height : elmKeyContext!.size!.width;
-          double height = isElmRotatedVertically ? elmKeyContext.size!.width : elmKeyContext.size!.height;
-    
-          double right = element.position.left + width;
-          double bottom = element.position.top + height;
-
-
-          if (element.position.top < 0) {
-              adjustedElementPosition.top = 0;
-          }
-
-          if (element.position.left < 0) {
-              adjustedElementPosition.left = 0;
-          }
-
-          if ((element.position.top + height) > canvas.height) {
-              adjustedElementPosition.top = (canvas.height - height).roundToDouble() - 1;
-          }
-
-          if ((element.position.left + width) > canvas.width) {
-              adjustedElementPosition.left = (canvas.width - width).roundToDouble() - 1;
+      child: IgnorePointer(
+        ignoring: editorProvider.shouldIgnoreTouch(element.id),
+        child: GestureDetector(
+          onDoubleTap: () {
+            print('double tap detected');
+            Provider.of<Editor>(context, listen: false).selectElmById(element.id);
+            Provider.of<Editor>(context, listen: false).enableEdit();
+          },
+          onTap: () {
+            print('Element Gesture Detector Tapped!');
+            Provider.of<Editor>(context, listen: false).selectElmById(element.id);
+          },
+          onPanStart: (details) {
+            if (!Provider.of<Editor>(context, listen: false).isSelected(element.id)) {
+              return;
             }
-
-
-          Provider.of<Editor>(context, listen: false).updateElmPosition(Offset(adjustedElementPosition.left - element.position.left, adjustedElementPosition.top - element.position.top));
-        },
-        child: Stack(
-          clipBehavior: Clip.none,
-          children: [
-            RotatedBox(
-              // angle: element.quarterTurns * (math.pi / 2),
-              quarterTurns: element.quarterTurns,
-              child: Stack(
-                clipBehavior: Clip.none,
-                children: [
-                  Container(
-                    width: element.type == ElementType.text 
-                      ? null 
+        
+            if (element.isLocked) return;
+        
+            log('Pan Start');
+            // inspect(editorProvider.elementProperties);
+            // editorProvider.setNewElementsState(CanvasHistoryModifyType.move, editorProvider.elementProperties);
+        
+            _elementDragStartPosition = Provider.of<Editor>(context, listen: false).getClonedElementPosition(element);
+          },
+          onPanUpdate: (details) {
+            if (!Provider.of<Editor>(context, listen: false).isSelected(element.id)) {
+              return;
+            }
+        
+            if (element.isLocked) return;
             
-                      : element.type == ElementType.qr 
-                      ? CanvasStyle.getQrSize(element.qrScale!)
+            final elmKeyContext = Provider.of<Editor>(context, listen: false).selectedElmKey?.currentContext;
             
-                      : element.width ,
-                    height: element.type == ElementType.qr 
-                      ? CanvasStyle.getQrSize(element.qrScale!)
-                      : null,
-                    // child: Text('Top: ${element.position.top}, Left: ${element.position.left}, isSelected: ${Provider.of<Editor>(context, listen: false).isSelected(element.id)}'),
-                    key: widget.globalKey,
-                    decoration: BoxDecoration(
-                      // color: element.color ?? Colors.blue,
-                      border: Provider.of<Editor>(context, listen: true).isSelected(element.id) ? Border.all(
-                        color:Colors.red,
-                        width: 2,
-                        strokeAlign: BorderSide.strokeAlignOutside,
-                      ) : null,
-                    ),
-                    // ? child element
-                    child: _buildChildElement(element),
-                  ),
+            if (elmKeyContext == null) {
+              debugPrint('WARNING, elmKeyContext not found');
+            }
             
-                  // ? Textbox Resizer
-                  if (editorProvider.shouldShowTextboxResizer(element.id)) Positioned(
-                    right: _resizerWidth / -2,
-                    top:_height / 2 - (_resizerHeight / 2),
-                    child: DeferPointer(
-                      link: editorProvider.textboxResizerDeferredPointerHandlerLink,
-                      // paintOnTop: true,
-                      child: Transform.scale(
-                        scale: 1 / _currentScale,
-                        child: Listener(
-                          onPointerDown: (details) {
-                            _dragStartPosition = details.position;
-                          },
-                          onPointerMove: (details) {
-                            if (element.isLocked) return;
-                        
-                            setState(() {
-                              final selectedElm = Provider.of<Editor>(context, listen: false).selectedElm;
-                        
-                              if (selectedElm == null) return;
-                        
-                        
-                              final elmKeyContext = selectedElm.elementKey.currentContext;
-                        
-                              double width = elmKeyContext!.size!.width;
-                        
-                              print(MediaQuery.of(context).devicePixelRatio);
-                                    
-                                    
-                              var delta;
-                              double canvasWidth = 1.0;
-                                    
-                              print (_dragStartPosition!.dx);
-                              print (_dragStartPosition!.dy);
-                                    
-                              // adjust width based on rotation
-                              print('quarter turn: ${element.quarterTurns}');
-                              switch(element.quarterTurns) {
-                                case 0:
-                                  delta = details.position.dx - _dragStartPosition!.dx;
-                                  canvasWidth = Provider.of<Editor>(context, listen: false).canvasProperty.width;
-                                case 3:
-                                  delta = _dragStartPosition!.dy - details.position.dy;
-                                  element.position.top -= delta / _currentScale;
-                                  canvasWidth = Provider.of<Editor>(context, listen: false).canvasProperty.height;
-                              }
-                              
-                              element.width += delta / _currentScale; // Adjust width
-                              print('current scale $_currentScale');
-                        
-                              // Enforce minimum size
-                              element.width = element.width.clamp(75.0, canvasWidth);
-                               
-                              _dragStartPosition = details.position;
-                              if (width <= 0) return;
-                        
-                              Provider.of<Editor>(context, listen: false).updateElmWitdh(element.width);
-                            });
-                          },
-                          onPointerUp: (details) {
-                            _dragStartPosition = null;
-                          },
-                          child: Container(
-                            decoration: BoxDecoration(
-                              shape: BoxShape.circle,
-                              color: Colors.blue.withOpacity(0.7),
-                            ),
-                            width: _resizerWidth,
-                            height: _resizerHeight,
-                            child: const RotatedBox(
-                              quarterTurns: 1,
-                              child: Icon(
-                                Icons.height,
-                                size: 24,
-                                color: Colors.white,
+            bool isElmRotatedVertically = [1,3].contains(element.quarterTurns);
+            
+            double width = isElmRotatedVertically ? elmKeyContext!.size!.height : elmKeyContext!.size!.width;
+            double height = isElmRotatedVertically ? elmKeyContext.size!.width : elmKeyContext.size!.height;
+            
+            double right = element.position.left + width;
+            double bottom = element.position.top + height;
+            
+            
+            bool isElmWidthExceedCanvas = width > canvas.width; 
+            bool isElmHeightExceedCanvas = height > canvas.height;
+        
+            // Check if the object is out of the canvas
+            if (element.position.top < 0) {
+              setState(() {
+                element.position.top = 0;
+              });
+        
+              print('object is out of canvas');
+              return;
+            }
+        
+            if (element.position.left < 0) {
+              setState(() {
+                element.position.left = 0;
+              });
+        
+              print('object is out of canvas');
+              return;
+            }
+            
+            if (!isElmHeightExceedCanvas && bottom > canvas.height) {
+              setState(() {
+                element.position.top = (canvas.height - height).roundToDouble() - 1;
+              });
+        
+              print('object is out of canvas');
+              return;
+            }
+        
+        
+            if (!isElmWidthExceedCanvas && right > canvas.width) {
+              setState(() {
+                element.position.left = (canvas.width - width).roundToDouble() - 1;
+              });
+        
+              print('object is out of canvas');
+              return;
+            }
+        
+            Provider.of<Editor>(context, listen: false).updateElmPosition(details.delta);
+          },
+          onPanEnd: (details) {
+            if (!Provider.of<Editor>(context, listen: false).isSelected(element.id)) {
+              return;
+            }
+        
+            if (element.isLocked) return;
+            
+        
+            // ? Adjust overflow position
+            ElementPosition adjustedElementPosition = element.position;
+            final elmKeyContext = element.elementKey.currentContext;
+        
+            bool isElmRotatedVertically = [1,3].contains(element.quarterTurns);
+            
+            double width = isElmRotatedVertically ? elmKeyContext!.size!.height : elmKeyContext!.size!.width;
+            double height = isElmRotatedVertically ? elmKeyContext.size!.width : elmKeyContext.size!.height;
+            
+            double right = element.position.left + width;
+            double bottom = element.position.top + height;
+        
+        
+            if (element.position.top < 0) {
+                adjustedElementPosition.top = 0;
+            }
+        
+            if (element.position.left < 0) {
+                adjustedElementPosition.left = 0;
+            }
+        
+            if ((element.position.top + height) > canvas.height) {
+                adjustedElementPosition.top = (canvas.height - height).roundToDouble() - 1;
+            }
+        
+            if ((element.position.left + width) > canvas.width) {
+                adjustedElementPosition.left = (canvas.width - width).roundToDouble() - 1;
+              }
+        
+        
+            // 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
+            // );
+        
+            Provider.of<Editor>(context, listen: false).resetElmPosition(_elementDragStartPosition);
+        
+            Provider.of<Editor>(context, listen: false).moveElement(
+              Offset(adjustedElementPosition.left - element.position.left, adjustedElementPosition.top - element.position.top)
+            );
+          },
+          child: Stack(
+            clipBehavior: Clip.none,
+            children: [
+              RotatedBox(
+                // angle: element.quarterTurns * (math.pi / 2),
+                quarterTurns: element.quarterTurns,
+                child: Stack(
+                  clipBehavior: Clip.none,
+                  children: [
+                    Container(
+                      width: element.type == ElementType.text 
+                        ? null 
+              
+                        : element.type == ElementType.qr 
+                        ? CanvasStyle.getQrSize(element.qrScale!)
+              
+                        : element.width ,
+                      height: element.type == ElementType.qr 
+                        ? CanvasStyle.getQrSize(element.qrScale!)
+                        : null,
+                      // child: Text('Top: ${element.position.top}, Left: ${element.position.left}, isSelected: ${Provider.of<Editor>(context, listen: false).isSelected(element.id)}'),
+                      key: widget.globalKey,
+                      decoration: BoxDecoration(
+                        // color: element.color ?? Colors.blue,
+                        border: Provider.of<Editor>(context, listen: true).isSelected(element.id) ? Border.all(
+                          color:Colors.red,
+                          width: 2,
+                          strokeAlign: BorderSide.strokeAlignOutside,
+                        ) : null,
+                      ),
+                      // ? child element
+                      child: _buildChildElement(element),
+                    ),
+              
+                    // ? Textbox Resizer
+                    if (editorProvider.shouldShowTextboxResizer(element.id)) Positioned(
+                      right: _resizerWidth / -2,
+                      top:_height / 2 - (_resizerHeight / 2),
+                      child: DeferPointer(
+                        link: editorProvider.textboxResizerDeferredPointerHandlerLink,
+                        // paintOnTop: true,
+                        child: Transform.scale(
+                          scale: 1 / _currentScale,
+                          child: Listener(
+                            onPointerDown: (details) {
+                              _textboxDragStartPosition = details.position;
+                              _textboxDragStartWidth = element.width;
+                            },
+                            onPointerMove: (details) {
+                              if (element.isLocked) return;
+                          
+                              setState(() {
+                                final selectedElm = Provider.of<Editor>(context, listen: false).selectedElm;
+                          
+                                if (selectedElm == null) return;
+                          
+                          
+                                final elmKeyContext = selectedElm.elementKey.currentContext;
+                          
+                                double width = elmKeyContext!.size!.width;
+                          
+                                print(MediaQuery.of(context).devicePixelRatio);
+                                      
+                                      
+                                var delta;
+                                double canvasWidth = 1.0;
+                                      
+                                print (_textboxDragStartPosition!.dx);
+                                print (_textboxDragStartPosition!.dy);
+                                      
+                                // adjust width based on rotation
+                                print('quarter turn: ${element.quarterTurns}');
+                                switch(element.quarterTurns) {
+                                  case 0:
+                                    delta = details.position.dx - _textboxDragStartPosition!.dx;
+                                    canvasWidth = Provider.of<Editor>(context, listen: false).canvasProperty.width;
+                                  case 3:
+                                    delta = _textboxDragStartPosition!.dy - details.position.dy;
+                                    element.position.top -= delta / _currentScale;
+                                    canvasWidth = Provider.of<Editor>(context, listen: false).canvasProperty.height;
+                                }
+                                
+                                element.width += delta / _currentScale; // Adjust width
+                                print('current scale $_currentScale');
+                          
+                                // Enforce minimum size
+                                element.width = element.width.clamp(75.0, canvasWidth);
+                                 
+                                _textboxDragStartPosition = details.position;
+                                if (width <= 0) return;
+                          
+                                Provider.of<Editor>(context, listen: false).updateElmWitdh(element.width);
+                              });
+                            },
+                            onPointerUp: (details) {
+                              editorProvider.commitTextboxResize(element.width, _textboxDragStartWidth ?? 70);
+        
+                              _textboxDragStartPosition = null;
+                              _textboxDragStartWidth = null;
+                            },
+                            child: Container(
+                              decoration: BoxDecoration(
+                                shape: BoxShape.circle,
+                                color: Colors.blue.withOpacity(0.7),
+                              ),
+                              width: _resizerWidth,
+                              height: _resizerHeight,
+                              child: const RotatedBox(
+                                quarterTurns: 1,
+                                child: Icon(
+                                  Icons.height,
+                                  size: 24,
+                                  color: Colors.white,
+                                ),
                               ),
                             ),
                           ),
                         ),
                       ),
                     ),
-                  ),
-            
-            
-                  
-            
-            
-            
-                  // if (Provider.of<Editor>(context).selectedElmId == element.id && element.type != ElementType.qr) ... [
-                    
+              
+              
                     
-                  // ]
-                ],
+              
+              
+              
+                    // if (Provider.of<Editor>(context).selectedElmId == element.id && element.type != ElementType.qr) ... [
+                      
+                      
+                    // ]
+                  ],
+                ),
               ),
-            ),
-
-            //? Overlay Button
-            if (editorProvider.shouldShowOverlay(element.id)) Positioned(
-              top: -60 / _currentScale,
-              left: 0,
-              child: DeferPointer(
-                paintOnTop: true,
-                child: Transform.scale(
-                  scale: 1 / _currentScale,
-                  alignment: Alignment.topLeft,
-                  child: Row(
-                    children: [
-                      IconButton.filled(
-                        onPressed: () {
-                          print('delete overlay tapped');
-                          editorProvider.deleteElement(context);
-                        }, 
-                        icon: const Icon(Icons.delete),
-                        color: Theme.of(context).colorScheme.error,
-                        style: ButtonStyle(
-                          backgroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.errorContainer)
+        
+              //? Overlay Button
+              if (editorProvider.shouldShowOverlay(element.id)) Positioned(
+                top: -60 / _currentScale,
+                left: 0,
+                child: DeferPointer(
+                  paintOnTop: true,
+                  child: Transform.scale(
+                    scale: 1 / _currentScale,
+                    alignment: Alignment.topLeft,
+                    child: Row(
+                      children: [
+                        IconButton.filled(
+                          onPressed: () {
+                            print('delete overlay tapped');
+                            editorProvider.deleteElement(context);
+                          }, 
+                          icon: const Icon(Icons.delete),
+                          color: Theme.of(context).colorScheme.error,
+                          style: ButtonStyle(
+                            backgroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.errorContainer)
+                          ),
                         ),
-                      ),
-                      IconButton.filled(
-                        onPressed: () {
-                          print('rotate overlay tapped');
-                          editorProvider.rotate();
-                  
-                          // test
-                          var getBox = element.elementKey.currentContext!.findRenderObject();
-                        }, 
-                        icon: const Icon(Icons.rotate_90_degrees_cw),
-                        // color: Theme.of(context).colorScheme.error,
-                        style: const ButtonStyle(
-                          // backgroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.errorContainer)
+                        IconButton.filled(
+                          onPressed: () {
+                            print('rotate overlay tapped');
+                            editorProvider.rotate();
+                    
+                            // test
+                            var getBox = element.elementKey.currentContext!.findRenderObject();
+                          }, 
+                          icon: const Icon(Icons.rotate_90_degrees_cw),
+                          // color: Theme.of(context).colorScheme.error,
+                          style: const ButtonStyle(
+                            // backgroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.errorContainer)
+                          ),
                         ),
-                      ),
-                      IconButton.filled(
-                        onPressed: () {
-                          print('lock overlay tapped');
-                          editorProvider.toggleLockElement();
-                        }, 
-                        icon: Icon(element.isLocked ? Icons.lock_outline : Icons.lock_open),
-                        // color: element.isLocked ? Theme.of(context).colorScheme.error,
-                        style: ButtonStyle(
-                          backgroundColor: element.isLocked ? WidgetStatePropertyAll(Theme.of(context).colorScheme.error) : null
+                        IconButton.filled(
+                          onPressed: () {
+                            print('lock overlay tapped');
+                            editorProvider.toggleLockElement();
+                          }, 
+                          icon: Icon(element.isLocked ? Icons.lock_outline : Icons.lock_open),
+                          // color: element.isLocked ? Theme.of(context).colorScheme.error,
+                          style: ButtonStyle(
+                            backgroundColor: element.isLocked ? WidgetStatePropertyAll(Theme.of(context).colorScheme.error) : null
+                          ),
                         ),
-                      ),
-                    ],
+                      ],
+                    ),
                   ),
-                ),
+                )
               )
-            )
-          ],
+            ],
+          ),
         ),
       ),
     );
   }
 
 
-  Widget _buildChildElement(ElementProperty element) {
+  Widget _buildChildElement(ElementState element) {
     // ? build QR element
     if (element.type == ElementType.qr) {
       return const Image(image: AssetImage('asset/images/qr_template.png'));
@@ -489,7 +572,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(
-          controller: Provider.of<Editor>(context).selectedElm!.valueController,
+          controller: element.valueController,
           autofocus: true,
           keyboardType: TextInputType.multiline,
           enableSuggestions: false,
@@ -501,11 +584,19 @@ class _ElementWidgetState extends State<ElementWidget> {
             contentPadding: EdgeInsets.zero,
             border: InputBorder.none,
           ),
-          onChanged: (_) {
-            setState(() {
-              
+          onChanged: (newText) {
+
+            Debouncer.run(() {
+              log('[SAVING TO HISTORY]');
+              Provider.of<Editor>(context, listen: false).editText(element.valueController);
+              element.valueController.text = Provider.of<Editor>(context, listen: false).valueOnStartEditing ?? '';
+
+              Provider.of<Editor>(context, listen: false).setValueOnStartEditing(newText);
             });
-          }
+
+
+            setState(() {});
+          },
         ),
       );
     }

lib/widgets/toolbar.dart

@@ -1,6 +1,11 @@
+import 'dart:developer';
+
+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/utils/debouncer.dart';
 import 'package:flutter_canvas_editor/widgets/elements.dart';
 import 'package:provider/provider.dart';
 
@@ -14,18 +19,139 @@ class ToolbarWidget extends StatefulWidget {
 }
 
 class _ToolbarWidgetState extends State<ToolbarWidget> {
+  
+
+  FocusNode? _focus = FocusNode();
+
+  // String? _lastSavedText;
+
+
+  
+
+  // 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).setNewElementsState(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);
+
+    return Container(
+      padding: EdgeInsets.symmetric(horizontal: 16),
+      color: Colors.white,
+      width: MediaQuery.of(context).size.width,
+      height: 150,
+      child: Provider.of<Editor>(context).insertElementMode ? insertElementSection() : ToolbarPropertiesWidget(editorProvider: editorProvider),
+      // child: ListView(
+      //   children: Provider.of<Editor>(context).insertElementMode ? insertElementSection() : elementPropertiesSection(editorProvider),
+      // ),
+    );
+  }
+
+  Widget insertElementSection() {
+    return ListView(
+      children: [
+        Text('Insert Element'),
+        SizedBox(height: 20),
+        ElevatedButton(
+          onPressed: Provider.of<Editor>(context, listen: false).addTextElement, 
+          child: Text('Add Text Element')
+        ),
+        ElevatedButton(
+          onPressed: Provider.of<Editor>(context, listen: false).addTextboxElement, 
+          child: Text('Add Textbox Element')
+        ),
+        SizedBox(height: 24),
+
+
+        // ? Variable Element Section
+        Text('Insert Variable Element'),
+        SizedBox(height: 24),
+
+
+        ElevatedButton(
+          onPressed: Provider.of<Editor>(context, listen: false).addProductNameElement, 
+          child: Text('Add Product Name Element')
+        ),
+        ElevatedButton(
+          onPressed: Provider.of<Editor>(context, listen: false).addVariantNameElement, 
+          child: Text('Add Variant Name Element')
+        ),
+        ElevatedButton(
+          onPressed: Provider.of<Editor>(context, listen: false).addProductionCodeElement, 
+          child: Text('Add Production Code Element')
+        ),
+        ElevatedButton(
+          onPressed: Provider.of<Editor>(context, listen: false).addProductionDateElement, 
+          child: Text('Add Production Date Element')
+        ),
+        ElevatedButton(
+          onPressed: Provider.of<Editor>(context, listen: false).addSerialNumberElement, 
+          child: Text('Add Serial Number Element')
+        ),
+      ]
+    );
+  }
+
+  
+}
+
+
+
+class ToolbarPropertiesWidget extends StatefulWidget {
+  final Editor editorProvider;
+
+  const ToolbarPropertiesWidget({super.key, required this.editorProvider});
+
+  @override
+  State<ToolbarPropertiesWidget> createState() => _ToolbarPropertiesWidgetState();
+}
+
+class _ToolbarPropertiesWidgetState extends State<ToolbarPropertiesWidget> {
   List<DropdownMenuItem<int>> fontSizeDropdownItems= [];
 
   List<DropdownMenuItem<int>> qrSizeDropdownItems= [];
 
+  // String? _valueOnStartEditing;
 
   @override
   void initState() {
-    // TODO: implement initState
     super.initState();
 
+    // _valueOnStartEditing = widget.editorProvider.selectedElm?.valueController.text; 
+
     populateFontSizeDropdownItems();
     populateQrSizeDropdownItems();
+
+    log('[TOOLBAR PROPERTIES EXECUTED]');
+
   }
 
   //functions
@@ -53,64 +179,14 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
     });
   }
 
+
   @override
   Widget build(BuildContext context) {
-    final editorProvider = Provider.of<Editor>(context);
-
-    return Container(
-      padding: EdgeInsets.symmetric(horizontal: 16),
-      color: Colors.white,
-      width: MediaQuery.of(context).size.width,
-      height: 150,
-      child: ListView(
-        children: Provider.of<Editor>(context).insertElementMode ? insertElementSection() : elementPropertiesSection(editorProvider),
-      ),
+    return ListView(
+      children: elementPropertiesSection(widget.editorProvider),
     );
   }
 
-  List<Widget> insertElementSection() {
-    return [
-      Text('Insert Element'),
-      SizedBox(height: 20),
-      ElevatedButton(
-        onPressed: Provider.of<Editor>(context, listen: false).addTextElement, 
-        child: Text('Add Text Element')
-      ),
-      ElevatedButton(
-        onPressed: Provider.of<Editor>(context, listen: false).addTextboxElement, 
-        child: Text('Add Textbox Element')
-      ),
-      SizedBox(height: 24),
-
-
-      // ? Variable Element Section
-      Text('Insert Variable Element'),
-      SizedBox(height: 24),
-
-
-      ElevatedButton(
-        onPressed: Provider.of<Editor>(context, listen: false).addProductNameElement, 
-        child: Text('Add Product Name Element')
-      ),
-      ElevatedButton(
-        onPressed: Provider.of<Editor>(context, listen: false).addVariantNameElement, 
-        child: Text('Add Variant Name Element')
-      ),
-      ElevatedButton(
-        onPressed: Provider.of<Editor>(context, listen: false).addProductionCodeElement, 
-        child: Text('Add Production Code Element')
-      ),
-      ElevatedButton(
-        onPressed: Provider.of<Editor>(context, listen: false).addProductionDateElement, 
-        child: Text('Add Production Date Element')
-      ),
-      ElevatedButton(
-        onPressed: Provider.of<Editor>(context, listen: false).addSerialNumberElement, 
-        child: Text('Add Serial Number Element')
-      ),
-    ];
-  }
-
   List<Widget> elementPropertiesSection(Editor editorProvider) {
     final element = Provider.of<Editor>(context).selectedElm;
 
@@ -130,7 +206,7 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
   }
 
 
-  List<Widget> _variablePropertiesSection(Editor editorProvider, ElementProperty? element) {
+  List<Widget> _variablePropertiesSection(Editor editorProvider, ElementState? element) {
     return [
       Container(
         margin: EdgeInsets.only(bottom: 16),
@@ -151,24 +227,32 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
     ];
   }
 
-  List<Widget> _commonPropertiesSection(Editor editorProvider, ElementProperty? element) {
+  List<Widget> _commonPropertiesSection(Editor editorProvider, ElementState? element) {
+
     return [
       // ? Value Editor
       if([ElementType.text, ElementType.textbox].contains(editorProvider.selectedElm!.type)) TextField(
         readOnly: element!.isLocked, 
         controller: element!.valueController,
         onTap: editorProvider.enableEdit,
-        onEditingComplete: () {
-          FocusManager.instance.primaryFocus?.unfocus();
+        // onEditingComplete: () {
+        //   FocusManager.instance.primaryFocus?.unfocus();
 
-          editorProvider.disableEdit();
+        //   editorProvider.disableEdit();
 
-          print('kepenjet');
-        },
-        onChanged: (value) {
-          setState(() {
-            
+        //   print('kepenjet');
+        // },
+        onChanged: (newText) {
+          Debouncer.run(() {
+            log('[SAVING TO HISTORY]');
+            Provider.of<Editor>(context, listen: false).editText(element.valueController);
+            element.valueController.text = widget.editorProvider.valueOnStartEditing ?? '';
+
+            widget.editorProvider.setValueOnStartEditing(newText);
           });
+
+
+          setState(() {});
         },
       ),
       
@@ -189,7 +273,7 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
   }
 
 
-  Widget _buildFontResizerWidget(ElementProperty? element) {
+  Widget _buildFontResizerWidget(ElementState? element) {
     return Row(
       children: [
         DropdownButton<int>(
@@ -212,7 +296,7 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
     );
   }
 
-  Widget _buildQrResizerWidget(ElementProperty? element) {
+  Widget _buildQrResizerWidget(ElementState? element) {
     return  Row(
       children: [
         DropdownButton<int>(

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