@dualbox/editor 1.0.1 → 1.0.3

package/js/src/v/PlumbStyle.js

@@ -0,0 +1,254 @@
+
+/**
+ *   Style of JSPlumb
+ */
+
+class GraphStyle {
+    constructor(v) {
+        this.v = v;
+
+        this.eventConnectorData = {
+            connector: [
+                "Straight",//"Flowchart",
+                { curviness:60, stub: 5, gap: 0, cornerRadius: 5, alwaysRespectStubs: false }
+            ],
+            paintStyle : {
+                lineWidth: 2,
+                strokeStyle: "#004d00",
+                joinstyle: "round",
+                outlineWidth: 0
+            },
+            hoverStyle :{
+                lineWidth: 2,
+                strokeStyle: "#003300"
+            },
+            overlays:[
+                //[ "Arrow", { width:10, length:30, location:1, id:"arrow" } ],
+            ]
+        }
+
+        // This should be all put in a connector type, but I don't manage to
+        // make it work in plumb..
+        this.connectorData = {
+            connector: [
+                "Bezier",//"Flowchart",
+                { curviness:60, stub: 5, gap: 0, cornerRadius: 5, alwaysRespectStubs: false }
+            ],
+            paintStyle : {
+                lineWidth: 4,
+                strokeStyle: "#88898a",
+                joinstyle: "round",
+                outlineWidth: 0
+            },
+            hoverStyle :{
+                lineWidth: 4,
+                strokeStyle: "#0079bf"
+            }
+        };
+
+        this.splittedConnectorData = {
+            connector: [
+                "Straight",//"Flowchart",
+                { curviness:60, stub: 5, gap: 0, cornerRadius: 5, alwaysRespectStubs: false }
+            ],
+            paintStyle : {
+                lineWidth: 4,
+                strokeStyle: "#88898a",
+                joinstyle: "round",
+                outlineWidth: 0
+            },
+            hoverStyle :{
+                lineWidth: 4,
+                strokeStyle: "#0079bf"
+            }
+        }
+
+        this.endpointData = {
+            hoverStyle : {
+                fillStyle: "#c2c2c2",
+                strokeStyle: "#727272"
+            }
+        };
+
+        this.eventEndpointData = {
+            hoverStyle : {
+                fillStyle: "#c2c2c2",
+                strokeStyle: "#003300"
+            }
+        };
+
+        this.inputEndpoint = {
+            endpoint: "Dot",
+            paintStyle: {
+                fillStyle: "#ffffff",
+                radius: 5,
+                strokeStyle: "#727272",
+                lineWidth: 2
+            },
+            //connector: this.connectorData.connector,
+            connectorOverlays:this.connectorData.overlays,
+            connectorStyle: this.connectorData.paintStyle,
+            connectorHoverStyle: this.connectorData.hoverStyle,
+            hoverPaintStyle: this.endpointData.hoverStyle,
+            connectorClass: 'data-connection',
+            cssClass: 'data-connection',
+            maxConnections: 1,
+            dropOptions: { hoverClass: "hover", activeClass: "active" },
+            overlays: [
+                [   "Label",
+                    {   location: [1, 1],
+                        id:"tip",
+                        label: "Type : -type- /n Descrpition : -desc-",
+                        cssClass: "alert alert-warning fade show inoutEndpointLabel",
+                        visible:false
+                    }
+                ]
+            ]
+        };
+
+        this.outputEndpoint = {
+            endpoint: "Dot",
+            paintStyle: {
+                fillStyle: "#ffffff",
+                radius: 5,
+                strokeStyle: "#727272",
+                lineWidth: 2
+            },
+            //connector: this.connectorData.connector,
+            connectorOverlays:this.connectorData.overlays,
+            connectorStyle: this.connectorData.paintStyle,
+            connectorHoverStyle: this.connectorData.hoverStyle,
+            connectorClass: 'data-connection',
+            cssClass: 'data-connection',
+            hoverPaintStyle: this.endpointData.hoverStyle,
+            maxConnections: -1,
+            dragOptions: {},
+            overlays: [
+                [   "Label",
+                    {   location: [1, 1],
+                        id:"tip",
+                        label: "Type : -type- /n Descrpition : -desc-",
+                        cssClass: "alert alert-warning fade show inoutEndpointLabel",
+                        visible:false
+                    }
+                ]
+            ]
+        };
+
+        this.eventEndpoint = {
+            endpoint: "Dot",
+            anchors: [ "Perimeter", { shape:"Square" } ],
+            paintStyle: {
+                fillStyle: "#fff",
+                radius: 5,
+                strokeStyle: "#004d00",
+                lineWidth: 2
+            },
+            connector: this.eventConnectorData.connector,
+            connectorOverlays:this.eventConnectorData.overlays,
+            connectorStyle: this.eventConnectorData.paintStyle,
+            connectorHoverStyle: this.eventConnectorData.hoverStyle,
+            connectorClass: 'endpoint-connection',
+            cssClass: 'endpoint-connection',
+            hoverPaintStyle: this.eventEndpointData.hoverStyle,
+            maxConnections: -1,
+            dragOptions: {},
+            overlays: [
+                [   "Label",
+                    {   location: [1, 1],
+                        id:"tip",
+                        label: "Type : -type- /n Descrpition : -desc-",
+                        cssClass: "alert alert-warning fade show inoutEndpointLabel",
+                        visible:false
+                    }
+                ]
+            ]
+        }
+
+        this.dataLineSplitterEndpoint = {
+            endpoint: "Dot",
+            paintStyle: {
+                fillStyle: "#727272",
+                radius: 3,
+                strokeStyle: "#727272",
+                lineWidth: 2
+            },
+            hoverPaintStyle: this.endpointData.hoverStyle,
+            maxConnections: 1,
+        };
+
+        this.eventLineSplitterEndpoint = {
+            endpoint: "Dot",
+            paintStyle: {
+                fillStyle: "#004d00",
+                radius: 3,
+                strokeStyle: "#004d00",
+                lineWidth: 2
+            },
+            hoverPaintStyle: this.eventEndpointData.hoverStyle,
+            maxConnections: 1,
+        }
+
+    }
+
+    // default settings for jsPlumb
+    setDefault() {
+        this.v.jsPlumbInstance.importDefaults({
+            Connector: [
+                "Bezier",//"Flowchart",
+                { curviness:50, stub: 5, gap: 0, cornerRadius: 5, alwaysRespectStubs: false }
+            ],
+        });
+    }
+
+    hideType( arg ) {
+        if( typeof arg === "string" ) {
+            var endpoint = this.v.jsPlumbInstance.getEndpoint(arg);
+        }
+        else {
+            var endpoint = arg;
+        }
+
+        if( endpoint === undefined ) {
+            console.log('Endpoint ' + arg + ' is undefined');
+            throw "nique";
+        }
+
+        // show source output type
+        var divId, type, key; [divId, type, key] = endpoint.getUuid().split('#');
+        if( endpoint.isSource ) {
+            $('#' + divId + ' .box-outputs .type[data-key="' + key + '"]').addClass('opacity0');
+        }
+        else {
+            $('#' + divId + ' .box-inputs .type[data-key="' + key + '"]').addClass('opacity0');
+        }
+    }
+
+    showType( arg ) {
+        if( typeof arg === "string" ) {
+            var endpoint = this.v.jsPlumbInstance.getEndpoint(arg);
+        }
+        else {
+            var endpoint = arg;
+        }
+
+        // show source output type
+        var divId, type, key; [divId, type, key] = endpoint.getUuid().split('#');
+        if( endpoint.isSource ) {
+            $('#' + divId + ' .box-outputs .type[data-key="' + key + '"]').removeClass('opacity0');
+        }
+        else {
+            $('#' + divId + ' .box-inputs .type[data-key="' + key + '"]').removeClass('opacity0');
+        }
+    }
+
+    showEventName( ep ) {
+        ep.getOverlay("label").setLabel( ep.getParameters().event );
+    }
+
+    hideEventName( ep ) {
+        ep.getOverlay("label").setLabel("");
+    }
+}
+
+module.exports = GraphStyle;

