How To Use Jointjs And Svg To Draw Element Tools

I'm new to javascript and SVG and I have no graphical programming background and this is my first project using all of those. So I started to make a custom element just like Mike G

Solution 1:

The first question as been answered on update. As for the second question (concerning the red square conflicting with the element shape inside a rect) this was my work around:

Use the path to draw the tools elements instead of using basic shapes, that way it won't conflict with the element shape.

Example:

'<gclass="element-tool-link"><circlefill="green"r="11"cx="160"cy="40"stroke="black"stroke-width="1"/>',
    '<pathtransform="scale(.7) translate(-16, -16)"/>',
    '<title>creates a new link</title>',
'</g>'

would turn into:

'<gclass="element-tool-link">',
    '<pathd="M33 0 a 11 11 0 1 0 0.0001 0z "stroke="black"fill="lightblue"stroke-width="1"/>',
    '<pathtransform="scale(.7) "stroke="black"stroke-width="1"d="M58,16  H 37 "/>',
    '<title>creates a new link</title>',
'</g>'

where '<path d="M33 0 a 11 11 0 1 0 0.0001 0z " stroke="black" fill="lightblue" stroke-width="1"/>' defines a circle shape.