diff --git a/docs/css/style.css b/docs/css/style.css index f7048a9c..3a1d060e 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -106,6 +106,8 @@ table.events td:nth-child(2) { pre { margin: 20px 0; + white-space: pre-wrap; + max-width: 100%; } a code { diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html index 85829ad1..69d28ad6 100644 --- a/docs/graph3d/index.html +++ b/docs/graph3d/index.html @@ -386,6 +386,24 @@ var options = { Ratio of the size of the dots with respect to the width of the graph. + + dotSizeMinFraction + number + 0.5 + Size of minimum-value dot as a fraction of dotSizeRatio. + Applicable when using style dot-size. + + + + + dotSizeMaxFraction + number + 2.5 + Size of maximum-value dot as a fraction of dotSizeRatio. + Applicable when using style dot-size. + + + gridColor string diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 81e40f97..293f4cca 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -612,6 +612,7 @@ function (option, path) { hour: 'HH:mm', weekday: 'ddd D', day: 'D', + week: 'w', month: 'MMM', year: 'YYYY' }, @@ -622,6 +623,7 @@ function (option, path) { hour: 'ddd D MMMM', weekday: 'MMMM YYYY', day: 'MMMM YYYY', + week: 'MMMM YYYY', month: 'YYYY', year: '' } @@ -1024,6 +1026,13 @@ function (option, path) { visible. + + showTooltips + boolean + true + If true, items with titles will display a tooltip. If false, item tooltips are prevented from showing. + + stack boolean @@ -1044,7 +1053,7 @@ function (option, path) { function When moving items on the Timeline, they will be snapped to nice dates like full hours or days, depending on the current scale. The snap function can be replaced with a custom function, or can be set to null to disable snapping. The signature of the snap function is: 
function snap(date: Date, scale: string, step: number) : Date or number
- The parameter scale can be can be 'millisecond', 'second', 'minute', 'hour', 'weekday, 'day, 'month, or 'year'. The parameter step is a number like 1, 2, 4, 5. + The parameter scale can be can be 'millisecond', 'second', 'minute', 'hour', 'weekday, 'week', 'day, 'month, or 'year'. The parameter step is a number like 1, 2, 4, 5. @@ -1088,10 +1097,11 @@ function (option, path) { timeAxis.scale String none - Set a fixed scale for the time axis of the Timeline. Choose from 'millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'month', 'year'. Example usage: + Set a fixed scale for the time axis of the Timeline. Choose from 'millisecond', 'second', 'minute', 'hour', 'weekday', 'week', 'day', 'month', 'year'. Example usage: 
var options = {
   timeAxis: {scale: 'minute', step: 5}
 }
+

Note: The 'week' scale only works properly when locales are enabled.

@@ -1581,6 +1591,33 @@ timeline.off('select', onSelect); + + mouseDown + + Passes a properties object as returned by the method Timeline.getEventProperties(event). + + Fired when the mouse down event is triggered over a timeline element. + + + + + mouseUp + + Passes a properties object as returned by the method Timeline.getEventProperties(event). + + Fired when the mouse up event is triggered over a timeline element. + + + + + mouseMove + + Passes a properties object as returned by the method Timeline.getEventProperties(event). + + Fired when the mouse is moved over a timeline element. + + + groupDragged @@ -2023,6 +2060,9 @@ var options = { Daysvis-day1, vis-day2, ..., vis-day31 + + Weekvis-week1, vis-week2, ..., vis-week53 + Monthsvis-january, vis-february, vis-march, vis-april, vis-may, vis-june, vis-july, vis-august, vis-september, vis-october, vis-november, vis-december @@ -2030,6 +2070,9 @@ var options = { Yearsvis-year2014, vis-year2015, ... +

+ Note: the 'week' scale is not included in the automatic zoom levels as its scale is not a direct logical successor of 'days' nor a logical predecessor of 'months' +

Examples:

diff --git a/examples/graph3d/08_dot_cloud_size.html b/examples/graph3d/08_dot_cloud_size.html index 1d6fb47f..99ab8ffd 100644 --- a/examples/graph3d/08_dot_cloud_size.html +++ b/examples/graph3d/08_dot_cloud_size.html @@ -49,7 +49,9 @@ horizontal: -0.54, vertical: 0.5, distance: 1.6 - } + }, + dotSizeMinFraction: 0.5, + dotSizeMaxFraction: 2.5 }; // create our graph diff --git a/examples/network/other/saveAndLoad.html b/examples/network/other/saveAndLoad.html index ee71b528..6f96df34 100644 --- a/examples/network/other/saveAndLoad.html +++ b/examples/network/other/saveAndLoad.html @@ -71,15 +71,6 @@ draw(); } - function addContextualInformation(elem, index, array) { - addId(elem, index); - addConnections(elem, index); - } - - function addId(elem, index) { - elem.id = index; - } - function addConnections(elem, index) { // need to replace this with a tree of the network, then get child direct children of the element elem.connections = network.getConnectedNodes(index); @@ -107,7 +98,7 @@ var nodes = objectToArray(network.getPositions()); - nodes.forEach(addContextualInformation); + nodes.forEach(addConnections); // pretty print node data var exportValue = JSON.stringify(nodes, undefined, 2); @@ -141,30 +132,47 @@ return new vis.DataSet(networkNodes); } + function getNodeById(data, id) { + for (var n = 0; n < data.length; n++) { + if (data[n].id == id) { // double equals since id can be numeric or string + return data[n]; + } + }; + + throw 'Can not find id \'' + id + '\' in data'; + } + function getEdgeData(data) { var networkEdges = []; - data.forEach(function(node, index, array) { + data.forEach(function(node) { // add the connection node.connections.forEach(function(connId, cIndex, conns) { networkEdges.push({from: node.id, to: connId}); + let cNode = getNodeById(data, connId); - var elementConnections = array[connId].connections; + var elementConnections = cNode.connections; // remove the connection from the other node to prevent duplicate connections var duplicateIndex = elementConnections.findIndex(function(connection) { - connection === node.id; + return connection == node.id; // double equals since id can be numeric or string }); - elementConnections = elementConnections.splice(0, duplicateIndex - 1).concat(elementConnections.splice(duplicateIndex + 1, elementConnections.length)) - }); + + if (duplicateIndex != -1) { + elementConnections.splice(duplicateIndex, 1); + }; + }); }); return new vis.DataSet(networkEdges); } function objectToArray(obj) { - return Object.keys(obj).map(function (key) { return obj[key]; }); + return Object.keys(obj).map(function (key) { + obj[key].id = key; + return obj[key]; + }); } function resizeExportArea() { @@ -174,4 +182,4 @@ init(); - \ No newline at end of file + diff --git a/examples/timeline/interaction/eventListeners.html b/examples/timeline/interaction/eventListeners.html index 91bacfb0..ae16dc67 100644 --- a/examples/timeline/interaction/eventListeners.html +++ b/examples/timeline/interaction/eventListeners.html @@ -72,6 +72,14 @@ logEvent('contextmenu', properties); }); + timeline.on('mouseDown', function (properties) { + logEvent('mouseDown', properties); + }); + + timeline.on('mouseUp', function (properties) { + logEvent('mouseUp', properties); + }); + // other possible events: // timeline.on('mouseOver', function (properties) { diff --git a/examples/timeline/items/tooltip.html b/examples/timeline/items/tooltip.html index ad2c8723..8908241a 100644 --- a/examples/timeline/items/tooltip.html +++ b/examples/timeline/items/tooltip.html @@ -12,7 +12,7 @@ - + @@ -38,6 +38,12 @@
+

+ Disable item tooltips. +

+ +
+ diff --git a/examples/timeline/styling/weekStyling.html b/examples/timeline/styling/weekStyling.html new file mode 100644 index 00000000..9a3a919e --- /dev/null +++ b/examples/timeline/styling/weekStyling.html @@ -0,0 +1,111 @@ + + + + Timeline | Grid styling + + + + + + + + + + +

+ Week numbers are calculated based on locales. For this to properly work, the timeline must be loaded with a version + of moment.js including locales.

+

To set a locale for the timeline, specify the option + {locale: STRING}.

+

To set the scale to use week numbers, use for example {scale: 'week', step: 1}.

+

The following timeline is initialized with the 'de' locale and items are added with locally localized moment.js + objects. The timeline locale can be switched to another locale at runtime. If you choose the 'en' locale, the week + numbers will be calculated according to the US week calendar numbering scheme.

+ +

+ + +

+ +
+ + + + \ No newline at end of file diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index e24ed2e4..29371ff7 100755 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -53,7 +53,10 @@ var DEFAULTS = { showShadow : false, keepAspectRatio : true, verticalRatio : 0.5, // 0.1 to 1.0, where 1.0 results in a 'cube' - dotSizeRatio : 0.02, // size of the dots as a fraction of the graph width + + dotSizeRatio : 0.02, // size of the dots as a fraction of the graph width + dotSizeMinFraction: 0.5, // size of min-value dot as a fraction of dotSizeRatio + dotSizeMaxFraction: 2.5, // size of max-value dot as a fraction of dotSizeRatio showAnimationControls: autoByDefault, animationInterval : 1000, // milliseconds @@ -1014,7 +1017,8 @@ Graph3d.prototype._getLegendWidth = function() { if (this.style === Graph3d.STYLE.DOTSIZE) { var dotSize = this._dotSize(); - width = dotSize / 2 + dotSize * 2; + //width = dotSize / 2 + dotSize * 2; + width = dotSize * this.dotSizeMaxFraction; } else if (this.style === Graph3d.STYLE.BARSIZE) { width = this.xBarWidth ; } else { @@ -1086,8 +1090,8 @@ Graph3d.prototype._redrawLegend = function() { // draw the size legend box var widthMin; if (this.style === Graph3d.STYLE.DOTSIZE) { - var dotSize = this._dotSize(); - widthMin = dotSize / 2; // px + // Get the proportion to max and min right + widthMin = width * (this.dotSizeMinFraction / this.dotSizeMaxFraction); } else if (this.style === Graph3d.STYLE.BARSIZE) { //widthMin = this.xBarWidth * 0.2 this is wrong - barwidth measures in terms of xvalues } @@ -1096,7 +1100,7 @@ Graph3d.prototype._redrawLegend = function() { ctx.beginPath(); ctx.moveTo(left, top); ctx.lineTo(right, top); - ctx.lineTo(right - width + widthMin, bottom); + ctx.lineTo(left + widthMin, bottom); ctx.lineTo(left, bottom); ctx.closePath(); ctx.fill(); @@ -1821,10 +1825,14 @@ Graph3d.prototype._redrawDotColorGraphPoint = function(ctx, point) { * Draw single datapoint for graph style 'dot-size'. */ Graph3d.prototype._redrawDotSizeGraphPoint = function(ctx, point) { - var dotSize = this._dotSize(); - var fraction = (point.point.value - this.valueRange.min) / this.valueRange.range(); - var size = dotSize/2 + 2*dotSize * fraction; - var colors = this._getColorsSize(); + var dotSize = this._dotSize(); + var fraction = (point.point.value - this.valueRange.min) / this.valueRange.range(); + + var sizeMin = dotSize*this.dotSizeMinFraction; + var sizeRange = dotSize*this.dotSizeMaxFraction - sizeMin; + var size = sizeMin + sizeRange*fraction; + + var colors = this._getColorsSize(); this._drawCircle(ctx, point, colors.fill, colors.border, size); }; diff --git a/lib/graph3d/Settings.js b/lib/graph3d/Settings.js index 484a40b0..b49ef7f3 100755 --- a/lib/graph3d/Settings.js +++ b/lib/graph3d/Settings.js @@ -63,6 +63,8 @@ var OPTIONKEYS = [ 'keepAspectRatio', 'verticalRatio', 'dotSizeRatio', + 'dotSizeMinFraction', + 'dotSizeMaxFraction', 'showAnimationControls', 'animationInterval', 'animationPreload', diff --git a/lib/network/CachedImage.js b/lib/network/CachedImage.js new file mode 100644 index 00000000..6e027f08 --- /dev/null +++ b/lib/network/CachedImage.js @@ -0,0 +1,160 @@ + +/** + * Associates a canvas to a given image, containing a number of renderings + * of the image at various sizes. + * + * This technique is known as 'mipmapping'. + * + * NOTE: Images can also be of type 'data:svg+xml`. This code also works + * for svg, but the mipmapping may not be necessary. + */ +class CachedImage { + constructor(image) { + this.NUM_ITERATIONS = 4; // Number of items in the coordinates array + + this.image = new Image(); + this.canvas = document.createElement('canvas'); + } + + + /** + * Called when the image has been succesfully loaded. + */ + init() { + if (this.initialized()) return; + + var w = this.image.width; + var h = this.image.height; + + // Ease external access + this.width = w; + this.height = h; + + // Make canvas as small as possible + this.canvas.width = 3*w/4; + this.canvas.height = h/2; + + // Coordinates and sizes of images contained in the canvas + // Values per row: [top x, left y, width, height] + this.coordinates = [ + [ 0 , 0 , w/2 , h/2], + [ w/2 , 0 , w/4 , h/4], + [ w/2 , h/4, w/8 , h/8], + [ 5*w/8, h/4, w/16, h/16] + ]; + + this._fillMipMap(); + } + + + /** + * @return {Boolean} true if init() has been called, false otherwise. + */ + initialized() { + return (this.coordinates !== undefined); + } + + + /** + * Redraw main image in various sizes to the context. + * + * The rationale behind this is to reduce artefacts due to interpolation + * at differing zoom levels. + * + * Source: http://stackoverflow.com/q/18761404/1223531 + * + * This methods takes the resizing out of the drawing loop, in order to + * reduce performance overhead. + * + * @private + */ + _fillMipMap() { + var ctx = this.canvas.getContext('2d'); + + // First zoom-level comes from the image + var to = this.coordinates[0]; + ctx.drawImage(this.image, to[0], to[1], to[2], to[3]); + + // The rest are copy actions internal to the canvas/context + for (let iterations = 1; iterations < this.NUM_ITERATIONS; iterations++) { + let from = this.coordinates[iterations - 1]; + let to = this.coordinates[iterations]; + + ctx.drawImage(this.canvas, + from[0], from[1], from[2], from[3], + to[0], to[1], to[2], to[3] + ); + } + } + + + /** + * Draw the image, using the mipmap if necessary. + * + * MipMap is only used if param factor > 2; otherwise, original bitmap + * is resized. This is also used to skip mipmap usage, e.g. by setting factor = 1 + * + * Credits to 'Alex de Mulder' for original implementation. + * + * ctx {Context} context on which to draw zoomed image + * factor {Float} scale factor at which to draw + */ + drawImageAtPosition(ctx, factor, left, top, width, height) { + if (factor > 2 && this.initialized()) { + // Determine which zoomed image to use + factor *= 0.5; + let iterations = 0; + while (factor > 2 && iterations < this.NUM_ITERATIONS) { + factor *= 0.5; + iterations += 1; + } + + if (iterations >= this.NUM_ITERATIONS) { + iterations = this.NUM_ITERATIONS - 1; + } + //console.log("iterations: " + iterations); + + let from = this.coordinates[iterations]; + ctx.drawImage(this.canvas, + from[0], from[1], from[2], from[3], + left, top, width, height + ); + } else if (this._isImageOk()) { + // Draw image directly + ctx.drawImage(this.image, left, top, width, height); + } + } + + + /** + * Check if image is loaded + * + * Source: http://stackoverflow.com/a/1977898/1223531 + * + * @private + */ + _isImageOk(img) { + var img = this.image; + + // During the onload event, IE correctly identifies any images that + // weren’t downloaded as not complete. Others should too. Gecko-based + // browsers act like NS4 in that they report this incorrectly. + if (!img.complete) { + return false; + } + + // However, they do have two very useful properties: naturalWidth and + // naturalHeight. These give the true size of the image. If it failed + // to load, either of these should be zero. + + if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) { + return false; + } + + // No other way of checking: assume it’s ok. + return true; + } +} + + +export default CachedImage; diff --git a/lib/network/Images.js b/lib/network/Images.js index 464e4585..7256f2a8 100644 --- a/lib/network/Images.js +++ b/lib/network/Images.js @@ -1,29 +1,17 @@ +import CachedImage from './CachedImage'; + + /** * @class Images * This class loads images and keeps them stored. */ -class Images{ +class Images { constructor(callback){ this.images = {}; this.imageBroken = {}; this.callback = callback; } - /** - * @param {string} url The Url to cache the image as - * @return {Image} imageToLoadBrokenUrlOn The image object - */ - _addImageToCache (url, imageToCache) { - // IE11 fix -- thanks dponch! - if (imageToCache.width === 0) { - document.body.appendChild(imageToCache); - imageToCache.width = imageToCache.offsetWidth; - imageToCache.height = imageToCache.offsetHeight; - document.body.removeChild(imageToCache); - } - - this.images[url] = imageToCache; - } /** * @param {string} url The original Url that failed to load, if the broken image is successfully loaded it will be added to the cache using this Url as the key so that subsequent requests for this Url will return the broken image @@ -31,18 +19,21 @@ class Images{ * @return {Image} imageToLoadBrokenUrlOn The image object */ _tryloadBrokenUrl (url, brokenUrl, imageToLoadBrokenUrlOn) { - //If any of the parameters aren't specified then exit the function because nothing constructive can be done - if (url === undefined || brokenUrl === undefined || imageToLoadBrokenUrlOn === undefined) return; + //If these parameters aren't specified then exit the function because nothing constructive can be done + if (url === undefined || imageToLoadBrokenUrlOn === undefined) return; + if (brokenUrl === undefined) { + console.warn("No broken url image defined"); + return; + } //Clear the old subscription to the error event and put a new in place that only handle errors in loading the brokenImageUrl imageToLoadBrokenUrlOn.onerror = () => { console.error("Could not load brokenImage:", brokenUrl); - //Add an empty image to the cache so that when subsequent load calls are made for the url we don't try load the image and broken image again - this._addImageToCache(url, new Image()); + // cache item will contain empty image, this should be OK for default }; //Set the source of the image to the brokenUrl, this is actually what kicks off the loading of the broken image - imageToLoadBrokenUrlOn.src = brokenUrl; + imageToLoadBrokenUrlOn.image.src = brokenUrl; } /** @@ -65,28 +56,50 @@ class Images{ if (cachedImage) return cachedImage; //Create a new image - var img = new Image(); + var img = new CachedImage(); + + // Need to add to cache here, otherwise final return will spawn different copies of the same image, + // Also, there will be multiple loads of the same image. + this.images[url] = img; //Subscribe to the event that is raised if the image loads successfully - img.onload = () => { - //Add the image to the cache and then request a redraw - this._addImageToCache(url, img); + img.image.onload = () => { + // Properly init the cached item and then request a redraw + this._fixImageCoordinates(img.image); + img.init(); this._redrawWithImage(img); }; //Subscribe to the event that is raised if the image fails to load - img.onerror = () => { + img.image.onerror = () => { console.error("Could not load image:", url); //Try and load the image specified by the brokenUrl using this._tryloadBrokenUrl(url, brokenUrl, img); } - //Set the source of the image to the url, this is actuall what kicks off the loading of the image - img.src = url; + //Set the source of the image to the url, this is what actually kicks off the loading of the image + img.image.src = url; //Return the new image return img; - } + } + + + /** + * IE11 fix -- thanks dponch! + * + * Local helper function + * + * @private + */ + _fixImageCoordinates(imageToCache) { + if (imageToCache.width === 0) { + document.body.appendChild(imageToCache); + imageToCache.width = imageToCache.offsetWidth; + imageToCache.height = imageToCache.offsetHeight; + document.body.removeChild(imageToCache); + } + } } -export default Images; \ No newline at end of file +export default Images; diff --git a/lib/network/Network.js b/lib/network/Network.js index 884c3352..4d194f5f 100644 --- a/lib/network/Network.js +++ b/lib/network/Network.js @@ -10,24 +10,24 @@ let gephiParser = require('./gephiParser'); let Activator = require('../shared/Activator'); let locales = require('./locales'); -import Images from './Images'; -import Groups from './modules/Groups'; -import NodesHandler from './modules/NodesHandler'; -import EdgesHandler from './modules/EdgesHandler'; -import PhysicsEngine from './modules/PhysicsEngine'; -import ClusterEngine from './modules/Clustering'; -import CanvasRenderer from './modules/CanvasRenderer'; -import Canvas from './modules/Canvas'; -import View from './modules/View'; -import InteractionHandler from './modules/InteractionHandler'; -import SelectionHandler from "./modules/SelectionHandler"; -import LayoutEngine from "./modules/LayoutEngine"; -import ManipulationSystem from "./modules/ManipulationSystem"; -import Configurator from "./../shared/Configurator"; -import Validator from "./../shared/Validator"; -import {printStyle} from "./../shared/Validator"; -import {allOptions, configureOptions} from './options.js'; -import KamadaKawai from "./modules/KamadaKawai.js" +var Images = require('./Images').default; +var Groups = require('./modules/Groups').default; +var NodesHandler = require('./modules/NodesHandler').default; +var EdgesHandler = require('./modules/EdgesHandler').default; +var PhysicsEngine = require('./modules/PhysicsEngine').default; +var ClusterEngine = require('./modules/Clustering').default; +var CanvasRenderer = require('./modules/CanvasRenderer').default; +var Canvas = require('./modules/Canvas').default; +var View = require('./modules/View').default; +var InteractionHandler = require('./modules/InteractionHandler').default; +var SelectionHandler = require("./modules/SelectionHandler").default; +var LayoutEngine = require("./modules/LayoutEngine").default; +var ManipulationSystem = require("./modules/ManipulationSystem").default; +var Configurator = require("./../shared/Configurator").default; +var Validator = require("./../shared/Validator").default; +var {printStyle} = require('./../shared/Validator'); +var {allOptions, configureOptions} = require('./options.js'); +var KamadaKawai = require("./modules/KamadaKawai.js").default; /** diff --git a/lib/network/modules/Canvas.js b/lib/network/modules/Canvas.js index c378c183..ee2fd387 100644 --- a/lib/network/modules/Canvas.js +++ b/lib/network/modules/Canvas.js @@ -189,12 +189,7 @@ class Canvas { } else { let ctx = this.frame.canvas.getContext("2d"); - this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || - ctx.mozBackingStorePixelRatio || - ctx.msBackingStorePixelRatio || - ctx.oBackingStorePixelRatio || - ctx.backingStorePixelRatio || 1); - + this._setPixelRatio(ctx); this.frame.canvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); } @@ -264,11 +259,7 @@ class Canvas { // update the pixel ratio let ctx = this.frame.canvas.getContext("2d"); let previousRatio = this.pixelRatio; // we cache this because the camera state storage needs the old value - this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || - ctx.mozBackingStorePixelRatio || - ctx.msBackingStorePixelRatio || - ctx.oBackingStorePixelRatio || - ctx.backingStorePixelRatio || 1); + this._setPixelRatio(ctx); if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) { this._getCameraState(previousRatio); @@ -296,26 +287,29 @@ class Canvas { // this would adapt the width of the canvas to the width from 100% if and only if // there is a change. + let newWidth = Math.round(this.frame.canvas.clientWidth * this.pixelRatio); + let newHeight = Math.round(this.frame.canvas.clientHeight * this.pixelRatio); + // store the camera if there is a change in size. - if (this.frame.canvas.width != Math.round(this.frame.canvas.clientWidth * this.pixelRatio) || this.frame.canvas.height != Math.round(this.frame.canvas.clientHeight * this.pixelRatio)) { + if (this.frame.canvas.width !== newWidth || this.frame.canvas.height !== newHeight) { this._getCameraState(previousRatio); } - if (this.frame.canvas.width != Math.round(this.frame.canvas.clientWidth * this.pixelRatio)) { - this.frame.canvas.width = Math.round(this.frame.canvas.clientWidth * this.pixelRatio); + if (this.frame.canvas.width !== newWidth) { + this.frame.canvas.width = newWidth; emitEvent = true; } - if (this.frame.canvas.height != Math.round(this.frame.canvas.clientHeight * this.pixelRatio)) { - this.frame.canvas.height = Math.round(this.frame.canvas.clientHeight * this.pixelRatio); + if (this.frame.canvas.height !== newHeight) { + this.frame.canvas.height = newHeight; emitEvent = true; } } if (emitEvent === true) { this.body.emitter.emit('resize', { - width:Math.round(this.frame.canvas.width / this.pixelRatio), - height:Math.round(this.frame.canvas.height / this.pixelRatio), - oldWidth: Math.round(oldWidth / this.pixelRatio), + width : Math.round(this.frame.canvas.width / this.pixelRatio), + height : Math.round(this.frame.canvas.height / this.pixelRatio), + oldWidth : Math.round(oldWidth / this.pixelRatio), oldHeight: Math.round(oldHeight / this.pixelRatio) }); @@ -330,6 +324,18 @@ class Canvas { }; + /** + * @private + */ + _setPixelRatio(ctx) { + this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || + ctx.mozBackingStorePixelRatio || + ctx.msBackingStorePixelRatio || + ctx.oBackingStorePixelRatio || + ctx.backingStorePixelRatio || 1); + } + + /** * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) @@ -397,4 +403,4 @@ class Canvas { } -export default Canvas; \ No newline at end of file +export default Canvas; diff --git a/lib/network/modules/Clustering.js b/lib/network/modules/Clustering.js index 3de5198e..b039a0fc 100644 --- a/lib/network/modules/Clustering.js +++ b/lib/network/modules/Clustering.js @@ -1,6 +1,6 @@ let util = require("../../util"); -import NetworkUtil from '../NetworkUtil'; -import Cluster from './components/nodes/Cluster' +var NetworkUtil = require('../NetworkUtil').default; +var Cluster = require('./components/nodes/Cluster').default; class ClusterEngine { constructor(body) { diff --git a/lib/network/modules/EdgesHandler.js b/lib/network/modules/EdgesHandler.js index f5afc13b..d62ba685 100644 --- a/lib/network/modules/EdgesHandler.js +++ b/lib/network/modules/EdgesHandler.js @@ -2,8 +2,8 @@ var util = require("../../util"); var DataSet = require('../../DataSet'); var DataView = require('../../DataView'); -import Edge from "./components/Edge" -import Label from "./components/shared/Label" +var Edge = require("./components/Edge").default; +var Label = require("./components/shared/Label").default; class EdgesHandler { constructor(body, images, groups) { diff --git a/lib/network/modules/InteractionHandler.js b/lib/network/modules/InteractionHandler.js index 3f7a139d..c0b8dade 100644 --- a/lib/network/modules/InteractionHandler.js +++ b/lib/network/modules/InteractionHandler.js @@ -1,7 +1,7 @@ let util = require('../../util'); -import NavigationHandler from './components/NavigationHandler' -import Popup from './../../shared/Popup' +var NavigationHandler = require('./components/NavigationHandler').default; +var Popup = require('./../../shared/Popup').default; class InteractionHandler { constructor(body, canvas, selectionHandler) { diff --git a/lib/network/modules/LayoutEngine.js b/lib/network/modules/LayoutEngine.js index 09468955..57b9e092 100644 --- a/lib/network/modules/LayoutEngine.js +++ b/lib/network/modules/LayoutEngine.js @@ -1,7 +1,172 @@ 'use strict'; let util = require('../../util'); -import NetworkUtil from '../NetworkUtil'; +var NetworkUtil = require('../NetworkUtil').default; + + +/** + * Container for derived data on current network, relating to hierarchy. + * + * Local, private class. + * + * TODO: Perhaps move more code for hierarchy state handling to this class. + * Till now, only the required and most obvious has been done. + */ +class HierarchicalStatus { + + constructor() { + this.childrenReference = {}; + this.parentReference = {}; + this.levels = {}; + this.trees = {}; + + this.isTree = false; + } + + + /** + * Add the relation between given nodes to the current state. + */ + addRelation(parentNodeId, childNodeId) { + if (this.childrenReference[parentNodeId] === undefined) { + this.childrenReference[parentNodeId] = []; + } + this.childrenReference[parentNodeId].push(childNodeId); + + if (this.parentReference[childNodeId] === undefined) { + this.parentReference[childNodeId] = []; + } + this.parentReference[childNodeId].push(parentNodeId); + } + + + /** + * Check if the current state is for a tree or forest network. + * + * This is the case if every node has at most one parent. + * + * Pre: parentReference init'ed properly for current network + */ + checkIfTree() { + for (let i in this.parentReference) { + if (this.parentReference[i].length > 1) { + this.isTree = false; + return; + } + } + + this.isTree = true; + } + + + /** + * Ensure level for given id is defined. + * + * Sets level to zero for given node id if not already present + */ + ensureLevel(nodeId) { + if (this.levels[nodeId] === undefined) { + this.levels[nodeId] = 0; + } + } + + + /** + * get the maximum level of a branch. + * + * TODO: Never entered; find a test case to test this! + */ + getMaxLevel(nodeId) { + let accumulator = {}; + + let _getMaxLevel = (nodeId) => { + if (accumulator[nodeId] !== undefined) { + return accumulator[nodeId]; + } + let level = this.levels[nodeId]; + if (this.childrenReference[nodeId]) { + let children = this.childrenReference[nodeId]; + if (children.length > 0) { + for (let i = 0; i < children.length; i++) { + level = Math.max(level,_getMaxLevel(children[i])); + } + } + } + accumulator[nodeId] = level; + return level; + }; + + return _getMaxLevel(nodeId); + } + + + levelDownstream(nodeA, nodeB) { + if (this.levels[nodeB.id] === undefined) { + // set initial level + if (this.levels[nodeA.id] === undefined) { + this.levels[nodeA.id] = 0; + } + // set level + this.levels[nodeB.id] = this.levels[nodeA.id] + 1; + } + } + + + /** + * Small util method to set the minimum levels of the nodes to zero. + */ + setMinLevelToZero(nodes) { + let minLevel = 1e9; + // get the minimum level + for (let nodeId in nodes) { + if (nodes.hasOwnProperty(nodeId)) { + if (this.levels[nodeId] !== undefined) { + minLevel = Math.min(this.levels[nodeId], minLevel); + } + } + } + + // subtract the minimum from the set so we have a range starting from 0 + for (let nodeId in nodes) { + if (nodes.hasOwnProperty(nodeId)) { + if (this.levels[nodeId] !== undefined) { + this.levels[nodeId] -= minLevel; + } + } + } + } + + + /** + * Get the min and max xy-coordinates of a given tree + */ + getTreeSize(nodes, index) { + let min_x = 1e9; + let max_x = -1e9; + let min_y = 1e9; + let max_y = -1e9; + + for (let nodeId in this.trees) { + if (this.trees.hasOwnProperty(nodeId)) { + if (this.trees[nodeId] === index) { + let node = nodes[nodeId]; + min_x = Math.min(node.x, min_x); + max_x = Math.max(node.x, max_x); + min_y = Math.min(node.y, min_y); + max_y = Math.max(node.y, max_y); + } + } + } + + return { + min_x: min_x, + max_x: max_x, + min_y: min_y, + max_y: max_y + }; + } +} + class LayoutEngine { constructor(body) { @@ -308,11 +473,8 @@ class LayoutEngine { let definedLevel = false; let definedPositions = true; let undefinedLevel = false; - this.hierarchicalLevels = {}; this.lastNodeOnLevel = {}; - this.hierarchicalChildrenReference = {}; - this.hierarchicalParentReference = {}; - this.hierarchicalTrees = {}; + this.hierarchical = new HierarchicalStatus(); this.treeIndex = -1; this.distributionOrdering = {}; @@ -328,7 +490,7 @@ class LayoutEngine { } if (node.options.level !== undefined) { definedLevel = true; - this.hierarchicalLevels[nodeId] = node.options.level; + this.hierarchical.levels[nodeId] = node.options.level; } else { undefinedLevel = true; @@ -358,9 +520,7 @@ class LayoutEngine { // fallback for cases where there are nodes but no edges for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { - if (this.hierarchicalLevels[nodeId] === undefined) { - this.hierarchicalLevels[nodeId] = 0; - } + this.hierarchical.ensureLevel(nodeId); } } // check the distribution of the nodes per level. @@ -402,9 +562,9 @@ class LayoutEngine { // shift a single tree by an offset let shiftTree = (index, offset) => { - for (let nodeId in this.hierarchicalTrees) { - if (this.hierarchicalTrees.hasOwnProperty(nodeId)) { - if (this.hierarchicalTrees[nodeId] === index) { + for (let nodeId in this.hierarchical.trees) { + if (this.hierarchical.trees.hasOwnProperty(nodeId)) { + if (this.hierarchical.trees[nodeId] === index) { let node = this.body.nodes[nodeId]; let pos = this._getPositionForHierarchy(node); this._setPositionForHierarchy(node, pos + offset, undefined, true); @@ -415,18 +575,12 @@ class LayoutEngine { // get the width of a tree let getTreeSize = (index) => { - let min = 1e9; - let max = -1e9; - for (let nodeId in this.hierarchicalTrees) { - if (this.hierarchicalTrees.hasOwnProperty(nodeId)) { - if (this.hierarchicalTrees[nodeId] === index) { - let pos = this._getPositionForHierarchy(this.body.nodes[nodeId]); - min = Math.min(pos, min); - max = Math.max(pos, max); - } - } + let res = this.hierarchical.getTreeSize(this.body.nodes, index); + if (this._isVertical()) { + return {min: res.min_x, max: res.max_x}; + } else { + return {min: res.min_y, max: res.max_y}; } - return {min:min, max:max}; }; // get the width of all trees @@ -445,8 +599,8 @@ class LayoutEngine { return; } map[source.id] = true; - if (this.hierarchicalChildrenReference[source.id]) { - let children = this.hierarchicalChildrenReference[source.id]; + if (this.hierarchical.childrenReference[source.id]) { + let children = this.hierarchical.childrenReference[source.id]; if (children.length > 0) { for (let i = 0; i < children.length; i++) { getBranchNodes(this.body.nodes[children[i]], map); @@ -465,7 +619,7 @@ class LayoutEngine { for (let branchNode in branchMap) { if (branchMap.hasOwnProperty(branchNode)) { let node = this.body.nodes[branchNode]; - let level = this.hierarchicalLevels[node.id]; + let level = this.hierarchical.levels[node.id]; let position = this._getPositionForHierarchy(node); // get the space around the node. @@ -484,39 +638,18 @@ class LayoutEngine { return [min, max, minSpace, maxSpace]; }; - // get the maximum level of a branch. - let getMaxLevel = (nodeId) => { - let accumulator = {}; - let _getMaxLevel = (nodeId) => { - if (accumulator[nodeId] !== undefined) { - return accumulator[nodeId]; - } - let level = this.hierarchicalLevels[nodeId]; - if (this.hierarchicalChildrenReference[nodeId]) { - let children = this.hierarchicalChildrenReference[nodeId]; - if (children.length > 0) { - for (let i = 0; i < children.length; i++) { - level = Math.max(level,_getMaxLevel(children[i])); - } - } - } - accumulator[nodeId] = level; - return level; - }; - return _getMaxLevel(nodeId); - }; // check what the maximum level is these nodes have in common. let getCollisionLevel = (node1, node2) => { - let maxLevel1 = getMaxLevel(node1.id); - let maxLevel2 = getMaxLevel(node2.id); + let maxLevel1 = this.hierarchical.getMaxLevel(node1.id); + let maxLevel2 = this.hierarchical.getMaxLevel(node2.id); return Math.min(maxLevel1, maxLevel2); }; // check if two nodes have the same parent(s) let hasSameParent = (node1, node2) => { - let parents1 = this.hierarchicalParentReference[node1.id]; - let parents2 = this.hierarchicalParentReference[node2.id]; + let parents1 = this.hierarchical.parentReference[node1.id]; + let parents2 = this.hierarchical.parentReference[node2.id]; if (parents1 === undefined || parents2 === undefined) { return false; } @@ -539,7 +672,7 @@ class LayoutEngine { if (levelNodes.length > 1) { for (let j = 0; j < levelNodes.length - 1; j++) { if (hasSameParent(levelNodes[j],levelNodes[j+1]) === true) { - if (this.hierarchicalTrees[levelNodes[j].id] === this.hierarchicalTrees[levelNodes[j+1].id]) { + if (this.hierarchical.trees[levelNodes[j].id] === this.hierarchical.trees[levelNodes[j+1].id]) { callback(levelNodes[j],levelNodes[j+1], centerParents); } }} @@ -593,7 +726,7 @@ class LayoutEngine { // console.log("ts",node.id); let nodeId = node.id; let allEdges = node.edges; - let nodeLevel = this.hierarchicalLevels[node.id]; + let nodeLevel = this.hierarchical.levels[node.id]; // gather constants let C2 = this.options.hierarchical.levelSeparation * this.options.hierarchical.levelSeparation; @@ -604,7 +737,7 @@ class LayoutEngine { if (edge.toId != edge.fromId) { let otherNode = edge.toId == nodeId ? edge.from : edge.to; referenceNodes[allEdges[i].id] = otherNode; - if (this.hierarchicalLevels[otherNode.id] < nodeLevel) { + if (this.hierarchical.levels[otherNode.id] < nodeLevel) { aboveEdges.push(edge); } } @@ -802,7 +935,7 @@ class LayoutEngine { if (map === undefined) { useMap = false; } - let level = this.hierarchicalLevels[node.id]; + let level = this.hierarchical.levels[node.id]; if (level !== undefined) { let index = this.distributionIndex[node.id]; let position = this._getPositionForHierarchy(node); @@ -837,16 +970,16 @@ class LayoutEngine { * @private */ _centerParent(node) { - if (this.hierarchicalParentReference[node.id]) { - let parents = this.hierarchicalParentReference[node.id]; + if (this.hierarchical.parentReference[node.id]) { + let parents = this.hierarchical.parentReference[node.id]; for (var i = 0; i < parents.length; i++) { let parentId = parents[i]; let parentNode = this.body.nodes[parentId]; - if (this.hierarchicalChildrenReference[parentId]) { + if (this.hierarchical.childrenReference[parentId]) { // get the range of the children let minPos = 1e9; let maxPos = -1e9; - let children = this.hierarchicalChildrenReference[parentId]; + let children = this.hierarchical.childrenReference[parentId]; if (children.length > 0) { for (let i = 0; i < children.length; i++) { let childNode = this.body.nodes[children[i]]; @@ -893,7 +1026,7 @@ class LayoutEngine { // we get the X or Y values we need and store them in pos and previousPos. The get and set make sure we get X or Y if (handledNodeCount > 0) {pos = this._getPositionForHierarchy(nodeArray[i-1]) + this.options.hierarchical.nodeSpacing;} this._setPositionForHierarchy(node, pos, level); - this._validataPositionAndContinue(node, level, pos); + this._validatePositionAndContinue(node, level, pos); handledNodeCount++; } @@ -913,14 +1046,14 @@ class LayoutEngine { */ _placeBranchNodes(parentId, parentLevel) { // if this is not a parent, cancel the placing. This can happen with multiple parents to one child. - if (this.hierarchicalChildrenReference[parentId] === undefined) { + if (this.hierarchical.childrenReference[parentId] === undefined) { return; } // get a list of childNodes let childNodes = []; - for (let i = 0; i < this.hierarchicalChildrenReference[parentId].length; i++) { - childNodes.push(this.body.nodes[this.hierarchicalChildrenReference[parentId][i]]); + for (let i = 0; i < this.hierarchical.childrenReference[parentId].length; i++) { + childNodes.push(this.body.nodes[this.hierarchical.childrenReference[parentId][i]]); } // use the positions to order the nodes. @@ -929,7 +1062,7 @@ class LayoutEngine { // position the childNodes for (let i = 0; i < childNodes.length; i++) { let childNode = childNodes[i]; - let childNodeLevel = this.hierarchicalLevels[childNode.id]; + let childNodeLevel = this.hierarchical.levels[childNode.id]; // check if the child node is below the parent node and if it has already been positioned. if (childNodeLevel > parentLevel && this.positionedNodes[childNode.id] === undefined) { // get the amount of space required for this node. If parent the width is based on the amount of children. @@ -939,7 +1072,7 @@ class LayoutEngine { if (i === 0) {pos = this._getPositionForHierarchy(this.body.nodes[parentId]);} else {pos = this._getPositionForHierarchy(childNodes[i-1]) + this.options.hierarchical.nodeSpacing;} this._setPositionForHierarchy(childNode, pos, childNodeLevel); - this._validataPositionAndContinue(childNode, childNodeLevel, pos); + this._validatePositionAndContinue(childNode, childNodeLevel, pos); } else { return; @@ -966,7 +1099,11 @@ class LayoutEngine { * @param pos * @private */ - _validataPositionAndContinue(node, level, pos) { + _validatePositionAndContinue(node, level, pos) { + // This only works for strict hierarchical networks, i.e. trees and forests + // Early exit if this is not the case + if (!this.hierarchical.isTree) return; + // if overlap has been detected, we shift the branch if (this.lastNodeOnLevel[level] !== undefined) { let previousPos = this._getPositionForHierarchy(this.body.nodes[this.lastNodeOnLevel[level]]); @@ -1013,7 +1150,7 @@ class LayoutEngine { for (nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { node = this.body.nodes[nodeId]; - let level = this.hierarchicalLevels[nodeId] === undefined ? 0 : this.hierarchicalLevels[nodeId]; + let level = this.hierarchical.levels[nodeId] === undefined ? 0 : this.hierarchical.levels[nodeId]; if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') { node.y = this.options.hierarchical.levelSeparation * level; node.options.fixed.y = true; @@ -1043,7 +1180,7 @@ class LayoutEngine { for (let nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { let node = this.body.nodes[nodeId]; - if (this.hierarchicalLevels[nodeId] === undefined) { + if (this.hierarchical.levels[nodeId] === undefined) { hubSize = node.edges.length < hubSize ? hubSize : node.edges.length; } } @@ -1062,15 +1199,8 @@ class LayoutEngine { let hubSize = 1; let levelDownstream = (nodeA, nodeB) => { - if (this.hierarchicalLevels[nodeB.id] === undefined) { - // set initial level - if (this.hierarchicalLevels[nodeA.id] === undefined) { - this.hierarchicalLevels[nodeA.id] = 0; - } - // set level - this.hierarchicalLevels[nodeB.id] = this.hierarchicalLevels[nodeA.id] + 1; - } - }; + this.hierarchical.levelDownstream(nodeA, nodeB); + } while (hubSize > 0) { // determine hubs @@ -1089,8 +1219,11 @@ class LayoutEngine { } } + /** * TODO: release feature + * TODO: Determine if this feature is needed at all + * * @private */ _determineLevelsCustomCallback() { @@ -1101,10 +1234,12 @@ class LayoutEngine { }; + // TODO: perhaps move to HierarchicalStatus. + // But I currently don't see the point, this method is not used. let levelByDirection = (nodeA, nodeB, edge) => { - let levelA = this.hierarchicalLevels[nodeA.id]; + let levelA = this.hierarchical.levels[nodeA.id]; // set initial level - if (levelA === undefined) {this.hierarchicalLevels[nodeA.id] = minLevel;} + if (levelA === undefined) {this.hierarchical.levels[nodeA.id] = minLevel;} let diff = customCallback( NetworkUtil.cloneOptions(nodeA,'node'), @@ -1112,11 +1247,11 @@ class LayoutEngine { NetworkUtil.cloneOptions(edge,'edge') ); - this.hierarchicalLevels[nodeB.id] = this.hierarchicalLevels[nodeA.id] + diff; + this.hierarchical.levels[nodeB.id] = this.hierarchical.levels[nodeA.id] + diff; }; this._crawlNetwork(levelByDirection); - this._setMinLevelToZero(); + this.hierarchical.setMinLevelToZero(this.body.nodes); } /** @@ -1127,45 +1262,21 @@ class LayoutEngine { */ _determineLevelsDirected() { let minLevel = 10000; + let levelByDirection = (nodeA, nodeB, edge) => { - let levelA = this.hierarchicalLevels[nodeA.id]; + let levelA = this.hierarchical.levels[nodeA.id]; // set initial level - if (levelA === undefined) {this.hierarchicalLevels[nodeA.id] = minLevel;} + if (levelA === undefined) {this.hierarchical.levels[nodeA.id] = minLevel;} if (edge.toId == nodeB.id) { - this.hierarchicalLevels[nodeB.id] = this.hierarchicalLevels[nodeA.id] + 1; + this.hierarchical.levels[nodeB.id] = this.hierarchical.levels[nodeA.id] + 1; } else { - this.hierarchicalLevels[nodeB.id] = this.hierarchicalLevels[nodeA.id] - 1; + this.hierarchical.levels[nodeB.id] = this.hierarchical.levels[nodeA.id] - 1; } }; - this._crawlNetwork(levelByDirection); - this._setMinLevelToZero(); - } - - /** - * Small util method to set the minimum levels of the nodes to zero. - * @private - */ - _setMinLevelToZero() { - let minLevel = 1e9; - // get the minimum level - for (let nodeId in this.body.nodes) { - if (this.body.nodes.hasOwnProperty(nodeId)) { - if (this.hierarchicalLevels[nodeId] !== undefined) { - minLevel = Math.min(this.hierarchicalLevels[nodeId], minLevel); - } - } - } - - // subtract the minimum from the set so we have a range starting from 0 - for (let nodeId in this.body.nodes) { - if (this.body.nodes.hasOwnProperty(nodeId)) { - if (this.hierarchicalLevels[nodeId] !== undefined) { - this.hierarchicalLevels[nodeId] -= minLevel; - } - } - } + this._crawlNetwork(levelByDirection); + this.hierarchical.setMinLevelToZero(this.body.nodes); } @@ -1175,21 +1286,13 @@ class LayoutEngine { */ _generateMap() { let fillInRelations = (parentNode, childNode) => { - if (this.hierarchicalLevels[childNode.id] > this.hierarchicalLevels[parentNode.id]) { - let parentNodeId = parentNode.id; - let childNodeId = childNode.id; - if (this.hierarchicalChildrenReference[parentNodeId] === undefined) { - this.hierarchicalChildrenReference[parentNodeId] = []; - } - this.hierarchicalChildrenReference[parentNodeId].push(childNodeId); - if (this.hierarchicalParentReference[childNodeId] === undefined) { - this.hierarchicalParentReference[childNodeId] = []; - } - this.hierarchicalParentReference[childNodeId].push(parentNodeId); + if (this.hierarchical.levels[childNode.id] > this.hierarchical.levels[parentNode.id]) { + this.hierarchical.addRelation(parentNode.id, childNode.id); } }; this._crawlNetwork(fillInRelations); + this.hierarchical.checkIfTree(); } @@ -1206,8 +1309,8 @@ class LayoutEngine { let crawler = (node, tree) => { if (progress[node.id] === undefined) { - if (this.hierarchicalTrees[node.id] === undefined) { - this.hierarchicalTrees[node.id] = tree; + if (this.hierarchical.trees[node.id] === undefined) { + this.hierarchical.trees[node.id] = tree; this.treeIndex = Math.max(tree, this.treeIndex); } @@ -1272,9 +1375,9 @@ class LayoutEngine { else { this.body.nodes[parentId].y += diff; } - if (this.hierarchicalChildrenReference[parentId] !== undefined) { - for (let i = 0; i < this.hierarchicalChildrenReference[parentId].length; i++) { - shifter(this.hierarchicalChildrenReference[parentId][i]); + if (this.hierarchical.childrenReference[parentId] !== undefined) { + for (let i = 0; i < this.hierarchical.childrenReference[parentId].length; i++) { + shifter(this.hierarchical.childrenReference[parentId][i]); } } }; @@ -1292,18 +1395,18 @@ class LayoutEngine { _findCommonParent(childA,childB) { let parents = {}; let iterateParents = (parents,child) => { - if (this.hierarchicalParentReference[child] !== undefined) { - for (let i = 0; i < this.hierarchicalParentReference[child].length; i++) { - let parent = this.hierarchicalParentReference[child][i]; + if (this.hierarchical.parentReference[child] !== undefined) { + for (let i = 0; i < this.hierarchical.parentReference[child].length; i++) { + let parent = this.hierarchical.parentReference[child][i]; parents[parent] = true; iterateParents(parents, parent) } } }; let findParent = (parents, child) => { - if (this.hierarchicalParentReference[child] !== undefined) { - for (let i = 0; i < this.hierarchicalParentReference[child].length; i++) { - let parent = this.hierarchicalParentReference[child][i]; + if (this.hierarchical.parentReference[child] !== undefined) { + for (let i = 0; i < this.hierarchical.parentReference[child].length; i++) { + let parent = this.hierarchical.parentReference[child][i]; if (parents[parent] !== undefined) { return {foundParent:parent, withChild:child}; } @@ -1350,6 +1453,18 @@ class LayoutEngine { } } + + /** + * Utility function to cut down on typing this all the time. + * + * TODO: use this in all applicable situations in this class. + * + * @private + */ + _isVertical() { + return (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU'); + } + /** * Abstract the getting of the position of a node so we do not have to repeat the direction check all the time. * @param node @@ -1384,9 +1499,6 @@ class LayoutEngine { } } } - - - } export default LayoutEngine; diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js index 5ed50e24..f9999327 100644 --- a/lib/network/modules/NodesHandler.js +++ b/lib/network/modules/NodesHandler.js @@ -2,8 +2,8 @@ let util = require("../../util"); let DataSet = require('../../DataSet'); let DataView = require('../../DataView'); -import Node from "./components/Node"; -import Label from "./components/shared/Label"; +var Node = require("./components/Node").default; +var Label = require("./components/shared/Label").default; class NodesHandler { constructor(body, images, groups, layoutEngine) { @@ -64,7 +64,7 @@ class NodesHandler { mono: { mod: '', size: 15, // px - face: 'courier new', + face: 'monospace', vadjust: 2 } }, @@ -330,7 +330,7 @@ class NodesHandler { if (nodes.hasOwnProperty(nodeId)) { node = nodes[nodeId]; } - let data = this.body.data.nodes._data[nodeId]; + let data = this.body.data.nodes.get(nodeId); if (node !== undefined && data !== undefined) { if (clearPositions === true) { node.setOptions({x:null, y:null}); diff --git a/lib/network/modules/PhysicsEngine.js b/lib/network/modules/PhysicsEngine.js index 3555c2ff..742e13d3 100644 --- a/lib/network/modules/PhysicsEngine.js +++ b/lib/network/modules/PhysicsEngine.js @@ -1,11 +1,11 @@ -import BarnesHutSolver from './components/physics/BarnesHutSolver'; -import Repulsion from './components/physics/RepulsionSolver'; -import HierarchicalRepulsion from './components/physics/HierarchicalRepulsionSolver'; -import SpringSolver from './components/physics/SpringSolver'; -import HierarchicalSpringSolver from './components/physics/HierarchicalSpringSolver'; -import CentralGravitySolver from './components/physics/CentralGravitySolver'; -import ForceAtlas2BasedRepulsionSolver from './components/physics/FA2BasedRepulsionSolver'; -import ForceAtlas2BasedCentralGravitySolver from './components/physics/FA2BasedCentralGravitySolver'; +var BarnesHutSolver = require('./components/physics/BarnesHutSolver').default; +var Repulsion = require('./components/physics/RepulsionSolver').default; +var HierarchicalRepulsion = require('./components/physics/HierarchicalRepulsionSolver').default; +var SpringSolver = require('./components/physics/SpringSolver').default; +var HierarchicalSpringSolver = require('./components/physics/HierarchicalSpringSolver').default; +var CentralGravitySolver = require('./components/physics/CentralGravitySolver').default; +var ForceAtlas2BasedRepulsionSolver = require('./components/physics/FA2BasedRepulsionSolver').default; +var ForceAtlas2BasedCentralGravitySolver = require('./components/physics/FA2BasedCentralGravitySolver').default; var util = require('../../util'); diff --git a/lib/network/modules/SelectionHandler.js b/lib/network/modules/SelectionHandler.js index 121a2e93..56768e29 100644 --- a/lib/network/modules/SelectionHandler.js +++ b/lib/network/modules/SelectionHandler.js @@ -1,5 +1,5 @@ -import Node from './components/Node'; -import Edge from './components/Edge'; +var Node = require('./components/Node').default; +var Edge = require('./components/Edge').default; let util = require('../../util'); @@ -156,7 +156,7 @@ class SelectionHandler { /** - * Get the top node at the a specific point (like a click) + * Get the top node at the passed point (like a click) * * @param {{x: Number, y: Number}} pointer * @return {Node | undefined} node @@ -212,11 +212,10 @@ class SelectionHandler { /** - * Place holder. To implement change the getNodeAt to a _getObjectAt. Have the _getObjectAt call - * getNodeAt and _getEdgesAt, then priortize the selection to user preferences. + * Get the edges nearest to the passed point (like a click) * - * @param pointer - * @returns {undefined} + * @param {{x: Number, y: Number}} pointer + * @return {Edge | undefined} node */ getEdgeAt(pointer, returnEdge = true) { // Iterate over edges, pick closest within 10 @@ -239,7 +238,7 @@ class SelectionHandler { } } } - if (overlappingEdge) { + if (overlappingEdge !== null) { if (returnEdge === true) { return this.body.edges[overlappingEdge]; } @@ -706,4 +705,4 @@ class SelectionHandler { } } -export default SelectionHandler; \ No newline at end of file +export default SelectionHandler; diff --git a/lib/network/modules/View.js b/lib/network/modules/View.js index d1004c80..07029783 100644 --- a/lib/network/modules/View.js +++ b/lib/network/modules/View.js @@ -1,6 +1,6 @@ let util = require('../../util'); -import NetworkUtil from '../NetworkUtil'; +var NetworkUtil = require('../NetworkUtil').default; class View { constructor(body, canvas) { diff --git a/lib/network/modules/components/Edge.js b/lib/network/modules/components/Edge.js index f84a9189..8f04b8c8 100644 --- a/lib/network/modules/components/Edge.js +++ b/lib/network/modules/components/Edge.js @@ -1,10 +1,10 @@ var util = require('../../../util'); -import Label from './shared/Label' -import CubicBezierEdge from './edges/CubicBezierEdge' -import BezierEdgeDynamic from './edges/BezierEdgeDynamic' -import BezierEdgeStatic from './edges/BezierEdgeStatic' -import StraightEdge from './edges/StraightEdge' +var Label = require('./shared/Label').default; +var CubicBezierEdge = require('./edges/CubicBezierEdge').default; +var BezierEdgeDynamic = require('./edges/BezierEdgeDynamic').default; +var BezierEdgeStatic = require('./edges/BezierEdgeStatic').default; +var StraightEdge = require('./edges/StraightEdge').default; /** * @class Edge diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js index be4000ff..296815d9 100644 --- a/lib/network/modules/components/Node.js +++ b/lib/network/modules/components/Node.js @@ -1,23 +1,23 @@ var util = require('../../../util'); -import Label from './shared/Label' - -import Box from './nodes/shapes/Box' -import Circle from './nodes/shapes/Circle' -import CircularImage from './nodes/shapes/CircularImage' -import Database from './nodes/shapes/Database' -import Diamond from './nodes/shapes/Diamond' -import Dot from './nodes/shapes/Dot' -import Ellipse from './nodes/shapes/Ellipse' -import Icon from './nodes/shapes/Icon' -import Image from './nodes/shapes/Image' -import Square from './nodes/shapes/Square' -import Star from './nodes/shapes/Star' -import Text from './nodes/shapes/Text' -import Triangle from './nodes/shapes/Triangle' -import TriangleDown from './nodes/shapes/TriangleDown' -import Validator from "../../../shared/Validator"; -import {printStyle} from "../../../shared/Validator"; +var Label = require('./shared/Label').default; + +var Box = require('./nodes/shapes/Box').default; +var Circle = require('./nodes/shapes/Circle').default; +var CircularImage = require('./nodes/shapes/CircularImage').default; +var Database = require('./nodes/shapes/Database').default; +var Diamond = require('./nodes/shapes/Diamond').default; +var Dot = require('./nodes/shapes/Dot').default; +var Ellipse = require('./nodes/shapes/Ellipse').default; +var Icon = require('./nodes/shapes/Icon').default; +var Image = require('./nodes/shapes/Image').default; +var Square = require('./nodes/shapes/Square').default; +var Star = require('./nodes/shapes/Star').default; +var Text = require('./nodes/shapes/Text').default; +var Triangle = require('./nodes/shapes/Triangle').default; +var TriangleDown = require('./nodes/shapes/TriangleDown').default; +var Validator = require("../../../shared/Validator").default; +var { printStyle } = require("../../../shared/Validator"); /** @@ -141,21 +141,7 @@ class Node { this.choosify(options); - // load the images - if (this.options.image !== undefined) { - if (this.imagelist) { - if (typeof this.options.image === 'string') { - this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage, this.id); - } else { - this.imageObj = this.imagelist.load(this.options.image.unselected, this.options.brokenImage, this.id); - this.imageObjAlt = this.imagelist.load(this.options.image.selected, this.options.brokenImage, this.id); - } - } - else { - throw "No imagelist provided"; - } - } - + this._load_images(); this.updateLabelModule(options); this.updateShape(currentShape); this.labelModule.propagateFonts(this.nodeOptions, options, this.defaultOptions); @@ -167,6 +153,46 @@ class Node { } + /** + * Load the images from the options, for the nodes that need them. + * + * TODO: The imageObj members should be moved to CircularImageBase. + * It's the only place where they are required. + * + * @private + */ + _load_images() { + // Don't bother loading for nodes without images + if (this.options.shape !== 'circularImage' && this.options.shape !== 'image') { + return; + } + + if (this.options.image === undefined) { + throw "Option image must be defined for node type '" + this.options.shape + "'"; + } + + if (this.imagelist === undefined) { + throw "Internal Error: No images provided"; + } + + if (typeof this.options.image === 'string') { + this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage, this.id); + } else { + if (this.options.image.unselected === undefined) { + throw "No unselected image provided"; + } + + this.imageObj = this.imagelist.load(this.options.image.unselected, this.options.brokenImage, this.id); + + if (this.options.image.selected !== undefined) { + this.imageObjAlt = this.imagelist.load(this.options.image.selected, this.options.brokenImage, this.id); + } else { + this.imageObjAlt = undefined; + } + } + } + + /** * This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined. * Static so it can also be used by the handler. diff --git a/lib/network/modules/components/nodes/shapes/CircularImage.js b/lib/network/modules/components/nodes/shapes/CircularImage.js index 95c0b5ba..6f743d5b 100644 --- a/lib/network/modules/components/nodes/shapes/CircularImage.js +++ b/lib/network/modules/components/nodes/shapes/CircularImage.js @@ -29,14 +29,8 @@ class CircularImage extends CircleImageBase { } draw(ctx, x, y, selected, hover, values) { - // switch images depending on 'selected' if imageObjAlt exists - if (this.imageObjAlt) { - this.switchImages(selected); - } - - this.selected = selected; - - this.resize(ctx, selected, hover); + this.switchImages(selected); + this.resize(); this.left = x - this.width / 2; this.top = y - this.height / 2; diff --git a/lib/network/modules/components/nodes/shapes/Diamond.js b/lib/network/modules/components/nodes/shapes/Diamond.js index ecda7ea3..20a8f7db 100644 --- a/lib/network/modules/components/nodes/shapes/Diamond.js +++ b/lib/network/modules/components/nodes/shapes/Diamond.js @@ -7,10 +7,6 @@ class Diamond extends ShapeBase { super(options, body, labelModule) } - resize(ctx, selected = this.selected, hover = this.hover, values) { - this._resizeShape(selected, hover, values); - } - draw(ctx, x, y, selected, hover, values) { this._drawShape(ctx, 'diamond', 4, x, y, selected, hover, values); } diff --git a/lib/network/modules/components/nodes/shapes/Dot.js b/lib/network/modules/components/nodes/shapes/Dot.js index 6d054619..79746753 100644 --- a/lib/network/modules/components/nodes/shapes/Dot.js +++ b/lib/network/modules/components/nodes/shapes/Dot.js @@ -7,10 +7,6 @@ class Dot extends ShapeBase { super(options, body, labelModule) } - resize(ctx, selected = this.selected, hover = this.hover, values) { - this._resizeShape(selected, hover, values); - } - draw(ctx, x, y, selected, hover, values) { this._drawShape(ctx, 'circle', 2, x, y, selected, hover, values); } diff --git a/lib/network/modules/components/nodes/shapes/Ellipse.js b/lib/network/modules/components/nodes/shapes/Ellipse.js index f10f0a40..d993efe3 100644 --- a/lib/network/modules/components/nodes/shapes/Ellipse.js +++ b/lib/network/modules/components/nodes/shapes/Ellipse.js @@ -28,7 +28,7 @@ class Ellipse extends NodeBase { ctx.strokeStyle = values.borderColor; ctx.fillStyle = values.color; - ctx.ellipse(this.left, this.top, this.width, this.height); + ctx.ellipse_vis(this.left, this.top, this.width, this.height); // draw shadow if enabled this.enableShadow(ctx, values); diff --git a/lib/network/modules/components/nodes/shapes/Image.js b/lib/network/modules/components/nodes/shapes/Image.js index a95e5cd4..ab1e7135 100644 --- a/lib/network/modules/components/nodes/shapes/Image.js +++ b/lib/network/modules/components/nodes/shapes/Image.js @@ -16,14 +16,8 @@ class Image extends CircleImageBase { } draw(ctx, x, y, selected, hover, values) { - // switch images depending on 'selected' if imageObjAlt exists - if (this.imageObjAlt) { - this.switchImages(selected); - } - - this.selected = selected; - - this.resize(ctx, selected, hover); + this.switchImages(selected); + this.resize(); this.left = x - this.width / 2; this.top = y - this.height / 2; diff --git a/lib/network/modules/components/nodes/shapes/Square.js b/lib/network/modules/components/nodes/shapes/Square.js index b7b7e8bf..3dba0807 100644 --- a/lib/network/modules/components/nodes/shapes/Square.js +++ b/lib/network/modules/components/nodes/shapes/Square.js @@ -7,10 +7,6 @@ class Square extends ShapeBase { super(options, body, labelModule) } - resize() { - this._resizeShape(); - } - draw(ctx, x, y, selected, hover, values) { this._drawShape(ctx, 'square', 2, x, y, selected, hover, values); } diff --git a/lib/network/modules/components/nodes/shapes/Star.js b/lib/network/modules/components/nodes/shapes/Star.js index b99bc4e4..2b1437f8 100644 --- a/lib/network/modules/components/nodes/shapes/Star.js +++ b/lib/network/modules/components/nodes/shapes/Star.js @@ -7,10 +7,6 @@ class Star extends ShapeBase { super(options, body, labelModule) } - resize(ctx, selected, hover, values) { - this._resizeShape(selected, hover, values); - } - draw(ctx, x, y, selected, hover, values) { this._drawShape(ctx, 'star', 4, x, y, selected, hover, values); } diff --git a/lib/network/modules/components/nodes/shapes/Triangle.js b/lib/network/modules/components/nodes/shapes/Triangle.js index 2a75476c..9b35304f 100644 --- a/lib/network/modules/components/nodes/shapes/Triangle.js +++ b/lib/network/modules/components/nodes/shapes/Triangle.js @@ -7,10 +7,6 @@ class Triangle extends ShapeBase { super(options, body, labelModule) } - resize(ctx) { - this._resizeShape(); - } - draw(ctx, x, y, selected, hover, values) { this._drawShape(ctx, 'triangle', 3, x, y, selected, hover, values); } diff --git a/lib/network/modules/components/nodes/shapes/TriangleDown.js b/lib/network/modules/components/nodes/shapes/TriangleDown.js index a566a103..453056f3 100644 --- a/lib/network/modules/components/nodes/shapes/TriangleDown.js +++ b/lib/network/modules/components/nodes/shapes/TriangleDown.js @@ -7,10 +7,6 @@ class TriangleDown extends ShapeBase { super(options, body, labelModule) } - resize(ctx) { - this._resizeShape(); - } - draw(ctx, x, y, selected, hover, values) { this._drawShape(ctx, 'triangleDown', 3, x, y, selected, hover, values); } diff --git a/lib/network/modules/components/nodes/util/CircleImageBase.js b/lib/network/modules/components/nodes/util/CircleImageBase.js index 9d90268b..4209260e 100644 --- a/lib/network/modules/components/nodes/util/CircleImageBase.js +++ b/lib/network/modules/components/nodes/util/CircleImageBase.js @@ -1,4 +1,6 @@ -import NodeBase from '../util/NodeBase' +import NodeBase from './NodeBase'; +import CachedImage from '../../../../CachedImage'; + /** * NOTE: This is a bad base class @@ -22,31 +24,51 @@ class CircleImageBase extends NodeBase { setOptions(options, imageObj, imageObjAlt) { this.options = options; - this.setImages(imageObj, imageObjAlt); + + if (!(imageObj === undefined && imageObjAlt === undefined)) { + this.setImages(imageObj, imageObjAlt); + } } - setImages(imageObj, imageObjAlt) { - if (imageObj) { - this.imageObj = imageObj; - if (imageObjAlt) { - this.imageObjAlt = imageObjAlt; - } + /** + * Set the images for this node. + * + * The images can be updated after the initial setting of options; + * therefore, this method needs to be reentrant. + * + * For correct working in error cases, it is necessary to properly set + * field 'nodes.brokenImage' in the options. + * + * @param {Image} imageObj required; main image to show for this node + * @param {Image|undefined} optional; image to show when node is selected + */ + setImages(imageObj, imageObjAlt) { + if (imageObjAlt && this.selected) { + this.imageObj = imageObjAlt; + this.imageObjAlt = imageObj; + } else { + this.imageObj = imageObj; + this.imageObjAlt = imageObjAlt; } } /** - * Switch between the base and the selected image. + * Set selection and switch between the base and the selected image. + * + * Do the switch only if imageObjAlt exists. + * + * @param {true|false} selected value of new selected state for current node */ switchImages(selected) { - if ((selected && !this.selected) || (!selected && this.selected)) { + var selection_changed = ((selected && !this.selected) || (!selected && this.selected)); + this.selected = selected; // Remember new selection + + if (this.imageObjAlt !== undefined && selection_changed) { let imageTmp = this.imageObj; this.imageObj = this.imageObjAlt; this.imageObjAlt = imageTmp; } - - // keep current state in memory - this.selected = selected; } /** @@ -122,37 +144,12 @@ class CircleImageBase extends NodeBase { // draw shadow if enabled this.enableShadow(ctx, values); - let factor = (this.imageObj.width / this.width) / this.body.view.scale; - if (factor > 2 && this.options.shapeProperties.interpolation === true) { - let w = this.imageObj.width; - let h = this.imageObj.height; - var can2 = document.createElement('canvas'); - can2.width = w; - can2.height = w; - var ctx2 = can2.getContext('2d'); - - factor *= 0.5; - w *= 0.5; - h *= 0.5; - ctx2.drawImage(this.imageObj, 0, 0, w, h); - - let distance = 0; - let iterations = 1; - while (factor > 2 && iterations < 4) { - ctx2.drawImage(can2, distance, 0, w, h, distance+w, 0, w/2, h/2); - distance += w; - factor *= 0.5; - w *= 0.5; - h *= 0.5; - iterations += 1; - } - ctx.drawImage(can2, distance, 0, w, h, this.left, this.top, this.width, this.height); - } - else { - // draw image - ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height); + let factor = 1; + if (this.options.shapeProperties.interpolation === true) { + factor = (this.imageObj.width / this.width) / this.body.view.scale; } + this.imageObj.drawImageAtPosition(ctx, factor, this.left, this.top, this.width, this.height); // disable shadows for other elements. this.disableShadow(ctx, values); diff --git a/lib/network/modules/components/nodes/util/ShapeBase.js b/lib/network/modules/components/nodes/util/ShapeBase.js index c11dd4c8..6c2e14e3 100644 --- a/lib/network/modules/components/nodes/util/ShapeBase.js +++ b/lib/network/modules/components/nodes/util/ShapeBase.js @@ -5,8 +5,9 @@ class ShapeBase extends NodeBase { super(options, body, labelModule) } - _resizeShape(selected = this.selected, hover = this.hover, values = { size: this.options.size }) { + resize(ctx, selected = this.selected, hover = this.hover, values = { size: this.options.size }) { if (this.needsRefresh(selected, hover)) { + this.labelModule.getTextSize(ctx, selected, hover); var size = 2 * values.size; this.width = size; this.height = size; @@ -15,7 +16,7 @@ class ShapeBase extends NodeBase { } _drawShape(ctx, shape, sizeMultiplier, x, y, selected, hover, values) { - this._resizeShape(selected, hover, values); + this.resize(ctx, selected, hover, values); this.left = x - this.width / 2; this.top = y - this.height / 2; @@ -47,7 +48,9 @@ class ShapeBase extends NodeBase { ctx.restore(); if (this.options.label !== undefined) { - let yLabel = y + 0.5 * this.height + 3; // the + 3 is to offset it a bit below the node. + // Need to call following here in order to ensure value for `this.labelModule.size.height` + this.labelModule.calculateLabelSize(ctx, selected, hover, x, y, 'hanging') + let yLabel = y + 0.5 * this.height + 0.5 * this.labelModule.size.height; this.labelModule.draw(ctx, x, yLabel, selected, hover, 'hanging'); } @@ -63,7 +66,7 @@ class ShapeBase extends NodeBase { if (this.options.label !== undefined && this.labelModule.size.width > 0) { 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 + 3); + this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height); } } diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js index c5cb3fb1..ea787b89 100644 --- a/lib/network/modules/components/shared/Label.js +++ b/lib/network/modules/components/shared/Label.js @@ -37,11 +37,7 @@ class Label { } static parseOptions(parentOptions, newOptions, allowDeletion = false) { - if (typeof newOptions.font === 'string') { - let newOptionsArray = newOptions.font.split(" "); - parentOptions.size = newOptionsArray[0].replace("px",''); - parentOptions.face = newOptionsArray[1]; - parentOptions.color = newOptionsArray[2]; + if (Label.parseFontString(parentOptions, newOptions.font)) { parentOptions.vadjust = 0; } else if (typeof newOptions.font === 'object') { @@ -51,6 +47,32 @@ class Label { parentOptions.vadjust = Number(parentOptions.vadjust); } + + /** + * If in-variable is a string, parse it as a font specifier. + * + * Note that following is not done here and have to be done after the call: + * - No number conversion (size) + * - Not all font options are set (vadjust, mod) + * + * @param inOptions {Object} font options to parse + * @param outOptions {Object} out-parameter, object in which to store the parse results (if any) + * + * @return true if font parsed as string, false otherwise + */ + static parseFontString(outOptions, inOptions) { + if (!inOptions || typeof inOptions !== 'string') return false; + + let newOptionsArray = inOptions.split(" "); + + outOptions.size = newOptionsArray[0].replace("px",''); + outOptions.face = newOptionsArray[1]; + outOptions.color = newOptionsArray[2]; + + return true; + } + + // set the width and height constraints based on 'nearest' value constrain(elementOptions, options, defaultOptions) { this.fontOptions.constrainWidth = false; @@ -126,124 +148,140 @@ class Label { } } + + /** + * Collapse the font options for the multi-font to single objects, from + * the chain of option objects passed. + * + * If an option for a specific multi-font is not present, the parent + * option is checked for the given option. + * + * NOTE: naming of 'groupOptions' is a misnomer; the actual value passed + * is the new values to set from setOptions(). + */ propagateFonts(options, groupOptions, defaultOptions) { - if (this.fontOptions.multi) { - let mods = [ 'bold', 'ital', 'boldital', 'mono' ]; - for (const mod of mods) { - let optionsFontMod; - if (options.font) { - optionsFontMod = options.font[mod]; - } - if (typeof optionsFontMod === 'string') { - let modOptionsArray = optionsFontMod.split(" "); - this.fontOptions[mod].size = modOptionsArray[0].replace("px",""); - this.fontOptions[mod].face = modOptionsArray[1]; - this.fontOptions[mod].color = modOptionsArray[2]; - this.fontOptions[mod].vadjust = this.fontOptions.vadjust; - this.fontOptions[mod].mod = defaultOptions.font[mod].mod; - } else { - // We need to be crafty about loading the modded fonts. We want as - // much 'natural' versatility as we can get, so a simple global - // change propagates in an expected way, even if not stictly logical. - - // face: We want to capture any direct settings and overrides, but - // fall back to the base font if there aren't any. We make a - // special exception for mono, since we probably don't want to - // sync to a the base font face. - // - // if the mod face is in the node's options, use it - // else if the mod face is in the global options, use it - // else if the face is in the global options, use it - // else use the base font's face. - if (optionsFontMod && optionsFontMod.hasOwnProperty('face')) { - this.fontOptions[mod].face = optionsFontMod.face; - } else if (groupOptions.font && groupOptions.font[mod] && - groupOptions.font[mod].hasOwnProperty('face')) { - this.fontOptions[mod].face = groupOptions.font[mod].face; - } else if (mod === 'mono') { - this.fontOptions[mod].face = defaultOptions.font[mod].face; - } else if (groupOptions.font && - groupOptions.font.hasOwnProperty('face')) { - this.fontOptions[mod].face = groupOptions.font.face; - } else { - this.fontOptions[mod].face = this.fontOptions.face; - } + if (!this.fontOptions.multi) return; - // color: this is handled just like the face. - if (optionsFontMod && optionsFontMod.hasOwnProperty('color')) { - this.fontOptions[mod].color = optionsFontMod.color; - } else if (groupOptions.font && groupOptions.font[mod] && - groupOptions.font[mod].hasOwnProperty('color')) { - this.fontOptions[mod].color = groupOptions.font[mod].color; - } else if (groupOptions.font && - groupOptions.font.hasOwnProperty('color')) { - this.fontOptions[mod].color = groupOptions.font.color; - } else { - this.fontOptions[mod].color = this.fontOptions.color; - } + /** + * Resolve the font options path. + * If valid, return a reference to the object in question. + * Otherwise, just return null. + * + * param 'mod' is optional. + * + * options {Object} base object to determine path from + * mod {string|undefined} if present, sub path for the mod-font + */ + var pathP = function(options, mod) { + if (!options || !options.font) return null; - // mod: this is handled just like the face, except we never grab the - // base font's mod. We know they're in the defaultOptions, and unless - // we've been steered away from them, we use the default. - if (optionsFontMod && optionsFontMod.hasOwnProperty('mod')) { - this.fontOptions[mod].mod = optionsFontMod.mod; - } else if (groupOptions.font && groupOptions.font[mod] && - groupOptions.font[mod].hasOwnProperty('mod')) { - this.fontOptions[mod].mod = groupOptions.font[mod].mod; - } else if (groupOptions.font && - groupOptions.font.hasOwnProperty('mod')) { - this.fontOptions[mod].mod = groupOptions.font.mod; - } else { - this.fontOptions[mod].mod = defaultOptions.font[mod].mod; - } + var opt = options.font; - // size: It's important that we size up defaults similarly if we're - // using default faces unless overriden. We want to preserve the - // ratios closely - but if faces have changed, all bets are off. - // - // if the mod size is in the node's options, use it - // else if the mod size is in the global options, use it - // else if the mod face is the same as the default and the base face - // is the same as the default, scale the mod size using the same - // ratio - // else if the size is in the global options, use it - // else use the base font's size. - if (optionsFontMod && optionsFontMod.hasOwnProperty('size')) { - this.fontOptions[mod].size = optionsFontMod.size; - } else if (groupOptions.font && groupOptions.font[mod] && - groupOptions.font[mod].hasOwnProperty('size')) { - this.fontOptions[mod].size = groupOptions.font[mod].size; - } else if ((this.fontOptions[mod].face === defaultOptions.font[mod].face) && - (this.fontOptions.face === defaultOptions.font.face)) { - let ratio = this.fontOptions.size / Number(defaultOptions.font.size); - this.fontOptions[mod].size = defaultOptions.font[mod].size * ratio; - } else if (groupOptions.font && - groupOptions.font.hasOwnProperty('size')) { - this.fontOptions[mod].size = groupOptions.font.size; - } else { - this.fontOptions[mod].size = this.fontOptions.size; - } + if (mod) { + if (!opt[mod]) return null; + opt = opt[mod]; + } - // vadjust: this is handled just like the size. - if (optionsFontMod && optionsFontMod.hasOwnProperty('vadjust')) { - this.fontOptions[mod].vadjust = optionsFontMod.vadjust; - } else if (groupOptions.font && - groupOptions.font[mod] && groupOptions.font[mod].hasOwnProperty('vadjust')) { - this.fontOptions[mod].vadjust = groupOptions.font[mod].vadjust; - } else if ((this.fontOptions[mod].face === defaultOptions.font[mod].face) && - (this.fontOptions.face === defaultOptions.font.face)) { - let ratio = this.fontOptions.size / Number(defaultOptions.font.size); - this.fontOptions[mod].vadjust = defaultOptions.font[mod].vadjust * Math.round(ratio); - } else if (groupOptions.font && - groupOptions.font.hasOwnProperty('vadjust')) { - this.fontOptions[mod].vadjust = groupOptions.font.vadjust; - } else { - this.fontOptions[mod].vadjust = this.fontOptions.vadjust; - } + return opt; + }; + + + /** + * Get property value from options.font[mod][property] if present. + * If mod not passed, use property value from options.font[property]. + * + * @return value if found, null otherwise. + */ + var getP = function(options, mod, property) { + let opt = pathP(options, mod); + + if (opt && opt.hasOwnProperty(property)) { + return opt[property]; + } + + return null; + }; + + + let mods = [ 'bold', 'ital', 'boldital', 'mono' ]; + for (const mod of mods) { + let modOptions = this.fontOptions[mod]; + let modDefaults = defaultOptions.font[mod]; + + if (Label.parseFontString(modOptions, pathP(options, mod))) { + modOptions.vadjust = this.fontOptions.vadjust; + modOptions.mod = modDefaults.mod; + } else { + + // We need to be crafty about loading the modded fonts. We want as + // much 'natural' versatility as we can get, so a simple global + // change propagates in an expected way, even if not stictly logical. + + // 'face' has a special exception for mono, since we probably + // don't want to sync to the base font face. + modOptions.face = + getP(options , mod, 'face') || + getP(groupOptions, mod, 'face') || + (mod === 'mono'? modDefaults.face:null ) || + getP(groupOptions, null, 'face') || + this.fontOptions.face + ; + + // 'color' follows the standard flow + modOptions.color = + getP(options , mod, 'color') || + getP(groupOptions, mod, 'color') || + getP(groupOptions, null, 'color') || + this.fontOptions.color + ; + + // 'mode' follows the standard flow + modOptions.mod = + getP(options , mod, 'mod') || + getP(groupOptions, mod, 'mod') || + getP(groupOptions, null, 'mod') || + modDefaults.mod + ; + + + // It's important that we size up defaults similarly if we're + // using default faces unless overriden. We want to preserve the + // ratios closely - but if faces have changed, all bets are off. + let ratio; + + // NOTE: Following condition always fails, because modDefaults + // has no explicit font property. This is deliberate, see + // var's 'NodesHandler.defaultOptions.font[mod]'. + // However, I want to keep the original logic while refactoring; + // it appears to be working fine even if ratio is never set. + // TODO: examine if this is a bug, fix if necessary. + // + if ((modOptions.face === modDefaults.face) && + (this.fontOptions.face === defaultOptions.font.face)) { + + ratio = this.fontOptions.size / Number(defaultOptions.font.size); } - this.fontOptions[mod].size = Number(this.fontOptions[mod].size); - this.fontOptions[mod].vadjust = Number(this.fontOptions[mod].vadjust); + + + modOptions.size = + getP(options , mod, 'size') || + getP(groupOptions, mod, 'size') || + (ratio? modDefaults.size * ratio: null) || // Scale the mod size using the same ratio + getP(groupOptions, null, 'size') || + this.fontOptions.size + ; + + modOptions.vadjust = + getP(options , mod, 'vadjust') || + getP(groupOptions, mod, 'vadjust') || + (ratio? modDefaults.vadjust * Math.round(ratio): null) || // Scale it using the same ratio + this.fontOptions.vadjust + ; + } + + modOptions.size = Number(modOptions.size); + modOptions.vadjust = Number(modOptions.vadjust); } } @@ -717,12 +755,26 @@ class Label { } getFormattingValues(ctx, selected, hover, mod) { + var getValue = function(fontOptions, mod, option) { + if (mod === "normal") { + if (option === 'mod' ) return ""; + return fontOptions[option]; + } + + if (fontOptions[mod][option]) { + return fontOptions[mod][option]; + } else { + // Take from parent font option + return fontOptions[option]; + } + }; + let values = { - color: (mod === "normal") ? this.fontOptions.color : this.fontOptions[mod].color, - size: (mod === "normal") ? this.fontOptions.size : this.fontOptions[mod].size, - face: (mod === "normal") ? this.fontOptions.face : this.fontOptions[mod].face, - mod: (mod === "normal") ? "" : this.fontOptions[mod].mod, - vadjust: (mod === "normal") ? this.fontOptions.vadjust : this.fontOptions[mod].vadjust, + color : getValue(this.fontOptions, mod, 'color' ), + size : getValue(this.fontOptions, mod, 'size' ), + face : getValue(this.fontOptions, mod, 'face' ), + mod : getValue(this.fontOptions, mod, 'mod' ), + vadjust: getValue(this.fontOptions, mod, 'vadjust'), strokeWidth: this.fontOptions.strokeWidth, strokeColor: this.fontOptions.strokeColor }; diff --git a/lib/network/shapes.js b/lib/network/shapes.js index 9346f482..270b2913 100644 --- a/lib/network/shapes.js +++ b/lib/network/shapes.js @@ -149,8 +149,10 @@ if (typeof CanvasRenderingContext2D !== 'undefined') { /** * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas + * + * Postfix '_vis' added to discern it from standard method ellipse(). */ - CanvasRenderingContext2D.prototype.ellipse = function (x, y, w, h) { + CanvasRenderingContext2D.prototype.ellipse_vis = function (x, y, w, h) { var kappa = .5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical diff --git a/lib/shared/Configurator.js b/lib/shared/Configurator.js index e564bc2d..3e70decc 100644 --- a/lib/shared/Configurator.js +++ b/lib/shared/Configurator.js @@ -1,6 +1,6 @@ var util = require('../util'); -import ColorPicker from './ColorPicker' +var ColorPicker = require('./ColorPicker').default; /** * The way this works is for all properties of this.possible options, you can supply the property name in any form to list the options. diff --git a/lib/timeline/Graph2d.js b/lib/timeline/Graph2d.js index a222456e..c5234c1d 100644 --- a/lib/timeline/Graph2d.js +++ b/lib/timeline/Graph2d.js @@ -15,8 +15,8 @@ var printStyle = require('../shared/Validator').printStyle; var allOptions = require('./optionsGraph2d').allOptions; var configureOptions = require('./optionsGraph2d').configureOptions; -import Configurator from '../shared/Configurator'; -import Validator from '../shared/Validator'; +var Configurator = require('../shared/Configurator').default; +var Validator = require('../shared/Validator').default; /** * Create a timeline visualization diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js index f568bc58..0ae6dec0 100644 --- a/lib/timeline/Range.js +++ b/lib/timeline/Range.js @@ -196,12 +196,12 @@ Range.prototype.setRange = function(start, end, options, callback) { if (options.byUser !== true) { options.byUser = false; } + var me = this; var finalStart = start != undefined ? util.convert(start, 'Date').valueOf() : null; var finalEnd = end != undefined ? util.convert(end, 'Date').valueOf() : null; this._cancelAnimation(); if (options.animation) { // true or an Object - var me = this; var initStart = this.start; var initEnd = this.end; var duration = (typeof options.animation === 'object' && 'duration' in options.animation) ? options.animation.duration : 500; @@ -265,8 +265,12 @@ Range.prototype.setRange = function(start, end, options, callback) { byUser: options.byUser, event: options.event }; + this.body.emitter.emit('rangechange', params); - this.body.emitter.emit('rangechanged', params); + clearTimeout( me.timeoutID ); + me.timeoutID = setTimeout( function () { + me.body.emitter.emit('rangechanged', params); + }, 200 ); if (callback) { return callback() } } } diff --git a/lib/timeline/TimeStep.js b/lib/timeline/TimeStep.js index e3f6ff7b..530e1726 100644 --- a/lib/timeline/TimeStep.js +++ b/lib/timeline/TimeStep.js @@ -69,6 +69,7 @@ TimeStep.FORMAT = { hour: 'HH:mm', weekday: 'ddd D', day: 'D', + week: 'w', month: 'MMM', year: 'YYYY' }, @@ -79,6 +80,7 @@ TimeStep.FORMAT = { hour: 'ddd D MMMM', weekday: 'MMMM YYYY', day: 'MMMM YYYY', + week: 'MMMM YYYY', month: 'YYYY', year: '' } @@ -101,7 +103,7 @@ TimeStep.prototype.setMoment = function (moment) { /** * Set custom formatting for the minor an major labels of the TimeStep. * Both `minorLabels` and `majorLabels` are an Object with properties: - * 'millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'month', 'year'. + * 'millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'week', 'month', 'year'. * @param {{minorLabels: Object, majorLabels: Object}} format */ TimeStep.prototype.setFormat = function (format) { @@ -153,6 +155,7 @@ TimeStep.prototype.roundToMinor = function() { this.current.year(this.step * Math.floor(this.current.year() / this.step)); this.current.month(0); case 'month': this.current.date(1); + case 'week': this.current.weekday(0); case 'day': // intentional fall through case 'weekday': this.current.hours(0); case 'hour': this.current.minutes(0); @@ -170,6 +173,7 @@ TimeStep.prototype.roundToMinor = function() { case 'hour': this.current.subtract(this.current.hours() % this.step, 'hours'); break; case 'weekday': // intentional fall through case 'day': this.current.subtract((this.current.date() - 1) % this.step, 'day'); break; + case 'week': this.current.subtract(this.current.week() % this.step, 'week'); break; case 'month': this.current.subtract(this.current.month() % this.step, 'month'); break; case 'year': this.current.subtract(this.current.year() % this.step, 'year'); break; default: break; @@ -210,6 +214,21 @@ TimeStep.prototype.next = function() { break; case 'weekday': // intentional fall through case 'day': this.current.add(this.step, 'day'); break; + case 'week': + if (this.current.weekday() !== 0){ // we had a month break not correlating with a week's start before + this.current.weekday(0); // switch back to week cycles + this.current.add(this.step, 'week'); + } else { // first day of the week + var nextWeek = this.current.clone(); + nextWeek.add(1, 'week'); + if(nextWeek.isSame(this.current, 'month')){ // is the first day of the next week in the same month? + this.current.add(this.step, 'week'); // the default case + } else { // inject a step at each first day of the month + this.current.add(this.step, 'week'); + this.current.date(1); + } + } + break; case 'month': this.current.add(this.step, 'month'); break; case 'year': this.current.add(this.step, 'year'); break; default: break; @@ -224,6 +243,7 @@ TimeStep.prototype.next = function() { case 'hour': if(this.current.hours() > 0 && this.current.hours() < this.step) this.current.hours(0); break; case 'weekday': // intentional fall through case 'day': if(this.current.date() < this.step+1) this.current.date(1); break; + case 'week': if(this.current.week() < this.step) this.current.week(1); break; // week numbering starts at 1, not 0 case 'month': if(this.current.month() < this.step) this.current.month(0); break; case 'year': break; // nothing to do for year default: break; @@ -260,7 +280,7 @@ TimeStep.prototype.getCurrent = function() { * @param {{scale: string, step: number}} params * An object containing two properties: * - A string 'scale'. Choose from 'millisecond', 'second', - * 'minute', 'hour', 'weekday', 'day', 'month', 'year'. + * 'minute', 'hour', 'weekday', 'day', 'week', 'month', 'year'. * - A number 'step'. A step size, by default 1. * Choose for example 1, 2, 5, or 10. */ @@ -338,7 +358,7 @@ TimeStep.prototype.setMinimumStep = function(minimumStep) { * Static function * @param {Date} date the date to be snapped. * @param {string} scale Current scale, can be 'millisecond', 'second', - * 'minute', 'hour', 'weekday, 'day', 'month', 'year'. + * 'minute', 'hour', 'weekday, 'day', 'week', 'month', 'year'. * @param {number} step Current step (1, 2, 4, 5, ... * @return {Date} snappedDate */ @@ -370,6 +390,20 @@ TimeStep.snap = function(date, scale, step) { clone.seconds(0); clone.milliseconds(0); } + else if (scale == 'week') { + if (clone.weekday() > 2) { // doing it the momentjs locale aware way + clone.weekday(0); + clone.add(1, 'week'); + } + else { + clone.weekday(0); + } + + clone.hours(0); + clone.minutes(0); + clone.seconds(0); + clone.milliseconds(0); + } else if (scale == 'day') { //noinspection FallthroughInSwitchStatementJS switch (step) { @@ -452,6 +486,7 @@ TimeStep.prototype.isMajor = function() { switch (this.scale) { case 'year': case 'month': + case 'week': case 'weekday': case 'day': case 'hour': @@ -465,6 +500,7 @@ TimeStep.prototype.isMajor = function() { } else if (this.switchedMonth == true) { switch (this.scale) { + case 'week': case 'weekday': case 'day': case 'hour': @@ -501,6 +537,8 @@ TimeStep.prototype.isMajor = function() { case 'weekday': // intentional fall through case 'day': return (date.date() == 1); + case 'week': + return (date.date() == 1); case 'month': return (date.month() == 0); case 'year': @@ -530,7 +568,15 @@ TimeStep.prototype.getLabelMinor = function(date) { } var format = this.format.minorLabels[this.scale]; - return (format && format.length > 0) ? this.moment(date).format(format) : ''; + // noinspection FallThroughInSwitchStatementJS + switch (this.scale) { + case 'week': + if(this.isMajor() && date.weekday() !== 0){ + return ""; + } + default: + return (format && format.length > 0) ? this.moment(date).format(format) : ''; + } }; /** @@ -624,6 +670,11 @@ TimeStep.prototype.getClassName = function() { classNames.push(this.step <= 2 ? 'vis-' + current.format('dddd').toLowerCase() : ''); classNames.push(even(current.date() - 1)); break; + case 'week': + classNames.push('vis-week' + current.format('w')); + classNames.push(currentWeek(current)); + classNames.push(even(current.week())); + break; case 'month': classNames.push('vis-' + current.format('MMMM').toLowerCase()); classNames.push(currentMonth(current)); diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index 02d633a4..c8a63f9a 100644 --- a/lib/timeline/Timeline.js +++ b/lib/timeline/Timeline.js @@ -15,8 +15,8 @@ var printStyle = require('../shared/Validator').printStyle; var allOptions = require('./optionsTimeline').allOptions; var configureOptions = require('./optionsTimeline').configureOptions; -import Configurator from '../shared/Configurator'; -import Validator from '../shared/Validator'; +var Configurator = require('../shared/Configurator').default; +var Validator = require('../shared/Validator').default; /** @@ -139,9 +139,27 @@ function Timeline (container, items, groups, options) { this.dom.root.onmouseover = function (event) { me.emit('mouseOver', me.getEventProperties(event)) }; - this.dom.root.onmousemove = function (event) { - me.emit('mouseMove', me.getEventProperties(event)) - }; + if(window.PointerEvent) { + this.dom.root.onpointerdown = function (event) { + me.emit('mouseDown', me.getEventProperties(event)) + }; + this.dom.root.onpointermove = function (event) { + me.emit('mouseMove', me.getEventProperties(event)) + }; + this.dom.root.onpointerup = function (event) { + me.emit('mouseUp', me.getEventProperties(event)) + }; + } else { + this.dom.root.onmousemove = function (event) { + me.emit('mouseMove', me.getEventProperties(event)) + }; + this.dom.root.onmousedown = function (event) { + me.emit('mouseDown', me.getEventProperties(event)) + }; + this.dom.root.onmouseup = function (event) { + me.emit('mouseUp', me.getEventProperties(event)) + }; + } //Single time autoscale/fit this.fitDone = false; diff --git a/lib/timeline/component/BackgroundGroup.js b/lib/timeline/component/BackgroundGroup.js index af1286d5..ae44551c 100644 --- a/lib/timeline/component/BackgroundGroup.js +++ b/lib/timeline/component/BackgroundGroup.js @@ -22,10 +22,10 @@ BackgroundGroup.prototype = Object.create(Group.prototype); * Repaint this group * @param {{start: number, end: number}} range * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin - * @param {boolean} [restack=false] Force restacking of all items + * @param {boolean} [forceRestack=false] Force restacking of all items * @return {boolean} Returns true if the group is resized */ -BackgroundGroup.prototype.redraw = function(range, margin, restack) { +BackgroundGroup.prototype.redraw = function(range, margin, forceRestack) { var resized = false; this.visibleItems = this._updateItemsInRange(this.orderedItems, this.visibleItems, range); diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js index 58920dfa..095262ea 100644 --- a/lib/timeline/component/Group.js +++ b/lib/timeline/component/Group.js @@ -15,6 +15,7 @@ function Group (groupId, data, itemSet) { this.subgroupOrderer = data && data.subgroupOrder; this.itemSet = itemSet; this.isVisible = null; + this.stackDirty = true; // if true, items will be restacked on next redraw if (data && data.nestedGroups) { this.nestedGroups = data.nestedGroups; @@ -212,12 +213,12 @@ Group.prototype.getLabelWidth = function() { * Repaint this group * @param {{start: number, end: number}} range * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin - * @param {boolean} [restack=false] Force restacking of all items + * @param {boolean} [forceRestack=false] Force restacking of all items * @return {boolean} Returns true if the group is resized */ -Group.prototype.redraw = function(range, margin, restack) { +Group.prototype.redraw = function(range, margin, forceRestack) { var resized = false; - + // force recalculation of the height of the items when the marker height changed // (due to the Timeline being attached to the DOM or changed from display:none to visible) var markerHeight = this.dom.marker.clientHeight; @@ -228,9 +229,9 @@ Group.prototype.redraw = function(range, margin, restack) { if (item.displayed) item.redraw(); }); - restack = true; - } - + forceRestack = true; + } + // recalculate the height of the subgroups this._calculateSubGroupHeights(margin); @@ -240,12 +241,15 @@ Group.prototype.redraw = function(range, margin, restack) { this.right = foreground.offsetLeft; this.width = foreground.offsetWidth; + var lastIsVisible = this.isVisible; this.isVisible = this._isGroupVisible(range, margin); - // reposition visible items vertically - if (typeof this.itemSet.options.order === 'function') { - // a custom order function + + var restack = forceRestack || this.stackDirty || (this.isVisible && !lastIsVisible); - if (restack) { + // if restacking, reposition visible items vertically + if(restack) { + if (typeof this.itemSet.options.order === 'function') { + // a custom order function // brute force restack of all items // show all items @@ -264,23 +268,24 @@ Group.prototype.redraw = function(range, margin, restack) { return me.itemSet.options.order(a.data, b.data); }); stack.stack(customOrderedItems, margin, true /* restack=true */); - } - - this.visibleItems = this._updateItemsInRange(this.orderedItems, this.visibleItems, range); - } - else { - // no custom order function, lazy stacking + this.visibleItems = this._updateItemsInRange(this.orderedItems, this.visibleItems, range); - this.visibleItems = this._updateItemsInRange(this.orderedItems, this.visibleItems, range); - - if (this.itemSet.options.stack) { // TODO: ugly way to access options... - stack.stack(this.visibleItems, margin, restack); } - else { // no stacking - stack.nostack(this.visibleItems, margin, this.subgroups, this.itemSet.options.stackSubgroups); + else { + // no custom order function, lazy stacking + this.visibleItems = this._updateItemsInRange(this.orderedItems, this.visibleItems, range); + + if (this.itemSet.options.stack) { // TODO: ugly way to access options... + stack.stack(this.visibleItems, margin, true /* restack=true */); + } + else { // no stacking + stack.nostack(this.visibleItems, margin, this.subgroups, this.itemSet.options.stackSubgroups); + } } + + this.stackDirty = false; } - + this._updateSubgroupsSizes(); // recalculate the height of the group @@ -435,7 +440,7 @@ Group.prototype.hide = function() { Group.prototype.add = function(item) { this.items[item.id] = item; item.setParent(this); - + this.stackDirty = true; // add to if (item.data.subgroup !== undefined) { this._addToSubgroup(item); @@ -540,6 +545,7 @@ Group.prototype.resetSubgroups = function() { Group.prototype.remove = function(item) { delete this.items[item.id]; item.setParent(null); + this.stackDirty = true; // remove from visible items var index = this.visibleItems.indexOf(item); diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index fe2b46f6..362d4320 100644 --- a/lib/timeline/component/ItemSet.js +++ b/lib/timeline/component/ItemSet.js @@ -10,7 +10,7 @@ var BoxItem = require('./item/BoxItem'); var PointItem = require('./item/PointItem'); var RangeItem = require('./item/RangeItem'); var BackgroundItem = require('./item/BackgroundItem'); -import Popup from '../../shared/Popup'; +var Popup = require('../../shared/Popup').default; var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items @@ -95,6 +95,8 @@ function ItemSet(body, options) { axis: 20 }, + showTooltips: true, + tooltip: { followMouse: false, overflowMethod: 'flip' @@ -155,7 +157,6 @@ function ItemSet(body, options) { this.groupIds = []; this.selection = []; // list with the ids of all selected nodes - this.stackDirty = true; // if true, all items will be restacked on next redraw this.popup = null; @@ -337,7 +338,7 @@ ItemSet.prototype.setOptions = function(options) { var fields = [ 'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect', 'itemsAlwaysDraggable', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate', - 'hide', 'snap', 'groupOrderSwap', 'tooltip', 'tooltipOnItemUpdateTime' + 'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime' ]; util.selectiveExtend(fields, this.options, options); @@ -418,7 +419,6 @@ ItemSet.prototype.setOptions = function(options) { */ ItemSet.prototype.markDirty = function(options) { this.groupIds = []; - this.stackDirty = true; if (options && options.refreshItems) { util.forEach(this.items, function (item) { @@ -617,12 +617,11 @@ ItemSet.prototype.redraw = function() { var visibleInterval = range.end - range.start; var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.props.width != this.props.lastWidth); var scrolled = range.start != this.lastRangeStart; - if (zoomed || scrolled) this.stackDirty = true; + var forceRestack = (zoomed || scrolled); this.lastVisibleInterval = visibleInterval; this.lastRangeStart = range.start; this.props.lastWidth = this.props.width; - var restack = this.stackDirty; var firstGroup = this._firstGroup(); var firstMargin = { item: margin.item, @@ -636,17 +635,16 @@ ItemSet.prototype.redraw = function() { var minHeight = margin.axis + margin.item.vertical; // redraw the background group - this.groups[BACKGROUND].redraw(range, nonFirstMargin, restack); + this.groups[BACKGROUND].redraw(range, nonFirstMargin, forceRestack); // redraw all regular groups util.forEach(this.groups, function (group) { var groupMargin = (group == firstGroup) ? firstMargin : nonFirstMargin; - var groupResized = group.redraw(range, groupMargin, restack); + var groupResized = group.redraw(range, groupMargin, forceRestack); resized = groupResized || resized; height += group.height; }); height = Math.max(height, minHeight); - this.stackDirty = false; // update frame height frame.style.height = asSize(height); @@ -978,7 +976,6 @@ ItemSet.prototype._onUpdate = function(ids) { }.bind(this)); this._order(); - this.stackDirty = true; // force re-stacking of all items next redraw this.body.emitter.emit('_change', {queue: true}); }; @@ -1008,7 +1005,6 @@ ItemSet.prototype._onRemove = function(ids) { if (count) { // update order this._order(); - this.stackDirty = true; // force re-stacking of all items next redraw this.body.emitter.emit('_change', {queue: true}); } }; @@ -1196,14 +1192,6 @@ ItemSet.prototype._addItem = function(item) { * @private */ ItemSet.prototype._updateItem = function(item, itemData) { - var oldGroupId = item.data.group; - var oldSubGroupId = item.data.subgroup; - - if (oldGroupId != itemData.group) { - var oldGroup = this.groups[oldGroupId]; - if (oldGroup) oldGroup.remove(item); - } - // update the items data (will redraw the item when displayed) item.setData(itemData); @@ -1214,14 +1202,6 @@ ItemSet.prototype._updateItem = function(item, itemData) { } else if (group && group.data && group.data.showNested) { item.groupShowing = true; } - // update group - if (group) { - if (oldGroupId != item.data.group) { - group.add(item); - } else if (oldSubGroupId != item.data.subgroup) { - group.changeSubgroup(item, oldSubGroupId); - } - } }; /** @@ -1556,7 +1536,6 @@ ItemSet.prototype._onDrag = function (event) { //make sure we stay in bounds newOffset = Math.max(0, newOffset); newOffset = Math.min(me.groupIds.length-1, newOffset); - itemData.group = me.groupIds[newOffset]; } } @@ -1569,8 +1548,7 @@ ItemSet.prototype._onDrag = function (event) { } }.bind(this)); }.bind(this)); - - this.stackDirty = true; // force re-stacking of all items next redraw + this.body.emitter.emit('_change'); } }; @@ -1587,10 +1565,11 @@ ItemSet.prototype._moveToGroup = function(item, groupId) { var oldGroup = item.parent; oldGroup.remove(item); oldGroup.order(); + + item.data.group = group.groupId; + group.add(item); group.order(); - - item.data.group = group.groupId; } }; @@ -1622,7 +1601,6 @@ ItemSet.prototype._onDragEnd = function (event) { } // force re-stacking of all items next redraw - me.stackDirty = true; me.body.emitter.emit('_change'); }); } @@ -1639,7 +1617,6 @@ ItemSet.prototype._onDragEnd = function (event) { // restore original values props.item.setData(props.data); - me.stackDirty = true; // force re-stacking of all items next redraw me.body.emitter.emit('_change'); } }); @@ -1906,7 +1883,7 @@ ItemSet.prototype._onMouseOver = function (event) { } var title = item.getTitle(); - if (title) { + if (this.options.showTooltips && title) { if (this.popup == null) { this.popup = new Popup(this.body.dom.root, this.options.tooltip.overflowMethod || 'flip'); @@ -1956,7 +1933,7 @@ ItemSet.prototype._onMouseMove = function (event) { var item = this.itemFromTarget(event); if (!item) return; - if (this.options.tooltip.followMouse) { + if (this.options.showTooltips && this.options.tooltip.followMouse) { if (this.popup) { if (!this.popup.hidden) { var container = this.body.dom.centerContainer; @@ -2233,8 +2210,16 @@ ItemSet.prototype.itemFromRelatedTarget = function(event) { */ ItemSet.prototype.groupFromTarget = function(event) { var clientY = event.center ? event.center.y : event.clientY; - for (var i = 0; i < this.groupIds.length; i++) { - var groupId = this.groupIds[i]; + var groupIds = this.groupIds; + + if (groupIds.length <= 0 && this.groupsData) { + groupIds = this.groupsData.getIds({ + order: this.options.groupOrder + }); + } + + for (var i = 0; i < groupIds.length; i++) { + var groupId = groupIds[i]; var group = this.groups[groupId]; var foreground = group.dom.foreground; var top = util.getAbsoluteTop(foreground); diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js index ec797541..f0287bc9 100644 --- a/lib/timeline/component/LineGraph.js +++ b/lib/timeline/component/LineGraph.js @@ -453,6 +453,7 @@ LineGraph.prototype._updateAllGroupData = function (ids, groupIds) { } //Pre-load arrays from existing groups if items are not changed (not in ids) + var existingItemsMap = {}; if (!groupIds && ids) { for (var groupId in this.groups) { if (this.groups.hasOwnProperty(groupId)) { @@ -460,6 +461,7 @@ LineGraph.prototype._updateAllGroupData = function (ids, groupIds) { var existing_items = group.getItems(); groupsContent[groupId] = existing_items.filter(function (item) { + existingItemsMap[item[fieldId]] = item[fieldId]; return (item[fieldId] !== idMap[item[fieldId]]); }); var newLength = groupCounts[groupId]; @@ -478,7 +480,7 @@ LineGraph.prototype._updateAllGroupData = function (ids, groupIds) { if (groupId === null || groupId === undefined) { groupId = UNGROUPED; } - if (!groupIds && ids && (item[fieldId] !== idMap[item[fieldId]])) { + if (!groupIds && ids && (item[fieldId] !== idMap[item[fieldId]]) && existingItemsMap.hasOwnProperty(item[fieldId])) { continue; } if (!groupsContent.hasOwnProperty(groupId)) { diff --git a/lib/timeline/component/TimeAxis.js b/lib/timeline/component/TimeAxis.js index f575af4b..2d1b1d18 100644 --- a/lib/timeline/component/TimeAxis.js +++ b/lib/timeline/component/TimeAxis.js @@ -227,6 +227,7 @@ TimeAxis.prototype._repaintLabels = function () { var x; var xNext; var isMajor, nextIsMajor; + var showMinorGrid; var width = 0, prevWidth; var line; var labelMinor; @@ -255,7 +256,10 @@ TimeAxis.prototype._repaintLabels = function () { prevWidth = width; width = xNext - x; - var showMinorGrid = (width >= prevWidth * 0.4); // prevent displaying of the 31th of the month on a scale of 5 days + switch (step.scale) { + case 'week': showMinorGrid = true; break; + default: showMinorGrid = (width >= prevWidth * 0.4); break; // prevent displaying of the 31th of the month on a scale of 5 days + } if (this.options.showMinorLabels && showMinorGrid) { var label = this._repaintMinorText(x, labelMinor, orientation, className); diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js index 6713a7ac..9bfa662d 100644 --- a/lib/timeline/component/item/Item.js +++ b/lib/timeline/component/item/Item.js @@ -61,9 +61,15 @@ Item.prototype.unselect = function() { */ Item.prototype.setData = function(data) { var groupChanged = data.group != undefined && this.data.group != data.group; - if (groupChanged) { + if (groupChanged && this.parent != null) { this.parent.itemSet._moveToGroup(this, data.group); } + this.parent.stackDirty = true; + + var subGroupChanged = data.subgroup != undefined && this.data.subgroup != data.subgroup; + if (subGroupChanged && this.parent != null) { + this.parent.changeSubgroup(this, this.data.subgroup, data.subgroup); + } this.data = data; this._updateEditStatus(); @@ -73,7 +79,7 @@ Item.prototype.setData = function(data) { /** * Set a parent for the item - * @param {ItemSet | Group} parent + * @param {Group} parent */ Item.prototype.setParent = function(parent) { if (this.displayed) { @@ -141,15 +147,25 @@ Item.prototype.repositionY = function() { Item.prototype._repaintDragCenter = function () { if (this.selected && this.options.editable.updateTime && !this.dom.dragCenter) { var me = this; - // create and show drag area var dragCenter = document.createElement('div'); dragCenter.className = 'vis-drag-center'; dragCenter.dragCenterItem = this; + var hammer = new Hammer(dragCenter); - new Hammer(dragCenter).on('doubletap', function (event) { + hammer.on('tap', function (event) { + me.parent.itemSet.body.emitter.emit('click', { + event: event, + item: me.id + }); + }); + hammer.on('doubletap', function (event) { event.stopPropagation(); me.parent.itemSet._onUpdateItem(me); + me.parent.itemSet.body.emitter.emit('doubleClick', { + event: event, + item: me.id + }); }); if (this.dom.box) { @@ -365,7 +381,6 @@ Item.prototype._updateContents = function (element) { throw new Error('Property "content" missing in item ' + this.id); } } - this.content = content; } } diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js index 41ac8d0b..56df9c63 100644 --- a/lib/timeline/optionsTimeline.js +++ b/lib/timeline/optionsTimeline.js @@ -54,6 +54,7 @@ let allOptions = { hour: {string,'undefined': 'undefined'}, weekday: {string,'undefined': 'undefined'}, day: {string,'undefined': 'undefined'}, + week: {string,'undefined': 'undefined'}, month: {string,'undefined': 'undefined'}, year: {string,'undefined': 'undefined'}, __type__: {object, 'function': 'function'} @@ -65,6 +66,7 @@ let allOptions = { hour: {string,'undefined': 'undefined'}, weekday: {string,'undefined': 'undefined'}, day: {string,'undefined': 'undefined'}, + week: {string,'undefined': 'undefined'}, month: {string,'undefined': 'undefined'}, year: {string,'undefined': 'undefined'}, __type__: {object, 'function': 'function'} @@ -135,6 +137,7 @@ let allOptions = { template: {'function': 'function'}, groupTemplate: {'function': 'function'}, visibleFrameTemplate: {string, 'function': 'function'}, + showTooltips: { 'boolean': bool}, tooltip: { followMouse: { 'boolean': bool }, overflowMethod: { 'string': ['cap', 'flip'] }, @@ -181,6 +184,7 @@ let configureOptions = { hour: 'HH:mm', weekday: 'ddd D', day: 'D', + week: 'w', month: 'MMM', year: 'YYYY' }, @@ -191,6 +195,7 @@ let configureOptions = { hour: 'ddd D MMMM', weekday: 'MMMM YYYY', day: 'MMMM YYYY', + week: 'MMMM YYYY', month: 'YYYY', year: '' } @@ -236,9 +241,10 @@ let configureOptions = { start: '', //template: {'function': 'function'}, //timeAxis: { - // scale: ['millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'month', 'year'], + // scale: ['millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'week', 'month', 'year'], // step: [1, 1, 10, 1] //}, + showTooltips: true, tooltip: { followMouse: false, overflowMethod: 'flip' diff --git a/misc/labels.md b/misc/labels.md new file mode 100644 index 00000000..8307c374 --- /dev/null +++ b/misc/labels.md @@ -0,0 +1,106 @@ +# How we use Github labels + +*Because only team members can add and change labels this document is mainly for maintainers, but also for users to understand how we use labels.* + +*It is important to also label old and closed issues uniformly in order to export them later e.g. if the project gets separated into multiple components.* + + +## Issue Types +If an issue was created it MUST always be labeled as one of the following issue types: + +### `Question` +The author has a general or very specific question.
+If it is a general question on how to use vis.js the issues should be closed immediately with a reference to [stackoverflow](https://stackoverflow.com/questions/tagged/vis.js).
+Specific question or hard problems should stay open.
+Questions should be closed within 3 months. + +### `Problem` +This issues points to a potential bug that needs to be confirmed.
+If the problem most likely originates from the user's code it should be labeled as [`Question`](#question) instead.
+The support team should try to reproduce this issue and then close it or mark it as [`Confirmed Bug`](#confirmed-bug). + +### `Confirmed Bug` +This issue was reported as [`Problem`](#problem), but the issue is reproducible and is now a confirmed bug. + +### `Feature-Request` +This issue proposes a new feature or a change of existing functionality. Issues that are unlikely to get implemented should be closed. + +### `wontfix` +This issues is e.g. for discussing a topic or for project management purposes, and is not handled in the usual issue process. + + +## Graph type +All issues MUST have one of the following type labels. These labels are usually mutually exclusive: + +### `DataSet` +Concerns the DataSet implementation. + +### `Graph2D` +Concerns the 2D-Graph implementation. + +### `Graph3D` +Concerns the 3D-Graph implementation. + +### `Network` +Concerns the Network-Graph implementation. + +### `source/non-public API` +This issues is just for discussion or is concerning the build-process, the code-style or something similar. + +### `Timeline` +Concerns the Timeline-Graph implementation. + + +## Additional labels + +### `Docs` +This issue concerns only the documentation.
+If an existing issue is documented wrongly this is a [`Problem`](#problem) in the component and not a [`docs`](#docs) issue.
+This can be used for typos or requests for an improvement of the docs. + +### `Duplicate` +This issues is a duplicate of an existing issue. The duplicate should be closed. In addition, add a reference to the original issue with a comment. + +### `Fixed awaiting release` +This Issue is fixed or implemented in the "develop" branch but is not released yet and therefore should be still open.
+This issues should be closed after the changes are merged into the "master" branch. + +### `For everyone!` +This is a good issue to start working on if you are new to vis.js and want to help.
+This label is also used for labels that may concern a lot of vis.js users. + +### `IE / Edge` +These issues concern a problem with the Microsoft Internet Explorer or Edge browser.
+ +### `invalid` +This is not a valid issue.
+Someone just created an empty issue, picked the wrong project or something similar.
+This can also be used for pull-request to a non-develop branch or something similar.
+This issue or pull request should be closed immediately. + +### `Issue Inactive` +Issues marked as [`Question`](#question) or [`Problem`](#problem) get marked as inactive when the author is not responsive or the topic is old.
+If an issue is marked as inactive for about 2 weeks it can be closed without any hesitation. + +### `PRIORITY` +In general this is used for major bugs. There should only exist a few issues marked as PRIORITY at the same time.
+These issues need to be handled before all others. + +### `Requires breaking change` +A lot of code needs to be changed to implement this. This is maybe something for a major release or something for someone with a lot of time on their hands :-) + +### `waiting for answer/improvement` +This is mostly used for pull requests were a reviewer requested some changes and the owner has not responded yet. + +### `Work In Progress` +Someone is working on this issue or a pull request already exists and needs to be reviewed.
+ +## Example Workflows + +### Bug + +[`Problem`](#Problem) ⟶ [`Confirmed Bug`](#confirmed-bug) ⟶ [`Work In Progress`](#work-in-progress) ⟶ [`Fixed awaiting release`](#fixed-awaiting-release) + +### Feature-Request + +[`Feature-Request`](#feature-request) ⟶ [`Work In Progress`](#work-in-progress) ⟶ [`Fixed awaiting release`](#fixed-awaiting-release) diff --git a/package.json b/package.json index 2695c51f..a9ae4053 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ ], "main": "./dist/vis.js", "scripts": { - "test": "mocha", + "test": "mocha --compilers js:babel-core/register", "build": "gulp", "lint": "eslint lib", "watch": "gulp watch",