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

feat: grid item style

Browse Source
This commit is contained in:
SaikaSakura
2022-07-28 18:16:43 +08:00
parent cfe9d5a82d
commit 142523337b
6 changed files with 87 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
libs/components/editor-core/src/Selection.tsx
View File

@@ -16,11 +16,12 @@ interface SelectionProps {
editor: BlockEditor;
}
const RectContainer = styled('div')({
backgroundColor: 'rgba(152, 172, 189, 0.1)',
position: 'absolute',
zIndex: 99,
});
const DIRECTION_VALUE_MAP = {
right: -1,
left: 1,
down: -1,
up: 1,
} as const;
type VerticalTypes = 'up' | 'down' | null;
type HorizontalTypes = 'left' | 'right' | null;
@@ -106,7 +107,7 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
const startPointRef = useRef<Point>();
const endPointRef = useRef<Point>();
const [rect, setRect] = useState<Rect>(Rect.fromLTRB(0, 0, 0, 0));
const startPointAtBlock = useRef<boolean>(false);
const startPointBlock = useRef<AsyncBlock | null>();
const mouseType = useRef<MouseType>('up');
const scrollContainerRect = useRef<Rect>();
@@ -116,9 +117,12 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
) => {
await selectionManager.setSelectedNodesIds([]);
startPointRef.current = new Point(event.clientX, event.clientY);
startPointAtBlock.current =
(await selectionManager.rootDomReady()) &&
(await selectionManager.isPointInBlocks(startPointRef.current));
startPointBlock.current =
((await selectionManager.rootDomReady()) &&
(await selectionManager.getBlockByPoint(
startPointRef.current
))) ||
null;
mouseType.current = 'down';
if (scrollManager.scrollContainer) {
scrollContainerRect.current = domToRect(
@@ -130,11 +134,35 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
const onMouseMove = async (
event: React.MouseEvent<HTMLDivElement, MouseEvent>
) => {
if (mouseType.current === 'down' && !startPointAtBlock.current) {
event.preventDefault();
if (mouseType.current === 'down') {
endPointRef.current = new Point(event.clientX, event.clientY);
if (startPointBlock.current) {
const endpointBlock =
await selectionManager.getBlockByPoint(
endPointRef.current
);
// TODO: delete after multi-block text selection done
// if drag out of startblock change selection type to block
if (endpointBlock?.id === startPointBlock.current.id) {
return;
}
const selection = window.getSelection();
if (
selection &&
selection.rangeCount > 0 &&
editor.blockHelper.hasBlockTextUtils(
startPointBlock.current.id
)
) {
// slate will run hooks reset selection unless mouseup,
// remove slate selection by textUtils
editor.blockHelper.setBlockBlur(
startPointBlock.current.id
);
}
event.preventDefault();
}
setShow(true);
if (startPointRef.current) {
await setSelectedNodesByPoints(
editor,
@@ -177,7 +205,7 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
const onMouseUp = () => {
mouseType.current = 'up';
startPointAtBlock.current = false;
startPointBlock.current = null;
setShow(false);
scrollManager.stopAutoScroll();
};
@@ -200,24 +228,14 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
scrollManager.scrollContainer &&
scrollContainerRect.current
) {
const xValue =
direction[0] === 'right'
? -1
: direction[0] === 'left'
? 1
: 0;
const yValue =
direction[1] === 'down'
? -1
: direction[1] === 'up'
? 1
: 0;
const xSign = DIRECTION_VALUE_MAP[direction[0]] || 0;
const ySign = DIRECTION_VALUE_MAP[direction[1]] || 0;
startPointRef.current = new Point(
startPointRef.current.x +
xValue * scrollManager.scrollMoveOffset,
xSign * scrollManager.scrollMoveOffset,
startPointRef.current.y +
yValue * scrollManager.scrollMoveOffset
ySign * scrollManager.scrollMoveOffset
);
setSelectedNodesByPoints(
@@ -260,3 +278,9 @@ export const SelectionRect = forwardRef<SelectionRef, SelectionProps>(
) : null;
}
);
const RectContainer = styled('div')({
backgroundColor: 'rgba(62, 111, 219, 0.1)',
position: 'absolute',
zIndex: 99,
});

4
libs/components/editor-core/src/editor/block/block-helper.ts
View File

@@ -57,6 +57,10 @@ export class BlockHelper {
delete this._blockTextUtilsMap[blockId];
}
public hasBlockTextUtils(blockId: string) {
return !!this._blockTextUtilsMap[blockId];
}
/**
*
* get block serializer text by block id

15
libs/components/editor-core/src/editor/selection/selection.ts
View File

@@ -292,14 +292,22 @@ export class SelectionManager implements VirgoSelection {
const rootBlock = await this._editor.getBlockById(rootBlockId);
return Boolean(rootBlock?.dom);
}
// TODO: Maybe just check root block
public async isPointInBlocks(point: Point) {
public async getBlockByPoint(point: Point) {
const blockList = await this._editor.getBlockList();
return blockList.some(block => {
const outBlockList = blockList.filter(block => {
return (
Boolean(block.dom) && domToRect(block.dom).isContainPoint(point)
);
});
return outBlockList.length
? outBlockList[outBlockList.length - 1]
: undefined;
}
public async isPointInBlocks(point: Point) {
return Boolean(this.getBlockByPoint(point));
}
/**
@@ -362,7 +370,6 @@ export class SelectionManager implements VirgoSelection {
}
}
}
console.log({ selectedNodes });
return selectedNodes;
}