moved examples to src/examples with goal of converting from html to js/react
mcyph
|
|
@ -1,73 +0,0 @@
|
||||||
<!--
|
|
||||||
Copyright (c) 2006-2018, JGraph Ltd
|
|
||||||
|
|
||||||
Hello, World! example for mxGraph. This example demonstrates using
|
|
||||||
a DOM node to create a graph and adding vertices and edges.
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Hello, World! example for mxGraph</title>
|
|
||||||
|
|
||||||
<!-- Sets the basepath for the library if not in same directory -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
mxBasePath = '../src';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Loads and initializes the library -->
|
|
||||||
<script type="text/javascript" src="../src/js/mxClient.js"></script>
|
|
||||||
|
|
||||||
<!-- Example code -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
// Program starts here. Creates a sample graph in the
|
|
||||||
// DOM node with the specified ID. This function is invoked
|
|
||||||
// from the onLoad event handler of the document (see below).
|
|
||||||
function main(container)
|
|
||||||
{
|
|
||||||
// Checks if the browser is supported
|
|
||||||
if (!mxClient.isBrowserSupported())
|
|
||||||
{
|
|
||||||
// Displays an error message if the browser is not supported.
|
|
||||||
mxUtils.error('Browser is not supported!', 200, false);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
// Disables the built-in context menu
|
|
||||||
mxEvent.disableContextMenu(container);
|
|
||||||
|
|
||||||
// Creates the graph inside the given container
|
|
||||||
var graph = new mxGraph(container);
|
|
||||||
|
|
||||||
// Enables rubberband selection
|
|
||||||
new mxRubberband(graph);
|
|
||||||
|
|
||||||
// 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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<!-- Page passes the container for the graph to the program -->
|
|
||||||
<body onload="main(document.getElementById('graphContainer'))">
|
|
||||||
|
|
||||||
<!-- Creates a container for the graph with a grid wallpaper -->
|
|
||||||
<div id="graphContainer"
|
|
||||||
style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2006-2018, JGraph Ltd
|
||||||
|
*
|
||||||
|
* Hello, World! example for mxGraph. This example demonstrates using
|
||||||
|
* a DOM node to create a graph and adding vertices and edges.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import mxGraph from "../js/view/mxGraph";
|
||||||
|
import mxRubberband from "../js/handler/mxRubberband";
|
||||||
|
|
||||||
|
class HelloWorld extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
// A container for the graph with a grid wallpaper
|
||||||
|
return <>
|
||||||
|
<h1>Hello, World! example for mxGraph</h1>
|
||||||
|
|
||||||
|
<div ref={ el => {this.el = el;} }
|
||||||
|
style={{
|
||||||
|
position: "relative",
|
||||||
|
overflow: "hidden",
|
||||||
|
width: "321px",
|
||||||
|
height: "241px",
|
||||||
|
background: "url('editors/images/grid.gif')",
|
||||||
|
cursor: "default"
|
||||||
|
}}/>
|
||||||
|
</>;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
// FIXME!!
|
||||||
|
let mxBasePath = '../src';
|
||||||
|
|
||||||
|
// Create a sample graph in the DOM node with the specified ID.
|
||||||
|
mxEvent.disableContextMenu(this.el); // Disable the built-in context menu
|
||||||
|
let graph = new mxGraph(this.el); // Create the graph inside the given container
|
||||||
|
new mxRubberband(graph); // Enable rubberband selection
|
||||||
|
|
||||||
|
// Get the default parent for inserting new cells. This
|
||||||
|
// is normally the first child of the root (ie. layer 0).
|
||||||
|
let parent = graph.getDefaultParent();
|
||||||
|
|
||||||
|
// Adds cells to the model in a single step
|
||||||
|
graph.getModel().beginUpdate();
|
||||||
|
try {
|
||||||
|
let v1 = graph.insertVertex({
|
||||||
|
id: null,
|
||||||
|
parent: parent,
|
||||||
|
value: 'Hello,',
|
||||||
|
position: [20, 20],
|
||||||
|
size: [80, 30]
|
||||||
|
});
|
||||||
|
let v2 = graph.insertVertex({
|
||||||
|
id: null,
|
||||||
|
parent: parent,
|
||||||
|
value: 'World!',
|
||||||
|
position: [200, 150],
|
||||||
|
size: [80, 30]
|
||||||
|
});
|
||||||
|
graph.insertEdge({
|
||||||
|
id: null,
|
||||||
|
parent: parent,
|
||||||
|
value: '',
|
||||||
|
source: v1,
|
||||||
|
target: v2
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
// Updates the display
|
||||||
|
graph.getModel().endUpdate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HelloWorld;
|
||||||
|
Before Width: | Height: | Size: 75 B After Width: | Height: | Size: 75 B |
|
Before Width: | Height: | Size: 358 B After Width: | Height: | Size: 358 B |
|
Before Width: | Height: | Size: 357 B After Width: | Height: | Size: 357 B |
|
Before Width: | Height: | Size: 373 B After Width: | Height: | Size: 373 B |
|
Before Width: | Height: | Size: 351 B After Width: | Height: | Size: 351 B |
|
Before Width: | Height: | Size: 377 B After Width: | Height: | Size: 377 B |
|
Before Width: | Height: | Size: 358 B After Width: | Height: | Size: 358 B |
|
Before Width: | Height: | Size: 469 B After Width: | Height: | Size: 469 B |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 65 B After Width: | Height: | Size: 65 B |
|
Before Width: | Height: | Size: 64 B After Width: | Height: | Size: 64 B |
|
Before Width: | Height: | Size: 859 B After Width: | Height: | Size: 859 B |
|
Before Width: | Height: | Size: 848 B After Width: | Height: | Size: 848 B |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 278 B After Width: | Height: | Size: 278 B |
|
Before Width: | Height: | Size: 163 B After Width: | Height: | Size: 163 B |
|
Before Width: | Height: | Size: 80 B After Width: | Height: | Size: 80 B |
|
Before Width: | Height: | Size: 82 B After Width: | Height: | Size: 82 B |
|
Before Width: | Height: | Size: 220 B After Width: | Height: | Size: 220 B |
|
Before Width: | Height: | Size: 830 B After Width: | Height: | Size: 830 B |
|
Before Width: | Height: | Size: 195 B After Width: | Height: | Size: 195 B |
|
Before Width: | Height: | Size: 860 B After Width: | Height: | Size: 860 B |
|
Before Width: | Height: | Size: 954 B After Width: | Height: | Size: 954 B |
|
Before Width: | Height: | Size: 582 B After Width: | Height: | Size: 582 B |
|
Before Width: | Height: | Size: 615 B After Width: | Height: | Size: 615 B |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 540 B After Width: | Height: | Size: 540 B |
|
Before Width: | Height: | Size: 870 B After Width: | Height: | Size: 870 B |
|
Before Width: | Height: | Size: 538 B After Width: | Height: | Size: 538 B |
|
Before Width: | Height: | Size: 294 B After Width: | Height: | Size: 294 B |
|
Before Width: | Height: | Size: 81 B After Width: | Height: | Size: 81 B |
|
Before Width: | Height: | Size: 82 B After Width: | Height: | Size: 82 B |
|
Before Width: | Height: | Size: 88 B After Width: | Height: | Size: 88 B |
|
Before Width: | Height: | Size: 325 B After Width: | Height: | Size: 325 B |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 556 B After Width: | Height: | Size: 556 B |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 121 B After Width: | Height: | Size: 121 B |
|
Before Width: | Height: | Size: 74 B After Width: | Height: | Size: 74 B |
|
Before Width: | Height: | Size: 190 B After Width: | Height: | Size: 190 B |
|
Before Width: | Height: | Size: 127 B After Width: | Height: | Size: 127 B |
|
Before Width: | Height: | Size: 148 B After Width: | Height: | Size: 148 B |
|
Before Width: | Height: | Size: 580 B After Width: | Height: | Size: 580 B |
|
Before Width: | Height: | Size: 105 B After Width: | Height: | Size: 105 B |
|
Before Width: | Height: | Size: 280 B After Width: | Height: | Size: 280 B |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 58 B After Width: | Height: | Size: 58 B |
|
Before Width: | Height: | Size: 235 B After Width: | Height: | Size: 235 B |
|
Before Width: | Height: | Size: 939 B After Width: | Height: | Size: 939 B |
|
Before Width: | Height: | Size: 855 B After Width: | Height: | Size: 855 B |
|
Before Width: | Height: | Size: 64 B After Width: | Height: | Size: 64 B |
|
Before Width: | Height: | Size: 1013 B After Width: | Height: | Size: 1013 B |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 680 B After Width: | Height: | Size: 680 B |
|
Before Width: | Height: | Size: 159 B After Width: | Height: | Size: 159 B |
|
Before Width: | Height: | Size: 165 B After Width: | Height: | Size: 165 B |