Skip to content
This repository was archived by the owner on Dec 31, 2020. It is now read-only.

Commit a5eb7b6

Browse files
alumpalump
committed
0.3.2 with performance and other fixes and workarounds
1 parent 6f8ca4d commit a5eb7b6

File tree

11 files changed

+202
-45
lines changed

11 files changed

+202
-45
lines changed

‎README.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,14 @@ Official releases of this add-on are available at Vaadin Directory. For Maven in
6060

6161
## Release notes
6262

63-
### Version 0.3.2 (TBD)
64-
- Use CamelCase methods to avoid warnings
63+
### Version 0.3.2 (2016-08-07)
64+
- Uses CamelCase methods and variables, to avoid deprecated warnings on client side
6565
- Fix initialization issue when adding GridStack to parent existing on client
66+
- Improving performance and error management in add-on's code
67+
- With complex DOM structures in children gridstack.js initializing gets slow. To fight this ready listener interface
68+
is added. It seams to be faster to add children after gridstack.js has initialized itself, than adding those before
69+
initialization. To use this trick add GrisStackReadyListener and add child components only when it's called. As extra
70+
benefit event will tell the width of component on client side. This can used to adjust the layout.
6671

6772
### Version 0.3.1 (2016-07-20)
6873
- isAreaEmpty will now return false if area goes outside the right edge of layout

‎gridstack-addon/pom.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<groupId>org.vaadin.alump.gridstack</groupId>
66
<artifactId>gridstack-addon</artifactId>
77
<packaging>bundle</packaging>
8-
<version>0.3.2-SNAPSHOT</version>
8+
<version>0.3.2</version>
99
<name>GridStack Add-on</name>
1010

1111
<properties>

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,15 @@
3939
@JavaScript({"jquery-1.11.3.min.js", "jquery-ui.min.js", "lodash.min.js", "gridstack.js"})
4040
public class GridStackLayout extends AbstractLayout implements LayoutEvents.LayoutClickNotifier {
4141

42+
public final static String INITIALIZING_STYLENAME = "gridstack-initializing";
43+
4244
protected final List<Component> components = new ArrayList<Component>();
4345

4446
private final List<GridStackMoveEvent.GridStackMoveListener> moveListeners = new ArrayList<GridStackMoveEvent.GridStackMoveListener>();
4547

48+
private final List<GridStackReadyEvent.GridStackReadyListener> readyListeners =
49+
new ArrayList<GridStackReadyEvent.GridStackReadyListener>();
50+
4651
/**
4752
* Use this as x or y coordinate if you want to leave slot selection of component to client side
4853
*/
@@ -75,13 +80,23 @@ public void onChildrenMoved(List<GridStackMoveData> moves) {
7580
}
7681
fireMoveEvents(events);
7782
}
83+
84+
@Override
85+
public void onReady(int widthPx) {
86+
removeStyleName(INITIALIZING_STYLENAME);
87+
final GridStackReadyEvent event = new GridStackReadyEvent(GridStackLayout.this, widthPx);
88+
for (GridStackReadyEvent.GridStackReadyListener listener : readyListeners) {
89+
listener.onGridStackReady(event);
90+
}
91+
}
7892
};
7993

8094
/**
8195
* Creates GridStackLayout with default 3 columns
8296
*/
8397
public GridStackLayout() {
8498
super();
99+
addStyleName(INITIALIZING_STYLENAME);
85100
registerRpc(serverRpc, GridStackServerRpc.class);
86101
}
87102

@@ -387,6 +402,22 @@ public void removeGridStackMoveListener(GridStackMoveEvent.GridStackMoveListener
387402
moveListeners.remove(listener);
388403
}
389404

