}} selection
+ */
+ value: function getSelection() {
+ var nodeIds = this.getSelectedNodes();
+ var edgeIds = this.getSelectedEdges();
+ return { nodes: nodeIds, edges: edgeIds };
+ }
+ }, {
+ key: "getSelectedNodes",
- if (prop in obj) {
- return prop;
+ /**
+ *
+ * retrieve the currently selected nodes
+ * @return {String[]} selection An array with the ids of the
+ * selected nodes.
+ */
+ value: function getSelectedNodes() {
+ var idArray = [];
+ if (this.options.select === true) {
+ for (var nodeId in this.selectionObj.nodes) {
+ if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ idArray.push(nodeId);
+ }
}
- i++;
+ }
+ return idArray;
}
- return undefined;
- }
+ }, {
+ key: "getSelectedEdges",
- /**
- * get a unique id
- * @returns {number} uniqueId
- */
- var _uniqueId = 1;
- function uniqueId() {
- return _uniqueId++;
- }
+ /**
+ *
+ * retrieve the currently selected edges
+ * @return {Array} selection An array with the ids of the
+ * selected nodes.
+ */
+ value: function getSelectedEdges() {
+ var idArray = [];
+ if (this.options.select === true) {
+ for (var edgeId in this.selectionObj.edges) {
+ if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+ idArray.push(edgeId);
+ }
+ }
+ }
+ return idArray;
+ }
+ }, {
+ key: "selectNodes",
- /**
- * get the window object of an element
- * @param {HTMLElement} element
- * @returns {DocumentView|Window}
- */
- function getWindowForElement(element) {
- var doc = element.ownerDocument;
- return (doc.defaultView || doc.parentWindow);
- }
+ /**
+ * select zero or more nodes with the option to highlight edges
+ * @param {Number[] | String[]} selection An array with the ids of the
+ * selected nodes.
+ * @param {boolean} [highlightEdges]
+ */
+ value: function selectNodes(selection) {
+ var highlightEdges = arguments[1] === undefined ? true : arguments[1];
- var MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
+ var i = undefined,
+ id = undefined;
- var SUPPORT_TOUCH = ('ontouchstart' in window);
- var SUPPORT_POINTER_EVENTS = prefixed(window, 'PointerEvent') !== undefined;
- var SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);
+ if (!selection || selection.length === undefined) throw "Selection must be an array with ids";
- var INPUT_TYPE_TOUCH = 'touch';
- var INPUT_TYPE_PEN = 'pen';
- var INPUT_TYPE_MOUSE = 'mouse';
- var INPUT_TYPE_KINECT = 'kinect';
+ // first unselect any selected node
+ this.unselectAll();
- var COMPUTE_INTERVAL = 25;
+ for (i = 0; i < selection.length; i++) {
+ id = selection[i];
- var INPUT_START = 1;
- var INPUT_MOVE = 2;
- var INPUT_END = 4;
- var INPUT_CANCEL = 8;
+ var node = this.body.nodes[id];
+ if (!node) {
+ throw new RangeError("Node with id \"" + id + "\" not found");
+ }
+ this.selectObject(node, highlightEdges);
+ }
+ this.body.emitter.emit("_requestRedraw");
+ }
+ }, {
+ key: "selectEdges",
- var DIRECTION_NONE = 1;
- var DIRECTION_LEFT = 2;
- var DIRECTION_RIGHT = 4;
- var DIRECTION_UP = 8;
- var DIRECTION_DOWN = 16;
+ /**
+ * select zero or more edges
+ * @param {Number[] | String[]} selection An array with the ids of the
+ * selected nodes.
+ */
+ value: function selectEdges(selection) {
+ var i = undefined,
+ id = undefined;
- var DIRECTION_HORIZONTAL = DIRECTION_LEFT | DIRECTION_RIGHT;
- var DIRECTION_VERTICAL = DIRECTION_UP | DIRECTION_DOWN;
- var DIRECTION_ALL = DIRECTION_HORIZONTAL | DIRECTION_VERTICAL;
+ if (!selection || selection.length === undefined) throw "Selection must be an array with ids";
- var PROPS_XY = ['x', 'y'];
- var PROPS_CLIENT_XY = ['clientX', 'clientY'];
+ // first unselect any selected objects
+ this.unselectAll();
- /**
- * create new input type manager
- * @param {Manager} manager
- * @param {Function} callback
- * @returns {Input}
- * @constructor
- */
- function Input(manager, callback) {
- var self = this;
- this.manager = manager;
- this.callback = callback;
- this.element = manager.element;
- this.target = manager.options.inputTarget;
+ for (i = 0; i < selection.length; i++) {
+ id = selection[i];
- // smaller wrapper around the handler, for the scope and the enabled state of the manager,
- // so when disabled the input events are completely bypassed.
- this.domHandler = function(ev) {
- if (boolOrFn(manager.options.enable, [manager])) {
- self.handler(ev);
+ var edge = this.body.edges[id];
+ if (!edge) {
+ throw new RangeError("Edge with id \"" + id + "\" not found");
}
- };
-
- this.init();
-
- }
-
- Input.prototype = {
- /**
- * should handle the inputEvent data and trigger the callback
- * @virtual
- */
- handler: function() { },
-
- /**
- * bind the events
- */
- init: function() {
- this.evEl && addEventListeners(this.element, this.evEl, this.domHandler);
- this.evTarget && addEventListeners(this.target, this.evTarget, this.domHandler);
- this.evWin && addEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
- },
+ this.selectObject(edge);
+ }
+ this.body.emitter.emit("_requestRedraw");
+ }
+ }, {
+ key: "updateSelection",
/**
- * unbind the events
+ * Validate the selection: remove ids of nodes which no longer exist
+ * @private
*/
- destroy: function() {
- this.evEl && removeEventListeners(this.element, this.evEl, this.domHandler);
- this.evTarget && removeEventListeners(this.target, this.evTarget, this.domHandler);
- this.evWin && removeEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
+ value: function updateSelection() {
+ for (var nodeId in this.selectionObj.nodes) {
+ if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ if (!this.body.nodes.hasOwnProperty(nodeId)) {
+ delete this.selectionObj.nodes[nodeId];
+ }
+ }
+ }
+ for (var edgeId in this.selectionObj.edges) {
+ if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+ if (!this.body.edges.hasOwnProperty(edgeId)) {
+ delete this.selectionObj.edges[edgeId];
+ }
+ }
+ }
}
- };
+ }]);
- /**
- * create new input type manager
- * called by the Manager constructor
- * @param {Hammer} manager
- * @returns {Input}
- */
- function createInputInstance(manager) {
- var Type;
- var inputClass = manager.options.inputClass;
+ return SelectionHandler;
+ })();
- if (inputClass) {
- Type = inputClass;
- } else if (SUPPORT_POINTER_EVENTS) {
- Type = PointerEventInput;
- } else if (SUPPORT_ONLY_TOUCH) {
- Type = TouchInput;
- } else if (!SUPPORT_TOUCH) {
- Type = MouseInput;
- } else {
- Type = TouchMouseInput;
- }
- return new (Type)(manager, inputHandler);
- }
+ exports["default"] = SelectionHandler;
+ module.exports = exports["default"];
- /**
- * handle input events
- * @param {Manager} manager
- * @param {String} eventType
- * @param {Object} input
- */
- function inputHandler(manager, eventType, input) {
- var pointersLen = input.pointers.length;
- var changedPointersLen = input.changedPointers.length;
- var isFirst = (eventType & INPUT_START && (pointersLen - changedPointersLen === 0));
- var isFinal = (eventType & (INPUT_END | INPUT_CANCEL) && (pointersLen - changedPointersLen === 0));
+/***/ },
+/* 59 */
+/***/ function(module, exports, __webpack_require__) {
- input.isFirst = !!isFirst;
- input.isFinal = !!isFinal;
+ 'use strict';
- if (isFirst) {
- manager.session = {};
- }
+ var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
- // source event is the normalized value of the domEvents
- // like 'touchstart, mouseup, pointerdown'
- input.eventType = eventType;
+ var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
- // compute scale, rotation etc
- computeInputData(manager, input);
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ var util = __webpack_require__(1);
- // emit secret event
- manager.emit('hammer.input', input);
+ var LayoutEngine = (function () {
+ function LayoutEngine(body) {
+ _classCallCheck(this, LayoutEngine);
- manager.recognize(input);
- manager.session.prevInput = input;
- }
+ this.body = body;
- /**
- * extend the data with some usable properties like scale, rotate, velocity etc
- * @param {Object} manager
- * @param {Object} input
- */
- function computeInputData(manager, input) {
- var session = manager.session;
- var pointers = input.pointers;
- var pointersLength = pointers.length;
-
- // store the first input to calculate the distance and direction
- if (!session.firstInput) {
- session.firstInput = simpleCloneInputData(input);
- }
-
- // to compute scale and rotation we need to store the multiple touches
- if (pointersLength > 1 && !session.firstMultiple) {
- session.firstMultiple = simpleCloneInputData(input);
- } else if (pointersLength === 1) {
- session.firstMultiple = false;
- }
-
- var firstInput = session.firstInput;
- var firstMultiple = session.firstMultiple;
- var offsetCenter = firstMultiple ? firstMultiple.center : firstInput.center;
-
- var center = input.center = getCenter(pointers);
- input.timeStamp = now();
- input.deltaTime = input.timeStamp - firstInput.timeStamp;
+ this.initialRandomSeed = Math.round(Math.random() * 1000000);
+ this.randomSeed = this.initialRandomSeed;
+ this.options = {};
+ this.optionsBackup = {};
- input.angle = getAngle(offsetCenter, center);
- input.distance = getDistance(offsetCenter, center);
+ this.defaultOptions = {
+ randomSeed: undefined,
+ hierarchical: {
+ enabled: false,
+ levelSeparation: 150,
+ direction: 'UD', // UD, DU, LR, RL
+ sortMethod: 'hubsize' // hubsize, directed
+ }
+ };
+ util.extend(this.options, this.defaultOptions);
- computeDeltaXY(session, input);
- input.offsetDirection = getDirection(input.deltaX, input.deltaY);
+ this.hierarchicalLevels = {};
- input.scale = firstMultiple ? getScale(firstMultiple.pointers, pointers) : 1;
- input.rotation = firstMultiple ? getRotation(firstMultiple.pointers, pointers) : 0;
+ this.bindEventListeners();
+ }
- computeIntervalInputData(session, input);
+ _createClass(LayoutEngine, [{
+ key: 'bindEventListeners',
+ value: function bindEventListeners() {
+ var _this = this;
- // find the correct target
- var target = manager.element;
- if (hasParent(input.srcEvent.target, target)) {
- target = input.srcEvent.target;
+ this.body.emitter.on('_dataChanged', function () {
+ _this.setupHierarchicalLayout();
+ });
+ this.body.emitter.on('_resetHierarchicalLayout', function () {
+ _this.setupHierarchicalLayout();
+ _this.body.emitter.emit('fit', { duration: 0 });
+ });
}
- input.target = target;
- }
+ }, {
+ key: 'setOptions',
+ value: function setOptions(options, allOptions) {
+ if (options !== undefined) {
+ var prevHierarchicalState = this.options.hierarchical.enabled;
- function computeDeltaXY(session, input) {
- var center = input.center;
- var offset = session.offsetDelta || {};
- var prevDelta = session.prevDelta || {};
- var prevInput = session.prevInput || {};
+ util.mergeOptions(this.options, options, 'hierarchical');
+ if (options.randomSeed !== undefined) {
+ this.randomSeed = options.randomSeed;
+ }
- if (input.eventType === INPUT_START || prevInput.eventType === INPUT_END) {
- prevDelta = session.prevDelta = {
- x: prevInput.deltaX || 0,
- y: prevInput.deltaY || 0
- };
+ if (this.options.hierarchical.enabled === true) {
+ // make sure the level seperation is the right way up
+ if (this.options.hierarchical.direction === 'RL' || this.options.hierarchical.direction === 'DU') {
+ if (this.options.hierarchical.levelSeparation > 0) {
+ this.options.hierarchical.levelSeparation *= -1;
+ }
+ } else {
+ if (this.options.hierarchical.levelSeparation < 0) {
+ this.options.hierarchical.levelSeparation *= -1;
+ }
+ }
- offset = session.offsetDelta = {
- x: center.x,
- y: center.y
- };
+ this.body.emitter.emit('_resetHierarchicalLayout');
+ // because the hierarchical system needs it's own physics and smooth curve settings, we adapt the other options if needed.
+ return this.adaptAllOptions(allOptions);
+ } else {
+ if (prevHierarchicalState === true) {
+ // refresh the overridden options for nodes and edges.
+ this.body.emitter.emit('refresh');
+ return util.deepExtend(allOptions, this.optionsBackup);
+ }
+ }
+ }
+ return allOptions;
}
+ }, {
+ key: 'adaptAllOptions',
+ value: function adaptAllOptions(allOptions) {
+ if (this.options.hierarchical.enabled === true) {
+ // set the physics
+ if (allOptions.physics === undefined || allOptions.physics === true) {
+ allOptions.physics = { solver: 'hierarchicalRepulsion' };
+ this.optionsBackup.physics = { solver: 'barnesHut' };
+ } else if (typeof options.physics === 'object') {
+ this.optionsBackup.physics = { solver: 'barnesHut' };
+ if (options.physics.solver !== undefined) {
+ this.optionsBackup.physics = { solver: options.physics.solver };
+ }
+ allOptions.physics.solver = 'hierarchicalRepulsion';
+ } else if (options.physics !== false) {
+ this.optionsBackup.physics = { solver: 'barnesHut' };
+ allOptions.physics.solver = 'hierarchicalRepulsion';
+ }
- input.deltaX = prevDelta.x + (center.x - offset.x);
- input.deltaY = prevDelta.y + (center.y - offset.y);
- }
-
- /**
- * velocity is calculated every x ms
- * @param {Object} session
- * @param {Object} input
- */
- function computeIntervalInputData(session, input) {
- var last = session.lastInterval || input,
- deltaTime = input.timeStamp - last.timeStamp,
- velocity, velocityX, velocityY, direction;
-
- if (input.eventType != INPUT_CANCEL && (deltaTime > COMPUTE_INTERVAL || last.velocity === undefined)) {
- var deltaX = last.deltaX - input.deltaX;
- var deltaY = last.deltaY - input.deltaY;
+ // get the type of static smooth curve in case it is required
+ var type = 'horizontal';
+ if (this.options.hierarchical.direction === 'RL' || this.options.hierarchical.direction === 'LR') {
+ type = 'vertical';
+ }
- var v = getVelocity(deltaTime, deltaX, deltaY);
- velocityX = v.x;
- velocityY = v.y;
- velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
- direction = getDirection(deltaX, deltaY);
+ // disable smooth curves if nothing is defined. If smooth curves have been turned on, turn them into static smooth curves.
+ if (allOptions.edges === undefined) {
+ this.optionsBackup.edges = { smooth: true, dynamic: true };
+ allOptions.edges = { smooth: false };
+ } else if (allOptions.edges.smooth === undefined) {
+ this.optionsBackup.edges = { smooth: true, dynamic: true };
+ allOptions.edges.smooth = false;
+ } else {
+ if (typeof allOptions.edges.smooth === 'boolean') {
+ this.optionsBackup.edges = { smooth: allOptions.edges.smooth, dynamic: true };
+ allOptions.edges.smooth = { enabled: allOptions.edges.smooth, dynamic: false, type: type };
+ } else {
+ this.optionsBackup.edges = { smooth: allOptions.edges.smooth.enabled === undefined ? true : allOptions.edges.smooth.enabled, dynamic: true };
+ allOptions.edges.smooth = { enabled: allOptions.edges.smooth.enabled === undefined ? true : allOptions.edges.smooth.enabled, dynamic: false, type: type };
+ }
+ }
- session.lastInterval = input;
- } else {
- // use latest velocity info if it doesn't overtake a minimum period
- velocity = last.velocity;
- velocityX = last.velocityX;
- velocityY = last.velocityY;
- direction = last.direction;
+ // force all edges into static smooth curves. Only applies to edges that do not use the global options for smooth.
+ this.body.emitter.emit('_forceDisableDynamicCurves', type);
+ }
+ return allOptions;
}
-
- input.velocity = velocity;
- input.velocityX = velocityX;
- input.velocityY = velocityY;
- input.direction = direction;
- }
-
- /**
- * create a simple clone from the input used for storage of firstInput and firstMultiple
- * @param {Object} input
- * @returns {Object} clonedInputData
- */
- function simpleCloneInputData(input) {
- // make a simple copy of the pointers because we will get a reference if we don't
- // we only need clientXY for the calculations
- var pointers = [];
- var i = 0;
- while (i < input.pointers.length) {
- pointers[i] = {
- clientX: round(input.pointers[i].clientX),
- clientY: round(input.pointers[i].clientY)
- };
- i++;
+ }, {
+ key: 'seededRandom',
+ value: function seededRandom() {
+ var x = Math.sin(this.randomSeed++) * 10000;
+ return x - Math.floor(x);
}
+ }, {
+ key: 'positionInitially',
+ value: function positionInitially(nodesArray) {
+ if (this.options.hierarchical.enabled !== true) {
+ for (var i = 0; i < nodesArray.length; i++) {
+ var node = nodesArray[i];
+ if (!node.isFixed() && (node.x === undefined || node.y === undefined)) {
+ var radius = 10 * 0.1 * nodesArray.length + 10;
+ var angle = 2 * Math.PI * this.seededRandom();
- return {
- timeStamp: now(),
- pointers: pointers,
- center: getCenter(pointers),
- deltaX: input.deltaX,
- deltaY: input.deltaY
- };
- }
-
- /**
- * get the center of all the pointers
- * @param {Array} pointers
- * @return {Object} center contains `x` and `y` properties
- */
- function getCenter(pointers) {
- var pointersLength = pointers.length;
-
- // no need to loop when only one touch
- if (pointersLength === 1) {
- return {
- x: round(pointers[0].clientX),
- y: round(pointers[0].clientY)
- };
+ if (node.options.fixed.x === false) {
+ node.x = radius * Math.cos(angle);
+ }
+ if (node.options.fixed.x === false) {
+ node.y = radius * Math.sin(angle);
+ }
+ }
+ }
+ }
}
-
- var x = 0, y = 0, i = 0;
- while (i < pointersLength) {
- x += pointers[i].clientX;
- y += pointers[i].clientY;
- i++;
+ }, {
+ key: 'getSeed',
+ value: function getSeed() {
+ return this.initialRandomSeed;
}
+ }, {
+ key: 'setupHierarchicalLayout',
- return {
- x: round(x / pointersLength),
- y: round(y / pointersLength)
- };
- }
-
- /**
- * calculate the velocity between two points. unit is in px per ms.
- * @param {Number} deltaTime
- * @param {Number} x
- * @param {Number} y
- * @return {Object} velocity `x` and `y`
- */
- function getVelocity(deltaTime, x, y) {
- return {
- x: x / deltaTime || 0,
- y: y / deltaTime || 0
- };
- }
+ /**
+ * This is the main function to layout the nodes in a hierarchical way.
+ * It checks if the node details are supplied correctly
+ *
+ * @private
+ */
+ value: function setupHierarchicalLayout() {
+ if (this.options.hierarchical.enabled === true && this.body.nodeIndices.length > 0) {
+ // get the size of the largest hubs and check if the user has defined a level for a node.
+ var node = undefined,
+ nodeId = undefined;
+ var definedLevel = false;
+ var undefinedLevel = false;
+ this.hierarchicalLevels = {};
+ this.nodeSpacing = 100;
- /**
- * get the direction between two points
- * @param {Number} x
- * @param {Number} y
- * @return {Number} direction
- */
- function getDirection(x, y) {
- if (x === y) {
- return DIRECTION_NONE;
- }
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
+ if (node.options.level !== undefined) {
+ definedLevel = true;
+ this.hierarchicalLevels[nodeId] = node.options.level;
+ } else {
+ undefinedLevel = true;
+ }
+ }
+ }
- if (abs(x) >= abs(y)) {
- return x > 0 ? DIRECTION_LEFT : DIRECTION_RIGHT;
- }
- return y > 0 ? DIRECTION_UP : DIRECTION_DOWN;
- }
+ // if the user defined some levels but not all, alert and run without hierarchical layout
+ if (undefinedLevel === true && definedLevel === true) {
+ throw new Error('To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.');
+ return;
+ } else {
+ // setup the system to use hierarchical method.
+ //this._changeConstants();
- /**
- * calculate the absolute distance between two points
- * @param {Object} p1 {x, y}
- * @param {Object} p2 {x, y}
- * @param {Array} [props] containing x and y keys
- * @return {Number} distance
- */
- function getDistance(p1, p2, props) {
- if (!props) {
- props = PROPS_XY;
- }
- var x = p2[props[0]] - p1[props[0]],
- y = p2[props[1]] - p1[props[1]];
+ // define levels if undefined by the users. Based on hubsize
+ if (undefinedLevel === true) {
+ if (this.options.hierarchical.sortMethod === 'hubsize') {
+ this._determineLevelsByHubsize();
+ } else if (this.options.hierarchical.sortMethod === 'directed' || 'direction') {
+ this._determineLevelsDirected();
+ }
+ }
- return Math.sqrt((x * x) + (y * y));
- }
+ // check the distribution of the nodes per level.
+ var distribution = this._getDistribution();
- /**
- * calculate the angle between two coordinates
- * @param {Object} p1
- * @param {Object} p2
- * @param {Array} [props] containing x and y keys
- * @return {Number} angle
- */
- function getAngle(p1, p2, props) {
- if (!props) {
- props = PROPS_XY;
+ // place the nodes on the canvas.
+ this._placeNodesByHierarchy(distribution);
+ }
+ }
}
- var x = p2[props[0]] - p1[props[0]],
- y = p2[props[1]] - p1[props[1]];
- return Math.atan2(y, x) * 180 / Math.PI;
- }
-
- /**
- * calculate the rotation degrees between two pointersets
- * @param {Array} start array of pointers
- * @param {Array} end array of pointers
- * @return {Number} rotation
- */
- function getRotation(start, end) {
- return getAngle(end[1], end[0], PROPS_CLIENT_XY) - getAngle(start[1], start[0], PROPS_CLIENT_XY);
- }
-
- /**
- * calculate the scale factor between two pointersets
- * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
- * @param {Array} start array of pointers
- * @param {Array} end array of pointers
- * @return {Number} scale
- */
- function getScale(start, end) {
- return getDistance(end[0], end[1], PROPS_CLIENT_XY) / getDistance(start[0], start[1], PROPS_CLIENT_XY);
- }
-
- var MOUSE_INPUT_MAP = {
- mousedown: INPUT_START,
- mousemove: INPUT_MOVE,
- mouseup: INPUT_END
- };
+ }, {
+ key: '_placeNodesByHierarchy',
- var MOUSE_ELEMENT_EVENTS = 'mousedown';
- var MOUSE_WINDOW_EVENTS = 'mousemove mouseup';
+ /**
+ * This function places the nodes on the canvas based on the hierarchial distribution.
+ *
+ * @param {Object} distribution | obtained by the function this._getDistribution()
+ * @private
+ */
+ value: function _placeNodesByHierarchy(distribution) {
+ var nodeId = undefined,
+ node = undefined;
+ this.positionedNodes = {};
+ // start placing all the level 0 nodes first. Then recursively position their branches.
+ for (var level in distribution) {
+ if (distribution.hasOwnProperty(level)) {
+ for (nodeId in distribution[level].nodes) {
+ if (distribution[level].nodes.hasOwnProperty(nodeId)) {
- /**
- * Mouse events input
- * @constructor
- * @extends Input
- */
- function MouseInput() {
- this.evEl = MOUSE_ELEMENT_EVENTS;
- this.evWin = MOUSE_WINDOW_EVENTS;
+ node = distribution[level].nodes[nodeId];
- this.allow = true; // used by Input.TouchMouse to disable mouse events
- this.pressed = false; // mousedown state
+ if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') {
+ if (node.x === undefined) {
+ node.x = distribution[level].distance;
+ }
+ distribution[level].distance = node.x + this.nodeSpacing;
+ } else {
+ if (node.y === undefined) {
+ node.y = distribution[level].distance;
+ }
+ distribution[level].distance = node.y + this.nodeSpacing;
+ }
- Input.apply(this, arguments);
- }
+ this.positionedNodes[nodeId] = true;
+ this._placeBranchNodes(node.edges, node.id, distribution, level);
+ }
+ }
+ }
+ }
+ }
+ }, {
+ key: '_getDistribution',
- inherit(MouseInput, Input, {
/**
- * handle mouse events
- * @param {Object} ev
+ * This function get the distribution of levels based on hubsize
+ *
+ * @returns {Object}
+ * @private
*/
- handler: function MEhandler(ev) {
- var eventType = MOUSE_INPUT_MAP[ev.type];
+ value: function _getDistribution() {
+ var distribution = {};
+ var nodeId = undefined,
+ node = undefined;
- // on start we want to have the left mouse button down
- if (eventType & INPUT_START && ev.button === 0) {
- this.pressed = true;
+ // we fix Y because the hierarchy is vertical, we fix X so we do not give a node an x position for a second time.
+ // the fix of X is removed after the x value has been set.
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
+ var level = this.hierarchicalLevels[nodeId] === undefined ? 0 : this.hierarchicalLevels[nodeId];
+ if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') {
+ node.y = this.options.hierarchical.levelSeparation * level;
+ node.options.fixed.y = true;
+ } else {
+ node.x = this.options.hierarchical.levelSeparation * level;
+ node.options.fixed.x = true;
+ }
+ if (distribution[level] === undefined) {
+ distribution[level] = { amount: 0, nodes: {}, distance: 0 };
+ }
+ distribution[level].amount += 1;
+ distribution[level].nodes[nodeId] = node;
}
+ }
+ return distribution;
+ }
+ }, {
+ key: '_getHubSize',
- if (eventType & INPUT_MOVE && ev.which !== 1) {
- eventType = INPUT_END;
+ /**
+ * Get the hubsize from all remaining unlevelled nodes.
+ *
+ * @returns {number}
+ * @private
+ */
+ value: function _getHubSize() {
+ var hubSize = 0;
+ for (var nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ var node = this.body.nodes[nodeId];
+ if (this.hierarchicalLevels[nodeId] === undefined) {
+ hubSize = node.edges.length < hubSize ? hubSize : node.edges.length;
+ }
}
-
- // mouse must be down, and mouse events are allowed (see the TouchMouse input)
- if (!this.pressed || !this.allow) {
- return;
- }
-
- if (eventType & INPUT_END) {
- this.pressed = false;
- }
-
- this.callback(this.manager, eventType, {
- pointers: [ev],
- changedPointers: [ev],
- pointerType: INPUT_TYPE_MOUSE,
- srcEvent: ev
- });
+ }
+ return hubSize;
}
- });
-
- var POINTER_INPUT_MAP = {
- pointerdown: INPUT_START,
- pointermove: INPUT_MOVE,
- pointerup: INPUT_END,
- pointercancel: INPUT_CANCEL,
- pointerout: INPUT_CANCEL
- };
-
- // in IE10 the pointer types is defined as an enum
- var IE10_POINTER_TYPE_ENUM = {
- 2: INPUT_TYPE_TOUCH,
- 3: INPUT_TYPE_PEN,
- 4: INPUT_TYPE_MOUSE,
- 5: INPUT_TYPE_KINECT // see https://twitter.com/jacobrossi/status/480596438489890816
- };
-
- var POINTER_ELEMENT_EVENTS = 'pointerdown';
- var POINTER_WINDOW_EVENTS = 'pointermove pointerup pointercancel';
-
- // IE10 has prefixed support, and case-sensitive
- if (window.MSPointerEvent) {
- POINTER_ELEMENT_EVENTS = 'MSPointerDown';
- POINTER_WINDOW_EVENTS = 'MSPointerMove MSPointerUp MSPointerCancel';
- }
-
- /**
- * Pointer events input
- * @constructor
- * @extends Input
- */
- function PointerEventInput() {
- this.evEl = POINTER_ELEMENT_EVENTS;
- this.evWin = POINTER_WINDOW_EVENTS;
-
- Input.apply(this, arguments);
-
- this.store = (this.manager.session.pointerEvents = []);
- }
+ }, {
+ key: '_determineLevelsByHubsize',
- inherit(PointerEventInput, Input, {
/**
- * handle mouse events
- * @param {Object} ev
+ * this function allocates nodes in levels based on the recursive branching from the largest hubs.
+ *
+ * @param hubsize
+ * @private
*/
- handler: function PEhandler(ev) {
- var store = this.store;
- var removePointer = false;
-
- var eventTypeNormalized = ev.type.toLowerCase().replace('ms', '');
- var eventType = POINTER_INPUT_MAP[eventTypeNormalized];
- var pointerType = IE10_POINTER_TYPE_ENUM[ev.pointerType] || ev.pointerType;
-
- var isTouch = (pointerType == INPUT_TYPE_TOUCH);
+ value: function _determineLevelsByHubsize() {
+ var nodeId = undefined,
+ node = undefined;
+ var hubSize = 1;
- // get index of the event in the store
- var storeIndex = inArray(store, ev.pointerId, 'pointerId');
+ while (hubSize > 0) {
+ // determine hubs
+ hubSize = this._getHubSize();
+ if (hubSize === 0) break;
- // start and mouse must be down
- if (eventType & INPUT_START && (ev.button === 0 || isTouch)) {
- if (storeIndex < 0) {
- store.push(ev);
- storeIndex = store.length - 1;
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
+ if (node.edges.length === hubSize) {
+ this._setLevel(0, node);
}
- } else if (eventType & (INPUT_END | INPUT_CANCEL)) {
- removePointer = true;
- }
-
- // it not found, so the pointer hasn't been down (so it's probably a hover)
- if (storeIndex < 0) {
- return;
+ }
}
+ }
+ }
+ }, {
+ key: '_setLevel',
- // update the event in the store
- store[storeIndex] = ev;
-
- this.callback(this.manager, eventType, {
- pointers: store,
- changedPointers: [ev],
- pointerType: pointerType,
- srcEvent: ev
- });
-
- if (removePointer) {
- // remove from the store
- store.splice(storeIndex, 1);
+ /**
+ * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
+ *
+ * @param level
+ * @param edges
+ * @param parentId
+ * @private
+ */
+ value: function _setLevel(level, node) {
+ if (this.hierarchicalLevels[node.id] !== undefined) {
+ return;
+ }var childNode = undefined;
+ this.hierarchicalLevels[node.id] = level;
+ for (var i = 0; i < node.edges.length; i++) {
+ if (node.edges[i].toId === node.id) {
+ childNode = node.edges[i].from;
+ } else {
+ childNode = node.edges[i].to;
}
+ this._setLevel(level + 1, childNode);
+ }
}
- });
-
- var SINGLE_TOUCH_INPUT_MAP = {
- touchstart: INPUT_START,
- touchmove: INPUT_MOVE,
- touchend: INPUT_END,
- touchcancel: INPUT_CANCEL
- };
-
- var SINGLE_TOUCH_TARGET_EVENTS = 'touchstart';
- var SINGLE_TOUCH_WINDOW_EVENTS = 'touchstart touchmove touchend touchcancel';
-
- /**
- * Touch events input
- * @constructor
- * @extends Input
- */
- function SingleTouchInput() {
- this.evTarget = SINGLE_TOUCH_TARGET_EVENTS;
- this.evWin = SINGLE_TOUCH_WINDOW_EVENTS;
- this.started = false;
+ }, {
+ key: '_determineLevelsDirected',
- Input.apply(this, arguments);
- }
+ /**
+ * this function allocates nodes in levels based on the direction of the edges
+ *
+ * @param hubsize
+ * @private
+ */
+ value: function _determineLevelsDirected() {
+ var nodeId = undefined,
+ node = undefined;
+ var minLevel = 10000;
- inherit(SingleTouchInput, Input, {
- handler: function TEhandler(ev) {
- var type = SINGLE_TOUCH_INPUT_MAP[ev.type];
+ // set first node to source
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
+ this._setLevelDirected(minLevel, node);
+ }
+ }
- // should we handle the touch events?
- if (type === INPUT_START) {
- this.started = true;
+ // get the minimum level
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ minLevel = this.hierarchicalLevels[nodeId] < minLevel ? this.hierarchicalLevels[nodeId] : minLevel;
}
+ }
- if (!this.started) {
- return;
+ // subtract the minimum from the set so we have a range starting from 0
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ this.hierarchicalLevels[nodeId] -= minLevel;
}
+ }
+ }
+ }, {
+ key: '_setLevelDirected',
- var touches = normalizeSingleTouches.call(this, ev, type);
+ /**
+ * this function is called recursively to enumerate the branched of the first node and give each node a level based on edge direction
+ *
+ * @param level
+ * @param edges
+ * @param parentId
+ * @private
+ */
+ value: function _setLevelDirected(level, node) {
+ if (this.hierarchicalLevels[node.id] !== undefined) {
+ return;
+ }var childNode = undefined;
+ this.hierarchicalLevels[node.id] = level;
- // when done, reset the started state
- if (type & (INPUT_END | INPUT_CANCEL) && touches[0].length - touches[1].length === 0) {
- this.started = false;
+ for (var i = 0; i < node.edges.length; i++) {
+ if (node.edges[i].toId === node.id) {
+ childNode = node.edges[i].from;
+ this._setLevelDirected(level - 1, childNode);
+ } else {
+ childNode = node.edges[i].to;
+ this._setLevelDirected(level + 1, childNode);
}
-
- this.callback(this.manager, type, {
- pointers: touches[0],
- changedPointers: touches[1],
- pointerType: INPUT_TYPE_TOUCH,
- srcEvent: ev
- });
+ }
}
- });
+ }, {
+ key: '_placeBranchNodes',
- /**
- * @this {TouchInput}
- * @param {Object} ev
- * @param {Number} type flag
- * @returns {undefined|Array} [all, changed]
- */
- function normalizeSingleTouches(ev, type) {
- var all = toArray(ev.touches);
- var changed = toArray(ev.changedTouches);
+ /**
+ * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes
+ * on a X position that ensures there will be no overlap.
+ *
+ * @param edges
+ * @param parentId
+ * @param distribution
+ * @param parentLevel
+ * @private
+ */
+ value: function _placeBranchNodes(edges, parentId, distribution, parentLevel) {
+ for (var i = 0; i < edges.length; i++) {
+ var childNode = undefined;
+ var parentNode = undefined;
+ if (edges[i].toId === parentId) {
+ childNode = edges[i].from;
+ parentNode = edges[i].to;
+ } else {
+ childNode = edges[i].to;
+ parentNode = edges[i].from;
+ }
+ var childNodeLevel = this.hierarchicalLevels[childNode.id];
- if (type & (INPUT_END | INPUT_CANCEL)) {
- all = uniqueArray(all.concat(changed), 'identifier', true);
+ if (this.positionedNodes[childNode.id] === undefined) {
+ // if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here.
+ if (childNodeLevel > parentLevel) {
+ if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') {
+ if (childNode.x === undefined) {
+ childNode.x = Math.max(distribution[childNodeLevel].distance, parentNode.x);
+ }
+ distribution[childNodeLevel].distance = childNode.x + this.nodeSpacing;
+ this.positionedNodes[childNode.id] = true;
+ } else {
+ if (childNode.y === undefined) {
+ childNode.y = Math.max(distribution[childNodeLevel].distance, parentNode.y);
+ }
+ distribution[childNodeLevel].distance = childNode.y + this.nodeSpacing;
+ }
+ this.positionedNodes[childNode.id] = true;
+
+ if (childNode.edges.length > 1) {
+ this._placeBranchNodes(childNode.edges, childNode.id, distribution, childNodeLevel);
+ }
+ }
+ }
+ }
}
+ }]);
- return [all, changed];
- }
+ return LayoutEngine;
+ })();
- var TOUCH_INPUT_MAP = {
- touchstart: INPUT_START,
- touchmove: INPUT_MOVE,
- touchend: INPUT_END,
- touchcancel: INPUT_CANCEL
- };
+ exports['default'] = LayoutEngine;
+ module.exports = exports['default'];
- var TOUCH_TARGET_EVENTS = 'touchstart touchmove touchend touchcancel';
+/***/ },
+/* 60 */
+/***/ function(module, exports, __webpack_require__) {
- /**
- * Multi-user touch events input
- * @constructor
- * @extends Input
- */
- function TouchInput() {
- this.evTarget = TOUCH_TARGET_EVENTS;
- this.targetIds = {};
+ 'use strict';
- Input.apply(this, arguments);
- }
+ var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
- inherit(TouchInput, Input, {
- handler: function MTEhandler(ev) {
- var type = TOUCH_INPUT_MAP[ev.type];
- var touches = getTouches.call(this, ev, type);
- if (!touches) {
- return;
- }
+ var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
- this.callback(this.manager, type, {
- pointers: touches[0],
- changedPointers: touches[1],
- pointerType: INPUT_TYPE_TOUCH,
- srcEvent: ev
- });
- }
+ Object.defineProperty(exports, '__esModule', {
+ value: true
});
+ var util = __webpack_require__(1);
+ var Hammer = __webpack_require__(41);
+ var hammerUtil = __webpack_require__(44);
+ var locales = __webpack_require__(81);
+
/**
- * @this {TouchInput}
- * @param {Object} ev
- * @param {Number} type flag
- * @returns {undefined|Array} [all, changed]
+ * clears the toolbar div element of children
+ *
+ * @private
*/
- function getTouches(ev, type) {
- var allTouches = toArray(ev.touches);
- var targetIds = this.targetIds;
-
- // when there is only one touch, the process can be simplified
- if (type & (INPUT_START | INPUT_MOVE) && allTouches.length === 1) {
- targetIds[allTouches[0].identifier] = true;
- return [allTouches, allTouches];
- }
- var i,
- targetTouches,
- changedTouches = toArray(ev.changedTouches),
- changedTargetTouches = [],
- target = this.target;
+ var ManipulationSystem = (function () {
+ function ManipulationSystem(body, canvas, selectionHandler) {
+ var _this = this;
- // get target touches from touches
- targetTouches = allTouches.filter(function(touch) {
- return hasParent(touch.target, target);
- });
+ _classCallCheck(this, ManipulationSystem);
- // collect touches
- if (type === INPUT_START) {
- i = 0;
- while (i < targetTouches.length) {
- targetIds[targetTouches[i].identifier] = true;
- i++;
- }
- }
+ this.body = body;
+ this.canvas = canvas;
+ this.selectionHandler = selectionHandler;
- // filter changed touches to only contain touches that exist in the collected target ids
- i = 0;
- while (i < changedTouches.length) {
- if (targetIds[changedTouches[i].identifier]) {
- changedTargetTouches.push(changedTouches[i]);
- }
+ this.editMode = false;
+ this.manipulationDiv = undefined;
+ this.editModeDiv = undefined;
+ this.closeDiv = undefined;
- // cleanup removed touches
- if (type & (INPUT_END | INPUT_CANCEL)) {
- delete targetIds[changedTouches[i].identifier];
- }
- i++;
- }
+ this.manipulationHammers = [];
+ this.temporaryUIFunctions = {};
+ this.temporaryEventFunctions = [];
- if (!changedTargetTouches.length) {
- return;
- }
+ this.touchTime = 0;
+ this.temporaryIds = { nodes: [], edges: [] };
+ this.guiEnabled = false;
+ this.inMode = false;
+ this.selectedControlNode = undefined;
- return [
- // merge targetTouches with changedTargetTouches so it contains ALL touches, including 'end' and 'cancel'
- uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true),
- changedTargetTouches
- ];
- }
+ this.options = {};
+ this.defaultOptions = {
+ enabled: false,
+ initiallyActive: false,
+ locale: 'en',
+ locales: locales,
+ functionality: {
+ addNode: true,
+ addEdge: true,
+ editNode: true,
+ editEdge: true,
+ deleteNode: true,
+ deleteEdge: true
+ },
+ handlerFunctions: {
+ addNode: undefined,
+ addEdge: undefined,
+ editNode: undefined,
+ editEdge: undefined,
+ deleteNode: undefined,
+ deleteEdge: undefined
+ },
+ controlNodeStyle: {
+ shape: 'dot',
+ size: 6,
+ color: { background: '#ff0000', border: '#3c3c3c', highlight: { background: '#07f968', border: '#3c3c3c' } },
+ borderWidth: 2,
+ borderWidthSelected: 2
+ }
+ };
+ util.extend(this.options, this.defaultOptions);
- /**
- * Combined touch and mouse input
- *
- * Touch has a higher priority then mouse, and while touching no mouse events are allowed.
- * This because touch devices also emit mouse events while doing a touch.
- *
- * @constructor
- * @extends Input
- */
- function TouchMouseInput() {
- Input.apply(this, arguments);
+ this.body.emitter.on('destroy', function () {
+ _this._clean();
+ });
+ this.body.emitter.on('_dataChanged', this._restore.bind(this));
+ this.body.emitter.on('_resetData', this._restore.bind(this));
+ }
- var handler = bindFn(this.handler, this);
- this.touch = new TouchInput(this.manager, handler);
- this.mouse = new MouseInput(this.manager, handler);
- }
+ _createClass(ManipulationSystem, [{
+ key: '_restore',
- inherit(TouchMouseInput, Input, {
/**
- * handle mouse and touch events
- * @param {Hammer} manager
- * @param {String} inputEvent
- * @param {Object} inputData
+ * If something changes in the data during editing, switch back to the initial datamanipulation state and close all edit modes.
+ * @private
*/
- handler: function TMEhandler(manager, inputEvent, inputData) {
- var isTouch = (inputData.pointerType == INPUT_TYPE_TOUCH),
- isMouse = (inputData.pointerType == INPUT_TYPE_MOUSE);
-
- // when we're in a touch event, so block all upcoming mouse events
- // most mobile browser also emit mouseevents, right after touchstart
- if (isTouch) {
- this.mouse.allow = false;
- } else if (isMouse && !this.mouse.allow) {
- return;
- }
-
- // reset the allowMouse when we're done
- if (inputEvent & (INPUT_END | INPUT_CANCEL)) {
- this.mouse.allow = true;
+ value: function _restore() {
+ if (this.inMode !== false) {
+ if (this.options.initiallyActive === true) {
+ this.enableEditMode();
+ } else {
+ this.disableEditMode();
}
-
- this.callback(manager, inputEvent, inputData);
- },
+ }
+ }
+ }, {
+ key: 'setOptions',
/**
- * remove the event listeners
+ * Set the Options
+ * @param options
*/
- destroy: function destroy() {
- this.touch.destroy();
- this.mouse.destroy();
+ value: function setOptions(options) {
+ if (options !== undefined) {
+ if (typeof options === 'boolean') {
+ this.options.enabled = options;
+ } else {
+ this.options.enabled = true;
+ util.deepExtend(this.options, options);
+ }
+ if (this.options.initiallyActive === true) {
+ this.editMode = true;
+ }
+ this._setup();
+ }
}
- });
-
- var PREFIXED_TOUCH_ACTION = prefixed(TEST_ELEMENT.style, 'touchAction');
- var NATIVE_TOUCH_ACTION = PREFIXED_TOUCH_ACTION !== undefined;
-
- // magical touchAction value
- var TOUCH_ACTION_COMPUTE = 'compute';
- var TOUCH_ACTION_AUTO = 'auto';
- var TOUCH_ACTION_MANIPULATION = 'manipulation'; // not implemented
- var TOUCH_ACTION_NONE = 'none';
- var TOUCH_ACTION_PAN_X = 'pan-x';
- var TOUCH_ACTION_PAN_Y = 'pan-y';
-
- /**
- * Touch Action
- * sets the touchAction property or uses the js alternative
- * @param {Manager} manager
- * @param {String} value
- * @constructor
- */
- function TouchAction(manager, value) {
- this.manager = manager;
- this.set(value);
- }
+ }, {
+ key: 'toggleEditMode',
- TouchAction.prototype = {
/**
- * set the touchAction value on the element or enable the polyfill
- * @param {String} value
+ * Enable or disable edit-mode. Draws the DOM required and cleans up after itself.
+ *
+ * @private
*/
- set: function(value) {
- // find out the touch-action by the event handlers
- if (value == TOUCH_ACTION_COMPUTE) {
- value = this.compute();
- }
+ value: function toggleEditMode() {
+ if (this.editMode === true) {
+ this.disableEditMode();
+ } else {
+ this.enableEditMode();
+ }
+ }
+ }, {
+ key: 'enableEditMode',
+ value: function enableEditMode() {
+ this.editMode = true;
- if (NATIVE_TOUCH_ACTION) {
- this.manager.element.style[PREFIXED_TOUCH_ACTION] = value;
- }
- this.actions = value.toLowerCase().trim();
- },
+ this._clean();
+ if (this.guiEnabled === true) {
+ this.manipulationDiv.style.display = 'block';
+ this.closeDiv.style.display = 'block';
+ this.editModeDiv.style.display = 'none';
+ this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
+ this.showManipulatorToolbar();
+ }
+ }
+ }, {
+ key: 'disableEditMode',
+ value: function disableEditMode() {
+ this.editMode = false;
- /**
- * just re-set the touchAction value
- */
- update: function() {
- this.set(this.manager.options.touchAction);
- },
+ this._clean();
+ if (this.guiEnabled === true) {
+ this.manipulationDiv.style.display = 'none';
+ this.closeDiv.style.display = 'none';
+ this.editModeDiv.style.display = 'block';
+ this._createEditButton();
+ }
+ }
+ }, {
+ key: 'showManipulatorToolbar',
/**
- * compute the value for the touchAction property based on the recognizer's settings
- * @returns {String} value
+ * Creates the main toolbar. Removes functions bound to the select event. Binds all the buttons of the toolbar.
+ *
+ * @private
*/
- compute: function() {
- var actions = [];
- each(this.manager.recognizers, function(recognizer) {
- if (boolOrFn(recognizer.options.enable, [recognizer])) {
- actions = actions.concat(recognizer.getTouchAction());
- }
- });
- return cleanTouchActions(actions.join(' '));
- },
+ value: function showManipulatorToolbar() {
+ // restore the state of any bound functions or events, remove control nodes, restore physics
+ this._clean();
- /**
- * this method is called on each input cycle and provides the preventing of the browser behavior
- * @param {Object} input
- */
- preventDefaults: function(input) {
- // not needed with native support for the touchAction property
- if (NATIVE_TOUCH_ACTION) {
- return;
- }
+ // reset global letiables
+ this.manipulationDOM = {};
- var srcEvent = input.srcEvent;
- var direction = input.offsetDirection;
+ // if the gui is enabled, draw all elements.
+ if (this.guiEnabled === true) {
+ var selectedNodeCount = this.selectionHandler._getSelectedNodeCount();
+ var selectedEdgeCount = this.selectionHandler._getSelectedEdgeCount();
+ var selectedTotalCount = selectedNodeCount + selectedEdgeCount;
+ var locale = this.options.locales[this.options.locale];
+ var needSeperator = false;
- // if the touch action did prevented once this session
- if (this.manager.session.prevented) {
- srcEvent.preventDefault();
- return;
+ if (this.options.functionality.addNode === true) {
+ this._createAddNodeButton(locale);
+ needSeperator = true;
}
-
- var actions = this.actions;
- var hasNone = inStr(actions, TOUCH_ACTION_NONE);
- var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y);
- var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X);
-
- if (hasNone ||
- (hasPanY && direction & DIRECTION_HORIZONTAL) ||
- (hasPanX && direction & DIRECTION_VERTICAL)) {
- return this.preventSrc(srcEvent);
+ if (this.options.functionality.addEdge === true) {
+ if (needSeperator === true) {
+ this._createSeperator(1);
+ } else {
+ needSeperator = true;
+ }
+ this._createAddEdgeButton(locale);
}
- },
-
- /**
- * call preventDefault to prevent the browser's default behavior (scrolling in most cases)
- * @param {Object} srcEvent
- */
- preventSrc: function(srcEvent) {
- this.manager.session.prevented = true;
- srcEvent.preventDefault();
- }
- };
- /**
- * when the touchActions are collected they are not a valid value, so we need to clean things up. *
- * @param {String} actions
- * @returns {*}
- */
- function cleanTouchActions(actions) {
- // none
- if (inStr(actions, TOUCH_ACTION_NONE)) {
- return TOUCH_ACTION_NONE;
- }
+ if (selectedNodeCount === 1 && typeof this.options.handlerFunctions.editNode === 'function' && this.options.functionality.editNode === true) {
+ if (needSeperator === true) {
+ this._createSeperator(2);
+ } else {
+ needSeperator = true;
+ }
+ this._createEditNodeButton(locale);
+ } else if (selectedEdgeCount === 1 && selectedNodeCount === 0 && this.options.functionality.editEdge === true) {
+ if (needSeperator === true) {
+ this._createSeperator(3);
+ } else {
+ needSeperator = true;
+ }
+ this._createEditEdgeButton(locale);
+ }
- var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X);
- var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y);
+ // remove buttons
+ if (selectedTotalCount !== 0) {
+ if (selectedNodeCount === 1 && this.options.functionality.deleteNode === true) {
+ if (needSeperator === true) {
+ this._createSeperator(4);
+ }
+ this._createDeleteButton(locale);
+ } else if (selectedNodeCount === 0 && this.options.functionality.deleteEdge === true) {
+ if (needSeperator === true) {
+ this._createSeperator(4);
+ }
+ this._createDeleteButton(locale);
+ }
+ }
- // pan-x and pan-y can be combined
- if (hasPanX && hasPanY) {
- return TOUCH_ACTION_PAN_X + ' ' + TOUCH_ACTION_PAN_Y;
- }
+ // bind the close button
+ this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
- // pan-x OR pan-y
- if (hasPanX || hasPanY) {
- return hasPanX ? TOUCH_ACTION_PAN_X : TOUCH_ACTION_PAN_Y;
- }
+ // refresh this bar based on what has been selected
+ this._temporaryBindEvent('select', this.showManipulatorToolbar.bind(this));
+ }
- // manipulation
- if (inStr(actions, TOUCH_ACTION_MANIPULATION)) {
- return TOUCH_ACTION_MANIPULATION;
+ // redraw to show any possible changes
+ this.body.emitter.emit('_redraw');
}
+ }, {
+ key: 'addNodeMode',
- return TOUCH_ACTION_AUTO;
- }
-
- /**
- * Recognizer flow explained; *
- * All recognizers have the initial state of POSSIBLE when a input session starts.
- * The definition of a input session is from the first input until the last input, with all it's movement in it. *
- * Example session for mouse-input: mousedown -> mousemove -> mouseup
- *
- * On each recognizing cycle (see Manager.recognize) the .recognize() method is executed
- * which determines with state it should be.
- *
- * If the recognizer has the state FAILED, CANCELLED or RECOGNIZED (equals ENDED), it is reset to
- * POSSIBLE to give it another change on the next cycle.
- *
- * Possible
- * |
- * +-----+---------------+
- * | |
- * +-----+-----+ |
- * | | |
- * Failed Cancelled |
- * +-------+------+
- * | |
- * Recognized Began
- * |
- * Changed
- * |
- * Ended/Recognized
- */
- var STATE_POSSIBLE = 1;
- var STATE_BEGAN = 2;
- var STATE_CHANGED = 4;
- var STATE_ENDED = 8;
- var STATE_RECOGNIZED = STATE_ENDED;
- var STATE_CANCELLED = 16;
- var STATE_FAILED = 32;
-
- /**
- * Recognizer
- * Every recognizer needs to extend from this class.
- * @constructor
- * @param {Object} options
- */
- function Recognizer(options) {
- this.id = uniqueId();
+ /**
+ * Create the toolbar for adding Nodes
+ *
+ * @private
+ */
+ value: function addNodeMode() {
+ // when using the gui, enable edit mode if it wasnt already.
+ if (this.editMode !== true) {
+ this.enableEditMode();
+ }
- this.manager = null;
- this.options = merge(options || {}, this.defaults);
+ // restore the state of any bound functions or events, remove control nodes, restore physics
+ this._clean();
- // default is enable true
- this.options.enable = ifUndefined(this.options.enable, true);
+ this.inMode = 'addNode';
+ if (this.guiEnabled === true) {
+ var locale = this.options.locales[this.options.locale];
+ this.manipulationDOM = {};
+ this._createBackButton(locale);
+ this._createSeperator();
+ this._createDescription(locale.addDescription);
- this.state = STATE_POSSIBLE;
+ // bind the close button
+ this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
+ }
- this.simultaneous = {};
- this.requireFail = [];
- }
+ this._temporaryBindEvent('click', this._performAddNode.bind(this));
+ }
+ }, {
+ key: 'editNodeMode',
- Recognizer.prototype = {
/**
- * @virtual
- * @type {Object}
+ * call the bound function to handle the editing of the node. The node has to be selected.
+ *
+ * @private
*/
- defaults: {},
+ value: function editNodeMode() {
+ var _this2 = this;
- /**
- * set options
- * @param {Object} options
- * @return {Recognizer}
- */
- set: function(options) {
- extend(this.options, options);
+ // when using the gui, enable edit mode if it wasnt already.
+ if (this.editMode !== true) {
+ this.enableEditMode();
+ }
- // also update the touchAction, in case something changed about the directions/enabled state
- this.manager && this.manager.touchAction.update();
- return this;
- },
+ // restore the state of any bound functions or events, remove control nodes, restore physics
+ this._clean();
- /**
- * recognize simultaneous with an other recognizer.
- * @param {Recognizer} otherRecognizer
- * @returns {Recognizer} this
- */
- recognizeWith: function(otherRecognizer) {
- if (invokeArrayArg(otherRecognizer, 'recognizeWith', this)) {
- return this;
- }
+ this.inMode = 'editNode';
+ if (typeof this.options.handlerFunctions.editNode === 'function') {
+ var node = this.selectionHandler._getSelectedNode();
+ if (node.isCluster !== true) {
+ var data = util.deepExtend({}, node.options, true);
+ data.x = node.x;
+ data.y = node.y;
- var simultaneous = this.simultaneous;
- otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
- if (!simultaneous[otherRecognizer.id]) {
- simultaneous[otherRecognizer.id] = otherRecognizer;
- otherRecognizer.recognizeWith(this);
+ if (this.options.handlerFunctions.editNode.length === 2) {
+ this.options.handlerFunctions.editNode(data, function (finalizedData) {
+ if (finalizedData !== null && finalizedData !== undefined && _this2.inMode === 'delete') {
+ // if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
+ _this2.body.data.nodes.update(finalizedData);
+ _this2.showManipulatorToolbar();
+ }
+ });
+ } else {
+ throw new Error('The function for edit does not support two arguments (data, callback)');
+ }
+ } else {
+ alert(this.options.locales[this.options.locale].editClusterError);
}
- return this;
- },
+ } else {
+ throw new Error('No function has been configured to handle the editing of nodes.');
+ }
+ }
+ }, {
+ key: 'addEdgeMode',
/**
- * drop the simultaneous link. it doesnt remove the link on the other recognizer.
- * @param {Recognizer} otherRecognizer
- * @returns {Recognizer} this
+ * create the toolbar to connect nodes
+ *
+ * @private
*/
- dropRecognizeWith: function(otherRecognizer) {
- if (invokeArrayArg(otherRecognizer, 'dropRecognizeWith', this)) {
- return this;
- }
+ value: function addEdgeMode() {
+ // when using the gui, enable edit mode if it wasnt already.
+ if (this.editMode !== true) {
+ this.enableEditMode();
+ }
- otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
- delete this.simultaneous[otherRecognizer.id];
- return this;
- },
+ // restore the state of any bound functions or events, remove control nodes, restore physics
+ this._clean();
- /**
- * recognizer can only run when an other is failing
- * @param {Recognizer} otherRecognizer
- * @returns {Recognizer} this
- */
- requireFailure: function(otherRecognizer) {
- if (invokeArrayArg(otherRecognizer, 'requireFailure', this)) {
- return this;
- }
+ this.inMode = 'addEdge';
+ if (this.guiEnabled === true) {
+ var locale = this.options.locales[this.options.locale];
+ this.manipulationDOM = {};
+ this._createBackButton(locale);
+ this._createSeperator();
+ this._createDescription(locale.edgeDescription);
- var requireFail = this.requireFail;
- otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
- if (inArray(requireFail, otherRecognizer) === -1) {
- requireFail.push(otherRecognizer);
- otherRecognizer.requireFailure(this);
- }
- return this;
- },
+ // bind the close button
+ this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
+ }
- /**
- * drop the requireFailure link. it does not remove the link on the other recognizer.
- * @param {Recognizer} otherRecognizer
- * @returns {Recognizer} this
- */
- dropRequireFailure: function(otherRecognizer) {
- if (invokeArrayArg(otherRecognizer, 'dropRequireFailure', this)) {
- return this;
- }
+ // temporarily overload functions
+ this._temporaryBindUI('onTouch', this._handleConnect.bind(this));
+ this._temporaryBindUI('onDragEnd', this._finishConnect.bind(this));
+ this._temporaryBindUI('onDrag', this._dragControlNode.bind(this));
+ this._temporaryBindUI('onRelease', this._finishConnect.bind(this));
- otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
- var index = inArray(this.requireFail, otherRecognizer);
- if (index > -1) {
- this.requireFail.splice(index, 1);
- }
- return this;
- },
+ this._temporaryBindUI('onDragStart', function () {});
+ this._temporaryBindUI('onHold', function () {});
+ }
+ }, {
+ key: 'editEdgeMode',
/**
- * has require failures boolean
- * @returns {boolean}
+ * create the toolbar to edit edges
+ *
+ * @private
*/
- hasRequireFailures: function() {
- return this.requireFail.length > 0;
- },
+ value: function editEdgeMode() {
+ // when using the gui, enable edit mode if it wasnt already.
+ if (this.editMode !== true) {
+ this.enableEditMode();
+ }
- /**
- * if the recognizer can recognize simultaneous with an other recognizer
- * @param {Recognizer} otherRecognizer
- * @returns {Boolean}
- */
- canRecognizeWith: function(otherRecognizer) {
- return !!this.simultaneous[otherRecognizer.id];
- },
+ // restore the state of any bound functions or events, remove control nodes, restore physics
+ this._clean();
- /**
- * You should use `tryEmit` instead of `emit` directly to check
- * that all the needed recognizers has failed before emitting.
- * @param {Object} input
- */
- emit: function(input) {
- var self = this;
- var state = this.state;
+ this.inMode = 'editEdge';
+ if (this.guiEnabled === true) {
+ var locale = this.options.locales[this.options.locale];
+ this.manipulationDOM = {};
+ this._createBackButton(locale);
+ this._createSeperator();
+ this._createDescription(locale.editEdgeDescription);
- function emit(withState) {
- self.manager.emit(self.options.event + (withState ? stateStr(state) : ''), input);
- }
+ // bind the close button
+ this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
+ }
- // 'panstart' and 'panmove'
- if (state < STATE_ENDED) {
- emit(true);
- }
+ this.edgeBeingEditedId = this.selectionHandler.getSelectedEdges()[0];
+ var edge = this.body.edges[this.edgeBeingEditedId];
- emit(); // simple 'eventName' events
+ // create control nodes
+ var controlNodeFrom = this._getNewTargetNode(edge.from.x, edge.from.y);
+ var controlNodeTo = this._getNewTargetNode(edge.to.x, edge.to.y);
- // panend and pancancel
- if (state >= STATE_ENDED) {
- emit(true);
- }
- },
+ this.temporaryIds.nodes.push(controlNodeFrom.id);
+ this.temporaryIds.nodes.push(controlNodeTo.id);
- /**
- * Check that all the require failure recognizers has failed,
- * if true, it emits a gesture event,
- * otherwise, setup the state to FAILED.
- * @param {Object} input
- */
- tryEmit: function(input) {
- if (this.canEmit()) {
- return this.emit(input);
- }
- // it's failing anyway
- this.state = STATE_FAILED;
- },
+ this.body.nodes[controlNodeFrom.id] = controlNodeFrom;
+ this.body.nodeIndices.push(controlNodeFrom.id);
+ this.body.nodes[controlNodeTo.id] = controlNodeTo;
+ this.body.nodeIndices.push(controlNodeTo.id);
- /**
- * can we emit?
- * @returns {boolean}
- */
- canEmit: function() {
- var i = 0;
- while (i < this.requireFail.length) {
- if (!(this.requireFail[i].state & (STATE_FAILED | STATE_POSSIBLE))) {
- return false;
- }
- i++;
+ // temporarily overload UI functions, cleaned up automatically because of _temporaryBindUI
+ this._temporaryBindUI('onTouch', this._controlNodeTouch.bind(this)); // used to get the position
+ this._temporaryBindUI('onTap', function () {}); // disabled
+ this._temporaryBindUI('onHold', function () {}); // disabled
+ this._temporaryBindUI('onDragStart', this._controlNodeDragStart.bind(this)); // used to select control node
+ this._temporaryBindUI('onDrag', this._controlNodeDrag.bind(this)); // used to drag control node
+ this._temporaryBindUI('onDragEnd', this._controlNodeDragEnd.bind(this)); // used to connect or revert control nodes
+ this._temporaryBindUI('onMouseMove', function () {}); // disabled
+
+ // create function to position control nodes correctly on movement
+ // automatically cleaned up because we use the temporary bind
+ this._temporaryBindEvent('beforeDrawing', function (ctx) {
+ var positions = edge.edgeType.findBorderPositions(ctx);
+ if (controlNodeFrom.selected === false) {
+ controlNodeFrom.x = positions.from.x;
+ controlNodeFrom.y = positions.from.y;
}
- return true;
- },
+ if (controlNodeTo.selected === false) {
+ controlNodeTo.x = positions.to.x;
+ controlNodeTo.y = positions.to.y;
+ }
+ });
+
+ this.body.emitter.emit('_redraw');
+ }
+ }, {
+ key: 'deleteSelected',
/**
- * update the recognizer
- * @param {Object} inputData
+ * delete everything in the selection
+ *
+ * @private
*/
- recognize: function(inputData) {
- // make a new copy of the inputData
- // so we can change the inputData without messing up the other recognizers
- var inputDataClone = extend({}, inputData);
+ value: function deleteSelected() {
+ var _this3 = this;
- // is is enabled and allow recognizing?
- if (!boolOrFn(this.options.enable, [this, inputDataClone])) {
- this.reset();
- this.state = STATE_FAILED;
+ // when using the gui, enable edit mode if it wasnt already.
+ if (this.editMode !== true) {
+ this.enableEditMode();
+ }
+
+ // restore the state of any bound functions or events, remove control nodes, restore physics
+ this._clean();
+
+ this.inMode = 'delete';
+ var selectedNodes = this.selectionHandler.getSelectedNodes();
+ var selectedEdges = this.selectionHandler.getSelectedEdges();
+ var deleteFunction = undefined;
+ if (selectedNodes.length > 0) {
+ for (var i = 0; i < selectedNodes.length; i++) {
+ if (this.body.nodes[selectedNodes[i]].isCluster === true) {
+ alert(this.options.locales[this.options.locale].deleteClusterError);
return;
+ }
}
- // reset when we've reached the end
- if (this.state & (STATE_RECOGNIZED | STATE_CANCELLED | STATE_FAILED)) {
- this.state = STATE_POSSIBLE;
+ if (typeof this.options.handlerFunctions.deleteNode === 'function') {
+ deleteFunction = this.options.handlerFunctions.deleteNode;
}
+ } else if (selectedEdges.length > 0) {
+ if (typeof this.options.handlerFunctions.deleteEdge === 'function') {
+ deleteFunction = this.options.handlerFunctions.deleteEdge;
+ }
+ }
- this.state = this.process(inputDataClone);
-
- // the recognizer has recognized a gesture
- // so trigger an event
- if (this.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED | STATE_CANCELLED)) {
- this.tryEmit(inputDataClone);
+ if (typeof deleteFunction === 'function') {
+ var data = { nodes: selectedNodes, edges: selectedEdges };
+ if (deleteFunction.length === 2) {
+ deleteFunction(data, function (finalizedData) {
+ if (finalizedData !== null && finalizedData !== undefined && _this3.inMode === 'delete') {
+ // if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
+ _this3.body.data.edges.remove(finalizedData.edges);
+ _this3.body.data.nodes.remove(finalizedData.nodes);
+ _this3.body.emitter.emit('startSimulation');
+ }
+ });
+ } else {
+ throw new Error('The function for delete does not support two arguments (data, callback)');
}
- },
+ } else {
+ this.body.data.edges.remove(selectedEdges);
+ this.body.data.nodes.remove(selectedNodes);
+ this.body.emitter.emit('startSimulation');
+ }
+ }
+ }, {
+ key: '_setup',
- /**
- * return the state of the recognizer
- * the actual recognizing happens in this method
- * @virtual
- * @param {Object} inputData
- * @returns {Const} STATE
- */
- process: function(inputData) { }, // jshint ignore:line
+ //********************************************** PRIVATE ***************************************//
/**
- * return the preferred touch-action
- * @virtual
- * @returns {Array}
+ * draw or remove the DOM
+ * @private
*/
- getTouchAction: function() { },
+ value: function _setup() {
+ if (this.options.enabled === true) {
+ // Enable the GUI
+ this.guiEnabled = true;
- /**
- * called when the gesture isn't allowed to recognize
- * like when another is being recognized or it is disabled
- * @virtual
- */
- reset: function() { }
- };
+ this._createWrappers();
+ if (this.editMode === false) {
+ this._createEditButton();
+ } else {
+ this.showManipulatorToolbar();
+ }
+ } else {
+ this._removeManipulationDOM();
- /**
- * get a usable string, used as event postfix
- * @param {Const} state
- * @returns {String} state
- */
- function stateStr(state) {
- if (state & STATE_CANCELLED) {
- return 'cancel';
- } else if (state & STATE_ENDED) {
- return 'end';
- } else if (state & STATE_CHANGED) {
- return 'move';
- } else if (state & STATE_BEGAN) {
- return 'start';
+ // disable the gui
+ this.guiEnabled = false;
+ }
}
- return '';
- }
+ }, {
+ key: '_createWrappers',
- /**
- * direction cons to string
- * @param {Const} direction
- * @returns {String}
- */
- function directionStr(direction) {
- if (direction == DIRECTION_DOWN) {
- return 'down';
- } else if (direction == DIRECTION_UP) {
- return 'up';
- } else if (direction == DIRECTION_LEFT) {
- return 'left';
- } else if (direction == DIRECTION_RIGHT) {
- return 'right';
- }
- return '';
- }
+ /**
+ * create the div overlays that contain the DOM
+ * @private
+ */
+ value: function _createWrappers() {
+ // load the manipulator HTML elements. All styling done in css.
+ if (this.manipulationDiv === undefined) {
+ this.manipulationDiv = document.createElement('div');
+ this.manipulationDiv.className = 'vis-manipulation';
+ if (this.editMode === true) {
+ this.manipulationDiv.style.display = 'block';
+ } else {
+ this.manipulationDiv.style.display = 'none';
+ }
+ this.canvas.frame.appendChild(this.manipulationDiv);
+ }
- /**
- * get a recognizer by name if it is bound to a manager
- * @param {Recognizer|String} otherRecognizer
- * @param {Recognizer} recognizer
- * @returns {Recognizer}
- */
- function getRecognizerByNameIfManager(otherRecognizer, recognizer) {
- var manager = recognizer.manager;
- if (manager) {
- return manager.get(otherRecognizer);
- }
- return otherRecognizer;
- }
+ // container for the edit button.
+ if (this.editModeDiv === undefined) {
+ this.editModeDiv = document.createElement('div');
+ this.editModeDiv.className = 'vis-edit-mode';
+ if (this.editMode === true) {
+ this.editModeDiv.style.display = 'none';
+ } else {
+ this.editModeDiv.style.display = 'block';
+ }
+ this.canvas.frame.appendChild(this.editModeDiv);
+ }
- /**
- * This recognizer is just used as a base for the simple attribute recognizers.
- * @constructor
- * @extends Recognizer
- */
- function AttrRecognizer() {
- Recognizer.apply(this, arguments);
- }
+ // container for the close div button
+ if (this.closeDiv === undefined) {
+ this.closeDiv = document.createElement('div');
+ this.closeDiv.className = 'vis-close';
+ this.closeDiv.style.display = this.manipulationDiv.style.display;
+ this.canvas.frame.appendChild(this.closeDiv);
+ }
+ }
+ }, {
+ key: '_getNewTargetNode',
- inherit(AttrRecognizer, Recognizer, {
/**
- * @namespace
- * @memberof AttrRecognizer
+ * generate a new target node. Used for creating new edges and editing edges
+ * @param x
+ * @param y
+ * @returns {*}
+ * @private
*/
- defaults: {
- /**
- * @type {Number}
- * @default 1
- */
- pointers: 1
- },
+ value: function _getNewTargetNode(x, y) {
+ var controlNodeStyle = util.deepExtend({}, this.options.controlNodeStyle);
- /**
- * Used to check if it the recognizer receives valid input, like input.distance > 10.
- * @memberof AttrRecognizer
- * @param {Object} input
- * @returns {Boolean} recognized
- */
- attrTest: function(input) {
- var optionPointers = this.options.pointers;
- return optionPointers === 0 || input.pointers.length === optionPointers;
- },
+ controlNodeStyle.id = 'targetNode' + util.randomUUID();
+ controlNodeStyle.hidden = false;
+ controlNodeStyle.physics = false;
+ controlNodeStyle.x = x;
+ controlNodeStyle.y = y;
+
+ return this.body.functions.createNode(controlNodeStyle);
+ }
+ }, {
+ key: '_createEditButton',
/**
- * Process the input and return the state for the recognizer
- * @memberof AttrRecognizer
- * @param {Object} input
- * @returns {*} State
+ * Create the edit button
*/
- process: function(input) {
- var state = this.state;
- var eventType = input.eventType;
+ value: function _createEditButton() {
+ // restore everything to it's original state (if applicable)
+ this._clean();
- var isRecognized = state & (STATE_BEGAN | STATE_CHANGED);
- var isValid = this.attrTest(input);
+ // reset the manipulationDOM
+ this.manipulationDOM = {};
- // on cancel input and we've recognized before, return STATE_CANCELLED
- if (isRecognized && (eventType & INPUT_CANCEL || !isValid)) {
- return state | STATE_CANCELLED;
- } else if (isRecognized || isValid) {
- if (eventType & INPUT_END) {
- return state | STATE_ENDED;
- } else if (!(state & STATE_BEGAN)) {
- return STATE_BEGAN;
- }
- return state | STATE_CHANGED;
- }
- return STATE_FAILED;
- }
- });
+ // empty the editModeDiv
+ util.recursiveDOMDelete(this.editModeDiv);
- /**
- * Pan
- * Recognized when the pointer is down and moved in the allowed direction.
- * @constructor
- * @extends AttrRecognizer
- */
- function PanRecognizer() {
- AttrRecognizer.apply(this, arguments);
+ // create the contents for the editMode button
+ var locale = this.options.locales[this.options.locale];
+ var button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale.edit);
+ this.editModeDiv.appendChild(button);
- this.pX = null;
- this.pY = null;
- }
+ // bind a hammer listener to the button, calling the function toggleEditMode.
+ this._bindHammerToDiv(button, this.toggleEditMode.bind(this));
+ }
+ }, {
+ key: '_clean',
- inherit(PanRecognizer, AttrRecognizer, {
/**
- * @namespace
- * @memberof PanRecognizer
+ * this function cleans up after everything this module does. Temporary elements, functions and events are removed, physics restored, hammers removed.
+ * @private
*/
- defaults: {
- event: 'pan',
- threshold: 10,
- pointers: 1,
- direction: DIRECTION_ALL
- },
-
- getTouchAction: function() {
- var direction = this.options.direction;
- var actions = [];
- if (direction & DIRECTION_HORIZONTAL) {
- actions.push(TOUCH_ACTION_PAN_Y);
- }
- if (direction & DIRECTION_VERTICAL) {
- actions.push(TOUCH_ACTION_PAN_X);
- }
- return actions;
- },
+ value: function _clean() {
+ // not in mode
+ this.inMode = false;
- directionTest: function(input) {
- var options = this.options;
- var hasMoved = true;
- var distance = input.distance;
- var direction = input.direction;
- var x = input.deltaX;
- var y = input.deltaY;
+ // _clean the divs
+ if (this.guiEnabled === true) {
+ util.recursiveDOMDelete(this.editModeDiv);
+ util.recursiveDOMDelete(this.manipulationDiv);
- // lock to axis?
- if (!(direction & options.direction)) {
- if (options.direction & DIRECTION_HORIZONTAL) {
- direction = (x === 0) ? DIRECTION_NONE : (x < 0) ? DIRECTION_LEFT : DIRECTION_RIGHT;
- hasMoved = x != this.pX;
- distance = Math.abs(input.deltaX);
- } else {
- direction = (y === 0) ? DIRECTION_NONE : (y < 0) ? DIRECTION_UP : DIRECTION_DOWN;
- hasMoved = y != this.pY;
- distance = Math.abs(input.deltaY);
- }
- }
- input.direction = direction;
- return hasMoved && distance > options.threshold && direction & options.direction;
- },
+ // removes all the bindings and overloads
+ this._cleanManipulatorHammers();
+ }
- attrTest: function(input) {
- return AttrRecognizer.prototype.attrTest.call(this, input) &&
- (this.state & STATE_BEGAN || (!(this.state & STATE_BEGAN) && this.directionTest(input)));
- },
+ // remove temporary nodes and edges
+ this._cleanupTemporaryNodesAndEdges();
- emit: function(input) {
- this.pX = input.deltaX;
- this.pY = input.deltaY;
+ // restore overloaded UI functions
+ this._unbindTemporaryUIs();
- var direction = directionStr(input.direction);
- if (direction) {
- this.manager.emit(this.options.event + direction, input);
- }
+ // remove the temporaryEventFunctions
+ this._unbindTemporaryEvents();
- this._super.emit.call(this, input);
+ // restore the physics if required
+ this.body.emitter.emit('restorePhysics');
}
- });
-
- /**
- * Pinch
- * Recognized when two or more pointers are moving toward (zoom-in) or away from each other (zoom-out).
- * @constructor
- * @extends AttrRecognizer
- */
- function PinchRecognizer() {
- AttrRecognizer.apply(this, arguments);
- }
+ }, {
+ key: '_cleanManipulatorHammers',
- inherit(PinchRecognizer, AttrRecognizer, {
/**
- * @namespace
- * @memberof PinchRecognizer
+ * Each dom element has it's own hammer. They are stored in this.manipulationHammers. This cleans them up.
+ * @private
*/
- defaults: {
- event: 'pinch',
- threshold: 0,
- pointers: 2
- },
-
- getTouchAction: function() {
- return [TOUCH_ACTION_NONE];
- },
-
- attrTest: function(input) {
- return this._super.attrTest.call(this, input) &&
- (Math.abs(input.scale - 1) > this.options.threshold || this.state & STATE_BEGAN);
- },
-
- emit: function(input) {
- this._super.emit.call(this, input);
- if (input.scale !== 1) {
- var inOut = input.scale < 1 ? 'in' : 'out';
- this.manager.emit(this.options.event + inOut, input);
+ value: function _cleanManipulatorHammers() {
+ // _clean hammer bindings
+ if (this.manipulationHammers.length != 0) {
+ for (var i = 0; i < this.manipulationHammers.length; i++) {
+ this.manipulationHammers[i].destroy();
}
+ this.manipulationHammers = [];
+ }
}
- });
-
- /**
- * Press
- * Recognized when the pointer is down for x ms without any movement.
- * @constructor
- * @extends Recognizer
- */
- function PressRecognizer() {
- Recognizer.apply(this, arguments);
-
- this._timer = null;
- this._input = null;
- }
+ }, {
+ key: '_removeManipulationDOM',
- inherit(PressRecognizer, Recognizer, {
/**
- * @namespace
- * @memberof PressRecognizer
+ * Remove all DOM elements created by this module.
+ * @private
*/
- defaults: {
- event: 'press',
- pointers: 1,
- time: 500, // minimal time of the pointer to be pressed
- threshold: 5 // a minimal movement is ok, but keep it low
- },
-
- getTouchAction: function() {
- return [TOUCH_ACTION_AUTO];
- },
+ value: function _removeManipulationDOM() {
+ // removes all the bindings and overloads
+ this._clean();
- process: function(input) {
- var options = this.options;
- var validPointers = input.pointers.length === options.pointers;
- var validMovement = input.distance < options.threshold;
- var validTime = input.deltaTime > options.time;
+ // empty the manipulation divs
+ util.recursiveDOMDelete(this.manipulationDiv);
+ util.recursiveDOMDelete(this.editModeDiv);
+ util.recursiveDOMDelete(this.closeDiv);
- this._input = input;
+ // remove the manipulation divs
+ this.canvas.frame.removeChild(this.manipulationDiv);
+ this.canvas.frame.removeChild(this.editModeDiv);
+ this.canvas.frame.removeChild(this.closeDiv);
- // we only allow little movement
- // and we've reached an end event, so a tap is possible
- if (!validMovement || !validPointers || (input.eventType & (INPUT_END | INPUT_CANCEL) && !validTime)) {
- this.reset();
- } else if (input.eventType & INPUT_START) {
- this.reset();
- this._timer = setTimeoutContext(function() {
- this.state = STATE_RECOGNIZED;
- this.tryEmit();
- }, options.time, this);
- } else if (input.eventType & INPUT_END) {
- return STATE_RECOGNIZED;
- }
- return STATE_FAILED;
- },
+ // set the references to undefined
+ this.manipulationDiv = undefined;
+ this.editModeDiv = undefined;
+ this.closeDiv = undefined;
+ }
+ }, {
+ key: '_createSeperator',
- reset: function() {
- clearTimeout(this._timer);
- },
+ /**
+ * create a seperator line. the index is to differentiate in the manipulation dom
+ * @param index
+ * @private
+ */
+ value: function _createSeperator() {
+ var index = arguments[0] === undefined ? 1 : arguments[0];
- emit: function(input) {
- if (this.state !== STATE_RECOGNIZED) {
- return;
- }
+ this.manipulationDOM['seperatorLineDiv' + index] = document.createElement('div');
+ this.manipulationDOM['seperatorLineDiv' + index].className = 'vis-separator-line';
+ this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv' + index]);
+ }
+ }, {
+ key: '_createAddNodeButton',
- if (input && (input.eventType & INPUT_END)) {
- this.manager.emit(this.options.event + 'up', input);
- } else {
- this._input.timeStamp = now();
- this.manager.emit(this.options.event, this._input);
- }
+ // ---------------------- DOM functions for buttons --------------------------//
+
+ value: function _createAddNodeButton(locale) {
+ var button = this._createButton('addNode', 'vis-button vis-add', locale.addNode);
+ this.manipulationDiv.appendChild(button);
+ this._bindHammerToDiv(button, this.addNodeMode.bind(this));
}
- });
+ }, {
+ key: '_createAddEdgeButton',
+ value: function _createAddEdgeButton(locale) {
+ var button = this._createButton('addEdge', 'vis-button vis-connect', locale.addEdge);
+ this.manipulationDiv.appendChild(button);
+ this._bindHammerToDiv(button, this.addEdgeMode.bind(this));
+ }
+ }, {
+ key: '_createEditNodeButton',
+ value: function _createEditNodeButton(locale) {
+ var button = this._createButton('editNodeMode', 'vis-button vis-edit', locale.editNodeMode);
+ this.manipulationDiv.appendChild(button);
+ this._bindHammerToDiv(button, this.editNodeMode.bind(this));
+ }
+ }, {
+ key: '_createEditEdgeButton',
+ value: function _createEditEdgeButton(locale) {
+ var button = this._createButton('editEdge', 'vis-button vis-edit', locale.editEdge);
+ this.manipulationDiv.appendChild(button);
+ this._bindHammerToDiv(button, this.editEdgeMode.bind(this));
+ }
+ }, {
+ key: '_createDeleteButton',
+ value: function _createDeleteButton(locale) {
+ var button = this._createButton('delete', 'vis-button vis-delete', locale.del);
+ this.manipulationDiv.appendChild(button);
+ this._bindHammerToDiv(button, this.deleteSelected.bind(this));
+ }
+ }, {
+ key: '_createBackButton',
+ value: function _createBackButton(locale) {
+ var button = this._createButton('back', 'vis-button vis-back', locale.back);
+ this.manipulationDiv.appendChild(button);
+ this._bindHammerToDiv(button, this.showManipulatorToolbar.bind(this));
+ }
+ }, {
+ key: '_createButton',
+ value: function _createButton(id, className, label) {
+ var labelClassName = arguments[3] === undefined ? 'vis-label' : arguments[3];
- /**
- * Rotate
- * Recognized when two or more pointer are moving in a circular motion.
- * @constructor
- * @extends AttrRecognizer
- */
- function RotateRecognizer() {
- AttrRecognizer.apply(this, arguments);
- }
+ this.manipulationDOM[id + 'Div'] = document.createElement('div');
+ this.manipulationDOM[id + 'Div'].className = className;
+ this.manipulationDOM[id + 'Label'] = document.createElement('div');
+ this.manipulationDOM[id + 'Label'].className = labelClassName;
+ this.manipulationDOM[id + 'Label'].innerHTML = label;
+ this.manipulationDOM[id + 'Div'].appendChild(this.manipulationDOM[id + 'Label']);
+ return this.manipulationDOM[id + 'Div'];
+ }
+ }, {
+ key: '_createDescription',
+ value: function _createDescription(label) {
+ this.manipulationDiv.appendChild(this._createButton('description', 'vis-button vis-none', label));
+ }
+ }, {
+ key: '_temporaryBindEvent',
+
+ // -------------------------- End of DOM functions for buttons ------------------------------//
- inherit(RotateRecognizer, AttrRecognizer, {
/**
- * @namespace
- * @memberof RotateRecognizer
+ * this binds an event until cleanup by the clean functions.
+ * @param event
+ * @param newFunction
+ * @private
*/
- defaults: {
- event: 'rotate',
- threshold: 0,
- pointers: 2
- },
-
- getTouchAction: function() {
- return [TOUCH_ACTION_NONE];
- },
-
- attrTest: function(input) {
- return this._super.attrTest.call(this, input) &&
- (Math.abs(input.rotation) > this.options.threshold || this.state & STATE_BEGAN);
+ value: function _temporaryBindEvent(event, newFunction) {
+ this.temporaryEventFunctions.push({ event: event, boundFunction: newFunction });
+ this.body.emitter.on(event, newFunction);
}
- });
+ }, {
+ key: '_temporaryBindUI',
- /**
- * Swipe
- * Recognized when the pointer is moving fast (velocity), with enough distance in the allowed direction.
- * @constructor
- * @extends AttrRecognizer
- */
- function SwipeRecognizer() {
- AttrRecognizer.apply(this, arguments);
- }
+ /**
+ * this overrides an UI function until cleanup by the clean function
+ * @param UIfunctionName
+ * @param newFunction
+ * @private
+ */
+ value: function _temporaryBindUI(UIfunctionName, newFunction) {
+ if (this.body.eventListeners[UIfunctionName] !== undefined) {
+ this.temporaryUIFunctions[UIfunctionName] = this.body.eventListeners[UIfunctionName];
+ this.body.eventListeners[UIfunctionName] = newFunction;
+ } else {
+ throw new Error('This UI function does not exist. Typo? You tried: ' + UIfunctionName + ' possible are: ' + JSON.stringify(Object.keys(this.body.eventListeners)));
+ }
+ }
+ }, {
+ key: '_unbindTemporaryUIs',
- inherit(SwipeRecognizer, AttrRecognizer, {
/**
- * @namespace
- * @memberof SwipeRecognizer
+ * Restore the overridden UI functions to their original state.
+ *
+ * @private
*/
- defaults: {
- event: 'swipe',
- threshold: 10,
- velocity: 0.65,
- direction: DIRECTION_HORIZONTAL | DIRECTION_VERTICAL,
- pointers: 1
- },
+ value: function _unbindTemporaryUIs() {
+ for (var functionName in this.temporaryUIFunctions) {
+ if (this.temporaryUIFunctions.hasOwnProperty(functionName)) {
+ this.body.eventListeners[functionName] = this.temporaryUIFunctions[functionName];
+ delete this.temporaryUIFunctions[functionName];
+ }
+ }
+ this.temporaryUIFunctions = {};
+ }
+ }, {
+ key: '_unbindTemporaryEvents',
- getTouchAction: function() {
- return PanRecognizer.prototype.getTouchAction.call(this);
- },
+ /**
+ * Unbind the events created by _temporaryBindEvent
+ * @private
+ */
+ value: function _unbindTemporaryEvents() {
+ for (var i = 0; i < this.temporaryEventFunctions.length; i++) {
+ var eventName = this.temporaryEventFunctions[i].event;
+ var boundFunction = this.temporaryEventFunctions[i].boundFunction;
+ this.body.emitter.off(eventName, boundFunction);
+ }
+ this.temporaryEventFunctions = [];
+ }
+ }, {
+ key: '_bindHammerToDiv',
- attrTest: function(input) {
- var direction = this.options.direction;
- var velocity;
+ /**
+ * Bind an hammer instance to a DOM element.
+ * @param domElement
+ * @param funct
+ */
+ value: function _bindHammerToDiv(domElement, boundFunction) {
+ var hammer = new Hammer(domElement, {});
+ hammerUtil.onTouch(hammer, boundFunction);
+ this.manipulationHammers.push(hammer);
+ }
+ }, {
+ key: '_cleanupTemporaryNodesAndEdges',
- if (direction & (DIRECTION_HORIZONTAL | DIRECTION_VERTICAL)) {
- velocity = input.velocity;
- } else if (direction & DIRECTION_HORIZONTAL) {
- velocity = input.velocityX;
- } else if (direction & DIRECTION_VERTICAL) {
- velocity = input.velocityY;
+ /**
+ * Neatly clean up temporary edges and nodes
+ * @private
+ */
+ value: function _cleanupTemporaryNodesAndEdges() {
+ // _clean temporary edges
+ for (var i = 0; i < this.temporaryIds.edges.length; i++) {
+ this.body.edges[this.temporaryIds.edges[i]].disconnect();
+ delete this.body.edges[this.temporaryIds.edges[i]];
+ var indexTempEdge = this.body.edgeIndices.indexOf(this.temporaryIds.edges[i]);
+ if (indexTempEdge !== -1) {
+ this.body.edgeIndices.splice(indexTempEdge, 1);
}
+ }
- return this._super.attrTest.call(this, input) &&
- direction & input.direction &&
- input.distance > this.options.threshold &&
- abs(velocity) > this.options.velocity && input.eventType & INPUT_END;
- },
-
- emit: function(input) {
- var direction = directionStr(input.direction);
- if (direction) {
- this.manager.emit(this.options.event + direction, input);
+ // _clean temporary nodes
+ for (var i = 0; i < this.temporaryIds.nodes.length; i++) {
+ delete this.body.nodes[this.temporaryIds.nodes[i]];
+ var indexTempNode = this.body.nodeIndices.indexOf(this.temporaryIds.nodes[i]);
+ if (indexTempNode !== -1) {
+ this.body.nodeIndices.splice(indexTempNode, 1);
}
+ }
- this.manager.emit(this.options.event, input);
+ this.temporaryIds = { nodes: [], edges: [] };
}
- });
-
- /**
- * A tap is ecognized when the pointer is doing a small tap/click. Multiple taps are recognized if they occur
- * between the given interval and position. The delay option can be used to recognize multi-taps without firing
- * a single tap.
- *
- * The eventData from the emitted event contains the property `tapCount`, which contains the amount of
- * multi-taps being recognized.
- * @constructor
- * @extends Recognizer
- */
- function TapRecognizer() {
- Recognizer.apply(this, arguments);
-
- // previous time and center,
- // used for tap counting
- this.pTime = false;
- this.pCenter = false;
+ }, {
+ key: '_controlNodeTouch',
- this._timer = null;
- this._input = null;
- this.count = 0;
- }
+ // ------------------------------------------ EDIT EDGE FUNCTIONS -----------------------------------------//
- inherit(TapRecognizer, Recognizer, {
/**
- * @namespace
- * @memberof PinchRecognizer
+ * the touch is used to get the position of the initial click
+ * @param event
+ * @private
*/
- defaults: {
- event: 'tap',
- pointers: 1,
- taps: 1,
- interval: 300, // max time between the multi-tap taps
- time: 250, // max time of the pointer to be down (like finger on the screen)
- threshold: 2, // a minimal movement is ok, but keep it low
- posThreshold: 10 // a multi-tap can be a bit off the initial position
- },
-
- getTouchAction: function() {
- return [TOUCH_ACTION_MANIPULATION];
- },
-
- process: function(input) {
- var options = this.options;
-
- var validPointers = input.pointers.length === options.pointers;
- var validMovement = input.distance < options.threshold;
- var validTouchTime = input.deltaTime < options.time;
+ value: function _controlNodeTouch(event) {
+ this.selectionHandler.unselectAll();
+ this.lastTouch = this.body.functions.getPointer(event.center);
+ this.lastTouch.translation = util.extend({}, this.body.view.translation); // copy the object
+ }
+ }, {
+ key: '_controlNodeDragStart',
- this.reset();
+ /**
+ * the drag start is used to mark one of the control nodes as selected.
+ * @param event
+ * @private
+ */
+ value: function _controlNodeDragStart(event) {
+ var pointer = this.lastTouch;
+ var pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
+ var from = this.body.nodes[this.temporaryIds.nodes[0]];
+ var to = this.body.nodes[this.temporaryIds.nodes[1]];
+ var edge = this.body.edges[this.edgeBeingEditedId];
+ this.selectedControlNode = undefined;
- if ((input.eventType & INPUT_START) && (this.count === 0)) {
- return this.failTimeout();
- }
+ var fromSelect = from.isOverlappingWith(pointerObj);
+ var toSelect = to.isOverlappingWith(pointerObj);
- // we only allow little movement
- // and we've reached an end event, so a tap is possible
- if (validMovement && validTouchTime && validPointers) {
- if (input.eventType != INPUT_END) {
- return this.failTimeout();
- }
+ if (fromSelect === true) {
+ this.selectedControlNode = from;
+ edge.edgeType.from = from;
+ } else if (toSelect === true) {
+ this.selectedControlNode = to;
+ edge.edgeType.to = to;
+ }
- var validInterval = this.pTime ? (input.timeStamp - this.pTime < options.interval) : true;
- var validMultiTap = !this.pCenter || getDistance(this.pCenter, input.center) < options.posThreshold;
+ this.body.emitter.emit('_redraw');
+ }
+ }, {
+ key: '_controlNodeDrag',
- this.pTime = input.timeStamp;
- this.pCenter = input.center;
+ /**
+ * dragging the control nodes or the canvas
+ * @param event
+ * @private
+ */
+ value: function _controlNodeDrag(event) {
+ this.body.emitter.emit('disablePhysics');
+ var pointer = this.body.functions.getPointer(event.center);
+ var pos = this.canvas.DOMtoCanvas(pointer);
- if (!validMultiTap || !validInterval) {
- this.count = 1;
- } else {
- this.count += 1;
- }
+ if (this.selectedControlNode !== undefined) {
+ this.selectedControlNode.x = pos.x;
+ this.selectedControlNode.y = pos.y;
+ } else {
+ // if the drag was not started properly because the click started outside the network div, start it now.
+ var diffX = pointer.x - this.lastTouch.x;
+ var diffY = pointer.y - this.lastTouch.y;
+ this.body.view.translation = { x: this.lastTouch.translation.x + diffX, y: this.lastTouch.translation.y + diffY };
+ }
+ this.body.emitter.emit('_redraw');
+ }
+ }, {
+ key: '_controlNodeDragEnd',
- this._input = input;
+ /**
+ * connecting or restoring the control nodes.
+ * @param event
+ * @private
+ */
+ value: function _controlNodeDragEnd(event) {
+ var pointer = this.body.functions.getPointer(event.center);
+ var pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
+ var edge = this.body.edges[this.edgeBeingEditedId];
- // if tap count matches we have recognized it,
- // else it has began recognizing...
- var tapCount = this.count % options.taps;
- if (tapCount === 0) {
- // no failing requirements, immediately trigger the tap event
- // or wait as long as the multitap interval to trigger
- if (!this.hasRequireFailures()) {
- return STATE_RECOGNIZED;
- } else {
- this._timer = setTimeoutContext(function() {
- this.state = STATE_RECOGNIZED;
- this.tryEmit();
- }, options.interval, this);
- return STATE_BEGAN;
- }
- }
+ var overlappingNodeIds = this.selectionHandler._getAllNodesOverlappingWith(pointerObj);
+ var node = undefined;
+ for (var i = overlappingNodeIds.length - 1; i >= 0; i--) {
+ if (overlappingNodeIds[i] !== this.selectedControlNode.id) {
+ node = this.body.nodes[overlappingNodeIds[i]];
+ break;
}
- return STATE_FAILED;
- },
-
- failTimeout: function() {
- this._timer = setTimeoutContext(function() {
- this.state = STATE_FAILED;
- }, this.options.interval, this);
- return STATE_FAILED;
- },
-
- reset: function() {
- clearTimeout(this._timer);
- },
+ }
- emit: function() {
- if (this.state == STATE_RECOGNIZED ) {
- this._input.tapCount = this.count;
- this.manager.emit(this.options.event, this._input);
+ // perform the connection
+ if (node !== undefined && this.selectedControlNode !== undefined) {
+ if (node.isCluster === true) {
+ alert(this.options.locales[this.options.locale].createEdgeError);
+ } else {
+ var from = this.body.nodes[this.temporaryIds.nodes[0]];
+ if (this.selectedControlNode.id === from.id) {
+ this._performEditEdge(node.id, edge.to.id);
+ } else {
+ this._performEditEdge(edge.from.id, node.id);
+ }
}
+ } else {
+ edge.updateEdgeType();
+ this.body.emitter.emit('restorePhysics');
+ }
+ this.body.emitter.emit('_redraw');
}
- });
-
- /**
- * Simple way to create an manager with a default set of recognizers.
- * @param {HTMLElement} element
- * @param {Object} [options]
- * @constructor
- */
- function Hammer(element, options) {
- options = options || {};
- options.recognizers = ifUndefined(options.recognizers, Hammer.defaults.preset);
- return new Manager(element, options);
- }
-
- /**
- * @const {string}
- */
- Hammer.VERSION = '2.0.4';
+ }, {
+ key: '_handleConnect',
- /**
- * default settings
- * @namespace
- */
- Hammer.defaults = {
- /**
- * set if DOM events are being triggered.
- * But this is slower and unused by simple implementations, so disabled by default.
- * @type {Boolean}
- * @default false
- */
- domEvents: false,
+ // ------------------------------------ END OF EDIT EDGE FUNCTIONS -----------------------------------------//
+ // ------------------------------------------- ADD EDGE FUNCTIONS -----------------------------------------//
/**
- * The value for the touchAction property/fallback.
- * When set to `compute` it will magically set the correct value based on the added recognizers.
- * @type {String}
- * @default compute
+ * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
+ * to walk the user through the process.
+ *
+ * @private
*/
- touchAction: TOUCH_ACTION_COMPUTE,
+ value: function _handleConnect(event) {
+ // check to avoid double fireing of this function.
+ if (new Date().valueOf() - this.touchTime > 100) {
+ this.lastTouch = this.body.functions.getPointer(event.center);
+ this.lastTouch.translation = util.extend({}, this.body.view.translation); // copy the object
- /**
- * @type {Boolean}
- * @default true
- */
- enable: true,
+ var pointer = this.lastTouch;
+ var node = this.selectionHandler.getNodeAt(pointer);
- /**
- * EXPERIMENTAL FEATURE -- can be removed/changed
- * Change the parent input target element.
- * If Null, then it is being set the to main element.
- * @type {Null|EventTarget}
- * @default null
- */
- inputTarget: null,
+ if (node !== undefined) {
+ if (node.isCluster === true) {
+ alert(this.options.locales[this.options.locale].createEdgeError);
+ } else {
+ // create a node the temporary line can look at
+ var targetNode = this._getNewTargetNode(node.x, node.y);
+ this.body.nodes[targetNode.id] = targetNode;
+ this.body.nodeIndices.push(targetNode.id);
- /**
- * force an input class
- * @type {Null|Function}
- * @default null
- */
- inputClass: null,
+ // create a temporary edge
+ var connectionEdge = this.body.functions.createEdge({
+ id: 'connectionEdge' + util.randomUUID(),
+ from: node.id,
+ to: targetNode.id,
+ physics: false,
+ smooth: {
+ enabled: true,
+ dynamic: false,
+ type: 'continuous',
+ roundness: 0.5
+ }
+ });
+ this.body.edges[connectionEdge.id] = connectionEdge;
+ this.body.edgeIndices.push(connectionEdge.id);
- /**
- * Default recognizer setup when calling `Hammer()`
- * When creating a new Manager these will be skipped.
- * @type {Array}
- */
- preset: [
- // RecognizerClass, options, [recognizeWith, ...], [requireFailure, ...]
- [RotateRecognizer, { enable: false }],
- [PinchRecognizer, { enable: false }, ['rotate']],
- [SwipeRecognizer,{ direction: DIRECTION_HORIZONTAL }],
- [PanRecognizer, { direction: DIRECTION_HORIZONTAL }, ['swipe']],
- [TapRecognizer],
- [TapRecognizer, { event: 'doubletap', taps: 2 }, ['tap']],
- [PressRecognizer]
- ],
+ this.temporaryIds.nodes.push(targetNode.id);
+ this.temporaryIds.edges.push(connectionEdge.id);
+ }
+ }
+ this.touchTime = new Date().valueOf();
+ }
+ }
+ }, {
+ key: '_dragControlNode',
+ value: function _dragControlNode(event) {
+ var pointer = this.body.functions.getPointer(event.center);
+ if (this.temporaryIds.nodes[0] !== undefined) {
+ var targetNode = this.body.nodes[this.temporaryIds.nodes[0]]; // there is only one temp node in the add edge mode.
+ targetNode.x = this.canvas._XconvertDOMtoCanvas(pointer.x);
+ targetNode.y = this.canvas._YconvertDOMtoCanvas(pointer.y);
+ this.body.emitter.emit('_redraw');
+ } else {
+ var diffX = pointer.x - this.lastTouch.x;
+ var diffY = pointer.y - this.lastTouch.y;
+ this.body.view.translation = { x: this.lastTouch.translation.x + diffX, y: this.lastTouch.translation.y + diffY };
+ }
+ }
+ }, {
+ key: '_finishConnect',
/**
- * Some CSS properties can be used to improve the working of Hammer.
- * Add them to this method and they will be set when creating a new Manager.
- * @namespace
+ * Connect the new edge to the target if one exists, otherwise remove temp line
+ * @param event
+ * @private
*/
- cssProps: {
- /**
- * Disables text selection to improve the dragging gesture. Mainly for desktop browsers.
- * @type {String}
- * @default 'none'
- */
- userSelect: 'none',
-
- /**
- * Disable the Windows Phone grippers when pressing an element.
- * @type {String}
- * @default 'none'
- */
- touchSelect: 'none',
+ value: function _finishConnect(event) {
+ var pointer = this.body.functions.getPointer(event.center);
+ var pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
- /**
- * Disables the default callout shown when you touch and hold a touch target.
- * On iOS, when you touch and hold a touch target such as a link, Safari displays
- * a callout containing information about the link. This property allows you to disable that callout.
- * @type {String}
- * @default 'none'
- */
- touchCallout: 'none',
+ // remember the edge id
+ var connectFromId = undefined;
+ if (this.temporaryIds.edges[0] !== undefined) {
+ connectFromId = this.body.edges[this.temporaryIds.edges[0]].fromId;
+ }
- /**
- * Specifies whether zooming is enabled. Used by IE10>
- * @type {String}
- * @default 'none'
- */
- contentZooming: 'none',
+ // get the overlapping node but NOT the temporary node;
+ var overlappingNodeIds = this.selectionHandler._getAllNodesOverlappingWith(pointerObj);
+ var node = undefined;
+ for (var i = overlappingNodeIds.length - 1; i >= 0; i--) {
+ // if the node id is NOT a temporary node, accept the node.
+ if (this.temporaryIds.nodes.indexOf(overlappingNodeIds[i]) === -1) {
+ node = this.body.nodes[overlappingNodeIds[i]];
+ break;
+ }
+ }
- /**
- * Specifies that an entire element should be draggable instead of its contents. Mainly for desktop browsers.
- * @type {String}
- * @default 'none'
- */
- userDrag: 'none',
+ // clean temporary nodes and edges.
+ this._cleanupTemporaryNodesAndEdges();
- /**
- * Overrides the highlight color shown when the user taps a link or a JavaScript
- * clickable element in iOS. This property obeys the alpha value, if specified.
- * @type {String}
- * @default 'rgba(0,0,0,0)'
- */
- tapHighlightColor: 'rgba(0,0,0,0)'
+ // perform the connection
+ if (node !== undefined) {
+ if (node.isCluster === true) {
+ alert(this.options.locales[this.options.locale].createEdgeError);
+ } else {
+ if (this.body.nodes[connectFromId] !== undefined && this.body.nodes[node.id] !== undefined) {
+ this._performCreateEdge(connectFromId, node.id);
+ }
+ }
+ }
+ this.body.emitter.emit('_redraw');
}
- };
-
- var STOP = 1;
- var FORCED_STOP = 2;
-
- /**
- * Manager
- * @param {HTMLElement} element
- * @param {Object} [options]
- * @constructor
- */
- function Manager(element, options) {
- options = options || {};
-
- this.options = merge(options, Hammer.defaults);
- this.options.inputTarget = this.options.inputTarget || element;
-
- this.handlers = {};
- this.session = {};
- this.recognizers = [];
-
- this.element = element;
- this.input = createInputInstance(this);
- this.touchAction = new TouchAction(this, this.options.touchAction);
-
- toggleCssProps(this, true);
-
- each(options.recognizers, function(item) {
- var recognizer = this.add(new (item[0])(item[1]));
- item[2] && recognizer.recognizeWith(item[2]);
- item[3] && recognizer.requireFailure(item[3]);
- }, this);
- }
-
- Manager.prototype = {
- /**
- * set options
- * @param {Object} options
- * @returns {Manager}
- */
- set: function(options) {
- extend(this.options, options);
+ }, {
+ key: '_performAddNode',
- // Options that need a little more setup
- if (options.touchAction) {
- this.touchAction.update();
- }
- if (options.inputTarget) {
- // Clean up existing event listeners and reinitialize
- this.input.destroy();
- this.input.target = options.inputTarget;
- this.input.init();
- }
- return this;
- },
+ // --------------------------------------- END OF ADD EDGE FUNCTIONS -------------------------------------//
- /**
- * stop recognizing for this session.
- * This session will be discarded, when a new [input]start event is fired.
- * When forced, the recognizer cycle is stopped immediately.
- * @param {Boolean} [force]
- */
- stop: function(force) {
- this.session.stopped = force ? FORCED_STOP : STOP;
- },
+ // ------------------------------ Performing all the actual data manipulation ------------------------//
/**
- * run the recognizers!
- * called by the inputHandler function on every movement of the pointers (touches)
- * it walks through all the recognizers and tries to detect the gesture that is being made
- * @param {Object} inputData
+ * Adds a node on the specified location
*/
- recognize: function(inputData) {
- var session = this.session;
- if (session.stopped) {
- return;
- }
-
- // run the touch-action polyfill
- this.touchAction.preventDefaults(inputData);
-
- var recognizer;
- var recognizers = this.recognizers;
-
- // this holds the recognizer that is being recognized.
- // so the recognizer's state needs to be BEGAN, CHANGED, ENDED or RECOGNIZED
- // if no recognizer is detecting a thing, it is set to `null`
- var curRecognizer = session.curRecognizer;
-
- // reset when the last recognizer is recognized
- // or when we're in a new session
- if (!curRecognizer || (curRecognizer && curRecognizer.state & STATE_RECOGNIZED)) {
- curRecognizer = session.curRecognizer = null;
- }
-
- var i = 0;
- while (i < recognizers.length) {
- recognizer = recognizers[i];
+ value: function _performAddNode(clickData) {
+ var _this4 = this;
- // find out if we are allowed try to recognize the input for this one.
- // 1. allow if the session is NOT forced stopped (see the .stop() method)
- // 2. allow if we still haven't recognized a gesture in this session, or the this recognizer is the one
- // that is being recognized.
- // 3. allow if the recognizer is allowed to run simultaneous with the current recognized recognizer.
- // this can be setup with the `recognizeWith()` method on the recognizer.
- if (session.stopped !== FORCED_STOP && ( // 1
- !curRecognizer || recognizer == curRecognizer || // 2
- recognizer.canRecognizeWith(curRecognizer))) { // 3
- recognizer.recognize(inputData);
- } else {
- recognizer.reset();
- }
+ var defaultData = {
+ id: util.randomUUID(),
+ x: clickData.pointer.canvas.x,
+ y: clickData.pointer.canvas.y,
+ label: 'new'
+ };
- // if the recognizer has been recognizing the input as a valid gesture, we want to store this one as the
- // current active recognizer. but only if we don't already have an active recognizer
- if (!curRecognizer && recognizer.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED)) {
- curRecognizer = session.curRecognizer = recognizer;
+ if (typeof this.options.handlerFunctions.addNode === 'function') {
+ if (this.options.handlerFunctions.addNode.length === 2) {
+ this.options.handlerFunctions.addNode(defaultData, function (finalizedData) {
+ if (finalizedData !== null && finalizedData !== undefined && _this4.inMode === 'addNode') {
+ // if for whatever reason the mode has changes (due to dataset change) disregard the callback
+ _this4.body.data.nodes.add(finalizedData);
+ _this4.showManipulatorToolbar();
}
- i++;
+ });
+ } else {
+ throw new Error('The function for add does not support two arguments (data,callback)');
+ this.showManipulatorToolbar();
}
- },
+ } else {
+ this.body.data.nodes.add(defaultData);
+ this.showManipulatorToolbar();
+ }
+ }
+ }, {
+ key: '_performCreateEdge',
/**
- * get a recognizer by its event name.
- * @param {Recognizer|String} recognizer
- * @returns {Recognizer|Null}
+ * connect two nodes with a new edge.
+ *
+ * @private
*/
- get: function(recognizer) {
- if (recognizer instanceof Recognizer) {
- return recognizer;
- }
+ value: function _performCreateEdge(sourceNodeId, targetNodeId) {
+ var _this5 = this;
- var recognizers = this.recognizers;
- for (var i = 0; i < recognizers.length; i++) {
- if (recognizers[i].options.event == recognizer) {
- return recognizers[i];
+ var defaultData = { from: sourceNodeId, to: targetNodeId };
+ if (this.options.handlerFunctions.addEdge) {
+ if (this.options.handlerFunctions.addEdge.length === 2) {
+ this.options.handlerFunctions.addEdge(defaultData, function (finalizedData) {
+ if (finalizedData !== null && finalizedData !== undefined && _this5.inMode === 'addEdge') {
+ // if for whatever reason the mode has changes (due to dataset change) disregard the callback
+ _this5.body.data.edges.add(finalizedData);
+ _this5.selectionHandler.unselectAll();
+ _this5.showManipulatorToolbar();
}
+ });
+ } else {
+ throw new Error('The function for connect does not support two arguments (data,callback)');
}
- return null;
- },
+ } else {
+ this.body.data.edges.add(defaultData);
+ this.selectionHandler.unselectAll();
+ this.showManipulatorToolbar();
+ }
+ }
+ }, {
+ key: '_performEditEdge',
/**
- * add a recognizer to the manager
- * existing recognizers with the same event name will be removed
- * @param {Recognizer} recognizer
- * @returns {Recognizer|Manager}
+ * connect two nodes with a new edge.
+ *
+ * @private
*/
- add: function(recognizer) {
- if (invokeArrayArg(recognizer, 'add', this)) {
- return this;
- }
+ value: function _performEditEdge(sourceNodeId, targetNodeId) {
+ var _this6 = this;
- // remove existing
- var existing = this.get(recognizer.options.event);
- if (existing) {
- this.remove(existing);
+ var defaultData = { id: this.edgeBeingEditedId, from: sourceNodeId, to: targetNodeId };
+ if (this.options.handlerFunctions.editEdge) {
+ if (this.options.handlerFunctions.editEdge.length === 2) {
+ this.options.handlerFunctions.editEdge(defaultData, function (finalizedData) {
+ if (finalizedData === null || finalizedData === undefined || _this6.inMode !== 'editEdge') {
+ // if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
+ _this6.body.edges[defaultData.id].updateEdgeType();
+ _this6.body.emitter.emit('_redraw');
+ } else {
+ _this6.body.data.edges.update(finalizedData);
+ _this6.selectionHandler.unselectAll();
+ _this6.showManipulatorToolbar();
+ }
+ });
+ } else {
+ throw new Error('The function for edit does not support two arguments (data, callback)');
}
+ } else {
+ this.body.data.edges.update(defaultData);
+ this.selectionHandler.unselectAll();
+ this.showManipulatorToolbar();
+ }
+ }
+ }]);
- this.recognizers.push(recognizer);
- recognizer.manager = this;
-
- this.touchAction.update();
- return recognizer;
- },
-
- /**
- * remove a recognizer by name or instance
- * @param {Recognizer|String} recognizer
- * @returns {Manager}
- */
- remove: function(recognizer) {
- if (invokeArrayArg(recognizer, 'remove', this)) {
- return this;
- }
+ return ManipulationSystem;
+ })();
- var recognizers = this.recognizers;
- recognizer = this.get(recognizer);
- recognizers.splice(inArray(recognizers, recognizer), 1);
+ exports['default'] = ManipulationSystem;
+ module.exports = exports['default'];
- this.touchAction.update();
- return this;
- },
+/***/ },
+/* 61 */
+/***/ function(module, exports, __webpack_require__) {
- /**
- * bind event
- * @param {String} events
- * @param {Function} handler
- * @returns {EventEmitter} this
- */
- on: function(events, handler) {
- var handlers = this.handlers;
- each(splitStr(events), function(event) {
- handlers[event] = handlers[event] || [];
- handlers[event].push(handler);
- });
- return this;
- },
+ 'use strict';
- /**
- * unbind event, leave emit blank to remove all handlers
- * @param {String} events
- * @param {Function} [handler]
- * @returns {EventEmitter} this
- */
- off: function(events, handler) {
- var handlers = this.handlers;
- each(splitStr(events), function(event) {
- if (!handler) {
- delete handlers[event];
- } else {
- handlers[event].splice(inArray(handlers[event], handler), 1);
- }
- });
- return this;
- },
+ var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
- /**
- * emit event to the listeners
- * @param {String} event
- * @param {Object} data
- */
- emit: function(event, data) {
- // we also want to trigger dom events
- if (this.options.domEvents) {
- triggerDomEvent(event, data);
- }
+ var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
- // no handlers, so skip it all
- var handlers = this.handlers[event] && this.handlers[event].slice();
- if (!handlers || !handlers.length) {
- return;
- }
+ var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
- data.type = event;
- data.preventDefault = function() {
- data.srcEvent.preventDefault();
- };
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
- var i = 0;
- while (i < handlers.length) {
- handlers[i](data);
- i++;
- }
- },
+ var _ColorPicker = __webpack_require__(82);
- /**
- * destroy the manager and unbinds all events
- * it doesn't unbind dom events, that is the user own responsibility
- */
- destroy: function() {
- this.element && toggleCssProps(this, false);
+ var _ColorPicker2 = _interopRequireWildcard(_ColorPicker);
- this.handlers = {};
- this.session = {};
- this.input.destroy();
- this.element = null;
- }
- };
+ var util = __webpack_require__(1);
/**
- * add/remove the css properties as defined in manager.options.cssProps
- * @param {Manager} manager
- * @param {Boolean} add
+ * The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options.
+ * Boolean options are recognised as Boolean
+ * Number options should be written as array: [default value, min value, max value, stepsize]
+ * Colors should be written as array: ['color', '#ffffff']
+ * Strings with should be written as array: [option1, option2, option3, ..]
+ *
+ * The options are matched with their counterparts in each of the modules and the values used in the configuration are
+ *
*/
- function toggleCssProps(manager, add) {
- var element = manager.element;
- each(manager.options.cssProps, function(value, name) {
- element.style[prefixed(element.style, name)] = add ? value : '';
- });
- }
- /**
- * trigger dom event
- * @param {String} event
- * @param {Object} data
- */
- function triggerDomEvent(event, data) {
- var gestureEvent = document.createEvent('Event');
- gestureEvent.initEvent(event, true, true);
- gestureEvent.gesture = data;
- data.target.dispatchEvent(gestureEvent);
- }
+ var ConfigurationSystem = (function () {
+ function ConfigurationSystem(network) {
+ _classCallCheck(this, ConfigurationSystem);
- extend(Hammer, {
- INPUT_START: INPUT_START,
- INPUT_MOVE: INPUT_MOVE,
- INPUT_END: INPUT_END,
- INPUT_CANCEL: INPUT_CANCEL,
-
- STATE_POSSIBLE: STATE_POSSIBLE,
- STATE_BEGAN: STATE_BEGAN,
- STATE_CHANGED: STATE_CHANGED,
- STATE_ENDED: STATE_ENDED,
- STATE_RECOGNIZED: STATE_RECOGNIZED,
- STATE_CANCELLED: STATE_CANCELLED,
- STATE_FAILED: STATE_FAILED,
+ this.network = network;
+ this.changedOptions = [];
- DIRECTION_NONE: DIRECTION_NONE,
- DIRECTION_LEFT: DIRECTION_LEFT,
- DIRECTION_RIGHT: DIRECTION_RIGHT,
- DIRECTION_UP: DIRECTION_UP,
- DIRECTION_DOWN: DIRECTION_DOWN,
- DIRECTION_HORIZONTAL: DIRECTION_HORIZONTAL,
- DIRECTION_VERTICAL: DIRECTION_VERTICAL,
- DIRECTION_ALL: DIRECTION_ALL,
+ this.possibleOptions = {
+ nodes: {
+ borderWidth: [1, 0, 10, 1],
+ borderWidthSelected: [2, 0, 10, 1],
+ color: {
+ border: ['color', '#2B7CE9'],
+ background: ['color', '#97C2FC'],
+ highlight: {
+ border: ['color', '#2B7CE9'],
+ background: ['color', '#D2E5FF']
+ },
+ hover: {
+ border: ['color', '#2B7CE9'],
+ background: ['color', '#D2E5FF']
+ }
+ },
+ fixed: {
+ x: false,
+ y: false
+ },
+ font: {
+ color: ['color', '#343434'],
+ size: [14, 0, 100, 1], // px
+ face: ['arial', 'verdana', 'tahoma'],
+ background: ['color', 'none'],
+ stroke: [0, 0, 50, 1], // px
+ strokeColor: ['color', '#ffffff']
+ },
+ //group: 'string',
+ hidden: false,
+ //icon: {
+ // face: 'string', //'FontAwesome',
+ // code: 'string', //'\uf007',
+ // size: [50, 0, 200, 1], //50,
+ // color: ['color','#2B7CE9'] //'#aa00ff'
+ //},
+ //image: 'string', // --> URL
+ physics: true,
+ scaling: {
+ min: [10, 0, 200, 1],
+ max: [30, 0, 200, 1],
+ label: {
+ enabled: true,
+ min: [14, 0, 200, 1],
+ max: [30, 0, 200, 1],
+ maxVisible: [30, 0, 200, 1],
+ drawThreshold: [3, 0, 20, 1]
+ }
+ },
+ shadow: {
+ enabled: false,
+ size: [10, 0, 20, 1],
+ x: [5, -30, 30, 1],
+ y: [5, -30, 30, 1]
+ },
+ shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
+ size: [25, 0, 200, 1]
+ },
+ edges: {
+ arrows: {
+ to: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
+ middle: { enabled: false, scaleFactor: [1, 0, 3, 0.05] },
+ from: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }
+ },
+ color: {
+ color: ['color', '#848484'],
+ highlight: ['color', '#848484'],
+ hover: ['color', '#848484'],
+ inherit: ['from', 'to', 'both', true, false],
+ opacity: [1, 0, 1, 0.05]
+ },
+ dashes: false,
+ font: {
+ color: ['color', '#343434'],
+ size: [14, 0, 100, 1], // px
+ face: ['arial', 'verdana', 'tahoma'],
+ background: ['color', 'none'],
+ stroke: [1, 0, 50, 1], // px
+ strokeColor: ['color', '#ffffff'],
+ align: ['horizontal', 'top', 'middle', 'bottom']
+ },
+ hidden: false,
+ hoverWidth: [2, 0, 5, 0.1],
+ physics: true,
+ scaling: {
+ min: [1, 0, 100, 1],
+ max: [15, 0, 100, 1],
+ label: {
+ enabled: true,
+ min: [14, 0, 200, 1],
+ max: [30, 0, 200, 1],
+ maxVisible: [30, 0, 200, 1],
+ drawThreshold: [3, 0, 20, 1]
+ }
+ },
+ selectionWidth: [1.5, 0, 5, 0.1],
+ selfReferenceSize: [20, 0, 200, 1],
+ shadow: {
+ enabled: false,
+ size: [10, 0, 20, 1],
+ x: [5, -30, 30, 1],
+ y: [5, -30, 30, 1]
+ },
+ smooth: {
+ enabled: true,
+ dynamic: true,
+ type: ['continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW'],
+ roundness: [0.5, 0, 1, 0.05]
+ },
+ width: [1, 0, 30, 1]
+ },
+ layout: {
+ randomSeed: [0, 0, 500, 1],
+ hierarchical: {
+ enabled: false,
+ levelSeparation: [150, 20, 500, 5],
+ direction: ['UD', 'DU', 'LR', 'RL'], // UD, DU, LR, RL
+ sortMethod: ['hubsize', 'directed'] // hubsize, directed
+ }
+ },
+ interaction: {
+ dragNodes: true,
+ dragView: true,
+ zoomView: true,
+ hoverEnabled: false,
+ navigationButtons: false,
+ tooltipDelay: [300, 0, 1000, 25],
+ keyboard: {
+ enabled: false,
+ speed: { x: [10, 0, 40, 1], y: [10, 0, 40, 1], zoom: [0.02, 0, 0.1, 0.005] },
+ bindToWindow: true
+ }
+ },
+ manipulation: {
+ enabled: false,
+ initiallyActive: false,
+ locale: ['en', 'nl'],
+ functionality: {
+ addNode: true,
+ addEdge: true,
+ editNode: true,
+ editEdge: true,
+ deleteNode: true,
+ deleteEdge: true
+ }
+ },
+ physics: {
+ barnesHut: {
+ //theta: [0.5, 0.1, 1, 0.05],
+ gravitationalConstant: [-2000, -30000, 0, 50],
+ centralGravity: [0.3, 0, 10, 0.05],
+ springLength: [95, 0, 500, 5],
+ springConstant: [0.04, 0, 5, 0.005],
+ damping: [0.09, 0, 1, 0.01]
+ },
+ repulsion: {
+ centralGravity: [0.2, 0, 10, 0.05],
+ springLength: [200, 0, 500, 5],
+ springConstant: [0.05, 0, 5, 0.005],
+ nodeDistance: [100, 0, 500, 5],
+ damping: [0.09, 0, 1, 0.01]
+ },
+ hierarchicalRepulsion: {
+ centralGravity: [0.2, 0, 10, 0.05],
+ springLength: [100, 0, 500, 5],
+ springConstant: [0.01, 0, 5, 0.005],
+ nodeDistance: [120, 0, 500, 5],
+ damping: [0.09, 0, 1, 0.01]
+ },
+ maxVelocity: [50, 0, 150, 1],
+ minVelocity: [0.1, 0.01, 0.5, 0.01],
+ solver: ['barnesHut', 'repulsion', 'hierarchicalRepulsion'],
+ timestep: [0.5, 0, 1, 0.05]
+ },
+ selection: {
+ select: true,
+ selectConnectedEdges: true
+ },
+ rendering: {
+ hideEdgesOnDrag: false,
+ hideNodesOnDrag: false
+ }
+ };
- Manager: Manager,
- Input: Input,
- TouchAction: TouchAction,
+ this.actualOptions = {
+ nodes: {},
+ edges: {},
+ layout: {},
+ interaction: {},
+ manipulation: {},
+ physics: {},
+ selection: {},
+ rendering: {},
+ configure: false,
+ configureContainer: undefined
+ };
- TouchInput: TouchInput,
- MouseInput: MouseInput,
- PointerEventInput: PointerEventInput,
- TouchMouseInput: TouchMouseInput,
- SingleTouchInput: SingleTouchInput,
+ this.domElements = [];
+ this.colorPicker = new _ColorPicker2['default'](this.network.canvas.pixelRatio);
+ this.wrapper;
+ }
- Recognizer: Recognizer,
- AttrRecognizer: AttrRecognizer,
- Tap: TapRecognizer,
- Pan: PanRecognizer,
- Swipe: SwipeRecognizer,
- Pinch: PinchRecognizer,
- Rotate: RotateRecognizer,
- Press: PressRecognizer,
+ _createClass(ConfigurationSystem, [{
+ key: 'setOptions',
- on: addEventListeners,
- off: removeEventListeners,
- each: each,
- merge: merge,
- extend: extend,
- inherit: inherit,
- bindFn: bindFn,
- prefixed: prefixed
- });
+ /**
+ * refresh all options.
+ * Because all modules parse their options by themselves, we just use their options. We copy them here.
+ *
+ * @param options
+ */
+ value: function setOptions(options) {
+ if (options !== undefined) {
+ util.extend(this.actualOptions, options);
+ }
- if ("function" == TYPE_FUNCTION && __webpack_require__(55)) {
- !(__WEBPACK_AMD_DEFINE_RESULT__ = function() {
- return Hammer;
- }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
- } else if (typeof module != 'undefined' && module.exports) {
- module.exports = Hammer;
- } else {
- window[exportName] = Hammer;
- }
+ this._clean();
- })(window, document, 'Hammer');
+ if (this.actualOptions.configure !== undefined && this.actualOptions.configure !== false) {
+ util.deepExtend(this.actualOptions.nodes, this.network.nodesHandler.options, true);
+ util.deepExtend(this.actualOptions.edges, this.network.edgesHandler.options, true);
+ util.deepExtend(this.actualOptions.layout, this.network.layoutEngine.options, true);
+ util.deepExtend(this.actualOptions.interaction, this.network.interactionHandler.options, true);
+ util.deepExtend(this.actualOptions.manipulation, this.network.manipulation.options, true);
+ util.deepExtend(this.actualOptions.physics, this.network.physics.options, true);
+ util.deepExtend(this.actualOptions.selection, this.network.selectionHandler.selection, true);
+ util.deepExtend(this.actualOptions.rendering, this.network.renderer.selection, true);
+ this.container = this.network.body.container;
+ var config = true;
+ if (typeof this.actualOptions.configure === 'string') {
+ config = this.actualOptions.configure;
+ } else if (this.actualOptions.configure instanceof Array) {
+ config = this.actualOptions.configure.join();
+ } else if (typeof this.actualOptions.configure === 'object') {
+ if (this.actualOptions.configure.container !== undefined) {
+ this.container = this.actualOptions.configure.container;
+ }
+ if (this.actualOptions.configure.filter !== undefined) {
+ config = this.actualOptions.configure.filter;
+ }
+ } else if (typeof this.actualOptions.configure === 'boolean') {
+ config = this.actualOptions.configure;
+ }
-/***/ },
-/* 52 */
-/***/ function(module, exports, __webpack_require__) {
+ if (config !== false) {
+ this._create(config);
+ }
+ }
+ }
+ }, {
+ key: '_create',
- 'use strict';
+ /**
+ * Create all DOM elements
+ * @param {Boolean | String} config
+ * @private
+ */
+ value: function _create(config) {
+ var _this = this;
- var keycharm = __webpack_require__(56);
- var Emitter = __webpack_require__(42);
- var Hammer = __webpack_require__(41);
- var util = __webpack_require__(1);
+ this._clean();
+ this.changedOptions = [];
- /**
- * Turn an element into an clickToUse element.
- * When not active, the element has a transparent overlay. When the overlay is
- * clicked, the mode is changed to active.
- * When active, the element is displayed with a blue border around it, and
- * the interactive contents of the element can be used. When clicked outside
- * the element, the elements mode is changed to inactive.
- * @param {Element} container
- * @constructor
- */
- function Activator(container) {
- this.active = false;
+ var counter = 0;
+ for (var option in this.possibleOptions) {
+ if (this.possibleOptions.hasOwnProperty(option)) {
+ if (config === true || config.indexOf(option) !== -1) {
+ var optionObj = this.possibleOptions[option];
- this.dom = {
- container: container
- };
+ // linebreak between categories
+ if (counter > 0) {
+ this._makeItem([]);
+ }
+ // a header for the category
+ this._makeHeader(option);
- this.dom.overlay = document.createElement('div');
- this.dom.overlay.className = 'vis-overlay';
+ // get the suboptions
+ var path = [option];
+ this._handleObject(optionObj, path);
+ }
+ counter++;
+ }
+ }
+ var generateButton = document.createElement('div');
+ generateButton.className = 'vis-network-configuration button';
+ generateButton.innerHTML = 'generate options';
+ generateButton.onclick = function () {
+ _this._printOptions();
+ };
+ generateButton.onmouseover = function () {
+ generateButton.className = 'vis-network-configuration button hover';
+ };
+ generateButton.onmouseout = function () {
+ generateButton.className = 'vis-network-configuration button';
+ };
- this.dom.container.appendChild(this.dom.overlay);
+ this.optionsContainer = document.createElement('div');
+ this.optionsContainer.className = 'vis-network-configuration vis-option-container';
- this.hammer = Hammer(this.dom.overlay);
- this.hammer.on('tap', this._onTapOverlay.bind(this));
+ this.domElements.push(this.optionsContainer);
+ this.domElements.push(generateButton);
- // block all touch events (except tap)
- var me = this;
- var events = ['tap', 'doubletap', 'press', 'pinch', 'pan', 'panstart', 'panmove', 'panend'];
- events.forEach(function (event) {
- me.hammer.on(event, function (event) {
- event.stopPropagation();
- });
- });
+ this._push();
+ this.colorPicker.insertTo(this.container);
+ }
+ }, {
+ key: '_push',
- // attach a tap event to the window, in order to deactivate when clicking outside the timeline
- this.bodyHammer = Hammer(document && document.body, { prevent_default: false });
- this.bodyHammer.on('tap', function (event) {
- // deactivate when clicked outside the container
- if (!_hasParent(event.target, container)) {
- me.deactivate();
+ /**
+ * draw all DOM elements on the screen
+ * @private
+ */
+ value: function _push() {
+ this.wrapper = document.createElement('div');
+ this.wrapper.className = 'vis-network-configuration-wrapper';
+ this.container.appendChild(this.wrapper);
+ for (var i = 0; i < this.domElements.length; i++) {
+ this.wrapper.appendChild(this.domElements[i]);
+ }
}
- });
+ }, {
+ key: '_clean',
- if (this.keycharm !== undefined) {
- this.keycharm.destroy();
- }
- this.keycharm = keycharm();
+ /**
+ * delete all DOM elements
+ * @private
+ */
+ value: function _clean() {
+ for (var i = 0; i < this.domElements.length; i++) {
+ this.wrapper.removeChild(this.domElements[i]);
+ }
- // keycharm listener only bounded when active)
- this.escListener = this.deactivate.bind(this);
- }
+ if (this.wrapper !== undefined) {
+ this.container.removeChild(this.wrapper);
+ this.wrapper = undefined;
+ }
+ this.domElements = [];
+ }
+ }, {
+ key: '_getValue',
- // turn into an event emitter
- Emitter(Activator.prototype);
+ /**
+ * get the value from the actualOptions if it exists
+ * @param {array} path | where to look for the actual option
+ * @returns {*}
+ * @private
+ */
+ value: function _getValue(path) {
+ var base = this.actualOptions;
+ for (var i = 0; i < path.length; i++) {
+ if (base[path[i]] !== undefined) {
+ base = base[path[i]];
+ } else {
+ base = undefined;
+ break;
+ }
+ }
+ return base;
+ }
+ }, {
+ key: '_addToPath',
- // The currently active activator
- Activator.current = null;
+ /**
+ * Copy the path and add a step. It needs to copy because the path will keep stacking otherwise.
+ * @param path
+ * @param newValue
+ * @returns {Array}
+ * @private
+ */
+ value: function _addToPath(path, newValue) {
+ var newPath = [];
+ for (var i = 0; i < path.length; i++) {
+ newPath.push(path[i]);
+ }
+ newPath.push(newValue);
+ return newPath;
+ }
+ }, {
+ key: '_makeItem',
- /**
- * Destroy the activator. Cleans up all created DOM and event listeners
- */
- Activator.prototype.destroy = function () {
- this.deactivate();
+ /**
+ * all option elements are wrapped in an item
+ * @param path
+ * @param domElements
+ * @private
+ */
+ value: function _makeItem(path) {
+ for (var _len = arguments.length, domElements = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+ domElements[_key - 1] = arguments[_key];
+ }
- // remove dom
- this.dom.overlay.parentNode.removeChild(this.dom.overlay);
+ var item = document.createElement('div');
+ item.className = 'vis-network-configuration item s' + path.length;
+ domElements.forEach(function (element) {
+ item.appendChild(element);
+ });
+ this.domElements.push(item);
+ }
+ }, {
+ key: '_makeHeader',
- // cleanup hammer instances
- this.hammer = null;
- this.bodyHammer = null;
- // FIXME: cleaning up hammer instances doesn't work (Timeline not removed from memory)
- };
+ /**
+ * header for major subjects
+ * @param name
+ * @private
+ */
+ value: function _makeHeader(name) {
+ var div = document.createElement('div');
+ div.className = 'vis-network-configuration header';
+ div.innerHTML = name;
+ this._makeItem([], div);
+ }
+ }, {
+ key: '_makeLabel',
- /**
- * Activate the element
- * Overlay is hidden, element is decorated with a blue shadow border
- */
- Activator.prototype.activate = function () {
- // we allow only one active activator at a time
- if (Activator.current) {
- Activator.current.deactivate();
- }
- Activator.current = this;
-
- this.active = true;
- this.dom.overlay.style.display = 'none';
- util.addClassName(this.dom.container, 'vis-active');
-
- this.emit('change');
- this.emit('activate');
+ /**
+ * make a label, if it is an object label, it gets different styling.
+ * @param name
+ * @param path
+ * @param objectLabel
+ * @returns {HTMLElement}
+ * @private
+ */
+ value: function _makeLabel(name, path) {
+ var objectLabel = arguments[2] === undefined ? false : arguments[2];
- // ugly hack: bind ESC after emitting the events, as the Network rebinds all
- // keyboard events on a 'change' event
- this.keycharm.bind('esc', this.escListener);
- };
+ var div = document.createElement('div');
+ div.className = 'vis-network-configuration label s' + path.length;
+ if (objectLabel === true) {
+ div.innerHTML = '' + name + ':';
+ } else {
+ div.innerHTML = name + ':';
+ }
+ return div;
+ }
+ }, {
+ key: '_makeDropdown',
- /**
- * Deactivate the element
- * Overlay is displayed on top of the element
- */
- Activator.prototype.deactivate = function () {
- this.active = false;
- this.dom.overlay.style.display = '';
- util.removeClassName(this.dom.container, 'vis-active');
- this.keycharm.unbind('esc', this.escListener);
+ /**
+ * make a dropdown list for multiple possible string optoins
+ * @param arr
+ * @param value
+ * @param path
+ * @private
+ */
+ value: function _makeDropdown(arr, value, path) {
+ var select = document.createElement('select');
+ select.className = 'vis-network-configuration select';
+ var selectedValue = 0;
+ if (value !== undefined) {
+ if (arr.indexOf(value) !== -1) {
+ selectedValue = arr.indexOf(value);
+ }
+ }
- this.emit('change');
- this.emit('deactivate');
- };
+ for (var i = 0; i < arr.length; i++) {
+ var option = document.createElement('option');
+ option.value = arr[i];
+ if (i === selectedValue) {
+ option.selected = 'selected';
+ }
+ option.innerHTML = arr[i];
+ select.appendChild(option);
+ }
- /**
- * Handle a tap event: activate the container
- * @param event
- * @private
- */
- Activator.prototype._onTapOverlay = function (event) {
- // activate the container
- this.activate();
- event.stopPropagation();
- };
+ var me = this;
+ select.onchange = function () {
+ me._update(this.value, path);
+ };
- /**
- * Test whether the element has the requested parent element somewhere in
- * its chain of parent nodes.
- * @param {HTMLElement} element
- * @param {HTMLElement} parent
- * @returns {boolean} Returns true when the parent is found somewhere in the
- * chain of parent nodes.
- * @private
- */
- function _hasParent(element, parent) {
- while (element) {
- if (element === parent) {
- return true;
+ var label = this._makeLabel(path[path.length - 1], path);
+ this._makeItem(path, label, select);
}
- element = element.parentNode;
- }
- return false;
- }
-
- module.exports = Activator;
-
-/***/ },
-/* 53 */
-/***/ function(module, exports, __webpack_require__) {
+ }, {
+ key: '_makeRange',
- function webpackContext(req) {
- throw new Error("Cannot find module '" + req + "'.");
- }
- webpackContext.keys = function() { return []; };
- webpackContext.resolve = webpackContext;
- module.exports = webpackContext;
- webpackContext.id = 53;
+ /**
+ * make a range object for numeric options
+ * @param arr
+ * @param value
+ * @param path
+ * @private
+ */
+ value: function _makeRange(arr, value, path) {
+ var defaultValue = arr[0];
+ var min = arr[1];
+ var max = arr[2];
+ var step = arr[3];
+ var range = document.createElement('input');
+ range.type = 'range';
+ range.className = 'vis-network-configuration range';
+ range.min = min;
+ range.max = max;
+ range.step = step;
+ if (value !== undefined) {
+ if (value * 0.1 < min) {
+ range.min = value / 10;
+ }
+ if (value * 2 > max && max !== 1) {
+ range.max = value * 2;
+ }
+ range.value = value;
+ } else {
+ range.value = defaultValue;
+ }
-/***/ },
-/* 54 */
-/***/ function(module, exports, __webpack_require__) {
+ var input = document.createElement('input');
+ input.className = 'vis-network-configuration rangeinput';
+ input.value = range.value;
- module.exports = function(module) {
- if(!module.webpackPolyfill) {
- module.deprecate = function() {};
- module.paths = [];
- // module.parent = undefined by default
- module.children = [];
- module.webpackPolyfill = 1;
- }
- return module;
- }
+ var me = this;
+ range.onchange = function () {
+ input.value = this.value;me._update(this.value, path);
+ };
+ range.oninput = function () {
+ input.value = this.value;
+ };
+ var label = this._makeLabel(path[path.length - 1], path);
+ this._makeItem(path, label, range, input);
+ }
+ }, {
+ key: '_makeCheckbox',
-/***/ },
-/* 55 */
-/***/ function(module, exports, __webpack_require__) {
+ /**
+ * make a checkbox for boolean options.
+ * @param defaultValue
+ * @param value
+ * @param path
+ * @private
+ */
+ value: function _makeCheckbox(defaultValue, value, path) {
+ var checkbox = document.createElement('input');
+ checkbox.type = 'checkbox';
+ checkbox.className = 'vis-network-configuration checkbox';
+ checkbox.checked = defaultValue;
+ if (value !== undefined) {
+ checkbox.checked = value;
+ if (value !== defaultValue) {
+ if (typeof defaultValue === 'object') {
+ if (value !== defaultValue.enabled) {
+ this.changedOptions.push({ path: path, value: value });
+ }
+ } else {
+ this.changedOptions.push({ path: path, value: value });
+ }
+ }
+ }
- /* WEBPACK VAR INJECTION */(function(__webpack_amd_options__) {module.exports = __webpack_amd_options__;
+ var me = this;
+ checkbox.onchange = function () {
+ me._update(this.checked, path);
+ };
- /* WEBPACK VAR INJECTION */}.call(exports, {}))
+ var label = this._makeLabel(path[path.length - 1], path);
+ this._makeItem(path, label, checkbox);
+ }
+ }, {
+ key: '_makeColorField',
-/***/ },
-/* 56 */
-/***/ function(module, exports, __webpack_require__) {
+ /**
+ * make a color field with a color picker for color fields
+ * @param arr
+ * @param value
+ * @param path
+ * @private
+ */
+ value: function _makeColorField(arr, value, path) {
+ var _this2 = this;
- var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;"use strict";
- /**
- * Created by Alex on 11/6/2014.
- */
+ var defaultColor = arr[1];
+ var div = document.createElement('div');
+ value = value === undefined ? defaultColor : value;
- // https://github.com/umdjs/umd/blob/master/returnExports.js#L40-L60
- // if the module has no dependencies, the above pattern can be simplified to
- (function (root, factory) {
- if (true) {
- // AMD. Register as an anonymous module.
- !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
- } else if (typeof exports === 'object') {
- // Node. Does not work with strict CommonJS, but
- // only CommonJS-like environments that support module.exports,
- // like Node.
- module.exports = factory();
- } else {
- // Browser globals (root is window)
- root.keycharm = factory();
- }
- }(this, function () {
+ if (value !== 'none') {
+ div.className = 'vis-network-configuration colorBlock';
+ div.style.backgroundColor = value;
+ } else {
+ div.className = 'vis-network-configuration colorBlock none';
+ }
- function keycharm(options) {
- var preventDefault = options && options.preventDefault || false;
+ value = value === undefined ? defaultColor : value;
+ div.onclick = function () {
+ _this2._showColorPicker(value, div, path);
+ };
- var container = options && options.container || window;
- var _exportFunctions = {};
- var _bound = {keydown:{}, keyup:{}};
- var _keys = {};
- var i;
+ var label = this._makeLabel(path[path.length - 1], path);
+ this._makeItem(path, label, div);
+ }
+ }, {
+ key: '_showColorPicker',
- // a - z
- for (i = 97; i <= 122; i++) {_keys[String.fromCharCode(i)] = {code:65 + (i - 97), shift: false};}
- // A - Z
- for (i = 65; i <= 90; i++) {_keys[String.fromCharCode(i)] = {code:i, shift: true};}
- // 0 - 9
- for (i = 0; i <= 9; i++) {_keys['' + i] = {code:48 + i, shift: false};}
- // F1 - F12
- for (i = 1; i <= 12; i++) {_keys['F' + i] = {code:111 + i, shift: false};}
- // num0 - num9
- for (i = 0; i <= 9; i++) {_keys['num' + i] = {code:96 + i, shift: false};}
+ /**
+ * used by the color buttons to call the color picker.
+ * @param event
+ * @param value
+ * @param div
+ * @param path
+ * @private
+ */
+ value: function _showColorPicker(value, div, path) {
+ var _this3 = this;
- // numpad misc
- _keys['num*'] = {code:106, shift: false};
- _keys['num+'] = {code:107, shift: false};
- _keys['num-'] = {code:109, shift: false};
- _keys['num/'] = {code:111, shift: false};
- _keys['num.'] = {code:110, shift: false};
- // arrows
- _keys['left'] = {code:37, shift: false};
- _keys['up'] = {code:38, shift: false};
- _keys['right'] = {code:39, shift: false};
- _keys['down'] = {code:40, shift: false};
- // extra keys
- _keys['space'] = {code:32, shift: false};
- _keys['enter'] = {code:13, shift: false};
- _keys['shift'] = {code:16, shift: undefined};
- _keys['esc'] = {code:27, shift: false};
- _keys['backspace'] = {code:8, shift: false};
- _keys['tab'] = {code:9, shift: false};
- _keys['ctrl'] = {code:17, shift: false};
- _keys['alt'] = {code:18, shift: false};
- _keys['delete'] = {code:46, shift: false};
- _keys['pageup'] = {code:33, shift: false};
- _keys['pagedown'] = {code:34, shift: false};
- // symbols
- _keys['='] = {code:187, shift: false};
- _keys['-'] = {code:189, shift: false};
- _keys[']'] = {code:221, shift: false};
- _keys['['] = {code:219, shift: false};
+ var rect = div.getBoundingClientRect();
+ var bodyRect = document.body.getBoundingClientRect();
+ var pickerX = rect.left + rect.width + 5;
+ var pickerY = rect.top - bodyRect.top + rect.height * 0.5;
+ this.colorPicker.show(pickerX, pickerY);
+ this.colorPicker.setColor(value);
+ this.colorPicker.setCallback(function (color) {
+ var colorString = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';
+ div.style.backgroundColor = colorString;
+ _this3._update(colorString, path);
+ });
+ }
+ }, {
+ key: '_handleObject',
+ /**
+ * parse an object and draw the correct items
+ * @param obj
+ * @param path
+ * @private
+ */
+ value: function _handleObject(obj) {
+ var path = arguments[1] === undefined ? [] : arguments[1];
+ for (var subObj in obj) {
+ if (obj.hasOwnProperty(subObj)) {
+ var item = obj[subObj];
+ var newPath = util.copyAndExtendArray(path, subObj);
+ var value = this._getValue(newPath);
- var down = function(event) {handleEvent(event,'keydown');};
- var up = function(event) {handleEvent(event,'keyup');};
+ if (item instanceof Array) {
+ this._handleArray(item, value, newPath);
+ } else if (typeof item === 'string') {
+ this._handleString(item, value, newPath);
+ } else if (typeof item === 'boolean') {
+ this._makeCheckbox(item, value, newPath);
+ } else if (item instanceof Object) {
+ // collapse the physics options that are not enabled
+ var draw = true;
+ if (path.indexOf('physics') !== -1) {
+ if (this.actualOptions.physics.solver !== subObj) {
+ draw = false;
+ }
+ }
- // handle the actualy bound key with the event
- var handleEvent = function(event,type) {
- if (_bound[type][event.keyCode] !== undefined) {
- var bound = _bound[type][event.keyCode];
- for (var i = 0; i < bound.length; i++) {
- if (bound[i].shift === undefined) {
- bound[i].fn(event);
- }
- else if (bound[i].shift == true && event.shiftKey == true) {
- bound[i].fn(event);
- }
- else if (bound[i].shift == false && event.shiftKey == false) {
- bound[i].fn(event);
+ if (draw === true) {
+ // initially collapse options with an disabled enabled option.
+ if (item.enabled !== undefined) {
+ var enabledPath = util.copyAndExtendArray(newPath, 'enabled');
+ var enabledValue = this._getValue(enabledPath);
+ if (enabledValue === true) {
+ var label = this._makeLabel(subObj, newPath, true);
+ this._makeItem(newPath, label);
+ this._handleObject(item, newPath);
+ } else {
+ this._makeCheckbox(item, enabledValue, newPath);
+ }
+ } else {
+ var label = this._makeLabel(subObj, newPath, true);
+ this._makeItem(newPath, label);
+ this._handleObject(item, newPath);
+ }
+ }
+ } else {
+ console.error('dont know how to handle', item, subObj, newPath);
}
}
+ }
+ }
+ }, {
+ key: '_handleArray',
- if (preventDefault == true) {
- event.preventDefault();
+ /**
+ * handle the array type of option
+ * @param optionName
+ * @param arr
+ * @param value
+ * @param path
+ * @private
+ */
+ value: function _handleArray(arr, value, path) {
+ if (typeof arr[0] === 'string' && arr[0] === 'color') {
+ this._makeColorField(arr, value, path);
+ if (arr[1] !== value) {
+ this.changedOptions.push({ path: path, value: value });
+ }
+ } else if (typeof arr[0] === 'string') {
+ this._makeDropdown(arr, value, path);
+ if (arr[0] !== value) {
+ this.changedOptions.push({ path: path, value: value });
+ }
+ } else if (typeof arr[0] === 'number') {
+ this._makeRange(arr, value, path);
+ if (arr[0] !== value) {
+ this.changedOptions.push({ path: path, value: value });
}
}
- };
+ }
+ }, {
+ key: '_update',
- // bind a key to a callback
- _exportFunctions.bind = function(key, callback, type) {
- if (type === undefined) {
- type = 'keydown';
- }
- if (_keys[key] === undefined) {
- throw new Error("unsupported key: " + key);
- }
- if (_bound[type][_keys[key].code] === undefined) {
- _bound[type][_keys[key].code] = [];
- }
- _bound[type][_keys[key].code].push({fn:callback, shift:_keys[key].shift});
- };
+ /**
+ * called to update the network with the new settings.
+ * @param value
+ * @param path
+ * @private
+ */
+ value: function _update(value, path) {
+ var options = this._constructOptions(value, path);
+ this.network.setOptions(options);
+ }
+ }, {
+ key: '_constructOptions',
+ value: function _constructOptions(value, path) {
+ var optionsObj = arguments[2] === undefined ? {} : arguments[2];
+ var pointer = optionsObj;
- // bind all keys to a call back (demo purposes)
- _exportFunctions.bindAll = function(callback, type) {
- if (type === undefined) {
- type = 'keydown';
- }
- for (var key in _keys) {
- if (_keys.hasOwnProperty(key)) {
- _exportFunctions.bind(key,callback,type);
- }
- }
- };
+ // when dropdown boxes can be string or boolean, we typecast it into correct types
+ value = value === 'true' ? true : value;
+ value = value === 'false' ? false : value;
- // get the key label from an event
- _exportFunctions.getKey = function(event) {
- for (var key in _keys) {
- if (_keys.hasOwnProperty(key)) {
- if (event.shiftKey == true && _keys[key].shift == true && event.keyCode == _keys[key].code) {
- return key;
- }
- else if (event.shiftKey == false && _keys[key].shift == false && event.keyCode == _keys[key].code) {
- return key;
- }
- else if (event.keyCode == _keys[key].code && key == 'shift') {
- return key;
- }
+ for (var i = 0; i < path.length; i++) {
+ if (pointer[path[i]] === undefined) {
+ pointer[path[i]] = {};
+ }
+ if (i !== path.length - 1) {
+ pointer = pointer[path[i]];
+ } else {
+ pointer[path[i]] = value;
}
}
- return "unknown key, currently not supported";
- };
-
- // unbind either a specific callback from a key or all of them (by leaving callback undefined)
- _exportFunctions.unbind = function(key, callback, type) {
- if (type === undefined) {
- type = 'keydown';
+ return optionsObj;
+ }
+ }, {
+ key: '_printOptions',
+ value: function _printOptions() {
+ var options = {};
+ for (var i = 0; i < this.changedOptions.length; i++) {
+ this._constructOptions(this.changedOptions[i].value, this.changedOptions[i].path, options);
}
- if (_keys[key] === undefined) {
- throw new Error("unsupported key: " + key);
- }
- if (callback !== undefined) {
- var newBindings = [];
- var bound = _bound[type][_keys[key].code];
- if (bound !== undefined) {
- for (var i = 0; i < bound.length; i++) {
- if (!(bound[i].fn == callback && bound[i].shift == _keys[key].shift)) {
- newBindings.push(_bound[type][_keys[key].code][i]);
- }
- }
- }
- _bound[type][_keys[key].code] = newBindings;
- }
- else {
- _bound[type][_keys[key].code] = [];
- }
- };
-
- // reset all bound variables.
- _exportFunctions.reset = function() {
- _bound = {keydown:{}, keyup:{}};
- };
-
- // unbind all listeners and reset all variables.
- _exportFunctions.destroy = function() {
- _bound = {keydown:{}, keyup:{}};
- container.removeEventListener('keydown', down, true);
- container.removeEventListener('keyup', up, true);
- };
-
- // create listeners.
- container.addEventListener('keydown',down,true);
- container.addEventListener('keyup',up,true);
-
- // return the public functions.
- return _exportFunctions;
- }
-
- return keycharm;
- }));
-
+ this.optionsContainer.innerHTML = 'var options = ' + JSON.stringify(options, null, 2) + '
';
+ }
+ }]);
+ return ConfigurationSystem;
+ })();
+ exports['default'] = ConfigurationSystem;
+ module.exports = exports['default'];
/***/ },
-/* 57 */
+/* 62 */
/***/ function(module, exports, __webpack_require__) {
- "use strict";
+ 'use strict';
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
+ var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
- Object.defineProperty(exports, "__esModule", {
+ Object.defineProperty(exports, '__esModule', {
value: true
});
var util = __webpack_require__(1);
+ var errorFound = false;
+ var printStyle = 'background: #FFeeee; color: #dd0000';
/**
- * @class Groups
- * This class can store groups and options specific for groups.
+ * Used to validate options.
*/
- var Groups = (function () {
- function Groups() {
- _classCallCheck(this, Groups);
-
- this.clear();
- this.defaultIndex = 0;
- this.groupsArray = [];
- this.groupIndex = 0;
-
- this.defaultGroups = [{ border: "#2B7CE9", background: "#97C2FC", highlight: { border: "#2B7CE9", background: "#D2E5FF" }, hover: { border: "#2B7CE9", background: "#D2E5FF" } }, // 0: blue
- { border: "#FFA500", background: "#FFFF00", highlight: { border: "#FFA500", background: "#FFFFA3" }, hover: { border: "#FFA500", background: "#FFFFA3" } }, // 1: yellow
- { border: "#FA0A10", background: "#FB7E81", highlight: { border: "#FA0A10", background: "#FFAFB1" }, hover: { border: "#FA0A10", background: "#FFAFB1" } }, // 2: red
- { border: "#41A906", background: "#7BE141", highlight: { border: "#41A906", background: "#A1EC76" }, hover: { border: "#41A906", background: "#A1EC76" } }, // 3: green
- { border: "#E129F0", background: "#EB7DF4", highlight: { border: "#E129F0", background: "#F0B3F5" }, hover: { border: "#E129F0", background: "#F0B3F5" } }, // 4: magenta
- { border: "#7C29F0", background: "#AD85E4", highlight: { border: "#7C29F0", background: "#D3BDF0" }, hover: { border: "#7C29F0", background: "#D3BDF0" } }, // 5: purple
- { border: "#C37F00", background: "#FFA807", highlight: { border: "#C37F00", background: "#FFCA66" }, hover: { border: "#C37F00", background: "#FFCA66" } }, // 6: orange
- { border: "#4220FB", background: "#6E6EFD", highlight: { border: "#4220FB", background: "#9B9BFD" }, hover: { border: "#4220FB", background: "#9B9BFD" } }, // 7: darkblue
- { border: "#FD5A77", background: "#FFC0CB", highlight: { border: "#FD5A77", background: "#FFD1D9" }, hover: { border: "#FD5A77", background: "#FFD1D9" } }, // 8: pink
- { border: "#4AD63A", background: "#C2FABC", highlight: { border: "#4AD63A", background: "#E6FFE3" }, hover: { border: "#4AD63A", background: "#E6FFE3" } }, // 9: mint
-
- { border: "#990000", background: "#EE0000", highlight: { border: "#BB0000", background: "#FF3333" }, hover: { border: "#BB0000", background: "#FF3333" } }, // 10:bright red
-
- { border: "#FF6000", background: "#FF6000", highlight: { border: "#FF6000", background: "#FF6000" }, hover: { border: "#FF6000", background: "#FF6000" } }, // 12: real orange
- { border: "#97C2FC", background: "#2B7CE9", highlight: { border: "#D2E5FF", background: "#2B7CE9" }, hover: { border: "#D2E5FF", background: "#2B7CE9" } }, // 13: blue
- { border: "#399605", background: "#255C03", highlight: { border: "#399605", background: "#255C03" }, hover: { border: "#399605", background: "#255C03" } }, // 14: green
- { border: "#B70054", background: "#FF007E", highlight: { border: "#B70054", background: "#FF007E" }, hover: { border: "#B70054", background: "#FF007E" } }, // 15: magenta
- { border: "#AD85E4", background: "#7C29F0", highlight: { border: "#D3BDF0", background: "#7C29F0" }, hover: { border: "#D3BDF0", background: "#7C29F0" } }, // 16: purple
- { border: "#4557FA", background: "#000EA1", highlight: { border: "#6E6EFD", background: "#000EA1" }, hover: { border: "#6E6EFD", background: "#000EA1" } }, // 17: darkblue
- { border: "#FFC0CB", background: "#FD5A77", highlight: { border: "#FFD1D9", background: "#FD5A77" }, hover: { border: "#FFD1D9", background: "#FD5A77" } }, // 18: pink
- { border: "#C2FABC", background: "#74D66A", highlight: { border: "#E6FFE3", background: "#74D66A" }, hover: { border: "#E6FFE3", background: "#74D66A" } }, // 19: mint
-
- { border: "#EE0000", background: "#990000", highlight: { border: "#FF3333", background: "#BB0000" }, hover: { border: "#FF3333", background: "#BB0000" } }];
-
- this.options = {};
- this.defaultOptions = {
- useDefaultGroups: true
- };
- util.extend(this.options, this.defaultOptions);
+ var Validator = (function () {
+ function Validator() {
+ _classCallCheck(this, Validator);
}
- _createClass(Groups, [{
- key: "setOptions",
- value: function setOptions(options) {
- var optionFields = ["useDefaultGroups"];
+ _createClass(Validator, null, [{
+ key: 'validate',
- if (options !== undefined) {
- for (var groupName in options) {
- if (options.hasOwnProperty(groupName)) {
- if (optionFields.indexOf(groupName) === -1) {
- var group = options[groupName];
- this.add(groupName, group);
- }
- }
- }
+ /**
+ * Main function to be called
+ * @param options
+ * @param subObject
+ * @returns {boolean}
+ */
+ value: function validate(options, referenceOptions, subObject) {
+ errorFound = false;
+ var usedOptions = referenceOptions;
+ if (subObject !== undefined) {
+ usedOptions = referenceOptions[subObject];
}
+ Validator.parse(options, usedOptions, []);
+ return errorFound;
}
}, {
- key: "clear",
+ key: 'parse',
/**
- * Clear all groups
+ * Will traverse an object recursively and check every value
+ * @param options
+ * @param referenceOptions
+ * @param path
*/
- value: function clear() {
- this.groups = {};
- this.groupsArray = [];
+ value: function parse(options, referenceOptions, path) {
+ for (var option in options) {
+ if (options.hasOwnProperty(option)) {
+ Validator.check(option, options, referenceOptions, path);
+ }
+ }
}
}, {
- key: "get",
+ key: 'check',
/**
- * get group options of a groupname. If groupname is not found, a new group
- * is added.
- * @param {*} groupname Can be a number, string, Date, etc.
- * @return {Object} group The created group, containing all group options
+ * Check every value. If the value is an object, call the parse function on that object.
+ * @param option
+ * @param options
+ * @param referenceOptions
+ * @param path
*/
- value: function get(groupname) {
- var group = this.groups[groupname];
- if (group === undefined) {
- if (this.options.useDefaultGroups === false && this.groupsArray.length > 0) {
- // create new group
- var index = this.groupIndex % this.groupsArray.length;
- this.groupIndex++;
- group = {};
- group.color = this.groups[this.groupsArray[index]];
- this.groups[groupname] = group;
+ value: function check(option, options, referenceOptions, path) {
+ if (referenceOptions[option] === undefined && referenceOptions.__any__ === undefined) {
+ Validator.getSuggestion(option, referenceOptions, path);
+ } else if (referenceOptions[option] === undefined && referenceOptions.__any__ !== undefined) {
+ // __any__ is a wildcard. Any value is accepted and will be further analysed by reference.
+ if (Validator.getType(options[option]) === 'object') {
+ util.copyAndExtendArray(path, option);
+ Validator.checkFields(option, options, referenceOptions, '__any__', referenceOptions.__any__.__type__, path);
+ }
+ } else {
+ // Since all options in the reference are objects, we can check whether they are supposed to be object to look for the __type__ field.
+ if (referenceOptions[option].__type__ !== undefined) {
+ util.copyAndExtendArray(path, option);
+ // if this should be an object, we check if the correct type has been supplied to account for shorthand options.
+ Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option].__type__, path);
} else {
- // create new group
- var index = this.defaultIndex % this.defaultGroups.length;
- this.defaultIndex++;
- group = {};
- group.color = this.defaultGroups[index];
- this.groups[groupname] = group;
+ Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option], path);
}
}
-
- return group;
}
}, {
- key: "add",
+ key: 'checkFields',
/**
- * Add a custom group style
- * @param {String} groupName
- * @param {Object} style An object containing borderColor,
- * backgroundColor, etc.
- * @return {Object} group The created group object
+ *
+ * @param {String} option | the option property
+ * @param {Object} options | The supplied options object
+ * @param {Object} referenceOptions | The reference options containing all options and their allowed formats
+ * @param {String} referenceOption | Usually this is the same as option, except when handling an __any__ tag.
+ * @param {String} refOptionType | This is the type object from the reference options
+ * @param {Array} path | where in the object is the option
*/
- value: function add(groupName, style) {
- this.groups[groupName] = style;
- this.groupsArray.push(groupName);
- return style;
+ value: function checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path) {
+ var optionType = Validator.getType(options[option]);
+ var refOptionType = refOptionObj[optionType];
+ if (refOptionType !== undefined) {
+ // if the type is correct, we check if it is supposed to be one of a few select values
+ if (Validator.getType(refOptionType) === 'array') {
+ if (refOptionType.indexOf(options[option]) === -1) {
+ console.log('%cInvalid option detected in "' + option + '".' + ' Allowed values are:' + Validator.print(refOptionType) + ' not "' + options[option] + '". ' + Validator.printLocation(path, option), printStyle);
+ errorFound = true;
+ } else if (optionType === 'object') {
+ Validator.parse(options[option], referenceOptions[referenceOption], path);
+ }
+ } else if (optionType === 'object') {
+ Validator.parse(options[option], referenceOptions[referenceOption], path);
+ }
+ } else {
+ if (refOptionObj.undef !== undefined && optionType === 'undefined') {} else if (refOptionObj.fn !== undefined && optionType === 'function') {} else {
+ // type of the field is incorrect
+ console.log('%cInvalid type received for "' + option + '". Expected: ' + Validator.print(Object.keys(refOptionObj)) + '. Received [' + optionType + '] "' + options[option] + '"' + Validator.printLocation(path, option), printStyle);
+ errorFound = true;
+ }
+ }
}
- }]);
-
- return Groups;
- })();
-
- exports["default"] = Groups;
- module.exports = exports["default"];
- // 20:bright red
-
-/***/ },
-/* 58 */
-/***/ function(module, exports, __webpack_require__) {
+ }, {
+ key: 'getType',
+ value: function getType(object) {
+ var type = typeof object;
- 'use strict';
+ if (type === 'object') {
+ if (object === null) {
+ return 'null';
+ }
+ if (object instanceof Boolean) {
+ return 'boolean';
+ }
+ if (object instanceof Number) {
+ return 'number';
+ }
+ if (object instanceof String) {
+ return 'string';
+ }
+ if (Array.isArray(object)) {
+ return 'array';
+ }
+ if (object instanceof Date) {
+ return 'date';
+ }
+ if (object.nodeType !== undefined) {
+ return 'dom';
+ }
+ return 'object';
+ } else if (type === 'number') {
+ return 'number';
+ } else if (type === 'boolean') {
+ return 'boolean';
+ } else if (type === 'string') {
+ return 'string';
+ } else if (type === undefined) {
+ return 'undefined';
+ }
+ return type;
+ }
+ }, {
+ key: 'getSuggestion',
+ value: function getSuggestion(option, options, path) {
+ var closestMatch = '';
+ var min = 1000000000;
+ var threshold = 10;
+ for (var op in options) {
+ var distance = Validator.levenshteinDistance(option, op);
+ if (min > distance && distance < threshold) {
+ closestMatch = op;
+ min = distance;
+ }
+ }
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
+ if (min < threshold) {
+ console.log('%cUnknown option detected: "' + option + '". Did you mean "' + closestMatch + '"?' + Validator.printLocation(path, option), printStyle);
+ } else {
+ console.log('%cUnknown option detected: "' + option + '". Did you mean one of these: ' + Validator.print(Object.keys(options)) + Validator.printLocation(path, option), printStyle);
+ }
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
+ errorFound = true;
+ return closestMatch;
+ }
+ }, {
+ key: 'printLocation',
+ value: function printLocation(path, option) {
+ var str = '\n\nProblem value found at: \noptions = {\n';
+ for (var i = 0; i < path.length; i++) {
+ for (var j = 0; j < i + 1; j++) {
+ str += ' ';
+ }
+ str += path[i] + ': {\n';
+ }
+ for (var j = 0; j < path.length + 1; j++) {
+ str += ' ';
+ }
+ str += option + '\n';
+ for (var i = 0; i < path.length + 1; i++) {
+ for (var j = 0; j < path.length - i; j++) {
+ str += ' ';
+ }
+ str += '}\n';
+ }
+ return str + '\n\n';
+ }
+ }, {
+ key: 'print',
+ value: function print(options) {
+ return JSON.stringify(options).replace(/(\")|(\[)|(\])|(,"__type__")/g, '').replace(/(\,)/g, ', ');
+ }
+ }, {
+ key: 'levenshteinDistance',
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ // Compute the edit distance between the two given strings
+ // http://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Levenshtein_distance#JavaScript
+ /*
+ Copyright (c) 2011 Andrei Mackenzie
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+ value: function levenshteinDistance(a, b) {
+ if (a.length === 0) {
+ return b.length;
+ }if (b.length === 0) {
+ return a.length;
+ }var matrix = [];
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
+ // increment along the first column of each row
+ var i;
+ for (i = 0; i <= b.length; i++) {
+ matrix[i] = [i];
+ }
- var _Node = __webpack_require__(73);
+ // increment each column in the first row
+ var j;
+ for (j = 0; j <= a.length; j++) {
+ matrix[0][j] = j;
+ }
- var _Node2 = _interopRequireWildcard(_Node);
+ // Fill in the rest of the matrix
+ for (i = 1; i <= b.length; i++) {
+ for (j = 1; j <= a.length; j++) {
+ if (b.charAt(i - 1) == a.charAt(j - 1)) {
+ matrix[i][j] = matrix[i - 1][j - 1];
+ } else {
+ matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, // substitution
+ Math.min(matrix[i][j - 1] + 1, // insertion
+ matrix[i - 1][j] + 1)); // deletion
+ }
+ }
+ }
- var _Label = __webpack_require__(74);
+ return matrix[b.length][a.length];
+ }
+ }]);
- var _Label2 = _interopRequireWildcard(_Label);
+ return Validator;
+ })();
- var util = __webpack_require__(1);
- var DataSet = __webpack_require__(3);
- var DataView = __webpack_require__(4);
+ exports['default'] = Validator;
+ exports.printStyle = printStyle;
- var NodesHandler = (function () {
- function NodesHandler(body, images, groups, layoutEngine) {
- var _this = this;
+ // item is undefined, which is allowed
- _classCallCheck(this, NodesHandler);
+ // item is a function, which is allowed
- this.body = body;
- this.images = images;
- this.groups = groups;
- this.layoutEngine = layoutEngine;
+/***/ },
+/* 63 */
+/***/ function(module, exports, __webpack_require__) {
- // create the node API in the body container
- this.body.functions.createNode = this.create.bind(this);
+ 'use strict';
- this.nodesListeners = {
- add: function add(event, params) {
- _this.add(params.items);
- },
- update: function update(event, params) {
- _this.update(params.items, params.data);
- },
- remove: function remove(event, params) {
- _this.remove(params.items);
- }
- };
+ Object.defineProperty(exports, '__esModule', {
+ value: true
+ });
+ /**
+ * This object contains all possible options. It will check if the types are correct, if required if the option is one
+ * of the allowed values.
+ *
+ * __any__ means that the name of the property does not matter.
+ * __type__ is a required field for all objects and contains the allowed types of all objects
+ */
+ var string = 'string';
+ var boolean = 'boolean';
+ var number = 'number';
+ var array = 'array';
+ var object = 'object';
+ var dom = 'dom';
+ var fn = 'function';
+ var undef = 'undefined';
- this.options = {};
- this.defaultOptions = {
- borderWidth: 1,
- borderWidthSelected: undefined,
- brokenImage: undefined,
- color: {
- border: '#2B7CE9',
- background: '#97C2FC',
- highlight: {
- border: '#2B7CE9',
- background: '#D2E5FF'
- },
- hover: {
- border: '#2B7CE9',
- background: '#D2E5FF'
- }
+ var allOptions = {
+ canvas: {
+ width: { string: string },
+ height: { string: string },
+ __type__: { object: object }
+ },
+ rendering: {
+ hideEdgesOnDrag: { boolean: boolean },
+ hideNodesOnDrag: { boolean: boolean },
+ __type__: { object: object }
+ },
+ clustering: {},
+ configure: {
+ filter: { boolean: boolean, string: ['nodes', 'edges', 'layout', 'physics', 'manipulation', 'interaction', 'selection', 'rendering'], array: array },
+ container: { dom: dom },
+ __type__: { object: object, string: string, array: array, boolean: boolean }
+ },
+ edges: {
+ arrows: {
+ to: { enabled: { boolean: boolean }, scaleFactor: { number: number }, __type__: { object: object } },
+ middle: { enabled: { boolean: boolean }, scaleFactor: { number: number }, __type__: { object: object } },
+ from: { enabled: { boolean: boolean }, scaleFactor: { number: number }, __type__: { object: object } },
+ __type__: { string: ['from', 'to', 'middle'], object: object }
+ },
+ color: {
+ color: { string: string },
+ highlight: { string: string },
+ hover: { string: string },
+ inherit: { string: ['from', 'to', 'both'], boolean: boolean },
+ opacity: { number: number },
+ __type__: { object: object }
+ },
+ dashes: {
+ enabled: { boolean: boolean },
+ pattern: { array: array },
+ __type__: { boolean: boolean, object: object }
+ },
+ font: {
+ color: { string: string },
+ size: { number: number }, // px
+ face: { string: string },
+ background: { string: string },
+ stroke: { number: number }, // px
+ strokeColor: { string: string },
+ align: { string: ['horizontal', 'top', 'middle', 'bottom'] },
+ __type__: { object: object, string: string }
+ },
+ hidden: { boolean: boolean },
+ hoverWidth: { fn: fn, number: number },
+ label: { string: string, undef: undef },
+ length: { number: number, undef: undef },
+ physics: { boolean: boolean },
+ scaling: {
+ min: { number: number },
+ max: { number: number },
+ label: {
+ enabled: { boolean: boolean },
+ min: { number: number },
+ max: { number: number },
+ maxVisible: { number: number },
+ drawThreshold: { number: number },
+ __type__: { object: object, boolean: boolean }
},
- fixed: {
- x: false,
- y: false
- },
- font: {
- color: '#343434',
- size: 14, // px
- face: 'arial',
- background: 'none',
- stroke: 0, // px
- strokeColor: '#ffffff',
- align: 'horizontal'
- },
- group: undefined,
- hidden: false,
- icon: {
- face: 'FontAwesome', //'FontAwesome',
- code: undefined, //'\uf007',
- size: 50, //50,
- color: '#2B7CE9' //'#aa00ff'
+ customScalingFunction: { fn: fn },
+ __type__: { object: object }
+ },
+ selectionWidth: { fn: fn, number: number },
+ selfReferenceSize: { number: number },
+ shadow: {
+ enabled: { boolean: boolean },
+ size: { number: number },
+ x: { number: number },
+ y: { number: number },
+ __type__: { object: object, boolean: boolean }
+ },
+ smooth: {
+ enabled: { boolean: boolean },
+ dynamic: { boolean: boolean },
+ type: { string: string },
+ roundness: { number: number },
+ __type__: { object: object, boolean: boolean }
+ },
+ title: { string: string, undef: undef },
+ width: { number: number },
+ value: { number: number, undef: undef },
+ __type__: { object: object }
+ },
+ groups: {
+ useDefaultGroups: { boolean: boolean },
+ __any__: ['__ref__', 'nodes'],
+ __type__: { object: object }
+ },
+ interaction: {
+ dragNodes: { boolean: boolean },
+ dragView: { boolean: boolean },
+ zoomView: { boolean: boolean },
+ hoverEnabled: { boolean: boolean },
+ navigationButtons: { boolean: boolean },
+ tooltipDelay: { number: number },
+ keyboard: {
+ enabled: { boolean: boolean },
+ speed: { x: { number: number }, y: { number: number }, zoom: { number: number }, __type__: { object: object } },
+ bindToWindow: { boolean: boolean },
+ __type__: { object: object, boolean: boolean }
+ },
+ __type__: { object: object }
+ },
+ layout: {
+ randomSeed: { undef: undef, number: number },
+ hierarchical: {
+ enabled: { boolean: boolean },
+ levelSeparation: { number: number },
+ direction: { string: ['UD', 'DU', 'LR', 'RL'] }, // UD, DU, LR, RL
+ sortMethod: { string: ['hubsize', 'directed'] }, // hubsize, directed
+ __type__: { object: object, boolean: boolean }
+ },
+ __type__: { object: object }
+ },
+ manipulation: {
+ enabled: { boolean: boolean },
+ initiallyActive: { boolean: boolean },
+ locale: { string: string },
+ locales: { object: object },
+ functionality: {
+ addNode: { boolean: boolean },
+ addEdge: { boolean: boolean },
+ editNode: { boolean: boolean },
+ editEdge: { boolean: boolean },
+ deleteNode: { boolean: boolean },
+ deleteEdge: { boolean: boolean },
+ __type__: { object: object }
+ },
+ handlerFunctions: {
+ addNode: { fn: fn, undef: undef },
+ addEdge: { fn: fn, undef: undef },
+ editNode: { fn: fn, undef: undef },
+ editEdge: { fn: fn, undef: undef },
+ deleteNode: { fn: fn, undef: undef },
+ deleteEdge: { fn: fn, undef: undef },
+ __type__: { object: object }
+ },
+ controlNodeStyle: ['__ref__', 'nodes'],
+ __type__: { object: object, boolean: boolean }
+ },
+ nodes: {
+ borderWidth: { number: number },
+ borderWidthSelected: { number: number, undef: undef },
+ brokenImage: { string: string, undef: undef },
+ color: {
+ border: { string: string },
+ background: { string: string },
+ highlight: {
+ border: { string: string },
+ background: { string: string },
+ __type__: { object: object, string: string }
},
- image: undefined, // --> URL
- label: undefined,
- level: undefined,
- mass: 1,
- physics: true,
- scaling: {
- min: 10,
- max: 30,
- label: {
- enabled: false,
- min: 14,
- max: 30,
- maxVisible: 30,
- drawThreshold: 3
- },
- customScalingFunction: function customScalingFunction(min, max, total, value) {
- if (max === min) {
- return 0.5;
- } else {
- var scale = 1 / (max - min);
- return Math.max(0, (value - min) * scale);
- }
- }
+ hover: {
+ border: { string: string },
+ background: { string: string },
+ __type__: { object: object, string: string }
},
- shadow: {
- enabled: false,
- size: 10,
- x: 5,
- y: 5
+ __type__: { object: object, string: string }
+ },
+ fixed: {
+ x: { boolean: boolean },
+ y: { boolean: boolean },
+ __type__: { object: object, boolean: boolean }
+ },
+ font: {
+ color: { string: string },
+ size: { number: number }, // px
+ face: { string: string },
+ background: { string: string },
+ stroke: { number: number }, // px
+ strokeColor: { string: string },
+ __type__: { object: object, string: string }
+ },
+ group: { string: string, number: number, undef: undef },
+ hidden: { boolean: boolean },
+ icon: {
+ face: { string: string },
+ code: { string: string }, //'\uf007',
+ size: { number: number }, //50,
+ color: { string: string },
+ __type__: { object: object }
+ },
+ id: { string: string, number: number },
+ image: { string: string, undef: undef }, // --> URL
+ label: { string: string, undef: undef },
+ level: { number: number, undef: undef },
+ mass: { number: number },
+ physics: { boolean: boolean },
+ scaling: {
+ min: { number: number },
+ max: { number: number },
+ label: {
+ enabled: { boolean: boolean },
+ min: { number: number },
+ max: { number: number },
+ maxVisible: { number: number },
+ drawThreshold: { number: number },
+ __type__: { object: object, boolean: boolean }
},
- shape: 'ellipse',
- size: 25,
- title: undefined,
- value: undefined,
- x: undefined,
- y: undefined
- };
- util.extend(this.options, this.defaultOptions);
-
- this.bindEventListeners();
- }
-
- _createClass(NodesHandler, [{
- key: 'bindEventListeners',
- value: function bindEventListeners() {
- var _this2 = this;
+ customScalingFunction: { fn: fn },
+ __type__: { object: object }
+ },
+ shadow: {
+ enabled: { boolean: boolean },
+ size: { number: number },
+ x: { number: number },
+ y: { number: number },
+ __type__: { object: object, boolean: boolean }
+ },
+ shape: { string: ['ellipse', 'circle', 'database', 'box', 'text', 'image', 'circularImage', 'diamond', 'dot', 'star', 'triangle', 'triangleDown', 'square', 'icon'] },
+ size: { number: number },
+ title: { string: string, undef: undef },
+ value: { number: number, undef: undef },
+ x: { number: number },
+ y: { number: number },
+ __type__: { object: object }
+ },
+ physics: {
+ barnesHut: {
+ gravitationalConstant: { number: number },
+ centralGravity: { number: number },
+ springLength: { number: number },
+ springConstant: { number: number },
+ damping: { number: number },
+ __type__: { object: object }
+ },
+ repulsion: {
+ centralGravity: { number: number },
+ springLength: { number: number },
+ springConstant: { number: number },
+ nodeDistance: { number: number },
+ damping: { number: number },
+ __type__: { object: object }
+ },
+ hierarchicalRepulsion: {
+ centralGravity: { number: number },
+ springLength: { number: number },
+ springConstant: { number: number },
+ nodeDistance: { number: number },
+ damping: { number: number },
+ __type__: { object: object }
+ },
+ maxVelocity: { number: number },
+ minVelocity: { number: number }, // px/s
+ solver: { string: ['barnesHut', 'repulsion', 'hierarchicalRepulsion'] },
+ stabilization: {
+ enabled: { boolean: boolean },
+ iterations: { number: number }, // maximum number of iteration to stabilize
+ updateInterval: { number: number },
+ onlyDynamicEdges: { boolean: boolean },
+ fit: { boolean: boolean },
+ __type__: { object: object, boolean: boolean }
+ },
+ timestep: { number: number },
+ __type__: { object: object, boolean: boolean }
+ },
+ selection: {
+ select: { boolean: boolean },
+ selectConnectedEdges: { boolean: boolean },
+ __type__: { object: object }
+ },
+ view: {},
+ __type__: { object: object }
+ };
- // refresh the nodes. Used when reverting from hierarchical layout
- this.body.emitter.on('refreshNodes', this.refresh.bind(this));
- this.body.emitter.on('refresh', this.refresh.bind(this));
- this.body.emitter.on('destroy', function () {
- delete _this2.body.functions.createNode;
- delete _this2.nodesListeners.add;
- delete _this2.nodesListeners.update;
- delete _this2.nodesListeners.remove;
- delete _this2.nodesListeners;
- });
- }
- }, {
- key: 'setOptions',
- value: function setOptions(options) {
- if (options !== undefined) {
- _Node2['default'].parseOptions(this.options, options);
+ allOptions.groups.__any__ = allOptions.nodes;
+ allOptions.manipulation.controlNodeStyle = allOptions.nodes;
- // update the shape in all nodes
- if (options.shape !== undefined) {
- for (var nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- this.body.nodes[nodeId].updateShape();
- }
- }
- }
+ exports['default'] = allOptions;
+ module.exports = exports['default'];
- // update the shape size in all nodes
- if (options.font !== undefined) {
- _Label2['default'].parseOptions(this.options.font, options);
- for (var nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- this.body.nodes[nodeId].updateLabelModule();
- this.body.nodes[nodeId]._reset();
- }
- }
- }
+/***/ },
+/* 64 */
+/***/ function(module, exports, __webpack_require__) {
- // update the shape size in all nodes
- if (options.size !== undefined) {
- for (var nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- this.body.nodes[nodeId]._reset();
- }
- }
- }
+ /**
+ * Canvas shapes used by Network
+ */
+ 'use strict';
- // update the state of the letiables if needed
- if (options.hidden !== undefined || options.physics !== undefined) {
- this.body.emitter.emit('_dataChanged');
- }
- }
- }
- }, {
- key: 'setData',
+ if (typeof CanvasRenderingContext2D !== 'undefined') {
- /**
- * Set a data set with nodes for the network
- * @param {Array | DataSet | DataView} nodes The data containing the nodes.
- * @private
- */
- value: function setData(nodes) {
- var _this3 = this;
+ /**
+ * Draw a circle shape
+ */
+ CanvasRenderingContext2D.prototype.circle = function (x, y, r) {
+ this.beginPath();
+ this.arc(x, y, r, 0, 2 * Math.PI, false);
+ };
- var doNotEmit = arguments[1] === undefined ? false : arguments[1];
+ /**
+ * Draw a square shape
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r size, width and height of the square
+ */
+ CanvasRenderingContext2D.prototype.square = function (x, y, r) {
+ this.beginPath();
+ this.rect(x - r, y - r, r * 2, r * 2);
+ };
- var oldNodesData = this.body.data.nodes;
+ /**
+ * Draw a triangle shape
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius, half the length of the sides of the triangle
+ */
+ CanvasRenderingContext2D.prototype.triangle = function (x, y, r) {
+ // http://en.wikipedia.org/wiki/Equilateral_triangle
+ this.beginPath();
- if (nodes instanceof DataSet || nodes instanceof DataView) {
- this.body.data.nodes = nodes;
- } else if (Array.isArray(nodes)) {
- this.body.data.nodes = new DataSet();
- this.body.data.nodes.add(nodes);
- } else if (!nodes) {
- this.body.data.nodes = new DataSet();
- } else {
- throw new TypeError('Array or DataSet expected');
- }
+ // the change in radius and the offset is here to center the shape
+ r *= 1.15;
+ y += 0.275 * r;
- if (oldNodesData) {
- // unsubscribe from old dataset
- util.forEach(this.nodesListeners, function (callback, event) {
- oldNodesData.off(event, callback);
- });
- }
+ var s = r * 2;
+ var s2 = s / 2;
+ var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
+ var h = Math.sqrt(s * s - s2 * s2); // height
- // remove drawn nodes
- this.body.nodes = {};
+ this.moveTo(x, y - (h - ir));
+ this.lineTo(x + s2, y + ir);
+ this.lineTo(x - s2, y + ir);
+ this.lineTo(x, y - (h - ir));
+ this.closePath();
+ };
- if (this.body.data.nodes) {
- (function () {
- // subscribe to new dataset
- var me = _this3;
- util.forEach(_this3.nodesListeners, function (callback, event) {
- me.body.data.nodes.on(event, callback);
- });
+ /**
+ * Draw a triangle shape in downward orientation
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius
+ */
+ CanvasRenderingContext2D.prototype.triangleDown = function (x, y, r) {
+ // http://en.wikipedia.org/wiki/Equilateral_triangle
+ this.beginPath();
- // draw all new nodes
- var ids = _this3.body.data.nodes.getIds();
- _this3.add(ids, true);
- })();
- }
+ // the change in radius and the offset is here to center the shape
+ r *= 1.15;
+ y -= 0.275 * r;
- if (doNotEmit === false) {
- this.body.emitter.emit('_dataChanged');
- }
- }
- }, {
- key: 'add',
+ var s = r * 2;
+ var s2 = s / 2;
+ var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
+ var h = Math.sqrt(s * s - s2 * s2); // height
- /**
- * Add nodes
- * @param {Number[] | String[]} ids
- * @private
- */
- value: function add(ids) {
- var doNotEmit = arguments[1] === undefined ? false : arguments[1];
+ this.moveTo(x, y + (h - ir));
+ this.lineTo(x + s2, y - ir);
+ this.lineTo(x - s2, y - ir);
+ this.lineTo(x, y + (h - ir));
+ this.closePath();
+ };
- var id = undefined;
- var newNodes = [];
- for (var i = 0; i < ids.length; i++) {
- id = ids[i];
- var _properties = this.body.data.nodes.get(id);
- var node = this.create(_properties);;
- newNodes.push(node);
- this.body.nodes[id] = node; // note: this may replace an existing node
- }
+ /**
+ * Draw a star shape, a star with 5 points
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius, half the length of the sides of the triangle
+ */
+ CanvasRenderingContext2D.prototype.star = function (x, y, r) {
+ // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
+ this.beginPath();
- this.layoutEngine.positionInitially(newNodes);
+ // the change in radius and the offset is here to center the shape
+ r *= 0.82;
+ y += 0.1 * r;
- if (doNotEmit === false) {
- this.body.emitter.emit('_dataChanged');
- }
+ for (var n = 0; n < 10; n++) {
+ var radius = n % 2 === 0 ? r * 1.3 : r * 0.5;
+ this.lineTo(x + radius * Math.sin(n * 2 * Math.PI / 10), y - radius * Math.cos(n * 2 * Math.PI / 10));
}
- }, {
- key: 'update',
- /**
- * Update existing nodes, or create them when not yet existing
- * @param {Number[] | String[]} ids
- * @private
- */
- value: function update(ids, changedData) {
- var nodes = this.body.nodes;
- var dataChanged = false;
- for (var i = 0; i < ids.length; i++) {
- var id = ids[i];
- var node = nodes[id];
- var data = changedData[i];
- if (node !== undefined) {
- // update node
- node.setOptions(data, this.constants);
- } else {
- dataChanged = true;
- // create node
- node = this.create(properties);
- nodes[id] = node;
- }
- }
+ this.closePath();
+ };
- if (dataChanged === true) {
- this.body.emitter.emit('_dataChanged');
- } else {
- this.body.emitter.emit('_dataUpdated');
- }
- }
- }, {
- key: 'remove',
+ /**
+ * Draw a Diamond shape
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius, half the length of the sides of the triangle
+ */
+ CanvasRenderingContext2D.prototype.diamond = function (x, y, r) {
+ // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
+ this.beginPath();
- /**
- * Remove existing nodes. If nodes do not exist, the method will just ignore it.
- * @param {Number[] | String[]} ids
- * @private
- */
- value: function remove(ids) {
- var nodes = this.body.nodes;
+ this.lineTo(x, y + r);
+ this.lineTo(x + r, y);
+ this.lineTo(x, y - r);
+ this.lineTo(x - r, y);
- for (var i = 0; i < ids.length; i++) {
- var id = ids[i];
- delete nodes[id];
- }
+ this.closePath();
+ };
- this.body.emitter.emit('_dataChanged');
- }
- }, {
- key: 'create',
+ /**
+ * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
+ */
+ CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
+ var r2d = Math.PI / 180;
+ if (w - 2 * r < 0) {
+ r = w / 2;
+ } //ensure that the radius isn't too large for x
+ if (h - 2 * r < 0) {
+ r = h / 2;
+ } //ensure that the radius isn't too large for y
+ this.beginPath();
+ this.moveTo(x + r, y);
+ this.lineTo(x + w - r, y);
+ this.arc(x + w - r, y + r, r, r2d * 270, r2d * 360, false);
+ this.lineTo(x + w, y + h - r);
+ this.arc(x + w - r, y + h - r, r, 0, r2d * 90, false);
+ this.lineTo(x + r, y + h);
+ this.arc(x + r, y + h - r, r, r2d * 90, r2d * 180, false);
+ this.lineTo(x, y + r);
+ this.arc(x + r, y + r, r, r2d * 180, r2d * 270, false);
+ };
- /**
- * create a node
- * @param properties
- * @param constructorClass
- */
- value: function create(properties) {
- var constructorClass = arguments[1] === undefined ? _Node2['default'] : arguments[1];
+ /**
+ * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+ */
+ CanvasRenderingContext2D.prototype.ellipse = function (x, y, w, h) {
+ var kappa = 0.5522848,
+ ox = w / 2 * kappa,
+ // control point offset horizontal
+ oy = h / 2 * kappa,
+ // control point offset vertical
+ xe = x + w,
+ // x-end
+ ye = y + h,
+ // y-end
+ xm = x + w / 2,
+ // x-middle
+ ym = y + h / 2; // y-middle
- return new constructorClass(properties, this.body, this.images, this.groups, this.options);
- }
- }, {
- key: 'refresh',
- value: function refresh() {
- var nodes = this.body.nodes;
- for (var nodeId in nodes) {
- var node = undefined;
- if (nodes.hasOwnProperty(nodeId)) {
- node = nodes[nodeId];
- }
- var data = this.body.data.nodes._data[nodeId];
- if (node !== undefined && data !== undefined) {
- node.setOptions({ fixed: false });
- node.setOptions(data);
- }
- }
- }
- }, {
- key: 'getPositions',
+ this.beginPath();
+ this.moveTo(x, ym);
+ this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+ this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+ this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+ this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+ };
- /**
- * Returns the positions of the nodes.
- * @param ids --> optional, can be array of nodeIds, can be string
- * @returns {{}}
- */
- value: function getPositions(ids) {
- var dataArray = {};
- if (ids !== undefined) {
- if (Array.isArray(ids) === true) {
- for (var i = 0; i < ids.length; i++) {
- if (this.body.nodes[ids[i]] !== undefined) {
- var node = this.body.nodes[ids[i]];
- dataArray[ids[i]] = { x: Math.round(node.x), y: Math.round(node.y) };
- }
- }
- } else {
- if (this.body.nodes[ids] !== undefined) {
- var node = this.body.nodes[ids];
- dataArray[ids] = { x: Math.round(node.x), y: Math.round(node.y) };
- }
- }
- } else {
- for (var nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- var node = this.body.nodes[nodeId];
- dataArray[nodeId] = { x: Math.round(node.x), y: Math.round(node.y) };
- }
- }
- }
- return dataArray;
- }
- }, {
- key: 'storePositions',
+ /**
+ * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+ */
+ CanvasRenderingContext2D.prototype.database = function (x, y, w, h) {
+ var f = 1 / 3;
+ var wEllipse = w;
+ var hEllipse = h * f;
- /**
- * Load the XY positions of the nodes into the dataset.
- */
- value: function storePositions() {
- // todo: add support for clusters and hierarchical.
- var dataArray = [];
- for (var nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- var node = this.body.nodes[nodeId];
- if (this.body.data.nodes._data[nodeId].x != Math.round(node.x) || this.body.data.nodes._data[nodeId].y != Math.round(node.y)) {
- dataArray.push({ id: nodeId, x: Math.round(node.x), y: Math.round(node.y) });
- }
- }
- }
- this.body.data.nodes.update(dataArray);
- }
- }, {
- key: 'getBoundingBox',
+ var kappa = 0.5522848,
+ ox = wEllipse / 2 * kappa,
+ // control point offset horizontal
+ oy = hEllipse / 2 * kappa,
+ // control point offset vertical
+ xe = x + wEllipse,
+ // x-end
+ ye = y + hEllipse,
+ // y-end
+ xm = x + wEllipse / 2,
+ // x-middle
+ ym = y + hEllipse / 2,
+ // y-middle
+ ymb = y + (h - hEllipse / 2),
+ // y-midlle, bottom ellipse
+ yeb = y + h; // y-end, bottom ellipse
- /**
- * get the bounding box of a node.
- * @param nodeId
- * @returns {j|*}
- */
- value: function getBoundingBox(nodeId) {
- if (this.body.nodes[nodeId] !== undefined) {
- return this.body.nodes[nodeId].shape.boundingBox;
- }
- }
- }, {
- key: 'getConnectedNodes',
+ this.beginPath();
+ this.moveTo(xe, ym);
- /**
- * Get the Ids of nodes connected to this node.
- * @param nodeId
- * @returns {Array}
- */
- value: function getConnectedNodes(nodeId) {
- var nodeList = [];
- if (this.body.nodes[nodeId] !== undefined) {
- var node = this.body.nodes[nodeId];
- var nodeObj = {}; // used to quickly check if node already exists
- for (var i = 0; i < node.edges.length; i++) {
- var edge = node.edges[i];
- if (edge.toId === nodeId) {
- if (nodeObj[edge.fromId] === undefined) {
- nodeList.push(edge.fromId);
- nodeObj[edge.fromId] = true;
- }
- } else if (edge.fromId === nodeId) {
- if (nodeObj[edge.toId] === undefined) {
- nodeList.push(edge.toId);
- nodeObj[edge.toId] = true;
- }
- }
- }
- }
- return nodeList;
- }
- }, {
- key: 'getEdges',
+ this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+ this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
- /**
- * Get the ids of the edges connected to this node.
- * @param nodeId
- * @returns {*}
- */
- value: function getEdges(nodeId) {
- var edgeList = [];
- if (this.body.nodes[nodeId] !== undefined) {
- var node = this.body.nodes[nodeId];
- for (var i = 0; i < node.edges.length; i++) {
- edgeList.push(node.edges[i].id);
- }
- }
- return nodeList;
- }
- }]);
+ this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+ this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
- return NodesHandler;
- })();
+ this.lineTo(xe, ymb);
- exports['default'] = NodesHandler;
- module.exports = exports['default'];
+ this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
+ this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
-/***/ },
-/* 59 */
-/***/ function(module, exports, __webpack_require__) {
+ this.lineTo(x, ym);
+ };
- 'use strict';
+ /**
+ * Draw an arrow point (no line)
+ */
+ CanvasRenderingContext2D.prototype.arrow = function (x, y, angle, length) {
+ // tail
+ var xt = x - length * Math.cos(angle);
+ var yt = y - length * Math.sin(angle);
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
+ // inner tail
+ // TODO: allow to customize different shapes
+ var xi = x - length * 0.9 * Math.cos(angle);
+ var yi = y - length * 0.9 * Math.sin(angle);
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
+ // left
+ var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
+ var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ // right
+ var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
+ var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
+ this.beginPath();
+ this.moveTo(x, y);
+ this.lineTo(xl, yl);
+ this.lineTo(xi, yi);
+ this.lineTo(xr, yr);
+ this.closePath();
+ };
- var _Edge = __webpack_require__(75);
+ /**
+ * Sets up the dashedLine functionality for drawing
+ * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
+ * @author David Jordan
+ * @date 2012-08-08
+ */
+ CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, pattern) {
+ this.beginPath();
+ this.moveTo(x, y);
- var _Edge2 = _interopRequireWildcard(_Edge);
+ var patternLength = pattern.length;
+ var dx = x2 - x;
+ var dy = y2 - y;
+ var slope = dy / dx;
+ var distRemaining = Math.sqrt(dx * dx + dy * dy);
+ var patternIndex = 0;
+ var draw = true;
+ var xStep = 0;
+ var dashLength = pattern[0];
+
+ while (distRemaining >= 0.1) {
+ dashLength = pattern[patternIndex++ % patternLength];
+ if (dashLength > distRemaining) {
+ dashLength = distRemaining;
+ }
- var _Label = __webpack_require__(74);
+ xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
+ xStep = dx < 0 ? -xStep : xStep;
+ x += xStep;
+ y += slope * xStep;
- var _Label2 = _interopRequireWildcard(_Label);
+ if (draw === true) {
+ this.lineTo(x, y);
+ } else {
+ this.moveTo(x, y);
+ }
+
+ distRemaining -= dashLength;
+ draw = !draw;
+ }
+ };
+ }
+
+/***/ },
+/* 65 */
+/***/ function(module, exports, __webpack_require__) {
+
+ 'use strict';
+ var keycharm = __webpack_require__(83);
+ var Emitter = __webpack_require__(42);
+ var Hammer = __webpack_require__(41);
var util = __webpack_require__(1);
- var DataSet = __webpack_require__(3);
- var DataView = __webpack_require__(4);
- var EdgesHandler = (function () {
- function EdgesHandler(body, images, groups) {
- var _this = this;
+ /**
+ * Turn an element into an clickToUse element.
+ * When not active, the element has a transparent overlay. When the overlay is
+ * clicked, the mode is changed to active.
+ * When active, the element is displayed with a blue border around it, and
+ * the interactive contents of the element can be used. When clicked outside
+ * the element, the elements mode is changed to inactive.
+ * @param {Element} container
+ * @constructor
+ */
+ function Activator(container) {
+ this.active = false;
- _classCallCheck(this, EdgesHandler);
+ this.dom = {
+ container: container
+ };
- this.body = body;
- this.images = images;
- this.groups = groups;
+ this.dom.overlay = document.createElement('div');
+ this.dom.overlay.className = 'vis-overlay';
- // create the edge API in the body container
- this.body.functions.createEdge = this.create.bind(this);
+ this.dom.container.appendChild(this.dom.overlay);
- this.edgesListeners = {
- add: function add(event, params) {
- _this.add(params.items);
- },
- update: function update(event, params) {
- _this.update(params.items);
- },
- remove: function remove(event, params) {
- _this.remove(params.items);
- }
- };
+ this.hammer = Hammer(this.dom.overlay);
+ this.hammer.on('tap', this._onTapOverlay.bind(this));
- this.options = {};
- this.defaultOptions = {
- arrows: {
- to: { enabled: false, scaleFactor: 1 }, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
- middle: { enabled: false, scaleFactor: 1 },
- from: { enabled: false, scaleFactor: 1 }
- },
- color: {
- color: '#848484',
- highlight: '#848484',
- hover: '#848484',
- inherit: 'from',
- opacity: 1
- },
- dashes: {
- enabled: false,
- pattern: [5, 5]
- },
- font: {
- color: '#343434',
- size: 14, // px
- face: 'arial',
- background: 'none',
- stroke: 1, // px
- strokeColor: '#ffffff',
- align: 'horizontal'
- },
- hidden: false,
- hoverWidth: 1.5,
- label: undefined,
- length: undefined,
- physics: true,
- scaling: {
- min: 1,
- max: 15,
- label: {
- enabled: true,
- min: 14,
- max: 30,
- maxVisible: 30,
- drawThreshold: 3
- },
- customScalingFunction: function customScalingFunction(min, max, total, value) {
- if (max === min) {
- return 0.5;
- } else {
- var scale = 1 / (max - min);
- return Math.max(0, (value - min) * scale);
- }
- }
- },
- selectionWidth: 1,
- selfReferenceSize: 20,
- shadow: {
- enabled: false,
- size: 10,
- x: 5,
- y: 5
- },
- smooth: {
- enabled: true,
- dynamic: true,
- type: 'continuous',
- roundness: 0.5
- },
- title: undefined,
- width: 1,
- value: undefined
- };
+ // block all touch events (except tap)
+ var me = this;
+ var events = ['tap', 'doubletap', 'press', 'pinch', 'pan', 'panstart', 'panmove', 'panend'];
+ events.forEach(function (event) {
+ me.hammer.on(event, function (event) {
+ event.stopPropagation();
+ });
+ });
- util.extend(this.options, this.defaultOptions);
+ // attach a tap event to the window, in order to deactivate when clicking outside the timeline
+ this.bodyHammer = Hammer(document && document.body, { prevent_default: false });
+ this.bodyHammer.on('tap', function (event) {
+ // deactivate when clicked outside the container
+ if (!_hasParent(event.target, container)) {
+ me.deactivate();
+ }
+ });
- this.bindEventListeners();
+ if (this.keycharm !== undefined) {
+ this.keycharm.destroy();
}
+ this.keycharm = keycharm();
- _createClass(EdgesHandler, [{
- key: 'bindEventListeners',
- value: function bindEventListeners() {
- var _this2 = this;
+ // keycharm listener only bounded when active)
+ this.escListener = this.deactivate.bind(this);
+ }
- // this allows external modules to force all dynamic curves to turn static.
- this.body.emitter.on('_forceDisableDynamicCurves', function (type) {
- var emitChange = false;
- for (var edgeId in _this2.body.edges) {
- if (_this2.body.edges.hasOwnProperty(edgeId)) {
- var edge = _this2.body.edges[edgeId];
- var edgeData = _this2.body.data.edges._data[edgeId];
+ // turn into an event emitter
+ Emitter(Activator.prototype);
- // only forcilby remove the smooth curve if the data has been set of the edge has the smooth curves defined.
- // this is because a change in the global would not affect these curves.
- if (edgeData !== undefined) {
- var edgeOptions = edgeData.smooth;
- if (edgeOptions !== undefined) {
- if (edgeOptions.enabled === true && edgeOptions.dynamic === true) {
- if (type === undefined) {
- edge.setOptions({ smooth: false });
- } else {
- edge.setOptions({ smooth: { dynamic: false, type: type } });
- }
- emitChange = true;
- }
- }
- }
- }
- }
- if (emitChange === true) {
- _this2.body.emitter.emit('_dataChanged');
- }
- });
+ // The currently active activator
+ Activator.current = null;
- // this is called when options of EXISTING nodes or edges have changed.
- this.body.emitter.on('_dataUpdated', function () {
- _this2.reconnectEdges();
- _this2.markAllEdgesAsDirty();
- });
+ /**
+ * Destroy the activator. Cleans up all created DOM and event listeners
+ */
+ Activator.prototype.destroy = function () {
+ this.deactivate();
- // refresh the edges. Used when reverting from hierarchical layout
- this.body.emitter.on('refreshEdges', this.refresh.bind(this));
- this.body.emitter.on('refresh', this.refresh.bind(this));
- this.body.emitter.on('destroy', function () {
- delete _this2.body.functions.createEdge;
- delete _this2.edgesListeners.add;
- delete _this2.edgesListeners.update;
- delete _this2.edgesListeners.remove;
- delete _this2.edgesListeners;
- });
- }
- }, {
- key: 'setOptions',
- value: function setOptions(options) {
- if (options !== undefined) {
- // use the parser from the Edge class to fill in all shorthand notations
- _Edge2['default'].parseOptions(this.options, options);
+ // remove dom
+ this.dom.overlay.parentNode.removeChild(this.dom.overlay);
- // hanlde multiple input cases for color
- if (options.color !== undefined) {
- this.markAllEdgesAsDirty();
- }
+ // cleanup hammer instances
+ this.hammer = null;
+ this.bodyHammer = null;
+ // FIXME: cleaning up hammer instances doesn't work (Timeline not removed from memory)
+ };
- // update smooth settings in all edges
- var dataChanged = false;
- if (options.smooth !== undefined) {
- for (var edgeId in this.body.edges) {
- if (this.body.edges.hasOwnProperty(edgeId)) {
- dataChanged = this.body.edges[edgeId].updateEdgeType() || dataChanged;
- }
- }
- }
+ /**
+ * Activate the element
+ * Overlay is hidden, element is decorated with a blue shadow border
+ */
+ Activator.prototype.activate = function () {
+ // we allow only one active activator at a time
+ if (Activator.current) {
+ Activator.current.deactivate();
+ }
+ Activator.current = this;
- // update fonts in all edges
- if (options.font !== undefined) {
- // use the parser from the Label class to fill in all shorthand notations
- _Label2['default'].parseOptions(this.options, options);
- for (var edgeId in this.body.edges) {
- if (this.body.edges.hasOwnProperty(edgeId)) {
- this.body.edges[edgeId].updateLabelModule();
- }
- }
- }
+ this.active = true;
+ this.dom.overlay.style.display = 'none';
+ util.addClassName(this.dom.container, 'vis-active');
- // update the state of the variables if needed
- if (options.hidden !== undefined || options.physics !== undefined || dataChanged === true) {
- this.body.emitter.emit('_dataChanged');
- }
- }
- }
- }, {
- key: 'setData',
+ this.emit('change');
+ this.emit('activate');
- /**
- * Load edges by reading the data table
- * @param {Array | DataSet | DataView} edges The data containing the edges.
- * @private
- * @private
- */
- value: function setData(edges) {
- var _this3 = this;
+ // ugly hack: bind ESC after emitting the events, as the Network rebinds all
+ // keyboard events on a 'change' event
+ this.keycharm.bind('esc', this.escListener);
+ };
- var doNotEmit = arguments[1] === undefined ? false : arguments[1];
+ /**
+ * Deactivate the element
+ * Overlay is displayed on top of the element
+ */
+ Activator.prototype.deactivate = function () {
+ this.active = false;
+ this.dom.overlay.style.display = '';
+ util.removeClassName(this.dom.container, 'vis-active');
+ this.keycharm.unbind('esc', this.escListener);
- var oldEdgesData = this.body.data.edges;
+ this.emit('change');
+ this.emit('deactivate');
+ };
- if (edges instanceof DataSet || edges instanceof DataView) {
- this.body.data.edges = edges;
- } else if (Array.isArray(edges)) {
- this.body.data.edges = new DataSet();
- this.body.data.edges.add(edges);
- } else if (!edges) {
- this.body.data.edges = new DataSet();
- } else {
- throw new TypeError('Array or DataSet expected');
- }
+ /**
+ * Handle a tap event: activate the container
+ * @param event
+ * @private
+ */
+ Activator.prototype._onTapOverlay = function (event) {
+ // activate the container
+ this.activate();
+ event.stopPropagation();
+ };
- // TODO: is this null or undefined or false?
- if (oldEdgesData) {
- // unsubscribe from old dataset
- util.forEach(this.edgesListeners, function (callback, event) {
- oldEdgesData.off(event, callback);
- });
- }
+ /**
+ * Test whether the element has the requested parent element somewhere in
+ * its chain of parent nodes.
+ * @param {HTMLElement} element
+ * @param {HTMLElement} parent
+ * @returns {boolean} Returns true when the parent is found somewhere in the
+ * chain of parent nodes.
+ * @private
+ */
+ function _hasParent(element, parent) {
+ while (element) {
+ if (element === parent) {
+ return true;
+ }
+ element = element.parentNode;
+ }
+ return false;
+ }
- // remove drawn edges
- this.body.edges = {};
+ module.exports = Activator;
- // TODO: is this null or undefined or false?
- if (this.body.data.edges) {
- // subscribe to new dataset
- util.forEach(this.edgesListeners, function (callback, event) {
- _this3.body.data.edges.on(event, callback);
- });
+/***/ },
+/* 66 */
+/***/ function(module, exports, __webpack_require__) {
- // draw all new nodes
- var ids = this.body.data.edges.getIds();
- this.add(ids, true);
- }
+ /* WEBPACK VAR INJECTION */(function(module) {//! moment.js
+ //! version : 2.10.2
+ //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
+ //! license : MIT
+ //! momentjs.com
- if (doNotEmit === false) {
- this.body.emitter.emit('_dataChanged');
- }
- }
- }, {
- key: 'add',
+ (function (global, factory) {
+ true ? module.exports = factory() :
+ typeof define === 'function' && define.amd ? define(factory) :
+ global.moment = factory()
+ }(this, function () { 'use strict';
- /**
- * Add edges
- * @param {Number[] | String[]} ids
- * @private
- */
- value: function add(ids) {
- var doNotEmit = arguments[1] === undefined ? false : arguments[1];
+ var hookCallback;
- var edges = this.body.edges;
- var edgesData = this.body.data.edges;
+ function utils_hooks__hooks () {
+ return hookCallback.apply(null, arguments);
+ }
- for (var i = 0; i < ids.length; i++) {
- var id = ids[i];
+ // This is done to register the method called with moment()
+ // without creating circular dependencies.
+ function setHookCallback (callback) {
+ hookCallback = callback;
+ }
- var oldEdge = edges[id];
- if (oldEdge) {
- oldEdge.disconnect();
- }
+ function defaultParsingFlags() {
+ // We need to deep clone this object.
+ return {
+ empty : false,
+ unusedTokens : [],
+ unusedInput : [],
+ overflow : -2,
+ charsLeftOver : 0,
+ nullInput : false,
+ invalidMonth : null,
+ invalidFormat : false,
+ userInvalidated : false,
+ iso : false
+ };
+ }
- var data = edgesData.get(id, { showInternalIds: true });
- edges[id] = this.create(data);
- }
+ function isArray(input) {
+ return Object.prototype.toString.call(input) === '[object Array]';
+ }
- if (doNotEmit === false) {
- this.body.emitter.emit('_dataChanged');
- }
+ function isDate(input) {
+ return Object.prototype.toString.call(input) === '[object Date]' || input instanceof Date;
}
- }, {
- key: 'update',
- /**
- * Update existing edges, or create them when not yet existing
- * @param {Number[] | String[]} ids
- * @private
- */
- value: function update(ids) {
- var edges = this.body.edges;
- var edgesData = this.body.data.edges;
- var dataChanged = false;
- for (var i = 0; i < ids.length; i++) {
- var id = ids[i];
- var data = edgesData.get(id);
- var edge = edges[id];
- if (edge === null) {
- // update edge
- edge.disconnect();
- dataChanged = edge.setOptions(data) || dataChanged; // if a support node is added, data can be changed.
- edge.connect();
- } else {
- // create edge
- this.body.edges[id] = this.create(data);
- dataChanged = true;
+ function map(arr, fn) {
+ var res = [], i;
+ for (i = 0; i < arr.length; ++i) {
+ res.push(fn(arr[i], i));
}
- }
+ return res;
+ }
- if (dataChanged === true) {
- this.body.emitter.emit('_dataChanged');
- } else {
- this.body.emitter.emit('_dataUpdated');
- }
+ function hasOwnProp(a, b) {
+ return Object.prototype.hasOwnProperty.call(a, b);
}
- }, {
- key: 'remove',
- /**
- * Remove existing edges. Non existing ids will be ignored
- * @param {Number[] | String[]} ids
- * @private
- */
- value: function remove(ids) {
- var edges = this.body.edges;
- for (var i = 0; i < ids.length; i++) {
- var id = ids[i];
- var edge = edges[id];
- if (edge !== undefined) {
- if (edge.via != null) {
- delete this.body.supportNodes[edge.via.id];
- }
- edge.disconnect();
- delete edges[id];
+ function extend(a, b) {
+ for (var i in b) {
+ if (hasOwnProp(b, i)) {
+ a[i] = b[i];
+ }
}
- }
- this.body.emitter.emit('_dataChanged');
- }
- }, {
- key: 'refresh',
- value: function refresh() {
- var edges = this.body.edges;
- for (var edgeId in edges) {
- var edge = undefined;
- if (edges.hasOwnProperty(edgeId)) {
- edge = edges[edgeId];
+ if (hasOwnProp(b, 'toString')) {
+ a.toString = b.toString;
}
- var data = this.body.data.edges._data[edgeId];
- if (edge !== undefined && data !== undefined) {
- edge.setOptions(data);
+
+ if (hasOwnProp(b, 'valueOf')) {
+ a.valueOf = b.valueOf;
}
- }
- }
- }, {
- key: 'create',
- value: function create(properties) {
- return new _Edge2['default'](properties, this.body, this.options);
+
+ return a;
}
- }, {
- key: 'markAllEdgesAsDirty',
- value: function markAllEdgesAsDirty() {
- for (var edgeId in this.body.edges) {
- this.body.edges[edgeId].edgeType.colorDirty = true;
- }
+
+ function create_utc__createUTC (input, format, locale, strict) {
+ return createLocalOrUTC(input, format, locale, strict, true).utc();
}
- }, {
- key: 'reconnectEdges',
- /**
- * Reconnect all edges
- * @private
- */
- value: function reconnectEdges() {
- var id;
- var nodes = this.body.nodes;
- var edges = this.body.edges;
+ function valid__isValid(m) {
+ if (m._isValid == null) {
+ m._isValid = !isNaN(m._d.getTime()) &&
+ m._pf.overflow < 0 &&
+ !m._pf.empty &&
+ !m._pf.invalidMonth &&
+ !m._pf.nullInput &&
+ !m._pf.invalidFormat &&
+ !m._pf.userInvalidated;
- for (id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- nodes[id].edges = [];
+ if (m._strict) {
+ m._isValid = m._isValid &&
+ m._pf.charsLeftOver === 0 &&
+ m._pf.unusedTokens.length === 0 &&
+ m._pf.bigHour === undefined;
+ }
}
- }
+ return m._isValid;
+ }
- for (id in edges) {
- if (edges.hasOwnProperty(id)) {
- var edge = edges[id];
- edge.from = null;
- edge.to = null;
- edge.connect();
+ function valid__createInvalid (flags) {
+ var m = create_utc__createUTC(NaN);
+ if (flags != null) {
+ extend(m._pf, flags);
+ }
+ else {
+ m._pf.userInvalidated = true;
}
- }
- }
- }]);
- return EdgesHandler;
- })();
+ return m;
+ }
- exports['default'] = EdgesHandler;
- module.exports = exports['default'];
+ var momentProperties = utils_hooks__hooks.momentProperties = [];
-/***/ },
-/* 60 */
-/***/ function(module, exports, __webpack_require__) {
+ function copyConfig(to, from) {
+ var i, prop, val;
- 'use strict';
+ if (typeof from._isAMomentObject !== 'undefined') {
+ to._isAMomentObject = from._isAMomentObject;
+ }
+ if (typeof from._i !== 'undefined') {
+ to._i = from._i;
+ }
+ if (typeof from._f !== 'undefined') {
+ to._f = from._f;
+ }
+ if (typeof from._l !== 'undefined') {
+ to._l = from._l;
+ }
+ if (typeof from._strict !== 'undefined') {
+ to._strict = from._strict;
+ }
+ if (typeof from._tzm !== 'undefined') {
+ to._tzm = from._tzm;
+ }
+ if (typeof from._isUTC !== 'undefined') {
+ to._isUTC = from._isUTC;
+ }
+ if (typeof from._offset !== 'undefined') {
+ to._offset = from._offset;
+ }
+ if (typeof from._pf !== 'undefined') {
+ to._pf = from._pf;
+ }
+ if (typeof from._locale !== 'undefined') {
+ to._locale = from._locale;
+ }
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
+ if (momentProperties.length > 0) {
+ for (i in momentProperties) {
+ prop = momentProperties[i];
+ val = from[prop];
+ if (typeof val !== 'undefined') {
+ to[prop] = val;
+ }
+ }
+ }
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
+ return to;
+ }
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ var updateInProgress = false;
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
+ // Moment prototype object
+ function Moment(config) {
+ copyConfig(this, config);
+ this._d = new Date(+config._d);
+ // Prevent infinite loop in case updateOffset creates new moment
+ // objects.
+ if (updateInProgress === false) {
+ updateInProgress = true;
+ utils_hooks__hooks.updateOffset(this);
+ updateInProgress = false;
+ }
+ }
- var _BarnesHutSolver = __webpack_require__(76);
+ function isMoment (obj) {
+ return obj instanceof Moment || (obj != null && hasOwnProp(obj, '_isAMomentObject'));
+ }
- var _BarnesHutSolver2 = _interopRequireWildcard(_BarnesHutSolver);
+ function toInt(argumentForCoercion) {
+ var coercedNumber = +argumentForCoercion,
+ value = 0;
- var _Repulsion = __webpack_require__(77);
+ if (coercedNumber !== 0 && isFinite(coercedNumber)) {
+ if (coercedNumber >= 0) {
+ value = Math.floor(coercedNumber);
+ } else {
+ value = Math.ceil(coercedNumber);
+ }
+ }
- var _Repulsion2 = _interopRequireWildcard(_Repulsion);
+ return value;
+ }
- var _HierarchicalRepulsion = __webpack_require__(78);
+ function compareArrays(array1, array2, dontConvert) {
+ var len = Math.min(array1.length, array2.length),
+ lengthDiff = Math.abs(array1.length - array2.length),
+ diffs = 0,
+ i;
+ for (i = 0; i < len; i++) {
+ if ((dontConvert && array1[i] !== array2[i]) ||
+ (!dontConvert && toInt(array1[i]) !== toInt(array2[i]))) {
+ diffs++;
+ }
+ }
+ return diffs + lengthDiff;
+ }
- var _HierarchicalRepulsion2 = _interopRequireWildcard(_HierarchicalRepulsion);
+ function Locale() {
+ }
- var _SpringSolver = __webpack_require__(79);
+ var locales = {};
+ var globalLocale;
- var _SpringSolver2 = _interopRequireWildcard(_SpringSolver);
+ function normalizeLocale(key) {
+ return key ? key.toLowerCase().replace('_', '-') : key;
+ }
- var _HierarchicalSpringSolver = __webpack_require__(80);
+ // pick the locale from the array
+ // try ['en-au', 'en-gb'] as 'en-au', 'en-gb', 'en', as in move through the list trying each
+ // substring from most specific to least, but move to the next array item if it's a more specific variant than the current root
+ function chooseLocale(names) {
+ var i = 0, j, next, locale, split;
- var _HierarchicalSpringSolver2 = _interopRequireWildcard(_HierarchicalSpringSolver);
+ while (i < names.length) {
+ split = normalizeLocale(names[i]).split('-');
+ j = split.length;
+ next = normalizeLocale(names[i + 1]);
+ next = next ? next.split('-') : null;
+ while (j > 0) {
+ locale = loadLocale(split.slice(0, j).join('-'));
+ if (locale) {
+ return locale;
+ }
+ if (next && next.length >= j && compareArrays(split, next, true) >= j - 1) {
+ //the next array item is better than a shallower substring of this one
+ break;
+ }
+ j--;
+ }
+ i++;
+ }
+ return null;
+ }
- var _CentralGravitySolver = __webpack_require__(81);
+ function loadLocale(name) {
+ var oldLocale = null;
+ // TODO: Find a better way to register and load all the locales in Node
+ if (!locales[name] && typeof module !== 'undefined' &&
+ module && module.exports) {
+ try {
+ oldLocale = globalLocale._abbr;
+ !(function webpackMissingModule() { var e = new Error("Cannot find module \"./locale\""); e.code = 'MODULE_NOT_FOUND'; throw e; }());
+ // because defineLocale currently also sets the global locale, we
+ // want to undo that for lazy loaded locales
+ locale_locales__getSetGlobalLocale(oldLocale);
+ } catch (e) { }
+ }
+ return locales[name];
+ }
- var _CentralGravitySolver2 = _interopRequireWildcard(_CentralGravitySolver);
-
- var util = __webpack_require__(1);
-
- var PhysicsEngine = (function () {
- function PhysicsEngine(body) {
- _classCallCheck(this, PhysicsEngine);
+ // This function will load locale and then set the global locale. If
+ // no arguments are passed in, it will simply return the current global
+ // locale key.
+ function locale_locales__getSetGlobalLocale (key, values) {
+ var data;
+ if (key) {
+ if (typeof values === 'undefined') {
+ data = locale_locales__getLocale(key);
+ }
+ else {
+ data = defineLocale(key, values);
+ }
- this.body = body;
- this.physicsBody = { physicsNodeIndices: [], physicsEdgeIndices: [], forces: {}, velocities: {} };
+ if (data) {
+ // moment.duration._locale = moment._locale = data;
+ globalLocale = data;
+ }
+ }
- this.physicsEnabled = true;
- this.simulationInterval = 1000 / 60;
- this.requiresTimeout = true;
- this.previousStates = {};
- this.freezeCache = {};
- this.renderTimer = undefined;
+ return globalLocale._abbr;
+ }
- this.stabilized = false;
- this.stabilizationIterations = 0;
- this.ready = false; // will be set to true if the stabilize
+ function defineLocale (name, values) {
+ if (values !== null) {
+ values.abbr = name;
+ if (!locales[name]) {
+ locales[name] = new Locale();
+ }
+ locales[name].set(values);
- // default options
- this.options = {};
- this.defaultOptions = {
- barnesHut: {
- theta: 0.5,
- gravitationalConstant: -2000,
- centralGravity: 0.3,
- springLength: 95,
- springConstant: 0.04,
- damping: 0.09
- },
- repulsion: {
- centralGravity: 0.2,
- springLength: 200,
- springConstant: 0.05,
- nodeDistance: 100,
- damping: 0.09
- },
- hierarchicalRepulsion: {
- centralGravity: 0,
- springLength: 100,
- springConstant: 0.01,
- nodeDistance: 120,
- damping: 0.09
- },
- maxVelocity: 50,
- minVelocity: 0.1, // px/s
- solver: 'barnesHut',
- stabilization: {
- enabled: true,
- iterations: 1000, // maximum number of iteration to stabilize
- updateInterval: 100,
- onlyDynamicEdges: false,
- fit: true
- },
- timestep: 0.5
- };
- util.extend(this.options, this.defaultOptions);
+ // backwards compat for now: also set the locale
+ locale_locales__getSetGlobalLocale(name);
- this.bindEventListeners();
- }
+ return locales[name];
+ } else {
+ // useful for testing
+ delete locales[name];
+ return null;
+ }
+ }
- _createClass(PhysicsEngine, [{
- key: 'bindEventListeners',
- value: function bindEventListeners() {
- var _this = this;
+ // returns locale data
+ function locale_locales__getLocale (key) {
+ var locale;
- this.body.emitter.on('initPhysics', function () {
- _this.initPhysics();
- });
- this.body.emitter.on('resetPhysics', function () {
- _this.stopSimulation();_this.ready = false;
- });
- this.body.emitter.on('disablePhysics', function () {
- _this.physicsEnabled = false;_this.stopSimulation();
- });
- this.body.emitter.on('restorePhysics', function () {
- _this.setOptions(_this.options);
- if (_this.ready === true) {
- _this.startSimulation();
+ if (key && key._locale && key._locale._abbr) {
+ key = key._locale._abbr;
}
- });
- this.body.emitter.on('startSimulation', function () {
- if (_this.ready === true) {
- _this.startSimulation();
+
+ if (!key) {
+ return globalLocale;
}
- });
- this.body.emitter.on('stopSimulation', function () {
- _this.stopSimulation();
- });
- this.body.emitter.on('destroy', function () {
- _this.stopSimulation(false);
- _this.body.emitter.off();
- });
- }
- }, {
- key: 'setOptions',
- value: function setOptions(options) {
- if (options === false) {
- this.physicsEnabled = false;
- this.stopSimulation();
- } else {
- this.physicsEnabled = true;
- if (options !== undefined) {
- util.selectiveNotDeepExtend(['stabilization'], this.options, options);
- util.mergeOptions(this.options, options, 'stabilization');
+
+ if (!isArray(key)) {
+ //short-circuit everything else
+ locale = loadLocale(key);
+ if (locale) {
+ return locale;
+ }
+ key = [key];
}
- this.init();
- }
- }
- }, {
- key: 'init',
- value: function init() {
- var options;
- if (this.options.solver === 'repulsion') {
- options = this.options.repulsion;
- this.nodesSolver = new _Repulsion2['default'](this.body, this.physicsBody, options);
- this.edgesSolver = new _SpringSolver2['default'](this.body, this.physicsBody, options);
- } else if (this.options.solver === 'hierarchicalRepulsion') {
- options = this.options.hierarchicalRepulsion;
- this.nodesSolver = new _HierarchicalRepulsion2['default'](this.body, this.physicsBody, options);
- this.edgesSolver = new _HierarchicalSpringSolver2['default'](this.body, this.physicsBody, options);
- } else {
- // barnesHut
- options = this.options.barnesHut;
- this.nodesSolver = new _BarnesHutSolver2['default'](this.body, this.physicsBody, options);
- this.edgesSolver = new _SpringSolver2['default'](this.body, this.physicsBody, options);
- }
- this.gravitySolver = new _CentralGravitySolver2['default'](this.body, this.physicsBody, options);
- this.modelOptions = options;
+ return chooseLocale(key);
}
- }, {
- key: 'initPhysics',
- value: function initPhysics() {
- if (this.physicsEnabled === true) {
- if (this.options.stabilization.enabled === true) {
- this.stabilize();
- } else {
- this.stabilized = false;
- this.ready = true;
- this.body.emitter.emit('fit', { duration: 0 }, true);
- this.startSimulation();
- }
- } else {
- this.ready = true;
- this.body.emitter.emit('_redraw');
- }
+
+ var aliases = {};
+
+ function addUnitAlias (unit, shorthand) {
+ var lowerCase = unit.toLowerCase();
+ aliases[lowerCase] = aliases[lowerCase + 's'] = aliases[shorthand] = unit;
}
- }, {
- key: 'startSimulation',
- /**
- * Start the simulation
- */
- value: function startSimulation() {
- if (this.physicsEnabled === true) {
- this.stabilized = false;
- if (this.viewFunction === undefined) {
- this.viewFunction = this.simulationStep.bind(this);
- this.body.emitter.on('initRedraw', this.viewFunction);
- this.body.emitter.emit('_startRendering');
- }
- } else {
- this.body.emitter.emit('_redraw');
- }
+ function normalizeUnits(units) {
+ return typeof units === 'string' ? aliases[units] || aliases[units.toLowerCase()] : undefined;
}
- }, {
- key: 'stopSimulation',
- /**
- * Stop the simulation, force stabilization.
- */
- value: function stopSimulation() {
- var emit = arguments[0] === undefined ? true : arguments[0];
+ function normalizeObjectUnits(inputObject) {
+ var normalizedInput = {},
+ normalizedProp,
+ prop;
- this.stabilized = true;
- if (emit === true) {
- this._emitStabilized();
- }
- if (this.viewFunction !== undefined) {
- this.body.emitter.off('initRedraw', this.viewFunction);
- this.viewFunction = undefined;
- if (emit === true) {
- this.body.emitter.emit('_stopRendering');
+ for (prop in inputObject) {
+ if (hasOwnProp(inputObject, prop)) {
+ normalizedProp = normalizeUnits(prop);
+ if (normalizedProp) {
+ normalizedInput[normalizedProp] = inputObject[prop];
+ }
+ }
}
- }
- }
- }, {
- key: 'simulationStep',
-
- /**
- * The viewFunction inserts this step into each renderloop. It calls the physics tick and handles the cleanup at stabilized.
- *
- */
- value: function simulationStep() {
- // check if the physics have settled
- var startTime = Date.now();
- this.physicsTick();
- var physicsTime = Date.now() - startTime;
- // run double speed if it is a little graph
- if ((physicsTime < 0.4 * this.simulationInterval || this.runDoubleSpeed === true) && this.stabilized === false) {
- this.physicsTick();
+ return normalizedInput;
+ }
- // this makes sure there is no jitter. The decision is taken once to run it at double speed.
- this.runDoubleSpeed = true;
- }
+ function makeGetSet (unit, keepTime) {
+ return function (value) {
+ if (value != null) {
+ get_set__set(this, unit, value);
+ utils_hooks__hooks.updateOffset(this, keepTime);
+ return this;
+ } else {
+ return get_set__get(this, unit);
+ }
+ };
+ }
- if (this.stabilized === true) {
- if (this.stabilizationIterations > 1) {
- // trigger the 'stabilized' event.
- // The event is triggered on the next tick, to prevent the case that
- // it is fired while initializing the Network, in which case you would not
- // be able to catch it
- this.stabilizationIterations = 0;
- this.startedStabilization = false;
- this._emitStabilized();
- } else {
- this.stabilizationIterations = 0;
- }
- this.stopSimulation();
- }
+ function get_set__get (mom, unit) {
+ return mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]();
}
- }, {
- key: '_emitStabilized',
- value: function _emitStabilized() {
- var _this2 = this;
- if (this.stabilizationIterations > 1) {
- setTimeout(function () {
- _this2.body.emitter.emit('stabilized', { iterations: _this2.stabilizationIterations });
- }, 0);
- }
+ function get_set__set (mom, unit, value) {
+ return mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
}
- }, {
- key: 'physicsTick',
- /**
- * A single simulation step (or 'tick') in the physics simulation
- *
- * @private
- */
- value: function physicsTick() {
- if (this.stabilized === false) {
- this.calculateForces();
- this.stabilized = this.moveNodes();
+ // MOMENTS
- // determine if the network has stabilzied
- if (this.stabilized === true) {
- this.revert();
+ function getSet (units, value) {
+ var unit;
+ if (typeof units === 'object') {
+ for (unit in units) {
+ this.set(unit, units[unit]);
+ }
} else {
- // this is here to ensure that there is no start event when the network is already stable.
- if (this.startedStabilization === false) {
- this.body.emitter.emit('startStabilizing');
- this.startedStabilization = true;
- }
+ units = normalizeUnits(units);
+ if (typeof this[units] === 'function') {
+ return this[units](value);
+ }
}
-
- this.stabilizationIterations++;
- }
+ return this;
}
- }, {
- key: 'updatePhysicsIndices',
- /**
- * Nodes and edges can have the physics toggles on or off. A collection of indices is created here so we can skip the check all the time.
- *
- * @private
- */
- value: function updatePhysicsIndices() {
- this.physicsBody.forces = {};
- this.physicsBody.physicsNodeIndices = [];
- this.physicsBody.physicsEdgeIndices = [];
- var nodes = this.body.nodes;
- var edges = this.body.edges;
+ function zeroFill(number, targetLength, forceSign) {
+ var output = '' + Math.abs(number),
+ sign = number >= 0;
- // get node indices for physics
- for (var nodeId in nodes) {
- if (nodes.hasOwnProperty(nodeId)) {
- if (nodes[nodeId].options.physics === true) {
- this.physicsBody.physicsNodeIndices.push(nodeId);
- }
+ while (output.length < targetLength) {
+ output = '0' + output;
}
- }
+ return (sign ? (forceSign ? '+' : '') : '-') + output;
+ }
- // get edge indices for physics
- for (var edgeId in edges) {
- if (edges.hasOwnProperty(edgeId)) {
- if (edges[edgeId].options.physics === true) {
- this.physicsBody.physicsEdgeIndices.push(edgeId);
- }
- }
- }
+ var formattingTokens = /(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|Q|YYYYYY|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|mm?|ss?|S{1,4}|x|X|zz?|ZZ?|.)/g;
- // get the velocity and the forces vector
- for (var i = 0; i < this.physicsBody.physicsNodeIndices.length; i++) {
- var nodeId = this.physicsBody.physicsNodeIndices[i];
- this.physicsBody.forces[nodeId] = { x: 0, y: 0 };
+ var localFormattingTokens = /(\[[^\[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})/g;
- // forces can be reset because they are recalculated. Velocities have to persist.
- if (this.physicsBody.velocities[nodeId] === undefined) {
- this.physicsBody.velocities[nodeId] = { x: 0, y: 0 };
+ var formatFunctions = {};
+
+ var formatTokenFunctions = {};
+
+ // token: 'M'
+ // padded: ['MM', 2]
+ // ordinal: 'Mo'
+ // callback: function () { this.month() + 1 }
+ function addFormatToken (token, padded, ordinal, callback) {
+ var func = callback;
+ if (typeof callback === 'string') {
+ func = function () {
+ return this[callback]();
+ };
}
- }
+ if (token) {
+ formatTokenFunctions[token] = func;
+ }
+ if (padded) {
+ formatTokenFunctions[padded[0]] = function () {
+ return zeroFill(func.apply(this, arguments), padded[1], padded[2]);
+ };
+ }
+ if (ordinal) {
+ formatTokenFunctions[ordinal] = function () {
+ return this.localeData().ordinal(func.apply(this, arguments), token);
+ };
+ }
+ }
- // clean deleted nodes from the velocity vector
- for (var nodeId in this.physicsBody.velocities) {
- if (nodes[nodeId] === undefined) {
- delete this.physicsBody.velocities[nodeId];
+ function removeFormattingTokens(input) {
+ if (input.match(/\[[\s\S]/)) {
+ return input.replace(/^\[|\]$/g, '');
}
- }
+ return input.replace(/\\/g, '');
}
- }, {
- key: 'revert',
- /**
- * Revert the simulation one step. This is done so after stabilization, every new start of the simulation will also say stabilized.
- */
- value: function revert() {
- var nodeIds = Object.keys(this.previousStates);
- var nodes = this.body.nodes;
- var velocities = this.physicsBody.velocities;
+ function makeFormatFunction(format) {
+ var array = format.match(formattingTokens), i, length;
- for (var i = 0; i < nodeIds.length; i++) {
- var nodeId = nodeIds[i];
- if (nodes[nodeId] !== undefined) {
- if (nodes[nodeId].options.physics === true) {
- velocities[nodeId].x = this.previousStates[nodeId].vx;
- velocities[nodeId].y = this.previousStates[nodeId].vy;
- nodes[nodeId].x = this.previousStates[nodeId].x;
- nodes[nodeId].y = this.previousStates[nodeId].y;
- }
- } else {
- delete this.previousStates[nodeId];
+ for (i = 0, length = array.length; i < length; i++) {
+ if (formatTokenFunctions[array[i]]) {
+ array[i] = formatTokenFunctions[array[i]];
+ } else {
+ array[i] = removeFormattingTokens(array[i]);
+ }
}
- }
+
+ return function (mom) {
+ var output = '';
+ for (i = 0; i < length; i++) {
+ output += array[i] instanceof Function ? array[i].call(mom, format) : array[i];
+ }
+ return output;
+ };
}
- }, {
- key: 'moveNodes',
- /**
- * move the nodes one timestap and check if they are stabilized
- * @returns {boolean}
- */
- value: function moveNodes() {
- var nodesPresent = false;
- var nodeIndices = this.physicsBody.physicsNodeIndices;
- var maxVelocity = this.options.maxVelocity ? this.options.maxVelocity : 1000000000;
- var stabilized = true;
- var vminCorrected = this.options.minVelocity / Math.max(this.body.view.scale, 0.05);
+ // format date using native date object
+ function formatMoment(m, format) {
+ if (!m.isValid()) {
+ return m.localeData().invalidDate();
+ }
- for (var i = 0; i < nodeIndices.length; i++) {
- var nodeId = nodeIndices[i];
- var nodeVelocity = this._performStep(nodeId, maxVelocity);
- // stabilized is true if stabilized is true and velocity is smaller than vmin --> all nodes must be stabilized
- stabilized = nodeVelocity < vminCorrected && stabilized === true;
- nodesPresent = true;
- }
+ format = expandFormat(format, m.localeData());
- if (nodesPresent === true) {
- if (vminCorrected > 0.5 * this.options.maxVelocity) {
- return false;
- } else {
- return stabilized;
+ if (!formatFunctions[format]) {
+ formatFunctions[format] = makeFormatFunction(format);
}
- }
- return true;
+
+ return formatFunctions[format](m);
}
- }, {
- key: '_performStep',
- /**
- * Perform the actual step
- *
- * @param nodeId
- * @param maxVelocity
- * @returns {number}
- * @private
- */
- value: function _performStep(nodeId, maxVelocity) {
- var node = this.body.nodes[nodeId];
- var timestep = this.options.timestep;
- var forces = this.physicsBody.forces;
- var velocities = this.physicsBody.velocities;
+ function expandFormat(format, locale) {
+ var i = 5;
- // store the state so we can revert
- this.previousStates[nodeId] = { x: node.x, y: node.y, vx: velocities[nodeId].x, vy: velocities[nodeId].y };
+ function replaceLongDateFormatTokens(input) {
+ return locale.longDateFormat(input) || input;
+ }
- if (node.options.fixed.x === false) {
- var dx = this.modelOptions.damping * velocities[nodeId].x; // damping force
- var ax = (forces[nodeId].x - dx) / node.options.mass; // acceleration
- velocities[nodeId].x += ax * timestep; // velocity
- velocities[nodeId].x = Math.abs(velocities[nodeId].x) > maxVelocity ? velocities[nodeId].x > 0 ? maxVelocity : -maxVelocity : velocities[nodeId].x;
- node.x += velocities[nodeId].x * timestep; // position
- } else {
- forces[nodeId].x = 0;
- velocities[nodeId].x = 0;
- }
-
- if (node.options.fixed.y === false) {
- var dy = this.modelOptions.damping * velocities[nodeId].y; // damping force
- var ay = (forces[nodeId].y - dy) / node.options.mass; // acceleration
- velocities[nodeId].y += ay * timestep; // velocity
- velocities[nodeId].y = Math.abs(velocities[nodeId].y) > maxVelocity ? velocities[nodeId].y > 0 ? maxVelocity : -maxVelocity : velocities[nodeId].y;
- node.y += velocities[nodeId].y * timestep; // position
- } else {
- forces[nodeId].y = 0;
- velocities[nodeId].y = 0;
- }
+ localFormattingTokens.lastIndex = 0;
+ while (i >= 0 && localFormattingTokens.test(format)) {
+ format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
+ localFormattingTokens.lastIndex = 0;
+ i -= 1;
+ }
- var totalVelocity = Math.sqrt(Math.pow(velocities[nodeId].x, 2) + Math.pow(velocities[nodeId].y, 2));
- return totalVelocity;
+ return format;
}
- }, {
- key: 'calculateForces',
- /**
- * calculate the forces for one physics iteration.
- */
- value: function calculateForces() {
- this.gravitySolver.solve();
- this.nodesSolver.solve();
- this.edgesSolver.solve();
- }
- }, {
- key: '_freezeNodes',
+ var match1 = /\d/; // 0 - 9
+ var match2 = /\d\d/; // 00 - 99
+ var match3 = /\d{3}/; // 000 - 999
+ var match4 = /\d{4}/; // 0000 - 9999
+ var match6 = /[+-]?\d{6}/; // -999999 - 999999
+ var match1to2 = /\d\d?/; // 0 - 99
+ var match1to3 = /\d{1,3}/; // 0 - 999
+ var match1to4 = /\d{1,4}/; // 0 - 9999
+ var match1to6 = /[+-]?\d{1,6}/; // -999999 - 999999
- /**
- * When initializing and stabilizing, we can freeze nodes with a predefined position. This greatly speeds up stabilization
- * because only the supportnodes for the smoothCurves have to settle.
- *
- * @private
- */
- value: function _freezeNodes() {
- var nodes = this.body.nodes;
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- if (nodes[id].x && nodes[id].y) {
- this.freezeCache[id] = { x: nodes[id].options.fixed.x, y: nodes[id].options.fixed.y };
- nodes[id].options.fixed.x = true;
- nodes[id].options.fixed.y = true;
- }
- }
- }
- }
- }, {
- key: '_restoreFrozenNodes',
+ var matchUnsigned = /\d+/; // 0 - inf
+ var matchSigned = /[+-]?\d+/; // -inf - inf
- /**
- * Unfreezes the nodes that have been frozen by _freezeDefinedNodes.
- *
- * @private
- */
- value: function _restoreFrozenNodes() {
- var nodes = this.body.nodes;
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- if (this.freezeCache[id] !== undefined) {
- nodes[id].options.fixed.x = this.freezeCache[id].x;
- nodes[id].options.fixed.y = this.freezeCache[id].y;
- }
- }
- }
- this.freezeCache = {};
- }
- }, {
- key: 'stabilize',
+ var matchOffset = /Z|[+-]\d\d:?\d\d/gi; // +00:00 -00:00 +0000 -0000 or Z
- /**
- * Find a stable position for all nodes
- * @private
- */
- value: function stabilize() {
- // stop the render loop
- this.stopSimulation();
+ var matchTimestamp = /[+-]?\d+(\.\d{1,3})?/; // 123456789 123456789.123
- // set stabilze to false
- this.stabilized = false;
+ // any word (or two) characters or numbers including two/three word month in arabic.
+ var matchWord = /[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i;
- // block redraw requests
- this.body.emitter.emit('_blockRedrawRequests');
- this.body.emitter.emit('startStabilizing');
- this.startedStabilization = true;
+ var regexes = {};
- // start the stabilization
- if (this.options.stabilization.onlyDynamicEdges === true) {
- this._freezeNodes();
- }
- this.stabilizationIterations = 0;
+ function addRegexToken (token, regex, strictRegex) {
+ regexes[token] = typeof regex === 'function' ? regex : function (isStrict) {
+ return (isStrict && strictRegex) ? strictRegex : regex;
+ };
+ }
- setTimeout(this._stabilizationBatch.bind(this), 0);
+ function getParseRegexForToken (token, config) {
+ if (!hasOwnProp(regexes, token)) {
+ return new RegExp(unescapeFormat(token));
+ }
+
+ return regexes[token](config._strict, config._locale);
}
- }, {
- key: '_stabilizationBatch',
- value: function _stabilizationBatch() {
- var count = 0;
- while (this.stabilized === false && count < this.options.stabilization.updateInterval && this.stabilizationIterations < this.options.stabilization.iterations) {
- this.physicsTick();
- this.stabilizationIterations++;
- count++;
- }
- if (this.stabilized === false && this.stabilizationIterations < this.options.stabilization.iterations) {
- this.body.emitter.emit('stabilizationProgress', { iterations: this.stabilizationIterations, total: this.options.stabilization.iterations });
- setTimeout(this._stabilizationBatch.bind(this), 0);
- } else {
- this._finalizeStabilization();
- }
+ // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
+ function unescapeFormat(s) {
+ return s.replace('\\', '').replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, function (matched, p1, p2, p3, p4) {
+ return p1 || p2 || p3 || p4;
+ }).replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
}
- }, {
- key: '_finalizeStabilization',
- value: function _finalizeStabilization() {
- this.body.emitter.emit('_allowRedrawRequests');
- if (this.options.stabilization.fit === true) {
- this.body.emitter.emit('fit', { duration: 0 });
- }
- if (this.options.stabilization.onlyDynamicEdges === true) {
- this._restoreFrozenNodes();
- }
+ var tokens = {};
- this.body.emitter.emit('stabilizationIterationsDone');
- this.body.emitter.emit('_requestRedraw');
+ function addParseToken (token, callback) {
+ var i, func = callback;
+ if (typeof token === 'string') {
+ token = [token];
+ }
+ if (typeof callback === 'number') {
+ func = function (input, array) {
+ array[callback] = toInt(input);
+ };
+ }
+ for (i = 0; i < token.length; i++) {
+ tokens[token[i]] = func;
+ }
+ }
- this.ready = true;
+ function addWeekParseToken (token, callback) {
+ addParseToken(token, function (input, array, config, token) {
+ config._w = config._w || {};
+ callback(input, config._w, config, token);
+ });
}
- }]);
- return PhysicsEngine;
- })();
+ function addTimeToArrayFromToken(token, input, config) {
+ if (input != null && hasOwnProp(tokens, token)) {
+ tokens[token](input, config._a, config, token);
+ }
+ }
- exports['default'] = PhysicsEngine;
- module.exports = exports['default'];
+ var YEAR = 0;
+ var MONTH = 1;
+ var DATE = 2;
+ var HOUR = 3;
+ var MINUTE = 4;
+ var SECOND = 5;
+ var MILLISECOND = 6;
-/***/ },
-/* 61 */
-/***/ function(module, exports, __webpack_require__) {
+ function daysInMonth(year, month) {
+ return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+ }
- "use strict";
+ // FORMATTING
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { "default": obj }; };
+ addFormatToken('M', ['MM', 2], 'Mo', function () {
+ return this.month() + 1;
+ });
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
+ addFormatToken('MMM', 0, 0, function (format) {
+ return this.localeData().monthsShort(this, format);
+ });
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ addFormatToken('MMMM', 0, 0, function (format) {
+ return this.localeData().months(this, format);
+ });
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
+ // ALIASES
- var _Cluster = __webpack_require__(82);
+ addUnitAlias('month', 'M');
- var _Cluster2 = _interopRequireWildcard(_Cluster);
+ // PARSING
- var util = __webpack_require__(1);
+ addRegexToken('M', match1to2);
+ addRegexToken('MM', match1to2, match2);
+ addRegexToken('MMM', matchWord);
+ addRegexToken('MMMM', matchWord);
- var ClusterEngine = (function () {
- function ClusterEngine(body) {
- _classCallCheck(this, ClusterEngine);
+ addParseToken(['M', 'MM'], function (input, array) {
+ array[MONTH] = toInt(input) - 1;
+ });
- this.body = body;
- this.clusteredNodes = {};
+ addParseToken(['MMM', 'MMMM'], function (input, array, config, token) {
+ var month = config._locale.monthsParse(input, token, config._strict);
+ // if we didn't find a month name, mark the date as invalid.
+ if (month != null) {
+ array[MONTH] = month;
+ } else {
+ config._pf.invalidMonth = input;
+ }
+ });
- this.options = {};
- this.defaultOptions = {};
- util.extend(this.options, this.defaultOptions);
- }
+ // LOCALES
- _createClass(ClusterEngine, [{
- key: "setOptions",
- value: function setOptions(options) {
- if (options !== undefined) {}
+ var defaultLocaleMonths = 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_');
+ function localeMonths (m) {
+ return this._months[m.month()];
}
- }, {
- key: "clusterByHubsize",
- /**
- *
- * @param hubsize
- * @param options
- */
- value: function clusterByHubsize(hubsize, options) {
- if (hubsize === undefined) {
- hubsize = this._getHubSize();
- } else if (tyepof(hubsize) === "object") {
- options = this._checkOptions(hubsize);
- hubsize = this._getHubSize();
- }
+ var defaultLocaleMonthsShort = 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_');
+ function localeMonthsShort (m) {
+ return this._monthsShort[m.month()];
+ }
- var nodesToCluster = [];
- for (var i = 0; i < this.body.nodeIndices.length; i++) {
- var node = this.body.nodes[this.body.nodeIndices[i]];
- if (node.edges.length >= hubsize) {
- nodesToCluster.push(node.id);
+ function localeMonthsParse (monthName, format, strict) {
+ var i, mom, regex;
+
+ if (!this._monthsParse) {
+ this._monthsParse = [];
+ this._longMonthsParse = [];
+ this._shortMonthsParse = [];
}
- }
- for (var i = 0; i < nodesToCluster.length; i++) {
- var node = this.body.nodes[nodesToCluster[i]];
- this.clusterByConnection(node, options, false);
- }
- this.body.emitter.emit("_dataChanged");
+ for (i = 0; i < 12; i++) {
+ // make the regex if we don't have it already
+ mom = create_utc__createUTC([2000, i]);
+ if (strict && !this._longMonthsParse[i]) {
+ this._longMonthsParse[i] = new RegExp('^' + this.months(mom, '').replace('.', '') + '$', 'i');
+ this._shortMonthsParse[i] = new RegExp('^' + this.monthsShort(mom, '').replace('.', '') + '$', 'i');
+ }
+ if (!strict && !this._monthsParse[i]) {
+ regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
+ this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
+ }
+ // test the regex
+ if (strict && format === 'MMMM' && this._longMonthsParse[i].test(monthName)) {
+ return i;
+ } else if (strict && format === 'MMM' && this._shortMonthsParse[i].test(monthName)) {
+ return i;
+ } else if (!strict && this._monthsParse[i].test(monthName)) {
+ return i;
+ }
+ }
}
- }, {
- key: "cluster",
- /**
- * loop over all nodes, check if they adhere to the condition and cluster if needed.
- * @param options
- * @param refreshData
- */
- value: function cluster() {
- var options = arguments[0] === undefined ? {} : arguments[0];
- var refreshData = arguments[1] === undefined ? true : arguments[1];
+ // MOMENTS
- if (options.joinCondition === undefined) {
- throw new Error("Cannot call clusterByNodeData without a joinCondition function in the options.");
- }
+ function setMonth (mom, value) {
+ var dayOfMonth;
- // check if the options object is fine, append if needed
- options = this._checkOptions(options);
+ // TODO: Move this out of here!
+ if (typeof value === 'string') {
+ value = mom.localeData().monthsParse(value);
+ // TODO: Another silent failure?
+ if (typeof value !== 'number') {
+ return mom;
+ }
+ }
- var childNodesObj = {};
- var childEdgesObj = {};
+ dayOfMonth = Math.min(mom.date(), daysInMonth(mom.year(), value));
+ mom._d['set' + (mom._isUTC ? 'UTC' : '') + 'Month'](value, dayOfMonth);
+ return mom;
+ }
- // collect the nodes that will be in the cluster
- for (var i = 0; i < this.body.nodeIndices.length; i++) {
- var nodeId = this.body.nodeIndices[i];
- var clonedOptions = this._cloneOptions(nodeId);
- if (options.joinCondition(clonedOptions) === true) {
- childNodesObj[nodeId] = this.body.nodes[nodeId];
+ function getSetMonth (value) {
+ if (value != null) {
+ setMonth(this, value);
+ utils_hooks__hooks.updateOffset(this, true);
+ return this;
+ } else {
+ return get_set__get(this, 'Month');
}
- }
+ }
- this._cluster(childNodesObj, childEdgesObj, options, refreshData);
+ function getDaysInMonth () {
+ return daysInMonth(this.year(), this.month());
}
- }, {
- key: "clusterOutliers",
- /**
- * Cluster all nodes in the network that have only 1 edge
- * @param options
- * @param refreshData
- */
- value: function clusterOutliers(options) {
- var refreshData = arguments[1] === undefined ? true : arguments[1];
+ function checkOverflow (m) {
+ var overflow;
+ var a = m._a;
- options = this._checkOptions(options);
- var clusters = [];
+ if (a && m._pf.overflow === -2) {
+ overflow =
+ a[MONTH] < 0 || a[MONTH] > 11 ? MONTH :
+ a[DATE] < 1 || a[DATE] > daysInMonth(a[YEAR], a[MONTH]) ? DATE :
+ a[HOUR] < 0 || a[HOUR] > 24 || (a[HOUR] === 24 && (a[MINUTE] !== 0 || a[SECOND] !== 0 || a[MILLISECOND] !== 0)) ? HOUR :
+ a[MINUTE] < 0 || a[MINUTE] > 59 ? MINUTE :
+ a[SECOND] < 0 || a[SECOND] > 59 ? SECOND :
+ a[MILLISECOND] < 0 || a[MILLISECOND] > 999 ? MILLISECOND :
+ -1;
- // collect the nodes that will be in the cluster
- for (var i = 0; i < this.body.nodeIndices.length; i++) {
- var childNodesObj = {};
- var childEdgesObj = {};
- var nodeId = this.body.nodeIndices[i];
- if (this.body.nodes[nodeId].edges.length === 1) {
- var edge = this.body.nodes[nodeId].edges[0];
- var childNodeId = this._getConnectedId(edge, nodeId);
- if (childNodeId != nodeId) {
- if (options.joinCondition === undefined) {
- childNodesObj[nodeId] = this.body.nodes[nodeId];
- childNodesObj[childNodeId] = this.body.nodes[childNodeId];
- } else {
- var clonedOptions = this._cloneOptions(nodeId);
- if (options.joinCondition(clonedOptions) === true) {
- childNodesObj[nodeId] = this.body.nodes[nodeId];
- }
- clonedOptions = this._cloneOptions(childNodeId);
- if (options.joinCondition(clonedOptions) === true) {
- childNodesObj[childNodeId] = this.body.nodes[childNodeId];
- }
+ if (m._pf._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
+ overflow = DATE;
}
- clusters.push({ nodes: childNodesObj, edges: childEdgesObj });
- }
- }
- }
- for (var i = 0; i < clusters.length; i++) {
- this._cluster(clusters[i].nodes, clusters[i].edges, options, false);
- }
+ m._pf.overflow = overflow;
+ }
- if (refreshData === true) {
- this.body.emitter.emit("_dataChanged");
- }
+ return m;
}
- }, {
- key: "clusterByConnection",
- /**
- * suck all connected nodes of a node into the node.
- * @param nodeId
- * @param options
- * @param refreshData
- */
- value: function clusterByConnection(nodeId, options) {
- var refreshData = arguments[2] === undefined ? true : arguments[2];
+ function warn(msg) {
+ if (utils_hooks__hooks.suppressDeprecationWarnings === false && typeof console !== 'undefined' && console.warn) {
+ console.warn('Deprecation warning: ' + msg);
+ }
+ }
- // kill conditions
- if (nodeId === undefined) {
- throw new Error("No nodeId supplied to clusterByConnection!");
- }
- if (this.body.nodes[nodeId] === undefined) {
- throw new Error("The nodeId given to clusterByConnection does not exist!");
- }
+ function deprecate(msg, fn) {
+ var firstTime = true;
+ return extend(function () {
+ if (firstTime) {
+ warn(msg);
+ firstTime = false;
+ }
+ return fn.apply(this, arguments);
+ }, fn);
+ }
- var node = this.body.nodes[nodeId];
- options = this._checkOptions(options, node);
- if (options.clusterNodeProperties.x === undefined) {
- options.clusterNodeProperties.x = node.x;
- }
- if (options.clusterNodeProperties.y === undefined) {
- options.clusterNodeProperties.y = node.y;
- }
- if (options.clusterNodeProperties.fixed === undefined) {
- options.clusterNodeProperties.fixed = {};
- options.clusterNodeProperties.fixed.x = node.options.fixed.x;
- options.clusterNodeProperties.fixed.y = node.options.fixed.y;
- }
+ var deprecations = {};
- var childNodesObj = {};
- var childEdgesObj = {};
- var parentNodeId = node.id;
- var parentClonedOptions = this._cloneOptions(parentNodeId);
- childNodesObj[parentNodeId] = node;
+ function deprecateSimple(name, msg) {
+ if (!deprecations[name]) {
+ warn(msg);
+ deprecations[name] = true;
+ }
+ }
- // collect the nodes that will be in the cluster
- for (var i = 0; i < node.edges.length; i++) {
- var edge = node.edges[i];
- var childNodeId = this._getConnectedId(edge, parentNodeId);
+ utils_hooks__hooks.suppressDeprecationWarnings = false;
- if (childNodeId !== parentNodeId) {
- if (options.joinCondition === undefined) {
- childEdgesObj[edge.id] = edge;
- childNodesObj[childNodeId] = this.body.nodes[childNodeId];
- } else {
- // clone the options and insert some additional parameters that could be interesting.
- var childClonedOptions = this._cloneOptions(childNodeId);
- if (options.joinCondition(parentClonedOptions, childClonedOptions) === true) {
- childEdgesObj[edge.id] = edge;
- childNodesObj[childNodeId] = this.body.nodes[childNodeId];
- }
- }
- } else {
- childEdgesObj[edge.id] = edge;
- }
- }
+ var from_string__isoRegex = /^\s*(?:[+-]\d{6}|\d{4})-(?:(\d\d-\d\d)|(W\d\d$)|(W\d\d-\d)|(\d\d\d))((T| )(\d\d(:\d\d(:\d\d(\.\d+)?)?)?)?([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?$/;
- this._cluster(childNodesObj, childEdgesObj, options, refreshData);
- }
- }, {
- key: "_cloneOptions",
+ var isoDates = [
+ ['YYYYYY-MM-DD', /[+-]\d{6}-\d{2}-\d{2}/],
+ ['YYYY-MM-DD', /\d{4}-\d{2}-\d{2}/],
+ ['GGGG-[W]WW-E', /\d{4}-W\d{2}-\d/],
+ ['GGGG-[W]WW', /\d{4}-W\d{2}/],
+ ['YYYY-DDD', /\d{4}-\d{3}/]
+ ];
- /**
- * This returns a clone of the options or options of the edge or node to be used for construction of new edges or check functions for new nodes.
- * @param objId
- * @param type
- * @returns {{}}
- * @private
- */
- value: function _cloneOptions(objId, type) {
- var clonedOptions = {};
- if (type === undefined || type === "node") {
- util.deepExtend(clonedOptions, this.body.nodes[objId].options, true);
- clonedOptions.x = this.body.nodes[objId].x;
- clonedOptions.y = this.body.nodes[objId].y;
- clonedOptions.amountOfConnections = this.body.nodes[objId].edges.length;
- } else {
- util.deepExtend(clonedOptions, this.body.edges[objId].options, true);
- }
- return clonedOptions;
- }
- }, {
- key: "_createClusterEdges",
-
- /**
- * This function creates the edges that will be attached to the cluster.
- *
- * @param childNodesObj
- * @param childEdgesObj
- * @param newEdges
- * @param options
- * @private
- */
- value: function _createClusterEdges(childNodesObj, childEdgesObj, newEdges, options) {
- var edge = undefined,
- childNodeId = undefined,
- childNode = undefined;
-
- var childKeys = Object.keys(childNodesObj);
- for (var i = 0; i < childKeys.length; i++) {
- childNodeId = childKeys[i];
- childNode = childNodesObj[childNodeId];
+ // iso time formats and regexes
+ var isoTimes = [
+ ['HH:mm:ss.SSSS', /(T| )\d\d:\d\d:\d\d\.\d+/],
+ ['HH:mm:ss', /(T| )\d\d:\d\d:\d\d/],
+ ['HH:mm', /(T| )\d\d:\d\d/],
+ ['HH', /(T| )\d\d/]
+ ];
- // mark all edges for removal from global and construct new edges from the cluster to others
- for (var j = 0; j < childNode.edges.length; j++) {
- edge = childNode.edges[j];
- childEdgesObj[edge.id] = edge;
+ var aspNetJsonRegex = /^\/?Date\((\-?\d+)/i;
- var otherNodeId = edge.toId;
- var otherOnTo = true;
- if (edge.toId != childNodeId) {
- otherNodeId = edge.toId;
- otherOnTo = true;
- } else if (edge.fromId != childNodeId) {
- otherNodeId = edge.fromId;
- otherOnTo = false;
- }
+ // date from iso format
+ function configFromISO(config) {
+ var i, l,
+ string = config._i,
+ match = from_string__isoRegex.exec(string);
- if (childNodesObj[otherNodeId] === undefined) {
- var clonedOptions = this._cloneOptions(edge.id, "edge");
- util.deepExtend(clonedOptions, options.clusterEdgeProperties);
- if (otherOnTo === true) {
- clonedOptions.from = options.clusterNodeProperties.id;
- clonedOptions.to = otherNodeId;
- } else {
- clonedOptions.from = otherNodeId;
- clonedOptions.to = options.clusterNodeProperties.id;
+ if (match) {
+ config._pf.iso = true;
+ for (i = 0, l = isoDates.length; i < l; i++) {
+ if (isoDates[i][1].exec(string)) {
+ // match[5] should be 'T' or undefined
+ config._f = isoDates[i][0] + (match[6] || ' ');
+ break;
+ }
}
- clonedOptions.id = "clusterEdge:" + util.randomUUID();
- newEdges.push(this.body.functions.createEdge(clonedOptions));
- }
+ for (i = 0, l = isoTimes.length; i < l; i++) {
+ if (isoTimes[i][1].exec(string)) {
+ config._f += isoTimes[i][0];
+ break;
+ }
+ }
+ if (string.match(matchOffset)) {
+ config._f += 'Z';
+ }
+ configFromStringAndFormat(config);
+ } else {
+ config._isValid = false;
}
- }
}
- }, {
- key: "_checkOptions",
- /**
- * This function checks the options that can be supplied to the different cluster functions
- * for certain fields and inserts defaults if needed
- * @param options
- * @returns {*}
- * @private
- */
- value: function _checkOptions() {
- var options = arguments[0] === undefined ? {} : arguments[0];
+ // date from iso format or fallback
+ function configFromString(config) {
+ var matched = aspNetJsonRegex.exec(config._i);
- if (options.clusterEdgeProperties === undefined) {
- options.clusterEdgeProperties = {};
- }
- if (options.clusterNodeProperties === undefined) {
- options.clusterNodeProperties = {};
- }
+ if (matched !== null) {
+ config._d = new Date(+matched[1]);
+ return;
+ }
- return options;
+ configFromISO(config);
+ if (config._isValid === false) {
+ delete config._isValid;
+ utils_hooks__hooks.createFromInputFallback(config);
+ }
}
- }, {
- key: "_cluster",
-
- /**
- *
- * @param {Object} childNodesObj | object with node objects, id as keys, same as childNodes except it also contains a source node
- * @param {Object} childEdgesObj | object with edge objects, id as keys
- * @param {Array} options | object with {clusterNodeProperties, clusterEdgeProperties, processProperties}
- * @param {Boolean} refreshData | when true, do not wrap up
- * @private
- */
- value: function _cluster(childNodesObj, childEdgesObj, options) {
- var refreshData = arguments[3] === undefined ? true : arguments[3];
-
- // kill condition: no children so cant cluster
- if (Object.keys(childNodesObj).length === 0) {
- return;
- }
-
- // check if we have an unique id;
- if (options.clusterNodeProperties.id === undefined) {
- options.clusterNodeProperties.id = "cluster:" + util.randomUUID();
- }
- var clusterId = options.clusterNodeProperties.id;
- // construct the clusterNodeProperties
- var clusterNodeProperties = options.clusterNodeProperties;
- if (options.processProperties !== undefined) {
- // get the childNode options
- var childNodesOptions = [];
- for (var nodeId in childNodesObj) {
- var clonedOptions = this._cloneOptions(nodeId);
- childNodesOptions.push(clonedOptions);
+ utils_hooks__hooks.createFromInputFallback = deprecate(
+ 'moment construction falls back to js Date. This is ' +
+ 'discouraged and will be removed in upcoming major ' +
+ 'release. Please refer to ' +
+ 'https://github.com/moment/moment/issues/1407 for more info.',
+ function (config) {
+ config._d = new Date(config._i + (config._useUTC ? ' UTC' : ''));
}
+ );
- // get clusterproperties based on childNodes
- var childEdgesOptions = [];
- for (var edgeId in childEdgesObj) {
- var clonedOptions = this._cloneOptions(edgeId, "edge");
- childEdgesOptions.push(clonedOptions);
- }
+ function createDate (y, m, d, h, M, s, ms) {
+ //can't just apply() to create a date:
+ //http://stackoverflow.com/questions/181348/instantiating-a-javascript-object-by-calling-prototype-constructor-apply
+ var date = new Date(y, m, d, h, M, s, ms);
- clusterNodeProperties = options.processProperties(clusterNodeProperties, childNodesOptions, childEdgesOptions);
- if (!clusterNodeProperties) {
- throw new Error("The processClusterProperties function does not return properties!");
+ //the date constructor doesn't accept years < 1970
+ if (y < 1970) {
+ date.setFullYear(y);
}
- }
- if (clusterNodeProperties.label === undefined) {
- clusterNodeProperties.label = "cluster";
- }
+ return date;
+ }
- // give the clusterNode a postion if it does not have one.
- var pos = undefined;
- if (clusterNodeProperties.x === undefined) {
- pos = this._getClusterPosition(childNodesObj);
- clusterNodeProperties.x = pos.x;
- }
- if (clusterNodeProperties.y === undefined) {
- if (pos === undefined) {
- pos = this._getClusterPosition(childNodesObj);
+ function createUTCDate (y) {
+ var date = new Date(Date.UTC.apply(null, arguments));
+ if (y < 1970) {
+ date.setUTCFullYear(y);
}
- clusterNodeProperties.y = pos.y;
- }
+ return date;
+ }
- // force the ID to remain the same
- clusterNodeProperties.id = clusterId;
+ addFormatToken(0, ['YY', 2], 0, function () {
+ return this.year() % 100;
+ });
- // create the clusterNode
- var clusterNode = this.body.functions.createNode(clusterNodeProperties, _Cluster2["default"]);
- clusterNode.isCluster = true;
- clusterNode.containedNodes = childNodesObj;
- clusterNode.containedEdges = childEdgesObj;
+ addFormatToken(0, ['YYYY', 4], 0, 'year');
+ addFormatToken(0, ['YYYYY', 5], 0, 'year');
+ addFormatToken(0, ['YYYYYY', 6, true], 0, 'year');
- // finally put the cluster node into global
- this.body.nodes[clusterNodeProperties.id] = clusterNode;
+ // ALIASES
- // create the new edges that will connect to the cluster
- var newEdges = [];
- this._createClusterEdges(childNodesObj, childEdgesObj, newEdges, options);
+ addUnitAlias('year', 'y');
- // disable the childEdges
- for (var edgeId in childEdgesObj) {
- if (childEdgesObj.hasOwnProperty(edgeId)) {
- if (this.body.edges[edgeId] !== undefined) {
- var edge = this.body.edges[edgeId];
- edge.togglePhysics(false);
- edge.options.hidden = true;
- }
- }
- }
+ // PARSING
- // disable the childNodes
- for (var nodeId in childNodesObj) {
- if (childNodesObj.hasOwnProperty(nodeId)) {
- this.clusteredNodes[nodeId] = { clusterId: clusterNodeProperties.id, node: this.body.nodes[nodeId] };
- this.body.nodes[nodeId].togglePhysics(false);
- this.body.nodes[nodeId].options.hidden = true;
- }
- }
+ addRegexToken('Y', matchSigned);
+ addRegexToken('YY', match1to2, match2);
+ addRegexToken('YYYY', match1to4, match4);
+ addRegexToken('YYYYY', match1to6, match6);
+ addRegexToken('YYYYYY', match1to6, match6);
- // push new edges to global
- for (var i = 0; i < newEdges.length; i++) {
- this.body.edges[newEdges[i].id] = newEdges[i];
- this.body.edges[newEdges[i].id].connect();
- }
+ addParseToken(['YYYY', 'YYYYY', 'YYYYYY'], YEAR);
+ addParseToken('YY', function (input, array) {
+ array[YEAR] = utils_hooks__hooks.parseTwoDigitYear(input);
+ });
- // set ID to undefined so no duplicates arise
- clusterNodeProperties.id = undefined;
+ // HELPERS
- // wrap up
- if (refreshData === true) {
- this.body.emitter.emit("_dataChanged");
- }
+ function daysInYear(year) {
+ return isLeapYear(year) ? 366 : 365;
}
- }, {
- key: "isCluster",
- /**
- * Check if a node is a cluster.
- * @param nodeId
- * @returns {*}
- */
- value: function isCluster(nodeId) {
- if (this.body.nodes[nodeId] !== undefined) {
- return this.body.nodes[nodeId].isCluster === true;
- } else {
- console.log("Node does not exist.");
- return false;
- }
+ function isLeapYear(year) {
+ return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}
- }, {
- key: "_getClusterPosition",
- /**
- * get the position of the cluster node based on what's inside
- * @param {object} childNodesObj | object with node objects, id as keys
- * @returns {{x: number, y: number}}
- * @private
- */
- value: function _getClusterPosition(childNodesObj) {
- var childKeys = Object.keys(childNodesObj);
- var minX = childNodesObj[childKeys[0]].x;
- var maxX = childNodesObj[childKeys[0]].x;
- var minY = childNodesObj[childKeys[0]].y;
- var maxY = childNodesObj[childKeys[0]].y;
- var node = undefined;
- for (var i = 0; i < childKeys.lenght; i++) {
- node = childNodesObj[childKeys[0]];
- minX = node.x < minX ? node.x : minX;
- maxX = node.x > maxX ? node.x : maxX;
- minY = node.y < minY ? node.y : minY;
- maxY = node.y > maxY ? node.y : maxY;
- }
- return { x: 0.5 * (minX + maxX), y: 0.5 * (minY + maxY) };
+ // HOOKS
+
+ utils_hooks__hooks.parseTwoDigitYear = function (input) {
+ return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
+ };
+
+ // MOMENTS
+
+ var getSetYear = makeGetSet('FullYear', false);
+
+ function getIsLeapYear () {
+ return isLeapYear(this.year());
}
- }, {
- key: "openCluster",
- /**
- * Open a cluster by calling this function.
- * @param {String} clusterNodeId | the ID of the cluster node
- * @param {Boolean} refreshData | wrap up afterwards if not true
- */
- value: function openCluster(clusterNodeId) {
- var refreshData = arguments[1] === undefined ? true : arguments[1];
+ addFormatToken('w', ['ww', 2], 'wo', 'week');
+ addFormatToken('W', ['WW', 2], 'Wo', 'isoWeek');
- // kill conditions
- if (clusterNodeId === undefined) {
- throw new Error("No clusterNodeId supplied to openCluster.");
- }
- if (this.body.nodes[clusterNodeId] === undefined) {
- throw new Error("The clusterNodeId supplied to openCluster does not exist.");
- }
- if (this.body.nodes[clusterNodeId].containedNodes === undefined) {
- console.log("The node:" + clusterNodeId + " is not a cluster.");return;
- };
+ // ALIASES
- var clusterNode = this.body.nodes[clusterNodeId];
- var containedNodes = clusterNode.containedNodes;
- var containedEdges = clusterNode.containedEdges;
+ addUnitAlias('week', 'w');
+ addUnitAlias('isoWeek', 'W');
- // release nodes
- for (var nodeId in containedNodes) {
- if (containedNodes.hasOwnProperty(nodeId)) {
- var containedNode = this.body.nodes[nodeId];
- containedNode = containedNodes[nodeId];
- // inherit position
- containedNode.x = clusterNode.x;
- containedNode.y = clusterNode.y;
+ // PARSING
- // inherit speed
- containedNode.vx = clusterNode.vx;
- containedNode.vy = clusterNode.vy;
+ addRegexToken('w', match1to2);
+ addRegexToken('ww', match1to2, match2);
+ addRegexToken('W', match1to2);
+ addRegexToken('WW', match1to2, match2);
- containedNode.options.hidden = false;
- containedNode.togglePhysics(true);
+ addWeekParseToken(['w', 'ww', 'W', 'WW'], function (input, week, config, token) {
+ week[token.substr(0, 1)] = toInt(input);
+ });
- delete this.clusteredNodes[nodeId];
+ // HELPERS
+
+ // firstDayOfWeek 0 = sun, 6 = sat
+ // the day of the week that starts the week
+ // (usually sunday or monday)
+ // firstDayOfWeekOfYear 0 = sun, 6 = sat
+ // the first week is the week that contains the first
+ // of this day of the week
+ // (eg. ISO weeks use thursday (4))
+ function weekOfYear(mom, firstDayOfWeek, firstDayOfWeekOfYear) {
+ var end = firstDayOfWeekOfYear - firstDayOfWeek,
+ daysToDayOfWeek = firstDayOfWeekOfYear - mom.day(),
+ adjustedMoment;
+
+
+ if (daysToDayOfWeek > end) {
+ daysToDayOfWeek -= 7;
}
- }
- // release edges
- for (var edgeId in containedEdges) {
- if (containedEdges.hasOwnProperty(edgeId)) {
- var edge = this.body.edges[edgeId];
- edge.options.hidden = false;
- edge.togglePhysics(true);
+ if (daysToDayOfWeek < end - 7) {
+ daysToDayOfWeek += 7;
}
- }
- // remove all temporary edges
- for (var i = 0; i < clusterNode.edges.length; i++) {
- var edgeId = clusterNode.edges[i].id;
- this.body.edges[edgeId].edgeType.cleanup();
- // this removes the edge from node.edges, which is why edgeIds is formed
- this.body.edges[edgeId].disconnect();
- delete this.body.edges[edgeId];
- }
+ adjustedMoment = local__createLocal(mom).add(daysToDayOfWeek, 'd');
+ return {
+ week: Math.ceil(adjustedMoment.dayOfYear() / 7),
+ year: adjustedMoment.year()
+ };
+ }
- // remove clusterNode
- delete this.body.nodes[clusterNodeId];
+ // LOCALES
- if (refreshData === true) {
- this.body.emitter.emit("_dataChanged");
- }
+ function localeWeek (mom) {
+ return weekOfYear(mom, this._week.dow, this._week.doy).week;
}
- }, {
- key: "_connectEdge",
- /**
- * Connect an edge that was previously contained from cluster A to cluster B if the node that it was originally connected to
- * is currently residing in cluster B
- * @param edge
- * @param nodeId
- * @param from
- * @private
- */
- value: function _connectEdge(edge, nodeId, from) {
- var clusterStack = this.findNode(nodeId);
- if (from === true) {
- edge.from = clusterStack[clusterStack.length - 1];
- edge.fromId = clusterStack[clusterStack.length - 1].id;
- clusterStack.pop();
- edge.fromArray = clusterStack;
- } else {
- edge.to = clusterStack[clusterStack.length - 1];
- edge.toId = clusterStack[clusterStack.length - 1].id;
- clusterStack.pop();
- edge.toArray = clusterStack;
- }
- edge.connect();
+ var defaultLocaleWeek = {
+ dow : 0, // Sunday is the first day of the week.
+ doy : 6 // The week that contains Jan 1st is the first week of the year.
+ };
+
+ function localeFirstDayOfWeek () {
+ return this._week.dow;
}
- }, {
- key: "findNode",
- /**
- * Get the stack clusterId's that a certain node resides in. cluster A -> cluster B -> cluster C -> node
- * @param nodeId
- * @returns {Array}
- * @private
- */
- value: function findNode(nodeId) {
- var stack = [];
- var max = 100;
- var counter = 0;
+ function localeFirstDayOfYear () {
+ return this._week.doy;
+ }
- while (this.clusteredNodes[nodeId] !== undefined && counter < max) {
- stack.push(this.clusteredNodes[nodeId].node);
- nodeId = this.clusteredNodes[nodeId].clusterId;
- counter++;
- }
- stack.push(this.body.nodes[nodeId]);
- return stack;
+ // MOMENTS
+
+ function getSetWeek (input) {
+ var week = this.localeData().week(this);
+ return input == null ? week : this.add((input - week) * 7, 'd');
}
- }, {
- key: "_getConnectedId",
- /**
- * Get the Id the node is connected to
- * @param edge
- * @param nodeId
- * @returns {*}
- * @private
- */
- value: function _getConnectedId(edge, nodeId) {
- if (edge.toId != nodeId) {
- return edge.toId;
- } else if (edge.fromId != nodeId) {
- return edge.fromId;
- } else {
- return edge.fromId;
- }
+ function getSetISOWeek (input) {
+ var week = weekOfYear(this, 1, 4).week;
+ return input == null ? week : this.add((input - week) * 7, 'd');
}
- }, {
- key: "_getHubSize",
- /**
- * We determine how many connections denote an important hub.
- * We take the mean + 2*std as the important hub size. (Assuming a normal distribution of data, ~2.2%)
- *
- * @private
- */
- value: function _getHubSize() {
- var average = 0;
- var averageSquared = 0;
- var hubCounter = 0;
- var largestHub = 0;
+ addFormatToken('DDD', ['DDDD', 3], 'DDDo', 'dayOfYear');
- for (var i = 0; i < this.body.nodeIndices.length; i++) {
- var node = this.body.nodes[this.body.nodeIndices[i]];
- if (node.edges.length > largestHub) {
- largestHub = node.edges.length;
- }
- average += node.edges.length;
- averageSquared += Math.pow(node.edges.length, 2);
- hubCounter += 1;
- }
- average = average / hubCounter;
- averageSquared = averageSquared / hubCounter;
-
- var letiance = averageSquared - Math.pow(average, 2);
- var standardDeviation = Math.sqrt(letiance);
+ // ALIASES
- var hubThreshold = Math.floor(average + 2 * standardDeviation);
+ addUnitAlias('dayOfYear', 'DDD');
- // always have at least one to cluster
- if (hubThreshold > largestHub) {
- hubThreshold = largestHub;
- }
+ // PARSING
- return hubThreshold;
- }
- }]);
+ addRegexToken('DDD', match1to3);
+ addRegexToken('DDDD', match3);
+ addParseToken(['DDD', 'DDDD'], function (input, array, config) {
+ config._dayOfYear = toInt(input);
+ });
- return ClusterEngine;
- })();
+ // HELPERS
- exports["default"] = ClusterEngine;
- module.exports = exports["default"];
+ //http://en.wikipedia.org/wiki/ISO_week_date#Calculating_a_date_given_the_year.2C_week_number_and_weekday
+ function dayOfYearFromWeeks(year, week, weekday, firstDayOfWeekOfYear, firstDayOfWeek) {
+ var d = createUTCDate(year, 0, 1).getUTCDay();
+ var daysToAdd;
+ var dayOfYear;
-/***/ },
-/* 62 */
-/***/ function(module, exports, __webpack_require__) {
+ d = d === 0 ? 7 : d;
+ weekday = weekday != null ? weekday : firstDayOfWeek;
+ daysToAdd = firstDayOfWeek - d + (d > firstDayOfWeekOfYear ? 7 : 0) - (d < firstDayOfWeek ? 7 : 0);
+ dayOfYear = 7 * (week - 1) + (weekday - firstDayOfWeek) + daysToAdd + 1;
- 'use strict';
+ return {
+ year : dayOfYear > 0 ? year : year - 1,
+ dayOfYear : dayOfYear > 0 ? dayOfYear : daysInYear(year - 1) + dayOfYear
+ };
+ }
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
+ // MOMENTS
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ function getSetDayOfYear (input) {
+ var dayOfYear = Math.round((this.clone().startOf('day') - this.clone().startOf('year')) / 864e5) + 1;
+ return input == null ? dayOfYear : this.add((input - dayOfYear), 'd');
+ }
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
- if (typeof window !== 'undefined') {
- window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
- }
+ // Pick the first defined of two or three arguments.
+ function defaults(a, b, c) {
+ if (a != null) {
+ return a;
+ }
+ if (b != null) {
+ return b;
+ }
+ return c;
+ }
- var util = __webpack_require__(1);
+ function currentDateArray(config) {
+ var now = new Date();
+ if (config._useUTC) {
+ return [now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()];
+ }
+ return [now.getFullYear(), now.getMonth(), now.getDate()];
+ }
- var CanvasRenderer = (function () {
- function CanvasRenderer(body, canvas) {
- _classCallCheck(this, CanvasRenderer);
+ // convert an array to a date.
+ // the array should mirror the parameters below
+ // note: all values past the year are optional and will default to the lowest possible value.
+ // [year, month, day , hour, minute, second, millisecond]
+ function configFromArray (config) {
+ var i, date, input = [], currentDate, yearToUse;
- this.body = body;
- this.canvas = canvas;
+ if (config._d) {
+ return;
+ }
- this.redrawRequested = false;
- this.renderTimer = false;
- this.requiresTimeout = true;
- this.renderingActive = false;
- this.renderRequests = 0;
- this.pixelRatio = undefined;
- this.allowRedrawRequests = true;
+ currentDate = currentDateArray(config);
- this.dragging = false;
- this.options = {};
- this.defaultOptions = {
- hideEdgesOnDrag: false,
- hideNodesOnDrag: false
- };
- util.extend(this.options, this.defaultOptions);
+ //compute day of the year from weeks and weekdays
+ if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
+ dayOfYearFromWeekInfo(config);
+ }
- this._determineBrowserMethod();
- this.bindEventListeners();
- }
+ //if the day of the year is set, figure out what it is
+ if (config._dayOfYear) {
+ yearToUse = defaults(config._a[YEAR], currentDate[YEAR]);
- _createClass(CanvasRenderer, [{
- key: 'bindEventListeners',
- value: function bindEventListeners() {
- var _this = this;
+ if (config._dayOfYear > daysInYear(yearToUse)) {
+ config._pf._overflowDayOfYear = true;
+ }
- this.body.emitter.on('dragStart', function () {
- _this.dragging = true;
- });
- this.body.emitter.on('dragEnd', function () {
- return _this.dragging = false;
- });
- this.body.emitter.on('_redraw', function () {
- if (_this.renderingActive === false) {
- _this._redraw();
+ date = createUTCDate(yearToUse, 0, config._dayOfYear);
+ config._a[MONTH] = date.getUTCMonth();
+ config._a[DATE] = date.getUTCDate();
}
- });
- this.body.emitter.on('_blockRedrawRequests', function () {
- _this.allowRedrawRequests = false;
- });
- this.body.emitter.on('_allowRedrawRequests', function () {
- _this.allowRedrawRequests = true;
- });
- this.body.emitter.on('_requestRedraw', this._requestRedraw.bind(this));
- this.body.emitter.on('_startRendering', function () {
- _this.renderRequests += 1;
- _this.renderingActive = true;
- _this._startRendering();
- });
- this.body.emitter.on('_stopRendering', function () {
- _this.renderRequests -= 1;
- _this.renderingActive = _this.renderRequests > 0;
- });
- this.body.emitter.on('destroy', function () {
- _this.renderRequests = 0;
- _this.renderingActive = false;
- if (_this.requiresTimeout === true) {
- clearTimeout(_this.renderTimer);
- } else {
- cancelAnimationFrame(_this.renderTimer);
+
+ // Default to current date.
+ // * if no year, month, day of month are given, default to today
+ // * if day of month is given, default month and year
+ // * if month is given, default only year
+ // * if year is given, don't default anything
+ for (i = 0; i < 3 && config._a[i] == null; ++i) {
+ config._a[i] = input[i] = currentDate[i];
}
- _this.body.emitter.off();
- });
- }
- }, {
- key: 'setOptions',
- value: function setOptions(options) {
- if (options !== undefined) {
- util.deepExtend(this.options, options);
- }
- }
- }, {
- key: '_startRendering',
- value: function _startRendering() {
- if (this.renderingActive === true) {
- if (!this.renderTimer) {
- if (this.requiresTimeout === true) {
- this.renderTimer = window.setTimeout(this._renderStep.bind(this), this.simulationInterval); // wait this.renderTimeStep milliseconds and perform the animation step function
- } else {
- this.renderTimer = window.requestAnimationFrame(this._renderStep.bind(this)); // wait this.renderTimeStep milliseconds and perform the animation step function
- }
+
+ // Zero out whatever was not defaulted, including time
+ for (; i < 7; i++) {
+ config._a[i] = input[i] = (config._a[i] == null) ? (i === 2 ? 1 : 0) : config._a[i];
}
- }
- }
- }, {
- key: '_renderStep',
- value: function _renderStep() {
- if (this.renderingActive === true) {
- // reset the renderTimer so a new scheduled animation step can be set
- this.renderTimer = undefined;
- if (this.requiresTimeout === true) {
- // this schedules a new simulation step
- this._startRendering();
+ // Check for 24:00:00.000
+ if (config._a[HOUR] === 24 &&
+ config._a[MINUTE] === 0 &&
+ config._a[SECOND] === 0 &&
+ config._a[MILLISECOND] === 0) {
+ config._nextDay = true;
+ config._a[HOUR] = 0;
}
- this._redraw();
+ config._d = (config._useUTC ? createUTCDate : createDate).apply(null, input);
+ // Apply timezone offset from input. The actual utcOffset can be changed
+ // with parseZone.
+ if (config._tzm != null) {
+ config._d.setUTCMinutes(config._d.getUTCMinutes() - config._tzm);
+ }
- if (this.requiresTimeout === false) {
- // this schedules a new simulation step
- this._startRendering();
+ if (config._nextDay) {
+ config._a[HOUR] = 24;
}
- }
}
- }, {
- key: 'redraw',
- /**
- * Redraw the network with the current data
- * chart will be resized too.
- */
- value: function redraw() {
- this._redraw();
- }
- }, {
- key: '_requestRedraw',
+ function dayOfYearFromWeekInfo(config) {
+ var w, weekYear, week, weekday, dow, doy, temp;
- /**
- * Redraw the network with the current data
- * @param hidden | used to get the first estimate of the node sizes. only the nodes are drawn after which they are quickly drawn over.
- * @private
- */
- value: function _requestRedraw() {
- if (this.redrawRequested !== true && this.renderingActive === false && this.allowRedrawRequests === true) {
- this.redrawRequested = true;
- if (this.requiresTimeout === true) {
- window.setTimeout(this._redraw.bind(this, false), 0);
+ w = config._w;
+ if (w.GG != null || w.W != null || w.E != null) {
+ dow = 1;
+ doy = 4;
+
+ // TODO: We need to take the current isoWeekYear, but that depends on
+ // how we interpret now (local, utc, fixed offset). So create
+ // a now version of current config (take local/utc/offset flags, and
+ // create now).
+ weekYear = defaults(w.GG, config._a[YEAR], weekOfYear(local__createLocal(), 1, 4).year);
+ week = defaults(w.W, 1);
+ weekday = defaults(w.E, 1);
} else {
- window.requestAnimationFrame(this._redraw.bind(this, false));
- }
- }
- }
- }, {
- key: '_redraw',
- value: function _redraw() {
- var hidden = arguments[0] === undefined ? false : arguments[0];
+ dow = config._locale._week.dow;
+ doy = config._locale._week.doy;
- this.body.emitter.emit('initRedraw');
+ weekYear = defaults(w.gg, config._a[YEAR], weekOfYear(local__createLocal(), dow, doy).year);
+ week = defaults(w.w, 1);
- this.redrawRequested = false;
- var ctx = this.canvas.frame.canvas.getContext('2d');
+ if (w.d != null) {
+ // weekday -- low day numbers are considered next week
+ weekday = w.d;
+ if (weekday < dow) {
+ ++week;
+ }
+ } else if (w.e != null) {
+ // local weekday -- counting starts from begining of week
+ weekday = w.e + dow;
+ } else {
+ // default to begining of week
+ weekday = dow;
+ }
+ }
+ temp = dayOfYearFromWeeks(weekYear, week, weekday, doy, dow);
- // when the container div was hidden, this fixes it back up!
- if (this.canvas.frame.canvas.width === 0 || this.canvas.frame.canvas.height === 0) {
- this.canvas.setSize();
- }
+ config._a[YEAR] = temp.year;
+ config._dayOfYear = temp.dayOfYear;
+ }
- if (this.pixelRation === undefined) {
- this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
- }
+ utils_hooks__hooks.ISO_8601 = function () {};
- ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+ // date from string and format string
+ function configFromStringAndFormat(config) {
+ // TODO: Move this to another part of the creation flow to prevent circular deps
+ if (config._f === utils_hooks__hooks.ISO_8601) {
+ configFromISO(config);
+ return;
+ }
- // clear the canvas
- var w = this.canvas.frame.canvas.clientWidth;
- var h = this.canvas.frame.canvas.clientHeight;
- ctx.clearRect(0, 0, w, h);
+ config._a = [];
+ config._pf.empty = true;
- this.body.emitter.emit('beforeDrawing', ctx);
+ // This array is used to make a Date, either with `new Date` or `Date.UTC`
+ var string = '' + config._i,
+ i, parsedInput, tokens, token, skipped,
+ stringLength = string.length,
+ totalParsedInputLength = 0;
- // set scaling and translation
- ctx.save();
- ctx.translate(this.body.view.translation.x, this.body.view.translation.y);
- ctx.scale(this.body.view.scale, this.body.view.scale);
+ tokens = expandFormat(config._f, config._locale).match(formattingTokens) || [];
- if (hidden === false) {
- if (this.dragging === false || this.dragging === true && this.options.hideEdgesOnDrag === false) {
- this._drawEdges(ctx);
+ for (i = 0; i < tokens.length; i++) {
+ token = tokens[i];
+ parsedInput = (string.match(getParseRegexForToken(token, config)) || [])[0];
+ if (parsedInput) {
+ skipped = string.substr(0, string.indexOf(parsedInput));
+ if (skipped.length > 0) {
+ config._pf.unusedInput.push(skipped);
+ }
+ string = string.slice(string.indexOf(parsedInput) + parsedInput.length);
+ totalParsedInputLength += parsedInput.length;
+ }
+ // don't parse if it's not a known token
+ if (formatTokenFunctions[token]) {
+ if (parsedInput) {
+ config._pf.empty = false;
+ }
+ else {
+ config._pf.unusedTokens.push(token);
+ }
+ addTimeToArrayFromToken(token, parsedInput, config);
+ }
+ else if (config._strict && !parsedInput) {
+ config._pf.unusedTokens.push(token);
+ }
}
- }
- if (this.dragging === false || this.dragging === true && this.options.hideNodesOnDrag === false) {
- this._drawNodes(ctx, hidden);
- }
+ // add remaining unparsed input length to the string
+ config._pf.charsLeftOver = stringLength - totalParsedInputLength;
+ if (string.length > 0) {
+ config._pf.unusedInput.push(string);
+ }
- if (this.controlNodesActive === true) {
- this._drawControlNodes(ctx);
- }
+ // clear _12h flag if hour is <= 12
+ if (config._pf.bigHour === true && config._a[HOUR] <= 12) {
+ config._pf.bigHour = undefined;
+ }
+ // handle meridiem
+ config._a[HOUR] = meridiemFixWrap(config._locale, config._a[HOUR], config._meridiem);
- //this.physics.nodesSolver._debug(ctx,"#F00F0F");
+ configFromArray(config);
+ checkOverflow(config);
+ }
- this.body.emitter.emit('afterDrawing', ctx);
- // restore original scaling and translation
- ctx.restore();
+ function meridiemFixWrap (locale, hour, meridiem) {
+ var isPm;
- if (hidden === true) {
- ctx.clearRect(0, 0, w, h);
- }
+ if (meridiem == null) {
+ // nothing to do
+ return hour;
+ }
+ if (locale.meridiemHour != null) {
+ return locale.meridiemHour(hour, meridiem);
+ } else if (locale.isPM != null) {
+ // Fallback
+ isPm = locale.isPM(meridiem);
+ if (isPm && hour < 12) {
+ hour += 12;
+ }
+ if (!isPm && hour === 12) {
+ hour = 0;
+ }
+ return hour;
+ } else {
+ // this is not supposed to happen
+ return hour;
+ }
}
- }, {
- key: '_drawNodes',
- /**
- * Redraw all nodes
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
- * @param {CanvasRenderingContext2D} ctx
- * @param {Boolean} [alwaysShow]
- * @private
- */
- value: function _drawNodes(ctx) {
- var alwaysShow = arguments[1] === undefined ? false : arguments[1];
+ function configFromStringAndArray(config) {
+ var tempConfig,
+ bestMoment,
- var nodes = this.body.nodes;
- var nodeIndices = this.body.nodeIndices;
- var node;
- var selected = [];
+ scoreToBeat,
+ i,
+ currentScore;
- // draw unselected nodes;
- for (var i = 0; i < nodeIndices.length; i++) {
- node = nodes[nodeIndices[i]];
- // set selected nodes aside
- if (node.isSelected()) {
- selected.push(nodeIndices[i]);
- } else {
- if (alwaysShow === true) {
- node.draw(ctx);
- }
- // todo: replace check
- //else if (node.inArea() === true) {
- node.draw(ctx);
- //}
+ if (config._f.length === 0) {
+ config._pf.invalidFormat = true;
+ config._d = new Date(NaN);
+ return;
}
- }
- // draw the selected nodes on top
- for (var i = 0; i < selected.length; i++) {
- node = nodes[selected[i]];
- node.draw(ctx);
- }
- }
- }, {
- key: '_drawEdges',
+ for (i = 0; i < config._f.length; i++) {
+ currentScore = 0;
+ tempConfig = copyConfig({}, config);
+ if (config._useUTC != null) {
+ tempConfig._useUTC = config._useUTC;
+ }
+ tempConfig._pf = defaultParsingFlags();
+ tempConfig._f = config._f[i];
+ configFromStringAndFormat(tempConfig);
- /**
- * Redraw all edges
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
- value: function _drawEdges(ctx) {
- var edges = this.body.edges;
- var edgeIndices = this.body.edgeIndices;
- var edge;
+ if (!valid__isValid(tempConfig)) {
+ continue;
+ }
- for (var i = 0; i < edgeIndices.length; i++) {
- edge = edges[edgeIndices[i]];
- if (edge.connected === true) {
- edge.draw(ctx);
+ // if there is any input that was not parsed add a penalty for that format
+ currentScore += tempConfig._pf.charsLeftOver;
+
+ //or tokens
+ currentScore += tempConfig._pf.unusedTokens.length * 10;
+
+ tempConfig._pf.score = currentScore;
+
+ if (scoreToBeat == null || currentScore < scoreToBeat) {
+ scoreToBeat = currentScore;
+ bestMoment = tempConfig;
+ }
}
- }
+
+ extend(config, bestMoment || tempConfig);
}
- }, {
- key: '_drawControlNodes',
- /**
- * Redraw all edges
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
- value: function _drawControlNodes(ctx) {
- var edges = this.body.edges;
- var edgeIndices = this.body.edgeIndices;
- var edge;
+ function configFromObject(config) {
+ if (config._d) {
+ return;
+ }
- for (var i = 0; i < edgeIndices.length; i++) {
- edge = edges[edgeIndices[i]];
- edge._drawControlNodes(ctx);
- }
- }
- }, {
- key: '_determineBrowserMethod',
+ var i = normalizeObjectUnits(config._i);
+ config._a = [i.year, i.month, i.day || i.date, i.hour, i.minute, i.second, i.millisecond];
- /**
- * Determine if the browser requires a setTimeout or a requestAnimationFrame. This was required because
- * some implementations (safari and IE9) did not support requestAnimationFrame
- * @private
- */
- value: function _determineBrowserMethod() {
- if (typeof window !== 'undefined') {
- var browserType = navigator.userAgent.toLowerCase();
- this.requiresTimeout = false;
- if (browserType.indexOf('msie 9.0') != -1) {
- // IE 9
- this.requiresTimeout = true;
- } else if (browserType.indexOf('safari') != -1) {
- // safari
- if (browserType.indexOf('chrome') <= -1) {
- this.requiresTimeout = true;
- }
- }
- } else {
- this.requiresTimeout = true;
- }
+ configFromArray(config);
}
- }]);
-
- return CanvasRenderer;
- })();
- exports['default'] = CanvasRenderer;
- module.exports = exports['default'];
+ function createFromConfig (config) {
+ var input = config._i,
+ format = config._f,
+ res;
-/***/ },
-/* 63 */
-/***/ function(module, exports, __webpack_require__) {
+ config._locale = config._locale || locale_locales__getLocale(config._l);
- 'use strict';
+ if (input === null || (format === undefined && input === '')) {
+ return valid__createInvalid({nullInput: true});
+ }
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
+ if (typeof input === 'string') {
+ config._i = input = config._locale.preparse(input);
+ }
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ if (isMoment(input)) {
+ return new Moment(checkOverflow(input));
+ } else if (isArray(format)) {
+ configFromStringAndArray(config);
+ } else if (format) {
+ configFromStringAndFormat(config);
+ } else {
+ configFromInput(config);
+ }
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
- var Hammer = __webpack_require__(41);
- var hammerUtil = __webpack_require__(44);
+ res = new Moment(checkOverflow(config));
+ if (res._nextDay) {
+ // Adding is smart enough around DST
+ res.add(1, 'd');
+ res._nextDay = undefined;
+ }
- var util = __webpack_require__(1);
+ return res;
+ }
- /**
- * Create the main frame for the Network.
- * This function is executed once when a Network object is created. The frame
- * contains a canvas, and this canvas contains all objects like the axis and
- * nodes.
- * @private
- */
+ function configFromInput(config) {
+ var input = config._i;
+ if (input === undefined) {
+ config._d = new Date();
+ } else if (isDate(input)) {
+ config._d = new Date(+input);
+ } else if (typeof input === 'string') {
+ configFromString(config);
+ } else if (isArray(input)) {
+ config._a = map(input.slice(0), function (obj) {
+ return parseInt(obj, 10);
+ });
+ configFromArray(config);
+ } else if (typeof(input) === 'object') {
+ configFromObject(config);
+ } else if (typeof(input) === 'number') {
+ // from milliseconds
+ config._d = new Date(input);
+ } else {
+ utils_hooks__hooks.createFromInputFallback(config);
+ }
+ }
- var Canvas = (function () {
- function Canvas(body) {
- _classCallCheck(this, Canvas);
+ function createLocalOrUTC (input, format, locale, strict, isUTC) {
+ var c = {};
- this.body = body;
- this.pixelRatio = 1;
+ if (typeof(locale) === 'boolean') {
+ strict = locale;
+ locale = undefined;
+ }
+ // object construction must be done this way.
+ // https://github.com/moment/moment/issues/1423
+ c._isAMomentObject = true;
+ c._useUTC = c._isUTC = isUTC;
+ c._l = locale;
+ c._i = input;
+ c._f = format;
+ c._strict = strict;
+ c._pf = defaultParsingFlags();
- this.options = {};
- this.defaultOptions = {
- width: '100%',
- height: '100%'
- };
- util.extend(this.options, this.defaultOptions);
+ return createFromConfig(c);
+ }
- this.bindEventListeners();
- }
+ function local__createLocal (input, format, locale, strict) {
+ return createLocalOrUTC(input, format, locale, strict, false);
+ }
- _createClass(Canvas, [{
- key: 'bindEventListeners',
- value: function bindEventListeners() {
- var _this = this;
+ var prototypeMin = deprecate(
+ 'moment().min is deprecated, use moment.min instead. https://github.com/moment/moment/issues/1548',
+ function () {
+ var other = local__createLocal.apply(null, arguments);
+ return other < this ? this : other;
+ }
+ );
- // bind the events
- this.body.emitter.once('resize', function (obj) {
- if (obj.width !== 0) {
- _this.body.view.translation.x = obj.width * 0.5;
- }
- if (obj.height !== 0) {
- _this.body.view.translation.y = obj.height * 0.5;
+ var prototypeMax = deprecate(
+ 'moment().max is deprecated, use moment.max instead. https://github.com/moment/moment/issues/1548',
+ function () {
+ var other = local__createLocal.apply(null, arguments);
+ return other > this ? this : other;
}
- });
- this.body.emitter.on('destroy', function () {
- _this.hammerFrame.destroy();
- _this.hammer.destroy();
- });
+ );
- // automatically adapt to a changing size of the browser.
- window.onresize = function () {
- _this.setSize();_this.body.emitter.emit('_redraw');
- };
- }
- }, {
- key: 'setOptions',
- value: function setOptions(options) {
- if (options !== undefined) {
- if (options.width !== undefined) {
- this.options.width = this._prepareValue(options.width);
+ // Pick a moment m from moments so that m[fn](other) is true for all
+ // other. This relies on the function fn to be transitive.
+ //
+ // moments should either be an array of moment objects or an array, whose
+ // first element is an array of moment objects.
+ function pickBy(fn, moments) {
+ var res, i;
+ if (moments.length === 1 && isArray(moments[0])) {
+ moments = moments[0];
}
- if (options.height !== undefined) {
- this.options.height = this._prepareValue(options.height);
+ if (!moments.length) {
+ return local__createLocal();
}
- }
- }
- }, {
- key: '_prepareValue',
- value: function _prepareValue(value) {
- if (typeof value === 'number') {
- return value + 'px';
- } else if (typeof value === 'string') {
- if (value.indexOf('%') !== -1 || value.indexOf('px') !== -1) {
- return value;
- } else if (value.indexOf('%') === -1) {
- return value + 'px';
+ res = moments[0];
+ for (i = 1; i < moments.length; ++i) {
+ if (moments[i][fn](res)) {
+ res = moments[i];
+ }
}
- }
- throw new Error('Could not use the value supplie for width or height:' + value);
+ return res;
}
- }, {
- key: '_create',
- /**
- * Create the HTML
- */
- value: function _create() {
- // remove all elements from the container element.
- while (this.body.container.hasChildNodes()) {
- this.body.container.removeChild(this.body.container.firstChild);
- }
+ // TODO: Use [].sort instead?
+ function min () {
+ var args = [].slice.call(arguments, 0);
- this.frame = document.createElement('div');
- this.frame.className = 'vis-network';
- this.frame.style.position = 'relative';
- this.frame.style.overflow = 'hidden';
- this.frame.tabIndex = 900; // tab index is required for keycharm to bind keystrokes to the div instead of the window
+ return pickBy('isBefore', args);
+ }
- //////////////////////////////////////////////////////////////////
+ function max () {
+ var args = [].slice.call(arguments, 0);
- this.frame.canvas = document.createElement('canvas');
- this.frame.canvas.style.position = 'relative';
- this.frame.appendChild(this.frame.canvas);
+ return pickBy('isAfter', args);
+ }
- if (!this.frame.canvas.getContext) {
- var noCanvas = document.createElement('DIV');
- noCanvas.style.color = 'red';
- noCanvas.style.fontWeight = 'bold';
- noCanvas.style.padding = '10px';
- noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
- this.frame.canvas.appendChild(noCanvas);
- } else {
- var ctx = this.frame.canvas.getContext('2d');
- this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1);
+ function Duration (duration) {
+ var normalizedInput = normalizeObjectUnits(duration),
+ years = normalizedInput.year || 0,
+ quarters = normalizedInput.quarter || 0,
+ months = normalizedInput.month || 0,
+ weeks = normalizedInput.week || 0,
+ days = normalizedInput.day || 0,
+ hours = normalizedInput.hour || 0,
+ minutes = normalizedInput.minute || 0,
+ seconds = normalizedInput.second || 0,
+ milliseconds = normalizedInput.millisecond || 0;
- this.frame.canvas.getContext('2d').setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
- }
+ // representation for dateAddRemove
+ this._milliseconds = +milliseconds +
+ seconds * 1e3 + // 1000
+ minutes * 6e4 + // 1000 * 60
+ hours * 36e5; // 1000 * 60 * 60
+ // Because of dateAddRemove treats 24 hours as different from a
+ // day when working around DST, we need to store them separately
+ this._days = +days +
+ weeks * 7;
+ // It is impossible translate months into days without knowing
+ // which months you are are talking about, so we have to store
+ // it separately.
+ this._months = +months +
+ quarters * 3 +
+ years * 12;
- // add the frame to the container element
- this.body.container.appendChild(this.frame);
+ this._data = {};
- this.body.view.scale = 1;
- this.body.view.translation = { x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight };
+ this._locale = locale_locales__getLocale();
- this._bindHammer();
+ this._bubble();
}
- }, {
- key: '_bindHammer',
- /**
- * This function binds hammer, it can be repeated over and over due to the uniqueness check.
- * @private
- */
- value: function _bindHammer() {
- var _this2 = this;
+ function isDuration (obj) {
+ return obj instanceof Duration;
+ }
- if (this.hammer !== undefined) {
- this.hammer.destroy();
- }
- this.drag = {};
- this.pinch = {};
+ function offset (token, separator) {
+ addFormatToken(token, 0, 0, function () {
+ var offset = this.utcOffset();
+ var sign = '+';
+ if (offset < 0) {
+ offset = -offset;
+ sign = '-';
+ }
+ return sign + zeroFill(~~(offset / 60), 2) + separator + zeroFill(~~(offset) % 60, 2);
+ });
+ }
- // init hammer
- this.hammer = new Hammer(this.frame.canvas);
- this.hammer.get('pinch').set({ enable: true });
+ offset('Z', ':');
+ offset('ZZ', '');
- hammerUtil.onTouch(this.hammer, function (event) {
- _this2.body.eventListeners.onTouch(event);
- });
- this.hammer.on('tap', function (event) {
- _this2.body.eventListeners.onTap(event);
- });
- this.hammer.on('doubletap', function (event) {
- _this2.body.eventListeners.onDoubleTap(event);
- });
- this.hammer.on('press', function (event) {
- _this2.body.eventListeners.onHold(event);
- });
- this.hammer.on('panstart', function (event) {
- _this2.body.eventListeners.onDragStart(event);
- });
- this.hammer.on('panmove', function (event) {
- _this2.body.eventListeners.onDrag(event);
- });
- this.hammer.on('panend', function (event) {
- _this2.body.eventListeners.onDragEnd(event);
- });
- this.hammer.on('pinch', function (event) {
- _this2.body.eventListeners.onPinch(event);
- });
+ // PARSING
- // TODO: neatly cleanup these handlers when re-creating the Canvas, IF these are done with hammer, event.stopPropagation will not work?
- this.frame.canvas.addEventListener('mousewheel', function (event) {
- _this2.body.eventListeners.onMouseWheel(event);
- });
- this.frame.canvas.addEventListener('DOMMouseScroll', function (event) {
- _this2.body.eventListeners.onMouseWheel(event);
- });
+ addRegexToken('Z', matchOffset);
+ addRegexToken('ZZ', matchOffset);
+ addParseToken(['Z', 'ZZ'], function (input, array, config) {
+ config._useUTC = true;
+ config._tzm = offsetFromString(input);
+ });
- this.frame.canvas.addEventListener('mousemove', function (event) {
- _this2.body.eventListeners.onMouseMove(event);
- });
- this.frame.canvas.addEventListener('contextmenu', function (event) {
- _this2.body.eventListeners.onContext(event);
- });
+ // HELPERS
- this.hammerFrame = new Hammer(this.frame);
- hammerUtil.onRelease(this.hammerFrame, function (event) {
- _this2.body.eventListeners.onRelease(event);
- });
+ // timezone chunker
+ // '+10:00' > ['10', '00']
+ // '-1530' > ['-15', '30']
+ var chunkOffset = /([\+\-]|\d\d)/gi;
+
+ function offsetFromString(string) {
+ var matches = ((string || '').match(matchOffset) || []);
+ var chunk = matches[matches.length - 1] || [];
+ var parts = (chunk + '').match(chunkOffset) || ['-', 0, 0];
+ var minutes = +(parts[1] * 60) + toInt(parts[2]);
+
+ return parts[0] === '+' ? minutes : -minutes;
}
- }, {
- key: 'setSize',
- /**
- * Set a new size for the network
- * @param {string} width Width in pixels or percentage (for example '800px'
- * or '50%')
- * @param {string} height Height in pixels or percentage (for example '400px'
- * or '30%')
- */
- value: function setSize() {
- var width = arguments[0] === undefined ? this.options.width : arguments[0];
- var height = arguments[1] === undefined ? this.options.height : arguments[1];
+ // Return a moment from input, that is local/utc/zone equivalent to model.
+ function cloneWithOffset(input, model) {
+ var res, diff;
+ if (model._isUTC) {
+ res = model.clone();
+ diff = (isMoment(input) || isDate(input) ? +input : +local__createLocal(input)) - (+res);
+ // Use low-level api, because this fn is low-level api.
+ res._d.setTime(+res._d + diff);
+ utils_hooks__hooks.updateOffset(res, false);
+ return res;
+ } else {
+ return local__createLocal(input).local();
+ }
+ return model._isUTC ? local__createLocal(input).zone(model._offset || 0) : local__createLocal(input).local();
+ }
- width = this._prepareValue(width);
- height = this._prepareValue(height);
+ function getDateOffset (m) {
+ // On Firefox.24 Date#getTimezoneOffset returns a floating point.
+ // https://github.com/moment/moment/pull/1871
+ return -Math.round(m._d.getTimezoneOffset() / 15) * 15;
+ }
- var emitEvent = false;
- var oldWidth = this.frame.canvas.width;
- var oldHeight = this.frame.canvas.height;
+ // HOOKS
- if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) {
- this.frame.style.width = width;
- this.frame.style.height = height;
+ // This function will be called whenever a moment is mutated.
+ // It is intended to keep the offset in sync with the timezone.
+ utils_hooks__hooks.updateOffset = function () {};
- this.frame.canvas.style.width = '100%';
- this.frame.canvas.style.height = '100%';
+ // MOMENTS
- this.frame.canvas.width = this.frame.canvas.clientWidth * this.pixelRatio;
- this.frame.canvas.height = this.frame.canvas.clientHeight * this.pixelRatio;
+ // keepLocalTime = true means only change the timezone, without
+ // affecting the local hour. So 5:31:26 +0300 --[utcOffset(2, true)]-->
+ // 5:31:26 +0200 It is possible that 5:31:26 doesn't exist with offset
+ // +0200, so we adjust the time as needed, to be valid.
+ //
+ // Keeping the time actually adds/subtracts (one hour)
+ // from the actual represented time. That is why we call updateOffset
+ // a second time. In case it wants us to change the offset again
+ // _changeInProgress == true case, then we have to adjust, because
+ // there is no such time in the given timezone.
+ function getSetOffset (input, keepLocalTime) {
+ var offset = this._offset || 0,
+ localAdjust;
+ if (input != null) {
+ if (typeof input === 'string') {
+ input = offsetFromString(input);
+ }
+ if (Math.abs(input) < 16) {
+ input = input * 60;
+ }
+ if (!this._isUTC && keepLocalTime) {
+ localAdjust = getDateOffset(this);
+ }
+ this._offset = input;
+ this._isUTC = true;
+ if (localAdjust != null) {
+ this.add(localAdjust, 'm');
+ }
+ if (offset !== input) {
+ if (!keepLocalTime || this._changeInProgress) {
+ add_subtract__addSubtract(this, create__createDuration(input - offset, 'm'), 1, false);
+ } else if (!this._changeInProgress) {
+ this._changeInProgress = true;
+ utils_hooks__hooks.updateOffset(this, true);
+ this._changeInProgress = null;
+ }
+ }
+ return this;
+ } else {
+ return this._isUTC ? offset : getDateOffset(this);
+ }
+ }
- this.options.width = width;
- this.options.height = height;
+ function getSetZone (input, keepLocalTime) {
+ if (input != null) {
+ if (typeof input !== 'string') {
+ input = -input;
+ }
- emitEvent = true;
- } else {
- // this would adapt the width of the canvas to the width from 100% if and only if
- // there is a change.
+ this.utcOffset(input, keepLocalTime);
- if (this.frame.canvas.width != this.frame.canvas.clientWidth * this.pixelRatio) {
- this.frame.canvas.width = this.frame.canvas.clientWidth * this.pixelRatio;
- emitEvent = true;
- }
- if (this.frame.canvas.height != this.frame.canvas.clientHeight * this.pixelRatio) {
- this.frame.canvas.height = this.frame.canvas.clientHeight * this.pixelRatio;
- emitEvent = true;
+ return this;
+ } else {
+ return -this.utcOffset();
}
- }
-
- if (emitEvent === true) {
- this.body.emitter.emit('resize', { width: this.frame.canvas.width / this.pixelRatio, height: this.frame.canvas.height / this.pixelRatio, oldWidth: oldWidth / this.pixelRatio, oldHeight: oldHeight / this.pixelRatio });
- }
}
- }, {
- key: '_XconvertDOMtoCanvas',
- /**
- * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
- * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
- * @param {number} x
- * @returns {number}
- * @private
- */
- value: function _XconvertDOMtoCanvas(x) {
- return (x - this.body.view.translation.x) / this.body.view.scale;
+ function setOffsetToUTC (keepLocalTime) {
+ return this.utcOffset(0, keepLocalTime);
}
- }, {
- key: '_XconvertCanvasToDOM',
- /**
- * Convert the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
- * the X coordinate in DOM-space (coordinate point in browser relative to the container div)
- * @param {number} x
- * @returns {number}
- * @private
- */
- value: function _XconvertCanvasToDOM(x) {
- return x * this.body.view.scale + this.body.view.translation.x;
- }
- }, {
- key: '_YconvertDOMtoCanvas',
+ function setOffsetToLocal (keepLocalTime) {
+ if (this._isUTC) {
+ this.utcOffset(0, keepLocalTime);
+ this._isUTC = false;
- /**
- * Convert the Y coordinate in DOM-space (coordinate point in browser relative to the container div) to
- * the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
- * @param {number} y
- * @returns {number}
- * @private
- */
- value: function _YconvertDOMtoCanvas(y) {
- return (y - this.body.view.translation.y) / this.body.view.scale;
+ if (keepLocalTime) {
+ this.subtract(getDateOffset(this), 'm');
+ }
+ }
+ return this;
}
- }, {
- key: '_YconvertCanvasToDOM',
- /**
- * Convert the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
- * the Y coordinate in DOM-space (coordinate point in browser relative to the container div)
- * @param {number} y
- * @returns {number}
- * @private
- */
- value: function _YconvertCanvasToDOM(y) {
- return y * this.body.view.scale + this.body.view.translation.y;
+ function setOffsetToParsedOffset () {
+ if (this._tzm) {
+ this.utcOffset(this._tzm);
+ } else if (typeof this._i === 'string') {
+ this.utcOffset(offsetFromString(this._i));
+ }
+ return this;
}
- }, {
- key: 'canvasToDOM',
- /**
- *
- * @param {object} pos = {x: number, y: number}
- * @returns {{x: number, y: number}}
- * @constructor
- */
- value: function canvasToDOM(pos) {
- return { x: this._XconvertCanvasToDOM(pos.x), y: this._YconvertCanvasToDOM(pos.y) };
+ function hasAlignedHourOffset (input) {
+ if (!input) {
+ input = 0;
+ }
+ else {
+ input = local__createLocal(input).utcOffset();
+ }
+
+ return (this.utcOffset() - input) % 60 === 0;
}
- }, {
- key: 'DOMtoCanvas',
- /**
- *
- * @param {object} pos = {x: number, y: number}
- * @returns {{x: number, y: number}}
- * @constructor
- */
- value: function DOMtoCanvas(pos) {
- return { x: this._XconvertDOMtoCanvas(pos.x), y: this._YconvertDOMtoCanvas(pos.y) };
+ function isDaylightSavingTime () {
+ return (
+ this.utcOffset() > this.clone().month(0).utcOffset() ||
+ this.utcOffset() > this.clone().month(5).utcOffset()
+ );
}
- }]);
- return Canvas;
- })();
+ function isDaylightSavingTimeShifted () {
+ if (this._a) {
+ var other = this._isUTC ? create_utc__createUTC(this._a) : local__createLocal(this._a);
+ return this.isValid() && compareArrays(this._a, other.toArray()) > 0;
+ }
- exports['default'] = Canvas;
- module.exports = exports['default'];
+ return false;
+ }
-/***/ },
-/* 64 */
-/***/ function(module, exports, __webpack_require__) {
+ function isLocal () {
+ return !this._isUTC;
+ }
- "use strict";
+ function isUtcOffset () {
+ return this._isUTC;
+ }
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
+ function isUtc () {
+ return this._isUTC && this._offset === 0;
+ }
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ var aspNetRegex = /(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/;
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- var util = __webpack_require__(1);
+ // from http://docs.closure-library.googlecode.com/git/closure_goog_date_date.js.source.html
+ // somewhat more in line with 4.4.3.2 2004 spec, but allows decimal anywhere
+ var create__isoRegex = /^(-)?P(?:(?:([0-9,.]*)Y)?(?:([0-9,.]*)M)?(?:([0-9,.]*)D)?(?:T(?:([0-9,.]*)H)?(?:([0-9,.]*)M)?(?:([0-9,.]*)S)?)?|([0-9,.]*)W)$/;
- var View = (function () {
- function View(body, canvas) {
- var _this = this;
+ function create__createDuration (input, key) {
+ var duration = input,
+ // matching against regexp is expensive, do it on demand
+ match = null,
+ sign,
+ ret,
+ diffRes;
- _classCallCheck(this, View);
+ if (isDuration(input)) {
+ duration = {
+ ms : input._milliseconds,
+ d : input._days,
+ M : input._months
+ };
+ } else if (typeof input === 'number') {
+ duration = {};
+ if (key) {
+ duration[key] = input;
+ } else {
+ duration.milliseconds = input;
+ }
+ } else if (!!(match = aspNetRegex.exec(input))) {
+ sign = (match[1] === '-') ? -1 : 1;
+ duration = {
+ y : 0,
+ d : toInt(match[DATE]) * sign,
+ h : toInt(match[HOUR]) * sign,
+ m : toInt(match[MINUTE]) * sign,
+ s : toInt(match[SECOND]) * sign,
+ ms : toInt(match[MILLISECOND]) * sign
+ };
+ } else if (!!(match = create__isoRegex.exec(input))) {
+ sign = (match[1] === '-') ? -1 : 1;
+ duration = {
+ y : parseIso(match[2], sign),
+ M : parseIso(match[3], sign),
+ d : parseIso(match[4], sign),
+ h : parseIso(match[5], sign),
+ m : parseIso(match[6], sign),
+ s : parseIso(match[7], sign),
+ w : parseIso(match[8], sign)
+ };
+ } else if (duration == null) {// checks for null or undefined
+ duration = {};
+ } else if (typeof duration === 'object' && ('from' in duration || 'to' in duration)) {
+ diffRes = momentsDifference(local__createLocal(duration.from), local__createLocal(duration.to));
- this.body = body;
- this.canvas = canvas;
+ duration = {};
+ duration.ms = diffRes.milliseconds;
+ duration.M = diffRes.months;
+ }
- this.animationSpeed = 1 / this.renderRefreshRate;
- this.animationEasingFunction = "easeInOutQuint";
- this.easingTime = 0;
- this.sourceScale = 0;
- this.targetScale = 0;
- this.sourceTranslation = 0;
- this.targetTranslation = 0;
- this.lockedOnNodeId = undefined;
- this.lockedOnNodeOffset = undefined;
- this.touchTime = 0;
+ ret = new Duration(duration);
- this.viewFunction = undefined;
+ if (isDuration(input) && hasOwnProp(input, '_locale')) {
+ ret._locale = input._locale;
+ }
- this.body.emitter.on("fit", this.fit.bind(this));
- this.body.emitter.on("animationFinished", function () {
- _this.body.emitter.emit("_stopRendering");
- });
- this.body.emitter.on("unlockNode", this.releaseNode.bind(this));
- }
+ return ret;
+ }
- _createClass(View, [{
- key: "setOptions",
- value: function setOptions() {
- var options = arguments[0] === undefined ? {} : arguments[0];
+ create__createDuration.fn = Duration.prototype;
- this.options = options;
+ function parseIso (inp, sign) {
+ // We'd normally use ~~inp for this, but unfortunately it also
+ // converts floats to ints.
+ // inp may be undefined, so careful calling replace on it.
+ var res = inp && parseFloat(inp.replace(',', '.'));
+ // apply sign while we're at it
+ return (isNaN(res) ? 0 : res) * sign;
}
- }, {
- key: "_getRange",
- /**
- * Find the center position of the network
- * @private
- */
- value: function _getRange() {
- var specificNodes = arguments[0] === undefined ? [] : arguments[0];
+ function positiveMomentsDifference(base, other) {
+ var res = {milliseconds: 0, months: 0};
- var minY = 1000000000,
- maxY = -1000000000,
- minX = 1000000000,
- maxX = -1000000000,
- node;
- if (specificNodes.length > 0) {
- for (var i = 0; i < specificNodes.length; i++) {
- node = this.body.nodes[specificNodes[i]];
- if (minX > node.shape.boundingBox.left) {
- minX = node.shape.boundingBox.left;
- }
- if (maxX < node.shape.boundingBox.right) {
- maxX = node.shape.boundingBox.right;
- }
- if (minY > node.shape.boundingBox.bottom) {
- minY = node.shape.boundingBox.top;
- } // top is negative, bottom is positive
- if (maxY < node.shape.boundingBox.top) {
- maxY = node.shape.boundingBox.bottom;
- } // top is negative, bottom is positive
- }
- } else {
- for (var nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- node = this.body.nodes[nodeId];
- if (minX > node.shape.boundingBox.left) {
- minX = node.shape.boundingBox.left;
- }
- if (maxX < node.shape.boundingBox.right) {
- maxX = node.shape.boundingBox.right;
- }
- if (minY > node.shape.boundingBox.bottom) {
- minY = node.shape.boundingBox.top;
- } // top is negative, bottom is positive
- if (maxY < node.shape.boundingBox.top) {
- maxY = node.shape.boundingBox.bottom;
- } // top is negative, bottom is positive
- }
+ res.months = other.month() - base.month() +
+ (other.year() - base.year()) * 12;
+ if (base.clone().add(res.months, 'M').isAfter(other)) {
+ --res.months;
}
- }
- if (minX === 1000000000 && maxX === -1000000000 && minY === 1000000000 && maxY === -1000000000) {
- minY = 0, maxY = 0, minX = 0, maxX = 0;
- }
- return { minX: minX, maxX: maxX, minY: minY, maxY: maxY };
- }
- }, {
- key: "_findCenter",
+ res.milliseconds = +other - +(base.clone().add(res.months, 'M'));
- /**
- * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
- * @returns {{x: number, y: number}}
- * @private
- */
- value: function _findCenter(range) {
- return { x: 0.5 * (range.maxX + range.minX),
- y: 0.5 * (range.maxY + range.minY) };
+ return res;
}
- }, {
- key: "fit",
- /**
- * This function zooms out to fit all data on screen based on amount of nodes
- * @param {Object} Options
- * @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false;
- */
- value: function fit() {
- var options = arguments[0] === undefined ? { nodes: [] } : arguments[0];
- var initialZoom = arguments[1] === undefined ? false : arguments[1];
+ function momentsDifference(base, other) {
+ var res;
+ other = cloneWithOffset(other, base);
+ if (base.isBefore(other)) {
+ res = positiveMomentsDifference(base, other);
+ } else {
+ res = positiveMomentsDifference(other, base);
+ res.milliseconds = -res.milliseconds;
+ res.months = -res.months;
+ }
- var range;
- var zoomLevel;
+ return res;
+ }
- if (initialZoom === true) {
- // check if more than half of the nodes have a predefined position. If so, we use the range, not the approximation.
- var positionDefined = 0;
- for (var nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- var node = this.body.nodes[nodeId];
- if (node.predefinedPosition === true) {
- positionDefined += 1;
+ function createAdder(direction, name) {
+ return function (val, period) {
+ var dur, tmp;
+ //invert the arguments, but complain about it
+ if (period !== null && !isNaN(+period)) {
+ deprecateSimple(name, 'moment().' + name + '(period, number) is deprecated. Please use moment().' + name + '(number, period).');
+ tmp = val; val = period; period = tmp;
}
- }
- }
- if (positionDefined > 0.5 * this.body.nodeIndices.length) {
- this.fit(options, false);
- return;
- }
- range = this._getRange(options.nodes);
+ val = typeof val === 'string' ? +val : val;
+ dur = create__createDuration(val, period);
+ add_subtract__addSubtract(this, dur, direction);
+ return this;
+ };
+ }
- var numberOfNodes = this.body.nodeIndices.length;
- zoomLevel = 12.662 / (numberOfNodes + 7.4147) + 0.0964822; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
+ function add_subtract__addSubtract (mom, duration, isAdding, updateOffset) {
+ var milliseconds = duration._milliseconds,
+ days = duration._days,
+ months = duration._months;
+ updateOffset = updateOffset == null ? true : updateOffset;
- // correct for larger canvasses.
- var factor = Math.min(this.canvas.frame.canvas.clientWidth / 600, this.canvas.frame.canvas.clientHeight / 600);
- zoomLevel *= factor;
- } else {
- this.body.emitter.emit("_redraw", true);
- range = this._getRange(options.nodes);
- var xDistance = Math.abs(range.maxX - range.minX) * 1.1;
- var yDistance = Math.abs(range.maxY - range.minY) * 1.1;
+ if (milliseconds) {
+ mom._d.setTime(+mom._d + milliseconds * isAdding);
+ }
+ if (days) {
+ get_set__set(mom, 'Date', get_set__get(mom, 'Date') + days * isAdding);
+ }
+ if (months) {
+ setMonth(mom, get_set__get(mom, 'Month') + months * isAdding);
+ }
+ if (updateOffset) {
+ utils_hooks__hooks.updateOffset(mom, days || months);
+ }
+ }
- var xZoomLevel = this.canvas.frame.canvas.clientWidth / xDistance;
- var yZoomLevel = this.canvas.frame.canvas.clientHeight / yDistance;
+ var add_subtract__add = createAdder(1, 'add');
+ var add_subtract__subtract = createAdder(-1, 'subtract');
- zoomLevel = xZoomLevel <= yZoomLevel ? xZoomLevel : yZoomLevel;
- }
+ function moment_calendar__calendar (time) {
+ // We want to compare the start of today, vs this.
+ // Getting start-of-today depends on whether we're local/utc/offset or not.
+ var now = time || local__createLocal(),
+ sod = cloneWithOffset(now, this).startOf('day'),
+ diff = this.diff(sod, 'days', true),
+ format = diff < -6 ? 'sameElse' :
+ diff < -1 ? 'lastWeek' :
+ diff < 0 ? 'lastDay' :
+ diff < 1 ? 'sameDay' :
+ diff < 2 ? 'nextDay' :
+ diff < 7 ? 'nextWeek' : 'sameElse';
+ return this.format(this.localeData().calendar(format, this, local__createLocal(now)));
+ }
- if (zoomLevel > 1) {
- zoomLevel = 1;
- } else if (zoomLevel === 0) {
- zoomLevel = 1;
- }
+ function clone () {
+ return new Moment(this);
+ }
- var center = this._findCenter(range);
- var animationOptions = { position: center, scale: zoomLevel, animation: options };
- this.moveTo(animationOptions);
+ function isAfter (input, units) {
+ var inputMs;
+ units = normalizeUnits(typeof units !== 'undefined' ? units : 'millisecond');
+ if (units === 'millisecond') {
+ input = isMoment(input) ? input : local__createLocal(input);
+ return +this > +input;
+ } else {
+ inputMs = isMoment(input) ? +input : +local__createLocal(input);
+ return inputMs < +this.clone().startOf(units);
+ }
}
- }, {
- key: "focusOnNode",
- // animation
+ function isBefore (input, units) {
+ var inputMs;
+ units = normalizeUnits(typeof units !== 'undefined' ? units : 'millisecond');
+ if (units === 'millisecond') {
+ input = isMoment(input) ? input : local__createLocal(input);
+ return +this < +input;
+ } else {
+ inputMs = isMoment(input) ? +input : +local__createLocal(input);
+ return +this.clone().endOf(units) < inputMs;
+ }
+ }
- /**
- * Center a node in view.
- *
- * @param {Number} nodeId
- * @param {Number} [options]
- */
- value: function focusOnNode(nodeId) {
- var options = arguments[1] === undefined ? {} : arguments[1];
+ function isBetween (from, to, units) {
+ return this.isAfter(from, units) && this.isBefore(to, units);
+ }
- if (this.body.nodes[nodeId] !== undefined) {
- var nodePosition = { x: this.body.nodes[nodeId].x, y: this.body.nodes[nodeId].y };
- options.position = nodePosition;
- options.lockedOnNode = nodeId;
+ function isSame (input, units) {
+ var inputMs;
+ units = normalizeUnits(units || 'millisecond');
+ if (units === 'millisecond') {
+ input = isMoment(input) ? input : local__createLocal(input);
+ return +this === +input;
+ } else {
+ inputMs = +local__createLocal(input);
+ return +(this.clone().startOf(units)) <= inputMs && inputMs <= +(this.clone().endOf(units));
+ }
+ }
- this.moveTo(options);
- } else {
- console.log("Node: " + nodeId + " cannot be found.");
- }
+ function absFloor (number) {
+ if (number < 0) {
+ return Math.ceil(number);
+ } else {
+ return Math.floor(number);
+ }
}
- }, {
- key: "moveTo",
- /**
- *
- * @param {Object} options | options.offset = {x:Number, y:Number} // offset from the center in DOM pixels
- * | options.scale = Number // scale to move to
- * | options.position = {x:Number, y:Number} // position to move to
- * | options.animation = {duration:Number, easingFunction:String} || Boolean // position to move to
- */
- value: function moveTo(options) {
- if (options === undefined) {
- options = {};
- return;
- }
- if (options.offset === undefined) {
- options.offset = { x: 0, y: 0 };
- }
- if (options.offset.x === undefined) {
- options.offset.x = 0;
- }
- if (options.offset.y === undefined) {
- options.offset.y = 0;
- }
- if (options.scale === undefined) {
- options.scale = this.body.view.scale;
- }
- if (options.position === undefined) {
- options.position = this.body.view.translation;
- }
- if (options.animation === undefined) {
- options.animation = { duration: 0 };
- }
- if (options.animation === false) {
- options.animation = { duration: 0 };
- }
- if (options.animation === true) {
- options.animation = {};
- }
- if (options.animation.duration === undefined) {
- options.animation.duration = 1000;
- } // default duration
- if (options.animation.easingFunction === undefined) {
- options.animation.easingFunction = "easeInOutQuad";
- } // default easing function
+ function diff (input, units, asFloat) {
+ var that = cloneWithOffset(input, this),
+ zoneDelta = (that.utcOffset() - this.utcOffset()) * 6e4,
+ delta, output;
- this.animateView(options);
- }
- }, {
- key: "animateView",
+ units = normalizeUnits(units);
- /**
- *
- * @param {Object} options | options.offset = {x:Number, y:Number} // offset from the center in DOM pixels
- * | options.time = Number // animation time in milliseconds
- * | options.scale = Number // scale to animate to
- * | options.position = {x:Number, y:Number} // position to animate to
- * | options.easingFunction = String // linear, easeInQuad, easeOutQuad, easeInOutQuad,
- * // easeInCubic, easeOutCubic, easeInOutCubic,
- * // easeInQuart, easeOutQuart, easeInOutQuart,
- * // easeInQuint, easeOutQuint, easeInOutQuint
- */
- value: function animateView(options) {
- if (options === undefined) {
- return;
- }
- this.animationEasingFunction = options.animation.easingFunction;
- // release if something focussed on the node
- this.releaseNode();
- if (options.locked === true) {
- this.lockedOnNodeId = options.lockedOnNode;
- this.lockedOnNodeOffset = options.offset;
- }
-
- // forcefully complete the old animation if it was still running
- if (this.easingTime != 0) {
- this._transitionRedraw(true); // by setting easingtime to 1, we finish the animation.
- }
-
- this.sourceScale = this.body.view.scale;
- this.sourceTranslation = this.body.view.translation;
- this.targetScale = options.scale;
+ if (units === 'year' || units === 'month' || units === 'quarter') {
+ output = monthDiff(this, that);
+ if (units === 'quarter') {
+ output = output / 3;
+ } else if (units === 'year') {
+ output = output / 12;
+ }
+ } else {
+ delta = this - that;
+ output = units === 'second' ? delta / 1e3 : // 1000
+ units === 'minute' ? delta / 6e4 : // 1000 * 60
+ units === 'hour' ? delta / 36e5 : // 1000 * 60 * 60
+ units === 'day' ? (delta - zoneDelta) / 864e5 : // 1000 * 60 * 60 * 24, negate dst
+ units === 'week' ? (delta - zoneDelta) / 6048e5 : // 1000 * 60 * 60 * 24 * 7, negate dst
+ delta;
+ }
+ return asFloat ? output : absFloor(output);
+ }
- // set the scale so the viewCenter is based on the correct zoom level. This is overridden in the transitionRedraw
- // but at least then we'll have the target transition
- this.body.view.scale = this.targetScale;
- var viewCenter = this.canvas.DOMtoCanvas({ x: 0.5 * this.canvas.frame.canvas.clientWidth, y: 0.5 * this.canvas.frame.canvas.clientHeight });
- var distanceFromCenter = { // offset from view, distance view has to change by these x and y to center the node
- x: viewCenter.x - options.position.x,
- y: viewCenter.y - options.position.y
- };
- this.targetTranslation = {
- x: this.sourceTranslation.x + distanceFromCenter.x * this.targetScale + options.offset.x,
- y: this.sourceTranslation.y + distanceFromCenter.y * this.targetScale + options.offset.y
- };
+ function monthDiff (a, b) {
+ // difference in months
+ var wholeMonthDiff = ((b.year() - a.year()) * 12) + (b.month() - a.month()),
+ // b is in (anchor - 1 month, anchor + 1 month)
+ anchor = a.clone().add(wholeMonthDiff, 'months'),
+ anchor2, adjust;
- // if the time is set to 0, don't do an animation
- if (options.animation.duration === 0) {
- if (this.lockedOnNodeId != undefined) {
- this.viewFunction = this._lockedRedraw.bind(this);
- this.body.emitter.on("initRedraw", this.viewFunction);
+ if (b - anchor < 0) {
+ anchor2 = a.clone().add(wholeMonthDiff - 1, 'months');
+ // linear across the month
+ adjust = (b - anchor) / (anchor - anchor2);
} else {
- this.body.view.scale = this.targetScale;
- this.body.view.translation = this.targetTranslation;
- this.body.emitter.emit("_requestRedraw");
+ anchor2 = a.clone().add(wholeMonthDiff + 1, 'months');
+ // linear across the month
+ adjust = (b - anchor) / (anchor2 - anchor);
}
- } else {
- this.animationSpeed = 1 / (60 * options.animation.duration * 0.001) || 1 / 60; // 60 for 60 seconds, 0.001 for milli's
- this.animationEasingFunction = options.animation.easingFunction;
- this.viewFunction = this._transitionRedraw.bind(this);
- this.body.emitter.on("initRedraw", this.viewFunction);
- this.body.emitter.emit("_startRendering");
- }
+ return -(wholeMonthDiff + adjust);
}
- }, {
- key: "_lockedRedraw",
- /**
- * used to animate smoothly by hijacking the redraw function.
- * @private
- */
- value: function _lockedRedraw() {
- var nodePosition = { x: this.body.nodes[this.lockedOnNodeId].x, y: this.body.nodes[this.lockedOnNodeId].y };
- var viewCenter = this.DOMtoCanvas({ x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight });
- var distanceFromCenter = { // offset from view, distance view has to change by these x and y to center the node
- x: viewCenter.x - nodePosition.x,
- y: viewCenter.y - nodePosition.y
- };
- var sourceTranslation = this.body.view.translation;
- var targetTranslation = {
- x: sourceTranslation.x + distanceFromCenter.x * this.body.view.scale + this.lockedOnNodeOffset.x,
- y: sourceTranslation.y + distanceFromCenter.y * this.body.view.scale + this.lockedOnNodeOffset.y
- };
+ utils_hooks__hooks.defaultFormat = 'YYYY-MM-DDTHH:mm:ssZ';
- this.body.view.translation = targetTranslation;
+ function toString () {
+ return this.clone().locale('en').format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ');
}
- }, {
- key: "releaseNode",
- value: function releaseNode() {
- if (this.lockedOnNodeId !== undefined && this.viewFunction !== undefined) {
- this.body.emitter.off("initRedraw", this.viewFunction);
- this.lockedOnNodeId = undefined;
- this.lockedOnNodeOffset = undefined;
- }
+
+ function moment_format__toISOString () {
+ var m = this.clone().utc();
+ if (0 < m.year() && m.year() <= 9999) {
+ if ('function' === typeof Date.prototype.toISOString) {
+ // native implementation is ~50x faster, use it when we can
+ return this.toDate().toISOString();
+ } else {
+ return formatMoment(m, 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]');
+ }
+ } else {
+ return formatMoment(m, 'YYYYYY-MM-DD[T]HH:mm:ss.SSS[Z]');
+ }
}
- }, {
- key: "_transitionRedraw",
- /**
- *
- * @param easingTime
- * @private
- */
- value: function _transitionRedraw() {
- var finished = arguments[0] === undefined ? false : arguments[0];
+ function format (inputString) {
+ var output = formatMoment(this, inputString || utils_hooks__hooks.defaultFormat);
+ return this.localeData().postformat(output);
+ }
- this.easingTime += this.animationSpeed;
- this.easingTime = finished === true ? 1 : this.easingTime;
+ function from (time, withoutSuffix) {
+ return create__createDuration({to: this, from: time}).locale(this.locale()).humanize(!withoutSuffix);
+ }
- var progress = util.easingFunctions[this.animationEasingFunction](this.easingTime);
+ function fromNow (withoutSuffix) {
+ return this.from(local__createLocal(), withoutSuffix);
+ }
- this.body.view.scale = this.sourceScale + (this.targetScale - this.sourceScale) * progress;
- this.body.view.translation = {
- x: this.sourceTranslation.x + (this.targetTranslation.x - this.sourceTranslation.x) * progress,
- y: this.sourceTranslation.y + (this.targetTranslation.y - this.sourceTranslation.y) * progress
- };
+ function locale (key) {
+ var newLocaleData;
- // cleanup
- if (this.easingTime >= 1) {
- this.body.emitter.off("initRedraw", this.viewFunction);
- this.easingTime = 0;
- if (this.lockedOnNodeId != undefined) {
- this.viewFunction = this._lockedRedraw.bind(this);
- this.body.emitter.on("initRedraw", this.viewFunction);
+ if (key === undefined) {
+ return this._locale._abbr;
+ } else {
+ newLocaleData = locale_locales__getLocale(key);
+ if (newLocaleData != null) {
+ this._locale = newLocaleData;
+ }
+ return this;
}
- this.body.emitter.emit("animationFinished");
- }
}
- }, {
- key: "getScale",
- value: function getScale() {
- return this.body.view.scale;
- }
- }, {
- key: "getPosition",
- value: function getPosition() {
- return { x: this.body.view.translation.x, y: this.body.view.translation.y };
+
+ var lang = deprecate(
+ 'moment().lang() is deprecated. Instead, use moment().localeData() to get the language configuration. Use moment().locale() to change languages.',
+ function (key) {
+ if (key === undefined) {
+ return this.localeData();
+ } else {
+ return this.locale(key);
+ }
+ }
+ );
+
+ function localeData () {
+ return this._locale;
}
- }]);
- return View;
- })();
+ function startOf (units) {
+ units = normalizeUnits(units);
+ // the following switch intentionally omits break keywords
+ // to utilize falling through the cases.
+ switch (units) {
+ case 'year':
+ this.month(0);
+ /* falls through */
+ case 'quarter':
+ case 'month':
+ this.date(1);
+ /* falls through */
+ case 'week':
+ case 'isoWeek':
+ case 'day':
+ this.hours(0);
+ /* falls through */
+ case 'hour':
+ this.minutes(0);
+ /* falls through */
+ case 'minute':
+ this.seconds(0);
+ /* falls through */
+ case 'second':
+ this.milliseconds(0);
+ }
- exports["default"] = View;
- module.exports = exports["default"];
+ // weeks are a special case
+ if (units === 'week') {
+ this.weekday(0);
+ }
+ if (units === 'isoWeek') {
+ this.isoWeekday(1);
+ }
-/***/ },
-/* 65 */
-/***/ function(module, exports, __webpack_require__) {
+ // quarters are also special
+ if (units === 'quarter') {
+ this.month(Math.floor(this.month() / 3) * 3);
+ }
- 'use strict';
+ return this;
+ }
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
+ function endOf (units) {
+ units = normalizeUnits(units);
+ if (units === undefined || units === 'millisecond') {
+ return this;
+ }
+ return this.startOf(units).add(1, (units === 'isoWeek' ? 'week' : units)).subtract(1, 'ms');
+ }
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
+ function to_type__valueOf () {
+ return +this._d - ((this._offset || 0) * 60000);
+ }
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ function unix () {
+ return Math.floor(+this / 1000);
+ }
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
+ function toDate () {
+ return this._offset ? new Date(+this) : this._d;
+ }
- var _NavigationHandler = __webpack_require__(83);
+ function toArray () {
+ var m = this;
+ return [m.year(), m.month(), m.date(), m.hour(), m.minute(), m.second(), m.millisecond()];
+ }
- var _NavigationHandler2 = _interopRequireWildcard(_NavigationHandler);
+ function moment_valid__isValid () {
+ return valid__isValid(this);
+ }
- var _Popup = __webpack_require__(84);
+ function parsingFlags () {
+ return extend({}, this._pf);
+ }
- var _Popup2 = _interopRequireWildcard(_Popup);
+ function invalidAt () {
+ return this._pf.overflow;
+ }
- var util = __webpack_require__(1);
+ addFormatToken(0, ['gg', 2], 0, function () {
+ return this.weekYear() % 100;
+ });
- var InteractionHandler = (function () {
- function InteractionHandler(body, canvas, selectionHandler) {
- _classCallCheck(this, InteractionHandler);
+ addFormatToken(0, ['GG', 2], 0, function () {
+ return this.isoWeekYear() % 100;
+ });
- this.body = body;
- this.canvas = canvas;
- this.selectionHandler = selectionHandler;
- this.navigationHandler = new _NavigationHandler2['default'](body, canvas);
+ function addWeekYearFormatToken (token, getter) {
+ addFormatToken(0, [token, token.length], 0, getter);
+ }
- // bind the events from hammer to functions in this object
- this.body.eventListeners.onTap = this.onTap.bind(this);
- this.body.eventListeners.onTouch = this.onTouch.bind(this);
- this.body.eventListeners.onDoubleTap = this.onDoubleTap.bind(this);
- this.body.eventListeners.onHold = this.onHold.bind(this);
- this.body.eventListeners.onDragStart = this.onDragStart.bind(this);
- this.body.eventListeners.onDrag = this.onDrag.bind(this);
- this.body.eventListeners.onDragEnd = this.onDragEnd.bind(this);
- this.body.eventListeners.onMouseWheel = this.onMouseWheel.bind(this);
- this.body.eventListeners.onPinch = this.onPinch.bind(this);
- this.body.eventListeners.onMouseMove = this.onMouseMove.bind(this);
- this.body.eventListeners.onRelease = this.onRelease.bind(this);
- this.body.eventListeners.onContext = this.onContext.bind(this);
+ addWeekYearFormatToken('gggg', 'weekYear');
+ addWeekYearFormatToken('ggggg', 'weekYear');
+ addWeekYearFormatToken('GGGG', 'isoWeekYear');
+ addWeekYearFormatToken('GGGGG', 'isoWeekYear');
- this.touchTime = 0;
- this.drag = {};
- this.pinch = {};
- this.hoverObj = { nodes: {}, edges: {} };
- this.popup = undefined;
- this.popupObj = undefined;
- this.popupTimer = undefined;
+ // ALIASES
- this.body.functions.getPointer = this.getPointer.bind(this);
+ addUnitAlias('weekYear', 'gg');
+ addUnitAlias('isoWeekYear', 'GG');
- this.options = {};
- this.defaultOptions = {
- dragNodes: true,
- dragView: true,
- zoomView: true,
- hoverEnabled: false,
- navigationButtons: false,
- tooltipDelay: 300,
- keyboard: {
- enabled: false,
- speed: { x: 10, y: 10, zoom: 0.02 },
- bindToWindow: true
- }
- };
- util.extend(this.options, this.defaultOptions);
+ // PARSING
- this.bindEventListeners();
- }
+ addRegexToken('G', matchSigned);
+ addRegexToken('g', matchSigned);
+ addRegexToken('GG', match1to2, match2);
+ addRegexToken('gg', match1to2, match2);
+ addRegexToken('GGGG', match1to4, match4);
+ addRegexToken('gggg', match1to4, match4);
+ addRegexToken('GGGGG', match1to6, match6);
+ addRegexToken('ggggg', match1to6, match6);
- _createClass(InteractionHandler, [{
- key: 'bindEventListeners',
- value: function bindEventListeners() {
- var _this = this;
+ addWeekParseToken(['gggg', 'ggggg', 'GGGG', 'GGGGG'], function (input, week, config, token) {
+ week[token.substr(0, 2)] = toInt(input);
+ });
- this.body.emitter.on('destroy', function () {
- clearTimeout(_this.popupTimer);
- delete _this.body.functions.getPointer;
- });
+ addWeekParseToken(['gg', 'GG'], function (input, week, config, token) {
+ week[token] = utils_hooks__hooks.parseTwoDigitYear(input);
+ });
+
+ // HELPERS
+
+ function weeksInYear(year, dow, doy) {
+ return weekOfYear(local__createLocal([year, 11, 31 + dow - doy]), dow, doy).week;
}
- }, {
- key: 'setOptions',
- value: function setOptions(options) {
- if (options !== undefined) {
- // extend all but the values in fields
- var fields = ['keyboard'];
- util.selectiveNotDeepExtend(fields, this.options, options);
- // merge the keyboard options in.
- util.mergeOptions(this.options, options, 'keyboard');
+ // MOMENTS
- if (options.tooltip) {
- util.extend(this.options.tooltip, options.tooltip);
- if (options.tooltip.color) {
- this.options.tooltip.color = util.parseColor(options.tooltip.color);
- }
- }
- }
+ function getSetWeekYear (input) {
+ var year = weekOfYear(this, this.localeData()._week.dow, this.localeData()._week.doy).year;
+ return input == null ? year : this.add((input - year), 'y');
+ }
- this.navigationHandler.setOptions(this.options);
+ function getSetISOWeekYear (input) {
+ var year = weekOfYear(this, 1, 4).year;
+ return input == null ? year : this.add((input - year), 'y');
}
- }, {
- key: 'getPointer',
- /**
- * Get the pointer location from a touch location
- * @param {{x: Number, y: Number}} touch
- * @return {{x: Number, y: Number}} pointer
- * @private
- */
- value: function getPointer(touch) {
- return {
- x: touch.x - util.getAbsoluteLeft(this.canvas.frame.canvas),
- y: touch.y - util.getAbsoluteTop(this.canvas.frame.canvas)
- };
+ function getISOWeeksInYear () {
+ return weeksInYear(this.year(), 1, 4);
}
- }, {
- key: 'onTouch',
- /**
- * On start of a touch gesture, store the pointer
- * @param event
- * @private
- */
- value: function onTouch(event) {
- if (new Date().valueOf() - this.touchTime > 50) {
- this.drag.pointer = this.getPointer(event.center);
- this.drag.pinched = false;
- this.pinch.scale = this.body.view.scale;
- // to avoid double fireing of this event because we have two hammer instances. (on canvas and on frame)
- this.touchTime = new Date().valueOf();
- }
+ function getWeeksInYear () {
+ var weekInfo = this.localeData()._week;
+ return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
}
- }, {
- key: 'onTap',
- /**
- * handle tap/click event: select/unselect a node
- * @private
- */
- value: function onTap(event) {
- var pointer = this.getPointer(event.center);
+ addFormatToken('Q', 0, 0, 'quarter');
- this.checkSelectionChanges(pointer);
+ // ALIASES
- this.selectionHandler._generateClickEvent('click', pointer);
- }
- }, {
- key: 'onDoubleTap',
+ addUnitAlias('quarter', 'Q');
- /**
- * handle doubletap event
- * @private
- */
- value: function onDoubleTap(event) {
- var pointer = this.getPointer(event.center);
- this.selectionHandler._generateClickEvent('doubleClick', pointer);
- }
- }, {
- key: 'onHold',
+ // PARSING
- /**
- * handle long tap event: multi select nodes
- * @private
- */
- value: function onHold(event) {
- var pointer = this.getPointer(event.center);
+ addRegexToken('Q', match1);
+ addParseToken('Q', function (input, array) {
+ array[MONTH] = (toInt(input) - 1) * 3;
+ });
- this.checkSelectionChanges(pointer, true);
+ // MOMENTS
- this.selectionHandler._generateClickEvent('click', pointer);
- this.selectionHandler._generateClickEvent('hold', pointer);
+ function getSetQuarter (input) {
+ return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
}
- }, {
- key: 'onRelease',
- /**
- * handle the release of the screen
- *
- * @private
- */
- value: function onRelease(event) {
- if (new Date().valueOf() - this.touchTime > 10) {
- var pointer = this.getPointer(event.center);
- this.selectionHandler._generateClickEvent('release', pointer);
- // to avoid double fireing of this event because we have two hammer instances. (on canvas and on frame)
- this.touchTime = new Date().valueOf();
- }
- }
- }, {
- key: 'onContext',
- value: function onContext(event) {
- var pointer = this.getPointer({ x: event.pageX, y: event.pageY });
- this.selectionHandler._generateClickEvent('rightClick', pointer);
- }
- }, {
- key: 'checkSelectionChanges',
+ addFormatToken('D', ['DD', 2], 'Do', 'date');
- /**
- *
- * @param pointer
- * @param add
- */
- value: function checkSelectionChanges(pointer) {
- var add = arguments[1] === undefined ? false : arguments[1];
+ // ALIASES
- var previouslySelectedEdgeCount = this.selectionHandler._getSelectedEdgeCount();
- var previouslySelectedNodeCount = this.selectionHandler._getSelectedNodeCount();
- var previousSelection = this.selectionHandler.getSelection();
- var selected = undefined;
- if (add === true) {
- selected = this.selectionHandler.selectAdditionalOnPoint(pointer);
- } else {
- selected = this.selectionHandler.selectOnPoint(pointer);
- }
- var selectedEdges = this.selectionHandler._getSelectedEdgeCount();
- var selectedNodes = this.selectionHandler._getSelectedNodeCount();
+ addUnitAlias('date', 'D');
- if (selectedNodes - previouslySelectedNodeCount > 0) {
- // node was selected
- this.selectionHandler._generateClickEvent('selectNode', pointer);
- selected = true;
- } else if (selectedNodes - previouslySelectedNodeCount < 0) {
- // node was deselected
- this.selectionHandler._generateClickEvent('deselectNode', pointer, previousSelection);
- selected = true;
- }
+ // PARSING
- if (selectedEdges - previouslySelectedEdgeCount > 0) {
- // node was selected
- this.selectionHandler._generateClickEvent('selectEdge', pointer);
- selected = true;
- } else if (selectedEdges - previouslySelectedEdgeCount < 0) {
- // node was deselected
- this.selectionHandler._generateClickEvent('deselectEdge', pointer, previousSelection);
- selected = true;
- }
+ addRegexToken('D', match1to2);
+ addRegexToken('DD', match1to2, match2);
+ addRegexToken('Do', function (isStrict, locale) {
+ return isStrict ? locale._ordinalParse : locale._ordinalParseLenient;
+ });
- if (selected === true) {
- // select or unselect
- this.selectionHandler._generateClickEvent('select', pointer);
- }
- }
- }, {
- key: 'onDragStart',
+ addParseToken(['D', 'DD'], DATE);
+ addParseToken('Do', function (input, array) {
+ array[DATE] = toInt(input.match(match1to2)[0], 10);
+ });
- /**
- * This function is called by onDragStart.
- * It is separated out because we can then overload it for the datamanipulation system.
- *
- * @private
- */
- value: function onDragStart(event) {
- //in case the touch event was triggered on an external div, do the initial touch now.
- if (this.drag.pointer === undefined) {
- this.onTouch(event);
- }
+ // MOMENTS
- // note: drag.pointer is set in onTouch to get the initial touch location
- var node = this.selectionHandler.getNodeAt(this.drag.pointer);
+ var getSetDayOfMonth = makeGetSet('Date', true);
- this.drag.dragging = true;
- this.drag.selection = [];
- this.drag.translation = util.extend({}, this.body.view.translation); // copy the object
- this.drag.nodeId = undefined;
+ addFormatToken('d', 0, 'do', 'day');
- this.selectionHandler._generateClickEvent('dragStart', this.drag.pointer);
+ addFormatToken('dd', 0, 0, function (format) {
+ return this.localeData().weekdaysMin(this, format);
+ });
- if (node !== undefined && this.options.dragNodes === true) {
- this.drag.nodeId = node.id;
- // select the clicked node if not yet selected
- if (node.isSelected() === false) {
- this.selectionHandler.unselectAll();
- this.selectionHandler.selectObject(node);
- }
+ addFormatToken('ddd', 0, 0, function (format) {
+ return this.localeData().weekdaysShort(this, format);
+ });
- var selection = this.selectionHandler.selectionObj.nodes;
- // create an array with the selected nodes and their original location and status
- for (var nodeId in selection) {
- if (selection.hasOwnProperty(nodeId)) {
- var object = selection[nodeId];
- var s = {
- id: object.id,
- node: object,
+ addFormatToken('dddd', 0, 0, function (format) {
+ return this.localeData().weekdays(this, format);
+ });
- // store original x, y, xFixed and yFixed, make the node temporarily Fixed
- x: object.x,
- y: object.y,
- xFixed: object.options.fixed.x,
- yFixed: object.options.fixed.y
- };
+ addFormatToken('e', 0, 0, 'weekday');
+ addFormatToken('E', 0, 0, 'isoWeekday');
- object.options.fixed.x = true;
- object.options.fixed.y = true;
+ // ALIASES
- this.drag.selection.push(s);
- }
+ addUnitAlias('day', 'd');
+ addUnitAlias('weekday', 'e');
+ addUnitAlias('isoWeekday', 'E');
+
+ // PARSING
+
+ addRegexToken('d', match1to2);
+ addRegexToken('e', match1to2);
+ addRegexToken('E', match1to2);
+ addRegexToken('dd', matchWord);
+ addRegexToken('ddd', matchWord);
+ addRegexToken('dddd', matchWord);
+
+ addWeekParseToken(['dd', 'ddd', 'dddd'], function (input, week, config) {
+ var weekday = config._locale.weekdaysParse(input);
+ // if we didn't get a weekday name, mark the date as invalid
+ if (weekday != null) {
+ week.d = weekday;
+ } else {
+ config._pf.invalidWeekday = input;
}
- }
+ });
+
+ addWeekParseToken(['d', 'e', 'E'], function (input, week, config, token) {
+ week[token] = toInt(input);
+ });
+
+ // HELPERS
+
+ function parseWeekday(input, locale) {
+ if (typeof input === 'string') {
+ if (!isNaN(input)) {
+ input = parseInt(input, 10);
+ }
+ else {
+ input = locale.weekdaysParse(input);
+ if (typeof input !== 'number') {
+ return null;
+ }
+ }
+ }
+ return input;
}
- }, {
- key: 'onDrag',
- /**
- * handle drag event
- * @private
- */
- value: function onDrag(event) {
- var _this2 = this;
+ // LOCALES
- if (this.drag.pinched === true) {
- return;
- }
+ var defaultLocaleWeekdays = 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_');
+ function localeWeekdays (m) {
+ return this._weekdays[m.day()];
+ }
- // remove the focus on node if it is focussed on by the focusOnNode
- this.body.emitter.emit('unlockNode');
+ var defaultLocaleWeekdaysShort = 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_');
+ function localeWeekdaysShort (m) {
+ return this._weekdaysShort[m.day()];
+ }
- var pointer = this.getPointer(event.center);
- var selection = this.drag.selection;
- if (selection && selection.length && this.options.dragNodes === true) {
- (function () {
- // calculate delta's and new location
- var deltaX = pointer.x - _this2.drag.pointer.x;
- var deltaY = pointer.y - _this2.drag.pointer.y;
+ var defaultLocaleWeekdaysMin = 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_');
+ function localeWeekdaysMin (m) {
+ return this._weekdaysMin[m.day()];
+ }
- // update position of all selected nodes
- selection.forEach(function (selection) {
- var node = selection.node;
- // only move the node if it was not fixed initially
- if (selection.xFixed === false) {
- node.x = _this2.canvas._XconvertDOMtoCanvas(_this2.canvas._XconvertCanvasToDOM(selection.x) + deltaX);
+ function localeWeekdaysParse (weekdayName) {
+ var i, mom, regex;
+
+ if (!this._weekdaysParse) {
+ this._weekdaysParse = [];
+ }
+
+ for (i = 0; i < 7; i++) {
+ // make the regex if we don't have it already
+ if (!this._weekdaysParse[i]) {
+ mom = local__createLocal([2000, 1]).day(i);
+ regex = '^' + this.weekdays(mom, '') + '|^' + this.weekdaysShort(mom, '') + '|^' + this.weekdaysMin(mom, '');
+ this._weekdaysParse[i] = new RegExp(regex.replace('.', ''), 'i');
}
- // only move the node if it was not fixed initially
- if (selection.yFixed === false) {
- node.y = _this2.canvas._YconvertDOMtoCanvas(_this2.canvas._YconvertCanvasToDOM(selection.y) + deltaY);
+ // test the regex
+ if (this._weekdaysParse[i].test(weekdayName)) {
+ return i;
}
- });
+ }
+ }
- // start the simulation of the physics
- _this2.body.emitter.emit('startSimulation');
- })();
- } else {
- // move the network
- if (this.options.dragView === true) {
- // if the drag was not started properly because the click started outside the network div, start it now.
- if (this.drag.pointer === undefined) {
- this._handleDragStart(event);
- return;
- }
- var diffX = pointer.x - this.drag.pointer.x;
- var diffY = pointer.y - this.drag.pointer.y;
+ // MOMENTS
- this.body.view.translation = { x: this.drag.translation.x + diffX, y: this.drag.translation.y + diffY };
- this.body.emitter.emit('_redraw');
+ function getSetDayOfWeek (input) {
+ var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
+ if (input != null) {
+ input = parseWeekday(input, this.localeData());
+ return this.add(input - day, 'd');
+ } else {
+ return day;
}
- }
}
- }, {
- key: 'onDragEnd',
- /**
- * handle drag start event
- * @private
- */
- value: function onDragEnd(event) {
- this.drag.dragging = false;
- var selection = this.drag.selection;
- if (selection && selection.length) {
- selection.forEach(function (s) {
- // restore original xFixed and yFixed
- s.node.options.fixed.x = s.xFixed;
- s.node.options.fixed.y = s.yFixed;
- });
- this.body.emitter.emit('startSimulation');
- } else {
- this.body.emitter.emit('_requestRedraw');
- }
- this.selectionHandler._generateClickEvent('dragEnd', this.getPointer(event.center));
+ function getSetLocaleDayOfWeek (input) {
+ var weekday = (this.day() + 7 - this.localeData()._week.dow) % 7;
+ return input == null ? weekday : this.add(input - weekday, 'd');
}
- }, {
- key: 'onPinch',
- /**
- * Handle pinch event
- * @param event
- * @private
- */
- value: function onPinch(event) {
- var pointer = this.getPointer(event.center);
+ function getSetISODayOfWeek (input) {
+ // behaves the same as moment#day except
+ // as a getter, returns 7 instead of 0 (1-7 range instead of 0-6)
+ // as a setter, sunday should belong to the previous week.
+ return input == null ? this.day() || 7 : this.day(this.day() % 7 ? input : input - 7);
+ }
- this.drag.pinched = true;
- if (this.pinch.scale === undefined) {
- this.pinch.scale = 1;
- }
+ addFormatToken('H', ['HH', 2], 0, 'hour');
+ addFormatToken('h', ['hh', 2], 0, function () {
+ return this.hours() % 12 || 12;
+ });
- // TODO: enabled moving while pinching?
- var scale = this.pinch.scale * event.scale;
- this.zoom(scale, pointer);
+ function meridiem (token, lowercase) {
+ addFormatToken(token, 0, 0, function () {
+ return this.localeData().meridiem(this.hours(), this.minutes(), lowercase);
+ });
}
- }, {
- key: 'zoom',
- /**
- * Zoom the network in or out
- * @param {Number} scale a number around 1, and between 0.01 and 10
- * @param {{x: Number, y: Number}} pointer Position on screen
- * @return {Number} appliedScale scale is limited within the boundaries
- * @private
- */
- value: function zoom(scale, pointer) {
- if (this.options.zoomView === true) {
- var scaleOld = this.body.view.scale;
- if (scale < 0.00001) {
- scale = 0.00001;
- }
- if (scale > 10) {
- scale = 10;
- }
+ meridiem('a', true);
+ meridiem('A', false);
- var preScaleDragPointer = undefined;
- if (this.drag !== undefined) {
- if (this.drag.dragging === true) {
- preScaleDragPointer = this.canvas.DOMtoCanvas(this.drag.pointer);
- }
- }
- // + this.canvas.frame.canvas.clientHeight / 2
- var translation = this.body.view.translation;
+ // ALIASES
- var scaleFrac = scale / scaleOld;
- var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
- var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
+ addUnitAlias('hour', 'h');
- this.body.view.scale = scale;
- this.body.view.translation = { x: tx, y: ty };
+ // PARSING
- if (preScaleDragPointer != undefined) {
- var postScaleDragPointer = this.canvas.canvasToDOM(preScaleDragPointer);
- this.drag.pointer.x = postScaleDragPointer.x;
- this.drag.pointer.y = postScaleDragPointer.y;
- }
+ function matchMeridiem (isStrict, locale) {
+ return locale._meridiemParse;
+ }
- this.body.emitter.emit('_requestRedraw');
+ addRegexToken('a', matchMeridiem);
+ addRegexToken('A', matchMeridiem);
+ addRegexToken('H', match1to2);
+ addRegexToken('h', match1to2);
+ addRegexToken('HH', match1to2, match2);
+ addRegexToken('hh', match1to2, match2);
- if (scaleOld < scale) {
- this.body.emitter.emit('zoom', { direction: '+' });
+ addParseToken(['H', 'HH'], HOUR);
+ addParseToken(['a', 'A'], function (input, array, config) {
+ config._isPm = config._locale.isPM(input);
+ config._meridiem = input;
+ });
+ addParseToken(['h', 'hh'], function (input, array, config) {
+ array[HOUR] = toInt(input);
+ config._pf.bigHour = true;
+ });
+
+ // LOCALES
+
+ function localeIsPM (input) {
+ // IE8 Quirks Mode & IE7 Standards Mode do not allow accessing strings like arrays
+ // Using charAt should be more compatible.
+ return ((input + '').toLowerCase().charAt(0) === 'p');
+ }
+
+ var defaultLocaleMeridiemParse = /[ap]\.?m?\.?/i;
+ function localeMeridiem (hours, minutes, isLower) {
+ if (hours > 11) {
+ return isLower ? 'pm' : 'PM';
} else {
- this.body.emitter.emit('zoom', { direction: '-' });
+ return isLower ? 'am' : 'AM';
}
- }
}
- }, {
- key: 'onMouseWheel',
- /**
- * Event handler for mouse wheel event, used to zoom the timeline
- * See http://adomas.org/javascript-mouse-wheel/
- * https://github.com/EightMedia/hammer.js/issues/256
- * @param {MouseEvent} event
- * @private
- */
- value: function onMouseWheel(event) {
- // retrieve delta
- var delta = 0;
- if (event.wheelDelta) {
- /* IE/Opera. */
- delta = event.wheelDelta / 120;
- } else if (event.detail) {
- /* Mozilla case. */
- // In Mozilla, sign of delta is different than in IE.
- // Also, delta is multiple of 3.
- delta = -event.detail / 3;
- }
- // If delta is nonzero, handle it.
- // Basically, delta is now positive if wheel was scrolled up,
- // and negative, if wheel was scrolled down.
- if (delta !== 0) {
+ // MOMENTS
- // calculate the new scale
- var scale = this.body.view.scale;
- var zoom = delta / 10;
- if (delta < 0) {
- zoom = zoom / (1 - zoom);
- }
- scale *= 1 + zoom;
+ // Setting the hour should keep the time, because the user explicitly
+ // specified which hour he wants. So trying to maintain the same hour (in
+ // a new timezone) makes sense. Adding/subtracting hours does not follow
+ // this rule.
+ var getSetHour = makeGetSet('Hours', true);
- // calculate the pointer location
- var pointer = this.getPointer({ x: event.pageX, y: event.pageY });
+ addFormatToken('m', ['mm', 2], 0, 'minute');
- // apply the new scale
- this.zoom(scale, pointer);
- }
+ // ALIASES
- // Prevent default actions caused by mouse wheel.
- event.preventDefault();
- }
- }, {
- key: 'onMouseMove',
+ addUnitAlias('minute', 'm');
- /**
- * Mouse move handler for checking whether the title moves over a node with a title.
- * @param {Event} event
- * @private
- */
- value: function onMouseMove(event) {
- var _this3 = this;
+ // PARSING
- var pointer = this.getPointer({ x: event.pageX, y: event.pageY });
- var popupVisible = false;
+ addRegexToken('m', match1to2);
+ addRegexToken('mm', match1to2, match2);
+ addParseToken(['m', 'mm'], MINUTE);
- // check if the previously selected node is still selected
- if (this.popup !== undefined) {
- if (this.popup.hidden === false) {
- this._checkHidePopup(pointer);
- }
+ // MOMENTS
- // if the popup was not hidden above
- if (this.popup.hidden === false) {
- popupVisible = true;
- this.popup.setPosition(pointer.x + 3, pointer.y - 5);
- this.popup.show();
- }
- }
+ var getSetMinute = makeGetSet('Minutes', false);
- // if we bind the keyboard to the div, we have to highlight it to use it. This highlights it on mouse over.
- if (this.options.keyboard.bindToWindow === false && this.options.keyboard.enabled === true) {
- this.canvas.frame.focus();
- }
+ addFormatToken('s', ['ss', 2], 0, 'second');
- // start a timeout that will check if the mouse is positioned above an element
- if (popupVisible === false) {
- if (this.popupTimer !== undefined) {
- clearInterval(this.popupTimer); // stop any running calculationTimer
- this.popupTimer = undefined;
- }
- if (!this.drag.dragging) {
- this.popupTimer = setTimeout(function () {
- return _this3._checkShowPopup(pointer);
- }, this.options.tooltipDelay);
- }
- }
+ // ALIASES
- /**
- * Adding hover highlights
- */
- if (this.options.hoverEnabled === true) {
- // removing all hover highlights
- for (var edgeId in this.hoverObj.edges) {
- if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
- this.hoverObj.edges[edgeId].hover = false;
- delete this.hoverObj.edges[edgeId];
- }
- }
+ addUnitAlias('second', 's');
- // adding hover highlights
- var obj = this.selectionHandler.getNodeAt(pointer);
- if (obj === undefined) {
- obj = this.selectionHandler.getEdgeAt(pointer);
- }
- if (obj != undefined) {
- this.selectionHandler.hoverObject(obj);
- }
+ // PARSING
- // removing all node hover highlights except for the selected one.
- for (var nodeId in this.hoverObj.nodes) {
- if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
- if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj === undefined) {
- this.selectionHandler.blurObject(this.hoverObj.nodes[nodeId]);
- delete this.hoverObj.nodes[nodeId];
- }
- }
- }
- this.body.emitter.emit('_requestRedraw');
- }
- }
- }, {
- key: '_checkShowPopup',
+ addRegexToken('s', match1to2);
+ addRegexToken('ss', match1to2, match2);
+ addParseToken(['s', 'ss'], SECOND);
- /**
- * Check if there is an element on the given position in the network
- * (a node or edge). If so, and if this element has a title,
- * show a popup window with its title.
- *
- * @param {{x:Number, y:Number}} pointer
- * @private
- */
- value: function _checkShowPopup(pointer) {
- var x = this.canvas._XconvertDOMtoCanvas(pointer.x);
- var y = this.canvas._YconvertDOMtoCanvas(pointer.y);
- var pointerObj = {
- left: x,
- top: y,
- right: x,
- bottom: y
- };
+ // MOMENTS
- var previousPopupObjId = this.popupObj === undefined ? undefined : this.popupObj.id;
- var nodeUnderCursor = false;
- var popupType = 'node';
+ var getSetSecond = makeGetSet('Seconds', false);
- // check if a node is under the cursor.
- if (this.popupObj === undefined) {
- // search the nodes for overlap, select the top one in case of multiple nodes
- var nodeIndices = this.body.nodeIndices;
- var nodes = this.body.nodes;
- var node = undefined;
- var overlappingNodes = [];
- for (var i = 0; i < nodeIndices.length; i++) {
- node = nodes[nodeIndices[i]];
- if (node.isOverlappingWith(pointerObj) === true) {
- if (node.getTitle() !== undefined) {
- overlappingNodes.push(nodeIndices[i]);
- }
- }
- }
+ addFormatToken('S', 0, 0, function () {
+ return ~~(this.millisecond() / 100);
+ });
- if (overlappingNodes.length > 0) {
- // if there are overlapping nodes, select the last one, this is the one which is drawn on top of the others
- this.popupObj = nodes[overlappingNodes[overlappingNodes.length - 1]];
- // if you hover over a node, the title of the edge is not supposed to be shown.
- nodeUnderCursor = true;
- }
- }
+ addFormatToken(0, ['SS', 2], 0, function () {
+ return ~~(this.millisecond() / 10);
+ });
- if (this.popupObj === undefined && nodeUnderCursor === false) {
- // search the edges for overlap
- var edgeIndices = this.body.edgeIndices;
- var edges = this.body.edges;
- var edge = undefined;
- var overlappingEdges = [];
- for (var i = 0; i < edgeIndices.length; i++) {
- edge = edges[edgeIndices[i]];
- if (edge.isOverlappingWith(pointerObj) === true) {
- if (edge.connected === true && edge.getTitle() !== undefined) {
- overlappingEdges.push(edgeIndices[i]);
- }
- }
- }
+ function millisecond__milliseconds (token) {
+ addFormatToken(0, [token, 3], 0, 'millisecond');
+ }
- if (overlappingEdges.length > 0) {
- this.popupObj = edges[overlappingEdges[overlappingEdges.length - 1]];
- popupType = 'edge';
- }
- }
+ millisecond__milliseconds('SSS');
+ millisecond__milliseconds('SSSS');
- if (this.popupObj !== undefined) {
- // show popup message window
- if (this.popupObj.id !== previousPopupObjId) {
- if (this.popup === undefined) {
- this.popup = new _Popup2['default'](this.canvas.frame);
- }
+ // ALIASES
- this.popup.popupTargetType = popupType;
- this.popup.popupTargetId = this.popupObj.id;
+ addUnitAlias('millisecond', 'ms');
- // adjust a small offset such that the mouse cursor is located in the
- // bottom left location of the popup, and you can easily move over the
- // popup area
- this.popup.setPosition(pointer.x + 3, pointer.y - 5);
- this.popup.setText(this.popupObj.getTitle());
- this.popup.show();
- this.body.emitter.emit('showPopup', this.popupObj.id);
- }
- } else {
- if (this.popup !== undefined) {
- this.popup.hide();
- this.body.emitter.emit('hidePopup');
- }
- }
- }
- }, {
- key: '_checkHidePopup',
+ // PARSING
- /**
- * Check if the popup must be hidden, which is the case when the mouse is no
- * longer hovering on the object
- * @param {{x:Number, y:Number}} pointer
- * @private
- */
- value: function _checkHidePopup(pointer) {
- var pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
+ addRegexToken('S', match1to3, match1);
+ addRegexToken('SS', match1to3, match2);
+ addRegexToken('SSS', match1to3, match3);
+ addRegexToken('SSSS', matchUnsigned);
+ addParseToken(['S', 'SS', 'SSS', 'SSSS'], function (input, array) {
+ array[MILLISECOND] = toInt(('0.' + input) * 1000);
+ });
- var stillOnObj = false;
- if (this.popup.popupTargetType === 'node') {
- if (this.body.nodes[this.popup.popupTargetId] !== undefined) {
- stillOnObj = this.body.nodes[this.popup.popupTargetId].isOverlappingWith(pointerObj);
+ // MOMENTS
- // if the mouse is still one the node, we have to check if it is not also on one that is drawn on top of it.
- // we initially only check stillOnObj because this is much faster.
- if (stillOnObj === true) {
- var overNode = this.selectionHandler.getNodeAt(pointer);
- stillOnObj = overNode.id === this.popup.popupTargetId;
- }
- }
- } else {
- if (this.selectionHandler.getNodeAt(pointer) === undefined) {
- if (this.body.edges[this.popup.popupTargetId] !== undefined) {
- stillOnObj = this.body.edges[this.popup.popupTargetId].isOverlappingWith(pointerObj);
- }
- }
- }
+ var getSetMillisecond = makeGetSet('Milliseconds', false);
- if (stillOnObj === false) {
- this.popupObj = undefined;
- this.popup.hide();
- this.body.emitter.emit('hidePopup');
- }
+ addFormatToken('z', 0, 0, 'zoneAbbr');
+ addFormatToken('zz', 0, 0, 'zoneName');
+
+ // MOMENTS
+
+ function getZoneAbbr () {
+ return this._isUTC ? 'UTC' : '';
}
- }]);
- return InteractionHandler;
- })();
+ function getZoneName () {
+ return this._isUTC ? 'Coordinated Universal Time' : '';
+ }
- exports['default'] = InteractionHandler;
- module.exports = exports['default'];
+ var momentPrototype__proto = Moment.prototype;
-/***/ },
-/* 66 */
-/***/ function(module, exports, __webpack_require__) {
+ momentPrototype__proto.add = add_subtract__add;
+ momentPrototype__proto.calendar = moment_calendar__calendar;
+ momentPrototype__proto.clone = clone;
+ momentPrototype__proto.diff = diff;
+ momentPrototype__proto.endOf = endOf;
+ momentPrototype__proto.format = format;
+ momentPrototype__proto.from = from;
+ momentPrototype__proto.fromNow = fromNow;
+ momentPrototype__proto.get = getSet;
+ momentPrototype__proto.invalidAt = invalidAt;
+ momentPrototype__proto.isAfter = isAfter;
+ momentPrototype__proto.isBefore = isBefore;
+ momentPrototype__proto.isBetween = isBetween;
+ momentPrototype__proto.isSame = isSame;
+ momentPrototype__proto.isValid = moment_valid__isValid;
+ momentPrototype__proto.lang = lang;
+ momentPrototype__proto.locale = locale;
+ momentPrototype__proto.localeData = localeData;
+ momentPrototype__proto.max = prototypeMax;
+ momentPrototype__proto.min = prototypeMin;
+ momentPrototype__proto.parsingFlags = parsingFlags;
+ momentPrototype__proto.set = getSet;
+ momentPrototype__proto.startOf = startOf;
+ momentPrototype__proto.subtract = add_subtract__subtract;
+ momentPrototype__proto.toArray = toArray;
+ momentPrototype__proto.toDate = toDate;
+ momentPrototype__proto.toISOString = moment_format__toISOString;
+ momentPrototype__proto.toJSON = moment_format__toISOString;
+ momentPrototype__proto.toString = toString;
+ momentPrototype__proto.unix = unix;
+ momentPrototype__proto.valueOf = to_type__valueOf;
- "use strict";
+ // Year
+ momentPrototype__proto.year = getSetYear;
+ momentPrototype__proto.isLeapYear = getIsLeapYear;
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
+ // Week Year
+ momentPrototype__proto.weekYear = getSetWeekYear;
+ momentPrototype__proto.isoWeekYear = getSetISOWeekYear;
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ // Quarter
+ momentPrototype__proto.quarter = momentPrototype__proto.quarters = getSetQuarter;
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- var Node = __webpack_require__(73);
- var util = __webpack_require__(1);
+ // Month
+ momentPrototype__proto.month = getSetMonth;
+ momentPrototype__proto.daysInMonth = getDaysInMonth;
- var SelectionHandler = (function () {
- function SelectionHandler(body, canvas) {
- var _this = this;
+ // Week
+ momentPrototype__proto.week = momentPrototype__proto.weeks = getSetWeek;
+ momentPrototype__proto.isoWeek = momentPrototype__proto.isoWeeks = getSetISOWeek;
+ momentPrototype__proto.weeksInYear = getWeeksInYear;
+ momentPrototype__proto.isoWeeksInYear = getISOWeeksInYear;
- _classCallCheck(this, SelectionHandler);
+ // Day
+ momentPrototype__proto.date = getSetDayOfMonth;
+ momentPrototype__proto.day = momentPrototype__proto.days = getSetDayOfWeek;
+ momentPrototype__proto.weekday = getSetLocaleDayOfWeek;
+ momentPrototype__proto.isoWeekday = getSetISODayOfWeek;
+ momentPrototype__proto.dayOfYear = getSetDayOfYear;
- this.body = body;
- this.canvas = canvas;
- this.selectionObj = { nodes: [], edges: [] };
+ // Hour
+ momentPrototype__proto.hour = momentPrototype__proto.hours = getSetHour;
- this.options = {};
- this.defaultOptions = {
- select: true,
- selectConnectedEdges: true
- };
- util.extend(this.options, this.defaultOptions);
+ // Minute
+ momentPrototype__proto.minute = momentPrototype__proto.minutes = getSetMinute;
- this.body.emitter.on("_dataChanged", function () {
- _this.updateSelection();
- });
- }
+ // Second
+ momentPrototype__proto.second = momentPrototype__proto.seconds = getSetSecond;
- _createClass(SelectionHandler, [{
- key: "setOptions",
- value: function setOptions(options) {
- if (options !== undefined) {
- util.deepExtend(this.options, options);
- }
- }
- }, {
- key: "selectOnPoint",
+ // Millisecond
+ momentPrototype__proto.millisecond = momentPrototype__proto.milliseconds = getSetMillisecond;
- /**
- * handles the selection part of the tap;
- *
- * @param {Object} pointer
- * @private
- */
- value: function selectOnPoint(pointer) {
- var selected = false;
- if (this.options.select === true) {
- this.unselectAll();
- var obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
- if (obj !== undefined) {
- selected = this.selectObject(obj);
- }
- this.body.emitter.emit("_requestRedraw");
- }
- return selected;
- }
- }, {
- key: "selectAdditionalOnPoint",
- value: function selectAdditionalOnPoint(pointer) {
- var selectionChanged = false;
- if (this.options.select === true) {
- var obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
+ // Offset
+ momentPrototype__proto.utcOffset = getSetOffset;
+ momentPrototype__proto.utc = setOffsetToUTC;
+ momentPrototype__proto.local = setOffsetToLocal;
+ momentPrototype__proto.parseZone = setOffsetToParsedOffset;
+ momentPrototype__proto.hasAlignedHourOffset = hasAlignedHourOffset;
+ momentPrototype__proto.isDST = isDaylightSavingTime;
+ momentPrototype__proto.isDSTShifted = isDaylightSavingTimeShifted;
+ momentPrototype__proto.isLocal = isLocal;
+ momentPrototype__proto.isUtcOffset = isUtcOffset;
+ momentPrototype__proto.isUtc = isUtc;
+ momentPrototype__proto.isUTC = isUtc;
- if (obj !== undefined) {
- selectionChanged = true;
- if (obj.isSelected() === true) {
- this.deselectObject(obj);
- } else {
- this.selectObject(obj);
- }
+ // Timezone
+ momentPrototype__proto.zoneAbbr = getZoneAbbr;
+ momentPrototype__proto.zoneName = getZoneName;
- this.body.emitter.emit("_requestRedraw");
- }
- }
- return selectionChanged;
- }
- }, {
- key: "_generateClickEvent",
- value: function _generateClickEvent(eventType, pointer, oldSelection) {
- var properties = this.getSelection();
- properties.pointer = {
- DOM: { x: pointer.x, y: pointer.y },
- canvas: this.canvas.DOMtoCanvas(pointer)
- };
+ // Deprecations
+ momentPrototype__proto.dates = deprecate('dates accessor is deprecated. Use date instead.', getSetDayOfMonth);
+ momentPrototype__proto.months = deprecate('months accessor is deprecated. Use month instead', getSetMonth);
+ momentPrototype__proto.years = deprecate('years accessor is deprecated. Use year instead', getSetYear);
+ momentPrototype__proto.zone = deprecate('moment().zone is deprecated, use moment().utcOffset instead. https://github.com/moment/moment/issues/1779', getSetZone);
- if (oldSelection !== undefined) {
- properties.previousSelection = oldSelection;
- }
- this.body.emitter.emit(eventType, properties);
+ var momentPrototype = momentPrototype__proto;
+
+ function moment__createUnix (input) {
+ return local__createLocal(input * 1000);
}
- }, {
- key: "selectObject",
- value: function selectObject(obj) {
- var highlightEdges = arguments[1] === undefined ? this.options.selectConnectedEdges : arguments[1];
- if (obj !== undefined) {
- if (obj instanceof Node) {
- if (highlightEdges === true) {
- this._selectConnectedEdges(obj);
- }
- }
- obj.select();
- this._addToSelection(obj);
- return true;
- }
- return false;
+ function moment__createInZone () {
+ return local__createLocal.apply(null, arguments).parseZone();
}
- }, {
- key: "deselectObject",
- value: function deselectObject(obj) {
- if (obj.isSelected() === true) {
- obj.selected = false;
- this._removeFromSelection(obj);
- }
+
+ var defaultCalendar = {
+ sameDay : '[Today at] LT',
+ nextDay : '[Tomorrow at] LT',
+ nextWeek : 'dddd [at] LT',
+ lastDay : '[Yesterday at] LT',
+ lastWeek : '[Last] dddd [at] LT',
+ sameElse : 'L'
+ };
+
+ function locale_calendar__calendar (key, mom, now) {
+ var output = this._calendar[key];
+ return typeof output === 'function' ? output.call(mom, now) : output;
}
- }, {
- key: "_getAllNodesOverlappingWith",
- /**
- * retrieve all nodes overlapping with given object
- * @param {Object} object An object with parameters left, top, right, bottom
- * @return {Number[]} An array with id's of the overlapping nodes
- * @private
- */
- value: function _getAllNodesOverlappingWith(object) {
- var overlappingNodes = [];
- var nodes = this.body.nodes;
- for (var i = 0; i < this.body.nodeIndices.length; i++) {
- var nodeId = this.body.nodeIndices[i];
- if (nodes[nodeId].isOverlappingWith(object)) {
- overlappingNodes.push(nodeId);
+ var defaultLongDateFormat = {
+ LTS : 'h:mm:ss A',
+ LT : 'h:mm A',
+ L : 'MM/DD/YYYY',
+ LL : 'MMMM D, YYYY',
+ LLL : 'MMMM D, YYYY LT',
+ LLLL : 'dddd, MMMM D, YYYY LT'
+ };
+
+ function longDateFormat (key) {
+ var output = this._longDateFormat[key];
+ if (!output && this._longDateFormat[key.toUpperCase()]) {
+ output = this._longDateFormat[key.toUpperCase()].replace(/MMMM|MM|DD|dddd/g, function (val) {
+ return val.slice(1);
+ });
+ this._longDateFormat[key] = output;
}
- }
- return overlappingNodes;
+ return output;
}
- }, {
- key: "_pointerToPositionObject",
- /**
- * Return a position object in canvasspace from a single point in screenspace
- *
- * @param pointer
- * @returns {{left: number, top: number, right: number, bottom: number}}
- * @private
- */
- value: function _pointerToPositionObject(pointer) {
- var canvasPos = this.canvas.DOMtoCanvas(pointer);
- return {
- left: canvasPos.x - 1,
- top: canvasPos.y + 1,
- right: canvasPos.x + 1,
- bottom: canvasPos.y - 1
- };
+ var defaultInvalidDate = 'Invalid date';
+
+ function invalidDate () {
+ return this._invalidDate;
}
- }, {
- key: "getNodeAt",
- /**
- * Get the top node at the a specific point (like a click)
- *
- * @param {{x: Number, y: Number}} pointer
- * @return {Node | undefined} node
- * @private
- */
- value: function getNodeAt(pointer) {
- var returnNode = arguments[1] === undefined ? true : arguments[1];
+ var defaultOrdinal = '%d';
+ var defaultOrdinalParse = /\d{1,2}/;
- // we first check if this is an navigation controls element
- var positionObject = this._pointerToPositionObject(pointer);
- var overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
- // if there are overlapping nodes, select the last one, this is the
- // one which is drawn on top of the others
- if (overlappingNodes.length > 0) {
- if (returnNode === true) {
- return this.body.nodes[overlappingNodes[overlappingNodes.length - 1]];
- } else {
- return overlappingNodes[overlappingNodes.length - 1];
- }
- } else {
- return undefined;
- }
+ function ordinal (number) {
+ return this._ordinal.replace('%d', number);
}
- }, {
- key: "_getEdgesOverlappingWith",
- /**
- * retrieve all edges overlapping with given object, selector is around center
- * @param {Object} object An object with parameters left, top, right, bottom
- * @return {Number[]} An array with id's of the overlapping nodes
- * @private
- */
- value: function _getEdgesOverlappingWith(object, overlappingEdges) {
- var edges = this.body.edges;
- for (var i = 0; i < this.body.edgeIndices.length; i++) {
- var edgeId = this.body.edgeIndices[i];
- if (edges[edgeId].isOverlappingWith(object)) {
- overlappingEdges.push(edgeId);
- }
- }
+ function preParsePostFormat (string) {
+ return string;
}
- }, {
- key: "_getAllEdgesOverlappingWith",
- /**
- * retrieve all nodes overlapping with given object
- * @param {Object} object An object with parameters left, top, right, bottom
- * @return {Number[]} An array with id's of the overlapping nodes
- * @private
- */
- value: function _getAllEdgesOverlappingWith(object) {
- var overlappingEdges = [];
- this._getEdgesOverlappingWith(object, overlappingEdges);
- return overlappingEdges;
- }
- }, {
- key: "getEdgeAt",
+ var defaultRelativeTime = {
+ future : 'in %s',
+ past : '%s ago',
+ s : 'a few seconds',
+ m : 'a minute',
+ mm : '%d minutes',
+ h : 'an hour',
+ hh : '%d hours',
+ d : 'a day',
+ dd : '%d days',
+ M : 'a month',
+ MM : '%d months',
+ y : 'a year',
+ yy : '%d years'
+ };
- /**
- * Place holder. To implement change the getNodeAt to a _getObjectAt. Have the _getObjectAt call
- * getNodeAt and _getEdgesAt, then priortize the selection to user preferences.
- *
- * @param pointer
- * @returns {undefined}
- * @private
- */
- value: function getEdgeAt(pointer) {
- var returnEdge = arguments[1] === undefined ? true : arguments[1];
+ function relative__relativeTime (number, withoutSuffix, string, isFuture) {
+ var output = this._relativeTime[string];
+ return (typeof output === 'function') ?
+ output(number, withoutSuffix, string, isFuture) :
+ output.replace(/%d/i, number);
+ }
- var positionObject = this._pointerToPositionObject(pointer);
- var overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
+ function pastFuture (diff, output) {
+ var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
+ return typeof format === 'function' ? format(output) : format.replace(/%s/i, output);
+ }
- if (overlappingEdges.length > 0) {
- if (returnEdge === true) {
- return this.body.edges[overlappingEdges[overlappingEdges.length - 1]];
- } else {
- return overlappingEdges[overlappingEdges.length - 1];
+ function locale_set__set (config) {
+ var prop, i;
+ for (i in config) {
+ prop = config[i];
+ if (typeof prop === 'function') {
+ this[i] = prop;
+ } else {
+ this['_' + i] = prop;
+ }
}
- } else {
- return undefined;
- }
+ // Lenient ordinal parsing accepts just a number in addition to
+ // number + (possibly) stuff coming from _ordinalParseLenient.
+ this._ordinalParseLenient = new RegExp(this._ordinalParse.source + '|' + /\d{1,2}/.source);
}
- }, {
- key: "_addToSelection",
- /**
- * Add object to the selection array.
- *
- * @param obj
- * @private
- */
- value: function _addToSelection(obj) {
- if (obj instanceof Node) {
- this.selectionObj.nodes[obj.id] = obj;
- } else {
- this.selectionObj.edges[obj.id] = obj;
- }
- }
- }, {
- key: "_addToHover",
-
- /**
- * Add object to the selection array.
- *
- * @param obj
- * @private
- */
- value: function _addToHover(obj) {
- if (obj instanceof Node) {
- this.hoverObj.nodes[obj.id] = obj;
- } else {
- this.hoverObj.edges[obj.id] = obj;
- }
- }
- }, {
- key: "_removeFromSelection",
+ var prototype__proto = Locale.prototype;
- /**
- * Remove a single option from selection.
- *
- * @param {Object} obj
- * @private
- */
- value: function _removeFromSelection(obj) {
- if (obj instanceof Node) {
- delete this.selectionObj.nodes[obj.id];
- } else {
- delete this.selectionObj.edges[obj.id];
- }
- }
- }, {
- key: "unselectAll",
+ prototype__proto._calendar = defaultCalendar;
+ prototype__proto.calendar = locale_calendar__calendar;
+ prototype__proto._longDateFormat = defaultLongDateFormat;
+ prototype__proto.longDateFormat = longDateFormat;
+ prototype__proto._invalidDate = defaultInvalidDate;
+ prototype__proto.invalidDate = invalidDate;
+ prototype__proto._ordinal = defaultOrdinal;
+ prototype__proto.ordinal = ordinal;
+ prototype__proto._ordinalParse = defaultOrdinalParse;
+ prototype__proto.preparse = preParsePostFormat;
+ prototype__proto.postformat = preParsePostFormat;
+ prototype__proto._relativeTime = defaultRelativeTime;
+ prototype__proto.relativeTime = relative__relativeTime;
+ prototype__proto.pastFuture = pastFuture;
+ prototype__proto.set = locale_set__set;
- /**
- * Unselect all. The selectionObj is useful for this.
- *
- * @private
- */
- value: function unselectAll() {
- for (var nodeId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- this.selectionObj.nodes[nodeId].unselect();
- }
- }
- for (var edgeId in this.selectionObj.edges) {
- if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
- this.selectionObj.edges[edgeId].unselect();
- }
- }
+ // Month
+ prototype__proto.months = localeMonths;
+ prototype__proto._months = defaultLocaleMonths;
+ prototype__proto.monthsShort = localeMonthsShort;
+ prototype__proto._monthsShort = defaultLocaleMonthsShort;
+ prototype__proto.monthsParse = localeMonthsParse;
- this.selectionObj = { nodes: {}, edges: {} };
- }
- }, {
- key: "_getSelectedNodeCount",
+ // Week
+ prototype__proto.week = localeWeek;
+ prototype__proto._week = defaultLocaleWeek;
+ prototype__proto.firstDayOfYear = localeFirstDayOfYear;
+ prototype__proto.firstDayOfWeek = localeFirstDayOfWeek;
- /**
- * return the number of selected nodes
- *
- * @returns {number}
- * @private
- */
- value: function _getSelectedNodeCount() {
- var count = 0;
- for (var nodeId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- count += 1;
- }
- }
- return count;
- }
- }, {
- key: "_getSelectedNode",
+ // Day of Week
+ prototype__proto.weekdays = localeWeekdays;
+ prototype__proto._weekdays = defaultLocaleWeekdays;
+ prototype__proto.weekdaysMin = localeWeekdaysMin;
+ prototype__proto._weekdaysMin = defaultLocaleWeekdaysMin;
+ prototype__proto.weekdaysShort = localeWeekdaysShort;
+ prototype__proto._weekdaysShort = defaultLocaleWeekdaysShort;
+ prototype__proto.weekdaysParse = localeWeekdaysParse;
- /**
- * return the selected node
- *
- * @returns {number}
- * @private
- */
- value: function _getSelectedNode() {
- for (var nodeId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- return this.selectionObj.nodes[nodeId];
- }
- }
- return undefined;
- }
- }, {
- key: "_getSelectedEdge",
+ // Hours
+ prototype__proto.isPM = localeIsPM;
+ prototype__proto._meridiemParse = defaultLocaleMeridiemParse;
+ prototype__proto.meridiem = localeMeridiem;
- /**
- * return the selected edge
- *
- * @returns {number}
- * @private
- */
- value: function _getSelectedEdge() {
- for (var edgeId in this.selectionObj.edges) {
- if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
- return this.selectionObj.edges[edgeId];
- }
- }
- return undefined;
+ function lists__get (format, index, field, setter) {
+ var locale = locale_locales__getLocale();
+ var utc = create_utc__createUTC().set(setter, index);
+ return locale[field](utc, format);
}
- }, {
- key: "_getSelectedEdgeCount",
- /**
- * return the number of selected edges
- *
- * @returns {number}
- * @private
- */
- value: function _getSelectedEdgeCount() {
- var count = 0;
- for (var edgeId in this.selectionObj.edges) {
- if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
- count += 1;
+ function list (format, index, field, count, setter) {
+ if (typeof format === 'number') {
+ index = format;
+ format = undefined;
}
- }
- return count;
- }
- }, {
- key: "_getSelectedObjectCount",
- /**
- * return the number of selected objects.
- *
- * @returns {number}
- * @private
- */
- value: function _getSelectedObjectCount() {
- var count = 0;
- for (var nodeId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- count += 1;
- }
- }
- for (var edgeId in this.selectionObj.edges) {
- if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
- count += 1;
- }
- }
- return count;
- }
- }, {
- key: "_selectionIsEmpty",
+ format = format || '';
- /**
- * Check if anything is selected
- *
- * @returns {boolean}
- * @private
- */
- value: function _selectionIsEmpty() {
- for (var nodeId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- return false;
- }
- }
- for (var edgeId in this.selectionObj.edges) {
- if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
- return false;
+ if (index != null) {
+ return lists__get(format, index, field, setter);
}
- }
- return true;
- }
- }, {
- key: "_clusterInSelection",
- /**
- * check if one of the selected nodes is a cluster.
- *
- * @returns {boolean}
- * @private
- */
- value: function _clusterInSelection() {
- for (var nodeId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
- return true;
- }
+ var i;
+ var out = [];
+ for (i = 0; i < count; i++) {
+ out[i] = lists__get(format, i, field, setter);
}
- }
- return false;
- }
- }, {
- key: "_selectConnectedEdges",
-
- /**
- * select the edges connected to the node that is being selected
- *
- * @param {Node} node
- * @private
- */
- value: function _selectConnectedEdges(node) {
- for (var i = 0; i < node.edges.length; i++) {
- var edge = node.edges[i];
- edge.select();
- this._addToSelection(edge);
- }
- }
- }, {
- key: "_hoverConnectedEdges",
-
- /**
- * select the edges connected to the node that is being selected
- *
- * @param {Node} node
- * @private
- */
- value: function _hoverConnectedEdges(node) {
- for (var i = 0; i < node.edges.length; i++) {
- var edge = node.edges[i];
- edge.hover = true;
- this._addToHover(edge);
- }
+ return out;
}
- }, {
- key: "_unselectConnectedEdges",
- /**
- * unselect the edges connected to the node that is being selected
- *
- * @param {Node} node
- * @private
- */
- value: function _unselectConnectedEdges(node) {
- for (var i = 0; i < node.edges.length; i++) {
- var edge = node.edges[i];
- edge.unselect();
- this._removeFromSelection(edge);
- }
+ function lists__listMonths (format, index) {
+ return list(format, index, 'months', 12, 'month');
}
- }, {
- key: "blurObject",
- /**
- * This is called when someone clicks on a node. either select or deselect it.
- * If there is an existing selection and we don't want to append to it, clear the existing selection
- *
- * @param {Node || Edge} object
- * @private
- */
- value: function blurObject(object) {
- if (object.hover === true) {
- object.hover = false;
- this.body.emitter.emit("blurNode", { node: object.id });
- }
+ function lists__listMonthsShort (format, index) {
+ return list(format, index, 'monthsShort', 12, 'month');
}
- }, {
- key: "hoverObject",
- /**
- * This is called when someone clicks on a node. either select or deselect it.
- * If there is an existing selection and we don't want to append to it, clear the existing selection
- *
- * @param {Node || Edge} object
- * @private
- */
- value: function hoverObject(object) {
- if (object.hover === false) {
- object.hover = true;
- this._addToHover(object);
- if (object instanceof Node) {
- this.body.emitter.emit("hoverNode", { node: object.id });
- }
- }
- if (object instanceof Node) {
- this._hoverConnectedEdges(object);
- }
+ function lists__listWeekdays (format, index) {
+ return list(format, index, 'weekdays', 7, 'day');
}
- }, {
- key: "getSelection",
- /**
- *
- * retrieve the currently selected objects
- * @return {{nodes: Array., edges: Array.}} selection
- */
- value: function getSelection() {
- var nodeIds = this.getSelectedNodes();
- var edgeIds = this.getSelectedEdges();
- return { nodes: nodeIds, edges: edgeIds };
+ function lists__listWeekdaysShort (format, index) {
+ return list(format, index, 'weekdaysShort', 7, 'day');
}
- }, {
- key: "getSelectedNodes",
- /**
- *
- * retrieve the currently selected nodes
- * @return {String[]} selection An array with the ids of the
- * selected nodes.
- */
- value: function getSelectedNodes() {
- var idArray = [];
- if (this.options.select === true) {
- for (var nodeId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- idArray.push(nodeId);
- }
- }
- }
- return idArray;
+ function lists__listWeekdaysMin (format, index) {
+ return list(format, index, 'weekdaysMin', 7, 'day');
}
- }, {
- key: "getSelectedEdges",
- /**
- *
- * retrieve the currently selected edges
- * @return {Array} selection An array with the ids of the
- * selected nodes.
- */
- value: function getSelectedEdges() {
- var idArray = [];
- if (this.options.select === true) {
- for (var edgeId in this.selectionObj.edges) {
- if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
- idArray.push(edgeId);
- }
+ locale_locales__getSetGlobalLocale('en', {
+ ordinalParse: /\d{1,2}(th|st|nd|rd)/,
+ ordinal : function (number) {
+ var b = number % 10,
+ output = (toInt(number % 100 / 10) === 1) ? 'th' :
+ (b === 1) ? 'st' :
+ (b === 2) ? 'nd' :
+ (b === 3) ? 'rd' : 'th';
+ return number + output;
}
- }
- return idArray;
- }
- }, {
- key: "selectNodes",
+ });
- /**
- * select zero or more nodes with the option to highlight edges
- * @param {Number[] | String[]} selection An array with the ids of the
- * selected nodes.
- * @param {boolean} [highlightEdges]
- */
- value: function selectNodes(selection) {
- var highlightEdges = arguments[1] === undefined ? true : arguments[1];
+ // Side effect imports
+ utils_hooks__hooks.lang = deprecate('moment.lang is deprecated. Use moment.locale instead.', locale_locales__getSetGlobalLocale);
+ utils_hooks__hooks.langData = deprecate('moment.langData is deprecated. Use moment.localeData instead.', locale_locales__getLocale);
- var i = undefined,
- id = undefined;
+ var mathAbs = Math.abs;
- if (!selection || selection.length === undefined) throw "Selection must be an array with ids";
+ function duration_abs__abs () {
+ var data = this._data;
- // first unselect any selected node
- this.unselectAll();
+ this._milliseconds = mathAbs(this._milliseconds);
+ this._days = mathAbs(this._days);
+ this._months = mathAbs(this._months);
- for (i = 0; i < selection.length; i++) {
- id = selection[i];
+ data.milliseconds = mathAbs(data.milliseconds);
+ data.seconds = mathAbs(data.seconds);
+ data.minutes = mathAbs(data.minutes);
+ data.hours = mathAbs(data.hours);
+ data.months = mathAbs(data.months);
+ data.years = mathAbs(data.years);
- var node = this.body.nodes[id];
- if (!node) {
- throw new RangeError("Node with id \"" + id + "\" not found");
- }
- this.selectObject(node, highlightEdges);
- }
- this.body.emitter.emit("_requestRedraw");
+ return this;
}
- }, {
- key: "selectEdges",
-
- /**
- * select zero or more edges
- * @param {Number[] | String[]} selection An array with the ids of the
- * selected nodes.
- */
- value: function selectEdges(selection) {
- var i = undefined,
- id = undefined;
- if (!selection || selection.length === undefined) throw "Selection must be an array with ids";
+ function duration_add_subtract__addSubtract (duration, input, value, direction) {
+ var other = create__createDuration(input, value);
- // first unselect any selected objects
- this.unselectAll();
+ duration._milliseconds += direction * other._milliseconds;
+ duration._days += direction * other._days;
+ duration._months += direction * other._months;
- for (i = 0; i < selection.length; i++) {
- id = selection[i];
+ return duration._bubble();
+ }
- var edge = this.body.edges[id];
- if (!edge) {
- throw new RangeError("Edge with id \"" + id + "\" not found");
- }
- this.selectObject(edge);
- }
- this.body.emitter.emit("_requestRedraw");
+ // supports only 2.0-style add(1, 's') or add(duration)
+ function duration_add_subtract__add (input, value) {
+ return duration_add_subtract__addSubtract(this, input, value, 1);
}
- }, {
- key: "updateSelection",
- /**
- * Validate the selection: remove ids of nodes which no longer exist
- * @private
- */
- value: function updateSelection() {
- for (var nodeId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- if (!this.body.nodes.hasOwnProperty(nodeId)) {
- delete this.selectionObj.nodes[nodeId];
- }
- }
- }
- for (var edgeId in this.selectionObj.edges) {
- if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
- if (!this.body.edges.hasOwnProperty(edgeId)) {
- delete this.selectionObj.edges[edgeId];
- }
- }
- }
+ // supports only 2.0-style subtract(1, 's') or subtract(duration)
+ function duration_add_subtract__subtract (input, value) {
+ return duration_add_subtract__addSubtract(this, input, value, -1);
}
- }]);
- return SelectionHandler;
- })();
+ function bubble () {
+ var milliseconds = this._milliseconds;
+ var days = this._days;
+ var months = this._months;
+ var data = this._data;
+ var seconds, minutes, hours, years = 0;
- exports["default"] = SelectionHandler;
- module.exports = exports["default"];
+ // The following code bubbles up values, see the tests for
+ // examples of what that means.
+ data.milliseconds = milliseconds % 1000;
-/***/ },
-/* 67 */
-/***/ function(module, exports, __webpack_require__) {
+ seconds = absFloor(milliseconds / 1000);
+ data.seconds = seconds % 60;
- 'use strict';
+ minutes = absFloor(seconds / 60);
+ data.minutes = minutes % 60;
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
+ hours = absFloor(minutes / 60);
+ data.hours = hours % 24;
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ days += absFloor(hours / 24);
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
- var util = __webpack_require__(1);
-
- var LayoutEngine = (function () {
- function LayoutEngine(body) {
- _classCallCheck(this, LayoutEngine);
-
- this.body = body;
+ // Accurately convert days to years, assume start from year 0.
+ years = absFloor(daysToYears(days));
+ days -= absFloor(yearsToDays(years));
- this.initialRandomSeed = Math.round(Math.random() * 1000000);
- this.randomSeed = this.initialRandomSeed;
- this.options = {};
- this.optionsBackup = {};
+ // 30 days to a month
+ // TODO (iskren): Use anchor date (like 1st Jan) to compute this.
+ months += absFloor(days / 30);
+ days %= 30;
- this.defaultOptions = {
- randomSeed: undefined,
- hierarchical: {
- enabled: false,
- levelSeparation: 150,
- direction: 'UD', // UD, DU, LR, RL
- sortMethod: 'hubsize' // hubsize, directed
- }
- };
- util.extend(this.options, this.defaultOptions);
+ // 12 months -> 1 year
+ years += absFloor(months / 12);
+ months %= 12;
- this.hierarchicalLevels = {};
+ data.days = days;
+ data.months = months;
+ data.years = years;
- this.bindEventListeners();
- }
+ return this;
+ }
- _createClass(LayoutEngine, [{
- key: 'bindEventListeners',
- value: function bindEventListeners() {
- var _this = this;
+ function daysToYears (days) {
+ // 400 years have 146097 days (taking into account leap year rules)
+ return days * 400 / 146097;
+ }
- this.body.emitter.on('_dataChanged', function () {
- _this.setupHierarchicalLayout();
- });
- this.body.emitter.on('_resetHierarchicalLayout', function () {
- _this.setupHierarchicalLayout();
- _this.body.emitter.emit('fit', { duration: 0 });
- });
+ function yearsToDays (years) {
+ // years * 365 + absFloor(years / 4) -
+ // absFloor(years / 100) + absFloor(years / 400);
+ return years * 146097 / 400;
}
- }, {
- key: 'setOptions',
- value: function setOptions(options, allOptions) {
- if (options !== undefined) {
- var prevHierarchicalState = this.options.hierarchical.enabled;
- util.mergeOptions(this.options, options, 'hierarchical');
- if (options.randomSeed !== undefined) {
- this.randomSeed = options.randomSeed;
- }
+ function as (units) {
+ var days;
+ var months;
+ var milliseconds = this._milliseconds;
- if (this.options.hierarchical.enabled === true) {
- // make sure the level seperation is the right way up
- if (this.options.hierarchical.direction === 'RL' || this.options.hierarchical.direction === 'DU') {
- if (this.options.hierarchical.levelSeparation > 0) {
- this.options.hierarchical.levelSeparation *= -1;
- }
- } else {
- if (this.options.hierarchical.levelSeparation < 0) {
- this.options.hierarchical.levelSeparation *= -1;
- }
- }
+ units = normalizeUnits(units);
- this.body.emitter.emit('_resetHierarchicalLayout');
- // because the hierarchical system needs it's own physics and smooth curve settings, we adapt the other options if needed.
- return this.adaptAllOptions(allOptions);
+ if (units === 'month' || units === 'year') {
+ days = this._days + milliseconds / 864e5;
+ months = this._months + daysToYears(days) * 12;
+ return units === 'month' ? months : months / 12;
} else {
- if (prevHierarchicalState === true) {
- // refresh the overridden options for nodes and edges.
- this.body.emitter.emit('refresh');
- return util.deepExtend(allOptions, this.optionsBackup);
- }
+ // handle milliseconds separately because of floating point math errors (issue #1867)
+ days = this._days + Math.round(yearsToDays(this._months / 12));
+ switch (units) {
+ case 'week' : return days / 7 + milliseconds / 6048e5;
+ case 'day' : return days + milliseconds / 864e5;
+ case 'hour' : return days * 24 + milliseconds / 36e5;
+ case 'minute' : return days * 24 * 60 + milliseconds / 6e4;
+ case 'second' : return days * 24 * 60 * 60 + milliseconds / 1000;
+ // Math.floor prevents floating point math errors here
+ case 'millisecond': return Math.floor(days * 24 * 60 * 60 * 1000) + milliseconds;
+ default: throw new Error('Unknown unit ' + units);
+ }
}
- }
- return allOptions;
}
- }, {
- key: 'adaptAllOptions',
- value: function adaptAllOptions(allOptions) {
- if (this.options.hierarchical.enabled === true) {
- // set the physics
- if (allOptions.physics === undefined || allOptions.physics === true) {
- allOptions.physics = { solver: 'hierarchicalRepulsion' };
- this.optionsBackup.physics = { solver: 'barnesHut' };
- } else if (typeof options.physics === 'object') {
- this.optionsBackup.physics = { solver: 'barnesHut' };
- if (options.physics.solver !== undefined) {
- this.optionsBackup.physics = { solver: options.physics.solver };
- }
- allOptions.physics.solver = 'hierarchicalRepulsion';
- } else if (options.physics !== false) {
- this.optionsBackup.physics = { solver: 'barnesHut' };
- allOptions.physics.solver = 'hierarchicalRepulsion';
- }
-
- // get the type of static smooth curve in case it is required
- var type = 'horizontal';
- if (this.options.hierarchical.direction === 'RL' || this.options.hierarchical.direction === 'LR') {
- type = 'vertical';
- }
-
- // disable smooth curves if nothing is defined. If smooth curves have been turned on, turn them into static smooth curves.
- if (allOptions.edges === undefined) {
- this.optionsBackup.edges = { smooth: true, dynamic: true };
- allOptions.edges = { smooth: false };
- } else if (allOptions.edges.smooth === undefined) {
- this.optionsBackup.edges = { smooth: true, dynamic: true };
- allOptions.edges.smooth = false;
- } else {
- if (typeof allOptions.edges.smooth === 'boolean') {
- this.optionsBackup.edges = { smooth: allOptions.edges.smooth, dynamic: true };
- allOptions.edges.smooth = { enabled: allOptions.edges.smooth, dynamic: false, type: type };
- } else {
- this.optionsBackup.edges = { smooth: allOptions.edges.smooth.enabled === undefined ? true : allOptions.edges.smooth.enabled, dynamic: true };
- allOptions.edges.smooth = { enabled: allOptions.edges.smooth.enabled === undefined ? true : allOptions.edges.smooth.enabled, dynamic: false, type: type };
- }
- }
- // force all edges into static smooth curves. Only applies to edges that do not use the global options for smooth.
- this.body.emitter.emit('_forceDisableDynamicCurves', type);
- }
- return allOptions;
- }
- }, {
- key: 'seededRandom',
- value: function seededRandom() {
- var x = Math.sin(this.randomSeed++) * 10000;
- return x - Math.floor(x);
+ // TODO: Use this.as('ms')?
+ function duration_as__valueOf () {
+ return (
+ this._milliseconds +
+ this._days * 864e5 +
+ (this._months % 12) * 2592e6 +
+ toInt(this._months / 12) * 31536e6
+ );
}
- }, {
- key: 'positionInitially',
- value: function positionInitially(nodesArray) {
- if (this.options.hierarchical.enabled !== true) {
- for (var i = 0; i < nodesArray.length; i++) {
- var node = nodesArray[i];
- if (!node.isFixed() && (node.x === undefined || node.y === undefined)) {
- var radius = 10 * 0.1 * nodesArray.length + 10;
- var angle = 2 * Math.PI * this.seededRandom();
- if (node.options.fixed.x === false) {
- node.x = radius * Math.cos(angle);
- }
- if (node.options.fixed.x === false) {
- node.y = radius * Math.sin(angle);
- }
- }
- }
- }
- }
- }, {
- key: 'getSeed',
- value: function getSeed() {
- return this.initialRandomSeed;
+ function makeAs (alias) {
+ return function () {
+ return this.as(alias);
+ };
}
- }, {
- key: 'setupHierarchicalLayout',
- /**
- * This is the main function to layout the nodes in a hierarchical way.
- * It checks if the node details are supplied correctly
- *
- * @private
- */
- value: function setupHierarchicalLayout() {
- if (this.options.hierarchical.enabled === true && this.body.nodeIndices.length > 0) {
- // get the size of the largest hubs and check if the user has defined a level for a node.
- var node = undefined,
- nodeId = undefined;
- var definedLevel = false;
- var undefinedLevel = false;
- this.hierarchicalLevels = {};
- this.nodeSpacing = 100;
+ var asMilliseconds = makeAs('ms');
+ var asSeconds = makeAs('s');
+ var asMinutes = makeAs('m');
+ var asHours = makeAs('h');
+ var asDays = makeAs('d');
+ var asWeeks = makeAs('w');
+ var asMonths = makeAs('M');
+ var asYears = makeAs('y');
- for (nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- node = this.body.nodes[nodeId];
- if (node.options.level !== undefined) {
- definedLevel = true;
- this.hierarchicalLevels[nodeId] = node.options.level;
- } else {
- undefinedLevel = true;
- }
- }
- }
+ function duration_get__get (units) {
+ units = normalizeUnits(units);
+ return this[units + 's']();
+ }
- // if the user defined some levels but not all, alert and run without hierarchical layout
- if (undefinedLevel === true && definedLevel === true) {
- throw new Error('To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.');
- return;
- } else {
- // setup the system to use hierarchical method.
- //this._changeConstants();
+ function makeGetter(name) {
+ return function () {
+ return this._data[name];
+ };
+ }
- // define levels if undefined by the users. Based on hubsize
- if (undefinedLevel === true) {
- if (this.options.hierarchical.sortMethod === 'hubsize') {
- this._determineLevelsByHubsize();
- } else if (this.options.hierarchical.sortMethod === 'directed' || 'direction') {
- this._determineLevelsDirected();
- }
- }
+ var duration_get__milliseconds = makeGetter('milliseconds');
+ var seconds = makeGetter('seconds');
+ var minutes = makeGetter('minutes');
+ var hours = makeGetter('hours');
+ var days = makeGetter('days');
+ var months = makeGetter('months');
+ var years = makeGetter('years');
- // check the distribution of the nodes per level.
- var distribution = this._getDistribution();
+ function weeks () {
+ return absFloor(this.days() / 7);
+ }
- // place the nodes on the canvas.
- this._placeNodesByHierarchy(distribution);
- }
- }
+ var round = Math.round;
+ var thresholds = {
+ s: 45, // seconds to minute
+ m: 45, // minutes to hour
+ h: 22, // hours to day
+ d: 26, // days to month
+ M: 11 // months to year
+ };
+
+ // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
+ function substituteTimeAgo(string, number, withoutSuffix, isFuture, locale) {
+ return locale.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
}
- }, {
- key: '_placeNodesByHierarchy',
- /**
- * This function places the nodes on the canvas based on the hierarchial distribution.
- *
- * @param {Object} distribution | obtained by the function this._getDistribution()
- * @private
- */
- value: function _placeNodesByHierarchy(distribution) {
- var nodeId = undefined,
- node = undefined;
- this.positionedNodes = {};
- // start placing all the level 0 nodes first. Then recursively position their branches.
- for (var level in distribution) {
- if (distribution.hasOwnProperty(level)) {
- for (nodeId in distribution[level].nodes) {
- if (distribution[level].nodes.hasOwnProperty(nodeId)) {
+ function duration_humanize__relativeTime (posNegDuration, withoutSuffix, locale) {
+ var duration = create__createDuration(posNegDuration).abs();
+ var seconds = round(duration.as('s'));
+ var minutes = round(duration.as('m'));
+ var hours = round(duration.as('h'));
+ var days = round(duration.as('d'));
+ var months = round(duration.as('M'));
+ var years = round(duration.as('y'));
- node = distribution[level].nodes[nodeId];
+ var a = seconds < thresholds.s && ['s', seconds] ||
+ minutes === 1 && ['m'] ||
+ minutes < thresholds.m && ['mm', minutes] ||
+ hours === 1 && ['h'] ||
+ hours < thresholds.h && ['hh', hours] ||
+ days === 1 && ['d'] ||
+ days < thresholds.d && ['dd', days] ||
+ months === 1 && ['M'] ||
+ months < thresholds.M && ['MM', months] ||
+ years === 1 && ['y'] || ['yy', years];
- if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') {
- if (node.x === undefined) {
- node.x = distribution[level].distance;
- }
- distribution[level].distance = node.x + this.nodeSpacing;
- } else {
- if (node.y === undefined) {
- node.y = distribution[level].distance;
- }
- distribution[level].distance = node.y + this.nodeSpacing;
- }
+ a[2] = withoutSuffix;
+ a[3] = +posNegDuration > 0;
+ a[4] = locale;
+ return substituteTimeAgo.apply(null, a);
+ }
- this.positionedNodes[nodeId] = true;
- this._placeBranchNodes(node.edges, node.id, distribution, level);
- }
- }
+ // This function allows you to set a threshold for relative time strings
+ function duration_humanize__getSetRelativeTimeThreshold (threshold, limit) {
+ if (thresholds[threshold] === undefined) {
+ return false;
}
- }
+ if (limit === undefined) {
+ return thresholds[threshold];
+ }
+ thresholds[threshold] = limit;
+ return true;
}
- }, {
- key: '_getDistribution',
- /**
- * This function get the distribution of levels based on hubsize
- *
- * @returns {Object}
- * @private
- */
- value: function _getDistribution() {
- var distribution = {};
- var nodeId = undefined,
- node = undefined;
+ function humanize (withSuffix) {
+ var locale = this.localeData();
+ var output = duration_humanize__relativeTime(this, !withSuffix, locale);
- // we fix Y because the hierarchy is vertical, we fix X so we do not give a node an x position for a second time.
- // the fix of X is removed after the x value has been set.
- for (nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- node = this.body.nodes[nodeId];
- var level = this.hierarchicalLevels[nodeId] === undefined ? 0 : this.hierarchicalLevels[nodeId];
- if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') {
- node.y = this.options.hierarchical.levelSeparation * level;
- node.options.fixed.y = true;
- } else {
- node.x = this.options.hierarchical.levelSeparation * level;
- node.options.fixed.x = true;
- }
- if (distribution[level] === undefined) {
- distribution[level] = { amount: 0, nodes: {}, distance: 0 };
- }
- distribution[level].amount += 1;
- distribution[level].nodes[nodeId] = node;
+ if (withSuffix) {
+ output = locale.pastFuture(+this, output);
}
- }
- return distribution;
- }
- }, {
- key: '_getHubSize',
- /**
- * Get the hubsize from all remaining unlevelled nodes.
- *
- * @returns {number}
- * @private
- */
- value: function _getHubSize() {
- var hubSize = 0;
- for (var nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- var node = this.body.nodes[nodeId];
- if (this.hierarchicalLevels[nodeId] === undefined) {
- hubSize = node.edges.length < hubSize ? hubSize : node.edges.length;
- }
- }
- }
- return hubSize;
+ return locale.postformat(output);
}
- }, {
- key: '_determineLevelsByHubsize',
- /**
- * this function allocates nodes in levels based on the recursive branching from the largest hubs.
- *
- * @param hubsize
- * @private
- */
- value: function _determineLevelsByHubsize() {
- var nodeId = undefined,
- node = undefined;
- var hubSize = 1;
+ var iso_string__abs = Math.abs;
- while (hubSize > 0) {
- // determine hubs
- hubSize = this._getHubSize();
- if (hubSize === 0) break;
+ function iso_string__toISOString() {
+ // inspired by https://github.com/dordille/moment-isoduration/blob/master/moment.isoduration.js
+ var Y = iso_string__abs(this.years());
+ var M = iso_string__abs(this.months());
+ var D = iso_string__abs(this.days());
+ var h = iso_string__abs(this.hours());
+ var m = iso_string__abs(this.minutes());
+ var s = iso_string__abs(this.seconds() + this.milliseconds() / 1000);
+ var total = this.asSeconds();
- for (nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- node = this.body.nodes[nodeId];
- if (node.edges.length === hubSize) {
- this._setLevel(0, node);
- }
- }
+ if (!total) {
+ // this is the same as C#'s (Noda) and python (isodate)...
+ // but not other JS (goog.date)
+ return 'P0D';
}
- }
- }
- }, {
- key: '_setLevel',
- /**
- * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
- *
- * @param level
- * @param edges
- * @param parentId
- * @private
- */
- value: function _setLevel(level, node) {
- if (this.hierarchicalLevels[node.id] !== undefined) {
- return;
- }var childNode = undefined;
- this.hierarchicalLevels[node.id] = level;
- for (var i = 0; i < node.edges.length; i++) {
- if (node.edges[i].toId === node.id) {
- childNode = node.edges[i].from;
- } else {
- childNode = node.edges[i].to;
- }
- this._setLevel(level + 1, childNode);
- }
+ return (total < 0 ? '-' : '') +
+ 'P' +
+ (Y ? Y + 'Y' : '') +
+ (M ? M + 'M' : '') +
+ (D ? D + 'D' : '') +
+ ((h || m || s) ? 'T' : '') +
+ (h ? h + 'H' : '') +
+ (m ? m + 'M' : '') +
+ (s ? s + 'S' : '');
}
- }, {
- key: '_determineLevelsDirected',
-
- /**
- * this function allocates nodes in levels based on the direction of the edges
- *
- * @param hubsize
- * @private
- */
- value: function _determineLevelsDirected() {
- var nodeId = undefined,
- node = undefined;
- var minLevel = 10000;
-
- // set first node to source
- for (nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- node = this.body.nodes[nodeId];
- this._setLevelDirected(minLevel, node);
- }
- }
- // get the minimum level
- for (nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- minLevel = this.hierarchicalLevels[nodeId] < minLevel ? this.hierarchicalLevels[nodeId] : minLevel;
- }
- }
+ var duration_prototype__proto = Duration.prototype;
- // subtract the minimum from the set so we have a range starting from 0
- for (nodeId in this.body.nodes) {
- if (this.body.nodes.hasOwnProperty(nodeId)) {
- this.hierarchicalLevels[nodeId] -= minLevel;
- }
- }
- }
- }, {
- key: '_setLevelDirected',
+ duration_prototype__proto.abs = duration_abs__abs;
+ duration_prototype__proto.add = duration_add_subtract__add;
+ duration_prototype__proto.subtract = duration_add_subtract__subtract;
+ duration_prototype__proto.as = as;
+ duration_prototype__proto.asMilliseconds = asMilliseconds;
+ duration_prototype__proto.asSeconds = asSeconds;
+ duration_prototype__proto.asMinutes = asMinutes;
+ duration_prototype__proto.asHours = asHours;
+ duration_prototype__proto.asDays = asDays;
+ duration_prototype__proto.asWeeks = asWeeks;
+ duration_prototype__proto.asMonths = asMonths;
+ duration_prototype__proto.asYears = asYears;
+ duration_prototype__proto.valueOf = duration_as__valueOf;
+ duration_prototype__proto._bubble = bubble;
+ duration_prototype__proto.get = duration_get__get;
+ duration_prototype__proto.milliseconds = duration_get__milliseconds;
+ duration_prototype__proto.seconds = seconds;
+ duration_prototype__proto.minutes = minutes;
+ duration_prototype__proto.hours = hours;
+ duration_prototype__proto.days = days;
+ duration_prototype__proto.weeks = weeks;
+ duration_prototype__proto.months = months;
+ duration_prototype__proto.years = years;
+ duration_prototype__proto.humanize = humanize;
+ duration_prototype__proto.toISOString = iso_string__toISOString;
+ duration_prototype__proto.toString = iso_string__toISOString;
+ duration_prototype__proto.toJSON = iso_string__toISOString;
+ duration_prototype__proto.locale = locale;
+ duration_prototype__proto.localeData = localeData;
- /**
- * this function is called recursively to enumerate the branched of the first node and give each node a level based on edge direction
- *
- * @param level
- * @param edges
- * @param parentId
- * @private
- */
- value: function _setLevelDirected(level, node) {
- if (this.hierarchicalLevels[node.id] !== undefined) {
- return;
- }var childNode = undefined;
- this.hierarchicalLevels[node.id] = level;
+ // Deprecations
+ duration_prototype__proto.toIsoString = deprecate('toIsoString() is deprecated. Please use toISOString() instead (notice the capitals)', iso_string__toISOString);
+ duration_prototype__proto.lang = lang;
- for (var i = 0; i < node.edges.length; i++) {
- if (node.edges[i].toId === node.id) {
- childNode = node.edges[i].from;
- this._setLevelDirected(level - 1, childNode);
- } else {
- childNode = node.edges[i].to;
- this._setLevelDirected(level + 1, childNode);
- }
- }
- }
- }, {
- key: '_placeBranchNodes',
+ // Side effect imports
- /**
- * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes
- * on a X position that ensures there will be no overlap.
- *
- * @param edges
- * @param parentId
- * @param distribution
- * @param parentLevel
- * @private
- */
- value: function _placeBranchNodes(edges, parentId, distribution, parentLevel) {
- for (var i = 0; i < edges.length; i++) {
- var childNode = undefined;
- var parentNode = undefined;
- if (edges[i].toId === parentId) {
- childNode = edges[i].from;
- parentNode = edges[i].to;
- } else {
- childNode = edges[i].to;
- parentNode = edges[i].from;
- }
- var childNodeLevel = this.hierarchicalLevels[childNode.id];
+ addFormatToken('X', 0, 0, 'unix');
+ addFormatToken('x', 0, 0, 'valueOf');
- if (this.positionedNodes[childNode.id] === undefined) {
- // if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here.
- if (childNodeLevel > parentLevel) {
- if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') {
- if (childNode.x === undefined) {
- childNode.x = Math.max(distribution[childNodeLevel].distance, parentNode.x);
- }
- distribution[childNodeLevel].distance = childNode.x + this.nodeSpacing;
- this.positionedNodes[childNode.id] = true;
- } else {
- if (childNode.y === undefined) {
- childNode.y = Math.max(distribution[childNodeLevel].distance, parentNode.y);
- }
- distribution[childNodeLevel].distance = childNode.y + this.nodeSpacing;
- }
- this.positionedNodes[childNode.id] = true;
+ // PARSING
- if (childNode.edges.length > 1) {
- this._placeBranchNodes(childNode.edges, childNode.id, distribution, childNodeLevel);
- }
- }
- }
- }
- }
- }]);
+ addRegexToken('x', matchSigned);
+ addRegexToken('X', matchTimestamp);
+ addParseToken('X', function (input, array, config) {
+ config._d = new Date(parseFloat(input, 10) * 1000);
+ });
+ addParseToken('x', function (input, array, config) {
+ config._d = new Date(toInt(input));
+ });
- return LayoutEngine;
- })();
+ // Side effect imports
- exports['default'] = LayoutEngine;
- module.exports = exports['default'];
-/***/ },
-/* 68 */
-/***/ function(module, exports, __webpack_require__) {
+ utils_hooks__hooks.version = '2.10.2';
- 'use strict';
+ setHookCallback(local__createLocal);
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
+ utils_hooks__hooks.fn = momentPrototype;
+ utils_hooks__hooks.min = min;
+ utils_hooks__hooks.max = max;
+ utils_hooks__hooks.utc = create_utc__createUTC;
+ utils_hooks__hooks.unix = moment__createUnix;
+ utils_hooks__hooks.months = lists__listMonths;
+ utils_hooks__hooks.isDate = isDate;
+ utils_hooks__hooks.locale = locale_locales__getSetGlobalLocale;
+ utils_hooks__hooks.invalid = valid__createInvalid;
+ utils_hooks__hooks.duration = create__createDuration;
+ utils_hooks__hooks.isMoment = isMoment;
+ utils_hooks__hooks.weekdays = lists__listWeekdays;
+ utils_hooks__hooks.parseZone = moment__createInZone;
+ utils_hooks__hooks.localeData = locale_locales__getLocale;
+ utils_hooks__hooks.isDuration = isDuration;
+ utils_hooks__hooks.monthsShort = lists__listMonthsShort;
+ utils_hooks__hooks.weekdaysMin = lists__listWeekdaysMin;
+ utils_hooks__hooks.defineLocale = defineLocale;
+ utils_hooks__hooks.weekdaysShort = lists__listWeekdaysShort;
+ utils_hooks__hooks.normalizeUnits = normalizeUnits;
+ utils_hooks__hooks.relativeTimeThreshold = duration_humanize__getSetRelativeTimeThreshold;
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ var _moment = utils_hooks__hooks;
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
+ return _moment;
- var util = __webpack_require__(1);
- var Hammer = __webpack_require__(41);
- var hammerUtil = __webpack_require__(44);
- var locales = __webpack_require__(85);
+ }));
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(85)(module)))
- /**
- * clears the toolbar div element of children
- *
- * @private
- */
+/***/ },
+/* 67 */
+/***/ function(module, exports, __webpack_require__) {
- var ManipulationSystem = (function () {
- function ManipulationSystem(body, canvas, selectionHandler) {
- var _this = this;
+ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;'use strict';
- _classCallCheck(this, ManipulationSystem);
+ (function (factory) {
+ if (true) {
+ // AMD. Register as an anonymous module.
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+ } else if (typeof exports === 'object') {
+ // Node. Does not work with strict CommonJS, but
+ // only CommonJS-like environments that support module.exports,
+ // like Node.
+ module.exports = factory();
+ } else {
+ // Browser globals (root is window)
+ window.propagating = factory();
+ }
+ }(function () {
+ var _firstTarget = null; // singleton, will contain the target element where the touch event started
+ var _processing = false; // singleton, true when a touch event is being handled
- this.body = body;
- this.canvas = canvas;
- this.selectionHandler = selectionHandler;
+ /**
+ * Extend an Hammer.js instance with event propagation.
+ *
+ * Features:
+ * - Events emitted by hammer will propagate in order from child to parent
+ * elements.
+ * - Events are extended with a function `event.stopPropagation()` to stop
+ * propagation to parent elements.
+ * - An option `preventDefault` to stop all default browser behavior.
+ *
+ * Usage:
+ * var hammer = propagatingHammer(new Hammer(element));
+ * var hammer = propagatingHammer(new Hammer(element), {preventDefault: true});
+ *
+ * @param {Hammer.Manager} hammer An hammer instance.
+ * @param {Object} [options] Available options:
+ * - `preventDefault: true | 'mouse' | 'touch' | 'pen'`.
+ * Enforce preventing the default browser behavior.
+ * Cannot be set to `false`.
+ * @return {Hammer.Manager} Returns the same hammer instance with extended
+ * functionality
+ */
+ return function propagating(hammer, options) {
+ if (options && options.preventDefault === false) {
+ throw new Error('Only supports preventDefault == true');
+ }
+ var _options = options || {
+ preventDefault: false
+ };
- this.editMode = false;
- this.manipulationDiv = undefined;
- this.editModeDiv = undefined;
- this.closeDiv = undefined;
+ if (hammer.Manager) {
+ // This looks like the Hammer constructor.
+ // Overload the constructors with our own.
+ var Hammer = hammer;
- this.manipulationHammers = [];
- this.temporaryUIFunctions = {};
- this.temporaryEventFunctions = [];
+ var PropagatingHammer = function(element, options) {
+ return propagating(new Hammer(element, options), _options);
+ };
+ Hammer.extend(PropagatingHammer, Hammer);
+ PropagatingHammer.Manager = function (element, options) {
+ return propagating(new Hammer.Manager(element, options), _options);
+ };
- this.touchTime = 0;
- this.temporaryIds = { nodes: [], edges: [] };
- this.guiEnabled = false;
- this.inMode = false;
- this.selectedControlNode = undefined;
+ return PropagatingHammer;
+ }
- this.options = {};
- this.defaultOptions = {
- enabled: false,
- initiallyActive: false,
- locale: 'en',
- locales: locales,
- functionality: {
- addNode: true,
- addEdge: true,
- editNode: true,
- editEdge: true,
- deleteNode: true,
- deleteEdge: true
- },
- handlerFunctions: {
- addNode: undefined,
- addEdge: undefined,
- editNode: undefined,
- editEdge: undefined,
- deleteNode: undefined,
- deleteEdge: undefined
- },
- controlNodeStyle: {
- shape: 'dot',
- size: 6,
- color: { background: '#ff0000', border: '#3c3c3c', highlight: { background: '#07f968', border: '#3c3c3c' } },
- borderWidth: 2,
- borderWidthSelected: 2
- }
- };
- util.extend(this.options, this.defaultOptions);
+ // attach to DOM element
+ var element = hammer.element;
+ element.hammer = hammer;
- this.body.emitter.on('destroy', function () {
- _this._clean();
- });
- this.body.emitter.on('_dataChanged', this._restore.bind(this));
- this.body.emitter.on('_resetData', this._restore.bind(this));
- }
+ // move the original functions that we will wrap
+ hammer._on = hammer.on;
+ hammer._off = hammer.off;
+ hammer._emit = hammer.emit;
+ hammer._destroy = hammer.destroy;
- _createClass(ManipulationSystem, [{
- key: '_restore',
+ /** @type {Object.>} */
+ hammer._handlers = {};
+
+ // register an event to catch the start of a gesture and store the
+ // target in a singleton
+ hammer._on('hammer.input', function (event) {
+ if (_options.preventDefault === true || (_options.preventDefault === event.pointerType)) {
+ event.preventDefault();
+ }
+ if (event.isFirst) {
+ _firstTarget = event.target;
+ _processing = true;
+ }
+ if (event.isFinal) {
+ _processing = false;
+ }
+ });
/**
- * If something changes in the data during editing, switch back to the initial datamanipulation state and close all edit modes.
- * @private
+ * Register a handler for one or multiple events
+ * @param {String} events A space separated string with events
+ * @param {function} handler A callback function, called as handler(event)
+ * @returns {Hammer.Manager} Returns the hammer instance
*/
- value: function _restore() {
- if (this.inMode !== false) {
- if (this.options.initiallyActive === true) {
- this.enableEditMode();
- } else {
- this.disableEditMode();
+ hammer.on = function (events, handler) {
+ // register the handler
+ split(events).forEach(function (event) {
+ var _handlers = hammer._handlers[event];
+ if (!_handlers) {
+ hammer._handlers[event] = _handlers = [];
+
+ // register the static, propagated handler
+ hammer._on(event, propagatedHandler);
}
- }
- }
- }, {
- key: 'setOptions',
+ _handlers.push(handler);
+ });
+
+ return hammer;
+ };
/**
- * Set the Options
- * @param options
+ * Unregister a handler for one or multiple events
+ * @param {String} events A space separated string with events
+ * @param {function} [handler] Optional. The registered handler. If not
+ * provided, all handlers for given events
+ * are removed.
+ * @returns {Hammer.Manager} Returns the hammer instance
*/
- value: function setOptions(options) {
- if (options !== undefined) {
- if (typeof options === 'boolean') {
- this.options.enabled = options;
- } else {
- this.options.enabled = true;
- util.deepExtend(this.options, options);
- }
- if (this.options.initiallyActive === true) {
- this.editMode = true;
+ hammer.off = function (events, handler) {
+ // unregister the handler
+ split(events).forEach(function (event) {
+ var _handlers = hammer._handlers[event];
+ if (_handlers) {
+ _handlers = handler ? _handlers.filter(function (h) {
+ return h !== handler;
+ }) : [];
+
+ if (_handlers.length > 0) {
+ hammer._handlers[event] = _handlers;
+ }
+ else {
+ // remove static, propagated handler
+ hammer._off(event, propagatedHandler);
+ delete hammer._handlers[event];
+ }
}
- this._setup();
- }
- }
- }, {
- key: 'toggleEditMode',
+ });
+
+ return hammer;
+ };
/**
- * Enable or disable edit-mode. Draws the DOM required and cleans up after itself.
- *
- * @private
+ * Emit to the event listeners
+ * @param {string} eventType
+ * @param {Event} event
*/
- value: function toggleEditMode() {
- if (this.editMode === true) {
- this.disableEditMode();
- } else {
- this.enableEditMode();
+ hammer.emit = function(eventType, event) {
+ if (!_processing) {
+ _firstTarget = event.target;
}
- }
- }, {
- key: 'enableEditMode',
- value: function enableEditMode() {
- this.editMode = true;
+ hammer._emit(eventType, event);
+ };
- this._clean();
- if (this.guiEnabled === true) {
- this.manipulationDiv.style.display = 'block';
- this.closeDiv.style.display = 'block';
- this.editModeDiv.style.display = 'none';
- this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
- this.showManipulatorToolbar();
- }
- }
- }, {
- key: 'disableEditMode',
- value: function disableEditMode() {
- this.editMode = false;
+ hammer.destroy = function () {
+ // Detach from DOM element
+ var element = hammer.element;
+ delete element.hammer;
- this._clean();
- if (this.guiEnabled === true) {
- this.manipulationDiv.style.display = 'none';
- this.closeDiv.style.display = 'none';
- this.editModeDiv.style.display = 'block';
- this._createEditButton();
- }
+ // clear all handlers
+ hammer._handlers = {};
+
+ // call original hammer destroy
+ hammer._destroy();
+ };
+
+ // split a string with space separated words
+ function split(events) {
+ return events.match(/[^ ]+/g);
}
- }, {
- key: 'showManipulatorToolbar',
/**
- * Creates the main toolbar. Removes functions bound to the select event. Binds all the buttons of the toolbar.
- *
- * @private
+ * A static event handler, applying event propagation.
+ * @param {Object} event
*/
- value: function showManipulatorToolbar() {
- // restore the state of any bound functions or events, remove control nodes, restore physics
- this._clean();
+ function propagatedHandler(event) {
+ // let only a single hammer instance handle this event
+ if (event.type !== 'hammer.input') {
+ // it is possible that the same srcEvent is used with multiple hammer events,
+ // we keep track on which events are handled in an object _handled
+ if (!event.srcEvent._handled) {
+ event.srcEvent._handled = {};
+ }
- // reset global letiables
- this.manipulationDOM = {};
+ if (event.srcEvent._handled[event.type]) {
+ return;
+ }
+ else {
+ event.srcEvent._handled[event.type] = true;
+ }
+ }
- // if the gui is enabled, draw all elements.
- if (this.guiEnabled === true) {
- var selectedNodeCount = this.selectionHandler._getSelectedNodeCount();
- var selectedEdgeCount = this.selectionHandler._getSelectedEdgeCount();
- var selectedTotalCount = selectedNodeCount + selectedEdgeCount;
- var locale = this.options.locales[this.options.locale];
- var needSeperator = false;
+ // attach a stopPropagation function to the event
+ var stopped = false;
+ event.stopPropagation = function () {
+ stopped = true;
+ };
- if (this.options.functionality.addNode === true) {
- this._createAddNodeButton(locale);
- needSeperator = true;
- }
- if (this.options.functionality.addEdge === true) {
- if (needSeperator === true) {
- this._createSeperator(1);
- } else {
- needSeperator = true;
+ // attach firstTarget property to the event
+ event.firstTarget = _firstTarget;
+
+ // propagate over all elements (until stopped)
+ var elem = _firstTarget;
+ while (elem && !stopped) {
+ var _handlers = elem.hammer && elem.hammer._handlers[event.type];
+ if (_handlers) {
+ for (var i = 0; i < _handlers.length && !stopped; i++) {
+ _handlers[i](event);
}
- this._createAddEdgeButton(locale);
}
- if (selectedNodeCount === 1 && typeof this.options.handlerFunctions.editNode === 'function' && this.options.functionality.editNode === true) {
- if (needSeperator === true) {
- this._createSeperator(2);
- } else {
- needSeperator = true;
- }
- this._createEditNodeButton(locale);
- } else if (selectedEdgeCount === 1 && selectedNodeCount === 0 && this.options.functionality.editEdge === true) {
- if (needSeperator === true) {
- this._createSeperator(3);
- } else {
- needSeperator = true;
- }
- this._createEditEdgeButton(locale);
- }
+ elem = elem.parentNode;
+ }
+ }
- // remove buttons
- if (selectedTotalCount !== 0) {
- if (selectedNodeCount === 1 && this.options.functionality.deleteNode === true) {
- if (needSeperator === true) {
- this._createSeperator(4);
- }
- this._createDeleteButton(locale);
- } else if (selectedNodeCount === 0 && this.options.functionality.deleteEdge === true) {
- if (needSeperator === true) {
- this._createSeperator(4);
- }
- this._createDeleteButton(locale);
- }
- }
+ return hammer;
+ };
+ }));
- // bind the close button
- this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
- // refresh this bar based on what has been selected
- this._temporaryBindEvent('select', this.showManipulatorToolbar.bind(this));
- }
+/***/ },
+/* 68 */
+/***/ function(module, exports, __webpack_require__) {
- // redraw to show any possible changes
- this.body.emitter.emit('_redraw');
- }
- }, {
- key: 'addNodeMode',
+ var __WEBPACK_AMD_DEFINE_RESULT__;/*! Hammer.JS - v2.0.4 - 2014-09-28
+ * http://hammerjs.github.io/
+ *
+ * Copyright (c) 2014 Jorik Tangelder;
+ * Licensed under the MIT license */
+ (function(window, document, exportName, undefined) {
+ 'use strict';
- /**
- * Create the toolbar for adding Nodes
- *
- * @private
- */
- value: function addNodeMode() {
- // when using the gui, enable edit mode if it wasnt already.
- if (this.editMode !== true) {
- this.enableEditMode();
- }
+ var VENDOR_PREFIXES = ['', 'webkit', 'moz', 'MS', 'ms', 'o'];
+ var TEST_ELEMENT = document.createElement('div');
- // restore the state of any bound functions or events, remove control nodes, restore physics
- this._clean();
+ var TYPE_FUNCTION = 'function';
- this.inMode = 'addNode';
- if (this.guiEnabled === true) {
- var locale = this.options.locales[this.options.locale];
- this.manipulationDOM = {};
- this._createBackButton(locale);
- this._createSeperator();
- this._createDescription(locale.addDescription);
+ var round = Math.round;
+ var abs = Math.abs;
+ var now = Date.now;
- // bind the close button
- this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
- }
+ /**
+ * set a timeout with a given scope
+ * @param {Function} fn
+ * @param {Number} timeout
+ * @param {Object} context
+ * @returns {number}
+ */
+ function setTimeoutContext(fn, timeout, context) {
+ return setTimeout(bindFn(fn, context), timeout);
+ }
- this._temporaryBindEvent('click', this._performAddNode.bind(this));
+ /**
+ * if the argument is an array, we want to execute the fn on each entry
+ * if it aint an array we don't want to do a thing.
+ * this is used by all the methods that accept a single and array argument.
+ * @param {*|Array} arg
+ * @param {String} fn
+ * @param {Object} [context]
+ * @returns {Boolean}
+ */
+ function invokeArrayArg(arg, fn, context) {
+ if (Array.isArray(arg)) {
+ each(arg, context[fn], context);
+ return true;
}
- }, {
- key: 'editNodeMode',
-
- /**
- * call the bound function to handle the editing of the node. The node has to be selected.
- *
- * @private
- */
- value: function editNodeMode() {
- var _this2 = this;
-
- // when using the gui, enable edit mode if it wasnt already.
- if (this.editMode !== true) {
- this.enableEditMode();
- }
+ return false;
+ }
- // restore the state of any bound functions or events, remove control nodes, restore physics
- this._clean();
+ /**
+ * walk objects and arrays
+ * @param {Object} obj
+ * @param {Function} iterator
+ * @param {Object} context
+ */
+ function each(obj, iterator, context) {
+ var i;
- this.inMode = 'editNode';
- if (typeof this.options.handlerFunctions.editNode === 'function') {
- var node = this.selectionHandler._getSelectedNode();
- if (node.isCluster !== true) {
- var data = util.deepExtend({}, node.options, true);
- data.x = node.x;
- data.y = node.y;
+ if (!obj) {
+ return;
+ }
- if (this.options.handlerFunctions.editNode.length === 2) {
- this.options.handlerFunctions.editNode(data, function (finalizedData) {
- if (finalizedData !== null && finalizedData !== undefined && _this2.inMode === 'delete') {
- // if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
- _this2.body.data.nodes.update(finalizedData);
- _this2.showManipulatorToolbar();
- }
- });
- } else {
- throw new Error('The function for edit does not support two arguments (data, callback)');
- }
- } else {
- alert(this.options.locales[this.options.locale].editClusterError);
+ if (obj.forEach) {
+ obj.forEach(iterator, context);
+ } else if (obj.length !== undefined) {
+ i = 0;
+ while (i < obj.length) {
+ iterator.call(context, obj[i], i, obj);
+ i++;
+ }
+ } else {
+ for (i in obj) {
+ obj.hasOwnProperty(i) && iterator.call(context, obj[i], i, obj);
}
- } else {
- throw new Error('No function has been configured to handle the editing of nodes.');
- }
}
- }, {
- key: 'addEdgeMode',
-
- /**
- * create the toolbar to connect nodes
- *
- * @private
- */
- value: function addEdgeMode() {
- // when using the gui, enable edit mode if it wasnt already.
- if (this.editMode !== true) {
- this.enableEditMode();
- }
+ }
- // restore the state of any bound functions or events, remove control nodes, restore physics
- this._clean();
+ /**
+ * extend object.
+ * means that properties in dest will be overwritten by the ones in src.
+ * @param {Object} dest
+ * @param {Object} src
+ * @param {Boolean} [merge]
+ * @returns {Object} dest
+ */
+ function extend(dest, src, merge) {
+ var keys = Object.keys(src);
+ var i = 0;
+ while (i < keys.length) {
+ if (!merge || (merge && dest[keys[i]] === undefined)) {
+ dest[keys[i]] = src[keys[i]];
+ }
+ i++;
+ }
+ return dest;
+ }
- this.inMode = 'addEdge';
- if (this.guiEnabled === true) {
- var locale = this.options.locales[this.options.locale];
- this.manipulationDOM = {};
- this._createBackButton(locale);
- this._createSeperator();
- this._createDescription(locale.edgeDescription);
+ /**
+ * merge the values from src in the dest.
+ * means that properties that exist in dest will not be overwritten by src
+ * @param {Object} dest
+ * @param {Object} src
+ * @returns {Object} dest
+ */
+ function merge(dest, src) {
+ return extend(dest, src, true);
+ }
- // bind the close button
- this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
- }
+ /**
+ * simple class inheritance
+ * @param {Function} child
+ * @param {Function} base
+ * @param {Object} [properties]
+ */
+ function inherit(child, base, properties) {
+ var baseP = base.prototype,
+ childP;
- // temporarily overload functions
- this._temporaryBindUI('onTouch', this._handleConnect.bind(this));
- this._temporaryBindUI('onDragEnd', this._finishConnect.bind(this));
- this._temporaryBindUI('onDrag', this._dragControlNode.bind(this));
- this._temporaryBindUI('onRelease', this._finishConnect.bind(this));
+ childP = child.prototype = Object.create(baseP);
+ childP.constructor = child;
+ childP._super = baseP;
- this._temporaryBindUI('onDragStart', function () {});
- this._temporaryBindUI('onHold', function () {});
+ if (properties) {
+ extend(childP, properties);
}
- }, {
- key: 'editEdgeMode',
-
- /**
- * create the toolbar to edit edges
- *
- * @private
- */
- value: function editEdgeMode() {
- // when using the gui, enable edit mode if it wasnt already.
- if (this.editMode !== true) {
- this.enableEditMode();
- }
+ }
- // restore the state of any bound functions or events, remove control nodes, restore physics
- this._clean();
+ /**
+ * simple function bind
+ * @param {Function} fn
+ * @param {Object} context
+ * @returns {Function}
+ */
+ function bindFn(fn, context) {
+ return function boundFn() {
+ return fn.apply(context, arguments);
+ };
+ }
- this.inMode = 'editEdge';
- if (this.guiEnabled === true) {
- var locale = this.options.locales[this.options.locale];
- this.manipulationDOM = {};
- this._createBackButton(locale);
- this._createSeperator();
- this._createDescription(locale.editEdgeDescription);
+ /**
+ * let a boolean value also be a function that must return a boolean
+ * this first item in args will be used as the context
+ * @param {Boolean|Function} val
+ * @param {Array} [args]
+ * @returns {Boolean}
+ */
+ function boolOrFn(val, args) {
+ if (typeof val == TYPE_FUNCTION) {
+ return val.apply(args ? args[0] || undefined : undefined, args);
+ }
+ return val;
+ }
- // bind the close button
- this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
- }
+ /**
+ * use the val2 when val1 is undefined
+ * @param {*} val1
+ * @param {*} val2
+ * @returns {*}
+ */
+ function ifUndefined(val1, val2) {
+ return (val1 === undefined) ? val2 : val1;
+ }
- this.edgeBeingEditedId = this.selectionHandler.getSelectedEdges()[0];
- var edge = this.body.edges[this.edgeBeingEditedId];
+ /**
+ * addEventListener with multiple events at once
+ * @param {EventTarget} target
+ * @param {String} types
+ * @param {Function} handler
+ */
+ function addEventListeners(target, types, handler) {
+ each(splitStr(types), function(type) {
+ target.addEventListener(type, handler, false);
+ });
+ }
- // create control nodes
- var controlNodeFrom = this._getNewTargetNode(edge.from.x, edge.from.y);
- var controlNodeTo = this._getNewTargetNode(edge.to.x, edge.to.y);
+ /**
+ * removeEventListener with multiple events at once
+ * @param {EventTarget} target
+ * @param {String} types
+ * @param {Function} handler
+ */
+ function removeEventListeners(target, types, handler) {
+ each(splitStr(types), function(type) {
+ target.removeEventListener(type, handler, false);
+ });
+ }
- this.temporaryIds.nodes.push(controlNodeFrom.id);
- this.temporaryIds.nodes.push(controlNodeTo.id);
+ /**
+ * find if a node is in the given parent
+ * @method hasParent
+ * @param {HTMLElement} node
+ * @param {HTMLElement} parent
+ * @return {Boolean} found
+ */
+ function hasParent(node, parent) {
+ while (node) {
+ if (node == parent) {
+ return true;
+ }
+ node = node.parentNode;
+ }
+ return false;
+ }
- this.body.nodes[controlNodeFrom.id] = controlNodeFrom;
- this.body.nodeIndices.push(controlNodeFrom.id);
- this.body.nodes[controlNodeTo.id] = controlNodeTo;
- this.body.nodeIndices.push(controlNodeTo.id);
+ /**
+ * small indexOf wrapper
+ * @param {String} str
+ * @param {String} find
+ * @returns {Boolean} found
+ */
+ function inStr(str, find) {
+ return str.indexOf(find) > -1;
+ }
- // temporarily overload UI functions, cleaned up automatically because of _temporaryBindUI
- this._temporaryBindUI('onTouch', this._controlNodeTouch.bind(this)); // used to get the position
- this._temporaryBindUI('onTap', function () {}); // disabled
- this._temporaryBindUI('onHold', function () {}); // disabled
- this._temporaryBindUI('onDragStart', this._controlNodeDragStart.bind(this)); // used to select control node
- this._temporaryBindUI('onDrag', this._controlNodeDrag.bind(this)); // used to drag control node
- this._temporaryBindUI('onDragEnd', this._controlNodeDragEnd.bind(this)); // used to connect or revert control nodes
- this._temporaryBindUI('onMouseMove', function () {}); // disabled
+ /**
+ * split string on whitespace
+ * @param {String} str
+ * @returns {Array} words
+ */
+ function splitStr(str) {
+ return str.trim().split(/\s+/g);
+ }
- // create function to position control nodes correctly on movement
- // automatically cleaned up because we use the temporary bind
- this._temporaryBindEvent('beforeDrawing', function (ctx) {
- var positions = edge.edgeType.findBorderPositions(ctx);
- if (controlNodeFrom.selected === false) {
- controlNodeFrom.x = positions.from.x;
- controlNodeFrom.y = positions.from.y;
- }
- if (controlNodeTo.selected === false) {
- controlNodeTo.x = positions.to.x;
- controlNodeTo.y = positions.to.y;
+ /**
+ * find if a array contains the object using indexOf or a simple polyFill
+ * @param {Array} src
+ * @param {String} find
+ * @param {String} [findByKey]
+ * @return {Boolean|Number} false when not found, or the index
+ */
+ function inArray(src, find, findByKey) {
+ if (src.indexOf && !findByKey) {
+ return src.indexOf(find);
+ } else {
+ var i = 0;
+ while (i < src.length) {
+ if ((findByKey && src[i][findByKey] == find) || (!findByKey && src[i] === find)) {
+ return i;
+ }
+ i++;
}
- });
-
- this.body.emitter.emit('_redraw');
+ return -1;
}
- }, {
- key: 'deleteSelected',
-
- /**
- * delete everything in the selection
- *
- * @private
- */
- value: function deleteSelected() {
- var _this3 = this;
-
- // when using the gui, enable edit mode if it wasnt already.
- if (this.editMode !== true) {
- this.enableEditMode();
- }
+ }
- // restore the state of any bound functions or events, remove control nodes, restore physics
- this._clean();
+ /**
+ * convert array-like objects to real arrays
+ * @param {Object} obj
+ * @returns {Array}
+ */
+ function toArray(obj) {
+ return Array.prototype.slice.call(obj, 0);
+ }
- this.inMode = 'delete';
- var selectedNodes = this.selectionHandler.getSelectedNodes();
- var selectedEdges = this.selectionHandler.getSelectedEdges();
- var deleteFunction = undefined;
- if (selectedNodes.length > 0) {
- for (var i = 0; i < selectedNodes.length; i++) {
- if (this.body.nodes[selectedNodes[i]].isCluster === true) {
- alert(this.options.locales[this.options.locale].deleteClusterError);
- return;
- }
- }
+ /**
+ * unique array with objects based on a key (like 'id') or just by the array's value
+ * @param {Array} src [{id:1},{id:2},{id:1}]
+ * @param {String} [key]
+ * @param {Boolean} [sort=False]
+ * @returns {Array} [{id:1},{id:2}]
+ */
+ function uniqueArray(src, key, sort) {
+ var results = [];
+ var values = [];
+ var i = 0;
- if (typeof this.options.handlerFunctions.deleteNode === 'function') {
- deleteFunction = this.options.handlerFunctions.deleteNode;
- }
- } else if (selectedEdges.length > 0) {
- if (typeof this.options.handlerFunctions.deleteEdge === 'function') {
- deleteFunction = this.options.handlerFunctions.deleteEdge;
+ while (i < src.length) {
+ var val = key ? src[i][key] : src[i];
+ if (inArray(values, val) < 0) {
+ results.push(src[i]);
}
- }
+ values[i] = val;
+ i++;
+ }
- if (typeof deleteFunction === 'function') {
- var data = { nodes: selectedNodes, edges: selectedEdges };
- if (deleteFunction.length === 2) {
- deleteFunction(data, function (finalizedData) {
- if (finalizedData !== null && finalizedData !== undefined && _this3.inMode === 'delete') {
- // if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
- _this3.body.data.edges.remove(finalizedData.edges);
- _this3.body.data.nodes.remove(finalizedData.nodes);
- _this3.body.emitter.emit('startSimulation');
- }
- });
+ if (sort) {
+ if (!key) {
+ results = results.sort();
} else {
- throw new Error('The function for delete does not support two arguments (data, callback)');
+ results = results.sort(function sortUniqueArray(a, b) {
+ return a[key] > b[key];
+ });
}
- } else {
- this.body.data.edges.remove(selectedEdges);
- this.body.data.nodes.remove(selectedNodes);
- this.body.emitter.emit('startSimulation');
- }
}
- }, {
- key: '_setup',
- //********************************************** PRIVATE ***************************************//
+ return results;
+ }
- /**
- * draw or remove the DOM
- * @private
- */
- value: function _setup() {
- if (this.options.enabled === true) {
- // Enable the GUI
- this.guiEnabled = true;
+ /**
+ * get the prefixed property
+ * @param {Object} obj
+ * @param {String} property
+ * @returns {String|Undefined} prefixed
+ */
+ function prefixed(obj, property) {
+ var prefix, prop;
+ var camelProp = property[0].toUpperCase() + property.slice(1);
- this._createWrappers();
- if (this.editMode === false) {
- this._createEditButton();
- } else {
- this.showManipulatorToolbar();
- }
- } else {
- this._removeManipulationDOM();
-
- // disable the gui
- this.guiEnabled = false;
- }
- }
- }, {
- key: '_createWrappers',
-
- /**
- * create the div overlays that contain the DOM
- * @private
- */
- value: function _createWrappers() {
- // load the manipulator HTML elements. All styling done in css.
- if (this.manipulationDiv === undefined) {
- this.manipulationDiv = document.createElement('div');
- this.manipulationDiv.className = 'vis-manipulation';
- if (this.editMode === true) {
- this.manipulationDiv.style.display = 'block';
- } else {
- this.manipulationDiv.style.display = 'none';
- }
- this.canvas.frame.appendChild(this.manipulationDiv);
- }
+ var i = 0;
+ while (i < VENDOR_PREFIXES.length) {
+ prefix = VENDOR_PREFIXES[i];
+ prop = (prefix) ? prefix + camelProp : property;
- // container for the edit button.
- if (this.editModeDiv === undefined) {
- this.editModeDiv = document.createElement('div');
- this.editModeDiv.className = 'vis-edit-mode';
- if (this.editMode === true) {
- this.editModeDiv.style.display = 'none';
- } else {
- this.editModeDiv.style.display = 'block';
+ if (prop in obj) {
+ return prop;
}
- this.canvas.frame.appendChild(this.editModeDiv);
- }
-
- // container for the close div button
- if (this.closeDiv === undefined) {
- this.closeDiv = document.createElement('div');
- this.closeDiv.className = 'vis-close';
- this.closeDiv.style.display = this.manipulationDiv.style.display;
- this.canvas.frame.appendChild(this.closeDiv);
- }
+ i++;
}
- }, {
- key: '_getNewTargetNode',
-
- /**
- * generate a new target node. Used for creating new edges and editing edges
- * @param x
- * @param y
- * @returns {*}
- * @private
- */
- value: function _getNewTargetNode(x, y) {
- var controlNodeStyle = util.deepExtend({}, this.options.controlNodeStyle);
+ return undefined;
+ }
- controlNodeStyle.id = 'targetNode' + util.randomUUID();
- controlNodeStyle.hidden = false;
- controlNodeStyle.physics = false;
- controlNodeStyle.x = x;
- controlNodeStyle.y = y;
+ /**
+ * get a unique id
+ * @returns {number} uniqueId
+ */
+ var _uniqueId = 1;
+ function uniqueId() {
+ return _uniqueId++;
+ }
- return this.body.functions.createNode(controlNodeStyle);
- }
- }, {
- key: '_createEditButton',
+ /**
+ * get the window object of an element
+ * @param {HTMLElement} element
+ * @returns {DocumentView|Window}
+ */
+ function getWindowForElement(element) {
+ var doc = element.ownerDocument;
+ return (doc.defaultView || doc.parentWindow);
+ }
- /**
- * Create the edit button
- */
- value: function _createEditButton() {
- // restore everything to it's original state (if applicable)
- this._clean();
+ var MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
- // reset the manipulationDOM
- this.manipulationDOM = {};
+ var SUPPORT_TOUCH = ('ontouchstart' in window);
+ var SUPPORT_POINTER_EVENTS = prefixed(window, 'PointerEvent') !== undefined;
+ var SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);
- // empty the editModeDiv
- util.recursiveDOMDelete(this.editModeDiv);
+ var INPUT_TYPE_TOUCH = 'touch';
+ var INPUT_TYPE_PEN = 'pen';
+ var INPUT_TYPE_MOUSE = 'mouse';
+ var INPUT_TYPE_KINECT = 'kinect';
- // create the contents for the editMode button
- var locale = this.options.locales[this.options.locale];
- var button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale.edit);
- this.editModeDiv.appendChild(button);
+ var COMPUTE_INTERVAL = 25;
- // bind a hammer listener to the button, calling the function toggleEditMode.
- this._bindHammerToDiv(button, this.toggleEditMode.bind(this));
- }
- }, {
- key: '_clean',
+ var INPUT_START = 1;
+ var INPUT_MOVE = 2;
+ var INPUT_END = 4;
+ var INPUT_CANCEL = 8;
- /**
- * this function cleans up after everything this module does. Temporary elements, functions and events are removed, physics restored, hammers removed.
- * @private
- */
- value: function _clean() {
- // not in mode
- this.inMode = false;
+ var DIRECTION_NONE = 1;
+ var DIRECTION_LEFT = 2;
+ var DIRECTION_RIGHT = 4;
+ var DIRECTION_UP = 8;
+ var DIRECTION_DOWN = 16;
- // _clean the divs
- if (this.guiEnabled === true) {
- util.recursiveDOMDelete(this.editModeDiv);
- util.recursiveDOMDelete(this.manipulationDiv);
+ var DIRECTION_HORIZONTAL = DIRECTION_LEFT | DIRECTION_RIGHT;
+ var DIRECTION_VERTICAL = DIRECTION_UP | DIRECTION_DOWN;
+ var DIRECTION_ALL = DIRECTION_HORIZONTAL | DIRECTION_VERTICAL;
- // removes all the bindings and overloads
- this._cleanManipulatorHammers();
- }
+ var PROPS_XY = ['x', 'y'];
+ var PROPS_CLIENT_XY = ['clientX', 'clientY'];
- // remove temporary nodes and edges
- this._cleanupTemporaryNodesAndEdges();
+ /**
+ * create new input type manager
+ * @param {Manager} manager
+ * @param {Function} callback
+ * @returns {Input}
+ * @constructor
+ */
+ function Input(manager, callback) {
+ var self = this;
+ this.manager = manager;
+ this.callback = callback;
+ this.element = manager.element;
+ this.target = manager.options.inputTarget;
- // restore overloaded UI functions
- this._unbindTemporaryUIs();
+ // smaller wrapper around the handler, for the scope and the enabled state of the manager,
+ // so when disabled the input events are completely bypassed.
+ this.domHandler = function(ev) {
+ if (boolOrFn(manager.options.enable, [manager])) {
+ self.handler(ev);
+ }
+ };
- // remove the temporaryEventFunctions
- this._unbindTemporaryEvents();
+ this.init();
- // restore the physics if required
- this.body.emitter.emit('restorePhysics');
- }
- }, {
- key: '_cleanManipulatorHammers',
+ }
+ Input.prototype = {
/**
- * Each dom element has it's own hammer. They are stored in this.manipulationHammers. This cleans them up.
- * @private
+ * should handle the inputEvent data and trigger the callback
+ * @virtual
*/
- value: function _cleanManipulatorHammers() {
- // _clean hammer bindings
- if (this.manipulationHammers.length != 0) {
- for (var i = 0; i < this.manipulationHammers.length; i++) {
- this.manipulationHammers[i].destroy();
- }
- this.manipulationHammers = [];
- }
- }
- }, {
- key: '_removeManipulationDOM',
+ handler: function() { },
/**
- * Remove all DOM elements created by this module.
- * @private
+ * bind the events
*/
- value: function _removeManipulationDOM() {
- // removes all the bindings and overloads
- this._clean();
+ init: function() {
+ this.evEl && addEventListeners(this.element, this.evEl, this.domHandler);
+ this.evTarget && addEventListeners(this.target, this.evTarget, this.domHandler);
+ this.evWin && addEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
+ },
- // empty the manipulation divs
- util.recursiveDOMDelete(this.manipulationDiv);
- util.recursiveDOMDelete(this.editModeDiv);
- util.recursiveDOMDelete(this.closeDiv);
+ /**
+ * unbind the events
+ */
+ destroy: function() {
+ this.evEl && removeEventListeners(this.element, this.evEl, this.domHandler);
+ this.evTarget && removeEventListeners(this.target, this.evTarget, this.domHandler);
+ this.evWin && removeEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
+ }
+ };
- // remove the manipulation divs
- this.canvas.frame.removeChild(this.manipulationDiv);
- this.canvas.frame.removeChild(this.editModeDiv);
- this.canvas.frame.removeChild(this.closeDiv);
+ /**
+ * create new input type manager
+ * called by the Manager constructor
+ * @param {Hammer} manager
+ * @returns {Input}
+ */
+ function createInputInstance(manager) {
+ var Type;
+ var inputClass = manager.options.inputClass;
- // set the references to undefined
- this.manipulationDiv = undefined;
- this.editModeDiv = undefined;
- this.closeDiv = undefined;
+ if (inputClass) {
+ Type = inputClass;
+ } else if (SUPPORT_POINTER_EVENTS) {
+ Type = PointerEventInput;
+ } else if (SUPPORT_ONLY_TOUCH) {
+ Type = TouchInput;
+ } else if (!SUPPORT_TOUCH) {
+ Type = MouseInput;
+ } else {
+ Type = TouchMouseInput;
}
- }, {
- key: '_createSeperator',
+ return new (Type)(manager, inputHandler);
+ }
- /**
- * create a seperator line. the index is to differentiate in the manipulation dom
- * @param index
- * @private
- */
- value: function _createSeperator() {
- var index = arguments[0] === undefined ? 1 : arguments[0];
+ /**
+ * handle input events
+ * @param {Manager} manager
+ * @param {String} eventType
+ * @param {Object} input
+ */
+ function inputHandler(manager, eventType, input) {
+ var pointersLen = input.pointers.length;
+ var changedPointersLen = input.changedPointers.length;
+ var isFirst = (eventType & INPUT_START && (pointersLen - changedPointersLen === 0));
+ var isFinal = (eventType & (INPUT_END | INPUT_CANCEL) && (pointersLen - changedPointersLen === 0));
- this.manipulationDOM['seperatorLineDiv' + index] = document.createElement('div');
- this.manipulationDOM['seperatorLineDiv' + index].className = 'vis-separator-line';
- this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv' + index]);
+ input.isFirst = !!isFirst;
+ input.isFinal = !!isFinal;
+
+ if (isFirst) {
+ manager.session = {};
}
- }, {
- key: '_createAddNodeButton',
- // ---------------------- DOM functions for buttons --------------------------//
+ // source event is the normalized value of the domEvents
+ // like 'touchstart, mouseup, pointerdown'
+ input.eventType = eventType;
- value: function _createAddNodeButton(locale) {
- var button = this._createButton('addNode', 'vis-button vis-add', locale.addNode);
- this.manipulationDiv.appendChild(button);
- this._bindHammerToDiv(button, this.addNodeMode.bind(this));
- }
- }, {
- key: '_createAddEdgeButton',
- value: function _createAddEdgeButton(locale) {
- var button = this._createButton('addEdge', 'vis-button vis-connect', locale.addEdge);
- this.manipulationDiv.appendChild(button);
- this._bindHammerToDiv(button, this.addEdgeMode.bind(this));
- }
- }, {
- key: '_createEditNodeButton',
- value: function _createEditNodeButton(locale) {
- var button = this._createButton('editNodeMode', 'vis-button vis-edit', locale.editNodeMode);
- this.manipulationDiv.appendChild(button);
- this._bindHammerToDiv(button, this.editNodeMode.bind(this));
- }
- }, {
- key: '_createEditEdgeButton',
- value: function _createEditEdgeButton(locale) {
- var button = this._createButton('editEdge', 'vis-button vis-edit', locale.editEdge);
- this.manipulationDiv.appendChild(button);
- this._bindHammerToDiv(button, this.editEdgeMode.bind(this));
- }
- }, {
- key: '_createDeleteButton',
- value: function _createDeleteButton(locale) {
- var button = this._createButton('delete', 'vis-button vis-delete', locale.del);
- this.manipulationDiv.appendChild(button);
- this._bindHammerToDiv(button, this.deleteSelected.bind(this));
- }
- }, {
- key: '_createBackButton',
- value: function _createBackButton(locale) {
- var button = this._createButton('back', 'vis-button vis-back', locale.back);
- this.manipulationDiv.appendChild(button);
- this._bindHammerToDiv(button, this.showManipulatorToolbar.bind(this));
- }
- }, {
- key: '_createButton',
- value: function _createButton(id, className, label) {
- var labelClassName = arguments[3] === undefined ? 'vis-label' : arguments[3];
+ // compute scale, rotation etc
+ computeInputData(manager, input);
- this.manipulationDOM[id + 'Div'] = document.createElement('div');
- this.manipulationDOM[id + 'Div'].className = className;
- this.manipulationDOM[id + 'Label'] = document.createElement('div');
- this.manipulationDOM[id + 'Label'].className = labelClassName;
- this.manipulationDOM[id + 'Label'].innerHTML = label;
- this.manipulationDOM[id + 'Div'].appendChild(this.manipulationDOM[id + 'Label']);
- return this.manipulationDOM[id + 'Div'];
- }
- }, {
- key: '_createDescription',
- value: function _createDescription(label) {
- this.manipulationDiv.appendChild(this._createButton('description', 'vis-button vis-none', label));
- }
- }, {
- key: '_temporaryBindEvent',
+ // emit secret event
+ manager.emit('hammer.input', input);
- // -------------------------- End of DOM functions for buttons ------------------------------//
+ manager.recognize(input);
+ manager.session.prevInput = input;
+ }
- /**
- * this binds an event until cleanup by the clean functions.
- * @param event
- * @param newFunction
- * @private
- */
- value: function _temporaryBindEvent(event, newFunction) {
- this.temporaryEventFunctions.push({ event: event, boundFunction: newFunction });
- this.body.emitter.on(event, newFunction);
- }
- }, {
- key: '_temporaryBindUI',
+ /**
+ * extend the data with some usable properties like scale, rotate, velocity etc
+ * @param {Object} manager
+ * @param {Object} input
+ */
+ function computeInputData(manager, input) {
+ var session = manager.session;
+ var pointers = input.pointers;
+ var pointersLength = pointers.length;
- /**
- * this overrides an UI function until cleanup by the clean function
- * @param UIfunctionName
- * @param newFunction
- * @private
- */
- value: function _temporaryBindUI(UIfunctionName, newFunction) {
- if (this.body.eventListeners[UIfunctionName] !== undefined) {
- this.temporaryUIFunctions[UIfunctionName] = this.body.eventListeners[UIfunctionName];
- this.body.eventListeners[UIfunctionName] = newFunction;
- } else {
- throw new Error('This UI function does not exist. Typo? You tried: ' + UIfunctionName + ' possible are: ' + JSON.stringify(Object.keys(this.body.eventListeners)));
- }
+ // store the first input to calculate the distance and direction
+ if (!session.firstInput) {
+ session.firstInput = simpleCloneInputData(input);
}
- }, {
- key: '_unbindTemporaryUIs',
- /**
- * Restore the overridden UI functions to their original state.
- *
- * @private
- */
- value: function _unbindTemporaryUIs() {
- for (var functionName in this.temporaryUIFunctions) {
- if (this.temporaryUIFunctions.hasOwnProperty(functionName)) {
- this.body.eventListeners[functionName] = this.temporaryUIFunctions[functionName];
- delete this.temporaryUIFunctions[functionName];
- }
- }
- this.temporaryUIFunctions = {};
+ // to compute scale and rotation we need to store the multiple touches
+ if (pointersLength > 1 && !session.firstMultiple) {
+ session.firstMultiple = simpleCloneInputData(input);
+ } else if (pointersLength === 1) {
+ session.firstMultiple = false;
}
- }, {
- key: '_unbindTemporaryEvents',
- /**
- * Unbind the events created by _temporaryBindEvent
- * @private
- */
- value: function _unbindTemporaryEvents() {
- for (var i = 0; i < this.temporaryEventFunctions.length; i++) {
- var eventName = this.temporaryEventFunctions[i].event;
- var boundFunction = this.temporaryEventFunctions[i].boundFunction;
- this.body.emitter.off(eventName, boundFunction);
- }
- this.temporaryEventFunctions = [];
- }
- }, {
- key: '_bindHammerToDiv',
+ var firstInput = session.firstInput;
+ var firstMultiple = session.firstMultiple;
+ var offsetCenter = firstMultiple ? firstMultiple.center : firstInput.center;
- /**
- * Bind an hammer instance to a DOM element.
- * @param domElement
- * @param funct
- */
- value: function _bindHammerToDiv(domElement, boundFunction) {
- var hammer = new Hammer(domElement, {});
- hammerUtil.onTouch(hammer, boundFunction);
- this.manipulationHammers.push(hammer);
- }
- }, {
- key: '_cleanupTemporaryNodesAndEdges',
+ var center = input.center = getCenter(pointers);
+ input.timeStamp = now();
+ input.deltaTime = input.timeStamp - firstInput.timeStamp;
- /**
- * Neatly clean up temporary edges and nodes
- * @private
- */
- value: function _cleanupTemporaryNodesAndEdges() {
- // _clean temporary edges
- for (var i = 0; i < this.temporaryIds.edges.length; i++) {
- this.body.edges[this.temporaryIds.edges[i]].disconnect();
- delete this.body.edges[this.temporaryIds.edges[i]];
- var indexTempEdge = this.body.edgeIndices.indexOf(this.temporaryIds.edges[i]);
- if (indexTempEdge !== -1) {
- this.body.edgeIndices.splice(indexTempEdge, 1);
- }
- }
+ input.angle = getAngle(offsetCenter, center);
+ input.distance = getDistance(offsetCenter, center);
- // _clean temporary nodes
- for (var i = 0; i < this.temporaryIds.nodes.length; i++) {
- delete this.body.nodes[this.temporaryIds.nodes[i]];
- var indexTempNode = this.body.nodeIndices.indexOf(this.temporaryIds.nodes[i]);
- if (indexTempNode !== -1) {
- this.body.nodeIndices.splice(indexTempNode, 1);
- }
- }
+ computeDeltaXY(session, input);
+ input.offsetDirection = getDirection(input.deltaX, input.deltaY);
- this.temporaryIds = { nodes: [], edges: [] };
+ input.scale = firstMultiple ? getScale(firstMultiple.pointers, pointers) : 1;
+ input.rotation = firstMultiple ? getRotation(firstMultiple.pointers, pointers) : 0;
+
+ computeIntervalInputData(session, input);
+
+ // find the correct target
+ var target = manager.element;
+ if (hasParent(input.srcEvent.target, target)) {
+ target = input.srcEvent.target;
}
- }, {
- key: '_controlNodeTouch',
+ input.target = target;
+ }
- // ------------------------------------------ EDIT EDGE FUNCTIONS -----------------------------------------//
+ function computeDeltaXY(session, input) {
+ var center = input.center;
+ var offset = session.offsetDelta || {};
+ var prevDelta = session.prevDelta || {};
+ var prevInput = session.prevInput || {};
- /**
- * the touch is used to get the position of the initial click
- * @param event
- * @private
- */
- value: function _controlNodeTouch(event) {
- this.selectionHandler.unselectAll();
- this.lastTouch = this.body.functions.getPointer(event.center);
- this.lastTouch.translation = util.extend({}, this.body.view.translation); // copy the object
+ if (input.eventType === INPUT_START || prevInput.eventType === INPUT_END) {
+ prevDelta = session.prevDelta = {
+ x: prevInput.deltaX || 0,
+ y: prevInput.deltaY || 0
+ };
+
+ offset = session.offsetDelta = {
+ x: center.x,
+ y: center.y
+ };
}
- }, {
- key: '_controlNodeDragStart',
- /**
- * the drag start is used to mark one of the control nodes as selected.
- * @param event
- * @private
- */
- value: function _controlNodeDragStart(event) {
- var pointer = this.lastTouch;
- var pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
- var from = this.body.nodes[this.temporaryIds.nodes[0]];
- var to = this.body.nodes[this.temporaryIds.nodes[1]];
- var edge = this.body.edges[this.edgeBeingEditedId];
- this.selectedControlNode = undefined;
+ input.deltaX = prevDelta.x + (center.x - offset.x);
+ input.deltaY = prevDelta.y + (center.y - offset.y);
+ }
- var fromSelect = from.isOverlappingWith(pointerObj);
- var toSelect = to.isOverlappingWith(pointerObj);
+ /**
+ * velocity is calculated every x ms
+ * @param {Object} session
+ * @param {Object} input
+ */
+ function computeIntervalInputData(session, input) {
+ var last = session.lastInterval || input,
+ deltaTime = input.timeStamp - last.timeStamp,
+ velocity, velocityX, velocityY, direction;
- if (fromSelect === true) {
- this.selectedControlNode = from;
- edge.edgeType.from = from;
- } else if (toSelect === true) {
- this.selectedControlNode = to;
- edge.edgeType.to = to;
- }
+ if (input.eventType != INPUT_CANCEL && (deltaTime > COMPUTE_INTERVAL || last.velocity === undefined)) {
+ var deltaX = last.deltaX - input.deltaX;
+ var deltaY = last.deltaY - input.deltaY;
- this.body.emitter.emit('_redraw');
+ var v = getVelocity(deltaTime, deltaX, deltaY);
+ velocityX = v.x;
+ velocityY = v.y;
+ velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
+ direction = getDirection(deltaX, deltaY);
+
+ session.lastInterval = input;
+ } else {
+ // use latest velocity info if it doesn't overtake a minimum period
+ velocity = last.velocity;
+ velocityX = last.velocityX;
+ velocityY = last.velocityY;
+ direction = last.direction;
}
- }, {
- key: '_controlNodeDrag',
- /**
- * dragging the control nodes or the canvas
- * @param event
- * @private
- */
- value: function _controlNodeDrag(event) {
- this.body.emitter.emit('disablePhysics');
- var pointer = this.body.functions.getPointer(event.center);
- var pos = this.canvas.DOMtoCanvas(pointer);
+ input.velocity = velocity;
+ input.velocityX = velocityX;
+ input.velocityY = velocityY;
+ input.direction = direction;
+ }
- if (this.selectedControlNode !== undefined) {
- this.selectedControlNode.x = pos.x;
- this.selectedControlNode.y = pos.y;
- } else {
- // if the drag was not started properly because the click started outside the network div, start it now.
- var diffX = pointer.x - this.lastTouch.x;
- var diffY = pointer.y - this.lastTouch.y;
- this.body.view.translation = { x: this.lastTouch.translation.x + diffX, y: this.lastTouch.translation.y + diffY };
- }
- this.body.emitter.emit('_redraw');
+ /**
+ * create a simple clone from the input used for storage of firstInput and firstMultiple
+ * @param {Object} input
+ * @returns {Object} clonedInputData
+ */
+ function simpleCloneInputData(input) {
+ // make a simple copy of the pointers because we will get a reference if we don't
+ // we only need clientXY for the calculations
+ var pointers = [];
+ var i = 0;
+ while (i < input.pointers.length) {
+ pointers[i] = {
+ clientX: round(input.pointers[i].clientX),
+ clientY: round(input.pointers[i].clientY)
+ };
+ i++;
}
- }, {
- key: '_controlNodeDragEnd',
- /**
- * connecting or restoring the control nodes.
- * @param event
- * @private
- */
- value: function _controlNodeDragEnd(event) {
- var pointer = this.body.functions.getPointer(event.center);
- var pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
- var edge = this.body.edges[this.edgeBeingEditedId];
+ return {
+ timeStamp: now(),
+ pointers: pointers,
+ center: getCenter(pointers),
+ deltaX: input.deltaX,
+ deltaY: input.deltaY
+ };
+ }
- var overlappingNodeIds = this.selectionHandler._getAllNodesOverlappingWith(pointerObj);
- var node = undefined;
- for (var i = overlappingNodeIds.length - 1; i >= 0; i--) {
- if (overlappingNodeIds[i] !== this.selectedControlNode.id) {
- node = this.body.nodes[overlappingNodeIds[i]];
- break;
- }
- }
+ /**
+ * get the center of all the pointers
+ * @param {Array} pointers
+ * @return {Object} center contains `x` and `y` properties
+ */
+ function getCenter(pointers) {
+ var pointersLength = pointers.length;
- // perform the connection
- if (node !== undefined && this.selectedControlNode !== undefined) {
- if (node.isCluster === true) {
- alert(this.options.locales[this.options.locale].createEdgeError);
- } else {
- var from = this.body.nodes[this.temporaryIds.nodes[0]];
- if (this.selectedControlNode.id === from.id) {
- this._performEditEdge(node.id, edge.to.id);
- } else {
- this._performEditEdge(edge.from.id, node.id);
- }
- }
- } else {
- edge.updateEdgeType();
- this.body.emitter.emit('restorePhysics');
- }
- this.body.emitter.emit('_redraw');
+ // no need to loop when only one touch
+ if (pointersLength === 1) {
+ return {
+ x: round(pointers[0].clientX),
+ y: round(pointers[0].clientY)
+ };
}
- }, {
- key: '_handleConnect',
- // ------------------------------------ END OF EDIT EDGE FUNCTIONS -----------------------------------------//
+ var x = 0, y = 0, i = 0;
+ while (i < pointersLength) {
+ x += pointers[i].clientX;
+ y += pointers[i].clientY;
+ i++;
+ }
- // ------------------------------------------- ADD EDGE FUNCTIONS -----------------------------------------//
- /**
- * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
- * to walk the user through the process.
- *
- * @private
- */
- value: function _handleConnect(event) {
- // check to avoid double fireing of this function.
- if (new Date().valueOf() - this.touchTime > 100) {
- this.lastTouch = this.body.functions.getPointer(event.center);
- this.lastTouch.translation = util.extend({}, this.body.view.translation); // copy the object
+ return {
+ x: round(x / pointersLength),
+ y: round(y / pointersLength)
+ };
+ }
- var pointer = this.lastTouch;
- var node = this.selectionHandler.getNodeAt(pointer);
+ /**
+ * calculate the velocity between two points. unit is in px per ms.
+ * @param {Number} deltaTime
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Object} velocity `x` and `y`
+ */
+ function getVelocity(deltaTime, x, y) {
+ return {
+ x: x / deltaTime || 0,
+ y: y / deltaTime || 0
+ };
+ }
- if (node !== undefined) {
- if (node.isCluster === true) {
- alert(this.options.locales[this.options.locale].createEdgeError);
- } else {
- // create a node the temporary line can look at
- var targetNode = this._getNewTargetNode(node.x, node.y);
- this.body.nodes[targetNode.id] = targetNode;
- this.body.nodeIndices.push(targetNode.id);
+ /**
+ * get the direction between two points
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Number} direction
+ */
+ function getDirection(x, y) {
+ if (x === y) {
+ return DIRECTION_NONE;
+ }
- // create a temporary edge
- var connectionEdge = this.body.functions.createEdge({
- id: 'connectionEdge' + util.randomUUID(),
- from: node.id,
- to: targetNode.id,
- physics: false,
- smooth: {
- enabled: true,
- dynamic: false,
- type: 'continuous',
- roundness: 0.5
- }
- });
- this.body.edges[connectionEdge.id] = connectionEdge;
- this.body.edgeIndices.push(connectionEdge.id);
+ if (abs(x) >= abs(y)) {
+ return x > 0 ? DIRECTION_LEFT : DIRECTION_RIGHT;
+ }
+ return y > 0 ? DIRECTION_UP : DIRECTION_DOWN;
+ }
- this.temporaryIds.nodes.push(targetNode.id);
- this.temporaryIds.edges.push(connectionEdge.id);
- }
- }
- this.touchTime = new Date().valueOf();
- }
+ /**
+ * calculate the absolute distance between two points
+ * @param {Object} p1 {x, y}
+ * @param {Object} p2 {x, y}
+ * @param {Array} [props] containing x and y keys
+ * @return {Number} distance
+ */
+ function getDistance(p1, p2, props) {
+ if (!props) {
+ props = PROPS_XY;
}
- }, {
- key: '_dragControlNode',
- value: function _dragControlNode(event) {
- var pointer = this.body.functions.getPointer(event.center);
- if (this.temporaryIds.nodes[0] !== undefined) {
- var targetNode = this.body.nodes[this.temporaryIds.nodes[0]]; // there is only one temp node in the add edge mode.
- targetNode.x = this.canvas._XconvertDOMtoCanvas(pointer.x);
- targetNode.y = this.canvas._YconvertDOMtoCanvas(pointer.y);
- this.body.emitter.emit('_redraw');
- } else {
- var diffX = pointer.x - this.lastTouch.x;
- var diffY = pointer.y - this.lastTouch.y;
- this.body.view.translation = { x: this.lastTouch.translation.x + diffX, y: this.lastTouch.translation.y + diffY };
- }
+ var x = p2[props[0]] - p1[props[0]],
+ y = p2[props[1]] - p1[props[1]];
+
+ return Math.sqrt((x * x) + (y * y));
+ }
+
+ /**
+ * calculate the angle between two coordinates
+ * @param {Object} p1
+ * @param {Object} p2
+ * @param {Array} [props] containing x and y keys
+ * @return {Number} angle
+ */
+ function getAngle(p1, p2, props) {
+ if (!props) {
+ props = PROPS_XY;
}
- }, {
- key: '_finishConnect',
+ var x = p2[props[0]] - p1[props[0]],
+ y = p2[props[1]] - p1[props[1]];
+ return Math.atan2(y, x) * 180 / Math.PI;
+ }
- /**
- * Connect the new edge to the target if one exists, otherwise remove temp line
- * @param event
- * @private
- */
- value: function _finishConnect(event) {
- var pointer = this.body.functions.getPointer(event.center);
- var pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
+ /**
+ * calculate the rotation degrees between two pointersets
+ * @param {Array} start array of pointers
+ * @param {Array} end array of pointers
+ * @return {Number} rotation
+ */
+ function getRotation(start, end) {
+ return getAngle(end[1], end[0], PROPS_CLIENT_XY) - getAngle(start[1], start[0], PROPS_CLIENT_XY);
+ }
- // remember the edge id
- var connectFromId = undefined;
- if (this.temporaryIds.edges[0] !== undefined) {
- connectFromId = this.body.edges[this.temporaryIds.edges[0]].fromId;
- }
+ /**
+ * calculate the scale factor between two pointersets
+ * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
+ * @param {Array} start array of pointers
+ * @param {Array} end array of pointers
+ * @return {Number} scale
+ */
+ function getScale(start, end) {
+ return getDistance(end[0], end[1], PROPS_CLIENT_XY) / getDistance(start[0], start[1], PROPS_CLIENT_XY);
+ }
- // get the overlapping node but NOT the temporary node;
- var overlappingNodeIds = this.selectionHandler._getAllNodesOverlappingWith(pointerObj);
- var node = undefined;
- for (var i = overlappingNodeIds.length - 1; i >= 0; i--) {
- // if the node id is NOT a temporary node, accept the node.
- if (this.temporaryIds.nodes.indexOf(overlappingNodeIds[i]) === -1) {
- node = this.body.nodes[overlappingNodeIds[i]];
- break;
- }
- }
+ var MOUSE_INPUT_MAP = {
+ mousedown: INPUT_START,
+ mousemove: INPUT_MOVE,
+ mouseup: INPUT_END
+ };
- // clean temporary nodes and edges.
- this._cleanupTemporaryNodesAndEdges();
+ var MOUSE_ELEMENT_EVENTS = 'mousedown';
+ var MOUSE_WINDOW_EVENTS = 'mousemove mouseup';
- // perform the connection
- if (node !== undefined) {
- if (node.isCluster === true) {
- alert(this.options.locales[this.options.locale].createEdgeError);
- } else {
- if (this.body.nodes[connectFromId] !== undefined && this.body.nodes[node.id] !== undefined) {
- this._performCreateEdge(connectFromId, node.id);
- }
- }
- }
- this.body.emitter.emit('_redraw');
- }
- }, {
- key: '_performAddNode',
+ /**
+ * Mouse events input
+ * @constructor
+ * @extends Input
+ */
+ function MouseInput() {
+ this.evEl = MOUSE_ELEMENT_EVENTS;
+ this.evWin = MOUSE_WINDOW_EVENTS;
- // --------------------------------------- END OF ADD EDGE FUNCTIONS -------------------------------------//
+ this.allow = true; // used by Input.TouchMouse to disable mouse events
+ this.pressed = false; // mousedown state
- // ------------------------------ Performing all the actual data manipulation ------------------------//
+ Input.apply(this, arguments);
+ }
+ inherit(MouseInput, Input, {
/**
- * Adds a node on the specified location
+ * handle mouse events
+ * @param {Object} ev
*/
- value: function _performAddNode(clickData) {
- var _this4 = this;
-
- var defaultData = {
- id: util.randomUUID(),
- x: clickData.pointer.canvas.x,
- y: clickData.pointer.canvas.y,
- label: 'new'
- };
+ handler: function MEhandler(ev) {
+ var eventType = MOUSE_INPUT_MAP[ev.type];
- if (typeof this.options.handlerFunctions.addNode === 'function') {
- if (this.options.handlerFunctions.addNode.length === 2) {
- this.options.handlerFunctions.addNode(defaultData, function (finalizedData) {
- if (finalizedData !== null && finalizedData !== undefined && _this4.inMode === 'addNode') {
- // if for whatever reason the mode has changes (due to dataset change) disregard the callback
- _this4.body.data.nodes.add(finalizedData);
- _this4.showManipulatorToolbar();
- }
- });
- } else {
- throw new Error('The function for add does not support two arguments (data,callback)');
- this.showManipulatorToolbar();
+ // on start we want to have the left mouse button down
+ if (eventType & INPUT_START && ev.button === 0) {
+ this.pressed = true;
}
- } else {
- this.body.data.nodes.add(defaultData);
- this.showManipulatorToolbar();
- }
- }
- }, {
- key: '_performCreateEdge',
-
- /**
- * connect two nodes with a new edge.
- *
- * @private
- */
- value: function _performCreateEdge(sourceNodeId, targetNodeId) {
- var _this5 = this;
- var defaultData = { from: sourceNodeId, to: targetNodeId };
- if (this.options.handlerFunctions.addEdge) {
- if (this.options.handlerFunctions.addEdge.length === 2) {
- this.options.handlerFunctions.addEdge(defaultData, function (finalizedData) {
- if (finalizedData !== null && finalizedData !== undefined && _this5.inMode === 'addEdge') {
- // if for whatever reason the mode has changes (due to dataset change) disregard the callback
- _this5.body.data.edges.add(finalizedData);
- _this5.selectionHandler.unselectAll();
- _this5.showManipulatorToolbar();
- }
- });
- } else {
- throw new Error('The function for connect does not support two arguments (data,callback)');
+ if (eventType & INPUT_MOVE && ev.which !== 1) {
+ eventType = INPUT_END;
}
- } else {
- this.body.data.edges.add(defaultData);
- this.selectionHandler.unselectAll();
- this.showManipulatorToolbar();
- }
- }
- }, {
- key: '_performEditEdge',
- /**
- * connect two nodes with a new edge.
- *
- * @private
- */
- value: function _performEditEdge(sourceNodeId, targetNodeId) {
- var _this6 = this;
+ // mouse must be down, and mouse events are allowed (see the TouchMouse input)
+ if (!this.pressed || !this.allow) {
+ return;
+ }
- var defaultData = { id: this.edgeBeingEditedId, from: sourceNodeId, to: targetNodeId };
- if (this.options.handlerFunctions.editEdge) {
- if (this.options.handlerFunctions.editEdge.length === 2) {
- this.options.handlerFunctions.editEdge(defaultData, function (finalizedData) {
- if (finalizedData === null || finalizedData === undefined || _this6.inMode !== 'editEdge') {
- // if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
- _this6.body.edges[defaultData.id].updateEdgeType();
- _this6.body.emitter.emit('_redraw');
- } else {
- _this6.body.data.edges.update(finalizedData);
- _this6.selectionHandler.unselectAll();
- _this6.showManipulatorToolbar();
- }
- });
- } else {
- throw new Error('The function for edit does not support two arguments (data, callback)');
+ if (eventType & INPUT_END) {
+ this.pressed = false;
}
- } else {
- this.body.data.edges.update(defaultData);
- this.selectionHandler.unselectAll();
- this.showManipulatorToolbar();
- }
- }
- }]);
- return ManipulationSystem;
- })();
+ this.callback(this.manager, eventType, {
+ pointers: [ev],
+ changedPointers: [ev],
+ pointerType: INPUT_TYPE_MOUSE,
+ srcEvent: ev
+ });
+ }
+ });
- exports['default'] = ManipulationSystem;
- module.exports = exports['default'];
+ var POINTER_INPUT_MAP = {
+ pointerdown: INPUT_START,
+ pointermove: INPUT_MOVE,
+ pointerup: INPUT_END,
+ pointercancel: INPUT_CANCEL,
+ pointerout: INPUT_CANCEL
+ };
-/***/ },
-/* 69 */
-/***/ function(module, exports, __webpack_require__) {
+ // in IE10 the pointer types is defined as an enum
+ var IE10_POINTER_TYPE_ENUM = {
+ 2: INPUT_TYPE_TOUCH,
+ 3: INPUT_TYPE_PEN,
+ 4: INPUT_TYPE_MOUSE,
+ 5: INPUT_TYPE_KINECT // see https://twitter.com/jacobrossi/status/480596438489890816
+ };
- 'use strict';
+ var POINTER_ELEMENT_EVENTS = 'pointerdown';
+ var POINTER_WINDOW_EVENTS = 'pointermove pointerup pointercancel';
- var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
+ // IE10 has prefixed support, and case-sensitive
+ if (window.MSPointerEvent) {
+ POINTER_ELEMENT_EVENTS = 'MSPointerDown';
+ POINTER_WINDOW_EVENTS = 'MSPointerMove MSPointerUp MSPointerCancel';
+ }
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
+ /**
+ * Pointer events input
+ * @constructor
+ * @extends Input
+ */
+ function PointerEventInput() {
+ this.evEl = POINTER_ELEMENT_EVENTS;
+ this.evWin = POINTER_WINDOW_EVENTS;
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+ Input.apply(this, arguments);
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
-
- var _ColorPicker = __webpack_require__(86);
-
- var _ColorPicker2 = _interopRequireWildcard(_ColorPicker);
+ this.store = (this.manager.session.pointerEvents = []);
+ }
- var util = __webpack_require__(1);
+ inherit(PointerEventInput, Input, {
+ /**
+ * handle mouse events
+ * @param {Object} ev
+ */
+ handler: function PEhandler(ev) {
+ var store = this.store;
+ var removePointer = false;
- /**
- * The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options.
- * Boolean options are recognised as Boolean
- * Number options should be written as array: [default value, min value, max value, stepsize]
- * Colors should be written as array: ['color', '#ffffff']
- * Strings with should be written as array: [option1, option2, option3, ..]
- *
- * The options are matched with their counterparts in each of the modules and the values used in the configuration are
- *
- */
+ var eventTypeNormalized = ev.type.toLowerCase().replace('ms', '');
+ var eventType = POINTER_INPUT_MAP[eventTypeNormalized];
+ var pointerType = IE10_POINTER_TYPE_ENUM[ev.pointerType] || ev.pointerType;
- var ConfigurationSystem = (function () {
- function ConfigurationSystem(network) {
- _classCallCheck(this, ConfigurationSystem);
+ var isTouch = (pointerType == INPUT_TYPE_TOUCH);
- this.network = network;
- this.changedOptions = [];
+ // get index of the event in the store
+ var storeIndex = inArray(store, ev.pointerId, 'pointerId');
- this.possibleOptions = {
- nodes: {
- borderWidth: [1, 0, 10, 1],
- borderWidthSelected: [2, 0, 10, 1],
- color: {
- border: ['color', '#2B7CE9'],
- background: ['color', '#97C2FC'],
- highlight: {
- border: ['color', '#2B7CE9'],
- background: ['color', '#D2E5FF']
- },
- hover: {
- border: ['color', '#2B7CE9'],
- background: ['color', '#D2E5FF']
- }
- },
- fixed: {
- x: false,
- y: false
- },
- font: {
- color: ['color', '#343434'],
- size: [14, 0, 100, 1], // px
- face: ['arial', 'verdana', 'tahoma'],
- background: ['color', 'none'],
- stroke: [0, 0, 50, 1], // px
- strokeColor: ['color', '#ffffff']
- },
- //group: 'string',
- hidden: false,
- //icon: {
- // face: 'string', //'FontAwesome',
- // code: 'string', //'\uf007',
- // size: [50, 0, 200, 1], //50,
- // color: ['color','#2B7CE9'] //'#aa00ff'
- //},
- //image: 'string', // --> URL
- physics: true,
- scaling: {
- min: [10, 0, 200, 1],
- max: [30, 0, 200, 1],
- label: {
- enabled: true,
- min: [14, 0, 200, 1],
- max: [30, 0, 200, 1],
- maxVisible: [30, 0, 200, 1],
- drawThreshold: [3, 0, 20, 1]
- }
- },
- shadow: {
- enabled: false,
- size: [10, 0, 20, 1],
- x: [5, -30, 30, 1],
- y: [5, -30, 30, 1]
- },
- shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
- size: [25, 0, 200, 1]
- },
- edges: {
- arrows: {
- to: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
- middle: { enabled: false, scaleFactor: [1, 0, 3, 0.05] },
- from: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }
- },
- color: {
- color: ['color', '#848484'],
- highlight: ['color', '#848484'],
- hover: ['color', '#848484'],
- inherit: ['from', 'to', 'both', true, false],
- opacity: [1, 0, 1, 0.05]
- },
- dashes: false,
- font: {
- color: ['color', '#343434'],
- size: [14, 0, 100, 1], // px
- face: ['arial', 'verdana', 'tahoma'],
- background: ['color', 'none'],
- stroke: [1, 0, 50, 1], // px
- strokeColor: ['color', '#ffffff'],
- align: ['horizontal', 'top', 'middle', 'bottom']
- },
- hidden: false,
- hoverWidth: [2, 0, 5, 0.1],
- physics: true,
- scaling: {
- min: [1, 0, 100, 1],
- max: [15, 0, 100, 1],
- label: {
- enabled: true,
- min: [14, 0, 200, 1],
- max: [30, 0, 200, 1],
- maxVisible: [30, 0, 200, 1],
- drawThreshold: [3, 0, 20, 1]
- }
- },
- selectionWidth: [1.5, 0, 5, 0.1],
- selfReferenceSize: [20, 0, 200, 1],
- shadow: {
- enabled: false,
- size: [10, 0, 20, 1],
- x: [5, -30, 30, 1],
- y: [5, -30, 30, 1]
- },
- smooth: {
- enabled: true,
- dynamic: true,
- type: ['continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW'],
- roundness: [0.5, 0, 1, 0.05]
- },
- width: [1, 0, 30, 1]
- },
- layout: {
- randomSeed: [0, 0, 500, 1],
- hierarchical: {
- enabled: false,
- levelSeparation: [150, 20, 500, 5],
- direction: ['UD', 'DU', 'LR', 'RL'], // UD, DU, LR, RL
- sortMethod: ['hubsize', 'directed'] // hubsize, directed
+ // start and mouse must be down
+ if (eventType & INPUT_START && (ev.button === 0 || isTouch)) {
+ if (storeIndex < 0) {
+ store.push(ev);
+ storeIndex = store.length - 1;
+ }
+ } else if (eventType & (INPUT_END | INPUT_CANCEL)) {
+ removePointer = true;
}
- },
- interaction: {
- dragNodes: true,
- dragView: true,
- zoomView: true,
- hoverEnabled: false,
- navigationButtons: false,
- tooltipDelay: [300, 0, 1000, 25],
- keyboard: {
- enabled: false,
- speed: { x: [10, 0, 40, 1], y: [10, 0, 40, 1], zoom: [0.02, 0, 0.1, 0.005] },
- bindToWindow: true
+
+ // it not found, so the pointer hasn't been down (so it's probably a hover)
+ if (storeIndex < 0) {
+ return;
}
- },
- manipulation: {
- enabled: false,
- initiallyActive: false,
- locale: ['en', 'nl'],
- functionality: {
- addNode: true,
- addEdge: true,
- editNode: true,
- editEdge: true,
- deleteNode: true,
- deleteEdge: true
+
+ // update the event in the store
+ store[storeIndex] = ev;
+
+ this.callback(this.manager, eventType, {
+ pointers: store,
+ changedPointers: [ev],
+ pointerType: pointerType,
+ srcEvent: ev
+ });
+
+ if (removePointer) {
+ // remove from the store
+ store.splice(storeIndex, 1);
}
- },
- physics: {
- barnesHut: {
- //theta: [0.5, 0.1, 1, 0.05],
- gravitationalConstant: [-2000, -30000, 0, 50],
- centralGravity: [0.3, 0, 10, 0.05],
- springLength: [95, 0, 500, 5],
- springConstant: [0.04, 0, 5, 0.005],
- damping: [0.09, 0, 1, 0.01]
- },
- repulsion: {
- centralGravity: [0.2, 0, 10, 0.05],
- springLength: [200, 0, 500, 5],
- springConstant: [0.05, 0, 5, 0.005],
- nodeDistance: [100, 0, 500, 5],
- damping: [0.09, 0, 1, 0.01]
- },
- hierarchicalRepulsion: {
- centralGravity: [0.2, 0, 10, 0.05],
- springLength: [100, 0, 500, 5],
- springConstant: [0.01, 0, 5, 0.005],
- nodeDistance: [120, 0, 500, 5],
- damping: [0.09, 0, 1, 0.01]
- },
- maxVelocity: [50, 0, 150, 1],
- minVelocity: [0.1, 0.01, 0.5, 0.01],
- solver: ['barnesHut', 'repulsion', 'hierarchicalRepulsion'],
- timestep: [0.5, 0, 1, 0.05]
- },
- selection: {
- select: true,
- selectConnectedEdges: true
- },
- rendering: {
- hideEdgesOnDrag: false,
- hideNodesOnDrag: false
- }
- };
+ }
+ });
- this.actualOptions = {
- nodes: {},
- edges: {},
- layout: {},
- interaction: {},
- manipulation: {},
- physics: {},
- selection: {},
- rendering: {},
- configure: false,
- configureContainer: undefined
- };
+ var SINGLE_TOUCH_INPUT_MAP = {
+ touchstart: INPUT_START,
+ touchmove: INPUT_MOVE,
+ touchend: INPUT_END,
+ touchcancel: INPUT_CANCEL
+ };
- this.domElements = [];
- this.colorPicker = new _ColorPicker2['default'](this.network.canvas.pixelRatio);
- this.wrapper;
- }
+ var SINGLE_TOUCH_TARGET_EVENTS = 'touchstart';
+ var SINGLE_TOUCH_WINDOW_EVENTS = 'touchstart touchmove touchend touchcancel';
- _createClass(ConfigurationSystem, [{
- key: 'setOptions',
+ /**
+ * Touch events input
+ * @constructor
+ * @extends Input
+ */
+ function SingleTouchInput() {
+ this.evTarget = SINGLE_TOUCH_TARGET_EVENTS;
+ this.evWin = SINGLE_TOUCH_WINDOW_EVENTS;
+ this.started = false;
- /**
- * refresh all options.
- * Because all modules parse their options by themselves, we just use their options. We copy them here.
- *
- * @param options
- */
- value: function setOptions(options) {
- if (options !== undefined) {
- util.extend(this.actualOptions, options);
- }
+ Input.apply(this, arguments);
+ }
- this._clean();
+ inherit(SingleTouchInput, Input, {
+ handler: function TEhandler(ev) {
+ var type = SINGLE_TOUCH_INPUT_MAP[ev.type];
- if (this.actualOptions.configure !== undefined && this.actualOptions.configure !== false) {
- util.deepExtend(this.actualOptions.nodes, this.network.nodesHandler.options, true);
- util.deepExtend(this.actualOptions.edges, this.network.edgesHandler.options, true);
- util.deepExtend(this.actualOptions.layout, this.network.layoutEngine.options, true);
- util.deepExtend(this.actualOptions.interaction, this.network.interactionHandler.options, true);
- util.deepExtend(this.actualOptions.manipulation, this.network.manipulation.options, true);
- util.deepExtend(this.actualOptions.physics, this.network.physics.options, true);
- util.deepExtend(this.actualOptions.selection, this.network.selectionHandler.selection, true);
- util.deepExtend(this.actualOptions.rendering, this.network.renderer.selection, true);
+ // should we handle the touch events?
+ if (type === INPUT_START) {
+ this.started = true;
+ }
- this.container = this.network.body.container;
- var config = true;
- if (typeof this.actualOptions.configure === 'string') {
- config = this.actualOptions.configure;
- } else if (this.actualOptions.configure instanceof Array) {
- config = this.actualOptions.configure.join();
- } else if (typeof this.actualOptions.configure === 'object') {
- if (this.actualOptions.configure.container !== undefined) {
- this.container = this.actualOptions.configure.container;
- }
- if (this.actualOptions.configure.filter !== undefined) {
- config = this.actualOptions.configure.filter;
- }
- } else if (typeof this.actualOptions.configure === 'boolean') {
- config = this.actualOptions.configure;
+ if (!this.started) {
+ return;
}
- if (config !== false) {
- this._create(config);
+ var touches = normalizeSingleTouches.call(this, ev, type);
+
+ // when done, reset the started state
+ if (type & (INPUT_END | INPUT_CANCEL) && touches[0].length - touches[1].length === 0) {
+ this.started = false;
}
- }
+
+ this.callback(this.manager, type, {
+ pointers: touches[0],
+ changedPointers: touches[1],
+ pointerType: INPUT_TYPE_TOUCH,
+ srcEvent: ev
+ });
}
- }, {
- key: '_create',
+ });
- /**
- * Create all DOM elements
- * @param {Boolean | String} config
- * @private
- */
- value: function _create(config) {
- var _this = this;
+ /**
+ * @this {TouchInput}
+ * @param {Object} ev
+ * @param {Number} type flag
+ * @returns {undefined|Array} [all, changed]
+ */
+ function normalizeSingleTouches(ev, type) {
+ var all = toArray(ev.touches);
+ var changed = toArray(ev.changedTouches);
- this._clean();
- this.changedOptions = [];
+ if (type & (INPUT_END | INPUT_CANCEL)) {
+ all = uniqueArray(all.concat(changed), 'identifier', true);
+ }
- var counter = 0;
- for (var option in this.possibleOptions) {
- if (this.possibleOptions.hasOwnProperty(option)) {
- if (config === true || config.indexOf(option) !== -1) {
- var optionObj = this.possibleOptions[option];
+ return [all, changed];
+ }
- // linebreak between categories
- if (counter > 0) {
- this._makeItem([]);
- }
- // a header for the category
- this._makeHeader(option);
+ var TOUCH_INPUT_MAP = {
+ touchstart: INPUT_START,
+ touchmove: INPUT_MOVE,
+ touchend: INPUT_END,
+ touchcancel: INPUT_CANCEL
+ };
- // get the suboptions
- var path = [option];
- this._handleObject(optionObj, path);
- }
- counter++;
- }
- }
- var generateButton = document.createElement('div');
- generateButton.className = 'vis-network-configuration button';
- generateButton.innerHTML = 'generate options';
- generateButton.onclick = function () {
- _this._printOptions();
- };
- generateButton.onmouseover = function () {
- generateButton.className = 'vis-network-configuration button hover';
- };
- generateButton.onmouseout = function () {
- generateButton.className = 'vis-network-configuration button';
- };
+ var TOUCH_TARGET_EVENTS = 'touchstart touchmove touchend touchcancel';
- this.optionsContainer = document.createElement('div');
- this.optionsContainer.className = 'vis-network-configuration vis-option-container';
+ /**
+ * Multi-user touch events input
+ * @constructor
+ * @extends Input
+ */
+ function TouchInput() {
+ this.evTarget = TOUCH_TARGET_EVENTS;
+ this.targetIds = {};
- this.domElements.push(this.optionsContainer);
- this.domElements.push(generateButton);
+ Input.apply(this, arguments);
+ }
- this._push();
- this.colorPicker.insertTo(this.container);
- }
- }, {
- key: '_push',
+ inherit(TouchInput, Input, {
+ handler: function MTEhandler(ev) {
+ var type = TOUCH_INPUT_MAP[ev.type];
+ var touches = getTouches.call(this, ev, type);
+ if (!touches) {
+ return;
+ }
- /**
- * draw all DOM elements on the screen
- * @private
- */
- value: function _push() {
- this.wrapper = document.createElement('div');
- this.wrapper.className = 'vis-network-configuration-wrapper';
- this.container.appendChild(this.wrapper);
- for (var i = 0; i < this.domElements.length; i++) {
- this.wrapper.appendChild(this.domElements[i]);
- }
+ this.callback(this.manager, type, {
+ pointers: touches[0],
+ changedPointers: touches[1],
+ pointerType: INPUT_TYPE_TOUCH,
+ srcEvent: ev
+ });
}
- }, {
- key: '_clean',
+ });
- /**
- * delete all DOM elements
- * @private
- */
- value: function _clean() {
- for (var i = 0; i < this.domElements.length; i++) {
- this.wrapper.removeChild(this.domElements[i]);
- }
+ /**
+ * @this {TouchInput}
+ * @param {Object} ev
+ * @param {Number} type flag
+ * @returns {undefined|Array} [all, changed]
+ */
+ function getTouches(ev, type) {
+ var allTouches = toArray(ev.touches);
+ var targetIds = this.targetIds;
- if (this.wrapper !== undefined) {
- this.container.removeChild(this.wrapper);
- this.wrapper = undefined;
- }
- this.domElements = [];
+ // when there is only one touch, the process can be simplified
+ if (type & (INPUT_START | INPUT_MOVE) && allTouches.length === 1) {
+ targetIds[allTouches[0].identifier] = true;
+ return [allTouches, allTouches];
}
- }, {
- key: '_getValue',
- /**
- * get the value from the actualOptions if it exists
- * @param {array} path | where to look for the actual option
- * @returns {*}
- * @private
- */
- value: function _getValue(path) {
- var base = this.actualOptions;
- for (var i = 0; i < path.length; i++) {
- if (base[path[i]] !== undefined) {
- base = base[path[i]];
- } else {
- base = undefined;
- break;
+ var i,
+ targetTouches,
+ changedTouches = toArray(ev.changedTouches),
+ changedTargetTouches = [],
+ target = this.target;
+
+ // get target touches from touches
+ targetTouches = allTouches.filter(function(touch) {
+ return hasParent(touch.target, target);
+ });
+
+ // collect touches
+ if (type === INPUT_START) {
+ i = 0;
+ while (i < targetTouches.length) {
+ targetIds[targetTouches[i].identifier] = true;
+ i++;
}
- }
- return base;
}
- }, {
- key: '_addToPath',
-
- /**
- * Copy the path and add a step. It needs to copy because the path will keep stacking otherwise.
- * @param path
- * @param newValue
- * @returns {Array}
- * @private
- */
- value: function _addToPath(path, newValue) {
- var newPath = [];
- for (var i = 0; i < path.length; i++) {
- newPath.push(path[i]);
- }
- newPath.push(newValue);
- return newPath;
- }
- }, {
- key: '_makeItem',
- /**
- * all option elements are wrapped in an item
- * @param path
- * @param domElements
- * @private
- */
- value: function _makeItem(path) {
- for (var _len = arguments.length, domElements = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- domElements[_key - 1] = arguments[_key];
- }
+ // filter changed touches to only contain touches that exist in the collected target ids
+ i = 0;
+ while (i < changedTouches.length) {
+ if (targetIds[changedTouches[i].identifier]) {
+ changedTargetTouches.push(changedTouches[i]);
+ }
- var item = document.createElement('div');
- item.className = 'vis-network-configuration item s' + path.length;
- domElements.forEach(function (element) {
- item.appendChild(element);
- });
- this.domElements.push(item);
+ // cleanup removed touches
+ if (type & (INPUT_END | INPUT_CANCEL)) {
+ delete targetIds[changedTouches[i].identifier];
+ }
+ i++;
}
- }, {
- key: '_makeHeader',
- /**
- * header for major subjects
- * @param name
- * @private
- */
- value: function _makeHeader(name) {
- var div = document.createElement('div');
- div.className = 'vis-network-configuration header';
- div.innerHTML = name;
- this._makeItem([], div);
+ if (!changedTargetTouches.length) {
+ return;
}
- }, {
- key: '_makeLabel',
- /**
- * make a label, if it is an object label, it gets different styling.
- * @param name
- * @param path
- * @param objectLabel
- * @returns {HTMLElement}
- * @private
- */
- value: function _makeLabel(name, path) {
- var objectLabel = arguments[2] === undefined ? false : arguments[2];
+ return [
+ // merge targetTouches with changedTargetTouches so it contains ALL touches, including 'end' and 'cancel'
+ uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true),
+ changedTargetTouches
+ ];
+ }
- var div = document.createElement('div');
- div.className = 'vis-network-configuration label s' + path.length;
- if (objectLabel === true) {
- div.innerHTML = '' + name + ':';
- } else {
- div.innerHTML = name + ':';
- }
- return div;
- }
- }, {
- key: '_makeDropdown',
+ /**
+ * Combined touch and mouse input
+ *
+ * Touch has a higher priority then mouse, and while touching no mouse events are allowed.
+ * This because touch devices also emit mouse events while doing a touch.
+ *
+ * @constructor
+ * @extends Input
+ */
+ function TouchMouseInput() {
+ Input.apply(this, arguments);
+
+ var handler = bindFn(this.handler, this);
+ this.touch = new TouchInput(this.manager, handler);
+ this.mouse = new MouseInput(this.manager, handler);
+ }
+ inherit(TouchMouseInput, Input, {
/**
- * make a dropdown list for multiple possible string optoins
- * @param arr
- * @param value
- * @param path
- * @private
+ * handle mouse and touch events
+ * @param {Hammer} manager
+ * @param {String} inputEvent
+ * @param {Object} inputData
*/
- value: function _makeDropdown(arr, value, path) {
- var select = document.createElement('select');
- select.className = 'vis-network-configuration select';
- var selectedValue = 0;
- if (value !== undefined) {
- if (arr.indexOf(value) !== -1) {
- selectedValue = arr.indexOf(value);
- }
- }
+ handler: function TMEhandler(manager, inputEvent, inputData) {
+ var isTouch = (inputData.pointerType == INPUT_TYPE_TOUCH),
+ isMouse = (inputData.pointerType == INPUT_TYPE_MOUSE);
- for (var i = 0; i < arr.length; i++) {
- var option = document.createElement('option');
- option.value = arr[i];
- if (i === selectedValue) {
- option.selected = 'selected';
+ // when we're in a touch event, so block all upcoming mouse events
+ // most mobile browser also emit mouseevents, right after touchstart
+ if (isTouch) {
+ this.mouse.allow = false;
+ } else if (isMouse && !this.mouse.allow) {
+ return;
}
- option.innerHTML = arr[i];
- select.appendChild(option);
- }
- var me = this;
- select.onchange = function () {
- me._update(this.value, path);
- };
+ // reset the allowMouse when we're done
+ if (inputEvent & (INPUT_END | INPUT_CANCEL)) {
+ this.mouse.allow = true;
+ }
- var label = this._makeLabel(path[path.length - 1], path);
- this._makeItem(path, label, select);
- }
- }, {
- key: '_makeRange',
+ this.callback(manager, inputEvent, inputData);
+ },
/**
- * make a range object for numeric options
- * @param arr
- * @param value
- * @param path
- * @private
+ * remove the event listeners
*/
- value: function _makeRange(arr, value, path) {
- var defaultValue = arr[0];
- var min = arr[1];
- var max = arr[2];
- var step = arr[3];
- var range = document.createElement('input');
- range.type = 'range';
- range.className = 'vis-network-configuration range';
- range.min = min;
- range.max = max;
- range.step = step;
-
- if (value !== undefined) {
- if (value * 0.1 < min) {
- range.min = value / 10;
- }
- if (value * 2 > max && max !== 1) {
- range.max = value * 2;
- }
- range.value = value;
- } else {
- range.value = defaultValue;
- }
+ destroy: function destroy() {
+ this.touch.destroy();
+ this.mouse.destroy();
+ }
+ });
- var input = document.createElement('input');
- input.className = 'vis-network-configuration rangeinput';
- input.value = range.value;
+ var PREFIXED_TOUCH_ACTION = prefixed(TEST_ELEMENT.style, 'touchAction');
+ var NATIVE_TOUCH_ACTION = PREFIXED_TOUCH_ACTION !== undefined;
- var me = this;
- range.onchange = function () {
- input.value = this.value;me._update(this.value, path);
- };
- range.oninput = function () {
- input.value = this.value;
- };
+ // magical touchAction value
+ var TOUCH_ACTION_COMPUTE = 'compute';
+ var TOUCH_ACTION_AUTO = 'auto';
+ var TOUCH_ACTION_MANIPULATION = 'manipulation'; // not implemented
+ var TOUCH_ACTION_NONE = 'none';
+ var TOUCH_ACTION_PAN_X = 'pan-x';
+ var TOUCH_ACTION_PAN_Y = 'pan-y';
- var label = this._makeLabel(path[path.length - 1], path);
- this._makeItem(path, label, range, input);
- }
- }, {
- key: '_makeCheckbox',
+ /**
+ * Touch Action
+ * sets the touchAction property or uses the js alternative
+ * @param {Manager} manager
+ * @param {String} value
+ * @constructor
+ */
+ function TouchAction(manager, value) {
+ this.manager = manager;
+ this.set(value);
+ }
+ TouchAction.prototype = {
/**
- * make a checkbox for boolean options.
- * @param defaultValue
- * @param value
- * @param path
- * @private
+ * set the touchAction value on the element or enable the polyfill
+ * @param {String} value
*/
- value: function _makeCheckbox(defaultValue, value, path) {
- var checkbox = document.createElement('input');
- checkbox.type = 'checkbox';
- checkbox.className = 'vis-network-configuration checkbox';
- checkbox.checked = defaultValue;
- if (value !== undefined) {
- checkbox.checked = value;
- if (value !== defaultValue) {
- if (typeof defaultValue === 'object') {
- if (value !== defaultValue.enabled) {
- this.changedOptions.push({ path: path, value: value });
- }
- } else {
- this.changedOptions.push({ path: path, value: value });
- }
+ set: function(value) {
+ // find out the touch-action by the event handlers
+ if (value == TOUCH_ACTION_COMPUTE) {
+ value = this.compute();
}
- }
-
- var me = this;
- checkbox.onchange = function () {
- me._update(this.checked, path);
- };
- var label = this._makeLabel(path[path.length - 1], path);
- this._makeItem(path, label, checkbox);
- }
- }, {
- key: '_makeColorField',
+ if (NATIVE_TOUCH_ACTION) {
+ this.manager.element.style[PREFIXED_TOUCH_ACTION] = value;
+ }
+ this.actions = value.toLowerCase().trim();
+ },
/**
- * make a color field with a color picker for color fields
- * @param arr
- * @param value
- * @param path
- * @private
+ * just re-set the touchAction value
*/
- value: function _makeColorField(arr, value, path) {
- var _this2 = this;
-
- var defaultColor = arr[1];
- var div = document.createElement('div');
- value = value === undefined ? defaultColor : value;
-
- if (value !== 'none') {
- div.className = 'vis-network-configuration colorBlock';
- div.style.backgroundColor = value;
- } else {
- div.className = 'vis-network-configuration colorBlock none';
- }
-
- value = value === undefined ? defaultColor : value;
- div.onclick = function () {
- _this2._showColorPicker(value, div, path);
- };
-
- var label = this._makeLabel(path[path.length - 1], path);
- this._makeItem(path, label, div);
- }
- }, {
- key: '_showColorPicker',
+ update: function() {
+ this.set(this.manager.options.touchAction);
+ },
/**
- * used by the color buttons to call the color picker.
- * @param event
- * @param value
- * @param div
- * @param path
- * @private
+ * compute the value for the touchAction property based on the recognizer's settings
+ * @returns {String} value
*/
- value: function _showColorPicker(value, div, path) {
- var _this3 = this;
-
- var rect = div.getBoundingClientRect();
- var bodyRect = document.body.getBoundingClientRect();
- var pickerX = rect.left + rect.width + 5;
- var pickerY = rect.top - bodyRect.top + rect.height * 0.5;
- this.colorPicker.show(pickerX, pickerY);
- this.colorPicker.setColor(value);
- this.colorPicker.setCallback(function (color) {
- var colorString = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';
- div.style.backgroundColor = colorString;
- _this3._update(colorString, path);
- });
- }
- }, {
- key: '_handleObject',
+ compute: function() {
+ var actions = [];
+ each(this.manager.recognizers, function(recognizer) {
+ if (boolOrFn(recognizer.options.enable, [recognizer])) {
+ actions = actions.concat(recognizer.getTouchAction());
+ }
+ });
+ return cleanTouchActions(actions.join(' '));
+ },
/**
- * parse an object and draw the correct items
- * @param obj
- * @param path
- * @private
+ * this method is called on each input cycle and provides the preventing of the browser behavior
+ * @param {Object} input
*/
- value: function _handleObject(obj) {
- var path = arguments[1] === undefined ? [] : arguments[1];
-
- for (var subObj in obj) {
- if (obj.hasOwnProperty(subObj)) {
- var item = obj[subObj];
- var newPath = util.copyAndExtendArray(path, subObj);
- var value = this._getValue(newPath);
+ preventDefaults: function(input) {
+ // not needed with native support for the touchAction property
+ if (NATIVE_TOUCH_ACTION) {
+ return;
+ }
- if (item instanceof Array) {
- this._handleArray(item, value, newPath);
- } else if (typeof item === 'string') {
- this._handleString(item, value, newPath);
- } else if (typeof item === 'boolean') {
- this._makeCheckbox(item, value, newPath);
- } else if (item instanceof Object) {
- // collapse the physics options that are not enabled
- var draw = true;
- if (path.indexOf('physics') !== -1) {
- if (this.actualOptions.physics.solver !== subObj) {
- draw = false;
- }
- }
+ var srcEvent = input.srcEvent;
+ var direction = input.offsetDirection;
- if (draw === true) {
- // initially collapse options with an disabled enabled option.
- if (item.enabled !== undefined) {
- var enabledPath = util.copyAndExtendArray(newPath, 'enabled');
- var enabledValue = this._getValue(enabledPath);
- if (enabledValue === true) {
- var label = this._makeLabel(subObj, newPath, true);
- this._makeItem(newPath, label);
- this._handleObject(item, newPath);
- } else {
- this._makeCheckbox(item, enabledValue, newPath);
- }
- } else {
- var label = this._makeLabel(subObj, newPath, true);
- this._makeItem(newPath, label);
- this._handleObject(item, newPath);
- }
- }
- } else {
- console.error('dont know how to handle', item, subObj, newPath);
- }
+ // if the touch action did prevented once this session
+ if (this.manager.session.prevented) {
+ srcEvent.preventDefault();
+ return;
}
- }
- }
- }, {
- key: '_handleArray',
- /**
- * handle the array type of option
- * @param optionName
- * @param arr
- * @param value
- * @param path
- * @private
- */
- value: function _handleArray(arr, value, path) {
- if (typeof arr[0] === 'string' && arr[0] === 'color') {
- this._makeColorField(arr, value, path);
- if (arr[1] !== value) {
- this.changedOptions.push({ path: path, value: value });
- }
- } else if (typeof arr[0] === 'string') {
- this._makeDropdown(arr, value, path);
- if (arr[0] !== value) {
- this.changedOptions.push({ path: path, value: value });
- }
- } else if (typeof arr[0] === 'number') {
- this._makeRange(arr, value, path);
- if (arr[0] !== value) {
- this.changedOptions.push({ path: path, value: value });
+ var actions = this.actions;
+ var hasNone = inStr(actions, TOUCH_ACTION_NONE);
+ var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y);
+ var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X);
+
+ if (hasNone ||
+ (hasPanY && direction & DIRECTION_HORIZONTAL) ||
+ (hasPanX && direction & DIRECTION_VERTICAL)) {
+ return this.preventSrc(srcEvent);
}
- }
- }
- }, {
- key: '_update',
+ },
/**
- * called to update the network with the new settings.
- * @param value
- * @param path
- * @private
+ * call preventDefault to prevent the browser's default behavior (scrolling in most cases)
+ * @param {Object} srcEvent
*/
- value: function _update(value, path) {
- var options = this._constructOptions(value, path);
- this.network.setOptions(options);
+ preventSrc: function(srcEvent) {
+ this.manager.session.prevented = true;
+ srcEvent.preventDefault();
}
- }, {
- key: '_constructOptions',
- value: function _constructOptions(value, path) {
- var optionsObj = arguments[2] === undefined ? {} : arguments[2];
+ };
- var pointer = optionsObj;
+ /**
+ * when the touchActions are collected they are not a valid value, so we need to clean things up. *
+ * @param {String} actions
+ * @returns {*}
+ */
+ function cleanTouchActions(actions) {
+ // none
+ if (inStr(actions, TOUCH_ACTION_NONE)) {
+ return TOUCH_ACTION_NONE;
+ }
- // when dropdown boxes can be string or boolean, we typecast it into correct types
- value = value === 'true' ? true : value;
- value = value === 'false' ? false : value;
+ var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X);
+ var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y);
- for (var i = 0; i < path.length; i++) {
- if (pointer[path[i]] === undefined) {
- pointer[path[i]] = {};
- }
- if (i !== path.length - 1) {
- pointer = pointer[path[i]];
- } else {
- pointer[path[i]] = value;
- }
- }
- return optionsObj;
- }
- }, {
- key: '_printOptions',
- value: function _printOptions() {
- var options = {};
- for (var i = 0; i < this.changedOptions.length; i++) {
- this._constructOptions(this.changedOptions[i].value, this.changedOptions[i].path, options);
- }
- this.optionsContainer.innerHTML = 'var options = ' + JSON.stringify(options, null, 2) + '
';
+ // pan-x and pan-y can be combined
+ if (hasPanX && hasPanY) {
+ return TOUCH_ACTION_PAN_X + ' ' + TOUCH_ACTION_PAN_Y;
}
- }]);
- return ConfigurationSystem;
- })();
+ // pan-x OR pan-y
+ if (hasPanX || hasPanY) {
+ return hasPanX ? TOUCH_ACTION_PAN_X : TOUCH_ACTION_PAN_Y;
+ }
- exports['default'] = ConfigurationSystem;
- module.exports = exports['default'];
+ // manipulation
+ if (inStr(actions, TOUCH_ACTION_MANIPULATION)) {
+ return TOUCH_ACTION_MANIPULATION;
+ }
-/***/ },
-/* 70 */
-/***/ function(module, exports, __webpack_require__) {
+ return TOUCH_ACTION_AUTO;
+ }
- 'use strict';
-
- var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
-
- var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
- var util = __webpack_require__(1);
+ /**
+ * Recognizer flow explained; *
+ * All recognizers have the initial state of POSSIBLE when a input session starts.
+ * The definition of a input session is from the first input until the last input, with all it's movement in it. *
+ * Example session for mouse-input: mousedown -> mousemove -> mouseup
+ *
+ * On each recognizing cycle (see Manager.recognize) the .recognize() method is executed
+ * which determines with state it should be.
+ *
+ * If the recognizer has the state FAILED, CANCELLED or RECOGNIZED (equals ENDED), it is reset to
+ * POSSIBLE to give it another change on the next cycle.
+ *
+ * Possible
+ * |
+ * +-----+---------------+
+ * | |
+ * +-----+-----+ |
+ * | | |
+ * Failed Cancelled |
+ * +-------+------+
+ * | |
+ * Recognized Began
+ * |
+ * Changed
+ * |
+ * Ended/Recognized
+ */
+ var STATE_POSSIBLE = 1;
+ var STATE_BEGAN = 2;
+ var STATE_CHANGED = 4;
+ var STATE_ENDED = 8;
+ var STATE_RECOGNIZED = STATE_ENDED;
+ var STATE_CANCELLED = 16;
+ var STATE_FAILED = 32;
- var errorFound = false;
- var printStyle = 'background: #FFeeee; color: #dd0000';
/**
- * Used to validate options.
+ * Recognizer
+ * Every recognizer needs to extend from this class.
+ * @constructor
+ * @param {Object} options
*/
+ function Recognizer(options) {
+ this.id = uniqueId();
- var Validator = (function () {
- function Validator() {
- _classCallCheck(this, Validator);
- }
+ this.manager = null;
+ this.options = merge(options || {}, this.defaults);
- _createClass(Validator, null, [{
- key: 'validate',
+ // default is enable true
+ this.options.enable = ifUndefined(this.options.enable, true);
+
+ this.state = STATE_POSSIBLE;
+ this.simultaneous = {};
+ this.requireFail = [];
+ }
+
+ Recognizer.prototype = {
/**
- * Main function to be called
- * @param options
- * @param subObject
- * @returns {boolean}
+ * @virtual
+ * @type {Object}
*/
- value: function validate(options, referenceOptions, subObject) {
- errorFound = false;
- var usedOptions = referenceOptions;
- if (subObject !== undefined) {
- usedOptions = referenceOptions[subObject];
- }
- Validator.parse(options, usedOptions, []);
- return errorFound;
- }
- }, {
- key: 'parse',
+ defaults: {},
/**
- * Will traverse an object recursively and check every value
- * @param options
- * @param referenceOptions
- * @param path
+ * set options
+ * @param {Object} options
+ * @return {Recognizer}
*/
- value: function parse(options, referenceOptions, path) {
- for (var option in options) {
- if (options.hasOwnProperty(option)) {
- Validator.check(option, options, referenceOptions, path);
- }
- }
- }
- }, {
- key: 'check',
+ set: function(options) {
+ extend(this.options, options);
+
+ // also update the touchAction, in case something changed about the directions/enabled state
+ this.manager && this.manager.touchAction.update();
+ return this;
+ },
/**
- * Check every value. If the value is an object, call the parse function on that object.
- * @param option
- * @param options
- * @param referenceOptions
- * @param path
+ * recognize simultaneous with an other recognizer.
+ * @param {Recognizer} otherRecognizer
+ * @returns {Recognizer} this
*/
- value: function check(option, options, referenceOptions, path) {
- if (referenceOptions[option] === undefined && referenceOptions.__any__ === undefined) {
- Validator.getSuggestion(option, referenceOptions, path);
- } else if (referenceOptions[option] === undefined && referenceOptions.__any__ !== undefined) {
- // __any__ is a wildcard. Any value is accepted and will be further analysed by reference.
- if (Validator.getType(options[option]) === 'object') {
- util.copyAndExtendArray(path, option);
- Validator.checkFields(option, options, referenceOptions, '__any__', referenceOptions.__any__.__type__, path);
+ recognizeWith: function(otherRecognizer) {
+ if (invokeArrayArg(otherRecognizer, 'recognizeWith', this)) {
+ return this;
}
- } else {
- // Since all options in the reference are objects, we can check whether they are supposed to be object to look for the __type__ field.
- if (referenceOptions[option].__type__ !== undefined) {
- util.copyAndExtendArray(path, option);
- // if this should be an object, we check if the correct type has been supplied to account for shorthand options.
- Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option].__type__, path);
- } else {
- Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option], path);
+
+ var simultaneous = this.simultaneous;
+ otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
+ if (!simultaneous[otherRecognizer.id]) {
+ simultaneous[otherRecognizer.id] = otherRecognizer;
+ otherRecognizer.recognizeWith(this);
}
- }
- }
- }, {
- key: 'checkFields',
+ return this;
+ },
/**
- *
- * @param {String} option | the option property
- * @param {Object} options | The supplied options object
- * @param {Object} referenceOptions | The reference options containing all options and their allowed formats
- * @param {String} referenceOption | Usually this is the same as option, except when handling an __any__ tag.
- * @param {String} refOptionType | This is the type object from the reference options
- * @param {Array} path | where in the object is the option
+ * drop the simultaneous link. it doesnt remove the link on the other recognizer.
+ * @param {Recognizer} otherRecognizer
+ * @returns {Recognizer} this
*/
- value: function checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path) {
- var optionType = Validator.getType(options[option]);
- var refOptionType = refOptionObj[optionType];
- if (refOptionType !== undefined) {
- // if the type is correct, we check if it is supposed to be one of a few select values
- if (Validator.getType(refOptionType) === 'array') {
- if (refOptionType.indexOf(options[option]) === -1) {
- console.log('%cInvalid option detected in "' + option + '".' + ' Allowed values are:' + Validator.print(refOptionType) + ' not "' + options[option] + '". ' + Validator.printLocation(path, option), printStyle);
- errorFound = true;
- } else if (optionType === 'object') {
- Validator.parse(options[option], referenceOptions[referenceOption], path);
- }
- } else if (optionType === 'object') {
- Validator.parse(options[option], referenceOptions[referenceOption], path);
- }
- } else {
- if (refOptionObj.undef !== undefined && optionType === 'undefined') {} else if (refOptionObj.fn !== undefined && optionType === 'function') {} else {
- // type of the field is incorrect
- console.log('%cInvalid type received for "' + option + '". Expected: ' + Validator.print(Object.keys(refOptionObj)) + '. Received [' + optionType + '] "' + options[option] + '"' + Validator.printLocation(path, option), printStyle);
- errorFound = true;
+ dropRecognizeWith: function(otherRecognizer) {
+ if (invokeArrayArg(otherRecognizer, 'dropRecognizeWith', this)) {
+ return this;
}
- }
- }
- }, {
- key: 'getType',
- value: function getType(object) {
- var type = typeof object;
- if (type === 'object') {
- if (object === null) {
- return 'null';
- }
- if (object instanceof Boolean) {
- return 'boolean';
- }
- if (object instanceof Number) {
- return 'number';
+ otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
+ delete this.simultaneous[otherRecognizer.id];
+ return this;
+ },
+
+ /**
+ * recognizer can only run when an other is failing
+ * @param {Recognizer} otherRecognizer
+ * @returns {Recognizer} this
+ */
+ requireFailure: function(otherRecognizer) {
+ if (invokeArrayArg(otherRecognizer, 'requireFailure', this)) {
+ return this;
}
- if (object instanceof String) {
- return 'string';
+
+ var requireFail = this.requireFail;
+ otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
+ if (inArray(requireFail, otherRecognizer) === -1) {
+ requireFail.push(otherRecognizer);
+ otherRecognizer.requireFailure(this);
}
- if (Array.isArray(object)) {
- return 'array';
+ return this;
+ },
+
+ /**
+ * drop the requireFailure link. it does not remove the link on the other recognizer.
+ * @param {Recognizer} otherRecognizer
+ * @returns {Recognizer} this
+ */
+ dropRequireFailure: function(otherRecognizer) {
+ if (invokeArrayArg(otherRecognizer, 'dropRequireFailure', this)) {
+ return this;
}
- if (object instanceof Date) {
- return 'date';
+
+ otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
+ var index = inArray(this.requireFail, otherRecognizer);
+ if (index > -1) {
+ this.requireFail.splice(index, 1);
}
- if (object.nodeType !== undefined) {
- return 'dom';
+ return this;
+ },
+
+ /**
+ * has require failures boolean
+ * @returns {boolean}
+ */
+ hasRequireFailures: function() {
+ return this.requireFail.length > 0;
+ },
+
+ /**
+ * if the recognizer can recognize simultaneous with an other recognizer
+ * @param {Recognizer} otherRecognizer
+ * @returns {Boolean}
+ */
+ canRecognizeWith: function(otherRecognizer) {
+ return !!this.simultaneous[otherRecognizer.id];
+ },
+
+ /**
+ * You should use `tryEmit` instead of `emit` directly to check
+ * that all the needed recognizers has failed before emitting.
+ * @param {Object} input
+ */
+ emit: function(input) {
+ var self = this;
+ var state = this.state;
+
+ function emit(withState) {
+ self.manager.emit(self.options.event + (withState ? stateStr(state) : ''), input);
}
- return 'object';
- } else if (type === 'number') {
- return 'number';
- } else if (type === 'boolean') {
- return 'boolean';
- } else if (type === 'string') {
- return 'string';
- } else if (type === undefined) {
- return 'undefined';
- }
- return type;
- }
- }, {
- key: 'getSuggestion',
- value: function getSuggestion(option, options, path) {
- var closestMatch = '';
- var min = 1000000000;
- var threshold = 10;
- for (var op in options) {
- var distance = Validator.levenshteinDistance(option, op);
- if (min > distance && distance < threshold) {
- closestMatch = op;
- min = distance;
+
+ // 'panstart' and 'panmove'
+ if (state < STATE_ENDED) {
+ emit(true);
}
- }
- if (min < threshold) {
- console.log('%cUnknown option detected: "' + option + '". Did you mean "' + closestMatch + '"?' + Validator.printLocation(path, option), printStyle);
- } else {
- console.log('%cUnknown option detected: "' + option + '". Did you mean one of these: ' + Validator.print(Object.keys(options)) + Validator.printLocation(path, option), printStyle);
- }
+ emit(); // simple 'eventName' events
- errorFound = true;
- return closestMatch;
- }
- }, {
- key: 'printLocation',
- value: function printLocation(path, option) {
- var str = '\n\nProblem value found at: \noptions = {\n';
- for (var i = 0; i < path.length; i++) {
- for (var j = 0; j < i + 1; j++) {
- str += ' ';
- }
- str += path[i] + ': {\n';
- }
- for (var j = 0; j < path.length + 1; j++) {
- str += ' ';
- }
- str += option + '\n';
- for (var i = 0; i < path.length + 1; i++) {
- for (var j = 0; j < path.length - i; j++) {
- str += ' ';
+ // panend and pancancel
+ if (state >= STATE_ENDED) {
+ emit(true);
}
- str += '}\n';
- }
- return str + '\n\n';
- }
- }, {
- key: 'print',
- value: function print(options) {
- return JSON.stringify(options).replace(/(\")|(\[)|(\])|(,"__type__")/g, '').replace(/(\,)/g, ', ');
- }
- }, {
- key: 'levenshteinDistance',
+ },
- // Compute the edit distance between the two given strings
- // http://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Levenshtein_distance#JavaScript
- /*
- Copyright (c) 2011 Andrei Mackenzie
- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ /**
+ * Check that all the require failure recognizers has failed,
+ * if true, it emits a gesture event,
+ * otherwise, setup the state to FAILED.
+ * @param {Object} input
*/
- value: function levenshteinDistance(a, b) {
- if (a.length === 0) {
- return b.length;
- }if (b.length === 0) {
- return a.length;
- }var matrix = [];
+ tryEmit: function(input) {
+ if (this.canEmit()) {
+ return this.emit(input);
+ }
+ // it's failing anyway
+ this.state = STATE_FAILED;
+ },
- // increment along the first column of each row
- var i;
- for (i = 0; i <= b.length; i++) {
- matrix[i] = [i];
- }
+ /**
+ * can we emit?
+ * @returns {boolean}
+ */
+ canEmit: function() {
+ var i = 0;
+ while (i < this.requireFail.length) {
+ if (!(this.requireFail[i].state & (STATE_FAILED | STATE_POSSIBLE))) {
+ return false;
+ }
+ i++;
+ }
+ return true;
+ },
- // increment each column in the first row
- var j;
- for (j = 0; j <= a.length; j++) {
- matrix[0][j] = j;
- }
+ /**
+ * update the recognizer
+ * @param {Object} inputData
+ */
+ recognize: function(inputData) {
+ // make a new copy of the inputData
+ // so we can change the inputData without messing up the other recognizers
+ var inputDataClone = extend({}, inputData);
- // Fill in the rest of the matrix
- for (i = 1; i <= b.length; i++) {
- for (j = 1; j <= a.length; j++) {
- if (b.charAt(i - 1) == a.charAt(j - 1)) {
- matrix[i][j] = matrix[i - 1][j - 1];
- } else {
- matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, // substitution
- Math.min(matrix[i][j - 1] + 1, // insertion
- matrix[i - 1][j] + 1)); // deletion
- }
+ // is is enabled and allow recognizing?
+ if (!boolOrFn(this.options.enable, [this, inputDataClone])) {
+ this.reset();
+ this.state = STATE_FAILED;
+ return;
}
- }
- return matrix[b.length][a.length];
- }
- }]);
+ // reset when we've reached the end
+ if (this.state & (STATE_RECOGNIZED | STATE_CANCELLED | STATE_FAILED)) {
+ this.state = STATE_POSSIBLE;
+ }
- return Validator;
- })();
+ this.state = this.process(inputDataClone);
- exports['default'] = Validator;
- exports.printStyle = printStyle;
+ // the recognizer has recognized a gesture
+ // so trigger an event
+ if (this.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED | STATE_CANCELLED)) {
+ this.tryEmit(inputDataClone);
+ }
+ },
- // item is undefined, which is allowed
+ /**
+ * return the state of the recognizer
+ * the actual recognizing happens in this method
+ * @virtual
+ * @param {Object} inputData
+ * @returns {Const} STATE
+ */
+ process: function(inputData) { }, // jshint ignore:line
- // item is a function, which is allowed
+ /**
+ * return the preferred touch-action
+ * @virtual
+ * @returns {Array}
+ */
+ getTouchAction: function() { },
-/***/ },
-/* 71 */
-/***/ function(module, exports, __webpack_require__) {
+ /**
+ * called when the gesture isn't allowed to recognize
+ * like when another is being recognized or it is disabled
+ * @virtual
+ */
+ reset: function() { }
+ };
- 'use strict';
+ /**
+ * get a usable string, used as event postfix
+ * @param {Const} state
+ * @returns {String} state
+ */
+ function stateStr(state) {
+ if (state & STATE_CANCELLED) {
+ return 'cancel';
+ } else if (state & STATE_ENDED) {
+ return 'end';
+ } else if (state & STATE_CHANGED) {
+ return 'move';
+ } else if (state & STATE_BEGAN) {
+ return 'start';
+ }
+ return '';
+ }
- Object.defineProperty(exports, '__esModule', {
- value: true
- });
/**
- * This object contains all possible options. It will check if the types are correct, if required if the option is one
- * of the allowed values.
- *
- * __any__ means that the name of the property does not matter.
- * __type__ is a required field for all objects and contains the allowed types of all objects
+ * direction cons to string
+ * @param {Const} direction
+ * @returns {String}
*/
- var string = 'string';
- var boolean = 'boolean';
- var number = 'number';
- var array = 'array';
- var object = 'object';
- var dom = 'dom';
- var fn = 'function';
- var undef = 'undefined';
+ function directionStr(direction) {
+ if (direction == DIRECTION_DOWN) {
+ return 'down';
+ } else if (direction == DIRECTION_UP) {
+ return 'up';
+ } else if (direction == DIRECTION_LEFT) {
+ return 'left';
+ } else if (direction == DIRECTION_RIGHT) {
+ return 'right';
+ }
+ return '';
+ }
- var allOptions = {
- canvas: {
- width: { string: string },
- height: { string: string },
- __type__: { object: object }
- },
- rendering: {
- hideEdgesOnDrag: { boolean: boolean },
- hideNodesOnDrag: { boolean: boolean },
- __type__: { object: object }
- },
- clustering: {},
- configure: {
- filter: { boolean: boolean, string: ['nodes', 'edges', 'layout', 'physics', 'manipulation', 'interaction', 'selection', 'rendering'], array: array },
- container: { dom: dom },
- __type__: { object: object, string: string, array: array, boolean: boolean }
- },
- edges: {
- arrows: {
- to: { enabled: { boolean: boolean }, scaleFactor: { number: number }, __type__: { object: object } },
- middle: { enabled: { boolean: boolean }, scaleFactor: { number: number }, __type__: { object: object } },
- from: { enabled: { boolean: boolean }, scaleFactor: { number: number }, __type__: { object: object } },
- __type__: { string: ['from', 'to', 'middle'], object: object }
+ /**
+ * get a recognizer by name if it is bound to a manager
+ * @param {Recognizer|String} otherRecognizer
+ * @param {Recognizer} recognizer
+ * @returns {Recognizer}
+ */
+ function getRecognizerByNameIfManager(otherRecognizer, recognizer) {
+ var manager = recognizer.manager;
+ if (manager) {
+ return manager.get(otherRecognizer);
+ }
+ return otherRecognizer;
+ }
+
+ /**
+ * This recognizer is just used as a base for the simple attribute recognizers.
+ * @constructor
+ * @extends Recognizer
+ */
+ function AttrRecognizer() {
+ Recognizer.apply(this, arguments);
+ }
+
+ inherit(AttrRecognizer, Recognizer, {
+ /**
+ * @namespace
+ * @memberof AttrRecognizer
+ */
+ defaults: {
+ /**
+ * @type {Number}
+ * @default 1
+ */
+ pointers: 1
},
- color: {
- color: { string: string },
- highlight: { string: string },
- hover: { string: string },
- inherit: { string: ['from', 'to', 'both'], boolean: boolean },
- opacity: { number: number },
- __type__: { object: object }
+
+ /**
+ * Used to check if it the recognizer receives valid input, like input.distance > 10.
+ * @memberof AttrRecognizer
+ * @param {Object} input
+ * @returns {Boolean} recognized
+ */
+ attrTest: function(input) {
+ var optionPointers = this.options.pointers;
+ return optionPointers === 0 || input.pointers.length === optionPointers;
},
- dashes: {
- enabled: { boolean: boolean },
- pattern: { array: array },
- __type__: { boolean: boolean, object: object }
+
+ /**
+ * Process the input and return the state for the recognizer
+ * @memberof AttrRecognizer
+ * @param {Object} input
+ * @returns {*} State
+ */
+ process: function(input) {
+ var state = this.state;
+ var eventType = input.eventType;
+
+ var isRecognized = state & (STATE_BEGAN | STATE_CHANGED);
+ var isValid = this.attrTest(input);
+
+ // on cancel input and we've recognized before, return STATE_CANCELLED
+ if (isRecognized && (eventType & INPUT_CANCEL || !isValid)) {
+ return state | STATE_CANCELLED;
+ } else if (isRecognized || isValid) {
+ if (eventType & INPUT_END) {
+ return state | STATE_ENDED;
+ } else if (!(state & STATE_BEGAN)) {
+ return STATE_BEGAN;
+ }
+ return state | STATE_CHANGED;
+ }
+ return STATE_FAILED;
+ }
+ });
+
+ /**
+ * Pan
+ * Recognized when the pointer is down and moved in the allowed direction.
+ * @constructor
+ * @extends AttrRecognizer
+ */
+ function PanRecognizer() {
+ AttrRecognizer.apply(this, arguments);
+
+ this.pX = null;
+ this.pY = null;
+ }
+
+ inherit(PanRecognizer, AttrRecognizer, {
+ /**
+ * @namespace
+ * @memberof PanRecognizer
+ */
+ defaults: {
+ event: 'pan',
+ threshold: 10,
+ pointers: 1,
+ direction: DIRECTION_ALL
},
- font: {
- color: { string: string },
- size: { number: number }, // px
- face: { string: string },
- background: { string: string },
- stroke: { number: number }, // px
- strokeColor: { string: string },
- align: { string: ['horizontal', 'top', 'middle', 'bottom'] },
- __type__: { object: object, string: string }
+
+ getTouchAction: function() {
+ var direction = this.options.direction;
+ var actions = [];
+ if (direction & DIRECTION_HORIZONTAL) {
+ actions.push(TOUCH_ACTION_PAN_Y);
+ }
+ if (direction & DIRECTION_VERTICAL) {
+ actions.push(TOUCH_ACTION_PAN_X);
+ }
+ return actions;
},
- hidden: { boolean: boolean },
- hoverWidth: { fn: fn, number: number },
- label: { string: string, undef: undef },
- length: { number: number, undef: undef },
- physics: { boolean: boolean },
- scaling: {
- min: { number: number },
- max: { number: number },
- label: {
- enabled: { boolean: boolean },
- min: { number: number },
- max: { number: number },
- maxVisible: { number: number },
- drawThreshold: { number: number },
- __type__: { object: object, boolean: boolean }
- },
- customScalingFunction: { fn: fn },
- __type__: { object: object }
+
+ directionTest: function(input) {
+ var options = this.options;
+ var hasMoved = true;
+ var distance = input.distance;
+ var direction = input.direction;
+ var x = input.deltaX;
+ var y = input.deltaY;
+
+ // lock to axis?
+ if (!(direction & options.direction)) {
+ if (options.direction & DIRECTION_HORIZONTAL) {
+ direction = (x === 0) ? DIRECTION_NONE : (x < 0) ? DIRECTION_LEFT : DIRECTION_RIGHT;
+ hasMoved = x != this.pX;
+ distance = Math.abs(input.deltaX);
+ } else {
+ direction = (y === 0) ? DIRECTION_NONE : (y < 0) ? DIRECTION_UP : DIRECTION_DOWN;
+ hasMoved = y != this.pY;
+ distance = Math.abs(input.deltaY);
+ }
+ }
+ input.direction = direction;
+ return hasMoved && distance > options.threshold && direction & options.direction;
},
- selectionWidth: { fn: fn, number: number },
- selfReferenceSize: { number: number },
- shadow: {
- enabled: { boolean: boolean },
- size: { number: number },
- x: { number: number },
- y: { number: number },
- __type__: { object: object, boolean: boolean }
+
+ attrTest: function(input) {
+ return AttrRecognizer.prototype.attrTest.call(this, input) &&
+ (this.state & STATE_BEGAN || (!(this.state & STATE_BEGAN) && this.directionTest(input)));
},
- smooth: {
- enabled: { boolean: boolean },
- dynamic: { boolean: boolean },
- type: { string: string },
- roundness: { number: number },
- __type__: { object: object, boolean: boolean }
+
+ emit: function(input) {
+ this.pX = input.deltaX;
+ this.pY = input.deltaY;
+
+ var direction = directionStr(input.direction);
+ if (direction) {
+ this.manager.emit(this.options.event + direction, input);
+ }
+
+ this._super.emit.call(this, input);
+ }
+ });
+
+ /**
+ * Pinch
+ * Recognized when two or more pointers are moving toward (zoom-in) or away from each other (zoom-out).
+ * @constructor
+ * @extends AttrRecognizer
+ */
+ function PinchRecognizer() {
+ AttrRecognizer.apply(this, arguments);
+ }
+
+ inherit(PinchRecognizer, AttrRecognizer, {
+ /**
+ * @namespace
+ * @memberof PinchRecognizer
+ */
+ defaults: {
+ event: 'pinch',
+ threshold: 0,
+ pointers: 2
},
- title: { string: string, undef: undef },
- width: { number: number },
- value: { number: number, undef: undef },
- __type__: { object: object }
- },
- groups: {
- useDefaultGroups: { boolean: boolean },
- __any__: ['__ref__', 'nodes'],
- __type__: { object: object }
- },
- interaction: {
- dragNodes: { boolean: boolean },
- dragView: { boolean: boolean },
- zoomView: { boolean: boolean },
- hoverEnabled: { boolean: boolean },
- navigationButtons: { boolean: boolean },
- tooltipDelay: { number: number },
- keyboard: {
- enabled: { boolean: boolean },
- speed: { x: { number: number }, y: { number: number }, zoom: { number: number }, __type__: { object: object } },
- bindToWindow: { boolean: boolean },
- __type__: { object: object, boolean: boolean }
+
+ getTouchAction: function() {
+ return [TOUCH_ACTION_NONE];
},
- __type__: { object: object }
- },
- layout: {
- randomSeed: { undef: undef, number: number },
- hierarchical: {
- enabled: { boolean: boolean },
- levelSeparation: { number: number },
- direction: { string: ['UD', 'DU', 'LR', 'RL'] }, // UD, DU, LR, RL
- sortMethod: { string: ['hubsize', 'directed'] }, // hubsize, directed
- __type__: { object: object, boolean: boolean }
+
+ attrTest: function(input) {
+ return this._super.attrTest.call(this, input) &&
+ (Math.abs(input.scale - 1) > this.options.threshold || this.state & STATE_BEGAN);
},
- __type__: { object: object }
- },
- manipulation: {
- enabled: { boolean: boolean },
- initiallyActive: { boolean: boolean },
- locale: { string: string },
- locales: { object: object },
- functionality: {
- addNode: { boolean: boolean },
- addEdge: { boolean: boolean },
- editNode: { boolean: boolean },
- editEdge: { boolean: boolean },
- deleteNode: { boolean: boolean },
- deleteEdge: { boolean: boolean },
- __type__: { object: object }
+
+ emit: function(input) {
+ this._super.emit.call(this, input);
+ if (input.scale !== 1) {
+ var inOut = input.scale < 1 ? 'in' : 'out';
+ this.manager.emit(this.options.event + inOut, input);
+ }
+ }
+ });
+
+ /**
+ * Press
+ * Recognized when the pointer is down for x ms without any movement.
+ * @constructor
+ * @extends Recognizer
+ */
+ function PressRecognizer() {
+ Recognizer.apply(this, arguments);
+
+ this._timer = null;
+ this._input = null;
+ }
+
+ inherit(PressRecognizer, Recognizer, {
+ /**
+ * @namespace
+ * @memberof PressRecognizer
+ */
+ defaults: {
+ event: 'press',
+ pointers: 1,
+ time: 500, // minimal time of the pointer to be pressed
+ threshold: 5 // a minimal movement is ok, but keep it low
},
- handlerFunctions: {
- addNode: { fn: fn, undef: undef },
- addEdge: { fn: fn, undef: undef },
- editNode: { fn: fn, undef: undef },
- editEdge: { fn: fn, undef: undef },
- deleteNode: { fn: fn, undef: undef },
- deleteEdge: { fn: fn, undef: undef },
- __type__: { object: object }
+
+ getTouchAction: function() {
+ return [TOUCH_ACTION_AUTO];
},
- controlNodeStyle: ['__ref__', 'nodes'],
- __type__: { object: object, boolean: boolean }
- },
- nodes: {
- borderWidth: { number: number },
- borderWidthSelected: { number: number, undef: undef },
- brokenImage: { string: string, undef: undef },
- color: {
- border: { string: string },
- background: { string: string },
- highlight: {
- border: { string: string },
- background: { string: string },
- __type__: { object: object, string: string }
- },
- hover: {
- border: { string: string },
- background: { string: string },
- __type__: { object: object, string: string }
- },
- __type__: { object: object, string: string }
+
+ process: function(input) {
+ var options = this.options;
+ var validPointers = input.pointers.length === options.pointers;
+ var validMovement = input.distance < options.threshold;
+ var validTime = input.deltaTime > options.time;
+
+ this._input = input;
+
+ // we only allow little movement
+ // and we've reached an end event, so a tap is possible
+ if (!validMovement || !validPointers || (input.eventType & (INPUT_END | INPUT_CANCEL) && !validTime)) {
+ this.reset();
+ } else if (input.eventType & INPUT_START) {
+ this.reset();
+ this._timer = setTimeoutContext(function() {
+ this.state = STATE_RECOGNIZED;
+ this.tryEmit();
+ }, options.time, this);
+ } else if (input.eventType & INPUT_END) {
+ return STATE_RECOGNIZED;
+ }
+ return STATE_FAILED;
},
- fixed: {
- x: { boolean: boolean },
- y: { boolean: boolean },
- __type__: { object: object, boolean: boolean }
+
+ reset: function() {
+ clearTimeout(this._timer);
},
- font: {
- color: { string: string },
- size: { number: number }, // px
- face: { string: string },
- background: { string: string },
- stroke: { number: number }, // px
- strokeColor: { string: string },
- __type__: { object: object, string: string }
+
+ emit: function(input) {
+ if (this.state !== STATE_RECOGNIZED) {
+ return;
+ }
+
+ if (input && (input.eventType & INPUT_END)) {
+ this.manager.emit(this.options.event + 'up', input);
+ } else {
+ this._input.timeStamp = now();
+ this.manager.emit(this.options.event, this._input);
+ }
+ }
+ });
+
+ /**
+ * Rotate
+ * Recognized when two or more pointer are moving in a circular motion.
+ * @constructor
+ * @extends AttrRecognizer
+ */
+ function RotateRecognizer() {
+ AttrRecognizer.apply(this, arguments);
+ }
+
+ inherit(RotateRecognizer, AttrRecognizer, {
+ /**
+ * @namespace
+ * @memberof RotateRecognizer
+ */
+ defaults: {
+ event: 'rotate',
+ threshold: 0,
+ pointers: 2
},
- group: { string: string, number: number, undef: undef },
- hidden: { boolean: boolean },
- icon: {
- face: { string: string },
- code: { string: string }, //'\uf007',
- size: { number: number }, //50,
- color: { string: string },
- __type__: { object: object }
+
+ getTouchAction: function() {
+ return [TOUCH_ACTION_NONE];
},
- id: { string: string, number: number },
- image: { string: string, undef: undef }, // --> URL
- label: { string: string, undef: undef },
- level: { number: number, undef: undef },
- mass: { number: number },
- physics: { boolean: boolean },
- scaling: {
- min: { number: number },
- max: { number: number },
- label: {
- enabled: { boolean: boolean },
- min: { number: number },
- max: { number: number },
- maxVisible: { number: number },
- drawThreshold: { number: number },
- __type__: { object: object, boolean: boolean }
- },
- customScalingFunction: { fn: fn },
- __type__: { object: object }
+
+ attrTest: function(input) {
+ return this._super.attrTest.call(this, input) &&
+ (Math.abs(input.rotation) > this.options.threshold || this.state & STATE_BEGAN);
+ }
+ });
+
+ /**
+ * Swipe
+ * Recognized when the pointer is moving fast (velocity), with enough distance in the allowed direction.
+ * @constructor
+ * @extends AttrRecognizer
+ */
+ function SwipeRecognizer() {
+ AttrRecognizer.apply(this, arguments);
+ }
+
+ inherit(SwipeRecognizer, AttrRecognizer, {
+ /**
+ * @namespace
+ * @memberof SwipeRecognizer
+ */
+ defaults: {
+ event: 'swipe',
+ threshold: 10,
+ velocity: 0.65,
+ direction: DIRECTION_HORIZONTAL | DIRECTION_VERTICAL,
+ pointers: 1
},
- shadow: {
- enabled: { boolean: boolean },
- size: { number: number },
- x: { number: number },
- y: { number: number },
- __type__: { object: object, boolean: boolean }
+
+ getTouchAction: function() {
+ return PanRecognizer.prototype.getTouchAction.call(this);
},
- shape: { string: ['ellipse', 'circle', 'database', 'box', 'text', 'image', 'circularImage', 'diamond', 'dot', 'star', 'triangle', 'triangleDown', 'square', 'icon'] },
- size: { number: number },
- title: { string: string, undef: undef },
- value: { number: number, undef: undef },
- x: { number: number },
- y: { number: number },
- __type__: { object: object }
- },
- physics: {
- barnesHut: {
- gravitationalConstant: { number: number },
- centralGravity: { number: number },
- springLength: { number: number },
- springConstant: { number: number },
- damping: { number: number },
- __type__: { object: object }
+
+ attrTest: function(input) {
+ var direction = this.options.direction;
+ var velocity;
+
+ if (direction & (DIRECTION_HORIZONTAL | DIRECTION_VERTICAL)) {
+ velocity = input.velocity;
+ } else if (direction & DIRECTION_HORIZONTAL) {
+ velocity = input.velocityX;
+ } else if (direction & DIRECTION_VERTICAL) {
+ velocity = input.velocityY;
+ }
+
+ return this._super.attrTest.call(this, input) &&
+ direction & input.direction &&
+ input.distance > this.options.threshold &&
+ abs(velocity) > this.options.velocity && input.eventType & INPUT_END;
},
- repulsion: {
- centralGravity: { number: number },
- springLength: { number: number },
- springConstant: { number: number },
- nodeDistance: { number: number },
- damping: { number: number },
- __type__: { object: object }
+
+ emit: function(input) {
+ var direction = directionStr(input.direction);
+ if (direction) {
+ this.manager.emit(this.options.event + direction, input);
+ }
+
+ this.manager.emit(this.options.event, input);
+ }
+ });
+
+ /**
+ * A tap is ecognized when the pointer is doing a small tap/click. Multiple taps are recognized if they occur
+ * between the given interval and position. The delay option can be used to recognize multi-taps without firing
+ * a single tap.
+ *
+ * The eventData from the emitted event contains the property `tapCount`, which contains the amount of
+ * multi-taps being recognized.
+ * @constructor
+ * @extends Recognizer
+ */
+ function TapRecognizer() {
+ Recognizer.apply(this, arguments);
+
+ // previous time and center,
+ // used for tap counting
+ this.pTime = false;
+ this.pCenter = false;
+
+ this._timer = null;
+ this._input = null;
+ this.count = 0;
+ }
+
+ inherit(TapRecognizer, Recognizer, {
+ /**
+ * @namespace
+ * @memberof PinchRecognizer
+ */
+ defaults: {
+ event: 'tap',
+ pointers: 1,
+ taps: 1,
+ interval: 300, // max time between the multi-tap taps
+ time: 250, // max time of the pointer to be down (like finger on the screen)
+ threshold: 2, // a minimal movement is ok, but keep it low
+ posThreshold: 10 // a multi-tap can be a bit off the initial position
},
- hierarchicalRepulsion: {
- centralGravity: { number: number },
- springLength: { number: number },
- springConstant: { number: number },
- nodeDistance: { number: number },
- damping: { number: number },
- __type__: { object: object }
+
+ getTouchAction: function() {
+ return [TOUCH_ACTION_MANIPULATION];
},
- maxVelocity: { number: number },
- minVelocity: { number: number }, // px/s
- solver: { string: ['barnesHut', 'repulsion', 'hierarchicalRepulsion'] },
- stabilization: {
- enabled: { boolean: boolean },
- iterations: { number: number }, // maximum number of iteration to stabilize
- updateInterval: { number: number },
- onlyDynamicEdges: { boolean: boolean },
- fit: { boolean: boolean },
- __type__: { object: object, boolean: boolean }
+
+ process: function(input) {
+ var options = this.options;
+
+ var validPointers = input.pointers.length === options.pointers;
+ var validMovement = input.distance < options.threshold;
+ var validTouchTime = input.deltaTime < options.time;
+
+ this.reset();
+
+ if ((input.eventType & INPUT_START) && (this.count === 0)) {
+ return this.failTimeout();
+ }
+
+ // we only allow little movement
+ // and we've reached an end event, so a tap is possible
+ if (validMovement && validTouchTime && validPointers) {
+ if (input.eventType != INPUT_END) {
+ return this.failTimeout();
+ }
+
+ var validInterval = this.pTime ? (input.timeStamp - this.pTime < options.interval) : true;
+ var validMultiTap = !this.pCenter || getDistance(this.pCenter, input.center) < options.posThreshold;
+
+ this.pTime = input.timeStamp;
+ this.pCenter = input.center;
+
+ if (!validMultiTap || !validInterval) {
+ this.count = 1;
+ } else {
+ this.count += 1;
+ }
+
+ this._input = input;
+
+ // if tap count matches we have recognized it,
+ // else it has began recognizing...
+ var tapCount = this.count % options.taps;
+ if (tapCount === 0) {
+ // no failing requirements, immediately trigger the tap event
+ // or wait as long as the multitap interval to trigger
+ if (!this.hasRequireFailures()) {
+ return STATE_RECOGNIZED;
+ } else {
+ this._timer = setTimeoutContext(function() {
+ this.state = STATE_RECOGNIZED;
+ this.tryEmit();
+ }, options.interval, this);
+ return STATE_BEGAN;
+ }
+ }
+ }
+ return STATE_FAILED;
},
- timestep: { number: number },
- __type__: { object: object, boolean: boolean }
- },
- selection: {
- select: { boolean: boolean },
- selectConnectedEdges: { boolean: boolean },
- __type__: { object: object }
- },
- view: {},
- __type__: { object: object }
- };
- allOptions.groups.__any__ = allOptions.nodes;
- allOptions.manipulation.controlNodeStyle = allOptions.nodes;
+ failTimeout: function() {
+ this._timer = setTimeoutContext(function() {
+ this.state = STATE_FAILED;
+ }, this.options.interval, this);
+ return STATE_FAILED;
+ },
- exports['default'] = allOptions;
- module.exports = exports['default'];
+ reset: function() {
+ clearTimeout(this._timer);
+ },
-/***/ },
-/* 72 */
-/***/ function(module, exports, __webpack_require__) {
+ emit: function() {
+ if (this.state == STATE_RECOGNIZED ) {
+ this._input.tapCount = this.count;
+ this.manager.emit(this.options.event, this._input);
+ }
+ }
+ });
/**
- * Canvas shapes used by Network
+ * Simple way to create an manager with a default set of recognizers.
+ * @param {HTMLElement} element
+ * @param {Object} [options]
+ * @constructor
*/
- 'use strict';
+ function Hammer(element, options) {
+ options = options || {};
+ options.recognizers = ifUndefined(options.recognizers, Hammer.defaults.preset);
+ return new Manager(element, options);
+ }
+
+ /**
+ * @const {string}
+ */
+ Hammer.VERSION = '2.0.4';
+
+ /**
+ * default settings
+ * @namespace
+ */
+ Hammer.defaults = {
+ /**
+ * set if DOM events are being triggered.
+ * But this is slower and unused by simple implementations, so disabled by default.
+ * @type {Boolean}
+ * @default false
+ */
+ domEvents: false,
+
+ /**
+ * The value for the touchAction property/fallback.
+ * When set to `compute` it will magically set the correct value based on the added recognizers.
+ * @type {String}
+ * @default compute
+ */
+ touchAction: TOUCH_ACTION_COMPUTE,
+
+ /**
+ * @type {Boolean}
+ * @default true
+ */
+ enable: true,
+
+ /**
+ * EXPERIMENTAL FEATURE -- can be removed/changed
+ * Change the parent input target element.
+ * If Null, then it is being set the to main element.
+ * @type {Null|EventTarget}
+ * @default null
+ */
+ inputTarget: null,
+
+ /**
+ * force an input class
+ * @type {Null|Function}
+ * @default null
+ */
+ inputClass: null,
+
+ /**
+ * Default recognizer setup when calling `Hammer()`
+ * When creating a new Manager these will be skipped.
+ * @type {Array}
+ */
+ preset: [
+ // RecognizerClass, options, [recognizeWith, ...], [requireFailure, ...]
+ [RotateRecognizer, { enable: false }],
+ [PinchRecognizer, { enable: false }, ['rotate']],
+ [SwipeRecognizer,{ direction: DIRECTION_HORIZONTAL }],
+ [PanRecognizer, { direction: DIRECTION_HORIZONTAL }, ['swipe']],
+ [TapRecognizer],
+ [TapRecognizer, { event: 'doubletap', taps: 2 }, ['tap']],
+ [PressRecognizer]
+ ],
+
+ /**
+ * Some CSS properties can be used to improve the working of Hammer.
+ * Add them to this method and they will be set when creating a new Manager.
+ * @namespace
+ */
+ cssProps: {
+ /**
+ * Disables text selection to improve the dragging gesture. Mainly for desktop browsers.
+ * @type {String}
+ * @default 'none'
+ */
+ userSelect: 'none',
+
+ /**
+ * Disable the Windows Phone grippers when pressing an element.
+ * @type {String}
+ * @default 'none'
+ */
+ touchSelect: 'none',
+
+ /**
+ * Disables the default callout shown when you touch and hold a touch target.
+ * On iOS, when you touch and hold a touch target such as a link, Safari displays
+ * a callout containing information about the link. This property allows you to disable that callout.
+ * @type {String}
+ * @default 'none'
+ */
+ touchCallout: 'none',
+
+ /**
+ * Specifies whether zooming is enabled. Used by IE10>
+ * @type {String}
+ * @default 'none'
+ */
+ contentZooming: 'none',
+
+ /**
+ * Specifies that an entire element should be draggable instead of its contents. Mainly for desktop browsers.
+ * @type {String}
+ * @default 'none'
+ */
+ userDrag: 'none',
+
+ /**
+ * Overrides the highlight color shown when the user taps a link or a JavaScript
+ * clickable element in iOS. This property obeys the alpha value, if specified.
+ * @type {String}
+ * @default 'rgba(0,0,0,0)'
+ */
+ tapHighlightColor: 'rgba(0,0,0,0)'
+ }
+ };
+
+ var STOP = 1;
+ var FORCED_STOP = 2;
+
+ /**
+ * Manager
+ * @param {HTMLElement} element
+ * @param {Object} [options]
+ * @constructor
+ */
+ function Manager(element, options) {
+ options = options || {};
+
+ this.options = merge(options, Hammer.defaults);
+ this.options.inputTarget = this.options.inputTarget || element;
+
+ this.handlers = {};
+ this.session = {};
+ this.recognizers = [];
+
+ this.element = element;
+ this.input = createInputInstance(this);
+ this.touchAction = new TouchAction(this, this.options.touchAction);
+
+ toggleCssProps(this, true);
+
+ each(options.recognizers, function(item) {
+ var recognizer = this.add(new (item[0])(item[1]));
+ item[2] && recognizer.recognizeWith(item[2]);
+ item[3] && recognizer.requireFailure(item[3]);
+ }, this);
+ }
- if (typeof CanvasRenderingContext2D !== 'undefined') {
+ Manager.prototype = {
+ /**
+ * set options
+ * @param {Object} options
+ * @returns {Manager}
+ */
+ set: function(options) {
+ extend(this.options, options);
- /**
- * Draw a circle shape
- */
- CanvasRenderingContext2D.prototype.circle = function (x, y, r) {
- this.beginPath();
- this.arc(x, y, r, 0, 2 * Math.PI, false);
- };
+ // Options that need a little more setup
+ if (options.touchAction) {
+ this.touchAction.update();
+ }
+ if (options.inputTarget) {
+ // Clean up existing event listeners and reinitialize
+ this.input.destroy();
+ this.input.target = options.inputTarget;
+ this.input.init();
+ }
+ return this;
+ },
- /**
- * Draw a square shape
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r size, width and height of the square
- */
- CanvasRenderingContext2D.prototype.square = function (x, y, r) {
- this.beginPath();
- this.rect(x - r, y - r, r * 2, r * 2);
- };
+ /**
+ * stop recognizing for this session.
+ * This session will be discarded, when a new [input]start event is fired.
+ * When forced, the recognizer cycle is stopped immediately.
+ * @param {Boolean} [force]
+ */
+ stop: function(force) {
+ this.session.stopped = force ? FORCED_STOP : STOP;
+ },
- /**
- * Draw a triangle shape
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius, half the length of the sides of the triangle
- */
- CanvasRenderingContext2D.prototype.triangle = function (x, y, r) {
- // http://en.wikipedia.org/wiki/Equilateral_triangle
- this.beginPath();
+ /**
+ * run the recognizers!
+ * called by the inputHandler function on every movement of the pointers (touches)
+ * it walks through all the recognizers and tries to detect the gesture that is being made
+ * @param {Object} inputData
+ */
+ recognize: function(inputData) {
+ var session = this.session;
+ if (session.stopped) {
+ return;
+ }
- // the change in radius and the offset is here to center the shape
- r *= 1.15;
- y += 0.275 * r;
+ // run the touch-action polyfill
+ this.touchAction.preventDefaults(inputData);
- var s = r * 2;
- var s2 = s / 2;
- var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
- var h = Math.sqrt(s * s - s2 * s2); // height
+ var recognizer;
+ var recognizers = this.recognizers;
- this.moveTo(x, y - (h - ir));
- this.lineTo(x + s2, y + ir);
- this.lineTo(x - s2, y + ir);
- this.lineTo(x, y - (h - ir));
- this.closePath();
- };
+ // this holds the recognizer that is being recognized.
+ // so the recognizer's state needs to be BEGAN, CHANGED, ENDED or RECOGNIZED
+ // if no recognizer is detecting a thing, it is set to `null`
+ var curRecognizer = session.curRecognizer;
- /**
- * Draw a triangle shape in downward orientation
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius
- */
- CanvasRenderingContext2D.prototype.triangleDown = function (x, y, r) {
- // http://en.wikipedia.org/wiki/Equilateral_triangle
- this.beginPath();
+ // reset when the last recognizer is recognized
+ // or when we're in a new session
+ if (!curRecognizer || (curRecognizer && curRecognizer.state & STATE_RECOGNIZED)) {
+ curRecognizer = session.curRecognizer = null;
+ }
- // the change in radius and the offset is here to center the shape
- r *= 1.15;
- y -= 0.275 * r;
+ var i = 0;
+ while (i < recognizers.length) {
+ recognizer = recognizers[i];
- var s = r * 2;
- var s2 = s / 2;
- var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
- var h = Math.sqrt(s * s - s2 * s2); // height
+ // find out if we are allowed try to recognize the input for this one.
+ // 1. allow if the session is NOT forced stopped (see the .stop() method)
+ // 2. allow if we still haven't recognized a gesture in this session, or the this recognizer is the one
+ // that is being recognized.
+ // 3. allow if the recognizer is allowed to run simultaneous with the current recognized recognizer.
+ // this can be setup with the `recognizeWith()` method on the recognizer.
+ if (session.stopped !== FORCED_STOP && ( // 1
+ !curRecognizer || recognizer == curRecognizer || // 2
+ recognizer.canRecognizeWith(curRecognizer))) { // 3
+ recognizer.recognize(inputData);
+ } else {
+ recognizer.reset();
+ }
- this.moveTo(x, y + (h - ir));
- this.lineTo(x + s2, y - ir);
- this.lineTo(x - s2, y - ir);
- this.lineTo(x, y + (h - ir));
- this.closePath();
- };
+ // if the recognizer has been recognizing the input as a valid gesture, we want to store this one as the
+ // current active recognizer. but only if we don't already have an active recognizer
+ if (!curRecognizer && recognizer.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED)) {
+ curRecognizer = session.curRecognizer = recognizer;
+ }
+ i++;
+ }
+ },
- /**
- * Draw a star shape, a star with 5 points
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius, half the length of the sides of the triangle
- */
- CanvasRenderingContext2D.prototype.star = function (x, y, r) {
- // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
- this.beginPath();
+ /**
+ * get a recognizer by its event name.
+ * @param {Recognizer|String} recognizer
+ * @returns {Recognizer|Null}
+ */
+ get: function(recognizer) {
+ if (recognizer instanceof Recognizer) {
+ return recognizer;
+ }
- // the change in radius and the offset is here to center the shape
- r *= 0.82;
- y += 0.1 * r;
+ var recognizers = this.recognizers;
+ for (var i = 0; i < recognizers.length; i++) {
+ if (recognizers[i].options.event == recognizer) {
+ return recognizers[i];
+ }
+ }
+ return null;
+ },
- for (var n = 0; n < 10; n++) {
- var radius = n % 2 === 0 ? r * 1.3 : r * 0.5;
- this.lineTo(x + radius * Math.sin(n * 2 * Math.PI / 10), y - radius * Math.cos(n * 2 * Math.PI / 10));
- }
+ /**
+ * add a recognizer to the manager
+ * existing recognizers with the same event name will be removed
+ * @param {Recognizer} recognizer
+ * @returns {Recognizer|Manager}
+ */
+ add: function(recognizer) {
+ if (invokeArrayArg(recognizer, 'add', this)) {
+ return this;
+ }
- this.closePath();
- };
+ // remove existing
+ var existing = this.get(recognizer.options.event);
+ if (existing) {
+ this.remove(existing);
+ }
- /**
- * Draw a Diamond shape
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius, half the length of the sides of the triangle
- */
- CanvasRenderingContext2D.prototype.diamond = function (x, y, r) {
- // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
- this.beginPath();
+ this.recognizers.push(recognizer);
+ recognizer.manager = this;
- this.lineTo(x, y + r);
- this.lineTo(x + r, y);
- this.lineTo(x, y - r);
- this.lineTo(x - r, y);
+ this.touchAction.update();
+ return recognizer;
+ },
- this.closePath();
- };
+ /**
+ * remove a recognizer by name or instance
+ * @param {Recognizer|String} recognizer
+ * @returns {Manager}
+ */
+ remove: function(recognizer) {
+ if (invokeArrayArg(recognizer, 'remove', this)) {
+ return this;
+ }
- /**
- * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
- */
- CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
- var r2d = Math.PI / 180;
- if (w - 2 * r < 0) {
- r = w / 2;
- } //ensure that the radius isn't too large for x
- if (h - 2 * r < 0) {
- r = h / 2;
- } //ensure that the radius isn't too large for y
- this.beginPath();
- this.moveTo(x + r, y);
- this.lineTo(x + w - r, y);
- this.arc(x + w - r, y + r, r, r2d * 270, r2d * 360, false);
- this.lineTo(x + w, y + h - r);
- this.arc(x + w - r, y + h - r, r, 0, r2d * 90, false);
- this.lineTo(x + r, y + h);
- this.arc(x + r, y + h - r, r, r2d * 90, r2d * 180, false);
- this.lineTo(x, y + r);
- this.arc(x + r, y + r, r, r2d * 180, r2d * 270, false);
- };
+ var recognizers = this.recognizers;
+ recognizer = this.get(recognizer);
+ recognizers.splice(inArray(recognizers, recognizer), 1);
- /**
- * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
- */
- CanvasRenderingContext2D.prototype.ellipse = function (x, y, w, h) {
- var kappa = 0.5522848,
- ox = w / 2 * kappa,
- // control point offset horizontal
- oy = h / 2 * kappa,
- // control point offset vertical
- xe = x + w,
- // x-end
- ye = y + h,
- // y-end
- xm = x + w / 2,
- // x-middle
- ym = y + h / 2; // y-middle
+ this.touchAction.update();
+ return this;
+ },
- this.beginPath();
- this.moveTo(x, ym);
- this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
- this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
- this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
- this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
- };
+ /**
+ * bind event
+ * @param {String} events
+ * @param {Function} handler
+ * @returns {EventEmitter} this
+ */
+ on: function(events, handler) {
+ var handlers = this.handlers;
+ each(splitStr(events), function(event) {
+ handlers[event] = handlers[event] || [];
+ handlers[event].push(handler);
+ });
+ return this;
+ },
- /**
- * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
- */
- CanvasRenderingContext2D.prototype.database = function (x, y, w, h) {
- var f = 1 / 3;
- var wEllipse = w;
- var hEllipse = h * f;
+ /**
+ * unbind event, leave emit blank to remove all handlers
+ * @param {String} events
+ * @param {Function} [handler]
+ * @returns {EventEmitter} this
+ */
+ off: function(events, handler) {
+ var handlers = this.handlers;
+ each(splitStr(events), function(event) {
+ if (!handler) {
+ delete handlers[event];
+ } else {
+ handlers[event].splice(inArray(handlers[event], handler), 1);
+ }
+ });
+ return this;
+ },
- var kappa = 0.5522848,
- ox = wEllipse / 2 * kappa,
- // control point offset horizontal
- oy = hEllipse / 2 * kappa,
- // control point offset vertical
- xe = x + wEllipse,
- // x-end
- ye = y + hEllipse,
- // y-end
- xm = x + wEllipse / 2,
- // x-middle
- ym = y + hEllipse / 2,
- // y-middle
- ymb = y + (h - hEllipse / 2),
- // y-midlle, bottom ellipse
- yeb = y + h; // y-end, bottom ellipse
+ /**
+ * emit event to the listeners
+ * @param {String} event
+ * @param {Object} data
+ */
+ emit: function(event, data) {
+ // we also want to trigger dom events
+ if (this.options.domEvents) {
+ triggerDomEvent(event, data);
+ }
- this.beginPath();
- this.moveTo(xe, ym);
+ // no handlers, so skip it all
+ var handlers = this.handlers[event] && this.handlers[event].slice();
+ if (!handlers || !handlers.length) {
+ return;
+ }
- this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
- this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+ data.type = event;
+ data.preventDefault = function() {
+ data.srcEvent.preventDefault();
+ };
- this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
- this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+ var i = 0;
+ while (i < handlers.length) {
+ handlers[i](data);
+ i++;
+ }
+ },
- this.lineTo(xe, ymb);
+ /**
+ * destroy the manager and unbinds all events
+ * it doesn't unbind dom events, that is the user own responsibility
+ */
+ destroy: function() {
+ this.element && toggleCssProps(this, false);
- this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
- this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+ this.handlers = {};
+ this.session = {};
+ this.input.destroy();
+ this.element = null;
+ }
+ };
- this.lineTo(x, ym);
- };
+ /**
+ * add/remove the css properties as defined in manager.options.cssProps
+ * @param {Manager} manager
+ * @param {Boolean} add
+ */
+ function toggleCssProps(manager, add) {
+ var element = manager.element;
+ each(manager.options.cssProps, function(value, name) {
+ element.style[prefixed(element.style, name)] = add ? value : '';
+ });
+ }
- /**
- * Draw an arrow point (no line)
- */
- CanvasRenderingContext2D.prototype.arrow = function (x, y, angle, length) {
- // tail
- var xt = x - length * Math.cos(angle);
- var yt = y - length * Math.sin(angle);
+ /**
+ * trigger dom event
+ * @param {String} event
+ * @param {Object} data
+ */
+ function triggerDomEvent(event, data) {
+ var gestureEvent = document.createEvent('Event');
+ gestureEvent.initEvent(event, true, true);
+ gestureEvent.gesture = data;
+ data.target.dispatchEvent(gestureEvent);
+ }
- // inner tail
- // TODO: allow to customize different shapes
- var xi = x - length * 0.9 * Math.cos(angle);
- var yi = y - length * 0.9 * Math.sin(angle);
+ extend(Hammer, {
+ INPUT_START: INPUT_START,
+ INPUT_MOVE: INPUT_MOVE,
+ INPUT_END: INPUT_END,
+ INPUT_CANCEL: INPUT_CANCEL,
- // left
- var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
- var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
+ STATE_POSSIBLE: STATE_POSSIBLE,
+ STATE_BEGAN: STATE_BEGAN,
+ STATE_CHANGED: STATE_CHANGED,
+ STATE_ENDED: STATE_ENDED,
+ STATE_RECOGNIZED: STATE_RECOGNIZED,
+ STATE_CANCELLED: STATE_CANCELLED,
+ STATE_FAILED: STATE_FAILED,
- // right
- var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
- var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
+ DIRECTION_NONE: DIRECTION_NONE,
+ DIRECTION_LEFT: DIRECTION_LEFT,
+ DIRECTION_RIGHT: DIRECTION_RIGHT,
+ DIRECTION_UP: DIRECTION_UP,
+ DIRECTION_DOWN: DIRECTION_DOWN,
+ DIRECTION_HORIZONTAL: DIRECTION_HORIZONTAL,
+ DIRECTION_VERTICAL: DIRECTION_VERTICAL,
+ DIRECTION_ALL: DIRECTION_ALL,
- this.beginPath();
- this.moveTo(x, y);
- this.lineTo(xl, yl);
- this.lineTo(xi, yi);
- this.lineTo(xr, yr);
- this.closePath();
- };
+ Manager: Manager,
+ Input: Input,
+ TouchAction: TouchAction,
- /**
- * Sets up the dashedLine functionality for drawing
- * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
- * @author David Jordan
- * @date 2012-08-08
- */
- CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, pattern) {
- this.beginPath();
- this.moveTo(x, y);
+ TouchInput: TouchInput,
+ MouseInput: MouseInput,
+ PointerEventInput: PointerEventInput,
+ TouchMouseInput: TouchMouseInput,
+ SingleTouchInput: SingleTouchInput,
- var patternLength = pattern.length;
- var dx = x2 - x;
- var dy = y2 - y;
- var slope = dy / dx;
- var distRemaining = Math.sqrt(dx * dx + dy * dy);
- var patternIndex = 0;
- var draw = true;
- var xStep = 0;
- var dashLength = pattern[0];
+ Recognizer: Recognizer,
+ AttrRecognizer: AttrRecognizer,
+ Tap: TapRecognizer,
+ Pan: PanRecognizer,
+ Swipe: SwipeRecognizer,
+ Pinch: PinchRecognizer,
+ Rotate: RotateRecognizer,
+ Press: PressRecognizer,
- while (distRemaining >= 0.1) {
- dashLength = pattern[patternIndex++ % patternLength];
- if (dashLength > distRemaining) {
- dashLength = distRemaining;
- }
+ on: addEventListeners,
+ off: removeEventListeners,
+ each: each,
+ merge: merge,
+ extend: extend,
+ inherit: inherit,
+ bindFn: bindFn,
+ prefixed: prefixed
+ });
- xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
- xStep = dx < 0 ? -xStep : xStep;
- x += xStep;
- y += slope * xStep;
+ if ("function" == TYPE_FUNCTION && __webpack_require__(86)) {
+ !(__WEBPACK_AMD_DEFINE_RESULT__ = function() {
+ return Hammer;
+ }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+ } else if (typeof module != 'undefined' && module.exports) {
+ module.exports = Hammer;
+ } else {
+ window[exportName] = Hammer;
+ }
- if (draw === true) {
- this.lineTo(x, y);
- } else {
- this.moveTo(x, y);
- }
+ })(window, document, 'Hammer');
- distRemaining -= dashLength;
- draw = !draw;
- }
- };
- }
/***/ },
-/* 73 */
+/* 69 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -33182,7 +32975,7 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _Label = __webpack_require__(74);
+ var _Label = __webpack_require__(70);
var _Label2 = _interopRequireWildcard(_Label);
@@ -33242,7 +33035,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _TriangleDown2 = _interopRequireWildcard(_TriangleDown);
- var _Validator = __webpack_require__(70);
+ var _Validator = __webpack_require__(62);
var _Validator2 = _interopRequireWildcard(_Validator);
@@ -33643,7 +33436,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports['default'];
/***/ },
-/* 74 */
+/* 70 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -33953,7 +33746,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports['default'];
/***/ },
-/* 75 */
+/* 71 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -33968,7 +33761,7 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _Label = __webpack_require__(74);
+ var _Label = __webpack_require__(70);
var _Label2 = _interopRequireWildcard(_Label);
@@ -34487,7 +34280,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports['default'];
/***/ },
-/* 76 */
+/* 72 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
@@ -34967,7 +34760,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports["default"];
/***/ },
-/* 77 */
+/* 73 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
@@ -35062,7 +34855,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports["default"];
/***/ },
-/* 78 */
+/* 74 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
@@ -35153,7 +34946,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports["default"];
/***/ },
-/* 79 */
+/* 75 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
@@ -35262,7 +35055,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports["default"];
/***/ },
-/* 80 */
+/* 76 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
@@ -35383,7 +35176,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports["default"];
/***/ },
-/* 81 */
+/* 77 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
@@ -35442,7 +35235,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports["default"];
/***/ },
-/* 82 */
+/* 78 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -35459,7 +35252,7 @@ return /******/ (function(modules) { // webpackBootstrap
value: true
});
- var _Node2 = __webpack_require__(73);
+ var _Node2 = __webpack_require__(69);
var _Node3 = _interopRequireWildcard(_Node2);
@@ -35487,7 +35280,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports['default'];
/***/ },
-/* 83 */
+/* 79 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -35502,7 +35295,7 @@ return /******/ (function(modules) { // webpackBootstrap
var util = __webpack_require__(1);
var Hammer = __webpack_require__(41);
var hammerUtil = __webpack_require__(44);
- var keycharm = __webpack_require__(56);
+ var keycharm = __webpack_require__(83);
var NavigationHandler = (function () {
function NavigationHandler(body, canvas) {
@@ -35754,7 +35547,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports['default'];
/***/ },
-/* 84 */
+/* 80 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -35880,7 +35673,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = exports['default'];
/***/ },
-/* 85 */
+/* 81 */
/***/ function(module, exports, __webpack_require__) {
// English
@@ -35924,7 +35717,7 @@ return /******/ (function(modules) { // webpackBootstrap
exports.nl_BE = exports.nl;
/***/ },
-/* 86 */
+/* 82 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -36502,6 +36295,241 @@ return /******/ (function(modules) { // webpackBootstrap
exports['default'] = ColorPicker;
module.exports = exports['default'];
+/***/ },
+/* 83 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;"use strict";
+ /**
+ * Created by Alex on 11/6/2014.
+ */
+
+ // https://github.com/umdjs/umd/blob/master/returnExports.js#L40-L60
+ // if the module has no dependencies, the above pattern can be simplified to
+ (function (root, factory) {
+ if (true) {
+ // AMD. Register as an anonymous module.
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+ } else if (typeof exports === 'object') {
+ // Node. Does not work with strict CommonJS, but
+ // only CommonJS-like environments that support module.exports,
+ // like Node.
+ module.exports = factory();
+ } else {
+ // Browser globals (root is window)
+ root.keycharm = factory();
+ }
+ }(this, function () {
+
+ function keycharm(options) {
+ var preventDefault = options && options.preventDefault || false;
+
+ var container = options && options.container || window;
+ var _exportFunctions = {};
+ var _bound = {keydown:{}, keyup:{}};
+ var _keys = {};
+ var i;
+
+ // a - z
+ for (i = 97; i <= 122; i++) {_keys[String.fromCharCode(i)] = {code:65 + (i - 97), shift: false};}
+ // A - Z
+ for (i = 65; i <= 90; i++) {_keys[String.fromCharCode(i)] = {code:i, shift: true};}
+ // 0 - 9
+ for (i = 0; i <= 9; i++) {_keys['' + i] = {code:48 + i, shift: false};}
+ // F1 - F12
+ for (i = 1; i <= 12; i++) {_keys['F' + i] = {code:111 + i, shift: false};}
+ // num0 - num9
+ for (i = 0; i <= 9; i++) {_keys['num' + i] = {code:96 + i, shift: false};}
+
+ // numpad misc
+ _keys['num*'] = {code:106, shift: false};
+ _keys['num+'] = {code:107, shift: false};
+ _keys['num-'] = {code:109, shift: false};
+ _keys['num/'] = {code:111, shift: false};
+ _keys['num.'] = {code:110, shift: false};
+ // arrows
+ _keys['left'] = {code:37, shift: false};
+ _keys['up'] = {code:38, shift: false};
+ _keys['right'] = {code:39, shift: false};
+ _keys['down'] = {code:40, shift: false};
+ // extra keys
+ _keys['space'] = {code:32, shift: false};
+ _keys['enter'] = {code:13, shift: false};
+ _keys['shift'] = {code:16, shift: undefined};
+ _keys['esc'] = {code:27, shift: false};
+ _keys['backspace'] = {code:8, shift: false};
+ _keys['tab'] = {code:9, shift: false};
+ _keys['ctrl'] = {code:17, shift: false};
+ _keys['alt'] = {code:18, shift: false};
+ _keys['delete'] = {code:46, shift: false};
+ _keys['pageup'] = {code:33, shift: false};
+ _keys['pagedown'] = {code:34, shift: false};
+ // symbols
+ _keys['='] = {code:187, shift: false};
+ _keys['-'] = {code:189, shift: false};
+ _keys[']'] = {code:221, shift: false};
+ _keys['['] = {code:219, shift: false};
+
+
+
+ var down = function(event) {handleEvent(event,'keydown');};
+ var up = function(event) {handleEvent(event,'keyup');};
+
+ // handle the actualy bound key with the event
+ var handleEvent = function(event,type) {
+ if (_bound[type][event.keyCode] !== undefined) {
+ var bound = _bound[type][event.keyCode];
+ for (var i = 0; i < bound.length; i++) {
+ if (bound[i].shift === undefined) {
+ bound[i].fn(event);
+ }
+ else if (bound[i].shift == true && event.shiftKey == true) {
+ bound[i].fn(event);
+ }
+ else if (bound[i].shift == false && event.shiftKey == false) {
+ bound[i].fn(event);
+ }
+ }
+
+ if (preventDefault == true) {
+ event.preventDefault();
+ }
+ }
+ };
+
+ // bind a key to a callback
+ _exportFunctions.bind = function(key, callback, type) {
+ if (type === undefined) {
+ type = 'keydown';
+ }
+ if (_keys[key] === undefined) {
+ throw new Error("unsupported key: " + key);
+ }
+ if (_bound[type][_keys[key].code] === undefined) {
+ _bound[type][_keys[key].code] = [];
+ }
+ _bound[type][_keys[key].code].push({fn:callback, shift:_keys[key].shift});
+ };
+
+
+ // bind all keys to a call back (demo purposes)
+ _exportFunctions.bindAll = function(callback, type) {
+ if (type === undefined) {
+ type = 'keydown';
+ }
+ for (var key in _keys) {
+ if (_keys.hasOwnProperty(key)) {
+ _exportFunctions.bind(key,callback,type);
+ }
+ }
+ };
+
+ // get the key label from an event
+ _exportFunctions.getKey = function(event) {
+ for (var key in _keys) {
+ if (_keys.hasOwnProperty(key)) {
+ if (event.shiftKey == true && _keys[key].shift == true && event.keyCode == _keys[key].code) {
+ return key;
+ }
+ else if (event.shiftKey == false && _keys[key].shift == false && event.keyCode == _keys[key].code) {
+ return key;
+ }
+ else if (event.keyCode == _keys[key].code && key == 'shift') {
+ return key;
+ }
+ }
+ }
+ return "unknown key, currently not supported";
+ };
+
+ // unbind either a specific callback from a key or all of them (by leaving callback undefined)
+ _exportFunctions.unbind = function(key, callback, type) {
+ if (type === undefined) {
+ type = 'keydown';
+ }
+ if (_keys[key] === undefined) {
+ throw new Error("unsupported key: " + key);
+ }
+ if (callback !== undefined) {
+ var newBindings = [];
+ var bound = _bound[type][_keys[key].code];
+ if (bound !== undefined) {
+ for (var i = 0; i < bound.length; i++) {
+ if (!(bound[i].fn == callback && bound[i].shift == _keys[key].shift)) {
+ newBindings.push(_bound[type][_keys[key].code][i]);
+ }
+ }
+ }
+ _bound[type][_keys[key].code] = newBindings;
+ }
+ else {
+ _bound[type][_keys[key].code] = [];
+ }
+ };
+
+ // reset all bound variables.
+ _exportFunctions.reset = function() {
+ _bound = {keydown:{}, keyup:{}};
+ };
+
+ // unbind all listeners and reset all variables.
+ _exportFunctions.destroy = function() {
+ _bound = {keydown:{}, keyup:{}};
+ container.removeEventListener('keydown', down, true);
+ container.removeEventListener('keyup', up, true);
+ };
+
+ // create listeners.
+ container.addEventListener('keydown',down,true);
+ container.addEventListener('keyup',up,true);
+
+ // return the public functions.
+ return _exportFunctions;
+ }
+
+ return keycharm;
+ }));
+
+
+
+
+/***/ },
+/* 84 */
+/***/ function(module, exports, __webpack_require__) {
+
+ function webpackContext(req) {
+ throw new Error("Cannot find module '" + req + "'.");
+ }
+ webpackContext.keys = function() { return []; };
+ webpackContext.resolve = webpackContext;
+ module.exports = webpackContext;
+ webpackContext.id = 84;
+
+
+/***/ },
+/* 85 */
+/***/ function(module, exports, __webpack_require__) {
+
+ module.exports = function(module) {
+ if(!module.webpackPolyfill) {
+ module.deprecate = function() {};
+ module.paths = [];
+ // module.parent = undefined by default
+ module.children = [];
+ module.webpackPolyfill = 1;
+ }
+ return module;
+ }
+
+
+/***/ },
+/* 86 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /* WEBPACK VAR INJECTION */(function(__webpack_amd_options__) {module.exports = __webpack_amd_options__;
+
+ /* WEBPACK VAR INJECTION */}.call(exports, {}))
+
/***/ },
/* 87 */
/***/ function(module, exports, __webpack_require__) {
diff --git a/lib/DOMutil.js b/lib/DOMutil.js
index 81ca3471..5c78a4fb 100644
--- a/lib/DOMutil.js
+++ b/lib/DOMutil.js
@@ -153,28 +153,29 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
point.setAttributeNS(null, "style", 'vis-' + group.group.options.drawPoints.styles);
}
point.setAttributeNS(null, "class", group.className + " vis-point");
- //handle label
- var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
- if (labelObj){
- if (labelObj.xOffset) {
- x = x + labelObj.xOffset;
- }
+ //handle label
- if (labelObj.yOffset) {
- y = y + labelObj.yOffset;
- }
- if (labelObj.content) {
- label.textContent = labelObj.content;
- }
- if (labelObj.className) {
- label.setAttributeNS(null, "class", labelObj.className + " vis-label");
- }
+ if (labelObj) {
+ var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
+ if (labelObj.xOffset) {
+ x = x + labelObj.xOffset;
+ }
+ if (labelObj.yOffset) {
+ y = y + labelObj.yOffset;
+ }
+ if (labelObj.content) {
+ label.textContent = labelObj.content;
+ }
+ if (labelObj.className) {
+ label.setAttributeNS(null, "class", labelObj.className + " vis-label");
+ }
+ label.setAttributeNS(null, "x", x);
+ label.setAttributeNS(null, "y", y);
}
- label.setAttributeNS(null, "x", x);
- label.setAttributeNS(null, "y", y);
+
return point;
};
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 61ed6eaa..11bed710 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -141,7 +141,6 @@ Core.prototype._create = function (container) {
// emulate a touch event (emitted before the start of a pan, pinch, tap, or press)
hammerUtil.onTouch(this.hammer, function (event) {
- console.log('touch', event)
me.emit('touch', event);
}.bind(this));
diff --git a/lib/timeline/DataStep.js b/lib/timeline/DataStep.js
index bce96b5a..86ab97dd 100644
--- a/lib/timeline/DataStep.js
+++ b/lib/timeline/DataStep.js
@@ -60,13 +60,12 @@ function DataStep(start, end, minimumStep, containerHeight, customRange, alignZe
DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, customRange) {
this._start = customRange.min === undefined ? start : customRange.min;
this._end = customRange.max === undefined ? end : customRange.max;
-
- if (this._start == this._end) {
- this._start -= 0.75;
- this._end += 1;
+ if (this._start === this._end) {
+ this._start = customRange.min === undefined ? this._start - 0.75 : this._start;
+ this._end = customRange.max === undefined ? this._end + 1 : this._end;;
}
- if (this.autoScale == true) {
+ if (this.autoScale === true) {
this.setMinimumStep(minimumStep, containerHeight);
}
@@ -75,14 +74,14 @@ DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight,
/**
* Automatically determine the scale that bests fits the provided minimum step
- * @param {Number} [minimumStep] The minimum step size in milliseconds
+ * @param {Number} [minimumStep] The minimum step size in pixels
*/
DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
// round to floor
- var size = this._end - this._start;
- var safeSize = size * 1.2;
- var minimumStepValue = minimumStep * (safeSize / containerHeight);
- var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
+ var range = this._end - this._start;
+ var safeRange = range * 1.2;
+ var minimumStepValue = minimumStep * (safeRange / containerHeight);
+ var orderOfMagnitude = Math.round(Math.log(safeRange)/Math.LN10);
var minorStepIdx = -1;
var magnitudefactor = Math.pow(10,orderOfMagnitude);
@@ -103,7 +102,7 @@ DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
break;
}
}
- if (solutionFound == true) {
+ if (solutionFound === true) {
break;
}
}
@@ -130,14 +129,13 @@ DataStep.prototype.setFirst = function(customRange) {
this.marginStart = customRange.min === undefined ? this.roundToMinor(niceStart) : customRange.min;
// if we need to align the zero's we need to make sure that there is a zero to use.
- if (this.alignZeros == true && (this.marginEnd - this.marginStart) % this.step != 0) {
+ if (this.alignZeros === true && (this.marginEnd - this.marginStart) % this.step != 0) {
this.marginEnd += this.marginEnd % this.step;
}
this.deadSpace = this.roundToMinor(niceEnd) - niceEnd + this.roundToMinor(niceStart) - niceStart;
this.marginRange = this.marginEnd - this.marginStart;
-
this.current = this.marginEnd;
};
@@ -168,7 +166,7 @@ DataStep.prototype.next = function() {
this.current -= this.step;
// safety mechanism: if current time is still unchanged, move to the end
- if (this.current == prev) {
+ if (this.current === prev) {
this.current = this._end;
}
};
@@ -234,10 +232,10 @@ DataStep.prototype.getCurrent = function(decimals) {
if (toPrecision.indexOf(",") != -1 || toPrecision.indexOf(".") != -1) {
// If no decimal is specified, and there are decimal places, remove trailing zeros
for (var i = toPrecision.length - 1; i > 0; i--) {
- if (toPrecision[i] == "0") {
+ if (toPrecision[i] === "0") {
toPrecision = toPrecision.slice(0, i);
}
- else if (toPrecision[i] == "." || toPrecision[i] == ",") {
+ else if (toPrecision[i] === "." || toPrecision[i] === ",") {
toPrecision = toPrecision.slice(0, i);
break;
}
@@ -257,7 +255,21 @@ DataStep.prototype.getCurrent = function(decimals) {
* @return {boolean} true if current date is major, else false.
*/
DataStep.prototype.isMajor = function() {
- return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
+ return (this.current % (this.scale * this.majorSteps[this.stepIndex]) === 0);
};
+
+DataStep.prototype.shift = function(steps) {
+ if (steps < 0) {
+ for (let i = 0; i < -steps; i++) {
+ this.previous();
+ }
+ }
+ else if (steps > 0) {
+ for (let i = 0; i < steps; i++) {
+ this.next();
+ }
+ }
+}
+
module.exports = DataStep;
diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js
index 7a8299ba..1d6c2154 100644
--- a/lib/timeline/component/DataAxis.js
+++ b/lib/timeline/component/DataAxis.js
@@ -67,6 +67,7 @@ function DataAxis (body, options, svg, linegraphOptions) {
this.stepPixels = 25;
this.stepPixelsForced = 25;
this.zeroCrossing = -1;
+ this.amountOfSteps = -1;
this.lineOffset = 0;
this.master = true;
@@ -135,7 +136,7 @@ DataAxis.prototype.setOptions = function (options) {
this.minWidth = Number(('' + this.options.width).replace("px",""));
- if (redraw == true && this.dom.frame) {
+ if (redraw === true && this.dom.frame) {
this.hide();
this.show();
}
@@ -175,19 +176,23 @@ DataAxis.prototype._redrawGroupIcons = function () {
var iconOffset = 4;
var y = iconOffset + 0.5 * iconHeight;
- if (this.options.orientation == 'left') {
+ if (this.options.orientation === 'left') {
x = iconOffset;
}
else {
x = this.width - iconWidth - iconOffset;
}
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
- this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
- y += iconHeight + iconOffset;
- }
+ var groupArray = Object.keys(this.groups);
+ groupArray.sort(function (a,b) {
+ return (a < b ? -1 : 1);
+ })
+
+ for (var i = 0; i < groupArray.length; i++) {
+ var groupId = groupArray[i];
+ if (this.groups[groupId].visible === true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] === true)) {
+ this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+ y += iconHeight + iconOffset;
}
}
@@ -196,7 +201,7 @@ DataAxis.prototype._redrawGroupIcons = function () {
};
DataAxis.prototype._cleanupIcons = function() {
- if (this.iconsRemoved == false) {
+ if (this.iconsRemoved === false) {
DOMutil.prepareElements(this.svgElements);
DOMutil.cleanupElements(this.svgElements);
this.iconsRemoved = true;
@@ -209,7 +214,7 @@ DataAxis.prototype._cleanupIcons = function() {
DataAxis.prototype.show = function() {
this.hidden = false;
if (!this.dom.frame.parentNode) {
- if (this.options.orientation == 'left') {
+ if (this.options.orientation === 'left') {
this.body.dom.left.appendChild(this.dom.frame);
}
else {
@@ -243,7 +248,7 @@ DataAxis.prototype.hide = function() {
* @param end
*/
DataAxis.prototype.setRange = function (start, end) {
- if (this.master == false && this.options.alignZeros == true && this.zeroCrossing != -1) {
+ if (this.master === false && this.options.alignZeros === true && this.zeroCrossing != -1) {
if (start > 0) {
start = 0;
}
@@ -265,12 +270,12 @@ DataAxis.prototype.redraw = function () {
for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) {
- if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+ if (this.groups[groupId].visible === true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] === true)) {
activeGroups++;
}
}
}
- if (this.amountOfGroups == 0 || activeGroups == 0) {
+ if (this.amountOfGroups === 0 || activeGroups === 0) {
this.hide();
}
else {
@@ -279,7 +284,7 @@ DataAxis.prototype.redraw = function () {
// svg offsetheight did not work in firefox and explorer...
this.dom.lineContainer.style.height = this.height + 'px';
- this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
+ this.width = this.options.visible === true ? Number(('' + this.options.width).replace("px","")) : 0;
var props = this.props;
var frame = this.dom.frame;
@@ -304,7 +309,7 @@ DataAxis.prototype.redraw = function () {
props.majorLineHeight = 1;
// take frame offline while updating (is almost twice as fast)
- if (orientation == 'left') {
+ if (orientation === 'left') {
frame.style.top = '0';
frame.style.left = '0';
frame.style.bottom = '';
@@ -326,7 +331,7 @@ DataAxis.prototype.redraw = function () {
resized = this._redrawLabels();
resized = this._isResized() || resized;
- if (this.options.icons == true) {
+ if (this.options.icons === true) {
this._redrawGroupIcons();
}
else {
@@ -346,60 +351,64 @@ DataAxis.prototype._redrawLabels = function () {
var resized = false;
DOMutil.prepareElements(this.DOMelements.lines);
DOMutil.prepareElements(this.DOMelements.labels);
-
var orientation = this.options['orientation'];
- // calculate range and step (step such that we have space for 7 characters per label)
- var minimumStep = this.master ? this.props.majorCharHeight || 10 : this.stepPixelsForced;
+ // get the range for the slaved axis
+ var step;
+ if (this.master === false) {
+ var stepSize, rangeStart, rangeEnd, minimumStep;
+ if (this.zeroCrossing !== -1 && this.options.alignZeros === true) {
+ if (this.range.end > 0) {
+ stepSize = this.range.end / this.zeroCrossing; // size of one step
+ rangeStart = this.range.end - this.amountOfSteps * stepSize;
+ rangeEnd = this.range.end;
+ }
+ else {
+ // all of the range (including start) has to be done before the zero crossing.
+ stepSize = -1 * this.range.start / (this.amountOfSteps - this.zeroCrossing); // absolute size of a step
+ rangeStart = this.range.start;
+ rangeEnd = this.range.start + stepSize * this.amountOfSteps;
+ }
+ }
+ else {
+ rangeStart = this.range.start;
+ rangeEnd = this.range.end;
+ }
+ minimumStep = this.stepPixels;
+ }
+ else {
+ // calculate range and step (step such that we have space for 7 characters per label)
+ minimumStep = this.props.majorCharHeight;
+ rangeStart = this.range.start;
+ rangeEnd = this.range.end;
+ }
- var step = new DataStep(
- this.range.start,
- this.range.end,
+ this.step = step = new DataStep(
+ rangeStart,
+ rangeEnd,
minimumStep,
this.dom.frame.offsetHeight,
this.options.customRange[this.options.orientation],
- this.master == false && this.options.alignZeros // doess the step have to align zeros? only if not master and the options is on
+ this.master === false && this.options.alignZeros // does the step have to align zeros? only if not master and the options is on
);
- this.step = step;
- // get the distance in pixels for a step
- // dead space is space that is "left over" after a step
- var stepPixels = (this.dom.frame.offsetHeight - (step.deadSpace * (this.dom.frame.offsetHeight / step.marginRange))) / (((step.marginRange - step.deadSpace) / step.step));
-
- this.stepPixels = stepPixels;
-
- var amountOfSteps = this.height / stepPixels;
- var stepDifference = 0;
// the slave axis needs to use the same horizontal lines as the master axis.
- if (this.master == false) {
- stepPixels = this.stepPixelsForced;
- stepDifference = Math.round((this.dom.frame.offsetHeight / stepPixels) - amountOfSteps);
- for (var i = 0; i < 0.5 * stepDifference; i++) {
- step.previous();
- }
- amountOfSteps = this.height / stepPixels;
-
- if (this.zeroCrossing != -1 && this.options.alignZeros == true) {
- var zeroStepDifference = (step.marginEnd / step.step) - this.zeroCrossing;
- if (zeroStepDifference > 0) {
- for (var i = 0; i < zeroStepDifference; i++) {step.next();}
- }
- else if (zeroStepDifference < 0) {
- for (var i = 0; i < -zeroStepDifference; i++) {step.previous();}
- }
- }
+ if (this.master === true) {
+ this.stepPixels = ((this.dom.frame.offsetHeight) / step.marginRange) * step.step;
+ this.amountOfSteps = Math.ceil(this.dom.frame.offsetHeight / this.stepPixels);
}
else {
- amountOfSteps += 0.25;
+ // align with zero
+ if (this.options.alignZeros === true && this.zeroCrossing !== -1) {
+ // distance is the amount of steps away from the zero crossing we are.
+ let distance = (step.current - this.zeroCrossing * step.step) / step.step;
+ this.step.shift(distance);
+ }
}
-
- this.valueAtZero = step.marginEnd;
- var marginStartPos = 0;
-
- // do not draw the first label
- var max = 1;
+ // value at the bottom of the SVG
+ this.valueAtBottom = step.marginEnd;
// Get the number of decimal places
var decimals;
@@ -408,51 +417,55 @@ DataAxis.prototype._redrawLabels = function () {
}
this.maxLabelSize = 0;
- var y = 0;
- while (max < Math.round(amountOfSteps)) {
- step.next();
- y = Math.round(max * stepPixels);
- marginStartPos = max * stepPixels;
- var isMajor = step.isMajor();
-
- if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
- this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-minor', this.props.minorCharHeight);
- }
+ var y = 0; // init value
+ var stepIndex = 0; // init value
+ var isMajor = false; // init value
+ while (stepIndex < this.amountOfSteps) {
+ y = Math.round(stepIndex * this.stepPixels);
+ isMajor = step.isMajor();
+
+ if (stepIndex > 0 && stepIndex !== this.amountOfSteps) {
+ if (this.options['showMinorLabels'] && isMajor === false || this.master === false && this.options['showMinorLabels'] === true) {
+ this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-minor', this.props.minorCharHeight);
+ }
- if (isMajor && this.options['showMajorLabels'] && this.master == true ||
- this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
- if (y >= 0) {
- this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-major', this.props.majorCharHeight);
+ if (isMajor && this.options['showMajorLabels'] && this.master === true ||
+ this.options['showMinorLabels'] === false && this.master === false && isMajor === true) {
+ if (y >= 0) {
+ this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-major', this.props.majorCharHeight);
+ }
+ this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-major', this.options.majorLinesOffset, this.props.majorLineWidth);
+ }
+ else {
+ this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-minor', this.options.minorLinesOffset, this.props.minorLineWidth);
}
- this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-major', this.options.majorLinesOffset, this.props.majorLineWidth);
- }
- else {
- this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-minor', this.options.minorLinesOffset, this.props.minorLineWidth);
}
- if (this.master == true && step.current == 0) {
- this.zeroCrossing = max;
+ // get zero crossing
+ if (this.master === true && step.current === 0) {
+ this.zeroCrossing = stepIndex;
}
- max++;
+ step.next();
+ stepIndex += 1;
}
- if (this.master == false) {
- this.conversionFactor = y / (this.valueAtZero - step.current);
- }
- else {
- this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
+ // get zero crossing if it's the last step
+ if (this.master === true && step.current === 0) {
+ this.zeroCrossing = stepIndex;
}
+ this.conversionFactor = this.stepPixels / step.step;
+
// Note that title is rotated, so we're using the height, not width!
var titleWidth = 0;
if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
titleWidth = this.props.titleCharHeight;
}
- var offset = this.options.icons == true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15;
+ var offset = this.options.icons === true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15;
// this will resize the yAxis to accommodate the labels.
- if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
+ if (this.maxLabelSize > (this.width - offset) && this.options.visible === true) {
this.width = this.maxLabelSize + offset;
this.options.width = this.width + "px";
DOMutil.cleanupElements(this.DOMelements.lines);
@@ -461,7 +474,7 @@ DataAxis.prototype._redrawLabels = function () {
resized = true;
}
// this will resize the yAxis if it is too big for the labels.
- else if (this.maxLabelSize < (this.width - offset) && this.options.visible == true && this.width > this.minWidth) {
+ else if (this.maxLabelSize < (this.width - offset) && this.options.visible === true && this.width > this.minWidth) {
this.width = Math.max(this.minWidth,this.maxLabelSize + offset);
this.options.width = this.width + "px";
DOMutil.cleanupElements(this.DOMelements.lines);
@@ -479,13 +492,13 @@ DataAxis.prototype._redrawLabels = function () {
};
DataAxis.prototype.convertValue = function (value) {
- var invertedValue = this.valueAtZero - value;
+ var invertedValue = this.valueAtBottom - value;
var convertedValue = invertedValue * this.conversionFactor;
return convertedValue;
};
DataAxis.prototype.screenToValue = function (x) {
- return this.valueAtZero - (x / this.conversionFactor);
+ return this.valueAtBottom - (x / this.conversionFactor);
};
/**
@@ -502,7 +515,7 @@ DataAxis.prototype._redrawLabel = function (y, text, orientation, className, cha
var label = DOMutil.getDOMElement('div',this.DOMelements.labels, this.dom.frame); //this.dom.redundant.labels.shift();
label.className = className;
label.innerHTML = text;
- if (orientation == 'left') {
+ if (orientation === 'left') {
label.style.left = '-' + this.options.labelOffsetX + 'px';
label.style.textAlign = "right";
}
@@ -530,12 +543,12 @@ DataAxis.prototype._redrawLabel = function (y, text, orientation, className, cha
* @param width
*/
DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
- if (this.master == true) {
+ if (this.master === true) {
var line = DOMutil.getDOMElement('div',this.DOMelements.lines, this.dom.lineContainer);//this.dom.redundant.lines.shift();
line.className = className;
line.innerHTML = '';
- if (orientation == 'left') {
+ if (orientation === 'left') {
line.style.left = (this.width - offset) + 'px';
}
else {
@@ -566,7 +579,7 @@ DataAxis.prototype._redrawTitle = function (orientation) {
util.addCssText(title, this.options.title[orientation].style);
}
- if (orientation == 'left') {
+ if (orientation === 'left') {
title.style.left = this.props.titleCharHeight + 'px';
}
else {
diff --git a/lib/timeline/component/Legend.js b/lib/timeline/component/Legend.js
index 3ee1c978..64be8b91 100644
--- a/lib/timeline/component/Legend.js
+++ b/lib/timeline/component/Legend.js
@@ -110,11 +110,15 @@ Legend.prototype.setOptions = function(options) {
Legend.prototype.redraw = function() {
var activeGroups = 0;
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
- activeGroups++;
- }
+ var groupArray = Object.keys(this.groups);
+ groupArray.sort(function (a,b) {
+ return (a < b ? -1 : 1);
+ })
+
+ for (var i = 0; i < groupArray.length; i++) {
+ var groupId = groupArray[i];
+ if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+ activeGroups++;
}
}
@@ -164,11 +168,10 @@ Legend.prototype.redraw = function() {
}
var content = '';
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
- content += this.groups[groupId].content + '
';
- }
+ for (var i = 0; i < groupArray.length; i++) {
+ var groupId = groupArray[i];
+ if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+ content += this.groups[groupId].content + '
';
}
}
this.dom.textArea.innerHTML = content;
@@ -178,6 +181,11 @@ Legend.prototype.redraw = function() {
Legend.prototype.drawLegendIcons = function() {
if (this.dom.frame.parentNode) {
+ var groupArray = Object.keys(this.groups);
+ groupArray.sort(function (a,b) {
+ return (a < b ? -1 : 1);
+ })
+
DOMutil.prepareElements(this.svgElements);
var padding = window.getComputedStyle(this.dom.frame).paddingTop;
var iconOffset = Number(padding.replace('px',''));
@@ -188,12 +196,11 @@ Legend.prototype.drawLegendIcons = function() {
this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
- this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
- y += iconHeight + this.options.iconSpacing;
- }
+ for (var i = 0; i < groupArray.length; i++) {
+ var groupId = groupArray[i];
+ if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
+ this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
+ y += iconHeight + this.options.iconSpacing;
}
}
diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js
index 0aed68b3..45bf9b6c 100644
--- a/lib/timeline/component/LineGraph.js
+++ b/lib/timeline/component/LineGraph.js
@@ -575,6 +575,7 @@ LineGraph.prototype.redraw = function(forceGraphUpdate) {
// update the height of the graph on each redraw of the graph.
if (this.updateSVGheight == true) {
+ console.log(this.options.graphHeight, this.body.domProps.centerContainer.height)
if (this.options.graphHeight != this.body.domProps.centerContainer.height + 'px') {
this.options.graphHeight = this.body.domProps.centerContainer.height + 'px';
this.svg.style.height = this.body.domProps.centerContainer.height + 'px';
@@ -890,8 +891,9 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
else {this.yAxisLeft.lineOffset = 0;}
resized = this.yAxisLeft.redraw() || resized;
- this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
+ this.yAxisRight.stepPixels = this.yAxisLeft.stepPixels;
this.yAxisRight.zeroCrossing = this.yAxisLeft.zeroCrossing;
+ this.yAxisRight.amountOfSteps = this.yAxisLeft.amountOfSteps;
resized = this.yAxisRight.redraw() || resized;
}
else {
diff --git a/lib/timeline/component/graph2d_types/bar.js b/lib/timeline/component/graph2d_types/bar.js
index 41ea08fb..07c12d41 100644
--- a/lib/timeline/component/graph2d_types/bar.js
+++ b/lib/timeline/component/graph2d_types/bar.js
@@ -49,8 +49,8 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
// combine all barchart data
for (i = 0; i < groupIds.length; i++) {
group = framework.groups[groupIds[i]];
- if (group.options.style == 'bar') {
- if (group.visible == true && (framework.options.groups.visibility[groupIds[i]] === undefined || framework.options.groups.visibility[groupIds[i]] == true)) {
+ if (group.options.style === 'bar') {
+ if (group.visible === true && (framework.options.groups.visibility[groupIds[i]] === undefined || framework.options.groups.visibility[groupIds[i]] === true)) {
for (j = 0; j < processedGroupData[groupIds[i]].length; j++) {
combinedData.push({
x: processedGroupData[groupIds[i]][j].x,
@@ -64,13 +64,14 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
}
}
- if (barPoints == 0) {return;}
+ if (barPoints === 0) {return;}
// sort by time and by group
combinedData.sort(function (a, b) {
- if (a.x == b.x) {
- return a.groupId - b.groupId;
- } else {
+ if (a.x === b.x) {
+ return a.groupId < b.groupId ? -1 : 1;
+ }
+ else {
return a.x - b.x;
}
});
@@ -98,20 +99,20 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
intersections[key].resolved += 1;
- if (group.options.barChart.handleOverlap == 'stack') {
+ if (group.options.barChart.handleOverlap === 'stack') {
heightOffset = intersections[key].accumulated;
intersections[key].accumulated += group.zeroPosition - combinedData[i].y;
}
- else if (group.options.barChart.handleOverlap == 'sideBySide') {
+ else if (group.options.barChart.handleOverlap === 'sideBySide') {
drawData.width = drawData.width / intersections[key].amount;
drawData.offset += (intersections[key].resolved) * drawData.width - (0.5*drawData.width * (intersections[key].amount+1));
- if (group.options.barChart.align == 'left') {drawData.offset -= 0.5*drawData.width;}
- else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
+ if (group.options.barChart.align === 'left') {drawData.offset -= 0.5*drawData.width;}
+ else if (group.options.barChart.align === 'right') {drawData.offset += 0.5*drawData.width;}
}
}
DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' vis-bar', framework.svgElements, framework.svg);
// draw points
- if (group.options.drawPoints.enabled == true) {
+ if (group.options.drawPoints.enabled === true) {
Points.draw([combinedData[i]], group, framework, drawData.offset);
//DOMutil.drawPoint(combinedData[i].x + drawData.offset, combinedData[i].y, group, framework.svgElements, framework.svg);
}
@@ -135,7 +136,7 @@ Bargraph._getDataIntersections = function (intersections, combinedData) {
if (i > 0) {
coreDistance = Math.min(coreDistance, Math.abs(combinedData[i - 1].x - combinedData[i].x));
}
- if (coreDistance == 0) {
+ if (coreDistance === 0) {
if (intersections[combinedData[i].x] === undefined) {
intersections[combinedData[i].x] = {amount: 0, resolved: 0, accumulated: 0};
}
@@ -160,10 +161,10 @@ Bargraph._getSafeDrawData = function (coreDistance, group, minWidth) {
width = coreDistance < minWidth ? minWidth : coreDistance;
offset = 0; // recalculate offset with the new width;
- if (group.options.barChart.align == 'left') {
+ if (group.options.barChart.align === 'left') {
offset -= 0.5 * coreDistance;
}
- else if (group.options.barChart.align == 'right') {
+ else if (group.options.barChart.align === 'right') {
offset += 0.5 * coreDistance;
}
}
@@ -171,10 +172,10 @@ Bargraph._getSafeDrawData = function (coreDistance, group, minWidth) {
// default settings
width = group.options.barChart.width;
offset = 0;
- if (group.options.barChart.align == 'left') {
+ if (group.options.barChart.align === 'left') {
offset -= 0.5 * group.options.barChart.width;
}
- else if (group.options.barChart.align == 'right') {
+ else if (group.options.barChart.align === 'right') {
offset += 0.5 * group.options.barChart.width;
}
}
@@ -186,9 +187,10 @@ Bargraph.getStackedBarYRange = function(barCombinedData, groupRanges, groupIds,
if (barCombinedData.length > 0) {
// sort by time and by group
barCombinedData.sort(function (a, b) {
- if (a.x == b.x) {
- return a.groupId - b.groupId;
- } else {
+ if (a.x === b.x) {
+ return a.groupId < b.groupId ? -1 : 1;
+ }
+ else {
return a.x - b.x;
}
});