integrated more examples into the next.js app
mcyph
parent
adcef6350e
commit
4b8c14d0da
|
|
@ -1,5 +1,3 @@
|
|||
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
|
||||
<!DOCTYPE html>
|
||||
/**
|
||||
* Copyright (c) 2006-2013, JGraph Ltd
|
||||
|
||||
|
|
@ -11,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 mxPoint from '../mxgraph/util/mxPoint';
|
||||
import mxLog from '../mxgraph/util/mxLog';
|
||||
import mxUtils from '../mxgraph/util/mxUtils';
|
||||
import mxGraphView from '../mxgraph/view/mxGraphView';
|
||||
|
||||
class MYNAMEHERE extends React.Component {
|
||||
class Grid extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -22,215 +24,196 @@ class MYNAMEHERE extends React.Component {
|
|||
return (
|
||||
<>
|
||||
<h1>Grid example for mxGraph</h1>
|
||||
|
||||
<div
|
||||
ref={el => {
|
||||
this.el = el;
|
||||
}}
|
||||
style={{
|
||||
|
||||
overflow: 'hidden',
|
||||
width: '641px',
|
||||
height: '481px',
|
||||
cursor: 'default',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
ref={el => {
|
||||
this.el2 = el;
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
mxEvent.disableContextMenu(document.body);
|
||||
|
||||
};
|
||||
// Creates the graph inside the given container
|
||||
const graph = new mxGraph(this.el);
|
||||
graph.graphHandler.scaleGrid = true;
|
||||
graph.setPanning(true);
|
||||
|
||||
// Enables rubberband selection
|
||||
new mxRubberband(graph);
|
||||
|
||||
let repaintGrid;
|
||||
|
||||
// Create grid dynamically (requires canvas)
|
||||
(function() {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.top = '0px';
|
||||
canvas.style.left = '0px';
|
||||
canvas.style.zIndex = -1;
|
||||
graph.container.appendChild(canvas);
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Modify event filtering to accept canvas as container
|
||||
const mxGraphViewIsContainerEvent =
|
||||
mxGraphView.prototype.isContainerEvent;
|
||||
mxGraphView.prototype.isContainerEvent = function(evt) {
|
||||
return (
|
||||
mxGraphViewIsContainerEvent.apply(this, arguments) ||
|
||||
mxEvent.getSource(evt) === canvas
|
||||
);
|
||||
};
|
||||
|
||||
let s = 0;
|
||||
let gs = 0;
|
||||
let tr = new mxPoint();
|
||||
let w = 0;
|
||||
let h = 0;
|
||||
|
||||
repaintGrid = function() {
|
||||
if (ctx != null) {
|
||||
const bounds = graph.getGraphBounds();
|
||||
const width = Math.max(
|
||||
bounds.x + bounds.width,
|
||||
graph.container.clientWidth
|
||||
);
|
||||
const height = Math.max(
|
||||
bounds.y + bounds.height,
|
||||
graph.container.clientHeight
|
||||
);
|
||||
const sizeChanged = width !== w || height !== h;
|
||||
|
||||
if (
|
||||
graph.view.scale !== s ||
|
||||
graph.view.translate.x !== tr.x ||
|
||||
graph.view.translate.y !== tr.y ||
|
||||
gs !== graph.gridSize ||
|
||||
sizeChanged
|
||||
) {
|
||||
tr = graph.view.translate.clone();
|
||||
s = graph.view.scale;
|
||||
gs = graph.gridSize;
|
||||
w = width;
|
||||
h = height;
|
||||
|
||||
// Clears the background if required
|
||||
if (!sizeChanged) {
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
} else {
|
||||
canvas.setAttribute('width', w);
|
||||
canvas.setAttribute('height', h);
|
||||
}
|
||||
|
||||
const tx = tr.x * s;
|
||||
const ty = tr.y * s;
|
||||
|
||||
// Sets the distance of the grid lines in pixels
|
||||
const minStepping = graph.gridSize;
|
||||
let stepping = minStepping * s;
|
||||
|
||||
if (stepping < minStepping) {
|
||||
const count =
|
||||
Math.round(Math.ceil(minStepping / stepping) / 2) * 2;
|
||||
stepping = count * stepping;
|
||||
}
|
||||
|
||||
const xs = Math.floor((0 - tx) / stepping) * stepping + tx;
|
||||
let xe = Math.ceil(w / stepping) * stepping;
|
||||
const ys = Math.floor((0 - ty) / stepping) * stepping + ty;
|
||||
let ye = Math.ceil(h / stepping) * stepping;
|
||||
|
||||
xe += Math.ceil(stepping);
|
||||
ye += Math.ceil(stepping);
|
||||
|
||||
const ixs = Math.round(xs);
|
||||
const ixe = Math.round(xe);
|
||||
const iys = Math.round(ys);
|
||||
const iye = Math.round(ye);
|
||||
|
||||
// Draws the actual grid
|
||||
ctx.strokeStyle = '#f6f6f6';
|
||||
ctx.beginPath();
|
||||
|
||||
for (let x = xs; x <= xe; x += stepping) {
|
||||
x = Math.round((x - tx) / stepping) * stepping + tx;
|
||||
const ix = Math.round(x);
|
||||
|
||||
ctx.moveTo(ix + 0.5, iys + 0.5);
|
||||
ctx.lineTo(ix + 0.5, iye + 0.5);
|
||||
}
|
||||
|
||||
for (let y = ys; y <= ye; y += stepping) {
|
||||
y = Math.round((y - ty) / stepping) * stepping + ty;
|
||||
const iy = Math.round(y);
|
||||
|
||||
ctx.moveTo(ixs + 0.5, iy + 0.5);
|
||||
ctx.lineTo(ixe + 0.5, iy + 0.5);
|
||||
}
|
||||
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
mxLog.show();
|
||||
mxLog.debug('Using background image');
|
||||
|
||||
this.el.style.backgroundImage = "url('editors/images/grid.gif')";
|
||||
}
|
||||
|
||||
const mxGraphViewValidateBackground =
|
||||
mxGraphView.prototype.validateBackground;
|
||||
mxGraphView.prototype.validateBackground = function() {
|
||||
mxGraphViewValidateBackground.apply(this, arguments);
|
||||
repaintGrid();
|
||||
};
|
||||
})();
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
graph.centerZoom = false;
|
||||
|
||||
this.el2.appendChild(
|
||||
mxUtils.button('+', function() {
|
||||
graph.zoomIn();
|
||||
})
|
||||
);
|
||||
|
||||
this.el2.appendChild(
|
||||
mxUtils.button('-', function() {
|
||||
graph.zoomOut();
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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(document.body);
|
||||
|
||||
// Creates the graph inside the given container
|
||||
let graph = new mxGraph(container);
|
||||
graph.graphHandler.scaleGrid = true;
|
||||
graph.setPanning(true);
|
||||
|
||||
// Enables rubberband selection
|
||||
new mxRubberband(graph);
|
||||
|
||||
// Create grid dynamically (requires canvas)
|
||||
(function()
|
||||
{
|
||||
try
|
||||
{
|
||||
let canvas = document.createElement('canvas');
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.top = '0px';
|
||||
canvas.style.left = '0px';
|
||||
canvas.style.zIndex = -1;
|
||||
graph.container.appendChild(canvas);
|
||||
|
||||
let ctx = canvas.getContext('2d');
|
||||
|
||||
// Modify event filtering to accept canvas as container
|
||||
let mxGraphViewIsContainerEvent = mxGraphView.prototype.isContainerEvent;
|
||||
mxGraphView.prototype.isContainerEvent = function(evt)
|
||||
{
|
||||
return mxGraphViewIsContainerEvent.apply(this, arguments) ||
|
||||
mxEvent.getSource(evt) == canvas;
|
||||
};
|
||||
|
||||
let s = 0;
|
||||
let gs = 0;
|
||||
let tr = new mxPoint();
|
||||
let w = 0;
|
||||
let h = 0;
|
||||
|
||||
function repaintGrid()
|
||||
{
|
||||
if (ctx != null)
|
||||
{
|
||||
let bounds = graph.getGraphBounds();
|
||||
let width = Math.max(bounds.x + bounds.width, graph.container.clientWidth);
|
||||
let height = Math.max(bounds.y + bounds.height, graph.container.clientHeight);
|
||||
let sizeChanged = width != w || height != h;
|
||||
|
||||
if (graph.view.scale != s || graph.view.translate.x != tr.x || graph.view.translate.y != tr.y ||
|
||||
gs != graph.gridSize || sizeChanged)
|
||||
{
|
||||
tr = graph.view.translate.clone();
|
||||
s = graph.view.scale;
|
||||
gs = graph.gridSize;
|
||||
w = width;
|
||||
h = height;
|
||||
|
||||
// Clears the background if required
|
||||
if (!sizeChanged)
|
||||
{
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
}
|
||||
else
|
||||
{
|
||||
canvas.setAttribute('width', w);
|
||||
canvas.setAttribute('height', h);
|
||||
}
|
||||
|
||||
let tx = tr.x * s;
|
||||
let ty = tr.y * s;
|
||||
|
||||
// Sets the distance of the grid lines in pixels
|
||||
let minStepping = graph.gridSize;
|
||||
let stepping = minStepping * s;
|
||||
|
||||
if (stepping < minStepping)
|
||||
{
|
||||
let count = Math.round(Math.ceil(minStepping / stepping) / 2) * 2;
|
||||
stepping = count * stepping;
|
||||
}
|
||||
|
||||
let xs = Math.floor((0 - tx) / stepping) * stepping + tx;
|
||||
let xe = Math.ceil(w / stepping) * stepping;
|
||||
let ys = Math.floor((0 - ty) / stepping) * stepping + ty;
|
||||
let ye = Math.ceil(h / stepping) * stepping;
|
||||
|
||||
xe += Math.ceil(stepping);
|
||||
ye += Math.ceil(stepping);
|
||||
|
||||
let ixs = Math.round(xs);
|
||||
let ixe = Math.round(xe);
|
||||
let iys = Math.round(ys);
|
||||
let iye = Math.round(ye);
|
||||
|
||||
// Draws the actual grid
|
||||
ctx.strokeStyle = '#f6f6f6';
|
||||
ctx.beginPath();
|
||||
|
||||
for (let x = xs; x <= xe; x += stepping)
|
||||
{
|
||||
x = Math.round((x - tx) / stepping) * stepping + tx;
|
||||
let ix = Math.round(x);
|
||||
|
||||
ctx.moveTo(ix + 0.5, iys + 0.5);
|
||||
ctx.lineTo(ix + 0.5, iye + 0.5);
|
||||
}
|
||||
|
||||
for (let y = ys; y <= ye; y += stepping)
|
||||
{
|
||||
y = Math.round((y - ty) / stepping) * stepping + ty;
|
||||
let iy = Math.round(y);
|
||||
|
||||
ctx.moveTo(ixs + 0.5, iy + 0.5);
|
||||
ctx.lineTo(ixe + 0.5, iy + 0.5);
|
||||
}
|
||||
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
mxLog.show();
|
||||
mxLog.debug('Using background image');
|
||||
|
||||
container.style.backgroundImage = 'url(\'editors/images/grid.gif\')';
|
||||
}
|
||||
|
||||
let mxGraphViewValidateBackground = mxGraphView.prototype.validateBackground;
|
||||
mxGraphView.prototype.validateBackground = function()
|
||||
{
|
||||
mxGraphViewValidateBackground.apply(this, arguments);
|
||||
repaintGrid();
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
// 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);
|
||||
}
|
||||
finally
|
||||
{
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
|
||||
graph.centerZoom = false;
|
||||
|
||||
document.body.appendChild(mxUtils.button('+', function()
|
||||
{
|
||||
graph.zoomIn();
|
||||
}));
|
||||
|
||||
document.body.appendChild(mxUtils.button('-', function()
|
||||
{
|
||||
graph.zoomOut();
|
||||
}));
|
||||
}
|
||||
};
|
||||
</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:641px;height:481px;cursor:default;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
export default Grid;
|
||||
|
|
|
|||
|
|
@ -6,11 +6,12 @@
|
|||
*/
|
||||
|
||||
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 mxPopupMenuHandler from "../mxgraph/handler/mxPopupMenuHandler";
|
||||
|
||||
class MYNAMEHERE extends React.Component {
|
||||
class Groups extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -20,59 +21,57 @@ 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',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default MYNAMEHERE;
|
||||
|
||||
|
||||
// Overrides check for valid roots
|
||||
mxGraph.prototype.isValidRoot = function()
|
||||
{
|
||||
mxGraph.prototype.isValidRoot = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
// Don't clear selection if multiple cells selected
|
||||
let graphHandlerMouseDown = mxGraphHandler.prototype.mouseDown;
|
||||
mxGraphHandler.prototype.mouseDown = function(sender, me)
|
||||
{
|
||||
const graphHandlerMouseDown = mxGraphHandler.prototype.mouseDown;
|
||||
mxGraphHandler.prototype.mouseDown = function(sender, me) {
|
||||
graphHandlerMouseDown.apply(this, arguments);
|
||||
|
||||
if (this.graph.isCellSelected(me.getCell()) && this.graph.getSelectionCount() > 1)
|
||||
{
|
||||
if (
|
||||
this.graph.isCellSelected(me.getCell()) &&
|
||||
this.graph.getSelectionCount() > 1
|
||||
) {
|
||||
this.delayedSelection = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Selects descendants before children selection mode
|
||||
let graphHandlerGetInitialCellForEvent = mxGraphHandler.prototype.getInitialCellForEvent;
|
||||
mxGraphHandler.prototype.getInitialCellForEvent = function(me)
|
||||
{
|
||||
let model = this.graph.getModel();
|
||||
let psel = model.getParent(this.graph.getSelectionCell());
|
||||
const graphHandlerGetInitialCellForEvent =
|
||||
mxGraphHandler.prototype.getInitialCellForEvent;
|
||||
mxGraphHandler.prototype.getInitialCellForEvent = function(me) {
|
||||
const model = this.graph.getModel();
|
||||
const psel = model.getParent(this.graph.getSelectionCell());
|
||||
let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
|
||||
let parent = model.getParent(cell);
|
||||
|
||||
if (psel == null || (psel != cell && psel != parent))
|
||||
{
|
||||
while (!this.graph.isCellSelected(cell) && !this.graph.isCellSelected(parent) &&
|
||||
model.isVertex(parent) && !this.graph.isValidRoot(parent))
|
||||
{
|
||||
if (psel == null || (psel != cell && psel != parent)) {
|
||||
while (
|
||||
!this.graph.isCellSelected(cell) &&
|
||||
!this.graph.isCellSelected(parent) &&
|
||||
model.isVertex(parent) &&
|
||||
!this.graph.isValidRoot(parent)
|
||||
) {
|
||||
cell = parent;
|
||||
parent = this.graph.getModel().getParent(cell);
|
||||
}
|
||||
|
|
@ -82,18 +81,20 @@ export default MYNAMEHERE;
|
|||
};
|
||||
|
||||
// Selection is delayed to mouseup if child selected
|
||||
let graphHandlerIsDelayedSelection = mxGraphHandler.prototype.isDelayedSelection;
|
||||
mxGraphHandler.prototype.isDelayedSelection = function(cell)
|
||||
{
|
||||
const graphHandlerIsDelayedSelection =
|
||||
mxGraphHandler.prototype.isDelayedSelection;
|
||||
mxGraphHandler.prototype.isDelayedSelection = function(cell) {
|
||||
let result = graphHandlerIsDelayedSelection.apply(this, arguments);
|
||||
let model = this.graph.getModel();
|
||||
let psel = model.getParent(this.graph.getSelectionCell());
|
||||
let parent = model.getParent(cell);
|
||||
const model = this.graph.getModel();
|
||||
const psel = model.getParent(this.graph.getSelectionCell());
|
||||
const parent = model.getParent(cell);
|
||||
|
||||
if (psel == null || (psel != cell && psel != parent))
|
||||
{
|
||||
if (!this.graph.isCellSelected(cell) && model.isVertex(parent) && !this.graph.isValidRoot(parent))
|
||||
{
|
||||
if (psel == null || (psel != cell && psel != parent)) {
|
||||
if (
|
||||
!this.graph.isCellSelected(cell) &&
|
||||
model.isVertex(parent) &&
|
||||
!this.graph.isValidRoot(parent)
|
||||
) {
|
||||
result = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -102,20 +103,21 @@ export default MYNAMEHERE;
|
|||
};
|
||||
|
||||
// Delayed selection of parent group
|
||||
mxGraphHandler.prototype.selectDelayed = function(me)
|
||||
{
|
||||
mxGraphHandler.prototype.selectDelayed = function(me) {
|
||||
let cell = me.getCell();
|
||||
|
||||
if (cell == null)
|
||||
{
|
||||
if (cell == null) {
|
||||
cell = this.cell;
|
||||
}
|
||||
|
||||
let model = this.graph.getModel();
|
||||
const model = this.graph.getModel();
|
||||
let parent = model.getParent(cell);
|
||||
|
||||
while (this.graph.isCellSelected(cell) && model.isVertex(parent) && !this.graph.isValidRoot(parent))
|
||||
{
|
||||
while (
|
||||
this.graph.isCellSelected(cell) &&
|
||||
model.isVertex(parent) &&
|
||||
!this.graph.isValidRoot(parent)
|
||||
) {
|
||||
cell = parent;
|
||||
parent = model.getParent(cell);
|
||||
}
|
||||
|
|
@ -124,16 +126,13 @@ export default MYNAMEHERE;
|
|||
};
|
||||
|
||||
// Returns last selected ancestor
|
||||
mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me)
|
||||
{
|
||||
mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me) {
|
||||
let cell = me.getCell();
|
||||
let model = this.graph.getModel();
|
||||
const model = this.graph.getModel();
|
||||
let parent = model.getParent(cell);
|
||||
|
||||
while (model.isVertex(parent) && !this.graph.isValidRoot(parent))
|
||||
{
|
||||
if (this.graph.isCellSelected(parent))
|
||||
{
|
||||
while (model.isVertex(parent) && !this.graph.isValidRoot(parent)) {
|
||||
if (this.graph.isCellSelected(parent)) {
|
||||
cell = parent;
|
||||
}
|
||||
|
||||
|
|
@ -143,59 +142,33 @@ export default MYNAMEHERE;
|
|||
return cell;
|
||||
};
|
||||
|
||||
// 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.constrainChildren = false;
|
||||
graph.extendParents = false;
|
||||
graph.extendParentsOnAdd = false;
|
||||
// Creates the graph inside the given container
|
||||
const graph = new mxGraph(this.el);
|
||||
graph.constrainChildren = false;
|
||||
graph.extendParents = false;
|
||||
graph.extendParentsOnAdd = false;
|
||||
|
||||
// Uncomment the following if you want the container
|
||||
// to fit the size of the graph
|
||||
//graph.setResizeContainer(true);
|
||||
// Uncomment the following if you want the container
|
||||
// to fit the size of the graph
|
||||
// graph.setResizeContainer(true);
|
||||
|
||||
// Enables rubberband selection
|
||||
new mxRubberband(graph);
|
||||
// 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();
|
||||
// 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
|
||||
{
|
||||
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 120, 60);
|
||||
var v2 = graph.insertVertex(v1, null, 'World!', 90, 20, 60, 20);
|
||||
}
|
||||
finally
|
||||
{
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
// Adds cells to the model in a single step
|
||||
graph.getModel().beginUpdate();
|
||||
try {
|
||||
const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 120, 60);
|
||||
const v2 = graph.insertVertex(v1, null, 'World!', 90, 20, 60, 20);
|
||||
} finally {
|
||||
// Updates the display
|
||||
graph.getModel().endUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<!-- 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 Groups;
|
||||
|
|
|
|||
|
|
@ -59,6 +59,8 @@ import HierarchicalLayout from "./HierarchicalLayout";
|
|||
import HelloPort from "./HelloPort";
|
||||
import Handles from "./Handles";
|
||||
import Guides from "./Guides";
|
||||
import Groups from "./Groups";
|
||||
import Grid from "./Grid";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
|
|
@ -87,6 +89,8 @@ export default function Home() {
|
|||
<EdgeTolerance />
|
||||
<Editing />
|
||||
|
||||
<Grid />
|
||||
<Groups />
|
||||
<Guides />
|
||||
<Handles />
|
||||
<HelloPort />
|
||||
|
|
|
|||
Loading…
Reference in New Issue