javascript - 自定义 Jgraph mxCell 的连接输入和输出

Question

在 Grapheditor 的 Sidebar.js 中，有一些我感兴趣的 createVertexTemplateEntry() 调用的情况。特别是当图像被设置为样式时的情况，即:

this.createVertexTemplateEntry('image;html=1;image=someobject100x100.png', 100, 100, '', 'title', tags)

我想保留这种特殊的风格，并且还能够定义连接引脚，例如，在 x,y 坐标 (x,y\in[0,1]) 处有 2 个输入连接和 1 个输出。目前，我通过将 "shape=mxgraph.modules.someobject;" 附加到样式字符串来实现，其中 N/S 字段从 modules.xml 的某个对象节点读取。但是，一旦我将 "shape=.." 添加到现有的 "image;..." 样式中，就不再显示图像，而是显示输入/输出连接引脚正确定位。

问题:有没有办法让它保持图像样式并能够定义连接引脚坐标(猜测是通过样式字符串还是通过 xml 模板定义)？

Answer 1

万一有人需要解决方案，这就是我最终提出这个问题的方式。该解决方案的灵感来自 shapes.xml(来自 source code 的第 38 行):

定义要添加到调色板的形状(来自 Sidebar.js 文件的函数)

this.createVertexTemplateEntry( 'shape=mxgraph.module.type;', 100, 100,  '', 'Type', null, null, '')

在 Stencils/module.xml 中添加具有约束的形状元素，描述输入输出引脚坐标(命名为 N、S)、形状矩形 rect 和 image 元素与指向 png 图片的路径:

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

这样，可以定义输入/输出引脚并保留覆盖层。