started integrating more examples into the next.js app
mcyph
parent
dad45f61dd
commit
ce3a61f1d0
|
|
@ -6,6 +6,7 @@
|
|||
import mxRectangle from '../util/mxRectangle';
|
||||
import mxConstants from '../util/mxConstants';
|
||||
import mxRectangleShape from './mxRectangleShape';
|
||||
import mxUtils from "../util/mxUtils";
|
||||
|
||||
class mxLabel extends mxRectangleShape {
|
||||
/**
|
||||
|
|
@ -169,18 +170,18 @@ class mxLabel extends mxRectangleShape {
|
|||
mxUtils.getNumber(this.style, mxConstants.STYLE_SPACING, this.spacing) +
|
||||
5;
|
||||
|
||||
if (align == mxConstants.ALIGN_CENTER) {
|
||||
if (align === mxConstants.ALIGN_CENTER) {
|
||||
x += (w - width) / 2;
|
||||
} else if (align == mxConstants.ALIGN_RIGHT) {
|
||||
} else if (align === mxConstants.ALIGN_RIGHT) {
|
||||
x += w - width - spacing;
|
||||
} // default is left
|
||||
else {
|
||||
x += spacing;
|
||||
}
|
||||
|
||||
if (valign == mxConstants.ALIGN_TOP) {
|
||||
if (valign === mxConstants.ALIGN_TOP) {
|
||||
y += spacing;
|
||||
} else if (valign == mxConstants.ALIGN_BOTTOM) {
|
||||
} else if (valign === mxConstants.ALIGN_BOTTOM) {
|
||||
y += h - height - spacing;
|
||||
} // default is middle
|
||||
else {
|
||||
|
|
@ -242,9 +243,9 @@ class mxLabel extends mxRectangleShape {
|
|||
);
|
||||
const spacing = this.spacing + 5;
|
||||
|
||||
if (align == mxConstants.ALIGN_RIGHT) {
|
||||
if (align === mxConstants.ALIGN_RIGHT) {
|
||||
x += w - width - spacing;
|
||||
} else if (align == mxConstants.ALIGN_CENTER) {
|
||||
} else if (align === mxConstants.ALIGN_CENTER) {
|
||||
x += (w - width) / 2;
|
||||
} // default is left
|
||||
else {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import mxPoint from './mxPoint';
|
|||
import mxPopupMenu from './mxPopupMenu';
|
||||
import mxEventSource from './mxEventSource';
|
||||
import mxEventObject from './mxEventObject';
|
||||
import mxClient from "../mxClient";
|
||||
|
||||
class mxToolbar extends mxEventSource {
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -9,8 +9,10 @@ import React from 'react';
|
|||
import mxEvent from '../mxgraph/util/mxEvent';
|
||||
import mxGraph from '../mxgraph/view/mxGraph';
|
||||
import mxRubberband from '../mxgraph/handler/mxRubberband';
|
||||
import mxMorphing from '../mxgraph/util/mxMorphing';
|
||||
import mxUtils from '../mxgraph/util/mxUtils';
|
||||
|
||||
class MYNAMEHERE extends React.Component {
|
||||
class Morph extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -20,107 +22,80 @@ class MYNAMEHERE extends React.Component {
|
|||
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() {
|
||||
// Disables the built-in context menu
|
||||
mxEvent.disableContextMenu(this.el);
|
||||
|
||||
};
|
||||
// Creates the graph inside the given container
|
||||
const graph = new mxGraph(this.el);
|
||||
|
||||
// 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;
|
||||
var v2;
|
||||
try {
|
||||
v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
|
||||
var 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();
|
||||
}
|
||||
|
||||
let mult = 1;
|
||||
|
||||
document.body.appendChild(
|
||||
mxUtils.button('Morph', function() {
|
||||
graph.clearSelection();
|
||||
|
||||
graph.getModel().beginUpdate();
|
||||
try {
|
||||
let geo = graph.getCellGeometry(v1);
|
||||
geo = geo.clone();
|
||||
geo.x += 180 * mult;
|
||||
graph.getModel().setGeometry(v1, geo);
|
||||
|
||||
geo = graph.getCellGeometry(v2);
|
||||
geo = geo.clone();
|
||||
geo.x -= 180 * mult;
|
||||
graph.getModel().setGeometry(v2, geo);
|
||||
} finally {
|
||||
// Arguments are number of steps, ease and delay
|
||||
const morph = new mxMorphing(graph, 20, 1.2, 20);
|
||||
morph.addListener(mxEvent.DONE, function() {
|
||||
graph.getModel().endUpdate();
|
||||
});
|
||||
morph.startAnimation();
|
||||
}
|
||||
|
||||
mult *= -1;
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
{
|
||||
// Disables the built-in context menu
|
||||
mxEvent.disableContextMenu(container);
|
||||
|
||||
// Creates the graph inside the given container
|
||||
let 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).
|
||||
let parent = graph.getDefaultParent();
|
||||
|
||||
// Adds cells to the model in a single step
|
||||
graph.getModel().beginUpdate();
|
||||
var v1, v2;
|
||||
try
|
||||
{
|
||||
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();
|
||||
}
|
||||
|
||||
let mult = 1;
|
||||
|
||||
document.body.appendChild(mxUtils.button('Morph', function()
|
||||
{
|
||||
graph.clearSelection();
|
||||
|
||||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
let geo = graph.getCellGeometry(v1);
|
||||
geo = geo.clone();
|
||||
geo.x += 180 * mult;
|
||||
graph.getModel().setGeometry(v1, geo);
|
||||
|
||||
let geo = graph.getCellGeometry(v2);
|
||||
geo = geo.clone();
|
||||
geo.x -= 180 * mult;
|
||||
graph.getModel().setGeometry(v2, geo);
|
||||
}
|
||||
finally
|
||||
{
|
||||
// Arguments are number of steps, ease and delay
|
||||
let morph = new mxMorphing(graph, 20, 1.2, 20);
|
||||
morph.addListener(mxEvent.DONE, function()
|
||||
{
|
||||
graph.getModel().endUpdate();
|
||||
});
|
||||
morph.startAnimation();
|
||||
}
|
||||
|
||||
mult *= -1;
|
||||
}));
|
||||
}
|
||||
};
|
||||
</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>
|
||||
export default Morph;
|
||||
|
|
|
|||
|
|
@ -10,8 +10,10 @@ import React from 'react';
|
|||
import mxEvent from '../mxgraph/util/mxEvent';
|
||||
import mxGraph from '../mxgraph/view/mxGraph';
|
||||
import mxRubberband from '../mxgraph/handler/mxRubberband';
|
||||
import mxCellTracker from "../mxgraph/handler/mxCellTracker";
|
||||
import mxConstants from "../mxgraph/util/mxConstants";
|
||||
|
||||
class MYNAMEHERE extends React.Component {
|
||||
class OffPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -26,152 +28,192 @@ class MYNAMEHERE extends React.Component {
|
|||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
}}
|
||||
style={{}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default MYNAMEHERE;
|
||||
|
||||
|
||||
// Use complete cell as highlight region
|
||||
mxConstants.ACTIVE_REGION = 1;
|
||||
|
||||
// Program starts here. Creates a sample graph in the dynamically
|
||||
// created DOM node called container which is created below.
|
||||
function main()
|
||||
{
|
||||
// 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);
|
||||
const container = document.createElement('div');
|
||||
container.style.position = 'relative';
|
||||
container.style.overflow = 'hidden';
|
||||
container.style.height = '80vhpx';
|
||||
container.style.background = 'url("editors/images/grid.gif")';
|
||||
|
||||
this.el.appendChild(container);
|
||||
|
||||
// Creates the graph inside the given container
|
||||
const graph = new mxGraph(container);
|
||||
graph.setEnabled(false);
|
||||
|
||||
// Highlights offpage connectors
|
||||
const highlight = new mxCellTracker(graph, null, function(me) {
|
||||
const cell = me.getCell();
|
||||
|
||||
if (
|
||||
cell != null &&
|
||||
cell.value != null &&
|
||||
typeof cell.value.create === 'function'
|
||||
) {
|
||||
return cell;
|
||||
}
|
||||
else
|
||||
{
|
||||
let container = document.createElement('div');
|
||||
container.style.position = 'absolute';
|
||||
container.style.overflow = 'hidden';
|
||||
container.style.left = '0px';
|
||||
container.style.top = '0px';
|
||||
container.style.right = '0px';
|
||||
container.style.bottom = '0px';
|
||||
container.style.background = 'url("editors/images/grid.gif")';
|
||||
|
||||
document.body.appendChild(container);
|
||||
return null;
|
||||
});
|
||||
|
||||
// Creates the graph inside the given container
|
||||
let graph = new mxGraph(container);
|
||||
graph.setEnabled(false);
|
||||
// Handles clicks on offpage connectors and
|
||||
// executes function in user object
|
||||
graph.addListener(mxEvent.CLICK, function(source, evt) {
|
||||
const cell = evt.getProperty('cell');
|
||||
|
||||
// Highlights offpage connectors
|
||||
let highlight = new mxCellTracker(graph, null, function(me)
|
||||
{
|
||||
let cell = me.getCell();
|
||||
if (
|
||||
cell != null &&
|
||||
cell.value != null &&
|
||||
typeof cell.value.create === 'function'
|
||||
) {
|
||||
cell.value.create();
|
||||
}
|
||||
});
|
||||
|
||||
if (cell != null &&
|
||||
cell.value != null &&
|
||||
typeof(cell.value.create) == 'function')
|
||||
{
|
||||
return cell;
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
|
||||
// Handles clicks on offpage connectors and
|
||||
// executes function in user object
|
||||
graph.addListener(mxEvent.CLICK, function(source, evt)
|
||||
{
|
||||
let cell = evt.getProperty('cell');
|
||||
|
||||
if (cell != null &&
|
||||
cell.value != null &&
|
||||
typeof(cell.value.create) == 'function')
|
||||
{
|
||||
cell.value.create();
|
||||
}
|
||||
});
|
||||
|
||||
// Handles clicks on offpage connectors and
|
||||
// executes function in user object
|
||||
graph.getCursorForCell = function(cell)
|
||||
{
|
||||
if (cell != null &&
|
||||
cell.value != null &&
|
||||
typeof(cell.value.create) == 'function')
|
||||
{
|
||||
return 'pointer';
|
||||
}
|
||||
};
|
||||
|
||||
// Gets the default parent for inserting new cells. This
|
||||
// is normally the first child of the root (ie. layer 0).
|
||||
let first = null;
|
||||
let second = null;
|
||||
|
||||
first = function()
|
||||
{
|
||||
let value = {toString: function() { return 'Next'; }, create: second};
|
||||
|
||||
// Adds cells to the model in a single step
|
||||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
graph.getModel().setRoot(graph.getModel().createRoot());
|
||||
let parent = graph.getDefaultParent();
|
||||
|
||||
var v1 = graph.insertVertex(parent, null, 'Click', 30, 20, 80, 30, 'fillColor=#FFFF88;strokeColor=#FF1A00');
|
||||
var v2 = graph.insertVertex(parent, null, 'Next', 20, 150, 100, 30, 'fillColor=#FFFF88;strokeColor=#FF1A00');
|
||||
var v3 = graph.insertVertex(parent, null, value, 200, 150, 40, 40, 'shape=triangle;align=left;fillColor=#C3D9FF;strokeColor=#4096EE');
|
||||
var e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#FF1A00');
|
||||
}
|
||||
finally
|
||||
{
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
};
|
||||
|
||||
second = function()
|
||||
{
|
||||
let value = {toString: function() { return 'Prev'; }, create: first};
|
||||
|
||||
// Adds cells to the model in a single step
|
||||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
graph.getModel().setRoot(graph.getModel().createRoot());
|
||||
let parent = graph.getDefaultParent();
|
||||
|
||||
var v1 = graph.insertVertex(parent, null, 'Click', 30, 20, 80, 30, 'fillColor=#CDEB8B;strokeColor=#008C00');
|
||||
var v2 = graph.insertVertex(parent, null, 'Prev', 220, 20, 100, 30, 'fillColor=#CDEB8B;strokeColor=#008C00');
|
||||
var v3 = graph.insertVertex(parent, null, value, 30, 150, 40, 40, 'shape=triangle;align=right;fillColor=#C3D9FF;strokeColor=#4096EE;direction=west');
|
||||
var e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#008C00');
|
||||
}
|
||||
finally
|
||||
{
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
};
|
||||
|
||||
first();
|
||||
// Handles clicks on offpage connectors and
|
||||
// executes function in user object
|
||||
graph.getCursorForCell = function(cell) {
|
||||
if (
|
||||
cell != null &&
|
||||
cell.value != null &&
|
||||
typeof cell.value.create === 'function'
|
||||
) {
|
||||
return 'pointer';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
|
||||
<body onload="main();">
|
||||
</body>
|
||||
</html>
|
||||
// Gets the default parent for inserting new cells. This
|
||||
// is normally the first child of the root (ie. layer 0).
|
||||
let first = null;
|
||||
let second = null;
|
||||
|
||||
first = function() {
|
||||
const value = {
|
||||
toString() {
|
||||
return 'Next';
|
||||
},
|
||||
create: second,
|
||||
};
|
||||
|
||||
// Adds cells to the model in a single step
|
||||
graph.getModel().beginUpdate();
|
||||
try {
|
||||
graph.getModel().setRoot(graph.getModel().createRoot());
|
||||
const parent = graph.getDefaultParent();
|
||||
|
||||
const v1 = graph.insertVertex(
|
||||
parent,
|
||||
null,
|
||||
'Click',
|
||||
30,
|
||||
20,
|
||||
80,
|
||||
30,
|
||||
'fillColor=#FFFF88;strokeColor=#FF1A00'
|
||||
);
|
||||
const v2 = graph.insertVertex(
|
||||
parent,
|
||||
null,
|
||||
'Next',
|
||||
20,
|
||||
150,
|
||||
100,
|
||||
30,
|
||||
'fillColor=#FFFF88;strokeColor=#FF1A00'
|
||||
);
|
||||
const v3 = graph.insertVertex(
|
||||
parent,
|
||||
null,
|
||||
value,
|
||||
200,
|
||||
150,
|
||||
40,
|
||||
40,
|
||||
'shape=triangle;align=left;fillColor=#C3D9FF;strokeColor=#4096EE'
|
||||
);
|
||||
const e1 = graph.insertEdge(
|
||||
parent,
|
||||
null,
|
||||
null,
|
||||
v1,
|
||||
v2,
|
||||
'strokeColor=#FF1A00'
|
||||
);
|
||||
} finally {
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
};
|
||||
|
||||
second = function() {
|
||||
const value = {
|
||||
toString() {
|
||||
return 'Prev';
|
||||
},
|
||||
create: first,
|
||||
};
|
||||
|
||||
// Adds cells to the model in a single step
|
||||
graph.getModel().beginUpdate();
|
||||
try {
|
||||
graph.getModel().setRoot(graph.getModel().createRoot());
|
||||
const parent = graph.getDefaultParent();
|
||||
|
||||
const v1 = graph.insertVertex(
|
||||
parent,
|
||||
null,
|
||||
'Click',
|
||||
30,
|
||||
20,
|
||||
80,
|
||||
30,
|
||||
'fillColor=#CDEB8B;strokeColor=#008C00'
|
||||
);
|
||||
const v2 = graph.insertVertex(
|
||||
parent,
|
||||
null,
|
||||
'Prev',
|
||||
220,
|
||||
20,
|
||||
100,
|
||||
30,
|
||||
'fillColor=#CDEB8B;strokeColor=#008C00'
|
||||
);
|
||||
const v3 = graph.insertVertex(
|
||||
parent,
|
||||
null,
|
||||
value,
|
||||
30,
|
||||
150,
|
||||
40,
|
||||
40,
|
||||
'shape=triangle;align=right;fillColor=#C3D9FF;strokeColor=#4096EE;direction=west'
|
||||
);
|
||||
const e1 = graph.insertEdge(
|
||||
parent,
|
||||
null,
|
||||
null,
|
||||
v1,
|
||||
v2,
|
||||
'strokeColor=#008C00'
|
||||
);
|
||||
} finally {
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
};
|
||||
|
||||
first();
|
||||
}
|
||||
}
|
||||
|
||||
export default OffPage;
|
||||
|
|
|
|||
|
|
@ -10,8 +10,22 @@ import React from 'react';
|
|||
import mxEvent from '../mxgraph/util/mxEvent';
|
||||
import mxGraph from '../mxgraph/view/mxGraph';
|
||||
import mxRubberband from '../mxgraph/handler/mxRubberband';
|
||||
import mxPrintPreview from '../mxgraph/view/mxPrintPreview';
|
||||
import mxUtils from '../mxgraph/util/mxUtils';
|
||||
import mxCellOverlay from '../mxgraph/view/mxCellOverlay';
|
||||
import mxImage from '../mxgraph/util/mxImage';
|
||||
import mxPoint from '../mxgraph/util/mxPoint';
|
||||
import mxConstants from "../mxgraph/util/mxConstants";
|
||||
import mxWindow from "../mxgraph/util/mxWindow";
|
||||
import mxToolbar from "../mxgraph/util/mxToolbar";
|
||||
import mxLayoutManager from "../mxgraph/view/mxLayoutManager";
|
||||
import mxEdgeStyle from "../mxgraph/view/mxEdgeStyle";
|
||||
import mxCompactTreeLayout from "../mxgraph/layout/mxCompactTreeLayout";
|
||||
import mxKeyHandler from "../mxgraph/handler/mxKeyHandler";
|
||||
import mxClient from "../mxgraph/mxClient";
|
||||
import mxOutline from "../mxgraph/view/mxOutline";
|
||||
|
||||
class MYNAMEHERE extends React.Component {
|
||||
class OrgChart extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -21,429 +35,383 @@ class MYNAMEHERE extends React.Component {
|
|||
return (
|
||||
<>
|
||||
<h1>Orgchart example for mxGraph</h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
zIndex: 1,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
height: '80vh',
|
||||
background: 'transparent',
|
||||
borderStyle: 'solid',
|
||||
borderColor: 'lightgray',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default MYNAMEHERE;
|
||||
|
||||
// Makes the shadow brighter
|
||||
mxConstants.SHADOWCOLOR = '#C0C0C0';
|
||||
|
||||
// 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()
|
||||
{
|
||||
// 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
|
||||
{
|
||||
// Workaround for Internet Explorer ignoring certain styles
|
||||
let container = document.createElement('div');
|
||||
container.style.position = 'absolute';
|
||||
container.style.overflow = 'hidden';
|
||||
container.style.left = '0px';
|
||||
container.style.top = '0px';
|
||||
container.style.right = '0px';
|
||||
container.style.bottom = '0px';
|
||||
// Workaround for Internet Explorer ignoring certain styles
|
||||
const container = document.createElement('div');
|
||||
container.style.position = 'absolute';
|
||||
container.style.overflow = 'hidden';
|
||||
container.style.left = '0px';
|
||||
container.style.top = '0px';
|
||||
container.style.right = '0px';
|
||||
container.style.bottom = '0px';
|
||||
|
||||
let outline = document.getElementById('outlineContainer');
|
||||
const outline = document.getElementById('outlineContainer');
|
||||
|
||||
mxEvent.disableContextMenu(container);
|
||||
mxEvent.disableContextMenu(container);
|
||||
|
||||
// Sets a gradient background
|
||||
if (mxClient.IS_GC || mxClient.IS_SF)
|
||||
{
|
||||
container.style.background = '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E7E7E7))';
|
||||
}
|
||||
else if (mxClient.IS_NS)
|
||||
{
|
||||
container.style.background = '-moz-linear-gradient(top, #FFFFFF, #E7E7E7)';
|
||||
}
|
||||
// Sets a gradient background
|
||||
if (mxClient.IS_GC || mxClient.IS_SF) {
|
||||
container.style.background =
|
||||
'-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E7E7E7))';
|
||||
} else if (mxClient.IS_NS) {
|
||||
container.style.background =
|
||||
'-moz-linear-gradient(top, #FFFFFF, #E7E7E7)';
|
||||
}
|
||||
|
||||
document.body.appendChild(container);
|
||||
this.el.appendChild(container);
|
||||
|
||||
// Creates the graph inside the given container
|
||||
let graph = new mxGraph(container);
|
||||
// Creates the graph inside the given container
|
||||
const graph = new mxGraph(container);
|
||||
|
||||
// Enables automatic sizing for vertices after editing and
|
||||
// panning by using the left mouse button.
|
||||
graph.setCellsMovable(false);
|
||||
graph.setAutoSizeCells(true);
|
||||
graph.setPanning(true);
|
||||
graph.centerZoom = false;
|
||||
graph.panningHandler.useLeftButtonForPanning = true;
|
||||
// Enables automatic sizing for vertices after editing and
|
||||
// panning by using the left mouse button.
|
||||
graph.setCellsMovable(false);
|
||||
graph.setAutoSizeCells(true);
|
||||
graph.setPanning(true);
|
||||
graph.centerZoom = false;
|
||||
graph.panningHandler.useLeftButtonForPanning = true;
|
||||
|
||||
// Displays a popupmenu when the user clicks
|
||||
// on a cell (using the left mouse button) but
|
||||
// do not select the cell when the popup menu
|
||||
// is displayed
|
||||
graph.panningHandler.popupMenuHandler = false;
|
||||
// Displays a popupmenu when the user clicks
|
||||
// on a cell (using the left mouse button) but
|
||||
// do not select the cell when the popup menu
|
||||
// is displayed
|
||||
graph.panningHandler.popupMenuHandler = false;
|
||||
|
||||
// Creates the outline (navigator, overview) for moving
|
||||
// around the graph in the top, right corner of the window.
|
||||
let outln = new mxOutline(graph, outline);
|
||||
// Creates the outline (navigator, overview) for moving
|
||||
// around the graph in the top, right corner of the window.
|
||||
const outln = new mxOutline(graph, outline);
|
||||
|
||||
// Disables tooltips on touch devices
|
||||
graph.setTooltips(!mxClient.IS_TOUCH);
|
||||
// Disables tooltips on touch devices
|
||||
graph.setTooltips(!mxClient.IS_TOUCH);
|
||||
|
||||
// Set some stylesheet options for the visual appearance of vertices
|
||||
let style = graph.getStylesheet().getDefaultVertexStyle();
|
||||
style[mxConstants.STYLE_SHAPE] = 'label';
|
||||
// Set some stylesheet options for the visual appearance of vertices
|
||||
let style = graph.getStylesheet().getDefaultVertexStyle();
|
||||
style[mxConstants.STYLE_SHAPE] = 'label';
|
||||
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
|
||||
style[mxConstants.STYLE_SPACING_LEFT] = 54;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
|
||||
style[mxConstants.STYLE_SPACING_LEFT] = 54;
|
||||
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#5d65df';
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#5d65df';
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';
|
||||
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#1d258f';
|
||||
style[mxConstants.STYLE_FONTFAMILY] = 'Verdana';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '12';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = '1';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#1d258f';
|
||||
style[mxConstants.STYLE_FONTFAMILY] = 'Verdana';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '12';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = '1';
|
||||
|
||||
style[mxConstants.STYLE_SHADOW] = '1';
|
||||
style[mxConstants.STYLE_ROUNDED] = '1';
|
||||
style[mxConstants.STYLE_GLASS] = '1';
|
||||
style[mxConstants.STYLE_SHADOW] = '1';
|
||||
style[mxConstants.STYLE_ROUNDED] = '1';
|
||||
style[mxConstants.STYLE_GLASS] = '1';
|
||||
|
||||
style[mxConstants.STYLE_IMAGE] = 'editors/images/dude3.png';
|
||||
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
|
||||
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
|
||||
style[mxConstants.STYLE_SPACING] = 8;
|
||||
style[mxConstants.STYLE_IMAGE] = 'editors/images/dude3.png';
|
||||
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
|
||||
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
|
||||
style[mxConstants.STYLE_SPACING] = 8;
|
||||
|
||||
// Sets the default style for edges
|
||||
style = graph.getStylesheet().getDefaultEdgeStyle();
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_STROKEWIDTH] = 3;
|
||||
style[mxConstants.STYLE_EXIT_X] = 0.5; // center
|
||||
style[mxConstants.STYLE_EXIT_Y] = 1.0; // bottom
|
||||
style[mxConstants.STYLE_EXIT_PERIMETER] = 0; // disabled
|
||||
style[mxConstants.STYLE_ENTRY_X] = 0.5; // center
|
||||
style[mxConstants.STYLE_ENTRY_Y] = 0; // top
|
||||
style[mxConstants.STYLE_ENTRY_PERIMETER] = 0; // disabled
|
||||
// Sets the default style for edges
|
||||
style = graph.getStylesheet().getDefaultEdgeStyle();
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_STROKEWIDTH] = 3;
|
||||
style[mxConstants.STYLE_EXIT_X] = 0.5; // center
|
||||
style[mxConstants.STYLE_EXIT_Y] = 1.0; // bottom
|
||||
style[mxConstants.STYLE_EXIT_PERIMETER] = 0; // disabled
|
||||
style[mxConstants.STYLE_ENTRY_X] = 0.5; // center
|
||||
style[mxConstants.STYLE_ENTRY_Y] = 0; // top
|
||||
style[mxConstants.STYLE_ENTRY_PERIMETER] = 0; // disabled
|
||||
|
||||
// Disable the following for straight lines
|
||||
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
|
||||
// Disable the following for straight lines
|
||||
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
|
||||
|
||||
// Stops editing on enter or escape keypress
|
||||
let keyHandler = new mxKeyHandler(graph);
|
||||
// Stops editing on enter or escape keypress
|
||||
const keyHandler = new mxKeyHandler(graph);
|
||||
|
||||
// Enables automatic layout on the graph and installs
|
||||
// a tree layout for all groups who's children are
|
||||
// being changed, added or removed.
|
||||
let layout = new mxCompactTreeLayout(graph, false);
|
||||
layout.useBoundingBox = false;
|
||||
layout.edgeRouting = false;
|
||||
layout.levelDistance = 60;
|
||||
layout.nodeDistance = 16;
|
||||
// Enables automatic layout on the graph and installs
|
||||
// a tree layout for all groups who's children are
|
||||
// being changed, added or removed.
|
||||
const layout = new mxCompactTreeLayout(graph, false);
|
||||
layout.useBoundingBox = false;
|
||||
layout.edgeRouting = false;
|
||||
layout.levelDistance = 60;
|
||||
layout.nodeDistance = 16;
|
||||
|
||||
// Allows the layout to move cells even though cells
|
||||
// aren't movable in the graph
|
||||
layout.isVertexMovable = function(cell)
|
||||
{
|
||||
return true;
|
||||
};
|
||||
// Allows the layout to move cells even though cells
|
||||
// aren't movable in the graph
|
||||
layout.isVertexMovable = function(cell) {
|
||||
return true;
|
||||
};
|
||||
|
||||
let layoutMgr = new mxLayoutManager(graph);
|
||||
const layoutMgr = new mxLayoutManager(graph);
|
||||
|
||||
layoutMgr.getLayout = function(cell)
|
||||
{
|
||||
if (cell.getChildCount() > 0)
|
||||
{
|
||||
return layout;
|
||||
}
|
||||
};
|
||||
|
||||
// Installs a popupmenu handler using local function (see below).
|
||||
graph.popupMenuHandler.factoryMethod = function(menu, cell, evt)
|
||||
{
|
||||
return createPopupMenu(graph, menu, cell, evt);
|
||||
};
|
||||
|
||||
// Fix for wrong preferred size
|
||||
let oldGetPreferredSizeForCell = graph.getPreferredSizeForCell;
|
||||
graph.getPreferredSizeForCell = function(cell)
|
||||
{
|
||||
let result = oldGetPreferredSizeForCell.apply(this, arguments);
|
||||
|
||||
if (result != null)
|
||||
{
|
||||
result.width = Math.max(120, result.width - 40);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
// Sets the maximum text scale to 1
|
||||
graph.cellRenderer.getTextScale = function(state)
|
||||
{
|
||||
return Math.min(1, state.view.scale);
|
||||
};
|
||||
|
||||
// Dynamically adds text to the label as we zoom in
|
||||
// (without affecting the preferred size for new cells)
|
||||
graph.cellRenderer.getLabelValue = function(state)
|
||||
{
|
||||
let result = state.cell.value;
|
||||
|
||||
if (state.view.graph.getModel().isVertex(state.cell))
|
||||
{
|
||||
if (state.view.scale > 1)
|
||||
{
|
||||
result += '\nDetails 1';
|
||||
}
|
||||
|
||||
if (state.view.scale > 1.3)
|
||||
{
|
||||
result += '\nDetails 2';
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
// 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 the root vertex of the tree
|
||||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
let w = graph.container.offsetWidth;
|
||||
var v1 = graph.insertVertex(parent, 'treeRoot',
|
||||
'Organization', w/2 - 30, 20, 140, 60, 'image=editors/images/house.png');
|
||||
graph.updateCellSize(v1);
|
||||
addOverlays(graph, v1, false);
|
||||
}
|
||||
finally
|
||||
{
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
|
||||
let content = document.createElement('div');
|
||||
content.style.padding = '4px';
|
||||
|
||||
let tb = new mxToolbar(content);
|
||||
|
||||
tb.addItem('Zoom In', 'images/zoom_in32.png',function(evt)
|
||||
{
|
||||
graph.zoomIn();
|
||||
});
|
||||
|
||||
tb.addItem('Zoom Out', 'images/zoom_out32.png',function(evt)
|
||||
{
|
||||
graph.zoomOut();
|
||||
});
|
||||
|
||||
tb.addItem('Actual Size', 'images/view_1_132.png',function(evt)
|
||||
{
|
||||
graph.zoomActual();
|
||||
});
|
||||
|
||||
tb.addItem('Print', 'images/print32.png',function(evt)
|
||||
{
|
||||
let preview = new mxPrintPreview(graph, 1);
|
||||
preview.open();
|
||||
});
|
||||
|
||||
tb.addItem('Poster Print', 'images/press32.png',function(evt)
|
||||
{
|
||||
let pageCount = mxUtils.prompt('Enter maximum page count', '1');
|
||||
|
||||
if (pageCount != null)
|
||||
{
|
||||
let scale = mxUtils.getScaleForPageCount(pageCount, graph);
|
||||
let preview = new mxPrintPreview(graph, scale);
|
||||
preview.open();
|
||||
}
|
||||
});
|
||||
|
||||
wnd = new mxWindow('Tools', content, 0, 0, 200, 66, false);
|
||||
wnd.setMaximizable(false);
|
||||
wnd.setScrollable(false);
|
||||
wnd.setResizable(false);
|
||||
wnd.setVisible(true);
|
||||
layoutMgr.getLayout = function(cell) {
|
||||
if (cell.getChildCount() > 0) {
|
||||
return layout;
|
||||
}
|
||||
};
|
||||
|
||||
// Function to create the entries in the popupmenu
|
||||
function createPopupMenu(graph, menu, cell, evt)
|
||||
{
|
||||
let model = graph.getModel();
|
||||
// Installs a popupmenu handler using local function (see below).
|
||||
graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) {
|
||||
return createPopupMenu(graph, menu, cell, evt);
|
||||
};
|
||||
|
||||
if (cell != null)
|
||||
{
|
||||
if (model.isVertex(cell))
|
||||
{
|
||||
menu.addItem('Add child', 'editors/images/overlays/check.png', function()
|
||||
{
|
||||
addChild(graph, cell);
|
||||
});
|
||||
// Fix for wrong preferred size
|
||||
const oldGetPreferredSizeForCell = graph.getPreferredSizeForCell;
|
||||
graph.getPreferredSizeForCell = function(cell) {
|
||||
const result = oldGetPreferredSizeForCell.apply(this, arguments);
|
||||
|
||||
if (result != null) {
|
||||
result.width = Math.max(120, result.width - 40);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
// Sets the maximum text scale to 1
|
||||
graph.cellRenderer.getTextScale = function(state) {
|
||||
return Math.min(1, state.view.scale);
|
||||
};
|
||||
|
||||
// Dynamically adds text to the label as we zoom in
|
||||
// (without affecting the preferred size for new cells)
|
||||
graph.cellRenderer.getLabelValue = function(state) {
|
||||
let result = state.cell.value;
|
||||
|
||||
if (state.view.graph.getModel().isVertex(state.cell)) {
|
||||
if (state.view.scale > 1) {
|
||||
result += '\nDetails 1';
|
||||
}
|
||||
|
||||
if (state.view.scale > 1.3) {
|
||||
result += '\nDetails 2';
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
// 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 the root vertex of the tree
|
||||
graph.getModel().beginUpdate();
|
||||
try {
|
||||
const w = graph.container.offsetWidth;
|
||||
const v1 = graph.insertVertex(
|
||||
parent,
|
||||
'treeRoot',
|
||||
'Organization',
|
||||
w / 2 - 30,
|
||||
20,
|
||||
140,
|
||||
60,
|
||||
'image=editors/images/house.png'
|
||||
);
|
||||
graph.updateCellSize(v1);
|
||||
addOverlays(graph, v1, false);
|
||||
} finally {
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
|
||||
menu.addItem('Edit label', 'editors/images/text.gif', function()
|
||||
{
|
||||
graph.startEditingAtCell(cell);
|
||||
const content = document.createElement('div');
|
||||
content.style.padding = '4px';
|
||||
|
||||
const tb = new mxToolbar(content);
|
||||
|
||||
tb.addItem('Zoom In', 'images/zoom_in32.png', function(evt) {
|
||||
graph.zoomIn();
|
||||
});
|
||||
|
||||
if (cell.id != 'treeRoot' &&
|
||||
model.isVertex(cell))
|
||||
{
|
||||
menu.addItem('Delete', 'editors/images/delete.gif', function()
|
||||
{
|
||||
deleteSubtree(graph, cell);
|
||||
tb.addItem('Zoom Out', 'images/zoom_out32.png', function(evt) {
|
||||
graph.zoomOut();
|
||||
});
|
||||
|
||||
tb.addItem('Actual Size', 'images/view_1_132.png', function(evt) {
|
||||
graph.zoomActual();
|
||||
});
|
||||
|
||||
tb.addItem('Print', 'images/print32.png', function(evt) {
|
||||
const preview = new mxPrintPreview(graph, 1);
|
||||
preview.open();
|
||||
});
|
||||
|
||||
tb.addItem('Poster Print', 'images/press32.png', function(evt) {
|
||||
const pageCount = mxUtils.prompt('Enter maximum page count', '1');
|
||||
|
||||
if (pageCount != null) {
|
||||
const scale = mxUtils.getScaleForPageCount(pageCount, graph);
|
||||
const preview = new mxPrintPreview(graph, scale);
|
||||
preview.open();
|
||||
}
|
||||
});
|
||||
|
||||
let wnd = new mxWindow('Tools', content, 0, 0, 200, 66, false);
|
||||
wnd.setMaximizable(false);
|
||||
wnd.setScrollable(false);
|
||||
wnd.setResizable(false);
|
||||
wnd.setVisible(true);
|
||||
|
||||
// Function to create the entries in the popupmenu
|
||||
function createPopupMenu(graph, menu, cell, evt) {
|
||||
const model = graph.getModel();
|
||||
|
||||
if (cell != null) {
|
||||
if (model.isVertex(cell)) {
|
||||
menu.addItem(
|
||||
'Add child',
|
||||
'editors/images/overlays/check.png',
|
||||
function() {
|
||||
addChild(graph, cell);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
menu.addItem('Edit label', 'editors/images/text.gif', function() {
|
||||
graph.startEditingAtCell(cell);
|
||||
});
|
||||
|
||||
if (cell.id != 'treeRoot' && model.isVertex(cell)) {
|
||||
menu.addItem('Delete', 'editors/images/delete.gif', function() {
|
||||
deleteSubtree(graph, cell);
|
||||
});
|
||||
}
|
||||
|
||||
menu.addSeparator();
|
||||
}
|
||||
|
||||
menu.addItem('Fit', 'editors/images/zoom.gif', function() {
|
||||
graph.fit();
|
||||
});
|
||||
|
||||
menu.addItem('Actual', 'editors/images/zoomactual.gif', function() {
|
||||
graph.zoomActual();
|
||||
});
|
||||
|
||||
menu.addSeparator();
|
||||
|
||||
menu.addItem('Print', 'editors/images/print.gif', function() {
|
||||
const preview = new mxPrintPreview(graph, 1);
|
||||
preview.open();
|
||||
});
|
||||
|
||||
menu.addItem('Poster Print', 'editors/images/print.gif', function() {
|
||||
const pageCount = mxUtils.prompt('Enter maximum page count', '1');
|
||||
|
||||
if (pageCount != null) {
|
||||
const scale = mxUtils.getScaleForPageCount(pageCount, graph);
|
||||
const preview = new mxPrintPreview(graph, scale);
|
||||
preview.open();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
menu.addSeparator();
|
||||
}
|
||||
function addOverlays(graph, cell, addDeleteIcon) {
|
||||
let overlay = new mxCellOverlay(
|
||||
new mxImage('images/add.png', 24, 24),
|
||||
'Add child'
|
||||
);
|
||||
overlay.cursor = 'hand';
|
||||
overlay.align = mxConstants.ALIGN_CENTER;
|
||||
overlay.addListener(
|
||||
mxEvent.CLICK,
|
||||
mxUtils.bind(this, function(sender, evt) {
|
||||
addChild(graph, cell);
|
||||
})
|
||||
);
|
||||
|
||||
menu.addItem('Fit', 'editors/images/zoom.gif', function()
|
||||
{
|
||||
graph.fit();
|
||||
});
|
||||
graph.addCellOverlay(cell, overlay);
|
||||
|
||||
menu.addItem('Actual', 'editors/images/zoomactual.gif', function()
|
||||
{
|
||||
graph.zoomActual();
|
||||
});
|
||||
if (addDeleteIcon) {
|
||||
overlay = new mxCellOverlay(
|
||||
new mxImage('images/close.png', 30, 30),
|
||||
'Delete'
|
||||
);
|
||||
overlay.cursor = 'hand';
|
||||
overlay.offset = new mxPoint(-4, 8);
|
||||
overlay.align = mxConstants.ALIGN_RIGHT;
|
||||
overlay.verticalAlign = mxConstants.ALIGN_TOP;
|
||||
overlay.addListener(
|
||||
mxEvent.CLICK,
|
||||
mxUtils.bind(this, function(sender, evt) {
|
||||
deleteSubtree(graph, cell);
|
||||
})
|
||||
);
|
||||
|
||||
menu.addSeparator();
|
||||
|
||||
menu.addItem('Print', 'editors/images/print.gif', function()
|
||||
{
|
||||
let preview = new mxPrintPreview(graph, 1);
|
||||
preview.open();
|
||||
});
|
||||
|
||||
menu.addItem('Poster Print', 'editors/images/print.gif', function()
|
||||
{
|
||||
let pageCount = mxUtils.prompt('Enter maximum page count', '1');
|
||||
|
||||
if (pageCount != null)
|
||||
{
|
||||
let scale = mxUtils.getScaleForPageCount(pageCount, graph);
|
||||
let preview = new mxPrintPreview(graph, scale);
|
||||
preview.open();
|
||||
graph.addCellOverlay(cell, overlay);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function addOverlays(graph, cell, addDeleteIcon)
|
||||
{
|
||||
let overlay = new mxCellOverlay(new mxImage('images/add.png', 24, 24), 'Add child');
|
||||
overlay.cursor = 'hand';
|
||||
overlay.align = mxConstants.ALIGN_CENTER;
|
||||
overlay.addListener(mxEvent.CLICK, mxUtils.bind(this, function(sender, evt)
|
||||
{
|
||||
addChild(graph, cell);
|
||||
}));
|
||||
function addChild(graph, cell) {
|
||||
const model = graph.getModel();
|
||||
const parent = graph.getDefaultParent();
|
||||
let vertex;
|
||||
|
||||
graph.addCellOverlay(cell, overlay);
|
||||
model.beginUpdate();
|
||||
try {
|
||||
vertex = graph.insertVertex(parent, null, 'Double click to set name');
|
||||
const geometry = model.getGeometry(vertex);
|
||||
|
||||
if (addDeleteIcon)
|
||||
{
|
||||
overlay = new mxCellOverlay(new mxImage('images/close.png', 30, 30), 'Delete');
|
||||
overlay.cursor = 'hand';
|
||||
overlay.offset = new mxPoint(-4, 8);
|
||||
overlay.align = mxConstants.ALIGN_RIGHT;
|
||||
overlay.verticalAlign = mxConstants.ALIGN_TOP;
|
||||
overlay.addListener(mxEvent.CLICK, mxUtils.bind(this, function(sender, evt)
|
||||
{
|
||||
deleteSubtree(graph, cell);
|
||||
}));
|
||||
// Updates the geometry of the vertex with the
|
||||
// preferred size computed in the graph
|
||||
const size = graph.getPreferredSizeForCell(vertex);
|
||||
geometry.width = size.width;
|
||||
geometry.height = size.height;
|
||||
|
||||
graph.addCellOverlay(cell, overlay);
|
||||
// Adds the edge between the existing cell
|
||||
// and the new vertex and executes the
|
||||
// automatic layout on the parent
|
||||
const edge = graph.insertEdge(parent, null, '', cell, vertex);
|
||||
|
||||
// Configures the edge label "in-place" to reside
|
||||
// at the end of the edge (x = 1) and with an offset
|
||||
// of 20 pixels in negative, vertical direction.
|
||||
edge.geometry.x = 1;
|
||||
edge.geometry.y = 0;
|
||||
edge.geometry.offset = new mxPoint(0, -20);
|
||||
|
||||
addOverlays(graph, vertex, true);
|
||||
} finally {
|
||||
model.endUpdate();
|
||||
}
|
||||
|
||||
return vertex;
|
||||
}
|
||||
|
||||
function deleteSubtree(graph, cell) {
|
||||
// Gets the subtree from cell downwards
|
||||
const cells = [];
|
||||
graph.traverse(cell, true, function(vertex) {
|
||||
cells.push(vertex);
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
graph.removeCells(cells);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function addChild(graph, cell)
|
||||
{
|
||||
let model = graph.getModel();
|
||||
let parent = graph.getDefaultParent();
|
||||
var vertex;
|
||||
|
||||
model.beginUpdate();
|
||||
try
|
||||
{
|
||||
vertex = graph.insertVertex(parent, null, 'Double click to set name');
|
||||
let geometry = model.getGeometry(vertex);
|
||||
|
||||
// Updates the geometry of the vertex with the
|
||||
// preferred size computed in the graph
|
||||
let size = graph.getPreferredSizeForCell(vertex);
|
||||
geometry.width = size.width;
|
||||
geometry.height = size.height;
|
||||
|
||||
// Adds the edge between the existing cell
|
||||
// and the new vertex and executes the
|
||||
// automatic layout on the parent
|
||||
let edge = graph.insertEdge(parent, null, '', cell, vertex);
|
||||
|
||||
// Configures the edge label "in-place" to reside
|
||||
// at the end of the edge (x = 1) and with an offset
|
||||
// of 20 pixels in negative, vertical direction.
|
||||
edge.geometry.x = 1;
|
||||
edge.geometry.y = 0;
|
||||
edge.geometry.offset = new mxPoint(0, -20);
|
||||
|
||||
addOverlays(graph, vertex, true);
|
||||
}
|
||||
finally
|
||||
{
|
||||
model.endUpdate();
|
||||
}
|
||||
|
||||
return vertex;
|
||||
};
|
||||
|
||||
function deleteSubtree(graph, cell)
|
||||
{
|
||||
// Gets the subtree from cell downwards
|
||||
let cells = [];
|
||||
graph.traverse(cell, true, function(vertex)
|
||||
{
|
||||
cells.push(vertex);
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
graph.removeCells(cells);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
|
||||
<body onload="main();">
|
||||
|
||||
<!-- Creates a container for the outline -->
|
||||
<div id="outlineContainer"
|
||||
style="z-index:1;position:absolute;overflow:hidden;top:0px;right:0px;width:160px;height:120px;background:transparent;border-style:solid;border-color:lightgray;">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
export default OrgChart;
|
||||
|
|
|
|||
|
|
@ -9,8 +9,15 @@ 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 mxGuide from "../mxgraph/util/mxGuide";
|
||||
import mxEdgeHandler from "../mxgraph/handler/mxEdgeHandler";
|
||||
import mxConnectionHandler from "../mxgraph/handler/mxConnectionHandler";
|
||||
import mxGraphView from "../mxgraph/view/mxGraphView";
|
||||
import mxPoint from "../mxgraph/util/mxPoint";
|
||||
import mxCellState from "../mxgraph/view/mxCellState";
|
||||
|
||||
class MYNAMEHERE extends React.Component {
|
||||
class Orthogonal extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -20,147 +27,164 @@ class MYNAMEHERE extends React.Component {
|
|||
return (
|
||||
<>
|
||||
<h1>Orthogonal example for mxGraph</h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
width: '321px',
|
||||
height: '241px',
|
||||
background: "url('editors/images/grid.gif')",
|
||||
cursor: 'default',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// Enables guides
|
||||
mxGraphHandler.prototype.guidesEnabled = true;
|
||||
|
||||
};
|
||||
}
|
||||
// Alt disables guides
|
||||
mxGuide.prototype.isEnabledForEvent = function(evt) {
|
||||
return !mxEvent.isAltDown(evt);
|
||||
};
|
||||
|
||||
export default MYNAMEHERE;
|
||||
// Enables snapping waypoints to terminals
|
||||
mxEdgeHandler.prototype.snapToTerminals = true;
|
||||
|
||||
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;
|
||||
// Enables orthogonal connect preview in IE
|
||||
mxConnectionHandler.prototype.movePreviewAway = false;
|
||||
|
||||
// Alt disables guides
|
||||
mxGuide.prototype.isEnabledForEvent = function(evt)
|
||||
{
|
||||
return !mxEvent.isAltDown(evt);
|
||||
};
|
||||
// Creates the graph inside the given container
|
||||
const graph = new mxGraph(this.el);
|
||||
graph.disconnectOnMove = false;
|
||||
graph.foldingEnabled = false;
|
||||
graph.cellsResizable = false;
|
||||
graph.extendParents = false;
|
||||
graph.setConnectable(true);
|
||||
|
||||
// Enables snapping waypoints to terminals
|
||||
mxEdgeHandler.prototype.snapToTerminals = true;
|
||||
// Implements perimeter-less connection points as fixed points (computed before the edge style).
|
||||
graph.view.updateFixedTerminalPoint = function(
|
||||
edge,
|
||||
terminal,
|
||||
source,
|
||||
constraint
|
||||
) {
|
||||
mxGraphView.prototype.updateFixedTerminalPoint.apply(this, arguments);
|
||||
|
||||
// Enables orthogonal connect preview in IE
|
||||
mxConnectionHandler.prototype.movePreviewAway = false;
|
||||
const pts = edge.absolutePoints;
|
||||
const pt = pts[source ? 0 : pts.length - 1];
|
||||
|
||||
// Creates the graph inside the given container
|
||||
let graph = new mxGraph(container);
|
||||
graph.disconnectOnMove = false;
|
||||
graph.foldingEnabled = false;
|
||||
graph.cellsResizable = false;
|
||||
graph.extendParents = false;
|
||||
graph.setConnectable(true);
|
||||
|
||||
// Implements perimeter-less connection points as fixed points (computed before the edge style).
|
||||
graph.view.updateFixedTerminalPoint = function(edge, terminal, source, constraint)
|
||||
{
|
||||
mxGraphView.prototype.updateFixedTerminalPoint.apply(this, arguments);
|
||||
|
||||
let pts = edge.absolutePoints;
|
||||
let pt = pts[(source) ? 0 : pts.length - 1];
|
||||
|
||||
if (terminal != null && pt == null && this.getPerimeterFunction(terminal) == null)
|
||||
{
|
||||
edge.setAbsoluteTerminalPoint(new mxPoint(this.getRoutingCenterX(terminal),
|
||||
this.getRoutingCenterY(terminal)), source)
|
||||
}
|
||||
};
|
||||
|
||||
// Changes the default edge style
|
||||
graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
|
||||
delete graph.getStylesheet().getDefaultEdgeStyle()['endArrow'];
|
||||
|
||||
// Implements the connect preview
|
||||
graph.connectionHandler.createEdgeState = function(me)
|
||||
{
|
||||
let edge = graph.createEdge(null, null, null, null, null);
|
||||
|
||||
return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
|
||||
};
|
||||
|
||||
// Uncomment the following if you want the container
|
||||
// to fit the size of the graph
|
||||
//graph.setResizeContainer(true);
|
||||
|
||||
// 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, '', 40, 40, 40, 30);
|
||||
v1.setConnectable(false);
|
||||
var v11 = graph.insertVertex(v1, null, '', 0.5, 0, 10, 40,
|
||||
'portConstraint=northsouth;', true);
|
||||
v11.geometry.offset = new mxPoint(-5, -5);
|
||||
var v12 = graph.insertVertex(v1, null, '', 0, 0.5, 10, 10,
|
||||
'portConstraint=west;shape=triangle;direction=west;perimeter=none;' +
|
||||
'routingCenterX=-0.5;routingCenterY=0;', true);
|
||||
v12.geometry.offset = new mxPoint(-10, -5);
|
||||
var v13 = graph.insertVertex(v1, null, '', 1, 0.5, 10, 10,
|
||||
'portConstraint=east;shape=triangle;direction=east;perimeter=none;' +
|
||||
'routingCenterX=0.5;routingCenterY=0;', true);
|
||||
v13.geometry.offset = new mxPoint(0, -5);
|
||||
|
||||
var v2 = graph.addCell(graph.getModel().cloneCell(v1));
|
||||
v2.geometry.x = 200;
|
||||
v2.geometry.y = 60;
|
||||
|
||||
var v3 = graph.addCell(graph.getModel().cloneCell(v1));
|
||||
v3.geometry.x = 40;
|
||||
v3.geometry.y = 150;
|
||||
|
||||
var v4 = graph.addCell(graph.getModel().cloneCell(v1));
|
||||
v4.geometry.x = 200;
|
||||
v4.geometry.y = 170;
|
||||
|
||||
graph.insertEdge(parent, null, '', v1.getChildAt(2), v2.getChildAt(1));
|
||||
graph.insertEdge(parent, null, '', v2.getChildAt(2), v3.getChildAt(1));
|
||||
graph.insertEdge(parent, null, '', v3.getChildAt(2), v4.getChildAt(1));
|
||||
}
|
||||
finally
|
||||
{
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
if (
|
||||
terminal != null &&
|
||||
pt == null &&
|
||||
this.getPerimeterFunction(terminal) == null
|
||||
) {
|
||||
edge.setAbsoluteTerminalPoint(
|
||||
new mxPoint(
|
||||
this.getRoutingCenterX(terminal),
|
||||
this.getRoutingCenterY(terminal)
|
||||
),
|
||||
source
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<!-- Page passes the container for the graph to the program -->
|
||||
<body onload="main(document.getElementById('graphContainer'))">
|
||||
// Changes the default edge style
|
||||
graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =
|
||||
'orthogonalEdgeStyle';
|
||||
delete graph.getStylesheet().getDefaultEdgeStyle().endArrow;
|
||||
|
||||
<!-- Creates a container for the graph with a grid wallpaper -->
|
||||
<div id="graphContainer"
|
||||
style="overflow:hidden;position:relative;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
// Implements the connect preview
|
||||
graph.connectionHandler.createEdgeState = function(me) {
|
||||
const edge = graph.createEdge(null, null, null, null, null);
|
||||
|
||||
return new mxCellState(
|
||||
this.graph.view,
|
||||
edge,
|
||||
this.graph.getCellStyle(edge)
|
||||
);
|
||||
};
|
||||
|
||||
// Uncomment the following if you want the container
|
||||
// to fit the size of the graph
|
||||
// graph.setResizeContainer(true);
|
||||
|
||||
// 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, '', 40, 40, 40, 30);
|
||||
v1.setConnectable(false);
|
||||
const v11 = graph.insertVertex(
|
||||
v1,
|
||||
null,
|
||||
'',
|
||||
0.5,
|
||||
0,
|
||||
10,
|
||||
40,
|
||||
'portConstraint=northsouth;',
|
||||
true
|
||||
);
|
||||
v11.geometry.offset = new mxPoint(-5, -5);
|
||||
const v12 = graph.insertVertex(
|
||||
v1,
|
||||
null,
|
||||
'',
|
||||
0,
|
||||
0.5,
|
||||
10,
|
||||
10,
|
||||
'portConstraint=west;shape=triangle;direction=west;perimeter=none;' +
|
||||
'routingCenterX=-0.5;routingCenterY=0;',
|
||||
true
|
||||
);
|
||||
v12.geometry.offset = new mxPoint(-10, -5);
|
||||
const v13 = graph.insertVertex(
|
||||
v1,
|
||||
null,
|
||||
'',
|
||||
1,
|
||||
0.5,
|
||||
10,
|
||||
10,
|
||||
'portConstraint=east;shape=triangle;direction=east;perimeter=none;' +
|
||||
'routingCenterX=0.5;routingCenterY=0;',
|
||||
true
|
||||
);
|
||||
v13.geometry.offset = new mxPoint(0, -5);
|
||||
|
||||
const v2 = graph.addCell(graph.getModel().cloneCell(v1));
|
||||
v2.geometry.x = 200;
|
||||
v2.geometry.y = 60;
|
||||
|
||||
const v3 = graph.addCell(graph.getModel().cloneCell(v1));
|
||||
v3.geometry.x = 40;
|
||||
v3.geometry.y = 150;
|
||||
|
||||
const v4 = graph.addCell(graph.getModel().cloneCell(v1));
|
||||
v4.geometry.x = 200;
|
||||
v4.geometry.y = 170;
|
||||
|
||||
graph.insertEdge(parent, null, '', v1.getChildAt(2), v2.getChildAt(1));
|
||||
graph.insertEdge(parent, null, '', v2.getChildAt(2), v3.getChildAt(1));
|
||||
graph.insertEdge(parent, null, '', v3.getChildAt(2), v4.getChildAt(1));
|
||||
} finally {
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Orthogonal;
|
||||
|
|
|
|||
|
|
@ -9,9 +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 mxCellTracker from '../mxgraph/handler/mxCellTracker';
|
||||
import mxCellOverlay from '../mxgraph/view/mxCellOverlay';
|
||||
import mxImage from '../mxgraph/util/mxImage';
|
||||
import mxUtils from '../mxgraph/util/mxUtils';
|
||||
|
||||
class MYNAMEHERE extends React.Component {
|
||||
class Overlays extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -21,120 +24,94 @@ class MYNAMEHERE extends React.Component {
|
|||
return (
|
||||
<>
|
||||
<h1>Overlays example for mxGraph</h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
width: '321px',
|
||||
height: '241px',
|
||||
background: "url('editors/images/grid.gif')",
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// Creates the graph inside the given container
|
||||
const graph = new mxGraph(this.el);
|
||||
|
||||
};
|
||||
// Disables basic selection and cell handling
|
||||
graph.setEnabled(false);
|
||||
|
||||
// Highlights the vertices when the mouse enters
|
||||
const highlight = new mxCellTracker(graph, '#00FF00');
|
||||
|
||||
// Enables tooltips for the overlays
|
||||
graph.setTooltips(true);
|
||||
|
||||
// Installs a handler for click events in the graph
|
||||
// that toggles the overlay for the respective cell
|
||||
graph.addListener(mxEvent.CLICK, function(sender, evt) {
|
||||
const cell = evt.getProperty('cell');
|
||||
|
||||
if (cell != null) {
|
||||
const overlays = graph.getCellOverlays(cell);
|
||||
|
||||
if (overlays == null) {
|
||||
// Creates a new overlay with an image and a tooltip
|
||||
const overlay = new mxCellOverlay(
|
||||
new mxImage('editors/images/overlays/check.png', 16, 16),
|
||||
'Overlay tooltip'
|
||||
);
|
||||
|
||||
// Installs a handler for clicks on the overlay
|
||||
overlay.addListener(mxEvent.CLICK, function(sender, evt2) {
|
||||
mxUtils.alert('Overlay clicked');
|
||||
});
|
||||
|
||||
// Sets the overlay for the cell in the graph
|
||||
graph.addCellOverlay(cell, overlay);
|
||||
} else {
|
||||
graph.removeCellOverlays(cell);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Installs a handler for double click events in the graph
|
||||
// that shows an alert box
|
||||
graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt) {
|
||||
const cell = evt.getProperty('cell');
|
||||
mxUtils.alert(`Doubleclick: ${cell != null ? 'Cell' : 'Graph'}`);
|
||||
evt.consume();
|
||||
});
|
||||
|
||||
// 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, 'Click,', 20, 20, 60, 40);
|
||||
const v2 = graph.insertVertex(
|
||||
parent,
|
||||
null,
|
||||
'Doubleclick',
|
||||
200,
|
||||
150,
|
||||
100,
|
||||
40
|
||||
);
|
||||
const e1 = graph.insertEdge(parent, null, '', v1, v2);
|
||||
} finally {
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default MYNAMEHERE;
|
||||
|
||||
|
||||
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);
|
||||
|
||||
// Disables basic selection and cell handling
|
||||
graph.setEnabled(false);
|
||||
|
||||
// Highlights the vertices when the mouse enters
|
||||
let highlight = new mxCellTracker(graph, '#00FF00');
|
||||
|
||||
// Enables tooltips for the overlays
|
||||
graph.setTooltips(true);
|
||||
|
||||
// Installs a handler for click events in the graph
|
||||
// that toggles the overlay for the respective cell
|
||||
graph.addListener(mxEvent.CLICK, function(sender, evt)
|
||||
{
|
||||
let cell = evt.getProperty('cell');
|
||||
|
||||
if (cell != null)
|
||||
{
|
||||
let overlays = graph.getCellOverlays(cell);
|
||||
|
||||
if (overlays == null)
|
||||
{
|
||||
// Creates a new overlay with an image and a tooltip
|
||||
let overlay = new mxCellOverlay(
|
||||
new mxImage('editors/images/overlays/check.png', 16, 16),
|
||||
'Overlay tooltip');
|
||||
|
||||
// Installs a handler for clicks on the overlay
|
||||
overlay.addListener(mxEvent.CLICK, function(sender, evt2)
|
||||
{
|
||||
mxUtils.alert('Overlay clicked');
|
||||
});
|
||||
|
||||
// Sets the overlay for the cell in the graph
|
||||
graph.addCellOverlay(cell, overlay);
|
||||
}
|
||||
else
|
||||
{
|
||||
graph.removeCellOverlays(cell);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Installs a handler for double click events in the graph
|
||||
// that shows an alert box
|
||||
graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt)
|
||||
{
|
||||
let cell = evt.getProperty('cell');
|
||||
mxUtils.alert('Doubleclick: '+((cell != null) ? 'Cell' : 'Graph'));
|
||||
evt.consume();
|
||||
});
|
||||
|
||||
// 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, 'Click,', 20, 20, 60, 40);
|
||||
var v2 = graph.insertVertex(parent, null, 'Doubleclick', 200, 150, 100, 40);
|
||||
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="overflow:hidden;position:relative;width:321px;height:241px;background:url('editors/images/grid.gif')">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
export default Overlays;
|
||||
|
|
|
|||
|
|
@ -10,8 +10,11 @@ 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 mxConstants from "../mxgraph/util/mxConstants";
|
||||
import mxPrintPreview from "../mxgraph/view/mxPrintPreview";
|
||||
|
||||
class MYNAMEHERE extends React.Component {
|
||||
class PageBreaks extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -27,178 +30,154 @@ class MYNAMEHERE extends React.Component {
|
|||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
width: '641px',
|
||||
height: '481px',
|
||||
background: "url('editors/images/grid.gif')",
|
||||
cursor: 'default',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
mxEvent.disableContextMenu(this.el);
|
||||
|
||||
};
|
||||
// Creates the graph inside the given container
|
||||
const graph = new mxGraph(this.el);
|
||||
graph.view.setScale(0.15);
|
||||
graph.pageBreaksVisible = true;
|
||||
graph.pageBreakDashed = true;
|
||||
graph.preferPageSize = true;
|
||||
graph.centerZoom = false;
|
||||
graph.setPanning(true);
|
||||
|
||||
// Account for the header and footer size in the page format
|
||||
const headerSize = 100;
|
||||
const footerSize = 100;
|
||||
|
||||
// Removes header and footer from page height
|
||||
graph.pageFormat.height -= headerSize + footerSize;
|
||||
|
||||
// Takes zoom into account for moving cells
|
||||
graph.graphHandler.scaleGrid = true;
|
||||
|
||||
// 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,', 10, 10, 280, 330);
|
||||
const v2 = graph.insertVertex(
|
||||
parent,
|
||||
null,
|
||||
'World!',
|
||||
graph.pageFormat.width * graph.pageScale - 280 - 10,
|
||||
graph.pageFormat.height * graph.pageScale - 330 - 10,
|
||||
280,
|
||||
330
|
||||
);
|
||||
const e1 = graph.insertEdge(parent, null, '', v1, v2);
|
||||
} finally {
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
|
||||
document.body.appendChild(
|
||||
mxUtils.button('Toggle Page Breaks', function(evt) {
|
||||
graph.pageBreaksVisible = !graph.pageBreaksVisible;
|
||||
graph.sizeDidChange();
|
||||
})
|
||||
);
|
||||
|
||||
document.body.appendChild(
|
||||
mxUtils.button('Zoom In', function(evt) {
|
||||
graph.zoomIn();
|
||||
})
|
||||
);
|
||||
|
||||
document.body.appendChild(
|
||||
mxUtils.button('Zoom Out', function(evt) {
|
||||
graph.zoomOut();
|
||||
})
|
||||
);
|
||||
|
||||
document.body.appendChild(
|
||||
mxUtils.button('Print', function(evt) {
|
||||
// Matches actual printer paper size and avoids blank pages
|
||||
const scale = 0.5;
|
||||
|
||||
// Applies scale to page
|
||||
const pf = mxRectangle.fromRectangle(
|
||||
graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT
|
||||
);
|
||||
pf.width = Math.round(pf.width * scale * graph.pageScale);
|
||||
pf.height = Math.round(pf.height * scale * graph.pageScale);
|
||||
|
||||
// Finds top left corner of top left page
|
||||
const bounds = mxRectangle.fromRectangle(graph.getGraphBounds());
|
||||
bounds.x -= graph.view.translate.x * graph.view.scale;
|
||||
bounds.y -= graph.view.translate.y * graph.view.scale;
|
||||
|
||||
const x0 = Math.floor(bounds.x / pf.width) * pf.width;
|
||||
const y0 = Math.floor(bounds.y / pf.height) * pf.height;
|
||||
|
||||
const preview = new mxPrintPreview(graph, scale, pf, 0, -x0, -y0);
|
||||
preview.marginTop = headerSize * scale * graph.pageScale;
|
||||
preview.marginBottom = footerSize * scale * graph.pageScale;
|
||||
preview.autoOrigin = false;
|
||||
|
||||
const oldRenderPage = preview.renderPage;
|
||||
preview.renderPage = function(w, h, x, y, content, pageNumber) {
|
||||
const div = oldRenderPage.apply(this, arguments);
|
||||
|
||||
const header = document.createElement('div');
|
||||
header.style.position = 'absolute';
|
||||
header.style.boxSizing = 'border-box';
|
||||
header.style.fontFamily = 'Arial,Helvetica';
|
||||
header.style.height = `${this.marginTop - 10}px`;
|
||||
header.style.textAlign = 'center';
|
||||
header.style.verticalAlign = 'middle';
|
||||
header.style.marginTop = 'auto';
|
||||
header.style.fontSize = '12px';
|
||||
header.style.width = '100%';
|
||||
|
||||
// Vertical centering for text in header/footer
|
||||
header.style.lineHeight = `${this.marginTop - 10}px`;
|
||||
|
||||
const footer = header.cloneNode(true);
|
||||
|
||||
mxUtils.write(header, `Page ${pageNumber} - Header`);
|
||||
header.style.borderBottom = '1px solid gray';
|
||||
header.style.top = '0px';
|
||||
|
||||
mxUtils.write(footer, `Page ${pageNumber} - Footer`);
|
||||
footer.style.borderTop = '1px solid gray';
|
||||
footer.style.bottom = '0px';
|
||||
|
||||
div.firstChild.appendChild(footer);
|
||||
div.firstChild.appendChild(header);
|
||||
|
||||
return div;
|
||||
};
|
||||
|
||||
preview.open();
|
||||
})
|
||||
);
|
||||
|
||||
document.body.appendChild(
|
||||
mxUtils.button('Reset View', function(evt) {
|
||||
graph.view.scaleAndTranslate(0.15, 0, 0);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
{
|
||||
mxEvent.disableContextMenu(container);
|
||||
|
||||
// Creates the graph inside the given container
|
||||
let graph = new mxGraph(container);
|
||||
graph.view.setScale(0.15);
|
||||
graph.pageBreaksVisible = true;
|
||||
graph.pageBreakDashed = true;
|
||||
graph.preferPageSize = true;
|
||||
graph.centerZoom = false;
|
||||
graph.setPanning(true);
|
||||
|
||||
// Account for the header and footer size in the page format
|
||||
let headerSize = 100;
|
||||
let footerSize = 100;
|
||||
|
||||
// Removes header and footer from page height
|
||||
graph.pageFormat.height -= headerSize + footerSize;
|
||||
|
||||
// Takes zoom into account for moving cells
|
||||
graph.graphHandler.scaleGrid = true;
|
||||
|
||||
// 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,', 10, 10, 280, 330);
|
||||
var v2 = graph.insertVertex(parent, null, 'World!',
|
||||
graph.pageFormat.width * graph.pageScale - 280 - 10,
|
||||
graph.pageFormat.height * graph.pageScale - 330 - 10,
|
||||
280, 330);
|
||||
var e1 = graph.insertEdge(parent, null, '', v1, v2);
|
||||
}
|
||||
finally
|
||||
{
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
|
||||
document.body.appendChild(mxUtils.button('Toggle Page Breaks',
|
||||
function(evt)
|
||||
{
|
||||
graph.pageBreaksVisible = !graph.pageBreaksVisible;
|
||||
graph.sizeDidChange();
|
||||
}
|
||||
));
|
||||
|
||||
document.body.appendChild(mxUtils.button('Zoom In',
|
||||
function(evt)
|
||||
{
|
||||
graph.zoomIn();
|
||||
}
|
||||
));
|
||||
|
||||
document.body.appendChild(mxUtils.button('Zoom Out',
|
||||
function(evt)
|
||||
{
|
||||
graph.zoomOut();
|
||||
}
|
||||
));
|
||||
|
||||
document.body.appendChild(mxUtils.button('Print',
|
||||
function(evt)
|
||||
{
|
||||
// Matches actual printer paper size and avoids blank pages
|
||||
let scale = 0.5;
|
||||
|
||||
// Applies scale to page
|
||||
let pf = mxRectangle.fromRectangle(graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT);
|
||||
pf.width = Math.round(pf.width * scale * graph.pageScale);
|
||||
pf.height = Math.round(pf.height * scale * graph.pageScale);
|
||||
|
||||
// Finds top left corner of top left page
|
||||
let bounds = mxRectangle.fromRectangle(graph.getGraphBounds());
|
||||
bounds.x -= graph.view.translate.x * graph.view.scale;
|
||||
bounds.y -= graph.view.translate.y * graph.view.scale;
|
||||
|
||||
var x0 = Math.floor(bounds.x / pf.width) * pf.width;
|
||||
var y0 = Math.floor(bounds.y / pf.height) * pf.height;
|
||||
|
||||
let preview = new mxPrintPreview(graph, scale, pf, 0, -x0, -y0);
|
||||
preview.marginTop = headerSize * scale * graph.pageScale;
|
||||
preview.marginBottom = footerSize * scale * graph.pageScale;
|
||||
preview.autoOrigin = false;
|
||||
|
||||
let oldRenderPage = preview.renderPage;
|
||||
preview.renderPage = function(w, h, x, y, content, pageNumber)
|
||||
{
|
||||
let div = oldRenderPage.apply(this, arguments);
|
||||
|
||||
let header = document.createElement('div');
|
||||
header.style.position = 'absolute';
|
||||
header.style.boxSizing = 'border-box';
|
||||
header.style.fontFamily = 'Arial,Helvetica';
|
||||
header.style.height = (this.marginTop - 10) + 'px';
|
||||
header.style.textAlign = 'center';
|
||||
header.style.verticalAlign = 'middle';
|
||||
header.style.marginTop = 'auto';
|
||||
header.style.fontSize = '12px';
|
||||
header.style.width = '100%';
|
||||
|
||||
// Vertical centering for text in header/footer
|
||||
header.style.lineHeight = (this.marginTop - 10) + 'px';
|
||||
|
||||
let footer = header.cloneNode(true);
|
||||
|
||||
mxUtils.write(header, 'Page ' + pageNumber + ' - Header');
|
||||
header.style.borderBottom = '1px solid gray';
|
||||
header.style.top = '0px';
|
||||
|
||||
mxUtils.write(footer, 'Page ' + pageNumber + ' - Footer');
|
||||
footer.style.borderTop = '1px solid gray';
|
||||
footer.style.bottom = '0px';
|
||||
|
||||
div.firstChild.appendChild(footer);
|
||||
div.firstChild.appendChild(header);
|
||||
|
||||
return div;
|
||||
};
|
||||
|
||||
preview.open();
|
||||
}
|
||||
));
|
||||
|
||||
document.body.appendChild(mxUtils.button('Reset View',
|
||||
function(evt)
|
||||
{
|
||||
graph.view.scaleAndTranslate(0.15, 0, 0);
|
||||
}
|
||||
));
|
||||
}
|
||||
};
|
||||
</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;position:relative;width:641px;height:481px;background:url('editors/images/grid.gif');cursor:default;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
export default PageBreaks;
|
||||
|
|
|
|||
|
|
@ -37,6 +37,12 @@ import RadialTreeLayout from "./RadialTreeLayout";
|
|||
import PortRefs from "./PortRefs";
|
||||
import Permissions from "./Permissions";
|
||||
import Perimeter from "./Perimeter";
|
||||
import PageBreaks from "./PageBreaks";
|
||||
import Overlays from "./Overlays";
|
||||
import Orthogonal from "./Orthogonal";
|
||||
import OrgChart from "./OrgChart";
|
||||
import OffPage from "./OffPage";
|
||||
import Morph from "./Morph";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
|
|
@ -65,6 +71,12 @@ export default function Home() {
|
|||
<EdgeTolerance />
|
||||
<Editing />
|
||||
|
||||
<Morph />
|
||||
<OffPage />
|
||||
<OrgChart />
|
||||
<Orthogonal />
|
||||
<Overlays />
|
||||
<PageBreaks />
|
||||
<Perimeter />
|
||||
<Permissions />
|
||||
<PortRefs />
|
||||
|
|
|
|||
Loading…
Reference in New Issue