From 22bee1156d5f2ee94626045853609bdf960a9cb0 Mon Sep 17 00:00:00 2001 From: Tom Robinson Date: Tue, 20 Jun 2017 11:51:55 +0100 Subject: [PATCH] Clipping draw order fix Change-Id: I3c5aa4922e891cf1ca194676d1bcf2e3493c5eb1 --- com.samsung.dali-demo.xml | 3 + examples-reel/dali-examples-reel.cpp | 1 + .../clipping-draw-order/clipping-draw-order.cpp | 226 +++++++++++++++++++++ resources/po/en_GB.po | 3 + resources/po/en_US.po | 3 + resources/po/ko.po | 3 + shared/dali-demo-strings.h | 2 + 7 files changed, 241 insertions(+) create mode 100644 examples/clipping-draw-order/clipping-draw-order.cpp diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml index 53d7900..fc16157 100644 --- a/com.samsung.dali-demo.xml +++ b/com.samsung.dali-demo.xml @@ -194,6 +194,9 @@ + + + diff --git a/examples-reel/dali-examples-reel.cpp b/examples-reel/dali-examples-reel.cpp index 0c3f7cf..04a8c83 100644 --- a/examples-reel/dali-examples-reel.cpp +++ b/examples-reel/dali-examples-reel.cpp @@ -42,6 +42,7 @@ int DALI_EXPORT_API main(int argc, char **argv) demo.AddExample(Example("builder.example", DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI)); demo.AddExample(Example("buttons.example", DALI_DEMO_STR_TITLE_BUTTONS)); demo.AddExample(Example("clipping.example", DALI_DEMO_STR_TITLE_CLIPPING)); + demo.AddExample(Example("clipping-draw-order.example", DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER)); demo.AddExample(Example("dissolve-effect.example", DALI_DEMO_STR_TITLE_DISSOLVE_TRANSITION)); demo.AddExample(Example("effects-view.example", DALI_DEMO_STR_TITLE_EFFECTS_VIEW)); demo.AddExample(Example("flex-container.example", DALI_DEMO_STR_TITLE_FLEXBOX_PLAYGROUND)); diff --git a/examples/clipping-draw-order/clipping-draw-order.cpp b/examples/clipping-draw-order/clipping-draw-order.cpp new file mode 100644 index 0000000..1dd0e03 --- /dev/null +++ b/examples/clipping-draw-order/clipping-draw-order.cpp @@ -0,0 +1,226 @@ +/* + * Copyright (c) 2017 Samsung Electronics Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +#include + +using namespace Dali; +using namespace Dali::Toolkit; + +const char* images[] = { + DEMO_IMAGE_DIR "gallery-small-1.jpg", + DEMO_IMAGE_DIR "gallery-small-2.jpg", + DEMO_IMAGE_DIR "gallery-small-3.jpg", + DEMO_IMAGE_DIR "gallery-small-4.jpg", + DEMO_IMAGE_DIR "gallery-small-5.jpg" +}; + +// This verification example confirms drawing order is the same, with or without clipping enabled. +class ClippingDrawOrderVerification : public ConnectionTracker +{ +public: + + ClippingDrawOrderVerification( Application& application ) + : mApplication( application ) + { + // Connect to the Application's Init signal. + mApplication.InitSignal().Connect( this, &ClippingDrawOrderVerification::Create ); + } + + ~ClippingDrawOrderVerification() + { + // Nothing to do here. + } + + // The Init signal is received once (only) during the Application lifetime. + void Create( Application& application ) + { + // Get a handle to the stage + Stage stage = Stage::GetCurrent(); + stage.SetBackgroundColor( Color::WHITE ); + + // Create the title label. + TextLabel title = TextLabel::New( "Clipping draw order verification" ); + title.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" ); + title.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" ); + title.SetAnchorPoint( AnchorPoint::CENTER ); + title.SetParentOrigin( ParentOrigin::CENTER ); + + // Create the description label. + 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." ); + description.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" ); + description.SetProperty( TextLabel::Property::MULTI_LINE, true ); + description.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER ); + description.SetParentOrigin( Vector3( 0.5f, 1.0f, 0.5f ) ); + stage.Add( description ); + + /* + * Create a 4-row TableView. + * It will be segmented as follows: + * + * +---------------+ + * | Title | + * +---------------+ + * | Tree | + * | Without | + * | Clipping | + * +---------------+ + * | Tree | + * | With | + * | Clipping | + * +---------------+ + * | Explanation | + * +---------------+ + */ + TableView view = TableView::New( 4, 1 ); + view.SetAnchorPoint( AnchorPoint::CENTER ); + view.SetParentOrigin( ParentOrigin::CENTER ); + view.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); + + view.SetCellAlignment( Toolkit::TableView::CellPosition( 0, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER ); + view.SetCellAlignment( Toolkit::TableView::CellPosition( 1, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER ); + view.SetCellAlignment( Toolkit::TableView::CellPosition( 2, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER ); + view.SetCellAlignment( Toolkit::TableView::CellPosition( 3, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER ); + + view.SetCellPadding( Vector2( 14.0f, 7.0f ) ); + + view.SetRelativeWidth( 0u, 1.0f ); + + view.SetFitHeight( 0u ); + view.SetRelativeHeight( 1u, 0.5f ); + view.SetRelativeHeight( 2u, 0.5f ); + view.SetFitHeight( 3u ); + + // Add the title and description to the TableView. + view.AddChild( title, TableView::CellPosition( 0u, 0u ) ); + view.AddChild( description, TableView::CellPosition( 3u, 0u ) ); + + /* + For each of the 2 tree views, we create a small tree of actors as follows: + ( Note: Clipping is only enabled for B on the bottom tree ). + + A + / \ + Clipping enabled -> B D + | | + C E + + The correct draw order is "ABCDE" (the same as if clipping was not enabled). + */ + const float treeYStart = 0.12f; + const float depthGap = 0.35f; + + for( int tree = 0; tree < 2; ++tree ) + { + Control container = Control::New(); + container.SetAnchorPoint( AnchorPoint::TOP_CENTER ); + container.SetParentOrigin( ParentOrigin::TOP_CENTER ); + container.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); + Vector4 backgroundColor = tree == 0 ? Vector4( 0.77f, 1.0f, 0.77f, 1.0f ) : Vector4( 0.8f, 0.8f, 1.0f, 1.0f ); + container.SetProperty( Control::Property::BACKGROUND, backgroundColor ); + ImageView image[5]; + + // Loop for each of the 5 images & labels. + for( int i = 0; i < 5; ++i ) + { + std::stringstream labelStream; + labelStream << static_cast( static_cast( i ) + 'A' ); + TextLabel textLabel = TextLabel::New( labelStream.str() ); + textLabel.SetAnchorPoint( AnchorPoint::TOP_CENTER ); + + image[i] = ImageView::New( images[i] ); + image[i].SetAnchorPoint( AnchorPoint::TOP_CENTER ); + + // Calculate the relative positioning for the images and labels. + float depth = static_cast( i == 0 ? 0 : ( ( i - 1 ) % 2 ) + 1 ); + + if( i == 0 ) + { + image[i].SetParentOrigin( Vector3( 0.5f, treeYStart, 0.5f ) ); + textLabel.SetParentOrigin( Vector3( 1.0f, 0.05f * depth, 0.5f ) ); + } + else + { + float b = i > 2 ? 1.0f : -1.0f; + image[i].SetParentOrigin( Vector3( 0.5f + ( 0.2f * b ), depthGap, 0.5f ) ); + textLabel.SetParentOrigin( Vector3( 0.98f + 0.215f * b + ( 0.04f * b * depth ), treeYStart + 0.02f + ( 0.16f * depth ), 0.5f ) ); + } + + container.Add( textLabel ); + } + + // Create the title label. + std::string treeText = tree == 0 ? "Without Clipping" : "With Clipping"; + TextLabel treeLabel = TextLabel::New( treeText ); + treeLabel.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" ); + treeLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "BOTTOM" ); + treeLabel.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER ); + treeLabel.SetParentOrigin( ParentOrigin::BOTTOM_CENTER ); + container.Add( treeLabel ); + + // Enable clipping for the 2nd tree. + if( tree == 1 ) + { + image[1].SetProperty( Actor::Property::CLIPPING_MODE, ClippingMode::CLIP_CHILDREN ); + } + + // Build the tree structure. + container.Add( image[0] ); + + image[0].Add( image[1] ); + image[1].Add( image[2] ); + + image[0].Add( image[3] ); + image[3].Add( image[4] ); + + // Add the finished tree to the TableView. + view.AddChild( container, TableView::CellPosition( 1u + tree, 0u ) ); + } + + // Add the finished TableView to the stage. + stage.Add( view ); + + // Respond to a click anywhere on the stage + stage.GetRootLayer().TouchSignal().Connect( this, &ClippingDrawOrderVerification::OnTouch ); + } + + bool OnTouch( Actor actor, const TouchData& touch ) + { + // Quit the application. + mApplication.Quit(); + return true; + } + +private: + Application& mApplication; +}; + +void RunVerification( Application& application ) +{ + ClippingDrawOrderVerification verification( application ); + + application.MainLoop(); +} + +// Entry point for Linux & Tizen applications. +int DALI_EXPORT_API main( int argc, char **argv ) +{ + Application application = Application::New( &argc, &argv ); + + RunVerification( application ); + + return 0; +} diff --git a/resources/po/en_GB.po b/resources/po/en_GB.po index f21d6bc..877b2ee 100755 --- a/resources/po/en_GB.po +++ b/resources/po/en_GB.po @@ -22,6 +22,9 @@ msgstr "Buttons" msgid "DALI_DEMO_STR_TITLE_CLIPPING" msgstr "Clipping" +msgid "DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER" +msgstr "Clipping Draw Order" + msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT" msgstr "Colour Gradient" diff --git a/resources/po/en_US.po b/resources/po/en_US.po index aa8d849..b2976b8 100755 --- a/resources/po/en_US.po +++ b/resources/po/en_US.po @@ -22,6 +22,9 @@ msgstr "Buttons" msgid "DALI_DEMO_STR_TITLE_CLIPPING" msgstr "Clipping" +msgid "DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER" +msgstr "Clipping Draw Order" + msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT" msgstr "Color Gradient" diff --git a/resources/po/ko.po b/resources/po/ko.po index 80d264c..2e3fe5c 100755 --- a/resources/po/ko.po +++ b/resources/po/ko.po @@ -19,6 +19,9 @@ msgstr "버튼" msgid "DALI_DEMO_STR_TITLE_CLIPPING" msgstr "깎는" +msgid "DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER" +msgstr "드로잉 순서를 클리핑" + msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT" msgstr "색상 그라디언트" diff --git a/shared/dali-demo-strings.h b/shared/dali-demo-strings.h index 4c38e6f..47baf36 100644 --- a/shared/dali-demo-strings.h +++ b/shared/dali-demo-strings.h @@ -40,6 +40,7 @@ extern "C" #define DALI_DEMO_STR_TITLE_BUBBLES dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BUBBLES") #define DALI_DEMO_STR_TITLE_BUTTONS dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BUTTONS") #define DALI_DEMO_STR_TITLE_CLIPPING dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CLIPPING") +#define DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER") #define DALI_DEMO_STR_TITLE_COLOR_GRADIENT dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_COLOR_GRADIENT") #define DALI_DEMO_STR_TITLE_CONTACT_CARDS dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CONTACT_CARDS") #define DALI_DEMO_STR_TITLE_CUBE_TRANSITION dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CUBE_TRANSITION") @@ -107,6 +108,7 @@ extern "C" #define DALI_DEMO_STR_TITLE_BUBBLES "Bubbles" #define DALI_DEMO_STR_TITLE_BUTTONS "Buttons" #define DALI_DEMO_STR_TITLE_CLIPPING "Clipping" +#define DALI_DEMO_STR_TITLE_CLIPPING_DRAW_ORDER "Clipping Draw Order" #define DALI_DEMO_STR_TITLE_COLOR_GRADIENT "Color Gradient" #define DALI_DEMO_STR_TITLE_CONTACT_CARDS "Contact Cards" #define DALI_DEMO_STR_TITLE_CUBE_TRANSITION "Cube Effect" -- 2.7.4