From 326484dc6b14a10bf98955b67026464512c1b2f5 Mon Sep 17 00:00:00 2001 From: Matti Tahvonen Date: Wed, 17 Feb 2010 10:48:58 +0000 Subject: [PATCH] enhancing wrapper, now horizontal drop location -> example horizontally sortable layout svn changeset:11353/svn branch:6.3_dd --- .../VAADIN/themes/base/common/common.css | 10 +- WebContent/VAADIN/themes/base/styles.css | 14 ++- WebContent/VAADIN/themes/reindeer/styles.css | 14 ++- WebContent/VAADIN/themes/runo/styles.css | 14 ++- .../gwt/client/ui/VDragAndDropWrapper.java | 12 +- .../vaadin/terminal/gwt/client/ui/VTree.java | 16 ++- .../client/ui/dd/HorizontalDropLocation.java | 24 ++++ .../client/ui/dd/VerticalDropLocation.java | 8 +- src/com/vaadin/ui/Table.java | 4 +- src/com/vaadin/ui/Tree.java | 4 +- tests/src/com/vaadin/tests/dd/DDTest5.java | 19 +++- ...VerticalSortableCssLayoutWithWrappers.java | 104 ++++++++++++++++++ 12 files changed, 211 insertions(+), 32 deletions(-) create mode 100644 src/com/vaadin/terminal/gwt/client/ui/dd/HorizontalDropLocation.java create mode 100644 tests/src/com/vaadin/tests/dd/VerticalSortableCssLayoutWithWrappers.java diff --git a/WebContent/VAADIN/themes/base/common/common.css b/WebContent/VAADIN/themes/base/common/common.css index 29fb1363d4..336fe828a2 100644 --- 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 770f1c9d4c..948cf42f5b 100644 --- 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 e927ab81cb..1be5ef5ac9 100644 --- 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 a3ad1f1f86..843a89bcde 100644 --- 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 f6b4baa29d..5aab1fa955 100644 --- 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 22b897d9c7..9926d2921a 100644 --- 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 index 0000000000..c69329fc71 --- /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 8c1f1a7aa1..a500341625 100644 --- 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 aae0c95456..fe28c1fed9 100644 --- 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 ab8eae8419..c4a1bff12d 100644 --- 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 6150808058..52cccb6a05 100644 --- 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 index 0000000000..ac27755212 --- /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 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")); + } + + } +} -- 2.39.5