import 'dart:async';
import 'dart:math';
import 'dart:ui';

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

/// max points.length

void main() {
  runApp(MaterialApp(
    home: Scaffold(body: Board()),
    debugShowCheckedModeBanner: false,
  ));
}

final size = window.physicalSize / window.devicePixelRatio;

const maxPoints = 29;

class Board extends StatefulWidget {
  @override
  _BoardState createState() => _BoardState();
}

class _BoardState extends State<Board> {
  final List<Offset> _points = [];

  final StreamController<List<Offset>> _streamer =
      StreamController<List<Offset>>.broadcast();

  Stream<List<Offset>> get _point$ => _streamer.stream;

  @override
  void initState() {
    super.initState();
    _streamer.add(_points);
  }

  @override
  Widget build(BuildContext context) => MouseRegion(
        onHover: (details) => _streamer.add(_points..add(details.position)),
        child: StreamBuilder<List<Offset>>(
          initialData: _points,
          stream: _point$.map(
            (points) => points.skip(max(0, points.length - maxPoints)).toList(),
          ),
          builder: (context, snapshot) => CustomPaint(
            size: size,
            painter: Painter(snapshot.data),
          ),
        ),
      );

  @override
  void dispose() {
    _streamer.close();
    super.dispose();
  }
}

class Painter extends CustomPainter {
  static const radius = 2.0;

  static final fill = Paint()..color = Colors.red;

  static final stroke = Paint()
    ..color = Colors.grey
    ..style = PaintingStyle.stroke;

  final List<Offset> points;

  const Painter(this.points);

  @override
  void paint(Canvas canvas, Size size) {
    if (points.isEmpty) return;

    for (final point in points) canvas.drawCircle(point, radius, fill);

    for (int i = 0; i < points.length - 1; i++) {
      canvas.drawLine(points[i], points[i + 1], stroke);
    }
  }

  @override
  bool shouldRepaint(Painter oldDelegate) =>
      !listEquals(points, oldDelegate.points);
}