405+
/**
406+
* Add listener for gridstack ready event
407+
* @param listener Listener added
408+
*/
409+
public void addGridStackReadyListener(GridStackReadyEvent.GridStackReadyListener listener) {
410+
readyListeners.add(listener);
411+
}
412+
413+
/**
414+
* Remove listener of GridStack ready event
415+
* @param listener Listener removed
416+
*/
417+
public void removeGridStackReadyListener(GridStackReadyEvent.GridStackReadyListener listener) {
418+
readyListeners.remove(listener);
419+
}
420+
390421
/**
391422
* Get coordinates (X,Y,width,height) of component
392423
* @param child Child component of layout

‎gridstack-addon/src/main/java/org/vaadin/alump/gridstack/GridStackReadyEvent.java

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
package org.vaadin.alump.gridstack;
2+
3+
/**
4+
* Event sent when GridStack implementation on client side is initialized and ready. Can use used to improve initial
5+
* start up performance.
6+
*/
7+
public class GridStackReadyEvent {
8+
9+
public interface GridStackReadyListener {
10+
void onGridStackReady(GridStackReadyEvent layout);
11+
}
12+
13+
private final GridStackLayout layout;
14+
private final int widthPx;
15+
16+
public GridStackReadyEvent(GridStackLayout layout, int widthPx) {
17+
this.layout = layout;
18+
this.widthPx = widthPx;
19+
}
20+
21+
/**
22+
* Get source of this event
23+
* @return
24+
*/
25+
public GridStackLayout getLayout() {
26+
return layout;
27+
}
28+
29+
/**
30+
* Width of component on client side when initialized
31+
* @return Width in pixels, or -1 if width could not be resolved.
32+
*/
33+
public int getWidthPx() {
34+
return widthPx;
35+
}
36+
}

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

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@
1818
package org.vaadin.alump.gridstack.client;
1919

2020
import com.google.gwt.core.client.Duration;
21+
import com.google.gwt.core.client.Scheduler;
2122
import com.google.gwt.dom.client.NativeEvent;
2223
import com.google.gwt.user.client.Element;
2324
import com.google.gwt.user.client.ui.Widget;
2425
import com.vaadin.client.ComponentConnector;
2526
import com.vaadin.client.ConnectorHierarchyChangeEvent;
26-
import com.vaadin.client.Profiler;
2727
import com.vaadin.client.Util;
2828
import com.vaadin.client.ui.AbstractLayoutConnector;
2929

@@ -50,25 +50,46 @@ public class GridStackLayoutConnector extends AbstractLayoutConnector {
5050
@Override
5151
public void init() {
5252
super.init();
53-
getWidget().setMoveHandler(new GwtGridStack.GwtGridStackMoveHandler() {
54-
@Override
55-
public void onWidgetsMoved(Map<Widget, GwtGridStackChangedItem> movedChildren) {
56-
57-
List<GridStackMoveData> dataSent = new ArrayList<GridStackMoveData>();
58-
59-
for(Widget movedChild : movedChildren.keySet()) {
60-
ComponentConnector childConnector = getChildConnectorForWidget(movedChild);
61-
if(childConnector != null) {
62-
GwtGridStackChangedItem itemData = movedChildren.get(movedChild);
63-
dataSent.add(new GridStackMoveData(childConnector,
64-
itemData.getX(), itemData.getY(), itemData.getWidth(), itemData.getHeight()));
65-
}
66-
}
53+
getWidget().addMoveListener(moveListener);
54+
getWidget().addReadyListener(readyListener);
55+
}
6756

68-
getRpcProxy(GridStackServerRpc.class).onChildrenMoved(dataSent);
57+
private GwtGridStack.GwtGridStackMoveListener moveListener = new GwtGridStack.GwtGridStackMoveListener() {
58+
59+
@Override
60+
public void onWidgetsMoved(Map<Widget, GwtGridStackChangedItem> movedChildren) {
61+
List<GridStackMoveData> dataSent = new ArrayList<GridStackMoveData>();
62+
63+
for(Widget movedChild : movedChildren.keySet()) {
64+
ComponentConnector childConnector = getChildConnectorForWidget(movedChild);
65+
if(childConnector != null) {
66+
GwtGridStackChangedItem itemData = movedChildren.get(movedChild);
67+
dataSent.add(new GridStackMoveData(childConnector,
68+
itemData.getX(), itemData.getY(), itemData.getWidth(), itemData.getHeight()));
69+
}
6970
}
70-
});
71-
}
71+
72+
getRpcProxy(GridStackServerRpc.class).onChildrenMoved(dataSent);
73+
}
74+
};
75+
76+
private GwtGridStack.GwtGridStackReadyListener readyListener = new GwtGridStack.GwtGridStackReadyListener() {
77+
78+
@Override
79+
public void onReady() {
80+
Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
81+
@Override
82+
public void execute() {
83+
if(getWidget().isAttached()) {
84+
int widthPx = getWidget().getElement().getClientWidth();
85+
getRpcProxy(GridStackServerRpc.class).onReady(widthPx);
86+
} else {
87+
getRpcProxy(GridStackServerRpc.class).onReady(-1);
88+
}
89+
}
90+
});
91+
}
92+
};
7293

