non-persistent font change

LeadingEdgeForum · Jul 5, 2017 · 9c070b5 · 9c070b5
1 parent 8b1f7cc
commit 9c070b5
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 12 deletions.
diff --git a/src-server/workspace/image-renderer.js b/src-server/workspace/image-renderer.js
@@ -140,6 +140,11 @@ module.exports = function(authGuardian, mongooseConnection, webpack_middleware)
           height = 800;
         }
 
+        var nodeFontSize = Number(req.query.nodeFontSize);
+        if(!Number.isInteger(nodeFontSize) || nodeFontSize < 0 || nodeFontSize > 30){
+          nodeFontSize = 10;
+        }
+
         WardleyMap
             .findOne({
                 _id: mapID,
@@ -162,7 +167,8 @@ module.exports = function(authGuardian, mongooseConnection, webpack_middleware)
                             width: width,
                             height: height
                         }
-                    }
+                    },
+                    nodeFontSize : nodeFontSize
                 };
                 var pageText = renderFullPage(opts, script || webpack_middleware.fileSystem.readFileSync(r + CANVAS_WRAPPER_PATH));
 

diff --git a/src-ui/canvas-wrapper.js b/src-ui/canvas-wrapper.js
@@ -28,6 +28,7 @@ jsPlumb.ready(function() {
           comments    = {global.window.OPTS.comments}
           mapID       = {global.window.OPTS.mapID}
           workspaceID = { global.window.OPTS.workspaceID}
+          nodeFontSize = {global.window.OPTS.nodeFontSize}
           background = "true" /> ,
         document.getElementById('root'));
 });
diff --git a/src-ui/map-editor/MapEditorPage.js b/src-ui/map-editor/MapEditorPage.js
@@ -32,6 +32,7 @@ import {calculateMapName} from '../map-list/map-name-calculator';
 import Palette from './palette';
 import CanvasStore from './canvas-store';
 import CanvasWithBackground from './canvas-with-background';
+import CanvasActions from './canvas-actions';
 import ToParentMap from './to-parent-map';
 import $ from 'jquery';
 var Blob = require('blob');
