feat: main canvas, overlay, element property controller, etc

.fvm/flutter_sdk

@@ -0,0 +1 @@
+C:/Users/raiha/fvm/versions/3.24.4

.fvm/fvm_config.json

@@ -0,0 +1,3 @@
+{
+  "flutterSdkVersion": "3.24.4"
+}

.fvm/release

@@ -0,0 +1 @@
+3.24.4

.fvm/version

@@ -0,0 +1 @@
+3.24.4

.fvm/versions/3.24.4

@@ -0,0 +1 @@
+C:/Users/raiha/fvm/versions/3.24.4

devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

lib/arc_curves_painter.dart

@@ -1,78 +0,0 @@
-// Copyright (c) 2021 Razeware LLC
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// Notwithstanding the foregoing, you may not use, copy, modify, merge, publish,
-// distribute, sublicense, create a derivative work, and/or sell copies of the
-// Software in any work that is designed, intended, or marketed for pedagogical
-// or instructional purposes related to programming, coding, application
-// development, or information technology.  Permission for such use, copying,
-// modification, merger, publication, distribution, sublicensing, creation of
-// derivative works, or sale is expressly withheld.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import 'dart:math' as math;
-
-import 'package:flutter/material.dart';
-
-class ArcsCurvesPainter extends CustomPainter {
-  final curvesPaint = Paint()
-    ..strokeWidth = 5
-    ..color = Colors.greenAccent[700]!
-    ..style = PaintingStyle.stroke;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    const arcCenter = Offset(200, 80);
-    final arcRect = Rect.fromCircle(center: arcCenter, radius: 75);
-    final startAngle = degreesToRadians(10);
-    final sweepAngle = degreesToRadians(-90);
-    canvas.drawArc(arcRect, startAngle, sweepAngle, false, curvesPaint);
-
-    // Quadratic Bézier
-    final qCurve1 = Path()
-      ..moveTo(50, 150)
-      ..relativeQuadraticBezierTo(100, -100, 300, 0);
-    canvas.drawPath(qCurve1, curvesPaint..color = Colors.deepPurpleAccent);
-
-    final qCurve2 = Path()
-      ..moveTo(0, 150)
-      ..relativeQuadraticBezierTo(150, 300, 300, 100);
-    canvas.drawPath(qCurve2, curvesPaint..color = Colors.blue);
-
-    // Cubic Bézier
-    final cCurve1 = Path()
-      ..moveTo(0, 450)
-      ..relativeCubicTo(50, -100, 250, -100, 300, 0);
-    canvas.drawPath(cCurve1, curvesPaint..color = Colors.black);
-
-    final cCurve2 = Path()
-      ..moveTo(380, 300)
-      ..relativeCubicTo(0, 450, -300, 300, -150, 250);
-    canvas.drawPath(cCurve2, curvesPaint..color = Colors.pink);
-
-
-  }
-
-  @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
-
-  double degreesToRadians(double degrees) {
-    return (degrees * math.pi) / 180;
-  }
-}

lib/battery/animated_battery.dart

@@ -1,73 +0,0 @@
-// Copyright (c) 2021 Razeware LLC
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// Notwithstanding the foregoing, you may not use, copy, modify, merge, publish,
-// distribute, sublicense, create a derivative work, and/or sell copies of the
-// Software in any work that is designed, intended, or marketed for pedagogical
-// or instructional purposes related to programming, coding, application
-// development, or information technology.  Permission for such use, copying,
-// modification, merger, publication, distribution, sublicensing, creation of
-// derivative works, or sale is expressly withheld.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-
-import 'battery_painter.dart';
-import 'package:flutter/material.dart';
-
-class AnimatedBattery extends StatefulWidget {
-
-  const AnimatedBattery({Key? key}) : super(key: key);
-
-  @override
-  _AnimatedBatteryState createState() => _AnimatedBatteryState();
-}
-
-class _AnimatedBatteryState extends State<AnimatedBattery>
-    with SingleTickerProviderStateMixin {
-  final duration = const Duration(seconds: 5);
-  late AnimationController _ctrl;
-
-  @override
-  void initState() {
-    _ctrl = AnimationController(duration: duration, vsync: this)
-      ..addListener(() => setState(() {}))
-      ..forward()
-      ..addStatusListener((status) {
-        if (status == AnimationStatus.completed) {
-          _ctrl.reverse();
-        } else if (status == AnimationStatus.dismissed) {
-          _ctrl.forward();
-        }
-      });
-    super.initState();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return CustomPaint(
-      painter: BatteryPainter(charge: _ctrl.value),
-    );
-  }
-
-  @override
-  void dispose() {
-    _ctrl.dispose();
-    super.dispose();
-  }
-}

lib/battery/battery_painter.dart

@@ -1,120 +0,0 @@
-// Copyright (c) 2021 Razeware LLC
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// Notwithstanding the foregoing, you may not use, copy, modify, merge, publish,
-// distribute, sublicense, create a derivative work, and/or sell copies of the
-// Software in any work that is designed, intended, or marketed for pedagogical
-// or instructional purposes related to programming, coding, application
-// development, or information technology.  Permission for such use, copying,
-// modification, merger, publication, distribution, sublicensing, creation of
-// derivative works, or sale is expressly withheld.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-
-import 'package:flutter/material.dart';
-import 'dart:math' as math;
-
-class BatteryPainter extends CustomPainter {
-  final margin = 30.0; // The space between the battery and the parent widget
-  final padding = 10.0; // The space between the charge & pin and the border
-  final pinWidth = 22.0; // The width of the pin
-  final minCharge = 0.2; // The minimum charge until the battery disappears
-  final double charge;
-  final borderPaint = Paint()
-    ..color = Colors.black
-    ..strokeWidth = 4
-    ..isAntiAlias = true
-    ..style = PaintingStyle.stroke;
-
-  final pinPaint = Paint()
-    ..color = Colors.black
-    ..isAntiAlias = true
-    ..style = PaintingStyle.fill;
-
-  final chargePaint = Paint()
-    ..color = Colors.greenAccent[700]!
-    ..isAntiAlias = true
-    ..style = PaintingStyle.fill;
-
-  BatteryPainter({required this.charge});
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    RRect _borderRRect(Size size) {
-      // 1
-      final symmetricalMargin = margin * 2;
-      // 2
-      final width = size.width - symmetricalMargin - padding - pinWidth;
-      // 3
-      final height = width / 2;
-      // 4
-      final top = (size.height / 2) - (height / 2);
-      // 5
-      final radius = Radius.circular(height * 0.2);
-      // 6
-      final bounds = Rect.fromLTWH(margin, top, width, height);
-      // 7
-      return RRect.fromRectAndRadius(bounds, radius);
-    }
-
-    final bdr = _borderRRect(size);
-    canvas.drawRRect(bdr, borderPaint);
-
-    Rect _pinRect(RRect bdr) {
-      // 1
-      final center = Offset(bdr.right + padding, bdr.top + (bdr.height / 2.0));
-      // 2
-      final height = bdr.height * 0.38;
-      // 3
-      final width = pinWidth * 2;
-      // 4
-      return Rect.fromCenter(center: center, width: width, height: height);
-    
-    }
-
-    // Battery pin
-    final pinRect = _pinRect(bdr);
-    canvas.drawArc(pinRect, math.pi / 2, -math.pi, true, pinPaint);
-
-    RRect _chargeRRect(RRect bdr) {
-        final percent = minCharge * ((charge / minCharge).round());
-
-        final left = bdr.left + padding;
-        final top = bdr.top + padding;
-        final right = bdr.right - padding;
-        final bottom = bdr.bottom - padding;
-        final height = bottom - top;
-        final width = right - left;
-        final radius = Radius.circular(height * 0.15);
-        final rect = Rect.fromLTWH(left, top, width * percent, height);
-        return RRect.fromRectAndRadius(rect, radius);
-    }
-
-    // Battery charge progress
-    final chargeRRect = _chargeRRect(bdr);
-    canvas.drawRRect(chargeRRect, chargePaint);
-
-
-  }
-
-  @override
-  bool shouldRepaint(covariant BatteryPainter oldDelegate) {
-    return oldDelegate.charge != charge;
-  }
-}

