mxgraph

MxCodec decode function not working with XML

浪尽此生 提交于 2020-01-16 14:12:47
问题 I'm developing an application in javascript with Angular7 and MxGraph library. I am able to save the MxGraph model into an XML with this code: var enc = new mx.mxCodec(mx.mxUtils.createXmlDocument()); var node = enc.encode(editor.graph.getModel()); this.xml = mx.mxUtils.getPrettyXml(node); But I'm not able to decode it, following APIs indications. I have also tried to paste the XML and try to decode it without success like this: // Usually I would do this: // var doc = mx.mxUtils.parseXml

MxCodec decode function not working with XML

可紊 提交于 2020-01-16 14:11:14
问题 I'm developing an application in javascript with Angular7 and MxGraph library. I am able to save the MxGraph model into an XML with this code: var enc = new mx.mxCodec(mx.mxUtils.createXmlDocument()); var node = enc.encode(editor.graph.getModel()); this.xml = mx.mxUtils.getPrettyXml(node); But I'm not able to decode it, following APIs indications. I have also tried to paste the XML and try to decode it without success like this: // Usually I would do this: // var doc = mx.mxUtils.parseXml

mxClient renders different shapes all as squares

大城市里の小女人 提交于 2020-01-16 08:45:10
问题 Several weeks ago I have been asked to upgrade a web application based on a very old version of MXGraph library (version 2.4). The application integrated also the 'grapheditor' a sort of demo application evolved later in Diagramly and then in Draw.io). Recently I completed the more problematic step, the transition from old "grapheditor" to Draw.io, so I am now able to open all the previous diagrams (saved as plain xml), modify and save them consistently. Ok, this is the nice part. The bad

Need to integrate mxGraph with react js

匆匆过客 提交于 2020-01-13 17:59:06
问题 Is there any sample or example projects that explain how to integrate mxGraph with react js? 回答1: import React, {Component} from "react"; import PropTypes from "prop-types"; import ReactDOM from "react-dom"; import { mxGraph, mxParallelEdgeLayout, mxConstants, mxEdgeStyle, mxLayoutManager, mxCell, mxGeometry, mxRubberband, mxDragSource, mxKeyHandler, mxCodec, mxClient, mxConnectionHandler, mxUtils, mxToolbar, mxEvent, mxImage, mxFastOrganicLayout } from "mxgraph-js"; class

MxGraph: Is it possible to render a graph in HTML without SVG?

ぃ、小莉子 提交于 2020-01-13 09:33:28
问题 I'm looking for a way to render a graph in HTML, solely using mxGraph Javascript, without the use of an SVG canvas. The user manual says: mxGraph also includes the feature to render entirely using html, this limits the range of functionality available, but is suitable for more simple diagrams." However, I've tried the following without success: var editor = new mxEditor(); var graph = new mxGraph(graphContElem, new mxGraphModel(), 'fastest'); // fastest maps to stricthtml graph.setHtmlLabels

MxGraph: Is it possible to render a graph in HTML without SVG?

守給你的承諾、 提交于 2020-01-13 09:32:15
问题 I'm looking for a way to render a graph in HTML, solely using mxGraph Javascript, without the use of an SVG canvas. The user manual says: mxGraph also includes the feature to render entirely using html, this limits the range of functionality available, but is suitable for more simple diagrams." However, I've tried the following without success: var editor = new mxEditor(); var graph = new mxGraph(graphContElem, new mxGraphModel(), 'fastest'); // fastest maps to stricthtml graph.setHtmlLabels

mxGraph 如何实现自定义工具箱

吃可爱长大的小学妹 提交于 2020-01-11 06:38:19
概述 本篇的内容是围绕如何使用 vue 和 mxGraph 实现一个自定义的工具箱。 主要完成以下功能: 自定义工具箱的内容。 从工具箱中拖拽一个工具项到绘画区并生成对应的cell。 双击生成的cell可以查看cell的数据。 本例可以在 github 上看到源码。 基本布局 我们设想的基本布局如上图所示,整个界面分为左右两部分,左侧为工具箱,右侧为我们的绘图区。 由于样式不是我们此次的重点,所以我们将以列表的形式展示工具项,当然你也可以使用一些第三方组件库如 element-ui 、 ant design vue 、 vuetify 等来实现一些很酷炫的展示效果。 定义模型 首先我们需要定义工具箱的数据结构: [ { icon: String || Object, // 工具项图标的路径或对象 title: String, // 工具项的名称 width: Number, // 工具项的默认宽度 height: Number, // 工具项的默认高度 style: { ... // 工具项生成的 cell 样式 } } ] 可以看出来工具箱是一个数组,其中存放了多个工具项对象,每个工具项中包含了多个属性。 需要注意的是 style 这个属性,这个属性里包含的信息是用于描述此工具项在拖拽后生成的 cell 的样式,取值范围请参考 官方api 。 了解了数据结构后

mxGraph: Create graph with XML

半世苍凉 提交于 2020-01-01 07:04:56
问题 I am trying to create graph from xml file. My JavaScript Code is- function loadXML() { console.log("Inside loadXML"); var doc = mxUtils.parseXml('<root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="<img src="printer.png" onClick="printer()" style="width:40px;height:40px;"><img>" style="shape=image" vertex="1" parent="1"><mxGeometry x="434" y="81" width="40" height="40" as="geometry"/></mxCell></root>'); console.log("XML Parse: " + doc); var codec = new mxCodec(doc); console

How to Integrate mxgraph editor in angular2?

我与影子孤独终老i 提交于 2019-12-22 11:28:58
问题 How to Integrate mxgraph editor in angular2 by using JavaScript client library? What I've tried so far, I have installed mxgraph using the npm package -- npmjs.com/package/mxgraph. Then imported all the required js file from it through vendor.ts file as shown in mxgraph editor index.html. Created type definition files for mxutil, editorUI, editor js files in it. We are not able to load the graph editor in my angular2 app. So, I would like to know how to integrate mxgraph editor in to my

Can mxGraph export graphs as PDFs?

久未见 提交于 2019-12-21 00:40:12
问题 I am working on a project that uses mxGraph where I am required to export a high resolution output in PDF for a service process diagram. I've tried recreating the graph using JGraphX, the Java Swing client and exporting that to a PDF, but the result is not close to what the browser displays. There's no PDF export in JavaScript on the client, does mxGraph have any explicit support for PDF generation from JavaScript? 回答1: I'll explain the case of a client initiated request, where the diagram is