Fix for issue with rednering in IE as described in #303

This commit is contained in:
knsv
2016-03-12 11:23:57 +01:00
parent 9bd140ce42
commit 2c90034d39
5 changed files with 219 additions and 102 deletions

239
dist/mermaid.js vendored
View File

@@ -1,4 +1,4 @@
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.mermaid=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.mermaid = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
},{}],2:[function(require,module,exports){
(function (process){
@@ -232,69 +232,74 @@ var substr = 'ab'.substr(-1) === 'b'
// shim for using process in browser
var process = module.exports = {};
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
process.nextTick = (function () {
var canSetImmediate = typeof window !== 'undefined'
&& window.setImmediate;
var canMutationObserver = typeof window !== 'undefined'
&& window.MutationObserver;
var canPost = typeof window !== 'undefined'
&& window.postMessage && window.addEventListener
;
if (canSetImmediate) {
return function (f) { return window.setImmediate(f) };
function cleanUpNextTick() {
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
var queue = [];
if (canMutationObserver) {
var hiddenDiv = document.createElement("div");
var observer = new MutationObserver(function () {
var queueList = queue.slice();
queue.length = 0;
queueList.forEach(function (fn) {
fn();
});
});
observer.observe(hiddenDiv, { attributes: true });
return function nextTick(fn) {
if (!queue.length) {
hiddenDiv.setAttribute('yes', 'no');
}
queue.push(fn);
};
if (queue.length) {
drainQueue();
}
}
if (canPost) {
window.addEventListener('message', function (ev) {
var source = ev.source;
if ((source === window || source === null) && ev.data === 'process-tick') {
ev.stopPropagation();
if (queue.length > 0) {
var fn = queue.shift();
fn();
function drainQueue() {
if (draining) {
return;
}
var timeout = setTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
}, true);
return function nextTick(fn) {
queue.push(fn);
window.postMessage('process-tick', '*');
};
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
clearTimeout(timeout);
}
return function nextTick(fn) {
setTimeout(fn, 0);
};
})();
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
setTimeout(drainQueue, 0);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
@@ -310,11 +315,11 @@ process.binding = function (name) {
throw new Error('process.binding is not supported');
};
// TODO(shtylman)
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
},{}],4:[function(require,module,exports){
!function() {
@@ -25401,8 +25406,8 @@ function canonicalize(attrs) {
}
},{"./acyclic":55,"./add-border-segments":56,"./coordinate-system":57,"./graphlib":60,"./lodash":63,"./nesting-graph":64,"./normalize":65,"./order":70,"./parent-dummy-chains":75,"./position":77,"./rank":79,"./util":82}],63:[function(require,module,exports){
module.exports=require(51)
},{"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\lodash.js":51,"lodash":104}],64:[function(require,module,exports){
arguments[4][51][0].apply(exports,arguments)
},{"dup":51,"lodash":104}],64:[function(require,module,exports){
var _ = require("./lodash"),
util = require("./util");
@@ -27445,48 +27450,48 @@ function notime(name, fn) {
module.exports = "0.7.4";
},{}],84:[function(require,module,exports){
module.exports=require(33)
},{"./lib":100,"./lib/alg":91,"./lib/json":101,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\index.js":33}],85:[function(require,module,exports){
module.exports=require(34)
},{"../lodash":102,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\components.js":34}],86:[function(require,module,exports){
module.exports=require(35)
},{"../lodash":102,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\dfs.js":35}],87:[function(require,module,exports){
module.exports=require(36)
},{"../lodash":102,"./dijkstra":88,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\dijkstra-all.js":36}],88:[function(require,module,exports){
module.exports=require(37)
},{"../data/priority-queue":98,"../lodash":102,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\dijkstra.js":37}],89:[function(require,module,exports){
module.exports=require(38)
},{"../lodash":102,"./tarjan":96,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\find-cycles.js":38}],90:[function(require,module,exports){
module.exports=require(39)
},{"../lodash":102,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\floyd-warshall.js":39}],91:[function(require,module,exports){
module.exports=require(40)
},{"./components":85,"./dijkstra":88,"./dijkstra-all":87,"./find-cycles":89,"./floyd-warshall":90,"./is-acyclic":92,"./postorder":93,"./preorder":94,"./prim":95,"./tarjan":96,"./topsort":97,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\index.js":40}],92:[function(require,module,exports){
module.exports=require(41)
},{"./topsort":97,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\is-acyclic.js":41}],93:[function(require,module,exports){
module.exports=require(42)
},{"./dfs":86,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\postorder.js":42}],94:[function(require,module,exports){
module.exports=require(43)
},{"./dfs":86,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\preorder.js":43}],95:[function(require,module,exports){
module.exports=require(44)
},{"../data/priority-queue":98,"../graph":99,"../lodash":102,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\prim.js":44}],96:[function(require,module,exports){
module.exports=require(45)
},{"../lodash":102,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\tarjan.js":45}],97:[function(require,module,exports){
module.exports=require(46)
},{"../lodash":102,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\alg\\topsort.js":46}],98:[function(require,module,exports){
module.exports=require(47)
},{"../lodash":102,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\data\\priority-queue.js":47}],99:[function(require,module,exports){
module.exports=require(48)
},{"./lodash":102,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\graph.js":48}],100:[function(require,module,exports){
module.exports=require(49)
},{"./graph":99,"./version":103,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\index.js":49}],101:[function(require,module,exports){
module.exports=require(50)
},{"./graph":99,"./lodash":102,"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\json.js":50}],102:[function(require,module,exports){
module.exports=require(51)
},{"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\lodash.js":51,"lodash":104}],103:[function(require,module,exports){
module.exports=require(52)
},{"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\graphlib\\lib\\version.js":52}],104:[function(require,module,exports){
module.exports=require(53)
},{"C:\\Users\\knut\\source\\mermaid\\node_modules\\dagre-d3\\node_modules\\lodash\\index.js":53}],105:[function(require,module,exports){
arguments[4][33][0].apply(exports,arguments)
},{"./lib":100,"./lib/alg":91,"./lib/json":101,"dup":33}],85:[function(require,module,exports){
arguments[4][34][0].apply(exports,arguments)
},{"../lodash":102,"dup":34}],86:[function(require,module,exports){
arguments[4][35][0].apply(exports,arguments)
},{"../lodash":102,"dup":35}],87:[function(require,module,exports){
arguments[4][36][0].apply(exports,arguments)
},{"../lodash":102,"./dijkstra":88,"dup":36}],88:[function(require,module,exports){
arguments[4][37][0].apply(exports,arguments)
},{"../data/priority-queue":98,"../lodash":102,"dup":37}],89:[function(require,module,exports){
arguments[4][38][0].apply(exports,arguments)
},{"../lodash":102,"./tarjan":96,"dup":38}],90:[function(require,module,exports){
arguments[4][39][0].apply(exports,arguments)
},{"../lodash":102,"dup":39}],91:[function(require,module,exports){
arguments[4][40][0].apply(exports,arguments)
},{"./components":85,"./dijkstra":88,"./dijkstra-all":87,"./find-cycles":89,"./floyd-warshall":90,"./is-acyclic":92,"./postorder":93,"./preorder":94,"./prim":95,"./tarjan":96,"./topsort":97,"dup":40}],92:[function(require,module,exports){
arguments[4][41][0].apply(exports,arguments)
},{"./topsort":97,"dup":41}],93:[function(require,module,exports){
arguments[4][42][0].apply(exports,arguments)
},{"./dfs":86,"dup":42}],94:[function(require,module,exports){
arguments[4][43][0].apply(exports,arguments)
},{"./dfs":86,"dup":43}],95:[function(require,module,exports){
arguments[4][44][0].apply(exports,arguments)
},{"../data/priority-queue":98,"../graph":99,"../lodash":102,"dup":44}],96:[function(require,module,exports){
arguments[4][45][0].apply(exports,arguments)
},{"../lodash":102,"dup":45}],97:[function(require,module,exports){
arguments[4][46][0].apply(exports,arguments)
},{"../lodash":102,"dup":46}],98:[function(require,module,exports){
arguments[4][47][0].apply(exports,arguments)
},{"../lodash":102,"dup":47}],99:[function(require,module,exports){
arguments[4][48][0].apply(exports,arguments)
},{"./lodash":102,"dup":48}],100:[function(require,module,exports){
arguments[4][49][0].apply(exports,arguments)
},{"./graph":99,"./version":103,"dup":49}],101:[function(require,module,exports){
arguments[4][50][0].apply(exports,arguments)
},{"./graph":99,"./lodash":102,"dup":50}],102:[function(require,module,exports){
arguments[4][51][0].apply(exports,arguments)
},{"dup":51,"lodash":104}],103:[function(require,module,exports){
arguments[4][52][0].apply(exports,arguments)
},{"dup":52}],104:[function(require,module,exports){
arguments[4][53][0].apply(exports,arguments)
},{"dup":53}],105:[function(require,module,exports){
(function (global){
/*! http://mths.be/he v0.5.0 by @mathias | MIT license */
;(function(root) {
@@ -33639,8 +33644,25 @@ exports.addVertices = function (vert, g) {
return '<i class="fa ' + s.substring(3) + '"></i>';
});
} else {
verticeText = verticeText.replace(/<br>/g, '\n');
labelTypeStr = 'text';
var svg_label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
var rows = verticeText.split(/<br>/);
var j = 0;
for (j = 0; j < rows.length; j++) {
var tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', '1');
tspan.textContent = rows[j];
svg_label.appendChild(tspan);
}
labelTypeStr = 'svg';
verticeText = svg_label;
//verticeText = verticeText.replace(/<br\/>/g, '\n');
//labelTypeStr = 'text';
}
var radious = 0;
@@ -33990,6 +34012,27 @@ exports.draw = function (text, id, isDot) {
}
}
}
// Add label rects for non html labels
if (!conf.htmlLabels) {
var labels = document.querySelectorAll('#' + id + ' .edgeLabel .label');
var i;
for (i = 0; i < labels.length; i++) {
var label = labels[i];
// Get dimensions of label
var dim = label.getBBox();
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('rx', 0);
rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width);
rect.setAttribute('height', dim.height);
rect.setAttribute('style', 'fill:#e8e8e8;');
label.insertBefore(rect, label.firstChild);
}
}
};
},{"../../d3":108,"../../logger":127,"./dagre-d3":115,"./graphDb":117,"./parser/dot":118,"./parser/flow":119}],117:[function(require,module,exports){

View File

@@ -1,5 +1,5 @@
#!/usr/bin/env bash
watchify src/mermaid.js -s mermaid -o dist/mermaid.js &
watchify src/mermaid.js -s mermaid -t babelify -o dist/mermaid.js &
gulp live-server &
node node_modules/eslint-watch/bin/esw src -w

View File

@@ -83,8 +83,26 @@ exports.addVertices = function (vert, g) {
});
} else {
verticeText = verticeText.replace(/<br>/g, '\n');
labelTypeStr = 'text';
var svg_label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
var rows = verticeText.split(/<br>/);
var j = 0;
for(j=0;j<rows.length;j++){
var tspan = document.createElementNS('http://www.w3.org/2000/svg','tspan');
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', '1');
tspan.textContent = rows[j];
svg_label.appendChild(tspan);
}
labelTypeStr = 'svg';
verticeText = svg_label;
//verticeText = verticeText.replace(/<br\/>/g, '\n');
//labelTypeStr = 'text';
}
var radious = 0;
@@ -480,5 +498,27 @@ exports.draw = function (text, id,isDot) {
}
}
}
// Add label rects for non html labels
if(!conf.htmlLabels){
var labels = document.querySelectorAll('#' + id +' .edgeLabel .label');
var i;
for(i=0;i<labels.length;i++){
var label = labels[i];
// Get dimensions of label
var dim = label.getBBox();
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('rx',0);
rect.setAttribute('ry',0);
rect.setAttribute('width',dim.width);
rect.setAttribute('height',dim.height);
rect.setAttribute('style','fill:#e8e8e8;');
label.insertBefore(rect, label.firstChild);
}
}
};

View File

@@ -17,7 +17,7 @@
<h1>The nodes should not be false</h1>
<div class="mermaid">
graph LR;
A[Node A]-->B[Node B];
A["fa:fa-twitter nu springer vi"]-- I am a<br/>text label -->B["Node<br/>B"];
B-->C[Node C];
</div>
</body></html>

View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="dist/mermaid.css"/>
<script>
</script>
<script src="dist/mermaid.js"></script>
<style>
body{
background-color: #89896f;
}
</style>
</head>
<body>
<h1><i class="fa fa-camera-retro"></i> Font awesome support!</h1>
<div class="mermaid" id="i211">
groph LR
A["A double quote:#quot;"] -->B["fa:fa-twitter nu springer vi"]
B -->C[fa:fa-ban nu springer vi]
C--> D(fa:fa-spinner);
D--> E(En fa:fa-camera-retro kanske?);
</div>
<div class="mermaid" id="i211">
sequenceDiagram
Ali#45;ce->>John: Hello John, how are you? #60;
John-->>Alice: Great!#quot;
</div>
</body>
</html>