diff --git a/app/components/AddCaptionForm.jsx b/app/components/AddCaptionForm.jsx index 766319f..b6f6225 100644 --- a/app/components/AddCaptionForm.jsx +++ b/app/components/AddCaptionForm.jsx @@ -5,25 +5,42 @@ import { HotKeys } from 'react-hotkeys'; export default class AddCaptionForm extends BaseComponent { constructor(props) { super(props); - this.bindAll('_handleSubmit'); + this.bindAll('_handleSubmit', '_handleScaleChange'); + + this.state = { + scaleValue: 1 + }; } render() { - const keyMap = { - 'esc': 'esc' - }; - const keyHandlers = { - 'esc': () => this.props.closeAddForm() - }; + const scales = [ + [null, "Scale"], + [1, "1x"], + [1.25, "1.25x"], + [1.5, "1.5x"], + [2, "2x"], + [2.5, "2.5x"], + [3, "3x"], + [4, "4x"], + [5, "5x"] + ]; return ( -
- -
-
-
-
+
+
+ +   +
); } @@ -33,14 +50,21 @@ export default class AddCaptionForm extends BaseComponent { setTimeout(() => this.refs.text.focus(), 50); } + _handleScaleChange() { + this.setState({scaleValue: this.refs.scale.value}) + } + _handleSubmit(e) { let text = this.refs.text.value.trim(); - this.props.addCaption({ display: { text } }); + let scale = this.state.scaleValue; + + this.props.addCaption({ display: { text, scale } }); this._clear(); e.preventDefault(); } _clear() { this.refs.text.value = ''; + this.refs.scale.value = 1; } } \ No newline at end of file diff --git a/app/components/AddConnectedNodesForm.jsx b/app/components/AddConnectedNodesForm.jsx index 506db5b..9b5708e 100644 --- a/app/components/AddConnectedNodesForm.jsx +++ b/app/components/AddConnectedNodesForm.jsx @@ -24,11 +24,12 @@ export default class AddConnectedNodesForm extends BaseComponent { { this._renderOptions() } -   +  
); @@ -37,7 +38,7 @@ export default class AddConnectedNodesForm extends BaseComponent { _renderOptions() { let options = this.props.source.getConnectedNodesOptions; return options ? Object.keys(options).map(key => { - return ( { Object.keys(options[key]).map(val => { return }) } diff --git a/app/components/AddNodeInput.jsx b/app/components/AddNodeInput.jsx index 49894f1..922282c 100644 --- a/app/components/AddNodeInput.jsx +++ b/app/components/AddNodeInput.jsx @@ -26,7 +26,7 @@ export default class AddNodeInput extends BaseComponent {
-
+
{ this.props.source ?
    0 ? "block" : "none" }} ref="results"> { results.map((node, i) => diff --git a/app/components/ChangeColorInput.jsx b/app/components/ChangeColorInput.jsx index 2bfea99..23f7487 100644 --- a/app/components/ChangeColorInput.jsx +++ b/app/components/ChangeColorInput.jsx @@ -28,7 +28,7 @@ export default class ChangeColorInput extends BaseComponent { } handleValueChange(color) { - this.onChange("#" + color.hex); + this.onChange(color.hex); } onChange(newColor) { diff --git a/app/components/DeleteSelectedButton.jsx b/app/components/DeleteSelectedButton.jsx new file mode 100644 index 0000000..4a46abd --- /dev/null +++ b/app/components/DeleteSelectedButton.jsx @@ -0,0 +1,28 @@ +import React, { Component, PropTypes } from 'react'; +import BaseComponent from './BaseComponent'; +import { HotKeys } from 'react-hotkeys'; +import mapKeys from 'lodash/object/mapKeys'; + +export default class DeleteSelectedButton extends BaseComponent { + constructor(props) { + super(props); + } + + render() { + const whichClass = this.props.currentForm === "UpdateNodeForm" ? "nodeDelete" : "edgeDelete"; + + return ( +
    + +
    + ); + } + +} diff --git a/app/components/EditButtons.jsx b/app/components/EditButtons.jsx index cdef5ed..fff9772 100644 --- a/app/components/EditButtons.jsx +++ b/app/components/EditButtons.jsx @@ -15,9 +15,9 @@ export default class EditButtons extends Component { nodes={this.props.nodes} results={this.props.nodeResults} setNodeResults={this.props.setNodeResults} /> - + { this.props.showInterlocksButton && - + }
); diff --git a/app/components/EditTools.jsx b/app/components/EditTools.jsx index 21a612b..1f9dc12 100644 --- a/app/components/EditTools.jsx +++ b/app/components/EditTools.jsx @@ -1,16 +1,24 @@ import React, { Component, PropTypes } from 'react'; +import BaseComponent from './BaseComponent'; import UndoButtons from './UndoButtons'; import LayoutButtons from './LayoutButtons'; import EditButtons from './EditButtons'; import AddEdgeForm from './AddEdgeForm'; import AddCaptionForm from './AddCaptionForm'; import AddConnectedNodesForm from './AddConnectedNodesForm'; +import DeleteSelectedButton from './DeleteSelectedButton'; import UpdateNodeForm from './UpdateNodeForm'; import UpdateEdgeForm from './UpdateEdgeForm'; import UpdateCaptionForm from './UpdateCaptionForm'; import HelpScreen from './HelpScreen'; -export default class EditTools extends Component { +export default class EditTools extends BaseComponent { + + constructor(props) { + super(props); + this.bindAll('_handleDelete'); + + } render() { let { graphApi, source, data, graph, addForm, currentForm, helpScreen, @@ -36,6 +44,14 @@ export default class EditTools extends Component { toggleAddEdgeForm={toggleAddEdgeForm} showInterlocksButton={this.props.showInterlocksButton} fetchInterlocks={this.props.fetchInterlocks} /> + { currentForm == 'UpdateCaptionForm' && + } + { currentForm != 'UpdateCaptionForm' && + } } - { addForm == 'AddCaptionForm' && - } { currentForm == 'UpdateNodeForm' && - } + } { currentForm == 'UpdateEdgeForm' && } - { currentForm == 'UpdateCaptionForm' && - } { currentForm == 'UpdateNodeForm' && source && source.getConnectedNodes && } + addEdge={addEdge} /> } + { (currentForm == 'UpdateNodeForm' || currentForm == 'UpdateEdgeForm') && + } { helpScreen && !this.props.hideHelp ? : null } ); } -} \ No newline at end of file + + _handleDelete() { + this.props.delete(); + } +} diff --git a/app/components/Editor.jsx b/app/components/Editor.jsx index 4d57be5..e4c80a5 100644 --- a/app/components/Editor.jsx +++ b/app/components/Editor.jsx @@ -31,10 +31,10 @@ export default class Editor extends BaseComponent { 'altO': ['alt+o', 'ctrl+o'], 'altN': ['alt+n', 'ctrl+n'], 'altE': ['alt+e', 'ctrl+e'], - 'altC': ['alt+c', 'ctrl+c'], 'altH': ['alt+h', 'ctrl+h'], 'altR': ['alt+r', 'ctrl+r'], - 'esc': 'esc' + 'esc': 'esc', + 'enter': 'enter' }; const keyHandlers = { @@ -42,7 +42,6 @@ export default class Editor extends BaseComponent { 'altO': () => this.props.graphApi.circleLayout(), 'altN': () => this._focusAddNodeInput(), 'altE': () => this._toggleAddEdgeForm(), - 'altC': () => this._toggleAddCaptionForm(), 'altH': () => this._toggleHelpScreen(), 'altR': () => this._toggleAddConnectedNodesForm(), 'esc': () => this._clearForms() @@ -91,7 +90,8 @@ export default class Editor extends BaseComponent { addForm={addForm} currentForm={currentForm} showInterlocksButton={showInterlocksButton} - fetchInterlocks={fetchInterlocks} /> + fetchInterlocks={fetchInterlocks} + delete={this.props.delete} /> } @@ -165,10 +165,11 @@ export default class Editor extends BaseComponent { _clearForms() { this.props.toggleAddForm(null); this.props.graphApi.deselectAll(); + console.log(this.refs); this.refs.editTools.refs.editButtons.refs.addNodeInput.clear(); } _focusAddNodeInput() { this.refs.editTools.refs.editButtons.refs.addNodeInput.refs.name.focus(); } -} \ No newline at end of file +} diff --git a/app/components/GraphAnnotationForm.jsx b/app/components/GraphAnnotationForm.jsx index ef363dd..8c18662 100644 --- a/app/components/GraphAnnotationForm.jsx +++ b/app/components/GraphAnnotationForm.jsx @@ -26,6 +26,7 @@ export default class GraphAnnotationForm extends BaseComponent { id="oligrapherGraphAnnotationFormHeader" ref="header" name="header" + title="edit annotation title" className="form-control input-lg" placeholder="annotation header" value={this.props.annotation.header} @@ -34,10 +35,12 @@ export default class GraphAnnotationForm extends BaseComponent { id="oligrapherGraphAnnotationFormText" name="text" ref="text" + title="edit annotation body" text={this.props.annotation.text} options={editorOptions} onChange={this._handleTextChange} /> diff --git a/app/components/GraphAnnotationList.jsx b/app/components/GraphAnnotationList.jsx index 3a09aae..49583c1 100644 --- a/app/components/GraphAnnotationList.jsx +++ b/app/components/GraphAnnotationList.jsx @@ -28,6 +28,7 @@ export default class GraphAnnotationList extends BaseComponent { { this.props.isEditor ? -
- - + + +
); } diff --git a/app/components/Root.jsx b/app/components/Root.jsx index 2c22d71..b690a00 100644 --- a/app/components/Root.jsx +++ b/app/components/Root.jsx @@ -171,6 +171,7 @@ class Root extends Component { { graph && dispatch(deleteSelection(selection))} graphApi={graphApi} isEditor={isEditor} showEditButton={false} diff --git a/app/components/SaveButton.jsx b/app/components/SaveButton.jsx index d9acc1b..feadf33 100644 --- a/app/components/SaveButton.jsx +++ b/app/components/SaveButton.jsx @@ -6,6 +6,7 @@ export default class SaveButton extends Component { return (