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';

import 'task_queue.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 historicalBrush = WhiteBoardPen();

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

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

  /// 任务队列
  late final _taskQueue = WhiteBoardTaskQueue(handler: _handleDrawTask);

  @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) {
    return LayoutBuilder(builder: (_, constraints) {
      canvasWidth = constraints.maxWidth;
      canvasHeight = constraints.maxHeight;
      final canvasSize = Size(canvasWidth, canvasHeight);
      return MouseRegion(
          cursor: SystemMouseCursors.click,
          child: GestureDetector(
              onPanDown: _onPanDown,
              onPanUpdate: _onPanUpdate,
              onPanEnd: _onPanEnd,
              onPanCancel: _onPanCancel,
              child: Stack(
                children: [
                  CustomPaint(
                    size: canvasSize,
                    painter: WhiteBoardPainter(
                      pen: historicalBrush,
                      width: canvasWidth,
                      height: canvasHeight,
                    ),
                  ),
                  CustomPaint(
                    size: canvasSize,
                    painter: WhiteBoardPainter(
                      pen: myPen,
                      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();
    myPen.clear();
  }

  /// 绘制初始数据
  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());
    }
    String myPenLine = jsonEncode({
      "u_Id": widget.userId, // 用户id
      "l_Id": "", // 线id
      "color": widget.patientColor.value.toString(), // 线的颜色
      "points": PointsUtil.compressPointsList(pointsList),
    });
    widget.sendData(myPenLine);

    /// 将自己画的线也加入队列
    _onReceiveDrawData(myPenLine);
  }

  Future<void> _handleDrawTask(Map<String, dynamic> data) async {
    /// 清除时走的逻辑
    if (data["isClear"] == "true") {
      _clearUserLines(data["u_Id"]);
      return;
    }

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

    historicalBrush.pushLine(line);

    for (int i = 0; i < pointsList.length; i++) {
      /// 非自己画的线加动画
      if (data["u_Id"] != widget.userId) {
        await Future.delayed(const Duration(milliseconds: 2));
      }
      historicalBrush.pushPoint(Point.fromList(
        pointsList[i],
      ));
    }
    historicalBrush.doneLine();
  }

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

  /// 接收绘制数据立即绘制，无 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"],
    );

    historicalBrush.pushLine(line);

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

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

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