Compare commits

...

2 Commits

Author SHA1 Message Date
Yi
d688bebb1a Merge branch 'main' into fix/note-node-zoom-issue 2024-08-19 15:13:33 +08:00
Yi
f2ad16cec5 fix: note editor zoom issue 2024-08-19 15:13:02 +08:00

View File

@ -1,6 +1,7 @@
import { import {
memo, memo,
useCallback, useCallback,
useEffect,
useRef, useRef,
} from 'react' } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
@ -54,14 +55,33 @@ const NoteNode = ({
handleNodeDelete(id) handleNodeDelete(id)
}, [id, handleNodeDelete]) }, [id, handleNodeDelete])
const preventZoom = (e: WheelEvent) => {
if (data.selected && e.ctrlKey) {
e.preventDefault()
e.stopPropagation()
}
}
useClickAway(() => { useClickAway(() => {
handleNodeDataUpdateWithSyncDraft({ id, data: { selected: false } }) handleNodeDataUpdateWithSyncDraft({ id, data: { selected: false } })
}, ref) }, ref)
useEffect(() => {
const node = ref.current
if (node)
node.addEventListener('wheel', preventZoom, { passive: false })
return () => {
if (node)
node.removeEventListener('wheel', preventZoom)
}
}, [data.selected])
return ( return (
<div <div
className={cn( className={cn(
'flex flex-col relative rounded-md shadow-xs border hover:shadow-md', 'flex flex-col relative rounded-md shadow-xs border hover:shadow-md',
data.selected && 'nodrag nopan nowheel',
)} )}
style={{ style={{
background: THEME_MAP[theme].bg, background: THEME_MAP[theme].bg,
@ -102,7 +122,7 @@ const NoteNode = ({
} }
<div className='grow px-3 py-2.5 overflow-y-auto'> <div className='grow px-3 py-2.5 overflow-y-auto'>
<div className={cn( <div className={cn(
data.selected && 'nodrag nopan nowheel cursor-text', data.selected && 'cursor-text',
)}> )}>
<NoteEditor <NoteEditor
containerElement={ref.current} containerElement={ref.current}