Skip to content

Commit

Permalink
build updates
Browse files Browse the repository at this point in the history
  • Loading branch information
Eric Rowell authored and Eric Rowell committed Nov 24, 2018
1 parent a63c46f commit 853e201
Show file tree
Hide file tree
Showing 13 changed files with 97 additions and 338 deletions.
9 changes: 9 additions & 0 deletions TODOS.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
# TODOS

* click on nodes and change color
* pass in new state array, and let shader alter color based on state
* 0 - normal
* 1 - hover
* 2 - selected
* etc.
* SPIKE investigate using single integer as hit color and letting shader convert to components
* SPIKE investigate using colorIndex for point color and letting shader convert to components
* SPIKE try using normalized x,y positions and let shader convert



307 changes: 16 additions & 291 deletions gallery/dist/gallery.js → engine/dist/ElGrapho.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./gallery/src/gallery.js");
/******/ return __webpack_require__(__webpack_require__.s = "./engine/src/ElGrapho.js");
/******/ })
/************************************************************************/
/******/ ({
Expand Down Expand Up @@ -1245,7 +1245,11 @@ ElGrapho.prototype = {
Tooltip.hide();
}
else {
Tooltip.render(dataPointIndex, evt.clientX, evt.clientY, that.components.tooltip.template);
Tooltip.render(dataPointIndex, evt.clientX, evt.clientY, that.tooltipTemplate);

that.fire('node-mouseover', {
dataPointIndex: dataPointIndex
});
}
}
}));
Expand Down Expand Up @@ -1276,7 +1280,10 @@ ElGrapho.prototype = {
Tooltip.hide();
}));
},
setInteractionMode(mode) {
setTooltipTemplate: function(func) {
this.tooltipTemplate = func;
},
setInteractionMode: function(mode) {
this.interactionMode = mode;
this.wrapper.className = 'el-grapho-wrapper el-grapho-' + mode + '-interaction-mode';
},
Expand Down Expand Up @@ -1362,8 +1369,8 @@ ElGrapho.prototype = {
on: function(name, func) {
this.events.on(name, func);
},
fire: function(name) {
this.events.fire(name);
fire: function(name, evt) {
this.events.fire(name, evt);
}
};

Expand Down Expand Up @@ -1504,10 +1511,10 @@ Events.prototype = {

this.funcs[name].push(func);
},
fire: function(name) {
fire: function(name, evt) {
if (this.funcs[name]) {
this.funcs[name].forEach(function(f) {
f();
f(evt);
});
}
}
Expand Down Expand Up @@ -2318,7 +2325,7 @@ const Tooltip = {
Tooltip.wrapper.style.left = x + 'px';
Tooltip.wrapper.style.bottom = (window.innerHeight - y + 10) + 'px';

template.call(Tooltip, index);
template(index, this.wrapper);
},
hide: function() {
if (!Tooltip.initialized) {
Expand Down Expand Up @@ -2352,288 +2359,6 @@ const NumberFormatter = {

module.exports = NumberFormatter;

/***/ }),

/***/ "./gallery/src/gallery.js":
/*!********************************!*\
!*** ./gallery/src/gallery.js ***!
\********************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

const ElGrapho = __webpack_require__(/*! ../../engine/src/ElGrapho */ "./engine/src/ElGrapho.js");
const VertexBridges = ElGrapho.VertexBridges;
const NumberFormatter = ElGrapho.NumberFormatter;

const WIDTH = 500;
const HEIGHT = 500;

function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}


// const NUM_POINTS = 100;
// const MIN_POINT_SIZE = 8;
// const MAX_POINT_SIZE = 30;
// const EDGE_SIZE = 0.5;
// let pointVertices = VertexBridges.getRandomClusteredGraphPoints(NUM_POINTS, WIDTH, HEIGHT, MIN_POINT_SIZE, MAX_POINT_SIZE);
// let triangleVertices = VertexBridges.getGraphTriangles(pointVertices, 1, EDGE_SIZE);



// const NUM_POINTS = 1000;
// const MIN_POINT_SIZE = 8;
// const MAX_POINT_SIZE = 30;
// const EDGE_SIZE = 0.5;
// let pointVertices = VertexBridges.getRandomClusteredGraphPoints(NUM_POINTS, WIDTH, HEIGHT, MIN_POINT_SIZE, MAX_POINT_SIZE);
// let triangleVertices = VertexBridges.getGraphTriangles(pointVertices, 1, EDGE_SIZE);



// const NUM_POINTS = 10000;
// const POINT_SIZE = 10;
// const MIN_POINT_SIZE = 4;
// const MAX_POINT_SIZE = 10;
// const EDGE_SIZE = 0.2;
// let pointVertices = VertexBridges.getRandomClusteredGraphPoints(NUM_POINTS, WIDTH, HEIGHT, MIN_POINT_SIZE, MAX_POINT_SIZE);
// let triangleVertices = VertexBridges.getGraphTriangles(pointVertices, 1, EDGE_SIZE);



// const NUM_POINTS = 100000;
// const POINT_SIZE = 10;
// const MIN_POINT_SIZE = 4;
// const MAX_POINT_SIZE = 10;
// const EDGE_SIZE = 0.2;
// let pointVertices = VertexBridges.getRandomClusteredGraphPoints(NUM_POINTS, WIDTH, HEIGHT, MIN_POINT_SIZE, MAX_POINT_SIZE);
// let triangleVertices = VertexBridges.getGraphTriangles(pointVertices, 1, EDGE_SIZE);


let EXAMPLE_CONFIGS = [
// 0 --------------------------------------------------------
function() {
let points = VertexBridges.getRandomPoints({
numPoints: 100,
width: WIDTH,
height: HEIGHT,
pointSize: 10
});

return {
description: '100 point scatter',
vertices: {
points: points
},
renderingMode: 'ux'
};
},
// 1 --------------------------------------------------------
function() {
let points = VertexBridges.getRandomPoints({
numPoints: 100000,
width: WIDTH,
height: HEIGHT,
pointSize: 3
});

return {
description: '100k point scatter',
vertices: {
points: points
},
renderingMode: 'ux'
};
},
// 2 --------------------------------------------------------
function() {
let points = VertexBridges.getRandomPoints({
numPoints: 1000000,
width: WIDTH,
height: HEIGHT,
pointSize: 1
});

return {
description: '1M point scatter',
vertices: {
points: points
},
renderingMode: 'ux'
};
},
// 3 --------------------------------------------------------
function() {
let points = VertexBridges.getRandomPoints({
numPoints: 10000000,
width: WIDTH,
height: HEIGHT,
pointSize: 0.2
});

return {
description: '10M point scatter',
vertices: {
points: points
},
renderingMode: 'ux'
};
},
// 4 --------------------------------------------------------
function() {
let points = VertexBridges.getRandomClusteredGraphPoints({
numPoints: 100,
width: WIDTH,
height: HEIGHT,
minPointSize: 8,
maxPointSize: 16
});

let triangles = VertexBridges.getGraphTriangles({
points: points,
maxConnectionsPerNode: 1,
edgeSize: 0.4
});

return {
description: '100 node clustered graph',
vertices: {
points: points,
triangles: triangles
},
renderingMode: 'ux'
};
},
// 5 --------------------------------------------------------
function() {
let points = VertexBridges.getRandomClusteredGraphPoints({
numPoints: 1000,
width: WIDTH,
height: HEIGHT,
minPointSize: 4,
maxPointSize: 8
});

let triangles = VertexBridges.getGraphTriangles({
points: points,
maxConnectionsPerNode: 1,
edgeSize: 0.3
});

return {
description: '1k node clustered graph',
vertices: {
points: points,
triangles: triangles
},
renderingMode: 'ux'
};
},
// 6 --------------------------------------------------------
function() {
let points = VertexBridges.getRandomClusteredGraphPoints({
numPoints: 10000,
width: WIDTH,
height: HEIGHT,
minPointSize: 1,
maxPointSize: 2
});

let triangles = VertexBridges.getGraphTriangles({
points: points,
maxConnectionsPerNode: 1,
edgeSize: 0.05
});

return {
description: '10k node clustered graph',
vertices: {
points: points,
triangles: triangles
},
renderingMode: 'ux'
};
},
// 7 --------------------------------------------------------
function() {
let points = VertexBridges.getRandomClusteredGraphPoints({
numPoints: 100000,
width: WIDTH,
height: HEIGHT,
minPointSize: 0.2,
maxPointSize: 0.4
});

let triangles = VertexBridges.getGraphTriangles({
points: points,
maxConnectionsPerNode: 1,
edgeSize: 0.01
});

return {
description: '100k node clustered graph',
vertices: {
points: points,
triangles: triangles
},
renderingMode: 'performance'
};
},
// 8 --------------------------------------------------------
function() {
let points = VertexBridges.getRandomClusteredGraphPoints({
numPoints: 1000000,
width: WIDTH,
height: HEIGHT,
minPointSize: 0.2,
maxPointSize: 0.3
});

let triangles = VertexBridges.getGraphTriangles({
points: points,
maxConnectionsPerNode: 1,
edgeSize: 0.005
});

return {
description: '1M node clustered graph',
vertices: {
points: points,
triangles: triangles
},
renderingMode: 'performance'
};
}
];

let configIndex = getParameterByName('config') || 0;

let config = EXAMPLE_CONFIGS[configIndex]();

var graph = new ElGrapho({
container: document.getElementById('container'),
vertices: config.vertices,
width: WIDTH,
height: HEIGHT,
components: {
tooltip: {
template: function(index) {
this.wrapper.innerHTML = 'My Data: ' + NumberFormatter.addCommas(index);
}
}
},
renderingMode: config.renderingMode
});




/***/ }),

/***/ "./node_modules/concretejs/build/concrete.min.js":
Expand Down Expand Up @@ -27512,4 +27237,4 @@ module.exports = function(module) {
/***/ })

/******/ });
//# sourceMappingURL=gallery.js.map
//# sourceMappingURL=ElGrapho.js.map
1 change: 1 addition & 0 deletions engine/dist/ElGrapho.js.map
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 853e201

Please sign in to comment.