Skip to content
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

Closed
wants to merge 6 commits into from

Conversation

zmcode
Copy link

@zmcode zmcode commented Dec 4, 2023

增加标尺插件, 添加canvas:changesize事件
image
Video_2023-12-13_140652

dengzuming added 2 commits December 4, 2023 14:12

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@Aarebecca
Copy link
Contributor

Hi~, 这个插件看起来很棒,有兴趣后面将它放进 G6 5.0 中吗

@@ -501,6 +501,7 @@ export default class ViewController {
plugin.positionInit();
}
});
graph.emit('canvas:changeSize', { width, height });
Copy link
Contributor

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
Copy link
Contributor

Choose a reason for hiding this comment

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

可以为这些不太常见的成员变量添加上注释吗

Copy link
Contributor

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()
}


Copy link
Contributor

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)
Copy link
Contributor

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进行绘制能够获得跨渲染引擎的绘制能力。

Copy link
Author

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进行绘制能够获得跨渲染引擎的绘制能力。

我晚点在追加一下拖放的, 挺多东西要考虑的

Copy link
Author

Choose a reason for hiding this comment

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

@Aarebecca 我更新了, 你看看需要改什么, 我英语不好, 有些命名感觉不好, 特别是 配置和方法名 需要变动不?

@Aarebecca Aarebecca changed the title 添加Ruler插件和增加canvas:changeSize事件 feat: add Ruler plugin and canvas:changesize event Dec 4, 2023
font: CanvasRenderingContext2D['font']
}

export interface RulerConf {
Copy link
Contributor

Choose a reason for hiding this comment

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

这里也适用 RulerConfig

Copy link
Contributor

@Aarebecca Aarebecca left a 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
Copy link
Contributor

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;
Copy link
Contributor

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 {
Copy link
Contributor

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' }
Copy link
Contributor

Choose a reason for hiding this comment

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

这里命名格式参考下面的说明

@Aarebecca
Copy link
Contributor

另外,麻烦在 PR 里面贴一个演示视频或者截图呢 ❤️

@zmcode
Copy link
Author

zmcode commented Dec 13, 2023

可以在 site 中添加一个使用该插件的案例吗,这样大家就能看到这个组件了

我本地打开的site, 无法显示图表示例
image

@zmcode
Copy link
Author

zmcode commented Dec 13, 2023

另外,麻烦在 PR 里面贴一个演示视频或者截图呢 ❤️

@Aarebecca 我更新一个gif图片, 但是示例我无法编写, 空白

@hustcc
Copy link
Member

hustcc commented Apr 23, 2024

Hi~, 这个插件看起来很棒,有兴趣后面将它放进 G6 5.0 中吗

@zmcode 这个 PR 先不处理了,建议来加到 G6 5.0 中 👍🏻

@hustcc hustcc closed this Apr 23, 2024
@zmcode
Copy link
Author

zmcode commented Apr 23, 2024 via email

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.

None yet

3 participants