feat(app): editors are responsible for edit menu

Related to #866

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) {
@@ -542,6 +545,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 +635,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);

client/src/app/AppParent.js

@@ -48,6 +48,8 @@ export default class AppParent extends Component {
   }
 
   handleToolStateChanged = (tab, state) => {
+
+    // TODO(philipp): is this necessary?
     this.getBackend().updateMenu(state);
   }
 

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" />

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)
+    ]
+  ];
+}

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);

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)
+    ]
+  ];
+}

client/src/app/tabs/dmn/DmnEditor.js

@@ -15,6 +15,14 @@ import {
 
 import CamundaDmnModeler from './DmnModeler';
 
+import { active as isInputActive } from '../../../util/dom/is-input';
+
+import {
+  getDmnDrdEditMenu,
+  getDmnDecisionTableEditMenu,
+  getDmnLiteralExpressionEditMenu
+} from './getDmnEditMenu';
+
 import css from './DmnEditor.less';
 
 
@@ -68,9 +76,12 @@ class DmnEditor extends CachedComponent {
 
     [
       'saveXML.done',
-      'attach'
+      'attach',
+      // TODO(philippfromme): fix, this will result in endless update loop
+      // 'view.selectionChanged',
+      'view.directEditingChanged'
     ].forEach((event) => {
-      modeler[fn](event, this.updateActions);
+      modeler[fn](event, this.handleChanged);
     });
 
     modeler[fn]('views.changed', this.viewsChanged);
@@ -97,7 +108,7 @@ class DmnEditor extends CachedComponent {
   }
 
   viewContentChanged = () => {
-    this.updateActions();
+    this.handleChanged();
 
     this.props.onChanged(this.checkDirty());
   }
@@ -170,7 +181,7 @@ class DmnEditor extends CachedComponent {
       views
     });
 
-    this.updateActions();
+    this.handleChanged();
   }
 
   undo = () => {
@@ -189,7 +200,7 @@ class DmnEditor extends CachedComponent {
     modeler.getActiveViewer().get('commandStack').redo();
   }
 
-  updateActions = (event) => {
+  handleChanged = (event) => {
     const {
       modeler
     } = this.getCached();
@@ -198,26 +209,56 @@ class DmnEditor extends CachedComponent {
       onChanged
     } = this.props;
 
-    const activeViewer = modeler.getActiveViewer();
+    const activeViewer = modeler.getActiveViewer(),
+          activeView = modeler.getActiveView();
 
     if (!activeViewer) {
       return;
     }
 
     const commandStack = activeViewer.get('commandStack');
 
+    const inputActive = isInputActive();
+
+    const editMenuState = {
+      redo: commandStack.canRedo(),
+      undo: commandStack.canUndo()
+    };
+
+    let editMenu;
+
+    if (activeView.type === 'drd') {
+      editMenu = getDmnDrdEditMenu({
+        ...editMenuState,
+        editLabel: !inputActive && !!activeViewer.get('selection').get().length,
+        lassoTool: !inputActive,
+        removeSelected: false
+      });
+    } else if (activeView.type === 'decisionTable') {
+      editMenu = getDmnDecisionTableEditMenu({
+        ...editMenuState,
+        hasSelection: activeViewer.get('selection').hasSelection()
+      });
+    } else if (activeView.type === 'literalExpression') {
+      editMenu = getDmnLiteralExpressionEditMenu({
+        ...editMenuState
+      });
+    }
+
     const newState = {
-      undo: commandStack.canUndo(),
+      canExport: 'saveSVG' in activeViewer ? [ 'svg', 'png' ] : false,
       redo: commandStack.canRedo(),
-      canExport: 'saveSVG' in activeViewer ? [ 'svg', 'png' ] : false
+      undo: commandStack.canUndo()
     };
 
     if (typeof onChanged === 'function') {
-      onChanged(newState);
+      onChanged({
+        ...newState,
+        editMenu
+      });
     }
 
     this.setState(newState);
-
   }
 
   checkImport = () => {