zcy
/
maxGraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

moved example descriptions into example controls

development
mcyph 2021-03-25 17:12:58 +11:00
parent c2635745ef
commit ce15731a1b
1 changed files with 87 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
src/pages/Control.js
View File

@ -22,9 +22,7 @@ class Control extends React.Component {
return ( return (
<> <>
<h1>Control</h1> <h1>Control</h1>
This example demonstrates adding This example demonstrates adding controls to specific cells in a graph.
controls to specific cells in a graph.
<div <div
ref={el => { ref={el => {
this.el = el; this.el = el;
@ -46,10 +44,6 @@ class Control extends React.Component {
}; };
componentDidMount = () => { componentDidMount = () => {
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
graph.setPanning(true);
// Specifies the URL and size of the new control // Specifies the URL and size of the new control
const deleteImage = new mxImage( const deleteImage = new mxImage(
'editors/images/overlays/forbidden.png', 'editors/images/overlays/forbidden.png',
@ -57,94 +51,101 @@ class Control extends React.Component {
16 16
); );
// Overridden to add an additional control to the state at creation time class MyCustomCellRenderer extends mxCellRenderer {
const mxCellRendererCreateControl = mxCellRenderer.prototype.createControl; createControl(state) {
mxCellRenderer.prototype.createControl = function(state) { super.createControl(state);
mxCellRendererCreateControl.apply(this, arguments);
const { graph } = state.view; const { graph } = state.view;
if (graph.getModel().isVertex(state.cell)) { if (graph.getModel().isVertex(state.cell)) {
if (state.deleteControl == null) { if (state.deleteControl == null) {
const b = new mxRectangle( const b = new mxRectangle(
0, 0,
0, 0,
deleteImage.width, deleteImage.width,
deleteImage.height deleteImage.height
);
state.deleteControl = new mxImageShape(b, deleteImage.src);
state.deleteControl.dialect = graph.dialect;
state.deleteControl.preserveImageAspect = false;
this.initControl(state, state.deleteControl, false, function(evt) {
if (graph.isEnabled()) {
graph.removeCells([state.cell]);
mxEvent.consume(evt);
}
});
}
} else if (state.deleteControl != null) {
state.deleteControl.destroy();
state.deleteControl = null;
}
};
// Helper function to compute the bounds of the control
const getDeleteControlBounds = function(state) {
if (state.deleteControl != null) {
const oldScale = state.deleteControl.scale;
const w = state.deleteControl.bounds.width / oldScale;
const h = state.deleteControl.bounds.height / oldScale;
const s = state.view.scale;
return state.view.graph.getModel().isEdge(state.cell)
? new mxRectangle(
state.x + state.width / 2 - (w / 2) * s,
state.y + state.height / 2 - (h / 2) * s,
w * s,
h * s
)
: new mxRectangle(
state.x + state.width - w * s,
state.y,
w * s,
h * s
); );
} state.deleteControl = new mxImageShape(b, deleteImage.src);
state.deleteControl.dialect = graph.dialect;
state.deleteControl.preserveImageAspect = false;
return null; this.initControl(state, state.deleteControl, false, function(evt) {
}; if (graph.isEnabled()) {
graph.removeCells([state.cell]);
// Overridden to update the scale and bounds of the control mxEvent.consume(evt);
const mxCellRendererRedrawControl = mxCellRenderer.prototype.redrawControl; }
mxCellRenderer.prototype.redrawControl = function(state) { });
mxCellRendererRedrawControl.apply(this, arguments); }
} else if (state.deleteControl != null) {
if (state.deleteControl != null) { state.deleteControl.destroy();
const bounds = getDeleteControlBounds(state); state.deleteControl = null;
const s = state.view.scale;
if (
state.deleteControl.scale !== s ||
!state.deleteControl.bounds.equals(bounds)
) {
state.deleteControl.bounds = bounds;
state.deleteControl.scale = s;
state.deleteControl.redraw();
} }
} }
};
// Overridden to remove the control if the state is destroyed getDeleteControlBounds(state) {
const mxCellRendererDestroy = mxCellRenderer.prototype.destroy; // Helper function to compute the bounds of the control
mxCellRenderer.prototype.destroy = function(state) { if (state.deleteControl != null) {
mxCellRendererDestroy.apply(this, arguments); const oldScale = state.deleteControl.scale;
const w = state.deleteControl.bounds.width / oldScale;
const h = state.deleteControl.bounds.height / oldScale;
const s = state.view.scale;
if (state.deleteControl != null) { return state.view.graph.getModel().isEdge(state.cell)
state.deleteControl.destroy(); ? new mxRectangle(
state.deleteControl = null; state.x + state.width / 2 - (w / 2) * s,
state.y + state.height / 2 - (h / 2) * s,
w * s,
h * s
)
: new mxRectangle(
state.x + state.width - w * s,
state.y,
w * s,
h * s
);
}
return null;
} }
};
redrawControl(state) {
// Overridden to update the scale and bounds of the control
super.redrawControl(state);
if (state.deleteControl != null) {
const bounds = this.getDeleteControlBounds(state);
const s = state.view.scale;
if (
state.deleteControl.scale !== s ||
!state.deleteControl.bounds.equals(bounds)
) {
state.deleteControl.bounds = bounds;
state.deleteControl.scale = s;
state.deleteControl.redraw();
}
}
}
destroy(state) {
// Overridden to remove the control if the state is destroyed
super.destroy(state);
if (state.deleteControl != null) {
state.deleteControl.destroy();
state.deleteControl = null;
}
}
}
class MyCustomGraph extends mxGraph {
createCellRenderer() {
return new MyCustomCellRenderer();
}
}
// Creates the graph inside the given container
const graph = new MyCustomGraph(this.el);
graph.setPanning(true);
// Uncomment the following if you want the container // Uncomment the following if you want the container
// to fit the size of the graph // to fit the size of the graph