From 4d57a6df7cf3d841e76f04890c86e152c0eee97f Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Thu, 30 Apr 2015 13:19:56 +0200 Subject: [PATCH 1/2] unified options with timeline, updated docs and configurator --- dist/vis.js | 2925 +++++++++-------- docs/network/canvas.html | 11 +- docs/network/interaction.html | 7 +- docs/network/manipulation.html | 4 +- docs/network/selection.html | 4 +- docs/network/view.html | 35 +- examples/graph2d/05_bothAxis.html | 3 +- examples/graph2d/10_barsSideBySide.html | 3 +- examples/graph2d/11_barsSideBySideGroups.html | 5 +- examples/network/01_basic_usage.html | 3 +- lib/network/Network.js | 2 +- lib/network/modules/Canvas.js | 28 +- lib/network/modules/ConfigurationSystem.js | 19 +- lib/network/modules/InteractionHandler.js | 36 +- lib/network/modules/ManipulationSystem.js | 66 +- lib/network/modules/SelectionHandler.js | 3 +- lib/network/modules/View.js | 2 +- lib/network/modules/components/AllOptions.js | 27 +- lib/timeline/component/GraphGroup.js | 4 + lib/timeline/component/LineGraph.js | 46 +- lib/timeline/component/graph2d_types/bar.js | 54 +- lib/timeline/component/graph2d_types/line.js | 88 + 22 files changed, 1780 insertions(+), 1595 deletions(-) diff --git a/dist/vis.js b/dist/vis.js index 2ed5fff0..83ed5cdf 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -5,7 +5,7 @@ * A dynamic, browser-based visualization library. * * @version 4.0.0-SNAPSHOT - * @date 2015-04-29 + * @date 2015-04-30 * * @license * Copyright (C) 2011-2014 Almende B.V, http://almende.com @@ -166,7 +166,7 @@ return /******/ (function(modules) { // webpackBootstrap 'use strict'; var moment = __webpack_require__(40); - var uuid = __webpack_require__(109); + var uuid = __webpack_require__(42); /** * Test whether given object is a number @@ -3211,7 +3211,7 @@ return /******/ (function(modules) { // webpackBootstrap 'use strict'; - var Emitter = __webpack_require__(42); + var Emitter = __webpack_require__(43); var DataSet = __webpack_require__(3); var DataView = __webpack_require__(4); var util = __webpack_require__(1); @@ -6376,13 +6376,13 @@ return /******/ (function(modules) { // webpackBootstrap 'use strict'; - var Emitter = __webpack_require__(42); + var Emitter = __webpack_require__(43); var Hammer = __webpack_require__(41); var util = __webpack_require__(1); var DataSet = __webpack_require__(3); var DataView = __webpack_require__(4); var Range = __webpack_require__(17); - var Core = __webpack_require__(43); + var Core = __webpack_require__(44); var TimeAxis = __webpack_require__(35); var CurrentTime = __webpack_require__(26); var CustomTime = __webpack_require__(27); @@ -6768,13 +6768,13 @@ return /******/ (function(modules) { // webpackBootstrap 'use strict'; - var Emitter = __webpack_require__(42); + var Emitter = __webpack_require__(43); var Hammer = __webpack_require__(41); var util = __webpack_require__(1); var DataSet = __webpack_require__(3); var DataView = __webpack_require__(4); var Range = __webpack_require__(17); - var Core = __webpack_require__(43); + var Core = __webpack_require__(44); var TimeAxis = __webpack_require__(35); var CurrentTime = __webpack_require__(26); var CustomTime = __webpack_require__(27); @@ -7807,7 +7807,7 @@ return /******/ (function(modules) { // webpackBootstrap 'use strict'; var util = __webpack_require__(1); - var hammerUtil = __webpack_require__(44); + var hammerUtil = __webpack_require__(45); var moment = __webpack_require__(40); var Component = __webpack_require__(25); var DateUtil = __webpack_require__(15); @@ -10557,7 +10557,7 @@ return /******/ (function(modules) { // webpackBootstrap var util = __webpack_require__(1); var Component = __webpack_require__(25); var moment = __webpack_require__(40); - var locales = __webpack_require__(45); + var locales = __webpack_require__(46); /** * A current time bar @@ -10734,7 +10734,7 @@ return /******/ (function(modules) { // webpackBootstrap var util = __webpack_require__(1); var Component = __webpack_require__(25); var moment = __webpack_require__(40); - var locales = __webpack_require__(45); + var locales = __webpack_require__(46); /** * A custom time bar @@ -11558,9 +11558,9 @@ return /******/ (function(modules) { // webpackBootstrap var util = __webpack_require__(1); var DOMutil = __webpack_require__(2); - var Line = __webpack_require__(46); - var Bar = __webpack_require__(47); - var Points = __webpack_require__(48); + var Line = __webpack_require__(47); + var Bar = __webpack_require__(48); + var Points = __webpack_require__(49); /** * /** @@ -11734,6 +11734,10 @@ return /******/ (function(modules) { // webpackBootstrap return this.type.getYRange(groupData); }; + GraphGroup.prototype.getData = function (groupData) { + return this.type.getData(groupData); + }; + GraphGroup.prototype.draw = function (dataset, group, framework) { this.type.draw(dataset, group, framework); }; @@ -14216,7 +14220,8 @@ return /******/ (function(modules) { // webpackBootstrap var DataAxis = __webpack_require__(28); var GraphGroup = __webpack_require__(29); var Legend = __webpack_require__(33); - var BarGraphFunctions = __webpack_require__(47); + var BarFunctions = __webpack_require__(48); + var LineFunctions = __webpack_require__(47); var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items @@ -14236,6 +14241,7 @@ return /******/ (function(modules) { // webpackBootstrap defaultGroup: 'default', sort: true, sampling: true, + stack: false, graphHeight: '400px', shaded: { enabled: false, @@ -14391,7 +14397,7 @@ return /******/ (function(modules) { // webpackBootstrap */ LineGraph.prototype.setOptions = function (options) { if (options) { - var fields = ['sampling', 'defaultGroup', 'height', 'graphHeight', 'yAxisOrientation', 'style', 'barChart', 'dataAxis', 'sort', 'groups']; + var fields = ['sampling', 'defaultGroup', 'stack', 'height', 'graphHeight', 'yAxisOrientation', 'style', 'barChart', 'dataAxis', 'sort', 'groups']; if (options.graphHeight === undefined && options.height !== undefined && this.body.domProps.centerContainer.height !== undefined) { this.updateSVGheight = true; this.updateSVGheightOnResize = true; @@ -14757,7 +14763,6 @@ return /******/ (function(modules) { // webpackBootstrap // 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'; @@ -14862,7 +14867,7 @@ return /******/ (function(modules) { // webpackBootstrap group.draw(processedGroupData[groupIds[i]], group, this.framework); } } - BarGraphFunctions.draw(groupIds, processedGroupData, this.framework); + BarFunctions.draw(groupIds, processedGroupData, this.framework); } } } @@ -14964,8 +14969,8 @@ return /******/ (function(modules) { // webpackBootstrap */ LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) { var groupData, group, i; - var barCombinedDataLeft = []; - var barCombinedDataRight = []; + var combinedDataLeft = []; + var combinedDataRight = []; var options; if (groupIds.length > 0) { for (i = 0; i < groupIds.length; i++) { @@ -14974,11 +14979,11 @@ return /******/ (function(modules) { // webpackBootstrap if (groupData.length > 0) { group = this.groups[groupIds[i]]; // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups. - if (options.barChart.handleOverlap == 'stack' && options.style == 'bar') { + if (options.stack === true) { if (options.yAxisOrientation == 'left') { - barCombinedDataLeft = barCombinedDataLeft.concat(group.getYRange(groupData)); + combinedDataLeft = combinedDataLeft.concat(group.getData(groupData)); } else { - barCombinedDataRight = barCombinedDataRight.concat(group.getYRange(groupData)); + combinedDataRight = combinedDataRight.concat(group.getData(groupData)); } } else { groupRanges[groupIds[i]] = group.getYRange(groupData, groupIds[i]); @@ -14987,8 +14992,11 @@ return /******/ (function(modules) { // webpackBootstrap } // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups. - BarGraphFunctions.getStackedBarYRange(barCombinedDataLeft, groupRanges, groupIds, '__barchartLeft', 'left'); - BarGraphFunctions.getStackedBarYRange(barCombinedDataRight, groupRanges, groupIds, '__barchartRight', 'right'); + BarFunctions.getStackedYRange(combinedDataLeft, groupRanges, groupIds, '__barStackLeft', 'left'); + BarFunctions.getStackedYRange(combinedDataRight, groupRanges, groupIds, '__barStackRight', 'right'); + // if line graphs are stacked, their range need to be handled differently and accumulated over all groups. + LineFunctions.getStackedYRange(combinedDataLeft, groupRanges, groupIds, '__lineStackLeft', 'left'); + LineFunctions.getStackedYRange(combinedDataRight, groupRanges, groupIds, '__lineStackRight', 'right'); } }; @@ -15079,11 +15087,11 @@ return /******/ (function(modules) { // webpackBootstrap } // clean the accumulated lists - if (groupIds.indexOf('__barchartLeft') != -1) { - groupIds.splice(groupIds.indexOf('__barchartLeft'), 1); - } - if (groupIds.indexOf('__barchartRight') != -1) { - groupIds.splice(groupIds.indexOf('__barchartRight'), 1); + var tempGroups = ['__barStackLeft', '__barStackRight', '__lineStackLeft', '__lineStackRight']; + for (var i = 0; i < tempGroups.length; i++) { + if (groupIds.indexOf(tempGroups[i]) != -1) { + groupIds.splice(groupIds.indexOf(tempGroups[i]), 1); + } } return resized; @@ -15157,14 +15165,7 @@ return /******/ (function(modules) { // webpackBootstrap } for (var i = 0; i < datapoints.length; i++) { - var labelValue; - //if (datapoints[i].label) { - // labelValue = datapoints[i].label; - //} - //else { - // labelValue = null; - //} - labelValue = datapoints[i].label ? datapoints[i].label : null; + var labelValue = datapoints[i].label ? datapoints[i].label : null; xValue = toScreen(datapoints[i].x) + this.props.width; yValue = Math.round(axis.convertValue(datapoints[i].y)); extractedData.push({ x: xValue, y: yValue, label: labelValue }); @@ -15620,70 +15621,70 @@ return /******/ (function(modules) { // webpackBootstrap var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; - var _Groups = __webpack_require__(49); + var _Groups = __webpack_require__(50); var _Groups2 = _interopRequireWildcard(_Groups); - var _NodesHandler = __webpack_require__(50); + var _NodesHandler = __webpack_require__(51); var _NodesHandler2 = _interopRequireWildcard(_NodesHandler); - var _EdgesHandler = __webpack_require__(51); + var _EdgesHandler = __webpack_require__(52); var _EdgesHandler2 = _interopRequireWildcard(_EdgesHandler); - var _PhysicsEngine = __webpack_require__(52); + var _PhysicsEngine = __webpack_require__(53); var _PhysicsEngine2 = _interopRequireWildcard(_PhysicsEngine); - var _ClusterEngine = __webpack_require__(53); + var _ClusterEngine = __webpack_require__(54); var _ClusterEngine2 = _interopRequireWildcard(_ClusterEngine); - var _CanvasRenderer = __webpack_require__(54); + var _CanvasRenderer = __webpack_require__(55); var _CanvasRenderer2 = _interopRequireWildcard(_CanvasRenderer); - var _Canvas = __webpack_require__(55); + var _Canvas = __webpack_require__(56); var _Canvas2 = _interopRequireWildcard(_Canvas); - var _View = __webpack_require__(56); + var _View = __webpack_require__(57); var _View2 = _interopRequireWildcard(_View); - var _InteractionHandler = __webpack_require__(57); + var _InteractionHandler = __webpack_require__(58); var _InteractionHandler2 = _interopRequireWildcard(_InteractionHandler); - var _SelectionHandler = __webpack_require__(58); + var _SelectionHandler = __webpack_require__(59); var _SelectionHandler2 = _interopRequireWildcard(_SelectionHandler); - var _LayoutEngine = __webpack_require__(59); + var _LayoutEngine = __webpack_require__(60); var _LayoutEngine2 = _interopRequireWildcard(_LayoutEngine); - var _ManipulationSystem = __webpack_require__(60); + var _ManipulationSystem = __webpack_require__(61); var _ManipulationSystem2 = _interopRequireWildcard(_ManipulationSystem); - var _ConfigurationSystem = __webpack_require__(61); + var _ConfigurationSystem = __webpack_require__(62); var _ConfigurationSystem2 = _interopRequireWildcard(_ConfigurationSystem); - var _Validator = __webpack_require__(62); + var _Validator = __webpack_require__(63); var _Validator2 = _interopRequireWildcard(_Validator); - var _allOptions = __webpack_require__(63); + var _allOptions = __webpack_require__(64); var _allOptions2 = _interopRequireWildcard(_allOptions); // Load custom shapes into CanvasRenderingContext2D - __webpack_require__(64); + __webpack_require__(65); - var Emitter = __webpack_require__(42); + var Emitter = __webpack_require__(43); var Hammer = __webpack_require__(41); var util = __webpack_require__(1); var DataSet = __webpack_require__(3); @@ -15691,7 +15692,7 @@ return /******/ (function(modules) { // webpackBootstrap var dotparser = __webpack_require__(38); var gephiParser = __webpack_require__(39); var Images = __webpack_require__(37); - var Activator = __webpack_require__(65); + var Activator = __webpack_require__(66); /** * @constructor Network @@ -16160,8 +16161,8 @@ return /******/ (function(modules) { // webpackBootstrap Network.prototype.moveTo = function () { this.view.moveTo.apply(this.view, arguments); }; - Network.prototype.focusOnNode = function () { - this.view.focusOnNode.apply(this.view, arguments); + Network.prototype.focus = function () { + this.view.focus.apply(this.view, arguments); }; Network.prototype.releaseNode = function () { this.view.releaseNode.apply(this.view, arguments); @@ -17137,7 +17138,7 @@ return /******/ (function(modules) { // webpackBootstrap // use this instance. Else, load via commonjs. 'use strict'; - module.exports = typeof window !== 'undefined' && window.moment || __webpack_require__(66); + module.exports = typeof window !== 'undefined' && window.moment || __webpack_require__(67); /***/ }, /* 41 */ @@ -17148,8 +17149,8 @@ return /******/ (function(modules) { // webpackBootstrap 'use strict'; if (typeof window !== 'undefined') { - var propagating = __webpack_require__(67); - var Hammer = window.Hammer || __webpack_require__(68); + var propagating = __webpack_require__(68); + var Hammer = window.Hammer || __webpack_require__(69); module.exports = propagating(Hammer, { preventDefault: 'mouse' }); @@ -17163,6 +17164,221 @@ return /******/ (function(modules) { // webpackBootstrap /* 42 */ /***/ function(module, exports, __webpack_require__) { + /* WEBPACK VAR INJECTION */(function(global) {'use strict'; + + var _rng; + + var globalVar = window !== undefined ? window : global; + if (globalVar.crypto && crypto.getRandomValues) { + // WHATWG crypto-based RNG - http://wiki.whatwg.org/wiki/Crypto + // Moderately fast, high quality + var _rnds8 = new Uint8Array(16); + _rng = function whatwgRNG() { + crypto.getRandomValues(_rnds8); + return _rnds8; + }; + } + + if (!_rng) { + // Math.random()-based (RNG) + // + // If all else fails, use Math.random(). It's fast, but is of unspecified + // quality. + var _rnds = new Array(16); + _rng = function () { + for (var i = 0, r; i < 16; i++) { + if ((i & 3) === 0) r = Math.random() * 4294967296; + _rnds[i] = r >>> ((i & 3) << 3) & 255; + } + + return _rnds; + }; + } + + // uuid.js + // + // Copyright (c) 2010-2012 Robert Kieffer + // MIT License - http://opensource.org/licenses/mit-license.php + + // Unique ID creation requires a high quality random # generator. We feature + // detect to determine the best RNG source, normalizing to a function that + // returns 128-bits of randomness, since that's what's usually required + + //var _rng = require('./rng'); + + // Maps for number <-> hex string conversion + var _byteToHex = []; + var _hexToByte = {}; + for (var i = 0; i < 256; i++) { + _byteToHex[i] = (i + 256).toString(16).substr(1); + _hexToByte[_byteToHex[i]] = i; + } + + // **`parse()` - Parse a UUID into it's component bytes** + function parse(s, buf, offset) { + var i = buf && offset || 0, + ii = 0; + + buf = buf || []; + s.toLowerCase().replace(/[0-9a-f]{2}/g, function (oct) { + if (ii < 16) { + // Don't overflow! + buf[i + ii++] = _hexToByte[oct]; + } + }); + + // Zero out remaining bytes if string was short + while (ii < 16) { + buf[i + ii++] = 0; + } + + return buf; + } + + // **`unparse()` - Convert UUID byte array (ala parse()) into a string** + function unparse(buf, offset) { + var i = offset || 0, + bth = _byteToHex; + return bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]] + '-' + bth[buf[i++]] + bth[buf[i++]] + '-' + bth[buf[i++]] + bth[buf[i++]] + '-' + bth[buf[i++]] + bth[buf[i++]] + '-' + bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]]; + } + + // **`v1()` - Generate time-based UUID** + // + // Inspired by https://github.com/LiosK/UUID.js + // and http://docs.python.org/library/uuid.html + + // random #'s we need to init node and clockseq + var _seedBytes = _rng(); + + // Per 4.5, create and 48-bit node id, (47 random bits + multicast bit = 1) + var _nodeId = [_seedBytes[0] | 1, _seedBytes[1], _seedBytes[2], _seedBytes[3], _seedBytes[4], _seedBytes[5]]; + + // Per 4.2.2, randomize (14 bit) clockseq + var _clockseq = (_seedBytes[6] << 8 | _seedBytes[7]) & 16383; + + // Previous uuid creation time + var _lastMSecs = 0, + _lastNSecs = 0; + + // See https://github.com/broofa/node-uuid for API details + function v1(options, buf, offset) { + var i = buf && offset || 0; + var b = buf || []; + + options = options || {}; + + var clockseq = options.clockseq !== undefined ? options.clockseq : _clockseq; + + // UUID timestamps are 100 nano-second units since the Gregorian epoch, + // (1582-10-15 00:00). JSNumbers aren't precise enough for this, so + // time is handled internally as 'msecs' (integer milliseconds) and 'nsecs' + // (100-nanoseconds offset from msecs) since unix epoch, 1970-01-01 00:00. + var msecs = options.msecs !== undefined ? options.msecs : new Date().getTime(); + + // Per 4.2.1.2, use count of uuid's generated during the current clock + // cycle to simulate higher resolution clock + var nsecs = options.nsecs !== undefined ? options.nsecs : _lastNSecs + 1; + + // Time since last uuid creation (in msecs) + var dt = msecs - _lastMSecs + (nsecs - _lastNSecs) / 10000; + + // Per 4.2.1.2, Bump clockseq on clock regression + if (dt < 0 && options.clockseq === undefined) { + clockseq = clockseq + 1 & 16383; + } + + // Reset nsecs if clock regresses (new clockseq) or we've moved onto a new + // time interval + if ((dt < 0 || msecs > _lastMSecs) && options.nsecs === undefined) { + nsecs = 0; + } + + // Per 4.2.1.2 Throw error if too many uuids are requested + if (nsecs >= 10000) { + throw new Error('uuid.v1(): Can\'t create more than 10M uuids/sec'); + } + + _lastMSecs = msecs; + _lastNSecs = nsecs; + _clockseq = clockseq; + + // Per 4.1.4 - Convert from unix epoch to Gregorian epoch + msecs += 12219292800000; + + // `time_low` + var tl = ((msecs & 268435455) * 10000 + nsecs) % 4294967296; + b[i++] = tl >>> 24 & 255; + b[i++] = tl >>> 16 & 255; + b[i++] = tl >>> 8 & 255; + b[i++] = tl & 255; + + // `time_mid` + var tmh = msecs / 4294967296 * 10000 & 268435455; + b[i++] = tmh >>> 8 & 255; + b[i++] = tmh & 255; + + // `time_high_and_version` + b[i++] = tmh >>> 24 & 15 | 16; // include version + b[i++] = tmh >>> 16 & 255; + + // `clock_seq_hi_and_reserved` (Per 4.2.2 - include variant) + b[i++] = clockseq >>> 8 | 128; + + // `clock_seq_low` + b[i++] = clockseq & 255; + + // `node` + var node = options.node || _nodeId; + for (var n = 0; n < 6; n++) { + b[i + n] = node[n]; + } + + return buf ? buf : unparse(b); + } + + // **`v4()` - Generate random UUID** + + // See https://github.com/broofa/node-uuid for API details + function v4(options, buf, offset) { + // Deprecated - 'format' argument, as supported in v1.2 + var i = buf && offset || 0; + + if (typeof options == 'string') { + buf = options == 'binary' ? new Array(16) : null; + options = null; + } + options = options || {}; + + var rnds = options.random || (options.rng || _rng)(); + + // Per 4.4, set bits for version and `clock_seq_hi_and_reserved` + rnds[6] = rnds[6] & 15 | 64; + rnds[8] = rnds[8] & 63 | 128; + + // Copy bytes to buffer, if provided + if (buf) { + for (var ii = 0; ii < 16; ii++) { + buf[i + ii] = rnds[ii]; + } + } + + return buf || unparse(rnds); + } + + // Export public API + var uuid = v4; + uuid.v1 = v1; + uuid.v4 = v4; + uuid.parse = parse; + uuid.unparse = unparse; + + module.exports = uuid; + /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()))) + +/***/ }, +/* 43 */ +/***/ function(module, exports, __webpack_require__) { + /** * Expose `Emitter`. @@ -17330,21 +17546,21 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 43 */ +/* 44 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; - var Emitter = __webpack_require__(42); + var Emitter = __webpack_require__(43); var Hammer = __webpack_require__(41); - var hammerUtil = __webpack_require__(44); + var hammerUtil = __webpack_require__(45); var util = __webpack_require__(1); var DataSet = __webpack_require__(3); var DataView = __webpack_require__(4); var Range = __webpack_require__(17); var ItemSet = __webpack_require__(32); var TimeAxis = __webpack_require__(35); - var Activator = __webpack_require__(65); + var Activator = __webpack_require__(66); var DateUtil = __webpack_require__(15); var CustomTime = __webpack_require__(27); @@ -18346,7 +18562,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = Core; /***/ }, -/* 44 */ +/* 45 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -18418,7 +18634,7 @@ return /******/ (function(modules) { // webpackBootstrap exports.offRelease = exports.offTouch; /***/ }, -/* 45 */ +/* 46 */ /***/ function(module, exports, __webpack_require__) { // English @@ -18440,19 +18656,31 @@ return /******/ (function(modules) { // webpackBootstrap exports.nl_BE = exports.nl; /***/ }, -/* 46 */ +/* 47 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; var DOMutil = __webpack_require__(2); - var Points = __webpack_require__(48); + var Points = __webpack_require__(49); function Line(groupId, options) { this.groupId = groupId; this.options = options; } + Line.prototype.getData = function (groupData) { + var combinedData = []; + for (var j = 0; j < groupData.length; j++) { + combinedData.push({ + x: groupData[j].x, + y: groupData[j].y, + groupId: this.groupId + }); + } + return combinedData; + }; + Line.prototype.getYRange = function (groupData) { var yMin = groupData[0].y; var yMax = groupData[0].y; @@ -18463,6 +18691,79 @@ return /******/ (function(modules) { // webpackBootstrap return { min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation }; }; + Line.getStackedYRange = function (combinedData, groupRanges, groupIds, groupLabel, orientation) { + if (combinedData.length > 0) { + // sort by time and by group + combinedData.sort(function (a, b) { + if (a.x === b.x) { + return a.groupId < b.groupId ? -1 : 1; + } else { + return a.x - b.x; + } + }); + var intersections = {}; + + Line._getDataIntersections(intersections, combinedData); + groupRanges[groupLabel] = Line._getStackedYRange(intersections, combinedData); + groupRanges[groupLabel].yAxisOrientation = orientation; + groupIds.push(groupLabel); + } + }; + + Line._getStackedYRange = function (intersections, combinedData) { + var key; + var yMin = combinedData[0].y; + var yMax = combinedData[0].y; + for (var i = 0; i < combinedData.length; i++) { + key = combinedData[i].x; + if (intersections[key] === undefined) { + yMin = yMin > combinedData[i].y ? combinedData[i].y : yMin; + yMax = yMax < combinedData[i].y ? combinedData[i].y : yMax; + } else { + if (combinedData[i].y < 0) { + intersections[key].accumulatedNegative += combinedData[i].y; + } else { + intersections[key].accumulatedPositive += combinedData[i].y; + } + } + } + for (var xpos in intersections) { + if (intersections.hasOwnProperty(xpos)) { + yMin = yMin > intersections[xpos].accumulatedNegative ? intersections[xpos].accumulatedNegative : yMin; + yMin = yMin > intersections[xpos].accumulatedPositive ? intersections[xpos].accumulatedPositive : yMin; + yMax = yMax < intersections[xpos].accumulatedNegative ? intersections[xpos].accumulatedNegative : yMax; + yMax = yMax < intersections[xpos].accumulatedPositive ? intersections[xpos].accumulatedPositive : yMax; + } + } + + return { min: yMin, max: yMax }; + }; + + /** + * Fill the intersections object with counters of how many datapoints share the same x coordinates + * @param intersections + * @param combinedData + * @private + */ + Line._getDataIntersections = function (intersections, combinedData) { + // get intersections + var coreDistance; + for (var i = 0; i < combinedData.length; i++) { + if (i + 1 < combinedData.length) { + coreDistance = Math.abs(combinedData[i + 1].x - combinedData[i].x); + } + if (i > 0) { + coreDistance = Math.min(coreDistance, Math.abs(combinedData[i - 1].x - combinedData[i].x)); + } + if (coreDistance === 0) { + if (intersections[combinedData[i].x] === undefined) { + intersections[combinedData[i].x] = { amount: 0, resolved: 0, accumulatedPositive: 0, accumulatedNegative: 0 }; + } + intersections[combinedData[i].x].amount += 1; + } + } + }; + /** * draw a line graph * @@ -18650,13 +18951,13 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = Line; /***/ }, -/* 47 */ +/* 48 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; var DOMutil = __webpack_require__(2); - var Points = __webpack_require__(48); + var Points = __webpack_require__(49); function Bargraph(groupId, options) { this.groupId = groupId; @@ -18664,25 +18965,25 @@ return /******/ (function(modules) { // webpackBootstrap } Bargraph.prototype.getYRange = function (groupData) { - if (this.options.barChart.handleOverlap != 'stack') { - var yMin = groupData[0].y; - var yMax = groupData[0].y; - for (var j = 0; j < groupData.length; j++) { - yMin = yMin > groupData[j].y ? groupData[j].y : yMin; - yMax = yMax < groupData[j].y ? groupData[j].y : yMax; - } - return { min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation }; - } else { - var barCombinedData = []; - for (var j = 0; j < groupData.length; j++) { - barCombinedData.push({ - x: groupData[j].x, - y: groupData[j].y, - groupId: this.groupId - }); - } - return barCombinedData; + var yMin = groupData[0].y; + var yMax = groupData[0].y; + for (var j = 0; j < groupData.length; j++) { + yMin = yMin > groupData[j].y ? groupData[j].y : yMin; + yMax = yMax < groupData[j].y ? groupData[j].y : yMax; + } + return { min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation }; + }; + + Bargraph.prototype.getData = function (groupData) { + var combinedData = []; + for (var j = 0; j < groupData.length; j++) { + combinedData.push({ + x: groupData[j].x, + y: groupData[j].y, + groupId: this.groupId + }); } + return combinedData; }; /** @@ -18761,7 +19062,7 @@ return /******/ (function(modules) { // webpackBootstrap drawData = Bargraph._getSafeDrawData(coreDistance, group, minWidth); intersections[key].resolved += 1; - if (group.options.barChart.handleOverlap === 'stack') { + if (group.options.stack === true) { if (combinedData[i].y < group.zeroPosition) { heightOffset = intersections[key].accumulatedNegative; intersections[key].accumulatedNegative += group.zeroPosition - combinedData[i].y; @@ -18769,7 +19070,7 @@ return /******/ (function(modules) { // webpackBootstrap heightOffset = intersections[key].accumulatedPositive; intersections[key].accumulatedPositive += group.zeroPosition - combinedData[i].y; } - } else if (group.options.barChart.handleOverlap === 'sideBySide') { + } else if (group.options.barChart.sideBySide === true) { 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') { @@ -18847,10 +19148,10 @@ return /******/ (function(modules) { // webpackBootstrap return { width: width, offset: offset }; }; - Bargraph.getStackedBarYRange = function (barCombinedData, groupRanges, groupIds, groupLabel, orientation) { - if (barCombinedData.length > 0) { + Bargraph.getStackedYRange = function (combinedData, groupRanges, groupIds, groupLabel, orientation) { + if (combinedData.length > 0) { // sort by time and by group - barCombinedData.sort(function (a, b) { + combinedData.sort(function (a, b) { if (a.x === b.x) { return a.groupId < b.groupId ? -1 : 1; } else { @@ -18859,14 +19160,14 @@ return /******/ (function(modules) { // webpackBootstrap }); var intersections = {}; - Bargraph._getDataIntersections(intersections, barCombinedData); - groupRanges[groupLabel] = Bargraph._getStackedBarYRange(intersections, barCombinedData); + Bargraph._getDataIntersections(intersections, combinedData); + groupRanges[groupLabel] = Bargraph._getStackedYRange(intersections, combinedData); groupRanges[groupLabel].yAxisOrientation = orientation; groupIds.push(groupLabel); } }; - Bargraph._getStackedBarYRange = function (intersections, combinedData) { + Bargraph._getStackedYRange = function (intersections, combinedData) { var key; var yMin = combinedData[0].y; var yMax = combinedData[0].y; @@ -18898,7 +19199,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = Bargraph; /***/ }, -/* 48 */ +/* 49 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -18945,7 +19246,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = Points; /***/ }, -/* 49 */ +/* 50 */ /***/ function(module, exports, __webpack_require__) { "use strict"; @@ -19086,7 +19387,7 @@ return /******/ (function(modules) { // webpackBootstrap // 20:bright red /***/ }, -/* 50 */ +/* 51 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -19101,11 +19402,11 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _Node = __webpack_require__(69); + var _Node = __webpack_require__(70); var _Node2 = _interopRequireWildcard(_Node); - var _Label = __webpack_require__(70); + var _Label = __webpack_require__(71); var _Label2 = _interopRequireWildcard(_Label); @@ -19559,7 +19860,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 51 */ +/* 52 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -19574,11 +19875,11 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _Edge = __webpack_require__(71); + var _Edge = __webpack_require__(72); var _Edge2 = _interopRequireWildcard(_Edge); - var _Label = __webpack_require__(70); + var _Label = __webpack_require__(71); var _Label2 = _interopRequireWildcard(_Label); @@ -19982,7 +20283,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 52 */ +/* 53 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -19997,27 +20298,27 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _BarnesHutSolver = __webpack_require__(72); + var _BarnesHutSolver = __webpack_require__(73); var _BarnesHutSolver2 = _interopRequireWildcard(_BarnesHutSolver); - var _Repulsion = __webpack_require__(73); + var _Repulsion = __webpack_require__(74); var _Repulsion2 = _interopRequireWildcard(_Repulsion); - var _HierarchicalRepulsion = __webpack_require__(74); + var _HierarchicalRepulsion = __webpack_require__(75); var _HierarchicalRepulsion2 = _interopRequireWildcard(_HierarchicalRepulsion); - var _SpringSolver = __webpack_require__(75); + var _SpringSolver = __webpack_require__(76); var _SpringSolver2 = _interopRequireWildcard(_SpringSolver); - var _HierarchicalSpringSolver = __webpack_require__(76); + var _HierarchicalSpringSolver = __webpack_require__(77); var _HierarchicalSpringSolver2 = _interopRequireWildcard(_HierarchicalSpringSolver); - var _CentralGravitySolver = __webpack_require__(77); + var _CentralGravitySolver = __webpack_require__(78); var _CentralGravitySolver2 = _interopRequireWildcard(_CentralGravitySolver); @@ -20557,7 +20858,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 53 */ +/* 54 */ /***/ function(module, exports, __webpack_require__) { "use strict"; @@ -20572,7 +20873,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _Cluster = __webpack_require__(78); + var _Cluster = __webpack_require__(79); var _Cluster2 = _interopRequireWildcard(_Cluster); @@ -21209,7 +21510,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports["default"]; /***/ }, -/* 54 */ +/* 55 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -21538,7 +21839,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 55 */ +/* 56 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -21551,7 +21852,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); var Hammer = __webpack_require__(41); - var hammerUtil = __webpack_require__(44); + var hammerUtil = __webpack_require__(45); var util = __webpack_require__(1); @@ -21569,11 +21870,13 @@ return /******/ (function(modules) { // webpackBootstrap this.body = body; this.pixelRatio = 1; + this.resizeTimer = undefined; this.options = {}; this.defaultOptions = { width: '100%', - height: '100%' + height: '100%', + autoResize: true }; util.extend(this.options, this.defaultOptions); @@ -21597,16 +21900,14 @@ return /******/ (function(modules) { // webpackBootstrap this.body.emitter.on('destroy', function () { _this.hammerFrame.destroy(); _this.hammer.destroy(); + _this._cleanUp(); }); - - // 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) { + var _this2 = this; + if (options !== undefined) { if (options.width !== undefined) { this.options.width = this._prepareValue(options.width); @@ -21615,6 +21916,30 @@ return /******/ (function(modules) { // webpackBootstrap this.options.height = this._prepareValue(options.height); } } + + if (this.options.autoResize === true) { + // automatically adapt to a changing size of the browser. + this._cleanUp(); + this.resizeTimer = setInterval(function () { + _this2.setSize();_this2.body.emitter.emit('_requestRedraw'); + }, 1000); + util.addEventListener(window, 'resize', this._onResize); + } + } + }, { + key: '_cleanUp', + value: function _cleanUp() { + // automatically adapt to a changing size of the browser. + if (this.resizeTimer !== undefined) { + clearInterval(this.resizeTimer); + } + util.removeEventListener(window, 'resize', this._onResize); + } + }, { + key: '_onResize', + value: function _onResize() { + this.setSize(); + this.body.emitter.emit('_redraw'); } }, { key: '_prepareValue', @@ -21684,7 +22009,7 @@ return /******/ (function(modules) { // webpackBootstrap * @private */ value: function _bindHammer() { - var _this2 = this; + var _this3 = this; if (this.hammer !== undefined) { this.hammer.destroy(); @@ -21697,48 +22022,48 @@ return /******/ (function(modules) { // webpackBootstrap this.hammer.get('pinch').set({ enable: true }); hammerUtil.onTouch(this.hammer, function (event) { - _this2.body.eventListeners.onTouch(event); + _this3.body.eventListeners.onTouch(event); }); this.hammer.on('tap', function (event) { - _this2.body.eventListeners.onTap(event); + _this3.body.eventListeners.onTap(event); }); this.hammer.on('doubletap', function (event) { - _this2.body.eventListeners.onDoubleTap(event); + _this3.body.eventListeners.onDoubleTap(event); }); this.hammer.on('press', function (event) { - _this2.body.eventListeners.onHold(event); + _this3.body.eventListeners.onHold(event); }); this.hammer.on('panstart', function (event) { - _this2.body.eventListeners.onDragStart(event); + _this3.body.eventListeners.onDragStart(event); }); this.hammer.on('panmove', function (event) { - _this2.body.eventListeners.onDrag(event); + _this3.body.eventListeners.onDrag(event); }); this.hammer.on('panend', function (event) { - _this2.body.eventListeners.onDragEnd(event); + _this3.body.eventListeners.onDragEnd(event); }); this.hammer.on('pinch', function (event) { - _this2.body.eventListeners.onPinch(event); + _this3.body.eventListeners.onPinch(event); }); // 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); + _this3.body.eventListeners.onMouseWheel(event); }); this.frame.canvas.addEventListener('DOMMouseScroll', function (event) { - _this2.body.eventListeners.onMouseWheel(event); + _this3.body.eventListeners.onMouseWheel(event); }); this.frame.canvas.addEventListener('mousemove', function (event) { - _this2.body.eventListeners.onMouseMove(event); + _this3.body.eventListeners.onMouseMove(event); }); this.frame.canvas.addEventListener('contextmenu', function (event) { - _this2.body.eventListeners.onContext(event); + _this3.body.eventListeners.onContext(event); }); this.hammerFrame = new Hammer(this.frame); hammerUtil.onRelease(this.hammerFrame, function (event) { - _this2.body.eventListeners.onRelease(event); + _this3.body.eventListeners.onRelease(event); }); } }, { @@ -21879,7 +22204,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 56 */ +/* 57 */ /***/ function(module, exports, __webpack_require__) { "use strict"; @@ -22059,7 +22384,7 @@ return /******/ (function(modules) { // webpackBootstrap this.moveTo(animationOptions); } }, { - key: "focusOnNode", + key: "focus", // animation @@ -22069,7 +22394,7 @@ return /******/ (function(modules) { // webpackBootstrap * @param {Number} nodeId * @param {Number} [options] */ - value: function focusOnNode(nodeId) { + value: function focus(nodeId) { var options = arguments[1] === undefined ? {} : arguments[1]; if (this.body.nodes[nodeId] !== undefined) { @@ -22280,7 +22605,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports["default"]; /***/ }, -/* 57 */ +/* 58 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -22295,11 +22620,11 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _NavigationHandler = __webpack_require__(79); + var _NavigationHandler = __webpack_require__(80); var _NavigationHandler2 = _interopRequireWildcard(_NavigationHandler); - var _Popup = __webpack_require__(80); + var _Popup = __webpack_require__(81); var _Popup2 = _interopRequireWildcard(_Popup); @@ -22430,9 +22755,8 @@ return /******/ (function(modules) { // webpackBootstrap value: function onTap(event) { var pointer = this.getPointer(event.center); - this.checkSelectionChanges(pointer); - - this.selectionHandler._generateClickEvent('click', pointer); + this.checkSelectionChanges(pointer, event); + this.selectionHandler._generateClickEvent('click', event, pointer); } }, { key: 'onDoubleTap', @@ -22443,7 +22767,7 @@ return /******/ (function(modules) { // webpackBootstrap */ value: function onDoubleTap(event) { var pointer = this.getPointer(event.center); - this.selectionHandler._generateClickEvent('doubleClick', pointer); + this.selectionHandler._generateClickEvent('doubleClick', event, pointer); } }, { key: 'onHold', @@ -22455,10 +22779,10 @@ return /******/ (function(modules) { // webpackBootstrap value: function onHold(event) { var pointer = this.getPointer(event.center); - this.checkSelectionChanges(pointer, true); + this.checkSelectionChanges(pointer, event, true); - this.selectionHandler._generateClickEvent('click', pointer); - this.selectionHandler._generateClickEvent('hold', pointer); + this.selectionHandler._generateClickEvent('click', event, pointer); + this.selectionHandler._generateClickEvent('hold', event, pointer); } }, { key: 'onRelease', @@ -22471,7 +22795,7 @@ return /******/ (function(modules) { // webpackBootstrap value: function onRelease(event) { if (new Date().valueOf() - this.touchTime > 10) { var pointer = this.getPointer(event.center); - this.selectionHandler._generateClickEvent('release', pointer); + this.selectionHandler._generateClickEvent('release', event, pointer); // to avoid double fireing of this event because we have two hammer instances. (on canvas and on frame) this.touchTime = new Date().valueOf(); } @@ -22480,7 +22804,7 @@ return /******/ (function(modules) { // webpackBootstrap key: 'onContext', value: function onContext(event) { var pointer = this.getPointer({ x: event.pageX, y: event.pageY }); - this.selectionHandler._generateClickEvent('rightClick', pointer); + this.selectionHandler._generateClickEvent('oncontext', event, pointer); } }, { key: 'checkSelectionChanges', @@ -22490,8 +22814,8 @@ return /******/ (function(modules) { // webpackBootstrap * @param pointer * @param add */ - value: function checkSelectionChanges(pointer) { - var add = arguments[1] === undefined ? false : arguments[1]; + value: function checkSelectionChanges(pointer, event) { + var add = arguments[2] === undefined ? false : arguments[2]; var previouslySelectedEdgeCount = this.selectionHandler._getSelectedEdgeCount(); var previouslySelectedNodeCount = this.selectionHandler._getSelectedNodeCount(); @@ -22507,27 +22831,27 @@ return /******/ (function(modules) { // webpackBootstrap if (selectedNodes - previouslySelectedNodeCount > 0) { // node was selected - this.selectionHandler._generateClickEvent('selectNode', pointer); + this.selectionHandler._generateClickEvent('selectNode', event, pointer); selected = true; } else if (selectedNodes - previouslySelectedNodeCount < 0) { // node was deselected - this.selectionHandler._generateClickEvent('deselectNode', pointer, previousSelection); + this.selectionHandler._generateClickEvent('deselectNode', event, pointer, previousSelection); selected = true; } if (selectedEdges - previouslySelectedEdgeCount > 0) { // node was selected - this.selectionHandler._generateClickEvent('selectEdge', pointer); + this.selectionHandler._generateClickEvent('selectEdge', event, pointer); selected = true; } else if (selectedEdges - previouslySelectedEdgeCount < 0) { // node was deselected - this.selectionHandler._generateClickEvent('deselectEdge', pointer, previousSelection); + this.selectionHandler._generateClickEvent('deselectEdge', event, pointer, previousSelection); selected = true; } if (selected === true) { // select or unselect - this.selectionHandler._generateClickEvent('select', pointer); + this.selectionHandler._generateClickEvent('select', event, pointer); } } }, { @@ -22553,7 +22877,7 @@ return /******/ (function(modules) { // webpackBootstrap this.drag.translation = util.extend({}, this.body.view.translation); // copy the object this.drag.nodeId = undefined; - this.selectionHandler._generateClickEvent('dragStart', this.drag.pointer); + this.selectionHandler._generateClickEvent('dragStart', event, this.drag.pointer); if (node !== undefined && this.options.dragNodes === true) { this.drag.nodeId = node.id; @@ -22605,6 +22929,9 @@ return /******/ (function(modules) { // webpackBootstrap this.body.emitter.emit('unlockNode'); var pointer = this.getPointer(event.center); + + this.selectionHandler._generateClickEvent('dragging', event, pointer); + var selection = this.drag.selection; if (selection && selection.length && this.options.dragNodes === true) { (function () { @@ -22664,7 +22991,7 @@ return /******/ (function(modules) { // webpackBootstrap } else { this.body.emitter.emit('_requestRedraw'); } - this.selectionHandler._generateClickEvent('dragEnd', this.getPointer(event.center)); + this.selectionHandler._generateClickEvent('dragEnd', event, this.getPointer(event.center)); } }, { key: 'onPinch', @@ -23004,7 +23331,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 58 */ +/* 59 */ /***/ function(module, exports, __webpack_require__) { "use strict"; @@ -23016,7 +23343,7 @@ return /******/ (function(modules) { // webpackBootstrap Object.defineProperty(exports, "__esModule", { value: true }); - var Node = __webpack_require__(69); + var Node = __webpack_require__(70); var util = __webpack_require__(1); var SelectionHandler = (function () { @@ -23091,12 +23418,13 @@ return /******/ (function(modules) { // webpackBootstrap } }, { key: "_generateClickEvent", - value: function _generateClickEvent(eventType, pointer, oldSelection) { + value: function _generateClickEvent(eventType, event, pointer, oldSelection) { var properties = this.getSelection(); properties.pointer = { DOM: { x: pointer.x, y: pointer.y }, canvas: this.canvas.DOMtoCanvas(pointer) }; + properties.event = event; if (oldSelection !== undefined) { properties.previousSelection = oldSelection; @@ -23688,7 +24016,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports["default"]; /***/ }, -/* 59 */ +/* 60 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -24185,7 +24513,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 60 */ +/* 61 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -24200,8 +24528,8 @@ return /******/ (function(modules) { // webpackBootstrap var util = __webpack_require__(1); var Hammer = __webpack_require__(41); - var hammerUtil = __webpack_require__(44); - var locales = __webpack_require__(81); + var hammerUtil = __webpack_require__(45); + var locales = __webpack_require__(82); /** * clears the toolbar div element of children @@ -24240,22 +24568,12 @@ return /******/ (function(modules) { // webpackBootstrap 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 - }, + addNode: true, + addEdge: true, + editNode: undefined, + editEdge: true, + deleteNode: true, + deleteEdge: true, controlNodeStyle: { shape: 'dot', size: 6, @@ -24375,11 +24693,11 @@ return /******/ (function(modules) { // webpackBootstrap var locale = this.options.locales[this.options.locale]; var needSeperator = false; - if (this.options.functionality.addNode === true) { + if (this.options.addNode !== false) { this._createAddNodeButton(locale); needSeperator = true; } - if (this.options.functionality.addEdge === true) { + if (this.options.addEdge !== false) { if (needSeperator === true) { this._createSeperator(1); } else { @@ -24388,14 +24706,14 @@ return /******/ (function(modules) { // webpackBootstrap this._createAddEdgeButton(locale); } - if (selectedNodeCount === 1 && typeof this.options.handlerFunctions.editNode === 'function' && this.options.functionality.editNode === true) { + if (selectedNodeCount === 1 && typeof this.options.editNode === 'function') { if (needSeperator === true) { this._createSeperator(2); } else { needSeperator = true; } this._createEditNodeButton(locale); - } else if (selectedEdgeCount === 1 && selectedNodeCount === 0 && this.options.functionality.editEdge === true) { + } else if (selectedEdgeCount === 1 && selectedNodeCount === 0 && this.options.editEdge !== false) { if (needSeperator === true) { this._createSeperator(3); } else { @@ -24406,12 +24724,12 @@ return /******/ (function(modules) { // webpackBootstrap // remove buttons if (selectedTotalCount !== 0) { - if (selectedNodeCount === 1 && this.options.functionality.deleteNode === true) { + if (selectedNodeCount === 1 && this.options.deleteNode !== false) { if (needSeperator === true) { this._createSeperator(4); } this._createDeleteButton(locale); - } else if (selectedNodeCount === 0 && this.options.functionality.deleteEdge === true) { + } else if (selectedNodeCount === 0 && this.options.deleteEdge !== false) { if (needSeperator === true) { this._createSeperator(4); } @@ -24480,15 +24798,15 @@ return /******/ (function(modules) { // webpackBootstrap this._clean(); this.inMode = 'editNode'; - if (typeof this.options.handlerFunctions.editNode === 'function') { + if (typeof this.options.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 (this.options.handlerFunctions.editNode.length === 2) { - this.options.handlerFunctions.editNode(data, function (finalizedData) { + if (this.options.editNode.length === 2) { + this.options.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); @@ -24643,12 +24961,12 @@ return /******/ (function(modules) { // webpackBootstrap } } - if (typeof this.options.handlerFunctions.deleteNode === 'function') { - deleteFunction = this.options.handlerFunctions.deleteNode; + if (typeof this.options.deleteNode === 'function') { + deleteFunction = this.options.deleteNode; } } else if (selectedEdges.length > 0) { - if (typeof this.options.handlerFunctions.deleteEdge === 'function') { - deleteFunction = this.options.handlerFunctions.deleteEdge; + if (typeof this.options.deleteEdge === 'function') { + deleteFunction = this.options.deleteEdge; } } @@ -25282,9 +25600,9 @@ return /******/ (function(modules) { // webpackBootstrap label: 'new' }; - if (typeof this.options.handlerFunctions.addNode === 'function') { - if (this.options.handlerFunctions.addNode.length === 2) { - this.options.handlerFunctions.addNode(defaultData, function (finalizedData) { + if (typeof this.options.addNode === 'function') { + if (this.options.addNode.length === 2) { + this.options.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); @@ -25312,9 +25630,9 @@ return /******/ (function(modules) { // webpackBootstrap 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 (typeof this.options.addEdge === 'function') { + if (this.options.addEdge.length === 2) { + this.options.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); @@ -25343,9 +25661,9 @@ return /******/ (function(modules) { // webpackBootstrap var _this6 = this; 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 (typeof this.options.editEdge === 'function') { + if (this.options.editEdge.length === 2) { + this.options.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(); @@ -25374,7 +25692,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 61 */ +/* 62 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -25389,7 +25707,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _ColorPicker = __webpack_require__(82); + var _ColorPicker = __webpack_require__(109); var _ColorPicker2 = _interopRequireWildcard(_ColorPicker); @@ -25549,15 +25867,7 @@ return /******/ (function(modules) { // webpackBootstrap manipulation: { enabled: false, initiallyActive: false, - locale: ['en', 'nl'], - functionality: { - addNode: true, - addEdge: true, - editNode: true, - editEdge: true, - deleteNode: true, - deleteEdge: true - } + locale: ['en', 'nl'] }, physics: { barnesHut: { @@ -25588,7 +25898,7 @@ return /******/ (function(modules) { // webpackBootstrap timestep: [0.5, 0, 1, 0.05] }, selection: { - select: true, + selectable: true, selectConnectedEdges: true }, rendering: { @@ -25927,7 +26237,7 @@ return /******/ (function(modules) { // webpackBootstrap var me = this; range.onchange = function () { - input.value = this.value;me._update(this.value, path); + input.value = this.value;me._update(Number(this.value), path); }; range.oninput = function () { input.value = this.value; @@ -26112,7 +26422,7 @@ return /******/ (function(modules) { // webpackBootstrap } else if (typeof arr[0] === 'number') { this._makeRange(arr, value, path); if (arr[0] !== value) { - this.changedOptions.push({ path: path, value: value }); + this.changedOptions.push({ path: path, value: Number(value) }); } } } @@ -26150,6 +26460,7 @@ return /******/ (function(modules) { // webpackBootstrap pointer[path[i]] = value; } } + console.log(optionsObj); return optionsObj; } }, { @@ -26170,7 +26481,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 62 */ +/* 63 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -26441,7 +26752,7 @@ return /******/ (function(modules) { // webpackBootstrap // item is a function, which is allowed /***/ }, -/* 63 */ +/* 64 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -26469,6 +26780,7 @@ return /******/ (function(modules) { // webpackBootstrap canvas: { width: { string: string }, height: { string: string }, + autoResize: { boolean: boolean }, __type__: { object: object } }, rendering: { @@ -26588,24 +26900,12 @@ return /******/ (function(modules) { // webpackBootstrap 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 } - }, + addNode: { boolean: boolean, fn: fn }, + addEdge: { boolean: boolean, fn: fn }, + editNode: { fn: fn }, + editEdge: { boolean: boolean, fn: fn }, + deleteNode: { boolean: boolean, fn: fn }, + deleteEdge: { boolean: boolean, fn: fn }, controlNodeStyle: ['__ref__', 'nodes'], __type__: { object: object, boolean: boolean } }, @@ -26726,7 +27026,7 @@ return /******/ (function(modules) { // webpackBootstrap __type__: { object: object, boolean: boolean } }, selection: { - select: { boolean: boolean }, + selectable: { boolean: boolean }, selectConnectedEdges: { boolean: boolean }, __type__: { object: object } }, @@ -26741,7 +27041,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 64 */ +/* 65 */ /***/ function(module, exports, __webpack_require__) { /** @@ -27025,13 +27325,13 @@ return /******/ (function(modules) { // webpackBootstrap } /***/ }, -/* 65 */ +/* 66 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; var keycharm = __webpack_require__(83); - var Emitter = __webpack_require__(42); + var Emitter = __webpack_require__(43); var Hammer = __webpack_require__(41); var util = __webpack_require__(1); @@ -27178,7 +27478,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = Activator; /***/ }, -/* 66 */ +/* 67 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(module) {//! moment.js @@ -30267,7 +30567,7 @@ return /******/ (function(modules) { // webpackBootstrap /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(85)(module))) /***/ }, -/* 67 */ +/* 68 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;'use strict'; @@ -30495,7 +30795,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 68 */ +/* 69 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_RESULT__;/*! Hammer.JS - v2.0.4 - 2014-09-28 @@ -32964,7 +33264,7 @@ return /******/ (function(modules) { // webpackBootstrap /***/ }, -/* 69 */ +/* 70 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -32979,7 +33279,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _Label = __webpack_require__(70); + var _Label = __webpack_require__(71); var _Label2 = _interopRequireWildcard(_Label); @@ -33039,7 +33339,7 @@ return /******/ (function(modules) { // webpackBootstrap var _TriangleDown2 = _interopRequireWildcard(_TriangleDown); - var _Validator = __webpack_require__(62); + var _Validator = __webpack_require__(63); var _Validator2 = _interopRequireWildcard(_Validator); @@ -33440,7 +33740,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 70 */ +/* 71 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -33750,7 +34050,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 71 */ +/* 72 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -33765,7 +34065,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _Label = __webpack_require__(70); + var _Label = __webpack_require__(71); var _Label2 = _interopRequireWildcard(_Label); @@ -34284,7 +34584,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 72 */ +/* 73 */ /***/ function(module, exports, __webpack_require__) { "use strict"; @@ -34764,7 +35064,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports["default"]; /***/ }, -/* 73 */ +/* 74 */ /***/ function(module, exports, __webpack_require__) { "use strict"; @@ -34859,7 +35159,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports["default"]; /***/ }, -/* 74 */ +/* 75 */ /***/ function(module, exports, __webpack_require__) { "use strict"; @@ -34950,7 +35250,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports["default"]; /***/ }, -/* 75 */ +/* 76 */ /***/ function(module, exports, __webpack_require__) { "use strict"; @@ -35059,7 +35359,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports["default"]; /***/ }, -/* 76 */ +/* 77 */ /***/ function(module, exports, __webpack_require__) { "use strict"; @@ -35180,7 +35480,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports["default"]; /***/ }, -/* 77 */ +/* 78 */ /***/ function(module, exports, __webpack_require__) { "use strict"; @@ -35239,7 +35539,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports["default"]; /***/ }, -/* 78 */ +/* 79 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -35256,7 +35556,7 @@ return /******/ (function(modules) { // webpackBootstrap value: true }); - var _Node2 = __webpack_require__(69); + var _Node2 = __webpack_require__(70); var _Node3 = _interopRequireWildcard(_Node2); @@ -35284,7 +35584,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 79 */ +/* 80 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -35298,7 +35598,7 @@ return /******/ (function(modules) { // webpackBootstrap }); var util = __webpack_require__(1); var Hammer = __webpack_require__(41); - var hammerUtil = __webpack_require__(44); + var hammerUtil = __webpack_require__(45); var keycharm = __webpack_require__(83); var NavigationHandler = (function () { @@ -35551,7 +35851,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 80 */ +/* 81 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -35677,7 +35977,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 81 */ +/* 82 */ /***/ function(module, exports, __webpack_require__) { // English @@ -35721,1109 +36021,530 @@ return /******/ (function(modules) { // webpackBootstrap exports.nl_BE = exports.nl; /***/ }, -/* 82 */ +/* 83 */ /***/ function(module, exports, __webpack_require__) { - 'use strict'; + var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;"use strict"; + /** + * Created by Alex on 11/6/2014. + */ - var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }; + // 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 () { - 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 keycharm(options) { + var preventDefault = options && options.preventDefault || false; - Object.defineProperty(exports, '__esModule', { - value: true - }); - var Hammer = __webpack_require__(41); - var hammerUtil = __webpack_require__(44); - var util = __webpack_require__(1); + var container = options && options.container || window; + var _exportFunctions = {}; + var _bound = {keydown:{}, keyup:{}}; + var _keys = {}; + var i; - var ColorPicker = (function () { - function ColorPicker() { - var pixelRatio = arguments[0] === undefined ? 1 : arguments[0]; + // 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};} - _classCallCheck(this, ColorPicker); + // 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}; - this.pixelRatio = pixelRatio; - this.generated = false; - this.centerCoordinates = { x: 289 / 2, y: 289 / 2 }; - this.r = 289 * 0.49; - this.color = { r: 255, g: 255, b: 255, a: 1 }; - this.hueCircle = undefined; - this.initialColor = { r: 255, g: 255, b: 255, a: 1 }; - this.previousColor = undefined; - this.applied = false; - // bound by - this.updateCallback = function () {}; - // create all DOM elements - this._create(); - } + var down = function(event) {handleEvent(event,'keydown');}; + var up = function(event) {handleEvent(event,'keyup');}; - _createClass(ColorPicker, [{ - key: 'insertTo', + // 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); + } + } - /** - * this inserts the colorPicker into a div from the DOM - * @param container - */ - value: function insertTo(container) { - if (this.hammer !== undefined) { - this.hammer.destroy(); - this.hammer = undefined; + if (preventDefault == true) { + event.preventDefault(); + } } - this.container = container; - this.container.appendChild(this.frame); - this._bindHammer(); - - this._setSize(); - } - }, { - key: 'setCallback', + }; - /** - * the callback is executed on apply and save. Bind it to the application - * @param callback - */ - value: function setCallback(callback) { - if (typeof callback === 'function') { - this.updateCallback = callback; - } else { - throw new Error('Function attempted to set as colorPicker callback is not a function.'); + // bind a key to a callback + _exportFunctions.bind = function(key, callback, type) { + if (type === undefined) { + type = 'keydown'; } - } - }, { - key: '_isColorString', - value: function _isColorString(color) { - var htmlColors = { black: '#000000', navy: '#000080', darkblue: '#00008B', mediumblue: '#0000CD', blue: '#0000FF', darkgreen: '#006400', green: '#008000', teal: '#008080', darkcyan: '#008B8B', deepskyblue: '#00BFFF', darkturquoise: '#00CED1', mediumspringgreen: '#00FA9A', lime: '#00FF00', springgreen: '#00FF7F', aqua: '#00FFFF', cyan: '#00FFFF', midnightblue: '#191970', dodgerblue: '#1E90FF', lightseagreen: '#20B2AA', forestgreen: '#228B22', seagreen: '#2E8B57', darkslategray: '#2F4F4F', limegreen: '#32CD32', mediumseagreen: '#3CB371', turquoise: '#40E0D0', royalblue: '#4169E1', steelblue: '#4682B4', darkslateblue: '#483D8B', mediumturquoise: '#48D1CC', indigo: '#4B0082', darkolivegreen: '#556B2F', cadetblue: '#5F9EA0', cornflowerblue: '#6495ED', mediumaquamarine: '#66CDAA', dimgray: '#696969', slateblue: '#6A5ACD', olivedrab: '#6B8E23', slategray: '#708090', lightslategray: '#778899', mediumslateblue: '#7B68EE', lawngreen: '#7CFC00', chartreuse: '#7FFF00', aquamarine: '#7FFFD4', maroon: '#800000', purple: '#800080', olive: '#808000', gray: '#808080', skyblue: '#87CEEB', lightskyblue: '#87CEFA', blueviolet: '#8A2BE2', darkred: '#8B0000', darkmagenta: '#8B008B', saddlebrown: '#8B4513', darkseagreen: '#8FBC8F', lightgreen: '#90EE90', mediumpurple: '#9370D8', darkviolet: '#9400D3', palegreen: '#98FB98', darkorchid: '#9932CC', yellowgreen: '#9ACD32', sienna: '#A0522D', brown: '#A52A2A', darkgray: '#A9A9A9', lightblue: '#ADD8E6', greenyellow: '#ADFF2F', paleturquoise: '#AFEEEE', lightsteelblue: '#B0C4DE', powderblue: '#B0E0E6', firebrick: '#B22222', darkgoldenrod: '#B8860B', mediumorchid: '#BA55D3', rosybrown: '#BC8F8F', darkkhaki: '#BDB76B', silver: '#C0C0C0', mediumvioletred: '#C71585', indianred: '#CD5C5C', peru: '#CD853F', chocolate: '#D2691E', tan: '#D2B48C', lightgrey: '#D3D3D3', palevioletred: '#D87093', thistle: '#D8BFD8', orchid: '#DA70D6', goldenrod: '#DAA520', crimson: '#DC143C', gainsboro: '#DCDCDC', plum: '#DDA0DD', burlywood: '#DEB887', lightcyan: '#E0FFFF', lavender: '#E6E6FA', darksalmon: '#E9967A', violet: '#EE82EE', palegoldenrod: '#EEE8AA', lightcoral: '#F08080', khaki: '#F0E68C', aliceblue: '#F0F8FF', honeydew: '#F0FFF0', azure: '#F0FFFF', sandybrown: '#F4A460', wheat: '#F5DEB3', beige: '#F5F5DC', whitesmoke: '#F5F5F5', mintcream: '#F5FFFA', ghostwhite: '#F8F8FF', salmon: '#FA8072', antiquewhite: '#FAEBD7', linen: '#FAF0E6', lightgoldenrodyellow: '#FAFAD2', oldlace: '#FDF5E6', red: '#FF0000', fuchsia: '#FF00FF', magenta: '#FF00FF', deeppink: '#FF1493', orangered: '#FF4500', tomato: '#FF6347', hotpink: '#FF69B4', coral: '#FF7F50', darkorange: '#FF8C00', lightsalmon: '#FFA07A', orange: '#FFA500', lightpink: '#FFB6C1', pink: '#FFC0CB', gold: '#FFD700', peachpuff: '#FFDAB9', navajowhite: '#FFDEAD', moccasin: '#FFE4B5', bisque: '#FFE4C4', mistyrose: '#FFE4E1', blanchedalmond: '#FFEBCD', papayawhip: '#FFEFD5', lavenderblush: '#FFF0F5', seashell: '#FFF5EE', cornsilk: '#FFF8DC', lemonchiffon: '#FFFACD', floralwhite: '#FFFAF0', snow: '#FFFAFA', yellow: '#FFFF00', lightyellow: '#FFFFE0', ivory: '#FFFFF0', white: '#FFFFFF' }; - if (typeof color === 'string') { - return htmlColors[color]; + if (_keys[key] === undefined) { + throw new Error("unsupported key: " + key); } - } - }, { - key: 'setColor', - - /** - * Set the color of the colorPicker - * Supported formats: - * 'red' --> HTML color string - * '#ffffff' --> hex string - * 'rbg(255,255,255)' --> rgb string - * 'rgba(255,255,255,1.0)' --> rgba string - * {r:255,g:255,b:255} --> rgb object - * {r:255,g:255,b:255,a:1.0} --> rgba object - * @param color - * @param setInitial - */ - value: function setColor(color) { - var setInitial = arguments[1] === undefined ? true : arguments[1]; - - if (color === 'none') { - return; + if (_bound[type][_keys[key].code] === undefined) { + _bound[type][_keys[key].code] = []; } + _bound[type][_keys[key].code].push({fn:callback, shift:_keys[key].shift}); + }; - var rgba = undefined; - // if a html color shorthand is used, convert to hex - var htmlColor = this._isColorString(color); - if (htmlColor !== undefined) { - color = htmlColor; + // bind all keys to a call back (demo purposes) + _exportFunctions.bindAll = function(callback, type) { + if (type === undefined) { + type = 'keydown'; } - - // check format - if (util.isString(color) === true) { - if (util.isValidRGB(color) === true) { - var rgbaArray = color.substr(4).substr(0, color.length - 5).split(','); - rgba = { r: rgbaArray[0], g: rgbaArray[1], b: rgbaArray[2], a: 1 }; - } else if (util.isValidRGBA(color) === true) { - var rgbaArray = color.substr(5).substr(0, color.length - 6).split(','); - rgba = { r: rgbaArray[0], g: rgbaArray[1], b: rgbaArray[2], a: rgbaArray[3] }; - } else if (util.isValidHex(color) === true) { - var rgbObj = util.hexToRGB(color); - rgba = { r: rgbObj.r, g: rgbObj.g, b: rgbObj.b, a: 1 }; + for (var key in _keys) { + if (_keys.hasOwnProperty(key)) { + _exportFunctions.bind(key,callback,type); } - } else { - if (color instanceof Object) { - if (color.r !== undefined && color.g !== undefined && color.b !== undefined) { - var alpha = color.a !== undefined ? color.a : '1.0'; - rgba = { r: color.r, g: color.g, b: color.b, a: alpha }; + } + }; + + // 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"; + }; - // set color - if (rgba === undefined) { - throw new Error('Unknown color passed to the colorPicker. Supported are strings: rgb, hex, rgba. Object: rgb ({r:r,g:g,b:b,[a:a]}). Supplied: ' + JSON.stringify(color)); - } else { - this._setColor(rgba, setInitial); + // 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'; } - } - }, { - key: 'show', + 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] = []; + } + }; - /** - * this shows the color picker at a location. The hue circle is constructed once and stored. - * @param x - * @param y - */ - value: function show(x, y) { - this.applied = false; - this.frame.style.display = 'block'; - this.frame.style.top = y + 'px'; - this.frame.style.left = x + 'px'; - this._generateHueCircle(); - } - }, { - key: '_hide', + // reset all bound variables. + _exportFunctions.reset = function() { + _bound = {keydown:{}, keyup:{}}; + }; - // ------------------------------------------ PRIVATE ----------------------------- // + // unbind all listeners and reset all variables. + _exportFunctions.destroy = function() { + _bound = {keydown:{}, keyup:{}}; + container.removeEventListener('keydown', down, true); + container.removeEventListener('keyup', up, true); + }; - /** - * Hide the picker. Is called by the cancel button. - * Optional boolean to store the previous color for easy access later on. - * @param storePrevious - * @private - */ - value: function _hide() { - var storePrevious = arguments[0] === undefined ? true : arguments[0]; + // create listeners. + container.addEventListener('keydown',down,true); + container.addEventListener('keyup',up,true); - // store the previous color for next time; - if (storePrevious === true) { - this.previousColor = util.extend({}, this.color); - } + // return the public functions. + return _exportFunctions; + } - if (this.applied === true) { - this.updateCallback(this.initialColor); - } + return keycharm; + })); - this.frame.style.display = 'none'; - } - }, { - key: '_save', - /** - * bound to the save button. Saves and hides. - * @private - */ - value: function _save() { - this.updateCallback(this.color); - this.applied = false; - this._hide(); - } - }, { - key: '_apply', - /** - * Bound to apply button. Saves but does not close. Is undone by the cancel button. - * @private - */ - value: function _apply() { - this.applied = true; - this.updateCallback(this.color); - this._updatePicker(this.color); - } - }, { - key: '_loadLast', - /** - * load the color from the previous session. - * @private - */ - value: function _loadLast() { - if (this.previousColor !== undefined) { - this.setColor(this.previousColor, false); - } else { - alert('There is no last color to load...'); - } - } - }, { - key: '_setColor', +/***/ }, +/* 84 */ +/***/ function(module, exports, __webpack_require__) { - /** - * set the color, place the picker - * @param rgba - * @param setInitial - * @private - */ - value: function _setColor(rgba) { - var setInitial = arguments[1] === undefined ? true : arguments[1]; + function webpackContext(req) { + throw new Error("Cannot find module '" + req + "'."); + } + webpackContext.keys = function() { return []; }; + webpackContext.resolve = webpackContext; + module.exports = webpackContext; + webpackContext.id = 84; - // store the initial color - if (setInitial === true) { - this.initialColor = util.extend({}, rgba); - } - this.color = rgba; - var hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b); +/***/ }, +/* 85 */ +/***/ function(module, exports, __webpack_require__) { - var angleConvert = 2 * Math.PI; - var radius = this.r * hsv.s; - var x = this.centerCoordinates.x + radius * Math.sin(angleConvert * hsv.h); - var y = this.centerCoordinates.y + radius * Math.cos(angleConvert * hsv.h); + module.exports = function(module) { + if(!module.webpackPolyfill) { + module.deprecate = function() {}; + module.paths = []; + // module.parent = undefined by default + module.children = []; + module.webpackPolyfill = 1; + } + return module; + } - this.colorPickerSelector.style.left = x - 0.5 * this.colorPickerSelector.clientWidth + 'px'; - this.colorPickerSelector.style.top = y - 0.5 * this.colorPickerSelector.clientHeight + 'px'; - this._updatePicker(rgba); - } - }, { - key: '_setOpacity', +/***/ }, +/* 86 */ +/***/ function(module, exports, __webpack_require__) { - /** - * bound to opacity control - * @param value - * @private - */ - value: function _setOpacity(value) { - this.color.a = value / 100; - this._updatePicker(this.color); - } - }, { - key: '_setBrightness', + /* WEBPACK VAR INJECTION */(function(__webpack_amd_options__) {module.exports = __webpack_amd_options__; - /** - * bound to brightness control - * @param value - * @private - */ - value: function _setBrightness(value) { - var hsv = util.RGBToHSV(this.color.r, this.color.g, this.color.b); - hsv.v = value / 100; - var rgba = util.HSVToRGB(hsv.h, hsv.s, hsv.v); - rgba.a = this.color.a; - this.color = rgba; - this._updatePicker(); - } - }, { - key: '_updatePicker', + /* WEBPACK VAR INJECTION */}.call(exports, {})) - /** - * update the colorpicker. A black circle overlays the hue circle to mimic the brightness decreasing. - * @param rgba - * @private - */ - value: function _updatePicker() { - var rgba = arguments[0] === undefined ? this.color : arguments[0]; +/***/ }, +/* 87 */ +/***/ function(module, exports, __webpack_require__) { - var hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b); - var ctx = this.colorPickerCanvas.getContext('2d'); - if (this.pixelRation === undefined) { - this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1); - } - ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); + 'use strict'; - // clear the canvas - var w = this.colorPickerCanvas.clientWidth; - var h = this.colorPickerCanvas.clientHeight; - ctx.clearRect(0, 0, w, h); + var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; - ctx.putImageData(this.hueCircle, 0, 0); - ctx.fillStyle = 'rgba(0,0,0,' + (1 - hsv.v) + ')'; - ctx.circle(this.centerCoordinates.x, this.centerCoordinates.y, this.r); - ctx.fill(); + var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }; - this.brightnessRange.value = 100 * hsv.v; - this.opacityRange.value = 100 * rgba.a; + 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.initialColorDiv.style.backgroundColor = 'rgba(' + this.initialColor.r + ',' + this.initialColor.g + ',' + this.initialColor.b + ',' + this.initialColor.a + ')'; - this.newColorDiv.style.backgroundColor = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')'; - } - }, { - key: '_setSize', + var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; - /** - * used by create to set the size of the canvas. - * @private - */ - value: function _setSize() { - this.colorPickerCanvas.style.width = '100%'; - this.colorPickerCanvas.style.height = '100%'; + var _inherits = function (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; - this.colorPickerCanvas.width = 289 * this.pixelRatio; - this.colorPickerCanvas.height = 289 * this.pixelRatio; + Object.defineProperty(exports, '__esModule', { + value: true + }); + + var _NodeBase2 = __webpack_require__(104); + + var _NodeBase3 = _interopRequireWildcard(_NodeBase2); + + 'use strict'; + + var Box = (function (_NodeBase) { + function Box(options, body, labelModule) { + _classCallCheck(this, Box); + + _get(Object.getPrototypeOf(Box.prototype), 'constructor', this).call(this, options, body, labelModule); + } + + _inherits(Box, _NodeBase); + + _createClass(Box, [{ + key: 'resize', + value: function resize(ctx, selected) { + if (this.width === undefined) { + var margin = 5; + var textSize = this.labelModule.getTextSize(ctx, selected); + this.width = textSize.width + 2 * margin; + this.height = textSize.height + 2 * margin; + } } }, { - key: '_create', + key: 'draw', + value: function draw(ctx, x, y, selected, hover) { + this.resize(ctx, selected); + this.left = x - this.width / 2; + this.top = y - this.height / 2; - /** - * create all dom elements - * TODO: cleanup, lots of similar dom elements - * @private - */ - value: function _create() { - this.frame = document.createElement('div'); - this.frame.className = 'vis-color-picker'; + var borderWidth = this.options.borderWidth; + var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; - this.colorPickerDiv = document.createElement('div'); - this.colorPickerSelector = document.createElement('div'); - this.colorPickerSelector.className = 'vis-selector'; - this.colorPickerDiv.appendChild(this.colorPickerSelector); + ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; + ctx.lineWidth = selected ? selectionLineWidth : borderWidth; + ctx.lineWidth /= this.body.view.scale; + ctx.lineWidth = Math.min(this.width, ctx.lineWidth); - this.colorPickerCanvas = document.createElement('canvas'); - this.colorPickerDiv.appendChild(this.colorPickerCanvas); + ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background; - if (!this.colorPickerCanvas.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.colorPickerCanvas.appendChild(noCanvas); - } else { - var ctx = this.colorPickerCanvas.getContext('2d'); - this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1); + ctx.roundRect(this.left, this.top, this.width, this.height, this.options.size); - this.colorPickerCanvas.getContext('2d').setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); - } + // draw shadow if enabled + this.enableShadow(ctx); + ctx.fill(); - this.colorPickerDiv.className = 'vis-color'; + // disable shadows for other elements. + this.disableShadow(ctx); - this.opacityDiv = document.createElement('div'); - this.opacityDiv.className = 'vis-opacity'; + ctx.stroke(); - this.brightnessDiv = document.createElement('div'); - this.brightnessDiv.className = 'vis-brightness'; + this.boundingBox.top = this.top; + this.boundingBox.left = this.left; + this.boundingBox.right = this.left + this.width; + this.boundingBox.bottom = this.top + this.height; - this.arrowDiv = document.createElement('div'); - this.arrowDiv.className = 'vis-arrow'; + this.labelModule.draw(ctx, x, y, selected); + } + }, { + key: 'distanceToBorder', + value: function distanceToBorder(ctx, angle) { + this.resize(ctx); + var a = this.width / 2; + var b = this.height / 2; + var w = Math.sin(angle) * a; + var h = Math.cos(angle) * b; + return a * b / Math.sqrt(w * w + h * h); + } + }]); - this.opacityRange = document.createElement('input'); - this.opacityRange.type = 'range'; - this.opacityRange.min = '0'; - this.opacityRange.max = '100'; - this.opacityRange.value = '100'; - this.opacityRange.className = 'vis-range'; + return Box; + })(_NodeBase3['default']); - this.brightnessRange = document.createElement('input'); - this.brightnessRange.type = 'range'; - this.brightnessRange.min = '0'; - this.brightnessRange.max = '100'; - this.brightnessRange.value = '100'; - this.brightnessRange.className = 'vis-range'; + exports['default'] = Box; + module.exports = exports['default']; - this.opacityDiv.appendChild(this.opacityRange); - this.brightnessDiv.appendChild(this.brightnessRange); +/***/ }, +/* 88 */ +/***/ function(module, exports, __webpack_require__) { - var me = this; - this.opacityRange.onchange = function () { - me._setOpacity(this.value); - }; - this.opacityRange.oninput = function () { - me._setOpacity(this.value); - }; - this.brightnessRange.onchange = function () { - me._setBrightness(this.value); - }; - this.brightnessRange.oninput = function () { - me._setBrightness(this.value); - }; + 'use strict'; - this.brightnessLabel = document.createElement('div'); - this.brightnessLabel.className = 'vis-label vis-brightness'; - this.brightnessLabel.innerHTML = 'brightness:'; + var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; - this.opacityLabel = document.createElement('div'); - this.opacityLabel.className = 'vis-label vis-opacity'; - this.opacityLabel.innerHTML = 'opacity:'; + var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }; - this.newColorDiv = document.createElement('div'); - this.newColorDiv.className = 'vis-new-color'; - this.newColorDiv.innerHTML = 'new'; + 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.initialColorDiv = document.createElement('div'); - this.initialColorDiv.className = 'vis-initial-color'; - this.initialColorDiv.innerHTML = 'initial'; + var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; - this.cancelButton = document.createElement('div'); - this.cancelButton.className = 'vis-button vis-cancel'; - this.cancelButton.innerHTML = 'cancel'; - this.cancelButton.onclick = this._hide.bind(this, false); + var _inherits = function (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; - this.applyButton = document.createElement('div'); - this.applyButton.className = 'vis-button vis-apply'; - this.applyButton.innerHTML = 'apply'; - this.applyButton.onclick = this._apply.bind(this); + Object.defineProperty(exports, '__esModule', { + value: true + }); - this.saveButton = document.createElement('div'); - this.saveButton.className = 'vis-button vis-save'; - this.saveButton.innerHTML = 'save'; - this.saveButton.onclick = this._save.bind(this); + var _CircleImageBase2 = __webpack_require__(105); - this.loadButton = document.createElement('div'); - this.loadButton.className = 'vis-button vis-load'; - this.loadButton.innerHTML = 'load last'; - this.loadButton.onclick = this._loadLast.bind(this); + var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2); - this.frame.appendChild(this.colorPickerDiv); - this.frame.appendChild(this.arrowDiv); - this.frame.appendChild(this.brightnessLabel); - this.frame.appendChild(this.brightnessDiv); - this.frame.appendChild(this.opacityLabel); - this.frame.appendChild(this.opacityDiv); - this.frame.appendChild(this.newColorDiv); - this.frame.appendChild(this.initialColorDiv); + 'use strict'; - this.frame.appendChild(this.cancelButton); - this.frame.appendChild(this.applyButton); - this.frame.appendChild(this.saveButton); - this.frame.appendChild(this.loadButton); + var Circle = (function (_CircleImageBase) { + function Circle(options, body, labelModule) { + _classCallCheck(this, Circle); + + _get(Object.getPrototypeOf(Circle.prototype), 'constructor', this).call(this, options, body, labelModule); + } + + _inherits(Circle, _CircleImageBase); + + _createClass(Circle, [{ + key: 'resize', + value: function resize(ctx, selected) { + if (this.width === undefined) { + var margin = 5; + var textSize = this.labelModule.getTextSize(ctx, selected); + var diameter = Math.max(textSize.width, textSize.height) + 2 * margin; + this.options.size = diameter / 2; + + this.width = diameter; + this.height = diameter; + } } }, { - key: '_bindHammer', + key: 'draw', + value: function draw(ctx, x, y, selected, hover) { + this.resize(ctx, selected); + this.left = x - this.width / 2; + this.top = y - this.height / 2; - /** - * bind hammer to the color picker - * @private - */ - value: function _bindHammer() { - var _this = this; + this._drawRawCircle(ctx, x, y, selected, hover, this.options.size); - this.drag = {}; - this.pinch = {}; - this.hammer = new Hammer(this.colorPickerCanvas); - this.hammer.get('pinch').set({ enable: true }); + this.boundingBox.top = y - this.options.size; + this.boundingBox.left = x - this.options.size; + this.boundingBox.right = x + this.options.size; + this.boundingBox.bottom = y + this.options.size; - hammerUtil.onTouch(this.hammer, function (event) { - _this._moveSelector(event); - }); - this.hammer.on('tap', function (event) { - _this._moveSelector(event); - }); - this.hammer.on('panstart', function (event) { - _this._moveSelector(event); - }); - this.hammer.on('panmove', function (event) { - _this._moveSelector(event); - }); - this.hammer.on('panend', function (event) { - _this._moveSelector(event); - }); + this.labelModule.draw(ctx, x, y, selected); } }, { - key: '_generateHueCircle', + key: 'distanceToBorder', + value: function distanceToBorder(ctx, angle) { + this.resize(ctx); + var a = this.width / 2; + var b = this.height / 2; + var w = Math.sin(angle) * a; + var h = Math.cos(angle) * b; + return a * b / Math.sqrt(w * w + h * h); + } + }]); - /** - * generate the hue circle. This is relatively heavy (200ms) and is done only once on the first time it is shown. - * @private - */ - value: function _generateHueCircle() { - if (this.generated === false) { - var ctx = this.colorPickerCanvas.getContext('2d'); - if (this.pixelRation === undefined) { - this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1); - } - ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); + return Circle; + })(_CircleImageBase3['default']); - // clear the canvas - var w = this.colorPickerCanvas.clientWidth; - var h = this.colorPickerCanvas.clientHeight; - ctx.clearRect(0, 0, w, h); + exports['default'] = Circle; + module.exports = exports['default']; - // draw hue circle - var x = undefined, - y = undefined, - hue = undefined, - sat = undefined; - this.centerCoordinates = { x: w * 0.5, y: h * 0.5 }; - this.r = 0.49 * w; - var angleConvert = 2 * Math.PI / 360; - var hfac = 1 / 360; - var sfac = 1 / this.r; - var rgb = undefined; - for (hue = 0; hue < 360; hue++) { - for (sat = 0; sat < this.r; sat++) { - x = this.centerCoordinates.x + sat * Math.sin(angleConvert * hue); - y = this.centerCoordinates.y + sat * Math.cos(angleConvert * hue); - rgb = util.HSVToRGB(hue * hfac, sat * sfac, 1); - ctx.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')'; - ctx.fillRect(x - 0.5, y - 0.5, 2, 2); - } - } - ctx.strokeStyle = 'rgba(0,0,0,1)'; - ctx.circle(this.centerCoordinates.x, this.centerCoordinates.y, this.r); - ctx.stroke(); +/***/ }, +/* 89 */ +/***/ function(module, exports, __webpack_require__) { - this.hueCircle = ctx.getImageData(0, 0, w, h); + 'use strict'; + + var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; + + 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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; + + var _inherits = function (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; + + Object.defineProperty(exports, '__esModule', { + value: true + }); + + var _CircleImageBase2 = __webpack_require__(105); + + var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2); + + 'use strict'; + + var CircularImage = (function (_CircleImageBase) { + function CircularImage(options, body, labelModule, imageObj) { + _classCallCheck(this, CircularImage); + + _get(Object.getPrototypeOf(CircularImage.prototype), 'constructor', this).call(this, options, body, labelModule); + this.imageObj = imageObj; + this._swapToImageResizeWhenImageLoaded = true; + } + + _inherits(CircularImage, _CircleImageBase); + + _createClass(CircularImage, [{ + key: 'resize', + value: function resize() { + if (this.imageObj.src === undefined || this.imageObj.width === undefined || this.imageObj.height === undefined) { + if (!this.width) { + var diameter = this.options.size * 2; + this.width = diameter; + this.height = diameter; + this._swapToImageResizeWhenImageLoaded = true; + } + } else { + if (this._swapToImageResizeWhenImageLoaded) { + this.width = undefined; + this.height = undefined; + this._swapToImageResizeWhenImageLoaded = false; + } + this._resizeImage(); } - this.generated = true; } }, { - key: '_moveSelector', + key: 'draw', + value: function draw(ctx, x, y, selected, hover) { + this.resize(); - /** - * move the selector. This is called by hammer functions. - * - * @param event - * @private - */ - value: function _moveSelector(event) { - var rect = this.colorPickerDiv.getBoundingClientRect(); - var left = event.center.x - rect.left; - var top = event.center.y - rect.top; + this.left = x - this.width / 2; + this.top = y - this.height / 2; - var centerY = 0.5 * this.colorPickerDiv.clientHeight; - var centerX = 0.5 * this.colorPickerDiv.clientWidth; + var size = Math.min(0.5 * this.height, 0.5 * this.width); + this._drawRawCircle(ctx, x, y, selected, hover, size); - var x = left - centerX; - var y = top - centerY; + ctx.save(); + ctx.circle(x, y, size); + ctx.stroke(); + ctx.clip(); - var angle = Math.atan2(x, y); - var radius = 0.98 * Math.min(Math.sqrt(x * x + y * y), centerX); + this._drawImageAtPosition(ctx); - var newTop = Math.cos(angle) * radius + centerY; - var newLeft = Math.sin(angle) * radius + centerX; + ctx.restore(); - this.colorPickerSelector.style.top = newTop - 0.5 * this.colorPickerSelector.clientHeight + 'px'; - this.colorPickerSelector.style.left = newLeft - 0.5 * this.colorPickerSelector.clientWidth + 'px'; + this.boundingBox.top = y - this.options.size; + this.boundingBox.left = x - this.options.size; + this.boundingBox.right = x + this.options.size; + this.boundingBox.bottom = y + this.options.size; - // set color - var h = angle / (2 * Math.PI); - h = h < 0 ? h + 1 : h; - var s = radius / this.r; - var hsv = util.RGBToHSV(this.color.r, this.color.g, this.color.b); - hsv.h = h; - hsv.s = s; - var rgba = util.HSVToRGB(hsv.h, hsv.s, hsv.v); - rgba.a = this.color.a; - this.color = rgba; + this._drawImageLabel(ctx, x, y, selected); - // update previews - this.initialColorDiv.style.backgroundColor = 'rgba(' + this.initialColor.r + ',' + this.initialColor.g + ',' + this.initialColor.b + ',' + this.initialColor.a + ')'; - this.newColorDiv.style.backgroundColor = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')'; + this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left); + this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width); + this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height); + } + }, { + key: 'distanceToBorder', + value: function distanceToBorder(ctx, angle) { + this.resize(ctx); + return this._distanceToBorder(angle); } }]); - return ColorPicker; - })(); + return CircularImage; + })(_CircleImageBase3['default']); - exports['default'] = ColorPicker; + exports['default'] = CircularImage; module.exports = exports['default']; /***/ }, -/* 83 */ +/* 90 */ /***/ 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. - */ + 'use strict'; - // 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 () { + var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; - 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__) { - - 'use strict'; - - var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; - - 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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; - - var _inherits = function (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; - - Object.defineProperty(exports, '__esModule', { - value: true - }); - - var _NodeBase2 = __webpack_require__(104); - - var _NodeBase3 = _interopRequireWildcard(_NodeBase2); - - 'use strict'; - - var Box = (function (_NodeBase) { - function Box(options, body, labelModule) { - _classCallCheck(this, Box); - - _get(Object.getPrototypeOf(Box.prototype), 'constructor', this).call(this, options, body, labelModule); - } - - _inherits(Box, _NodeBase); - - _createClass(Box, [{ - key: 'resize', - value: function resize(ctx, selected) { - if (this.width === undefined) { - var margin = 5; - var textSize = this.labelModule.getTextSize(ctx, selected); - this.width = textSize.width + 2 * margin; - this.height = textSize.height + 2 * margin; - } - } - }, { - key: 'draw', - value: function draw(ctx, x, y, selected, hover) { - this.resize(ctx, selected); - this.left = x - this.width / 2; - this.top = y - this.height / 2; - - var borderWidth = this.options.borderWidth; - var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; - - ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; - ctx.lineWidth = selected ? selectionLineWidth : borderWidth; - ctx.lineWidth /= this.body.view.scale; - ctx.lineWidth = Math.min(this.width, ctx.lineWidth); - - ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background; - - ctx.roundRect(this.left, this.top, this.width, this.height, this.options.size); - - // draw shadow if enabled - this.enableShadow(ctx); - ctx.fill(); - - // disable shadows for other elements. - this.disableShadow(ctx); - - ctx.stroke(); - - this.boundingBox.top = this.top; - this.boundingBox.left = this.left; - this.boundingBox.right = this.left + this.width; - this.boundingBox.bottom = this.top + this.height; - - this.labelModule.draw(ctx, x, y, selected); - } - }, { - key: 'distanceToBorder', - value: function distanceToBorder(ctx, angle) { - this.resize(ctx); - var a = this.width / 2; - var b = this.height / 2; - var w = Math.sin(angle) * a; - var h = Math.cos(angle) * b; - return a * b / Math.sqrt(w * w + h * h); - } - }]); - - return Box; - })(_NodeBase3['default']); - - exports['default'] = Box; - module.exports = exports['default']; - -/***/ }, -/* 88 */ -/***/ function(module, exports, __webpack_require__) { - - 'use strict'; - - var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; - - 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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; - - var _inherits = function (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; - - Object.defineProperty(exports, '__esModule', { - value: true - }); - - var _CircleImageBase2 = __webpack_require__(105); - - var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2); - - 'use strict'; - - var Circle = (function (_CircleImageBase) { - function Circle(options, body, labelModule) { - _classCallCheck(this, Circle); - - _get(Object.getPrototypeOf(Circle.prototype), 'constructor', this).call(this, options, body, labelModule); - } - - _inherits(Circle, _CircleImageBase); - - _createClass(Circle, [{ - key: 'resize', - value: function resize(ctx, selected) { - if (this.width === undefined) { - var margin = 5; - var textSize = this.labelModule.getTextSize(ctx, selected); - var diameter = Math.max(textSize.width, textSize.height) + 2 * margin; - this.options.size = diameter / 2; - - this.width = diameter; - this.height = diameter; - } - } - }, { - key: 'draw', - value: function draw(ctx, x, y, selected, hover) { - this.resize(ctx, selected); - this.left = x - this.width / 2; - this.top = y - this.height / 2; - - this._drawRawCircle(ctx, x, y, selected, hover, this.options.size); - - this.boundingBox.top = y - this.options.size; - this.boundingBox.left = x - this.options.size; - this.boundingBox.right = x + this.options.size; - this.boundingBox.bottom = y + this.options.size; - - this.labelModule.draw(ctx, x, y, selected); - } - }, { - key: 'distanceToBorder', - value: function distanceToBorder(ctx, angle) { - this.resize(ctx); - var a = this.width / 2; - var b = this.height / 2; - var w = Math.sin(angle) * a; - var h = Math.cos(angle) * b; - return a * b / Math.sqrt(w * w + h * h); - } - }]); - - return Circle; - })(_CircleImageBase3['default']); - - exports['default'] = Circle; - module.exports = exports['default']; - -/***/ }, -/* 89 */ -/***/ function(module, exports, __webpack_require__) { - - 'use strict'; - - var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; - - 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 _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; - - var _inherits = function (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; - - Object.defineProperty(exports, '__esModule', { - value: true - }); - - var _CircleImageBase2 = __webpack_require__(105); - - var _CircleImageBase3 = _interopRequireWildcard(_CircleImageBase2); - - 'use strict'; - - var CircularImage = (function (_CircleImageBase) { - function CircularImage(options, body, labelModule, imageObj) { - _classCallCheck(this, CircularImage); - - _get(Object.getPrototypeOf(CircularImage.prototype), 'constructor', this).call(this, options, body, labelModule); - this.imageObj = imageObj; - this._swapToImageResizeWhenImageLoaded = true; - } - - _inherits(CircularImage, _CircleImageBase); - - _createClass(CircularImage, [{ - key: 'resize', - value: function resize() { - if (this.imageObj.src === undefined || this.imageObj.width === undefined || this.imageObj.height === undefined) { - if (!this.width) { - var diameter = this.options.size * 2; - this.width = diameter; - this.height = diameter; - this._swapToImageResizeWhenImageLoaded = true; - } - } else { - if (this._swapToImageResizeWhenImageLoaded) { - this.width = undefined; - this.height = undefined; - this._swapToImageResizeWhenImageLoaded = false; - } - this._resizeImage(); - } - } - }, { - key: 'draw', - value: function draw(ctx, x, y, selected, hover) { - this.resize(); - - this.left = x - this.width / 2; - this.top = y - this.height / 2; - - var size = Math.min(0.5 * this.height, 0.5 * this.width); - this._drawRawCircle(ctx, x, y, selected, hover, size); - - ctx.save(); - ctx.circle(x, y, size); - ctx.stroke(); - ctx.clip(); - - this._drawImageAtPosition(ctx); - - ctx.restore(); - - this.boundingBox.top = y - this.options.size; - this.boundingBox.left = x - this.options.size; - this.boundingBox.right = x + this.options.size; - this.boundingBox.bottom = y + this.options.size; - - this._drawImageLabel(ctx, x, y, selected); - - this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left); - this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width); - this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height); - } - }, { - key: 'distanceToBorder', - value: function distanceToBorder(ctx, angle) { - this.resize(ctx); - return this._distanceToBorder(angle); - } - }]); - - return CircularImage; - })(_CircleImageBase3['default']); - - exports['default'] = CircularImage; - module.exports = exports['default']; - -/***/ }, -/* 90 */ -/***/ function(module, exports, __webpack_require__) { - - 'use strict'; - - var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }; - - 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; }; })(); @@ -39173,216 +38894,580 @@ return /******/ (function(modules) { // webpackBootstrap /* 109 */ /***/ function(module, exports, __webpack_require__) { - /* WEBPACK VAR INJECTION */(function(global) {'use strict'; + 'use strict'; - var _rng; + var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }; - var globalVar = window !== undefined ? window : global; - if (globalVar.crypto && crypto.getRandomValues) { - // WHATWG crypto-based RNG - http://wiki.whatwg.org/wiki/Crypto - // Moderately fast, high quality - var _rnds8 = new Uint8Array(16); - _rng = function whatwgRNG() { - crypto.getRandomValues(_rnds8); - return _rnds8; - }; - } + 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 (!_rng) { - // Math.random()-based (RNG) - // - // If all else fails, use Math.random(). It's fast, but is of unspecified - // quality. - var _rnds = new Array(16); - _rng = function () { - for (var i = 0, r; i < 16; i++) { - if ((i & 3) === 0) r = Math.random() * 4294967296; - _rnds[i] = r >>> ((i & 3) << 3) & 255; + Object.defineProperty(exports, '__esModule', { + value: true + }); + var Hammer = __webpack_require__(41); + var hammerUtil = __webpack_require__(45); + var util = __webpack_require__(1); + + var ColorPicker = (function () { + function ColorPicker() { + var pixelRatio = arguments[0] === undefined ? 1 : arguments[0]; + + _classCallCheck(this, ColorPicker); + + this.pixelRatio = pixelRatio; + this.generated = false; + this.centerCoordinates = { x: 289 / 2, y: 289 / 2 }; + this.r = 289 * 0.49; + this.color = { r: 255, g: 255, b: 255, a: 1 }; + this.hueCircle = undefined; + this.initialColor = { r: 255, g: 255, b: 255, a: 1 }; + this.previousColor = undefined; + this.applied = false; + + // bound by + this.updateCallback = function () {}; + + // create all DOM elements + this._create(); + } + + _createClass(ColorPicker, [{ + key: 'insertTo', + + /** + * this inserts the colorPicker into a div from the DOM + * @param container + */ + value: function insertTo(container) { + if (this.hammer !== undefined) { + this.hammer.destroy(); + this.hammer = undefined; + } + this.container = container; + this.container.appendChild(this.frame); + this._bindHammer(); + + this._setSize(); } + }, { + key: 'setCallback', - return _rnds; - }; - } + /** + * the callback is executed on apply and save. Bind it to the application + * @param callback + */ + value: function setCallback(callback) { + if (typeof callback === 'function') { + this.updateCallback = callback; + } else { + throw new Error('Function attempted to set as colorPicker callback is not a function.'); + } + } + }, { + key: '_isColorString', + value: function _isColorString(color) { + var htmlColors = { black: '#000000', navy: '#000080', darkblue: '#00008B', mediumblue: '#0000CD', blue: '#0000FF', darkgreen: '#006400', green: '#008000', teal: '#008080', darkcyan: '#008B8B', deepskyblue: '#00BFFF', darkturquoise: '#00CED1', mediumspringgreen: '#00FA9A', lime: '#00FF00', springgreen: '#00FF7F', aqua: '#00FFFF', cyan: '#00FFFF', midnightblue: '#191970', dodgerblue: '#1E90FF', lightseagreen: '#20B2AA', forestgreen: '#228B22', seagreen: '#2E8B57', darkslategray: '#2F4F4F', limegreen: '#32CD32', mediumseagreen: '#3CB371', turquoise: '#40E0D0', royalblue: '#4169E1', steelblue: '#4682B4', darkslateblue: '#483D8B', mediumturquoise: '#48D1CC', indigo: '#4B0082', darkolivegreen: '#556B2F', cadetblue: '#5F9EA0', cornflowerblue: '#6495ED', mediumaquamarine: '#66CDAA', dimgray: '#696969', slateblue: '#6A5ACD', olivedrab: '#6B8E23', slategray: '#708090', lightslategray: '#778899', mediumslateblue: '#7B68EE', lawngreen: '#7CFC00', chartreuse: '#7FFF00', aquamarine: '#7FFFD4', maroon: '#800000', purple: '#800080', olive: '#808000', gray: '#808080', skyblue: '#87CEEB', lightskyblue: '#87CEFA', blueviolet: '#8A2BE2', darkred: '#8B0000', darkmagenta: '#8B008B', saddlebrown: '#8B4513', darkseagreen: '#8FBC8F', lightgreen: '#90EE90', mediumpurple: '#9370D8', darkviolet: '#9400D3', palegreen: '#98FB98', darkorchid: '#9932CC', yellowgreen: '#9ACD32', sienna: '#A0522D', brown: '#A52A2A', darkgray: '#A9A9A9', lightblue: '#ADD8E6', greenyellow: '#ADFF2F', paleturquoise: '#AFEEEE', lightsteelblue: '#B0C4DE', powderblue: '#B0E0E6', firebrick: '#B22222', darkgoldenrod: '#B8860B', mediumorchid: '#BA55D3', rosybrown: '#BC8F8F', darkkhaki: '#BDB76B', silver: '#C0C0C0', mediumvioletred: '#C71585', indianred: '#CD5C5C', peru: '#CD853F', chocolate: '#D2691E', tan: '#D2B48C', lightgrey: '#D3D3D3', palevioletred: '#D87093', thistle: '#D8BFD8', orchid: '#DA70D6', goldenrod: '#DAA520', crimson: '#DC143C', gainsboro: '#DCDCDC', plum: '#DDA0DD', burlywood: '#DEB887', lightcyan: '#E0FFFF', lavender: '#E6E6FA', darksalmon: '#E9967A', violet: '#EE82EE', palegoldenrod: '#EEE8AA', lightcoral: '#F08080', khaki: '#F0E68C', aliceblue: '#F0F8FF', honeydew: '#F0FFF0', azure: '#F0FFFF', sandybrown: '#F4A460', wheat: '#F5DEB3', beige: '#F5F5DC', whitesmoke: '#F5F5F5', mintcream: '#F5FFFA', ghostwhite: '#F8F8FF', salmon: '#FA8072', antiquewhite: '#FAEBD7', linen: '#FAF0E6', lightgoldenrodyellow: '#FAFAD2', oldlace: '#FDF5E6', red: '#FF0000', fuchsia: '#FF00FF', magenta: '#FF00FF', deeppink: '#FF1493', orangered: '#FF4500', tomato: '#FF6347', hotpink: '#FF69B4', coral: '#FF7F50', darkorange: '#FF8C00', lightsalmon: '#FFA07A', orange: '#FFA500', lightpink: '#FFB6C1', pink: '#FFC0CB', gold: '#FFD700', peachpuff: '#FFDAB9', navajowhite: '#FFDEAD', moccasin: '#FFE4B5', bisque: '#FFE4C4', mistyrose: '#FFE4E1', blanchedalmond: '#FFEBCD', papayawhip: '#FFEFD5', lavenderblush: '#FFF0F5', seashell: '#FFF5EE', cornsilk: '#FFF8DC', lemonchiffon: '#FFFACD', floralwhite: '#FFFAF0', snow: '#FFFAFA', yellow: '#FFFF00', lightyellow: '#FFFFE0', ivory: '#FFFFF0', white: '#FFFFFF' }; + if (typeof color === 'string') { + return htmlColors[color]; + } + } + }, { + key: 'setColor', - // uuid.js - // - // Copyright (c) 2010-2012 Robert Kieffer - // MIT License - http://opensource.org/licenses/mit-license.php + /** + * Set the color of the colorPicker + * Supported formats: + * 'red' --> HTML color string + * '#ffffff' --> hex string + * 'rbg(255,255,255)' --> rgb string + * 'rgba(255,255,255,1.0)' --> rgba string + * {r:255,g:255,b:255} --> rgb object + * {r:255,g:255,b:255,a:1.0} --> rgba object + * @param color + * @param setInitial + */ + value: function setColor(color) { + var setInitial = arguments[1] === undefined ? true : arguments[1]; - // Unique ID creation requires a high quality random # generator. We feature - // detect to determine the best RNG source, normalizing to a function that - // returns 128-bits of randomness, since that's what's usually required + if (color === 'none') { + return; + } - //var _rng = require('./rng'); + var rgba = undefined; - // Maps for number <-> hex string conversion - var _byteToHex = []; - var _hexToByte = {}; - for (var i = 0; i < 256; i++) { - _byteToHex[i] = (i + 256).toString(16).substr(1); - _hexToByte[_byteToHex[i]] = i; - } + // if a html color shorthand is used, convert to hex + var htmlColor = this._isColorString(color); + if (htmlColor !== undefined) { + color = htmlColor; + } - // **`parse()` - Parse a UUID into it's component bytes** - function parse(s, buf, offset) { - var i = buf && offset || 0, - ii = 0; + // check format + if (util.isString(color) === true) { + if (util.isValidRGB(color) === true) { + var rgbaArray = color.substr(4).substr(0, color.length - 5).split(','); + rgba = { r: rgbaArray[0], g: rgbaArray[1], b: rgbaArray[2], a: 1 }; + } else if (util.isValidRGBA(color) === true) { + var rgbaArray = color.substr(5).substr(0, color.length - 6).split(','); + rgba = { r: rgbaArray[0], g: rgbaArray[1], b: rgbaArray[2], a: rgbaArray[3] }; + } else if (util.isValidHex(color) === true) { + var rgbObj = util.hexToRGB(color); + rgba = { r: rgbObj.r, g: rgbObj.g, b: rgbObj.b, a: 1 }; + } + } else { + if (color instanceof Object) { + if (color.r !== undefined && color.g !== undefined && color.b !== undefined) { + var alpha = color.a !== undefined ? color.a : '1.0'; + rgba = { r: color.r, g: color.g, b: color.b, a: alpha }; + } + } + } - buf = buf || []; - s.toLowerCase().replace(/[0-9a-f]{2}/g, function (oct) { - if (ii < 16) { - // Don't overflow! - buf[i + ii++] = _hexToByte[oct]; + // set color + if (rgba === undefined) { + throw new Error('Unknown color passed to the colorPicker. Supported are strings: rgb, hex, rgba. Object: rgb ({r:r,g:g,b:b,[a:a]}). Supplied: ' + JSON.stringify(color)); + } else { + this._setColor(rgba, setInitial); + } } - }); + }, { + key: 'show', - // Zero out remaining bytes if string was short - while (ii < 16) { - buf[i + ii++] = 0; - } + /** + * this shows the color picker at a location. The hue circle is constructed once and stored. + * @param x + * @param y + */ + value: function show(x, y) { + this.applied = false; + this.frame.style.display = 'block'; + this.frame.style.top = y + 'px'; + this.frame.style.left = x + 'px'; + this._generateHueCircle(); + } + }, { + key: '_hide', - return buf; - } + // ------------------------------------------ PRIVATE ----------------------------- // - // **`unparse()` - Convert UUID byte array (ala parse()) into a string** - function unparse(buf, offset) { - var i = offset || 0, - bth = _byteToHex; - return bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]] + '-' + bth[buf[i++]] + bth[buf[i++]] + '-' + bth[buf[i++]] + bth[buf[i++]] + '-' + bth[buf[i++]] + bth[buf[i++]] + '-' + bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]] + bth[buf[i++]]; - } + /** + * Hide the picker. Is called by the cancel button. + * Optional boolean to store the previous color for easy access later on. + * @param storePrevious + * @private + */ + value: function _hide() { + var storePrevious = arguments[0] === undefined ? true : arguments[0]; - // **`v1()` - Generate time-based UUID** - // - // Inspired by https://github.com/LiosK/UUID.js - // and http://docs.python.org/library/uuid.html + // store the previous color for next time; + if (storePrevious === true) { + this.previousColor = util.extend({}, this.color); + } - // random #'s we need to init node and clockseq - var _seedBytes = _rng(); + if (this.applied === true) { + this.updateCallback(this.initialColor); + } - // Per 4.5, create and 48-bit node id, (47 random bits + multicast bit = 1) - var _nodeId = [_seedBytes[0] | 1, _seedBytes[1], _seedBytes[2], _seedBytes[3], _seedBytes[4], _seedBytes[5]]; + this.frame.style.display = 'none'; + } + }, { + key: '_save', - // Per 4.2.2, randomize (14 bit) clockseq - var _clockseq = (_seedBytes[6] << 8 | _seedBytes[7]) & 16383; + /** + * bound to the save button. Saves and hides. + * @private + */ + value: function _save() { + this.updateCallback(this.color); + this.applied = false; + this._hide(); + } + }, { + key: '_apply', - // Previous uuid creation time - var _lastMSecs = 0, - _lastNSecs = 0; + /** + * Bound to apply button. Saves but does not close. Is undone by the cancel button. + * @private + */ + value: function _apply() { + this.applied = true; + this.updateCallback(this.color); + this._updatePicker(this.color); + } + }, { + key: '_loadLast', - // See https://github.com/broofa/node-uuid for API details - function v1(options, buf, offset) { - var i = buf && offset || 0; - var b = buf || []; + /** + * load the color from the previous session. + * @private + */ + value: function _loadLast() { + if (this.previousColor !== undefined) { + this.setColor(this.previousColor, false); + } else { + alert('There is no last color to load...'); + } + } + }, { + key: '_setColor', - options = options || {}; + /** + * set the color, place the picker + * @param rgba + * @param setInitial + * @private + */ + value: function _setColor(rgba) { + var setInitial = arguments[1] === undefined ? true : arguments[1]; - var clockseq = options.clockseq !== undefined ? options.clockseq : _clockseq; + // store the initial color + if (setInitial === true) { + this.initialColor = util.extend({}, rgba); + } - // UUID timestamps are 100 nano-second units since the Gregorian epoch, - // (1582-10-15 00:00). JSNumbers aren't precise enough for this, so - // time is handled internally as 'msecs' (integer milliseconds) and 'nsecs' - // (100-nanoseconds offset from msecs) since unix epoch, 1970-01-01 00:00. - var msecs = options.msecs !== undefined ? options.msecs : new Date().getTime(); + this.color = rgba; + var hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b); - // Per 4.2.1.2, use count of uuid's generated during the current clock - // cycle to simulate higher resolution clock - var nsecs = options.nsecs !== undefined ? options.nsecs : _lastNSecs + 1; + var angleConvert = 2 * Math.PI; + var radius = this.r * hsv.s; + var x = this.centerCoordinates.x + radius * Math.sin(angleConvert * hsv.h); + var y = this.centerCoordinates.y + radius * Math.cos(angleConvert * hsv.h); - // Time since last uuid creation (in msecs) - var dt = msecs - _lastMSecs + (nsecs - _lastNSecs) / 10000; + this.colorPickerSelector.style.left = x - 0.5 * this.colorPickerSelector.clientWidth + 'px'; + this.colorPickerSelector.style.top = y - 0.5 * this.colorPickerSelector.clientHeight + 'px'; - // Per 4.2.1.2, Bump clockseq on clock regression - if (dt < 0 && options.clockseq === undefined) { - clockseq = clockseq + 1 & 16383; - } + this._updatePicker(rgba); + } + }, { + key: '_setOpacity', - // Reset nsecs if clock regresses (new clockseq) or we've moved onto a new - // time interval - if ((dt < 0 || msecs > _lastMSecs) && options.nsecs === undefined) { - nsecs = 0; - } + /** + * bound to opacity control + * @param value + * @private + */ + value: function _setOpacity(value) { + this.color.a = value / 100; + this._updatePicker(this.color); + } + }, { + key: '_setBrightness', - // Per 4.2.1.2 Throw error if too many uuids are requested - if (nsecs >= 10000) { - throw new Error('uuid.v1(): Can\'t create more than 10M uuids/sec'); - } + /** + * bound to brightness control + * @param value + * @private + */ + value: function _setBrightness(value) { + var hsv = util.RGBToHSV(this.color.r, this.color.g, this.color.b); + hsv.v = value / 100; + var rgba = util.HSVToRGB(hsv.h, hsv.s, hsv.v); + rgba.a = this.color.a; + this.color = rgba; + this._updatePicker(); + } + }, { + key: '_updatePicker', - _lastMSecs = msecs; - _lastNSecs = nsecs; - _clockseq = clockseq; + /** + * update the colorpicker. A black circle overlays the hue circle to mimic the brightness decreasing. + * @param rgba + * @private + */ + value: function _updatePicker() { + var rgba = arguments[0] === undefined ? this.color : arguments[0]; - // Per 4.1.4 - Convert from unix epoch to Gregorian epoch - msecs += 12219292800000; + var hsv = util.RGBToHSV(rgba.r, rgba.g, rgba.b); + var ctx = this.colorPickerCanvas.getContext('2d'); + if (this.pixelRation === undefined) { + this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1); + } + ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); - // `time_low` - var tl = ((msecs & 268435455) * 10000 + nsecs) % 4294967296; - b[i++] = tl >>> 24 & 255; - b[i++] = tl >>> 16 & 255; - b[i++] = tl >>> 8 & 255; - b[i++] = tl & 255; + // clear the canvas + var w = this.colorPickerCanvas.clientWidth; + var h = this.colorPickerCanvas.clientHeight; + ctx.clearRect(0, 0, w, h); - // `time_mid` - var tmh = msecs / 4294967296 * 10000 & 268435455; - b[i++] = tmh >>> 8 & 255; - b[i++] = tmh & 255; + ctx.putImageData(this.hueCircle, 0, 0); + ctx.fillStyle = 'rgba(0,0,0,' + (1 - hsv.v) + ')'; + ctx.circle(this.centerCoordinates.x, this.centerCoordinates.y, this.r); + ctx.fill(); - // `time_high_and_version` - b[i++] = tmh >>> 24 & 15 | 16; // include version - b[i++] = tmh >>> 16 & 255; + this.brightnessRange.value = 100 * hsv.v; + this.opacityRange.value = 100 * rgba.a; - // `clock_seq_hi_and_reserved` (Per 4.2.2 - include variant) - b[i++] = clockseq >>> 8 | 128; + this.initialColorDiv.style.backgroundColor = 'rgba(' + this.initialColor.r + ',' + this.initialColor.g + ',' + this.initialColor.b + ',' + this.initialColor.a + ')'; + this.newColorDiv.style.backgroundColor = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')'; + } + }, { + key: '_setSize', - // `clock_seq_low` - b[i++] = clockseq & 255; + /** + * used by create to set the size of the canvas. + * @private + */ + value: function _setSize() { + this.colorPickerCanvas.style.width = '100%'; + this.colorPickerCanvas.style.height = '100%'; - // `node` - var node = options.node || _nodeId; - for (var n = 0; n < 6; n++) { - b[i + n] = node[n]; - } + this.colorPickerCanvas.width = 289 * this.pixelRatio; + this.colorPickerCanvas.height = 289 * this.pixelRatio; + } + }, { + key: '_create', - return buf ? buf : unparse(b); - } + /** + * create all dom elements + * TODO: cleanup, lots of similar dom elements + * @private + */ + value: function _create() { + this.frame = document.createElement('div'); + this.frame.className = 'vis-color-picker'; - // **`v4()` - Generate random UUID** + this.colorPickerDiv = document.createElement('div'); + this.colorPickerSelector = document.createElement('div'); + this.colorPickerSelector.className = 'vis-selector'; + this.colorPickerDiv.appendChild(this.colorPickerSelector); - // See https://github.com/broofa/node-uuid for API details - function v4(options, buf, offset) { - // Deprecated - 'format' argument, as supported in v1.2 - var i = buf && offset || 0; + this.colorPickerCanvas = document.createElement('canvas'); + this.colorPickerDiv.appendChild(this.colorPickerCanvas); - if (typeof options == 'string') { - buf = options == 'binary' ? new Array(16) : null; - options = null; - } - options = options || {}; + if (!this.colorPickerCanvas.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.colorPickerCanvas.appendChild(noCanvas); + } else { + var ctx = this.colorPickerCanvas.getContext('2d'); + this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1); - var rnds = options.random || (options.rng || _rng)(); + this.colorPickerCanvas.getContext('2d').setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); + } - // Per 4.4, set bits for version and `clock_seq_hi_and_reserved` - rnds[6] = rnds[6] & 15 | 64; - rnds[8] = rnds[8] & 63 | 128; + this.colorPickerDiv.className = 'vis-color'; - // Copy bytes to buffer, if provided - if (buf) { - for (var ii = 0; ii < 16; ii++) { - buf[i + ii] = rnds[ii]; + this.opacityDiv = document.createElement('div'); + this.opacityDiv.className = 'vis-opacity'; + + this.brightnessDiv = document.createElement('div'); + this.brightnessDiv.className = 'vis-brightness'; + + this.arrowDiv = document.createElement('div'); + this.arrowDiv.className = 'vis-arrow'; + + this.opacityRange = document.createElement('input'); + this.opacityRange.type = 'range'; + this.opacityRange.min = '0'; + this.opacityRange.max = '100'; + this.opacityRange.value = '100'; + this.opacityRange.className = 'vis-range'; + + this.brightnessRange = document.createElement('input'); + this.brightnessRange.type = 'range'; + this.brightnessRange.min = '0'; + this.brightnessRange.max = '100'; + this.brightnessRange.value = '100'; + this.brightnessRange.className = 'vis-range'; + + this.opacityDiv.appendChild(this.opacityRange); + this.brightnessDiv.appendChild(this.brightnessRange); + + var me = this; + this.opacityRange.onchange = function () { + me._setOpacity(this.value); + }; + this.opacityRange.oninput = function () { + me._setOpacity(this.value); + }; + this.brightnessRange.onchange = function () { + me._setBrightness(this.value); + }; + this.brightnessRange.oninput = function () { + me._setBrightness(this.value); + }; + + this.brightnessLabel = document.createElement('div'); + this.brightnessLabel.className = 'vis-label vis-brightness'; + this.brightnessLabel.innerHTML = 'brightness:'; + + this.opacityLabel = document.createElement('div'); + this.opacityLabel.className = 'vis-label vis-opacity'; + this.opacityLabel.innerHTML = 'opacity:'; + + this.newColorDiv = document.createElement('div'); + this.newColorDiv.className = 'vis-new-color'; + this.newColorDiv.innerHTML = 'new'; + + this.initialColorDiv = document.createElement('div'); + this.initialColorDiv.className = 'vis-initial-color'; + this.initialColorDiv.innerHTML = 'initial'; + + this.cancelButton = document.createElement('div'); + this.cancelButton.className = 'vis-button vis-cancel'; + this.cancelButton.innerHTML = 'cancel'; + this.cancelButton.onclick = this._hide.bind(this, false); + + this.applyButton = document.createElement('div'); + this.applyButton.className = 'vis-button vis-apply'; + this.applyButton.innerHTML = 'apply'; + this.applyButton.onclick = this._apply.bind(this); + + this.saveButton = document.createElement('div'); + this.saveButton.className = 'vis-button vis-save'; + this.saveButton.innerHTML = 'save'; + this.saveButton.onclick = this._save.bind(this); + + this.loadButton = document.createElement('div'); + this.loadButton.className = 'vis-button vis-load'; + this.loadButton.innerHTML = 'load last'; + this.loadButton.onclick = this._loadLast.bind(this); + + this.frame.appendChild(this.colorPickerDiv); + this.frame.appendChild(this.arrowDiv); + this.frame.appendChild(this.brightnessLabel); + this.frame.appendChild(this.brightnessDiv); + this.frame.appendChild(this.opacityLabel); + this.frame.appendChild(this.opacityDiv); + this.frame.appendChild(this.newColorDiv); + this.frame.appendChild(this.initialColorDiv); + + this.frame.appendChild(this.cancelButton); + this.frame.appendChild(this.applyButton); + this.frame.appendChild(this.saveButton); + this.frame.appendChild(this.loadButton); } - } + }, { + key: '_bindHammer', - return buf || unparse(rnds); - } + /** + * bind hammer to the color picker + * @private + */ + value: function _bindHammer() { + var _this = this; - // Export public API - var uuid = v4; - uuid.v1 = v1; - uuid.v4 = v4; - uuid.parse = parse; - uuid.unparse = unparse; + this.drag = {}; + this.pinch = {}; + this.hammer = new Hammer(this.colorPickerCanvas); + this.hammer.get('pinch').set({ enable: true }); - module.exports = uuid; - /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()))) + hammerUtil.onTouch(this.hammer, function (event) { + _this._moveSelector(event); + }); + this.hammer.on('tap', function (event) { + _this._moveSelector(event); + }); + this.hammer.on('panstart', function (event) { + _this._moveSelector(event); + }); + this.hammer.on('panmove', function (event) { + _this._moveSelector(event); + }); + this.hammer.on('panend', function (event) { + _this._moveSelector(event); + }); + } + }, { + key: '_generateHueCircle', + + /** + * generate the hue circle. This is relatively heavy (200ms) and is done only once on the first time it is shown. + * @private + */ + value: function _generateHueCircle() { + if (this.generated === false) { + var ctx = this.colorPickerCanvas.getContext('2d'); + if (this.pixelRation === undefined) { + this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1); + } + ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); + + // clear the canvas + var w = this.colorPickerCanvas.clientWidth; + var h = this.colorPickerCanvas.clientHeight; + ctx.clearRect(0, 0, w, h); + + // draw hue circle + var x = undefined, + y = undefined, + hue = undefined, + sat = undefined; + this.centerCoordinates = { x: w * 0.5, y: h * 0.5 }; + this.r = 0.49 * w; + var angleConvert = 2 * Math.PI / 360; + var hfac = 1 / 360; + var sfac = 1 / this.r; + var rgb = undefined; + for (hue = 0; hue < 360; hue++) { + for (sat = 0; sat < this.r; sat++) { + x = this.centerCoordinates.x + sat * Math.sin(angleConvert * hue); + y = this.centerCoordinates.y + sat * Math.cos(angleConvert * hue); + rgb = util.HSVToRGB(hue * hfac, sat * sfac, 1); + ctx.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')'; + ctx.fillRect(x - 0.5, y - 0.5, 2, 2); + } + } + ctx.strokeStyle = 'rgba(0,0,0,1)'; + ctx.circle(this.centerCoordinates.x, this.centerCoordinates.y, this.r); + ctx.stroke(); + + this.hueCircle = ctx.getImageData(0, 0, w, h); + } + this.generated = true; + } + }, { + key: '_moveSelector', + + /** + * move the selector. This is called by hammer functions. + * + * @param event + * @private + */ + value: function _moveSelector(event) { + var rect = this.colorPickerDiv.getBoundingClientRect(); + var left = event.center.x - rect.left; + var top = event.center.y - rect.top; + + var centerY = 0.5 * this.colorPickerDiv.clientHeight; + var centerX = 0.5 * this.colorPickerDiv.clientWidth; + + var x = left - centerX; + var y = top - centerY; + + var angle = Math.atan2(x, y); + var radius = 0.98 * Math.min(Math.sqrt(x * x + y * y), centerX); + + var newTop = Math.cos(angle) * radius + centerY; + var newLeft = Math.sin(angle) * radius + centerX; + + this.colorPickerSelector.style.top = newTop - 0.5 * this.colorPickerSelector.clientHeight + 'px'; + this.colorPickerSelector.style.left = newLeft - 0.5 * this.colorPickerSelector.clientWidth + 'px'; + + // set color + var h = angle / (2 * Math.PI); + h = h < 0 ? h + 1 : h; + var s = radius / this.r; + var hsv = util.RGBToHSV(this.color.r, this.color.g, this.color.b); + hsv.h = h; + hsv.s = s; + var rgba = util.HSVToRGB(hsv.h, hsv.s, hsv.v); + rgba.a = this.color.a; + this.color = rgba; + + // update previews + this.initialColorDiv.style.backgroundColor = 'rgba(' + this.initialColor.r + ',' + this.initialColor.g + ',' + this.initialColor.b + ',' + this.initialColor.a + ')'; + this.newColorDiv.style.backgroundColor = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')'; + } + }]); + + return ColorPicker; + })(); + + exports['default'] = ColorPicker; + module.exports = exports['default']; /***/ } /******/ ]) diff --git a/docs/network/canvas.html b/docs/network/canvas.html index 48e095af..41b9770c 100644 --- a/docs/network/canvas.html +++ b/docs/network/canvas.html @@ -92,7 +92,8 @@ var options = { canvas:{ width:'100%', // other format: '400px' - height:'100%' + height:'100%', + autoResize: true } } @@ -118,6 +119,14 @@ network.setOptions(options); '100%' the height of the canvas. Can be in percentages or pixels (ie. '400px'). + + autoResize + Boolean + true + If true, the Network will automatically detect when its container is resized, and redraw itself + accordingly. If false, the Network can be forced to repaint after its container has been resized + using the function redraw() and setSize(). +

