порт определенного стиля в JointJS

1) Я использую библиотеку диаграмм JointJS. Я хочу изменить CSS определенного inPort при использовании joint.shapes.devs.

Для привязки sourcePort к цели, которую я использую

source: { id: source.id, selector: source.getPortSelector(sourcePort)}

Это дает мне точный исходный порт, но как применить css к этому конкретному порту, зная его как исходный соединитель? Есть ли способ?

2) Можем ли мы автоматически подогнать/завернуть метку внутри элемента, если его ширина больше, чем ширина элемента? Я использую элемент(ы) joint.shapes.devs.Atomic.

Я наткнулся на foreignobject, но не знаю, как им пользоваться? Кто-нибудь может пролить свет на это?


javascript css jointjs
person softvar    schedule 27.02.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

1) 

myShape.attr('[port="a"]/fill', 'blue')

где первая часть первого аргумента перед косой чертой — это селектор CSS, указывающий на элемент SVG круга порта, вторая часть — это атрибут SVG, который нужно установить для этого элемента, а второй аргумент — это значение, которое нужно установить для этого атрибута. Альтернативный синтаксис для выполнения того же действия:

myShape.attr({ '[port="a"]': { fill: 'blue' } })

Подробнее см. в справочнике по методу attr(): http://jointjs.com/api#joint.dia.Element:attr.

2) Форма joint.shapes.devs.Atomic не делает этого автоматически. Вам нужно будет создать свою собственную форму и сделать это либо через foreighObject, либо программно в JavaScript. В качестве справки по использованию foreignObject см. фигуру joint.shapes.basic.TextBlock, определенную в этом файле: https://github.com/DavidDurman/joint/blob/master/plugins/joint.shapes.basic.js.

person dave    schedule 27.02.2014
comment
1) Отлично ответил! 2) Я не понял, как переносить текст в joint.shapes.devs? Даже не нашел пример использования foreignObject для переноса текста. Не могли бы вы помочь мне в этом? - person softvar; 28.02.2014