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: nested grids #1980

Closed
wants to merge 6 commits into from
Closed

fix: nested grids #1980

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
55e20b9
fix: nested grids
Jun 15, 2022
b546000
del: unused comment
Jun 15, 2022
fca0013
fix: get original position
Jun 16, 2022
852b70c
fix: drop event for subgrid
Jun 27, 2022
152694d
fix: subgrid styles on drop element
Jul 1, 2022
3a629d1
add: subgrid style comment
Jul 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 7 additions & 2 deletions demo/nested.html
View file
Open in desktop
Expand Up @@ -12,6 +12,8 @@
/* make nested grids have slightly darker bg */
.grid-stack.grid-stack-nested {
background: #e4e4c1;
border: 2px dashed rgba(0, 0, 0, 0.4);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are those CSS changes necessary ? I though the blended background was enough to distinguish the nesting - adding border will mess the padding and create unnecessary scroll content/sizing issues...

I didn't pull in your changes to check.

box-sizing: border-box;
}
/* make nested grid take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
.grid-stack > .grid-stack-item.grid-stack-nested > .grid-stack-item-content {
Expand All @@ -26,6 +28,9 @@
min-height: 100%;
min-width: 100%;
}
.grid-stack-item > .grid-stack-item-content {
inset: 5px !important;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -69,8 +74,8 @@ <h1>Nested grids demo</h1>
id: 'main',
children: [
{y:0, content: 'regular item'},
{x:1, w:4, h:4, subGrid: {children: sub1, dragOut: true, class: 'sub1', ...subOptions}},
{x:5, w:3, h:4, subGrid: {children: sub2, class: 'sub2', ...subOptions}},
{x:1, w:4, h:8, subGrid: {children: sub1, dragOut: true, class: 'sub1', ...subOptions}},
{x:5, w:3, h:3, subGrid: {children: sub2, class: 'sub2', ...subOptions}},
]
};

Expand Down
26 changes: 16 additions & 10 deletions src/gridstack-dd.ts
View file
Open in desktop
Expand Up @@ -5,8 +5,8 @@

/* eslint-disable @typescript-eslint/no-unused-vars */
import { GridStackDDI } from './gridstack-ddi';
import { GridItemHTMLElement, GridStackNode, GridStackElement, DDUIData, DDDragInOpt, GridStackPosition } from './types';
import { GridStack, MousePosition } from './gridstack';
import { GridItemHTMLElement, GridStackNode, GridStackElement, DDUIData, DDDragInOpt, GridStackPosition, GridStackOptions } from './types';
import { GridStack, GridStackWidget, MousePosition } from './gridstack';
import { Utils } from './utils';

/** Drag&Drop drop options */
Expand Down Expand Up @@ -131,8 +131,6 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
// set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
if (node?.grid === this) return true;
if (!this.opts.acceptWidgets) return false;
// prevent deeper nesting until rest of 992 can be fixed
if (node?.subGrid) return false;
// check for accept method or class matching
let canAccept = true;
if (typeof this.opts.acceptWidgets === 'function') {
Expand Down Expand Up @@ -267,16 +265,24 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
GridStackDD.get().remove(el);
}
if (!wasAdded) return false;

el.gridstackNode = node;
node.el = el;
// @ts-ignore
Utils.copyPos(node, this._readAttr(this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578
Utils.removePositioningStyles(el);// @ts-ignore
// placeholder values as moving VERY fast can throw things off #1578
Utils.copyPos(node, this._readAttr(this.placeholder));
Utils.removePositioningStyles(el);
this._writeAttr(el, node);
this.el.appendChild(el);// @ts-ignore
this.el.appendChild(el);
this._updateContainerHeight();
this.engine.addedNodes.push(node);// @ts-ignore
this._triggerAddEvent();// @ts-ignore

const subgrid = node.subGrid as GridStack;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that looks a lot better. Just add this comment
// if dropping a subgrid, make sure to update its style #1943

if (subgrid) {
subgrid._updateStyles(true, subgrid.getRow());
}

this.engine.addedNodes.push(node);

this._triggerAddEvent();
this._triggerChangeEvent();

this.engine.endUpdate();
Expand Down