npm - @dualbox/editor - Versions diffs - 1.0.1 → 1.0.3 - Mend

@dualbox/editor 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/js/src/GraphEditor.js +159 -0
package/js/src/c/GraphController.js +646 -0
package/js/src/libs/CodeMirror.js +8 -0
package/js/src/libs/fontawesome.js +1 -0
package/js/src/libs/jsoneditor.css +2 -0
package/js/src/libs/jsoneditor.js +4 -0
package/js/src/m/DualboxUtils.js +35 -0
package/js/src/m/GraphModel.js +2167 -0
package/js/src/m/History.js +94 -0
package/js/src/m/Merger.js +357 -0
package/js/src/v/AppManager.js +61 -0
package/js/src/v/CanvasSizeHandler.js +136 -0
package/js/src/v/ContextMenu.css +45 -0
package/js/src/v/ContextMenu.js +239 -0
package/js/src/v/GraphView.js +928 -0
package/js/src/v/PlumbStyle.js +254 -0
package/js/src/v/Selector.js +239 -0
package/js/src/v/TemplateManager.js +79 -0
package/js/src/v/Translater.js +174 -0
package/js/src/v/Utils.js +7 -0
package/js/src/v/Zoomer.js +201 -0
package/js/src/v/templates/addNode.css +45 -0
package/js/src/v/templates/addNode.html +62 -0
package/js/src/v/templates/addNode.js +34 -0
package/js/src/v/templates/debugNodeInfos.css +5 -0
package/js/src/v/templates/debugNodeInfos.html +336 -0
package/js/src/v/templates/debugNodeInfos.js +31 -0
package/js/src/v/templates/editMainSettings.css +67 -0
package/js/src/v/templates/editMainSettings.html +265 -0
package/js/src/v/templates/editMainSettings.js +240 -0
package/js/src/v/templates/editNodeSettings.css +86 -0
package/js/src/v/templates/editNodeSettings.html +539 -0
package/js/src/v/templates/editNodeSettings.js +356 -0
package/js/src/v/templates/graphNode.css +333 -0
package/js/src/v/templates/graphNode.html +227 -0
package/js/src/v/templates/graphNode.js +412 -0
package/js/src/v/templates/main.css +353 -0
package/js/src/v/templates/main.html +149 -0
package/js/src/v/templates/main.js +511 -0
package/js/src/v/templates/searchResults.css +50 -0
package/js/src/v/templates/searchResults.html +46 -0
package/js/src/v/templates/searchResults.js +176 -0
package/package.json +3 -2

package/js/src/v/ContextMenu.js ADDED Viewed

