Copy&Paste in Model Builder #48

Author: m-mohr

CHANGELOG.md

@@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- `ModelBuilder`:
+  - Duplicate single blocks via button
+  - Copy&Paste multiple blocks (without edges)
+
 ## [2.13.0] - 2022-12-08
 
 ### Added
@@ -47,7 +53,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Better error messages for copy/paste
+- Better error messages for copy&paste
 - Close callbacks get fired for tabs
 
 ## [2.10.2] - 2022-08-29

components/ModelBuilder.vue

@@ -314,6 +314,7 @@ export default {
         if (!this.supports('editArguments')) {
             this.$on('editArguments', (...args) => this.showParameterViewer(...args));
         }
+        this.$on('duplicate', this.duplicate.bind(this));
     },
     async mounted() {
         Utils.loadFontAwesome(this);
@@ -442,6 +443,9 @@ export default {
                     let refs = PgUtils.getRefs(value, true, true).filter(ref => typeof ref.from_parameter !== 'undefined');
                     for(let ref of refs) {
                         try {
+                            if(!process.$el) {
+                                continue;
+                            }
                             if (process.$el.isParameterScoped(argName, ref.from_parameter)) {
                                 continue; // Skip if the parameter usage is scoped (i.e. defined as process parameetr for the children)
                             }
@@ -598,7 +602,20 @@ export default {
                             return;
                         }
                         if (this.hasSelection && this.clipboard) {
-                            return; // ToDo: Implement pasting for selected blocks
+                            if (this.clipboard.edges.length > 0) {
+                                this.$emit('error', 'Pasting edges is not supported yet.');
+                                return;
+                            }
+                            if (this.clipboard.blocks.length > 0) {
+                                this.clipboard.blocks.forEach(block => {
+                                    if (block.type === 'process' && block.origin !== 'schema') {
+                                        this.duplicate(Utils.pickFromObject(block, ["arguments", "description", "namespace", "position", "process_id"]));
+                                    }
+                                    else {
+                                        this.$emit('error', `Pasting block '${block.id}' is not supported.`);
+                                    }
+                                });
+                            }
                         }
                         else {
                             try {
@@ -876,6 +893,15 @@ export default {
             return [x, y];
         },
 
+        duplicate(data) {
+            data = Utils.deepClone(data);
+            if (data.position) {
+                data.position[1] += 100;
+            }
+            let block = this.addBlock(data);
+            this.$nextTick(() => this.createEdgesForArguments(block.id, data.arguments));
+        },
+
         addProcess(process_id, args = {}, position = [], namespace = null) {
             return this.addBlock({
                 process_id,
@@ -1380,44 +1406,54 @@ export default {
 
         async importEdges(pg) {
             var nodes = pg.getNodes();
-            for(var node of Object.values(nodes)) {
-                var args = node.getArgumentNames();
-                for(let i in args) {
-                    var val = node.getRawArgument(args[i]);
-                    switch(node.getArgumentType(args[i])) {
-                        case 'result':
-                            await this.addEdgeByNames('#' + pg.getNode(val.from_node).id, "output", '#' + node.id, args[i], false);
-                            break;
-                        case 'parameter':
-                            await this.addEdgeByNames('$' + val.from_parameter, "output", '#' + node.id, args[i], false);
-                            break;
-                        case 'object':
-                        case 'array':
-                            await this.importEdgeDeep(val, pg, node, args, i);
-                            break;
-                    }
+            return Promise.all(Object.values(nodes).map(node => this.importEdgesForNode(node)));
+        },
+
+        async importEdgesForNode(node) {
+            var args = node.getArgumentNames();
+            for(let i in args) {
+                let arg = args[i];
+                let val = node.getRawArgument(arg);
+                let ref = '#' + node.id;
+                switch(node.getArgumentType(arg)) {
+                    case 'result':
+                        await this.addEdgeByNames('#' + val.from_node, "output", ref, arg, false);
+                        break;
+                    case 'parameter':
+                        await this.addEdgeByNames('$' + val.from_parameter, "output", ref, arg, false);
+                        break;
+                    case 'object':
+                    case 'array':
+                        await this.importEdgeDeep(val, ref, arg);
+                        break;
                 }
             }
         },
 
-        async importEdgeDeep(val, pg, node, args, i) {
+        async importEdgeDeep(val, nodeId, arg) {
             for(let k in val) {
                 // k !== 'process_graph' prevents importing sub process graphs like in load_collection, see #118
                 if(val[k] && typeof val[k] === "object" && k !== 'process_graph') {
-                    await this.importEdgeDeep(val[k], pg, node, args, i);
+                    await this.importEdgeDeep(val[k], nodeId, arg);
                 }
                 else if (!Utils.isRef(val)) {
                     continue;
                 }
                 else if (val.from_node) {
-                    await this.addEdgeByNames('#' + pg.getNode(val.from_node).id, "output", '#' + node.id, args[i], false);
+                    await this.addEdgeByNames('#' + val.from_node, "output", nodeId, arg, false);
                 }
                 else if (val.from_parameter) {
-                    await this.addEdgeByNames('$' + val.from_parameter, "output", '#' + node.id, args[i], false);
+                    await this.addEdgeByNames('$' + val.from_parameter, "output", nodeId, arg, false);
                 }
             }
         },
 
+        async createEdgesForArguments(nodeId, args) {
+            for(let arg in args) {
+                await this.importEdgeDeep(args[arg], nodeId, arg);
+            }
+        },
+
         async importNodes(nodes, x = 0, y = 0, imported = []) {
             let nextNodes = [];
             let maxX = 0;

components/model-builder/Block.vue

@@ -12,6 +12,9 @@
                 <span v-show="allowsDescription && !showDescriptionField" class="addDescription" title="Add description" @click.stop.prevent="addDescription()">
                     <i class="fas fa-comment-medical"></i>
                 </span>
+                <span v-show="allowsDuplicate" class="duplicate" title="Duplicate" @click.stop.prevent="duplicate">
+                    <i class="fas fa-clone"></i>
+                </span>
                 <span v-show="allowsDelete" class="delete" title="Remove (DEL)" @click.stop.prevent="remove()">
                     <i class="fas fa-trash"></i>
                 </span>
@@ -261,6 +264,9 @@ export default {
                 return this.parameters.filter(p => p.isEditable()).length > 0;
             }
         },
+        allowsDuplicate() {
+            return (this.state.editable && this.type === 'process' && this.origin !== 'schema');
+        },
         allowsDelete() {
             return (this.state.editable && (!this.spec || (Utils.isObject(this.spec) && this.origin !== 'schema')));
         },
@@ -365,6 +371,15 @@ export default {
                 this.showArguments();
             }
         },
+        duplicate() {
+            this.$parent.$emit('duplicate', {
+                position: this.position,
+                process_id: this.process_id,
+                namespace: this.namespace,
+                arguments: this.args,
+                description: this.description
+            });
+        },
         hasParameter(name) {
             return this.hasParametersDefined && !!this.spec.parameters.find(p => p.name === name);
         },