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

Question

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

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，这样的事情不可能吗？

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

Answer 1

现在无法更改默认标签属性（除非 JointJS 存储库中的 dia.LinkView.prototype.updateLabels() method is overriden). I've created an issue。

如果您通过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' }}
          }
        }
      }
    }
  }
}

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

How to style the attributes of a label when defining a joint.dia.Link?

css

json

properties

jointjs