@dualbox/editor 1.0.1 → 1.0.3

package/js/src/v/Translater.js

@@ -0,0 +1,174 @@
+const _ = require('lodash');
+
+class Translater {
+    constructor(view, container, canvas) {
+        this.view = view;
+        this.container = container;
+        this.canvas = canvas;
+
+        this.translating = false;
+
+        this.startEventHandler = this.onTranslateStart.bind(this);
+        this.moveEventHandler  = this.onTranslateMove.bind(this);
+        this.stopEventHandler  = this.onTranslateStop.bind(this);
+
+        this.originalOffset = this.canvas.offset();
+
+        this.x = null;
+        this.y = null;
+
+        this.dragging = false;
+    }
+
+    getTranslation() {
+        return {
+            top:  this.canvas.offset().top - this.originalOffset.top,
+            left: this.canvas.offset().left - this.originalOffset.left
+        }
+    }
+
+    setTranslation( t ) {
+        this.canvas.offset({
+            top: this.originalOffset.top + t.top,
+            left: this.originalOffset.left + t.left,
+        });
+    }
+
+    translate( t ) {
+        this.canvas.offset({
+            top:  this.canvas.offset().top + t.top,
+            left: this.canvas.offset().left + t.left
+        });
+    }
+
+    initialize() {
+        this.container.off('mousedown', this.startEventHandler);
+        $(document).off('mousemove', this.moveEventHandler);
+        $(document).off('mouseup',   this.stopEventHandler);
+        this.container.on('mousedown', this.startEventHandler);
+        $(document).on('mousemove', this.moveEventHandler);
+        $(document).on('mouseup',   this.stopEventHandler);
+
+        // override the context menu default behavior
+        this.container.off('contextmenu');
+        this.container.on('contextmenu', (e) => {
+            if( !this.isCapturingRightClick(e.target) ) {
+                e.stopPropagation();
+                e.preventDefault();
+                return false;
+            }
+        });
+    }
+
+    isCapturingRightClick(target) {
+        return $(target).closest('.capture-right-click').length !== 0;
+    }
+
+    onTranslateStart(e) {
+        if( e.which === 3 && !this.isCapturingRightClick(e.target) && $('.capture-right-click:hover').length == 0 ) { // right click
+            if( !$('div:hover').is('.contextmenu') ) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            }
+
+            //console.log('[TRANSLATION] start');
+            this.translating = true;
+            this.container.addClass('translating');
+
+            this.x = e.pageX;
+            this.y = e.pageY;
+
+            this.dragging = false;
+        }
+    }
+
+    onTranslateMove(e) {
+        if( this.translating ) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            //console.log('[TRANSLATION] moving');
+            var translateX = this.x - e.pageX;
+            var translateY = this.y - e.pageY;
+
+            var offset = this.canvas.offset();
+            this.canvas.offset({
+                top:  offset.top - translateY,
+                left: offset.left - translateX
+            });
+
+            this.x = e.pageX;
+            this.y = e.pageY;
+
+            this.dragging = true;
+        }
+    }
+
+    onTranslateStop(e) {
+        if( this.translating && e.which === 3 ) {
+            if( this.dragging ) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            }
+            else {
+                // there wasnt any movement, trigger a contextmenu here
+                if( !this.isCapturingRightClick(e.target) ) {
+                    $('.capture-right-click:hover').triggerHandler('contextmenu');
+                }
+            }
+
+            //console.log('[TRANSLATION] stop');
+            this.translating = false;
+            this.container.removeClass('translating');
+        }
+    }
+
+    // correct offset if the left menu is open
+    correctOffset( offset ) {
+        if( this.view.isLeftMenuExpanded() ) {
+            offset.left += 465;
+        }
+        /*
+        if( this.view.isRightMenuExpanded() ) {
+            offset.left += 35;
+        }
+        */
+        return offset;
+    }
+
+    gotoTopLeft() {
+        var offset = this.correctOffset(_.clone(this.originalOffset));
+        this.canvas.offset(offset);
+        return new Promise((resolve) => this.canvas.ready(resolve));
+    }
+
+    gotoBottomLeft() {
+        var zoom = this.view.zoomer.getZoom();
+        var offset = _.clone(this.originalOffset);
+        offset.top  += this.container.height() - this.canvas.height() * zoom - 2; /* canvas border */
+        offset = this.correctOffset(offset);
+        this.canvas.offset(offset);
+        return new Promise((resolve) => this.canvas.ready(resolve));
+    }
+
+    gotoTopRight() {
+        var zoom = this.view.zoomer.getZoom();
+        var offset = _.clone(this.originalOffset);
+        offset.left += this.container.width() - this.canvas.width() * zoom - 2; /* canvas border */
+        offset = this.correctOffset(offset);
+        this.canvas.offset(offset);
+        return new Promise((resolve) => this.canvas.ready(resolve));
+    }
+
+    gotoBottomRight() {
+        var zoom = this.view.zoomer.getZoom();
+        var offset = _.clone(this.originalOffset);
+        offset.top  += this.container.height() - this.canvas.height() * zoom - 2; /* canvas border */
+        offset.left += this.container.width() - this.canvas.width() * zoom - 2; /* canvas border */
+        offset = this.correctOffset(offset);
+        this.canvas.offset(offset);
+        return new Promise((resolve) => this.canvas.ready(resolve));
+    }
+}
+
+module.exports = Translater;

