source: imaps-frontend/node_modules/react-tiles-dnd/esm/tile-layout/strategies/move.js@ d565449

main
Last change on this file since d565449 was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 6.5 KB
Line 
1import { __assign, __spreadArray, __read } from 'tslib';
2import { interceptTiles } from '../table-utils/tiles-table.js';
3import { pointToLocation, tableSize, trimLocation, newTable, placeInTable, fitsInTable, findFirstFittingPosition } from '../table-utils/table.js';
4import { 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 */
12var 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
141export default dragMove;
142//# sourceMappingURL=move.js.map
Note: See TracBrowser for help on using the repository browser.