@krainovsd/graph 0.9.0 → 0.10.0-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/lib/cjs/index.cjs +2633 -1795
  2. package/lib/cjs/index.cjs.map +1 -1
  3. package/lib/esm/index.js +12 -3
  4. package/lib/esm/index.js.map +1 -1
  5. package/lib/esm/lib/draw-time.js +5 -1
  6. package/lib/esm/lib/draw-time.js.map +1 -1
  7. package/lib/esm/lib/get-controls-info.js +451 -224
  8. package/lib/esm/lib/get-controls-info.js.map +1 -1
  9. package/lib/esm/module/GraphCanvas/GraphCanvas.js +39 -927
  10. package/lib/esm/module/GraphCanvas/GraphCanvas.js.map +1 -1
  11. package/lib/esm/module/GraphCanvas/constants/settings.js +70 -47
  12. package/lib/esm/module/GraphCanvas/constants/settings.js.map +1 -1
  13. package/lib/esm/module/GraphCanvas/lib/settings/node-settings-getter.js +10 -1
  14. package/lib/esm/module/GraphCanvas/lib/settings/node-settings-getter.js.map +1 -1
  15. package/lib/esm/module/GraphCanvas/lib/utils/calculate-link-position-by-node.js +270 -0
  16. package/lib/esm/module/GraphCanvas/lib/utils/calculate-link-position-by-node.js.map +1 -0
  17. package/lib/esm/module/GraphCanvas/lib/utils/drag-place-coefficient-getter.js +2 -2
  18. package/lib/esm/module/GraphCanvas/lib/utils/drag-place-coefficient-getter.js.map +1 -1
  19. package/lib/esm/module/GraphCanvas/lib/utils/get-particle-position.js +19 -4
  20. package/lib/esm/module/GraphCanvas/lib/utils/get-particle-position.js.map +1 -1
  21. package/lib/esm/module/GraphCanvas/lib/utils/is-node-visible.js +29 -4
  22. package/lib/esm/module/GraphCanvas/lib/utils/is-node-visible.js.map +1 -1
  23. package/lib/esm/module/GraphCanvas/lib/utils/is-overlaps-node.js +53 -4
  24. package/lib/esm/module/GraphCanvas/lib/utils/is-overlaps-node.js.map +1 -1
  25. package/lib/esm/module/GraphCanvas/lib/utils/link-by-pointer-getter.js +2 -2
  26. package/lib/esm/module/GraphCanvas/lib/utils/link-by-pointer-getter.js.map +1 -1
  27. package/lib/esm/module/GraphCanvas/lib/utils/node-by-pointer-getter.js +3 -13
  28. package/lib/esm/module/GraphCanvas/lib/utils/node-by-pointer-getter.js.map +1 -1
  29. package/lib/esm/module/GraphCanvas/slices/draw-links.js +207 -0
  30. package/lib/esm/module/GraphCanvas/slices/draw-links.js.map +1 -0
  31. package/lib/esm/module/GraphCanvas/slices/draw-nodes.js +342 -0
  32. package/lib/esm/module/GraphCanvas/slices/draw-nodes.js.map +1 -0
  33. package/lib/esm/module/GraphCanvas/{lib/utils → slices}/draw-text.js +23 -6
  34. package/lib/esm/module/GraphCanvas/slices/draw-text.js.map +1 -0
  35. package/lib/esm/module/GraphCanvas/slices/init-area.js +31 -0
  36. package/lib/esm/module/GraphCanvas/slices/init-area.js.map +1 -0
  37. package/lib/esm/module/GraphCanvas/slices/init-dnd.js +62 -0
  38. package/lib/esm/module/GraphCanvas/slices/init-dnd.js.map +1 -0
  39. package/lib/esm/module/GraphCanvas/slices/init-draw.js +84 -0
  40. package/lib/esm/module/GraphCanvas/slices/init-draw.js.map +1 -0
  41. package/lib/esm/module/GraphCanvas/slices/init-pointer.js +211 -0
  42. package/lib/esm/module/GraphCanvas/slices/init-pointer.js.map +1 -0
  43. package/lib/esm/module/GraphCanvas/slices/init-resize.js +28 -0
  44. package/lib/esm/module/GraphCanvas/slices/init-resize.js.map +1 -0
  45. package/lib/esm/module/GraphCanvas/slices/init-simulation.js +172 -0
  46. package/lib/esm/module/GraphCanvas/slices/init-simulation.js.map +1 -0
  47. package/lib/esm/module/GraphCanvas/slices/init-zoom.js +36 -0
  48. package/lib/esm/module/GraphCanvas/slices/init-zoom.js.map +1 -0
  49. package/lib/index.d.ts +169 -132
  50. package/package.json +1 -1
  51. package/lib/esm/module/GraphCanvas/lib/utils/calculate-link-position-by-radius.js +0 -20
  52. package/lib/esm/module/GraphCanvas/lib/utils/calculate-link-position-by-radius.js.map +0 -1
  53. package/lib/esm/module/GraphCanvas/lib/utils/draw-text.js.map +0 -1
package/lib/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { SimulationNodeDatum, SimulationLinkDatum, Simulation } from 'd3-force';
2
1
  import { D3ZoomEvent, ZoomTransform } from 'd3-zoom';
2
+ import { SimulationNodeDatum, SimulationLinkDatum, Simulation } from 'd3-force';
3
3
  import { D3DragEvent } from 'd3-drag';
4
4
 
