Annotations redesign

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+
+node_js:
+  - "6.0.0"

app/CaptionDisplaySettings.js

@@ -5,8 +5,9 @@ module.exports = {
   selectFillColor: "#0f0",
   textOpacity: {
     "normal": 1,
+    "editable": 1,
     "highlighted": 1,
-    "faded": 0.2
+    "faded": 0.5
   },
   highlightOpacity: 0.5,
   selectOpacity: 0.5

app/EdgeDisplaySettings.js

@@ -2,22 +2,26 @@ module.exports = {
   curveStrength: 0.5,
   lineColor: {
     normal: "#999",
+    editable: "#999",
     highlighted: "#999",
-    faded: "#ddd"
+    faded: "#aaa"
   },
   textColor: {
     normal: "#999",
+    editable: "#444",
     highlighted: "#444",
-    faded: "#ddd"
+    faded: "#aaa"
   },
   bgColor: {
     normal: "#fff",
+    editable: "#ff9800",
     highlighted: "#ff0",
     faded: "#fff"
   },
   selectColor: "#0f0",
   bgOpacity: {
     normal: 0,
+    editable: 0.5,
     highlighted: 0.5,
     faded: 0
   },

app/NodeDisplaySettings.js

@@ -7,39 +7,46 @@ module.exports = {
   cornerRadius: 5,
   circleColor: {
     normal: "#ccc",
+    editable: "#ccc",
     highlighted: "#ccc",
     faded: "#ccc"
   },
   textColor: {
     normal: "#000",
+    editable: "#000",
     highlighted: "#000",
     faded: "#000"
   },
   textOpacity: {
     normal: 1,
+    editable: 1,
     highlighted: 1,
-    faded: 0.2
+    faded: 0.5
   },
   bgColor: {
     normal: "#fff",
+    editable: "#ff9800",
     highlighted: "#ff0",
     faded: "#fff"
   },
   selectColor: "#0f0",
   bgOpacity: {
     normal: 0,
-    highlighted: 0.5,
+    editable: 0.75,
+    highlighted: 0.75,
     faded: 0
   },
   imageOpacity: {
     normal: 1, 
+    editable: 1, 
     highlighted: 1,
-    faded: 0.2
+    faded: 0.5
   },
   circleOpacity: {
     normal: 1,
+    editable: 1,
     highlighted: 1,
-    faded: 0.2
+    faded: 0.5
   },
   bgRadiusDiff: 4,
   selectionRadiusDiff: 10

app/actions.js

@@ -50,6 +50,7 @@ export const SET_TITLE = 'SET_TITLE';
 export const SET_SETTINGS = 'SET_SETTINGS';
 export const TOGGLE_HELP_SCREEN = 'TOGGLE_HELP_SCREEN';
 export const TOGGLE_SETTINGS = 'TOGGLE_SETTINGS';
+export const TOGGLE_NODE_SELECTABLE = 'TOGGLE_NODE_SELECTABLE';
 
 /*
  * action creators
@@ -184,8 +185,8 @@ export function layoutCircle() {
   return { type: LAYOUT_CIRCLE };
 }
 
-export function setHighlights(highlights, otherwiseFaded = false) {
-  return { type: SET_HIGHLIGHTS, highlights, otherwiseFaded };
+export function setHighlights(highlights, otherwiseFaded = false, showEditTools, allowEditNodes) {
+  return { type: SET_HIGHLIGHTS, highlights, otherwiseFaded, showEditTools, allowEditNodes };
 }
 
 export function clearHighlights() {
@@ -247,4 +248,8 @@ export function toggleHelpScreen(value) {
 
 export function toggleSettings(value) {
   return { type: TOGGLE_SETTINGS, value };
+}
+
+export function toggleNodeSelectable(value) {
+  return { type: TOGGLE_NODE_SELECTABLE, value };
 }

app/components/ChangeColorInput.jsx

@@ -38,17 +38,17 @@ export default class ChangeColorInput extends BaseComponent {
 
   render() {
     return (
-      <div id= "nodeColorInputWrapper">
-        <div id="swatch"  className="input-sm form-control">
-           <div id="color" style={{background: this.state.color }} onClick={ this.handleClick }/>
-           <button id="nodeColorInputClearer" onClick={ this.handleClearClick }>
+      <div className="nodeColorInputWrapper">
+        <div className="input-sm form-control nodeColorInput">
+           <div className="nodeColorInputSwatch" style={{ background: this.state.color }} onClick={ this.handleClick }/>
+           <button className="nodeColorInputClearer" onClick={ this.handleClearClick }>
              <span className="glyphicon glyphicon-remove-sign"></span>
            </button>
         </div>
-        <div id= "nodeColorPickerWrapper">
+        <div className="nodeColorPickerWrapper">
             { this.state.displayColorPicker && 
               <div is="popover">
-                <div is="cover" onClick={ this.handleClose }/>
+                <div className="nodeColorPickerCover" onClick={ this.handleClose }/>
                 <CompactPicker color={ this.state.color }  onChange={ this.handleValueChange } />
               </div>
             }

app/components/Edge.jsx

@@ -21,6 +21,7 @@ export default class Edge extends BaseComponent {
     let width = 1 + (e.display.scale - 1) * 5;
     let selected = this.props.selected;
     let highlighted = e.display.status == "highlighted";
+    let editable = e.display.status == "editable";
 
     return (
       <DraggableCore
@@ -30,15 +31,15 @@ export default class Edge extends BaseComponent {
         onStart={this._handleDragStart}
         onDrag={this._handleDrag}
         onStop={this._handleDragStop}>
-        <g id={sp.groupId} className={classNames({ edge: true, selected, highlighted })}>
+        <g id={sp.groupId} className={classNames({ edge: true, selected, highlighted, editable })}>
           { selected ? <path 
             className="edge-selection" 
             d={sp.curve} 
             stroke={eds.selectColor} 
             strokeOpacity={eds.selectOpacity} 
             strokeWidth={width + eds.selectWidthDiff} 
             fill="none"></path> : null }
-          { highlighted ? <path 
+          { (highlighted || editable) ? <path 
             className="edge-background" 
             d={sp.curve} 
             stroke={sp.bgColor} 

app/components/Editor.jsx

@@ -12,6 +12,10 @@ require('../styles/bootstrap-3.3.6.css');
 require('../styles/oligrapher.editor.css');
 
 export default class Editor extends BaseComponent {
+  constructor(props) {
+    super(props);
+    this.state = { helpScreen: false };
+  }
 
   render() {
     let zoomIn, zoomOut, resetZoom;

app/components/Graph.jsx

@@ -18,15 +18,15 @@ export default class Graph extends BaseComponent {
     this.nodes = {};
     this.edges = {};
     this.mounted = false;
-    let viewBox = this._computeViewbox(props.graph, props.zoom);
+    let viewBox = this._computeViewbox(props.graph, props.zoom, props.viewOnlyHighlighted);
     this.state = { x: 0, y: 0, viewBox, height: props.height };
   }
 
   render() {
     let { x, y, prevGraph, viewBox, height } = this.state;
 
     return (
-      <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" className="Graph" width="100%" height={height} viewBox={viewBox} preserveAspectRatio="xMidYMid">
+      <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" className="Graph" width="100%" height="100%" viewBox={viewBox} preserveAspectRatio="xMidYMid">
         <DraggableCore
           handle="#zoom-handle"
           moveOnStartChange={false}
@@ -53,7 +53,7 @@ export default class Graph extends BaseComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    this._updateViewbox(nextProps.graph, nextProps.zoom);
+    this._updateViewbox(nextProps.graph, nextProps.zoom, nextProps.viewOnlyHighlighted);
   }
 
   // RENDERING
@@ -83,7 +83,9 @@ export default class Graph extends BaseComponent {
         selected={this.props.selection && includes(this.props.selection.nodeIds, n.id)}
         clickNode={this.props.clickNode} 
         moveNode={this.props.moveNode} 
-        isLocked={this.props.isLocked} />);
+        isLocked={this.props.isLocked}
+        showEditTools={this.props.showEditTools}
+        allowEditNodes={this.props.allowEditNodes} />);
   }
 
   _renderCaptions() {
@@ -105,8 +107,8 @@ export default class Graph extends BaseComponent {
 
   // VIEWBOX AND ZOOM
 
-  _updateViewbox(graph, zoom) {
-    let viewBox = this._computeViewbox(graph, zoom);
+  _updateViewbox(graph, zoom, viewOnlyHighlighted) {
+    let viewBox = this._computeViewbox(graph, zoom, viewOnlyHighlighted);
     let changed = (viewBox !== this.state.viewBox);
     let oldViewBox = changed ? this.state.viewBox : null;
     this.setState({ viewBox, oldViewBox });
@@ -130,9 +132,8 @@ export default class Graph extends BaseComponent {
     }
   }
 
-  _computeViewbox(graph, zoom = 1.2) {
-    let onlyHighlighted = this.props.viewOnlyHighlighted;
-    let rect = this._computeRect(graph, onlyHighlighted);
+  _computeViewbox(graph, zoom = 1, viewOnlyHighlighted = true) {
+    let rect = this._computeRect(graph, viewOnlyHighlighted);
     let w = rect.w / zoom;
     let h = rect.h / zoom;
     let x = rect.x + rect.w/2 - (w/2);