@dualbox/editor 1.0.1 → 1.0.3

package/js/src/m/History.js

@@ -0,0 +1,94 @@
+/**
+ *   Object to manage ctrl-z/ctrl-y
+ *   Manages the different states of the model and is able to restore them
+ */
+
+const _ = require('lodash');
+
+class History {
+    constructor(model) {
+        this.m = model;
+
+        this.states = [];    // all saved states
+
+        this._holdSaving = false; // if true, save() will have no effect
+        this.maxStates = 30; // to be changed accordingly
+
+        // info needed if we cycle through the array
+        this.reachedMaxStates = false;
+        this.oldestStateIndex = 0; // pointer to the oldest state
+
+        this.current = -1;
+    }
+
+    // clean all states and set this one as a start
+    reset() {
+        this.states = [];
+        this.current = -1;
+        this.save();
+    }
+
+    pushState( state ) {
+        this.states.push(state);
+        if( this.states.length > this.maxStates ) {
+            this.states.shift();
+            this.current--;
+        }
+    }
+
+    save() {
+        if( !this._holdSaving ) {
+            var state = _.cloneDeep(this.m.data); // deep clone
+            state.metadata = { savedAt : new Date() };
+            this.pushState(state);
+            this.current++;
+            console.log("state saved");
+        }
+    }
+
+    undo() {
+        if( this.current > 0 ) {
+            this.current--;
+        }
+
+        if( this.current >= 0 ) {
+            console.log('undo');
+            this.setState( this.states[this.current] );
+        }
+    }
+
+    redo() {
+        if( this.current < this.states.length - 1 ) {
+            this.current++;
+        }
+
+        if( this.current >= 0 ) {
+            console.log('redo');
+            this.setState( this.states[this.current] );
+        }
+    }
+
+    setState(state) {
+        this.m.data = state;
+    }
+
+    holdSaving(b) {
+        this._holdSaving = b;
+    }
+
+    // execute the callback and save the history as 1 change
+    batch( cb ) {
+        this.holdSaving(true);
+        cb();
+        this.holdSaving(false);
+        this.save();
+    }
+
+    ignore( cb ) {
+        this.holdSaving(true);
+        cb();
+        this.holdSaving(false);
+    }
+}
+
+module.exports = History;

package/js/src/m/Merger.js

