Skip to content

Commit

Permalink
can drag nested grid over nested grid - Part 2
Browse files Browse the repository at this point in the history 
* more partial fix for gridstack#1009 and gridstack#992
* you can now drag a nested grid over another one and nest it deeper (992)
* fixed size transition
* fixed handlers not set when nesting

TODO: fix pause to work for enter/leave, more nested testing. Fix tests
  • Loading branch information
@adumesny
adumesny committed Sep 25, 2022
1 parent 9200ce0 commit 9f47613
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 23 deletions.
38 changes: 22 additions & 16 deletions demo/nested_advanced.html
View file
Expand Up @@ -6,17 +6,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Advance Nested grids demo</title>
<link rel="stylesheet" href="demo.css"/>
<link rel="stylesheet" href="../dist/gridstack-extra.min.css"/>
<link rel="stylesheet" href="../dist/gridstack-extra.min.css"/> <!-- required for [2-11] column of sub-grids -->
<script src="../dist/gridstack-all.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Advanced Nested grids demo</h1>
<p>Create sub-grids on the fly, by dragging items completely over others (nest) vs partially (push) using
<p>Create sub-grids (darker background) on the fly, by dragging items completely over others (nest) vs partially (push) using
the new v7 API <code>GridStackOptions.subGrid.createDynamic=true</code></p>
<p>This will use the new delay drag&drop option <code>DDDragOpt.pause</code> to tell the gesture difference</p>
<p>Note: <code>gridstack-extra.min.css</code> is required for [2-11] column of sub-grids</p>
<a class="btn btn-primary" onClick="addNested()" href="#">Add Widget</a>
<a class="btn btn-primary" onClick="addNewWidget('sub1_grid')" href="#">Add Widget Grid1</a>
<a class="btn btn-primary" onClick="addNewWidget(0)" href="#">Add W Grid0</a>
<a class="btn btn-primary" onClick="addNewWidget(1)" href="#">Add W Grid1</a>
<a class="btn btn-primary" onClick="addNewWidget(2)" href="#">Add W Grid2</a>
<span>entire save/re-create:</span>
<a class="btn btn-primary" onClick="save()" href="#">Save</a>
<a class="btn btn-primary" onClick="destroy()" href="#">Destroy</a>
Expand All @@ -31,10 +34,11 @@ <h1>Advanced Nested grids demo</h1>
</div>

<script type="text/javascript">
let main = [{x:0, y:0}, {x:1, y:0}, {x:0, y:1}]
let main = [{x:0, y:0}, {x:0, y:1}, {x:0, y:2}]
let sub0 = [{x:0, y:0}];
let sub1 = [{x:0, y:0}, {x:1, y:0}];
let count = 0;
[...main, ...sub1].forEach(d => d.content = String(count++));
[...main, ...sub0, ...sub1].forEach(d => d.content = String(count++));
let subOptions = {
cellHeight: 50, // should be 50 - top/bottom
column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
Expand All @@ -51,44 +55,46 @@ <h1>Advanced Nested grids demo</h1>
subGrid: subOptions,
children: [
...main,
{x:2, y:0, w:2, h:3, subGrid: {children: sub1, id:'sub1_grid', ...subOptions}/*,content: "<div>nested grid here</div>"*/},
{x:1, y:2, h:2, subGrid: {children: sub0, ...subOptions}},
{x:2, y:0, w:2, h:3, subGrid: {children: sub1, ...subOptions}},
// {x:2, y:0, w:2, h:3, subGrid: {children: [...sub1, {x:0, y:1, subGrid: subOptions}], ...subOptions}/*,content: "<div>nested grid here</div>"*/},
]
};

// create and load it all from JSON above
let grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);

