|
|
@@ -1,6 +1,17 @@
|
|
|
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
import styles from './index.module.scss'
|
|
|
-import { NodeTurnRight, NodeRight, NodeBottom, RightLineDash, NodeActive, NodeTurnBottomRight, NodeRightDash, NodeBottomDash, NodeTurnBottomDashRight } from '../Utils'
|
|
|
+import {
|
|
|
+ NodeTurnRight,
|
|
|
+ NodeRight,
|
|
|
+ NodeBottom,
|
|
|
+ RightLineDash,
|
|
|
+ RightLine,
|
|
|
+ NodeActive,
|
|
|
+ NodeTurnBottomRight,
|
|
|
+ NodeRightDash,
|
|
|
+ NodeBottomDash,
|
|
|
+ NodeTurnBottomDashRight
|
|
|
+} from '../Utils'
|
|
|
import { isMobiileFu } from '@/utils/history'
|
|
|
import { useSelector } from 'react-redux'
|
|
|
import { RootState } from '@/store'
|
|
|
@@ -31,25 +42,25 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
|
|
|
// graph
|
|
|
const startRef = useRef({
|
|
|
- startX: 0, // 触摸起始点 X 坐标
|
|
|
- startY: 0, // 触摸起始点 Y 坐标
|
|
|
+ startX: 0, // 触摸起始点 X 坐标
|
|
|
+ startY: 0, // 触摸起始点 Y 坐标
|
|
|
startOffsetX: 0, // 元素起始偏移 X
|
|
|
- startOffsetY: 0, // 元素起始偏移 Y
|
|
|
+ startOffsetY: 0, // 元素起始偏移 Y
|
|
|
initialDistance: 0, // 两指缩放的初始距离
|
|
|
initialZoom: 1, // 初始缩放比例
|
|
|
midX: 0, // 两指缩放的中点 X 坐标
|
|
|
midY: 0 // 两指缩放的中点 Y 坐标
|
|
|
- });
|
|
|
+ })
|
|
|
|
|
|
- const graphRef = useRef<HTMLDivElement>(null);
|
|
|
+ const graphRef = useRef<HTMLDivElement>(null)
|
|
|
|
|
|
// miniMap
|
|
|
const miniMapStartRef = useRef({
|
|
|
- startX: 0, // 触摸起始点 X 坐标
|
|
|
- startY: 0, // 触摸起始点 Y 坐标
|
|
|
+ startX: 0, // 触摸起始点 X 坐标
|
|
|
+ startY: 0, // 触摸起始点 Y 坐标
|
|
|
startOffsetX: 0, // 元素起始偏移 X
|
|
|
- startOffsetY: 0 // 元素起始偏移 Y
|
|
|
- });
|
|
|
+ startOffsetY: 0 // 元素起始偏移 Y
|
|
|
+ })
|
|
|
|
|
|
// 鼠标位置
|
|
|
const mousePositionRef = useRef({ x: 0, y: 0 })
|
|
|
@@ -60,29 +71,27 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
if (!miniMapViewport) return
|
|
|
|
|
|
const handleTouchStart = (e: TouchEvent) => {
|
|
|
- const touch = e.touches[0];
|
|
|
- miniMapStartRef.current.startX = touch.clientX;
|
|
|
- miniMapStartRef.current.startY = touch.clientY;
|
|
|
- miniMapStartRef.current.startOffsetX = offsetX;
|
|
|
- miniMapStartRef.current.startOffsetY = offsetY;
|
|
|
-
|
|
|
+ const touch = e.touches[0]
|
|
|
+ miniMapStartRef.current.startX = touch.clientX
|
|
|
+ miniMapStartRef.current.startY = touch.clientY
|
|
|
+ miniMapStartRef.current.startOffsetX = offsetX
|
|
|
+ miniMapStartRef.current.startOffsetY = offsetY
|
|
|
}
|
|
|
const handleTouchMove = (e: TouchEvent) => {
|
|
|
- const touch = e.touches[0];
|
|
|
- if (!touch) return;
|
|
|
- const dx = touch.clientY - miniMapStartRef.current.startY;
|
|
|
- const dy = -touch.clientX + miniMapStartRef.current.startX;
|
|
|
+ const touch = e.touches[0]
|
|
|
+ if (!touch) return
|
|
|
+ const dx = touch.clientY - miniMapStartRef.current.startY
|
|
|
+ const dy = -touch.clientX + miniMapStartRef.current.startX
|
|
|
setOffsetX(prev => {
|
|
|
- const newX = miniMapStartRef.current.startOffsetX - dx * 18;
|
|
|
- return Math.min(0, Math.max(-1640, newX));
|
|
|
+ const newX = miniMapStartRef.current.startOffsetX - dx * 18
|
|
|
+ return Math.min(0, Math.max(-1640, newX))
|
|
|
// return newX
|
|
|
- });
|
|
|
+ })
|
|
|
setOffsetY(prev => {
|
|
|
- const newY = miniMapStartRef.current.startOffsetY - dy * 7;
|
|
|
- return Math.min(0, Math.max(-350, newY));
|
|
|
+ const newY = miniMapStartRef.current.startOffsetY - dy * 7
|
|
|
+ return Math.min(0, Math.max(-350, newY))
|
|
|
// return newY
|
|
|
- });
|
|
|
-
|
|
|
+ })
|
|
|
}
|
|
|
miniMapViewport.addEventListener('touchstart', handleTouchStart)
|
|
|
miniMapViewport.addEventListener('touchmove', handleTouchMove)
|
|
|
@@ -102,10 +111,10 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
e.stopPropagation()
|
|
|
if (e.target !== miniMapViewport) return
|
|
|
setIsDraggingMiniMap(true)
|
|
|
- miniMapStartRef.current.startX = e.clientX;
|
|
|
- miniMapStartRef.current.startY = e.clientY;
|
|
|
- miniMapStartRef.current.startOffsetX = offsetX;
|
|
|
- miniMapStartRef.current.startOffsetY = offsetY;
|
|
|
+ miniMapStartRef.current.startX = e.clientX
|
|
|
+ miniMapStartRef.current.startY = e.clientY
|
|
|
+ miniMapStartRef.current.startOffsetX = offsetX
|
|
|
+ miniMapStartRef.current.startOffsetY = offsetY
|
|
|
}
|
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
|
e.stopPropagation()
|
|
|
@@ -113,14 +122,14 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
const dy = -e.clientY + miniMapStartRef.current.startY
|
|
|
if (!isDraggingMiniMap) return
|
|
|
setOffsetX(prev => {
|
|
|
- const newX = miniMapStartRef.current.startOffsetX + dx * 5;
|
|
|
- return Math.min(0, Math.max(-1640, newX));
|
|
|
- });
|
|
|
+ const newX = miniMapStartRef.current.startOffsetX + dx * 5
|
|
|
+ return Math.min(0, Math.max(-1640, newX))
|
|
|
+ })
|
|
|
setOffsetY(prev => {
|
|
|
- const newY = miniMapStartRef.current.startOffsetY + dy * 7;
|
|
|
- return Math.min(0, Math.max(-350, newY));
|
|
|
+ const newY = miniMapStartRef.current.startOffsetY + dy * 7
|
|
|
+ return Math.min(0, Math.max(-350, newY))
|
|
|
// return newY
|
|
|
- });
|
|
|
+ })
|
|
|
}
|
|
|
const handleMouseUp = (e: MouseEvent) => {
|
|
|
e.stopPropagation()
|
|
|
@@ -138,15 +147,14 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
}
|
|
|
}, [contentSize.height, contentSize.width, isDraggingMiniMap, offsetX, offsetY])
|
|
|
|
|
|
-
|
|
|
// 主视角地图的Pc
|
|
|
const handleMouseDown = (e: React.MouseEvent) => {
|
|
|
if (e.target === e.currentTarget) {
|
|
|
- setIsDragging(true);
|
|
|
- startRef.current.startX = e.clientX;
|
|
|
- startRef.current.startY = e.clientY;
|
|
|
- startRef.current.startOffsetX = offsetX;
|
|
|
- startRef.current.startOffsetY = offsetY;
|
|
|
+ setIsDragging(true)
|
|
|
+ startRef.current.startX = e.clientX
|
|
|
+ startRef.current.startY = e.clientY
|
|
|
+ startRef.current.startOffsetX = offsetX
|
|
|
+ startRef.current.startOffsetY = offsetY
|
|
|
}
|
|
|
}
|
|
|
const handleMouseUp = () => setIsDragging(false)
|
|
|
@@ -154,8 +162,8 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
const handleMouseMove = (e: React.MouseEvent) => {
|
|
|
console.log('move')
|
|
|
// 记录鼠标位置
|
|
|
- const x = (e.clientX / 2.28 - offsetX)
|
|
|
- const y = (e.clientY / 2.28 - offsetY)
|
|
|
+ const x = e.clientX / 2.28 - offsetX
|
|
|
+ const y = e.clientY / 2.28 - offsetY
|
|
|
mousePositionRef.current = { x, y }
|
|
|
// setZoomOrigin({ x, y })
|
|
|
|
|
|
@@ -167,91 +175,94 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
const dx = e.clientX - startRef.current.startX
|
|
|
const dy = e.clientY - startRef.current.startY
|
|
|
setOffsetX(prev => {
|
|
|
- const newX = startRef.current.startOffsetX + dx;
|
|
|
- return Math.min(0, Math.max(-1640, newX));
|
|
|
+ const newX = startRef.current.startOffsetX + dx
|
|
|
+ return Math.min(0, Math.max(-1640, newX))
|
|
|
// return newX
|
|
|
- });
|
|
|
+ })
|
|
|
setOffsetY(prev => {
|
|
|
- const newY = startRef.current.startOffsetY + dy;
|
|
|
- return Math.min(0, Math.max(-350, newY));
|
|
|
+ const newY = startRef.current.startOffsetY + dy
|
|
|
+ return Math.min(0, Math.max(-350, newY))
|
|
|
// return newY
|
|
|
- });
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
const onWheel = (e: React.WheelEvent) => {
|
|
|
console.log(e.deltaY, 'e.deltaY')
|
|
|
// 计算新的缩放比例
|
|
|
- const delta = e.deltaY;
|
|
|
- const newZoom = Math.min(1.5, Math.max(0.8, zoom - delta * 0.001));
|
|
|
- console.log(zoom, mousePositionRef.current);
|
|
|
+ const delta = e.deltaY
|
|
|
+ const newZoom = Math.min(1.5, Math.max(0.8, zoom - delta * 0.001))
|
|
|
+ console.log(zoom, mousePositionRef.current)
|
|
|
|
|
|
if (Math.abs(zoom - 1) < 0.05) {
|
|
|
setZoomOrigin(mousePositionRef.current)
|
|
|
}
|
|
|
- setZoom(newZoom);
|
|
|
+ setZoom(newZoom)
|
|
|
}
|
|
|
// 主视角地图的移动端
|
|
|
- const handleTouchStart = useCallback((e: React.TouchEvent) => {
|
|
|
- const touch = e.touches[0]
|
|
|
- // 记录触摸起始坐标
|
|
|
- startRef.current.startX = touch.clientX;
|
|
|
- startRef.current.startY = touch.clientY;
|
|
|
- startRef.current.startOffsetX = offsetX;
|
|
|
- startRef.current.startOffsetY = offsetY;
|
|
|
- if (e.touches.length === 2) {
|
|
|
- const t1 = e.touches[0]
|
|
|
- const t2 = e.touches[1]
|
|
|
- // 记录两指缩放的初始数据:距离，当前缩放比例，中点坐标
|
|
|
- const distance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY)
|
|
|
- startRef.current.initialDistance = distance
|
|
|
- startRef.current.initialZoom = zoom
|
|
|
- // 计算中点坐标
|
|
|
- const midX = (t1.clientX + t2.clientX) / 2
|
|
|
- const midY = (t1.clientY + t2.clientY) / 2
|
|
|
- startRef.current.midX = midX
|
|
|
- startRef.current.midY = midY
|
|
|
- }
|
|
|
- }, [offsetX, offsetY, zoom])
|
|
|
+ const handleTouchStart = useCallback(
|
|
|
+ (e: React.TouchEvent) => {
|
|
|
+ const touch = e.touches[0]
|
|
|
+ // 记录触摸起始坐标
|
|
|
+ startRef.current.startX = touch.clientX
|
|
|
+ startRef.current.startY = touch.clientY
|
|
|
+ startRef.current.startOffsetX = offsetX
|
|
|
+ startRef.current.startOffsetY = offsetY
|
|
|
+ if (e.touches.length === 2) {
|
|
|
+ const t1 = e.touches[0]
|
|
|
+ const t2 = e.touches[1]
|
|
|
+ // 记录两指缩放的初始数据:距离，当前缩放比例，中点坐标
|
|
|
+ const distance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY)
|
|
|
+ startRef.current.initialDistance = distance
|
|
|
+ startRef.current.initialZoom = zoom
|
|
|
+ // 计算中点坐标
|
|
|
+ const midX = (t1.clientX + t2.clientX) / 2
|
|
|
+ const midY = (t1.clientY + t2.clientY) / 2
|
|
|
+ startRef.current.midX = midX
|
|
|
+ startRef.current.midY = midY
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [offsetX, offsetY, zoom]
|
|
|
+ )
|
|
|
const handleTouchMove = useCallback((e: React.TouchEvent) => {
|
|
|
const touch = e.touches[0]
|
|
|
const dx = touch.clientY - startRef.current.startY
|
|
|
const dy = -touch.clientX + startRef.current.startX
|
|
|
if (e.touches.length === 1) {
|
|
|
setOffsetX(prev => {
|
|
|
- const newX = startRef.current.startOffsetX + dx;
|
|
|
- return Math.min(0, Math.max(-1640, newX));
|
|
|
+ const newX = startRef.current.startOffsetX + dx
|
|
|
+ return Math.min(0, Math.max(-1640, newX))
|
|
|
// return newX
|
|
|
- });
|
|
|
+ })
|
|
|
setOffsetY(prev => {
|
|
|
- const newY = startRef.current.startOffsetY + dy;
|
|
|
- return Math.min(0, Math.max(-350, newY));
|
|
|
+ const newY = startRef.current.startOffsetY + dy
|
|
|
+ return Math.min(0, Math.max(-350, newY))
|
|
|
// return newY
|
|
|
- });
|
|
|
+ })
|
|
|
}
|
|
|
if (e.touches.length === 2) {
|
|
|
const touch2 = e.touches[1]
|
|
|
// 计算当前两指之间的距离
|
|
|
const distance = Math.hypot(touch2.clientX - touch.clientX, touch2.clientY - touch.clientY)
|
|
|
// 根据距离调整缩放比例
|
|
|
- const newZoom = Math.max(0.8, Math.min(2, distance / startRef.current.initialDistance * startRef.current.initialZoom))
|
|
|
+ const newZoom = Math.max(
|
|
|
+ 0.8,
|
|
|
+ Math.min(2, (distance / startRef.current.initialDistance) * startRef.current.initialZoom)
|
|
|
+ )
|
|
|
setZoom(newZoom)
|
|
|
setOffsetX(prev => {
|
|
|
const deltaMidX = (touch2.clientX + touch.clientX) / 2 - startRef.current.midX
|
|
|
const newX = startRef.current.startOffsetX - deltaMidX + dx * 0.5
|
|
|
- return Math.min(0, Math.max(-1640, newX));
|
|
|
+ return Math.min(0, Math.max(-1640, newX))
|
|
|
})
|
|
|
setOffsetY(prev => {
|
|
|
const deltaMidY = (touch2.clientY + touch.clientY) / 2 - startRef.current.midY
|
|
|
const newY = startRef.current.startOffsetY - deltaMidY + dy * 0.5
|
|
|
- return Math.min(0, Math.max(-350, newY));
|
|
|
+ return Math.min(0, Math.max(-350, newY))
|
|
|
})
|
|
|
}
|
|
|
}, [])
|
|
|
|
|
|
-
|
|
|
-
|
|
|
// 动态获取容器尺寸
|
|
|
useEffect(() => {
|
|
|
if (graphRef.current) {
|
|
|
@@ -266,56 +277,306 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
setCurrentNodeIndex(index)
|
|
|
}
|
|
|
|
|
|
- const NodeData = React.memo(() =>
|
|
|
+ const NodeData = React.memo(() => (
|
|
|
<div className='nodeData'>
|
|
|
{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)` }} 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' />
|
|
|
- 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)` }} arrowHeight={item.arrowHeight} type='normal' />
|
|
|
- if (item.type === 'nodeTurnRight_a') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} arrowHeight={item.arrowHeight} type='active' />
|
|
|
- if (item.type === 'nodeTurnBottomRight_a') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} arrowHeight={item.arrowHeight} type='active' />
|
|
|
- if (item.type === 'nodeTurnBottomRight_n') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} arrowHeight={item.arrowHeight} 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' />
|
|
|
- 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' />
|
|
|
+ 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'
|
|
|
+ />
|
|
|
+ )
|
|
|
+ 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)` }}
|
|
|
+ arrowHeight={item.arrowHeight}
|
|
|
+ type='normal'
|
|
|
+ />
|
|
|
+ )
|
|
|
+ if (item.type === 'nodeTurnRight_a')
|
|
|
+ res = (
|
|
|
+ <NodeTurnRight
|
|
|
+ key={index}
|
|
|
+ data={item}
|
|
|
+ style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
|
|
|
+ arrowHeight={item.arrowHeight}
|
|
|
+ type='active'
|
|
|
+ />
|
|
|
+ )
|
|
|
+ if (item.type === 'nodeTurnBottomRight_a')
|
|
|
+ res = (
|
|
|
+ <NodeTurnBottomRight
|
|
|
+ key={index}
|
|
|
+ data={item}
|
|
|
+ style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
|
|
|
+ arrowHeight={item.arrowHeight}
|
|
|
+ type='active'
|
|
|
+ />
|
|
|
+ )
|
|
|
+ if (item.type === 'nodeTurnBottomRight_n')
|
|
|
+ res = (
|
|
|
+ <NodeTurnBottomRight
|
|
|
+ key={index}
|
|
|
+ data={item}
|
|
|
+ style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
|
|
|
+ arrowHeight={item.arrowHeight}
|
|
|
+ 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'
|
|
|
+ />
|
|
|
+ )
|
|
|
+ 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
|
|
|
})}
|
|
|
</div>
|
|
|
- )
|
|
|
-
|
|
|
-
|
|
|
- const NodeClickData = React.memo(() =>
|
|
|
- <div className='nodeClickData' id='nodeClickData' style={{ transform: `scale(${zoom})`, transformOrigin: `${zoomOrigin.x}px ${zoomOrigin.y}px` }}>
|
|
|
- {
|
|
|
- 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 === '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)` }} arrowHeight={item.arrowHeight} type='normal' nameClick={() => handleNameClick(index)} />
|
|
|
- if (item.type === 'nodeTurnRight_a') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} arrowHeight={item.arrowHeight} type='active' />
|
|
|
- if (item.type === 'nodeTurnBottomRight_a') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)`, height: item.height || undefined }} arrowHeight={item.arrowHeight} type='active' />
|
|
|
- if (item.type === 'nodeTurnBottomRight_n') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)`, height: item.height || undefined }} arrowHeight={item.arrowHeight} 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 === '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)} />
|
|
|
- return res
|
|
|
- })
|
|
|
- }
|
|
|
- </div >
|
|
|
- )
|
|
|
-
|
|
|
-
|
|
|
+ ))
|
|
|
+
|
|
|
+ const NodeClickData = React.memo(() => (
|
|
|
+ <div
|
|
|
+ className='nodeClickData'
|
|
|
+ id='nodeClickData'
|
|
|
+ style={{
|
|
|
+ transform: `scale(${zoom})`,
|
|
|
+ transformOrigin: `${zoomOrigin.x}px ${zoomOrigin.y}px`
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {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 === '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)` }}
|
|
|
+ arrowHeight={item.arrowHeight}
|
|
|
+ type='normal'
|
|
|
+ nameClick={() => handleNameClick(index)}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ if (item.type === 'nodeTurnRight_a')
|
|
|
+ res = (
|
|
|
+ <NodeTurnRight
|
|
|
+ key={index}
|
|
|
+ data={item}
|
|
|
+ style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }}
|
|
|
+ arrowHeight={item.arrowHeight}
|
|
|
+ type='active'
|
|
|
+ />
|
|
|
+ )
|
|
|
+ if (item.type === 'nodeTurnBottomRight_a')
|
|
|
+ res = (
|
|
|
+ <NodeTurnBottomRight
|
|
|
+ key={index}
|
|
|
+ data={item}
|
|
|
+ style={{
|
|
|
+ transform: `translate(${item.position.x}px, ${item.position.y}px)`,
|
|
|
+ height: item.height || undefined
|
|
|
+ }}
|
|
|
+ arrowHeight={item.arrowHeight}
|
|
|
+ type='active'
|
|
|
+ />
|
|
|
+ )
|
|
|
+ if (item.type === 'nodeTurnBottomRight_n')
|
|
|
+ res = (
|
|
|
+ <NodeTurnBottomRight
|
|
|
+ key={index}
|
|
|
+ data={item}
|
|
|
+ style={{
|
|
|
+ transform: `translate(${item.position.x}px, ${item.position.y}px)`,
|
|
|
+ height: item.height || undefined
|
|
|
+ }}
|
|
|
+ arrowHeight={item.arrowHeight}
|
|
|
+ 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 === '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)}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ return res
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ ))
|
|
|
|
|
|
return (
|
|
|
<>
|
|
|
@@ -335,19 +596,47 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
|
|
|
userSelect: 'none'
|
|
|
}}
|
|
|
>
|
|
|
- <div className="fixed" style={{ width: '5px', height: '5px', backgroundColor: '#000', borderRadius: '50%', position: 'absolute', top: '0', left: '0', transform: `translate(${-offsetX}px,${-offsetY}px)` }}></div>
|
|
|
+ <div
|
|
|
+ className='fixed'
|
|
|
+ style={{
|
|
|
+ width: '5px',
|
|
|
+ height: '5px',
|
|
|
+ backgroundColor: '#000',
|
|
|
+ borderRadius: '50%',
|
|
|
+ position: 'absolute',
|
|
|
+ top: '0',
|
|
|
+ left: '0',
|
|
|
+ transform: `translate(${-offsetX}px,${-offsetY}px)`
|
|
|
+ }}
|
|
|
+ ></div>
|
|
|
<NodeClickData />
|
|
|
</div>
|
|
|
<div className={styles.tip}>
|
|
|
<div className='t1'>
|
|
|
<div className='icon'>
|
|
|
+ <img src={require('@/assets/img/A6_gen_active.png')} draggable='false' alt='' />
|
|
|
+ </div>
|
|
|
+ <div className='txt'>
|
|
|
+ {myLangue === 'ZH' ? '见于史书记载的人物' : 'Figures recorded in historical documents'}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className='t1'>
|
|
|
+ <div className='icon'>
|
|
|
<img src={require('@/assets/img/A6_gen_normal.png')} draggable='false' alt='' />
|
|
|
</div>
|
|
|
- <div className='txt'>{myLangue === 'ZH' ? '为勘误之人' : 'For the correction'}</div>
|
|
|
+ <div className='txt'>
|
|
|
+ {myLangue === 'ZH'
|
|
|
+ ? '未见于史书记载的人物'
|
|
|
+ : 'Figures not recorded in historical documents'}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className='t2'>
|
|
|
+ <RightLine className='t2_rightLine' />
|
|
|
+ <div className='txt'>{myLangue === 'ZH' ? '直系亲属' : 'Lineal relatives'}</div>
|
|
|
</div>
|
|
|
<div className='t2'>
|
|
|
<RightLineDash className='t2_rightLine' />
|
|
|
- <div className='txt'>{myLangue === 'ZH' ? '为非直系父子关系' : 'For non-direct father-son relationships'}</div>
|
|
|
+ <div className='txt'>{myLangue === 'ZH' ? '非直系亲属' : 'Collateral relatives'}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.miniMap}>
|
lanxin
