IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: SelectionArea: fixed tile view

Browse Source
This commit is contained in:
Nikita Gopienko 2023-02-07 16:56:15 +03:00
parent 68242853a7
commit 08e68ac6a5
2 changed files with 119 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/client/src/pages/Home/SelectionArea/index.js
View File

@ -3,12 +3,16 @@ import { isMobile } from "react-device-detect";
import { observer, inject } from "mobx-react";
import SelectionAreaComponent from "@docspace/components/selection-area";
const SelectionArea = ({
dragging,
viewAs,
setSelections,
getCountTilesInRow,
}) => {
const SelectionArea = (props) => {
const {
dragging,
viewAs,
setSelections,
getCountTilesInRow,
isRooms,
foldersLength,
} = props;
if (isMobile || dragging) return <></>;
const [countTilesInRow, setCountTilesInRow] = useState(getCountTilesInRow());
@ -36,9 +40,12 @@ const SelectionArea = ({
};
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;
return (
<SelectionAreaComponent
containerClass="section-scroll"
@ -49,17 +56,31 @@ const SelectionArea = ({
viewAs={viewAs}
itemHeight={itemHeight}
countTilesInRow={countTilesInRow}
isRooms={isRooms}
countRowsOfFolders={countRowsOfFolders}
countOfMissingTiles={countOfMissingTiles}
/>
);
};
export default inject(({ filesStore }) => {
const { dragging, viewAs, setSelections, getCountTilesInRow } = filesStore;
export default inject(({ filesStore, treeFoldersStore }) => {
const {
dragging,
viewAs,
setSelections,
getCountTilesInRow,
folders,
} = filesStore;
const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
const isRooms = isRoomsFolder || isArchiveFolder;
return {
dragging,
viewAs,
setSelections,
getCountTilesInRow,
isRooms,
foldersLength: folders.length,
};
})(observer(SelectionArea));

134
packages/components/selection-area/SelectionArea.js
View File

@ -1,7 +1,6 @@
import React, { createRef } from "react";
import { StyledSelectionArea } from "./StyledSelectionArea";
import { frames } from "./selector-helpers";
import { isDesktop } from "../utils/device";
class SelectionArea extends React.Component {
constructor(props) {
@ -35,64 +34,99 @@ class SelectionArea extends React.Component {
this.redrawSelectionArea();
});
isIntersects = (itemIndex) => {
isIntersects = (itemIndex, itemType) => {
const { right, left, bottom, top } = this.areaRect;
const { scrollTop } = this.scrollElement;
const { viewAs, countTilesInRow } = this.props;
const {
viewAs,
countTilesInRow,
countOfMissingTiles,
countRowsOfFolders,
} = this.props;
const itemHeight = this.props.itemHeight ?? this.elemRect.height;
let bTop, bBottom, bLeft, bRight;
let itemTop, itemBottom, itemLeft, itemRight;
// Tile view
if (viewAs === "tile") {
const marginLeft = 14;
const marginTop = 14;
const marginLeft = 14; // TODO:remove
const marginTop = 14; // TODO:this
let index = Math.trunc(+itemIndex / countTilesInRow);
if (itemIndex === 0) {
itemTop = this.elemRect.top - scrollTop;
itemBottom = this.elemRect.top + itemHeight - scrollTop;
} else if (itemType === "file") {
const folderHeight = 66 + marginTop; // TODO:remove
const fileHeight = 236 + marginTop; // TODO:this
const indexInRow = itemIndex % countTilesInRow;
const nextRow = Math.floor(
(itemIndex + countOfMissingTiles) / countTilesInRow
);
if (itemIndex == 0) {
bTop = this.elemRect.top - scrollTop;
bBottom = this.elemRect.top + itemHeight - scrollTop;
itemTop =
this.elemRect.top +
folderHeight * countRowsOfFolders +
fileHeight * (nextRow - countRowsOfFolders) -
scrollTop;
itemBottom =
this.elemRect.top +
folderHeight * countRowsOfFolders +
fileHeight * (nextRow - countRowsOfFolders) -
scrollTop +
fileHeight;
} else {
bTop = this.elemRect.top + (itemHeight + marginTop) * index - scrollTop;
bBottom =
const rowIndex = Math.trunc(itemIndex / countTilesInRow);
itemTop =
this.elemRect.top + (itemHeight + marginTop) * rowIndex - scrollTop;
itemBottom =
this.elemRect.top +
itemHeight +
(itemHeight + marginTop) * index -
(itemHeight + marginTop) * rowIndex -
scrollTop;
}
if (indexInRow == 0) {
bLeft = this.elemRect.left;
bRight = this.elemRect.left + this.elemRect.width;
// Set left/right for item
let fileIndex = itemIndex % countTilesInRow;
if (itemType === "file") {
fileIndex = (itemIndex + countOfMissingTiles) % countTilesInRow;
}
if (fileIndex == 0) {
itemLeft = this.elemRect.left;
itemRight = this.elemRect.left + this.elemRect.width;
} else {
bLeft =
this.elemRect.left + (this.elemRect.width + marginLeft) * indexInRow;
bRight =
itemLeft =
this.elemRect.left + (this.elemRect.width + marginLeft) * fileIndex;
itemRight =
this.elemRect.left +
(this.elemRect.width + marginLeft) * indexInRow +
(this.elemRect.width + marginLeft) * fileIndex +
this.elemRect.width;
}
} else {
// Table/row view
if (itemIndex == 0) {
bTop = this.elemRect.top + scrollTop;
bBottom = this.elemRect.top + itemHeight - scrollTop;
itemTop = this.elemRect.top + scrollTop;
itemBottom = this.elemRect.top + itemHeight - scrollTop;
} else {
bTop = this.elemRect.top + itemHeight * itemIndex - scrollTop;
bBottom =
itemTop = this.elemRect.top + itemHeight * itemIndex - scrollTop;
itemBottom =
this.elemRect.top + itemHeight + itemHeight * itemIndex - scrollTop;
}
}
if (viewAs === "tile") {
return right > bLeft && left < bRight && bottom > bTop && top < bBottom;
return (
right > itemLeft &&
left < itemRight &&
bottom > itemTop &&
top < itemBottom
);
} else {
return bottom > bTop && top < bBottom;
return bottom > itemTop && top < itemBottom;
}
};
@ -160,25 +194,28 @@ class SelectionArea extends React.Component {
const newSelected = [];
const { selectableClass, onMove, viewAs } = this.props;
const selectables1 = document.getElementsByClassName(selectableClass);
const selectableItems = document.getElementsByClassName(selectableClass);
// console.log("updateElementSelection", selectables);
const selectables = [...selectables1, ...this.array];
const selectables = [...selectableItems, ...this.array];
for (let i = 0; i < selectables.length; i++) {
const node = selectables[i];
const itemIndex =
const splitItem =
viewAs === "tile"
? node.getAttribute("value").split("_")[4]
? node.getAttribute("value").split("_")
: node
.getElementsByClassName("files-item")[0]
.getAttribute("value")
.split("_")[4];
.split("_");
const itemType = splitItem[0];
const itemIndex = splitItem[4];
// console.log("node", node);
// console.log("node", node.getBoundingClientRect());
const isIntersects = this.isIntersects(itemIndex);
const isIntersects = this.isIntersects(+itemIndex, itemType);
if (isIntersects) {
if (!this.selectableNodes.has(node)) {
@ -236,6 +273,7 @@ class SelectionArea extends React.Component {
scrollClass,
viewAs,
itemsContainerClass,
isRooms,
} = this.props;
if (e.target.closest(".not-selectable")) return;
@ -264,20 +302,27 @@ class SelectionArea extends React.Component {
if (!itemsContainer) return;
this.elemRect.top =
scroll.scrollTop + itemsContainer[0].getBoundingClientRect().top;
const itemsContainerRect = itemsContainer[0].getBoundingClientRect();
this.elemRect.left =
scroll.scrollLeft + itemsContainer[0].getBoundingClientRect().left;
if (!isRooms && viewAs === "tile") {
const folderTitleHeight = 33; // TODO: fix
this.elemRect.top =
scroll.scrollTop + itemsContainerRect.top + folderTitleHeight;
this.elemRect.left =
scroll.scrollLeft + itemsContainerRect.left + folderTitleHeight;
} else {
this.elemRect.top = scroll.scrollTop + itemsContainerRect.top;
this.elemRect.left = scroll.scrollLeft + itemsContainerRect.left;
}
if (viewAs === "tile") {
this.elemRect.width = itemsContainer[0]
const elemRect = itemsContainer[0]
.getElementsByClassName(selectableClass)[0]
.getBoundingClientRect().width;
.getBoundingClientRect();
this.elemRect.height = itemsContainer[0]
.getElementsByClassName(selectableClass)[0]
.getBoundingClientRect().height;
this.elemRect.width = elemRect.width;
this.elemRect.height = elemRect.height;
}
};
@ -309,8 +354,6 @@ class SelectionArea extends React.Component {
this.areaLocation.x2 = e.clientX;
this.areaLocation.y2 = e.clientY;
// console.log("onTapMove");
this.frame().next();
};
@ -348,6 +391,7 @@ class SelectionArea extends React.Component {
this.props.selectableClass
);
// TODO:
if (!this.array.length) {
this.array = selectables;
} else {