Arrows and marks

[wwawrzy]

I am creating an application in which the option to add arrows or additional markings on the fields would be useful:

For example,
arrays[....]
marks[...]

This would allow, for example, indicating potential attacks, weak squares, etc., adding good and bad moves if it were possible to configure the colors of the displayed arrows.

Is there a chance to add this functionality?

[alexobviously]

Yep, I also have a production app that has this functionality outside of Squares and I would like to move it into Squares, so this is definitely on the agenda. I made it an issue (#18).

[Mercutio1243]

Can confirm that this would be really helpful!

[Mercutio1243]

JFYI: On marks, I was able to leverage the existing generateHighlights() method and provide additional moves/squares ids to the BoardController / Board. For this, I needed to modify the source code of squares in my local version, but maybe there is even an easier way to do it.

As for the arrows, unfortunately, I am at a loss on how to do this and would appreciate any advice.

[alexobviously]

I'm considering working on this quite soon. There are some hurdles to overcome regarding making this behaviour flexible but without compromising the simplicity of the base use cases.

What would be useful for me is if you could tell me what sort of UX you would want to have with this - i.e. how would you imagine a user drawing arrows? Are they holding a modifier key (cmd/ctrl/etc) and dragging/clicking? On mobile, what's a good way of doing this, do you know any apps that have this already? In the app I mentioned earlier (closed source sadly since it was for a client), the annotation board is totally separate to the play board, so we didn't have to consider supporting those parallel experiences there.

[Mercutio1243]

I think there are two cases here:

1. What I was originally referring to, is way to provide the BoardController with a variable that includes information about arrows that should shown between each two squares (optimally also selecting a color). This would be very helpful for showing, for instance, a best move on a current board or a played move. Chess.com and Lichess have these arrows for showing the best engine moves:
   

2. The user could also define arrows on the displayed board, which is what I understand you are referring to. This functionality would be very helpful as well. I know of a chess learning app that implements this by letting the user long pressing the first square and then selecting the arrow color and then long pressing the end arrow square:
   
   
   

This would be at least one way to do it in the second case...

[Mercutio1243]

In the last days, I had some time to set up methods that create Arrow Widgets, which can then be fed into the squares chess board as overlays. The result looks like this:

Let me share the code here, maybe it will be of interest for someone. Reach out, if you have any questions.

import 'package:flutter/material.dart';

class ChessBoardWidget extends StatefulWidget {
  @override
  _ChessBoardWidgetState createState() => _ChessBoardWidgetState();
}

class _ChessBoardWidgetState extends State<ChessBoardWidget> {
  bool isBoardReadyForArrows = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => initiateArrows()); // To build the arrow widgets, the regular chess board needs to be rendered beforehand without arrows to be able to infer the size of the board and thus the arrow sizes
  }

  void initiateArrows() {
    if (chessBoardWidgetKey.currentContext != null) {
      final RenderBox box = chessBoardWidgetKey.currentContext!.findRenderObject() as RenderBox;
      globalSizeBoardWidget = box.size;
      setState(() {
        isBoardReadyForArrows = true;
      });
    }
  }

  List<Widget> createListOfArrowWidgets() {
    List<Widget> listOfArrowWidgets = [];
    if (isBoardReadyForArrows) {
      ArrowInfoData arrowInfoData = [...]; // your code here to build ArrowInfoData objects depending on your specifications: you need a squares move object, the information which orientation the board is, and a Color object for the color of the arrow; instead of using a move object, you could also change the code to directly accept the board squares (as int) or coordinates.
      listOfArrowWidgets.add(ArrowWidget(arrowInfoData: arrowInfoData,  sizeChessBoardWidget: globalSizeBoardWidget));
    }
    return listOfArrowWidgets;
  }

  @override
  Widget build(BuildContext context) {
    return BoardController(
      key: chessBoardWidgetKey,
      [...] // your specifications here
      overlays: createListOfArrowWidgets(),
    );
  }
}

class ArrowPainter extends CustomPainter {
  ArrowInfoData arrowInfoData;

