@dualbox/editor 1.0.1 → 1.0.3

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

@@ -0,0 +1,227 @@
+@{ var utils = require('../../m/DualboxUtils') }
+
+@!(data)
+@{ var id = data.example ? data.id + "-junk" : data.id; }
+<div class="jtk-node card card-node @cardColor(data.id) @cardLoop(data.id) @cardSnapshot(data.id) contextmenu" id="@(id)" data-id="@(data.id)" data-name="@(data.pkg.name)" style="overflow: visible;">
+    @if( data.n.hasComment() ) {
+        <div class="card-comment">
+            <i class="fas fa-comment-alt" data-container="body" data-toggle="popover" data-placement="top" data-content="@(data.n.getComment())"></i>
+        </div>
+    }
+
+    @if( data.n.hasSnapshot() ) {
+        <div class="card-status">
+            @if( data.n.isSnapshotStatus(0) ) {
+                <div class="card-status-idle">
+                    <span>IDLE</span>
+                    <button class="btn btn-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block" data-id="@(data.id)"><i class="fas fa-info-circle"></i></button>
+                </div>
+            }
+            @if( data.n.isSnapshotStatus(1) ) {
+                <div class="card-status-computing">
+                    <span>COMPUTING</span>
+                    <button class="btn btn-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block" data-id="@(data.id)"><i class="fas fa-info-circle"></i></button>
+                </div>
+            }
+            @if( data.n.isSnapshotStatus(2) ) {
+                <div class="card-status-awaiting-data">
+                    <span>WAITING</span>
+                    <button class="btn btn-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block" data-id="@(data.id)"><i class="fas fa-info-circle"></i></button>
+                </div>
+            }
+            @if( data.n.isSnapshotStatus(3) ) {
+                <div class="card-status-ready">
+                    <span>READY</span>
+                    <button class="btn btn-xs btn-outline-secondary btn-outline-discrete btn-snapshot-details d-inline-block" data-id="@(data.id)"><i class="fas fa-info-circle"></i></button>
+                </div>
+            }
+        </div>
+    }
+
+    @if( !data.example && data.n.isUI() && !data.n.isOnAPanel() ) {
+        <div class="card-problem">
+            <i class="fas fa-exclamation-circle" data-container="body" data-toggle="popover" data-placement="top" data-content="This UI is not set in a panel. It won't have any effect. Go to the Interface tab to add it to a panel."></i>
+        </div>
+    }
+
+    <div class="card-top">
+        <div class="d-flex">
+            <span class="title" style="white-space: nowrap; margin-right: 5px;">
+                @if( data.n.isMetanode() ) { <span class="badge badge-secondary"><b>META</b></span> }
+                @(data.n.graphId)
+                @if( data.n.isParallel() ) { <i class="fas fa-server" style="color: orange;" title="this module is computed in a web worker"></i> }
+            </span>
+
+            <div class="ml-auto">
+                <button class="btn btn-outline-secondary btn-outline-discrete btn-xs btn-settings"><i class="fas fa-cog"></i></button>
+            </div>
+        </div>
+    </div>
+    @if( !data.n.isInput() && !data.n.isOutput() ) {
+    <div class="card-center">
+        <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">
+                    @{var keys = data.n.getInputsNames(); }
+                    @if( keys && keys.length > 0 ) {
+                        <div class="types">
+                        @* Build types *@
+                        @for(var i=0; i<keys.length; i++) {
+                            @{var key = keys[i] }
+                            @{var inputDesc = data.n.getInputDef(key); }
+                            @if( data.n.isInputVisible(key) ) {
+                                <span class="type" data-key="@key">@( data.utils.htmlentities(data.n.getInputType(key)) )</span>
+                            }
+                        }
+                        </div>
+
+                        <div class="points">
+                        @* Build points *@
+                        @for(var i=0; i<keys.length; i++) {
+                            @{var key = keys[i] }
+                            @{var inputDesc = data.n.getInputDef(key); }
+                            @if( data.n.isInputVisible(key) ) {
+                                <div class="point" data-key="@key" data-type="@(inputDesc.type)">@point()</div>
+                            }
+                        }
+                        </div>
+                        <div class="names">
+                        @* Build names *@
+                        @for(var i=0; i<keys.length; i++) {
+                            @{var key = keys[i] }
+                            @{var inputDesc = data.n.getInputDesc(key); }
+                            @if( data.n.isInputVisible(key) ) {
+                                <span class="name @if(data.n.isFeedbackTarget(key)){feedback}" data-input="@(key)">
+                                    @if( data.n.hasIterator(key) ) {
+                                       &lt;@(key)&gt;
+                                    }
+                                    else {
+                                        @(key)
+                                    }
+                                    @if( !data.n.isInputConst(key) ) {
+                                        <small><i class="fas fa-clone transparent"></i></small>
+                                    }
+                                </span>
+                            }
+                        }
+                        </div>
+                    }
+                </div>
+            </div>
+            <div class="outputs" style="display: inline-block; float: right">
+                <div class="box-outputs">
+                    @{var keys = data.n.getOutputsNames() }
+                    @if( keys && keys.length > 0 ) {
+                        <div class="names">
+                        @* Build names *@
+                        @for(var i=0; i<keys.length; i++) {
+                            @{var key = keys[i] }
+                            @if( data.n.isOutputVisible(key) ) {
+                                <span class="name @if(data.n.hasFeedback(key)){feedback}" data-output="@(key)">
+                                    @if( data.n.hasLoop() ) {
+                                        @if( data.n.hasFeedback(key) ) {
+                                             @(key)
+                                        }
+                                        else {
+                                             &lt;@(key)&gt;
+                                        }
+                                    }
+                                    else {
+                                         @(key)
+                                    }
+
+                                    @if( data.n.hasCacheActivated() ) {
+                                        &nbsp;<i class="fa fa-hdd" title="This module has cache activated"></i>
+                                    }
+                                </span>
+                            }
+                        }
+                        </div>
+
+                        <div class="points">
+                        @* Build points *@
+                        @for(var i=0; i<keys.length; i++) {
+                            @{var key = keys[i] }
+                            @{var outputDesc = data.n.getOutputDef(key); }
+                            @if( data.n.isOutputVisible(key) ) {
+                                <div class="point" data-key="@key" data-type="@(outputDesc.type)">@point()</div>
+                            }
+                        }
+                        </div>
+
+                        <div class="types">
+                        @* Build types *@
+                        @for(var i=0; i<keys.length; i++) {
+                            @{var key = keys[i] }
+                            @{var outputDesc = data.n.getOutputDef(key); }
+                            @if( data.n.isOutputVisible(key) ) {
+                                <span class="type" data-key="@key">@( data.utils.htmlentities(data.n.getOutputType(key)) )</span>
+                            }
+                        }
+                        </div>
+                    }
+                </div>
+            </div>
+        </div>
+    </div>
+    }
+    <hr style="margin-top: 5px;"/>
+    <div class="card-bottom">
+        <span class="subtitle">@( data.utils.htmlentities(shortname(data.id, data.pkg.name)) )</span>
+        @if( data.n.isMetanode() ) {
+        <div class="d-inline-block">
+            <button class="btn btn-outline-secondary btn-outline-discrete btn-xs btn-enter-metanode"><i class="fas fa-sign-in-alt"></i></button>
+        </div>
+        }
+
+        <!--
+        @if( data.n.isUI() ) {
+            <div class="event-dock event-dock-bottom"></div>
+        }
+        -->
+    </div>
+</div>
+
+@function cardColor( id ) {
+    @if( data.n.isUI() ) { card-ui }
+    else if( data.n.isMetanode() ) { card-metanode }
+    else if( data.n.isInput() ) { card-input }
+    else if( data.n.isOutput() ) { card-output }
+}
+
+@function cardLoop( id ) {
+    @if( data.n.hasLoop() ) { card-loop }
+}
+
+@function cardSnapshot(id) {
+    @if( data.n.hasSnapshot() ) {
+        card-snapshot
+        @if( data.n.isSnapshotStatus(0) ) {
+            card-snapshot-idle
+        }
+        @if( data.n.isSnapshotStatus(1) ) {
+            card-snapshot-computing
+        }
+        @if( data.n.isSnapshotStatus(2) ) {
+            card-snapshot-awaiting-data
+        }
+        @if( data.n.isSnapshotStatus(3) ) {
+            card-snapshot-ready
+        }
+    }
+}
+
+@function shortname( id, pkgName ) {
+    @if( data.n.isInput() || data.n.isOutput() ) {
+        @( data.n.getType() )
+    }
+    else {
+        @{ var shortname = utils.shortName(pkgName) }
+        @(shortname)
+    }
+}
+
+@function 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>
+}

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

