Change Drag operation and Drag image

[Title] Change Drag operation and Drag image
[Issue#] N/A
[Problem] N/A
[Cause] Modify the behavior according to the UX Guide.
[Solution] Change Drag operation and Drag image

Change-Id: I52bb0c07a1d023563e0ba5762c75224f5d0bd0e3

diff --git a/Source/WebKit2/UIProcess/API/efl/PageClientImpl.cpp b/Source/WebKit2/UIProcess/API/efl/PageClientImpl.cpp
index f1c88ae..c797a77 100755 (executable)
--- a/Source/WebKit2/UIProcess/API/efl/PageClientImpl.cpp
+++ b/Source/WebKit2/UIProcess/API/efl/PageClientImpl.cpp
@@ -1301,7 +1301,7 @@ void PageClientImpl::startDrag(const DragData& dragData, PassRefPtr<ShareableBit
     String dragStorageName("Drag");
     m_viewImpl->page()->dragEntered(dragInfo, dragStorageName);
     setDragMode(true);
-    m_drag->setDragData(dragInfo);
+    m_drag->setDragData(dragInfo, dragImage);
     m_drag->Show();
 }
 #endif

diff --git a/Source/WebKit2/UIProcess/API/efl/tizen/Drag.cpp b/Source/WebKit2/UIProcess/API/efl/tizen/Drag.cpp
index ba0bbc7..32568b6 100755 (executable)
--- a/Source/WebKit2/UIProcess/API/efl/tizen/Drag.cpp
+++ b/Source/WebKit2/UIProcess/API/efl/tizen/Drag.cpp
@@ -72,6 +72,12 @@ void Drag::setDragMode(bool isDragMode)
     m_isDragMode = isDragMode;
 }
 
