Getting ready for 0.2.0

Author: alump

README.md

@@ -34,15 +34,30 @@ Then in scss of your theme, add rule:
 
 After this you should have all 12 columns sized correctly to take 8.333...% of width.
 
+### Using Button (or other active component) without dragging handle
+Currently Vaadin components and gridstack.js do not behave well if both fight over same events. For this reason since
+0.2.0 default behavior has been to use separate dragging handle. You can still use handle free dragging on components
+that are not or do not contain active components.
+
+```java
+// Adding component with dragging handle (default behavior)
+gridstack.addComponent(myLayout);
+
+// Adding component without dragging handle (content acts as dragging handle)
+gridstack.addComponent(myLabel, false);
+```
+
 ## Download release
 
 Official releases of this add-on are available at Vaadin Directory. For Maven instructions, download and reviews, go to http://vaadin.com/addon/gridstack
 
 ## Release notes
 
-### Version 0.1.1 (2015-xx-xx)
+### Version 0.2.0 (2015-11-30)
 - Fixing issue #3 "Removing and subsequently adding Components"
 - Clearning unneeded error debug prints on client side
+- Way Vaadin components handle events cause issues with gridstack's drag handling. For this reason separate drag handle element is now used by default. Issue #2 
+- Adding top level static option to toggle layout's edit mode. Currently still allows to drag children that allow dragging without handle (KNOWN ISSUE).
 
 ### Version 0.1.0 (2015-11-09)
 - Initial release. Not all features supported yet, but should allow basic usage

gridstack-addon/pom.xml

@@ -5,7 +5,7 @@
 	<groupId>org.vaadin.alump.gridstack</groupId>
 	<artifactId>gridstack-addon</artifactId>
 	<packaging>bundle</packaging>
-	<version>0.1.1-SNAPSHOT</version>
+	<version>0.2.0</version>
 	<name>GridStack Add-on</name>
 
 	<properties>

gridstack-addon/src/main/java/org/vaadin/alump/gridstack/GridStackLayout.java

@@ -130,6 +130,17 @@ public void addComponent(Component component) {
         addComponent(component, -1, -1);
     }
 
+    /**
+     * Add component to layout
+     * @param component Component added
+     * @param useDragHandle true to add component with a separate drag handle, or false to make whole content act as a
+     *                      drag handle. Notice that using a separate drag handle is recommended if you component
+     *                      is or contains any active components (buttons etc..)
+     */
+    public void addComponent(Component component, boolean useDragHandle) {
+        addComponent(component, -1, -1, useDragHandle);
+    }
+
     /**
      * Add component to given slot
      * @param component Component added
@@ -140,6 +151,19 @@ public void addComponent(Component component, int x, int y) {
         addComponent(component, x, y, 1, 1);
     }
 
+    /**
+     * Add component to given slot
+     * @param component Component added
+     * @param x Slot's X coordinate
+     * @param y Slot's Y coordinate
+     * @param useDragHandle true to add component with a separate drag handle, or false to make whole content act as a
+     *                      drag handle. Notice that using a separate drag handle is recommended if you component
+     *                      is or contains any active components (buttons etc..)
+     */
+    public void addComponent(Component component, int x, int y, boolean useDragHandle) {
+        addComponent(component, x, y, 1, 1, useDragHandle);
+    }
+
     /**
      * Add component to given slot, and define it's size
      * @param component Component added
@@ -149,6 +173,21 @@ public void addComponent(Component component, int x, int y) {
      * @param height Height of space reserved (in slots)
      */
     public void addComponent(Component component, int x, int y, int width, int height) {
+        addComponent(component, x, y, width, height, true);
+    }
+
+    /**
+     * Add component to given slot, and define it's size
+     * @param component Component added
+     * @param x Slot's X coordinate (use negative values if position can be defined on client side)
+     * @param y Slot's Y coordinate (use negative values if position can be defined on client side)
+     * @param width Width of space reserved (in slots)
+     * @param height Height of space reserved (in slots)
+     * @param useDragHandle true to add component with a separate drag handle, or false to make whole content act as a
+     *                      drag handle. Notice that using a separate drag handle is recommended if you component
+     *                      is or contains any active components (buttons etc..)
+     */
+    public void addComponent(Component component, int x, int y, int width, int height, boolean useDragHandle) {
         super.addComponent(component);
         components.add(component);
 
@@ -157,6 +196,7 @@ public void addComponent(Component component, int x, int y, int width, int heigh
         info.y = y;
         info.width = width;
         info.height = height;
+        info.useDragHandle = useDragHandle;
         getState().childOptions.put(component, info);
     }
 
@@ -362,4 +402,31 @@ protected GridStackChildOptions getComponentOptions(Component child, boolean mod
         }
         return opt;
     }
