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

svn changeset:11353/svn branch:6.3_dd

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;
+}

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;

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;

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;

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

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();

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;
+        }
+    }
+}

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;
         }
     }
 }

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;

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;

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

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"));
+        }
+
+    }
+}