💡 Add default fractal settings

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 [this.container.clientWidth, this.container.clientHeight];
-        return [wrapping.clientWidth, wrapping.clientHeight];
     }
 
     /**
@@ -223,12 +226,21 @@ export class Fractal extends React.Component {
      * Create a canvas with correct listeners
      */
     render() {
-        return <canvas
+        return <div id="content" ref={div => this.container = div}>
-            ref={canvas => this.ctx = canvas.getContext('2d')}
+            <canvas
-            onWheel={this.wheel.bind(this)}
+                ref={canvas => this.ctx = canvas.getContext('2d')}
-            onMouseDown={this.mouseDown.bind(this)}
+                onWheel={this.wheel.bind(this)}
-            onMouseUp={this.mouseUp.bind(this)}
+                onMouseDown={this.mouseDown.bind(this)}
-            onMouseMove={this.mouseMove.bind(this)}
+                onMouseUp={this.mouseUp.bind(this)}
-        ></canvas>;
+                onMouseMove={this.mouseMove.bind(this)}
+            ></canvas>
+        </div>;
     }
 }
+
+Fractal.defaultProps = {
+    iterations: 200000,
+    system: [[], []]
+};
+
+export { Fractal };