Seting up 0.3.1, fixing issue #18

Author: alump

.gitignore

@@ -5,3 +5,4 @@ target/
 gridstack-demo/src/main/webapp/VAADIN/widgetsets/
 gridstack-demo/src/main/webapp/VAADIN/themes/demo/addons.scss
 *.scss.cache
+.DS_Store

README.md

@@ -60,8 +60,9 @@ Official releases of this add-on are available at Vaadin Directory. For Maven in
 
 ## Release notes
 
-### Version 0.3.1 (TBD)
+### Version 0.3.1 (2016-07-20)
 - isAreaEmpty will now return false if area goes outside the right edge of layout
+- Client side now calls gridstack.js for it's children based on order of coordinates. Issue #18
 
 ### Version 0.3.0 (2016-05-18)
 - Possibility to move and resize already added children

gridstack-addon/pom.xml

@@ -5,12 +5,12 @@
 	<groupId>org.vaadin.alump.gridstack</groupId>
 	<artifactId>gridstack-addon</artifactId>
 	<packaging>bundle</packaging>
-	<version>0.3.1-SNAPSHOT</version>
+	<version>0.3.1</version>
 	<name>GridStack Add-on</name>
 
 	<properties>
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
-		<vaadin.version>7.6.6</vaadin.version>
+		<vaadin.version>7.6.8</vaadin.version>
 		<vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version>
 
 		<!-- ZIP Manifest fields -->

gridstack-addon/src/main/java/org/vaadin/alump/gridstack/client/GridStackLayoutConnector.java

