Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix responsive and drag part #8

Merged
merged 1 commit into from
Apr 26, 2023
Merged

fix responsive and drag part #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14,638 changes: 3,868 additions & 10,770 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@
"vitest": "^0.28.4",
"vue": "^3.2.0",
"vue-eslint-parser": "^9.1.0",
"vue-ts-responsive-grid-layout": "file:vue-ts-responsive-grid-layout-1.2.0.tgz",
"vue-ts-responsive-grid-layout": "file:vue-responsive-grid-layout-v.1.2.0.tar.gz",
"vue-tsc": "^1.0.11"
},
"husky": {
Expand Down
14 changes: 9 additions & 5 deletions sandbox/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,8 +318,8 @@
if(index !== -1) {
try {
refLayout.value.defaultGridItem.$el.style.display = "none";
} catch {
// Do nothing
} catch (e){
console.log(e);
}
let el = mapCache.get("drop");
if(!el) {
Expand All @@ -336,10 +336,12 @@
DragPos.i = String(index);
DragPos.x = testLayout.value[index].x;
DragPos.y = testLayout.value[index].y;
DragPos.w = 2;
DragPos.h = 2;
}
if(mouseInGrid === false) {
refLayout.value.dragEvent("dragend", "drop", new_pos.x, new_pos.y, 2, 2);
testLayout.value = testLayout.value.filter(obj => obj.i !== "drop");
testLayout.value = testLayout.value.filter(obj => obj.i !== "drop").slice(0);
}
}
}
Expand All @@ -364,13 +366,15 @@
testLayout.value.push({
x: DragPos.x,
y: DragPos.y,
w: 1,
h: 1,
w: 2,
h: 2,
minH: 1,
minW: 1,
i: DragPos.i
});
refLayout.value.dragEvent("dragend", DragPos.i, DragPos.x, DragPos.y, 2, 2);
mouseXY.x = 0;
mouseXY.y = 0;
mapCache.delete("drop");
});
}
Expand Down
12 changes: 11 additions & 1 deletion sandbox/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,17 @@ export const testData: TLayout = [
{ h: 2, i: 5, w: 1, x: 4, y: 0 },
{ h: 1, i: 6, w: 1, x: 5, y: 0 },
{ h: 1, i: 7, w: 1, x: 0, y: 2, isStatic: true },
{ h: 1, i: 8, w: 1, x: 1, y: 1 }
{ h: 1, i: 8, w: 1, x: 1, y: 1 },

// { h: 1, i: 1, w: 1, x: 0, y: 0 },
// { h: 1, i: 2, w: 1, x: 1, y: 0 },
// { h: 1, i: 3, w: 1, x: 2, y: 0 },
// { h: 1, i: 4, w: 1, x: 3, y: 0 },
// { h: 1, i: 5, w: 1, x: 4, y: 0 },
// { h: 1, i: 6, w: 1, x: 0, y: 0 },
// { h: 1, i: 7, w: 1, x: 1, y: 0 },
// { h: 1, i: 8, w: 1, x: 2, y: 0 },

// { x:0, y:0, w:2, h:2, i:0, isDraggable: false },
// { x:2, y:0, w:2, h:2, i:1, isStatic: true },
// { x:4, y:0, w:2, h:2, i:2, isResizable: false },
Expand Down
184 changes: 92 additions & 92 deletions src/components/Grid/GridItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1180,101 +1180,101 @@
}

& > .vue-resizable-handle {
//background-origin: content-box;
//background-position: bottom right;
//background-repeat: no-repeat;
//background-color: red;
//bottom: -3px;
//box-sizing: border-box;
//cursor: se-resize;
//height: 15px;
//padding: 0 3px 3px 0;
//position: absolute;
//right: -3px;
//width: 15px;
//z-index: 20;

//& > .icon {
// box-sizing: border-box;
// display: inline-block;
// font-size: inherit;
// font-style: normal;
// height: 1em;
// position: relative;
// text-indent: -9999px;
// vertical-align: middle;
// width: 1em;
//
// &::before,
// &::after {
// content: '';
// display: block;
// left: 50%;
// position: absolute;
// top: 50%;
// transform: translate(-50%, -50%);
// }
//
// &.icon-resize-se {
// &::before {
// border: 3px solid black;
// border-bottom: 0;
// border-right: 0;
// height: .65em;
// transform: translate(-75%, -50%) rotate(180deg);
// width: .65em;
// }
// }
//}
background-origin: content-box;
background-position: bottom right;
background-repeat: no-repeat;
// background-color: red;
bottom: -3px;
box-sizing: border-box;
cursor: se-resize;
height: 15px;
padding: 0 3px 3px 0;
position: absolute;
right: -3px;
width: 15px;
z-index: 20;

& > .icon {
box-sizing: border-box;
display: inline-block;
font-size: inherit;
font-style: normal;
height: 1em;
position: relative;
text-indent: -9999px;
vertical-align: middle;
width: 1em;

&::before,
&::after {
content: '';
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}

&.icon-resize-se {
&::before {
// border: 3px solid black;
border-bottom: 0;
border-right: 0;
height: .65em;
transform: translate(-75%, -50%) rotate(180deg);
width: .65em;
}
}
}
}

