Have trouble setup selectable-connections example

[linonetwo]

Try to follow https://retejs.org/examples/selectable-connections , but don't know what is the minimal change set to apply to my code

    "rete": "2.0.0-beta.7",
    "rete-area-plugin": "2.0.0-beta.7",
    "rete-connection-plugin": "2.0.0-beta.11",
    "rete-dock-plugin": "2.0.0-beta.4",
    "rete-minimap-plugin": "2.0.0-beta.5",
    "rete-react-render-plugin": "2.0.0-beta.14",
    "rete-render-utils": "2.0.0-beta.9",

The console log here is never called

/* eslint-disable unicorn/no-null */
/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/strict-boolean-expressions */
import * as React from 'react';
import { type ClassicScheme, Presets } from 'rete-react-render-plugin';
import styled from 'styled-components';

const Svg = styled.svg`
  overflow: visible !important;
  position: absolute;
  pointer-events: none;
`;

const Path = styled.path<{ selected?: boolean; styles?: (props: any) => any }>`
  fill: none;
  stroke-width: 5px;
  stroke: ${(props) => (props.selected ? 'rgb(255, 217, 44)' : 'steelblue')};
  pointer-events: auto;
  ${(props) => props.styles?.(props)}
`;

const HoverPath = styled.path`
  fill: none;
  stroke-width: 15px;
  pointer-events: auto;
  stroke: transparent;
`;

export function SelectableConnection(props: {
  click?: () => void;
  data: ClassicScheme['Connection'] & {
    isLoop?: boolean;
    selected?: boolean;
  };
  styles?: () => any;
}) {
  const { path } = Presets.classic.useConnection();

  // DEBUG: console path
  console.log(`path`, path);
  if (!path) return null;

  return (
    <Svg
      onPointerDown={(event) => {
        event.stopPropagation();
      }}
      onClick={props.click}
      data-testid='connection'
    >
      <HoverPath d={path} />
      <Path selected={props.data.selected} styles={props.styles} d={path} />
    </Svg>
  );
}

The console log here inside customize: { connection() { is never called, too

/* eslint-disable @typescript-eslint/strict-boolean-expressions */
import { type INodeData } from 'memeloop-plugin';
import { createRoot } from 'react-dom/client';
import { type GetSchemes, NodeEditor } from 'rete';
import { AreaExtensions, AreaPlugin } from 'rete-area-plugin';
import { BidirectFlow, ConnectionPlugin, Presets as ConnectionPresets } from 'rete-connection-plugin';
import { DockPlugin, DockPresets } from 'rete-dock-plugin';
import { type MinimapExtra, MinimapPlugin } from 'rete-minimap-plugin';
import { Presets, type ReactArea2D, ReactRenderPlugin } from 'rete-react-render-plugin';
import { buildNodeFromNodeData, removeNodeWithConnections, type ReteConnection, type ReteNode } from '../node/Base';
import { SelectableConnection } from './SelectableConnection';

type Schemes = GetSchemes<ReteNode, ReteConnection<ReteNode, ReteNode>>;
const editor = new NodeEditor<Schemes>();

type AreaExtra = ReactArea2D<any> | MinimapExtra<Schemes>;

export async function createReteEditor(container: HTMLElement, availableNodes: INodeData[] = []) {
  const area = new AreaPlugin<Schemes, AreaExtra>(container);
  const render = new ReactRenderPlugin<Schemes>({ createRoot });
  const dock = new DockPlugin<Schemes>();
  const minimap = new MinimapPlugin<Schemes, AreaExtra>();
  const connection = new ConnectionPlugin<Schemes, AreaExtra>();
  render.addPreset(Presets.classic.setup({ area }));
  dock.addPreset(DockPresets.classic.setup({ area, size: 100, scale: 0.6 }));
  render.addPreset(Presets.minimap.setup({ size: 200 }));
  connection.addPreset(ConnectionPresets.classic.setup());

  const selector = AreaExtensions.selector();
  const accumulating = AreaExtensions.accumulateOnCtrl();
  AreaExtensions.selectableNodes(area, selector, { accumulating });

  function SelectableConnectionBind(props: { data: Schemes['Connection'] }) {
    const id = props.data.id;
    const label = 'connection';

    return (
      <SelectableConnection
        {...props}
        click={() => {
          selector.add(
            {
              id,
              label,
              translate() {},
              unselect() {
                props.data.selected = false;
                void area.update('connection', id);
              },
            },
            accumulating.active(),
          );
          props.data.selected = true;
          void area.update('connection', id);
        }}
      />
    );
  }
  render.addPreset(
    Presets.classic.setup({
      area,
      customize: {
        connection() {
          // DEBUG: console
          console.log(`connection`);
          return SelectableConnectionBind;
        },
      },
    }),
  );

  connection.addPreset(() => new BidirectFlow());
  editor.use(area);
  area.use(dock);
  area.use(connection);
  area.use(render);
  area.use(minimap);

  AreaExtensions.simpleNodesOrder(area);

  setTimeout(() => {
    void AreaExtensions.zoomAt(area, editor.getNodes());
  }, 10);

  for (const availableNode of availableNodes) {
    dock.add(() => buildNodeFromNodeData(availableNode));
  }
  return {
    removeSelected: async () => {
      for (const item of editor.getConnections()) {
        if (item.selected) {
          await editor.removeConnection(item.id);
        }
      }
      for (const item of editor.getNodes()) {
        if (item.selected) {
          await removeNodeWithConnections(editor, item.id);
        }
      }
    },
    destroy: () => {
      area.destroy();
    },
  };
}

And extend the base class as in the example

export class ReteNode extends ClassicPreset.Node implements INodeMetadata, INodeSize {
  width: number;
  height: number;
  name: string;
  description: string;
  nodeType: BaseNodeType;
  usage: string;
  constructor(config: INodeData) {
    // TODO: translate name using i18n
    super(config.name ?? 'Unnamed Node');
    this.width = config.width ?? 200;
    this.height = config.height ?? 200;
    this.name = config.name ?? '';
    this.description = config.description ?? '';
    this.nodeType = config.nodeType ?? BaseNodeType.controlFlowNode;
    this.usage = config.usage ?? '';
    this.id = config.id ?? nanoid();
    // TODO: load saved value, if loading node from a graph.
  }
}

export class ReteConnection<A extends ReteNode, B extends ReteNode> extends ClassicPreset.Connection<
  A,
  B
> {
  selected?: boolean;
}

[Ni55aN]

addPreset for classic preset called twice

[Ni55aN]

The line render.addPreset(Presets.classic.setup({ area })); should be removed

[linonetwo]

Thanks, this absolutely helps. I will keep trying the latest version of every feature.