fontSize for nodes and comments

src-server/workspace/image-renderer.js

@@ -142,7 +142,12 @@ module.exports = function(authGuardian, mongooseConnection, webpack_middleware)
 
         var nodeFontSize = Number(req.query.nodeFontSize);
         if(!Number.isInteger(nodeFontSize) || nodeFontSize < 0 || nodeFontSize > 30){
-          nodeFontSize = 10;
+          nodeFontSize = 11;
+        }
+
+        var otherFontSize = Number(req.query.otherFontSize);
+        if(!Number.isInteger(otherFontSize) || otherFontSize < 0 || otherFontSize > 30){
+          otherFontSize = 10;
         }
 
         WardleyMap
@@ -168,7 +173,8 @@ module.exports = function(authGuardian, mongooseConnection, webpack_middleware)
                             height: height
                         }
                     },
-                    nodeFontSize : nodeFontSize
+                    nodeFontSize : nodeFontSize,
+                    otherFontSize : otherFontSize
                 };
                 var pageText = renderFullPage(opts, script || webpack_middleware.fileSystem.readFileSync(r + CANVAS_WRAPPER_PATH));
 

src-ui/canvas-wrapper.js

@@ -29,6 +29,7 @@ jsPlumb.ready(function() {
           mapID       = {global.window.OPTS.mapID}
           workspaceID = { global.window.OPTS.workspaceID}
           nodeFontSize = {global.window.OPTS.nodeFontSize}
+          otherFontSize = {global.window.OPTS.otherFontSize}
           background = "true" /> ,
         document.getElementById('root'));
 });

src-ui/map-editor/MapEditorPage.js

