mxGraph typescript declarations
mxGraph Typescript Declarations For Official mxGraph NPM Package.
Add mxgraph
and @typed-mxgraph/typed-mxgraph
dependencies to your project:
npm:
npm install --save mxgraph
npm install --save-dev @typed-mxgraph/typed-mxgraph
yarn:
yarn add mxgraph
yarn add --dev @typed-mxgraph/typed-mxgraph
Update tsconfig.json
append node_modules/@typed-mxgraph
to typeRoots
:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"esModuleInterop": true,
"typeRoots": [
"node_modules/@types",
"node_modules/@typed-mxgraph"
]
}
}
Import mxGraph factory:
import factory from 'mxgraph';
const mx = factory({
mxBasePath: '',
});
console.log(mx.mxClient.VERSION);
(optional) Create a helper to import mxgraph
// src/mxgraph.ts
import factory from 'mxgraph';
declare global {
interface Window {
mxBasePath: string;
mxLoadResources: boolean;
mxForceIncludes: boolean;
mxLoadStylesheets: boolean;
mxResourceExtension: string;
}
}
window.mxBasePath = 'assets/mxgraph';
window.mxLoadResources = true;
window.mxForceIncludes = false;
window.mxLoadStylesheets = true;
window.mxResourceExtension = '.txt';
export default factory({
// not working see https://github.com/jgraph/mxgraph/issues/479
mxBasePath: 'assets/mxgraph',
});
// src/application.ts
import mx from './mxgraph'; // <- import values from factory()
import type { mxGraph, mxGraphModel } from 'mxgraph'; // <- import types only, "import type" is a TypeScript 3.8+ syntax
export class Application {
constructor(container: HTMLElement) {
if(mx.mxClient.isBrowserSupported()) {
console.log('Yes! Yes!');
}
const graph: mxGraph = new mx.mxGraph(container);
const model: mxGraphModel = graph.getModel();
model.beginUpdate();
try {
graph.insertVertex(graph.getDefaultParent(), '', 'TEST', 0, 0, 100, 100);
} finally {
model.endUpdate();
}
}
}
There a known issues is https://github.com/typed-mxgraph/typed-mxgraph/issues/50 the error message may look similar to
Uncaught TypeError: Cannot set properties of undefined (setting 'mxBasePath')
For detailed reasons, please refer to:
Demos:
Types have been initially created from mxGraph 4.1.0
by hand (1st hosting repository was mxgraph-type-definitions) and progressively updated when new mxgraph
versions have been released.
The mxgraph lib is almost fully covered by types in this project. The issues you may encounter are
any
and use optional when we don't know.The definitions target mxGraph 4.2.2
. See the implementation status in the following table.
Module | Progress | Checked |
---|---|---|
editor | partial | no |
handler | completed | no |
io | completed | no |
layout | completed | no |
model | completed | no |
shape | completed | no |
util | partial | no |
view | partial | no |
mxClient.d.ts | completed | no |
Now we use GitHub Actions to automatically publish npm package.
Here are the steps to publish:
master
branchmaster
branch exec npm version <minor | patch>
to
automatically modify the version number and generate tagsmaster
branch exec git push origin master --tags
We are actively developing, if you want to be a contributor, please refer to the following links