WIP: feat: 迁移并优化v1动画能力 #4798
WIP: feat: 迁移并优化v1动画能力 #4798
Conversation
Summary of ChangesHello @q32757468, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求迁移并优化了动画能力，为图表元素引入了新的动画方法。它提供了灵活的 SVG 动画工具，并将其集成到 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
Summary of ChangesHello @q32757468, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求迁移并优化了图表库的动画能力，引入了一系列新的 SVG 动画功能，包括通用属性动画、变换动画和沿路径动画。这些增强功能旨在提升图表元素的视觉动态性和交互性，并提供了在边上动画显示令牌的特定功能，以更好地支持流程和状态的可视化。同时，新增了相应的示例来帮助开发者理解和使用这些新特性。 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| let duration | ||
| let reversed | ||
| let selector | ||
| let rorate | ||
| let timing = 'linear' | ||
| if (typeof options === 'object') { | ||
| duration = options.duration | ||
| reversed = options.reversed === true | ||
| selector = options.selector | ||
| if (options.rotate === false) { | ||
| rorate = '' | ||
| } else if (options.rotate === true) { | ||
| rorate = 'auto' | ||
| } else if (options.rotate != null) { | ||
| rorate = `${options.rotate}` | ||
| } | ||
|
|
||
| if (options.timing) { | ||
| timing = options.timing | ||
| } | ||
| } else { | ||
| duration = options | ||
| reversed = false | ||
| selector = null | ||
| } | ||
|
|
||
| duration = duration || 1000 | ||
|
|
||
| const attrs: AnimationOptions = { | ||
| dur: `${duration}ms`, | ||
| repeatCount: '1', | ||
| calcMode: timing, | ||
| fill: 'freeze', | ||
| } | ||
|
|
||
| if (rorate) { | ||
| attrs.rotate = rorate | ||
| } | ||
|
|
||
| if (reversed) { | ||
| attrs.keyPoints = '1;0' | ||
| attrs.keyTimes = '0;1' | ||
| } | ||
|
|
||
| if (typeof options === 'object') { | ||
| const { duration, reversed, selector, rotate, timing, ...others } = | ||
| options | ||
| Object.keys(others).forEach((key) => { | ||
| attrs[key] = others[key] | ||
| }) | ||
| } |
There was a problem hiding this comment.
在 sendToken 方法中，变量 rorate 存在拼写错误，应为 rotate。这个拼写错误导致 rotate 动画选项无法正确传递。请修正该变量及其所有引用。
let duration
let reversed
let selector
let rotate
let timing = 'linear'
if (typeof options === 'object') {
duration = options.duration
reversed = options.reversed === true
selector = options.selector
if (options.rotate === false) {
rotate = ''
} else if (options.rotate === true) {
rotate = 'auto'
} else if (options.rotate != null) {
rotate = `${options.rotate}`
}
if (options.timing) {
timing = options.timing
}
} else {
duration = options
reversed = false
selector = null
}
duration = duration || 1000
const attrs: AnimationOptions = {
dur: `${duration}ms`,
repeatCount: '1',
calcMode: timing,
fill: 'freeze',
}
if (rotate) {
attrs.rotate = rotate
}
if (reversed) {
attrs.keyPoints = '1;0'
attrs.keyTimes = '0;1'
}
if (typeof options === 'object') {
const { duration, reversed, selector, rotate, timing, ...others } =
options
Object.keys(others).forEach((key) => {
attrs[key] = others[key]
})
}| animate(elem: SVGElement | string, options: Util.AnimationOptions) { | ||
| const target = typeof elem === 'string' ? this.findOne(elem) : elem | ||
| if (target == null) { | ||
| throw new Error('Invalid animation element.') | ||
| } | ||
|
|
||
| const revert = () => { | ||
| if (!target.parentNode) { | ||
| Dom.remove(target) | ||
| } | ||
| } | ||
|
|
||
| if (!target.parentNode) { | ||
| Dom.appendTo(target, this.graph.view.stage) | ||
| } | ||
|
|
||
| const onComplete = options.complete | ||
| options.complete = (e: Event) => { | ||
| revert() | ||
|
|
||
| if (onComplete) { | ||
| onComplete(e) | ||
| } | ||
| } | ||
|
|
||
| return Util.animate(target as SVGElement, options) | ||
| } | ||
|
|
||
| animateTransform(elem: SVGElement | string, options: Util.AnimationOptions) { | ||
| const target = typeof elem === 'string' ? this.findOne(elem) : elem | ||
| if (target == null) { | ||
| throw new Error('Invalid animation element.') | ||
| } | ||
|
|
||
| const revert = () => { | ||
| if (!target.parentNode) { | ||
| Dom.remove(target) | ||
| } | ||
| } | ||
|
|
||
| if (!target.parentNode) { | ||
| Dom.appendTo(target, this.graph.view.stage) | ||
| } | ||
|
|
||
| const onComplete = options.complete | ||
| options.complete = (e: Event) => { | ||
| revert() | ||
|
|
||
| if (onComplete) { | ||
| onComplete(e) | ||
| } | ||
| } | ||
|
|
||
| return Util.animateTransform(target as SVGElement, options) | ||
| } | ||
|
|
||
| animateAlongPath( | ||
| elem: SVGElement | string, | ||
| options: { | ||
| duration?: number | ||
| reversed?: boolean | ||
| selector?: string | ||
| // https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/rotate | ||
| rotate?: boolean | number | 'auto' | 'auto-reverse' | ||
| // https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/calcMode | ||
| timing?: 'linear' | 'discrete' | 'paced' | 'spline' | ||
| } & Util.AnimationOptions, | ||
| ) { | ||
| const target = typeof elem === 'string' ? this.findOne(elem) : elem | ||
| if (target == null) { | ||
| throw new Error('Invalid animation element.') | ||
| } | ||
|
|
||
| let path | ||
| const { selector } = options | ||
|
|
||
| if (typeof selector === 'string') { | ||
| path = this.findOne(selector, this.container, this.selectors) | ||
| } else { | ||
| path = this.container.querySelector('path') | ||
| } | ||
|
|
||
| if (!(path instanceof SVGPathElement)) { | ||
| throw new Error('Token animation requires a valid connection path.') | ||
| } | ||
|
|
||
| const revert = () => { | ||
| if (!target.parentNode) { | ||
| Dom.remove(target) | ||
| } | ||
| } | ||
|
|
||
| if (!target.parentNode) { | ||
| Dom.appendTo(target, this.graph.view.stage) | ||
| } | ||
|
|
||
| const onComplete = options.complete | ||
| options.complete = (e: Event) => { | ||
| revert() | ||
|
|
||
| if (onComplete) { | ||
| onComplete(e) | ||
| } | ||
| } | ||
|
|
||
| return Util.animateAlongPath(target as SVGElement, options, path) | ||
| } |
There was a problem hiding this comment.
animate、animateTransform 和 animateAlongPath 方法中存在大量重复代码，主要用于准备动画目标元素（查找、附加到 DOM、包装 complete 回调）。为了提高代码的可维护性和减少冗余，建议将这部分通用逻辑提取到一个私有辅助方法中。
private _prepareAnimation(elem: SVGElement | string, options: Util.AnimationOptions) {
const target = typeof elem === 'string' ? this.findOne(elem) : elem
if (target == null) {
throw new Error('Invalid animation element.')
}
const revert = () => {
if (!target.parentNode) {
Dom.remove(target)
}
}
if (!target.parentNode) {
Dom.appendTo(target, this.graph.view.stage)
}
const onComplete = options.complete
options.complete = (e: Event) => {
revert()
if (onComplete) {
onComplete(e)
}
}
return target as SVGElement
}
animate(elem: SVGElement | string, options: Util.AnimationOptions) {
const target = this._prepareAnimation(elem, options)
return Util.animate(target, options)
}
animateTransform(elem: SVGElement | string, options: Util.AnimationOptions) {
const target = this._prepareAnimation(elem, options)
return Util.animateTransform(target, options)
}
animateAlongPath(
elem: SVGElement | string,
options: {
duration?: number
reversed?: boolean
selector?: string
// https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/rotate
rotate?: boolean | number | 'auto' | 'auto-reverse'
// https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/calcMode
timing?: 'linear' | 'discrete' | 'paced' | 'spline'
} & Util.AnimationOptions,
) {
const target = this._prepareAnimation(elem, options)
let path
const { selector } = options
if (typeof selector === 'string') {
path = this.findOne(selector, this.container, this.selectors)
} else {
path = this.container.querySelector('path')
}
if (!(path instanceof SVGPathElement)) {
throw new Error('Token animation requires a valid connection path.')
}
return Util.animateAlongPath(target, options, path)
}
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #4798 +/- ##
==========================================
- Coverage 82.23% 81.55% -0.69%
==========================================
Files 328 327 -1
Lines 37613 37869 +256
Branches 7584 7591 +7
==========================================
- Hits 30930 30883 -47
- Misses 6659 6962 +303
Partials 24 24
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
| } catch (error) { | ||
| // pass | ||
| } |
There was a problem hiding this comment.
在 createAnimation 函数中，try...catch 块静默地捕获了 setupAnimation 可能抛出的错误。这可能导致动画失败时难以调试。建议至少在开发模式下打印错误。此外，当 setupAnimation 失败时，创建的 <animate> 元素没有从 DOM 中移除，可能导致内存泄漏。建议在捕获到错误时移除该元素。
| } catch (error) { | |
| // pass | |
| } | |
| } catch (error) { | |
| elem.removeChild(animate) | |
| // pass | |
| } |
| animate(elem: SVGElement | string, options: Util.AnimationOptions) { | ||
| const target = typeof elem === 'string' ? this.findOne(elem) : elem | ||
| if (target == null) { | ||
| throw new Error('Invalid animation element.') | ||
| } | ||
|
|
||
| const revert = () => { | ||
| if (!target.parentNode) { | ||
| Dom.remove(target) | ||
| } | ||
| } | ||
|
|
||
| if (!target.parentNode) { | ||
| Dom.appendTo(target, this.graph.view.stage) | ||
| } | ||
|
|
||
| const onComplete = options.complete | ||
| options.complete = (e: Event) => { | ||
| revert() | ||
|
|
||
| if (onComplete) { | ||
| onComplete(e) | ||
| } | ||
| } | ||
|
|
||
| return Util.animate(target as SVGElement, options) | ||
| } | ||
|
|
||
| animateTransform(elem: SVGElement | string, options: Util.AnimationOptions) { | ||
| const target = typeof elem === 'string' ? this.findOne(elem) : elem | ||
| if (target == null) { | ||
| throw new Error('Invalid animation element.') | ||
| } | ||
|
|
||
| const revert = () => { | ||
| if (!target.parentNode) { | ||
| Dom.remove(target) | ||
| } | ||
| } | ||
|
|
||
| if (!target.parentNode) { | ||
| Dom.appendTo(target, this.graph.view.stage) | ||
| } | ||
|
|
||
| const onComplete = options.complete | ||
| options.complete = (e: Event) => { | ||
| revert() | ||
|
|
||
| if (onComplete) { | ||
| onComplete(e) | ||
| } | ||
| } | ||
|
|
||
| return Util.animateTransform(target as SVGElement, options) | ||
| } |
There was a problem hiding this comment.
animate 和 animateTransform 方法的实现几乎完全相同，唯一的区别是它们分别调用了 Util.animate 和 Util.animateTransform。这造成了代码重复。建议将通用逻辑提取到一个私有方法中，以提高代码的可维护性。
private createCellAnimation(
elem: SVGElement | string,
options: Util.AnimationOptions,
animateFn: (elem: SVGElement, options: Util.AnimationOptions) => () => void,
) {
const target = typeof elem === 'string' ? this.findOne(elem) : elem
if (target == null) {
throw new Error('Invalid animation element.')
}
const revert = () => {
if (!target.parentNode) {
Dom.remove(target)
}
}
if (!target.parentNode) {
Dom.appendTo(target, this.graph.view.stage)
}
const onComplete = options.complete
options.complete = (e: Event) => {
revert()
if (onComplete) {
onComplete(e)
}
}
return animateFn(target as SVGElement, options)
}
animate(elem: SVGElement | string, options: Util.AnimationOptions) {
return this.createCellAnimation(elem, options, Util.animate)
}
animateTransform(elem: SVGElement | string, options: Util.AnimationOptions) {
return this.createCellAnimation(elem, options, Util.animateTransform)
}| if (typeof selector === 'string') { | ||
| path = this.findOne(selector, this.container, this.selectors) | ||
| } else { | ||
| path = this.container.querySelector('path') |
There was a problem hiding this comment.
在 animateAlongPath 方法中，当没有提供 selector 时，会默认使用 this.container.querySelector('path') 来查找路径。如果 container 中存在多个 <path> 元素，这可能会导致选择到错误的路径，使动画行为不符合预期。建议在检测到多个路径时抛出错误或显示警告，以提高鲁棒性。
src/view/edge/index.ts
Outdated
| let duration | ||
| let reversed | ||
| let selector | ||
| let rorate |
There was a problem hiding this comment.
在 sendToken 方法中，变量 rorate 存在拼写错误，应该是 rotate。这个拼写错误在方法中多处出现，建议统一修正。
| let rorate | |
| let rotate |
| if (typeof selector === 'string') { | ||
| path = this.findOne(selector, this.container, this.selectors) | ||
| } else { | ||
| path = this.container.querySelector('path') |
There was a problem hiding this comment.
在 sendToken 方法中，当没有提供 selector 时，会默认使用 this.container.querySelector('path') 来查找路径。如果 container 中存在多个 <path> 元素，这可能会导致选择到错误的路径，使动画行为不符合预期。建议在检测到多个路径时抛出错误或显示警告，以提高鲁棒性。
| }) | ||
| const view2 = graph.findView(rect2) | ||
|
|
||
| view2?.on('view:render', () => { |
There was a problem hiding this comment.
我感觉也和现有的其他使用形式不太搭，但是考虑和参考了很多其他的方式，只有这种改动成本最低最使用最简单了，开会可以再讨论讨论~
| // pass | ||
| } | ||
|
|
||
| return () => {} |
There was a problem hiding this comment.
好想法，从使用形式上来看支持链式调用在添加多个动画效果时会方便很多，尝试支持一下看看支持链式调用会不会有其他问题
q32757468
force-pushed
the
feat_animation
branch
from
bbf7032 to
0dcf0d4
Compare
| const token = Vector.create('circle', { r: 6, fill: 'green' }) | ||
|
|
||
| view.on('view:render', () => { | ||
| view.sendToken(token.node, { |
There was a problem hiding this comment.
可考虑下配置式实现，默认是节点加载完成开始动画，节点上添加对应的 API，例如 startAnimate
、 stopAnimate
q32757468
force-pushed
the
feat_animation
branch
from
0dcf0d4 to
9d1b81f
Compare
3 participants
Description
不同动画api的效果图：
Motivation and Context
Types of changes
Self Check before Merge