mxGraph入门

const gulp = require('gulp');
const less = require('gulp-less');
const postcss = require('gulp-postcss');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('autoprefixer');
const replace = require('gulp-replace');
 
gulp.task('less', () => gulp.src('src/*.less')
  .pipe(less())
  .pipe(gulp.dest('lib')));

gulp.task('autoprefixer', () => gulp.src('src/*.css')
  .pipe(sourcemaps.init())
  .pipe(postcss([autoprefixer()]))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('./lib')));

// 旧代码
// gulp.task('replace', () => {
//   gulp.src('lib/*.js')
//     .pipe(replace(/\/(.+)\.less/, '/$1.css'))
//     .pipe(replace(/\/(.+)\.styl/, '/$1.css'))
//     .pipe(gulp.dest('lib'));
// });

// 新代码
gulp.task('replace', () => {
  return gulp.src('lib/*.js')
    .pipe(replace(/\/(.+)\.less/, '/$1.css'))
    .pipe(replace(/\/(.+)\.styl/, '/$1.css'))
    .pipe(gulp.dest('lib'));
});

// 旧的代码
// gulp.task('default', ['less', 'autoprefixer', 'replace']);


// 新的代码
gulp.task('default', gulp.series('less', 'autoprefixer', 'replace'));

// 整体移动，不改变节点连线的坐标，类似于改变观看位置。
// 鼠标拖拉，手机浏览器拖拉
graph.setPanning(true);

// 可能不支持部分包含web页面的控件

// 如果不支持添加下面这个
graph.panningHandler.useLeftButtonForPanning = false;
mxPanningHandler.prototype.isPanningTrigger = function(me) {
    var evt = me.getEvent();
    return true;
};

import mx from 'mxgraph';
const mxgraph = mx({
  mxImageBasePath: process.env.VUE_APP_BASE_URL+'/lib/mxGraph/src/images',
  mxBasePath: process.env.VUE_APP_BASE_URL+'/lib/mxGraph/src'
});

let mxStencilRegistry=mxgraph.mxStencilRegistry;
let mxStencil=mxgraph.mxStencil;
let mxConstants=mxgraph.mxConstants;
let mxUtils=mxgraph.mxUtils;

/**
 * 扩展mxStencilRegistry,加载模型
 */
mxStencilRegistry.packages = [];
// Extends the default stencil registry to add dynamic loading
mxStencilRegistry.getStencil = function(name)
{
    var result = mxStencilRegistry.stencils[name];
    if (result == null)
    {
        var basename = mxStencilRegistry.getBasenameForStencil(name);
        if (basename != null)
        {
            mxStencilRegistry.loadStencilSet(process.env.VUE_APP_BASE_URL+'/xml/stencils/' + basename + '.xml', null);
            result = mxStencilRegistry.stencils[name];
        }
    }

    return result;
};

mxStencilRegistry.getBasenameForStencil = function(name)
{
    var parts = name.split('.');
    var tmp = null;
    if (parts.length > 0 && parts[0] == 'mxgraph')
    {
        tmp = parts[1];

        for (var i = 2; i < parts.length - 1; i++)
        {
            tmp += '/' + parts[i];
        }
    }

    return tmp;
};

// Loads the given stencil set
mxStencilRegistry.loadStencilSet = function(stencilFile, postStencilLoad, force)
{
    force = (force != null) ? force : false;

    // Uses additional cache for detecting previous load attempts
    var installed = mxStencilRegistry.packages[stencilFile] != null;

    if (force || !installed)
    {
        mxStencilRegistry.packages[stencilFile] = 1;
        var req = mxUtils.load(stencilFile);
        mxStencilRegistry.parseStencilSet(req.getXml(), postStencilLoad, !installed);
    }
};

// Parses the given stencil set
mxStencilRegistry.parseStencilSet = function(xmlDocument, postStencilLoad, install)
{
    install = (install != null) ? install : true;
    var root = xmlDocument.documentElement;
    var shape = root.firstChild;
    var packageName = '';
    var name = root.getAttribute('name');

    if (name != null)
    {
        packageName = name + '.';
    }

    while (shape != null)
    {
        if (shape.nodeType == mxConstants.NODETYPE_ELEMENT)
        {
            name = shape.getAttribute('name');

            if (name != null)
            {
                var w = shape.getAttribute('w');
                var h = shape.getAttribute('h');

                w = (w == null) ? 80 : parseInt(w, 10);
                h = (h == null) ? 80 : parseInt(h, 10);

                packageName = packageName.toLowerCase();
                var stencilName = name.replace(/ /g,"_");

                if (install)
                {
                    mxStencilRegistry.addStencil(packageName + stencilName.toLowerCase(), new mxStencil(shape));
                }

                if (postStencilLoad != null)
                {
                    postStencilLoad(packageName, stencilName, name, w, h);
                }
            }
        }

        shape = shape.nextSibling;
    }
};
Object.keys(mxgraph).forEach((key)=>{
  window[key] = mxgraph[key]
});

export default mxgraph;