package/js/src/v/Utils.js

@@ -0,0 +1,7 @@
+function htmlentities(str) {
+    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+module.exports = {
+    htmlentities : htmlentities
+};

package/js/src/v/Zoomer.js

@@ -0,0 +1,201 @@
+class Zoomer {
+    constructor(view, container, canvas) {
+        this.view = view;
+        this.container = container;
+        this.canvas = canvas;
+        this.currentZoom = 1;
+
+        this.canvasWidth = this.canvas.width();
+        this.canvasHeight = this.canvas.height();
+
+        this.transform = null;
+
+        this.currentlyZooming = false;
+        this.nextZoom = false;
+    }
+
+    initialize() {
+        this.container.off('mousewheel');
+        this.container.on('mousewheel', (e) => {
+            // normalize wheel to +1 or -1
+            if(e.originalEvent.wheelDelta / 120 > 0) {
+                this.zoomIn(e);
+            }
+            else{
+                this.zoomOut(e);
+            }
+        });
+    }
+
+    getZoom() {
+        return this.currentZoom;
+    }
+
+    saveState() {
+        var el = this.view.jsPlumbInstance.getContainer();
+        return {
+            "currentZoom" : this.currentZoom,
+            "offset"      : this.canvas.offset(),
+            "transform"   : el.style["transform"],
+            "transition"  : el.style["transition"],
+            "transformOrigin" : el.style["transform-origin"],
+        }
+    }
+
+    restoreState( savedZoom ) {
+        this.currentZoom = savedZoom.currentZoom;
+        var el = this.view.jsPlumbInstance.getContainer();
+        $(el).one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", () => {
+            $(this.canvas).offset(savedZoom.offset);
+            this.view.jsPlumbInstance.setZoom(this.currentZoom);
+            this.view.jsPlumbInstance.repaintEverything();
+        });
+        el.style["transition"] = savedZoom.transition;
+        el.style["transform"] = savedZoom.transform;
+        el.style["transform-origin"] = savedZoom.transformOrigin;
+    }
+
+    // zoom in or out
+    // - zoom: value between 0 and 1
+    // - e: if e is defined, we make sure the mouse stays on the same point
+    setZoom(zoom, e) {
+        this.currentlyZooming = true;
+
+        var el = this.view.jsPlumbInstance.getContainer();
+
+        // set the scale
+        var s = "scale(" + zoom + ")";
+
+        var elOffset = this.canvas.offset();
+
+        // set the transform origin
+        if( e ) {
+            /*
+            // NODE: this works exactly like 50% 50%
+            // compute current distance from the center of the canvas
+            var canvasCenterX = this.canvas.width()/ 2;
+            var canvasCenterY = this.canvas.height()/ 2;
+            var oString = canvasCenterX + "px " + canvasCenterY + "px";
+            */
+
+            // find our current mouse position on this canvas
+            var mouseX = (e.pageX - this.canvas.offset().left) / (this.canvas.width() * this.currentZoom);
+            var mouseY = (e.pageY - this.canvas.offset().top) / (this.canvas.height() * this.currentZoom);
+
+            var oString = (mouseX*100) + "% " + (mouseY*100) + "%";
+        }
+        else {
+            var oString = "50% 50%";
+        }
+
+        return new Promise( (resolve) => {
+            if( this.currentZoom == zoom ) {
+                this.currentlyZooming = false;
+                resolve();
+            }
+            else {
+                $(el).one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", () => {
+                    this.view.jsPlumbInstance.setZoom(this.currentZoom, true);
+                    this.currentlyZooming = false;
+                    $(el).ready(resolve);
+                });
+
+                // before we apply the transformation, remove the previous transform-origin as it messes up the new transform
+                el.style["transform"] = s;
+                el.style["transition"] = "transform 1ms ease";
+                el.style["transform-origin"] = oString;
+                $(el).offset(elOffset);
+
+                this.currentZoom = zoom;
+            }
+        });
+    }
+
+    zoomIn(e) {
+        // On big apps, zoom can be not real-time.
+        if( this.currentlyZooming ) {
+            clearTimeout(this.nextZoom);
+            this.nextZoom = setTimeout(() => {
+                this.zoomIn(e);
+            });
+        }
+        else {
+            if( this.currentZoom + 0.1 <= 1 ) {
+                var newZoom = this.currentZoom + 0.1;
+                this.setZoom(newZoom, e);
+            }
+        }
+    }
+
+    zoomOut(e) {
+        if( this.currentlyZooming ) {
+            clearTimeout(this.nextZoom);
+            this.nextZoom = setTimeout(() => {
+                this.zoomOut(e);
+            });
+        }
+        else {
+            if( this.currentZoom - 0.1 >= 0.1 ) {
+                var newZoom = this.currentZoom - 0.1;
+                this.setZoom(newZoom, e);
+            }
+        }
+    }
+
+    sleep( count ) {
+        return new Promise((resolve) => {
+            setTimeout(resolve, count);
+        });
+    }
+
+    /*
+    // temporary remove zoom if some lib/component needs it
+    deactivate() {
+        if( this.getZoom() !== 1 ) {
+            var el = this.view.jsPlumbInstance.getContainer();
+
+            this.transform = el.style["transform"];
+            el.style["visibility"] = "hidden"; // better than resize glitch
+            el.style["transform"] = "scale(1)";
+
+            //el.style["transition"] = "none";
+            //el.style["transform-origin"] = "none";
+            return new Promise((resolve) => {
+                $(el).one("transitionend", resolve);
+            });
+        }
+        else {
+            this.transform = null;
+            return new Promise(resolve => resolve());
+        }
+    }
+
+    activate(cb) {
+        if( this.transform !== null ) {
+            var el = this.view.jsPlumbInstance.getContainer();
+            el.style["transform"] = this.transform;
+            return new Promise((resolve) => {
+                $(el).one("transitionend", () => {
+                    el.style["visibility"] = "visible";
+                    resolve();
+                });
+            });
+        }
+        else {
+            this.transform = null;
+            return new Promise(resolve => resolve());
+        }
+    }
+    */
+
+    deactivate() {
+        this.previousZoom = this.currentZoom;
+        return this.setZoom(1);
+    }
+
+    activate() {
+        return this.setZoom(this.previousZoom);
+    }
+}
+
+module.exports = Zoomer;

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

