@krainovsd/graph 0.4.4 → 0.5.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/lib/cjs/index.cjs +1130 -0
- package/lib/cjs/index.cjs.map +1 -0
- package/lib/esm/index.js +12 -932
- package/lib/esm/index.js.map +1 -1
- package/lib/esm/lib/check-type.js +6 -0
- package/lib/esm/lib/check-type.js.map +1 -0
- package/lib/esm/lib/color-getter.js +28 -0
- package/lib/esm/lib/color-getter.js.map +1 -0
- package/lib/esm/lib/color-to-rgb.js +22 -0
- package/lib/esm/lib/color-to-rgb.js.map +1 -0
- package/lib/esm/lib/extract-rgb.js +15 -0
- package/lib/esm/lib/extract-rgb.js.map +1 -0
- package/lib/esm/lib/fade-rgb.js +11 -0
- package/lib/esm/lib/fade-rgb.js.map +1 -0
- package/lib/esm/lib/rgb-animation-by-progress.js +10 -0
- package/lib/esm/lib/rgb-animation-by-progress.js.map +1 -0
- package/lib/esm/module/GraphCanvas/GraphCanvas.js +720 -0
- package/lib/esm/module/GraphCanvas/GraphCanvas.js.map +1 -0
- package/lib/esm/module/GraphCanvas/constants/settings.js +91 -0
- package/lib/esm/module/GraphCanvas/constants/settings.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/settings/force-settings-getter.js +11 -0
- package/lib/esm/module/GraphCanvas/lib/settings/force-settings-getter.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/settings/graph-settings-getter.js +11 -0
- package/lib/esm/module/GraphCanvas/lib/settings/graph-settings-getter.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/settings/link-settings-getter.js +19 -0
- package/lib/esm/module/GraphCanvas/lib/settings/link-settings-getter.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/settings/listeners-getter.js +6 -0
- package/lib/esm/module/GraphCanvas/lib/settings/listeners-getter.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/settings/node-settings-getter.js +53 -0
- package/lib/esm/module/GraphCanvas/lib/settings/node-settings-getter.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/utils/calculate-link-position-by-radius.js +20 -0
- package/lib/esm/module/GraphCanvas/lib/utils/calculate-link-position-by-radius.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/utils/drag-place-coefficient-getter.js +11 -0
- package/lib/esm/module/GraphCanvas/lib/utils/drag-place-coefficient-getter.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/utils/draw-text.js +47 -0
- package/lib/esm/module/GraphCanvas/lib/utils/draw-text.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/utils/is-overlaps-node.js +10 -0
- package/lib/esm/module/GraphCanvas/lib/utils/is-overlaps-node.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/utils/link-iteration-extractor.js +37 -0
- package/lib/esm/module/GraphCanvas/lib/utils/link-iteration-extractor.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/utils/node-by-pointer-getter.js +26 -0
- package/lib/esm/module/GraphCanvas/lib/utils/node-by-pointer-getter.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/utils/node-iteration-extractor.js +37 -0
- package/lib/esm/module/GraphCanvas/lib/utils/node-iteration-extractor.js.map +1 -0
- package/lib/esm/module/GraphCanvas/lib/utils/pointer-getter.js +8 -0
- package/lib/esm/module/GraphCanvas/lib/utils/pointer-getter.js.map +1 -0
- package/lib/index.d.ts +126 -24
- package/package.json +20 -28
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { checkType } from '../../../../lib/check-type.js';
|
|
2
|
+
import '@krainovsd/js-helpers';
|
|
3
|
+
|
|
4
|
+
function nodeIterationExtractor(node, i, nodes, state, option, optionConstantGetter) {
|
|
5
|
+
let customOptions;
|
|
6
|
+
let constantOptions;
|
|
7
|
+
if (typeof option === "function")
|
|
8
|
+
customOptions = option(node, i, nodes, state);
|
|
9
|
+
else
|
|
10
|
+
customOptions = option;
|
|
11
|
+
if (customOptions && typeof customOptions === "object" && !Array.isArray(customOptions)) {
|
|
12
|
+
for (const key in customOptions) {
|
|
13
|
+
if (customOptions[key] === undefined)
|
|
14
|
+
delete customOptions[key];
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
if (optionConstantGetter) {
|
|
18
|
+
if (typeof optionConstantGetter === "function")
|
|
19
|
+
constantOptions = optionConstantGetter(node, i, nodes, state);
|
|
20
|
+
else
|
|
21
|
+
constantOptions = optionConstantGetter;
|
|
22
|
+
if (constantOptions &&
|
|
23
|
+
typeof constantOptions === "object" &&
|
|
24
|
+
!Array.isArray(constantOptions) &&
|
|
25
|
+
checkType(customOptions, customOptions === undefined ||
|
|
26
|
+
(typeof customOptions === "object" && !Array.isArray(customOptions)))) {
|
|
27
|
+
return {
|
|
28
|
+
...constantOptions,
|
|
29
|
+
...customOptions,
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
return customOptions;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export { nodeIterationExtractor };
|
|
37
|
+
//# sourceMappingURL=node-iteration-extractor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"node-iteration-extractor.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/node-iteration-extractor.ts"],"sourcesContent":["import { checkType } from \"@/lib\";\nimport type { NodeInterface } from \"@/types\";\nimport type { GraphState, NodeIterationPropsInterface } from \"../../types\";\n\nexport function nodeIterationExtractor<\n NodeData extends Record<string, unknown>,\n LinkData extends Record<string, unknown>,\n Result extends string | number | boolean | Record<string, unknown> | unknown[] | undefined | null,\n>(\n node: NodeInterface<NodeData>,\n i: number,\n nodes: NodeInterface<NodeData>[],\n state: GraphState<NodeData, LinkData>,\n option: NodeIterationPropsInterface<NodeData, LinkData, Result> | Result,\n optionConstantGetter: undefined,\n): Result;\nexport function nodeIterationExtractor<\n NodeData extends Record<string, unknown>,\n LinkData extends Record<string, unknown>,\n Result extends string | number | boolean | Record<string, unknown> | unknown[] | undefined | null,\n>(\n node: NodeInterface<NodeData>,\n i: number,\n nodes: NodeInterface<NodeData>[],\n state: GraphState<NodeData, LinkData>,\n option: NodeIterationPropsInterface<NodeData, LinkData, Result> | Result,\n optionConstantGetter: NodeIterationPropsInterface<NodeData, LinkData, Result> | Result,\n): Required<Result>;\nexport function nodeIterationExtractor<\n NodeData extends Record<string, unknown>,\n LinkData extends Record<string, unknown>,\n Result extends string | number | boolean | Record<string, unknown> | unknown[] | undefined | null,\n>(\n node: NodeInterface<NodeData>,\n i: number,\n nodes: NodeInterface<NodeData>[],\n state: GraphState<NodeData, LinkData>,\n option: NodeIterationPropsInterface<NodeData, LinkData, Result> | Result,\n optionConstantGetter:\n | NodeIterationPropsInterface<NodeData, LinkData, Result>\n | Result\n | undefined,\n) {\n let customOptions: Result | undefined;\n let constantOptions: Result | undefined;\n\n if (typeof option === \"function\") customOptions = option(node, i, nodes, state);\n else customOptions = option;\n\n if (customOptions && typeof customOptions === \"object\" && !Array.isArray(customOptions)) {\n for (const key in customOptions) {\n if (customOptions[key] === undefined) delete customOptions[key];\n }\n }\n\n if (optionConstantGetter) {\n if (typeof optionConstantGetter === \"function\")\n constantOptions = optionConstantGetter(node, i, nodes, state);\n else constantOptions = optionConstantGetter;\n\n if (\n constantOptions &&\n typeof constantOptions === \"object\" &&\n !Array.isArray(constantOptions) &&\n checkType<Record<string, unknown> | undefined>(\n customOptions,\n customOptions === undefined ||\n (typeof customOptions === \"object\" && !Array.isArray(customOptions)),\n )\n ) {\n return {\n ...(constantOptions as Record<string, unknown> | undefined),\n ...(customOptions as Record<string, unknown> | undefined),\n } as Result;\n }\n }\n\n return customOptions;\n}\n"],"names":[],"mappings":";;;AA4BgB,SAAA,sBAAsB,CAKpC,IAA6B,EAC7B,CAAS,EACT,KAAgC,EAChC,KAAqC,EACrC,MAAwE,EACxE,oBAGa,EAAA;AAEb,IAAA,IAAI,aAAiC;AACrC,IAAA,IAAI,eAAmC;IAEvC,IAAI,OAAO,MAAM,KAAK,UAAU;QAAE,aAAa,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC;;QAC1E,aAAa,GAAG,MAAM;AAE3B,IAAA,IAAI,aAAa,IAAI,OAAO,aAAa,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;AACvF,QAAA,KAAK,MAAM,GAAG,IAAI,aAAa,EAAE;AAC/B,YAAA,IAAI,aAAa,CAAC,GAAG,CAAC,KAAK,SAAS;AAAE,gBAAA,OAAO,aAAa,CAAC,GAAG,CAAC;;;IAInE,IAAI,oBAAoB,EAAE;QACxB,IAAI,OAAO,oBAAoB,KAAK,UAAU;YAC5C,eAAe,GAAG,oBAAoB,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC;;YAC1D,eAAe,GAAG,oBAAoB;AAE3C,QAAA,IACE,eAAe;YACf,OAAO,eAAe,KAAK,QAAQ;AACnC,YAAA,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC;AAC/B,YAAA,SAAS,CACP,aAAa,EACb,aAAa,KAAK,SAAS;AACzB,iBAAC,OAAO,aAAa,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CACvE,EACD;YACA,OAAO;AACL,gBAAA,GAAI,eAAuD;AAC3D,gBAAA,GAAI,aAAqD;aAChD;;;AAIf,IAAA,OAAO,aAAa;AACtB;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
function pointerGetter(mouseEvent, areaRect, areaTransform) {
|
|
2
|
+
const px = (mouseEvent.clientX - areaRect.left - areaTransform.x) / areaTransform.k;
|
|
3
|
+
const py = (mouseEvent.clientY - areaRect.top - areaTransform.y) / areaTransform.k;
|
|
4
|
+
return [px, py];
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export { pointerGetter };
|
|
8
|
+
//# sourceMappingURL=pointer-getter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pointer-getter.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/pointer-getter.ts"],"sourcesContent":["import type { ZoomTransform } from \"d3-zoom\";\n\nexport function pointerGetter(\n mouseEvent: MouseEvent,\n areaRect: DOMRect,\n areaTransform: ZoomTransform,\n) {\n const px = (mouseEvent.clientX - areaRect.left - areaTransform.x) / areaTransform.k;\n const py = (mouseEvent.clientY - areaRect.top - areaTransform.y) / areaTransform.k;\n\n return [px, py];\n}\n"],"names":[],"mappings":"SAEgB,aAAa,CAC3B,UAAsB,EACtB,QAAiB,EACjB,aAA4B,EAAA;AAE5B,IAAA,MAAM,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,GAAG,aAAa,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC;AACnF,IAAA,MAAM,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,GAAG,QAAQ,CAAC,GAAG,GAAG,aAAa,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC;AAElF,IAAA,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;AACjB;;;;"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { SimulationNodeDatum, SimulationLinkDatum, Simulation } from 'd3-force';
|
|
2
|
-
import { D3DragEvent } from 'd3-drag';
|
|
3
2
|
import { D3ZoomEvent, ZoomTransform } from 'd3-zoom';
|
|
3
|
+
import { D3DragEvent } from 'd3-drag';
|
|
4
4
|
|
|
5
5
|
interface NodeInterface<NodeData extends Record<string, unknown>> extends SimulationNodeDatum {
|
|
6
6
|
id: number | string;
|
|
7
7
|
linkCount?: number;
|
|
8
8
|
group?: number | string;
|
|
9
9
|
neighbors?: (string | number)[];
|
|
10
|
+
radius?: number;
|
|
11
|
+
name?: string;
|
|
10
12
|
data?: NodeData;
|
|
11
13
|
}
|
|
12
14
|
type CachedNodeTextInterface = Record<string | number, string[]>;
|
|
@@ -25,7 +27,7 @@ type ListenersInterface<NodeData extends Record<string, unknown>, LinkData exten
|
|
|
25
27
|
onMove?: (event: MouseEvent, node?: NodeInterface<NodeData>) => void;
|
|
26
28
|
onZoom?: (event: ZoomEventInterface) => void;
|
|
27
29
|
onDragSubject?: (event: DragEventInterface<NodeData>, transform: ZoomTransform, nodes: NodeInterface<NodeData>[]) => NodeInterface<NodeData> | undefined;
|
|
28
|
-
onDraw?: (
|
|
30
|
+
onDraw?: (state: GraphState<NodeData, LinkData>, toggleHighlightStatus: (status: boolean) => void, clearHighlightState: () => void) => void;
|
|
29
31
|
onStartDragFinished?: (event: DragEventInterface<NodeData>, simulations: GraphCanvasSimulation<NodeData, LinkData> | undefined, transform: ZoomTransform) => void;
|
|
30
32
|
onMoveDragFinished?: (event: DragEventInterface<NodeData>, simulations: GraphCanvasSimulation<NodeData, LinkData> | undefined, transform: ZoomTransform) => void;
|
|
31
33
|
onEndDragFinished?: (event: DragEventInterface<NodeData>, simulations: GraphCanvasSimulation<NodeData, LinkData> | undefined, transform: ZoomTransform) => void;
|
|
@@ -34,16 +36,25 @@ type ListenersInterface<NodeData extends Record<string, unknown>, LinkData exten
|
|
|
34
36
|
};
|
|
35
37
|
|
|
36
38
|
type GraphSettingsInterface<NodeData extends Record<string, unknown>> = {
|
|
39
|
+
highlightOnlyRoot?: boolean;
|
|
37
40
|
highlightFadingMin?: number;
|
|
41
|
+
highlightColorFadingMin?: number;
|
|
42
|
+
highlightTextFadingMin?: number;
|
|
43
|
+
highlightSizingAdditional?: number;
|
|
44
|
+
highlightTextSizingAdditional?: number;
|
|
45
|
+
highlightTextShiftXAdditional?: number;
|
|
46
|
+
highlightTextShiftYAdditional?: number;
|
|
47
|
+
highlightTextWeightAdditional?: number;
|
|
48
|
+
highlightTextWidthAdditional?: number;
|
|
38
49
|
highlightByHover?: boolean;
|
|
39
50
|
highlightDownStep?: number;
|
|
40
51
|
highlightUpStep?: number;
|
|
41
52
|
stickAfterDrag?: boolean;
|
|
42
53
|
zoomExtent?: [number, number];
|
|
43
54
|
zoomInitial?: {
|
|
44
|
-
k
|
|
45
|
-
x
|
|
46
|
-
y
|
|
55
|
+
k?: number;
|
|
56
|
+
x?: number;
|
|
57
|
+
y?: number;
|
|
47
58
|
} | null;
|
|
48
59
|
dragPlaceCoefficient?: (node: NodeInterface<NodeData>, pxEvent: number, pyEvent: number, radius: number) => number | undefined;
|
|
49
60
|
nodeRadiusInitial?: number;
|
|
@@ -57,14 +68,14 @@ type ForceSettingsInterface<NodeData extends Record<string, unknown>, LinkData e
|
|
|
57
68
|
nodes: number;
|
|
58
69
|
links: number;
|
|
59
70
|
};
|
|
60
|
-
collideRadius?: NodeIterationPropsInterface<NodeData> | number | null;
|
|
71
|
+
collideRadius?: NodeIterationPropsInterface<NodeData, LinkData> | number | null;
|
|
61
72
|
collideAdditionalRadius?: number;
|
|
62
73
|
collideStrength?: number;
|
|
63
74
|
collideIterations?: number;
|
|
64
75
|
linkDistance?: LinkIterationPropsInterface<NodeData, LinkData> | number;
|
|
65
76
|
linkStrength?: LinkIterationPropsInterface<NodeData, LinkData> | number;
|
|
66
77
|
linkIterations?: number;
|
|
67
|
-
chargeStrength?: NodeIterationPropsInterface<NodeData> | number;
|
|
78
|
+
chargeStrength?: NodeIterationPropsInterface<NodeData, LinkData> | number;
|
|
68
79
|
chargeDistanceMax?: number;
|
|
69
80
|
chargeDistanceMin?: number;
|
|
70
81
|
centerPosition?: {
|
|
@@ -72,16 +83,21 @@ type ForceSettingsInterface<NodeData extends Record<string, unknown>, LinkData e
|
|
|
72
83
|
y?: number;
|
|
73
84
|
};
|
|
74
85
|
centerStrength?: number;
|
|
75
|
-
xForce?: NodeIterationPropsInterface<NodeData> | number;
|
|
76
|
-
xStrength?: NodeIterationPropsInterface<NodeData> | number;
|
|
77
|
-
yForce?: NodeIterationPropsInterface<NodeData> | number;
|
|
78
|
-
yStrength?: NodeIterationPropsInterface<NodeData> | number;
|
|
86
|
+
xForce?: NodeIterationPropsInterface<NodeData, LinkData> | number;
|
|
87
|
+
xStrength?: NodeIterationPropsInterface<NodeData, LinkData> | number;
|
|
88
|
+
yForce?: NodeIterationPropsInterface<NodeData, LinkData> | number;
|
|
89
|
+
yStrength?: NodeIterationPropsInterface<NodeData, LinkData> | number;
|
|
79
90
|
};
|
|
80
|
-
type NodeSettingsInterface<NodeData extends Record<string, unknown>> = {
|
|
81
|
-
idGetter?: NodeIterationPropsInterface<NodeData, string | number>;
|
|
82
|
-
options?: NodeIterationPropsInterface<NodeData, NodeOptionsInterface> | NodeOptionsInterface;
|
|
91
|
+
type NodeSettingsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
|
|
92
|
+
idGetter?: NodeIterationPropsInterface<NodeData, LinkData, string | number>;
|
|
93
|
+
options?: NodeIterationPropsInterface<NodeData, LinkData, NodeOptionsInterface> | NodeOptionsInterface;
|
|
83
94
|
};
|
|
84
95
|
type NodeOptionsInterface = {
|
|
96
|
+
highlightFading?: boolean;
|
|
97
|
+
highlightSizing?: boolean;
|
|
98
|
+
highlightTextFading?: boolean;
|
|
99
|
+
highlightTextSizing?: boolean;
|
|
100
|
+
highlightColor?: boolean;
|
|
85
101
|
borderColor?: string;
|
|
86
102
|
borderWidth?: number;
|
|
87
103
|
radius?: number;
|
|
@@ -90,6 +106,7 @@ type NodeOptionsInterface = {
|
|
|
90
106
|
color?: string;
|
|
91
107
|
textVisible?: boolean;
|
|
92
108
|
text?: string | null;
|
|
109
|
+
textAlpha?: number;
|
|
93
110
|
textShiftY?: number;
|
|
94
111
|
textShiftX?: number;
|
|
95
112
|
textFont?: string;
|
|
@@ -98,10 +115,10 @@ type NodeOptionsInterface = {
|
|
|
98
115
|
textAlign?: CanvasTextAlign;
|
|
99
116
|
textWidth?: number;
|
|
100
117
|
textStyle?: TextStyleEnum;
|
|
101
|
-
textWeight?:
|
|
118
|
+
textWeight?: number;
|
|
102
119
|
textGap?: number;
|
|
103
120
|
};
|
|
104
|
-
type NodeIterationPropsInterface<NodeData extends Record<string, unknown>, Return = number> = (node: NodeInterface<NodeData>, i: number, nodes: NodeInterface<NodeData>[],
|
|
121
|
+
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;
|
|
105
122
|
type LinkSettingsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
|
|
106
123
|
options?: LinkIterationPropsInterface<NodeData, LinkData, LinkOptionsInterface> | LinkOptionsInterface;
|
|
107
124
|
};
|
|
@@ -109,10 +126,11 @@ type LinkOptionsInterface = {
|
|
|
109
126
|
alpha?: number;
|
|
110
127
|
color?: string;
|
|
111
128
|
width?: number;
|
|
129
|
+
highlightFading?: boolean;
|
|
130
|
+
pretty?: boolean;
|
|
112
131
|
};
|
|
113
|
-
type LinkIterationPropsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>, Return = number> = (link: LinkInterface<NodeData, LinkData>, i: number, links: LinkInterface<NodeData, LinkData>[],
|
|
132
|
+
type LinkIterationPropsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>, Return = number> = (link: LinkInterface<NodeData, LinkData>, i: number, links: LinkInterface<NodeData, LinkData>[], state?: GraphState<NodeData, LinkData>) => Return;
|
|
114
133
|
type TextStyleEnum = "normal" | "italic" | "oblique";
|
|
115
|
-
type TextWeightEnum = "normal" | "bold" | "bolder" | "lighter" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
|
|
116
134
|
|
|
117
135
|
type GraphCanvasInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
|
|
118
136
|
nodes: NodeInterface<NodeData>[];
|
|
@@ -120,11 +138,38 @@ type GraphCanvasInterface<NodeData extends Record<string, unknown>, LinkData ext
|
|
|
120
138
|
root: HTMLElement;
|
|
121
139
|
graphSettings?: GraphSettingsInterface<NodeData>;
|
|
122
140
|
forceSettings?: ForceSettingsInterface<NodeData, LinkData>;
|
|
123
|
-
nodeSettings?: NodeSettingsInterface<NodeData>;
|
|
141
|
+
nodeSettings?: NodeSettingsInterface<NodeData, LinkData>;
|
|
124
142
|
linkSettings?: LinkSettingsInterface<NodeData, LinkData>;
|
|
125
143
|
listeners?: ListenersInterface<NodeData, LinkData>;
|
|
126
144
|
};
|
|
127
145
|
type GraphCanvasSimulation<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = Simulation<NodeInterface<NodeData>, LinkInterface<NodeData, LinkData>>;
|
|
146
|
+
type GraphState<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
|
|
147
|
+
context: CanvasRenderingContext2D | null | undefined;
|
|
148
|
+
simulation: GraphCanvasSimulation<NodeData, LinkData> | undefined;
|
|
149
|
+
areaTransform: ZoomTransform;
|
|
150
|
+
eventAbortController: AbortController;
|
|
151
|
+
cachedNodeText: CachedNodeTextInterface;
|
|
152
|
+
simulationWorking: boolean;
|
|
153
|
+
isDragging: boolean;
|
|
154
|
+
highlightedNode: NodeInterface<NodeData> | null;
|
|
155
|
+
highlightedNeighbors: Set<string | number> | null;
|
|
156
|
+
highlightProgress: number;
|
|
157
|
+
highlightWorking: boolean;
|
|
158
|
+
highlightDrawing: boolean;
|
|
159
|
+
width: number;
|
|
160
|
+
height: number;
|
|
161
|
+
nodes: NodeInterface<NodeData>[];
|
|
162
|
+
links: LinkInterface<NodeData, LinkData>[];
|
|
163
|
+
graphSettings: Required<GraphSettingsInterface<NodeData>>;
|
|
164
|
+
forceSettings: Required<ForceSettingsInterface<NodeData, LinkData>>;
|
|
165
|
+
nodeSettings: Required<Omit<NodeSettingsInterface<NodeData, LinkData>, "options">> & Pick<NodeSettingsInterface<NodeData, LinkData>, "options">;
|
|
166
|
+
linkSettings: Required<Omit<LinkSettingsInterface<NodeData, LinkData>, "options">> & Pick<LinkSettingsInterface<NodeData, LinkData>, "options">;
|
|
167
|
+
};
|
|
168
|
+
type RGB = {
|
|
169
|
+
r: number;
|
|
170
|
+
g: number;
|
|
171
|
+
b: number;
|
|
172
|
+
};
|
|
128
173
|
|
|
129
174
|
declare class GraphCanvas<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> {
|
|
130
175
|
/** initial data */
|
|
@@ -135,7 +180,6 @@ declare class GraphCanvas<NodeData extends Record<string, unknown>, LinkData ext
|
|
|
135
180
|
private root;
|
|
136
181
|
private container;
|
|
137
182
|
private area;
|
|
138
|
-
private dpi;
|
|
139
183
|
/** settings */
|
|
140
184
|
private graphSettings;
|
|
141
185
|
private forceSettings;
|
|
@@ -150,14 +194,16 @@ declare class GraphCanvas<NodeData extends Record<string, unknown>, LinkData ext
|
|
|
150
194
|
private draw;
|
|
151
195
|
private eventAbortController;
|
|
152
196
|
private cachedNodeText;
|
|
153
|
-
private simulationWorking;
|
|
154
197
|
private isDragging;
|
|
155
198
|
private highlightedNode;
|
|
156
199
|
private highlightedNeighbors;
|
|
157
|
-
private
|
|
158
|
-
private
|
|
200
|
+
private highlightProgress;
|
|
201
|
+
private highlightWorking;
|
|
159
202
|
private highlightDrawing;
|
|
203
|
+
private get simulationWorking();
|
|
204
|
+
private get state();
|
|
160
205
|
constructor({ links, nodes, root, forceSettings, linkSettings, listeners, nodeSettings, graphSettings, }: GraphCanvasInterface<NodeData, LinkData>);
|
|
206
|
+
get dpi(): number;
|
|
161
207
|
getData(): Pick<GraphCanvasInterface<NodeData, LinkData>, "nodes" | "links">;
|
|
162
208
|
changeData(options: Pick<Partial<GraphCanvasInterface<NodeData, LinkData>>, "links" | "nodes">, alpha?: number): void;
|
|
163
209
|
changeSettings(options: Omit<Partial<GraphCanvasInterface<NodeData, LinkData>>, "links" | "nodes" | "listeners">): undefined;
|
|
@@ -167,6 +213,7 @@ declare class GraphCanvas<NodeData extends Record<string, unknown>, LinkData ext
|
|
|
167
213
|
stop(): void;
|
|
168
214
|
create(): void;
|
|
169
215
|
destroy(): void;
|
|
216
|
+
private clearHTMLElements;
|
|
170
217
|
private updateSimulation;
|
|
171
218
|
private clearState;
|
|
172
219
|
private clearDataDependencies;
|
|
@@ -184,4 +231,59 @@ declare class GraphCanvas<NodeData extends Record<string, unknown>, LinkData ext
|
|
|
184
231
|
private initZoom;
|
|
185
232
|
}
|
|
186
233
|
|
|
187
|
-
|
|
234
|
+
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>;
|
|
235
|
+
|
|
236
|
+
declare function nodeOptionsGetter<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(node: NodeInterface<NodeData>, _: number, __: NodeInterface<NodeData>[], state?: GraphState<NodeData, LinkData>): Required<NodeOptionsInterface>;
|
|
237
|
+
type NodeRadiusGetterOptions = {
|
|
238
|
+
linkCount: number | undefined;
|
|
239
|
+
radiusFlexible: boolean;
|
|
240
|
+
radiusCoefficient: number;
|
|
241
|
+
radiusFactor: number;
|
|
242
|
+
radiusInitial: number;
|
|
243
|
+
};
|
|
244
|
+
declare function nodeRadiusGetter({ radiusFlexible, radiusInitial, linkCount, radiusCoefficient, radiusFactor, }: NodeRadiusGetterOptions): number;
|
|
245
|
+
|
|
246
|
+
declare function linkIterationExtractor<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>, Result extends string | number | boolean | Record<string, unknown> | unknown[]>(link: LinkInterface<NodeData, LinkData>, i: number, links: LinkInterface<NodeData, LinkData>[], state: GraphState<NodeData, LinkData>, option: LinkIterationPropsInterface<NodeData, LinkData, Result> | Result, optionConstantGetter: undefined): Result;
|
|
247
|
+
declare function linkIterationExtractor<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>, Result extends string | number | boolean | Record<string, unknown> | unknown[]>(link: LinkInterface<NodeData, LinkData>, i: number, links: LinkInterface<NodeData, LinkData>[], state: GraphState<NodeData, LinkData>, option: LinkIterationPropsInterface<NodeData, LinkData, Result> | Result, optionConstantGetter: LinkIterationPropsInterface<NodeData, LinkData, Required<Result>> | Required<Result>): Required<Result>;
|
|
248
|
+
|
|
249
|
+
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;
|
|
250
|
+
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>;
|
|
251
|
+
|
|
252
|
+
type DrawTextOptions = {
|
|
253
|
+
id: string | number;
|
|
254
|
+
x: number;
|
|
255
|
+
y: number;
|
|
256
|
+
text: string;
|
|
257
|
+
textSize: number;
|
|
258
|
+
textStyle: TextStyleEnum;
|
|
259
|
+
textWeight: number;
|
|
260
|
+
textFont: string;
|
|
261
|
+
textColor: string;
|
|
262
|
+
textGap: number;
|
|
263
|
+
textAlign: CanvasTextAlign;
|
|
264
|
+
context: CanvasRenderingContext2D;
|
|
265
|
+
cachedNodeText: CachedNodeTextInterface;
|
|
266
|
+
maxWidth?: number;
|
|
267
|
+
};
|
|
268
|
+
declare function drawText({ context, id, textAlign, textColor, textFont, textStyle, textGap, textWeight, textSize, text, x, y, cachedNodeText, maxWidth, }: DrawTextOptions): void;
|
|
269
|
+
|
|
270
|
+
declare function calculateLinkPositionByRadius<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(link: LinkInterface<NodeData, LinkData>): {
|
|
271
|
+
x1: number;
|
|
272
|
+
y1: number;
|
|
273
|
+
x2: number;
|
|
274
|
+
y2: number;
|
|
275
|
+
} | null;
|
|
276
|
+
|
|
277
|
+
declare function colorToRgb(color: string): string | null;
|
|
278
|
+
|
|
279
|
+
declare function extractRgb(color: string | null): {
|
|
280
|
+
r: number;
|
|
281
|
+
g: number;
|
|
282
|
+
b: number;
|
|
283
|
+
} | null;
|
|
284
|
+
|
|
285
|
+
declare function fadeRgb(color: RGB, fade: number): RGB;
|
|
286
|
+
|
|
287
|
+
declare function rgbAnimationByProgress(start: RGB, end: RGB, progress: number): RGB;
|
|
288
|
+
|
|
289
|
+
export { type CachedNodeTextInterface, type DragEventInterface, type ForceSettingsInterface, GraphCanvas, type GraphCanvasInterface, type GraphCanvasSimulation, 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, calculateLinkPositionByRadius, colorToRgb, drawText, extractRgb, fadeRgb, linkIterationExtractor, linkOptionsGetter, nodeIterationExtractor, nodeOptionsGetter, nodeRadiusGetter, rgbAnimationByProgress };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@krainovsd/graph",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "Krainov graph",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "KrainovSD <denislosev48@gmail.com>",
|
|
@@ -28,38 +28,29 @@
|
|
|
28
28
|
],
|
|
29
29
|
"scripts": {
|
|
30
30
|
"publish-package": "npm run lint && npm run build && npm publish",
|
|
31
|
-
"dev": "vite",
|
|
32
|
-
"
|
|
31
|
+
"dev": "vite --host",
|
|
32
|
+
"clear": "rm -rf ./lib",
|
|
33
|
+
"build-dev": "vite build",
|
|
33
34
|
"build": "npm run clear && npm run build:types && npm run build:js",
|
|
34
|
-
"build
|
|
35
|
-
"build:js
|
|
35
|
+
"build-singleton": "rm -rf dist && rollup --config rollup-singleton.config.ts --configPlugin @rollup/plugin-typescript --no-stdin --environment BUILD:production,NODE_ENV:production",
|
|
36
|
+
"build:js": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript --no-stdin --environment BUILD:production,NODE_ENV:production",
|
|
36
37
|
"build:types": "tspc -p tsconfig.build.json",
|
|
37
|
-
"lint": "eslint
|
|
38
|
-
"lint
|
|
39
|
-
"
|
|
40
|
-
"format": "prettier --
|
|
38
|
+
"lint": "eslint . -c ./eslint.config.js --color --max-warnings 0",
|
|
39
|
+
"lint-check": "eslint --debug eslint.config.js",
|
|
40
|
+
"format": "prettier --write 'src/**/*.{js,ts,tsx,scss,css,json}'",
|
|
41
|
+
"format-check": "prettier --check ./src",
|
|
42
|
+
"lint-debug": "npx eslint --print-config eslint.config.js > eslint-config-rules.json",
|
|
43
|
+
"type-debug": "tsc --showConfig > typescript-config.json"
|
|
41
44
|
},
|
|
42
45
|
"devDependencies": {
|
|
43
|
-
"@krainovsd/
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"rollup-plugin-bundle-stats": "4.17.0",
|
|
50
|
-
"rollup-plugin-visualizer": "5.12.0",
|
|
51
|
-
"rollup": "4.21.2",
|
|
52
|
-
"@types/rollup-plugin-peer-deps-external": "2.2.5",
|
|
53
|
-
"rollup-plugin-peer-deps-external": "2.2.4",
|
|
54
|
-
"@trivago/prettier-plugin-sort-imports": "4.3.0",
|
|
55
|
-
"@types/node": "22.8.6",
|
|
56
|
-
"eslint": "9.17.0",
|
|
57
|
-
"prettier": "3.3.3",
|
|
46
|
+
"@krainovsd/presets": "0.2.0",
|
|
47
|
+
"eslint": "9.21.0",
|
|
48
|
+
"prettier": "3.5.2",
|
|
49
|
+
"rollup": "4.34.9",
|
|
50
|
+
"typescript": "5.7.3",
|
|
51
|
+
"typescript-transform-paths": "3.5.3",
|
|
58
52
|
"ts-patch": "3.3.0",
|
|
59
|
-
"
|
|
60
|
-
"typescript-transform-paths": "3.5.2",
|
|
61
|
-
"pixi-viewport": "6.0.3",
|
|
62
|
-
"pixi.js": "8.6.6",
|
|
53
|
+
"@types/node": "22.8.6",
|
|
63
54
|
"@types/d3-selection": "3.0.11",
|
|
64
55
|
"@types/d3-drag": "3.0.7",
|
|
65
56
|
"@types/d3-array": "3.2.1",
|
|
@@ -67,6 +58,7 @@
|
|
|
67
58
|
"@types/lodash": "4.17.14"
|
|
68
59
|
},
|
|
69
60
|
"dependencies": {
|
|
61
|
+
"@krainovsd/js-helpers": "0.12.0",
|
|
70
62
|
"@types/d3-zoom": "3.0.8",
|
|
71
63
|
"@types/d3-force": "3.0.10",
|
|
72
64
|
"@types/d3-drag": "3.0.7",
|