orgchart 5.0.0 → 7.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,27 @@ 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('compatibility-tests', function () {
+  return runMocha(['test/compatibility/*.tests.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);
@@ -71,10 +86,10 @@ gulp.task('e2e-tests', gulp.series('addAssets', function () {
   });
 }));
 
-gulp.task('test', gulp.series('e2e-tests'));
+gulp.task('test', gulp.series('compatibility-tests', 'e2e-tests'));
 
 gulp.task('cleanupJS', function() {
-  return del([paths.distJSFolder + '/**']);
+  return deletePaths([paths.distJSFolder + '/**']);
 });
 
 gulp.task('eslint', function () {
@@ -88,13 +103,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 +128,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,18 @@
 {
   "name": "orgchart",
-  "version": "5.0.0",
-  "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
-  "main": "./dist/js/jquery.orgchart.min.js",
+  "version": "7.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",
+    "compatibility-tests": "mocha test/compatibility/*.tests.js",
+    "e2e-tests": "gulp e2e-tests",
+    "addAssets": "gulp addAssets",
     "build": "gulp build",
     "start": "gulp serve",
     "cypress:open": "cypress open"
@@ -18,11 +22,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 +41,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": "^3.0.2",
-    "chai": "^4.2.0",
-    "cypress": "^13.2.0",
-    "del": "^3.0.0",
-    "gulp": "^5.0.0",
-    "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;
@@ -86,19 +88,89 @@
   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 {
   position: relative;
 }
 
 /* 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-top: 2px solid rgba(217, 83, 79, 0.8);
-  box-sizing: border-box;
+  border-color: rgba(217, 83, 79, 0.8);
+  border-style: solid;
+  border-width: 2px 0 0 0;
 }
 
 /* 本姓人与上一层父母的连线，借助伪元素::before实现 */
@@ -111,7 +183,7 @@
 /* 处理同一层中特殊的末节点 */
 .orgchart .couple:last-child:not(:only-child)::before {
   width: calc(50% + 71px);
-  left: 0px;
+  left: 0;
 }
 
 .orgchart .hierarchy.couple:only-child::before {
@@ -212,24 +284,24 @@
   background-color: rgba(238, 217, 54, 0.5);
 }
 /* excluding root node */
-.orgchart > ul > li > ul li > .node:not(.outsider)::before {
+.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 > .node.outsider::before {
-  content: "";
-  position: absolute;
-  top: var(--top, -12px);
-  left: calc(50% - 1px);
-  width: 0;
-  height: var(--height, 10px);
-  border-right: 2px dotted rgba(217, 83, 79, 0.8);
+  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 {
@@ -471,19 +543,57 @@
   bottom: -2px;
   width: 16px;
   height: 16px;
+	visibility: hidden;
+	background-color: rgba(68, 157, 68, 0.6);
+}
+
+.orgchart .node:hover > .toggleBtn,
+.orgchart .node.controls-active > .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;
@@ -560,24 +670,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:only-child::before {
-  width: 11px;
 }
 
 .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 {
@@ -585,7 +692,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);
@@ -593,19 +699,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;
@@ -613,7 +716,6 @@
 }
 
 .orgchart .node.compact.looseMode {
-  display: grid;
   width: unset;
   height: unset;
 }
@@ -622,6 +724,16 @@
   display: none;
 }
 
+.orgchart .nodes.compact-family {
+  display: grid;
+  grid-template-columns: repeat(var(--compact-columns, 2), max-content);
+  gap: 10px;
+}
+
+.orgchart .node.compact:not(.looseMode) > .nodes {
+  display: none;
+}
+
 .orgchart .node.compact.looseMode > .node {
   display: inline-block;
 }
@@ -656,14 +768,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 {
@@ -672,8 +784,8 @@
 }
 
 .orgchart .node.compact.looseMode > .content {
-  top: 30px;
-  left: 10px;
+  top: 28px;
+  left: 8px;
 }
 
 .orgchart .node.compact > .node.compact.looseMode > .title {
@@ -706,33 +818,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;
@@ -859,27 +949,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 {