@@ -0,0 +1,412 @@
+const ContextMenu = require('../ContextMenu');
+const _ = require('lodash');
+
+// fix inputs types and output types position relatively to the div
+$.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 card has no input/output, remove the card center
+        $(this).find('.card-center').remove();
+    }
+    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');
+
+        // translate inputs to the left
+        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 */ );
+
+
+        // 2) translate outputs by the right amount of pixels to have the circle on the line
+        var boxOutputs = $(this).find('.box-outputs');
+
+        // fix css names with
+        var namesDiv = boxOutputs.find('.names');
+        namesDiv.css('width', (namesDiv.width() + 1) + 'px');
+
+        // translate inputs to the right
+        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 */ );
+
+        // fix io width
+        //$('.dualbox-io').css('width', (($(this).find('.inputs').width() + $(this).find('.outputs').width()) + "px"));
+    }
+}
+
+// take the current width and add it as a css property
+$.fn.fixWidth = function() {
+    var width = $(this).width();
+    width += parseInt($(this).css('padding-right'));
+    width += parseInt($(this).css('padding-left'));
+    width += parseInt($(this).css('border-left-width'));
+    width += parseInt($(this).css('border-right-width'));
+    $(this).css('width', width + 'px');
+}
+
+// find position of element relative to an ancestor matching selector
+$.fn.positionFrom = function( selector ) {
+    var ancestor = $(this).closest(selector);
+    var offset = $(this).offset();
+    var ancestorOffset = ancestor.offset();
+    return {
+        top:  offset.top - ancestorOffset.top,
+        left: offset.left - ancestorOffset.left,
+    }
+}
+
+var editorView = null;
+$.fn.savePosition = function( selector ) {
+    var id = $(this).attr('id');
+    if( id ) {
+        var jsPlumbElement = editorView.jsPlumbInstance.getElement(id);
+        if( jsPlumbElement ) {
+            var pos = editorView.jsPlumbInstance.getPosition(jsPlumbElement);
+            editorView.m.getNode(id).setPosition(pos);
+        }
+    }
+}
+
+var TemplateBinds = function(view, div, data) {
+    editorView = view;
+
+    var id = $(div).attr('id');
+    var jsPlumbInstance = view.jsPlumbInstance;
+
+    div.fixCardDisplay();
+    div.ready(function() {
+        // div resize must be completed before jsplumb touches it
+        div.fixWidth();
+
+        if( !data.example ) {
+            // if we have a position, set it
+            var position = data && data.def && data.def.graph && data.def.graph.position;
+            if( position ) {
+                var jsPlumbElement = jsPlumbInstance.getElement(id);
+                jsPlumbInstance.setPosition(jsPlumbElement, position);
+            }
+
+            // This needs to be registered before draggable
+            div.on('mousedown', function(e) {
+                // if this div is not selected already, deselect the other divs
+                if( !view.selector.isSelected(this) ) {
+                    view.selector.deselect();
+                }
+            });
+
+            // Make the div draggable
+            jsPlumbInstance.draggable(div, {
+                //containment:true, // not allowed outside of container div
+                drag: function(e) {
+                },
+                stop: function(e) {
+                    // resize the canvas if necessary
+                    view.canvasSizeHandler.debouncedResize();
+
+                    // set the new position in the graph model
+                    var el = jsPlumbInstance.getElement(id);
+                    $(el).ready(function() {
+                        var pos = jsPlumbInstance.getPosition(el);
+                        view.m.getNode(id).setPosition(pos);
+                    });
+                }
+            });
+
+            if( data.n.isInput() || data.n.isOutput() ) {
+                var type = "*";
+                var input = output = "value";
+                var offsetTop = $(div).find('.card-top').height() + 12 /* hr size */  - 3;
+
+                var uuid = [ id, "input",  input].join('#');
+                var ep = 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
+                        }
+                    }
+                }, view.style.inputEndpoint);
+
+                // add data to the endpoint div so we can identify it easier
+                $(ep.canvas).attr('data-node', id);
+                $(ep.canvas).attr('data-type', 'input');
+                $(ep.canvas).attr('data-input', input);
+
+                // bind tooltip
+                $(ep.canvas).attr('data-toggle', "tooltip");
+                $(ep.canvas).attr('data-trigger', "hover");
+                $(ep.canvas).attr('data-placement', "left");
+                $(ep.canvas).attr('data-html', "true");
+                var inputType = view.m.getNode(id).getInputType("value");
+                $(ep.canvas).attr('title', "Type: <b>" + inputType + "</b>");
+                $(ep.canvas).tooltip();
+
+                // bind context menu to the endpoint
+                $(ep.canvas).addClass('capture-right-click');
+                $(ep.canvas).ready(function() {
+                    var menu = new ContextMenu(".jsplumb-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 ep = jsPlumbInstance.addEndpoint(id, {
+                    isSource : true,
+                    isTarget : false,
+                    uuid     : uuid,
+                    anchor   : [1,0,1,0,0,offsetTop],
+                    parameters : {
+                        type: "data",
+                        source : {
+                            id  : id,
+                            output : output
+                        }
+                    }
+                }, view.style.outputEndpoint);
+
+                // add data to the endpoint div so we can identify it easier
+                $(ep.canvas).attr('data-node', id);
+                $(ep.canvas).attr('data-type', "output");
+                $(ep.canvas).attr('data-output', output);
+
+                // bind tooltip
+                $(ep.canvas).attr('data-toggle', "tooltip");
+                $(ep.canvas).attr('data-trigger', "hover");
+                $(ep.canvas).attr('data-placement', "right");
+                $(ep.canvas).attr('data-html', "true");
+                var outputType = view.m.getNode(id).getOutputType("value");
+                $(ep.canvas).attr('title', "Type: <b>" + outputType + "</b>");
+                $(ep.canvas).tooltip();
+
+                // bind context menu to the endpoint
+                $(ep.canvas).addClass('capture-right-click');
+                $(ep.canvas).ready(function() {
+                    var menu = new ContextMenu(".jsplumb-endpoint-anchor[data-node='"+id.trim()+"'][data-output='" + output.trim() + "']", [
+                        {
+                            name: 'Create output for here',
+                            fn: () => {
+                                view.c.createOutputFromConnection(id, output);
+                            }
+                        },
+                    ]);
+                });
+            }
+            else {
+                // add input endoints
+                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 = 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')
+                            }
+                        }
+                    }, view.style.inputEndpoint);
+
+                    // add data to the endpoint div so we can identify it easier
+                    $(ep.canvas).attr('data-node', id);
+                    $(ep.canvas).attr('data-type', 'input');
+                    $(ep.canvas).attr('data-input', input);
+
+                    // bind tooltip
+                    $(ep.canvas).attr('data-toggle', "tooltip");
+                    $(ep.canvas).attr('data-trigger', "hover");
+                    $(ep.canvas).attr('data-placement', "left");
+                    $(ep.canvas).attr('data-html', "true");
+                    $(ep.canvas).attr('title', "Type:  <b>" + type + "</b>");
+                    $(ep.canvas).tooltip();
+
+                    // bind context menu to the endpoint
+                    $(ep.canvas).addClass('capture-right-click');
+                    $(ep.canvas).ready(function() {
+                        var menu = new ContextMenu(".jsplumb-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) {
+                    $(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 ep = jsPlumbInstance.addEndpoint(id, {
+                        isSource : true,
+                        isTarget : false,
+                        uuid     : uuid,
+                        anchor   : [1,0,1,0,0,offsetTop],
+                        parameters : {
+                            type: "data",
+                            source : {
+                                id  : id,
+                                output : $(this).data('key')
+                            }
+                        }
+                    }, view.style.outputEndpoint);
+
+                    // add data to the endpoint div so we can identify it easier
+                    $(ep.canvas).attr('data-node', id);
+                    $(ep.canvas).attr('data-type', "output");
+                    $(ep.canvas).attr('data-output', output);
+
+                    // bind tooltip
+                    $(ep.canvas).attr('data-toggle', "tooltip");
+                    $(ep.canvas).attr('data-trigger', "hover");
+                    $(ep.canvas).attr('data-placement', "right");
+                    $(ep.canvas).attr('data-html', "true");
+                    $(ep.canvas).attr('title', "Type: <b>" + type + "</b>");
+                    $(ep.canvas).tooltip();
+
+                    // bind context menu to the endpoint
+                    $(ep.canvas).addClass('capture-right-click');
+                    $(ep.canvas).ready(function() {
+                        var menu = new ContextMenu(".jsplumb-endpoint-anchor[data-node='"+id.trim()+"'][data-output='" + output.trim() + "']", [
+                            {
+                                name: 'Create output for here',
+                                fn: () => {
+                                    view.c.createOutputFromConnection(id, output);
+                                }
+                            },
+                        ]);
+                    });
+                });
+
+                if( data.n.isUI() && view.showEvents ) {
+                    // Make this a target for events
+                    view.jsPlumbInstance.makeTarget(id, {
+                        isSource:false,
+                        isTarget:true,
+                        uniqueEndpoint: false,
+                        anchor:"Continuous",
+                        uuid: id + "#event-in",
+                        paintStyle:{ fill:"green" },
+                        parameters: {
+                            type: "event",
+                            target: { "id" : id }
+                        },
+                    }, view.style.eventEndpoint);
+
+                    // Create an enpoint to create a new event
+                    var ep = jsPlumbInstance.addEndpoint(id,  {
+                        isSource : true,
+                        isTarget : false,
+                        uuid     : id + "#event-out",
+                        anchor   : [1, 1, 0, 1, 0, -10],
+                        parameters : {
+                            type: "event",
+                            source: { "id" : id }
+                        },
+                    }, view.style.eventEndpoint);
+
+                    // Add overlay here so we don't mess with splitConnection
+                    ep.addOverlay(["PlainArrow", { width:15, length:15, location:1, id:"arrow" }]);
+
+                    $(ep.canvas).attr('data-toggle', "tooltip");
+                    $(ep.canvas).attr('data-trigger', "hover");
+                    $(ep.canvas).attr('data-placement', "bottom");
+                    $(ep.canvas).attr('data-html', "true");
+                    $(ep.canvas).attr('title', "Connect from here ito add an event that will be triggered when this box is done computing.");
+                    $(ep.canvas).tooltip();
+                }
+            }
+
+            // enter metanode button
+            div.find('.btn-enter-metanode').click(function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                var nodeId = $(this).closest('.card').attr('id');
+                view.c.enterMetanode(nodeId);
+            });
+
+            // settings button
+            div.find('.btn-settings').click(function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                view.openBoxSettings(div.attr('id'));
+            });
+
+            // snapshot details button
+            div.find('.btn-snapshot-details').click(function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                view.openDebug(div.attr('id'));
+            });
+
+            div.click(function(e) {
+                if( e.ctrlKey ) {
+                    view.selector.toggleSelection(this);
+                }
+            });
+
+            // enable tooltips
+            div.find('[data-toggle="popover"]').popover();
+
+            // Create a contextmenu for the div
+            var contextOptions = [
+                {
+                    name: 'Remove this box',
+                    fn: () => {
+                        view.c.removeBox(id);
+                    }
+                }
+            ];
+            if( data.n.isModule() || data.n.isUI() ) {
+                contextOptions.push({
+                    name: 'Duplicate this box',
+                    fn: () => {
+                        view.c.duplicateBox(id);
+                    }
+                });
+            }
+            var nodeMenu = new ContextMenu("#" + id, contextOptions);
+        }
+    });
+}
+
+module.exports = TemplateBinds;