zcy
/
maxGraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
maxGraph/docs/stashed/Codec.js

288 lines
14 KiB
JavaScript
Raw Blame History

/**
* Copyright (c) 2006-2013, JGraph Ltd
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxCodec from '../mxgraph/io/mxCodec';
import mxUtils from '../mxgraph/util/mxUtils';
import mxConstants from '../mxgraph/util/mxConstants';
import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
class Codec extends React.Component {
constructor(props) {
super(props);
}
render = () => {
// Contains a graph description which will be converted
return (
<>
<h1>Codec</h1>
This example demonstrates dynamically creating a graph from XML and
encoding the model into XML, as well as changing the default style for
edges in-place. This graph is embedded in the page.
<div className="mxgraph" style="position:relative;overflow:auto;">
&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell
id="1" parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1"
value="Interval 1"&gt;&lt;mxGeometry x="380" y="0" width="140"
height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3"
vertex="1" parent="1" value="Interval 2"&gt;&lt;mxGeometry x="200"
y="80" width="380" height="30"
as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1"
parent="1" value="Interval 3"&gt;&lt;mxGeometry x="40" y="140"
width="260" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell
id="5" vertex="1" parent="1" value="Interval 4"&gt;&lt;mxGeometry
x="120" y="200" width="240" height="30"
as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1"
parent="1" value="Interval 5"&gt;&lt;mxGeometry x="420" y="260"
width="80" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell
id="7" edge="1" source="2" target="3" parent="1"
value="Transfer1"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="420"
y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="8" edge="1" source="2" target="6" parent="1"
value=""&gt;&lt;mxGeometry as="geometry" relative="1"
y="-30"&gt;&lt;Array as="points"&gt;&lt;Object x="600"
y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="9" edge="1" source="3" target="4" parent="1"
value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="260"
y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="10" edge="1" source="4" target="5" parent="1"
value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="200"
y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="11" edge="1" source="4" target="6" parent="1"
value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1"
y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460"
y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;
</div>
This graph is embedded in the page.
<div
className="mxgraph"
style="position:relative;background:#eeeeee;border:1px solid gray;overflow:auto;width:400px;height:200px;"
>
&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell
id="1" parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1"
value="Interval 1"&gt;&lt;mxGeometry x="380" y="0" width="140"
height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3"
vertex="1" parent="1" value="Interval 2"&gt;&lt;mxGeometry x="200"
y="80" width="380" height="30"
as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1"
parent="1" value="Interval 3"&gt;&lt;mxGeometry x="40" y="140"
width="260" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell
id="5" vertex="1" parent="1" value="Interval 4"&gt;&lt;mxGeometry
x="120" y="200" width="240" height="30"
as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1"
parent="1" value="Interval 5"&gt;&lt;mxGeometry x="420" y="260"
width="80" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell
id="7" edge="1" source="2" target="3" parent="1"
value="Transfer1"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="420"
y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="8" edge="1" source="2" target="6" parent="1"
value=""&gt;&lt;mxGeometry as="geometry" relative="1"
y="-30"&gt;&lt;Array as="points"&gt;&lt;Object x="600"
y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="9" edge="1" source="3" target="4" parent="1"
value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="260"
y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="10" edge="1" source="4" target="5" parent="1"
value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="200"
y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="11" edge="1" source="4" target="6" parent="1"
value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1"
y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460"
y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;
</div>
This graph is embedded in the page.
<div
className="mxgraph"
style="position:relative;background:#eeeeee;border:6px solid gray;overflow:auto;width:400px;height:200px;"
>
&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell
id="1" parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1"
value="Interval 1"&gt;&lt;mxGeometry x="380" y="20" width="140"
height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3"
vertex="1" parent="1" value="Interval 2"&gt;&lt;mxGeometry x="200"
y="80" width="380" height="30"
as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1"
parent="1" value="Interval 3"&gt;&lt;mxGeometry x="40" y="140"
width="260" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell
id="5" vertex="1" parent="1" value="Interval 4"&gt;&lt;mxGeometry
x="120" y="200" width="240" height="30"
as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1"
parent="1" value="Interval 5"&gt;&lt;mxGeometry x="420" y="260"
width="80" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell
id="7" edge="1" source="2" target="3" parent="1"
value="Transfer1"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="420"
y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="8" edge="1" source="2" target="6" parent="1"
value="Transfer2"&gt;&lt;mxGeometry as="geometry" relative="1"
y="0"&gt;&lt;Array as="points"&gt;&lt;Object x="600"
y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="9" edge="1" source="3" target="4" parent="1"
value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="260"
y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="10" edge="1" source="4" target="5" parent="1"
value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="200"
y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="11" edge="1" source="4" target="6" parent="1"
value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1"
y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460"
y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;
</div>
This graph is embedded in the page.
<div
className="mxgraph"
style="position:relative;overflow:hidden;border:6px solid gray;"
>
&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell
id="1" parent="0"/&gt;&lt;mxCell id="2" vertex="1" parent="1"
value="Interval 1"&gt;&lt;mxGeometry x="380" y="20" width="140"
height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3"
vertex="1" parent="1" value="Interval 2"&gt;&lt;mxGeometry x="200"
y="80" width="380" height="30"
as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" vertex="1"
parent="1" value="Interval 3"&gt;&lt;mxGeometry x="40" y="140"
width="260" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell
id="5" vertex="1" parent="1" value="Interval 4"&gt;&lt;mxGeometry
x="120" y="200" width="240" height="30"
as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" vertex="1"
parent="1" value="Interval 5"&gt;&lt;mxGeometry x="420" y="260"
width="80" height="30" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell
id="7" edge="1" source="2" target="3" parent="1"
value="Transfer1"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="420"
y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="8" edge="1" source="2" target="6" parent="1"
value="Transfer2"&gt;&lt;mxGeometry as="geometry" relative="1"
y="0"&gt;&lt;Array as="points"&gt;&lt;Object x="600"
y="60"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="9" edge="1" source="3" target="4" parent="1"
value="Transfer3"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="260"
y="120"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="10" edge="1" source="4" target="5" parent="1"
value="Transfer4"&gt;&lt;mxGeometry as="geometry"&gt;&lt;Array
as="points"&gt;&lt;Object x="200"
y="180"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;mxCell
id="11" edge="1" source="4" target="6" parent="1"
value="Transfer5"&gt;&lt;mxGeometry as="geometry" relative="1"
y="-10"&gt;&lt;Array as="points"&gt;&lt;Object x="460"
y="155"/&gt;&lt;/Array&gt;&lt;/mxGeometry&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;
</div>
This graph is embedded in the page.
</>
);
};
componentDidMount = () => {
const divs = document.getElementsByTagName('*');
for (let i = 0; i < divs.length; i += 1) {
if (divs[i].className.toString().indexOf('mxgraph') >= 0) {
(function(container) {
const xml = mxUtils.getTextContent(container);
const xmlDocument = mxUtils.parseXml(xml);
if (
xmlDocument.documentElement != null &&
xmlDocument.documentElement.nodeName === 'mxGraphModel'
) {
const decoder = new mxCodec(xmlDocument);
const node = xmlDocument.documentElement;
container.innerHTML = '';
const graph = new mxGraph(container);
graph.centerZoom = false;
graph.setTooltips(false);
graph.setEnabled(false);
// Changes the default style for edges "in-place"
const style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
// Enables panning with left mouse button
graph.panningHandler.useLeftButtonForPanning = true;
graph.panningHandler.ignoreCell = true;
graph.container.style.cursor = 'move';
graph.setPanning(true);
if (divs[i].style.width === '' && divs[i].style.height === '') {
graph.resizeContainer = true;
} else {
// Adds border for fixed size boxes
graph.border = 20;
}
decoder.decode(node, graph.getModel());
graph.resizeContainer = false;
// Adds zoom buttons in top, left corner
const buttons = document.createElement('div');
buttons.style.position = 'absolute';
buttons.style.overflow = 'visible';
const bs = graph.getBorderSizes();
buttons.style.top = `${container.offsetTop + bs.y}px`;
buttons.style.left = `${container.offsetLeft + bs.x}px`;
let left = 0;
const bw = 16;
const bh = 16;
function addButton(label, funct) {
const btn = document.createElement('div');
mxUtils.write(btn, label);
btn.style.position = 'absolute';
btn.style.backgroundColor = 'transparent';
btn.style.border = '1px solid gray';
btn.style.textAlign = 'center';
btn.style.fontSize = '10px';
btn.style.cursor = 'hand';
btn.style.width = `${bw}px`;
btn.style.height = `${bh}px`;
btn.style.left = `${left}px`;
btn.style.top = '0px';
mxEvent.addListener(btn, 'click', function(evt) {
funct();
mxEvent.consume(evt);
});
left += bw;
buttons.appendChild(btn);
}
addButton('+', function() {
graph.zoomIn();
});
addButton('-', function() {
graph.zoomOut();
});
if (container.nextSibling != null) {
container.parentNode.insertBefore(buttons, container.nextSibling);
} else {
container.appendChild(buttons);
}
}
})(divs[i]);
}
}
};
}
export default Codec;
Reference in New Issue View Git Blame Copy Permalink