edge.d.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. import { Rectangle, Point, Path, Line } from '@antv/x6-geometry';
  2. import { Dom, KeyValue } from '@antv/x6-common';
  3. import { NodeAnchor, ConnectionPoint } from '../registry';
  4. import { Cell } from '../model/cell';
  5. import { Edge } from '../model/edge';
  6. import { Markup } from './markup';
  7. import { CellView } from './cell';
  8. import { Options as GraphOptions } from '../graph/options';
  9. export declare class EdgeView<Entity extends Edge = Edge, Options extends EdgeView.Options = EdgeView.Options> extends CellView<Entity, Options> {
  10. protected readonly POINT_ROUNDING = 2;
  11. path: Path;
  12. routePoints: Point[];
  13. sourceAnchor: Point;
  14. targetAnchor: Point;
  15. sourcePoint: Point;
  16. targetPoint: Point;
  17. sourceMarkerPoint: Point;
  18. targetMarkerPoint: Point;
  19. sourceView: CellView | null;
  20. targetView: CellView | null;
  21. sourceMagnet: Element | null;
  22. targetMagnet: Element | null;
  23. protected labelContainer: Element | null;
  24. protected labelCache: {
  25. [index: number]: Element;
  26. };
  27. protected labelSelectors: {
  28. [index: number]: Markup.Selectors;
  29. };
  30. protected labelDestroyFn: {
  31. [index: number]: (args: GraphOptions.OnEdgeLabelRenderedArgs) => void;
  32. };
  33. protected get [Symbol.toStringTag](): string;
  34. protected getContainerClassName(): string;
  35. get sourceBBox(): Rectangle;
  36. get targetBBox(): Rectangle;
  37. isEdgeView(): this is EdgeView;
  38. confirmUpdate(flag: number, options?: any): number;
  39. render(): this;
  40. protected renderMarkup(): void;
  41. protected renderJSONMarkup(markup: Markup.JSONMarkup | Markup.JSONMarkup[]): void;
  42. protected customizeLabels(): void;
  43. protected destroyCustomizeLabels(): void;
  44. protected renderLabels(): this;
  45. onLabelsChange(options?: any): void;
  46. protected shouldRerenderLabels(options?: any): boolean;
  47. protected parseLabelMarkup(markup?: Markup): {
  48. fragment: DocumentFragment;
  49. selectors: {};
  50. } | null;
  51. protected parseLabelStringMarkup(labelMarkup: string): {
  52. fragment: DocumentFragment;
  53. selectors: {};
  54. };
  55. protected normalizeLabelMarkup(markup?: {
  56. fragment: DocumentFragment;
  57. selectors: Markup.Selectors;
  58. } | null): {
  59. node: SVGElement;
  60. selectors: Markup.Selectors;
  61. } | undefined;
  62. protected updateLabels(): void;
  63. protected renderTools(): this;
  64. update(options?: any): this;
  65. removeRedundantLinearVertices(options?: Edge.SetOptions): number;
  66. getTerminalView(type: Edge.TerminalType): CellView<Cell<Cell.Properties>, CellView.Options> | null;
  67. getTerminalAnchor(type: Edge.TerminalType): Point;
  68. getTerminalConnectionPoint(type: Edge.TerminalType): Point;
  69. getTerminalMagnet(type: Edge.TerminalType, options?: {
  70. raw?: boolean;
  71. }): Element | null;
  72. updateConnection(options?: any): void;
  73. protected findAnchors(vertices: Point.PointLike[]): {
  74. [x: string]: Point;
  75. };
  76. protected findAnchorsOrdered(firstType: Edge.TerminalType, firstPoint: Point.PointLike, secondType: Edge.TerminalType, secondPoint: Point.PointLike): {
  77. [x: string]: Point;
  78. };
  79. protected getAnchor(def: NodeAnchor.ManaualItem | string | undefined, cellView: CellView, magnet: Element | null, ref: Point | Element | null, terminalType: Edge.TerminalType): Point;
  80. protected findRoutePoints(vertices?: Point.PointLike[]): Point[];
  81. protected findConnectionPoints(routePoints: Point[], sourceAnchor: Point, targetAnchor: Point): {
  82. source: Point;
  83. target: Point;
  84. };
  85. protected getConnectionPoint(def: string | ConnectionPoint.ManaualItem | undefined, view: CellView, magnet: Element, line: Line, endType: Edge.TerminalType): Point;
  86. protected findMarkerPoints(routePoints: Point[], sourcePoint: Point, targetPoint: Point): {
  87. source: Point | undefined;
  88. target: Point | undefined;
  89. };
  90. protected findPath(routePoints: Point[], sourcePoint: Point, targetPoint: Point): Path;
  91. protected translateConnectionPoints(tx: number, ty: number): void;
  92. updateLabelPositions(): this;
  93. updateTerminalProperties(type: Edge.TerminalType): boolean;
  94. updateTerminalMagnet(type: Edge.TerminalType): void;
  95. protected getLabelPositionAngle(idx: number): number;
  96. protected getLabelPositionArgs(idx: number): Edge.LabelPositionOptions | undefined;
  97. protected getDefaultLabelPositionArgs(): Edge.LabelPositionOptions | undefined;
  98. protected mergeLabelPositionArgs(labelPositionArgs?: Edge.LabelPositionOptions, defaultLabelPositionArgs?: Edge.LabelPositionOptions): Edge.LabelPositionOptions | null | undefined;
  99. getConnection(): Path | null;
  100. getConnectionPathData(): string;
  101. getConnectionSubdivisions(): import("@antv/x6-geometry").Segment[][] | null | undefined;
  102. getConnectionLength(): number | undefined;
  103. getPointAtLength(length: number): Point | null;
  104. getPointAtRatio(ratio: number): Point | null;
  105. getTangentAtLength(length: number): Line | null;
  106. getTangentAtRatio(ratio: number): Line | null;
  107. getClosestPoint(point: Point.PointLike): Point | null;
  108. getClosestPointLength(point: Point.PointLike): number | null;
  109. getClosestPointRatio(point: Point.PointLike): number | null;
  110. getLabelPosition(x: number, y: number, options?: Edge.LabelPositionOptions | null): Edge.LabelPositionObject;
  111. getLabelPosition(x: number, y: number, angle: number, options?: Edge.LabelPositionOptions | null): Edge.LabelPositionObject;
  112. protected normalizeLabelPosition(): undefined;
  113. protected normalizeLabelPosition(pos: Edge.LabelPosition): Edge.LabelPositionObject;
  114. protected getLabelTransformationMatrix(labelPosition: Edge.LabelPosition): DOMMatrix;
  115. getVertexIndex(x: number, y: number): number;
  116. protected getEventArgs<E>(e: E): EdgeView.MouseEventArgs<E>;
  117. protected getEventArgs<E>(e: E, x: number, y: number): EdgeView.PositionEventArgs<E>;
  118. protected notifyUnhandledMouseDown(e: Dom.MouseDownEvent, x: number, y: number): void;
  119. notifyMouseDown(e: Dom.MouseDownEvent, x: number, y: number): void;
  120. notifyMouseMove(e: Dom.MouseMoveEvent, x: number, y: number): void;
  121. notifyMouseUp(e: Dom.MouseUpEvent, x: number, y: number): void;
  122. onClick(e: Dom.ClickEvent, x: number, y: number): void;
  123. onDblClick(e: Dom.DoubleClickEvent, x: number, y: number): void;
  124. onContextMenu(e: Dom.ContextMenuEvent, x: number, y: number): void;
  125. onMouseDown(e: Dom.MouseDownEvent, x: number, y: number): void;
  126. onMouseMove(e: Dom.MouseMoveEvent, x: number, y: number): KeyValue<any>;
  127. onMouseUp(e: Dom.MouseUpEvent, x: number, y: number): KeyValue<any>;
  128. onMouseOver(e: Dom.MouseOverEvent): void;
  129. onMouseOut(e: Dom.MouseOutEvent): void;
  130. onMouseEnter(e: Dom.MouseEnterEvent): void;
  131. onMouseLeave(e: Dom.MouseLeaveEvent): void;
  132. onMouseWheel(e: Dom.EventObject, x: number, y: number, delta: number): void;
  133. onCustomEvent(e: Dom.MouseDownEvent, name: string, x: number, y: number): void;
  134. onLabelMouseDown(e: Dom.MouseDownEvent, x: number, y: number): void;
  135. protected startEdgeDragging(e: Dom.MouseDownEvent, x: number, y: number): void;
  136. protected dragEdge(e: Dom.MouseMoveEvent, x: number, y: number): void;
  137. protected stopEdgeDragging(e: Dom.MouseUpEvent, x: number, y: number): void;
  138. prepareArrowheadDragging(type: Edge.TerminalType, options: {
  139. x: number;
  140. y: number;
  141. options?: KeyValue;
  142. isNewEdge?: boolean;
  143. fallbackAction?: EventData.ArrowheadDragging['fallbackAction'];
  144. }): EventData.ArrowheadDragging;
  145. protected createValidateConnectionArgs(type: Edge.TerminalType): (cellView: CellView, magnet: Element) => EventData.ValidateConnectionArgs;
  146. protected beforeArrowheadDragging(data: EventData.ArrowheadDragging): void;
  147. protected afterArrowheadDragging(data: EventData.ArrowheadDragging): void;
  148. protected validateConnection(sourceView: CellView | null | undefined, sourceMagnet: Element | null | undefined, targetView: CellView | null | undefined, targetMagnet: Element | null | undefined, terminalType: Edge.TerminalType, edgeView?: EdgeView | null | undefined, candidateTerminal?: Edge.TerminalCellData | null | undefined): boolean;
  149. protected allowConnectToBlank(edge: Edge): boolean;
  150. protected validateEdge(edge: Edge, type: Edge.TerminalType, initialTerminal: Edge.TerminalData): boolean;
  151. protected arrowheadDragging(target: Element, x: number, y: number, data: EventData.ArrowheadDragging): void;
  152. protected arrowheadDragged(data: EventData.ArrowheadDragging, x: number, y: number): void;
  153. protected snapArrowhead(x: number, y: number, data: EventData.ArrowheadDragging): void;
  154. protected snapArrowheadEnd(data: EventData.ArrowheadDragging): void;
  155. protected finishEmbedding(data: EventData.ArrowheadDragging): void;
  156. protected fallbackConnection(data: EventData.ArrowheadDragging): void;
  157. protected notifyConnectionEvent(data: EventData.ArrowheadDragging, e: Dom.MouseUpEvent): void;
  158. protected highlightAvailableMagnets(data: EventData.ArrowheadDragging): void;
  159. protected unhighlightAvailableMagnets(data: EventData.ArrowheadDragging): void;
  160. protected startArrowheadDragging(e: Dom.MouseDownEvent, x: number, y: number): void;
  161. protected dragArrowhead(e: Dom.MouseMoveEvent, x: number, y: number): void;
  162. protected stopArrowheadDragging(e: Dom.MouseUpEvent, x: number, y: number): void;
  163. startLabelDragging(e: Dom.MouseDownEvent, x: number, y: number): void;
  164. dragLabel(e: Dom.MouseMoveEvent, x: number, y: number): void;
  165. stopLabelDragging(e: Dom.MouseUpEvent, x: number, y: number): void;
  166. }
  167. export declare namespace EdgeView {
  168. interface Options extends CellView.Options {
  169. }
  170. }
  171. export declare namespace EdgeView {
  172. interface MouseEventArgs<E> {
  173. e: E;
  174. edge: Edge;
  175. cell: Edge;
  176. view: EdgeView;
  177. }
  178. interface PositionEventArgs<E> extends MouseEventArgs<E>, CellView.PositionEventArgs {
  179. }
  180. interface EventArgs {
  181. 'edge:click': PositionEventArgs<Dom.ClickEvent>;
  182. 'edge:dblclick': PositionEventArgs<Dom.DoubleClickEvent>;
  183. 'edge:contextmenu': PositionEventArgs<Dom.ContextMenuEvent>;
  184. 'edge:mousedown': PositionEventArgs<Dom.MouseDownEvent>;
  185. 'edge:mousemove': PositionEventArgs<Dom.MouseMoveEvent>;
  186. 'edge:mouseup': PositionEventArgs<Dom.MouseUpEvent>;
  187. 'edge:mouseover': MouseEventArgs<Dom.MouseOverEvent>;
  188. 'edge:mouseout': MouseEventArgs<Dom.MouseOutEvent>;
  189. 'edge:mouseenter': MouseEventArgs<Dom.MouseEnterEvent>;
  190. 'edge:mouseleave': MouseEventArgs<Dom.MouseLeaveEvent>;
  191. 'edge:mousewheel': PositionEventArgs<Dom.EventObject> & CellView.MouseDeltaEventArgs;
  192. 'edge:customevent': EdgeView.PositionEventArgs<Dom.MouseDownEvent> & {
  193. name: string;
  194. };
  195. 'edge:unhandled:mousedown': PositionEventArgs<Dom.MouseDownEvent>;
  196. 'edge:connected': {
  197. e: Dom.MouseUpEvent;
  198. edge: Edge;
  199. view: EdgeView;
  200. isNew: boolean;
  201. type: Edge.TerminalType;
  202. previousCell?: Cell | null;
  203. previousView?: CellView | null;
  204. previousPort?: string | null;
  205. previousPoint?: Point.PointLike | null;
  206. previousMagnet?: Element | null;
  207. currentCell?: Cell | null;
  208. currentView?: CellView | null;
  209. currentPort?: string | null;
  210. currentPoint?: Point.PointLike | null;
  211. currentMagnet?: Element | null;
  212. };
  213. 'edge:highlight': {
  214. magnet: Element;
  215. view: EdgeView;
  216. edge: Edge;
  217. cell: Edge;
  218. options: CellView.HighlightOptions;
  219. };
  220. 'edge:unhighlight': EventArgs['edge:highlight'];
  221. 'edge:move': PositionEventArgs<Dom.MouseMoveEvent>;
  222. 'edge:moving': PositionEventArgs<Dom.MouseMoveEvent>;
  223. 'edge:moved': PositionEventArgs<Dom.MouseUpEvent>;
  224. }
  225. }
  226. export declare namespace EdgeView {
  227. const toStringTag: string;
  228. function isEdgeView(instance: any): instance is EdgeView;
  229. }
  230. declare namespace EventData {
  231. interface MousemoveEventData {
  232. }
  233. interface EdgeDragging {
  234. action: 'drag-edge';
  235. moving: boolean;
  236. x: number;
  237. y: number;
  238. }
  239. type ValidateConnectionArgs = [
  240. CellView | null | undefined,
  241. // source view
  242. Element | null | undefined,
  243. // source magnet
  244. CellView | null | undefined,
  245. // target view
  246. Element | null | undefined,
  247. Edge.TerminalType,
  248. EdgeView
  249. ];
  250. interface ArrowheadDragging {
  251. action: 'drag-arrowhead';
  252. x: number;
  253. y: number;
  254. isNewEdge: boolean;
  255. terminalType: Edge.TerminalType;
  256. fallbackAction: 'remove' | 'revert';
  257. initialMagnet: Element | null;
  258. initialTerminal: Edge.TerminalData;
  259. getValidateConnectionArgs: (cellView: CellView, magnet: Element | null) => ValidateConnectionArgs;
  260. zIndex?: number | null;
  261. pointerEvents?: string | null;
  262. /**
  263. * Current event target.
  264. */
  265. currentTarget?: Element;
  266. /**
  267. * Current view under pointer.
  268. */
  269. currentView?: CellView | null;
  270. /**
  271. * Current magnet under pointer.
  272. */
  273. currentMagnet?: Element | null;
  274. closestView?: CellView | null;
  275. closestMagnet?: Element | null;
  276. marked?: KeyValue<Element[]> | null;
  277. options?: KeyValue;
  278. }
  279. interface LabelDragging {
  280. action: 'drag-label';
  281. index: number;
  282. positionAngle: number;
  283. positionArgs?: Edge.LabelPositionOptions | null;
  284. stopPropagation: true;
  285. }
  286. }
  287. export {};