Smtflow

<script src="./js/smtflow.min-1.0.1.js"></script>

<link rel="stylesheet" href="./themes/flow.min.css">
<link rel="stylesheet" href="./themes/icons.css">

<div id="flow" style="height: 600px;margin: 20px;"></div>

let smt = $$('#flow').flow({
    // 标题；
    title: '流程图',
    // 是否可编辑； 默认 true
    //editable: true,
    // 是否显示节点标题； 默认 true
    //showNodeTitle: true,
    // 是否显示缩略图； 默认 false
    thumbnail: true,
    // 工作区比例； 默认1 大于1工作区将产生滚动条
    areaRatio: 1.5,
    // 是否显示 Footer； 默认 true
    //showFooter: false,
    // Footer 显示内容；
    footer: '北京XXXX信息技术有限公司',
    // 连线类型； line:直线；polyline:折线 默认 line
    lineType: 'polyline',
    // 言语类型； 默认 zh-cn 根据 language 目录下对应后缀名文件配置 可自定义语言
    // language: 'en',
    // 是否显示节点盒子； 默认true
	nodebox: true,
    // 左侧工具列表； icon 根据 themes 下icons.css 对应格式名称设置
    tools: [
        {title: '时间', icon: 'time'},
        {title: '查询', icon: 'search'},
        {title: 'Offer', icon: 'offer'},
        {title: '设置', icon: 'setting'},
        {title: '短信', icon: 'sms'},
        {title: '微信', icon: 'wechat'},
        // 分割线
        {type: 'separate'},
        {title: '拆分', icon: 'split'},
        {title: '合并', icon: 'merge'}
    ],
    // --------------- 触发事件 ---------------
    // 点击新增时触发；
    onClickNew: function() {
        return confirm('确定新建?');
        //return false; 返回false 不新建工作区
    },
    // 点击打开时触发；
    onClickOpen: function() {
        console.info('onClickOpen');
        //TODO
    },
    // 点击保存时触发； 参数 当前流程图Json数据
    onClickSave: function(data) {
        console.info('onClickSave')
        //TODO
    },
    // 删除节点时触发； 参数 当前节点id，当前节点类型,标题,节点值
    onRemoveNode: function(id, type, title, value) {
        console.info('onRemoveNode')
        //TODO
        //return false; 返回false 不删除节点
    },
    // 节点鼠标右键时点击设置触发； 参数 当前节点id，当前节点类型,标题,节点值
    onSettingNode: function(id, type, title, value) {
        console.info('onSettingNode')
        //TODO
    },
    // 双击节点时触发； 参数 当前节点id，当前节点类型,标题,节点值
    onDblclick: function(id, type, title, value) {
        console.info('onDblclick')
        //TODO
    },
    // 新增节点时触发；参数 当前节点类型
    onAddNode: function(type) {
        console.info('onAddNode')
        //TODO
    },
    // 增加连线时触发；参数 开始节点对象（id，type），结束节点对象（id，type）
    onAddLine: function(from, to) {
        console.info('onAddLine')
        //TODO
    },
    // 流程图加载完成时触发
    onLoadSuccess: function() {
        console.info('success');
        //TODO
    }
});

--------------- 方法 ---------------
// 设置流程图不可编辑
smt.flow('disable');

// 设置流程图可编辑
smt.flow('enable');

// 设置流程图标题
smt.flow('setTitle', '流程图');

// 设置连线类型  line:直线；polyline:折线
smt.flow('setLineType', 'line');

// 设置节点标题是否显示 true/false
smt.flow('setShowNodeTitle', true);

// 调用内部消息显示；参数 content：消息内容，time：显示时间 默认 2000 毫秒
smt.flow('setMessage', {content:"测试消息方法", time: 4000}); 

// 导入流程图数据
smt.flow('loadData', data);

// 根据id获取节点
let node = smt.flow('getNode', 'NL4C63325');

// 根据id获取连线
let node = smt.flow('getLine', 'LL4C6TX3Z');

// 根据id设置节点Value
smt.flow('setNodeValue', 'NL4C63325', {name: '张三', age: 18});

// 设置连线类型  line:直线；polyline:折线
smt.flow('setLineType', 'line');

// 点击新增时触发；
onClickNew: function() {
    return confirm('确定新建?');
    //return false; 返回false 不新建工作区
}

// 点击打开时触发；
onClickOpen: function() {
    //TODO: 打开数据列表 形式由开发者自定义；然后选择数据，通过 smt.flow('loadData', data); 实现数据导入。
}

onClickSave: function(data) {
    //TODO: 事件返回流程图数据，后续可由开发者进行数据存储
}

// 新增节点 type:节点类型
onAddNode: function(type) {
     //TODO
}

// 增加连线 from: 开始节点对象（id，type）to: 结束节点对象（id，type）
onAddLine: function(from, to) {
    //TODO
}

// 删除节点 id: 当前节点id type: 当前节点类型
onRemoveNode: function(id, type) {
    //TODO
}

{
    "id": "F1642153094692100",
    "title": "流程图",
    "lineType": "polyline",
    "editable": true,
    "showNodeTitle": true,
    "nodes": [{
            "id": "NL4C63325",
            "title": "开始",
            "x": 230.5,
            "y": 180.5,
            "type": "start",
            "value": null
        }, {
            "id": "NL4C6TWC6",
            "title": "结束",
            "x": 453.5,
            "y": 181.5,
            "type": "end",
            "value": {}
        }
    ],
    "lines": [{
            "id": "LL4C6TX3Z",
            "type": "polyline",
            "from": {
                "id": "NL4C63325",
                "dot": "r",
                "x": 276.5,
                "y": 203.5
            },
            "to": {
                "id": "NL4C6TWC6",
                "dot": "l",
                "x": 453.5,
                "y": 204.5
            }
        }
    ]
}