diff --git a/app/components/Canvas.js b/app/components/Canvas.js
index 7db8fbc..a5466fb 100644
--- 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 (
-
+
);
diff --git a/app/components/Diagram.js b/app/components/Diagram.js
index ffea242..3d2d9f2 100644
--- 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 (
-
+
+
+
+ {
+ this.state.blocks.map(function(ele, pos) {
+ return (
+
+ )
+ })
+ }
+
+
);
}
diff --git a/app/components/DotGrid.js b/app/components/DotGrid.js
index bc21768..8c44c2c 100644
--- 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 (
-
+