Methods

diff --git a/docs/network/interaction.html b/docs/network/interaction.html index 4a379e75..293b8832 100644 --- a/docs/network/interaction.html +++ b/docs/network/interaction.html @@ -120,7 +120,7 @@ network.setOptions(options); zoomView Boolean true When true, the user can zoom in. hoverEnabled Boolean false When true, the nodes use their hover colors when the mouse moves over them. navigationButtons Boolean false When true, navigation buttons are drawn on the network canvas. These are HTML buttons and can be completely customized using CSS. - tooltipDelay Object Object When nodes or edges have a defined 'title' field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS. The delay is the amount of time in milliseconds it takes before the tooltip is shown. + tooltipDelay Number Object When nodes or edges have a defined 'title' field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS. The delay is the amount of time in milliseconds it takes before the tooltip is shown. keyboard Object or Boolean Object When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object. keyboard.enabled Boolean false Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined. keyboard.speed.x Number 1 The speed at which the view moves in the x direction on pressing a key or pressing a navigation button. @@ -141,6 +141,7 @@ network.setOptions(options); { nodes: [Array of selected nodeIds], edges: [Array of selected edgeIds], + event: [Object] original click event, pointer: { DOM: {x:pointer_x, y:pointer_y}, canvas: {x:canvas_x, y:canvas_y} @@ -149,7 +150,7 @@ network.setOptions(options); Fired when the user clicks the mouse or taps on a touchscreen device. doubleClick same as click.Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double click is in fact 2 clicks, 2 click events are fired, followed by a double click event. If you do not want to use the click events if a double click event is fired, just check the time between click events before processing them. - rightClick same as click.Fired when the user click on the canvas with the right mouse button. The right mouse button does not select by default. You can use getNodeAt to select the node if you want. + oncontext same as click.Fired when the user click on the canvas with the right mouse button. The right mouse button does not select by default. You can use getNodeAt to select the node if you want. hold same as click.Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click event is also fired in this case. release same as click.Fired after drawing on the canvas has been completed. Can be used to draw on top of the network. select same as click.Fired when the selection has changed by user action. This means a node or edge has been selected, added to the selection or deselected. All select events are only triggerd on click and hold. @@ -159,6 +160,7 @@ network.setOptions(options); { nodes: [Array of selected nodeIds], edges: [Array of selected edgeIds], + event: [Object] original click event, pointer: { DOM: {x:pointer_x, y:pointer_y}, canvas: {x:canvas_x, y:canvas_y} @@ -172,6 +174,7 @@ network.setOptions(options); Fired when a node (or nodes) has (or have) been deselected by the user. The previous selection is the list of nodes and edges that were selected before the last user event. deselectEdgesame as deselectNode.Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is the list of nodes and edges that were selected before the last user event. dragStart same as click.Fired when starting a drag. + dragging same as click.Fired when dragging node(s) or the view. dragEnd same as click.Fired when the drag has finished. zoom {direction:'+'/'-'}Fired when the user zooms in or out. The properties tell you which direction the zoom is in. showPopup id of item corresponding to popupFired when the popup is shown. diff --git a/docs/network/manipulation.html b/docs/network/manipulation.html index b5db3941..2c0f083b 100644 --- a/docs/network/manipulation.html +++ b/docs/network/manipulation.html @@ -83,12 +83,12 @@