jgraph / mxgraph Goto Github PK

Hello

I read the mxGraph User manual and I found something useful:

This image shows the result of a function that determines and shows all the possible routes between two cells and also shows another function that returns the shortest path between those cells.

I already found the ShortestPath Function, but I am still looking for the function that allows me to get all possible routes between two cells, despite checking out the analysis package of mxGraph, I haven´t been able to identify this function; so I ask: Does this function exist?

If the function exists, it would be good to know its name and how to find it in mxGraph API.

Thank you.

Apparently, any scroll in a page causes an offset for mouse events in the graph, making nearly impossible to use (in particular, creating new connections) when scrolled down the page. I was able to reproduce this behaviour in the example Helloport when making the browser window small enough to allow scrolling:

Offset in mouse events problem when page is scrolled

Working correctly when scroll is at the top of the page

I found this problem in Google Chrome and Firefox.

Moving and resizing components seems to be working fine.

Currently we can specify gradient for every elements. But we can only set the background color or background image for the main surface.

It would be nice if the user could specify gradient for the main diagram.

Radial Gradients are also very useful

Thank you

Is it possible to create circular text? Like Starbucks logo for example?

The LICENSE file (no extension) is an Apache license. The license.txt file is a proprietary EULA. This seems like an error. The readme only mentions the Apache license. Is this project dual-licensed? Or just Apache? Or what?

Idea:
Keep prototypes of original MX classes unchanged. All customization/overrides should be done inside inheritors. That way we guarantee no conflicts if there are multiple consumers of the library at single page (each of consumers may have its’ own customization).
note: that is actually the way we try to follow on our MX based project.

Problem:
MX components are tied to much to each other.
Example:
Imagine I want to use custom constraint handler. Following “idea” I will create MyConstraintHandler class that inherits to mxConstraintHandler and encapsulate custom logic inside my class. Now I have to integrate it with graph. I have to find & override all places where connection handler is created:

mxConnectionHandler.prototype.init = function()
{
    this.graph.addMouseListener(this);
    this.marker = this.createMarker();
    this.constraintHandler = new mxConstraintHandler(this.graph);
    // ...
}
mxEdgeHandler.prototype.init = function()
{
    this.graph = this.state.view.graph;
    this.marker = this.createMarker();
    this.constraintHandler = new mxConstraintHandler(this.graph);
    // ...
}

Now to use my custom connection handler class I have to create inheritors of mxConnectionHandler, mxEdgeHandler classes. After that I have to repeat find & override procedure for two more classes. Number of overrides is growing like a snowball.
Question:
Don’t you plan to introduce IoC container that will solve this problem and makes library easier customizable?

Hi,

Not sure if I'm missing something but in the documentation for validateGraph method in mxgraph/javascript/src/js/view/mxGraph.js, it says:

This function returns true if no validation errors exist in the graph.

If you look at the return statement for the method (line 8445) it is defined as:

return (warning.length > 0 || !isValid) ? warning : null;

which means that the method returns either a null in case of successful validation or warning array in case of failed validations. Or am I missing something?

Seting up fixed connection point on graph that has been not initiliazed with dom container throws an exception:

//yaliashkevich: create graph instance without container (that is optional accrording to documentation)
var graph = new mxGraph();
graph.setConnectable(true);

graph.getAllConnectionConstraints = function (terminal) {
    if (terminal != null && this.model.isVertex(terminal.cell)) {
        return [
            new mxConnectionConstraint(new mxPoint(0, 0.5), true),
            new mxConnectionConstraint(new mxPoint(1, 0.5), true)];
    }

    return null;
};

var parent = graph.getDefaultParent();

graph.getModel().beginUpdate();
try {
    var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 50, 50,
        'shape=ellipse;perimeter=ellipsePerimeter');
    var v2 = graph.insertVertex(parent, null, 'World!', 200, 20, 50, 50,
        'shape=ellipse;perimeter=ellipsePerimeter');
    var e1 = graph.insertEdge(parent, null, '', v1, v2,
        'exitX=1;exitY=0.5;exitPerimeter=1;entryX=0;entryY=0.5;entryPerimeter=1;');
}
finally {
    graph.getModel().endUpdate();
}

graph.init(container);

Uncaught TypeError: Cannot read property 'stencil' of null mxGraph.js:5869
mxGraph.getConnectionPoint mxGraph.js:5869
mxGraphView.updateFixedTerminalPoint mxGraphView.js:1079
mxGraphView.updateFixedTerminalPoints mxGraphView.js:1055
mxGraphView.validatePoints mxGraphView.js:924
mxGraphView.validatePoints mxGraphView.js:990
mxGraphView.validatePoints mxGraphView.js:990
mxGraphView.validate mxGraphView.js:545
mxGraph.graphModelChanged mxGraph.js:1830
(anonymous function) mxGraph.js:668
(anonymous function) mxUtils.js:177
mxEventSource.fireEvent mxEventSource.js:187
edit.notify mxGraphModel.js:1975
mxGraphModel.endUpdate mxGraphModel.js:1950
main

