In Grapheditor's Sidebar.js, there are cases of createVertexTemplateEntry() call which I am interested in. Particularly the case when image is set as style, namely:
this.createVertexTemplateEntry('image;html=1;image=someobject100x100.png', 100, 100, '', 'title', tags)
I would like to keep this particular style and also be able to define the connection pins, for example, 2 input connections and 1 output at x,y coordinates (x,y\in[0,1]). Currently I do it by appending "shape=mxgraph.modules.someobject;" to style string, with N/S fields read from someobject node of modules.xml. However, once I add "shape=.." to the existing "image;..." style then the image is not displayed anymore but the input/output connection pins are correctly positioned.
Question: is there a way to keep it an image style and be able to define the connection pin coordinates (guess either via style string or through the xml stencil definition)?
Incase anyone needs the solution, this is how I came about this question eventually. The solution is inspired with shapes.xml (line 38 from the source code):
Define shape to be added to the palette (function from the Sidebar.js file)
this.createVertexTemplateEntry( 'shape=mxgraph.module.type;', 100, 100, '', 'Type', null, null, '')
in Stencils/module.xml add shape element with constraint descirbing the input-output pin coordinates (named N,S), shape rectangle rect, and image element with the path towards the png picture:
<shapes name="mxgraph.module">
<shape aspect="variable" h="100" name="Type" strokewidth="1" w="100">
<connections>
<constraint name="N" perimeter="0" x="0.5" y="0"/>
<constraint name="S" perimeter="0" x="0.5" y="1"/>
</connections>
<foreground>
<rect h="60" w="30" x="0" y="0"/>
<fillstroke/>
</foreground>
</shape>
<shape aspect="variable" h="60" name="Workbench Connection" strokewidth="1" w="30">
<connections>
<constraint name="N" perimeter="0" x="0.5" y="0"/>
<constraint name="S" perimeter="0" x="0.5" y="1"/>
<constraint name="E" perimeter="0" x="0" y="0.5"/>
</connections>
<foreground>
<rect h="100" w="100" x="0" y="0"/>
<fillstroke/>
<image src="assets/picture.png" x="0" y="0" w="100" h="10" flipH="0"/>
</foreground>
</shape>
</shapes>
Such way, it is possible to define both the input/output pins and retain an overlay.