@dualbox/editor 1.0.1 → 1.0.3

package/js/src/v/templates/editNodeSettings.js

@@ -0,0 +1,356 @@
+const swal = require('sweetalert2');
+const _ = require('lodash');
+
+const JSONEditor = require('@dualbox/dualbox-lib-jsoneditor');
+
+var TemplateBinds = function(view, div, data) {
+    var node = data.node;
+    var pkg  = node.getPackage();
+    var editor = null;
+
+    div.ready(() => {
+        // Add the example div
+        $('.module-left-signature').html("");
+        $('.module-left-signature').append(
+            $('<div/>', {
+                'class' : 'dualbox-graph-canvas',
+                'style': 'overflow: visible; padding-left: 40px; padding-right: 40px; width: 100%; background-color: transparent; border: none;'
+            })
+        )
+        view.templateMgr.appendTemplate($('.module-left-signature .dualbox-graph-canvas'),
+            "graphNode",
+            { pkg: node.getPackage(), id: node.id, n: view.m.createExampleNode(pkg.name, node.id), example: true, utils: view.utils },
+            (div) => {
+                $(div).ready(() => {
+                    // remove the "position: absolute;" that messes up the display
+                    var card = $('.module-left-signature .dualbox-graph-canvas .card');
+                    card.css('position', 'static').css('point-events', 'none');
+                    card.find('.point').css("visibibility", "visible").find('svg').css("visibibility", "visible");
+
+                    card.ready(()=> {
+                        card.addClass('mx-auto');
+                    });
+                });
+            }
+        );
+
+        // bind the json editor
+        editor = new JSONEditor(div.find('.json-editor')[0], { modes: ['tree', 'code', 'text' ]});
+        editor.set({});
+
+        div.find('button[data-toggle="tooltip"]').tooltip();
+
+        div.find('.input-visibility-toggle').change( function(e) {
+            var id = $(this).data('id');
+            var inputName = $(this).data('input');
+            var visible = $(this).is(":checked");
+            if( !view.c.setInputVisibility(id, inputName, visible) ) {
+                // failed, reset this to old value
+                $(this).prop('checked', !visible);
+            }
+        });
+
+        div.find('.output-visibility-toggle').change( function(e) {
+            var id = $(this).data('id');
+            var outputName = $(this).data('output');
+            var visible = $(this).is(":checked");
+            if( !view.c.setOutputVisibility(id, outputName, visible) ) {
+                // failed, reset this to old value
+                $(this).prop('checked', !visible);
+            }
+        });
+
+        div.find('.btn-edit-dualbox-node-name').click(function(e) {
+            div.find('.dualbox-node-name').hide();
+            div.find('.dualbox-node-name-edit').show();
+        });
+
+        div.find('.btn-save-node-name-change').click(function(e) {
+            var oldId = $(this).data('id');
+            var newId = $(this).parent().find('.dualbox-node-name-input').val();
+            var type = $(this).data('type');
+            view.c.renameBox(oldId, newId, type);
+        });
+
+        div.find('.dualbox-node-name-input').keypress(function(e) {
+            // user pressed enter
+            if(e.which == 13 || e.keyCode == 13) {
+                var oldId = $(this).parent().find('.btn-save-node-name-change').data('id');
+                var newId = $(this).val();
+                var type = $(this).data('type');
+                view.c.renameBox(oldId, newId, type);
+                return false;
+            }
+        });
+
+        div.find('.input-iterator-toggle').change(function(e) {
+            var destId = $(this).attr('data-id');
+            var destInput = $(this).attr('data-input');
+            if( $(this).is(":checked") ) {
+                view.c.setIterator( destId, destInput );
+            }
+            else {
+                view.c.unsetIterator( destId, destInput );
+            }
+        });
+
+        div.find('.select-widget-registerTo').change(function(e) {
+            var nodeId = $(this).attr('data-id');
+            var targetId = $(this).val();
+            view.c.registerWidget(nodeId, targetId);
+        });
+
+        div.find('.select-output-feedback').change(function(e) {
+            var val = $(this).val();
+            var destId = $(this).attr('data-id');
+            var destOutput = $(this).attr('data-output');
+            if( val !== "none" ) {
+                view.c.setFeedback( destId, destOutput, val );
+            }
+            else {
+                view.c.unsetFeedback( destId, destOutput );
+            }
+        });
+
+        div.find('.btn-remove-event').click(function(e) {
+            var nodeId = $(this).attr('data-id');
+            var index = parseInt($(this).attr('data-index'));
+            view.c.removeEvent( nodeId, index );
+        });
+
+        div.find('.event-if').change(function(e) {
+            var nodeId = $(this).attr('data-id');
+            var index = parseInt($(this).attr('data-index'));
+            var val = $(this).val();
+            view.c.setEventIf( nodeId, index, val );
+        });
+
+        div.find('.event-data').change(function(e) {
+            var nodeId = $(this).attr('data-id');
+            var index = parseInt($(this).attr('data-index'));
+            var val = $(this).val();
+            view.c.setEventData( nodeId, index, val );
+        });
+
+        div.find('.select-event-target').change(function(e) {
+            var target = $(this).val();
+
+            // change options of closest .select-event-name according to this new target
+            var targetNode = view.m.getNode(target);
+            var targetEvents = targetNode.getEventsNames();
+            var select = $(this).closest('tr').find('.select-event-name');
+            select.html('');
+            _.each(targetEvents, (eventName) => {
+                select.append( $('<option/>', {
+                    value: eventName
+                }).append(eventName));
+            });
+
+            var nodeId = $(this).attr('data-id');
+            var index = parseInt($(this).attr('data-index'));
+            view.c.setEventTarget( nodeId, index, target );
+        });
+
+        div.find('.select-event-name').change(function(e) {
+            var nodeId = $(this).attr('data-id');
+            var index = parseInt($(this).attr('data-index'));
+            var val = $(this).val();
+            view.c.setEventName( nodeId, index, val );
+        });
+
+        div.find('.input-cache-toggle').change(function(e) {
+            var nodeId = $(this).attr('data-id');
+            var val = $(this).is(':checked');
+            view.c.setBoxCache( nodeId, val );
+        });
+
+        div.find('.input-worker-toggle').change(function(e) {
+            var nodeId = $(this).attr('data-id');
+            var val = $(this).is(':checked');
+            if( val ) { div.find('.worker-warning').show() }
+            else { div.find('.worker-warning').hide() }
+            view.c.setBoxParallel( nodeId, val );
+        });
+
+        div.find('.edit-module-description').click(function(e) {
+            var id = $(this).attr('data-id');
+            var desc = $(this).attr('data-desc');
+
+            swal({
+                title: "Describe what this metabox does",
+                input: "textarea",
+                inputValue: desc || "",
+                showCancelButton: true,
+                closeOnConfirm: false,
+                showLoaderOnConfirm: true,
+                animation: "slide-from-top",
+                inputPlaceholder: "This metabox..."
+            }).then( (result) => {
+                if (result.value === "") {
+                    swal.showInputError("You need to write something!");
+                    return false;
+                }
+                else {
+                    view.c.setMetanodeDescription(id, result.value);
+                }
+            });
+        });
+
+        div.find('.add-node-comment, .node-comment-text').click(function(e) {
+            $(this).hide();
+            div.find('.node-comment-edit').show();
+        });
+
+        div.find('.btn-save-comment').click(function(e) {
+            var nodeId = $(this).attr('data-id');
+            var val = div.find('.node-comment').val();
+            view.c.setComment(nodeId, val);
+        });
+
+        div.find('.btn-delete-comment').click(function(e) {
+            var nodeId = $(this).attr('data-id');
+            view.c.deleteComment(nodeId);
+        });
+
+        div.find('.btn-add-event').click(function(e) {
+            var id = $(this).attr('data-id');
+            view.c.addEvent(id);
+        });
+
+        div.find('.setValue').click(function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            var modal = div.find('.edit-value-modal');
+            modal.modal('show');
+
+            // set the link data on the modal
+            modal.attr('data-id', $(this).attr('data-id'));
+            modal.attr('data-type', $(this).attr('data-type'));
+            modal.attr('data-name', $(this).attr('data-name'));
+            modal.attr('data-value', $(this).attr('data-value'));
+            modal.attr('data-valueType', $(this).attr('data-valueType'));
+
+            // choose the right settings according to the link data
+            if( $(this).attr('data-undefined') ) {
+                modal.find('.unset-value').prop('checked', true);
+            }
+            else if( $(this).attr('data-null') ) {
+                modal.find('.set-value-null').prop('checked', true);
+            }
+            else {
+                modal.find('.set-value-type').prop('checked', true);
+                modal.find('.has-value').show();
+            }
+
+            var valueType = $(this).attr('data-valueType');
+            if( valueType ) {
+                modal.find('.choose-value-type').val( valueType );
+                modal.find('.define-value').hide();
+                modal.find('.define-' + valueType).show();
+
+                // set the existing value
+                var value = $(this).attr('data-value');
+                switch(valueType) {
+                case "string":
+                    val = modalSetValue.find('.text-value').val(value);
+                    break;
+                case "number":
+                    val = modalSetValue.find('.number-value').val(parseFloat(value));
+                    break;
+                case "boolean":
+                    val = modalSetValue.find('.bool-value').val(value);
+                    break;
+                case "object":
+                    val = editor.set((value && JSON.parse(value)) || {});
+                    break;
+                default:
+                    console.log('couldnt find value type: ' + valueType);
+                }
+            }
+        });
+
+        // set up the modal control (for setting a value)
+        var modalSetValue = div.find('.edit-value-modal');
+        modalSetValue.find('.set-value-type').change(function(e) {
+            if( $(this).is(':checked') ) {
+                modalSetValue.find('.has-value').show();
+            }
+            else {
+                modalSetValue.find('.has-value').hide();
+            }
+
+            var valueType = modalSetValue.find('.choose-value-type').val();
+            modalSetValue.find('.define-value.define-' + valueType).show();
+        });
+
+        modalSetValue.find('.choose-value-type').change(function(e) {
+            var valueType = $(this).val();
+            modalSetValue.find('.define-value').hide();
+            modalSetValue.find('.define-' + valueType).show();
+        });
+
+        modalSetValue.find('.btn-save').click(function(e) {
+            var val;
+            if( modalSetValue.find('.unset-value').is(':checked') ) {
+                // remove default value
+                val = undefined;
+            }
+            else if( modalSetValue.find('.set-value-null').is(':checked') ) {
+                val = null;
+            }
+            else {
+                var type = modalSetValue.find('.choose-value-type').val();
+                switch( type ) {
+                case "string":  val = modalSetValue.find('.text-value').val(); break;
+                case "number":  val = parseFloat(modalSetValue.find('.number-value').val()); break;
+                case "boolean": val = modalSetValue.find('.bool-value').val() == "true"; break;
+                case "object":  val = editor.get(); break;
+                default:
+                    throw "cant recognize type: " + type;
+                }
+            }
+
+            // set the new value
+            var destId =   modalSetValue.attr('data-id');
+            var destName = modalSetValue.attr('data-name');
+            var destType = modalSetValue.attr('data-type'); // "attr" or "input"
+            if( destType == "default" ) {
+                view.m.getNode(destId).setDefaultValue(val);
+            }
+            else {
+                if(val !== undefined) {
+                    view.m.getNode(destId).val( destType, destName, val );
+                    view.m.getNode(destId).setInputVisibility(destName, false);
+                }
+                else {
+                    view.m.getNode(destId).deleteVal( destType, destName );
+                }
+            }
+            modalSetValue.modal('hide');
+
+            var field = $('.' + destType + '-' + destId + '-' + destName); // the display field
+            if( val === undefined ) {
+                field.text("");
+            }
+            else if ( val === null ) {
+                field.text("null");
+            }
+            else {
+                switch(type) {
+                case "string":  field.text( '"' + val + '"'); break;
+                case "number":  field.text(val); break;
+                case "boolean": field.text(val ? "true" : "false"); break;
+                case "object":  field.text('[Object]'); break;
+                default:
+                    throw "cant recognize type: " + type;
+                }
+            }
+
+            view.repaint();
+            view.openBoxSettings(destId);
+        });
+    });
+};
+
+module.exports = TemplateBinds;

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

