forked from gridstack/gridstack.js
/
app.component.ts
79 lines (69 loc) · 2.44 KB
/
app.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { Component } from '@angular/core';
import { GridStackOptions, GridStackWidget } from 'gridstack';
import { GridstackComponent, elementCB, nodesCB } from './gridstack.component';
// unique ids sets for each item for correct ngFor updating
let ids = 1;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// which sample to show
show = 3;
/** sample grid options and items to load... */
public gridOptions: GridStackOptions = {
margin: 5,
float: true,
}
public items: GridStackWidget[] = [
{x: 0, y: 0, minW: 2},
{x: 1, y: 1},
{x: 2, y: 2},
];
constructor() {
// give them content and unique id to make sure we track them during changes below...
this.items.forEach(w => {
w.content = `item ${ids}`;
w.id = String(ids++);
})
}
/** called whenever items change size/position/etc.. */
public onChange(data: nodesCB) {
console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
// TODO: update our list to match ?
}
public onResizeStop(data: elementCB) {
console.log('resizestop ', data.el.gridstackNode);
}
/**
* CRUD TEST operations
*/
public add(gridComp: GridstackComponent) {
// new array isn't required as Angular detects changes to content with trackBy:identify()
// this.items = [...this.items, { x:3, y:0, w:3, content:`item ${ids}`, id:String(ids++) }];
this.items.push({x:3, y:0, w:3, content:`item ${ids}`, id:String(ids++)});
}
public delete(gridComp: GridstackComponent) {
this.items.pop();
}
public modify(gridComp: GridstackComponent) {
// this will not update the DOM nor trigger gridstackItems.changes for GS to auto-update, so set new option of the gridItem instead
// this.items[0].w = 3;
const gridItem = gridComp.gridstackItems?.get(0);
if (gridItem) gridItem.options = {w:3};
}
/** test updating existing and creating new one */
public newLayout(gridComp: GridstackComponent) {
this.items = [
{x:0, y:1, id:'1', minW:1, w:1}, // new size/constrain
{x:1, y:1, id:'2'},
// {x:2, y:1, id:'3'}, // delete item
{x:3, y:0, w:3, content:'new item'}, // new item
];
}
// ngFor unique node id to have correct match between our items used and GS
public identify(index: number, w: GridStackWidget) {
return w.id; // or use index if no id is set and you only modify at the end...
}
}