Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Multiple fonts in lables, and width and height constraints #2385

Merged
merged 9 commits into from
Dec 2, 2016
Merged

Multiple fonts in lables, and width and height constraints #2385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
68db199
Multifont node and edge labels
eymiha Nov 24, 2016
81d2595
adjust documentation
eymiha Nov 24, 2016
fd505af
rework mod-font property inheritance
eymiha Nov 24, 2016
62370d5
Node max/min widths, min heights; Edge max widths
eymiha Nov 30, 2016
ffbc16e
Accumulate sizes correctly for unconstrained multipoint labels
eymiha Nov 30, 2016
75a1714
handle font.multi when groupOptions.font is not declared
eymiha Nov 30, 2016
08a21e4
propagate label fonts on changes, not just creation
eymiha Nov 30, 2016
ee7edf2
Allow top-level constraint numbers
eymiha Dec 1, 2016
6c58fd3
accumulate width and empty lines appropriately
eymiha Dec 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 210 additions & 2 deletions docs/network/edges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,37 @@ <h3>Options</h3>
background: 'none',
strokeWidth: 2, // px
strokeColor: '#ffffff',
align:'horizontal'
align: 'horizontal',
multi: false,
vadjust: 0,
bold: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold'
},
ital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'italic',
},
boldital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold italic'
},
mono: {
color: '#343434',
size: 15, // px
face: 'courier new',
vadjust: 2,
mod: ''
}
},
hidden: false,
hoverWidth: 1.5,
Expand Down Expand Up @@ -178,8 +208,9 @@ <h3>Options</h3>
roundness: 0.5
},
title:undefined,
value: undefined,
width: 1,
value: undefined
widthConstraint: false
}
}

