Skip to content

Commit fa921c7

Browse files
llorenspujolllorenspujol
committed
chore(demo-app): multi-drag example added real life layout scenario
1 parent 32e8c76 commit fa921c7

File tree

2 files changed

+291
-53
lines changed

2 files changed

+291
-53
lines changed

‎projects/demo-app/src/app/multi-item-handler/multi-item-handler.component.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@
5757
[compactType]="compactType"
5858
[preventCollision]="preventCollision"
5959
[gap]="10"
60+
[scrollableParent]="document"
61+
[scrollSpeed]="4"
6062
[selectedItemsIds]="selectedItems"
6163
(dragStarted)="onDragStarted($event)"
6264
(resizeStarted)="onResizeStarted($event)"

‎projects/demo-app/src/app/multi-item-handler/multi-item-handler.component.ts

Lines changed: 289 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,272 @@
1+
import { Component, ElementRef, Inject, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
2+
import { MatSelectChange, MatSelectModule } from '@angular/material/select';
13
import {
2-
Component,
3-
ElementRef,
4-
Inject,
5-
NgZone,
6-
OnDestroy,
7-
OnInit,
8-
ViewChild
9-
} from '@angular/core';
10-
import {MatSelectChange, MatSelectModule} from '@angular/material/select';
11-
import {
12-
KtdDragEnd,
13-
KtdDragStart,
14-
ktdGridCompact,
15-
KtdGridComponent,
16-
KtdGridLayout,
17-
KtdGridLayoutItem,
18-
KtdResizeEnd,
19-
KtdResizeStart,
20-
ktdTrackById,
21-
KtdGridItemComponent,
22-
KtdGridItemPlaceholder
4+
KtdDragEnd, KtdDragStart, ktdGridCompact, KtdGridComponent, KtdGridItemComponent, KtdGridItemPlaceholder, KtdGridLayout, KtdGridLayoutItem,
5+
KtdResizeEnd, KtdResizeStart, ktdTrackById
236
} from '@katoid/angular-grid-layout';
24-
import {ktdArrayRemoveItem} from '../utils';
25-
import {DOCUMENT, NgClass, NgFor, NgIf} from '@angular/common';
26-
import {MatCheckboxModule} from '@angular/material/checkbox';
27-
import {KtdFooterComponent} from '../components/footer/footer.component';
28-
import {ColorPickerModule} from 'ngx-color-picker';
29-
import {MatChipsModule} from '@angular/material/chips';
30-
import {MatInputModule} from '@angular/material/input';
31-
import {MatOptionModule} from '@angular/material/core';
32-
import {MatFormFieldModule} from '@angular/material/form-field';
33-
import {MatButtonModule} from '@angular/material/button';
34-
import {ktdGetOS} from './multi-item-handler.utils';
7+
import { ktdArrayRemoveItem } from '../utils';
8+
import { DOCUMENT, NgClass, NgFor } from '@angular/common';
9+
import { MatCheckboxModule } from '@angular/material/checkbox';
10+
import { KtdFooterComponent } from '../components/footer/footer.component';
11+
import { ColorPickerModule } from 'ngx-color-picker';
12+
import { MatChipsModule } from '@angular/material/chips';
13+
import { MatInputModule } from '@angular/material/input';
14+
import { MatOptionModule } from '@angular/material/core';
15+
import { MatFormFieldModule } from '@angular/material/form-field';
16+
import { MatButtonModule } from '@angular/material/button';
17+
import { ktdGetOS } from './multi-item-handler.utils';
18+
import { fromEvent, merge, Subscription } from 'rxjs';
19+
import { debounceTime } from 'rxjs/operators';
20+
21+
const realLifeLayout: KtdGridLayout = [
22+
{id: '0', x: 0, y: 0, w: 62, h: 3},
23+
{id: '1', x: 15, y: 5, w: 17, h: 4},
24+
{id: '2', x: 1, y: 11, w: 61, h: 1},
25+
{id: '3', x: 1, y: 12, w: 15, h: 1},
26+
{id: '4', x: 1, y: 13, w: 8, h: 3},
27+
{id: '5', x: 9, y: 13, w: 7, h: 3},
28+
{id: '6', x: 16, y: 12, w: 15, h: 1},
29+
{id: '7', x: 16, y: 13, w: 8, h: 3},
30+
{id: '8', x: 24, y: 13, w: 7, h: 3},
31+
{id: '9', x: 31, y: 12, w: 15, h: 1},
32+
{id: '10', x: 31, y: 13, w: 8, h: 3},
33+
{id: '11', x: 39, y: 13, w: 7, h: 3},
34+
{id: '12', x: 46, y: 12, w: 15, h: 1},
35+
{id: '13', x: 46, y: 17, w: 8, h: 3},
36+
{id: '14', x: 54, y: 13, w: 7, h: 3},
37+
{id: '15', x: 1, y: 16, w: 15, h: 1},
38+
{id: '16', x: 1, y: 17, w: 8, h: 3},
39+
{id: '17', x: 9, y: 17, w: 7, h: 3},
40+
{id: '18', x: 16, y: 16, w: 15, h: 1},
41+
{id: '19', x: 16, y: 17, w: 8, h: 3},
42+
{id: '20', x: 24, y: 17, w: 7, h: 3},
43+
{id: '21', x: 31, y: 16, w: 15, h: 1},
44+
{id: '22', x: 31, y: 17, w: 8, h: 3},
45+
{id: '23', x: 39, y: 17, w: 7, h: 3},
46+
{id: '24', x: 46, y: 16, w: 15, h: 1},
47+
{id: '25', x: 46, y: 13, w: 8, h: 3},
48+
{id: '26', x: 1, y: 21, w: 60, h: 1},
49+
{id: '27', x: 0, y: 9, w: 62, h: 1},
50+
{id: '28', x: 32, y: 5, w: 16, h: 4},
51+
{id: '29', x: 1, y: 22, w: 15, h: 1},
52+
{id: '30', x: 1, y: 23, w: 8, h: 3},
53+
{id: '31', x: 9, y: 23, w: 7, h: 3},
54+
{id: '32', x: 1, y: 31, w: 60, h: 1},
55+
{id: '33', x: 1, y: 41, w: 59, h: 1},
56+
{id: '34', x: 16, y: 22, w: 15, h: 1},
57+
{id: '35', x: 16, y: 23, w: 8, h: 3},
58+
{id: '36', x: 24, y: 23, w: 7, h: 3},
59+
{id: '37', x: 31, y: 32, w: 15, h: 1},
60+
{id: '38', x: 31, y: 23, w: 8, h: 3},
61+
{id: '39', x: 39, y: 23, w: 7, h: 3},
62+
{id: '40', x: 46, y: 22, w: 15, h: 1},
63+
{id: '41', x: 46, y: 23, w: 8, h: 3},
64+
{id: '42', x: 54, y: 23, w: 7, h: 3},
65+
{id: '43', x: 12, y: 49, w: 50, h: 8},
66+
{id: '44', x: 0, y: 50, w: 12, h: 2},
67+
{id: '45', x: 0, y: 52, w: 6, h: 4},
68+
{id: '46', x: 6, y: 52, w: 6, h: 4},
69+
{id: '47', x: 0, y: 49, w: 12, h: 1},
70+
{id: '48', x: 0, y: 48, w: 62, h: 1},
71+
{id: '49', x: 0, y: 98, w: 12, h: 2},
72+
{id: '50', x: 0, y: 100, w: 6, h: 4},
73+
{id: '51', x: 6, y: 100, w: 6, h: 4},
74+
{id: '52', x: 1, y: 26, w: 15, h: 1},
75+
{id: '53', x: 1, y: 27, w: 8, h: 3},
76+
{id: '54', x: 9, y: 27, w: 7, h: 3},
77+
{id: '55', x: 1, y: 32, w: 15, h: 1},
78+
{id: '56', x: 1, y: 36, w: 15, h: 1},
79+
{id: '57', x: 1, y: 33, w: 8, h: 3},
80+
{id: '58', x: 9, y: 33, w: 7, h: 3},
81+
{id: '59', x: 31, y: 33, w: 8, h: 3},
82+
{id: '60', x: 16, y: 32, w: 15, h: 1},
83+
{id: '61', x: 39, y: 33, w: 7, h: 3},
84+
{id: '62', x: 31, y: 22, w: 15, h: 1},
85+
{id: '63', x: 16, y: 33, w: 8, h: 3},
86+
{id: '64', x: 54, y: 33, w: 7, h: 3},
87+
{id: '65', x: 24, y: 33, w: 7, h: 3},
88+
{id: '66', x: 46, y: 33, w: 8, h: 3},
89+
{id: '67', x: 46, y: 32, w: 15, h: 1},
90+
{id: '68', x: 1, y: 37, w: 8, h: 3},
91+
{id: '69', x: 9, y: 37, w: 7, h: 3},
92+
{id: '70', x: 16, y: 36, w: 15, h: 1},
93+
{id: '71', x: 31, y: 36, w: 15, h: 1},
94+
{id: '72', x: 24, y: 37, w: 7, h: 3},
95+
{id: '73', x: 39, y: 37, w: 7, h: 3},
96+
{id: '74', x: 46, y: 36, w: 15, h: 1},
97+
{id: '75', x: 16, y: 37, w: 8, h: 3},
98+
{id: '76', x: 31, y: 37, w: 8, h: 3},
99+
{id: '77', x: 1, y: 42, w: 15, h: 1},
100+
{id: '78', x: 1, y: 43, w: 8, h: 3},
101+
{id: '79', x: 9, y: 43, w: 7, h: 3},
102+
{id: '80', x: 31, y: 42, w: 15, h: 1},
103+
{id: '81', x: 46, y: 42, w: 15, h: 1},
104+
{id: '82', x: 16, y: 42, w: 15, h: 1},
105+
{id: '83', x: 24, y: 43, w: 7, h: 3},
106+
{id: '84', x: 16, y: 43, w: 8, h: 3},
107+
{id: '85', x: 39, y: 43, w: 7, h: 3},
108+
{id: '86', x: 54, y: 43, w: 7, h: 3},
109+
{id: '87', x: 31, y: 43, w: 8, h: 3},
110+
{id: '88', x: 46, y: 43, w: 8, h: 3},
111+
{id: '89', x: 0, y: 56, w: 12, h: 2},
112+
{id: '90', x: 12, y: 57, w: 50, h: 8},
113+
{id: '91', x: 0, y: 60, w: 6, h: 4},
114+
{id: '92', x: 6, y: 60, w: 6, h: 4},
115+
{id: '93', x: 0, y: 58, w: 12, h: 2},
116+
{id: '94', x: 0, y: 66, w: 12, h: 2},
117+
{id: '95', x: 0, y: 68, w: 6, h: 4},
118+
{id: '96', x: 6, y: 68, w: 6, h: 4},
119+
{id: '97', x: 0, y: 74, w: 12, h: 2},
120+
{id: '98', x: 0, y: 76, w: 6, h: 4},
121+
{id: '99', x: 6, y: 76, w: 6, h: 4},
122+
{id: '100', x: 0, y: 82, w: 12, h: 2},
123+
{id: '101', x: 0, y: 84, w: 6, h: 4},
124+
{id: '102', x: 6, y: 84, w: 6, h: 4},
125+
{id: '103', x: 0, y: 90, w: 12, h: 2},
126+
{id: '104', x: 0, y: 92, w: 6, h: 4},
127+
{id: '105', x: 6, y: 92, w: 6, h: 4},
128+
{id: '106', x: 16, y: 26, w: 15, h: 1},
129+
{id: '107', x: 16, y: 27, w: 8, h: 3},
130+
{id: '108', x: 24, y: 27, w: 7, h: 3},
131+
{id: '109', x: 0, y: 80, w: 12, h: 2},
132+
{id: '110', x: 0, y: 72, w: 12, h: 2},
133+
{id: '111', x: 0, y: 88, w: 12, h: 2},
134+
{id: '112', x: 0, y: 64, w: 12, h: 2},
135+
{id: '113', x: 0, y: 96, w: 12, h: 2},
136+
{id: '114', x: 0, y: 104, w: 12, h: 2},
137+
{id: '115', x: 0, y: 106, w: 12, h: 2},
138+
{id: '116', x: 6, y: 108, w: 6, h: 4},
139+
{id: '117', x: 0, y: 108, w: 6, h: 4},
140+
{id: '118', x: 0, y: 112, w: 12, h: 2},
141+
{id: '119', x: 0, y: 120, w: 12, h: 2},
142+
{id: '120', x: 0, y: 128, w: 12, h: 2},
143+
{id: '121', x: 0, y: 144, w: 12, h: 2},
144+
{id: '122', x: 0, y: 114, w: 12, h: 2},
145+
{id: '123', x: 0, y: 116, w: 6, h: 4},
146+
{id: '124', x: 6, y: 116, w: 6, h: 4},
147+
{id: '125', x: 0, y: 122, w: 12, h: 2},
148+
{id: '126', x: 0, y: 130, w: 12, h: 2},
149+
{id: '127', x: 0, y: 124, w: 6, h: 4},
150+
{id: '128', x: 6, y: 124, w: 6, h: 4},
151+
{id: '129', x: 0, y: 132, w: 6, h: 4},
152+
{id: '130', x: 6, y: 132, w: 6, h: 4},
153+
{id: '131', x: 0, y: 136, w: 12, h: 2},
154+
{id: '132', x: 0, y: 138, w: 12, h: 2},
155+
{id: '133', x: 6, y: 140, w: 6, h: 4},
156+
{id: '134', x: 0, y: 140, w: 6, h: 4},
157+
{id: '135', x: 0, y: 146, w: 12, h: 2},
158+
{id: '136', x: 0, y: 148, w: 6, h: 4},
159+
{id: '137', x: 6, y: 148, w: 6, h: 4},
160+
{id: '138', x: 0, y: 154, w: 12, h: 2},
161+
{id: '139', x: 0, y: 156, w: 6, h: 4},
162+
{id: '140', x: 6, y: 156, w: 6, h: 4},
163+
{id: '141', x: 0, y: 170, w: 12, h: 2},
164+
{id: '142', x: 0, y: 164, w: 6, h: 4},
165+
{id: '143', x: 6, y: 164, w: 6, h: 4},
166+
{id: '144', x: 0, y: 160, w: 12, h: 2},
167+
{id: '145', x: 0, y: 152, w: 12, h: 2},
168+
{id: '146', x: 0, y: 162, w: 12, h: 2},
169+
{id: '147', x: 0, y: 168, w: 12, h: 2},
170+
{id: '148', x: 0, y: 176, w: 12, h: 2},
171+
{id: '149', x: 6, y: 172, w: 6, h: 4},
172+
{id: '150', x: 0, y: 172, w: 6, h: 4},
173+
{id: '151', x: 0, y: 186, w: 12, h: 2},
174+
{id: '152', x: 0, y: 210, w: 12, h: 2},
175+
{id: '153', x: 0, y: 212, w: 6, h: 4},
176+
{id: '154', x: 6, y: 212, w: 6, h: 4},
177+
{id: '155', x: 0, y: 218, w: 12, h: 2},
178+
{id: '156', x: 0, y: 220, w: 6, h: 4},
179+
{id: '157', x: 6, y: 220, w: 6, h: 4},
180+
{id: '158', x: 0, y: 226, w: 12, h: 2},
181+
{id: '159', x: 0, y: 228, w: 6, h: 4},
182+
{id: '160', x: 6, y: 228, w: 6, h: 4},
183+
{id: '161', x: 0, y: 234, w: 12, h: 2},
184+
{id: '162', x: 0, y: 236, w: 6, h: 4},
185+
{id: '163', x: 6, y: 236, w: 6, h: 4},
186+
{id: '164', x: 0, y: 178, w: 12, h: 2},
187+
{id: '165', x: 0, y: 184, w: 12, h: 2},
188+
{id: '166', x: 0, y: 194, w: 12, h: 2},
189+
{id: '167', x: 0, y: 192, w: 12, h: 2},
190+
{id: '168', x: 0, y: 196, w: 6, h: 4},
191+
{id: '169', x: 6, y: 196, w: 6, h: 4},
192+
{id: '170', x: 0, y: 200, w: 12, h: 2},
193+
{id: '171', x: 0, y: 202, w: 12, h: 2},
194+
{id: '172', x: 0, y: 208, w: 12, h: 2},
195+
{id: '173', x: 0, y: 232, w: 12, h: 2},
196+
{id: '174', x: 0, y: 224, w: 12, h: 2},
197+
{id: '175', x: 0, y: 216, w: 12, h: 2},
198+
{id: '176', x: 54, y: 17, w: 7, h: 3},
199+
{id: '177', x: 12, y: 65, w: 50, h: 8},
200+
{id: '178', x: 12, y: 73, w: 50, h: 8},
201+
{id: '179', x: 12, y: 81, w: 50, h: 8},
202+
{id: '180', x: 46, y: 37, w: 8, h: 3},
203+
{id: '181', x: 12, y: 89, w: 50, h: 8},
204+
{id: '182', x: 12, y: 97, w: 50, h: 8},
205+
{id: '183', x: 12, y: 105, w: 50, h: 8},
206+
{id: '184', x: 12, y: 113, w: 50, h: 8},
207+
{id: '185', x: 12, y: 121, w: 50, h: 8},
208+
{id: '186', x: 12, y: 129, w: 50, h: 8},
209+
{id: '187', x: 12, y: 137, w: 50, h: 8},
210+
{id: '188', x: 12, y: 145, w: 50, h: 8},
211+
{id: '189', x: 12, y: 153, w: 50, h: 8},
212+
{id: '190', x: 12, y: 161, w: 50, h: 8},
213+
{id: '191', x: 12, y: 169, w: 50, h: 8},
214+
{id: '192', x: 12, y: 177, w: 50, h: 8},
215+
{id: '193', x: 6, y: 180, w: 6, h: 4},
216+
{id: '194', x: 0, y: 180, w: 6, h: 4},
217+
{id: '195', x: 6, y: 188, w: 6, h: 4},
218+
{id: '196', x: 0, y: 188, w: 6, h: 4},
219+
{id: '197', x: 12, y: 185, w: 50, h: 8},
220+
{id: '198', x: 12, y: 193, w: 50, h: 8},
221+
{id: '199', x: 12, y: 209, w: 50, h: 8},
222+
{id: '200', x: 12, y: 201, w: 50, h: 8},
223+
{id: '201', x: 12, y: 217, w: 50, h: 8},
224+
{id: '202', x: 12, y: 225, w: 50, h: 8},
225+
{id: '203', x: 12, y: 233, w: 50, h: 8},
226+
{id: '204', x: 0, y: 30, w: 62, h: 1},
227+
{id: '205', x: 0, y: 46, w: 62, h: 2},
228+
{id: '206', x: 0, y: 20, w: 62, h: 1},
229+
{id: '207', x: 0, y: 40, w: 62, h: 1},
230+
{id: '208', x: 54, y: 37, w: 7, h: 3},
231+
{id: '209', x: 0, y: 10, w: 62, h: 1},
232+
{id: '210', x: 46, y: 26, w: 15, h: 1},
233+
{id: '211', x: 31, y: 26, w: 15, h: 1},
234+
{id: '212', x: 31, y: 27, w: 8, h: 3},
235+
{id: '213', x: 46, y: 27, w: 8, h: 3},
236+
{id: '214', x: 54, y: 27, w: 7, h: 3},
237+
{id: '215', x: 39, y: 27, w: 7, h: 3},
238+
{id: '216', x: 0, y: 3, w: 62, h: 2},
239+
{id: '217', x: 0, y: 204, w: 6, h: 4},
240+
{id: '218', x: 6, y: 204, w: 6, h: 4}
241+
];
242+
const realLifeLayoutSmall: KtdGridLayout = [
243+
{id: '2', x: 1, y: 0, w: 61, h: 1},
244+
{id: '3', x: 1, y: 1, w: 15, h: 1},
245+
{id: '4', x: 1, y: 2, w: 8, h: 3},
246+
{id: '5', x: 9, y: 2, w: 7, h: 3},
247+
{id: '6', x: 16, y: 1, w: 15, h: 1},
248+
{id: '7', x: 16, y: 2, w: 8, h: 3},
249+
{id: '8', x: 24, y: 2, w: 7, h: 3},
250+
{id: '9', x: 31, y: 1, w: 15, h: 1},
251+
{id: '10', x: 31, y: 2, w: 8, h: 3},
252+
{id: '11', x: 39, y: 2, w: 7, h: 3},
253+
{id: '12', x: 46, y: 1, w: 15, h: 1},
254+
{id: '13', x: 46, y: 6, w: 8, h: 3},
255+
{id: '14', x: 54, y: 2, w: 7, h: 3},
256+
{id: '15', x: 1, y: 5, w: 15, h: 1},
257+
{id: '16', x: 1, y: 6, w: 8, h: 3},
258+
{id: '17', x: 9, y: 6, w: 7, h: 3},
259+
{id: '18', x: 16, y: 5, w: 15, h: 1},
260+
{id: '19', x: 16, y: 6, w: 8, h: 3},
261+
{id: '20', x: 24, y: 6, w: 7, h: 3},
262+
{id: '21', x: 31, y: 5, w: 15, h: 1},
263+
{id: '22', x: 31, y: 6, w: 8, h: 3},
264+
{id: '23', x: 39, y: 6, w: 7, h: 3},
265+
{id: '24', x: 46, y: 5, w: 15, h: 1},
266+
{id: '25', x: 46, y: 2, w: 8, h: 3},
267+
{id: '32', x: 1, y: 9, w: 60, h: 1},
268+
{id: '39', x: 54, y: 6, w: 7, h: 3}
269+
];
35270

36271
@Component({
37272
standalone: true,
@@ -59,25 +294,14 @@ export class KtdMultiItemHandlerComponent implements OnInit, OnDestroy {
59294
@ViewChild(KtdGridComponent, {static: true}) grid: KtdGridComponent;
60295
trackById = ktdTrackById;
61296

62-
cols = 12;
63-
rowHeight = 50;
297+
cols = 62;
298+
rowHeight = 32;
64299
compactType: 'vertical' | 'horizontal' | null = 'vertical';
65300
preventCollision = false;
66301
selectedItems: string[] = [];
67-
layout: KtdGridLayout = [
68-
{id: '0', x: 5, y: 0, w: 2, h: 3},
69-
{id: '1', x: 2, y: 2, w: 1, h: 2},
70-
{id: '2', x: 3, y: 7, w: 1, h: 2},
71-
{id: '3', x: 2, y: 0, w: 3, h: 2},
72-
{id: '4', x: 5, y: 3, w: 2, h: 3},
73-
{id: '5', x: 0, y: 4, w: 1, h: 3},
74-
{id: '6', x: 9, y: 0, w: 2, h: 4},
75-
{id: '7', x: 9, y: 4, w: 2, h: 2},
76-
{id: '8', x: 3, y: 2, w: 2, h: 5},
77-
{id: '9', x: 7, y: 0, w: 1, h: 3},
78-
{id: '10', x: 2, y: 4, w: 1, h: 4},
79-
{id: '11', x: 0, y: 0, w: 2, h: 4}
80-
];
302+
layout: KtdGridLayout = realLifeLayout;
303+
304+
resizeSubscription: Subscription;
81305

82306
private _isDraggingResizing: boolean = false;
83307

@@ -89,9 +313,20 @@ export class KtdMultiItemHandlerComponent implements OnInit, OnDestroy {
89313
// this.ngZone.onUnstable.subscribe(() => console.log('UnStable'));
90314
}
91315

92-
ngOnInit() {}
316+
ngOnInit() {
317+
this.resizeSubscription = merge(
318+
fromEvent(window, 'resize'),
319+
fromEvent(window, 'orientationchange')
320+
).pipe(
321+
debounceTime(50),
322+
).subscribe(() => {
323+
this.grid.resize();
324+
});
325+
}
93326

94-
ngOnDestroy() {}
327+
ngOnDestroy() {
328+
this.resizeSubscription.unsubscribe();
329+
}
95330

96331
onDragStarted(event: KtdDragStart) {
97332
this._isDraggingResizing = true;
@@ -132,12 +367,13 @@ export class KtdMultiItemHandlerComponent implements OnInit, OnDestroy {
132367
const layout: KtdGridLayout = [];
133368
for (let i = 0; i < this.cols; i++) {
134369
const y = Math.ceil(Math.random() * 4) + 1;
370+
const width = 10;
135371
layout.push({
136372
x:
137-
Math.round(Math.random() * Math.floor(this.cols / 2 - 1)) *
138-
2,
373+
Math.round(Math.random() * Math.floor(this.cols / width - 1)) *
374+
width,
139375
y: Math.floor(i / 6) * y,
140-
w: 2,
376+
w: width,
141377
h: y,
142378
id: i.toString()
143379
// static: Math.random() < 0.05

0 commit comments

Comments
 (0)