We_Relese/Platform/Relese/Content/Js/packagetree.js

; (function (factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        factory(require('jquery'), window, document);
    } else {
        factory(jQuery, window, document);
    }
}(function ($, window, document, undefined) {
    var treeClass = 'iwb-package-tree',
        lineClass = 'line-v',
        roundClass = 'round-box',
        nodeRoundClass = 'round-node',
        nodeStartRoundClass = 'start-node',
        nodeEndRoundClass = 'end-node',
        nodeBlockClass = 'block-node',
        leftBlockClass = 'left',
        rightBlockClass = 'right',
        roundSettingClass = 'round-setting',
        contentClass = 'content',
        blockBoxClass = 'block-box',
        objBlockBoxClass = 'obj-block-box',
        evBlockBoxClass = 'evolution-block-box',
        blockContentClass = 'block-content',
        settingBoxClass = 'setting-box',
        settingBoxClass2 = 'setting-btn-box',
        flowBoxClass = 'flow-box',
        flowInfoClass = 'flow-info',
        flowNameClass = 'flow-name',
        flowSettingClass = 'flow-setting';
    var _SettingStr = '<div class="setting {0}" data-type="0" data-setting="{0}" data-type-rs="{2}">{1}<span>已配置</span></div>',
        _NonSettingStr = '<div class="setting no-setting {0}" data-type="{0}" data-setting="{0}" data-type-rs="{2}">{1}<span>未配置</span></div>';
    var PackageTree = function (elem, opts) {
        this.$nodeContainer = $(elem);
        this.opts = opts;
        this.defaultOptions = {
            'data': {},
            'nodeTitle': 'name',
            'nodeMinWith': 280,
            'nodeId': 'id',
            'parentId': 'parentId',
            'nodeClass': '',
            'visibleLevel': 999,
            'exportButton': false,
            'exportFilename': 'PackageTree',
            'exportFileExtension': 'png',
            'draggable': true,
            'dragDelay': 200,
            'zoom': true,
            'zoomMaxLimit': 2,
            'zoomMinLimit': 0.5,
            'exportDataInput': false,
            'customMenu': 'package-menu',
            'customMenuBefore': null,
            'offset': undefined,
            'flowDetailFun': undefined,
            'settingFun': function(that) {
                console.log("setting", $(that).data("type"));
            }
        };
    };
    PackageTree.prototype = {
        init: function (opts) {
            var that = this;
            this.options = $.extend({}, this.defaultOptions, this.opts, opts || {});
            // 
            var $nodeContainer = this.$nodeContainer;
            this.$nodeTree = $nodeContainer.find('.' + treeClass);
            if (this.$nodeTree && this.$nodeTree.length > 0) {
                if (this.options.offset) {
                    this.options.offset = this.$nodeTree.offset();
                }
                this.$nodeTree.remove();
            } else {
                this.options.offset = false;
            }
            var data = this.options.data;
            var $nodeTree = this.$nodeTree = $('<div>',
                {
                    'data': { 'options': this.options },
                    'class': treeClass + (this.options.nodeClass !== '' ? ' ' + this.options.nodeClass : ''),
                });
            this.buildHierarchy($nodeTree, data);
            $nodeContainer.append($nodeTree);
            $nodeTree.find('.' + settingBoxClass2 + ' .setting').off("click.setting").on("click.setting",function() {that.options.settingFun($(this));});
            if (this.options.offset) {
                $nodeTree.offset(this.options.offset);
            }
            if (this.options.zoom) {
                this.$nodeContainer.on('wheel', { 'nt': that }, this.zoomWheel);
            }
            if (this.options.draggable) {
                this.drag(this.$nodeTree);
            }
            return this;
        },
        buildHierarchy: function ($appendTo, data) {
            var that = this;
            var opts = this.options;
            var $roundNode = $('<div>',
                { 'class': nodeRoundClass + ' ' + nodeStartRoundClass, text: (data.name ? data.name : '') + " 场景" });
            var $startBox = $('<div>', { 'class': roundClass }).append($('<div>', { 'class': lineClass }))
                .append($roundNode);
            
            that.customMenu($roundNode, function ($node,$menu) {
                $menu.find("a.dropdown-item").hide();
                $menu.find("a.dropdown-item.comp").show();
                $menu.find("a.dropdown-item.guide").show();
                if (!data.children || data.children.length===0) {
                    $menu.find("a.dropdown-item.round.add").show();
                }
                if (opts.customMenuBefore && $.type(opts.customMenuBefore) === 'function') {
                    opts.customMenuBefore($node, $menu);
                }
            });
            $appendTo.append($startBox);
            if (data.children && data.children.length > 0) {
                var i = 0;
                data.children.forEach(function (v) {
                    i++;
                    that.buildRoundInfoBox($appendTo, v, i === data.children.length);
                });
            }
            var $endNode = $('<div>', { 'class': roundClass }).append($('<div>', { 'class': lineClass })).append($('<div>', { 'class': nodeRoundClass + ' ' + nodeEndRoundClass, text: 'END' }));;
            $appendTo.append($endNode);

        },
        buildRoundInfoBox: function ($appendTo, data,isEnd) {
            var that = this;
            var $round = that.buildRoundInfo(data, isEnd);
            $appendTo.append($round);
        },
        buildRoundInfo: function (data,isEnd) {
            var that = this;
            var opts = this.options;
            var $round = $('<div>', { 'class': roundClass, data: { path: data.path, parentPath: data.parentPath } }).append($('<div>', { 'class': lineClass }));

            var blocks = $.extend([], data.children);
            var objBlock = blocks.shift();//第一个是客观情景块移除出来，剩下的是演化情景块，
            //左边是 客观情景块
            var $leftBlock = $('<div>', { 'class': nodeBlockClass + ' ' + leftBlockClass, data: { path: data.path, parentPath: data.parentPath } });
            //轮次配置
            that.buildRoundSettingBox($leftBlock, data);

            var $objBlockBox = $('<div>', { 'class': blockBoxClass + ' ' + objBlockBoxClass, data: { path: data.path, parentPath: data.parentPath } }).append('<div class="title">客观情景块 <span class="path" title="路径">(' + objBlock.path +')</span></div>');
            that.buildBlockContent($objBlockBox, objBlock);
            $leftBlock.append($objBlockBox);
            $round.append($leftBlock);

            //中间是 轮次几点
            var $roundNode = $('<div>', { 'class': nodeRoundClass + ' no-select', text: data.roundIndex, data: { path: data.path, parentPath: data.parentPath } });
            $round.append($roundNode);
            if (isEnd) {
                $roundNode.addClass("last");
            }
            that.customMenu($roundNode, function ($node, $menu) {
                $menu.find("a.dropdown-item").hide();
                $menu.find("a.dropdown-item.r-setting").show();
                $menu.find("a.dropdown-item.comp").show();
                $menu.find("a.dropdown-item.guide").show();
                if ($node.hasClass("last")) {
                    $menu.find("a.dropdown-item.round").show();
                }
                if (opts.customMenuBefore && $.type(opts.customMenuBefore) === 'function') {
                    opts.customMenuBefore($node, $menu);
                }
            });
            if (opts.draggable) {
                this.drag($roundNode);
            }

            //右边是 演化情景块
            var $rightBlock = $('<div>', { 'class': nodeBlockClass + ' ' + rightBlockClass, data: { path: data.path, parentPath: data.parentPath } });
            that.buildRightBlock($rightBlock, blocks,data.path);
            $round.append($rightBlock);

            return $round;
        },
        buildRoundSettingBox: function ($appendTo, data) {
            var that = this;
            var opts = this.options;
            var $setting = $('<div>', { 'class': roundSettingClass, data: { path: data.path, parentPath: data.parentPath } }).append('<div class="title">轮次规则配置</div>');
            var $setContent = $('<div>', { 'class': contentClass + ' ' + settingBoxClass2, data: { path: data.path, parentPath: data.parentPath } });
            var str = that.buildRoundSetting(data);
            $setContent.append(str);
            $setting.append($setContent);
            that.customMenu($setting, function ($node, $menu) {
                $menu.find("a.dropdown-item").hide();
                $menu.find("a.dropdown-item.r-setting").show();
                $menu.find("a.dropdown-item.comp").show();
                $menu.find("a.dropdown-item.guide").show();
                if (opts.customMenuBefore && $.type(opts.customMenuBefore) === 'function') {
                    opts.customMenuBefore($node, $menu);
                }
            });
            $appendTo.append($setting);
        },
        buildRoundSetting: function (data) {
            var that = this;
            var str = '';
            str += '<div class="setting ' +
                (data.roundFullScore ? '' : 'no-setting') +
                ' score" data-type="score" data-type-rs="1" data-setting="roundSetting">轮次总分: <span class="value">' +
                data.roundFullScore +
                '</span> <span>分</span></div >';
            str += '<div class="setting ' +
                (data.controlRate ? '' : 'no-setting') +
                ' score" data-type="score" data-type-rs="1" data-setting="roundSetting">随机抽取概率: <span class="value">' +
                data.controlRate +
                '</span> <span>%</span></div >';
            str += '<div class="setting ' +
                (data.sceneCount ? '' : 'no-setting') +
                ' score" data-type="score" data-type-rs="1" data-setting="roundSetting">演化情景流数: <span class="value">' +
                data.sceneCount +
                '</span> <span>条</span></div >';
            str += that.buildSetting(data,true);
            
            return str;
        },
        buildSetting: function (data,isRound) {
            var str = '';
            if (data) {
                str += (data.guideNos ? _SettingStr : _NonSettingStr).format('guide', '引导信息', isRound?"1":"0");
                str += (data.preComponent ? _SettingStr : _NonSettingStr).format('PRE', '运行前事务', isRound ? "1" : "0");
                str += (data.runningComponent ? _SettingStr : _NonSettingStr).format('RUN', '运行时事务', isRound ? "1" : "0");
                str += (data.postComponent ? _SettingStr : _NonSettingStr).format('POST', '运行后事务', isRound ? "1" : "0");
            }

            return str;
        },
        buildRightBlock: function ($appendTo, data,parentPath) {
            var that = this;
            var opts = this.options;
            var $navTab = $('<ul>', { 'class': 'nav nav-tabs flex-column' });
            
            var $tabContent = $('<div>', { 'class': 'tab-content' });
            if (data && data.length > 0) {
                var i = 1;
                var ran = new Date().getTime();
                data.forEach(function (v) {
                    var $item = that.buildEvTab(v, i, ran);
                    $navTab.append($item);

                    var $pane = that.buildEvTabPane(v, i, ran);
                    $tabContent.append($pane);
                    i++;
                });
            }
            var $tabBox = $('<div>', { 'class': 'tab-box', data: { path: '', parentPath: parentPath }  })
                .append('<div class="title">情景块集合</div>')
                .append($navTab);
            that.customMenu($tabBox, function ($node, $menu) {
                $menu.find("a.dropdown-item").hide();
                $menu.find("a.dropdown-item.block.add").show();
                if (opts.customMenuBefore && $.type(opts.customMenuBefore) === 'function') {
                    opts.customMenuBefore($node, $menu);
                }
            });
            var $tabContentBox = $('<div>', { 'class': 'tab-content-box' })
                .append($tabContent);
            $appendTo.append($tabContentBox, $tabBox);
        },
        buildEvTab: function (data, i, ran) {
            var that = this;
            var opts = this.options;
            var $item = $('<li>', { 'class': 'nav-item', 'data': { path: data.path, parentPath: data.parentPath } })
                .append($('<a>', {
                    'class': 'nav-link' + (i === 1 ? ' active' : '') ,
                    'href': '#ev-block-' + data.path + "_" + ran,
                    'text': '情景块 '
                }).attr('data-toggle', 'pill').append(' <span class="path" title="路径">(' + data.path + ')</span>'));
            that.customMenu($item, function ($node, $menu) {
                $menu.find("a.dropdown-item").hide();
                $menu.find("a.dropdown-item.block.delete").show();
                if (opts.customMenuBefore && $.type(opts.customMenuBefore) === 'function') {
                    opts.customMenuBefore($node, $menu);
                }
            });
            return $item;
        },
        buildEvTabPane: function (data, i, ran) {
            var that = this;
            var $pane = $('<div>', {
                'class': 'tab-pane fade text-left'+ (i === 1 ? ' show active' : ''),
                'id': 'ev-block-' + data.path + "_" + ran
            });
            var $evBlockBox = $('<div>', { 'class': blockBoxClass + ' ' + evBlockBoxClass, data: { path: data.path, parentPath: data.parentPath } });
            $pane.append('<div class="title">演化情景块 <span class="path" title="路径">(' + data.path + ')</span></div>').append($evBlockBox);
            that.buildBlockContent($evBlockBox, data);
            return $pane;
        },
        buildBlockContent: function ($appendTo, data) {
            var that = this;
            var $blockContent = that.buildBlockContentInfo(data);
            $appendTo.append($blockContent);
        },
        buildBlockContentInfo: function ( data) {
            var that = this;
            var opts = this.options;
            var $blockContent = $('<div>', { 'class': blockContentClass });
            var $settingBox = $('<div>', { 'class': settingBoxClass + ' ' + settingBoxClass2, data: { path: data.path, parentPath: data.parentPath } })
                .append(that.buildSetting(data));
            that.customMenu($settingBox, function ($node, $menu) {
                $menu.find("a.dropdown-item").hide();
                $menu.find("a.dropdown-item.comp").show();
                $menu.find("a.dropdown-item.guide").show();
                if (opts.customMenuBefore && $.type(opts.customMenuBefore) === 'function') {
                    opts.customMenuBefore($node, $menu);
                }
            });
            $blockContent.append($settingBox);
            that.buildFlowBox($blockContent, data);
            return $blockContent;
        },
        buildFlowBox: function ($appendTo, data) {
            var that = this;
            var opts = this.options;
            var $flowBox = $('<div>', { 'class': flowBoxClass, data: { path: data.path, parentPath: data.parentPath } });
            var $info = that.buildFlowInfo(data);
            $flowBox.append($info);
            that.customMenu($flowBox, function ($node, $menu) {
                $menu.find("a.dropdown-item").hide();
                $menu.find("a.dropdown-item.flow-s").show();
                if (opts.customMenuBefore && $.type(opts.customMenuBefore) === 'function') {
                    opts.customMenuBefore($node, $menu);
                }
            });
            $appendTo.append($flowBox);
        },
        buildFlowInfo: function ( data) {
            var that = this;
            var opts = this.options;
            var $flowInfoBox = $('<div>');
            if (data.flowNos) {
                var flowNoArr = data.flowNos.split(","), flowNameArr = data.flowNames.split(",");
                flowNoArr.forEach(function (v, i) {
                    var name = flowNameArr.length > i  ? flowNameArr[i] : "";
                    var $detail =
                        $('<div>',
                            {
                                'class': flowSettingClass,
                                data: { flowNo: v, path: data.path, parentPath: data.parentPath }
                            }).append($('<i>', { 'class': 'fa fa-list' }));
                    if (opts.flowDetailFun && $.isFunction(opts.flowDetailFun)) {
                        $detail.on('click', function (event) {
                            event.preventDefault();
                            event.stopPropagation();
                            opts.flowDetailFun.call($detail, data.path, data.parentPath, $detail);
                        });
                    }
                    
                    var $flow = $('<div>', { 'class': flowInfoClass })
                        .append($('<div>', { 'class': flowNameClass, text:v+" "+ name }))
                        .append($detail);
                    that.customMenu($detail, function ($node, $menu) {
                        $menu.find("a.dropdown-item").hide();
                        $menu.find("a.dropdown-item.flow-d").show();
                        if (opts.customMenuBefore && $.type(opts.customMenuBefore) === 'function') {
                            opts.customMenuBefore($node, $menu);
                        }
                    });

                    $flowInfoBox.append($flow);
                });
            }
            return $flowInfoBox;
        },

        customMenu: function ($node,beforeFun) {
            var that = this;
            var opts = that.options;
            var $menu = typeof opts.customMenu === 'string' ? $('#' + opts.customMenu) : $(opts.customMenu);;
            $node.css('cursor', 'help');
            $node.contextmenu(function (e) {
                if (beforeFun && $.type(beforeFun) === 'function') {
                    beforeFun($node, $menu);
                }
                e = e || window.event;
                //鼠标点的坐标
                var oX = e.clientX;
                var oY = e.clientY;
                //菜单出现后的位置
                $menu.fadeIn();
                $menu.offset({ top: oY, left: oX });
                //阻止浏览器默认事件
                return false; //一般点击右键会出现浏览器默认的右键菜单，写了这句代码就可以阻止该默认事件。)
            });
            $(document).on('click', function (e) {
                e = e || window.event;
                $menu.hide();
            });
            $node.on('click', function (e) {
                e = e || window.event;
                e.cancelBubble = true;
            });
        },
        zoomWheel: function (e) {
            var nt = e.data.nt;
            e.preventDefault();
            var newScale = 1 + (e.originalEvent.deltaY > 0 ? -0.05 : 0.05);
            nt.setChartScale(nt.$nodeTree, newScale);
        },
        setChartScale: function ($nodeTree, newScale) {
            var that = this;
            var opts = that.options;
            var lastTf = $nodeTree.css('transform');
            var matrix = '';
            var targetScale = 1;
            if (lastTf === 'none') {
                $nodeTree.css('transform', 'scale(' + newScale + ',' + newScale + ')');
            } else {
                matrix = lastTf.split(',');
                if (lastTf.indexOf('3d') === -1) {
                    targetScale = Math.abs(window.parseFloat(matrix[3]) * newScale);
                    if (targetScale > opts.zoomMinLimit && targetScale < opts.zoomMaxLimit) {
                        $nodeTree.css('transform', lastTf + ' scale(' + newScale + ',' + newScale + ')');
                    }
                } else {
                    targetScale = Math.abs(window.parseFloat(matrix[1]) * newScale);
                    if (targetScale > opts.zoomMinLimit && targetScale < opts.zoomMaxLimit) {
                        $nodeTree.css('transform', lastTf + ' scale3d(' + newScale + ',' + newScale + ', 1)');
                    }
                }
            }
        },
        drag: function ($node) {
            var that = this;
            var opts = that.options;
            var x = 0;
            var y = 0;
            var l = 0;
            var t = 0;
            var cursor = 'pointer';
            var timeout = undefined;
            $node.data('drag', false);
            //点击（松开后触发）
            $node.mousedown(function (e) {
                if (e.which === 3) {//禁止右键拖动
                    return;
                }
                var $this = $(this);
                timeout = setTimeout(function() {
                    //获取x坐标和y坐标
                    x = e.clientX;
                    y = e.clientY;
                    //获取左部和顶部的偏移量
                    l = that.$nodeTree.offset().left;
                    t = that.$nodeTree.offset().top;
                    //开关打开
                    $node.data('drag', true);
                    that.$nodeTree.fadeTo(20, 0.5);
                    //设置样式  
                    cursor = $this.css('cursor');
                    $this.css('cursor', 'move');
                }, opts.dragDelay);

            });
            that.$nodeContainer.mousemove(function (e) {
                e.preventDefault();
                if ($node.data('drag') !== true) {
                    return;
                }
                //获取x和y
                var nx = e.clientX;
                var ny = e.clientY;
                //计算移动后的左偏移量和顶部的偏移量
                var nl = nx - (x - l);
                var nt = ny - (y - t);
                that.$nodeTree.offset({ top: nt, left: nl });
            });
            $node.mouseup(function () {
                //开关打开
                $node.data('drag', false);
                that.$nodeTree.fadeTo("fast", 1);
                //设置样式  
                $(this).css('cursor', cursor);
                clearTimeout(timeout);
            });
            //$node.mouseleave(function(e) {

            //    //开关打开
            //    $node.data('drag', false).fadeTo("fast", 1);
            //    //设置样式  
            //    $(this).css('cursor', 'default');
            //});

        },
        exportData: function (input) {
            var that = this;
            var $nodeContainer = this.$nodeContainer;
            input = input || this.options.exportDataInput;
            if ($(this).children('.spinner').length) {
                return false;
            }
            var img;
            var sourceChart = $nodeContainer.addClass('canvasContainer').find('.' + treeClass + ':not(".hidden")').get(0);
            var flag = that.options.direction === 'l2r' || that.options.direction === 'r2l';
            window.html2canvas(sourceChart, {
                'width': flag ? sourceChart.clientHeight : sourceChart.clientWidth,
                'height': flag ? sourceChart.clientWidth : sourceChart.clientHeight,
                'onclone': function (cloneDoc) {
                    $(cloneDoc).find('.canvasContainer').css('overflow', 'visible')
                        .find('.' + treeClass + ':not(".hidden"):first').css('transform', '');
                },
                'onrendered': function (canvas) {
                    img = canvas.toDataURL("image/png");
                    console.log("exportData-over");
                    input.val(img);
                }
            })
                .then(function () {
                    $nodeContainer.removeClass('canvasContainer');
                });
            return img;
        },
        refresh: function(opt) {
            var that = this;
            var opts = $.extend({}, this.options, opt || {});
            var data = opts.data, $node = opts.node,  str, $that,$setting;
            if (data) {
                switch (opts.type) {
                    case 'roundSetting':
                    case 'guide':
                    case 'PRE':
                    case 'RUN':
                    case 'POST':
                        if ($node.hasClass(roundSettingClass)) {
                            str = that.buildRoundSetting(data);
                            $node.find('.' + contentClass).empty().html(str);
                        } else if ($node.hasClass(settingBoxClass)) {
                            str = that.buildSetting(data);
                            $node.empty().html(str);
                        } else if ($node.hasClass(nodeRoundClass)) {
                            var $settingBox = $node.parent().find('.' + roundSettingClass);
                            if ($settingBox.length === 1) {
                                str = that.buildRoundSetting(data);
                                $settingBox.find('.' + contentClass).empty().html(str);
                            }
                        }
                        $setting = $node;
                        break;
                    case 'flow':
                        var $info = that.buildFlowInfo(data);
                        $node.empty().append($info);
                        break;
                    case 'addRound':
                        $('.' + roundClass + ' .' + nodeRoundClass).removeClass('last');
                        var $round = that.buildRoundInfo(data, true);
                        $node.parent().after($round);
                        $setting = $round;
                        break;
                    case 'deleteRound':
                        $node.closest('.round-box').prev().find('.round-node').addClass('last');
                        $node.closest('.round-box').remove();
                        break;
                    case 'addBlock':
                        $that = $node.closest('.' + nodeBlockClass);
                        var $item = that.buildEvTab(data);
                        $that.find('.tab-box .nav').append($item);
                        var $pane = that.buildEvTabPane(data);
                        $that.find('.tab-content-box .tab-content').append($pane);
                        $item.find('.nav-link').tab('show');
                        break;
                    case 'deleteBlock':
                        $that = $node.closest('.' + nodeBlockClass);
                        if ($node.find('.nav-link').hasClass('active')) {
                            $that.find('.tab-box .nav .nav-item').eq(0).find('.nav-link').tab('show');
                            $that.find('.tab-content-box .tab-content .tab-pane').eq(0).addClass('active show');
                        }
                        $node.remove();
                        $that.find('.tab-content-box .tab-content').find('#ev-block-' + data.path).remove();
                        break;
                    default:
                        init(data);
                    break;
                }
                if ($setting) {
                    $setting.find('.setting').off("click.setting").on("click.setting", function () { that.options.settingFun($(this)); });
                }
            }
        }
    };
    var allowedMethods = ["refresh"];
    $.fn.packageTree = function (option) {
        var value,
            args = Array.prototype.slice.call(arguments, 1);
        this.each(function () {
            var $this = $(this);
            
            var data = $this.data('iwb.package.tree'),
                options = $.extend({}, $this.data(),
                    typeof option === 'object' && option);
            if (typeof option === 'string') {
                if ($.inArray(option, allowedMethods) < 0) {
                    throw new Error("Unknown method: " + option);
                }
                if (!data) {
                    return;
                }
                value = data[option].apply(data, args);
                //if (option === 'destroy') {
                //    $this.removeData('iwb.package.tree');
                //    $this.removeData('iwb.package.tree.init');
                //    return;
                //}
            } else {
                data = new PackageTree(this, options).init();
                $this.data('iwb.package.tree', data);
            }
            //if ($this.data('iwb.package.tree.init')) {
            //    return;
            //}
            //$this.data('iwb.package.tree.init', true);
            //if (!data) {
            //    data = new PackageTree(this, options).init();
            //    $this.data('iwb.package.tree', data);
            //} 
           
        });

        return typeof value === 'undefined' ? this : value;
    };
}));