Expand Down Expand Up @@ -390,6 +421,171 @@ <h3>Options</h3>
the label will align itself according to the edge.
</td>
</tr>
<tr parent="font" class="hidden">
<td class="indent">font.vadjust</td>
<td>String</td>
<td><code>0</code></td>
<td>A font-specific correction to the vertical positioning of the base font in the label text. (Positive is down.)</td>
</tr>
<tr parent="font" class="hidden">
<td class="indent">font.multi</td>
<td>Boolean or String</td>
<td><code>false</code></td>
<td>If <code>false</code>, the label is treated as pure text drawn with the base font. If <code>true</code> or <code>'html'</code> the label may be multifonted, with bold, italic and code markup, interpreted as html. If the value is <code>'markdown'</code> or <code>'md'</code> the label may be multifonted, with bold, italic and code markup, interpreted as markdown.
The bold, italic, bold-italic and monospaced fonts may be set up under in the font.bold, font.ital, font.boldital and font.mono properties, respectively.</td>
</tr>
<tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','bold', this);">
<td><span parent="bold" class="right-caret"></span> font.bold</td>
<td>Object or String</td>
<td><code>false</code></td>
<td>This object defines the details of the bold font in the label. A shorthand is also supported in the form <code>'size face
color'</code> for example: <code>'14px arial red'</code>.
</td>
</tr>
<tr parent="bold" class="hidden">
<td class="indent">font.bold.color</td>
<td>String</td>
<td><code>'#343434'</code></td>
<td>Color of the bold font in the label text. Defaults to the base font's color.</td>
</tr>
<tr parent="bold" class="hidden">
<td class="indent">font.bold.size</td>
<td>Number</td>
<td><code>14</code></td>
<td>Size of the bold font in the label text. Defaults to the base font's size.</td>
</tr>
<tr parent="bold" class="hidden">
<td class="indent">font.bold.face</td>
<td>String</td>
<td><code>'arial'</code></td>
<td>Font face (or font family) of the bold font in the label text. Defaults to the base font's face.</td>
</tr>
<tr parent="bold" class="hidden">
<td class="indent">font.bold.mod</td>
<td>String</td>
<td><code>'bold'</code></td>
<td>A string added to the face and size when determining the bold font in the label text.</td>
</tr>
<tr parent="bold" class="hidden">
<td class="indent">font.bold.vadjust</td>
<td>String</td>
<td><code>0</code></td>
<td>A font-specific correction to the vertical positioning of the bold italic font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
</tr>
<tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','ital', this);">
<td><span parent="ital" class="right-caret"></span> font.ital</td>
<td>Object or String</td>
<td><code>false</code></td>
<td>This object defines the details of the italic font in the label. A shorthand is also supported in the form <code>'size face
color'</code> for example: <code>'14px arial red'</code>.
</td>
</tr>
<tr parent="ital" class="hidden">
<td class="indent">font.ital.color</td>
<td>String</td>
<td><code>'#343434'</code></td>
<td>Color of the italic font in the label text. Defaults to the base font's color.</td>
</tr>
<tr parent="ital" class="hidden">
<td class="indent">font.ital.size</td>
<td>Number</td>
<td><code>14</code></td>
<td>Size of the italic font in the label text. Defaults to the base font's size.</td>
</tr>
<tr parent="ital" class="hidden">
<td class="indent">font.ital.face</td>
<td>String</td>
<td><code>'arial'</code></td>
<td>Font face (or font family) of the italic font in the label text. Defaults to the base font's face.</td>
</tr>
<tr parent="ital" class="hidden">
<td class="indent">font.ital.mod</td>
<td>String</td>
<td><code>'italic'</code></td>
<td>A string added to the face and size when determining the italic font in the label text.</td>
</tr>
<tr parent="ital" class="hidden">
<td class="indent">font.ital.vadjust</td>
<td>String</td>
<td><code>0</code></td>
<td>A font-specific correction to the vertical positioning of the italic font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
</tr>
<tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','boldital', this);">
<td><span parent="boldital" class="right-caret"></span> font.boldital</td>
<td>Object or String</td>
<td><code>false</code></td>
<td>This object defines the details of the bold italic font in the label. A shorthand is also supported in the form <code>'size face
color'</code> for example: <code>'14px arial red'</code>.
</td>
</tr>
<tr parent="boldital" class="hidden">
<td class="indent">font.boldital.color</td>
<td>String</td>
<td><code>'#343434'</code></td>
<td>Color of the bold italic font in the label text. Defaults to the base font's color.</td>
</tr>
<tr parent="boldital" class="hidden">
<td class="indent">font.boldital.size</td>
<td>Number</td>
<td><code>14</code></td>
<td>Size of the bold italic font in the label text. Defaults to the base font's size.</td>
</tr>
<tr parent="boldital" class="hidden">
<td class="indent">font.boldital.face</td>
<td>String</td>
<td><code>'arial'</code></td>
<td>Font face (or font family) of the bold italic font in the label text. Defaults to the base font's face.</td>
</tr>
<tr parent="boldital" class="hidden">
<td class="indent">font.boldital.mod</td>
<td>String</td>
<td><code>'bold'</code></td>
<td>A string added to the face and size when determining the bold italic font in the label text.</td>
</tr>
<tr parent="boldital" class="hidden">
<td class="indent">font.boldital.vadjust</td>
<td>String</td>
<td><code>0</code></td>
<td>A font-specific correction to the vertical positioning of the bold italic font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
</tr>
<tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','mono', this);">
<td><span parent="mono" class="right-caret"></span> font.mono</td>
<td>Object or String</td>
<td><code>false</code></td>
<td>This object defines the details of the monospaced font in the label. A shorthand is also supported in the form <code>'size face
color'</code> for example: <code>'15px courier red'</code>.
</td>
</tr>
<tr parent="mono" class="hidden">
<td class="indent">font.mono.color</td>
<td>String</td>
<td><code>'#343434'</code></td>
<td>Color of the monospaced font in the label text. Defaults to the base font's color.</td>
</tr>
<tr parent="mono" class="hidden">
<td class="indent">font.mono.size</td>
<td>Number</td>
<td><code>15</code></td>
<td>Size of the monospaced font in the label text. Defaults to the base font's size.</td>
</tr>
<tr parent="mono" class="hidden">
<td class="indent">font.mono.face</td>
<td>String</td>
<td><code>'courier new'</code></td>
<td>Font face (or font family) of the monospaced font in the label text.</td>
</tr>
<tr parent="mono" class="hidden">
<td class="indent">font.mono.mod</td>
<td>String</td>
<td><code>''</code></td>
<td>A string added to the face and size when determining the monospaced font in the label text.</td>
</tr>
<tr parent="mono" class="hidden">
<td class="indent">font.mono.vadjust</td>
<td>String</td>
<td><code>2</code></td>
<td>A font-specific correction to the vertical positioning of the monospaced font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
</tr>
<tr>
<td>from</td>
<td>Number or String</td>
Expand Down Expand Up @@ -691,6 +887,18 @@ <h3>Options</h3>
<td><code>1</code></td>
<td>The width of the edge. If value is set, this is not used.</td>
</tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','widthConstraint', this);">
<td><span parent="widthConstraint" class="right-caret"></span> widthConstraint</td>
<td>Number, Boolean or Object</td>
<td><code>false</code></td>
<td>If false, no widthConstraint is applied. If a number is specified, the maximum width of the edge's label is set to the value. The edge's label's lines will be broken on spaces to stay below the maximum.</td>
</tr>
<tr parent="widthConstraint" class="hidden">
<td class="indent">widthConstraint.maximum</td>
<td>Number</td>
<td><code>undefined</code></td>
<td>If a number is specified, the maximum width of the edge's label is set to the value. The edge's label's lines will be broken on spaces to stay below the maximum.</td>
</tr>
</table>

</div>
Expand Down
Loading