5
5
  interface NodeInterface<NodeData extends Record<string, unknown>> extends SimulationNodeDatum {
@@ -8,12 +8,17 @@ interface NodeInterface<NodeData extends Record<string, unknown>> extends Simula
8
8
  group?: number | string;
9
9
  neighbors?: (string | number)[];
10
10
  _radius?: number;
11
+ _width?: number;
12
+ _height?: number;
13
+ _borderRadius?: number;
11
14
  _visible?: boolean;
15
+ _shape?: NodeShape;
12
16
  name?: string;
13
- data?: NodeData;
14
17
  drag?: boolean;
18
+ data?: NodeData;
15
19
  }
16
- type CachedNodeTextInterface = Record<string | number, string[]>;
20
+ type NodeShape = "circle" | "square" | "text" | "icon";
21
+ type CachedNodeTextInterface = Record<string | number, string[] | undefined>;
17
22
 
18
23
  interface LinkInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> extends SimulationLinkDatum<NodeInterface<NodeData>> {
19
24
  data?: LinkData;
@@ -38,36 +43,8 @@ type ListenersInterface<NodeData extends Record<string, unknown>, LinkData exten
38
43
  };
39
44
 
40
45
  type GraphSettingsInterface<NodeData extends Record<string, unknown>> = {
41
- highlightByNodeOnlyRoot?: boolean;
42
- highlightByNodeNodeFadingMin?: number;
43
- highlightByNodeLinkFadingMin?: number;
44
- highlightByNodeArrowFadingMin?: number;
45
- highlightByNodeNodeColorFadingMin?: number;
46
- highlightByNodeTextFadingMin?: number;
47
- highlightByNodeNodeSizingAdditional?: number;
48
- highlightByNodeTextSizingAdditional?: number;
49
- highlightByNodeTextShiftXAdditional?: number;
50
- highlightByNodeTextShiftYAdditional?: number;
51
- highlightByNodeTextWeightAdditional?: number;
52
- highlightByNodeTextWidthAdditional?: number;
53
- highlightByLinkOnlyRoot?: boolean;
54
- highlightByLinkNodeFadingMin?: number;
55
- highlightByLinkLinkFadingMin?: number;
56
- highlightByLinkArrowFadingMin?: number;
57
- highlightByLinkNodeColorFadingMin?: number;
58
- highlightByLinkTextFadingMin?: number;
59
- highlightByLinkNodeSizingAdditional?: number;
60
- highlightByLinkTextSizingAdditional?: number;
61
- highlightByLinkTextShiftXAdditional?: number;
62
- highlightByLinkTextShiftYAdditional?: number;
63
- highlightByLinkTextWeightAdditional?: number;
64
- highlightByLinkTextWidthAdditional?: number;
65
- highlightByHoverNode?: boolean;
66
- highlightByHoverLink?: boolean;
67
- hoverLinkThreshold?: number;
68
- highlightDownStep?: number;
69
- highlightUpStep?: number;
70
- stickAfterDrag?: boolean;
46
+ highlightDownFrames?: number;
47
+ highlightUpFrames?: number;
71
48
  zoomExtent?: [number, number];
72
49
  translateExtent?: [[number?, number?], [number?, number?]];
73
50
  translateExtentCoefficient?: number | [number, number];
@@ -77,16 +54,18 @@ type GraphSettingsInterface<NodeData extends Record<string, unknown>> = {
77
54
  x?: number;
78
55
  y?: number;
79
56
  } | null;
80
- dragPlaceCoefficient?: (node: NodeInterface<NodeData>, pxEvent: number, pyEvent: number, radius: number) => number | undefined;
81
- nodeRadiusInitial?: number;
82
- nodeRadiusCoefficient?: number;
83
- nodeRadiusFactor?: number;
84
- nodeRadiusFlexible?: boolean;
57
+ dragPlaceCoefficient?: (node: NodeInterface<NodeData>, pxEvent: number, pyEvent: number) => number | undefined;
85
58
  showDrawTime?: boolean;
86
59
  showDrawTimeEveryTick?: boolean;
87
60
  };
88
61
  type ForceSettingsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
89
- collideOn?: boolean;
62
+ forces?: boolean;
63
+ xForce?: boolean;
64
+ yForce?: boolean;
65
+ chargeForce?: boolean;
66
+ centerForce?: boolean;
67
+ collideForce?: boolean;
68
+ linkForce?: boolean;
90
69
  collideOffMax?: {
91
70
  nodes: number;
92
71
  links: number;
@@ -106,21 +85,36 @@ type ForceSettingsInterface<NodeData extends Record<string, unknown>, LinkData e
106
85
  y?: number;
107
86
  };
108
87
  centerStrength?: number;
109
- xForce?: NodeIterationPropsInterface<NodeData, LinkData> | number;
88
+ xPosition?: NodeIterationPropsInterface<NodeData, LinkData> | number;
110
89
  xStrength?: NodeIterationPropsInterface<NodeData, LinkData> | number;
111
- yForce?: NodeIterationPropsInterface<NodeData, LinkData> | number;
90
+ yPosition?: NodeIterationPropsInterface<NodeData, LinkData> | number;
112
91
  yStrength?: NodeIterationPropsInterface<NodeData, LinkData> | number;
113
92
  };
114
93
  type NodeSettingsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
115
94
  cache?: boolean;
116
95
  idGetter?: NodeIterationPropsInterface<NodeData, LinkData, string | number>;