@@ -0,0 +1,357 @@
+/**
+ *   Object to perform a "good-enough" merge
+ *   merges a set of boxes into a metanode with the minimal set of input/output
+ *   needed to preserve the actual app behavior
+ */
+
+const _ = require('lodash');
+const utils = require('./DualboxUtils');
+
+class Merger {
+    constructor(model, ids) {
+        this.m = model;
+        this.ids = ids;
+
+        // the future metabox definition
+        this.def = {
+            desc: "",
+            metanodes: {},
+            input: {},
+            output: {},
+            modules: {},
+        }
+
+        this.nodes = [];
+        _.each(ids, (id) => {
+            this.nodes.push( this.m.getNode(id) );
+        });
+
+        this.id = null;
+
+        // links from and to outside
+        this.inboundLinksFromOutside = [];
+        this.outboundLinksToOutside  = [];
+    }
+
+    // merge all divs into a metabox
+    // ids: array of ids from the boxes to be merged
+    // metaboxName: name of the new metabox
+    // metaboxDesc: description of the new metabox
+    merge( metaboxName, metaboxDesc ) {
+        this.def.desc = metaboxDesc;
+
+        this.m.history.batch( () => {
+            // 0. create a new ID for our metanode
+            this.id = metaboxName + '-' + utils.randomString(8);
+
+            // 0. set a better position for the nodes
+            var bbox = this._computeBbox();
+            this._repositionNodes();
+
+            // 1. collect and detach the links from and to outside the metanode
+            this._collectAndDetachExternalLinks();
+
+            // 2. create the metabox inputs and outputs, and update the links definitions
+            this._createInputs();
+            this._createOutputs();
+
+            // 3. move the nodes to the new structure
+            this._moveNodes();
+
+            // 4. bind our nodes to the new inputs and outputs
+            this._bindInputs();
+            this._bindOutputs();
+
+            // 5. Our metanode definition is ready, add it to the app
+            this.m.data.app.metanodes = this.m.data.app.metanodes || {};
+            this.m.data.app.metanodes[ metaboxName ] = this.def;
+
+            // 6. Create a new node from this def
+            this.m.data.app.modules[this.id] = {
+                "module" : metaboxName,
+                "version": "*",
+                "graph"  : {
+                    "position" : {
+                        top  : (bbox.top + bbox.bottom) / 2,
+                        left : (bbox.left + bbox.right) / 2
+                    }
+                }
+            };
+
+            // 7. link our node to the rest of the graph
+            this._bindMetanodeInputs();
+            this._bindMetanodeOutputs();
+        });
+    }
+
+    _debug() {
+        console.log( this.def );
+    }
+
+    _isInMetanode( id ) {
+        var inGroup = false;
+        _.each( this.nodes, (node) => {
+            if( node.id === id ) {
+                inGroup = true;
+                return false; // eol
+            }
+        });
+        return inGroup;
+    }
+
+    // find the links from and to outside the metanode
+    _collectAndDetachExternalLinks() {
+        _.each( this.nodes, (node) => {
+            var links = node.getInboundLinks();
+            _.each( links, (link) => {
+                if( !this._isInMetanode(link.sourceId) ) {
+                    link.detach(); // we don't need this link anymore
+                    this.inboundLinksFromOutside.push( link );
+                }
+            });
+
+            var links = node.getOutboundLinks();
+            _.each( links, (link) => {
+                if( !this._isInMetanode(link.targetId) ) {
+                    link.detach();
+                    this.outboundLinksToOutside.push( link );
+                }
+            });
+        });
+    }
+
+    // transform "cond" into "cond2", or "cond3" if cond2 is taken, etc.
+    _nextName( type, name ) {
+        // find the appropriate number end (that is not taken already)
+        var ending = 2;
+        if( type == "input" ) {
+            while( this.def.input[ name + "-" + ending ] ) ending++;
+        }
+        else {
+            while( this.def.output[ name + "-" + ending ] ) ending++;
+        }
+        return name+"-"+ending;
+    }
+
+    // find and create the metabox inputs
+    _createInputs() {
+        // dic of input -> link (that created this input)
+        var inputToLinks = {};
+
+        // function to find the inputName corresponding to this link's source
+        // (if it has been created already)
+        var getInputNameForThisLink = function(l) {
+            var r = null;
+            _.each(inputToLinks, (link, inputName) => {
+                if( link.sourceId == l.sourceId && link.sourceOutput == l.sourceOutput ) {
+                    r = inputName;
+                    return false;
+                }
+            })
+            return r;
+        }
+
+        // the inputs are determined from the inbound links of the metanode
+        _.each(this.inboundLinksFromOutside, (link, index) => {
+            var targetNode = link.getTargetNode();
+
+            // get the original input name, rename if necessary
+            var inputName = link.targetInput;
+            if( this.def.input[inputName] ) {
+                // the input already exists. Check if the link that led to the creation of this
+                // input have the same source that 'link'. Otherwise, we create another input.
+                var l = inputToLinks[inputName];
+
+                // check if an input for this source has already been created
+                // otherwise, create a new one
+                var lookupInputName = getInputNameForThisLink(link);
+                inputName = lookupInputName ? lookupInputName : this._nextName("input", inputName);
+            }
+
+            this.def.input[ inputName ] = {
+                type: targetNode.getInputType( link.targetInput ),
+                graph: {
+                    position: this._computeInputSmartPosition(index)
+                }
+            }
+
+            // update the link with the new target, but don't attach it yet
+            // (the metanode isnt created yet)
+            link.nextTargetId = this.id;
+            link.nextTargetInput = inputName;
+
+            // save our link in the dictionary
+            inputToLinks[ inputName ] = link;
+        });
+    }
+
+    // create the metabox outputs
+    _createOutputs() {
+        // the inputs are determined from the inbound links of the metanode
+        _.each(this.outboundLinksToOutside, (link, index) => {
+            var sourceNode = link.getSourceNode();
+
+            var outputName = link.sourceOutput;
+            if( this.def.output[ outputName ] ) {
+                // check if the source of the output is the same as this link
+                var outputLink = this.def.output[outputName].link;
+                var sourceId = _.keys(outputLink)[0];
+                var sourceOutput = outputLink[sourceId];
+
+                if( !(link.sourceId == sourceId && link.sourceOutput == sourceOutput) ) {
+                    // the output already exists. we need to create another one.
+                    outputName = this._nextName("output", outputName);
+                }
+            }
+
+            var l = {};
+            l[link.sourceId] = link.sourceOutput;
+            this.def.output[ outputName ] = {
+                type: sourceNode.getOutputType( link.sourceOutput ),
+                graph: {
+                    position: this._computeOutputSmartPosition(index)
+                },
+                link: l
+            }
+
+            // update the link with the new target, but don't attach it yet
+            // (the metanode isnt created yet)
+            link.nextSourceId = this.id;
+            link.nextSourceOutput = outputName;
+        });
+    }
+
+    _repositionNodes() {
+        // find the lowest left, top coordinates to reposition nodes from there
+        var top = Number.MAX_SAFE_INTEGER;
+        var left = Number.MAX_SAFE_INTEGER;
+        _.each(this.nodes, (node) => {
+            var pos = node.getPosition();
+            if( pos.top < top ) top = pos.top;
+            if( pos.left < left ) left = pos.left;
+        });
+
+        // we want to put theses node to 50px top and 50px left, so compute the diff
+        var topdiff = top - 50;
+        var leftdiff = left - 250;
+        if( topdiff < 0 ) topdiff = 0;
+        if( leftdiff < 0 ) leftdiff = 0;
+
+        // reposition all nodes
+        _.each(this.nodes, (node) => {
+            var pos = node.getPosition();
+            pos.left = pos.left - leftdiff;
+            pos.top = pos.top - topdiff;
+            node.setPosition(pos);
+        });
+    }
+
+    _moveNodes() {
+        // move the nodes into the Metamodule def
+        _.each(this.nodes, (node) => {
+            if( node.isMetanode() ) {
+                // move the metanode definition too
+                this.def.metanodes[ node.def.module ] = node.getMetanodeDefinition();
+            }
+
+            // move the node module definition (preserving the links between metabox's node)
+            this.def.modules[node.id] = this.m.data.app.modules[ node.id ];
+            delete this.m.data.app.modules[node.id];
+
+            if( node.isMetanode() ) {
+                // if the metanode isn't still in use in the main app, remove def from here
+                if( !this.m.isMetanodeUsed(node.def.module) ) {
+                    delete this.m.data.app.metanodes[node.def.module];
+                }
+            }
+        });
+    }
+
+    _bindInputs() {
+        _.each(this.inboundLinksFromOutside, (link) => {
+            // we created an input with the same name, bind it to it
+            this.def.modules[link.targetId].links[link.targetInput] = { "input" : link.nextTargetInput };
+        });
+    }
+
+    _bindOutputs() {
+        _.each(this.outboundLinksToOutside, (link) => {
+            // we created an output with the same name, bind it to it
+            this.def.output[link.nextSourceOutput].link = {};
+            this.def.output[link.nextSourceOutput].link[link.sourceId] = link.sourceOutput;
+        });
+    }
+
+    _bindMetanodeInputs() {
+        _.each(this.inboundLinksFromOutside, (link) => {
+            link.targetId = link.nextTargetId;
+            link.targetInput = link.nextTargetInput;
+            link.attach();
+        });
+    }
+
+    _bindMetanodeOutputs() {
+        _.each(this.outboundLinksToOutside, (link) => {
+            link.sourceId = link.nextSourceId;
+            link.sourceOutput = link.nextSourceOutput;
+            link.attach();
+        });
+    }
+
+
+    // compute the bbox of all divs beeing merged, position the new div in the middle
+    _computeBbox() {
+        var most = {
+            top:    +Infinity,
+            bottom: -Infinity,
+            left:   +Infinity,
+            right:  -Infinity
+        };
+
+        _.each( this.nodes, (node) => {
+            var pos = node.getPosition();
+            if( pos.top < most.top ) most.top = pos.top;
+            if( pos.top > most.bottom ) most.bottom = pos.top;
+            if( pos.left < most.left ) most.left = pos.left;
+            if( pos.left > most.right ) most.right = pos.left;
+        });
+
+        return most;
+    }
+
+    _getPositioningValues() {
+        // todo: get a better system with the real bbox
+        return {
+            width       : 100,
+            height      : 80,
+            hMargin     : 80,
+            vMargin     : 20,
+            divAvgWidth : 150
+        }
+    }
+
+    // compute the "smart" position of the 'i'th input
+    _computeInputSmartPosition(i) {
+        var most = this._computeBbox();
+        var v = this._getPositioningValues();
+        return {
+            top: most.top + (v.height + v.vMargin) * i,
+            left: most.left - (v.width + v.hMargin),
+        }
+    }
+
+    // compute the "smart" position of the 'i'th output
+    _computeOutputSmartPosition(i) {
+        var most = this._computeBbox();
+        var v = this._getPositioningValues();
+        return {
+            top: most.top + (v.height + v.vMargin) * i,
+            left: most.right + v.divAvgWidth + (v.width + v.hMargin),
+        }
+    }
+}
+
+module.exports = Merger;
+
+
+

