Skip to content

@graphty/graph-io / styles / EdgeStyleValues

Interface: EdgeStyleValues ​

Defined in: styles/types.ts:529

The neutral edge properties and the type of each value.

Properties ​

arcRadius ​

readonly arcRadius: number

Defined in: styles/types.ts:703

A curved edge drawn as an arc of the circle through both node centers, whose radius is this many times the distance between them (Gephi: the distance over its arc curveness 1.2).


arrowPosition ​

readonly arrowPosition: number

Defined in: styles/types.ts:626

Where along the line each arrowhead is drawn, as a fraction of the line measured from the arrow's own end: 0 (the default) at the end, 0.5 at the middle, at most 1.


arrowSize ​

readonly arrowSize: number

Defined in: styles/types.ts:589

The arrow size as a factor: 1 is the writing tool's normal size. With sourceArrowSize, the target's alone.


bendCurve ​

readonly bendCurve: string

Defined in: styles/types.ts:698

How a curved edge is drawn through its bends: "corners", straight through each bend with its corner rounded, or "midpoints", one smooth curve using the bends as control points, from the middle of each segment to the next and leaving each end along its first and last segments (Cytoscape desktop), or "bezier", one Bezier curve whose control points are the bends (one: quadratic, two: cubic; vis-network's smooth edges), or "arc", the arc of the circle through both ends and the one bend, which lies on it (yEd's arc edge).


bends ​

readonly bends: string

Defined in: styles/types.ts:681

The points the edge's route passes through between its two nodes, each as along,across relative to the line from the source node's center to the target's (along the fraction of the way along it, across the distance to its left, y up, as a fraction of its length), separated by spaces: "0,-0.5 1,-0.5". Drawn as straight segments through them, with rounded corners when curved. A self-loop has no line between two centers, so its points are written as sourcePort is, relative to its node's center and size.


color ​

readonly color: `#${string}`

Defined in: styles/types.ts:531

The line color.


curved ​

readonly curved: boolean

Defined in: styles/types.ts:673

Whether the edge is drawn curved.


fanned ​

readonly fanned: boolean

Defined in: styles/types.ts:690

Whether a curved edge is spread apart from the other curved edges between the same two nodes (true), or drawn as its own curve, bowing to the left of its direction whatever its siblings are (false, as Gephi draws them).


fanSpacing ​

readonly fanSpacing: number

Defined in: styles/types.ts:685

How far apart, at their middle, neighboring curved edges between the same two nodes are drawn (a length).


gradientColors ​

readonly gradientColors: string

Defined in: styles/types.ts:570

The colors a line painted in a gradient runs through, #rrggbb separated by spaces (Cytoscape.js line-gradient-stop-colors); see gradientKind.


gradientKind ​

readonly gradientKind: string

Defined in: styles/types.ts:577

How the line's gradient runs: linear from the source end to the target end, radial out from the line's middle, or none for a line in its color (Cytoscape.js line-fill).


gradientStops ​

readonly gradientStops: string

Defined in: styles/types.ts:572

Where each gradient color sits, fractions from 0 to 1 separated by spaces; absent, evenly spaced.


label ​

readonly label: string

Defined in: styles/types.ts:719

The label text.


labelBackground ​

readonly labelBackground: `#${string}`

Defined in: styles/types.ts:766

The color of a box drawn behind the label's text; see the node's.


labelBackgroundOpacity ​

readonly labelBackgroundOpacity: number

Defined in: styles/types.ts:768

The opacity of that box, 0..1.


labelBorderColor ​

readonly labelBorderColor: `#${string}`

Defined in: styles/types.ts:774

The color of a line drawn round the box behind the label's words (yEd lineColor).


labelBorderOpacity ​

readonly labelBorderOpacity: number

Defined in: styles/types.ts:780

How opaque the line round the box behind the label's words is, from 0 (none) to 1, over its color. Unset, 1.


labelBorderWidth ​

readonly labelBorderWidth: number