@@ -0,0 +1,239 @@
+require('./ContextMenu.css');
+const instances = [];
+let mdCoord = null;
+let nextId = 0;
+// Tiny polyfill for Element.matches() for IE
+if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector;
+}
+// Gets an element's next/previous sibling that matches the given selector
+function getSibling(el, selector, direction = 1) {
+    const sibling = direction > 0 ? el.nextElementSibling : el.previousElementSibling;
+    if (!sibling || sibling.matches(selector)) {
+        return sibling;
+    }
+    return getSibling(sibling, selector, direction);
+}
+// Fires custom event on given element
+function emit(el, type, data = {}) {
+    const event = document.createEvent('Event');
+    Object.keys(data).forEach((key) => {
+        event[key] = data[key];
+    });
+    event.initEvent(type, true, true);
+    el.dispatchEvent(event);
+}
+class ContextMenu {
+    constructor(selector, items, options = {
+        className: '',
+        minimalStyling: false,
+    }) {
+        this.selector = selector;
+        this.items = items;
+        this.options = options;
+        this.id = nextId++;
+        this.target = null;
+        this.create();
+        instances.push(this);
+    }
+    // Creates DOM elements, sets up event listeners
+    create() {
+        // Create root <ul>
+        this.menu = document.createElement('ul');
+        this.menu.className = 'ContextMenu';
+        this.menu.oncontextmenu=function(e) { e.preventDefault(); e.stopPropagation(); return false; }; // don't do anything on right click
+        this.menu.setAttribute('data-contextmenu', this.id);
+        this.menu.setAttribute('tabindex', -1);
+        this.menu.addEventListener('keyup', (e) => {
+            switch (e.which) {
+                case 38:
+                    this.moveFocus(-1);
+                    break;
+                case 40:
+                    this.moveFocus(1);
+                    break;
+                case 27:
+                    this.hide();
+                    break;
+                default:
+                    // do nothing
+            }
+        });
+        if (!this.options.minimalStyling) {
+            this.menu.classList.add('ContextMenu--theme-default');
+        }
+        if (this.options.className) {
+            this.options.className.split(' ').forEach(cls => this.menu.classList.add(cls));
+        }
+        // Create <li>'s for each menu item
+        this.items.forEach((item, index) => {
+            const li = document.createElement('li');
+            if (!('name' in item)) {
+                // Insert a divider
+                li.className = 'ContextMenu-divider';
+            } else {
+                li.className = 'ContextMenu-item';
+                li.textContent = item.name;
+                li.setAttribute('data-contextmenuitem', index);
+                li.setAttribute('tabindex', 0);
+                li.addEventListener('click', this.select.bind(this, li));
+                li.addEventListener('keyup', (e) => {
+                    if (e.which === 13) {
+                        this.select(li);
+                    }
+                });
+            }
+            this.menu.appendChild(li);
+        });
+        // Add root element to the <body>
+        document.body.appendChild(this.menu);
+        emit(this.menu, 'created');
+    }
+    // Shows context menu
+    show(e) {
+        this.menu.style.left = `${e.pageX}px`;
+        this.menu.style.top = `${e.pageY}px`;
+        this.menu.classList.add('is-open');
+        this.target = e.target;
+        // Give context menu focus
+        this.menu.focus();
+        // Disable native context menu
+        e.preventDefault();
+        emit(this.menu, 'shown');
+    }
+    // Hides context menu
+    hide() {
+        this.menu.classList.remove('is-open');
+        this.target = null;
+        emit(this.menu, 'hidden');
+    }
+    // Selects the given item and calls its handler
+    select(item) {
+        const itemId = item.getAttribute('data-contextmenuitem');
+        if (this.items[itemId]) {
+            // Call item handler with target element as parameter
+            this.items[itemId].fn(this.target);
+        }
+        this.hide();
+        emit(this.menu, 'itemselected');
+    }
+    // Moves focus to the next/previous menu item
+    moveFocus(direction = 1) {
+        const focused = this.menu.querySelector('[data-contextmenuitem]:focus');
+        let next;
+        if (focused) {
+            next = getSibling(focused, '[data-contextmenuitem]', direction);
+        }
+        if (!next) {
+            next = direction > 0
+                ? this.menu.querySelector('[data-contextmenuitem]:first-child')
+                : this.menu.querySelector('[data-contextmenuitem]:last-child');
+        }
+        if (next) next.focus();
+    }
+    // Convenience method for adding an event listener
+    on(type, fn) {
+        this.menu.addEventListener(type, fn);
+    }
+    // Convenience method for removing an event listener
+    off(type, fn) {
+        this.menu.removeEventListener(type, fn);
+    }
+    // Removes DOM elements, stop listeners
+    destroy() {
+        this.menu.parentElement.removeChild(this.menu);
+        this.menu = null;
+        instances.splice(instances.indexOf(this), 1);
+    }
+    static initialize() {
+        document.addEventListener('contextmenu', (e) => {
+            // unbind browser contextmenu
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        document.addEventListener('mousedown', (e) => {
+            if( e.which === 3 ) { // right click
+                mdCoord = {
+                    "x": e.pageX,
+                    "y": e.pageY
+                };
+            }
+        });
+        // Listen for contextmenu event to show menu
+        document.addEventListener('mouseup', (e) => {
+            if( e.which === 3 && mdCoord !== null ) {
+                // if the mouse didnt move much since the mouse down, we show the context menu
+                var diff = Math.abs(e.pageX - mdCoord.x) + Math.abs(e.pageY -mdCoord.y);
+                if( diff < 4 ) {
+                    var target = $(e.target);
+                    if( $(target).closest('.jsplumb-endpoint-anchor').length !== 0 ) target = $(target).closest('.jsplumb-endpoint-anchor');
+                    instances.forEach((menu) => {
+                        if( target[0].matches(menu.selector) ||
+                            target[0].closest('.card') &&
+                            target[0].closest('.card').matches(menu.selector) ) {
+                            menu.show(e);
+                            /*
+                            e.preventDefault();
+                            e.stopPropagation();
+                            e.stopImmediatePropagation();
+                            */
+                            return false;
+                        }
+                    });
+                }
+                mdCoord = null; // reset mdCoord
+            }
+        });
+        // Listen for click event to hide menu
+        document.addEventListener('click', (e) => {
+            instances.forEach((menu) => {
+                if (!e.target.matches(`[data-contextmenu="${menu.id}"], [data-contextmenu="${menu.id}"] *`)) {
+                    menu.hide();
+                }
+            });
+        });
+    }
+    static clean() {
+        instances.forEach((menu) => {
+            menu.destroy();
+        });
+    }
+}
+module.exports = ContextMenu;