[v2]"Integration of setPort(true) Causes Disappearance of Display Component View in BaklavaJS v2

[erwanito12]

I've made a simple example of the logic I'd like to use.
I'd like to make an output display Component that can both display a view in which you can perform operations on values and display them via canvas, for example, and a port to transmit these modified values to subsequent nodes. This was possible with version 1 of baklavaJS.
The problem is that as soon as I setPort(true) the Component display view disappears.

export default defineNode({ type: "OutputNode2", inputs: { myCompIn: () => new MyComponentInterface("myComp", 10).setPort(true), text: () => new NodeInterface("Text", "").use(setType, stringType), boolean: () => new CheckboxInterface("Boolean", false).use(setType, booleanType), }, outputs: { myCompOut: () => new MyComponentInterface("myComp", 0).setPort(false), // myComp: () => new NodeInterface("myComp", 0).setPort(true), }, calculate(inputs: any) { console.log(inputs.myCompIn) return {myCompOut: inputs.myCompIn }; }, });

export default defineNode({ type: "OutputNode3", inputs: { // myCompIn: () => new MyComponentInterface("myComp", 10).setPort(true), text: () => new NodeInterface("Text", "").use(setType, stringType), boolean: () => new CheckboxInterface("Boolean", false).use(setType, booleanType), }, outputs: { myCompOut: () => new MyComponentInterface("myComp", 0).setPort(true), // myComp: () => new NodeInterface("myComp", 0).setPort(true), }, calculate(inputs) { console.log(inputs) return {myCompOut: inputs.text}; }, });

[newcat]

Fixed in v2.0.2-beta.5

[erwanito12]

I have another problem, I used the example in the documentation. When the display component is in input, it's reactive: the value of modelValue increments when I click, but not in output. How can I make it reactive and send the new value to the output?
`
<button @click="add" >{{ modelValue }}

<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 is just an example, the interface types plugin works a bit different
this.use(setType, numberType);
}
}

const i = new MyComponentInterface("My Interface",0);
console.log(i.value); // Affiche : 0
console.log(i.component === MyComponent); // Affiche : true
console.log(i.type); // Affiche : "number"`