addNested = function() {
function addNested() {
grid.addWidget({x:0, y:100, content:"new item"});
}

addNewWidget = function(selector) {
let subGrid = document.querySelector(selector).gridstack;
function addNewWidget(i) {
let subGrid = document.querySelectorAll('.grid-stack-nested')[i].gridstack;
let node = {
x: Math.round(6 * Math.random()),
y: Math.round(5 * Math.random()),
w: Math.round(1 + 1 * Math.random()),
h: Math.round(1 + 1 * Math.random()),
// x: Math.round(6 * Math.random()),
// y: Math.round(5 * Math.random()),
// w: Math.round(1 + 1 * Math.random()),
// h: Math.round(1 + 1 * Math.random()),
content: String(count++)
};
subGrid.addWidget(node);
return false;
};

save = function(content = true, full = true) {
function save(content = true, full = true) {
options = grid.save(content, full);
console.log(options);
// console.log(JSON.stringify(options));
}
destroy = function(full = true) {
function destroy(full = true) {
if (full) {
grid.destroy();
grid = undefined;
} else {
grid.removeAll();
}
}
load = function(full = true) {
function load(full = true) {
if (full) {
grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
} else {
Expand Down
6 changes: 3 additions & 3 deletions src/dd-droppable.ts
View file
Expand Up @@ -88,7 +88,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
protected _mouseEnter(e: MouseEvent): void {
// console.log(`${count++} Enter ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
if (!DDManager.dragElement) return;
if (!this._canDrop()) return;
if (!this._canDrop(DDManager.dragElement.el)) return;
e.preventDefault();
e.stopPropagation();

Expand Down Expand Up @@ -148,8 +148,8 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
}

/** @internal true if element matches the string/method accept option */
protected _canDrop(): boolean {
return DDManager.dragElement && (!this.accept || this.accept(DDManager.dragElement.el));
protected _canDrop(el: HTMLElement): boolean {
return el && (!this.accept || this.accept(el));
}

/** @internal */
Expand Down
4 changes: 2 additions & 2 deletions src/dd-gridstack.ts
View file
Expand Up @@ -222,8 +222,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 @@ -365,6 +363,8 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack {
Utils.removePositioningStyles(el);// @ts-ignore
this._writeAttr(el, node);
this.el.appendChild(el);// @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only)
let subGrid: GridStack = node.subGrid;
if (subGrid?.el && !subGrid.opts.styleInHead) subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
this._updateContainerHeight();
this.engine.addedNodes.push(node);// @ts-ignore
this._triggerAddEvent();// @ts-ignore
Expand Down
2 changes: 1 addition & 1 deletion src/gridstack.scss
View file
Expand Up @@ -112,7 +112,7 @@ $animation_speed: .3s !default;
&.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
&.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
&.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
@include vendor(transition, left .0s, top .0s, height .0s, width .0s);
@include vendor(transition, left 0s, top 0s, height 0s, width 0s);
}

// without this, the html5 drag will flicker between no-drop and drop when dragging over second grid
Expand Down
5 changes: 4 additions & 1 deletion src/gridstack.ts
View file
Expand Up @@ -464,7 +464,7 @@ export class GridStack {
let newItem: HTMLElement;
let newItemOpt: GridStackNode;
if (saveContent) {
this._removeDD(el); // remove any (content) D7D
this._removeDD(node.el); // remove D&D since it's set on content div
let doc = document.implementation.createHTMLDocument(''); // IE needs a param
doc.body.innerHTML = `<div class="grid-stack-item"></div>`;
newItem = doc.body.children[0] as HTMLElement;
Expand All @@ -482,7 +482,10 @@ export class GridStack {
if (nodeToAdd) {
let w = autoColumn ? ops.column : node.w;
let h = node.h + nodeToAdd.h;
let style = node.el.style;
style.transition = 'none'; // show up instantly so we don't see scrollbar with nodeToAdd
this.update(node.el, {w, h});
setTimeout(() => style.transition = null); // recover animation
ops.isTemp = true; // prevent re-nesting as we add over
}

Expand Down

0 comments on commit 9f47613

Please sign in to comment.