Can MXGRAPH be used in Angular 4?

[NicCOConnor]

it can, I use a wrapper file that I call mxgraph.overrides.ts which allows me to extend the existing functionality. There are probably better ways of doing this.

Start with this.

import {Base64} from 'base64-js';
import {pako} from 'pako';
import * as _ from 'lodash';
declare var require: any;
var mx = require("mxgraph")({
  mxImageBasePath: "assets/images",
  mxBasePath: "assets"
});

let mxActor = mx.mxActor;
<variable for each mx class>

create a variable for each mxGraph component

create an interface with the same name

interface mxActor {
//you can add new property definitions and functions here
keanu: boolean;
isKeanu(): boolean;
setKeanu(): void;
}

Implement function definitions.

mxActor.prototype.isKeanu = function() {
  return this.keanu;
}
mxActor.prototype.setKeanu = function() {
  this.keanu = true;
}

then export the variable

export {
mxActor,
<other mxGraph classes>
}

you can then import the overrides file into your components.

import {  mxActor } from './mxgraph/mxgraph.overrides';

Now a caveat to this is some components of mxGraph still expect global variables you can overcome that by creating a WindowsService

import { Injectable } from '@angular/core';

function _window(): any{
  return window;
}

@Injectable()
export class WindowService {
  get nativeWindow(): any {
    return _window();
  }
}

Usage

import {Component, OnInit} from '@angular/core';
import {
  mxGraph,
  mxEditor,
  mxGeometry,
  mxDefaultKeyHandler,
  mxDefaultPopupMenu,
  mxStylesheet,
  mxDefaultToolbar,
  mxGraphModel
  } from './mxgraph/mxgraph.overrides';

  import { WindowService } from './services/window.service';