117
- options?: NodeIterationPropsInterface<NodeData, LinkData, NodeOptionsInterface<NodeData, LinkData>> | NodeOptionsInterface<NodeData, LinkData>;
118
- };
119
- type NodeOptionsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
120
- nodeDraw?: ((node: NodeInterface<NodeData>, options: Required<NodeOptionsInterface<NodeData, LinkData>>, state: GraphState<NodeData, LinkData>) => void) | null;
121
- textDraw?: ((node: NodeInterface<NodeData>, options: Required<NodeOptionsInterface<NodeData, LinkData>>, state: GraphState<NodeData, LinkData>) => void) | null;
122
- nodeExtraDraw?: ((node: NodeInterface<NodeData>, options: Required<NodeOptionsInterface<NodeData, LinkData>>, state: GraphState<NodeData, LinkData>) => void) | null;
123
- textExtraDraw?: ((node: NodeInterface<NodeData>, options: Required<NodeOptionsInterface<NodeData, LinkData>>, state: GraphState<NodeData, LinkData>) => void) | null;
96
+ highlightByNodeOnlyRoot?: boolean;
97
+ highlightByNodeNodeFadingMin?: number;
98
+ highlightByNodeNodeColorFadingMin?: number;
99
+ highlightByNodeNodeSizingAdditional?: number;
100
+ highlightByNodeNodeSizingAdditionalCoefficient?: number;
101
+ highlightByNodeTextFadingMin?: number;
102
+ highlightByNodeTextSizingAdditional?: number;
103
+ highlightByNodeTextShiftXAdditional?: number;
104
+ highlightByNodeTextShiftYAdditional?: number;
105
+ highlightByNodeTextWeightAdditional?: number;
106
+ highlightByNodeTextWidthAdditional?: number;
107
+ highlightByLinkNodeFadingMin?: number;
108
+ highlightByLinkNodeColorFadingMin?: number;
109
+ highlightByLinkTextFadingMin?: number;
110
+ highlightByLinkNodeSizingAdditional?: number;
111
+ highlightByLinkNodeSizingAdditionalCoefficient?: number;
112
+ highlightByLinkTextSizingAdditional?: number;
113
+ highlightByLinkTextShiftXAdditional?: number;
114
+ highlightByLinkTextShiftYAdditional?: number;
115
+ highlightByLinkTextWeightAdditional?: number;
116
+ highlightByLinkTextWidthAdditional?: number;
117
+ highlightByHoverNode?: boolean;
124
118
  highlightByNodeNodeFading?: boolean;
125
119
  highlightByNodeNodeSizing?: boolean;
126
120
  highlightByNodeTextFading?: boolean;
@@ -131,11 +125,31 @@ type NodeOptionsInterface<NodeData extends Record<string, unknown>, LinkData ext
131
125
  highlightByLinkTextFading?: boolean;
132
126
  highlightByLinkTextSizing?: boolean;
133
127
  highlightByLinkNodeColor?: boolean;
128
+ nodeRadiusCoefficient?: number;
129
+ nodeRadiusFactor?: number;
130
+ nodeRadiusFlexible?: boolean;
131
+ nodeSizeFlexible?: boolean;
132
+ nodeSizeCoefficient?: number;
133
+ nodeSizeFactor?: number;
134
+ textNodeDebug?: boolean;
135
+ options?: NodeIterationPropsInterface<NodeData, LinkData, NodeOptionsInterface<NodeData, LinkData>> | NodeOptionsInterface<NodeData, LinkData>;
136
+ };
137
+ type NodeOptionsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
138
+ nodeDraw?: ((node: NodeInterface<NodeData>, options: Required<NodeOptionsInterface<NodeData, LinkData>>, state: GraphState<NodeData, LinkData>) => void) | null;
139
+ textDraw?: ((node: NodeInterface<NodeData>, options: Required<NodeOptionsInterface<NodeData, LinkData>>, state: GraphState<NodeData, LinkData>) => void) | null;
140
+ nodeExtraDraw?: ((node: NodeInterface<NodeData>, options: Required<NodeOptionsInterface<NodeData, LinkData>>, state: GraphState<NodeData, LinkData>) => void) | null;
141
+ textExtraDraw?: ((node: NodeInterface<NodeData>, options: Required<NodeOptionsInterface<NodeData, LinkData>>, state: GraphState<NodeData, LinkData>) => void) | null;
142
+ shape?: NodeShape;
143
+ width?: number;
144
+ height?: number;
145
+ borderRadius?: number;
134
146
  borderColor?: string;
135
147
  borderWidth?: number;
136
148
  radius?: number;
137
149
  alpha?: number;
138
150
  color?: string;
151
+ textNodeYPadding?: number;
152
+ textNodeXPadding?: number;
139
153
  textVisible?: boolean;
140
154
  text?: string | null;
141
155
  textAlpha?: number;
@@ -153,7 +167,22 @@ type NodeOptionsInterface<NodeData extends Record<string, unknown>, LinkData ext
153
167
  type NodeIterationPropsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>, Return = number> = (node: NodeInterface<NodeData>, i: number, nodes: NodeInterface<NodeData>[], state?: GraphState<NodeData, LinkData>) => Return;
154
168
  type LinkSettingsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
155
169
  particles?: boolean;
170
+ pretty?: boolean;
171
+ arrow?: boolean;
172
+ arrowByHighlight?: boolean;
156
173
  cache?: boolean;