package/js/src/v/Selector.js

@@ -0,0 +1,239 @@
+class Selector {
+    constructor(view, container) {
+        this.view = view;
+        this.container = container;
+        // translateZ(0) avoid paint glitches in chrome as it forces a repaint every time
+        this.div = $('<div/>', { id: 'selector', hidden: true, style: "border: 1px dotted #000; position: absolute; z-index: 100; transform: translateZ(0);" });
+        this.x1 = 0;
+        this.x2 = 0;
+        this.y1 = 0;
+        this.y2 = 0;
+
+        this.startEventHandler = this.onSelectionStart.bind(this);
+        this.moveEventHandler  = this.onSelectionMove.bind(this);
+        this.stopEventHandler  = this.onSelectionStop.bind(this);
+
+        // offset difference relative to pageX/Y
+        // we can't use offsetX and offsetY directly cause their value will be 0
+        // if we go over another div
+        this.diffX = null;
+        this.diffY = null;
+
+        this.onSelectCb = null;
+        this.onSelectingCb = null;
+        this.onDeselectCb = null;
+
+        this.selection = []; // list of selected divs
+
+        this.initialize();
+    }
+
+    initialize() {
+        this.container.append(this.div);
+        this.container.off('mousedown', this.startEventHandler);
+        this.container.off('mousemove', this.moveEventHandler);
+        this.container.off('mouseup',   this.stopEventHandler);
+        this.container.on('mousedown', this.startEventHandler);
+        this.container.on('mousemove', this.moveEventHandler);
+        this.container.on('mouseup',   this.stopEventHandler);
+    }
+
+    getSelection() {
+        return this.selection;
+    }
+
+    deselect() {
+        this.onDeselectCb(this.selection);
+        this.selection = [];
+    }
+
+    isSelected(div) {
+        var selected = false;
+        _.each(this.selection, (selectedDiv) => {
+            if( $(div).is( $(selectedDiv) ) ) {
+                selected = true;
+                return false; // end of loop
+            }
+        });
+        return selected;
+    }
+
+    addToSelection(div) {
+        this.selection.push(div);
+        this.onSelectCb(this.selection);
+    }
+
+    removeFromSelection(div) {
+        var i = 0;
+
+        // find the index
+        _.each(this.selection, (selectedDiv, index) => {
+            if( $(div).is( $(selectedDiv) ) ) {
+                i = index;
+                return false; // end of loop
+            }
+        });
+
+        this.selection.splice(i, 1);
+        this.onDeselectCb([div]);
+    }
+
+    toggleSelection(div) {
+        if( this.isSelected(div) ) {
+            this.removeFromSelection(div);
+        }
+        else {
+            this.addToSelection(div);
+        }
+        this.handleSelectionMenu();
+    }
+
+    onSelect( cb ) {
+        this.onSelectCb = cb;
+    }
+
+    onSelecting( cb ) {
+        this.onSelectingCb = cb;
+    }
+
+    onDeselect( cb ) {
+        this.onDeselectCb = cb;
+    }
+
+    reCalc() {
+        var x3 = Math.min(this.x1,this.x2);
+        var x4 = Math.max(this.x1,this.x2);
+        var y3 = Math.min(this.y1,this.y2);
+        var y4 = Math.max(this.y1,this.y2);
+
+        this.div[0].style.left = (x3 - this.diffX) + 'px';
+        this.div[0].style.top = (y3 - this.diffY) + 'px';
+        this.div[0].style.width = (x4 - x3) + 'px';
+        this.div[0].style.height = (y4 - y3) + 'px';
+    }
+
+    onSelectionStart(e) {
+        // capture only if:
+        // - it's left click
+        // - it's over the container
+        // - it's not over a container's button
+        // - it's not over a "capture-left-click" item
+        if( e.which === 1 &&
+            this.container.find('.btn:hover').length == 0 &&
+            this.container.find('.nodrag:hover').length == 0 &&
+            this.container.find('.jsplumb-connector:hover').length == 0 &&
+            this.container.find('.capture-left-click:hover').length == 0
+        ) {
+            if( this.container.is(':hover') ) {
+                // we're starting a selection
+                e.preventDefault();
+                e.stopPropagation();
+
+                // remove previous selection
+                if( this.onDeselectCb ) {
+                    this.onDeselectCb(this.selection);
+                    this.selection = [];
+                }
+
+                this.selecting = true;
+                this.div[0].hidden = 0;
+                this.x1 = this.x2 = e.pageX;
+                this.y1 = this.y2 = e.pageY;
+
+
+                var rect = e.currentTarget.getBoundingClientRect();
+                this.diffX = rect.left;
+                this.diffY = rect.top;
+                this.reCalc();
+            }
+        }
+    }
+
+    onSelectionMove(e) {
+        if( this.selecting ) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            //console.log('[SELECTION] moving');
+            this.x2 = e.pageX;
+            this.y2 = e.pageY;
+            this.reCalc();
+
+            if( this.onSelectingCb ) {
+                // now we have our area, find all divs in it and return
+                // result to the onSelectCb
+                this.findCardDivs({
+                    left   : Math.min(this.x1, this.x2),
+                    right  : Math.max(this.x1, this.x2),
+                    top    : Math.min(this.y1, this.y2),
+                    bottom : Math.max(this.y1, this.y2)
+                }, (divs) => {
+                    this.selection = divs;
+                    this.handleSelectionMenu();
+                    this.onSelectingCb(this.selection);
+                });
+            }
+        }
+    }
+
+    onSelectionStop(e) {
+        if( this.selecting && e.which === 1 ) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            //console.log('[SELECTION] stop');
+            this.selecting = false;
+            this.div[0].hidden = 1;
+
+            if( this.onSelectCb ) {
+                // now we have our area, find all divs in it and return
+                // result to the onSelectCb
+                this.findCardDivs({
+                    left   : Math.min(this.x1, this.x2),
+                    right  : Math.max(this.x1, this.x2),
+                    top    : Math.min(this.y1, this.y2),
+                    bottom : Math.max(this.y1, this.y2)
+                }, (divs) => {
+                    this.selection = divs;
+                    this.handleSelectionMenu();
+                    this.onSelectCb(this.selection);
+                });
+            }
+        }
+    }
+
+    findCardDivs( area, cb ) {
+        var self = this;
+        var selectedCards = [];
+        this.container.find('.card, .connection-control').each(function() {
+            if( self._intersects( $(this), area ) ) {
+                selectedCards.push($(this));
+            }
+        });
+
+        cb(selectedCards);
+    }
+
+    // utilities
+    _intersects( div, area ) {
+        var r1 = $(div)[0].getBoundingClientRect();
+        var r2 = area;
+        var res = !(r2.left > r1.right ||
+           r2.right < r1.left ||
+           r2.top > r1.bottom ||
+           r2.bottom < r1.top);
+        return res;
+    }
+
+    // show/hide the selection menu if we have more than 2 divs selected
+    handleSelectionMenu() {
+        if( this.selection.length > 1 ) {
+            this.view.div.find('.selection-menu').show();
+        }
+        else {
+            this.view.div.find('.selection-menu').hide();
+        }
+    }
+}
+
+module.exports = Selector;

