version 3.1.0 - label click

d-band · Aug 31, 2020 · 4d1fa7a · 4d1fa7a
1 parent 8d43ba8
commit 4d1fa7a
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 59 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -14,6 +14,12 @@
       fill: #ffbf5e!important;
       stroke: #ffa011!important;
     }
+    .gantt-label {
+      cursor: pointer;
+    }
+    .gantt-label:hover {
+      fill: #1582dc!important;
+    }
   </style>
 </head>
 <body>

diff --git a/dist/gantt.js b/dist/gantt.js
@@ -1,11 +1,21 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
 	typeof define === 'function' && define.amd ? define(['exports'], factory) :
-	(global = global || self, factory(global.Gantt = {}));
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Gantt = {}));
 }(this, (function (exports) { 'use strict';
 
-	function createCommonjsModule(fn, module) {
-		return module = { exports: {} }, fn(module, module.exports), module.exports;
+	function createCommonjsModule(fn, basedir, module) {
+		return module = {
+		  path: basedir,
+		  exports: {},
+		  require: function (path, base) {
+	      return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+	    }
+		}, fn(module, module.exports), module.exports;
+	}
+
+	function commonjsRequire () {
+		throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 	}
 
 	var _extends_1 = createCommonjsModule(function (module) {
@@ -101,7 +111,7 @@
 	  addChild(children, childNodes);
 
 	  if (typeof tag === 'function') {
-	    return tag(_objectSpread({}, props, {
+	    return tag(_objectSpread(_objectSpread({}, props), {}, {
 	      children: childNodes
 	    }));
 	  }
@@ -244,7 +254,7 @@
 	  var map = {};
 	  var tmp = tasks.map(function (t, i) {
 	    map[t.id] = i;
-	    return _objectSpread$1({}, t, {
+	    return _objectSpread$1(_objectSpread$1({}, t), {}, {
 	      children: [],
 	      links: []
 	    });
@@ -770,14 +780,19 @@
 	function Labels(_ref) {
 	  var styles = _ref.styles,
 	      data = _ref.data,
+	      _onClick = _ref.onClick,
 	      rowHeight = _ref.rowHeight,
 	      offsetY = _ref.offsetY;
 	  return h("g", null, data.map(function (v, i) {
 	    return h("text", {
 	      key: i,
 	      x: 10,
 	      y: (i + 0.5) * rowHeight + offsetY,
-	      style: styles.label
+	      "class": "gantt-label",
+	      style: styles.label,
+	      onClick: function onClick() {
+	        return _onClick(v);
+	      }
 	    }, v.text);
 	  }));
 	}
@@ -1140,21 +1155,21 @@
 	    week: {
 	      fill: 'rgba(252, 248, 227, .6)'
 	    },
-	    box: _objectSpread$2({}, thickLine, {
+	    box: _objectSpread$2(_objectSpread$2({}, thickLine), {}, {
 	      fill: bgColor
 	    }),
 	    line: line,
 	    cline: redLine,
 	    bline: thickLine,
 	    label: text,
-	    groupLabel: _objectSpread$2({}, text, {
+	    groupLabel: _objectSpread$2(_objectSpread$2({}, text), {}, {
 	      'font-weight': '600'
 	    }),
-	    text1: _objectSpread$2({}, text, {}, smallText, {
+	    text1: _objectSpread$2(_objectSpread$2(_objectSpread$2({}, text), smallText), {}, {
 	      'text-anchor': 'end'
 	    }),
-	    text2: _objectSpread$2({}, text, {}, smallText),
-	    text3: _objectSpread$2({}, text, {}, smallText, {
+	    text2: _objectSpread$2(_objectSpread$2({}, text), smallText),
+	    text3: _objectSpread$2(_objectSpread$2(_objectSpread$2({}, text), smallText), {}, {
 	      'text-anchor': 'middle'
 	    }),
 	    link: {
@@ -1281,6 +1296,7 @@
 	  }), maxTextWidth > 0 ? h(Labels, {
 	    styles: styles,
 	    data: data,
+	    onClick: onClick,
 	    offsetY: offsetY,
 	    rowHeight: rowHeight
 	  }) : null, showLinks ? h(LinkLine, {
@@ -1291,7 +1307,6 @@
 	    current: current,
 	    offsetY: offsetY,
 	    minTime: minTime,
-	    onClick: onClick,
 	    rowHeight: rowHeight,
 	    barHeight: barHeight,
 	    maxTextWidth: maxTextWidth
@@ -1344,7 +1359,7 @@
 	        node.style[sk] = v[sk];
 	      });
 	    } else if (k === 'onClick') {
-	      if (typeof v === 'function' && node.tagName === 'g') {
+	      if (typeof v === 'function') {
 	        node.addEventListener('click', v);
 	      }
 	    } else {
@@ -1373,9 +1388,7 @@
 
 	function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-	var SVGGantt =
-	/*#__PURE__*/
-	function () {
+	var SVGGantt = /*#__PURE__*/function () {
 	  function SVGGantt(element, data) {
 	    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
@@ -1409,7 +1422,7 @@
 	  }, {
 	    key: "setOptions",
 	    value: function setOptions(options) {
-	      this.options = _objectSpread$3({}, this.options, {}, options);
+	      this.options = _objectSpread$3(_objectSpread$3({}, this.options), options);
 	      this.render();
 	    }
 	  }, {
@@ -1434,7 +1447,7 @@
 	        options.maxTextWidth = max(data.map(w), 0);
 	      }
 
-	      var props = _objectSpread$3({}, options, {
+	      var props = _objectSpread$3(_objectSpread$3({}, options), {}, {
 	        start: start,
 	        end: end
 	      });
@@ -1622,9 +1635,7 @@
 
 	function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-	var CanvasGantt =
-	/*#__PURE__*/
-	function () {
+	var CanvasGantt = /*#__PURE__*/function () {
 	  function CanvasGantt(element, data) {
 	    var _this = this;
 
@@ -1664,7 +1675,7 @@
 	  }, {
 	    key: "setOptions",
 	    value: function setOptions(options) {
-	      this.options = _objectSpread$4({}, this.options, {}, options);
+	      this.options = _objectSpread$4(_objectSpread$4({}, this.options), options);
 	      this.render();
 	    }
 	  }, {
@@ -1685,7 +1696,7 @@
 	        options.maxTextWidth = max(data.map(w), 0);
 	      }
 
-	      var props = _objectSpread$4({}, options, {
+	      var props = _objectSpread$4(_objectSpread$4({}, options), {}, {
 	        start: start,
 	        end: end
 	      });
@@ -1747,9 +1758,7 @@
 
 	function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-	var StrGantt =
-	/*#__PURE__*/
-	function () {
+	var StrGantt = /*#__PURE__*/function () {
 	  function StrGantt(data) {
 	    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -1780,7 +1789,7 @@
 	  }, {
 	    key: "setOptions",
 	    value: function setOptions(options) {
-	      this.options = _objectSpread$5({}, this.options, {}, options);
+	      this.options = _objectSpread$5(_objectSpread$5({}, this.options), options);
 	    }
 	  }, {
 	    key: "render",
@@ -1790,7 +1799,7 @@
 	          end = this.end,
 	          options = this.options;
 
-	      var props = _objectSpread$5({}, options, {
+	      var props = _objectSpread$5(_objectSpread$5({}, options), {}, {
 	        start: start,
 	        end: end
 	      });

diff --git a/dist/gantt.min.js b/dist/gantt.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gantt",
-  "version": "3.0.12",
+  "version": "3.1.0",
   "description": "Gantt chart library using jsx support SVG, Canvas and SSR",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -41,27 +41,27 @@
   },
   "homepage": "https://github.com/d-band/gantt#readme",
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-external-helpers": "^7.8.3",
-    "@babel/plugin-transform-react-jsx": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/runtime": "^7.8.4",
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "babel-eslint": "^10.0.3",
-    "cross-env": "^7.0.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "gh-pages": "^2.2.0",
-    "rimraf": "^3.0.1",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.11.4",
+    "@babel/plugin-external-helpers": "^7.10.4",
+    "@babel/plugin-transform-react-jsx": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.11.0",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/runtime": "^7.11.2",
+    "@rollup/plugin-babel": "^5.2.0",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "babel-eslint": "^10.1.0",
+    "cross-env": "^7.0.2",
+    "eslint": "^7.7.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.0",
+    "gh-pages": "^3.1.0",
+    "rimraf": "^3.0.2",
     "rollup": "^2.0.0",
-    "rollup-plugin-babel": "^4.3.3",
-    "uglify-js": "^3.7.7"
+    "uglify-js": "^3.10.3"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,4 +1,4 @@
-import babel from 'rollup-plugin-babel';
+import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import nodeResolve from '@rollup/plugin-node-resolve';
 
@@ -29,8 +29,7 @@ export default {
         '@babel/plugin-external-helpers',
         '@babel/plugin-transform-runtime'
       ],
-      runtimeHelpers: true,
-      externalHelpers: true,
+      babelHelpers: 'runtime',
       exclude: 'node_modules/**'
     })
   ]

diff --git a/src/gantt/Labels.js b/src/gantt/Labels.js
@@ -1,7 +1,7 @@
 import h from '../h';
 
 export default function Labels({
-  styles, data, rowHeight, offsetY
+  styles, data, onClick, rowHeight, offsetY
 }) {
   return (
     <g>
@@ -10,7 +10,9 @@ export default function Labels({
           key={i}
           x={10}
           y={(i + 0.5) * rowHeight + offsetY}
+          class="gantt-label"
           style={styles.label}
+          onClick={() => onClick(v)}
         >
           {v.text}
         </text>

diff --git a/src/gantt/index.js b/src/gantt/index.js
@@ -97,6 +97,7 @@ export default function Gantt({
         <Labels
           styles={styles}
           data={data}
+          onClick={onClick}
           offsetY={offsetY}
           rowHeight={rowHeight}
         />
@@ -110,7 +111,6 @@ export default function Gantt({
           current={current}
           offsetY={offsetY}
           minTime={minTime}
-          onClick={onClick}
           rowHeight={rowHeight}
           barHeight={barHeight}
           maxTextWidth={maxTextWidth}

diff --git a/src/gantt/styles.js b/src/gantt/styles.js
@@ -26,7 +26,8 @@ export default function getStyles({
   thickLineWidth = '1.4px',
   fontSize = SIZE,
   smallFontSize = '12px',
-  fontFamily = TYPE
+  fontFamily = TYPE,
+  whiteSpace = 'pre'
 }) {
   const line = {
     stroke: lineColor,
@@ -44,7 +45,8 @@ export default function getStyles({
     fill: textColor,
     'dominant-baseline': 'central',
     'font-size': fontSize,
-    'font-family': fontFamily
+    'font-family': fontFamily,
+    'white-space': whiteSpace
   };
   const smallText = {
     fill: lightTextColor,

diff --git a/src/render/svg.js b/src/render/svg.js
@@ -10,7 +10,7 @@ function applyProperties(node, props) {
         node.style[sk] = v[sk];
       });
     } else if (k === 'onClick') {
-      if (typeof v === 'function' && node.tagName === 'g') {
+      if (typeof v === 'function') {
         node.addEventListener('click', v);
       }
     } else {