Render function as mentioned in issue #146, only works in browser context
Updated build scripts New way for bundling content in dist, tobe tested, currently to be considered beta
This commit is contained in:
knsv
parent
05f3982632
commit
b4a96c9b21
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
@import "/bower_components/lesshat/build/lesshat";
|
||||
@import "./bower_components/lesshat/build/lesshat";
|
||||
@import (reference) "settings";
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
var gulp = require('gulp');
|
||||
var browserify = require('gulp-browserify');
|
||||
var shell = require('gulp-shell');
|
||||
|
||||
|
||||
var concat = require('gulp-concat');
|
||||
var uglify = require('gulp-uglify');
|
||||
var extReplace = require('gulp-ext-replace');
|
||||
var rename = require('gulp-rename');
|
||||
var istanbul = require('gulp-istanbul');
|
||||
var insert = require('gulp-insert');
|
||||
|
||||
/**
|
||||
* dist targets
|
||||
* * dist - creates everything
|
||||
* * mermaidAPI
|
||||
* * mermaidAPI.slim
|
||||
* * legacy - uses old build creates mermaid.full and mermaid.slim
|
||||
* * mermaid - new build creates mermaid.js and mermaid.min.js, mermaid.no-d3.js mermaid.no-d3.min.js
|
||||
*/
|
||||
|
||||
// Basic usage
|
||||
gulp.task('slimDist', function() {
|
||||
// Single entry point to browserify
|
||||
return gulp.src('src/main.js')
|
||||
.pipe(browserify())
|
||||
/*.pipe(browserify({standalone: 'mermaid'}))
|
||||
.on('prebundle', function(bundle) {
|
||||
// Keep these external for the slim version.
|
||||
slim_ext_libs.forEach(function(lib) {
|
||||
bundle.external(lib);
|
||||
});
|
||||
})*/
|
||||
.pipe(rename('mermaid-legacy.slim.js'))
|
||||
.pipe(insert.prepend('(function () { var define = undefined; '))
|
||||
.pipe(insert.append(' })();'))
|
||||
.pipe(gulp.dest('./dist/'))
|
||||
.pipe(uglify())
|
||||
.pipe(extReplace('.min.js'))
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
});
|
||||
|
||||
// Basic usage
|
||||
gulp.task('fullDist', ['slimDist'], function() {
|
||||
// Single entry point to browserify
|
||||
gulp.src(['node_modules/d3/d3.min.js','node_modules/dagre-d3/dist/dagre-d3.min.js','dist/mermaid.slim.js'])
|
||||
.pipe(concat('mermaid-legacy.full.js'))
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
return gulp.src(['node_modules/d3/d3.min.js','node_modules/dagre-d3/dist/dagre-d3.min.js','dist/mermaid.slim.min.js'])
|
||||
.pipe(concat('mermaid.full.min.js'))
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
});
|
||||
|
||||
|
||||
// Basic usage
|
||||
//gulp.task('api', shell.task([
|
||||
// 'browserify src/mermaid.js | uglify > dist/mermaid.min.js',
|
||||
// 'browserify src/mermaid.js | uglify > dist/mermaid.min.js',
|
||||
// 'browserify src/mermaidAPI.js -o dist/mermaidAPI.js'
|
||||
// //'jison src/diagrams/sequenceDiagram/parser/sequenceDiagram.jison -o src/diagrams/sequenceDiagram/parser/sequenceDiagram.js'
|
||||
//]));
|
||||
|
||||
// Basic usage
|
||||
gulp.task('mermaid',['mermaidAPI','mermaidAPI.slim'],function() {
|
||||
// Single entry point to browserify
|
||||
var EXTERNALS = ['d3'];
|
||||
|
||||
gulp.src('src/mermaid.js')
|
||||
.pipe(browserify({
|
||||
external: ['d3'],
|
||||
entry:'src/mermaid.js'
|
||||
}))
|
||||
.pipe(rename('mermaid.slim.js'))
|
||||
// .on('prebundle', function(bundle){
|
||||
// EXTERNALS.forEach(function(external){
|
||||
// if(external.expose){
|
||||
// bundle.require(external.require, {expose: external.expose} )
|
||||
// }
|
||||
// else{
|
||||
// bundle.require(external.require)
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
.pipe(gulp.dest('./dist/'))
|
||||
.pipe(uglify())
|
||||
.pipe(extReplace('.min.js'))
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
|
||||
return gulp.src('src/mermaid.js')
|
||||
.pipe(browserify({
|
||||
external: ['d3'],
|
||||
entry:'src/mermaid.js'
|
||||
}))
|
||||
.pipe(rename('mermaid.js'))
|
||||
.pipe(gulp.dest('./dist/'))
|
||||
.pipe(uglify())
|
||||
.pipe(extReplace('.min.js'))
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
});
|
||||
// Basic usage
|
||||
gulp.task('mermaidAPI',function() {
|
||||
return gulp.src('src/mermaidAPI.js')
|
||||
.pipe(browserify({
|
||||
}))
|
||||
.pipe(gulp.dest('./dist/'))
|
||||
//.pipe(uglify())
|
||||
//.pipe(extReplace('.min.js'))
|
||||
//.pipe(gulp.dest('./dist/'));
|
||||
});
|
||||
|
||||
// Basic usage
|
||||
gulp.task('mermaidAPI.slim',function() {
|
||||
return gulp.src('src/mermaidAPI.js')
|
||||
.pipe(browserify({
|
||||
debug:true,
|
||||
external: ['d3']
|
||||
}))
|
||||
.pipe(rename('mermaidAPI.slim.js'))
|
||||
.pipe(gulp.dest('./dist/'))
|
||||
.pipe(uglify())
|
||||
.pipe(extReplace('.min.js'))
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
});
|
||||
|
||||
// Build editor
|
||||
gulp.task('editor', function() {
|
||||
/*gulp.src(['src/editor.js'])
|
||||
.pipe(browserify())
|
||||
.pipe(concat('main.js'))
|
||||
.pipe(gulp.dest('./editor/'));*/
|
||||
return gulp.src(['node_modules/d3/d3.min.js','node_modules/dagre-d3/dist/dagre-d3.min.js','dist/mermaid.slim.js','src/editor.js'])
|
||||
.pipe(concat('build.js'))
|
||||
.pipe(gulp.dest('./editor/'));
|
||||
});
|
||||
|
||||
//gulp.task('dist', ['slimDist', 'fullDist','jasmine']);
|
||||
gulp.task('legacy', ['slimDist', 'fullDist']);
|
||||
|
||||
gulp.task('dist', ['mermaidAPI', 'mermaidAPI.slim','legacy','mermaid']);
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
var gulp = require('gulp');
|
||||
var shell = require('gulp-shell');
|
||||
var jison = require('gulp-jison');
|
||||
|
||||
gulp.task('jison', function() {
|
||||
return gulp.src('./src/*.jison')
|
||||
.pipe(jison({ moduleType: 'commonjs' }))
|
||||
.pipe(gulp.dest('./src/parser'));
|
||||
});
|
||||
|
||||
gulp.task('jison_legacy', shell.task([
|
||||
'jison src/diagrams/flowchart/parser/flow.jison -o src/diagrams/flowchart/parser/flow.js',
|
||||
'jison src/diagrams/flowchart/parser/dot.jison -o src/diagrams/flowchart/parser/dot.js',
|
||||
'jison src/diagrams/sequenceDiagram/parser/sequenceDiagram.jison -o src/diagrams/sequenceDiagram/parser/sequenceDiagram.js',
|
||||
'jison src/diagrams/example/parser/example.jison -o src/diagrams/example/parser/example.js',
|
||||
'jison src/diagrams/gantt/parser/gantt.jison -o src/diagrams/gantt/parser/gantt.js',
|
||||
//'jison src/diagrams/sequenceDiagram/parser/sequenceDiagram.jison -o src/diagrams/sequenceDiagram/parser/sequenceDiagram.js'
|
||||
]));
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
var gulp = require('gulp');
|
||||
var path = require('path');
|
||||
var less = require('gulp-less');
|
||||
var rename = require('gulp-rename');
|
||||
var concat = require('gulp-concat');
|
||||
|
||||
gulp.task('editor-less', function () {
|
||||
gulp.src(['./editor/css/editor.less'])
|
||||
.pipe(less({
|
||||
generateSourceMap: false, // default true
|
||||
paths: [ path.join(__dirname, 'less', 'includes') ]
|
||||
}))
|
||||
.pipe(concat('editor.css'))
|
||||
.pipe(gulp.dest('./editor/css/'));
|
||||
});
|
||||
|
||||
gulp.task('mermaid-less', function () {
|
||||
gulp.src(['./src/less/*/mermaid.less'])
|
||||
.pipe(less({
|
||||
generateSourceMap: false, // default true
|
||||
paths: [ path.join(__dirname, 'less', 'includes') ]
|
||||
}))
|
||||
.pipe(rename(function (path) {
|
||||
if(path.dirname === 'default'){
|
||||
path.basename = 'mermaid';
|
||||
}else{
|
||||
path.basename = 'mermaid.' + path.dirname;
|
||||
}
|
||||
path.dirname = '';
|
||||
}))
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
});
|
||||
|
||||
|
||||
gulp.task('less',['mermaid-less', 'editor-less']);
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
var gulp = require('gulp');
|
||||
|
||||
gulp.task('bump', function(){
|
||||
gulp.src('./bw.json')
|
||||
.pipe(bump({key: "version"}))
|
||||
.pipe(gulp.dest('./'));
|
||||
});
|
||||
|
||||
// Assuming there's "version: 1.2.3" in package.json,
|
||||
// tag the last commit as "v1.2.3"//
|
||||
gulp.task('tag', function() {
|
||||
return gulp.src(['./package.json']).pipe(tag_version());
|
||||
});
|
||||
|
||||
/**
|
||||
* Bumping version number and tagging the repository with it.
|
||||
* Please read http://semver.org/
|
||||
*
|
||||
* You can use the commands
|
||||
*
|
||||
* gulp patch # makes v0.1.0 → v0.1.1
|
||||
* gulp feature # makes v0.1.1 → v0.2.0
|
||||
* gulp release # makes v0.2.1 → v1.0.0
|
||||
*
|
||||
* To bump the version numbers accordingly after you did a patch,
|
||||
* introduced a feature or made a backwards-incompatible release.
|
||||
*/
|
||||
|
||||
function inc(importance) {
|
||||
// get all the files to bump version in
|
||||
return gulp.src(['./package.json', './bower.json'])
|
||||
// bump the version number in those files
|
||||
.pipe(bump({type: importance}))
|
||||
// save it back to filesystem
|
||||
.pipe(gulp.dest('./'));
|
||||
// commit the changed version number
|
||||
//.pipe(git.commit('bumps package version'))
|
||||
|
||||
// read only one file to get the version number
|
||||
//.pipe(filter('package.json'))
|
||||
// **tag it in the repository**
|
||||
//.pipe(tag_version());
|
||||
}
|
||||
|
||||
gulp.task('patch', function() { return inc('patch'); })
|
||||
gulp.task('feature', function() { return inc('minor'); })
|
||||
gulp.task('release', function() { return inc('major'); })
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
var gulp = require('gulp');
|
||||
var jasmine = require('gulp-jasmine');
|
||||
var gulp = require('gulp');
|
||||
var browserify = require('gulp-browserify');
|
||||
var shell = require('gulp-shell');
|
||||
var jison = require('gulp-jison');
|
||||
|
||||
var concat = require('gulp-concat');
|
||||
var uglify = require('gulp-uglify');
|
||||
var extReplace = require('gulp-ext-replace');
|
||||
var rename = require('gulp-rename');
|
||||
var istanbul = require('gulp-istanbul');
|
||||
var insert = require('gulp-insert');
|
||||
var jshint = require('gulp-jshint');
|
||||
var stylish = require('jshint-stylish');
|
||||
|
||||
// Using gulp-jshint and jshint-stylish
|
||||
gulp.task('lint', function() {
|
||||
return gulp.src(['./src/**/*.js', '!**/parser/*.js'])
|
||||
.pipe(jshint())
|
||||
.pipe(jshint.reporter(stylish));
|
||||
});
|
||||
|
||||
gulp.task('test',['coverage','tape','jasmine']);
|
||||
|
||||
gulp.task('jasmine',['jison','lint'], function () {
|
||||
return gulp.src(['src/**/*.spec.js'])
|
||||
.pipe(jasmine({includeStackTrace:true}));
|
||||
});
|
||||
|
||||
gulp.task('tape', shell.task(['./node_modules/.bin/tape ./test/cli_test-*.js']));
|
||||
|
||||
gulp.task('coverage', function (cb) {
|
||||
gulp.src(['src/**/*.js', '!src/**/*.spec.js'])
|
||||
.pipe(istanbul()) // Covering files
|
||||
.on('finish', function () {
|
||||
gulp.src(['src/**/*.spec.js'])
|
||||
.pipe(jasmine())
|
||||
.pipe(istanbul.writeReports()) // Creating the reports after tests runned
|
||||
.on('end', cb);
|
||||
});
|
||||
});
|
||||
187
gulpfile.js
187
gulpfile.js
|
|
@ -1,7 +1,6 @@
|
|||
var gulp = require('gulp');
|
||||
var path = require('path');
|
||||
var jison = require('gulp-jison');
|
||||
var less = require('gulp-less');
|
||||
|
||||
|
||||
var shell = require('gulp-shell');
|
||||
var concat = require('gulp-concat');
|
||||
var uglify = require('gulp-uglify');
|
||||
|
|
@ -10,196 +9,32 @@ var rename = require('gulp-rename');
|
|||
var istanbul = require('gulp-istanbul');
|
||||
var bump = require('gulp-bump');
|
||||
var tag_version = require('gulp-tag-version');
|
||||
var jshint = require('gulp-jshint');
|
||||
var stylish = require('jshint-stylish');
|
||||
|
||||
var insert = require('gulp-insert');
|
||||
|
||||
var requireDir = require('require-dir');
|
||||
var tasks = requireDir('./gulp/tasks');
|
||||
|
||||
|
||||
var paths = {
|
||||
scripts: ['./src/**/*.js', '!**/parser/*.js']
|
||||
};
|
||||
|
||||
gulp.task('jison2', function() {
|
||||
return gulp.src('./src/*.jison')
|
||||
.pipe(jison({ moduleType: 'commonjs' }))
|
||||
.pipe(gulp.dest('./src/parser'));
|
||||
});
|
||||
|
||||
gulp.task('jison', shell.task([
|
||||
'jison src/diagrams/flowchart/parser/flow.jison -o src/diagrams/flowchart/parser/flow.js',
|
||||
'jison src/diagrams/flowchart/parser/dot.jison -o src/diagrams/flowchart/parser/dot.js',
|
||||
'jison src/diagrams/sequenceDiagram/parser/sequenceDiagram.jison -o src/diagrams/sequenceDiagram/parser/sequenceDiagram.js',
|
||||
'jison src/diagrams/example/parser/example.jison -o src/diagrams/example/parser/example.js',
|
||||
'jison src/diagrams/gantt/parser/gantt.jison -o src/diagrams/gantt/parser/gantt.js',
|
||||
//'jison src/diagrams/sequenceDiagram/parser/sequenceDiagram.jison -o src/diagrams/sequenceDiagram/parser/sequenceDiagram.js'
|
||||
]));
|
||||
|
||||
gulp.task('jison2', function() {
|
||||
return gulp.src('./src/diagrams/flowchart/**/*.jison')
|
||||
.pipe(jison({ }))
|
||||
.pipe(gulp.dest('./src/diagrams/flowchart'));
|
||||
});
|
||||
|
||||
gulp.task('dist', ['slimDist', 'fullDist','jasmine']);
|
||||
gulp.task('rdist', ['slimDist', 'fullDist']);
|
||||
|
||||
var jasmine = require('gulp-jasmine');
|
||||
|
||||
gulp.task('jasmine',['jison','lint'], function () {
|
||||
return gulp.src(['src/**/*.spec.js'])
|
||||
.pipe(jasmine({includeStackTrace:true}));
|
||||
});
|
||||
|
||||
gulp.task('tape', shell.task(['./node_modules/.bin/tape ./test/cli_test-*.js']));
|
||||
|
||||
gulp.task('coverage', function (cb) {
|
||||
gulp.src(['src/**/*.js', '!src/**/*.spec.js'])
|
||||
.pipe(istanbul()) // Covering files
|
||||
.on('finish', function () {
|
||||
gulp.src(['src/**/*.spec.js'])
|
||||
.pipe(jasmine())
|
||||
.pipe(istanbul.writeReports()) // Creating the reports after tests runned
|
||||
.on('end', cb);
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('less', function () {
|
||||
gulp.src(['./editor/css/editor.less'])
|
||||
.pipe(less({
|
||||
generateSourceMap: false, // default true
|
||||
paths: [ path.join(__dirname, 'less', 'includes') ]
|
||||
}))
|
||||
.pipe(concat('editor.css'))
|
||||
.pipe(gulp.dest('./editor/css/'));
|
||||
});
|
||||
|
||||
var browserify = require('gulp-browserify');
|
||||
|
||||
//var slim_ext_libs = [
|
||||
// 'dagre-d3',
|
||||
// 'd3'
|
||||
//];
|
||||
|
||||
// Basic usage
|
||||
gulp.task('slimDist', function() {
|
||||
// Single entry point to browserify
|
||||
return gulp.src('src/main.js')
|
||||
.pipe(browserify())
|
||||
/*.pipe(browserify({standalone: 'mermaid'}))
|
||||
.on('prebundle', function(bundle) {
|
||||
// Keep these external for the slim version.
|
||||
slim_ext_libs.forEach(function(lib) {
|
||||
bundle.external(lib);
|
||||
});
|
||||
})*/
|
||||
.pipe(rename('mermaid.slim.js'))
|
||||
.pipe(insert.prepend('(function () { var define = undefined; '))
|
||||
.pipe(insert.append(' })();'))
|
||||
.pipe(gulp.dest('./dist/'))
|
||||
.pipe(uglify())
|
||||
.pipe(extReplace('.min.js'))
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
});
|
||||
|
||||
|
||||
// Build editor
|
||||
gulp.task('editor', function() {
|
||||
/*gulp.src(['src/editor.js'])
|
||||
.pipe(browserify())
|
||||
.pipe(concat('main.js'))
|
||||
.pipe(gulp.dest('./editor/'));*/
|
||||
return gulp.src(['node_modules/d3/d3.min.js','node_modules/dagre-d3/dist/dagre-d3.min.js','dist/mermaid.slim.js','src/editor.js'])
|
||||
.pipe(concat('build.js'))
|
||||
.pipe(gulp.dest('./editor/'));
|
||||
});
|
||||
|
||||
|
||||
// Basic usage
|
||||
gulp.task('fullDist', ['slimDist'], function() {
|
||||
// Single entry point to browserify
|
||||
gulp.src(['node_modules/d3/d3.min.js','node_modules/dagre-d3/dist/dagre-d3.min.js','dist/mermaid.slim.js'])
|
||||
.pipe(concat('mermaid.full.js'))
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
return gulp.src(['node_modules/d3/d3.min.js','node_modules/dagre-d3/dist/dagre-d3.min.js','dist/mermaid.slim.min.js'])
|
||||
.pipe(concat('mermaid.full.min.js'))
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
});
|
||||
|
||||
// Basic usage
|
||||
gulp.task('npmDist', ['slimDist'], function() {
|
||||
// Single entry point to browserify
|
||||
return gulp.src('src/main.js')
|
||||
.pipe(browserify())
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
});
|
||||
|
||||
gulp.task('bump', function(){
|
||||
gulp.src('./bw.json')
|
||||
.pipe(bump({key: "version"}))
|
||||
.pipe(gulp.dest('./'));
|
||||
});
|
||||
|
||||
// Assuming there's "version: 1.2.3" in package.json,
|
||||
// tag the last commit as "v1.2.3"//
|
||||
gulp.task('tag', function() {
|
||||
return gulp.src(['./package.json']).pipe(tag_version());
|
||||
});
|
||||
|
||||
/**
|
||||
* Bumping version number and tagging the repository with it.
|
||||
* Please read http://semver.org/
|
||||
*
|
||||
* You can use the commands
|
||||
*
|
||||
* gulp patch # makes v0.1.0 → v0.1.1
|
||||
* gulp feature # makes v0.1.1 → v0.2.0
|
||||
* gulp release # makes v0.2.1 → v1.0.0
|
||||
*
|
||||
* To bump the version numbers accordingly after you did a patch,
|
||||
* introduced a feature or made a backwards-incompatible release.
|
||||
*/
|
||||
|
||||
function inc(importance) {
|
||||
// get all the files to bump version in
|
||||
return gulp.src(['./package.json', './bower.json'])
|
||||
// bump the version number in those files
|
||||
.pipe(bump({type: importance}))
|
||||
// save it back to filesystem
|
||||
.pipe(gulp.dest('./'));
|
||||
// commit the changed version number
|
||||
//.pipe(git.commit('bumps package version'))
|
||||
|
||||
// read only one file to get the version number
|
||||
//.pipe(filter('package.json'))
|
||||
// **tag it in the repository**
|
||||
//.pipe(tag_version());
|
||||
}
|
||||
|
||||
gulp.task('patch', function() { return inc('patch'); })
|
||||
gulp.task('feature', function() { return inc('minor'); })
|
||||
gulp.task('release', function() { return inc('major'); })
|
||||
|
||||
// Using gulp-jshint and jshint-stylish
|
||||
gulp.task('lint', function() {
|
||||
return gulp.src(paths.scripts)
|
||||
.pipe(jshint())
|
||||
.pipe(jshint.reporter(stylish));
|
||||
});
|
||||
|
||||
gulp.task('test',['coverage','tape']);
|
||||
|
||||
gulp.task('mermaid-less', function () {
|
||||
gulp.src(['./src/less/*/mermaid.less'])
|
||||
.pipe(less({
|
||||
generateSourceMap: false, // default true
|
||||
paths: [ path.join(__dirname, 'less', 'includes') ]
|
||||
}))
|
||||
.pipe(rename(function (path) {
|
||||
if(path.dirname === 'default'){
|
||||
path.basename = 'mermaid';
|
||||
}else{
|
||||
path.basename = 'mermaid.' + path.dirname;
|
||||
}
|
||||
path.dirname = '';
|
||||
}))
|
||||
.pipe(gulp.dest('./dist/'));
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@
|
|||
"path": "^0.4.9",
|
||||
"phantomjs": "^1.9.12",
|
||||
"proxyquire": "^1.3.1",
|
||||
"require-dir": "^0.3.0",
|
||||
"rewire": "^2.1.3",
|
||||
"rimraf": "^2.2.8",
|
||||
"tape": "^3.0.3"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
var db = require('./exampleDb');
|
||||
var exampleParser = require('./parser/example.js');
|
||||
|
||||
var d3 = require('../../d3');
|
||||
|
||||
/**
|
||||
* Draws a an info picture in the tag with id: id based on the graph definition in text.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* global window */
|
||||
|
||||
var d3;
|
||||
/*var d3;
|
||||
|
||||
if (require) {
|
||||
try {
|
||||
|
|
@ -12,4 +12,4 @@ if (!d3) {
|
|||
d3 = window.d3;
|
||||
}
|
||||
|
||||
module.exports = d3;
|
||||
module.exports = d3;*/
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
/* global window */
|
||||
|
||||
var dagreD3;
|
||||
|
||||
//console.log('setting up dagre-d3');
|
||||
if (require) {
|
||||
try {
|
||||
dagreD3 = require("dagre-d3");
|
||||
} catch (e) {}
|
||||
//console.log('Got it (dagre-d3)');
|
||||
} catch (e) {console.log('Could not load dagre-d3');}
|
||||
}
|
||||
|
||||
if (!dagreD3) {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
var graph = require('./graphDb');
|
||||
var flow = require('./parser/flow');
|
||||
var dot = require('./parser/dot');
|
||||
var d3 = require('../../d3');
|
||||
var dagreD3 = require('./dagre-d3');
|
||||
var d3 = require('./d3');
|
||||
var conf = {
|
||||
};
|
||||
module.exports.setConf = function(cnf){
|
||||
|
|
@ -418,10 +418,14 @@ exports.draw = function (text, id,isDot) {
|
|||
//svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
|
||||
svg.attr("viewBox", '0 0 ' + (g.graph().width+20) + ' ' + (g.graph().height+20));
|
||||
|
||||
// Index nodes
|
||||
graph.indexNodes('sunGraph'+i);
|
||||
|
||||
setTimeout(function(){
|
||||
var i = 0;
|
||||
//subGraphs.forEach(function(subG) {
|
||||
for(i=0;i<subGraphs.length;i++){
|
||||
var pos = graph.getDepthFirstPos(i);
|
||||
subG = subGraphs[i];
|
||||
|
||||
var clusterRects = document.querySelectorAll('#' + id + ' .clusters rect');
|
||||
|
|
@ -440,15 +444,20 @@ exports.draw = function (text, id,isDot) {
|
|||
te.attr('stroke', 'none');
|
||||
te.attr('id', id + 'Text');
|
||||
te.style('text-anchor', 'middle');
|
||||
if(typeof subGraphs[subGraphs.length-i-1] === 'undefined'){
|
||||
|
||||
if(typeof subGraphs[graph.getDepthFirstPos(i)] === 'undefined'){
|
||||
te.text('Undef');
|
||||
}else{
|
||||
te.text(subGraphs[subGraphs.length-i-1].title);
|
||||
//te.text(subGraphs[subGraphs.length-i-1].title);
|
||||
te.text(subGraphs[pos].title);
|
||||
|
||||
console.log('Setting subg - '+i+' to title '+subGraphs[pos].title);
|
||||
}
|
||||
}
|
||||
}
|
||||
// i = i + 1;
|
||||
//});
|
||||
},20);
|
||||
//console.log('GTPOD:'+graph.getDepthFirstPos('subGraph0'));
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -241,11 +241,83 @@ exports.addSubGraph = function (list, title) {
|
|||
|
||||
|
||||
var subGraph = {id:'subGraph'+subCount, nodes:nodeList,title:title};
|
||||
|
||||
//console.log('subGraph:' + subGraph.title + subGraph.id);
|
||||
//console.log(subGraph.nodes);
|
||||
subGraphs.push(subGraph);
|
||||
subCount = subCount + 1;
|
||||
return subGraph.id;
|
||||
};
|
||||
|
||||
var getPosForId = function(id){
|
||||
var i;
|
||||
for(i=0;i<subGraphs.length;i++){
|
||||
if(subGraphs[i].id===id){
|
||||
//console.log('Found pos for ',id,' ',i);
|
||||
return i;
|
||||
}
|
||||
}
|
||||
//console.log('No pos found for ',id,' ',i);
|
||||
return -1;
|
||||
};
|
||||
var secCount = -1;
|
||||
var posCrossRef = [];
|
||||
var indexNodes = function (id, pos) {
|
||||
var nodes = subGraphs[pos].nodes;
|
||||
secCount = secCount + 1;
|
||||
if(secCount>2000){
|
||||
return;
|
||||
|
||||
}
|
||||
//var nPos = getPosForId(subGraphs[pos].id);
|
||||
posCrossRef[secCount]=pos;
|
||||
console.log('Setting ',' ',secCount,' to ',pos);
|
||||
// Check if match
|
||||
if(subGraphs[pos].id === id){
|
||||
return {
|
||||
result:true,
|
||||
count:0
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
var count = 0;
|
||||
var posCount = 1;
|
||||
while(count<nodes.length){
|
||||
var childPos = getPosForId(nodes[count]);
|
||||
// Ignore regular nodes (pos will be -1)
|
||||
if(childPos>=0){
|
||||
var res = indexNodes(id,childPos);
|
||||
if(res.result){
|
||||
return {
|
||||
result:true,
|
||||
count:posCount+res.count
|
||||
};
|
||||
}else{
|
||||
posCount = posCount + res.count;
|
||||
}
|
||||
}
|
||||
count = count +1;
|
||||
}
|
||||
|
||||
return {
|
||||
result:false,
|
||||
count:posCount
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
exports.getDepthFirstPos = function (pos) {
|
||||
return posCrossRef[pos];
|
||||
};
|
||||
exports.indexNodes = function (id) {
|
||||
secCount = -1;
|
||||
if(subGraphs.length>0){
|
||||
indexNodes('none',subGraphs.length-1,0);
|
||||
}
|
||||
};
|
||||
|
||||
exports.getSubGraphs = function (list) {
|
||||
return subGraphs;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* global window */
|
||||
|
||||
var d3;
|
||||
/*var d3;
|
||||
|
||||
if (require) {
|
||||
try {
|
||||
|
|
@ -12,4 +12,4 @@ if (!d3) {
|
|||
d3 = window.d3;
|
||||
}
|
||||
|
||||
module.exports = d3;
|
||||
module.exports = d3;*/
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
var gantt = require('./parser/gantt').parser;
|
||||
gantt.yy = require('./ganttDb');
|
||||
var d3 = require('./d3');
|
||||
var d3 = require('../../d3');
|
||||
var moment = require('moment');
|
||||
|
||||
|
||||
var daysInChart;
|
||||
var conf = {
|
||||
titleTopMargin: 25,
|
||||
|
|
@ -41,8 +42,6 @@ module.exports.draw = function (text, id) {
|
|||
elem.setAttribute('height', h);
|
||||
var svg = d3.select('#' + id);
|
||||
|
||||
// http://codepen.io/anon/pen/azLvWR
|
||||
|
||||
|
||||
var dateFormat = d3.time.format("%Y-%m-%d");
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* global window */
|
||||
/* global window
|
||||
|
||||
var d3;
|
||||
|
||||
|
|
@ -12,4 +12,4 @@ if (!d3) {
|
|||
d3 = window.d3;
|
||||
}
|
||||
|
||||
module.exports = d3;
|
||||
module.exports = d3;*/
|
||||
|
|
|
|||
|
|
@ -3,14 +3,17 @@
|
|||
*/
|
||||
var proxyquire = require('proxyquire');
|
||||
|
||||
|
||||
var sq = require('./parser/sequenceDiagram').parser;
|
||||
var newD3;
|
||||
|
||||
var d3 = {
|
||||
select:function(){
|
||||
return new newD3();
|
||||
}
|
||||
};
|
||||
var sq = require('./parser/sequenceDiagram').parser;
|
||||
var sd = proxyquire('./sequenceRenderer', { './d3': d3 });
|
||||
var sd = proxyquire('./sequenceRenderer', { '../../d3': d3 });
|
||||
|
||||
var str;
|
||||
describe('when parsing a sequenceDiagram',function() {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
var sq = require('./parser/sequenceDiagram').parser;
|
||||
sq.yy = require('./sequenceDb');
|
||||
var svgDraw = require('./svgDraw');
|
||||
var d3 = require('./d3');
|
||||
var d3 = require('../../d3');
|
||||
var conf = {
|
||||
|
||||
diagramMarginX:50,
|
||||
|
|
@ -30,6 +30,7 @@ var conf = {
|
|||
bottomMarginAdj:1
|
||||
};
|
||||
|
||||
//var bb = getBBox("path");
|
||||
exports.bounds = {
|
||||
data:{
|
||||
startx:undefined,
|
||||
|
|
@ -173,7 +174,17 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
|
|||
.attr("class", "messageText")
|
||||
.text(msg.message);
|
||||
|
||||
var textWidth = textElem[0][0].getBBox().width;
|
||||
var textWidth;
|
||||
|
||||
if(typeof textElem[0][0].getBBox !== 'undefined'){
|
||||
textWidth = textElem[0][0].getBBox().width;
|
||||
}
|
||||
else{
|
||||
console.log(textElem[0][0].getBoundingClientRect());
|
||||
//textWidth = getBBox(textElem).width; //.getComputedTextLength()
|
||||
textWidth = textElem[0][0].getBoundingClientRect();
|
||||
//textWidth = textElem[0][0].getComputedTextLength();
|
||||
}
|
||||
|
||||
var line;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
.mermaid .label { color:#333}
|
||||
.mermaid .label {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
color:#333
|
||||
}
|
||||
|
||||
.node rect, .node circle, .node polygon {
|
||||
fill: @mainBkg;
|
||||
|
|
@ -13,7 +16,7 @@
|
|||
}
|
||||
.cluster rect{
|
||||
fill: @secondBkg;
|
||||
rx:40;
|
||||
rx:4;
|
||||
stroke: @clusterBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
|
|
|||
139
src/main.js
139
src/main.js
|
|
@ -14,7 +14,7 @@ var infoDb = require('./diagrams/example/exampleDb');
|
|||
var gantt = require('./diagrams/gantt/ganttRenderer');
|
||||
var ganttParser = require('./diagrams/gantt/parser/gantt');
|
||||
var ganttDb = require('./diagrams/gantt/ganttDb');
|
||||
|
||||
var d3 = require('./d3');
|
||||
var nextId = 0;
|
||||
|
||||
/**
|
||||
|
|
@ -101,6 +101,8 @@ var init = function () {
|
|||
: nodes;
|
||||
|
||||
var i;
|
||||
|
||||
console.log('Found ',nodes.length,' nodes');
|
||||
for (i = 0; i < nodes.length; i++) {
|
||||
var element = nodes[i];
|
||||
|
||||
|
|
@ -184,6 +186,133 @@ var equals = function (val, variable){
|
|||
}
|
||||
};
|
||||
|
||||
var render = function(id, txt,cb){
|
||||
// var element = doc.createElement('svg');
|
||||
// element.setAttribute('id',id);
|
||||
// element.setAttribute('width','100%');
|
||||
// element.setAttribute('xmlns','http://www.w3.org/2000/svg');
|
||||
// element.innerHTML = '<g />';
|
||||
|
||||
//var element = doc.createElement('div');
|
||||
//element.setAttribute('id','d'+id);
|
||||
//
|
||||
//element.innerHTML = '<svg id="' + id + '" width="100%" xmlns="http://www.w3.org/2000/svg">' +
|
||||
// '<g />' +
|
||||
// '</svg>';
|
||||
//document.body.appendChild(element);
|
||||
d3.select('body').append('div')
|
||||
.attr('id', 'd'+id)
|
||||
.append('svg')
|
||||
.attr('id', id)
|
||||
.attr('width','100%')
|
||||
.attr('xmlns','http://www.w3.org/2000/svg')
|
||||
.append('g');
|
||||
|
||||
|
||||
|
||||
console.log(d3.select('#d'+id).node().innerHTML);
|
||||
var element = d3.select('#d'+id).node();
|
||||
var graphType = utils.detectType(txt);
|
||||
var classes = {};
|
||||
switch(graphType){
|
||||
case 'graph':
|
||||
classes = flowRenderer.getClasses(txt, false);
|
||||
|
||||
if(typeof mermaid.flowchartConfig === 'object'){
|
||||
flowRenderer.setConf(mermaid.flowchartConfig);
|
||||
}
|
||||
flowRenderer.draw(txt, id, false);
|
||||
utils.cloneCssStyles(element.firstChild, classes);
|
||||
graph.bindFunctions();
|
||||
break;
|
||||
case 'dotGraph':
|
||||
classes = flowRenderer.getClasses(txt, true);
|
||||
flowRenderer.draw(txt, id, true);
|
||||
utils.cloneCssStyles(element.firstChild, classes);
|
||||
break;
|
||||
case 'sequenceDiagram':
|
||||
if(typeof mermaid.sequenceConfig === 'object'){
|
||||
seq.setConf(mermaid.sequenceConfig);
|
||||
}
|
||||
seq.draw(txt,id);
|
||||
utils.cloneCssStyles(element.firstChild, []);
|
||||
break;
|
||||
case 'gantt':
|
||||
if(typeof mermaid.ganttConfig === 'object'){
|
||||
gantt.setConf(mermaid.ganttConfig);
|
||||
|
||||
}
|
||||
gantt.draw(txt,id);
|
||||
utils.cloneCssStyles(element.firstChild, []);
|
||||
break;
|
||||
case 'info':
|
||||
info.draw(txt,id,exports.version());
|
||||
utils.cloneCssStyles(element.firstChild, []);
|
||||
break;
|
||||
}
|
||||
//console.log(document.body.innerHTML);
|
||||
cb(d3.select('#d'+id).node().innerHTML);
|
||||
|
||||
d3.select('#d'+id).node().remove();
|
||||
};
|
||||
|
||||
|
||||
exports.render = function(id, text){
|
||||
|
||||
var callback = function(svgText){
|
||||
console.log(svgText);
|
||||
};
|
||||
|
||||
if(typeof document === 'undefined'){
|
||||
//jsdom = require('jsdom').jsdom;
|
||||
//console.log(jsdom);
|
||||
|
||||
//htmlStub = '<html><head></head><body><div class="mermaid">'+text+'</div><script src="dist/mermaid.full.js"></script><script>var mermaid_config = {startOnLoad:true}</script></body></html>';
|
||||
htmlStub = '<html><head></head><body></body></html>';
|
||||
// // html file skull with a container div for the d3 dataviz
|
||||
//
|
||||
// pass the html stub to jsDom
|
||||
/* jsdom.env({
|
||||
features : { QuerySelectorAll : true },
|
||||
html : htmlStub,
|
||||
done : function(errors, win) {
|
||||
// process the html document, like if we were at client side
|
||||
// code to generate the dataviz and process the resulting html file to be added here
|
||||
//var d3 = require('d3');
|
||||
//console.log('Here we go: '+JSON.stringify(d3));
|
||||
|
||||
global.document = win.document;
|
||||
global.window = win;
|
||||
|
||||
var element = win.document.createElement('div');
|
||||
element.setAttribute('id','did');
|
||||
//document.
|
||||
console.log(document.body.innerHTML);
|
||||
//console.log('Element:',element);
|
||||
//console.log(win);
|
||||
//mermaid.init();
|
||||
//render(win.document, 'myId', text, callback);
|
||||
|
||||
}
|
||||
});*/
|
||||
//var jsdom = require('jsdom').jsdom;
|
||||
//global.document = jsdom(htmlStub);
|
||||
//global.window = document.parentWindow;
|
||||
|
||||
render(id, text, callback);
|
||||
//var element = win.document.createElement('div');
|
||||
//element.setAttribute('id','did');
|
||||
//document.
|
||||
}
|
||||
else{
|
||||
// In browser
|
||||
render( id, text, callback);
|
||||
}
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
global.mermaid = {
|
||||
startOnLoad: true,
|
||||
htmlLabels: true,
|
||||
|
|
@ -203,6 +332,9 @@ global.mermaid = {
|
|||
parseError: function(err, hash) {
|
||||
console.log('Mermaid Syntax error:');
|
||||
console.log(err);
|
||||
},
|
||||
render:function(id, text){
|
||||
return exports.render(id, text);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -233,6 +365,8 @@ exports.contentLoaded = function(){
|
|||
|
||||
};
|
||||
|
||||
|
||||
|
||||
if(typeof document !== 'undefined'){
|
||||
/**
|
||||
* Wait for document loaded before starting the execution
|
||||
|
|
@ -241,6 +375,3 @@ if(typeof document !== 'undefined'){
|
|||
exports.contentLoaded();
|
||||
}, false);
|
||||
}
|
||||
|
||||
var apa = 1;
|
||||
var bapselsin = 2;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"titleTopMargin":25,
|
||||
"barHeight":20,
|
||||
"barGap":4,
|
||||
"topPadding":50,
|
||||
"sidePadding":75,
|
||||
"gridLineStartPadding":35,
|
||||
"fontSize":11,
|
||||
"numberSectionStyles":3
|
||||
}
|
||||
|
|
@ -1 +1,11 @@
|
|||
{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":165,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35}
|
||||
{
|
||||
"diagramMarginX": 50,
|
||||
"diagramMarginY": 10,
|
||||
"actorMargin": 50,
|
||||
"width": 150,
|
||||
"height": 165,
|
||||
"boxMargin": 10,
|
||||
"boxTextMargin": 5,
|
||||
"noteMargin": 10,
|
||||
"messageMargin": 35
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<script src="../dist/mermaid.full.js"></script>
|
||||
<scrpt src="../dist/mermaid.full.js"></scrpt>
|
||||
<script src="../dist/js3/mermaid.js"></script>
|
||||
<script>
|
||||
var mermaid_config = {
|
||||
startOnLoad:true,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,130 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<link rel="stylesheet" href="../dist/mermaid.forest.css"/>
|
||||
|
||||
<script src="../node_modules/d3/d3.js"></script>
|
||||
<script src="../dist/mermaid.slim.js"></script>
|
||||
<scrpt src="../dist/mermaid.full.js"></scrpt>
|
||||
<style type="text/css">
|
||||
html {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
//browserify --entry src/mermaid.js -u d3 -o ./dist/mermaid.brow.slim.js
|
||||
var mermaid_config = {
|
||||
startOnLoad:true
|
||||
}
|
||||
mermaid.ganttConfig = {
|
||||
titleTopMargin:25,
|
||||
barHeight:20,
|
||||
barGap:4,
|
||||
topPadding:50,
|
||||
sidePadding:75,
|
||||
gridLineStartPadding:35,
|
||||
fontSize:11,
|
||||
numberSectionStyles:3,
|
||||
axisFormatter: [
|
||||
// Within a day
|
||||
["%I:%M", function (d) {
|
||||
return d.getHours();
|
||||
}],
|
||||
// Monday a week
|
||||
["w. %U", function (d) {
|
||||
return d.getDay() == 1;
|
||||
}],
|
||||
// Day within a week (not monday)
|
||||
["%a %d", function (d) {
|
||||
return d.getDay() && d.getDate() != 1;
|
||||
}],
|
||||
// within a month
|
||||
["%b %d", function (d) {
|
||||
return d.getDate() != 1;
|
||||
}],
|
||||
// Month
|
||||
["%m-%y", function (d) {
|
||||
return d.getMonth();
|
||||
}]
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
function apa(){
|
||||
console.log('CLICKED');
|
||||
}
|
||||
</script>
|
||||
<lnk rel="stylesheet" href="seq.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="mermaid" id="i141">
|
||||
graph TB
|
||||
subgraph LevelAB1ss
|
||||
subgraph LevelAB1C1
|
||||
d1-->d2
|
||||
end
|
||||
subgraph X
|
||||
x-->x2
|
||||
end
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
graph TB
|
||||
subgraph A
|
||||
subgraph AA
|
||||
aa1 --> aa2
|
||||
aa1 --> aa3
|
||||
subgraph New top
|
||||
nt1 --> nt2
|
||||
nt1 --> nt3
|
||||
end
|
||||
end
|
||||
subgraph AB
|
||||
ab1 --> ab2
|
||||
ab1 --> ab3
|
||||
end
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
sequenceDiagram
|
||||
A->> B: Query
|
||||
B->> C: Forward query
|
||||
Note right of C: Thinking...
|
||||
C->> B: Response
|
||||
B->> A: Forward response
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mermaid">
|
||||
graph TB
|
||||
ab1 -- tjojho --> ab3
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
gantt
|
||||
dateFormat yyyy-mm-dd
|
||||
title Adding gantt diagram functionality to mermaid
|
||||
|
||||
section Design
|
||||
Design jison grammar :des1, 2014-01-01, 2014-01-04
|
||||
Create example text :des2, 2014-01-01, 3d
|
||||
Bounce gantt example with users :des3, after des2, 5d
|
||||
|
||||
section Implementation
|
||||
update build script :2014-01-02,1h
|
||||
Implement parser and jison :after des1, 2d
|
||||
Create tests for parser :3d
|
||||
Create renderer :5d
|
||||
Create tests for renderer :2d
|
||||
Add to mermaid core :1d
|
||||
|
||||
section Documentation
|
||||
Describe gantt syntax :a1, 2014-01-01, 3d
|
||||
Add gantt diagram to demo page :after a1 , 2h
|
||||
Add gantt to diagram to demo page :after a1 , 2h </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue