Annotation class abstract

Base annotation class that can be placed in the node flow

Creating Custom Annotations

To create a custom annotation, simply extend this class and implement:

1. Size get size - Return the dimensions for automatic hit testing
2. Widget buildWidget(BuildContext context) - Return your custom widget

Example:

class CustomAnnotation extends Annotation {
  final String title;
  final double width;
  final double height;

  CustomAnnotation({
    required super.id,
    required Offset position,
    required this.title,
    this.width = 150.0,
    this.height = 80.0,
  }) : super(
    type: 'custom',
    initialPosition: position,
  );

  @override
  Size get size => Size(width, height);

  @override
  Widget buildWidget(BuildContext context) {
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        color: Colors.purple,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Center(child: Text(title)),
    );
  }

  @override
  Map<String, dynamic> toJson() => {'title': title, 'width': width, 'height': height};

  @override
  void fromJson(Map<String, dynamic> json) {
    // Update properties from json if needed
  }
}

The framework automatically handles:

• Hit testing via containsPoint() using your size
• Positioning and coordinate transforms
• Selection visual feedback
• Drag and drop interactions (if isInteractive = true)
• Z-index layering and rendering order
• MobX reactivity for position and visibility changes