examples/clipping-draw-order/clipping-draw-order.cpp

   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
  18 #include <dali-toolkit/dali-toolkit.h>
  19 #include <dali-toolkit/devel-api/controls/table-view/table-view.h>
  20
  21 using namespace Dali;
  22 using namespace Dali::Toolkit;
  23
  24 const char* images[] = {
  25     DEMO_IMAGE_DIR "gallery-small-1.jpg",
  26     DEMO_IMAGE_DIR "gallery-small-2.jpg",
  27     DEMO_IMAGE_DIR "gallery-small-3.jpg",
  28     DEMO_IMAGE_DIR "gallery-small-4.jpg",
  29     DEMO_IMAGE_DIR "gallery-small-5.jpg"
  30 };
  31
  32 // This verification example confirms drawing order is the same, with or without clipping enabled.
  33 class ClippingDrawOrderVerification : public ConnectionTracker
  34 {
  35 public:
  36
  37   ClippingDrawOrderVerification( Application& application )
  38   : mApplication( application )
  39   {
  40     // Connect to the Application's Init signal.
  41     mApplication.InitSignal().Connect( this, &ClippingDrawOrderVerification::Create );
  42   }
  43
  44   ~ClippingDrawOrderVerification()
  45   {
  46     // Nothing to do here.
  47   }
  48
  49   // The Init signal is received once (only) during the Application lifetime.
  50   void Create( Application& application )
  51   {
  52     // Get a handle to the window
  53     Window window = application.GetWindow();
  54     window.SetBackgroundColor( Color::WHITE );
  55
  56     // Connect to the window's key signal to allow Back and Escape to exit.
  57     window.KeyEventSignal().Connect( this, &ClippingDrawOrderVerification::OnKeyEvent );
  58
  59     // Create the title label.
  60     TextLabel title = TextLabel::New( "Clipping draw order verification" );
  61     title.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
  62     title.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
  63     title.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
  64     title.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
  65
  66     // Create the description label.
  67     TextLabel description = TextLabel::New( "The bottom tree should have the same draw order as the top tree.\nThey should look identical except \"C\" is clipped on the bottom tree." );
  68     description.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
  69     description.SetProperty( TextLabel::Property::MULTI_LINE, true );
  70     description.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::BOTTOM_CENTER );
  71     description.SetProperty( Actor::Property::PARENT_ORIGIN, Vector3( 0.5f, 1.0f, 0.5f ) );
  72     window.Add( description );
  73
  74     /*
  75      * Create a 4-row TableView.
  76      * It will be segmented as follows:
  77      *
  78      *    +---------------+
  79      *    |     Title     |
  80      *    +---------------+
  81      *    |     Tree      |
  82      *    |    Without    |
  83      *    |   Clipping    |
  84      *    +---------------+
  85      *    |     Tree      |
  86      *    |     With      |
  87      *    |   Clipping    |
  88      *    +---------------+
  89      *    |  Explanation  |
  90      *    +---------------+
  91      */
  92     TableView view = TableView::New( 4, 1 );
  93     view.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
  94     view.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
  95     view.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
  96
  97     view.SetCellAlignment( Toolkit::TableView::CellPosition( 0, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
  98     view.SetCellAlignment( Toolkit::TableView::CellPosition( 1, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
  99     view.SetCellAlignment( Toolkit::TableView::CellPosition( 2, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
 100     view.SetCellAlignment( Toolkit::TableView::CellPosition( 3, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
 101
 102     view.SetCellPadding( Vector2( 14.0f, 7.0f ) );
 103
 104     view.SetRelativeWidth( 0u, 1.0f );
 105
 106     view.SetFitHeight( 0u );
 107     view.SetRelativeHeight( 1u, 0.5f );
 108     view.SetRelativeHeight( 2u, 0.5f );
 109     view.SetFitHeight( 3u );
 110
 111     // Add the title and description to the TableView.
 112     view.AddChild( title, TableView::CellPosition( 0u, 0u ) );
 113     view.AddChild( description, TableView::CellPosition( 3u, 0u ) );
 114
 115     /*
 116        For each of the 2 tree views, we create a small tree of actors as follows:
 117        ( Note: Clipping is only enabled for B on the bottom tree ).
 118
 119                              A
 120                             / \
 121        Clipping enabled -> B   D
 122                            |   |
 123                            C   E
 124
 125        The correct draw order is "ABCDE" (the same as if clipping was not enabled).
 126     */
 127     const float treeYStart = 0.12f;
 128     const float depthGap = 0.35f;
 129
 130     for( int tree = 0; tree < 2; ++tree )
 131     {
 132       Control container = Control::New();
 133       container.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_CENTER );
 134       container.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_CENTER );
 135       container.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 136       Vector4 backgroundColor = tree == 0 ? Vector4( 0.77f, 1.0f, 0.77f, 1.0f ) : Vector4( 0.8f, 0.8f, 1.0f, 1.0f );
 137       container.SetProperty( Control::Property::BACKGROUND, backgroundColor );
 138       ImageView image[5];
 139
 140       // Loop for each of the 5 images & labels.
 141       for( int i = 0; i < 5; ++i )
 142       {
 143         std::stringstream labelStream;
 144         labelStream << static_cast<char>( static_cast<char>( i ) + 'A' );
 145         TextLabel textLabel = TextLabel::New( labelStream.str() );
 146         textLabel.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_CENTER );
 147
 148         image[i] = ImageView::New( images[i] );
 149         image[i].SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_CENTER );
 150
 151         // Calculate the relative positioning for the images and labels.
 152         float depth = static_cast<float>( i == 0 ? 0 : ( ( i - 1 ) % 2 ) + 1 );
 153
 154         if( i == 0 )
 155         {
 156           image[i].SetProperty( Actor::Property::PARENT_ORIGIN, Vector3( 0.5f, treeYStart, 0.5f ) );
 157           textLabel.SetProperty( Actor::Property::PARENT_ORIGIN, Vector3( 1.0f, 0.05f * depth, 0.5f ) );
 158         }
 159         else
 160         {
 161           float b = i > 2 ? 1.0f : -1.0f;
 162           image[i].SetProperty( Actor::Property::PARENT_ORIGIN, Vector3( 0.5f + ( 0.2f * b ), depthGap, 0.5f ) );
 163           textLabel.SetProperty( Actor::Property::PARENT_ORIGIN, Vector3( 0.98f + 0.215f * b + ( 0.04f * b * depth ), treeYStart + 0.02f + ( 0.16f * depth ), 0.5f ) );
 164         }
 165
 166         container.Add( textLabel );
 167       }
 168
 169       // Create the title label.
 170       std::string treeText = tree == 0 ? "Without Clipping" : "With Clipping";
 171       TextLabel treeLabel = TextLabel::New( treeText );
 172       treeLabel.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
 173       treeLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "BOTTOM" );
 174       treeLabel.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::BOTTOM_CENTER );
 175       treeLabel.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::BOTTOM_CENTER );
 176       container.Add( treeLabel );
 177
 178       // Enable clipping for the 2nd tree.
 179       if( tree == 1 )
 180       {
 181         image[1].SetProperty( Actor::Property::CLIPPING_MODE, ClippingMode::CLIP_CHILDREN );
 182       }
 183
 184       // Build the tree structure.
 185       container.Add( image[0] );
 186
 187       image[0].Add( image[1] );
 188       image[1].Add( image[2] );
 189
 190       image[0].Add( image[3] );
 191       image[3].Add( image[4] );
 192
 193       // Add the finished tree to the TableView.
 194       view.AddChild( container, TableView::CellPosition( 1u + tree, 0u ) );
 195     }
 196
 197     // Add the finished TableView to the window.
 198     window.Add( view );
 199
 200     // Respond to a click anywhere on the window
 201     window.GetRootLayer().TouchSignal().Connect( this, &ClippingDrawOrderVerification::OnTouch );
 202   }
 203
 204   bool OnTouch( Actor actor, const TouchEvent& touch )
 205   {
 206     // Quit the application.
 207     mApplication.Quit();
 208     return true;
 209   }
 210
 211   /**
 212    * @brief Called when any key event is received
 213    *
 214    * Will use this to quit the application if Back or the Escape key is received
 215    * @param[in] event The key event information
 216    */
 217   void OnKeyEvent( const KeyEvent& event )
 218   {
 219     if( event.GetState() == KeyEvent::DOWN )
 220     {
 221       if( IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ) )
 222       {
 223         mApplication.Quit();
 224       }
 225     }
 226   }
 227
 228 private:
 229   Application&  mApplication;
 230 };
 231
 232 int DALI_EXPORT_API main( int argc, char **argv )
 233 {
 234   Application application = Application::New( &argc, &argv );
 235   ClippingDrawOrderVerification verification( application );
 236   application.MainLoop();
 237   return 0;
 238 }