@joint/core 4.0.0

package/src/mvc/View.mjs

@@ -0,0 +1,323 @@
+import $ from './Dom/index.mjs';
+
+import * as util from '../util/index.mjs';
+import V from '../V/index.mjs';
+import { ViewBase } from './ViewBase.mjs';
+import { config } from '../config/index.mjs';
+
+export const views = {};
+
+export const View = ViewBase.extend({
+
+    options: {},
+    theme: null,
+    themeClassNamePrefix: util.addClassNamePrefix('theme-'),
+    requireSetThemeOverride: false,
+    defaultTheme: config.defaultTheme,
+    children: null,
+    childNodes: null,
+
+    DETACHABLE: true,
+    UPDATE_PRIORITY: 2,
+    FLAG_INSERT: 1<<30,
+    FLAG_REMOVE: 1<<29,
+    FLAG_INIT: 1<<28,
+
+    constructor: function(options) {
+
+        this.requireSetThemeOverride = options && !!options.theme;
+        this.options = util.assign({}, this.options, options);
+
+        ViewBase.call(this, options);
+    },
+
+    initialize: function() {
+
+        views[this.cid] = this;
+
+        this.setTheme(this.options.theme || this.defaultTheme);
+        this.init();
+    },
+
+    unmount: function() {
+        if (this.svgElement) {
+            this.vel.remove();
+        } else {
+            this.$el.remove();
+        }
+    },
+
+    isMounted: function() {
+        return this.el.parentNode !== null;
+    },
+
+    renderChildren: function(children) {
+        children || (children = util.result(this, 'children'));
+        if (children) {
+            var isSVG = this.svgElement;
+            var namespace = V.namespace[isSVG ? 'svg' : 'xhtml'];
+            var doc = util.parseDOMJSON(children, namespace);
+            (isSVG ? this.vel : this.$el).empty().append(doc.fragment);
+            this.childNodes = doc.selectors;
+        }
+        return this;
+    },
+
+    findAttribute: function(attributeName, node) {
+
+        var currentNode = node;
+
+        while (currentNode && currentNode.nodeType === 1) {
+            var attributeValue = currentNode.getAttribute(attributeName);
+            // attribute found
+            if (attributeValue) return attributeValue;
+            // do not climb up the DOM
+            if (currentNode === this.el) return null;
+            // try parent node
+            currentNode = currentNode.parentNode;
+        }
+
+        return null;
+    },
+
+    // Override the mvc ViewBase `_ensureElement()` method in order to create an
+    // svg element (e.g., `<g>`) node that wraps all the nodes of the Cell view.
+    // Expose class name setter as a separate method.
+    _ensureElement: function() {
+        if (!this.el) {
+            var tagName = util.result(this, 'tagName');
+            var attrs = util.assign({}, util.result(this, 'attributes'));
+            var style = util.assign({}, util.result(this, 'style'));
+            if (this.id) attrs.id = util.result(this, 'id');
+            this.setElement(this._createElement(tagName));
+            this._setAttributes(attrs);
+            this._setStyle(style);
+        } else {
+            this.setElement(util.result(this, 'el'));
+        }
+        this._ensureElClassName();
+    },
+
+    _setAttributes: function(attrs) {
+        if (this.svgElement) {
+            this.vel.attr(attrs);
+        } else {
+            this.$el.attr(attrs);
+        }
+    },
+
+    _setStyle: function(style) {
+        this.$el.css(style);
+    },
+
+    _createElement: function(tagName) {
+        if (this.svgElement) {
+            return document.createElementNS(V.namespace.svg, tagName);
+        } else {
+            return document.createElement(tagName);
+        }
+    },
+
+    // Utilize an alternative DOM manipulation API by
+    // adding an element reference wrapped in Vectorizer.
+    _setElement: function(el) {
+        this.$el = el instanceof $ ? el : $(el);
+        this.el = this.$el[0];
+        if (this.svgElement) this.vel = V(this.el);
+    },
+
+    _ensureElClassName: function() {
+        var className = util.result(this, 'className');
+        if (!className) return;
+        var prefixedClassName = util.addClassNamePrefix(className);
+        // Note: className removal here kept for backwards compatibility only
+        if (this.svgElement) {
+            this.vel.removeClass(className).addClass(prefixedClassName);
+        } else {
+            this.$el.removeClass(className).addClass(prefixedClassName);
+        }
+    },
+
+    init: function() {
+        // Intentionally empty.
+        // This method is meant to be overridden.
+    },
+
+    onRender: function() {
+        // Intentionally empty.
+        // This method is meant to be overridden.
+    },
+
+    confirmUpdate: function() {
+        // Intentionally empty.
+        // This method is meant to be overridden.
+        return 0;
+    },
+
+    setTheme: function(theme, opt) {
+
+        opt = opt || {};
+
+        // Theme is already set, override is required, and override has not been set.
+        // Don't set the theme.
+        if (this.theme && this.requireSetThemeOverride && !opt.override) {
+            return this;
+        }
+
+        this.removeThemeClassName();
+        this.addThemeClassName(theme);
+        this.onSetTheme(this.theme/* oldTheme */, theme/* newTheme */);
+        this.theme = theme;
+
+        return this;
+    },
+
+    addThemeClassName: function(theme) {
+
+        theme = theme || this.theme;
+        if (!theme) return this;
+
+        var className = this.themeClassNamePrefix + theme;
+
+        if (this.svgElement) {
+            this.vel.addClass(className);
+        } else {
+            this.$el.addClass(className);
+        }
+
+        return this;
+    },
+
+    removeThemeClassName: function(theme) {
+
+        theme = theme || this.theme;
+
+        var className = this.themeClassNamePrefix + theme;
+
+        if (this.svgElement) {
+            this.vel.removeClass(className);
+        } else {
+            this.$el.removeClass(className);
+        }
+
+        return this;
+    },
+
+    onSetTheme: function(oldTheme, newTheme) {
+        // Intentionally empty.
+        // This method is meant to be overridden.
+    },
+
+    remove: function() {
+
+        this.onRemove();
+        this.undelegateDocumentEvents();
+
+        views[this.cid] = null;
+
+        ViewBase.prototype.remove.apply(this, arguments);
+
+        return this;
+    },
+
+    onRemove: function() {
+        // Intentionally empty.
+        // This method is meant to be overridden.
+    },
+
+    getEventNamespace: function() {
+        // Returns a per-session unique namespace
+        return '.joint-event-ns-' + this.cid;
+    },
+
+    delegateElementEvents: function(element, events, data) {
+        if (!events) return this;
+        data || (data = {});
+        var eventNS = this.getEventNamespace();
+        for (var eventName in events) {
+            var method = events[eventName];
+            if (typeof method !== 'function') method = this[method];
+            if (!method) continue;
+            $(element).on(eventName + eventNS, data, method.bind(this));
+        }
+        return this;
+    },
+
+    undelegateElementEvents: function(element) {
+        $(element).off(this.getEventNamespace());
+        return this;
+    },
+
+    delegateDocumentEvents: function(events, data) {
+        events || (events = util.result(this, 'documentEvents'));
+        return this.delegateElementEvents(document, events, data);
+    },
+
+    undelegateDocumentEvents: function() {
+        return this.undelegateElementEvents(document);
+    },
+
+    eventData: function(evt, data) {
+        if (!evt) throw new Error('eventData(): event object required.');
+        var currentData = evt.data;
+        var key = '__' + this.cid + '__';
+        if (data === undefined) {
+            if (!currentData) return {};
+            return currentData[key] || {};
+        }
+        currentData || (currentData = evt.data = {});
+        currentData[key] || (currentData[key] = {});
+        util.assign(currentData[key], data);
+        return this;
+    },
+
+    stopPropagation: function(evt) {
+        this.eventData(evt, { propagationStopped: true });
+        return this;
+    },
+
+    isPropagationStopped: function(evt) {
+        return !!this.eventData(evt).propagationStopped;
+    }
+
+}, {
+
+    extend: function() {
+
+        var args = Array.from(arguments);
+
+        // Deep clone the prototype and static properties objects.
+        // This prevents unexpected behavior where some properties are overwritten outside of this function.
+        var protoProps = args[0] && util.assign({}, args[0]) || {};
+        var staticProps = args[1] && util.assign({}, args[1]) || {};
+
+        // Need the real render method so that we can wrap it and call it later.
+        var renderFn = protoProps.render || (this.prototype && this.prototype.render) || null;
+
+        /*
+            Wrap the real render method so that:
+                .. `onRender` is always called.
+                .. `this` is always returned.
+        */
+        protoProps.render = function() {
+
+            if (typeof renderFn === 'function') {
+                // Call the original render method.
+                renderFn.apply(this, arguments);
+            }
+
+            if (this.render.__render__ === renderFn) {
+                // Should always call onRender() method.
+                // Should call it only once when renderFn is actual prototype method i.e. not the wrapper
+                this.onRender();
+            }
+
+            // Should always return itself.
+            return this;
+        };
+
+        protoProps.render.__render__ = renderFn;
+
+        return ViewBase.extend.call(this, protoProps, staticProps);
+    }
+});