174
+ particleFlexSpeed?: boolean;
175
+ particleFlexSpeedCoefficient?: number;
176
+ highlightByNodeLinkFadingMin?: number;
177
+ highlightByNodeArrowFadingMin?: number;
178
+ highlightByLinkArrowFadingMin?: number;
179
+ highlightByLinkLinkFadingMin?: number;
180
+ highlightByHoverLink?: boolean;
181
+ highlightByNodeLinkFading?: boolean;
182
+ highlightByNodeArrowFading?: boolean;
183
+ highlightByLinkLinkFading?: boolean;
184
+ highlightByLinkArrowFading?: boolean;
185
+ hoverLinkThreshold?: number;
157
186
  options?: LinkIterationPropsInterface<NodeData, LinkData, LinkOptionsInterface<NodeData, LinkData>> | LinkOptionsInterface<NodeData, LinkData>;
158
187
  };
159
188
  type LinkOptionsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
@@ -162,16 +191,13 @@ type LinkOptionsInterface<NodeData extends Record<string, unknown>, LinkData ext
162
191
  alpha?: number;
163
192
  color?: string;
164
193
  width?: number;
165
- highlightByNodeLinkFading?: boolean;
166
- highlightByNodeArrowFading?: boolean;
167
- highlightByLinkLinkFading?: boolean;
168
- highlightByLinkArrowFading?: boolean;
169
- pretty?: boolean;
170
- arrow?: boolean;
171
194
  arrowAlpha?: number;
172
195
  arrowColor?: string;
173
196
  arrowSize?: number;
174
- arrowReverseAppear?: boolean;
197
+ arrowBorderColor?: string;
198
+ arrowBorderWidth?: number;
199
+ particleBorderColor?: string;
200
+ particleBorderWidth?: number;
175
201
  particleAlpha?: number;
176
202
  particleColor?: string;
177
203
  particleRadius?: number;
@@ -222,48 +248,50 @@ type RGB = {
222
248
  };
223
249
  type GraphParticle = {
224
250
  step: number;
225
- wait: number;
251
+ index: number;
252
+ prev: GraphParticle | undefined;
253
+ next: GraphParticle | undefined;
226
254
  x?: number;
227
255
  y?: number;
228
- sourceId: number;
229
- targetId: number;
256
+ sourceId: string | number;
257
+ targetId: string | number;
230
258
  };
231
259
 
232
260
  declare class GraphCanvas<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> {
233
261
  /** initial data */
234
- private nodes;
235
- private links;
236
- private particles;
237
- private width;
238
- private height;
239
- private root;
240
- private container;
241
- private area;
262
+ protected nodes: NodeInterface<NodeData>[];
263
+ protected links: LinkInterface<NodeData, LinkData>[];
264
+ protected particles: Record<string, GraphParticle[]>;
265
+ protected width: number;
266
+ protected height: number;
267
+ protected root: HTMLElement;
268
+ protected container: HTMLDivElement | undefined | null;
269
+ protected area: HTMLCanvasElement | null | undefined;
242
270
  /** settings */
243
- private graphSettings;
244
- private forceSettings;
245
- private nodeSettings;
246
- private linkSettings;
247
- private listeners;
271
+ protected graphSettings: Required<GraphSettingsInterface<NodeData>>;
272
+ protected forceSettings: Required<ForceSettingsInterface<NodeData, LinkData>>;
273
+ protected nodeSettings: Required<Omit<NodeSettingsInterface<NodeData, LinkData>, "options">> & Pick<NodeSettingsInterface<NodeData, LinkData>, "options">;
274
+ protected linkSettings: Required<Omit<LinkSettingsInterface<NodeData, LinkData>, "options">> & Pick<LinkSettingsInterface<NodeData, LinkData>, "options">;
275
+ protected listeners: ListenersInterface<NodeData, LinkData>;
248
276
  /** service */
249
- private context;
250
- private simulation;
251
- private areaTransform;
252
- private areaRect;
253
- private draw;
254
- private eventAbortController;
255
- private cachedNodeText;
256
- private linkOptionsCache;
257
- private nodeOptionsCache;
258
- private isDragging;
259
- private highlightedNode;
260
- private highlightedLink;
261
- private highlightedNeighbors;
262
- private highlightProgress;
263
- private highlightWorking;
264
- private highlightDrawing;
265
- private get simulationWorking();
266
- private get state();
277
+ protected context: CanvasRenderingContext2D | null | undefined;
278
+ protected simulation: GraphCanvasSimulation<NodeData, LinkData> | undefined;
279
+ protected areaTransform: ZoomTransform;
280
+ protected areaRect: DOMRect | undefined;
281
+ protected draw: (this: GraphCanvas<NodeData, LinkData>) => void;
282
+ protected eventAbortController: AbortController;
283
+ protected cachedNodeText: CachedNodeTextInterface;
284
+ protected linkOptionsCache: Record<string, Required<LinkOptionsInterface<NodeData, LinkData>>>;
285
+ protected nodeOptionsCache: Record<string, Required<NodeOptionsInterface<NodeData, LinkData>>>;
286
+ protected isDragging: boolean;
287
+ protected highlightedNode: NodeInterface<NodeData> | null;
288
+ protected highlightedLink: LinkInterface<NodeData, LinkData> | null;
289
+ protected highlightedNeighbors: Set<string | number> | null;
290
+ protected highlightProgress: number;
291
+ protected highlightWorking: boolean;
292
+ protected highlightDrawing: boolean;
293
+ protected get simulationWorking(): boolean;
294
+ protected get state(): GraphState<NodeData, LinkData>;
267
295
  constructor({ links, nodes, root, forceSettings, linkSettings, listeners, nodeSettings, graphSettings, }: GraphCanvasInterface<NodeData, LinkData>);
268
296
  get dpi(): number;
269
297
  getData(): Pick<GraphCanvasInterface<NodeData, LinkData>, "nodes" | "links">;
@@ -277,22 +305,13 @@ declare class GraphCanvas<NodeData extends Record<string, unknown>, LinkData ext
277
305
  stop(): void;
278
306
  create(): void;
279
307
  destroy(): void;
280
- private clearHTMLElements;
281
- private updateSimulation;
282
- private clearState;
283
- private clearDataDependencies;
284
- private updateData;
285
- private updateSize;
286
- private init;
287
- private initSimulation;
288
- private initSimulationForces;
289
- private initCollideForce;
290
- private initArea;
291
- private initDraw;
292
- private initResize;
293
- private initPointer;
294
- private initDnd;
295
- private initZoom;
308
+ protected clearHTMLElements(): void;
309
+ protected updateSimulation(): void;
310
+ protected clearState(): void;
311
+ protected clearDataDependencies(): void;
312
+ protected updateData(alpha?: number): void;
313
+ protected updateSize(): void;
314
+ protected init(): void;
296
315
  }
