From 69b8d9b878c62688b00188740db1988e360d21ad Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 25 Aug 2023 17:06:24 +0300 Subject: [PATCH 1/3] Web: Components: SelectionArea: added dashboard support --- .../SelectionArea/AccountsSelectionArea.js | 3 - .../Home/SelectionArea/FilesSelectionArea.js | 57 ++++--- .../selection-area/SelectionArea.js | 142 +++++++++--------- 3 files changed, 110 insertions(+), 92 deletions(-) diff --git a/packages/client/src/pages/Home/SelectionArea/AccountsSelectionArea.js b/packages/client/src/pages/Home/SelectionArea/AccountsSelectionArea.js index 17beea983e..df6d59ac81 100644 --- a/packages/client/src/pages/Home/SelectionArea/AccountsSelectionArea.js +++ b/packages/client/src/pages/Home/SelectionArea/AccountsSelectionArea.js @@ -10,8 +10,6 @@ const SelectionArea = (props) => { setSelections(added, removed, clear); }; - const itemHeight = viewAs === "table" ? 49 : 59; - return isMobile ? ( <> ) : ( @@ -23,7 +21,6 @@ const SelectionArea = (props) => { itemClass="user-item" onMove={onMove} viewAs={viewAs} - itemHeight={itemHeight} /> ); }; diff --git a/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js b/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js index db63c4966e..62d9b643ff 100644 --- a/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js +++ b/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js @@ -11,6 +11,7 @@ const SelectionArea = (props) => { getCountTilesInRow, isRooms, foldersLength, + filesLength, isInfoPanelVisible, } = props; @@ -39,19 +40,11 @@ const SelectionArea = (props) => { }; const selectableClass = viewAs === "tile" ? "files-item" : "window-item"; - const itemHeight = viewAs === "table" ? 49 : viewAs === "row" ? 59 : null; - const countRowsOfFolders = Math.ceil(foldersLength / countTilesInRow); - const division = foldersLength % countTilesInRow; - const countOfMissingTiles = division ? countTilesInRow - division : 0; - - // const itemsContainer = document.getElementsByClassName(itemsContainerClass); - // const folderHeaderHeight = itemsContainer[0] - // .getElementsByClassName("folder_header")[0] - // .parentElement.getBoundingClientRect().height; - // const filesHeaderHeight = itemsContainer[0] - // .getElementsByClassName("files_header")[0] - // .parentElement.getBoundingClientRect().height; + const getCountOfMissingFilesTiles = (itemsLength) => { + const division = itemsLength % countTilesInRow; + return division ? countTilesInRow - division : 0; + }; return isMobile || dragging ? ( <> @@ -64,24 +57,43 @@ const SelectionArea = (props) => { itemClass="files-item" onMove={onMove} viewAs={viewAs} - itemHeight={itemHeight} countTilesInRow={countTilesInRow} isRooms={isRooms} - countRowsOfFolders={countRowsOfFolders} - countOfMissingTiles={countOfMissingTiles} - folderTileGap={12} - fileTileGap={14} - foldersTileHeight={66} - filesTileHeight={222} folderHeaderHeight={35} - filesHeaderHeight={countRowsOfFolders ? 46 : 0} + defaultHeaderHeight={46} + arrayTypes={[ + { + type: "dash", + rowCount: 1, + rowGap: 12, + countOfMissingTiles: 3, + }, + { + type: "file", + rowCount: Math.ceil(filesLength / countTilesInRow), + rowGap: 14, + countOfMissingTiles: getCountOfMissingFilesTiles(filesLength), + }, + { + type: "folder", + rowCount: Math.ceil(foldersLength / countTilesInRow), + rowGap: 12, + countOfMissingTiles: getCountOfMissingFilesTiles(foldersLength), + }, + ]} /> ); }; export default inject(({ auth, filesStore, treeFoldersStore }) => { - const { dragging, viewAs, setSelections, getCountTilesInRow, folders } = - filesStore; + const { + dragging, + viewAs, + setSelections, + getCountTilesInRow, + folders, + files, + } = filesStore; const { isRoomsFolder, isArchiveFolder } = treeFoldersStore; const { isVisible: isInfoPanelVisible } = auth.infoPanelStore; @@ -94,6 +106,7 @@ export default inject(({ auth, filesStore, treeFoldersStore }) => { getCountTilesInRow, isRooms, foldersLength: folders.length, + filesLength: files.length, isInfoPanelVisible, }; })(observer(SelectionArea)); diff --git a/packages/components/selection-area/SelectionArea.js b/packages/components/selection-area/SelectionArea.js index aadd2e107f..44b3136965 100644 --- a/packages/components/selection-area/SelectionArea.js +++ b/packages/components/selection-area/SelectionArea.js @@ -16,12 +16,20 @@ class SelectionArea extends React.Component { this.selectableNodes = new Set(); this.elemRect = {}; + this.arrayOfTypes = []; } componentDidMount() { document.addEventListener("mousedown", this.onTapStart); } + componentDidUpdate(prevProps) { + if (this.props.isRooms !== prevProps.isRooms) { + console.log("aaaaaaaaaaaaaaaaaa"); + this.arrayOfTypes = []; + } + } + componentWillUnmount() { document.removeEventListener("mousedown", this.onTapStart); } @@ -36,88 +44,76 @@ class SelectionArea extends React.Component { isIntersects = (itemIndex, itemType) => { const { right, left, bottom, top } = this.areaRect; const { scrollTop } = this.scrollElement; - const { - viewAs, - countTilesInRow, - countOfMissingTiles, - countRowsOfFolders, - folderTileGap, - fileTileGap, - foldersTileHeight, - filesTileHeight, - filesHeaderHeight, - theme, - } = this.props; + const { viewAs, countTilesInRow, defaultHeaderHeight, arrayTypes, theme } = + this.props; const isRtl = theme.interfaceDirection === "rtl"; - const itemHeight = this.props.itemHeight ?? this.elemRect.height; - let itemTop, itemBottom, itemLeft, itemRight; - // Tile view if (viewAs === "tile") { + let countOfMissingTiles = 0; + const itemGap = arrayTypes.find((x) => x.type === itemType).rowGap; + + // TOP/BOTTOM item position if (itemIndex === 0) { itemTop = this.elemRect.top - scrollTop; - itemBottom = itemTop + itemHeight; - } else if (itemType === "file") { - const folderHeight = foldersTileHeight + folderTileGap; - const fileHeight = filesTileHeight + fileTileGap; - - const nextRow = Math.floor( - (itemIndex + countOfMissingTiles) / countTilesInRow - ); - - itemTop = - this.elemRect.top + - folderHeight * countRowsOfFolders + - filesHeaderHeight + - fileHeight * (nextRow - countRowsOfFolders) - - scrollTop; - - itemBottom = itemTop + fileHeight - folderTileGap; + itemBottom = itemTop + this.elemRect.height; } else { - const rowIndex = Math.trunc(itemIndex / countTilesInRow); + const indexOfType = this.arrayOfTypes.findIndex( + (x) => x.type === itemType + ); + const headersCount = indexOfType === 0 ? 0 : indexOfType; - itemTop = - this.elemRect.top + - (itemHeight + folderTileGap) * rowIndex - - scrollTop; - itemBottom = itemTop + itemHeight; + itemTop = headersCount * defaultHeaderHeight; + const itemHeight = this.arrayOfTypes[indexOfType].itemHeight + itemGap; + + if (!headersCount) { + const rowIndex = Math.trunc(itemIndex / countTilesInRow); + + itemTop += this.elemRect.top + itemHeight * rowIndex - scrollTop; + itemBottom = itemTop + itemHeight - itemGap; + } else { + let prevRowsCount = 0; + + for (let i = 0; i < indexOfType; i++) { + const item = arrayTypes.find( + (x) => x.type === this.arrayOfTypes[i].type + ); + + countOfMissingTiles += item.countOfMissingTiles; + prevRowsCount += item.rowCount; + + itemTop += + (this.arrayOfTypes[i].itemHeight + item.rowGap) * item.rowCount; + } + + const nextRow = + Math.floor((itemIndex + countOfMissingTiles) / countTilesInRow) - + prevRowsCount; + + itemTop += this.elemRect.top + itemHeight * nextRow - scrollTop; + itemBottom = itemTop + itemHeight - itemGap; + } } - // Set left/right for item - let fileIndex = itemIndex % countTilesInRow; - if (itemType === "file") { - fileIndex = (itemIndex + countOfMissingTiles) % countTilesInRow; - } + let columnIndex = (itemIndex + countOfMissingTiles) % countTilesInRow; // Mirror fileIndex for RTL interface (2, 1, 0 => 0, 1, 2) if (isRtl && viewAs === "tile") { - fileIndex = countTilesInRow - 1 - fileIndex; + // columnIndex = countTilesInRow - 1 - columnIndex; } - if (fileIndex == 0) { + // LEFT/RIGHT item position + if (columnIndex == 0) { itemLeft = this.elemRect.left; itemRight = itemLeft + this.elemRect.width; } else { itemLeft = - this.elemRect.left + (this.elemRect.width + fileTileGap) * fileIndex; + this.elemRect.left + (this.elemRect.width + itemGap) * columnIndex; itemRight = itemLeft + this.elemRect.width; } - } else { - // Table/row view - if (itemIndex === 0) { - itemTop = this.elemRect.top - scrollTop; - itemBottom = itemTop + itemHeight; - } else { - itemTop = this.elemRect.top + itemHeight * itemIndex - scrollTop; - itemBottom = itemTop + itemHeight; - } - } - - if (viewAs === "tile") { return ( right > itemLeft && left < itemRight && @@ -125,6 +121,15 @@ class SelectionArea extends React.Component { top < itemBottom ); } else { + const itemHeight = this.elemRect.height; + if (itemIndex === 0) { + itemTop = this.elemRect.top - scrollTop; + itemBottom = itemTop + itemHeight; + } else { + itemTop = this.elemRect.top + itemHeight * itemIndex - scrollTop; + itemBottom = itemTop + itemHeight; + } + return bottom > itemTop && top < itemBottom; } }; @@ -211,8 +216,13 @@ class SelectionArea extends React.Component { const itemType = splitItem[0]; const itemIndex = splitItem[4]; - // console.log("node", node); - // console.log("node", node.getBoundingClientRect()); + //TODO: maybe do this line little bit better + if (this.arrayOfTypes.findIndex((x) => x.type === itemType) === -1) { + this.arrayOfTypes.push({ + type: itemType, + itemHeight: node.getBoundingClientRect().height, + }); + } const isIntersects = this.isIntersects(+itemIndex, itemType); @@ -330,14 +340,12 @@ class SelectionArea extends React.Component { this.elemRect.left = scroll.scrollLeft + itemsContainerRect.left; } - if (viewAs === "tile") { - const elemRect = itemsContainer[0] - .getElementsByClassName(selectableClass)[0] - .getBoundingClientRect(); + const elemRect = itemsContainer[0] + .getElementsByClassName(selectableClass)[0] + .getBoundingClientRect(); - this.elemRect.width = elemRect.width; - this.elemRect.height = elemRect.height; - } + this.elemRect.width = elemRect.width; + this.elemRect.height = elemRect.height; }; onMove = (e) => { From 50084f80df00a36adfbc94ee30620cda1b9dd38a Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 29 Aug 2023 14:54:14 +0300 Subject: [PATCH 2/3] Web: Components: SelectionArea: refactoring --- .../Home/SelectionArea/FilesSelectionArea.js | 36 +++++++++---------- .../selection-area/SelectionArea.js | 1 - 2 files changed, 16 insertions(+), 21 deletions(-) diff --git a/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js b/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js index 62d9b643ff..0ec7c04fd2 100644 --- a/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js +++ b/packages/client/src/pages/Home/SelectionArea/FilesSelectionArea.js @@ -46,6 +46,21 @@ const SelectionArea = (props) => { return division ? countTilesInRow - division : 0; }; + const arrayTypes = [ + { + type: "file", + rowCount: Math.ceil(filesLength / countTilesInRow), + rowGap: 14, + countOfMissingTiles: getCountOfMissingFilesTiles(filesLength), + }, + { + type: "folder", + rowCount: Math.ceil(foldersLength / countTilesInRow), + rowGap: 12, + countOfMissingTiles: getCountOfMissingFilesTiles(foldersLength), + }, + ]; + return isMobile || dragging ? ( <> ) : ( @@ -61,26 +76,7 @@ const SelectionArea = (props) => { isRooms={isRooms} folderHeaderHeight={35} defaultHeaderHeight={46} - arrayTypes={[ - { - type: "dash", - rowCount: 1, - rowGap: 12, - countOfMissingTiles: 3, - }, - { - type: "file", - rowCount: Math.ceil(filesLength / countTilesInRow), - rowGap: 14, - countOfMissingTiles: getCountOfMissingFilesTiles(filesLength), - }, - { - type: "folder", - rowCount: Math.ceil(foldersLength / countTilesInRow), - rowGap: 12, - countOfMissingTiles: getCountOfMissingFilesTiles(foldersLength), - }, - ]} + arrayTypes={arrayTypes} /> ); }; diff --git a/packages/components/selection-area/SelectionArea.js b/packages/components/selection-area/SelectionArea.js index 44b3136965..bc15d21bf0 100644 --- a/packages/components/selection-area/SelectionArea.js +++ b/packages/components/selection-area/SelectionArea.js @@ -25,7 +25,6 @@ class SelectionArea extends React.Component { componentDidUpdate(prevProps) { if (this.props.isRooms !== prevProps.isRooms) { - console.log("aaaaaaaaaaaaaaaaaa"); this.arrayOfTypes = []; } } From 6560116b7192c4afcf4358217e723346f42c18a8 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 29 Aug 2023 14:57:09 +0300 Subject: [PATCH 3/3] Web: Components: SelectionArea: fixed RTL --- packages/components/selection-area/SelectionArea.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/selection-area/SelectionArea.js b/packages/components/selection-area/SelectionArea.js index bc15d21bf0..45d037e411 100644 --- a/packages/components/selection-area/SelectionArea.js +++ b/packages/components/selection-area/SelectionArea.js @@ -100,7 +100,7 @@ class SelectionArea extends React.Component { // Mirror fileIndex for RTL interface (2, 1, 0 => 0, 1, 2) if (isRtl && viewAs === "tile") { - // columnIndex = countTilesInRow - 1 - columnIndex; + columnIndex = countTilesInRow - 1 - columnIndex; } // LEFT/RIGHT item position