@html-graph/html-graph 4.1.0 → 5.0.0
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.
- package/README.md +4 -10
- package/dist/html-graph.d.ts +27 -10
- package/dist/html-graph.js +1573 -1522
- package/dist/html-graph.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,17 +1,11 @@
|
|
|
1
|
-
<
|
|
2
|
-
<img src="/media/
|
|
3
|
-
</
|
|
4
|
-
|
|
5
|
-
### Graph visualization library that enables rich nodes customization using HTML
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="/media/logo-label.svg" alt="HTMLGraph" width="520" height="100"/>
|
|
3
|
+
</p>
|
|
6
4
|
|
|
7
5
|
<a target="_blank" href="https://html-graph.github.io/use-cases/advanced-demo/">
|
|
8
6
|
<img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
|
|
9
7
|
</a>
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
npm i @html-graph/html-graph
|
|
15
|
-
```
|
|
9
|
+
### Graph visualization library that enables rich nodes customization using HTML
|
|
16
10
|
|
|
17
11
|
Visit the <a target="_blank" href="https://html-graph.github.io">DOCUMENTATION</a> for examples and API reference.
|
package/dist/html-graph.d.ts
CHANGED
|
@@ -42,6 +42,27 @@ declare interface AddPortRequest {
|
|
|
42
42
|
readonly direction: number;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
+
export declare type ArrowRenderer = (params: ArrowRenderingParams) => string;
|
|
46
|
+
|
|
47
|
+
export declare type ArrowRendererConfig = {
|
|
48
|
+
readonly type?: "wedge";
|
|
49
|
+
readonly radius?: number | undefined;
|
|
50
|
+
readonly smallRadius?: number | undefined;
|
|
51
|
+
readonly angle?: number | undefined;
|
|
52
|
+
} | {
|
|
53
|
+
readonly type: "triangle";
|
|
54
|
+
readonly radius?: number | undefined;
|
|
55
|
+
} | {
|
|
56
|
+
readonly type: "arc";
|
|
57
|
+
readonly radius?: number | undefined;
|
|
58
|
+
} | ArrowRenderer;
|
|
59
|
+
|
|
60
|
+
export declare interface ArrowRenderingParams {
|
|
61
|
+
readonly direction: Point;
|
|
62
|
+
readonly shift: Point;
|
|
63
|
+
readonly arrowLength: number;
|
|
64
|
+
}
|
|
65
|
+
|
|
45
66
|
export declare interface BackgroundConfig {
|
|
46
67
|
readonly tileDimensions?: {
|
|
47
68
|
readonly width?: number;
|
|
@@ -55,7 +76,7 @@ export declare interface BezierEdgeParams {
|
|
|
55
76
|
readonly color?: string | undefined;
|
|
56
77
|
readonly width?: number | undefined;
|
|
57
78
|
readonly arrowLength?: number | undefined;
|
|
58
|
-
readonly
|
|
79
|
+
readonly arrowRenderer?: ArrowRendererConfig | undefined;
|
|
59
80
|
readonly curvature?: number | undefined;
|
|
60
81
|
readonly hasSourceArrow?: boolean | undefined;
|
|
61
82
|
readonly hasTargetArrow?: boolean | undefined;
|
|
@@ -73,7 +94,6 @@ export declare class BezierEdgeShape implements StructuredEdgeShape {
|
|
|
73
94
|
readonly targetArrow: SVGPathElement | null;
|
|
74
95
|
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
75
96
|
private readonly arrowLength;
|
|
76
|
-
private readonly arrowWidth;
|
|
77
97
|
private readonly curvature;
|
|
78
98
|
private readonly portCycleRadius;
|
|
79
99
|
private readonly portCycleSmallRadius;
|
|
@@ -342,7 +362,7 @@ export declare interface DirectEdgeParams {
|
|
|
342
362
|
readonly color?: string | undefined;
|
|
343
363
|
readonly width?: number | undefined;
|
|
344
364
|
readonly arrowLength?: number | undefined;
|
|
345
|
-
readonly
|
|
365
|
+
readonly arrowRenderer?: ArrowRendererConfig | undefined;
|
|
346
366
|
readonly hasSourceArrow?: boolean | undefined;
|
|
347
367
|
readonly hasTargetArrow?: boolean | undefined;
|
|
348
368
|
readonly sourceOffset?: number | undefined;
|
|
@@ -358,11 +378,11 @@ export declare class DirectEdgeShape implements StructuredEdgeShape {
|
|
|
358
378
|
private readonly color;
|
|
359
379
|
private readonly width;
|
|
360
380
|
private readonly arrowLength;
|
|
361
|
-
private readonly arrowWidth;
|
|
362
381
|
private readonly sourceOffset;
|
|
363
382
|
private readonly targetOffset;
|
|
364
383
|
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
365
384
|
private readonly afterRenderEmitter;
|
|
385
|
+
private readonly arrowRenderer;
|
|
366
386
|
constructor(params?: DirectEdgeParams);
|
|
367
387
|
render(params: EdgeRenderParams): void;
|
|
368
388
|
}
|
|
@@ -567,7 +587,7 @@ export declare interface HorizontalEdgeParams {
|
|
|
567
587
|
readonly color?: string | undefined;
|
|
568
588
|
readonly width?: number | undefined;
|
|
569
589
|
readonly arrowLength?: number | undefined;
|
|
570
|
-
readonly
|
|
590
|
+
readonly arrowRenderer?: ArrowRendererConfig | undefined;
|
|
571
591
|
readonly arrowOffset?: number | undefined;
|
|
572
592
|
readonly hasSourceArrow?: boolean | undefined;
|
|
573
593
|
readonly hasTargetArrow?: boolean | undefined;
|
|
@@ -584,7 +604,6 @@ export declare class HorizontalEdgeShape implements StructuredEdgeShape {
|
|
|
584
604
|
readonly targetArrow: SVGPathElement | null;
|
|
585
605
|
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
586
606
|
private readonly arrowLength;
|
|
587
|
-
private readonly arrowWidth;
|
|
588
607
|
private readonly arrowOffset;
|
|
589
608
|
private readonly roundness;
|
|
590
609
|
private readonly cycleSquareSide;
|
|
@@ -738,8 +757,8 @@ export declare interface StraightEdgeParams {
|
|
|
738
757
|
readonly color?: string | undefined;
|
|
739
758
|
readonly width?: number | undefined;
|
|
740
759
|
readonly arrowLength?: number | undefined;
|
|
741
|
-
readonly arrowWidth?: number | undefined;
|
|
742
760
|
readonly arrowOffset?: number | undefined;
|
|
761
|
+
readonly arrowRenderer?: ArrowRendererConfig | undefined;
|
|
743
762
|
readonly hasSourceArrow?: boolean | undefined;
|
|
744
763
|
readonly hasTargetArrow?: boolean | undefined;
|
|
745
764
|
readonly cycleSquareSide?: number | undefined;
|
|
@@ -756,7 +775,6 @@ export declare class StraightEdgeShape implements StructuredEdgeShape {
|
|
|
756
775
|
readonly targetArrow: SVGPathElement | null;
|
|
757
776
|
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
758
777
|
private readonly arrowLength;
|
|
759
|
-
private readonly arrowWidth;
|
|
760
778
|
private readonly arrowOffset;
|
|
761
779
|
private readonly roundness;
|
|
762
780
|
private readonly cycleSquareSide;
|
|
@@ -863,8 +881,8 @@ export declare interface VerticalEdgeParams {
|
|
|
863
881
|
readonly color?: string | undefined;
|
|
864
882
|
readonly width?: number | undefined;
|
|
865
883
|
readonly arrowLength?: number | undefined;
|
|
866
|
-
readonly arrowWidth?: number | undefined;
|
|
867
884
|
readonly arrowOffset?: number | undefined;
|
|
885
|
+
readonly arrowRenderer?: ArrowRendererConfig | undefined;
|
|
868
886
|
readonly hasSourceArrow?: boolean | undefined;
|
|
869
887
|
readonly hasTargetArrow?: boolean | undefined;
|
|
870
888
|
readonly cycleSquareSide?: number | undefined;
|
|
@@ -880,7 +898,6 @@ export declare class VerticalEdgeShape implements StructuredEdgeShape {
|
|
|
880
898
|
readonly targetArrow: SVGPathElement | null;
|
|
881
899
|
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
882
900
|
private readonly arrowLength;
|
|
883
|
-
private readonly arrowWidth;
|
|
884
901
|
private readonly arrowOffset;
|
|
885
902
|
private readonly roundness;
|
|
886
903
|
private readonly cycleSquareSide;
|