apps/canvas/src/components/handle-port-out.tsx

import { Handle, Position } from "@xyflow/react";
import { ReactElement } from "react";
import { v4 as uuidv4 } from "uuid";

export class PortOut {
    public readonly id: string;
    // private name: string;
    // private value: number;

    constructor() {
        this.id = uuidv4();
        // this.name = "";
        // this.value = 0;
    }

    public handle(): ReactElement {
        return (
            <Handle 
                id={this.id} 
                type={"source"} 
                position={Position.Top}
            />
        )
    }
}