@Component({
  selector: 'graph-editor',
  templateUrl: 'editor.component.html',
  styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit{

  @ViewChild("graph") elGraph;
  editor:any;

constructor(private winService: WindowService) { }

  ngOnInit(){
    let win = this.winService.nativeWindow;
    win['mxEditor'] = mxEditor;
    win['mxGeometry'] = mxGeometry;
    win['mxDefaultKeyHandler'] = mxDefaultKeyHandler;
    win['mxDefaultPopupMenu'] = mxDefaultPopupMenu;
    win['mxGraph'] = mxGraph;
    win['mxStylesheet'] = mxStylesheet;
    win['mxDefaultToolbar'] = mxDefaultToolbar;
    win['mxGraphModel'] = mxGraphModel;
    win['editorConfig'] = this.editorConfig;
}

[cristophersfr]

Any update on this?

This method you mentioned can get very confused as the app keeps growing.

[ChrisWorks]

Has anyone found a way to do this properly yet?

[CorporateDog]

I'm also trying to make mxGraph work with Angular & TypeScript. I've gotten about as far as I could with the instructions to create a wrapper around the .js library, but where I'm hitting a wall is in generating new instances of the JavaScript classes. Simply trying to do this...

var graphModel = new mxGraphModel();
var graph = new mxGraph(this.graphContainer, graphModel);

.. fails for obvious reasons, with the following error:

CanvasTestScreenComponent_Host.ngfactory.js:5 ERROR TypeError: mxGraphModel is not a constructor

It's certainly not a constructor as far as TypeScript is concerned, but I'm not really sure how I'd go about creating an instance of the class, otherwise.

[NicCOConnor]

@ChrisWorks not properly but I would love to collaborate with someone on getting this task done. My post above is how I solved the problem but a proper solution is beyond my skill.

@CorporateDog a couple things to check. In your overrides file make sure you are exporting the same name mxGraph is expecting (mxGraphModel) second mxGraph model is a class that is expected in the global scope. So make sure that you create that window service and subscribe to it in your component constructor. setting it on your global scope in the ngOnInit{}

constructor(private winService: WindowService) { }

  ngOnInit(){
    let win = this.winService.nativeWindow;
    win['mxEditor'] = mxEditor;
    win['mxGeometry'] = mxGeometry;
    win['mxDefaultKeyHandler'] = mxDefaultKeyHandler;
    win['mxDefaultPopupMenu'] = mxDefaultPopupMenu;
    win['mxGraph'] = mxGraph;
    win['mxStylesheet'] = mxStylesheet;
    win['mxDefaultToolbar'] = mxDefaultToolbar;
    win['mxGraphModel'] = mxGraphModel;
    win['editorConfig'] = this.editorConfig;
}

[stalkerg]

@NicCOConnor I think we should fix this problem in the root - https://github.com/jgraph/mxgraph/issues/112

[NicCOConnor]

@stalkerg Agreed, Looks like the originators want a fork. I would be willing to contribute to that project.

[davidjgraph]

Yes. To clarify, these are all really good ideas, the problem is they are not pain points we suffer from. That added to the fact we have to support legacy IE in draw.io means we're really limited on tooling and we can't disrupt ourselves for something that isn't broken for us.

We'll support a fork any way we can and we can submit core changes we make here as PRs. This is really why we Apache licensed it, so the ecosystem can move it along if there's enough weight behind doing it.

I would just ask that the name be something other than "mxgraph", or users will constantly submit questions asking which is which...

But yes, please this do, it's the sign of a healthy project.

[stalkerg]

That added to the fact we have to support legacy IE in draw.io means we're really limited on tooling and we can't disrupt ourselves for something that isn't broken for us.

Hm... babel + core.js can really good solve problems with IE. But for my opinion support IE lower than 11 not necessary.

other than "mxgraph"

I thinking about MonsterGraph...

[davidjgraph]

We make all our money on draw.io and have Enterprise customers still on IE 8 :).

MonsterGraph is cool. I'd personally go for professional sounding over cool, I think there's a big demand for a modern mxGraph, I'd maybe avoid something that the corporates won't like the sound of...

[NicCOConnor]

My goal for this fork is to re-write the library in typescript with that in mind I’d like to go with something like tsGraph. Do you think that would be too similar?

On Sep 26, 2017, at 9:26 AM, David Benson notifications@github.com wrote:

Closed #88.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[davidjgraph]

I don't think that'd cause any confusion, gfi.

[ChrisWorks]

@NicCOConnor @stalkerg Have you guys started the new process of splitting the mxGraph into a more "frontend framework friendly" setup? Me and my team might be interested in contributing to this work as well. We would be interested in using this with Angular.io / Angular4 if we can wrap it / modularize it in a good way. How about "fffGraph" as name? he he

[stalkerg]

@ChrisWorks I started this project https://github.com/stalkerg/monstergraph currently "HelloWorld" work well but we should be thinking more about API (init phase for mxClient for example). Also, very important drop current IE support and replace by polyfills (maybe not in the library at all). Also, the project has a lot of duplicate code like "indexOf", "clone" for support IE6-9.

[stalkerg]

We make all our money on draw.io and have Enterprise customers still on IE 8 :).

You can support even IE6 by babel and polyfills, maybe only VML will be a problem.

[NicCOConnor]

@stalkerg @ChrisWorks Sorry for being late to the party. Been busy at work. I did create a github account for tsGraph. Sorry @stalkerg I really can't get behind monsterGraph. Agreeing, with David that the name should sound more professional. Would you guys be willing to be added to this new repo as contributors? I honestly don't know how much time I'll have to contribute to the project at this moment. But I am involved in a project that uses mxGraph extensively. So it's likely that I will make contributions. But I would need some other people to help moderate it.

[jayantmishra]

@NicCOConnor , what if i dont want to add new properties and definitions to mxGraph components in that case do i still need to create interfaces for each component, if that so what their implimentation look like and what is the purpose of EditorComponent in the above example

[NicCOConnor]

@jayantmishra Technically no, but as I've continued to develop with this method. I've noticed if you are trying to strongly type your components it becomes necessary to add existing functions in the interfaces, typings would be an added benefit to this project. @stalkerg has done some work on this with Rollup and ES6 modules. But I'm unsure how that relates to TypeScript.

The purpose of the EditorComponent in the example above is essentially an Angular component wrapper for initializing the mxEditor, it handles creating the objects needed on $window as well as the initial configuration of the editor and graph, tasks like loading shapes, functions, keybindings, etc.. from the XML file.

Unfortunately, I'm unable to share my code since my employer has not approved my work to be open sourced. I'm working on it, but that will take a while longer

[khtan1987]

Hi all, I'm changing the package.json in mxGraph follow @NicCOConnor and make some modification in it as below and it seem able to install in angular 4, but I am not sure it's correct or not.

grunt-webpack and webpack version is based on my local machine version. you might need to change it follow yours local machine version.

my npm version: 5.3.0 os: windows 10

package.json: { "_args": [ [ { "raw": "mxgraph@^3.8.0", "scope": null, "escapedName": "mxgraph", "name": "mxgraph", "rawSpec": "^3.8.0", "spec": ">=3.8.0 <4.0.0", "type": "range" }, "/Users/nic/source/cartographer-web" ] ], "_from": "git+https://github.com/jgraph/mxgraph.git", "_id": "mxgraph@3.8.0", "_inBundle": false, "_inCache": true, "_integrity": "sha1-kSQLpSDxtyvnzzZ6P+mgo16rTC0=", "_location": "/mxgraph", "_nodeVersion": "4.7.2", "_npmOperationalInternal": { "host": "s3://npm-registry-packages", "tmp": "tmp/mxgraph-3.7.4.tgz_1498590682767_0.9278142049442977" }, "_npmUser": { "name": "drawio", "email": "npm@jgraph.com" }, "_npmVersion": "3.5.2", "_phantomChildren": { "acorn": "5.2.1", "acorn-dynamic-import": "2.0.2", "async": "2.6.0", "big.js": "3.2.0", "center-align": "0.1.3", "co": "4.6.0", "code-point-at": "1.1.0", "decamelize": "1.2.0", "emojis-list": "2.1.0", "enhanced-resolve": "3.4.1", "get-caller-file": "1.0.2", "interpret": "1.1.0", "json-loader": "0.5.7", "json-stable-stringify": "1.0.1", "json5": "0.5.1", "loader-runner": "2.3.0", "memory-fs": "0.4.1", "mkdirp": "0.5.1", "node-libs-browser": "2.1.0", "number-is-nan": "1.0.1", "object-assign": "4.1.1", "os-locale": "1.4.0", "read-pkg-up": "1.0.1", "require-directory": "2.1.1", "require-main-filename": "1.0.1", "right-align": "0.1.3", "set-blocking": "2.0.0", "source-map": "0.5.7", "strip-ansi": "3.0.1", "supports-color": "3.2.3", "tapable": "0.2.8", "uglify-to-browserify": "1.0.2", "watchpack": "1.4.0", "webpack-sources": "1.1.0", "which-module": "1.0.0", "window-size": "0.1.0", "wrap-ansi": "2.1.0", "y18n": "3.2.1" }, "_requested": { "type": "git", "raw": "git+https://github.com/jgraph/mxgraph.git", "rawSpec": "git+https://github.com/jgraph/mxgraph.git", "saveSpec": "git+https://github.com/jgraph/mxgraph.git", "fetchSpec": "https://github.com/jgraph/mxgraph.git", "gitCommittish": "master" }, "_requiredBy": [ "#USER", "/" ], "_resolved": "git+https://github.com/jgraph/mxgraph.git#3a05b1a3b63be38fb61314784dccb8824536e9fb", "_shasum": "1066f63fa63a8647dcdb0f1d8ccdbc191e6ed452", "_shrinkwrap": null, "_spec": "git+https://github.com/jgraph/mxgraph.git", "_where": "D:\testAngular\testmxgraph", "author": { "name": "JGraph Ltd", "email": "support@jgraph.com" }, "bugs": { "url": "https://github.com/jgraph/mxgraph/issues" }, "bundleDependencies": false, "dependencies": { "grunt": "^1.0.1", "grunt-contrib-concat": "^1.0.1", "grunt-contrib-copy": "^1.0.0", "grunt-webpack": "^3.0.2", "load-grunt-parent-tasks": "^0.1.1", "load-grunt-tasks": "^3.5.2", "webpack": "^3.10.0" }, "deprecated": false, "description": "mxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.", "devDependencies": {}, "directories": {}, "dist": { "shasum": "1066f63fa63a8647dcdb0f1d8ccdbc191e6ed452", "tarball": "https://registry.npmjs.org/mxgraph/-/mxgraph-3.7.4.tgz" }, "homepage": "https://github.com/jgraph/mxgraph", "license": "Apache-2.0", "main": "./javascript/dist/build.js", "maintainers": [ { "name": "drawio", "email": "npm@jgraph.com" }, { "name": "brendonboshell", "email": "brendonboshell@gmail.com" } ], "name": "mxgraph", "optionalDependencies": {}, "repository": { "type": "git", "url": "git+https://github.com/jgraph/mxgraph.git" }, "scripts": { "postinstall": "grunt build --base . --gruntfile etc/build/Gruntfile.js" }, "version": "3.8.0" }

[Rajsmit]

@NicCOConnor Could you please attach a minimum sample example which shows a simple usage of mxgraph in Angular 4. With very limited working declaration in mxgraph.overrides.ts.

[NicCOConnor]

@Rajsmit at this time no, This implementation is not the best way to go about it. I'm working on a better implementation and I will post a working github repo when that is finished. Unfortunately, I don't have a timeline for completion.

[TrickTrcker]

@khtan1987 and @NicCOConnor Please help me to get mxgraph worked in angular-4/5/6. Also please share any sample code. Its very urgent in my project.

[cristophersfr]

@TrickTrcker are you using TypeScript along with Angular?

[TrickTrcker]

Yes,i am using TypeScript(2.7.2) . Please find my package.json { "name": "Angular 5", "version": "2.0.0-beta.1", "description": "Angular 5", "author": "TrickTrackers", "homepage": "", "copyright": "", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "angular/animations": "5.2.10", "angular/cdk": "5.2.1", "angular/common": "5.2.10", "angular/compiler": "5.2.10", "angular/core": "5.2.10", "angular/forms": "5.2.10", "angular/http": "5.2.10", "angular/platform-browser": "5.2.10", "angular/platform-browser-dynamic": "5.2.10", "angular/router": "5.2.10", "coreui/angular": "^2.0.0-beta.2", "coreui/coreui-plugin-chartjs-custom-tooltips": "^1.1.0", "types/jquery": "^2.0.49", "Base64": "^1.0.1", "angular-sortablejs": "^2.5.2", "chart.js": "2.7.2", "core-js": "2.5.5", "flag-icon-css": "3.0.0", "font-awesome": "^4.7.0", "jquery": "^3.3.1", "moment": "2.22.1", "ng2-charts": "1.6.0", "ngx-bootstrap": "2.0.4", "ngx-ckeditor": "^0.3.1", "ngx-contextmenu": "4.2.0", "ngx-perfect-scrollbar": "5.3.5", "node-sass": "^4.9.0", "primeng": "^5.2.4", "rxjs": "5.5.10", "simple-line-icons": "^2.4.1", "sortablejs": "^1.7.0", "ts-helpers": "1.1.2", "zone.js": "0.8.26" }, "devDependencies": { "angular/cli": "1.7.4", "angular/compiler-cli": "5.2.10", "angular/language-service": "5.2.10", "types/jasmine": "2.8.6", "types/jasminewd2": "2.0.3", "types/node": "9.6.5", "codelyzer": "4.2.1", "jasmine-core": "2.9.1", "jasmine-spec-reporter": "4.2.1", "karma": "2.0.0", "karma-chrome-launcher": "2.2.0", "karma-coverage-istanbul-reporter": "1.4.2", "karma-jasmine": "1.1.1", "karma-jasmine-html-reporter": "0.2.2", "protractor": "5.3.1", "ts-node": "4.1.0", "tslint": "5.9.1", "typescript": "2.7.2" }, "engines": { "node": ">= 8.9.4", "npm": ">= 5.6.0" } }

