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 |