简柏林 / thingskit · Commits

Commit 8e3989c9a1b9755ab063580b3948ebc62ecb0b9a

Authored by Igor Kulikov
1 parent b13d666f

Improve Rule Chain UI edit.

Inline Side-by-side
Showing 3 changed files with 77 additions and 32 deletions
@@ -62,6 +62,12 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time @@ -62,6 +62,12 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
62 vm.isEditingRuleNodeLink = false; 62 vm.isEditingRuleNodeLink = false;
63 63
64 vm.isLibraryOpen = true; 64 vm.isLibraryOpen = true;
  65 +
  66 + Object.defineProperty(vm, 'isLibraryOpenReadonly', {
  67 + get: function() { return vm.isLibraryOpen },
  68 + set: function() {}
  69 + });
  70 +
65 vm.ruleNodeSearch = ''; 71 vm.ruleNodeSearch = '';
66 72
67 vm.ruleChain = ruleChain; 73 vm.ruleChain = ruleChain;
@@ -140,6 +146,19 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time @@ -140,6 +146,19 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
140 subtitle: $translate.instant('rulechain.rulechain') 146 subtitle: $translate.instant('rulechain.rulechain')
141 }; 147 };
142 contextInfo.items = []; 148 contextInfo.items = [];
  149 + if (vm.modelservice.nodes.getSelectedNodes().length) {
  150 + contextInfo.items.push(
  151 + {
  152 + action: function () {
  153 + copyRuleNodes();
  154 + },
  155 + enabled: true,
  156 + value: "rulenode.copy-selected",
  157 + icon: "content_copy",
  158 + shortcut: "M-C"
  159 + }
  160 + );
  161 + }
