Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 20:38:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into bugfix/iframe

Browse Source
This commit is contained in:
DiamondThree
2022-08-04 14:21:56 +08:00
parent eab4fd2b8f bece3bf0dc
commit c777c3c71d
31 changed files with 544 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx
View File

@@ -12,6 +12,8 @@ type GridHandleProps = {
blockId: string;
enabledAddItem: boolean;
draggable: boolean;
alertHandleId: string;
onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
};
export const GridHandle: FC<GridHandleProps> = function ({
@@ -21,6 +23,8 @@ export const GridHandle: FC<GridHandleProps> = function ({
onDrag,
onMouseDown,
draggable,
alertHandleId,
onMouseEnter,
}) {
const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
const handleMouseDown: React.MouseEventHandler<HTMLDivElement> = e => {
@@ -44,16 +48,17 @@ export const GridHandle: FC<GridHandleProps> = function ({
editor.selectionManager.setActivatedNodeId(textBlock.id);
}
};
const handleMouseEnter: React.MouseEventHandler<HTMLDivElement> = e => {
onMouseEnter && onMouseEnter(e);
};
return (
<GridHandleContainer
style={
isMouseDown
? {
backgroundColor: '#3E6FDB',
}
: {}
}
isMouseDown={isMouseDown}
onMouseDown={handleMouseDown}
onMouseEnter={handleMouseEnter}
isAlert={alertHandleId === blockId}
>
{enabledAddItem ? (
<AddGridHandle
@@ -67,7 +72,10 @@ export const GridHandle: FC<GridHandleProps> = function ({
);
};
const GridHandleContainer = styled('div')(({ theme }) => ({
const GridHandleContainer = styled('div')<{
isMouseDown: boolean;
isAlert: boolean;
}>(({ theme, isMouseDown, isAlert }) => ({
position: 'relative',
width: '10px',
flexGrow: '0',
@@ -78,11 +86,15 @@ const GridHandleContainer = styled('div')(({ theme }) => ({
borderRadius: '1px',
backgroundClip: 'content-box',
' &:hover': {
backgroundColor: theme.affine.palette.primary,
backgroundColor: isAlert ? 'red' : theme.affine.palette.primary,
[`.${GRID_ADD_HANDLE_NAME}`]: {
display: 'block',
},
},
...(isMouseDown &&
(isAlert
? { backgroundColor: 'red' }
: { backgroundColor: theme.affine.palette.primary })),
}));
const AddGridHandle = styled('div')(({ theme }) => ({

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

@@ -31,6 +31,7 @@ export const Grid: FC<CreateView> = function (props) {
const gridItemCountRef = useRef<number>();
const originalLeftWidth = useRef<number>(GRID_ITEM_MIN_WIDTH);
const originalRightWidth = useRef<number>(GRID_ITEM_MIN_WIDTH);
const [alertHandleId, setAlertHandleId] = useState<string>(null);
const getLeftRightGridItemDomByIndex = (index: number) => {
const gridItems = Array.from(gridContainerRef.current?.children).filter(
@@ -117,7 +118,7 @@ export const Grid: FC<CreateView> = function (props) {
itemDom.style.width = width;
};
const handleDragGrid = (e: MouseEvent, index: number) => {
const handleDragGrid = async (e: MouseEvent, index: number) => {
setIsOnDrag(true);
window.getSelection().removeAllRanges();
if (!isSetMouseUp.current) {
@@ -165,39 +166,47 @@ export const Grid: FC<CreateView> = function (props) {
setItemWidth(leftGrid, newLeft);
setItemWidth(rightGrid, newRight);
updateDbWidth(leftBlockId, newLeft, rightBlockId, newRight);
[leftBlockId, rightBlockId].forEach(async blockId => {
if (await checkGridItemHasOverflow(blockId)) {
setAlertHandleId(leftBlockId);
} else {
setAlertHandleId(null);
}
});
}
}
};
const children = (
<>
{block.childrenIds.map((id, i) => {
return (
<GridItem
style={{
transition: isOnDrag
? 'none'
: 'all 0.2s ease-in-out',
}}
key={id}
className={GRID_ITEM_CLASS_NAME}
>
<RenderBlock hasContainer={false} blockId={id} />
<GridHandle
onDrag={event => handleDragGrid(event, i)}
editor={editor}
onMouseDown={event => handleMouseDown(event, i)}
blockId={id}
enabledAddItem={
block.childrenIds.length < MAX_ITEM_COUNT
}
draggable={i !== block.childrenIds.length - 1}
/>
</GridItem>
);
})}
</>
);
const checkGridItemHasOverflow = async (blockId: string) => {
let isOverflow = false;
const block = await editor.getBlockById(blockId);
if (block) {
const blockDom = block.dom;
if (blockDom) {
block.dom.style.overflow = 'scroll';
if (block.dom.clientWidth !== block.dom.scrollWidth) {
isOverflow = true;
}
blockDom.style.overflow = 'visible';
}
}
return isOverflow;
};
const handleHandleMouseEnter = (
e: React.MouseEvent<HTMLDivElement>,
index: number
) => {
const leftBlockId = block.childrenIds[index];
const rightBlockId = block.childrenIds[index + 1];
[leftBlockId, rightBlockId].forEach(async blockId => {
if (await checkGridItemHasOverflow(blockId)) {
setAlertHandleId(leftBlockId);
} else {
setAlertHandleId(null);
}
});
};
return (
<>
@@ -206,7 +215,35 @@ export const Grid: FC<CreateView> = function (props) {
ref={gridContainerRef}
isOnDrag={isOnDrag}
>
{children}
{block.childrenIds.map((id, i) => {
return (
<GridItem
style={{
transition: isOnDrag
? 'none'
: 'all 0.2s ease-in-out',
}}
key={id}
className={GRID_ITEM_CLASS_NAME}
>
<RenderBlock hasContainer={false} blockId={id} />
<GridHandle
onDrag={event => handleDragGrid(event, i)}
editor={editor}
onMouseDown={event => handleMouseDown(event, i)}
blockId={id}
enabledAddItem={
block.childrenIds.length < MAX_ITEM_COUNT
}
onMouseEnter={event =>
handleHandleMouseEnter(event, i)
}
alertHandleId={alertHandleId}
draggable={i !== block.childrenIds.length - 1}
/>
</GridItem>
);
})}
</GridContainer>
{isOnDrag
? ReactDOM.createPortal(<GridMask />, window.document.body)

2
libs/components/editor-blocks/src/blocks/group/GroupView.tsx
View File

@@ -60,7 +60,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
({ isSelect, theme }) => ({
background: theme.affine.palette.white,
border: '2px solid rgba(236,241,251,.5)',
padding: '15px 12px',
padding: `15px 16px 0 16px`,
borderRadius: '10px',
...(isSelect
? {