Can MXGRAPH be used in Angular 4? #88
Comments
|
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;
} |
|
Any update on this? This method you mentioned can get very confused as the app keeps growing. |
|
Has anyone found a way to do this properly yet? |
|
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... .. fails for obvious reasons, with the following error:
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. |
|
@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{} |
|
@NicCOConnor I think we should fix this problem in the root - #112 |
|
@stalkerg Agreed, Looks like the originators want a fork. I would be willing to contribute to that project. |
|
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. |
Hm... babel + core.js can really good solve problems with IE. But for my opinion support IE lower than 11 not necessary.
I thinking about MonsterGraph... |
|
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... |
|
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 ***@***.***> wrote:
Closed #88.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
I don't think that'd cause any confusion, gfi. |
|
@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 |
|
@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). |
You can support even IE6 by babel and polyfills, maybe only VML will be a problem. |
|
@stalkerg @ChrisWorks Sorry for being late to the party. Been busy at work. |
|
@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 |
|
@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 |
|
Hi all, grunt-webpack and webpack version is based on my local machine version. you might need to change it follow yours local machine version. my package.json: |
|
@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. |
|
@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. |
|
@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. |
|
@TrickTrcker are you using TypeScript along with Angular? |
|
Yes,i am using TypeScript(2.7.2) . |
|
Do you have the types.ts for mxGraph usage? @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. |
|
@TrickTrcker So, I did a few steps to make it work: (i) Into 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 https://github.com/gooddaytoday/mxgraph-typescript-definitions Those headers I'll need for my app, I define by myself. (iii) Into (iv) For last, into 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. |
|
Here Is the solution for mxgraph with angular 6.x |
|
@cadmus this is not true implementation.You just included in index. it is not angular way. |
|
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 |
|
I have not been able to get any of this to work with Angular 8.x unfortunately. |
No description provided.
The text was updated successfully, but these errors were encountered: