gwinnem/vue-responsive-grid-layout

resizemove edges case handling is incomplete

Closed this issue · 1 comments

Expected Behavior

Resizing from any edge or corner behaves as expected

Current Behavior

The majority of edges and corners result in the size of the item being shrunk to the minimum size

Failure Information (for bugs)

Steps to Reproduce

  1. run the test bench app
  2. resize an item from the bottom right corner- works as expected
  3. resize an item from the left, right, bottom, or top edge
  4. observe the item immediately shrink to a 1x1 square

Context

this seems to be because the cases handling different combinations of edges are incomplete. These lines in GridItem.vue do not handle all cases

if(edges.left && edges.bottom) {
    newSize.width = (Number(resizing.value?.width) - coreEvent.deltaX) / transformScale.value;
    newSize.height = (Number(resizing.value?.height) + coreEvent.deltaY) / transformScale.value;
} else if(edges.right && edges.bottom && !edges.left && !edges.top) {
    newSize.width = (Number(resizing.value?.width) + coreEvent.deltaX) / transformScale.value;
    newSize.height = (Number(resizing.value?.height) + coreEvent.deltaY) / transformScale.value;
} else if(edges.left && edges.top && !edges.bottom && !edges.right) {
    //
} else if(edges.right && edges.top && !edges.bottom && !edges.left) {
    //
} else if(edges.right && !edges.right && !edges.bottom && !edges.top) {
    newSize.width = (Number(resizing.value?.width) + coreEvent.deltaX) / transformScale.value;
}

Something like this seems to be more comprehensive:

if (edges.left) {
    newSize.width = (Number(resizing.value?.width) - coreEvent.deltaX) / transformScale.value;
} else if (edges.right) {
    newSize.width = (Number(resizing.value?.width) + coreEvent.deltaX) / transformScale.value;
} else {
    newSize.width = resizing.value.width;
}
if (edges.top) {
    newSize.height = (Number(resizing.value?.height) - coreEvent.deltaY) / transformScale.value;
} else if (edges.bottom) {
    newSize.height = (Number(resizing.value?.height) + coreEvent.deltaY) / transformScale.value;
} else {
    newSize.height = resizing.value.height;
}

Reduced possibillitites for resizing.

  1. Resize from top right removed.
  2. Resize from top left removed.
  3. Resize from left removed.
  4. Resize from top removed.
  5. Fixed resize from bottom.
  6. Fixed resize from right.
  7. Updated resize from bottom right