297
316
 
298
317
  declare function linkOptionsGetter<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(_: LinkInterface<NodeData, LinkData>, __: number, ___: LinkInterface<NodeData, LinkData>[], state?: GraphState<NodeData, LinkData>): Required<LinkOptionsInterface<NodeData, LinkData>>;
@@ -315,36 +334,18 @@ type NodeByPointerGetterOptions<NodeData extends Record<string, unknown>> = {
315
334
  areaRect: DOMRect | undefined;
316
335
  areaTransform: ZoomTransform;
317
336
  nodes: NodeInterface<NodeData>[];
318
- graphSettings: Required<GraphSettingsInterface<NodeData>>;
319
337
  };
320
- declare function nodeByPointerGetter<NodeData extends Record<string, unknown>>({ areaRect, areaTransform, mouseEvent, nodes, graphSettings, }: NodeByPointerGetterOptions<NodeData>): NodeInterface<NodeData> | undefined;
338
+ declare function nodeByPointerGetter<NodeData extends Record<string, unknown>>({ areaRect, areaTransform, mouseEvent, nodes, }: NodeByPointerGetterOptions<NodeData>): NodeInterface<NodeData> | undefined;
321
339
 
322
340
  declare function nodeIterationExtractor<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>, Result extends string | number | boolean | Record<string, unknown> | unknown[] | undefined | null>(node: NodeInterface<NodeData>, i: number, nodes: NodeInterface<NodeData>[], state: GraphState<NodeData, LinkData>, option: NodeIterationPropsInterface<NodeData, LinkData, Result> | Result, optionConstantGetter: undefined): Result;
323
341
  declare function nodeIterationExtractor<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>, Result extends string | number | boolean | Record<string, unknown> | unknown[] | undefined | null>(node: NodeInterface<NodeData>, i: number, nodes: NodeInterface<NodeData>[], state: GraphState<NodeData, LinkData>, option: NodeIterationPropsInterface<NodeData, LinkData, Result> | Result, optionConstantGetter: NodeIterationPropsInterface<NodeData, LinkData, Result> | Result): Required<Result>;
324
342
 
325
- type DrawTextOptions = {
326
- id: string | number;
327
- x: number;
328
- y: number;
329
- text: string;
330
- textSize: number;
331
- textStyle: TextStyleEnum;
332
- textWeight: number;
333
- textFont: string;
334
- textColor: string;
335
- textGap: number;
336
- textAlign: CanvasTextAlign;
337
- context: CanvasRenderingContext2D;
338
- cachedNodeText: CachedNodeTextInterface;
339
- maxWidth?: number;
340
- };
341
- declare function drawText({ context, id, textAlign, textColor, textFont, textStyle, textGap, textWeight, textSize, text, x, y, cachedNodeText, maxWidth, }: DrawTextOptions): void;
342
-
343
- declare function calculateLinkPositionByRadius<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(link: LinkInterface<NodeData, LinkData>, arrowSize?: number): {
343
+ declare function calculateLinkPositionByNode<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(link: LinkInterface<NodeData, LinkData>, arrowSize?: number): {
344
344
  x1: number;
345
345
  y1: number;
346
346
  x2: number;
347
347
  y2: number;
348
+ distance: number;
348
349
  } | null;
349
350
 
350
351
  declare function animationByProgress(initial: number, additional: number, progress: number): number;
@@ -356,6 +357,8 @@ type GetParticlePositionOptions = {
356
357
  xEnd: number;
357
358
  yEnd: number;
358
359
  totalSteps: number;
360
+ totalCount: number;
361
+ distance: number;
359
362
  };
360
363
  declare function getParticlePosition(opts: GetParticlePositionOptions): void;
361
364
 
@@ -364,9 +367,31 @@ type LinkByPointerGetterOptions<NodeData extends Record<string, unknown>, LinkDa
364
367
  areaRect: DOMRect | undefined;
365
368
  areaTransform: ZoomTransform;
366
369
  links: LinkInterface<NodeData, LinkData>[];
367
- graphSettings: Required<GraphSettingsInterface<NodeData>>;
370
+ linkSettings: Required<Omit<LinkSettingsInterface<NodeData, LinkData>, "options">> & Pick<LinkSettingsInterface<NodeData, LinkData>, "options">;
368
371
  };
