Rule chain edit improvements.

Igor Kulikov
1 parent 164dbd68
Showing 6 changed files with 140 additions and 87 deletions
ui/src/app/components/confirm-on-exit.directive.js
ui/src/app/locale/locale.constant.js
ui/src/app/rulechain/rulechain.controller.js
ui/src/app/rulechain/rulechain.routes.js
ui/src/app/rulechain/rulechain.scss
ui/src/app/rulechain/rulechain.tpl.html
--- a/ui/src/app/components/confirm-on-exit.directive.js
View file @b578402
+++ b/ui/src/app/components/confirm-on-exit.directive.js
View file @b578402
@@ -18,17 +18,17 @@ export default angular.module('thingsboard.directives.confirmOnExit', [])
     .name;
 /*@ngInject*/
-function ConfirmOnExit($state, $mdDialog, $window, $filter, userService) {
+function ConfirmOnExit($state, $mdDialog, $window, $filter, $parse, userService) {
     return {
-        link: function ($scope) {
-
+        link: function ($scope, $element, $attributes) {
+            $scope.confirmForm = $scope.$eval($attributes.confirmForm);
             $window.onbeforeunload = function () {
-                if (userService.isAuthenticated() && (($scope.confirmForm && $scope.confirmForm.$dirty) || $scope.isDirty)) {
+                if (userService.isAuthenticated() && (($scope.confirmForm && $scope.confirmForm.$dirty) || $scope.$eval($attributes.isDirty))) {
                     return $filter('translate')('confirm-on-exit.message');
                 }
             }
             $scope.$on('$stateChangeStart', function (event, next, current, params) {
-                if (userService.isAuthenticated() && (($scope.confirmForm && $scope.confirmForm.$dirty) || $scope.isDirty)) {
+                if (userService.isAuthenticated() && (($scope.confirmForm && $scope.confirmForm.$dirty) || $scope.$eval($attributes.isDirty))) {
                     event.preventDefault();
                     var confirm = $mdDialog.confirm()
                         .title($filter('translate')('confirm-on-exit.title'))
@@ -40,7 +40,9 @@ function ConfirmOnExit($state, $mdDialog, $window, $filter, userService) {
                         if ($scope.confirmForm) {
                             $scope.confirmForm.$setPristine();
                         } else {
-                            $scope.isDirty = false;
+                            var remoteSetter = $parse($attributes.isDirty).assign;
+                            remoteSetter($scope, false);
+                            //$scope.isDirty = false;
                         }
                         $state.go(next.name, params);
                     }, function () {
@@ -48,9 +50,6 @@ function ConfirmOnExit($state, $mdDialog, $window, $filter, userService) {
                 }
             });
         },
-        scope: {
-            confirmForm: '=',
-            isDirty: '='
-        }
+        scope: false
     };
 }
--- a/ui/src/app/locale/locale.constant.js
View file @b578402
+++ b/ui/src/app/locale/locale.constant.js
View file @b578402
@@ -1177,6 +1177,8 @@ export default angular.module('thingsboard.locale', [])
                     "type": "Type",
                     "description": "Description",
                     "delete": "Delete rule node",
+                    "select-all": "Select all nodes and connections",
+                    "deselect-all": "Deselect all nodes and connections",
                     "delete-selected-objects": "Delete selected nodes and connections",
                     "rulenode-details": "Rule node details",
                     "debug-mode": "Debug mode",
--- a/ui/src/app/rulechain/rulechain.controller.js
View file @b578402
+++ b/ui/src/app/rulechain/rulechain.controller.js
View file @b578402
@@ -27,15 +27,10 @@ import addRuleNodeLinkTemplate from './add-link.tpl.html';
 /* eslint-enable import/no-unresolved, import/default */
-
-const deleteKeyCode = 46;
-const ctrlKeyCode = 17;
-const aKeyCode = 65;
-const escKeyCode = 27;
-
 /*@ngInject*/
 export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil, $timeout, $mdExpansionPanel, $document, $mdDialog,
-                                    $filter, $translate, types, ruleChainService, Modelfactory, flowchartConstants, ruleChain, ruleChainMetaData) {
+                                    $filter, $translate, hotkeys, types, ruleChainService, Modelfactory, flowchartConstants,
+                                    ruleChain, ruleChainMetaData, ruleNodeComponents) {
     var vm = this;
@@ -76,42 +71,62 @@ export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil,
     vm.modelservice = Modelfactory(vm.ruleChainModel, vm.selectedObjects);
-    vm.ctrlDown = false;
-
     vm.saveRuleChain = saveRuleChain;
     vm.revertRuleChain = revertRuleChain;
     vm.objectsSelected = objectsSelected;
     vm.deleteSelected = deleteSelected;
-    vm.keyDown = function (evt) {
-        if (evt.keyCode === ctrlKeyCode) {
-            vm.ctrlDown = true;
-            evt.stopPropagation();
-            evt.preventDefault();
-        }
-    };
-
-    vm.keyUp = function (evt) {
-
-        if (evt.keyCode === deleteKeyCode) {
-            vm.modelservice.deleteSelected();
-        }
-
-        if (evt.keyCode == aKeyCode && vm.ctrlDown) {
-            vm.modelservice.selectAll();
-        }
-
-        if (evt.keyCode == escKeyCode) {
-            vm.modelservice.deselectAll();
-        }
-
-        if (evt.keyCode === ctrlKeyCode) {
-            vm.ctrlDown = false;
-            evt.stopPropagation();
-            evt.preventDefault();
-        }
-    };
+    initHotKeys();
+
+    function initHotKeys() {
+        hotkeys.bindTo($scope)
+            .add({
+                combo: 'ctrl+a',
+                description: $translate.instant('rulenode.select-all'),
+                allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
+                callback: function (event) {
+                    event.preventDefault();
+                    vm.modelservice.selectAll();
+                }
+            })
+            .add({
+                combo: 'esc',
+                description: $translate.instant('rulenode.deselect-all'),
+                allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
+                callback: function (event) {
+                    event.preventDefault();
+                    vm.modelservice.deselectAll();
+                }
+            })
+            .add({
+                combo: 'ctrl+s',
+                description: $translate.instant('action.apply'),
+                allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
+                callback: function (event) {
+                    event.preventDefault();
+                    vm.saveRuleChain();
+                }
+            })
+            .add({
+                combo: 'ctrl+z',
+                description: $translate.instant('action.decline-changes'),
+                allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
+                callback: function (event) {
+                    event.preventDefault();
+                    vm.revertRuleChain();
+                }
+            })
+            .add({
+                combo: 'del',
+                description: $translate.instant('rulenode.delete-selected-objects'),
+                allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
+                callback: function (event) {
+                    event.preventDefault();
+                    vm.modelservice.deleteSelected();
+                }
+            })
+    }
     vm.onEditRuleNodeClosed = function() {
         vm.editingRuleNode = null;
@@ -289,44 +304,40 @@ export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil,
     loadRuleChainLibrary();
     function loadRuleChainLibrary() {
-        ruleChainService.getRuleNodeComponents().then(
-            (ruleNodeComponents) => {
-                for (var i=0;i<ruleNodeComponents.length;i++) {
-                    var ruleNodeComponent = ruleNodeComponents[i];
-                    var componentType = ruleNodeComponent.type;
-                    var model = vm.ruleNodeTypesModel[componentType].model;
-                    var node = {
-                        id: model.nodes.length,
-                        component: ruleNodeComponent,
-                        name: '',
-                        nodeClass: vm.types.ruleNodeType[componentType].nodeClass,
-                        icon: vm.types.ruleNodeType[componentType].icon,
-                        x: 30,
-                        y: 10+50*model.nodes.length,
-                        connectors: []
-                    };
-                    if (ruleNodeComponent.configurationDescriptor.nodeDefinition.inEnabled) {
-                        node.connectors.push(
-                            {
-                                type: flowchartConstants.leftConnectorType,
-                                id: model.nodes.length * 2
-                            }
-                        );
+        for (var i=0;i<ruleNodeComponents.length;i++) {
+            var ruleNodeComponent = ruleNodeComponents[i];
+            var componentType = ruleNodeComponent.type;
+            var model = vm.ruleNodeTypesModel[componentType].model;
+            var node = {
+                id: model.nodes.length,
+                component: ruleNodeComponent,
+                name: '',
+                nodeClass: vm.types.ruleNodeType[componentType].nodeClass,
+                icon: vm.types.ruleNodeType[componentType].icon,
+                x: 30,
+                y: 10+50*model.nodes.length,
+                connectors: []
+            };
+            if (ruleNodeComponent.configurationDescriptor.nodeDefinition.inEnabled) {
+                node.connectors.push(
+                    {
+                        type: flowchartConstants.leftConnectorType,
+                        id: model.nodes.length * 2
                     }
-                    if (ruleNodeComponent.configurationDescriptor.nodeDefinition.outEnabled) {
-                        node.connectors.push(
-                            {
-                                type: flowchartConstants.rightConnectorType,
-                                id: model.nodes.length * 2 + 1
-                            }
-                        );
+                );
+            }
+            if (ruleNodeComponent.configurationDescriptor.nodeDefinition.outEnabled) {
+                node.connectors.push(
+                    {
+                        type: flowchartConstants.rightConnectorType,
+                        id: model.nodes.length * 2 + 1
                     }
-                    model.nodes.push(node);
-                }
-                vm.ruleChainLibraryLoaded = true;
-                prepareRuleChain();
+                );
             }
-        );
+            model.nodes.push(node);
+        }
+        vm.ruleChainLibraryLoaded = true;
+        prepareRuleChain();
     }
     function prepareRuleChain() {
--- a/ui/src/app/rulechain/rulechain.routes.js
View file @b578402
+++ b/ui/src/app/rulechain/rulechain.routes.js
View file @b578402
@@ -68,6 +68,11 @@ export default function RuleChainRoutes($stateProvider, NodeTemplatePathProvider
                 /*@ngInject*/
                     function($stateParams, ruleChainService) {
                         return ruleChainService.getRuleChainMetaData($stateParams.ruleChainId);
+                    },
+                ruleNodeComponents:
+                /*@ngInject*/
+                    function($stateParams, ruleChainService) {
+                        return ruleChainService.getRuleNodeComponents();
                     }
             },
             data: {
--- a/ui/src/app/rulechain/rulechain.scss
View file @b578402
+++ b/ui/src/app/rulechain/rulechain.scss
View file @b578402
@@ -75,6 +75,7 @@
   padding: 5px 10px;
   border-radius: 5px;
   background-color: #F15B26;
+  pointer-events: none;
   color: #333;
   border: solid 1px #777;
   font-size: 12px;
@@ -186,12 +187,27 @@
   margin: 10px;
   border-radius: 5px;
   background-color: #ccc;
+  pointer-events: all;
 }
 .fc-connector.fc-hover {
   background-color: #000;
 }
+.fc-arrow-marker {
+  polygon {
+    stroke: gray;
+    fill: gray;
+  }
+}
+
+.fc-arrow-marker-selected {
+  polygon {
+    stroke: red;
+    fill: red;
+  }
+}
+
 .fc-edge {
   outline: none;
   stroke: gray;
@@ -246,11 +262,23 @@
   cursor: pointer;
 }
+.fc-noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+
 .fc-edge-label {
   position: absolute;
-  user-select: none;
   transition: transform .2s;
   opacity: 0.8;
+  &.ng-leave {
+    transition: 0s none;
+  }
   &.fc-hover {
     transform: scale(1.25);
   }
@@ -262,6 +290,13 @@
       }
     }
   }
+  .fc-nodedelete {
+    right: -13px;
+    top: -30px;
+  }
+  &:focus {
+    outline: 0;
+  }
 }
 .fc-edge-label-text {
@@ -273,6 +308,7 @@
   font-size: 14px;
   font-weight: 600;
   span {
+    cursor: default;
     border: solid 2px #003a79;
     border-radius: 10px;
     color: #003a79;
--- a/ui/src/app/rulechain/rulechain.tpl.html
View file @b578402
+++ b/ui/src/app/rulechain/rulechain.tpl.html
View file @b578402
@@ -16,8 +16,10 @@
 -->
-<md-content flex tb-expand-fullscreen
-            expand-tooltip-direction="bottom" layout="column" class="tb-rulechain">
+<md-content flex tb-expand-fullscreen tb-confirm-on-exit is-dirty="vm.isDirty"
+            expand-tooltip-direction="bottom" layout="column" class="tb-rulechain"
+            ng-keydown="vm.keyDown($event)"
+            ng-keyup="vm.keyUp($event)">
     <section class="tb-rulechain-container" flex layout="column">
         <div class="tb-rulechain-layout" flex layout="row">
             <div class="tb-rulechain-library">
@@ -50,8 +52,6 @@
             </div>
             <div flex class="tb-rulechain-graph">
                 <fc-canvas id="tb-rulchain-canvas"
-                           ng-keydown="vm.keyDown($event)"
-                           ng-keyup="vm.keyUp($event)"
                            model="vm.ruleChainModel"
                            selected-objects="vm.selectedObjects"
                            edge-style="curved"