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

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


  @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: [

            // ! 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: 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()
          ],
        ),
      ),
    );
  }
}


class CanvasProperty {
  double width;
  double height;

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