Giter VIP home page Giter VIP logo

mxgraph's Introduction

NOTE 09.11.2020 : Development on mxGraph has now stopped, this repo is effectively end of life.

Known forks:

https://github.com/jsGraph/mxgraph

https://github.com/process-analytics/mxgraph

mxGraph

mxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.

The PHP model was deprecated after release 4.0.3 and the archive can be found here.

The unmaintained npm build is here

We don't support Typescript, but there is a project to implement this, with this repo currently used as the lead repo.

The mxGraph library uses no third-party software, it requires no plugins and can be integrated in virtually any framework (it's vanilla JS).

Getting Started

In the root folder there is an index.html file that contains links to all resources. You can view the documentation online on the Github pages branch. The key resources are the JavaScript user manual, the JavaScript examples and the JavaScript API specificiation.

Support

There is a mxgraph tag on Stack Overflow. Please ensure your questions adhere to the SO guidelines, otherwise it is likely to be closed.

If you are looking for active support, your better route is one of the commercial diagramming tools, like yFiles or GoJS.

History

We created mxGraph in 2005 as a commercial project and it ran through to 2016 that way. Our USP was the support for non-SVG browsers, when that advantage expired we moved onto commercial activity around draw.io. mxGraph is pretty much feature complete, production tested in many large enterprises and stable for many years.

Over time you can expect this codebase will break features against new browser releases, it's not advised to start new projects against this codebase for that reason.

mxgraph's People

Contributors

alderg avatar andrea11 avatar bitdeli-chef avatar brendonboshell avatar chomtana avatar davedwards avatar davidjgraph avatar feiqitian avatar ilexwg avatar internetscooter avatar lgleim avatar marclaporte avatar mehyaa avatar mosinnik avatar msamanzhol42 avatar niccoconnor avatar pslocom avatar quoque avatar rojerluo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mxgraph's Issues

validation

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;
};

Performance Issues: Data Virtualization

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.

Background gradient feature for the main surface

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

Improvement: include XSD schema for mxGraph XML

#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.

EULA and Apache License?

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?

ASP MVC 4.5.2 Sample please

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

Circular text

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

mxShape.getSvgScreenOffset uses wrong strokewidth in case of stencil shape

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;
    };

React?

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.

mxGraph analysis function is missing

Hello

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

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.

Blank lines are removed in IE Edge after the very first editing of the label of a vertex

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.

Obtaining SVG Data directly from client

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

Feature request: Box "resize/scale/rotate" transformation mode for Edges

#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:
Different edge transformation modes

Keyboard support disabling

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?

Bug: mxUtils.arcToCurves

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.

OrthConnector is not smart

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?

Feature request: DOM isolation

#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.

fixed connection point requires preinitialized graph instance

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.

Feature request: Basic geometry operations for Edges

#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.

Too strong coherence between system components

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?

Documentation Issue: mxGraph.validateGraph

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?

[Request] Publish to npm/bower registries

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.

Grouping container don't allow to drop vertexes.

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.

Editor doesn't created when mxGraph is used as npm module

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

FontSize px/pt

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).

Performance Issues

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.

switches

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

uiconfig.html example has one error

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

Feature request: Snapping and guiding of Edge control points

#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.

"Circular" Connector Style

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.

auto layout

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?

mxKeyHandler.destroy leaves junk DOM event handler.

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.

Navigator.pointerEnabled is a non-standard API

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.

Feature request: Implementation of rotation of Element by an arbitrary angle

#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):

'rotation'

Offset in mouse selections when page is scrolled down

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:

image
Offset in mouse events problem when page is scrolled

image
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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.