[cristophersfr]

Do you have the types.ts for mxGraph usage? @TrickTrcker

[TrickTrcker]

No i dont have. Now i am following @NicCOConnor instruction. Also found some resources https://github.com/lgleim/mxgraph-typings. But not worked,i am new to angular 4,5.

[cristophersfr]

@TrickTrcker Well, from my perspective, there is no easy way around this, mxGraph is a JavaScript library and it should work with TypeScript "compiled" JS, but, for having types and definitions into TS code, you will need to define those types, which are basically, a lot of interfaces telling Angular that these pieces of code will be further available into a .js, just like every other part of it.

So, I did a few steps to make it work:

(i) Into src/typings.d.ts:

I've references my predefined types:

/// <reference path="./typings/Util.d.ts" />
/// <reference path="./typings/Handlers.d.ts" />
/// <reference path="./typings/mxClient.d.ts" />
/// <reference path="./typings/Constants.d.ts" />
/// <reference path="./typings/Layout.d.ts" />
/// <reference path="./typings/Shape.d.ts" />
/// <reference path="./typings/View.d.ts" />
/// <reference path="./typings/mxGraph.d.ts" />

(...)

(ii) Then I'll define what types I'll require into my Angular app:

Into src/typings, I have these files:

https://github.com/gooddaytoday/mxgraph-typescript-definitions

Those headers I'll need for my app, I define by myself.

(iii) Into src/assets, I'll put mxClient.js file. This file will contain the real code for mxGraph to work.

(iv) For last, into src/index.html:

I'll define the path to mxClient.js

<script type="text/javascript">
     mxBasePath = 'assets/';
</script>

Most of this work is manual and you need to understand how does JavaScript, TypeScript and Angular communicate, I strongly recommend you have a deeper look into Angular docs.

[renjithsraj]

Here Is the solution for mxgraph with angular 6.x https://github.com/Cadmus/epicupsdraw

[morwalz]

@Cadmus this is not true implementation.You just included in index. it is not angular way.

[ViksYelapale]

If anyone struggling with mxGraph integration in Angular 4/5/6. Then here is Complete Solution: https://stackoverflow.com/questions/49922708/how-to-integrate-mxgraph-with-angular-4/54689971#54689971

[emilbonnek]

I have not been able to get any of this to work with Angular 8.x unfortunately. @NicCOConnor Is the tsGraph project still being worked on? If so, what is the current state of it? If not, why not? Do you need help?