lib/canvas_setup_page.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_canvas_editor/providers/editor.dart';
+import 'package:provider/provider.dart';
+
+class CanvasSetupPage extends StatefulWidget {
+  @override
+  _CanvasSetupPageState createState() => _CanvasSetupPageState();
+}
+
+class _CanvasSetupPageState extends State<CanvasSetupPage> {
+  final _formKey = GlobalKey<FormState>();
+  final TextEditingController _widthController = TextEditingController();
+  final TextEditingController _heightController = TextEditingController();
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+    final editorProvider = Provider.of<Editor>(context, listen: false);
+
+    _widthController.text = editorProvider.canvasProperty.width.toString();
+    _heightController.text = editorProvider.canvasProperty.height.toString();
+
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final editorProvider = Provider.of<Editor>(context);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Canvas Setup'),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Form(
+          key: _formKey,
+          child: Column(
+            children: <Widget>[
+              Container(
+                padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
+                decoration: BoxDecoration(
+                  color: Colors.amber,
+                  borderRadius: BorderRadius.circular(2)
+                ),
+                width: double.infinity,
+                child: Text('Warning Test'),
+              ),
+
+              SizedBox(height: 16),
+
+              TextFormField(
+                controller: _widthController,
+                decoration: InputDecoration(labelText: 'Width'),
+                keyboardType: TextInputType.number,
+                validator: (value) {
+                  if (value == null || value.isEmpty) {
+                    return 'Please enter width';
+                  }
+                  return null;
+                },
+              ),
+              TextFormField(
+                controller: _heightController,
+                decoration: InputDecoration(labelText: 'Height'),
+                keyboardType: TextInputType.number,
+                validator: (value) {
+                  if (value == null || value.isEmpty) {
+                    return 'Please enter height';
+                  }
+                  return null;
+                },
+              ),
+              SizedBox(height: 20),
+              ElevatedButton(
+                onPressed: () async {
+                  if (_formKey.currentState!.validate()) {
+                    // confirmation
+                    final confirmationResult = await showDialog(
+                      barrierDismissible: false,
+                      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 ?'),
+                        actions: [
+                          TextButton(
+                            onPressed: () => Navigator.pop(context, true), 
+                            child: Text('Update label size')
+                          ),
+                          TextButton(
+                            onPressed: () => Navigator.pop(context, false), 
+                            child: Text('Cancel')
+                          )
+                        ],
+                      ),
+                    );
+
+                    if (!confirmationResult) return;
+                    
+                    // Process data
+                    editorProvider.updateCanvasProperty(
+                      context,
+                      double.parse(_widthController.text) , 
+                      double.parse(_heightController.text)
+                    ); 
+                    Navigator.pop(context);
+                  }
+                },
+                child: Text('Submit'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/common/common_scaffold.dart

@@ -1,51 +0,0 @@
-// Copyright (c) 2021 Razeware LLC
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// Notwithstanding the foregoing, you may not use, copy, modify, merge, publish,
-// distribute, sublicense, create a derivative work, and/or sell copies of the
-// Software in any work that is designed, intended, or marketed for pedagogical
-// or instructional purposes related to programming, coding, application
-// development, or information technology.  Permission for such use, copying,
-// modification, merger, publication, distribution, sublicensing, creation of
-// derivative works, or sale is expressly withheld.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-
-import 'package:flutter/material.dart';
-
-class CommonScaffold extends StatelessWidget {
-  final String title;
-  final Widget child;
-
-  const CommonScaffold({required this.title, required this.child, Key? key})
-      : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: Colors.white,
-      appBar: AppBar(
-        backgroundColor: Colors.white,
-        foregroundColor: Colors.black,
-        title: Text(title),
-      ),
-      body: SizedBox.expand(child: child),
-    );
-  }
-}

lib/grid/grid_painter.dart

@@ -1,66 +0,0 @@
-// Copyright (c) 2021 Razeware LLC
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// Notwithstanding the foregoing, you may not use, copy, modify, merge, publish,
-// distribute, sublicense, create a derivative work, and/or sell copies of the
-// Software in any work that is designed, intended, or marketed for pedagogical
-// or instructional purposes related to programming, coding, application
-// development, or information technology.  Permission for such use, copying,
-// modification, merger, publication, distribution, sublicensing, creation of
-// derivative works, or sale is expressly withheld.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import 'package:flutter/material.dart';
-
-class GridPainter extends CustomPainter {
-  final double boxSize = 50;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final vLines = (size.width ~/ boxSize) + 1;
-    final hLines = (size.height ~/ boxSize) + 1;
-
-    final paint = Paint()
-      ..strokeWidth = 1
-      ..color = Colors.red
-      ..style = PaintingStyle.stroke;
-
-    final path = Path();
-
-    // Draw vertical lines
-    for (var i = 0; i < vLines; ++i) {
-      final x = boxSize * i;
-      path.moveTo(x, 0);
-      path.relativeLineTo(0, size.height);
-    }
-
-    // Draw horizontal lines
-    for (var i = 0; i < hLines; ++i) {
-      final y = boxSize * i;
-      path.moveTo(0, y);
-      path.relativeLineTo(size.width, 0);
-    }
-    canvas.drawPath(path, paint);
-  }
-
-  @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) {
-    return false;
-  }
-}

lib/grid/grid_widget.dart

@@ -1,49 +0,0 @@
-// Copyright (c) 2021 Razeware LLC
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// Notwithstanding the foregoing, you may not use, copy, modify, merge, publish,
-// distribute, sublicense, create a derivative work, and/or sell copies of the
-// Software in any work that is designed, intended, or marketed for pedagogical
-// or instructional purposes related to programming, coding, application
-// development, or information technology.  Permission for such use, copying,
-// modification, merger, publication, distribution, sublicensing, creation of
-// derivative works, or sale is expressly withheld.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import 'package:flutter/material.dart';
-import 'grid_painter.dart';
-
-class GridWidget extends StatelessWidget {
-  final CustomPainter foreground;
-
-  const GridWidget(this.foreground, {Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(5),
-      child: SafeArea(
-        child: CustomPaint(
-          foregroundPainter: foreground,
-          painter: GridPainter(),
-        ),
-      ),
-    );
-  }
-}

lib/main.dart

