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