From 544b1e32389d28df4a40013ea6886f1f9d61e37d Mon Sep 17 00:00:00 2001 From: Clemens Date: Mon, 11 Jul 2016 19:49:58 +0200 Subject: modify flow content --- web/src/js/components/common/MonacoEditor.jsx | 34 +++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 web/src/js/components/common/MonacoEditor.jsx (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/MonacoEditor.jsx b/web/src/js/components/common/MonacoEditor.jsx new file mode 100644 index 00000000..a0e8d58c --- /dev/null +++ b/web/src/js/components/common/MonacoEditor.jsx @@ -0,0 +1,34 @@ +//not working +import React, { Component, PropTypes } from 'react' + +export default class MonacoEditor extends Component { + + constructor(props) { + super(props) + } + + onLoad(){ + window.MonacoEnvironment = { + getWorkerUrl: function(workerId, label) { + return 'worker-loader-proxy.js'; + } + }; + require.config({ + paths: { + vs: '../release/min/vs' + } + }); + + } + + + render() { + return ( +
this.editor = ref} + style="width:800px;height:600px;border:1px solid grey" + onLoad={this.onLoad()}> +
+ ) + } +} -- cgit v1.2.3 From f84098554a3d50ec02255603bb0a145b3aa0c6b2 Mon Sep 17 00:00:00 2001 From: Clemens Date: Wed, 13 Jul 2016 18:16:31 +0200 Subject: added code editor and file upload --- web/src/js/components/common/Button.jsx | 6 ++-- web/src/js/components/common/CodeEditor.jsx | 41 +++++++++++++++++++++++++++ web/src/js/components/common/MonacoEditor.jsx | 34 ---------------------- 3 files changed, 45 insertions(+), 36 deletions(-) create mode 100644 web/src/js/components/common/CodeEditor.jsx delete mode 100644 web/src/js/components/common/MonacoEditor.jsx (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx index 574288df..221c6ace 100644 --- a/web/src/js/components/common/Button.jsx +++ b/web/src/js/components/common/Button.jsx @@ -10,8 +10,10 @@ export default function Button({ onClick, text, icon, disabled }) {
- -   + {text}
) diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx new file mode 100644 index 00000000..d7e6aabb --- /dev/null +++ b/web/src/js/components/common/CodeEditor.jsx @@ -0,0 +1,41 @@ +import React, { Component, PropTypes } from 'react' +import { render } from 'react-dom'; +import brace from 'brace'; +import AceEditor from 'react-ace'; +import Button from './Button' + + +import 'brace/mode/javascript'; +import 'brace/mode/json'; +import 'brace/theme/monokai'; + + + + +export default class CodeEditor extends Component{ + constructor( props ) { + super(props) + this.state = {value: this.props.value} + } + + onChange(newValue) { + this.setState({value: newValue}) + } + + render() { + return ( +
e.stopPropagation()}> + this.onChange(e)} + mode="javascript" + theme="monokai" + value={this.state.value} + width="100%" + name="codeEditor" + editorProps={{$blockScrolling: Infinity}} + /> +
+ ) + } +} diff --git a/web/src/js/components/common/MonacoEditor.jsx b/web/src/js/components/common/MonacoEditor.jsx deleted file mode 100644 index a0e8d58c..00000000 --- a/web/src/js/components/common/MonacoEditor.jsx +++ /dev/null @@ -1,34 +0,0 @@ -//not working -import React, { Component, PropTypes } from 'react' - -export default class MonacoEditor extends Component { - - constructor(props) { - super(props) - } - - onLoad(){ - window.MonacoEnvironment = { - getWorkerUrl: function(workerId, label) { - return 'worker-loader-proxy.js'; - } - }; - require.config({ - paths: { - vs: '../release/min/vs' - } - }); - - } - - - render() { - return ( -
this.editor = ref} - style="width:800px;height:600px;border:1px solid grey" - onLoad={this.onLoad()}> -
- ) - } -} -- cgit v1.2.3 From 45349b3597f53ee08207b20eb8bff9dfc9166aa8 Mon Sep 17 00:00:00 2001 From: Clemens Date: Wed, 13 Jul 2016 20:53:05 +0200 Subject: chaged editor style --- web/src/js/components/common/CodeEditor.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx index d7e6aabb..85da0507 100644 --- a/web/src/js/components/common/CodeEditor.jsx +++ b/web/src/js/components/common/CodeEditor.jsx @@ -7,7 +7,7 @@ import Button from './Button' import 'brace/mode/javascript'; import 'brace/mode/json'; -import 'brace/theme/monokai'; +import 'brace/theme/kuroir'; @@ -28,7 +28,7 @@ export default class CodeEditor extends Component{ this.onChange(e)} mode="javascript" - theme="monokai" + theme="kuroir" value={this.state.value} width="100%" name="codeEditor" -- cgit v1.2.3 From 5f3782dd5fb8be4c196f57cb07fd1cc2fd6b2f56 Mon Sep 17 00:00:00 2001 From: Clemens Date: Thu, 14 Jul 2016 23:01:34 +0200 Subject: change way to edit --- web/src/js/components/common/Button.jsx | 10 ++++------ web/src/js/components/common/CodeEditor.jsx | 24 ++++++------------------ 2 files changed, 10 insertions(+), 24 deletions(-) (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/Button.jsx b/web/src/js/components/common/Button.jsx index 221c6ace..cd01af22 100644 --- a/web/src/js/components/common/Button.jsx +++ b/web/src/js/components/common/Button.jsx @@ -2,7 +2,8 @@ import React, { PropTypes } from 'react' Button.propTypes = { onClick: PropTypes.func.isRequired, - text: PropTypes.string.isRequired + text: PropTypes.string, + icon: PropTypes.string } export default function Button({ onClick, text, icon, disabled }) { @@ -10,11 +11,8 @@ export default function Button({ onClick, text, icon, disabled }) {
- - {text} + {icon && ( )} + {text && text}
) } diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx index 85da0507..b10b13ed 100644 --- a/web/src/js/components/common/CodeEditor.jsx +++ b/web/src/js/components/common/CodeEditor.jsx @@ -1,40 +1,28 @@ import React, { Component, PropTypes } from 'react' import { render } from 'react-dom'; -import brace from 'brace'; import AceEditor from 'react-ace'; -import Button from './Button' - import 'brace/mode/javascript'; -import 'brace/mode/json'; import 'brace/theme/kuroir'; - - - export default class CodeEditor extends Component{ - constructor( props ) { - super(props) - this.state = {value: this.props.value} - } - - onChange(newValue) { - this.setState({value: newValue}) + static propTypes = { + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, } render() { return (
e.stopPropagation()}> this.onChange(e)} mode="javascript" theme="kuroir" - value={this.state.value} + onChange={this.props.onChange} + name="rea" + value={this.props.value} width="100%" - name="codeEditor" editorProps={{$blockScrolling: Infinity}} /> -
) } -- cgit v1.2.3 From 87797d7ac07108ce5fd00902918e4900907b94b6 Mon Sep 17 00:00:00 2001 From: Clemens Date: Fri, 15 Jul 2016 14:41:30 +0200 Subject: added new btn, changed to codemirror --- web/src/js/components/common/CodeEditor.jsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx index b10b13ed..c122cf94 100644 --- a/web/src/js/components/common/CodeEditor.jsx +++ b/web/src/js/components/common/CodeEditor.jsx @@ -1,9 +1,7 @@ import React, { Component, PropTypes } from 'react' import { render } from 'react-dom'; -import AceEditor from 'react-ace'; +import Codemirror from 'react-codemirror'; -import 'brace/mode/javascript'; -import 'brace/theme/kuroir'; export default class CodeEditor extends Component{ static propTypes = { @@ -12,17 +10,12 @@ export default class CodeEditor extends Component{ } render() { + let options = { + lineNumbers: true + }; return (
e.stopPropagation()}> - +
) } -- cgit v1.2.3 From 48728af43ad746d70ef3e251dc28b75028dea1e6 Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 19 Jul 2016 12:23:20 +0200 Subject: moved flow editor state to redux --- web/src/js/components/common/CodeEditor.jsx | 12 ++++++++++-- web/src/js/components/common/Splitter.jsx | 1 + 2 files changed, 11 insertions(+), 2 deletions(-) (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx index c122cf94..5b2305a8 100644 --- a/web/src/js/components/common/CodeEditor.jsx +++ b/web/src/js/components/common/CodeEditor.jsx @@ -5,17 +5,25 @@ import Codemirror from 'react-codemirror'; export default class CodeEditor extends Component{ static propTypes = { - value: PropTypes.string.isRequired, + content: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, } + constructor(props){ + super(props) + } + + componentWillMount(){ + this.props.onChange(this.props.content) + } + render() { let options = { lineNumbers: true }; return (
e.stopPropagation()}> - +
) } diff --git a/web/src/js/components/common/Splitter.jsx b/web/src/js/components/common/Splitter.jsx index 9d22b6fd..bd4fb3d2 100644 --- a/web/src/js/components/common/Splitter.jsx +++ b/web/src/js/components/common/Splitter.jsx @@ -12,6 +12,7 @@ export default class Splitter extends Component { this.state = { applied: false, startX: false, startY: false } this.onMouseMove = this.onMouseMove.bind(this) + this.onMouseDown = this.onMouseDown.bind(this) this.onMouseUp = this.onMouseUp.bind(this) this.onDragEnd = this.onDragEnd.bind(this) } -- cgit v1.2.3