@@ -1,115 +1,219 @@
-// Copyright (c) 2021 Razeware LLC
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// Notwithstanding the foregoing, you may not use, copy, modify, merge, publish,
-// distribute, sublicense, create a derivative work, and/or sell copies of the
-// Software in any work that is designed, intended, or marketed for pedagogical
-// or instructional purposes related to programming, coding, application
-// development, or information technology.  Permission for such use, copying,
-// modification, merger, publication, distribution, sublicensing, creation of
-// derivative works, or sale is expressly withheld.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import 'arc_curves_painter.dart';
-import 'common/common_scaffold.dart';
-import 'grid/grid_widget.dart';
-import 'ovals_painter.dart';
-import 'polygon_painter.dart';
-
-import 'battery/animated_battery.dart';
+import 'dart:math';
+
+import 'package:defer_pointer/defer_pointer.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
+import 'package:flutter_canvas_editor/canvas_setup_page.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';
+import 'package:flutter_canvas_editor/widgets/elements.dart';
+import 'package:provider/provider.dart';
+import 'package:toastification/toastification.dart';
+
+import 'resizeable_element.dart';
+import 'widgets/toolbar.dart';
 
 void main() {
-  runApp(const MyApp());
+  runApp(MyApp());
 }
 
 class MyApp extends StatelessWidget {
-  const MyApp({Key? key}) : super(key: key);
-
   @override
   Widget build(BuildContext context) {
-    SystemChrome.setPreferredOrientations([
-      DeviceOrientation.portraitUp,
-      DeviceOrientation.portraitDown,
-    ]);
-    return MaterialApp(
-      title: 'Canvas Basics',
-      debugShowCheckedModeBanner: false,
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
+    return MultiProvider(
+      providers: [
+        ChangeNotifierProvider(create: (_) => Editor()),
+        ChangeNotifierProvider(create: (_) => EditorTest()),
+      ],
+      child: ToastificationWrapper(
+        child: MaterialApp(
+          theme: ThemeData(
+            textTheme: TextTheme(
+              // bodyMedium: TextStyle(fontSize: 20)
+            )
+          ),
+          home: HomePage(),
+        ),
       ),
-      home: HomeWidget(),
     );
   }
 }
 
-class HomeWidget extends StatelessWidget {
-  HomeWidget({Key? key}) : super(key: key);
+class HomePage extends StatefulWidget {
+  @override
+  State<HomePage> createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage> {
+   double initialScale = 1;
+
+  // CanvasProperty _canvasProperty = CanvasProperty(
+  //   width: 0,
+  //   height: 0,
+  // );
+
+  String? selectedElmId;
+
+  bool _showResetPosition = false;
+
 
-  final items = <Item>[
-    Item('Polygons', GridWidget(PolygonPainter())),
-    Item('Ovals and Circles', GridWidget(OvalPainter())),
-    Item('Arc and Curves', GridWidget(ArcsCurvesPainter())),
-    Item('Animated Battery', const AnimatedBattery()),
-  ];
 
   @override
-  Widget build(BuildContext context) {
-    return CommonScaffold(
-      title: 'Canvas Basics',
-      child: Column(
-        mainAxisSize: MainAxisSize.max,
-        mainAxisAlignment: MainAxisAlignment.center,
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: items.map((e) => ItemWidget(e)).toList(),
-      ),
-    );
+  void initState() {
+    super.initState();
+
+
+    WidgetsBinding.instance!.addPostFrameCallback((_) {
+      // _canvasProperty = Provider.of<Editor>(context, listen: false).canvasProperty;
+      setInitialZoom();
+    });
+
+    setTransformControllerListener();
+  }
+
+  @override
+  void dispose() {
+    Provider.of<Editor>(context, listen: false).disposeCanvasTransformationController();
+    super.dispose();
   }
-}
 
-// TODO: Rename project
 
-class ItemWidget extends StatelessWidget {
-  final Item item;
+  // 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() {
+    Provider.of<Editor>(context, listen: false).canvasTransformationController.addListener(() {
+      if (!_showResetPosition && (Provider.of<Editor>(context, listen: false).canvasTransformationController.value != (Matrix4.identity()..scale(initialScale)))) {
+        print('triggered');
+        setState(() {
+          _showResetPosition = true;
+        });
+      }
+    });
+  }
 
-  const ItemWidget(this.item, {Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      width: double.infinity,
-      margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 7),
-      child: TextButton(
-        style: TextButton.styleFrom(
-            foregroundColor: Colors.white, backgroundColor: const Color(0xFF158443),
-            padding: const EdgeInsets.symmetric(vertical: 15)),
-        onPressed: () {
-          final widget = CommonScaffold(title: item.title, child: item.widget);
-          Navigator.of(context)
-              .push(MaterialPageRoute<void>(builder: (_) => widget));
+    return DeferredPointerHandler(
+      link: Provider.of<Editor>(context).textboxResizerDeferredPointerHandlerLink,
+      child: GestureDetector(
+        onDoubleTap: () {
+          // print((_transformationController.value) == Matrix4.identity());
+          // print(_transformationController.value.getMaxScaleOnAxis());
+          
+
         },
-        child: Text(
-          item.title,
-          style: const TextStyle(
-            fontSize: 18,
-            fontWeight: FontWeight.bold,
+        onTap: () {
+          print('Main Gesture Detector Tapped!');
+          setState(() {
+            Provider.of<Editor>(context, listen: false).unSelectElm();
+          });
+        },
+      
+        // onScaleStart: (details) {
+        //   print('Scale start $details');
+        //   _previousScale = _scale;
+        //   _previousPosition = details.focalPoint;
+        // },
+        // onScaleUpdate: (details) {
+        //   print('Scale update $details');
+        //   setState(() {
+        //     _scale = _previousScale * details.scale;
+        //     _position += details.focalPoint - _previousPosition;
+        //     _previousPosition = details.focalPoint;
+        //   });
+        // },
+        // onScaleEnd: (details) {
+        //   _previousScale = 1.0;
+        // },
+        child: Scaffold(
+          backgroundColor: Colors.grey,
+          appBar: AppBar(
+            title: Text('Template Editor'),
+            actions: [
+              IconButton(
+                onPressed: () {
+                  Navigator.push(
+                    context, 
+                    MaterialPageRoute(builder:  (context) => CanvasSetupPage(),)
+                  );
+                }, 
+                icon: Icon(Icons.link)
+              )
+            ],
+          ),
+          body: Column(
+            children: [
+              Expanded(
+                child: Stack(
+                  children: [
+                    InteractiveViewer(
+                      transformationController: Provider.of<Editor>(context).canvasTransformationController,
+                      boundaryMargin: EdgeInsets.all(double.infinity),
+                      maxScale: 4,
+                      minScale: 0.1,
+                      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 (ElementProperty elementProperty in Provider.of<Editor>(context).elementProperties) ... [
+                                  ElementWidget(
+                                    elementProperty: elementProperty,
+                                    canvasProperty: Provider.of<Editor>(context).canvasProperty,
+                                    globalKey: elementProperty.elementKey,
+                                  )
+                                ]
+                              ],
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+      
+                    if (_showResetPosition) Positioned(
+                      bottom: 16,
+                      right: 16,
+                      child: IconButton.filled(
+                        tooltip: 'Reset Position',
+                        onPressed: () {
+                          Provider.of<Editor>(context, listen: false).resetCanvasTransformationScale();
+                          _showResetPosition = false;
+      
+                          setState(() {}); 
+                        }, 
+                        icon: Icon(Icons.center_focus_strong),
+                        color: Colors.white,
+                      ),
+                    )
+                  ],
+                ),
+              ),
+      
+              // Toolbar
+              ToolbarWidget()
+            ],
           ),
         ),
       ),
@@ -117,9 +221,13 @@ class ItemWidget extends StatelessWidget {
   }
 }
 
-class Item {
-  final String title;
-  final Widget widget;
 
-  Item(this.title, this.widget);
-}
+class CanvasProperty {
+  double width;
+  double height;
+
+  CanvasProperty({
+    required this.width,
+    required this.height,
+  });
+}

lib/ovals_painter.dart

@@ -1,59 +0,0 @@
-// Copyright (c) 2021 Razeware LLC
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// Notwithstanding the foregoing, you may not use, copy, modify, merge, publish,
-// distribute, sublicense, create a derivative work, and/or sell copies of the
-// Software in any work that is designed, intended, or marketed for pedagogical
-// or instructional purposes related to programming, coding, application
-// development, or information technology.  Permission for such use, copying,
-// modification, merger, publication, distribution, sublicensing, creation of
-// derivative works, or sale is expressly withheld.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import 'package:flutter/material.dart';
-
-class OvalPainter extends CustomPainter {
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint = Paint()
-      ..strokeWidth = 4
-      ..color = Colors.blueAccent
-      ..style = PaintingStyle.stroke;
-
-    
-    const circleRadius = 75.0;
-    const circleCenter = Offset(200, 150);
-    canvas.drawCircle(circleCenter, circleRadius, paint);
-
-    const ovalCenter = Offset(200, 275);
-    final oval = Rect.fromCenter(center: ovalCenter, width: 250, height: 100);
-    canvas.drawOval(oval, paint);
-
-    var concentricCircleRadius = 100.0;
-    const center = Offset(200, 500);
-    while (concentricCircleRadius > 0) {
-      canvas.drawCircle(center, concentricCircleRadius, paint);
-      concentricCircleRadius -= 10;
-    }
-
-  }
-
-  @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
-}

lib/polygon_painter.dart

@@ -1,96 +0,0 @@
-// Copyright (c) 2021 Razeware LLC
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// Notwithstanding the foregoing, you may not use, copy, modify, merge, publish,
-// distribute, sublicense, create a derivative work, and/or sell copies of the
-// Software in any work that is designed, intended, or marketed for pedagogical
-// or instructional purposes related to programming, coding, application
-// development, or information technology.  Permission for such use, copying,
-// modification, merger, publication, distribution, sublicensing, creation of
-// derivative works, or sale is expressly withheld.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-
-import 'package:flutter/material.dart';
-
-class PolygonPainter extends CustomPainter {
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint = Paint()
-      ..strokeWidth = 5
-      ..color = Colors.indigoAccent
-      ..style = PaintingStyle.fill;
-
-    final triangle = Path();
-    triangle.moveTo(150, 0);
-    triangle.relativeLineTo(100, 100);
-    triangle.relativeLineTo(-150, 0);
-    triangle.close();
-
-    final square1 = Path();
-    square1.moveTo(50, 150);
-    square1.relativeLineTo(100, 0);
-    square1.relativeLineTo(0, 100);
-    square1.relativeLineTo(-100, 0);
-    square1.close();
-
-    const square2 = Rect.fromLTWH(200, 150, 100, 100);
-
-    final hexagon = Path()
-    // 1
-      ..moveTo(175, 300)
-    // 2
-      ..relativeLineTo(75, 50)
-    // 3
-      ..relativeLineTo(0, 75)
-    // 4
-      ..relativeLineTo(-75, 50)
-    // 5
-      ..relativeLineTo(-75, -50)
-    // 6
-      ..relativeLineTo(0, -75)
-    // 7
-      ..close();
-
-    final cross = Path()
-      ..moveTo(150, 500)
-      ..relativeLineTo(50, 0)
-      ..relativeLineTo(0, 50)
-      ..relativeLineTo(50, 0)
-      ..relativeLineTo(0, 50)
-      ..relativeLineTo(-50, 0)
-      ..relativeLineTo(0, 50)
-      ..relativeLineTo(-50, 0)
-      ..relativeLineTo(0, -50)
-      ..relativeLineTo(-50, 0)
-      ..relativeLineTo(0, -50)
-      ..relativeLineTo(50, 0)
-      ..close();
-  
-  
-    canvas.drawPath(triangle, paint);
-    canvas.drawPath(square1, paint);
-    canvas.drawRect(square2, paint);
-    canvas.drawPath(cross, paint);
-    canvas.drawPath(hexagon, paint);  
-  }
-
-  @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
-}

lib/providers/editor.dart

@@ -0,0 +1,506 @@
+import 'dart:developer';
+
+import 'package:defer_pointer/defer_pointer.dart';
+import 'package:flutter/material.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 '../main.dart';
+
+var uuid = Uuid();
+
+class Editor extends ChangeNotifier {
+  String? selectedElmId;
+  
+  bool isEditing = false;
+
+  final textboxResizerDeferredPointerHandlerLink = DeferredPointerHandlerLink();
+
+
+
+  // ? Canvas State
+  double canvasScale = 1.0;
+
+  final CanvasProperty canvasProperty = CanvasProperty(
+    width: 780,
+    height: 1000,
+  );
+
+  TransformationController canvasTransformationController = TransformationController();
+
+  void setCanvasTransformationInitialZoom(BuildContext context) {
+    final deviceWidth = MediaQuery.of(context).size.width;
+
+    canvasScale = deviceWidth / canvasProperty.width * 0.9;
+
+    canvasTransformationController.value = Matrix4.identity()..scale(canvasScale);
+  }
+
+  void resetCanvasTransformationScale() {
+    print('canvas scale $canvasScale');
+    canvasTransformationController.value = Matrix4.identity()..scale(canvasScale);
+  }
+
+  void disposeCanvasTransformationController() {
+    canvasTransformationController.dispose();
+  }
+
+
+
+
+  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
+    )
+  ];
+  // int _reservedIdUntil = 0;
+
+  // ? udpate canvas
+  void updateCanvasProperty(BuildContext context, double width, double height) {
+    canvasProperty.height = height;
+    canvasProperty.width = width;
+
+    _adjustOutOfBoundElement();
+
+    setCanvasTransformationInitialZoom(context);
+
+    notifyListeners();
+  }
+
+  void _adjustOutOfBoundElement() {
+    for (var element in elementProperties) {
+      bool isOutOfBoundFromTop = (element.position.top + 10) > canvasProperty.height;
+      bool isOutOfBoundFromLeft = (element.position.left + 10) > canvasProperty.width;
+
+      // if (isOutOfBoundFromTop | isOutOfBoundFromLeft) {
+      //   element.position.top = 0;
+      //   element.position.left = 0;
+      // }
+
+      if (isOutOfBoundFromTop) {
+        element.position.top = canvasProperty.height - (element.elementKey.currentContext?.size?.height ?? 0);
+      }
+
+      if (isOutOfBoundFromLeft) {
+        element.position.left = canvasProperty.width - (element.elementKey.currentContext?.size?.width ?? 0);
+      }
+      
+    }
+
+  }
+
+  void populateElement(List<ElementProperty> elementProperties) {
+    this.elementProperties.addAll(elementProperties);
+    // _reservedIdUntil = this.elementProperties.length - 1;
+    notifyListeners();
+  }
+
+  void addTextElement(){
+    String id = uuid.v4();
+
+    ElementProperty element = ElementProperty(
+      id: id, 
+      valueController: TextEditingController(text: 'Double tap to edit text'), 
+      type: ElementType.text, 
+      position: ElementPosition(top: 0, left: 0), 
+      // size: ElementSize(width: 20, height: 70), 
+      width: 20,
+      elementKey: GlobalKey(),
+      quarterTurns: 0
+    );
+
+
+    elementProperties.add(element);
+    // _reservedIdUntil = elementProperties.length - 1;r
+    notifyListeners();
+
+    selectElmById(id);
+  } 
+
+  void addTextboxElement() {
+    String id = uuid.v4();
+
+    ElementProperty element = ElementProperty(
+      id: id, 
+      valueController: TextEditingController(text: 'Double tap to edit text'), 
+      type: ElementType.textbox, 
+      position: ElementPosition(top: 0, left: 0), 
+      width: 70, 
+      quarterTurns: 0, 
+      elementKey: GlobalKey()
+    );
+
+    elementProperties.add(element);
+    notifyListeners();
+
+    selectElmById(id);
+  }
+
+  void updateElmPosition(Offset offset) {
+    ElementProperty? 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();
+    notifyListeners();
+  }
+
+  void updateElmWitdh(double width) {
+    ElementProperty? element = selectedElm;
+
+    if (element == null) return;
+
+
+    element.width = width;
+    notifyListeners();
+  }
+
+  void toggleLockElement() {
+    if (selectedElm == null) return;
+
+    selectedElm!.isLocked = !selectedElm!.isLocked;
+    notifyListeners();
+  }
+
+
+  void selectElmById(String id) {
+    selectedElmId = id;
+    notifyListeners();
+  }
+
+  void enableEdit() {
+    if (selectedElm!.isLocked) {
+      _showLockedToast('Cant modify locked element');
+      return;
+    }
+
+    isEditing = true;
+    notifyListeners();
+  }
+
+  void disableEdit() {
+    isEditing = false;
+    notifyListeners();
+  }
+
+  void unSelectElm() {
+    selectedElmId = null;
+    isEditing = false;
+    notifyListeners();
+  }
+
+  bool isSelected(String id) {
+    return selectedElmId == id;
+  }
+
+  // ? Getters
+  String get selectedElmType {
+    if (elementProperties.isNotEmpty && selectedElmId != null) {
+      final selectedElm = elementProperties.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);
+    }
+
+    return null;
+  }
+
+  GlobalKey? get selectedElmKey {
+    if (elementProperties.isNotEmpty && selectedElmId != null) {
+      return elementProperties.firstWhere((element) => element.id == selectedElmId).elementKey;
+    }
+
+    return null;
+  }
+
+  bool get shouldShowFontResizer {
+    if (selectedElm == null) return false;
+
+    if (![ElementType.text, ElementType.textbox].contains(selectedElm!.type)) return false;
+
+    return true;
+  }
+
+  bool get shouldShowQrResizer {
+    if (selectedElm == null) return false;
+
+    if (selectedElm!.type != ElementType.qr) return false;
+
+    return true;
+  }
+
+  bool get shouldShowDeleteElementButton {
+    if (selectedElm == null) return false;
+
+    if ([ElementType.qr].contains(selectedElm!.type)) return false;
+
+    return true;
+  }
+
+
+  // ? Element overlay
+  bool shouldShowTextboxResizer(String elmId) {
+    if (selectedElmId == null) return false;
+
+    if (selectedElmId != elmId ) return false;
+
+    if (selectedElm!.type != ElementType.textbox) return false;
+
+    return true;
+  }
+
+  bool shouldShowOverlay(String elmId) {
+    if (selectedElmId == null) return false;
+
+    if (selectedElmId != elmId ) return false;
+
+    if (selectedElm!.type == ElementType.qr) return false;
+
+    return true;
+  }
+
+
+  // Toolbar
+  bool get insertElementMode{
+    if (selectedElm == null) return true;
+    return false;
+  }
+
+
+  /// Can only rotate [ElementType.text, ElementType.textBox]
+  void rotate() {
+    ElementProperty? element = selectedElm;
+
+    if (element == null) return;
+
+    if (element.isLocked) {
+      _showLockedToast('Cant rotate locked element');
+      return;
+    }
+    
+    if (![ElementType.text, ElementType.textbox].contains(element.type)) return;
+
+
+    if (element.type == ElementType.text) _rotateText(element);
+
+    if (element.type == ElementType.textbox) _rotateTextBox(element);
+
+
+    // Adjust Size
+    // double currentElementHeight = selectedElmKey!.currentContext!.size!.height;
+    // double currentElementWidth = selectedElmKey!.currentContext!.size!.width;
+
+    //   selectedElmKey!.currentContext!.size!.height = currentElementWidth;
+    //   selectedElmKey!.currentContext!.size!.width  = currentElementHeight;
+    
+
+    notifyListeners();
+
+  }
+
+  void _rotateText(ElementProperty element) {
+    if (element.quarterTurns < 3) {
+      element.quarterTurns += 1;
+    } else {
+      element.quarterTurns = 0;
+    }
+  }
+
+  void _rotateTextBox(ElementProperty element) {
+    if (element.quarterTurns == 0) {
+      element.quarterTurns = 3;
+    } else {
+      element.quarterTurns = 0;
+    }
+  }
+
+  // FontSize Handler
+  void changeFontSize(int? fontSize) {
+    if (fontSize == null) return;
+
+    if (selectedElm == null) return;
+
+    if (selectedElm!.isLocked) {
+      _showLockedToast('Cant modify locked element');
+      return;
+    }
+
+    selectedElm!.fontScale = fontSize;
+    notifyListeners();
+  }
+  
+  void incrementFontSize() {
+    if (selectedElm == null) return;
+
+    final incrementTo = selectedElm!.fontScale + 1;
+
+    if (selectedElm!.isLocked) {
+      _showLockedToast('Cant modify locked element');
+      return;
+    }
+    // check if value is allowed for resize
+    if (CanvasStyle.fontSizeMap.containsKey(incrementTo)) {
+      selectedElm!.fontScale = incrementTo;
+      print('kepenjet increase');
+    } else {
+      print('cant increment');
+    }
+
+    notifyListeners();
+  }
+
+  void decrementFontSize() {
+    if (selectedElm == null) return;
+
+    final decrementTo = selectedElm!.fontScale - 1;
+
+    if (selectedElm!.isLocked) {
+      _showLockedToast('Cant modify locked element');
+      return;
+    }
+    // check if value is allowed for resize
+    if (CanvasStyle.fontSizeMap.containsKey(decrementTo)) {
+      selectedElm!.fontScale = decrementTo;
+    } else {
+      print('cant decrement');
+    }
+
+    notifyListeners();
+  }
+
+  // Qr Size Handler
+  void changeQrSize(int? fontSize) {
+    if (fontSize == null) return;
+
+    if (selectedElm == null) return;
+
+    if (selectedElm!.isLocked) {
+      _showLockedToast('Cant modify locked element');
+      return;
+    }
+
+    selectedElm!.qrScale = fontSize;
+    notifyListeners();
+  }
+  
+  void incrementQrSize() {
+    if (selectedElm == null) return;
+
+    if (selectedElm!.type != ElementType.qr) return;
+
+    final incrementTo = selectedElm!.qrScale! + 1;
+
+    if (selectedElm!.isLocked) {
+      _showLockedToast('Cant modify locked element');
+      return;
+    }
+    // check if value is allowed for resize
+    if (CanvasStyle.qrSizeMap.containsKey(incrementTo)) {
+      selectedElm!.qrScale = incrementTo;
+    } else {
+      print('cant increment');
+    }
+
+    notifyListeners();
+  }
+
+  void decrementQrSize() {
+    if (selectedElm == null) return;
+
+
+    if (selectedElm!.type != ElementType.qr) return;
+
+    final decrementTo = selectedElm!.qrScale! - 1;
+
+    if (selectedElm!.isLocked) {
+      _showLockedToast('Cant modify locked element');
+      return;
+    }
+
+    // check if value is allowed for resize
+    if (CanvasStyle.qrSizeMap.containsKey(decrementTo)) {
+      selectedElm!.qrScale = decrementTo;
+    } else {
+      print('cant decrement');
+    }
+
+    notifyListeners();
+  }
+
+  // Delete Element
+  Future<void> deleteElement(BuildContext context) async {
+    if (selectedElm == null) return;
+
+    if (selectedElm!.isLocked) {
+      _showLockedToast('Cant delete locked element');
+      return;
+    } 
+
+    final shouldDelete = await showDialog(
+      context: context, 
+      builder: (context) {
+        return AlertDialog(
+          title: Text('Delete Element ?'),
+          content: Text('Are you sure want to delete this element ?'),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.pop(context, false), 
+              child: Text('Cancel')
+            ),
+            TextButton(
+              onPressed: () => Navigator.pop(context, true), 
+              child: Text('Delete')
+            ),
+          ],
+        );
+      },
+    );
+
+    if (!shouldDelete) return;
+
+    elementProperties.removeWhere((e) => e.id == selectedElm!.id);
+    unSelectElm();
+
+    notifyListeners();
+  }
+
+  // ? snapping element
+  // Offset? snapToElement(Offset newPosition) {
+  //   for (var element in elementProperties) {
+  //     if ((newPosition.dx - element.))
+
+  //   }
+  // }
+
+  // ? 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
+    );
+  }
+}

