Merge of latest changesin to pr #804

dist/index.html

@@ -318,6 +318,13 @@
 Add gantt diagram to demo page      :after a1  , 20h
 Add another diagram to demo page    :doc1, after a1  , 48h
 
+section Clickable
+Visit mermaidjs               :active, cl1, 2014-01-07,2014-01-10
+Calling a Callback (look at the console log) :cl2, after cl1, 3d
+
+click cl1 href "https://mermaidjs.github.io/"
+click cl2 call ganttTestClick("test", test, test)
+
 section Last section
 Describe gantt syntax               :after doc1, 3d
 Add gantt diagram to demo page      : 20h
@@ -376,6 +383,11 @@
     });
   </script>
   <script>
+    function ganttTestClick(a, b, c){
+      console.log("a:", a)
+      console.log("b:", b)
+      console.log("c:", c)
+    }
     function testClick(nodeId) {
       console.log("clicked", nodeId)
       var originalBgColor = document.querySelector('body').style.backgroundColor

package.json

@@ -15,6 +15,7 @@
   "scripts": {
     "build": "webpack --progress --colors",
     "build:watch": "yarn build --watch",
+    "minify": "minify ./dist/mermaid.js > ./dist/mermaid.min.js",
     "release": "yarn build -p --config webpack.config.prod.babel.js",
     "lint": "standard",
     "e2e": "yarn lint && jest e2e --config e2e/jest.config.js",
@@ -27,7 +28,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/knsv/mermaid"
+    "url": "https://github.com/abzicht/mermaid"
   },
   "author": "Knut Sveidqvist",
   "license": "MIT",
@@ -46,8 +47,9 @@
     "dagre-layout": "^0.8.8",
     "graphlibrary": "^2.2.0",
     "he": "^1.2.0",
-    "lodash": "^4.17.5",
     "moment-mini": "^2.22.1",
+    "lodash": "^4.17.11",
+    "minify": "^4.1.1",
     "scope-css": "^1.2.1"
   },
   "devDependencies": {
@@ -89,4 +91,4 @@
       "babel-core"
     ]
   }
-}
+}

src/diagrams/class/classRenderer.js

@@ -217,9 +217,9 @@ const drawEdge = function (elem, path, relation) {
     const p = path.points[0]
     const nextPoint = path.points[1]
 
-    let direction = {x: nextPoint.x - p.x, y: nextPoint.y - p.y}
+    let direction = { x: nextPoint.x - p.x, y: nextPoint.y - p.y }
     normalize(direction, 10)
-    const offsettedPoint = {x: p.x + direction.x, y: p.y + direction.y}
+    const offsettedPoint = { x: p.x + direction.x, y: p.y + direction.y }
 
     writeLabel(offsettedPoint.x, offsettedPoint.y, relation.relationTitle1)
   }
@@ -228,9 +228,9 @@ const drawEdge = function (elem, path, relation) {
     const p = path.points[l - 1]
     const previousPoint = path.points[l - 2]
 
-    let direction = {x: previousPoint.x - p.x, y: previousPoint.y - p.y}
+    let direction = { x: previousPoint.x - p.x, y: previousPoint.y - p.y }
     normalize(direction, 10)
-    const offsettedPoint = {x: p.x + direction.x, y: p.y + direction.y}
+    const offsettedPoint = { x: p.x + direction.x, y: p.y + direction.y }
 
     writeLabel(offsettedPoint.x, offsettedPoint.y, relation.relationTitle2)
   }

src/diagrams/gantt/ganttDb.js

@@ -1,5 +1,6 @@
 import moment from 'moment-mini'
 import { logger } from '../../logger'
+import * as d3 from 'd3'
 
 let dateFormat = ''
 let axisFormat = ''
@@ -9,11 +10,13 @@ let sections = []
 let tasks = []
 let currentSection = ''
 const tags = ['active', 'done', 'crit', 'milestone']
