feat: touched event

Barba828 · Jan 24, 2024 · 7edb2e0 · 7edb2e0
1 parent d790e4e
commit 7edb2e0
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 17 deletions.
diff --git a/packages/buitar/src/components/guitar-board/board/guitar-board.module.scss b/packages/buitar/src/components/guitar-board/board/guitar-board.module.scss
@@ -113,7 +113,7 @@
 		flex-direction: column-reverse;
 	}
 
-	// 如下三种point风格，以出现越后的优先级越高
+	// 如下若干种point风格，以出现越后的优先级越高
 	&.fixed-point {
 		background: $yellow-second !important;
 	}
@@ -122,7 +122,7 @@
 		background: $blue-primary !important;
 	}
 
-	&.emphasised-point {
+	&.emphasised-point, &:active {
 		background: $green-primary !important;
 	}
 

diff --git a/packages/buitar/src/components/guitar-board/board/guitar-board.tsx b/packages/buitar/src/components/guitar-board/board/guitar-board.tsx
@@ -9,6 +9,7 @@ import { Icon } from '@/components'
 import cx from 'classnames'
 import styles from './guitar-board.module.scss'
 import fretStyles from './guitar-board-fret.module.scss'
+import { useIsTouch } from '@/utils/hooks/use-device'
 
 interface GuitarBoardProps {
 	/**渲染吉他品数范围 */
@@ -46,6 +47,7 @@ export const GuitarBoard: FC<GuitarBoardProps> = ({
 	const boardRange = range[0] < 1 ? [1, range[1]] : range
 	const scrollRef = useRef<HTMLDivElement>(null)
 	const BoardBtnComponent = boardTheme === 'default' ? BoardButtonOriginal : BoardButton
+	const isTouchDevice = useIsTouch()
 
 	/**扁平化指板二维数组 */
 	const boardList = useMemo(() => {
@@ -64,9 +66,21 @@ export const GuitarBoard: FC<GuitarBoardProps> = ({
 		},
 		[boardList]
 	)
-
+	const handleTouchKey = useCallback(
+		(key: string) => {
+			if (key.length && boardList && isTouchDevice) {
+				const point = boardList[Number(key)]
+				onCheckedPoints?.([point])
+			}
+		},
+		[boardList]
+	)
+
 	// 鼠标事件监听
-	const { handler } = useBoardTouch(emphasis, setEmphasis, { onChange: handleChangeKey })
+	const { handler } = useBoardTouch(emphasis, setEmphasis, {
+		onChange: handleChangeKey,
+		onClick: handleTouchKey,
+	})
 	// 键盘事件监听
 	const { part, keyHandler } = useGuitarKeyDown(emphasis, setEmphasis, {
 		gradeLength: baseFret,
@@ -82,7 +96,6 @@ export const GuitarBoard: FC<GuitarBoardProps> = ({
 			return
 		}
 		const points = debouceEmphasis.map((index) => boardList[Number(index)])
-
 		console.log(
 			'%c Points ',
 			'color:white; background:rgb(57, 167, 150);border-radius: 2px',
@@ -239,7 +252,7 @@ const BoardButtonOriginal = ({
 
 	// key
 	const key = `${point.index}`
-	// 交互反馈强调的point
+	// 交互反馈强调的point (active)
 	const emphasised = emphasis.includes(key)
 	// 固定的point
 	const fixed = !!fixedTaps.find((tap) => tap.index === point.index)
@@ -248,7 +261,11 @@ const BoardButtonOriginal = ({
 	// 被点击的point
 	const tapped = !!taps.find((tap) => tap.index === point.index)
 	// 显示音调文本(非固定&非强调&非选择的指位才忽视半音显示)
-	const tone = getBoardOptionsTone(point.toneSchema, boardSettings, !tapped && !fixed && !emphasised)
+	const tone = getBoardOptionsTone(
+		point.toneSchema,
+		boardSettings,
+		!tapped && !fixed && !emphasised
+	)
 	// 显示八度音高
 	const level = tone && getLevel(point.toneSchema, boardSettings)
 

diff --git a/packages/buitar/src/utils/hooks/use-board-event.ts b/packages/buitar/src/utils/hooks/use-board-event.ts
@@ -15,8 +15,8 @@ export const useBoardTouch = (
 	 * 手动设置Touch事件
 	 */
 	options: {
-		onClick?(): void
-		onChange?(item: string): void
+		onClick?(key: string): void
+		onChange?(key: string): void
 	} = {}
 ) => {
 	const { onClick, onChange } = options
@@ -48,7 +48,7 @@ export const useBoardTouch = (
 	const onMouseOver = (e: React.MouseEvent | React.TouchEvent) => {
 		const targetData = (e.target as HTMLDivElement).dataset.key
 		if (targetData && isTouched.current) {
-			removeActiveFromTouched() // Touched中移除原active
+			removeActiveFromTouched() // Touched中移除原active（鼠标刚划过）
 			setActive(targetData)
 			onChange?.(targetData)
 			// 更新Touched
@@ -58,23 +58,35 @@ export const useBoardTouch = (
 		}
 	}
 	const onMouseUp = () => {
+		active && onClick?.(active)
 		removeActiveFromTouched()
 		isTouched.current = false
-		onClick?.()
 	}
 	const onMouseLeave = () => {
+		removeActiveFromTouched()
 		isTouched.current = false
 	}
 
+	const onBoardClick = (e: React.TouchEvent) => {
+		const targetData = (e.target as HTMLDivElement).dataset.key
+		if (targetData) {
+			onChange?.(targetData)
+			setActive(targetData)
+			if (touched.indexOf(targetData) === -1) {
+				onClick?.(targetData)
+			}
+		}
+	}
+
 	const handler = isTouchDevice
 		? {
-				// Mobile
-				onTouchStart: onMouseDown,
-				// onTouchMove: onMouseOver, // Touch设置TouchMove事件响应页面滚动，暂不用于指板响应
-				onTouchCancel: onMouseLeave,
-				onTouchEnd: onMouseUp,
+				// Mobile onTouch 方法与页面滚动冲突，所以暂不使用
+				// onTouchStart: onMouseDown,
+				// onTouchMove: onMouseLeave,
+				// onTouchCancel: onMouseLeave,
+				// onTouchEnd: onMouseUp,
 				// default
-				onClick: onMouseOver,
+				onClick: onBoardClick,
 		  }
 		: {
 				// PC