flutter/examples/api/lib/material/selection_area/selection_area.2.dart

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:math';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

/// Flutter code sample for [SelectionArea].

void main() => runApp(const SelectionAreaColorTextRedExampleApp());

class SelectionAreaColorTextRedExampleApp extends StatelessWidget {
  const SelectionAreaColorTextRedExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

typedef LocalSpanRange = ({int startOffset, int endOffset});

class _MyHomePageState extends State<MyHomePage> {
  final SelectionListenerNotifier _selectionNotifier = SelectionListenerNotifier();
  final ContextMenuController _menuController = ContextMenuController();
  final GlobalKey<SelectionAreaState> selectionAreaKey = GlobalKey<SelectionAreaState>();

  // The data of the top level TextSpans. Each TextSpan is mapped to a LocalSpanRange,
  // which is the range the textspan covers relative to the SelectionListener it is under.
  Map<LocalSpanRange, TextSpan> dataSourceMap = <LocalSpanRange, TextSpan>{};
  // The data of the bulleted list contained within a WidgetSpan. Each bullet is mapped
  // to a LocalSpanRange, being the range the bullet covers relative to the SelectionListener
  // it is under.
  Map<LocalSpanRange, TextSpan> bulletSourceMap = <LocalSpanRange, TextSpan>{};
  Map<int, Map<LocalSpanRange, TextSpan>> widgetSpanMaps = <int, Map<LocalSpanRange, TextSpan>>{};
  // The origin data used to restore the demo to its initial state.
  late final Map<LocalSpanRange, TextSpan> originSourceData;
  late final Map<LocalSpanRange, TextSpan> originBulletSourceData;

  void _initData() {
    const String bulletListTitle = 'This is some bulleted list:\n';
    final List<String> bullets = <String>[for (int i = 1; i <= 7; i += 1) '• Bullet $i'];
    final TextSpan bulletedList = TextSpan(
      text: bulletListTitle,
      children: <InlineSpan>[
        WidgetSpan(
          child: Column(
            children: <Widget>[
              for (final String bullet in bullets)
                Padding(padding: const EdgeInsets.only(left: 20.0), child: Text(bullet)),
            ],
          ),
        ),
      ],
    );

    int currentOffset = 0;
    // Map bulleted list span to a local range using its concrete length calculated
    // from the length of its title and each individual bullet.
    dataSourceMap[(
          startOffset: currentOffset,
          endOffset: bulletListTitle.length + bullets.join().length,
        )] =
        bulletedList;
    currentOffset += bulletListTitle.length;
    widgetSpanMaps[currentOffset] = bulletSourceMap;
    // Map individual bullets to a local range.
    for (final String bullet in bullets) {
      bulletSourceMap[(
        startOffset: currentOffset,
        endOffset: currentOffset + bullet.length,
      )] = TextSpan(text: bullet);
      currentOffset += bullet.length;
    }

    const TextSpan secondTextParagraph = TextSpan(
      text: 'This is some text in a text widget.',
      children: <InlineSpan>[TextSpan(text: ' This is some more text in the same text widget.')],
    );
    const TextSpan thirdTextParagraph = TextSpan(text: 'This is some text in another text widget.');
    // Map second and third paragraphs to local ranges.
    dataSourceMap[(
          startOffset: currentOffset,
          endOffset:
              currentOffset + secondTextParagraph.toPlainText(includeSemanticsLabels: false).length,
        )] =
        secondTextParagraph;
    currentOffset += secondTextParagraph.toPlainText(includeSemanticsLabels: false).length;
    dataSourceMap[(
          startOffset: currentOffset,
          endOffset:
              currentOffset + thirdTextParagraph.toPlainText(includeSemanticsLabels: false).length,
        )] =
        thirdTextParagraph;

    // Save the origin data so we can revert our changes.
    originSourceData = <LocalSpanRange, TextSpan>{};
    for (final MapEntry<LocalSpanRange, TextSpan> entry in dataSourceMap.entries) {
      originSourceData[entry.key] = entry.value;
    }
    originBulletSourceData = <LocalSpanRange, TextSpan>{};
    for (final MapEntry<LocalSpanRange, TextSpan> entry in bulletSourceMap.entries) {
      originBulletSourceData[entry.key] = entry.value;
    }
  }

