Improve Rule Chain UI edit.

ui/src/app/rulechain/rulechain.controller.js

@@ -62,6 +62,12 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
     vm.isEditingRuleNodeLink = false;
 
     vm.isLibraryOpen = true;
+
+    Object.defineProperty(vm, 'isLibraryOpenReadonly', {
+        get: function() { return vm.isLibraryOpen },
+        set: function() {}
+    });
+
     vm.ruleNodeSearch = '';
 
     vm.ruleChain = ruleChain;
@@ -140,6 +146,19 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
             subtitle: $translate.instant('rulechain.rulechain')
         };
         contextInfo.items = [];
+        if (vm.modelservice.nodes.getSelectedNodes().length) {
+            contextInfo.items.push(
+                {
+                    action: function () {
+                        copyRuleNodes();
+                    },
+                    enabled: true,
+                    value: "rulenode.copy-selected",
+                    icon: "content_copy",
+                    shortcut: "M-C"
+                }
+            );
+        }
         contextInfo.items.push(
             {
                 action: function ($event) {
@@ -168,17 +187,6 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
                     shortcut: "Esc"
                 }
             );
-            contextInfo.items.push(
-                {
-                    action: function (event) {
-                        copyRuleNodes(event);
-                    },
-                    enabled: true,
-                    value: "rulenode.copy-selected",
-                    icon: "content_copy",
-                    shortcut: "M-C"
-                }
-            );
             contextInfo.items.push(
                 {
                     action: function () {
@@ -254,8 +262,8 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
             );
             contextInfo.items.push(
                 {
-                    action: function (event) {
+                    action: function () {
-                        copyNode(event, node);
+                        copyNode(node);
                     },
                     enabled: true,
                     value: "action.copy",
@@ -323,12 +331,33 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
                     vm.modelservice.selectAll();
                 }
             })
+            .add({
+                combo: 'ctrl+c',
+                description: $translate.instant('rulenode.copy-selected'),
+                allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
+                callback: function (event) {
+                    event.preventDefault();
+                    copyRuleNodes();
+                }
+            })
+            .add({
+                combo: 'ctrl+v',
+                description: $translate.instant('action.paste'),
+                allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
+                callback: function (event) {
+                    event.preventDefault();
+                    if (itembuffer.hasRuleNodes()) {
+                        pasteRuleNodes();
+                    }
+                }
+            })
             .add({
                 combo: 'esc',
                 description: $translate.instant('rulenode.deselect-all-objects'),
                 allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
                 callback: function (event) {
                     event.preventDefault();
+                    event.stopPropagation();
                     vm.modelservice.deselectAll();
                 }
             })
@@ -624,17 +653,11 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
         }
     }
 
-    function copyNode(event, node) {
+    function copyNode(node) {
-        var offset = angular.element(vm.canvasControl.modelservice.getCanvasHtmlElement()).offset();
+        itembuffer.copyRuleNodes([node], []);
-        var x = Math.round(event.clientX - offset.left);
-        var y = Math.round(event.clientY - offset.top);
-        itembuffer.copyRuleNodes(x, y, [node], []);
     }
 
-    function copyRuleNodes(event) {
+    function copyRuleNodes() {
-        var offset = angular.element(vm.canvasControl.modelservice.getCanvasHtmlElement()).offset();
-        var x = Math.round(event.clientX - offset.left);
-        var y = Math.round(event.clientY - offset.top);
         var nodes = vm.modelservice.nodes.getSelectedNodes();
         var edges = vm.modelservice.edges.getSelectedEdges();
         var connections = [];
@@ -655,13 +678,23 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
                 connections.push(connection);
             }
         }
-        itembuffer.copyRuleNodes(x, y, nodes, connections);
+        itembuffer.copyRuleNodes(nodes, connections);
     }
 
     function pasteRuleNodes(event) {
-        var offset = angular.element(vm.canvasControl.modelservice.getCanvasHtmlElement()).offset();
+        var canvas = angular.element(vm.canvasControl.modelservice.getCanvasHtmlElement());
-        var x = Math.round(event.clientX - offset.left);
+        var x,y;
-        var y = Math.round(event.clientY - offset.top);
+        if (event) {
+            var offset = canvas.offset();
+            x = Math.round(event.clientX - offset.left);
+            y = Math.round(event.clientY - offset.top);
+        } else {
+            var scrollParent = canvas.parent();
+            var scrollTop = scrollParent.scrollTop();
+            var scrollLeft = scrollParent.scrollLeft();
+            x = scrollLeft + scrollParent.width()/2;
+            y = scrollTop + scrollParent.height()/2;
+        }
         var ruleNodes = itembuffer.pasteRuleNodes(x, y, event);
         if (ruleNodes) {
             vm.modelservice.deselectAll();

ui/src/app/rulechain/rulechain.tpl.html

@@ -36,8 +36,8 @@
             </section>
             <md-sidenav class="tb-rulechain-library md-sidenav-left md-whiteframe-4dp"
                         md-disable-backdrop
-                        md-is-locked-open="vm.isLibraryOpen"
+                        md-is-locked-open="vm.isLibraryOpenReadonly"
-                        md-is-open="vm.isLibraryOpen"
+                        md-is-open="vm.isLibraryOpenReadonly"
                         md-component-id="rulechain-library-sidenav" layout="column">
                 <md-toolbar>
                     <div class="md-toolbar-tools">

ui/src/app/services/item-buffer.service.js

@@ -155,13 +155,12 @@ function ItemBuffer($q, bufferStore, types, utils, dashboardUtils, ruleChainServ
         };
     }
 
-    function copyRuleNodes(x, y, nodes, connections) {
+    function copyRuleNodes(nodes, connections) {
         var ruleNodes = {
             nodes: [],
-            connections: [],
+            connections: []
-            originX: x,
-            originY: y
         };
+        var top = -1, left = -1, bottom = -1, right = -1;
         for (var i=0;i<nodes.length;i++) {
             var origNode = nodes[i];
             var node = {
@@ -180,7 +179,20 @@ function ItemBuffer($q, bufferStore, types, utils, dashboardUtils, ruleChainServ
                 node.error = origNode.error;
             }
             ruleNodes.nodes.push(node);
+            if (i==0) {
+                top = node.y;
+                left = node.x;
+                bottom = node.y + 50;
+                right = node.x + 170;
+            } else {
+                top = Math.min(top, node.y);
+                left = Math.min(left, node.x);
+                bottom = Math.max(bottom, node.y + 50);
+                right = Math.max(right, node.x + 170);
             }
+        }
+        ruleNodes.originX = left + (right-left)/2;
+        ruleNodes.originY = top + (bottom-top)/2;
         for (i=0;i<connections.length;i++) {
             var connection = connections[i];
             ruleNodes.connections.push(connection);