@dualbox/editor 1.0.78 → 1.0.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/js/dist/GraphEditor.js +554 -269
- package/js/dist/GraphEditor.min.js +553 -268
- package/js/src/m/GraphModel.js +90 -21
- package/js/src/v/templates/graphNode.vue +481 -265
- package/package.json +4 -4
|
@@ -274,7 +274,8 @@ span.feedback {
|
|
|
274
274
|
color: red !important;
|
|
275
275
|
}
|
|
276
276
|
|
|
277
|
-
.card-snapshot {
|
|
277
|
+
.card-snapshot {
|
|
278
|
+
}
|
|
278
279
|
|
|
279
280
|
.card-snapshot-idle {
|
|
280
281
|
border: 2px solid gray !important;
|
|
@@ -344,8 +345,7 @@ span.name {
|
|
|
344
345
|
</style>
|
|
345
346
|
|
|
346
347
|
<template>
|
|
347
|
-
<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) }"
|
|
348
|
-
v-bind:id="getId()" v-bind:data-id="getId()" v-bind:data-name="pkg.name" style="overflow: visible;">
|
|
348
|
+
<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;">
|
|
349
349
|
<div v-if="n.hasComment()">
|
|
350
350
|
<div class="card-comment" data-toggle="tooltip" data-placement="top" :title="n.getComment()">
|
|
351
351
|
<i class="fas fa-comment-alt" data-container="body"></i>
|
|
@@ -393,8 +393,8 @@ span.name {
|
|
|
393
393
|
<div class="card-top">
|
|
394
394
|
<div class="d-flex">
|
|
395
395
|
<span class="title" style="white-space: nowrap; margin-right: 5px;">
|
|
396
|
-
|
|
397
|
-
|
|
396
|
+
<span v-if="n.isMetanode()" class="badge badge-secondary"><b>META</b></span> {{n.graphId}}
|
|
397
|
+
<i v-if="n.isParallel()" class="fas fa-server" style="color: orange;" title="this module is computed in a web worker"></i>
|
|
398
398
|
</span>
|
|
399
399
|
|
|
400
400
|
<div class="ml-auto">
|
|
@@ -409,17 +409,17 @@ span.name {
|
|
|
409
409
|
<div class="box-inputs">
|
|
410
410
|
<div class="types">
|
|
411
411
|
<span class="type" v-for="key in getVisibleInputs()" v-bind:data-key="key">
|
|
412
|
-
|
|
413
|
-
|
|
412
|
+
{{ n.getInputType(key) }}
|
|
413
|
+
</span>
|
|
414
414
|
</div>
|
|
415
415
|
<div class="points">
|
|
416
416
|
<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>
|
|
417
417
|
</div>
|
|
418
418
|
<div class="names">
|
|
419
419
|
<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">
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
420
|
+
<span v-if="n.hasIterator(key)"><{{key}}></span>
|
|
421
|
+
<span v-else>{{key}}</span>
|
|
422
|
+
<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>
|
|
423
423
|
</span>
|
|
424
424
|
</div>
|
|
425
425
|
</div>
|
|
@@ -428,13 +428,13 @@ span.name {
|
|
|
428
428
|
<div class="box-outputs">
|
|
429
429
|
<div class="names">
|
|
430
430
|
<span class="name" v-for="key in getVisibleOutputs()" v-bind:class="{feedback: n.isFeedbackTarget(key)}" v-bind:data-output="key">
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
431
|
+
<span v-if="n.hasLoop() && n.hasFeedback(key)">{{key}}</span>
|
|
432
|
+
<span v-else-if="n.hasLoop() && !n.hasFeedback(key)"><{{key}}></span>
|
|
433
|
+
<span v-else>{{key}}</span>
|
|
434
434
|
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
435
|
+
<span v-if="n.hasCacheActivated()">
|
|
436
|
+
<i class="fa fa-hdd" title="This module has cache activated"></i>
|
|
437
|
+
</span>
|
|
438
438
|
</span>
|
|
439
439
|
</div>
|
|
440
440
|
<div class="points">
|
|
@@ -442,8 +442,8 @@ span.name {
|
|
|
442
442
|
</div>
|
|
443
443
|
<div class="types">
|
|
444
444
|
<span class="type" v-for="key in getVisibleOutputs()" v-bind:data-key="key">
|
|
445
|
-
|
|
446
|
-
|
|
445
|
+
{{ n.getOutputType(key) }}
|
|
446
|
+
</span>
|
|
447
447
|
</div>
|
|
448
448
|
</div>
|
|
449
449
|
</div>
|
|
@@ -466,63 +466,102 @@ span.name {
|
|
|
466
466
|
</template>
|
|
467
467
|
|
|
468
468
|
<script>
|
|
469
|
-
import ContextMenu from
|
|
470
|
-
import _ from
|
|
471
|
-
import dbutils from
|
|
469
|
+
import ContextMenu from "../ContextMenu";
|
|
470
|
+
import _ from "lodash-es";
|
|
471
|
+
import dbutils from "../../m/DualboxUtils";
|
|
472
472
|
|
|
473
473
|
// fix inputs types and output types position relatively to the div
|
|
474
474
|
$.fn.fixCardDisplay = function() {
|
|
475
475
|
var offsetPoint = 12;
|
|
476
476
|
var offsetBorder = parseInt($(this).css("border-top-width"));
|
|
477
477
|
|
|
478
|
-
if
|
|
478
|
+
// if we have width or height set to 0, we are not ready yet to
|
|
479
|
+
// execute this function. Postpone it.
|
|
480
|
+
if( $(this).width() === 0 || $(this).height() === 0 ) {
|
|
481
|
+
setTimeout(() => {
|
|
482
|
+
$(this).fixCardDisplay();
|
|
483
|
+
}, 50);
|
|
484
|
+
return;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
if (
|
|
488
|
+
$(this)
|
|
489
|
+
.find(".box-inputs")
|
|
490
|
+
.height() === 0 &&
|
|
491
|
+
$(this)
|
|
492
|
+
.find(".box-outputs")
|
|
493
|
+
.height() === 0
|
|
494
|
+
) {
|
|
479
495
|
// if this card has no input/output, remove the card center
|
|
480
|
-
$(this)
|
|
496
|
+
$(this)
|
|
497
|
+
.find(".card-center")
|
|
498
|
+
.remove();
|
|
481
499
|
} else {
|
|
482
500
|
// else, adjust the input/output display for endpoints
|
|
483
501
|
// 1) translate inputs by the right amount of pixels to have the circle on the line
|
|
484
|
-
var boxInputs = $(this).find(
|
|
502
|
+
var boxInputs = $(this).find(".box-inputs");
|
|
485
503
|
|
|
486
504
|
// fix css names width
|
|
487
|
-
var namesDiv = boxInputs.find(
|
|
488
|
-
namesDiv.css(
|
|
505
|
+
var namesDiv = boxInputs.find(".names");
|
|
506
|
+
namesDiv.css("width", namesDiv.width() + 1 + "px");
|
|
489
507
|
|
|
490
508
|
// translate inputs to the left
|
|
491
|
-
var translateLeft =
|
|
492
|
-
|
|
509
|
+
var translateLeft =
|
|
510
|
+
boxInputs.find(".types").width() + offsetPoint + offsetBorder / 2;
|
|
511
|
+
$(this)
|
|
512
|
+
.find(".box-inputs")
|
|
513
|
+
.css("transform", "translateX(-" + translateLeft + "px)");
|
|
493
514
|
|
|
494
515
|
// adjust inputs main div width
|
|
495
|
-
$(this)
|
|
496
|
-
|
|
516
|
+
$(this)
|
|
517
|
+
.find(".inputs")
|
|
518
|
+
.width(
|
|
519
|
+
$(this)
|
|
520
|
+
.find(".inputs")
|
|
521
|
+
.width() -
|
|
522
|
+
translateLeft +
|
|
523
|
+
10 /* margin */
|
|
524
|
+
);
|
|
497
525
|
|
|
498
526
|
// 2) translate outputs by the right amount of pixels to have the circle on the line
|
|
499
|
-
var boxOutputs = $(this).find(
|
|
527
|
+
var boxOutputs = $(this).find(".box-outputs");
|
|
500
528
|
|
|
501
529
|
// fix css names with
|
|
502
|
-
var namesDiv = boxOutputs.find(
|
|
503
|
-
namesDiv.css(
|
|
530
|
+
var namesDiv = boxOutputs.find(".names");
|
|
531
|
+
namesDiv.css("width", namesDiv.width() + 1 + "px");
|
|
504
532
|
|
|
505
533
|
// translate inputs to the right
|
|
506
|
-
var translateRight =
|
|
507
|
-
|
|
534
|
+
var translateRight =
|
|
535
|
+
boxOutputs.find(".types").width() + offsetPoint + offsetBorder / 2;
|
|
536
|
+
$(this)
|
|
537
|
+
.find(".box-outputs")
|
|
538
|
+
.css("transform", "translateX(" + translateRight + "px)");
|
|
508
539
|
|
|
509
540
|
// adjust output main div width
|
|
510
|
-
$(this)
|
|
541
|
+
$(this)
|
|
542
|
+
.find(".outputs")
|
|
543
|
+
.width(
|
|
544
|
+
$(this)
|
|
545
|
+
.find(".outputs")
|
|
546
|
+
.width() -
|
|
547
|
+
translateRight +
|
|
548
|
+
10 /* margin */
|
|
549
|
+
);
|
|
511
550
|
|
|
512
551
|
// fix io width
|
|
513
552
|
//$('.dualbox-io').css('width', (($(this).find('.inputs').width() + $(this).find('.outputs').width()) + "px"));
|
|
514
553
|
}
|
|
515
|
-
}
|
|
516
554
|
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
}
|
|
555
|
+
$(this).ready(() => {
|
|
556
|
+
// take the current width and add it as a css property
|
|
557
|
+
var width = $(this).width();
|
|
558
|
+
width += parseInt($(this).css("padding-right"));
|
|
559
|
+
width += parseInt($(this).css("padding-left"));
|
|
560
|
+
width += parseInt($(this).css("border-left-width"));
|
|
561
|
+
width += parseInt($(this).css("border-right-width"));
|
|
562
|
+
$(this).css("width", Math.ceil(width) + "px");
|
|
563
|
+
});
|
|
564
|
+
};
|
|
526
565
|
|
|
527
566
|
// find position of element relative to an ancestor matching selector
|
|
528
567
|
$.fn.positionFrom = function(selector) {
|
|
@@ -531,9 +570,9 @@ $.fn.positionFrom = function(selector) {
|
|
|
531
570
|
var ancestorOffset = ancestor.offset();
|
|
532
571
|
return {
|
|
533
572
|
top: offset.top - ancestorOffset.top,
|
|
534
|
-
left: offset.left - ancestorOffset.left
|
|
535
|
-
}
|
|
536
|
-
}
|
|
573
|
+
left: offset.left - ancestorOffset.left
|
|
574
|
+
};
|
|
575
|
+
};
|
|
537
576
|
|
|
538
577
|
export default {
|
|
539
578
|
props: [
|
|
@@ -541,20 +580,21 @@ export default {
|
|
|
541
580
|
"pkg", // the module package.json
|
|
542
581
|
"n", // the GraphNode object (from model)
|
|
543
582
|
"example", // true if this vue is used as an example display (no need to connect)
|
|
544
|
-
"displayEvents"
|
|
583
|
+
"displayEvents" // true if events should be displayed
|
|
545
584
|
],
|
|
546
585
|
data: function() {
|
|
547
586
|
return {
|
|
548
587
|
shortName: "",
|
|
549
|
-
point:
|
|
550
|
-
|
|
588
|
+
point:
|
|
589
|
+
'<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>'
|
|
590
|
+
};
|
|
551
591
|
},
|
|
552
592
|
beforeUpdate: function() {
|
|
553
593
|
//console.log('[UPDATING] ' + this.n.getUniqId());
|
|
554
594
|
},
|
|
555
595
|
destroyed: function() {
|
|
556
596
|
this.deactivateTooltip();
|
|
557
|
-
$(
|
|
597
|
+
$(".tooltip").remove();
|
|
558
598
|
},
|
|
559
599
|
created: function() {
|
|
560
600
|
this.initialized = false;
|
|
@@ -572,11 +612,6 @@ export default {
|
|
|
572
612
|
//console.log('[MOUNTED] ' + this.n.getUniqId());
|
|
573
613
|
var div = $(this.$el);
|
|
574
614
|
div.fixCardDisplay();
|
|
575
|
-
div.ready(() => {
|
|
576
|
-
//if( !this.example ) {
|
|
577
|
-
div.fixWidth();
|
|
578
|
-
//}
|
|
579
|
-
});
|
|
580
615
|
this.activateTooltip();
|
|
581
616
|
return await this.initialize();
|
|
582
617
|
},
|
|
@@ -592,7 +627,6 @@ export default {
|
|
|
592
627
|
|
|
593
628
|
$(this.$el).fixCardDisplay();
|
|
594
629
|
$(this.$el).ready(() => {
|
|
595
|
-
$(this.$el).fixWidth();
|
|
596
630
|
this.activateTooltip();
|
|
597
631
|
});
|
|
598
632
|
return await this.initialize();
|
|
@@ -607,15 +641,19 @@ export default {
|
|
|
607
641
|
getId: function() {
|
|
608
642
|
// if this is an example graphNode, change our "id" to "id-junk"
|
|
609
643
|
// to avoid connection jsplumb conflicts with the real node
|
|
610
|
-
return this.example ? this.id +
|
|
644
|
+
return this.example ? this.id + "-junk" : this.id;
|
|
611
645
|
},
|
|
612
646
|
|
|
613
647
|
activateTooltip: function() {
|
|
614
|
-
$(this.$el)
|
|
648
|
+
$(this.$el)
|
|
649
|
+
.find('[data-toggle="tooltip"]')
|
|
650
|
+
.tooltip();
|
|
615
651
|
},
|
|
616
652
|
|
|
617
653
|
deactivateTooltip: function() {
|
|
618
|
-
$(this.$el)
|
|
654
|
+
$(this.$el)
|
|
655
|
+
.find('[data-toggle="tooltip"]')
|
|
656
|
+
.tooltip("dispose");
|
|
619
657
|
},
|
|
620
658
|
|
|
621
659
|
initialize: async function() {
|
|
@@ -631,12 +669,17 @@ export default {
|
|
|
631
669
|
var def = this.n.getDef();
|
|
632
670
|
var position = _.get(def, ["graph", "position"]);
|
|
633
671
|
if (position) {
|
|
634
|
-
var jsPlumbElement = self.$parent.jsPlumbInstance.getElement(
|
|
635
|
-
|
|
672
|
+
var jsPlumbElement = self.$parent.jsPlumbInstance.getElement(
|
|
673
|
+
id
|
|
674
|
+
);
|
|
675
|
+
self.$parent.jsPlumbInstance.setPosition(
|
|
676
|
+
jsPlumbElement,
|
|
677
|
+
position
|
|
678
|
+
);
|
|
636
679
|
}
|
|
637
680
|
|
|
638
681
|
// This needs to be registered before draggable
|
|
639
|
-
div.on(
|
|
682
|
+
div.on("mousedown", function(e) {
|
|
640
683
|
// if this div is not selected already, deselect the other divs
|
|
641
684
|
if (!self.$parent.selector.isSelected(this)) {
|
|
642
685
|
self.$parent.selector.deselect();
|
|
@@ -671,106 +714,33 @@ export default {
|
|
|
671
714
|
|
|
672
715
|
if (!this.example) {
|
|
673
716
|
// If this node was never initialized in this jsplumb instance, do it
|
|
674
|
-
if (
|
|
675
|
-
_.
|
|
717
|
+
if (
|
|
718
|
+
!_.get(this.$parent.jsPlumbInstance, [
|
|
719
|
+
"initializedNodes",
|
|
720
|
+
id
|
|
721
|
+
])
|
|
722
|
+
) {
|
|
723
|
+
_.set(
|
|
724
|
+
this.$parent.jsPlumbInstance,
|
|
725
|
+
["initializedNodes", id],
|
|
726
|
+
true
|
|
727
|
+
); // initialized
|
|
676
728
|
|
|
677
729
|
if (this.n.isInput() || this.n.isOutput()) {
|
|
678
730
|
var type = "*";
|
|
679
731
|
var input = "value";
|
|
680
732
|
var output = "value";
|
|
681
|
-
var offsetTop =
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
target: {
|
|
693
|
-
id: id,
|
|
694
|
-
input: output
|
|
695
|
-
}
|
|
696
|
-
}
|
|
697
|
-
}, this.$parent.style.inputEndpoint);
|
|
698
|
-
|
|
699
|
-
// add data to the endpoint div so we can identify it easier
|
|
700
|
-
$(ep.canvas).attr('data-node', id);
|
|
701
|
-
$(ep.canvas).attr('data-type', 'input');
|
|
702
|
-
$(ep.canvas).attr('data-input', input);
|
|
703
|
-
|
|
704
|
-
// bind tooltip
|
|
705
|
-
$(ep.canvas).attr('data-toggle', "tooltip");
|
|
706
|
-
$(ep.canvas).attr('data-trigger', "hover");
|
|
707
|
-
$(ep.canvas).attr('data-placement', "left");
|
|
708
|
-
$(ep.canvas).attr('data-html', "true");
|
|
709
|
-
var inputType = view.m.getNode(id).getInputType("value");
|
|
710
|
-
$(ep.canvas).attr('title', "Type: <b>" + inputType + "</b>");
|
|
711
|
-
$(ep.canvas).tooltip();
|
|
712
|
-
|
|
713
|
-
// bind context menu to the endpoint
|
|
714
|
-
$(ep.canvas).addClass('capture-right-click');
|
|
715
|
-
$(ep.canvas).ready(function() {
|
|
716
|
-
var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='" + id.trim() + "'][data-input='" + input + "']", [{
|
|
717
|
-
name: 'Create input for here',
|
|
718
|
-
fn: () => {
|
|
719
|
-
view.c.createInputFromConnection(id, input);
|
|
720
|
-
}
|
|
721
|
-
}, ]);
|
|
722
|
-
});
|
|
723
|
-
|
|
724
|
-
var uuid = [id, "output", output].join('#');
|
|
725
|
-
var ep = this.$parent.jsPlumbInstance.addEndpoint(id, {
|
|
726
|
-
isSource: true,
|
|
727
|
-
isTarget: false,
|
|
728
|
-
uuid: uuid,
|
|
729
|
-
anchor: [1, 0, 1, 0, 0, offsetTop],
|
|
730
|
-
parameters: {
|
|
731
|
-
type: "data",
|
|
732
|
-
source: {
|
|
733
|
-
id: id,
|
|
734
|
-
output: output
|
|
735
|
-
}
|
|
736
|
-
}
|
|
737
|
-
}, this.$parent.style.outputEndpoint);
|
|
738
|
-
|
|
739
|
-
// add data to the endpoint div so we can identify it easier
|
|
740
|
-
$(ep.canvas).attr('data-node', id);
|
|
741
|
-
$(ep.canvas).attr('data-type', "output");
|
|
742
|
-
$(ep.canvas).attr('data-output', output);
|
|
743
|
-
|
|
744
|
-
// bind tooltip
|
|
745
|
-
$(ep.canvas).attr('data-toggle', "tooltip");
|
|
746
|
-
$(ep.canvas).attr('data-trigger', "hover");
|
|
747
|
-
$(ep.canvas).attr('data-placement', "right");
|
|
748
|
-
$(ep.canvas).attr('data-html', "true");
|
|
749
|
-
var outputType = view.m.getNode(id).getOutputType("value");
|
|
750
|
-
$(ep.canvas).attr('title', "Type: <b>" + outputType + "</b>");
|
|
751
|
-
$(ep.canvas).tooltip();
|
|
752
|
-
|
|
753
|
-
// bind context menu to the endpoint
|
|
754
|
-
$(ep.canvas).addClass('capture-right-click');
|
|
755
|
-
$(ep.canvas).ready(function() {
|
|
756
|
-
var menu = new ContextMenu(".jtk-endpoint-anchor[data-node='" + id.trim() + "'][data-output='" + output.trim() + "']", [{
|
|
757
|
-
name: 'Create output for here',
|
|
758
|
-
fn: () => {
|
|
759
|
-
view.c.createOutputFromConnection(id, output);
|
|
760
|
-
}
|
|
761
|
-
}, ]);
|
|
762
|
-
});
|
|
763
|
-
} else {
|
|
764
|
-
// add input endoints
|
|
765
|
-
div.find('.box-inputs').find('.point').each(function(index) {
|
|
766
|
-
$(this).css('visibility', 'hidden').css('opacity', '0'); // replaced by jsPlumb point
|
|
767
|
-
|
|
768
|
-
var input = div.find('.box-inputs').find('.name').eq(index).attr('data-input').trim();
|
|
769
|
-
var type = view.m.getNode(id).getInputType(input);
|
|
770
|
-
|
|
771
|
-
var offsetTop = $(this).positionFrom('.card').top + $(this).height() / 2 - 3;
|
|
772
|
-
var uuid = [id, "input", $(this).data('key')].join('#');
|
|
773
|
-
var ep = self.$parent.jsPlumbInstance.addEndpoint(id, {
|
|
733
|
+
var offsetTop =
|
|
734
|
+
$(div)
|
|
735
|
+
.find(".card-top")
|
|
736
|
+
.height() +
|
|
737
|
+
12 /* hr size */ -
|
|
738
|
+
3;
|
|
739
|
+
|
|
740
|
+
var uuid = [id, "input", input].join("#");
|
|
741
|
+
var ep = this.$parent.jsPlumbInstance.addEndpoint(
|
|
742
|
+
id,
|
|
743
|
+
{
|
|
774
744
|
isSource: false,
|
|
775
745
|
isTarget: true,
|
|
776
746
|
uuid: uuid,
|
|
@@ -780,46 +750,59 @@ export default {
|
|
|
780
750
|
type: "data",
|
|
781
751
|
target: {
|
|
782
752
|
id: id,
|
|
783
|
-
input:
|
|
753
|
+
input: output
|
|
784
754
|
}
|
|
785
755
|
}
|
|
786
|
-
},
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
$(ep.canvas).attr('data-node', id);
|
|
790
|
-
$(ep.canvas).attr('data-type', 'input');
|
|
791
|
-
$(ep.canvas).attr('data-input', input);
|
|
792
|
-
|
|
793
|
-
// bind tooltip
|
|
794
|
-
$(ep.canvas).attr('data-toggle', "tooltip");
|
|
795
|
-
$(ep.canvas).attr('data-trigger', "hover");
|
|
796
|
-
$(ep.canvas).attr('data-placement', "left");
|
|
797
|
-
$(ep.canvas).attr('data-html', "true");
|
|
798
|
-
$(ep.canvas).attr('title', "Type: <b>" + type + "</b>");
|
|
799
|
-
$(ep.canvas).tooltip();
|
|
756
|
+
},
|
|
757
|
+
this.$parent.style.inputEndpoint
|
|
758
|
+
);
|
|
800
759
|
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
name: 'Create input for here',
|
|
806
|
-
fn: () => {
|
|
807
|
-
view.c.createInputFromConnection(id, input);
|
|
808
|
-
}
|
|
809
|
-
}, ]);
|
|
810
|
-
});
|
|
811
|
-
});
|
|
760
|
+
// add data to the endpoint div so we can identify it easier
|
|
761
|
+
$(ep.canvas).attr("data-node", id);
|
|
762
|
+
$(ep.canvas).attr("data-type", "input");
|
|
763
|
+
$(ep.canvas).attr("data-input", input);
|
|
812
764
|
|
|
813
|
-
//
|
|
814
|
-
|
|
815
|
-
|
|
765
|
+
// bind tooltip
|
|
766
|
+
$(ep.canvas).attr("data-toggle", "tooltip");
|
|
767
|
+
$(ep.canvas).attr("data-trigger", "hover");
|
|
768
|
+
$(ep.canvas).attr("data-placement", "left");
|
|
769
|
+
$(ep.canvas).attr("data-html", "true");
|
|
770
|
+
var inputType = view.m
|
|
771
|
+
.getNode(id)
|
|
772
|
+
.getInputType("value");
|
|
773
|
+
$(ep.canvas).attr(
|
|
774
|
+
"title",
|
|
775
|
+
"Type: <b>" + inputType + "</b>"
|
|
776
|
+
);
|
|
777
|
+
$(ep.canvas).tooltip();
|
|
816
778
|
|
|
817
|
-
|
|
818
|
-
|
|
779
|
+
// bind context menu to the endpoint
|
|
780
|
+
$(ep.canvas).addClass("capture-right-click");
|
|
781
|
+
$(ep.canvas).ready(function() {
|
|
782
|
+
var menu = new ContextMenu(
|
|
783
|
+
".jtk-endpoint-anchor[data-node='" +
|
|
784
|
+
id.trim() +
|
|
785
|
+
"'][data-input='" +
|
|
786
|
+
input +
|
|
787
|
+
"']",
|
|
788
|
+
[
|
|
789
|
+
{
|
|
790
|
+
name: "Create input for here",
|
|
791
|
+
fn: () => {
|
|
792
|
+
view.c.createInputFromConnection(
|
|
793
|
+
id,
|
|
794
|
+
input
|
|
795
|
+
);
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
]
|
|
799
|
+
);
|
|
800
|
+
});
|
|
819
801
|
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
802
|
+
var uuid = [id, "output", output].join("#");
|
|
803
|
+
var ep = this.$parent.jsPlumbInstance.addEndpoint(
|
|
804
|
+
id,
|
|
805
|
+
{
|
|
823
806
|
isSource: true,
|
|
824
807
|
isTarget: false,
|
|
825
808
|
uuid: uuid,
|
|
@@ -828,72 +811,291 @@ export default {
|
|
|
828
811
|
type: "data",
|
|
829
812
|
source: {
|
|
830
813
|
id: id,
|
|
831
|
-
output:
|
|
814
|
+
output: output
|
|
832
815
|
}
|
|
833
816
|
}
|
|
834
|
-
},
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
$(ep.canvas).attr('data-node', id);
|
|
838
|
-
$(ep.canvas).attr('data-type', "output");
|
|
839
|
-
$(ep.canvas).attr('data-output', output);
|
|
840
|
-
|
|
841
|
-
// bind tooltip
|
|
842
|
-
$(ep.canvas).attr('data-toggle', "tooltip");
|
|
843
|
-
$(ep.canvas).attr('data-trigger', "hover");
|
|
844
|
-
$(ep.canvas).attr('data-placement', "right");
|
|
845
|
-
$(ep.canvas).attr('data-html', "true");
|
|
846
|
-
$(ep.canvas).attr('title', "Type: <b>" + type + "</b>");
|
|
847
|
-
$(ep.canvas).tooltip();
|
|
817
|
+
},
|
|
818
|
+
this.$parent.style.outputEndpoint
|
|
819
|
+
);
|
|
848
820
|
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
821
|
+
// add data to the endpoint div so we can identify it easier
|
|
822
|
+
$(ep.canvas).attr("data-node", id);
|
|
823
|
+
$(ep.canvas).attr("data-type", "output");
|
|
824
|
+
$(ep.canvas).attr("data-output", output);
|
|
825
|
+
|
|
826
|
+
// bind tooltip
|
|
827
|
+
$(ep.canvas).attr("data-toggle", "tooltip");
|
|
828
|
+
$(ep.canvas).attr("data-trigger", "hover");
|
|
829
|
+
$(ep.canvas).attr("data-placement", "right");
|
|
830
|
+
$(ep.canvas).attr("data-html", "true");
|
|
831
|
+
var outputType = view.m
|
|
832
|
+
.getNode(id)
|
|
833
|
+
.getOutputType("value");
|
|
834
|
+
$(ep.canvas).attr(
|
|
835
|
+
"title",
|
|
836
|
+
"Type: <b>" + outputType + "</b>"
|
|
837
|
+
);
|
|
838
|
+
$(ep.canvas).tooltip();
|
|
839
|
+
|
|
840
|
+
// bind context menu to the endpoint
|
|
841
|
+
$(ep.canvas).addClass("capture-right-click");
|
|
842
|
+
$(ep.canvas).ready(function() {
|
|
843
|
+
var menu = new ContextMenu(
|
|
844
|
+
".jtk-endpoint-anchor[data-node='" +
|
|
845
|
+
id.trim() +
|
|
846
|
+
"'][data-output='" +
|
|
847
|
+
output.trim() +
|
|
848
|
+
"']",
|
|
849
|
+
[
|
|
850
|
+
{
|
|
851
|
+
name: "Create output for here",
|
|
852
|
+
fn: () => {
|
|
853
|
+
view.c.createOutputFromConnection(
|
|
854
|
+
id,
|
|
855
|
+
output
|
|
856
|
+
);
|
|
857
|
+
}
|
|
856
858
|
}
|
|
857
|
-
|
|
858
|
-
|
|
859
|
+
]
|
|
860
|
+
);
|
|
859
861
|
});
|
|
862
|
+
} else {
|
|
863
|
+
// add input endoints
|
|
864
|
+
div.find(".box-inputs")
|
|
865
|
+
.find(".point")
|
|
866
|
+
.each(function(index) {
|
|
867
|
+
$(this)
|
|
868
|
+
.css("visibility", "hidden")
|
|
869
|
+
.css("opacity", "0"); // replaced by jsPlumb point
|
|
870
|
+
|
|
871
|
+
var input = div
|
|
872
|
+
.find(".box-inputs")
|
|
873
|
+
.find(".name")
|
|
874
|
+
.eq(index)
|
|
875
|
+
.attr("data-input")
|
|
876
|
+
.trim();
|
|
877
|
+
var type = view.m
|
|
878
|
+
.getNode(id)
|
|
879
|
+
.getInputType(input);
|
|
880
|
+
|
|
881
|
+
var offsetTop =
|
|
882
|
+
$(this).positionFrom(".card").top +
|
|
883
|
+
$(this).height() / 2 -
|
|
884
|
+
3;
|
|
885
|
+
var uuid = [
|
|
886
|
+
id,
|
|
887
|
+
"input",
|
|
888
|
+
$(this).data("key")
|
|
889
|
+
].join("#");
|
|
890
|
+
var ep = self.$parent.jsPlumbInstance.addEndpoint(
|
|
891
|
+
id,
|
|
892
|
+
{
|
|
893
|
+
isSource: false,
|
|
894
|
+
isTarget: true,
|
|
895
|
+
uuid: uuid,
|
|
896
|
+
anchor: [0, 0, -1, 0, 0, offsetTop],
|
|
897
|
+
maxConnections: 1,
|
|
898
|
+
parameters: {
|
|
899
|
+
type: "data",
|
|
900
|
+
target: {
|
|
901
|
+
id: id,
|
|
902
|
+
input: $(this).data("key")
|
|
903
|
+
}
|
|
904
|
+
}
|
|
905
|
+
},
|
|
906
|
+
self.$parent.style.inputEndpoint
|
|
907
|
+
);
|
|
908
|
+
|
|
909
|
+
// add data to the endpoint div so we can identify it easier
|
|
910
|
+
$(ep.canvas).attr("data-node", id);
|
|
911
|
+
$(ep.canvas).attr("data-type", "input");
|
|
912
|
+
$(ep.canvas).attr("data-input", input);
|
|
913
|
+
|
|
914
|
+
// bind tooltip
|
|
915
|
+
$(ep.canvas).attr("data-toggle", "tooltip");
|
|
916
|
+
$(ep.canvas).attr("data-trigger", "hover");
|
|
917
|
+
$(ep.canvas).attr("data-placement", "left");
|
|
918
|
+
$(ep.canvas).attr("data-html", "true");
|
|
919
|
+
$(ep.canvas).attr(
|
|
920
|
+
"title",
|
|
921
|
+
"Type: <b>" + type + "</b>"
|
|
922
|
+
);
|
|
923
|
+
$(ep.canvas).tooltip();
|
|
924
|
+
|
|
925
|
+
// bind context menu to the endpoint
|
|
926
|
+
$(ep.canvas).addClass("capture-right-click");
|
|
927
|
+
$(ep.canvas).ready(function() {
|
|
928
|
+
var menu = new ContextMenu(
|
|
929
|
+
".jtk-endpoint-anchor[data-node='" +
|
|
930
|
+
id.trim() +
|
|
931
|
+
"'][data-input='" +
|
|
932
|
+
input.trim() +
|
|
933
|
+
"']",
|
|
934
|
+
[
|
|
935
|
+
{
|
|
936
|
+
name: "Create input for here",
|
|
937
|
+
fn: () => {
|
|
938
|
+
view.c.createInputFromConnection(
|
|
939
|
+
id,
|
|
940
|
+
input
|
|
941
|
+
);
|
|
942
|
+
}
|
|
943
|
+
}
|
|
944
|
+
]
|
|
945
|
+
);
|
|
946
|
+
});
|
|
947
|
+
});
|
|
948
|
+
|
|
949
|
+
// add output endpoints
|
|
950
|
+
div.find(".box-outputs")
|
|
951
|
+
.find(".point")
|
|
952
|
+
.each(function(index) {
|
|
953
|
+
$(this)
|
|
954
|
+
.css("visibility", "hidden")
|
|
955
|
+
.css("opacity", "0"); // replaced by jsPlumb point
|
|
956
|
+
|
|
957
|
+
var output = div
|
|
958
|
+
.find(".box-outputs")
|
|
959
|
+
.find(".name")
|
|
960
|
+
.eq(index)
|
|
961
|
+
.attr("data-output")
|
|
962
|
+
.trim();
|
|
963
|
+
var type = view.m
|
|
964
|
+
.getNode(id)
|
|
965
|
+
.getOutputType(output);
|
|
966
|
+
|
|
967
|
+
var offsetTop =
|
|
968
|
+
$(this).positionFrom(".card").top +
|
|
969
|
+
$(this).height() / 2 -
|
|
970
|
+
3;
|
|
971
|
+
var uuid = [
|
|
972
|
+
id,
|
|
973
|
+
"output",
|
|
974
|
+
$(this).data("key")
|
|
975
|
+
].join("#");
|
|
976
|
+
var ep = self.$parent.jsPlumbInstance.addEndpoint(
|
|
977
|
+
id,
|
|
978
|
+
{
|
|
979
|
+
isSource: true,
|
|
980
|
+
isTarget: false,
|
|
981
|
+
uuid: uuid,
|
|
982
|
+
anchor: [1, 0, 1, 0, 0, offsetTop],
|
|
983
|
+
parameters: {
|
|
984
|
+
type: "data",
|
|
985
|
+
source: {
|
|
986
|
+
id: id,
|
|
987
|
+
output: $(this).data("key")
|
|
988
|
+
}
|
|
989
|
+
}
|
|
990
|
+
},
|
|
991
|
+
self.$parent.style.outputEndpoint
|
|
992
|
+
);
|
|
993
|
+
|
|
994
|
+
// add data to the endpoint div so we can identify it easier
|
|
995
|
+
$(ep.canvas).attr("data-node", id);
|
|
996
|
+
$(ep.canvas).attr("data-type", "output");
|
|
997
|
+
$(ep.canvas).attr("data-output", output);
|
|
998
|
+
|
|
999
|
+
// bind tooltip
|
|
1000
|
+
$(ep.canvas).attr("data-toggle", "tooltip");
|
|
1001
|
+
$(ep.canvas).attr("data-trigger", "hover");
|
|
1002
|
+
$(ep.canvas).attr("data-placement", "right");
|
|
1003
|
+
$(ep.canvas).attr("data-html", "true");
|
|
1004
|
+
$(ep.canvas).attr(
|
|
1005
|
+
"title",
|
|
1006
|
+
"Type: <b>" + type + "</b>"
|
|
1007
|
+
);
|
|
1008
|
+
$(ep.canvas).tooltip();
|
|
1009
|
+
|
|
1010
|
+
// bind context menu to the endpoint
|
|
1011
|
+
$(ep.canvas).addClass("capture-right-click");
|
|
1012
|
+
$(ep.canvas).ready(function() {
|
|
1013
|
+
var menu = new ContextMenu(
|
|
1014
|
+
".jtk-endpoint-anchor[data-node='" +
|
|
1015
|
+
id.trim() +
|
|
1016
|
+
"'][data-output='" +
|
|
1017
|
+
output.trim() +
|
|
1018
|
+
"']",
|
|
1019
|
+
[
|
|
1020
|
+
{
|
|
1021
|
+
name: "Create output for here",
|
|
1022
|
+
fn: () => {
|
|
1023
|
+
view.c.createOutputFromConnection(
|
|
1024
|
+
id,
|
|
1025
|
+
output
|
|
1026
|
+
);
|
|
1027
|
+
}
|
|
1028
|
+
}
|
|
1029
|
+
]
|
|
1030
|
+
);
|
|
1031
|
+
});
|
|
1032
|
+
});
|
|
860
1033
|
|
|
861
1034
|
if (this.n.isUI() && this.displayEvents) {
|
|
862
1035
|
// Make this a target for events
|
|
863
|
-
this.$parent.jsPlumbInstance.makeTarget(
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
1036
|
+
this.$parent.jsPlumbInstance.makeTarget(
|
|
1037
|
+
id,
|
|
1038
|
+
{
|
|
1039
|
+
isSource: false,
|
|
1040
|
+
isTarget: true,
|
|
1041
|
+
uniqueEndpoint: false,
|
|
1042
|
+
anchor: "Continuous",
|
|
1043
|
+
uuid: id + "#event-in",
|
|
1044
|
+
paintStyle: {
|
|
1045
|
+
fill: "green",
|
|
1046
|
+
radius: 3,
|
|
1047
|
+
stroke: "#727272",
|
|
1048
|
+
strokeWidth: 1
|
|
1049
|
+
},
|
|
1050
|
+
parameters: {
|
|
1051
|
+
type: "event",
|
|
1052
|
+
target: { id: id }
|
|
1053
|
+
}
|
|
873
1054
|
},
|
|
874
|
-
|
|
1055
|
+
self.$parent.style.eventEndpoint
|
|
1056
|
+
);
|
|
875
1057
|
|
|
876
1058
|
// Create an enpoint to create a new event
|
|
877
|
-
var ep = this.$parent.jsPlumbInstance.addEndpoint(
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
1059
|
+
var ep = this.$parent.jsPlumbInstance.addEndpoint(
|
|
1060
|
+
id,
|
|
1061
|
+
{
|
|
1062
|
+
isSource: true,
|
|
1063
|
+
isTarget: false,
|
|
1064
|
+
uuid: id + "#event-out",
|
|
1065
|
+
anchor: [1, 1, 0, 1, 0, -10],
|
|
1066
|
+
parameters: {
|
|
1067
|
+
type: "event",
|
|
1068
|
+
source: { id: id }
|
|
1069
|
+
},
|
|
1070
|
+
paintStyle: {
|
|
1071
|
+
fill: "green",
|
|
1072
|
+
radius: 3,
|
|
1073
|
+
stroke: "#727272",
|
|
1074
|
+
strokeWidth: 1
|
|
1075
|
+
}
|
|
885
1076
|
},
|
|
886
|
-
|
|
887
|
-
|
|
1077
|
+
this.$parent.style.eventEndpoint
|
|
1078
|
+
);
|
|
888
1079
|
|
|
889
1080
|
// Add overlay here so we don't mess with splitConnection
|
|
890
|
-
ep.addOverlay([
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
1081
|
+
ep.addOverlay([
|
|
1082
|
+
"PlainArrow",
|
|
1083
|
+
{
|
|
1084
|
+
width: 15,
|
|
1085
|
+
length: 15,
|
|
1086
|
+
location: 1,
|
|
1087
|
+
id: "arrow"
|
|
1088
|
+
}
|
|
1089
|
+
]);
|
|
1090
|
+
|
|
1091
|
+
$(ep.canvas).attr("data-toggle", "tooltip");
|
|
1092
|
+
$(ep.canvas).attr("data-trigger", "hover");
|
|
1093
|
+
$(ep.canvas).attr("data-placement", "bottom");
|
|
1094
|
+
$(ep.canvas).attr("data-html", "true");
|
|
1095
|
+
$(ep.canvas).attr(
|
|
1096
|
+
"title",
|
|
1097
|
+
"Connect from here ito add an event that will be triggered when this box is done computing."
|
|
1098
|
+
);
|
|
897
1099
|
$(ep.canvas).tooltip();
|
|
898
1100
|
}
|
|
899
1101
|
}
|
|
@@ -914,19 +1116,29 @@ export default {
|
|
|
914
1116
|
// resize the canvas if necessary
|
|
915
1117
|
self.$parent.canvasSizeHandler.debouncedResize();
|
|
916
1118
|
|
|
917
|
-
if (
|
|
1119
|
+
if (
|
|
1120
|
+
self.$parent.selector.isMultipleSelectionActive()
|
|
1121
|
+
) {
|
|
918
1122
|
// We just dropped a bunch of divs, ajust all their positions
|
|
919
1123
|
self.view.m.batch(() => {
|
|
920
1124
|
self.$parent.selector.each(div => {
|
|
921
|
-
var pos = self.$parent.jsPlumbInstance.getPosition(
|
|
922
|
-
|
|
1125
|
+
var pos = self.$parent.jsPlumbInstance.getPosition(
|
|
1126
|
+
div
|
|
1127
|
+
);
|
|
1128
|
+
view.m
|
|
1129
|
+
.getNode($(div).attr("id"))
|
|
1130
|
+
.setPosition(pos);
|
|
923
1131
|
});
|
|
924
1132
|
});
|
|
925
1133
|
} else {
|
|
926
1134
|
// We just dropped this one, set the new position in the graph model
|
|
927
|
-
var el = self.$parent.jsPlumbInstance.getElement(
|
|
1135
|
+
var el = self.$parent.jsPlumbInstance.getElement(
|
|
1136
|
+
id
|
|
1137
|
+
);
|
|
928
1138
|
$(el).ready(function() {
|
|
929
|
-
var pos = self.$parent.jsPlumbInstance.getPosition(
|
|
1139
|
+
var pos = self.$parent.jsPlumbInstance.getPosition(
|
|
1140
|
+
el
|
|
1141
|
+
);
|
|
930
1142
|
view.m.getNode(id).setPosition(pos);
|
|
931
1143
|
});
|
|
932
1144
|
}
|
|
@@ -935,22 +1147,26 @@ export default {
|
|
|
935
1147
|
}
|
|
936
1148
|
}
|
|
937
1149
|
|
|
938
|
-
return new Promise(
|
|
1150
|
+
return new Promise(resolve =>
|
|
1151
|
+
this.$parent.jsPlumbInstance.ready(resolve)
|
|
1152
|
+
);
|
|
939
1153
|
},
|
|
940
1154
|
|
|
941
1155
|
assignContextMenu: function() {
|
|
942
1156
|
var id = this.getId();
|
|
943
1157
|
|
|
944
1158
|
// Create a contextmenu for the div
|
|
945
|
-
var contextOptions = [
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
1159
|
+
var contextOptions = [
|
|
1160
|
+
{
|
|
1161
|
+
name: "Remove this box",
|
|
1162
|
+
fn: () => {
|
|
1163
|
+
this.view.c.removeBox(id);
|
|
1164
|
+
}
|
|
949
1165
|
}
|
|
950
|
-
|
|
1166
|
+
];
|
|
951
1167
|
if (this.n.isModule() || this.n.isUI()) {
|
|
952
1168
|
contextOptions.push({
|
|
953
|
-
name:
|
|
1169
|
+
name: "Duplicate this box",
|
|
954
1170
|
fn: () => {
|
|
955
1171
|
this.view.c.duplicateBox(id);
|
|
956
1172
|
}
|
|
@@ -964,15 +1180,15 @@ export default {
|
|
|
964
1180
|
},
|
|
965
1181
|
|
|
966
1182
|
getVisibleInputs: function() {
|
|
967
|
-
return this.n.getInputsNames().filter(
|
|
1183
|
+
return this.n.getInputsNames().filter(inputName => {
|
|
968
1184
|
return this.n.isInputVisible(inputName);
|
|
969
|
-
})
|
|
1185
|
+
});
|
|
970
1186
|
},
|
|
971
1187
|
|
|
972
1188
|
getVisibleOutputs: function() {
|
|
973
|
-
return this.n.getOutputsNames().filter(
|
|
1189
|
+
return this.n.getOutputsNames().filter(outputName => {
|
|
974
1190
|
return this.n.isOutputVisible(outputName);
|
|
975
|
-
})
|
|
1191
|
+
});
|
|
976
1192
|
},
|
|
977
1193
|
|
|
978
1194
|
enterMetanode: function(e) {
|
|
@@ -999,12 +1215,12 @@ export default {
|
|
|
999
1215
|
}
|
|
1000
1216
|
},
|
|
1001
1217
|
watch: {
|
|
1002
|
-
|
|
1218
|
+
app: {
|
|
1003
1219
|
handler: () => {
|
|
1004
|
-
console.log(
|
|
1220
|
+
console.log("graphVue.app changed");
|
|
1005
1221
|
},
|
|
1006
1222
|
deep: true
|
|
1007
1223
|
}
|
|
1008
1224
|
}
|
|
1009
|
-
}
|
|
1225
|
+
};
|
|
1010
1226
|
</script>
|