  void _handleSelectableRegionStatusChanged(SelectableRegionSelectionStatus status) {
    if (_menuController.isShown) {
      ContextMenuController.removeAny();
    }
    if (_selectionNotifier.selection.status != SelectionStatus.uncollapsed ||
        status != SelectableRegionSelectionStatus.finalized) {
      return;
    }
    if (selectionAreaKey.currentState == null ||
        !selectionAreaKey.currentState!.mounted ||
        selectionAreaKey.currentState!.selectableRegion.contextMenuAnchors.secondaryAnchor ==
            null) {
      return;
    }
    final SelectedContentRange? selectedContentRange = _selectionNotifier.selection.range;
    if (selectedContentRange == null) {
      return;
    }
    _menuController.show(
      context: context,
      contextMenuBuilder: (BuildContext context) {
        return TapRegion(
          onTapOutside: (PointerDownEvent event) {
            if (_menuController.isShown) {
              ContextMenuController.removeAny();
            }
          },
          child: AdaptiveTextSelectionToolbar.buttonItems(
            buttonItems: <ContextMenuButtonItem>[
              ContextMenuButtonItem(
                onPressed: () {
                  ContextMenuController.removeAny();
                  _colorSelectionRed(
                    selectedContentRange,
                    dataMap: dataSourceMap,
                    coloringChildSpan: false,
                  );
                  selectionAreaKey.currentState!.selectableRegion.clearSelection();
                },
                label: 'Color Text Red',
              ),
            ],
            anchors: TextSelectionToolbarAnchors(
              primaryAnchor:
                  selectionAreaKey
                      .currentState!
                      .selectableRegion
                      .contextMenuAnchors
                      .secondaryAnchor!,
            ),
          ),
        );
      },
    );
  }

  void _colorSelectionRed(
    SelectedContentRange selectedContentRange, {
    required Map<LocalSpanRange, TextSpan> dataMap,
    required bool coloringChildSpan,
  }) {
    for (final MapEntry<LocalSpanRange, TextSpan> entry in dataMap.entries) {
      final LocalSpanRange entryLocalRange = entry.key;
      final int normalizedStartOffset = min(
        selectedContentRange.startOffset,
        selectedContentRange.endOffset,
      );
      final int normalizedEndOffset = max(
        selectedContentRange.startOffset,
        selectedContentRange.endOffset,
      );
      if (normalizedStartOffset > entryLocalRange.endOffset) {
        continue;
      }
      if (normalizedEndOffset < entryLocalRange.startOffset) {
        continue;
      }
      // The selection details is covering the current entry so let's color the range red.
      final TextSpan rawSpan = entry.value;
      // Determine local ranges relative to rawSpan.
      final int clampedLocalStart =
          normalizedStartOffset < entryLocalRange.startOffset
              ? entryLocalRange.startOffset
              : normalizedStartOffset;
      final int clampedLocalEnd =
          normalizedEndOffset > entryLocalRange.endOffset
              ? entryLocalRange.endOffset
              : normalizedEndOffset;
      final int startOffset = (clampedLocalStart - entryLocalRange.startOffset).abs();
      final int endOffset = startOffset + (clampedLocalEnd - clampedLocalStart).abs();
      final List<InlineSpan> beforeSelection = <InlineSpan>[];
      final List<InlineSpan> insideSelection = <InlineSpan>[];
      final List<InlineSpan> afterSelection = <InlineSpan>[];
      int count = 0;
      rawSpan.visitChildren((InlineSpan child) {
        if (child is TextSpan) {
          final String? rawText = child.text;
          if (rawText != null) {
            if (count < startOffset) {
              final int newStart = min(startOffset - count, rawText.length);
              final int globalNewStart = count + newStart;
              // Collect spans before selection.
              beforeSelection.add(
                TextSpan(style: child.style, text: rawText.substring(0, newStart)),
              );
              // Check if this span also contains the selection.
              if (globalNewStart == startOffset && newStart < rawText.length) {
                final int newStartAfterSelection = min(
                  newStart + (endOffset - startOffset),
                  rawText.length,
                );
                final int globalNewStartAfterSelection = count + newStartAfterSelection;
                insideSelection.add(
                  TextSpan(
                    style: const TextStyle(color: Colors.red).merge(entry.value.style),
                    text: rawText.substring(newStart, newStartAfterSelection),
                  ),
                );
                // Check if this span contains content after the selection.
                if (globalNewStartAfterSelection == endOffset &&
                    newStartAfterSelection < rawText.length) {
                  afterSelection.add(
                    TextSpan(style: child.style, text: rawText.substring(newStartAfterSelection)),
                  );
                }
              }
            } else if (count >= endOffset) {
              // Collect spans after selection.
              afterSelection.add(TextSpan(style: child.style, text: rawText));
            } else {
              // Collect spans inside selection.
              final int newStart = min(endOffset - count, rawText.length);
              final int globalNewStart = count + newStart;
              insideSelection.add(
                TextSpan(
                  style: const TextStyle(color: Colors.red),
                  text: rawText.substring(0, newStart),
                ),
              );
              // Check if this span contains content after the selection.
              if (globalNewStart == endOffset && newStart < rawText.length) {
                afterSelection.add(TextSpan(style: child.style, text: rawText.substring(newStart)));
              }
            }
            count += rawText.length;
          }
        } else if (child is WidgetSpan) {
          if (!widgetSpanMaps.containsKey(count)) {
            // We have arrived at a WidgetSpan but it is unaccounted for.
            return true;
          }
          final Map<LocalSpanRange, TextSpan> widgetSpanSourceMap = widgetSpanMaps[count]!;
          if (count < startOffset &&
              count +
                      (widgetSpanSourceMap.keys.last.endOffset -
                              widgetSpanSourceMap.keys.first.startOffset)
                          .abs() <
                  startOffset) {
            // When the count is less than the startOffset and we are at a widgetspan
            // it is still possible that the startOffset is somewhere within the widgetspan,
            // so we should try to color the selection red for the widgetspan.
            //
            // If the calculated widgetspan length would not extend the count past the
            // startOffset then add this widgetspan to the beforeSelection, and
            // continue walking the tree.
            beforeSelection.add(child);
            count +=
                (widgetSpanSourceMap.keys.last.endOffset -
                        widgetSpanSourceMap.keys.first.startOffset)
                    .abs();
            return true;
          } else if (count >= endOffset) {
            afterSelection.add(child);
            count +=
                (widgetSpanSourceMap.keys.last.endOffset -
                        widgetSpanSourceMap.keys.first.startOffset)
                    .abs();
            return true;
          }
          // Update widgetspan data.
          _colorSelectionRed(
            selectedContentRange,
            dataMap: widgetSpanSourceMap,
            coloringChildSpan: true,
          );
          // Re-create widgetspan.
          if (count == 28) {
            // The index where the bulleted list begins.
            insideSelection.add(
              WidgetSpan(
                child: Column(
                  children: <Widget>[
                    for (final MapEntry<LocalSpanRange, TextSpan> entry
                        in widgetSpanSourceMap.entries)
                      Padding(
                        padding: const EdgeInsets.only(left: 20.0),
                        child: Text.rich(widgetSpanSourceMap[entry.key]!),
                      ),
                  ],
                ),
              ),
            );
          }
          count +=
              (widgetSpanSourceMap.keys.last.endOffset - widgetSpanSourceMap.keys.first.startOffset)
                  .abs();
          return true;
        }
        return true;
      });
      dataMap[entry.key] = TextSpan(
        style: dataMap[entry.key]!.style,
        children: <InlineSpan>[...beforeSelection, ...insideSelection, ...afterSelection],
      );
    }
    // Avoid clearing the selection and setting the state
    // before we have colored all parts of the selection.
    if (!coloringChildSpan) {
      setState(() {});
    }
  }

