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

reduced various prototype sharing issues

development
mcyph 2021-04-10 14:04:32 +10:00
parent 685fe13682
commit 6205852cac
4 changed files with 160 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/mxgraph/shape/mxShape.ts
View File

@ -71,7 +71,7 @@ const toBool = (i: any): boolean => {
*/
class mxShape {
constructor(stencil: mxStencil | null=null) {
if (stencil !== mxConstants.DO_NOTHING) {
if (stencil) {
this.stencil = stencil;
}
}

14
src/mxgraph/view/graph/mxGraph.ts
View File

@ -3660,6 +3660,8 @@ class mxGraph extends mxEventSource {
* style - Optional string that defines the cell style.
* relative - Optional boolean that specifies if the geometry is relative.
* Default is false.
* geometryClass - Optional class reference to a class derived from mxGeometry.
* This can be useful for defining custom constraints.
*/
insertVertex = (...args: any[]): mxCell => {
let parent;
@ -3671,6 +3673,7 @@ class mxGraph extends mxEventSource {
let height;
let style;
let relative;
let geometryClass;
if (args.length === 1) {
// If only a single parameter, treat as an object
@ -3687,10 +3690,11 @@ class mxGraph extends mxEventSource {
style = params.style;
relative = params.relative;
geometryClass = params.geometryClass;
} else {
// Otherwise treat as arguments
[parent, id, value, x, y, width, height, style, relative] = args;
[parent, id, value, x, y, width, height, style, relative, geometryClass] = args;
}
const vertex = this.createVertex(
@ -3702,7 +3706,8 @@ class mxGraph extends mxEventSource {
width,
height,
style,
relative
relative,
geometryClass
);
return this.addCell(vertex, parent);
};
@ -3720,10 +3725,11 @@ class mxGraph extends mxEventSource {
width: number,
height: number,
style: any,
relative: boolean=false) {
relative: boolean=false,
geometryClass: typeof mxGeometry=mxGeometry) {
// Creates the geometry for the vertex
const geometry = new mxGeometry(x, y, width, height);
const geometry = new geometryClass(x, y, width, height);
geometry.relative = relative != null ? relative : false;
// Creates the vertex

2
src/pages/connections/Anchors.js
View File

@ -100,7 +100,7 @@ class Anchors extends React.Component {
// Edges have no connection points
mxPolyline.prototype.constraints = null;
// Creates the graph inside the given this.el
// Creates the graph inside the given container
const graph = new MyCustomGraph(this.el);
graph.setConnectable(true);

195
src/pages/connections/FixedPoints.js
View File

@ -43,24 +43,30 @@ class FixedPoints extends React.Component {
}
componentDidMount() {
class MyCustomConstraintHandler extends mxConstraintHandler {
// Snaps to fixed points
mxConstraintHandler.prototype.intersects = function(
icon,
point,
source,
existingEdge
) {
return !source || existingEdge || mxUtils.intersects(icon.bounds, point);
};
intersects(icon, point, source, existingEdge) {
return (
!source || existingEdge || mxUtils.intersects(icon.bounds, point)
);
}
}
// Special case: Snaps source of new connections to fixed points
// Without a connect preview in connectionHandler.createEdgeState mouseMove
// and getSourcePerimeterPoint should be overriden by setting sourceConstraint
// sourceConstraint to null in mouseMove and updating it and returning the
// nearest point (cp) in getSourcePerimeterPoint (see below)
const mxConnectionHandlerUpdateEdgeState =
mxConnectionHandler.prototype.updateEdgeState;
mxConnectionHandler.prototype.updateEdgeState = function(pt, constraint) {
class MyCustomConnectionHandler extends mxConnectionHandler {
// connectImage = new mxImage('images/connector.gif', 16, 16);
isConnectableCell(cell) {
return false;
}
/*
* Special case: Snaps source of new connections to fixed points
* Without a connect preview in connectionHandler.createEdgeState mouseMove
* and getSourcePerimeterPoint should be overriden by setting sourceConstraint
* sourceConstraint to null in mouseMove and updating it and returning the
* nearest point (cp) in getSourcePerimeterPoint (see below)
*/
updateEdgeState(pt, constraint) {
if (pt != null && this.previous != null) {
const constraints = this.graph.getAllConnectionConstraints(
this.previous
@ -95,46 +101,12 @@ class FixedPoints extends React.Component {
// update the cell style as follows:
// this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style['edgeStyle']);
}
mxConnectionHandlerUpdateEdgeState.apply(this, arguments);
};
// Creates the graph inside the given container
const graph = new mxGraph(this.el);
graph.setConnectable(true);
// graph.connectionHandler.connectImage = new mxImage('images/connector.gif', 16, 16);
// Disables floating connections (only use with no connect image)
if (graph.connectionHandler.connectImage == null) {
graph.connectionHandler.isConnectableCell = function(cell) {
return false;
};
mxEdgeHandler.prototype.isConnectableCell = function(cell) {
return graph.connectionHandler.isConnectableCell(cell);
};
return super.updateEdgeState(pt, constraint);
}
graph.getAllConnectionConstraints = function(terminal) {
if (terminal != null && this.model.isVertex(terminal.cell)) {
return [
new mxConnectionConstraint(new mxPoint(0, 0), true),
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
new mxConnectionConstraint(new mxPoint(1, 0), true),
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
new mxConnectionConstraint(new mxPoint(0, 1), true),
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
new mxConnectionConstraint(new mxPoint(1, 1), true),
];
}
return null;
};
createEdgeState(me) {
// Connect preview
graph.connectionHandler.createEdgeState = function(me) {
const edge = graph.createEdge(
const edge = this.graph.createEdge(
null,
null,
null,
@ -148,7 +120,49 @@ class FixedPoints extends React.Component {
edge,
this.graph.getCellStyle(edge)
);
};
}
}
class MyCustomEdgeHandler extends mxEdgeHandler {
// Disables floating connections (only use with no connect image)
isConnectableCell(cell) {
return graph.connectionHandler.isConnectableCell(cell);
}
}
class MyCustomGraph extends mxGraph {
createConnectionHandler() {
const r = new MyCustomConnectionHandler();
r.constraintHandler = new MyCustomConstraintHandler(this);
return r;
}
createEdgeHandler(state, edgeStyle) {
const r = new MyCustomEdgeHandler(state, edgeStyle);
r.constraintHandler = new MyCustomConstraintHandler(this);
return r;
}
getAllConnectionConstraints(terminal) {
if (terminal != null && this.model.isVertex(terminal.cell)) {
return [
new mxConnectionConstraint(new mxPoint(0, 0), true),
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
new mxConnectionConstraint(new mxPoint(1, 0), true),
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
new mxConnectionConstraint(new mxPoint(0, 1), true),
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
new mxConnectionConstraint(new mxPoint(1, 1), true),
];
}
return null;
}
}
// Creates the graph inside the given container
const graph = new MyCustomGraph(this.el);
graph.setConnectable(true);
// Enables rubberband selection
new mxRubberband(graph);
@ -158,51 +172,46 @@ class FixedPoints extends React.Component {
const parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(
graph.batchUpdate(() => {
const v1 = graph.insertVertex({
parent,
null,
'Hello,',
20,
20,
80,
60,
'shape=triangle;perimeter=trianglePerimeter'
);
const v2 = graph.insertVertex(
value: 'Hello,',
position: [20, 20],
size: [80, 60],
style: 'shape=triangle;perimeter=trianglePerimeter',
});
const v2 = graph.insertVertex({
parent,
null,
'World!',
200,
150,
80,
60,
'shape=ellipse;perimeter=ellipsePerimeter'
);
const v3 = graph.insertVertex(parent, null, 'Hello,', 200, 20, 80, 30);
const e1 = graph.insertEdge(
value: 'World!',
position: [200, 150],
size: [80, 60],
style: 'shape=ellipse;perimeter=ellipsePerimeter',
});
const v3 = graph.insertVertex({
parent,
null,
'',
v1,
v2,
value: 'Hello,',
position: [200, 20],
size: [80, 30],
});
const e1 = graph.insertEdge({
parent,
value: '',
source: v1,
target: v2,
style:
'edgeStyle=elbowEdgeStyle;elbow=horizontal;' +
'exitX=0.5;exitY=1;exitPerimeter=1;entryX=0;entryY=0;entryPerimeter=1;'
);
const e2 = graph.insertEdge(
'exitX=0.5;exitY=1;exitPerimeter=1;entryX=0;entryY=0;entryPerimeter=1;',
});
const e2 = graph.insertEdge({
parent,
null,
'',
v3,
v2,
value: '',
source: v3,
target: v2,
style:
'edgeStyle=elbowEdgeStyle;elbow=horizontal;orthogonal=0;' +
'entryX=0;entryY=0;entryPerimeter=1;'
);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
'entryX=0;entryY=0;entryPerimeter=1;',
});
});
// Use this code to snap the source point for new connections without a connect preview,
// ie. without an overridden graph.connectionHandler.createEdgeState