newcat / baklavajs

Graph / node editor in the browser using VueJS
http://baklava.tech
MIT License
1.57k stars 116 forks source link

[v2]"Troubleshooting: 'Could not find value for interface' Error When Outputting Pre-defined Interface to Another Node" #313

Closed erwanito12 closed 11 months ago

erwanito12 commented 1 year ago

when I want to output a Pre-defined interface or a personal Display Component to another node, I get an error: Could not find value for interface

import ReactiveOutputTest from "./ReactiveOutputTest.vue";
import { TextInputInterface } from "baklavajs";

class ReactiveOutputTestInterface extends NodeInterface<number> {
    constructor(name: string, value: number) {
        super(name, value);
        this.setComponent(markRaw(ReactiveOutputTest));
    }
}

export default defineNode({
    type: "ReactiveOutputTest",
    inputs: {
        a: () => new ReactiveOutputTestInterface("Test", 3),
    },
    outputs: {
        b: () => new TextInputInterface("Name", "Edit me"),
    },
});

ReactiveOutputTest.vue:

<template>
    <button @click="add" >{{ modelValue }} </button>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
    props: {
        modelValue: {
            type: Number,
            // readonly: false,
            required: true,
        },
    },
    emits: ["update:modelValue"],
    setup(props, { emit }) {
        const add = () => {
            console.log('modelValue', props.modelValue);
            console.log('modelValue', props);
            emit("update:modelValue", props.modelValue + 1);
            console.log('modelValue+1', props.modelValue);
        };
        return { add };
    },
});
</script>

image image

newcat commented 11 months ago

Thanks, will be fixed in the next release