blockLib

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

@@ -2,185 +2,292 @@
  * Created by CSL on 2018-09-19.
  */
 var blockLibObj = {
-    datas: [],
     mainSpread: null,
     mainSheet: null,
+    mainTree: null,
+    mainTreeController: null,
     mainSetting: {
-        header:[
-            {headerName:"名称",headerWidth:400,dataCode:"name", dataType: "String"}
-        ],
-        view:{
-            comboBox:[],
-            lockColumns:[],
-            colHeaderHeight: CP_Col_Width.colHeader,
-            rowHeaderWidth: CP_Col_Width.rowHeader
-        }
+        "emptyRowHeader": true,
+        "rowHeaderWidth": 15,
+        "emptyRows":0,
+        "headRows":1,
+        "headRowHeight":[30],
+        "defaultRowHeight": 21,
+        "treeCol": 0,
+        "cols":[{
+            "width":400,
+            "readOnly": true,
+            "head":{
+                "titleNames":["名称"],
+                "spanCols":[1],
+                "spanRows":[1],
+                "vAlign":[1],
+                "hAlign":[1],
+                "font":["Arial"]
+            },
+            "data":{
+                "field":"name",
+                "vAlign":1,
+                "hAlign":0,
+                "font":"Arial"
+            }
+        }]
     },
-    buildSheet: function (){
+    mainDatas: [],
+    buildSheet: function () {
+        $.bootstrapLoading.start();
         let me = this;
-        me.datas = [];
+        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 = sheetCommonObj.buildSheet($('#div_block_tree')[0], me.mainSetting, me.datas.length);
-        sheetCommonObj.spreadDefaultStyle(me.mainSpread);
+        me.mainSpread = SheetDataHelper.createNewSpread($('#div_block_tree')[0]);
         me.mainSheet = me.mainSpread.getSheet(0);
-        // sheetCommonObj.showData(me.mainSheet, me.mainSetting, me.datas);
-    },
-    showData: function () {
-        let me = this;
-        let sheet =me.mainSheet;
-        let cols = me.mainSetting.header;
-        let datas = me.datas;
-        let fuc = function () {
-            sheet.setRowCount(datas.length);
-            me.initTree(true);
-            // sheet.setFormatter(-1, 1, '@');
-            for(let col = 0, cLen = cols.length; col < cLen; col++){
-                // sheet.getRange(-1, col, -1, 1).hAlign(GC.Spread.Sheets.HorizontalAlign[cols[col]['hAlign']]);
-                // sheet.getRange(-1, col, -1, 1).vAlign(GC.Spread.Sheets.VerticalAlign[cols[col]['vAlign']]);
-                for(let row = 0, rLen = datas.length; row < rLen; row++){
-                    sheet.setValue(row, col, datas[row][cols[col]['dataCode']]);
-                }
-            }
+        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();
+            };*/
         };
-        sheet.suspendPaint();
-        sheet.suspendEvent();
-        fuc();
-        sheet.resumePaint();
-        sheet.resumeEvent();
+
+/*        CommonAjax.post('/complementaryRation/api/getRationTree', {userId: userID, rationRepId: rationLibID}, function (datas) {
+            showblockTree(datas);
+            $.bootstrapLoading.end();
+        }, function () {
+            showblockTree([]);
+            $.bootstrapLoading.end();
+        });*/
+
+        showblockTree(me.mainDatas);
+        $.bootstrapLoading.end();
     },
-    initTree: function (collapse) {
+    getTreeCell: function (tree) {
         let me = this;
-        me.mainSheet.getRange(-1, 0, -1, 1).cellType(me.getTreeNodeCellType(me.datas));
-        for(let i =0, len = me.datas.length; i < len; i++){
-            if(me.datas[i].hasOwnProperty('items')){
-                let collapsed = false;
-                if(collapse){
-                    me.datas[i].collapsed = false;
-                    collapsed = true;
-                }else {
-                    collapsed = me.datas[i].collapsed == undefined ? true : me.datas[i].collapsed;
+        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');
+                    }
                 }
-            }
-        }
-    },
-    getTreeNodeCellType: function (data) {
-        var ns = GC.Spread.Sheets;
-        var rectW = 10;
-        var rectH = 10;
-        var margin = 3;
-        function TreeNodeCellType() {
-        }
 
-        function drowRect(ctx,x,y,w,h) {///
-            ctx.save();
-            ctx.strokeStyle = "gray";
-            ctx.translate(0.5,0.5);
-            ctx.beginPath();
-            var rectX = x+margin;
-            var rectY =  y+ Math.round(h/2)-rectH/2;
-            ctx.moveTo(rectX, rectY);
-            ctx.lineTo(rectX, rectY+rectH);
-            ctx.lineTo(rectX+rectW, rectY+rectH);
-            ctx.lineTo(rectX+rectW, rectY);
-            ctx.lineTo(rectX, rectY);
-            ctx.moveTo(rectX+rectW, y+Math.round(h/2));
-            ctx.lineTo(rectX+rectW+5, y+Math.round(h/2));
-            ctx.stroke();
-            ctx.restore();
-        }
+            };
+
+            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;
 
-        function drowSymbol(ctx,x,y,w,h,collapsed) {
-            ctx.save();
-            ctx.strokeStyle = "#000000";
-            ctx.translate(0.5, 0.5);
-            ctx.beginPath();
-            ctx.moveTo(x+margin+2, y+Math.round(h/2));
-            ctx.lineTo(x+margin+8, y+Math.round(h/2));
-            var rectY =  y+ Math.round(h/2)-rectH/2;
-            if(collapsed){
-                ctx.moveTo(x+margin+rectW/2,rectY+2);
-                ctx.lineTo(x+margin+rectW/2,rectY+2+6);
+            // 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');
+                }
             }
-            ctx.stroke();
-            ctx.restore();
-        }
 
