@matdata/yasgui-graph-plugin 1.4.0 → 1.4.2

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.
Files changed (14) hide show
  1. package/dist/yasgui-graph-plugin.cjs.css +29 -27
  2. package/dist/yasgui-graph-plugin.cjs.css.map +2 -2
  3. package/dist/yasgui-graph-plugin.cjs.js +30 -4
  4. package/dist/yasgui-graph-plugin.cjs.js.map +3 -3
  5. package/dist/yasgui-graph-plugin.css +46 -35
  6. package/dist/yasgui-graph-plugin.esm.css +29 -27
  7. package/dist/yasgui-graph-plugin.esm.css.map +2 -2
  8. package/dist/yasgui-graph-plugin.esm.js +30 -4
  9. package/dist/yasgui-graph-plugin.esm.js.map +3 -3
  10. package/dist/yasgui-graph-plugin.min.css +1 -1
  11. package/dist/yasgui-graph-plugin.min.css.map +2 -2
  12. package/dist/yasgui-graph-plugin.min.js +17 -17
  13. package/dist/yasgui-graph-plugin.min.js.map +3 -3
  14. package/package.json +1 -1
package/dist/yasgui-graph-plugin.css CHANGED
@@ -1,78 +1,89 @@
1
- /* Color scheme variables */
1
+ /* Color scheme variables using YASGUI CSS custom properties with fallbacks */
2
2
  :root {
3
- /* Light theme colors (default) */
4
- --yasgui-graph-uri: #97C2FC;
3
+ /* Graph-specific node colors (custom to this plugin) */
4
+ --yasgui-graph-uri: #97c2fc;
5
5
  --yasgui-graph-literal: #a6c8a6ff;
6
6
  --yasgui-graph-blank-node: #c5c5c5ff;
7
7
  --yasgui-graph-type-object: #e15b13ff;
8
- --yasgui-graph-text: #000000;
9
- --yasgui-graph-edge: #cccccc;
10
- --yasgui-graph-edge-label: #666666;
11
- --yasgui-graph-edge-label-bg: rgba(255, 255, 255, 0.8);
12
- --yasgui-graph-background: #ffffff;
13
-
8
+
9
+ /* Graph text and edges - using YASGUI variables with fallbacks */
10
+ --yasgui-graph-text: var(--yasgui-text-primary, #000000);
11
+ --yasgui-graph-edge: var(--yasgui-border-color, #cccccc);
12
+ --yasgui-graph-edge-label: var(--yasgui-text-secondary, #666666);
13
+ --yasgui-graph-edge-label-bg: var(--yasgui-bg-primary, rgba(255, 255, 255, 0.8));
14
+ --yasgui-graph-background: var(--yasgui-bg-primary, #ffffff);
15
+
16
+ /* UI elements - using YASGUI variables with fallbacks */
17
+ --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #ffffff);
18
+ --yasgui-graph-button-bg: var(--yasgui-accent-color, #4caf50);
19
+ --yasgui-graph-button-hover: var(--yasgui-link-hover, #45a049);
20
+ --yasgui-graph-button-text: var(--yasgui-button-text, #ffffff);
21
+ --yasgui-graph-empty-text: var(--yasgui-text-secondary, #666666);
22
+ --yasgui-graph-error-text: #f44336;
23
+
24
+ /* Shadow */
25
+ --yasgui-graph-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
26
+
14
27
  /* Legacy variables for backward compatibility */
15
28
  --color-blank-node: #ffff00;
16
29
  --color-literal: #808080;
17
30
  --color-rdf-type: #00ff00;
18
31
  --color-uri: #0000ff;
19
-
32
+
20
33
  --color-blank-node-dark: #ffeb3b;
21
34
  --color-literal-dark: #9e9e9e;
22
35
  --color-rdf-type-dark: #4caf50;
23
36
  --color-uri-dark: #2196f3;
24
-
37
+
25
38
  --bg-light: #ffffff;
26
39
  --bg-dark: #1e1e1e;
27
-
40
+
28
41
  --text-light: #666666;
29
42
  --text-dark: #cccccc;
30
43
  --text-error: #f44336;
31
-
44
+
32
45
  --button-primary-bg: #4caf50;
33
46
  --button-primary-bg-hover: #45a049;
34
47
  --button-text: #ffffff;
35
-
48
+
36
49
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
37
50
  }
38
51
  /* Dark theme colors */
39
52
  [data-theme='dark'],
40
53
  .dark-theme {
41
- --yasgui-graph-uri: #97C2FC;
54
+ /* Graph-specific node colors in dark mode */
55
+ --yasgui-graph-uri: #97c2fc;
42
56
  --yasgui-graph-literal: #a6c8a6ff;
43
57
  --yasgui-graph-blank-node: #888888;
44
58
  --yasgui-graph-type-object: #e15b13ff;
45
- --yasgui-graph-text: #e0e0e0;
46
- --yasgui-graph-edge: #666666;
47
- --yasgui-graph-edge-label: #cccccc;
48
- --yasgui-graph-edge-label-bg: rgba(30, 30, 30, 0.8);
49
- --yasgui-graph-background: #1e1e1e;
59
+
60
+ /* Override with YASGUI dark theme variables */
61
+ --yasgui-graph-text: var(--yasgui-text-primary, #e0e0e0);
62
+ --yasgui-graph-edge: var(--yasgui-border-color, #666666);
63
+ --yasgui-graph-edge-label: var(--yasgui-text-secondary, #cccccc);
64
+ --yasgui-graph-edge-label-bg: var(--yasgui-bg-secondary, rgba(30, 30, 30, 0.8));
65
+ --yasgui-graph-background: var(--yasgui-bg-primary, #1e1e1e);
66
+ --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #1e1e1e);
67
+ --yasgui-graph-empty-text: var(--yasgui-text-secondary, #cccccc);
50
68
  }
51
69
  /* Graph plugin container */
52
70
  .yasgui-graph-plugin-container {
53
71
  width: 100%;
54
- height: 100%;
72
+ height: 500px; /* Initial fixed height as workaround for viz-network bug */
55
73
  position: relative;
56
74
  overflow: hidden;
57
75
  }
58
76
  .yasgui-graph-plugin-container canvas {
59
- background-color: var(--yasgui-graph-canvas-bg, var(--bg-light));
60
- }
61
- .yasgui-graph-plugin-container[data-theme='dark'] canvas,
62
- .dark-theme .yasgui-graph-plugin-container canvas {
63
- background-color: var(--yasgui-graph-canvas-bg, var(--bg-dark));
77
+ background-color: var(--yasgui-graph-canvas-bg);
64
78
  }
65
79
  .yasgui-graph-plugin-empty-state {
66
80
  padding: 20px;
67
81
  text-align: center;
68
- color: var(--text-light);
69
- }
70
- .dark-theme .yasgui-graph-plugin-empty-state {
71
- color: var(--text-dark);
82
+ color: var(--yasgui-graph-empty-text);
72
83
  }
73
84
  .yasgui-graph-plugin-error {
74
85
  padding: 20px;
75
- color: var(--text-error);
86
+ color: var(--yasgui-graph-error-text);
76
87
  }
77
88
  /* Controls container */
78
89
  .yasgui-graph-controls {
@@ -87,17 +98,17 @@
87
98
  /* Button styles */
88
99
  .yasgui-graph-button {
89
100
  padding: 8px 12px;
90
- background: var(--button-primary-bg);
91
- color: var(--button-text);
101
+ background: var(--yasgui-graph-button-bg);
102
+ color: var(--yasgui-graph-button-text);
92
103
  border: none;
93
104
  border-radius: 4px;
94
105
  cursor: pointer;
95
106
  font-size: 14px;
96
- box-shadow: var(--box-shadow);
107
+ box-shadow: var(--yasgui-graph-shadow);
97
108
  transition: background 0.2s ease;
98
109
  }
99
110
  .yasgui-graph-button:hover {
100
- background: var(--button-primary-bg-hover);
111
+ background: var(--yasgui-graph-button-hover);
101
112
  }
102
113
  .yasgui-graph-button:active {
103
114
  transform: translateY(1px);
package/dist/yasgui-graph-plugin.esm.css CHANGED
@@ -1,14 +1,21 @@
1
1
  /* styles/index.css */
2
2
  :root {
3
- --yasgui-graph-uri: #97C2FC;
3
+ --yasgui-graph-uri: #97c2fc;
4
4
  --yasgui-graph-literal: #a6c8a6ff;
5
5
  --yasgui-graph-blank-node: #c5c5c5ff;
6
6
  --yasgui-graph-type-object: #e15b13ff;
7
- --yasgui-graph-text: #000000;
8
- --yasgui-graph-edge: #cccccc;
9
- --yasgui-graph-edge-label: #666666;
10
- --yasgui-graph-edge-label-bg: rgba(255, 255, 255, 0.8);
11
- --yasgui-graph-background: #ffffff;
7
+ --yasgui-graph-text: var(--yasgui-text-primary, #000000);
8
+ --yasgui-graph-edge: var(--yasgui-border-color, #cccccc);
9
+ --yasgui-graph-edge-label: var(--yasgui-text-secondary, #666666);
10
+ --yasgui-graph-edge-label-bg: var(--yasgui-bg-primary, rgba(255, 255, 255, 0.8));
11
+ --yasgui-graph-background: var(--yasgui-bg-primary, #ffffff);
12
+ --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #ffffff);
13
+ --yasgui-graph-button-bg: var(--yasgui-accent-color, #4caf50);
14
+ --yasgui-graph-button-hover: var(--yasgui-link-hover, #45a049);
15
+ --yasgui-graph-button-text: var(--yasgui-button-text, #ffffff);
16
+ --yasgui-graph-empty-text: var(--yasgui-text-secondary, #666666);
17
+ --yasgui-graph-error-text: #f44336;
18
+ --yasgui-graph-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
12
19
  --color-blank-node: #ffff00;
13
20
  --color-literal: #808080;
14
21
  --color-rdf-type: #00ff00;
@@ -29,40 +36,35 @@
29
36
  }
30
37
  [data-theme=dark],
31
38
  .dark-theme {
32
- --yasgui-graph-uri: #97C2FC;
39
+ --yasgui-graph-uri: #97c2fc;
33
40
  --yasgui-graph-literal: #a6c8a6ff;
34
41
  --yasgui-graph-blank-node: #888888;
35
42
  --yasgui-graph-type-object: #e15b13ff;
36
- --yasgui-graph-text: #e0e0e0;
37
- --yasgui-graph-edge: #666666;
38
- --yasgui-graph-edge-label: #cccccc;
39
- --yasgui-graph-edge-label-bg: rgba(30, 30, 30, 0.8);
40
- --yasgui-graph-background: #1e1e1e;
43
+ --yasgui-graph-text: var(--yasgui-text-primary, #e0e0e0);
44
+ --yasgui-graph-edge: var(--yasgui-border-color, #666666);
45
+ --yasgui-graph-edge-label: var(--yasgui-text-secondary, #cccccc);
46
+ --yasgui-graph-edge-label-bg: var(--yasgui-bg-secondary, rgba(30, 30, 30, 0.8));
47
+ --yasgui-graph-background: var(--yasgui-bg-primary, #1e1e1e);
48
+ --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #1e1e1e);
49
+ --yasgui-graph-empty-text: var(--yasgui-text-secondary, #cccccc);
41
50
  }
42
51
  .yasgui-graph-plugin-container {
43
52
  width: 100%;
44
- height: 100%;
53
+ height: 500px;
45
54
  position: relative;
46
55
  overflow: hidden;
47
56
  }
48
57
  .yasgui-graph-plugin-container canvas {
49
- background-color: var(--yasgui-graph-canvas-bg, var(--bg-light));
50
- }
51
- .yasgui-graph-plugin-container[data-theme=dark] canvas,
52
- .dark-theme .yasgui-graph-plugin-container canvas {
53
- background-color: var(--yasgui-graph-canvas-bg, var(--bg-dark));
58
+ background-color: var(--yasgui-graph-canvas-bg);
54
59
  }
55
60
  .yasgui-graph-plugin-empty-state {
56
61
  padding: 20px;
57
62
  text-align: center;
58
- color: var(--text-light);
59
- }
60
- .dark-theme .yasgui-graph-plugin-empty-state {
61
- color: var(--text-dark);
63
+ color: var(--yasgui-graph-empty-text);
62
64
  }
63
65
  .yasgui-graph-plugin-error {
64
66
  padding: 20px;
65
- color: var(--text-error);
67
+ color: var(--yasgui-graph-error-text);
66
68
  }
67
69
  .yasgui-graph-controls {
68
70
  position: absolute;
@@ -75,17 +77,17 @@
75
77
  }
76
78
  .yasgui-graph-button {
77
79
  padding: 8px 12px;
78
- background: var(--button-primary-bg);
79
- color: var(--button-text);
80
+ background: var(--yasgui-graph-button-bg);
81
+ color: var(--yasgui-graph-button-text);
80
82
  border: none;
81
83
  border-radius: 4px;
82
84
  cursor: pointer;
83
85
  font-size: 14px;
84
- box-shadow: var(--box-shadow);
86
+ box-shadow: var(--yasgui-graph-shadow);
85
87
  transition: background 0.2s ease;
86
88
  }
87
89
  .yasgui-graph-button:hover {
88
- background: var(--button-primary-bg-hover);
90
+ background: var(--yasgui-graph-button-hover);
89
91
  }
90
92
  .yasgui-graph-button:active {
91
93
  transform: translateY(1px);
package/dist/yasgui-graph-plugin.esm.css.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../styles/index.css"],
4
- "sourcesContent": ["/* Color scheme variables */\r\n:root {\r\n /* Light theme colors (default) */\r\n --yasgui-graph-uri: #97C2FC;\r\n --yasgui-graph-literal: #a6c8a6ff;\r\n --yasgui-graph-blank-node: #c5c5c5ff;\r\n --yasgui-graph-type-object: #e15b13ff;\r\n --yasgui-graph-text: #000000;\r\n --yasgui-graph-edge: #cccccc;\r\n --yasgui-graph-edge-label: #666666;\r\n --yasgui-graph-edge-label-bg: rgba(255, 255, 255, 0.8);\r\n --yasgui-graph-background: #ffffff;\r\n \r\n /* Legacy variables for backward compatibility */\r\n --color-blank-node: #ffff00;\r\n --color-literal: #808080;\r\n --color-rdf-type: #00ff00;\r\n --color-uri: #0000ff;\r\n \r\n --color-blank-node-dark: #ffeb3b;\r\n --color-literal-dark: #9e9e9e;\r\n --color-rdf-type-dark: #4caf50;\r\n --color-uri-dark: #2196f3;\r\n \r\n --bg-light: #ffffff;\r\n --bg-dark: #1e1e1e;\r\n \r\n --text-light: #666666;\r\n --text-dark: #cccccc;\r\n --text-error: #f44336;\r\n \r\n --button-primary-bg: #4caf50;\r\n --button-primary-bg-hover: #45a049;\r\n --button-text: #ffffff;\r\n \r\n --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n}\r\n/* Dark theme colors */\r\n[data-theme='dark'],\r\n.dark-theme {\r\n --yasgui-graph-uri: #97C2FC;\r\n --yasgui-graph-literal: #a6c8a6ff;\r\n --yasgui-graph-blank-node: #888888;\r\n --yasgui-graph-type-object: #e15b13ff;\r\n --yasgui-graph-text: #e0e0e0;\r\n --yasgui-graph-edge: #666666;\r\n --yasgui-graph-edge-label: #cccccc;\r\n --yasgui-graph-edge-label-bg: rgba(30, 30, 30, 0.8);\r\n --yasgui-graph-background: #1e1e1e;\r\n}\r\n/* Graph plugin container */\r\n.yasgui-graph-plugin-container {\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.yasgui-graph-plugin-container canvas {\r\n background-color: var(--yasgui-graph-canvas-bg, var(--bg-light));\r\n}\r\n.yasgui-graph-plugin-container[data-theme='dark'] canvas,\r\n.dark-theme .yasgui-graph-plugin-container canvas {\r\n background-color: var(--yasgui-graph-canvas-bg, var(--bg-dark));\r\n}\r\n.yasgui-graph-plugin-empty-state {\r\n padding: 20px;\r\n text-align: center;\r\n color: var(--text-light);\r\n}\r\n.dark-theme .yasgui-graph-plugin-empty-state {\r\n color: var(--text-dark);\r\n}\r\n.yasgui-graph-plugin-error {\r\n padding: 20px;\r\n color: var(--text-error);\r\n}\r\n/* Controls container */\r\n.yasgui-graph-controls {\r\n position: absolute;\r\n top: 10px;\r\n right: 10px;\r\n z-index: 10000;\r\n display: flex;\r\n gap: 10px;\r\n pointer-events: auto;\r\n}\r\n/* Button styles */\r\n.yasgui-graph-button {\r\n padding: 8px 12px;\r\n background: var(--button-primary-bg);\r\n color: var(--button-text);\r\n border: none;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 14px;\r\n box-shadow: var(--box-shadow);\r\n transition: background 0.2s ease;\r\n}\r\n.yasgui-graph-button:hover {\r\n background: var(--button-primary-bg-hover);\r\n}\r\n.yasgui-graph-button:active {\r\n transform: translateY(1px);\r\n}\r\n/* Icon styles */\r\n.yasgui-graph-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.yasgui-graph-icon svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: currentColor;\r\n}\r\n/* Main entry point for all styles */\r\n/* This file will be imported by the TypeScript code */\r\n"],
5
- "mappings": ";AACA;AAEE,sBAAoB;AACpB,0BAAwB;AACxB,6BAA2B;AAC3B,8BAA4B;AAC5B,uBAAqB;AACrB,uBAAqB;AACrB,6BAA2B;AAC3B,gCAA8B,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAClD,6BAA2B;AAG3B,sBAAoB;AACpB,mBAAiB;AACjB,oBAAkB;AAClB,eAAa;AAEb,2BAAyB;AACzB,wBAAsB;AACtB,yBAAuB;AACvB,oBAAkB;AAElB,cAAY;AACZ,aAAW;AAEX,gBAAc;AACd,eAAa;AACb,gBAAc;AAEd,uBAAqB;AACrB,6BAA2B;AAC3B,iBAAe;AAEf,gBAAc,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACxC;AAEA,CAAC;AACD,CAAC;AACC,sBAAoB;AACpB,0BAAwB;AACxB,6BAA2B;AAC3B,8BAA4B;AAC5B,uBAAqB;AACrB,uBAAqB;AACrB,6BAA2B;AAC3B,gCAA8B,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC/C,6BAA2B;AAC7B;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,YAAU;AACV,YAAU;AACZ;AACA,CANC,8BAM8B;AAC7B,oBAAkB,IAAI,wBAAwB,EAAE,IAAI;AACtD;AACA,CATC,6BAS6B,CAAC,iBAAmB;AAClD,CAtBC,WAsBW,CAVX,8BAU0C;AACzC,oBAAkB,IAAI,wBAAwB,EAAE,IAAI;AACtD;AACA,CAAC;AACC,WAAS;AACT,cAAY;AACZ,SAAO,IAAI;AACb;AACA,CA9BC,WA8BW,CALX;AAMC,SAAO,IAAI;AACb;AACA,CAAC;AACC,WAAS;AACT,SAAO,IAAI;AACb;AAEA,CAAC;AACC,YAAU;AACV,OAAK;AACL,SAAO;AACP,WAAS;AACT,WAAS;AACT,OAAK;AACL,kBAAgB;AAClB;AAEA,CAAC;AACC,WAAS,IAAI;AACb,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,UAAQ;AACR,iBAAe;AACf,UAAQ;AACR,aAAW;AACX,cAAY,IAAI;AAChB,cAAY,WAAW,KAAK;AAC9B;AACA,CAXC,mBAWmB;AAClB,cAAY,IAAI;AAClB;AACA,CAdC,mBAcmB;AAClB,aAAW,WAAW;AACxB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACnB;AACA,CALC,kBAKkB;AACjB,SAAO;AACP,UAAQ;AACR,QAAM;AACR;",
4
+ "sourcesContent": ["/* Color scheme variables using YASGUI CSS custom properties with fallbacks */\r\n:root {\r\n /* Graph-specific node colors (custom to this plugin) */\r\n --yasgui-graph-uri: #97c2fc;\r\n --yasgui-graph-literal: #a6c8a6ff;\r\n --yasgui-graph-blank-node: #c5c5c5ff;\r\n --yasgui-graph-type-object: #e15b13ff;\r\n\r\n /* Graph text and edges - using YASGUI variables with fallbacks */\r\n --yasgui-graph-text: var(--yasgui-text-primary, #000000);\r\n --yasgui-graph-edge: var(--yasgui-border-color, #cccccc);\r\n --yasgui-graph-edge-label: var(--yasgui-text-secondary, #666666);\r\n --yasgui-graph-edge-label-bg: var(--yasgui-bg-primary, rgba(255, 255, 255, 0.8));\r\n --yasgui-graph-background: var(--yasgui-bg-primary, #ffffff);\r\n\r\n /* UI elements - using YASGUI variables with fallbacks */\r\n --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #ffffff);\r\n --yasgui-graph-button-bg: var(--yasgui-accent-color, #4caf50);\r\n --yasgui-graph-button-hover: var(--yasgui-link-hover, #45a049);\r\n --yasgui-graph-button-text: var(--yasgui-button-text, #ffffff);\r\n --yasgui-graph-empty-text: var(--yasgui-text-secondary, #666666);\r\n --yasgui-graph-error-text: #f44336;\r\n\r\n /* Shadow */\r\n --yasgui-graph-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n\r\n /* Legacy variables for backward compatibility */\r\n --color-blank-node: #ffff00;\r\n --color-literal: #808080;\r\n --color-rdf-type: #00ff00;\r\n --color-uri: #0000ff;\r\n\r\n --color-blank-node-dark: #ffeb3b;\r\n --color-literal-dark: #9e9e9e;\r\n --color-rdf-type-dark: #4caf50;\r\n --color-uri-dark: #2196f3;\r\n\r\n --bg-light: #ffffff;\r\n --bg-dark: #1e1e1e;\r\n\r\n --text-light: #666666;\r\n --text-dark: #cccccc;\r\n --text-error: #f44336;\r\n\r\n --button-primary-bg: #4caf50;\r\n --button-primary-bg-hover: #45a049;\r\n --button-text: #ffffff;\r\n\r\n --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n}\r\n/* Dark theme colors */\r\n[data-theme='dark'],\r\n.dark-theme {\r\n /* Graph-specific node colors in dark mode */\r\n --yasgui-graph-uri: #97c2fc;\r\n --yasgui-graph-literal: #a6c8a6ff;\r\n --yasgui-graph-blank-node: #888888;\r\n --yasgui-graph-type-object: #e15b13ff;\r\n\r\n /* Override with YASGUI dark theme variables */\r\n --yasgui-graph-text: var(--yasgui-text-primary, #e0e0e0);\r\n --yasgui-graph-edge: var(--yasgui-border-color, #666666);\r\n --yasgui-graph-edge-label: var(--yasgui-text-secondary, #cccccc);\r\n --yasgui-graph-edge-label-bg: var(--yasgui-bg-secondary, rgba(30, 30, 30, 0.8));\r\n --yasgui-graph-background: var(--yasgui-bg-primary, #1e1e1e);\r\n --yasgui-graph-canvas-bg: var(--yasgui-bg-primary, #1e1e1e);\r\n --yasgui-graph-empty-text: var(--yasgui-text-secondary, #cccccc);\r\n}\r\n/* Graph plugin container */\r\n.yasgui-graph-plugin-container {\r\n width: 100%;\r\n height: 500px; /* Initial fixed height as workaround for viz-network bug */\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.yasgui-graph-plugin-container canvas {\r\n background-color: var(--yasgui-graph-canvas-bg);\r\n}\r\n.yasgui-graph-plugin-empty-state {\r\n padding: 20px;\r\n text-align: center;\r\n color: var(--yasgui-graph-empty-text);\r\n}\r\n.yasgui-graph-plugin-error {\r\n padding: 20px;\r\n color: var(--yasgui-graph-error-text);\r\n}\r\n/* Controls container */\r\n.yasgui-graph-controls {\r\n position: absolute;\r\n top: 10px;\r\n right: 10px;\r\n z-index: 10000;\r\n display: flex;\r\n gap: 10px;\r\n pointer-events: auto;\r\n}\r\n/* Button styles */\r\n.yasgui-graph-button {\r\n padding: 8px 12px;\r\n background: var(--yasgui-graph-button-bg);\r\n color: var(--yasgui-graph-button-text);\r\n border: none;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 14px;\r\n box-shadow: var(--yasgui-graph-shadow);\r\n transition: background 0.2s ease;\r\n}\r\n.yasgui-graph-button:hover {\r\n background: var(--yasgui-graph-button-hover);\r\n}\r\n.yasgui-graph-button:active {\r\n transform: translateY(1px);\r\n}\r\n/* Icon styles */\r\n.yasgui-graph-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.yasgui-graph-icon svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: currentColor;\r\n}\r\n/* Main entry point for all styles */\r\n/* This file will be imported by the TypeScript code */\r\n"],
5
+ "mappings": ";AACA;AAEE,sBAAoB;AACpB,0BAAwB;AACxB,6BAA2B;AAC3B,8BAA4B;AAG5B,uBAAqB,IAAI,qBAAqB,EAAE;AAChD,uBAAqB,IAAI,qBAAqB,EAAE;AAChD,6BAA2B,IAAI,uBAAuB,EAAE;AACxD,gCAA8B,IAAI,mBAAmB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC3E,6BAA2B,IAAI,mBAAmB,EAAE;AAGpD,4BAA0B,IAAI,mBAAmB,EAAE;AACnD,4BAA0B,IAAI,qBAAqB,EAAE;AACrD,+BAA6B,IAAI,mBAAmB,EAAE;AACtD,8BAA4B,IAAI,oBAAoB,EAAE;AACtD,6BAA2B,IAAI,uBAAuB,EAAE;AACxD,6BAA2B;AAG3B,yBAAuB,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAG/C,sBAAoB;AACpB,mBAAiB;AACjB,oBAAkB;AAClB,eAAa;AAEb,2BAAyB;AACzB,wBAAsB;AACtB,yBAAuB;AACvB,oBAAkB;AAElB,cAAY;AACZ,aAAW;AAEX,gBAAc;AACd,eAAa;AACb,gBAAc;AAEd,uBAAqB;AACrB,6BAA2B;AAC3B,iBAAe;AAEf,gBAAc,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACxC;AAEA,CAAC;AACD,CAAC;AAEC,sBAAoB;AACpB,0BAAwB;AACxB,6BAA2B;AAC3B,8BAA4B;AAG5B,uBAAqB,IAAI,qBAAqB,EAAE;AAChD,uBAAqB,IAAI,qBAAqB,EAAE;AAChD,6BAA2B,IAAI,uBAAuB,EAAE;AACxD,gCAA8B,IAAI,qBAAqB,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC1E,6BAA2B,IAAI,mBAAmB,EAAE;AACpD,4BAA0B,IAAI,mBAAmB,EAAE;AACnD,6BAA2B,IAAI,uBAAuB,EAAE;AAC1D;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,YAAU;AACV,YAAU;AACZ;AACA,CANC,8BAM8B;AAC7B,oBAAkB,IAAI;AACxB;AACA,CAAC;AACC,WAAS;AACT,cAAY;AACZ,SAAO,IAAI;AACb;AACA,CAAC;AACC,WAAS;AACT,SAAO,IAAI;AACb;AAEA,CAAC;AACC,YAAU;AACV,OAAK;AACL,SAAO;AACP,WAAS;AACT,WAAS;AACT,OAAK;AACL,kBAAgB;AAClB;AAEA,CAAC;AACC,WAAS,IAAI;AACb,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,UAAQ;AACR,iBAAe;AACf,UAAQ;AACR,aAAW;AACX,cAAY,IAAI;AAChB,cAAY,WAAW,KAAK;AAC9B;AACA,CAXC,mBAWmB;AAClB,cAAY,IAAI;AAClB;AACA,CAdC,mBAcmB;AAClB,aAAW,WAAW;AACxB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACnB;AACA,CALC,kBAKkB;AACjB,SAAO;AACP,UAAQ;AACR,QAAM;AACR;",
6
6
  "names": []
7
7
  }
package/dist/yasgui-graph-plugin.esm.js CHANGED
@@ -43,9 +43,6 @@ function truncateLabel(text, maxLength = 50) {
43
43
  // src/networkConfig.ts
44
44
  function getDefaultNetworkOptions(themeColors) {
45
45
  return {
46
- autoResize: true,
47
- width: "100%",
48
- height: "100%",
49
46
  // Configure canvas background color based on theme
50
47
  configure: {
51
48
  enabled: false
@@ -29714,6 +29711,7 @@ var GraphPlugin = class {
29714
29711
  this.network = null;
29715
29712
  this.currentTheme = getCurrentTheme();
29716
29713
  this.themeObserver = null;
29714
+ this.resizeObserver = null;
29717
29715
  this.nodesDataSet = null;
29718
29716
  this.edgesDataSet = null;
29719
29717
  this.triples = null;
@@ -29783,7 +29781,8 @@ var GraphPlugin = class {
29783
29781
  this.applyCanvasBackground(themeColors.background);
29784
29782
  this.network.on("stabilizationIterationsDone", () => {
29785
29783
  this.network.setOptions({ physics: { enabled: true } });
29786
- this.network.fit({ maxZoomLevel: 1e3 });
29784
+ this.network.fit({ maxZoomLevel: 3 });
29785
+ this.setupContainerResize(container);
29787
29786
  });
29788
29787
  if (!this.themeObserver) {
29789
29788
  this.themeObserver = watchThemeChanges((newTheme) => {
@@ -29838,6 +29837,29 @@ var GraphPlugin = class {
29838
29837
  this.network.body.container.style.setProperty("--yasgui-graph-canvas-bg", color);
29839
29838
  }
29840
29839
  }
29840
+ /**
29841
+ * Setup ResizeObserver to adjust container height based on parent
29842
+ * Workaround for viz-network bug: container must have fixed pixel height
29843
+ * @param container - The graph container element
29844
+ */
29845
+ setupContainerResize(container) {
29846
+ const parent2 = container.parentElement;
29847
+ if (!parent2) return;
29848
+ const updateHeight = () => {
29849
+ const parentHeight = parent2.clientHeight;
29850
+ if (parentHeight > 0) {
29851
+ container.style.height = `${parentHeight}px`;
29852
+ if (this.network) {
29853
+ this.network.fit({ maxZoomLevel: 1e3 });
29854
+ }
29855
+ }
29856
+ };
29857
+ updateHeight();
29858
+ this.resizeObserver = new ResizeObserver(() => {
29859
+ updateHeight();
29860
+ });
29861
+ this.resizeObserver.observe(parent2);
29862
+ }
29841
29863
  /**
29842
29864
  * Get icon for plugin tab
29843
29865
  * @returns Icon element
@@ -29864,6 +29886,10 @@ var GraphPlugin = class {
29864
29886
  this.themeObserver.disconnect();
29865
29887
  this.themeObserver = null;
29866
29888
  }
29889
+ if (this.resizeObserver) {
29890
+ this.resizeObserver.disconnect();
29891
+ this.resizeObserver = null;
29892
+ }
29867
29893
  if (this.network) {
29868
29894
  this.network.destroy();
29869
29895
  this.network = null;