css - 定义 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() 方法)。我创建了一个 issue在 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' }}
          }
        }
      }
    }
  }
}