All type defs for mx-graph is not available

[ravipras8]

Hi, am trying to create one angular 6 app by integrating mxgraph as you said in this project. the initial part i.e adding vertex as done in your project is happening for me. i want to create draggable icons in sidebar. for that i have to use mxUtils methods to create draggable icons, for this mxUtils type defs not available in your project, is it type defs are not complete??? and can you help me creating the side bar?

[MohamedChaabouni]

I have the same issue here. @diegogusava

[diegogusava]

Hey, I copied the typedefs from this link https://github.com/gooddaytoday/mxgraph-typescript-definitions!

[naran3434]

Hey @ravipras8 and @MohamedChaabouni , @diegogusava has added all lib files, So instead of relying on definition files.

declare class in this way. declare var mxUtils: any; The same way like importing Jquery. I can able to add side bar using this approach.

[Githamza]

@naran3434 Can you explain with an example more detailed how to make types working ?

[naran3434]

Hi @Githamza ,

Please check following steps :

1. Make sure you have added mxClient.js, and config.js i.e : (mxgraph.config.js) in script part of angular.json. In this way Angular will load mxgraph files in index page.
2. In the component where you want to use mxGraph declare class in following ways.

declare var mxClient: any;
declare var mxPerimeter: any;
declare var mxConstants: any;
declare var mxUtils: any;
declare var mxEvent: any;
declare var mxEventObject: any;
declare var mxEffects: any;
declare var mxDivResizer: any;
declare var mxGraphHandler: any;
declare var mxGuide: any;
declare var mxCodec: any;
declare var mxLog: any;
declare var mxConnectionHandler: any;

This is simplest way to tell typescript there is such class or variable loaded to app which doesn't have definition file.

3. create sidebar element using following method

Params :

1. graph - instance of mxGraph
2. sidebar - Element Reference // eg : @ViewChild('sidebarContainer') sidebar: ElementRef
3. label - string should be displayed as label
4. image - image url , since my drag and drop icon are images

addSidebarIcon(graph, sidebar, label, image) {
      const self = this;
      const funct = function(graph, evt, cell, x, y) {
      const parent = graph.getDefaultParent();
      const model = graph.getModel();
      const prefix = 'shape=image;image=/assets/images/icon_1.png;';
      let v1 = null;
      model.beginUpdate();
      try {
               v1 = graph.insertVertex(parent, null, label, x, y, 60, 60, prefix + 'verticalLabelPosition=bottom;verticalAlign=top');
        v1.setConnectable(true);     
        v1.geometry.alternateBounds = new mxRectangle(0, 0, 120, 40);
        const port = graph.insertVertex(v1, null, 'Settings', 1, 0.25, 16, 16,
          'port;image=/assets/images/overlays/settings.png;spacingLeft=18', true);
        port.geometry.offset = new mxPoint(-8, -8);
      } finally {
        model.endUpdate();
      }
      graph.setSelectionCell(v1);
    };
    // Creates the image which is used as the sidebar icon (drag source)
    const div = document.createElement('div');
    div.className += '' + 'icon_c';
    const img = document.createElement('img');
    img.setAttribute('src', image);
    img.style.width = '35px';
    img.style.height = '35px';
    img.title = label;
    div.appendChild(img);
    const span = document.createElement('span');
    span.innerText = label;
    div.appendChild(span);

    const dragElt = document.createElement('div');
    dragElt.style.border = 'dashed black 1px';
    dragElt.style.width = '120px';
    dragElt.style.height = '120px';

    // Creates the image which is used as the drag icon (preview)
    const ds = mxUtils.makeDraggable(img, graph, funct, dragElt, 0, 0, true, true);
    ds.setGuidesEnabled(true);
  }

[Githamza]

@naran3434 thank you so much !

[naran3434]

RenjiEapen,

I need more information to help you. Please create a project in https://stackblitz.com/ and share you implementation.

On Tue, May 21, 2019 at 5:24 PM RenjiEapen notifications@github.com wrote:

I am trying to draw a network diagram in angular using mx-graph. For that, I want to integrate https://github.com/jgraph/mxgraph/blob/master/javascript/examples/grapheditor/www/index.html (javascript) into my angular project. Is it possible? If yes, Please help me.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/diegogusava/angular-mxgraph/issues/1?email_source=notifications&email_token=ADL537YBMKKUNBYU7VE2YQ3PWPPG5A5CNFSM4F67A5UKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV3VFIQ#issuecomment-494359202, or mute the thread https://github.com/notifications/unsubscribe-auth/ADL5377H6GUUYGWDYZPXJGDPWPPG5ANCNFSM4F67A5UA .

[tbouffard]

Hi, if you need up to date types, please have a look at https://github.com/hungtcs/mxgraph-type-definitions/