fis_lib_business_components/lib/components/white_board/white_board.dart

import 'dart:convert';

import 'package:fis_common/event/event_type.dart';
import 'package:fis_lib_business_components/components/white_board/utils.dart';
import 'package:fis_lib_business_components/components/white_board/structure.dart';
import 'package:fis_lib_business_components/components/white_board/white_board_painter.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';

class FWhiteBoard extends StatefulWidget implements FWidget {
  const FWhiteBoard({
    key,
    required this.initData,
    required this.userId,
    required this.patientColor,
    required this.paintType,
    required this.sendData,
    required this.onReceiveData,
    required this.onClearCanavs,
  });

  /// 初始画板副本数据
  final List<String> initData;

  /// 用户id
  final String userId;

  /// 用户颜色
  final Color patientColor;

  /// 当前绘制模式
  final PaintType paintType;

  /// 发送数据（接 JsonRPC）
  final void Function(String data) sendData;

  /// 接收数据（接 WebSocket）
  final FEventHandler<String> onReceiveData;

  /// 画布清除事件
  final FEventHandler<String> onClearCanavs;

  @override
  State<FWhiteBoard> createState() => _FWhiteBoardState();
}

class _FWhiteBoardState extends State<FWhiteBoard> {
  /// 画布尺寸
  late double canvasWidth = 0.0;
  late double canvasHeight = 0.0;

  /// 当前用户的画笔
  WhiteBoardPen myPen = WhiteBoardPen();

  /// 其他人的画笔
  WhiteBoardPen otherPen = WhiteBoardPen();

  /// 当前用户的画笔颜色
  Color get myPenColor => widget.patientColor;

  /// 固定的画笔粗细
  static const double strokeWidth = 3.0;

  /// 异步绘制队列
  List<String> _asyncDrawQueue = [];

  /// 异步绘制锁
  bool _asyncDrawLock = false;

  @override
  void initState() {
    super.initState();
    widget.onReceiveData.addListener((sender, data) {
      _onReceiveDrawData(data);
    });
    widget.onClearCanavs.addListener((sender, userId) {
      _clearUserLines(userId);
    });

    /// 加载完后一帧绘制初始数据
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _paintInitData();
    });
  }

  @override
  Widget build(BuildContext context) {
    canvasWidth = MediaQuery.of(context).size.width;
    canvasHeight = MediaQuery.of(context).size.height;
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      child: GestureDetector(
          onPanDown: _onPanDown,
          onPanUpdate: _onPanUpdate,
          onPanEnd: _onPanEnd,
          onPanCancel: _onPanCancel,
          onDoubleTap: myPen.clear,
          child: Stack(
            children: [
              CustomPaint(
                size: MediaQuery.of(context).size,
                painter: WhiteBoardPainter(
                  pen: myPen,
                  width: canvasWidth,
                  height: canvasHeight,
                ),
              ),
              CustomPaint(
                size: MediaQuery.of(context).size,
                painter: WhiteBoardPainter(
                  pen: otherPen,
                  width: canvasWidth,
                  height: canvasHeight,
                ),
              ),
            ],
          )),
    );
  }

  /// 按下时，生成新的线实体
  void _onPanDown(DragDownDetails details) {
    Line line = Line(
      color: myPenColor,
      strokeWidth: strokeWidth,
      paintType: widget.paintType,
      userId: widget.userId,
    );
    myPen.pushLine(line);
  }

  /// 拖动时，生成新的点实体，加入到当前线实体中
  void _onPanUpdate(DragUpdateDetails details) {
    myPen.pushPoint(Point.fromOffset(
      details.localPosition,
      canvasWidth,
      canvasHeight,
    ));
  }

  /// 抬起时，发送数据
  void _onPanEnd(DragEndDetails details) {
    _sentDrawAction();
    myPen.doneLine();
  }

  /// 绘制初始数据
  void _paintInitData() {
    for (int i = 0; i < widget.initData.length; i++) {
      _onReceiveDrawDataImmediately(widget.initData[i]);
    }
  }

  /// 发送绘制指令
  void _sentDrawAction() {
    List<List<double>> pointsList = [];
    for (int i = 0; i < myPen.activeLine.points.length; i++) {
      pointsList.add(myPen.activeLine.points[i].toList());
    }
    print(widget.patientColor.value.toString());
    widget.sendData(jsonEncode({
      "u_Id": widget.userId, // 用户id
      "l_Id": "", // 线id
      "color": widget.patientColor.value.toString(), // 线的颜色
      "points": PointsUtil.compressPointsList(pointsList),
    }));
  }

  /// 接收绘制数据【如果存在数据正在绘制，其他的加入绘制队列，等待当前绘制完成继续绘制】
  void _onReceiveDrawData(String jsonData) async {
    if (_asyncDrawLock) {
      _asyncDrawQueue.add(jsonData);
      return;
    }
    var data = jsonDecode(jsonData);

    /// 清除时走的逻辑
    if (data["isClear"] == "true") {
      _clearUserLines(data["u_Id"]);
      return;
    }
    _asyncDrawLock = true;

    List<dynamic> pointsList = PointsUtil.decompressPointsList(data["points"]);
    Line line = Line(
      color: Color(int.parse(data["color"])),
      strokeWidth: strokeWidth,
      userId: data["u_Id"],
    );

    otherPen.pushLine(line);

    for (int i = 0; i < pointsList.length; i++) {
      otherPen.pushPoint(Point.fromList(
        pointsList[i],
      ));
      await Future.delayed(const Duration(milliseconds: 2));
    }
    otherPen.doneLine();
    _asyncDrawLock = false;

    /// 判断如果队列存在数据，继续绘制
    if (_asyncDrawQueue.isNotEmpty) {
      _onReceiveDrawData(_asyncDrawQueue.removeAt(0));
    }
  }

  /// 接收绘制数据立即绘制，无 Future.delayed
  void _onReceiveDrawDataImmediately(String jsonData) {
    var data = jsonDecode(jsonData);
    List<dynamic> pointsList = PointsUtil.decompressPointsList(data["points"]);
    Line line = Line(
      color: Color(int.parse(data["color"])),
      strokeWidth: strokeWidth,
      userId: data["u_Id"],
    );

    otherPen.pushLine(line);

    for (int i = 0; i < pointsList.length; i++) {
      otherPen.pushPoint(Point.fromList(
        pointsList[i],
      ));
    }
    otherPen.doneLine();
  }

  void _clearUserLines(String userId) {
    myPen.clearCurrectUserLines(userId);
    otherPen.clearCurrectUserLines(userId);
  }

  void _onPanCancel() {
    myPen.removeEmpty();
  }
}