Skip to content

解决minimap在图形长宽比和容器差异大时,缩略图跳转计算错误 - #5083

Open
ttdys108 wants to merge 1 commit into
antvis:masterfrom
ttdys108:master
Open

解决minimap在图形长宽比和容器差异大时,缩略图跳转计算错误#5083
ttdys108 wants to merge 1 commit into
antvis:masterfrom
ttdys108:master

Conversation

@ttdys108

@ttdys108 ttdys108 commented Jul 9, 2026

Copy link
Copy Markdown

比如图形长宽比1:10000,缩略图点击跳转错误

📝 Description

🖼️ Screenshot

Before After

💡 Motivation and Context

🧩 Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Enhancement (changes that improvement of current feature or performance)
  • Refactoring (changes that neither fixes a bug nor adds a feature)
  • Test Case (changes that add missing tests or correct existing tests)
  • Code style optimization (changes that do not affect the meaning of the code)
  • Docs (changes that only update documentation)
  • Chore (changes that don't modify src or test files)

🔍 Self Check before Merge

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

比如图形长宽比1:10000,缩略图点击跳转错误

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request refactors the scrollTo method in the MiniMap plugin to use pageX/pageY offsets relative to the target graph's container, avoiding coordinate inconsistencies caused by internal child elements. It also replaces the static this.ratio with the dynamic scale from this.targetGraph.transform.getScale() to fix coordinate deviations in non-scroller mode. The reviewer suggested adding defensive checks for Dom.offset to prevent potential runtime errors, handling potential division by zero or NaN for the scale factors, and updating the doAction method similarly to maintain consistency.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment on lines +320 to +322
const containerOffset = Dom.offset(this.targetGraph.container)
const x = e.pageX - containerOffset.left
const y = e.pageY - containerOffset.top

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

改进建议
Dom.offset 在某些极端情况下(例如元素未挂载、处于测试环境或 DOM 结构异常时)可能会返回 nullundefined。如果直接访问其属性可能会导致运行时报错 TypeError: Cannot read properties of null

建议进行防御性处理,为 containerOffset 提供一个默认值,例如 || { left: 0, top: 0 },以增强代码的健壮性。

Suggested change
const containerOffset = Dom.offset(this.targetGraph.container)
const x = e.pageX - containerOffset.left
const y = e.pageY - containerOffset.top
const containerOffset = Dom.offset(this.targetGraph.container) || { left: 0, top: 0 }
const x = e.pageX - containerOffset.left
const y = e.pageY - containerOffset.top

Comment on lines +330 to +333
const targetScale = this.targetGraph.transform.getScale()

const cx = (x - ts.tx) / this.ratio
const cy = (y - ts.ty) / this.ratio
const cx = (x - ts.tx) / targetScale.sx
const cy = (y - ts.ty) / targetScale.sy

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

改进建议

  1. 除零/NaN 防御:在极端情况下(例如容器尺寸为 0、缩放比例异常或处于某些过渡动画中),targetScale.sxtargetScale.sy 可能会为 0NaN。直接作为除数会导致计算结果为 InfinityNaN,从而使 centerPoint 计算失效。建议对它们进行防御性处理,若为 0 或无效值,则回退到 this.ratio1
  2. doAction 中的一致性问题:虽然本次修改解决了 scrollTo(点击跳转)中的缩放比不一致问题,但在 doAction 方法(处理拖拽平移,约第 274-280 行)中,依然在使用 this.ratio 进行坐标转换。在非 scroller 模式下,这同样会导致拖拽视口时出现偏差(拖拽速度与鼠标不贴合)。建议在后续重构或同一 PR 中,将 doAction 中的 this.ratio 也替换为 targetScale.sxtargetScale.sy,以保持逻辑的一致性。
const targetScale = this.targetGraph.transform.getScale()
const sx = targetScale.sx || this.ratio || 1
const sy = targetScale.sy || this.ratio || 1

const cx = (x - ts.tx) / sx
const cy = (y - ts.ty) / sy

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant