app.dart

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';

enum GraphObjType { square, rect }

class GraphObj {
  const GraphObj({
    required this.offset,
    required this.type,
  });

  final Offset offset;
  final GraphObjType type;

  static const square = GraphObj(
    offset: Offset.zero,
    type: GraphObjType.square,
  );

  static const rect = GraphObj(
    offset: Offset.zero,
    type: GraphObjType.rect,
  );

  GraphObj copyWith({
    Offset? offset,
    GraphObjType? type,
  }) {
    return GraphObj(
      offset: offset ?? this.offset,
      type: type ?? this.type,
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  GraphObj square = GraphObj.square;
  GraphObj rect = GraphObj.rect;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InteractiveViewer(
          maxScale: 10,
          child: DragTarget<GraphObj>(
            builder: (
              BuildContext context,
              List<GraphObj?> accepted,
              List<dynamic> rejected,
            ) {
              return Stack(
                children: [
                  const GridPaper(
                    child: ColoredBox(
                      color: Colors.black,
                      child: SizedBox.expand(),
                    ),
                  ),
                  Positioned(
                    top: square.offset.dy,
                    left: square.offset.dx,
                    child: Draggable<GraphObj>(
                      data: GraphObj.square,
                      feedback: const Square(),
                      childWhenDragging: const AnimatedOpacity(
                        opacity: 0.3,
                        duration: Duration(milliseconds: 300),
                        child: Square(),
                      ),
                      child: const Square(),
                      onDragEnd: (details) {
                        setState(() {
                          square = square.copyWith(
                            offset: Offset(
                              details.offset.dx,
                              details.offset.dy,
                            ),
                          );
                        });
                      },
                    ),
                  ),
                  Positioned(
                    top: rect.offset.dy,
                    left: rect.offset.dx,
                    child: Draggable<GraphObj>(
                      data: GraphObj.rect,
                      feedback: const Rectangle(),
                      childWhenDragging: const AnimatedOpacity(
                        opacity: 0.3,
                        duration: Duration(milliseconds: 300),
                        child: Rectangle(),
                      ),
                      child: const Rectangle(),
                      onDragEnd: (details) {
                        setState(() {
                          rect = rect.copyWith(
                            offset: Offset(
                              details.offset.dx,
                              details.offset.dy,
                            ),
                          );
                        });
                      },
                    ),
                  ),
                ],
              );
            },
            onAccept: (GraphObj data) {
              switch (data.type) {
                case GraphObjType.square:
                  setState(() => square = data);

                  return;
                case GraphObjType.rect:
                  setState(() => rect = data);
              }
            },
          ),
        ),
      ),
    );
  }
}

class Square extends StatelessWidget {
  const Square({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text(
            '100 cm',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          const Gap(10),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                '100 cm',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              const Gap(10),
              Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                  border: Border.all(
                    width: 2,
                    color: Colors.white,
                  ),
                ),
              ),
              const Gap(10),
              const Text(
                '100 cm',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
              ),
            ],
          ),
          const Gap(10),
          const Text(
            '100 cm',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}

class Rectangle extends StatelessWidget {
  const Rectangle({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text(
            '100 cm',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          const Gap(10),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                '50 cm',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              const Gap(10),
              Container(
                width: 50,
                height: 100,
                decoration: BoxDecoration(
                  border: Border.all(
                    width: 2,
                    color: Colors.white,
                  ),
                ),
              ),
              const Gap(10),
              const Text(
                '50 cm',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
              ),
            ],
          ),
          const Gap(10),
          const Text(
            '100 cm',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}