package/src/mvc/ViewBase.mjs

@@ -0,0 +1,182 @@
+import $ from './Dom/index.mjs';
+
+import { Events } from './Events.mjs';
+import { extend } from './mvcUtils.mjs';
+import {
+    assign,
+    isFunction,
+    pick,
+    result,
+    uniqueId
+} from '../util/util.mjs';
+
+// ViewBase
+// -------------
+
+// ViewBases are almost more convention than they are actual code. A View
+// is simply a JavaScript object that represents a logical chunk of UI in the
+// DOM. This might be a single item, an entire list, a sidebar or panel, or
+// even the surrounding frame which wraps your whole app. Defining a chunk of
+// UI as a **View** allows you to define your DOM events declaratively, without
+// having to worry about render order ... and makes it easy for the view to
+// react to specific changes in the state of your models.
+
+// Creating a ViewBase creates its initial element outside of the DOM,
+// if an existing element is not provided...
+export var ViewBase = function(options) {
+    this.cid = uniqueId('view');
+    this.preinitialize.apply(this, arguments);
+    assign(this, pick(options, viewOptions));
+    this._ensureElement();
+    this.initialize.apply(this, arguments);
+};
+
+// Cached regex to split keys for `delegate`.
+var delegateEventSplitter = /^(\S+)\s*(.*)$/;
+
+// List of view options to be set as properties.
+var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
+
+// Set up all inheritable **ViewBase** properties and methods.
+assign(ViewBase.prototype, Events, {
+
+    // The default `tagName` of a View's element is `"div"`.
+    tagName: 'div',
+
+    // mvc.$ delegate for element lookup, scoped to DOM elements within the
+    // current view. This should be preferred to global lookups where possible.
+    $: function(selector) {
+        return this.$el.find(selector);
+    },
+
+    // preinitialize is an empty function by default. You can override it with a function
+    // or object.  preinitialize will run before any instantiation logic is run in the View
+    preinitialize: function(){},
+
+    // Initialize is an empty function by default. Override it with your own
+    // initialization logic.
+    initialize: function(){},
+
+    // **render** is the core function that your view should override, in order
+    // to populate its element (`this.el`), with the appropriate HTML. The
+    // convention is for **render** to always return `this`.
+    render: function() {
+        return this;
+    },
+
+    // Remove this view by taking the element out of the DOM, and removing any
+    // applicable Events listeners.
+    remove: function() {
+        this._removeElement();
+        this.stopListening();
+        return this;
+    },
+
+    // Remove this view's element from the document and all event listeners
+    // attached to it. Exposed for subclasses using an alternative DOM
+    // manipulation API.
+    _removeElement: function() {
+        this.$el.remove();
+    },
+
+    // Change the view's element (`this.el` property) and re-delegate the
+    // view's events on the new element.
+    setElement: function(element) {
+        this.undelegateEvents();
+        this._setElement(element);
+        this.delegateEvents();
+        return this;
+    },
+
+    // Creates the `this.el` and `this.$el` references for this view using the
+    // given `el`. `el` can be a CSS selector or an HTML string, a mvc.$
+    // context or an element. Subclasses can override this to utilize an
+    // alternative DOM manipulation API and are only required to set the
+    // `this.el` property.
+    _setElement: function(el) {
+        this.$el = el instanceof $ ? el : $(el);
+        this.el = this.$el[0];
+    },
+
+    // Set callbacks, where `this.events` is a hash of
+    //
+    // *{"event selector": "callback"}*
+    //
+    //     {
+    //       'mousedown .title':  'edit',
+    //       'click .button':     'save',
+    //       'click .open':       function(e) { ... }
+    //     }
+    //
+    // pairs. Callbacks will be bound to the view, with `this` set properly.
+    // Uses event delegation for efficiency.
+    // Omitting the selector binds the event to `this.el`.
+    delegateEvents: function(events) {
+        events || (events = result(this, 'events'));
+        if (!events) return this;
+        this.undelegateEvents();
+        for (var key in events) {
+            var method = events[key];
+            if (!isFunction(method)) method = this[method];
+            if (!method) continue;
+            var match = key.match(delegateEventSplitter);
+            this.delegate(match[1], match[2], method.bind(this));
+        }
+        return this;
+    },
+
+    // Add a single event listener to the view's element (or a child element
+    // using `selector`). This only works for delegate-able events: not `focus`,
+    // `blur`, and not `change`, `submit`, and `reset` in Internet Explorer.
+    delegate: function(eventName, selector, listener) {
+        this.$el.on(eventName + '.delegateEvents' + this.cid, selector, listener);
+        return this;
+    },
+
+    // Clears all callbacks previously bound to the view by `delegateEvents`.
+    // You usually don't need to use this, but may wish to if you have multiple
+    // viewbases attached to the same DOM element.
+    undelegateEvents: function() {
+        if (this.$el) this.$el.off('.delegateEvents' + this.cid);
+        return this;
+    },
+
+    // A finer-grained `undelegateEvents` for removing a single delegated event.
+    // `selector` and `listener` are both optional.
+    undelegate: function(eventName, selector, listener) {
+        this.$el.off(eventName + '.delegateEvents' + this.cid, selector, listener);
+        return this;
+    },
+
+    // Produces a DOM element to be assigned to your view. Exposed for
+    // subclasses using an alternative DOM manipulation API.
+    _createElement: function(tagName) {
+        return document.createElement(tagName);
+    },
+
+    // Ensure that the View has a DOM element to render into.
+    // If `this.el` is a string, pass it through `$()`, take the first
+    // matching element, and re-assign it to `el`. Otherwise, create
+    // an element from the `id`, `className` and `tagName` properties.
+    _ensureElement: function() {
+        if (!this.el) {
+            var attrs = assign({}, result(this, 'attributes'));
+            if (this.id) attrs.id = result(this, 'id');
+            if (this.className) attrs['class'] = result(this, 'className');
+            this.setElement(this._createElement(result(this, 'tagName')));
+            this._setAttributes(attrs);
+        } else {
+            this.setElement(result(this, 'el'));
+        }
+    },
+
+    // Set attributes from a hash on this view's element.  Exposed for
+    // subclasses using an alternative DOM manipulation API.
+    _setAttributes: function(attributes) {
+        this.$el.attr(attributes);
+    }
+
+});
+
+// Set up inheritance for the view.
+ViewBase.extend = extend;

