How to style the attributes of a label when defining a joint.dia.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'
      },
    }
});

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 ...
});

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?

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)...

回答1:

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.

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' }}
          }
        }
      }
    }
  }
}

来源：https://stackoverflow.com/questions/48231587/how-to-style-the-attributes-of-a-label-when-defining-a-joint-dia-link

标签

css

json

properties

jointjs