| OLD | NEW |
|---|
| (Empty) |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 import 'dart:sky' as sky; | |
| 6 | |
| 7 import 'package:sky/framework/theme2/colors.dart' as colors; | |
| 8 | |
| 9 import '../animation/animated_value.dart'; | |
| 10 import '../animation/curves.dart'; | |
| 11 import '../rendering/box.dart'; | |
| 12 import 'animated_component.dart'; | |
| 13 import 'basic.dart'; | |
| 14 | |
| 15 typedef void ValueChanged(value); | |
| 16 | |
| 17 const double _kMidpoint = 0.5; | |
| 18 const double _kCheckDuration = 200.0; | |
| 19 const sky.Color _kUncheckedColor = const sky.Color(0x8A000000); | |
| 20 // TODO(jackson): This should change colors with the theme | |
| 21 sky.Color _kCheckedColor = colors.Purple[500]; | |
| 22 const double _kEdgeSize = 20.0; | |
| 23 const double _kEdgeRadius = 1.0; | |
| 24 | |
| 25 class Checkbox extends AnimatedComponent { | |
| 26 | |
| 27 Checkbox({ | |
| 28 Object key, | |
| 29 this.checked, | |
| 30 this.onChanged | |
| 31 }) : super(key: key) { | |
| 32 _checkedAnimation = new AnimatedValue(checked ? 1.0 : 0.0); | |
| 33 } | |
| 34 | |
| 35 bool checked; | |
| 36 AnimatedValue _checkedAnimation; | |
| 37 ValueChanged onChanged; | |
| 38 | |
| 39 void syncFields(Checkbox source) { | |
| 40 onChanged = source.onChanged; | |
| 41 if (checked != source.checked) { | |
| 42 checked = source.checked; | |
| 43 double targetValue = checked ? 1.0 : 0.0; | |
| 44 double difference = (_checkedAnimation.value - targetValue).abs(); | |
| 45 if (difference > 0) { | |
| 46 double duration = difference * _kCheckDuration; | |
| 47 _checkedAnimation.stop(); | |
| 48 Curve curve; | |
| 49 if (targetValue > _checkedAnimation.value) { | |
| 50 curve = easeIn; | |
| 51 } else { | |
| 52 curve = easeOut; | |
| 53 } | |
| 54 _checkedAnimation.animateTo(targetValue, duration, curve: curve); | |
| 55 } | |
| 56 } | |
| 57 super.syncFields(source); | |
| 58 } | |
| 59 | |
| 60 void _handleClick(sky.Event e) { | |
| 61 onChanged(!checked); | |
| 62 } | |
| 63 | |
| 64 UINode build() { | |
| 65 return new EventListenerNode( | |
| 66 new Container( | |
| 67 margin: const EdgeDims.symmetric(horizontal: 5.0), | |
| 68 width: _kEdgeSize + 2.0, | |
| 69 height: _kEdgeSize + 2.0, | |
| 70 child: new CustomPaint( | |
| 71 token: _checkedAnimation.value, | |
| 72 callback: (sky.Canvas canvas, Size size) { | |
| 73 // Choose a color between grey and the theme color | |
| 74 sky.Paint paint = new sky.Paint()..strokeWidth = 2.0 | |
| 75 ..color = _kUncheckedColor; | |
| 76 | |
| 77 // The rrect contracts slightly during the animation | |
| 78 double inset = 2.0 - (_checkedAnimation.value - _kMidpoint).abs() *
2.0; | |
| 79 sky.Rect rect = new sky.Rect.fromLTRB(inset, inset, _kEdgeSize - ins
et, _kEdgeSize - inset); | |
| 80 sky.RRect rrect = new sky.RRect()..setRectXY(rect, _kEdgeRadius, _kE
dgeRadius); | |
| 81 | |
| 82 | |
| 83 // Outline of the empty rrect | |
| 84 paint.setStyle(sky.PaintingStyle.stroke); | |
| 85 canvas.drawRRect(rrect, paint); | |
| 86 | |
| 87 // Radial gradient that changes size | |
| 88 if (_checkedAnimation.value > 0) { | |
| 89 paint.setStyle(sky.PaintingStyle.fill); | |
| 90 paint.setShader( | |
| 91 new sky.Gradient.radial( | |
| 92 new Point(_kEdgeSize / 2.0, _kEdgeSize / 2.0), | |
| 93 _kEdgeSize * (_kMidpoint - _checkedAnimation.value) * 8.0, | |
| 94 [const sky.Color(0x00000000), _kUncheckedColor], | |
| 95 [0.0, 1.0] | |
| 96 ) | |
| 97 ); | |
| 98 canvas.drawRRect(rrect, paint); | |
| 99 } | |
| 100 | |
| 101 if (_checkedAnimation.value > _kMidpoint) { | |
| 102 double t = (_checkedAnimation.value - _kMidpoint) / (1.0 - _kMidpo
int); | |
| 103 | |
| 104 // Solid filled rrect | |
| 105 paint.setStyle(sky.PaintingStyle.strokeAndFill); | |
| 106 paint.color = new Color.fromARGB((t * 255).floor(), | |
| 107 _kCheckedColor.red, | |
| 108 _kCheckedColor.green, | |
| 109 _kCheckedColor.blue); | |
| 110 canvas.drawRRect(rrect, paint); | |
| 111 | |
| 112 // White inner check | |
| 113 paint.color = const sky.Color(0xFFFFFFFF); | |
| 114 paint.setStyle(sky.PaintingStyle.stroke); | |
| 115 sky.Path path = new sky.Path(); | |
| 116 sky.Point start = new sky.Point(_kEdgeSize * 0.2, _kEdgeSize * 0.5
); | |
| 117 sky.Point mid = new sky.Point(_kEdgeSize * 0.4, _kEdgeSize * 0.7); | |
| 118 sky.Point end = new sky.Point(_kEdgeSize * 0.8, _kEdgeSize * 0.3); | |
| 119 Point lerp(Point p1, Point p2, double t) | |
| 120 => new Point(p1.x * (1.0 - t) + p2.x * t, p1.y * (1.0 - t) + p2.
y * t); | |
| 121 sky.Point drawStart = lerp(start, mid, 1.0 - t); | |
| 122 sky.Point drawEnd = lerp(mid, end, t); | |
| 123 path.moveTo(drawStart.x, drawStart.y); | |
| 124 path.lineTo(mid.x, mid.y); | |
| 125 path.lineTo(drawEnd.x, drawEnd.y); | |
| 126 canvas.drawPath(path, paint); | |
| 127 } | |
| 128 } | |
| 129 ) | |
| 130 ), | |
| 131 onGestureTap: _handleClick | |
| 132 ); | |
| 133 } | |
| 134 | |
| 135 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