package/src/mvc/index.mjs

@@ -0,0 +1,9 @@
+export * from './View.mjs';
+export * from './Listener.mjs';
+export * from './Events.mjs';
+export * from './Collection.mjs';
+export * from './Model.mjs';
+export * from './ViewBase.mjs';
+export { default as Data } from './Data.mjs';
+export { default as $ } from './Dom/index.mjs';
+export * from './Dom/Event.mjs';

package/src/mvc/mvcUtils.mjs

@@ -0,0 +1,90 @@
+import {
+    assign,
+    forIn,
+    has,
+    isFunction,
+    isObject,
+    isString
+} from '../util/util.mjs';
+import { matches } from '../util/utilHelpers.mjs';
+
+// Helpers
+// -------
+
+// Helper function to correctly set up the prototype chain for subclasses.
+// Similar to `goog.inherits`, but uses a hash of prototype properties and
+// class properties to be extended.
+export var extend = function(protoProps, staticProps) {
+    var parent = this;
+    var child;
+
+    // The constructor function for the new subclass is either defined by you
+    // (the "constructor" property in your `extend` definition), or defaulted
+    // by us to simply call the parent constructor.
+    if (protoProps && has(protoProps, 'constructor')) {
+        child = protoProps.constructor;
+    } else {
+        child = function(){ return parent.apply(this, arguments); };
+    }
+
+    // Add static properties to the constructor function, if supplied.
+    assign(child, parent, staticProps);
+
+    // Set the prototype chain to inherit from `parent`, without calling
+    // `parent`'s constructor function and add the prototype properties.
+    child.prototype = Object.assign(Object.create(parent.prototype), protoProps);
+    child.prototype.constructor = child;
+
+    // Set a convenience property in case the parent's prototype is needed
+    // later.
+    child.__super__ = parent.prototype;
+
+    return child;
+};
+
+// Proxy class methods to functions, wrapping the model's
+// `attributes` object or collection's `models` array behind the scenes.
+//
+// `Function#apply` can be slow so we use the method's arg count, if we know it.
+var addMethod = function(base, length, method, attribute) {
+    switch (length) {
+        case 1: return function() {
+            return base[method](this[attribute]);
+        };
+        case 2: return function(value) {
+            return base[method](this[attribute], value);
+        };
+        case 3: return function(iteratee, context) {
+            return base[method](this[attribute], cb(iteratee, this), context);
+        };
+        case 4: return function(iteratee, defaultVal, context) {
+            return base[method](this[attribute], cb(iteratee, this), defaultVal, context);
+        };
+        default: return function() {
+            var args = Array.prototype.slice.call(arguments);
+            args.unshift(this[attribute]);
+            return base[method].apply(base, args);
+        };
+    }
+};
+
+export var addMethodsUtil = function(Class, base, methods, attribute) {
+    forIn(methods, function(length, method) {
+        if (base[method]) Class.prototype[method] = addMethod(base, length, method, attribute);
+    });
+};
+
+// Support `collection.sortBy('attr')`.
+var cb = function(iteratee, instance) {
+    if (isFunction(iteratee)) return iteratee;
+    if (isObject(iteratee) && !instance._isModel(iteratee)) return modelMatcher(iteratee);
+    if (isString(iteratee)) return function(model) { return model.get(iteratee); };
+    return iteratee;
+};
+
+var modelMatcher = function(attrs) {
+    var matcher = matches(attrs);
+    return function(model) {
+        return matcher(model.attributes);
+    };
+};

