hotkeys / menus

modules/ui/components/AdjustableAbs.jsx

@@ -20,6 +20,23 @@ export default class AdjustableAbs extends React.Component {
       }
     };
 
+    let {left, top, right, bottom, centered} = this.props;
+
+    if (centered) {
+      if (right !== undefined) {
+        this.el.style.right = (right + w * 0.5) + 'px'; 
+      } 
+      if (left !== undefined) {
+        this.el.style.left = (left - w * 0.5) + 'px';
+      }
+      if (bottom !== undefined) {
+        this.el.style.bottom = (bottom + h * 0.5) + 'px';
+      }
+      if (top !== undefined) {
+        this.el.style.top = (top - h * 0.5) + 'px';
+      }
+    }
+    
     fit('left', w, holder.offsetWidth);
     fit('right', w, holder.offsetWidth);
     fit('top',  h, holder.offsetHeight);
@@ -39,7 +56,7 @@ export default class AdjustableAbs extends React.Component {
   }
   
   render() {
-    let {left, top, right, bottom, children, style, zIndex, visible, ...props} = this.props;
+    let {left, top, right, bottom, children, style, zIndex, visible, centered, ...props} = this.props;
     return <div ref={el => this.el = el} 
                 style={{
                   display: visible ? 'block' : 'none',

modules/ui/components/Menu.jsx

@@ -5,13 +5,14 @@ import ls from './Menu.less';
 import AuxWidget from "./AuxWidget";
 import cx from 'classnames';
 
-export default function Menu({children, x, y, orientationUp, ...props}) {
+export default function Menu({children, x, y, orientationUp, centered, ...props}) {
   return <AuxWidget 
     className={cx(ls.root, 'disable-selection')}
     zIndex={500}
     left={x}
     top={orientationUp ? undefined : y}
     bottom={orientationUp ? y : undefined}
+    centered={centered}
     {...props}>
     {children}
   </AuxWidget>;

package.json

@@ -56,7 +56,7 @@
     "handlebars-loader": "1.6.0",
     "jquery": "2.1.0",
     "json-loader": "0.5.4 ",
-    "jwerty": "0.3.2",
+    "mousetrap": "1.6.1",
     "less": "2.7.3",
     "libtess": "1.2.2",
     "numeric": "1.2.6",

web/app/cad/dom/components/PlugableControlBar.jsx

@@ -7,6 +7,7 @@ import {TOKENS as ACTION_TOKENS} from '../../actions/actionSystemPlugin';
 import {toIdAndOverrides} from "../../actions/actionRef";
 import {mapActionBehavior} from "../../actions/actionButtonBehavior";
 import {DEFAULT_MAPPER} from "../../../../../modules/ui/connect";
+import {isMenuAction} from "../menu/menuPlugin";
 
 
 export default function PlugableControlBar() {
@@ -20,10 +21,6 @@ function ButtonGroup({actions}) {
   });
 }
 
-function isMenuAction(actionId) {
-  return actionId.startsWith('menu.');
-}
-
 class ActionButton extends React.Component {
   
   render() {

web/app/cad/dom/components/UISystem.jsx

@@ -9,7 +9,7 @@ import ActionInfo from '../actionInfo/ActionInfo';
 export default class UISystem extends React.Component {
   
   render() {
-    return <div {...this.props} onMouseDown={this.closeAllUpPopups}>
+    return <div {...this.props} onMouseDown={this.closeAllUpPopups} >
       <MenuHolder />
       <ActionInfo />
       <WindowSystem />
@@ -27,7 +27,7 @@ export default class UISystem extends React.Component {
       this.context.bus.dispatch(MENU_TOKENS.CLOSE_ALL);
     }
   };
-  
+
   getChildContext() {
     return {
       closeAllUpPopups: this.closeAllUpPopups
@@ -41,4 +41,5 @@ export default class UISystem extends React.Component {
   static childContextTypes = {
     closeAllUpPopups: PropTypes.func
   };
-}
+}
+

web/app/cad/dom/menu/menuPlugin.js

@@ -48,3 +48,7 @@ export const TOKENS = {
   OPENED: createToken('menus', 'opened')
 };
 
+export function isMenuAction(actionId) {
+  return actionId.startsWith('menu.');
+}
+

web/app/cad/keyboard/keyboardPlugin.js

@@ -1,11 +1,38 @@
+import Mousetrap from 'mousetrap';
 import DefaultKeymap from './keymaps/default';
 
 import {createToken} from "../../../../modules/bus/index";
+import {TOKENS as ACTION_TOKENS} from "../actions/actionSystemPlugin";
+import {isMenuAction, TOKENS as MENU_TOKENS} from "../dom/menu/menuPlugin";
 
-export function activate({bus}) {
+export function activate({bus, services}) {
   bus.enableState(TOKENS.KEYMAP, DefaultKeymap);
+  
+  let keymap = DefaultKeymap;
+  //to attach to a dom element: Mousetrap(domElement).bind(...
+  for (let action of Object.keys(keymap)) {
+    const dataProvider = getDataProvider(action, services);
+    let actionToken = ACTION_TOKENS.actionRun(action);
+    Mousetrap.bind(keymap[action], () => bus.dispatch(actionToken, dataProvider ? dataProvider() : undefined));
+  }
+  Mousetrap.bind('esc', () => bus.dispatch(MENU_TOKENS.CLOSE_ALL));
 }
 
+function getDataProvider(action, services) {
+  if (isMenuAction(action)) {
+    return function() {
+      let {left, top, width, height} = services.dom.viewerContainer.getBoundingClientRect();
+      return {
+        x: left + width * 0.5,
+        y: top + height * 0.5,
+        centered: true
+      }      
+    }
+  }
+  return null;
+}
+
+
 export const TOKENS = {
   KEYMAP: createToken('keymap')
 };