Add text editor.

* Add TextCursor class.
* Add cursor & selectedText painter.
* Add hover text cursor.
* Change TextShape factory to default height = 2.
* Add startPoint cursor to TextChangeState.

Author: ilopX

patterns/state/manipulator_state/states/_/paint_style.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 
 import '../../shapes/circle_shape.dart';
 import '../../shapes/shape.dart';
+import '../../shapes/text_shape.dart';
+import '../selections/text_change_state.dart';
 
 class PaintStyle {
   PaintStyle(this.color)
@@ -60,6 +62,25 @@ class PaintStyle {
     canvas.restore();
   }
 
+  void paintSelectedText(TextShape selectedShape, Canvas canvas) {
+    canvas.drawRect(
+      selectedShape.rect,
+      Paint()..color = color.withOpacity(0.3),
+    );
+  }
+
+  void paintTextCursor(
+      TextCursor cursor, TextShape selectedShape, Canvas canvas) {
+    canvas.drawRect(
+      Rect.fromLTWH(
+          cursor.xCoordinate,
+          selectedShape.y + (selectedShape.height - selectedShape.userHeight),
+          1.5,
+          selectedShape.userHeight),
+      Paint()..color = Colors.white,
+    );
+  }
+
   final Paint _selectStroke;
   final Paint _markerStroke;
   final Paint _markerFill;

patterns/state/manipulator_state/states/creations/text_creation_state.dart

@@ -5,7 +5,7 @@ import '../_/creation_state.dart';
 class TextCreationState extends CreationState {
   @override
   Shape createShape(double x, double y) {
-    return TextShape(x, y, 2, 2);
+    return TextShape(x, y, 2);
   }
 
   @override

patterns/state/manipulator_state/states/selections/text_change_state.dart

@@ -5,36 +5,135 @@ import '../../shapes/text_shape.dart';
 import 'selection_state.dart';
 
 class TextChangeState extends SelectionState<TextShape> {
-  TextChangeState({required super.selectedShape});
+  TextChangeState({
+    required Offset startPointer,
+    required super.selectedShape,
+  })  : _startPointer = startPointer,
+        _textCursor = TextCursor(selectedShape);
+
+  @override
+  void init() {
+    _textCursor.changePosition(_startPointer.dx, _startPointer.dy);
+    context.cursor = SystemMouseCursors.text;
+    context.update();
+  }
 
   @override
   void mouseDown(double x, double y) {
-    super.mouseDown(x, y);
     if (selectedShape.rect.contains(Offset(x, y))) {
-    } else {}
+      _textCursor.changePosition(x, y);
+      context.update();
+      return;
+    }
+
+    super.mouseDown(x, y);
   }
 
   @override
   void keyDown(KeyEvent keyEvent) {
-    if ((keyEvent is KeyDownEvent || keyEvent is KeyRepeatEvent) &&
-        keyEvent.character != null) {
-      print(keyEvent.character);
-      selectedShape.text += keyEvent.character!;
-      context.update();
+    if (keyEvent is KeyDownEvent || keyEvent is KeyRepeatEvent) {
+      if (keyEvent.physicalKey == PhysicalKeyboardKey.backspace) {
+        _textCursor.backspace();
+        context.update();
+      } else if (keyEvent.character != null) {
+        _textCursor.inputText(keyEvent.character!);
+        context.update();
+      }
     }
   }
 
   @override
   void paint(Canvas canvas) {
-    canvas.drawRect(
-      selectedShape.rect,
-      Paint()..color = Colors.pink.withOpacity(0.3),
-    );
+    context.paintStyle.paintSelectedText(selectedShape, canvas);
     super.paint(canvas);
+    context.paintStyle.paintTextCursor(_textCursor, selectedShape, canvas);
+  }
+
+  @override
+  void onHover() {
+    if (hoverShape == selectedShape) {
+      context.cursor = SystemMouseCursors.text;
+    }
   }
 
+  @override
+  void onMouseLeave() {
+    context.cursor = SystemMouseCursors.basic;
+  }
+
+  double xx0 = 0;
+  int len = 0;
+  final Offset _startPointer;
+  final TextCursor _textCursor;
+
   @override
   String toString() {
     return '${super.toString()} + Text Change State';
   }
 }
+
+class TextCursor {
+  TextCursor(this._shape);
+
+  double get xCoordinate => _xPosition;
+
+  void changePosition(double x, double y) {
+    x = x - _shape.x;
+    y = y - _shape.y;
+
+    final pos = _shape.paragraph.getPositionForOffset(Offset(x, y));
+    _charIndex = pos.offset;
+
+    final range = _shape.paragraph.getBoxesForRange(
+      pos.offset - 1,
+      pos.offset,
+    );
+
+    _xPosition = _shape.x;
+
+    if (range.isNotEmpty) {
+      _xPosition += range.first.right;
+    }
+  }
+
+  String inputText(String char) {
+    final start = _shape.text.substring(0, _charIndex);
+    final end = _shape.text.substring(_charIndex);
+    _shape.text = '$start$char$end';
+    final range = _shape.paragraph.getBoxesForRange(_charIndex, ++_charIndex);
+    _xPosition = _shape.x;
+
+    if (range.isNotEmpty) {
+      _xPosition += range.first.right;
+    }
+
+    return '$start$char$end';
+  }
+
+  void backspace() {
+    if (_charIndex <= 0) {
+      return;
+    }
+
+    final start = _shape.text.substring(0, _charIndex - 1);
+    final end = _shape.text.length > start.length
+        ? _shape.text.substring(_charIndex)
+        : '';
+
+    _shape.text = '$start$end';
+
+    final range = _shape.paragraph.getBoxesForRange(_charIndex - 1, _charIndex);
+    _xPosition = _shape.x;
+
+    if (range.isNotEmpty) {
+      _xPosition += range.first.left;
+    } else {
+      _xPosition += _shape.width;
+    }
+    _charIndex--;
+  }
+
+  final TextShape _shape;
+  int _charIndex = 0;
+  double _xPosition = 0;
+}

patterns/state/manipulator_state/states/selections/text_resize_marker/text_resize_marker_state.dart

@@ -8,8 +8,10 @@ class TextSizeMarkerState extends Marker<TextShape> {
 
   @override
   void mouseDragAction(double x, double y) {
-    final newHeight = y - selectedShape.y;
-    selectedShape.resize(-1, newHeight);
+    final newHeight =
+        y - selectedShape.y - (selectedShape.height - selectedShape.userHeight);
+
+    selectedShape.resize(0, newHeight);
   }
 
   @override

patterns/state/manipulator_state/states/selections/text_resize_state.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import '../../shapes/text_shape.dart';
 import '../_/sub_states/parent_state.dart';
 import 'text_change_state.dart';
@@ -11,9 +13,10 @@ class TextResizeState extends ParentState<TextShape> {
   }
 
   @override
-  void mouseDoubleClick() {
+  void mouseDoubleClick(double x, double y) {
     context.changeState(
       TextChangeState(
+        startPointer: Offset(x, y),
         selectedShape: selectedShape,
       ),
     );