2

I'm looking to add half-circle ports in JointJS programmatically when clicking on a port-like "add" button, like so: mockup

I've created basic ports, and it looks like I could use element.addPort(port, [opt]) but I'm not sure how I'd trigger a click event inside the rectangle element to add the port. The styling of the add button and ports is also something that I'm still trying to recreate with Joint.

Khalid Adil
  • 110
  • 14

1 Answers1

2

Following these steps should help you:

  1. First of all, you have to create an element with custom HTML over it. You can achieve it by extending the joint.shapes.devs.Model. You can find a great tutorial about it here: http://resources.jointjs.com/tutorial/html-elements
  2. Then you have to define a custom port as explained here: https://stackoverflow.com/a/31650340/4109477 (hint: the SVG path of a half-circle is: d="M100,100 a20,20 0 0,0 40,0")
  3. Finally you just have to call the element.addPort(port, [opt]) function when your button in your custom HTML element is clicked.

Hope it helps.

Community
  • 1
  • 1
Márk Farkas
  • 1,426
  • 1
  • 12
  • 25
  • thanks Frakas! I'm seeing an issue where creating the custom HTML over the element is preventing me from using the drag handle that the standard element had. Do you know what could be causing this? – Khalid Adil Dec 22 '16 at 17:57
  • You have to add `pointer-events: none;` style to your main HTML to make sure events are propagated to the JointJS element so, e.g. dragging works. If you would like to interact with some part of the HTML in the "usual" way, for example you want to be able to click on a button which is on your JointJs element, you have to set its(only the button's) style to _pointer-events: auto;_ – Márk Farkas Dec 23 '16 at 12:13