From e298351caa063f9409bd65eddeedd04d0aeb14f3 Mon Sep 17 00:00:00 2001 From: abzicht Date: Thu, 7 Mar 2019 22:00:02 +0100 Subject: [PATCH 01/22] Added and callback functionality to gantt diagrams --- src/diagrams/gantt/parser/gantt.jison | 49 +++++++++++++++++++-------- 1 file changed, 35 insertions(+), 14 deletions(-) diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index 49ab3ad477..75741ab22e 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -7,27 +7,42 @@ %options case-insensitive -%{ - // Pre-lexer code can go here -%} - +/* string is used to detect blocks that are surrounded by double quotes. */ +/* copied from /src/diagrams/flowchart/parser/flow.jison */ +%x string +/* a valid callback looks like this: callback(example_callback_arg) */ +/* callback prefix: callback( */ +/* callback suffix: ) */ +%x callback +%x callbackname %% [\n]+ return 'NL'; \s+ /* skip whitespace */ \#[^\n]* /* skip comments */ \%%[^\n]* /* skip comments */ -"gantt" return 'gantt'; +/* Strings are used to detect tooltips */ +["] this.begin("string"); +["] this.popState(); +[^"]* return 'STR'; +"call"\s this.begin("callbackname"); +\( this.popState(); this.begin("callback"); +[^(]+ return 'callbackname'; +[)] this.popState(); +[^)]* return 'callbackarguments'; + +"click" return 'click'; +"gantt" return 'gantt'; "dateFormat"\s[^#\n;]+ return 'dateFormat'; "axisFormat"\s[^#\n;]+ return 'axisFormat'; \d\d\d\d"-"\d\d"-"\d\d return 'date'; "title"\s[^#\n;]+ return 'title'; "section"\s[^#:\n;]+ return 'section'; -[^#:\n;]+ return 'taskTxt'; +[^#:()\n;]+ return 'taskTxt'; ":"[^#\n;]+ return 'taskData'; -":" return ':'; -<> return 'EOF'; -. return 'INVALID'; +":" return ':'; +<> return 'EOF'; +. return 'INVALID'; /lex @@ -54,11 +69,17 @@ line ; statement - : 'dateFormat' {yy.setDateFormat($1.substr(11));$$=$1.substr(11);} + : 'dateFormat' {yy.setDateFormat($1.substr(11));$$=$1.substr(11);} | 'axisFormat' {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);} - | title {yy.setTitle($1.substr(6));$$=$1.substr(6);} - | section {yy.addSection($1.substr(8));$$=$1.substr(8);} - | taskTxt taskData {yy.addTask($1,$2);$$='task';} - ; + | title {yy.setTitle($1.substr(6));$$=$1.substr(6);} + | section {yy.addSection($1.substr(8));$$=$1.substr(8);} + | clickStatement + | taskTxt taskData {yy.addTask($1,$2);$$='task';} + ; +clickStatement + : click callbackname callbackarguments {$$ = $1;yy.setClickEvent($2, $3);} + | click STR callbackname callbackarguments {$$ = $1;yy.setLink($2);yy.setClickEvent($3, $4);} + | click STR {$$ = $1;yy.setLink($2);} + ; %% From 19d9dd69547c519ee31be2d558dd4f5bbaafcd3d Mon Sep 17 00:00:00 2001 From: abzicht Date: Thu, 7 Mar 2019 22:31:38 +0100 Subject: [PATCH 02/22] Fixed clickStatement to include ids --- src/diagrams/gantt/parser/gantt.jison | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index 75741ab22e..13f70aeb67 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -78,8 +78,8 @@ statement ; clickStatement - : click callbackname callbackarguments {$$ = $1;yy.setClickEvent($2, $3);} - | click STR callbackname callbackarguments {$$ = $1;yy.setLink($2);yy.setClickEvent($3, $4);} - | click STR {$$ = $1;yy.setLink($2);} + : click STR callbackname callbackarguments {$$ = $1;yy.setClickEvent($2, $3, $4);} + | click STR STR callbackname callbackarguments {$$ = $1;yy.setLink($2, $3);yy.setClickEvent($2, $4, $5);} + | click STR STR {$$ = $1;yy.setLink($2, $3);} ; %% From 57b780a0d7b1d46d44332594e438c3d45c260f7a Mon Sep 17 00:00:00 2001 From: abzicht Date: Fri, 8 Mar 2019 00:07:36 +0100 Subject: [PATCH 03/22] In render: added calling callback for gantt functions --- src/mermaidAPI.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index ea122371d2..948ef18898 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -447,6 +447,7 @@ const render = function (id, txt, cb, container) { if (typeof cb !== 'undefined') { cb(svgCode, flowDb.bindFunctions) + cb(svgCode, ganttDb.bindFunctions) } else { logger.warn('CB = undefined!') } From 67ee649d99b81552a92d93b30f5a9bd54a380170 Mon Sep 17 00:00:00 2001 From: abzicht Date: Fri, 8 Mar 2019 00:19:53 +0100 Subject: [PATCH 04/22] Added setLink and setClickEvent to gantt --- src/diagrams/gantt/ganttDb.js | 132 +++++++++++++++++++++++++--- src/diagrams/gantt/ganttRenderer.js | 8 +- 2 files changed, 128 insertions(+), 12 deletions(-) diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js index b4e4fda763..f08f4dfe74 100644 --- a/src/diagrams/gantt/ganttDb.js +++ b/src/diagrams/gantt/ganttDb.js @@ -1,5 +1,8 @@ import moment from 'moment' -import { logger } from '../../logger' +import { + logger +} from '../../logger' +import * as d3 from 'd3' let dateFormat = '' let axisFormat = '' @@ -7,11 +10,13 @@ let title = '' let sections = [] let tasks = [] let currentSection = '' +let funs = [] export const clear = function () { sections = [] tasks = [] currentSection = '' + funs = [] title = '' taskCnt = 0 lastTask = undefined @@ -242,18 +247,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: } @@ -270,8 +290,13 @@ export const addTask = function (descr, data) { section: currentSection, type: currentSection, processed: false, - raw: { data: data }, - task: descr + raw: { + data: data + }, + task: descr, + link: undefined, + /* The link the rectangle will href to */ + classes: [] } const taskInfo = parseData(lastTaskID, data) rawTask.raw.startTime = taskInfo.startTime @@ -299,7 +324,10 @@ export const addTaskOrg = function (descr, data) { section: currentSection, type: currentSection, description: descr, - task: descr + task: descr, + link: undefined, + /* The link the rectangle will href to */ + classes: [] } const taskInfo = compileData(lastTask, data) newTask.startTime = taskInfo.startTime @@ -348,6 +376,85 @@ 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') { + rawTask.link = linkStr + } + }) + 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 rawTask = findTaskById(id) + if (typeof rawTask !== 'undefined') { + funs.push(function (element) { + const elem = d3.select(element).select(`[id="${id}"]`) + if (elem !== null) { + elem.on('click', function () { + console.log('test') + window[functionName](id, ...functionArgs) + }) + } + }) + funs.push(function (element) { + const elem = d3.select(element).select(`[id="${id}-text"]`) + if (elem !== null) { + elem.on('click', function () { + console.log('test') + window[functionName](id, ...functionArgs) + }) + } + }) + } +} + +/** + * 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, @@ -359,5 +466,8 @@ export default { getTasks, addTask, findTaskById, - addTaskOrg + addTaskOrg, + setClickEvent, + setLink, + bindFunctions } diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index 7d24df2a4c..b7a6da8904 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -126,6 +126,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) { @@ -171,7 +172,12 @@ export const draw = function (text, id) { return res + ' task' + secNum }) - rectangles.append('text') + rectangles.append('a').attr('href', function (d) { + /* All rectangles are clickable. If d.link is not specified, '' is returned */ + return d.link + }) + .attr('id', function (d) { return d.id + '-text' }) + .append('text') .text(function (d) { return d.task }) From 0c66e1b5b9171f770a9d18b48dfc7e64e03fb574 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sat, 9 Mar 2019 12:11:56 +0100 Subject: [PATCH 05/22] Added href support and improved callback argument handling --- src/diagrams/gantt/ganttDb.js | 4 ++-- src/diagrams/gantt/parser/gantt.jison | 33 +++++++++++++++++++-------- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js index f08f4dfe74..56b7ef0031 100644 --- a/src/diagrams/gantt/ganttDb.js +++ b/src/diagrams/gantt/ganttDb.js @@ -294,8 +294,8 @@ export const addTask = function (descr, data) { data: data }, task: descr, - link: undefined, /* The link the rectangle will href to */ + link: undefined, classes: [] } const taskInfo = parseData(lastTaskID, data) @@ -325,8 +325,8 @@ export const addTaskOrg = function (descr, data) { type: currentSection, description: descr, task: descr, - link: undefined, /* The link the rectangle will href to */ + link: undefined, classes: [] } const taskInfo = compileData(lastTask, data) diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index 13f70aeb67..eb02f775f4 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -13,8 +13,9 @@ /* a valid callback looks like this: callback(example_callback_arg) */ /* callback prefix: callback( */ /* callback suffix: ) */ -%x callback +%x href %x callbackname +%x callbackargs %% [\n]+ return 'NL'; @@ -25,11 +26,16 @@ ["] this.begin("string"); ["] this.popState(); [^"]* return 'STR'; -"call"\s this.begin("callbackname"); -\( this.popState(); this.begin("callback"); -[^(]+ return 'callbackname'; -[)] this.popState(); -[^)]* return 'callbackarguments'; + +"href"\s+ this.begin("href"); +[\s\n] this.popState(); +[^\s\n]* return 'href'; + +"call"\s+ this.begin("callbackname"); +\( this.popState(); this.begin("callbackargs"); +[^(]* return 'callbackname'; +\) this.popState(); +[^)]* return 'callbackargs'; "click" return 'click'; "gantt" return 'gantt'; @@ -78,8 +84,17 @@ statement ; clickStatement - : click STR callbackname callbackarguments {$$ = $1;yy.setClickEvent($2, $3, $4);} - | click STR STR callbackname callbackarguments {$$ = $1;yy.setLink($2, $3);yy.setClickEvent($2, $4, $5);} - | click STR STR {$$ = $1;yy.setLink($2, $3);} + : click STR callbackname callbackargs {$$ = $1;yy.setClickEvent($2, $3, $4);} + | click STR callbackname callbackargs href {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setLink($2,$5);} + | click STR href callbackname callbackargs {$$ = $1;yy.setClickEvent($2, $4, $5);yy.setLink($2,$3);} + | click STR href {$$ = $1;yy.setLink($2, $3);} + ; + + +clickStatementDebug + : click STR callbackname callbackargs {$$=$1+' ' + $2 + ' ' + $3 + ' ' + $4;} + | click STR callbackname callbackargs href {$$=$1+' ' + $2 + ' ' + $3 + ' ' + $4 + ' ' + $5;} + | click STR href callbackname callbackargs {$$=$1+' ' + $2 + ' ' + $3 + ' ' + $4 + ' ' + $5;} + | click STR href {$$=$1+' ' + $2 + ' ' + $3;} ; %% From 10057217cb14bd923925c9f7eab2a7a4e2d654af Mon Sep 17 00:00:00 2001 From: abzicht Date: Sat, 9 Mar 2019 20:07:51 +0100 Subject: [PATCH 06/22] Fixed issue which only passed the first char of functionargs to the function by splitting the functionargs by commas --- src/diagrams/gantt/ganttDb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js index 56b7ef0031..0cc76dbf2a 100644 --- a/src/diagrams/gantt/ganttDb.js +++ b/src/diagrams/gantt/ganttDb.js @@ -406,6 +406,7 @@ export const setClass = function (ids, className) { } const setClickFun = function (id, functionName, functionArgs) { + functionArgs = functionArgs.split(',') if (typeof functionName === 'undefined') { return } @@ -415,7 +416,6 @@ const setClickFun = function (id, functionName, functionArgs) { const elem = d3.select(element).select(`[id="${id}"]`) if (elem !== null) { elem.on('click', function () { - console.log('test') window[functionName](id, ...functionArgs) }) } From 4587f5a73d05fdcdf20c43918b847c78a385234a Mon Sep 17 00:00:00 2001 From: abzicht Date: Sat, 9 Mar 2019 20:08:52 +0100 Subject: [PATCH 07/22] Added 'clickable' class to all elements with interactivity. This allows css styling for clickable elements --- src/diagrams/gantt/ganttRenderer.js | 30 ++++++++++++++++++++--------- src/themes/gantt.scss | 6 ++++++ 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index b7a6da8904..f1bbdb29b0 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -142,6 +142,11 @@ 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]) { @@ -151,25 +156,25 @@ export const draw = function (text, id) { if (d.active) { if (d.crit) { - return res + ' activeCrit' + secNum + return res + classStr + ' activeCrit' + secNum } else { - return res + ' active' + secNum + return res + classStr + ' active' + secNum } } if (d.done) { if (d.crit) { - return res + ' doneCrit' + secNum + return res + classStr + ' doneCrit' + secNum } else { - return res + ' done' + secNum + return res + classStr + ' done' + secNum } } if (d.crit) { - return res + ' crit' + secNum + return res + classStr + ' crit' + secNum } - return res + ' task' + secNum + return res + classStr + ' task' + secNum }) rectangles.append('a').attr('href', function (d) { @@ -206,6 +211,13 @@ export const draw = function (text, id) { const startX = timeScale(d.startTime) const endX = timeScale(d.endTime) 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]) { @@ -237,12 +249,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 } }) } diff --git a/src/themes/gantt.scss b/src/themes/gantt.scss index 6793135ec8..376b1cb91a 100644 --- a/src/themes/gantt.scss +++ b/src/themes/gantt.scss @@ -90,6 +90,12 @@ font-size: 11px; } +.task.clickable { + cursor: pointer; +} +.taskText.clickable { + cursor: pointer; +} /* Specific task settings for the sections*/ From 856591d253ce4b7d45aef72c985344a908af3473 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sat, 9 Mar 2019 22:18:37 +0100 Subject: [PATCH 08/22] Removed STR as it is no longer required; made 'click' a state such that it returns the id that is specified after the keyword --- src/diagrams/gantt/parser/gantt.jison | 40 ++++++++++++--------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index eb02f775f4..2f142ba2bd 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -10,9 +10,7 @@ /* string is used to detect blocks that are surrounded by double quotes. */ /* copied from /src/diagrams/flowchart/parser/flow.jison */ %x string -/* a valid callback looks like this: callback(example_callback_arg) */ -/* callback prefix: callback( */ -/* callback suffix: ) */ +%x click %x href %x callbackname %x callbackargs @@ -22,29 +20,28 @@ \s+ /* skip whitespace */ \#[^\n]* /* skip comments */ \%%[^\n]* /* skip comments */ -/* Strings are used to detect tooltips */ -["] this.begin("string"); -["] this.popState(); -[^"]* return 'STR'; -"href"\s+ this.begin("href"); -[\s\n] this.popState(); -[^\s\n]* return 'href'; +"href"[\s]+ this.begin("href"); /* return the next word after 'href' */ +[\s\n] this.popState(); /* e.g. return https://example.com for 'href https://example.com' */ +[^\s\n]* return 'href'; /* the specified word must not contain whitespace */ -"call"\s+ this.begin("callbackname"); +"call" this.begin("callbackname"); \( this.popState(); this.begin("callbackargs"); [^(]* return 'callbackname'; \) this.popState(); [^)]* return 'callbackargs'; -"click" return 'click'; +"click"[\s]+ this.begin("click"); +[\s\n] this.popState(); +[^\s\n]* return 'click'; + "gantt" return 'gantt'; "dateFormat"\s[^#\n;]+ return 'dateFormat'; "axisFormat"\s[^#\n;]+ return 'axisFormat'; \d\d\d\d"-"\d\d"-"\d\d return 'date'; "title"\s[^#\n;]+ return 'title'; "section"\s[^#:\n;]+ return 'section'; -[^#:()\n;]+ return 'taskTxt'; +[^#:()\n;]+ return 'taskTxt'; ":"[^#\n;]+ return 'taskData'; ":" return ':'; <> return 'EOF'; @@ -84,17 +81,16 @@ statement ; clickStatement - : click STR callbackname callbackargs {$$ = $1;yy.setClickEvent($2, $3, $4);} - | click STR callbackname callbackargs href {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setLink($2,$5);} - | click STR href callbackname callbackargs {$$ = $1;yy.setClickEvent($2, $4, $5);yy.setLink($2,$3);} - | click STR href {$$ = $1;yy.setLink($2, $3);} + : click callbackname callbackargs {$$ = $1;yy.setClickEvent($1, $2, $3);} + | click callbackname callbackargs href {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setLink($1,$4);} + | click href callbackname callbackargs {$$ = $1;yy.setClickEvent($1, $3, $4);yy.setLink($1,$2);} + | click href {$$ = $1;yy.setLink($1, $2);} ; - clickStatementDebug - : click STR callbackname callbackargs {$$=$1+' ' + $2 + ' ' + $3 + ' ' + $4;} - | click STR callbackname callbackargs href {$$=$1+' ' + $2 + ' ' + $3 + ' ' + $4 + ' ' + $5;} - | click STR href callbackname callbackargs {$$=$1+' ' + $2 + ' ' + $3 + ' ' + $4 + ' ' + $5;} - | click STR href {$$=$1+' ' + $2 + ' ' + $3;} + : click callbackname callbackargs {$$=$1+' ' + $2 + ' ' + $3;} + | click callbackname callbackargs href {$$=$1+' ' + $2 + ' ' + $3 + ' ' + $4;} + | click href callbackname callbackargs {$$=$1+' ' + $2 + ' ' + $3 + ' ' + $4;} + | click href {$$=$1+' ' + $2;} ; %% From d169641c999d5c48541c726f54e928324c6a8bd2 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sat, 9 Mar 2019 22:19:08 +0100 Subject: [PATCH 09/22] Fixed lint issue --- src/diagrams/gantt/ganttRenderer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index f1bbdb29b0..51aa7ef46a 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -212,7 +212,6 @@ export const draw = function (text, id) { const endX = timeScale(d.endTime) const textWidth = this.getBBox().width - let classStr = '' if (d.classes.length > 0) { classStr = d.classes.join(' ') From 20b35cbe13d71cb815d10ae03505728872c65e52 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sat, 9 Mar 2019 22:42:27 +0100 Subject: [PATCH 10/22] Removed STR remains and fixed whitespace issue for 'call' which lead to undesired whitespace in function names --- src/diagrams/gantt/parser/gantt.jison | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index 2f142ba2bd..856148371b 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -9,7 +9,6 @@ /* string is used to detect blocks that are surrounded by double quotes. */ /* copied from /src/diagrams/flowchart/parser/flow.jison */ -%x string %x click %x href %x callbackname @@ -25,7 +24,7 @@ [\s\n] this.popState(); /* e.g. return https://example.com for 'href https://example.com' */ [^\s\n]* return 'href'; /* the specified word must not contain whitespace */ -"call" this.begin("callbackname"); +"call"[\s]+ this.begin("callbackname"); \( this.popState(); this.begin("callbackargs"); [^(]* return 'callbackname'; \) this.popState(); From b322a964cafc9953a82f97820372a3673503aa73 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sat, 9 Mar 2019 23:13:53 +0100 Subject: [PATCH 11/22] Code refactoring: Pushing functions is now to the funs list is now available in a separate function. Also, setLink no longer using the .link attribute and instead calls links directly via window.open --- src/diagrams/gantt/ganttDb.js | 48 +++++++++++++++++++---------------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js index 0cc76dbf2a..e21d28f971 100644 --- a/src/diagrams/gantt/ganttDb.js +++ b/src/diagrams/gantt/ganttDb.js @@ -294,8 +294,6 @@ export const addTask = function (descr, data) { data: data }, task: descr, - /* The link the rectangle will href to */ - link: undefined, classes: [] } const taskInfo = parseData(lastTaskID, data) @@ -325,8 +323,6 @@ export const addTaskOrg = function (descr, data) { type: currentSection, description: descr, task: descr, - /* The link the rectangle will href to */ - link: undefined, classes: [] } const taskInfo = compileData(lastTask, data) @@ -385,7 +381,7 @@ export const setLink = function (ids, linkStr) { ids.split(',').forEach(function (id) { let rawTask = findTaskById(id) if (typeof rawTask !== 'undefined') { - rawTask.link = linkStr + pushFun(id, ()=>{window.open(linkStr, "_self")}) } }) setClass(ids, 'clickable') @@ -412,26 +408,34 @@ const setClickFun = function (id, functionName, functionArgs) { } let rawTask = findTaskById(id) if (typeof rawTask !== 'undefined') { - funs.push(function (element) { - const elem = d3.select(element).select(`[id="${id}"]`) - if (elem !== null) { - elem.on('click', function () { - window[functionName](id, ...functionArgs) - }) - } - }) - funs.push(function (element) { - const elem = d3.select(element).select(`[id="${id}-text"]`) - if (elem !== null) { - elem.on('click', function () { - console.log('test') - window[functionName](id, ...functionArgs) - }) - } - }) + pushFun(id, () => {window[functionName](id, ...functionArgs)}) } } +/** + * 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 From 6fd790570a742adcc0b5183083007e41ea4fc545 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sat, 9 Mar 2019 23:14:28 +0100 Subject: [PATCH 12/22] Removed tag, moved id attribute to text section --- src/diagrams/gantt/ganttRenderer.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index 51aa7ef46a..c3b816e926 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -177,12 +177,9 @@ export const draw = function (text, id) { return res + classStr + ' task' + secNum }) - rectangles.append('a').attr('href', function (d) { - /* All rectangles are clickable. If d.link is not specified, '' is returned */ - return d.link - }) - .attr('id', function (d) { return d.id + '-text' }) + rectangles .append('text') + .attr('id', function (d) { return d.id + '-text' }) .text(function (d) { return d.task }) From 91651ca6ce031ee4fe257f191dbfc54b947ec746 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sat, 9 Mar 2019 23:17:13 +0100 Subject: [PATCH 13/22] Fixed lint issues --- src/diagrams/gantt/ganttDb.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js index e21d28f971..2662e33ab3 100644 --- a/src/diagrams/gantt/ganttDb.js +++ b/src/diagrams/gantt/ganttDb.js @@ -381,7 +381,7 @@ 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")}) + pushFun(id, () => { window.open(linkStr, '_self') }) } }) setClass(ids, 'clickable') @@ -408,7 +408,7 @@ const setClickFun = function (id, functionName, functionArgs) { } let rawTask = findTaskById(id) if (typeof rawTask !== 'undefined') { - pushFun(id, () => {window[functionName](id, ...functionArgs)}) + pushFun(id, () => { window[functionName](id, ...functionArgs) }) } } @@ -417,7 +417,7 @@ const setClickFun = function (id, functionName, functionArgs) { * @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){ +const pushFun = function (id, callbackFunction) { funs.push(function (element) { const elem = d3.select(element).select(`[id="${id}"]`) if (elem !== null) { From 6c8454452134735a87b8e5e05b68090d0e76aa27 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sun, 10 Mar 2019 11:49:16 +0100 Subject: [PATCH 14/22] Changed href to scan for the next double quoted word. This allows whitespace in links and resolves the issue with href ending with EOF --- src/diagrams/gantt/parser/gantt.jison | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index 856148371b..358f157dac 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -20,9 +20,9 @@ \#[^\n]* /* skip comments */ \%%[^\n]* /* skip comments */ -"href"[\s]+ this.begin("href"); /* return the next word after 'href' */ -[\s\n] this.popState(); /* e.g. return https://example.com for 'href https://example.com' */ -[^\s\n]* return 'href'; /* the specified word must not contain whitespace */ +"href"[\s]+["] this.begin("href"); /* return the next double quoted word after 'href' */ +["] this.popState(); /* e.g. return https://example.com for 'href "https://example.com"' */ +[^"]* return 'href'; "call"[\s]+ this.begin("callbackname"); \( this.popState(); this.begin("callbackargs"); From 1dfff7ac0eb61ceebae6fa7074adf5cb7cc9c43b Mon Sep 17 00:00:00 2001 From: abzicht Date: Sun, 10 Mar 2019 13:41:02 +0100 Subject: [PATCH 15/22] Added documentation and implemented empty functionarguments --- src/diagrams/gantt/parser/gantt.jison | 55 +++++++++++++++++++++------ 1 file changed, 44 insertions(+), 11 deletions(-) diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index 358f157dac..723052b140 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -7,8 +7,6 @@ %options case-insensitive -/* string is used to detect blocks that are surrounded by double quotes. */ -/* copied from /src/diagrams/flowchart/parser/flow.jison */ %x click %x href %x callbackname @@ -20,16 +18,37 @@ \#[^\n]* /* skip comments */ \%%[^\n]* /* skip comments */ -"href"[\s]+["] this.begin("href"); /* return the next double quoted word after 'href' */ -["] this.popState(); /* e.g. return https://example.com for 'href "https://example.com"' */ +/* +---interactivity command--- +'href' adds a link to the specified task. 'href' can only be specified when the +line was introduced with 'click'. +'href ""' attaches the specified link to the task that was specified by 'click'. +*/ +"href"[\s]+["] this.begin("href"); +["] this.popState(); [^"]* return 'href'; +/* +---interactivity command--- +'call' adds a callback to the specified task. 'call' can only be specified when +the line was introdcued with 'click'. +'call ()' attaches the function 'callbackname' with the specified +arguments to the task that was specified by 'click'. +Function arguments are optional: 'call ()' simply executes 'callbackname' without any arguments. +*/ "call"[\s]+ this.begin("callbackname"); +\([\s]*\) this.popState(); \( this.popState(); this.begin("callbackargs"); [^(]* return 'callbackname'; \) this.popState(); [^)]* return 'callbackargs'; +/* +'click' is the keyword to introduce a line that contains interactivity commands. +'click' must be followed by an existing task-id. All commands are attached to +that id. +'click ' can be followed by href or call commands in any desired order +*/ "click"[\s]+ this.begin("click"); [\s\n] this.popState(); [^\s\n]* return 'click'; @@ -79,17 +98,31 @@ statement | taskTxt taskData {yy.addTask($1,$2);$$='task';} ; +/* +click allows any combination of href and call. +*/ clickStatement - : click callbackname callbackargs {$$ = $1;yy.setClickEvent($1, $2, $3);} + : click callbackname {$$ = $1;yy.setClickEvent($1, $2, null);} + | click callbackname callbackargs {$$ = $1;yy.setClickEvent($1, $2, $3);} + + | click callbackname href {$$ = $1;yy.setClickEvent($1, $2, null);yy.setLink($1,$3);} | click callbackname callbackargs href {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setLink($1,$4);} + + | click href callbackname {$$ = $1;yy.setClickEvent($1, $3, null);yy.setLink($1,$2);} | click href callbackname callbackargs {$$ = $1;yy.setClickEvent($1, $3, $4);yy.setLink($1,$2);} + | click href {$$ = $1;yy.setLink($1, $2);} ; clickStatementDebug - : click callbackname callbackargs {$$=$1+' ' + $2 + ' ' + $3;} - | click callbackname callbackargs href {$$=$1+' ' + $2 + ' ' + $3 + ' ' + $4;} - | click href callbackname callbackargs {$$=$1+' ' + $2 + ' ' + $3 + ' ' + $4;} - | click href {$$=$1+' ' + $2;} - ; -%% + : click callbackname {$$=$1 + ' ' + $2;} + | click callbackname href {$$=$1 + ' ' + $2 + ' ' + $3;} + + | click callbackname callbackargs {$$=$1 + ' ' + $2 + ' ' + $3;} + | click callbackname callbackargs href {$$=$1 + ' ' + $2 + ' ' + $3 + ' ' + $4;} + + | click href callbackname {$$=$1 + ' ' + $2 + ' ' + $3;} + | click href callbackname callbackargs {$$=$1 + ' ' + $2 + ' ' + $3 + ' ' + $4;} + + | click href {$$=$1 + ' ' + $2;} + ;%% From 63184d53c1dda1b36807cd2c087eed8eefee6047 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sun, 10 Mar 2019 13:41:59 +0100 Subject: [PATCH 16/22] Argument processing now allows double quoted strings --- src/diagrams/gantt/ganttDb.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js index 2662e33ab3..6854725755 100644 --- a/src/diagrams/gantt/ganttDb.js +++ b/src/diagrams/gantt/ganttDb.js @@ -402,13 +402,28 @@ export const setClass = function (ids, className) { } const setClickFun = function (id, functionName, functionArgs) { - functionArgs = functionArgs.split(',') 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](id, ...functionArgs) }) + pushFun(id, () => { window[functionName](...argList) }) } } From fa04e3de75e04386d4aa722b4cd038ae64089063 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sun, 10 Mar 2019 13:42:43 +0100 Subject: [PATCH 17/22] Adding jison processed js file because it seems that this is always committed to github --- src/diagrams/gantt/parser/gantt.js | 100 +++++++++++++++++++++++------ 1 file changed, 79 insertions(+), 21 deletions(-) diff --git a/src/diagrams/gantt/parser/gantt.js b/src/diagrams/gantt/parser/gantt.js index c72af3eb9e..f2ff64d39a 100644 --- a/src/diagrams/gantt/parser/gantt.js +++ b/src/diagrams/gantt/parser/gantt.js @@ -72,12 +72,12 @@ } */ var parser = (function(){ -var o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[6,8,10,11,12,13,14,15],$V1=[1,9],$V2=[1,10],$V3=[1,11],$V4=[1,12],$V5=[1,13]; +var o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[6,8,10,11,12,13,14,16,18],$V1=[1,9],$V2=[1,10],$V3=[1,11],$V4=[1,12],$V5=[1,14],$V6=[1,15]; var parser = {trace: function trace () { }, yy: {}, -symbols_: {"error":2,"start":3,"gantt":4,"document":5,"EOF":6,"line":7,"SPACE":8,"statement":9,"NL":10,"dateFormat":11,"axisFormat":12,"title":13,"section":14,"taskTxt":15,"taskData":16,"$accept":0,"$end":1}, -terminals_: {2:"error",4:"gantt",6:"EOF",8:"SPACE",10:"NL",11:"dateFormat",12:"axisFormat",13:"title",14:"section",15:"taskTxt",16:"taskData"}, -productions_: [0,[3,3],[5,0],[5,2],[7,2],[7,1],[7,1],[7,1],[9,1],[9,1],[9,1],[9,1],[9,2]], +symbols_: {"error":2,"start":3,"gantt":4,"document":5,"EOF":6,"line":7,"SPACE":8,"statement":9,"NL":10,"dateFormat":11,"axisFormat":12,"title":13,"section":14,"clickStatement":15,"taskTxt":16,"taskData":17,"click":18,"callbackname":19,"callbackargs":20,"href":21,"clickStatementDebug":22,"$accept":0,"$end":1}, +terminals_: {2:"error",4:"gantt",6:"EOF",8:"SPACE",10:"NL",11:"dateFormat",12:"axisFormat",13:"title",14:"section",16:"taskTxt",17:"taskData",18:"click",19:"callbackname",20:"callbackargs",21:"href"}, +productions_: [0,[3,3],[5,0],[5,2],[7,2],[7,1],[7,1],[7,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,2],[15,2],[15,3],[15,3],[15,4],[15,3],[15,4],[15,2],[22,2],[22,3],[22,3],[22,4],[22,4],[22,3],[22,2]], performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) { /* this == yyval */ @@ -110,12 +110,48 @@ break; case 11: yy.addSection($$[$0].substr(8));this.$=$$[$0].substr(8); break; -case 12: +case 13: yy.addTask($$[$0-1],$$[$0]);this.$='task'; break; +case 14: +this.$ = $$[$0-1];yy.setClickEvent($$[$0-1], $$[$0], null); +break; +case 15: +this.$ = $$[$0-2];yy.setClickEvent($$[$0-2], $$[$0-1], $$[$0]); +break; +case 16: +this.$ = $$[$0-2];yy.setClickEvent($$[$0-2], $$[$0-1], null);yy.setLink($$[$0-2],$$[$0]); +break; +case 17: +this.$ = $$[$0-3];yy.setClickEvent($$[$0-3], $$[$0-2], $$[$0-1]);yy.setLink($$[$0-3],$$[$0]); +break; +case 18: +this.$ = $$[$0-2];yy.setClickEvent($$[$0-2], $$[$0], null);yy.setLink($$[$0-2],$$[$0-1]); +break; +case 19: +this.$ = $$[$0-3];yy.setClickEvent($$[$0-3], $$[$0-1], $$[$0]);yy.setLink($$[$0-3],$$[$0-2]); +break; +case 20: +this.$ = $$[$0-1];yy.setLink($$[$0-1], $$[$0]); +break; +case 21: +this.$=$$[$0-1] + ' ' + $$[$0]; +break; +case 22: +this.$=$$[$0-2] + ' ' + $$[$0-1] + ' ' + $$[$0]; +break; +case 23: case 26: +this.$=$$[$0-2]+' ' + $$[$0-1] + ' ' + $$[$0]; +break; +case 24: case 25: +this.$=$$[$0-3]+' ' + $$[$0-2] + ' ' + $$[$0-1] + ' ' + $$[$0]; +break; +case 27: +this.$=$$[$0-1]+' ' + $$[$0]; +break; } }, -table: [{3:1,4:[1,2]},{1:[3]},o($V0,[2,2],{5:3}),{6:[1,4],7:5,8:[1,6],9:7,10:[1,8],11:$V1,12:$V2,13:$V3,14:$V4,15:$V5},o($V0,[2,7],{1:[2,1]}),o($V0,[2,3]),{9:14,11:$V1,12:$V2,13:$V3,14:$V4,15:$V5},o($V0,[2,5]),o($V0,[2,6]),o($V0,[2,8]),o($V0,[2,9]),o($V0,[2,10]),o($V0,[2,11]),{16:[1,15]},o($V0,[2,4]),o($V0,[2,12])], +table: [{3:1,4:[1,2]},{1:[3]},o($V0,[2,2],{5:3}),{6:[1,4],7:5,8:[1,6],9:7,10:[1,8],11:$V1,12:$V2,13:$V3,14:$V4,15:13,16:$V5,18:$V6},o($V0,[2,7],{1:[2,1]}),o($V0,[2,3]),{9:16,11:$V1,12:$V2,13:$V3,14:$V4,15:13,16:$V5,18:$V6},o($V0,[2,5]),o($V0,[2,6]),o($V0,[2,8]),o($V0,[2,9]),o($V0,[2,10]),o($V0,[2,11]),o($V0,[2,12]),{17:[1,17]},{19:[1,18],21:[1,19]},o($V0,[2,4]),o($V0,[2,13]),o($V0,[2,14],{20:[1,20],21:[1,21]}),o($V0,[2,20],{19:[1,22]}),o($V0,[2,15],{21:[1,23]}),o($V0,[2,16]),o($V0,[2,18],{20:[1,24]}),o($V0,[2,17]),o($V0,[2,19])], defaultActions: {}, parseError: function parseError (str, hash) { if (hash.recoverable) { @@ -593,8 +629,6 @@ stateStackSize:function stateStackSize() { }, options: {"case-insensitive":true}, performAction: function anonymous(yy,yy_,$avoiding_name_collisions,YY_START) { - // Pre-lexer code can go here - var YYSTATE=YY_START; switch($avoiding_name_collisions) { case 0:return 10; @@ -605,32 +639,56 @@ case 2:/* skip comments */ break; case 3:/* skip comments */ break; -case 4:return 4; +case 4:this.begin("href"); +break; +case 5:this.popState(); +break; +case 6:return 21; +break; +case 7:this.begin("callbackname"); +break; +case 8:this.popState(); +break; +case 9:this.popState(); this.begin("callbackargs"); +break; +case 10:return 19; +break; +case 11:this.popState(); +break; +case 12:return 20; +break; +case 13:this.begin("click"); +break; +case 14:this.popState(); +break; +case 15:return 18; +break; +case 16:return 4; break; -case 5:return 11; +case 17:return 11; break; -case 6:return 12; +case 18:return 12; break; -case 7:return 'date'; +case 19:return 'date'; break; -case 8:return 13; +case 20:return 13; break; -case 9:return 14; +case 21:return 14; break; -case 10:return 15; +case 22:return 16; break; -case 11:return 16; +case 23:return 17; break; -case 12:return ':'; +case 24:return ':'; break; -case 13:return 6; +case 25:return 6; break; -case 14:return 'INVALID'; +case 26:return 'INVALID'; break; } }, -rules: [/^(?:[\n]+)/i,/^(?:\s+)/i,/^(?:#[^\n]*)/i,/^(?:%[^\n]*)/i,/^(?:gantt\b)/i,/^(?:dateFormat\s[^#\n;]+)/i,/^(?:axisFormat\s[^#\n;]+)/i,/^(?:\d\d\d\d-\d\d-\d\d\b)/i,/^(?:title\s[^#\n;]+)/i,/^(?:section\s[^#:\n;]+)/i,/^(?:[^#:\n;]+)/i,/^(?::[^#\n;]+)/i,/^(?::)/i,/^(?:$)/i,/^(?:.)/i], -conditions: {"INITIAL":{"rules":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14],"inclusive":true}} +rules: [/^(?:[\n]+)/i,/^(?:\s+)/i,/^(?:#[^\n]*)/i,/^(?:%[^\n]*)/i,/^(?:href[\s]+["])/i,/^(?:["])/i,/^(?:[^"]*)/i,/^(?:call[\s]+)/i,/^(?:\([\s]*\))/i,/^(?:\()/i,/^(?:[^(]*)/i,/^(?:\))/i,/^(?:[^)]*)/i,/^(?:click[\s]+)/i,/^(?:[\s\n])/i,/^(?:[^\s\n]*)/i,/^(?:gantt\b)/i,/^(?:dateFormat\s[^#\n;]+)/i,/^(?:axisFormat\s[^#\n;]+)/i,/^(?:\d\d\d\d-\d\d-\d\d\b)/i,/^(?:title\s[^#\n;]+)/i,/^(?:section\s[^#:\n;]+)/i,/^(?:[^#:()\n;]+)/i,/^(?::[^#\n;]+)/i,/^(?::)/i,/^(?:$)/i,/^(?:.)/i], +conditions: {"callbackargs":{"rules":[11,12],"inclusive":false},"callbackname":{"rules":[8,9,10],"inclusive":false},"href":{"rules":[5,6],"inclusive":false},"click":{"rules":[14,15],"inclusive":false},"INITIAL":{"rules":[0,1,2,3,4,7,13,16,17,18,19,20,21,22,23,24,25,26],"inclusive":true}} }); return lexer; })(); From d2eb507e7d891ca2b691158ed395ea509a1d5953 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sun, 10 Mar 2019 13:43:20 +0100 Subject: [PATCH 18/22] Adding styles for clickable tasks --- src/themes/dark/index.scss | 1 + src/themes/default/index.scss | 1 + src/themes/forest/index.scss | 1 + src/themes/gantt.scss | 5 +++-- src/themes/neutral/index.scss | 1 + 5 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/themes/dark/index.scss b/src/themes/dark/index.scss index 579d871b2f..c74d9ff52d 100644 --- a/src/themes/dark/index.scss +++ b/src/themes/dark/index.scss @@ -43,6 +43,7 @@ $taskBkgColor: $mainBkg; $taskTextColor: $darkTextColor; $taskTextLightColor: $mainContrastColor; $taskTextOutsideColor: $taskTextLightColor; +$taskTextClickableColor: #003163; $activeTaskBorderColor: rgba(255, 255, 255, 0.5); $activeTaskBkgColor: #81B1DB; $gridColor: $mainContrastColor; diff --git a/src/themes/default/index.scss b/src/themes/default/index.scss index 2718eb3efe..8bb0fd4823 100644 --- a/src/themes/default/index.scss +++ b/src/themes/default/index.scss @@ -42,6 +42,7 @@ $taskTextLightColor: white; $taskTextColor: $taskTextLightColor; $taskTextDarkColor: black; $taskTextOutsideColor: $taskTextDarkColor; +$taskTextClickableColor: #003163; $activeTaskBorderColor: #534fbc; $activeTaskBkgColor: #bfc7ff; $gridColor: lightgrey; diff --git a/src/themes/forest/index.scss b/src/themes/forest/index.scss index c4a7122971..4d6760848b 100644 --- a/src/themes/forest/index.scss +++ b/src/themes/forest/index.scss @@ -43,6 +43,7 @@ $taskTextLightColor: white; $taskTextColor: $taskTextLightColor; $taskTextDarkColor: black; $taskTextOutsideColor: $taskTextDarkColor; +$taskTextClickableColor: #003163; $activeTaskBorderColor: $taskBorderColor; $activeTaskBkgColor: $mainBkg; $gridColor: lightgrey; diff --git a/src/themes/gantt.scss b/src/themes/gantt.scss index 376b1cb91a..37d4144d2c 100644 --- a/src/themes/gantt.scss +++ b/src/themes/gantt.scss @@ -66,7 +66,6 @@ /* Task styling */ - /* Default task */ .task { @@ -95,6 +94,8 @@ } .taskText.clickable { cursor: pointer; + fill: $taskTextClickableColor !important; + font-weight: bold; } /* Specific task settings for the sections*/ @@ -115,7 +116,7 @@ } .taskTextOutside0, -.taskTextOutside2, +.taskTextOutside2 { fill: $taskTextOutsideColor; } diff --git a/src/themes/neutral/index.scss b/src/themes/neutral/index.scss index ea41b9b8c2..7e12c5a0bd 100644 --- a/src/themes/neutral/index.scss +++ b/src/themes/neutral/index.scss @@ -47,6 +47,7 @@ $taskTextLightColor: white; $taskTextColor: $taskTextLightColor; $taskTextDarkColor: $text; $taskTextOutsideColor: $taskTextDarkColor; +$taskTextClickableColor: #003163; $activeTaskBorderColor: $taskBorderColor; $activeTaskBkgColor: $mainBkg; $gridColor: lighten($border1, 30%); From c44ff8a70fc8705d072514458b75f522e6711893 Mon Sep 17 00:00:00 2001 From: abzicht Date: Sun, 10 Mar 2019 13:56:49 +0100 Subject: [PATCH 19/22] Adding a gantt clickable example to the existing gantt diagram --- dist/index.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/dist/index.html b/dist/index.html index 47bf945d57..1fd3aae968 100644 --- a/dist/index.html +++ b/dist/index.html @@ -288,6 +288,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 @@ -346,6 +353,11 @@ });