  ArrowPainter(this.arrowInfoData);

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }

  @override
  void paint(Canvas canvas, Size size) {
    const double arrowHeadSizeSizeFactor = 0.1;
    final double strokeWidth = size.width * 1 / 8 * 0.25;
    final double shiftToMiddleOfSquare = size.width * 1 / 8 * 0.5;
    double arrowHeadSize = size.width * arrowHeadSizeSizeFactor;

    final paint = Paint()
      ..color = arrowInfoData.color
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.fill;

    // Calculate line of arrow
    ArrowCoordinateTuple arrowCoordinateTuple = ArrowCoordinateTuple(ArrowCoordinate.squareIntToCoordinate(arrowInfoData.move.from, arrowInfoData.isUserWhite), ArrowCoordinate.squareIntToCoordinate(arrowInfoData.move.to, arrowInfoData.isUserWhite));

    final pStartingPoint = Offset(shiftToMiddleOfSquare + arrowCoordinateTuple.arrowStartingCoordinate.x * size.width * 1 / 8, shiftToMiddleOfSquare + arrowCoordinateTuple.arrowStartingCoordinate.y * size.height * 1 / 8);
    final pEndingPoint = Offset(shiftToMiddleOfSquare + arrowCoordinateTuple.arrowEndingCoordinate.x * size.width * 1 / 8, shiftToMiddleOfSquare + arrowCoordinateTuple.arrowEndingCoordinate.y * size.height * 1 / 8);
    final angle = atan2(pEndingPoint.dy - pStartingPoint.dy, pEndingPoint.dx - pStartingPoint.dx);

    // Calculate for triangular arrowhead

    if (arrowCoordinateTuple.distance < 2) {
      arrowHeadSize = arrowHeadSize * 0.9;
    }

    final pArrowHeadSide1 = Offset(pEndingPoint.dx - arrowHeadSize * cos(angle - pi / 6), pEndingPoint.dy - arrowHeadSize * sin(angle - pi / 6));
    final pArrowHeadSide2 = Offset(pEndingPoint.dx - arrowHeadSize * cos(angle + pi / 6), pEndingPoint.dy - arrowHeadSize * sin(angle + pi / 6));
    final baseLength = (pArrowHeadSide1 - pArrowHeadSide2).distance;
    final triangleHeight = sqrt(pow(arrowHeadSize, 2) - pow(baseLength / 2, 2));

    final pEndingPointBase = Offset(
      pEndingPoint.dx - triangleHeight * cos(angle),
      pEndingPoint.dy - triangleHeight * sin(angle),
    );

    // Draw  line of  arrow
    paint.style = PaintingStyle.stroke; // Stroke style for the line
    canvas.drawLine(pStartingPoint, pEndingPointBase, paint);

    // Draw triangular arrowhead
    paint.style = PaintingStyle.fill; // Fill style for the triangle
    final path = Path()
      ..moveTo(pEndingPoint.dx, pEndingPoint.dy)
      ..lineTo(pArrowHeadSide1.dx, pArrowHeadSide1.dy)
      ..lineTo(pArrowHeadSide2.dx, pArrowHeadSide2.dy)
      ..close();
    canvas.drawPath(path, paint);
  }
}

class ArrowWidget extends StatelessWidget {
  final ArrowInfoData arrowInfoData;
  final Size sizeChessBoardWidget;

  ArrowWidget({required this.arrowInfoData, required this.sizeChessBoardWidget});

  @override
  Widget build(BuildContext context) {
    return IgnorePointer(
      child: CustomPaint(
        painter: ArrowPainter(arrowInfoData),
        size: Size(sizeChessBoardWidget.width - 1, sizeChessBoardWidget.height - 1), // - 1 since the ArrowWidget is otherwise too large and will cause a rendererror with squares widget
      ),
    );
  }
}

class ArrowCoordinateTuple {
  final ArrowCoordinate arrowStartingCoordinate;
  final ArrowCoordinate arrowEndingCoordinate;

  ArrowCoordinateTuple(this.arrowStartingCoordinate, this.arrowEndingCoordinate);

  double get distance {
    final dx = arrowEndingCoordinate.x - arrowStartingCoordinate.x;
    final dy = arrowEndingCoordinate.y - arrowStartingCoordinate.y;
    return sqrt(dx * dx + dy * dy);
  }
}

class ArrowCoordinate {
  final int x;
  final int y;

  ArrowCoordinate(this.x, this.y);

  static ArrowCoordinate squareIntToCoordinate(int square, bool isUserWhite) {
    int x = square % 8;
    int y = square ~/ 8;
    if (!isUserWhite) {
      // In case board is from perspective of black and therefore upside down
      x = 7 - x;
      y = 7 - y;
    }
    return ArrowCoordinate(x, y);
  }
}

class ArrowInfoData {
  Move move;
  bool isUserWhite;
  Color color;

  ArrowInfoData(this.move, this.isUserWhite, this.color);
}