From e383e52320ea91c616e4aa471a0a792e5b895cfb Mon Sep 17 00:00:00 2001 From: Colin Megill Date: Thu, 5 Jul 2018 15:53:03 -0400 Subject: [PATCH 1/6] replace viewportwidth with 1 --- src/components/graph/drawPointsRegl.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/graph/drawPointsRegl.js b/src/components/graph/drawPointsRegl.js index e8c6b39b..b4adf8c9 100644 --- a/src/components/graph/drawPointsRegl.js +++ b/src/components/graph/drawPointsRegl.js @@ -39,13 +39,7 @@ export default function(regl) { distance: regl.prop("distance"), view: regl.prop("view"), projection: (context, props) => { - return mat4.perspective( - [], - Math.PI / 2, - context.viewportWidth * props.scale / context.viewportHeight, - 0.01, - 1000 - ); + return mat4.perspective([], Math.PI / 2, 1, 0.01, 1000); } }, From d1895ecb058747d28c65662bc2fc0843ac18e001 Mon Sep 17 00:00:00 2001 From: Colin Megill Date: Thu, 5 Jul 2018 16:38:43 -0400 Subject: [PATCH 2/6] Break out draw function --- src/components/graph/graph.js | 50 ++++++++++++++++++++--------------- 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/src/components/graph/graph.js b/src/components/graph/graph.js index c08f223b..b70c6027 100644 --- a/src/components/graph/graph.js +++ b/src/components/graph/graph.js @@ -47,6 +47,20 @@ class Graph extends React.Component { mode: "brush" }; } + reglDraw(regl, drawPoints, sizeBuffer, colorBuffer, pointBuffer, camera) { + regl.clear({ + depth: 1, + color: [1, 1, 1, 1] + }); + drawPoints({ + size: sizeBuffer, + distance: camera.distance, + color: colorBuffer, + position: pointBuffer, + count: this.count, + view: camera.view() + }); + } componentDidMount() { // setup canvas and camera const camera = _camera(this.reglCanvas, { scale: true, rotate: false }); @@ -59,23 +73,15 @@ class Graph extends React.Component { const colorBuffer = regl.buffer(); const sizeBuffer = regl.buffer(); - regl.frame(({ viewportWidth, viewportHeight }) => { - regl.clear({ - depth: 1, - color: [1, 1, 1, 1] - }); - - drawPoints({ - size: sizeBuffer, - distance: camera.distance, - color: colorBuffer, - position: pointBuffer, - count: this.count, - view: camera.view(), - scale: viewportHeight / viewportWidth - }); - - this.setState({ camera }); + const reglRender = regl.frame(() => { + this.reglDraw( + regl, + drawPoints, + sizeBuffer, + colorBuffer, + pointBuffer, + camera + ); camera.tick(); }); @@ -83,10 +89,11 @@ class Graph extends React.Component { regl, pointBuffer, colorBuffer, - sizeBuffer + sizeBuffer, + camera, + reglRender }); } - componentWillReceiveProps(nextProps) { if (this.state.regl && nextProps.crossfilter) { /* update the regl state */ @@ -164,7 +171,8 @@ class Graph extends React.Component { nextProps.responsive.width !== this.props.responsive.width ) { /* clear out whatever was on the div, even if nothing, but usually the brushes etc */ - d3.select("#graphAttachPoint") + d3 + .select("#graphAttachPoint") .selectAll("*") .remove(); const { svg, brush, brushContainer } = setupSVGandBrushElements( @@ -200,7 +208,7 @@ class Graph extends React.Component { // transform screen coordinates -> cell coordinates const invert = pin => { const x = - (2 * pin[0]) / (this.props.responsive.height - this.graphPaddingTop) - + 2 * pin[0] / (this.props.responsive.height - this.graphPaddingTop) - 1; const y = 2 * From 013c5fb0781e8fb713c6ca326252227c5fd45eb7 Mon Sep 17 00:00:00 2001 From: Colin Megill Date: Thu, 5 Jul 2018 16:38:50 -0400 Subject: [PATCH 3/6] remove log --- src/components/continuous/histogramBrush.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/continuous/histogramBrush.js b/src/components/continuous/histogramBrush.js index 17ab9cec..a0d74f6c 100644 --- a/src/components/continuous/histogramBrush.js +++ b/src/components/continuous/histogramBrush.js @@ -11,7 +11,6 @@ import FaPaintBrush from "react-icons/lib/fa/paint-brush"; import * as globals from "../../globals"; @connect(state => { - console.log("state in histo brush", state) const ranges = state.cells.cells && state.cells.cells.data.ranges ? state.cells.cells.data.ranges @@ -172,7 +171,9 @@ class HistogramBrush extends React.Component { this.props.dispatch({ type: "color by continuous metadata", colorAccessor: this.props.metadataField, - rangeMaxForColorAccessor: this.props.initializeRanges[this.props.metadataField].range.max + rangeMaxForColorAccessor: this.props.initializeRanges[ + this.props.metadataField + ].range.max }); } render() { From aa6f38e0a35306171176b95469deae38b04f827b Mon Sep 17 00:00:00 2001 From: Colin Megill Date: Thu, 5 Jul 2018 21:44:36 -0400 Subject: [PATCH 4/6] working! & pretty smooth, with responsive extra click --- src/components/graph/graph.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/graph/graph.js b/src/components/graph/graph.js index b70c6027..2d7b8bc9 100644 --- a/src/components/graph/graph.js +++ b/src/components/graph/graph.js @@ -85,8 +85,11 @@ class Graph extends React.Component { camera.tick(); }); + this.reglRenderState = "rendering"; + this.setState({ regl, + drawPoints, pointBuffer, colorBuffer, sizeBuffer, @@ -163,6 +166,16 @@ class Graph extends React.Component { this.state.sizeBuffer({ data: this.renderCache.sizes, dimension: 1 }); this.count = cellCount; + + this.state.regl._refresh(); + this.reglDraw( + this.state.regl, + this.state.drawPoints, + this.state.sizeBuffer, + this.state.colorBuffer, + this.state.pointBuffer, + this.state.camera + ); } if ( @@ -173,7 +186,7 @@ class Graph extends React.Component { /* clear out whatever was on the div, even if nothing, but usually the brushes etc */ d3 .select("#graphAttachPoint") - .selectAll("*") + .selectAll("svg") .remove(); const { svg, brush, brushContainer } = setupSVGandBrushElements( this.handleBrushSelectAction.bind(this), @@ -184,6 +197,13 @@ class Graph extends React.Component { this.setState({ svg, brush, brushContainer }); } } + componentDidUpdate() { + if (this.state.reglRender && this.reglRenderState === "rendering") { + console.log("yeah..."); + this.state.reglRender.cancel(); + this.reglRenderState = "paused"; + } + } handleBrushSelectAction() { /* This conditional handles procedural brush deselect. Brush emits an event on procedural deselect because it is move: null */ if (d3.event.sourceEvent !== null) { From 4365b2421243325789b56f32cfdc9618d644696b Mon Sep 17 00:00:00 2001 From: Colin Megill Date: Thu, 5 Jul 2018 21:55:30 -0400 Subject: [PATCH 5/6] remove log --- src/components/graph/graph.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/graph/graph.js b/src/components/graph/graph.js index 2d7b8bc9..3c20493a 100644 --- a/src/components/graph/graph.js +++ b/src/components/graph/graph.js @@ -199,7 +199,6 @@ class Graph extends React.Component { } componentDidUpdate() { if (this.state.reglRender && this.reglRenderState === "rendering") { - console.log("yeah..."); this.state.reglRender.cancel(); this.reglRenderState = "paused"; } From 2721e917889aecfd0c597604d57b953ee1aa90bb Mon Sep 17 00:00:00 2001 From: Colin Megill Date: Wed, 11 Jul 2018 11:28:23 -0400 Subject: [PATCH 6/6] zoom working --- src/components/graph/graph.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/components/graph/graph.js b/src/components/graph/graph.js index 3c20493a..c6cf9dd2 100644 --- a/src/components/graph/graph.js +++ b/src/components/graph/graph.js @@ -61,6 +61,25 @@ class Graph extends React.Component { view: camera.view() }); } + restartReglLoop() { + const reglRender = this.state.regl.frame(() => { + this.reglDraw( + this.state.regl, + this.state.drawPoints, + this.state.sizeBuffer, + this.state.colorBuffer, + this.state.pointBuffer, + this.state.camera + ); + this.state.camera.tick(); + }); + + this.reglRenderState = "rendering"; + + this.setState({ + reglRender + }); + } componentDidMount() { // setup canvas and camera const camera = _camera(this.reglCanvas, { scale: true, rotate: false }); @@ -73,6 +92,7 @@ class Graph extends React.Component { const colorBuffer = regl.buffer(); const sizeBuffer = regl.buffer(); + /* first time, but this duplicates above function, should be possile to avoid this */ const reglRender = regl.frame(() => { this.reglDraw( regl, @@ -198,7 +218,11 @@ class Graph extends React.Component { } } componentDidUpdate() { - if (this.state.reglRender && this.reglRenderState === "rendering") { + if ( + this.state.reglRender && + this.reglRenderState === "rendering" && + this.state.mode !== "zoom" + ) { this.state.reglRender.cancel(); this.reglRenderState = "paused"; } @@ -345,6 +369,7 @@ class Graph extends React.Component {