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
  }
  })
  }