定义joint.dia.Link时如何设置标签属性的样式? [英] How to style the attributes of a label when defining a joint.dia.Link?

问题描述

我调查了 中的一些示例，并了解可以通过这种方式直接定义Link属性:

I looked into dia.Link.prototype.attr with a few examples and understand that Link attributes can be directly defined this way:

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 属性?例如:

But is there a way I can define in here the default dia.Link.prototype.label attributes? E.g.:

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是一组链接，因此不可能这样吗?

I tried several variations of the above code without success, but since .labels is a group of link, wouldn't something like this be possible?

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

An alternative to this I attempted was to programmatically style the first default label through link.label(index, properties, opt), but once I add, for example, one more label to the link through the inspector, both labels attributes are lost (the former and the added one)...

推荐答案

现在无法更改默认标签属性(除非问题.

Right now it is not possible to change the default label attributes (unless the dia.LinkView.prototype.updateLabels() method is overriden). I've created an issue in the JointJS repository.

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

If you add labels through the ui.Inspector plugin, you can modify the labels inspector definition, so that every new label has the desired properties. For that use the defaultValue field option and make the inspector field invisible as shown in the example below.

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时如何设置标签属性的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！