Bundle grapheditor example with webpack

[lbrutti]

Hello, I'm building a graph editor application and i'd like to use the grapheditor example as a starting point. I tried to bundle it with webpack but seems like I have to expose a lot of global variable in the window object:

For example:

import mxgraph from 'mxgraph';

const graphConfig = {
    //the path in mxClient.basePath.
    mxBasePath: './assets/',
    // the path in mxClient.imageBasePath.
    mxImageBasePath: './assets/images',
    // the language for resources in mxClient.language.
    mxLanguage: 'en',
    // the default language in mxClient.defaultLanguage.
    mxDefaultLanguage: 'en',
    // if any resources should be loaded.  Default is true.
    mxLoadResources: true,
    // if any stylesheets should be loaded.  Default is true
    mxLoadStylesheets: false,
    loadDefaultBundle:true
};

Object.keys(graphConfig).map(k => {
    window[k] = graphConfig[k];
})
const {
    mxClient,
    mxUtils,
    mxEvent,
    mxEditor,
    mxRectangle,
    mxGraph,
    mxGeometry,
    mxCell,
    mxEventObject,
    mxImage,
    mxDivResizer,
    mxObjectCodec,
    mxCodecRegistry,
    mxConnectionHandler,
    mxEventSource,
    mxPoint,
    mxPopupMenu,
    mxGraphView,
    mxGraphHandler,
    mxPopupMenuHandler,
    mxConstants,
    mxText,
    mxGraphModel,
    mxSvgCanvas2D,
    mxShape,
    mxCellHighlight,
    mxStackLayout,
    mxCellRenderer,
    mxConnector,
    mxStencil,
    mxActor,
    mxArrow,
    mxArrowConnector,
    mxCloud,
    mxCylinder,
    mxDoubleEllipse,
    mxEllipse,
    mxHexagon,
    mxImageShape,
    mxLabel,
    mxLine,
    mxMarker,
    mxPolyline,
    mxRectangleShape,
    mxRhombus,
    mxStencilRegistry,
    mxSwimlane,
    mxTriangle,
    mxPerimeter,
    mxStyleRegistry,
    mxEdgeStyle,
    mxConnectionConstraint,
    mxResources,
    mxUndoManager,
    mxLayoutManager,
    mxDictionary,
    mxKeyHandler

} = mxgraph(graphConfig);

//#region 
window.mxClient = mxClient;
window.mxUtils = mxUtils;
window.mxRectangle = mxRectangle;
window.mxGraph = mxGraph;
window.mxEvent = mxEvent;
window.mxGeometry = mxGeometry;
window.mxCell = mxCell;
window.mxImage = mxImage;
window.mxEditor = mxEditor;
window.mxDivResizer = mxDivResizer;
window.mxObjectCodec = mxObjectCodec;
window.mxCodecRegistry = mxCodecRegistry;
window.mxConnectionHandler = mxConnectionHandler;
window.mxEventSource = mxEventSource;
window.mxPoint = mxPoint;
window.mxPopupMenu = mxPopupMenu;
window.mxGraphView = mxGraphView;
window.mxGraphHandler = mxGraphHandler;
window.mxPopupMenuHandler = mxPopupMenuHandler;
window.mxConstants = mxConstants;
window.mxText = mxText;
window.mxGraphModel = mxGraphModel;
window.mxSvgCanvas2D = mxSvgCanvas2D;
window.mxShape = mxShape;
window.mxCellHighlight = mxCellHighlight;
window.mxStackLayout = mxStackLayout;
window.mxCellRenderer = mxCellRenderer;
window.mxConnector = mxConnector;
window.mxStencil = mxStencil;
window.mxStencilRegistry = mxStencilRegistry;
window.mxSwimlane = mxSwimlane;
window.mxCylinder = mxCylinder;
window.mxActor = mxActor;
window.mxArrow = mxArrow;
window.mxArrowConnector = mxArrowConnector;
window.mxCloud = mxCloud;
window.mxDoubleEllipse = mxDoubleEllipse;
window.mxEllipse = mxEllipse;
window.mxHexagon = mxHexagon;
window.mxImageShape = mxImageShape;
window.mxLabel = mxLabel;
window.mxLine = mxLine;
window.mxMarker = mxMarker;
window.mxPolyline = mxPolyline;
window.mxRectangleShape = mxRectangleShape;
window.mxRhombus = mxRhombus;
window.mxTriangle = mxTriangle;
window.mxPerimeter = mxPerimeter;
window.mxStyleRegistry = mxStyleRegistry;
window.mxEdgeStyle = mxEdgeStyle;
window.mxConnectionConstraint = mxConnectionConstraint;
window.mxResources = mxResources;
window.mxUndoManager = mxUndoManager;
window.mxEventObject = mxEventObject;
window.mxLayoutManager = mxLayoutManager;
window.mxDictionary = mxDictionary;
window.mxKeyHandler = mxKeyHandler;

Yet it's not enough to make thinks work.

Is there a beste way or a webpackable fork?

Thanks in advance

[PrudhviMadasu]

Not sure if npm package of mxgraph has entire functionality, but if you are uisng Angular , what you can do is copy mxgraph project to somewhere in assets folder

Add below code in TS file, const script = '/app.js' const node = document.createElement('script'); node.src = script ; node.type = 'text/javascript'; node.async = false; // tslint:disable-next-line: deprecation node.charset = 'utf-8'; document.getElementsByTagName('head')[0].appendChild(node);

Add mxClient.js to Scripts array in angular.json