& > .vue-rtl-resizable-handle {
//background-origin: content-box;
//background-position: bottom right;
//background-repeat: no-repeat;
//bottom: 5px;
//box-sizing: border-box;
//cursor: sw-resize;
//height: 20px;
//left: 0;
//margin: 0 3px 2px 5px;
//position: absolute;
//right: auto;
//width: 20px;
//z-index: 20;

//& > .icon, .icon-resize-se {
// box-sizing: border-box;
// display: inline-block;
// font-size: inherit;
// font-style: normal;
// height: 1em;
// position: relative;
// text-indent: -9999px;
// vertical-align: middle;
// width: 1em;
//
// &::before,
// &::after {
// content: '';
// display: block;
// left: 50%;
// position: absolute;
// top: 50%;
// transform: translate(-50%, -50%);
// }
//
// &.icon-resize-se {
// &::before {
// border: 3px solid black;
// border-bottom: 0;
// border-right: 0;
// height: .65em;
// transform: translate(-75%, -50%) rotate(270deg);
// width: .65em;
// }
// }
//}
background-origin: content-box;
background-position: bottom right;
background-repeat: no-repeat;
bottom: 5px;
box-sizing: border-box;
cursor: sw-resize;
height: 20px;
left: 0;
margin: 0 3px 2px 5px;
position: absolute;
right: auto;
width: 20px;
z-index: 20;

& > .icon, .icon-resize-se {
box-sizing: border-box;
display: inline-block;
font-size: inherit;
font-style: normal;
height: 1em;
position: relative;
text-indent: -9999px;
vertical-align: middle;
width: 1em;

&::before,
&::after {
content: '';
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}

&.icon-resize-se {
&::before {
// border: 3px solid black;
border-bottom: 0;
border-right: 0;
height: .65em;
transform: translate(-75%, -50%) rotate(270deg);
width: .65em;
}
}
}
}

&.render-rtl {
Expand Down
4 changes: 3 additions & 1 deletion src/components/Grid/GridLayout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,9 @@
} else {
compactLayout(props.layout, props.verticalCompact);
}

if(props.responsive) {
responsiveGridLayout();
}
// needed because vue can't detect changes on array element properties
eventBus.emit(`compact`);
updateHeight();
Expand Down
61 changes: 35 additions & 26 deletions src/core/helpers/responsiveUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
getStatics,
} from './utils';
import {
ILayoutItem,
TBreakpoint,
TBreakpoints,
TLayout,
Expand Down Expand Up @@ -65,6 +66,23 @@ export const getColsFromBreakpoint = (breakpoint: TBreakpoint, cols: TBreakpoint
return cols[breakpoint];
};

const moveToCorrectPlace = (l:ILayoutItem, layout: TLayout, bounds: { cols: number }, staticItem: ILayoutItem[]):void => {
if(l.x + l.w > bounds.cols) {
l.x = 0;
l.y += 1;
}
// eslint-disable-next-line no-cond-assign
while (getFirstCollision(staticItem, l)) {
l.x += l.w;
// move x to next place which might be able to contain it
if(l.x + l.w > bounds.cols) {
// if this width is out of layout
l.y += 1; // move y to next y
l.x = 0; // start x from 0
}
}
};

/**
* Given a layout, make sure all elements fit within its bounds.
*
Expand All @@ -79,44 +97,35 @@ export function correctBounds(layout: TLayout, bounds: { cols: number }, distrib

if(distributeEvenly) {
// Fix for issue: https://github.com/gwinnem/vue-responsive-grid-layout/issues/2
// out of layout, move down and to the left.
if(l.x + l.w > bounds.cols) {
l.x = 0;
l.y += 1;
// it's not static or it's out of layout
if(!collidesWith.includes(l) || l.x + l.w > bounds.cols) {
moveToCorrectPlace(l, layout, bounds, collidesWith);
}

// find any item which is overlapped
while (getFirstCollision(layout, l)) {
l.x += l.w; // move x to next place which might be able to contain it
if(l.x + l.w > bounds.cols) {
// if this width is out of layout
l.y += 1; // move y to next y
l.x = 0; // start x from 0
}
} else if(!distributeEvenly) {
// Overflows right, move item to the left
if(l.x + l.w > bounds.cols) {
l.x = bounds.cols - l.w;
}
}

// Overflows right, move item to the left
if(l.x + l.w > bounds.cols) {
l.x = bounds.cols - l.w;
}

// Overflows left
// TODO experiment to get a layout where this is the case, 01.04.2023, this is not being triggered..
if(l.x < 0) {
l.x = 0;
l.w = bounds.cols;
// this will cause incorrect width when drag item from outside
// l.w = bounds.cols;
}

if(!l.isStatic) {
collidesWith.push(l);
} else {
// If this is static and collides with other statics, we must move it down.
// We have to do something nicer than just letting them overlap.
while (getFirstCollision(collidesWith, l)) {
l.y++;
}
}
// this will cause the item which is real static be moved
// else {
// // If this is static and collides with other statics, we must move it down.
// // We have to do something nicer than just letting them overlap.
// while (getFirstCollision(collidesWith, l)) {
// l.y++;
// }
// }
}
return layout;
}
Expand Down
Binary file added vue-responsive-grid-layout-v.1.2.0.tar.gz
View file
Open in desktop
Binary file not shown.