+void Drag::setDragData(WebCore::DragData* dragdata, PassRefPtr<ShareableBitmap> dragImage)
+{
+    m_dragData = dragdata;
+    m_dragImage = dragImage;
+}
+
 void Drag::hide()
 {
     IntPoint viewPoint = m_viewImpl->transformFromScene().mapPoint(m_Handle->position());
@@ -86,8 +92,8 @@ void Drag::hide()
 
 void Drag::Show()
 {
-    m_Handle->move(m_savePoint);
     m_Handle->show();
+    m_Handle->move(m_savePoint);
 }
 
 // handle callbacks

diff --git a/Source/WebKit2/UIProcess/API/efl/tizen/Drag.edc b/Source/WebKit2/UIProcess/API/efl/tizen/Drag.edc
index 373c4ea..e4ceaab 100755 (executable)
--- a/Source/WebKit2/UIProcess/API/efl/tizen/Drag.edc
+++ b/Source/WebKit2/UIProcess/API/efl/tizen/Drag.edc
@@ -1,131 +1,229 @@
 collections {
-group { name: "drag_support";
-        data.item: "position" "BOTTOM";
-        data.item: "height" "40";
+group {
+        name: "drag_support";
         images {
-            image: "drag_able.png" COMP;
-            image: "drop_able.png" COMP;
+            image: "I01_drag_item_bg.png" COMP;
+            image: "I01_drag_item_link.png" COMP;
         }
         parts {
             part {
-                name:"top_padding";
-                type: RECT;
+                name: "bg";
+                mouse_events: 1;
                 scale: 1;
+                type: RECT;
                 description {
                     state: "default" 0.0;
-                    min: 0 30;
-                    visible: 0;
-                    fixed: 0 1;
-                    align: 0.5 0.0;
-                    rel1.relative: 0.0 0.0;
-                    rel2.relative: 1.0 0.0;
-                }
-                description {
-                    state: "show_up" 0.0;
-                    inherit: "default" 0.0;
+                    fixed: 1 1;
+                    min: 0 0;
+                    align: 0.0 0.0;
+                    visible: 1;
+                    color: 0 0 0 0;
                 }
+            }
+            part {
+                name: "bg_img";
+                mouse_events: 0;
+                scale: 1;
                 description {
-                    state: "visible" 0.0;
-                    inherit: "default" 0.0;
-                    min: 0 0;
+                    state: "default" 0.0;
+                    fixed: 0 0;
+                    min: 110 100;
+                    align: 0.0 0.0;
+                    rel1 { relative: 0.0 0.0; to: "bg"; }
+                    rel2 { relative: 1.0 1.0; to: "bg"; }
+                    image {
+                        normal: "I01_drag_item_bg.png";
+                        border: 34 34 24 34;
+                    }
+                    image.middle: 1;
+                    fill.smooth: 0;
                 }
             }
             part {
                 name: "swallow";
+                mouse_events: 1;
+                scale: 1;
                 type: SWALLOW;
                 description {
                     state: "default" 0.0;
-                    visible: 0;
+                    fixed: 1 1;
+                    align: 0 0;
+                    visible: 1;
+                    rel1 {
+                        offset : 10 0;
+                        to: "bg";
+                    }
+                    rel2 {
+                        offset : -10 -10;
+                        to: "bg";
+                    }
                 }
                 description {
-                    state: "show_up" 0.0;
-                    rel1 {to_y:"top_padding"; relative: 0.0 1.0;}
-                    rel2 {to_y:"top_padding"; relative: 0.0 1.0;}
-                    align: 0.5 0.0;
+                    state: "hide" 0.0;
+                    inherit: "default" 0.0;
+                    visible: 0;
                 }
             }
             part {
-                name: "handle";
+                name: "link";
                 mouse_events: 1;
                 scale: 1;
-                clip_to: "layout_clip";
                 description {
                     state: "default" 0.0;
-                    visible: 1;
                     fixed: 1 1;
-                    align: 1 1;
-                    min: 100 100;
-                    rel1 {to: "swallow"; relative: 0.0 0.0; offset: 0 -2; }
-                    rel2 {to: "swallow"; relative: 1.0 1.0; offset: 0 -2; }
+                    align: 0 0;
+                    min: 90 90;
+                    visible: 1;
                     image {
-                        normal: "drag_able.png";
+                        normal: "I01_drag_item_link.png";
+                    }
+                    rel1 {
+                        offset : 10 0;
+                        to: "bg";
+                    }
+                    rel2 {
+                        offset : -10 -10;
+                        to: "bg";
                     }
                 }
                 description {
-                    state: "drop_out" 0.0;
+                    state: "hide" 0.0;
                     inherit: "default" 0.0;
-                    image {
-                        normal: "drag_able.png";
+                    visible: 0;
+                }
+            }
+            part {
+                name: "cover_rect";
+                mouse_events: 1;
+                scale: 1;
+                type: RECT;
+                description {
+                    state: "default" 0.0;
+                    fixed: 1 1;
+                    align: 0 0;
+                    visible: 0;
+                    color: 175 0 0 125;
+                    rel1 {
+                        to: "bg";
+                    }
+                    rel2 {
+                        to: "bg";
                     }
                 }
                 description {
                     state: "drop_in" 0.0;
                     inherit: "default" 0.0;
-                    image {
-                        normal: "drop_able.png";
-                    }
+                    visible: 1;
+                }
+                description {
+                    state: "drop_out" 0.0;
+                    inherit: "default" 0.0;
+                    visible: 0;
+                }
+            }
+        }
+        programs {
+            program {
+                signal: "dragndrop,drop,in";
+                source: "dragndrop";
+                script {
+                    set_state(PART:"cover_rect", "drop_in", 0.0);
+                }
+            }
+            program {
+                signal: "dragndrop,drop,out";
+                source: "dragndrop";
+                script {
+                    set_state(PART:"cover_rect", "drop_out", 0.0);
+                }
+            }
+            program {
+                signal: "dragndrop,link,hide";
+                source: "dragndrop";
+                script {
+                    set_state(PART:"link", "hide", 0.0);
+                }
+            }
+            program {
+                signal: "dragndrop,link,show";
+                source: "dragndrop";
+                script {
+                    set_state(PART:"link", "default", 0.0);
+                }
+            }
+            program {
+                signal: "dragndrop,image,hide";
+                source: "dragndrop";
+                script {
+                    set_state(PART:"swallow", "hide", 0.0);
                 }
             }
+            program {
+                signal: "dragndrop,image,show";
+                source: "dragndrop";
+                script {
+                    set_state(PART:"swallow", "default", 0.0);
+                }
+            }
+        }
+    }
+
+
+group {
+        name: "drag_cancel";
+        images {
+            image: "I01_delete_btn.png" COMP;
+            image: "I01_delete_btn_press.png" COMP;
+        }
+        parts {
             part {
-                name: "layout_clip";
-                type: RECT;
+                name: "cancel_img";
+                mouse_events: 1;
+                scale: 1;
                 description {
                     state: "default" 0.0;
-                    color: 255 255 255 0;
-                    rel1 {to: "handle"; relative: -0.2 -0.2; }
-                    rel2 {to: "handle"; relative: 1.2 1.2;}
+                    fixed: 1 1;
+                    align: 0 0;
+                    min: 72 72;
+                    visible: 1;
+                    image {
+                        normal: "I01_delete_btn.png";
+                    }
                 }
                 description {
-                    state: "show_up" 0.0;
+                    state: "press" 0.0;
                     inherit: "default" 0.0;
+                    image {
+                        normal: "I01_delete_btn_press.png";
+                    }
                 }
                 description {
-                    state: "visible" 0.0;
+                    state: "hide" 0.0;
                     inherit: "default" 0.0;
-                    color: 255 255 255 255;
+                    visible: 0;
                 }
             }
         }
         programs {
             program {
-                name:   "showup";
-                signal: "dragndrop,drop,show,up";
+                signal: "dragndrop,cancel,press";
                 source: "dragndrop";
-                action: STATE_SET "show_up" 0.0;
-                target: "swallow";
-                target: "top_padding";
-                target: "layout_clip";
-                after: "showupend";
-            }
-            program {
-                name:   "showupend";
-                action: STATE_SET "visible" 0.0;
-                transition: SIN_FAC 0.2 1.1;
-                target: "top_padding";
-                target: "layout_clip";
+                script {
+                    set_state(PART:"cancel_img", "press", 0.0);
+                }
             }
             program {
-                signal: "dragndrop,drop,in";
+                signal: "dragndrop,cancel,hide";
                 source: "dragndrop";
                 script {
-                    set_state(PART:"handle", "drop_in", 0.0);
+                    set_state(PART:"cancel_img", "hide", 0.0);
                 }
             }
             program {
-                signal: "dragndrop,drop,out";
+                signal: "dragndrop,cancel,default";
                 source: "dragndrop";
                 script {
-                    set_state(PART:"handle", "drop_out", 0.0);
+                    set_state(PART:"cancel_img", "default", 0.0);
                 }
             }
         }

diff --git a/Source/WebKit2/UIProcess/API/efl/tizen/Drag.h b/Source/WebKit2/UIProcess/API/efl/tizen/Drag.h
index 9fd59f6..5fa38db 100755 (executable)
--- a/Source/WebKit2/UIProcess/API/efl/tizen/Drag.h
+++ b/Source/WebKit2/UIProcess/API/efl/tizen/Drag.h
@@ -51,9 +51,11 @@ public:
 
     bool isDragMode() { return m_isDragMode; }
     void setDragMode(bool isDragMode);
-    void setDragData(WebCore::DragData* dragdata) { m_dragData = dragdata; }
+    void setDragData(WebCore::DragData* dragdata, PassRefPtr<ShareableBitmap> dragImage);
     void setDragPoint(const WebCore::IntPoint& point) { m_savePoint = point; }
     WebCore::IntPoint getDragPoint() { return m_savePoint; }
+    PassRefPtr<ShareableBitmap> getDragImage() { return m_dragImage; }
+    EwkViewImpl* getViewImpl() { return m_viewImpl; }
 
     // handle callback
     void handleMouseMove(DragHandle* handle);
@@ -68,8 +70,10 @@ private:
 
 private:
     EwkViewImpl* m_viewImpl;
+    RefPtr<ShareableBitmap> m_dragImage;
     DragHandle* m_Handle;
 
+
     bool m_isDragMode;
     String m_dragStorageName;
     WebCore::DragData* m_dragData;

diff --git a/Source/WebKit2/UIProcess/API/efl/tizen/DragHandle.cpp b/Source/WebKit2/UIProcess/API/efl/tizen/DragHandle.cpp
index dcb5f53..b37c7e4 100755 (executable)
--- a/Source/WebKit2/UIProcess/API/efl/tizen/DragHandle.cpp
+++ b/Source/WebKit2/UIProcess/API/efl/tizen/DragHandle.cpp
@@ -34,17 +34,30 @@ using namespace WebCore;
 
 namespace WebKit {
 
-const int s_iconOffset = 30;
+const int s_iconOffset = 90;
+const int s_widthMargin = 20;
+const int s_heightMargin = 10;
+const double s_minIconWidth = 110;
+const double s_minIconHeight = 100;
+const double s_minImageLength = 90;
+const double s_maxImageLength = 300;
+
 
 DragHandle::DragHandle(Evas_Object* object, const String& theme, const String& path, Drag* drag)
     : m_drag(drag)
     , m_dragJob(0)
 {
-    m_icon = edje_object_add(evas_object_evas_get(object));
-    if (!m_icon)
+    Evas_Object* topWidget = elm_object_top_widget_get(elm_object_parent_widget_get(object));
+    if (!topWidget)
+        topWidget = object;
+
+    m_icon = elm_layout_add(topWidget);
+    m_cancelIcon = elm_layout_add(topWidget);
+
+    if (!m_icon || !m_cancelIcon)
         return;
 
-    if (!edje_object_file_set(m_icon, theme.utf8().data(), path.utf8().data()))
+    if (!elm_layout_file_set(m_icon, theme.utf8().data(), path.utf8().data()) || !elm_layout_file_set(m_cancelIcon, theme.utf8().data(), "drag_cancel"))
         return;
 
     evas_object_smart_member_add(m_icon, object);
@@ -53,6 +66,9 @@ DragHandle::DragHandle(Evas_Object* object, const String& theme, const String& p
     evas_object_event_callback_add(m_icon, EVAS_CALLBACK_MOUSE_DOWN, mouseDown, this);
     evas_object_event_callback_add(m_icon, EVAS_CALLBACK_MOUSE_MOVE, mouseMove, this);
     evas_object_event_callback_add(m_icon, EVAS_CALLBACK_MOUSE_UP, mouseUp, this);
+    evas_object_propagate_events_set(m_cancelIcon, false);
+    evas_object_event_callback_add(m_cancelIcon, EVAS_CALLBACK_MOUSE_DOWN, cancelMouseDown, this);
+    evas_object_event_callback_add(m_cancelIcon, EVAS_CALLBACK_MOUSE_UP, cancelMouseUp, this);
 }
 
 DragHandle::~DragHandle()
@@ -68,19 +84,73 @@ DragHandle::~DragHandle()
         evas_object_event_callback_del(m_icon, EVAS_CALLBACK_MOUSE_UP, mouseUp);
         evas_object_del(m_icon);
     }
+
+    if (m_cancelIcon) {
+        evas_object_event_callback_del(m_cancelIcon, EVAS_CALLBACK_MOUSE_DOWN, cancelMouseDown);
+        evas_object_event_callback_del(m_cancelIcon, EVAS_CALLBACK_MOUSE_UP, cancelMouseUp);
+        evas_object_del(m_cancelIcon);
+    }
 }
 
 void DragHandle::move(const IntPoint& point)
 {
-    if (m_icon)
-        evas_object_move(m_icon, point.x(), point.y());
+    if (m_icon) {
+        evas_object_move(m_icon, point.x() - m_dragImageWidth / 2, point.y() - m_dragImageHeight / 2);
+        evas_object_move(m_cancelIcon, point.x() - (m_dragImageWidth / 2) - 26, point.y() - (m_dragImageHeight / 2) - 36);
+    }
 }
 
 void DragHandle::show()
 {
     if (m_icon) {
-        edje_object_signal_emit(m_icon, "dragndrop,drop,show,up", "dragndrop");
+        if (m_drag->getDragImage()) {
+            elm_object_signal_emit(m_icon, "dragndrop,link,hide", "dragndrop");
+            elm_object_signal_emit(m_icon, "dragndrop,image,show", "dragndrop");
+
+            m_dragImageWidth = cairo_image_surface_get_width(m_drag->getDragImage()->createCairoSurface().get());
+            m_dragImageHeight = cairo_image_surface_get_height(m_drag->getDragImage()->createCairoSurface().get());
+
+            if (m_dragImage)
+                m_dragImage = 0;
+
+            if (m_dragImageWidth < s_minImageLength) {
+                m_dragImageWidth *= 1.5;
+                m_dragImageHeight *= 1.5;
+            }
+
+            if (m_dragImageHeight > s_maxImageLength) {
+                m_dragImageWidth = m_dragImageWidth * (s_maxImageLength / m_dragImageHeight);
+                m_dragImageHeight = s_maxImageLength;
+            }
+            if (m_dragImageWidth > s_maxImageLength) {
+                m_dragImageHeight = m_dragImageHeight * (s_maxImageLength / m_dragImageWidth);
+                m_dragImageWidth = s_maxImageLength;
+            }
+
+            if (m_dragImageWidth < s_minImageLength)
+                m_dragImageWidth = s_minImageLength;
+            if (m_dragImageHeight < s_minImageLength)
+                m_dragImageHeight = s_minImageLength;
+
+            m_dragImage = ewk_util_image_from_cairo_surface_add(evas_object_evas_get(m_drag->getViewImpl()->view()), m_drag->getDragImage()->createCairoSurface().get());
+            evas_object_size_hint_min_set(m_dragImage, m_dragImageWidth, m_dragImageHeight);
+            evas_object_resize(m_dragImage, m_dragImageWidth, m_dragImageHeight);
+            evas_object_image_filled_set(m_dragImage, EINA_TRUE);
+            evas_object_show(m_dragImage);
+
+            evas_object_resize(m_icon, m_dragImageWidth + s_widthMargin, m_dragImageHeight + s_heightMargin);
+            elm_object_part_content_set(m_icon, "swallow", m_dragImage);
+        } else {
+            elm_object_signal_emit(m_icon, "dragndrop,image,hide", "dragndrop");
+            elm_object_signal_emit(m_icon, "dragndrop,link,show", "dragndrop");
+
+            m_dragImageWidth = s_minIconWidth;
+            m_dragImageHeight = s_minIconHeight;
+
+            evas_object_resize(m_icon, m_dragImageWidth, m_dragImageHeight);
+        }
         evas_object_show(m_icon);
+        evas_object_show(m_cancelIcon);
     }
 }
 
@@ -88,7 +158,10 @@ void DragHandle::hide()
 {
     if (m_icon) {
         evas_object_hide(m_icon);
-        edje_object_signal_emit(m_icon, "dragndrop,drop,out", "dragndrop");
+        evas_object_hide(m_cancelIcon);
+
+        elm_object_signal_emit(m_icon, "dragndrop,drop,out", "dragndrop");
+        elm_object_signal_emit(m_cancelIcon, "dragndrop,cancel,default", "dragndrop");
     }
 }
 
@@ -98,12 +171,25 @@ void DragHandle::updateHandleIcon(bool isDropAble)
         return;
 
     if (isDropAble)
-        edje_object_signal_emit(m_icon, "dragndrop,drop,in", "dragndrop");
+        elm_object_signal_emit(m_icon, "dragndrop,drop,in", "dragndrop");
     else
-        edje_object_signal_emit(m_icon, "dragndrop,drop,out", "dragndrop");
+        elm_object_signal_emit(m_icon, "dragndrop,drop,out", "dragndrop");
 }
 
 // callbacks
+void DragHandle::cancelMouseDown(void* data, Evas*, Evas_Object*, void* eventInfo)
+{
+    DragHandle* handle = static_cast<DragHandle*>(data);
+    elm_object_signal_emit(handle->cancelIcon(), "dragndrop,cancel,press", "dragndrop");
+}
+
+void DragHandle::cancelMouseUp(void* data, Evas*, Evas_Object*, void* eventInfo)
+{
+    DragHandle* handle = static_cast<DragHandle*>(data);
+    elm_object_signal_emit(handle->cancelIcon(), "dragndrop,cancel,default", "dragndrop");
+    handle->hide();
+}
+
 void DragHandle::mouseDown(void* data, Evas*, Evas_Object*, void* eventInfo)
 {
     Evas_Event_Mouse_Down* event = static_cast<Evas_Event_Mouse_Down*>(eventInfo);

diff --git a/Source/WebKit2/UIProcess/API/efl/tizen/DragHandle.h b/Source/WebKit2/UIProcess/API/efl/tizen/DragHandle.h
index 327a672..d9b1492 100755 (executable)
--- a/Source/WebKit2/UIProcess/API/efl/tizen/DragHandle.h
+++ b/Source/WebKit2/UIProcess/API/efl/tizen/DragHandle.h
@@ -47,9 +47,12 @@ public:
     void hide();
     void updateHandleIcon(bool isDropAble);
     const WebCore::IntPoint position() const { return m_mousePosition; }
+    Evas_Object* cancelIcon() { return m_cancelIcon; }
 
 private:
     // callbacks
+    static void cancelMouseDown(void*, Evas*, Evas_Object*, void*);
+    static void cancelMouseUp(void*, Evas*, Evas_Object*, void*);
     static void mouseDown(void*, Evas*, Evas_Object*, void*);
     static void mouseMove(void*, Evas*, Evas_Object*, void*);
     static void mouseUp(void*, Evas*, Evas_Object*, void*);
@@ -59,6 +62,10 @@ private:
 
 private:
     Evas_Object* m_icon;
+    Evas_Object* m_cancelIcon;
+    Evas_Object* m_dragImage;
+    double m_dragImageWidth;
+    double m_dragImageHeight;
     WebCore::IntPoint m_mousePosition;
     Drag* m_drag;
     Ecore_Job* m_dragJob;

diff --git a/Source/WebKit2/UIProcess/API/efl/tizen/images/drag_able.png b/Source/WebKit2/UIProcess/API/efl/tizen/images/drag_able.png
deleted file mode 100755 (executable)
index 95514fd..0000000
Binary files a/Source/WebKit2/UIProcess/API/efl/tizen/images/drag_able.png and /dev/null differ

diff --git a/Source/WebKit2/UIProcess/API/efl/tizen/images/drop_able.png b/Source/WebKit2/UIProcess/API/efl/tizen/images/drop_able.png
deleted file mode 100755 (executable)
index bad8dee..0000000
Binary files a/Source/WebKit2/UIProcess/API/efl/tizen/images/drop_able.png and /dev/null differ