143 contextInfo.items.push( 162 contextInfo.items.push(
144 { 163 {
145 action: function ($event) { 164 action: function ($event) {
@@ -170,17 +189,6 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time @@ -170,17 +189,6 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
170 ); 189 );
171 contextInfo.items.push( 190 contextInfo.items.push(
172 { 191 {
173 - action: function (event) {  
174 - copyRuleNodes(event);  
175 - },  
176 - enabled: true,  
177 - value: "rulenode.copy-selected",  
178 - icon: "content_copy",  
179 - shortcut: "M-C"  
180 - }  
181 - );  
182 - contextInfo.items.push(  
183 - {  
184 action: function () { 192 action: function () {
185 vm.modelservice.deleteSelected(); 193 vm.modelservice.deleteSelected();
186 }, 194 },
@@ -254,8 +262,8 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time @@ -254,8 +262,8 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
254 ); 262 );
255 contextInfo.items.push( 263 contextInfo.items.push(
256 { 264 {
257 - action: function (event) {  
258 - copyNode(event, node); 265 + action: function () {
  266 + copyNode(node);
259 }, 267 },
260 enabled: true, 268 enabled: true,
261 value: "action.copy", 269 value: "action.copy",
@@ -324,11 +332,32 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time @@ -324,11 +332,32 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
324 } 332 }
325 }) 333 })
326 .add({ 334 .add({
  335 + combo: 'ctrl+c',
  336 + description: $translate.instant('rulenode.copy-selected'),
  337 + allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
  338 + callback: function (event) {
  339 + event.preventDefault();
  340 + copyRuleNodes();
  341 + }
  342 + })
  343 + .add({
  344 + combo: 'ctrl+v',
  345 + description: $translate.instant('action.paste'),
  346 + allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
  347 + callback: function (event) {
  348 + event.preventDefault();
  349 + if (itembuffer.hasRuleNodes()) {
  350 + pasteRuleNodes();
  351 + }
  352 + }
  353 + })
  354 + .add({
327 combo: 'esc', 355 combo: 'esc',
328 description: $translate.instant('rulenode.deselect-all-objects'), 356 description: $translate.instant('rulenode.deselect-all-objects'),
329 allowIn: ['INPUT', 'SELECT', 'TEXTAREA'], 357 allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
330 callback: function (event) { 358 callback: function (event) {
331 event.preventDefault(); 359 event.preventDefault();
  360 + event.stopPropagation();
332 vm.modelservice.deselectAll(); 361 vm.modelservice.deselectAll();
333 } 362 }
334 }) 363 })
@@ -624,17 +653,11 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time @@ -624,17 +653,11 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
624 } 653 }
625 } 654 }
626 655
627 - function copyNode(event, node) {  
628 - var offset = angular.element(vm.canvasControl.modelservice.getCanvasHtmlElement()).offset();  
629 - var x = Math.round(event.clientX - offset.left);  
630 - var y = Math.round(event.clientY - offset.top);  
631 - itembuffer.copyRuleNodes(x, y, [node], []); 656 + function copyNode(node) {
  657 + itembuffer.copyRuleNodes([node], []);
632 } 658 }
633 659
634 - function copyRuleNodes(event) {  
635 - var offset = angular.element(vm.canvasControl.modelservice.getCanvasHtmlElement()).offset();  
636 - var x = Math.round(event.clientX - offset.left);  
637 - var y = Math.round(event.clientY - offset.top); 660 + function copyRuleNodes() {
638 var nodes = vm.modelservice.nodes.getSelectedNodes(); 661 var nodes = vm.modelservice.nodes.getSelectedNodes();
639 var edges = vm.modelservice.edges.getSelectedEdges(); 662 var edges = vm.modelservice.edges.getSelectedEdges();
640 var connections = []; 663 var connections = [];
@@ -655,13 +678,23 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time @@ -655,13 +678,23 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
655 connections.push(connection); 678 connections.push(connection);
656 } 679 }
657 } 680 }
658 - itembuffer.copyRuleNodes(x, y, nodes, connections); 681 + itembuffer.copyRuleNodes(nodes, connections);
659 } 682 }
660 683
661 function pasteRuleNodes(event) { 684 function pasteRuleNodes(event) {
662 - var offset = angular.element(vm.canvasControl.modelservice.getCanvasHtmlElement()).offset();  
663 - var x = Math.round(event.clientX - offset.left);  
664 - var y = Math.round(event.clientY - offset.top); 685 + var canvas = angular.element(vm.canvasControl.modelservice.getCanvasHtmlElement());
  686 + var x,y;
  687 + if (event) {
  688 + var offset = canvas.offset();
  689 + x = Math.round(event.clientX - offset.left);
  690 + y = Math.round(event.clientY - offset.top);
  691 + } else {
  692 + var scrollParent = canvas.parent();
  693 + var scrollTop = scrollParent.scrollTop();
  694 + var scrollLeft = scrollParent.scrollLeft();
  695 + x = scrollLeft + scrollParent.width()/2;
  696 + y = scrollTop + scrollParent.height()/2;
  697 + }
665 var ruleNodes = itembuffer.pasteRuleNodes(x, y, event); 698 var ruleNodes = itembuffer.pasteRuleNodes(x, y, event);
666 if (ruleNodes) { 699 if (ruleNodes) {
667 vm.modelservice.deselectAll(); 700 vm.modelservice.deselectAll();
@@ -36,8 +36,8 @@ @@ -36,8 +36,8 @@
36 </section> 36 </section>
37 <md-sidenav class="tb-rulechain-library md-sidenav-left md-whiteframe-4dp" 37 <md-sidenav class="tb-rulechain-library md-sidenav-left md-whiteframe-4dp"
38 md-disable-backdrop 38 md-disable-backdrop
39 - md-is-locked-open="vm.isLibraryOpen"  
40 - md-is-open="vm.isLibraryOpen" 39 + md-is-locked-open="vm.isLibraryOpenReadonly"
  40 + md-is-open="vm.isLibraryOpenReadonly"
41 md-component-id="rulechain-library-sidenav" layout="column"> 41 md-component-id="rulechain-library-sidenav" layout="column">
42 <md-toolbar> 42 <md-toolbar>
43 <div class="md-toolbar-tools"> 43 <div class="md-toolbar-tools">
@@ -155,13 +155,12 @@ function ItemBuffer($q, bufferStore, types, utils, dashboardUtils, ruleChainServ @@ -155,13 +155,12 @@ function ItemBuffer($q, bufferStore, types, utils, dashboardUtils, ruleChainServ
155 }; 155 };
156 } 156 }
157 157
158 - function copyRuleNodes(x, y, nodes, connections) { 158 + function copyRuleNodes(nodes, connections) {
159 var ruleNodes = { 159 var ruleNodes = {
160 nodes: [], 160 nodes: [],
161 - connections: [],  
162 - originX: x,  
163 - originY: y 161 + connections: []
164 }; 162 };
  163 + var top = -1, left = -1, bottom = -1, right = -1;
165 for (var i=0;i<nodes.length;i++) { 164 for (var i=0;i<nodes.length;i++) {
166 var origNode = nodes[i]; 165 var origNode = nodes[i];
167 var node = { 166 var node = {
@@ -180,7 +179,20 @@ function ItemBuffer($q, bufferStore, types, utils, dashboardUtils, ruleChainServ @@ -180,7 +179,20 @@ function ItemBuffer($q, bufferStore, types, utils, dashboardUtils, ruleChainServ
180 node.error = origNode.error; 179 node.error = origNode.error;
181 } 180 }
182 ruleNodes.nodes.push(node); 181 ruleNodes.nodes.push(node);
  182 + if (i==0) {
  183 + top = node.y;
  184 + left = node.x;
  185 + bottom = node.y + 50;
  186 + right = node.x + 170;
  187 + } else {
  188 + top = Math.min(top, node.y);
  189 + left = Math.min(left, node.x);
  190 + bottom = Math.max(bottom, node.y + 50);
  191 + right = Math.max(right, node.x + 170);
  192 + }
183 } 193 }
  194 + ruleNodes.originX = left + (right-left)/2;
  195 + ruleNodes.originY = top + (bottom-top)/2;
184 for (i=0;i<connections.length;i++) { 196 for (i=0;i<connections.length;i++) {
185 var connection = connections[i]; 197 var connection = connections[i];
186 ruleNodes.connections.push(connection); 198 ruleNodes.connections.push(connection);