Skip to content

Commit 9f527e4

Browse files
llorenspujolllorenspujol
committed
feat: added 'drag-from-outside' example
1 parent 3fad45a commit 9f527e4

File tree

8 files changed

+821
-1
lines changed

8 files changed

+821
-1
lines changed

‎projects/angular-grid-layout/src/lib/grid.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -710,7 +710,8 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
710710
if (this.gridService.draggingItem !== null && this.isPointerInsideGridElement(lastPointerDragEvent)) {
711711
newLayout = [...newLayout, {
712712
...this.gridService.draggingItem.layoutItem,
713-
id: this.getNextId(),
713+
// For now, until 'drop' is implemented, we may better use the id specified on the draggedItem.
714+
// id: this.getNextId(),
714715
}];
715716
}
716717

‎projects/demo-app/src/app/app-routing.module.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ const routes: Routes = [
3131
loadComponent: () => import('./row-height-fit/row-height-fit.component').then(m => m.KtdRowHeightFitComponent),
3232
data: {title: 'Angular Grid Layout - Row Height Fit'}
3333
},
34+
{
35+
path: 'drag-from-outside',
36+
loadComponent: () => import('./drag-from-outside/drag-from-outside.component').then(m => m.KtdDragFromOutsideComponent),
37+
data: {title: 'Angular Grid Layout - Drag From Outside'}
38+
},
3439
{
3540
path: '**',
3641
redirectTo: 'playground'

‎projects/demo-app/src/app/components/footer/footer.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ <h2 style="margin-top: 16px">Other examples: </h2>
55
<a [routerLink]="['/real-life-example']">Real life example</a>
66
<a [routerLink]="['/scroll-test']">Scroll test</a>
77
<a [routerLink]="['/row-height-fit']">Row Height Fit</a>
8+
<a [routerLink]="['/drag-from-outside']">Drag From Outside</a>
89
</div>

‎projects/demo-app/src/app/drag-from-outside/drag-from-outside.component.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
2+
<div class="pokemons-container">
3+
<div *ngFor="let pokemon of pokemonsGen1; let i = index" ktdDrag [width]="1" [id]="pokemon.name" class="pokemon-drag-item">
4+
<img [src]="pokemonsGen1Dict[pokemon.name].img">
5+
{{pokemon.name}}
6+
</div>
7+
</div>
8+
<div class="grids-container">
9+
10+
<div class="grid-container">
11+
<ktd-grid cols="12"
12+
rowHeight="50"
13+
[compactType]="compactType"
14+
compactOnPropsChange="true"
15+
preventCollision="false"
16+
[backgroundConfig]="{show: 'always'}"
17+
[layout]="layout"
18+
[scrollableParent]="document"
19+
(layoutUpdated)="onLayoutUpdated($event)">
20+
<ktd-grid-item *ngFor="let item of layout; trackBy:trackById"
21+
draggable="true"
22+
resizable="true"
23+
dragStartThreshold="0"
24+
[id]="item.id">
25+
26+
<img [src]="pokemonsGen1Dict[item.id].img">
27+
{{pokemonsGen1Dict[item.id].name}}
28+
</ktd-grid-item>
29+
</ktd-grid>
30+
31+
</div>
32+
33+
<div class="grid-container">
34+
35+
<ktd-grid cols="12"
36+
rowHeight="50"
37+
[compactType]="compactType"
38+
compactOnPropsChange="true"
39+
preventCollision="false"
40+
[backgroundConfig]="{show: 'always'}"
41+
[layout]="layout2"
42+
[scrollableParent]="document"
43+
(layoutUpdated)="onLayout2Updated($event)">
44+
<ktd-grid-item *ngFor="let item of layout2; trackBy:trackById"
45+
draggable="true"
46+
resizable="true"
47+
dragStartThreshold="0"
48+
[id]="item.id">
49+
50+
<img [src]="pokemonsGen1Dict[item.id].img">
51+
{{pokemonsGen1Dict[item.id].name}}
52+
</ktd-grid-item>
53+
</ktd-grid>
54+
</div>
55+
</div>
56+
<ktd-footer></ktd-footer>

‎projects/demo-app/src/app/drag-from-outside/drag-from-outside.component.scss‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
:host {
2+
display: block;
3+
width: 100%;
4+
padding: 48px 32px;
5+
box-sizing: border-box;
6+
7+
.pokemons-container {
8+
display: flex;
9+
flex-wrap: wrap;
10+
}
11+
12+
.pokemon-drag-item {
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
padding: 4px;
17+
18+
img {
19+
width: 60px;
20+
height: 60px;
21+
object-fit: cover;
22+
}
23+
}
24+
25+
.grids-container {
26+
width: 100%;
27+
display: flex;
28+
gap: 24px;
29+
30+
.grid-container {
31+
width: 100%;
32+
padding: 4px;
33+
box-sizing: border-box;
34+
border-radius: 2px;
35+
border: 1px solid var(--ktd-border-color);
36+
background-color: var(--ktd-background-color);
37+
38+
ktd-grid {
39+
min-height: 500px;
40+
}
41+
}
42+
}
43+
44+
45+
46+
.grid-item-content {
47+
box-sizing: border-box;
48+
background: #ccc;
49+
border: 1px solid black;
50+
color: black;
51+
width: 100%;
52+
height: 100%;
53+
user-select: none;
54+
display: flex;
55+
align-items: center;
56+
justify-content: center;
57+
}
58+
59+
ktd-grid {
60+
transition: height 500ms ease;
61+
}
62+
63+
ktd-grid-item {
64+
background: #444444;
65+
img {
66+
width: 100%;
67+
height: 100%;
68+
object-fit: contain;
69+
}
70+
71+
&.ktd-grid-item-dragging {
72+
}
73+
74+
75+
}
76+
77+
// customize placeholder
78+
::ng-deep .ktd-grid-item-placeholder {
79+
background-color: #ffa726;
80+
}
81+
82+
}

‎projects/demo-app/src/app/drag-from-outside/drag-from-outside.component.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
2+
import { fromEvent, merge, Subscription } from 'rxjs';
3+
import { debounceTime } from 'rxjs/operators';
4+
import { KtdGridModule, KtdGridComponent, KtdGridLayout, ktdTrackById, KtdGridBackgroundCfg, KtdGridCompactType } from '@katoid/angular-grid-layout';
5+
import { CommonModule, DOCUMENT } from '@angular/common';
6+
import { RouterModule } from '@angular/router';
7+
import { KtdFooterComponent } from '../components/footer/footer.component';
8+
import { pokemonsGen1 } from './pokemons-gen1';
9+
import { KtdDictionary } from '../types';
10+
11+
12+
@Component({
13+
selector: 'ktd-drag-from-outside',
14+
standalone: true,
15+
imports: [CommonModule, KtdGridModule, RouterModule, KtdFooterComponent],
16+
templateUrl: './drag-from-outside.component.html',
17+
styleUrls: ['./drag-from-outside.component.scss']
18+
})
19+
export class KtdDragFromOutsideComponent implements OnInit, OnDestroy {
20+
@ViewChild(KtdGridComponent, {static: true}) grid: KtdGridComponent;
21+
trackById = ktdTrackById;
22+
layout: KtdGridLayout = [];
23+
layout2: KtdGridLayout = [];
24+
compactType: KtdGridCompactType = null;
25+
backgroundConfig: KtdGridBackgroundCfg = {show: 'always'};
26+
27+
pokemonsGen1 = pokemonsGen1;
28+
29+
pokemonsGen1Dict: KtdDictionary<{ name: string, url: string, img: string }> = pokemonsGen1.reduce((acc, cur, index) => ({
30+
...acc,
31+
[cur.name as string]: {
32+
...cur,
33+
img: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index + 1}.png`
34+
}
35+
}), {})
36+
37+
private resizeSubscription: Subscription;
38+
39+
constructor(@Inject(DOCUMENT) public document: Document) { }
40+
41+
ngOnInit() {
42+
this.resizeSubscription = merge(
43+
fromEvent(window, 'resize'),
44+
fromEvent(window, 'orientationchange')
45+
).pipe(
46+
debounceTime(50)
47+
).subscribe(() => {
48+
this.grid.resize();
49+
});
50+
}
51+
52+
ngOnDestroy() {
53+
this.resizeSubscription.unsubscribe();
54+
}
55+
56+
onLayoutUpdated(layout: KtdGridLayout) {
57+
console.log('onLayoutUpdated', layout);
58+
this.layout = layout;
59+
}
60+
61+
onLayout2Updated(layout: KtdGridLayout) {
62+
console.log('onLayout2Updated', layout);
63+
this.layout2 = layout;
64+
}
65+
66+
}

0 commit comments

Comments
 (0)