flutter_canvas_template_editor/lib/main.dart

import 'dart:math';

import 'package:defer_pointer/defer_pointer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_canvas_editor/canvas_setup_page.dart';
import 'package:flutter_canvas_editor/history.dart';
import 'package:flutter_canvas_editor/providers/editor.dart';
import 'package:flutter_canvas_editor/snaptest_page.dart';
import 'package:flutter_canvas_editor/test_page.dart';
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(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Editor()),
        ChangeNotifierProvider(create: (_) => EditorTest()),
      ],
      child: ToastificationWrapper(
        child: MaterialApp(
          theme: ThemeData(
            textTheme: TextTheme(
              // bodyMedium: TextStyle(fontSize: 20)
            )
          ),
          home: HomePage(),
        ),
      ),
    );
  }
}

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;



  @override
  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();
  }


  // functions
  void setInitialZoom() {
    Provider.of<Editor>(context, listen: false).setCanvasTransformationInitialZoom(context);
  }

  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;
        });
      }
    });
  }


  @override
  Widget build(BuildContext context) {
    return DeferredPointerHandler(
      link: Provider.of<Editor>(context).textboxResizerDeferredPointerHandlerLink,
      child: Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          title: Text('Template Editor'),
          actions: [

            IconButton(
              onPressed: Provider.of<Editor>(context, listen: false).stateStack.length <= 1 ? null : () {
                Provider.of<Editor>(context, listen: false).undo();
              },
              icon: Icon(Icons.undo)
            ),
            IconButton(
              onPressed: Provider.of<Editor>(context, listen: false).redoStack.isEmpty ? null : () {
                Provider.of<Editor>(context, listen: false).redo();
              },
              icon: Icon(Icons.redo)
            ),

            // ! DEBUG BUTTON
            IconButton(
              onPressed: () {
                Provider.of<Editor>(context, listen: false).buildJSON();
              }, 
              icon: Icon(Icons.bug_report_outlined)
            ),

            IconButton(
              onPressed: () {
                Navigator.push(
                  context, 
                  MaterialPageRoute(builder:  (context) => CanvasSetupPage(),)
                );
              }, 
              icon: Icon(Icons.link)
            )
          ],
        ),
        body: Column(
          children: [
            Expanded(
              child: GestureDetector(
                onTap: () {
                  print('Main Gesture Detector Tapped!');
                  setState(() {
                    Provider.of<Editor>(context, listen: false).unSelectElm();
                  });
                },
                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: Padding(
                            padding: const EdgeInsets.all(16),
                            child: CustomPaint(
                              size: Size(Provider.of<Editor>(context).canvasProperty.width, Provider.of<Editor>(context).canvasProperty.height),
                              foregroundPainter: CanvasAlignmentHelper(
                                showHorizontalCenterLine: Provider.of<Editor>(context).shouldShowHorizontalCenterLine, 
                                showVerticalCenterLine: Provider.of<Editor>(context).shouldShowVerticalCenterLine
                              ),
                              child: Container(
                                // margin: EdgeInsets.all(16),
                                color: Colors.white,
                                height: Provider.of<Editor>(context).canvasProperty.height,
                                width: Provider.of<Editor>(context).canvasProperty.width,
                                child: Stack(
                                  children: [
                                    for (ElementState elementProperty in Provider.of<Editor>(context).currentElementsState) ... [
                                      ElementWidget(
                                        elementProperty: elementProperty,
                                        canvasProperty: Provider.of<Editor>(context).canvasProperty,
                                        globalKey: elementProperty.elementKey,
                                      )
                                    ]
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    
                    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()
          ],
        ),
      ),
    );
  }
}


class CanvasProperty {
  double width;
  double height;

  CanvasProperty({
    required this.width,
    required this.height,
  });

  Offset getCanvasCenterPoint() {
    return Offset(width / 2, height / 2);
  }
}


class CanvasAlignmentHelper extends CustomPainter {
  CanvasAlignmentHelper({required  this.showHorizontalCenterLine, required this.showVerticalCenterLine});

  bool showHorizontalCenterLine;
  bool showVerticalCenterLine;

  @override
  void paint(Canvas canvas, Size size) {
    // ? horizontal center line
    if (showHorizontalCenterLine) {
      canvas.drawLine(
        Offset(size.width / 2, 0),
        Offset(size.width / 2, size.height),
        Paint()
          ..color = Colors.orange
          ..strokeWidth = 1.5
      );
    }

    // ? vertial center line
    if (showVerticalCenterLine) {
      canvas.drawLine(
        Offset(0, size.height / 2),
        Offset(size.width, size.height / 2),
        Paint()
          ..color = Colors.orange
          ..strokeWidth = 1.5
      );
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }

}