From b055971c1b60b4a25cc08ebf66980ee1ed3e80d4 Mon Sep 17 00:00:00 2001
From: Vitaliy Filippov <vitalif@yourcmc.ru>
Date: Wed, 24 Feb 2016 18:48:09 +0300
Subject: [PATCH] Rectangle cell selection example

---
 treegrid.css     |  14 ++++-
 treegrid.js      |   6 +-
 treegridtest.htm | 140 +++++++++++++++++++++++++++++++++++++++--------
 3 files changed, 134 insertions(+), 26 deletions(-)

diff --git a/treegrid.css b/treegrid.css
index b53d64d..812da00 100644
--- a/treegrid.css
+++ b/treegrid.css
@@ -25,15 +25,27 @@ table { border-collapse: collapse; }
 	bottom: 0;
 }
 
+/* selection rectangle */
+.selection-rect
+{
+	position: absolute;
+	border: 1px solid #003f6e;
+	background: #0097ff;
+	opacity: 0.1;
+	display: none;
+}
+
 /* fixed header table styles */
 table.grid tbody tr:hover, table.grid tbody tr:hover td
 {
 	background-color: #e2eff8;
 }
 
-table.grid tr.selected
+table.grid tr.selected, table.grid td.selected, table.grid tr.selected:hover,
+table.grid tr.selected:hover td, table.grid tr:hover td.selected
 {
 	background-color: #c1ddf1;
+	box-shadow: inset 0 0 0 1px #3d91cf;
 }
 
 table.grid thead th
diff --git a/treegrid.js b/treegrid.js
index 1617c3f..e3ddaab 100644
--- a/treegrid.js
+++ b/treegrid.js
@@ -83,7 +83,7 @@ function TreeGridNode(node, grid, level, insertBefore, startHidden)
         this.tr = document.createElement('tr');
         if (startHidden)
             this.tr.style.display = 'none';
