src/Tizen.NUI.Wearable/src/public/CircularScrollbar.cs

   1 /*
   2  * Copyright(c) 2020 Samsung Electronics Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  *
  16  */
  17 using System;
  18 using System.ComponentModel;
  19 using Tizen.NUI.BaseComponents;
  20 using Tizen.NUI.Binding;
  21 using Tizen.NUI.Components;
  22
  23 namespace Tizen.NUI.Wearable
  24 {
  25     /// <summary>
  26     /// The CircualrScrollbar is a wearable NUI component that can be linked to the scrollable objects
  27     /// indicating the current scroll position of the scrollable object.<br />
  28     /// </summary>
  29     [EditorBrowsable(EditorBrowsableState.Never)]
  30     public class CircularScrollbar : ScrollbarBase
  31     {
  32         #region Fields
  33
  34         /// <summary>Bindable property of Thickness</summary>
  35         [EditorBrowsable(EditorBrowsableState.Never)]
  36         public static readonly BindableProperty ThicknessProperty = BindableProperty.Create(nameof(Thickness), typeof(float), typeof(CircularScrollbar), default(float), propertyChanged: (bindable, oldValue, newValue) =>
  37         {
  38             var instance = ((CircularScrollbar)bindable);
  39             var thickness = (float?)newValue;
  40
  41             ((CircularScrollbarStyle)instance.viewStyle).Thickness = thickness;
  42             instance.UpdateVisualThickness(thickness ?? 0);
  43         },
  44         defaultValueCreator: (bindable) =>
  45         {
  46             return ((CircularScrollbarStyle)((CircularScrollbar)bindable).viewStyle)?.Thickness ?? 0;
  47         });
  48
  49         /// <summary>Bindable property of TrackSweepAngle</summary>
  50         [EditorBrowsable(EditorBrowsableState.Never)]
  51         public static readonly BindableProperty TrackSweepAngleProperty = BindableProperty.Create(nameof(TrackSweepAngle), typeof(float), typeof(CircularScrollbar), default(float), propertyChanged: (bindable, oldValue, newValue) =>
  52         {
  53             var instance = ((CircularScrollbar)bindable);
  54             var angle = (float?)newValue;
  55
  56             ((CircularScrollbarStyle)instance.viewStyle).TrackSweepAngle = angle;
  57             instance.UpdateTrackVisualSweepAngle(angle ?? 0);
  58         },
  59         defaultValueCreator: (bindable) =>
  60         {
  61             return ((CircularScrollbarStyle)((CircularScrollbar)bindable).viewStyle)?.TrackSweepAngle ?? 0;
  62         });
  63
  64         /// <summary>Bindable property of TrackColor</summary>
  65         [EditorBrowsable(EditorBrowsableState.Never)]
  66         public static readonly BindableProperty TrackColorProperty = BindableProperty.Create(nameof(TrackColor), typeof(Color), typeof(CircularScrollbar), null, propertyChanged: (bindable, oldValue, newValue) =>
  67         {
  68             var instance = ((CircularScrollbar)bindable);
  69             var color = (Color)newValue;
  70
  71             ((CircularScrollbarStyle)instance.viewStyle).TrackColor = color;
  72             instance.UpdateTrackVisualColor(color);
  73         },
  74         defaultValueCreator: (bindable) =>
  75         {
  76             return ((CircularScrollbarStyle)((CircularScrollbar)bindable).viewStyle)?.TrackColor;
  77         });
  78
  79         /// <summary>Bindable property of ThumbColor</summary>
  80         [EditorBrowsable(EditorBrowsableState.Never)]
  81         public static readonly BindableProperty ThumbColorProperty = BindableProperty.Create(nameof(ThumbColor), typeof(Color), typeof(CircularScrollbar), null, propertyChanged: (bindable, oldValue, newValue) =>
  82         {
  83             var instance = ((CircularScrollbar)bindable);
  84             var color = (Color)newValue;
  85
  86             ((CircularScrollbarStyle)instance.viewStyle).ThumbColor = color;
  87             instance.UpdateThumbVisualColor(color);
  88         },
  89         defaultValueCreator: (bindable) =>
  90         {
  91             return ((CircularScrollbarStyle)((CircularScrollbar)bindable).viewStyle)?.ThumbColor;
  92         });
  93
  94         private ArcVisual trackVisual;
  95         private ArcVisual thumbVisual;
  96         private float contentLength;
  97         private float visibleLength;
  98         private float currentPosition;
  99         private float directionAlpha;
 100         private Size containerSize = new Size(0, 0);
 101         private Animation thumbStartAngleAnimation;
 102         private Animation thumbSweepAngleAnimation;
 103
 104         #endregion Fields
 105
 106
 107         #region Constructors
 108
 109         /// <summary>
 110         /// Create an empty CircularScrollbar.
 111         /// </summary>
 112         public CircularScrollbar() : base(new CircularScrollbarStyle())
 113         {
 114         }
 115
 116         /// <summary>
 117         /// Create a CircularScrollbar and initialize with properties.
 118         /// </summary>
 119         /// <param name="contentLength">The length of the scrollable content area.</param>
 120         /// <param name="viewportLength">The length of the viewport representing the amount of visible content.</param>
 121         /// <param name="currentPosition">The current position of the viewport in scrollable content area. This is the viewport's top position if the scroller is vertical, otherwise, left.</param>
 122         /// <param name="isHorizontal">Whether the direction of scrolling is horizontal or not. It is vertical by default.</param>
 123         [EditorBrowsable(EditorBrowsableState.Never)]
 124         public CircularScrollbar(float contentLength, float viewportLength, float currentPosition, bool isHorizontal = false) : base(new CircularScrollbarStyle())
 125         {
 126             Initialize(contentLength, viewportLength, currentPosition, isHorizontal);
 127         }
 128
 129         /// <summary>
 130         /// Create an empty CircularScrollbar with a CircularScrollbarStyle instance to set style properties.
 131         /// </summary>
 132         [EditorBrowsable(EditorBrowsableState.Never)]
 133         public CircularScrollbar(CircularScrollbarStyle style) : base(style)
 134         {
 135         }
 136
 137         /// <summary>
 138         /// Static constructor to initialize bindable properties when loading.
 139         /// </summary>
 140         static CircularScrollbar()
 141         {
 142         }
 143
 144         #endregion Constructors
 145
 146
 147         #region Properties
 148
 149         /// <summary>
 150         /// The thickness of the scrollbar and track.
 151         /// </summary>
 152         [EditorBrowsable(EditorBrowsableState.Never)]
 153         public float Thickness
 154         {
 155             get => (float)GetValue(ThicknessProperty);
 156             set => SetValue(ThicknessProperty, value);
 157         }
 158
 159         /// <summary>
 160         /// The sweep angle of track area in degrees.
 161         /// </summary>
 162         /// <remarks>
 163         /// Values below 6 degrees are treated as 6 degrees.
 164         /// Values exceeding 180 degrees are treated as 180 degrees.
 165         /// </remarks>
 166         [EditorBrowsable(EditorBrowsableState.Never)]
 167         public float TrackSweepAngle
 168         {
 169             get => (float)GetValue(TrackSweepAngleProperty);
 170             set => SetValue(TrackSweepAngleProperty, value);
 171         }
 172
 173         /// <summary>
 174         /// The color of the track part.
 175         /// </summary>
 176         [EditorBrowsable(EditorBrowsableState.Never)]
 177         public Color TrackColor
 178         {
 179             get => (Color)GetValue(TrackColorProperty);
 180             set => SetValue(TrackColorProperty, value);
 181         }
 182
 183         /// <summary>
 184         /// The color of the thumb part.
 185         /// </summary>
 186         [EditorBrowsable(EditorBrowsableState.Never)]
 187         public Color ThumbColor
 188         {
 189             get => (Color)GetValue(ThumbColorProperty);
 190             set => SetValue(ThumbColorProperty, value);
 191         }
 192
 193         #endregion Properties
 194
 195
 196         #region Methods
 197
 198         /// <inheritdoc/>
 199         [EditorBrowsable(EditorBrowsableState.Never)]
 200         public override void Initialize(float contentLength, float viewportLenth, float currentPosition, bool isHorizontal = false)
 201         {
 202             this.contentLength = contentLength > 0.0f ? contentLength : 0.0f;
 203             this.visibleLength = viewportLenth;
 204             this.currentPosition = currentPosition;
 205             this.directionAlpha = isHorizontal ? 270.0f : 0.0f;
 206
 207             thumbStartAngleAnimation?.Stop();
 208             thumbStartAngleAnimation = null;
 209
 210             thumbSweepAngleAnimation?.Stop();
 211             thumbSweepAngleAnimation = null;
 212
 213
 214             float trackSweepAngle = CalculateTrackSweepAngle(TrackSweepAngle);
 215             float trackStartAngle = CalculateTrackStartAngle(trackSweepAngle);
 216             float thumbSweepAngle = CalculateThumbSweepAngle(TrackSweepAngle);
 217             float thumbStartAngle = CalculateThumbStartAngle(currentPosition, trackStartAngle, trackSweepAngle, thumbSweepAngle);
 218
 219             if (trackVisual == null)
 220             {
 221                 trackVisual = new ArcVisual
 222                 {
 223                     SuppressUpdateVisual = true,
 224                     Thickness = this.Thickness,
 225                     Cap = ArcVisual.CapType.Round,
 226                     MixColor = TrackColor,
 227                     Size = containerSize - new Size(2, 2),
 228                     SizePolicy = VisualTransformPolicyType.Absolute,
 229                     SweepAngle = trackSweepAngle,
 230                     StartAngle = trackStartAngle,
 231                 };
 232
 233                 AddVisual("Track", trackVisual);
 234             }
 235             else
 236             {
 237                 trackVisual.SweepAngle = trackSweepAngle;
 238                 trackVisual.StartAngle = trackStartAngle;
 239                 trackVisual.UpdateVisual(true);
 240             }
 241
 242             if (thumbVisual == null)
 243             {
 244                 thumbVisual = new ArcVisual
 245                 {
 246                     SuppressUpdateVisual = true,
 247                     Thickness = trackVisual.Thickness,
 248                     Cap = ArcVisual.CapType.Round,
 249                     MixColor = ThumbColor,
 250                     Size = containerSize - new Size(2, 2),
 251                     SizePolicy = VisualTransformPolicyType.Absolute,
 252                     SweepAngle = thumbSweepAngle,
 253                     StartAngle = thumbStartAngle,
 254                     Opacity = CalculateThumbVisibility() ? 1.0f : 0.0f,
 255                 };
 256
 257                 AddVisual("Thumb", thumbVisual);
 258             }
 259             else
 260             {
 261                 thumbVisual.SweepAngle = thumbSweepAngle;
 262                 thumbVisual.StartAngle = thumbStartAngle;
 263                 thumbVisual.UpdateVisual(true);
 264             }
 265         }
 266
 267         /// <inheritdoc/>
 268         [EditorBrowsable(EditorBrowsableState.Never)]
 269         public override void Update(float contentLength, float position, uint durationMs = 0, AlphaFunction alphaFunction = null)
 270         {
 271             this.currentPosition = position;
 272             this.contentLength = contentLength > 0.0f ? contentLength : 0.0f;
 273
 274             if (thumbVisual == null)
 275             {
 276                 return;
 277             }
 278
 279             thumbVisual.SweepAngle = CalculateThumbSweepAngle(TrackSweepAngle);
 280             thumbVisual.StartAngle = CalculateThumbStartAngle(position, trackVisual.StartAngle, trackVisual.SweepAngle, thumbVisual.SweepAngle);
 281             thumbVisual.Opacity = CalculateThumbVisibility() ? 1.0f : 0.0f;
 282
 283             if (durationMs == 0)
 284             {
 285                 thumbVisual.UpdateVisual(true);
 286
 287                 return;
 288             }
 289
 290             // TODO Support non built-in alpha function for visual trainsition in DALi.
 291             AlphaFunction.BuiltinFunctions builtinAlphaFunction = alphaFunction?.GetBuiltinFunction() ?? AlphaFunction.BuiltinFunctions.Default;
 292
 293             thumbStartAngleAnimation?.Stop();
 294             thumbStartAngleAnimation = AnimateVisual(thumbVisual, "startAngle", thumbVisual.StartAngle, 0, (int)durationMs, builtinAlphaFunction);
 295             thumbStartAngleAnimation.Play();
 296
 297             thumbSweepAngleAnimation?.Stop();
 298             thumbSweepAngleAnimation = AnimateVisual(thumbVisual, "sweepAngle", thumbVisual.SweepAngle, 0, (int)durationMs, builtinAlphaFunction);
 299             thumbSweepAngleAnimation.Play();
 300         }
 301
 302         /// <inheritdoc/>
 303         [EditorBrowsable(EditorBrowsableState.Never)]
 304         public override void ScrollTo(float position, uint durationMs = 0, AlphaFunction alphaFunction = null)
 305         {
 306             currentPosition = position;
 307
 308             if (thumbVisual == null)
 309             {
 310                 return;
 311             }
 312
 313             var oldThumbStartAngle = thumbVisual.StartAngle;
 314
 315             thumbVisual.StartAngle = CalculateThumbStartAngle(position, trackVisual.StartAngle, trackVisual.SweepAngle, thumbVisual.SweepAngle);
 316
 317             if (durationMs == 0)
 318             {
 319                 thumbVisual.UpdateVisual(true);
 320
 321                 return;
 322             }
 323
 324             // TODO Support non built-in alpha function for visual trainsition in DALi.
 325             AlphaFunction.BuiltinFunctions builtinAlphaFunction = alphaFunction?.GetBuiltinFunction() ?? AlphaFunction.BuiltinFunctions.Default;
 326
 327             thumbStartAngleAnimation?.Stop();
 328             thumbStartAngleAnimation = AnimateVisual(thumbVisual, "startAngle", thumbVisual.StartAngle, 0, (int)durationMs, builtinAlphaFunction);
 329             thumbStartAngleAnimation.Play();
 330         }
 331
 332         /// <inheritdoc/>
 333         [EditorBrowsable(EditorBrowsableState.Never)]
 334         public override void OnRelayout(Vector2 size, RelayoutContainer container)
 335         {
 336             base.OnRelayout(size, container);
 337
 338             if (size.Width == containerSize?.Width && size.Height == containerSize.Height)
 339             {
 340                 return;
 341             }
 342
 343             containerSize = new Size(size.Width, size.Height);
 344
 345             if (trackVisual == null)
 346             {
 347                 return;
 348             }
 349
 350             trackVisual.Size = containerSize - new Size(2, 2);
 351             thumbVisual.Size = containerSize - new Size(2, 2);
 352
 353             trackVisual.UpdateVisual(true);
 354             thumbVisual.UpdateVisual(true);
 355         }
 356
 357         /// <inheritdoc/>
 358         [EditorBrowsable(EditorBrowsableState.Never)]
 359         protected override ViewStyle GetViewStyle()
 360         {
 361             return new CircularScrollbarStyle();
 362         }
 363
 364         private float CalculateTrackStartAngle(float currentTrackSweepAngle)
 365         {
 366             return ((180.0f - currentTrackSweepAngle) / 2.0f) + directionAlpha;
 367         }
 368
 369         private float CalculateTrackSweepAngle(float inputTrackSweepAngle)
 370         {
 371             return Math.Min(Math.Max(inputTrackSweepAngle, 3), 180);
 372         }
 373
 374         private float CalculateThumbStartAngle(float position, float trackStartAngle, float trackSweepAngle, float thumbSweepAngle)
 375         {
 376             float minAngle = trackStartAngle;
 377             float maxAngle = trackStartAngle + trackSweepAngle - thumbSweepAngle;
 378             float resultAngle = trackStartAngle + (trackSweepAngle * (position < 0.0f ? 0.0f : position) / contentLength);
 379
 380             return Math.Min(Math.Max(resultAngle, minAngle), maxAngle);
 381         }
 382
 383         private float CalculateThumbSweepAngle(float trackSweepAngle)
 384         {
 385             return trackSweepAngle * visibleLength / contentLength;
 386         }
 387
 388         private bool CalculateThumbVisibility()
 389         {
 390             return contentLength > visibleLength;
 391         }
 392
 393         private void UpdateVisualThickness(float thickness)
 394         {
 395             if (trackVisual == null)
 396             {
 397                 return;
 398             }
 399
 400             trackVisual.Thickness = thickness;
 401             thumbVisual.Thickness = thickness;
 402
 403             trackVisual.UpdateVisual(true);
 404             thumbVisual.UpdateVisual(true);
 405         }
 406
 407         private void UpdateTrackVisualSweepAngle(float trackSweepAngle)
 408         {
 409             if (trackVisual == null || thumbVisual == null)
 410             {
 411                 return;
 412             }
 413
 414             trackVisual.SweepAngle = CalculateTrackSweepAngle(trackSweepAngle);
 415             trackVisual.StartAngle = CalculateTrackStartAngle(trackVisual.SweepAngle);
 416
 417             thumbVisual.SweepAngle = CalculateThumbSweepAngle(TrackSweepAngle);
 418             thumbVisual.StartAngle = CalculateThumbStartAngle(currentPosition, trackVisual.StartAngle, trackVisual.SweepAngle, thumbVisual.SweepAngle);
 419
 420             trackVisual.UpdateVisual(true);
 421             thumbVisual.UpdateVisual(true);
 422         }
 423
 424         private void UpdateTrackVisualColor(Color trackColor)
 425         {
 426             if (trackVisual == null)
 427             {
 428                 return;
 429             }
 430
 431             trackVisual.MixColor = trackColor;
 432             trackVisual.UpdateVisual(true);
 433         }
 434
 435         private void UpdateThumbVisualColor(Color thumbColor)
 436         {
 437             if (thumbVisual == null)
 438             {
 439                 return;
 440             }
 441
 442             thumbVisual.MixColor = thumbColor;
 443             thumbVisual.UpdateVisual(true);
 444         }
 445
 446         #endregion Methods
 447     }
 448 }