@@ -0,0 +1,45 @@
+.add-node-modal .modal-body {
+    height: 70vh;
+}
+
+.h100 {
+    height: 100%!important;
+    min-height: 100%!important;
+}
+
+.module-name {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.module-show-description, .module-show-inputs, .module-show-outputs, .module-show-attributes {
+    margin-top: 20px;
+    display: none;
+    font-size: 14px;
+}
+
+.table-desc th, .table-desc td {
+    margin-right: 10px;
+}
+
+#add-node-modal .modal-dialog {
+  min-width: calc(100% - 40px)!important;
+  height: calc(100% - 40px);
+  margin: 20px;
+  padding: 0;
+}
+
+#add-node-modal .modal-content {
+  height: auto;
+  min-height: 100%;
+  border-radius: 0;
+}
+
+.node-description {
+    max-height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding-right: 15px;
+}
+

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

@@ -0,0 +1,62 @@
+@!(attrs)
+<div class="modal fade add-node-modal" id="add-node-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content h100">
+            <div class="modal-header">
+                <h5 class="modal-title">Add a new Module</h5>
+
+                <div class="mx-auto">
+                    <input class="form-control mx-auto search-modules" type="text" placeholder="Search modules..." id="search-nodes" style="width: 300px;"/>
+                </div>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="container-fluid h100">
+                    <div class="row h100">
+                        <div class="col-md-4 h100" style="padding-left: 0; padding-right: 0;">
+                            <div class="search-nodes-results h100"></div>
+                        </div>
+                        <div class="col-md-8 h100" style="padding-left: 15px; padding-right: 0;">
+                            <div class="node-description h100">
+                                <div class="row">
+                                    <div class="col-md-4 module-show">
+                                        <div class="module-name"></div>
+                                        <div class="module-signature" id="module-signature"></div>
+                                    </div>
+                                    <div class="col-md-8">
+                                        <div class="module-show-description">
+                                            <label style="text-decoration: underline;">Description: </label>
+                                            <div class="module-long-description"></div>
+                                        </div>
+                                    </div>
+                                    <hr/>
+                                </div>
+
+                                <div class="module-show-inputs">
+                                    <label style="text-decoration: underline;">Inputs: </label>
+                                    <div class="module-inputs"></div>
+                                </div>
+
+                                <div class="module-show-outputs">
+                                    <label style="text-decoration: underline;">Outputs: </label>
+                                    <div class="module-outputs"></div>
+                                </div>
+
+                                <div class="module-show-attributes">
+                                    <label style="text-decoration: underline;">Attributes: </label>
+                                    <div class="module-attributes"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary add-node-btn">Add node</button>
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>

