integrated more examples into the next.js app and moved static files into the public next.js dir

development
mcyph 2021-03-25 13:49:21 +11:00
parent 1835e6429d
commit adcef6350e
207 changed files with 909 additions and 1083 deletions

View File

@ -4,6 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
import mxShape from './mxShape';
import mxConstants from "../util/mxConstants";
class mxArrow extends mxShape {
/**

View File

@ -12,8 +12,13 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxGraphHandler from '../mxgraph/handler/mxGraphHandler';
import mxEdgeHandler from '../mxgraph/handler/mxEdgeHandler';
import mxConstants from '../mxgraph/util/mxConstants';
import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
class MYNAMEHERE extends React.Component {
class Guides extends React.Component {
constructor(props) {
super(props);
}
@ -23,161 +28,120 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Guides example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '801px',
height: '601px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
</>
);
};
}
componentDidMount() {
// Enables guides
mxGraphHandler.prototype.guidesEnabled = true;
};
// Alt disables guides
mxGraphHandler.prototype.useGuidesForEvent = function(me) {
return !mxEvent.isAltDown(me.getEvent());
};
// Defines the guides to be red (default)
mxConstants.GUIDE_COLOR = '#FF0000';
// Defines the guides to be 1 pixel (default)
mxConstants.GUIDE_STROKEWIDTH = 1;
// Enables snapping waypoints to terminals
mxEdgeHandler.prototype.snapToTerminals = true;
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
graph.setConnectable(true);
graph.gridSize = 30;
// Changes the default style for edges "in-place" and assigns
// an alternate edge style which is applied in mxGraph.flip
// when the user double clicks on the adjustment control point
// of the edge. The ElbowConnector edge style switches to TopToBottom
// if the horizontal style is true.
const style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
graph.alternateEdgeStyle = 'elbow=vertical';
// 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).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
let v1;
try {
v1 = graph.insertVertex(parent, null, 'Hello,', 20, 40, 80, 70);
const v2 = graph.insertVertex(parent, null, 'World!', 200, 140, 80, 40);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
// Handles cursor keys
const nudge = function(keyCode) {
if (!graph.isSelectionEmpty()) {
let dx = 0;
let dy = 0;
if (keyCode === 37) {
dx = -1;
} else if (keyCode === 38) {
dy = -1;
} else if (keyCode === 39) {
dx = 1;
} else if (keyCode === 40) {
dy = 1;
}
graph.moveCells(graph.getSelectionCells(), dx, dy);
}
// Transfer initial focus to graph container for keystroke handling
graph.container.focus();
// Handles keystroke events
const keyHandler = new mxKeyHandler(graph);
// Ignores enter keystroke. Remove this line if you want the
// enter keystroke to stop editing
keyHandler.enter = function() {};
keyHandler.bindKey(37, function() {
nudge(37);
});
keyHandler.bindKey(38, function() {
nudge(38);
});
keyHandler.bindKey(39, function() {
nudge(39);
});
keyHandler.bindKey(40, function() {
nudge(40);
});
};
}
}
export default MYNAMEHERE;
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
{
// Enables guides
mxGraphHandler.prototype.guidesEnabled = true;
// Alt disables guides
mxGraphHandler.prototype.useGuidesForEvent = function(me)
{
return !mxEvent.isAltDown(me.getEvent());
};
// Defines the guides to be red (default)
mxConstants.GUIDE_COLOR = '#FF0000';
// Defines the guides to be 1 pixel (default)
mxConstants.GUIDE_STROKEWIDTH = 1;
// Enables snapping waypoints to terminals
mxEdgeHandler.prototype.snapToTerminals = true;
// Creates the graph inside the given container
let graph = new mxGraph(container);
graph.setConnectable(true);
graph.gridSize = 30;
// Changes the default style for edges "in-place" and assigns
// an alternate edge style which is applied in mxGraph.flip
// when the user double clicks on the adjustment control point
// of the edge. The ElbowConnector edge style switches to TopToBottom
// if the horizontal style is true.
let style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
graph.alternateEdgeStyle = 'elbow=vertical';
// 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).
let parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
var v1;
try
{
v1 = graph.insertVertex(parent, null, 'Hello,', 20, 40, 80, 70);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 140, 80, 40);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
// Handles cursor keys
let nudge = function(keyCode)
{
if (!graph.isSelectionEmpty())
{
let dx = 0;
let dy = 0;
if (keyCode == 37)
{
dx = -1;
}
else if (keyCode == 38)
{
dy = -1;
}
else if (keyCode == 39)
{
dx = 1;
}
else if (keyCode == 40)
{
dy = 1;
}
graph.moveCells(graph.getSelectionCells(), dx, dy);
}
};
// Transfer initial focus to graph container for keystroke handling
graph.container.focus();
// Handles keystroke events
let keyHandler = new mxKeyHandler(graph);
// Ignores enter keystroke. Remove this line if you want the
// enter keystroke to stop editing
keyHandler.enter = function() {};
keyHandler.bindKey(37, function()
{
nudge(37);
});
keyHandler.bindKey(38, function()
{
nudge(38);
});
keyHandler.bindKey(39, function()
{
nudge(39);
});
keyHandler.bindKey(40, function()
{
nudge(40);
});
}
};
</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="overflow:hidden;width:801px;height:601px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
export default Guides;

View File

@ -8,8 +8,15 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxUtils from '../mxgraph/util/mxUtils';
import mxVertexHandler from '../mxgraph/handler/mxVertexHandler';
import mxCellRenderer from '../mxgraph/view/mxCellRenderer';
import mxRectangle from '../mxgraph/util/mxRectangle';
import mxCylinder from '../mxgraph/shape/mxCylinder';
import mxPoint from '../mxgraph/util/mxPoint';
import mxHandle from '../mxgraph/handler/mxHandle';
class MYNAMEHERE extends React.Component {
class Handles extends React.Component {
constructor(props) {
super(props);
}
@ -19,196 +26,249 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Handles example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'relative',
overflow: 'hidden',
width: '621px',
height: '441px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
</>
);
};
}
componentDidMount() {
class MyShape extends mxCylinder {
defaultPos1 = 20;
};
}
defaultPos2 = 60;
export default MYNAMEHERE;
getLabelBounds(rect) {
const pos1 =
mxUtils.getValue(this.style, 'pos1', this.defaultPos1) * this.scale;
const pos2 =
mxUtils.getValue(this.style, 'pos2', this.defaultPos2) * this.scale;
return new mxRectangle(
rect.x,
rect.y + pos1,
rect.width,
Math.min(rect.height, pos2) - Math.max(0, pos1)
);
}
function MyShape()
{
mxCylinder.call(this);
};
redrawPath(path, x, y, w, h, isForeground) {
const pos1 = mxUtils.getValue(this.style, 'pos1', this.defaultPos1);
const pos2 = mxUtils.getValue(this.style, 'pos2', this.defaultPos2);
mxUtils.extend(MyShape, mxCylinder);
if (isForeground) {
if (pos1 < h) {
path.moveTo(0, pos1);
path.lineTo(w, pos1);
}
MyShape.prototype.defaultPos1 = 20;
MyShape.prototype.defaultPos2 = 60;
MyShape.prototype.getLabelBounds = function(rect)
{
var pos1 = mxUtils.getValue(this.style, 'pos1', this.defaultPos1) * this.scale;
var pos2 = mxUtils.getValue(this.style, 'pos2', this.defaultPos2) * this.scale;
return new mxRectangle(rect.x, rect.y + pos1, rect.width, Math.min(rect.height, pos2) - Math.max(0, pos1));
};
MyShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
{
var pos1 = mxUtils.getValue(this.style, 'pos1', this.defaultPos1);
var pos2 = mxUtils.getValue(this.style, 'pos2', this.defaultPos2);
if (isForeground)
{
if (pos1 < h)
{
path.moveTo(0, pos1);
path.lineTo(w, pos1);
}
if (pos2 < h)
{
path.moveTo(0, pos2);
path.lineTo(w, pos2);
if (pos2 < h) {
path.moveTo(0, pos2);
path.lineTo(w, pos2);
}
} else {
path.rect(0, 0, w, h);
}
}
else
{
path.rect(0, 0, w, h);
}
};
}
mxCellRenderer.registerShape('myShape', MyShape);
mxVertexHandler.prototype.createCustomHandles = function()
{
if (this.state.style['shape'] == 'myShape')
{
// Implements the handle for the first divider
let firstHandle = new mxHandle(this.state);
class MyCustomVertexHandler extends mxVertexHandler {
livePreview = true;
firstHandle.getPosition = function(bounds)
{
var pos2 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2))));
var pos1 = Math.max(0, Math.min(pos2, parseFloat(mxUtils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1))));
rotationEnabled = true;
return new mxPoint(bounds.getCenterX(), bounds.y + pos1);
};
createCustomHandles() {
if (this.state.style.shape === 'myShape') {
// Implements the handle for the first divider
const firstHandle = new mxHandle(this.state);
firstHandle.setPosition = function(bounds, pt)
{
var pos2 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2))));
firstHandle.getPosition = function(bounds) {
const pos2 = Math.max(
0,
Math.min(
bounds.height,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos2',
MyShape.prototype.defaultPos2
)
)
)
);
const pos1 = Math.max(
0,
Math.min(
pos2,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos1',
MyShape.prototype.defaultPos1
)
)
)
);
this.state.style['pos1'] = Math.round(Math.max(0, Math.min(pos2, pt.y - bounds.y)));
};
return new mxPoint(bounds.getCenterX(), bounds.y + pos1);
};
firstHandle.execute = function()
{
this.copyStyle('pos1');
firstHandle.setPosition = function(bounds, pt) {
const pos2 = Math.max(
0,
Math.min(
bounds.height,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos2',
MyShape.prototype.defaultPos2
)
)
)
);
this.state.style.pos1 = Math.round(
Math.max(0, Math.min(pos2, pt.y - bounds.y))
);
};
firstHandle.execute = function() {
this.copyStyle('pos1');
};
firstHandle.ignoreGrid = true;
// Implements the handle for the second divider
const secondHandle = new mxHandle(this.state);
secondHandle.getPosition = function(bounds) {
const pos1 = Math.max(
0,
Math.min(
bounds.height,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos1',
MyShape.prototype.defaultPos1
)
)
)
);
const pos2 = Math.max(
pos1,
Math.min(
bounds.height,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos2',
MyShape.prototype.defaultPos2
)
)
)
);
return new mxPoint(bounds.getCenterX(), bounds.y + pos2);
};
secondHandle.setPosition = function(bounds, pt) {
const pos1 = Math.max(
0,
Math.min(
bounds.height,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos1',
MyShape.prototype.defaultPos1
)
)
)
);
this.state.style.pos2 = Math.round(
Math.max(pos1, Math.min(bounds.height, pt.y - bounds.y))
);
};
secondHandle.execute = function() {
this.copyStyle('pos2');
};
secondHandle.ignoreGrid = true;
return [firstHandle, secondHandle];
}
firstHandle.ignoreGrid = true;
// Implements the handle for the second divider
let secondHandle = new mxHandle(this.state);
secondHandle.getPosition = function(bounds)
{
var pos1 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1))));
var pos2 = Math.max(pos1, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2))));
return new mxPoint(bounds.getCenterX(), bounds.y + pos2);
};
secondHandle.setPosition = function(bounds, pt)
{
var pos1 = Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1))));
this.state.style['pos2'] = Math.round(Math.max(pos1, Math.min(bounds.height, pt.y - bounds.y)));
};
secondHandle.execute = function()
{
this.copyStyle('pos2');
}
secondHandle.ignoreGrid = true;
return [firstHandle, secondHandle];
return null;
}
}
return null;
};
mxVertexHandler.prototype.livePreview = true;
mxVertexHandler.prototype.rotationEnabled = true;
// 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);
class MyCustomGraph extends mxGraph {
createVertexHandler(state) {
return new MyCustomVertexHandler(state);
}
else
{
// Disables the built-in context menu
mxEvent.disableContextMenu(container);
}
// Creates the graph inside the given container
let graph = new mxGraph(container);
graph.setCellsCloneable(true);
graph.setHtmlLabels(true);
graph.setPanning(true);
graph.centerZoom = false;
// Disables the built-in context menu
mxEvent.disableContextMenu(this.el);
// Enables rubberband selection
new mxRubberband(graph);
// Creates the graph inside the given container
const graph = new MyCustomGraph(this.el);
graph.setCellsCloneable(true);
graph.setHtmlLabels(true);
graph.setPanning(true);
graph.centerZoom = false;
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent();
// Enables rubberband selection
new mxRubberband(graph);
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
20, 20, 240, 120, 'shape=myShape;whiteSpace=wrap;overflow=hidden;pos1=30;pos2=80;');
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
document.body.appendChild(mxUtils.button('+', function()
{
graph.zoomIn();
}));
document.body.appendChild(mxUtils.button('-', function()
{
graph.zoomOut();
}));
}
};
</script>
</head>
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(
parent,
null,
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
20,
20,
240,
120,
'shape=myShape;whiteSpace=wrap;overflow=hidden;pos1=30;pos2=80;'
);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
document.body.appendChild(
mxUtils.button('+', function() {
graph.zoomIn();
})
);
document.body.appendChild(
mxUtils.button('-', function() {
graph.zoomOut();
})
);
}
}
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:621px;height:441px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
export default Handles;

View File

@ -9,8 +9,13 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConstants from '../mxgraph/util/mxConstants';
import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
import mxPoint from '../mxgraph/util/mxPoint';
import mxCodec from '../mxgraph/io/mxCodec';
import mxUtils from '../mxgraph/util/mxUtils';
class MYNAMEHERE extends React.Component {
class HelloPort extends React.Component {
constructor(props) {
super(props);
}
@ -20,140 +25,99 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Hello, World! example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
<div
ref={el => {
this.el2 = el;
}}
/>
</>
);
};
}
componentDidMount() {
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
graph.setConnectable(true);
graph.setTooltips(true);
};
// Sets the default edge style
const style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
// Ports are not used as terminals for edges, they are
// only used to compute the graphical connection point
graph.isPort = function(cell) {
const geo = this.getCellGeometry(cell);
return geo != null ? geo.relative : false;
};
// Implements a tooltip that shows the actual
// source and target of an edge
graph.getTooltipForCell = function(cell) {
if (this.model.isEdge(cell)) {
return `${this.convertValueToString(
this.model.getTerminal(cell, true)
)} => ${this.convertValueToString(
this.model.getTerminal(cell, false)
)}`;
}
return mxGraph.prototype.getTooltipForCell.apply(this, arguments);
};
// Removes the folding icon and disables any folding
graph.isCellFoldable = function(cell) {
return false;
};
// 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).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(parent, null, 'Hello', 20, 80, 80, 30);
v1.setConnectable(false);
const v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10);
v11.geometry.offset = new mxPoint(-5, -5);
v11.geometry.relative = true;
const v12 = graph.insertVertex(v1, null, '', 1, 0, 10, 10);
v12.geometry.offset = new mxPoint(-5, -5);
v12.geometry.relative = true;
const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
const v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v11, v2);
var e1 = graph.insertEdge(parent, null, '', v12, v3);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
const button = mxUtils.button('View XML', function() {
const encoder = new mxCodec();
const node = encoder.encode(graph.getModel());
mxUtils.popup(mxUtils.getPrettyXml(node), true);
});
this.el2.appendChild(button);
}
}
export default MYNAMEHERE;
<html>
<head>
<title></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
{
// Creates the graph inside the given container
let graph = new mxGraph(container);
graph.setConnectable(true);
graph.setTooltips(true);
// Sets the default edge style
let style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
// Ports are not used as terminals for edges, they are
// only used to compute the graphical connection point
graph.isPort = function(cell)
{
let geo = this.getCellGeometry(cell);
return (geo != null) ? geo.relative : false;
};
// Implements a tooltip that shows the actual
// source and target of an edge
graph.getTooltipForCell = function(cell)
{
if (this.model.isEdge(cell))
{
return this.convertValueToString(this.model.getTerminal(cell, true)) + ' => ' +
this.convertValueToString(this.model.getTerminal(cell, false))
}
return mxGraph.prototype.getTooltipForCell.apply(this, arguments);
};
// Removes the folding icon and disables any folding
graph.isCellFoldable = function(cell)
{
return false;
};
// 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).
let parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello', 20, 80, 80, 30);
v1.setConnectable(false);
var v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10);
v11.geometry.offset = new mxPoint(-5, -5);
v11.geometry.relative = true;
var v12 = graph.insertVertex(v1, null, '', 1, 0, 10, 10);
v12.geometry.offset = new mxPoint(-5, -5);
v12.geometry.relative = true;
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v11, v2);
var e1 = graph.insertEdge(parent, null, '', v12, v3);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
let button = mxUtils.button('View XML', function()
{
let encoder = new mxCodec();
let node = encoder.encode(graph.getModel());
mxUtils.popup(mxUtils.getPrettyXml(node), true);
});
document.body.insertBefore(button, container.nextSibling);
}
};
</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="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
export default HelloPort;

View File

@ -10,8 +10,13 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxHierarchicalLayout from '../mxgraph/layout/hierarchical/mxHierarchicalLayout';
import mxFastOrganicLayout from '../mxgraph/layout/mxFastOrganicLayout';
import mxConstants from '../mxgraph/util/mxConstants';
import mxPerimeter from '../mxgraph/view/mxPerimeter';
import mxUtils from "../mxgraph/util/mxUtils";
class MYNAMEHERE extends React.Component {
class HierarchicalLayout extends React.Component {
constructor(props) {
super(props);
}
@ -21,149 +26,102 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Hierarchical Layout example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'absolute',
overflow: 'auto',
top: '36px',
bottom: '0px',
left: '0px',
right: '0px',
borderTop: 'gray 1px solid',
}}
/>
</>
);
};
}
componentDidMount() {
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
};
// Adds rubberband selection
new mxRubberband(graph);
// Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
style[mxConstants.STYLE_PERIMETER_SPACING] = 6;
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_SHADOW] = true;
style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
// Creates a layout algorithm to be used
// with the graph
const layout = new mxHierarchicalLayout(graph);
const organic = new mxFastOrganicLayout(graph);
organic.forceConstant = 120;
const parent = graph.getDefaultParent();
// Adds a button to execute the layout
let button = document.createElement('button');
mxUtils.write(button, 'Hierarchical');
mxEvent.addListener(button, 'click', function(evt) {
layout.execute(parent);
});
document.body.appendChild(button);
// Adds a button to execute the layout
button = document.createElement('button');
mxUtils.write(button, 'Organic');
mxEvent.addListener(button, 'click', function(evt) {
organic.execute(parent);
});
document.body.appendChild(button);
// Load cells and layouts the graph
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(parent, null, '1', 0, 0, 80, 30);
const v2 = graph.insertVertex(parent, null, '2', 0, 0, 80, 30);
const v3 = graph.insertVertex(parent, null, '3', 0, 0, 80, 30);
const v4 = graph.insertVertex(parent, null, '4', 0, 0, 80, 30);
const v5 = graph.insertVertex(parent, null, '5', 0, 0, 80, 30);
const v6 = graph.insertVertex(parent, null, '6', 0, 0, 80, 30);
const v7 = graph.insertVertex(parent, null, '7', 0, 0, 80, 30);
const v8 = graph.insertVertex(parent, null, '8', 0, 0, 80, 30);
const v9 = graph.insertVertex(parent, null, '9', 0, 0, 80, 30);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
const e2 = graph.insertEdge(parent, null, '', v1, v3);
const e3 = graph.insertEdge(parent, null, '', v3, v4);
const e4 = graph.insertEdge(parent, null, '', v2, v5);
const e5 = graph.insertEdge(parent, null, '', v1, v6);
const e6 = graph.insertEdge(parent, null, '', v2, v3);
const e7 = graph.insertEdge(parent, null, '', v6, v4);
const e8 = graph.insertEdge(parent, null, '', v6, v1);
const e9 = graph.insertEdge(parent, null, '', v6, v7);
const e10 = graph.insertEdge(parent, null, '', v7, v8);
const e11 = graph.insertEdge(parent, null, '', v7, v9);
const e12 = graph.insertEdge(parent, null, '', v7, v6);
const e13 = graph.insertEdge(parent, null, '', v7, v5);
// Executes the layout
layout.execute(parent);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
}
export default MYNAMEHERE;
<html>
<head>
<title></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 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
{
// Creates the graph inside the given container
let graph = new mxGraph(container);
// Adds rubberband selection
new mxRubberband(graph);
// Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
style[mxConstants.STYLE_PERIMETER_SPACING] = 6;
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_SHADOW] = true;
style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
// Creates a layout algorithm to be used
// with the graph
let layout = new mxHierarchicalLayout(graph);
let organic = new mxFastOrganicLayout(graph);
organic.forceConstant = 120;
let parent = graph.getDefaultParent();
// Adds a button to execute the layout
let button = document.createElement('button');
mxUtils.write(button, 'Hierarchical');
mxEvent.addListener(button, 'click', function(evt)
{
layout.execute(parent);
});
document.body.appendChild(button);
// Adds a button to execute the layout
let button = document.createElement('button');
mxUtils.write(button, 'Organic');
mxEvent.addListener(button, 'click', function(evt)
{
organic.execute(parent);
});
document.body.appendChild(button);
// Load cells and layouts the graph
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, '1', 0, 0, 80, 30);
var v2 = graph.insertVertex(parent, null, '2', 0, 0, 80, 30);
var v3 = graph.insertVertex(parent, null, '3', 0, 0, 80, 30);
var v4 = graph.insertVertex(parent, null, '4', 0, 0, 80, 30);
var v5 = graph.insertVertex(parent, null, '5', 0, 0, 80, 30);
var v6 = graph.insertVertex(parent, null, '6', 0, 0, 80, 30);
var v7 = graph.insertVertex(parent, null, '7', 0, 0, 80, 30);
var v8 = graph.insertVertex(parent, null, '8', 0, 0, 80, 30);
var v9 = graph.insertVertex(parent, null, '9', 0, 0, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
var e2 = graph.insertEdge(parent, null, '', v1, v3);
var e3 = graph.insertEdge(parent, null, '', v3, v4);
var e4 = graph.insertEdge(parent, null, '', v2, v5);
var e5 = graph.insertEdge(parent, null, '', v1, v6);
var e6 = graph.insertEdge(parent, null, '', v2, v3);
var e7 = graph.insertEdge(parent, null, '', v6, v4);
var e8 = graph.insertEdge(parent, null, '', v6, v1);
var e9 = graph.insertEdge(parent, null, '', v6, v7);
var e10 = graph.insertEdge(parent, null, '', v7, v8);
var e11 = graph.insertEdge(parent, null, '', v7, v9);
var e12 = graph.insertEdge(parent, null, '', v7, v6);
var e13 = graph.insertEdge(parent, null, '', v7, v5);
// Executes the layout
layout.execute(parent);
}
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'))" style="margin:4px;">
<!-- Creates a container for the graph with a grid wallpaper. Make sure to define the position
and overflow attributes! See comments on the adding of the size-listener on line 54 ff! -->
<div id="graphContainer"
style="position:absolute;overflow:auto;top:36px;bottom:0px;left:0px;right:0px;border-top:gray 1px solid;">
</div>
</body>
</html>
export default HierarchicalLayout;

View File

@ -1,6 +1,6 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
Hover icons example for mxGraph. This example demonstrates showing
icons on vertices as mouse hovers over them.
*/
@ -9,8 +9,12 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConnectionHandler from '../mxgraph/handler/mxConnectionHandler';
import mxUtils from '../mxgraph/util/mxUtils';
import mxRectangle from "../mxgraph/util/mxRectangle";
import mxImage from "../mxgraph/util/mxImage";
class MYNAMEHERE extends React.Component {
class HoverIcons extends React.Component {
constructor(props) {
super(props);
}
@ -26,44 +30,30 @@ class MYNAMEHERE extends React.Component {
this.el = el;
}}
style={{
overflow: 'hidden',
width: '321px',
height: '241px',
background: "url('editors/images/grid.gif')",
cursor: 'default',
}}
/>
</>
);
};
}
componentDidMount() {
};
}
export default MYNAMEHERE;
<html>
<head>
<title></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">
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
mxConnectionHandler.prototype.connectImage = new mxImage(
'images/connector.gif',
16,
16
);
// Defines a new class for all icons
function mxIconSet(state)
{
function mxIconSet(state) {
this.images = [];
let graph = state.view.graph;
const { graph } = state.view;
// Icon1
let img = mxUtils.createImage('images/copy.png');
@ -72,57 +62,48 @@ export default MYNAMEHERE;
img.style.cursor = 'pointer';
img.style.width = '16px';
img.style.height = '16px';
img.style.left = (state.x + state.width) + 'px';
img.style.top = (state.y + state.height) + 'px';
img.style.left = `${state.x + state.width}px`;
img.style.top = `${state.y + state.height}px`;
mxEvent.addGestureListeners(img,
(evt) => {
let s = graph.gridSize;
graph.setSelectionCells(graph.moveCells([state.cell], s, s, true));
mxEvent.consume(evt);
this.destroy();
})
);
mxEvent.addGestureListeners(img, evt => {
const s = graph.gridSize;
graph.setSelectionCells(graph.moveCells([state.cell], s, s, true));
mxEvent.consume(evt);
this.destroy();
});
state.view.graph.container.appendChild(img);
this.images.push(img);
// Delete
let img = mxUtils.createImage('images/delete2.png');
img = mxUtils.createImage('images/delete2.png');
img.setAttribute('title', 'Delete');
img.style.position = 'absolute';
img.style.cursor = 'pointer';
img.style.width = '16px';
img.style.height = '16px';
img.style.left = (state.x + state.width) + 'px';
img.style.top = (state.y - 16) + 'px';
img.style.left = `${state.x + state.width}px`;
img.style.top = `${state.y - 16}px`;
mxEvent.addGestureListeners(img,
(evt) => {
// Disables dragging the image
mxEvent.consume(evt);
}
);
mxEvent.addGestureListeners(img, evt => {
// Disables dragging the image
mxEvent.consume(evt);
});
mxEvent.addListener(img, 'click',
(evt) => {
graph.removeCells([state.cell]);
mxEvent.consume(evt);
this.destroy();
}
);
mxEvent.addListener(img, 'click', evt => {
graph.removeCells([state.cell]);
mxEvent.consume(evt);
this.destroy();
});
state.view.graph.container.appendChild(img);
this.images.push(img);
};
}
mxIconSet.prototype.destroy = function()
{
if (this.images != null)
{
for (let i = 0; i < this.images.length; i++)
{
let img = this.images[i];
mxIconSet.prototype.destroy = function() {
if (this.images != null) {
for (let i = 0; i < this.images.length; i++) {
const img = this.images[i];
img.parentNode.removeChild(img);
}
}
@ -130,127 +111,96 @@ export default MYNAMEHERE;
this.images = null;
};
// 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
{
// Creates the graph inside the given container
let graph = new mxGraph(container);
graph.setConnectable(true);
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
graph.setConnectable(true);
// Defines the tolerance before removing the icons
let iconTolerance = 20;
// Defines the tolerance before removing the icons
const iconTolerance = 20;
// Shows icons if the mouse is over a cell
graph.addMouseListener(
{
currentState: null,
currentIconSet: null,
mouseDown: function(sender, me)
{
// Hides icons on mouse down
if (this.currentState != null)
{
this.dragLeave(me.getEvent(), this.currentState);
this.currentState = null;
}
},
mouseMove: function(sender, me)
{
if (this.currentState != null && (me.getState() == this.currentState ||
me.getState() == null))
{
let tol = iconTolerance;
let tmp = new mxRectangle(me.getGraphX() - tol,
me.getGraphY() - tol, 2 * tol, 2 * tol);
if (mxUtils.intersects(tmp, this.currentState))
{
return;
}
}
let tmp = graph.view.getState(me.getCell());
// Ignores everything but vertices
if (graph.isMouseDown || (tmp != null && !graph.getModel().isVertex(tmp.cell)))
{
tmp = null;
}
if (tmp != this.currentState)
{
if (this.currentState != null)
{
this.dragLeave(me.getEvent(), this.currentState);
}
this.currentState = tmp;
if (this.currentState != null)
{
this.dragEnter(me.getEvent(), this.currentState);
}
}
},
mouseUp: function(sender, me) { },
dragEnter: function(evt, state)
{
if (this.currentIconSet == null)
{
this.currentIconSet = new mxIconSet(state);
}
},
dragLeave: function(evt, state)
{
if (this.currentIconSet != null)
{
this.currentIconSet.destroy();
this.currentIconSet = null;
}
}
});
// 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).
let 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);
// Shows icons if the mouse is over a cell
graph.addMouseListener({
currentState: null,
currentIconSet: null,
mouseDown(sender, me) {
// Hides icons on mouse down
if (this.currentState != null) {
this.dragLeave(me.getEvent(), this.currentState);
this.currentState = null;
}
finally
{
// Updates the display
graph.getModel().endUpdate();
},
mouseMove(sender, me) {
if (
this.currentState != null &&
(me.getState() == this.currentState || me.getState() == null)
) {
const tol = iconTolerance;
const tmp = new mxRectangle(
me.getGraphX() - tol,
me.getGraphY() - tol,
2 * tol,
2 * tol
);
if (mxUtils.intersects(tmp, this.currentState)) {
return;
}
}
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
let tmp = graph.view.getState(me.getCell());
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
// Ignores everything but vertices
if (
graph.isMouseDown ||
(tmp != null && !graph.getModel().isVertex(tmp.cell))
) {
tmp = null;
}
if (tmp != this.currentState) {
if (this.currentState != null) {
this.dragLeave(me.getEvent(), this.currentState);
}
this.currentState = tmp;
if (this.currentState != null) {
this.dragEnter(me.getEvent(), this.currentState);
}
}
},
mouseUp(sender, me) {},
dragEnter(evt, state) {
if (this.currentIconSet == null) {
this.currentIconSet = new mxIconSet(state);
}
},
dragLeave(evt, state) {
if (this.currentIconSet != null) {
this.currentIconSet.destroy();
this.currentIconSet = null;
}
},
});
// 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).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
}
export default HoverIcons;

View File

@ -9,8 +9,9 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConstants from "../mxgraph/util/mxConstants";
class MYNAMEHERE extends React.Component {
class HoverStyle extends React.Component {
constructor(props) {
super(props);
}
@ -20,183 +21,127 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Hoverstyle 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() {
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
};
}
export default MYNAMEHERE;
<html>
<head>
<title></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);
function updateStyle(state, hover) {
if (hover) {
state.style[mxConstants.STYLE_FILLCOLOR] = '#ff0000';
}
else
{
// Creates the graph inside the given container
let graph = new mxGraph(container);
function updateStyle(state, hover)
{
if (hover)
{
state.style[mxConstants.STYLE_FILLCOLOR] = '#ff0000';
// Sets rounded style for both cases since the rounded style
// is not set in the default style and is therefore inherited
// once it is set, whereas the above overrides the default value
state.style[mxConstants.STYLE_ROUNDED] = hover ? '1' : '0';
state.style[mxConstants.STYLE_STROKEWIDTH] = hover ? '4' : '1';
state.style[mxConstants.STYLE_FONTSTYLE] = hover
? mxConstants.FONT_BOLD
: '0';
}
// Changes fill color to red on mouseover
graph.addMouseListener({
currentState: null,
previousStyle: null,
mouseDown(sender, me) {
if (this.currentState != null) {
this.dragLeave(me.getEvent(), this.currentState);
this.currentState = null;
}
},
mouseMove(sender, me) {
if (this.currentState != null && me.getState() == this.currentState) {
return;
}
let tmp = graph.view.getState(me.getCell());
// Ignores everything but vertices
if (
graph.isMouseDown ||
(tmp != null && !graph.getModel().isVertex(tmp.cell))
) {
tmp = null;
}
if (tmp != this.currentState) {
if (this.currentState != null) {
this.dragLeave(me.getEvent(), this.currentState);
}
// Sets rounded style for both cases since the rounded style
// is not set in the default style and is therefore inherited
// once it is set, whereas the above overrides the default value
state.style[mxConstants.STYLE_ROUNDED] = (hover) ? '1' : '0';
state.style[mxConstants.STYLE_STROKEWIDTH] = (hover) ? '4' : '1';
state.style[mxConstants.STYLE_FONTSTYLE] = (hover) ? mxConstants.FONT_BOLD : '0';
};
this.currentState = tmp;
// Changes fill color to red on mouseover
graph.addMouseListener(
{
currentState: null,
previousStyle: null,
mouseDown: function(sender, me)
{
if (this.currentState != null)
{
this.dragLeave(me.getEvent(), this.currentState);
this.currentState = null;
}
},
mouseMove: function(sender, me)
{
if (this.currentState != null && me.getState() == this.currentState)
{
return;
}
let tmp = graph.view.getState(me.getCell());
// Ignores everything but vertices
if (graph.isMouseDown || (tmp != null && !
graph.getModel().isVertex(tmp.cell)))
{
tmp = null;
}
if (tmp != this.currentState)
{
if (this.currentState != null)
{
this.dragLeave(me.getEvent(), this.currentState);
}
this.currentState = tmp;
if (this.currentState != null)
{
this.dragEnter(me.getEvent(), this.currentState);
}
}
},
mouseUp: function(sender, me) { },
dragEnter: function(evt, state)
{
if (state != null)
{
this.previousStyle = state.style;
state.style = mxUtils.clone(state.style);
updateStyle(state, true);
state.shape.apply(state);
state.shape.redraw();
if (state.text != null)
{
state.text.apply(state);
state.text.redraw();
}
}
},
dragLeave: function(evt, state)
{
if (state != null)
{
state.style = this.previousStyle;
updateStyle(state, false);
state.shape.apply(state);
state.shape.redraw();
if (state.text != null)
{
state.text.apply(state);
state.text.redraw();
}
}
}
});
// 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).
let 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);
if (this.currentState != null) {
this.dragEnter(me.getEvent(), this.currentState);
}
}
finally
{
// Updates the display
graph.getModel().endUpdate();
},
mouseUp(sender, me) {},
dragEnter(evt, state) {
if (state != null) {
this.previousStyle = state.style;
state.style = mxUtils.clone(state.style);
updateStyle(state, true);
state.shape.apply(state);
state.shape.redraw();
if (state.text != null) {
state.text.apply(state);
state.text.redraw();
}
}
}
};
</script>
</head>
},
dragLeave(evt, state) {
if (state != null) {
state.style = this.previousStyle;
updateStyle(state, false);
state.shape.apply(state);
state.shape.redraw();
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
if (state.text != null) {
state.text.apply(state);
state.text.redraw();
}
}
},
});
<!-- 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>
// 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).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
}
export default HoverStyle;

View File

@ -9,8 +9,13 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConstants from '../mxgraph/util/mxConstants';
import mxUtils from '../mxgraph/util/mxUtils';
import mxRectangle from '../mxgraph/util/mxRectangle';
import mxImage from '../mxgraph/util/mxImage';
import mxPerimeter from "../mxgraph/view/mxPerimeter";
class MYNAMEHERE extends React.Component {
class Images extends React.Component {
constructor(props) {
super(props);
}
@ -20,94 +25,94 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Images example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'relative',
overflow: 'hidden',
width: '360px',
height: '200px',
cursor: 'default',
}}
/>
</>
);
};
}
componentDidMount() {
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
};
}
// Sets a background image and restricts child movement to its bounds
graph.setBackgroundImage(
new mxImage('images/gradient_background.jpg', 360, 200)
);
graph.maximumGraphBounds = new mxRectangle(0, 0, 360, 200);
export default MYNAMEHERE;
// Resizes the container but never make it bigger than the background
graph.minimumContainerSize = new mxRectangle(0, 0, 360, 200);
graph.setResizeContainer(true);
// Disables basic selection and cell handling
// graph.setEnabled(false);
configureStylesheet(graph);
<html>
<head>
<title></title>
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
var v1 = graph.insertVertex(
parent,
null,
'First Line\nSecond Line',
20,
10,
80,
100,
'bottom'
);
var v1 = graph.insertVertex(
parent,
null,
'First Line\nSecond Line',
130,
10,
80,
100,
'top'
);
var v1 = graph.insertVertex(parent, null, '', 230, 10, 100, 100, 'image');
var v2 = graph.insertVertex(
parent,
null,
'First Line\nSecond Line',
20,
130,
140,
60,
'right'
);
var v2 = graph.insertVertex(
parent,
null,
'First Line\nSecond Line',
180,
130,
140,
60,
'left'
);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
<!-- 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
{
// Creates the graph inside the given container
let graph = new mxGraph(container);
// Sets a background image and restricts child movement to its bounds
graph.setBackgroundImage(new mxImage('images/gradient_background.jpg', 360, 200));
graph.maximumGraphBounds = new mxRectangle(0, 0, 360, 200);
// Resizes the container but never make it bigger than the background
graph.minimumContainerSize = new mxRectangle(0, 0, 360, 200);
graph.setResizeContainer(true);
// Disables basic selection and cell handling
//graph.setEnabled(false);
configureStylesheet(graph);
// Gets 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
{
var v1 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 20, 10, 80, 100, 'bottom');
var v1 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 130, 10, 80, 100, 'top');
var v1 = graph.insertVertex(parent, null, '', 230, 10, 100, 100, 'image');
var v2 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 20, 130, 140, 60, 'right');
var v2 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 180, 130, 140, 60, 'left');
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
}
};
function configureStylesheet(graph)
{
function configureStylesheet(graph) {
let style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
@ -151,15 +156,8 @@ export default MYNAMEHERE;
delete style[mxConstants.STYLE_SPACING_LEFT];
style[mxConstants.STYLE_SPACING_RIGHT] = '55';
graph.getStylesheet().putCellStyle('left', style);
};
</script>
</head>
}
}
}
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph -->
<div id="graphContainer" style="position:relative;overflow:hidden;width:360px;height:200px;cursor:default;">
</div>
</body>
</html>
export default Images;

