Sync 2017-02-04

src/SpreadJsDemo.html

@@ -107,61 +107,63 @@
         function TreeNodeCellType() {}
         TreeNodeCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
         TreeNodeCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
-            var offX = 2, offY = -2, width = 10, height = 10, minusOffLeft = 2 - width, minusOffRight = -2, minusOffTop = 2, minusOffBottom = height - 2,
-                 dashMargin = 3, dashWidth = 10, dashTop = 5, dashBottom = 5;
-            function private_drawDecorateLine(imgX, imgY, hasPre, hasNext) {
+            var offX = 2, offY = 1, width = 10, height = 10, minusOffLeft = 2 - width, minusOffRight = -2, minusOffTop = 2, minusOffBottom = height - 2,
+                 dashMargin = 3, dashWidth = 9, dashTop = 5, dashBottom = 5;
+            function private_drawDecorateLine(hasPre, hasNext) {
                 ctx.save();
                 ctx.strokeStyle = 'gray';
                 ctx.setLineDash([1, 1]); /* dashes are 5px and spaces are 3px */
                 ctx.beginPath();
-                ctx.moveTo(x + dashMargin + offX, y + height/2 + offY);
-                ctx.lineTo(x + dashMargin + offX + dashWidth, y + height/2 + offY);
-                if (hasPre) {
-                    ctx.setLineDash([1, 1]); /* dashes are 5px and spaces are 3px */
-                    ctx.moveTo(x - width / 2 + offX, y + offY);
-                    ctx.lineTo(x - width / 2 + offX, y - dashTop + offY);
+                ctx.moveTo(x + dashMargin + offX, y + height/2 - offY);
+                ctx.lineTo(x + dashMargin + offX + dashWidth, y + height/2 - offY);
+                if (hasPre && options.row != 0) {
+                    ctx.setLineDash([1, 1]);
+                    ctx.moveTo(x - width / 2 + offX, y - offY);
+                    ctx.lineTo(x - width / 2 + offX, y - dashTop - offY);
                 }
                 if (hasNext) {
-                    ctx.moveTo(x - width / 2 + offX, y + height + dashMargin + offY);
-                    ctx.lineTo(x - width / 2 + offX, y + height + dashMargin + dashBottom + offY);
+                    ctx.moveTo(x - width / 2 + offX, y + height + dashMargin - offY);
+                    ctx.lineTo(x - width / 2 + offX, y + height + dashMargin + dashBottom - offY);
                 }
                 ctx.stroke();
                 ctx.restore();
             }
-            function private_drawGrpImg(imgX, imgY, isParent, isCollapsed, hasPre, hasNext) {
+            function private_drawGrpImg(isParent, isCollapsed, hasPre, hasNext) {
                 ctx.save();
                 if (isParent) {
                     ctx.strokeStyle = 'gray';
                     ctx.beginPath();
-                    ctx.moveTo(x - width + offX, y + offY);
-                    ctx.lineTo(x + offX, y + offY);
-                    ctx.lineTo(x + offX, y + height + offY);
-                    ctx.lineTo(x - width + offX, y + height + offY);
-                    ctx.lineTo(x - width + offX, y + offY);
+                    ctx.moveTo(x - width + offX, y - offY);
+                    ctx.lineTo(x + offX, y - offY);
+                    ctx.lineTo(x + offX, y + height - offY);
+                    ctx.lineTo(x - width + offX, y + height - offY);
+                    ctx.lineTo(x - width + offX, y - offY);
                     ctx.stroke();
 
                     ctx.save();
                     ctx.beginPath();
                     ctx.strokeStyle = 'black';
-                    ctx.moveTo(x + minusOffLeft + offX, y + height/2 + offY);
-                    ctx.lineTo(x + minusOffRight + offX, y + height/2 + offY);
+                    ctx.moveTo(x + minusOffLeft + offX, y + height/2 - offY);
+                    ctx.lineTo(x + minusOffRight + offX, y + height/2 - offY);
                     if (isCollapsed) {
                         ctx.strokeStyle = 'black';
-                        ctx.moveTo(x - width/2 + offX, y + minusOffTop + offY);
-                        ctx.lineTo(x - width/2 + offX, y + minusOffBottom + offY);
+                        ctx.moveTo(x - width/2 + offX, y + minusOffTop - offY);
+                        ctx.lineTo(x - width/2 + offX, y + minusOffBottom - offY);
                     }
                     ctx.stroke();
                     ctx.restore();
                 } else {
                     //
                 }
-                private_drawDecorateLine(imgX, imgY, isParent||hasPre, hasNext);
+                private_drawDecorateLine(isParent||hasPre, hasNext);
                 ctx.restore();
             }
             var level = options.sheet.rowOutlines.getLevel(options.row);
             var nlevel = -1;
+            var hasPre = true, hasNext = (options.row < data.length && data[options.row]["NextSiblingID"] > 0);
             if (options.row < options.sheet.getRowCount() - 1) {
                 nlevel = options.sheet.rowOutlines.getLevel(options.row + 1);
+                //data[options.row]["NextSiblingID"] == data[options.row]["ID"]
             }
             //var hoffset = (level + 2) * 12;
             var hoffset = (level + 2) * 12;
@@ -176,8 +178,11 @@
                 image = document.getElementById('image2');
             }
 
+            /*
             var imageWidth = image.width, imageMagin = 3, imageLayoutWidth = imageWidth + imageMagin * 2;
-            //var imageWidth = 8, imageMagin = 3, imageLayoutWidth = imageWidth + imageMagin * 2;
+            /*/
+            var imageWidth = dashWidth - offX, imageMagin = 3, imageLayoutWidth = imageWidth + imageMagin * 2;
+            //*/
             x += imageLayoutWidth;
             w -= imageLayoutWidth;
             //ns.CustomCellType.prototype.paint.apply(this, arguments);
@@ -185,29 +190,13 @@
 
             if (options.row == options.sheet.getRowCount() - 1) return; //last row
 
-            if (nlevel > level) {
+                if (nlevel > level) {
                 var collapsed = options.sheet.rowOutlines.isCollapsed(options.row + 1);
                 x -= imageLayoutWidth;
                 w += imageLayoutWidth;
-                var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
                 x--;
                 y += h / 2 - 3;
-//                ctx.save();
-//                ctx.fillStyle = "black";
-//                ctx.beginPath();
-//                if (collapsed) {
-//                    ctx.moveTo(x - 5, y);
-//                    ctx.lineTo(x, y + 3);
-//                    ctx.lineTo(x - 5, y + 6);
-//                } else {
-//                    ctx.moveTo(x, y);
-//                    ctx.lineTo(x, y + 5);
-//                    ctx.lineTo(x - 5, y + 5);
-//                }
-//                ctx.fill();
-//                ctx.restore();
-                private_drawGrpImg(imageX, imageY, true, collapsed, null, null);
-//                ctx.drawImage(image, imageX, imageY);
+                private_drawGrpImg(true, collapsed, hasPre, hasNext);
             }
             else {
                 x -= imageLayoutWidth;
@@ -264,11 +253,16 @@
                 collapseGrp.push(idxBefore);
             }
         }
+        var row = null;
+        for (var i = 0; i < sheet.getRowCount(); i++) {
+            row = sheet.getRange(i, -1, 1 ,-1, ns.SheetArea.viewport);
+            row.vAlign(GC.Spread.Sheets.VerticalAlign.center);
+            //row.height(25);
+        }
 //        for (var i = collapseGrp.length - 1; i >= 0; i--) {
 //            sheet.rowOutlines.setCollapsed(collapseGrp[i],true);
 //        }
         //sheet.rowOutlines.expand(3,false);
-        //sheet.getRange(-1, 0, -1 ,1, ns.SheetArea.viewport).vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
         sheet.getRange(-1, 0, -1 ,1, ns.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.left);
         sheet.getRange(-1, 1, -1 ,1, ns.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.left);