Skip to content

Commit

Permalink
alpha stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@stevewirts
stevewirts committed Oct 26, 2015
1 parent 5d15bd8 commit 99d5bcb
Show file tree
Hide file tree
Showing 6 changed files with 453 additions and 47 deletions.
137 changes: 137 additions & 0 deletions examples/alpha.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!doctype html>
<html>
<head>
<title>fin-hypergrid Demo</title>

<script src="../js/sampledata.js"></script>
<!-- <link rel="import" href="fin-hypergrid.dev.html"> -->
<link rel="import" href="../polymer/html/fin-hypergrid.html">
<style>
.grid {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.button-bar {
position: absolute;
top: 0;
right: 0;
bottom: 90%;
left: 0;
}
.table {
position: absolute;
top: 10%;
right: 0;
bottom: 0%;
left: 0;
}
</style>
</head>
<body>

<div class="container">
<div class="button-bar">
<button onclick="addColumn()">add column</button>
<button onclick="addRow()">add row</button>

</div>
<div class="table" style="overflow: hidden">
<fin-hypergrid class="grid" id="json-example">
<fin-hypergrid-behavior-json></fin-hypergrid-behavior-json>
</fin-hypergrid>
</div>
</div>

<script>

(function(){

document.addEventListener('polymer-ready', function() {

var jsonGrid = document.querySelector('#json-example');
var jsonModel = jsonGrid.getBehavior();
var renderer = jsonGrid.getRenderer();

jsonModel.setData(people);

window.addColumn = function() {
var data = jsonModel.getData();
var fieldName = prompt('new column name');
for (var i = 0; i < data.length; i++) {
data[i][fieldName] = i;
}
jsonModel.setFields([]);
jsonModel.setHeaders([]);
jsonModel.initColumnIndexes(jsonModel.getState());
jsonModel.changed();
}

window.addRow = function() {
var data = jsonModel.getData();
data.unshift({
last_name: 'Simpson', //jshint ignore:line
first_name: 'Homer', //jshint ignore:line
pets: 1,
birthDate: '1962-01-01',
birthState: 'Springfield',
residenceState: 'Springfield',
employed: true,
income: -10000,
travel: 5000,
});
jsonModel.changed();
}

//lets add a special selection area renderer
var img = new Image;
var imageX = 3;
var imageY = 45;
img.src = 'http://img3.wikia.nocookie.net/__cb20130601171117/degrassi/images/5/5c/Wanted-bunny-rabbit_50154511.jpg';
renderer.addExtraRenderer(renderer._renderFocusCell);
renderer.addExtraRenderer(function(ctx) {
var scrollX = jsonGrid.getHScrollValue();
var scrollY = jsonGrid.getVScrollValue();

var x = imageX - scrollX;
var y = imageY - scrollY;

if (!renderer.isColumnVisible(imageX) || !renderer.isRowVisible(imageY)) {
return;
}

console.log(x, y);
var o = this._getBoundsOfCell(x, y).origin;
ctx.drawImage(img, o.x, o.y);

});
//start renderering animator
renderer.startAnimator();

//set the actual json row objects
//jsonModel.setData(people); //see sampledata.js for the random data

jsonGrid.addFinEventListener('fin-context-menu', function(e) {
var modelPoint = e.detail.gridCell;
var headerRowCount = jsonGrid.getHeaderRowCount();
console.log('fin-context-menu(' + modelPoint.x + ', ' + (modelPoint.y - headerRowCount) + ')');
});

window.g = document.querySelector('#json-example');

});
})();

</script>

</body>
</html>
152 changes: 152 additions & 0 deletions fin-hypergrid.dev.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15588,6 +15588,8 @@
a Polymer web-component life cycle event, called when an instance of this is plugged into the dom
*
*/
extraRenderers: [],

attached: function() {
this.readyInit();
this.renderedColumnWidths = [0];
Expand Down Expand Up @@ -15942,10 +15944,138 @@
this.paintCells(gc, offsetX, offsetY);
this.paintGridlines(gc, offsetX, offsetY);
this.blankOutOverflow(gc);
this.extraRenderering(gc);
this.renderOverrides(gc);
gc.closePath();
},
focusLineStep: [
[5, 5],
[0, 1, 5, 4],
[0, 2, 5, 3],
[0, 3, 5, 2],
[0, 4, 5, 1],
[0, 5, 5, 0],
[1, 5, 4, 0],
[2, 5, 3, 0],
[3, 5, 2, 0],
[4, 5, 1, 0]
],

renderFocusCell: function(gc) {
gc.beginPath();
this._renderFocusCell(gc);
gc.closePath();
},

_renderFocusCell: function(gc) {
var grid = this.getGrid();
var selections = grid.getSelectionModel().getSelections();
if (!selections || selections.length === 0) {
return;
}
var selection = selections[selections.length - 1];
var mouseDown = selection.origin;
if (mouseDown.x === -1) {
//no selected area, lets exit
return;
}

var visibleColumns = this.getVisibleColumns();
var visibleRows = this.getVisibleRows();
var fixedColCount = grid.getFixedColumnCount();
var fixedRowCount = grid.getFixedRowCount();
var lastVisibleColumn = visibleColumns[visibleColumns.length - 1];
var lastVisibleRow = visibleRows[visibleRows.length - 1];
var scrollX = grid.getHScrollValue();
var scrollY = grid.getVScrollValue();

var extent = selection.extent;

var dpOX = Math.min(mouseDown.x, mouseDown.x + extent.x) + fixedColCount;
var dpOY = Math.min(mouseDown.y, mouseDown.y + extent.y) + fixedRowCount;

//lets check if our selection rectangle is scrolled outside of the visible area
if (dpOX > lastVisibleColumn) {
return; //the top of our rectangle is below visible
}
if (dpOY > lastVisibleRow) {
return; //the left of our rectangle is to the right of being visible
}

var dpEX = Math.max(mouseDown.x, mouseDown.x + extent.x);
dpEX = Math.min(dpEX, 1 + lastVisibleColumn) + 2;

var dpEY = Math.max(mouseDown.y, mouseDown.y + extent.y);
dpEY = Math.min(dpEY, 1 + lastVisibleRow) + 2;

var o = this._getBoundsOfCell(dpOX - scrollX, dpOY - scrollY).origin;
var ox = Math.round((o.x === undefined) ? grid.getFixedColumnsWidth() : o.x);
var oy = Math.round((o.y === undefined) ? grid.getFixedRowsHeight() : o.y);
// var ow = o.width;
// var oh = o.height;
var e = this._getBoundsOfCell(dpEX - scrollX, dpEY - scrollY).origin;
var ex = Math.round((e.x === undefined) ? grid.getFixedColumnsWidth() : e.x);
var ey = Math.round((e.y === undefined) ? grid.getFixedRowsHeight() : e.y);
// var ew = e.width;
// var eh = e.height;
var x = Math.min(ox, ex);
var y = Math.min(oy, ey);
var width = 1 + ex - ox;
var height = 1 + ey - oy;
if (x === ex) {
width = ox - ex;
}
if (y === ey) {
height = oy - ey;
}
if (width * height < 1) {
//if we are only a skinny line, don't render anything
return;
}

gc.rect(x, y, width, height);
// gc.fillStyle = 'rgba(0, 0, 0, 0.2)';
// gc.fill();
gc.lineWidth = 1;
gc.strokeStyle = 'black';

// animate the dashed line a bit here for fun

gc.stroke();

gc.rect(x, y, width, height);

gc.strokeStyle = 'white';

// animate the dashed line a bit here for fun
gc.setLineDash(this.focusLineStep[Math.floor(10 * (Date.now() / 300 % 1)) % this.focusLineStep.length]);

gc.stroke();
},

startAnimator: function() {
var animate;
var self = this;
animate = function() {
var ctx = self.getCanvas().canvasCTX;
self.extraRenderering(ctx);
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);
},

extraRenderering: function(ctx) {
var er = this.extraRenderers;

for (var i = 0; i < er.length; i++) {
var r = er[i];
ctx.beginPath();
ctx.save();
r.apply(this, [ctx]);
ctx.restore();
ctx.closePath();
}
},
/**
* @function
* @instance
Expand Down Expand Up @@ -16910,6 +17040,9 @@
}
var row = this.renderedRows[this.renderedRows.length - 1] + 1;
return row;
},
addExtraRenderer: function(er) {
this.extraRenderers.push(er);
}
});

Expand Down Expand Up @@ -35038,6 +35171,25 @@

getColumnIndex: function(fieldName) {
return this.getBehavior().getColumnIndex(fieldName);
},

startAnimator: function() {
var animate;
var self = this;
animate = function() {
self.animate();
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);
},

animate: function() {
var ctx = this.getCanvas().canvasCTX;
ctx.beginPath();
ctx.save();
this.renderFocusCell(ctx);
ctx.restore();
ctx.closePath();
}

});
Expand Down
4 changes: 2 additions & 2 deletions fin-hypergrid.min.html
View file

Large diffs are not rendered by default.

55 changes: 10 additions & 45 deletions js/sampledata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,51 +26,16 @@
var income = randomFunc() * 100000;
var employed = Math.round(randomFunc());
var person = {
last_name0: lastNames[lastName], //jshint ignore:line
first_name0: firstNames[firstName], //jshint ignore:line
pets0: pets,
birthDate0: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
birthState0: states[birthstate],
residenceState0: states[residencestate],
employed0: employed === 1,
income0: income,
travel0: travel,
last_name1: lastNames[lastName], //jshint ignore:line
first_name1: firstNames[firstName], //jshint ignore:line
pets1: pets,
birthDate1: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
birthState1: states[birthstate],
residenceState1: states[residencestate],
employed1: employed === 1,
income1: income,
travel1: travel,
last_name2: lastNames[lastName], //jshint ignore:line
first_name2: firstNames[firstName], //jshint ignore:line
pets2: pets,
birthDate2: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
birthState2: states[birthstate],
residenceState2: states[residencestate],
employed2: employed === 1,
income2: income,
travel2: travel,
last_name3: lastNames[lastName], //jshint ignore:line
first_name3: firstNames[firstName], //jshint ignore:line
pets3: pets,
birthDate3: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
birthState3: states[birthstate],
residenceState3: states[residencestate],
employed3: employed === 1,
income3: income,
travel3: travel,
last_name4: lastNames[lastName], //jshint ignore:line
first_name4: firstNames[firstName], //jshint ignore:line
pets4: pets,
birthDate4: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
birthState4: states[birthstate],
residenceState4: states[residencestate],
employed4: employed === 1,
income4: income,
travel4: travel
last_name: lastNames[lastName], //jshint ignore:line
first_name: firstNames[firstName], //jshint ignore:line
pets: pets,
birthDate: birthyear + '-' + months[birthmonth] + '-' + days[birthday],
birthState: states[birthstate],
residenceState: states[residencestate],
employed: employed === 1,
income: income,
travel: travel,

};
return person;
};
Expand Down
Loading

0 comments on commit 99d5bcb

Please sign in to comment.