npm install

[TheBrunoLopes]

Don't know why but when I do npm install mxgraph I'm unable to import "mxgraph"

import {
    mxClient,
    mxGraph,
    mxRubberband,
    mxUtils,
    mxEvent
} from "mxgraph";

But the npm install mxgraph-js everything works fine (aside from the fact that this one is an outdated fork)

Is anybody having issues with the npm install ? I'm currently trying to use it in a react project.

[jianfenkezhan]

yes! that is a problem. same as things, I try npm install mxgraph done! and i try use it in a react project. but it happened. 😂

[claylong]

I believe I am having the same issue when trying to do require('mxgraph'). It seems that in the package's package.json file the "main" path is missing ("main": "./javascript/dist/build.js").

Seems to be related to #180

[lgleim]

There is a yet to be merged fix for this in a fork of the upstream mxgraph bitbucket repository. C.f. #169

[madspacer]

@davidjgraph has this issue been resolved? Why is it marked as closed?

Many thanks

[nameszian]

A shit of solution, but it works:

git clone https://github.com/jgraph/mxgraph.git mxgraphgit
cd mxgraphgit
npm i

Now copy dist/ from mxgraphgit/javascript/ directory to $YOUR_PROJECT_DIRECTORY/node_modules/mxgraph/javascript/

And so it works ... Basically they have not published the correct packages on npmjs.com

Working on mxgraph version 3.9.11 from npmjs.com - 12/2018

[davidjgraph]

So how do we fix the deploy?

[nameszian]

@davidjgraph I think that the owners of this repository should do npm run prepare before doing npm publish, they will have to do it in the next version, because if not, nobody can use it if they do not do what I said in my previous comment.

[davidjgraph]

The problem is we get vague "do this, do that" without specifics. If someone submits an exact patch, fine, we'll accept it. But, we don't use npm and never will. We're not going to waste our time learning how it works. If you want it fixed, you have to fix it. Whining without a specifc solution waste everyone's time.

[davidjgraph]

https://bitbucket.org/jgraph/mxgraph2/src/master/etc/build/deploy.sh is the deploy script, you want npm run prepare inserted directly before line 66?

[nameszian]

@davidjgraph It's your problem, not mine, I try to give a solution, So do not come asking me for a solution as if you were my boss, do not be inconsiderate, it's incredible that the repository owners do not know how to execute two commands before publishing to npmjs.com, and using google is not that difficult https://hackernoon.com/publish-your-own-npm-package-946b19df577e, likewise I repeat, I think you just have to do npm init && npm run prepare && npm login && npm publish. I can't do Pull Request due to 'Access denied' So, YES, add npm run prepare before the line 66 something like this:

...
# Publish mxgraph to NPM
npm install
npm run prepare
npm publish --access public
cd ..

...

[davidjgraph]

I think you're one confused. I don't care at all about npm support. You're the people asking for it. Then you tell me I should go and work out how to do it when it's you who wants the functionality, not me.

Until someone submits a correct patch I'll continue not to care and the package will be broken. Merry Christmas 8-).

[davidjgraph]

OK, 3.9.12 pushed with the suggested change.

[fleskovar]

@davidjgraph,

I just tried installing via npm and I am unable to do:

import { mxClient, mxGraph, mxRubberband, mxUtils, mxEvent } from "mxgraph";

When debugging, I get messages like "mxClient is not defined".

I tried @nameszian solution but it did not work. Any ideas about how to solve this?

Thanks

EDIT:

The code of the anchors.js file works just fine:

var mxgraph = require("../node_modules/mxgraph/javascript/dist/build")({ mxImageBasePath: "../node_modules/mxgraph/javascript/src/images", mxBasePath: "../node_modules/mxgraph/javascript/src" }), mxGraph = mxgraph.mxGraph, mxClient = mxgraph.mxClient, mxEvent = mxgraph.mxEvent, mxRubberband = mxgraph.mxRubberband, mxUtils = mxgraph.mxUtils, mxEvent = mxgraph.mxEvent;

Maybe it is just for cosmetic reasons, but is there a way to transform all of that into the "import {} from" syntax?

Thanks

OK, 3.9.12 pushed with the suggested change.

[KevinLeigh]

@davidjgraph,

I just tried installing via npm and I am unable to do:

import { mxClient, mxGraph, mxRubberband, mxUtils, mxEvent } from "mxgraph";

When debugging, I get messages like "mxClient is not defined".

I tried @nameszian solution but it did not work. Any ideas about how to solve this?

Thanks

EDIT:

The code of the anchors.js file works just fine:

var mxgraph = require("../node_modules/mxgraph/javascript/dist/build")({ mxImageBasePath: "../node_modules/mxgraph/javascript/src/images", mxBasePath: "../node_modules/mxgraph/javascript/src" }), mxGraph = mxgraph.mxGraph, mxClient = mxgraph.mxClient, mxEvent = mxgraph.mxEvent, mxRubberband = mxgraph.mxRubberband, mxUtils = mxgraph.mxUtils, mxEvent = mxgraph.mxEvent;

Maybe it is just for cosmetic reasons, but is there a way to transform all of that into the "import {} from" syntax?

Thanks

OK, 3.9.12 pushed with the suggested change.

Hey @fleskovar @davidjgraph, below code worked for me ->

import * as mxgraph from 'mxgraph';

const {
	mxClient, mxGraph, mxRubberband, mxUtils, mxEvent
} = mxgraph();

