-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add Ruler plugin and canvas:changesize event #5218
Conversation
Hi~, 这个插件看起来很棒,有兴趣后面将它放进 G6 5.0 中吗 |
@@ -501,6 +501,7 @@ export default class ViewController { | |||
plugin.positionInit(); | |||
} | |||
}); | |||
graph.emit('canvas:changeSize', { width, height }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
g6 中抛出的事件名通常是以全小写的形式,你可以改为 canvas:changesize
来和已有事件名保持一致
|
||
private lineHeight: number = 10 | ||
|
||
private unitInterval: number = 10 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
可以为这些不太常见的成员变量添加上注释吗
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
一个比较好的注释方式是使用 /** */
来进行注释,这样编辑器可以自动识别提示,例如:
/** canvas width */
public width: number = 0;
this.drawPointsAndLine() | ||
} | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
可以格式化一下代码,以移除多余的空行~
|
||
private drawPointsAndLine() { | ||
const ruleCanvas = this.canvas | ||
const unitInterval = Math.round(this.unitInterval / this.scale) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
使用原生 canvas 来绘制标尺通常能够获得更好的绘制和交互性能,不过在缩放 / 拖拽过程中需要考虑标尺画布和 G6 画布之间的同步。对于缩放交互,这个 PR 已经考虑到了,不过拖拽画布的交互可能需要进一步考虑一下。
另外,如果后面有兴趣将这个插件为 G6 5.0 提 PR 的话,使用 G6 5.0 提供的绘制API进行绘制能够获得跨渲染引擎的绘制能力。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
使用原生 canvas 来绘制标尺通常能够获得更好的绘制和交互性能,不过在缩放 / 拖拽过程中需要考虑标尺画布和 G6 画布之间的同步。对于缩放交互,这个 PR 已经考虑到了,不过拖拽画布的交互可能需要进一步考虑一下。 另外,如果后面有兴趣将这个插件为 G6 5.0 提 PR 的话,使用 G6 5.0 提供的绘制API进行绘制能够获得跨渲染引擎的绘制能力。
我晚点在追加一下拖放的, 挺多东西要考虑的
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Aarebecca 我更新了, 你看看需要改什么, 我英语不好, 有些命名感觉不好, 特别是 配置和方法名 需要变动不?
font: CanvasRenderingContext2D['font'] | ||
} | ||
|
||
export interface RulerConf { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里也适用 RulerConfig
哈
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
可以在 site 中添加一个使用该插件的案例吗,这样大家就能看到这个组件了
|
||
private lineHeight: number = 10 | ||
|
||
private unitInterval: number = 10 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
一个比较好的注释方式是使用 /** */
来进行注释,这样编辑器可以自动识别提示,例如:
/** canvas width */
public width: number = 0;
height: number; | ||
scale: number; | ||
unitInterval: number; | ||
showUnitLabel: boolean; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
unitLabel
这里表示的是刻度值吗?如果是的话翻译成 tickLabel
会更好些
@@ -0,0 +1,163 @@ | |||
export enum ruleDirection { HORIZONTAL = 'horizontal', VERTICAL = 'vertical' } | |||
|
|||
export interface pointConfig { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
interface 或者 type 通常以首字母大写的驼峰形式,这里应为 PointConfig
@@ -0,0 +1,163 @@ | |||
export enum ruleDirection { HORIZONTAL = 'horizontal', VERTICAL = 'vertical' } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里命名格式参考下面的说明
另外,麻烦在 PR 里面贴一个演示视频或者截图呢 ❤️ |
@Aarebecca 我更新一个gif图片, 但是示例我无法编写, 空白 |
@zmcode 这个 PR 先不处理了,建议来加到 G6 5.0 中 👍🏻 |
这是来自QQ邮箱的假期自动回复邮件。
你好,我最近正在休假中,无法亲自回复你的邮件。我将在假期结束后,尽快给你回复。
|
增加标尺插件, 添加canvas:changesize事件
