是否有必要将shape抽象出一个basicShape?

[Eve-Sama]

最近在开发Angular的shape包. 开发的时候参考了已有的vue、react的实现. 发现其实90%的代码都是一样的. 不同的就是render的实现过程.

其实有些公司还有内部自研的web框架, 我在想, 未来是否可以把公共的shape逻辑抽象出来, 只对外暴露一些差异的api? 这样的话, 用户那边如果想要扩展属于自己的shape, 可能只需要调用一个类似下面的方法

// X6 basic shape declaration
customShape(shapeName: string, attr: Record<string, any>, render: (...attr) => void);

const register = graph.customShape('my-shape', {
    component: MyComponent
}, attr=> {
    // render code
})

[NewByVector]

好主意呀。其实很多部分代码都是重复的。

[Eve-Sama]

等我把ng shape写完吧. 到时候抽象会更合适些.

[lloydzhou]

https://github.com/lloydzhou/x6-html-shape

这里有一个HTMLShapeView（其实是两个，还有一个FOShapeView）

其中一个使用纯HTML的模式挂载其他框架的自定义组件
另一个保持官方foreignObject的模式

基于这个"BaseShape"，然后所有的框架都只需抽象一个createRender方法即可将自定义组件注册到x6里面（当前已经支持7种不同类型的组件注册成自定义组件）

react18/react17/react-portal/vue2/vue3/vue-teleport/svelte

例如：

将react组件注册成自定义节点

import { register } from 'x6-html-shape'
import createRender from 'x6-html-shape/dist/react'

const render = createRender(Component)

register({
  shape: 'react18-node',
  render,
  width: 100,
  height: 40,
})

将vue组件注册成自定义节点

import createRender from 'x6-html-shape/dist/vue'

const render = createRender(Component)

register({
  shape: 'vue3-node',
  render,
  width: 100,
  height: 40,
})

将svelte组件注册成自定义节点

import createRender from 'x6-html-shape/dist/svelte'

const render = createRender(Component)

register({
  shape: 'svelte-node',
  render,
  width: 100,
  height: 40,
})

[lloydzhou]

这个包主要起到了两个作用：

1. 减少了很多相同代码（就连render的逻辑也做了一样的抽象）
2. 提供了一个简单的接口，非常容易扩展到不同的框架。

function createRender(Component) {
  return function render(node, graph, container) {
    // mount
    return function unmount() {}
  }
}