thingsboard-developers
Changes
ui/src/app/locale/locale.constant.js 2(+2 -0)
ui/src/app/rulechain/rulechain.controller.js 155(+83 -72)
ui/src/app/rulechain/rulechain.scss 38(+37 -1)
Details
diff --git a/ui/src/app/components/confirm-on-exit.directive.js b/ui/src/app/components/confirm-on-exit.directive.js
index fe9a9bd..e04e110 100644
--- a/ui/src/app/components/confirm-on-exit.directive.js
+++ b/ui/src/app/components/confirm-on-exit.directive.js
@@ -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
};
}
\ No newline at end of file
ui/src/app/locale/locale.constant.js 2(+2 -0)
diff --git a/ui/src/app/locale/locale.constant.js b/ui/src/app/locale/locale.constant.js
index a7b2b44..5dce787 100644
--- a/ui/src/app/locale/locale.constant.js
+++ b/ui/src/app/locale/locale.constant.js
@@ -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",
ui/src/app/rulechain/rulechain.controller.js 155(+83 -72)
diff --git a/ui/src/app/rulechain/rulechain.controller.js b/ui/src/app/rulechain/rulechain.controller.js
index 565e72b..4eba5b2 100644
--- a/ui/src/app/rulechain/rulechain.controller.js
+++ b/ui/src/app/rulechain/rulechain.controller.js
@@ -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() {
diff --git a/ui/src/app/rulechain/rulechain.routes.js b/ui/src/app/rulechain/rulechain.routes.js
index 808661a..f9578ef 100644
--- a/ui/src/app/rulechain/rulechain.routes.js
+++ b/ui/src/app/rulechain/rulechain.routes.js
@@ -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: {
ui/src/app/rulechain/rulechain.scss 38(+37 -1)
diff --git a/ui/src/app/rulechain/rulechain.scss b/ui/src/app/rulechain/rulechain.scss
index c1d1376..c9b2ced 100644
--- a/ui/src/app/rulechain/rulechain.scss
+++ b/ui/src/app/rulechain/rulechain.scss
@@ -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;
diff --git a/ui/src/app/rulechain/rulechain.tpl.html b/ui/src/app/rulechain/rulechain.tpl.html
index eec376e..d23f920 100644
--- a/ui/src/app/rulechain/rulechain.tpl.html
+++ b/ui/src/app/rulechain/rulechain.tpl.html
@@ -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"