feat: template to json

lib/canvas_setup_page.dart

@@ -18,8 +18,8 @@ class _CanvasSetupPageState extends State<CanvasSetupPage> {
     super.initState();
     final editorProvider = Provider.of<Editor>(context, listen: false);
 
-    _widthController.text = editorProvider.canvasProperty.width.toString();
-    _heightController.text = editorProvider.canvasProperty.height.toString();
+    _widthController.text = (editorProvider.canvasProperty.width / 10).toString();
+    _heightController.text = (editorProvider.canvasProperty.height / 10).toString();
 
   }
 
@@ -100,8 +100,8 @@ class _CanvasSetupPageState extends State<CanvasSetupPage> {
                     // Process data
                     editorProvider.updateCanvasProperty(
                       context,
-                      double.parse(_widthController.text) , 
-                      double.parse(_heightController.text)
+                      double.parse(_widthController.text) * 10 , 
+                      double.parse(_heightController.text) * 10
                     ); 
                     Navigator.pop(context);
                   }

lib/main.dart

@@ -117,6 +117,15 @@ class _HomePageState extends State<HomePage> {
         appBar: AppBar(
           title: Text('Template Editor'),
           actions: [
+
+            // ! DEBUG BUTTON
+            IconButton(
+              onPressed: () {
+                Provider.of<Editor>(context, listen: false).buildJSON();
+              }, 
+              icon: Icon(Icons.bug_report_outlined)
+            ),
+
             IconButton(
               onPressed: () {
                 Navigator.push(

lib/providers/editor.dart

@@ -1,3 +1,4 @@
+import 'dart:convert';
 import 'dart:developer';
 
 import 'package:defer_pointer/defer_pointer.dart';
@@ -12,6 +13,8 @@ import '../main.dart';
 var uuid = Uuid();
 
 class Editor extends ChangeNotifier {
+  String editorVersion  = '0.1m';
+
   String? selectedElmId;
   
   bool isEditing = false;
@@ -620,4 +623,87 @@ class Editor extends ChangeNotifier {
       dragToClose: true
     );
   }
+
+
+
+
+  // ? Template to JSON
+  String buildJSON() {
+
+    var elementsMap = [];
+
+    var canvasResultMap = {
+      'title': 'Test',
+      'width': (canvasProperty.width / 10).round(),
+      'height': (canvasProperty.height / 10).round(),
+      'content': {
+        'version': editorVersion,
+        'elements': []
+      }
+    };
+
+    for (var element in elementProperties) {
+      var elementMap = {
+        'id': uuid.v4(),
+        'content': element.valueController.text,
+        'height': element.elementKey.currentContext?.size?.height.round() ?? 0,
+        'width': element.elementKey.currentContext?.size?.width.round() ?? 0,
+        'position': {
+          'top': element.position.top.round(),
+          'left': element.position.left.round()
+        },
+        'size': _getElementSizeResult(element),
+        'rotation': _getElementRotationResult(element.quarterTurns),
+        'type': _getElementTypeResult(element)
+      };
+
+      elementsMap.add(elementMap);
+    }
+
+    
+    (canvasResultMap['content'] as Map<String, dynamic>)['elements'] = elementsMap;
+
+
+    final templateJsonResult = jsonEncode(canvasResultMap);
+
+    print(templateJsonResult);
+    log(templateJsonResult);
+    
+    return templateJsonResult;
+  }
+
+
+  String _getElementTypeResult(ElementProperty element) {
+    switch (element.type) {
+      case ElementType.text:
+        return 'text';
+      case ElementType.textbox:
+        return 'textbox';
+      case ElementType.qr:
+        return 'qrcode';
+      default:
+        return '';
+    }
+  }
+
+  int _getElementRotationResult(int quarterTurns) {
+    switch (quarterTurns) {
+      case 1:
+        return 90;
+      case 2:
+        return 180;
+      case 3:
+        return -90;
+      default:
+        return 0;
+    }
+  }
+
+  int _getElementSizeResult(ElementProperty element) {
+    if (element.type == ElementType.qr) {
+      return element.qrScale ?? 1;
+    }
+
+    return element.fontScale;
+  }
 }

lib/widgets/elements.dart

@@ -238,7 +238,7 @@ class _ElementWidgetState extends State<ElementWidget> {
     
           if (!isElmHeightExceedCanvas && bottom > canvas.height) {
             setState(() {
-              element.position.top = canvas.height - height;
+              element.position.top = (canvas.height - height).roundToDouble() - 1;
             });
       
             print('object is out of canvas');
@@ -248,7 +248,7 @@ class _ElementWidgetState extends State<ElementWidget> {
       
           if (!isElmWidthExceedCanvas && right > canvas.width) {
             setState(() {
-              element.position.left = canvas.width - width;
+              element.position.left = (canvas.width - width).roundToDouble() - 1;
             });
       
             print('object is out of canvas');
@@ -257,6 +257,39 @@ class _ElementWidgetState extends State<ElementWidget> {
       
           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;
+            }
+
+
+          Provider.of<Editor>(context, listen: false).updateElmPosition(Offset(adjustedElementPosition.left - element.position.left, adjustedElementPosition.top - element.position.top));
+        },
         child: Stack(
           clipBehavior: Clip.none,
           children: [

lib/widgets/toolbar.dart

@@ -140,9 +140,14 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
           'This is a variable element, the value shown in editor is a placeholder. The actual value will be generated when printing the label.',
         )
       ),
+      _buildElementRotatorButton(),
 
       // ? Font Resizer
-      _buildFontResizer(element)
+      _buildFontResizerWidget(element),
+
+      _buildElementPositionLockerButton(),
+
+      _buildElementRemoverButton()
     ];
   }
 
@@ -167,67 +172,24 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
         },
       ),
       
-      if (editorProvider.selectedElm!.type != ElementType.qr) ElevatedButton(
-        onPressed: Provider.of<Editor>(context).rotate, 
-        child: Text('Rotate')
-      ),
+      if (editorProvider.selectedElm!.type != ElementType.qr) _buildElementRotatorButton(),
 
       // ? Font Resizer (Only show when selected element is [ElementType.text, ElementType.textbox])
-      if (Provider.of<Editor>(context).shouldShowFontResizer) _buildFontResizer(element),
+      if (Provider.of<Editor>(context).shouldShowFontResizer) _buildFontResizerWidget(element),
 
       // ? Qr Resizer (Only show when selected element is ElementType.qr)
-      if (Provider.of<Editor>(context).shouldShowQrResizer) Row(
-        children: [
-          DropdownButton<int>(
-            value: element?.qrScale,
-            items: qrSizeDropdownItems, 
-            onChanged: (val) {
-              print('dropdown value: $val');
-              Provider.of<Editor>(context, listen: false).changeQrSize(val);
-            }
-          ),
-          IconButton.filled(
-            onPressed: Provider.of<Editor>(context, listen: false).incrementQrSize, 
-            icon: Icon(Icons.add)
-          ),
-          IconButton.filled(
-            onPressed:  Provider.of<Editor>(context, listen: false).decrementQrSize,
-            icon: Icon(Icons.remove)
-          ),
-        ],
-      ),
+      if (Provider.of<Editor>(context).shouldShowQrResizer) _buildQrResizerWidget(element),
 
       // ? Lock Element
-      ElevatedButton(
-        style: ButtonStyle(
-          // backgroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.errorContainer)
-        ),
-        onPressed: () async {
-          Provider.of<Editor>(context, listen: false).toggleLockElement();
-          FocusScope.of(context).unfocus();
-        },
-        child: Text(
-          Provider.of<Editor>(context).selectedElm!.isLocked ? 'Unlock Element' : 'Lock Element',
-          // style: TextStyle(color: Theme.of(context).colorScheme.error),
-        )
-      ),
+      _buildElementPositionLockerButton(),
 
       // ? Delete elm button (only show when type is not ElementType.qr)
-      if (Provider.of<Editor>(context).shouldShowDeleteElementButton) ElevatedButton(
-        style: ButtonStyle(
-          backgroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.errorContainer)
-        ),
-        onPressed: () async => Provider.of<Editor>(context, listen: false).deleteElement(context), 
-        child: Text(
-          'Delete Element',
-          style: TextStyle(color: Theme.of(context).colorScheme.error),
-        )
-      ),
+      if (Provider.of<Editor>(context).shouldShowDeleteElementButton) _buildElementRemoverButton()
     ];
   }
 
 
-  Widget _buildFontResizer(ElementProperty? element) {
+  Widget _buildFontResizerWidget(ElementProperty? element) {
     return Row(
       children: [
         DropdownButton<int>(
@@ -249,4 +211,59 @@ class _ToolbarWidgetState extends State<ToolbarWidget> {
       ],
     );
   }
+
+  Widget _buildQrResizerWidget(ElementProperty? element) {
+    return  Row(
+      children: [
+        DropdownButton<int>(
+          value: element?.qrScale,
+          items: qrSizeDropdownItems, 
+          onChanged: (val) {
+            print('dropdown value: $val');
+            Provider.of<Editor>(context, listen: false).changeQrSize(val);
+          }
+        ),
+        IconButton.filled(
+          onPressed: Provider.of<Editor>(context, listen: false).incrementQrSize, 
+          icon: Icon(Icons.add)
+        ),
+        IconButton.filled(
+          onPressed:  Provider.of<Editor>(context, listen: false).decrementQrSize,
+          icon: Icon(Icons.remove)
+        ),
+      ],
+    );
+  }
+
+  Widget _buildElementRotatorButton() {
+    return ElevatedButton(
+      onPressed: Provider.of<Editor>(context).rotate, 
+      child: Text('Rotate')
+    );
+  }
+
+  Widget _buildElementRemoverButton() {
+    return ElevatedButton(
+      style: ButtonStyle(
+        backgroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.errorContainer)
+      ),
+      onPressed: () async => Provider.of<Editor>(context, listen: false).deleteElement(context), 
+      child: Text(
+        'Delete Element',
+        style: TextStyle(color: Theme.of(context).colorScheme.error),
+      )
+    );
+  }
+
+  Widget _buildElementPositionLockerButton() {
+    return ElevatedButton(
+      onPressed: () async {
+        Provider.of<Editor>(context, listen: false).toggleLockElement();
+        FocusScope.of(context).unfocus();
+      },
+      child: Text(
+        Provider.of<Editor>(context).selectedElm!.isLocked ? 'Unlock Element' : 'Lock Element',
+      )
+    );
+  }
 }