@matdata/yasgui-graph-plugin 1.4.0 → 1.4.1
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/yasgui-graph-plugin.cjs.css +1 -1
- package/dist/yasgui-graph-plugin.cjs.css.map +1 -1
- package/dist/yasgui-graph-plugin.cjs.js +30 -4
- package/dist/yasgui-graph-plugin.cjs.js.map +3 -3
- package/dist/yasgui-graph-plugin.css +1 -1
- package/dist/yasgui-graph-plugin.esm.css +1 -1
- package/dist/yasgui-graph-plugin.esm.css.map +1 -1
- package/dist/yasgui-graph-plugin.esm.js +30 -4
- package/dist/yasgui-graph-plugin.esm.js.map +3 -3
- package/dist/yasgui-graph-plugin.min.css +1 -1
- package/dist/yasgui-graph-plugin.min.css.map +2 -2
- package/dist/yasgui-graph-plugin.min.js +17 -17
- package/dist/yasgui-graph-plugin.min.js.map +3 -3
- package/package.json +1 -1
|
@@ -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:
|
|
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: 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, 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
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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -69,9 +69,6 @@ function truncateLabel(text, maxLength = 50) {
|
|
|
69
69
|
// src/networkConfig.ts
|
|
70
70
|
function getDefaultNetworkOptions(themeColors) {
|
|
71
71
|
return {
|
|
72
|
-
autoResize: true,
|
|
73
|
-
width: "100%",
|
|
74
|
-
height: "100%",
|
|
75
72
|
// Configure canvas background color based on theme
|
|
76
73
|
configure: {
|
|
77
74
|
enabled: false
|
|
@@ -29740,6 +29737,7 @@ var GraphPlugin = class {
|
|
|
29740
29737
|
this.network = null;
|
|
29741
29738
|
this.currentTheme = getCurrentTheme();
|
|
29742
29739
|
this.themeObserver = null;
|
|
29740
|
+
this.resizeObserver = null;
|
|
29743
29741
|
this.nodesDataSet = null;
|
|
29744
29742
|
this.edgesDataSet = null;
|
|
29745
29743
|
this.triples = null;
|
|
@@ -29809,7 +29807,8 @@ var GraphPlugin = class {
|
|
|
29809
29807
|
this.applyCanvasBackground(themeColors.background);
|
|
29810
29808
|
this.network.on("stabilizationIterationsDone", () => {
|
|
29811
29809
|
this.network.setOptions({ physics: { enabled: true } });
|
|
29812
|
-
this.network.fit({ maxZoomLevel:
|
|
29810
|
+
this.network.fit({ maxZoomLevel: 3 });
|
|
29811
|
+
this.setupContainerResize(container);
|
|
29813
29812
|
});
|
|
29814
29813
|
if (!this.themeObserver) {
|
|
29815
29814
|
this.themeObserver = watchThemeChanges((newTheme) => {
|
|
@@ -29864,6 +29863,29 @@ var GraphPlugin = class {
|
|
|
29864
29863
|
this.network.body.container.style.setProperty("--yasgui-graph-canvas-bg", color);
|
|
29865
29864
|
}
|
|
29866
29865
|
}
|
|
29866
|
+
/**
|
|
29867
|
+
* Setup ResizeObserver to adjust container height based on parent
|
|
29868
|
+
* Workaround for viz-network bug: container must have fixed pixel height
|
|
29869
|
+
* @param container - The graph container element
|
|
29870
|
+
*/
|
|
29871
|
+
setupContainerResize(container) {
|
|
29872
|
+
const parent2 = container.parentElement;
|
|
29873
|
+
if (!parent2) return;
|
|
29874
|
+
const updateHeight = () => {
|
|
29875
|
+
const parentHeight = parent2.clientHeight;
|
|
29876
|
+
if (parentHeight > 0) {
|
|
29877
|
+
container.style.height = `${parentHeight}px`;
|
|
29878
|
+
if (this.network) {
|
|
29879
|
+
this.network.fit({ maxZoomLevel: 1e3 });
|
|
29880
|
+
}
|
|
29881
|
+
}
|
|
29882
|
+
};
|
|
29883
|
+
updateHeight();
|
|
29884
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
29885
|
+
updateHeight();
|
|
29886
|
+
});
|
|
29887
|
+
this.resizeObserver.observe(parent2);
|
|
29888
|
+
}
|
|
29867
29889
|
/**
|
|
29868
29890
|
* Get icon for plugin tab
|
|
29869
29891
|
* @returns Icon element
|
|
@@ -29890,6 +29912,10 @@ var GraphPlugin = class {
|
|
|
29890
29912
|
this.themeObserver.disconnect();
|
|
29891
29913
|
this.themeObserver = null;
|
|
29892
29914
|
}
|
|
29915
|
+
if (this.resizeObserver) {
|
|
29916
|
+
this.resizeObserver.disconnect();
|
|
29917
|
+
this.resizeObserver = null;
|
|
29918
|
+
}
|
|
29893
29919
|
if (this.network) {
|
|
29894
29920
|
this.network.destroy();
|
|
29895
29921
|
this.network = null;
|