polly-graph 0.1.2 → 0.1.4
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/dist/index.cjs +331 -129
- package/dist/index.css +236 -0
- package/dist/index.d.cts +41 -1
- package/dist/index.d.ts +41 -1
- package/dist/index.js +321 -129
- package/package.json +5 -4
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;
|
|
@@ -10,6 +211,12 @@
|
|
|
10
211
|
color: #f8fafc;
|
|
11
212
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
12
213
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
|
|
214
|
+
font-family:
|
|
215
|
+
"Inter",
|
|
216
|
+
-apple-system,
|
|
217
|
+
BlinkMacSystemFont,
|
|
218
|
+
"Segoe UI",
|
|
219
|
+
sans-serif;
|
|
13
220
|
font-size: 12px;
|
|
14
221
|
line-height: 1.5;
|
|
15
222
|
opacity: 0;
|
|
@@ -72,5 +279,34 @@
|
|
|
72
279
|
margin-top: 4px;
|
|
73
280
|
font-size: 14px;
|
|
74
281
|
font-weight: 600;
|
|
282
|
+
line-height: 1.4;
|
|
75
283
|
color: #ffffff;
|
|
76
284
|
}
|
|
285
|
+
|
|
286
|
+
/* src/styles/graph.css */
|
|
287
|
+
.pg-root {
|
|
288
|
+
position: relative;
|
|
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 {
|
|
299
|
+
position: absolute;
|
|
300
|
+
inset: 0;
|
|
301
|
+
pointer-events: none;
|
|
302
|
+
z-index: 10;
|
|
303
|
+
}
|
|
304
|
+
.pg-layer-nodes circle {
|
|
305
|
+
cursor: pointer;
|
|
306
|
+
transition: r 0.2s ease, stroke-width 0.2s ease;
|
|
307
|
+
}
|
|
308
|
+
.pg-layer-links line {
|
|
309
|
+
transition: stroke-opacity 0.2s ease;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/* src/styles/main.css */
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,42 @@
|
|
|
1
1
|
import { SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
|
|
2
2
|
|
|
3
|
+
interface Coordinates {
|
|
4
|
+
readonly x: number;
|
|
5
|
+
readonly y: number;
|
|
6
|
+
}
|
|
7
|
+
type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
8
|
+
type Orientation = 'vertical' | 'horizontal';
|
|
9
|
+
|
|
10
|
+
type GraphControlsPosition = Position;
|
|
11
|
+
type GraphControlsOrientation = Orientation;
|
|
12
|
+
interface GraphControlsConfig {
|
|
13
|
+
readonly enabled: boolean;
|
|
14
|
+
readonly position?: GraphControlsPosition;
|
|
15
|
+
readonly orientation?: GraphControlsOrientation;
|
|
16
|
+
readonly offset?: Coordinates;
|
|
17
|
+
readonly show?: {
|
|
18
|
+
readonly zoomIn?: boolean;
|
|
19
|
+
readonly zoomOut?: boolean;
|
|
20
|
+
readonly reset?: boolean;
|
|
21
|
+
readonly fit?: boolean;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
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
|
+
|
|
3
40
|
interface GraphNode extends SimulationNodeDatum {
|
|
4
41
|
readonly id: string;
|
|
5
42
|
readonly type: string;
|
|
@@ -77,10 +114,12 @@ interface GraphInteractionConfig {
|
|
|
77
114
|
readonly selection?: SelectionInteractionConfig;
|
|
78
115
|
}
|
|
79
116
|
interface GraphConfig {
|
|
80
|
-
readonly container:
|
|
117
|
+
readonly container: HTMLElement;
|
|
81
118
|
readonly nodes: GraphNode[];
|
|
82
119
|
readonly links: GraphLink[];
|
|
83
120
|
readonly interaction?: GraphInteractionConfig;
|
|
121
|
+
readonly controls?: GraphControlsConfig;
|
|
122
|
+
readonly legend?: LegendConfig;
|
|
84
123
|
}
|
|
85
124
|
|
|
86
125
|
interface GraphInstance {
|
|
@@ -90,6 +129,7 @@ interface GraphInstance {
|
|
|
90
129
|
resetView(): void;
|
|
91
130
|
fitView(): void;
|
|
92
131
|
destroy(): void;
|
|
132
|
+
exportGraph(fileName?: string): void;
|
|
93
133
|
}
|
|
94
134
|
|
|
95
135
|
declare function createGraph(config: GraphConfig): GraphInstance;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,42 @@
|
|
|
1
1
|
import { SimulationNodeDatum, SimulationLinkDatum } from 'd3-force';
|
|
2
2
|
|
|
3
|
+
interface Coordinates {
|
|
4
|
+
readonly x: number;
|
|
5
|
+
readonly y: number;
|
|
6
|
+
}
|
|
7
|
+
type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
8
|
+
type Orientation = 'vertical' | 'horizontal';
|
|
9
|
+
|
|
10
|
+
type GraphControlsPosition = Position;
|
|
11
|
+
type GraphControlsOrientation = Orientation;
|
|
12
|
+
interface GraphControlsConfig {
|
|
13
|
+
readonly enabled: boolean;
|
|
14
|
+
readonly position?: GraphControlsPosition;
|
|
15
|
+
readonly orientation?: GraphControlsOrientation;
|
|
16
|
+
readonly offset?: Coordinates;
|
|
17
|
+
readonly show?: {
|
|
18
|
+
readonly zoomIn?: boolean;
|
|
19
|
+
readonly zoomOut?: boolean;
|
|
20
|
+
readonly reset?: boolean;
|
|
21
|
+
readonly fit?: boolean;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
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
|
+
|
|
3
40
|
interface GraphNode extends SimulationNodeDatum {
|
|
4
41
|
readonly id: string;
|
|
5
42
|
readonly type: string;
|
|
@@ -77,10 +114,12 @@ interface GraphInteractionConfig {
|
|
|
77
114
|
readonly selection?: SelectionInteractionConfig;
|
|
78
115
|
}
|
|
79
116
|
interface GraphConfig {
|
|
80
|
-
readonly container:
|
|
117
|
+
readonly container: HTMLElement;
|
|
81
118
|
readonly nodes: GraphNode[];
|
|
82
119
|
readonly links: GraphLink[];
|
|
83
120
|
readonly interaction?: GraphInteractionConfig;
|
|
121
|
+
readonly controls?: GraphControlsConfig;
|
|
122
|
+
readonly legend?: LegendConfig;
|
|
84
123
|
}
|
|
85
124
|
|
|
86
125
|
interface GraphInstance {
|
|
@@ -90,6 +129,7 @@ interface GraphInstance {
|
|
|
90
129
|
resetView(): void;
|
|
91
130
|
fitView(): void;
|
|
92
131
|
destroy(): void;
|
|
132
|
+
exportGraph(fileName?: string): void;
|
|
93
133
|
}
|
|
94
134
|
|
|
95
135
|
declare function createGraph(config: GraphConfig): GraphInstance;
|