lib/resizeable_element.dart

@@ -0,0 +1,85 @@
+import 'package:defer_pointer/defer_pointer.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class EditorTest with ChangeNotifier {
+  double _selectedWidth = 150.0;
+
+  double get selectedWidth => _selectedWidth;
+
+  void updateElmWidth(double newWidth) {
+    _selectedWidth = newWidth;
+    notifyListeners();
+  }
+}
+
+class ResizableElement extends StatefulWidget {
+  @override
+  _ResizableElementState createState() => _ResizableElementState();
+}
+
+class _ResizableElementState extends State<ResizableElement> {
+  double _initialWidth = 150.0; // Initial width of the element
+  Offset? _dragStartPosition; // Starting position of the drag
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text("Resizable Element ")),
+      body: DeferredPointerHandler(
+        child: Stack(
+          clipBehavior: Clip.none,
+          children: [
+            // Resizable container
+            Container(
+              width: _initialWidth,
+              // height: 100,
+              color: Colors.blue[100],
+              // alignment: Alignment.center,
+              child: Text(
+                "Resizable Element $_initialWidth",
+                textAlign: TextAlign.center,
+              ),
+            ),
+            // Drag handle
+            Positioned(
+              right: -30,
+              top: 0,
+              bottom: 0,
+              child: DeferPointer(
+                child: Listener(
+                  onPointerDown: (event) {
+                    _dragStartPosition = event.position;
+                  },
+                  onPointerMove: (event) {
+                    setState(() {
+                      if (_dragStartPosition != null) {
+                        // Calculate drag delta
+                        final delta = event.position.dx - _dragStartPosition!.dx;
+                        _initialWidth = (_initialWidth + delta).clamp(75.0, MediaQuery.of(context).size.width);
+                        _dragStartPosition = event.position; // Update drag position
+                      }
+                    });
+                  },
+                  onPointerUp: (event) {
+                    _dragStartPosition = null; // Reset drag start position
+                  },
+                  child: Container(
+                    width: 30,
+                    height: 100,
+                    color: Colors.blue,
+                    child: Icon(
+                      Icons.drag_handle,
+                      size: 16,
+                      color: Colors.white,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/snaptest_page.dart

@@ -0,0 +1,93 @@
+import 'package:flutter/material.dart';
+
+class SnapToGridCanvas extends StatefulWidget {
+  @override
+  _SnapToGridCanvasState createState() => _SnapToGridCanvasState();
+}
+
+class _SnapToGridCanvasState extends State<SnapToGridCanvas> {
+  final double snappingThreshold = 10.0;
+  final List<Rect> elements = []; // Store elements' bounds
+  Offset selectedElementPosition = Offset(100, 100);
+  Size selectedElementSize = Size(100, 100);
+
+  Offset? snapToElementOrCanvas(Offset newPosition, Size canvasSize) {
+    for (var element in elements) {
+      // Snap to other elements
+      if ((newPosition.dx - element.right).abs() <= snappingThreshold) {
+        return Offset(element.right, newPosition.dy); // Snap to the right of another element
+      } else if ((newPosition.dx - element.left).abs() <= snappingThreshold) {
+        return Offset(element.left, newPosition.dy); // Snap to the left of another element
+      } else if ((newPosition.dy - element.bottom).abs() <= snappingThreshold) {
+        return Offset(newPosition.dx, element.bottom); // Snap to the bottom of another element
+      } else if ((newPosition.dy - element.top).abs() <= snappingThreshold) {
+        return Offset(newPosition.dx, element.top); // Snap to the top of another element
+      }
+    }
+
+    // Snap to canvas center
+    final canvasCenter = Offset(canvasSize.width / 2, canvasSize.height / 2);
+    if ((newPosition.dx - canvasCenter.dx).abs() <= snappingThreshold) {
+      return Offset(canvasCenter.dx, newPosition.dy); // Snap horizontally to canvas center
+    } else if ((newPosition.dy - canvasCenter.dy).abs() <= snappingThreshold) {
+      return Offset(newPosition.dx, canvasCenter.dy); // Snap vertically to canvas center
+    }
+
+    return null; // No snapping
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final canvasSize = MediaQuery.of(context).size;
+
+    return Scaffold(
+      appBar: AppBar(title: Text("Snap to Grid Canvas")),
+      body: GestureDetector(
+        onPanUpdate: (details) {
+          setState(() {
+            final newPosition = selectedElementPosition + details.delta;
+
+            // Check for snapping
+            final snappedPosition = snapToElementOrCanvas(newPosition, canvasSize);
+            if (snappedPosition != null) {
+              selectedElementPosition = snappedPosition;
+            } else {
+              selectedElementPosition = newPosition;
+            }
+          });
+        },
+        child: Stack(
+          children: [
+            // Canvas background
+            Container(color: Colors.grey[200]),
+
+            // Render all elements
+            ...elements.map((element) {
+              return Positioned(
+                left: element.left,
+                top: element.top,
+                child: Container(
+                  width: element.width,
+                  height: element.height,
+                  color: Colors.blue,
+                ),
+              );
+            }).toList(),
+
+            // Selected element
+            Positioned(
+              left: selectedElementPosition.dx,
+              top: selectedElementPosition.dy,
+              child: Container(
+                width: selectedElementSize.width,
+                height: selectedElementSize.height,
+                color: Colors.red,
+                child: Center(child: Text("Drag Me")),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/style/canvas_style.dart

@@ -0,0 +1,64 @@
+// import 'package:flutter/material.dart';
+
+import 'package:flutter/material.dart';
+
+class CanvasStyle {
+  static double fontSizeFallback = 18;
+  static double qrSizeFallback = 82;
+
+  static Map<int, double> fontSizeMap = {
+    1: 18,
+    2: 25,
+    3: 31.5,
+    4: 37,
+    5: 43,
+    6: 50,
+    7: 57,
+    8: 63.5,
+    9: 70
+  };
+
+  static Map<int, double> qrSizeMap = {
+    1: 82,
+    2: 124,
+    3: 164,
+    4: 204,
+    5: 248,
+    6: 286,
+    7: 330,
+    8: 370,
+    9: 412
+  };
+
+  static double getFontSize(int elmFontSize) {
+    return fontSizeMap[elmFontSize] ?? fontSizeFallback;
+  }
+
+  static TextStyle getTextStyle(int elmFontSize) {
+    return TextStyle(
+      fontFamily: 'RobotoCondensed', 
+      fontSize: CanvasStyle.getFontSize(elmFontSize),
+      letterSpacing: 0
+    );
+  }
+
+  static double getQrSize(int elmQrScale) {
+    return qrSizeMap[elmQrScale] ?? qrSizeFallback;
+  }
+
+}
+
+
+// void main() {
+//   int elmFontSize = 2;
+//   print(CanvasStyle.fontSizeMap[elmFontSize]);
+
+//   elmFontSize -= 1;
+//   print(CanvasStyle.fontSizeMap[elmFontSize]);
+
+//   if (CanvasStyle.fontSizeMap.containsKey(elmFontSize)) {
+//     print('resize');
+//   } else {
+//     print('cant resize');
+//   }
+// }

lib/test_page.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+class TestPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Hit Test'),
+      ),
+      body: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          GestureDetector(
+            onTap: () {
+              print('Red Container tapped');
+            },
+            child: Container(
+              width: 100,
+              height: 100,
+              color: Colors.red,
+              margin: EdgeInsets.all(20),
+            ),
+          ),
+          GestureDetector(
+            onTap: () {
+              print('Blue Container tapped');
+            },
+            child: Container(
+              width: 50,
+              height: 50,
+              color: Colors.blue,
+              margin: EdgeInsets.fromLTRB(30, 20, 20, 20),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/elements.dart

@@ -0,0 +1,446 @@
+import 'package:defer_pointer/defer_pointer.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_canvas_editor/providers/editor.dart';
+import 'package:provider/provider.dart';
+import 'dart:math' as math;
+
+import '../main.dart';
+import '../style/canvas_style.dart';
+
+enum ElementType {text, textbox, qr, image}
+
+String elementGetter(ElementType type) {
+  switch (type) {
+    case ElementType.text:
+      return 'Text';
+    case ElementType.textbox:
+      return 'TextBox';
+    case ElementType.qr:
+      return 'QR';
+    case ElementType.image:
+      return 'Image';
+    default:
+      return '';
+  }
+}
+
+class ElementPosition {
+  double top;
+  double left;
+
+  ElementPosition({required this.top, required this.left});
+}
+
+class ElementSize {
+  double width;
+  double height;
+
+  ElementSize({required this.width, required this.height});
+}
+
+class ElementProperty {
+  String id;
+  TextEditingController valueController;
+  ElementType type;
+  ElementPosition position;
+  // ElementSize size;
+  double width;
+  int quarterTurns;
+  GlobalKey elementKey;
+  Color? color;
+  int fontScale;
+  int? qrScale; 
+  bool isLocked;
+
+  ElementProperty({
+    required this.id,
+    required this.valueController,
+    required this.type,
+    required this.position,
+    // required this.size,
+    required this.width,
+    required this.quarterTurns,
+    required this.elementKey,
+    this.color,
+    this.fontScale = 3,
+    this.qrScale,
+    this.isLocked = false
+  });
+
+}
+
+
+
+class ElementWidget extends StatefulWidget {
+  final ElementProperty elementProperty;
+  final CanvasProperty canvasProperty;
+  final GlobalKey globalKey;
+  
+  const ElementWidget({
+    required this.elementProperty, 
+    required this.canvasProperty, 
+    required this.globalKey,
+    super.key
+  });
+
+  @override
+  State<ElementWidget> createState() => _ElementWidgetState();
+}
+
+class _ElementWidgetState extends State<ElementWidget> {
+  Offset? _dragStartPosition;
+
+  // dragable container 
+  final double _resizerHeight = 36;
+  final double _resizerWidth = 36;
+
+  double _height = 0;
+
+  double _currentScale = 1.0;
+
+  late TransformationController _transformController;
+
+  @override
+  void initState() {
+    super.initState();
+    
+    WidgetsBinding.instance.addPostFrameCallback((_) => _updateScale);
+
+    _transformController = Provider.of<Editor>(context, listen: false).canvasTransformationController;
+
+    _setInitialScale();
+    _listenTransformationChanges();
+  }
+
+
+
+  void _updateScale() {
+    _currentScale = Provider.of<Editor>(context, listen: false).canvasTransformationController.value.getMaxScaleOnAxis();
+    
+    setState(() {});
+  }
+
+  void _setInitialScale() {
+    _updateScale();
+  }
+
+  void _listenTransformationChanges() {
+     _transformController.addListener(_updateScale);
+  }
+
+  void _removeTransformationListener() {
+    _transformController.removeListener(_updateScale);
+  }
+
+
+
+
+  @override
+  void dispose() {
+   _removeTransformationListener();
+    super.dispose();
+  }
+
+
+  @override
+  Widget build(BuildContext context) {
+    final editorProvider = Provider.of<Editor>(context);
+
+    ElementProperty element = widget.elementProperty;
+    final CanvasProperty canvas = widget.canvasProperty;
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _height = element.elementKey.currentContext!.size!.height;
+    });
+
+    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;
+            });
+      
+            print('object is out of canvas');
+            return;
+          }
+      
+      
+          if (!isElmWidthExceedCanvas && right > canvas.width) {
+            setState(() {
+              element.position.left = canvas.width - width;
+            });
+      
+            print('object is out of canvas');
+            return;
+          }
+      
+          Provider.of<Editor>(context, listen: false).updateElmPosition(details.delta);
+        },
+        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.type == ElementType.qr ? const Image(image: AssetImage('asset/images/qr_template.png'),) : Provider.of<Editor>(context, listen: true).isEditing && (Provider.of<Editor>(context, listen: true).selectedElmId == element.id) ?
+                      IntrinsicWidth(
+                        child: TextField(
+                          controller: Provider.of<Editor>(context).selectedElm!.valueController,
+                          autofocus: true,
+                          keyboardType: TextInputType.multiline,
+                          enableSuggestions: false,
+                          autocorrect: false,
+                          maxLines: null,
+                          style: CanvasStyle.getTextStyle(element.fontScale),
+                          decoration: const InputDecoration(
+                            isDense: true,
+                            contentPadding: EdgeInsets.zero,
+                            border: InputBorder.none,
+                          ),
+                          onChanged: (_) {
+                            setState(() {
+                              
+                            });
+                          }
+                        ),
+                      ):
+                    Text(
+                      element.valueController.text,
+                      style: CanvasStyle.getTextStyle(element.fontScale),
+                    ),
+                  ),
+            
+                  // ? 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,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+            
+            
+                  
+            
+            
+            
+                  // 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)
+                        ),
+                      ),
+                      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
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              )
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/toolbar.dart

@@ -0,0 +1,200 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_canvas_editor/providers/editor.dart';
+import 'package:flutter_canvas_editor/style/canvas_style.dart';
+import 'package:flutter_canvas_editor/widgets/elements.dart';
+import 'package:provider/provider.dart';
+
+class ToolbarWidget extends StatefulWidget {
+  const ToolbarWidget({
+    super.key,
+  });
+
+  @override
+  State<ToolbarWidget> createState() => _ToolbarWidgetState();
+}
+
+class _ToolbarWidgetState extends State<ToolbarWidget> {
+  List<DropdownMenuItem<int>> fontSizeDropdownItems= [];
+
+  List<DropdownMenuItem<int>> qrSizeDropdownItems= [];
+
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+
+    populateFontSizeDropdownItems();
+    populateQrSizeDropdownItems();
+  }
+
+  //functions
+  void populateFontSizeDropdownItems() {
+    CanvasStyle.fontSizeMap.forEach((key, val) {
+      final item = DropdownMenuItem(
+        value: key,
+        child: Text(key.toString())
+      );
+
+
+      fontSizeDropdownItems.add(item);
+    });
+  }
+
+  void populateQrSizeDropdownItems() {
+    CanvasStyle.qrSizeMap.forEach((key, val) {
+      final item = DropdownMenuItem(
+        value: key,
+        child: Text(key.toString())
+      );
+
+
+      qrSizeDropdownItems.add(item);
+    });
+  }
+
+  @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),
+      ),
+    );
+  }
+
+  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')
+      ),
+      // ElevatedButton(
+      //   onPressed: Provider.of<Editor>(context, listen: false).addQrCodeElement, 
+      //   child: Text('Add Qr Code Element')
+      // ),
+    ];
+  }
+
+  List<Widget> elementPropertiesSection(Editor editorProvider) {
+    final element = Provider.of<Editor>(context).selectedElm;
+
+    return [
+      Text('Properties'),
+      SizedBox(height: 20),
+      Text('Selected elements: ${Provider.of<Editor>(context).selectedElmType}'),
+
+      Text('Top: ${Provider.of<Editor>(context, listen: true).selectedElm!.position.top}, Left: ${Provider.of<Editor>(context, listen: true).selectedElm!.position.left}}'),
+      
+      // ? 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();
+
+          editorProvider.disableEdit();
+
+          print('kepenjet');
+        },
+        onChanged: (value) {
+          setState(() {
+            
+          });
+        },
+      ),
+      
+      if (editorProvider.selectedElm!.type != ElementType.qr) ElevatedButton(
+        onPressed: Provider.of<Editor>(context).rotate, 
+        child: Text('Rotate')
+      ),
+
+      // ? Font Resizer (Only show when selected element is [ElementType.text, ElementType.textbox])
+      if (Provider.of<Editor>(context).shouldShowFontResizer) Row(
+        children: [
+          DropdownButton<int>(
+            value: element?.fontScale,
+            items: fontSizeDropdownItems, 
+            onChanged: (val) {
+              print('dropdown value: $val');
+              Provider.of<Editor>(context, listen: false).changeFontSize(val);
+            }
+          ),
+          IconButton.filled(
+            onPressed: Provider.of<Editor>(context, listen: false).incrementFontSize, 
+            icon: Icon(Icons.add)
+          ),
+          IconButton.filled(
+            onPressed:  Provider.of<Editor>(context, listen: false).decrementFontSize,
+            icon: Icon(Icons.remove)
+          ),
+          IconButton.filled(
+            onPressed:  () => print('kepenjet tombol test'),
+            icon: Icon(Icons.remove)
+          ),
+        ],
+      ),
+
+      // ? 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)
+          ),
+        ],
+      ),
+
+      // ? 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),
+        )
+      ),
+
+      // ? 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),
+        )
+      ),
+    ];
+  }
+}