Defined in: styles/types.ts:776

How thick that line is, in the units of labelSize; 0 draws none.


labelColor ​

readonly labelColor: `#${string}`

Defined in: styles/types.ts:537

The label's text color.


labelCornerRadius ​

readonly labelCornerRadius: number

Defined in: styles/types.ts:787

How far the corners of the box behind the label's words are rounded, in the units of labelSize. Unset, square.


labelFont ​

readonly labelFont: string

Defined in: styles/types.ts:731

The label's font family.


labelItalic ​

readonly labelItalic: boolean

Defined in: styles/types.ts:737

Whether the label is italic.


labelLineHeight ​

readonly labelLineHeight: number

Defined in: styles/types.ts:789

How tall one line of the label is, as a multiple of its font's ascent plus descent. Unset, 1.2.


labelMinScreenSize ​

readonly labelMinScreenSize: number

Defined in: styles/types.ts:817

The label is not drawn while its letters are drawn smaller than this many screen pixels; see the node's.


labelOffsetX ​

readonly labelOffsetX: number

Defined in: styles/types.ts:754

How far right of where labelPosition puts it the label is drawn (a length).


labelOffsetY ​

readonly labelOffsetY: number

Defined in: styles/types.ts:756

How far down from where labelPosition puts it the label is drawn (a length).


labelOnTop ​

readonly labelOnTop: boolean

Defined in: styles/types.ts:819

Whether the label is drawn over every node and edge; see the node's.


labelOpacity ​

readonly labelOpacity: number

Defined in: styles/types.ts:762

The opacity of the label's words, 0..1.


labelOutlineColor ​

readonly labelOutlineColor: `#${string}`

Defined in: styles/types.ts:770

The color of an outline drawn round each letter of the label; see the node's.


labelOutlineOpacity ​

readonly labelOutlineOpacity: number

Defined in: styles/types.ts:778

How opaque the outline round the label's letters is, from 0 (none) to 1, over its color. Unset, 1.


labelOutlineWidth ​

readonly labelOutlineWidth: number

Defined in: styles/types.ts:772

How thick that outline is, in the units of labelSize; 0 draws none.


labelPadding ​

readonly labelPadding: number

Defined in: styles/types.ts:785

How far the box behind the label's words (its background and border) reaches past the words' line box on every side, in the units of labelSize; 0 puts the border against the words. Unset, the drawing program's default.


labelPosition ​

readonly labelPosition: StyleLabelPosition

Defined in: styles/types.ts:752

Where the label sits against the line's middle: center on the line, top above it.


labelRotation ​

readonly labelRotation: number

Defined in: styles/types.ts:764

How far the label is turned, in degrees clockwise on screen, 0 up to 360; see the node's.


labelRunAlign ​

readonly labelRunAlign: string

Defined in: styles/types.ts:750

Where runs of different sizes in one line of labelRuns meet: baseline (their alphabetic baselines, the default), hanging (their hanging baselines, so their tops line up) or middle (their middles).


labelRuns ​

readonly labelRuns: string

Defined in: styles/types.ts:727

The label drawn in runs of styles of their own (a program's rich text: vis-network's multi-font labels), as a JSON array of runs left to right, each { "text": string, "weight"?: "bold", "italic"?: true, "font"?: string, "size"?: number, "color"?: "#rrggbb" }; a run's text may hold line breaks. A run gives only what differs from the label's own font (labelFont, labelSize, labelColor, labelWeight, labelItalic). Its words, run after run, are label. Unset, the label is drawn in its own font throughout.


labelShiftX ​

readonly labelShiftX: number

Defined in: styles/types.ts:758

How far right the label is drawn again, as a fraction of its own width; see the node's.


labelShiftY ​

readonly labelShiftY: number

Defined in: styles/types.ts:760

How far down the label is drawn again, as a fraction of its own height; see the node's.


labelSize ​

readonly labelSize: number

Defined in: styles/types.ts:587

The label's font size.


