Browse Source

Merge remote-tracking branch 'origin/develop' into develop

flowchartTest
jos 9 years ago
parent
commit
8c53e8ac93
2 changed files with 88 additions and 66 deletions
  1. +4
    -2
      examples/network/nodeStyles/circularImages.html
  2. +84
    -64
      lib/network/Images.js

+ 4
- 2
examples/network/nodeStyles/circularImages.html View File

@ -45,7 +45,8 @@
{id: 12, shape: 'circularImage', image: DIR + '12.png'}, {id: 12, shape: 'circularImage', image: DIR + '12.png'},
{id: 13, shape: 'circularImage', image: DIR + '13.png'}, {id: 13, shape: 'circularImage', image: DIR + '13.png'},
{id: 14, shape: 'circularImage', image: DIR + '14.png'}, {id: 14, shape: 'circularImage', image: DIR + '14.png'},
{id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"}
{id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"},
{id: 16, shape: 'circularImage', image: DIR + 'anotherMissing.png', brokenImage: DIR + '9.png', label:"fallback image in action"}
]; ];
// create connections between people // create connections between people
@ -64,7 +65,8 @@
{from: 10, to: 11}, {from: 10, to: 11},
{from: 11, to: 12}, {from: 11, to: 12},
{from: 12, to: 13}, {from: 12, to: 13},
{from: 13, to: 14}
{from: 13, to: 14},
{from: 9, to: 16}
]; ];
// create a network // create a network

+ 84
- 64
lib/network/Images.js View File

@ -2,71 +2,91 @@
* @class Images * @class Images
* This class loads images and keeps them stored. * This class loads images and keeps them stored.
*/ */
function Images(callback) {
this.images = {};
this.imageBroken = {};
this.callback = callback;
}
/**
*
* @param {string} url Url of the image
* @param {string} url Url of an image to use if the url image is not found
* @return {Image} img The image object
*/
Images.prototype.load = function(url, brokenUrl, id) {
var img = this.images[url]; // make a pointer
if (img === undefined) {
// create the image
var me = this;
img = new Image();
img.onload = function () {
// IE11 fix -- thanks dponch!
if (this.width === 0) {
document.body.appendChild(this);
this.width = this.offsetWidth;
this.height = this.offsetHeight;
document.body.removeChild(this);
}
if (me.callback) {
me.images[url] = img;
me.callback(this);
}
};
img.onerror = function () {
if (brokenUrl === undefined) {
console.error("Could not load image:", url);
delete this.src;
if (me.callback) {
me.callback(this);
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);
} }
}
else {
if (me.imageBroken[id] && me.imageBroken[id][url] === true) {
console.error("Could not load brokenImage:", brokenUrl);
delete this.src;
if (me.callback) {
me.callback(this);
}
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
* @param {string} brokenUrl Url the broken image to try and load
* @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;
//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());
};
//Set the source of the image to the brokenUrl, this is actually what kicks off the loading of the broken image
imageToLoadBrokenUrlOn.src = brokenUrl;
}
/**
* @return {Image} imageToRedrawWith The images that will be passed to the callback when it is invoked
*/
_redrawWithImage (imageToRedrawWith) {
if (this.callback) {
this.callback(imageToRedrawWith);
} }
else {
console.error("Could not load image:", url);
this.src = brokenUrl;
if (me.imageBroken[id] === undefined) {
me.imageBroken[id] = {};
}
me.imageBroken[id][url] = true;
}
/**
* @param {string} url Url of the image
* @param {string} brokenUrl Url of an image to use if the url image is not found
* @return {Image} img The image object
*/
load (url, brokenUrl, id) {
//Try and get the image from the cache, if successful then return the cached image
var cachedImage = this.images[url];
if (cachedImage) return cachedImage;
//Create a new image
var img = new Image();
//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);
this._redrawWithImage(img);
};
//Subscribe to the event that is raised if the image fails to load
img.onerror = () => {
console.error("Could not load image:", url);
//Try and load the image specified by the brokenUrl using
this._tryloadBrokenUrl(url, brokenUrl, img);
} }
}
};
img.src = url;
}
return img;
};
//Set the source of the image to the url, this is actuall what kicks off the loading of the image
img.src = url;
//Return the new image
return img;
}
}
module.exports = Images;
export default Images;

Loading…
Cancel
Save