pubspec.lock

@@ -41,6 +41,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.18.0"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      sha256: "1e445881f28f22d6140f181e07737b22f1e099a5e1ff94b0af2f9e4a463f4855"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.6"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -49,6 +57,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.8"
+  defer_pointer:
+    dependency: "direct main"
+    description:
+      name: defer_pointer
+      sha256: d69e6f8c1d0f052d2616cc1db3782e0ea73f42e4c6f6122fd1a548dfe79faf02
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.2"
+  equatable:
+    dependency: transitive
+    description:
+      name: equatable
+      sha256: "567c64b3cb4cf82397aac55f4f0cbd3ca20d77c6c03bedbc4ceaddc08904aef7"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.7"
   fake_async:
     dependency: transitive
     description:
@@ -57,6 +81,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.1"
+  fixnum:
+    dependency: transitive
+    description:
+      name: fixnum
+      sha256: b6dc7065e46c974bc7c5f143080a6764ec7a4be6da1285ececdc37be96de53be
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -75,30 +107,38 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  iconsax_flutter:
+    dependency: transitive
+    description:
+      name: iconsax_flutter
+      sha256: "95b65699da8ea98f87c5d232f06b0debaaf1ec1332b697e4d90969ec9a93037d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
   leak_tracker:
     dependency: transitive
     description:
       name: leak_tracker