But accrording to the documentation:

container Optional DOM node that acts as a container for the graph. If this is null then the container can be initialized later using init.

#413849085
Application: diagram.ly, mxGraph JS 1.10.0.5

Currently, the only way to rotate an element by an arbitrary angle is to use "Arrange" -> "Rotate" menu item. This rotates element by 90 degrees. We would like to be able to rotate an element by an arbitrary angle, both by using a menu item (and some kind of dialog) and by using the same sort of control that Microsoft Ofiice applications use to rotate shapes.

See green handle on the top of the shape (screenshot from Microsoft Word):

validation.zip

Example changed like this:

  		// Source nodes needs 2 connected Targets
  		graph.multiplicities.push(new mxMultiplicity(
  		   true, 'Source', null, null, 2, 2, ['Target'],
  		   'Source Must Have 2 Targets',
  		   'Source Must Connect to Target'));

There is not error info when Source has 1 edge to Target.

Resolution, I think it should be like this in mxGraph.js:

mxGraph.prototype.getCellValidationError = function(cell)
{
	var outCount = this.model.getDirectedEdgeCount(cell, true);
	var inCount = this.model.getDirectedEdgeCount(cell, false);
	var value = this.model.getValue(cell);
	var error = '';

	if (this.multiplicities != null)
	{
		for (var i = 0; i < this.multiplicities.length; i++)
		{
			var rule = this.multiplicities[i];
			
			if (rule.source && mxUtils.isNode(value, rule.type,
				rule.attr, rule.value) && (outCount > rule.max || outCount < rule.min))
			{
				error += rule.countError + '\n';
			}
			else if (!rule.source && mxUtils.isNode(value, rule.type,
					rule.attr, rule.value) && (inCount > rule.max || inCount < rule.min))
			{
				error += rule.countError + '\n';
			}
		}
	}
	
	return (error.length > 0) ? error : null;
};

Class mxEvent contains duplicate property CLICK, disallowed in ES5 strict mode

Is is possible to apply CSS or SVG Blend modes like multiply for example?

https://css-tricks.com/basics-css-blend-modes/

#413849085

We'd like to validate mxGraph XML on the server side, and to extend it with our own XML namespace.

The result XML should remain the same for end users, apart from "xmlns" attribute on root node (e.g. no fully qualified namespaces for elements and attributes, just one target namespace).

The schema should be designed to allow extensibility.

Also, if it is possible, we would like to review proposed XSD before release.

Is it possible to use millimeters or a different unit within the svg? I've only seen pixel atm

If generating a half circle like this:
moveTo 0,0
line to 0,-1
arcTo 0,1
close

Only a vertical line from 0,-1 to 0,1 is created and no arc.

when call new mxWindow() this method, but always display a table in portlet. there should be a popup window to display in Liferay portlet. how to solve this issue.

Is it possible to prevent the cells expand[overcome] the container limits? I.e. When I move any cell, I'd like it does not create a scroll bar.

I have a Node.js application that I am working on which will have some interactive diagramming. I have used draw.io in the past, so I like the idea of embedding mxgraph. However, I'd rather it be a standard node or bower dependency rather than something I manually download and commit to the repo.

You are using SVG element for drawing the chart but don't have client side direct SVG export!

Obtaining svg data directly from javascript would be nice and useful feature

Thanks

We are using mxgraph to build chart

Here is the scenario for embed cell:
one parent cell contains multiple cells. And there is no edge connect to the parent cell. But there are do some edge connect to the embed cells.
e.g Node 1--->2 1---->3 3----->4 then a parent Node cell 5 contains 2 and 3

It looks the hierarchy layout doesn't support this scenario when autolayout. The result is: it just leave the parent cell alone because there is no edge between parent cell with other cells

is it a bug? or is there any other layout which support this scenario?

Is it possible to have more than 1 changeable color per shape, like bellow?

https://gyazo.com/cfa2f32ffb36ff0eba67d89b90faae21

Where can I find an XML manual?

When I draw the graph which have much vertexes and edges, the zoomin and zoomout method is very slowly.Anyone konws how to solve this problem?

click "show XML(custom)",
an error:Cannot find action myFirstAction,

uiconfig.xml file include

    <Array as="actions">
        <add as="myFirstAction"><![CDATA[
            function (editor, cell)
            {
                var encoder = new mxCodec();
                var node = encoder.encode(editor.graph.getModel());
                mxUtils.popup(mxUtils.getPrettyXml(node), true);
            }
        ]]></add>
    </Array>

