[BEAM-13247] [Playground] Embedding iframe

playground/frontend/lib/constants/params.dart

@@ -17,3 +17,5 @@
  */
 
 const kExampleParam = 'example';
+const kIsEditable = 'enabled';
+const kSourceCode = 'code';

playground/frontend/lib/modules/editor/components/editor_textarea.dart

@@ -45,13 +45,17 @@ class EditorTextArea extends StatefulWidget {
   final ExampleModel? example;
   final bool enabled;
   final void Function(String)? onSourceChange;
+  final bool isEditable;
+  final bool enableScrolling;
 
   const EditorTextArea({
     Key? key,
     required this.sdk,
     this.example,
     this.onSourceChange,
     required this.enabled,
+    required this.isEditable,
+    this.enableScrolling = true,
   }) : super(key: key);
 
   @override
@@ -82,7 +86,9 @@ class _EditorTextAreaState extends State<EditorTextArea> {
       webSpaceFix: false,
     );
 
-    _setTextScrolling();
+    if (widget.enableScrolling) {
+      _setTextScrolling();
+    }
 
     super.didChangeDependencies();
   }
@@ -103,17 +109,20 @@ class _EditorTextAreaState extends State<EditorTextArea> {
       enabled: widget.enabled,
       readOnly: widget.enabled,
       label: AppLocalizations.of(context)!.codeTextArea,
-      child: CodeField(
-        focusNode: focusNode,
-        enabled: widget.enabled,
-        controller: _codeController!,
-        textStyle: getCodeFontStyle(
-          textStyle: const TextStyle(fontSize: kCodeFontSize),
-        ),
-        expands: true,
-        lineNumberStyle: LineNumberStyle(
-          textStyle: TextStyle(
-            color: ThemeColors.of(context).grey1Color,
+      child: FocusScope(
+        node: FocusScopeNode(canRequestFocus: widget.isEditable),
+        child: CodeField(
+          focusNode: focusNode,
+          enabled: widget.enabled,
+          controller: _codeController!,
+          textStyle: getCodeFontStyle(
+            textStyle: const TextStyle(fontSize: kCodeFontSize),
+          ),
+          expands: true,
+          lineNumberStyle: LineNumberStyle(
+            textStyle: TextStyle(
+              color: ThemeColors.of(context).grey1Color,
+            ),
           ),
         ),
       ),

playground/frontend/lib/modules/output/components/output.dart

@@ -21,7 +21,9 @@ import 'package:playground/modules/output/components/output_area.dart';
 import 'package:playground/modules/output/components/output_header/output_header.dart';
 
 class Output extends StatefulWidget {
-  const Output({Key? key}) : super(key: key);
+  final bool isEmbedded;
+
+  const Output({Key? key, required this.isEmbedded}) : super(key: key);
 
   @override
   State<Output> createState() => _OutputState();
@@ -55,7 +57,10 @@ class _OutputState extends State<Output> with SingleTickerProviderStateMixin {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        OutputHeader(tabController: tabController),
+        OutputHeader(
+          tabController: tabController,
+          showOutputPlacements: widget.isEmbedded,
+        ),
         Expanded(child: OutputArea(tabController: tabController)),
       ],
     );

playground/frontend/lib/modules/output/components/output_header/output_header.dart

@@ -24,10 +24,12 @@ import 'output_tabs.dart';
 
 class OutputHeader extends StatelessWidget {
   final TabController tabController;
+  final bool showOutputPlacements;
 
   const OutputHeader({
     Key? key,
     required this.tabController,
+    this.showOutputPlacements = true,
   }) : super(key: key);
 
   @override
@@ -43,7 +45,7 @@ class OutputHeader extends StatelessWidget {
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
             OutputTabs(tabController: tabController),
-            const OutputPlacements(),
+            showOutputPlacements ? const OutputPlacements() : const SizedBox(),
           ],
         ),
       ),

playground/frontend/lib/pages/embedded_playground/components/embedded_actions.dart

@@ -17,15 +17,11 @@
  */
 
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:playground/components/toggle_theme_button/toggle_theme_icon_button.dart';
 import 'package:playground/constants/assets.dart';
 import 'package:playground/constants/params.dart';
 import 'package:playground/constants/sizes.dart';
-import 'package:playground/pages/playground/states/playground_state.dart';
-import 'package:provider/provider.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 const kTryPlaygroundButtonWidth = 200.0;
@@ -36,36 +32,20 @@ class EmbeddedActions extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Wrap(
-      runSpacing: kMdSpacing,
-      crossAxisAlignment: WrapCrossAlignment.center,
-      alignment: WrapAlignment.end,
-      children: [
-        const ToggleThemeIconButton(),
-        IconButton(
-          iconSize: kIconSizeLg,
-          splashRadius: kIconButtonSplashRadius,
-          icon: SvgPicture.asset(kCopyIconAsset),
-          onPressed: () {
-            final source =
-                Provider.of<PlaygroundState>(context, listen: false).source;
-            Clipboard.setData(ClipboardData(text: source));
-          },
-        ),
-        ElevatedButton.icon(
-          style: ButtonStyle(
-            fixedSize: MaterialStateProperty.all(
-              const Size(kTryPlaygroundButtonWidth, kTryPlaygroundButtonHeight),
-            ),
-          ),
+    return Padding(
+      padding: const EdgeInsets.all(kMdSpacing),
+      child: SizedBox(
+        width: kTryPlaygroundButtonWidth,
+        height: kTryPlaygroundButtonHeight,
+        child: ElevatedButton.icon(
           icon: SvgPicture.asset(kLinkIconAsset),
           label: Text(AppLocalizations.of(context)!.tryInPlayground),
           onPressed: () {
             final exampleId = Uri.base.queryParameters[kExampleParam];
             launch('/?$kExampleParam=$exampleId');
           },
         ),
-      ],
+      ),
     );
   }
 }

playground/frontend/lib/pages/embedded_playground/components/embedded_appbar_title.dart

@@ -0,0 +1,85 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:playground/components/toggle_theme_button/toggle_theme_icon_button.dart';
+import 'package:playground/constants/assets.dart';
+import 'package:playground/constants/sizes.dart';
+import 'package:playground/modules/analytics/analytics_service.dart';
+import 'package:playground/modules/editor/components/run_button.dart';
+import 'package:playground/modules/notifications/components/notification.dart';
+import 'package:playground/modules/sdk/models/sdk.dart';
+import 'package:playground/pages/playground/states/playground_state.dart';
+import 'package:provider/provider.dart';
+
+class EmbeddedAppBarTitle extends StatelessWidget {
+  const EmbeddedAppBarTitle({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<PlaygroundState>(
+      builder: (context, state, child) => Wrap(
+        crossAxisAlignment: WrapCrossAlignment.center,
+        spacing: kXlSpacing,
+        children: [
+          RunButton(
+            isRunning: state.isCodeRunning,
+            cancelRun: () {
+              state.cancelRun().catchError(
+                    (_) => NotificationManager.showError(
+                      context,
+                      AppLocalizations.of(context)!.runCode,
+                      AppLocalizations.of(context)!.cancelExecution,
+                    ),
+                  );
+            },
+            runCode: () {
+              final stopwatch = Stopwatch()..start();
+              state.runCode(
+                onFinish: () {
+                  AnalyticsService.get(context).trackRunTimeEvent(
+                    state.selectedExample?.path ??
+                        '${AppLocalizations.of(context)!.unknownExample}, sdk ${state.sdk.displayName}',
+                    stopwatch.elapsedMilliseconds,
+                  );
+                },
+              );
+              AnalyticsService.get(context).trackClickRunEvent(
+                state.selectedExample,
+              );
+            },
+          ),
+          const ToggleThemeIconButton(),
+          IconButton(
+            iconSize: kIconSizeLg,
+            splashRadius: kIconButtonSplashRadius,
+            icon: SvgPicture.asset(kCopyIconAsset),
+            onPressed: () {
+              final source =
+                  Provider.of<PlaygroundState>(context, listen: false).source;
+              Clipboard.setData(ClipboardData(text: source));
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

playground/frontend/lib/pages/embedded_playground/components/embedded_editor.dart

@@ -22,7 +22,9 @@ import 'package:playground/pages/playground/states/playground_state.dart';
 import 'package:provider/provider.dart';
 
 class EmbeddedEditor extends StatelessWidget {
-  const EmbeddedEditor({Key? key}) : super(key: key);
+  final bool isEditable;
+
+  const EmbeddedEditor({Key? key, required this.isEditable}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -32,6 +34,9 @@ class EmbeddedEditor extends StatelessWidget {
       enabled: true,
       sdk: state.sdk,
       example: state.selectedExample,
+      onSourceChange: state.setSource,
+      enableScrolling: false,
+      isEditable: isEditable,
     );
   }
 }

playground/frontend/lib/pages/embedded_playground/components/embedded_split_view.dart

@@ -0,0 +1,90 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+import 'package:playground/constants/colors.dart';
+
+const defaultRatio = 0.65;
+const kContainerTopBorder = Border(
+  top: BorderSide(
+    width: 0.5,
+    color: kLightGrey1,
+  ),
+);
+
+class EmbeddedSplitView extends StatefulWidget {
+  final Widget first;
+  final Widget second;
+
+  const EmbeddedSplitView({
+    Key? key,
+    required this.first,
+    required this.second,
+  }) : super(key: key);
+
+  @override
+  _EmbeddedSplitViewState createState() => _EmbeddedSplitViewState();
+}
+
+class _EmbeddedSplitViewState extends State<EmbeddedSplitView> {
+  double _maxSize = 0;
+
+  get _sizeFirst => defaultRatio * _maxSize;
+
+  get _sizeSecond => (1 - defaultRatio) * _maxSize;
+
+  @override
+  Widget build(BuildContext widgetContext) {
+    return LayoutBuilder(
+      builder: (context, BoxConstraints constraints) {
+        _updateMaxSize(constraints);
+        return _buildVerticalLayout(context, constraints);
+      },
+    );
+  }
+
+  Widget _buildVerticalLayout(
+    BuildContext context,
+    BoxConstraints constraints,
+  ) {
+    return SizedBox(
+      height: constraints.maxHeight,
+      width: double.infinity,
+      child: Column(
+        children: <Widget>[
+          SizedBox(
+            height: _sizeFirst,
+            child: widget.first,
+          ),
+          Container(
+            height: _sizeSecond,
+            width: double.infinity,
+            decoration: const BoxDecoration(border: kContainerTopBorder),
+            child: widget.second,
+          ),
+        ],
+      ),
+    );
+  }
+
+  void _updateMaxSize(BoxConstraints constraints) {
+    if (_maxSize != constraints.maxHeight) {
+      _maxSize = constraints.maxHeight;
+    }
+  }
+}