如何在定义 joint.dia.Link 时设置标签属性的样式

Question

我通过几个例子研究了dia.Link.prototype.attr，并了解到链接属性可以直接通过这种方式定义：

joint.dia.Link.define('flow.Link', {
    router: {
      name: 'normal'
    },
    connector: {
      name: 'normal'
    },
    attrs: {
      '.tool-options': {
        'data-tooltip-class-name': 'small',
        'data-tooltip': 'Inspect me',
        'data-tooltip-position': 'left'
      },
      '.marker-source': {
        fill: 'none',
        stroke: 'none'
      },
      '.connection-wrap': {
        fill: 'none'
      },
      '.connection' : {
        stroke: '#0000ff',
        strokeWidth: 2,
        strokeDasharray: '0',
        fill: 'none'
      },
      '.marker-target': {
        fill: '#0000ff',
        stroke: '#0000ff',
        d: 'M 10 0 L 0 5 L 10 10 z'
      },
    }
});

但是有没有办法在这里定义默认dia.Link.prototype.label属性？ 例如：

joint.dia.Link.define('flow.Link', {
    labels: {
      '.label': {
        position: 1, // label at the target
        attrs: {
          text: { fill: 'blue', text: 'My default link label' },
          rect: { fill: 'yellow' },
        }
      }
    },
   // other properties ...
});

我尝试了上述代码的几种变体但没有成功，但由于.labels是一组链接，这样的事情是不可能的吗？

我尝试的另一种方法是通过 link.label(index, properties, opt) 以编程方式设置第一个默认标签的样式，但是一旦我通过检查器向链接添加了一个标签，两个标签属性都会丢失(前者和添加的(...

Answer 1

现在无法

更改默认标签属性(除非 dia.LinkView.prototype.updateLabels(( 方法被覆盖(。我在 JointJS 存储库中创建了一个问题。

如果通过 ui.Inspector 插件添加标签，则可以修改标签检查器定义，以便每个新标签都具有所需的属性。为此，请使用defaultValue字段选项并使检查器字段不可见，如下例所示。

labels: {
  type: 'list',
  item: {
    type: 'object',
    properties: {
      attrs: {
        text: {
          text: {
            type: 'text',
            defaultValue: 'label',
          },
          // `labels/{n}/attrs/text/fill` fake field
          fill: {
            type: 'text',
            // The value of the property,
            // which is set when a new label is created
            defaultValue: 'blue',
            // Make this field invisible
            // So the user won't be able to change it
            attrs: { '.field': { style: 'display:none' }}
          }
        },
        rect: {
          // `labels/{n}/attrs/rect/fill` fake field
          fill: {
            type: 'text',
            defaultValue: 'yellow',
            attrs: { '.field': { style: 'display:none' }}
          }
        }
      }
    }
  }
}