drag column almost done

abc91199 · Dec 30, 2014 · b85a14e · b85a14e
1 parent 32428b1
commit b85a14e
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 22 deletions.
diff --git a/features/fin-hypergrid-feature-column-moving.html b/features/fin-hypergrid-feature-column-moving.html
@@ -20,17 +20,21 @@
 
         dragArmed: false,
         dragging: false,
+        dragCol: -1,
 
         handleMouseDrag: function(grid, event) {
-            if (this.isFixedRow(grid,event) && this.dragArmed) {
+            var gridCell = event.gridCell;
+            if (this.isFixedRow(grid,event) && this.dragArmed && !this.dragging) {
                 this.dragging = true;
+                this.dragCol = gridCell.x - grid.getFixedColCount();
                 this.detachChain();
             } else if (this.next) {
                 this.next.handleMouseDrag(grid, event);
             }
             if (this.dragging) {
                 var x = event.primitiveEvent.detail.mouse.x;
-                grid.moveDragger(x, 5);
+                var y = event.primitiveEvent.detail.mouse.y;
+                grid.dragColumn(x, this.dragCol);
             }
         },
 
@@ -46,13 +50,14 @@
         handleMouseUp: function(grid, event) {
             if (this.dragging) {
                 this.cursor = null;
-
                 //delay here to give other events a chance to be dropped
                 var self = this;
+                grid.hideDragColumn();
                 setTimeout(function(){
                     self.attachChain();
                 }, 200);
             }
+            this.dragCol = -1;
             this.dragging = false;
             this.dragArmed = false;
             if (this.next) {

diff --git a/fin-hypergrid.html b/fin-hypergrid.html
@@ -85,13 +85,8 @@
         z-index: 1000;
     }
     #dragger {
-        width: 120px;
-        height: 800px;
-        background-color: red;
-        top: 0px;
-        left: 0px;
         position: absolute;
-        z-index: 100;
+        display: none;
     }
     </style>
 
@@ -332,7 +327,7 @@
             this.initScrollbars();
             this.dragger = this.shadowRoot.querySelector('#dragger');
             this.draggerCTX = this.dragger.getContext('2d');
-
+            //this.draggerCTX.setTransform(1, 0, 0, 1, 0, 0);
             //Register a listener for the copy event so we can copy our selected region to the pastebuffer if conditions are right.
             document.body.addEventListener('copy', function(evt) {
                 self.checkClipboardCopy(evt);
@@ -1655,9 +1650,24 @@
             return this.getBehavior().getCellEditorAt(x, y);
         },
 
-        moveDragger: function(x, y) {
+        dragColumn: function(x, colIndex) {
+            var colWidth = this.getColumnWidth(colIndex + this.getHScrollValue());
+            console.log('drag col ' + colIndex);
+            noop(colIndex);
+            var d = this.dragger;
+            d.setAttribute('width', colWidth + 'px');
+            d.setAttribute('height', this.clientHeight + 'px');
+            var startX = this.renderer.renderedColWidths[colIndex + 1];
+            this.draggerCTX.translate(-startX, 0);
             this.renderer.renderGrid(this.draggerCTX);
-            this.dragger.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
+            this.draggerCTX.translate(startX, 0);
+            d.style.webkitTransform = 'translate(' + (x - (colWidth / 2)) + 'px, ' + 10 + 'px)';
+            d.style.zIndex = '100';
+            d.style.display = 'inline';
+        },
+        hideDragColumn: function() {
+            var d = this.dragger;
+            d.style.display = 'none';
         }
     });
 

diff --git a/fin-hypergrid.js b/fin-hypergrid.js
@@ -215,7 +215,7 @@
             this.initScrollbars();
             this.dragger = this.shadowRoot.querySelector('#dragger');
             this.draggerCTX = this.dragger.getContext('2d');
-
+            //this.draggerCTX.setTransform(1, 0, 0, 1, 0, 0);
             //Register a listener for the copy event so we can copy our selected region to the pastebuffer if conditions are right.
             document.body.addEventListener('copy', function(evt) {
                 self.checkClipboardCopy(evt);
@@ -1538,9 +1538,24 @@
             return this.getBehavior().getCellEditorAt(x, y);
         },
 
-        moveDragger: function(x, y) {
+        dragColumn: function(x, colIndex) {
+            var colWidth = this.getColumnWidth(colIndex + this.getHScrollValue());
+            console.log('drag col ' + colIndex);
+            noop(colIndex);
+            var d = this.dragger;
+            d.setAttribute('width', colWidth + 'px');
+            d.setAttribute('height', this.clientHeight + 'px');
+            var startX = this.renderer.renderedColWidths[colIndex + 1];
+            this.draggerCTX.translate(-startX, 0);
             this.renderer.renderGrid(this.draggerCTX);
-            this.dragger.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
+            this.draggerCTX.translate(startX, 0);
+            d.style.webkitTransform = 'translate(' + (x - (colWidth / 2)) + 'px, ' + 10 + 'px)';
+            d.style.zIndex = '100';
+            d.style.display = 'inline';
+        },
+        hideDragColumn: function() {
+            var d = this.dragger;
+            d.style.display = 'none';
         }
     });
 

diff --git a/fin-hypergrid.min.html b/fin-hypergrid.min.html
diff --git a/fin-hypergrid.pre.html b/fin-hypergrid.pre.html
@@ -85,13 +85,8 @@
         z-index: 1000;
     }
     #dragger {
-        width: 120px;
-        height: 800px;
-        background-color: red;
-        top: 0px;
-        left: 0px;
         position: absolute;
-        z-index: 100;
+        display: none;
     }
     </style>