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: GestureDetector(
        onDoubleTap: () {
          // print((_transformationController.value) == Matrix4.identity());
          // print(_transformationController.value.getMaxScaleOnAxis());
          

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


class CanvasProperty {
  double width;
  double height;

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