@dualbox/editor 1.0.72 → 1.0.73

package/js/src/v/templates/graphNode.vue

@@ -1,6 +1,6 @@
 <style>
 .card-ui {
-    background-color: #bff2ca!important;
+    background-color: #bff2ca !important;
 }
 
 .card-loop {
@@ -10,11 +10,11 @@
 }
 
 .card-input {
-    background-color: #f5d76e!important;
+    background-color: #f5d76e !important;
 }
 
 .card-output {
-    background-color: #ffb3a7!important;
+    background-color: #ffb3a7 !important;
 }
 
 .box-inputs {
@@ -33,26 +33,25 @@
     text-align: right;
 }
 
-.dualbox-graph-canvas .card, .card-node {
+.dualbox-graph-canvas .card,
+.card-node {
     /*border: 1px solid #dddddd;*/
     box-shadow: 1px 1px 5px #716f6f;
     opacity: 1;
     cursor: pointer;
     z-index: 20;
     position: absolute;
-
     -webkit-transition: -webkit-box-shadow 0.15s ease-in;
     -moz-transition: -moz-box-shadow 0.15s ease-in;
     -o-transition: -o-box-shadow 0.15s ease-in;
     transition: box-shadow 0.15s ease-in;
-
     color: #4d4d4d;
     user-select: none;
     padding: 0px 8px 0px 8px;
-    overflow:hidden;
+    overflow: hidden;
     background-color: #fff;
     -moz-border-radius: 3px;
-    border-radius:3px;
+    border-radius: 3px;
     font-size: 14px;
     font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
@@ -71,7 +70,7 @@
 .card-node hr {
     margin-top: 2px;
     margin-bottom: 2px;
-    border-color: rgba(0,0,0,0.1);
+    border-color: rgba(0, 0, 0, 0.1);
     margin-left: -8px;
     margin-right: -8px;
 }
@@ -81,7 +80,8 @@
     box-shadow: 1px 1px 10px #80b2fc;
 }
 
-.card-node.selected, .card-node.selected:hover {
+.card-node.selected,
+.card-node.selected:hover {
     border-color: #0066ff;
     box-shadow: 1px 1px 10px #0066ff;
 }
@@ -91,19 +91,19 @@
 }
 
 .input-not-resolvable {
-    color: #dd6666!important;
+    color: #dd6666 !important;
 }
 
 .card-node .title {
-    vertical-align:top;
+    vertical-align: top;
     font-weight: bold;
 }
 
 .card-node .subtitle {
-    color:#929292;
+    color: #929292;
     font-size: 11px;
     font-style: italic;
-    vertical-align:center;
+    vertical-align: center;
     font-family: tahoma, sans-serif;
 }
 
@@ -115,7 +115,7 @@
 .card-node .output {
     font-size: 13px;
     color: #8c8c8c;
-    text-align:right;
+    text-align: right;
 }
 
 .card-node .jtk-endpoint.active svg circle {
@@ -147,7 +147,7 @@
 }
 
 .types {
-    color: #6c757d!important;
+    color: #6c757d !important;
     opacity: 0.7;
     pointer-events: none;
 }
@@ -212,10 +212,10 @@ span.feedback {
 
 .event-dock {
     background-color: rgb(136, 137, 138);
-    background-color:   #a6a6a6;
+    background-color: #a6a6a6;
     width: calc(100% + 18px);
     height: 12px;
-    z-index: 3!important;
+    z-index: 3 !important;
 }
 
 .event-dock-top {
@@ -234,15 +234,16 @@ span.feedback {
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     margin-top: 4px;
-    height: 11px; /* shorter because of box-shadow */
+    height: 11px;
+    /* shorter because of box-shadow */
 }
 
 .event-label {
     z-index: 21;
     padding-left: 15px;
-    transform: rotate(-90deg) translate(0%, -50%)!important;
+    transform: rotate(-90deg) translate(0%, -50%) !important;
     transform-origin: 0% 0%;
-    color: #6c757d!important;
+    color: #6c757d !important;
     font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
     font-size: 14px;
     opacity: 0.7;
@@ -250,7 +251,7 @@ span.feedback {
 }
 
 .transparent {
-    opacity: 0.3!important;
+    opacity: 0.3 !important;
 }
 
 .card-node {
@@ -262,7 +263,7 @@ span.feedback {
     top: 0;
     right: 0;
     margin-top: -22px;
-    color: #f4ad42!important;
+    color: #f4ad42 !important;
 }
 
 .card-problem {
@@ -270,35 +271,33 @@ span.feedback {
     top: 0;
     left: 0;
     margin-top: -22px;
-    color: red!important;
+    color: red !important;
 }
 
-.card-snapshot {
-
-}
+.card-snapshot {}
 
 .card-snapshot-idle {
-    border: 2px solid gray!important;
-    box-shadow: 1px 1px 5px gray!important;
-    opacity: 0.7!important;
+    border: 2px solid gray !important;
+    box-shadow: 1px 1px 5px gray !important;
+    opacity: 0.7 !important;
 }
 
 .card-snapshot-computing {
-    border: 2px solid darkgreen!important;
-    box-shadow: 1px 1px 5px darkgreen!important;
-    opacity: 1!important;
+    border: 2px solid darkgreen !important;
+    box-shadow: 1px 1px 5px darkgreen !important;
+    opacity: 1 !important;
 }
 
 .card-snapshot-awaiting-data {
-    border: 2px solid blue!important;
-    box-shadow: 1px 1px 5px blue!important;
-    opacity: 0.7!important;
+    border: 2px solid blue !important;
+    box-shadow: 1px 1px 5px blue !important;
+    opacity: 0.7 !important;
 }
 
 .card-snapshot-ready {
-    border: 2px solid lightgreen!important;
-    box-shadow: 1px 1px 5px lightgreen!important;
-    opacity: 1!important;
+    border: 2px solid lightgreen !important;
+    box-shadow: 1px 1px 5px lightgreen !important;
+    opacity: 1 !important;
 }
 
 .card-status {
@@ -307,29 +306,29 @@ span.feedback {
     right: 0;
     left: 0;
     margin-bottom: -26px;
-    color: #f4ad42!important;
+    color: #f4ad42 !important;
     font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
     font-weight: bold;
     text-align: center;
 }
 
 .card-status-idle {
-    color: gray!important;
+    color: gray !important;
     min-width: 85px;
 }
 
 .card-status-computing {
-    color: darkgreen!important;
+    color: darkgreen !important;
     min-width: 110px;
 }
 
 .card-status-awaiting-data {
-    color: blue!important;
+    color: blue !important;
     min-width: 85px;
 }
 
 .card-status-ready {
-    color: lightgreen!important;
+    color: lightgreen !important;
     min-width: 85px;
 }
 
@@ -345,7 +344,8 @@ span.name {
 </style>
 
 <template>
-    <div class="jtk-node card card-node contextmenu" v-bind:class="{ 'card-loop': n.hasLoop(), 'card-ui': n.isUI(), 'card-metanode': n.isMetanode(), 'card-input': n.isInput(), 'card-output': n.isOutput(), 'card-snapshot': n.hasSnapshot(), 'card-snapshot-idle': n.hasSnapshot() && n.isSnapshotStatus(0), 'card-snapshot-computing': n.hasSnapshot() && n.isSnapshotStatus(1), 'card-snapshot-awaiting-data': n.hasSnapshot() && n.isSnapshotStatus(2), 'card-snapshot-ready': n.hasSnapshot() && n.isSnapshotStatus(3) }" v-bind:id="getId()" v-bind:data-id="getId()" v-bind:data-name="pkg.name" style="overflow: visible;">
+    <div class="jtk-node card card-node contextmenu" v-bind:class="{ 'card-loop': n.hasLoop(), 'card-ui': n.isUI(), 'card-metanode': n.isMetanode(), 'card-input': n.isInput(), 'card-output': n.isOutput(), 'card-snapshot': n.hasSnapshot(), 'card-snapshot-idle': n.hasSnapshot() && n.isSnapshotStatus(0), 'card-snapshot-computing': n.hasSnapshot() && n.isSnapshotStatus(1), 'card-snapshot-awaiting-data': n.hasSnapshot() && n.isSnapshotStatus(2), 'card-snapshot-ready': n.hasSnapshot() && n.isSnapshotStatus(3) }"
+        v-bind:id="getId()" v-bind:data-id="getId()" v-bind:data-name="pkg.name" style="overflow: visible;">
         <div v-if="n.hasComment()">
             <div class="card-comment" data-toggle="tooltip" data-placement="top" :title="n.getComment()">
                 <i class="fas fa-comment-alt" data-container="body"></i>
@@ -393,9 +393,8 @@ span.name {
         <div class="card-top">
             <div class="d-flex">
                 <span class="title" style="white-space: nowrap; margin-right: 5px;">
-                    <span v-if="n.isMetanode()" class="badge badge-secondary"><b>META</b></span>
-                    {{n.graphId}}
-                    <i v-if="n.isParallel()" class="fas fa-server" style="color: orange;" title="this module is computed in a web worker"></i>
+                            <span v-if="n.isMetanode()" class="badge badge-secondary"><b>META</b></span> {{n.graphId}}
+                <i v-if="n.isParallel()" class="fas fa-server" style="color: orange;" title="this module is computed in a web worker"></i>
                 </span>
 
                 <div class="ml-auto">
@@ -404,23 +403,23 @@ span.name {
             </div>
         </div>
         <div v-if="!n.isInput() && !n.isOutput()" class="card-center">
-            <hr style="margin-bottom: 5px;"/>
+            <hr style="margin-bottom: 5px;" />
             <div class="dualbox-io" style="overflow: visible;">
                 <div class="inputs" style="display: inline-block; float: left;">
                     <div class="box-inputs">
                         <div class="types">
                             <span class="type" v-for="key in getVisibleInputs()" v-bind:data-key="key">
-                                {{ n.getInputType(key) }}
-                            </span>
+                                        {{ n.getInputType(key) }}
+                                    </span>
                         </div>
                         <div class="points">
                             <div class="point" v-for="key in getVisibleInputs()" v-bind:data-key="key" v-bind:data-type="n.getInputDef(key).type" v-html="point"></div>
                         </div>
                         <div class="names">
                             <span class="name" v-for="key in getVisibleInputs()" :class="{'feedback': n.isFeedbackTarget(key), 'input-not-resolvable': !example && !n.isInputResolvable(key) }" v-bind:data-input="key">
-                                <span v-if="n.hasIterator(key)">&lt;{{key}}&gt;</span>
-                                <span v-else>{{key}}</span>
-                                <small v-if="!n.isInputConst(key)" data-toggle="tooltip" data-trigger="hover" title="this value will be cloned at execution time"><i class="fas fa-clone transparent"></i></small>
+                                        <span v-if="n.hasIterator(key)">&lt;{{key}}&gt;</span>
+                            <span v-else>{{key}}</span>
+                            <small v-if="!n.isInputConst(key)" data-toggle="tooltip" data-trigger="hover" title="this value will be cloned at execution time"><i class="fas fa-clone transparent"></i></small>
                             </span>
                         </div>
                     </div>
@@ -429,13 +428,13 @@ span.name {
                     <div class="box-outputs">
                         <div class="names">
                             <span class="name" v-for="key in getVisibleOutputs()" v-bind:class="{feedback: n.isFeedbackTarget(key)}" v-bind:data-output="key">
-                                <span v-if="n.hasLoop() && n.hasFeedback(key)">{{key}}</span>
-                                <span v-else-if="n.hasLoop() && !n.hasFeedback(key)">&lt;{{key}}&gt;</span>
-                                <span v-else>{{key}}</span>
+                                        <span v-if="n.hasLoop() && n.hasFeedback(key)">{{key}}</span>
+                            <span v-else-if="n.hasLoop() && !n.hasFeedback(key)">&lt;{{key}}&gt;</span>
+                            <span v-else>{{key}}</span>
 
-                                <span v-if="n.hasCacheActivated()">
-                                    &nbsp;<i class="fa fa-hdd" title="This module has cache activated"></i>
-                                </span>
+                            <span v-if="n.hasCacheActivated()">
+                                            &nbsp;<i class="fa fa-hdd" title="This module has cache activated"></i>
+                                        </span>
                             </span>
                         </div>
                         <div class="points">
@@ -443,15 +442,15 @@ span.name {
                         </div>
                         <div class="types">
                             <span class="type" v-for="key in getVisibleOutputs()" v-bind:data-key="key">
-                                {{ n.getOutputType(key) }}
-                            </span>
+                                        {{ n.getOutputType(key) }}
+                                    </span>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
 
-        <hr style="margin-top: 5px;"/>
+        <hr style="margin-top: 5px;" />
         <div class="card-bottom">
             <span class="subtitle">{{ shortName }}</span>
 
@@ -460,8 +459,8 @@ span.name {
             </div>
 
             <!--
-                <div v-if="n.isUI()" class="event-dock event-dock-bottom"></div>
-            -->
+                        <div v-if="n.isUI()" class="event-dock event-dock-bottom"></div>
+                    -->
         </div>
     </div>
 </template>
@@ -476,25 +475,24 @@ $.fn.fixCardDisplay = function() {
     var offsetPoint = 12;
     var offsetBorder = parseInt($(this).css("border-top-width"));
 
-    if( $(this).find('.box-inputs').height() === 0 && $(this).find('.box-outputs').height() === 0 ) {
+    if ($(this).find('.box-inputs').height() === 0 && $(this).find('.box-outputs').height() === 0) {
         // if this card has no input/output, remove the card center
         $(this).find('.card-center').remove();
-    }
-    else {
+    } else {
         // else, adjust the input/output display for endpoints
         // 1) translate inputs by the right amount of pixels to have the circle on the line
         var boxInputs = $(this).find('.box-inputs');
 
         // fix css names width
         var namesDiv = boxInputs.find('.names');
-        namesDiv.css('width', (namesDiv.width()+1) + 'px');
+        namesDiv.css('width', (namesDiv.width() + 1) + 'px');
 
         // translate inputs to the left
-        var translateLeft = boxInputs.find('.types').width() + offsetPoint + offsetBorder/2;
+        var translateLeft = boxInputs.find('.types').width() + offsetPoint + offsetBorder / 2;
         $(this).find('.box-inputs').css('transform', 'translateX(-' + translateLeft + 'px)');
 
         // adjust inputs main div width
-        $(this).find('.inputs').width( $(this).find('.inputs').width() - translateLeft + 10 /* margin */ );
+        $(this).find('.inputs').width($(this).find('.inputs').width() - translateLeft + 10 /* margin */ );
 
 
         // 2) translate outputs by the right amount of pixels to have the circle on the line
@@ -505,11 +503,11 @@ $.fn.fixCardDisplay = function() {
         namesDiv.css('width', (namesDiv.width() + 1) + 'px');
 
         // translate inputs to the right
-        var translateRight = boxOutputs.find('.types').width() + offsetPoint + offsetBorder/2;
+        var translateRight = boxOutputs.find('.types').width() + offsetPoint + offsetBorder / 2;
         $(this).find('.box-outputs').css('transform', 'translateX(' + translateRight + 'px)');
 
         // adjust output main div width
-        $(this).find('.outputs').width( $(this).find('.outputs').width() - translateRight + 10 /* margin */ );
+        $(this).find('.outputs').width($(this).find('.outputs').width() - translateRight + 10 /* margin */ );
 
         // fix io width
         //$('.dualbox-io').css('width', (($(this).find('.inputs').width() + $(this).find('.outputs').width()) + "px"));
@@ -527,25 +525,25 @@ $.fn.fixWidth = function() {
 }
 
 // find position of element relative to an ancestor matching selector
-$.fn.positionFrom = function( selector ) {
+$.fn.positionFrom = function(selector) {
     var ancestor = $(this).closest(selector);
     var offset = $(this).offset();
     var ancestorOffset = ancestor.offset();
     return {
-        top:  offset.top - ancestorOffset.top,
+        top: offset.top - ancestorOffset.top,
         left: offset.left - ancestorOffset.left,
     }
 }
 
 export default {
     props: [
-        "id",     // the module id
-        "pkg",    // the module package.json
-        "n",      // the GraphNode object (from model)
+        "id", // the module id
+        "pkg", // the module package.json
+        "n", // the GraphNode object (from model)
         "example", // true if this vue is used as an example display (no need to connect)
         "displayEvents", // true if events should be displayed
     ],
-    data: function () {
+    data: function() {
         return {
             shortName: "",
             point: '<svg width="14" height="14" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="7" cy="7" r="5" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#ffffff" stroke="#727272" style="" stroke-width="2"></circle></svg>',
@@ -555,7 +553,8 @@ export default {
         //console.log('[UPDATING] ' + this.n.getUniqId());
     },
     destroyed: function() {
-        //console.log('[DESTROYED] ' + this.n.getUniqId());
+        this.deactivateTooltip();
+        $('.tooltip').remove();
     },
     created: function() {
         this.initialized = false;
@@ -563,10 +562,9 @@ export default {
 
         //console.log('[CREATED] ' + this.n.getUniqId());
         // We compute the shortname of our box
-        if( this.n.isInput() || this.n.isOutput() ) {
+        if (this.n.isInput() || this.n.isOutput()) {
             this.shortName = this.n.getType();
-        }
-        else {
+        } else {
             this.shortName = dbutils.shortName(this.pkg.name);
         }
     },
@@ -576,7 +574,7 @@ export default {
         div.fixCardDisplay();
         div.ready(() => {
             //if( !this.example ) {
-                div.fixWidth();
+            div.fixWidth();
             //}
         });
         this.activateTooltip();
@@ -593,7 +591,7 @@ export default {
         this.assignContextMenu();
 
         $(this.$el).fixCardDisplay();
-        $(this.$el).ready(()=>{
+        $(this.$el).ready(() => {
             $(this.$el).fixWidth();
             this.activateTooltip();
         });
@@ -628,11 +626,11 @@ export default {
 
             this.initialized = false;
 
-            if( !this.example ) {
+            if (!this.example) {
                 // if we have a position, set it
                 var def = this.n.getDef();
                 var position = _.get(def, ["graph", "position"]);
-                if( position ) {
+                if (position) {
                     var jsPlumbElement = self.$parent.jsPlumbInstance.getElement(id);
                     self.$parent.jsPlumbInstance.setPosition(jsPlumbElement, position);
                 }
@@ -640,7 +638,7 @@ export default {
                 // This needs to be registered before draggable
                 div.on('mousedown', function(e) {
                     // if this div is not selected already, deselect the other divs
-                    if( !self.$parent.selector.isSelected(this) ) {
+                    if (!self.$parent.selector.isSelected(this)) {
                         self.$parent.selector.deselect();
                     }
                 });
@@ -648,7 +646,7 @@ export default {
                 await this.initializeJsPlumb();
 
                 div.click(function(e) {
-                    if( e.ctrlKey ) {
+                    if (e.ctrlKey) {
                         view.selector.toggleSelection(this);
                     }
                 });
@@ -671,29 +669,29 @@ export default {
             var id = this.getId();
             var view = this.view;
 
-            if( !this.example ) {
+            if (!this.example) {
                 // If this node was never initialized in this jsplumb instance, do it
-                if( !_.get(this.$parent.jsPlumbInstance, ["initializedNodes", id]) ) {
+                if (!_.get(this.$parent.jsPlumbInstance, ["initializedNodes", id])) {
                     _.set(this.$parent.jsPlumbInstance, ["initializedNodes", id], true); // initialized
 
-                    if( this.n.isInput() || this.n.isOutput() ) {
+                    if (this.n.isInput() || this.n.isOutput()) {
                         var type = "*";
                         var input = "value";
                         var output = "value";
-                        var offsetTop = $(div).find('.card-top').height() + 12 /* hr size */  - 3;
-
-                        var uuid = [ id, "input",  input].join('#');
-                        var ep = this.$parent.jsPlumbInstance.addEndpoint(id,  {
-                            isSource : false,
-                            isTarget : true,
-                            uuid     : uuid,
-                            anchor   : [0,0,-1,0,0,offsetTop],
-                            maxConnections : 1,
-                            parameters : {
+                        var offsetTop = $(div).find('.card-top').height() + 12 /* hr size */ - 3;
+
+                        var uuid = [id, "input", input].join('#');
+                        var ep = this.$parent.jsPlumbInstance.addEndpoint(id, {
+                            isSource: false,
+                            isTarget: true,
+                            uuid: uuid,
+                            anchor: [0, 0, -1, 0, 0, offsetTop],
+                            maxConnections: 1,
+                            parameters: {
                                 type: "data",
-                                target : {
-                                    id  : id,
-                                    input : output
+                                target: {
+                                    id: id,
+                                    input: output
                                 }
                             }
                         }, this.$parent.style.inputEndpoint);
@@ -715,27 +713,25 @@ export default {
                         // bind context menu to the endpoint
                         $(ep.canvas).addClass('capture-right-click');
                         $(ep.canvas).ready(function() {
-                            var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='"+id.trim()+"'][data-input='" + input + "']", [
-                                {
-                                    name: 'Create input for here',
-                                    fn: () => {
-                                        view.c.createInputFromConnection(id, input);
-                                    }
-                                },
-                            ]);
+                            var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='" + id.trim() + "'][data-input='" + input + "']", [{
+                                name: 'Create input for here',
+                                fn: () => {
+                                    view.c.createInputFromConnection(id, input);
+                                }
+                            }, ]);
                         });
 
-                        var uuid = [ id, "output", output].join('#');
+                        var uuid = [id, "output", output].join('#');
                         var ep = this.$parent.jsPlumbInstance.addEndpoint(id, {
-                            isSource : true,
-                            isTarget : false,
-                            uuid     : uuid,
-                            anchor   : [1,0,1,0,0,offsetTop],
-                            parameters : {
+                            isSource: true,
+                            isTarget: false,
+                            uuid: uuid,
+                            anchor: [1, 0, 1, 0, 0, offsetTop],
+                            parameters: {
                                 type: "data",
-                                source : {
-                                    id  : id,
-                                    output : output
+                                source: {
+                                    id: id,
+                                    output: output
                                 }
                             }
                         }, this.$parent.style.outputEndpoint);
@@ -757,37 +753,34 @@ export default {
                         // bind context menu to the endpoint
                         $(ep.canvas).addClass('capture-right-click');
                         $(ep.canvas).ready(function() {
-                            var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='"+id.trim()+"'][data-output='" + output.trim() + "']", [
-                                {
-                                    name: 'Create output for here',
-                                    fn: () => {
-                                        view.c.createOutputFromConnection(id, output);
-                                    }
-                                },
-                            ]);
+                            var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='" + id.trim() + "'][data-output='" + output.trim() + "']", [{
+                                name: 'Create output for here',
+                                fn: () => {
+                                    view.c.createOutputFromConnection(id, output);
+                                }
+                            }, ]);
                         });
-                    }
-                    else {
+                    } else {
                         // add input endoints
-                        div.find('.box-inputs').find('.point').each( function(index) {
+                        div.find('.box-inputs').find('.point').each(function(index) {
                             $(this).css('visibility', 'hidden').css('opacity', '0'); // replaced by jsPlumb point
 
                             var input = div.find('.box-inputs').find('.name').eq(index).attr('data-input').trim();
                             var type = view.m.getNode(id).getInputType(input);
 
-                            var offsetTop = $(this).positionFrom('.card').top + $(this).height()/2 - 3;
-                            var uuid = [ id, "input",  $(this).data('key')].join('#');
-                            var ep = self.$parent.jsPlumbInstance.addEndpoint(id,  {
-                                isSource : false,
-                                isTarget : true,
-                                uuid     : uuid,
-                                anchor   : [0,0,-1,0,0,offsetTop],
-                                maxConnections : 1,
-                                parameters : {
+                            var offsetTop = $(this).positionFrom('.card').top + $(this).height() / 2 - 3;
+                            var uuid = [id, "input", $(this).data('key')].join('#');
+                            var ep = self.$parent.jsPlumbInstance.addEndpoint(id, {
+                                isSource: false,
+                                isTarget: true,
+                                uuid: uuid,
+                                anchor: [0, 0, -1, 0, 0, offsetTop],
+                                maxConnections: 1,
+                                parameters: {
                                     type: "data",
-                                    target : {
-                                        id  : id,
-                                        input : $(this).data('key')
+                                    target: {
+                                        id: id,
+                                        input: $(this).data('key')
                                     }
                                 }
                             }, self.$parent.style.inputEndpoint);
@@ -808,36 +801,34 @@ export default {
                             // bind context menu to the endpoint
                             $(ep.canvas).addClass('capture-right-click');
                             $(ep.canvas).ready(function() {
-                                var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='"+id.trim()+"'][data-input='" + input.trim() + "']", [
-                                    {
-                                        name: 'Create input for here',
-                                        fn: () => {
-                                            view.c.createInputFromConnection(id, input);
-                                        }
-                                    },
-                                ]);
+                                var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='" + id.trim() + "'][data-input='" + input.trim() + "']", [{
+                                    name: 'Create input for here',
+                                    fn: () => {
+                                        view.c.createInputFromConnection(id, input);
+                                    }
+                                }, ]);
                             });
                         });
 
                         // add output endpoints
-                        div.find('.box-outputs').find('.point').each( function(index) {
+                        div.find('.box-outputs').find('.point').each(function(index) {
                             $(this).css('visibility', 'hidden').css('opacity', '0'); // replaced by jsPlumb point
 
                             var output = div.find('.box-outputs').find('.name').eq(index).attr('data-output').trim();
                             var type = view.m.getNode(id).getOutputType(output);
 
-                            var offsetTop = $(this).positionFrom('.card').top + $(this).height()/2 - 3;
-                            var uuid = [ id, "output", $(this).data('key')].join('#');
+                            var offsetTop = $(this).positionFrom('.card').top + $(this).height() / 2 - 3;
+                            var uuid = [id, "output", $(this).data('key')].join('#');
                             var ep = self.$parent.jsPlumbInstance.addEndpoint(id, {
-                                isSource : true,
-                                isTarget : false,
-                                uuid     : uuid,
-                                anchor   : [1,0,1,0,0,offsetTop],
-                                parameters : {
+                                isSource: true,
+                                isTarget: false,
+                                uuid: uuid,
+                                anchor: [1, 0, 1, 0, 0, offsetTop],
+                                parameters: {
                                     type: "data",
-                                    source : {
-                                        id  : id,
-                                        output : $(this).data('key')
+                                    source: {
+                                        id: id,
+                                        output: $(this).data('key')
                                     }
                                 }
                             }, self.$parent.style.outputEndpoint);
@@ -858,47 +849,45 @@ export default {
                             // bind context menu to the endpoint
                             $(ep.canvas).addClass('capture-right-click');
                             $(ep.canvas).ready(function() {
-                                var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='"+id.trim()+"'][data-output='" + output.trim() + "']", [
-                                    {
-                                        name: 'Create output for here',
-                                        fn: () => {
-                                            view.c.createOutputFromConnection(id, output);
-                                        }
-                                    },
-                                ]);
+                                var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='" + id.trim() + "'][data-output='" + output.trim() + "']", [{
+                                    name: 'Create output for here',
+                                    fn: () => {
+                                        view.c.createOutputFromConnection(id, output);
+                                    }
+                                }, ]);
                             });
                         });
 
-                        if( this.n.isUI() && this.displayEvents ) {
+                        if (this.n.isUI() && this.displayEvents) {
                             // Make this a target for events
                             this.$parent.jsPlumbInstance.makeTarget(id, {
-                                isSource:false,
-                                isTarget:true,
+                                isSource: false,
+                                isTarget: true,
                                 uniqueEndpoint: false,
-                                anchor:"Continuous",
+                                anchor: "Continuous",
                                 uuid: id + "#event-in",
-                                paintStyle:{ fill:"green", radius: 3, stroke: "#727272", strokeWidth: 1 },
+                                paintStyle: { fill: "green", radius: 3, stroke: "#727272", strokeWidth: 1 },
                                 parameters: {
                                     type: "event",
-                                    target: { "id" : id }
+                                    target: { "id": id }
                                 },
                             }, self.$parent.style.eventEndpoint);
 
                             // Create an enpoint to create a new event
-                            var ep = this.$parent.jsPlumbInstance.addEndpoint(id,  {
-                                isSource : true,
-                                isTarget : false,
-                                uuid     : id + "#event-out",
-                                anchor   : [1, 1, 0, 1, 0, -10],
-                                parameters : {
+                            var ep = this.$parent.jsPlumbInstance.addEndpoint(id, {
+                                isSource: true,
+                                isTarget: false,
+                                uuid: id + "#event-out",
+                                anchor: [1, 1, 0, 1, 0, -10],
+                                parameters: {
                                     type: "event",
-                                    source: { "id" : id }
+                                    source: { "id": id }
                                 },
-                                paintStyle:{ fill:"green", radius: 3, stroke: "#727272", strokeWidth: 1 },
+                                paintStyle: { fill: "green", radius: 3, stroke: "#727272", strokeWidth: 1 },
                             }, this.$parent.style.eventEndpoint);
 
                             // Add overlay here so we don't mess with splitConnection
-                            ep.addOverlay(["PlainArrow", { width:15, length:15, location:1, id:"arrow" }]);
+                            ep.addOverlay(["PlainArrow", { width: 15, length: 15, location: 1, id: "arrow" }]);
 
                             $(ep.canvas).attr('data-toggle', "tooltip");
                             $(ep.canvas).attr('data-trigger', "hover");
@@ -925,7 +914,7 @@ export default {
                             // resize the canvas if necessary
                             self.$parent.canvasSizeHandler.debouncedResize();
 
-                            if( self.$parent.selector.isMultipleSelectionActive() ) {
+                            if (self.$parent.selector.isMultipleSelectionActive()) {
                                 // We just dropped a bunch of divs, ajust all their positions
                                 self.view.m.batch(() => {
                                     self.$parent.selector.each(div => {
@@ -933,8 +922,7 @@ export default {
                                         view.m.getNode($(div).attr('id')).setPosition(pos);
                                     });
                                 });
-                            }
-                            else {
+                            } else {
                                 // We just dropped this one, set the new position in the graph model
                                 var el = self.$parent.jsPlumbInstance.getElement(id);
                                 $(el).ready(function() {
@@ -954,15 +942,13 @@ export default {
             var id = this.getId();
 
             // Create a contextmenu for the div
-            var contextOptions = [
-                {
-                    name: 'Remove this box',
-                    fn: () => {
-                        this.view.c.removeBox(id);
-                    }
+            var contextOptions = [{
+                name: 'Remove this box',
+                fn: () => {
+                    this.view.c.removeBox(id);
                 }
-            ];
-            if( this.n.isModule() || this.n.isUI() ) {
+            }];
+            if (this.n.isModule() || this.n.isUI()) {
                 contextOptions.push({
                     name: 'Duplicate this box',
                     fn: () => {
@@ -973,7 +959,7 @@ export default {
             var nodeMenu = new ContextMenu("#" + id, contextOptions);
         },
 
-        htmlentities: function( s ) {
+        htmlentities: function(s) {
             return this.view.utils.htmlentities(s);
         },
 
@@ -1017,5 +1003,4 @@ export default {
         }
     }
 }
-
 </script>