@elicdavis/node-flow 0.1.17 → 0.1.19
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.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +49 -25
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +49 -25
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/graph.ts +22 -17
- package/src/node.ts +3 -0
- package/src/nodes/subsystem.ts +3 -1
- package/src/popup.ts +27 -6
- package/src/theme.ts +1 -1
- package/src/widgets/number.ts +2 -1
- package/src/widgets/string.ts +3 -1
- package/src/widgets/toggle.ts +3 -1
- package/test/popup.test.ts +104 -0
- package/test/widget_click.test.ts +126 -0
- package/test/widget_construction.test.ts +48 -0
package/dist/index.d.mts
CHANGED
|
@@ -653,6 +653,7 @@ declare class NodeFlowGraph {
|
|
|
653
653
|
connectedInputsNodeReferences(nodeIndex: number): Array<FlowNode>;
|
|
654
654
|
connectedOutputsNodeReferences(nodeIndex: number): Array<FlowNode>;
|
|
655
655
|
connectNodes(nodeOut: FlowNode, outPort: number, nodeIn: FlowNode, inPort: number): Connection | undefined;
|
|
656
|
+
clearNodeInputConnection(node: FlowNode, index: number): void;
|
|
656
657
|
addNode(node: FlowNode): void;
|
|
657
658
|
removeNode(node: FlowNode): void;
|
|
658
659
|
addNote(note: FlowNote): void;
|
package/dist/index.d.ts
CHANGED
|
@@ -653,6 +653,7 @@ declare class NodeFlowGraph {
|
|
|
653
653
|
connectedInputsNodeReferences(nodeIndex: number): Array<FlowNode>;
|
|
654
654
|
connectedOutputsNodeReferences(nodeIndex: number): Array<FlowNode>;
|
|
655
655
|
connectNodes(nodeOut: FlowNode, outPort: number, nodeIn: FlowNode, inPort: number): Connection | undefined;
|
|
656
|
+
clearNodeInputConnection(node: FlowNode, index: number): void;
|
|
656
657
|
addNode(node: FlowNode): void;
|
|
657
658
|
removeNode(node: FlowNode): void;
|
|
658
659
|
addNote(note: FlowNote): void;
|
package/dist/index.js
CHANGED
|
@@ -115,7 +115,7 @@ var Theme = {
|
|
|
115
115
|
DisabledFontColor: "#4a585c"
|
|
116
116
|
},
|
|
117
117
|
Minimap: {
|
|
118
|
-
BackgroundColor: "rgba(
|
|
118
|
+
BackgroundColor: "rgba(10, 16, 18, 0.85)",
|
|
119
119
|
BorderColor: "#1c1c1c",
|
|
120
120
|
BorderRadius: 4,
|
|
121
121
|
Padding: 6,
|
|
@@ -1898,6 +1898,7 @@ var Popup = class {
|
|
|
1898
1898
|
#buttonCSS;
|
|
1899
1899
|
// Runtime ================================================================
|
|
1900
1900
|
#popup;
|
|
1901
|
+
#keyHandler;
|
|
1901
1902
|
constructor(config) {
|
|
1902
1903
|
this.#title = config.title;
|
|
1903
1904
|
this.#options = config.options;
|
|
@@ -1905,14 +1906,25 @@ var Popup = class {
|
|
|
1905
1906
|
this.#onClose = config.onClose;
|
|
1906
1907
|
this.#buttonCSS = config.buttonCSS === void 0 ? "flex-grow: 1; margin-right: 8px;" : config.buttonCSS;
|
|
1907
1908
|
this.#popup = null;
|
|
1909
|
+
this.#keyHandler = null;
|
|
1908
1910
|
}
|
|
1909
1911
|
Hide() {
|
|
1910
1912
|
if (this.#popup === null) {
|
|
1911
1913
|
return;
|
|
1912
1914
|
}
|
|
1915
|
+
if (this.#keyHandler !== null) {
|
|
1916
|
+
document.removeEventListener("keydown", this.#keyHandler, true);
|
|
1917
|
+
this.#keyHandler = null;
|
|
1918
|
+
}
|
|
1913
1919
|
document.body.removeChild(this.#popup);
|
|
1914
1920
|
this.#popup = null;
|
|
1915
1921
|
}
|
|
1922
|
+
#close(option) {
|
|
1923
|
+
this.Hide();
|
|
1924
|
+
if (this.#onClose !== void 0) {
|
|
1925
|
+
this.#onClose(option);
|
|
1926
|
+
}
|
|
1927
|
+
}
|
|
1916
1928
|
Show() {
|
|
1917
1929
|
this.#popup = document.createElement("div");
|
|
1918
1930
|
this.#popup.style.cssText = "position:absolute;top:0;width:100%;display:flex;height:100%;justify-content:center;align-items:center;background-color:#00000070;";
|
|
@@ -1934,14 +1946,20 @@ var Popup = class {
|
|
|
1934
1946
|
const button = document.createElement("button");
|
|
1935
1947
|
button.style.cssText = this.#buttonCSS;
|
|
1936
1948
|
button.textContent = this.#options[i];
|
|
1937
|
-
button.onclick = () =>
|
|
1938
|
-
this.Hide();
|
|
1939
|
-
if (this.#onClose !== void 0) {
|
|
1940
|
-
this.#onClose(this.#options[i]);
|
|
1941
|
-
}
|
|
1942
|
-
};
|
|
1949
|
+
button.onclick = () => this.#close(this.#options[i]);
|
|
1943
1950
|
buttonContainer.appendChild(button);
|
|
1944
1951
|
}
|
|
1952
|
+
this.#keyHandler = (e) => {
|
|
1953
|
+
if (e.key === "Enter") {
|
|
1954
|
+
e.preventDefault();
|
|
1955
|
+
this.#close(this.#options.length > 0 ? this.#options[0] : null);
|
|
1956
|
+
} else if (e.key === "Escape") {
|
|
1957
|
+
e.preventDefault();
|
|
1958
|
+
this.#close(null);
|
|
1959
|
+
}
|
|
1960
|
+
e.stopPropagation();
|
|
1961
|
+
};
|
|
1962
|
+
document.addEventListener("keydown", this.#keyHandler, true);
|
|
1945
1963
|
}
|
|
1946
1964
|
};
|
|
1947
1965
|
|
|
@@ -2050,8 +2068,8 @@ var NumberWidget = class {
|
|
|
2050
2068
|
},
|
|
2051
2069
|
text: { color: Theme.Widget.FontColor }
|
|
2052
2070
|
}));
|
|
2053
|
-
this.#callback = config?.callback;
|
|
2054
2071
|
this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, 0));
|
|
2072
|
+
this.#callback = config?.callback;
|
|
2055
2073
|
if (this.#nodeProperty !== void 0) {
|
|
2056
2074
|
this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
|
|
2057
2075
|
this.Set(newVal);
|
|
@@ -2493,8 +2511,8 @@ var StringWidget = class {
|
|
|
2493
2511
|
},
|
|
2494
2512
|
text: { color: Theme.Widget.FontColor }
|
|
2495
2513
|
}));
|
|
2496
|
-
this.#callback = config?.callback;
|
|
2497
2514
|
this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, ""));
|
|
2515
|
+
this.#callback = config?.callback;
|
|
2498
2516
|
if (this.#nodeProperty !== void 0) {
|
|
2499
2517
|
this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
|
|
2500
2518
|
this.Set(newVal);
|
|
@@ -2659,8 +2677,8 @@ var ToggleWidget = class {
|
|
|
2659
2677
|
lightBorderColor: config?.disabledStyle?.lightBorderColor,
|
|
2660
2678
|
lightColor: config?.disabledStyle?.lightColor === void 0 ? "#004400" : config?.enabledStyle?.lightColor
|
|
2661
2679
|
});
|
|
2662
|
-
this.#callback = config?.callback;
|
|
2663
2680
|
this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, false));
|
|
2681
|
+
this.#callback = config?.callback;
|
|
2664
2682
|
if (this.#nodeProperty !== void 0) {
|
|
2665
2683
|
this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
|
|
2666
2684
|
this.Set(newVal);
|
|
@@ -3761,7 +3779,9 @@ var NodeSubsystem2 = class {
|
|
|
3761
3779
|
this.#boxSelect = false;
|
|
3762
3780
|
}
|
|
3763
3781
|
if (this.#widgetCurrentlyClicking !== null) {
|
|
3764
|
-
this.#widgetCurrentlyClicking
|
|
3782
|
+
if (this.#widgetHovering === this.#widgetCurrentlyClicking) {
|
|
3783
|
+
this.#widgetCurrentlyClicking.ClickEnd();
|
|
3784
|
+
}
|
|
3765
3785
|
this.#widgetCurrentlyClicking = null;
|
|
3766
3786
|
}
|
|
3767
3787
|
if (this.#connectionSelected === null) {
|
|
@@ -5247,6 +5267,7 @@ var FlowNode = class {
|
|
|
5247
5267
|
};
|
|
5248
5268
|
project(this.#portOffsets.input, this.#inputPortPositions);
|
|
5249
5269
|
project(this.#portOffsets.output, this.#outputPortPositions);
|
|
5270
|
+
this.#widgetPositions.Clear();
|
|
5250
5271
|
return true;
|
|
5251
5272
|
}
|
|
5252
5273
|
};
|
|
@@ -6907,12 +6928,25 @@ var NodeFlowGraph = class {
|
|
|
6907
6928
|
this.#pasteCallbacks.forEach((callback) => callback(position));
|
|
6908
6929
|
}
|
|
6909
6930
|
#deleteKey(e) {
|
|
6910
|
-
return e.code === "Delete" || e.
|
|
6931
|
+
return e.code === "Delete" || e.key === "Delete";
|
|
6911
6932
|
}
|
|
6912
6933
|
#keyDown(e) {
|
|
6913
6934
|
if (document.activeElement) {
|
|
6914
6935
|
if (["INPUT", "TEXTAREA"].includes(document.activeElement.tagName)) return;
|
|
6915
6936
|
}
|
|
6937
|
+
if (this.#openQuickMenu) {
|
|
6938
|
+
if (e.code === "Escape") {
|
|
6939
|
+
this.#openQuickMenu = null;
|
|
6940
|
+
return;
|
|
6941
|
+
}
|
|
6942
|
+
if (e.code === "Enter") {
|
|
6943
|
+
this.#openQuickMenu.Menu.execute();
|
|
6944
|
+
this.#openQuickMenu = null;
|
|
6945
|
+
return;
|
|
6946
|
+
}
|
|
6947
|
+
this.#openQuickMenu.Menu.keyboardEvent(e);
|
|
6948
|
+
return;
|
|
6949
|
+
}
|
|
6916
6950
|
if (this.#deleteKey(e)) {
|
|
6917
6951
|
if (this.#mainNodeSubsystem.getSelectedNodes().length > 0) {
|
|
6918
6952
|
e.preventDefault();
|
|
@@ -6937,19 +6971,6 @@ var NodeFlowGraph = class {
|
|
|
6937
6971
|
return;
|
|
6938
6972
|
}
|
|
6939
6973
|
}
|
|
6940
|
-
if (this.#openQuickMenu) {
|
|
6941
|
-
if (e.code === "Escape") {
|
|
6942
|
-
this.#openQuickMenu = null;
|
|
6943
|
-
return;
|
|
6944
|
-
}
|
|
6945
|
-
if (e.code === "Enter") {
|
|
6946
|
-
this.#openQuickMenu.Menu.execute();
|
|
6947
|
-
this.#openQuickMenu = null;
|
|
6948
|
-
return;
|
|
6949
|
-
}
|
|
6950
|
-
this.#openQuickMenu.Menu.keyboardEvent(e);
|
|
6951
|
-
return;
|
|
6952
|
-
}
|
|
6953
6974
|
const spacePressed = e.key == " " || e.code == "Space";
|
|
6954
6975
|
if (!spacePressed) {
|
|
6955
6976
|
return;
|
|
@@ -7148,6 +7169,9 @@ var NodeFlowGraph = class {
|
|
|
7148
7169
|
connectNodes(nodeOut, outPort, nodeIn, inPort) {
|
|
7149
7170
|
return this.#mainNodeSubsystem.connectNodes(nodeOut, outPort, nodeIn, inPort);
|
|
7150
7171
|
}
|
|
7172
|
+
clearNodeInputConnection(node, index) {
|
|
7173
|
+
this.#mainNodeSubsystem.clearNodeInputConnection(node, index);
|
|
7174
|
+
}
|
|
7151
7175
|
addNode(node) {
|
|
7152
7176
|
this.#mainNodeSubsystem.addNode(node);
|
|
7153
7177
|
}
|