but don't work

I use latest mxGraph version (3.7.0.0) with Webpack2

when trying to create editor

const mx = require('imports?mxBasePath=>"PATH/mxGraph"!mxgraph-js');
...
const node = mx.mxUtils.load(config).getDocumentElement();
const editor = new mx.mxEditor(node);

nothing happens - no graph displayed and no errors in console.

After spending some time founded a problem in function

mxCodec.prototype.decode = function (node, into) {
..
        try {
            ctor = window[node.nodeName];
        }
..
};

mxGraph rely on global scope, but this does not working with modules.
Used workaround for this

window['mxEditor'] = mx.mxEditor;
window['mxGeometry'] = mx.mxGeometry;
window['mxDefaultKeyHandler'] = mx.mxDefaultKeyHandler;
window['mxDefaultPopupMenu'] = mx.mxDefaultPopupMenu;
window['mxGraph'] = mx.mxGraph;
window['mxStylesheet'] = mx.mxStylesheet;
window['mxDefaultToolbar'] = mx.mxDefaultToolbar;
window['mxGraphModel'] = mx.mxGraphModel;

const node = mx.mxUtils.load(config).getDocumentElement();
const editor = new mx.mxEditor(node);

but I think it should be fixed in library as well

Any plans to support React? Ever? From what I read there seems to be a philosophical bent to not support a specific framework. Just wanted to gain clarity.

I can't open saved .xml anymore, be it older ones or newer ones created since the new version.

mxShape.prototype.getSvgScreenOffset = function()
{
    return (mxUtils.mod(Math.max(1, Math.round(this.strokewidth * this.scale)), 2) == 1) ? 0.5 : 0;
};

Assume that this.stencil.strokewidth should be taken in account if shape has stencil defined:

    mxShape.prototype.getSvgScreenOffset = function () {
        var strokewidth = this.stencil && this.stencil.strokewidth != 'inherit' ? Number(this.stencil.strokewidth) : this.strokewidth;
        var offset = strokewidth ? ((mxUtils.mod(Math.max(1, Math.round(strokewidth * this.scale)), 2) == 1) ? 0.5 : 0) : 0;

        return offset;
    };

Is there any event that is fired, after a cell is rotated?

#413849085
Application: diagram.ly, mxGraph JS 1.10.0.5

Currently, control points of Edge object are snapped only to Vertex object ports. We'd like to add snapping of Edge points to another Edge control points, as well displaying guides for Vertex objects when Edge control point is moving. Displaying of guides for another Edge's control points when Edge control point is moving is not important (for our case).

The main case behind this feature is to provide basic vector editing capabilities to mxGraph.

graph.addListener(mxEvent.CLICK, function(sender, evt) {
	var cell = evt.getProperty('cell');
	alert(cell);
});

The upper statement will alert "object" on Chrome Desktop but "undefined" on my android phone.

I have found a issue related to a grouping. It is quite easy to reproduce:

1. Create vertex.
2. Group it.
3. Drag vertex out of grouping container.

From now on, if I try to drag any vertex to that grouping container it wont be attached as child.

I expect that it would work like in case when I skip dragout vertex and put another one to that container.
Then both vertexes are in one group.

After some debuging time i found that problem lays in:
mxGraph.prototype.isValidDropTarget to be precise in this.model.getChildCount(cell) > 0

So it seems like adding cell to other cell is not allowed because it don't have any children.

Given the recently added "curve" connector style I suggest a "circular" style parameterized by a single control point.

Given this control point and the two end points for the edge, the edge should be drawn along the circumference of the circle defined by these three points.

This would generate an aesthetically pleasing, and easy to control, edge shape.

