retejs / rete

JavaScript framework for visual programming
https://retejs.org
MIT License
9.8k stars 643 forks source link

Unable to use AutoArrangePlugin with Angular 17 as schemes mismatch #696

Closed gundupatil closed 3 days ago

gundupatil commented 4 months ago

Is it possible to use the auto Arrange plugin for the below mentioned scheme. Auto Arrange only works when nodes have fixed height and width

type Schemes = GetSchemes<
  ClassicPreset.Node,
  ClassicPreset.Connection<ClassicPreset.Node, ClassicPreset.Node>
>;

Scheme given for AutoArrange plugin

class Node extends ClassicPreset.Node {
  width = 180;
  height = 120;
}

class Connection<N extends Node> extends ClassicPreset.Connection<N, N> {}
type Schemes = GetSchemes<Node, Connection<Node>>;

Is there a efficient way I can re arrange all the nodes having different schemes tried with zoom functionality area.area.transform.k also area.area.zoom()

dragged values will not be repositioned to initial state Help is appreciated

Ni55aN commented 4 months ago

what TS error do you receive?

The app generated via Rete Kit doesn't throw any error on build

npx rete-kit app -n ang17 -s angular -v 17 -f "Angular render,Order nodes,Zoom at,Auto arrange,Dataflow engine,Selectable nodes"
gundupatil commented 4 months ago

what TS error do you receive?

The app generated via Rete Kit doesn't throw any error on build

npx rete-kit app -n ang17 -s angular -v 17 -f "Angular render,Order nodes,Zoom at,Auto arrange,Dataflow engine,Selectable nodes"

Sorry my question was Is it possible to use the auto Arrange plugin for the below mentioned scheme. Auto Arrange only works when nodes have fixed height and width?

gundupatil commented 4 months ago

Trying the hack around to get the height and width of the node after the autoArrange

setTimeout(async () => {
        editor.getNodes().forEach(async (node) => {
          const nodes: NodeListOf<HTMLElement> = document.querySelectorAll(`node-${node.id}`);
          nodes.forEach(node => {
            node.style.height = 'auto';
            node.style.width = ' 288px';
          })
        })

    },500);
    await arrange.layout({ applier: animate ? applier : undefined });
      AreaExtensions.zoomAt(area, editor.getNodes());
    },
Ni55aN commented 3 months ago

only works when nodes have fixed height and width?

yes, because Elk.js (the library it's based on) needs width/height to be available before rendering the graph (in most cases).

after the autoArrange

why can't you specify/calculate width/height based on node type and content? Like this https://github.com/retejs/rete-studio/blob/abd5d890c56a748d501ef7c027671dcea3d37908/core/src/nodes.ts#L219

gundupatil commented 2 months ago

assigning node height and width directly did not work.. need to modify node style height and width only.

Ni55aN commented 2 months ago

height and width directly did not work

this works if you don't use arrange.layout (or call area,resize directly)

Otherwise, after updating these properties, you need to call resize explicitly

rete-js[bot] commented 3 weeks ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

rete-js[bot] commented 3 days ago

This issue was closed because it has been stalled for 10 days with no activity.