Socket
Socket
Sign inDemoInstall

@aire-ux/mxgraph

Package Overview
Dependencies
0
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@aire-ux/mxgraph

mxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.


Version published
Maintainers
1
Weekly downloads
1

Weekly downloads

Readme

Source

Aire-UX/MXGraph

jgraph is no longer being maintained. The Aire-UX project relies on mxgraph, and this is its official fork. This project's goals are to:

  1. Implement bug fixes
  2. Support modern browser features as they appear
  3. Provide TypeScript integration support @aire-ux/mxgraph-typescript
  4. Implement some new features as required

Additionally, this project will consider enterprise support contracts and bug-bounties.

Installation

NPM

npm install @aire-ux/mxgraph

Bower

bower install @aire-ux/mxgraph

Once you have installed the project via your package-manager, you can consume it as follows:


import '@aire-ux/mxgraph';

export type mxConfiguration = {
  mxLoadResources: boolean;
  mxForceIncludes: boolean;
  mxLoadStylesheets: boolean;
  mxResourceExtension: string;
  mxProductionMode: boolean;
  mxBasePath: string;
};

const factory = (cfg: Partial<mxConfiguration>) =>
  mxgraph({
    mxLoadResources: cfg.mxLoadResources || false,
    mxForceIncludes: cfg.mxForceIncludes || false,
    mxLoadStylesheets: cfg.mxLoadStylesheets || true,
    mxResourceExtension: cfg.mxResourceExtension || '.txt',
    mxProductionMode: cfg.mxProductionMode || true,
    mxBasePath: cfg.mxBasePath,
  });

export default factory;

import factory from './mxgraph';

const mx = factory({
  mxBasePath: value,
});

const container = document.getElementById(`#my-container`);
const graph = new mx.mxGraph(container);

TypeScript Definitions

Aire-UX maintains a fork of typed-mxgraph which may be installed via npm install @aire-ux/typed-mxgraph.

It may be used as follows:

tsconfig.json


{
  "compilerOptions": {
    "target": "es2018",
    "module": "esnext",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "lib": ["es2017", "dom"],
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "strictPropertyInitialization": false,
    "importHelpers": true,
    "outDir": "dist",
    "sourceMap": true,
    "inlineSources": true,
    "rootDir": "./",
    "declaration": true,
    "incremental": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "include": [
    "src/**/*.ts",
    "node_modules/@aire-ux/typed-mxgraph/**/*.d.ts" //include the typings
  ],
  "exclude": ["node_modules"]

}

Getting Started

In the root folder there is an index.html file that contains links to all resources. You can view the documentation online on the Github pages branch. The key resources are the JavaScript user manual, the JavaScript examples and the JavaScript API specificiation.

Support

There is a mxgraph tag on Stack Overflow. Please ensure your questions adhere to the SO guidelines, otherwise it is likely to be closed.

FAQs

Last updated on 29 Nov 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc