From 920fdb32fba0c24c3a22758418431a3ee9f3351f Mon Sep 17 00:00:00 2001 From: armin Date: Sat, 25 Jul 2020 20:34:50 +0430 Subject: [PATCH 01/13] FEATURE: lazy load added REFACTOR: removing css import from js files --- dist/ChartContainer.css | 42 +- dist/ChartContainer.js | 592 +++++++++++++++------ dist/ChartNode.css | 364 ++++++++++++- dist/ChartNode.js | 394 ++++++++++++-- dist/service.js | 39 ++ package-lock.json | 2 +- package.json | 13 +- src/components/ChartContainer.js | 79 ++- src/components/ChartNode.js | 68 ++- src/custom-node-chart/custom-node-chart.js | 68 ++- src/index.js | 2 + 11 files changed, 1341 insertions(+), 322 deletions(-) create mode 100644 dist/service.js diff --git a/dist/ChartContainer.css b/dist/ChartContainer.css index bd43bd4..5c19de7 100644 --- a/dist/ChartContainer.css +++ b/dist/ChartContainer.css @@ -1,8 +1,10 @@ +/* global styles for orgchart */ .orgchart-container { box-sizing: border-box; position: relative; margin: 10px; height: 700px; + background-color: #fff; border: 2px dashed #aaa; border-radius: 5px; overflow: auto; @@ -12,13 +14,39 @@ .orgchart { box-sizing: border-box; display: inline-block; - background-image: linear-gradient( - 90deg, - rgba(200, 0, 0, 0.15) 10%, - rgba(0, 0, 0, 0) 10% - ), - linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%); + background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%); background-size: 10px 10px; - border: 1px dashed rgba(0, 0, 0, 0); + border: 1px dashed rgba(0,0,0,0); padding: 20px 20px 0 20px; } + +.orgchart-container .hidden { + display: none!important; +} + +.orgchart-container > .oc-mask { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 999; + text-align: center; + background-color: rgba(0,0,0,0.3); +} + +.orgchart-container > .oc-mask .spinner { + position: absolute; + top: calc(50% - 50px); + left: calc(50% - 50px); +} + +.orgchart-container > .oc-mask .spinner::before { + width: 100px; + height: 100px; + border-width: 10px; + border-radius: 50px; + border-top-color: rgba(68, 157, 68, 0.8); + border-bottom-color: rgba(68, 157, 68, 0.8); + border-left-color: rgba(68, 157, 68, 0.8); +} diff --git a/dist/ChartContainer.js b/dist/ChartContainer.js index 3251e91..d94cae5 100644 --- a/dist/ChartContainer.js +++ b/dist/ChartContainer.js @@ -1,40 +1,50 @@ "use strict"; +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; -var _react = _interopRequireDefault(require("react")); +var _react = _interopRequireWildcard(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); -var _ChartNode = _interopRequireDefault(require("./ChartNode")); +var _service = require("./service"); -require("./ChartContainer.css"); +var _jsonDigger = _interopRequireDefault(require("json-digger")); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +var _html2canvas = _interopRequireDefault(require("html2canvas")); -function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } +var _jspdf = _interopRequireDefault(require("jspdf")); -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +var _ChartNode = _interopRequireDefault(require("./ChartNode")); -function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } +function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } -function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } -function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } +function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } -function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } +function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } -function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } + +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } + +function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } + +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } + var propTypes = { datasource: _propTypes.default.object.isRequired, pan: _propTypes.default.bool, @@ -43,7 +53,12 @@ var propTypes = { zoominLimit: _propTypes.default.number, containerClass: _propTypes.default.string, chartClass: _propTypes.default.string, - nodeTemplate: _propTypes.default.elementType + NodeTemplate: _propTypes.default.elementType, + draggable: _propTypes.default.bool, + collapsible: _propTypes.default.bool, + multipleSelect: _propTypes.default.bool, + onClickNode: _propTypes.default.func, + onClickChart: _propTypes.default.func }; var defaultProps = { pan: false, @@ -51,198 +66,425 @@ var defaultProps = { zoomoutLimit: 0.5, zoominLimit: 7, containerClass: "", - chartClass: "" + chartClass: "", + draggable: false, + collapsible: true, + multipleSelect: false, + loadOnDemand: false }; +var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { + var datasource = _ref.datasource, + pan = _ref.pan, + zoom = _ref.zoom, + zoomoutLimit = _ref.zoomoutLimit, + zoominLimit = _ref.zoominLimit, + containerClass = _ref.containerClass, + chartClass = _ref.chartClass, + NodeTemplate = _ref.NodeTemplate, + draggable = _ref.draggable, + collapsible = _ref.collapsible, + multipleSelect = _ref.multipleSelect, + onClickNode = _ref.onClickNode, + onClickChart = _ref.onClickChart, + loadOnDemand = _ref.loadOnDemand; + var container = (0, _react.useRef)(); + var chart = (0, _react.useRef)(); + var downloadButton = (0, _react.useRef)(); + + var _useState = (0, _react.useState)(0), + _useState2 = _slicedToArray(_useState, 2), + startX = _useState2[0], + setStartX = _useState2[1]; + + var _useState3 = (0, _react.useState)(0), + _useState4 = _slicedToArray(_useState3, 2), + startY = _useState4[0], + setStartY = _useState4[1]; + + var _useState5 = (0, _react.useState)(""), + _useState6 = _slicedToArray(_useState5, 2), + transform = _useState6[0], + setTransform = _useState6[1]; + + var _useState7 = (0, _react.useState)(false), + _useState8 = _slicedToArray(_useState7, 2), + panning = _useState8[0], + setPanning = _useState8[1]; + + var _useState9 = (0, _react.useState)("default"), + _useState10 = _slicedToArray(_useState9, 2), + cursor = _useState10[0], + setCursor = _useState10[1]; + + var _useState11 = (0, _react.useState)(false), + _useState12 = _slicedToArray(_useState11, 2), + exporting = _useState12[0], + setExporting = _useState12[1]; + + var _useState13 = (0, _react.useState)(""), + _useState14 = _slicedToArray(_useState13, 2), + dataURL = _useState14[0], + setDataURL = _useState14[1]; + + var _useState15 = (0, _react.useState)(""), + _useState16 = _slicedToArray(_useState15, 2), + download = _useState16[0], + setDownload = _useState16[1]; + + var attachRel = function attachRel(data, flags) { + if (data.isLeaf === undefined) { + data.isLeaf = true; + } -var ChartContainer = -/*#__PURE__*/ -function (_React$Component) { - _inherits(ChartContainer, _React$Component); + data.relationship = flags + (data.children && data.children.length > 0 || !data.isLeaf ? 1 : 0); - function ChartContainer() { - var _this; + if (data.children && data.children.length > 0) { + data.children.forEach(function (item) { + attachRel(item, "1" + (data.children.length > 1 ? 1 : 0)); + }); + } - _classCallCheck(this, ChartContainer); + return data; + }; + + (0, _react.useEffect)(function () { + setDS(datasource); + }, [datasource]); + + var _useState17 = (0, _react.useState)(datasource), + _useState18 = _slicedToArray(_useState17, 2), + ds = _useState18[0], + setDS = _useState18[1]; + + var onLoadData = function onLoadData(node) { + setTimeout(function () { + var childrens = [{ + id: Math.random().toString(), + name: "Armin", + title: "department manager" + }, { + id: Math.random().toString(), + name: "Elon", + title: "department manager" + }]; + childrens.map(function (ch) { + ch.Hierarchy = node.Hierarchy ? node.Hierarchy.concat([node.id]) : [node.id]; + }); + onLoadDataFinished({ + id: node.id, + childrens: childrens + }); + }, 500); + }; - _this = _possibleConstructorReturn(this, _getPrototypeOf(ChartContainer).call(this)); + var onLoadDataFinished = function onLoadDataFinished(_ref2) { + var id = _ref2.id, + childrens = _ref2.childrens; - _defineProperty(_assertThisInitialized(_this), "startX", 0); + var newDs = _objectSpread({}, ds); - _defineProperty(_assertThisInitialized(_this), "startY", 0); + var treeCursor = newDs; + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; - _this.state = { - transform: "", - panning: false, - cursor: "default" - }; - return _this; - } - - _createClass(ChartContainer, [{ - key: "render", - value: function render() { - var _this$props = this.props, - datasource = _this$props.datasource, - containerClass = _this$props.containerClass, - chartClass = _this$props.chartClass; - return _react.default.createElement("div", { - className: "orgchart-container " + containerClass, - onWheel: this.props.zoom ? this.zoomHandler.bind(this) : undefined, - onMouseUp: this.props.pan && this.state.panning ? this.panEndHandler.bind(this) : undefined - }, _react.default.createElement("div", { - className: "orgchart " + chartClass, - style: { - transform: this.state.transform, - cursor: this.state.cursor - }, - onMouseDown: this.props.pan ? this.panStartHandler.bind(this) : undefined, - onMouseMove: this.props.pan && this.state.panning ? this.panHandler.bind(this) : undefined - }, _react.default.createElement("ul", null, _react.default.createElement(_ChartNode.default, { - datasource: datasource, - nodeTemplate: this.props.nodeTemplate - })))); - } - }, { - key: "panEndHandler", - value: function panEndHandler() { - this.setState({ - panning: false, - cursor: "default" - }); - } - }, { - key: "panHandler", - value: function panHandler(e) { - var newX = 0; - var newY = 0; - - if (!e.targetTouches) { - // pand on desktop - newX = e.pageX - this.startX; - newY = e.pageY - this.startY; - } else if (e.targetTouches.length === 1) { - // pan on mobile device - newX = e.targetTouches[0].pageX - this.startX; - newY = e.targetTouches[0].pageY - this.startY; - } else if (e.targetTouches.length > 1) { - return; - } + try { + var _loop = function _loop() { + var parent = _step.value; - if (this.state.transform === "") { - if (this.state.transform.indexOf("3d") === -1) { - this.setState({ - transform: "matrix(1,0,0,1," + newX + "," + newY + ")" - }); - } else { - this.setState({ - transform: "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0," + newX + ", " + newY + ",0,1)" + if (treeCursor.id !== parent) { + treeCursor = treeCursor.children.find(function (child) { + return child.id === parent; }); } - } else { - var matrix = this.state.transform.split(","); - - if (this.state.transform.indexOf("3d") === -1) { - matrix[4] = newX; - matrix[5] = newY + ")"; - } else { - matrix[12] = newX; - matrix[13] = newY; + }; + + for (var _iterator = childrens[0].Hierarchy[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + _loop(); + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return != null) { + _iterator.return(); } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } - this.setState({ - transform: matrix.join(",") - }); + treeCursor.children = childrens; + setDS(newDs); + }; + + var dsDigger = new _jsonDigger.default(datasource, "id", "children"); + + var clickChartHandler = function clickChartHandler(event) { + if (!event.target.closest(".oc-node")) { + if (onClickChart) { + onClickChart(); } + + _service.selectNodeService.clearSelectedNodeInfo(); } - }, { - key: "panStartHandler", - value: function panStartHandler(e) { - if (e.target.closest(".oc-node")) { - this.setState({ - panning: false - }); - return; + }; + + var panEndHandler = function panEndHandler() { + setPanning(false); + setCursor("default"); + }; + + var panHandler = function panHandler(e) { + var newX = 0; + var newY = 0; + + if (!e.targetTouches) { + // pand on desktop + newX = e.pageX - startX; + newY = e.pageY - startY; + } else if (e.targetTouches.length === 1) { + // pan on mobile device + newX = e.targetTouches[0].pageX - startX; + newY = e.targetTouches[0].pageY - startY; + } else if (e.targetTouches.length > 1) { + return; + } + + if (transform === "") { + if (transform.indexOf("3d") === -1) { + setTransform("matrix(1,0,0,1," + newX + "," + newY + ")"); } else { - this.setState({ - panning: true, - cursor: "move" - }); + setTransform("matrix3d(1,0,0,0,0,1,0,0,0,0,1,0," + newX + ", " + newY + ",0,1)"); } + } else { + var matrix = transform.split(","); - var lastX = 0; - var lastY = 0; + if (transform.indexOf("3d") === -1) { + matrix[4] = newX; + matrix[5] = newY + ")"; + } else { + matrix[12] = newX; + matrix[13] = newY; + } - if (this.state.transform !== "") { - var matrix = this.state.transform.split(","); + setTransform(matrix.join(",")); + } + }; + + var panStartHandler = function panStartHandler(e) { + if (e.target.closest(".oc-node")) { + setPanning(false); + return; + } else { + setPanning(true); + setCursor("move"); + } - if (this.state.transform.indexOf("3d") === -1) { - lastX = parseInt(matrix[4]); - lastY = parseInt(matrix[5]); - } else { - lastX = parseInt(matrix[12]); - lastY = parseInt(matrix[13]); - } - } + var lastX = 0; + var lastY = 0; + + if (transform !== "") { + var matrix = transform.split(","); - if (!e.targetTouches) { - // pand on desktop - this.startX = e.pageX - lastX; - this.startY = e.pageY - lastY; - } else if (e.targetTouches.length === 1) { - // pan on mobile device - this.startX = e.targetTouches[0].pageX - lastX; - this.startY = e.targetTouches[0].pageY - lastY; - } else if (e.targetTouches.length > 1) { - return; + if (transform.indexOf("3d") === -1) { + lastX = parseInt(matrix[4]); + lastY = parseInt(matrix[5]); + } else { + lastX = parseInt(matrix[12]); + lastY = parseInt(matrix[13]); } } - }, { - key: "setChartScale", - value: function setChartScale(newScale) { - var matrix = []; - var targetScale = 1; - - if (this.state.transform === "") { - this.setState({ - transform: "matrix(" + newScale + ", 0, 0, " + newScale + ", 0, 0)" - }); - } else { - matrix = this.state.transform.split(","); - if (this.state.transform.indexOf("3d") === -1) { - targetScale = Math.abs(window.parseFloat(matrix[3]) * newScale); + if (!e.targetTouches) { + // pand on desktop + setStartX(e.pageX - lastX); + setStartY(e.pageY - lastY); + } else if (e.targetTouches.length === 1) { + // pan on mobile device + setStartX(e.targetTouches[0].pageX - lastX); + setStartY(e.targetTouches[0].pageY - lastY); + } else if (e.targetTouches.length > 1) { + return; + } + }; - if (targetScale > this.props.zoomoutLimit && targetScale < this.props.zoominLimit) { - matrix[0] = "matrix(" + targetScale; - matrix[3] = targetScale; - this.setState({ - transform: matrix.join(",") - }); - } - } else { - targetScale = Math.abs(window.parseFloat(matrix[5]) * newScale); - - if (targetScale > this.props.zoomoutLimit && targetScale < this.props.zoominLimit) { - matrix[0] = "matrix3d(" + targetScale; - matrix[5] = targetScale; - this.setState({ - transform: matrix.join(",") - }); - } + var updateChartScale = function updateChartScale(newScale) { + var matrix = []; + var targetScale = 1; + + if (transform === "") { + setTransform("matrix(" + newScale + ", 0, 0, " + newScale + ", 0, 0)"); + } else { + matrix = transform.split(","); + + if (transform.indexOf("3d") === -1) { + targetScale = Math.abs(window.parseFloat(matrix[3]) * newScale); + + if (targetScale > zoomoutLimit && targetScale < zoominLimit) { + matrix[0] = "matrix(" + targetScale; + matrix[3] = targetScale; + setTransform(matrix.join(",")); + } + } else { + targetScale = Math.abs(window.parseFloat(matrix[5]) * newScale); + + if (targetScale > zoomoutLimit && targetScale < zoominLimit) { + matrix[0] = "matrix3d(" + targetScale; + matrix[5] = targetScale; + setTransform(matrix.join(",")); } } } - }, { - key: "zoomHandler", - value: function zoomHandler(e) { - var newScale = 1 + (e.deltaY > 0 ? -0.2 : 0.2); - this.setChartScale(newScale); + }; + + var zoomHandler = function zoomHandler(e) { + var newScale = 1 + (e.deltaY > 0 ? -0.2 : 0.2); + updateChartScale(newScale); + }; + + var exportPDF = function exportPDF(canvas, exportFilename) { + var canvasWidth = Math.floor(canvas.width); + var canvasHeight = Math.floor(canvas.height); + var doc = canvasWidth > canvasHeight ? new _jspdf.default({ + orientation: "landscape", + unit: "px", + format: [canvasWidth, canvasHeight] + }) : new _jspdf.default({ + orientation: "portrait", + unit: "px", + format: [canvasHeight, canvasWidth] + }); + doc.addImage(canvas.toDataURL("image/jpeg", 1.0), "JPEG", 0, 0); + doc.save(exportFilename + ".pdf"); + }; + + var exportPNG = function exportPNG(canvas, exportFilename) { + var isWebkit = "WebkitAppearance" in document.documentElement.style; + var isFf = !!window.sidebar; + var isEdge = navigator.appName === "Microsoft Internet Explorer" || navigator.appName === "Netscape" && navigator.appVersion.indexOf("Edge") > -1; + + if (!isWebkit && !isFf || isEdge) { + window.navigator.msSaveBlob(canvas.msToBlob(), exportFilename + ".png"); + } else { + setDataURL(canvas.toDataURL()); + setDownload(exportFilename + ".png"); + downloadButton.current.click(); } - }]); + }; + + var changeHierarchy = + /*#__PURE__*/ + function () { + var _ref3 = _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee(draggedItemData, dropTargetId) { + return regeneratorRuntime.wrap(function _callee$(_context) { + while (1) { + switch (_context.prev = _context.next) { + case 0: + _context.next = 2; + return dsDigger.removeNode(draggedItemData.id); + + case 2: + _context.next = 4; + return dsDigger.addChildren(dropTargetId, draggedItemData); + + case 4: + setDS(_objectSpread({}, dsDigger.ds)); + + case 5: + case "end": + return _context.stop(); + } + } + }, _callee); + })); - return ChartContainer; -}(_react.default.Component); + return function changeHierarchy(_x, _x2) { + return _ref3.apply(this, arguments); + }; + }(); + + (0, _react.useImperativeHandle)(ref, function () { + return { + exportTo: function exportTo(exportFilename, exportFileextension) { + exportFilename = exportFilename || "OrgChart"; + exportFileextension = exportFileextension || "png"; + setExporting(true); + var originalScrollLeft = container.current.scrollLeft; + container.current.scrollLeft = 0; + var originalScrollTop = container.current.scrollTop; + container.current.scrollTop = 0; + (0, _html2canvas.default)(chart.current, { + width: chart.current.clientWidth, + height: chart.current.clientHeight, + onclone: function onclone(clonedDoc) { + clonedDoc.querySelector(".orgchart").style.background = "none"; + clonedDoc.querySelector(".orgchart").style.transform = ""; + } + }).then(function (canvas) { + if (exportFileextension.toLowerCase() === "pdf") { + exportPDF(canvas, exportFilename); + } else { + exportPNG(canvas, exportFilename); + } + setExporting(false); + container.current.scrollLeft = originalScrollLeft; + container.current.scrollTop = originalScrollTop; + }, function () { + setExporting(false); + container.current.scrollLeft = originalScrollLeft; + container.current.scrollTop = originalScrollTop; + }); + }, + expandAllNodes: function expandAllNodes() { + chart.current.querySelectorAll(".oc-node.hidden, .oc-hierarchy.hidden, .isSiblingsCollapsed, .isAncestorsCollapsed").forEach(function (el) { + el.classList.remove("hidden", "isSiblingsCollapsed", "isAncestorsCollapsed"); + }); + } + }; + }); + return _react.default.createElement("div", { + ref: container, + className: "orgchart-container " + containerClass, + onWheel: zoom ? zoomHandler : undefined, + onMouseUp: pan && panning ? panEndHandler : undefined + }, _react.default.createElement("div", { + ref: chart, + className: "orgchart " + chartClass, + style: { + transform: transform, + cursor: cursor + }, + onClick: clickChartHandler, + onMouseDown: pan ? panStartHandler : undefined, + onMouseMove: pan && panning ? panHandler : undefined + }, _react.default.createElement("ul", null, _react.default.createElement(_ChartNode.default, { + datasource: attachRel(ds, "00"), + NodeTemplate: NodeTemplate, + draggable: draggable, + collapsible: collapsible, + multipleSelect: multipleSelect, + changeHierarchy: changeHierarchy, + onClickNode: onClickNode, + loadOnDemand: loadOnDemand, + onLoadData: onLoadData + }))), _react.default.createElement("a", { + className: "oc-download-btn hidden", + ref: downloadButton, + href: dataURL, + download: download + }, "\xA0"), _react.default.createElement("div", { + className: "oc-mask ".concat(exporting ? "" : "hidden") + }, _react.default.createElement("i", { + className: "oci oci-spinner spinner" + }))); +}); ChartContainer.propTypes = propTypes; ChartContainer.defaultProps = defaultProps; var _default = ChartContainer; diff --git a/dist/ChartNode.css b/dist/ChartNode.css index 572374b..470fac8 100644 --- a/dist/ChartNode.css +++ b/dist/ChartNode.css @@ -1,13 +1,17 @@ + .orgchart ul { padding-left: 0; text-align: center; display: flex; margin: 0; + transition: transform 0.3s, opacity 0.3s; } + .orgchart ul li { display: inline-block; position: relative; } + /* excluding root node */ .orgchart > ul > li > ul li::before { content: ""; @@ -19,13 +23,19 @@ box-sizing: border-box; } +.orgchart > ul > li > ul li.isSiblingsCollapsed::before { + content: none; +} + .orgchart > ul > li > ul li:first-child::before { left: calc(50% - 1px); width: calc(50% + 1px); } + .orgchart > ul > li > ul li:last-child::before { width: calc(50% + 1px); } + .orgchart > ul > li > ul li:only-child::before { width: 2px; } @@ -34,14 +44,23 @@ display: inline-block; position: relative; padding: 3px; - border: 2px solid transparent; + border: 2px dashed transparent; margin-bottom: 20px; } +.orgchart ul li .oc-node.allowedDrop { + border-color: rgba(68, 157, 68, 0.9); +} +.orgchart ul li .oc-node.currentDropTarget { + background-color: rgba(68, 157, 68, 0.9); +} +.orgchart ul li .oc-node.selected { + background-color: rgba(238, 217, 54, 0.5); +} .orgchart ul li .oc-node:hover { background-color: rgba(238, 217, 54, 0.5); } /* excluding root node */ -.orgchart > ul > li > ul li .oc-node::before { +.orgchart > ul > li > ul li > .oc-node::before { content: ""; position: absolute; top: -11px; @@ -50,6 +69,16 @@ height: 9px; background-color: rgba(217, 83, 79, 0.8); } + +.orgchart > ul > li > ul li.isSiblingsCollapsed > .oc-node::before { + top: -13px; + height: 11px; +} + +.orgchart > ul > li > ul li.isAncestorsCollapsed > .oc-node::before { + content: none; +} + /* excluding leaf node */ .orgchart ul li .oc-node:not(:only-child)::after { content: ""; @@ -60,6 +89,11 @@ height: 9px; background-color: rgba(217, 83, 79, 0.8); } + +.orgchart ul li .oc-node.isChildrenCollapsed:not(:only-child)::after { + content: none; +} + .orgchart ul li .oc-node .oc-heading { box-sizing: border-box; padding: 2px; @@ -76,6 +110,22 @@ color: #fff; border-radius: 4px 4px 0 0; } + +.orgchart ul li .oc-node .oc-heading .oc-symbol { + float: left; + margin-top: 12px; + margin-left: 2px; +} + +.orgchart ul li .oc-node .oc-heading .oc-symbol::before { + background-color: #fff; + border-color: rgba(217, 83, 79, 0.8); +} + +.orgchart ul li .oc-node .oc-heading .oc-symbol::after { + background-color: #fff; +} + .orgchart ul li .oc-node .oc-content { box-sizing: border-box; padding: 2px; @@ -90,3 +140,313 @@ text-overflow: ellipsis; white-space: nowrap; } + +/* styles for edges */ +.orgchart .oc-node .oc-edge { + position: absolute; + cursor: default; + transition: .2s; +} + +.orgchart .oc-node .oc-edge::before { + border-color: rgba(68, 157, 68, 0.5); +} + +.orgchart.noncollapsable .oc-node .oc-edge { + display: none; +} + +.orgchart .oc-node .oc-edge:hover { + cursor: pointer; +} + +.orgchart .oc-edge:hover::before { + border-color: #449d44; +} + +.orgchart .oc-node .verticalEdge { + width: calc(100% - 6px); + width: -webkit-calc(100% - 6px); + width: -moz-calc(100% - 6px); + height: 10px; + left: 3px; +} + +.orgchart .oc-node .verticalEdge::before { + position: absolute; + left: calc(50% - 0.3125rem); +} + +.orgchart .oc-node .topEdge { + top: -2px; +} + +.orgchart .oc-node .topEdge.oci-chevron-up::before { + top: 2px; +} + +.orgchart .oc-node .topEdge.oci-chevron-down::before { + bottom: 3px; +} + +.orgchart .oc-node .bottomEdge { + bottom: -2px; +} + +.orgchart .oc-node .bottomEdge.oci-chevron-up::before { + bottom: -3px; +} + +.orgchart .oc-node .bottomEdge.oci-chevron-down::before { + bottom: 1px; +} + +.orgchart .oc-node .horizontalEdge { + width: 10px; + height: calc(100% - 6px); + height: -webkit-calc(100% - 6px); + height: -moz-calc(100% - 6px); + top: 3px; +} + +.orgchart .oc-node .rightEdge { + right: -2px; +} + +.orgchart .oc-node .leftEdge { + left: -2px; +} + +.orgchart .oc-node .horizontalEdge::before { + position: absolute; + top: calc(50% - 0.3125rem); +} + +.orgchart .oc-node .rightEdge.oci-chevron-left::before { + right: -3px; +} + +.orgchart .oc-node .rightEdge.oci-chevron-right::before { + right: 1px; +} + +.orgchart .oc-node .leftEdge.oci-chevron-right::before { + left: -3px; +} + +.orgchart .oc-node .leftEdge.oci-chevron-left::before { + left: 1px; +} + +/* slide animations */ +.orgchart .slide-up { + opacity: 0; + transform: translateY(-40px); +} + +.orgchart .slide-down { + opacity: 0; + transform: translateY(40px); +} + +.orgchart .slide-left { + opacity: 0; + transform: translateX(-130px); +} + +.orgchart .slide-right { + opacity: 0; + transform: translateX(130px); +} + +/* oci means organization chart icons */ +.oci { + display: inline-block; + position: relative; + font-style: normal; + font-family: Arial; +} + +.oci-chevron-up::before { + content: ""; + display: inline-block; + box-sizing: border-box; + vertical-align: text-bottom; + width: 0.625rem; + height: 0.625rem; + border-width: 0 0.2rem 0.2rem 0; + border-style: solid; + border-color: #000; + background: transparent; + transform: rotate(-135deg); +} + +.oci-chevron-right::before { + content: ""; + display: inline-block; + box-sizing: border-box; + width: 0.625rem; + height: 0.625rem; + border-width: 0 0.2rem 0.2rem 0; + border-style: solid; + border-color: #000; + background: transparent; + transform: rotate(-45deg); +} + +.oci-chevron-down::before { + content: ""; + display: inline-block; + box-sizing: border-box; + width: 0.625rem; + height: 0.625rem; + border-width: 0 0.2rem 0.2rem 0; + border-style: solid; + border-color: #000; + background: transparent; + transform: rotate(45deg); +} + +.oci-chevron-left::before { + content: ""; + display: inline-block; + box-sizing: border-box; + width: 0.625rem; + height: 0.625rem; + border-width: 0 0.2rem 0.2rem 0; + border-style: solid; + border-color: #000; + background: transparent; + transform: rotate(135deg); +} + +.oci-leader::before { + position: absolute; + content: ""; + display: inline-block; + width: 0.4rem; + height: 0.4rem; + border-radius: 0.2rem; + background: #000; + top: -0.75rem; + left: 0.125rem; +} + +.oci-leader::after { + position: absolute; + content: ""; + display: inline-block; + width: 0.875rem; + height: 0.375rem; + border-radius: 0.25rem 0.25rem 0 0; + background: #000; + top: -0.3rem; + left: -0.125rem; +} + +.oci-plus-square::before { + content: "+"; + display: inline-block; + vertical-align: text-bottom; + text-align: center; + width: 1rem; + height: 1rem; + background-color: #000; + color: #fff; +} + +.oci-plus-circle::before { + content: "+"; + display: inline-block; + vertical-align: text-bottom; + text-align: center; + width: 1rem; + height: 1rem; + border-radius: 0.5rem; + background-color: #000; + color: #fff; +} + +.oci-minus-square::before { + content: "−"; + display: inline-block; + vertical-align: text-bottom; + text-align: center; + width: 1rem; + height: 1rem; + background-color: #000; + color: #fff; +} + +.oci-minus-circle::before { + content: "−"; + display: inline-block; + vertical-align: text-bottom; + text-align: center; + width: 1rem; + height: 1rem; + border-radius: 0.5rem; + background-color: #000; + color: #fff; +} + +.oci-arrow-circle-up::before { + content: "▲"; + display: inline-block; + text-align: center; + vertical-align: text-bottom; + width: 1rem; + height: 1rem; + border-radius: 0.5rem; + background-color: #000; + color: #fff; + font-size: 0.875rem; +} + +.oci-arrow-circle-down::before { + content: "▼"; + text-align: center; + display: inline-block; + vertical-align: text-bottom; + width: 1rem; + height: 1rem; + border-radius: 0.5rem; + background-color: #000; + color: #fff; + font-size: 0.875rem; +} + +.oci-info-circle::before { + content: "i"; + display: inline-block; + vertical-align: text-bottom; + width: 1rem; + height: 1rem; + border-radius: 0.5rem; + background-color: #000; + color: #fff; + text-align: center; + font-weight: bold; +} + +.oci-spinner::before { + content: ""; + vertical-align: text-bottom; + display: inline-block; + box-sizing: border-box; + width: 1rem; + height: 1rem; + border: 0.1rem solid #000; + border-right-color: transparent; + border-radius: 0.625rem; + animation: oci-infinite-spinning .75s linear infinite; +} + +@keyframes oci-infinite-spinning { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/dist/ChartNode.js b/dist/ChartNode.js index d9c7ec3..7709018 100644 --- a/dist/ChartNode.js +++ b/dist/ChartNode.js @@ -1,81 +1,375 @@ "use strict"; +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; -var _react = _interopRequireDefault(require("react")); +var _react = _interopRequireWildcard(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); -require("./ChartNode.css"); +var _service = require("./service"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } +function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } -function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } -function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } -function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } +function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } -function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } -function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } -function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } +function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } + +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } var propTypes = { - datasource: _propTypes.default.object.isRequired, - nodeTemplate: _propTypes.default.elementType + datasource: _propTypes.default.object, + NodeTemplate: _propTypes.default.elementType, + draggable: _propTypes.default.bool, + collapsible: _propTypes.default.bool, + multipleSelect: _propTypes.default.bool, + changeHierarchy: _propTypes.default.func, + onClickNode: _propTypes.default.func, + onLoadData: _propTypes.default.func +}; +var defaultProps = { + draggable: false, + collapsible: true, + multipleSelect: false }; -var ChartNode = -/*#__PURE__*/ -function (_React$Component) { - _inherits(ChartNode, _React$Component); - - function ChartNode() { - _classCallCheck(this, ChartNode); - - return _possibleConstructorReturn(this, _getPrototypeOf(ChartNode).apply(this, arguments)); - } - - _createClass(ChartNode, [{ - key: "render", - value: function render() { - var _this = this; - - var datasource = this.props.datasource; - return _react.default.createElement("li", null, this.props.nodeTemplate ? _react.default.createElement("div", { - className: "oc-node" - }, _react.default.createElement(this.props.nodeTemplate, { - nodeData: datasource - })) : _react.default.createElement("div", { - className: "oc-node" - }, _react.default.createElement("div", { - className: "oc-heading" - }, datasource.name), _react.default.createElement("div", { - className: "oc-content" - }, datasource.title)), datasource.children && _react.default.createElement("ul", null, datasource.children.map(function (node) { - return _react.default.createElement(ChartNode, { - datasource: node, - nodeTemplate: _this.props.nodeTemplate, - key: node.id - }); - }))); +var ChartNode = function ChartNode(_ref) { + var datasource = _ref.datasource, + NodeTemplate = _ref.NodeTemplate, + draggable = _ref.draggable, + collapsible = _ref.collapsible, + multipleSelect = _ref.multipleSelect, + changeHierarchy = _ref.changeHierarchy, + onClickNode = _ref.onClickNode, + loadOnDemand = _ref.loadOnDemand, + onLoadData = _ref.onLoadData; + var node = (0, _react.useRef)(); + + var _useState = (0, _react.useState)(loadOnDemand), + _useState2 = _slicedToArray(_useState, 2), + isChildrenCollapsed = _useState2[0], + setIsChildrenCollapsed = _useState2[1]; + + var _useState3 = (0, _react.useState)(), + _useState4 = _slicedToArray(_useState3, 2), + topEdgeExpanded = _useState4[0], + setTopEdgeExpanded = _useState4[1]; + + var _useState5 = (0, _react.useState)(), + _useState6 = _slicedToArray(_useState5, 2), + rightEdgeExpanded = _useState6[0], + setRightEdgeExpanded = _useState6[1]; + + var _useState7 = (0, _react.useState)(), + _useState8 = _slicedToArray(_useState7, 2), + bottomEdgeExpanded = _useState8[0], + setBottomEdgeExpanded = _useState8[1]; + + var _useState9 = (0, _react.useState)(), + _useState10 = _slicedToArray(_useState9, 2), + leftEdgeExpanded = _useState10[0], + setLeftEdgeExpanded = _useState10[1]; + + var _useState11 = (0, _react.useState)(false), + _useState12 = _slicedToArray(_useState11, 2), + allowedDrop = _useState12[0], + setAllowedDrop = _useState12[1]; + + var _useState13 = (0, _react.useState)(false), + _useState14 = _slicedToArray(_useState13, 2), + selected = _useState14[0], + setSelected = _useState14[1]; + + var nodeClass = ["oc-node", isChildrenCollapsed ? "isChildrenCollapsed" : "", allowedDrop ? "allowedDrop" : "", selected ? "selected" : ""].filter(function (item) { + return item; + }).join(" "); + (0, _react.useEffect)(function () { + var subs1 = _service.dragNodeService.getDragInfo().subscribe(function (draggedInfo) { + if (draggedInfo) { + setAllowedDrop(!document.querySelector("#" + draggedInfo.draggedNodeId).closest("li").querySelector("#" + node.current.id) ? true : false); + } else { + setAllowedDrop(false); + } + }); + + var subs2 = _service.selectNodeService.getSelectedNodeInfo().subscribe(function (selectedNodeInfo) { + if (selectedNodeInfo) { + if (multipleSelect) { + if (selectedNodeInfo.selectedNodeId === datasource.id) { + setSelected(true); + } + } else { + setSelected(selectedNodeInfo.selectedNodeId === datasource.id); + } + } else { + setSelected(false); + } + }); + + return function () { + subs1.unsubscribe(); + subs2.unsubscribe(); + }; + }, [multipleSelect, datasource]); + + var addArrows = function addArrows(e) { + var node = e.target.closest("li"); + var parent = node.parentNode.closest("li"); + var isAncestorsCollapsed = node && parent ? parent.firstChild.classList.contains("hidden") : undefined; + var isSiblingsCollapsed = Array.from(node.parentNode.children).some(function (item) { + return item.classList.contains("hidden"); + }); + setTopEdgeExpanded(!isAncestorsCollapsed); + setRightEdgeExpanded(!isSiblingsCollapsed); + setLeftEdgeExpanded(!isSiblingsCollapsed); + setBottomEdgeExpanded(!isChildrenCollapsed); + }; + + var removeArrows = function removeArrows() { + setTopEdgeExpanded(undefined); + setRightEdgeExpanded(undefined); + setBottomEdgeExpanded(undefined); + setLeftEdgeExpanded(undefined); + }; + + var toggleAncestors = function toggleAncestors(actionNode) { + var node = actionNode.parentNode.closest("li"); + if (!node) return; + var isAncestorsCollapsed = node.firstChild.classList.contains("hidden"); + + if (isAncestorsCollapsed) { + // 向上展开，只展开一级 + actionNode.classList.remove("isAncestorsCollapsed"); + node.firstChild.classList.remove("hidden"); + } else { + var _actionNode$classList; + + // 向下折叠，则折叠所有祖先节点以及祖先节点的兄弟节点 + var isSiblingsCollapsed = Array.from(actionNode.parentNode.children).some(function (item) { + return item.classList.contains("hidden"); + }); + + if (!isSiblingsCollapsed) { + toggleSiblings(actionNode); + } + + (_actionNode$classList = actionNode.classList).add.apply(_actionNode$classList, _toConsumableArray(("isAncestorsCollapsed" + (isSiblingsCollapsed ? "" : " isSiblingsCollapsed")).split(" "))); + + node.firstChild.classList.add("hidden"); // 如果还有展开的祖先节点，那继续折叠关闭之 + + if (node.parentNode.closest("li") && !node.parentNode.closest("li").firstChild.classList.contains("hidden")) { + toggleAncestors(node); + } + } + }; + + var topEdgeClickHandler = function topEdgeClickHandler(e) { + e.stopPropagation(); + setTopEdgeExpanded(!topEdgeExpanded); + toggleAncestors(e.target.closest("li")); + }; + + var bottomEdgeClickHandler = + /*#__PURE__*/ + function () { + var _ref2 = _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee(e) { + return regeneratorRuntime.wrap(function _callee$(_context) { + while (1) { + switch (_context.prev = _context.next) { + case 0: + e.stopPropagation(); + + if (loadOnDemand && datasource.Hierarchy && isChildrenCollapsed) { + onLoadData(datasource); + setIsChildrenCollapsed(false); + setBottomEdgeExpanded(true); + } else { + setIsChildrenCollapsed(!isChildrenCollapsed); + setBottomEdgeExpanded(!bottomEdgeExpanded); + } + + case 2: + case "end": + return _context.stop(); + } + } + }, _callee); + })); + + return function bottomEdgeClickHandler(_x) { + return _ref2.apply(this, arguments); + }; + }(); + + var toggleSiblings = function toggleSiblings(actionNode) { + var node = actionNode.previousSibling; + var isSiblingsCollapsed = Array.from(actionNode.parentNode.children).some(function (item) { + return item.classList.contains("hidden"); + }); + actionNode.classList.toggle("isSiblingsCollapsed", !isSiblingsCollapsed); // 先处理同级的兄弟节点 + + while (node) { + if (isSiblingsCollapsed) { + node.classList.remove("hidden"); + } else { + node.classList.add("hidden"); + } + + node = node.previousSibling; + } + + node = actionNode.nextSibling; + + while (node) { + if (isSiblingsCollapsed) { + node.classList.remove("hidden"); + } else { + node.classList.add("hidden"); + } + + node = node.nextSibling; + } // 在展开兄弟节点的同时，还要展开父节点 + + + var isAncestorsCollapsed = actionNode.parentNode.closest("li").firstChild.classList.contains("hidden"); + + if (isAncestorsCollapsed) { + toggleAncestors(actionNode); } - }]); + }; - return ChartNode; -}(_react.default.Component); + var hEdgeClickHandler = function hEdgeClickHandler(e) { + e.stopPropagation(); + setLeftEdgeExpanded(!leftEdgeExpanded); + setRightEdgeExpanded(!rightEdgeExpanded); + toggleSiblings(e.target.closest("li")); + }; + + var filterAllowedDropNodes = function filterAllowedDropNodes(id) { + _service.dragNodeService.sendDragInfo(id); + }; + + var clickNodeHandler = function clickNodeHandler(event) { + if (onClickNode) { + onClickNode(datasource); + } + + _service.selectNodeService.sendSelectedNodeInfo(datasource.id); + }; + + var dragstartHandler = function dragstartHandler(event) { + var copyDS = _objectSpread({}, datasource); + + delete copyDS.relationship; + event.dataTransfer.setData("text/plain", JSON.stringify(copyDS)); // highlight all potential drop targets + + filterAllowedDropNodes(node.current.id); + }; + + var dragoverHandler = function dragoverHandler(event) { + // prevent default to allow drop + event.preventDefault(); + }; + + var dragendHandler = function dragendHandler() { + // reset background of all potential drop targets + _service.dragNodeService.clearDragInfo(); + }; + + var dropHandler = function dropHandler(event) { + if (!event.currentTarget.classList.contains("allowedDrop")) { + return; + } + + _service.dragNodeService.clearDragInfo(); + + changeHierarchy(JSON.parse(event.dataTransfer.getData("text/plain")), event.currentTarget.id); + }; + + return _react.default.createElement("li", { + className: "oc-hierarchy" + }, _react.default.createElement("div", { + ref: node, + id: datasource.id, + className: nodeClass, + draggable: draggable ? "true" : undefined, + onClick: clickNodeHandler, + onDragStart: dragstartHandler, + onDragOver: dragoverHandler, + onDragEnd: dragendHandler, + onDrop: dropHandler, + onMouseEnter: addArrows, + onMouseLeave: removeArrows + }, NodeTemplate ? _react.default.createElement(NodeTemplate, { + nodeData: datasource + }) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", { + className: "oc-heading" + }, datasource.relationship && datasource.relationship.charAt(2) === "1" && _react.default.createElement("i", { + className: "oci oci-leader oc-symbol" + }), datasource.name), _react.default.createElement("div", { + className: "oc-content" + }, datasource.title)), collapsible && datasource.relationship && datasource.relationship.charAt(0) === "1" && _react.default.createElement("i", { + className: "oc-edge verticalEdge topEdge oci ".concat(topEdgeExpanded === undefined ? "" : topEdgeExpanded ? "oci-chevron-down" : "oci-chevron-up"), + onClick: topEdgeClickHandler + }), collapsible && datasource.relationship && datasource.relationship.charAt(1) === "1" && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("i", { + className: "oc-edge horizontalEdge rightEdge oci ".concat(rightEdgeExpanded === undefined ? "" : rightEdgeExpanded ? "oci-chevron-left" : "oci-chevron-right"), + onClick: hEdgeClickHandler + }), _react.default.createElement("i", { + className: "oc-edge horizontalEdge leftEdge oci ".concat(leftEdgeExpanded === undefined ? "" : leftEdgeExpanded ? "oci-chevron-right" : "oci-chevron-left"), + onClick: hEdgeClickHandler + })), collapsible && datasource.relationship && datasource.relationship.charAt(2) === "1" && _react.default.createElement("i", { + className: "oc-edge verticalEdge bottomEdge oci ".concat(bottomEdgeExpanded === undefined ? "" : bottomEdgeExpanded ? "oci-chevron-up" : "oci-chevron-down"), + onClick: bottomEdgeClickHandler + })), datasource.children && datasource.children.length > 0 && _react.default.createElement("ul", { + className: isChildrenCollapsed ? "hidden" : "" + }, datasource.children.map(function (node) { + return _react.default.createElement(ChartNode, { + datasource: node, + NodeTemplate: NodeTemplate, + id: node.id, + key: node.id, + draggable: draggable, + collapsible: collapsible, + multipleSelect: multipleSelect, + changeHierarchy: changeHierarchy, + onClickNode: onClickNode, + loadOnDemand: loadOnDemand, + onLoadData: onLoadData + }); + }))); +}; ChartNode.propTypes = propTypes; +ChartNode.defaultProps = defaultProps; var _default = ChartNode; exports.default = _default; \ No newline at end of file diff --git a/dist/service.js b/dist/service.js new file mode 100644 index 0000000..1f3c98d --- /dev/null +++ b/dist/service.js @@ -0,0 +1,39 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.selectNodeService = exports.dragNodeService = void 0; + +var _rxjs = require("rxjs"); + +var subject1 = new _rxjs.Subject(); +var subject2 = new _rxjs.Subject(); +var dragNodeService = { + sendDragInfo: function sendDragInfo(id) { + return subject1.next({ + draggedNodeId: id + }); + }, + clearDragInfo: function clearDragInfo() { + return subject1.next(); + }, + getDragInfo: function getDragInfo() { + return subject1.asObservable(); + } +}; +exports.dragNodeService = dragNodeService; +var selectNodeService = { + sendSelectedNodeInfo: function sendSelectedNodeInfo(id) { + return subject2.next({ + selectedNodeId: id + }); + }, + clearSelectedNodeInfo: function clearSelectedNodeInfo() { + return subject2.next(); + }, + getSelectedNodeInfo: function getSelectedNodeInfo() { + return subject2.asObservable(); + } +}; +exports.selectNodeService = selectNodeService; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 19e3334..b338468 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@dabeng/react-orgchart", - "version": "0.0.8", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index d9a5e47..5dd090a 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@dabeng/react-orgchart", + "name": "react-orgchart-lazyload", "version": "1.0.0", "main": "./dist/ChartContainer.js", "files": [ @@ -8,7 +8,7 @@ ], "repository": { "type": "git", - "url": "https://github.com/dabeng/react-orgchart.git" + "url": "https://github.com/arminyahya/react-orgchart.gits" }, "keywords": [ "react", @@ -20,12 +20,9 @@ "tree-like", "tree-view" ], - "author": "dabeng ", + "author": "armin yahya", "license": "MIT", - "bugs": { - "url": "https://github.com/dabeng/react-orgchart/issues" - }, - "homepage": "https://github.com/dabeng/react-orgchart#readme", + "homepage": "https://github.com/arminyahya/react-orgchart#readme", "babel": { "presets": [ "@babel/preset-env", @@ -59,7 +56,7 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files" + "publish:npm": "mkdir dist && babel src/components -d dist --copy-files" }, "eslintConfig": { "extends": "react-app" diff --git a/src/components/ChartContainer.js b/src/components/ChartContainer.js index 44d8947..9669545 100644 --- a/src/components/ChartContainer.js +++ b/src/components/ChartContainer.js @@ -3,7 +3,7 @@ import React, { useEffect, useRef, forwardRef, - useImperativeHandle + useImperativeHandle, } from "react"; import PropTypes from "prop-types"; import { selectNodeService } from "./service"; @@ -11,7 +11,6 @@ import JSONDigger from "json-digger"; import html2canvas from "html2canvas"; import jsPDF from "jspdf"; import ChartNode from "./ChartNode"; -import "./ChartContainer.css"; const propTypes = { datasource: PropTypes.object.isRequired, @@ -26,7 +25,9 @@ const propTypes = { collapsible: PropTypes.bool, multipleSelect: PropTypes.bool, onClickNode: PropTypes.func, - onClickChart: PropTypes.func + onClickChart: PropTypes.func, + onLoadData: PropTypes.func, + expandedNodes: PropTypes.array }; const defaultProps = { @@ -38,7 +39,8 @@ const defaultProps = { chartClass: "", draggable: false, collapsible: true, - multipleSelect: false + multipleSelect: false, + loadOnDemand: false, }; const ChartContainer = forwardRef( @@ -56,7 +58,10 @@ const ChartContainer = forwardRef( collapsible, multipleSelect, onClickNode, - onClickChart + onClickChart, + loadOnDemand, + onLoadData, + expandedNodes }, ref ) => { @@ -74,24 +79,54 @@ const ChartContainer = forwardRef( const [download, setDownload] = useState(""); const attachRel = (data, flags) => { + if (data.isLeaf === undefined) { + data.isLeaf = true; + } data.relationship = - flags + (data.children && data.children.length > 0 ? 1 : 0); - if (data.children) { - data.children.forEach(function(item) { + flags + + ((data.children && data.children.length > 0) || !data.isLeaf ? 1 : 0); + if (data.children && data.children.length > 0) { + data.children.forEach(function (item) { attachRel(item, "1" + (data.children.length > 1 ? 1 : 0)); }); } return data; }; - const [ds, setDS] = useState(datasource); useEffect(() => { setDS(datasource); }, [datasource]); + const [ds, setDS] = useState(datasource); + + const onLoadNode = async (node) => { + const childrens = await onLoadData(node) + childrens.map((ch) => { + ch.Hierarchy = node.Hierarchy + ? node.Hierarchy.concat([node.id]) + : [node.id]; + }); + onLoadDataFinished({ + id: node.id, + childrens, + }); + + }; + + const onLoadDataFinished = ({ id, childrens }) => { + const newDs = { ...ds }; + let treeCursor = newDs; + for (let parent of childrens[0].Hierarchy) { + if (treeCursor.id !== parent) { + treeCursor = treeCursor.children.find((child) => child.id === parent); + } + } + treeCursor.children = childrens; + setDS(newDs); + }; const dsDigger = new JSONDigger(datasource, "id", "children"); - const clickChartHandler = event => { + const clickChartHandler = (event) => { if (!event.target.closest(".oc-node")) { if (onClickChart) { onClickChart(); @@ -105,7 +140,7 @@ const ChartContainer = forwardRef( setCursor("default"); }; - const panHandler = e => { + const panHandler = (e) => { let newX = 0; let newY = 0; if (!e.targetTouches) { @@ -140,7 +175,7 @@ const ChartContainer = forwardRef( } }; - const panStartHandler = e => { + const panStartHandler = (e) => { if (e.target.closest(".oc-node")) { setPanning(false); return; @@ -173,7 +208,7 @@ const ChartContainer = forwardRef( } }; - const updateChartScale = newScale => { + const updateChartScale = (newScale) => { let matrix = []; let targetScale = 1; if (transform === "") { @@ -198,7 +233,7 @@ const ChartContainer = forwardRef( } }; - const zoomHandler = e => { + const zoomHandler = (e) => { let newScale = 1 + (e.deltaY > 0 ? -0.2 : 0.2); updateChartScale(newScale); }; @@ -211,12 +246,12 @@ const ChartContainer = forwardRef( ? new jsPDF({ orientation: "landscape", unit: "px", - format: [canvasWidth, canvasHeight] + format: [canvasWidth, canvasHeight], }) : new jsPDF({ orientation: "portrait", unit: "px", - format: [canvasHeight, canvasWidth] + format: [canvasHeight, canvasWidth], }); doc.addImage(canvas.toDataURL("image/jpeg", 1.0), "JPEG", 0, 0); doc.save(exportFilename + ".pdf"); @@ -257,12 +292,12 @@ const ChartContainer = forwardRef( html2canvas(chart.current, { width: chart.current.clientWidth, height: chart.current.clientHeight, - onclone: function(clonedDoc) { + onclone: function (clonedDoc) { clonedDoc.querySelector(".orgchart").style.background = "none"; clonedDoc.querySelector(".orgchart").style.transform = ""; - } + }, }).then( - canvas => { + (canvas) => { if (exportFileextension.toLowerCase() === "pdf") { exportPDF(canvas, exportFilename); } else { @@ -284,14 +319,14 @@ const ChartContainer = forwardRef( .querySelectorAll( ".oc-node.hidden, .oc-hierarchy.hidden, .isSiblingsCollapsed, .isAncestorsCollapsed" ) - .forEach(el => { + .forEach((el) => { el.classList.remove( "hidden", "isSiblingsCollapsed", "isAncestorsCollapsed" ); }); - } + }, })); return ( @@ -318,6 +353,8 @@ const ChartContainer = forwardRef( multipleSelect={multipleSelect} changeHierarchy={changeHierarchy} onClickNode={onClickNode} + loadOnDemand={loadOnDemand} + onLoadNode={onLoadNode} /> diff --git a/src/components/ChartNode.js b/src/components/ChartNode.js index a2f1a47..0451e87 100644 --- a/src/components/ChartNode.js +++ b/src/components/ChartNode.js @@ -1,7 +1,6 @@ import React, { useState, useRef, useEffect } from "react"; import PropTypes from "prop-types"; import { dragNodeService, selectNodeService } from "./service"; -import "./ChartNode.css"; const propTypes = { datasource: PropTypes.object, @@ -10,13 +9,14 @@ const propTypes = { collapsible: PropTypes.bool, multipleSelect: PropTypes.bool, changeHierarchy: PropTypes.func, - onClickNode: PropTypes.func + onClickNode: PropTypes.func, + onLoadData: PropTypes.func }; const defaultProps = { draggable: false, collapsible: true, - multipleSelect: false + multipleSelect: false, }; const ChartNode = ({ @@ -26,14 +26,16 @@ const ChartNode = ({ collapsible, multipleSelect, changeHierarchy, - onClickNode + onClickNode, + loadOnDemand, + onLoadNode }) => { const node = useRef(); - const [isChildrenCollapsed, setIsChildrenCollapsed] = useState(false); + const [isChildrenCollapsed, setIsChildrenCollapsed] = useState(datasource.defaultExpanded !== undefined ? !datasource.defaultExpanded: false); const [topEdgeExpanded, setTopEdgeExpanded] = useState(); const [rightEdgeExpanded, setRightEdgeExpanded] = useState(); - const [bottomEdgeExpanded, setBottomEdgeExpanded] = useState(); + const [bottomEdgeExpanded, setBottomEdgeExpanded] = useState(datasource.defaultExpanded === true); const [leftEdgeExpanded, setLeftEdgeExpanded] = useState(); const [allowedDrop, setAllowedDrop] = useState(false); const [selected, setSelected] = useState(false); @@ -42,13 +44,13 @@ const ChartNode = ({ "oc-node", isChildrenCollapsed ? "isChildrenCollapsed" : "", allowedDrop ? "allowedDrop" : "", - selected ? "selected" : "" + selected ? "selected" : "", ] - .filter(item => item) + .filter((item) => item) .join(" "); useEffect(() => { - const subs1 = dragNodeService.getDragInfo().subscribe(draggedInfo => { + const subs1 = dragNodeService.getDragInfo().subscribe((draggedInfo) => { if (draggedInfo) { setAllowedDrop( !document @@ -65,7 +67,7 @@ const ChartNode = ({ const subs2 = selectNodeService .getSelectedNodeInfo() - .subscribe(selectedNodeInfo => { + .subscribe((selectedNodeInfo) => { if (selectedNodeInfo) { if (multipleSelect) { if (selectedNodeInfo.selectedNodeId === datasource.id) { @@ -85,7 +87,7 @@ const ChartNode = ({ }; }, [multipleSelect, datasource]); - const addArrows = e => { + const addArrows = (e) => { const node = e.target.closest("li"); const parent = node.parentNode.closest("li"); const isAncestorsCollapsed = @@ -94,7 +96,7 @@ const ChartNode = ({ : undefined; const isSiblingsCollapsed = Array.from( node.parentNode.children - ).some(item => item.classList.contains("hidden")); + ).some((item) => item.classList.contains("hidden")); setTopEdgeExpanded(!isAncestorsCollapsed); setRightEdgeExpanded(!isSiblingsCollapsed); @@ -109,7 +111,7 @@ const ChartNode = ({ setLeftEdgeExpanded(undefined); }; - const toggleAncestors = actionNode => { + const toggleAncestors = (actionNode) => { let node = actionNode.parentNode.closest("li"); if (!node) return; const isAncestorsCollapsed = node.firstChild.classList.contains("hidden"); @@ -121,7 +123,7 @@ const ChartNode = ({ // 向下折叠，则折叠所有祖先节点以及祖先节点的兄弟节点 const isSiblingsCollapsed = Array.from( actionNode.parentNode.children - ).some(item => item.classList.contains("hidden")); + ).some((item) => item.classList.contains("hidden")); if (!isSiblingsCollapsed) { toggleSiblings(actionNode); } @@ -142,23 +144,29 @@ const ChartNode = ({ } }; - const topEdgeClickHandler = e => { + const topEdgeClickHandler = (e) => { e.stopPropagation(); setTopEdgeExpanded(!topEdgeExpanded); toggleAncestors(e.target.closest("li")); }; - const bottomEdgeClickHandler = e => { + const bottomEdgeClickHandler = async (e) => { e.stopPropagation(); - setIsChildrenCollapsed(!isChildrenCollapsed); - setBottomEdgeExpanded(!bottomEdgeExpanded); + if (loadOnDemand && datasource.Hierarchy && isChildrenCollapsed && (!datasource.children || datasource.children.length ===0 )) { + onLoadNode(datasource); + setIsChildrenCollapsed(false) + setBottomEdgeExpanded(true) + } else { + setIsChildrenCollapsed(!isChildrenCollapsed); + setBottomEdgeExpanded(!bottomEdgeExpanded); + } }; - const toggleSiblings = actionNode => { + const toggleSiblings = (actionNode) => { let node = actionNode.previousSibling; const isSiblingsCollapsed = Array.from( actionNode.parentNode.children - ).some(item => item.classList.contains("hidden")); + ).some((item) => item.classList.contains("hidden")); actionNode.classList.toggle("isSiblingsCollapsed", !isSiblingsCollapsed); // 先处理同级的兄弟节点 while (node) { @@ -187,18 +195,18 @@ const ChartNode = ({ } }; - const hEdgeClickHandler = e => { + const hEdgeClickHandler = (e) => { e.stopPropagation(); setLeftEdgeExpanded(!leftEdgeExpanded); setRightEdgeExpanded(!rightEdgeExpanded); toggleSiblings(e.target.closest("li")); }; - const filterAllowedDropNodes = id => { + const filterAllowedDropNodes = (id) => { dragNodeService.sendDragInfo(id); }; - const clickNodeHandler = event => { + const clickNodeHandler = (event) => { if (onClickNode) { onClickNode(datasource); } @@ -206,7 +214,7 @@ const ChartNode = ({ selectNodeService.sendSelectedNodeInfo(datasource.id); }; - const dragstartHandler = event => { + const dragstartHandler = (event) => { const copyDS = { ...datasource }; delete copyDS.relationship; event.dataTransfer.setData("text/plain", JSON.stringify(copyDS)); @@ -214,7 +222,7 @@ const ChartNode = ({ filterAllowedDropNodes(node.current.id); }; - const dragoverHandler = event => { + const dragoverHandler = (event) => { // prevent default to allow drop event.preventDefault(); }; @@ -224,7 +232,7 @@ const ChartNode = ({ dragNodeService.clearDragInfo(); }; - const dropHandler = event => { + const dropHandler = (event) => { if (!event.currentTarget.classList.contains("allowedDrop")) { return; } @@ -233,7 +241,7 @@ const ChartNode = ({ JSON.parse(event.dataTransfer.getData("text/plain")), event.currentTarget.id ); - }; + }; return (
  • @@ -321,7 +329,7 @@ const ChartNode = ({ {datasource.children && datasource.children.length > 0 && (
      - {datasource.children.map(node => ( + {datasource.children.map((node) => ( ))}
    diff --git a/src/custom-node-chart/custom-node-chart.js b/src/custom-node-chart/custom-node-chart.js index db9d16f..ac1e3cb 100644 --- a/src/custom-node-chart/custom-node-chart.js +++ b/src/custom-node-chart/custom-node-chart.js @@ -6,38 +6,48 @@ const CustomNodeChart = () => { const ds = { id: "n1", name: "Lao Lao", - title: "general manager", + title: "general manager", + isLeaf: false, + defaultExpanded: false, + Hierarchy: [], children: [ - { id: "n2", name: "Bo Miao", title: "department manager" }, - { - id: "n3", - name: "Su Miao", - title: "department manager", - children: [ - { id: "n4", name: "Tie Hua", title: "senior engineer" }, + { + id: Math.random().toString(), + name: "Henry Ford", + title: "department manager", + isLeaf: false, + defaultExpanded: false, + Hierarchy: ["n1"] + + }, + { + id: Math.random().toString(), + name: "Steve", + title: "department manager", + isLeaf: false, + defaultExpanded: false, + Hierarchy: ["n1"] + + }, + ] + }; + const onLoadData = (node) => { + return new Promise((resolve, reject) => { + resolve([ { - id: "n5", - name: "Hei Hei", - title: "senior engineer", - children: [ - { id: "n6", name: "Dan Dan", title: "engineer" }, - { id: "n7", name: "Xiang Xiang", title: "engineer" } - ] + id: Math.random().toString(), + name: "Armin", + title: "department manager", }, - { id: "n8", name: "Pang Pang", title: "senior engineer" } - ] - }, - { id: "n9", name: "Hong Miao", title: "department manager" }, - { - id: "n10", - name: "Chun Miao", - title: "department manager", - children: [{ id: "n11", name: "Yue Yue", title: "senior engineer" }] - } - ] - }; - - return ; + { + id: Math.random().toString(), + name: "Elon", + title: "department manager", + }, + ]) + }) + } + return ; }; export default CustomNodeChart; diff --git a/src/index.js b/src/index.js index 87d1be5..e8caa3d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; +import './components/ChartContainer.css' +import './components/ChartNode.css' import App from './App'; import * as serviceWorker from './serviceWorker'; From 35b9fe7a6486ec0ceba77bd6aa57f6967f8c8841 Mon Sep 17 00:00:00 2001 From: armin Date: Sun, 26 Jul 2020 10:51:08 +0430 Subject: [PATCH 02/13] REFACTOR: Hierarchy removed REFACTOR: Change usage of defaultExpanded REFACTOR: send control of collapse to custom template --- dist/ChartContainer.js | 100 ++++++++++++--------- dist/ChartNode.js | 12 +-- package.json | 2 +- src/components/ChartContainer.js | 16 ++-- src/components/ChartNode.js | 15 ++-- src/custom-node-chart/custom-node-chart.js | 8 +- 6 files changed, 84 insertions(+), 69 deletions(-) diff --git a/dist/ChartContainer.js b/dist/ChartContainer.js index d94cae5..a27629f 100644 --- a/dist/ChartContainer.js +++ b/dist/ChartContainer.js @@ -27,16 +27,16 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } -function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } - -function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } - function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } + +function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } + function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } @@ -58,7 +58,9 @@ var propTypes = { collapsible: _propTypes.default.bool, multipleSelect: _propTypes.default.bool, onClickNode: _propTypes.default.func, - onClickChart: _propTypes.default.func + onClickChart: _propTypes.default.func, + onLoadData: _propTypes.default.func, + expandedNodes: _propTypes.default.array }; var defaultProps = { pan: false, @@ -86,7 +88,9 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { multipleSelect = _ref.multipleSelect, onClickNode = _ref.onClickNode, onClickChart = _ref.onClickChart, - loadOnDemand = _ref.loadOnDemand; + loadOnDemand = _ref.loadOnDemand, + onLoadData = _ref.onLoadData, + expandedNodes = _ref.expandedNodes; var container = (0, _react.useRef)(); var chart = (0, _react.useRef)(); var downloadButton = (0, _react.useRef)(); @@ -156,30 +160,46 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { ds = _useState18[0], setDS = _useState18[1]; - var onLoadData = function onLoadData(node) { - setTimeout(function () { - var childrens = [{ - id: Math.random().toString(), - name: "Armin", - title: "department manager" - }, { - id: Math.random().toString(), - name: "Elon", - title: "department manager" - }]; - childrens.map(function (ch) { - ch.Hierarchy = node.Hierarchy ? node.Hierarchy.concat([node.id]) : [node.id]; - }); - onLoadDataFinished({ - id: node.id, - childrens: childrens - }); - }, 500); - }; + var onLoadNode = + /*#__PURE__*/ + function () { + var _ref2 = _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee(node) { + var childrens; + return regeneratorRuntime.wrap(function _callee$(_context) { + while (1) { + switch (_context.prev = _context.next) { + case 0: + _context.next = 2; + return onLoadData(node); - var onLoadDataFinished = function onLoadDataFinished(_ref2) { - var id = _ref2.id, - childrens = _ref2.childrens; + case 2: + childrens = _context.sent; + childrens.map(function (ch) { + ch.Hierarchy = node.Hierarchy ? node.Hierarchy.concat([node.id]) : [node.id]; + }); + onLoadDataFinished({ + id: node.id, + childrens: childrens + }); + + case 5: + case "end": + return _context.stop(); + } + } + }, _callee); + })); + + return function onLoadNode(_x) { + return _ref2.apply(this, arguments); + }; + }(); + + var onLoadDataFinished = function onLoadDataFinished(_ref3) { + var id = _ref3.id, + childrens = _ref3.childrens; var newDs = _objectSpread({}, ds); @@ -379,18 +399,18 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { var changeHierarchy = /*#__PURE__*/ function () { - var _ref3 = _asyncToGenerator( + var _ref4 = _asyncToGenerator( /*#__PURE__*/ - regeneratorRuntime.mark(function _callee(draggedItemData, dropTargetId) { - return regeneratorRuntime.wrap(function _callee$(_context) { + regeneratorRuntime.mark(function _callee2(draggedItemData, dropTargetId) { + return regeneratorRuntime.wrap(function _callee2$(_context2) { while (1) { - switch (_context.prev = _context.next) { + switch (_context2.prev = _context2.next) { case 0: - _context.next = 2; + _context2.next = 2; return dsDigger.removeNode(draggedItemData.id); case 2: - _context.next = 4; + _context2.next = 4; return dsDigger.addChildren(dropTargetId, draggedItemData); case 4: @@ -398,14 +418,14 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { case 5: case "end": - return _context.stop(); + return _context2.stop(); } } - }, _callee); + }, _callee2); })); - return function changeHierarchy(_x, _x2) { - return _ref3.apply(this, arguments); + return function changeHierarchy(_x2, _x3) { + return _ref4.apply(this, arguments); }; }(); @@ -473,7 +493,7 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { changeHierarchy: changeHierarchy, onClickNode: onClickNode, loadOnDemand: loadOnDemand, - onLoadData: onLoadData + onLoadNode: onLoadNode }))), _react.default.createElement("a", { className: "oc-download-btn hidden", ref: downloadButton, diff --git a/dist/ChartNode.js b/dist/ChartNode.js index 7709018..1d90015 100644 --- a/dist/ChartNode.js +++ b/dist/ChartNode.js @@ -70,10 +70,10 @@ var ChartNode = function ChartNode(_ref) { changeHierarchy = _ref.changeHierarchy, onClickNode = _ref.onClickNode, loadOnDemand = _ref.loadOnDemand, - onLoadData = _ref.onLoadData; + onLoadNode = _ref.onLoadNode; var node = (0, _react.useRef)(); - var _useState = (0, _react.useState)(loadOnDemand), + var _useState = (0, _react.useState)(datasource.defaultExpanded !== undefined ? !datasource.defaultExpanded : false), _useState2 = _slicedToArray(_useState, 2), isChildrenCollapsed = _useState2[0], setIsChildrenCollapsed = _useState2[1]; @@ -88,7 +88,7 @@ var ChartNode = function ChartNode(_ref) { rightEdgeExpanded = _useState6[0], setRightEdgeExpanded = _useState6[1]; - var _useState7 = (0, _react.useState)(), + var _useState7 = (0, _react.useState)(datasource.defaultExpanded === true), _useState8 = _slicedToArray(_useState7, 2), bottomEdgeExpanded = _useState8[0], setBottomEdgeExpanded = _useState8[1]; @@ -209,8 +209,8 @@ var ChartNode = function ChartNode(_ref) { case 0: e.stopPropagation(); - if (loadOnDemand && datasource.Hierarchy && isChildrenCollapsed) { - onLoadData(datasource); + if (loadOnDemand && datasource.Hierarchy && isChildrenCollapsed && (!datasource.children || datasource.children.length === 0)) { + onLoadNode(datasource); setIsChildrenCollapsed(false); setBottomEdgeExpanded(true); } else { @@ -364,7 +364,7 @@ var ChartNode = function ChartNode(_ref) { changeHierarchy: changeHierarchy, onClickNode: onClickNode, loadOnDemand: loadOnDemand, - onLoadData: onLoadData + onLoadNode: onLoadNode }); }))); }; diff --git a/package.json b/package.json index 5dd090a..34c3ea9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-orgchart-lazyload", - "version": "1.0.0", + "version": "1.0.1", "main": "./dist/ChartContainer.js", "files": [ "dist", diff --git a/src/components/ChartContainer.js b/src/components/ChartContainer.js index 9669545..ddb6f0c 100644 --- a/src/components/ChartContainer.js +++ b/src/components/ChartContainer.js @@ -113,17 +113,11 @@ const ChartContainer = forwardRef( }; - const onLoadDataFinished = ({ id, childrens }) => { - const newDs = { ...ds }; - let treeCursor = newDs; - for (let parent of childrens[0].Hierarchy) { - if (treeCursor.id !== parent) { - treeCursor = treeCursor.children.find((child) => child.id === parent); - } - } - treeCursor.children = childrens; - setDS(newDs); - }; + const onLoadDataFinished = async ({ id, childrens }) => { + await dsDigger.addChildren(id, childrens); + setDS({ ...dsDigger.ds }); + }; + const dsDigger = new JSONDigger(datasource, "id", "children"); const clickChartHandler = (event) => { diff --git a/src/components/ChartNode.js b/src/components/ChartNode.js index 0451e87..4af04cc 100644 --- a/src/components/ChartNode.js +++ b/src/components/ChartNode.js @@ -31,11 +31,10 @@ const ChartNode = ({ onLoadNode }) => { const node = useRef(); - - const [isChildrenCollapsed, setIsChildrenCollapsed] = useState(datasource.defaultExpanded !== undefined ? !datasource.defaultExpanded: false); + const [isChildrenCollapsed, setIsChildrenCollapsed] = useState(!datasource.defaultExpanded); const [topEdgeExpanded, setTopEdgeExpanded] = useState(); const [rightEdgeExpanded, setRightEdgeExpanded] = useState(); - const [bottomEdgeExpanded, setBottomEdgeExpanded] = useState(datasource.defaultExpanded === true); + const [bottomEdgeExpanded, setBottomEdgeExpanded] = useState(datasource.defaultExpanded); const [leftEdgeExpanded, setLeftEdgeExpanded] = useState(); const [allowedDrop, setAllowedDrop] = useState(false); const [selected, setSelected] = useState(false); @@ -152,7 +151,7 @@ const ChartNode = ({ const bottomEdgeClickHandler = async (e) => { e.stopPropagation(); - if (loadOnDemand && datasource.Hierarchy && isChildrenCollapsed && (!datasource.children || datasource.children.length ===0 )) { + if (loadOnDemand && isChildrenCollapsed && (!datasource.children || datasource.children.length ===0 )) { onLoadNode(datasource); setIsChildrenCollapsed(false) setBottomEdgeExpanded(true) @@ -243,6 +242,12 @@ const ChartNode = ({ ); }; + const setCollapse = (collapse) => { + console.log(collapse) + setIsChildrenCollapsed(collapse); + setBottomEdgeExpanded(!collapse) + } + return (
  • {NodeTemplate ? ( - + ) : ( <>
    diff --git a/src/custom-node-chart/custom-node-chart.js b/src/custom-node-chart/custom-node-chart.js index ac1e3cb..404f813 100644 --- a/src/custom-node-chart/custom-node-chart.js +++ b/src/custom-node-chart/custom-node-chart.js @@ -7,9 +7,9 @@ const CustomNodeChart = () => { id: "n1", name: "Lao Lao", title: "general manager", + defaultExpanded: true, + isLeaf: false, - defaultExpanded: false, - Hierarchy: [], children: [ { id: Math.random().toString(), @@ -17,8 +17,6 @@ const CustomNodeChart = () => { title: "department manager", isLeaf: false, defaultExpanded: false, - Hierarchy: ["n1"] - }, { id: Math.random().toString(), @@ -26,8 +24,6 @@ const CustomNodeChart = () => { title: "department manager", isLeaf: false, defaultExpanded: false, - Hierarchy: ["n1"] - }, ] }; From 7135c8b79ba8408c1603e55d653073a5c9cb2391 Mon Sep 17 00:00:00 2001 From: armin Date: Mon, 27 Jul 2020 10:44:50 +0430 Subject: [PATCH 03/13] REFACTOR: loadData changed REFACTOR: template have loadData too --- dist/ChartContainer.js | 85 +++++++++------------- dist/ChartNode.js | 14 +++- package.json | 4 +- src/components/ChartContainer.js | 25 ++----- src/components/ChartNode.js | 27 ++++--- src/custom-node-chart/custom-node-chart.js | 34 +++++---- src/custom-node-chart/my-node.js | 11 ++- 7 files changed, 95 insertions(+), 105 deletions(-) diff --git a/dist/ChartContainer.js b/dist/ChartContainer.js index a27629f..0701a49 100644 --- a/dist/ChartContainer.js +++ b/dist/ChartContainer.js @@ -197,49 +197,36 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { }; }(); - var onLoadDataFinished = function onLoadDataFinished(_ref3) { - var id = _ref3.id, - childrens = _ref3.childrens; - - var newDs = _objectSpread({}, ds); - - var treeCursor = newDs; - var _iteratorNormalCompletion = true; - var _didIteratorError = false; - var _iteratorError = undefined; - - try { - var _loop = function _loop() { - var parent = _step.value; + var onLoadDataFinished = + /*#__PURE__*/ + function () { + var _ref4 = _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee2(_ref3) { + var id, childrens; + return regeneratorRuntime.wrap(function _callee2$(_context2) { + while (1) { + switch (_context2.prev = _context2.next) { + case 0: + id = _ref3.id, childrens = _ref3.childrens; + _context2.next = 3; + return dsDigger.addChildren(id, childrens); - if (treeCursor.id !== parent) { - treeCursor = treeCursor.children.find(function (child) { - return child.id === parent; - }); - } - }; + case 3: + setDS(_objectSpread({}, dsDigger.ds)); - for (var _iterator = childrens[0].Hierarchy[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { - _loop(); - } - } catch (err) { - _didIteratorError = true; - _iteratorError = err; - } finally { - try { - if (!_iteratorNormalCompletion && _iterator.return != null) { - _iterator.return(); - } - } finally { - if (_didIteratorError) { - throw _iteratorError; + case 4: + case "end": + return _context2.stop(); + } } - } - } + }, _callee2); + })); - treeCursor.children = childrens; - setDS(newDs); - }; + return function onLoadDataFinished(_x2) { + return _ref4.apply(this, arguments); + }; + }(); var dsDigger = new _jsonDigger.default(datasource, "id", "children"); @@ -399,18 +386,18 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { var changeHierarchy = /*#__PURE__*/ function () { - var _ref4 = _asyncToGenerator( + var _ref5 = _asyncToGenerator( /*#__PURE__*/ - regeneratorRuntime.mark(function _callee2(draggedItemData, dropTargetId) { - return regeneratorRuntime.wrap(function _callee2$(_context2) { + regeneratorRuntime.mark(function _callee3(draggedItemData, dropTargetId) { + return regeneratorRuntime.wrap(function _callee3$(_context3) { while (1) { - switch (_context2.prev = _context2.next) { + switch (_context3.prev = _context3.next) { case 0: - _context2.next = 2; + _context3.next = 2; return dsDigger.removeNode(draggedItemData.id); case 2: - _context2.next = 4; + _context3.next = 4; return dsDigger.addChildren(dropTargetId, draggedItemData); case 4: @@ -418,14 +405,14 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { case 5: case "end": - return _context2.stop(); + return _context3.stop(); } } - }, _callee2); + }, _callee3); })); - return function changeHierarchy(_x2, _x3) { - return _ref4.apply(this, arguments); + return function changeHierarchy(_x3, _x4) { + return _ref5.apply(this, arguments); }; }(); diff --git a/dist/ChartNode.js b/dist/ChartNode.js index 1d90015..a5f32a2 100644 --- a/dist/ChartNode.js +++ b/dist/ChartNode.js @@ -73,7 +73,7 @@ var ChartNode = function ChartNode(_ref) { onLoadNode = _ref.onLoadNode; var node = (0, _react.useRef)(); - var _useState = (0, _react.useState)(datasource.defaultExpanded !== undefined ? !datasource.defaultExpanded : false), + var _useState = (0, _react.useState)(!datasource.defaultExpanded), _useState2 = _slicedToArray(_useState, 2), isChildrenCollapsed = _useState2[0], setIsChildrenCollapsed = _useState2[1]; @@ -88,7 +88,7 @@ var ChartNode = function ChartNode(_ref) { rightEdgeExpanded = _useState6[0], setRightEdgeExpanded = _useState6[1]; - var _useState7 = (0, _react.useState)(datasource.defaultExpanded === true), + var _useState7 = (0, _react.useState)(datasource.defaultExpanded), _useState8 = _slicedToArray(_useState7, 2), bottomEdgeExpanded = _useState8[0], setBottomEdgeExpanded = _useState8[1]; @@ -209,7 +209,7 @@ var ChartNode = function ChartNode(_ref) { case 0: e.stopPropagation(); - if (loadOnDemand && datasource.Hierarchy && isChildrenCollapsed && (!datasource.children || datasource.children.length === 0)) { + if (loadOnDemand && isChildrenCollapsed && (!datasource.children || datasource.children.length === 0)) { onLoadNode(datasource); setIsChildrenCollapsed(false); setBottomEdgeExpanded(true); @@ -316,6 +316,11 @@ var ChartNode = function ChartNode(_ref) { changeHierarchy(JSON.parse(event.dataTransfer.getData("text/plain")), event.currentTarget.id); }; + var setCollapse = function setCollapse(collapse) { + setIsChildrenCollapsed(collapse); + setBottomEdgeExpanded(!collapse); + }; + return _react.default.createElement("li", { className: "oc-hierarchy" }, _react.default.createElement("div", { @@ -331,7 +336,8 @@ var ChartNode = function ChartNode(_ref) { onMouseEnter: addArrows, onMouseLeave: removeArrows }, NodeTemplate ? _react.default.createElement(NodeTemplate, { - nodeData: datasource + nodeData: datasource, + setCollapse: setCollapse }) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", { className: "oc-heading" }, datasource.relationship && datasource.relationship.charAt(2) === "1" && _react.default.createElement("i", { diff --git a/package.json b/package.json index 34c3ea9..a6722cc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-orgchart-lazyload", - "version": "1.0.1", + "version": "1.0.2", "main": "./dist/ChartContainer.js", "files": [ "dist", @@ -56,7 +56,7 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "publish:npm": "mkdir dist && babel src/components -d dist --copy-files" + "publish:npm": "mkdir dist && babel src/components -d dist --copy-files && npm publish" }, "eslintConfig": { "extends": "react-app" diff --git a/src/components/ChartContainer.js b/src/components/ChartContainer.js index ddb6f0c..18d73cf 100644 --- a/src/components/ChartContainer.js +++ b/src/components/ChartContainer.js @@ -26,7 +26,6 @@ const propTypes = { multipleSelect: PropTypes.bool, onClickNode: PropTypes.func, onClickChart: PropTypes.func, - onLoadData: PropTypes.func, expandedNodes: PropTypes.array }; @@ -61,7 +60,6 @@ const ChartContainer = forwardRef( onClickChart, loadOnDemand, onLoadData, - expandedNodes }, ref ) => { @@ -99,22 +97,8 @@ const ChartContainer = forwardRef( const [ds, setDS] = useState(datasource); - const onLoadNode = async (node) => { - const childrens = await onLoadData(node) - childrens.map((ch) => { - ch.Hierarchy = node.Hierarchy - ? node.Hierarchy.concat([node.id]) - : [node.id]; - }); - onLoadDataFinished({ - id: node.id, - childrens, - }); - - }; - - const onLoadDataFinished = async ({ id, childrens }) => { - await dsDigger.addChildren(id, childrens); + const onLoadDataFinished = async (datasource, children) => { + await dsDigger.updateNode({...datasource, children}); setDS({ ...dsDigger.ds }); }; @@ -347,8 +331,9 @@ const ChartContainer = forwardRef( multipleSelect={multipleSelect} changeHierarchy={changeHierarchy} onClickNode={onClickNode} - loadOnDemand={loadOnDemand} - onLoadNode={onLoadNode} + loadOnDemand={loadOnDemand} + onLoadData={onLoadData} + onLoadDataFinished={onLoadDataFinished} />
    diff --git a/src/components/ChartNode.js b/src/components/ChartNode.js index 4af04cc..5a900e9 100644 --- a/src/components/ChartNode.js +++ b/src/components/ChartNode.js @@ -10,7 +10,8 @@ const propTypes = { multipleSelect: PropTypes.bool, changeHierarchy: PropTypes.func, onClickNode: PropTypes.func, - onLoadData: PropTypes.func + onLoadData: PropTypes.func, + onLoadDataFinished: PropTypes.func }; const defaultProps = { @@ -27,8 +28,9 @@ const ChartNode = ({ multipleSelect, changeHierarchy, onClickNode, - loadOnDemand, - onLoadNode + loadOnDemand, + onLoadData, + onLoadDataFinished }) => { const node = useRef(); const [isChildrenCollapsed, setIsChildrenCollapsed] = useState(!datasource.defaultExpanded); @@ -149,12 +151,17 @@ const ChartNode = ({ toggleAncestors(e.target.closest("li")); }; + const addChildrenHandler = (children) => { + onLoadDataFinished(datasource, children); + setIsChildrenCollapsed(false) + setBottomEdgeExpanded(true) + } + const bottomEdgeClickHandler = async (e) => { e.stopPropagation(); - if (loadOnDemand && isChildrenCollapsed && (!datasource.children || datasource.children.length ===0 )) { - onLoadNode(datasource); - setIsChildrenCollapsed(false) - setBottomEdgeExpanded(true) + if (loadOnDemand && onLoadData && isChildrenCollapsed) { + const children = await onLoadData(datasource); + addChildrenHandler(children) } else { setIsChildrenCollapsed(!isChildrenCollapsed); setBottomEdgeExpanded(!bottomEdgeExpanded); @@ -243,7 +250,6 @@ const ChartNode = ({ }; const setCollapse = (collapse) => { - console.log(collapse) setIsChildrenCollapsed(collapse); setBottomEdgeExpanded(!collapse) } @@ -264,7 +270,7 @@ const ChartNode = ({ onMouseLeave={removeArrows} > {NodeTemplate ? ( - + ) : ( <>
    @@ -346,7 +352,8 @@ const ChartNode = ({ changeHierarchy={changeHierarchy} onClickNode={onClickNode} loadOnDemand={loadOnDemand} - onLoadNode={onLoadNode} + onLoadData={onLoadData} + onLoadDataFinished={onLoadDataFinished} /> ))} diff --git a/src/custom-node-chart/custom-node-chart.js b/src/custom-node-chart/custom-node-chart.js index 404f813..f8a0ea5 100644 --- a/src/custom-node-chart/custom-node-chart.js +++ b/src/custom-node-chart/custom-node-chart.js @@ -2,6 +2,23 @@ import React from "react"; import OrganizationChart from "../components/ChartContainer"; import MyNode from "./my-node"; +export const onLoadData = (node) => { + return new Promise((resolve, reject) => { + resolve([ + { + id: Math.random().toString(), + name: "Armin", + title: "department manager", + }, + { + id: Math.random().toString(), + name: "Elon", + title: "department manager", + }, + ]) + }) +} + const CustomNodeChart = () => { const ds = { id: "n1", @@ -27,22 +44,7 @@ const CustomNodeChart = () => { }, ] }; - const onLoadData = (node) => { - return new Promise((resolve, reject) => { - resolve([ - { - id: Math.random().toString(), - name: "Armin", - title: "department manager", - }, - { - id: Math.random().toString(), - name: "Elon", - title: "department manager", - }, - ]) - }) - } + return ; }; diff --git a/src/custom-node-chart/my-node.js b/src/custom-node-chart/my-node.js index 7e5ab52..31bdaa3 100644 --- a/src/custom-node-chart/my-node.js +++ b/src/custom-node-chart/my-node.js @@ -1,15 +1,18 @@ import React from "react"; import PropTypes from "prop-types"; +import { onLoadData } from './custom-node-chart' import "./my-node.css"; const propTypes = { nodeData: PropTypes.object.isRequired }; -const MyNode = ({ nodeData }) => { - const selectNode = () => { - alert("Hi All. I'm " + nodeData.name + ". I'm a " + nodeData.title + "."); - }; +const MyNode = ({ nodeData, addChildren}) => { + const selectNode = async () => { + const children = await onLoadData() + console.log(children) + addChildren(children); + }; return (
    From 62a84d999bfde74e630ef5b6c3ff1ba4c8757bb8 Mon Sep 17 00:00:00 2001 From: armin yahya Date: Sun, 16 Aug 2020 12:01:25 +0430 Subject: [PATCH 04/13] REFACTOR: change lazyload propnames DEBUG: not calling loaddata if node already loaded ADD: add chart lazyload page --- package-lock.json | 4 +- package.json | 4 +- src/App.js | 4 ++ src/components/ChartContainer.js | 13 ++--- src/components/ChartNode.js | 14 ++--- src/custom-node-chart/custom-node-chart.js | 68 ++++++++++------------ src/custom-node-chart/my-node.js | 13 ++--- src/lazyload/custom-node.css | 36 ++++++++++++ src/lazyload/custom-node.js | 28 +++++++++ src/lazyload/index.js | 33 +++++++++++ 10 files changed, 151 insertions(+), 66 deletions(-) create mode 100644 src/lazyload/custom-node.css create mode 100644 src/lazyload/custom-node.js create mode 100644 src/lazyload/index.js diff --git a/package-lock.json b/package-lock.json index b338468..38cbae1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "@dabeng/react-orgchart", - "version": "1.0.0", + "name": "react-orgchart-lazyload", + "version": "1.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index a6722cc..6859363 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-orgchart-lazyload", - "version": "1.0.2", + "version": "1.0.4", "main": "./dist/ChartContainer.js", "files": [ "dist", @@ -8,7 +8,7 @@ ], "repository": { "type": "git", - "url": "https://github.com/arminyahya/react-orgchart.gits" + "url": "https://github.com/arminyahya/react-orgchart" }, "keywords": [ "react", diff --git a/src/App.js b/src/App.js index 2178be0..fbb6aad 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,7 @@ import DragDropChart from "./drag-drop-chart/drag-drop-chart"; import EditChart from "./edit-chart/edit-chart"; import EditNode from "./edit-node/edit-node"; import "./App.css"; +import lazyloadChart from "./lazyload"; const App = () => { return ( @@ -19,6 +20,7 @@ const App = () => { Deault Chart Pan & Zoom Chart Custom Node Chart + LazyLoad Chart Export Chart Drap & Drop Chart Edit Chart @@ -29,10 +31,12 @@ const App = () => { + +
    ); diff --git a/src/components/ChartContainer.js b/src/components/ChartContainer.js index 18d73cf..64738af 100644 --- a/src/components/ChartContainer.js +++ b/src/components/ChartContainer.js @@ -25,8 +25,8 @@ const propTypes = { collapsible: PropTypes.bool, multipleSelect: PropTypes.bool, onClickNode: PropTypes.func, - onClickChart: PropTypes.func, - expandedNodes: PropTypes.array + onClickChart: PropTypes.func, + loadData: PropTypes.func }; const defaultProps = { @@ -39,7 +39,6 @@ const defaultProps = { draggable: false, collapsible: true, multipleSelect: false, - loadOnDemand: false, }; const ChartContainer = forwardRef( @@ -58,8 +57,7 @@ const ChartContainer = forwardRef( multipleSelect, onClickNode, onClickChart, - loadOnDemand, - onLoadData, + loadData, }, ref ) => { @@ -97,7 +95,7 @@ const ChartContainer = forwardRef( const [ds, setDS] = useState(datasource); - const onLoadDataFinished = async (datasource, children) => { + const onLoadData = async (datasource, children) => { await dsDigger.updateNode({...datasource, children}); setDS({ ...dsDigger.ds }); }; @@ -331,9 +329,8 @@ const ChartContainer = forwardRef( multipleSelect={multipleSelect} changeHierarchy={changeHierarchy} onClickNode={onClickNode} - loadOnDemand={loadOnDemand} + loadData={loadData} onLoadData={onLoadData} - onLoadDataFinished={onLoadDataFinished} />
    diff --git a/src/components/ChartNode.js b/src/components/ChartNode.js index 5a900e9..f3eb4c0 100644 --- a/src/components/ChartNode.js +++ b/src/components/ChartNode.js @@ -10,8 +10,8 @@ const propTypes = { multipleSelect: PropTypes.bool, changeHierarchy: PropTypes.func, onClickNode: PropTypes.func, + loadData: PropTypes.func, onLoadData: PropTypes.func, - onLoadDataFinished: PropTypes.func }; const defaultProps = { @@ -28,9 +28,8 @@ const ChartNode = ({ multipleSelect, changeHierarchy, onClickNode, - loadOnDemand, + loadData, onLoadData, - onLoadDataFinished }) => { const node = useRef(); const [isChildrenCollapsed, setIsChildrenCollapsed] = useState(!datasource.defaultExpanded); @@ -152,15 +151,15 @@ const ChartNode = ({ }; const addChildrenHandler = (children) => { - onLoadDataFinished(datasource, children); + onLoadData(datasource, children); setIsChildrenCollapsed(false) setBottomEdgeExpanded(true) } const bottomEdgeClickHandler = async (e) => { e.stopPropagation(); - if (loadOnDemand && onLoadData && isChildrenCollapsed) { - const children = await onLoadData(datasource); + if (loadData && (!!!datasource.children)) { + const children = await loadData(datasource); addChildrenHandler(children) } else { setIsChildrenCollapsed(!isChildrenCollapsed); @@ -351,9 +350,8 @@ const ChartNode = ({ multipleSelect={multipleSelect} changeHierarchy={changeHierarchy} onClickNode={onClickNode} - loadOnDemand={loadOnDemand} + loadData={loadData} onLoadData={onLoadData} - onLoadDataFinished={onLoadDataFinished} /> ))} diff --git a/src/custom-node-chart/custom-node-chart.js b/src/custom-node-chart/custom-node-chart.js index f8a0ea5..f8625d1 100644 --- a/src/custom-node-chart/custom-node-chart.js +++ b/src/custom-node-chart/custom-node-chart.js @@ -2,50 +2,42 @@ import React from "react"; import OrganizationChart from "../components/ChartContainer"; import MyNode from "./my-node"; -export const onLoadData = (node) => { - return new Promise((resolve, reject) => { - resolve([ - { - id: Math.random().toString(), - name: "Armin", - title: "department manager", - }, - { - id: Math.random().toString(), - name: "Elon", - title: "department manager", - }, - ]) - }) -} - const CustomNodeChart = () => { const ds = { id: "n1", name: "Lao Lao", - title: "general manager", - defaultExpanded: true, - - isLeaf: false, + title: "general manager", children: [ - { - id: Math.random().toString(), - name: "Henry Ford", - title: "department manager", - isLeaf: false, - defaultExpanded: false, - }, - { - id: Math.random().toString(), - name: "Steve", - title: "department manager", - isLeaf: false, - defaultExpanded: false, - }, - ] + { id: "n2", name: "Bo Miao", title: "department manager" }, + { + id: "n3", + name: "Su Miao", + title: "department manager", + children: [ + { id: "n4", name: "Tie Hua", title: "senior engineer" }, + { + id: "n5", + name: "Hei Hei", + title: "senior engineer", + children: [ + { id: "n6", name: "Dan Dan", title: "engineer" }, + { id: "n7", name: "Xiang Xiang", title: "engineer" } + ] + }, + { id: "n8", name: "Pang Pang", title: "senior engineer" } + ] + }, + { id: "n9", name: "Hong Miao", title: "department manager" }, + { + id: "n10", + name: "Chun Miao", + title: "department manager", + children: [{ id: "n11", name: "Yue Yue", title: "senior engineer" }] + } + ] }; - return ; + return ; }; -export default CustomNodeChart; +export default CustomNodeChart; \ No newline at end of file diff --git a/src/custom-node-chart/my-node.js b/src/custom-node-chart/my-node.js index 31bdaa3..c619704 100644 --- a/src/custom-node-chart/my-node.js +++ b/src/custom-node-chart/my-node.js @@ -1,18 +1,15 @@ import React from "react"; import PropTypes from "prop-types"; -import { onLoadData } from './custom-node-chart' import "./my-node.css"; const propTypes = { nodeData: PropTypes.object.isRequired }; -const MyNode = ({ nodeData, addChildren}) => { - const selectNode = async () => { - const children = await onLoadData() - console.log(children) - addChildren(children); - }; +const MyNode = ({ nodeData }) => { + const selectNode = () => { + alert("Hi All. I'm " + nodeData.name + ". I'm a " + nodeData.title + "."); + }; return (
    @@ -24,4 +21,4 @@ const MyNode = ({ nodeData, addChildren}) => { MyNode.propTypes = propTypes; -export default MyNode; +export default MyNode; \ No newline at end of file diff --git a/src/lazyload/custom-node.css b/src/lazyload/custom-node.css new file mode 100644 index 0000000..f7771b9 --- /dev/null +++ b/src/lazyload/custom-node.css @@ -0,0 +1,36 @@ +.orgchart.myChart { + background-image: linear-gradient( + 90deg, + rgba(33, 90, 136, 0.15) 10%, + rgba(0, 0, 0, 0) 10% + ), + linear-gradient(rgba(33, 90, 136, 0.15) 10%, rgba(0, 0, 0, 0) 10%) !important; +} + +.orgchart.myChart > ul > li > ul li::before { + border-top-color: #215a88; +} + +.orgchart.myChart > ul > li > ul li .oc-node::before, +.orgchart.myChart ul li .oc-node:not(:only-child)::after { + background-color: #215a88; +} + +.orgchart.myChart .oc-node .position { + box-sizing: border-box; + background-color: #215a88; + color: #fff; + width: 130px; + height: 65px; + padding: 2px; +} + +.orgchart.myChart .oc-node .fullname { + box-sizing: border-box; + color: #215a88; + background-color: #fff; + width: 130px; + height: 65px; + padding: 2px; + border: 1px solid #215a88; +} diff --git a/src/lazyload/custom-node.js b/src/lazyload/custom-node.js new file mode 100644 index 0000000..91ef223 --- /dev/null +++ b/src/lazyload/custom-node.js @@ -0,0 +1,28 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { loadDataAsync } from "."; +import "./custom-node.css"; + +const propTypes = { + nodeData: PropTypes.object.isRequired, +}; + +const MyNode = ({ nodeData, addChildren }) => { + const selectNode = async () => { + if (addChildren) { + const children = await loadDataAsync(); + addChildren(children); + } + }; + + return ( +
    +
    {nodeData.data.title}
    +
    {nodeData.data.name}
    +
    + ); +}; + +MyNode.propTypes = propTypes; + +export default MyNode; diff --git a/src/lazyload/index.js b/src/lazyload/index.js new file mode 100644 index 0000000..3d85bbb --- /dev/null +++ b/src/lazyload/index.js @@ -0,0 +1,33 @@ +import React from "react"; +import OrganizationChart from "../components/ChartContainer"; +import MyNode from "./custom-node"; + +export const loadDataAsync = (node) => { + return new Promise((resolve, reject) => { + resolve([ + { id: "n9", name: "Hong Miao", + data: { title: "department manager", name: "Hong Miao"}}, + { + id: "n10", + name: "Chun Miao", + data: {title: "department manager", name: "Hong Miao"}, + } + ]) + }) +} + +const lazyloadChart = () => { + const ds = { + id: "n1", + data: { + name: "Lao Lao", + title: "general manager", + }, + isLeaf: false + }; + + + return ; +}; + +export default lazyloadChart; From c19ee4f5e12d549d4340120701fd766c59157dac Mon Sep 17 00:00:00 2001 From: armin Date: Wed, 14 Oct 2020 19:02:07 +0330 Subject: [PATCH 05/13] REFACTOR: remove unnecessary comma --- src/components/ChartContainer.js | 48 +++++----- src/components/ChartNode.js | 152 ++++++++++++++++--------------- 2 files changed, 102 insertions(+), 98 deletions(-) diff --git a/src/components/ChartContainer.js b/src/components/ChartContainer.js index 64738af..46631a2 100644 --- a/src/components/ChartContainer.js +++ b/src/components/ChartContainer.js @@ -3,7 +3,7 @@ import React, { useEffect, useRef, forwardRef, - useImperativeHandle, + useImperativeHandle } from "react"; import PropTypes from "prop-types"; import { selectNodeService } from "./service"; @@ -38,7 +38,7 @@ const defaultProps = { chartClass: "", draggable: false, collapsible: true, - multipleSelect: false, + multipleSelect: false }; const ChartContainer = forwardRef( @@ -57,7 +57,7 @@ const ChartContainer = forwardRef( multipleSelect, onClickNode, onClickChart, - loadData, + loadData }, ref ) => { @@ -96,13 +96,13 @@ const ChartContainer = forwardRef( const [ds, setDS] = useState(datasource); const onLoadData = async (datasource, children) => { - await dsDigger.updateNode({...datasource, children}); + await dsDigger.updateNode({ ...datasource, children }); setDS({ ...dsDigger.ds }); - }; - + }; + const dsDigger = new JSONDigger(datasource, "id", "children"); - const clickChartHandler = (event) => { + const clickChartHandler = event => { if (!event.target.closest(".oc-node")) { if (onClickChart) { onClickChart(); @@ -116,7 +116,7 @@ const ChartContainer = forwardRef( setCursor("default"); }; - const panHandler = (e) => { + const panHandler = e => { let newX = 0; let newY = 0; if (!e.targetTouches) { @@ -151,7 +151,7 @@ const ChartContainer = forwardRef( } }; - const panStartHandler = (e) => { + const panStartHandler = e => { if (e.target.closest(".oc-node")) { setPanning(false); return; @@ -184,7 +184,7 @@ const ChartContainer = forwardRef( } }; - const updateChartScale = (newScale) => { + const updateChartScale = newScale => { let matrix = []; let targetScale = 1; if (transform === "") { @@ -209,7 +209,7 @@ const ChartContainer = forwardRef( } }; - const zoomHandler = (e) => { + const zoomHandler = e => { let newScale = 1 + (e.deltaY > 0 ? -0.2 : 0.2); updateChartScale(newScale); }; @@ -220,15 +220,15 @@ const ChartContainer = forwardRef( const doc = canvasWidth > canvasHeight ? new jsPDF({ - orientation: "landscape", - unit: "px", - format: [canvasWidth, canvasHeight], - }) + orientation: "landscape", + unit: "px", + format: [canvasWidth, canvasHeight] + }) : new jsPDF({ - orientation: "portrait", - unit: "px", - format: [canvasHeight, canvasWidth], - }); + orientation: "portrait", + unit: "px", + format: [canvasHeight, canvasWidth] + }); doc.addImage(canvas.toDataURL("image/jpeg", 1.0), "JPEG", 0, 0); doc.save(exportFilename + ".pdf"); }; @@ -271,9 +271,9 @@ const ChartContainer = forwardRef( onclone: function (clonedDoc) { clonedDoc.querySelector(".orgchart").style.background = "none"; clonedDoc.querySelector(".orgchart").style.transform = ""; - }, + } }).then( - (canvas) => { + canvas => { if (exportFileextension.toLowerCase() === "pdf") { exportPDF(canvas, exportFilename); } else { @@ -295,7 +295,7 @@ const ChartContainer = forwardRef( .querySelectorAll( ".oc-node.hidden, .oc-hierarchy.hidden, .isSiblingsCollapsed, .isAncestorsCollapsed" ) - .forEach((el) => { + .forEach(el => { el.classList.remove( "hidden", "isSiblingsCollapsed", @@ -329,8 +329,8 @@ const ChartContainer = forwardRef( multipleSelect={multipleSelect} changeHierarchy={changeHierarchy} onClickNode={onClickNode} - loadData={loadData} - onLoadData={onLoadData} + loadData={loadData} + onLoadData={onLoadData} />
    diff --git a/src/components/ChartNode.js b/src/components/ChartNode.js index f3eb4c0..df24efd 100644 --- a/src/components/ChartNode.js +++ b/src/components/ChartNode.js @@ -9,15 +9,15 @@ const propTypes = { collapsible: PropTypes.bool, multipleSelect: PropTypes.bool, changeHierarchy: PropTypes.func, - onClickNode: PropTypes.func, - loadData: PropTypes.func, - onLoadData: PropTypes.func, + onClickNode: PropTypes.func, + loadData: PropTypes.func, + onLoadData: PropTypes.func, }; const defaultProps = { draggable: false, collapsible: true, - multipleSelect: false, + multipleSelect: false, }; const ChartNode = ({ @@ -28,14 +28,18 @@ const ChartNode = ({ multipleSelect, changeHierarchy, onClickNode, - loadData, - onLoadData, + loadData, + onLoadData }) => { const node = useRef(); - const [isChildrenCollapsed, setIsChildrenCollapsed] = useState(!datasource.defaultExpanded); + const [isChildrenCollapsed, setIsChildrenCollapsed] = useState( + !datasource.defaultExpanded + ); const [topEdgeExpanded, setTopEdgeExpanded] = useState(); const [rightEdgeExpanded, setRightEdgeExpanded] = useState(); - const [bottomEdgeExpanded, setBottomEdgeExpanded] = useState(datasource.defaultExpanded); + const [bottomEdgeExpanded, setBottomEdgeExpanded] = useState( + datasource.defaultExpanded + ); const [leftEdgeExpanded, setLeftEdgeExpanded] = useState(); const [allowedDrop, setAllowedDrop] = useState(false); const [selected, setSelected] = useState(false); @@ -44,13 +48,13 @@ const ChartNode = ({ "oc-node", isChildrenCollapsed ? "isChildrenCollapsed" : "", allowedDrop ? "allowedDrop" : "", - selected ? "selected" : "", + selected ? "selected" : "" ] - .filter((item) => item) + .filter(item => item) .join(" "); useEffect(() => { - const subs1 = dragNodeService.getDragInfo().subscribe((draggedInfo) => { + const subs1 = dragNodeService.getDragInfo().subscribe(draggedInfo => { if (draggedInfo) { setAllowedDrop( !document @@ -67,7 +71,7 @@ const ChartNode = ({ const subs2 = selectNodeService .getSelectedNodeInfo() - .subscribe((selectedNodeInfo) => { + .subscribe(selectedNodeInfo => { if (selectedNodeInfo) { if (multipleSelect) { if (selectedNodeInfo.selectedNodeId === datasource.id) { @@ -96,7 +100,7 @@ const ChartNode = ({ : undefined; const isSiblingsCollapsed = Array.from( node.parentNode.children - ).some((item) => item.classList.contains("hidden")); + ).some(item => item.classList.contains("hidden")); setTopEdgeExpanded(!isAncestorsCollapsed); setRightEdgeExpanded(!isSiblingsCollapsed); @@ -111,7 +115,7 @@ const ChartNode = ({ setLeftEdgeExpanded(undefined); }; - const toggleAncestors = (actionNode) => { + const toggleAncestors = actionNode => { let node = actionNode.parentNode.closest("li"); if (!node) return; const isAncestorsCollapsed = node.firstChild.classList.contains("hidden"); @@ -123,7 +127,7 @@ const ChartNode = ({ // 向下折叠，则折叠所有祖先节点以及祖先节点的兄弟节点 const isSiblingsCollapsed = Array.from( actionNode.parentNode.children - ).some((item) => item.classList.contains("hidden")); + ).some(item => item.classList.contains("hidden")); if (!isSiblingsCollapsed) { toggleSiblings(actionNode); } @@ -144,34 +148,34 @@ const ChartNode = ({ } }; - const topEdgeClickHandler = (e) => { + const topEdgeClickHandler = e => { e.stopPropagation(); setTopEdgeExpanded(!topEdgeExpanded); toggleAncestors(e.target.closest("li")); }; - const addChildrenHandler = (children) => { - onLoadData(datasource, children); - setIsChildrenCollapsed(false) - setBottomEdgeExpanded(true) - } + const addChildrenHandler = children => { + onLoadData(datasource, children); + setIsChildrenCollapsed(false); + setBottomEdgeExpanded(true); + }; - const bottomEdgeClickHandler = async (e) => { + const bottomEdgeClickHandler = async e => { e.stopPropagation(); - if (loadData && (!!!datasource.children)) { - const children = await loadData(datasource); - addChildrenHandler(children) + if (loadData && !!!datasource.children) { + const children = await loadData(datasource); + addChildrenHandler(children); } else { setIsChildrenCollapsed(!isChildrenCollapsed); setBottomEdgeExpanded(!bottomEdgeExpanded); } }; - const toggleSiblings = (actionNode) => { + const toggleSiblings = actionNode => { let node = actionNode.previousSibling; const isSiblingsCollapsed = Array.from( actionNode.parentNode.children - ).some((item) => item.classList.contains("hidden")); + ).some(item => item.classList.contains("hidden")); actionNode.classList.toggle("isSiblingsCollapsed", !isSiblingsCollapsed); // 先处理同级的兄弟节点 while (node) { @@ -200,18 +204,18 @@ const ChartNode = ({ } }; - const hEdgeClickHandler = (e) => { + const hEdgeClickHandler = e => { e.stopPropagation(); setLeftEdgeExpanded(!leftEdgeExpanded); setRightEdgeExpanded(!rightEdgeExpanded); toggleSiblings(e.target.closest("li")); }; - const filterAllowedDropNodes = (id) => { + const filterAllowedDropNodes = id => { dragNodeService.sendDragInfo(id); }; - const clickNodeHandler = (event) => { + const clickNodeHandler = event => { if (onClickNode) { onClickNode(datasource); } @@ -219,7 +223,7 @@ const ChartNode = ({ selectNodeService.sendSelectedNodeInfo(datasource.id); }; - const dragstartHandler = (event) => { + const dragstartHandler = event => { const copyDS = { ...datasource }; delete copyDS.relationship; event.dataTransfer.setData("text/plain", JSON.stringify(copyDS)); @@ -227,7 +231,7 @@ const ChartNode = ({ filterAllowedDropNodes(node.current.id); }; - const dragoverHandler = (event) => { + const dragoverHandler = event => { // prevent default to allow drop event.preventDefault(); }; @@ -237,7 +241,7 @@ const ChartNode = ({ dragNodeService.clearDragInfo(); }; - const dropHandler = (event) => { + const dropHandler = event => { if (!event.currentTarget.classList.contains("allowedDrop")) { return; } @@ -246,12 +250,12 @@ const ChartNode = ({ JSON.parse(event.dataTransfer.getData("text/plain")), event.currentTarget.id ); - }; + }; - const setCollapse = (collapse) => { - setIsChildrenCollapsed(collapse); - setBottomEdgeExpanded(!collapse) - } + const setCollapse = collapse => { + setIsChildrenCollapsed(collapse); + setBottomEdgeExpanded(!collapse); + }; return (
  • @@ -269,30 +273,33 @@ const ChartNode = ({ onMouseLeave={removeArrows} > {NodeTemplate ? ( - + ) : ( - <> -
    - {datasource.relationship && - datasource.relationship.charAt(2) === "1" && ( - - )} - {datasource.name} -
    -
    {datasource.title}
    - - )} + <> +
    + {datasource.relationship && + datasource.relationship.charAt(2) === "1" && ( + + )} + {datasource.name} +
    +
    {datasource.title}
    + + )} {collapsible && datasource.relationship && datasource.relationship.charAt(0) === "1" && ( )} @@ -301,23 +308,21 @@ const ChartNode = ({ datasource.relationship.charAt(1) === "1" && ( <> @@ -326,20 +331,19 @@ const ChartNode = ({ datasource.relationship && datasource.relationship.charAt(2) === "1" && ( )} {datasource.children && datasource.children.length > 0 && (
      - {datasource.children.map((node) => ( + {datasource.children.map(node => ( ))}
    From e389c94048a69dfca9e4b88475c0425d21b61423 Mon Sep 17 00:00:00 2001 From: armin Date: Thu, 15 Oct 2020 11:17:52 +0330 Subject: [PATCH 06/13] REFACTOR: Update docs and return css to previous --- README.md | 7 +++++ src/App.js | 2 +- src/components/ChartContainer.js | 29 ++++++++--------- src/components/ChartNode.js | 54 ++++++++++++++++---------------- src/index.js | 2 -- src/lazyload/custom-node.css | 20 ++++++------ src/lazyload/custom-node.js | 13 ++------ src/lazyload/index.js | 33 ------------------- src/lazyload/lazyload-chart.js | 30 ++++++++++++++++++ 9 files changed, 93 insertions(+), 97 deletions(-) delete mode 100644 src/lazyload/index.js create mode 100644 src/lazyload/lazyload-chart.js diff --git a/README.md b/README.md index 321be88..c65a8ec 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ - Supports exporting chart as a picture or pdf document - Supports pan and zoom - Allows user to customize the internal structure for every node +- Allows user to fetch nodes from server and add to chart(lazyload) ## Props @@ -102,6 +103,12 @@ + + + + + +
    number 0.5 User can zoom the chart at different scales(0.5~7).
    loadDatafunctionThis function takes the node as an argument and returns a Promise. Promise should return a list of child nodes in resolve: (node) => Promise< node[] >
    diff --git a/src/App.js b/src/App.js index fbb6aad..a3612c8 100644 --- a/src/App.js +++ b/src/App.js @@ -8,8 +8,8 @@ import ExportChart from "./export-chart/export-chart"; import DragDropChart from "./drag-drop-chart/drag-drop-chart"; import EditChart from "./edit-chart/edit-chart"; import EditNode from "./edit-node/edit-node"; +import lazyloadChart from "./lazyload/lazyload-chart"; import "./App.css"; -import lazyloadChart from "./lazyload"; const App = () => { return ( diff --git a/src/components/ChartContainer.js b/src/components/ChartContainer.js index 46631a2..591e153 100644 --- a/src/components/ChartContainer.js +++ b/src/components/ChartContainer.js @@ -11,6 +11,7 @@ import JSONDigger from "json-digger"; import html2canvas from "html2canvas"; import jsPDF from "jspdf"; import ChartNode from "./ChartNode"; +import "./ChartContainer.css"; const propTypes = { datasource: PropTypes.object.isRequired, @@ -61,10 +62,10 @@ const ChartContainer = forwardRef( }, ref ) => { - const container = useRef(); + + const container = useRef(); const chart = useRef(); const downloadButton = useRef(); - const [startX, setStartX] = useState(0); const [startY, setStartY] = useState(0); const [transform, setTransform] = useState(""); @@ -78,11 +79,11 @@ const ChartContainer = forwardRef( if (data.isLeaf === undefined) { data.isLeaf = true; } - data.relationship = - flags + - ((data.children && data.children.length > 0) || !data.isLeaf ? 1 : 0); - if (data.children && data.children.length > 0) { - data.children.forEach(function (item) { + + data.relationship = flags + ((data.children && !!data.children.length) || !data.isLeaf ? 1 : 0); + + if (data.children) { + data.children.forEach(function(item) { attachRel(item, "1" + (data.children.length > 1 ? 1 : 0)); }); } @@ -220,14 +221,14 @@ const ChartContainer = forwardRef( const doc = canvasWidth > canvasHeight ? new jsPDF({ - orientation: "landscape", - unit: "px", - format: [canvasWidth, canvasHeight] + orientation: "landscape", + unit: "px", + format: [canvasWidth, canvasHeight] }) : new jsPDF({ - orientation: "portrait", - unit: "px", - format: [canvasHeight, canvasWidth] + orientation: "portrait", + unit: "px", + format: [canvasHeight, canvasWidth] }); doc.addImage(canvas.toDataURL("image/jpeg", 1.0), "JPEG", 0, 0); doc.save(exportFilename + ".pdf"); @@ -268,7 +269,7 @@ const ChartContainer = forwardRef( html2canvas(chart.current, { width: chart.current.clientWidth, height: chart.current.clientHeight, - onclone: function (clonedDoc) { + onclone: function(clonedDoc) { clonedDoc.querySelector(".orgchart").style.background = "none"; clonedDoc.querySelector(".orgchart").style.transform = ""; } diff --git a/src/components/ChartNode.js b/src/components/ChartNode.js index df24efd..23bc42b 100644 --- a/src/components/ChartNode.js +++ b/src/components/ChartNode.js @@ -1,6 +1,7 @@ import React, { useState, useRef, useEffect } from "react"; import PropTypes from "prop-types"; import { dragNodeService, selectNodeService } from "./service"; +import "./ChartNode.css"; const propTypes = { datasource: PropTypes.object, @@ -17,7 +18,7 @@ const propTypes = { const defaultProps = { draggable: false, collapsible: true, - multipleSelect: false, + multipleSelect: false }; const ChartNode = ({ @@ -32,14 +33,10 @@ const ChartNode = ({ onLoadData }) => { const node = useRef(); - const [isChildrenCollapsed, setIsChildrenCollapsed] = useState( - !datasource.defaultExpanded - ); + const [isChildrenCollapsed, setIsChildrenCollapsed] = useState(!datasource.defaultExpanded); const [topEdgeExpanded, setTopEdgeExpanded] = useState(); const [rightEdgeExpanded, setRightEdgeExpanded] = useState(); - const [bottomEdgeExpanded, setBottomEdgeExpanded] = useState( - datasource.defaultExpanded - ); + const [bottomEdgeExpanded, setBottomEdgeExpanded] = useState(datasource.defaultExpanded); const [leftEdgeExpanded, setLeftEdgeExpanded] = useState(); const [allowedDrop, setAllowedDrop] = useState(false); const [selected, setSelected] = useState(false); @@ -91,7 +88,7 @@ const ChartNode = ({ }; }, [multipleSelect, datasource]); - const addArrows = (e) => { + const addArrows = e => { const node = e.target.closest("li"); const parent = node.parentNode.closest("li"); const isAncestorsCollapsed = @@ -295,10 +292,10 @@ const ChartNode = ({ datasource.relationship.charAt(0) === "1" && ( @@ -308,20 +305,22 @@ const ChartNode = ({ datasource.relationship.charAt(1) === "1" && ( <> @@ -331,11 +330,12 @@ const ChartNode = ({ datasource.relationship && datasource.relationship.charAt(2) === "1" && ( diff --git a/src/index.js b/src/index.js index e8caa3d..87d1be5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import './components/ChartContainer.css' -import './components/ChartNode.css' import App from './App'; import * as serviceWorker from './serviceWorker'; diff --git a/src/lazyload/custom-node.css b/src/lazyload/custom-node.css index f7771b9..e8cfb4c 100644 --- a/src/lazyload/custom-node.css +++ b/src/lazyload/custom-node.css @@ -1,4 +1,4 @@ -.orgchart.myChart { +.orgchart.lazyload-chart { background-image: linear-gradient( 90deg, rgba(33, 90, 136, 0.15) 10%, @@ -7,30 +7,30 @@ linear-gradient(rgba(33, 90, 136, 0.15) 10%, rgba(0, 0, 0, 0) 10%) !important; } -.orgchart.myChart > ul > li > ul li::before { - border-top-color: #215a88; +.orgchart.lazyload-chart > ul > li > ul li::before { + border-top-color: #F7C374; } -.orgchart.myChart > ul > li > ul li .oc-node::before, -.orgchart.myChart ul li .oc-node:not(:only-child)::after { - background-color: #215a88; +.orgchart.lazyload-chart > ul > li > ul li .oc-node::before, +.orgchart.lazyload-chart ul li .oc-node:not(:only-child)::after { + background-color: #F7C374; } -.orgchart.myChart .oc-node .position { +.orgchart.lazyload-chart .oc-node .position { box-sizing: border-box; - background-color: #215a88; + background-color: #F7C374; color: #fff; width: 130px; height: 65px; padding: 2px; } -.orgchart.myChart .oc-node .fullname { +.orgchart.lazyload-chart .oc-node .fullname { box-sizing: border-box; color: #215a88; background-color: #fff; width: 130px; height: 65px; padding: 2px; - border: 1px solid #215a88; + border: 1px solid#F7C374; } diff --git a/src/lazyload/custom-node.js b/src/lazyload/custom-node.js index 91ef223..43b2ebd 100644 --- a/src/lazyload/custom-node.js +++ b/src/lazyload/custom-node.js @@ -1,24 +1,17 @@ import React from "react"; import PropTypes from "prop-types"; -import { loadDataAsync } from "."; import "./custom-node.css"; const propTypes = { nodeData: PropTypes.object.isRequired, }; -const MyNode = ({ nodeData, addChildren }) => { - const selectNode = async () => { - if (addChildren) { - const children = await loadDataAsync(); - addChildren(children); - } - }; +const MyNode = ({ nodeData, addChildren, setCollapse}) => { return (
    -
    {nodeData.data.title}
    -
    {nodeData.data.name}
    +
    {nodeData.title}
    +
    {nodeData.name}
    ); }; diff --git a/src/lazyload/index.js b/src/lazyload/index.js deleted file mode 100644 index 3d85bbb..0000000 --- a/src/lazyload/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import OrganizationChart from "../components/ChartContainer"; -import MyNode from "./custom-node"; - -export const loadDataAsync = (node) => { - return new Promise((resolve, reject) => { - resolve([ - { id: "n9", name: "Hong Miao", - data: { title: "department manager", name: "Hong Miao"}}, - { - id: "n10", - name: "Chun Miao", - data: {title: "department manager", name: "Hong Miao"}, - } - ]) - }) -} - -const lazyloadChart = () => { - const ds = { - id: "n1", - data: { - name: "Lao Lao", - title: "general manager", - }, - isLeaf: false - }; - - - return ; -}; - -export default lazyloadChart; diff --git a/src/lazyload/lazyload-chart.js b/src/lazyload/lazyload-chart.js new file mode 100644 index 0000000..52de1ee --- /dev/null +++ b/src/lazyload/lazyload-chart.js @@ -0,0 +1,30 @@ +import React from "react"; +import OrganizationChart from "../components/ChartContainer"; +import MyNode from "./custom-node"; + +export const loadDataAsync = (node) => { + return new Promise((resolve, reject) => { + resolve([ + { id: "n2", name: "Bo Miao", title: "department manager" }, + { + id: "n3", + name: "Su Miao", + title: "department manager", + } + ]) + }) +} + +const lazyloadChart = () => { + const ds = { + id: "n1", + name: "Lao Lao", + title: "general manager", + isLeaf: false + }; + + + return ; +}; + +export default lazyloadChart; From da9872bc020631f23923a8f4fbe35343e3ac4633 Mon Sep 17 00:00:00 2001 From: armin Date: Fri, 16 Oct 2020 06:57:41 +0330 Subject: [PATCH 07/13] REFACTOR: Update README.md --- README.md | 13 +++++++++++++ package.json | 17 ++++++++++------- src/components/ChartNode.css | 1 - src/custom-node-chart/custom-node-chart.js | 2 +- src/lazyload/lazyload-chart.js | 1 - 5 files changed, 24 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index c65a8ec..5e75553 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,19 @@ - Allows user to customize the internal structure for every node - Allows user to fetch nodes from server and add to chart(lazyload) +## Chart Node + +```js +type node = { + id: string + isLeaf?: boolean + defaultExpanded?: boolean + children: node[] + // you can add another fields to node. +}; +``` + + ## Props diff --git a/package.json b/package.json index 6859363..a497ea5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-orgchart-lazyload", - "version": "1.0.4", + "name": "@dabeng/react-orgchart", + "version": "1.1.0", "main": "./dist/ChartContainer.js", "files": [ "dist", @@ -8,7 +8,7 @@ ], "repository": { "type": "git", - "url": "https://github.com/arminyahya/react-orgchart" + "url": "https://github.com/dabeng/react-orgchart.git" }, "keywords": [ "react", @@ -20,9 +20,12 @@ "tree-like", "tree-view" ], - "author": "armin yahya", + "author": "dabeng ", "license": "MIT", - "homepage": "https://github.com/arminyahya/react-orgchart#readme", + "bugs": { + "url": "https://github.com/dabeng/react-orgchart/issues" + }, + "homepage": "https://github.com/dabeng/react-orgchart#readme", "babel": { "presets": [ "@babel/preset-env", @@ -56,7 +59,7 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "publish:npm": "mkdir dist && babel src/components -d dist --copy-files && npm publish" + "publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files" }, "eslintConfig": { "extends": "react-app" @@ -73,4 +76,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file diff --git a/src/components/ChartNode.css b/src/components/ChartNode.css index 470fac8..bf4a5c8 100644 --- a/src/components/ChartNode.css +++ b/src/components/ChartNode.css @@ -1,4 +1,3 @@ - .orgchart ul { padding-left: 0; text-align: center; diff --git a/src/custom-node-chart/custom-node-chart.js b/src/custom-node-chart/custom-node-chart.js index f8625d1..eb4d415 100644 --- a/src/custom-node-chart/custom-node-chart.js +++ b/src/custom-node-chart/custom-node-chart.js @@ -6,7 +6,7 @@ const CustomNodeChart = () => { const ds = { id: "n1", name: "Lao Lao", - title: "general manager", + title: "general manager", children: [ { id: "n2", name: "Bo Miao", title: "department manager" }, { diff --git a/src/lazyload/lazyload-chart.js b/src/lazyload/lazyload-chart.js index 52de1ee..6525239 100644 --- a/src/lazyload/lazyload-chart.js +++ b/src/lazyload/lazyload-chart.js @@ -20,7 +20,6 @@ const lazyloadChart = () => { id: "n1", name: "Lao Lao", title: "general manager", - isLeaf: false }; From d7f5883aa7378c290adccba685bc82199d94a94f Mon Sep 17 00:00:00 2001 From: armin Date: Fri, 16 Oct 2020 07:04:23 +0330 Subject: [PATCH 08/13] REFACTOR: Update README.md --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 5e75553..183a8aa 100644 --- a/README.md +++ b/README.md @@ -19,14 +19,14 @@ ```js type node = { - id: string - isLeaf?: boolean - defaultExpanded?: boolean - children: node[] - // you can add another fields to node. -}; + id: string + isLeaf?: boolean + defaultExpanded?: boolean + children: node[] ``` +you can add other fields to the model. + ## Props
    @@ -117,7 +117,7 @@ type node = { - + From f321f2285400006caa5ee5d163af7629e95f46c5 Mon Sep 17 00:00:00 2001 From: armin Date: Fri, 16 Oct 2020 07:08:19 +0330 Subject: [PATCH 09/13] REFACTOR: update dist --- dist/ChartNode.css | 1 - dist/ChartNode.js | 52 ++++++++++++++++++++++++++++++++-------------- 2 files changed, 36 insertions(+), 17 deletions(-) diff --git a/dist/ChartNode.css b/dist/ChartNode.css index 470fac8..bf4a5c8 100644 --- a/dist/ChartNode.css +++ b/dist/ChartNode.css @@ -1,4 +1,3 @@ - .orgchart ul { padding-left: 0; text-align: center; diff --git a/dist/ChartNode.js b/dist/ChartNode.js index a5f32a2..e649cb8 100644 --- a/dist/ChartNode.js +++ b/dist/ChartNode.js @@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types")); var _service = require("./service"); +require("./ChartNode.css"); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } @@ -53,6 +55,7 @@ var propTypes = { multipleSelect: _propTypes.default.bool, changeHierarchy: _propTypes.default.func, onClickNode: _propTypes.default.func, + loadData: _propTypes.default.func, onLoadData: _propTypes.default.func }; var defaultProps = { @@ -69,8 +72,8 @@ var ChartNode = function ChartNode(_ref) { multipleSelect = _ref.multipleSelect, changeHierarchy = _ref.changeHierarchy, onClickNode = _ref.onClickNode, - loadOnDemand = _ref.loadOnDemand, - onLoadNode = _ref.onLoadNode; + loadData = _ref.loadData, + onLoadData = _ref.onLoadData; var node = (0, _react.useRef)(); var _useState = (0, _react.useState)(!datasource.defaultExpanded), @@ -197,28 +200,44 @@ var ChartNode = function ChartNode(_ref) { toggleAncestors(e.target.closest("li")); }; + var addChildrenHandler = function addChildrenHandler(children) { + onLoadData(datasource, children); + setIsChildrenCollapsed(false); + setBottomEdgeExpanded(true); + }; + var bottomEdgeClickHandler = /*#__PURE__*/ function () { var _ref2 = _asyncToGenerator( /*#__PURE__*/ regeneratorRuntime.mark(function _callee(e) { + var children; return regeneratorRuntime.wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: e.stopPropagation(); - if (loadOnDemand && isChildrenCollapsed && (!datasource.children || datasource.children.length === 0)) { - onLoadNode(datasource); - setIsChildrenCollapsed(false); - setBottomEdgeExpanded(true); - } else { - setIsChildrenCollapsed(!isChildrenCollapsed); - setBottomEdgeExpanded(!bottomEdgeExpanded); + if (!(loadData && !!!datasource.children)) { + _context.next = 8; + break; } - case 2: + _context.next = 4; + return loadData(datasource); + + case 4: + children = _context.sent; + addChildrenHandler(children); + _context.next = 10; + break; + + case 8: + setIsChildrenCollapsed(!isChildrenCollapsed); + setBottomEdgeExpanded(!bottomEdgeExpanded); + + case 10: case "end": return _context.stop(); } @@ -337,7 +356,8 @@ var ChartNode = function ChartNode(_ref) { onMouseLeave: removeArrows }, NodeTemplate ? _react.default.createElement(NodeTemplate, { nodeData: datasource, - setCollapse: setCollapse + setCollapse: setCollapse, + addChildren: addChildrenHandler }) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", { className: "oc-heading" }, datasource.relationship && datasource.relationship.charAt(2) === "1" && _react.default.createElement("i", { @@ -348,13 +368,13 @@ var ChartNode = function ChartNode(_ref) { className: "oc-edge verticalEdge topEdge oci ".concat(topEdgeExpanded === undefined ? "" : topEdgeExpanded ? "oci-chevron-down" : "oci-chevron-up"), onClick: topEdgeClickHandler }), collapsible && datasource.relationship && datasource.relationship.charAt(1) === "1" && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("i", { - className: "oc-edge horizontalEdge rightEdge oci ".concat(rightEdgeExpanded === undefined ? "" : rightEdgeExpanded ? "oci-chevron-left" : "oci-chevron-right"), + className: "oc-edge horizontalEdge rightEdge oci\n ".concat(rightEdgeExpanded === undefined ? "" : rightEdgeExpanded ? "oci-chevron-left" : "oci-chevron-right"), onClick: hEdgeClickHandler }), _react.default.createElement("i", { - className: "oc-edge horizontalEdge leftEdge oci ".concat(leftEdgeExpanded === undefined ? "" : leftEdgeExpanded ? "oci-chevron-right" : "oci-chevron-left"), + className: "oc-edge horizontalEdge leftEdge oci\n ".concat(leftEdgeExpanded === undefined ? "" : leftEdgeExpanded ? "oci-chevron-right" : "oci-chevron-left"), onClick: hEdgeClickHandler })), collapsible && datasource.relationship && datasource.relationship.charAt(2) === "1" && _react.default.createElement("i", { - className: "oc-edge verticalEdge bottomEdge oci ".concat(bottomEdgeExpanded === undefined ? "" : bottomEdgeExpanded ? "oci-chevron-up" : "oci-chevron-down"), + className: "oc-edge verticalEdge bottomEdge oci\n ".concat(bottomEdgeExpanded === undefined ? "" : bottomEdgeExpanded ? "oci-chevron-up" : "oci-chevron-down"), onClick: bottomEdgeClickHandler })), datasource.children && datasource.children.length > 0 && _react.default.createElement("ul", { className: isChildrenCollapsed ? "hidden" : "" @@ -369,8 +389,8 @@ var ChartNode = function ChartNode(_ref) { multipleSelect: multipleSelect, changeHierarchy: changeHierarchy, onClickNode: onClickNode, - loadOnDemand: loadOnDemand, - onLoadNode: onLoadNode + loadData: loadData, + onLoadData: onLoadData }); }))); }; From d94b23e2b6fce355fff327f0d6741ff47d98e12d Mon Sep 17 00:00:00 2001 From: armin Date: Fri, 16 Oct 2020 07:34:41 +0330 Subject: [PATCH 10/13] REFACTOR: Change dist to version in master for merge conf --- dist/ChartContainer.js | 121 +++++++---------------------------------- dist/ChartNode.css | 1 + dist/ChartNode.js | 87 +++++------------------------ dist/service.js | 39 ------------- 4 files changed, 35 insertions(+), 213 deletions(-) delete mode 100644 dist/service.js diff --git a/dist/ChartContainer.js b/dist/ChartContainer.js index 0701a49..40c4ae1 100644 --- a/dist/ChartContainer.js +++ b/dist/ChartContainer.js @@ -21,6 +21,8 @@ var _jspdf = _interopRequireDefault(require("jspdf")); var _ChartNode = _interopRequireDefault(require("./ChartNode")); +require("./ChartContainer.css"); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } @@ -58,9 +60,7 @@ var propTypes = { collapsible: _propTypes.default.bool, multipleSelect: _propTypes.default.bool, onClickNode: _propTypes.default.func, - onClickChart: _propTypes.default.func, - onLoadData: _propTypes.default.func, - expandedNodes: _propTypes.default.array + onClickChart: _propTypes.default.func }; var defaultProps = { pan: false, @@ -71,8 +71,7 @@ var defaultProps = { chartClass: "", draggable: false, collapsible: true, - multipleSelect: false, - loadOnDemand: false + multipleSelect: false }; var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { var datasource = _ref.datasource, @@ -87,10 +86,7 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { collapsible = _ref.collapsible, multipleSelect = _ref.multipleSelect, onClickNode = _ref.onClickNode, - onClickChart = _ref.onClickChart, - loadOnDemand = _ref.loadOnDemand, - onLoadData = _ref.onLoadData, - expandedNodes = _ref.expandedNodes; + onClickChart = _ref.onClickChart; var container = (0, _react.useRef)(); var chart = (0, _react.useRef)(); var downloadButton = (0, _react.useRef)(); @@ -136,13 +132,9 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { setDownload = _useState16[1]; var attachRel = function attachRel(data, flags) { - if (data.isLeaf === undefined) { - data.isLeaf = true; - } + data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0); - data.relationship = flags + (data.children && data.children.length > 0 || !data.isLeaf ? 1 : 0); - - if (data.children && data.children.length > 0) { + if (data.children) { data.children.forEach(function (item) { attachRel(item, "1" + (data.children.length > 1 ? 1 : 0)); }); @@ -151,83 +143,14 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { return data; }; - (0, _react.useEffect)(function () { - setDS(datasource); - }, [datasource]); - var _useState17 = (0, _react.useState)(datasource), _useState18 = _slicedToArray(_useState17, 2), ds = _useState18[0], setDS = _useState18[1]; - var onLoadNode = - /*#__PURE__*/ - function () { - var _ref2 = _asyncToGenerator( - /*#__PURE__*/ - regeneratorRuntime.mark(function _callee(node) { - var childrens; - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - _context.next = 2; - return onLoadData(node); - - case 2: - childrens = _context.sent; - childrens.map(function (ch) { - ch.Hierarchy = node.Hierarchy ? node.Hierarchy.concat([node.id]) : [node.id]; - }); - onLoadDataFinished({ - id: node.id, - childrens: childrens - }); - - case 5: - case "end": - return _context.stop(); - } - } - }, _callee); - })); - - return function onLoadNode(_x) { - return _ref2.apply(this, arguments); - }; - }(); - - var onLoadDataFinished = - /*#__PURE__*/ - function () { - var _ref4 = _asyncToGenerator( - /*#__PURE__*/ - regeneratorRuntime.mark(function _callee2(_ref3) { - var id, childrens; - return regeneratorRuntime.wrap(function _callee2$(_context2) { - while (1) { - switch (_context2.prev = _context2.next) { - case 0: - id = _ref3.id, childrens = _ref3.childrens; - _context2.next = 3; - return dsDigger.addChildren(id, childrens); - - case 3: - setDS(_objectSpread({}, dsDigger.ds)); - - case 4: - case "end": - return _context2.stop(); - } - } - }, _callee2); - })); - - return function onLoadDataFinished(_x2) { - return _ref4.apply(this, arguments); - }; - }(); - + (0, _react.useEffect)(function () { + setDS(datasource); + }, [datasource]); var dsDigger = new _jsonDigger.default(datasource, "id", "children"); var clickChartHandler = function clickChartHandler(event) { @@ -386,18 +309,18 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { var changeHierarchy = /*#__PURE__*/ function () { - var _ref5 = _asyncToGenerator( + var _ref2 = _asyncToGenerator( /*#__PURE__*/ - regeneratorRuntime.mark(function _callee3(draggedItemData, dropTargetId) { - return regeneratorRuntime.wrap(function _callee3$(_context3) { + regeneratorRuntime.mark(function _callee(draggedItemData, dropTargetId) { + return regeneratorRuntime.wrap(function _callee$(_context) { while (1) { - switch (_context3.prev = _context3.next) { + switch (_context.prev = _context.next) { case 0: - _context3.next = 2; + _context.next = 2; return dsDigger.removeNode(draggedItemData.id); case 2: - _context3.next = 4; + _context.next = 4; return dsDigger.addChildren(dropTargetId, draggedItemData); case 4: @@ -405,14 +328,14 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { case 5: case "end": - return _context3.stop(); + return _context.stop(); } } - }, _callee3); + }, _callee); })); - return function changeHierarchy(_x3, _x4) { - return _ref5.apply(this, arguments); + return function changeHierarchy(_x, _x2) { + return _ref2.apply(this, arguments); }; }(); @@ -478,9 +401,7 @@ var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { collapsible: collapsible, multipleSelect: multipleSelect, changeHierarchy: changeHierarchy, - onClickNode: onClickNode, - loadOnDemand: loadOnDemand, - onLoadNode: onLoadNode + onClickNode: onClickNode }))), _react.default.createElement("a", { className: "oc-download-btn hidden", ref: downloadButton, diff --git a/dist/ChartNode.css b/dist/ChartNode.css index bf4a5c8..470fac8 100644 --- a/dist/ChartNode.css +++ b/dist/ChartNode.css @@ -1,3 +1,4 @@ + .orgchart ul { padding-left: 0; text-align: center; diff --git a/dist/ChartNode.js b/dist/ChartNode.js index e649cb8..bd4fdac 100644 --- a/dist/ChartNode.js +++ b/dist/ChartNode.js @@ -27,10 +27,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } -function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } - -function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } - function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } @@ -54,9 +50,7 @@ var propTypes = { collapsible: _propTypes.default.bool, multipleSelect: _propTypes.default.bool, changeHierarchy: _propTypes.default.func, - onClickNode: _propTypes.default.func, - loadData: _propTypes.default.func, - onLoadData: _propTypes.default.func + onClickNode: _propTypes.default.func }; var defaultProps = { draggable: false, @@ -71,12 +65,10 @@ var ChartNode = function ChartNode(_ref) { collapsible = _ref.collapsible, multipleSelect = _ref.multipleSelect, changeHierarchy = _ref.changeHierarchy, - onClickNode = _ref.onClickNode, - loadData = _ref.loadData, - onLoadData = _ref.onLoadData; + onClickNode = _ref.onClickNode; var node = (0, _react.useRef)(); - var _useState = (0, _react.useState)(!datasource.defaultExpanded), + var _useState = (0, _react.useState)(false), _useState2 = _slicedToArray(_useState, 2), isChildrenCollapsed = _useState2[0], setIsChildrenCollapsed = _useState2[1]; @@ -91,7 +83,7 @@ var ChartNode = function ChartNode(_ref) { rightEdgeExpanded = _useState6[0], setRightEdgeExpanded = _useState6[1]; - var _useState7 = (0, _react.useState)(datasource.defaultExpanded), + var _useState7 = (0, _react.useState)(), _useState8 = _slicedToArray(_useState7, 2), bottomEdgeExpanded = _useState8[0], setBottomEdgeExpanded = _useState8[1]; @@ -200,56 +192,12 @@ var ChartNode = function ChartNode(_ref) { toggleAncestors(e.target.closest("li")); }; - var addChildrenHandler = function addChildrenHandler(children) { - onLoadData(datasource, children); - setIsChildrenCollapsed(false); - setBottomEdgeExpanded(true); + var bottomEdgeClickHandler = function bottomEdgeClickHandler(e) { + e.stopPropagation(); + setIsChildrenCollapsed(!isChildrenCollapsed); + setBottomEdgeExpanded(!bottomEdgeExpanded); }; - var bottomEdgeClickHandler = - /*#__PURE__*/ - function () { - var _ref2 = _asyncToGenerator( - /*#__PURE__*/ - regeneratorRuntime.mark(function _callee(e) { - var children; - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - e.stopPropagation(); - - if (!(loadData && !!!datasource.children)) { - _context.next = 8; - break; - } - - _context.next = 4; - return loadData(datasource); - - case 4: - children = _context.sent; - addChildrenHandler(children); - _context.next = 10; - break; - - case 8: - setIsChildrenCollapsed(!isChildrenCollapsed); - setBottomEdgeExpanded(!bottomEdgeExpanded); - - case 10: - case "end": - return _context.stop(); - } - } - }, _callee); - })); - - return function bottomEdgeClickHandler(_x) { - return _ref2.apply(this, arguments); - }; - }(); - var toggleSiblings = function toggleSiblings(actionNode) { var node = actionNode.previousSibling; var isSiblingsCollapsed = Array.from(actionNode.parentNode.children).some(function (item) { @@ -335,11 +283,6 @@ var ChartNode = function ChartNode(_ref) { changeHierarchy(JSON.parse(event.dataTransfer.getData("text/plain")), event.currentTarget.id); }; - var setCollapse = function setCollapse(collapse) { - setIsChildrenCollapsed(collapse); - setBottomEdgeExpanded(!collapse); - }; - return _react.default.createElement("li", { className: "oc-hierarchy" }, _react.default.createElement("div", { @@ -355,9 +298,7 @@ var ChartNode = function ChartNode(_ref) { onMouseEnter: addArrows, onMouseLeave: removeArrows }, NodeTemplate ? _react.default.createElement(NodeTemplate, { - nodeData: datasource, - setCollapse: setCollapse, - addChildren: addChildrenHandler + nodeData: datasource }) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", { className: "oc-heading" }, datasource.relationship && datasource.relationship.charAt(2) === "1" && _react.default.createElement("i", { @@ -368,13 +309,13 @@ var ChartNode = function ChartNode(_ref) { className: "oc-edge verticalEdge topEdge oci ".concat(topEdgeExpanded === undefined ? "" : topEdgeExpanded ? "oci-chevron-down" : "oci-chevron-up"), onClick: topEdgeClickHandler }), collapsible && datasource.relationship && datasource.relationship.charAt(1) === "1" && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("i", { - className: "oc-edge horizontalEdge rightEdge oci\n ".concat(rightEdgeExpanded === undefined ? "" : rightEdgeExpanded ? "oci-chevron-left" : "oci-chevron-right"), + className: "oc-edge horizontalEdge rightEdge oci ".concat(rightEdgeExpanded === undefined ? "" : rightEdgeExpanded ? "oci-chevron-left" : "oci-chevron-right"), onClick: hEdgeClickHandler }), _react.default.createElement("i", { - className: "oc-edge horizontalEdge leftEdge oci\n ".concat(leftEdgeExpanded === undefined ? "" : leftEdgeExpanded ? "oci-chevron-right" : "oci-chevron-left"), + className: "oc-edge horizontalEdge leftEdge oci ".concat(leftEdgeExpanded === undefined ? "" : leftEdgeExpanded ? "oci-chevron-right" : "oci-chevron-left"), onClick: hEdgeClickHandler })), collapsible && datasource.relationship && datasource.relationship.charAt(2) === "1" && _react.default.createElement("i", { - className: "oc-edge verticalEdge bottomEdge oci\n ".concat(bottomEdgeExpanded === undefined ? "" : bottomEdgeExpanded ? "oci-chevron-up" : "oci-chevron-down"), + className: "oc-edge verticalEdge bottomEdge oci ".concat(bottomEdgeExpanded === undefined ? "" : bottomEdgeExpanded ? "oci-chevron-up" : "oci-chevron-down"), onClick: bottomEdgeClickHandler })), datasource.children && datasource.children.length > 0 && _react.default.createElement("ul", { className: isChildrenCollapsed ? "hidden" : "" @@ -388,9 +329,7 @@ var ChartNode = function ChartNode(_ref) { collapsible: collapsible, multipleSelect: multipleSelect, changeHierarchy: changeHierarchy, - onClickNode: onClickNode, - loadData: loadData, - onLoadData: onLoadData + onClickNode: onClickNode }); }))); }; diff --git a/dist/service.js b/dist/service.js deleted file mode 100644 index 1f3c98d..0000000 --- a/dist/service.js +++ /dev/null @@ -1,39 +0,0 @@ -"use strict"; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.selectNodeService = exports.dragNodeService = void 0; - -var _rxjs = require("rxjs"); - -var subject1 = new _rxjs.Subject(); -var subject2 = new _rxjs.Subject(); -var dragNodeService = { - sendDragInfo: function sendDragInfo(id) { - return subject1.next({ - draggedNodeId: id - }); - }, - clearDragInfo: function clearDragInfo() { - return subject1.next(); - }, - getDragInfo: function getDragInfo() { - return subject1.asObservable(); - } -}; -exports.dragNodeService = dragNodeService; -var selectNodeService = { - sendSelectedNodeInfo: function sendSelectedNodeInfo(id) { - return subject2.next({ - selectedNodeId: id - }); - }, - clearSelectedNodeInfo: function clearSelectedNodeInfo() { - return subject2.next(); - }, - getSelectedNodeInfo: function getSelectedNodeInfo() { - return subject2.asObservable(); - } -}; -exports.selectNodeService = selectNodeService; \ No newline at end of file From 78e0037d21fe32c0902961a15ec8d48f18e1b283 Mon Sep 17 00:00:00 2001 From: armin Date: Fri, 16 Oct 2020 07:41:41 +0330 Subject: [PATCH 11/13] REFACTOR: fix none git files changes --- dist/ChartContainer.css | 42 +--- dist/ChartContainer.js | 524 ++++++++++++++-------------------------- dist/ChartNode.css | 364 +--------------------------- dist/ChartNode.js | 357 ++++----------------------- package-lock.json | 4 +- 5 files changed, 237 insertions(+), 1054 deletions(-) diff --git a/dist/ChartContainer.css b/dist/ChartContainer.css index 5c19de7..bd43bd4 100644 --- a/dist/ChartContainer.css +++ b/dist/ChartContainer.css @@ -1,10 +1,8 @@ -/* global styles for orgchart */ .orgchart-container { box-sizing: border-box; position: relative; margin: 10px; height: 700px; - background-color: #fff; border: 2px dashed #aaa; border-radius: 5px; overflow: auto; @@ -14,39 +12,13 @@ .orgchart { box-sizing: border-box; display: inline-block; - background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%); + background-image: linear-gradient( + 90deg, + rgba(200, 0, 0, 0.15) 10%, + rgba(0, 0, 0, 0) 10% + ), + linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%); background-size: 10px 10px; - border: 1px dashed rgba(0,0,0,0); + border: 1px dashed rgba(0, 0, 0, 0); padding: 20px 20px 0 20px; } - -.orgchart-container .hidden { - display: none!important; -} - -.orgchart-container > .oc-mask { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 999; - text-align: center; - background-color: rgba(0,0,0,0.3); -} - -.orgchart-container > .oc-mask .spinner { - position: absolute; - top: calc(50% - 50px); - left: calc(50% - 50px); -} - -.orgchart-container > .oc-mask .spinner::before { - width: 100px; - height: 100px; - border-width: 10px; - border-radius: 50px; - border-top-color: rgba(68, 157, 68, 0.8); - border-bottom-color: rgba(68, 157, 68, 0.8); - border-left-color: rgba(68, 157, 68, 0.8); -} diff --git a/dist/ChartContainer.js b/dist/ChartContainer.js index 40c4ae1..3251e91 100644 --- a/dist/ChartContainer.js +++ b/dist/ChartContainer.js @@ -1,51 +1,39 @@ "use strict"; -function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; -var _react = _interopRequireWildcard(require("react")); +var _react = _interopRequireDefault(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); -var _service = require("./service"); - -var _jsonDigger = _interopRequireDefault(require("json-digger")); - -var _html2canvas = _interopRequireDefault(require("html2canvas")); - -var _jspdf = _interopRequireDefault(require("jspdf")); - var _ChartNode = _interopRequireDefault(require("./ChartNode")); require("./ChartContainer.css"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } - -function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } -function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } -function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } -function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } -function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } -function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } -function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } var propTypes = { datasource: _propTypes.default.object.isRequired, @@ -55,12 +43,7 @@ var propTypes = { zoominLimit: _propTypes.default.number, containerClass: _propTypes.default.string, chartClass: _propTypes.default.string, - NodeTemplate: _propTypes.default.elementType, - draggable: _propTypes.default.bool, - collapsible: _propTypes.default.bool, - multipleSelect: _propTypes.default.bool, - onClickNode: _propTypes.default.func, - onClickChart: _propTypes.default.func + nodeTemplate: _propTypes.default.elementType }; var defaultProps = { pan: false, @@ -68,351 +51,198 @@ var defaultProps = { zoomoutLimit: 0.5, zoominLimit: 7, containerClass: "", - chartClass: "", - draggable: false, - collapsible: true, - multipleSelect: false + chartClass: "" }; -var ChartContainer = (0, _react.forwardRef)(function (_ref, ref) { - var datasource = _ref.datasource, - pan = _ref.pan, - zoom = _ref.zoom, - zoomoutLimit = _ref.zoomoutLimit, - zoominLimit = _ref.zoominLimit, - containerClass = _ref.containerClass, - chartClass = _ref.chartClass, - NodeTemplate = _ref.NodeTemplate, - draggable = _ref.draggable, - collapsible = _ref.collapsible, - multipleSelect = _ref.multipleSelect, - onClickNode = _ref.onClickNode, - onClickChart = _ref.onClickChart; - var container = (0, _react.useRef)(); - var chart = (0, _react.useRef)(); - var downloadButton = (0, _react.useRef)(); - - var _useState = (0, _react.useState)(0), - _useState2 = _slicedToArray(_useState, 2), - startX = _useState2[0], - setStartX = _useState2[1]; - - var _useState3 = (0, _react.useState)(0), - _useState4 = _slicedToArray(_useState3, 2), - startY = _useState4[0], - setStartY = _useState4[1]; - - var _useState5 = (0, _react.useState)(""), - _useState6 = _slicedToArray(_useState5, 2), - transform = _useState6[0], - setTransform = _useState6[1]; - - var _useState7 = (0, _react.useState)(false), - _useState8 = _slicedToArray(_useState7, 2), - panning = _useState8[0], - setPanning = _useState8[1]; - - var _useState9 = (0, _react.useState)("default"), - _useState10 = _slicedToArray(_useState9, 2), - cursor = _useState10[0], - setCursor = _useState10[1]; - - var _useState11 = (0, _react.useState)(false), - _useState12 = _slicedToArray(_useState11, 2), - exporting = _useState12[0], - setExporting = _useState12[1]; - - var _useState13 = (0, _react.useState)(""), - _useState14 = _slicedToArray(_useState13, 2), - dataURL = _useState14[0], - setDataURL = _useState14[1]; - - var _useState15 = (0, _react.useState)(""), - _useState16 = _slicedToArray(_useState15, 2), - download = _useState16[0], - setDownload = _useState16[1]; - - var attachRel = function attachRel(data, flags) { - data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0); - - if (data.children) { - data.children.forEach(function (item) { - attachRel(item, "1" + (data.children.length > 1 ? 1 : 0)); - }); - } - return data; - }; +var ChartContainer = +/*#__PURE__*/ +function (_React$Component) { + _inherits(ChartContainer, _React$Component); - var _useState17 = (0, _react.useState)(datasource), - _useState18 = _slicedToArray(_useState17, 2), - ds = _useState18[0], - setDS = _useState18[1]; + function ChartContainer() { + var _this; - (0, _react.useEffect)(function () { - setDS(datasource); - }, [datasource]); - var dsDigger = new _jsonDigger.default(datasource, "id", "children"); + _classCallCheck(this, ChartContainer); - var clickChartHandler = function clickChartHandler(event) { - if (!event.target.closest(".oc-node")) { - if (onClickChart) { - onClickChart(); - } + _this = _possibleConstructorReturn(this, _getPrototypeOf(ChartContainer).call(this)); - _service.selectNodeService.clearSelectedNodeInfo(); + _defineProperty(_assertThisInitialized(_this), "startX", 0); + + _defineProperty(_assertThisInitialized(_this), "startY", 0); + + _this.state = { + transform: "", + panning: false, + cursor: "default" + }; + return _this; + } + + _createClass(ChartContainer, [{ + key: "render", + value: function render() { + var _this$props = this.props, + datasource = _this$props.datasource, + containerClass = _this$props.containerClass, + chartClass = _this$props.chartClass; + return _react.default.createElement("div", { + className: "orgchart-container " + containerClass, + onWheel: this.props.zoom ? this.zoomHandler.bind(this) : undefined, + onMouseUp: this.props.pan && this.state.panning ? this.panEndHandler.bind(this) : undefined + }, _react.default.createElement("div", { + className: "orgchart " + chartClass, + style: { + transform: this.state.transform, + cursor: this.state.cursor + }, + onMouseDown: this.props.pan ? this.panStartHandler.bind(this) : undefined, + onMouseMove: this.props.pan && this.state.panning ? this.panHandler.bind(this) : undefined + }, _react.default.createElement("ul", null, _react.default.createElement(_ChartNode.default, { + datasource: datasource, + nodeTemplate: this.props.nodeTemplate + })))); } - }; - - var panEndHandler = function panEndHandler() { - setPanning(false); - setCursor("default"); - }; - - var panHandler = function panHandler(e) { - var newX = 0; - var newY = 0; - - if (!e.targetTouches) { - // pand on desktop - newX = e.pageX - startX; - newY = e.pageY - startY; - } else if (e.targetTouches.length === 1) { - // pan on mobile device - newX = e.targetTouches[0].pageX - startX; - newY = e.targetTouches[0].pageY - startY; - } else if (e.targetTouches.length > 1) { - return; + }, { + key: "panEndHandler", + value: function panEndHandler() { + this.setState({ + panning: false, + cursor: "default" + }); } - - if (transform === "") { - if (transform.indexOf("3d") === -1) { - setTransform("matrix(1,0,0,1," + newX + "," + newY + ")"); - } else { - setTransform("matrix3d(1,0,0,0,0,1,0,0,0,0,1,0," + newX + ", " + newY + ",0,1)"); + }, { + key: "panHandler", + value: function panHandler(e) { + var newX = 0; + var newY = 0; + + if (!e.targetTouches) { + // pand on desktop + newX = e.pageX - this.startX; + newY = e.pageY - this.startY; + } else if (e.targetTouches.length === 1) { + // pan on mobile device + newX = e.targetTouches[0].pageX - this.startX; + newY = e.targetTouches[0].pageY - this.startY; + } else if (e.targetTouches.length > 1) { + return; } - } else { - var matrix = transform.split(","); - if (transform.indexOf("3d") === -1) { - matrix[4] = newX; - matrix[5] = newY + ")"; + if (this.state.transform === "") { + if (this.state.transform.indexOf("3d") === -1) { + this.setState({ + transform: "matrix(1,0,0,1," + newX + "," + newY + ")" + }); + } else { + this.setState({ + transform: "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0," + newX + ", " + newY + ",0,1)" + }); + } } else { - matrix[12] = newX; - matrix[13] = newY; - } + var matrix = this.state.transform.split(","); + + if (this.state.transform.indexOf("3d") === -1) { + matrix[4] = newX; + matrix[5] = newY + ")"; + } else { + matrix[12] = newX; + matrix[13] = newY; + } - setTransform(matrix.join(",")); - } - }; - - var panStartHandler = function panStartHandler(e) { - if (e.target.closest(".oc-node")) { - setPanning(false); - return; - } else { - setPanning(true); - setCursor("move"); + this.setState({ + transform: matrix.join(",") + }); + } } - - var lastX = 0; - var lastY = 0; - - if (transform !== "") { - var matrix = transform.split(","); - - if (transform.indexOf("3d") === -1) { - lastX = parseInt(matrix[4]); - lastY = parseInt(matrix[5]); + }, { + key: "panStartHandler", + value: function panStartHandler(e) { + if (e.target.closest(".oc-node")) { + this.setState({ + panning: false + }); + return; } else { - lastX = parseInt(matrix[12]); - lastY = parseInt(matrix[13]); + this.setState({ + panning: true, + cursor: "move" + }); } - } - - if (!e.targetTouches) { - // pand on desktop - setStartX(e.pageX - lastX); - setStartY(e.pageY - lastY); - } else if (e.targetTouches.length === 1) { - // pan on mobile device - setStartX(e.targetTouches[0].pageX - lastX); - setStartY(e.targetTouches[0].pageY - lastY); - } else if (e.targetTouches.length > 1) { - return; - } - }; - var updateChartScale = function updateChartScale(newScale) { - var matrix = []; - var targetScale = 1; + var lastX = 0; + var lastY = 0; - if (transform === "") { - setTransform("matrix(" + newScale + ", 0, 0, " + newScale + ", 0, 0)"); - } else { - matrix = transform.split(","); + if (this.state.transform !== "") { + var matrix = this.state.transform.split(","); - if (transform.indexOf("3d") === -1) { - targetScale = Math.abs(window.parseFloat(matrix[3]) * newScale); - - if (targetScale > zoomoutLimit && targetScale < zoominLimit) { - matrix[0] = "matrix(" + targetScale; - matrix[3] = targetScale; - setTransform(matrix.join(",")); + if (this.state.transform.indexOf("3d") === -1) { + lastX = parseInt(matrix[4]); + lastY = parseInt(matrix[5]); + } else { + lastX = parseInt(matrix[12]); + lastY = parseInt(matrix[13]); } + } + + if (!e.targetTouches) { + // pand on desktop + this.startX = e.pageX - lastX; + this.startY = e.pageY - lastY; + } else if (e.targetTouches.length === 1) { + // pan on mobile device + this.startX = e.targetTouches[0].pageX - lastX; + this.startY = e.targetTouches[0].pageY - lastY; + } else if (e.targetTouches.length > 1) { + return; + } + } + }, { + key: "setChartScale", + value: function setChartScale(newScale) { + var matrix = []; + var targetScale = 1; + + if (this.state.transform === "") { + this.setState({ + transform: "matrix(" + newScale + ", 0, 0, " + newScale + ", 0, 0)" + }); } else { - targetScale = Math.abs(window.parseFloat(matrix[5]) * newScale); + matrix = this.state.transform.split(","); - if (targetScale > zoomoutLimit && targetScale < zoominLimit) { - matrix[0] = "matrix3d(" + targetScale; - matrix[5] = targetScale; - setTransform(matrix.join(",")); + if (this.state.transform.indexOf("3d") === -1) { + targetScale = Math.abs(window.parseFloat(matrix[3]) * newScale); + + if (targetScale > this.props.zoomoutLimit && targetScale < this.props.zoominLimit) { + matrix[0] = "matrix(" + targetScale; + matrix[3] = targetScale; + this.setState({ + transform: matrix.join(",") + }); + } + } else { + targetScale = Math.abs(window.parseFloat(matrix[5]) * newScale); + + if (targetScale > this.props.zoomoutLimit && targetScale < this.props.zoominLimit) { + matrix[0] = "matrix3d(" + targetScale; + matrix[5] = targetScale; + this.setState({ + transform: matrix.join(",") + }); + } } } } - }; - - var zoomHandler = function zoomHandler(e) { - var newScale = 1 + (e.deltaY > 0 ? -0.2 : 0.2); - updateChartScale(newScale); - }; - - var exportPDF = function exportPDF(canvas, exportFilename) { - var canvasWidth = Math.floor(canvas.width); - var canvasHeight = Math.floor(canvas.height); - var doc = canvasWidth > canvasHeight ? new _jspdf.default({ - orientation: "landscape", - unit: "px", - format: [canvasWidth, canvasHeight] - }) : new _jspdf.default({ - orientation: "portrait", - unit: "px", - format: [canvasHeight, canvasWidth] - }); - doc.addImage(canvas.toDataURL("image/jpeg", 1.0), "JPEG", 0, 0); - doc.save(exportFilename + ".pdf"); - }; - - var exportPNG = function exportPNG(canvas, exportFilename) { - var isWebkit = "WebkitAppearance" in document.documentElement.style; - var isFf = !!window.sidebar; - var isEdge = navigator.appName === "Microsoft Internet Explorer" || navigator.appName === "Netscape" && navigator.appVersion.indexOf("Edge") > -1; - - if (!isWebkit && !isFf || isEdge) { - window.navigator.msSaveBlob(canvas.msToBlob(), exportFilename + ".png"); - } else { - setDataURL(canvas.toDataURL()); - setDownload(exportFilename + ".png"); - downloadButton.current.click(); + }, { + key: "zoomHandler", + value: function zoomHandler(e) { + var newScale = 1 + (e.deltaY > 0 ? -0.2 : 0.2); + this.setChartScale(newScale); } - }; - - var changeHierarchy = - /*#__PURE__*/ - function () { - var _ref2 = _asyncToGenerator( - /*#__PURE__*/ - regeneratorRuntime.mark(function _callee(draggedItemData, dropTargetId) { - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - _context.next = 2; - return dsDigger.removeNode(draggedItemData.id); - - case 2: - _context.next = 4; - return dsDigger.addChildren(dropTargetId, draggedItemData); - - case 4: - setDS(_objectSpread({}, dsDigger.ds)); - - case 5: - case "end": - return _context.stop(); - } - } - }, _callee); - })); + }]); - return function changeHierarchy(_x, _x2) { - return _ref2.apply(this, arguments); - }; - }(); - - (0, _react.useImperativeHandle)(ref, function () { - return { - exportTo: function exportTo(exportFilename, exportFileextension) { - exportFilename = exportFilename || "OrgChart"; - exportFileextension = exportFileextension || "png"; - setExporting(true); - var originalScrollLeft = container.current.scrollLeft; - container.current.scrollLeft = 0; - var originalScrollTop = container.current.scrollTop; - container.current.scrollTop = 0; - (0, _html2canvas.default)(chart.current, { - width: chart.current.clientWidth, - height: chart.current.clientHeight, - onclone: function onclone(clonedDoc) { - clonedDoc.querySelector(".orgchart").style.background = "none"; - clonedDoc.querySelector(".orgchart").style.transform = ""; - } - }).then(function (canvas) { - if (exportFileextension.toLowerCase() === "pdf") { - exportPDF(canvas, exportFilename); - } else { - exportPNG(canvas, exportFilename); - } + return ChartContainer; +}(_react.default.Component); - setExporting(false); - container.current.scrollLeft = originalScrollLeft; - container.current.scrollTop = originalScrollTop; - }, function () { - setExporting(false); - container.current.scrollLeft = originalScrollLeft; - container.current.scrollTop = originalScrollTop; - }); - }, - expandAllNodes: function expandAllNodes() { - chart.current.querySelectorAll(".oc-node.hidden, .oc-hierarchy.hidden, .isSiblingsCollapsed, .isAncestorsCollapsed").forEach(function (el) { - el.classList.remove("hidden", "isSiblingsCollapsed", "isAncestorsCollapsed"); - }); - } - }; - }); - return _react.default.createElement("div", { - ref: container, - className: "orgchart-container " + containerClass, - onWheel: zoom ? zoomHandler : undefined, - onMouseUp: pan && panning ? panEndHandler : undefined - }, _react.default.createElement("div", { - ref: chart, - className: "orgchart " + chartClass, - style: { - transform: transform, - cursor: cursor - }, - onClick: clickChartHandler, - onMouseDown: pan ? panStartHandler : undefined, - onMouseMove: pan && panning ? panHandler : undefined - }, _react.default.createElement("ul", null, _react.default.createElement(_ChartNode.default, { - datasource: attachRel(ds, "00"), - NodeTemplate: NodeTemplate, - draggable: draggable, - collapsible: collapsible, - multipleSelect: multipleSelect, - changeHierarchy: changeHierarchy, - onClickNode: onClickNode - }))), _react.default.createElement("a", { - className: "oc-download-btn hidden", - ref: downloadButton, - href: dataURL, - download: download - }, "\xA0"), _react.default.createElement("div", { - className: "oc-mask ".concat(exporting ? "" : "hidden") - }, _react.default.createElement("i", { - className: "oci oci-spinner spinner" - }))); -}); ChartContainer.propTypes = propTypes; ChartContainer.defaultProps = defaultProps; var _default = ChartContainer; diff --git a/dist/ChartNode.css b/dist/ChartNode.css index 470fac8..572374b 100644 --- a/dist/ChartNode.css +++ b/dist/ChartNode.css @@ -1,17 +1,13 @@ - .orgchart ul { padding-left: 0; text-align: center; display: flex; margin: 0; - transition: transform 0.3s, opacity 0.3s; } - .orgchart ul li { display: inline-block; position: relative; } - /* excluding root node */ .orgchart > ul > li > ul li::before { content: ""; @@ -23,19 +19,13 @@ box-sizing: border-box; } -.orgchart > ul > li > ul li.isSiblingsCollapsed::before { - content: none; -} - .orgchart > ul > li > ul li:first-child::before { left: calc(50% - 1px); width: calc(50% + 1px); } - .orgchart > ul > li > ul li:last-child::before { width: calc(50% + 1px); } - .orgchart > ul > li > ul li:only-child::before { width: 2px; } @@ -44,23 +34,14 @@ display: inline-block; position: relative; padding: 3px; - border: 2px dashed transparent; + border: 2px solid transparent; margin-bottom: 20px; } -.orgchart ul li .oc-node.allowedDrop { - border-color: rgba(68, 157, 68, 0.9); -} -.orgchart ul li .oc-node.currentDropTarget { - background-color: rgba(68, 157, 68, 0.9); -} -.orgchart ul li .oc-node.selected { - background-color: rgba(238, 217, 54, 0.5); -} .orgchart ul li .oc-node:hover { background-color: rgba(238, 217, 54, 0.5); } /* excluding root node */ -.orgchart > ul > li > ul li > .oc-node::before { +.orgchart > ul > li > ul li .oc-node::before { content: ""; position: absolute; top: -11px; @@ -69,16 +50,6 @@ height: 9px; background-color: rgba(217, 83, 79, 0.8); } - -.orgchart > ul > li > ul li.isSiblingsCollapsed > .oc-node::before { - top: -13px; - height: 11px; -} - -.orgchart > ul > li > ul li.isAncestorsCollapsed > .oc-node::before { - content: none; -} - /* excluding leaf node */ .orgchart ul li .oc-node:not(:only-child)::after { content: ""; @@ -89,11 +60,6 @@ height: 9px; background-color: rgba(217, 83, 79, 0.8); } - -.orgchart ul li .oc-node.isChildrenCollapsed:not(:only-child)::after { - content: none; -} - .orgchart ul li .oc-node .oc-heading { box-sizing: border-box; padding: 2px; @@ -110,22 +76,6 @@ color: #fff; border-radius: 4px 4px 0 0; } - -.orgchart ul li .oc-node .oc-heading .oc-symbol { - float: left; - margin-top: 12px; - margin-left: 2px; -} - -.orgchart ul li .oc-node .oc-heading .oc-symbol::before { - background-color: #fff; - border-color: rgba(217, 83, 79, 0.8); -} - -.orgchart ul li .oc-node .oc-heading .oc-symbol::after { - background-color: #fff; -} - .orgchart ul li .oc-node .oc-content { box-sizing: border-box; padding: 2px; @@ -140,313 +90,3 @@ text-overflow: ellipsis; white-space: nowrap; } - -/* styles for edges */ -.orgchart .oc-node .oc-edge { - position: absolute; - cursor: default; - transition: .2s; -} - -.orgchart .oc-node .oc-edge::before { - border-color: rgba(68, 157, 68, 0.5); -} - -.orgchart.noncollapsable .oc-node .oc-edge { - display: none; -} - -.orgchart .oc-node .oc-edge:hover { - cursor: pointer; -} - -.orgchart .oc-edge:hover::before { - border-color: #449d44; -} - -.orgchart .oc-node .verticalEdge { - width: calc(100% - 6px); - width: -webkit-calc(100% - 6px); - width: -moz-calc(100% - 6px); - height: 10px; - left: 3px; -} - -.orgchart .oc-node .verticalEdge::before { - position: absolute; - left: calc(50% - 0.3125rem); -} - -.orgchart .oc-node .topEdge { - top: -2px; -} - -.orgchart .oc-node .topEdge.oci-chevron-up::before { - top: 2px; -} - -.orgchart .oc-node .topEdge.oci-chevron-down::before { - bottom: 3px; -} - -.orgchart .oc-node .bottomEdge { - bottom: -2px; -} - -.orgchart .oc-node .bottomEdge.oci-chevron-up::before { - bottom: -3px; -} - -.orgchart .oc-node .bottomEdge.oci-chevron-down::before { - bottom: 1px; -} - -.orgchart .oc-node .horizontalEdge { - width: 10px; - height: calc(100% - 6px); - height: -webkit-calc(100% - 6px); - height: -moz-calc(100% - 6px); - top: 3px; -} - -.orgchart .oc-node .rightEdge { - right: -2px; -} - -.orgchart .oc-node .leftEdge { - left: -2px; -} - -.orgchart .oc-node .horizontalEdge::before { - position: absolute; - top: calc(50% - 0.3125rem); -} - -.orgchart .oc-node .rightEdge.oci-chevron-left::before { - right: -3px; -} - -.orgchart .oc-node .rightEdge.oci-chevron-right::before { - right: 1px; -} - -.orgchart .oc-node .leftEdge.oci-chevron-right::before { - left: -3px; -} - -.orgchart .oc-node .leftEdge.oci-chevron-left::before { - left: 1px; -} - -/* slide animations */ -.orgchart .slide-up { - opacity: 0; - transform: translateY(-40px); -} - -.orgchart .slide-down { - opacity: 0; - transform: translateY(40px); -} - -.orgchart .slide-left { - opacity: 0; - transform: translateX(-130px); -} - -.orgchart .slide-right { - opacity: 0; - transform: translateX(130px); -} - -/* oci means organization chart icons */ -.oci { - display: inline-block; - position: relative; - font-style: normal; - font-family: Arial; -} - -.oci-chevron-up::before { - content: ""; - display: inline-block; - box-sizing: border-box; - vertical-align: text-bottom; - width: 0.625rem; - height: 0.625rem; - border-width: 0 0.2rem 0.2rem 0; - border-style: solid; - border-color: #000; - background: transparent; - transform: rotate(-135deg); -} - -.oci-chevron-right::before { - content: ""; - display: inline-block; - box-sizing: border-box; - width: 0.625rem; - height: 0.625rem; - border-width: 0 0.2rem 0.2rem 0; - border-style: solid; - border-color: #000; - background: transparent; - transform: rotate(-45deg); -} - -.oci-chevron-down::before { - content: ""; - display: inline-block; - box-sizing: border-box; - width: 0.625rem; - height: 0.625rem; - border-width: 0 0.2rem 0.2rem 0; - border-style: solid; - border-color: #000; - background: transparent; - transform: rotate(45deg); -} - -.oci-chevron-left::before { - content: ""; - display: inline-block; - box-sizing: border-box; - width: 0.625rem; - height: 0.625rem; - border-width: 0 0.2rem 0.2rem 0; - border-style: solid; - border-color: #000; - background: transparent; - transform: rotate(135deg); -} - -.oci-leader::before { - position: absolute; - content: ""; - display: inline-block; - width: 0.4rem; - height: 0.4rem; - border-radius: 0.2rem; - background: #000; - top: -0.75rem; - left: 0.125rem; -} - -.oci-leader::after { - position: absolute; - content: ""; - display: inline-block; - width: 0.875rem; - height: 0.375rem; - border-radius: 0.25rem 0.25rem 0 0; - background: #000; - top: -0.3rem; - left: -0.125rem; -} - -.oci-plus-square::before { - content: "+"; - display: inline-block; - vertical-align: text-bottom; - text-align: center; - width: 1rem; - height: 1rem; - background-color: #000; - color: #fff; -} - -.oci-plus-circle::before { - content: "+"; - display: inline-block; - vertical-align: text-bottom; - text-align: center; - width: 1rem; - height: 1rem; - border-radius: 0.5rem; - background-color: #000; - color: #fff; -} - -.oci-minus-square::before { - content: "−"; - display: inline-block; - vertical-align: text-bottom; - text-align: center; - width: 1rem; - height: 1rem; - background-color: #000; - color: #fff; -} - -.oci-minus-circle::before { - content: "−"; - display: inline-block; - vertical-align: text-bottom; - text-align: center; - width: 1rem; - height: 1rem; - border-radius: 0.5rem; - background-color: #000; - color: #fff; -} - -.oci-arrow-circle-up::before { - content: "▲"; - display: inline-block; - text-align: center; - vertical-align: text-bottom; - width: 1rem; - height: 1rem; - border-radius: 0.5rem; - background-color: #000; - color: #fff; - font-size: 0.875rem; -} - -.oci-arrow-circle-down::before { - content: "▼"; - text-align: center; - display: inline-block; - vertical-align: text-bottom; - width: 1rem; - height: 1rem; - border-radius: 0.5rem; - background-color: #000; - color: #fff; - font-size: 0.875rem; -} - -.oci-info-circle::before { - content: "i"; - display: inline-block; - vertical-align: text-bottom; - width: 1rem; - height: 1rem; - border-radius: 0.5rem; - background-color: #000; - color: #fff; - text-align: center; - font-weight: bold; -} - -.oci-spinner::before { - content: ""; - vertical-align: text-bottom; - display: inline-block; - box-sizing: border-box; - width: 1rem; - height: 1rem; - border: 0.1rem solid #000; - border-right-color: transparent; - border-radius: 0.625rem; - animation: oci-infinite-spinning .75s linear infinite; -} - -@keyframes oci-infinite-spinning { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/dist/ChartNode.js b/dist/ChartNode.js index bd4fdac..d9c7ec3 100644 --- a/dist/ChartNode.js +++ b/dist/ChartNode.js @@ -1,340 +1,81 @@ "use strict"; -function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; -var _react = _interopRequireWildcard(require("react")); +var _react = _interopRequireDefault(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); -var _service = require("./service"); - require("./ChartNode.css"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } - -function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } - -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } -function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } -function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } -function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } -function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } -function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } -function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } -function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } var propTypes = { - datasource: _propTypes.default.object, - NodeTemplate: _propTypes.default.elementType, - draggable: _propTypes.default.bool, - collapsible: _propTypes.default.bool, - multipleSelect: _propTypes.default.bool, - changeHierarchy: _propTypes.default.func, - onClickNode: _propTypes.default.func -}; -var defaultProps = { - draggable: false, - collapsible: true, - multipleSelect: false + datasource: _propTypes.default.object.isRequired, + nodeTemplate: _propTypes.default.elementType }; -var ChartNode = function ChartNode(_ref) { - var datasource = _ref.datasource, - NodeTemplate = _ref.NodeTemplate, - draggable = _ref.draggable, - collapsible = _ref.collapsible, - multipleSelect = _ref.multipleSelect, - changeHierarchy = _ref.changeHierarchy, - onClickNode = _ref.onClickNode; - var node = (0, _react.useRef)(); - - var _useState = (0, _react.useState)(false), - _useState2 = _slicedToArray(_useState, 2), - isChildrenCollapsed = _useState2[0], - setIsChildrenCollapsed = _useState2[1]; - - var _useState3 = (0, _react.useState)(), - _useState4 = _slicedToArray(_useState3, 2), - topEdgeExpanded = _useState4[0], - setTopEdgeExpanded = _useState4[1]; - - var _useState5 = (0, _react.useState)(), - _useState6 = _slicedToArray(_useState5, 2), - rightEdgeExpanded = _useState6[0], - setRightEdgeExpanded = _useState6[1]; - - var _useState7 = (0, _react.useState)(), - _useState8 = _slicedToArray(_useState7, 2), - bottomEdgeExpanded = _useState8[0], - setBottomEdgeExpanded = _useState8[1]; - - var _useState9 = (0, _react.useState)(), - _useState10 = _slicedToArray(_useState9, 2), - leftEdgeExpanded = _useState10[0], - setLeftEdgeExpanded = _useState10[1]; - - var _useState11 = (0, _react.useState)(false), - _useState12 = _slicedToArray(_useState11, 2), - allowedDrop = _useState12[0], - setAllowedDrop = _useState12[1]; - - var _useState13 = (0, _react.useState)(false), - _useState14 = _slicedToArray(_useState13, 2), - selected = _useState14[0], - setSelected = _useState14[1]; - - var nodeClass = ["oc-node", isChildrenCollapsed ? "isChildrenCollapsed" : "", allowedDrop ? "allowedDrop" : "", selected ? "selected" : ""].filter(function (item) { - return item; - }).join(" "); - (0, _react.useEffect)(function () { - var subs1 = _service.dragNodeService.getDragInfo().subscribe(function (draggedInfo) { - if (draggedInfo) { - setAllowedDrop(!document.querySelector("#" + draggedInfo.draggedNodeId).closest("li").querySelector("#" + node.current.id) ? true : false); - } else { - setAllowedDrop(false); - } - }); - - var subs2 = _service.selectNodeService.getSelectedNodeInfo().subscribe(function (selectedNodeInfo) { - if (selectedNodeInfo) { - if (multipleSelect) { - if (selectedNodeInfo.selectedNodeId === datasource.id) { - setSelected(true); - } - } else { - setSelected(selectedNodeInfo.selectedNodeId === datasource.id); - } - } else { - setSelected(false); - } - }); - - return function () { - subs1.unsubscribe(); - subs2.unsubscribe(); - }; - }, [multipleSelect, datasource]); - - var addArrows = function addArrows(e) { - var node = e.target.closest("li"); - var parent = node.parentNode.closest("li"); - var isAncestorsCollapsed = node && parent ? parent.firstChild.classList.contains("hidden") : undefined; - var isSiblingsCollapsed = Array.from(node.parentNode.children).some(function (item) { - return item.classList.contains("hidden"); - }); - setTopEdgeExpanded(!isAncestorsCollapsed); - setRightEdgeExpanded(!isSiblingsCollapsed); - setLeftEdgeExpanded(!isSiblingsCollapsed); - setBottomEdgeExpanded(!isChildrenCollapsed); - }; - - var removeArrows = function removeArrows() { - setTopEdgeExpanded(undefined); - setRightEdgeExpanded(undefined); - setBottomEdgeExpanded(undefined); - setLeftEdgeExpanded(undefined); - }; - - var toggleAncestors = function toggleAncestors(actionNode) { - var node = actionNode.parentNode.closest("li"); - if (!node) return; - var isAncestorsCollapsed = node.firstChild.classList.contains("hidden"); - - if (isAncestorsCollapsed) { - // 向上展开，只展开一级 - actionNode.classList.remove("isAncestorsCollapsed"); - node.firstChild.classList.remove("hidden"); - } else { - var _actionNode$classList; - - // 向下折叠，则折叠所有祖先节点以及祖先节点的兄弟节点 - var isSiblingsCollapsed = Array.from(actionNode.parentNode.children).some(function (item) { - return item.classList.contains("hidden"); - }); - - if (!isSiblingsCollapsed) { - toggleSiblings(actionNode); - } - - (_actionNode$classList = actionNode.classList).add.apply(_actionNode$classList, _toConsumableArray(("isAncestorsCollapsed" + (isSiblingsCollapsed ? "" : " isSiblingsCollapsed")).split(" "))); - - node.firstChild.classList.add("hidden"); // 如果还有展开的祖先节点，那继续折叠关闭之 - - if (node.parentNode.closest("li") && !node.parentNode.closest("li").firstChild.classList.contains("hidden")) { - toggleAncestors(node); - } +var ChartNode = +/*#__PURE__*/ +function (_React$Component) { + _inherits(ChartNode, _React$Component); + + function ChartNode() { + _classCallCheck(this, ChartNode); + + return _possibleConstructorReturn(this, _getPrototypeOf(ChartNode).apply(this, arguments)); + } + + _createClass(ChartNode, [{ + key: "render", + value: function render() { + var _this = this; + + var datasource = this.props.datasource; + return _react.default.createElement("li", null, this.props.nodeTemplate ? _react.default.createElement("div", { + className: "oc-node" + }, _react.default.createElement(this.props.nodeTemplate, { + nodeData: datasource + })) : _react.default.createElement("div", { + className: "oc-node" + }, _react.default.createElement("div", { + className: "oc-heading" + }, datasource.name), _react.default.createElement("div", { + className: "oc-content" + }, datasource.title)), datasource.children && _react.default.createElement("ul", null, datasource.children.map(function (node) { + return _react.default.createElement(ChartNode, { + datasource: node, + nodeTemplate: _this.props.nodeTemplate, + key: node.id + }); + }))); } - }; + }]); - var topEdgeClickHandler = function topEdgeClickHandler(e) { - e.stopPropagation(); - setTopEdgeExpanded(!topEdgeExpanded); - toggleAncestors(e.target.closest("li")); - }; - - var bottomEdgeClickHandler = function bottomEdgeClickHandler(e) { - e.stopPropagation(); - setIsChildrenCollapsed(!isChildrenCollapsed); - setBottomEdgeExpanded(!bottomEdgeExpanded); - }; - - var toggleSiblings = function toggleSiblings(actionNode) { - var node = actionNode.previousSibling; - var isSiblingsCollapsed = Array.from(actionNode.parentNode.children).some(function (item) { - return item.classList.contains("hidden"); - }); - actionNode.classList.toggle("isSiblingsCollapsed", !isSiblingsCollapsed); // 先处理同级的兄弟节点 - - while (node) { - if (isSiblingsCollapsed) { - node.classList.remove("hidden"); - } else { - node.classList.add("hidden"); - } - - node = node.previousSibling; - } - - node = actionNode.nextSibling; - - while (node) { - if (isSiblingsCollapsed) { - node.classList.remove("hidden"); - } else { - node.classList.add("hidden"); - } - - node = node.nextSibling; - } // 在展开兄弟节点的同时，还要展开父节点 - - - var isAncestorsCollapsed = actionNode.parentNode.closest("li").firstChild.classList.contains("hidden"); - - if (isAncestorsCollapsed) { - toggleAncestors(actionNode); - } - }; - - var hEdgeClickHandler = function hEdgeClickHandler(e) { - e.stopPropagation(); - setLeftEdgeExpanded(!leftEdgeExpanded); - setRightEdgeExpanded(!rightEdgeExpanded); - toggleSiblings(e.target.closest("li")); - }; - - var filterAllowedDropNodes = function filterAllowedDropNodes(id) { - _service.dragNodeService.sendDragInfo(id); - }; - - var clickNodeHandler = function clickNodeHandler(event) { - if (onClickNode) { - onClickNode(datasource); - } - - _service.selectNodeService.sendSelectedNodeInfo(datasource.id); - }; - - var dragstartHandler = function dragstartHandler(event) { - var copyDS = _objectSpread({}, datasource); - - delete copyDS.relationship; - event.dataTransfer.setData("text/plain", JSON.stringify(copyDS)); // highlight all potential drop targets - - filterAllowedDropNodes(node.current.id); - }; - - var dragoverHandler = function dragoverHandler(event) { - // prevent default to allow drop - event.preventDefault(); - }; - - var dragendHandler = function dragendHandler() { - // reset background of all potential drop targets - _service.dragNodeService.clearDragInfo(); - }; - - var dropHandler = function dropHandler(event) { - if (!event.currentTarget.classList.contains("allowedDrop")) { - return; - } - - _service.dragNodeService.clearDragInfo(); - - changeHierarchy(JSON.parse(event.dataTransfer.getData("text/plain")), event.currentTarget.id); - }; - - return _react.default.createElement("li", { - className: "oc-hierarchy" - }, _react.default.createElement("div", { - ref: node, - id: datasource.id, - className: nodeClass, - draggable: draggable ? "true" : undefined, - onClick: clickNodeHandler, - onDragStart: dragstartHandler, - onDragOver: dragoverHandler, - onDragEnd: dragendHandler, - onDrop: dropHandler, - onMouseEnter: addArrows, - onMouseLeave: removeArrows - }, NodeTemplate ? _react.default.createElement(NodeTemplate, { - nodeData: datasource - }) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", { - className: "oc-heading" - }, datasource.relationship && datasource.relationship.charAt(2) === "1" && _react.default.createElement("i", { - className: "oci oci-leader oc-symbol" - }), datasource.name), _react.default.createElement("div", { - className: "oc-content" - }, datasource.title)), collapsible && datasource.relationship && datasource.relationship.charAt(0) === "1" && _react.default.createElement("i", { - className: "oc-edge verticalEdge topEdge oci ".concat(topEdgeExpanded === undefined ? "" : topEdgeExpanded ? "oci-chevron-down" : "oci-chevron-up"), - onClick: topEdgeClickHandler - }), collapsible && datasource.relationship && datasource.relationship.charAt(1) === "1" && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("i", { - className: "oc-edge horizontalEdge rightEdge oci ".concat(rightEdgeExpanded === undefined ? "" : rightEdgeExpanded ? "oci-chevron-left" : "oci-chevron-right"), - onClick: hEdgeClickHandler - }), _react.default.createElement("i", { - className: "oc-edge horizontalEdge leftEdge oci ".concat(leftEdgeExpanded === undefined ? "" : leftEdgeExpanded ? "oci-chevron-right" : "oci-chevron-left"), - onClick: hEdgeClickHandler - })), collapsible && datasource.relationship && datasource.relationship.charAt(2) === "1" && _react.default.createElement("i", { - className: "oc-edge verticalEdge bottomEdge oci ".concat(bottomEdgeExpanded === undefined ? "" : bottomEdgeExpanded ? "oci-chevron-up" : "oci-chevron-down"), - onClick: bottomEdgeClickHandler - })), datasource.children && datasource.children.length > 0 && _react.default.createElement("ul", { - className: isChildrenCollapsed ? "hidden" : "" - }, datasource.children.map(function (node) { - return _react.default.createElement(ChartNode, { - datasource: node, - NodeTemplate: NodeTemplate, - id: node.id, - key: node.id, - draggable: draggable, - collapsible: collapsible, - multipleSelect: multipleSelect, - changeHierarchy: changeHierarchy, - onClickNode: onClickNode - }); - }))); -}; + return ChartNode; +}(_react.default.Component); ChartNode.propTypes = propTypes; -ChartNode.defaultProps = defaultProps; var _default = ChartNode; exports.default = _default; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 38cbae1..19e3334 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "react-orgchart-lazyload", - "version": "1.0.2", + "name": "@dabeng/react-orgchart", + "version": "0.0.8", "lockfileVersion": 1, "requires": true, "dependencies": { From 92b4071c47d5f7b307ccbabf81712404d7a4fc2e Mon Sep 17 00:00:00 2001 From: armin Date: Fri, 16 Oct 2020 07:46:19 +0330 Subject: [PATCH 12/13] REFACTOR: Convert indent to spaces --- src/components/ChartContainer.js | 2 +- src/lazyload/custom-node.js | 6 +++--- src/lazyload/lazyload-chart.js | 32 ++++++++++++++++---------------- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/components/ChartContainer.js b/src/components/ChartContainer.js index 591e153..cf2d0e8 100644 --- a/src/components/ChartContainer.js +++ b/src/components/ChartContainer.js @@ -63,7 +63,7 @@ const ChartContainer = forwardRef( ref ) => { - const container = useRef(); + const container = useRef(); const chart = useRef(); const downloadButton = useRef(); const [startX, setStartX] = useState(0); diff --git a/src/lazyload/custom-node.js b/src/lazyload/custom-node.js index 43b2ebd..57977d6 100644 --- a/src/lazyload/custom-node.js +++ b/src/lazyload/custom-node.js @@ -10,9 +10,9 @@ const MyNode = ({ nodeData, addChildren, setCollapse}) => { return (
    -
    {nodeData.title}
    -
    {nodeData.name}
    -
    +
    {nodeData.title}
    +
    {nodeData.name}
    + ); }; diff --git a/src/lazyload/lazyload-chart.js b/src/lazyload/lazyload-chart.js index 6525239..9062f67 100644 --- a/src/lazyload/lazyload-chart.js +++ b/src/lazyload/lazyload-chart.js @@ -3,27 +3,27 @@ import OrganizationChart from "../components/ChartContainer"; import MyNode from "./custom-node"; export const loadDataAsync = (node) => { - return new Promise((resolve, reject) => { - resolve([ - { id: "n2", name: "Bo Miao", title: "department manager" }, - { - id: "n3", - name: "Su Miao", - title: "department manager", - } - ]) - }) + return new Promise((resolve, reject) => { + resolve([ + { id: "n2", name: "Bo Miao", title: "department manager" }, + { + id: "n3", + name: "Su Miao", + title: "department manager", + } + ]) + }) } const lazyloadChart = () => { - const ds = { - id: "n1", - name: "Lao Lao", - title: "general manager", - }; + const ds = { + id: "n1", + name: "Lao Lao", + title: "general manager", + }; - return ; + return ; }; export default lazyloadChart; From 3511d63beadcc4938d7a2df05c3eb3a63dfda3dd Mon Sep 17 00:00:00 2001 From: armin Date: Fri, 16 Oct 2020 07:49:25 +0330 Subject: [PATCH 13/13] REFACTOR: change indentation to spaces --- src/App.js | 1 - src/lazyload/custom-node.js | 14 +++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index a3612c8..1847a18 100644 --- a/src/App.js +++ b/src/App.js @@ -36,7 +36,6 @@ const App = () => { - ); diff --git a/src/lazyload/custom-node.js b/src/lazyload/custom-node.js index 57977d6..3cb8704 100644 --- a/src/lazyload/custom-node.js +++ b/src/lazyload/custom-node.js @@ -3,17 +3,17 @@ import PropTypes from "prop-types"; import "./custom-node.css"; const propTypes = { - nodeData: PropTypes.object.isRequired, + nodeData: PropTypes.object.isRequired, }; const MyNode = ({ nodeData, addChildren, setCollapse}) => { - return ( -
    -
    {nodeData.title}
    -
    {nodeData.name}
    -
    - ); + return ( +
    +
    {nodeData.title}
    +
    {nodeData.name}
    +
    + ); }; MyNode.propTypes = propTypes;
    0.5 User can zoom the chart at different scales(0.5~7).
    loadData function