newcat / baklavajs

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

Argument of type '<T>(intf: NodeInterface<T>, type: NodeInterfaceType<T>) => void' is not assignable to parameter of type 'NodeInterfaceMiddleware<number, #386

Closed arthurwolf closed 5 months ago

arthurwolf commented 5 months ago

Following https://v2.baklava.tech/nodes/interface-types.html I created my types:

type Image = {
    url: string;
    width: number;
    height: number;
};

type Sound = {
    url: string;
    duration: number;
};

export const textType     = new NodeInterfaceType<string >("text");
export const numberType   = new NodeInterfaceType<number >("number");
export const booleanType  = new NodeInterfaceType<boolean>("boolean");
export const imageType    = new NodeInterfaceType<Image  >("image");
export const colorType    = new NodeInterfaceType<string >("color");
export const paletteType  = new NodeInterfaceType<string >("palette");
export const soundType    = new NodeInterfaceType<Sound  >("sound");
export const durationType = new NodeInterfaceType<number >("duration");

// Aggregate all exports into a single object
const Types = {  textType,  numberType, booleanType, imageType, colorType, paletteType,  soundType, durationType };

// Export the aggregate object
export default Types;

And then tried using them:

// Baklava.
import { IBaklavaViewModel, NumberInterface, SelectInterface, NodeInterfaceMiddleware } from "baklavajs";
import { ButtonInterface, IEditorState, NodeInterface, defineNode }   from "baklavajs";
import { BaklavaInterfaceTypes, setType }                             from "@baklavajs/interface-types";

// Scene manager stuff.
import * as Types       from './scene_interface_types';

[...]

        // Make a node.
        const panel_node = defineNode({
            type: "Panel",
            inputs: {
            },
            outputs: {
                full_image  : () => new NodeInterface("Full image"  , 0).use(setType, Types.imageType),
                masked_image: () => new NodeInterface("Masked image", 1).use(setType, Types.imageType),
                //number2: () => new NumberInterface("Number", 10),
            },
        });
        this.baklava.editor.registerNodeType(panel_node)

        const scene_manager : SceneManager = this;

And under setType I have a red underline, and it says :

Argument of type '<T>(intf: NodeInterface<T>, type: NodeInterfaceType<T>) => void' is not assignable to parameter of type 'NodeInterfaceMiddleware<number, [NodeInterfaceType<Image>]>'.
  Types of parameters 'type' and 'args_0' are incompatible.
    Type 'NodeInterfaceType<Image>' is not assignable to type 'NodeInterfaceType<number>'.
      Type 'Image' is not assignable to type 'number'.ts(2345)
(alias) function setType<T>(intf: NodeInterface<T>, type: NodeInterfaceType<T>): void
import setType

The code still runs, but:

  1. Typically if something is underlined red, there's something wrong/to fix
  2. The feature where it's supposed to refuse connecting one type to another type doesn't seem to work.

Thanks a lot in advance. (I'm working on a pretty big project where I'll be using pretty much all documented features, and might need to extend the project somewhat, so expect to hear from me some more. really cool library btw)

arthurwolf commented 5 months ago

nevermind...