Search code examples
javascriptcssmxgraphjgraph

Customize connection inputs and outputs of Jgraph mxCell

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)?

Solution

  • 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.