View File

@ -7,11 +7,12 @@
*/
import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
import mxConstants from '../mxgraph/util/mxConstants';
import mxEdgeStyle from '../mxgraph/view/mxEdgeStyle';
import mxKeyHandler from '../mxgraph/handler/mxKeyHandler';
class MYNAMEHERE extends React.Component {
class Indicators extends React.Component {
constructor(props) {
super(props);
}
@ -21,114 +22,83 @@ class MYNAMEHERE extends React.Component {
return (
<>
<h1>Indicators example for mxGraph</h1>
<div
ref={el => {
this.el = el;
}}
style={{
position: 'relative',
overflow: 'hidden',
height: '300ph',
}}
/>
</>
);
};
}
componentDidMount() {
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
graph.setConnectable(true);
new mxKeyHandler(graph);
};
// Enables moving of vertex labels
graph.vertexLabelsMovable = true;
// Creates a style with an indicator
let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'label';
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom';
style[mxConstants.STYLE_INDICATOR_SHAPE] = 'ellipse';
style[mxConstants.STYLE_INDICATOR_WIDTH] = 34;
style[mxConstants.STYLE_INDICATOR_HEIGHT] = 34;
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 'top'; // indicator v-alignment
style[mxConstants.STYLE_IMAGE_ALIGN] = 'center';
style[mxConstants.STYLE_INDICATOR_COLOR] = 'green';
delete style[mxConstants.STYLE_STROKECOLOR]; // transparent
delete style[mxConstants.STYLE_FILLCOLOR]; // transparent
// Creates a style with an indicator
style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_ELBOW] = mxConstants.ELBOW_VERTICAL;
style[mxConstants.STYLE_ROUNDED] = true;
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
graph.insertVertex(parent, null, 'Bottom Label', 80, 80, 80, 60);
graph.insertVertex(
parent,
null,
'Top Label',
200,
80,
60,
60,
'indicatorShape=actor;indicatorWidth=28;indicatorColor=blue;imageVerticalAlign=bottom;verticalAlign=top'
);
graph.insertVertex(
parent,
null,
'Right Label',
300,
80,
120,
60,
'indicatorShape=cloud;indicatorWidth=40;indicatorColor=#00FFFF;imageVerticalAlign=center;verticalAlign=middle;imageAlign=left;align=left;spacingLeft=44'
);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
}
export default MYNAMEHERE;
<html>
<head>
<title></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
{
// Creates the graph inside the given container
let graph = new mxGraph(container);
graph.setConnectable(true);
new mxKeyHandler(graph);
// Enables moving of vertex labels
graph.vertexLabelsMovable = true;
// Creates a style with an indicator
let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'label';
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom';
style[mxConstants.STYLE_INDICATOR_SHAPE] = 'ellipse';
style[mxConstants.STYLE_INDICATOR_WIDTH] = 34;
style[mxConstants.STYLE_INDICATOR_HEIGHT] = 34;
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 'top'; // indicator v-alignment
style[mxConstants.STYLE_IMAGE_ALIGN] = 'center';
style[mxConstants.STYLE_INDICATOR_COLOR] = 'green';
delete style[mxConstants.STYLE_STROKECOLOR]; // transparent
delete style[mxConstants.STYLE_FILLCOLOR]; // transparent
// Creates a style with an indicator
let style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_ELBOW] = mxConstants.ELBOW_VERTICAL;
style[mxConstants.STYLE_ROUNDED] = true;
// Gets 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
{
graph.insertVertex(parent, null, 'Bottom Label', 80, 80, 80, 60);
graph.insertVertex(parent, null, 'Top Label', 200, 80, 60, 60,
'indicatorShape=actor;indicatorWidth=28;indicatorColor=blue;imageVerticalAlign=bottom;verticalAlign=top');
graph.insertVertex(parent, null, 'Right Label', 300, 80, 120, 60,
'indicatorShape=cloud;indicatorWidth=40;indicatorColor=#00FFFF;imageVerticalAlign=center;verticalAlign=middle;imageAlign=left;align=left;spacingLeft=44');
}
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:absolute;top:0px;left:0px;overflow:hidden;width:100%;height:100%;">
</div>
</body>
</html>
export default Indicators;

