| 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:math' as math; | |
| 6 import 'dart:sky' as sky; | |
| 7 | |
| 8 import 'package:vector_math/vector_math.dart'; | |
| 9 | |
| 10 import '../animation/animated_value.dart'; | |
| 11 import '../animation/curves.dart'; | |
| 12 import '../theme2/colors.dart'; | |
| 13 import '../theme2/shadows.dart'; | |
| 14 import 'animated_component.dart'; | |
| 15 import 'basic.dart'; | |
| 16 | |
| 17 // TODO(eseidel): Draw width should vary based on device size: | |
| 18 // http://www.google.com/design/spec/layout/structure.html#structure-side-nav | |
| 19 | |
| 20 // Mobile: | |
| 21 // Width = Screen width − 56 dp | |
| 22 // Maximum width: 320dp | |
| 23 // Maximum width applies only when using a left nav. When using a right nav, | |
| 24 // the panel can cover the full width of the screen. | |
| 25 | |
| 26 // Desktop/Tablet: | |
| 27 // Maximum width for a left nav is 400dp. | |
| 28 // The right nav can vary depending on content. | |
| 29 | |
| 30 const double _kWidth = 304.0; | |
| 31 const double _kMinFlingVelocity = 0.4; | |
| 32 const double _kBaseSettleDurationMS = 246.0; | |
| 33 const double _kMaxSettleDurationMS = 600.0; | |
| 34 const Curve _kAnimationCurve = parabolicRise; | |
| 35 | |
| 36 typedef void DrawerStatusChangeHandler (bool showing); | |
| 37 | |
| 38 class DrawerController { | |
| 39 | |
| 40 DrawerController(this.onStatusChange) { | |
| 41 position = new AnimatedValue(-_kWidth, onChange: _checkValue); | |
| 42 } | |
| 43 final DrawerStatusChangeHandler onStatusChange; | |
| 44 AnimatedValue position; | |
| 45 | |
| 46 bool _oldClosedState = true; | |
| 47 void _checkValue() { | |
| 48 var newClosedState = isClosed; | |
| 49 if (onStatusChange != null && _oldClosedState != newClosedState) { | |
| 50 onStatusChange(!newClosedState); | |
| 51 _oldClosedState = newClosedState; | |
| 52 } | |
| 53 } | |
| 54 | |
| 55 bool get isClosed => position.value == -_kWidth; | |
| 56 bool get _isMostlyClosed => position.value <= -_kWidth / 2; | |
| 57 void toggle() => _isMostlyClosed ? _open() : _close(); | |
| 58 | |
| 59 void handleMaskTap(_) => _close(); | |
| 60 void handlePointerDown(_) => position.stop(); | |
| 61 | |
| 62 void handlePointerMove(sky.PointerEvent event) { | |
| 63 if (position.isAnimating) | |
| 64 return; | |
| 65 position.value = math.min(0.0, math.max(position.value + event.dx, -_kWidth)
); | |
| 66 } | |
| 67 | |
| 68 void handlePointerUp(_) { | |
| 69 if (!position.isAnimating) | |
| 70 _settle(); | |
| 71 } | |
| 72 | |
| 73 void handlePointerCancel(_) { | |
| 74 if (!position.isAnimating) | |
| 75 _settle(); | |
| 76 } | |
| 77 | |
| 78 void _open() => _animateToPosition(0.0); | |
| 79 | |
| 80 void _close() => _animateToPosition(-_kWidth); | |
| 81 | |
| 82 void _settle() => _isMostlyClosed ? _close() : _open(); | |
| 83 | |
| 84 void _animateToPosition(double targetPosition) { | |
| 85 double distance = (targetPosition - position.value).abs(); | |
| 86 if (distance != 0) { | |
| 87 double targetDuration = distance / _kWidth * _kBaseSettleDurationMS; | |
| 88 double duration = math.min(targetDuration, _kMaxSettleDurationMS); | |
| 89 position.animateTo(targetPosition, duration, curve: _kAnimationCurve); | |
| 90 } | |
| 91 } | |
| 92 | |
| 93 void handleFlingStart(event) { | |
| 94 double direction = event.velocityX.sign; | |
| 95 double velocityX = event.velocityX.abs() / 1000; | |
| 96 if (velocityX < _kMinFlingVelocity) | |
| 97 return; | |
| 98 | |
| 99 double targetPosition = direction < 0.0 ? -_kWidth : 0.0; | |
| 100 double distance = (targetPosition - position.value).abs(); | |
| 101 double duration = distance / velocityX; | |
| 102 | |
| 103 if (distance > 0) | |
| 104 position.animateTo(targetPosition, duration, curve: linear); | |
| 105 } | |
| 106 | |
| 107 } | |
| 108 | |
| 109 class Drawer extends AnimatedComponent { | |
| 110 | |
| 111 Drawer({ | |
| 112 Object key, | |
| 113 this.controller, | |
| 114 this.children, | |
| 115 this.level: 0 | |
| 116 }) : super(key: key) { | |
| 117 animate(controller.position, (double value) { | |
| 118 _position = value; | |
| 119 }); | |
| 120 } | |
| 121 | |
| 122 List<UINode> children; | |
| 123 int level; | |
| 124 DrawerController controller; | |
| 125 | |
| 126 void syncFields(Drawer source) { | |
| 127 children = source.children; | |
| 128 level = source.level; | |
| 129 controller = source.controller; | |
| 130 super.syncFields(source); | |
| 131 } | |
| 132 | |
| 133 double _position; | |
| 134 | |
| 135 UINode build() { | |
| 136 Matrix4 transform = new Matrix4.identity(); | |
| 137 transform.translate(_position); | |
| 138 | |
| 139 double scaler = _position / _kWidth + 1; | |
| 140 Color maskColor = new Color.fromARGB((0x7F * scaler).floor(), 0, 0, 0); | |
| 141 | |
| 142 var mask = new EventListenerNode( | |
| 143 new Container(decoration: new BoxDecoration(backgroundColor: maskColor)), | |
| 144 onGestureTap: controller.handleMaskTap, | |
| 145 onGestureFlingStart: controller.handleFlingStart | |
| 146 ); | |
| 147 | |
| 148 Container content = new Container( | |
| 149 decoration: new BoxDecoration( | |
| 150 backgroundColor: Grey[50], | |
| 151 boxShadow: shadows[level]), | |
| 152 width: _kWidth, | |
| 153 transform: transform, | |
| 154 child: new Block(children) | |
| 155 ); | |
| 156 | |
| 157 return new EventListenerNode( | |
| 158 new Stack([ mask, content ]), | |
| 159 onPointerDown: controller.handlePointerDown, | |
| 160 onPointerMove: controller.handlePointerMove, | |
| 161 onPointerUp: controller.handlePointerUp, | |
| 162 onPointerCancel: controller.handlePointerCancel | |
| 163 ); | |
| 164 } | |
| 165 | |
| 166 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