labelTextAlign ​

readonly labelTextAlign: StyleLabelTextAlign

Defined in: styles/types.ts:735

How the label's lines line up with one another; see the node's.


labelWeight ​

readonly labelWeight: StyleLabelWeight

Defined in: styles/types.ts:733

The label's font weight.


labelWrapAnywhere ​

readonly labelWrapAnywhere: boolean

Defined in: styles/types.ts:743

Whether a line may break between any two letters; see the node's.


labelWrapEllipsis ​

readonly labelWrapEllipsis: boolean

Defined in: styles/types.ts:741

Whether a line wider than labelWrapWidth is cut with an ellipsis; see the node's.


labelWrapSpaceCount ​

readonly labelWrapSpaceCount: number

Defined in: styles/types.ts:745

How many blanks a blank between two words counts as against labelWrapWidth; see the node's.


labelWrapWidth ​

readonly labelWrapWidth: number

Defined in: styles/types.ts:739

The width the label's lines wrap at (a length); see the node's.


lineStyle ​

readonly lineStyle: StyleLineStyle

Defined in: styles/types.ts:628

The line style.


midSourceArrow ​

readonly midSourceArrow: StyleArrowShape

Defined in: styles/types.ts:646

An arrow drawn at the middle of the line pointing toward the source (Cytoscape.js mid-source-arrow-shape).


midSourceArrowColor ​

readonly midSourceArrowColor: `#${string}`

Defined in: styles/types.ts:650

The color of the arrow at the middle pointing toward the source.


midTargetArrow ​

readonly midTargetArrow: StyleArrowShape

Defined in: styles/types.ts:644

An arrow drawn at the middle of the line pointing toward the target, besides any at the ends (Cytoscape.js mid-target-arrow-shape, vis-network arrows.middle), sized as the target's arrow is.


midTargetArrowColor ​

readonly midTargetArrowColor: `#${string}`

Defined in: styles/types.ts:648

The color of the arrow at the middle pointing toward the target.


midTargetArrowImage ​

readonly midTargetArrowImage: string

Defined in: styles/types.ts:659

The picture an other:image middle arrow pointing toward the target draws, as targetArrowImage says.


midTargetArrowImageHeight ​

readonly midTargetArrowImageHeight: number

Defined in: styles/types.ts:671

How long an image middle arrow is drawn, as targetArrowImageHeight says.


midTargetArrowImageWidth ​

readonly midTargetArrowImageWidth: number

Defined in: styles/types.ts:669

How wide an image middle arrow is drawn, as targetArrowImageWidth says.


minScreenWidth ​

readonly minScreenWidth: number

Defined in: styles/types.ts:585

The fewest screen pixels wide the line is drawn, whatever its width comes to on screen (0 included): a screen size, not a length, so it is never scaled with the file's lengths (sigma.js's minEdgeThickness). Unset, the line is drawn at its width alone.


nodeGap ​

readonly nodeGap: number

Defined in: styles/types.ts:708