-        function drowSubItem(ctx,x,y,w,h,offset,nextItem) {
-            offset+=6;
-            ctx.save();
-            ctx.strokeStyle = "gray";
-            ctx.translate(0.5, 0.5);
-            ctx.beginPath();
-            ctx.moveTo(x+offset, y);
-            ctx.lineTo(x+offset, y+Math.round(h/2));
-            offset+=9;
-            ctx.lineTo(x+offset, y+Math.round(h/2));
-            if(nextItem&&!nextItem.hasOwnProperty('items')){
-                ctx.moveTo(x+offset-9, y+Math.round(h/2));
-                ctx.lineTo(x+offset-9, y+h);
+            // Draw Expand Box
+            if (node.children.length > 0) {
+                drawExpandBox(ctx, x, y, w, h, centerX, centerY, node.expanded);
             }
-            ctx.stroke();
-            ctx.restore();
-            return offset;
-        }
 
-        TreeNodeCellType.prototype = new ns.CellTypes.Text();
-        TreeNodeCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
-            if(value!=null){
-                var offset = margin+rectW+6;
-                var recode = data[options.row];
-                if(recode&&recode.hasOwnProperty('items')){
-                    drowRect(ctx,x,y,w,h);
-                    var collapsed = recode.collapsed==undefined?true:recode.collapsed;//options.sheet.getTag(options.row,options.col);
-                    drowSymbol(ctx,x,y,w,h,collapsed);
-                }else if(recode&&!recode.hasOwnProperty('items')){
-                    offset= drowSubItem(ctx,x,y,w,h,offset,data[options.row+1]);
-                    offset+=1;
+            // 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');
+                    }
                 }
-                arguments[2] = x + offset;
-                arguments[4] = w - offset;
-                GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, arguments);
+                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;
         };
-        TreeNodeCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
-            return {
-                x: x,
-                y: y,
-                row: context.row,
-                col: context.col,
-                cellStyle: cellStyle,
-                cellRect: cellRect,
-                sheetArea: context.sheetArea
-            };
-        }
-        TreeNodeCellType.prototype.processMouseDown = function (hitinfo) {
-            var recode = data[hitinfo.row];
-            if(recode&&recode.hasOwnProperty('items')){
-                var hoffset= hitinfo.cellRect.x+3;
-                if (hitinfo.x > hoffset && hitinfo.x < hoffset + 10){
-                    var collapsed = recode.collapsed==undefined?true:recode.collapsed;
-                    collapsed = !collapsed
-                    recode.collapsed=collapsed;
-                    //hitinfo.sheet.setTag(hitinfo.row,hitinfo.col,collapsed);
-                    hitinfo.sheet.getRange(hitinfo.row+1, -1, recode.items.length, -1).visible(!collapsed);
+        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();
-                }
+                });
+                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;
         };
-        return new TreeNodeCellType();
+        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();
     }
 };
 
 $(document).ready(function(){
-/*    if (!blockLibObj.mainSpread){
-        blockLibObj.buildSheet();
-        blockLibObj.showData();
-    }*/
-
+    // if (!blockLibObj.mainSpread){
+    //     blockLibObj.buildSheet();
+    // }
 });