Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 04:48:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: fix grid drag border

Browse Source
This commit is contained in:
SaikaSakura
2022-07-28 19:18:24 +08:00
parent 142523337b
commit 57bbf5aebe
1 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
libs/components/editor-blocks/src/blocks/grid/Grid.tsx
View File

@@ -26,14 +26,14 @@ export const Grid: FC<CreateView> = function (props) {
const { block, editor } = props;
const [isOnDrag, setIsOnDrag] = useState<boolean>(false);
const isSetMouseUp = useRef<boolean>(false);
const GridContainerRef = useRef<HTMLDivElement>();
const gridContainerRef = useRef<HTMLDivElement>();
const mouseStartPoint = useRef<Point>();
const gridItemCountRef = useRef<number>();
const originalLeftWidth = useRef<number>(GRID_ITEM_MIN_WIDTH);
const originalRightWidth = useRef<number>(GRID_ITEM_MIN_WIDTH);
const getLeftRightGridItemDomByIndex = (index: number) => {
const gridItems = Array.from(GridContainerRef.current?.children).filter(
const gridItems = Array.from(gridContainerRef.current?.children).filter(
child => {
return child.classList.contains(GRID_ITEM_CLASS_NAME);
}
@@ -138,14 +138,14 @@ export const Grid: FC<CreateView> = function (props) {
leftGrid &&
rightGrid &&
mouseStartPoint.current &&
GridContainerRef.current
gridContainerRef.current
) {
const currentMousePoint = new Point(e.clientX, e.clientY);
const totalWidth =
Number(removePercent(leftGrid.style.width)) +
Number(removePercent(rightGrid.style.width));
const containerWidth = domToRect(
GridContainerRef.current
gridContainerRef.current
).width;
const xDistance =
mouseStartPoint.current.xDistance(currentMousePoint);
@@ -203,7 +203,8 @@ export const Grid: FC<CreateView> = function (props) {
<>
<GridContainer
className={clsx({ [GRID_ON_DRAG_CLASS]: isOnDrag })}
ref={GridContainerRef}
ref={gridContainerRef}
isOnDrag={isOnDrag}
>
{children}
</GridContainer>
@@ -214,17 +215,24 @@ export const Grid: FC<CreateView> = function (props) {
);
};
const GridContainer = styled('div')({
position: 'relative',
display: 'flex',
alignItems: 'stretch',
borderRadius: '10px',
border: '1px solid #FFF',
minWidth: `${GRID_ITEM_MIN_WIDTH}%`,
[`&:hover .${GRID_ITEM_CONTENT_CLASS_NAME}`]: {
borderColor: '#E0E6EB',
},
});
const GridContainer = styled('div')<{ isOnDrag: boolean }>(
({ isOnDrag, theme }) => ({
position: 'relative',
display: 'flex',
alignItems: 'stretch',
borderRadius: '10px',
border: '1px solid #FFF',
minWidth: `${GRID_ITEM_MIN_WIDTH}%`,
[`&:hover .${GRID_ITEM_CONTENT_CLASS_NAME}`]: {
borderColor: theme.affine.palette.borderColor,
},
...(isOnDrag && {
[`& .${GRID_ITEM_CONTENT_CLASS_NAME}`]: {
borderColor: theme.affine.palette.borderColor,
},
}),
})
);
const GridMask = styled('div')({
position: 'fixed',