-      sha256: "78eb209deea09858f5269f5a5b02be4049535f568c07b275096836f01ea323fa"
+      sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05"
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.0"
+    version: "10.0.5"
   leak_tracker_flutter_testing:
     dependency: transitive
     description:
       name: leak_tracker_flutter_testing
-      sha256: b46c5e37c19120a8a01918cfaf293547f47269f7cb4b0058f21531c2465d6ef0
+      sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.1"
+    version: "3.0.5"
   leak_tracker_testing:
     dependency: transitive
     description:
       name: leak_tracker_testing
-      sha256: a597f72a664dbd293f3bfc51f9ba69816f84dcd403cdac7066cb3f6003f3ab47
+      sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.1"
+    version: "3.0.1"
   lints:
     dependency: transitive
     description:
@@ -119,18 +159,26 @@ packages:
     dependency: transitive
     description:
       name: material_color_utilities
-      sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a"
+      sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.0"
+    version: "0.11.1"
   meta:
     dependency: transitive
     description:
       name: meta
-      sha256: d584fa6707a52763a52446f02cc621b077888fb63b93bbcb1143a7be5a0c0c04
+      sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7
       url: "https://pub.dev"
     source: hosted
-    version: "1.11.0"
+    version: "1.15.0"
+  nested:
+    dependency: transitive
+    description:
+      name: nested
+      sha256: "03bac4c528c64c95c722ec99280375a6f2fc708eec17c7b3f07253b626cd2a20"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
   path:
     dependency: transitive
     description:
