Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-09-23 20:18:42 +08: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
libs/components/editor-blocks/src/blocks/grid/Grid.tsx
+24 -16
View File
@@ -26,14 +26,14 @@ export const Grid: FC<CreateView> = function (props) {
const { block, editor } = props; const { block, editor } = props;
const [isOnDrag, setIsOnDrag] = useState<boolean>(false); const [isOnDrag, setIsOnDrag] = useState<boolean>(false);
const isSetMouseUp = useRef<boolean>(false); const isSetMouseUp = useRef<boolean>(false);
const GridContainerRef = useRef<HTMLDivElement>(); const gridContainerRef = useRef<HTMLDivElement>();
const mouseStartPoint = useRef<Point>(); const mouseStartPoint = useRef<Point>();
const gridItemCountRef = useRef<number>(); const gridItemCountRef = useRef<number>();
const originalLeftWidth = useRef<number>(GRID_ITEM_MIN_WIDTH); const originalLeftWidth = useRef<number>(GRID_ITEM_MIN_WIDTH);
const originalRightWidth = useRef<number>(GRID_ITEM_MIN_WIDTH); const originalRightWidth = useRef<number>(GRID_ITEM_MIN_WIDTH);
const getLeftRightGridItemDomByIndex = (index: number) => { const getLeftRightGridItemDomByIndex = (index: number) => {
const gridItems = Array.from(GridContainerRef.current?.children).filter( const gridItems = Array.from(gridContainerRef.current?.children).filter(
child => { child => {
return child.classList.contains(GRID_ITEM_CLASS_NAME); return child.classList.contains(GRID_ITEM_CLASS_NAME);
} }
@@ -138,14 +138,14 @@ export const Grid: FC<CreateView> = function (props) {
leftGrid && leftGrid &&
rightGrid && rightGrid &&
mouseStartPoint.current && mouseStartPoint.current &&
GridContainerRef.current gridContainerRef.current
) { ) {
const currentMousePoint = new Point(e.clientX, e.clientY); const currentMousePoint = new Point(e.clientX, e.clientY);
const totalWidth = const totalWidth =
Number(removePercent(leftGrid.style.width)) + Number(removePercent(leftGrid.style.width)) +
Number(removePercent(rightGrid.style.width)); Number(removePercent(rightGrid.style.width));
const containerWidth = domToRect( const containerWidth = domToRect(
GridContainerRef.current gridContainerRef.current
).width; ).width;
const xDistance = const xDistance =
mouseStartPoint.current.xDistance(currentMousePoint); mouseStartPoint.current.xDistance(currentMousePoint);
@@ -203,7 +203,8 @@ export const Grid: FC<CreateView> = function (props) {
<> <>
<GridContainer <GridContainer
className={clsx({ [GRID_ON_DRAG_CLASS]: isOnDrag })} className={clsx({ [GRID_ON_DRAG_CLASS]: isOnDrag })}
ref={GridContainerRef} ref={gridContainerRef}
isOnDrag={isOnDrag}
> >
{children} {children}
</GridContainer> </GridContainer>
@@ -214,17 +215,24 @@ export const Grid: FC<CreateView> = function (props) {
); );
}; };
const GridContainer = styled('div')({ const GridContainer = styled('div')<{ isOnDrag: boolean }>(
position: 'relative', ({ isOnDrag, theme }) => ({
display: 'flex', position: 'relative',
alignItems: 'stretch', display: 'flex',
borderRadius: '10px', alignItems: 'stretch',
border: '1px solid #FFF', borderRadius: '10px',
minWidth: `${GRID_ITEM_MIN_WIDTH}%`, border: '1px solid #FFF',
[`&:hover .${GRID_ITEM_CONTENT_CLASS_NAME}`]: { minWidth: `${GRID_ITEM_MIN_WIDTH}%`,
borderColor: '#E0E6EB', [`&: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')({ const GridMask = styled('div')({
position: 'fixed', position: 'fixed',