diff --git a/src/Components/CanvasArea/CanvasArea.css b/src/Components/CanvasArea/CanvasArea.css index e69882a..0a64626 100644 --- a/src/Components/CanvasArea/CanvasArea.css +++ b/src/Components/CanvasArea/CanvasArea.css @@ -6,16 +6,49 @@ .canvas-area .block { position: relative; - width: 100%; + width: 100%; height: 600px; - border: 1px solid; - } +} - .canvas-area .image-node { - max-width: 150px; - } - - .canvas-area .text-node { +.canvas-area .image-node img{ + max-width: 150px; +} + +.canvas-area .text-node .value{ font-size: 2em; +} + +.canvas-area .image-node, .canvas-area .text-node { + position: relative; +} + +.canvas-area .image-node .delete, .canvas-area .text-node .delete{ + position: absolute; + visibility: hidden; + + right: -.75em; + top: -.75em; + + width: 1.5em; + height: 1.5em; + + border-radius: 50%; + border: 1px solid black; + + cursor: pointer; +} + + +.canvas-area .image-node:hover .delete, .canvas-area .text-node:hover .delete{ + visibility: visible; +} + +.canvas-area .delete-text { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + font-size: 1em; } \ No newline at end of file diff --git a/src/Components/CanvasArea/CanvasArea.tsx b/src/Components/CanvasArea/CanvasArea.tsx index 550fafa..92fd4d0 100644 --- a/src/Components/CanvasArea/CanvasArea.tsx +++ b/src/Components/CanvasArea/CanvasArea.tsx @@ -14,6 +14,8 @@ interface CanvasAreaProps { [nodeId: string]: CanvasImageNode; }; }; + + deleteNode(type: 'text' | 'image', nodeId: string): void; } interface CanvasAreaState { } @@ -27,13 +29,26 @@ export class CanvasArea extends React.Component { this.props.deleteNode(type, nodeId); }}> +
+ X +
+ + ); + } + renderTextNodes() { return Object.keys(this.props.nodes.text).map((nodeId) => { const tmpTextNode = this.props.nodes.text[nodeId]; return (
- {tmpTextNode.value} + {this.renderDeleteNode('text', nodeId)} +
+ {tmpTextNode.value} +
); @@ -45,7 +60,10 @@ export class CanvasArea extends React.Component - +
+ {this.renderDeleteNode('image', nodeId)} + +
); }); diff --git a/src/Components/CreateEditorApp/CreateEditorApp.tsx b/src/Components/CreateEditorApp/CreateEditorApp.tsx index fd5218e..845e1bf 100644 --- a/src/Components/CreateEditorApp/CreateEditorApp.tsx +++ b/src/Components/CreateEditorApp/CreateEditorApp.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import './CreateEditorApp.css'; import { Sidebar } from '../Sidebar'; import { CanvasArea } from '../CanvasArea'; -import { deppCloneNaive, CanvasTextNode, CanvasImageNode } from '../../Helpers'; +import { deepCloneNaive, CanvasTextNode, CanvasImageNode, serverURL } from '../../Helpers'; interface CreateEditorAppState { imageURLs: string[]; @@ -31,6 +31,7 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> { this.addOrUpdateTextNode = this.addOrUpdateTextNode.bind(this); this.addOrUpdateImageNode = this.addOrUpdateImageNode.bind(this); this.onImageUploadSuccess = this.onImageUploadSuccess.bind(this); + this.deleteNode = this.deleteNode.bind(this); } componentDidMount() { @@ -43,7 +44,7 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> { } fetchImages() { - fetch('http://localhost:8000/images/') + fetch(`${serverURL}/images/`) .then((response: Response) => { return response.json(); }).then((responseJSON: string[]) => { @@ -77,7 +78,7 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> { addOrUpdateTextNode(nodeId: string, textNode: CanvasTextNode): void { this.setState((prevState) => { - const newState = deppCloneNaive(prevState as CreateEditorAppState); + const newState = deepCloneNaive(prevState as CreateEditorAppState); newState.text[nodeId] = textNode; return newState; @@ -86,13 +87,28 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> { addOrUpdateImageNode(nodeId: string, imageNode: CanvasImageNode): void { this.setState((prevState) => { - const newState = deppCloneNaive(prevState as CreateEditorAppState); + const newState = deepCloneNaive(prevState as CreateEditorAppState); newState.image[nodeId] = imageNode; return newState; }); } + deleteNode(type: 'text' | 'image', nodeId: string): void { + this.setState((prevState) => { + const newState = deepCloneNaive(prevState as CreateEditorAppState); + + if (type === 'text') { + delete newState.text[nodeId]; + } + if (type === 'image') { + delete newState.image[nodeId]; + } + + return newState; + }); + } + render() { return (
@@ -102,7 +118,7 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> { addTextNode={this.addOrUpdateTextNode} addImageNode={this.addOrUpdateImageNode} /> - +
); } diff --git a/src/Components/UploadResourcesInput/UploadResourcesInput.tsx b/src/Components/UploadResourcesInput/UploadResourcesInput.tsx index 5e913ff..efbd7ca 100644 --- a/src/Components/UploadResourcesInput/UploadResourcesInput.tsx +++ b/src/Components/UploadResourcesInput/UploadResourcesInput.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import './UploadResourcesInput.css'; +import { serverURL } from '../../Helpers'; interface UploadResourcesInputProps { notifyImageUploadSuccess(): void; @@ -29,7 +30,7 @@ export class UploadResourcesInput extends React.Component) { if (this.state.file !== undefined) { - const url = 'http://localhost:8000/uploads'; + const url = `${serverURL}/uploads`; const formData = new FormData(); formData.append('upload', this.state.file); diff --git a/src/Helpers/index.ts b/src/Helpers/index.ts index b8546de..a900a91 100644 --- a/src/Helpers/index.ts +++ b/src/Helpers/index.ts @@ -1,2 +1,3 @@ export { DragContextProvider, DragStartFn, DragSharedInfo } from './DragContextProvider'; -export { XYPair, deppCloneNaive, CanvasTextNode, CanvasImageNode } from './utils'; \ No newline at end of file +export { XYPair, deepCloneNaive, CanvasTextNode, CanvasImageNode } from './utils'; +export {serverURL} from './urls'; \ No newline at end of file diff --git a/src/Helpers/urls.ts b/src/Helpers/urls.ts new file mode 100644 index 0000000..185defb --- /dev/null +++ b/src/Helpers/urls.ts @@ -0,0 +1 @@ +export const serverURL = 'http://localhost:8000'; \ No newline at end of file diff --git a/src/Helpers/utils.ts b/src/Helpers/utils.ts index 232e397..1aa887b 100644 --- a/src/Helpers/utils.ts +++ b/src/Helpers/utils.ts @@ -3,7 +3,7 @@ export interface XYPair { y: number; } -export function deppCloneNaive(originalObject: T): T { +export function deepCloneNaive(originalObject: T): T { return JSON.parse(JSON.stringify(originalObject)); }