Add "State" Pattern as Shape Manipulator example.

[ilopX]

State Pattern

State is a behavioral design pattern that lets an object alter its behavior when its internal state
changes. It appears as if the object changed its class.

Tutorial: here.

Online demo:

Click on the picture to see the demo.

Video

video.mp4

Diagram:

Client code:

Change FreeState to MoveState:

class FreeState extends ManipulationState {
  @override
  void mouseDown(double x, double y) {
    tryToSelectAndStartMovingShape(x, y);
  }

  bool tryToSelectAndStartMovingShape(double x, double y) {
    final selectedShape = context.shapes.findShapeByCoordinates(x, y);

    context.changeState(
      MoveState(
        startX: x,
        startY: y,
        selectedShape: selectedShape,
      ),
    );

    return true;
  }
}

Change MoveState to ResizableState:

class MoveState extends SelectionState {
  @override
  void mouseMove(double x, double y) {
    selectedShape.move(x, y);
    context.update();
  }

  @override
  void mouseUp() {
    context.changeState(
      selectedShape.createSelectionState(),
    );
  }
}

Each shape has its own state manipulator:

class RectangleShape extends BaseShape {
  @override
  SelectionState createSelectionState() {
    return ResizableState(selectedShape: this);
  }
}

class CircleShape extends BaseShape {
  @override
  SelectionState createSelectionState() {
    return InnerRadiusState(selectedShape: this);
  }
}