@@ -139,6 +187,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.9.0"
+  pausable_timer:
+    dependency: transitive
+    description:
+      name: pausable_timer
+      sha256: "6ef1a95441ec3439de6fb63f39a011b67e693198e7dae14e20675c3c00e86074"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.0+3"
+  provider:
+    dependency: "direct main"
+    description:
+      name: provider
+      sha256: c8a055ee5ce3fd98d6fc872478b03823ffdb448699c6ebdbbc71d59b596fd48c
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.1.2"
+  resizable_widget:
+    dependency: "direct main"
+    description:
+      name: resizable_widget
+      sha256: db2919754b93f386b9b3fb15e9f48f6c9d6d41f00a24397629133c99df86606a
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.5"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -152,6 +224,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.10.0"
+  sprintf:
+    dependency: transitive
+    description:
+      name: sprintf
+      sha256: "1fc9ffe69d4df602376b52949af107d8f5703b77cda567c4d7d86a0693120f23"
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.0"
   stack_trace:
     dependency: transitive
     description:
@@ -188,10 +268,34 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b"
+      sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.2"
+  toastification:
+    dependency: "direct main"
+    description:
+      name: toastification
+      sha256: "4d97fbfa463dfe83691044cba9f37cb185a79bb9205cfecb655fa1f6be126a13"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.0"
+  typed_data:
+    dependency: transitive
+    description:
+      name: typed_data
+      sha256: f9049c039ebfeb4cf7a7104a675823cd72dba8297f264b6637062516699fa006
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
+  uuid:
+    dependency: "direct main"
+    description:
+      name: uuid
+      sha256: a5be9ef6618a7ac1e964353ef476418026db906c4facdedaa299b7a2e71690ff
       url: "https://pub.dev"
     source: hosted