+let funs = []
 
 export const clear = function () {
   sections = []
   tasks = []
   currentSection = ''
+  funs = []
   title = ''
   taskCnt = 0
   lastTask = undefined
@@ -258,18 +261,33 @@ const parseData = function (prevTaskId, dataStr) {
   switch (data.length) {
     case 1:
       task.id = parseId()
-      task.startTime = { type: 'prevTaskEnd', id: prevTaskId }
-      task.endTime = { data: data[0] }
+      task.startTime = {
+        type: 'prevTaskEnd',
+        id: prevTaskId
+      }
+      task.endTime = {
+        data: data[0]
+      }
       break
     case 2:
       task.id = parseId()
-      task.startTime = { type: 'getStartDate', startData: data[0] }
-      task.endTime = { data: data[1] }
+      task.startTime = {
+        type: 'getStartDate',
+        startData: data[0]
+      }
+      task.endTime = {
+        data: data[1]
+      }
       break
     case 3:
       task.id = parseId(data[0])
-      task.startTime = { type: 'getStartDate', startData: data[1] }
-      task.endTime = { data: data[2] }
+      task.startTime = {
+        type: 'getStartDate',
+        startData: data[1]
+      }
+      task.endTime = {
+        data: data[2]
+      }
       break
     default:
   }
@@ -289,7 +307,8 @@ export const addTask = function (descr, data) {
     manualEndTime: false,
     renderEndTime: null,
     raw: { data: data },
-    task: descr
+    task: descr,
+    classes: []
   }
   const taskInfo = parseData(lastTaskID, data)
   rawTask.raw.startTime = taskInfo.startTime
@@ -318,7 +337,8 @@ export const addTaskOrg = function (descr, data) {
     section: currentSection,
     type: currentSection,
     description: descr,
-    task: descr
+    task: descr,
+    classes: []
   }
   const taskInfo = compileData(lastTask, data)
   newTask.startTime = taskInfo.startTime
@@ -370,6 +390,108 @@ const compileTasks = function () {
   return allProcessed
 }
 
+/**
+ * Called by parser when a link is found. Adds the URL to the vertex data.
+ * @param ids Comma separated list of ids
+ * @param linkStr URL to create a link for
+ */
+export const setLink = function (ids, linkStr) {
+  ids.split(',').forEach(function (id) {
+    let rawTask = findTaskById(id)
+    if (typeof rawTask !== 'undefined') {
+      pushFun(id, () => { window.open(linkStr, '_self') })
+    }
+  })
+  setClass(ids, 'clickable')
+}
+
+/**
+ * Called by parser when a special node is found, e.g. a clickable element.
+ * @param ids Comma separated list of ids
+ * @param className Class to add
+ */
+export const setClass = function (ids, className) {
+  ids.split(',').forEach(function (id) {
+    let rawTask = findTaskById(id)
+    if (typeof rawTask !== 'undefined') {
+      rawTask.classes.push(className)
+    }
+  })
+}
+
+const setClickFun = function (id, functionName, functionArgs) {
+  if (typeof functionName === 'undefined') {
+    return
+  }
+
+  let argList = []
+  if (typeof functionArgs === 'string') {
+    /* Splits functionArgs by ',', ignoring all ',' in double quoted strings */
+    argList = functionArgs.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/)
+    for (let i = 0; i < argList.length; i++) {
+      let item = argList[i].trim()
+      /* Removes all double quotes at the start and end of an argument */
+      /* This preserves all starting and ending whitespace inside */
+      if (item.charAt(0) === '"' && item.charAt(item.length - 1) === '"') {
+        item = item.substr(1, item.length - 2)
+      }
+      argList[i] = item
+    }
+  }
+
+  let rawTask = findTaskById(id)
+  if (typeof rawTask !== 'undefined') {
+    pushFun(id, () => { window[functionName](...argList) })
+  }
+}
+
+/**
+ * The callbackFunction is executed in a click event bound to the task with the specified id or the task's assigned text
+ * @param id The task's id
+ * @param callbackFunction A function to be executed when clicked on the task or the task's text
+ */
+const pushFun = function (id, callbackFunction) {
+  funs.push(function (element) {
+    const elem = d3.select(element).select(`[id="${id}"]`)
+    if (elem !== null) {
+      elem.on('click', function () {
+        callbackFunction()
+      })
+    }
+  })
+  funs.push(function (element) {
+    const elem = d3.select(element).select(`[id="${id}-text"]`)
+    if (elem !== null) {
+      elem.on('click', function () {
+        callbackFunction()
+      })
+    }
+  })
+}
+
+/**
+ * Called by parser when a click definition is found. Registers an event handler.
+ * @param ids Comma separated list of ids
+ * @param functionName Function to be called on click
+ * @param functionArgs Function args the function should be called with
+ */
+export const setClickEvent = function (ids, functionName, functionArgs) {
+  ids.split(',').forEach(function (id) {
+    setClickFun(id, functionName, functionArgs)
+  })
+  setClass(ids, 'clickable')
+}
+
+/**
+ * Binds all functions previously added to fun (specified through click) to the element
+ * @param element
+ */
+export const bindFunctions = function (element) {
+  funs.forEach(function (fun) {
+    fun(element)
+  })
+}
+
 export default {
   clear,
   setDateFormat,
@@ -382,7 +504,10 @@ export default {
   addTask,
   findTaskById,
   addTaskOrg,
-  setExcludes
+  setExcludes,
+  setClickEvent,
+  setLink,
+  bindFunctions
 }
 
 function getTaskTags (data, task, tags) {

src/diagrams/gantt/ganttRenderer.js

@@ -128,6 +128,7 @@ export const draw = function (text, id) {
       .enter()
 
     rectangles.append('rect')
+      .attr('id', function (d) { return d.id })
       .attr('rx', 3)
       .attr('ry', 3)
       .attr('x', function (d) {
@@ -152,24 +153,36 @@ export const draw = function (text, id) {
       .attr('class', function (d) {
         const res = 'task'
 
+        let classStr = ''
+        if (d.classes.length > 0) {
+          classStr = d.classes.join(' ')
+        }
+
         let secNum = 0
         for (let i = 0; i < categories.length; i++) {
           if (d.type === categories[i]) {
             secNum = (i % conf.numberSectionStyles)
           }
         }
 
-        let taskClass = ''
+        let taskClass = classStr
         if (d.active) {
-          taskClass = ' active'
+          if (d.crit) {
+            taskClass += ' activeCrit'
+          } else {
+            taskClass = 'active'
+          }
         } else if (d.done) {
-          taskClass = ' done'
+          if (d.crit) {
+            taskClass = ' doneCrit'
+          } else {
+            taskClass = 'done'
+          }
         }
+
         if (d.crit) {
           if (taskClass.length > 0) {
-            taskClass += 'Crit'
-          } else {
-            taskClass = ' crit'
+            taskClass += 'crit'
           }
         }
 
@@ -225,6 +238,12 @@ export const draw = function (text, id) {
           endX = startX + theBarHeight
         }
         const textWidth = this.getBBox().width
+
+        let classStr = ''
+        if (d.classes.length > 0) {
+          classStr = d.classes.join(' ')
+        }
+
         let secNum = 0
         for (let i = 0; i < categories.length; i++) {
           if (d.type === categories[i]) {
@@ -260,12 +279,12 @@ export const draw = function (text, id) {
         // Check id text width > width of rectangle
         if (textWidth > (endX - startX)) {
           if (endX + textWidth + 1.5 * conf.leftPadding > w) {
-            return 'taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType
+            return classStr + ' taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType
           } else {
-            return 'taskTextOutsideRight taskTextOutside' + secNum + ' ' + taskType
+            return classStr + ' taskTextOutsideRight taskTextOutside' + secNum + ' ' + taskType
           }
         } else {
-          return 'taskText taskText' + secNum + ' ' + taskType
+          return classStr + ' taskText taskText' + secNum + ' ' + taskType
         }
       })
   }