diff --git a/scripts/fractal.js b/scripts/fractal.js index fdc3afe..db09f71 100644 --- a/scripts/fractal.js +++ b/scripts/fractal.js @@ -7,12 +7,12 @@ import { applyChaos } from './chaos'; * Render a canvas element that draws a fractal out of a * given iterated function system */ -export class Fractal extends React.Component { +class Fractal extends React.Component { constructor(props) { super(props); this.state = { - zoom: 200, + zoom: 30, dragging: false, center: null, points: null @@ -158,10 +158,13 @@ export class Fractal extends React.Component { this.ctx.putImageData(image, 0, 0); } - // this is dirty. TODO: make it less coupled + /** + * Get the container size + * + * @return {Array} Width and height of the container + */ getSize() { - const wrapping = document.querySelector('#content'); - return [wrapping.clientWidth, wrapping.clientHeight]; + return [this.container.clientWidth, this.container.clientHeight]; } /** @@ -223,12 +226,21 @@ export class Fractal extends React.Component { * Create a canvas with correct listeners */ render() { - return this.ctx = canvas.getContext('2d')} - onWheel={this.wheel.bind(this)} - onMouseDown={this.mouseDown.bind(this)} - onMouseUp={this.mouseUp.bind(this)} - onMouseMove={this.mouseMove.bind(this)} - >; + return
this.container = div}> + this.ctx = canvas.getContext('2d')} + onWheel={this.wheel.bind(this)} + onMouseDown={this.mouseDown.bind(this)} + onMouseUp={this.mouseUp.bind(this)} + onMouseMove={this.mouseMove.bind(this)} + > +
; } } + +Fractal.defaultProps = { + iterations: 200000, + system: [[], []] +}; + +export { Fractal };