How far from each of its nodes' outlines the edge's line (and its arrowhead) stops, leaving that much empty (a length; Gephi's edge.radius).


opacity ​

readonly opacity: number

Defined in: styles/types.ts:539

The opacity of the whole edge, 0..1.


outlineColor ​

readonly outlineColor: `#${string}`

Defined in: styles/types.ts:546

The color of that band.


outlineOpacity ​

readonly outlineOpacity: number

Defined in: styles/types.ts:548

The opacity of that band, 0..1.


outlineStyle ​

readonly outlineStyle: StyleLineStyle

Defined in: styles/types.ts:550

The pattern that band is drawn in (vis-network background.dashes); unset, solid.


outlineWidth ​

readonly outlineWidth: number

Defined in: styles/types.ts:544

How much wider than the line a band drawn under it is (a length, half of it each side; Cytoscape.js line-outline-width, vis-network background.size less the line's width); 0 or absent draws none.


overlayColor ​

readonly overlayColor: `#${string}`

Defined in: styles/types.ts:561

The color of the same band drawn over the line (Cytoscape.js overlay-*).


overlayOpacity ​

readonly overlayOpacity: number

Defined in: styles/types.ts:563

The opacity of the band over the line, 0..1; 0 draws none.


overlayPadding ​

readonly overlayPadding: number

Defined in: styles/types.ts:565

How far either side of the line's middle the band over it reaches (a length).


sourceArrow ​

readonly sourceArrow: StyleArrowShape

Defined in: styles/types.ts:637

The arrow at the source end.


sourceArrowColor ​

readonly sourceArrowColor: `#${string}`

Defined in: styles/types.ts:533

The color of the arrow at the source end.


sourceArrowGap ​

readonly sourceArrowGap: number

Defined in: styles/types.ts:611

How far from its node the source arrowhead is drawn, the line stopping there too, as a multiple of the arrowhead's own length along its line: Cytoscape desktop draws its T bar 4 of its lengths off the node. Unset or 0, the arrowhead touches the node.


sourceArrowImage ​

readonly sourceArrowImage: string

Defined in: styles/types.ts:657

The picture an other:image source arrow draws, as targetArrowImage says.


sourceArrowImageHeight ​

readonly sourceArrowImageHeight: number

Defined in: styles/types.ts:667

How long an image source arrow is drawn, as targetArrowImageHeight says.


sourceArrowImageWidth ​

readonly sourceArrowImageWidth: number

Defined in: styles/types.ts:665

How wide an image source arrow is drawn, as targetArrowImageWidth says.


sourceArrowLength ​

readonly sourceArrowLength: number

Defined in: styles/types.ts:596

How long the source arrowhead is along its line, as a fraction of its shape's normal length in the writing tool: Cytoscape's DELTA_SHORT_1 is a triangle half as long as its DELTA (0.5).


sourceArrowSide ​

readonly sourceArrowSide: StyleArrowSide

Defined in: styles/types.ts:619

The side of its line the source arrowhead is drawn on alone, cut along the line: left or right looking along the line toward the arrowhead's tip (Graphviz's l and r arrow modifiers: lcrow, rdiamond). Unset, the whole arrowhead.


sourceArrowSize ​

readonly sourceArrowSize: number

Defined in: styles/types.ts:591

The source end's arrow size, where the file sizes it apart from the target's: a factor as arrowSize is.


sourceArrowWidth ​

readonly sourceArrowWidth: number

Defined in: styles/types.ts:603

How wide the source arrowhead is across its line, as a fraction of its shape's normal width in the writing tool: Cytoscape's ARROW_SHORT is a vee 0.8 as wide as its ARROW.


sourceLabel ​

readonly sourceLabel: string

Defined in: styles/types.ts:791

The label text at the source end.


sourceLabelOffset ​

readonly sourceLabelOffset: number

Defined in: styles/types.ts:798

Where the source end's label sits: its middle on the line, this far along it from where the line leaves the source node (a length; Cytoscape.js source-text-offset). Absent, beside the end as the reader places it.


sourceLabelOffsetX ​

readonly sourceLabelOffsetX: number

Defined in: styles/types.ts:805

How far the source end's label is moved right of where it sits, on the screen (a length; Cytoscape.js source-text-margin-x).


sourceLabelOffsetY ​

readonly sourceLabelOffsetY: number

Defined in: styles/types.ts:807

How far the source end's label is moved down, on the screen (a length; source-text-margin-y).


sourceLabelRotation ​

readonly sourceLabelRotation: number

Defined in: styles/types.ts:813

How far the source end's label is turned, in degrees clockwise about its middle; unset, level.


sourcePort ​

readonly sourcePort: string

Defined in: styles/types.ts:715

Where the edge leaves its source node, when not at its center: x,y relative to the node's center as fractions of its half width and half height, y up ("1,0" is the middle of its right side, "0,1" of its top), so the point stays on the same spot of the node at any size. The line runs from that point instead of from where the line from the center crosses the node's outline.


targetArrow ​

readonly targetArrow: StyleArrowShape

Defined in: styles/types.ts:639

The arrow at the target end.


targetArrowColor ​

readonly targetArrowColor: `#${string}`

Defined in: styles/types.ts:535

The color of the arrow at the target end.


targetArrowGap ​

readonly targetArrowGap: number

Defined in: styles/types.ts:613

How far from its node the target arrowhead is drawn, as sourceArrowGap says.


targetArrowImage ​

readonly targetArrowImage: string

Defined in: styles/types.ts:655

The picture an other:image target arrow draws, a URL or a data URL (vis-network arrows.to.src of type image), standing on its line with its top edge across the arrow's point.


targetArrowImageHeight ​

readonly targetArrowImageHeight: number

Defined in: styles/types.ts:663

How long along its line an image target arrow is drawn (vis-network imageHeight); absent, its picture's own.


targetArrowImageWidth ​

readonly targetArrowImageWidth: number

Defined in: styles/types.ts:661

How wide across its line an image target arrow is drawn (vis-network imageWidth); absent, its picture's own.


targetArrowLength ​

readonly targetArrowLength: number

Defined in: styles/types.ts:598

How long the target arrowhead is, as sourceArrowLength says.


targetArrowSide ​

readonly targetArrowSide: StyleArrowSide

Defined in: styles/types.ts:621

The side of its line the target arrowhead is drawn on alone, as sourceArrowSide says.


targetArrowWidth ​

readonly targetArrowWidth: number

Defined in: styles/types.ts:605

How wide the target arrowhead is, as sourceArrowWidth says.


targetLabel ​

readonly targetLabel: string

Defined in: styles/types.ts:793

The label text at the target end.


targetLabelOffset ​

readonly targetLabelOffset: number

Defined in: styles/types.ts:800

Where the target end's label sits, as sourceLabelOffset says, from where the line meets the target node.


targetLabelOffsetX ​

readonly targetLabelOffsetX: number

Defined in: styles/types.ts:809

How far the target end's label is moved right, on the screen (a length; target-text-margin-x).


targetLabelOffsetY ​

readonly targetLabelOffsetY: number

Defined in: styles/types.ts:811

How far the target end's label is moved down, on the screen (a length; target-text-margin-y).


targetLabelRotation ​

readonly targetLabelRotation: number

Defined in: styles/types.ts:815

How far the target end's label is turned, in degrees clockwise about its middle; unset, level.


targetPort ​

readonly targetPort: string

Defined in: styles/types.ts:717

Where the edge meets its target node, when not at its center: written as sourcePort is.


tooltip ​

readonly tooltip: string

Defined in: styles/types.ts:729

The tooltip text.


underlayColor ​

readonly underlayColor: `#${string}`

Defined in: styles/types.ts:555

The color of a band drawn beneath the line along its whole length, underlayPadding either side of the line's middle whatever its width (Cytoscape.js underlay-*); drawn only with an underlayOpacity above 0.


underlayOpacity ​

readonly underlayOpacity: number

Defined in: styles/types.ts:557

The opacity of that band, 0..1; 0 draws none.


underlayPadding ​

readonly underlayPadding: number

Defined in: styles/types.ts:559

How far either side of the line's middle the band reaches (a length).


visible ​

readonly visible: boolean

Defined in: styles/types.ts:821

Whether the edge is drawn at all.


waveAmplitude ​

readonly waveAmplitude: number

Defined in: styles/types.ts:633

How far a zigzag or sine-wave line swings to either side of its path (a length; Cytoscape desktop's strokes swing 10 px). With it, width is the thickness of the waving line.


wavePeriod ​

readonly wavePeriod: number

Defined in: styles/types.ts:635

How far along its path a zigzag or sine-wave line runs before it repeats (a length; Cytoscape's: 20 px).


width ​

readonly width: number

Defined in: styles/types.ts:579

The line width.