fix(whiteboard): select text in whiteboard

This commit is contained in:
austaras 2022-08-08 17:22:43 +08:00 committed by DarkSky
parent a383e557ff
commit 4f0232cbbf
2 changed files with 14 additions and 7 deletions

View File

@ -21,9 +21,7 @@ export const ZoomBar: FC = () => {
const zoom = app.useStore(zoomSelector); const zoom = app.useStore(zoomSelector);
return ( return (
<div <ZoomBarContainer>
style={{ position: 'absolute', right: 10, bottom: 10, zIndex: 200 }}
>
<MiniMapContainer> <MiniMapContainer>
<MiniMap /> <MiniMap />
</MiniMapContainer> </MiniMapContainer>
@ -52,10 +50,18 @@ export const ZoomBar: FC = () => {
<UnfoldMoreIcon style={{ transform: 'rotateZ(90deg)' }} /> <UnfoldMoreIcon style={{ transform: 'rotateZ(90deg)' }} />
</IconButton> </IconButton>
</div> </div>
</div> </ZoomBarContainer>
); );
}; };
const ZoomBarContainer = styled('div')({
position: 'absolute',
right: 10,
bottom: 10,
zIndex: 200,
userSelect: 'none',
});
const MiniMapContainer = styled('div')({ const MiniMapContainer = styled('div')({
display: 'flex', display: 'flex',
justifyContent: 'flex-end', justifyContent: 'flex-end',

View File

@ -133,6 +133,7 @@ export class EditorUtil extends TDShapeUtil<T, E> {
<HTMLContainer ref={ref} {...events}> <HTMLContainer ref={ref} {...events}>
<Container <Container
ref={containerRef} ref={containerRef}
editing={isEditing}
onPointerDown={stopPropagation} onPointerDown={stopPropagation}
onMouseEnter={activateIfEditing} onMouseEnter={activateIfEditing}
onDragEnter={activateIfEditing} onDragEnter={activateIfEditing}
@ -248,15 +249,15 @@ export class EditorUtil extends TDShapeUtil<T, E> {
const PADDING = 16; const PADDING = 16;
// const MIN_CONTAINER_HEIGHT = 200; // const MIN_CONTAINER_HEIGHT = 200;
const Container = styled('div')({ const Container = styled('div')<{ editing: boolean }>(({ editing }) => ({
pointerEvents: 'all', pointerEvents: 'all',
position: 'relative', position: 'relative',
width: '100%', width: '100%',
}); userSelect: editing ? 'unset' : 'none',
}));
const Mask = styled('div')({ const Mask = styled('div')({
position: 'absolute', position: 'absolute',
userSelect: 'none',
top: 0, top: 0,
left: 0, left: 0,
bottom: 0, bottom: 0,