@@ -107,10 +108,15 @@ export default class MapEditorPage extends React.Component {
   download(maplink, tempName) {
     let canvasStore = this.canvasStore;
     let size = canvasStore.getCanvasSize();
+    let data = {
+      width : size.width,
+      height: size.height,
+      nodeFontSize : canvasStore.getNodeFontSize()
+    };
     $.ajax({
       url: maplink,
       type: 'GET',
-      data : size,
+      data : data,
       xhrFields: {
         responseType: 'blob'
       },
@@ -233,6 +239,12 @@ 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>;
 
     return (
       <DocumentTitle title={mapName}>
@@ -243,7 +255,7 @@ export default class MapEditorPage extends React.Component {
                 auth={auth}
                 history={history}
                 mainMenu={mapMenu}
-                rightMenu={[helpMenu]}/>
+                rightMenu={[increaseFont, decreaseFont, helpMenu]}/>
             </Col>
           </Row>
           <Row className="show-grid">

diff --git a/src-ui/map-editor/canvas-actions.js b/src-ui/map-editor/canvas-actions.js
@@ -48,4 +48,12 @@ export default class CanvasActions {
     Dispatcher.dispatch({actionType: Constants.ACTION_TYPES.CANVAS_FOCUS_REMOVE_COMMENT, data: commentID});
   }
 
+  static increaseNodeFontSize(){
+    Dispatcher.dispatch({actionType: Constants.ACTION_TYPES.CANVAS_INCREASE_NODE_FONT_SIZE});
+  }
+
+  static decreaseNodeFontSize(){
+    Dispatcher.dispatch({actionType: Constants.ACTION_TYPES.CANVAS_DECREASE_NODE_FONT_SIZE});
+  }
+
 }
diff --git a/src-ui/map-editor/canvas-constants.js b/src-ui/map-editor/canvas-constants.js
@@ -13,6 +13,8 @@ module.exports  = keyMirror({
       CANVAS__ADD_FOCUS_SINGLE_NODE : null,
       CANVAS_FOCUS_SINGLE_COMMENT : null,
       CANVAS_FOCUS_ADD_COMMENT : null,
-      CANVAS_FOCUS_REMOVE_COMMENT : null
+      CANVAS_FOCUS_REMOVE_COMMENT : null,
+      CANVAS_INCREASE_NODE_FONT_SIZE : null,
+      CANVAS_DECREASE_NODE_FONT_SIZE : null
   }
 });
diff --git a/src-ui/map-editor/canvas-store.js b/src-ui/map-editor/canvas-store.js
@@ -30,6 +30,7 @@ export default class CanvasStore extends Store {
           height: 1
         }
       },
+      nodeFontSize : 10,
       diffEnabled : false
     };
     this.dispatchToken = Dispatcher.register(action => {
@@ -87,6 +88,14 @@ export default class CanvasStore extends Store {
           this.state.currentlySelectedComments.splice(pos, 1);
           this.emitChange();
           break;
+        case ActionTypes.CANVAS_INCREASE_NODE_FONT_SIZE:
+          this.state.nodeFontSize ++;
+          this.emitChange();
+          break;
+        case ActionTypes.CANVAS_DECREASE_NODE_FONT_SIZE:
+          this.state.nodeFontSize --;
+          this.emitChange();
+          break;
         default:
           return;
       }
@@ -170,6 +179,10 @@ export default class CanvasStore extends Store {
     }
   }
 
+  getNodeFontSize(){
+    return this.state.nodeFontSize;
+  }
+
   emitChange() {
     this.state.multiNodeSelection = this.state.currentlySelectedNodes.length + this.state.currentlySelectedComments.length > 1;
     super.emitChange();

diff --git a/src-ui/map-editor/map-component.js b/src-ui/map-editor/map-component.js
@@ -23,7 +23,6 @@ var nonInlinedStyle = {
 };
 
 var itemCaptionStyle = {
-  top: -10,
   left: 10,
   position: 'absolute',
   zIndex: 20,
@@ -32,8 +31,7 @@ var itemCaptionStyle = {
   maxWidth: 100,
   maxHeight: 22,
   marginBottom: -20,
-  fontSize: 10,
-  lineHeight: '11px'
+  lineHeight: 1.1
 };
 
 /* globals document */
@@ -393,6 +391,8 @@ var MapComponent = 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;
 
     var cleanPosse = this.cleanPosse;
     return (

diff --git a/src-ui/minimal-canvas/canvas-with-background.js b/src-ui/minimal-canvas/canvas-with-background.js
@@ -131,9 +131,10 @@ export default class CanvasWithBackground extends React.Component {
       outerStyle.backgroundColor = 'white';
       outerStyle.marginTop= '-7px';
     }
+    var nodeFontSize = this.props.nodeFontSize;
     return (
             <div style={outerStyle}>
-              <MapCanvas nodes={nodes} comments={comments} mapID={mapID} workspaceID={workspaceID} background={background}></MapCanvas>
+              <MapCanvas nodes={nodes} comments={comments} mapID={mapID} workspaceID={workspaceID} background={background} nodeFontSize={nodeFontSize}></MapCanvas>
               <div>
                 <div style={axisX}>
                   <div style={genesisStyle}>Genesis</div>

diff --git a/src-ui/minimal-canvas/canvas.js b/src-ui/minimal-canvas/canvas.js
@@ -154,11 +154,12 @@ export default class MapCanvas extends React.Component {
   render() {
     jsPlumb.setSuspendDrawing(true, true); // this will be cleaned in did update
     var size = global.OPTS.coords.size;
+    var nodeFontSize = this.props.nodeFontSize;
 
     var components = null;
     if (this.props.nodes) {
       components = this.props.nodes.map(function(component) {
-        return (<MapComponent node={component} size={size} key={component._id} id={component._id} inertia={component.inertia} />);
+        return (<MapComponent node={component} size={size} key={component._id} id={component._id} inertia={component.inertia} nodeFontSize={nodeFontSize}/>);
       });
     }
     var arrowends = [];

diff --git a/src-ui/minimal-canvas/map-component.js b/src-ui/minimal-canvas/map-component.js
@@ -9,7 +9,6 @@ var nonInlinedStyle = {
 };
 
 var itemCaptionStyle = {
-  top: -10,
   left: 10,
   position: 'absolute',
   zIndex: 20,
@@ -18,8 +17,7 @@ var itemCaptionStyle = {
   maxWidth: 100,
   maxHeight: 22,
   marginBottom: -20,
-  fontSize: 10,
-  lineHeight: '11px'
+  lineHeight: 1.1
 };
 
 var inertiaStyle = {
@@ -72,6 +70,9 @@ var MapComponent = React.createClass({
     var name = this.renderName(node);
     var id = this.props.id;
     var inertia = this.renderInertia(this.props.inertia);
+    var nodeFontSize = this.props.nodeFontSize;
+    itemCaptionStyle.fontSize = nodeFontSize;
+    itemCaptionStyle.top = - nodeFontSize;
     return (
       <div style={style}  id={id} >
         <div style={itemCaptionStyle}>{name}</div>