ConstructionCost/web/building_saas/main/js/views/block_lib.js

/**
 * Created by CSL on 2018-09-19.
 */
var blockLibObj = {
    mainSpread: null,
    mainSheet: null,
    mainTree: null,
    mainTreeController: null,
    mainSetting: {
        "emptyRowHeader": true,
        "rowHeaderWidth": 15,
        "emptyRows":0,
        "headRows":1,
        "headRowHeight":[30],
        "defaultRowHeight": 21,
        "treeCol": 0,
        "cols":[{
            "width":400,
            "readOnly": false,
            "head":{
                "titleNames":["名称"],
                "spanCols":[1],
                "spanRows":[1],
                "vAlign":[1],
                "hAlign":[1],
                "font":["Arial"]
            },
            "data":{
                "field":"name",
                "vAlign":1,
                "hAlign":0,
                "font":"Arial"
            }
        }]
    },
    mainDatas: [],
    buildSheet: function () {
        $.bootstrapLoading.start();
        let me = this;
        me.mainDatas = [
            {ID: 1, ParentID: -1, NextSiblingID: 8, name: '我的块模板库1', type: 0},
            {ID: 2, ParentID: 1, NextSiblingID: 3, name: '分类1', type: 1},
            {ID: 3, ParentID: 1, NextSiblingID: -1, name: '分类2', type: 1},
            {ID: 4, ParentID: 2, NextSiblingID: 5, name: '子类A', type: 1},
            {ID: 5, ParentID: 2, NextSiblingID: -1, name: '子类B', type: 1},
            {ID: 6, ParentID: 4, NextSiblingID: 7, name: '块1', type: 2},
            {ID: 7, ParentID: 4, NextSiblingID: -1, name: '块2', type: 2},
            {ID: 8, ParentID: -1, NextSiblingID: -1, name: '我的块模板库2', type: 0}
        ];

        if (me.mainSpread) {
            me.mainSpread.destroy();
            me.mainSpread = null;
        };
        me.mainSpread = SheetDataHelper.createNewSpread($('#div_block_tree')[0]);
        me.mainSheet = me.mainSpread.getSheet(0);
        me.mainSheet.name('blockLibSheet');
        sheetCommonObj.spreadDefaultStyle(me.mainSpread);
        // me.mainSpread.bind(GC.Spread.Sheets.Events.CellDoubleClick, this.onCellDoubleClick);

        var showblockTree = function (datas) {
            me.mainTree = idTree.createNew({id: 'ID', pid: 'ParentID', nid: 'NextSiblingID', rootId: -1, autoUpdate: false});
            me.mainTreeController = TREE_SHEET_CONTROLLER.createNew(me.mainTree, me.mainSheet, me.mainSetting);
            me.mainTree.loadDatas(datas);
            me.mainTreeController.showTreeData();
            me.mainSheet.getRange(-1, 0, -1, 1).cellType(me.getTreeCell(me.mainTree));
/*            me.mainTreeController.bind(TREE_SHEET_CONTROLLER.eventName.treeSelectedChanged, function (node) {
                rationLibObj.loadSectionRations(node && node.children.length === 0 ? node.getID() : null);
            });
            if (me.mainTree.firstNode() && me.mainTree.firstNode().length === 0) {
                rationLibObj.loadSectionRations(me.mainTree.firstNode().getID());
            } else {
                rationLibObj.loadSectionRations();
            };*/
        };

/*        CommonAjax.post('/complementaryRation/api/getRationTree', {userId: userID, rationRepId: rationLibID}, function (datas) {
            showblockTree(datas);
            $.bootstrapLoading.end();
        }, function () {
            showblockTree([]);
            $.bootstrapLoading.end();
        });*/

        showblockTree(me.mainDatas);
        $.bootstrapLoading.end();
    },
    getTreeCell: function (tree) {
        let me = this;
        let indent = 20, levelIndent = -5, halfBoxLength = 5, halfExpandLength = 3, imgWidth = 14, imgHeight = 14;
        let TreeCell = function () {};
        TreeCell.prototype = new GC.Spread.Sheets.CellTypes.Text();
        TreeCell.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
            if (style.backColor) {
                ctx.save();
                ctx.fillStyle = style.backColor;
                ctx.fillRect(x, y, w, h);
                ctx.restore();
            } else {
                ctx.clearRect(x, y, w, h);
            };

            let drawLine = function (canvas, x1, y1, x2, y2, color) {
                ctx.save();
                ctx.translate(0.5, 0.5);
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.strokeStyle = color;
                ctx.stroke();
                ctx.restore();
            };
            let drawExpandBox = function (ctx, x, y, w, h, centerX, centerY, expanded) {
                let rect = {}, h1, h2, offset = 1;
                rect.top = centerY - halfBoxLength;
                rect.bottom = centerY + halfBoxLength;
                rect.left = centerX - halfBoxLength;
                rect.right = centerX + halfBoxLength;

                if (rect.left < x + w) {
                    rect.right = Math.min(rect.right, x + w);

                    ctx.save();
                    ctx.translate(0.5, 0.5);
                    ctx.strokeStyle = 'black';
                    ctx.beginPath();
                    ctx.moveTo(rect.left, rect.top);
                    ctx.lineTo(rect.left, rect.bottom);
                    ctx.lineTo(rect.right, rect.bottom);
                    ctx.lineTo(rect.right, rect.top);
                    ctx.lineTo(rect.left, rect.top);
                    ctx.stroke();
                    ctx.fillStyle = 'white';
                    ctx.fill();
                    ctx.restore();

                    // Draw Horizontal Line
                    h1 = centerX - halfExpandLength;
                    h2 = Math.min(centerX + halfExpandLength, x + w);
                    if (h2 > h1) {
                        drawLine(ctx, h1, centerY, h2, centerY, 'black');
                    }
                    // Draw Vertical Line
                    if (!expanded && (centerX < x + w)) {
                        drawLine(ctx, centerX, centerY - halfExpandLength, centerX, centerY + halfExpandLength, 'black');
                    }
                }

            };

            let node = tree.items[options.row];
            if (!node) return;
            let showTreeLine = true;
            let centerX = Math.floor(x) + node.depth() * indent + node.depth() * levelIndent + indent / 2;
            let x1 = centerX + indent / 2;
            let centerY = Math.floor((y + (y + h)) / 2);
            let y1;

            // Draw Horizontal Line、Image、sibling Vertical Line
            if (centerX < x + w) {
                // Draw Horizontal Line
                drawLine(ctx, centerX, centerY, Math.min(x1, x + w), centerY, 'gray');

                // Draw Image
                let imgId;
                if (node.data.type === 0) imgId = 'blockLib_pic'
                else if (node.data.type === 1) imgId = 'folder_pic'
                else if (node.data.type === 2) {
                    imgId = 'block_pic';
                };
                let img = document.getElementById(imgId);
                ctx.drawImage(img, centerX+indent/2+3, centerY - 7, imgWidth, imgHeight);

                // Draw Vertical Line
                y1 = node.isLast() ? centerY : y + h;
                if (node.isFirst() && !node.parent/*.parent*/) {
                    drawLine(ctx, centerX, centerY, centerX, y1, 'gray');
                } else {
                    drawLine(ctx, centerX, y, centerX, y1, 'gray');
                }
            }

            // Draw Expand Box
            if (node.children.length > 0) {
                drawExpandBox(ctx, x, y, w, h, centerX, centerY, node.expanded);
            }

            // Draw Parent Line
            var curNode = node.parent, parentCenterX = centerX - indent - levelIndent;
            while (curNode) {
                if (!curNode.isLast()) {
                    if (parentCenterX < x + w) {
                        drawLine(ctx, parentCenterX, y, parentCenterX, y + h, 'gray');
                    }
                }
                curNode = curNode.parent;
                parentCenterX -= (indent + levelIndent);
            }

            // Draw Text
            x = x + (node.depth() + 1) * indent +  node.depth() * levelIndent + imgWidth + 3;
            w = w - (node.depth() + 1) * indent - node.depth() * levelIndent - imgWidth - 3;
            GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, arguments);
        };
        TreeCell.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
            let info = {x: x, y: y, row: context.row, col: context.col, cellStyle: cellStyle, cellRect: cellRect, sheetArea: context.sheetArea};
            let node = tree.items[info.row];
            let offset = -1;
            let centerX = info.cellRect.x + offset + node.depth() * indent + node.depth() * levelIndent + indent / 2;
            let text = context.sheet.getText(info.row, info.col);
            let value = context.sheet.getValue(info.row, info.col);
            let acStyle = context.sheet.getActualStyle(info.row, info.col),
                zoom = context.sheet.zoom();
            let textLength = this.getAutoFitWidth(value, text, acStyle, zoom, {sheet: context.sheet, row: info.row, col: info.col, sheetArea: GC.Spread.Sheets.SheetArea.viewport});
            if(info.x > centerX + halfBoxLength && info.x < centerX + halfBoxLength + imgWidth + indent/2+3 + textLength){
                info.isReservedLocation = true;
            }
            return info;
        };
        TreeCell.prototype.processMouseDown = function (hitinfo) {
            let offset = -1;
            let node = tree.items[hitinfo.row];
            let centerX = hitinfo.cellRect.x + offset + node.depth() * indent + node.depth() * levelIndent + indent / 2;
            let centerY = (hitinfo.cellRect.y + offset + (hitinfo.cellRect.y + offset + hitinfo.cellRect.height)) / 2;
            let text = hitinfo.sheet.getText(hitinfo.row, hitinfo.col);
            let value = hitinfo.sheet.getValue(hitinfo.row, hitinfo.col);
            let acStyle = hitinfo.sheet.getActualStyle(hitinfo.row, hitinfo.col),
                zoom = hitinfo.sheet.zoom();
            let textLength = this.getAutoFitWidth(value, text, acStyle, zoom, {sheet: hitinfo.sheet, row: hitinfo.row, col: hitinfo.col, sheetArea: GC.Spread.Sheets.SheetArea.viewport});
            //(图标+名字)区域
            function withingClickArea(){
                return hitinfo.x > centerX + halfBoxLength && hitinfo.x < centerX + halfBoxLength + imgWidth + indent/2+3 + textLength;
            }

            if (hitinfo.x > centerX - halfBoxLength && hitinfo.x < centerX + halfBoxLength && hitinfo.y > centerY - halfBoxLength && hitinfo.y < centerY + halfBoxLength) {
                node.setExpanded(!node.expanded);
                TREE_SHEET_HELPER.massOperationSheet(hitinfo.sheet, function () {
                    let iCount = node.posterityCount(), i, child;
                    for (i = 0; i < iCount; i++) {
                        child = tree.items[hitinfo.row + i + 1];
                        hitinfo.sheet.setRowVisible(hitinfo.row + i + 1, child.visible, hitinfo.sheetArea);
                    }
                    hitinfo.sheet.invalidateLayout();
                });
                hitinfo.sheet.repaint();
            }
        };
        TreeCell.prototype.processMouseMove = function (hitInfo) {
            let sheet = hitInfo.sheet;
            let div = sheet.getParent().getHost();
            let canvasId = div.id + "vp_vp";
/*            let canvas = $(`#${canvasId}`)[0];
            //改变鼠标图案
            if (sheet && hitInfo.isReservedLocation) {
                canvas.style.cursor='pointer';
                return true;
            }else{
                canvas.style.cursor='default';
            }*/
            return false;
        };
        TreeCell.prototype.processMouseEnter = function (hitinfo) {
            let text = hitinfo.sheet.getText(hitinfo.row, hitinfo.col);
            let value = hitinfo.sheet.getValue(hitinfo.row, hitinfo.col);
            let tag = hitinfo.sheet.getTag(hitinfo.row, hitinfo.col);
            let acStyle = hitinfo.sheet.getActualStyle(hitinfo.row, hitinfo.col),
                zoom = hitinfo.sheet.zoom();
            let node = me.mainTree.items[hitinfo.row];
            let nodeIndent = node ? (node.depth() + 1) * indent +  node.depth() * levelIndent + imgWidth + 3 : 0;
            let textLength = this.getAutoFitWidth(value, text, acStyle, zoom, {sheet: hitinfo.sheet, row: hitinfo.row, col: hitinfo.col, sheetArea: GC.Spread.Sheets.SheetArea.viewport});
            let cellWidth = hitinfo.sheet.getCell(-1, hitinfo.col).width();
            if(textLength > cellWidth - nodeIndent){
                TREE_SHEET_HELPER.showTipsDiv(text,{pos: {}},hitinfo);
            }
        };
        TreeCell.prototype.processMouseLeave = function (hitinfo) {
            let me = this;
            TREE_SHEET_HELPER.tipDiv = 'hide';
            if (TREE_SHEET_HELPER._toolTipElement) {
                $(TREE_SHEET_HELPER._toolTipElement).hide();
                TREE_SHEET_HELPER._toolTipElement = null;
            };
            TREE_SHEET_HELPER.tipDivCheck();//延时检查：当tips正在show的时候，就调用了hide方法，会导致tips一直存在，所以设置一个超时处理
        };
        return new TreeCell();
    },
    insert: function (insertType){    // 1 后兄弟； 2 孩子。
        let tree = blockLibObj.mainTree;
        let select = tree.selected;
        if (!select) select = tree.items[0];
        let pID = (insertType == 1) ? select.getParentID() : select.getID();
        let nID = (insertType == 1) ? select.getNextSiblingID() : -1;
        let newNode = tree.insert(pID, nID);
        newNode.data.name = '新建';
        if (!newNode.parent)
            newNode.data.type = 0
        else
            newNode.data.type = 1;
        tree.selected = newNode;

        let sheet = blockLibObj.mainSheet;
        sheet.suspendPaint();
        sheet.suspendEvent();

        let idx = tree.items.indexOf(newNode);
        sheet.addRows(idx, 1);
        sheet.getRange(idx, 0, 1, 1).locked(false);
        sheet.setValue(idx, 0, newNode.data.name);
        sheet.setSelection(idx, 0, 1, 1);

        sheet.resumeEvent();
        sheet.resumePaint();
    }
};

$(document).ready(function(){
    $('#blockLibTab').on('click', function (){
        if ($("#kmbk").is(":visible")){
            if (!blockLibObj.mainSpread){
                blockLibObj.buildSheet();
            };
        }
    });
    $('#btn_block_newFolder').on('click', function (){
        blockLibObj.insert(1);
    });

    $('#btn_block_newSubFolder').on('click', function (){
        blockLibObj.insert(2);
    });

});