EdgeView 的 sendToken 方法页面加载后的第一次执行总是失败

[upwell]

问题描述

在我的电脑上能够稳定复现，官方的 demo 示例：

官方示例

页面加载后的第一次点击 矩形A 时，小球并不会出现在边上。但是之后的每次点击，小球都会出现在边上。

环境

浏览器：

操作系统：macOS Big Sur 16.1

可能的原因

调试一下后，在下面的代码片段中找到了一些线索

X6/packages/x6/src/view/edge.ts

Lines 1541 to 1565 in 77d3abe

	const parent = target.parentNode
	const revert = () => {
	if (!parent) {
	Dom.remove(target)
	}
	}
	const vToken = Vector.create(target as SVGElement)
	if (!parent) {
	vToken.appendTo(this.graph.view.stage)
	}
	const onComplete = attrs.complete
	attrs.complete = (e: Event) => {
	revert()
	if (callback) {
	callback()
	}
	if (onComplete) {
	onComplete(e)
	}
	}

动画的代码片段：

X6/packages/x6/src/util/dom/geom.ts

Lines 435 to 451 in 77d3abe

	function setupAnimation(
	animate: SVGAnimationElement,
	options: AnimationOptions,
	) {
	const { start, complete, repeat, ...attrs } = options
	attr(animate, attrs)
	start && animate.addEventListener('beginEvent', start)
	complete && animate.addEventListener('endEvent', complete)
	repeat && animate.addEventListener('repeatEvent', repeat)
	const ani = animate as any
	ani.beginElement()
	return () => ani.endElement()
	}

在收到 endEvent 事件的时候，会执行 sendToken 里面的 attrs.complete，会把 token 的 svg 删除掉，这是期望的逻辑，本身没有什么问题。

但当页面第一次加载，首次调用 sendToken 时，比较奇怪的是 ani.beginElement() 会被 restart，这样就触发 endEvent 和 beginEvent，导致 token 闪了一下就消失了。

具体不知道什么原因会导致 animation 被 restart，这里有一段关于restart的描述，不知道是不是浏览器行为。

https://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart

[x6-bot]

👋 @upwell

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[upwell]

问题重现视频，刷新页面之后，首次点击的时候，token闪一下就会消失：

[x6-bot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the AntV community! 💪💯

[upwell]

Still here. Not stale.

[x6-bot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the AntV community! 💪💯

[x6-bot]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot 🤖, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the AntV community! 💪💯

[Tabris7777]

同样碰到了这个问题，找了一天找不到头绪。。

[NewByVector]

@Tabris7777 应该和 #1952 这个有关。

[Tabris7777]

X6/packages/x6/src/util/dom/geom.ts
setTimeout(() => {
ani.beginElement();
},10)
ani.beginElement()设置一个10ms的setTimeout可以解决这个问题，但是原因还不清楚，只是个暂时的解决方式

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.