nausharipov commented on code in PR #24674:
URL: https://github.com/apache/beam/pull/24674#discussion_r1049539042


##########
playground/frontend/playground_components/lib/src/controllers/snippet_editing_controller.dart:
##########
@@ -100,6 +103,27 @@ class SnippetEditingController extends ChangeNotifier {
     }
   }
 
+  void _toStartOfContextLineIfAny() {
+    final contextLine1Based = selectedExample?.contextLine;
+
+    if (contextLine1Based == null) {
+      return;
+    }
+
+    _toStartOfFullLine(max(contextLine1Based - 1, 0));
+  }
+
+  void _toStartOfFullLine(int line) {
+    final fullPosition = codeController.code.lines.lines[line].textRange.start;

Review Comment:
   Can `line` be out of range?



##########
playground/frontend/playground_components/lib/src/widgets/snippet_editor.dart:
##########
@@ -16,31 +16,120 @@
  * limitations under the License.
  */
 
-import 'package:flutter/widgets.dart';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+import 'package:flutter_code_editor/flutter_code_editor.dart';
 
 import '../controllers/snippet_editing_controller.dart';
-import 'editor_textarea.dart';
+import '../theme/theme.dart';
 
-class SnippetEditor extends StatelessWidget {
+class SnippetEditor extends StatefulWidget {
   final SnippetEditingController controller;
   final bool isEditable;
-  final bool goToContextLine;
 
-  const SnippetEditor({
+  SnippetEditor({
     required this.controller,
     required this.isEditable,
-    required this.goToContextLine,
-  });
+  }) : super(
+    // When the example is changed, will scroll to the context line again.
+    key: ValueKey(controller.selectedExample),
+  );
+
+  @override
+  State<SnippetEditor> createState() => _SnippetEditorState();
+}
+
+class _SnippetEditorState extends State<SnippetEditor> {
+  bool _didAutoFocus = false;
+  final _focusNode = FocusNode();
+  final _scrollController = ScrollController();
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    if (!_didAutoFocus) {
+      _didAutoFocus = true;
+      SchedulerBinding.instance.addPostFrameCallback((_) {
+        if (mounted) {
+          _scrollSoCursorIsOnTop();
+        }
+      });
+    }
+  }
+
+  void _scrollSoCursorIsOnTop() {
+    _focusNode.requestFocus();
+
+    final position = max(widget.controller.codeController.selection.start, 0);
+    final characterOffset = _getLastCharacterOffset(
+      text: widget.controller.codeController.text.substring(0, position),
+      style: kLightTheme.extension<BeamThemeExtension>()!.codeRootStyle,
+    );
+
+    _scrollController.jumpTo(
+      min(
+        characterOffset.dy,
+        _scrollController.position.maxScrollExtent,
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return EditorTextArea(
-      codeController: controller.codeController,
-      sdk: controller.sdk,
-      enabled: !(controller.selectedExample?.isMultiFile ?? false),
-      example: controller.selectedExample,
-      isEditable: isEditable,
-      goToContextLine: goToContextLine,
+    final ext = Theme.of(context).extension<BeamThemeExtension>()!;
+    final isMultifile = widget.controller.selectedExample?.isMultiFile ?? 
false;
+    final isEnabled = widget.isEditable && !isMultifile;
+
+    return Semantics(
+      container: true,
+      textField: true,
+      multiline: true,
+      enabled: isEnabled,
+      readOnly: isEnabled,
+      label: 'widgets.codeEditor.label',
+      child: FocusScope(
+        node: FocusScopeNode(canRequestFocus: isEnabled),
+        child: CodeTheme(
+          data: ext.codeTheme,
+          child: Container(

Review Comment:
   `ColoredBox`.



##########
playground/frontend/playground_components/lib/src/widgets/snippet_editor.dart:
##########
@@ -16,31 +16,120 @@
  * limitations under the License.
  */
 
-import 'package:flutter/widgets.dart';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+import 'package:flutter_code_editor/flutter_code_editor.dart';
 
 import '../controllers/snippet_editing_controller.dart';
-import 'editor_textarea.dart';
+import '../theme/theme.dart';
 
-class SnippetEditor extends StatelessWidget {
+class SnippetEditor extends StatefulWidget {
   final SnippetEditingController controller;
   final bool isEditable;
-  final bool goToContextLine;
 
-  const SnippetEditor({
+  SnippetEditor({
     required this.controller,
     required this.isEditable,
-    required this.goToContextLine,
-  });
+  }) : super(
+    // When the example is changed, will scroll to the context line again.
+    key: ValueKey(controller.selectedExample),
+  );
+
+  @override
+  State<SnippetEditor> createState() => _SnippetEditorState();
+}
+
+class _SnippetEditorState extends State<SnippetEditor> {
+  bool _didAutoFocus = false;
+  final _focusNode = FocusNode();
+  final _scrollController = ScrollController();
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    if (!_didAutoFocus) {
+      _didAutoFocus = true;
+      SchedulerBinding.instance.addPostFrameCallback((_) {
+        if (mounted) {
+          _scrollSoCursorIsOnTop();
+        }
+      });
+    }
+  }
+
+  void _scrollSoCursorIsOnTop() {
+    _focusNode.requestFocus();
+
+    final position = max(widget.controller.codeController.selection.start, 0);
+    final characterOffset = _getLastCharacterOffset(
+      text: widget.controller.codeController.text.substring(0, position),
+      style: kLightTheme.extension<BeamThemeExtension>()!.codeRootStyle,
+    );
+
+    _scrollController.jumpTo(
+      min(
+        characterOffset.dy,
+        _scrollController.position.maxScrollExtent,
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return EditorTextArea(
-      codeController: controller.codeController,
-      sdk: controller.sdk,
-      enabled: !(controller.selectedExample?.isMultiFile ?? false),
-      example: controller.selectedExample,
-      isEditable: isEditable,
-      goToContextLine: goToContextLine,
+    final ext = Theme.of(context).extension<BeamThemeExtension>()!;
+    final isMultifile = widget.controller.selectedExample?.isMultiFile ?? 
false;
+    final isEnabled = widget.isEditable && !isMultifile;
+
+    return Semantics(
+      container: true,
+      textField: true,
+      multiline: true,
+      enabled: isEnabled,
+      readOnly: isEnabled,
+      label: 'widgets.codeEditor.label',
+      child: FocusScope(
+        node: FocusScopeNode(canRequestFocus: isEnabled),
+        child: CodeTheme(
+          data: ext.codeTheme,
+          child: Container(
+            color: ext.codeTheme.styles['root']?.backgroundColor,
+            child: SingleChildScrollView(
+              controller: _scrollController,
+              child: CodeField(
+                key: ValueKey(widget.controller.codeController),
+                focusNode: _focusNode,
+                enabled: isEnabled,

Review Comment:
   Sort?



##########
playground/frontend/playground_components/lib/src/widgets/snippet_editor.dart:
##########
@@ -16,31 +16,120 @@
  * limitations under the License.
  */
 
-import 'package:flutter/widgets.dart';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+import 'package:flutter_code_editor/flutter_code_editor.dart';
 
 import '../controllers/snippet_editing_controller.dart';
-import 'editor_textarea.dart';
+import '../theme/theme.dart';
 
-class SnippetEditor extends StatelessWidget {
+class SnippetEditor extends StatefulWidget {
   final SnippetEditingController controller;
   final bool isEditable;
-  final bool goToContextLine;
 
-  const SnippetEditor({
+  SnippetEditor({
     required this.controller,
     required this.isEditable,
-    required this.goToContextLine,
-  });
+  }) : super(
+    // When the example is changed, will scroll to the context line again.
+    key: ValueKey(controller.selectedExample),
+  );
+
+  @override
+  State<SnippetEditor> createState() => _SnippetEditorState();
+}
+
+class _SnippetEditorState extends State<SnippetEditor> {
+  bool _didAutoFocus = false;
+  final _focusNode = FocusNode();
+  final _scrollController = ScrollController();
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    if (!_didAutoFocus) {
+      _didAutoFocus = true;
+      SchedulerBinding.instance.addPostFrameCallback((_) {
+        if (mounted) {
+          _scrollSoCursorIsOnTop();
+        }
+      });
+    }
+  }
+
+  void _scrollSoCursorIsOnTop() {
+    _focusNode.requestFocus();
+
+    final position = max(widget.controller.codeController.selection.start, 0);
+    final characterOffset = _getLastCharacterOffset(
+      text: widget.controller.codeController.text.substring(0, position),
+      style: kLightTheme.extension<BeamThemeExtension>()!.codeRootStyle,
+    );
+
+    _scrollController.jumpTo(
+      min(
+        characterOffset.dy,
+        _scrollController.position.maxScrollExtent,
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return EditorTextArea(
-      codeController: controller.codeController,
-      sdk: controller.sdk,
-      enabled: !(controller.selectedExample?.isMultiFile ?? false),
-      example: controller.selectedExample,
-      isEditable: isEditable,
-      goToContextLine: goToContextLine,
+    final ext = Theme.of(context).extension<BeamThemeExtension>()!;
+    final isMultifile = widget.controller.selectedExample?.isMultiFile ?? 
false;
+    final isEnabled = widget.isEditable && !isMultifile;
+
+    return Semantics(
+      container: true,
+      textField: true,
+      multiline: true,
+      enabled: isEnabled,

Review Comment:
   Sort?



##########
playground/frontend/playground_components/lib/src/controllers/snippet_editing_controller.dart:
##########
@@ -100,6 +103,27 @@ class SnippetEditingController extends ChangeNotifier {
     }
   }
 
+  void _toStartOfContextLineIfAny() {

Review Comment:
   `_moveCursorToStartOfContextLineIfAny`, `_selectStartOfContextLineIfAny` or 
`_focusOnStartOfContextLineIfAny` may be more clear.



##########
playground/frontend/playground_components/lib/src/widgets/snippet_editor.dart:
##########
@@ -16,31 +16,120 @@
  * limitations under the License.
  */
 
-import 'package:flutter/widgets.dart';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+import 'package:flutter_code_editor/flutter_code_editor.dart';
 
 import '../controllers/snippet_editing_controller.dart';
-import 'editor_textarea.dart';
+import '../theme/theme.dart';
 
-class SnippetEditor extends StatelessWidget {
+class SnippetEditor extends StatefulWidget {
   final SnippetEditingController controller;
   final bool isEditable;
-  final bool goToContextLine;
 
-  const SnippetEditor({
+  SnippetEditor({
     required this.controller,
     required this.isEditable,
-    required this.goToContextLine,
-  });
+  }) : super(
+    // When the example is changed, will scroll to the context line again.
+    key: ValueKey(controller.selectedExample),
+  );
+
+  @override
+  State<SnippetEditor> createState() => _SnippetEditorState();
+}
+
+class _SnippetEditorState extends State<SnippetEditor> {
+  bool _didAutoFocus = false;
+  final _focusNode = FocusNode();
+  final _scrollController = ScrollController();
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    if (!_didAutoFocus) {
+      _didAutoFocus = true;
+      SchedulerBinding.instance.addPostFrameCallback((_) {
+        if (mounted) {
+          _scrollSoCursorIsOnTop();
+        }
+      });
+    }
+  }
+
+  void _scrollSoCursorIsOnTop() {
+    _focusNode.requestFocus();
+
+    final position = max(widget.controller.codeController.selection.start, 0);
+    final characterOffset = _getLastCharacterOffset(
+      text: widget.controller.codeController.text.substring(0, position),
+      style: kLightTheme.extension<BeamThemeExtension>()!.codeRootStyle,
+    );
+
+    _scrollController.jumpTo(
+      min(
+        characterOffset.dy,
+        _scrollController.position.maxScrollExtent,
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return EditorTextArea(
-      codeController: controller.codeController,
-      sdk: controller.sdk,
-      enabled: !(controller.selectedExample?.isMultiFile ?? false),
-      example: controller.selectedExample,
-      isEditable: isEditable,
-      goToContextLine: goToContextLine,
+    final ext = Theme.of(context).extension<BeamThemeExtension>()!;
+    final isMultifile = widget.controller.selectedExample?.isMultiFile ?? 
false;

Review Comment:
   F is capitalized in `selectedExample?.isMultiFile`, but not in the variable.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to