[spoilerdo]

When I use the code example from @KevinLeigh . Do I need to use it in every class of my mxgraph tool, beceause when I do this my register custom shapes is not working and I was thinking that this is the problem of me creating a new mxgraph instance in every file.

[become-iron]

mxgraph exports not the library itself but kind of its factory. So I've created script mxgraph.js:

import mxgraphFactory from 'mxgraph'

export default mxgraphFactory({
  // here should be your paths to mxgraph's assets (it's optional)
  mxImageBasePath: 'assets/mxgraph/images',
  mxBasePath: 'assets/mxgraph'
})

Then I can import mxgraph wherever I want like that:

import mxgraph from './mxgraph'

new mxgraph.mxGraph()

[ekoz]

@become-iron
I modified module.exports = new mxgraphFactory(), then I can use import {mxClient, mxGraph } from 'path/to/mxgraph' in my vue page immediately.

[nickyxu]

@become-iron,
I use your methods, but I cannot import mxValueChange where is from src/model/mxGraphModel.js.

Code:
const initialProcessChange = mxGraph.prototype.processChange;
mxGraph.prototype.processChange = function (change) {
initialProcessChange.apply(this, arguments);

  if (
    change instanceof mxValueChange &&

Thanks

[become-iron]

@nickyxu
I believe, only objects, which are placed in separate files, are being exported. So mxValueChange doesn't have separate file. Looks like a lack of the way to build mxgraph in bundle

Script which manages bundle building: https://github.com/jgraph/mxgraph/blob/master/etc/build/Gruntfile.js

[davidjgraph]

Aside from my zero understanding of npm, what is the current problem with the npm package. I see #313 where 11 people want the latest pushed. I'm assuming they have it working. Is the problem that's it's working, but hard to use?

[nickyxu]

Thanks very much for your response.
I search issue about npm.
Finally, I found #169 .
It works for me.
The following is from vue.config.js

chainWebpack: (config) => {
    config.module
      .rule('')
      .test(/mxClient\.js$/)
      .use('imports-loader')
      .loader('imports-loader?mxBasePath=>"cimgraph"')
      .end();
    config.module
      .rule('')
      .test(/mxClient\.js$/)
      .use('exports-loader')
      .loader('exports-loader?mxActor,mxArrow,mxArrowConnector,mxCell,mxCellEditor,mxCellHighlight,mxCellMarker,mxCellRenderer,' +
        'mxCellState,mxChildChange,mxClient,mxCodec,mxCodecRegistry,mxConnectionConstraint,mxConnectionHandler,' +
        'mxConnector,mxConstants,mxConstraintHandler,mxCylinder,mxDefaultKeyHandler,mxDefaultPopupMenu,mxDefaultToolbar,' +
        'mxDictionary,mxDoubleEllipse,mxDragSource,mxEdgeHandler,mxEdgeStyle,mxEditor,mxEllipse,mxElbowEdgeHandler,' +
        'mxEvent,mxEventObject,mxEventSource,mxGeometry,mxGraph,mxGraphHandler,mxGraphModel,mxGraphView,mxGuide,' +
        'mxHandle,mxHexagon,mxImage,mxImageExport,mxImageShape,mxKeyHandler,mxLine,mxMarker,mxMouseEvent,mxObjectCodec,' +
        'mxPanningHandler,mxPerimeter,mxPrintPreview,mxPoint,mxPopupMenu,mxPopupMenuHandler,mxPolyline,mxRectangle,mxRectangleShape,' +
        'mxResources,mxRhombus,mxRootChange,mxRubberband,mxShape,mxStackLayout,mxStencilRegistry,mxStencil,mxStyleRegistry,' +
        'mxSvgCanvas2D,mxText,mxTooltipHandler,mxUndoManager,mxUtils,mxValueChange,mxVertexHandler,mxWindow,mxXmlCanvas2D')
      .end();
}

[dsonwy]

I solve the problem learning from the project here: https://github.com/jinzhanye/pokemon-diagram.
I use it in a react project and it's ok. Note the version of mxgraph here cause upgrading it to the latest version of "4.0.2" causes error.

[davidjgraph]

You solved the problem but didn't tell anyone how. Really?

[paper-play]

@dsonwy "I solve the problem learning from the project here: https://github.com/jinzhanye/pokemon-diagram.
I use it in a react project and it's ok. Note the version of mxgraph here cause upgrading it to the latest version of "4.0.2" causes error."

My project is react ,and learing from the project of pokemon-diagram, is ok in version 3.1.12,but upgrade to 4.0.1 or 4.0.2 ,it does not work,(error message : cant resove mxgraph), I cant find the dist/build.js in the node-modules directory, but it can find it in the version 3.9.12. And I try to use version 3.9.1 , it's also dont work.

[dsonwy]

@paper-play yeah,,,

@dsonwy "I solve the problem learning from the project here: https://github.com/jinzhanye/pokemon-diagram.
I use it in a react project and it's ok. Note the version of mxgraph here cause upgrading it to the latest version of "4.0.2" causes error."

My project is react ,and learing from the project of pokemon-diagram, is ok in version 3.1.12,but upgrade to 4.0.1 or 4.0.2 ,it does not work,(error message : cant resove mxgraph), I cant find the dist/build.js in the node-modules directory, but it can find it in the version 3.9.12. And I try to use version 3.9.1 , it's also dont work.

yeah, I dont know how to make it work in other versions, either. And I use it in the version of 3.9.12...