@@ -102,16 +102,19 @@ public void onStateChanged(StateChangeEvent event) {
 
         if(getWidget().isInitialized() && event.hasPropertyChanged("childOptions")) {
             getWidget().batchUpdate();
-            //for(Connector connector : getChildConnectorsInCoordinateOrder()) {
-            for(Connector connector : getState().childOptions.keySet()) {
+            for(Connector connector : getChildConnectorsInCoordinateOrder()) {
                 Widget widget = ((ComponentConnector)connector).getWidget();
                 getWidget().updateChild(widget, getState().childOptions.get(connector));
             }
             getWidget().commit();
         }
 	}
 
-    /* Uncomment this if connectors have to updated in coordinate order
+    /**
+     * Short child connectors to order based on their coordinates. This helps to get wanted order defined by server
+     * side.
+     * @return Children in order of coordinates
+     */
     private List<Connector> getChildConnectorsInCoordinateOrder() {
         List<Connector> list = new ArrayList<Connector>();
         for(Connector connector : getState().childOptions.keySet()) {
@@ -123,6 +126,9 @@ private List<Connector> getChildConnectorsInCoordinateOrder() {
         return list;
     }
 
+    /**
+     * Compare child connectors by their coordinates
+     */
     private transient final Comparator<Connector> childConnectorComparator = new Comparator<Connector>() {
         @Override
         public int compare(Connector a, Connector b) {
@@ -158,7 +164,6 @@ public int compare(Connector a, Connector b) {
             return comp;
         }
     };
-    */
 
     @Override
     public void onConnectorHierarchyChange(ConnectorHierarchyChangeEvent event) {

gridstack-demo/pom.xml

@@ -5,12 +5,12 @@
 	<groupId>org.vaadin.alump.gridstack</groupId>
 	<artifactId>gridstack-demo</artifactId>
 	<packaging>war</packaging>
-	<version>0.3.1-SNAPSHOT</version>
+	<version>0.3.1</version>
 	<name>GridStack Add-on Demo</name>
 
 	<properties>
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
-		<vaadin.version>7.6.6</vaadin.version>
+		<vaadin.version>7.6.8</vaadin.version>
 		<vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version>
 	</properties>
 
@@ -99,6 +99,11 @@
 			<groupId>com.vaadin</groupId>
 			<artifactId>vaadin-themes</artifactId>
 		</dependency>
+		<dependency>
+			<groupId>org.vaadin.icons</groupId>
+			<artifactId>vaadin-icons</artifactId>
+			<version>1.0.1</version>
+		</dependency>
 		<dependency>
 			<groupId>javax.servlet</groupId>
 			<artifactId>javax.servlet-api</artifactId>

gridstack-demo/src/main/java/org/vaadin/alump/gridstack/demo/SplitView.java

@@ -1,5 +1,6 @@
 package org.vaadin.alump.gridstack.demo;
 
+import com.vaadin.navigator.Navigator;
 import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener;
 import com.vaadin.ui.*;
@@ -18,8 +19,18 @@
 public class SplitView extends HorizontalSplitPanel implements View {
 
     public final static String VIEW_NAME = "split";
+
+    private Navigator navigator;
     private Random rand = new Random(0xDEADBEEF);
 
+    private final static int ORDER_A[] = {28, 17, 4, 22, 2, 15, 20, 29, 24, 9, 12, 14, 10, 11, 13, 5, 16, 1, 18,
+            19, 6, 21, 3, 23, 8, 25, 26, 27, 0, 7};
+
+    private final static String ORDER_A_TEXT[] = {"XXVIII", "XVII", "IV", "XXII", "II", "XV", "XX", "XXIX", "XXIV",
+            "IX", "XII", "XIV", "X", "XI", "XIII", "V", "XVI", "I", "XVIII", "XIX", "VI", "XXI", "III", "XXIII", "VIII",
+            "XXV", "XXVI", "XXVII", "nulla", "VII"};
+
+
     private GridStackLayout gridStack;
 
     public SplitView() {
@@ -41,18 +52,44 @@ private Component createLeftSide() {
             //moveRandomChildToAnotherFreePosition();
             GridStackDemoUtil.reorderAll(gridStack, rand, 1, 30);
         });
+        shuffleButton.setWidth(100, Unit.PERCENTAGE);
         shuffleButton.addStyleName(ValoTheme.BUTTON_SMALL);
         layout.addComponent(shuffleButton);
 
+        Button orderAButton = new Button("Roman", e -> {
+            AtomicInteger atIndex = new AtomicInteger(0);
+            gridStack.iterator().forEachRemaining(iter -> {
+                gridStack.moveAndResizeComponent(iter, 0, ORDER_A[atIndex.getAndIncrement()], 1, 1);
+            });
+        });
+        orderAButton.setDescription("Order by roman numbers");
+        orderAButton.setWidth(100, Unit.PERCENTAGE);
+        orderAButton.addStyleName(ValoTheme.BUTTON_SMALL);
+        layout.addComponent(orderAButton);
+
         Button resetButton = new Button("Reset", e -> {
             AtomicInteger x = new AtomicInteger(0);
             gridStack.iterator().forEachRemaining(child -> {
                 gridStack.moveComponent(child, 0, x.getAndAdd(gridStack.getCoordinates(child).getHeight()));
             });
         });
+        resetButton.setWidth(100, Unit.PERCENTAGE);
         resetButton.addStyleName(ValoTheme.BUTTON_SMALL);
         layout.addComponent(resetButton);
 
+        Label expandLabel = new Label("");
+        expandLabel.setSizeFull();
+        layout.addComponent(expandLabel);
+        layout.setExpandRatio(expandLabel, 1f);
+
+        Button toTestButton = new Button("Demo", e -> {
+            navigator.navigateTo(TestView.VIEW_NAME);
+        });
+        toTestButton.setDescription("To main demo view");
+        toTestButton.setWidth(100, Unit.PERCENTAGE);
+        toTestButton.addStyleName(ValoTheme.BUTTON_SMALL);
+        layout.addComponent(toTestButton);
+
         return layout;
     }
 
@@ -61,15 +98,15 @@ private Component createRightSide() {
         gridStack.setSizeFull();
 
         for(int i = 0; i < 30; ++i) {
-            Label itemLabel = new Label("Item #" + i);
+            Label itemLabel = new Label("Item #" + i + " " + ORDER_A_TEXT[i]);
             gridStack.addComponent(itemLabel, 0, i);
         }
         return gridStack;
     }
 
     @Override
     public void enter(ViewChangeListener.ViewChangeEvent event) {
-
+        navigator = event.getNavigator();
     }
 
     private void moveRandomChildToAnotherFreePosition() {

gridstack-demo/src/main/java/org/vaadin/alump/gridstack/demo/TestView.java

@@ -1,17 +1,18 @@
 package org.vaadin.alump.gridstack.demo;
 
 import com.vaadin.event.LayoutEvents;
+import com.vaadin.navigator.Navigator;
 import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener;
 import com.vaadin.server.ExternalResource;
-import com.vaadin.server.FontAwesome;
 import com.vaadin.server.Resource;
 import com.vaadin.server.ThemeResource;
 import com.vaadin.ui.*;
 import com.vaadin.ui.themes.ValoTheme;
 import org.vaadin.alump.gridstack.GridStackButton;
 import org.vaadin.alump.gridstack.GridStackCoordinates;
 import org.vaadin.alump.gridstack.GridStackLayout;
+import org.vaadin.teemu.VaadinIcons;
 
 import java.util.*;
 import java.util.concurrent.atomic.AtomicInteger;
@@ -23,6 +24,7 @@ public class TestView extends VerticalLayout implements View {
 
     public final static String VIEW_NAME = "";
 
+    private Navigator navigator;
     private GridStackLayout gridStack;
 
     private AtomicInteger eventCounter = new AtomicInteger(0);
@@ -96,7 +98,7 @@ public TestView() {
 
     @Override
     public void enter(ViewChangeListener.ViewChangeEvent event) {
-
+        navigator = event.getNavigator();
     }
 
     private Component createToolbar() {
@@ -105,7 +107,7 @@ private Component createToolbar() {
 
         toolbar.addComponent(new Label("GridStack Demo"));
 
-        toolbar.addComponent(createButton(FontAwesome.PLUS, "Add component", e -> {
+        toolbar.addComponent(createButton(VaadinIcons.PLUS, "Add component", e -> {
             int index = gridStack.getComponentCount();
             final CssLayout layout = new CssLayout();
             layout.addStyleName("hep-layout");
@@ -119,7 +121,7 @@ private Component createToolbar() {
             gridStack.addComponent(layout, CLIENT_SELECTS, CLIENT_SELECTS, 1 + rand.nextInt(3), 1);
         }));
 
-        toolbar.addComponent(createButton(FontAwesome.MINUS, "Remove component", e -> {
+        toolbar.addComponent(createButton(VaadinIcons.TRASH, "Remove component", e -> {
             int index = rand.nextInt(gridStack.getComponentCount());
             Iterator<Component> iter = gridStack.iterator();
             for(int i = 0; i < index; ++i) {
@@ -139,10 +141,10 @@ private Component createToolbar() {
         });
         toolbar.addComponent(layoutClicks);
 
-        toolbar.addComponent(createButton(FontAwesome.ARROWS, "Move random child to new location",
+        toolbar.addComponent(createButton(VaadinIcons.ARROWS, "Move random child to new location",
                 e -> moveRandomChildToAnotherFreePosition()));
 
-        toolbar.addComponent(createButton(FontAwesome.RANDOM, "Reorder all items to new order", e -> reorderAll()));
+        toolbar.addComponent(createButton(VaadinIcons.RANDOM, "Reorder all items to new order", e -> reorderAll()));
 
         CheckBox staticGrid = new CheckBox("Static");
         staticGrid.setDescription("If static, dragging and resizing are not allowed by user");
@@ -158,6 +160,9 @@ private Component createToolbar() {
         });
         toolbar.addComponent(lockItem);
 
+        toolbar.addComponent(createButton(VaadinIcons.LIST, "Navigate to list demo",
+                e -> navigator.navigateTo(SplitView.VIEW_NAME)));
+
         return toolbar;
     }