Browse Source

- Added #936, useImageSize for images and circularImages

flowchartTest
Alex de Mulder 9 years ago
parent
commit
9966d534cb
6 changed files with 56 additions and 28 deletions
  1. +1
    -0
      HISTORY.md
  2. +23
    -14
      dist/vis.js
  3. +9
    -1
      docs/network/nodes.html
  4. +2
    -1
      lib/network/modules/NodesHandler.js
  5. +18
    -11
      lib/network/modules/components/nodes/util/CircleImageBase.js
  6. +3
    -1
      lib/network/options.js

+ 1
- 0
HISTORY.md View File

@ -17,6 +17,7 @@ http://visjs.org
- Fixed #1111, check if edges exist was not correct on update. - Fixed #1111, check if edges exist was not correct on update.
- Fixed #1112, network now works in firefox on unix again. - Fixed #1112, network now works in firefox on unix again.
- Added #931, borderRadius in shapeProperties for the box shape. - Added #931, borderRadius in shapeProperties for the box shape.
- Added #936, useImageSize for images and circularImages
## 2015-07-20, version 4.5.1 ## 2015-07-20, version 4.5.1

+ 23
- 14
dist/vis.js View File

@ -27244,7 +27244,8 @@ return /******/ (function(modules) { // webpackBootstrap
shape: 'ellipse', shape: 'ellipse',
shapeProperties: { shapeProperties: {
borderDashes: false, borderDashes: false,
borderRadius: 6
borderRadius: 6,
useImageSize: false
}, },
size: 25, size: 25,
title: undefined, title: undefined,
@ -28811,19 +28812,25 @@ return /******/ (function(modules) { // webpackBootstrap
width = 0; width = 0;
height = 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 { } 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.width = width;
this.height = height; this.height = height;
@ -39907,6 +39914,7 @@ return /******/ (function(modules) { // webpackBootstrap
shapeProperties: { shapeProperties: {
borderDashes: { boolean: boolean, array: array }, borderDashes: { boolean: boolean, array: array },
borderRadius: { number: number }, borderRadius: { number: number },
useImageSize: { boolean: boolean },
__type__: { object: object } __type__: { object: object }
}, },
size: { number: number }, size: { number: number },
@ -40041,8 +40049,9 @@ return /******/ (function(modules) { // webpackBootstrap
}, },
shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'], shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
shapeProperties: { shapeProperties: {
//borderDashes: false,
borderRadius: 6
borderDashes: false,
borderRadius: 6,
useImageSize: false
}, },
size: [25, 0, 200, 1] size: [25, 0, 200, 1]
}, },

+ 9
- 1
docs/network/nodes.html View File

@ -631,7 +631,15 @@ mySize = minSize + diff * scale;
<td class="indent">shapeProperties.borderRadius</td> <td class="indent">shapeProperties.borderRadius</td>
<td>Number</td> <td>Number</td>
<td><code>6</code></td> <td><code>6</code></td>
<td>This property is used only for the box shape. It allows you to determine the roundness of the corners of the shape.
<td>This property is used only for the <code>box</code> shape. It allows you to determine the roundness of the corners of the shape.
</td>
</tr>
<tr parent="shapeProperties" class="hidden">
<td class="indent">shapeProperties.useImageSize</td>
<td>Boolean</td>
<td><code>false</code></td>
<td>This property only applies to the <code>image</code> and <code>circularImage</code> shapes. When false, the size option is used, when true, the size of the image is used. <br><i><b>Important</b>:
if this is set to true, the image cannot be scaled with the value option!</i>
</td> </td>
</tr> </tr>
<tr> <tr>

+ 2
- 1
lib/network/modules/NodesHandler.js View File

@ -94,7 +94,8 @@ class NodesHandler {
shape: 'ellipse', shape: 'ellipse',
shapeProperties: { shapeProperties: {
borderDashes: false, borderDashes: false,
borderRadius: 6
borderRadius: 6,
useImageSize: false
}, },
size: 25, size: 25,
title: undefined, title: undefined,

+ 18
- 11
lib/network/modules/components/nodes/util/CircleImageBase.js View File

@ -29,20 +29,27 @@ class CircleImageBase extends NodeBase {
width = 0; width = 0;
height = 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 { 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.width = width;
this.height = height; this.height = height;

+ 3
- 1
lib/network/options.js View File

@ -211,6 +211,7 @@ let allOptions = {
shapeProperties: { shapeProperties: {
borderDashes: { boolean, array }, borderDashes: { boolean, array },
borderRadius: { number }, borderRadius: { number },
useImageSize: { boolean },
__type__: { object } __type__: { object }
}, },
size: { number }, size: { number },
@ -346,8 +347,9 @@ let configureOptions = {
}, },
shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'], shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
shapeProperties: { shapeProperties: {
//borderDashes: false,
borderDashes: false,
borderRadius: 6, borderRadius: 6,
useImageSize: false
}, },
size: [25, 0, 200, 1] size: [25, 0, 200, 1]
}, },

Loading…
Cancel
Save