Merge pull request danisyellis#30 from danisyellis/konva-cfg

size and place canvas element, Is of a fixed size
ontoneio · Nov 22, 2017 · 6b04aa6 · 6b04aa6
2 parents 0118a59 + 981d57c
commit 6b04aa6
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 25 deletions.
diff --git a/public/poetion.js b/public/poetion.js
diff --git a/public/style.css b/public/style.css
@@ -12,6 +12,8 @@
 .poem-canvas {
   grid-area: view;
   position: relative;
+  width: 100%;
+  height: 100%;
   /*border: 1px dotted red;*/
 }
 

diff --git a/src/client/components/poem-canvas/index.js b/src/client/components/poem-canvas/index.js
@@ -3,31 +3,24 @@ import { Rect, Group } from 'react-konva';
 
 export default class PoemCanvas extends Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      color: 'green',
-    };
-    this.handleClick = this.handleClick.bind(this);
-  }
+  // constructor(props) {
+  //   super(props);
+  //   this.state = {
+  //     size: this.loadCanvas
+  //   };
+  //   this.loadCanvas = this.loadCanvas.bind(this);
+  // }
 
-  handleClick() {
-    // window.Konva is a global variable for Konva framework namespace
-    this.setState({
-      color: window.Konva.Util.getRandomColor(),
-    });
-  };
+  // loadCanvas() {
+  //   // window.Konva is a global variable for Konva framework namespace
+  //   this.setState({
+  //     size: window.Konva.Canvas.setSize(100%, 100%)
+  //   });
+  // };
 
   render() {
     return (
-        <Rect
-          x={10}
-          y={10}
-          width={400}
-          height={400}
-          fill={this.state.color}
-          onClick={this.handleClick}
-        />
+        <Canvas width={this.loadCanvas} />
     );
   }
 };
diff --git a/src/client/components/starter/index.js b/src/client/components/starter/index.js
@@ -11,9 +11,9 @@ export default class Starter extends Component {
     <div className="react-root">
       <Name />
       <Credits />
-      <Stage className="poem-canvas" width={700} height={700}>
+      <Stage className="poem-canvas" width={1260} height={600}>
         <Layer>
-          <PoemCanvas />
+          {/* <PoemCanvas /> */}
         </Layer>
       </Stage>
       <BottomUtilityBar />