package/js/src/v/TemplateManager.js

@@ -0,0 +1,79 @@
+// don't call this, just tricking browserify into thinking we use thoses
+// It allows use to make dynamic require later (see appendTemplate)
+function trickBrowserify() {
+    //require('./templates/*', { glob: true }); - don't work with es2015
+    require('./templates/addNode.css');
+    require('./templates/addNode.html');
+    require('./templates/addNode.js');
+
+    require('./templates/graphNode.css');
+    require('./templates/graphNode.html');
+    require('./templates/graphNode.js');
+
+    require('./templates/main.css');
+    require('./templates/main.html');
+    require('./templates/main.js');
+
+    require('./templates/searchResults.css');
+    require('./templates/searchResults.html');
+    require('./templates/searchResults.js');
+
+    require('./templates/editNodeSettings.css');
+    require('./templates/editNodeSettings.html');
+    require('./templates/editNodeSettings.js');
+
+    require('./templates/editMainSettings.css');
+    require('./templates/editMainSettings.html');
+    require('./templates/editMainSettings.js');
+
+    require('./templates/debugNodeInfos.css');
+    require('./templates/debugNodeInfos.html');
+    require('./templates/debugNodeInfos.js');
+}
+
+/**
+ *   Class that handle loading/reloading of templates
+ */
+class TemplateManager {
+    constructor(view) {
+        this.view = view;
+        this.templates = {};
+    }
+
+    appendTemplate(container, templateName, templateData, cb) {
+        if( !this.templates[templateName] ) {
+            this.templates[templateName] = {
+                "cssLoaded" : false
+            }
+        }
+
+        // load the HTML
+        var templateHTML = require('./templates/' + templateName + '.html');
+
+        // load css if necessary
+        if( !this.templates[templateName].cssLoaded ) {
+            require('./templates/' + templateName + '.css'); // require is enough to inject css
+            this.templates[templateName].cssLoaded = true;
+        }
+
+        // append the HTML to the selected container
+        var div = $(templateHTML(templateData))
+        container.append( div );
+        container.ready(() => {
+            // now load the .js file to bind behaviors
+            var templateJs = require('./templates/' + templateName + '.js');
+            templateJs(this.view, div, templateData); // run all the binds (give the view as parameter)
+
+            if( cb ) cb(div);
+        });
+    }
+
+    replaceTemplate(container, templateName, templateData, cb) {
+        container.empty();
+        this.appendTemplate(container, templateName, templateData, cb);
+    }
+
+
+}
+
+module.exports = TemplateManager;