@@ -0,0 +1,333 @@
+.card-ui {
+    background-color: #bff2ca!important;
+}
+
+.card-loop {
+    /* background-color: #e5e8ea!important; */
+    border: 5px double #dddddd;
+    border-width: 4px;
+}
+
+.card-input {
+    background-color: #f5d76e!important;
+}
+
+.card-output {
+    background-color: #ffb3a7!important;
+}
+
+.box-inputs {
+    float: left;
+    padding-left: 2px;
+    padding-right: 5px;
+    vertical-align: top;
+    text-align: left;
+}
+
+.box-outputs {
+    float: right;
+    padding-left: 5px;
+    padding-right: 2px;
+    vertical-align: top;
+    text-align: right;
+}
+
+.dualbox-graph-canvas .card {
+    /*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;
+    background-color: #fff;
+    -moz-border-radius: 3px;
+    border-radius:3px;
+    font-size: 14px;
+    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+
+.dualbox-graph-canvas .card-top {
+    padding-top: 2px;
+}
+
+.dualbox-graph-canvas .card-bottom {
+    padding-bottom: 2px;
+    text-align: center;
+    line-height: 14px;
+    white-space: nowrap;
+}
+
+.dualbox-graph-canvas .card hr {
+    margin-top: 2px;
+    margin-bottom: 2px;
+    border-color: rgba(0,0,0,0.1);
+    margin-left: -8px;
+    margin-right: -8px;
+}
+
+.dualbox-graph-canvas .card:hover {
+    border-color: #80b2fc;
+    box-shadow: 1px 1px 10px #80b2fc;
+}
+
+.dualbox-graph-canvas .card.selected, .dualbox-graph-canvas .card.selected:hover {
+    border-color: #0066ff;
+    box-shadow: 1px 1px 10px #0066ff;
+}
+
+
+
+.dualbox-graph-canvas .card .title {
+    vertical-align:top;
+    font-weight: bold;
+}
+
+.dualbox-graph-canvas .card .subtitle {
+    color:#929292;
+    font-size: 11px;
+    font-style: italic;
+    vertical-align:center;
+    font-family: tahoma, sans-serif;
+}
+
+.dualbox-graph-canvas .card .input {
+    font-size: 13px;
+    color: #8c8c8c;
+}
+
+.dualbox-graph-canvas .card .output {
+    font-size: 13px;
+    color: #8c8c8c;
+    text-align:right;
+}
+
+.dualbox-graph-canvas .jsplumb-endpoint.active svg circle {
+    /* fill: #99ff33 */
+    stroke: #59b300;
+}
+
+.point {
+    /* display: inline-block; */
+    display: none;
+    position: relative;
+    top: 3px;
+    margin-right: 5px;
+    margin-left: 5px;
+}
+
+.dualbox-io {
+    overflow: visible;
+    margin-left: -8px;
+    margin-right: -8px;
+}
+
+.box-inputs {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    padding: 0;
+    pointer-events: none;
+}
+
+.types {
+    color: #6c757d!important;
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+.box-inputs .types {
+    display: inline-block;
+}
+
+.box-inputs .name {
+    display: inline-block;
+}
+
+.box-inputs .type {
+    display: block;
+    text-align: right;
+}
+
+.box-inputs .point {
+    display: block;
+}
+
+.box-inputs .name {
+    display: block;
+}
+
+.box-outputs {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    padding: 0;
+    pointer-events: none;
+}
+
+.box-outputs .types {
+    display: inline-block;
+}
+
+.box-outputs .point {
+    display: inline-block;
+}
+
+.box-outputs .name {
+    display: inline-block;
+}
+
+.box-outputs .type {
+    display: block;
+    text-align: left;
+}
+
+.box-outputs .point {
+    display: block;
+}
+
+.box-outputs .name {
+    display: block;
+}
+
+span.feedback {
+    font-weight: bold;
+}
+
+.event-dock {
+    background-color: rgb(136, 137, 138);
+    background-color:   #a6a6a6;
+    width: calc(100% + 18px);
+    height: 12px;
+    z-index: 3!important;
+}
+
+.event-dock-top {
+    margin-left: -9px;
+    margin-right: -9px;
+    margin-top: -3px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    margin-bottom: 4px;
+}
+
+.event-dock-bottom {
+    margin-left: -9px;
+    margin-right: -9px;
+    margin-bottom: -3px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    margin-top: 4px;
+    height: 11px; /* shorter because of box-shadow */
+}
+
+.event-label {
+    z-index: 21;
+    padding-left: 15px;
+    transform: rotate(-90deg) translate(0%, -50%)!important;
+    transform-origin: 0% 0%;
+    color: #6c757d!important;
+    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+    font-size: 14px;
+    opacity: 0.7;
+    cursor: pointer;
+}
+
+.transparent {
+    opacity: 0.3!important;
+}
+
+.card-node {
+    position: relative;
+}
+
+.card-comment {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-top: -22px;
+    color: #f4ad42!important;
+}
+
+.card-problem {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: -22px;
+    color: red!important;
+}
+
+.card-snapshot {
+
+}
+
+.card-snapshot-idle {
+    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;
+}
+
+.card-snapshot-awaiting-data {
+    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;
+}
+
+.card-status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    margin-bottom: -26px;
+    color: #f4ad42!important;
+    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    text-align: center;
+}
+
+.card-status-idle {
+    color: gray!important;
+    min-width: 85px;
+}
+
+.card-status-computing {
+    color: darkgreen!important;
+    min-width: 110px;
+}
+
+.card-status-awaiting-data {
+    color: blue!important;
+    min-width: 85px;
+}
+
+.card-status-ready {
+    color: lightgreen!important;
+    min-width: 85px;
+}
+
+.btn-snapshot-details {
+    position: relative;
+    margin-top: -2px;
+    color: inherit;
+}