JointJS Hafen auf Klick

Question

Ich suche Halbkreis Ports in JointJS programmatisch hinzuzufügen, wenn auf einem Port-like "hinzufügen" klicken, etwa so: mockup

Ich habe erstellt Grund Ports und es sieht so aus, als könnte ich element.addPort(port, [opt]) verwenden, aber ich bin mir nicht sicher, wie ich ein Click-Ereignis innerhalb des Rechteckelements auslösen würde, um den Port hinzuzufügen. Das Styling des Hinzufügen-Buttons und der Ports versuche ich auch noch mit Joint neu zu erstellen.

Answer 1

dieser Schritte sollen Ihnen helfen:

1. Zunächst einmal müssen Sie ein Element erstellen mit benutzerdefinierten HTML darüber hinweg. Sie können dies erreichen, indem Sie das joint.shapes.devs.Model erweitern. Sie können ein großes Tutorial darüber finden Sie hier: http://resources.jointjs.com/tutorial/html-elements
2. Dann haben Sie einen eigenen Port definieren wie hier erklärt: https://stackoverflow.com/a/31650340/4109477 (Hinweis: die SVG-Pfad eines Halbkreises ist: d = "M100,100 a20 20 0 0,0 40,0")
3. schließlich nur Sie Anruf haben den element.addPort (Port, [opt]) Funktion, wenn der Knopf in Ihrem benutzerdefinierten HTML-Elemente geklickt wird.

Ich hoffe, es hilft.