Showing preview only (580K chars total). Download the full file or copy to clipboard to get everything.
Repository: spiritree/vue-orgchart
Branch: master
Commit: c8de4152e283
Files: 63
Total size: 555.6 KB
Directory structure:
gitextract_4td3omsd/
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── build/
│ ├── rollup.config.js
│ └── webpack.config.js
├── dist/
│ ├── style.css
│ ├── vue-orgchart.common.js
│ ├── vue-orgchart.esm.js
│ └── vue-orgchart.js
├── docs/
│ ├── .nojekyll
│ ├── README.md
│ ├── _coverpage.md
│ ├── _navbar.md
│ ├── _sidebar.md
│ ├── basic.md
│ ├── drag.md
│ ├── edit.md
│ ├── exportpic.md
│ ├── index.html
│ ├── panzoom.md
│ ├── props.md
│ ├── quickstart.md
│ ├── style.css
│ └── zh-cn/
│ ├── README.md
│ ├── _navbar.md
│ ├── _sidebar.md
│ ├── basic.md
│ ├── drag.md
│ ├── edit.md
│ ├── exportpic.md
│ ├── panzoom.md
│ ├── props.md
│ └── quickstart.md
├── examples/
│ ├── Ajax.vue
│ ├── App.vue
│ ├── data/
│ │ ├── basic.js
│ │ ├── edit.js
│ │ └── index.js
│ ├── index.html
│ ├── main.js
│ └── store/
│ ├── index.js
│ └── service.js
├── package.json
├── src/
│ ├── components/
│ │ ├── VoBasic.vue
│ │ └── VoEdit.vue
│ ├── index.js
│ └── lib/
│ ├── lodash.js
│ ├── orgchart.js
│ └── utils.js
└── test/
├── index.js
├── karma.conf.js
└── load/
└── webpack/
├── basic/
│ ├── App.vue
│ ├── index.js
│ └── webpack.config.js
├── edit/
│ ├── App.vue
│ ├── index.js
│ └── webpack.config.js
└── index.html
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
["latest", {
"es2015": { "modules": false }
}],
"stage-2"
],
"plugins": [["transform-object-assign"],[
"transform-runtime",
{
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}
]]
}
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
================================================
FILE: .eslintignore
================================================
webpack.config.js
/src/lib/orgchart.js
/src/main.js
/src/index.js
/dist
/examples
/build
/docs
================================================
FILE: .eslintrc.js
================================================
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
extends: 'standard',
plugins: [
'html'
],
rules: {
'no-mixed-operators': 'off'
}
}
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
================================================
FILE: .travis.yml
================================================
sudo: false
language: node_js
node_js: stable
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2017-present, spiritree
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center">
<a href="https://spiritree.github.io/vue-orgchart">
<img src="/assets/vue-orgchart.jpg" alt="vue-orgchart logo">
</a>
</p>
<p align="center">
A Vue wrapper for OrgChart.js.
</p>
<p align="center">
<a href="https://travis-ci.org/spiritree/vue-orgchart"><img alt="Travis Status" src="https://img.shields.io/travis/spiritree/vue-orgchart/master.svg?style=flat-square"></a>
<a href="https://www.npmjs.com/package/vue-orgchart"><img alt="npm" src="https://img.shields.io/npm/v/vue-orgchart.svg?style=flat-square"></a>
</p>
## Intro
- First of all, thanks a lot for dabeng's great work -- [OrgChart.js](https://github.com/dabeng/OrgChart.js)
- If you prefer the Vue.js Wrapper for Orgchart.js,you could try [my project](https://github.com/spiritree/vue-orgchart)
## Links
- [Documentation](https://spiritree.github.io/vue-orgchart)
### Feature
- Support import and export JSON
- Supports exporting chart as a picture
- draggable Orgchart
- Editable Orgchart
...
## Install
```shell
npm install vue-orgchart -S
```
## Quick Start
> In `main.js`
`import 'vue-orgchart/dist/style.min.css'`
> In `*.vue`
```javascript
<template>
<div>
<vo-basic :data="chartData"></vo-basic>
</div>
</template>
<script>
import { VoBasic } from 'vue-orgchart'
export default {
components: { VoBasic }
created () {
this.chartData = {
name: 'JavaScript',
children: [
{ name: 'Angular' },
{
name: 'React',
children: [{ name: 'Preact' }]
},
{
name: 'Vue',
children: [{ name: 'Moon' }]
}
]
}
}
</script>
```
## Development
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8999
npm run dev
# unit test
npm run test
# build by rollup
npm run rollup
```
## License
MIT
================================================
FILE: build/rollup.config.js
================================================
const rollup = require('rollup')
const vue = require('rollup-plugin-vue')
const resolve = require('rollup-plugin-node-resolve')
const babel = require('rollup-plugin-babel')
const uglify = require('rollup-plugin-uglify')
const autoprefixer = require('autoprefixer')
const cssnano = require('cssnano')
const outputOptions = [
{
min: true,
format: 'umd',
name: 'vue-orgchart',
file: 'dist/vue-orgchart.min.js'
},
{
min: false,
format: 'umd',
name: 'vue-orgchart',
file: 'dist/vue-orgchart.js'
},
{
min: true,
format: 'cjs',
name: 'vue-orgchart',
file: 'dist/vue-orgchart.common.min.js'
},
{
min: false,
format: 'cjs',
name: 'vue-orgchart',
file: 'dist/vue-orgchart.common.js'
},
{
min: false,
format: 'es',
name: 'vue-orgchart',
file: 'dist/vue-orgchart.esm.js'
}
]
async function build(item) {
const vueSettings = item.min
? { css: 'dist/style.min.css', postcss: [autoprefixer, cssnano] }
: { css: 'dist/style.css', postcss: [autoprefixer] }
const inputOptions = {
input: 'src/index.js',
plugins: [
vue(vueSettings),
resolve({
extensions: ['.js', '.vue']
}),
babel({
exclude: 'node_modules/**',
plugins: ['external-helpers']
})
]
}
if (item.min) inputOptions.plugins.push(uglify())
const bundle = await rollup.rollup(inputOptions)
await bundle.write(item)
}
outputOptions.forEach(item => {
build(item)
.then(() => item.min
? console.log(`rollup: ${item.name}.${item.format}.min built successfully`)
: console.log(`rollup: ${item.name}.${item.format} built successfully`))
.catch(err => console.error(err))
})
================================================
FILE: build/webpack.config.js
================================================
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const opn = require('opn')
opn('http://localhost:8999')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: './examples/main.js',
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
port: '8999',
hot: true,
contentBase: path.join(__dirname, 'dist'),
stats: 'errors-only'
},
performance: {
hints: false
},
devtool: '#eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './examples/index.html',
inject: true
})
]
}
================================================
FILE: dist/style.css
================================================
#wrapper {
width: 50%;
margin: 0 auto;
}
#wrapper li {
margin-top: 20px;
}
#wrapper a {
font-size: 24px;
}
#wrapper span {
font-size: 24px;
}
#chart-container {
position: relative;
display: inline-block;
top: 10px;
left: 10px;
height: 50%;
width: calc(100% - 24px);
border-radius: 5px;
overflow: auto;
overflow-x: hidden;
text-align: center;
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
}
.orgchart {
display: inline-block;
min-height: 100%;
min-width: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-size: 10px 10px;
border: 1px dashed transparent;
}
.orgchart .hidden, .orgchart~.hidden {
display: none;
}
.orgchart div,
.orgchart div::before,
.orgchart div::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.orgchart.b2t {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.orgchart.l2r {
-webkit-transform: rotate(-90deg) rotateY(180deg);
transform: rotate(-90deg) rotateY(180deg);
}
.orgchart .verticalNodes ul {
list-style: none;
margin: 0;
padding-left: 18px;
text-align: left;
}
.orgchart .verticalNodes ul:first-child {
margin-top: 3px;
}
.orgchart .verticalNodes>td::before {
content: '';
border: 1px solid rgba(217, 83, 79, 0.8);
}
.orgchart .verticalNodes>td>ul>li:first-child::before {
top: -4px;
height: 30px;
width: calc(50% - 2px);
border-width: 2px 0 0 2px;
}
.orgchart .verticalNodes ul>li {
position: relative;
}
.orgchart .verticalNodes ul>li::before,
.orgchart .verticalNodes ul>li::after {
content: '';
position: absolute;
left: -6px;
border-color: rgba(217, 83, 79, 0.8);
border-style: solid;
border-width: 0 0 2px 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.orgchart .verticalNodes ul>li::before {
top: -4px;
height: 30px;
width: 11px;
}
.orgchart .verticalNodes ul>li::after {
top: 1px;
height: 100%;
}
.orgchart .verticalNodes ul>li:first-child::after {
top: 24px;
width: 11px;
border-width: 2px 0 0 2px;
}
.orgchart .verticalNodes ul>li:last-child::after {
border-width: 2px 0 0;
}
.orgchart.r2l {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.orgchart>.spinner {
font-size: 100px;
margin-top: 30px;
color: rgba(68, 157, 68, 0.8);
}
.orgchart table {
border-spacing: 0;
border-collapse: separate;
}
.orgchart>table:first-child{
margin: 20px auto;
}
.orgchart td {
text-align: center;
vertical-align: top;
padding: 0;
}
.orgchart tr.lines .topLine {
border-top: 2px solid #616161;
}
.orgchart tr.lines .rightLine {
border-right: 1px solid #616161;
float: none;
border-radius: 0;
}
.orgchart tr.lines .leftLine {
border-left: 1px solid #616161;
float: none;
border-radius: 0;
}
.orgchart tr.lines .downLine {
background-color: #616161;
margin: 0 auto;
height: 20px;
width: 2px;
float: none;
}
/* node styling */
.orgchart .node {
display: inline-block;
position: relative;
margin: 0;
padding: 3px;
border: 2px dashed transparent;
text-align: center;
width: 130px;
}
.orgchart.l2r .node, .orgchart.r2l .node {
width: 40px;
height: 130px;
}
.orgchart .node>.hazy {
opacity: 0.2;
}
.orgchart .node>.spinner {
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 15px);
vertical-align: middle;
font-size: 30px;
color: rgba(68, 157, 68, 0.8);
}
.orgchart .node:hover {
background-color: rgba(238, 217, 54, 0.5);
-webkit-transition: .5s;
transition: .5s;
cursor: default;
z-index: 20;
}
.orgchart .node.focused {
background-color: rgba(238, 217, 54, 0.5);
}
.orgchart .ghost-node {
position: fixed;
left: -10000px;
top: -10000px;
}
.orgchart .ghost-node rect {
fill: #ffffff;
stroke: #bf0000;
}
.orgchart .node.allowedDrop {
border-color: rgba(68, 157, 68, 0.9);
}
.orgchart .node .title {
text-align: center;
font-size: 12px;
font-weight: 300;
height: 20px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: #42b983;
color: #fff;
border-radius: 4px 4px 0 0;
}
.orgchart.b2t .node .title {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
.orgchart.l2r .node .title {
-webkit-transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
width: 120px;
}
.orgchart.r2l .node .title {
-webkit-transform: rotate(-90deg) translate(-40px, -40px);
transform: rotate(-90deg) translate(-40px, -40px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
width: 120px;
}
.orgchart .node .title .symbol {
float: left;
margin-top: 4px;
margin-left: 2px;
}
.orgchart .node .content {
width: 100%;
height: 20px;
font-size: 11px;
line-height: 18px;
border: 1px solid #42b983;
border-radius: 0 0 4px 4px;
text-align: center;
background-color: #fff;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.orgchart.b2t .node .content {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transform-origin: center top;
transform-origin: center top;
}
.orgchart.l2r .node .content {
-webkit-transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);
-webkit-transform-origin: top center;
transform-origin: top center;
width: 120px;
}
.orgchart.r2l .node .content {
-webkit-transform: rotate(-90deg) translate(-40px, -40px);
transform: rotate(-90deg) translate(-40px, -40px);
-webkit-transform-origin: top center;
transform-origin: top center;
width: 120px;
}
.orgchart .node .edge {
font-size: 15px;
position: absolute;
color: rgba(68, 157, 68, 0.5);
cursor: default;
transition: .2s;
-webkit-transition: .2s;
}
.orgchart.noncollapsable .node .edge {
display: none;
}
.orgchart .edge:hover {
color: #449d44;
cursor: pointer;
}
.orgchart .node .verticalEdge {
width: calc(100% - 10px);
width: -moz-calc(100% - 10px);
left: 5px;
}
.orgchart .node .topEdge {
top: -4px;
}
.orgchart .node .bottomEdge {
bottom: -4px;
}
.orgchart .node .horizontalEdge {
width: 15px;
height: calc(100% - 10px);
height: -moz-calc(100% - 10px);
top: 5px;
}
.orgchart .node .rightEdge {
right: -4px;
}
.orgchart .node .leftEdge {
left: -4px;
}
.orgchart .node .horizontalEdge::before {
position: absolute;
top: calc(50% - 7px);
top: -moz-calc(50% - 7px);
}
.orgchart .node .rightEdge::before {
right: 3px;
}
.orgchart .node .leftEdge::before {
left: 3px;
}
.orgchart .node .toggleBtn {
position: absolute;
left: 5px;
bottom: -2px;
color: rgba(68, 157, 68, 0.6);
}
.orgchart .node .toggleBtn:hover {
color: rgba(68, 157, 68, 0.8);
}
.oc-export-btn {
display: inline-block;
position: absolute;
right: 5px;
bottom: 5px;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fff;
background-color: #409eff;
border: 1px solid transparent;
border-color: #409eff;
border-radius: 4px;
}
.oc-export-btn:hover,.oc-export-btn:focus,.oc-export-btn:active {
background-color: #409eff;
border-color: #409eff;
}
.orgchart~.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~.mask .spinner {
position: absolute;
top: calc(50% - 54px);
left: calc(50% - 54px);
color: rgba(255,255,255,0.8);
font-size: 108px;
}
.orgchart .node {
-webkit-transition: all 0.3s;
transition: all 0.3s;
top: 0;
left: 0;
}
.orgchart .slide-down {
opacity: 0;
top: 40px;
}
.orgchart.l2r .node.slide-down, .orgchart.r2l .node.slide-down {
top: 130px;
}
.orgchart .slide-up {
opacity: 0;
top: -40px;
}
.orgchart.l2r .node.slide-up, .orgchart.r2l .node.slide-up {
top: -130px;
}
.orgchart .slide-right {
opacity: 0;
left: 130px;
}
.orgchart.l2r .node.slide-right, .orgchart.r2l .node.slide-right {
left: 40px;
}
.orgchart .slide-left {
opacity: 0;
left: -130px;
}
.orgchart.l2r .node.slide-left, .orgchart.r2l .node.slide-left {
left: -40px;
}
#edit-panel {
position: relative;
left: 10px;
width: calc(100% - 40px);
border-radius: 4px;
float: left;
margin-top: 20px;
padding: 10px 5px 10px 10px;
font-size: 14px;
line-height: 1.5;
border-radius: 2px;
color: rgba(0, 0, 0, 0.65);
background-color: #fff;
}
#edit-panel .btn-inputs {
font-size: 24px;
}
#edit-panel label {
font-weight: bold;
}
#edit-panel .new-node {
height: 24px;
-webkit-appearance: none;
background-color:#fff;
background-image: none;
border-radius: 4px;
line-height: 1;
border: 1px solid #d8dce5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #5a5e66;
display: inline-block;
-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
#edit-panel .new-node:focus {
border-color: #409eff;
outline: none;
}
#edit-panel .new-node:hover {
border-color: #b4bccc;
}
#edit-panel.edit-parent-node .selected-node-group{
display: none;
}
#chart-state-panel, #selected-node, #btn-remove-input {
margin-right: 20px;
}
#edit-panel button {
/* color: #333;
background-color: #fff; */
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
border-radius: 4px;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
}
#edit-panel.edit-parent-node button:not(#btn-add-nodes) {
display: none;
}
#edit-panel button:hover,.edit-panel button:focus,.edit-panel button:active {
border-color: #409eff;
-webkit-box-shadow: 0 0 10px #409eff;
box-shadow: 0 0 10px #409eff;
}
#new-nodelist {
display: inline-block;
list-style:none;
margin-top: -2px;
padding: 0;
vertical-align: text-top;
}
#new-nodelist>* {
padding-bottom: 4px;
}
.btn-inputs {
vertical-align: sub;
}
.btn-inputs:hover {
text-shadow: 0 0 4px #fff;
}
.radio-panel input[type='radio'] {
border: 1px solid #d8dce5;
border-radius: 100%;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
height: 14px;
width: 14px;
vertical-align: top;
}
#edit-panel.view-state .radio-panel input[type='radio']+label {
font-size: 14px;
font-weight: 500;
/* color: #5a5e66; */
line-height: 1;
}
#btn-add-nodes {
margin-left: 20px;
}
================================================
FILE: dist/vue-orgchart.common.js
================================================
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var createClass = function () {
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);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var toConsumableArray = function (arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
} else {
return Array.from(arr);
}
};
var OrgChart$1 = function () {
function OrgChart(options) {
classCallCheck(this, OrgChart);
this._name = 'OrgChart';
Promise.prototype.finally = function (callback) {
var P = this.constructor;
return this.then(function (value) {
return P.resolve(callback()).then(function () {
return value;
});
}, function (reason) {
return P.resolve(callback()).then(function () {
throw reason;
});
});
};
var that = this,
defaultOptions = {
'nodeTitle': 'name',
'nodeId': 'id',
'toggleSiblingsResp': false,
'depth': 999,
'chartClass': '',
'exportButton': false,
'exportButtonName': 'Export',
'exportFilename': 'OrgChart',
'parentNodeSymbol': '',
'draggable': false,
'direction': 't2b',
'pan': false,
'zoom': false,
'toggleCollapse': true
},
opts = _extends(defaultOptions, options),
data = opts.data,
chart = document.createElement('div'),
chartContainer = document.querySelector(opts.chartContainer);
this.options = opts;
delete this.options.data;
this.chart = chart;
this.chartContainer = chartContainer;
chart.dataset.options = JSON.stringify(opts);
chart.setAttribute('class', 'orgchart' + (opts.chartClass !== '' ? ' ' + opts.chartClass : '') + (opts.direction !== 't2b' ? ' ' + opts.direction : ''));
if ((typeof data === 'undefined' ? 'undefined' : _typeof(data)) === 'object') {
// local json datasource
this.buildHierarchy(chart, opts.ajaxURL ? data : this._attachRel(data, '00'), 0);
} else if (typeof data === 'string' && data.startsWith('#')) {
// ul datasource
this.buildHierarchy(chart, this._buildJsonDS(document.querySelector(data).children[0]), 0);
} else {
// ajax datasource
var spinner = document.createElement('i');
spinner.setAttribute('class', 'fa fa-circle-o-notch fa-spin spinner');
chart.appendChild(spinner);
this._getJSON(data).then(function (resp) {
that.buildHierarchy(chart, opts.ajaxURL ? resp : that._attachRel(resp, '00'), 0);
}).catch(function (err) {
console.error('failed to fetch datasource for orgchart', err);
}).finally(function () {
var spinner = chart.querySelector('.spinner');
spinner.parentNode.removeChild(spinner);
});
}
chart.addEventListener('click', this._clickChart.bind(this));
// append the export button to the chart-container
if (opts.exportButton && !chartContainer.querySelector('.oc-export-btn')) {
var exportBtn = document.createElement('button'),
downloadBtn = document.createElement('a');
exportBtn.setAttribute('class', 'oc-export-btn' + (opts.chartClass !== '' ? ' ' + opts.chartClass : ''));
opts.exportButtonName === 'Export' ? exportBtn.innerHTML = 'Export' : exportBtn.innerHTML = '' + opts.exportButtonName;
exportBtn.addEventListener('click', this._clickExportButton.bind(this));
downloadBtn.setAttribute('class', 'oc-download-btn' + (opts.chartClass !== '' ? ' ' + opts.chartClass : ''));
downloadBtn.setAttribute('download', opts.exportFilename + '.png');
chartContainer.appendChild(exportBtn);
chartContainer.appendChild(downloadBtn);
}
if (opts.pan) {
chartContainer.style.overflow = 'hidden';
chart.addEventListener('mousedown', this._onPanStart.bind(this));
chart.addEventListener('touchstart', this._onPanStart.bind(this));
document.body.addEventListener('mouseup', this._onPanEnd.bind(this));
document.body.addEventListener('touchend', this._onPanEnd.bind(this));
}
if (opts.zoom) {
chartContainer.addEventListener('wheel', this._onWheeling.bind(this));
chartContainer.addEventListener('touchstart', this._onTouchStart.bind(this));
document.body.addEventListener('touchmove', this._onTouchMove.bind(this));
document.body.addEventListener('touchend', this._onTouchEnd.bind(this));
}
chartContainer.appendChild(chart);
}
createClass(OrgChart, [{
key: '_closest',
value: function _closest(el, fn) {
return el && (fn(el) && el !== this.chart ? el : this._closest(el.parentNode, fn));
}
}, {
key: '_siblings',
value: function _siblings(el, expr) {
return Array.from(el.parentNode.children).filter(function (child) {
if (child !== el) {
if (expr) {
return el.matches(expr);
}
return true;
}
return false;
});
}
}, {
key: '_prevAll',
value: function _prevAll(el, expr) {
var sibs = [],
prevSib = el.previousElementSibling;
while (prevSib) {
if (!expr || prevSib.matches(expr)) {
sibs.push(prevSib);
}
prevSib = prevSib.previousElementSibling;
}
return sibs;
}
}, {
key: '_nextAll',
value: function _nextAll(el, expr) {
var sibs = [];
var nextSib = el.nextElementSibling;
while (nextSib) {
if (!expr || nextSib.matches(expr)) {
sibs.push(nextSib);
}
nextSib = nextSib.nextElementSibling;
}
return sibs;
}
}, {
key: '_isVisible',
value: function _isVisible(el) {
return el.offsetParent !== null;
}
}, {
key: '_addClass',
value: function _addClass(elements, classNames) {
elements.forEach(function (el) {
if (classNames.indexOf(' ') > 0) {
classNames.split(' ').forEach(function (className) {
return el.classList.add(className);
});
} else {
el.classList.add(classNames);
}
});
}
}, {
key: '_removeClass',
value: function _removeClass(elements, classNames) {
elements.forEach(function (el) {
if (classNames.indexOf(' ') > 0) {
classNames.split(' ').forEach(function (className) {
return el.classList.remove(className);
});
} else {
el.classList.remove(classNames);
}
});
}
}, {
key: '_css',
value: function _css(elements, prop, val) {
elements.forEach(function (el) {
el.style[prop] = val;
});
}
}, {
key: '_removeAttr',
value: function _removeAttr(elements, attr) {
elements.forEach(function (el) {
el.removeAttribute(attr);
});
}
}, {
key: '_one',
value: function _one(el, type, listener, self) {
var one = function one(event) {
try {
listener.call(self, event);
} finally {
el.removeEventListener(type, one);
}
};
el && el.addEventListener(type, one);
}
}, {
key: '_getDescElements',
value: function _getDescElements(ancestors, selector) {
var results = [];
ancestors.forEach(function (el) {
return results.push.apply(results, toConsumableArray(el.querySelectorAll(selector)));
});
return results;
}
}, {
key: '_getJSON',
value: function _getJSON(url) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(JSON.parse(this.response));
} else {
reject(new Error(this.statusText));
}
}
xhr.open('GET', url);
xhr.onreadystatechange = handler;
xhr.responseType = 'json';
// xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();
});
}
}, {
key: '_buildJsonDS',
value: function _buildJsonDS(li) {
var _this = this;
var subObj = {
'name': li.firstChild.textContent.trim(),
'relationship': (li.parentNode.parentNode.nodeName === 'LI' ? '1' : '0') + (li.parentNode.children.length > 1 ? 1 : 0) + (li.children.length ? 1 : 0)
};
if (li.id) {
subObj.id = li.id;
}
if (li.querySelector('ul')) {
Array.from(li.querySelector('ul').children).forEach(function (el) {
if (!subObj.children) {
subObj.children = [];
}
subObj.children.push(_this._buildJsonDS(el));
});
}
return subObj;
}
}, {
key: '_attachRel',
value: function _attachRel(data, flags) {
data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0);
if (data.children) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = data.children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var item = _step.value;
this._attachRel(item, '1' + (data.children.length > 1 ? 1 : 0));
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
return data;
}
}, {
key: '_repaint',
value: function _repaint(node) {
if (node) {
node.style.offsetWidth = node.offsetWidth;
}
}
// whether the cursor is hovering over the node
}, {
key: '_isInAction',
value: function _isInAction(node) {
return node.querySelector(':scope > .edge').className.indexOf('fa-') > -1;
}
// detect the exist/display state of related node
}, {
key: '_getNodeState',
value: function _getNodeState(node, relation) {
var _this2 = this;
var criteria = void 0,
state = { 'exist': false, 'visible': false };
if (relation === 'parent') {
criteria = this._closest(node, function (el) {
return el.classList && el.classList.contains('nodes');
});
if (criteria) {
state.exist = true;
}
if (state.exist && this._isVisible(criteria.parentNode.children[0])) {
state.visible = true;
}
} else if (relation === 'children') {
criteria = this._closest(node, function (el) {
return el.nodeName === 'TR';
}).nextElementSibling;
if (criteria) {
state.exist = true;
}
if (state.exist && this._isVisible(criteria)) {
state.visible = true;
}
} else if (relation === 'siblings') {
criteria = this._siblings(this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode);
if (criteria.length) {
state.exist = true;
}
if (state.exist && criteria.some(function (el) {
return _this2._isVisible(el);
})) {
state.visible = true;
}
}
return state;
}
// find the related nodes
}, {
key: 'getRelatedNodes',
value: function getRelatedNodes(node, relation) {
if (relation === 'parent') {
return this._closest(node, function (el) {
return el.classList.contains('nodes');
}).parentNode.children[0].querySelector('.node');
} else if (relation === 'children') {
return Array.from(this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).lastChild.children).map(function (el) {
return el.querySelector('.node');
});
} else if (relation === 'siblings') {
return this._siblings(this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode).map(function (el) {
return el.querySelector('.node');
});
}
return [];
}
}, {
key: '_switchHorizontalArrow',
value: function _switchHorizontalArrow(node) {
var opts = this.options,
leftEdge = node.querySelector('.leftEdge'),
rightEdge = node.querySelector('.rightEdge'),
temp = this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode;
if (opts.toggleSiblingsResp && (typeof opts.ajaxURL === 'undefined' || this._closest(node, function (el) {
return el.classList.contains('.nodes');
}).dataset.siblingsLoaded)) {
var prevSib = temp.previousElementSibling,
nextSib = temp.nextElementSibling;
if (prevSib) {
if (prevSib.classList.contains('hidden')) {
leftEdge.classList.add('fa-chevron-left');
leftEdge.classList.remove('fa-chevron-right');
} else {
leftEdge.classList.add('fa-chevron-right');
leftEdge.classList.remove('fa-chevron-left');
}
}
if (nextSib) {
if (nextSib.classList.contains('hidden')) {
rightEdge.classList.add('fa-chevron-right');
rightEdge.classList.remove('fa-chevron-left');
} else {
rightEdge.classList.add('fa-chevron-left');
rightEdge.classList.remove('fa-chevron-right');
}
}
} else {
var sibs = this._siblings(temp),
sibsVisible = sibs.length ? !sibs.some(function (el) {
return el.classList.contains('hidden');
}) : false;
leftEdge.classList.toggle('fa-chevron-right', sibsVisible);
leftEdge.classList.toggle('fa-chevron-left', !sibsVisible);
rightEdge.classList.toggle('fa-chevron-left', sibsVisible);
rightEdge.classList.toggle('fa-chevron-right', !sibsVisible);
}
}
}, {
key: '_hoverNode',
value: function _hoverNode(event) {
var node = event.target,
flag = false,
topEdge = node.querySelector(':scope > .topEdge'),
bottomEdge = node.querySelector(':scope > .bottomEdge'),
leftEdge = node.querySelector(':scope > .leftEdge');
if (event.type === 'mouseenter') {
if (topEdge) {
flag = this._getNodeState(node, 'parent').visible;
topEdge.classList.toggle('fa-chevron-up', !flag);
topEdge.classList.toggle('fa-chevron-down', flag);
}
if (bottomEdge) {
flag = this._getNodeState(node, 'children').visible;
bottomEdge.classList.toggle('fa-chevron-down', !flag);
bottomEdge.classList.toggle('fa-chevron-up', flag);
}
if (leftEdge) {
this._switchHorizontalArrow(node);
}
} else {
Array.from(node.querySelectorAll(':scope > .edge')).forEach(function (el) {
el.classList.remove('fa-chevron-up', 'fa-chevron-down', 'fa-chevron-right', 'fa-chevron-left');
});
}
}
// define node click event handler
}, {
key: '_clickNode',
value: function _clickNode(event) {
var clickedNode = event.currentTarget,
focusedNode = this.chart.querySelector('.focused');
if (focusedNode) {
focusedNode.classList.remove('focused');
}
clickedNode.classList.add('focused');
}
// build the parent node of specific node
}, {
key: '_buildParentNode',
value: function _buildParentNode(currentRoot, nodeData, callback) {
var that = this,
table = document.createElement('table');
nodeData.relationship = nodeData.relationship || '001';
this._createNode(nodeData, 0).then(function (nodeDiv) {
var chart = that.chart;
nodeDiv.classList.remove('slide-up');
nodeDiv.classList.add('slide-down');
var parentTr = document.createElement('tr'),
superiorLine = document.createElement('tr'),
inferiorLine = document.createElement('tr'),
childrenTr = document.createElement('tr');
parentTr.setAttribute('class', 'hidden');
parentTr.innerHTML = '<td colspan="2"></td>';
table.appendChild(parentTr);
superiorLine.setAttribute('class', 'lines hidden');
superiorLine.innerHTML = '<td colspan="2"><div class="downLine"></div></td>';
table.appendChild(superiorLine);
inferiorLine.setAttribute('class', 'lines hidden');
inferiorLine.innerHTML = '<td class="rightLine"> </td><td class="leftLine"> </td>';
table.appendChild(inferiorLine);
childrenTr.setAttribute('class', 'nodes');
childrenTr.innerHTML = '<td colspan="2"></td>';
table.appendChild(childrenTr);
table.querySelector('td').appendChild(nodeDiv);
chart.insertBefore(table, chart.children[0]);
table.children[3].children[0].appendChild(chart.lastChild);
callback();
}).catch(function (err) {
console.error('Failed to create parent node', err);
});
}
}, {
key: '_switchVerticalArrow',
value: function _switchVerticalArrow(arrow) {
arrow.classList.toggle('fa-chevron-up');
arrow.classList.toggle('fa-chevron-down');
}
// show the parent node of the specified node
}, {
key: 'showParent',
value: function showParent(node) {
// just show only one superior level
var temp = this._prevAll(this._closest(node, function (el) {
return el.classList.contains('nodes');
}));
this._removeClass(temp, 'hidden');
// just show only one line
this._addClass(Array(temp[0].children).slice(1, -1), 'hidden');
// show parent node with animation
var parent = temp[2].querySelector('.node');
this._one(parent, 'transitionend', function () {
parent.classList.remove('slide');
if (this._isInAction(node)) {
this._switchVerticalArrow(node.querySelector(':scope > .topEdge'));
}
}, this);
this._repaint(parent);
parent.classList.add('slide');
parent.classList.remove('slide-down');
}
// show the sibling nodes of the specified node
}, {
key: 'showSiblings',
value: function showSiblings(node, direction) {
var _this3 = this;
// firstly, show the sibling td tags
var siblings = [],
temp = this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode;
if (direction) {
siblings = direction === 'left' ? this._prevAll(temp) : this._nextAll(temp);
} else {
siblings = this._siblings(temp);
}
this._removeClass(siblings, 'hidden');
// secondly, show the lines
var upperLevel = this._prevAll(this._closest(node, function (el) {
return el.classList.contains('nodes');
}));
temp = Array.from(upperLevel[0].querySelectorAll(':scope > .hidden'));
if (direction) {
this._removeClass(temp.slice(0, siblings.length * 2), 'hidden');
} else {
this._removeClass(temp, 'hidden');
}
// thirdly, do some cleaning stuff
if (!this._getNodeState(node, 'parent').visible) {
this._removeClass(upperLevel, 'hidden');
var parent = upperLevel[2].querySelector('.node');
this._one(parent, 'transitionend', function (event) {
event.target.classList.remove('slide');
}, this);
this._repaint(parent);
parent.classList.add('slide');
parent.classList.remove('slide-down');
}
// lastly, show the sibling nodes with animation
siblings.forEach(function (sib) {
Array.from(sib.querySelectorAll('.node')).forEach(function (node) {
if (_this3._isVisible(node)) {
node.classList.add('slide');
node.classList.remove('slide-left', 'slide-right');
}
});
});
this._one(siblings[0].querySelector('.slide'), 'transitionend', function () {
var _this4 = this;
siblings.forEach(function (sib) {
_this4._removeClass(Array.from(sib.querySelectorAll('.slide')), 'slide');
});
if (this._isInAction(node)) {
this._switchHorizontalArrow(node);
node.querySelector('.topEdge').classList.remove('fa-chevron-up');
node.querySelector('.topEdge').classList.add('fa-chevron-down');
}
}, this);
}
// hide the sibling nodes of the specified node
}, {
key: 'hideSiblings',
value: function hideSiblings(node, direction) {
var _this5 = this;
var nodeContainer = this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode,
siblings = this._siblings(nodeContainer);
siblings.forEach(function (sib) {
if (sib.querySelector('.spinner')) {
_this5.chart.dataset.inAjax = false;
}
});
if (!direction || direction && direction === 'left') {
var preSibs = this._prevAll(nodeContainer);
preSibs.forEach(function (sib) {
Array.from(sib.querySelectorAll('.node')).forEach(function (node) {
if (_this5._isVisible(node)) {
node.classList.add('slide', 'slide-right');
}
});
});
}
if (!direction || direction && direction !== 'left') {
var nextSibs = this._nextAll(nodeContainer);
nextSibs.forEach(function (sib) {
Array.from(sib.querySelectorAll('.node')).forEach(function (node) {
if (_this5._isVisible(node)) {
node.classList.add('slide', 'slide-left');
}
});
});
}
var animatedNodes = [];
this._siblings(nodeContainer).forEach(function (sib) {
Array.prototype.push.apply(animatedNodes, Array.from(sib.querySelectorAll('.slide')));
});
var lines = [];
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = animatedNodes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _node = _step2.value;
var temp = this._closest(_node, function (el) {
return el.classList.contains('nodes');
}).previousElementSibling;
lines.push(temp);
lines.push(temp.previousElementSibling);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
lines = [].concat(toConsumableArray(new Set(lines)));
lines.forEach(function (line) {
line.style.visibility = 'hidden';
});
this._one(animatedNodes[0], 'transitionend', function (event) {
var _this6 = this;
lines.forEach(function (line) {
line.removeAttribute('style');
});
var sibs = [];
if (direction) {
if (direction === 'left') {
sibs = this._prevAll(nodeContainer, ':not(.hidden)');
} else {
sibs = this._nextAll(nodeContainer, ':not(.hidden)');
}
} else {
sibs = this._siblings(nodeContainer);
}
var temp = Array.from(this._closest(nodeContainer, function (el) {
return el.classList.contains('nodes');
}).previousElementSibling.querySelectorAll(':scope > :not(.hidden)'));
var someLines = temp.slice(1, direction ? sibs.length * 2 + 1 : -1);
this._addClass(someLines, 'hidden');
this._removeClass(animatedNodes, 'slide');
sibs.forEach(function (sib) {
Array.from(sib.querySelectorAll('.node')).slice(1).forEach(function (node) {
if (_this6._isVisible(node)) {
node.classList.remove('slide-left', 'slide-right');
node.classList.add('slide-up');
}
});
});
sibs.forEach(function (sib) {
_this6._addClass(Array.from(sib.querySelectorAll('.lines')), 'hidden');
_this6._addClass(Array.from(sib.querySelectorAll('.nodes')), 'hidden');
_this6._addClass(Array.from(sib.querySelectorAll('.verticalNodes')), 'hidden');
});
this._addClass(sibs, 'hidden');
if (this._isInAction(node)) {
this._switchHorizontalArrow(node);
}
}, this);
}
// recursively hide the ancestor node and sibling nodes of the specified node
}, {
key: 'hideParent',
value: function hideParent(node) {
var temp = Array.from(this._closest(node, function (el) {
return el.classList.contains('nodes');
}).parentNode.children).slice(0, 3);
if (temp[0].querySelector('.spinner')) {
this.chart.dataset.inAjax = false;
}
// hide the sibling nodes
if (this._getNodeState(node, 'siblings').visible) {
this.hideSiblings(node);
}
// hide the lines
var lines = temp.slice(1);
this._css(lines, 'visibility', 'hidden');
// hide the superior nodes with transition
var parent = temp[0].querySelector('.node'),
grandfatherVisible = this._getNodeState(parent, 'parent').visible;
if (parent && this._isVisible(parent)) {
parent.classList.add('slide', 'slide-down');
this._one(parent, 'transitionend', function () {
parent.classList.remove('slide');
this._removeAttr(lines, 'style');
this._addClass(temp, 'hidden');
}, this);
}
// if the current node has the parent node, hide it recursively
if (parent && grandfatherVisible) {
this.hideParent(parent);
}
}
// exposed method
}, {
key: 'addParent',
value: function addParent(currentRoot, data) {
var that = this;
this._buildParentNode(currentRoot, data, function () {
if (!currentRoot.querySelector(':scope > .topEdge')) {
var topEdge = document.createElement('i');
topEdge.setAttribute('class', 'edge verticalEdge topEdge fa');
currentRoot.appendChild(topEdge);
}
that.showParent(currentRoot);
});
}
// start up loading status for requesting new nodes
}, {
key: '_startLoading',
value: function _startLoading(arrow, node) {
var opts = this.options,
chart = this.chart;
if (typeof chart.dataset.inAjax !== 'undefined' && chart.dataset.inAjax === 'true') {
return false;
}
arrow.classList.add('hidden');
var spinner = document.createElement('i');
spinner.setAttribute('class', 'fa fa-circle-o-notch fa-spin spinner');
node.appendChild(spinner);
this._addClass(Array.from(node.querySelectorAll(':scope > *:not(.spinner)')), 'hazy');
chart.dataset.inAjax = true;
var exportBtn = this.chartContainer.querySelector('.oc-export-btn' + (opts.chartClass !== '' ? '.' + opts.chartClass : ''));
if (exportBtn) {
exportBtn.disabled = true;
}
return true;
}
// terminate loading status for requesting new nodes
}, {
key: '_endLoading',
value: function _endLoading(arrow, node) {
var opts = this.options;
arrow.classList.remove('hidden');
node.querySelector(':scope > .spinner').remove();
this._removeClass(Array.from(node.querySelectorAll(':scope > .hazy')), 'hazy');
this.chart.dataset.inAjax = false;
var exportBtn = this.chartContainer.querySelector('.oc-export-btn' + (opts.chartClass !== '' ? '.' + opts.chartClass : ''));
if (exportBtn) {
exportBtn.disabled = false;
}
}
// define click event handler for the top edge
}, {
key: '_clickTopEdge',
value: function _clickTopEdge(event) {
event.stopPropagation();
var that = this,
topEdge = event.target,
node = topEdge.parentNode,
parentState = this._getNodeState(node, 'parent'),
opts = this.options;
if (parentState.exist) {
var temp = this._closest(node, function (el) {
return el.classList.contains('nodes');
});
var parent = temp.parentNode.firstChild.querySelector('.node');
if (parent.classList.contains('slide')) {
return;
}
// hide the ancestor nodes and sibling nodes of the specified node
if (parentState.visible) {
this.hideParent(node);
this._one(parent, 'transitionend', function () {
if (this._isInAction(node)) {
this._switchVerticalArrow(topEdge);
this._switchHorizontalArrow(node);
}
}, this);
} else {
// show the ancestors and siblings
this.showParent(node);
}
} else {
// load the new parent node of the specified node by ajax request
var nodeId = topEdge.parentNode.id;
// start up loading status
if (this._startLoading(topEdge, node)) {
// load new nodes
this._getJSON(typeof opts.ajaxURL.parent === 'function' ? opts.ajaxURL.parent(node.dataset.source) : opts.ajaxURL.parent + nodeId).then(function (resp) {
if (that.chart.dataset.inAjax === 'true') {
if (Object.keys(resp).length) {
that.addParent(node, resp);
}
}
}).catch(function (err) {
console.error('Failed to get parent node data.', err);
}).finally(function () {
that._endLoading(topEdge, node);
});
}
}
}
// recursively hide the descendant nodes of the specified node
}, {
key: 'hideChildren',
value: function hideChildren(node) {
var that = this,
temp = this._nextAll(node.parentNode.parentNode),
lastItem = temp[temp.length - 1],
lines = [];
if (lastItem.querySelector('.spinner')) {
this.chart.dataset.inAjax = false;
}
var descendants = Array.from(lastItem.querySelectorAll('.node')).filter(function (el) {
return that._isVisible(el);
}),
isVerticalDesc = lastItem.classList.contains('verticalNodes');
if (!isVerticalDesc) {
descendants.forEach(function (desc) {
Array.prototype.push.apply(lines, that._prevAll(that._closest(desc, function (el) {
return el.classList.contains('nodes');
}), '.lines'));
});
lines = [].concat(toConsumableArray(new Set(lines)));
this._css(lines, 'visibility', 'hidden');
}
this._one(descendants[0], 'transitionend', function (event) {
this._removeClass(descendants, 'slide');
if (isVerticalDesc) {
that._addClass(temp, 'hidden');
} else {
lines.forEach(function (el) {
el.removeAttribute('style');
el.classList.add('hidden');
el.parentNode.lastChild.classList.add('hidden');
});
this._addClass(Array.from(lastItem.querySelectorAll('.verticalNodes')), 'hidden');
}
if (this._isInAction(node)) {
this._switchVerticalArrow(node.querySelector('.bottomEdge'));
}
}, this);
this._addClass(descendants, 'slide slide-up');
}
// show the children nodes of the specified node
}, {
key: 'showChildren',
value: function showChildren(node) {
var _this7 = this;
var that = this,
temp = this._nextAll(node.parentNode.parentNode),
descendants = [];
this._removeClass(temp, 'hidden');
if (temp.some(function (el) {
return el.classList.contains('verticalNodes');
})) {
temp.forEach(function (el) {
Array.prototype.push.apply(descendants, Array.from(el.querySelectorAll('.node')).filter(function (el) {
return that._isVisible(el);
}));
});
} else {
Array.from(temp[2].children).forEach(function (el) {
Array.prototype.push.apply(descendants, Array.from(el.querySelector('tr').querySelectorAll('.node')).filter(function (el) {
return that._isVisible(el);
}));
});
}
// the two following statements are used to enforce browser to repaint
this._repaint(descendants[0]);
this._one(descendants[0], 'transitionend', function (event) {
_this7._removeClass(descendants, 'slide');
if (_this7._isInAction(node)) {
_this7._switchVerticalArrow(node.querySelector('.bottomEdge'));
}
}, this);
this._addClass(descendants, 'slide');
this._removeClass(descendants, 'slide-up');
}
// build the child nodes of specific node
}, {
key: '_buildChildNode',
value: function _buildChildNode(appendTo, nodeData, callback) {
var data = nodeData.children || nodeData.siblings;
appendTo.querySelector('td').setAttribute('colSpan', data.length * 2);
this.buildHierarchy(appendTo, { 'children': data }, 0, callback);
}
// exposed method
}, {
key: 'addChildren',
value: function addChildren(node, data) {
var that = this,
opts = this.options,
count = 0;
this.chart.dataset.inEdit = 'addChildren';
this._buildChildNode.call(this, this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}), data, function () {
if (++count === data.children.length) {
if (!node.querySelector('.bottomEdge')) {
var bottomEdge = document.createElement('i');
bottomEdge.setAttribute('class', 'edge verticalEdge bottomEdge fa');
node.appendChild(bottomEdge);
}
if (!node.querySelector('.symbol')) {
var symbol = document.createElement('i');
symbol.setAttribute('class', 'fa ' + opts.parentNodeSymbol + ' symbol');
node.querySelector(':scope > .title').appendChild(symbol);
}
that.showChildren(node);
that.chart.dataset.inEdit = '';
}
});
}
// bind click event handler for the bottom edge
}, {
key: '_clickBottomEdge',
value: function _clickBottomEdge(event) {
var _this8 = this;
event.stopPropagation();
var that = this,
opts = this.options,
bottomEdge = event.target,
node = bottomEdge.parentNode,
childrenState = this._getNodeState(node, 'children');
if (childrenState.exist) {
var temp = this._closest(node, function (el) {
return el.nodeName === 'TR';
}).parentNode.lastChild;
if (Array.from(temp.querySelectorAll('.node')).some(function (node) {
return _this8._isVisible(node) && node.classList.contains('slide');
})) {
return;
}
// hide the descendant nodes of the specified node
if (childrenState.visible) {
this.hideChildren(node);
} else {
// show the descendants
this.showChildren(node);
}
} else {
// load the new children nodes of the specified node by ajax request
var nodeId = bottomEdge.parentNode.id;
if (this._startLoading(bottomEdge, node)) {
this._getJSON(typeof opts.ajaxURL.children === 'function' ? opts.ajaxURL.children(node.dataset.source) : opts.ajaxURL.children + nodeId).then(function (resp) {
if (that.chart.dataset.inAjax === 'true') {
if (resp.children.length) {
that.addChildren(node, resp);
}
}
}).catch(function (err) {
console.error('Failed to get children nodes data', err);
}).finally(function () {
that._endLoading(bottomEdge, node);
});
}
}
}
// subsequent processing of build sibling nodes
}, {
key: '_complementLine',
value: function _complementLine(oneSibling, siblingCount, existingSibligCount) {
var temp = oneSibling.parentNode.parentNode.children;
temp[0].children[0].setAttribute('colspan', siblingCount * 2);
temp[1].children[0].setAttribute('colspan', siblingCount * 2);
for (var i = 0; i < existingSibligCount; i++) {
var rightLine = document.createElement('td'),
leftLine = document.createElement('td');
rightLine.setAttribute('class', 'rightLine topLine');
rightLine.innerHTML = ' ';
temp[2].insertBefore(rightLine, temp[2].children[1]);
leftLine.setAttribute('class', 'leftLine topLine');
leftLine.innerHTML = ' ';
temp[2].insertBefore(leftLine, temp[2].children[1]);
}
}
// build the sibling nodes of specific node
}, {
key: '_buildSiblingNode',
value: function _buildSiblingNode(nodeChart, nodeData, callback) {
var _this9 = this;
var that = this,
newSiblingCount = nodeData.siblings ? nodeData.siblings.length : nodeData.children.length,
existingSibligCount = nodeChart.parentNode.nodeName === 'TD' ? this._closest(nodeChart, function (el) {
return el.nodeName === 'TR';
}).children.length : 1,
siblingCount = existingSibligCount + newSiblingCount,
insertPostion = siblingCount > 1 ? Math.floor(siblingCount / 2 - 1) : 0;
// just build the sibling nodes for the specific node
if (nodeChart.parentNode.nodeName === 'TD') {
var temp = this._prevAll(nodeChart.parentNode.parentNode);
temp[0].remove();
temp[1].remove();
var childCount = 0;
that._buildChildNode.call(that, that._closest(nodeChart.parentNode, function (el) {
return el.nodeName === 'TABLE';
}), nodeData, function () {
if (++childCount === newSiblingCount) {
var siblingTds = Array.from(that._closest(nodeChart.parentNode, function (el) {
return el.nodeName === 'TABLE';
}).lastChild.children);
if (existingSibligCount > 1) {
var _temp = nodeChart.parentNode.parentNode;
Array.from(_temp.children).forEach(function (el) {
siblingTds[0].parentNode.insertBefore(el, siblingTds[0]);
});
_temp.remove();
that._complementLine(siblingTds[0], siblingCount, existingSibligCount);
that._addClass(siblingTds, 'hidden');
siblingTds.forEach(function (el) {
that._addClass(el.querySelectorAll('.node'), 'slide-left');
});
} else {
var _temp2 = nodeChart.parentNode.parentNode;
siblingTds[insertPostion].parentNode.insertBefore(nodeChart.parentNode, siblingTds[insertPostion + 1]);
_temp2.remove();
that._complementLine(siblingTds[insertPostion], siblingCount, 1);
that._addClass(siblingTds, 'hidden');
that._addClass(that._getDescElements(siblingTds.slice(0, insertPostion + 1), '.node'), 'slide-right');
that._addClass(that._getDescElements(siblingTds.slice(insertPostion + 1), '.node'), 'slide-left');
}
callback();
}
});
} else {
// build the sibling nodes and parent node for the specific ndoe
var nodeCount = 0;
that.buildHierarchy.call(that, that.chart, nodeData, 0, function () {
if (++nodeCount === siblingCount) {
var _temp3 = nodeChart.nextElementSibling.children[3].children[insertPostion],
td = document.createElement('td');
td.setAttribute('colspan', 2);
td.appendChild(nodeChart);
_temp3.parentNode.insertBefore(td, _temp3.nextElementSibling);
that._complementLine(_temp3, siblingCount, 1);
var temp2 = that._closest(nodeChart, function (el) {
return el.classList && el.classList.contains('nodes');
}).parentNode.children[0];
temp2.classList.add('hidden');
that._addClass(Array.from(temp2.querySelectorAll('.node')), 'slide-down');
var temp3 = _this9._siblings(nodeChart.parentNode);
that._addClass(temp3, 'hidden');
that._addClass(that._getDescElements(temp3.slice(0, insertPostion), '.node'), 'slide-right');
that._addClass(that._getDescElements(temp3.slice(insertPostion), '.node'), 'slide-left');
callback();
}
});
}
}
}, {
key: 'addSiblings',
value: function addSiblings(node, data) {
var that = this;
this.chart.dataset.inEdit = 'addSiblings';
this._buildSiblingNode.call(this, this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}), data, function () {
that._closest(node, function (el) {
return el.classList && el.classList.contains('nodes');
}).dataset.siblingsLoaded = true;
if (!node.querySelector('.leftEdge')) {
var rightEdge = document.createElement('i'),
leftEdge = document.createElement('i');
rightEdge.setAttribute('class', 'edge horizontalEdge rightEdge fa');
node.appendChild(rightEdge);
leftEdge.setAttribute('class', 'edge horizontalEdge leftEdge fa');
node.appendChild(leftEdge);
}
that.showSiblings(node);
that.chart.dataset.inEdit = '';
});
}
}, {
key: 'removeNodes',
value: function removeNodes(node) {
var parent = this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode,
sibs = this._siblings(parent.parentNode);
if (parent.nodeName === 'TD') {
if (this._getNodeState(node, 'siblings').exist) {
sibs[2].querySelector('.topLine').nextElementSibling.remove();
sibs[2].querySelector('.topLine').remove();
sibs[0].children[0].setAttribute('colspan', sibs[2].children.length);
sibs[1].children[0].setAttribute('colspan', sibs[2].children.length);
parent.remove();
} else {
sibs[0].children[0].removeAttribute('colspan');
sibs[0].querySelector('.bottomEdge').remove();
this._siblings(sibs[0]).forEach(function (el) {
return el.remove();
});
}
} else {
Array.from(parent.parentNode.children).forEach(function (el) {
return el.remove();
});
}
}
// bind click event handler for the left and right edges
}, {
key: '_clickHorizontalEdge',
value: function _clickHorizontalEdge(event) {
var _this10 = this;
event.stopPropagation();
var that = this,
opts = this.options,
hEdge = event.target,
node = hEdge.parentNode,
siblingsState = this._getNodeState(node, 'siblings');
if (siblingsState.exist) {
var temp = this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode,
siblings = this._siblings(temp);
if (siblings.some(function (el) {
var node = el.querySelector('.node');
return _this10._isVisible(node) && node.classList.contains('slide');
})) {
return;
}
if (opts.toggleSiblingsResp) {
var prevSib = this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode.previousElementSibling,
nextSib = this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode.nextElementSibling;
if (hEdge.classList.contains('leftEdge')) {
if (prevSib && prevSib.classList.contains('hidden')) {
this.showSiblings(node, 'left');
} else {
this.hideSiblings(node, 'left');
}
} else {
if (nextSib && nextSib.classList.contains('hidden')) {
this.showSiblings(node, 'right');
} else {
this.hideSiblings(node, 'right');
}
}
} else {
if (siblingsState.visible) {
this.hideSiblings(node);
} else {
this.showSiblings(node);
}
}
} else {
// load the new sibling nodes of the specified node by ajax request
var nodeId = hEdge.parentNode.id,
url = this._getNodeState(node, 'parent').exist ? typeof opts.ajaxURL.siblings === 'function' ? opts.ajaxURL.siblings(JSON.parse(node.dataset.source)) : opts.ajaxURL.siblings + nodeId : typeof opts.ajaxURL.families === 'function' ? opts.ajaxURL.families(JSON.parse(node.dataset.source)) : opts.ajaxURL.families + nodeId;
if (this._startLoading(hEdge, node)) {
this._getJSON(url).then(function (resp) {
if (that.chart.dataset.inAjax === 'true') {
if (resp.siblings || resp.children) {
that.addSiblings(node, resp);
}
}
}).catch(function (err) {
console.error('Failed to get sibling nodes data', err);
}).finally(function () {
that._endLoading(hEdge, node);
});
}
}
}
// event handler for toggle buttons in Hybrid(horizontal + vertical) OrgChart
}, {
key: '_clickToggleButton',
value: function _clickToggleButton(event) {
var that = this,
toggleBtn = event.target,
descWrapper = toggleBtn.parentNode.nextElementSibling,
descendants = Array.from(descWrapper.querySelectorAll('.node')),
children = Array.from(descWrapper.children).map(function (item) {
return item.querySelector('.node');
});
if (children.some(function (item) {
return item.classList.contains('slide');
})) {
return;
}
toggleBtn.classList.toggle('fa-plus-square');
toggleBtn.classList.toggle('fa-minus-square');
if (descendants[0].classList.contains('slide-up')) {
descWrapper.classList.remove('hidden');
this._repaint(children[0]);
this._addClass(children, 'slide');
this._removeClass(children, 'slide-up');
this._one(children[0], 'transitionend', function () {
that._removeClass(children, 'slide');
});
} else {
this._addClass(descendants, 'slide slide-up');
this._one(descendants[0], 'transitionend', function () {
that._removeClass(descendants, 'slide');
descendants.forEach(function (desc) {
var ul = that._closest(desc, function (el) {
return el.nodeName === 'UL';
});
ul.classList.add('hidden');
});
});
descendants.forEach(function (desc) {
var subTBs = Array.from(desc.querySelectorAll('.toggleBtn'));
that._removeClass(subTBs, 'fa-minus-square');
that._addClass(subTBs, 'fa-plus-square');
});
}
}
}, {
key: '_dispatchClickEvent',
value: function _dispatchClickEvent(event) {
var classList = event.target.classList;
if (classList.contains('topEdge')) {
this._clickTopEdge(event);
} else if (classList.contains('rightEdge') || classList.contains('leftEdge')) {
this._clickHorizontalEdge(event);
} else if (classList.contains('bottomEdge')) {
this._clickBottomEdge(event);
} else if (classList.contains('toggleBtn')) {
this._clickToggleButton(event);
} else {
this._clickNode(event);
}
}
}, {
key: '_onDragStart',
value: function _onDragStart(event) {
var nodeDiv = event.target,
opts = this.options,
isFirefox = /firefox/.test(window.navigator.userAgent.toLowerCase());
if (isFirefox) {
event.dataTransfer.setData('text/html', 'hack for firefox');
}
// if users enable zoom or direction options
if (this.chart.style.transform) {
var ghostNode = void 0,
nodeCover = void 0;
if (!document.querySelector('.ghost-node')) {
ghostNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
ghostNode.classList.add('ghost-node');
nodeCover = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
ghostNode.appendChild(nodeCover);
this.chart.appendChild(ghostNode);
} else {
ghostNode = this.chart.querySelector(':scope > .ghost-node');
nodeCover = ghostNode.children[0];
}
var transValues = this.chart.style.transform.split(','),
scale = Math.abs(window.parseFloat(opts.direction === 't2b' || opts.direction === 'b2t' ? transValues[0].slice(transValues[0].indexOf('(') + 1) : transValues[1]));
ghostNode.setAttribute('width', nodeDiv.offsetWidth);
ghostNode.setAttribute('height', nodeDiv.offsetHeight);
nodeCover.setAttribute('x', 5 * scale);
nodeCover.setAttribute('y', 5 * scale);
nodeCover.setAttribute('width', 120 * scale);
nodeCover.setAttribute('height', 40 * scale);
nodeCover.setAttribute('rx', 4 * scale);
nodeCover.setAttribute('ry', 4 * scale);
nodeCover.setAttribute('stroke-width', 1 * scale);
var xOffset = event.offsetX * scale,
yOffset = event.offsetY * scale;
if (opts.direction === 'l2r') {
xOffset = event.offsetY * scale;
yOffset = event.offsetX * scale;
} else if (opts.direction === 'r2l') {
xOffset = nodeDiv.offsetWidth - event.offsetY * scale;
yOffset = event.offsetX * scale;
} else if (opts.direction === 'b2t') {
xOffset = nodeDiv.offsetWidth - event.offsetX * scale;
yOffset = nodeDiv.offsetHeight - event.offsetY * scale;
}
if (isFirefox) {
// hack for old version of Firefox(< 48.0)
var ghostNodeWrapper = document.createElement('img');
ghostNodeWrapper.src = 'data:image/svg+xml;utf8,' + new XMLSerializer().serializeToString(ghostNode);
event.dataTransfer.setDragImage(ghostNodeWrapper, xOffset, yOffset);
nodeCover.setAttribute('fill', 'rgb(255, 255, 255)');
nodeCover.setAttribute('stroke', 'rgb(191, 0, 0)');
} else {
event.dataTransfer.setDragImage(ghostNode, xOffset, yOffset);
}
}
var dragged = event.target;
var closestDraggedNodes = this._closest(dragged, function (el) {
return el.classList && el.classList.contains('nodes');
});
var dragZone = null;
closestDraggedNodes !== null ? dragZone = this._closest(dragged, function (el) {
return el.classList && el.classList.contains('nodes');
}).parentNode.children[0].querySelector('.node') : null;
var dragHier = Array.from(this._closest(dragged, function (el) {
return el.nodeName === 'TABLE';
}).querySelectorAll('.node'));
this.dragged = dragged;
Array.from(this.chart.querySelectorAll('.node')).forEach(function (node) {
if (!dragHier.includes(node)) {
if (opts.dropCriteria) {
if (opts.dropCriteria(dragged, dragZone, node)) {
node.classList.add('allowedDrop');
}
} else {
node.classList.add('allowedDrop');
}
}
});
}
}, {
key: '_onDragOver',
value: function _onDragOver(event) {
event.preventDefault();
var dropZone = event.currentTarget;
if (!dropZone.classList.contains('allowedDrop')) {
event.dataTransfer.dropEffect = 'none';
}
}
}, {
key: '_onDragEnd',
value: function _onDragEnd(event) {
Array.from(this.chart.querySelectorAll('.allowedDrop')).forEach(function (el) {
el.classList.remove('allowedDrop');
});
}
}, {
key: '_onDrop',
value: function _onDrop(event) {
var dropZone = event.currentTarget,
chart = this.chart,
dragged = this.dragged,
dragZone = this._closest(dragged, function (el) {
return el.classList && el.classList.contains('nodes');
}).parentNode.children[0].children[0];
this._removeClass(Array.from(chart.querySelectorAll('.allowedDrop')), 'allowedDrop');
// firstly, deal with the hierarchy of drop zone
if (!dropZone.parentNode.parentNode.nextElementSibling) {
// if the drop zone is a leaf node
var bottomEdge = document.createElement('i');
bottomEdge.setAttribute('class', 'edge verticalEdge bottomEdge fa');
dropZone.appendChild(bottomEdge);
dropZone.parentNode.setAttribute('colspan', 2);
var table = this._closest(dropZone, function (el) {
return el.nodeName === 'TABLE';
}),
upperTr = document.createElement('tr'),
lowerTr = document.createElement('tr'),
nodeTr = document.createElement('tr');
upperTr.setAttribute('class', 'lines');
upperTr.innerHTML = '<td colspan="2"><div class="downLine"></div></td>';
table.appendChild(upperTr);
lowerTr.setAttribute('class', 'lines');
lowerTr.innerHTML = '<td class="rightLine"> </td><td class="leftLine"> </td>';
table.appendChild(lowerTr);
nodeTr.setAttribute('class', 'nodes');
table.appendChild(nodeTr);
Array.from(dragged.querySelectorAll('.horizontalEdge')).forEach(function (hEdge) {
dragged.removeChild(hEdge);
});
var draggedTd = this._closest(dragged, function (el) {
return el.nodeName === 'TABLE';
}).parentNode;
nodeTr.appendChild(draggedTd);
} else {
var dropColspan = window.parseInt(dropZone.parentNode.colSpan) + 2;
dropZone.parentNode.setAttribute('colspan', dropColspan);
dropZone.parentNode.parentNode.nextElementSibling.children[0].setAttribute('colspan', dropColspan);
if (!dragged.querySelector('.horizontalEdge')) {
var rightEdge = document.createElement('i'),
leftEdge = document.createElement('i');
rightEdge.setAttribute('class', 'edge horizontalEdge rightEdge fa');
dragged.appendChild(rightEdge);
leftEdge.setAttribute('class', 'edge horizontalEdge leftEdge fa');
dragged.appendChild(leftEdge);
}
var temp = dropZone.parentNode.parentNode.nextElementSibling.nextElementSibling,
leftline = document.createElement('td'),
rightline = document.createElement('td');
leftline.setAttribute('class', 'leftLine topLine');
leftline.innerHTML = ' ';
temp.insertBefore(leftline, temp.children[1]);
rightline.setAttribute('class', 'rightLine topLine');
rightline.innerHTML = ' ';
temp.insertBefore(rightline, temp.children[2]);
temp.nextElementSibling.appendChild(this._closest(dragged, function (el) {
return el.nodeName === 'TABLE';
}).parentNode);
var dropSibs = this._siblings(this._closest(dragged, function (el) {
return el.nodeName === 'TABLE';
}).parentNode).map(function (el) {
return el.querySelector('.node');
});
if (dropSibs.length === 1) {
var _rightEdge = document.createElement('i'),
_leftEdge = document.createElement('i');
_rightEdge.setAttribute('class', 'edge horizontalEdge rightEdge fa');
dropSibs[0].appendChild(_rightEdge);
_leftEdge.setAttribute('class', 'edge horizontalEdge leftEdge fa');
dropSibs[0].appendChild(_leftEdge);
}
}
// secondly, deal with the hierarchy of dragged node
var dragColSpan = window.parseInt(dragZone.colSpan);
if (dragColSpan > 2) {
dragZone.setAttribute('colspan', dragColSpan - 2);
dragZone.parentNode.nextElementSibling.children[0].setAttribute('colspan', dragColSpan - 2);
var _temp4 = dragZone.parentNode.nextElementSibling.nextElementSibling;
_temp4.children[1].remove();
_temp4.children[1].remove();
var dragSibs = Array.from(dragZone.parentNode.parentNode.children[3].children).map(function (td) {
return td.querySelector('.node');
});
if (dragSibs.length === 1) {
dragSibs[0].querySelector('.leftEdge').remove();
dragSibs[0].querySelector('.rightEdge').remove();
}
} else {
dragZone.removeAttribute('colspan');
dragZone.querySelector('.node').removeChild(dragZone.querySelector('.bottomEdge'));
Array.from(dragZone.parentNode.parentNode.children).slice(1).forEach(function (tr) {
return tr.remove();
});
}
var customE = new CustomEvent('nodedropped.orgchart', { 'detail': {
'draggedNode': dragged,
'dragZone': dragZone.children[0],
'dropZone': dropZone
} });
chart.dispatchEvent(customE);
}
// create node
}, {
key: '_createNode',
value: function _createNode(nodeData, level) {
var that = this,
opts = this.options;
return new Promise(function (resolve, reject) {
if (nodeData.children) {
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = nodeData.children[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var child = _step3.value;
child.parentId = nodeData.id;
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
}
// construct the content of node
var nodeDiv = document.createElement('div');
delete nodeData.children;
nodeDiv.dataset.source = JSON.stringify(nodeData);
if (nodeData[opts.nodeId]) {
nodeDiv.id = nodeData[opts.nodeId];
}
var inEdit = that.chart.dataset.inEdit,
isHidden = void 0;
if (inEdit) {
isHidden = inEdit === 'addChildren' ? ' slide-up' : '';
} else {
isHidden = level >= opts.depth ? ' slide-up' : '';
}
nodeDiv.setAttribute('class', 'node ' + (nodeData.className || '') + isHidden);
if (opts.draggable) {
nodeDiv.setAttribute('draggable', true);
}
if (nodeData.parentId) {
nodeDiv.setAttribute('data-parent', nodeData.parentId);
}
nodeDiv.innerHTML = '\n <div class="title">' + nodeData[opts.nodeTitle] + '</div>\n ' + (opts.nodeContent ? '<div class="content">' + nodeData[opts.nodeContent] + '</div>' : '') + '\n ';
// append 4 direction arrows or expand/collapse buttons
var flags = nodeData.relationship || '';
if (opts.verticalDepth && level + 2 > opts.verticalDepth) {
if (level + 1 >= opts.verticalDepth && Number(flags.substr(2, 1))) {
var toggleBtn = document.createElement('i'),
icon = level + 1 >= opts.depth ? 'plus' : 'minus';
toggleBtn.setAttribute('class', 'toggleBtn fa fa-' + icon + '-square');
nodeDiv.appendChild(toggleBtn);
}
} else {
if (Number(flags.substr(0, 1))) {
var topEdge = document.createElement('i');
topEdge.setAttribute('class', 'edge verticalEdge topEdge fa');
nodeDiv.appendChild(topEdge);
}
if (Number(flags.substr(1, 1))) {
var rightEdge = document.createElement('i'),
leftEdge = document.createElement('i');
rightEdge.setAttribute('class', 'edge horizontalEdge rightEdge fa');
nodeDiv.appendChild(rightEdge);
leftEdge.setAttribute('class', 'edge horizontalEdge leftEdge fa');
nodeDiv.appendChild(leftEdge);
}
if (Number(flags.substr(2, 1))) {
var bottomEdge = document.createElement('i'),
symbol = document.createElement('i'),
title = nodeDiv.querySelector(':scope > .title');
bottomEdge.setAttribute('class', 'edge verticalEdge bottomEdge fa');
nodeDiv.appendChild(bottomEdge);
symbol.setAttribute('class', 'fa ' + opts.parentNodeSymbol + ' symbol');
title.insertBefore(symbol, title.children[0]);
}
}
if (opts.toggleCollapse) {
nodeDiv.addEventListener('mouseenter', that._hoverNode.bind(that));
nodeDiv.addEventListener('mouseleave', that._hoverNode.bind(that));
nodeDiv.addEventListener('click', that._dispatchClickEvent.bind(that));
}
if (opts.draggable) {
nodeDiv.addEventListener('dragstart', that._onDragStart.bind(that));
nodeDiv.addEventListener('dragover', that._onDragOver.bind(that));
nodeDiv.addEventListener('dragend', that._onDragEnd.bind(that));
nodeDiv.addEventListener('drop', that._onDrop.bind(that));
}
// allow user to append dom modification after finishing node create of orgchart
if (opts.createNode) {
opts.createNode(nodeDiv, nodeData);
}
resolve(nodeDiv);
});
}
}, {
key: 'buildHierarchy',
value: function buildHierarchy(appendTo, nodeData, level, callback) {
// Construct the node
var that = this,
opts = this.options,
nodeWrapper = void 0,
childNodes = nodeData.children,
isVerticalNode = opts.verticalDepth && level + 1 >= opts.verticalDepth;
if (Object.keys(nodeData).length > 1) {
// if nodeData has nested structure
nodeWrapper = isVerticalNode ? appendTo : document.createElement('table');
if (!isVerticalNode) {
appendTo.appendChild(nodeWrapper);
}
this._createNode(nodeData, level).then(function (nodeDiv) {
if (isVerticalNode) {
nodeWrapper.insertBefore(nodeDiv, nodeWrapper.firstChild);
} else {
var tr = document.createElement('tr');
tr.innerHTML = '\n <td ' + (childNodes ? 'colspan="' + childNodes.length * 2 + '"' : '') + '>\n </td>\n ';
tr.children[0].appendChild(nodeDiv);
nodeWrapper.insertBefore(tr, nodeWrapper.children[0] ? nodeWrapper.children[0] : null);
}
if (callback) {
callback();
}
}).catch(function (err) {
console.error('Failed to creat node', err);
});
}
// Construct the inferior nodes and connectiong lines
if (childNodes && childNodes.length !== 0) {
if (Object.keys(nodeData).length === 1) {
// if nodeData is just an array
nodeWrapper = appendTo;
}
var isHidden = void 0,
isVerticalLayer = opts.verticalDepth && level + 2 >= opts.verticalDepth,
inEdit = that.chart.dataset.inEdit;
if (inEdit) {
isHidden = inEdit === 'addSiblings' ? '' : ' hidden';
} else {
isHidden = level + 1 >= opts.depth ? ' hidden' : '';
}
// draw the line close to parent node
if (!isVerticalLayer) {
var tr = document.createElement('tr');
tr.setAttribute('class', 'lines' + isHidden);
tr.innerHTML = '\n <td colspan="' + childNodes.length * 2 + '">\n <div class="downLine"></div>\n </td>\n ';
nodeWrapper.appendChild(tr);
}
// draw the lines close to children nodes
var lineLayer = document.createElement('tr');
lineLayer.setAttribute('class', 'lines' + isHidden);
lineLayer.innerHTML = '\n <td class="rightLine"> </td>\n ' + childNodes.slice(1).map(function () {
return '\n <td class="leftLine topLine"> </td>\n <td class="rightLine topLine"> </td>\n ';
}).join('') + '\n <td class="leftLine"> </td>\n ';
var nodeLayer = void 0;
if (isVerticalLayer) {
nodeLayer = document.createElement('ul');
if (isHidden) {
nodeLayer.classList.add(isHidden.trim());
}
if (level + 2 === opts.verticalDepth) {
var _tr = document.createElement('tr');
_tr.setAttribute('class', 'verticalNodes' + isHidden);
_tr.innerHTML = '<td></td>';
_tr.firstChild.appendChild(nodeLayer);
nodeWrapper.appendChild(_tr);
} else {
nodeWrapper.appendChild(nodeLayer);
}
} else {
nodeLayer = document.createElement('tr');
nodeLayer.setAttribute('class', 'nodes' + isHidden);
nodeWrapper.appendChild(lineLayer);
nodeWrapper.appendChild(nodeLayer);
}
// recurse through children nodes
childNodes.forEach(function (child) {
var nodeCell = void 0;
if (isVerticalLayer) {
nodeCell = document.createElement('li');
} else {
nodeCell = document.createElement('td');
nodeCell.setAttribute('colspan', 2);
}
nodeLayer.appendChild(nodeCell);
that.buildHierarchy(nodeCell, child, level + 1, callback);
});
}
}
}, {
key: '_clickChart',
value: function _clickChart(event) {
var closestNode = this._closest(event.target, function (el) {
return el.classList && el.classList.contains('node');
});
if (!closestNode && this.chart.querySelector('.node.focused')) {
this.chart.querySelector('.node.focused').classList.remove('focused');
}
}
}, {
key: '_clickExportButton',
value: function _clickExportButton() {
var opts = this.options,
chartContainer = this.chartContainer,
mask = chartContainer.querySelector(':scope > .mask'),
sourceChart = chartContainer.querySelector('.orgchart:not(.hidden)'),
flag = opts.direction === 'l2r' || opts.direction === 'r2l';
if (!mask) {
mask = document.createElement('div');
mask.setAttribute('class', 'mask');
mask.innerHTML = '<i class="fa fa-circle-o-notch fa-spin spinner"></i>';
chartContainer.appendChild(mask);
} else {
mask.classList.remove('hidden');
}
chartContainer.classList.add('canvasContainer');
window.html2canvas(sourceChart, {
'width': flag ? sourceChart.clientHeight : sourceChart.clientWidth,
'height': flag ? sourceChart.clientWidth : sourceChart.clientHeight,
'onclone': function onclone(cloneDoc) {
var canvasContainer = cloneDoc.querySelector('.canvasContainer');
canvasContainer.style.overflow = 'visible';
canvasContainer.querySelector('.orgchart:not(.hidden)').transform = '';
}
}).then(function (canvas) {
var downloadBtn = chartContainer.querySelector('.oc-download-btn');
chartContainer.querySelector('.mask').classList.add('hidden');
downloadBtn.setAttribute('href', canvas.toDataURL());
downloadBtn.click();
}).catch(function (err) {
console.error('Failed to export the curent orgchart!', err);
}).finally(function () {
chartContainer.classList.remove('canvasContainer');
});
}
}, {
key: '_loopChart',
value: function _loopChart(chart) {
var _this11 = this;
var subObj = { 'id': chart.querySelector('.node').id };
if (chart.children[3]) {
Array.from(chart.children[3].children).forEach(function (el) {
if (!subObj.children) {
subObj.children = [];
}
subObj.children.push(_this11._loopChart(el.firstChild));
});
}
return subObj;
}
}, {
key: '_loopChartDataset',
value: function _loopChartDataset(chart) {
var _this12 = this;
var _subObj = JSON.parse(chart.querySelector('.node').dataset.source);
if (chart.children[3]) {
Array.from(chart.children[3].children).forEach(function (el) {
if (!_subObj.children) {
_subObj.children = [];
}
_subObj.children.push(_this12._loopChartDataset(el.firstChild));
});
}
return _subObj;
}
}, {
key: 'getChartJSON',
value: function getChartJSON() {
if (!this.chart.querySelector('.node').id) {
return 'Error: Nodes of orghcart to be exported must have id attribute!';
}
return this._loopChartDataset(this.chart.querySelector('table'));
}
}, {
key: 'getHierarchy',
value: function getHierarchy() {
if (!this.chart.querySelector('.node').id) {
return 'Error: Nodes of orghcart to be exported must have id attribute!';
}
return this._loopChart(this.chart.querySelector('table'));
}
}, {
key: '_onPanStart',
value: function _onPanStart(event) {
var chart = event.currentTarget;
if (this._closest(event.target, function (el) {
return el.classList && el.classList.contains('node');
}) || event.touches && event.touches.length > 1) {
chart.dataset.panning = false;
return;
}
chart.style.cursor = 'move';
chart.dataset.panning = true;
var lastX = 0,
lastY = 0,
lastTf = window.getComputedStyle(chart).transform;
if (lastTf !== 'none') {
var temp = lastTf.split(',');
if (!lastTf.includes('3d')) {
lastX = Number.parseInt(temp[4], 10);
lastY = Number.parseInt(temp[5], 10);
} else {
lastX = Number.parseInt(temp[12], 10);
lastY = Number.parseInt(temp[13], 10);
}
}
var startX = 0,
startY = 0;
if (!event.targetTouches) {
// pan on desktop
startX = event.pageX - lastX;
startY = event.pageY - lastY;
} else if (event.targetTouches.length === 1) {
// pan on mobile device
startX = event.targetTouches[0].pageX - lastX;
startY = event.targetTouches[0].pageY - lastY;
} else if (event.targetTouches.length > 1) {
return;
}
chart.dataset.panStart = JSON.stringify({ 'startX': startX, 'startY': startY });
chart.addEventListener('mousemove', this._onPanning.bind(this));
chart.addEventListener('touchmove', this._onPanning.bind(this));
}
}, {
key: '_onPanning',
value: function _onPanning(event) {
var chart = event.currentTarget;
if (chart.dataset.panning === 'false') {
return;
}
var newX = 0,
newY = 0,
panStart = JSON.parse(chart.dataset.panStart),
startX = panStart.startX,
startY = panStart.startY;
if (!event.targetTouches) {
// pand on desktop
newX = event.pageX - startX;
newY = event.pageY - startY;
} else if (event.targetTouches.length === 1) {
// pan on mobile device
newX = event.targetTouches[0].pageX - startX;
newY = event.targetTouches[0].pageY - startY;
} else if (event.targetTouches.length > 1) {
return;
}
var lastTf = window.getComputedStyle(chart).transform;
if (lastTf === 'none') {
if (!lastTf.includes('3d')) {
chart.style.transform = 'matrix(1, 0, 0, 1, ' + newX + ', ' + newY + ')';
} else {
chart.style.transform = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ' + newX + ', ' + newY + ', 0, 1)';
}
} else {
var matrix = lastTf.split(',');
if (!lastTf.includes('3d')) {
matrix[4] = newX;
matrix[5] = newY + ')';
} else {
matrix[12] = newX;
matrix[13] = newY;
}
chart.style.transform = matrix.join(',');
}
}
}, {
key: '_onPanEnd',
value: function _onPanEnd(event) {
var chart = this.chart;
if (chart.dataset.panning === 'true') {
chart.dataset.panning = false;
chart.style.cursor = 'default';
document.body.removeEventListener('mousemove', this._onPanning);
document.body.removeEventListener('touchmove', this._onPanning);
}
}
}, {
key: '_setChartScale',
value: function _setChartScale(chart, newScale) {
var lastTf = window.getComputedStyle(chart).transform;
if (lastTf === 'none') {
chart.style.transform = 'scale(' + newScale + ',' + newScale + ')';
} else {
var matrix = lastTf.split(',');
if (!lastTf.includes('3d')) {
matrix[0] = 'matrix(' + newScale;
matrix[3] = newScale;
chart.style.transform = lastTf + ' scale(' + newScale + ',' + newScale + ')';
} else {
chart.style.transform = lastTf + ' scale3d(' + newScale + ',' + newScale + ', 1)';
}
}
chart.dataset.scale = newScale;
}
}, {
key: '_onWheeling',
value: function _onWheeling(event) {
event.preventDefault();
var newScale = event.deltaY > 0 ? 0.8 : 1.2;
this._setChartScale(this.chart, newScale);
}
}, {
key: '_getPinchDist',
value: function _getPinchDist(event) {
return Math.sqrt((event.touches[0].clientX - event.touches[1].clientX) * (event.touches[0].clientX - event.touches[1].clientX) + (event.touches[0].clientY - event.touches[1].clientY) * (event.touches[0].clientY - event.touches[1].clientY));
}
}, {
key: '_onTouchStart',
value: function _onTouchStart(event) {
var chart = this.chart;
if (event.touches && event.touches.length === 2) {
var dist = this._getPinchDist(event);
chart.dataset.pinching = true;
chart.dataset.pinchDistStart = dist;
}
}
}, {
key: '_onTouchMove',
value: function _onTouchMove(event) {
var chart = this.chart;
if (chart.dataset.pinching) {
var dist = this._getPinchDist(event);
chart.dataset.pinchDistEnd = dist;
}
}
}, {
key: '_onTouchEnd',
value: function _onTouchEnd(event) {
var chart = this.chart;
if (chart.dataset.pinching) {
chart.dataset.pinching = false;
var diff = chart.dataset.pinchDistEnd - chart.dataset.pinchDistStart;
if (diff > 0) {
this._setChartScale(chart, 1);
} else if (diff < 0) {
this._setChartScale(chart, -1);
}
}
}
}, {
key: 'name',
get: function get$$1() {
return this._name;
}
}]);
return OrgChart;
}();
/**
* Removes all key-value entries from the list cache.
*
* @private
* @name clear
* @memberOf ListCache
*/
function listCacheClear() {
this.__data__ = [];
this.size = 0;
}
/**
* Performs a
* [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
* comparison between two values to determine if they are equivalent.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to compare.
* @param {*} other The other value to compare.
* @returns {boolean} Returns `true` if the values are equivalent, else `false`.
* @example
*
* var object = { 'a': 1 };
* var other = { 'a': 1 };
*
* _.eq(object, object);
* // => true
*
* _.eq(object, other);
* // => false
*
* _.eq('a', 'a');
* // => true
*
* _.eq('a', Object('a'));
* // => false
*
* _.eq(NaN, NaN);
* // => true
*/
function eq(value, other) {
return value === other || (value !== value && other !== other);
}
/**
* Gets the index at which the `key` is found in `array` of key-value pairs.
*
* @private
* @param {Array} array The array to inspect.
* @param {*} key The key to search for.
* @returns {number} Returns the index of the matched value, else `-1`.
*/
function assocIndexOf(array, key) {
var length = array.length;
while (length--) {
if (eq(array[length][0], key)) {
return length;
}
}
return -1;
}
/** Used for built-in method references. */
var arrayProto = Array.prototype;
/** Built-in value references. */
var splice = arrayProto.splice;
/**
* Removes `key` and its value from the list cache.
*
* @private
* @name delete
* @memberOf ListCache
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function listCacheDelete(key) {
var data = this.__data__,
index = assocIndexOf(data, key);
if (index < 0) {
return false;
}
var lastIndex = data.length - 1;
if (index == lastIndex) {
data.pop();
} else {
splice.call(data, index, 1);
}
--this.size;
return true;
}
/**
* Gets the list cache value for `key`.
*
* @private
* @name get
* @memberOf ListCache
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function listCacheGet(key) {
var data = this.__data__,
index = assocIndexOf(data, key);
return index < 0 ? undefined : data[index][1];
}
/**
* Checks if a list cache value for `key` exists.
*
* @private
* @name has
* @memberOf ListCache
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function listCacheHas(key) {
return assocIndexOf(this.__data__, key) > -1;
}
/**
* Sets the list cache `key` to `value`.
*
* @private
* @name set
* @memberOf ListCache
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the list cache instance.
*/
function listCacheSet(key, value) {
var data = this.__data__,
index = assocIndexOf(data, key);
if (index < 0) {
++this.size;
data.push([key, value]);
} else {
data[index][1] = value;
}
return this;
}
/**
* Creates an list cache object.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function ListCache(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
// Add methods to `ListCache`.
ListCache.prototype.clear = listCacheClear;
ListCache.prototype['delete'] = listCacheDelete;
ListCache.prototype.get = listCacheGet;
ListCache.prototype.has = listCacheHas;
ListCache.prototype.set = listCacheSet;
/**
* Removes all key-value entries from the stack.
*
* @private
* @name clear
* @memberOf Stack
*/
function stackClear() {
this.__data__ = new ListCache;
this.size = 0;
}
/**
* Removes `key` and its value from the stack.
*
* @private
* @name delete
* @memberOf Stack
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function stackDelete(key) {
var data = this.__data__,
result = data['delete'](key);
this.size = data.size;
return result;
}
/**
* Gets the stack value for `key`.
*
* @private
* @name get
* @memberOf Stack
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function stackGet(key) {
return this.__data__.get(key);
}
/**
* Checks if a stack value for `key` exists.
*
* @private
* @name has
* @memberOf Stack
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function stackHas(key) {
return this.__data__.has(key);
}
/** Detect free variable `global` from Node.js. */
var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
/** Detect free variable `self`. */
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
/** Used as a reference to the global object. */
var root = freeGlobal || freeSelf || Function('return this')();
/** Built-in value references. */
var Symbol$1 = root.Symbol;
/** Used for built-in method references. */
var objectProto$1 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var nativeObjectToString = objectProto$1.toString;
/** Built-in value references. */
var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
/**
* A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
*
* @private
* @param {*} value The value to query.
* @returns {string} Returns the raw `toStringTag`.
*/
function getRawTag(value) {
var isOwn = hasOwnProperty$1.call(value, symToStringTag$1),
tag = value[symToStringTag$1];
try {
value[symToStringTag$1] = undefined;
var unmasked = true;
} catch (e) {}
var result = nativeObjectToString.call(value);
if (unmasked) {
if (isOwn) {
value[symToStringTag$1] = tag;
} else {
delete value[symToStringTag$1];
}
}
return result;
}
/** Used for built-in method references. */
var objectProto$2 = Object.prototype;
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var nativeObjectToString$1 = objectProto$2.toString;
/**
* Converts `value` to a string using `Object.prototype.toString`.
*
* @private
* @param {*} value The value to convert.
* @returns {string} Returns the converted string.
*/
function objectToString(value) {
return nativeObjectToString$1.call(value);
}
/** `Object#toString` result references. */
var nullTag = '[object Null]';
var undefinedTag = '[object Undefined]';
/** Built-in value references. */
var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
/**
* The base implementation of `getTag` without fallbacks for buggy environments.
*
* @private
* @param {*} value The value to query.
* @returns {string} Returns the `toStringTag`.
*/
function baseGetTag(value) {
if (value == null) {
return value === undefined ? undefinedTag : nullTag;
}
return (symToStringTag && symToStringTag in Object(value))
? getRawTag(value)
: objectToString(value);
}
/**
* Checks if `value` is the
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
* @example
*
* _.isObject({});
* // => true
*
* _.isObject([1, 2, 3]);
* // => true
*
* _.isObject(_.noop);
* // => true
*
* _.isObject(null);
* // => false
*/
function isObject(value) {
var type = typeof value;
return value != null && (type == 'object' || type == 'function');
}
/** `Object#toString` result references. */
var asyncTag = '[object AsyncFunction]';
var funcTag = '[object Function]';
var genTag = '[object GeneratorFunction]';
var proxyTag = '[object Proxy]';
/**
* Checks if `value` is classified as a `Function` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a function, else `false`.
* @example
*
* _.isFunction(_);
* // => true
*
* _.isFunction(/abc/);
* // => false
*/
function isFunction(value) {
if (!isObject(value)) {
return false;
}
// The use of `Object#toString` avoids issues with the `typeof` operator
// in Safari 9 which returns 'object' for typed arrays and other constructors.
var tag = baseGetTag(value);
return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
}
/** Used to detect overreaching core-js shims. */
var coreJsData = root['__core-js_shared__'];
/** Used to detect methods masquerading as native. */
var maskSrcKey = (function() {
var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
return uid ? ('Symbol(src)_1.' + uid) : '';
}());
/**
* Checks if `func` has its source masked.
*
* @private
* @param {Function} func The function to check.
* @returns {boolean} Returns `true` if `func` is masked, else `false`.
*/
function isMasked(func) {
return !!maskSrcKey && (maskSrcKey in func);
}
/** Used for built-in method references. */
var funcProto$1 = Function.prototype;
/** Used to resolve the decompiled source of functions. */
var funcToString$1 = funcProto$1.toString;
/**
* Converts `func` to its source code.
*
* @private
* @param {Function} func The function to convert.
* @returns {string} Returns the source code.
*/
function toSource(func) {
if (func != null) {
try {
return funcToString$1.call(func);
} catch (e) {}
try {
return (func + '');
} catch (e) {}
}
return '';
}
/**
* Used to match `RegExp`
* [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
*/
var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
/** Used to detect host constructors (Safari). */
var reIsHostCtor = /^\[object .+?Constructor\]$/;
/** Used for built-in method references. */
var funcProto = Function.prototype;
var objectProto = Object.prototype;
/** Used to resolve the decompiled source of functions. */
var funcToString = funcProto.toString;
/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;
/** Used to detect if a method is native. */
var reIsNative = RegExp('^' +
funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&')
.replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
);
/**
* The base implementation of `_.isNative` without bad shim checks.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a native function,
* else `false`.
*/
function baseIsNative(value) {
if (!isObject(value) || isMasked(value)) {
return false;
}
var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
return pattern.test(toSource(value));
}
/**
* Gets the value at `key` of `object`.
*
* @private
* @param {Object} [object] The object to query.
* @param {string} key The key of the property to get.
* @returns {*} Returns the property value.
*/
function getValue(object, key) {
return object == null ? undefined : object[key];
}
/**
* Gets the native function at `key` of `object`.
*
* @private
* @param {Object} object The object to query.
* @param {string} key The key of the method to get.
* @returns {*} Returns the function if it's native, else `undefined`.
*/
function getNative(object, key) {
var value = getValue(object, key);
return baseIsNative(value) ? value : undefined;
}
/* Built-in method references that are verified to be native. */
var Map = getNative(root, 'Map');
/* Built-in method references that are verified to be native. */
var nativeCreate = getNative(Object, 'create');
/**
* Removes all key-value entries from the hash.
*
* @private
* @name clear
* @memberOf Hash
*/
function hashClear() {
this.__data__ = nativeCreate ? nativeCreate(null) : {};
this.size = 0;
}
/**
* Removes `key` and its value from the hash.
*
* @private
* @name delete
* @memberOf Hash
* @param {Object} hash The hash to modify.
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function hashDelete(key) {
var result = this.has(key) && delete this.__data__[key];
this.size -= result ? 1 : 0;
return result;
}
/** Used to stand-in for `undefined` hash values. */
var HASH_UNDEFINED = '__lodash_hash_undefined__';
/** Used for built-in method references. */
var objectProto$3 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$2 = objectProto$3.hasOwnProperty;
/**
* Gets the hash value for `key`.
*
* @private
* @name get
* @memberOf Hash
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function hashGet(key) {
var data = this.__data__;
if (nativeCreate) {
var result = data[key];
return result === HASH_UNDEFINED ? undefined : result;
}
return hasOwnProperty$2.call(data, key) ? data[key] : undefined;
}
/** Used for built-in method references. */
var objectProto$4 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
/**
* Checks if a hash value for `key` exists.
*
* @private
* @name has
* @memberOf Hash
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function hashHas(key) {
var data = this.__data__;
return nativeCreate ? (data[key] !== undefined) : hasOwnProperty$3.call(data, key);
}
/** Used to stand-in for `undefined` hash values. */
var HASH_UNDEFINED$1 = '__lodash_hash_undefined__';
/**
* Sets the hash `key` to `value`.
*
* @private
* @name set
* @memberOf Hash
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the hash instance.
*/
function hashSet(key, value) {
var data = this.__data__;
this.size += this.has(key) ? 0 : 1;
data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED$1 : value;
return this;
}
/**
* Creates a hash object.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function Hash(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
// Add methods to `Hash`.
Hash.prototype.clear = hashClear;
Hash.prototype['delete'] = hashDelete;
Hash.prototype.get = hashGet;
Hash.prototype.has = hashHas;
Hash.prototype.set = hashSet;
/**
* Removes all key-value entries from the map.
*
* @private
* @name clear
* @memberOf MapCache
*/
function mapCacheClear() {
this.size = 0;
this.__data__ = {
'hash': new Hash,
'map': new (Map || ListCache),
'string': new Hash
};
}
/**
* Checks if `value` is suitable for use as unique object key.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is suitable, else `false`.
*/
function isKeyable(value) {
var type = typeof value;
return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
? (value !== '__proto__')
: (value === null);
}
/**
* Gets the data for `map`.
*
* @private
* @param {Object} map The map to query.
* @param {string} key The reference key.
* @returns {*} Returns the map data.
*/
function getMapData(map, key) {
var data = map.__data__;
return isKeyable(key)
? data[typeof key == 'string' ? 'string' : 'hash']
: data.map;
}
/**
* Removes `key` and its value from the map.
*
* @private
* @name delete
* @memberOf MapCache
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function mapCacheDelete(key) {
var result = getMapData(this, key)['delete'](key);
this.size -= result ? 1 : 0;
return result;
}
/**
* Gets the map value for `key`.
*
* @private
* @name get
* @memberOf MapCache
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function mapCacheGet(key) {
return getMapData(this, key).get(key);
}
/**
* Checks if a map value for `key` exists.
*
* @private
* @name has
* @memberOf MapCache
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function mapCacheHas(key) {
return getMapData(this, key).has(key);
}
/**
* Sets the map `key` to `value`.
*
* @private
* @name set
* @memberOf MapCache
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the map cache instance.
*/
function mapCacheSet(key, value) {
var data = getMapData(this, key),
size = data.size;
data.set(key, value);
this.size += data.size == size ? 0 : 1;
return this;
}
/**
* Creates a map cache object to store key-value pairs.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function MapCache(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
// Add methods to `MapCache`.
MapCache.prototype.clear = mapCacheClear;
MapCache.prototype['delete'] = mapCacheDelete;
MapCache.prototype.get = mapCacheGet;
MapCache.prototype.has = mapCacheHas;
MapCache.prototype.set = mapCacheSet;
/** Used as the size to enable large array optimizations. */
var LARGE_ARRAY_SIZE = 200;
/**
* Sets the stack `key` to `value`.
*
* @private
* @name set
* @memberOf Stack
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the stack cache instance.
*/
function stackSet(key, value) {
var data = this.__data__;
if (data instanceof ListCache) {
var pairs = data.__data__;
if (!Map || (pairs.length < LARGE_ARRAY_SIZE - 1)) {
pairs.push([key, value]);
this.size = ++data.size;
return this;
}
data = this.__data__ = new MapCache(pairs);
}
data.set(key, value);
this.size = data.size;
return this;
}
/**
* Creates a stack cache object to store key-value pairs.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function Stack(entries) {
var data = this.__data__ = new ListCache(entries);
this.size = data.size;
}
// Add methods to `Stack`.
Stack.prototype.clear = stackClear;
Stack.prototype['delete'] = stackDelete;
Stack.prototype.get = stackGet;
Stack.prototype.has = stackHas;
Stack.prototype.set = stackSet;
var defineProperty$1 = (function() {
try {
var func = getNative(Object, 'defineProperty');
func({}, '', {});
return func;
} catch (e) {}
}());
/**
* The base implementation of `assignValue` and `assignMergeValue` without
* value checks.
*
* @private
* @param {Object} object The object to modify.
* @param {string} key The key of the property to assign.
* @param {*} value The value to assign.
*/
function baseAssignValue(object, key, value) {
if (key == '__proto__' && defineProperty$1) {
defineProperty$1(object, key, {
'configurable': true,
'enumerable': true,
'value': value,
'writable': true
});
} else {
object[key] = value;
}
}
/**
* This function is like `assignValue` except that it doesn't assign
* `undefined` values.
*
* @private
* @param {Object} object The object to modify.
* @param {string} key The key of the property to assign.
* @param {*} value The value to assign.
*/
function assignMergeValue(object, key, value) {
if ((value !== undefined && !eq(object[key], value)) ||
(value === undefined && !(key in object))) {
baseAssignValue(object, key, value);
}
}
/**
* Creates a base function for methods like `_.forIn` and `_.forOwn`.
*
* @private
* @param {boolean} [fromRight] Specify iterating from right to left.
* @returns {Function} Returns the new base function.
*/
function createBaseFor(fromRight) {
return function(object, iteratee, keysFunc) {
var index = -1,
iterable = Object(object),
props = keysFunc(object),
length = props.length;
while (length--) {
var key = props[fromRight ? length : ++index];
if (iteratee(iterable[key], key, iterable) === false) {
break;
}
}
return object;
};
}
/**
* The base implementation of `baseForOwn` which iterates over `object`
* properties returned by `keysFunc` and invokes `iteratee` for each property.
* Iteratee functions may exit iteration early by explicitly returning `false`.
*
* @private
* @param {Object} object The object to iterate over.
* @param {Function} iteratee The function invoked per iteration.
* @param {Function} keysFunc The function to get the keys of `object`.
* @returns {Object} Returns `object`.
*/
var baseFor = createBaseFor();
/** Detect free variable `exports`. */
var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;
/** Detect free variable `module`. */
var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;
/** Detect the popular CommonJS extension `module.exports`. */
var moduleExports = freeModule && freeModule.exports === freeExports;
/** Built-in value references. */
var Buffer = moduleExports ? root.Buffer : undefined;
var allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined;
/**
* Creates a clone of `buffer`.
*
* @private
* @param {Buffer} buffer The buffer to clone.
* @param {boolean} [isDeep] Specify a deep clone.
* @returns {Buffer} Returns the cloned buffer.
*/
function cloneBuffer(buffer, isDeep) {
if (isDeep) {
return buffer.slice();
}
var length = buffer.length,
result = allocUnsafe ? allocUnsafe(length) : new buffer.constructor(length);
buffer.copy(result);
return result;
}
/** Built-in value references. */
var Uint8Array = root.Uint8Array;
/**
* Creates a clone of `arrayBuffer`.
*
* @private
* @param {ArrayBuffer} arrayBuffer The array buffer to clone.
* @returns {ArrayBuffer} Returns the cloned array buffer.
*/
function cloneArrayBuffer(arrayBuffer) {
var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
new Uint8Array(result).set(new Uint8Array(arrayBuffer));
return result;
}
/**
* Creates a clone of `typedArray`.
*
* @private
* @param {Object} typedArray The typed array to clone.
* @param {boolean} [isDeep] Specify a deep clone.
* @returns {Object} Returns the cloned typed array.
*/
function cloneTypedArray(typedArray, isDeep) {
var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;
return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
}
/**
* Copies the values of `source` to `array`.
*
* @private
* @param {Array} source The array to copy values from.
* @param {Array} [array=[]] The array to copy values to.
* @returns {Array} Returns `array`.
*/
function copyArray(source, array) {
var index = -1,
length = source.length;
array || (array = Array(length));
while (++index < length) {
array[index] = source[index];
}
return array;
}
/** Built-in value references. */
var objectCreate = Object.create;
/**
* The base implementation of `_.create` without support for assigning
* properties to the created object.
*
* @private
* @param {Object} proto The object to inherit from.
* @returns {Object} Returns the new object.
*/
var baseCreate = (function() {
function object() {}
return function(proto) {
if (!isObject(proto)) {
return {};
}
if (objectCreate) {
return objectCreate(proto);
}
object.prototype = proto;
var result = new object;
object.prototype = undefined;
return result;
};
}());
/**
* Creates a unary function that invokes `func` with its argument transformed.
*
* @private
* @param {Function} func The function to wrap.
* @param {Function} transform The argument transform.
* @returns {Function} Returns the new function.
*/
function overArg(func, transform) {
return function(arg) {
return func(transform(arg));
};
}
/** Built-in value references. */
var getPrototype = overArg(Object.getPrototypeOf, Object);
/** Used for built-in method references. */
var objectProto$5 = Object.prototype;
/**
* Checks if `value` is likely a prototype object.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
*/
function isPrototype(value) {
var Ctor = value && value.constructor,
proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto$5;
return value === proto;
}
/**
* Initializes an object clone.
*
* @private
* @param {Object} object The object to clone.
* @returns {Object} Returns the initialized clone.
*/
function initCloneObject(object) {
return (typeof object.constructor == 'function' && !isPrototype(object))
? baseCreate(getPrototype(object))
: {};
}
/**
* Checks if `value` is object-like. A value is object-like if it's not `null`
* and has a `typeof` result of "object".
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
* @example
*
* _.isObjectLike({});
* // => true
*
* _.isObjectLike([1, 2, 3]);
* // => true
*
* _.isObjectLike(_.noop);
* // => false
*
* _.isObjectLike(null);
* // => false
*/
function isObjectLike(value) {
return value != null && typeof value == 'object';
}
/** `Object#toString` result references. */
var argsTag = '[object Arguments]';
/**
* The base implementation of `_.isArguments`.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an `arguments` object,
*/
function baseIsArguments(value) {
return isObjectLike(value) && baseGetTag(value) == argsTag;
}
/** Used for built-in method references. */
var objectProto$6 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$4 = objectProto$6.hasOwnProperty;
/** Built-in value references. */
var propertyIsEnumerable = objectProto$6.propertyIsEnumerable;
/**
* Checks if `value` is likely an `arguments` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an `arguments` object,
* else `false`.
* @example
*
* _.isArguments(function() { return arguments; }());
* // => true
*
* _.isArguments([1, 2, 3]);
* // => false
*/
var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) {
return isObjectLike(value) && hasOwnProperty$4.call(value, 'callee') &&
!propertyIsEnumerable.call(value, 'callee');
};
/**
* Checks if `value` is classified as an `Array` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an array, else `false`.
* @example
*
* _.isArray([1, 2, 3]);
* // => true
*
* _.isArray(document.body.children);
* // => false
*
* _.isArray('abc');
* // => false
*
* _.isArray(_.noop);
* // => false
*/
var isArray = Array.isArray;
/** Used as references for various `Number` constants. */
var MAX_SAFE_INTEGER = 9007199254740991;
/**
* Checks if `value` is a valid array-like length.
*
* **Note:** This method is loosely based on
* [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
* @example
*
* _.isLength(3);
* // => true
*
* _.isLength(Number.MIN_VALUE);
* // => false
*
* _.isLength(Infinity);
* // => false
*
* _.isLength('3');
* // => false
*/
function isLength(value) {
return typeof value == 'number' &&
value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
}
/**
* Checks if `value` is array-like. A value is considered array-like if it's
* not a function and has a `value.length` that's an integer greater than or
* equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is array-like, else `false`.
* @example
*
* _.isArrayLike([1, 2, 3]);
* // => true
*
* _.isArrayLike(document.body.children);
* // => true
*
* _.isArrayLike('abc');
* // => true
*
* _.isArrayLike(_.noop);
* // => false
*/
function isArrayLike(value) {
return value != null && isLength(value.length) && !isFunction(value);
}
/**
* This method is like `_.isArrayLike` except that it also checks if `value`
* is an object.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an array-like object,
* else `false`.
* @example
*
* _.isArrayLikeObject([1, 2, 3]);
* // => true
*
* _.isArrayLikeObject(document.body.children);
* // => true
*
* _.isArrayLikeObject('abc');
* // => false
*
* _.isArrayLikeObject(_.noop);
* // => false
*/
function isArrayLikeObject(value) {
return isObjectLike(value) && isArrayLike(value);
}
/**
* This method returns `false`.
*
* @static
* @memberOf _
* @since 4.13.0
* @category Util
* @returns {boolean} Returns `false`.
* @example
*
* _.times(2, _.stubFalse);
* // => [false, false]
*/
function stubFalse() {
return false;
}
/** Detect free variable `exports`. */
var freeExports$1 = typeof exports == 'object' && exports && !exports.nodeType && exports;
/** Detect free variable `module`. */
var freeModule$1 = freeExports$1 && typeof module == 'object' && module && !module.nodeType && module;
/** Detect the popular CommonJS extension `module.exports`. */
var moduleExports$1 = freeModule$1 && freeModule$1.exports === freeExports$1;
/** Built-in value references. */
var Buffer$1 = moduleExports$1 ? root.Buffer : undefined;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeIsBuffer = Buffer$1 ? Buffer$1.isBuffer : undefined;
/**
* Checks if `value` is a buffer.
*
* @static
* @memberOf _
* @since 4.3.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
* @example
*
* _.isBuffer(new Buffer(2));
* // => true
*
* _.isBuffer(new Uint8Array(2));
* // => false
*/
var isBuffer = nativeIsBuffer || stubFalse;
/** `Object#toString` result references. */
var objectTag = '[object Object]';
/** Used for built-in method references. */
var funcProto$2 = Function.prototype;
var objectProto$7 = Object.prototype;
/** Used to resolve the decompiled source of functions. */
var funcToString$2 = funcProto$2.toString;
/** Used to check objects for own properties. */
var hasOwnProperty$5 = objectProto$7.hasOwnProperty;
/** Used to infer the `Object` constructor. */
var objectCtorString = funcToString$2.call(Object);
/**
* Checks if `value` is a plain object, that is, an object created by the
* `Object` constructor or one with a `[[Prototype]]` of `null`.
*
* @static
* @memberOf _
* @since 0.8.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a plain object, else `false`.
* @example
*
* function Foo() {
* this.a = 1;
* }
*
* _.isPlainObject(new Foo);
* // => false
*
* _.isPlainObject([1, 2, 3]);
* // => false
*
* _.isPlainObject({ 'x': 0, 'y': 0 });
* // => true
*
* _.isPlainObject(Object.create(null));
* // => true
*/
function isPlainObject(value) {
if (!isObjectLike(value) || baseGetTag(value) != objectTag) {
return false;
}
var proto = getPrototype(value);
if (proto === null) {
return true;
}
var Ctor = hasOwnProperty$5.call(proto, 'constructor') && proto.constructor;
return typeof Ctor == 'function' && Ctor instanceof Ctor &&
funcToString$2.call(Ctor) == objectCtorString;
}
/** `Object#toString` result references. */
var argsTag$1 = '[object Arguments]';
var arrayTag = '[object Array]';
var boolTag = '[object Boolean]';
var dateTag = '[object Date]';
var errorTag = '[object Error]';
var funcTag$1 = '[object Function]';
var mapTag = '[object Map]';
var numberTag = '[object Number]';
var objectTag$1 = '[object Object]';
var regexpTag = '[object RegExp]';
var setTag = '[object Set]';
var stringTag = '[object String]';
var weakMapTag = '[object WeakMap]';
var arrayBufferTag = '[object ArrayBuffer]';
var dataViewTag = '[object DataView]';
var float32Tag = '[object Float32Array]';
var float64Tag = '[object Float64Array]';
var int8Tag = '[object Int8Array]';
var int16Tag = '[object Int16Array]';
var int32Tag = '[object Int32Array]';
var uint8Tag = '[object Uint8Array]';
var uint8ClampedTag = '[object Uint8ClampedArray]';
var uint16Tag = '[object Uint16Array]';
var uint32Tag = '[object Uint32Array]';
/** Used to identify `toStringTag` values of typed arrays. */
var typedArrayTags = {};
typedArrayTags[float32Tag] = typedArrayTags[float64Tag] =
typedArrayTags[int8Tag] = typedArrayTags[int16Tag] =
typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] =
typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] =
typedArrayTags[uint32Tag] = true;
typedArrayTags[argsTag$1] = typedArrayTags[arrayTag] =
typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] =
typedArrayTags[dataViewTag] = typedArrayTags[dateTag] =
typedArrayTags[errorTag] = typedArrayTags[funcTag$1] =
typedArrayTags[mapTag] = typedArrayTags[numberTag] =
typedArrayTags[objectTag$1] = typedArrayTags[regexpTag] =
typedArrayTags[setTag] = typedArrayTags[stringTag] =
typedArrayTags[weakMapTag] = false;
/**
* The base implementation of `_.isTypedArray` without Node.js optimizations.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
*/
function baseIsTypedArray(value) {
return isObjectLike(value) &&
isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
}
/**
* The base implementation of `_.unary` without support for storing metadata.
*
* @private
* @param {Function} func The function to cap arguments for.
* @returns {Function} Returns the new capped function.
*/
function baseUnary(func) {
return function(value) {
return func(value);
};
}
/** Detect free variable `exports`. */
var freeExports$2 = typeof exports == 'object' && exports && !exports.nodeType && exports;
/** Detect free variable `module`. */
var freeModule$2 = freeExports$2 && typeof module == 'object' && module && !module.nodeType && module;
/** Detect the popular CommonJS extension `module.exports`. */
var moduleExports$2 = freeModule$2 && freeModule$2.exports === freeExports$2;
/** Detect free variable `process` from Node.js. */
var freeProcess = moduleExports$2 && freeGlobal.process;
/** Used to access faster Node.js helpers. */
var nodeUtil = (function() {
try {
return freeProcess && freeProcess.binding && freeProcess.binding('util');
} catch (e) {}
}());
/* Node.js helper references. */
var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
/**
* Checks if `value` is classified as a typed array.
*
* @static
* @memberOf _
* @since 3.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
* @example
*
* _.isTypedArray(new Uint8Array);
* // => true
*
* _.isTypedArray([]);
* // => false
*/
var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
/** Used for built-in method references. */
var objectProto$8 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$6 = objectProto$8.hasOwnProperty;
/**
* Assigns `value` to `key` of `object` if the existing value is not equivalent
* using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
* for equality comparisons.
*
* @private
* @param {Object} object The object to modify.
* @param {string} key The key of the property to assign.
* @param {*} value The value to assign.
*/
function assignValue(object, key, value) {
var objValue = object[key];
if (!(hasOwnProperty$6.call(object, key) && eq(objValue, value)) ||
(value === undefined && !(key in object))) {
baseAssignValue(object, key, value);
}
}
/**
* Copies properties of `source` to `object`.
*
* @private
* @param {Object} source The object to copy properties from.
* @param {Array} props The property identifiers to copy.
* @param {Object} [object={}] The object to copy properties to.
* @param {Function} [customizer] The function to customize copied values.
* @returns {Object} Returns `object`.
*/
function copyObject(source, props, object, customizer) {
var isNew = !object;
object || (object = {});
var index = -1,
length = props.length;
while (++index < length) {
var key = props[index];
var newValue = customizer
? customizer(object[key], source[key], key, object, source)
: undefined;
if (newValue === undefined) {
newValue = source[key];
}
if (isNew) {
baseAssignValue(object, key, newValue);
} else {
assignValue(object, key, newValue);
}
}
return object;
}
/**
* The base implementation of `_.times` without support for iteratee shorthands
* or max array length checks.
*
* @private
* @param {number} n The number of times to invoke `iteratee`.
* @param {Function} iteratee The function invoked per iteration.
* @returns {Array} Returns the array of results.
*/
function baseTimes(n, iteratee) {
var index = -1,
result = Array(n);
while (++index < n) {
result[index] = iteratee(index);
}
return result;
}
/** Used as references for various `Number` constants. */
var MAX_SAFE_INTEGER$1 = 9007199254740991;
/** Used to detect unsigned integer values. */
var reIsUint = /^(?:0|[1-9]\d*)$/;
/**
* Checks if `value` is a valid array-like index.
*
* @private
* @param {*} value The value to check.
* @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
* @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
*/
function isIndex(value, length) {
length = length == null ? MAX_SAFE_INTEGER$1 : length;
return !!length &&
(typeof value == 'number' || reIsUint.test(value)) &&
(value > -1 && value % 1 == 0 && value < length);
}
/** Used for built-in method references. */
var objectProto$9 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$7 = objectProto$9.hasOwnProperty;
/**
* Creates an array of the enumerable property names of the array-like `value`.
*
* @private
* @param {*} value The value to query.
* @param {boolean} inherited Specify returning inherited property names.
* @returns {Array} Returns the array of property names.
*/
function arrayLikeKeys(value, inherited) {
var isArr = isArray(value),
isArg = !isArr && isArguments(value),
isBuff = !isArr && !isArg && isBuffer(value),
isType = !isArr && !isArg && !isBuff && isTypedArray(value),
skipIndexes = isArr || isArg || isBuff || isType,
result = skipIndexes ? baseTimes(value.length, String) : [],
length = result.length;
for (var key in value) {
if ((inherited || hasOwnProperty$7.call(value, key)) &&
!(skipIndexes && (
// Safari 9 has enumerable `arguments.length` in strict mode.
key == 'length' ||
// Node.js 0.10 has enumerable non-index properties on buffers.
(isBuff && (key == 'offset' || key == 'parent')) ||
// PhantomJS 2 has enumerable non-index properties on typed arrays.
(isType && (key == 'buffer' || key == 'byteLength' || key == 'byteOffset')) ||
// Skip index properties.
isIndex(key, length)
))) {
result.push(key);
}
}
return result;
}
/**
* This function is like
* [`Object.keys`](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
* except that it includes inherited enumerable properties.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names.
*/
function nativeKeysIn(object) {
var result = [];
if (object != null) {
for (var key in Object(object)) {
result.push(key);
}
}
return result;
}
/** Used for built-in method references. */
var objectProto$10 = Object.prototype;
/** Used to check objects for own properties. */
var hasOwnProperty$8 = objectProto$10.hasOwnProperty;
/**
* The base implementation of `_.keysIn` which doesn't treat sparse arrays as dense.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names.
*/
function baseKeysIn(object) {
if (!isObject(object)) {
return nativeKeysIn(object);
}
var isProto = isPrototype(object),
result = [];
for (var key in object) {
if (!(key == 'constructor' && (isProto || !hasOwnProperty$8.call(object, key)))) {
result.push(key);
}
}
return result;
}
/**
* Creates an array of the own and inherited enumerable property names of `object`.
*
* **Note:** Non-object values are coerced to objects.
*
* @static
* @memberOf _
* @since 3.0.0
* @category Object
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names.
* @example
*
* function Foo() {
* this.a = 1;
* this.b = 2;
* }
*
* Foo.prototype.c = 3;
*
* _.keysIn(new Foo);
* // => ['a', 'b', 'c'] (iteration order is not guaranteed)
*/
function keysIn(object) {
return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
}
/**
* Converts `value` to a plain object flattening inherited enumerable string
* keyed properties of `value` to own properties of the plain object.
*
* @static
* @memberOf _
* @since 3.0.0
* @category Lang
* @param {*} value The value to convert.
* @returns {Object} Returns the converted plain object.
* @example
*
* function Foo() {
* this.b = 2;
* }
*
* Foo.prototype.c = 3;
*
* _.assign({ 'a': 1 }, new Foo);
* // => { 'a': 1, 'b': 2 }
*
* _.assign({ 'a': 1 }, _.toPlainObject(new Foo));
* // => { 'a': 1, 'b': 2, 'c': 3 }
*/
function toPlainObject(value) {
return copyObject(value, keysIn(value));
}
/**
* A specialized version of `baseMerge` for arrays and objects which performs
* deep merges and tracks traversed objects enabling objects with circular
* references to be merged.
*
* @private
* @param {Object} object The destination object.
* @param {Object} source The source object.
* @param {string} key The key of the value to merge.
* @param {number} srcIndex The index of `source`.
* @param {Function} mergeFunc The function to merge values.
* @param {Function} [customizer] The function to customize assigned values.
* @param {Object} [stack] Tracks traversed source values and their merged
* counterparts.
*/
function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) {
var objValue = object[key],
srcValue = source[key],
stacked = stack.get(srcValue);
if (stacked) {
assignMergeValue(object, key, stacked);
return;
}
var newValue = customizer
? customizer(objValue, srcValue, (key + ''), object, source, stack)
: undefined;
var isCommon = newValue === undefined;
if (isCommon) {
var isArr = isArray(srcValue),
isBuff = !isArr && isBuffer(srcValue),
isTyped = !isArr && !isBuff && isTypedArray(srcValue);
newValue = srcValue;
if (isArr || isBuff || isTyped) {
if (isArray(objValue)) {
newValue = objValue;
}
else if (isArrayLikeObject(objValue)) {
newValue = copyArray(objValue);
}
else if (isBuff) {
isCommon = false;
newValue = cloneBuffer(srcValue, true);
}
else if (isTyped) {
isCommon = false;
newValue = cloneTypedArray(srcValue, true);
}
else {
newValue = [];
}
}
else if (isPlainObject(srcValue) || isArguments(srcValue)) {
newValue = objValue;
if (isArguments(objValue)) {
newValue = toPlainObject(objValue);
}
else if (!isObject(objValue) || (srcIndex && isFunction(objValue))) {
newValue = initCloneObject(srcValue);
}
}
else {
isCommon = false;
}
}
if (isCommon) {
// Recursively merge objects and arrays (susceptible to call stack limits).
stack.set(srcValue, newValue);
mergeFunc(newValue, srcValue, srcIndex, customizer, stack);
stack['delete'](srcValue);
}
assignMergeValue(object, key, newValue);
}
/**
* The base implementation of `_.merge` without support for multiple sources.
*
* @private
* @param {Object} object The destination object.
* @param {Object} source The source object.
* @param {number} srcIndex The index of `source`.
* @param {Function} [customizer] The function to customize merged values.
* @param {Object} [stack] Tracks traversed source values and their merged
* counterparts.
*/
function baseMerge(object, source, srcIndex, customizer, stack) {
if (object === source) {
return;
}
baseFor(source, function(srcValue, key) {
if (isObject(srcValue)) {
stack || (stack = new Stack);
baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
}
else {
var newValue = customizer
? customizer(object[key], srcValue, (key + ''), object, source, stack)
: undefined;
if (newValue === undefined) {
newValue = srcValue;
}
assignMergeValue(object, key, newValue);
}
}, keysIn);
}
/**
* This method returns the first argument it receives.
*
* @static
* @since 0.1.0
* @memberOf _
* @category Util
* @param {*} value Any value.
* @returns {*} Returns `value`.
* @example
*
* var object = { 'a': 1 };
*
* console.log(_.identity(object) === object);
* // => true
*/
function identity(value) {
return value;
}
/**
* A faster alternative to `Function#apply`, this function invokes `func`
* with the `this` binding of `thisArg` and the arguments of `args`.
*
* @private
* @param {Function} func The function to invoke.
* @param {*} thisArg The `this` binding of `func`.
* @param {Array} args The arguments to invoke `func` with.
* @returns {*} Returns the result of `func`.
*/
function apply(func, thisArg, args) {
switch (args.length) {
case 0: return func.call(thisArg);
case 1: return func.call(thisArg, args[0]);
case 2: return func.call(thisArg, args[0], args[1]);
case 3: return func.call(thisArg, args[0], args[1], args[2]);
}
return func.apply(thisArg, args);
}
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeMax = Math.max;
/**
* A specialized version of `baseRest` which transforms the rest array.
*
* @private
* @param {Function} func The function to apply a rest parameter to.
* @param {number} [start=func.length-1] The start position of the rest parameter.
* @param {Function} transform The rest array transform.
* @returns {Function} Returns the new function.
*/
function overRest(func, start, transform) {
start = nativeMax(start === undefined ? (func.length - 1) : start, 0);
return function() {
var args = arguments,
index = -1,
length = nativeMax(args.length - start, 0),
array = Array(length);
while (++index < length) {
array[index] = args[start + index];
}
index = -1;
var otherArgs = Array(start + 1);
while (++index < start) {
otherArgs[index] = args[index];
}
otherArgs[start] = transform(array);
return apply(func, this, otherArgs);
};
}
/**
* Creates a function that returns `value`.
*
* @static
* @memberOf _
* @since 2.4.0
* @category Util
* @param {*} value The value to return from the new function.
* @returns {Function} Returns the new constant function.
* @example
*
* var objects = _.times(2, _.constant({ 'a': 1 }));
*
* console.log(objects);
* // => [{ 'a': 1 }, { 'a': 1 }]
*
* console.log(objects[0] === objects[1]);
* // => true
*/
function constant(value) {
return function() {
return value;
};
}
/**
* The base implementation of `setToString` without support for hot loop shorting.
*
* @private
* @param {Function} func The function to modify.
* @param {Function} string The `toString` result.
* @returns {Function} Returns `func`.
*/
var baseSetToString = !defineProperty$1 ? identity : function(func, string) {
return defineProperty$1(func, 'toString', {
'configurable': true,
'enumerable': false,
'value': constant(string),
'writable': true
});
};
/** Used to detect hot functions by number of calls within a span of milliseconds. */
var HOT_COUNT = 800;
var HOT_SPAN = 16;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeNow = Date.now;
/**
* Creates a function that'll short out and invoke `identity` instead
* of `func` when it's called `HOT_COUNT` or more times in `HOT_SPAN`
* milliseconds.
*
* @private
* @param {Function} func The function to restrict.
* @returns {Function} Returns the new shortable function.
*/
function shortOut(func) {
var count = 0,
lastCalled = 0;
return function() {
var stamp = nativeNow(),
remaining = HOT_SPAN - (stamp - lastCalled);
lastCalled = stamp;
if (remaining > 0) {
if (++count >= HOT_COUNT) {
return arguments[0];
}
} else {
count = 0;
}
return func.apply(undefined, arguments);
};
}
/**
* Sets the `toString` method of `func` to return `string`.
*
* @private
* @param {Function} func The function to modify.
* @param {Function} string The `toString` result.
* @returns {Function} Returns `func`.
*/
var setToString = shortOut(baseSetToString);
/**
* The base implementation of `_.rest` which doesn't validate or coerce arguments.
*
* @private
* @param {Function} func The function to apply a rest parameter to.
* @param {number} [start=func.length-1] The start position of the rest parameter.
* @returns {Function} Returns the new function.
*/
function baseRest(func, start) {
return setToString(overRest(func, start, identity), func + '');
}
/**
* Checks if the given arguments are from an iteratee call.
*
* @private
* @param {*} value The potential iteratee value argument.
* @param {*} index The potential iteratee index or key argument.
* @param {*} object The potential iteratee object argument.
* @returns {boolean} Returns `true` if the arguments are from an iteratee call,
* else `false`.
*/
function isIterateeCall(value, index, object) {
if (!isObject(object)) {
return false;
}
var type = typeof index;
if (type == 'number'
? (isArrayLike(object) && isIndex(index, object.length))
: (type == 'string' && index in object)
) {
return eq(object[index], value);
}
return false;
}
/**
* Creates a function like `_.assign`.
*
* @private
* @param {Function} assigner The function to assign values.
* @returns {Function} Returns the new assigner function.
*/
function createAssigner(assigner) {
return baseRest(function(object, sources) {
var index = -1,
length = sources.length,
customizer = length > 1 ? sources[length - 1] : undefined,
guard = length > 2 ? sources[2] : undefined;
customizer = (assigner.length > 3 && typeof customizer == 'function')
? (length--, customizer)
: undefined;
if (guard && isIterateeCall(sources[0], sources[1], guard)) {
customizer = length < 3 ? undefined : customizer;
length = 1;
}
object = Object(object);
while (++index < length) {
var source = sources[index];
if (source) {
assigner(object, source, index, customizer);
}
}
return object;
});
}
/**
* This method is like `_.assign` except that it recursively merges own and
* inherited enumerable string keyed properties of source objects into the
* destination object. Source properties that resolve to `undefined` are
* skipped if a destination value exists. Array and plain object properties
* are merged recursively. Other objects and value types are overridden by
* assignment. Source objects are applied from left to right. Subsequent
* sources overwrite property assignments of previous sources.
*
* **Note:** This method mutates `object`.
*
* @static
* @memberOf _
* @since 0.5.0
* @category Object
* @param {Object} object The destination object.
* @param {...Object} [sources] The source objects.
* @returns {Object} Returns `object`.
* @example
*
* var object = {
* 'a': [{ 'b': 2 }, { 'd': 4 }]
* };
*
* var other = {
* 'a': [{ 'c': 3 }, { 'e': 5 }]
* };
*
* _.merge(object, other);
* // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }
*/
var merge = createAssigner(function(object, source, srcIndex) {
baseMerge(object, source, srcIndex);
});
var mergeOptions = function mergeOptions(obj, src) {
return merge(obj, src);
};
var VoBasic = { render: function render() {
var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "vo-basic", attrs: { "id": "chart-container" } });
}, staticRenderFns: [],
name: 'orgchart',
props: {
data: { type: Object, default: function _default() {
return {};
}
},
pan: { type: Boolean, default: false },
zoom: { type: Boolean, default: false },
direction: { type: String, default: 't2b' },
verticalDepth: { type: Number },
toggleSiblingsResp: { type: Boolean, default: false },
ajaxURL: { type: Object },
depth: { type: Number, default: 999 },
nodeTitle: { type: String, default: 'name' },
parentNodeSymbol: { type: String, default: '' },
nodeContent: { type: String },
nodeId: { type: String, default: 'id' },
createNode: { type: Function },
exportButton: { type: Boolean, default: false },
exportButtonName: { type: String, default: 'Export' },
exportFilename: { type: String },
chartClass: { type: String, default: '' },
draggable: { type: Boolean, default: false },
dropCriteria: { type: Function },
toggleCollapse: { type: Boolean, default: true }
},
data: function data() {
return {
newData: null,
orgchart: null,
defaultOptions: {
'chartContainer': '#chart-container'
}
};
},
mounted: function mounted() {
this.newData === null ? this.initOrgChart() : null;
},
methods: {
initOrgChart: function initOrgChart() {
var opts = mergeOptions(this.defaultOptions, this.$props);
this.orgchart = new OrgChart$1(opts);
}
},
watch: {
data: function data(newVal) {
var _this = this;
this.newData = newVal;
var promise = new Promise(function (resolve) {
if (newVal) {
resolve();
}
});
promise.then(function () {
var opts = mergeOptions(_this.defaultOptions, _this.$props);
_this.orgchart = new OrgChart$1(opts);
});
}
}
};
var closest = function closest(el, fn) {
return el && (fn(el) && el !== document.querySelector('.orgchart') ? el : closest(el.parentNode, fn));
};
var bindEventHandler = function bindEventHandler(selector, type, fn, parentSelector) {
if (parentSelector) {
document.querySelector(parentSelector).addEventListener(type, function (event) {
if (event.target.classList && event.target.classList.contains(selector.slice(1)) || closest(event.target, function (el) {
return el.classList && el.classList.contains(selector.slice(1));
})) {
fn(event);
}
});
} else {
document.querySelectorAll(selector).forEach(function (element) {
element.addEventListener(type, fn);
});
}
};
var clickNode = function clickNode(event) {
var sNode = closest(event.target, function (el) {
return el.classList && el.classList.contains('node');
});
var sNodeInput = document.getElementById('selected-node');
sNodeInput.value = sNode.querySelector('.title').textContent;
sNodeInput.dataset.node = sNode.id;
};
var clickChart = function clickChart(event) {
if (!closest(event.target, function (el) {
return el.classList && el.classList.contains('node');
})) {
document.getElementById('selected-node').textContent = '';
}
};
var getId = function getId() {
return new Date().getTime() * 1000 + Math.floor(Math.random() * 1001);
};
var VoEdit = { render: function render() {
var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "vo-edit", attrs: { "id": "chart-container" } });
}, staticRenderFns: [],
name: 'VoEdit',
props: {
data: { type: Object },
pan: { type: Boolean, default: false },
zoom: { type: Boolean, default: false },
direction: { type: String, default: 't2b' },
verticalDepth: { type: Number },
toggleSiblingsResp: { type: Boolean, default: false },
ajaxURL: { type: Object },
depth: { type: Number, default: 999 },
nodeTitle: { type: String, default: 'name' },
parentNodeSymbol: { type: String, default: '' },
nodeContent: { type: String },
nodeId: { type: String, default: 'id' },
createNode: { type: Function },
exportButton: { type: Boolean, default: false },
exportButtonName: { type: String, default: 'Export' },
exportFilename: { type: String },
chartClass: { type: String, default: '' },
draggable: { type: Boolean, default: false },
dropCriteria: { type: Function },
toggleCollapse: { type: Boolean, default: true }
},
data: function data() {
return {
newData: null,
orgchart: null,
defaultOptions: {
chartContainer: '#chart-container',
createNode: function createNode(node, data) {
node.id = getId();
}
}
};
},
mounted: function mounted() {
this.newData === null ? this.initOrgChart() : null;
this.$nextTick(function () {
bindEventHandler('.node', 'click', clickNode, '#chart-container');
bindEventHandler('.orgchart', 'click', clickChart, '#chart-container');
});
},
methods: {
initOrgChart: function initOrgChart() {
var opts = mergeOptions(this.defaultOptions, this.$props);
this.orgchart = new OrgChart$1(opts);
}
},
watch: {
data: function data(newVal) {
var _this = this;
this.newData = newVal;
var promise = new Promise(function (resolve) {
if (newVal) {
resolve();
}
});
promise.then(function () {
var opts = mergeOptions(_this.defaultOptions, _this.$props);
_this.orgchart = new OrgChart$1(opts);
});
}
}
};
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component('vo-basic', VoBasic);
window.Vue.component('vo-edit', VoEdit);
}
exports.VoBasic = VoBasic;
exports.VoEdit = VoEdit;
================================================
FILE: dist/vue-orgchart.esm.js
================================================
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var createClass = function () {
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);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var toConsumableArray = function (arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
} else {
return Array.from(arr);
}
};
var OrgChart$1 = function () {
function OrgChart(options) {
classCallCheck(this, OrgChart);
this._name = 'OrgChart';
Promise.prototype.finally = function (callback) {
var P = this.constructor;
return this.then(function (value) {
return P.resolve(callback()).then(function () {
return value;
});
}, function (reason) {
return P.resolve(callback()).then(function () {
throw reason;
});
});
};
var that = this,
defaultOptions = {
'nodeTitle': 'name',
'nodeId': 'id',
'toggleSiblingsResp': false,
'depth': 999,
'chartClass': '',
'exportButton': false,
'exportButtonName': 'Export',
'exportFilename': 'OrgChart',
'parentNodeSymbol': '',
'draggable': false,
'direction': 't2b',
'pan': false,
'zoom': false,
'toggleCollapse': true
},
opts = _extends(defaultOptions, options),
data = opts.data,
chart = document.createElement('div'),
chartContainer = document.querySelector(opts.chartContainer);
this.options = opts;
delete this.options.data;
this.chart = chart;
this.chartContainer = chartContainer;
chart.dataset.options = JSON.stringify(opts);
chart.setAttribute('class', 'orgchart' + (opts.chartClass !== '' ? ' ' + opts.chartClass : '') + (opts.direction !== 't2b' ? ' ' + opts.direction : ''));
if ((typeof data === 'undefined' ? 'undefined' : _typeof(data)) === 'object') {
// local json datasource
this.buildHierarchy(chart, opts.ajaxURL ? data : this._attachRel(data, '00'), 0);
} else if (typeof data === 'string' && data.startsWith('#')) {
// ul datasource
this.buildHierarchy(chart, this._buildJsonDS(document.querySelector(data).children[0]), 0);
} else {
// ajax datasource
var spinner = document.createElement('i');
spinner.setAttribute('class', 'fa fa-circle-o-notch fa-spin spinner');
chart.appendChild(spinner);
this._getJSON(data).then(function (resp) {
that.buildHierarchy(chart, opts.ajaxURL ? resp : that._attachRel(resp, '00'), 0);
}).catch(function (err) {
console.error('failed to fetch datasource for orgchart', err);
}).finally(function () {
var spinner = chart.querySelector('.spinner');
spinner.parentNode.removeChild(spinner);
});
}
chart.addEventListener('click', this._clickChart.bind(this));
// append the export button to the chart-container
if (opts.exportButton && !chartContainer.querySelector('.oc-export-btn')) {
var exportBtn = document.createElement('button'),
downloadBtn = document.createElement('a');
exportBtn.setAttribute('class', 'oc-export-btn' + (opts.chartClass !== '' ? ' ' + opts.chartClass : ''));
opts.exportButtonName === 'Export' ? exportBtn.innerHTML = 'Export' : exportBtn.innerHTML = '' + opts.exportButtonName;
exportBtn.addEventListener('click', this._clickExportButton.bind(this));
downloadBtn.setAttribute('class', 'oc-download-btn' + (opts.chartClass !== '' ? ' ' + opts.chartClass : ''));
downloadBtn.setAttribute('download', opts.exportFilename + '.png');
chartContainer.appendChild(exportBtn);
chartContainer.appendChild(downloadBtn);
}
if (opts.pan) {
chartContainer.style.overflow = 'hidden';
chart.addEventListener('mousedown', this._onPanStart.bind(this));
chart.addEventListener('touchstart', this._onPanStart.bind(this));
document.body.addEventListener('mouseup', this._onPanEnd.bind(this));
document.body.addEventListener('touchend', this._onPanEnd.bind(this));
}
if (opts.zoom) {
chartContainer.addEventListener('wheel', this._onWheeling.bind(this));
chartContainer.addEventListener('touchstart', this._onTouchStart.bind(this));
document.body.addEventListener('touchmove', this._onTouchMove.bind(this));
document.body.addEventListener('touchend', this._onTouchEnd.bind(this));
}
chartContainer.appendChild(chart);
}
createClass(OrgChart, [{
key: '_closest',
value: function _closest(el, fn) {
return el && (fn(el) && el !== this.chart ? el : this._closest(el.parentNode, fn));
}
}, {
key: '_siblings',
value: function _siblings(el, expr) {
return Array.from(el.parentNode.children).filter(function (child) {
if (child !== el) {
if (expr) {
return el.matches(expr);
}
return true;
}
return false;
});
}
}, {
key: '_prevAll',
value: function _prevAll(el, expr) {
var sibs = [],
prevSib = el.previousElementSibling;
while (prevSib) {
if (!expr || prevSib.matches(expr)) {
sibs.push(prevSib);
}
prevSib = prevSib.previousElementSibling;
}
return sibs;
}
}, {
key: '_nextAll',
value: function _nextAll(el, expr) {
var sibs = [];
var nextSib = el.nextElementSibling;
while (nextSib) {
if (!expr || nextSib.matches(expr)) {
sibs.push(nextSib);
}
nextSib = nextSib.nextElementSibling;
}
return sibs;
}
}, {
key: '_isVisible',
value: function _isVisible(el) {
return el.offsetParent !== null;
}
}, {
key: '_addClass',
value: function _addClass(elements, classNames) {
elements.forEach(function (el) {
if (classNames.indexOf(' ') > 0) {
classNames.split(' ').forEach(function (className) {
return el.classList.add(className);
});
} else {
el.classList.add(classNames);
}
});
}
}, {
key: '_removeClass',
value: function _removeClass(elements, classNames) {
elements.forEach(function (el) {
if (classNames.indexOf(' ') > 0) {
classNames.split(' ').forEach(function (className) {
return el.classList.remove(className);
});
} else {
el.classList.remove(classNames);
}
});
}
}, {
key: '_css',
value: function _css(elements, prop, val) {
elements.forEach(function (el) {
el.style[prop] = val;
});
}
}, {
key: '_removeAttr',
value: function _removeAttr(elements, attr) {
elements.forEach(function (el) {
el.removeAttribute(attr);
});
}
}, {
key: '_one',
value: function _one(el, type, listener, self) {
var one = function one(event) {
try {
listener.call(self, event);
} finally {
el.removeEventListener(type, one);
}
};
el && el.addEventListener(type, one);
}
}, {
key: '_getDescElements',
value: function _getDescElements(ancestors, selector) {
var results = [];
ancestors.forEach(function (el) {
return results.push.apply(results, toConsumableArray(el.querySelectorAll(selector)));
});
return results;
}
}, {
key: '_getJSON',
value: function _getJSON(url) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(JSON.parse(this.response));
} else {
reject(new Error(this.statusText));
}
}
xhr.open('GET', url);
xhr.onreadystatechange = handler;
xhr.responseType = 'json';
// xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();
});
}
}, {
key: '_buildJsonDS',
value: function _buildJsonDS(li) {
var _this = this;
var subObj = {
'name': li.firstChild.textContent.trim(),
'relationship': (li.parentNode.parentNode.nodeName === 'LI' ? '1' : '0') + (li.parentNode.children.length > 1 ? 1 : 0) + (li.children.length ? 1 : 0)
};
if (li.id) {
subObj.id = li.id;
}
if (li.querySelector('ul')) {
Array.from(li.querySelector('ul').children).forEach(function (el) {
if (!subObj.children) {
subObj.children = [];
}
subObj.children.push(_this._buildJsonDS(el));
});
}
return subObj;
}
}, {
key: '_attachRel',
value: function _attachRel(data, flags) {
data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0);
if (data.children) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = data.children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var item = _step.value;
this._attachRel(item, '1' + (data.children.length > 1 ? 1 : 0));
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
return data;
}
}, {
key: '_repaint',
value: function _repaint(node) {
if (node) {
node.style.offsetWidth = node.offsetWidth;
}
}
// whether the cursor is hovering over the node
}, {
key: '_isInAction',
value: function _isInAction(node) {
return node.querySelector(':scope > .edge').className.indexOf('fa-') > -1;
}
// detect the exist/display state of related node
}, {
key: '_getNodeState',
value: function _getNodeState(node, relation) {
var _this2 = this;
var criteria = void 0,
state = { 'exist': false, 'visible': false };
if (relation === 'parent') {
criteria = this._closest(node, function (el) {
return el.classList && el.classList.contains('nodes');
});
if (criteria) {
state.exist = true;
}
if (state.exist && this._isVisible(criteria.parentNode.children[0])) {
state.visible = true;
}
} else if (relation === 'children') {
criteria = this._closest(node, function (el) {
return el.nodeName === 'TR';
}).nextElementSibling;
if (criteria) {
state.exist = true;
}
if (state.exist && this._isVisible(criteria)) {
state.visible = true;
}
} else if (relation === 'siblings') {
criteria = this._siblings(this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode);
if (criteria.length) {
state.exist = true;
}
if (state.exist && criteria.some(function (el) {
return _this2._isVisible(el);
})) {
state.visible = true;
}
}
return state;
}
// find the related nodes
}, {
key: 'getRelatedNodes',
value: function getRelatedNodes(node, relation) {
if (relation === 'parent') {
return this._closest(node, function (el) {
return el.classList.contains('nodes');
}).parentNode.children[0].querySelector('.node');
} else if (relation === 'children') {
return Array.from(this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).lastChild.children).map(function (el) {
return el.querySelector('.node');
});
} else if (relation === 'siblings') {
return this._siblings(this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode).map(function (el) {
return el.querySelector('.node');
});
}
return [];
}
}, {
key: '_switchHorizontalArrow',
value: function _switchHorizontalArrow(node) {
var opts = this.options,
leftEdge = node.querySelector('.leftEdge'),
rightEdge = node.querySelector('.rightEdge'),
temp = this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode;
if (opts.toggleSiblingsResp && (typeof opts.ajaxURL === 'undefined' || this._closest(node, function (el) {
return el.classList.contains('.nodes');
}).dataset.siblingsLoaded)) {
var prevSib = temp.previousElementSibling,
nextSib = temp.nextElementSibling;
if (prevSib) {
if (prevSib.classList.contains('hidden')) {
leftEdge.classList.add('fa-chevron-left');
leftEdge.classList.remove('fa-chevron-right');
} else {
leftEdge.classList.add('fa-chevron-right');
leftEdge.classList.remove('fa-chevron-left');
}
}
if (nextSib) {
if (nextSib.classList.contains('hidden')) {
rightEdge.classList.add('fa-chevron-right');
rightEdge.classList.remove('fa-chevron-left');
} else {
rightEdge.classList.add('fa-chevron-left');
rightEdge.classList.remove('fa-chevron-right');
}
}
} else {
var sibs = this._siblings(temp),
sibsVisible = sibs.length ? !sibs.some(function (el) {
return el.classList.contains('hidden');
}) : false;
leftEdge.classList.toggle('fa-chevron-right', sibsVisible);
leftEdge.classList.toggle('fa-chevron-left', !sibsVisible);
rightEdge.classList.toggle('fa-chevron-left', sibsVisible);
rightEdge.classList.toggle('fa-chevron-right', !sibsVisible);
}
}
}, {
key: '_hoverNode',
value: function _hoverNode(event) {
var node = event.target,
flag = false,
topEdge = node.querySelector(':scope > .topEdge'),
bottomEdge = node.querySelector(':scope > .bottomEdge'),
leftEdge = node.querySelector(':scope > .leftEdge');
if (event.type === 'mouseenter') {
if (topEdge) {
flag = this._getNodeState(node, 'parent').visible;
topEdge.classList.toggle('fa-chevron-up', !flag);
topEdge.classList.toggle('fa-chevron-down', flag);
}
if (bottomEdge) {
flag = this._getNodeState(node, 'children').visible;
bottomEdge.classList.toggle('fa-chevron-down', !flag);
bottomEdge.classList.toggle('fa-chevron-up', flag);
}
if (leftEdge) {
this._switchHorizontalArrow(node);
}
} else {
Array.from(node.querySelectorAll(':scope > .edge')).forEach(function (el) {
el.classList.remove('fa-chevron-up', 'fa-chevron-down', 'fa-chevron-right', 'fa-chevron-left');
});
}
}
// define node click event handler
}, {
key: '_clickNode',
value: function _clickNode(event) {
var clickedNode = event.currentTarget,
focusedNode = this.chart.querySelector('.focused');
if (focusedNode) {
focusedNode.classList.remove('focused');
}
clickedNode.classList.add('focused');
}
// build the parent node of specific node
}, {
key: '_buildParentNode',
value: function _buildParentNode(currentRoot, nodeData, callback) {
var that = this,
table = document.createElement('table');
nodeData.relationship = nodeData.relationship || '001';
this._createNode(nodeData, 0).then(function (nodeDiv) {
var chart = that.chart;
nodeDiv.classList.remove('slide-up');
nodeDiv.classList.add('slide-down');
var parentTr = document.createElement('tr'),
superiorLine = document.createElement('tr'),
inferiorLine = document.createElement('tr'),
childrenTr = document.createElement('tr');
parentTr.setAttribute('class', 'hidden');
parentTr.innerHTML = '<td colspan="2"></td>';
table.appendChild(parentTr);
superiorLine.setAttribute('class', 'lines hidden');
superiorLine.innerHTML = '<td colspan="2"><div class="downLine"></div></td>';
table.appendChild(superiorLine);
inferiorLine.setAttribute('class', 'lines hidden');
inferiorLine.innerHTML = '<td class="rightLine"> </td><td class="leftLine"> </td>';
table.appendChild(inferiorLine);
childrenTr.setAttribute('class', 'nodes');
childrenTr.innerHTML = '<td colspan="2"></td>';
table.appendChild(childrenTr);
table.querySelector('td').appendChild(nodeDiv);
chart.insertBefore(table, chart.children[0]);
table.children[3].children[0].appendChild(chart.lastChild);
callback();
}).catch(function (err) {
console.error('Failed to create parent node', err);
});
}
}, {
key: '_switchVerticalArrow',
value: function _switchVerticalArrow(arrow) {
arrow.classList.toggle('fa-chevron-up');
arrow.classList.toggle('fa-chevron-down');
}
// show the parent node of the specified node
}, {
key: 'showParent',
value: function showParent(node) {
// just show only one superior level
var temp = this._prevAll(this._closest(node, function (el) {
return el.classList.contains('nodes');
}));
this._removeClass(temp, 'hidden');
// just show only one line
this._addClass(Array(temp[0].children).slice(1, -1), 'hidden');
// show parent node with animation
var parent = temp[2].querySelector('.node');
this._one(parent, 'transitionend', function () {
parent.classList.remove('slide');
if (this._isInAction(node)) {
this._switchVerticalArrow(node.querySelector(':scope > .topEdge'));
}
}, this);
this._repaint(parent);
parent.classList.add('slide');
parent.classList.remove('slide-down');
}
// show the sibling nodes of the specified node
}, {
key: 'showSiblings',
value: function showSiblings(node, direction) {
var _this3 = this;
// firstly, show the sibling td tags
var siblings = [],
temp = this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode;
if (direction) {
siblings = direction === 'left' ? this._prevAll(temp) : this._nextAll(temp);
} else {
siblings = this._siblings(temp);
}
this._removeClass(siblings, 'hidden');
// secondly, show the lines
var upperLevel = this._prevAll(this._closest(node, function (el) {
return el.classList.contains('nodes');
}));
temp = Array.from(upperLevel[0].querySelectorAll(':scope > .hidden'));
if (direction) {
this._removeClass(temp.slice(0, siblings.length * 2), 'hidden');
} else {
this._removeClass(temp, 'hidden');
}
// thirdly, do some cleaning stuff
if (!this._getNodeState(node, 'parent').visible) {
this._removeClass(upperLevel, 'hidden');
var parent = upperLevel[2].querySelector('.node');
this._one(parent, 'transitionend', function (event) {
event.target.classList.remove('slide');
}, this);
this._repaint(parent);
parent.classList.add('slide');
parent.classList.remove('slide-down');
}
// lastly, show the sibling nodes with animation
siblings.forEach(function (sib) {
Array.from(sib.querySelectorAll('.node')).forEach(function (node) {
if (_this3._isVisible(node)) {
node.classList.add('slide');
node.classList.remove('slide-left', 'slide-right');
}
});
});
this._one(siblings[0].querySelector('.slide'), 'transitionend', function () {
var _this4 = this;
siblings.forEach(function (sib) {
_this4._removeClass(Array.from(sib.querySelectorAll('.slide')), 'slide');
});
if (this._isInAction(node)) {
this._switchHorizontalArrow(node);
node.querySelector('.topEdge').classList.remove('fa-chevron-up');
node.querySelector('.topEdge').classList.add('fa-chevron-down');
}
}, this);
}
// hide the sibling nodes of the specified node
}, {
key: 'hideSiblings',
value: function hideSiblings(node, direction) {
var _this5 = this;
var nodeContainer = this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}).parentNode,
siblings = this._siblings(nodeContainer);
siblings.forEach(function (sib) {
if (sib.querySelector('.spinner')) {
_this5.chart.dataset.inAjax = false;
}
});
if (!direction || direction && direction === 'left') {
var preSibs = this._prevAll(nodeContainer);
preSibs.forEach(function (sib) {
Array.from(sib.querySelectorAll('.node')).forEach(function (node) {
if (_this5._isVisible(node)) {
node.classList.add('slide', 'slide-right');
}
});
});
}
if (!direction || direction && direction !== 'left') {
var nextSibs = this._nextAll(nodeContainer);
nextSibs.forEach(function (sib) {
Array.from(sib.querySelectorAll('.node')).forEach(function (node) {
if (_this5._isVisible(node)) {
node.classList.add('slide', 'slide-left');
}
});
});
}
var animatedNodes = [];
this._siblings(nodeContainer).forEach(function (sib) {
Array.prototype.push.apply(animatedNodes, Array.from(sib.querySelectorAll('.slide')));
});
var lines = [];
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = animatedNodes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _node = _step2.value;
var temp = this._closest(_node, function (el) {
return el.classList.contains('nodes');
}).previousElementSibling;
lines.push(temp);
lines.push(temp.previousElementSibling);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
lines = [].concat(toConsumableArray(new Set(lines)));
lines.forEach(function (line) {
line.style.visibility = 'hidden';
});
this._one(animatedNodes[0], 'transitionend', function (event) {
var _this6 = this;
lines.forEach(function (line) {
line.removeAttribute('style');
});
var sibs = [];
if (direction) {
if (direction === 'left') {
sibs = this._prevAll(nodeContainer, ':not(.hidden)');
} else {
sibs = this._nextAll(nodeContainer, ':not(.hidden)');
}
} else {
sibs = this._siblings(nodeContainer);
}
var temp = Array.from(this._closest(nodeContainer, function (el) {
return el.classList.contains('nodes');
}).previousElementSibling.querySelectorAll(':scope > :not(.hidden)'));
var someLines = temp.slice(1, direction ? sibs.length * 2 + 1 : -1);
this._addClass(someLines, 'hidden');
this._removeClass(animatedNodes, 'slide');
sibs.forEach(function (sib) {
Array.from(sib.querySelectorAll('.node')).slice(1).forEach(function (node) {
if (_this6._isVisible(node)) {
node.classList.remove('slide-left', 'slide-right');
node.classList.add('slide-up');
}
});
});
sibs.forEach(function (sib) {
_this6._addClass(Array.from(sib.querySelectorAll('.lines')), 'hidden');
_this6._addClass(Array.from(sib.querySelectorAll('.nodes')), 'hidden');
_this6._addClass(Array.from(sib.querySelectorAll('.verticalNodes')), 'hidden');
});
this._addClass(sibs, 'hidden');
if (this._isInAction(node)) {
this._switchHorizontalArrow(node);
}
}, this);
}
// recursively hide the ancestor node and sibling nodes of the specified node
}, {
key: 'hideParent',
value: function hideParent(node) {
var temp = Array.from(this._closest(node, function (el) {
return el.classList.contains('nodes');
}).parentNode.children).slice(0, 3);
if (temp[0].querySelector('.spinner')) {
this.chart.dataset.inAjax = false;
}
// hide the sibling nodes
if (this._getNodeState(node, 'siblings').visible) {
this.hideSiblings(node);
}
// hide the lines
var lines = temp.slice(1);
this._css(lines, 'visibility', 'hidden');
// hide the superior nodes with transition
var parent = temp[0].querySelector('.node'),
grandfatherVisible = this._getNodeState(parent, 'parent').visible;
if (parent && this._isVisible(parent)) {
parent.classList.add('slide', 'slide-down');
this._one(parent, 'transitionend', function () {
parent.classList.remove('slide');
this._removeAttr(lines, 'style');
this._addClass(temp, 'hidden');
}, this);
}
// if the current node has the parent node, hide it recursively
if (parent && grandfatherVisible) {
this.hideParent(parent);
}
}
// exposed method
}, {
key: 'addParent',
value: function addParent(currentRoot, data) {
var that = this;
this._buildParentNode(currentRoot, data, function () {
if (!currentRoot.querySelector(':scope > .topEdge')) {
var topEdge = document.createElement('i');
topEdge.setAttribute('class', 'edge verticalEdge topEdge fa');
currentRoot.appendChild(topEdge);
}
that.showParent(currentRoot);
});
}
// start up loading status for requesting new nodes
}, {
key: '_startLoading',
value: function _startLoading(arrow, node) {
var opts = this.options,
chart = this.chart;
if (typeof chart.dataset.inAjax !== 'undefined' && chart.dataset.inAjax === 'true') {
return false;
}
arrow.classList.add('hidden');
var spinner = document.createElement('i');
spinner.setAttribute('class', 'fa fa-circle-o-notch fa-spin spinner');
node.appendChild(spinner);
this._addClass(Array.from(node.querySelectorAll(':scope > *:not(.spinner)')), 'hazy');
chart.dataset.inAjax = true;
var exportBtn = this.chartContainer.querySelector('.oc-export-btn' + (opts.chartClass !== '' ? '.' + opts.chartClass : ''));
if (exportBtn) {
exportBtn.disabled = true;
}
return true;
}
// terminate loading status for requesting new nodes
}, {
key: '_endLoading',
value: function _endLoading(arrow, node) {
var opts = this.options;
arrow.classList.remove('hidden');
node.querySelector(':scope > .spinner').remove();
this._removeClass(Array.from(node.querySelectorAll(':scope > .hazy')), 'hazy');
this.chart.dataset.inAjax = false;
var exportBtn = this.chartContainer.querySelector('.oc-export-btn' + (opts.chartClass !== '' ? '.' + opts.chartClass : ''));
if (exportBtn) {
exportBtn.disabled = false;
}
}
// define click event handler for the top edge
}, {
key: '_clickTopEdge',
value: function _clickTopEdge(event) {
event.stopPropagation();
var that = this,
topEdge = event.target,
node = topEdge.parentNode,
parentState = this._getNodeState(node, 'parent'),
opts = this.options;
if (parentState.exist) {
var temp = this._closest(node, function (el) {
return el.classList.contains('nodes');
});
var parent = temp.parentNode.firstChild.querySelector('.node');
if (parent.classList.contains('slide')) {
return;
}
// hide the ancestor nodes and sibling nodes of the specified node
if (parentState.visible) {
this.hideParent(node);
this._one(parent, 'transitionend', function () {
if (this._isInAction(node)) {
this._switchVerticalArrow(topEdge);
this._switchHorizontalArrow(node);
}
}, this);
} else {
// show the ancestors and siblings
this.showParent(node);
}
} else {
// load the new parent node of the specified node by ajax request
var nodeId = topEdge.parentNode.id;
// start up loading status
if (this._startLoading(topEdge, node)) {
// load new nodes
this._getJSON(typeof opts.ajaxURL.parent === 'function' ? opts.ajaxURL.parent(node.dataset.source) : opts.ajaxURL.parent + nodeId).then(function (resp) {
if (that.chart.dataset.inAjax === 'true') {
if (Object.keys(resp).length) {
that.addParent(node, resp);
}
}
}).catch(function (err) {
console.error('Failed to get parent node data.', err);
}).finally(function () {
that._endLoading(topEdge, node);
});
}
}
}
// recursively hide the descendant nodes of the specified node
}, {
key: 'hideChildren',
value: function hideChildren(node) {
var that = this,
temp = this._nextAll(node.parentNode.parentNode),
lastItem = temp[temp.length - 1],
lines = [];
if (lastItem.querySelector('.spinner')) {
this.chart.dataset.inAjax = false;
}
var descendants = Array.from(lastItem.querySelectorAll('.node')).filter(function (el) {
return that._isVisible(el);
}),
isVerticalDesc = lastItem.classList.contains('verticalNodes');
if (!isVerticalDesc) {
descendants.forEach(function (desc) {
Array.prototype.push.apply(lines, that._prevAll(that._closest(desc, function (el) {
return el.classList.contains('nodes');
}), '.lines'));
});
lines = [].concat(toConsumableArray(new Set(lines)));
this._css(lines, 'visibility', 'hidden');
}
this._one(descendants[0], 'transitionend', function (event) {
this._removeClass(descendants, 'slide');
if (isVerticalDesc) {
that._addClass(temp, 'hidden');
} else {
lines.forEach(function (el) {
el.removeAttribute('style');
el.classList.add('hidden');
el.parentNode.lastChild.classList.add('hidden');
});
this._addClass(Array.from(lastItem.querySelectorAll('.verticalNodes')), 'hidden');
}
if (this._isInAction(node)) {
this._switchVerticalArrow(node.querySelector('.bottomEdge'));
}
}, this);
this._addClass(descendants, 'slide slide-up');
}
// show the children nodes of the specified node
}, {
key: 'showChildren',
value: function showChildren(node) {
var _this7 = this;
var that = this,
temp = this._nextAll(node.parentNode.parentNode),
descendants = [];
this._removeClass(temp, 'hidden');
if (temp.some(function (el) {
return el.classList.contains('verticalNodes');
})) {
temp.forEach(function (el) {
Array.prototype.push.apply(descendants, Array.from(el.querySelectorAll('.node')).filter(function (el) {
return that._isVisible(el);
}));
});
} else {
Array.from(temp[2].children).forEach(function (el) {
Array.prototype.push.apply(descendants, Array.from(el.querySelector('tr').querySelectorAll('.node')).filter(function (el) {
return that._isVisible(el);
}));
});
}
// the two following statements are used to enforce browser to repaint
this._repaint(descendants[0]);
this._one(descendants[0], 'transitionend', function (event) {
_this7._removeClass(descendants, 'slide');
if (_this7._isInAction(node)) {
_this7._switchVerticalArrow(node.querySelector('.bottomEdge'));
}
}, this);
this._addClass(descendants, 'slide');
this._removeClass(descendants, 'slide-up');
}
// build the child nodes of specific node
}, {
key: '_buildChildNode',
value: function _buildChildNode(appendTo, nodeData, callback) {
var data = nodeData.children || nodeData.siblings;
appendTo.querySelector('td').setAttribute('colSpan', data.length * 2);
this.buildHierarchy(appendTo, { 'children': data }, 0, callback);
}
// exposed method
}, {
key: 'addChildren',
value: function addChildren(node, data) {
var that = this,
opts = this.options,
count = 0;
this.chart.dataset.inEdit = 'addChildren';
this._buildChildNode.call(this, this._closest(node, function (el) {
return el.nodeName === 'TABLE';
}), data, function () {
if (++count === data.children.length) {
if (!node.querySelector('.bottomEdge')) {
var bottomEdge = document.createElement('i');
bottomEdge.setAttribute('class', 'edge verticalEdge bottomEdge fa');
node.appendChild(bottomEdge);
}
if (!node.querySelector('.symbol')) {
var symbol = document.createElement('i');
symbol.setAttribute('class', 'fa ' + opts.parentNodeSymbol + ' symbol');
node.querySelector(':scope > .title').appendChild(symbol);
}
that.showChildren(node);
that.chart.dataset.inEdit = '';
}
});
}
// bind click event handler for the bottom edge
}, {
key: '_clickBottomEdge',
value: function _clickBottomEdge(event) {
var _this8 = this;
event.stopPropagation();
var that = this,
opts = this.options,
bottomEdge = event.target,
node = bottomEdge.parentNode,
childrenState = this._getNodeState(node, 'children');
if (childrenState.exist) {
var temp = this._closest(node, function (el) {
return el.nodeName === 'TR';
}).parentNode.lastChild;
if (Array.from(temp.querySelectorAll('.node')).some(function (node) {
return _this8._isVisible(node) && node.classList.contains('slide');
})) {
return;
}
// hide the descendant nodes of the specified node
if (childrenState.visible) {
this.hideChildren(node);
} else {
// show the descendants
this.showChildren(node);
}
} else {
// load the new children nodes of the specified node by ajax request
var nodeId = bottomEdge.parentNode.id;
if (this._startLoading(bottomEdge, node)) {
this._getJSON(typeof opts.ajaxURL.children === 'function' ? opts.ajaxURL.children(node.dataset.source) : opts.ajaxURL.children + nodeId).then(function (resp) {
if (that.chart.dataset.inAjax === 'true') {
if (resp.children.length) {
that.addChildren(node, resp);
}
}
}).catch(function (err) {
console.error('Failed to get children nodes data', err);
}).finally(function () {
that._endLoading(bottomEdge, node);
});
}
}
}
// subsequent processing of build sibling nodes
}, {
key: '_complementLine',
value: function _complementLine(oneSibling, siblingCount, existingSibligCount) {
var temp = oneSibling.parentNode.parentNode.children;
temp[0].children[0].setAttribute('colspan', siblingCount * 2);
temp[1].children[0].setAttribute('colspan', siblingCount * 2);
for (var i = 0; i < existingSibligCount; i++) {
var rightLine = document.createElement('td'),
leftLine = document.createElement('td');
rightLine.setAttribute('class', 'rightLine topLine');
rightLine.innerHTML = ' ';
temp[2].insertBefore(rightLine, temp[2].children[1]);
leftLine.setAttribute('class', 'leftLine topLine');
leftLine.innerHTML = ' ';
temp[2].insertBefore(leftLine, temp[2].children[1]);
}
}
// build the sibling nodes of specific node
}, {
key: '_buildSiblingNode',
value: function _buildSiblingNode(nodeChart, nodeData, callback) {
var _this9 = this;
var that = this,
newSiblingCount = nodeData.siblings ? nodeData.siblings.length : nodeData.children.length,
existingSibligCount = nodeChart.parentNode.nodeName === 'TD' ? this._closest(nodeChart, function (el) {
return el.nodeName === 'TR';
}).children.length : 1,
siblingCount = existingSibligCount + newSiblingCount,
insertPostion = siblingCount > 1 ? Math.floor(siblingCount / 2 - 1) : 0;
// just build the sibling nodes for the specific node
if (nodeChart.parentNode.nodeName === 'TD') {
var temp = this._prevAll(nodeChart.parentNode.parentNode);
temp[0].remove();
temp[1].remove();
var childCount = 0;
that._buildChildNode.call(that, that._closest(nodeChart.parentNode, function (el) {
return el.nodeName === 'TABLE';
}), nodeData, function () {
if (++childCount === newSiblingCount) {
var siblingTds = Array.from(that._closest(nodeChart.parentNode, function (el) {
return el.nodeName === 'TABLE';
}).lastChild.children);
if (existingSibligCount > 1) {
var _temp = nodeChart.parentNode.parentNode;
Array.from(_temp.children).forEach(function (el) {
siblingTds[0].parentNode.insertBefore(el, siblingTds[0]);
});
_temp.remove();
that._complementLine(siblingTds[0], siblingCount, existingSibligCount);
that._addClass(siblingTds, 'hidden');
siblingTds.forEach(function (el) {
that._addClass(el.querySelectorAll('.node'), 'slide-left');
});
} else {
var _temp2 = nodeChart.parentNode.parentNode;
siblingTds[insertPostion].parentNode.insertBefore(nodeChart.parentNode, siblingTds[insertPostion + 1]);
_temp2.remove();
that._complementLine(siblingTds[insertPostion], siblingCount, 1);
that._addClass(siblingTds, 'hidden');
that._addClass(that._getDescElements(siblingTds.slice(0, insertPostion + 1), '.node'), 'slide-right');
that._addClass(that._getDescElements(siblingTds.slice(insertPostion + 1), '.node'), 'slide-left');
}
callback();
}
});
} else {
// build the sibling nodes and parent node for the specific ndoe
var nodeCount = 0;
that.buildHierarchy.call(that, that.chart, nodeData, 0, function () {
if (++nodeCount === siblingCount) {
var _temp3 = nodeChart.nextElementSibling.children[3].children[insertPostion],
td = document.createElement('td');
td.setAttribute('colspan', 2);
td.appendChild(nodeChart);
_temp3.parentNode.insertBefore(td, _temp3.nextElementSibling);
that._complementLine(_temp3, siblingCount, 1);
var temp2 = that._closest(nodeChart, function (el) {
return el.classList && el.classList.contains('nodes');
}).parentNode.children[0];
temp2.classList.add('hidden');
that._addClass(Array.from(temp2.querySelectorAll('.node')), 'slide-down');
var temp3 = _this9._siblings(nodeChart.parentNode);
that._addClass(temp3, 'hidden');
that._addClass(that._getDescElements(temp3.slice(0, insertPostion), '.node'), 'slide-right');
that._addClass(that._getDescElements(temp3.slice(insertPostion), '.node'), 'slide-left');
callback();
}
});
}
}
}, {
key: 'addSiblings',
value: function addSiblings(node, data) {
var that = this;
this.chart.dataset.inEdit = 'addSiblings';
gitextract_4td3omsd/
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── build/
│ ├── rollup.config.js
│ └── webpack.config.js
├── dist/
│ ├── style.css
│ ├── vue-orgchart.common.js
│ ├── vue-orgchart.esm.js
│ └── vue-orgchart.js
├── docs/
│ ├── .nojekyll
│ ├── README.md
│ ├── _coverpage.md
│ ├── _navbar.md
│ ├── _sidebar.md
│ ├── basic.md
│ ├── drag.md
│ ├── edit.md
│ ├── exportpic.md
│ ├── index.html
│ ├── panzoom.md
│ ├── props.md
│ ├── quickstart.md
│ ├── style.css
│ └── zh-cn/
│ ├── README.md
│ ├── _navbar.md
│ ├── _sidebar.md
│ ├── basic.md
│ ├── drag.md
│ ├── edit.md
│ ├── exportpic.md
│ ├── panzoom.md
│ ├── props.md
│ └── quickstart.md
├── examples/
│ ├── Ajax.vue
│ ├── App.vue
│ ├── data/
│ │ ├── basic.js
│ │ ├── edit.js
│ │ └── index.js
│ ├── index.html
│ ├── main.js
│ └── store/
│ ├── index.js
│ └── service.js
├── package.json
├── src/
│ ├── components/
│ │ ├── VoBasic.vue
│ │ └── VoEdit.vue
│ ├── index.js
│ └── lib/
│ ├── lodash.js
│ ├── orgchart.js
│ └── utils.js
└── test/
├── index.js
├── karma.conf.js
└── load/
└── webpack/
├── basic/
│ ├── App.vue
│ ├── index.js
│ └── webpack.config.js
├── edit/
│ ├── App.vue
│ ├── index.js
│ └── webpack.config.js
└── index.html
SYMBOL INDEX (315 symbols across 10 files)
FILE: build/rollup.config.js
function build (line 42) | async function build(item) {
FILE: build/webpack.config.js
function resolve (line 8) | function resolve (dir) {
FILE: dist/vue-orgchart.common.js
function defineProperties (line 28) | function defineProperties(target, props) {
function OrgChart (line 110) | function OrgChart(options) {
function handler (line 331) | function handler() {
function listCacheClear (line 2204) | function listCacheClear() {
function eq (line 2241) | function eq(value, other) {
function assocIndexOf (line 2253) | function assocIndexOf(array, key) {
function listCacheDelete (line 2278) | function listCacheDelete(key) {
function listCacheGet (line 2304) | function listCacheGet(key) {
function listCacheHas (line 2320) | function listCacheHas(key) {
function listCacheSet (line 2334) | function listCacheSet(key, value) {
function ListCache (line 2354) | function ListCache(entries) {
function stackClear (line 2379) | function stackClear() {
function stackDelete (line 2393) | function stackDelete(key) {
function stackGet (line 2410) | function stackGet(key) {
function stackHas (line 2423) | function stackHas(key) {
function getRawTag (line 2462) | function getRawTag(value) {
function objectToString (line 2499) | function objectToString(value) {
function baseGetTag (line 2517) | function baseGetTag(value) {
function isObject (line 2551) | function isObject(value) {
function isFunction (line 2579) | function isFunction(value) {
function isMasked (line 2605) | function isMasked(func) {
function toSource (line 2622) | function toSource(func) {
function baseIsNative (line 2667) | function baseIsNative(value) {
function getValue (line 2683) | function getValue(object, key) {
function getNative (line 2695) | function getNative(object, key) {
function hashClear (line 2713) | function hashClear() {
function hashDelete (line 2728) | function hashDelete(key) {
function hashGet (line 2752) | function hashGet(key) {
function hashHas (line 2776) | function hashHas(key) {
function hashSet (line 2794) | function hashSet(key, value) {
function Hash (line 2808) | function Hash(entries) {
function mapCacheClear (line 2833) | function mapCacheClear() {
function isKeyable (line 2849) | function isKeyable(value) {
function getMapData (line 2864) | function getMapData(map, key) {
function mapCacheDelete (line 2880) | function mapCacheDelete(key) {
function mapCacheGet (line 2895) | function mapCacheGet(key) {
function mapCacheHas (line 2908) | function mapCacheHas(key) {
function mapCacheSet (line 2922) | function mapCacheSet(key, value) {
function MapCache (line 2938) | function MapCache(entries) {
function stackSet (line 2969) | function stackSet(key, value) {
function Stack (line 2992) | function Stack(entries) {
function baseAssignValue (line 3021) | function baseAssignValue(object, key, value) {
function assignMergeValue (line 3043) | function assignMergeValue(object, key, value) {
function createBaseFor (line 3057) | function createBaseFor(fromRight) {
function cloneBuffer (line 3108) | function cloneBuffer(buffer, isDeep) {
function cloneArrayBuffer (line 3129) | function cloneArrayBuffer(arrayBuffer) {
function cloneTypedArray (line 3143) | function cloneTypedArray(typedArray, isDeep) {
function copyArray (line 3156) | function copyArray(source, array) {
function object (line 3179) | function object() {}
function overArg (line 3202) | function overArg(func, transform) {
function isPrototype (line 3221) | function isPrototype(value) {
function initCloneObject (line 3235) | function initCloneObject(object) {
function isObjectLike (line 3265) | function isObjectLike(value) {
function baseIsArguments (line 3279) | function baseIsArguments(value) {
function isLength (line 3369) | function isLength(value) {
function isArrayLike (line 3399) | function isArrayLike(value) {
function isArrayLikeObject (line 3428) | function isArrayLikeObject(value) {
function stubFalse (line 3445) | function stubFalse() {
function isPlainObject (line 3527) | function isPlainObject(value) {
function baseIsTypedArray (line 3590) | function baseIsTypedArray(value) {
function baseUnary (line 3602) | function baseUnary(func) {
function assignValue (line 3665) | function assignValue(object, key, value) {
function copyObject (line 3683) | function copyObject(source, props, object, customizer) {
function baseTimes (line 3718) | function baseTimes(n, iteratee) {
function isIndex (line 3742) | function isIndex(value, length) {
function arrayLikeKeys (line 3763) | function arrayLikeKeys(value, inherited) {
function nativeKeysIn (line 3799) | function nativeKeysIn(object) {
function baseKeysIn (line 3822) | function baseKeysIn(object) {
function keysIn (line 3860) | function keysIn(object) {
function toPlainObject (line 3888) | function toPlainObject(value) {
function baseMergeDeep (line 3907) | function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customi...
function baseMerge (line 3980) | function baseMerge(object, source, srcIndex, customizer, stack) {
function identity (line 4018) | function identity(value) {
function apply (line 4032) | function apply(func, thisArg, args) {
function overRest (line 4054) | function overRest(func, start, transform) {
function constant (line 4094) | function constant(value) {
function shortOut (line 4133) | function shortOut(func) {
function baseRest (line 4171) | function baseRest(func, start) {
function isIterateeCall (line 4185) | function isIterateeCall(value, index, object) {
function createAssigner (line 4206) | function createAssigner(assigner) {
FILE: dist/vue-orgchart.esm.js
function defineProperties (line 24) | function defineProperties(target, props) {
function OrgChart (line 106) | function OrgChart(options) {
function handler (line 327) | function handler() {
function listCacheClear (line 2200) | function listCacheClear() {
function eq (line 2237) | function eq(value, other) {
function assocIndexOf (line 2249) | function assocIndexOf(array, key) {
function listCacheDelete (line 2274) | function listCacheDelete(key) {
function listCacheGet (line 2300) | function listCacheGet(key) {
function listCacheHas (line 2316) | function listCacheHas(key) {
function listCacheSet (line 2330) | function listCacheSet(key, value) {
function ListCache (line 2350) | function ListCache(entries) {
function stackClear (line 2375) | function stackClear() {
function stackDelete (line 2389) | function stackDelete(key) {
function stackGet (line 2406) | function stackGet(key) {
function stackHas (line 2419) | function stackHas(key) {
function getRawTag (line 2458) | function getRawTag(value) {
function objectToString (line 2495) | function objectToString(value) {
function baseGetTag (line 2513) | function baseGetTag(value) {
function isObject (line 2547) | function isObject(value) {
function isFunction (line 2575) | function isFunction(value) {
function isMasked (line 2601) | function isMasked(func) {
function toSource (line 2618) | function toSource(func) {
function baseIsNative (line 2663) | function baseIsNative(value) {
function getValue (line 2679) | function getValue(object, key) {
function getNative (line 2691) | function getNative(object, key) {
function hashClear (line 2709) | function hashClear() {
function hashDelete (line 2724) | function hashDelete(key) {
function hashGet (line 2748) | function hashGet(key) {
function hashHas (line 2772) | function hashHas(key) {
function hashSet (line 2790) | function hashSet(key, value) {
function Hash (line 2804) | function Hash(entries) {
function mapCacheClear (line 2829) | function mapCacheClear() {
function isKeyable (line 2845) | function isKeyable(value) {
function getMapData (line 2860) | function getMapData(map, key) {
function mapCacheDelete (line 2876) | function mapCacheDelete(key) {
function mapCacheGet (line 2891) | function mapCacheGet(key) {
function mapCacheHas (line 2904) | function mapCacheHas(key) {
function mapCacheSet (line 2918) | function mapCacheSet(key, value) {
function MapCache (line 2934) | function MapCache(entries) {
function stackSet (line 2965) | function stackSet(key, value) {
function Stack (line 2988) | function Stack(entries) {
function baseAssignValue (line 3017) | function baseAssignValue(object, key, value) {
function assignMergeValue (line 3039) | function assignMergeValue(object, key, value) {
function createBaseFor (line 3053) | function createBaseFor(fromRight) {
function cloneBuffer (line 3104) | function cloneBuffer(buffer, isDeep) {
function cloneArrayBuffer (line 3125) | function cloneArrayBuffer(arrayBuffer) {
function cloneTypedArray (line 3139) | function cloneTypedArray(typedArray, isDeep) {
function copyArray (line 3152) | function copyArray(source, array) {
function object (line 3175) | function object() {}
function overArg (line 3198) | function overArg(func, transform) {
function isPrototype (line 3217) | function isPrototype(value) {
function initCloneObject (line 3231) | function initCloneObject(object) {
function isObjectLike (line 3261) | function isObjectLike(value) {
function baseIsArguments (line 3275) | function baseIsArguments(value) {
function isLength (line 3365) | function isLength(value) {
function isArrayLike (line 3395) | function isArrayLike(value) {
function isArrayLikeObject (line 3424) | function isArrayLikeObject(value) {
function stubFalse (line 3441) | function stubFalse() {
function isPlainObject (line 3523) | function isPlainObject(value) {
function baseIsTypedArray (line 3586) | function baseIsTypedArray(value) {
function baseUnary (line 3598) | function baseUnary(func) {
function assignValue (line 3661) | function assignValue(object, key, value) {
function copyObject (line 3679) | function copyObject(source, props, object, customizer) {
function baseTimes (line 3714) | function baseTimes(n, iteratee) {
function isIndex (line 3738) | function isIndex(value, length) {
function arrayLikeKeys (line 3759) | function arrayLikeKeys(value, inherited) {
function nativeKeysIn (line 3795) | function nativeKeysIn(object) {
function baseKeysIn (line 3818) | function baseKeysIn(object) {
function keysIn (line 3856) | function keysIn(object) {
function toPlainObject (line 3884) | function toPlainObject(value) {
function baseMergeDeep (line 3903) | function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customi...
function baseMerge (line 3976) | function baseMerge(object, source, srcIndex, customizer, stack) {
function identity (line 4014) | function identity(value) {
function apply (line 4028) | function apply(func, thisArg, args) {
function overRest (line 4050) | function overRest(func, start, transform) {
function constant (line 4090) | function constant(value) {
function shortOut (line 4129) | function shortOut(func) {
function baseRest (line 4167) | function baseRest(func, start) {
function isIterateeCall (line 4181) | function isIterateeCall(value, index, object) {
function createAssigner (line 4202) | function createAssigner(assigner) {
FILE: dist/vue-orgchart.js
function defineProperties (line 30) | function defineProperties(target, props) {
function OrgChart (line 112) | function OrgChart(options) {
function handler (line 333) | function handler() {
function listCacheClear (line 2206) | function listCacheClear() {
function eq (line 2243) | function eq(value, other) {
function assocIndexOf (line 2255) | function assocIndexOf(array, key) {
function listCacheDelete (line 2280) | function listCacheDelete(key) {
function listCacheGet (line 2306) | function listCacheGet(key) {
function listCacheHas (line 2322) | function listCacheHas(key) {
function listCacheSet (line 2336) | function listCacheSet(key, value) {
function ListCache (line 2356) | function ListCache(entries) {
function stackClear (line 2381) | function stackClear() {
function stackDelete (line 2395) | function stackDelete(key) {
function stackGet (line 2412) | function stackGet(key) {
function stackHas (line 2425) | function stackHas(key) {
function getRawTag (line 2464) | function getRawTag(value) {
function objectToString (line 2501) | function objectToString(value) {
function baseGetTag (line 2519) | function baseGetTag(value) {
function isObject (line 2553) | function isObject(value) {
function isFunction (line 2581) | function isFunction(value) {
function isMasked (line 2607) | function isMasked(func) {
function toSource (line 2624) | function toSource(func) {
function baseIsNative (line 2669) | function baseIsNative(value) {
function getValue (line 2685) | function getValue(object, key) {
function getNative (line 2697) | function getNative(object, key) {
function hashClear (line 2715) | function hashClear() {
function hashDelete (line 2730) | function hashDelete(key) {
function hashGet (line 2754) | function hashGet(key) {
function hashHas (line 2778) | function hashHas(key) {
function hashSet (line 2796) | function hashSet(key, value) {
function Hash (line 2810) | function Hash(entries) {
function mapCacheClear (line 2835) | function mapCacheClear() {
function isKeyable (line 2851) | function isKeyable(value) {
function getMapData (line 2866) | function getMapData(map, key) {
function mapCacheDelete (line 2882) | function mapCacheDelete(key) {
function mapCacheGet (line 2897) | function mapCacheGet(key) {
function mapCacheHas (line 2910) | function mapCacheHas(key) {
function mapCacheSet (line 2924) | function mapCacheSet(key, value) {
function MapCache (line 2940) | function MapCache(entries) {
function stackSet (line 2971) | function stackSet(key, value) {
function Stack (line 2994) | function Stack(entries) {
function baseAssignValue (line 3023) | function baseAssignValue(object, key, value) {
function assignMergeValue (line 3045) | function assignMergeValue(object, key, value) {
function createBaseFor (line 3059) | function createBaseFor(fromRight) {
function cloneBuffer (line 3110) | function cloneBuffer(buffer, isDeep) {
function cloneArrayBuffer (line 3131) | function cloneArrayBuffer(arrayBuffer) {
function cloneTypedArray (line 3145) | function cloneTypedArray(typedArray, isDeep) {
function copyArray (line 3158) | function copyArray(source, array) {
function object (line 3181) | function object() {}
function overArg (line 3204) | function overArg(func, transform) {
function isPrototype (line 3223) | function isPrototype(value) {
function initCloneObject (line 3237) | function initCloneObject(object) {
function isObjectLike (line 3267) | function isObjectLike(value) {
function baseIsArguments (line 3281) | function baseIsArguments(value) {
function isLength (line 3371) | function isLength(value) {
function isArrayLike (line 3401) | function isArrayLike(value) {
function isArrayLikeObject (line 3430) | function isArrayLikeObject(value) {
function stubFalse (line 3447) | function stubFalse() {
function isPlainObject (line 3529) | function isPlainObject(value) {
function baseIsTypedArray (line 3592) | function baseIsTypedArray(value) {
function baseUnary (line 3604) | function baseUnary(func) {
function assignValue (line 3667) | function assignValue(object, key, value) {
function copyObject (line 3685) | function copyObject(source, props, object, customizer) {
function baseTimes (line 3720) | function baseTimes(n, iteratee) {
function isIndex (line 3744) | function isIndex(value, length) {
function arrayLikeKeys (line 3765) | function arrayLikeKeys(value, inherited) {
function nativeKeysIn (line 3801) | function nativeKeysIn(object) {
function baseKeysIn (line 3824) | function baseKeysIn(object) {
function keysIn (line 3862) | function keysIn(object) {
function toPlainObject (line 3890) | function toPlainObject(value) {
function baseMergeDeep (line 3909) | function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customi...
function baseMerge (line 3982) | function baseMerge(object, source, srcIndex, customizer, stack) {
function identity (line 4020) | function identity(value) {
function apply (line 4034) | function apply(func, thisArg, args) {
function overRest (line 4056) | function overRest(func, start, transform) {
function constant (line 4096) | function constant(value) {
function shortOut (line 4135) | function shortOut(func) {
function baseRest (line 4173) | function baseRest(func, start) {
function isIterateeCall (line 4187) | function isIterateeCall(value, index, object) {
function createAssigner (line 4208) | function createAssigner(assigner) {
FILE: examples/store/index.js
method getAreas (line 12) | async getAreas ({ commit }) {
method 'getAreas' (line 19) | 'getAreas' (state, treeData) {
FILE: src/lib/orgchart.js
class OrgChart (line 1) | class OrgChart {
method constructor (line 2) | constructor(options) {
method name (line 96) | get name() {
method _closest (line 99) | _closest(el, fn) {
method _siblings (line 102) | _siblings(el, expr) {
method _prevAll (line 113) | _prevAll(el, expr) {
method _nextAll (line 125) | _nextAll(el, expr) {
method _isVisible (line 137) | _isVisible(el) {
method _addClass (line 140) | _addClass(elements, classNames) {
method _removeClass (line 149) | _removeClass(elements, classNames) {
method _css (line 158) | _css(elements, prop, val) {
method _removeAttr (line 163) | _removeAttr(elements, attr) {
method _one (line 168) | _one(el, type, listener, self) {
method _getDescElements (line 179) | _getDescElements(ancestors, selector) {
method _getJSON (line 185) | _getJSON(url) {
method _buildJsonDS (line 207) | _buildJsonDS(li) {
method _attachRel (line 225) | _attachRel(data, flags) {
method _repaint (line 234) | _repaint(node) {
method _isInAction (line 240) | _isInAction(node) {
method _getNodeState (line 244) | _getNodeState(node, relation) {
method getRelatedNodes (line 277) | getRelatedNodes(node, relation) {
method _switchHorizontalArrow (line 290) | _switchHorizontalArrow(node) {
method _hoverNode (line 329) | _hoverNode(event) {
method _clickNode (line 357) | _clickNode(event) {
method _buildParentNode (line 367) | _buildParentNode(currentRoot, nodeData, callback) {
method _switchVerticalArrow (line 404) | _switchVerticalArrow(arrow) {
method showParent (line 409) | showParent(node) {
method showSiblings (line 430) | showSiblings(node, direction) {
method hideSiblings (line 483) | hideSiblings(node, direction) {
method hideParent (line 580) | hideParent(node) {
method addParent (line 614) | addParent(currentRoot, data) {
method _startLoading (line 628) | _startLoading(arrow, node) {
method _endLoading (line 653) | _endLoading(arrow, node) {
method _clickTopEdge (line 668) | _clickTopEdge(event) {
method hideChildren (line 721) | hideChildren(node) {
method showChildren (line 760) | showChildren(node) {
method _buildChildNode (line 792) | _buildChildNode(appendTo, nodeData, callback) {
method addChildren (line 799) | addChildren(node, data) {
method _clickBottomEdge (line 825) | _clickBottomEdge(event) {
method _complementLine (line 870) | _complementLine(oneSibling, siblingCount, existingSibligCount) {
method _buildSiblingNode (line 888) | _buildSiblingNode(nodeChart, nodeData, callback) {
method addSiblings (line 966) | addSiblings(node, data) {
method removeNodes (line 986) | removeNodes(node) {
method _clickHorizontalEdge (line 1007) | _clickHorizontalEdge(event) {
method _clickToggleButton (line 1078) | _clickToggleButton(event) {
method _dispatchClickEvent (line 1117) | _dispatchClickEvent(event) {
method _onDragStart (line 1132) | _onDragStart(event) {
method _onDragOver (line 1218) | _onDragOver(event) {
method _onDragEnd (line 1226) | _onDragEnd(event) {
method _onDrop (line 1231) | _onDrop(event) {
method _createNode (line 1343) | _createNode(nodeData, level) {
method buildHierarchy (line 1438) | buildHierarchy(appendTo, nodeData, level, callback) {
method _clickChart (line 1550) | _clickChart(event) {
method _clickExportButton (line 1559) | _clickExportButton() {
method _loopChart (line 1599) | _loopChart(chart) {
method _loopChartDataset (line 1610) | _loopChartDataset(chart) {
method getChartJSON (line 1620) | getChartJSON() {
method getHierarchy (line 1626) | getHierarchy() {
method _onPanStart (line 1632) | _onPanStart(event) {
method _onPanning (line 1674) | _onPanning(event) {
method _onPanEnd (line 1716) | _onPanEnd(event) {
method _setChartScale (line 1726) | _setChartScale(chart, newScale) {
method _onWheeling (line 1744) | _onWheeling(event) {
method _getPinchDist (line 1751) | _getPinchDist(event) {
method _onTouchStart (line 1757) | _onTouchStart(event) {
method _onTouchMove (line 1767) | _onTouchMove(event) {
method _onTouchEnd (line 1776) | _onTouchEnd(event) {
FILE: test/index.js
function testMount (line 33) | function testMount (type, comp, item) {
function createBox (line 43) | function createBox () {
FILE: test/load/webpack/basic/webpack.config.js
function resolve (line 5) | function resolve (dir) {
FILE: test/load/webpack/edit/webpack.config.js
function resolve (line 5) | function resolve (dir) {
Condensed preview — 63 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (593K chars).
[
{
"path": ".babelrc",
"chars": 298,
"preview": "{\n \"presets\": [\n [\"latest\", {\n \"es2015\": { \"modules\": false }\n }],\n \"stage-2\"\n ],\n \"plugins\": [[\"transf"
},
{
"path": ".editorconfig",
"chars": 147,
"preview": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_"
},
{
"path": ".eslintignore",
"chars": 95,
"preview": "webpack.config.js\n/src/lib/orgchart.js\n/src/main.js\n/src/index.js\n/dist\n/examples\n/build\n/docs\n"
},
{
"path": ".eslintrc.js",
"chars": 292,
"preview": "// http://eslint.org/docs/user-guide/configuring\n\nmodule.exports = {\n root: true,\n parser: 'babel-eslint',\n parserOpt"
},
{
"path": ".gitignore",
"chars": 121,
"preview": ".DS_Store\nnode_modules/\nnpm-debug.log\nyarn-error.log\n\n# Editor directories and files\n.idea\n*.suo\n*.ntvs*\n*.njsproj\n*.sln"
},
{
"path": ".travis.yml",
"chars": 46,
"preview": "sudo: false\nlanguage: node_js\nnode_js: stable\n"
},
{
"path": "LICENSE",
"chars": 1085,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2017-present, spiritree\n\nPermission is hereby granted, free of charge, to any perso"
},
{
"path": "README.md",
"chars": 1853,
"preview": "<p align=\"center\">\n <a href=\"https://spiritree.github.io/vue-orgchart\">\n <img src=\"/assets/vue-orgchart.jpg\" alt=\"vu"
},
{
"path": "build/rollup.config.js",
"chars": 1716,
"preview": "const rollup = require('rollup')\nconst vue = require('rollup-plugin-vue')\nconst resolve = require('rollup-plugin-node-re"
},
{
"path": "build/webpack.config.js",
"chars": 1607,
"preview": "const path = require('path')\nconst webpack = require('webpack')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')"
},
{
"path": "dist/style.css",
"chars": 11374,
"preview": "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#wrapper {\n width: 50%;\n margin: 0 auto;\n}\n\n#wrappe"
},
{
"path": "dist/vue-orgchart.common.js",
"chars": 137300,
"preview": "'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar _typeof = typeof Symbol === \"function"
},
{
"path": "dist/vue-orgchart.esm.js",
"chars": 137197,
"preview": "var _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n return typeof obj"
},
{
"path": "dist/vue-orgchart.js",
"chars": 137570,
"preview": "(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n\ttypeof"
},
{
"path": "docs/.nojekyll",
"chars": 0,
"preview": ""
},
{
"path": "docs/README.md",
"chars": 423,
"preview": "## vue-orgchart\n\n> A vue wrapper for OrgChart.js.\n\n### Intro\n- First of all, thanks a lot for dabeng's great work -- [Or"
},
{
"path": "docs/_coverpage.md",
"chars": 297,
"preview": "\n\n# vue-orgchart <small>1.0.0</small>\n\n> A Vue.js wrapper for OrgChart.js.\n\n- Support import an"
},
{
"path": "docs/_navbar.md",
"chars": 60,
"preview": "- Translations\n - [:cn: 中文](/zh-cn/)\n - [:uk: English](/)\n"
},
{
"path": "docs/_sidebar.md",
"chars": 245,
"preview": "- Getting started\n - [Quick Start](quickstart)\n - [Chart Props](props)\n- Charts\n - [Basic Orgchart](basic)\n - [Pan/Z"
},
{
"path": "docs/basic.md",
"chars": 462,
"preview": "## Basic OrgChart\n\n```html\n/*vue*/\n<template>\n <vo-basic :data=\"chartData\"></vo-basic>\n</template>\n\n<script>\nexport def"
},
{
"path": "docs/drag.md",
"chars": 475,
"preview": "## Draggable OrgChart\n\n```html\n/*vue*/\n<template>\n <vo-basic :data=\"chartData\" :draggable=true></vo-basic>\n</template>\n"
},
{
"path": "docs/edit.md",
"chars": 5557,
"preview": "## Editable OrgChart\n\n```html\n/*vue*/\n<template>\n <div>\n <vo-edit :data=\"chartData\" :draggable=true></vo-edit>\n <"
},
{
"path": "docs/exportpic.md",
"chars": 518,
"preview": "## Export Picture OrgChart\n\n```html\n/*vue*/\n<template>\n <vo-basic :data=\"chartData\" :export-button=true export-filename"
},
{
"path": "docs/index.html",
"chars": 1831,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>vue-orgchart - A vue wrapper for OrgChart.js</"
},
{
"path": "docs/panzoom.md",
"chars": 487,
"preview": "## Pan/Zoom OrgChart\n\n```html\n/*vue*/\n<template>\n <vo-basic :data=\"chartData\" :pan=true :zoom=true></vo-basic>\n</templa"
},
{
"path": "docs/props.md",
"chars": 4411,
"preview": "### Vue-OrgChart props\n\n### Example\n\n`<vo-basic :data=\"chartData\" :draggable=true></vo-basic>`\n\n`<vo-edit :data=\"chartDa"
},
{
"path": "docs/quickstart.md",
"chars": 835,
"preview": "## Quick Start\n\n### Install\n```shell\nnpm install vue-orgchart -S\n```\n\n### Import in your project\n\n> `main.js`\n\n```js\nimp"
},
{
"path": "docs/style.css",
"chars": 564,
"preview": "iframe {\n border: 2px solid #eee;\n}\n\n* {\n -webkit-font-smoothing: inherit !important\n}\n\n.vuep {\n height: 460px;\n}\n\n.c"
},
{
"path": "docs/zh-cn/README.md",
"chars": 287,
"preview": "## vue-orgchart\n\n> A vue wrapper for OrgChart.js.\n\n### 前言\n- 首先感谢dabeng的Orgchart.js -- [OrgChart.js](https://github.com/d"
},
{
"path": "docs/zh-cn/_navbar.md",
"chars": 60,
"preview": "- Translations\n - [:cn: 中文](/zh-cn/)\n - [:uk: English](/)\n"
},
{
"path": "docs/zh-cn/_sidebar.md",
"chars": 203,
"preview": "- 入门\n - [快速开始](zh-cn/quickstart)\n - [图表属性](zh-cn/props)\n- 图表\n - [基础组织树图](zh-cn/basic)\n - [缩放组织树图](zh-cn/panzoom)\n -"
},
{
"path": "docs/zh-cn/basic.md",
"chars": 454,
"preview": "## 基础组织树图\n\n```html\n/*vue*/\n<template>\n <vo-basic :data=\"chartData\"></vo-basic>\n</template>\n\n<script>\nexport default {\n "
},
{
"path": "docs/zh-cn/drag.md",
"chars": 464,
"preview": "## 可拖拉组织树图\n\n```html\n/*vue*/\n<template>\n <vo-basic :data=\"chartData\" :draggable=true></vo-basic>\n</template>\n\n<script>\ne"
},
{
"path": "docs/zh-cn/edit.md",
"chars": 5547,
"preview": "## 可编辑组织树图\n\n```html\n/*vue*/\n<template>\n <div>\n <vo-edit :data=\"chartData\" :draggable=true></vo-edit>\n <div id=\"ed"
},
{
"path": "docs/zh-cn/exportpic.md",
"chars": 504,
"preview": "## 可导出组织树图图片\n\n```html\n/*vue*/\n<template>\n <vo-basic :data=\"chartData\" :export-button=true export-filename=\"testpic\"></v"
},
{
"path": "docs/zh-cn/panzoom.md",
"chars": 477,
"preview": "## 缩放组织树图\n\n\n```html\n/*vue*/\n<template>\n <vo-basic :data=\"chartData\" :pan=true :zoom=true></vo-basic>\n</template>\n\n<scri"
},
{
"path": "docs/zh-cn/props.md",
"chars": 2664,
"preview": "### 图表属性\n\n### 例子\n\n`<vo-basic :data=\"chartData\" :draggable=true></vo-basic>`\n\n`<vo-edit :data=\"chartData\" :draggable=true"
},
{
"path": "docs/zh-cn/quickstart.md",
"chars": 807,
"preview": "## 快速开始\n\n### 安装\n```shell\nnpm install vue-orgchart -S\n```\n\n### 在项目中导入\n\n> `main.js`\n\n```js\nimport 'vue-orgchart/dist/style"
},
{
"path": "examples/Ajax.vue",
"chars": 7012,
"preview": "<template>\n<div>\n <vo-edit style=\"background: #fff\"\n :data=\"areaList\"\n :exportButton=true\n :toggleCollapse=tru"
},
{
"path": "examples/App.vue",
"chars": 6526,
"preview": "<template>\n<div>\n <vo-edit style=\"background: #fff\"\n :data=\"chartData\"\n :exportButton=true\n :toggleCollapse=tr"
},
{
"path": "examples/data/basic.js",
"chars": 461,
"preview": "export default {\n name: '基础树形关系图(Basic orgchart)',\n type: 'basic',\n data: [\n {\n name: 'Basic orgchart',"
},
{
"path": "examples/data/edit.js",
"chars": 467,
"preview": "export default {\n name: '可编辑树形关系图(Editable orgchart)',\n type: 'edit',\n data: [\n {\n name: 'Editable orgc"
},
{
"path": "examples/data/index.js",
"chars": 90,
"preview": "import basic from './basic'\nimport edit from './edit'\n\nexport default {\n basic,\n edit\n}\n"
},
{
"path": "examples/index.html",
"chars": 503,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "examples/main.js",
"chars": 168,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\nimport store from './store'\nimport '../dist/style.min.css'\n\nnew Vue({\n"
},
{
"path": "examples/store/index.js",
"chars": 422,
"preview": "import Vue from 'vue'\nimport Vuex from 'vuex'\nimport { getData } from './service'\n\nVue.use(Vuex)\n\nconst state = {\n tree"
},
{
"path": "examples/store/service.js",
"chars": 182,
"preview": "import axios from 'axios'\n\nexport const getData = () => {\n return axios\n .get(\"https://easy-mock.com/mock/5a2f9181c4"
},
{
"path": "package.json",
"chars": 3086,
"preview": "{\n \"name\": \"vue-orgchart\",\n \"description\": \"A vue wrapper for OrgChart.js\",\n \"version\": \"1.1.7\",\n \"author\": {\n \"n"
},
{
"path": "src/components/VoBasic.vue",
"chars": 13185,
"preview": "<template>\n<div id=\"chart-container\" class=\"vo-basic\"></div>\n</template>\n\n<script>\nimport OrgChart from '../lib/orgchart"
},
{
"path": "src/components/VoEdit.vue",
"chars": 2175,
"preview": "<template>\n<div id=\"chart-container\" class=\"vo-edit\"></div>\n</template>\n\n<script>\nimport OrgChart from '../lib/orgchart'"
},
{
"path": "src/index.js",
"chars": 274,
"preview": "import VoBasic from '../src/components/VoBasic.vue'\nimport VoEdit from '../src/components/VoEdit.vue'\n\nexport {\n VoBasi"
},
{
"path": "src/lib/lodash.js",
"chars": 108,
"preview": "import merge from 'lodash-es/merge'\n\nexport const mergeOptions = (obj, src) => {\n return merge(obj, src)\n}\n"
},
{
"path": "src/lib/orgchart.js",
"chars": 64598,
"preview": "export default class OrgChart {\n constructor(options) {\n this._name = 'OrgChart';\n Promise.prototype.finally = fu"
},
{
"path": "src/lib/utils.js",
"chars": 5924,
"preview": "export const closest = (el, fn) => {\n return el && ((fn(el) && el !== document.querySelector('.orgchart')) ? el : close"
},
{
"path": "test/index.js",
"chars": 915,
"preview": "/* eslint-disable*/\nimport Vue from 'vue'\nimport chartData from '../examples/data/index.js'\n\nwindow.Promise = require('e"
},
{
"path": "test/karma.conf.js",
"chars": 522,
"preview": "module.exports = function (config) {\n config.set({\n frameworks: ['jasmine'],\n files: [\n './index.js'\n ],\n"
},
{
"path": "test/load/webpack/basic/App.vue",
"chars": 520,
"preview": "<template>\n <vo-basic :data=\"chartData\"></vo-basic>\n</template>\n\n<script>\nimport { VoBasic } from '../../../../dist/vue"
},
{
"path": "test/load/webpack/basic/index.js",
"chars": 163,
"preview": "\nimport Vue from 'vue'\nimport App from './App.vue'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\nnew Vu"
},
{
"path": "test/load/webpack/basic/webpack.config.js",
"chars": 1141,
"preview": "const webpack = require('webpack')\nconst path = require('path')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')"
},
{
"path": "test/load/webpack/edit/App.vue",
"chars": 516,
"preview": "<template>\n <vo-edit :data=\"chartData\"></vo-edit>\n</template>\n\n<script>\nimport { VoEdit } from '../../../../dist/vue-or"
},
{
"path": "test/load/webpack/edit/index.js",
"chars": 163,
"preview": "\nimport Vue from 'vue'\nimport App from './App.vue'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\nnew Vu"
},
{
"path": "test/load/webpack/edit/webpack.config.js",
"chars": 1141,
"preview": "const webpack = require('webpack')\nconst path = require('path')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')"
},
{
"path": "test/load/webpack/index.html",
"chars": 290,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
}
]
About this extraction
This page contains the full source code of the spiritree/vue-orgchart GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 63 files (555.6 KB), approximately 145.4k tokens, and a symbol index with 315 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.