369
- declare function linkByPointerGetter<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>({ areaRect, areaTransform, mouseEvent, links, graphSettings, }: LinkByPointerGetterOptions<NodeData, LinkData>): LinkInterface<NodeData, LinkData> | undefined;
372
+ declare function linkByPointerGetter<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>({ areaRect, areaTransform, mouseEvent, links, linkSettings, }: LinkByPointerGetterOptions<NodeData, LinkData>): LinkInterface<NodeData, LinkData> | undefined;
373
+
374
+ declare function getDrawLink<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(state: GraphState<NodeData, LinkData>): (this: GraphCanvas<NodeData, LinkData>, link: LinkInterface<NodeData, LinkData>, index: number) => void;
375
+
376
+ declare function getDrawNode<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(nodeRenders: (() => void)[], textRenders: (() => void)[], state: GraphState<NodeData, LinkData>): (this: GraphCanvas<NodeData, LinkData>, node: NodeInterface<NodeData>, index: number) => void;
377
+
378
+ type DrawTextOptions = {
379
+ id: string | number;
380
+ x: number;
381
+ y: number;
382
+ text: string;
383
+ textSize: number;
384
+ textStyle: TextStyleEnum;
385
+ textWeight: number;
386
+ textFont: string;
387
+ textColor: string;
388
+ textGap: number;
389
+ textAlign: CanvasTextAlign;
390
+ context: CanvasRenderingContext2D;
391
+ cachedNodeText: CachedNodeTextInterface;
392
+ maxWidth?: number;
393
+ };
394
+ declare function drawText({ context, id, textAlign, textColor, textFont, textStyle, textGap, textWeight, textSize, text, x, y, cachedNodeText, maxWidth, }: DrawTextOptions): void;
370
395
 
371
396
  declare function colorToRgb(color: string): string | null;
372
397
 
@@ -401,11 +426,23 @@ type GraphSettingsInputColorBox<I extends string> = {
401
426
  initialValue: string;
402
427
  label: string;
403
428
  };
404
- type GraphSettingsInputInterface<I extends string> = GraphSettingsInputRange<I> | GraphSettingsInputCheckBox<I> | GraphSettingsInputColorBox<I>;
429
+ type GraphSettingsInputSelect<I extends string> = {
430
+ type: "select";
431
+ id: I;
432
+ initialValue: string;
433
+ label: string;
434
+ options: {
435
+ label: string;
436
+ value: string;
437
+ }[];
438
+ };
439
+ type GraphSettingsInputInterface<I extends string> = GraphSettingsInputRange<I> | GraphSettingsInputCheckBox<I> | GraphSettingsInputColorBox<I> | GraphSettingsInputSelect<I>;
405
440
 
406
441
  declare function getForceControls<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(keys?: (keyof ForceSettingsInterface<NodeData, LinkData>)[]): GraphSettingsInputInterface<keyof ForceSettingsInterface<NodeData, LinkData>>[];
407
442
  declare function getGraphControls<NodeData extends Record<string, unknown>>(keys?: (keyof GraphSettingsInterface<NodeData>)[]): GraphSettingsInputInterface<keyof GraphSettingsInterface<NodeData>>[];
408
- declare function getNodeControls<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(keys?: (keyof NodeOptionsInterface<NodeData, LinkData>)[]): GraphSettingsInputInterface<keyof NodeOptionsInterface<NodeData, LinkData>>[];
409
- declare function getLinkControls<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(keys?: (keyof LinkOptionsInterface<NodeData, LinkData>)[]): GraphSettingsInputInterface<keyof LinkOptionsInterface<NodeData, LinkData>>[];
443
+ declare function getNodeSettingControls<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(keys?: keyof Omit<Required<NodeSettingsInterface<NodeData, LinkData>>, "options" | "idGetter">): GraphSettingsInputInterface<"cache" | "highlightByNodeOnlyRoot" | "highlightByNodeNodeFadingMin" | "highlightByNodeNodeColorFadingMin" | "highlightByNodeNodeSizingAdditional" | "highlightByNodeNodeSizingAdditionalCoefficient" | "highlightByNodeTextFadingMin" | "highlightByNodeTextSizingAdditional" | "highlightByNodeTextShiftXAdditional" | "highlightByNodeTextShiftYAdditional" | "highlightByNodeTextWeightAdditional" | "highlightByNodeTextWidthAdditional" | "highlightByLinkNodeFadingMin" | "highlightByLinkNodeColorFadingMin" | "highlightByLinkTextFadingMin" | "highlightByLinkNodeSizingAdditional" | "highlightByLinkNodeSizingAdditionalCoefficient" | "highlightByLinkTextSizingAdditional" | "highlightByLinkTextShiftXAdditional" | "highlightByLinkTextShiftYAdditional" | "highlightByLinkTextWeightAdditional" | "highlightByLinkTextWidthAdditional" | "highlightByHoverNode" | "highlightByNodeNodeFading" | "highlightByNodeNodeSizing" | "highlightByNodeTextFading" | "highlightByNodeTextSizing" | "highlightByNodeNodeColor" | "highlightByLinkNodeFading" | "highlightByLinkNodeSizing" | "highlightByLinkTextFading" | "highlightByLinkTextSizing" | "highlightByLinkNodeColor" | "nodeRadiusCoefficient" | "nodeRadiusFactor" | "nodeRadiusFlexible" | "nodeSizeFlexible" | "nodeSizeCoefficient" | "nodeSizeFactor" | "textNodeDebug">[];
444
+ declare function getNodeOptionsControls<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(keys?: (keyof NodeOptionsInterface<NodeData, LinkData>)[]): GraphSettingsInputInterface<keyof NodeOptionsInterface<NodeData, LinkData>>[];
445
+ declare function getLinkSettingsControls<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(keys?: keyof Omit<Required<LinkSettingsInterface<NodeData, LinkData>>, "options">): GraphSettingsInputInterface<"cache" | "particles" | "pretty" | "arrow" | "arrowByHighlight" | "particleFlexSpeed" | "particleFlexSpeedCoefficient" | "highlightByNodeLinkFadingMin" | "highlightByNodeArrowFadingMin" | "highlightByLinkArrowFadingMin" | "highlightByLinkLinkFadingMin" | "highlightByHoverLink" | "highlightByNodeLinkFading" | "highlightByNodeArrowFading" | "highlightByLinkLinkFading" | "highlightByLinkArrowFading" | "hoverLinkThreshold">[];
446
+ declare function getLinkOptionsControls<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(keys?: (keyof LinkOptionsInterface<NodeData, LinkData>)[]): GraphSettingsInputInterface<keyof LinkOptionsInterface<NodeData, LinkData>>[];
410
447
 
