Commit 318b69be authored by Adam Barth's avatar Adam Barth

Fold package:sky/editing/* into package:sky/widgets.dart

The editing directory just defined two widgets. We might as well fold them into
the main widgets library.
parent 7e1e9ef3
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
import 'package:sky/editing/input.dart';
import 'package:sky/theme/colors.dart' as colors; import 'package:sky/theme/colors.dart' as colors;
import 'package:sky/theme/typography.dart' as typography; import 'package:sky/theme/typography.dart' as typography;
import 'package:sky/widgets.dart'; import 'package:sky/widgets.dart';
......
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
library fitness; library fitness;
import 'package:playfair/playfair.dart' as playfair; import 'package:playfair/playfair.dart' as playfair;
import 'package:sky/editing/input.dart';
import 'package:sky/painting/text_style.dart'; import 'package:sky/painting/text_style.dart';
import 'package:sky/theme/colors.dart' as colors; import 'package:sky/theme/colors.dart' as colors;
import 'package:sky/widgets.dart'; import 'package:sky/widgets.dart';
......
...@@ -7,7 +7,6 @@ library stocks; ...@@ -7,7 +7,6 @@ library stocks;
import 'dart:math' as math; import 'dart:math' as math;
import 'dart:sky' as sky; import 'dart:sky' as sky;
import 'package:sky/editing/input.dart';
import 'package:sky/theme/colors.dart' as colors; import 'package:sky/theme/colors.dart' as colors;
import 'package:sky/theme/typography.dart' as typography; import 'package:sky/theme/typography.dart' as typography;
import 'package:sky/widgets.dart'; import 'package:sky/widgets.dart';
......
...@@ -33,9 +33,6 @@ directory, using a reactive framework. They use data given in the ...@@ -33,9 +33,6 @@ directory, using a reactive framework. They use data given in the
[theme/](theme/) directory to select styles consistent with Material [theme/](theme/) directory to select styles consistent with Material
Design. Design.
Text input widgets are layered on this mechanism and can be found in
the [editing/](editing/) directory.
Alongside the above is the [mojo/](mojo/) directory, which contains Alongside the above is the [mojo/](mojo/) directory, which contains
anything that uses the Mojo IPC mechanism, typically as part of anything that uses the Mojo IPC mechanism, typically as part of
wrapping host operating system features. Some of those Host APIs are wrapping host operating system features. Some of those Host APIs are
...@@ -45,9 +42,7 @@ Here is a diagram summarising all this: ...@@ -45,9 +42,7 @@ Here is a diagram summarising all this:
+-----------------------------+ ------ +-----------------------------+ ------
| YOUR APP | | YOUR APP |
| +--------------------+--+ | +----------------------+---+
| | editing/ | |
| +--+-------------------++ |
| | widgets/ (theme/) | | | | widgets/ (theme/) | |
| ++---------------------++ | | ++---------------------++ |
| | rendering/ | | Dart | | rendering/ | | Dart
......
// Copyright 2015 The Chromium 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:async';
import 'dart:sky' as sky;
import 'package:sky/editing/editable_string.dart';
import 'package:sky/painting/text_style.dart';
import 'package:sky/src/rendering/object.dart';
import 'package:sky/src/widgets/basic.dart';
import 'package:sky/src/widgets/framework.dart';
const _kCursorBlinkPeriod = 500; // milliseconds
const _kCursorGap = 1.0;
const _kCursorHeightOffset = 2.0;
const _kCursorWidth = 1.0;
class EditableText extends StatefulComponent {
EditableText({
Key key,
this.value,
this.focused: false,
this.style,
this.cursorColor}) : super(key: key);
EditableString value;
bool focused;
TextStyle style;
Color cursorColor;
void syncConstructorArguments(EditableText source) {
value = source.value;
focused = source.focused;
style = source.style;
cursorColor = source.cursorColor;
}
Timer _cursorTimer;
bool _showCursor = false;
void _cursorTick(Timer timer) {
setState(() {
_showCursor = !_showCursor;
});
}
void _startCursorTimer() {
_showCursor = true;
_cursorTimer = new Timer.periodic(
new Duration(milliseconds: _kCursorBlinkPeriod), _cursorTick);
}
void didUnmount() {
if (_cursorTimer != null)
_stopCursorTimer();
super.didUnmount();
}
void _stopCursorTimer() {
_cursorTimer.cancel();
_cursorTimer = null;
_showCursor = false;
}
void _paintCursor(sky.Canvas canvas, Size size) {
if (!_showCursor)
return;
Rect cursorRect = new Rect.fromLTWH(
_kCursorGap,
-_kCursorHeightOffset,
_kCursorWidth,
style.fontSize + 2 * _kCursorHeightOffset
);
canvas.drawRect(cursorRect, new Paint()..color = cursorColor);
}
Widget build() {
assert(style != null);
assert(focused != null);
assert(cursorColor != null);
if (focused && _cursorTimer == null)
_startCursorTimer();
else if (!focused && _cursorTimer != null)
_stopCursorTimer();
if (!value.composing.isValid) {
// TODO(eseidel): This is the wrong height if empty!
return new Text(value.text, style: style);
}
TextStyle composingStyle = style.merge(const TextStyle(decoration: underline));
StyledText text = new StyledText(elements: [
style,
value.textBefore(value.composing),
[composingStyle, value.textInside(value.composing)],
value.textAfter(value.composing)
]);
Widget cursor = new Container(
height: style.fontSize,
width: _kCursorGap + _kCursorWidth,
child: new CustomPaint(callback: _paintCursor, token: _showCursor)
);
return new Row([text, cursor]);
}
}
...@@ -2,7 +2,18 @@ ...@@ -2,7 +2,18 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
import 'dart:async';
import 'dart:sky' as sky;
import 'package:mojo_services/keyboard/keyboard.mojom.dart'; import 'package:mojo_services/keyboard/keyboard.mojom.dart';
import 'package:sky/painting/text_style.dart';
import 'package:sky/src/widgets/basic.dart';
import 'package:sky/src/widgets/framework.dart';
const _kCursorBlinkPeriod = 500; // milliseconds
const _kCursorGap = 1.0;
const _kCursorHeightOffset = 2.0;
const _kCursorWidth = 1.0;
typedef void StringUpdated(); typedef void StringUpdated();
...@@ -120,3 +131,97 @@ class EditableString implements KeyboardClient { ...@@ -120,3 +131,97 @@ class EditableString implements KeyboardClient {
onUpdated(); onUpdated();
} }
} }
class EditableText extends StatefulComponent {
EditableText({
Key key,
this.value,
this.focused: false,
this.style,
this.cursorColor}) : super(key: key);
EditableString value;
bool focused;
TextStyle style;
Color cursorColor;
void syncConstructorArguments(EditableText source) {
value = source.value;
focused = source.focused;
style = source.style;
cursorColor = source.cursorColor;
}
Timer _cursorTimer;
bool _showCursor = false;
void _cursorTick(Timer timer) {
setState(() {
_showCursor = !_showCursor;
});
}
void _startCursorTimer() {
_showCursor = true;
_cursorTimer = new Timer.periodic(
new Duration(milliseconds: _kCursorBlinkPeriod), _cursorTick);
}
void didUnmount() {
if (_cursorTimer != null)
_stopCursorTimer();
super.didUnmount();
}
void _stopCursorTimer() {
_cursorTimer.cancel();
_cursorTimer = null;
_showCursor = false;
}
void _paintCursor(sky.Canvas canvas, Size size) {
if (!_showCursor)
return;
Rect cursorRect = new Rect.fromLTWH(
_kCursorGap,
-_kCursorHeightOffset,
_kCursorWidth,
style.fontSize + 2 * _kCursorHeightOffset
);
canvas.drawRect(cursorRect, new Paint()..color = cursorColor);
}
Widget build() {
assert(style != null);
assert(focused != null);
assert(cursorColor != null);
if (focused && _cursorTimer == null)
_startCursorTimer();
else if (!focused && _cursorTimer != null)
_stopCursorTimer();
if (!value.composing.isValid) {
// TODO(eseidel): This is the wrong height if empty!
return new Text(value.text, style: style);
}
TextStyle composingStyle = style.merge(const TextStyle(decoration: underline));
StyledText text = new StyledText(elements: [
style,
value.textBefore(value.composing),
[composingStyle, value.textInside(value.composing)],
value.textAfter(value.composing)
]);
Widget cursor = new Container(
height: style.fontSize,
width: _kCursorGap + _kCursorWidth,
child: new CustomPaint(callback: _paintCursor, token: _showCursor)
);
return new Row([text, cursor]);
}
}
...@@ -2,11 +2,10 @@ ...@@ -2,11 +2,10 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
import 'package:sky/editing/editable_string.dart';
import 'package:sky/editing/editable_text.dart';
import 'package:sky/mojo/keyboard.dart'; import 'package:sky/mojo/keyboard.dart';
import 'package:sky/painting/text_style.dart'; import 'package:sky/painting/text_style.dart';
import 'package:sky/src/widgets/basic.dart'; import 'package:sky/src/widgets/basic.dart';
import 'package:sky/src/widgets/editable_text.dart';
import 'package:sky/src/widgets/focus.dart'; import 'package:sky/src/widgets/focus.dart';
import 'package:sky/src/widgets/framework.dart'; import 'package:sky/src/widgets/framework.dart';
import 'package:sky/src/widgets/theme.dart'; import 'package:sky/src/widgets/theme.dart';
......
...@@ -22,6 +22,7 @@ export 'package:sky/src/widgets/drawer.dart'; ...@@ -22,6 +22,7 @@ export 'package:sky/src/widgets/drawer.dart';
export 'package:sky/src/widgets/drawer_divider.dart'; export 'package:sky/src/widgets/drawer_divider.dart';
export 'package:sky/src/widgets/drawer_header.dart'; export 'package:sky/src/widgets/drawer_header.dart';
export 'package:sky/src/widgets/drawer_item.dart'; export 'package:sky/src/widgets/drawer_item.dart';
export 'package:sky/src/widgets/editable_text.dart';
export 'package:sky/src/widgets/flat_button.dart'; export 'package:sky/src/widgets/flat_button.dart';
export 'package:sky/src/widgets/floating_action_button.dart'; export 'package:sky/src/widgets/floating_action_button.dart';
export 'package:sky/src/widgets/focus.dart'; export 'package:sky/src/widgets/focus.dart';
...@@ -31,6 +32,7 @@ export 'package:sky/src/widgets/homogeneous_viewport.dart'; ...@@ -31,6 +32,7 @@ export 'package:sky/src/widgets/homogeneous_viewport.dart';
export 'package:sky/src/widgets/icon.dart'; export 'package:sky/src/widgets/icon.dart';
export 'package:sky/src/widgets/icon_button.dart'; export 'package:sky/src/widgets/icon_button.dart';
export 'package:sky/src/widgets/ink_well.dart'; export 'package:sky/src/widgets/ink_well.dart';
export 'package:sky/src/widgets/input.dart';
export 'package:sky/src/widgets/material.dart'; export 'package:sky/src/widgets/material.dart';
export 'package:sky/src/widgets/material_button.dart'; export 'package:sky/src/widgets/material_button.dart';
export 'package:sky/src/widgets/mimic.dart'; export 'package:sky/src/widgets/mimic.dart';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment