Skip to content

Commit

Permalink
added dnd between layers
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbondyra
mbondyra committed Jun 17, 2022
1 parent 28915d2 commit e7c69ba
Show file tree
Hide file tree
Showing 43 changed files with 5,370 additions and 3,378 deletions.
14 changes: 12 additions & 2 deletions test/functional/services/common/browser.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ class BrowserService extends FtrService {
* @param {string} to html selector
* @return {Promise<void>}
*/
public async html5DragAndDrop(from: string, to: string) {
public async html5DragAndDrop(from: string, to: string, through?: string) {
await this.execute(
`
function createEvent(typeOfEvent) {
Expand Down Expand Up @@ -291,6 +291,15 @@ class BrowserService extends FtrService {
const dragStartEvent = createEvent('dragstart');
dispatchEvent(origin, dragStartEvent);
const through = arguments[2] && document.querySelector(arguments[2]);
if (through){
setTimeout(() => {
const dragOverEvent = createEvent('dragover');
dispatchEvent(through, dragOverEvent, dragStartEvent.dataTransfer);
}, 50);
}
setTimeout(() => {
const dropEvent = createEvent('drop');
const target = document.querySelector(arguments[1]);
Expand All @@ -300,7 +309,8 @@ class BrowserService extends FtrService {
}, 100);
`,
from,
to
to,
through
);
// wait for 150ms to make sure the script has run
await setTimeoutAsync(150);
Expand Down
61 changes: 39 additions & 22 deletions x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,14 @@ describe('DragDrop', () => {

const value = {
id: '1',
humanData: { label: 'hello', groupLabel: 'X', position: 1, canSwap: true, canDuplicate: true },
humanData: {
label: 'hello',
groupLabel: 'X',
position: 1,
canSwap: true,
canDuplicate: true,
layerNumber: 0,
},
};

test('renders if nothing is being dragged', () => {
Expand Down Expand Up @@ -205,7 +212,7 @@ describe('DragDrop', () => {
order={[2, 0, 1, 0]}
onDrop={(x: unknown) => {}}
dropTypes={undefined}
value={{ id: '2', humanData: { label: 'label2' } }}
value={{ id: '2', humanData: { label: 'label2', layerNumber: 0 } }}
>
<button>Hello!</button>
</DragDrop>
Expand All @@ -231,7 +238,7 @@ describe('DragDrop', () => {
}}
>
<DragDrop
value={{ id: '3', humanData: { label: 'ignored' } }}
value={{ id: '3', humanData: { label: 'ignored', layerNumber: 0 } }}
draggable={true}
order={[2, 0, 1, 0]}
>
Expand Down Expand Up @@ -286,7 +293,7 @@ describe('DragDrop', () => {
registerDropTarget={jest.fn()}
>
<DragDrop
value={{ id: '3', humanData: { label: 'ignored' } }}
value={{ id: '3', humanData: { label: 'ignored', layerNumber: 0 } }}
draggable={true}
order={[2, 0, 1, 0]}
>
Expand Down Expand Up @@ -329,7 +336,7 @@ describe('DragDrop', () => {
draggable: true,
value: {
id: '1',
humanData: { label: 'Label1', position: 1 },
humanData: { label: 'Label1', position: 1, layerNumber: 0 },
},
children: '1',
order: [2, 0, 0, 0],
Expand All @@ -341,7 +348,7 @@ describe('DragDrop', () => {
value: {
id: '2',

humanData: { label: 'label2', position: 1 },
humanData: { label: 'label2', position: 1, layerNumber: 0 },
},
onDrop,
dropTypes: ['move_compatible'] as DropType[],
Expand All @@ -358,6 +365,7 @@ describe('DragDrop', () => {
groupLabel: 'Y',
canSwap: true,
canDuplicate: true,
layerNumber: 0,
},
},
onDrop,
Expand All @@ -373,7 +381,7 @@ describe('DragDrop', () => {
dragType: 'move' as 'copy' | 'move',
value: {
id: '4',
humanData: { label: 'label4', position: 2, groupLabel: 'Y' },
humanData: { label: 'label4', position: 2, groupLabel: 'Y', layerNumber: 0 },
},
order: [2, 0, 2, 1],
},
Expand Down Expand Up @@ -415,11 +423,11 @@ describe('DragDrop', () => {
});
keyboardHandler.simulate('keydown', { key: 'Enter' });
expect(setA11yMessage).toBeCalledWith(
`You're dragging Label1 from at position 1 over label3 from Y group at position 1. Press space or enter to replace label3 with Label1. Hold alt or option to duplicate. Hold shift to swap.`
`You're dragging Label1 from at position 1 in layer 0 over label3 from Y group at position 1 in layer 0. Press space or enter to replace label3 with Label1. Hold alt or option to duplicate. Hold shift to swap.`
);
expect(setActiveDropTarget).toBeCalledWith(undefined);
expect(onDrop).toBeCalledWith(
{ humanData: { label: 'Label1', position: 1 }, id: '1' },
{ humanData: { label: 'Label1', position: 1, layerNumber: 0 }, id: '1' },
'move_compatible'
);
});
Expand Down Expand Up @@ -474,7 +482,7 @@ describe('DragDrop', () => {
draggable: true,
value: {
id: '1',
humanData: { label: 'Label1', position: 1 },
humanData: { label: 'Label1', position: 1, layerNumber: 0 },
},
children: '1',
order: [2, 0, 0, 0],
Expand All @@ -486,7 +494,7 @@ describe('DragDrop', () => {
value: {
id: '2',

humanData: { label: 'label2', position: 1 },
humanData: { label: 'label2', position: 1, layerNumber: 0 },
},
onDrop,
dropTypes: ['move_compatible'] as DropType[],
Expand Down Expand Up @@ -533,7 +541,7 @@ describe('DragDrop', () => {
component = mount(
<ChildDragDropProvider
setA11yMessage={jest.fn()}
dragging={{ id: '1', humanData: { label: 'Label1' } }}
dragging={{ id: '1', humanData: { label: 'Label1', layerNumber: 0 } }}
setDragging={jest.fn()}
setActiveDropTarget={setActiveDropTarget}
activeDropTarget={activeDropTarget}
Expand All @@ -543,7 +551,7 @@ describe('DragDrop', () => {
registerDropTarget={jest.fn()}
>
<DragDrop
value={{ id: '3', humanData: { label: 'ignored' } }}
value={{ id: '3', humanData: { label: 'ignored', layerNumber: 0 } }}
draggable={true}
order={[2, 0, 1, 0]}
>
Expand Down Expand Up @@ -629,18 +637,24 @@ describe('DragDrop', () => {

component.find('SingleDropInner').at(0).simulate('dragover');
component.find('SingleDropInner').at(0).simulate('drop');
expect(onDrop).toBeCalledWith({ humanData: { label: 'Label1' }, id: '1' }, 'move_compatible');
expect(onDrop).toBeCalledWith(
{ humanData: { label: 'Label1', layerNumber: 0 }, id: '1' },
'move_compatible'
);

component.find('SingleDropInner').at(1).simulate('dragover');
component.find('SingleDropInner').at(1).simulate('drop');
expect(onDrop).toBeCalledWith(
{ humanData: { label: 'Label1' }, id: '1' },
{ humanData: { label: 'Label1', layerNumber: 0 }, id: '1' },
'duplicate_compatible'
);

component.find('SingleDropInner').at(2).simulate('dragover');
component.find('SingleDropInner').at(2).simulate('drop');
expect(onDrop).toBeCalledWith({ humanData: { label: 'Label1' }, id: '1' }, 'swap_compatible');
expect(onDrop).toBeCalledWith(
{ humanData: { label: 'Label1', layerNumber: 0 }, id: '1' },
'swap_compatible'
);
});

test('pressing Alt or Shift when dragging over the main drop target sets extra drop target as active', () => {
Expand Down Expand Up @@ -693,7 +707,7 @@ describe('DragDrop', () => {
draggable: true,
value: {
id: '1',
humanData: { label: 'Label1', position: 1 },
humanData: { label: 'Label1', position: 1, layerNumber: 0 },
},
children: '1',
order: [2, 0, 0, 0],
Expand All @@ -705,7 +719,7 @@ describe('DragDrop', () => {
value: {
id: '2',

humanData: { label: 'label2', position: 1 },
humanData: { label: 'label2', position: 1, layerNumber: 0 },
},
onDrop,
dropTypes: ['move_compatible', 'duplicate_compatible', 'swap_compatible'] as DropType[],
Expand All @@ -716,7 +730,7 @@ describe('DragDrop', () => {
dragType: 'move' as const,
value: {
id: '3',
humanData: { label: 'label3', position: 1, groupLabel: 'Y' },
humanData: { label: 'label3', position: 1, groupLabel: 'Y', layerNumber: 0 },
},
onDrop,
dropTypes: ['replace_compatible'] as DropType[],
Expand All @@ -734,6 +748,7 @@ describe('DragDrop', () => {
humanData: {
label: 'label2',
position: 1,
layerNumber: 0,
},
id: '2',
onDrop,
Expand All @@ -743,6 +758,7 @@ describe('DragDrop', () => {
humanData: {
label: 'label2',
position: 1,
layerNumber: 0,
},
id: '2',
onDrop,
Expand All @@ -753,6 +769,7 @@ describe('DragDrop', () => {
groupLabel: 'Y',
label: 'label3',
position: 1,
layerNumber: 0,
},
id: '3',
onDrop,
Expand Down Expand Up @@ -942,18 +959,18 @@ describe('DragDrop', () => {
const items = [
{
id: '1',
humanData: { label: 'Label1', position: 1, groupLabel: 'X' },
humanData: { label: 'Label1', position: 1, groupLabel: 'X', layerNumber: 0 },
onDrop,
draggable: true,
},
{
id: '2',
humanData: { label: 'label2', position: 2, groupLabel: 'X' },
humanData: { label: 'label2', position: 2, groupLabel: 'X', layerNumber: 0 },
onDrop,
},
{
id: '3',
humanData: { label: 'label3', position: 3, groupLabel: 'X' },
humanData: { label: 'label3', position: 3, groupLabel: 'X', layerNumber: 0 },
onDrop,
},
];
Expand Down
Loading

0 comments on commit e7c69ba

Please sign in to comment.