Add image preview plus image add from sidebart

src/Components/AddToCanvasInput/AddToCanvasInput.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import * as uuid from 'uuid/v4';
 import './AddToCanvasInput.css';
-import { CanvasTextNode } from '../../Helpers';
+import { CanvasTextNode, CanvasImageNode } from '../../Helpers';
 
 interface AddToCanvasInputProps {
     addTextNode(nodeId: string, textNode: CanvasTextNode): void;
+    addImageNode(nodeId: string, imgNode: CanvasImageNode): void;
 }
 
 interface AddToCanvasInputState {
     textInputValue: string;
+    imageURLs: string[];
 }
 
 export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, AddToCanvasInputState> {
@@ -16,11 +18,32 @@ export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, Add
         super(props);
 
         this.state = {
-            textInputValue: ''
+            textInputValue: '',
+            imageURLs: []
         };
 
         this.updateInputText = this.updateInputText.bind(this);
         this.addTextNodeOnSubmit = this.addTextNodeOnSubmit.bind(this);
+        this.addImageNodeOnSubmit = this.addImageNodeOnSubmit.bind(this);
+    }
+
+    componentDidMount() {
+        this.fetchImages();
+    }
+
+    fetchImages() {
+        fetch('http://localhost:8000/images/')
+            .then((response: Response) => {
+                return response.json();
+            })
+            .then((responseJSON: string[]) => {
+                this.setState({
+                    imageURLs: responseJSON
+                });
+            })
+            // tslint:disable-next-line:no-console
+            .catch(error => console.error('Error loading image info:', error));
+
     }
 
     updateInputText(ev: React.ChangeEvent<HTMLInputElement>) {
@@ -44,6 +67,16 @@ export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, Add
         }
     }
 
+    addImageNodeOnSubmit(ev: React.MouseEvent<HTMLImageElement>) {
+        const imageURL = ev.currentTarget.src;
+        const nodeId = uuid();
+
+        this.props.addImageNode(nodeId, {
+            url: imageURL,
+            position: { x: 0, y: 0 }
+        });
+    }
+
     render() {
         return (
             <div className="add-to-canvas-input">
@@ -64,8 +97,19 @@ export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, Add
                     <div className="image">
                         <h4>Images</h4>
                         <ul className="list-unstyled">
-                            {/* List of images here 
-                            <li><img src="images/sample.jpeg" class="img-rounded" /></li>  */}
+                            {
+                                this.state.imageURLs.map((imgURL) => {
+                                    return (
+                                        <li key={imgURL}>
+                                            <img
+                                                src={imgURL}
+                                                className="img-rounded"
+                                                onClick={this.addImageNodeOnSubmit}
+                                            />
+                                        </li>
+                                    );
+                                })
+                            }
                         </ul>
                     </div>
                 </div>

src/Components/CanvasArea/CanvasArea.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as uuid from 'uuid/v4';
 import './CanvasArea.css';
-import { CanvasTextNode } from '../../Helpers';
+import { CanvasTextNode, CanvasImageNode } from '../../Helpers';
 import { DragContainer } from '../DragContainer';
 import { DraggableNode } from '../DraggableNode';
 
@@ -10,6 +10,9 @@ interface CanvasAreaProps {
         text: {
             [nodeId: string]: CanvasTextNode;
         }
+        image: {
+            [nodeId: string]: CanvasImageNode;
+        };
     };
 }
 interface CanvasAreaState {
@@ -24,7 +27,7 @@ export class CanvasArea extends React.Component<CanvasAreaProps, CanvasAreaState
         this.containerId = 'container-' + uuid();
     }
 
-    renderDraggableNodes() {
+    renderTextNodes() {
         return Object.keys(this.props.nodes.text).map((nodeId) => {
             const tmpTextNode = this.props.nodes.text[nodeId];
             return (
@@ -35,6 +38,26 @@ export class CanvasArea extends React.Component<CanvasAreaProps, CanvasAreaState
         });
     }
 
+    renderImageNodes() {
+        return Object.keys(this.props.nodes.image).map((nodeId) => {
+            const tmpImageNode = this.props.nodes.image[nodeId];
+            return (
+                <DraggableNode key={nodeId} id={nodeId} containerId={this.containerId}>
+                    <img draggable={false} src={tmpImageNode.url} width="100px" />
+                </DraggableNode>
+            );
+        });
+    }
+
+    renderDraggableNodes() {
+        return (
+            <React.Fragment>
+                {this.renderTextNodes()}
+                {this.renderImageNodes()}
+            </React.Fragment>
+        );
+    }
+
     render() {
         return (
             <div className="canvas-area col-sm-8 col-md-8 col-lg-8">
@@ -46,19 +69,6 @@ export class CanvasArea extends React.Component<CanvasAreaProps, CanvasAreaState
                     </div>
                 </DragContainer>
             </div>
-            // <DragContainer id="test">
-            //   <header className="App-header">
-            //     <DraggableNode id="test-img" containerId="test">
-            //       <img src={logo} className="App-logo" alt="logo" draggable={false} />
-            //     </DraggableNode>
-            //     <DraggableNode id="test-text" containerId="test">
-            //       <h1 className="App-title">Welcome to React</h1>
-            //     </DraggableNode>
-            //   </header>
-            // </DragContainer>
-            // <p className="App-intro">
-            //   To get started, edit <code>src/App.tsx</code> and save to reload.
-            // </p>
         );
     }
 }

src/Components/CreateEditorApp/CreateEditorApp.tsx

@@ -2,12 +2,15 @@ import * as React from 'react';
 import './CreateEditorApp.css';
 import { Sidebar } from '../Sidebar';
 import { CanvasArea } from '../CanvasArea';
-import { deppCloneNaive, CanvasTextNode } from '../../Helpers';
+import { deppCloneNaive, CanvasTextNode, CanvasImageNode } from '../../Helpers';
 
 interface CreateEditorAppState {
   text: {
     [nodeId: string]: CanvasTextNode;
   };
+  image: {
+    [nodeId: string]: CanvasImageNode;
+  };
 }
 
 export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
@@ -15,10 +18,12 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
     super(props);
 
     this.state = {
-      text: {}
+      text: {},
+      image: {}
     };
 
     this.addOrUpdateTextNode = this.addOrUpdateTextNode.bind(this);
+    this.addOrUpdateImageNode = this.addOrUpdateImageNode.bind(this);
   }
 
   addOrUpdateTextNode(nodeId: string, textNode: CanvasTextNode): void {
@@ -30,11 +35,20 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
     });
   }
 
