Enhancement: Refactor and provide access to the layout algorithm.

This is not an issue per se but a request related to my usage of gridstack.js 1.2.0.

In order to produce a behavior where the grid items try their best to maintain a width equal to their original setting, up to the maximum number of available columns, and maintain their position relative to other nodes when the column count in the grid changes similar to the 'responsive grid' demo, I have had to modify three otherwise private or hidden methods:

_layoutsNodesChange
_updateNodeWidths
_sortNodes

All of these methods have side effects.

This is only possible because of the nature of JavaScript and the fact that it does not enforce the notion of public and private. Further, these changes are definitely not maintainable as there is no guarantee they won't be changed, remove, or otherwise be used in a way that breaks the adjustments I have made to make the library work for my purposes.

To get around this in the future, I would appreciate moving towards a solution where a 'layout' method is exposed as part of the grid options. This method would minimally provide a mechanism to modify the nodes and their associated properties. In order to support dragging with a preview of the final state, some sort of soft layout mechanism would be required as well.

Thanks for reading!

yeah could be interesting. I have moved on typescript implementation in 2.x so the private/public become real and tried to rename methods accordingly. I broke the code in multiple classes, with drag&drop being plugable so we have a jquerui version today but hopefully an HTML5 version later.
Have not looked/considered making the layout in GridStackEngine configurable, but anything is possible with time and $

@sinap-se

@sinap-se would disabling item scaling (and reflow to fit) during column change solve your issues ? should be easy to add - see other feature request

looking at adding a LayoutOptions enum to updateNodeWidths() to enable a few options out of the box (default would still move+scale based on column ratio) and wanted to get your feedback if that would solve your usage...

column(n) re-layout options to not scale/move

custom column re-layout callback

fixed in next release.

/** different layout options when changing # of columns,
 * including a custom function that takes new/old column count, and array of new/old positions
 * Note: new list may be partially already filled if we have a cache of the layout at that size and new items were added later.
 */
export type ColumnOptions = 'moveScale' | 'move' | 'scale' | 'none' |
  ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);

Navigation Menu

Repository navigation

Enhancement: Refactor and provide access to the layout algorithm. #1332

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Enhancement: Refactor and provide access to the layout algorithm. #1332

Description

Activity

adumesny commented on Aug 13, 2020

adumesny commented on Aug 19, 2020

adumesny commented on Oct 27, 2020

adumesny commented on Oct 29, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions