Guide To Start
Step 1: Use it (with traditional methods)
Firstly introduce the Css file at the beginning of the page, and introduce the central files of jquery and GooFlow at the end of the body.
<head>
<link rel="stylesheet" type="text/css" href="./dist/assets/GooFlow.min.css"/>
</head>
<body>
<div id="demo"></div>
……
<script type="text/javascript" src="./dist/GooFlow.js"></script>
<!-- Optional, a extension file of exporting the flowchart into a picture file. -- export.js -->
<script type="text/javascript" src="./dist/extends/export.js"></script>
<!-- Optional, a extension file of print the flowchart or save flowchart as a PDF file. -- print.js -->
<script type="text/javascript" src="./dist/extends/print.js"></script>
<script type="text/javascript" src="./main.js"></script>
</body>
Then call GooFlow methods in the business js file.
/** main.js **/
var options = {
toolBtns:["start round mix","end round","task","node","chat","state","plug","join","fork","complex mix"],
haveHead:true,
headLabel:true,
headBtns:["new","open","save","undo","redo","reload","print"],// define header's buttons when haveHead=true
haveTool:true,
haveDashed:true,
haveGroup:true,
useOperStack:true
};
var demo = GooFlow.init("#demo",options);
demo.setNodeRemarks(remark); //remarks is a title prompt definition for the left toolbar buttons
demo.loadData(jsondata); //jsondata is a json data for expressing the detail of flowcharts
Step 2: Use it (in AMD modular)
Take
RequireJsas an example, first add the following settings to the RequireJs in the repository's unified configuration file, you need to use the
require-css(css.min.js)plugin.
/** require.config.js **/
requirejs.config({
map: {
'*': {
'css': 'https://cdn.bootcss.com/require-css/0.1.10/css.min.js' // https://github.com/guybedford/require-css, RequireJs's plugin
}
},
paths: {
GooFlow: './dist/GooFlow',
'GooFlow.export': './dist/extends/export', // Optional, a extension file of exporting the flowchart into a picture file.
'GooFlow.print': './dist/extends/print', // Optional, a extension file of print the flowchart or save flowchart as a PDF file.
//// ……
},
//// ……
shim: {
GooFlow: {
deps:['css!./dist/assets/GooFlow.min.css']
}
},
});
In the html file that will asynchronously import the main.js entry business file, add this segment to the body's end;
<body>
<div id="demo"></div>
……
<script data-main="main.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="../assets/js/require.config.js"></script>
</body>
Then in the business js file, import packages and make initialization.
/** main.js **/
require(['GooFlow'], function ( GooFlow ) {
// code for init
var property = { …… };
var demo = GooFlow.init("#demo",options);
demo.setNodeRemarks(remark); //remarks is a title prompt definition for the left toolbar buttons
demo.loadData(jsondata); //jsondata is a json data for expressing the detail of flowcharts
});
If you want to use the functions provided by other extension packages, please be sure to load the corresponding extension packages after loading GooFlow.js to ensure that the corresponding function is enable.
/** main.js using extension packages **/
require(['GooFlow'], function ( GooFlow ) {
require(['GooFlow.export','GooFlow.print'], function (){
// code for init
var options = { …… };
var demo = GooFlow.init("#demo",options);
demo.setNodeRemarks(remark); //remarks is a title prompt definition for the left toolbar buttons
demo.setHeadToolsRemarks(headBtns); //headBtns is a title prompt definition for the header bar's buttons
demo.loadData(jsondata); //jsondata is a json data for expressing the detail of flowcharts
demo.onBtnSaveClick=function(){
demo.exportDiagram('myFile');//the function of exporting a png file
}
demo.onPrintClick=function(){
demo.print();//the function of printing or save flowchart as a PDF file
}
});
});
