added gridstack
This commit is contained in:
Pit Friedrich
@@ -0,0 +1,210 @@
|
||||
package com.example.components;
|
||||
|
||||
import com.vaadin.flow.component.AttachEvent;
|
||||
import com.vaadin.flow.component.ClientCallable;
|
||||
import com.vaadin.flow.component.Component;
|
||||
import com.vaadin.flow.component.ComponentEvent;
|
||||
import com.vaadin.flow.component.ComponentEventListener;
|
||||
import com.vaadin.flow.component.HasSize;
|
||||
import com.vaadin.flow.component.HasStyle;
|
||||
import com.vaadin.flow.component.dependency.CssImport;
|
||||
import com.vaadin.flow.component.dependency.JsModule;
|
||||
import com.vaadin.flow.component.dependency.NpmPackage;
|
||||
import com.vaadin.flow.component.Tag;
|
||||
import com.vaadin.flow.shared.Registration;
|
||||
import tools.jackson.databind.JsonNode;
|
||||
import tools.jackson.databind.json.JsonMapper;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.LinkedHashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
/**
|
||||
* Vaadin wrapper around <a href="https://gridstack.js.org">gridstack.js</a> —
|
||||
* a draggable, resizable grid container. Children must be {@link GridStackItem}
|
||||
* instances (or a plain {@link Component}, which gets auto-wrapped); gridstack
|
||||
* manipulates the real DOM nodes directly, so this component keeps its children
|
||||
* in light DOM (see {@code grid-stack.ts}) rather than routing them through a
|
||||
* Lit render root the way {@link ApexChart} does.
|
||||
* <p>
|
||||
* Layout changes made by drag/resize are, by default, only persisted in the
|
||||
* browser's {@code localStorage} (see {@link #setStorageKey(String)}); the
|
||||
* server is notified via {@link #addLayoutChangeListener}, and item positions
|
||||
* are kept in sync in {@link #onLayoutChange(String)} so {@link #getLayout()}
|
||||
* stays truthful across a reload of this component (though not across a page
|
||||
* reload, since server-side item state is not itself persisted).
|
||||
*/
|
||||
@Tag("grid-stack-layout")
|
||||
@NpmPackage(value = "gridstack", version = "13.1.0")
|
||||
@JsModule("./components/grid-stack.ts")
|
||||
@CssImport("gridstack/dist/gridstack.min.css")
|
||||
public class GridStackLayout extends Component implements HasSize, HasStyle {
|
||||
|
||||
private static final JsonMapper MAPPER = JsonMapper.builder().build();
|
||||
|
||||
private final Map<String, Object> options = new LinkedHashMap<>();
|
||||
private String storageKey;
|
||||
|
||||
public GridStackLayout() {
|
||||
options.put("column", 12);
|
||||
options.put("cellHeight", "120px");
|
||||
options.put("margin", "8px");
|
||||
options.put("minRow", 1);
|
||||
options.put("float", true);
|
||||
options.put("animate", true);
|
||||
}
|
||||
|
||||
public GridStackLayout setColumn(int column) {
|
||||
options.put("column", column);
|
||||
return this;
|
||||
}
|
||||
|
||||
public GridStackLayout setCellHeight(String cellHeight) {
|
||||
options.put("cellHeight", cellHeight);
|
||||
return this;
|
||||
}
|
||||
|
||||
public GridStackLayout setMargin(String margin) {
|
||||
options.put("margin", margin);
|
||||
return this;
|
||||
}
|
||||
|
||||
public GridStackLayout setMinRow(int minRow) {
|
||||
options.put("minRow", minRow);
|
||||
return this;
|
||||
}
|
||||
|
||||
public GridStackLayout setFloat(boolean floatItems) {
|
||||
options.put("float", floatItems);
|
||||
return this;
|
||||
}
|
||||
|
||||
public GridStackLayout setAnimate(boolean animate) {
|
||||
options.put("animate", animate);
|
||||
return this;
|
||||
}
|
||||
|
||||
public GridStackLayout setStaticGrid(boolean staticGrid) {
|
||||
options.put("staticGrid", staticGrid);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables browser-localStorage persistence of the layout under the given
|
||||
* key (shared across sessions/tabs on the same origin — pick something
|
||||
* unique per grid instance/view). Pass {@code null} to disable.
|
||||
*/
|
||||
public GridStackLayout setStorageKey(String storageKey) {
|
||||
this.storageKey = storageKey;
|
||||
return this;
|
||||
}
|
||||
|
||||
public void add(GridStackItem... items) {
|
||||
for (GridStackItem item : items) {
|
||||
getElement().appendChild(item.getElement());
|
||||
}
|
||||
}
|
||||
|
||||
/** Convenience overload: wraps a plain component in a default-sized {@link GridStackItem}. */
|
||||
public GridStackItem add(Component content) {
|
||||
GridStackItem item = new GridStackItem(content);
|
||||
add(item);
|
||||
return item;
|
||||
}
|
||||
|
||||
public void remove(GridStackItem... items) {
|
||||
for (GridStackItem item : items) {
|
||||
getElement().removeChild(item.getElement());
|
||||
}
|
||||
}
|
||||
|
||||
public void removeAll() {
|
||||
getElement().removeAllChildren();
|
||||
}
|
||||
|
||||
/** Restores every item to the position/size currently declared server-side
|
||||
* (its {@code gs-*} attributes) and clears any saved localStorage layout. */
|
||||
public void resetLayout() {
|
||||
getElement().callJsFunction("clearStorage");
|
||||
}
|
||||
|
||||
public List<GridStackItem.Position> getLayout() {
|
||||
List<GridStackItem.Position> positions = new ArrayList<>();
|
||||
getElement().getChildren().forEach(child -> {
|
||||
if (!(child.getComponent().orElse(null) instanceof GridStackItem item)) {
|
||||
return;
|
||||
}
|
||||
positions.add(new GridStackItem.Position(
|
||||
item.getItemId(),
|
||||
intAttr(item, "gs-x"),
|
||||
intAttr(item, "gs-y"),
|
||||
intAttr(item, "gs-w"),
|
||||
intAttr(item, "gs-h")));
|
||||
});
|
||||
return positions;
|
||||
}
|
||||
|
||||
@Override
|
||||
protected void onAttach(AttachEvent attachEvent) {
|
||||
super.onAttach(attachEvent);
|
||||
getElement().callJsFunction("initGrid", MAPPER.writeValueAsString(options), storageKey);
|
||||
}
|
||||
|
||||
@ClientCallable
|
||||
private void onLayoutChange(String nodesJson) {
|
||||
JsonNode nodes = MAPPER.readTree(nodesJson);
|
||||
List<GridStackItem.Position> positions = new ArrayList<>();
|
||||
|
||||
for (JsonNode node : nodes) {
|
||||
String id = node.path("id").asString(null);
|
||||
if (id == null) continue;
|
||||
|
||||
findItem(id).ifPresent(item -> item.setPosition(
|
||||
node.path("x").asInt(),
|
||||
node.path("y").asInt(),
|
||||
node.path("w").asInt(),
|
||||
node.path("h").asInt()));
|
||||
|
||||
positions.add(new GridStackItem.Position(
|
||||
id,
|
||||
node.path("x").asInt(),
|
||||
node.path("y").asInt(),
|
||||
node.path("w").asInt(),
|
||||
node.path("h").asInt()));
|
||||
}
|
||||
|
||||
fireEvent(new LayoutChangeEvent(this, true, positions));
|
||||
}
|
||||
|
||||
private java.util.Optional<GridStackItem> findItem(String id) {
|
||||
return getElement().getChildren()
|
||||
.map(child -> child.getComponent().orElse(null))
|
||||
.filter(GridStackItem.class::isInstance)
|
||||
.map(GridStackItem.class::cast)
|
||||
.filter(item -> id.equals(item.getItemId()))
|
||||
.findFirst();
|
||||
}
|
||||
|
||||
private int intAttr(Component component, String name) {
|
||||
String value = component.getElement().getAttribute(name);
|
||||
return value == null ? 0 : Integer.parseInt(value);
|
||||
}
|
||||
|
||||
public Registration addLayoutChangeListener(ComponentEventListener<LayoutChangeEvent> listener) {
|
||||
return addListener(LayoutChangeEvent.class, listener);
|
||||
}
|
||||
|
||||
public static class LayoutChangeEvent extends ComponentEvent<GridStackLayout> {
|
||||
private final List<GridStackItem.Position> positions;
|
||||
|
||||
LayoutChangeEvent(GridStackLayout source, boolean fromClient, List<GridStackItem.Position> positions) {
|
||||
super(source, fromClient);
|
||||
this.positions = positions;
|
||||
}
|
||||
|
||||
public List<GridStackItem.Position> getPositions() {
|
||||
return positions;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user