Browse Source

fixed dashes

flowchartTest
Alex de Mulder 9 years ago
parent
commit
e0a59ba01f
6 changed files with 2855 additions and 2878 deletions
  1. +2834
    -2837
      dist/vis.js
  2. +7
    -25
      docs/network/edges.html
  3. +1
    -4
      lib/network/modules/EdgesHandler.js
  4. +1
    -5
      lib/network/modules/components/AllOptions.js
  5. +8
    -1
      lib/network/modules/components/Edge.js
  6. +4
    -6
      lib/network/modules/components/edges/util/EdgeBase.js

+ 2834
- 2837
dist/vis.js
File diff suppressed because it is too large
View File


+ 7
- 25
docs/network/edges.html View File

@ -115,10 +115,7 @@ var options = {
inherit: 'from',
opacity:1.0
},
dashes:{
enabled: false,
pattern:[5,5]
},
dashes: false,
font: {
color: '#343434',
size: 14, // px
@ -182,7 +179,6 @@ var options = {
edges:{
arrows: 'to, from',
color: 'red',
dashes: true,
font: '12px arial #ff0000',
scaling:{
label: true,
@ -301,28 +297,14 @@ network.setOptions(options);
impact is not too big.
</td>
</tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','dashes', this);">
<td><span parent="dashes" class="right-caret"></span> dashes</td>
<td class="mid">Object or Boolean</td>
<td class="mid"><code>Object</code></td>
<td>When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an object.
<i>When using dashed lines in IE versions older than 11, the line will be drawn straight, not smooth</i>.
</td>
</tr>
<tr parent="dashes" class="hidden">
<td class="indent">dashes.enabled</td>
<td class="mid">Boolean</td>
<tr>
<td>dashes</td>
<td class="mid">Array or Boolean</td>
<td class="mid"><code>false</code></td>
<td>Toggle the dash drawing style on or off. This option is optional, if undefined and the scaleFactor
property is set, enabled will be set to true.
</td>
</tr>
<tr parent="dashes" class="hidden">
<td class="indent">dashes.pattern</td>
<td class="mid">Array</td>
<td class="mid"><code>[5,5]</code></td>
<td>Array of numbers repeating gap length, dash length, gap length, dash length, ... etc. The array is
<td>When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an Array.
Array formart: Array of numbers, gap length, dash length, gap length, dash length, ... etc. The array is
repeated until the distance is filled.
<i>When using dashed lines in IE versions older than 11, the line will be drawn straight, not smooth</i>.
</td>
</tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','font', this);">

+ 1
- 4
lib/network/modules/EdgesHandler.js View File

@ -34,10 +34,7 @@ class EdgesHandler {
inherit: 'from',
opacity:1.0
},
dashes:{
enabled: false,
pattern:[5,5]
},
dashes: false,
font: {
color: '#343434',
size: 14, // px

+ 1
- 5
lib/network/modules/components/AllOptions.js View File

@ -49,11 +49,7 @@ let allOptions = {
opacity: {number},
__type__: {object, string}
},
dashes: {
enabled: {boolean},
pattern: {array},
__type__: {boolean,object}
},
dashes: {boolean,array},
font: {
color: {string},
size: {number}, // px

+ 8
- 1
lib/network/modules/components/Edge.js View File

@ -111,9 +111,16 @@ class Edge {
util.selectiveDeepExtend(fields, parentOptions, newOptions, allowDeletion);
util.mergeOptions(parentOptions, newOptions, 'smooth');
util.mergeOptions(parentOptions, newOptions, 'dashes');
util.mergeOptions(parentOptions, newOptions, 'shadow');
if (newOptions.dashes !== undefined && newOptions.dashes !== null) {
parentOptions.dashes = newOptions.dashes;
}
else if (allowDeletion === true) {
parentOptions.dashes = undefined;
delete parentOptions.dashes;
}
// set the scaling newOptions
if (newOptions.scaling !== undefined && newOptions.scaling !== null) {
if (newOptions.scaling.min !== undefined) {parentOptions.scaling.min = newOptions.scaling.min;}

+ 4
- 6
lib/network/modules/components/edges/util/EdgeBase.js View File

@ -36,7 +36,7 @@ class EdgeBase {
ctx.strokeStyle = this.getColor(ctx);
ctx.lineWidth = this.getLineWidth(selected, hover);
let via = undefined;
if (this.options.dashes.enabled === true) {
if (this.options.dashes !== false) {
via = this._drawDashedLine(ctx);
}
else {
@ -63,14 +63,12 @@ class EdgeBase {
let via = undefined;
ctx.lineCap = 'round';
let pattern = [5,5];
if (this.options.dashes.pattern !== undefined) {
if (Array.isArray(this.options.dashes.pattern) === true) {
pattern = this.options.dashes.pattern;
}
if (Array.isArray(this.options.dashes) === true) {
pattern = this.options.dashes;
}
// only firefox and chrome support this method, else we use the legacy one.
if (ctx.setLineDash !== undefined && this.options.dashes.altLength === undefined) {
if (ctx.setLineDash !== undefined) {
ctx.save();
// set dash settings for chrome or firefox

Loading…
Cancel
Save