feat(app): editors are responsible for edit menu

Related to #866 Closes #907
camunda · Sep 10, 2018 · aea8022 · aea8022
1 parent cf1e2a2
commit aea8022
Show file tree

Hide file tree

Showing 15 changed files with 562 additions and 627 deletions.
diff --git a/app/lib/menu/menu-builder.js b/app/lib/menu/menu-builder.js
diff --git a/client/src/app/App.js b/client/src/app/App.js
@@ -362,13 +362,16 @@ export class App extends Component {
       });
     }
 
+    tabState = {
+      ...tabState,
+      ...properties
+    };
 
     this.setState({
-      tabState: {
-        ...tabState,
-        ...properties
-      }
+      tabState
     });
+
+    this.updateMenu(tabState);
   }
 
   tabSaved(tab, newFile) {
@@ -438,20 +441,11 @@ export class App extends Component {
 
     const {
       onTabChanged,
-      onTabShown,
-      onToolStateChanged
+      onTabShown
     } = this.props;
 
     if (prevState.activeTab !== activeTab) {
 
-      if (typeof onToolStateChanged === 'function') {
-        onToolStateChanged(activeTab, {
-          closable: activeTab !== EMPTY_TAB,
-          save: activeTab !== EMPTY_TAB,
-          dirty: this.isDirty(activeTab)
-        });
-      }
-
       if (typeof onTabChanged === 'function') {
         onTabChanged(activeTab, prevState.activeTab);
       }
@@ -542,6 +536,11 @@ export class App extends Component {
     console.error('NOT IMPLEMENTED');
   }
 
+  updateMenu = (state) => {
+    console.log('App#updateMenu');
+    this.props.globals.backend.updateMenu(state);
+  }
+
   triggerAction = (action, options) => {
 
     const {
@@ -627,6 +626,10 @@ export class App extends Component {
       return this.showShortcuts();
     }
 
+    if (action === 'update-menu') {
+      return this.updateMenu();
+    }
+
     const tab = this.tabRef.current;
 
     return tab.triggerAction(action, options);

diff --git a/client/src/app/AppParent.js b/client/src/app/AppParent.js
@@ -47,10 +47,6 @@ export default class AppParent extends Component {
     this.getBackend().showContextMenu(type, options);
   }
 
-  handleToolStateChanged = (tab, state) => {
-    this.getBackend().updateMenu(state);
-  }
-
   handleReady = () => {
 
     this.getBackend().sendReady();
@@ -114,7 +110,6 @@ export default class AppParent extends Component {
         ref={ this.appRef }
         tabsProvider={ tabsProvider }
         globals={ globals }
-        onToolStateChanged={ this.handleToolStateChanged }
         onContextMenu={ this.handleContextMenu }
         onReady={ this.handleReady }
       />

diff --git a/client/src/app/__tests__/AppSpec.js b/client/src/app/__tests__/AppSpec.js
@@ -27,8 +27,6 @@ describe('<App>', function() {
 
     it('tabsProvider');
 
-    it('onToolStateChanged');
-
     it('onReady');
 
     it('onContextMenu');
@@ -588,7 +586,6 @@ function createApp(options = {}, mountFn=shallow) {
   };
 
   const onTabShown = options.onTabShown;
-  const onToolStateChanged = options.onToolStateChanged;
   const onReady = options.onReady;
 
   const tree = mountFn(
@@ -599,7 +596,6 @@ function createApp(options = {}, mountFn=shallow) {
       onReady={ onReady }
       onTabChanged={ onTabChanged }
       onTabShown={ onTabShown }
-      onToolStateChanged={ onToolStateChanged }
     />
   );
 

diff --git a/client/src/app/tabs/bpmn/BpmnEditor.js b/client/src/app/tabs/bpmn/BpmnEditor.js
@@ -17,6 +17,9 @@ import {
 
 import CamundaBpmnModeler from './modeler';
 
+import { active as isInputActive } from '../../../util/dom/is-input';
+
+import { getBpmnEditMenu } from './getBpmnEditMenu';
 
 import css from './BpmnEditor.less';
 
@@ -177,22 +180,46 @@ export class BpmnEditor extends CachedComponent {
       onChanged
     } = this.props;
 
-    // TODO(nikku): complete state updating
     const commandStack = modeler.get('commandStack');
     const selection = modeler.get('selection');
+    const canPaste = !modeler.get('clipboard').isEmpty();
 
     const selectionLength = selection.get().length;
 
+    const inputActive = isInputActive();
+
+    const editMenu = getBpmnEditMenu({
+      align: selectionLength > 1,
+      canCopy: !!selectionLength,
+      canPaste,
+      canRedo: commandStack.canRedo(),
+      canUndo: commandStack.canUndo(),
+      distribute: selectionLength > 2,
+      editLabel: !inputActive && !!selectionLength,
+      find: !inputActive,
+      globalConnectTool: !inputActive,
+      handTool: !inputActive,
+      lassoTool: !inputActive,
+      moveToOrigin: !inputActive,
+      spaceTool: !inputActive,
+      moveCanvas: !inputActive,
+      removeSelected: !!selectionLength
+    });
+
     const newState = {
-      undo: commandStack.canUndo(),
-      redo: commandStack.canRedo(),
       align: selectionLength > 1,
+      canExport: [ 'svg', 'png' ],
+      distribute: selectionLength > 2,
+      redo: commandStack.canRedo(),
       setColor: selectionLength,
-      canExport: [ 'svg', 'png' ]
+      undo: commandStack.canUndo()
     };
 
     if (typeof onChanged === 'function') {
-      onChanged(newState);
+      onChanged({
+        ...newState,
+        editMenu
+      });
     }
 
     this.setState(newState);
@@ -382,14 +409,14 @@ export class BpmnEditor extends CachedComponent {
         <Fill name="toolbar" group="distribute">
           <Button
             title="Distribute elements horizontally"
-            disabled={ !this.state.align }
+            disabled={ !this.state.distribute }
             onClick={ () => this.handleDistributeElements('horizontal') }
           >
             <Icon name="distribute-horizontal-tool" />
           </Button>
           <Button
             title="Distribute elements vertically"
-            disabled={ !this.state.align }
+            disabled={ !this.state.distribute }
             onClick={ () => this.handleDistributeElements('vertical') }
           >
             <Icon name="distribute-vertical-tool" />

diff --git a/client/src/app/tabs/bpmn/getBpmnEditMenu.js b/client/src/app/tabs/bpmn/getBpmnEditMenu.js
@@ -0,0 +1,70 @@
+import {
+  getCanvasEntries,
+  getDiagramFindEntries,
+  getSelectionEntries,
+  getToolEntries,
+  getUndoRedoEntries
+} from '../getEditMenu';
+
+function getCopyPasteEntries({
+  canCopy,
+  canPaste
+}) {
+  return [{
+    label: 'Copy',
+    accelerator: 'CommandOrControl+C',
+    enabled: canCopy,
+    action: 'copy'
+  }, {
+    label: 'Paste',
+    accelerator: 'CommandOrControl+V',
+    enabled: canPaste,
+    action: 'paste'
+  }];
+}
+
+function getAlignDistributeEntries({
+  align,
+  distribute
+}) {
+  return [{
+    label: 'Align Elements',
+    enabled: align,
+    submenu: [ 'Left', 'Right', 'Center', 'Top', 'Bottom', 'Middle' ].map(direction => {
+      return {
+        label: `Align ${direction}`,
+        enabled: align,
+        action: 'alignElements',
+        options: {
+          type: direction.toLowerCase()
+        }
+      };
+    })
+  }, {
+    label: 'Distribute Elements',
+    enabled: distribute,
+    submenu: [{
+      label: 'Distribute Horizontally',
+      enabled: distribute,
+      action: 'distributeHorizontally'
+    }, {
+      label: 'Distribute Vertically',
+      enabled: distribute,
+      action: 'distributeVertically'
+    }]
+  }];
+}
+
+export function getBpmnEditMenu(state) {
+  return [
+    getUndoRedoEntries(state),
+    getCopyPasteEntries(state),
+    getToolEntries(state),
+    getAlignDistributeEntries(state),
+    getDiagramFindEntries(state),
+    [
+      ...getCanvasEntries(state),
+      ...getSelectionEntries(state)
+    ]
+  ];
+}
diff --git a/client/src/app/tabs/cmmn/CmmnEditor.js b/client/src/app/tabs/cmmn/CmmnEditor.js
@@ -8,9 +8,12 @@ import {
 
 import CamundaCmmnModeler from './modeler';
 
-
 import css from './CmmnEditor.less';
 
+import { active as isInputActive } from '../../../util/dom/is-input';
+
+import { getCmmnEditMenu } from './getCmmnEditMenu';
+
 
 export class CmmnEditor extends CachedComponent {
 
@@ -122,17 +125,37 @@ export class CmmnEditor extends CachedComponent {
       onChanged
     } = this.props;
 
-    // TODO(nikku): complete state updating
     const commandStack = modeler.get('commandStack');
+    const selection = modeler.get('selection');
+
+    const selectionLength = selection.get().length;
+
+    const inputActive = isInputActive();
+
+    const editMenu = getCmmnEditMenu({
+      canRedo: commandStack.canRedo(),
+      canUndo: commandStack.canUndo(),
+      editLabel: !inputActive && !!selectionLength,
+      find: !inputActive,
+      globalConnectTool: !inputActive,
+      handTool: !inputActive,
+      lassoTool: !inputActive,
+      spaceTool: !inputActive,
+      moveCanvas: !inputActive,
+      removeSelected: !!selectionLength
+    });
 
     const newState = {
-      undo: commandStack.canUndo(),
+      canExport: [ 'svg', 'png' ],
       redo: commandStack.canRedo(),
-      canExport: [ 'svg', 'png' ]
+      undo: commandStack.canUndo()
     };
 
     if (typeof onChanged === 'function') {
-      onChanged(newState);
+      onChanged({
+        ...newState,
+        editMenu
+      });
     }
 
     this.setState(newState);

diff --git a/client/src/app/tabs/cmmn/getCmmnEditMenu.js b/client/src/app/tabs/cmmn/getCmmnEditMenu.js
@@ -0,0 +1,19 @@
+import {
+  getCanvasEntries,
+  getDiagramFindEntries,
+  getSelectionEntries,
+  getToolEntries,
+  getUndoRedoEntries
+} from '../getEditMenu';
+
+export function getCmmnEditMenu(state) {
+  return [
+    getUndoRedoEntries(state),
+    getToolEntries(state),
+    getDiagramFindEntries(state),
+    [
+      ...getCanvasEntries(state),
+      ...getSelectionEntries(state)
+    ]
+  ];
+}