+  addOrUpdateImageNode(nodeId: string, imageNode: CanvasImageNode): void {
+    this.setState((prevState) => {
+      const newState = deppCloneNaive(prevState as CreateEditorAppState);
+      newState.image[nodeId] = imageNode;
+
+      return newState;
+    });
+  }
+
   render() {
     return (
       <div className="create-editor-app">
-        <Sidebar addTextNode={this.addOrUpdateTextNode} />
-        <CanvasArea nodes={this.state}/>
+        <Sidebar addTextNode={this.addOrUpdateTextNode} addImageNode={this.addOrUpdateImageNode} />
+        <CanvasArea nodes={this.state} />
       </div>
     );
   }

src/Components/DraggableNode/DraggableNode.css

@@ -1,6 +1,7 @@
 .draggable-node {
     cursor: move;
     user-select: none;
+
     position: absolute;
     left: 0;
     top: 0;

src/Components/Sidebar/Sidebar.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 import './Sidebar.css';
 import { UploadResourcesInput } from '../UploadResourcesInput';
 import { AddToCanvasInput } from '../AddToCanvasInput';
-import { CanvasTextNode } from '../../Helpers';
+import { CanvasTextNode, CanvasImageNode } from '../../Helpers';
 
 interface SidebarProps {
     addTextNode(nodeId: string, textNode: CanvasTextNode): void;
+    addImageNode(nodeId: string, imgNode: CanvasImageNode): void;
 }
 
 interface SidebarState {
@@ -20,7 +21,7 @@ export class Sidebar extends React.Component<SidebarProps, SidebarState> {
         return (
             <div className="sidebar col-sm-2 col-md-2 col-lg-2">
                 <UploadResourcesInput />
-                <AddToCanvasInput addTextNode={this.props.addTextNode} />
+                <AddToCanvasInput addTextNode={this.props.addTextNode} addImageNode={this.props.addImageNode} />
             </div>
 
         );

src/Helpers/index.ts

@@ -1,2 +1,2 @@
 export { DragContextProvider, DragStartFn, DragSharedInfo } from './DragContextProvider';
-export { XYPair, deppCloneNaive, CanvasTextNode } from './utils';
+export { XYPair, deppCloneNaive, CanvasTextNode, CanvasImageNode } from './utils';

src/Helpers/utils.ts

@@ -10,4 +10,9 @@ export function deppCloneNaive<T>(originalObject: T): T {
 export interface CanvasTextNode {
     value: string;
     position: XYPair;
-  }
+}
+
+export interface CanvasImageNode {
+    url: string;
+    position: XYPair;
+}