enhancing wrapper, now horizontal drop location -> example horizontally sortable...

svn changeset:11353/svn branch:6.3_dd

diff --git a/WebContent/VAADIN/themes/base/common/common.css b/WebContent/VAADIN/themes/base/common/common.css
index 29fb1363d407842d3d5c00740832a5d0828295a4..336fe828a28ce8ca0448e74fa46dcc13f0e29f81 100644 (file)
--- a/WebContent/VAADIN/themes/base/common/common.css
+++ b/WebContent/VAADIN/themes/base/common/common.css
@@ -220,6 +220,8 @@ div.v-app-loading {
        padding: 2px;
 }
 
+/* TODO jouni: replace debug colors */
+
 .v-drag-element {
        z-index:60000;
        position:absolute;
@@ -228,11 +230,11 @@ div.v-app-loading {
     border: 1px solid #999;
 }
 
-
 .v-ddwrapper {
        background-color: cyan;
 }
 
+.v-ddwrapper-over-middle,
 .v-ddwrapper-over-center {
        background-color: LightGreen;
 }
@@ -242,3 +244,9 @@ div.v-app-loading {
 .v-ddwrapper-over-bottom {
        border-bottom: 2px solid green;
 }
+.v-ddwrapper-over-left {
+       border-left: 2px solid green;
+}
+.v-ddwrapper-over-right {
+       border-right: 2px solid green;
+}

diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css
index 770f1c9d4cef924d22aff199c1a5833a7b5b7ba3..948cf42f5b242f287140612b0f3a0541d49234a2 100644 (file)
--- a/WebContent/VAADIN/themes/base/styles.css
+++ b/WebContent/VAADIN/themes/base/styles.css
@@ -1,5 +1,5 @@
-.v-theme-version:after {content:"6_3_0_dev-20100216";}
-.v-theme-version-6_3_0_dev-20100216 {display: none;}
+.v-theme-version:after {content:"6_3_0_dev-20100217";}
+.v-theme-version-6_3_0_dev-20100217 {display: none;}
 /* Automatically compiled css file from subdirectories. */
 
 .v-absolutelayout-wrapper {
@@ -450,6 +450,8 @@ div.v-app-loading {
        padding: 2px;
 }
 
+/* TODO jouni: replace debug colors */
+
 .v-drag-element {
        z-index:60000;
        position:absolute;
@@ -458,11 +460,11 @@ div.v-app-loading {
     border: 1px solid #999;
 }
 
-
 .v-ddwrapper {
        background-color: cyan;
 }
 
+.v-ddwrapper-over-middle,
 .v-ddwrapper-over-center {
        background-color: LightGreen;
 }
@@ -472,6 +474,12 @@ div.v-app-loading {
 .v-ddwrapper-over-bottom {
        border-bottom: 2px solid green;
 }
+.v-ddwrapper-over-left {
+       border-left: 2px solid green;
+}
+.v-ddwrapper-over-right {
+       border-right: 2px solid green;
+}
 
 .v-csslayout {
        overflow: hidden;

diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css
index e927ab81cbd9c0bcab003d5e75ae55428e06057d..1be5ef5ac92893ca9b027ac4015b76eaa4f300f7 100644 (file)
--- a/WebContent/VAADIN/themes/reindeer/styles.css
+++ b/WebContent/VAADIN/themes/reindeer/styles.css
@@ -1,5 +1,5 @@
-.v-theme-version:after {content:"6_3_0_dev-20100216";}
-.v-theme-version-6_3_0_dev-20100216 {display: none;}
+.v-theme-version:after {content:"6_3_0_dev-20100217";}
+.v-theme-version-6_3_0_dev-20100217 {display: none;}
 /* Automatically compiled css file from subdirectories. */
 
 .v-absolutelayout-wrapper {
@@ -450,6 +450,8 @@ div.v-app-loading {
        padding: 2px;
 }
 
+/* TODO jouni: replace debug colors */
+
 .v-drag-element {
        z-index:60000;
        position:absolute;
@@ -458,11 +460,11 @@ div.v-app-loading {
     border: 1px solid #999;
 }
 
-
 .v-ddwrapper {
        background-color: cyan;
 }
 
+.v-ddwrapper-over-middle,
 .v-ddwrapper-over-center {
        background-color: LightGreen;
 }
@@ -472,6 +474,12 @@ div.v-app-loading {
 .v-ddwrapper-over-bottom {
        border-bottom: 2px solid green;
 }
+.v-ddwrapper-over-left {
+       border-left: 2px solid green;
+}
+.v-ddwrapper-over-right {
+       border-right: 2px solid green;
+}
 
 .v-csslayout {
        overflow: hidden;

diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css
index a3ad1f1f862a38b0cf12005f93953853fe143df3..843a89bcdee39b858f86d063579928f7fc8e7730 100644 (file)
--- a/WebContent/VAADIN/themes/runo/styles.css
+++ b/WebContent/VAADIN/themes/runo/styles.css
@@ -1,5 +1,5 @@
-.v-theme-version:after {content:"6_3_0_dev-20100216";}
-.v-theme-version-6_3_0_dev-20100216 {display: none;}
+.v-theme-version:after {content:"6_3_0_dev-20100217";}
+.v-theme-version-6_3_0_dev-20100217 {display: none;}
 /* Automatically compiled css file from subdirectories. */
 
 .v-absolutelayout-wrapper {
@@ -450,6 +450,8 @@ div.v-app-loading {
        padding: 2px;
 }
 
+/* TODO jouni: replace debug colors */
+
 .v-drag-element {
        z-index:60000;
        position:absolute;
@@ -458,11 +460,11 @@ div.v-app-loading {
     border: 1px solid #999;
 }
 
-
 .v-ddwrapper {
        background-color: cyan;
 }
 
+.v-ddwrapper-over-middle,
 .v-ddwrapper-over-center {
        background-color: LightGreen;
 }
@@ -472,6 +474,12 @@ div.v-app-loading {
 .v-ddwrapper-over-bottom {
        border-bottom: 2px solid green;
 }
+.v-ddwrapper-over-left {
+       border-left: 2px solid green;
+}
+.v-ddwrapper-over-right {
+       border-right: 2px solid green;
+}
 
 .v-csslayout {
        overflow: hidden;

diff --git a/src/com/vaadin/terminal/gwt/client/ui/VDragAndDropWrapper.java b/src/com/vaadin/terminal/gwt/client/ui/VDragAndDropWrapper.java
index f6b4baa29dbed85c4bd2a612e6939bdffca807e4..5aab1fa9550f10f582e17ab72d2c50c97c317b18 100644 (file)
--- a/src/com/vaadin/terminal/gwt/client/ui/VDragAndDropWrapper.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VDragAndDropWrapper.java
@@ -12,6 +12,7 @@ import com.google.gwt.user.client.ui.Widget;
 import com.vaadin.terminal.gwt.client.ApplicationConnection;
 import com.vaadin.terminal.gwt.client.Paintable;
 import com.vaadin.terminal.gwt.client.UIDL;
+import com.vaadin.terminal.gwt.client.ui.dd.HorizontalDropLocation;
 import com.vaadin.terminal.gwt.client.ui.dd.VAbstractDropHandler;
 import com.vaadin.terminal.gwt.client.ui.dd.VAcceptCallback;
 import com.vaadin.terminal.gwt.client.ui.dd.VDragAndDropManager;
@@ -201,6 +202,7 @@ public class VDragAndDropWrapper extends VCustomComponent implements
 
         private static final String OVER_STYLE = "v-ddwrapper-over";
         private VerticalDropLocation verticalDropLocation;
+        private HorizontalDropLocation horizontalDropLocation;
 
         @Override
         public void dragEnter(VDragEvent drag) {
@@ -242,6 +244,7 @@ public class VDragAndDropWrapper extends VCustomComponent implements
             dd.put("absoluteTop", absoluteTop);
 
             dd.put("verticalLocation", verticalDropLocation.toString());
+            dd.put("horizontalLocation", horizontalDropLocation.toString());
 
             return super.drop(drag);
         }
@@ -252,6 +255,9 @@ public class VDragAndDropWrapper extends VCustomComponent implements
                         false);
                 VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE + "-"
                         + verticalDropLocation.toString().toLowerCase(), false);
+                VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE + "-"
+                        + horizontalDropLocation.toString().toLowerCase(),
+                        false);
             }
         }
 
@@ -264,11 +270,13 @@ public class VDragAndDropWrapper extends VCustomComponent implements
             deEmphasis();
             verticalDropLocation = VerticalDropLocation.get(getElement(), drag
                     .getCurrentGwtEvent().getClientY(), 0.2);
-            // TODO add more detailed stylenames depending on which part of
-            // wrapper the drag currently is (vertical done, needs horizontal)
+            horizontalDropLocation = HorizontalDropLocation.get(getElement(),
+                    drag.getCurrentGwtEvent().getClientX(), 0.2);
             VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE, true);
             VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE + "-"
                     + verticalDropLocation.toString().toLowerCase(), true);
+            VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE + "-"
+                    + horizontalDropLocation.toString().toLowerCase(), true);
 
             // TODO build (to be an example) an emphasis mode where drag image
             // is fitted before or after the content

diff --git a/src/com/vaadin/terminal/gwt/client/ui/VTree.java b/src/com/vaadin/terminal/gwt/client/ui/VTree.java
index 22b897d9c7d02de8cfbd6feac3b92afd3f40adcc..9926d2921af75f0a96882ca92d28080c9eaae5d9 100644 (file)
--- a/src/com/vaadin/terminal/gwt/client/ui/VTree.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VTree.java
@@ -169,7 +169,7 @@ public class VTree extends FlowPanel implements Paintable, VHasDropHandler {
             Boolean overTreeNode = null;
             TreeNode treeNode = keyToNode.get(currentMouseOverKey);
             if (treeNode != null && !treeNode.isLeaf()
-                    && "Center".equals(detail)) {
+                    && "MIDDLE".equals(detail)) {
                 overTreeNode = true;
             }
             drag.getDropDetails().put("itemIdOverIsNode", overTreeNode);
@@ -355,18 +355,18 @@ public class VTree extends FlowPanel implements Paintable, VHasDropHandler {
 
         public void emphasis(String string) {
             String base = "v-tree-node-drag-";
-            UIObject.setStyleName(getElement(), base + "top", "Top"
+            UIObject.setStyleName(getElement(), base + "top", "TOP"
                     .equals(string));
-            UIObject.setStyleName(getElement(), base + "bottom", "Bottom"
+            UIObject.setStyleName(getElement(), base + "bottom", "BOTTOM"
                     .equals(string));
-            UIObject.setStyleName(getElement(), base + "center", "Center"
+            UIObject.setStyleName(getElement(), base + "center", "MIDDLE"
                     .equals(string));
             base = "v-tree-node-caption-drag-";
-            UIObject.setStyleName(nodeCaptionDiv, base + "top", "Top"
+            UIObject.setStyleName(nodeCaptionDiv, base + "top", "TOP"
                     .equals(string));
-            UIObject.setStyleName(nodeCaptionDiv, base + "bottom", "Bottom"
+            UIObject.setStyleName(nodeCaptionDiv, base + "bottom", "BOTTOM"
                     .equals(string));
-            UIObject.setStyleName(nodeCaptionDiv, base + "center", "Center"
+            UIObject.setStyleName(nodeCaptionDiv, base + "center", "MIDDLE"
                     .equals(string));
         }
 
@@ -426,8 +426,6 @@ public class VTree extends FlowPanel implements Paintable, VHasDropHandler {
                     mouseDownEvent = null;
                 }
                 if (type == Event.ONMOUSEOVER) {
-                    ApplicationConnection.getConsole().log(
-                            "Treenode mouse over");
                     mouseDownEvent = null;
                     currentMouseOverKey = key;
                     event.stopPropagation();

diff --git a/src/com/vaadin/terminal/gwt/client/ui/dd/HorizontalDropLocation.java b/src/com/vaadin/terminal/gwt/client/ui/dd/HorizontalDropLocation.java
new file mode 100644 (file)
index 0000000..c69329f
--- /dev/null
+++ b/src/com/vaadin/terminal/gwt/client/ui/dd/HorizontalDropLocation.java
@@ -0,0 +1,24 @@
+package com.vaadin.terminal.gwt.client.ui.dd;
+
+import com.google.gwt.user.client.Element;
+
+public enum HorizontalDropLocation {
+    LEFT, RIGHT, CENTER;
+
+    public static HorizontalDropLocation get(Element element, int clientX,
+            double leftRightRatio) {
+
+        int absoluteLeft = element.getAbsoluteLeft();
+        int offsetWidth = element.getOffsetWidth();
+        int fromTop = clientX - absoluteLeft;
+
+        float percentageFromTop = (fromTop / (float) offsetWidth);
+        if (percentageFromTop < leftRightRatio) {
+            return LEFT;
+        } else if (percentageFromTop > 1 - leftRightRatio) {
+            return RIGHT;
+        } else {
+            return CENTER;
+        }
+    }
+}

diff --git a/src/com/vaadin/terminal/gwt/client/ui/dd/VerticalDropLocation.java b/src/com/vaadin/terminal/gwt/client/ui/dd/VerticalDropLocation.java
index 8c1f1a7aa1cd64c636404025990e3b8ac9e3b365..a500341625ee9df8f2a3ef41efade7c557c10a35 100644 (file)
--- a/src/com/vaadin/terminal/gwt/client/ui/dd/VerticalDropLocation.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/dd/VerticalDropLocation.java
@@ -3,7 +3,7 @@ package com.vaadin.terminal.gwt.client.ui.dd;
 import com.google.gwt.user.client.Element;
 
 public enum VerticalDropLocation {
-    Top, Bottom, Center;
+    TOP, BOTTOM, MIDDLE;
 
     public static VerticalDropLocation get(Element element, int clientY,
             double topBottomRatio) {
@@ -14,11 +14,11 @@ public enum VerticalDropLocation {
 
         float percentageFromTop = (fromTop / (float) offsetHeight);
         if (percentageFromTop < topBottomRatio) {
-            return Top;
+            return TOP;
         } else if (percentageFromTop > 1 - topBottomRatio) {
-            return Bottom;
+            return BOTTOM;
         } else {
-            return Center;
+            return MIDDLE;
         }
     }
 }

diff --git a/src/com/vaadin/ui/Table.java b/src/com/vaadin/ui/Table.java
index aae0c9545657e7c9bed66e6a2cb9f1879f4e6af6..fe28c1fed9941e51cae12bdbb69adb3a9ed16ca4 100644 (file)
--- a/src/com/vaadin/ui/Table.java
+++ b/src/com/vaadin/ui/Table.java
@@ -3409,9 +3409,9 @@ public class Table extends AbstractSelect implements Action.Container,
 
         public Location getDropLocation() {
             String s = (String) getData("detail");
-            if ("Top".equals(s)) {
+            if ("TOP".equals(s)) {
                 return Location.TOP;
-            } else if ("Bottom".equals(s)) {
+            } else if ("BOTTOM".equals(s)) {
                 return Location.BOTTOM;
             } else {
                 return Location.MIDDLE;

diff --git a/src/com/vaadin/ui/Tree.java b/src/com/vaadin/ui/Tree.java
index ab8eae84195085de4b6fc16b32eb801cb6aea273..c4a1bff12d5057db22b368f74c71522529f19bfa 100644 (file)
--- a/src/com/vaadin/ui/Tree.java
+++ b/src/com/vaadin/ui/Tree.java
@@ -1181,9 +1181,9 @@ public class Tree extends AbstractSelect implements Container.Hierarchical,
 
         public Location getDropLocation() {
             String s = (String) getData("detail");
-            if ("Top".equals(s)) {
+            if ("TOP".equals(s)) {
                 return Location.TOP;
-            } else if ("Bottom".equals(s)) {
+            } else if ("BOTTOM".equals(s)) {
                 return Location.BOTTOM;
             } else {
                 return Location.MIDDLE;

diff --git a/tests/src/com/vaadin/tests/dd/DDTest5.java b/tests/src/com/vaadin/tests/dd/DDTest5.java
index 615080805889bcd9f5604d684f222d5ab17a9aee..52cccb6a05c7a51c40c4e4ffc50fab38fcae2667 100644 (file)
--- a/tests/src/com/vaadin/tests/dd/DDTest5.java
+++ b/tests/src/com/vaadin/tests/dd/DDTest5.java
@@ -50,6 +50,18 @@ public class DDTest5 extends TestBase {
     protected void setup() {
         Window w = getLayout().getWindow();
 
+        VerticalSortableCssLayoutWithWrappers verticalSortableCssLayoutWithWrappers = new VerticalSortableCssLayoutWithWrappers();
+        w.addWindow(verticalSortableCssLayoutWithWrappers);
+        verticalSortableCssLayoutWithWrappers.setPositionX(200);
+        verticalSortableCssLayoutWithWrappers.setPositionY(40); /*
+                                                                 * FIXME:
+                                                                 * subwindow
+                                                                 * horizontal
+                                                                 * position does
+                                                                 * not work if
+                                                                 * only x set
+                                                                 */
+
         Label l;
 
         l = new Label("Drag me");
@@ -70,7 +82,8 @@ public class DDTest5 extends TestBase {
         cssLayout.setHeight("300px");
 
         dragAndDropWrapper2 = new DragAndDropWrapper(cssLayout);
-        dragAndDropWrapper2.setCaption("Drop here");
+        dragAndDropWrapper2
+                .setCaption("Drop here or sort with dd (wrapper(csslayout(n*wrapper(label))))");
 
         dh = new DropHandler() {
 
@@ -118,7 +131,7 @@ public class DDTest5 extends TestBase {
                             wrappedLabel = (WrappedLabel) sourceComponent;
                         }
                         if (dropEvent.getDropTargetData().getData(
-                                "verticalLocation").equals("Top")) {
+                                "verticalLocation").equals("TOP")) {
                             // before reference if dropped on topmost part
                             i--;
                             if (i < 0) {
@@ -159,7 +172,7 @@ public class DDTest5 extends TestBase {
 
     @Override
     protected String getDescription() {
-        return "dd";
+        return "dd: DragAndDropWrapper to build various use cases completely on server side";
     }
 
     @Override

diff --git a/tests/src/com/vaadin/tests/dd/VerticalSortableCssLayoutWithWrappers.java b/tests/src/com/vaadin/tests/dd/VerticalSortableCssLayoutWithWrappers.java
new file mode 100644 (file)
index 0000000..ac27755
--- /dev/null
+++ b/tests/src/com/vaadin/tests/dd/VerticalSortableCssLayoutWithWrappers.java
@@ -0,0 +1,104 @@
+package com.vaadin.tests.dd;
+
+import java.util.Iterator;
+
+import com.vaadin.event.ComponentTransferable;
+import com.vaadin.event.Transferable;
+import com.vaadin.event.dd.DropEvent;
+import com.vaadin.event.dd.DropHandler;
+import com.vaadin.event.dd.DropTarget;
+import com.vaadin.event.dd.TargetDetails;
+import com.vaadin.event.dd.acceptCriteria.AcceptAll;
+import com.vaadin.event.dd.acceptCriteria.AcceptCriterion;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.DragAndDropWrapper;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Window;
+
+public class VerticalSortableCssLayoutWithWrappers extends Window {
+
+    static int count;
+
+    private CssLayout cssLayout = new CssLayout() {
+        @Override
+        protected String getCss(Component c) {
+            return "float:left; width:60px;height:60px;background: yellow;padding:2px;";
+        };
+    };
+
+    class WrappedLabel extends DragAndDropWrapper {
+
+        private static final long serialVersionUID = 1L;
+
+        public WrappedLabel(String content) {
+            super(new Label(content + " c:" + ++count));
+            setSizeUndefined(); // via css
+            setHeight("60px"); // FIXME custom component seems to be broken:
+                               // can't set height with css only
+            setDragStartMode(DragStartMode.WRAPPER);
+        }
+
+        @Override
+        public DropHandler getDropHandler() {
+            return dh;
+        }
+
+    }
+
+    private DropHandler dh = new DropHandler() {
+
+        public AcceptCriterion getAcceptCriterion() {
+            return AcceptAll.get();
+        }
+
+        public void drop(DropEvent dropEvent) {
+            Transferable transferable = dropEvent.getTransferable();
+            if (transferable instanceof ComponentTransferable) {
+                ComponentTransferable ct = (ComponentTransferable) transferable;
+                Component sourceComponent = ct.getSourceComponent();
+                if (sourceComponent instanceof WrappedLabel) {
+                    int index = 1;
+                    Iterator<Component> componentIterator = cssLayout
+                            .getComponentIterator();
+                    Component next = componentIterator.next();
+                    TargetDetails dropTargetData = dropEvent
+                            .getDropTargetData();
+                    DropTarget target = dropTargetData.getTarget();
+                    while (next != target) {
+                        if (next != sourceComponent) {
+                            index++;
+                        }
+                        next = componentIterator.next();
+                    }
+                    if (dropTargetData.getData("horizontalLocation").equals(
+                            "LEFT")) {
+                        index--;
+                        if (index < 0) {
+                            index = 0;
+                        }
+                    }
+
+                    cssLayout.removeComponent(sourceComponent);
+                    cssLayout.addComponent(sourceComponent, index);
+                }
+            }
+            // TODO Auto-generated method stub
+
+        }
+    };
+
+    public VerticalSortableCssLayoutWithWrappers() {
+        setCaption("Horizontally sortable csslayout via (ddwrappers):Try sorting block by draggin them");
+        DragAndDropWrapper pane = new DragAndDropWrapper(cssLayout);
+        setContent(pane);
+        pane.setSizeFull();
+        setWidth("400px");
+        setHeight("100px");
+
+        for (int i = 0; i < 4; i++) {
+            cssLayout.addComponent(new WrappedLabel("Block"));
+        }
+
+    }
+}