feat(app): provide app menu through tabs

Related to #866
camunda · Sep 10, 2018 · 6a9065c · 6a9065c
1 parent cf1e2a2
commit 6a9065c
Show file tree

Hide file tree

Showing 10 changed files with 541 additions and 608 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) {
@@ -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);

diff --git a/client/src/app/AppParent.js b/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);
   }
 

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 '../get-edit-menu';
 
 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/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 '../get-edit-menu';
+
 
 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/dmn/DmnEditor.js b/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 '../get-edit-menu';
+
 import css from './DmnEditor.less';
 
 
@@ -68,9 +76,11 @@ class DmnEditor extends CachedComponent {
 
     [
       'saveXML.done',
-      'attach'
+      'attach',
+      // 'view.selectionChanged',
+      // 'view.directEditingChanged'
     ].forEach((event) => {
-      modeler[fn](event, this.updateActions);
+      modeler[fn](event, this.handleChanged);
     });
 
     modeler[fn]('views.changed', this.viewsChanged);
@@ -97,7 +107,7 @@ class DmnEditor extends CachedComponent {
   }
 
   viewContentChanged = () => {
-    this.updateActions();
+    this.handleChanged();
 
     this.props.onChanged(this.checkDirty());
   }
@@ -170,7 +180,7 @@ class DmnEditor extends CachedComponent {
       views
     });
 
-    this.updateActions();
+    this.handleChanged();
   }
 
   undo = () => {
@@ -189,7 +199,7 @@ class DmnEditor extends CachedComponent {
     modeler.getActiveViewer().get('commandStack').redo();
   }
 
-  updateActions = (event) => {
+  handleChanged = (event) => {    
     const {
       modeler
     } = this.getCached();
@@ -198,26 +208,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,
+        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 = () => {