7394
protected ComponentConnector getChildConnectorForWidget(Widget widget) {
7495
for(ComponentConnector connector : getChildComponents()) {
@@ -98,14 +119,16 @@ public GridStackLayoutState getState() {
98119
public void onStateChanged(StateChangeEvent event) {
99120
super.onStateChanged(event);
100121

101-
Profiler.enter("GridStack onStateChange");
122+
Duration duration = new Duration();
102123
clickEventHandler.handleEventHandlerRegistration();
103124

104125
if(event.isInitialStateChange() || event.hasPropertyChanged("gridStackOptions")) {
105126
getWidget().setOptions(getState().gridStackOptions.width, getState().gridStackOptions.height,
106127
getState().gridStackOptions);
107128
}
108129

130+
LOGGER.info("onStateChange so far " + duration.elapsedMillis() + "ms");
131+
109132
if(getWidget().isInitialized() && event.hasPropertyChanged("childOptions")) {
110133
getWidget().batchUpdate();
111134
for(Connector connector : getChildConnectorsInCoordinateOrder()) {
@@ -115,7 +138,7 @@ public void onStateChanged(StateChangeEvent event) {
115138
getWidget().commit();
116139
}
117140

118-
Profiler.leave("GridStack onStateChange");
141+
LOGGER.info("onStateChange took " + duration.elapsedMillis() + "ms");
119142
}
120143

121144
/**
@@ -175,7 +198,7 @@ public int compare(Connector a, Connector b) {
175198

176199
@Override
177200
public void onConnectorHierarchyChange(ConnectorHierarchyChangeEvent event) {
178-
Profiler.enter("GridStack onConnectorHierarchyChange");
201+
Duration duration = new Duration();
179202
getWidget().batchUpdate();
180203

181204
for (ComponentConnector child : event.getOldChildren()) {
@@ -194,7 +217,7 @@ public void onConnectorHierarchyChange(ConnectorHierarchyChangeEvent event) {
194217
}
195218

196219
getWidget().commit();
197-
Profiler.leave("GridStack onConnectorHierarchyChange");
220+
LOGGER.info("onConnectorHierarchyChange took " + duration.elapsedMillis() + "ms");
198221
}
199222

200223
@Override

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

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
*/
1818
package org.vaadin.alump.gridstack.client;
1919

20+
import com.google.gwt.core.client.Duration;
2021
import com.google.gwt.dom.client.Document;
2122
import com.google.gwt.dom.client.Element;
2223
import com.google.gwt.user.client.Event;
@@ -26,10 +27,7 @@
2627
import org.vaadin.alump.gridstack.client.shared.GridStackChildOptions;
2728
import org.vaadin.alump.gridstack.client.shared.GridStackOptions;
2829

29-
import java.util.Date;
30-
import java.util.HashMap;
31-
import java.util.Iterator;
32-
import java.util.Map;
30+
import java.util.*;
3331
import java.util.logging.Logger;
3432

3533
public class GwtGridStack extends ComplexPanel {
@@ -42,7 +40,8 @@ public class GwtGridStack extends ComplexPanel {
4240
private static int idCounter = 0;
4341
public final String elementId;
4442

45-
protected GwtGridStackMoveHandler moveHandler = null;
43+
protected List<GwtGridStackMoveListener> moveListeners = new ArrayList<GwtGridStackMoveListener>();
44+
protected List<GwtGridStackReadyListener> readyListeners = new ArrayList<GwtGridStackReadyListener>();
4645

4746
protected long lastEvent = 0;
4847
protected boolean draggedOrResized = false;
@@ -56,10 +55,14 @@ public class GwtGridStack extends ComplexPanel {
5655
private Map<Element, Widget> widgetWrappers = new HashMap<Element, Widget>();
5756
private Map<Widget, GwtGridStackChangedItem> moveQueue = new HashMap<Widget, GwtGridStackChangedItem>();
5857

59-
public interface GwtGridStackMoveHandler {
58+
public interface GwtGridStackMoveListener {
6059
void onWidgetsMoved(Map<Widget, GwtGridStackChangedItem> movedChildren);
6160
}
6261

62+
public interface GwtGridStackReadyListener {
63+
void onReady();
64+
}
65+
6366
public GwtGridStack() {
6467
setElement(Document.get().createDivElement());
6568
setStyleName("grid-stack");
@@ -97,8 +100,13 @@ public void initialize(Integer width, Integer height, GwtGridStackOptions option
97100
if(height != null) {
98101
getElement().setAttribute("data-gs-height", height.toString());
99102
}
103+
Duration duration = new Duration();
100104
initializeGridStack(options);
105+
LOGGER.info("Initialize grid stack took " + duration.elapsedMillis());
101106
initialized = true;
107+
for (GwtGridStackReadyListener readyListener : readyListeners) {
108+
readyListener.onReady();
109+
}
102110
}
103111

104112
@Override
@@ -201,7 +209,7 @@ protected void onGridStackChange(Event event, GwtGridStackChangedItem[] items) {
201209
if(child == null) {
202210
// Null children in list can be ignored?
203211
continue;
204-
} else if(moveHandler != null) {
212+
} else {
205213
moveQueue.put(child, item);
206214
}
207215
}
@@ -217,7 +225,9 @@ public void delay() {
217225

218226
@Override
219227
public void run() {
220-
moveHandler.onWidgetsMoved(moveQueue);
228+
for (GwtGridStackMoveListener moveListener : moveListeners) {
229+
moveListener.onWidgetsMoved(moveQueue);
230+
}
221231
moveQueue.clear();
222232
}
223233
}
@@ -306,8 +316,20 @@ protected native void removeWidgetWrapperFromGridStack(Element element)
306316
});
307317
}-*/;
308318

309-
public void setMoveHandler(GwtGridStackMoveHandler handler) {
310-
moveHandler = handler;
319+
public void addMoveListener(GwtGridStackMoveListener listener) {
320+
moveListeners.add(listener);
321+
}
322+
323+
public void removeMoveListener(GwtGridStackMoveListener listener) {
324+
moveListeners.remove(listener);
325+
}
326+
327+
public void addReadyListener(GwtGridStackReadyListener listener) {
328+
readyListeners.add(listener);
329+
}
330+
331+
public void removeReadyListener(GwtGridStackReadyListener listener) {
332+
readyListeners.remove(listener);
311333
}
312334

313335

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,6 @@
2727
*/
2828
public interface GridStackServerRpc extends LayoutClickRpc {
2929
void onChildrenMoved(List<GridStackMoveData> moves);
30+
31+
void onReady(int widthPx);
3032
}

‎gridstack-addon/src/main/resources/VAADIN/addons/gridstack/gridstack.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,24 @@ $gridstack_item_padding: $gridstack_horizontal_padding / 2 !default;
3434
.grid-stack {
3535
position: relative;
3636

37+
&.gridstack-initializing {
38+
&:after {
39+
display: block;
40+
position: absolute;
41+
top: 70px;
42+
left: 50%;
43+
width: 30px;
44+
height: 30px;
45+
margin-left: -15px;
46+
content: "\21bb";
47+
color: rgba(0,0,0,0.3);
48+
font-size: 28px;
49+
font-weight: 800;
50+
line-height: 30px;
51+
pointer-events: none;
52+
}
53+
}
54+
3755
.grid-stack-placeholder > .placeholder-content {
3856
border: 1px dashed lightgray;
3957
margin: 0;

‎gridstack-demo/pom.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<groupId>org.vaadin.alump.gridstack</groupId>
66
<artifactId>gridstack-demo</artifactId>
77
<packaging>war</packaging>
8-
<version>0.3.2-SNAPSHOT</version>
8+
<version>0.3.2</version>
99
<name>GridStack Add-on Demo</name>
1010

1111
<properties>

0 commit comments

Comments
 (0)