GWT FlexTable - перетащить выделение как?

Question

Я пытаюсь найти правильный метод для нескольких дней, чтобы выбрать несколько ячеек в столбце гибкой таблицы.

До сих пор мне удавалось делать это только с помощью щелчков, что хорошо работает, но выбор перетаскивания был бы намного лучше. Я читал документы и искал, но все, что я нашел, было основано на устаревшем коде. Я использую GWT 2.0.

Я знаю, что мне нужен какой-нибудь обработчик событий, который запускался бы при возникновении жеста мыши при выделении, и этот обработчик должен знать индекс ячейки, с которой начинается выделение, и, конечно, индекс ячейки, где заканчивается выделение.

Любой совет || код будет высоко ценится.

Answer 1

Это нужно улучшить, но оно должно дать вам основную идею. Сначала вам нужно создать CustomTable, который слушает MouseEvents. Вы можете сделать это, расширив составной элемент, чтобы обернуть фокусную панель и гибкую таблицу как таковую:

public class CustomTable extends Composite implements MouseDownHandler, MouseMoveHandler, MouseUpHandler{

List<CellWidget> widgets = new ArrayList<CellWidget>();
FlexTable table = new FlexTable();
FocusPanel focusPanel = new FocusPanel();
boolean selecting= false;
Point selectStart,selectEnd;    

public CustomTable(){
    focusPanel.setWidget(table);
    focusPanel.addMouseDownHandler(this);
    focusPanel.addMouseMoveHandler(this);
    focusPanel.addMouseUpHandler(this);

    initWidget(focusPanel);
}

public void setWidget(int row, int column, CellWidget widget){
    widgets.add(widget);
    table.setWidget(row, column, widget);
}

@Override
public void onMouseUp(MouseUpEvent event) {
    event.preventDefault();
    if (selecting){
        selecting=false;
        DOM.releaseCapture(this.getElement());
        selectEnd = new Point(event.getClientX(),event.getClientY());

        for (CellWidget widget : widgets){
            if (widget.isIn(selectStart,selectEnd))
                widget.say();               
        }
        selectStart = selectEnd = null;         
    }       
}

@Override
public void onMouseMove(MouseMoveEvent event) {
    event.preventDefault();
    if (selecting){
        //do some fancy layout
    }       
}

@Override
public void onMouseDown(MouseDownEvent event) {
    event.preventDefault();
    selecting = true;
    DOM.setCapture(this.getElement());  
    selectStart = new Point(event.getClientX(),event.getClientY());
}   
}

Затем вы определяете виджет CellWidget, который в основном включает в себя то, что вы хотели бы добавить в свои ячейки. При добавлении в DOM CellWidget вычисляет и сохраняет свою позицию позже, чтобы определить, находится ли она в выбранной области:

public class CellWidget extends Composite{

Widget content;
Point topLeft,topRight,bottomLeft,bottomRight;

public CellWidget(Widget w){
    this.content = w;
    initWidget(w);
}

@Override
protected void onLoad() {
    topLeft = new Point(getAbsoluteLeft(),getAbsoluteTop());
    topRight = new Point(getAbsoluteLeft()+getOffsetWidth(),getAbsoluteTop());
    bottomLeft = new Point(getAbsoluteLeft(),getAbsoluteTop()+getOffsetHeight());
    bottomRight = new Point(getAbsoluteLeft()+getOffsetWidth(),getAbsoluteTop()+getOffsetHeight());
}

public void say(){
    Window.alert(content + " is selected!");
}

public boolean isIn(Point start, Point end){
    if (topLeft.isBetween(start, end) || topRight.isBetween(start, end)
            || bottomLeft.isBetween(start, end) || bottomRight.isBetween(start, end))
        return true;
    else
        return false;           
}
}

Простая реализация, чтобы упростить задачу:

public class Point {

int x,y;

public Point(int x,int y){
    this.x=x;
    this.y=y;
}   
public int getX() {
    return x;
}
public int getY() {
    return y;
}
@Override
public String toString() {
    return x+","+y;
}
public boolean isBetween(Point p1,Point p2){
    if (p1.getX() < x && p2.getX() > x && p1.getY() < y && p2.getY() > y)
        return true;
    return false;
}
}

Наконец, в вашем модуле EntryPoint вы оборачиваете вещи:

public void onModuleLoad() {
    RootPanel rootPanel = RootPanel.get();
    CustomTable table = new CustomTable();
    table.setWidget(0, 0, new CellWidget(new Label("hello 0,0")));
    table.setWidget(0, 1, new CellWidget(new Label("hello 0,1")));
    table.setWidget(1, 0, new CellWidget(new Label("hello 1,0")));
    table.setWidget(1, 1, new CellWidget(new Label("hello 1,1")));
    rootPanel.add(table);
}

Я знаю, что фактическая логика для определения того, попадают ли виджеты в выбранную область, неполна и нуждается в улучшении, но я думаю, что это решение достаточно ясно, чтобы дать основную идею. Приветствия