feat: editor element alignment guide, magnet

ios/Runner/AppDelegate.swift

@@ -1,7 +1,7 @@
 import UIKit
 import Flutter
 
-@UIApplicationMain
+@main
 @objc class AppDelegate: FlutterAppDelegate {
   override func application(
     _ application: UIApplication,

lib/main.dart

@@ -158,21 +158,31 @@ class _HomePageState extends State<HomePage> {
                       constrained: false,
                       child: DeferredPointerHandler(
                         child: Center(
-                          child: Container(
-                            margin: EdgeInsets.all(16),
-                            color: Colors.white,
-                            height: Provider.of<Editor>(context).canvasProperty.height,
-                            width: Provider.of<Editor>(context).canvasProperty.width,
-                            child: Stack(
-                              children: [
-                                for (ElementState elementProperty in Provider.of<Editor>(context).currentElementsState) ... [
-                                  ElementWidget(
-                                    elementProperty: elementProperty,
-                                    canvasProperty: Provider.of<Editor>(context).canvasProperty,
-                                    globalKey: elementProperty.elementKey,
-                                  )
-                                ]
-                              ],
+                          child: Padding(
+                            padding: const EdgeInsets.all(16),
+                            child: CustomPaint(
+                              size: Size(Provider.of<Editor>(context).canvasProperty.width, Provider.of<Editor>(context).canvasProperty.height),
+                              foregroundPainter: CanvasAlignmentHelper(
+                                showHorizontalCenterLine: Provider.of<Editor>(context).shouldShowHorizontalCenterLine, 
+                                showVerticalCenterLine: Provider.of<Editor>(context).shouldShowVerticalCenterLine
+                              ),
+                              child: Container(
+                                // margin: EdgeInsets.all(16),
+                                color: Colors.white,
+                                height: Provider.of<Editor>(context).canvasProperty.height,
+                                width: Provider.of<Editor>(context).canvasProperty.width,
+                                child: Stack(
+                                  children: [
+                                    for (ElementState elementProperty in Provider.of<Editor>(context).currentElementsState) ... [
+                                      ElementWidget(
+                                        elementProperty: elementProperty,
+                                        canvasProperty: Provider.of<Editor>(context).canvasProperty,
+                                        globalKey: elementProperty.elementKey,
+                                      )
+                                    ]
+                                  ],
+                                ),
+                              ),
                             ),
                           ),
                         ),
@@ -217,4 +227,47 @@ class CanvasProperty {
     required this.width,
     required this.height,
   });
+
+  Offset getCanvasCenterPoint() {
+    return Offset(width / 2, height / 2);
+  }
+}
+
+
+class CanvasAlignmentHelper extends CustomPainter {
+  CanvasAlignmentHelper({required  this.showHorizontalCenterLine, required this.showVerticalCenterLine});
+
+  bool showHorizontalCenterLine;
+  bool showVerticalCenterLine;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    // ? horizontal center line
+    if (showHorizontalCenterLine) {
+      canvas.drawLine(
+        Offset(size.width / 2, 0),
+        Offset(size.width / 2, size.height),
+        Paint()
+          ..color = Colors.orange
+          ..strokeWidth = 1.5
+      );
+    }
+
+    // ? vertial center line
+    if (showVerticalCenterLine) {
+      canvas.drawLine(
+        Offset(0, size.height / 2),
+        Offset(size.width, size.height / 2),
+        Paint()
+          ..color = Colors.orange
+          ..strokeWidth = 1.5
+      );
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return true;
+  }
+
 }

lib/providers/editor.dart

@@ -373,15 +373,26 @@ class Editor extends ChangeNotifier {
 
 
 
-  void updateElmPosition(Offset offset) {
+  void updateElmPosition(Offset offset, {double? fixedTop, double? fixedLeft}) {
     ElementState? element = selectedElm;
 
     if (element == null) return;
 
     // element.position = ElementPosition(top: offset.dy, left: offset.dx);
     print(offset.dx);
-    element.position.top += offset.dy.round();
-    element.position.left += offset.dx.round();
+    if (fixedTop != null) {
+      element.position.top = fixedTop;
+    } else {
+      element.position.top += offset.dy.round();
+    }
+
+    if (fixedLeft != null) {
+      print('fixed left: $fixedLeft');
+      element.position.left = fixedLeft;
+    } else {
+      element.position.left += offset.dx.round();
+    }
+    
     notifyListeners();
   }
 
@@ -988,6 +999,22 @@ class Editor extends ChangeNotifier {
       newElement.valueController.selection = TextSelection.collapsed(offset: selectedElm!.valueController.selection.base.offset);
     }
   }
+
+
+  // canvas alignment line helper
+  bool shouldShowHorizontalCenterLine = false;
+
+  void updateShouldShowHorizontalCenterLine(bool value) {
+    shouldShowHorizontalCenterLine = value;
+    notifyListeners();
+  }
+
+  bool shouldShowVerticalCenterLine = false;
+
+  void updateShouldShowVerticalCenterLine(bool value) {
+    shouldShowVerticalCenterLine = value;
+    notifyListeners();
+  }
 }
 
 

lib/widgets/elements.dart

@@ -255,12 +255,15 @@ class _ElementWidgetState extends State<ElementWidget> {
             _elementDragStartPosition = Provider.of<Editor>(context, listen: false).getClonedElementPosition(element);
           },
           onPanUpdate: (details) {
+            // return if moved element is not selected
             if (!Provider.of<Editor>(context, listen: false).isSelected(element.id)) {
               return;
             }
-        
+
+            // return if element is locked
             if (element.isLocked) return;
             
+
             final elmKeyContext = Provider.of<Editor>(context, listen: false).selectedElmKey?.currentContext;
             
             if (elmKeyContext == null) {
@@ -278,7 +281,42 @@ class _ElementWidgetState extends State<ElementWidget> {
             
             bool isElmWidthExceedCanvas = width > canvas.width; 
             bool isElmHeightExceedCanvas = height > canvas.height;
-        
+
+            // ! todo: lanjut fix magnet
+            // * alignment test
+            double alignmentTreshold = 5;
+            log('The center offset of this canvas is ${canvas.getCanvasCenterPoint().dx}, ${canvas.getCanvasCenterPoint().dy}');
+            log('The center offset of this element is ${width / 2}, ${height/2}');
+            // log('delta ${details.delta.dx}, ${details.delta.dy}');
+            log('delta distance ${details.delta.distanceSquared}');
+            
+            final selectedElm = Provider.of<Editor>(context, listen: false).selectedElm;
+            final elementCenter =  Offset(selectedElm!.position.left + (width / 2), selectedElm!.position.top + (height / 2));
+            bool shouldAborUpdate = false;
+            
+            final canvasCenter = canvas.getCanvasCenterPoint();
+            if (details.delta.distance < 2) {
+              if ((canvasCenter.dx - elementCenter.dx).abs() < alignmentTreshold) {
+                shouldAborUpdate = true;
+                Provider.of<Editor>(context, listen: false).updateElmPosition(details.delta, fixedLeft: canvasCenter.dx - (width / 2));
+                Provider.of<Editor>(context, listen: false).updateShouldShowHorizontalCenterLine(true);
+                // return;
+              } 
+            } else {
+              Provider.of<Editor>(context, listen: false).updateShouldShowHorizontalCenterLine(false);
+            }
+
+            if (details.delta.distance < 2) {
+              if ((canvasCenter.dy - elementCenter.dy).abs() < alignmentTreshold) {
+                shouldAborUpdate = true;
+                Provider.of<Editor>(context, listen: false).updateElmPosition(details.delta, fixedTop: canvasCenter.dy - (height / 2));
+                Provider.of<Editor>(context, listen: false).updateShouldShowVerticalCenterLine(true);
+              } 
+            } else {
+              Provider.of<Editor>(context, listen: false).updateShouldShowVerticalCenterLine(false);
+            }
+
+
             // Check if the object is out of the canvas
             // ? top side
             if (element.position.top < 0) {
@@ -322,7 +360,9 @@ class _ElementWidgetState extends State<ElementWidget> {
               log('Adjusting right position, if isElmHeightExceedCanvas');
               return;
             }
-        
+
+            if (shouldAborUpdate) return;
+
             Provider.of<Editor>(context, listen: false).updateElmPosition(details.delta);
           },
           onPanEnd: (details) {
@@ -379,6 +419,10 @@ class _ElementWidgetState extends State<ElementWidget> {
             Provider.of<Editor>(context, listen: false).moveElement(
               Offset(adjustedElementPosition.left - element.position.left, adjustedElementPosition.top - element.position.top)
             );
+
+            // reset canvas alignment helper
+            Provider.of<Editor>(context, listen: false).updateShouldShowHorizontalCenterLine(false);
+            Provider.of<Editor>(context, listen: false).updateShouldShowVerticalCenterLine(false);
           },
           child: Stack(
             clipBehavior: Clip.none,