package/js/src/v/templates/addNode.js

@@ -0,0 +1,34 @@
+const swal = require('sweetalert2');
+
+var TemplateBinds = function(view) {
+    $('.btn-cancel-add-node').click(function(e) {
+        $('.add-node-modal').removeClass('show');
+    });
+
+    $('.add-node-btn').click(function(e) {
+        var selectedNode = $('.node-result.selected')[0];
+        if( selectedNode ) {
+            // add node to the controller
+            var packageName = $(selectedNode).data('package');
+            window.dualboxEditor.c.addNewBox(packageName);
+        }
+        else {
+            swal('Please select a node', '', 'error');
+            return;
+        }
+    });
+
+    // bind the search to the search input
+    $('.search-modules').on("input", (e) => {
+        var text = $('.search-modules').val();
+        var resultDiv = $('.search-nodes-results');
+        resultDiv.empty().append('<p>Searching...</p>');
+        view.e.search(text).catch( (err) => {
+            swal('error searching packages', err.reason, "error");
+        }).then((results) => {
+            view.templateMgr.replaceTemplate(resultDiv, "searchResults", { results: results });
+        });
+    });
+}
+
+module.exports = TemplateBinds;

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

@@ -0,0 +1,5 @@
+.card-debug .card-body {
+    font-size: 12px;
+    padding-left: 5px;
+    padding-right: 5px;
+}