polly-graph 0.1.3 → 0.1.5
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 +82 -159
- package/dist/index.cjs +314 -299
- package/dist/index.css +221 -32
- package/dist/index.d.cts +30 -3
- package/dist/index.d.ts +30 -3
- package/dist/index.js +304 -299
- package/package.json +3 -2
package/dist/index.css
CHANGED
|
@@ -1,3 +1,204 @@
|
|
|
1
|
+
/* src/styles/graph-controls.css */
|
|
2
|
+
.pg-controls {
|
|
3
|
+
position: absolute;
|
|
4
|
+
display: flex;
|
|
5
|
+
background: #ffffff;
|
|
6
|
+
border-radius: 12px;
|
|
7
|
+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
|
|
8
|
+
pointer-events: auto;
|
|
9
|
+
z-index: 20;
|
|
10
|
+
width: max-content;
|
|
11
|
+
--pg-offset: 16px;
|
|
12
|
+
}
|
|
13
|
+
.pg-pos-top-left {
|
|
14
|
+
top: var(--pg-offset);
|
|
15
|
+
left: var(--pg-offset);
|
|
16
|
+
bottom: auto;
|
|
17
|
+
right: auto;
|
|
18
|
+
}
|
|
19
|
+
.pg-pos-top-right {
|
|
20
|
+
top: var(--pg-offset);
|
|
21
|
+
right: var(--pg-offset);
|
|
22
|
+
bottom: auto;
|
|
23
|
+
left: auto;
|
|
24
|
+
}
|
|
25
|
+
.pg-pos-bottom-left {
|
|
26
|
+
bottom: var(--pg-offset);
|
|
27
|
+
left: var(--pg-offset);
|
|
28
|
+
top: auto;
|
|
29
|
+
right: auto;
|
|
30
|
+
}
|
|
31
|
+
.pg-pos-bottom-right {
|
|
32
|
+
bottom: var(--pg-offset);
|
|
33
|
+
right: var(--pg-offset);
|
|
34
|
+
top: auto;
|
|
35
|
+
left: auto;
|
|
36
|
+
}
|
|
37
|
+
.pg-orient-vertical {
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
}
|
|
40
|
+
.pg-orient-horizontal {
|
|
41
|
+
flex-direction: row;
|
|
42
|
+
}
|
|
43
|
+
.pg-control-btn {
|
|
44
|
+
all: unset;
|
|
45
|
+
width: 44px;
|
|
46
|
+
height: 44px;
|
|
47
|
+
display: flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
transition: background 120ms ease;
|
|
52
|
+
}
|
|
53
|
+
.pg-control-btn:hover {
|
|
54
|
+
background: #f9fafb;
|
|
55
|
+
}
|
|
56
|
+
.pg-orient-vertical .pg-control-btn:not(:last-child) {
|
|
57
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
58
|
+
}
|
|
59
|
+
.pg-orient-horizontal .pg-control-btn:not(:last-child) {
|
|
60
|
+
border-right: 1px solid rgba(0, 0, 0, 0.06);
|
|
61
|
+
}
|
|
62
|
+
.pg-control-btn svg.pg-icon {
|
|
63
|
+
width: 18px;
|
|
64
|
+
height: 18px;
|
|
65
|
+
stroke: #475569;
|
|
66
|
+
stroke-width: 2;
|
|
67
|
+
fill: none;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* src/styles/graph-legends.css */
|
|
71
|
+
.pg-legend {
|
|
72
|
+
position: absolute;
|
|
73
|
+
pointer-events: auto;
|
|
74
|
+
background: #ffffff;
|
|
75
|
+
border: 1px solid #e2e8f0;
|
|
76
|
+
border-radius: 12px;
|
|
77
|
+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
|
|
78
|
+
min-width: 180px;
|
|
79
|
+
max-width: 280px;
|
|
80
|
+
z-index: 20;
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
85
|
+
--pg-offset-x: 16px;
|
|
86
|
+
--pg-offset-y: 16px;
|
|
87
|
+
}
|
|
88
|
+
.pg-legend.pg-pos-top-left {
|
|
89
|
+
top: var(--pg-offset-y);
|
|
90
|
+
left: var(--pg-offset-x);
|
|
91
|
+
bottom: auto;
|
|
92
|
+
right: auto;
|
|
93
|
+
}
|
|
94
|
+
.pg-legend.pg-pos-top-right {
|
|
95
|
+
top: var(--pg-offset-y);
|
|
96
|
+
right: var(--pg-offset-x);
|
|
97
|
+
bottom: auto;
|
|
98
|
+
left: auto;
|
|
99
|
+
}
|
|
100
|
+
.pg-legend.pg-pos-bottom-left {
|
|
101
|
+
bottom: var(--pg-offset-y);
|
|
102
|
+
left: var(--pg-offset-x);
|
|
103
|
+
top: auto;
|
|
104
|
+
right: auto;
|
|
105
|
+
}
|
|
106
|
+
.pg-legend.pg-pos-bottom-right {
|
|
107
|
+
bottom: var(--pg-offset-y);
|
|
108
|
+
right: var(--pg-offset-x);
|
|
109
|
+
top: auto;
|
|
110
|
+
left: auto;
|
|
111
|
+
}
|
|
112
|
+
.pg-legend-toggle {
|
|
113
|
+
all: unset;
|
|
114
|
+
position: absolute;
|
|
115
|
+
top: 6px;
|
|
116
|
+
right: 6px;
|
|
117
|
+
width: 32px;
|
|
118
|
+
height: 32px;
|
|
119
|
+
display: flex;
|
|
120
|
+
align-items: center;
|
|
121
|
+
justify-content: center;
|
|
122
|
+
cursor: pointer;
|
|
123
|
+
border-radius: 8px;
|
|
124
|
+
z-index: 30;
|
|
125
|
+
transition: background-color 0.2s ease;
|
|
126
|
+
}
|
|
127
|
+
.pg-legend-toggle:hover {
|
|
128
|
+
background-color: #f1f5f9;
|
|
129
|
+
}
|
|
130
|
+
.pg-legend-toggle .pg-icon {
|
|
131
|
+
width: 18px;
|
|
132
|
+
height: 18px;
|
|
133
|
+
stroke: #64748b;
|
|
134
|
+
stroke-width: 2;
|
|
135
|
+
fill: none;
|
|
136
|
+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
137
|
+
}
|
|
138
|
+
[class*=-left] .pg-legend-toggle .pg-icon {
|
|
139
|
+
transform: rotate(180deg);
|
|
140
|
+
}
|
|
141
|
+
[class*=-left].pg-is-collapsed .pg-legend-toggle .pg-icon {
|
|
142
|
+
transform: rotate(0deg);
|
|
143
|
+
}
|
|
144
|
+
[class*=-right] .pg-legend-toggle .pg-icon {
|
|
145
|
+
transform: rotate(0deg);
|
|
146
|
+
}
|
|
147
|
+
[class*=-right].pg-is-collapsed .pg-legend-toggle .pg-icon {
|
|
148
|
+
transform: rotate(180deg);
|
|
149
|
+
}
|
|
150
|
+
.pg-legend-body {
|
|
151
|
+
padding: 1rem;
|
|
152
|
+
opacity: 1;
|
|
153
|
+
transition: opacity 0.15s ease;
|
|
154
|
+
position: relative;
|
|
155
|
+
z-index: 10;
|
|
156
|
+
}
|
|
157
|
+
.pg-legend-list {
|
|
158
|
+
list-style: none;
|
|
159
|
+
margin: 0;
|
|
160
|
+
padding: 0;
|
|
161
|
+
display: flex;
|
|
162
|
+
flex-direction: column;
|
|
163
|
+
gap: 12px;
|
|
164
|
+
}
|
|
165
|
+
.pg-legend-item:first-child {
|
|
166
|
+
padding-right: 32px;
|
|
167
|
+
}
|
|
168
|
+
.pg-legend-item {
|
|
169
|
+
display: flex;
|
|
170
|
+
align-items: center;
|
|
171
|
+
gap: 12px;
|
|
172
|
+
font-size: 0.8125rem;
|
|
173
|
+
color: #475569;
|
|
174
|
+
white-space: nowrap;
|
|
175
|
+
}
|
|
176
|
+
.pg-legend-swatch {
|
|
177
|
+
width: 14px;
|
|
178
|
+
height: 14px;
|
|
179
|
+
flex-shrink: 0;
|
|
180
|
+
display: inline-block;
|
|
181
|
+
}
|
|
182
|
+
.pg-legend-swatch.is-circle {
|
|
183
|
+
border-radius: 50%;
|
|
184
|
+
}
|
|
185
|
+
.pg-legend-swatch.is-rect {
|
|
186
|
+
border-radius: 3px;
|
|
187
|
+
}
|
|
188
|
+
.pg-is-collapsed {
|
|
189
|
+
min-width: 44px;
|
|
190
|
+
max-width: 44px;
|
|
191
|
+
height: 44px;
|
|
192
|
+
}
|
|
193
|
+
.pg-is-collapsed .pg-legend-body {
|
|
194
|
+
opacity: 0;
|
|
195
|
+
pointer-events: none;
|
|
196
|
+
overflow: hidden;
|
|
197
|
+
height: 0;
|
|
198
|
+
padding: 0;
|
|
199
|
+
visibility: hidden;
|
|
200
|
+
}
|
|
201
|
+
|
|
1
202
|
/* src/styles/graph-tooltip.css */
|
|
2
203
|
.graph-tooltip {
|
|
3
204
|
position: absolute;
|
|
@@ -82,42 +283,30 @@
|
|
|
82
283
|
color: #ffffff;
|
|
83
284
|
}
|
|
84
285
|
|
|
85
|
-
/* src/styles/graph
|
|
86
|
-
.pg-
|
|
87
|
-
|
|
88
|
-
border-radius: 12px;
|
|
89
|
-
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.06);
|
|
90
|
-
display: flex;
|
|
91
|
-
flex-direction: column;
|
|
286
|
+
/* src/styles/graph.css */
|
|
287
|
+
.pg-root {
|
|
288
|
+
position: relative;
|
|
92
289
|
overflow: hidden;
|
|
290
|
+
width: 100%;
|
|
291
|
+
height: 100%;
|
|
292
|
+
}
|
|
293
|
+
.pg-canvas {
|
|
294
|
+
display: block;
|
|
295
|
+
width: 100%;
|
|
296
|
+
height: 100%;
|
|
297
|
+
}
|
|
298
|
+
.pg-overlay {
|
|
93
299
|
position: absolute;
|
|
300
|
+
inset: 0;
|
|
301
|
+
pointer-events: none;
|
|
94
302
|
z-index: 10;
|
|
95
303
|
}
|
|
96
|
-
.pg-
|
|
97
|
-
all: unset;
|
|
98
|
-
align-items: center;
|
|
99
|
-
background: transparent;
|
|
100
|
-
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
304
|
+
.pg-layer-nodes circle {
|
|
101
305
|
cursor: pointer;
|
|
102
|
-
|
|
103
|
-
justify-content: center;
|
|
104
|
-
transition: background 120ms ease, transform 80ms ease;
|
|
105
|
-
height: 44px;
|
|
106
|
-
width: 44px;
|
|
107
|
-
}
|
|
108
|
-
.pg-controls button:last-child {
|
|
109
|
-
border-bottom: none;
|
|
110
|
-
}
|
|
111
|
-
.pg-controls button:hover {
|
|
112
|
-
background: #f9fafb;
|
|
306
|
+
transition: r 0.2s ease, stroke-width 0.2s ease;
|
|
113
307
|
}
|
|
114
|
-
.pg-
|
|
115
|
-
|
|
116
|
-
}
|
|
117
|
-
.pg-controls button svg.pg-icon {
|
|
118
|
-
display: block;
|
|
119
|
-
fill: none;
|
|
120
|
-
height: 18px;
|
|
121
|
-
stroke: currentColor;
|
|
122
|
-
width: 18px;
|
|
308
|
+
.pg-layer-links line {
|
|
309
|
+
transition: stroke-opacity 0.2s ease;
|
|
123
310
|
}
|
|
311
|
+
|
|
312
|
+
/* src/styles/main.css */
|
package/dist/index.d.cts
CHANGED
|
@@ -4,9 +4,11 @@ interface Coordinates {
|
|
|
4
4
|
readonly x: number;
|
|
5
5
|
readonly y: number;
|
|
6
6
|
}
|
|
7
|
+
type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
8
|
+
type Orientation = 'vertical' | 'horizontal';
|
|
7
9
|
|
|
8
|
-
type GraphControlsPosition =
|
|
9
|
-
type GraphControlsOrientation =
|
|
10
|
+
type GraphControlsPosition = Position;
|
|
11
|
+
type GraphControlsOrientation = Orientation;
|
|
10
12
|
interface GraphControlsConfig {
|
|
11
13
|
readonly enabled: boolean;
|
|
12
14
|
readonly position?: GraphControlsPosition;
|
|
@@ -20,6 +22,21 @@ interface GraphControlsConfig {
|
|
|
20
22
|
};
|
|
21
23
|
}
|
|
22
24
|
|
|
25
|
+
interface LegendItem {
|
|
26
|
+
label: string;
|
|
27
|
+
color: string;
|
|
28
|
+
shape?: 'circle' | 'rect';
|
|
29
|
+
}
|
|
30
|
+
type LegendPosition = Position;
|
|
31
|
+
interface LegendConfig {
|
|
32
|
+
readonly enabled?: boolean;
|
|
33
|
+
readonly title?: string;
|
|
34
|
+
readonly position?: LegendPosition;
|
|
35
|
+
readonly items: LegendItem[];
|
|
36
|
+
readonly collapsible?: boolean;
|
|
37
|
+
readonly defaultExpanded?: boolean;
|
|
38
|
+
}
|
|
39
|
+
|
|
23
40
|
interface GraphNode extends SimulationNodeDatum {
|
|
24
41
|
readonly id: string;
|
|
25
42
|
readonly type: string;
|
|
@@ -49,6 +66,7 @@ interface LinkArrowStyle {
|
|
|
49
66
|
}
|
|
50
67
|
interface LinkLabelStyle {
|
|
51
68
|
readonly enabled?: boolean;
|
|
69
|
+
readonly visibility?: 'always' | 'hover' | 'selection';
|
|
52
70
|
readonly backgroundFill?: string;
|
|
53
71
|
readonly borderColor?: string;
|
|
54
72
|
readonly borderWidth?: number;
|
|
@@ -97,11 +115,19 @@ interface GraphInteractionConfig {
|
|
|
97
115
|
readonly selection?: SelectionInteractionConfig;
|
|
98
116
|
}
|
|
99
117
|
interface GraphConfig {
|
|
100
|
-
readonly container:
|
|
118
|
+
readonly container: HTMLElement;
|
|
101
119
|
readonly nodes: GraphNode[];
|
|
102
120
|
readonly links: GraphLink[];
|
|
121
|
+
readonly autoFit?: boolean;
|
|
122
|
+
readonly responsive?: boolean;
|
|
123
|
+
readonly simulation?: {
|
|
124
|
+
readonly alpha?: number;
|
|
125
|
+
readonly gravity?: number;
|
|
126
|
+
readonly linkDistance?: number | ((link: GraphLink) => number);
|
|
127
|
+
};
|
|
103
128
|
readonly interaction?: GraphInteractionConfig;
|
|
104
129
|
readonly controls?: GraphControlsConfig;
|
|
130
|
+
readonly legend?: LegendConfig;
|
|
105
131
|
}
|
|
106
132
|
|
|
107
133
|
interface GraphInstance {
|
|
@@ -111,6 +137,7 @@ interface GraphInstance {
|
|
|
111
137
|
resetView(): void;
|
|
112
138
|
fitView(): void;
|
|
113
139
|
destroy(): void;
|
|
140
|
+
exportGraph(fileName?: string): void;
|
|
114
141
|
}
|
|
115
142
|
|
|
116
143
|
declare function createGraph(config: GraphConfig): GraphInstance;
|
package/dist/index.d.ts
CHANGED
|
@@ -4,9 +4,11 @@ interface Coordinates {
|
|
|
4
4
|
readonly x: number;
|
|
5
5
|
readonly y: number;
|
|
6
6
|
}
|
|
7
|
+
type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
8
|
+
type Orientation = 'vertical' | 'horizontal';
|
|
7
9
|
|
|
8
|
-
type GraphControlsPosition =
|
|
9
|
-
type GraphControlsOrientation =
|
|
10
|
+
type GraphControlsPosition = Position;
|
|
11
|
+
type GraphControlsOrientation = Orientation;
|
|
10
12
|
interface GraphControlsConfig {
|
|
11
13
|
readonly enabled: boolean;
|
|
12
14
|
readonly position?: GraphControlsPosition;
|
|
@@ -20,6 +22,21 @@ interface GraphControlsConfig {
|
|
|
20
22
|
};
|
|
21
23
|
}
|
|
22
24
|
|
|
25
|
+
interface LegendItem {
|
|
26
|
+
label: string;
|
|
27
|
+
color: string;
|
|
28
|
+
shape?: 'circle' | 'rect';
|
|
29
|
+
}
|
|
30
|
+
type LegendPosition = Position;
|
|
31
|
+
interface LegendConfig {
|
|
32
|
+
readonly enabled?: boolean;
|
|
33
|
+
readonly title?: string;
|
|
34
|
+
readonly position?: LegendPosition;
|
|
35
|
+
readonly items: LegendItem[];
|
|
36
|
+
readonly collapsible?: boolean;
|
|
37
|
+
readonly defaultExpanded?: boolean;
|
|
38
|
+
}
|
|
39
|
+
|
|
23
40
|
interface GraphNode extends SimulationNodeDatum {
|
|
24
41
|
readonly id: string;
|
|
25
42
|
readonly type: string;
|
|
@@ -49,6 +66,7 @@ interface LinkArrowStyle {
|
|
|
49
66
|
}
|
|
50
67
|
interface LinkLabelStyle {
|
|
51
68
|
readonly enabled?: boolean;
|
|
69
|
+
readonly visibility?: 'always' | 'hover' | 'selection';
|
|
52
70
|
readonly backgroundFill?: string;
|
|
53
71
|
readonly borderColor?: string;
|
|
54
72
|
readonly borderWidth?: number;
|
|
@@ -97,11 +115,19 @@ interface GraphInteractionConfig {
|
|
|
97
115
|
readonly selection?: SelectionInteractionConfig;
|
|
98
116
|
}
|
|
99
117
|
interface GraphConfig {
|
|
100
|
-
readonly container:
|
|
118
|
+
readonly container: HTMLElement;
|
|
101
119
|
readonly nodes: GraphNode[];
|
|
102
120
|
readonly links: GraphLink[];
|
|
121
|
+
readonly autoFit?: boolean;
|
|
122
|
+
readonly responsive?: boolean;
|
|
123
|
+
readonly simulation?: {
|
|
124
|
+
readonly alpha?: number;
|
|
125
|
+
readonly gravity?: number;
|
|
126
|
+
readonly linkDistance?: number | ((link: GraphLink) => number);
|
|
127
|
+
};
|
|
103
128
|
readonly interaction?: GraphInteractionConfig;
|
|
104
129
|
readonly controls?: GraphControlsConfig;
|
|
130
|
+
readonly legend?: LegendConfig;
|
|
105
131
|
}
|
|
106
132
|
|
|
107
133
|
interface GraphInstance {
|
|
@@ -111,6 +137,7 @@ interface GraphInstance {
|
|
|
111
137
|
resetView(): void;
|
|
112
138
|
fitView(): void;
|
|
113
139
|
destroy(): void;
|
|
140
|
+
exportGraph(fileName?: string): void;
|
|
114
141
|
}
|
|
115
142
|
|
|
116
143
|
declare function createGraph(config: GraphConfig): GraphInstance;
|