package/js/src/v/AppManager.js

@@ -0,0 +1,61 @@
+/**
+ *  This object is in charge of managing the application state
+ */
+
+const _ = require('lodash');
+
+class AppManager {
+    constructor(view, div) {
+        this.div = div;
+        this.app = null;
+        this.loaded = false;
+    }
+
+    kill() {
+        if( this.app ) {
+            this.app.kill();
+            this.app = null;
+        }
+    }
+
+    load(cb) {
+        if( this.loaded ) {
+            cb();
+        }
+        else {
+            /* todo: load dynamically .js ressources from the app */
+            this.loaded = true;
+            cb();
+        }
+    }
+
+    run(json, options, cb) {
+        this.kill(); // ensure we don't run it twice
+        if( typeof DualBox != "undefined" ) {
+            options.json = json;
+            options.translations = null;
+            options.lang = null;
+            options.div = this.div;
+            options.profiler = options.profiler || false;
+            options.logLevel = options.logLevel || false;
+            options.options = options.options || {};
+            options.options.NoVersionCheck = options.options.NoVersionCheck || true;
+            options.options.debug = options.options.debug || false;
+            options.options.debug.makeSynchrone = options.options.debug.makeSynchrone || false;
+            options.options.debug.removeTryCatch = options.options.debug.removeTryCatch || false;
+            options.options.debug.record = options.options.debug.record || false;
+
+            this.app = DualBox.start(options);
+            this.app.start(cb);
+        }
+        else {
+            setTimeout( this.run.bind(this, json, options, cb), 1000 );
+        }
+    }
+
+    getSnapshot() {
+        return this.app.getSnapshot();
+    }
+}
+
+module.exports = AppManager;