package/src/polyfills/array.js

@@ -0,0 +1,4 @@
+import 'core-js/stable/array/includes';
+import 'core-js/stable/array/find';
+import 'core-js/stable/array/from';
+import 'core-js/stable/array/find-index';

package/src/polyfills/base64.js

@@ -0,0 +1,68 @@
+(function() {
+
+    /**
+     * version: 0.3.0
+     * git://github.com/davidchambers/Base64.js.git
+     */
+
+    var object = typeof exports != 'undefined' ? exports : this; // #8: web workers
+    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+
+    function InvalidCharacterError(message) {
+        this.message = message;
+    }
+
+    InvalidCharacterError.prototype = new Error;
+    InvalidCharacterError.prototype.name = 'InvalidCharacterError';
+
+    // encoder
+    // [https://gist.github.com/999166] by [https://github.com/nignag]
+    object.btoa || (
+        object.btoa = function(input) {
+            var str = String(input);
+            for (
+                // initialize result and counter
+                var block, charCode, idx = 0, map = chars, output = '';
+                // if the next str index does not exist:
+                //   change the mapping table to "="
+                //   check if d has no fractional digits
+                str.charAt(idx | 0) || (map = '=', idx % 1);
+                // "8 - idx % 1 * 8" generates the sequence 2, 4, 6, 8
+                output += map.charAt(63 & block >> 8 - idx % 1 * 8)
+            ) {
+                charCode = str.charCodeAt(idx += 3 / 4);
+                if (charCode > 0xFF) {
+                    throw new InvalidCharacterError('\'btoa\' failed: The string to be encoded contains characters outside of the Latin1 range.');
+                }
+                block = block << 8 | charCode;
+            }
+            return output;
+        });
+
+    // decoder
+    // [https://gist.github.com/1020396] by [https://github.com/atk]
+    object.atob || (
+        object.atob = function(input) {
+            var str = String(input).replace(/=+$/, '');
+            if (str.length % 4 == 1) {
+                throw new InvalidCharacterError('\'atob\' failed: The string to be decoded is not correctly encoded.');
+            }
+            for (
+                // initialize result and counters
+                var bc = 0, bs, buffer, idx = 0, output = '';
+                // get next character
+                // eslint-disable-next-line no-cond-assign
+                buffer = str.charAt(idx++);
+                // character found in table? initialize bit storage and add its ascii value;
+                ~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer,
+                // and if not first of each 4 characters,
+                // convert the first 8 bits to one ascii character
+                bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0
+            ) {
+                // try to find character in table (0-63, not found => -1)
+                buffer = chars.indexOf(buffer);
+            }
+            return output;
+        });
+
+}());

package/src/polyfills/index.mjs

@@ -0,0 +1,5 @@
+import './array.js';
+import './base64.js';
+import './number.js';
+import './string.js';
+import './typedArray.js';

package/src/polyfills/number.js

@@ -0,0 +1,3 @@
+import 'core-js/stable/number/is-nan';
+import 'core-js/stable/number/is-finite';
+

package/src/polyfills/string.js

@@ -0,0 +1,3 @@
+import 'core-js/stable/string/includes';
+import 'core-js/stable/string/starts-with';
+