-    version: "0.6.1"
+    version: "4.5.1"
   vector_math:
     dependency: transitive
     description:
@@ -204,9 +308,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: b3d56ff4341b8f182b96aceb2fa20e3dcb336b9f867bc0eafc0de10f1048e957
+      sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d"
       url: "https://pub.dev"
     source: hosted
-    version: "13.0.0"
+    version: "14.2.5"
 sdks:
-  dart: ">=3.3.1 <4.0.0"
+  dart: ">=3.5.0 <4.0.0"
+  flutter: ">=3.18.0-18.0.pre.54"

pubspec.yaml

@@ -28,28 +28,22 @@ environment:
 # the latest version available on pub.dev. To see which dependencies have newer
 # versions available, run `flutter pub outdated`.
 dependencies:
+  cupertino_icons: ^1.0.6
+  defer_pointer: ^0.0.2
   flutter:
     sdk: flutter
-
-
-  # The following adds the Cupertino Icons font to your application.
-  # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.6
+  provider: ^6.1.2
+  resizable_widget: ^1.0.5
+  uuid: ^4.5.1
+  toastification: ^2.3.0
 
 dev_dependencies:
+  flutter_lints: ^3.0.0
   flutter_test:
     sdk: flutter
 
-  # The "flutter_lints" package below contains a set of recommended lints to
-  # encourage good coding practices. The lint set provided by the package is
-  # activated in the `analysis_options.yaml` file located at the root of your
-  # package. See that file for information about deactivating specific lint
-  # rules and activating additional ones.
-  flutter_lints: ^3.0.0
-
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec
-
 # The following section is specific to Flutter packages.
 flutter:
 
@@ -57,23 +51,25 @@ flutter:
   # included with your application, so that you can use the icons in
   # the material Icons class.
   uses-material-design: true
-
   # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_burr.jpeg
+  assets:
+    - asset/images/
   #   - images/a_dot_ham.jpeg
-
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware
-
   # For details regarding adding assets from package dependencies, see
   # https://flutter.dev/assets-and-images/#from-packages
-
   # To add custom fonts to your application, add a fonts section here,
   # in this "flutter" section. Each entry in this list should have a
   # "family" key with the font family name, and a "fonts" key with a
   # list giving the asset and other descriptors for the font. For
   # example:
+  fonts:
+    - family: RobotoCondensed
+      fonts:
+        - asset: asset/fonts/Roboto_Condensed-Medium.ttf
+          weight: 500
+
   # fonts:
   #   - family: Schyler
   #     fonts:

test/widget_test.dart

@@ -1,30 +1,37 @@
-// This is a basic Flutter widget test.
-//
-// To perform an interaction with a widget in your test, use the WidgetTester
-// utility in the flutter_test package. For example, you can send tap and scroll
-// gestures. You can also use WidgetTester to find child widgets in the widget
-// tree, read text, and verify that the values of widget properties are correct.
-
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-import 'package:flutter_canvas_editor/main.dart';
-
-void main() {
-  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
-    // Build our app and trigger a frame.
-    await tester.pumpWidget(const MyApp());
-
-    // Verify that our counter starts at 0.
-    expect(find.text('0'), findsOneWidget);
-    expect(find.text('1'), findsNothing);
-
-    // Tap the '+' icon and trigger a frame.
-    await tester.tap(find.byIcon(Icons.add));
-    await tester.pump();
-
-    // Verify that our counter has incremented.
-    expect(find.text('0'), findsNothing);
-    expect(find.text('1'), findsOneWidget);
-  });
-}
+// // This is a basic Flutter widget test.
+// //
+// // To perform an interaction with a widget in your test, use the WidgetTester
+// // utility in the flutter_test package. For example, you can send tap and scroll
+// // gestures. You can also use WidgetTester to find child widgets in the widget
+// // tree, read text, and verify that the values of widget properties are correct.
+
+// import 'package:flutter/material.dart';
+// import 'package:flutter_test/flutter_test.dart';
+
+// import 'package:flutter_canvas_editor/main.dart';
+
+// void main() {
+//   testWidgets('Counter increments smoke test', (WidgetTester tester) async {
+//     // Build our app and trigger a frame.
+//     await tester.pumpWidget(const MyApp());
+
+//     // Verify that our counter starts at 0.
+//     expect(find.text('0'), findsOneWidget);
+//     expect(find.text('1'), findsNothing);
+
+//     // Tap the '+' icon and trigger a frame.
+//     await tester.tap(find.byIcon(Icons.add));
+//     await tester.pump();
+
+//     // Verify that our counter has incremented.
+//     expect(find.text('0'), findsNothing);
+//     expect(find.text('1'), findsOneWidget);
+//   });
+// }
+
+
+// import 'package:flutter/material.dart';
+
+// void main() {
+//   Rect newRect = Rect
+// }