[v2] Problem: Creating reactive display components for output

[erwanito12]

I have a problem with display components in output, I have adapted the example from the documentation. When the display component is in input, it is reactive, the value of modelValue increments when I click, but not in output. How can I make it reactive and transmit the new value to the output when the display component is set to output? I have this problem with .setPort(true) or false

<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>

import { markRaw } from "vue";
import { NodeInterface, setType } from "baklavajs";
import MyComponent from "./MyComponent.vue";
import { numberType } from "@/interfaceTypes";

export class MyComponentInterface extends NodeInterface {
    type: any;
    constructor(name: string, value: any) {
        super(name, value);
        this.setComponent(markRaw(MyComponent));
        this.use(setType, numberType);
    }
}

[newcat]

I can't reproduce this, for me it works. How do you define your node? My test node looks like this:

import { markRaw } from "vue";
import { NodeInterface, defineNode } from "@baklavajs/core";
import ReactiveOutputTest from "./ReactiveOutputTest.vue";

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 ReactiveOutputTestInterface("Test", 1),
    },
});

(for ReactiveOutputTest.vue I just copied your code)

[erwanito12]

In your case, the component is responsive, but I get this error if I connect an OutputNode :

Here's a simplified example of what I'd like to do: perform operations in the calculate function, send the result to the display component and in the display component, perform further operations on the received value, then return the result to the output. In this case, the value returned is always that of the operations performed in the calculate function. From memory, I was able to do this in backlava v1. My real-life case: I need to visualize the received value: props.modelValue in the display component using a canvas, make a request to a server with this value, then return the result of the request to the output.
as in this simplified example:

import { markRaw } from "vue";
import { NodeInterface, defineNode } from "@baklavajs/core";
import ReactiveOutputTest from "./ReactiveOutputTest.vue";
import { NumberInterface, SelectInterface } 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),
        number1: () => new NumberInterface("Number", 1),
        number2: () => new NumberInterface("Number", 10),
        operation: () => new SelectInterface("Operation", "Add", ["Add", "Subtract"]).setPort(false),
    },
    outputs: {
        output: () => new ReactiveOutputTestInterface("Test", 1),
    },
    calculate({ number1, number2, operation }) {
        let output: number;
        if (operation === "Add") {
            output = number1 + number2;
        } else if (operation === "Subtract") {
            output = number1 - number2;
        } else {
            throw new Error(`Unknown operation: ${operation}`);
        }
        return { output };
    },
});

in this case, the output always returns the value of the calculate function operation and not the value of the increment operation performed by the display component.