411
- export { type CachedNodeTextInterface, type DragEventInterface, type ForceSettingsInterface, GraphCanvas, type GraphCanvasInterface, type GraphCanvasSimulation, type GraphParticle, type GraphSettingsInterface, type GraphState, type LinkInterface, type LinkIterationPropsInterface, type LinkOptionsInterface, type LinkSettingsInterface, type ListenersInterface, type NodeInterface, type NodeIterationPropsInterface, type NodeOptionsInterface, type NodeSettingsInterface, type RGB, type TextStyleEnum, type ZoomEventInterface, animationByProgress, calculateLinkPositionByRadius, colorToRgb, drawText, extractRgb, fadeRgb, getForceControls, getGraphControls, getLinkControls, getNodeControls, getParticlePosition, linkByPointerGetter, linkIterationExtractor, linkOptionsGetter, nodeByPointerGetter, nodeIterationExtractor, nodeOptionsGetter, nodeRadiusGetter, rgbAnimationByProgress };
448
+ export { type CachedNodeTextInterface, type DragEventInterface, type ForceSettingsInterface, GraphCanvas, type GraphCanvasInterface, type GraphCanvasSimulation, type GraphParticle, type GraphSettingsInterface, type GraphState, type LinkInterface, type LinkIterationPropsInterface, type LinkOptionsInterface, type LinkSettingsInterface, type ListenersInterface, type NodeInterface, type NodeIterationPropsInterface, type NodeOptionsInterface, type NodeSettingsInterface, type NodeShape, type RGB, type TextStyleEnum, type ZoomEventInterface, animationByProgress, calculateLinkPositionByNode, colorToRgb, drawText, extractRgb, fadeRgb, getDrawLink, getDrawNode, getForceControls, getGraphControls, getLinkOptionsControls, getLinkSettingsControls, getNodeOptionsControls, getNodeSettingControls, getParticlePosition, linkByPointerGetter, linkIterationExtractor, linkOptionsGetter, nodeByPointerGetter, nodeIterationExtractor, nodeOptionsGetter, nodeRadiusGetter, rgbAnimationByProgress };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@krainovsd/graph",
3
- "version": "0.9.0",
3
+ "version": "0.10.0-rc1",
4
4
  "description": "Krainov graph",
5
5
  "type": "module",
6
6
  "author": "KrainovSD <denislosev48@gmail.com>",