Hi,
The LICENSE file indicate that the project is under Apache 2 license but the JS user manual (https://github.com/jgraph/mxgraph/blob/master/docs/manual.html#L132) refers to a commercial license http://www.jgraph.com/mxlicense.html

Looking at the commit history I can guess that this is an old doc that haven't been updated yet, but can you confirm that the current license is Apache 2?

Is it an api or tool we convert a svg diagram(with mutiple circles, lines... etc) to mxgraph diagram?

Hi in the samples there supposed to be a .sln file to bind all the projects in the visual studio project, but its missing.

In the help it shows here but missing here

var original = mxKeyHandler.prototype.keyDown;
mxKeyHandler.prototype.keyDown = function () {
    alert('internal handler callback');
    original.apply(this, arguments);
};

var graph = new mxGraph(container);
var handler = new mxKeyHandler(graph);
handler.bindKey('65', function () { alert('I am active'); });
handler.destroy();

Assume that mxKeyHandler.prototype.keyDown handler should be removed on destroy:

mxKeyHandler.prototype.destroy = function()
{
    mxEvent.removeListener(this.target, 'keydown' ... )
}

That's not critical but if you create and destroy key handlers dynamically during page life cycle a lot of junk handlers occupy browser resources.

Chrome 55.0.2846.4 canary is giving me the following message:

Navigator.pointerEnabled is a non-standard API added for experiments only. It will be removed in near future.

This appears to be coming from https://github.com/jgraph/mxgraph/blob/master/javascript/src/js/mxClient.js#L230

I'm not sure how or if the removal of this affects the functionality of mxGraph, or when the removal is actually slated, but hopefully this gives you a heads-up on a potential problem in the near future.

I edited the label of a vertex in your example 'validation.html' and inserted the following string sequence:

Row1
Row2

Row3

After editing the blank line between 'Row2' and 'Row3' is removed in IE Edge - in IE 11, Chrome and Firefox it works fine.
If i edit the label again and add that blank line again it works also in IE Edge.

Investigations showed that for the very first editing the blank line will be represented by an empty DIV, but mxUtils.extractTextWithWhitespace does not handle that case.

I am trying to migrate over from JsPlumb (the old version) to MxGraph. It was was fairly easy to persist and send POST to the server side in ASP MVC and JsPlumb (.NET 4.5 Razor pages).

Your framework looks really nice, and I would like to be able to do the same in ASP MVC, its a simple MVC framework, after looking at the help files here there was not much in the form of help or even a sample application.

Can you share a sample solution to try it out, or get started please

Is there any possibility to add curve instead of plain line?

According to the docs the font size is in points (pt). But in my resulting svg within the browser the font size is declared as pixel (px)?

STYLE_FONTSIZE: Defines the key for the fontSize style (in points).

This is regarding the diagrameditor located in here.
Keyboard shortcuts such as delete and undo is supported for this editor. You can select a cell and hit del key to delete and ctrl + z also do work. But if you view the source and come back again, those keys won't function. You can restore the functionalities by dropping a new cell from the pallet. Otherwise non of the keys work. Can we do something about this?

#413849085
Application: diagram.ly, mxGraph JS 1.10.0.5

All DOM elements created by the library should be children of an element provided by API user. Small modifications in mxPopupMenu, mxGraph, mxPanningElementHandler are required.

when we use OrthConnector to connect two cells , sometimes we find the edge will pass through other cells. could it be smarter to recognise and avoid obstacles?

#413849085
Application: diagram.ly, mxGraph JS 1.10.0.5

In current implementation, the only option to change shape of Edge objects is to adjust its control points position. It is desireable to have the same transformation mode, as used for Vertex objects (scaling, resizing, rotation). This of course should be optional, and enabled by user's request.

Image to illustrate:

#413849085
Application: diagram.ly, mxGraph JS 1.10.0.5

In order to be able to use mxGraph as basic vector editing software, implementation of essential geometry operations and functions is needed:

• Merging of Edge objects having spatially touched start/end points, that creates new Edge object;
• Splitting of Edge geometries at arbitrary point, that creates two new Edge objects;
• Conversion of arbitrary Edge geometry to Vertex geometry, that turns Edge linestrings into polygon.

Hello,

I am currently facing with some performance issues in my application and I was wondering if there are any advises from you guys how to avoid them.

I was thinking that data virtualization might be solution for my problems and my question is, what would be the proper way to implement such thing in mxgraph ?

Thanks in advance.

Hello,

I am currently working on application for making network topology, similar to Packet Tracer tool. User can drag and drop items onto graph, make connections, configure devices.

In my application I have switches with different number of ports. Idea that I have is to display switches like regular polygons depending on the number of ports with image of switch in center of it. I have switches with 6, 8 and 24 ports (for 6 port switch shape would be hexagon, for 8 octagon etc)

I created my custom shape, extended mxActor and redefined redrawPath method so it creates desired polygon and draws image in center of polygon depending on the parameter for ports. On each intersection of polygon sides I have port of the switch like on image below.

Each port of the switch is vertice where parent cell is my custom shape vertice.

Problems that I am facing is when I add more than 60 24-port switches my application is lagging.
I am aware that for every 24-port switch I have 25 vertices.

I checked my calculations for drawing polygon, they are not the issue, they are only made once when main switch cell node is created, later positions of child port vertices are used to redraw shape in redrawPath method of my custom shape.

My application also has outline for graph view (little rectangle in the corner that displays whole view).

Am I reaching limitations of the library in my application ? Do you have any advice how to improve performance (ex. use anchors instead of vertices for ports ) ?

I was wondering if virtualization would be the solution for this. By virtualization I mean displaying
only current visible part of graph view to user. If so, is there a proper way of implementing this using mxGraph.

Thanks