447 lines
14 KiB
TypeScript
447 lines
14 KiB
TypeScript
/**
|
|
* @author Martin Karkowski
|
|
* @email m.karkowski@zema.de
|
|
* @create date 2019-02-21 09:12:33
|
|
* @modify date 2020-03-11 17:12:56
|
|
* @desc [description]
|
|
*/
|
|
|
|
import { IFont } from './IFont';
|
|
import { IScaling } from './IScaling';
|
|
import { IShadow } from './IShadow';
|
|
import { IWidthContraint } from './IWidthContraint';
|
|
|
|
export interface IBaseNodeOptions<K=any> {
|
|
|
|
/**
|
|
* Flag, to Enable / Disable Auto-Resizing.
|
|
*/
|
|
autoResize?: boolean;
|
|
|
|
/**
|
|
* Flag, used for checking, whether deleting
|
|
* of the corresponding element is allowed
|
|
*/
|
|
deletable?: boolean;
|
|
|
|
/**
|
|
* Template, that will be used during clustering
|
|
*/
|
|
clusterTemplate?: ((node: IBaseNodeOptions) => IBaseNodeOptions) | IBaseNodeOptions;
|
|
|
|
/**
|
|
* The width of the border of the node.
|
|
*/
|
|
borderWidth?: number;
|
|
|
|
/**
|
|
* The width of the border of the node when it is selected. When undefined, the borderWidth * 2 is used.
|
|
*/
|
|
borderWidthSelected?: number;
|
|
|
|
/**
|
|
* When the shape is set to image or circularImage, this option can
|
|
* be an URL to a backup image in case the URL supplied in the image
|
|
* option cannot be resolved.
|
|
*/
|
|
brokenImage?: string;
|
|
|
|
/**
|
|
* Options how to render node, if it is choosen
|
|
*/
|
|
chosen?: boolean | {
|
|
/**
|
|
* When true, selecting or hovering on a node will change its characteristics according the default.
|
|
* When false, no change to the node will occur when the node is chosen.
|
|
*
|
|
* If a function is supplied, it is called when the node is chosen.
|
|
*
|
|
* function(values, id, selected, hovering) {
|
|
* values.property = chosenValue;
|
|
* }
|
|
*
|
|
* Any of the incoming arguments may be used to determine characteristic changes. If a property
|
|
* is not specifically assigned by the supplied function, it will be left unchanged. A specific
|
|
* function may be assigned to each particular node in its options, or to all in the network's
|
|
* nodes options.
|
|
*
|
|
* The properties define the characteristics that can be changed as follows:
|
|
*
|
|
* Property Node Reference
|
|
* color see color.background
|
|
* borderWidth see borderWidth
|
|
* borderColor see color.border
|
|
* size see size
|
|
* borderDashes see shapeProperties.borderDashes
|
|
* borderRadius see shapeProperties.borderRadius
|
|
* shadow see shadow.enabled
|
|
* shadowColor see shadow.color
|
|
* shadowSize see shadow.size
|
|
* shadowX see shadow.x
|
|
* shadowY see shadow.y
|
|
*
|
|
*/
|
|
node?: boolean | ((values, id, selected, hovering) => void),
|
|
/*
|
|
* When true, selecting or hovering on a node will change its label's characteristics according
|
|
* the default. When false, no change to the node's label will occur when the node is chosen.
|
|
*
|
|
* If a function is supplied, it is called when the node is chosen.
|
|
*
|
|
* function(values, id, selected, hovering) {
|
|
* values.property = chosenValue;
|
|
* }
|
|
*
|
|
* Any of the incoming arguments may be used to determine characteristic changes. If a property
|
|
* is not specifically assigned by the supplied function, it will be left unchanged. A specific
|
|
* function may be assigned to each particular node in its options, or to all in the network's
|
|
* nodes options.
|
|
*
|
|
* The properties define the characteristics that can be changed as follows:
|
|
*
|
|
* Property Node Reference
|
|
* color see font.color
|
|
* size see font.size
|
|
* face see font.face
|
|
* mod font modifier ('bold', 'italic', etc.)
|
|
* vadjust see font.vadjust
|
|
* strokeWidth see font.strokeWidth
|
|
* strokeColor see font.strokeColor
|
|
*
|
|
*/
|
|
label?: boolean | ((values, id, selected, hovering) => void)
|
|
};
|
|
|
|
/**
|
|
* Color Settings of the Node.
|
|
*/
|
|
color?: string | {
|
|
/**
|
|
* The color of the border of the node when it is not selected or hovered over
|
|
* (assuming hover is enabled in the interaction module).
|
|
*/
|
|
border?: string,
|
|
/**
|
|
* The color of the background of the node when it is not selected or hovered
|
|
* over (assuming hover is enabled in the interaction module).
|
|
*/
|
|
background?: string,
|
|
/**
|
|
* The color the node when it is selected. Alternatively you can just supply
|
|
* a string color value.
|
|
*/
|
|
highlight?: string | {
|
|
/**
|
|
* The color of the border of the node when it is selected.
|
|
*/
|
|
border: string,
|
|
/**
|
|
* The color of the background of the node when it is selected.
|
|
*/
|
|
background: string
|
|
},
|
|
/**
|
|
* The color the node when the mouse hovers over it (assuming hover
|
|
* is enabled in the interaction module). Shorthand like above is
|
|
* also supported.
|
|
*/
|
|
hover?: string | {
|
|
/**
|
|
* The color of the border of the node when the mouse hovers over
|
|
* it (assuming hover is enabled in the interaction module).
|
|
*/
|
|
border?: string,
|
|
/**
|
|
* The color of the background of the node when the mouse hovers
|
|
* over it (assuming hover is enabled in the interaction module).
|
|
*/
|
|
background?: string
|
|
}
|
|
};
|
|
|
|
/** Selector for selecting a corresponding Edit-Page */
|
|
editorComponentSelector?: string;
|
|
|
|
fixed?: boolean | {
|
|
/** When true, the node will not move in the X direction. */
|
|
x?: boolean,
|
|
/** When true, the node will not move in the Y direction. */
|
|
y?: boolean
|
|
};
|
|
|
|
/**
|
|
* Settings of the Font
|
|
*/
|
|
font?: IFont;
|
|
|
|
/**
|
|
* A Group template.
|
|
*/
|
|
group?: string;
|
|
|
|
/**
|
|
* An Id for the currently assigned group.
|
|
*/
|
|
groupId?: number
|
|
|
|
/**
|
|
* If false, no heightConstraint is applied. If a number is specified,
|
|
* the value is used as the minimum height of the node. The node's
|
|
* height will be set to the minimum if less than the value.
|
|
*/
|
|
heightConstraint?: boolean | number | {
|
|
minimum?: number,
|
|
valign: `middle` | `top` | `bottom`
|
|
};
|
|
|
|
/**
|
|
* Toggle the visibility of the Node.
|
|
*/
|
|
hidden?: boolean;
|
|
|
|
/** Required, if a html-sahpe is selected */
|
|
html?: {
|
|
/** The ID of the HTML-Element which should be used. (Use an existing one) */
|
|
id?: string;
|
|
/** Valid HTML-Code, which should be used */
|
|
code?: string,
|
|
/** Additional border between node and HTML-Div */
|
|
border?: number,
|
|
/** Settings for the Overflow */
|
|
overflow?: `hidden`,
|
|
/** Minimal Width of the Element which is reuqired to render The HTML. Otherwise its grayed out */
|
|
minWidth?: number,
|
|
/** Minimal Height of the Element which is reuqired to render The HTML. Otherwise its grayed out */
|
|
minHeight?: number,
|
|
};
|
|
|
|
/** Define segments for sub-nodes */
|
|
segment?: {
|
|
[index: string]: {
|
|
/** Text that should be rendered in the Center of the Node */
|
|
label?: string,
|
|
// Defined Background-Color
|
|
background?: string,
|
|
hidden?: boolean,
|
|
// Defined Height
|
|
height?: number,
|
|
width?: number,
|
|
/** Required, if a html-sahpe is selected */
|
|
html?: {
|
|
/** The ID of the HTML-Element which should be used */
|
|
id?: string;
|
|
/** Valid HTML-Code, which should be used */
|
|
code?: string,
|
|
/** Additional border between node and HTML-Div */
|
|
border?: number,
|
|
/** Settings for the Overflow */
|
|
overflow?: `hidden`,
|
|
/** Minimal Width of the Segement which is reuqired to render The HTML. Otherwise its grayed out */
|
|
minWidth?: number,
|
|
/** Minimal Height of the Segement which is reuqired to render The HTML. Otherwise its grayed out */
|
|
minHeight?: number,
|
|
},
|
|
/** Function to Render the Segment */
|
|
drawFunction?: (l:number,t:number, w:number, h:number, shape:any, ctx: any) => any;
|
|
}
|
|
};
|
|
|
|
/** Icon Properties. See original Docu */
|
|
icon?: {
|
|
face?: `FontAwesome`,
|
|
code?: string,
|
|
size?: number
|
|
color?: string
|
|
};
|
|
|
|
/** Id of the Node */
|
|
id: string;
|
|
|
|
/** Image Settings. See original Docu
|
|
*/
|
|
image?: string | {
|
|
selected?: string,
|
|
unselected?: string
|
|
};
|
|
|
|
/** Flag indicating whether the Element should be handled like a Connector (auto placement) */
|
|
isConnector?: boolean;
|
|
|
|
/** Flag indicating whether the Element should be handled like a Resizer */
|
|
isResizer?: boolean;
|
|
|
|
/**
|
|
* The label is the piece of text shown in or under the node, depending on the shape.
|
|
*/
|
|
label?: string;
|
|
|
|
/**
|
|
* Position of a Connector, if the node is a Connector
|
|
*/
|
|
position?: `top` | `left` | `right` | `bottom`;
|
|
|
|
/**
|
|
* Determines whether or not the label becomes bold when the node is selected.
|
|
*/
|
|
labelHighlightBold?: boolean;
|
|
|
|
/**
|
|
* Flag to render the node as selected
|
|
*/
|
|
selected?: boolean;
|
|
|
|
/** Flag, to make the Element able to drop items in it. */
|
|
receiveDropableElements?: boolean;
|
|
|
|
/** Flag to make an object Dropable. Thereby it can be pulled into
|
|
* another container which is capable of picking up dropped items
|
|
* (Therefore the Flag contentDropable must be used)
|
|
*/
|
|
dropable?: boolean;
|
|
|
|
/**
|
|
* When using the hierarchical layout, the level determines where the node is going to be positioned.
|
|
* Otherwise is used to define the Render-Order.
|
|
*/
|
|
level?: number;
|
|
|
|
/** Margin for the Shapes `box`, `circle`, `database`, `icon`, `text` */
|
|
margin?: number | {
|
|
top: number,
|
|
right: number,
|
|
bottom: number,
|
|
left: number,
|
|
};
|
|
|
|
/**
|
|
* User Data of the Elements.
|
|
*/
|
|
data?: K;
|
|
|
|
/**
|
|
* The barnesHut physics model (which is enabled by default) is based on an
|
|
* inverted gravity model. By increasing the mass of a node, you increase it`s
|
|
* repulsion.
|
|
*
|
|
* Values between 0 and 1 are not recommended.
|
|
* Negative or zero values are not allowed. These will generate a console
|
|
* error and will be set to 1.
|
|
*/
|
|
mass?: number;
|
|
/**
|
|
* When false, the node is not part of the physics simulation. It will not move except for from manual dragging.
|
|
*/
|
|
physics?: boolean;
|
|
/**
|
|
* If the value option is specified, the size of the nodes
|
|
* will be scaled according to the properties in this object. All node
|
|
* shapes can be scaled, but some only when label scaling is enabled as
|
|
* their size is based on the size of the label. Only scalable when
|
|
* label scaling is enabled are: ellipse,circle, database, box, text.
|
|
* Always scalable are: image, circularImage, diamond, dot, star, triangle,
|
|
* triangleDown, hexagon, square and icon.
|
|
* Keep in mind that when using scaling, the size option is neglected.
|
|
*/
|
|
scaling?: IScaling;
|
|
|
|
/**
|
|
* When true, the node casts a shadow using the default settings. This
|
|
* can be further refined by supplying an object.
|
|
*/
|
|
shadow?: IShadow;
|
|
|
|
/**
|
|
* The shape defines what the node looks like. There are three types
|
|
* of nodes. One type has the label inside of it and the other type
|
|
* has the label underneath it. The third type is a custom shape you
|
|
* can draw whatever you want to represent the node.
|
|
*/
|
|
shape?:
|
|
`ellipse` | `circle` | `database` | `box` |
|
|
`text` | `image`| `circularImage`| `diamond`|
|
|
`dot`| `star`| `triangle`| `triangleDown`|
|
|
`hexagon`| `square`| `icon` |
|
|
|
|
// Extended Elements
|
|
`process` | `product` | `equipment` | `value` |
|
|
`variable` | `multinode` | `htmlnode` | `swimlane-vertical` | `swimlane-horizontal` | `place`;
|
|
|
|
/**
|
|
* Configuration of the shape.
|
|
*/
|
|
shapeProperties?: {
|
|
// only for borders
|
|
borderDashes?: boolean,
|
|
// only for box shape
|
|
borderRadius?: number,
|
|
// only for image and circularImage shapes
|
|
interpolation?: boolean,
|
|
// only for image and circularImage shapes
|
|
useImageSize?: boolean,
|
|
// only for image shape
|
|
useBorderWithImage?: boolean
|
|
};
|
|
|
|
/** Rendered Value of a Connector */
|
|
renderedValue?: string;
|
|
|
|
/** Custom Header Draw Function */
|
|
headerDrawfunction?: (l:number,t:number, w:number, h:number, shape:any, ctx: any) => any;
|
|
|
|
/**
|
|
* The size is used to determine the size of node shapes that do not have the
|
|
* label inside of them. These shapes are: image, circularImage, diamond, dot,
|
|
* star, triangle, triangleDown, hexagon, square and icon
|
|
*/
|
|
size?: number;
|
|
|
|
/**
|
|
* Title to be displayed when the user hovers over the node.
|
|
* The title can be an HTML element or a string containing plain text or HTML.
|
|
*/
|
|
title?: string;
|
|
|
|
/**
|
|
* When a value is set, the nodes will be scaled using the options in the scaling
|
|
* object defined above.
|
|
*/
|
|
value?: number;
|
|
|
|
/** See official Docu */
|
|
widthConstraint?: IWidthContraint;
|
|
|
|
/** Flag, to enable / disable the Connector Titles for a Node */
|
|
renderConnectorTitles?: boolean;
|
|
|
|
/** Only Relevant if the Element is a Resizer. If so, you have to specify the Segment, which
|
|
* should be resized by the connector.
|
|
*/
|
|
resizingSegment?: string;
|
|
|
|
/** X-Position */
|
|
x?: number;
|
|
/** Y-Position */
|
|
y?: number;
|
|
|
|
/** Max X-Position */
|
|
maxX?: number;
|
|
/** Max Y-Position */
|
|
maxY?: number;
|
|
/** Min-X Position */
|
|
minX?: number;
|
|
/** Min-Y Position */
|
|
minY?: number;
|
|
|
|
/** Width of the Shape */
|
|
width?: number;
|
|
|
|
/** Height of the Shape */
|
|
height?: number;
|
|
|
|
/** The Parent Node */
|
|
parent?: string;
|
|
|
|
/** A Type of the Node */
|
|
type?: string;
|
|
}
|