1 | import { __assign, __spreadArray, __read } from 'tslib';
|
---|
2 | import { interceptTiles } from '../table-utils/tiles-table.js';
|
---|
3 | import { pointToLocation, tableSize, trimLocation, newTable, placeInTable, fitsInTable, findFirstFittingPosition } from '../table-utils/table.js';
|
---|
4 | import { getTileTouchPoint } from '../table-utils/tiles.js';
|
---|
5 |
|
---|
6 | /**
|
---|
7 | * Calculates the new table configuration while the tiles are moving
|
---|
8 | * @param offsetX
|
---|
9 | * @param offsetY
|
---|
10 | * @returns
|
---|
11 | */
|
---|
12 | var dragMove = {
|
---|
13 | onDragMove: function (_a) {
|
---|
14 | var offsetX = _a.offsetX, offsetY = _a.offsetY, config = _a.config, state = _a.state, table = _a.table, canAcceptDrop = _a.canAcceptDrop;
|
---|
15 | var elementHeight = config.elementHeight, elementWidth = config.elementWidth, columns = config.columns;
|
---|
16 | var draggingTile = state.draggingTile, dragPosition = state.dragPosition, dropTargetTile = state.dropTargetTile, droppable = state.droppable, start = state.start, tiles = state.tiles;
|
---|
17 | if (!draggingTile || !dragPosition || !start || !tiles)
|
---|
18 | return;
|
---|
19 | var x = start.col * elementWidth + offsetX + dragPosition.x;
|
---|
20 | var y = start.row * elementHeight + offsetY + dragPosition.y;
|
---|
21 | //find the position of the tile in the grid
|
---|
22 | var cell = pointToLocation(table, x, y, config);
|
---|
23 | var tsize = tableSize(table);
|
---|
24 | //console.log('data:', { x, y, cell, start, draggingTile });
|
---|
25 | //try to see if we're touching a hot point
|
---|
26 | if (cell.col <= tsize.cols && cell.row <= tsize.rows) {
|
---|
27 | //find the touched tile within the move
|
---|
28 | var touchedTile = table[cell.row][cell.col];
|
---|
29 | if (!touchedTile || touchedTile.data === draggingTile.data)
|
---|
30 | return;
|
---|
31 | //get the touchpoint of the touched tile
|
---|
32 | var touchPoint = getTileTouchPoint(draggingTile, touchedTile, {
|
---|
33 | x: x,
|
---|
34 | y: y,
|
---|
35 | }, config);
|
---|
36 | if (!touchPoint)
|
---|
37 | return;
|
---|
38 | //console.log('HIT TOUCHPOINT', { table, tiles });
|
---|
39 | if (touchPoint === 'center') {
|
---|
40 | if (touchedTile === dropTargetTile)
|
---|
41 | return {
|
---|
42 | dropTargetTile: dropTargetTile,
|
---|
43 | droppable: droppable,
|
---|
44 | };
|
---|
45 | if (canAcceptDrop(draggingTile, touchedTile))
|
---|
46 | return { dropTargetTile: touchedTile, droppable: true };
|
---|
47 | return;
|
---|
48 | }
|
---|
49 | //a touchpoint has been identified
|
---|
50 | var rowDisplacement = Math.floor(dragPosition.y / elementHeight);
|
---|
51 | var colDisplacement = Math.floor(dragPosition.x / elementWidth);
|
---|
52 | //calculate the new dragged tile location. This depends on the touched side.
|
---|
53 | var newDragTileLocation = trimLocation(table, touchPoint === 'right'
|
---|
54 | ? {
|
---|
55 | col: cell.col - (draggingTile.colSpan - 1),
|
---|
56 | row: cell.row - rowDisplacement,
|
---|
57 | }
|
---|
58 | : touchPoint === 'left'
|
---|
59 | ? {
|
---|
60 | col: cell.col,
|
---|
61 | row: cell.row - rowDisplacement,
|
---|
62 | }
|
---|
63 | : touchPoint === 'top'
|
---|
64 | ? {
|
---|
65 | col: cell.col - colDisplacement,
|
---|
66 | row: cell.row,
|
---|
67 | }
|
---|
68 | : /*touchPoint === 'bottom'*/ {
|
---|
69 | col: cell.col - colDisplacement,
|
---|
70 | row: cell.row - (draggingTile.rowSpan - 1),
|
---|
71 | });
|
---|
72 | /*
|
---|
73 | console.log(
|
---|
74 | 'Effective location:',
|
---|
75 | newDragTileLocation,
|
---|
76 | touchedTile,
|
---|
77 | touchPoint,
|
---|
78 | state
|
---|
79 | );
|
---|
80 | */
|
---|
81 | //identify all hover tiles (excluding ourselves)
|
---|
82 | var hoverTiles_1 = interceptTiles(table, newDragTileLocation.row, newDragTileLocation.col, draggingTile.rowSpan, draggingTile.colSpan).filter(function (tiles) { return tiles.data !== draggingTile.data; });
|
---|
83 | if (!hoverTiles_1.length) {
|
---|
84 | return;
|
---|
85 | }
|
---|
86 | //console.log('hover tiles:', hoverTiles);
|
---|
87 | //create a table with the remaining tiles
|
---|
88 | var otherTiles = tiles.filter(function (tile) {
|
---|
89 | return tile.data !== draggingTile.data &&
|
---|
90 | !hoverTiles_1.find(function (t) { return t.data === tile.data; });
|
---|
91 | });
|
---|
92 | var newDraggingTile = __assign(__assign({}, draggingTile), newDragTileLocation);
|
---|
93 | var checkTable_1 = newTable(tsize.rows + draggingTile.rowSpan - 1, tsize.cols, 0);
|
---|
94 | otherTiles.forEach(function (tile) {
|
---|
95 | checkTable_1 = placeInTable(tile, 1, checkTable_1);
|
---|
96 | });
|
---|
97 | /*
|
---|
98 | console.log('checktable dump:');
|
---|
99 | checkTable.forEach(row => {
|
---|
100 | console.log(row.join(''));
|
---|
101 | });
|
---|
102 | */
|
---|
103 | //try to fit the dragging tile in the current location
|
---|
104 | if (!fitsInTable(newDraggingTile, checkTable_1)) {
|
---|
105 | //console.log('new drag tile does not fit');
|
---|
106 | return;
|
---|
107 | }
|
---|
108 | checkTable_1 = placeInTable(newDraggingTile, 1, checkTable_1);
|
---|
109 | /*
|
---|
110 | console.log('checktable dump with drag tile:');
|
---|
111 | checkTable.forEach(row => {
|
---|
112 | console.log(row.join(''));
|
---|
113 | });
|
---|
114 | */
|
---|
115 | var repositionedHoverTiles_1 = [];
|
---|
116 | if (hoverTiles_1.find(function (tile) {
|
---|
117 | var newPosition = findFirstFittingPosition(tile, checkTable_1);
|
---|
118 | //console.log('fitting', { tile, newPosition });
|
---|
119 | if (!newPosition)
|
---|
120 | return true;
|
---|
121 | var repositionedTile = __assign(__assign({}, tile), newPosition);
|
---|
122 | repositionedHoverTiles_1.push(repositionedTile);
|
---|
123 | checkTable_1 = placeInTable(repositionedTile, 1, checkTable_1);
|
---|
124 | return false;
|
---|
125 | })) {
|
---|
126 | //console.log('repositioning failed');
|
---|
127 | return;
|
---|
128 | }
|
---|
129 | var reorderedTiles = __spreadArray(__spreadArray(__spreadArray([], __read(repositionedHoverTiles_1)), __read(otherTiles)), [
|
---|
130 | newDraggingTile,
|
---|
131 | ]).sort(function (a, b) { return a.col + a.row * columns - (b.col + b.row * columns); });
|
---|
132 | return {
|
---|
133 | draggingTile: newDraggingTile,
|
---|
134 | tiles: reorderedTiles,
|
---|
135 | };
|
---|
136 | }
|
---|
137 | },
|
---|
138 | onDragEnd: function () { return undefined; },
|
---|
139 | };
|
---|
140 |
|
---|
141 | export default dragMove;
|
---|
142 | //# sourceMappingURL=move.js.map
|
---|