248 lines
8.5 KiB
TypeScript
248 lines
8.5 KiB
TypeScript
/**
|
|
* @author Martin Karkowski
|
|
* @email m.karkowski@zema.de
|
|
* @create date 2019-02-21 09:09:09
|
|
* @modify date 2020-03-11 17:12:52
|
|
* @desc [description]
|
|
*/
|
|
|
|
import { IFont } from './IFont';
|
|
import { IScaling } from './IScaling';
|
|
import { IShadow } from './IShadow';
|
|
import { IWidthContraint } from './IWidthContraint';
|
|
|
|
|
|
export type arrowTypes = 'circle'|'circle-filledout'|'box'|'crow'|'curve'|'diamond'|'inv_curve'|'triangle'|'inv_triangle'|'bar'|'vee'|'arrow';
|
|
|
|
export interface IBaseEdgeOptions<K=any> {
|
|
/**
|
|
* To draw an arrow with default settings a string can be supplied. For
|
|
* example: arrows:'to, from, middle' or
|
|
* 'to;from', any combination with any seperating symbol
|
|
* is fine. If you want to control the size of the arrowheads, you can
|
|
* supply an object.
|
|
*/
|
|
arrows?: 'to' | 'from' | 'middle' | 'to;from' | 'to;middle' | 'to;from;middle' | 'from;middle' | {
|
|
/**
|
|
* When true, an arrowhead on the 'to' side of the edge is drawn, pointing to
|
|
* the 'to' node with default settings. To customize the size of the arrow,
|
|
* supply an object.
|
|
*/
|
|
to?: boolean | {
|
|
/**
|
|
* Toggle the arrow on or off. This option is optional,
|
|
* if undefined and the scaleFactor property is set,
|
|
* enabled will be set to true.
|
|
*/
|
|
enabled?: boolean,
|
|
/**
|
|
* The scale factor allows you to change the size of
|
|
* the arrowhead.
|
|
*/
|
|
scaleFactor?: number,
|
|
/**
|
|
* The type of endpoint. Possible values are: arrow, bar, circle. The default is arrow.
|
|
*/
|
|
type?: arrowTypes
|
|
},
|
|
middle?: boolean | {
|
|
/**
|
|
* Toggle the arrow on or off. This option is optional,
|
|
* if undefined and the scaleFactor property is set,
|
|
* enabled will be set to true.
|
|
*/
|
|
enabled?: boolean,
|
|
/**
|
|
* The scale factor allows you to change the size of
|
|
* the arrowhead.
|
|
*/
|
|
scaleFactor?: number,
|
|
/**
|
|
* The type of endpoint. Possible values are: arrow, bar, circle. The default is arrow.
|
|
*/
|
|
type?: arrowTypes
|
|
},
|
|
from?: boolean | {
|
|
/**
|
|
* Toggle the arrow on or off. This option is optional,
|
|
* if undefined and the scaleFactor property is set,
|
|
* enabled will be set to true.
|
|
*/
|
|
enabled?: boolean,
|
|
/**
|
|
* The scale factor allows you to change the size of
|
|
* the arrowhead.
|
|
*/
|
|
scaleFactor?: number,
|
|
/**
|
|
* The type of endpoint. Possible values are: arrow, bar, circle. The default is arrow.
|
|
*/
|
|
type?: arrowTypes
|
|
}
|
|
};
|
|
/**
|
|
* When false, the edge stops at the arrow. This can be useful if you have thick lines
|
|
* and you want the arrow to end in a point. Middle arrows are not affected by this.
|
|
*/
|
|
arrowStrikethrough?: boolean;
|
|
chosen?: boolean |{
|
|
edge?: (values, id, selected, hovering) => void
|
|
};
|
|
color?: string | {
|
|
color?: string,
|
|
highlight?: string,
|
|
hover?: string,
|
|
inherit?: true | false | 'from' | 'to' | 'both'
|
|
opacity?: number
|
|
};
|
|
/**
|
|
* Select Dashes for the Connection
|
|
*/
|
|
dashes?: boolean | number [];
|
|
/**
|
|
* Filed containing the User-Data
|
|
*/
|
|
data?: K;
|
|
/**
|
|
* Settings of the Font
|
|
*/
|
|
font?: IFont;
|
|
/**
|
|
* Id of the Node on which
|
|
*/
|
|
from: string;
|
|
/**
|
|
* Flag to hide the Edge
|
|
*/
|
|
hidden?: boolean;
|
|
/**
|
|
* Assuming the hover behaviour is enabled in the interaction module, the hoverWidth
|
|
* determines the width of the edge when the user hovers over it with
|
|
* the mouse. If a number is supplied, this number will be added to the width.
|
|
*/
|
|
hoverWidth?: number;
|
|
/**
|
|
* Id of the Edge
|
|
*/
|
|
id?: string;
|
|
/**
|
|
* The label is the piece of text shown under the edge.
|
|
*/
|
|
label?: string;
|
|
/**
|
|
* Flag to hide the Label
|
|
*/
|
|
labelHidden?: boolean,
|
|
/**
|
|
* Determines whether or not the label becomes bold when the edge is selected.
|
|
*/
|
|
labelHighlightBold?: boolean;
|
|
/**
|
|
* The physics simulation gives edges a spring length.
|
|
* This value can override the length of the spring in rest.
|
|
*/
|
|
length?: number;
|
|
/**
|
|
* The physics simulation gives edges a spring length. This value can
|
|
* override the length of the spring in rest.
|
|
*/
|
|
physics?: boolean;
|
|
/**
|
|
* If the value option is specified, the width of the
|
|
* edges will be scaled according to the properties in this object.
|
|
* Keep in mind that when using scaling, the width option
|
|
* is neglected.
|
|
*/
|
|
scaling?: IScaling;
|
|
/**
|
|
* The selectionWidth determines the width of the edge when the edge is
|
|
* selected. If a number is supplied, this number will be
|
|
* added to the width. Because the width can be altered by the
|
|
* value and the scaling functions, a constant multiplier or added
|
|
* value may not give the best results. To solve this, you can supply a
|
|
* function.
|
|
*/
|
|
selectionWidth?: number | ((value: number) => number);
|
|
/**
|
|
* When the to and from nodes are the same, a circle is drawn. This is
|
|
* the radius of that circle. This property is deprecated please use
|
|
* selfReference instead.
|
|
*/
|
|
selfReferenceSize?: number;
|
|
selfReference?: number;
|
|
/**
|
|
* Toggle the casting of shadows. If this option is not defined, it is
|
|
* set to true if any of the properties in this object are defined.
|
|
*/
|
|
shadow?: IShadow;
|
|
/**
|
|
* When true, the edge is drawn as a dynamic quadratic bezier curve.
|
|
* The drawing of these curves takes longer than that of straight
|
|
* curves but it looks better. There is a difference between dynamic
|
|
* smooth curves and static smooth curves. The dynamic smooth curves
|
|
* have an invisible support node that takes part in the physics
|
|
* simulation. If you have a lot of edges, you may want to consider
|
|
* picking a different type of smooth curves than dynamic for better
|
|
* performance.
|
|
*/
|
|
smooth?: boolean | {
|
|
/**
|
|
* Toggle smooth curves on and off. This is an optional option. If any
|
|
* of the other properties in this object are set, this option will be
|
|
* set to true.
|
|
*/
|
|
enabled?: boolean,
|
|
/**
|
|
* Accepted options: ['horizontal', 'vertical', 'none'].
|
|
* This options is only used with the cubicBezier curves. When true,
|
|
* horizontal is chosen, when false, the direction that is larger (x
|
|
* distance between nodes vs y distance between nodes) is used. If the
|
|
* x distance is larger, horizontal. This is ment to be used with
|
|
* hierarchical layouts.
|
|
*/
|
|
forceDirection?: 'horizontal' | 'vertical' | 'none',
|
|
/**
|
|
* Possible options:
|
|
* 'dynamic', 'continuous', 'discrete', 'diagonalCross',
|
|
* 'straightCross', 'horizontal', 'vertical', 'curvedCW',
|
|
* 'curvedCCW', 'cubicBezier'.
|
|
*
|
|
* When using dynamic, the edges will have an invisible support node
|
|
* guiding the shape. This node is part of the physics simulation.
|
|
*/
|
|
type?:
|
|
'dynamic' | 'continuous' | 'discrete' | 'diagonalCross' |
|
|
'straightCross' | 'horizontal' | 'vertical' | 'curvedCW' | 'curvedCCW' | 'cubicBezier',
|
|
/**
|
|
* Accepted range: 0 .. 1.0. This parameter tweaks the
|
|
* roundness of the smooth curves for all types EXCEPT dynamic.
|
|
*/
|
|
roundness?: number;
|
|
};
|
|
/**
|
|
* The title is shown in a pop-up when the mouse moves over the edge.
|
|
*/
|
|
title?: string;
|
|
|
|
type?: string;
|
|
to: string;
|
|
/**
|
|
* When a value is set, the edges' width will be scaled using the
|
|
* options in the scaling object defined above.
|
|
*/
|
|
value?: number;
|
|
/**
|
|
* The width of the edge. If value is set, this is not used.
|
|
*/
|
|
width?: number;
|
|
/**
|
|
* 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.
|
|
*/
|
|
widthConstraint?: IWidthContraint;
|
|
/** Selector for selecting a corresponding Edit-Page */
|
|
editorComponentSelector?: string;
|
|
}
|