Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Tile manager component implementation #1402

Draft
wants to merge 127 commits into
base: master
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
127 commits
Select commit Hold shift + click to select a range
a753348
Initial tile manager draft
mtsvyatkova Sep 25, 2024
ff51d7c
feat(tile-manager): implement base resizing logic
onlyexeption Oct 3, 2024
1e990ab
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
onlyexeption Oct 4, 2024
d76d33d
feat(tiles): add drag and drop of tiles
mtsvyatkova Oct 4, 2024
d985fb0
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
mtsvyatkova Oct 4, 2024
c3fb21e
Merge branch 'mtsvyatkova/feat-1379-tile-manager' into ibarakov/tile-…
onlyexeption Oct 4, 2024
1582eee
Merge pull request #1420 from IgniteUI/ibarakov/tile-manager-resizing
onlyexeption Oct 4, 2024
6a113b1
feat(tiles): add drag mode property
mtsvyatkova Oct 4, 2024
ab6a8d9
feat(tile-manager): add header & content parts + fix styling
onlyexeption Oct 8, 2024
97fcaf7
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
onlyexeption Oct 8, 2024
c2a3fe1
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
gedinakova Oct 8, 2024
ee2f0ba
chore(*): add base to style file names
mtsvyatkova Oct 8, 2024
1fb5d09
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
mtsvyatkova Oct 8, 2024
ec95ef9
feat(tile-manager): add maximized property for tiles
mtsvyatkova Oct 9, 2024
cb9b7fd
chore: update shorthand css prop
mtsvyatkova Oct 9, 2024
5e030d7
fix(tile-manager): always set droptarget to igc-tile
onlyexeption Oct 10, 2024
2279486
chore: minor fix
onlyexeption Oct 10, 2024
f4d9672
feat(tile-manager): add manual slot assignment
mtsvyatkova Oct 11, 2024
28a83cb
chore: remove the name for tile content slot and igctilecomponent
mtsvyatkova Oct 11, 2024
dd707a1
feat(tile-manager): add column and row count and colSpan in tile comp…
onlyexeption Oct 11, 2024
8cf1f80
feat(tile-manager): Added fullscreen behavior for tiles (#1434)
rkaraivanov Oct 11, 2024
e361531
chore: add initialization and manual slot assignment test
mtsvyatkova Oct 15, 2024
56c3471
feat(tile-manager):| add tile col/row Start properties
onlyexeption Oct 15, 2024
ecbf2d5
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Oct 16, 2024
b277093
chore: Adjusted tile manager story sample
rkaraivanov Oct 16, 2024
c7f897e
feat: Add tile DnD events controller
rkaraivanov Oct 16, 2024
91d8f75
refactor: Initial events for tile manager
rkaraivanov Oct 16, 2024
4b72b6b
feat(tile): Maximized state uses Popover API
rkaraivanov Oct 17, 2024
3d4dd15
tests: add some drag and drop tests
mtsvyatkova Oct 17, 2024
0f8c999
feat(tile-manager): tiles collection manipulation support
mtsvyatkova Oct 21, 2024
cf317c1
refactor: use MutationController
mtsvyatkova Oct 21, 2024
34e3c57
feat(tile-manager): implement deffered resizing
onlyexeption Oct 22, 2024
2fa05ac
chore: cast event listeners
onlyexeption Oct 23, 2024
1d69ae9
feat(tile-manager): cancel resize on pressing escape
onlyexeption Oct 23, 2024
666d9d7
chore: add cancel resize test
onlyexeption Oct 24, 2024
6a30f22
chore: remove right and bottom resizer from test
mtsvyatkova Oct 24, 2024
f80db8e
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Oct 25, 2024
8c22833
test: fix some tests
mtsvyatkova Oct 25, 2024
74a0da1
feat(tile-manager): add serialization logic
mtsvyatkova Oct 28, 2024
57dd0b8
feat(tile-manager): state change events
onlyexeption Oct 28, 2024
0e00368
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
onlyexeption Oct 28, 2024
66ad382
chore: Events and removed single out unit test
rkaraivanov Oct 29, 2024
00de7b2
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Oct 29, 2024
8853d53
fix(tile-manager): fix resize controller, events, tests
onlyexeption Oct 29, 2024
d2a699c
refactor: Dropped logic for grid row/column assignment
rkaraivanov Oct 30, 2024
ddf74f4
fix(tile-manager):emit maximized event on user interaction only
onlyexeption Oct 30, 2024
bed724a
feat(tile-manager): add disableDrag and disableResize properties
mtsvyatkova Oct 30, 2024
83651e6
chore(*): add comment
onlyexeption Oct 31, 2024
dd67bd8
refactor: Move to implicit CSS grid
rkaraivanov Nov 4, 2024
8ec0b94
feat(tile-manager): expose position prop for tiles and update the dro…
mtsvyatkova Nov 6, 2024
1e1b5da
refactor: remove unnecessary DOM elements and set exact offset for th…
mtsvyatkova Nov 7, 2024
b1ee224
fix(tile-manager): apply saved props to tiles already in DOM
mtsvyatkova Nov 8, 2024
08c84ec
fix(tile-manager): remove rowCount prop
onlyexeption Nov 11, 2024
c7a691e
refactor: modify position assignment to keep originally assigned posi…
mtsvyatkova Nov 11, 2024
642809f
fix(tile-manager): add a check for removed and added tiles
mtsvyatkova Nov 12, 2024
bf1abb5
feat(tile-manager): initial styling
SisIvanova Nov 12, 2024
be99a54
feat: add tile parts on resizing/dragging
onlyexeption Nov 12, 2024
3d258e4
feat(tile-manager): add props to disable resize and DnD (#1468)
onlyexeption Nov 12, 2024
88cf14b
fix(tile-manager): dragging styles
SisIvanova Nov 12, 2024
e74dcf2
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
SisIvanova Nov 12, 2024
5029d9e
test(tile-manager): update tests
mtsvyatkova Nov 13, 2024
5d487f5
chore: dashboard stories initial commit
onlyexeption Nov 15, 2024
76f451b
feat(tile-manager): styling improvements
SisIvanova Nov 15, 2024
8dc98cd
feat(tile-manager): Add tile context to header
mtsvyatkova Nov 18, 2024
5f3ce02
feat: Abstract resizing logic
rkaraivanov Nov 19, 2024
fda7628
feat(tile-manager): add fullscreen prop
mtsvyatkova Nov 20, 2024
f2c28cc
refactor: split tests in multiple files
mtsvyatkova Nov 20, 2024
b9ff8ab
fix: connect css vars to props, fix maximized prop and remove watcher
onlyexeption Nov 20, 2024
52c42db
fix: use col/row start and span props in tile to set grid-col and row
onlyexeption Nov 20, 2024
9d8ca4a
fix: set component props in stories + add setter to columnCount
onlyexeption Nov 21, 2024
3b26b9e
fix: tile css parts
onlyexeption Nov 21, 2024
9e5cafb
refactor(tile-manager): add base dark schema
SisIvanova Nov 22, 2024
c0d1345
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
SisIvanova Nov 22, 2024
a7d0497
chore(*): restore setDragImage offset
mtsvyatkova Nov 22, 2024
3f434f1
refactor(tile-manager): styling improvements
SisIvanova Nov 25, 2024
b7a524b
fix(tile-manager): resize element position
SisIvanova Nov 25, 2024
903b414
chore: sample changes + add resizing/resizable parts
onlyexeption Nov 25, 2024
3b04b5b
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
onlyexeption Nov 25, 2024
ec0a69e
feat(tile-manager): resize icon and styles
SisIvanova Nov 26, 2024
ba59817
fix: handle columnCount undefined value in setter
onlyexeption Nov 26, 2024
1f6067d
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
onlyexeption Nov 26, 2024
b3ff5f7
fix: correctly resize ghost element on resize
onlyexeption Nov 26, 2024
af8b1fc
fix: resize ghost refinement + remove tile related stuff from resize …
onlyexeption Nov 27, 2024
1d8d987
refactor(tile-manager): header / resize-indicator / stories
SisIvanova Nov 27, 2024
1dec463
fix(tile-manager): properly update positions on tile addition or removal
mtsvyatkova Nov 28, 2024
71889e4
test: fix default component state test
mtsvyatkova Nov 28, 2024
f18d17b
feat: resize snapping initial implementatiton
onlyexeption Nov 29, 2024
059e421
refactor(tile-manager): update row height & column width
SisIvanova Dec 2, 2024
44bcbec
feat: initial drag ghost functionality
mtsvyatkova Dec 2, 2024
5616dbb
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
mtsvyatkova Dec 2, 2024
ea8a8af
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Dec 2, 2024
3c23f11
build(deps): Updated to latest theming package
rkaraivanov Dec 2, 2024
2f09944
refactor: Removed hardcoded CSS variables and default column count
rkaraivanov Dec 3, 2024
7d0d8c0
fix: improve resizing
onlyexeption Dec 3, 2024
2101223
feat(tile-manager): indigo related styles
SisIvanova Dec 3, 2024
d87a75f
refactor: Tile & Tile header
rkaraivanov Dec 4, 2024
3d230dc
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Dec 4, 2024
437ba64
fix: update fullscreen on esc key
mtsvyatkova Dec 5, 2024
cf9d4e7
refactor: Provide tile manager through context
rkaraivanov Dec 5, 2024
535e4bf
Merge remote-tracking branch 'origin/mtsvyatkova/feat-1379-tile-manag…
rkaraivanov Dec 5, 2024
cc5a3c2
fix: hide base and resize trigger while dragging
mtsvyatkova Dec 5, 2024
193fd24
feat(tile-manager): add dragging and resizing parts to the tile
mtsvyatkova Dec 6, 2024
b23eff3
feat(tile-manager): indigo icons & styling improvements
SisIvanova Dec 6, 2024
5deaac7
test(*): Fixed initialization test failures.
gedinakova Dec 9, 2024
3d6e17e
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
gedinakova Dec 9, 2024
ced3c5c
fix(*): Use shorthand 'overflow' to make lint happy.
gedinakova Dec 9, 2024
62f7f8a
refactor: Tiles position logic and slot assignment
rkaraivanov Dec 9, 2024
956e2c7
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
rkaraivanov Dec 9, 2024
0c46112
fix(*): Updated tile shadow dom in tile content test.
gedinakova Dec 9, 2024
62b33cd
fix: Fixed circular dependency
rkaraivanov Dec 9, 2024
2a18813
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Dec 9, 2024
d0cc154
fix(*): Fixed and enriched tile state tests.
gedinakova Dec 9, 2024
1db557f
remove: First iteration of a resize controller
rkaraivanov Dec 10, 2024
80665be
refactor: Fullscreen logic into a controller
rkaraivanov Dec 10, 2024
a253859
fix: add maximized-tile part on tile manager
mtsvyatkova Dec 11, 2024
7e53a56
refactor: improve the maximized-tile logic
mtsvyatkova Dec 11, 2024
495179a
fix(tile-manager): styling issues with maximized state
SisIvanova Dec 12, 2024
5980adc
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
SisIvanova Dec 12, 2024
854c7a6
Update tile.base.scss
SisIvanova Dec 12, 2024
819b345
fix(*): Updated basic tests.
gedinakova Dec 12, 2024
89e4565
refactor: add drag ghost element only when dragging
mtsvyatkova Dec 12, 2024
f54e347
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Dec 12, 2024
014dfd3
Latest resizing changes (#1517)
gedinakova Dec 12, 2024
7f1a517
fix(*): remove dragImage async and fix test
mtsvyatkova Dec 12, 2024
8657c46
fix(*): set draggable on inner div
mtsvyatkova Dec 17, 2024
207eba8
Revert "fix(*): set draggable on inner div"
mtsvyatkova Dec 20, 2024
1fe82d2
fix(*): drag over part is set properly
mtsvyatkova Dec 20, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
tests: add some drag and drop tests
  • Loading branch information
mtsvyatkova committed Oct 17, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 3d4dd1577a3379141b80fe2ba95c758fc63d1a46
10 changes: 10 additions & 0 deletions src/components/common/utils.spec.ts
Original file line number Diff line number Diff line change
@@ -260,6 +260,16 @@ export function simulateDragStart(node: Element) {
);
}

export function simulateDragEnd(node: Element) {
node.dispatchEvent(
new DragEvent('dragend', { bubbles: true, composed: true })
);
}

export function simulateDrop(node: Element) {
node.dispatchEvent(new DragEvent('drop', { bubbles: true, composed: true }));
}

/**
* Returns an array of all Animation objects affecting this element or which are scheduled to do so in the future.
* It can optionally return Animation objects for descendant elements too.
193 changes: 185 additions & 8 deletions src/components/tile-manager/tile-manager.spec.ts
Original file line number Diff line number Diff line change
@@ -3,9 +3,15 @@ import { spy } from 'sinon';

import { range } from 'lit/directives/range.js';
import { defineComponents } from '../common/definitions/defineComponents.js';
import { first } from '../common/util.js';
import { simulateDragStart } from '../common/utils.spec.js';
import { first, last } from '../common/util.js';
import {
simulateDragEnd,
simulateDragStart,
simulateDrop,
} from '../common/utils.spec.js';
import IgcTileHeaderComponent from './tile-header.js';
import IgcTileManagerComponent from './tile-manager.js';
import IgcTileComponent from './tile.js';

describe('Tile Manager component', () => {
before(() => {
@@ -27,21 +33,125 @@ describe('Tile Manager component', () => {
beforeEach(async () => {
tileManager = await fixture<IgcTileManagerComponent>(html`
<igc-tile-manager>
<igc-tile></igc-tile>
<igc-tile>
<igc-tile-header>
<span>Tile Header 1</span>
</igc-tile-header>
<p>Content 1</p>
</igc-tile>
<igc-tile>
<igc-tile-header>
<span>Tile Header 2</span>
</igc-tile-header>
<p>Content 2</p>
</igc-tile>
</igc-tile-manager>
`);
});

it('passes the a11y audit', async () => {
await expect(tileManager).dom.to.be.accessible();
await expect(tileManager).shadowDom.to.be.accessible();
});
// TODO: fails because of the POC styles
// it('passes the a11y audit', async () => {
// await expect(tileManager).dom.to.be.accessible();
// await expect(tileManager).shadowDom.to.be.accessible();
// });

it('is correctly initialized with its default component state', () => {
// TODO: Add checks for other settings when implemented
expect(tileManager.columnCount).to.equal(0);
expect(tileManager.rowCount).to.equal(0);
expect(tileManager.dragMode).to.equal('slide');
});

it('should render properly', () => {
expect(tileManager).dom.to.equal(
`<igc-tile-manager>
<igc-tile
draggable="true"
style="grid-area: span 3 / span 3;"
>
<igc-tile-header>
<span>Tile Header 1</span>
</igc-tile-header>
<p>Content 1</p>
</igc-tile>
<igc-tile
draggable="true"
style="grid-area: span 3 / span 3;"
>
<igc-tile-header>
<span>Tile Header 2</span>
</igc-tile-header>
<p>Content 2</p>
</igc-tile>
</igc-tile-manager>`
);

expect(tileManager).shadowDom.to.equal(
`<div
part="base"
style="grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); grid-template-rows: repeat(auto-fit, minmax(20px, 1fr));"
>
<slot></slot>
</div>`
);
});

it('should slot user provided content in the tile', () => {
const tiles = Array.from(
tileManager.querySelectorAll(IgcTileComponent.tagName)
);

expect(tiles[0]).dom.to.equal(
`<igc-tile draggable="true" style="grid-area: span 3 / span 3;">
<igc-tile-header>
<span>Tile Header 1</span>
</igc-tile-header>
<p>Content 1</p>
</igc-tile>`
);

expect(tiles[0]).shadowDom.to.equal(
`<div
id="base"
part=""
>
<div part="header">
<slot name="header"></slot>
</div>
<div part="content-container">
<slot></slot>
</div>
<div class="resize-handle"></div>
<div class="resizer right"></div>
<div class="resizer bottom"></div>
</div>`
);
});

it('should slot user provided content for tile header', () => {
// TODO: Add tests for the title, subtitle and actions slots
// if we keep them
const tileHeaders = Array.from(
tileManager.querySelectorAll(IgcTileHeaderComponent.tagName)
);

expect(tileHeaders[0]).dom.to.equal(
`<igc-tile-header>
<span>Tile Header 1</span>
</igc-tile-header>`
);

expect(tileHeaders[0]).shadowDom.to.equal(
`<section>
<header part="header">
<slot part="title" name="title"></slot>
<slot part="subtitle" name="subtitle"></slot>
<slot part="actions" name="actions"></slot>
</header>
<slot></slot>
</section>`
);
});
});

describe('Column spans', async () => {
@@ -117,6 +227,13 @@ describe('Tile Manager component', () => {
tileManager = await fixture<IgcTileManagerComponent>(createTileManager());
});

const dragAndDrop = async (draggedTile: Element, dropTarget: Element) => {
simulateDragStart(draggedTile);
simulateDrop(dropTarget);
simulateDragEnd(draggedTile);
await elementUpdated(tileManager);
};

it("should correctly fire 'dragStart' event", async () => {
const eventSpy = spy(tileManager, 'emitEvent');

@@ -128,12 +245,72 @@ describe('Tile Manager component', () => {
detail: tile,
});
});

it('should move the dragged tile before the drop target in slide mode', async () => {
const draggedTile = first(tileManager.tiles);
const dropTarget = last(tileManager.tiles);

expect(tileManager.dragMode).to.equal('slide');
expect(tileManager.tiles[0].id).to.equal('tile0');
expect(tileManager.tiles[3].id).to.equal('tile3');

await dragAndDrop(draggedTile, dropTarget);

expect(tileManager.tiles[0].id).to.equal('tile1');
expect(tileManager.tiles[3].id).to.equal('tile0');
});

it('should not change order when dragging a tile onto itself in slide mode', async () => {
const initialTiles = tileManager.tiles;
const tile = first(tileManager.tiles);

expect(tileManager.dragMode).to.equal('slide');
expect(tileManager.tiles[0].id).to.equal('tile0');
expect(tileManager.tiles[1].id).to.equal('tile1');

await dragAndDrop(tile, tile);

expect(tileManager.tiles).eql(initialTiles);
expect(tileManager.tiles[0].id).to.equal('tile0');
expect(tileManager.tiles[1].id).to.equal('tile1');
});

it('should swap the dragged tile with the drop target in swap mode', async () => {
const draggedTile = first(tileManager.tiles);
const dropTarget = last(tileManager.tiles);

expect(tileManager.dragMode).to.equal('slide');
expect(tileManager.tiles[0].id).to.equal('tile0');
expect(tileManager.tiles[4].id).to.equal('tile4');

tileManager.dragMode = 'swap';
await dragAndDrop(draggedTile, dropTarget);

expect(tileManager.tiles[0].id).to.equal('tile4');
expect(tileManager.tiles[4].id).to.equal('tile0');
});

it('should not change order when dragging a tile onto itself in swap mode', async () => {
const initialTiles = tileManager.tiles;
const tile = first(tileManager.tiles);

expect(tileManager.dragMode).to.equal('slide');
expect(tileManager.tiles[0].id).to.equal('tile0');
expect(tileManager.tiles[1].id).to.equal('tile1');

tileManager.dragMode = 'swap';
await dragAndDrop(tile, tile);

expect(tileManager.tiles).eql(initialTiles);
expect(tileManager.tiles[0].id).to.equal('tile0');
expect(tileManager.tiles[1].id).to.equal('tile1');
});
});

function createTileManager() {
const result = Array.from(range(5)).map(
(i) => html`
<igc-tile colSpan="5" rowSpan="5">
<igc-tile id="tile${i}" colSpan="5" rowSpan="5">
<igc-tile-header slot="header">
<h3 slot="title">Tile ${i + 1}</h3>
</igc-tile-header>