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属性？ 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是一组链接，不会有这样的事情吗？

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

Answer 1

现在无法更改默认标签属性（除非覆盖dia.LinkView.prototype.updateLabels()方法）。我在JointJS存储库中创建了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时如何设置标签属性的样式？

1 个答案: