freedak/chinese-family-tree-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.6.0.3

Browse Source
This commit is contained in:
freedakgmail
2025-12-10 11:13:16 +08:00
parent e9b1641509
commit 77df6a0e74
143 changed files with 857 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/tree/page.tsx
+45 -39
View File
@@ -83,6 +83,7 @@ export default function TreePage() {
// 从 URL 参数读取视图模式
useEffect(() => {
if (!searchParams) return
const view = searchParams.get('view')
if (view === 'd3-org-chart' || view === 'traditional') {
setViewMode(view)
@@ -177,53 +178,58 @@ export default function TreePage() {
|| treeData.members[treeData.rootId]
if (!founderMember) return
// 查找树内容容器
const treeContent = containerRef.current.querySelector('div[style*="transform"]') as HTMLElement
if (!treeContent) return
// 查找始祖节点
const founderNode = containerRef.current.querySelector(`[data-member-id="${founderMember.id}"]`) as HTMLElement
if (!founderNode) return
const containerRect = containerRef.current.getBoundingClientRect()
const treeRect = treeContent.getBoundingClientRect()
// 计算树的实际尺寸（需要除以当前缩放）
const treeWidth = treeRect.width / scale
const treeHeight = treeRect.height / scale
// 计算适合容器的缩放比例
const padding = 40
const scaleX = (containerRect.width - padding * 2) / treeWidth
const scaleY = (containerRect.height - padding * 2) / treeHeight
const fitScale = Math.min(scaleX, scaleY, 1)
const newScale = Math.max(fitScale, 0.2)
// 先重置位置到0，再设置缩放
// 第一步：重置到标准状态 (scale=1, position=0)
setScale(1)
setPosition({ x: 0, y: 0 })
setScale(newScale)
// 延迟计算位置（等待缩放和位置重置生效）
// 第二步：等待 DOM 更新后计算
setTimeout(() => {
if (!containerRef.current) return
const updatedFounderNode = containerRef.current.querySelector(`[data-member-id="${founderMember.id}"]`) as HTMLElement
if (!updatedFounderNode) return
// 查找树内容容器
const treeContent = containerRef.current.querySelector('div[style*="transform"]') as HTMLElement
if (!treeContent) return
const updatedContainerRect = containerRef.current.getBoundingClientRect()
const updatedNodeRect = updatedFounderNode.getBoundingClientRect()
// 查找始祖节点
const founderNode = containerRef.current.querySelector(`[data-member-id="${founderMember.id}"]`) as HTMLElement
if (!founderNode) return
// 计算始祖节点居中的偏移
// 容器中心点
const containerCenterX = updatedContainerRect.width / 2
// 始祖节点中心点相对于容器的位置
const nodeCenterX = updatedNodeRect.left - updatedContainerRect.left + updatedNodeRect.width / 2
// 需要的偏移量
const offsetX = containerCenterX - nodeCenterX
const containerRect = containerRef.current.getBoundingClientRect()
const treeRect = treeContent.getBoundingClientRect()
setPosition({ x: offsetX, y: 0 })
}, 150)
}, [treeData.rootId, treeData.members, scale])
// 此时 scale=1，所以 treeRect 就是实际尺寸
const treeWidth = treeRect.width
const treeHeight = treeRect.height
// 计算适合容器的缩放比例
const padding = 40
const scaleX = (containerRect.width - padding * 2) / treeWidth
const scaleY = (containerRect.height - padding * 2) / treeHeight
const fitScale = Math.min(scaleX, scaleY, 1)
const newScale = Math.max(fitScale, 0.2)
// 设置新缩放
setScale(newScale)
// 第三步：等待缩放生效后计算始祖居中位置
setTimeout(() => {
if (!containerRef.current) return
const updatedFounderNode = containerRef.current.querySelector(`[data-member-id="${founderMember.id}"]`) as HTMLElement
if (!updatedFounderNode) return
const updatedContainerRect = containerRef.current.getBoundingClientRect()
const updatedNodeRect = updatedFounderNode.getBoundingClientRect()
// 计算始祖节点居中的偏移
const containerCenterX = updatedContainerRect.width / 2
const nodeCenterX = updatedNodeRect.left - updatedContainerRect.left + updatedNodeRect.width / 2
const offsetX = containerCenterX - nodeCenterX
setPosition({ x: offsetX, y: 0 })
}, 100)
}, 100)
}, [treeData.rootId, treeData.members])
const handleMouseDown = (e: React.MouseEvent) => {
// 如果点击的是节点卡片，不启动拖拽