Merge branch 'master' of github.com:Olical/react-faux-dom

Olical · Apr 19, 2017 · 41edb30 · 41edb30
2 parents 49e7761 + bc3950b
commit 41edb30
Show file tree

Hide file tree

Showing 6 changed files with 191 additions and 2 deletions.
diff --git a/examples/update-d3-with-mixin/.gitignore b/examples/update-d3-with-mixin/.gitignore
@@ -0,0 +1 @@
+bundle.js
diff --git a/examples/update-d3-with-mixin/Chart.js b/examples/update-d3-with-mixin/Chart.js
@@ -0,0 +1,116 @@
+var React = require('react')
+var Faux = require('../../lib/ReactFauxDOM')
+var d3 = require('d3')
+
+var Chart = React.createClass({
+  mixins: [Faux.mixins.core, Faux.mixins.anim],
+  propsTypes: {
+    title: React.PropTypes.string.isRequired,
+    data: React.PropTypes.arrayOf(React.PropTypes.number).isRequired
+  },
+  getInitialState: function () {
+    return {
+      chart: 'loading...'
+    }
+  },
+  componentDidMount: function () {
+    this.renderD3()
+  },
+  componentDidUpdate: function (prevProps, prevState) {
+    if (this.props !== prevProps) {
+      this.updateD3()
+    }
+  },
+  render: function () {
+    return (
+      <div>
+        {this.state.chart}
+      </div>
+    )
+  },
+  renderD3: function () {
+    var data = this.props.data
+
+    // This will create a faux div and store its virtual DOM in state.chart
+    var faux = this.connectFauxDOM('div', 'chart')
+
+    /*
+       D3 code below by Alan Smith, http://bl.ocks.org/alansmithy/e984477a741bc56db5a5
+       The only changes made for this example are...
+
+       1) feeding D3 the faux node created above
+       2) calling this.animateFauxDOM(duration) after each animation kickoff
+       3) move data generation and button code to parent component
+       4) data and title provided as props by parent component
+       5) reattach to faux dom for updates
+       6) move rejoining of data and chart updates to updateD3()
+    */
+
+    var xBuffer = 50
+    var yBuffer = 150
+    var lineLength = 400
+
+    var svgDoc = d3.select(faux).append('svg')
+
+    svgDoc.append('text')
+      .attr('x', xBuffer + (lineLength / 2))
+      .attr('y', 50)
+      .text(this.props.title)
+
+    // create axis line
+    svgDoc.append('line')
+      .attr('x1', xBuffer)
+      .attr('y1', yBuffer)
+      .attr('x1', xBuffer + lineLength)
+      .attr('y2', yBuffer)
+
+    // create basic circles
+    svgDoc.append('g').selectAll('circle')
+      .data(data)
+      .enter()
+      .append('circle')
+      .attr('cx', function (d, i) {
+        var spacing = lineLength / data.length
+        return xBuffer + (i * spacing)
+      })
+      .attr('cy', yBuffer)
+      .attr('r', function (d, i) { return d })
+  },
+  updateD3: function () {
+    var data = this.props.data
+
+    /* code below from Alan Smith except changes mentioned previously */
+
+    var xBuffer = 50
+    var yBuffer = 150
+    var lineLength = 400
+
+    // reattach to faux dom
+    var faux = this.connectFauxDOM('div', 'chart')
+    var svgDoc = d3.select(faux).select('svg')
+
+    // rejoin data
+    var circle = svgDoc.select('g').selectAll('circle')
+      .data(data)
+
+    circle.exit().remove() // remove unneeded circles
+    circle.enter().append('circle')
+      .attr('r', 0) // create any new circles needed
+
+    // update all circles to new positions
+    circle.transition()
+      .duration(500)
+      .attr('cx', function (d, i) {
+        var spacing = lineLength / data.length
+        return xBuffer + (i * spacing)
+      })
+      .attr('cy', yBuffer)
+      .attr('r', function (d, i) { return d })
+
+    this.animateFauxDOM(800)
+
+    d3.select('text').text(this.props.title)
+  }
+})
+
+module.exports = Chart
diff --git a/examples/update-d3-with-mixin/index.html b/examples/update-d3-with-mixin/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Mixin example</title>
+  <style type="text/css">
+		/* styles below are from Alan Smith's D3 chart used in the example
+			http://bl.ocks.org/alansmithy/e984477a741bc56db5a5 */ 
+		svg {width:500px; height:500px}
+		button  {float:left}
+		line    {stroke:#ddd;shape-rendering: crispEdges;}
+		text    {text-anchor:middle;}
+		circle {fill:orange;stroke:orange;fill-opacity:0.5;}
+		.axis line {fill:none;stroke:#ddd;shape-rendering: crispEdges;}
+		.axis path  {fill:none;}
+		.axis text {font-size:0.7em;fill:#555;font-family:sans-serif}
+  </style>
+</head>
+<body>
+  <div id="container"></div>
+  <script type="text/javascript" src="./bundle.js"></script>
+</body>
+</html>
diff --git a/examples/update-d3-with-mixin/index.js b/examples/update-d3-with-mixin/index.js
@@ -0,0 +1,28 @@
+var React = require('react')
+var ReactDOM = require('react-dom')
+var Chart = require('./Chart')
+
+var App = React.createClass({
+  getInitialState: function () {
+    return {
+      dataArray0: [30, 35, 45, 55, 70],
+      dataArray1: [50, 55, 45, 35, 20, 25, 25, 40],
+      dataIndex: 0
+    }
+  },
+  render: function () {
+    return (
+      <div>
+        <button onClick={this.changeData}>Change data</button>
+        <Chart data={this.state['dataArray' + this.state.dataIndex]} title={'dataset ' + this.state.dataIndex} />
+      </div>
+    )
+  },
+  changeData: function () {
+    this.setState({
+      dataIndex: (this.state.dataIndex + 1) % 2
+    })
+  }
+})
+
+ReactDOM.render(<App />, document.getElementById('container'))
diff --git a/examples/update-d3-with-mixin/package.json b/examples/update-d3-with-mixin/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "react-faux-dom-example-update",
+  "version": "0.0.1",
+  "description": "An example of how to use the React-Faux-DOM mixin to update and animate D3",
+  "main": "index.js",
+  "devDependencies": {
+    "browserify": "^13.0.0",
+    "d3": "^3.5.16",
+    "react": "^0.14.6",
+    "react-dom": "^0.14.6",
+    "reactify": "^1.1.1"
+  },
+  "scripts": {
+    "build": "browserify -t reactify index.js -o bundle.js"
+  },
+  "author": "Thibaut Tiberghien",
+  "license": "Unlicense"
+}
diff --git a/lib/mixins/core.js b/lib/mixins/core.js
@@ -7,8 +7,10 @@ var mixin = {
     this.animateFauxDOMUntil = 0
   },
   connectFauxDOM: function (node, name) {
-    this.connectedFauxDOM[name] = typeof node !== 'string' ? node : new Element(node)
-    setTimeout(this.drawFauxDOM)
+    if (!this.connectedFauxDOM[name]) {
+      this.connectedFauxDOM[name] = typeof node !== 'string' ? node : new Element(node)
+      setTimeout(this.drawFauxDOM)
+    }
     return this.connectedFauxDOM[name]
   },
   drawFauxDOM: function () {