从 mxGraph 中的 Draw.io 导入自定义库的形状

Question

我目前正在 javascript 中使用 mxGraph 库，我正在尝试在 draw.io 中创建自己的形状，导出它们，然后根据需要重复使用它们在我自己的程序中使用 mxGraph 库。

到目前为止，我已经尝试创建一个自定义库，其中包含我所有的形状。我已经将它导出到 XML 中，这给了我一个半编码的 XML 文件。然后，我想将该 mxLibrary 导入我自己的应用程序中，以便我可以重复使用这些形状来创建我自己的图表。我不知道如何处理那个 XML 文件。

我也试过从 Extras -> Edit Diagram 中获取 XML 并使用编解码器重新导入它，然后使用 mxGraph#addCells 但形状不再分组，我不能似乎找到了如何克隆它们。

我的目标是在某个地方拥有我的 shapes/cells 列表，我可以随时重复使用它。

如果这不可能，我该怎么做呢？我还查看了如何创建自己的形状（使用 redrawPath 和样式），但它看起来真的很长很无聊。

这是 XML 的示例。形状是一个简单的双正方形。

<mxlibrary>[{"xml":"xVNBbsIwEHyN78EugjOhcOqpLzDJgi05XstZSPJ7trFbiAqCqpV6sLQ7O2N7xrJQZdNvow7mDWtwQr0KVUZESlXTl+CckIWthVoLKQteQm7uTGfjtAg6gqdnBDIJTtodISEJaGlwGThEPIZMg0jQT46q0HuoSO8+6cX3K4zUfP4WsAGKA1M6W5NJjGVWGbAHQ1NMt/keX8qLHy6ypdv21GN7nbEE70FXH33HDyHUylDDO65nXOo2sD1u9rYH3nV1N4lrx/LfHL/8veO9da5Eh5Exjx5+GUIWzJNgmHRXAS1uBLT4eUDcXn7TOJt8tjM=","w":80,"h":80,"aspect":"fixed","title":"custom_shape_1"}]</mxlibrary>

提前致谢！

Answer 1

根据您的需要，我知道有 2 种方法。

将 draw.IO 作为 iframe 嵌入到您的应用程序中，并创建一个插件，在侧边栏上添加您自己的图标调色板。你可以观看 p1 插件代码，并复制它 plugin list in draw.io, look for the p1 plugin . code example of how to integrate draw.io in your app 提示：如果未加载插件，请检查插件文件夹 link.

如果您在自己的应用程序中添加顶点，请创建您自己的样式，并在创建时重复使用。

updateStyles()

{

var style = new Object();

style[(<any>window).mxConstants.STYLE_SHAPE] = 
(<any>window).mxConstants.SHAPE_IMAGE;

style[(<any>window).mxConstants.STYLE_PERIMETER] = 
(<any>window).mxPerimeter.RectanglePerimeter;

style[(<any>window).mxConstants.STYLE_IMAGE] = 
'../assets/transformer.png';

style[(<any>window).mxConstants.STYLE_FONTCOLOR] = '#000000';

style[(<any>window).mxConstants.STYLE_WHITE_SPACE] = 'wrap';

style[(<any>window).mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom';

this.graph.getStylesheet().putCellStyle('transformer', style);

}

在使用 insertVertex 函数创建顶点时重复使用此样式。

 try {
  const parent = this.graph.getDefaultParent();

  this.graph.getModel().beginUpdate();

  const vertex = this.graph.insertVertex(parent, uuid.v4(), node, 40, 40, 80, 40, 'transformer');

} finally {

  this.graph.getModel().endUpdate();

}

从 mxGraph 中的 Draw.io 导入自定义库的形状

Import Shapes of Custom Library from Draw.io in mxGraph

mxgraph

jgraph

draw.io