Add diagrams for a bunch more canvas stuff

packages/diagram_generator/lib/main.dart

@@ -95,12 +95,14 @@ Future<void> main(List<String> args) async {
     AnimationStatusValueDiagramStep(controller),
     AppBarDiagramStep(controller),
     ArcDiagramStep(controller),
+    BasicShapesStep(controller),
     BlendModeDiagramStep(controller),
     BottomNavigationBarDiagramStep(controller),
     BoxDecorationDiagramStep(controller),
     BoxFitDiagramStep(controller),
     CardDiagramStep(controller),
     CheckboxListTileDiagramStep(controller),
+    ClipDiagramStep(controller),
     ColorsDiagramStep(controller),
     ColumnDiagramStep(controller),
     ContainerDiagramStep(controller),

packages/diagrams/lib/diagrams.dart

@@ -11,12 +11,14 @@ export 'src/animation_diagram.dart';
 export 'src/animation_status_value.dart';
 export 'src/app_bar.dart';
 export 'src/arc_diagram.dart';
+export 'src/basic_shapes.dart';
 export 'src/blend_mode.dart';
 export 'src/bottom_navigation_bar.dart';
 export 'src/box_decoration.dart';
 export 'src/box_fit.dart';
 export 'src/card.dart';
 export 'src/checkbox_list_tile.dart';
+export 'src/clip_diagram.dart';
 export 'src/colors.dart';
 export 'src/column.dart';
 export 'src/container.dart';

packages/diagrams/lib/src/arc_diagram.dart

@@ -10,6 +10,7 @@ import 'package:flutter/material.dart';
 import 'package:vector_math/vector_math_64.dart' hide Colors;
 
 import 'diagram_step.dart';
+import 'utils.dart';
 
 class Palette {
   const Palette({
@@ -183,29 +184,6 @@ void paintTextArc(
   }
 }
 
-/// Paints [span] to [canvas] with a given offset and alignment.
-void paintSpan(
-  Canvas canvas,
-  TextSpan span, {
-  required Offset offset,
-  Alignment alignment = Alignment.center,
-  TextAlign textAlign = TextAlign.center,
-}) {
-  final TextPainter result = TextPainter(
-    textDirection: TextDirection.ltr,
-    text: span,
-    textAlign: textAlign,
-  );
-  result.layout();
-  result.paint(
-    canvas,
-    Offset(
-      offset.dx + (result.width / -2) + (alignment.x * result.width / 2),
-      offset.dy + (result.height / -2) + (alignment.y * result.height / 2),
-    ),
-  );
-}
-
 void paintArrowHead(
   Canvas canvas,
   Offset center,
@@ -238,35 +216,6 @@ void paintArrowHead(
   );
 }
 
-/// Similar to [paintSpan] but provides a default text style.
-void paintLabel(
-  Canvas canvas,
-  String label, {
-  required Offset offset,
-  FontStyle style = FontStyle.normal,
-  FontWeight fontWeight = FontWeight.normal,
-  Color color = Colors.black45,
-  double fontSize = 14.0,
-  Alignment alignment = Alignment.center,
-  TextAlign textAlign = TextAlign.center,
-}) {
-  paintSpan(
-    canvas,
-    TextSpan(
-      text: label,
-      style: TextStyle(
-        color: color,
-        fontWeight: fontWeight,
-        fontStyle: style,
-        fontSize: fontSize,
-      ),
-    ),
-    offset: offset,
-    alignment: alignment,
-    textAlign: textAlign,
-  );
-}
-
 class ArcDiagramPainter extends CustomPainter {
   const ArcDiagramPainter({
     required this.startAngle,
@@ -397,9 +346,11 @@ class ArcDiagramPainter extends CustomPainter {
       'rect',
       offset: rect.topLeft - const Offset(0, 4),
       alignment: Alignment.topRight,
-      color: palette.subtitle,
-      fontSize: 18.0,
-      fontWeight: FontWeight.bold,
+      style: TextStyle(
+        color: palette.subtitle,
+        fontSize: 18.0,
+        fontWeight: FontWeight.bold,
+      ),
     );
 
     // Draw arrow at sweepAngle