style specific port in jointjs

故事扮演 提交于 2020-01-02 00:25:26

问题


1) I'm using JointJS diagramming lib. I want to change the css of a particular inPort when using joint.shapes.devs.

For linking sourcePort to the target I'm using

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

It's giving me accurate source port, but how to apply css on this particular port after knowing it as my source connector? Is there a way?

2) Can we fit/wrap the label automatically inside the element if its width is longer than the element-width? I'm using joint.shapes.devs.Atomic element(s).

I came across foreignobject but don't know how to use it? Can anyone throw some light on it?


回答1:


1)

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

where the first part of the first argument before slash is a CSS selector pointing to the port circle SVG element, the second part is an SVG attribute to be set on that element and the second argument is a value to be set for that attribute. An alternative syntax for doing the same thing would be:

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

See the attr() method reference for details: http://jointjs.com/api#joint.dia.Element:attr.

2) The joint.shapes.devs.Atomic shape does not automatically do that. You would have to create your own shape and do it there either via foreighObject or programmatically in JavaScript. As a reference for using foreignObject, please see the joint.shapes.basic.TextBlock shape that is defined in this file: https://github.com/DavidDurman/joint/blob/master/plugins/joint.shapes.basic.js.



来源:https://stackoverflow.com/questions/22069466/style-specific-port-in-jointjs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!