polly-graph 0.1.3 → 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 +243 -182
- package/dist/index.css +221 -32
- package/dist/index.d.cts +22 -3
- package/dist/index.d.ts +22 -3
- package/dist/index.js +233 -182
- 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;
|
|
@@ -97,11 +114,12 @@ interface GraphInteractionConfig {
|
|
|
97
114
|
readonly selection?: SelectionInteractionConfig;
|
|
98
115
|
}
|
|
99
116
|
interface GraphConfig {
|
|
100
|
-
readonly container:
|
|
117
|
+
readonly container: HTMLElement;
|
|
101
118
|
readonly nodes: GraphNode[];
|
|
102
119
|
readonly links: GraphLink[];
|
|
103
120
|
readonly interaction?: GraphInteractionConfig;
|
|
104
121
|
readonly controls?: GraphControlsConfig;
|
|
122
|
+
readonly legend?: LegendConfig;
|
|
105
123
|
}
|
|
106
124
|
|
|
107
125
|
interface GraphInstance {
|
|
@@ -111,6 +129,7 @@ interface GraphInstance {
|
|
|
111
129
|
resetView(): void;
|
|
112
130
|
fitView(): void;
|
|
113
131
|
destroy(): void;
|
|
132
|
+
exportGraph(fileName?: string): void;
|
|
114
133
|
}
|
|
115
134
|
|
|
116
135
|
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;
|
|
@@ -97,11 +114,12 @@ interface GraphInteractionConfig {
|
|
|
97
114
|
readonly selection?: SelectionInteractionConfig;
|
|
98
115
|
}
|
|
99
116
|
interface GraphConfig {
|
|
100
|
-
readonly container:
|
|
117
|
+
readonly container: HTMLElement;
|
|
101
118
|
readonly nodes: GraphNode[];
|
|
102
119
|
readonly links: GraphLink[];
|
|
103
120
|
readonly interaction?: GraphInteractionConfig;
|
|
104
121
|
readonly controls?: GraphControlsConfig;
|
|
122
|
+
readonly legend?: LegendConfig;
|
|
105
123
|
}
|
|
106
124
|
|
|
107
125
|
interface GraphInstance {
|
|
@@ -111,6 +129,7 @@ interface GraphInstance {
|
|
|
111
129
|
resetView(): void;
|
|
112
130
|
fitView(): void;
|
|
113
131
|
destroy(): void;
|
|
132
|
+
exportGraph(fileName?: string): void;
|
|
114
133
|
}
|
|
115
134
|
|
|
116
135
|
declare function createGraph(config: GraphConfig): GraphInstance;
|