From 02e200fd57fef752bd60ce06a1f464caef88fb64 Mon Sep 17 00:00:00 2001 From: Abhas Bhattacharya Date: Mon, 9 Apr 2018 07:49:50 +0530 Subject: [PATCH] Make basic flow with add text work --- package.json | 6 ++- .../AddToCanvasInput/AddToCanvasInput.tsx | 43 +++++++++++++++- src/Components/CanvasArea/CanvasArea.css | 6 ++- src/Components/CanvasArea/CanvasArea.tsx | 47 ++++++++++++++++- .../CreateEditorApp/CreateEditorApp.css | 33 ++---------- .../CreateEditorApp/CreateEditorApp.tsx | 50 +++++++++++-------- src/Components/CreateEditorApp/logo.svg | 7 --- .../DragContainer/DragContainer.css | 6 +++ .../DragContainer/DragContainer.tsx | 9 +++- .../DraggableNode/DraggableNode.css | 5 ++ src/Components/Sidebar/Sidebar.css | 6 ++- src/Components/Sidebar/Sidebar.tsx | 15 ++++-- .../UploadResourcesInput.tsx | 3 +- src/Helpers/utils.ts | 11 +++- yarn.lock | 16 +++++- 15 files changed, 191 insertions(+), 72 deletions(-) delete mode 100644 src/Components/CreateEditorApp/logo.svg diff --git a/package.json b/package.json index b352667..2d77a53 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "author": "jun", "license": "ISC", "dependencies": { + "classnames": "^2.2.5", "express": "^4.13.4", "jquery": "^2.2.3", "junk": "^1.0.2", @@ -13,7 +14,8 @@ "nodemon": "^1.9.1", "react": "^16.3.1", "react-dom": "^16.3.1", - "react-scripts-ts": "2.14.0" + "react-scripts-ts": "2.14.0", + "uuid": "^3.2.1" }, "scripts": { "start-server": "nodemon ./server/server.js", @@ -23,10 +25,12 @@ "eject": "react-scripts-ts eject" }, "devDependencies": { + "@types/classnames": "^2.2.3", "@types/jest": "^22.2.2", "@types/node": "^9.6.2", "@types/react": "^16.3.5", "@types/react-dom": "^16.0.4", + "@types/uuid": "^3.4.3", "typescript": "^2.8.1" } } diff --git a/src/Components/AddToCanvasInput/AddToCanvasInput.tsx b/src/Components/AddToCanvasInput/AddToCanvasInput.tsx index 0e01952..df198f5 100644 --- a/src/Components/AddToCanvasInput/AddToCanvasInput.tsx +++ b/src/Components/AddToCanvasInput/AddToCanvasInput.tsx @@ -1,19 +1,60 @@ import * as React from 'react'; +import * as uuid from 'uuid/v4'; import './AddToCanvasInput.css'; +import { CanvasTextNode } from '../../Helpers'; interface AddToCanvasInputProps { - + addTextNode(nodeId: string, textNode: CanvasTextNode): void; } + interface AddToCanvasInputState { + textInputValue: string; } export class AddToCanvasInput extends React.Component { constructor(props: AddToCanvasInputProps) { super(props); + this.state = { + textInputValue: '' + }; + + this.updateInputText = this.updateInputText.bind(this); + this.addTextNodeOnSubmit = this.addTextNodeOnSubmit.bind(this); } + updateInputText(ev: React.ChangeEvent) { + this.setState({ + textInputValue: ev.target.value + }); + } + + addTextNodeOnSubmit() { + if (this.state.textInputValue.trim() !== '') { + const nodeId = uuid(); + + this.props.addTextNode(nodeId, { + value: this.state.textInputValue, + position: { x: 0, y: 0 } + }); + + this.setState({ + textInputValue: '' + }); + } + } render() { + return ( +
+
+
+ Add text +
+ + +
+
+ ); } } \ No newline at end of file diff --git a/src/Components/CanvasArea/CanvasArea.css b/src/Components/CanvasArea/CanvasArea.css index c483210..824633b 100644 --- a/src/Components/CanvasArea/CanvasArea.css +++ b/src/Components/CanvasArea/CanvasArea.css @@ -1,3 +1,5 @@ -.drag-container { - overflow: hidden; +.canvas-area { + float: right; + width: 80%; + height: 100%; } \ No newline at end of file diff --git a/src/Components/CanvasArea/CanvasArea.tsx b/src/Components/CanvasArea/CanvasArea.tsx index e92a31d..8bf8a81 100644 --- a/src/Components/CanvasArea/CanvasArea.tsx +++ b/src/Components/CanvasArea/CanvasArea.tsx @@ -1,19 +1,64 @@ import * as React from 'react'; +import * as uuid from 'uuid/v4'; import './CanvasArea.css'; +import { CanvasTextNode } from '../../Helpers'; +import { DragContainer } from '../DragContainer'; +import { DraggableNode } from '../DraggableNode'; interface CanvasAreaProps { - + nodes: { + text: { + [nodeId: string]: CanvasTextNode; + } + }; } interface CanvasAreaState { } export class CanvasArea extends React.Component { + containerId: string; + constructor(props: CanvasAreaProps) { super(props); + this.containerId = 'container-' + uuid(); } + renderDraggableNodes() { + return Object.keys(this.props.nodes.text).map((nodeId) => { + const tmpTextNode = this.props.nodes.text[nodeId]; + return ( + + {tmpTextNode.value} + + ); + }); + } render() { + return ( +
+ +
+ { + this.renderDraggableNodes() + } +
+ +
+ // + //
+ // + // logo + // + // + //

Welcome to React

+ // + //
+ // + //

+ // To get started, edit src/App.tsx and save to reload. + //

+ ); } } \ No newline at end of file diff --git a/src/Components/CreateEditorApp/CreateEditorApp.css b/src/Components/CreateEditorApp/CreateEditorApp.css index 42bf584..d17caf0 100644 --- a/src/Components/CreateEditorApp/CreateEditorApp.css +++ b/src/Components/CreateEditorApp/CreateEditorApp.css @@ -1,29 +1,4 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; -} - -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; -} - -.App-title { - font-size: 1.5em; -} - -.App-intro { - font-size: large; - background-color: gray; -} - -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} +.create-editor-app { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/src/Components/CreateEditorApp/CreateEditorApp.tsx b/src/Components/CreateEditorApp/CreateEditorApp.tsx index 36f4631..23c0520 100644 --- a/src/Components/CreateEditorApp/CreateEditorApp.tsx +++ b/src/Components/CreateEditorApp/CreateEditorApp.tsx @@ -1,32 +1,40 @@ import * as React from 'react'; import './CreateEditorApp.css'; -import { DragContainer } from '../DragContainer'; -import { DraggableNode } from '../DraggableNode'; +import { Sidebar } from '../Sidebar'; +import { CanvasArea } from '../CanvasArea'; +import { deppCloneNaive, CanvasTextNode } from '../../Helpers'; -const logo = require('./logo.svg'); +interface CreateEditorAppState { + text: { + [nodeId: string]: CanvasTextNode; + }; +} -export class CreateEditorApp extends React.Component { - logFn() { - // tslint:disable-next-line:no-console - console.log(arguments); +export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> { + constructor(props: {}) { + super(props); + + this.state = { + text: {} + }; + + this.addOrUpdateTextNode = this.addOrUpdateTextNode.bind(this); + } + + addOrUpdateTextNode(nodeId: string, textNode: CanvasTextNode): void { + this.setState((prevState) => { + const newState = deppCloneNaive(prevState as CreateEditorAppState); + newState.text[nodeId] = textNode; + + return newState; + }); } render() { return ( -
- -
- - logo - - -

Welcome to React

- -
- -

- To get started, edit src/App.tsx and save to reload. -

+
+ +
); } diff --git a/src/Components/CreateEditorApp/logo.svg b/src/Components/CreateEditorApp/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/Components/CreateEditorApp/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/Components/DragContainer/DragContainer.css b/src/Components/DragContainer/DragContainer.css index c483210..287351a 100644 --- a/src/Components/DragContainer/DragContainer.css +++ b/src/Components/DragContainer/DragContainer.css @@ -1,3 +1,9 @@ .drag-container { overflow: hidden; + + position: relative; +} + +.drag-container.dragging { + cursor: move; } \ No newline at end of file diff --git a/src/Components/DragContainer/DragContainer.tsx b/src/Components/DragContainer/DragContainer.tsx index 9c61ac8..f861762 100644 --- a/src/Components/DragContainer/DragContainer.tsx +++ b/src/Components/DragContainer/DragContainer.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import * as classNames from 'classnames'; import './DragContainer.css'; import { DragContextProvider, DragSharedInfo, XYPair } from '../../Helpers'; @@ -129,10 +130,16 @@ export class DragContainer extends React.Component
{ constructor(props: SidebarProps) { super(props); - } - render() { + return ( +
+ + +
+ + ); } } \ No newline at end of file diff --git a/src/Components/UploadResourcesInput/UploadResourcesInput.tsx b/src/Components/UploadResourcesInput/UploadResourcesInput.tsx index 7c964c3..8789d00 100644 --- a/src/Components/UploadResourcesInput/UploadResourcesInput.tsx +++ b/src/Components/UploadResourcesInput/UploadResourcesInput.tsx @@ -10,10 +10,9 @@ interface UploadResourcesInputState { export class UploadResourcesInput extends React.Component { constructor(props: UploadResourcesInputProps) { super(props); - } - render() { + return ''; } } \ No newline at end of file diff --git a/src/Helpers/utils.ts b/src/Helpers/utils.ts index 9e82d53..d372663 100644 --- a/src/Helpers/utils.ts +++ b/src/Helpers/utils.ts @@ -1,4 +1,13 @@ export interface XYPair { x: number; y: number; -} \ No newline at end of file +} + +export function deppCloneNaive(originalObject: T): T { + return JSON.parse(JSON.stringify(originalObject)); +} + +export interface CanvasTextNode { + value: string; + position: XYPair; + } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index ace0ab8..27b34c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16,6 +16,10 @@ esutils "^2.0.2" js-tokens "^3.0.0" +"@types/classnames@^2.2.3": + version "2.2.3" + resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.3.tgz#3f0ff6873da793870e20a260cada55982f38a9e5" + "@types/jest@^22.2.2": version "22.2.2" resolved "https://registry.yarnpkg.com/@types/jest/-/jest-22.2.2.tgz#afe5dacbd00d65325f52da0ed3e76e259629ac9d" @@ -37,6 +41,12 @@ dependencies: csstype "^2.0.0" +"@types/uuid@^3.4.3": + version "3.4.3" + resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.3.tgz#121ace265f5569ce40f4f6d0ff78a338c732a754" + dependencies: + "@types/node" "*" + abab@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e" @@ -1457,6 +1467,10 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.5: + version "2.2.5" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" + clean-css@4.1.x: version "4.1.11" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a" @@ -7284,7 +7298,7 @@ uuid@^2.0.2: version "2.0.3" resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a" -uuid@^3.0.0, uuid@^3.1.0: +uuid@^3.0.0, uuid@^3.1.0, uuid@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"