@@ -1,20 +0,0 @@
1
- function calculateLinkPositionByRadius(link, arrowSize = 0) {
2
- const source = link.source;
3
- const target = link.target;
4
- if (typeof source != "object" || typeof target != "object")
5
- return null;
6
- const dx = (target.x ?? 0) - (source.x ?? 0);
7
- const dy = (target.y ?? 0) - (source.y ?? 0);
8
- const dr = Math.sqrt(dx * dx + dy * dy);
9
- const sourceRadius = source._radius ?? 0;
10
- const targetRadius = (target._radius ?? 0) + (arrowSize > 0 ? arrowSize * 0.85 : 0);
11
- return {
12
- x1: (source.x ?? 0) + (dx * sourceRadius) / dr,
13
- y1: (source.y ?? 0) + (dy * sourceRadius) / dr,
14
- x2: (target.x ?? 0) - (dx * targetRadius) / dr,
15
- y2: (target.y ?? 0) - (dy * targetRadius) / dr,
16
- };
17
- }
18
-
19
- export { calculateLinkPositionByRadius };
20
- //# sourceMappingURL=calculate-link-position-by-radius.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"calculate-link-position-by-radius.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/calculate-link-position-by-radius.ts"],"sourcesContent":["import type { LinkInterface } from \"@/types\";\n\nexport function calculateLinkPositionByRadius<\n NodeData extends Record<string, unknown>,\n LinkData extends Record<string, unknown>,\n>(link: LinkInterface<NodeData, LinkData>, arrowSize = 0) {\n const source = link.source;\n const target = link.target;\n\n if (typeof source != \"object\" || typeof target != \"object\") return null;\n\n const dx = (target.x ?? 0) - (source.x ?? 0);\n const dy = (target.y ?? 0) - (source.y ?? 0);\n const dr = Math.sqrt(dx * dx + dy * dy);\n const sourceRadius = source._radius ?? 0;\n const targetRadius = (target._radius ?? 0) + (arrowSize > 0 ? arrowSize * 0.85 : 0);\n\n return {\n x1: (source.x ?? 0) + (dx * sourceRadius) / dr,\n y1: (source.y ?? 0) + (dy * sourceRadius) / dr,\n x2: (target.x ?? 0) - (dx * targetRadius) / dr,\n y2: (target.y ?? 0) - (dy * targetRadius) / dr,\n };\n}\n"],"names":[],"mappings":"SAEgB,6BAA6B,CAG3C,IAAuC,EAAE,SAAS,GAAG,CAAC,EAAA;AACtD,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM;AAC1B,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM;IAE1B,IAAI,OAAO,MAAM,IAAI,QAAQ,IAAI,OAAO,MAAM,IAAI,QAAQ;AAAE,QAAA,OAAO,IAAI;AAEvE,IAAA,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAC5C,IAAA,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAC5C,IAAA,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AACvC,IAAA,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,IAAI,CAAC;IACxC,MAAM,YAAY,GAAG,CAAC,MAAM,CAAC,OAAO,IAAI,CAAC,KAAK,SAAS,GAAG,CAAC,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC;IAEnF,OAAO;AACL,QAAA,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,YAAY,IAAI,EAAE;AAC9C,QAAA,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,YAAY,IAAI,EAAE;AAC9C,QAAA,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,YAAY,IAAI,EAAE;AAC9C,QAAA,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,YAAY,IAAI,EAAE;KAC/C;AACH;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"draw-text.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/draw-text.ts"],"sourcesContent":["import type { CachedNodeTextInterface } from \"@/types\";\nimport type { TextStyleEnum } from \"../../types\";\n\nexport type DrawTextOptions = {\n id: string | number;\n x: number;\n y: number;\n text: string;\n textSize: number;\n textStyle: TextStyleEnum;\n textWeight: number;\n textFont: string;\n textColor: string;\n textGap: number;\n textAlign: CanvasTextAlign;\n context: CanvasRenderingContext2D;\n cachedNodeText: CachedNodeTextInterface;\n maxWidth?: number;\n};\n\nconst SPACE = \" \";\n\nexport function drawText({\n context,\n id,\n textAlign,\n textColor,\n textFont,\n textStyle,\n textGap,\n textWeight,\n textSize,\n text,\n x,\n y,\n cachedNodeText,\n maxWidth,\n}: DrawTextOptions) {\n context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;\n context.fillStyle = textColor;\n context.textAlign = textAlign;\n\n if (cachedNodeText[id] != undefined) {\n cachedNodeText[id].forEach((line, index) => {\n context.fillText(line, x, y + index * textSize + index * textGap);\n });\n\n return;\n }\n\n if (maxWidth == undefined || context.measureText(text).width <= maxWidth) {\n cachedNodeText[id] = [text];\n context.fillText(text, x, y);\n\n return;\n }\n\n const spaceWidth = context.measureText(\" \").width;\n const lines: string[] = [];\n let lineWidth = 0;\n let line = \"\";\n\n for (const word of text.split(\" \")) {\n const size = context.measureText(word).width;\n lineWidth += size;\n\n if (line === \"\") {\n line = word;\n\n continue;\n }\n if (lineWidth > maxWidth) {\n lineWidth = 0;\n lines.push(line);\n line = word;\n } else {\n lineWidth += spaceWidth;\n line += `${SPACE}${word}`;\n }\n }\n\n if (line !== \"\") lines.push(line);\n\n cachedNodeText[id] = lines;\n lines.forEach((line, index) => {\n context.fillText(line, x, y + index * textSize + index * textGap);\n });\n}\n"],"names":[],"mappings":"AAoBA,MAAM,KAAK,GAAG,GAAG;AAED,SAAA,QAAQ,CAAC,EACvB,OAAO,EACP,EAAE,EACF,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,OAAO,EACP,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,CAAC,EACD,CAAC,EACD,cAAc,EACd,QAAQ,GACQ,EAAA;AAChB,IAAA,OAAO,CAAC,IAAI,GAAG,CAAA,EAAG,SAAS,CAAA,QAAA,EAAW,UAAU,CAAA,CAAA,EAAI,QAAQ,CAAA,GAAA,EAAM,QAAQ,CAAA,CAAE;AAC5E,IAAA,OAAO,CAAC,SAAS,GAAG,SAAS;AAC7B,IAAA,OAAO,CAAC,SAAS,GAAG,SAAS;AAE7B,IAAA,IAAI,cAAc,CAAC,EAAE,CAAC,IAAI,SAAS,EAAE;QACnC,cAAc,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACzC,YAAA,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;AACnE,SAAC,CAAC;QAEF;;AAGF,IAAA,IAAI,QAAQ,IAAI,SAAS,IAAI,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,QAAQ,EAAE;AACxE,QAAA,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;QAC3B,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;QAE5B;;IAGF,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK;IACjD,MAAM,KAAK,GAAa,EAAE;IAC1B,IAAI,SAAS,GAAG,CAAC;IACjB,IAAI,IAAI,GAAG,EAAE;IAEb,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;QAClC,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK;QAC5C,SAAS,IAAI,IAAI;AAEjB,QAAA,IAAI,IAAI,KAAK,EAAE,EAAE;YACf,IAAI,GAAG,IAAI;YAEX;;AAEF,QAAA,IAAI,SAAS,GAAG,QAAQ,EAAE;YACxB,SAAS,GAAG,CAAC;AACb,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;YAChB,IAAI,GAAG,IAAI;;aACN;YACL,SAAS,IAAI,UAAU;AACvB,YAAA,IAAI,IAAI,CAAG,EAAA,KAAK,CAAG,EAAA,IAAI,EAAE;;;IAI7B,IAAI,IAAI,KAAK,EAAE;AAAE,QAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;AAEjC,IAAA,cAAc,CAAC,EAAE,CAAC,GAAG,KAAK;IAC1B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,QAAA,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;AACnE,KAAC,CAAC;AACJ;;;;"}