Flow registerNode 中添加的rect、circle等无法设置fill、stroke属性

ArronYR commented 5 years ago

g6-editor 版本：1.2.0

import G6Editor from '@antv/g6-editor';
const { Flow } = G6Editor;
// 注册输入源基类
Flow.registerNode('model-input', {
  draw(item) {
    const group = item.getGraphicGroup();
    const model = item.getModel();
    const r = 50;
    const x = r / 2;
    const y = r / 2;
    const keyShape = group.addShape('circle', {
      attrs: {
        x,
        y,
        r,
        fill: '#FA8C16',
        stroke: this.stroke_color_type,
      },
    });
    // 名称文本
    const label = model.label ? model.label : this.label;
    group.addShape('text', {
      attrs: {
        text: label,
        x,
        y,
        textAlign: 'center',
        textBaseline: 'middle',
        fill: 'rgba(0, 0, 0, 0.65)',
      },
    });
    return keyShape;
  },
  // 设置锚点
  anchor: [
    [0.5, 1], // 下边边的中点
  ],
});

Flow.registerNode('input-mysql', {
  label: 'MySQL',
  stroke_color_type: '#1890FF',
}, 'model-input');

设置左侧item的data-shape为对应的类型

<li className="getItem" data-shape="input-mysql" data-type="node">
  <span className="panel-type-icon"></span>MySQL
</li>

但在canvas上显示的图形并没有设置上对应的颜色。

guozhaolong commented 5 years ago

this.stroke_color_type改为this.cfg.stroke_color_type

ArronYR commented 5 years ago

我是按照官方的demo弄的 https://github.com/antvis/g6-editor/blob/master/demos/rc-components/ModelFlowEditor.jsx

按照你以上的方法，出现以下错误 TypeError: Cannot read property 'stroke_color_type' of undefined

guozhaolong commented 5 years ago

sorry，改为this.get('stroke_color_type')试一下

ArronYR commented 5 years ago

很遗憾，这样还是不行。

moreorless commented 5 years ago

在g6-editor中硬编码了节点的actived, selected样式，拖拽添加节点后，鼠标悬停在节点上，触发了默认样式。可以重写这几个样式。如下：注意获取样式的函数写在anchor:之前

 Flow.registerNode('model-card', {
  draw(item) {
  },
  getDefaulStyle: function() {
    return {
      stroke: "#1880b4",
      fill: "#265572",
      shadowOffsetX: 0,
      shadowOffsetY: 4,
      shadowBlur: 10,
      shadowColor: "rgba(13, 26, 38, 0.08)",
      lineWidth: 1,
      radius: 4,
      fillOpacity: .92
    }
  },
  getDefaulActivedStyle: function() {
    return {
      stroke: "#1880b4",
      lineWidth: 1
    }
  },
  getDefaulSelectedtyle: function() {
      return {
        stroke: "#1880b4",
        lineWidth: 2
      }
  },

  // 设置锚点
  anchor: [
    [0.5, 1], // 下边边的中点
  ],
});

antvis / g6-editor

Flow registerNode 中添加的rect、circle等无法设置fill、stroke属性 #107