orgchart 4.0.1 → 6.0.0

package/gulpfile.js

@@ -1,17 +1,32 @@
-var gulp = require('gulp');
-var browserSync = require('browser-sync').create();
-var mocha = require('gulp-mocha');
-var uglify = require('gulp-uglify');
-var rename = require("gulp-rename");
-var del = require('del');
-var eslint = require('gulp-eslint');
-var merge = require('merge-stream');
-var csslint = require('gulp-csslint');
-var cleanCSS = require('gulp-clean-css');
-var sourcemaps = require('gulp-sourcemaps');
-var cypress = require('cypress');
-var jest = require('gulp-jest').default;
-var paths = {
+const gulp = require('gulp');
+const { spawn } = require('node:child_process');
+const browserSync = require('browser-sync').create();
+const uglify = require('gulp-uglify');
+const rename = require("gulp-rename");
+const eslint = require('gulp-eslint');
+const merge = require('ordered-read-streams');
+const csslint = require('gulp-csslint');
+const cleanCSS = require('gulp-clean-css');
+const sourcemaps = require('gulp-sourcemaps');
+const cypress = require('cypress');
+const jest = require('gulp-jest').default;
+const deletePaths = (patterns) => import('del').then(({ deleteAsync }) => deleteAsync(patterns));
+const runMocha = (files) => new Promise(function (resolve, reject) {
+  const mochaProcess = spawn(process.execPath, [
+    require.resolve('mocha/bin/mocha.js'),
+    '--reporter', 'spec'
+  ].concat(files), { stdio: 'inherit' });
+
+  mochaProcess.once('error', reject);
+  mochaProcess.once('exit', function (exitCode) {
+    if (exitCode === 0) {
+      resolve();
+    } else {
+      reject(new Error('Tests failed with exit code ' + exitCode));
+    }
+  });
+});
+const paths = {
   src: 'src',
   srcFiles: 'src/**/*',
   srcHTML: 'src/**/*.html',
@@ -33,27 +48,23 @@ var paths = {
 };
 
 gulp.task('unit-tests', function () {
-  return gulp.src(['test/unit/*.js'], {read: false})
-    .pipe(mocha({reporter: 'spec'}));
+  return runMocha(['test/unit/*.js']);
 });
 
 gulp.task('integration-tests', gulp.series('unit-tests', function () {
-  return gulp.src(['test/integration/*.js'], {read: false})
-    .pipe(mocha({reporter: 'spec'}));
+  return runMocha(['test/integration/*.js']);
 }));
 
 gulp.task('addAssets', gulp.series('integration-tests', function () {
-  var jsFiles = gulp.src([
+  const jsFiles = gulp.src([
       paths.srcJS,
-      'node_modules/jquery/dist/jquery.min.js',
-      'node_modules/jquery-mockjax/dist/jquery.mockjax.min.js',
       'node_modules/html2canvas/dist/html2canvas.min.js',
       'node_modules/jspdf/dist/jspdf.umd.min.js',
       'node_modules/json-digger/dist/json-digger.js'
     ])
     .pipe(gulp.dest(paths.demoJSFolder));
 
-  var cssFiles = gulp.src(paths.srcCSS)
+  const cssFiles = gulp.src(paths.srcCSS)
     .pipe(gulp.dest(paths.demoCSSFolder));
 
   return merge(jsFiles, cssFiles);
@@ -74,7 +85,7 @@ gulp.task('e2e-tests', gulp.series('addAssets', function () {
 gulp.task('test', gulp.series('e2e-tests'));
 
 gulp.task('cleanupJS', function() {
-  return del([paths.distJSFolder + '/**']);
+  return deletePaths([paths.distJSFolder + '/**']);
 });
 
 gulp.task('eslint', function () {
@@ -88,13 +99,13 @@ gulp.task('js', gulp.series('cleanupJS', 'eslint', 'test', function () {
     .pipe(gulp.dest(paths.distJSFolder))
     .pipe(sourcemaps.init())
     .pipe(uglify())
-    .pipe(rename('jquery.orgchart.min.js'))
+    .pipe(rename('orgchart.min.js'))
     .pipe(sourcemaps.write('./'))
     .pipe(gulp.dest(paths.distJSFolder));
 }));
 
 gulp.task('cleanupCSS', function() {
-  return del([paths.distCSSFolder + '/**']);
+  return deletePaths([paths.distCSSFolder + '/**']);
 });
 
 gulp.task('csslint', function() {
@@ -113,7 +124,7 @@ gulp.task('css', gulp.series('cleanupCSS', 'csslint', function () {
   return gulp.src(paths.srcCSS)
     .pipe(gulp.dest(paths.distCSSFolder))
     .pipe(cleanCSS())
-    .pipe(rename('jquery.orgchart.min.css'))
+    .pipe(rename('orgchart.min.css'))
     .pipe(gulp.dest(paths.distCSSFolder));
 }));
 

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "orgchart",
-  "version": "4.0.1",
-  "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
-  "main": "./dist/js/jquery.orgchart.min.js",
+  "version": "6.0.0",
+  "description": "Simple and direct organization chart(tree-like hierarchy) library based on pure DOM.",
+  "main": "./dist/js/orgchart.min.js",
   "style": [
-    "./dist/css/jquery.orgchart.min.css"
+    "./dist/css/orgchart.min.css"
   ],
   "scripts": {
     "test": "gulp test",
     "unit-tests": "gulp unit-tests",
+    "integration-tests": "gulp integration-tests",
+    "e2e-tests": "gulp e2e-tests",
+    "addAssets": "gulp addAssets",
     "build": "gulp build",
     "start": "gulp serve",
     "cypress:open": "cypress open"
@@ -18,11 +21,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/dabeng/OrgChart.git"
+    "url": "git+https://github.com/dabeng/OrgChart.git"
   },
   "keywords": [
-    "jquery",
-    "plugin",
+    "dom",
     "organization",
     "chart",
     "orgchart",
@@ -38,36 +40,34 @@
   "homepage": "https://github.com/dabeng/OrgChart#readme",
   "dependencies": {
     "html2canvas": "^1.4.1",
-    "jquery": "^3.6.2",
-    "jquery-mockjax": "^2.6.0",
     "json-digger": "^2.0.2",
-    "jspdf": "^2.5.1"
+    "jspdf": "^4.2.1"
   },
   "devDependencies": {
-    "browser-sync": "^2.26.7",
-    "chai": "^4.2.0",
-    "cypress": "^13.2.0",
-    "del": "^3.0.0",
-    "gulp": "^4.0.2",
-    "gulp-clean-css": "^3.10.0",
+    "browser-sync": "^3.0.4",
+    "chai": "^6.2.2",
+    "cypress": "^15.20.0",
+    "del": "^8.0.1",
+    "gulp": "^5.0.1",
+    "gulp-clean-css": "^4.3.0",
     "gulp-csslint": "^1.0.1",
-    "gulp-eslint": "^4.0.2",
-    "gulp-inject": "^4.3.2",
-    "gulp-jest": "^4.0.3",
-    "gulp-mocha": "^8.0.0",
-    "gulp-rename": "^1.4.0",
-    "gulp-sourcemaps": "^2.6.5",
+    "gulp-eslint": "^6.0.0",
+    "gulp-inject": "^5.0.5",
+    "gulp-jest": "^4.0.4",
+    "gulp-mocha": "^10.0.1",
+    "gulp-rename": "^2.1.0",
+    "gulp-sourcemaps": "^3.0.0",
     "gulp-uglify": "^3.0.2",
-    "jest": "^29.3.1",
-    "jest-cli": "^29.3.1",
-    "jest-image-snapshot": "^6.1.0",
-    "jest-puppeteer": "^4.3.0",
-    "jsdom": "^16.5.0",
+    "jest": "^30.4.2",
+    "jest-cli": "^30.4.2",
+    "jest-image-snapshot": "^6.5.2",
+    "jest-puppeteer": "^11.0.0",
+    "jsdom": "^30.0.1",
     "jsdom-global": "^3.0.2",
-    "merge-stream": "^1.0.1",
-    "mocha": "^10.2.0",
-    "puppeteer": "^1.20.0",
-    "sinon": "^4.5.0",
-    "sinon-chai": "^2.14.0"
+    "mocha": "^11.8.0",
+    "ordered-read-streams": "^2.0.0",
+    "puppeteer": "^25.5.0",
+    "sinon": "^22.1.0",
+    "sinon-chai": "^4.0.1"
   }
 }

package/src/css/{jquery.orgchart.css → orgchart.css}

@@ -1,5 +1,5 @@
 /*
- * jQuery OrgChart Plugin
+ * JavaScript OrgChart Component
  * https://github.com/dabeng/OrgChart
  *
  * Copyright 2016, dabeng
@@ -51,7 +51,9 @@
 }
 
 .orgchart ~ .mask {
-  position: absolute;
+  position: sticky;
+  width: 100%;
+  height: 100%;
   top: 0;
   right: 0;
   bottom: 0;
@@ -83,6 +85,75 @@
   list-style: none;
   padding-left: 0;
   margin: 0;
+  justify-content: center;
+}
+
+.orgchart-minimap {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  z-index: 25;
+  width: 180px;
+  height: 120px;
+  padding: 8px;
+  border: 1px solid rgba(68, 68, 68, 0.18);
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
+  box-sizing: border-box;
+}
+
+.orgchart-minimap-stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 5px;
+  background-image: linear-gradient(rgba(68, 68, 68, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(68, 68, 68, 0.05) 1px, transparent 1px);
+  background-size: 10px 10px;
+  background-color: #f9fbfc;
+}
+
+.orgchart-minimap-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.orgchart-minimap-node {
+  position: absolute;
+  min-width: 6px;
+  height: 18px;
+  border-radius: 0;
+  opacity: 1;
+  box-shadow: none;
+}
+
+.orgchart-minimap .orgchart,
+.orgchart-minimap .orgchart ul,
+.orgchart-minimap .orgchart li,
+.orgchart-minimap .orgchart .node,
+.orgchart-minimap .orgchart .edge,
+.orgchart-minimap .orgchart .verticalNodes,
+.orgchart-minimap .orgchart .verticalNode,
+.orgchart-minimap .orgchart .nodes,
+.orgchart-minimap-node {
+  pointer-events: none;
+}
+
+.orgchart-minimap-viewport {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 12px;
+  min-height: 12px;
+  border: 2px solid rgba(28, 111, 197, 0.9);
+  border-radius: 4px;
+  background-color: rgba(28, 111, 197, 0.12);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 999px rgba(255, 255, 255, 0.12);
+  box-sizing: border-box;
+  cursor: move;
 }
 
 .orgchart .hierarchy {
@@ -91,13 +162,71 @@
 
 /* styles of link lines */
 .orgchart .hierarchy::before {
+  box-sizing: border-box;
   content: "";
   position: absolute;
   top: -11px; /* -(background square size + half width of line) */
   left: 0;
   width: 100%;
+  border-color: rgba(217, 83, 79, 0.8);
+  border-style: solid;
+  border-width: 2px 0 0 0;
+}
+
+/* 本姓人与上一层父母的连线，借助伪元素::before实现 */
+/* 处理同一层中特殊的首节点 */
+.orgchart .couple:first-child:not(:only-child)::before {
+  width: calc(100% - 69px); /* half width of hierarchy - half width of node - node's padding - node's border width */
+  left: 69px;
+}
+
+/* 处理同一层中特殊的末节点 */
+.orgchart .couple:last-child:not(:only-child)::before {
+  width: calc(50% + 71px);
+  left: 0;
+}
+
+.orgchart .hierarchy.couple:only-child::before {
+  width: 142px; /* half of node's width + link's width */
+  left: calc(50% - 71px); /* half width of node - half of link width */
+}
+
+/* 在family tree中，一个夫妻组合里，本姓人只有一个，外姓人可能有多个 */
+/* 我们通过水平的连线来表示他们存在婚姻关系，借助伪元素::after实现 */
+.orgchart .hierarchy.spouse:not(.couple)::after {
+  content: "";
+  position: absolute;
+  border-top: 2px solid rgba(217, 83, 79, 0.8);
+  box-sizing: border-box;
+  z-index: 0;
+  top: 24px;
+  width: var(--ft-width);
+  left: var(--ft-left-offset);
+}
+
+/* 一夫一妻情况下的连线 */
+.orgchart .couple {
+  white-space: nowrap;
+}
+
+.orgchart .couple:has(> .nodes) > .node:first-child::after {
+  content: "";
+  position: absolute;
+  top: 24px;
+  left: calc(100% + 1px);
+  width: 2px;
+  height: 33px;
+  background-color: rgba(217, 83, 79, 0.8);
+}
+.orgchart .couple::after {
+  content: "";
+  position: absolute;
   border-top: 2px solid rgba(217, 83, 79, 0.8);
   box-sizing: border-box;
+  z-index: 0;
+  top: 24px;
+  width: 20px;
+  left: calc(50% - 10px); /* half of hierarchy - node's padding width - node's border with */
 }
 
 .orgchart .hierarchy:first-child::before,
@@ -111,7 +240,7 @@
   width: calc(50% + 1px);
 }
 
-.orgchart .hierarchy:not(.hidden):only-child::before {
+.orgchart .hierarchy:not(.hidden):not(.spouse):only-child::before {
   width: 2px;
 }
 
@@ -122,17 +251,17 @@
 .orgchart .isSiblingsCollapsed.left-sibs:last-child:before,
 .orgchart .isCollapsedSibling::before,
 .orgchart .isCollapsedSibling .hierarchy::before,
-.orgchart .isChildrenCollapsed > .node:not(:only-child)::after,
+.orgchart .hierarchy.isChildrenCollapsed:not(.couple) > .node:has(+ .nodes)::after,
 .orgchart .isCollapsedDescendant::before,
 .orgchart .isCollapsedDescendant > .node::before,
 .orgchart .isCollapsedDescendant > .node::after,
 .orgchart .isAncestorsCollapsed:only-child::before,
-.orgchart .isAncestorsCollapsed > .node::before {
+.orgchart .isAncestorsCollapsed > .node:not(.outsider)::before {
   content: none;
 }
 
 /* excluding leaf node */
-.orgchart .node:not(:only-child)::after {
+.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after {
   content: "";
   position: absolute;
   bottom: -12px; /* -(background square size + node's border width) */
@@ -158,14 +287,24 @@
 .orgchart > ul > li > ul li > .node::before {
   content: "";
   position: absolute;
-  top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */ 
   left: calc(50% - 1px);
   width: 2px;
-  height: var(--height, 10px); /* fallback value = background square size */
   background-color: rgba(217, 83, 79, 0.8);
+  top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */
+  height: var(--height, 10px); /* fallback value = background square size */
 }
 
-.orgchart > ul > li > ul li.isSiblingsCollapsed > .node::before {
+.orgchart > ul > li > ul li > .node.outsider::before {
+  background-color: unset;
+  background-image: repeating-linear-gradient(
+    to bottom,
+    rgba(217, 83, 79, 0.8) 0 2px,
+    transparent 2px 4px
+  );
+  background-repeat: repeat-y;
+}
+
+.orgchart > ul > li > ul .isSiblingsCollapsed > .node::before {
   top: var(--top-cross-point, -12px);
   height: var(--height-cross-point, 10px);
 }
@@ -179,6 +318,8 @@
   padding: 3px;
   border: 2px dashed transparent;
   text-align: center;
+  transition: transform 0.3s, opacity 0.3s;
+  z-index: 1;
 }
 
 .orgchart.l2r .node, .orgchart.r2l .node {
@@ -190,7 +331,7 @@
   background-color: rgba(238, 217, 54, 0.5);
   transition: .5s;
   cursor: default;
-  z-index: 20;
+  z-index: 2;
 }
 
 .orgchart .node.focused {
@@ -402,28 +543,61 @@
   bottom: -2px;
   width: 16px;
   height: 16px;
+	visibility: hidden;
+	background-color: rgba(68, 157, 68, 0.6);
+}
+
+.orgchart .node:hover .toggleBtn {
+	visibility: visible;
 }
 
 .orgchart .node .toggleBtn::before {
-  background-color: rgba(68, 157, 68, 0.6);
+	content: "";
   position: absolute;
-  left: 0;
-  bottom: 0;
+  left: 3px;
+  top: 7px;
+  box-sizing: border-box;
+  width: 10px;
+  height: 2px;
+  border-radius: 1px;
+  background-color: #fff;
+  display: none;
 }
 
-.orgchart .node .toggleBtn:hover::before {
+.orgchart .node .toggleBtn:hover {
   background-color: #449d44;
 }
 
+.orgchart .node .toggleBtn::after {
+	content: "";
+	position: absolute;
+	left: 7px;
+	top: 3px;
+	width: 2px;
+	height: 10px;
+	border-radius: 1px;
+	background-color: #fff;
+  display: none;
+}
+
+.orgchart .node .toggleBtn.oci-plus-square::before,
+.orgchart .node .toggleBtn.oci-plus-square::after {
+  display: block;
+}
+
+.orgchart .node .toggleBtn.oci-minus-square::before {
+  display: block;
+}
+
+.orgchart .node .toggleBtn.oci-minus-square::after {
+  display: none;
+}
+
 .oc-export-btn {
   margin-left: 0.5rem;
   padding: 0.5rem 1rem;
 }
 
-.orgchart .node {
-  transition: transform 0.3s, opacity 0.3s;
-}
-
 .orgchart .slide-down {
   opacity: 0;
   transform: translateY(40px);
@@ -479,8 +653,8 @@
   margin-bottom: 0;
 }
 
-.orgchart .nodes.vertical .node::before,
-.orgchart .nodes.vertical .node::after {
+.orgchart .nodes.vertical .hierarchy .node::before,
+.orgchart .nodes.vertical .hierarchy .node::after {
   content: none;
 }
 
@@ -495,20 +669,21 @@
   content: '';
   position: absolute;
   left: -6px; /* -(background square size + half width of line */
+  width: 11px; /* background square size + half width of line */
   border-color: rgba(217, 83, 79, 0.8);
   border-style: solid;
-  border-width: 0 0 2px 2px;
 }
 
 .orgchart .nodes.vertical .hierarchy::before {
-  top: 0px;
-  height: 26px; /* node top half's height(25px) + half width of line */
-  width: 11px; /* background square size + half width of line */
+  height: 26px;
+  top: 0;
+  border-width: 0 0 2px 2px;
 }
 
 .orgchart .nodes.vertical .hierarchy::after {
+  height: calc(100% - 24px); /* node top half's height(25px) + half width of line */
   bottom: 0;
-  height: calc(100% - 24px); /* height of hierarchy - (node top half's height(25px) - half width of line) */
+  border-width: 0 0 0 2px;
 }
 
 .orgchart .nodes.vertical .hierarchy:last-child::after {
@@ -516,7 +691,6 @@
 }
 
 .orgchart .nodes.vertical > .hierarchy:first-child::before {
-  box-sizing: border-box;
   top: -11px; /* -(background square size + half width of line) */
   height: 35px; /* node top half's height + node padding + node border width + background square size */
   width: calc(50% + 2px);
@@ -524,19 +698,16 @@
 }
 
 .orgchart .nodes.vertical > .hierarchy:first-child::after {
-  box-sizing: border-box;
   top: 24px; /* node bottom half's height(25px) - half border width of line */
-  width: 11px; /* backgroud square size + half border width of line */
   border-width: 2px 0 0 2px;
 }
 
-.orgchart .nodes.vertical > .hierarchy:first-child:last-child::after {
+.orgchart .nodes.vertical > .hierarchy:only-child::after {
   border-width: 2px 0 0 0;
 }
 
 /* styles for compact nodes */
 .orgchart .node.compact {
-  position: static;
   display: grid;
   width: 140px;
   height: 50px;
@@ -544,7 +715,6 @@
 }
 
 .orgchart .node.compact.looseMode {
-  display: grid;
   width: unset;
   height: unset;
 }
@@ -587,14 +757,14 @@
   background-color: #eee;
 }
 
-.orgchart .node.compact::before {
+/* .orgchart .node.compact::before {
   top: var(--top-cross-point, -10px);
-}
+} */
 
 .orgchart .node.compact > .content {
   position: absolute;
-  top: 25px;
-  left: 5px;
+  top: 23px;
+  left: 3px;
 }
 
 .orgchart .node.compact.looseMode > .title {
@@ -603,8 +773,8 @@
 }
 
 .orgchart .node.compact.looseMode > .content {
-  top: 30px;
-  left: 10px;
+  top: 28px;
+  left: 8px;
 }
 
 .orgchart .node.compact > .node.compact.looseMode > .title {
@@ -627,7 +797,7 @@
   margin-bottom: 0;
 }
 
-.orgchart .node.compact .node:not(:only-child)::after {
+.orgchart .node.compact .node:has(+ .nodes)::after {
   content: unset;
 }
 
@@ -637,33 +807,11 @@
 
 .orgchart .node.compact > .backToCompactSymbol {
   position: absolute;
-  top: 5px;
-  left: 5px;
-}
-
-.orgchart .node.compact.looseMode > .backToCompactSymbol {
-  top: 10px;
-  left: 10px;
-}
-
-.orgchart .node.compact > .node.compact.looseMode > .backToCompactSymbol {
   top: 8px;
   left: 8px;
 }
 
-.orgchart .node.compact > .node.compact > .backToCompactSymbol {
-  position: absolute;
-  top: 3px;
-  left: 3px;
-}
-
 .orgchart .node.compact > .backToLooseSymbol {
-  position: absolute;
-  top: 25px;
-  right: 5px;
-}
-
-.orgchart .node.compact > .node.compact > .backToLooseSymbol {
   position: absolute;
   top: 23px;
   right: 3px;
@@ -790,27 +938,11 @@
 }
 
 .oci-plus-square::before {
-  content: "﹢";
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  text-align: center;
-  line-height: 16px;
-  background-color: #000;
-  color: #fff;
-  font-weight: bold;
+  content: "";
 }
 
 .oci-minus-square::before {
-  content: "﹣";
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  text-align: center;
-  line-height: 16px;
-  background-color: #000;
-  color: #fff;
-  font-weight: bold;
+  content: "";
 }
 
 .oci-arrow-square-up::before {