package/js/src/v/CanvasSizeHandler.js

@@ -0,0 +1,136 @@
+/**
+ *  This object is in charge of keeping the canvas to the right size
+ *  when called with the dragging() method
+ */
+
+const _ = require('lodash');
+
+class CanvasSizeHandler {
+    constructor(view, canvas) {
+        this.view = view;
+        this.canvas = canvas;
+        this.minWidth  = this.width  = this.canvas.width();
+        this.minHeight = this.height = this.canvas.height();
+
+        // arbitrary: number of pixels to expand/shrink the canvas for 1 step
+        // if a div is less than 1 step away from the border of the canvas, we expand
+        this.treshold = 50;
+        this.shiftTreshold = 200;
+
+        // debounced resize
+        this.debouncedResize = _.debounce(this.resize.bind(this), 100);
+
+        this.z = 0; // current zoom
+    }
+
+    refreshZoom( z ) {
+        this.z = z;
+    }
+
+    // set the current width and height to the new canvas
+    apply() {
+        if( this.canvas.width() !== this.width ) {
+            console.log('setting canvas width: %s -> %s', this.canvas.width(), this.width);
+            this.canvas.width(this.width);
+        }
+        if( this.canvas.height !== this.height ) {
+            console.log('setting canvas height: %s -> %s', this.canvas.height(), this.height);
+            this.canvas.height(this.height);
+        }
+    }
+
+    // method to call when an element is positioned or dragged
+    // el: div element
+    resize() {
+        // dont trigger save
+        this.view.m.history.ignore(() => {
+            // refresh zoom value, zoom affects width, height and offset calculations
+            this.refreshZoom( this.view.zoomer.getZoom() );
+
+            // find the coord of the 2d box bounding all divs
+            var most = {
+                top:    +Infinity,
+                bottom: -Infinity,
+                left:   +Infinity,
+                right:  -Infinity
+            };
+            this.canvas.find('.card').each(function() {
+                var rect = this.getBoundingClientRect();
+                if( rect.top < most.top ) most.top = Math.floor(rect.top);
+                if( rect.bottom > most.bottom ) most.bottom = Math.ceil(rect.bottom);
+                if( rect.left < most.left ) most.left = Math.floor(rect.left);
+                if( rect.right > most.right ) most.right = Math.ceil(rect.right);
+            });
+
+            // compare to the canvas coord
+            var canvasRect = this.canvas[0].getBoundingClientRect();
+
+            var r = {
+                top:    canvasRect.top - most.top + this.treshold * this.z,
+                bottom: most.bottom - canvasRect.bottom + this.treshold * this.z,
+                left:   canvasRect.left - most.left + this.treshold * this.z,
+                right:  most.right - canvasRect.right + this.treshold * this.z
+            }
+
+            // avoid to resize for some pixel roundup
+            if( Math.abs(r.top) > 2 || Math.abs(r.left) > 2 || Math.abs(r.bottom) > 2 || Math.abs(r.right) > 2 ) {
+                // resize width and height
+                this.width += r.left + r.right;
+                this.height += r.top + r.bottom;
+                if( this.width < this.minWidth ) this.width = this.minWidth;
+                if( this.height < this.minHeight ) this.height = this.minHeight;
+                this.apply();
+
+                // if we're expanding to the top or shrinking back, move the non-selected divs
+                // in the opposite direction
+                if( r.top > 0 || (r.top < 0 && this.height > this.minHeight)  ) {
+                    // move the non-selected divs to the bottom
+                    this.canvas.find('.card:not(.selected)').each(function() {
+                        var offset = $(this).offset();
+                        offset.top += r.top;
+                        $(this).offset(offset);
+                        $(this).savePosition();
+                    });
+
+                    this.view.translater.translate({
+                        top: -r.top,
+                        left: 0,
+                    });
+                }
+
+                // same for left
+                if( r.left > 0 || (r.left < 0 && this.width > this.minWidth) ) {
+                    // move the non-selected divs to the right
+                    this.canvas.find('.card:not(.selected)').each(function() {
+                        var offset = $(this).offset();
+                        offset.left += r.left;
+                        $(this).offset(offset);
+                        $(this).savePosition();
+                    });
+
+                    this.view.translater.translate({
+                        top: 0,
+                        left: -r.left,
+                    });
+                }
+
+                this.view.jsPlumbInstance.repaintEverything();
+            }
+        });
+
+        // return a Promise if we need to wait for this call
+        return new Promise((resolve, reject) => {
+            this.canvas.ready(resolve);
+        });
+    }
+
+    getIncreasedWidth() {
+        return this.width - this.minWidth;
+    }
+
+    getIncreasedHeight() {
+        return this.height - this.minHeight;
+    }
+}
+
+module.exports = CanvasSizeHandler;

package/js/src/v/ContextMenu.css

@@ -0,0 +1,45 @@
+.ContextMenu {
+  display: none;
+  list-style: none;
+  margin: 0;
+  max-width: 250px;
+  min-width: 125px;
+  padding: 0;
+  position: absolute;
+  user-select: none;
+}
+.ContextMenu--theme-default {
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  font-size: 13px;
+  outline: 0;
+  padding: 2px 0;
+}
+.ContextMenu--theme-default .ContextMenu-item {
+  padding: 6px 12px;
+}
+.ContextMenu--theme-default .ContextMenu-item:hover,
+.ContextMenu--theme-default .ContextMenu-item:focus {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.ContextMenu--theme-default .ContextMenu-item:focus {
+  outline: 0;
+}
+.ContextMenu--theme-default .ContextMenu-divider {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+.ContextMenu.is-open {
+  display: block;
+}
+.ContextMenu-item {
+  cursor: pointer;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ContextMenu-divider {
+  height: 1px;
+  margin: 4px 0;
+}