Remove bootstrapped background colors

dali-lab · Mar 4, 2017 · ea3eb63 · ea3eb63
1 parent 07ce642
commit ea3eb63
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 9 deletions.
diff --git a/app/components/Canvas.js b/app/components/Canvas.js
@@ -9,7 +9,7 @@ import Diagram from './Diagram'
 export default class Canvas extends Component {
   render() {
     return (
-      <div style={{position: 'absolute', backgroundColor: 'blue', width: '100%', height: '90%', margin: 0, padding: 0, top: '10%'}}>
+      <div style={{position: 'absolute', width: '100%', height: '90%', margin: 0, padding: 0, top: '10%'}}>
         <DotGrid />
         <Diagram />
       </div>);

diff --git a/app/components/Diagram.js b/app/components/Diagram.js
@@ -1,14 +1,71 @@
 // @flow
 import React, { Component } from 'react';
+import ReactDom from 'react-dom';
 var ReactDOM = require('react-dom');
 var electron = require('electron');
 
-// const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
+const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
 
 export default class Diagram extends Component {
+  constructor(props) {
+    super (props);
+
+    this.state = {
+      blocks: [],  // Top-left (x,y) coordinates of each block in the diagram
+      connections: [],  // Start and end IDs of connection points
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+  };
+
+  handleClick(e) {
+    // On a click, add a block to the diagram on the click location
+    e.preventDefault();
+
+    // Find the location of the nearest click
+    const clickX = e.clientX;
+    const clickY = e.clientY;
+
+    // Find the location of this click relative to the element itself
+    const topLeftX = clickX;
+    const topLeftY = clickY;
+
+    console.log(topLeftX);
+    console.log(topLeftY);
+    // Add this (x,y) location as an object to the blocks list in state
+    let updatedBlocks = this.state.blocks.slice();  // immutable lists in state
+    updatedBlocks.push({x: topLeftX, y:topLeftY});
+
+    this.setState({
+      blocks: updatedBlocks,
+      connections: this.state.connections,
+    });
+
+    console.log(updatedBlocks); // Debugging
+  };
+
   render() {
     return (
-      <div style={{position: 'absolute', width: '100%', height: '100%', margin: 0, padding: 0}}>
+      <div onClick={this.handleClick} 
+           style={{position: 'absolute', width: '100%', height: '100%', margin: 0, padding: 0}}>
+        <Paper width='100%' height='100%'>
+          <Set>
+            {
+              this.state.blocks.map(function(ele, pos) {
+                return (
+                  <Rect 
+                    key={pos} x={ele.x} y={ele.y} width={30} height={30}
+                    attr={{
+                      "stroke":"#f45642",
+                      "stroke-width":1,
+                      "fill":"#f45642"
+                    }}
+                  />
+                )
+              })
+            }
+          </Set>
+        </Paper>
         <div></div>
       </div>);
   }

diff --git a/app/components/DotGrid.js b/app/components/DotGrid.js
@@ -3,13 +3,11 @@ import React, { Component } from 'react';
 var ReactDOM = require('react-dom');
 var electron = require('electron');
 
-// const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
-
 export default class DotGrid extends Component {
   render() {
     // Use a SVG patter to create a DotGrid 
     return (
-      <div style={{position: 'absolute', backgroundColor: 'white', width: '100%', height: '100%', margin: 0, padding: 0}}>
+      <div style={{position: 'absolute', width: '100%', height: '100%', margin: 0, padding: 0}}>
         <svg style={{position: 'relative', height: '100%', width: '100%'}}>
           <defs>
              <pattern id="dots-15-15" x="0" y="0" width="15" height="15" patternUnits="userSpaceOnUse">

diff --git a/app/containers/App.js b/app/containers/App.js
@@ -6,8 +6,6 @@ var electron = require('electron');
 import Canvas from '../components/Canvas'; 
 import ShapeBar from '../components/ShapeBar';
 
-// const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
-
 export default class App extends Component {
   props: {
     children: HTMLElement;
@@ -19,7 +17,7 @@ export default class App extends Component {
 
   render() {
     return (
-      <div style={{position: 'absolute', backgroundColor: 'green', width: '100%', height: '100%', margin: 0, padding: 0}}>
+      <div style={{position: 'absolute', width: '100%', height: '100%', margin: 0, padding: 0}}>
         <ShapeBar />
         <Canvas />
       </div>);