options.d.ts 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. import { Dom, Nilable } from '@antv/x6-common';
  2. import { Rectangle } from '@antv/x6-geometry';
  3. import { Graph } from '../graph';
  4. import { GridManager } from './grid';
  5. import { BackgroundManager } from './background';
  6. import { PanningManager } from './panning';
  7. import { MouseWheel } from './mousewheel';
  8. import { Model, Cell, Node, Edge } from '../model';
  9. import { CellView, NodeView, EdgeView, Markup } from '../view';
  10. import { Router, Connector, NodeAnchor, EdgeAnchor, ConnectionPoint } from '../registry';
  11. import { HighlightManager } from './highlight';
  12. import { PortManager } from '../model/port';
  13. export declare namespace Options {
  14. interface Common {
  15. container: HTMLElement;
  16. model?: Model;
  17. x: number;
  18. y: number;
  19. width: number;
  20. height: number;
  21. autoResize?: boolean | Element | Document;
  22. background?: false | BackgroundManager.Options;
  23. scaling: {
  24. min?: number;
  25. max?: number;
  26. };
  27. moveThreshold: number;
  28. clickThreshold: number;
  29. magnetThreshold: number | 'onleave';
  30. preventDefaultDblClick: boolean;
  31. preventDefaultContextMenu: boolean | ((this: Graph, { view }: {
  32. view: CellView | null;
  33. }) => boolean);
  34. preventDefaultMouseDown: boolean;
  35. preventDefaultBlankAction: boolean;
  36. interacting: CellView.Interacting;
  37. async?: boolean;
  38. virtual?: boolean;
  39. guard: (e: Dom.EventObject, view?: CellView | null) => boolean;
  40. onPortRendered?: (args: OnPortRenderedArgs) => void;
  41. onEdgeLabelRendered?: (args: OnEdgeLabelRenderedArgs) => undefined | ((args: OnEdgeLabelRenderedArgs) => void);
  42. createCellView?: (this: Graph, cell: Cell) => typeof CellView | (new (...args: any[]) => CellView) | null | undefined;
  43. }
  44. export interface ManualBooleans {
  45. panning: boolean | Partial<PanningManager.Options>;
  46. mousewheel: boolean | Partial<MouseWheel.Options>;
  47. embedding: boolean | Partial<Embedding>;
  48. }
  49. export interface Manual extends Partial<Common>, Partial<ManualBooleans> {
  50. grid?: boolean | number | (Partial<GridManager.CommonOptions> & GridManager.DrawGridOptions);
  51. connecting?: Partial<Connecting>;
  52. translating?: Partial<Translating>;
  53. highlighting?: Partial<Highlighting>;
  54. }
  55. export interface Definition extends Common {
  56. grid: GridManager.Options;
  57. panning: PanningManager.Options;
  58. mousewheel: MouseWheel.Options;
  59. embedding: Embedding;
  60. connecting: Connecting;
  61. translating: Translating;
  62. highlighting: Highlighting;
  63. }
  64. export {};
  65. }
  66. export declare namespace Options {
  67. type OptionItem<T, S> = S | ((this: Graph, arg: T) => S);
  68. type NodeAnchorOptions = string | NodeAnchor.NativeItem | NodeAnchor.ManaualItem;
  69. type EdgeAnchorOptions = string | EdgeAnchor.NativeItem | EdgeAnchor.ManaualItem;
  70. type ConnectionPointOptions = string | ConnectionPoint.NativeItem | ConnectionPoint.ManaualItem;
  71. export interface Connecting {
  72. /**
  73. * Snap edge to the closest node/port in the given radius on dragging.
  74. */
  75. snap: boolean | {
  76. radius: number;
  77. anchor?: 'center' | 'bbox';
  78. };
  79. /**
  80. * Specify whether connect to point on the graph is allowed.
  81. */
  82. allowBlank: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean);
  83. /**
  84. * When set to `false`, edges can not be connected to the same node,
  85. * meaning the source and target of the edge can not be the same node.
  86. */
  87. allowLoop: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean);
  88. /**
  89. * Specify whether connect to node(not the port on the node) is allowed.
  90. */
  91. allowNode: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean);
  92. /**
  93. * Specify whether connect to edge is allowed.
  94. */
  95. allowEdge: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean);
  96. /**
  97. * Specify whether connect to port is allowed.
  98. */
  99. allowPort: boolean | ((this: Graph, args: ValidateConnectionArgs) => boolean);
  100. /**
  101. * Specify whether more than one edge connected to the same source and
  102. * target node is allowed.
  103. */
  104. allowMulti: boolean | 'withPort' | ((this: Graph, args: ValidateConnectionArgs) => boolean);
  105. /**
  106. * Highlights all the available magnets or nodes when a edge is
  107. * dragging(reconnecting). This gives a hint to the user to what
  108. * other nodes/ports this edge can be connected. What magnets/cells
  109. * are available is determined by the `validateConnection` function.
  110. */
  111. highlight: boolean;
  112. anchor: NodeAnchorOptions;
  113. sourceAnchor?: NodeAnchorOptions;
  114. targetAnchor?: NodeAnchorOptions;
  115. edgeAnchor: EdgeAnchorOptions;
  116. sourceEdgeAnchor?: EdgeAnchorOptions;
  117. targetEdgeAnchor?: EdgeAnchorOptions;
  118. connectionPoint: ConnectionPointOptions;
  119. sourceConnectionPoint?: ConnectionPointOptions;
  120. targetConnectionPoint?: ConnectionPointOptions;
  121. router: string | Router.NativeItem | Router.ManaualItem;
  122. connector: string | Connector.NativeItem | Connector.ManaualItem;
  123. createEdge?: (this: Graph, args: {
  124. sourceCell: Cell;
  125. sourceView: CellView;
  126. sourceMagnet: Element;
  127. }) => Nilable<Edge> | void;
  128. /**
  129. * Check whether to add a new edge to the graph when user clicks
  130. * on an a magnet.
  131. */
  132. validateMagnet?: (this: Graph, args: {
  133. cell: Cell;
  134. view: CellView;
  135. magnet: Element;
  136. e: Dom.MouseDownEvent | Dom.MouseEnterEvent;
  137. }) => boolean;
  138. /**
  139. * Custom validation on stop draggin the edge arrowhead(source/target).
  140. * If the function returns `false`, the edge is either removed(edges
  141. * which are created during the interaction) or reverted to the state
  142. * before the interaction.
  143. */
  144. validateEdge?: (this: Graph, args: {
  145. edge: Edge;
  146. type: Edge.TerminalType;
  147. previous: Edge.TerminalData;
  148. }) => boolean;
  149. /**
  150. * Check whether to allow or disallow the edge connection while an
  151. * arrowhead end (source/target) being changed.
  152. */
  153. validateConnection: (this: Graph, args: ValidateConnectionArgs) => boolean;
  154. }
  155. export interface ValidateConnectionArgs {
  156. type?: Edge.TerminalType | null;
  157. edge?: Edge | null;
  158. edgeView?: EdgeView | null;
  159. sourceCell?: Cell | null;
  160. targetCell?: Cell | null;
  161. sourceView?: CellView | null;
  162. targetView?: CellView | null;
  163. sourcePort?: string | null;
  164. targetPort?: string | null;
  165. sourceMagnet?: Element | null;
  166. targetMagnet?: Element | null;
  167. }
  168. export interface Translating {
  169. /**
  170. * Restrict the translation (movement) of nodes by a given bounding box.
  171. * If set to `true`, the user will not be able to move nodes outside the
  172. * boundary of the graph area.
  173. */
  174. restrict: boolean | OptionItem<CellView | null, Rectangle.RectangleLike | number | null>;
  175. }
  176. export interface Embedding {
  177. enabled?: boolean;
  178. /**
  179. * Determines the way how a cell finds a suitable parent when it's dragged
  180. * over the graph. The cell with the highest z-index (visually on the top)
  181. * will be chosen.
  182. */
  183. findParent?: 'bbox' | 'center' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | ((this: Graph, args: {
  184. node: Node;
  185. view: NodeView;
  186. }) => Cell[]);
  187. /**
  188. * If enabled only the node on the very front is taken into account for the
  189. * embedding. If disabled the nodes under the dragged view are tested one by
  190. * one (from front to back) until a valid parent found.
  191. */
  192. frontOnly?: boolean;
  193. /**
  194. * Check whether to allow or disallow the node embedding while it's being
  195. * translated. By default, all nodes can be embedded into all other nodes.
  196. */
  197. validate: (this: Graph, args: {
  198. child: Node;
  199. parent: Node;
  200. childView: CellView;
  201. parentView: CellView;
  202. }) => boolean;
  203. }
  204. /**
  205. * Configure which highlighter to use (and with which options) for
  206. * each type of interaction.
  207. */
  208. export interface Highlighting {
  209. /**
  210. * The default highlighter to use (and options) when none is specified
  211. */
  212. default: HighlightManager.Options;
  213. /**
  214. * When a cell is dragged over another cell in embedding mode.
  215. */
  216. embedding?: HighlightManager.Options | null;
  217. /**
  218. * When showing all nodes to which a valid connection can be made.
  219. */
  220. nodeAvailable?: HighlightManager.Options | null;
  221. /**
  222. * When showing all magnets to which a valid connection can be made.
  223. */
  224. magnetAvailable?: HighlightManager.Options | null;
  225. /**
  226. * When a valid edge connection can be made to an node.
  227. */
  228. magnetAdsorbed?: HighlightManager.Options | null;
  229. }
  230. export {};
  231. }
  232. export declare namespace Options {
  233. function get(options: Partial<Manual>): Definition;
  234. }
  235. export declare namespace Options {
  236. interface OnPortRenderedArgs {
  237. node: Node;
  238. port: PortManager.Port;
  239. container: Element;
  240. selectors?: Markup.Selectors;
  241. labelContainer?: Element;
  242. labelSelectors?: Markup.Selectors | null;
  243. contentContainer: Element;
  244. contentSelectors?: Markup.Selectors;
  245. }
  246. interface OnEdgeLabelRenderedArgs {
  247. edge: Edge;
  248. label: Edge.Label;
  249. container: Element;
  250. selectors: Markup.Selectors;
  251. }
  252. }
  253. export declare namespace Options {
  254. const defaults: Partial<Definition>;
  255. }