Skip to content

Commit

Permalink
fix: fix widget element size did not scratch.
Browse files Browse the repository at this point in the history
  • Loading branch information
@andycall
andycall committed Sep 30, 2022
1 parent cc61e0a commit 091968d
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 95 deletions.
30 changes: 28 additions & 2 deletions webf/example/assets/bundle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,22 @@
.logo {
width: 128px;
}
.list {
height: 500px;
}
.p {
color: #ff6633;
line-height: 1.7em;
}
.flutter-container {
height: 200px;
border: 1px solid #000;
}
.flutter-container-item {
padding: 15px;
display: block;
background: red;
}
@keyframes example {
from {
background-color: red;
Expand All @@ -23,15 +35,29 @@
width: 200px;
}
}

</style>
</head>
<body>
<div class="container">
<img class="logo" src="./webf.png" />
<div id="container">
<flutter-listview class="flutter-container">
<div class="flutter-container-item">helloworld1</div>
<div class="flutter-container-item">helloworld2</div>
<flutter-container>
<flutter-checkbox></flutter-checkbox>
</flutter-container>
<div class="flutter-container-item">helloworld3</div>
<div class="flutter-container-item">helloworld4</div>
</flutter-listview>
</div>
</div>
<script>
console.log('Welcome to webf!');
let container = document.querySelector('#container');
let checkbox = document.querySelector('#checkbox');
container.onclick = () => container.remove();

</script>
<script src="./bundle.js"></script>
</body>
</html>
128 changes: 48 additions & 80 deletions webf/example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,104 +4,72 @@
*/

import 'package:flutter/material.dart';
import 'package:webf/dom.dart';
import 'package:webf/webf.dart';
import 'package:webf/devtools.dart';
import 'package:webf_websocket/webf_websocket.dart';

import 'text_element.dart';
import 'custom-elements/flutter_input.dart';
import 'custom-elements/flutter_listview.dart';

void main() {
WebFWebSocket.initialize();
runApp(MyApp());
WebF.defineCustomElement('flutter-text', (context) => TextElement(context));
WebF.defineCustomElement('flutter-checkbox', (context) => CheckboxElement(context));
WebF.defineCustomElement('flutter-listview', (context) => ListViewElement(context));
WebF.defineCustomElement('flutter-input', (context) => FlutterInputElement(context));
WebF.defineCustomElement('flutter-container', (context) => ContainerElement(context));
WebF.defineCustomElement('input', (context) => FlutterInputElement(context));
runApp(MaterialApp(
home: FirstRoute(),
));
}

class MyApp extends StatelessWidget {
// This widget is the root of your application.
class FirstRoute extends StatelessWidget {
const FirstRoute({Key? key}): super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Kraken Browser',
// theme: ThemeData.dark(),
debugShowCheckedModeBanner: false,
home: MyBrowser(),
final MediaQueryData queryData = MediaQuery.of(context);
final TextEditingController textEditingController = TextEditingController();
AppBar appBar = AppBar(
title: const Text('First Route'),
);
final Size viewportSize = queryData.size;
return Scaffold(
appBar: AppBar(
title: const Text('First Route'),
),
body: WebF(
devToolsService: ChromeDevToolsService(),
viewportWidth: viewportSize.width - queryData.padding.horizontal,
viewportHeight: viewportSize.height - appBar.preferredSize.height - queryData.padding.vertical,
bundle: WebFBundle.fromUrl('assets:assets/bundle.html'),
// bundle: WebFBundle.fromUrl('http://127.0.0.1:3300/kraken_debug_server.js'),
),
);
}
}

class MyBrowser extends StatefulWidget {
MyBrowser({Key? key, this.title}) : super(key: key);

// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.

// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".

final String? title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyBrowser> {
OutlineInputBorder outlineBorder = OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent, width: 0.0),
borderRadius: const BorderRadius.all(
Radius.circular(20.0),
),
);

class SecondRouteState extends State<SecondRoute> {
@override
Widget build(BuildContext context) {
final MediaQueryData queryData = MediaQuery.of(context);
final TextEditingController textEditingController = TextEditingController();

WebF? _kraken;
AppBar appBar = AppBar(
backgroundColor: Colors.black87,
titleSpacing: 10.0,
title: Container(
height: 40.0,
child: TextField(
controller: textEditingController,
onSubmitted: (value) {
textEditingController.text = value;
_kraken?.load(WebFBundle.fromUrl(value));
},
decoration: InputDecoration(
hintText: 'Enter URL',
hintStyle: TextStyle(color: Colors.black54, fontSize: 16.0),
contentPadding: const EdgeInsets.all(10.0),
filled: true,
fillColor: Colors.grey,
border: outlineBorder,
focusedBorder: outlineBorder,
enabledBorder: outlineBorder,
),
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
return Scaffold(
appBar: AppBar(
title: const Text('Second Route'),
),
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
body: null
);
}

final Size viewportSize = queryData.size;
return Scaffold(
appBar: appBar,
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
children: [
_kraken = WebF(
devToolsService: ChromeDevToolsService(),
viewportWidth: viewportSize.width - queryData.padding.horizontal,
viewportHeight: viewportSize.height - appBar.preferredSize.height - queryData.padding.vertical,
bundle: WebFBundle.fromUrl('assets:assets/bundle.html'),
),
],
),
));
}

class SecondRoute extends StatefulWidget {
const SecondRoute({Key? key}): super(key: key);

@override
State<StatefulWidget> createState() {
return SecondRouteState();
}
}
13 changes: 1 addition & 12 deletions webf/lib/src/widget/node_to_widget_adaptor.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ library webf;
import 'package:flutter/foundation.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:webf/css.dart';
import 'package:webf/dom.dart' as dom;
import 'package:webf/rendering.dart';
import 'node_to_flutter_element_adapter.dart';

class WebFNodeToWidgetAdaptor extends RenderObjectWidget {
Expand All @@ -28,16 +26,7 @@ class WebFNodeToWidgetAdaptor extends RenderObjectWidget {

@override
RenderObject createRenderObject(BuildContext context) {
// Children of custom element need RenderFlowLayout nesting,
// otherwise the parent render layout will not be called when setting properties.
if (_webFNode is dom.Element) {
CSSRenderStyle renderStyle = CSSRenderStyle(target: _webFNode as dom.Element);
RenderFlowLayout renderFlowLayout = RenderFlowLayout(renderStyle: renderStyle);
renderFlowLayout.insert(_webFNode.renderer!);
return renderFlowLayout;
} else {
return _webFNode.renderer!;
}
return _webFNode.renderer!;
}

@override
Expand Down
10 changes: 9 additions & 1 deletion webf/lib/src/widget/widget_element.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,15 @@ library webf;

import 'package:flutter/widgets.dart';
import 'package:webf/foundation.dart';
import 'package:webf/css.dart';
import 'package:webf/dom.dart' as dom;
import 'webf_adapter_widget.dart';
import 'render_object_to_widget_adaptor.dart';

const Map<String, dynamic> _defaultStyle = {
DISPLAY: BLOCK,
};

abstract class WidgetElement extends dom.Element {
late Widget _widget;
Widget get widget => _widget;
Expand All @@ -25,7 +30,10 @@ abstract class WidgetElement extends dom.Element {
Map<String, dynamic>? defaultStyle,
}) : super(
context,
defaultStyle: defaultStyle,
defaultStyle: {
..._defaultStyle,
...?defaultStyle
},
isReplacedElement: true,
) {
WidgetsFlutterBinding.ensureInitialized();
Expand Down

0 comments on commit 091968d

Please sign in to comment.