如何在node.js中使用mxGraph实例_Node.js_Mxgraph

如何在node.js中使用mxGraph实例
node.js
如何在node.js中使用mxGraph实例,node.js,mxgraph,Node.js,Mxgraph,我正在尝试使用node.js中的mxGraph实例来准备带有自定义逻辑的XML导出（用于前端，我只是将逻辑移到后端）。是否可以在nodej.js中使用mxGraph实例的完整API，我想知道像graph.getDefaultParent（）等方法我正在尝试使用插件XML生成的correct加载新实例，但下面的代码不会影响模型（没有其他错误）您好，非常感谢您推荐jsdom。以下代码段生成xml并将其嵌入html： 'use strict'; const jsdom = require("js
我正在尝试使用node.js中的mxGraph实例来准备带有自定义逻辑的XML导出（用于前端，我只是将逻辑移到后端）。是否可以在nodej.js中使用mxGraph实例的完整API，我想知道像
graph.getDefaultParent（）等方法
我正在尝试使用插件XML生成的correct加载新实例，但下面的代码不会影响模型（没有其他错误）
您好，非常感谢您推荐jsdom。
以下代码段生成xml并将其嵌入html：
'use strict';
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM();

global.window = dom.window;
global.document = window.document;
global.XMLSerializer = window.XMLSerializer
global.navigator = window.navigator;

var viewerModulePath = "mxgraph";
const mxgraph = require(viewerModulePath)({
  // These are wrong but harmless at the moment.
  mxImageBasePath: "./src/images",
  mxBasePath: "./src"
});

const {mxGraph, mxCodec, mxUtils} = mxgraph;

const helloWorldGraph = makeHelloWorld();
console.log(graphToHTML(helloWorldGraph));

function makeHelloWorld() {
  // Extracted from https://github.com/jgraph/mxgraph/blob/master/javascript/examples/helloworld.html
  const graph = new mxGraph();

  // Gets the default parent for inserting new cells. This
  // is normally the first child of the root (ie. layer 0).
  var parent = graph.getDefaultParent();

  // Adds cells to the model in a single step
  graph.getModel().beginUpdate();
  try {
    var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
    var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
    var e1 = graph.insertEdge(parent, null, '', v1, v2);
  } finally {
    // Updates the display
    graph.getModel().endUpdate();
  }
  return graph;
}

function graphToXML(graph) {
  var encoder = new mxCodec();
  var result = encoder.encode(graph.getModel());
  return mxUtils.getXml(result);
}

function graphToHTML(graph) {
  const xml = graphToXML(graph);
  return getHtml2(xml, "Hello World!");
}

// Extracted from https://github.com/jgraph/drawio/blob/master/src/main/webapp/js/diagramly/EditorUi.js#L1452
function getHtml2(xml, title, redirect) {

  const EditorUi = {
    drawHost: 'https://www.draw.io'
  }

  var js = EditorUi.drawHost + '/js/viewer.min.js';
  var foldingEnabled = false;

  // Makes XHTML compatible
  if (redirect != null) {
    redirect = redirect.replace(/&/g, '&amp;');
  }

  var data = {highlight: '#0000ff', nav: foldingEnabled, resize: false, xml: xml, toolbar: ''};

  var style = 'max-width:100%;border:1px solid transparent;';

  return ((redirect == null) ? '<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->\n' : '') +
    '<!DOCTYPE html>\n<html' + ((redirect != null) ? ' xmlns="http://www.w3.org/1999/xhtml">' : '>') +
    '\n<head>\n' + ((redirect == null) ? ((title != null) ? '<title>' + mxUtils.htmlEntities(title) +
      '</title>\n' : '') : '<title>Draw.io Diagram</title>\n') +
    ((redirect != null) ? '<meta http-equiv="refresh" content="0;URL=\'' + redirect + '\'"/>\n' : '') +
    '<meta charset="utf-8"/>\n</head>\n<body>' +
    '\n<div class="mxgraph" style="' + style + '" data-mxgraph="' + mxUtils.htmlEntities(JSON.stringify(data)) + '"></div>\n' +
    ((redirect == null) ? '<script type="text/javascript" src="' + js + '"></script>' :
    '<a style="position:absolute;top:50%;left:50%;margin-top:-128px;margin-left:-64px;" ' +
    'href="' + redirect + '" target="_blank"><img border="0" ' +
    'src="' + EditorUi.drawHost + '/images/drawlogo128.png"/></a>') +
    '\n</body>\n</html>\n';
}

布局算法也运行良好
我曾尝试从diagramly中提取更多代码以支持SVG画布，但它感觉复杂且无法维护。Jsdom确实支持画布，因此从技术上讲，应该可以单独从NodeJ生成SVG
我希望这有帮助 mxGraph需要DOM，我认为Node没有。有一个包可以添加DOM，但我从来没有测试过使用它。它工作得很好！注意：它是npm安装jsdom（而不是jdom）
mxCell {
  value: undefined,
  geometry: undefined,
  style: undefined,
  children: 
   [ mxCell {
       value: undefined,
       geometry: undefined,
       style: undefined,
       parent: [Circular],
       id: '1',
       mxObjectId: 'mxCell#5' } ],
  id: '0',
  mxObjectId: 'mxCell#4' }
mxGraphModel {
  currentEdit: 
   mxUndoableEdit {
     source: [Circular],
     changes: [],
     significant: true,
     notify: [Function] },
  root: 
   mxCell {
     value: undefined,
     geometry: undefined,
     style: undefined,
     children: [ [Object] ],
     id: '0',
     mxObjectId: 'mxCell#4' },
  nextId: 2,
  cells: 
   { '0': 
      mxCell {
        value: undefined,
        geometry: undefined,
        style: undefined,
        children: [Array],
        id: '0',
        mxObjectId: 'mxCell#4' },
     '1': 
      mxCell {
        value: undefined,
        geometry: undefined,
        style: undefined,
        parent: [Object],
        id: '1',
        mxObjectId: 'mxCell#5' } },
  updateLevel: 0,
  endingUpdate: false,
  eventListeners: 
   [ 'change',
     [Function],
     'change',
     [Function],
     'change',
     [Function],
     'change',
     [Function],
     'change',
     [Function],
     'change',
     [Function] ] }

'use strict';
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM();

global.window = dom.window;
global.document = window.document;
global.XMLSerializer = window.XMLSerializer
global.navigator = window.navigator;

var viewerModulePath = "mxgraph";
const mxgraph = require(viewerModulePath)({
  // These are wrong but harmless at the moment.
  mxImageBasePath: "./src/images",
  mxBasePath: "./src"
});

const {mxGraph, mxCodec, mxUtils} = mxgraph;

const helloWorldGraph = makeHelloWorld();
console.log(graphToHTML(helloWorldGraph));

function makeHelloWorld() {
  // Extracted from https://github.com/jgraph/mxgraph/blob/master/javascript/examples/helloworld.html
  const graph = new mxGraph();

  // Gets the default parent for inserting new cells. This
  // is normally the first child of the root (ie. layer 0).
  var parent = graph.getDefaultParent();

  // Adds cells to the model in a single step
  graph.getModel().beginUpdate();
  try {
    var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
    var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
    var e1 = graph.insertEdge(parent, null, '', v1, v2);
  } finally {
    // Updates the display
    graph.getModel().endUpdate();
  }
  return graph;
}

function graphToXML(graph) {
  var encoder = new mxCodec();
  var result = encoder.encode(graph.getModel());
  return mxUtils.getXml(result);
}

function graphToHTML(graph) {
  const xml = graphToXML(graph);
  return getHtml2(xml, "Hello World!");
}

// Extracted from https://github.com/jgraph/drawio/blob/master/src/main/webapp/js/diagramly/EditorUi.js#L1452
function getHtml2(xml, title, redirect) {

  const EditorUi = {
    drawHost: 'https://www.draw.io'
  }

  var js = EditorUi.drawHost + '/js/viewer.min.js';
  var foldingEnabled = false;

  // Makes XHTML compatible
  if (redirect != null) {
    redirect = redirect.replace(/&/g, '&amp;');
  }

  var data = {highlight: '#0000ff', nav: foldingEnabled, resize: false, xml: xml, toolbar: ''};

  var style = 'max-width:100%;border:1px solid transparent;';

  return ((redirect == null) ? '<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->\n' : '') +
    '<!DOCTYPE html>\n<html' + ((redirect != null) ? ' xmlns="http://www.w3.org/1999/xhtml">' : '>') +
    '\n<head>\n' + ((redirect == null) ? ((title != null) ? '<title>' + mxUtils.htmlEntities(title) +
      '</title>\n' : '') : '<title>Draw.io Diagram</title>\n') +
    ((redirect != null) ? '<meta http-equiv="refresh" content="0;URL=\'' + redirect + '\'"/>\n' : '') +
    '<meta charset="utf-8"/>\n</head>\n<body>' +
    '\n<div class="mxgraph" style="' + style + '" data-mxgraph="' + mxUtils.htmlEntities(JSON.stringify(data)) + '"></div>\n' +
    ((redirect == null) ? '<script type="text/javascript" src="' + js + '"></script>' :
    '<a style="position:absolute;top:50%;left:50%;margin-top:-128px;margin-left:-64px;" ' +
    'href="' + redirect + '" target="_blank"><img border="0" ' +
    'src="' + EditorUi.drawHost + '/images/drawlogo128.png"/></a>') +
    '\n</body>\n</html>\n';
}

npm install mxgraph jdom
node helloworld.js > helloworld.html