From 9966d534cbd3b2bc200716332ad7ae49f1c54583 Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Wed, 22 Jul 2015 11:36:07 +0200 Subject: [PATCH] - Added #936, useImageSize for images and circularImages --- HISTORY.md | 1 + dist/vis.js | 37 ++++++++++++------- docs/network/nodes.html | 10 ++++- lib/network/modules/NodesHandler.js | 3 +- .../components/nodes/util/CircleImageBase.js | 29 +++++++++------ lib/network/options.js | 4 +- 6 files changed, 56 insertions(+), 28 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 2d2918c3..b8900a6b 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -17,6 +17,7 @@ http://visjs.org - Fixed #1111, check if edges exist was not correct on update. - Fixed #1112, network now works in firefox on unix again. - Added #931, borderRadius in shapeProperties for the box shape. +- Added #936, useImageSize for images and circularImages ## 2015-07-20, version 4.5.1 diff --git a/dist/vis.js b/dist/vis.js index 42aa6738..69d1612c 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -27244,7 +27244,8 @@ return /******/ (function(modules) { // webpackBootstrap shape: 'ellipse', shapeProperties: { borderDashes: false, - borderRadius: 6 + borderRadius: 6, + useImageSize: false }, size: 25, title: undefined, @@ -28811,19 +28812,25 @@ return /******/ (function(modules) { // webpackBootstrap width = 0; height = 0; } - if (this.imageObj.width > this.imageObj.height) { - ratio = this.imageObj.width / this.imageObj.height; - width = this.options.size * 2 * ratio || this.imageObj.width; - height = this.options.size * 2 || this.imageObj.height; - } else { - if (this.imageObj.width && this.imageObj.height) { - // not undefined or 0 - ratio = this.imageObj.height / this.imageObj.width; + if (this.options.shapeProperties.useImageSize === false) { + if (this.imageObj.width > this.imageObj.height) { + ratio = this.imageObj.width / this.imageObj.height; + width = this.options.size * 2 * ratio || this.imageObj.width; + height = this.options.size * 2 || this.imageObj.height; } else { - ratio = 1; + if (this.imageObj.width && this.imageObj.height) { + // not undefined or 0 + ratio = this.imageObj.height / this.imageObj.width; + } else { + ratio = 1; + } + width = this.options.size * 2; + height = this.options.size * 2 * ratio; } - width = this.options.size * 2 || this.imageObj.width; - height = this.options.size * 2 * ratio || this.imageObj.height; + } else { + // when not using the size property, we use the image size + width = this.imageObj.width; + height = this.imageObj.height; } this.width = width; this.height = height; @@ -39907,6 +39914,7 @@ return /******/ (function(modules) { // webpackBootstrap shapeProperties: { borderDashes: { boolean: boolean, array: array }, borderRadius: { number: number }, + useImageSize: { boolean: boolean }, __type__: { object: object } }, size: { number: number }, @@ -40041,8 +40049,9 @@ return /******/ (function(modules) { // webpackBootstrap }, shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'], shapeProperties: { - //borderDashes: false, - borderRadius: 6 + borderDashes: false, + borderRadius: 6, + useImageSize: false }, size: [25, 0, 200, 1] }, diff --git a/docs/network/nodes.html b/docs/network/nodes.html index 1b7a638c..83c00b7e 100644 --- a/docs/network/nodes.html +++ b/docs/network/nodes.html @@ -631,7 +631,15 @@ mySize = minSize + diff * scale; shapeProperties.borderRadius Number 6 - This property is used only for the box shape. It allows you to determine the roundness of the corners of the shape. + This property is used only for the box shape. It allows you to determine the roundness of the corners of the shape. + + + + shapeProperties.useImageSize + Boolean + false + This property only applies to the image and circularImage shapes. When false, the size option is used, when true, the size of the image is used.
Important: + if this is set to true, the image cannot be scaled with the value option! diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js index 5d0899c9..d34306e0 100644 --- a/lib/network/modules/NodesHandler.js +++ b/lib/network/modules/NodesHandler.js @@ -94,7 +94,8 @@ class NodesHandler { shape: 'ellipse', shapeProperties: { borderDashes: false, - borderRadius: 6 + borderRadius: 6, + useImageSize: false }, size: 25, title: undefined, diff --git a/lib/network/modules/components/nodes/util/CircleImageBase.js b/lib/network/modules/components/nodes/util/CircleImageBase.js index caba5706..f262b68c 100644 --- a/lib/network/modules/components/nodes/util/CircleImageBase.js +++ b/lib/network/modules/components/nodes/util/CircleImageBase.js @@ -29,20 +29,27 @@ class CircleImageBase extends NodeBase { width = 0; height = 0; } - if (this.imageObj.width > this.imageObj.height) { - ratio = this.imageObj.width / this.imageObj.height; - width = this.options.size * 2 * ratio || this.imageObj.width; - height = this.options.size * 2 || this.imageObj.height; - } - else { - if (this.imageObj.width && this.imageObj.height) { // not undefined or 0 - ratio = this.imageObj.height / this.imageObj.width; + if (this.options.shapeProperties.useImageSize === false) { + if (this.imageObj.width > this.imageObj.height) { + ratio = this.imageObj.width / this.imageObj.height; + width = this.options.size * 2 * ratio || this.imageObj.width; + height = this.options.size * 2 || this.imageObj.height; } else { - ratio = 1; + if (this.imageObj.width && this.imageObj.height) { // not undefined or 0 + ratio = this.imageObj.height / this.imageObj.width; + } + else { + ratio = 1; + } + width = this.options.size * 2; + height = this.options.size * 2 * ratio; } - width = this.options.size * 2 || this.imageObj.width; - height = this.options.size * 2 * ratio || this.imageObj.height; + } + else { + // when not using the size property, we use the image size + width = this.imageObj.width; + height = this.imageObj.height; } this.width = width; this.height = height; diff --git a/lib/network/options.js b/lib/network/options.js index 47e1e5aa..39208e6f 100644 --- a/lib/network/options.js +++ b/lib/network/options.js @@ -211,6 +211,7 @@ let allOptions = { shapeProperties: { borderDashes: { boolean, array }, borderRadius: { number }, + useImageSize: { boolean }, __type__: { object } }, size: { number }, @@ -346,8 +347,9 @@ let configureOptions = { }, shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'], shapeProperties: { - //borderDashes: false, + borderDashes: false, borderRadius: 6, + useImageSize: false }, size: [25, 0, 200, 1] },