From b31eb9186473c12480d5e2ebb8b54065871c21cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= Date: Thu, 24 Dec 2015 12:23:08 +0100 Subject: [PATCH] :bulb: Separate components --- bundle.js | 73 ++++++++++++++++++++++++++++++++++++++++----- index.html | 22 ++------------ scripts/app.js | 26 ++++++++++++++++ scripts/controls.js | 34 +++++++++++++++++++++ scripts/index.js | 7 ++--- styles/index.css | 4 +++ 6 files changed, 135 insertions(+), 31 deletions(-) create mode 100644 scripts/app.js create mode 100644 scripts/controls.js diff --git a/bundle.js b/bundle.js index b995201..3fce6d9 100644 --- a/bundle.js +++ b/bundle.js @@ -5854,7 +5854,9 @@ return ancestorInfo.aTagInScope;case 'nobr':return ancestorInfo.nobrTagInScope;} // with that -- otherwise we just start with the parent's owners. deepestCommon!==-1?childOwners[deepestCommon].getName()||UNKNOWN:[],ancestorOwnerNames,ancestorTag, // If we're warning about an invalid (non-parent) ancestry, add '...' invalidAncestor?['...']:[],childOwnerNames,childTag).join(' > ');var warnKey=!!invalidParent+'|'+childTag+'|'+ancestorTag+'|'+ownerInfo;if(didWarn[warnKey]){return;}didWarn[warnKey]=true;if(invalidParent){var info='';if(ancestorTag==='table'&&childTag==='tr'){info+=' Add a to your code to match the DOM tree generated by '+'the browser.';}process.env.NODE_ENV!=='production'?warning(false,'validateDOMNesting(...): <%s> cannot appear as a child of <%s>. '+'See %s.%s',childTag,ancestorTag,ownerInfo,info):undefined;}else {process.env.NODE_ENV!=='production'?warning(false,'validateDOMNesting(...): <%s> cannot appear as a descendant of '+'<%s>. See %s.',childTag,ancestorTag,ownerInfo):undefined;}}};validateDOMNesting.ancestorInfoContextKey='__validateDOMNesting_ancestorInfo$'+Math.random().toString(36).slice(2);validateDOMNesting.updatedAncestorInfo=updatedAncestorInfo; // For testing -validateDOMNesting.isTagValidInContext=function(tag,ancestorInfo){ancestorInfo=ancestorInfo||emptyAncestorInfo;var parentInfo=ancestorInfo.parentTag;var parentTag=parentInfo&&parentInfo.tag;return isTagValidWithParent(tag,parentTag)&&!findInvalidAncestorForTag(tag,ancestorInfo);};}module.exports=validateDOMNesting;}).call(this,require('_process'));},{"./Object.assign":51,"_process":28,"fbjs/lib/emptyFunction":8,"fbjs/lib/warning":27}],158:[function(require,module,exports){'use strict';module.exports=require('./lib/React');},{"./lib/React":53}],159:[function(require,module,exports){'use strict' /** +validateDOMNesting.isTagValidInContext=function(tag,ancestorInfo){ancestorInfo=ancestorInfo||emptyAncestorInfo;var parentInfo=ancestorInfo.parentTag;var parentTag=parentInfo&&parentInfo.tag;return isTagValidWithParent(tag,parentTag)&&!findInvalidAncestorForTag(tag,ancestorInfo);};}module.exports=validateDOMNesting;}).call(this,require('_process'));},{"./Object.assign":51,"_process":28,"fbjs/lib/emptyFunction":8,"fbjs/lib/warning":27}],158:[function(require,module,exports){'use strict';module.exports=require('./lib/React');},{"./lib/React":53}],159:[function(require,module,exports){'use strict';var _createClass=(function(){function defineProperties(target,props){for(var i=0;i newCenter = mouse * zoom - mouse * newZoom + center -this.setState({zoom:newZoom,center:[mouse[0]*zoom-mouse[0]*newZoom+center[0],mouse[1]*zoom-mouse[1]*newZoom+center[1]]},this.draw);event.preventDefault();}},{key:'mouseDown',value:function mouseDown(event){this.setState({dragging:[event.nativeEvent.offsetX,event.nativeEvent.offsetY]});}},{key:'mouseUp',value:function mouseUp(){this.setState({dragging:false});}},{key:'mouseMove',value:function mouseMove(event){var dragging=this.state.dragging;var center=this.state.center;if(dragging!==false){var newMouse=[event.nativeEvent.offsetX,event.nativeEvent.offsetY];var movement=[newMouse[0]-dragging[0],newMouse[1]-dragging[1]];this.setState({dragging:newMouse,center:[center[0]+movement[0],center[1]-movement[1]]},this.draw);event.preventDefault();}}},{key:'draw',value:function draw(){var width=this.ctx.canvas.width;var height=this.ctx.canvas.height;var zoom=this.state.zoom;var center=this.state.center;var points=this.state.points; // do not plot (very) small sizes -if(width<1){return;}this.ctx.clearRect(0,0,width,height); // do the chaos game -var image=this.ctx.getImageData(0,0,width,height);var length=points.length;var color=[0,0,0];for(var i=50;i=0&&x=0&&y=0&&x=0&&y - - - -
- -
+ +
diff --git a/scripts/app.js b/scripts/app.js new file mode 100644 index 0000000..17d42ea --- /dev/null +++ b/scripts/app.js @@ -0,0 +1,26 @@ +'use strict'; + +import * as React from 'react'; +import { Controls } from './controls'; +import { Fractal } from './fractal'; +import { sierpinski } from './ifs'; + +/** + * Render the app sidebar and fractal display + */ +export class App extends React.Component { + constructor(props) { + super(props); + + this.state = { + + }; + } + + render() { + return
+ + +
; + } +} diff --git a/scripts/controls.js b/scripts/controls.js new file mode 100644 index 0000000..f92230b --- /dev/null +++ b/scripts/controls.js @@ -0,0 +1,34 @@ +'use strict'; + +import * as React from 'react'; + +/** + * Render app controls + */ +export class Controls extends React.Component { + constructor(props) { + super(props); + + this.state = { + + }; + } + + render() { + return ; + } +} diff --git a/scripts/index.js b/scripts/index.js index 5142146..0d7936e 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,11 +1,10 @@ 'use strict'; -import { Fractal } from './fractal'; +import { App } from './app'; import * as React from 'react'; // eslint-disable-line no-unused-vars import { render } from 'react-dom'; -import { barnsley } from './ifs'; render( - , - document.querySelector('#content') + , + document.querySelector('#react') ); diff --git a/styles/index.css b/styles/index.css index 56bb5eb..f6854be 100644 --- a/styles/index.css +++ b/styles/index.css @@ -2,6 +2,10 @@ * Styles for chaos game */ +#react { + height: 100%; +} + #content { overflow: hidden; }