|
|
@@ -11,23 +11,25 @@ const MAIN_CONTENT_HEIGHT = 945
|
|
|
const MINIMAP_SCALE = 0.045
|
|
|
|
|
|
function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) => void }) {
|
|
|
-
|
|
|
-
|
|
|
const { myData } = useSelector((state: RootState) => state.A0Layout)
|
|
|
|
|
|
- // 新增拖拽相关状态
|
|
|
const [isDragging, setIsDragging] = useState(false)
|
|
|
const [startX, setStartX] = useState(0)
|
|
|
const [startY, setStartY] = useState(0)
|
|
|
const [offsetX, setOffsetX] = useState(0)
|
|
|
const [offsetY, setOffsetY] = useState(0)
|
|
|
|
|
|
+ // 小地图相关逻辑
|
|
|
+ const [contentSize, setContentSize] = useState({ width: 2000, height: 1200 })
|
|
|
+ const miniMapScale = 0.1
|
|
|
+
|
|
|
// 设置初始位置
|
|
|
useEffect(() => {
|
|
|
setOffsetX(0)
|
|
|
setOffsetY(-200)
|
|
|
}, [])
|
|
|
|
|
|
+ // graph
|
|
|
const startRef = useRef({
|
|
|
startX: 0, // 触摸起始点 X 坐标
|
|
|
startY: 0, // 触摸起始点 Y 坐标
|
|
|
@@ -35,62 +37,66 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
startOffsetY: 0 // 元素起始偏移 Y
|
|
|
});
|
|
|
|
|
|
- const graphRef = useRef<HTMLDivElement>(null); // 已存在，无需新增
|
|
|
+ const graphRef = useRef<HTMLDivElement>(null);
|
|
|
+
|
|
|
+ // miniMap
|
|
|
+ const miniMapStartRef = useRef({
|
|
|
+ startX: 0, // 触摸起始点 X 坐标
|
|
|
+ startY: 0, // 触摸起始点 Y 坐标
|
|
|
+ startOffsetX: 0, // 元素起始偏移 X
|
|
|
+ startOffsetY: 0 // 元素起始偏移 Y
|
|
|
+ });
|
|
|
|
|
|
- // 原生事件处理函数（无需 useCallback，因为在 useEffect 内绑定）
|
|
|
- // const nativeTouchStart = (e: TouchEvent) => {
|
|
|
- // const el = graphRef.current;
|
|
|
- // if (!el || e.target !== el) return; // 仅容器本身触发
|
|
|
+ // 针对移动端miniMap
|
|
|
+ useEffect(() => {
|
|
|
+ const miniMapViewport = document.getElementById('miniMapViewport') as HTMLDivElement
|
|
|
+ if (!miniMapViewport) return
|
|
|
|
|
|
- // const touch = e.touches[0];
|
|
|
- // if (!touch) return;
|
|
|
+ const handleTouchStart = (e: TouchEvent) => {
|
|
|
+ console.log('touchStart')
|
|
|
+ const touch = e.touches[0];
|
|
|
+ // 记录触摸起始坐标
|
|
|
+ miniMapStartRef.current.startX = touch.clientX;
|
|
|
+ miniMapStartRef.current.startY = touch.clientY;
|
|
|
|
|
|
- // startRef.current = {
|
|
|
- // startX: touch.clientX,
|
|
|
- // startY: touch.clientY,
|
|
|
- // startOffsetX: offsetX,
|
|
|
- // startOffsetY: offsetY,
|
|
|
- // };
|
|
|
- // };
|
|
|
+ miniMapStartRef.current.startOffsetX = offsetX;
|
|
|
+ miniMapStartRef.current.startOffsetY = offsetY;
|
|
|
|
|
|
- // const nativeTouchMove = (e: TouchEvent) => {
|
|
|
- // const el = graphRef.current;
|
|
|
- // if (!el) return;
|
|
|
+ }
|
|
|
|
|
|
- // const touch = e.touches[0];
|
|
|
- // if (!touch) return;
|
|
|
+ const handleTouchMove = (e: TouchEvent) => {
|
|
|
+ console.log('touchMove')
|
|
|
+ const touch = e.touches[0];
|
|
|
+ if (!touch) return;
|
|
|
+ // 计算滑动距离 = 当前触摸位置 - 初始触摸位置
|
|
|
+ const dx = touch.clientY - miniMapStartRef.current.startY;
|
|
|
+ const dy = -touch.clientX + miniMapStartRef.current.startX;
|
|
|
|
|
|
- // const { startX, startY, startOffsetX, startOffsetY } = startRef.current;
|
|
|
- // const dx = touch.clientX - startX;
|
|
|
- // const dy = touch.clientY - startY;
|
|
|
+ setOffsetX(prev => {
|
|
|
+ const newX = miniMapStartRef.current.startOffsetX - dx * 18;
|
|
|
+ return Math.min(0, Math.max(-1640, newX));
|
|
|
+ // return newX
|
|
|
+ });
|
|
|
|
|
|
- // const newX = startOffsetX + dx;
|
|
|
- // const newY = startOffsetY + dy;
|
|
|
+ setOffsetY(prev => {
|
|
|
+ const newY = miniMapStartRef.current.startOffsetY - dy * 7;
|
|
|
+ return Math.min(0, Math.max(-350, newY));
|
|
|
+ // return newY
|
|
|
+ });
|
|
|
|
|
|
- // // 打印坐标，确认是否持续触发
|
|
|
- // console.log('原生touchmove:', touch.clientX, touch.clientY);
|
|
|
+ }
|
|
|
|
|
|
- // setOffsetX(Math.min(0, Math.max(-1640, newX)));
|
|
|
- // setOffsetY(Math.min(0, Math.max(-350, newY)));
|
|
|
- // };
|
|
|
+ miniMapViewport.addEventListener('touchstart', handleTouchStart)
|
|
|
+ miniMapViewport.addEventListener('touchmove', handleTouchMove)
|
|
|
|
|
|
- // useEffect(() => {
|
|
|
- // const el = graphRef.current;
|
|
|
- // console.log('offsetX, offsetY', el)
|
|
|
- // if (!el) return;
|
|
|
+ return () => {
|
|
|
+ miniMapViewport.removeEventListener('touchstart', handleTouchStart)
|
|
|
+ miniMapViewport.removeEventListener('touchmove', handleTouchMove)
|
|
|
+ }
|
|
|
+ }, [contentSize.height, contentSize.width, offsetX, offsetY])
|
|
|
|
|
|
- // // 绑定原生事件（passive: false 可选，这里用了 touchAction: none 不需要）
|
|
|
- // el.addEventListener('touchstart', nativeTouchStart);
|
|
|
- // el.addEventListener('touchmove', nativeTouchMove);
|
|
|
|
|
|
- // // 卸载时解绑
|
|
|
- // // return () => {
|
|
|
- // // el.removeEventListener('touchstart', nativeTouchStart);
|
|
|
- // // el.removeEventListener('touchmove', nativeTouchMove);
|
|
|
- // // };
|
|
|
- // }, [offsetX, offsetY]);
|
|
|
|
|
|
- // 新增事件处理函数
|
|
|
const handleMouseDown = (e: React.MouseEvent) => {
|
|
|
if (e.target === e.currentTarget) { // 仅当点击容器本身时触发拖拽
|
|
|
e.stopPropagation();
|
|
|
@@ -104,7 +110,6 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
|
|
|
const handleTouchStart = useCallback((e: React.TouchEvent) => {
|
|
|
const touch = e.touches[0]; // 获取第一个触摸点（单指拖拽）
|
|
|
- console.log(touch.clientX, touch.clientY)
|
|
|
// if (!touch) return;
|
|
|
|
|
|
// 记录触摸起始坐标
|
|
|
@@ -124,15 +129,19 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
const dy = e.clientY - startY
|
|
|
|
|
|
// 使用函数式更新确保获取最新状态值
|
|
|
- setOffsetX(prev => {
|
|
|
- const newX = prev + dx
|
|
|
- return Math.min(0, Math.max(-1640, newX))
|
|
|
- })
|
|
|
+ // setOffsetX(prev => {
|
|
|
+ // const newX = prev + dx
|
|
|
+ // return Math.min(0, Math.max(-1640, newX))
|
|
|
+ // })
|
|
|
|
|
|
- setOffsetY(prev => {
|
|
|
- const newY = prev + dy
|
|
|
- return Math.min(0, Math.max(-350, newY))
|
|
|
- })
|
|
|
+ setOffsetX(Math.min(0, Math.max(-1640, offsetX + dx)))
|
|
|
+
|
|
|
+ // setOffsetY(prev => {
|
|
|
+ // const newY = prev + dy
|
|
|
+ // return Math.min(0, Math.max(-350, newY))
|
|
|
+ // })
|
|
|
+
|
|
|
+ setOffsetY(Math.min(0, Math.max(-350, offsetY + dy)))
|
|
|
|
|
|
// 更新起始坐标为当前鼠标位置（保持相对移动）
|
|
|
setStartX(e.clientX)
|
|
|
@@ -141,7 +150,6 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
}
|
|
|
|
|
|
const handleTouchMove = useCallback((e: React.TouchEvent) => {
|
|
|
- console.log(123)
|
|
|
const touch = e.touches[0];
|
|
|
if (!touch) return;
|
|
|
|
|
|
@@ -169,10 +177,7 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
setIsDragging(false)
|
|
|
}
|
|
|
|
|
|
- // 新增小地图相关逻辑
|
|
|
- // const graphRef = useRef<HTMLDivElement>(null)
|
|
|
- const [contentSize, setContentSize] = useState({ width: 2000, height: 1200 })
|
|
|
- const miniMapScale = 0.1
|
|
|
+
|
|
|
|
|
|
// 动态获取容器尺寸
|
|
|
useEffect(() => {
|
|
|
@@ -182,20 +187,8 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
}, [])
|
|
|
|
|
|
// 小地图拖拽绑定
|
|
|
- const bind = useDrag(({ offset: [x, y] }) => {
|
|
|
- // 计算视口最大移动范围
|
|
|
- const maxX = contentSize.width * miniMapScale - MAIN_CONTENT_WIDTH * MINIMAP_SCALE - 2
|
|
|
- const maxY = contentSize.height * miniMapScale - MAIN_CONTENT_HEIGHT * MINIMAP_SCALE - 4
|
|
|
- console.log(maxX, maxY, '------------')
|
|
|
- // 钳制坐标范围
|
|
|
- const clampedX = Math.max(0, Math.min(x, maxX))
|
|
|
- const clampedY = Math.max(0, Math.min(y, maxY))
|
|
|
- setOffsetX(-clampedX / miniMapScale)
|
|
|
- setOffsetY(-clampedY / miniMapScale)
|
|
|
- })
|
|
|
-
|
|
|
- const bindMobile = useDrag(({ offset: [x, y] }) => {
|
|
|
- console.log(x, y, '------------')
|
|
|
+ const bind = useDrag(({ initial: [initX, initY], offset: [x, y] }) => {
|
|
|
+ console.log(initX, initY, x, y, 'bind')
|
|
|
// 计算视口最大移动范围
|
|
|
const maxX = contentSize.width * miniMapScale - MAIN_CONTENT_WIDTH * MINIMAP_SCALE - 2
|
|
|
const maxY = contentSize.height * miniMapScale - MAIN_CONTENT_HEIGHT * MINIMAP_SCALE - 4
|
|
|
@@ -204,11 +197,6 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
const clampedY = Math.max(0, Math.min(y, maxY))
|
|
|
setOffsetX(-clampedX / miniMapScale)
|
|
|
setOffsetY(-clampedY / miniMapScale)
|
|
|
- }, {
|
|
|
- // 移动端专用配置
|
|
|
- pointer: { touch: true },
|
|
|
- preventScroll: true,
|
|
|
- filterTouches: (e: TouchEvent) => e.target === e.currentTarget
|
|
|
})
|
|
|
|
|
|
|
|
|
@@ -221,20 +209,20 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
<>
|
|
|
{myData.genealogyData.map((item, index) => {
|
|
|
let res
|
|
|
- if (item.type === 'active') res = <NodeActive key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} nameClick={() => handleNameClick(index)} className='nodeActiveG' />
|
|
|
- if (item.type === 'nodeRight_n') res = <NodeRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
|
|
|
+ if (item.type === 'active') res = <NodeActive key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} className='nodeActiveG' />
|
|
|
+ if (item.type === 'nodeRight_n') res = <NodeRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' />
|
|
|
if (item.type === 'nodeRight_a') res = <NodeRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
|
|
|
- if (item.type === 'nodeRight_f') res = <NodeRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='false' nameClick={() => handleNameClick(index)} />
|
|
|
- if (item.type === 'nodeBottom_n') res = <NodeBottom key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
|
|
|
- if (item.type === 'nodeTurnRight_n') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
|
|
|
+ if (item.type === 'nodeRight_f') res = <NodeRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='false' />
|
|
|
+ if (item.type === 'nodeBottom_n') res = <NodeBottom key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' />
|
|
|
+ if (item.type === 'nodeTurnRight_n') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' />
|
|
|
if (item.type === 'nodeTurnRight_a') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
|
|
|
if (item.type === 'nodeTurnBottomRight_a') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
|
|
|
- if (item.type === 'nodeTurnBottomRight_n') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
|
|
|
- if (item.type === 'nodeRight_dash_n') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
|
|
|
+ if (item.type === 'nodeTurnBottomRight_n') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' />
|
|
|
+ if (item.type === 'nodeRight_dash_n') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' />
|
|
|
if (item.type === 'nodeRight_dash_a') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' />
|
|
|
- if (item.type === 'nodeRight_dash_f') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='false' nameClick={() => handleNameClick(index)} />
|
|
|
- if (item.type === 'nodeBottom_dash_n') res = <NodeBottomDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
|
|
|
- if (item.type === 'nodeTurnBottomDashRight_n') res = <NodeTurnBottomDashRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
|
|
|
+ if (item.type === 'nodeRight_dash_f') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='false' />
|
|
|
+ if (item.type === 'nodeBottom_dash_n') res = <NodeBottomDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' />
|
|
|
+ if (item.type === 'nodeTurnBottomDashRight_n') res = <NodeTurnBottomDashRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' />
|
|
|
return res
|
|
|
})}
|
|
|
</>
|
|
|
@@ -283,7 +271,7 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
userSelect: 'none'
|
|
|
}}
|
|
|
>
|
|
|
- <NodeData />
|
|
|
+ <NodeClickData />
|
|
|
</div>
|
|
|
<div className={styles.tip}>
|
|
|
<div className='t1'>
|
|
|
@@ -300,7 +288,8 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
<div className={styles.miniMap}>
|
|
|
<div
|
|
|
className={styles.viewport}
|
|
|
- {...(isMobiileFu() ? bindMobile() : bind())}
|
|
|
+ id='miniMapViewport'
|
|
|
+ {...(isMobiileFu() ? null : bind())}
|
|
|
style={{
|
|
|
transform: `translate(${-offsetX * miniMapScale}px, ${-offsetY * miniMapScale}px)`,
|
|
|
width: `${MAIN_CONTENT_WIDTH * MINIMAP_SCALE}px`,
|
|
|
@@ -315,7 +304,7 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
height: `${contentSize.height}px`
|
|
|
}}
|
|
|
>
|
|
|
- <NodeClickData />
|
|
|
+ <NodeData />
|
|
|
</div>
|
|
|
</div>
|
|
|
</>
|
lanxin