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

Question

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

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

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

问题：有没有办法让它保持图像样式并能够定义连接引脚坐标（猜测通过样式字符串或通过 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>

这样，可以同时定义 input/output 个引脚并保留覆盖层。

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

Customize connection inputs and outputs of Jgraph mxCell

javascript

css

mxgraph

jgraph