@antv/x6-angular-shape
TypeScript icon, indicating that this package has built-in type declarations

2.0.2 • Public • Published

@antv/x6-angular-shape

渲染节点

我们提供了一个独立的包 @antv/x6-angular-shape 以支持将 Angular 的组件/模板作为节点进行渲染。

Component 渲染

@Component({
  selector: 'app-node',
  templateUrl: './node.component.html',
  styleUrls: ['./node.component.scss'],
})
export class NodeComponent implements AfterViewInit, OnChanges {
  @Input() value: string
}
import { register } from '@antv/x6-angular-shape'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    register({
      shape: 'custom-angular-component-node',
      width: 120,
      height: 20,
      content: NodeComponent,
      injector: this.injector,
    })

    this.graph.addNode({
      shape: 'custom-angular-component-node',
      x: 100,
      y: 100,
      data: {
        // Input 的参数必须放在这里
        ngArguments: {
          value: '糟糕糟糕 Oh my god',
        },
      },
    })
  }
}

TemplateRef 渲染

<ng-template #template let-data="ngArguments">
  <section class="template-container">
    <span class="value">{{ data.value }}</span>
  </section>
</ng-template>
import { register } from '@antv/x6-angular-shape'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('template') template: TemplateRef<{}>

  ngAfterViewInit(): void {
    register({
      shape: 'custom-angular-template-node',
      width: 120,
      height: 20,
      content: this.template,
      injector: this.injector,
    })

    this.graph.addNode({
      shape: 'custom-angular-template-node',
      x: 100,
      y: 100,
      data: {
        ngArguments: {
          value: '魔法怎么失灵啦',
        },
      },
    })
  }
}

更新节点

无论是使用 Component 还是 TemplateRef, 都是一样的更新方式.

node.setData({
  ngArguments: {
    value: '晚风中闪过 几帧从前啊',
  },
})

有 demo 吗?

有的, 因为 X6 渲染节点部分与框架是解耦的. 因此 x6-angular-shape 包并非是直接在源代码里改的, 而是在一个单独的 Angular 环境中开发的. 该 demo 还提供了多种节点类型的性能测试, 详情请参考Eve-Sama/x6-angular-shapeX6 与 G6 的性能对比, 以及 X6 多节点类型下的 FPS 临界点讨论

FAQ

为什么输入属性不能直接放在 data 中而需要放在 ngArguments 中? 且为什么不叫 ngInput?

因为并非所有 node.data 中的属性都是输入属性, 所以遍历 data 中的所有属性进行赋值是不合适的. 至于为什么叫 ngArguments 主要是有两点考虑.

  • 1.x 版本中已经这么用了, 沿用该 API 可以降低用户升级成本
  • Input 的概念其实是来自 Component, 而 TemplateRef 中是 context, 在二者的基础上抽象一个 Arguments 的概念更通用些

2.x 版本的 x6-angular-shape 相比较 1.x 版本有什么新特性吗?

实现思路其实和之前是差不多的. 但是确实有几个点值得一提.

demo 更聚焦

1.x 版本的 demo 除了渲染组件外, 还写了连线、清除等一系列案例. 看似扩展, 实则眼花缭乱. 作为 x6-angular-shape的 demo, 2.x 版本更加聚焦, 更加聚焦于 shape 的使用与性能测试等, 与插件无关的内容请查看 X6 官网.

功能更稳定

在 1.x 版本中, 虽然实现了功能, 但是使用场景的思考不够全面. 比如ngArguments的变化, 对 TemplateRef的场景并不生效. 虽然对Component生效但是无法触发ngOnChanges. 而在新版本中, 这些问题都将不复存在.

版本要求

你的 Angular 版本至少在 14 及以上才可以. 14 以下需要用 hack 的方式实现一些特性, 比较麻烦. 暂时不提供, 如有需要可提 issue, 我再专门介绍下如何实现.

Package Sidebar

Install

npm i @antv/x6-angular-shape

Weekly Downloads

193

Version

2.0.2

License

MIT

Unpacked Size

46.1 kB

Total Files

33

Last publish

Collaborators

  • lvisei
  • yisi.wang
  • basketduck
  • biupiubiupiu
  • flash1
  • dreammy23
  • laixingui.lxg
  • zhangjunjie-loki
  • rainy25ghz
  • zeyuwang
  • yanxiong
  • susiwen8
  • freestyle21
  • soundquiet
  • elaine.q.10
  • sturuby
  • sakuya223
  • serializedowen
  • xdzhao
  • yangzhanmei
  • wjgogogo
  • leungwensen
  • dori
  • iaaron
  • yard
  • simaq
  • dxq613
  • intchous
  • susan_ann
  • jinke.li
  • lzxue
  • army8735
  • atool
  • baizn
  • dengfuping
  • neoddish
  • jeffy2012
  • zqlu
  • afc163
  • pomelo-nwu
  • kopiluwaky
  • ccnuzindex
  • panyuqi
  • bubkoo
  • zengyue
  • kasmine
  • boyu.zlj
  • l1ud0ngq1
  • newbyvector
  • winniexing
  • chenluli
  • kn9117
  • xdddst
  • semious2020
  • esora
  • nadia_liu
  • bbsqq
  • mxz96102
  • openwayne
  • pearmini
  • pddpd
  • yiqianyao
  • zhanba
  • cxxxxxn