@joint/core
Version:
JavaScript diagramming library
1,497 lines (1,031 loc) • 156 kB
TypeScript
import { g } from './geometry';
import { Vectorizer } from './vectorizer';
export const version: string;
export namespace config {
var useCSSSelectors: boolean;
var classNamePrefix: string;
var defaultTheme: string;
var doubleTapInterval: number;
}
type NativeEvent = Event;
type _DeepRequired<T> = {
[P in keyof T]-?: T[P] extends object ? _DeepRequired<T[P]> : T[P];
};
type _DeepPartial<T> = {
[P in keyof T]?: T[P] extends object ? _DeepPartial<T[P]> : T[P];
};
type DeepPartial<T> = _DeepPartial<_DeepRequired<T>>;
// We use `DOMElement` later in the code, to avoid conflicts with the `dia.Element` type.
type DOMElement = Element;
export namespace dia {
type Event = mvc.TriggeredEvent;
type ObjectHash = { [key: string]: any };
type Point = g.PlainPoint;
type BBox = g.PlainRect;
type Size = Pick<BBox, 'width' | 'height'>;
type PaddingJSON = {
left?: number;
top?: number;
right?: number;
bottom?: number;
};
type Padding = number | PaddingJSON;
type SidesJSON = {
left?: number;
top?: number;
right?: number;
bottom?: number;
horizontal?: number;
vertical?: number;
};
type LegacyPositionName = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' |
'topMiddle' | 'bottomMiddle' | 'leftMiddle' | 'rightMiddle' |
'corner' | 'origin';
type PositionName = 'top' | 'left' | 'bottom' | 'right' | 'center' |
'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' |
LegacyPositionName;
type Sides = number | SidesJSON;
type OrthogonalDirection =
'left' | 'top' | 'right' | 'bottom';
type DiagonalDirection =
'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
type Direction = OrthogonalDirection | DiagonalDirection;
type LinkEnd =
'source' | 'target';
type MarkupNodeJSON = {
tagName: string;
selector?: string;
groupSelector?: string | string[];
namespaceURI?: string;
className?: string;
attributes?: attributes.NativeSVGAttributes;
style?: { [key: string]: any };
children?: MarkupJSON;
textContent?: string;
};
type MarkupJSON = Array<MarkupNodeJSON | string>;
type Path = string | Array<string | number>;
interface ModelSetOptions extends mvc.ModelSetOptions {
dry?: boolean;
isolate?: boolean;
[key: string]: any;
}
interface CollectionAddOptions extends mvc.AddOptions {
dry?: boolean;
[key: string]: any;
}
interface SVGPatternJSON {
id?: string;
type: 'pattern';
attrs?: attributes.NativeSVGAttributes;
markup: string | MarkupJSON;
}
interface SVGGradientJSON {
id?: string;
type: 'linearGradient' | 'radialGradient';
attrs?: attributes.NativeSVGAttributes;
stops: Array<{
offset: number | string;
color: string;
opacity?: number;
}>;
}
type SVGMarkerJSON = SVGComplexMarkerJSON | SVGSimpleMarkerJSON;
interface SVGComplexMarkerJSON {
id?: string;
markup: string | MarkupJSON;
attrs?: attributes.NativeSVGAttributes;
}
interface SVGSimpleMarkerJSON extends attributes.NativeSVGAttributes {
id?: string;
type?: string;
/**
* @deprecated use `attrs` instead
*/
markerUnits?: string;
}
type SVGFilterJSON =
util.filter.FilterJSON<'outline'> |
util.filter.FilterJSON<'highlight'> |
util.filter.FilterJSON<'blur'> |
util.filter.FilterJSON<'dropShadow'> |
util.filter.FilterJSON<'grayscale'> |
util.filter.FilterJSON<'sepia'> |
util.filter.FilterJSON<'saturate'> |
util.filter.FilterJSON<'hueRotate'> |
util.filter.FilterJSON<'invert'> |
util.filter.FilterJSON<'brightness'> |
util.filter.FilterJSON<'contrast'>;
export namespace Graph {
interface Options {
[key: string]: any;
}
interface ConnectionOptions extends Cell.EmbeddableOptions {
inbound?: boolean;
outbound?: boolean;
}
interface ExploreOptions extends ConnectionOptions {
breadthFirst?: boolean;
}
interface FindAtPointOptions extends Options {
strict?: boolean;
}
interface FindInAreaOptions extends Options {
strict?: boolean;
}
type SearchByKey = 'bbox' | PositionName;
interface FindUnderElementOptions extends FindInAreaOptions, FindAtPointOptions {
searchBy?: SearchByKey;
}
class Cells extends mvc.Collection<Cell> {
graph: Graph;
cellNamespace: any;
}
interface Attributes {
cells?: Cells;
[key: string]: any;
}
}
class Graph<A extends ObjectHash = Graph.Attributes, S = dia.ModelSetOptions> extends mvc.Model<A, S> {
constructor(attributes?: Graph.Attributes, opt?: { cellNamespace?: any, cellModel?: typeof Cell });
addCell(cell: Cell.JSON | Cell, opt?: CollectionAddOptions): this;
addCell(cell: Array<Cell | Cell.JSON>, opt?: CollectionAddOptions): this;
addCells(cells: Array<Cell | Cell.JSON>, opt?: CollectionAddOptions): this;
resetCells(cells: Array<Cell | Cell.JSON>, opt?: Graph.Options): this;
getCell(id: Cell.ID | Cell): Cell;
getElements(): Element[];
getLinks(): Link[];
getCells(): Cell[];
getFirstCell(): Cell | undefined;
getLastCell(): Cell | undefined;
getConnectedLinks(cell: Cell, opt?: Graph.ConnectionOptions): Link[];
disconnectLinks(cell: Cell, opt?: S): void;
removeLinks(cell: Cell, opt?: Cell.DisconnectableOptions): void;
translate(tx: number, ty?: number, opt?: Element.TranslateOptions): this;
cloneCells(cells: Cell[]): { [id: string]: Cell };
getSubgraph(cells: Cell[], opt?: Cell.EmbeddableOptions): Cell[];
cloneSubgraph(cells: Cell[], opt?: Cell.EmbeddableOptions): { [id: string]: Cell };
dfs(element: Element, iteratee: (element: Element, distance: number) => boolean, opt?: Graph.ConnectionOptions): void;
bfs(element: Element, iteratee: (element: Element, distance: number) => boolean, opt?: Graph.ConnectionOptions): void;
search(element: Element, iteratee: (element: Element, distance: number) => boolean, opt?: Graph.ExploreOptions): void;
getSuccessors(element: Element, opt?: Graph.ExploreOptions): Element[];
getPredecessors(element: Element, opt?: Graph.ExploreOptions): Element[];
isSuccessor(elementA: Element, elementB: Element): boolean;
isPredecessor(elementA: Element, elementB: Element): boolean;
isSource(element: Element): boolean;
isSink(element: Element): boolean;
getSources(): Element[];
getSinks(): Element[];
getNeighbors(element: Element, opt?: Graph.ConnectionOptions): Element[];
isNeighbor(elementA: Element, elementB: Element, opt?: Graph.ConnectionOptions): boolean;
getCommonAncestor(...cells: Cell[]): Element | undefined;
toJSON(opt?: { cellAttributes?: dia.Cell.ExportOptions }): any;
fromJSON(json: any, opt?: S): this;
clear(opt?: { [key: string]: any }): this;
findElementsAtPoint(p: Point, opt?: Graph.FindAtPointOptions): Element[];
findElementsInArea(rect: BBox, opt?: Graph.FindInAreaOptions): Element[];
findElementsUnderElement(element: Element, opt?: Graph.FindUnderElementOptions): Element[];
findLinksAtPoint(p: Point, opt?: Graph.FindAtPointOptions): Link[];
findLinksInArea(rect: BBox, opt?: Graph.FindInAreaOptions): Link[];
findLinksUnderElement(element: Element, opt?: Graph.FindUnderElementOptions): Link[];
findCellsAtPoint(p: Point, opt?: Graph.FindAtPointOptions): Cell[];
findCellsInArea(rect: BBox, opt?: Graph.FindInAreaOptions): Cell[];
findCellsUnderElement(element: Element, opt?: Graph.FindUnderElementOptions): Cell[];
protected _getFindUnderElementGeometry(element: Element, searchBy: Graph.SearchByKey): g.Point | g.Rect;
protected _validateCellsUnderElement<T extends Cell[]>(cells: T, element: Element): T;
protected _isValidElementUnderElement(el1: Element, el2: Element): boolean;
protected _isValidLinkUnderElement(link: Link, element: Element): boolean;
protected _filterCellsUnderElement(cells: Cell[], element: Element, opt: Graph.FindUnderElementOptions): Cell[];
/** @deprecated use `findElementsAtPoint` instead */
findModelsFromPoint(p: Point): Element[];
/** @deprecated use `findElementsInArea` instead */
findModelsInArea(rect: BBox, opt?: Graph.FindInAreaOptions): Element[];
/** @deprecated use `findElementsUnderElement` instead */
findModelsUnderElement(element: Element, opt?: Graph.FindUnderElementOptions): Element[];
getBBox(): g.Rect | null;
getCellsBBox(cells: Cell[], opt?: Cell.EmbeddableOptions): g.Rect | null;
hasActiveBatch(name?: string | string[]): boolean;
maxZIndex(): number;
minZIndex(): number;
removeCells(cells: Cell[], opt?: Cell.DisconnectableOptions): this;
transferCellEmbeds(sourceCell: Cell, targetCell: Cell, opt?: S): void;
transferCellConnectedLinks(sourceCell: Cell, targetCell: Cell, opt?: Graph.ConnectionOptions): void;
resize(width: number, height: number, opt?: S): this;
resizeCells(width: number, height: number, cells: Cell[], opt?: S): this;
startBatch(name: string, data?: { [key: string]: any }): this;
stopBatch(name: string, data?: { [key: string]: any }): this;
}
// dia.Cell
export namespace Cell {
type ID = string | number;
interface GenericAttributes<T> {
attrs?: T;
z?: number;
[key: string]: any;
}
interface Selectors {
[selector: string]: attributes.SVGAttributes | undefined;
}
interface Attributes extends GenericAttributes<Selectors> {
}
type JSON<K extends Selectors = Selectors, T extends GenericAttributes<K> = GenericAttributes<K>> = T & {
[attribute in keyof T]: T[attribute];
} & {
id: ID;
type: string;
};
interface Constructor<T extends mvc.Model> {
new(opt?: { id?: ID, [key: string]: any }): T;
define(type: string, defaults?: any, protoProps?: any, staticProps?: any): dia.Cell.Constructor<T>;
}
interface Options {
[key: string]: any;
}
interface EmbedOptions extends Options {
reparent?: boolean;
}
interface EmbeddableOptions<T = boolean> extends Options {
deep?: T;
}
interface DisconnectableOptions extends Options {
disconnectLinks?: boolean;
}
interface GetEmbeddedCellsOptions extends EmbeddableOptions {
breadthFirst?: boolean;
sortSiblings?: boolean;
}
interface ToFrontAndBackOptions extends GetEmbeddedCellsOptions {
foregroundEmbeds?: boolean;
}
interface TransitionOptions extends Options {
delay?: number;
duration?: number;
timingFunction?: util.timing.TimingFunction;
valueFunction?: util.interpolate.InterpolateFunction<any>;
}
interface ConstructorOptions extends Graph.Options {
mergeArrays?: boolean;
}
interface ExportOptions {
ignoreDefault?: boolean | string[];
ignoreEmptyAttributes?: boolean;
}
type UnsetCallback<V> = (
this: V,
node: DOMElement,
nodeAttributes: { [name: string]: any },
cellView: V
) => string | Array<string> | null | void;
type SetCallback<V> = (
this: V,
attributeValue: any,
refBBox: g.Rect,
node: DOMElement,
nodeAttributes: { [name: string]: any },
cellView: V
) => { [key: string]: any } | string | number | void;
type PositionCallback<V> = (
this: V,
attributeValue: any,
refBBox: g.Rect,
node: DOMElement,
nodeAttributes: { [name: string]: any },
cellView: V
) => dia.Point | null | void;
type OffsetCallback<V> = (
this: V,
attributeValue: any,
nodeBBox: g.Rect,
node: DOMElement,
nodeAttributes: { [name: string]: any },
cellView: V
) => dia.Point | null | void;
interface PresentationAttributeDefinition<V = dia.CellView> {
set?: SetCallback<V> | string;
unset?: UnsetCallback<V> | string | Array<string>;
position?: PositionCallback<V>;
offset?: OffsetCallback<V>;
}
}
class Cell<A extends ObjectHash = Cell.Attributes, S extends mvc.ModelSetOptions = dia.ModelSetOptions> extends mvc.Model<A, S> {
constructor(attributes?: DeepPartial<A>, opt?: Cell.ConstructorOptions);
id: Cell.ID;
graph: Graph;
markup: string | MarkupJSON;
useCSSSelectors: boolean;
protected generateId(): string | number;
protected stopPendingTransitions(path?: string, delim?: string): void;
protected stopScheduledTransitions(path?: string, delim?: string): void;
toJSON(opt?: dia.Cell.ExportOptions): Cell.JSON<any, A>;
remove(opt?: Cell.DisconnectableOptions): this;
toFront(opt?: Cell.ToFrontAndBackOptions): this;
toBack(opt?: Cell.ToFrontAndBackOptions): this;
parent(): string;
getParentCell(): Cell | null;
getAncestors(): Cell[];
getEmbeddedCells(opt?: Cell.GetEmbeddedCellsOptions): Cell[];
isEmbeddedIn(cell: Cell, opt?: Cell.EmbeddableOptions): boolean;
isEmbedded(): boolean;
prop(key: Path): any;
prop(object: DeepPartial<A>, opt?: Cell.Options): this;
prop(key: Path, value: any, opt?: Cell.Options): this;
removeProp(path: Path, opt?: Cell.Options): this;
attr(key?: Path): any;
attr(object: Cell.Selectors, opt?: Cell.Options): this;
attr(key: Path, value: any, opt?: Cell.Options): this;
clone(): this;
clone(opt: Cell.EmbeddableOptions<false>): this;
clone(opt: Cell.EmbeddableOptions<true>): Cell[];
removeAttr(path: Path, opt?: Cell.Options): this;
transition(path: string, value?: any, opt?: Cell.TransitionOptions, delim?: string): number;
getTransitions(): string[];
stopTransitions(path?: string, delim?: string): this;
embed(cell: Cell | Cell[], opt?: Cell.EmbedOptions): this;
unembed(cell: Cell | Cell[], opt?: Graph.Options): this;
canEmbed(cell: Cell | Cell[]): boolean;
addTo(graph: Graph, opt?: Graph.Options): this;
findView(paper: Paper): CellView;
isLink(): this is Link;
isElement(): this is Element;
startBatch(name: string, opt?: Graph.Options): this;
stopBatch(name: string, opt?: Graph.Options): this;
position(): g.Point;
z(): number;
angle(): number;
getBBox(): g.Rect;
getPointFromConnectedLink(link: dia.Link, endType: dia.LinkEnd): g.Point;
getPointRotatedAroundCenter(angle: number, x: number, y: number): g.Point;
getPointRotatedAroundCenter(angle: number, point: dia.Point): g.Point;
getRelativePointFromAbsolute(x: number, y: number): g.Point;
getRelativePointFromAbsolute(absolutePoint: dia.Point): g.Point;
getAbsolutePointFromRelative(x: number, y: number): g.Point;
getAbsolutePointFromRelative(relativePoint: dia.Point): g.Point;
getChangeFlag(attributes: { [key: string]: number }): number;
static define(type: string, defaults?: any, protoProps?: any, staticProps?: any): Cell.Constructor<Cell>;
/**
* @deprecated
*/
protected processPorts(): void;
}
// dia.Element
export namespace Element {
interface GenericAttributes<T> extends Cell.GenericAttributes<T> {
markup?: string | MarkupJSON;
position?: Point;
size?: Size;
angle?: number;
ports?: {
groups?: { [key: string]: PortGroup };
items?: Port[];
};
}
interface Attributes extends GenericAttributes<Cell.Selectors> {
}
type PortPositionCallback = (ports: Port[], bbox: g.Rect) => dia.Point[];
interface PortPositionJSON {
name?: string;
args?: { [key: string]: any };
}
type PositionType = string | PortPositionCallback | PortPositionJSON;
interface PortGroup {
position?: PositionType;
markup?: string | MarkupJSON;
attrs?: Cell.Selectors;
label?: {
markup?: string | MarkupJSON;
position?: PositionType;
};
}
interface Port {
id?: string;
markup?: string | MarkupJSON;
group?: string;
attrs?: Cell.Selectors;
args?: { [key: string]: any };
label?: {
markup?: string | MarkupJSON;
position?: PositionType;
};
z?: number | 'auto';
}
interface PortPosition extends Point {
angle: number;
}
interface TranslateOptions extends Cell.Options {
restrictedArea?: BBox | Paper.PointConstraintCallback;
transition?: Cell.TransitionOptions;
}
interface PositionOptions extends TranslateOptions {
parentRelative?: boolean;
deep?: boolean;
}
interface ResizeOptions extends Cell.Options {
direction?: Direction;
}
interface BBoxOptions extends Cell.EmbeddableOptions {
rotate?: boolean;
}
}
class Element<A extends ObjectHash = Element.Attributes, S extends mvc.ModelSetOptions = dia.ModelSetOptions> extends Cell<A, S> {
translate(tx: number, ty?: number, opt?: Element.TranslateOptions): this;
position(opt?: Element.PositionOptions): g.Point;
position(x: number, y: number, opt?: Element.PositionOptions): this;
size(): Size;
size(size: Partial<Size>, opt?: Element.ResizeOptions): this;
size(width: number, height: number, opt?: Element.ResizeOptions): this;
resize(width: number, height: number, opt?: Element.ResizeOptions): this;
rotate(deg: number, absolute?: boolean, origin?: Point, opt?: { [key: string]: any }): this;
angle(): number;
scale(scaleX: number, scaleY: number, origin?: Point, opt?: { [key: string]: any }): this;
fitEmbeds(opt?: { deep?: boolean, padding?: Padding, expandOnly?: boolean, shrinkOnly?: boolean }): this;
fitToChildren(opt?: { deep?: boolean, padding?: Padding, expandOnly?: boolean, shrinkOnly?: boolean }): this;
fitParent(opt?: { deep?: boolean, padding?: Padding, expandOnly?: boolean, shrinkOnly?: boolean, terminator?: Cell | Cell.ID }): this;
getBBox(opt?: Element.BBoxOptions): g.Rect;
addPort(port: Element.Port, opt?: S): this;
addPorts(ports: Element.Port[], opt?: S): this;
insertPort(before: number | string | Element.Port, port: Element.Port, opt?: S): this;
removePort(port: string | Element.Port, opt?: S): this;
removePorts(opt?: S): this;
removePorts(ports: Array<Element.Port | string>, opt?: S): this;
hasPorts(): boolean;
hasPort(id: string): boolean;
getPorts(): Element.Port[];
getGroupPorts(groupName: string): Element.Port[];
getPort(id: string): Element.Port;
getPortsPositions(groupName: string): { [id: string]: Element.PortPosition };
getPortIndex(port: string | Element.Port): number;
getPortGroupNames(): string[];
portProp(portId: string, path: dia.Path): any;
portProp(portId: string, path: dia.Path, value?: any, opt?: S): Element;
protected generatePortId(): string | number;
static define(type: string, defaults?: any, protoProps?: any, staticProps?: any): Cell.Constructor<Element>;
static attributes: { [attributeName: string]: Cell.PresentationAttributeDefinition<ElementView> };
}
// dia.Link
export namespace Link {
interface EndCellArgs {
magnet?: string;
selector?: string;
port?: string;
anchor?: anchors.AnchorJSON;
connectionPoint?: connectionPoints.ConnectionPointJSON;
priority?: boolean;
}
interface EndJSON extends EndCellArgs {
id?: Cell.ID;
x?: number;
y?: number;
}
interface GenericAttributes<T> extends Cell.GenericAttributes<T> {
source?: EndJSON;
target?: EndJSON;
labels?: Label[];
vertices?: Point[];
router?: routers.Router | routers.RouterJSON;
connector?: connectors.Connector | connectors.ConnectorJSON;
}
interface LinkSelectors extends Cell.Selectors {
'.connection'?: attributes.SVGPathAttributes;
'.connection-wrap'?: attributes.SVGPathAttributes;
'.marker-source'?: attributes.SVGPathAttributes;
'.marker-target'?: attributes.SVGPathAttributes;
'.labels'?: attributes.SVGAttributes;
'.marker-vertices'?: attributes.SVGAttributes;
'.marker-arrowheads'?: attributes.SVGAttributes;
'.link-tools'?: attributes.SVGAttributes;
}
interface Attributes extends Cell.GenericAttributes<LinkSelectors> {
}
interface LabelPosition {
distance?: number; // optional for default labels
offset?: number | { x: number, y: number };
angle?: number;
args?: LinkView.LabelOptions;
}
interface Label {
markup?: string | MarkupJSON;
position?: LabelPosition | number; // optional for default labels
attrs?: Cell.Selectors;
size?: Size;
}
interface Vertex extends Point {
[key: string]: any;
}
}
class Link<A extends ObjectHash = Link.Attributes, S extends mvc.ModelSetOptions = dia.ModelSetOptions> extends Cell<A, S> {
toolMarkup: string;
doubleToolMarkup?: string;
vertexMarkup: string;
arrowHeadMarkup: string;
defaultLabel?: Link.Label; // default label props
/**
* @deprecated use `defaultLabel.markup` instead
*/
labelMarkup?: string | MarkupJSON; // default label markup
disconnect(): this;
source(): Link.EndJSON;
source(source: Link.EndJSON, opt?: S): this;
source(source: Cell, args?: Link.EndCellArgs, opt?: S): this;
target(): Link.EndJSON;
target(target: Link.EndJSON, opt?: S): this;
target(target: Cell, args?: Link.EndCellArgs, opt?: S): this;
router(): routers.Router | routers.RouterJSON | null;
router(router: routers.Router | routers.RouterJSON, opt?: S): this;
router(name: routers.RouterType, args?: routers.RouterArguments, opt?: S): this;
connector(): connectors.Connector | connectors.ConnectorJSON | null;
connector(connector: connectors.Connector | connectors.ConnectorJSON, opt?: S): this;
connector(name: connectors.ConnectorType, args?: connectors.ConnectorArguments, opt?: S): this;
label(index?: number): Link.Label;
label(index: number, label: Link.Label, opt?: S): this;
labels(): Link.Label[];
labels(labels: Link.Label[], opt?: S): this;
hasLabels(): boolean;
insertLabel(index: number, label: Link.Label, opt?: S): Link.Label[];
appendLabel(label: Link.Label, opt?: S): Link.Label[];
removeLabel(index?: number, opt?: S): Link.Label[];
vertex(index?: number): Link.Vertex;
vertex(index: number, vertex: Link.Vertex, opt?: S): this;
vertices(): Link.Vertex[];
vertices(vertices: Link.Vertex[], opt?: S): this;
insertVertex(index: number, vertex: Link.Vertex, opt?: S): Link.Vertex[];
removeVertex(index?: number, opt?: S): Link.Vertex[];
reparent(opt?: S): Element;
getSourceElement(): null | Element;
getTargetElement(): null | Element;
getSourceCell(): null | Cell;
getTargetCell(): null | Cell;
getPolyline(): g.Polyline;
getSourcePoint(): g.Point;
getTargetPoint(): g.Point;
getBBox(): g.Rect;
hasLoop(opt?: Cell.EmbeddableOptions): boolean;
getRelationshipAncestor(): undefined | Element;
isRelationshipEmbeddedIn(cell: Cell): boolean;
applyToPoints(fn: (p: Point) => Point, opt?: S): this;
scale(sx: number, sy: number, origin?: Point, opt?: S): this;
translate(tx: number, ty: number, opt?: S): this;
static define(type: string, defaults?: any, protoProps?: any, staticProps?: any): Cell.Constructor<Link>;
static attributes: { [attributeName: string]: Cell.PresentationAttributeDefinition<LinkView> };
}
// dia.CellView
export namespace CellView {
enum Highlighting {
DEFAULT = 'default',
EMBEDDING = 'embedding',
CONNECTING = 'connecting',
MAGNET_AVAILABILITY = 'magnetAvailability',
ELEMENT_AVAILABILITY = 'elementAvailability'
}
interface EventHighlightOptions {
partial: boolean;
type: Highlighting;
[key: string]: any;
}
interface Options<T extends Cell> extends mvc.ViewOptions<T, SVGElement> {
id?: string;
}
interface InteractivityOptions extends ElementView.InteractivityOptions, LinkView.InteractivityOptions {
}
type FlagLabel = string | string[];
type PresentationAttributes = { [key: string]: FlagLabel };
type NodeData = { [key: string]: any };
type NodeMetrics = {
data: NodeData;
boundingRect: g.Rect;
magnetMatrix: SVGMatrix;
geometryShape: g.Shape;
};
}
abstract class CellViewGeneric<T extends Cell> extends mvc.View<T, SVGElement> {
constructor(opt?: CellView.Options<T>);
paper: Paper | null;
initFlag(): CellView.FlagLabel;
presentationAttributes(): CellView.PresentationAttributes;
highlight(el?: mvc.$SVGElement, opt?: { [key: string]: any }): this;
unhighlight(el?: mvc.$SVGElement, opt?: { [key: string]: any }): this;
can(feature: string): boolean;
findMagnet(el: mvc.$SVGElement): SVGElement | undefined;
findNode(selector: string): SVGElement | HTMLElement | null;
findNodes(groupSelector: string): Array<SVGElement | HTMLElement>;
findProxyNode(el: SVGElement | null, type: string): SVGElement;
getSelector(el: SVGElement, prevSelector?: string): string;
notify(eventName: string, ...eventArguments: any[]): void;
addTools(tools: dia.ToolsView): this;
hasTools(name?: string): boolean;
removeTools(): this;
showTools(): this;
hideTools(): this;
updateTools(opt?: { [key: string]: any }): this;
mountTools(): this;
unmountTools(): this;
getNodeMatrix(node: SVGElement): SVGMatrix;
getNodeRotateMatrix(node: SVGElement): SVGMatrix;
getNodeBoundingRect(node: SVGElement): g.Rect;
getBBox(opt?: { useModelGeometry?: boolean }): g.Rect;
getNodeBBox(node: SVGElement): g.Rect;
getNodeUnrotatedBBox(node: SVGElement): g.Rect;
isNodeConnection(node: SVGElement): boolean;
getEventTarget(evt: dia.Event, opt?: { fromPoint?: boolean }): DOMElement;
checkMouseleave(evt: dia.Event): void;
getFlag(label: CellView.FlagLabel): number;
requestUpdate(flags: number, opt?: { [key: string]: any }): void;
dragLinkStart(evt: dia.Event, magnet: SVGElement, x: number, y: number): void;
dragLink(evt: dia.Event, x: number, y: number): void;
dragLinkEnd(evt: dia.Event, x: number, y: number): void;
preventDefaultInteraction(evt: dia.Event): void;
isDefaultInteractionPrevented(evt: dia.Event): boolean;
isIntersecting(geometryShape: g.Shape, geometryData?: g.SegmentSubdivisionsOpt | null): boolean;
protected isEnclosedIn(area: g.Rect): boolean;
protected isInArea(area: g.Rect, options: g.StrictOpt): boolean;
protected isAtPoint(point: g.Point, options: g.StrictOpt): boolean;
protected findBySelector(selector: string, root?: SVGElement): SVGElement[];
protected removeHighlighters(): void;
protected updateHighlighters(): void;
protected transformHighlighters(): void;
protected hasFlag(flags: number, label: CellView.FlagLabel): boolean;
protected removeFlag(flags: number, label: CellView.FlagLabel): number;
protected setFlags(): void;
protected onToolEvent(eventName: string): void;
protected pointerdblclick(evt: dia.Event, x: number, y: number): void;
protected pointerclick(evt: dia.Event, x: number, y: number): void;
protected contextmenu(evt: dia.Event, x: number, y: number): void;
protected pointerdown(evt: dia.Event, x: number, y: number): void;
protected pointermove(evt: dia.Event, x: number, y: number): void;
protected pointerup(evt: dia.Event, x: number, y: number): void;
protected mouseover(evt: dia.Event): void;
protected mouseout(evt: dia.Event): void;
protected mouseenter(evt: dia.Event): void;
protected mouseleave(evt: dia.Event): void;
protected mousewheel(evt: dia.Event, x: number, y: number, delta: number): void;
protected onevent(evt: dia.Event, eventName: string, x: number, y: number): void;
protected onmagnet(evt: dia.Event, x: number, y: number): void;
protected getLinkEnd(magnet: SVGElement, x: number, y: number, link: dia.Link, endType: dia.LinkEnd): dia.Link.EndJSON;
protected getMagnetFromLinkEnd(end: dia.Link.EndJSON): SVGElement;
protected customizeLinkEnd(end: dia.Link.EndJSON, magnet: SVGElement, x: number, y: number, link: dia.Link, endType: dia.LinkEnd): dia.Link.EndJSON;
protected addLinkFromMagnet(magnet: SVGElement, x: number, y: number): LinkView;
protected cleanNodesCache(): void;
protected nodeCache(magnet: SVGElement): CellView.NodeMetrics;
protected getNodeData(magnet: SVGElement): CellView.NodeData;
protected getNodeShape(magnet: SVGElement): g.Shape;
protected onMount(isInitialMount: boolean): void;
protected onDetach(): void;
static addPresentationAttributes(attributes: CellView.PresentationAttributes): CellView.PresentationAttributes;
static evalAttribute(attrName: string, attrValue: any, refBBox: dia.BBox): any;
}
class CellView extends CellViewGeneric<Cell> {
}
// dia.ElementView
export namespace ElementView {
enum Flags {
UPDATE = 'UPDATE',
TRANSLATE = 'TRANSLATE',
TOOLS = 'TOOLS',
RESIZE = 'RESIZE',
PORTS = 'PORTS',
ROTATE = 'ROTATE',
RENDER = 'RENDER'
}
interface InteractivityOptions {
elementMove?: boolean;
addLinkFromMagnet?: boolean;
stopDelegation?: boolean;
}
}
class ElementView<E extends Element = Element> extends CellViewGeneric<E> {
update(element?: DOMElement, renderingOnlyAttrs?: { [key: string]: any }): void;
setInteractivity(value: boolean | ElementView.InteractivityOptions): void;
getDelegatedView(): ElementView | null;
getTargetParentView(evt: dia.Event): CellView | null;
findPortNode(portId: string | number): SVGElement | null;
findPortNode(portId: string | number, selector: string): DOMElement | null;
findPortNodes(portId: string | number, groupSelector: string): DOMElement[];
protected renderMarkup(): void;
protected renderJSONMarkup(markup: MarkupJSON): void;
protected renderStringMarkup(markup: string): void;
protected updateTransformation(): void;
protected resize(): void;
protected translate(): void;
protected rotate(): void;
protected getTranslateString(): string;
protected getRotateString(): string;
protected dragStart(evt: dia.Event, x: number, y: number): void;
protected dragMagnetStart(evt: dia.Event, x: number, y: number): void;
protected drag(evt: dia.Event, x: number, y: number): void;
protected dragMagnet(evt: dia.Event, x: number, y: number): void;
protected dragEnd(evt: dia.Event, x: number, y: number): void;
protected dragMagnetEnd(evt: dia.Event, x: number, y: number): void;
protected snapToGrid(evt: dia.Event, x: number, y: number): dia.Point;
protected prepareEmbedding(data: any): void;
protected processEmbedding(data: any, evt: dia.Event, x: number, y: number): void;
protected clearEmbedding(data: any): void;
protected finalizeEmbedding(data: any): void;
}
// dia.LinkView
export namespace LinkView {
enum Flags {
RENDER = 'RENDER',
UPDATE = 'UPDATE',
TOOLS = 'TOOLS',
LEGACY_TOOLS = 'LEGACY_TOOLS',
LABELS = 'LABELS',
VERTICES = 'VERTICES',
SOURCE = 'SOURCE',
TARGET = 'TARGET',
CONNECTOR = 'CONNECTOR'
}
interface InteractivityOptions {
labelMove?: boolean;
linkMove?: boolean;
}
interface LabelOptions extends Cell.Options {
absoluteDistance?: boolean;
reverseDistance?: boolean;
absoluteOffset?: boolean;
keepGradient?: boolean;
ensureLegibility?: boolean;
}
interface VertexOptions extends Cell.Options {
}
interface Options<L extends Link = Link> extends mvc.ViewOptions<L, SVGElement> {
labelsLayer?: Paper.Layers | string | false;
}
}
class LinkView<L extends Link = Link> extends CellViewGeneric<L> {
options: LinkView.Options<L>;
sourceAnchor: g.Point;
targetAnchor: g.Point;
sourcePoint: g.Point;
targetPoint: g.Point;
sourceBBox: g.Rect;
targetBBox: g.Rect;
route: g.Point[];
sendToken(token: SVGElement, duration?: number, callback?: () => void): void;
sendToken(token: SVGElement, opt?: { duration?: number, direction?: string, connection?: string }, callback?: () => void): void;
addLabel(coordinates: Point, opt?: LinkView.LabelOptions): number;
addLabel(coordinates: Point, angle: number, opt?: LinkView.LabelOptions): number;
addLabel(x: number, y: number, opt?: LinkView.LabelOptions): number;
addLabel(x: number, y: number, angle: number, opt?: LinkView.LabelOptions): number;
addVertex(coordinates: Point, opt?: LinkView.VertexOptions): number;
addVertex(x: number, y: number, opt?: LinkView.VertexOptions): number;
getConnection(): g.Path;
getSerializedConnection(): string;
getConnectionSubdivisions(): g.Curve[][];
getConnectionLength(): number;
getPointAtLength(length: number): g.Point;
getPointAtRatio(ratio: number): g.Point;
getTangentAtLength(length: number): g.Line;
getTangentAtRatio(ratio: number): g.Line;
getClosestPoint(point: Point): g.Point;
getClosestPointLength(point: Point): number;
getClosestPointRatio(point: Point): number;
getLabelPosition(x: number, y: number, opt?: LinkView.LabelOptions): Link.LabelPosition;
getLabelPosition(x: number, y: number, angle: number, opt?: LinkView.LabelOptions): Link.LabelPosition;
getLabelCoordinates(labelPosition: Link.LabelPosition): g.Point;
getVertexIndex(x: number, y: number): number;
getVertexIndex(point: Point): number;
update(): this;
translate(tx: number, ty: number): void;
requestConnectionUpdate(opt?: { [key: string]: any }): void;
setInteractivity(value: boolean | LinkView.InteractivityOptions): void;
getEndView(endType: dia.LinkEnd): dia.CellView | null;
getEndAnchor(endType: dia.LinkEnd): g.Point;
getEndConnectionPoint(endType: dia.LinkEnd): g.Point;
getEndMagnet(endType: dia.LinkEnd): SVGElement | null;
findLabelNode(labelIndex: string | number): SVGElement | null;
findLabelNode(labelIndex: string | number, selector: string): DOMElement | null;
findLabelNodes(labelIndex: string | number, groupSelector: string): DOMElement[];
removeRedundantLinearVertices(opt?: dia.ModelSetOptions): number;
startArrowheadMove(end: dia.LinkEnd, options?: any): unknown;
protected updateRoute(): void;
protected updatePath(): void;
protected updateDOM(): void;
protected onLabelsChange(link: Link, labels: Link.Label[], opt: { [key: string]: any }): void;
protected onToolsChange(link: Link, toolsMarkup: string, opt: { [key: string]: any }): void;
protected onVerticesChange(link: Link, vertices: Point[], opt: { [key: string]: any }): void;
protected onSourceChange(element: Element, sourceEnd: any, opt: { [key: string]: any }): void;
protected onTargetChange(element: Element, targetEnd: any, opt: { [key: string]: any }): void;
protected onlabel(evt: dia.Event, x: number, y: number): void;
protected dragLabelStart(evt: dia.Event, x: number, y: number): void;
protected dragArrowheadStart(evt: dia.Event, x: number, y: number): void;
protected dragStart(evt: dia.Event, x: number, y: number): void;
protected dragLabel(evt: dia.Event, x: number, y: number): void;
protected dragArrowhead(evt: dia.Event, x: number, y: number): void;
protected drag(evt: dia.Event, x: number, y: number): void;
protected dragLabelEnd(evt: dia.Event, x: number, y: number): void;
protected dragArrowheadEnd(evt: dia.Event, x: number, y: number): void;
protected dragEnd(evt: dia.Event, x: number, y: number): void;
protected findPath(route: Point[], sourcePoint: Point, targetPoint: Point): g.Path;
protected notifyPointerdown(evt: dia.Event, x: number, y: number): void;
protected notifyPointermove(evt: dia.Event, x: number, y: number): void;
protected notifyPointerup(evt: dia.Event, x: number, y: number): void;
protected mountLabels(): void;
protected unmountLabels(): void;
}
// dia.Paper
export namespace Paper {
interface GradientOptions {
id?: string;
type: 'linearGradient' | 'radialGradient';
stops: Array<{
offset: string;
color: string;
opacity?: number;
}>;
}
interface FilterOptions {
[key: string]: any;
}
interface PatternOptions {
[key: string]: any;
}
interface MarkerOptions {
[key: string]: any;
}
interface GridOptions {
color?: string;
thickness?: number;
name?: 'dot' | 'fixedDot' | 'mesh' | 'doubleMesh';
args?: Array<{ [key: string]: any }> | { [key: string]: any };
}
interface BackgroundOptions {
color?: string;
image?: string;
quality?: number;
position?: Point | string;
size?: Size | string;
repeat?: string;
opacity?: number;
waterMarkAngle?: number;
}
type Dimension = number | string | null;
enum sorting {
EXACT = 'sorting-exact',
APPROX = 'sorting-approximate',
NONE = 'sorting-none'
}
enum Layers {
CELLS = 'cells',
LABELS = 'labels',
BACK = 'back',
FRONT = 'front',
TOOLS = 'tools',
GRID = 'grid',
}
type UpdateStats = {
priority: number;
updated: number;
empty?: boolean;
postponed?: number;
unmounted?: number;
mounted?: number;
batches?: number;
};
type ViewportCallback = (view: mvc.View<any, any>, isMounted: boolean, paper: Paper) => boolean;
type ProgressCallback = (done: boolean, processed: number, total: number, stats: UpdateStats, paper: Paper) => void;
type BeforeRenderCallback = (opt: { [key: string]: any }, paper: Paper) => void;
type AfterRenderCallback = (stats: UpdateStats, opt: { [key: string]: any }, paper: Paper) => void;
interface FreezeOptions {
key?: string;
}
interface UnfreezeOptions {
key?: string;
mountBatchSize?: number;
unmountBatchSize?: number;
batchSize?: number;
viewport?: ViewportCallback;
progress?: ProgressCallback;
beforeRender?: BeforeRenderCallback;
afterRender?: AfterRenderCallback;
}
interface SnapLinksOptions {
radius?: number;
findInAreaOptions?: FindInAreaOptions;
}
type PointConstraintCallback = (x: number, y: number, opt: any) => Point;
type RestrictTranslateCallback = (elementView: ElementView, x0: number, y0: number) => BBox | boolean | PointConstraintCallback;
type FindParentByType = 'bbox' | 'pointer' | PositionName;
type FindParentByCallback = ((this: dia.Graph, elementView: ElementView, evt: dia.Event, x: number, y: number) => Cell[]);
interface Options extends mvc.ViewOptions<Graph> {
// appearance
width?: Dimension;
height?: Dimension;
drawGrid?: boolean | GridOptions | GridOptions[];
drawGridSize?: number | null;
background?: BackgroundOptions;
labelsLayer?: boolean | Paper.Layers | string;
// interactions
gridSize?: number;
highlighting?: boolean | Record<string | dia.CellView.Highlighting, highlighters.HighlighterJSON | boolean>;
interactive?: ((cellView: CellView, event: string) => boolean | CellView.InteractivityOptions) | boolean | CellView.InteractivityOptions;
snapLabels?: boolean;
snapLinks?: boolean | SnapLinksOptions;
snapLinksSelf?: boolean | { distance: number };
markAvailable?: boolean;
// validations
validateMagnet?: (cellView: CellView, magnet: SVGElement, evt: dia.Event) => boolean;
validateConnection?: (cellViewS: CellView, magnetS: SVGElement, cellViewT: CellView, magnetT: SVGElement, end: LinkEnd, linkView: LinkView) => boolean;
restrictTranslate?: RestrictTranslateCallback | boolean | BBox;
multiLinks?: boolean;
linkPinning?: boolean;
allowLink?: ((linkView: LinkView, paper: Paper) => boolean) | null;
// events
guard?: (evt: dia.Event, view: CellView) => boolean;
preventContextMenu?: boolean;
preventDefaultViewAction?: boolean;
preventDefaultBlankAction?: boolean;
clickThreshold?: number;
moveThreshold?: number;
magnetThreshold?: number | string;
// views
elementView?: typeof ElementView | ((element: Element) => typeof ElementView);
linkView?: typeof LinkView | ((link: Link) => typeof LinkView);
// embedding
embeddingMode?: boolean;
frontParentOnly?: boolean;
findParentBy?: FindParentByType | FindParentByCallback;
validateEmbedding?: (this: Paper, childView: ElementView, parentView: ElementView) => boolean;
validateUnembedding?: (this: Paper, childView: ElementView) => boolean;
// default views, models & attributes
cellViewNamespace?: any;
routerNamespace?: any;
connectorNamespace?: any;
highlighterNamespace?: any;
anchorNamespace?: any;
linkAnchorNamespace?: any;
connectionPointNamespace?: any;
defaultLink?: ((cellView: CellView, magnet: SVGElement) => Link) | Link;
defaultRouter?: routers.Router | routers.RouterJSON;
defaultConnector?: connectors.Connector | connectors.ConnectorJSON;
defaultAnchor?: anchors.AnchorJSON | anchors.Anchor;
defaultLinkAnchor?: anchors.AnchorJSON | anchors.Anchor;
defaultConnectionPoint?: connectionPoints.ConnectionPointJSON | connectionPoints.ConnectionPoint | ((...args: any[]) => connectionPoints.ConnectionPoint);
// connecting
connectionStrategy?: connectionStrategies.ConnectionStrategy;
// rendering
async?: boolean;
sorting?: sorting;
frozen?: boolean;
autoFreeze?: boolean;
viewport?: ViewportCallback | null;
onViewUpdate?: (view: mvc.View<any, any>, flag: number, priority: number, opt: { [key: string]: any }, paper: Paper) => void;
onViewPostponed?: (view: mvc.View<any, any>, flag: number, paper: Paper) => boolean;
beforeRender?: Paper.BeforeRenderCallback;
afterRender?: Paper.AfterRenderCallback;
overflow?: boolean;
}
interface TransformToFitContentOptions {
padding?: Padding;
preserveAspectRatio?: boolean;
minScale?: number;
minScaleX?: number;
minScaleY?: number;
maxScale?: number;
maxScaleX?: number;
maxScaleY?: number;
scaleGrid?: number;
useModelGeometry?: boolean;
fittingBBox?: BBox;
contentArea?: BBox;
verticalAlign?: 'top' | 'middle' | 'bottom';
horizontalAlign?: 'left' | 'middle' | 'right';
}
/**
* @deprecated
*/
type ScaleContentOptions = TransformToFitContentOptions;
interface FitToContentOptions {
gridWidth?: number;
gridHeight?: number;
padding?: Padding;
allowNewOrigin?: false | 'negative' | 'positive' | 'any';
allowNegativeBottomRight?: boolean;
minWidth?: number;
minHeight?: number;
maxWidth?: number;
maxHeight?: number;
useModelGeometry?: boolean;
contentArea?: BBox;
}
interface EventMap {
// pointerclick
'cell:pointerclick': (cellView: dia.CellView, evt: dia.Event, x: number, y: number) => void;
'element:pointerclick': (elementView: dia.ElementView, evt: dia.Event, x: number, y: number) => void;
'link:pointerclick': (linkView: dia.LinkView, evt: dia.Event, x: number, y: number) => void;
'blank:pointerclick': (evt: dia.Event, x: number, y: number) => void;
// pointerdblclick
'cell:pointerdblclick': (cellView: dia.CellView, evt: dia.Event, x: number, y: number) => void;
'element:pointerdblclick': (elementView: dia.ElementView, evt: dia.Event, x: number, y: number) => void;
'link:pointerdblclick': (linkView: dia.LinkView, evt: dia.Event, x: number, y: number) => void;
'blank:pointerdblclick': (evt: dia.Event, x: number, y: number) => void;
// contextmenu
'cell:contextmenu': (cellView: dia.CellView, evt: dia.Event, x: number, y: number) => void;
'element:contextmenu': (elementView: dia.ElementView, evt: dia.Event, x: number, y: number) => void;
'link:contextmenu': (linkView: dia.LinkView, evt: dia.Event, x: number, y: number) => void;
'blank:contextmenu': (evt: dia.Event, x: number, y: number) => void;
// pointerdown
'cell:pointerdown': (cellView: dia.CellView, evt: dia.Event, x: number, y: number) => void;
'element:pointerdown': (elementView: dia.ElementView, evt: dia.Event, x: number, y: number) => void;
'link:pointerdown': (linkView: dia.LinkView, evt: dia.Event, x: number, y: number) => void;
'blank:pointerdown': (evt: dia.Event, x: number, y: number) => void;
// pointerdown
'cell:pointermove': (cellView: dia.CellView, evt: dia.Event, x: number, y: number) => void;