@@ -111,7 +111,8 @@ export default class MapEditorPage extends React.Component {
     let data = {
       width : size.width,
       height: size.height,
-      nodeFontSize : canvasStore.getNodeFontSize()
+      nodeFontSize : canvasStore.getNodeFontSize(),
+      otherFontSize : canvasStore.getOtherFontSize()
     };
     $.ajax({
       url: maplink,
@@ -239,12 +240,13 @@ export default class MapEditorPage extends React.Component {
     const helpMenu = <NavItem eventKey={7} href="#" onClick={this.openHelpDialog} key="help">
       <Glyphicon glyph="education"></Glyphicon>Get help!
     </NavItem>;
-    const increaseFont =<NavItem eventKey={7} href="#" onClick={CanvasActions.increaseNodeFontSize} key="increaseFont">
-      <Glyphicon glyph="font"></Glyphicon><Glyphicon glyph="chevron-up"></Glyphicon>
-    </NavItem>;
-    const decreaseFont = <NavItem eventKey={7} href="#" onClick={CanvasActions.decreaseNodeFontSize} key="decreaseFont">
-      <Glyphicon glyph="font"></Glyphicon><Glyphicon glyph="chevron-down"></Glyphicon>
-    </NavItem>;
+    const resizeTitle = <Glyphicon glyph="text-height"></Glyphicon>;
+    const fontResizeMenu = <NavDropdown eventKey={8} title={resizeTitle}>
+        <MenuItem onClick={CanvasActions.increaseNodeFontSize}><Glyphicon glyph="font"></Glyphicon><Glyphicon glyph="chevron-up"/> Component</MenuItem>
+        <MenuItem onClick={CanvasActions.decreaseNodeFontSize}><Glyphicon glyph="font"></Glyphicon><Glyphicon glyph="chevron-down"/> Component</MenuItem>
+        <MenuItem onClick={CanvasActions.increaseOtherFontSize}><Glyphicon glyph="font"></Glyphicon><Glyphicon glyph="chevron-up"/> Other</MenuItem>
+        <MenuItem onClick={CanvasActions.decreaseOtherFontSize}><Glyphicon glyph="font"></Glyphicon><Glyphicon glyph="chevron-down"/> Other</MenuItem>
+    </NavDropdown>;
 
     return (
       <DocumentTitle title={mapName}>
@@ -255,7 +257,7 @@ export default class MapEditorPage extends React.Component {
                 auth={auth}
                 history={history}
                 mainMenu={mapMenu}
-                rightMenu={[increaseFont, decreaseFont, helpMenu]}/>
+                rightMenu={[fontResizeMenu, helpMenu]}/>
             </Col>
           </Row>
           <Row className="show-grid">

src-ui/map-editor/canvas-actions.js

@@ -56,4 +56,12 @@ export default class CanvasActions {
     Dispatcher.dispatch({actionType: Constants.ACTION_TYPES.CANVAS_DECREASE_NODE_FONT_SIZE});
   }
 
+  static increaseOtherFontSize(){
+    Dispatcher.dispatch({actionType: Constants.ACTION_TYPES.CANVAS_INCREASE_OTHER_FONT_SIZE});
+  }
+
+  static decreaseOtherFontSize(){
+    Dispatcher.dispatch({actionType: Constants.ACTION_TYPES.CANVAS_DECREASE_OTHER_FONT_SIZE});
+  }
+
 }

src-ui/map-editor/canvas-constants.js

@@ -15,6 +15,8 @@ module.exports  = keyMirror({
       CANVAS_FOCUS_ADD_COMMENT : null,
       CANVAS_FOCUS_REMOVE_COMMENT : null,
       CANVAS_INCREASE_NODE_FONT_SIZE : null,
-      CANVAS_DECREASE_NODE_FONT_SIZE : null
+      CANVAS_DECREASE_NODE_FONT_SIZE : null,
+      CANVAS_INCREASE_OTHER_FONT_SIZE : null,
+      CANVAS_DECREASE_OTHER_FONT_SIZE : null
   }
 });

src-ui/map-editor/canvas-store.js

@@ -30,7 +30,8 @@ export default class CanvasStore extends Store {
           height: 1
         }
       },
-      nodeFontSize : 10,
+      nodeFontSize : 13,
+      otherFontSize : 10,
       diffEnabled : false
     };
     this.dispatchToken = Dispatcher.register(action => {
@@ -96,6 +97,14 @@ export default class CanvasStore extends Store {
           this.state.nodeFontSize --;
           this.emitChange();
           break;
+        case ActionTypes.CANVAS_INCREASE_OTHER_FONT_SIZE:
+            this.state.otherFontSize ++;
+            this.emitChange();
+            break;
+        case ActionTypes.CANVAS_DECREASE_OTHER_FONT_SIZE:
+            this.state.otherFontSize --;
+            this.emitChange();
+            break;
         default:
           return;
       }
@@ -183,6 +192,10 @@ export default class CanvasStore extends Store {
     return this.state.nodeFontSize;
   }
 
+  getOtherFontSize(){
+    return this.state.otherFontSize;
+  }
+
   emitChange() {
     this.state.multiNodeSelection = this.state.currentlySelectedNodes.length + this.state.currentlySelectedComments.length > 1;
     super.emitChange();

src-ui/map-editor/canvas.js

@@ -16,8 +16,8 @@ import {endpointOptions, actionEndpointOptions, moveEndpointOptions} from './com
 
 //remove min to fix connections
 var jsPlumb = require("../../node_modules/jsplumb/dist/js/jsplumb.min.js").jsPlumb;
-jsPlumb.registerConnectionType("constraint", {paintStyle : {stroke:'red'}});
-jsPlumb.registerConnectionType("flow", {paintStyle : {stroke:'blue'}});
+jsPlumb.registerConnectionType("constraint", {paintStyle : {stroke:'#EC7063'}});
+jsPlumb.registerConnectionType("flow", {paintStyle : {stroke:'#1ABC9C'}});
 
 jsPlumb.registerConnectionType("movement", {paintStyle : {stroke:'orange'}});
 
@@ -218,13 +218,15 @@ export default class MapCanvas extends React.Component {
         id: "menuOverlay"
       }
     ]);
+    let fontStyle = this.props.canvasStore.getOtherFontSize() + 'px Helvetica Neue,Helvetica,Arial,sans-serif';
     fromStyle.push([
         "Label", {
           label:labelText,
           id : "label",
           labelStyle :{
-            font : '11px Helvetica Neue,Helvetica,Arial,sans-serif',
+            font : fontStyle,
             fill: 'white',
+            color: '#333'
           }
         }
     ]

src-ui/map-editor/comment.js

@@ -176,6 +176,8 @@ var Comment = React.createClass({
     var workspaceID = this.props.workspaceID;
     var menu = this.renderMenu(focused);
     var canvasStore = this.props.canvasStore;
+    style.fontSize = canvasStore.getOtherFontSize();
+    style.padding = style.fontSize / 6 + 'px';
 
     return (
       <div style={style} onClick={this.onClickHandler} id={id} ref={input => {

src-ui/map-editor/component-styles.js

@@ -70,7 +70,7 @@ var genericCommentStyle = {
   border: '1px solid orange',
   backgroundColor: 'yellow',
   fontSize: 10,
-  lineHeight: '11px',
+  lineHeight: 1.1,
   padding: '1px',
   float: 'left',
   maxWidth: '150px'

src-ui/map-editor/historic-component.js

@@ -7,7 +7,6 @@ import {Glyphicon} from 'react-bootstrap';
 
 
 var itemCaptionStyle = {
-  top: -10,
   left: 10,
   position: 'absolute',
   zIndex: 20,
@@ -17,7 +16,7 @@ var itemCaptionStyle = {
   maxHeight: 22,
   marginBottom: -20,
   fontSize: 10,
-  lineHeight: '11px'
+  lineHeight: 1.1
 };
 
 var inertiaStyle = {
@@ -96,7 +95,9 @@ var HistoricComponent = React.createClass({
     var workspaceID = this.props.workspaceID;
     var inertia = this.renderInertia(this.props.inertia);
     var canvasStore = this.props.canvasStore;
-
+    itemCaptionStyle.fontSize = canvasStore.getNodeFontSize();
+    itemCaptionStyle.top = - itemCaptionStyle.fontSize;
+
     return (
       <div style={style} id={id} key={id}>
         <div style={itemCaptionStyle}>{name}</div>

src-ui/minimal-canvas/canvas-with-background.js

@@ -132,9 +132,10 @@ export default class CanvasWithBackground extends React.Component {
       outerStyle.marginTop= '-7px';
     }
     var nodeFontSize = this.props.nodeFontSize;
+    var otherFontSize = this.props.otherFontSize;
     return (
             <div style={outerStyle}>
-              <MapCanvas nodes={nodes} comments={comments} mapID={mapID} workspaceID={workspaceID} background={background} nodeFontSize={nodeFontSize}></MapCanvas>
+              <MapCanvas nodes={nodes} comments={comments} mapID={mapID} workspaceID={workspaceID} background={background} nodeFontSize={nodeFontSize} otherFontSize={otherFontSize}></MapCanvas>
               <div>
                 <div style={axisX}>
                   <div style={genesisStyle}>Genesis</div>

src-ui/minimal-canvas/canvas.js

@@ -10,8 +10,8 @@ var Comment = require('./comment');
 import {endpointOptions, actionEndpointOptions} from './component-styles';
 
 var jsPlumb = require("../../node_modules/jsplumb/dist/js/jsplumb.min.js").jsPlumb;
-jsPlumb.registerConnectionType("constraint", {paintStyle : {stroke:'red'}});
-jsPlumb.registerConnectionType("flow", {paintStyle : {stroke:'blue'}});
+jsPlumb.registerConnectionType("constraint", {paintStyle : {stroke:'#EC7063'}});
+jsPlumb.registerConnectionType("flow", {paintStyle : {stroke:'#1ABC9C'}});
 
 //this is style applied to the place where actuall components can be drawn
 var mapCanvasStyle = {
@@ -69,13 +69,15 @@ export default class MapCanvas extends React.Component {
     } else {
         fromStyle = [];
     }
+    let fontStyle = this.props.otherFontSize + 'px Helvetica Neue,Helvetica,Arial,sans-serif';
     fromStyle.push([
         "Label", {
           label:labelText,
           id : "label",
           labelStyle :{
-            font : '11px Helvetica Neue,Helvetica,Arial,sans-serif',
+            font : fontStyle,
             fill: 'white',
+            color: '#333'
           }
         }
     ]
@@ -155,6 +157,7 @@ export default class MapCanvas extends React.Component {
     jsPlumb.setSuspendDrawing(true, true); // this will be cleaned in did update
     var size = global.OPTS.coords.size;
     var nodeFontSize = this.props.nodeFontSize;
+    var otherFontSize = this.props.otherFontSize;
 
     var components = null;
     if (this.props.nodes) {
@@ -182,7 +185,7 @@ export default class MapCanvas extends React.Component {
               comments.push( <Comment comment = { this.props.comments[ii] }
                   id = { this.props.comments[ii]._id }
                   key = { this.props.comments[ii]._id }
-                  size = {size} />);
+                  size = {size} otherFontSize={otherFontSize} />);
             }
         }
     return (

src-ui/minimal-canvas/comment.js

@@ -24,7 +24,9 @@ var Comment = React.createClass({
       position: 'absolute',
       cursor: 'pointer'
     });
-
+    style.fontSize = this.props.otherFontSize;
+    style.padding = style.fontSize / 6 + 'px';
+
     var id = this.props.id;
     var txt = comment.text;