Add support for exposing node parameter inputs (#866)

* Add exposing inputs to graph

* Use uuids and better node positioning

* Fix accidentally refering to the wrong grid spacing

* Secondary input without primary input

* Cleanup document node types

* Rename to input and addend
This commit is contained in:
0HyperCube 2022-11-22 19:57:08 +00:00 committed by Keavon Chambers
parent 0a78ebda25
commit 3dd9e88655
8 changed files with 174 additions and 109 deletions

View file

@ -45,11 +45,11 @@
<div class="primary">
<div class="ports">
<div
v-if="node.exposedInputs.length > 0"
v-if="node.primaryInput"
class="input port"
data-port="input"
:data-datatype="node.exposedInputs[0].dataType"
:style="{ '--data-color': `var(--color-data-${node.exposedInputs[0].dataType})`, '--data-color-dim': `var(--color-data-${node.exposedInputs[0].dataType}-dim)` }"
:data-datatype="node.primaryInput"
:style="{ '--data-color': `var(--color-data-${node.primaryInput})`, '--data-color-dim': `var(--color-data-${node.primaryInput}-dim)` }"
>
<div></div>
</div>
@ -66,8 +66,8 @@
<IconLabel :icon="nodeIcon(node.displayName)" />
<TextLabel>{{ node.displayName }}</TextLabel>
</div>
<div v-if="node.exposedInputs.length > 1" class="arguments">
<div v-for="(argument, index) in node.exposedInputs.slice(1)" :key="index" class="argument">
<div v-if="node.exposedInputs.length > 0" class="arguments">
<div v-for="(argument, index) in node.exposedInputs" :key="index" class="argument">
<div class="ports">
<div
class="input port"
@ -366,7 +366,7 @@ export default defineComponent({
const links = this.nodeGraph.state.links;
this.nodeLinkPaths = links.flatMap((link) => {
const connectorIndex = 0;
const connectorIndex = Number(link.linkEndInputIndex);
const nodePrimaryOutput = (containerBounds.querySelector(`[data-node="${String(link.linkStart)}"] [data-port="output"]`) || undefined) as HTMLDivElement | undefined;
@ -511,8 +511,8 @@ export default defineComponent({
this.linkInProgressToConnector = new DOMRect(e.x, e.y);
}
} else if (this.draggingNodes) {
const deltaX = Math.round((e.x - this.draggingNodes.startX) / this.transform.scale / this.gridSpacing);
const deltaY = Math.round((e.y - this.draggingNodes.startY) / this.transform.scale / this.gridSpacing);
const deltaX = Math.round((e.x - this.draggingNodes.startX) / this.transform.scale / GRID_SIZE);
const deltaY = Math.round((e.y - this.draggingNodes.startY) / this.transform.scale / GRID_SIZE);
if (this.draggingNodes.roundX !== deltaX || this.draggingNodes.roundY !== deltaY) {
this.draggingNodes.roundX = deltaX;
this.draggingNodes.roundY = deltaY;

View file

@ -82,6 +82,8 @@ export class FrontendNode {
readonly displayName!: string;
readonly primaryInput!: FrontendGraphDataType | undefined;
readonly exposedInputs!: NodeGraphInput[];
readonly outputs!: FrontendGraphDataType[];