  @override
  void initState() {
    super.initState();
    _initData();
  }

  @override
  void dispose() {
    _selectionNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SelectionArea(
        key: selectionAreaKey,
        child: MySelectableTextColumn(
          selectionNotifier: _selectionNotifier,
          dataSourceMap: dataSourceMap,
          onChanged: _handleSelectableRegionStatusChanged,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            // Resets the state to the origin data.
            for (final MapEntry<LocalSpanRange, TextSpan> entry in originSourceData.entries) {
              dataSourceMap[entry.key] = entry.value;
            }
            for (final MapEntry<LocalSpanRange, TextSpan> entry in originBulletSourceData.entries) {
              bulletSourceMap[entry.key] = entry.value;
            }
          });
        },
        child: const Icon(Icons.undo),
      ),
    );
  }
}

class MySelectableTextColumn extends StatefulWidget {
  const MySelectableTextColumn({
    super.key,
    required this.selectionNotifier,
    required this.dataSourceMap,
    required this.onChanged,
  });

  final SelectionListenerNotifier selectionNotifier;
  final Map<LocalSpanRange, TextSpan> dataSourceMap;
  final ValueChanged<SelectableRegionSelectionStatus> onChanged;

  @override
  State<MySelectableTextColumn> createState() => _MySelectableTextColumnState();
}

class _MySelectableTextColumnState extends State<MySelectableTextColumn> {
  ValueListenable<SelectableRegionSelectionStatus>? _selectableRegionScope;

  void _handleOnSelectableRegionChanged() {
    if (_selectableRegionScope == null) {
      return;
    }
    widget.onChanged.call(_selectableRegionScope!.value);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _selectableRegionScope?.removeListener(_handleOnSelectableRegionChanged);
    _selectableRegionScope = SelectableRegionSelectionStatusScope.maybeOf(context);
    _selectableRegionScope?.addListener(_handleOnSelectableRegionChanged);
  }

  @override
  void dispose() {
    _selectableRegionScope?.removeListener(_handleOnSelectableRegionChanged);
    _selectableRegionScope = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SelectionListener(
      selectionNotifier: widget.selectionNotifier,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            for (final MapEntry<LocalSpanRange, TextSpan> entry in widget.dataSourceMap.entries)
              Text.rich(entry.value),
          ],
        ),
      ),
    );
  }
}