如果要实现模型流程图需要自己封装相应的Item吗?

[Yeung2017]

在GGEditor demo 源码中没有找到如 http://antv.alipay.com/assets/dist/3.0.0/g6/1.x/editor/model-flow.html
所示模型流程图的相关代码,故如果目前要实现模型流图,需要自己封装相应的Item吗?
如果需要自己封装,有没有最佳实践?

[gaoli]

是的，模型流程图中的 Item 并非内置形状，需要自己封装。

[gaoli]

@Yeung2017 可以参考以下注册代码：

<RegisterNode
  name="model-card"
  config={{
    draw(item) {
      const group = item.getGraphicGroup();
      const model = item.getModel();
      const width = 184;
      const height = 40;
      const x = -width / 2;
      const y = -height / 2;
      const borderRadius = 4;
      const keyShape = group.addShape('rect', {
        attrs: {
          x,
          y,
          width,
          height,
          radius: borderRadius,
          fill: 'white',
          stroke: '#CED4D9',
        },
      });

      // 左侧色条
      group.addShape('path', {
        attrs: {
          path: [
            ['M', x, y + borderRadius],
            ['L', x, y + height - borderRadius],
            ['A', borderRadius, borderRadius, 0, 0, 0, x + borderRadius, y + height],
            ['L', x + borderRadius, y],
            ['A', borderRadius, borderRadius, 0, 0, 0, x, y + borderRadius],
          ],
          fill: this.color_type,
        },
      });

      // 类型 logo
      group.addShape('image', {
        attrs: {
          img: this.type_icon_url,
          x: x + 16,
          y: y + 12,
          width: 20,
          height: 16,
        },
      });

      // 名称文本
      const label = model.label ? model.label : this.label;

      group.addShape('text', {
        attrs: {
          text: label,
          x: x + 52,
          y: y + 13,
          textAlign: 'start',
          textBaseline: 'top',
          fill: 'rgba(0,0,0,0.65)',
        },
      });

      // 状态 logo
      group.addShape('image', {
        attrs: {
          img: this.state_icon_url,
          x: x + 158,
          y: y + 12,
          width: 16,
          height: 16,
        },
      });

      return keyShape;
    },

    // 设置锚点
    anchor: [
      [0.5, 0], // 上面边的中点
      [0.5, 1], // 下边边的中点
    ],
  }}
/>

[Yeung2017]

@gaoli 谢谢.

在我自己的实现中,我一开始发现锚点不对,如图所示:

参考了你的代码才发现是没有返回正确元素的keyShape的原因.
最开始,我做了如下return,所以导致锚点不对:

        return group.addShape('text', {
            attrs: {
              // 截取文本避免超长
              text: fp.truncate({
                length: maxLableLength,
                omission: '…'
              }, label),
              x: x + 52,
              y: y + (height - fontSize) / 2,
              textAlign: 'start',
              textBaseline: 'top',
              fill: 'rgba(0,0,0,0.65)',
              fontSize,
              color
            }
          });

还是文档没吃透,导致花了很多时间查这个bug

[gaoli]

👍

[ghost]

@Yeung2017 请问下，这里是如何实现的？

我参考了上面的注册代码，但是拖拽面板元素的实现还是很模糊，请指教，谢谢！

[mxy2316868975javascript]

@Yeung2017 请问下，这里是如何实现的？

我参考了上面的注册代码，但是拖拽面板元素的实现还是很模糊，请指教，谢谢！

请问是如何引用自定义节点的

[ShawLyon]

@Yeung2017 可以参考以下注册代码：

<RegisterNode
  name="model-card"
  config={{
    draw(item) {
      const group = item.getGraphicGroup();
      const model = item.getModel();
      const width = 184;
      const height = 40;
      const x = -width / 2;
      const y = -height / 2;
      const borderRadius = 4;
      const keyShape = group.addShape('rect', {
        attrs: {
          x,
          y,
          width,
          height,
          radius: borderRadius,
          fill: 'white',
          stroke: '#CED4D9',
        },
      });

      // 左侧色条
      group.addShape('path', {
        attrs: {
          path: [
            ['M', x, y + borderRadius],
            ['L', x, y + height - borderRadius],
            ['A', borderRadius, borderRadius, 0, 0, 0, x + borderRadius, y + height],
            ['L', x + borderRadius, y],
            ['A', borderRadius, borderRadius, 0, 0, 0, x, y + borderRadius],
          ],
          fill: this.color_type,
        },
      });

      // 类型 logo
      group.addShape('image', {
        attrs: {
          img: this.type_icon_url,
          x: x + 16,
          y: y + 12,
          width: 20,
          height: 16,
        },
      });

      // 名称文本
      const label = model.label ? model.label : this.label;

      group.addShape('text', {
        attrs: {
          text: label,
          x: x + 52,
          y: y + 13,
          textAlign: 'start',
          textBaseline: 'top',
          fill: 'rgba(0,0,0,0.65)',
        },
      });

      // 状态 logo
      group.addShape('image', {
        attrs: {
          img: this.state_icon_url,
          x: x + 158,
          y: y + 12,
          width: 16,
          height: 16,
        },
      });

      return keyShape;
    },

    // 设置锚点
    anchor: [
      [0.5, 0], // 上面边的中点
      [0.5, 1], // 下边边的中点
    ],
  }}
/>

力哥，请问这段自定义节点代码怎么挂载到Flow流程图

[SHUwangwei]

想问一下 ggeditor自定义组件 出了text img之类 能自定义dom元素吗

[blindperson]

@Yeung2017 请问你的代码里面的item是什么？不会用啊

[ShirlyZhang]

想问一下 ggeditor自定义组件 出了text img之类 能自定义dom元素吗

同问

[trankle]

@Yeung2017 请问你的代码里面的item是什么？不会用啊

@blindperson 你好，这个问题怎么解决的？