From 0fdf0f40f305388f83742ed11a2ddebd832e3e52 Mon Sep 17 00:00:00 2001 From: dabeng Date: Thu, 2 Feb 2023 00:26:52 +0800 Subject: [PATCH] fix-bug: drag&drop is not working in the hybrid chart --- demo/drag-drop-hybrid-chart.html | 81 ++++++++++++++++++++++++++++++ demo/index.html | 1 + demo/vertical-level.html | 33 ++++++------ dist/js/jquery.orgchart.js | 21 ++++++++ dist/js/jquery.orgchart.min.js | 2 +- dist/js/jquery.orgchart.min.js.map | 2 +- package-lock.json | 11 ++++ package.json | 1 + src/js/jquery.orgchart.js | 21 ++++++++ 9 files changed, 155 insertions(+), 18 deletions(-) create mode 100644 demo/drag-drop-hybrid-chart.html diff --git a/demo/drag-drop-hybrid-chart.html b/demo/drag-drop-hybrid-chart.html new file mode 100644 index 00000000..5f954e67 --- /dev/null +++ b/demo/drag-drop-hybrid-chart.html @@ -0,0 +1,81 @@ + + + + + Organization Chart Plugin + + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 4a6dda37..79987b75 100755 --- a/demo/index.html +++ b/demo/index.html @@ -143,6 +143,7 @@
  • Highlight related nodes
  • position node in specific level
  • nodes of different widths
    • +
  • drag&drop in hybrid chart
    • diff --git a/demo/vertical-level.html b/demo/vertical-level.html index 0561fba5..da356aee 100755 --- a/demo/vertical-level.html +++ b/demo/vertical-level.html @@ -20,23 +20,24 @@ $(function() { var datascource = { + 'id': '1', 'name': 'Lao Lao', 'title': 'general manager', 'children': [ - { 'name': 'Bo Miao', 'title': 'department manager' }, - { 'name': 'Su Miao', 'title': 'department manager', + { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' }, + { 'id': '3', 'name': 'Su Miao', 'title': 'department manager', 'children': [ - { 'name': 'Tie Hua', 'title': 'senior engineer' }, - { 'name': 'Hei Hei', 'title': 'senior engineer', + { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' }, + { 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer', 'children': [ - { 'name': 'Pang Pang', 'title': 'engineer' }, - { 'name': 'Dan Dan', 'title': 'UE engineer' , + { 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' }, + { 'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer' , 'children': [ - { 'name': 'Er Dan', 'title': 'engineer' }, - { 'name': 'San Dan', 'title': 'engineer', + { 'id': '8', 'name': 'Er Dan', 'title': 'engineer' }, + { 'id': '9', 'name': 'San Dan', 'title': 'engineer', 'children': [ - { 'name': 'Si Dan', 'title': 'intern' }, - { 'name': 'Wu Dan', 'title': 'intern' } + { 'id': '10', 'name': 'Si Dan', 'title': 'intern' }, + { 'id': '11', 'name': 'Wu Dan', 'title': 'intern' } ] } ]} @@ -44,14 +45,14 @@ } ] }, - { 'name': 'Hong Miao', 'title': 'department manager' }, - { 'name': 'Chun Miao', 'title': 'department manager', + { 'id': '12', 'name': 'Hong Miao', 'title': 'department manager' }, + { 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'children': [ - { 'name': 'Bing Qin', 'title': 'senior engineer' }, - { 'name': 'Yue Yue', 'title': 'senior engineer', + { 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' }, + { 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer', 'children': [ - { 'name': 'Er Yue', 'title': 'engineer' }, - { 'name': 'San Yue', 'title': 'UE engineer' } + { 'id': '16', 'name': 'Er Yue', 'title': 'engineer' }, + { 'id': '17', 'name': 'San Yue', 'title': 'UE engineer' } ] } ] diff --git a/dist/js/jquery.orgchart.js b/dist/js/jquery.orgchart.js index f78010ca..76a0b73c 100644 --- a/dist/js/jquery.orgchart.js +++ b/dist/js/jquery.orgchart.js @@ -1094,6 +1094,7 @@ }, // when user drops the node, it will be removed from original parent node and be added to new parent node dropHandler: function (event) { + var that = this; var $dropZone = $(event.delegateTarget); var $dragged = this.$chart.data('dragged'); @@ -1115,6 +1116,25 @@ if (dropEvent.isDefaultPrevented()) { return; } + // special process for hybrid chart + if (this.$chart.data('options').verticalLevel > 1) { + var datasource = this.$chart.data('options').data; + var digger = new JSONDigger(datasource, this.$chart.data('options').nodeId, 'children'); + digger.findNodeById($dragged.data('nodeData').id).then(function(draggedNode) { + var copy = Object.assign({}, draggedNode) + digger.removeNode(draggedNode.id).then(function() { + digger.findNodeById($dropZone.data('nodeData').id).then(function(dropNode) { + if (dropNode.children) { + dropNode.children.push(copy); + } else { + dropNode.children = [copy]; + } + that.init({ 'data': datasource }); + }); + }); + }); + } else { + // The folowing code snippets are used to process horizontal chart // firstly, deal with the hierarchy of drop zone if (!$dropZone.siblings('.nodes').length) { // if the drop zone is a leaf node $dropZone.append('') @@ -1142,6 +1162,7 @@ $dragZone.find('.bottomEdge, .symbol').remove() .end().siblings('.nodes').remove(); } + } }, // touchstartHandler: function (event) { diff --git a/dist/js/jquery.orgchart.min.js b/dist/js/jquery.orgchart.min.js index 07caa0dd..c3a0637f 100644 --- a/dist/js/jquery.orgchart.min.js +++ b/dist/js/jquery.orgchart.min.js @@ -1,2 +1,2 @@ -"use strict";!function(e){"object"==typeof module&&"object"==typeof module.exports?e(require("jquery"),window,document):e(jQuery,window,document)}(function(l,h,c,r){function t(e,t){this.$chartContainer=l(e),this.opts=t,this.defaultOptions={nodeTitle:"name",nodeId:"id",toggleSiblingsResp:!1,visibleLevel:999,chartClass:"",exportButton:!1,exportButtonName:"Export",exportFilename:"OrgChart",exportFileextension:"png",parentNodeSymbol:"oci-leader",draggable:!1,direction:"t2b",pan:!1,zoom:!1,zoominLimit:7,zoomoutLimit:.5}}t.prototype={init:function(e){var n=this,e=(this.options=l.extend({},this.defaultOptions,this.opts,e),this.$chartContainer),t=(this.$chart&&this.$chart.remove(),this.options.data),i=this.$chart=l("
    ",{data:{options:this.options},class:"orgchart"+(""!==this.options.chartClass?" "+this.options.chartClass:"")+("t2b"!==this.options.direction?" "+this.options.direction:""),click:function(e){l(e.target).closest(".node").length||i.find(".node.focused").removeClass("focused")}}),s=("undefined"!=typeof MutationObserver&&this.triggerInitEvent(),i.append(l('')).find(".hierarchy"));return"object"===l.type(t)?t instanceof l?this.buildHierarchy(s,this.buildJsonDS(t.children()),0,this.options):this.buildHierarchy(s,this.options.ajaxURL?t:this.attachRel(t,"00")):(i.append(''),l.ajax({url:t,dataType:"json"}).done(function(e,t,i){n.buildHierarchy(s,n.options.ajaxURL?e:n.attachRel(e,"00"),0,n.options)}).fail(function(e,t,i){console.log(i)}).always(function(){i.children(".spinner").remove()})),e.append(i),this.options.exportButton&&!l(".oc-export-btn").length&&this.attachExportButton(),this.options.pan&&this.bindPan(),this.options.zoom&&this.bindZoom(),this},triggerInitEvent:function(){var s=this,o=new MutationObserver(function(e){o.disconnect();e:for(var t=0;t",{class:"oc-export-btn",text:this.options.exportButtonName,click:function(e){e.preventDefault(),t.export()}});this.$chartContainer.after(e)},setOptions:function(e,t){return"string"==typeof e&&("pan"===e&&(t?this.bindPan():this.unbindPan()),"zoom"===e)&&(t?this.bindZoom():this.unbindZoom()),"object"==typeof e&&(e.data?this.init(e):(void 0!==e.pan&&(e.pan?this.bindPan():this.unbindPan()),void 0!==e.zoom&&(e.zoom?this.bindZoom():this.unbindZoom()))),this},panStartHandler:function(e){var s=l(e.delegateTarget);if(l(e.target).closest(".node").length||e.touches&&1n.zoomoutLimit&&on.zoomoutLimit&&o