dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rule chain edit improvements.

Browse Source
This commit is contained in:
Igor Kulikov 2018-03-26 16:00:25 +03:00
parent 164dbd68b7
commit b578402f11
6 changed files with 140 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/src/app/components/confirm-on-exit.directive.js
View File

@ -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
};
}

2
ui/src/app/locale/locale.constant.js
View File

@ -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",

155
ui/src/app/rulechain/rulechain.controller.js
View File

@ -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();
}
};
initHotKeys();
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();
}
};
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
}
);
}
model.nodes.push(node);
}
vm.ruleChainLibraryLoaded = true;
prepareRuleChain();
);
}
);
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();
}
function prepareRuleChain() {

5
ui/src/app/rulechain/rulechain.routes.js
View File

@ -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: {

38
ui/src/app/rulechain/rulechain.scss
View File

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

8
ui/src/app/rulechain/rulechain.tpl.html
View File

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