View File

@ -51,6 +51,14 @@ import Layers from "./Layers";
import Labels from "./Labels";
import LabelPosition from "./LabelPosition";
import JsonData from "./JsonData";
import Indicators from "./Indicators";
import Images from "./Images";
import HoverIcons from "./HoverIcons";
import HoverStyle from "./HoverStyle";
import HierarchicalLayout from "./HierarchicalLayout";
import HelloPort from "./HelloPort";
import Handles from "./Handles";
import Guides from "./Guides";
export default function Home() {
return (
@ -79,6 +87,14 @@ export default function Home() {
<EdgeTolerance />
<Editing />
<Guides />
<Handles />
<HelloPort />
{/*<HierarchicalLayout />*/}
<HoverStyle />
<HoverIcons />
<Images />
<Indicators />
<JsonData />
<LabelPosition />
<Labels />

View File

Before

Width:  |  Height:  |  Size: 75 B

After

Width:  |  Height:  |  Size: 75 B

View File

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 358 B

View File

Before

Width:  |  Height:  |  Size: 357 B

After

Width:  |  Height:  |  Size: 357 B

View File

Before

Width:  |  Height:  |  Size: 373 B

After

Width:  |  Height:  |  Size: 373 B

View File

Before

Width:  |  Height:  |  Size: 351 B

After

Width:  |  Height:  |  Size: 351 B

View File

Before

Width:  |  Height:  |  Size: 377 B

After

Width:  |  Height:  |  Size: 377 B

View File

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 358 B

View File

Before

Width:  |  Height:  |  Size: 469 B

After

Width:  |  Height:  |  Size: 469 B

View File

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 65 B

After

Width:  |  Height:  |  Size: 65 B

View File

Before

Width:  |  Height:  |  Size: 64 B

After

Width:  |  Height:  |  Size: 64 B

View File

Before

Width:  |  Height:  |  Size: 859 B

After

Width:  |  Height:  |  Size: 859 B

View File

Before

Width:  |  Height:  |  Size: 848 B

After

Width:  |  Height:  |  Size: 848 B

View File

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

Before

Width:  |  Height:  |  Size: 278 B

After

Width:  |  Height:  |  Size: 278 B

View File

Before

Width:  |  Height:  |  Size: 163 B

After

Width:  |  Height:  |  Size: 163 B

View File

Before

Width:  |  Height:  |  Size: 80 B

After

Width:  |  Height:  |  Size: 80 B

View File

Before

Width:  |  Height:  |  Size: 82 B

After

Width:  |  Height:  |  Size: 82 B

View File

Before

Width:  |  Height:  |  Size: 220 B

After

Width:  |  Height:  |  Size: 220 B

View File

Before

Width:  |  Height:  |  Size: 830 B

After

Width:  |  Height:  |  Size: 830 B

View File

Before

Width:  |  Height:  |  Size: 195 B

After

Width:  |  Height:  |  Size: 195 B

View File

Before

Width:  |  Height:  |  Size: 860 B

After

Width:  |  Height:  |  Size: 860 B

View File

Before

Width:  |  Height:  |  Size: 954 B

After

Width:  |  Height:  |  Size: 954 B

View File

Before

Width:  |  Height:  |  Size: 582 B

After

Width:  |  Height:  |  Size: 582 B

View File

Before

Width:  |  Height:  |  Size: 615 B

After

Width:  |  Height:  |  Size: 615 B

View File

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

Before

Width:  |  Height:  |  Size: 540 B

After

Width:  |  Height:  |  Size: 540 B

View File

Before

Width:  |  Height:  |  Size: 870 B

After

Width:  |  Height:  |  Size: 870 B

View File

Before

Width:  |  Height:  |  Size: 538 B

After

Width:  |  Height:  |  Size: 538 B

View File

Before

Width:  |  Height:  |  Size: 294 B

After

Width:  |  Height:  |  Size: 294 B

View File

Before

Width:  |  Height:  |  Size: 81 B

After

Width:  |  Height:  |  Size: 81 B

View File

Before

Width:  |  Height:  |  Size: 82 B

After

Width:  |  Height:  |  Size: 82 B

View File

Before

Width:  |  Height:  |  Size: 88 B

After

Width:  |  Height:  |  Size: 88 B

View File

Before

Width:  |  Height:  |  Size: 325 B

After

Width:  |  Height:  |  Size: 325 B

View File

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

View File

Before

Width:  |  Height:  |  Size: 556 B

After

Width:  |  Height:  |  Size: 556 B

View File

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

View File

Before

Width:  |  Height:  |  Size: 121 B

After

Width:  |  Height:  |  Size: 121 B

View File

Before

Width:  |  Height:  |  Size: 74 B

After

Width:  |  Height:  |  Size: 74 B

View File

Before

Width:  |  Height:  |  Size: 190 B

After

Width:  |  Height:  |  Size: 190 B

View File

Before

Width:  |  Height:  |  Size: 127 B

After

Width:  |  Height:  |  Size: 127 B

View File

Before

Width:  |  Height:  |  Size: 148 B

After

Width:  |  Height:  |  Size: 148 B

View File

Before

Width:  |  Height:  |  Size: 580 B

After

Width:  |  Height:  |  Size: 580 B

View File

Before

Width:  |  Height:  |  Size: 105 B

After

Width:  |  Height:  |  Size: 105 B

View File

Before

Width:  |  Height:  |  Size: 280 B

After

Width:  |  Height:  |  Size: 280 B

View File

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

Before

Width:  |  Height:  |  Size: 58 B

After

Width:  |  Height:  |  Size: 58 B

View File

Before

Width:  |  Height:  |  Size: 235 B

After

Width:  |  Height:  |  Size: 235 B

View File

Before

Width:  |  Height:  |  Size: 939 B

After

Width:  |  Height:  |  Size: 939 B

View File

Before

Width:  |  Height:  |  Size: 855 B

After

Width:  |  Height:  |  Size: 855 B

View File

Before

Width:  |  Height:  |  Size: 64 B

After

Width:  |  Height:  |  Size: 64 B

View File

Before

Width:  |  Height:  |  Size: 1013 B

After

Width:  |  Height:  |  Size: 1013 B

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Before

Width:  |  Height:  |  Size: 680 B

After

Width:  |  Height:  |  Size: 680 B

View File

Before

Width:  |  Height:  |  Size: 159 B

After

Width:  |  Height:  |  Size: 159 B

View File

Before

Width:  |  Height:  |  Size: 165 B

After

Width:  |  Height:  |  Size: 165 B

View File

Before

Width:  |  Height:  |  Size: 147 B

After

Width:  |  Height:  |  Size: 147 B

View File

Before

Width:  |  Height:  |  Size: 88 B

After

Width:  |  Height:  |  Size: 88 B

View File

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

View File

Before

Width:  |  Height:  |  Size: 848 B

After

Width:  |  Height:  |  Size: 848 B

View File

Before

Width:  |  Height:  |  Size: 613 B

After

Width:  |  Height:  |  Size: 613 B

View File

Before

Width:  |  Height:  |  Size: 1023 B

After

Width:  |  Height:  |  Size: 1023 B

View File

Before

Width:  |  Height:  |  Size: 94 B

After

Width:  |  Height:  |  Size: 94 B

View File

Before

Width:  |  Height:  |  Size: 93 B

After

Width:  |  Height:  |  Size: 93 B

View File

Before

Width:  |  Height:  |  Size: 342 B

After

Width:  |  Height:  |  Size: 342 B

Some files were not shown because too many files have changed in this diff Show More