+
+    /**
+     * Set layout static (no dragging of resizing) or dynamic (dragging and resizing allowed)
+     * @param staticGrid true to set static (no dragging of resizing), false to set dynamic (dragging and resizing
+     *                   allowed)
+     */
+    public void setStaticGrid(boolean staticGrid) {
+        getState(true).gridStackOptions.staticGrid = staticGrid;
+    }
+
+    /**
+     * Check if layout is in static mode
+     * @return true if in static mode, false if not, null if not defined by server side
+     */
+    public Boolean isStaticGrid() {
+        return getState(false).gridStackOptions.staticGrid;
+    }
+
+
+    /**
+     * Check if component has specific dragging handle
+     * @param child Child component of layout
+     * @return true if component has separate dragging handle, false if whole content acts as dragging handle
+     */
+    public boolean isComponentWithDragHandle(Component child) {
+        return getComponentOptions(child, false).useDragHandle;
+    }
 }

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

@@ -90,9 +90,9 @@ public void onStateChanged(StateChangeEvent event) {
 		super.onStateChanged(event);
         clickEventHandler.handleEventHandlerRegistration();
 
-        if(event.isInitialStateChange() || event.hasPropertyChanged("gridStackProperties")) {
+        if(event.isInitialStateChange() || event.hasPropertyChanged("gridStackOptions")) {
             getWidget().setOptions(getState().gridStackOptions.width, getState().gridStackOptions.height,
-                    GwtGridStackOptions.createFrom(getState().gridStackOptions));
+                    getState().gridStackOptions);
         }
 
         if(getWidget().isInitialized() && event.hasPropertyChanged("childOptions")) {

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

@@ -19,11 +19,11 @@
 
 import com.google.gwt.dom.client.Document;
 import com.google.gwt.dom.client.Element;
-import com.google.gwt.dom.client.Style.Display;
 import com.google.gwt.user.client.Event;
 import com.google.gwt.user.client.ui.ComplexPanel;
 import com.google.gwt.user.client.ui.Widget;
 import org.vaadin.alump.gridstack.client.shared.GridStackChildOptions;
+import org.vaadin.alump.gridstack.client.shared.GridStackOptions;
 
 import java.util.ArrayList;
 import java.util.Date;
@@ -47,6 +47,9 @@ public class GwtGridStack extends ComplexPanel {
 
     public final static long DISABLE_CLICK_AFTER_EVENT_MS = 100L;
 
+    public final static String CONTENT_CLASSNAME = "grid-stack-item-content";
+    public final static String DRAG_HANDLE_CLASSNAME = GridStackOptions.DRAG_HANDLE_CLASSNAME;
+
     public interface GwtGridStackMoveHandler {
         void onWidgetsMoved(Widget[] widgets, GwtGridStackChangedItem[] data);
     }
@@ -63,21 +66,32 @@ public boolean isInitialized() {
         return initialized;
     }
 
-    public void setOptions(Integer width, Integer height, GwtGridStackOptions options) {
+    public void setOptions(Integer width, Integer height, GridStackOptions options) {
         if(!initialized) {
-            if(width != null) {
-                getElement().setAttribute("data-gs-width", width.toString());
-            }
-            if(height != null) {
-                getElement().setAttribute("data-gs-height", height.toString());
-            }
-            initializeGridStack(options);
-            initialized = true;
+            initialize(width, height, GwtGridStackOptions.createFrom(options));
         } else {
-            //TODO
+            if(options.staticGrid != null) {
+                nativeSetGridStatic(options.staticGrid.booleanValue());
+            }
         }
     }
 
+    public void initialize(Integer width, Integer height, GwtGridStackOptions options) {
+        if(initialized) {
+            LOGGER.severe("gridstack already initialized");
+            return;
+        }
+
+        if(width != null) {
+            getElement().setAttribute("data-gs-width", width.toString());
+        }
+        if(height != null) {
+            getElement().setAttribute("data-gs-height", height.toString());
+        }
+        initializeGridStack(options);
+        initialized = true;
+    }
+
     @Override
     public void add(Widget widget) {
         add(widget, new GridStackChildOptions());
@@ -106,6 +120,7 @@ public boolean remove(Widget widget) {
     protected Element createWrapper(GridStackChildOptions info) {
         Element wrapper = Document.get().createDivElement();
         wrapper.addClassName("grid-stack-item");
+
         if(info.x >= 0 && info.y >= 0) {
             wrapper.setAttribute("data-gs-x", Integer.toString(info.x));
             wrapper.setAttribute("data-gs-y", Integer.toString(info.y));
@@ -133,13 +148,20 @@ protected Element createWrapper(GridStackChildOptions info) {
         }
 
         Element content = Document.get().createDivElement();
-        content.addClassName("grid-stack-item-content");
+        content.addClassName(CONTENT_CLASSNAME);
+
+        if(!info.useDragHandle) {
+            content.addClassName(DRAG_HANDLE_CLASSNAME);
+        }
+
         wrapper.appendChild(content);
 
-        Element dragHandle = Document.get().createDivElement();
-        dragHandle.addClassName("grid-stack-item-drag-handle");
-        dragHandle.getStyle().setDisplay(Display.NONE);
-        wrapper.appendChild(dragHandle);
+        if(info.useDragHandle) {
+            Element dragHandle = Document.get().createDivElement();
+            dragHandle.addClassName("separate-handle");
+            dragHandle.addClassName(DRAG_HANDLE_CLASSNAME);
+            wrapper.appendChild(dragHandle);
+        }
 
         return wrapper;
     }
@@ -261,6 +283,14 @@ public void updateChild(Widget widget, GridStackChildOptions options) {
         updateWidgetWrapper(wrapper, options.x, options.y, options.width, options.height);
         updateWidgetSizeLimits(wrapper, GwtGridSizeLimits.create(options));
         setLocked(wrapper, options.locked);
+
+        /* Make sure draghandle style name is at right place
+        Element contentElement = wrapper.getFirstChildElement();
+        if(options.useDragHandle) {
+            contentElement.removeClassName(DRAG_HANDLE_CLASSNAME);
+        } else {
+            contentElement.addClassName(DRAG_HANDLE_CLASSNAME);
+        }*/
     }
 
     protected native final void updateWidgetWrapper(Element element, int x, int y, int width, int height)
@@ -327,4 +357,13 @@ protected native final void nativeBatchUpdate()
     public boolean isClickOk() {
         return !draggedOrResized && new Date().getTime() > (lastEvent + DISABLE_CLICK_AFTER_EVENT_MS);
     }
+
+    protected native final void nativeSetGridStatic(boolean gridStatic)
+    /*-{
+        var elementId = this.@org.vaadin.alump.gridstack.client.GwtGridStack::elementId;
+        $wnd.$(function () {
+            var grid = $wnd.$('#' + elementId).data('gridstack');
+            grid.set_static(gridStatic);
+        });
+    }-*/;
 }

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

@@ -60,6 +60,9 @@ public final static GwtGridStackOptions createFrom(GridStackOptions options) {
         if(options.width != null) {
             obj.setWidth(options.width);
         }
+        if(options.handleClass != null) {
+            obj.setHandleClass(options.handleClass);
+        }
         return obj;
     }
 
@@ -143,4 +146,14 @@ public final native void setWidth(int width)
         this.width = width;
     }-*/;
 
+    public final native String getHandleClass()
+    /*-{
+        return this.handle_class;
+    }-*/;
+
+    public final native void setHandleClass(String handleClass)
+    /*-{
+        this.handle_class = handleClass;
+    }-*/;
+
 }

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

@@ -34,6 +34,6 @@ public class GridStackChildOptions implements Serializable {
     public Integer maxHeight = null;
     public boolean locked = false;
 
-    public boolean showDragHandle = false;
+    public boolean useDragHandle = false;
     public String styleName = null;
 }

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

@@ -25,13 +25,14 @@
  * Use null to keep default value of gridstack.js
  */
 public class GridStackOptions implements Serializable {
+
+    public final static String DRAG_HANDLE_CLASSNAME = "grid-stack-item-drag-handle";
+
     public Boolean alwaysShowResizeHandle = null;
     public Boolean animate = null;
     public Boolean auto = null;
     public Integer cellHeight = null;
-    //TODO draggable
-    //public String handle = null;
-    //public String handleClass = null;
+    public String handleClass = DRAG_HANDLE_CLASSNAME;
     public Integer height = null;
     public Boolean floating = null;
     //public String itemClass = null;