-        this.tr._level = this.level;
+        this.tr._node = this;
         for (var i = 0; i < this.grid.header.length; i++)
         {
             var td = document.createElement('td');
@@ -137,7 +137,7 @@ TreeGridNode.prototype.toggle = function()
     {
         // collapse all children
         var c = this.tr.nextSibling;
-        while (c && c._level > this.level)
+        while (c && c._node.level > this.level)
         {
             c.style.display = 'none';
             c = c.nextSibling;
@@ -162,7 +162,7 @@ TreeGridNode.prototype.setChildren = function(isLeaf, newChildren)
     if (!this.tr)
         this.grid.tbody.innerHTML = '';
     else
-        while (this.tr.nextSibling && this.tr.nextSibling._level > this.level)
+        while (this.tr.nextSibling && this.tr.nextSibling._node.level > this.level)
             this.grid.tbody.removeChild(this.tr.nextSibling);
     this.leaf = isLeaf;
     if (this.leaf)
diff --git a/treegridtest.htm b/treegridtest.htm
index b3871cd..3a42316 100644
--- a/treegridtest.htm
+++ b/treegridtest.htm
@@ -14,32 +14,128 @@
 </div></div>
 <script>
 <!--
-onDomReady(function() {
-var i = {
-    cells: [ 'Payment from Gazprom to Shell 2', '4', '5' ]
-};
-var TG = new TreeGrid([ {
-    cells: [ 'Payment from Gazprom to Shell', '2', '3' ]
-} ], [ '', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев' ]);
-TG.table.className = 'grid';
-TG.onExpand = function(node)
+onDomReady(function()
 {
-    // Dynamic loading example
-    if (!node.children.length)
-        node.setChildren(false, [ i ]);
-    return true;
-
-    // Another example with delay (emulation of server interaction)
-    setTimeout(function() {
+    var i = {
+        cells: [ 'Payment from Gazprom to Shell 2', '4', '5' ]
+    };
+    var TG = new TreeGrid([ {
+        cells: [ 'Payment from Gazprom to Shell', '2', '3' ]
+    } ], [ '', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев' ]);
+    TG.table.className = 'grid';
+    TG.onExpand = function(node)
+    {
+        // Dynamic loading example
         if (!node.children.length)
             node.setChildren(false, [ i ]);
-        node.toggle();
-    }, 100);
-    return false;
-};
-document.getElementById('innerdiv').appendChild(TG.table);
-$(TG.table).fixedHeaderTable({});
+        return true;
+
+        // Another example with delay (emulation of server interaction)
+        setTimeout(function() {
+            if (!node.children.length)
+                node.setChildren(false, [ i ]);
+            node.toggle();
+        }, 100);
+        return false;
+    };
+    document.getElementById('innerdiv').appendChild(TG.table);
+    $(TG.table).fixedHeaderTable({});
+
+    // Cell selection example
+/*    addListener(TG.table, 'click', function(ev)
+    {
+        var td = ev.target || ev.srcElement;
+        while (td.nodeName != 'TABLE' && td.nodeName != 'TD')
+            td = td.parentNode;
+        if (td.nodeName == 'TD' && td.parentNode._node && td.previousSibling)
+            td.className = td.className == 'selected' ? '' : 'selected';
+    });*/
+    var startDrag, dragDiv;
+    $(document.body).on('mousedown', function(evt)
+    {
+        $(TG.table).find('td.selected').removeClass('selected');
+        startDrag = [ evt.pageX, evt.pageY ];
+        if (!dragDiv)
+        {
+            dragDiv = document.createElement('div');
+            dragDiv.className = 'selection-rect';
+            document.body.appendChild(dragDiv);
+        }
+        dragDiv.style.display = 'block';
+        dragDiv.style.left = evt.pageX+'px';
+        dragDiv.style.top = evt.pageY+'px';
+        dragDiv.style.width = '0px';
+        dragDiv.style.height = '0px';
+        return false;
+    });
+    $(document.body).on('mousemove', function(evt)
+    {
+        if (startDrag)
+        {
+            if (startDrag[0] < evt.pageX)
+            {
+                dragDiv.style.left = startDrag[0]+'px';
+                dragDiv.style.width = (evt.pageX-startDrag[0])+'px';
+            }
+            else
+            {
+                dragDiv.style.left = evt.pageX+'px';
+                dragDiv.style.width = (startDrag[0]-evt.pageX)+'px';
+            }
+            if (startDrag[1] < evt.pageY)
+            {
+                dragDiv.style.top = startDrag[1]+'px';
+                dragDiv.style.height = (evt.pageY-startDrag[1])+'px';
+            }
+            else
+            {
+                dragDiv.style.top = evt.pageY+'px';
+                dragDiv.style.height = (startDrag[1]-evt.pageY)+'px';
+            }
+        }
+    });
+    $(document.body).on('mouseup', function(evt)
+    {
+        if (startDrag)
+        {
+            dragDiv.style.display = 'none';
+            var x1 = startDrag[0], y1 = startDrag[1], x2 = evt.pageX, y2 = evt.pageY;
+            if (x2 < x1)
+            {
+                var t = x2;
+                x2 = x1;
+                x1 = t;
+            }
+            if (y2 < y1)
+            {
+                var t = y2;
+                y2 = y1;
+                y1 = t;
+            }
+            $(rectangleSelect($(TG.table).find('td + td'), x1, y1, x2, y2)).addClass('selected');
+            startDrag = null;
+        }
+    });
 });
+
+function rectangleSelect(selector, x1, y1, x2, y2)
+{
+    var elements = [];
+    $(selector).each(function()
+    {
+        var $this = $(this);
+        var offset = $this.offset();
+        var x = offset.left;
+        var y = offset.top;
+        var w = $this.width();
+        var h = $this.height();
+        if (x+w >= x1 && y+h >= y1 && x <= x2 && y <= y2)
+        {
+            elements.push($this.get(0));
+        }
+    });
+    return elements;
+}
 //-->
 </script>
 </body>