retejs/auto-arrange-plugin

auto-arrange-plugin's Issues

Multiple flows

If you have multiple trees in your graph (i.e. a forest), they are stacked on top of each other.

i.e.
A -> B
C -> D

Becomes
AC ->-> BD

It would be nice if separate flows could be arranged to be non-overlapping.

Add example codepen to README

Hi,

It would be great if there was a codepen example of how the plugin is integrated into an app like the main project. (For newbies like me)

Cheers,
Ben

Arrange of complex scheme

Arrange multiple output nodes (multiple depth)

Vertical Alignment support.

There are cases where people would want to align there nodes vertically instead of horizontally.

Attached is an image of the proposed feature.

I am going to submit a PR for a implementation. We might need to refactor it later

AutoArrange module cause overflow

I would auto arrange nodes generated automatically

I'm using this config

editor.use(AutoArrangePlugin, { margin: { x: 50, y: 50 }, depth: 0 })

The problem is that my components get clipped ouf of the container.

Is there a way to adapte editor the it's container ?

Here the issue

TypeError: Cannot read property 'outputs' of undefined

Here's the issue reproduced on CodeSandbox (browser view)

AutoArrange throws the type error:
TypeError: Cannot read property 'outputs' of undefined

Relevant dependencies:

    "rete": "1.2.2",
    "rete-area-plugin": "^0.2.1",
    "rete-auto-arrange-plugin": "^0.3.0",
    "rete-connection-plugin": "0.7.0",
    "rete-context-menu-plugin": "^0.3.7",
    "rete-react-render-plugin": "^0.1.2",

AutoArrange cut on top of window

I would auto arrange nodes generated automatically

I'm using this config

editor.use(AutoArrangePlugin, { margin: { x: 50, y: 50 }, depth: 0 })

The problem is that my components get clipped ouf of the container.

Is there a way to adapte editor the it's container ?

Here the issue

Adding AutoArrangePlugin to typescript project

I tried adding the auto arrange plugin to my app and it looks like the EventsTypes definition does not have a 'arrange' option which causes an error:

editor.use(AutoArrangePlugin, { margin: {x: 50, y: 50 }, depth: 0 }); // depth - max depth for arrange (0 - unlimited)

editor.trigger('arrange', { node });

Causes:

Argument of type '"arrange"' is not assignable to parameter of type '"componentregister" | "nodecreate" | "nodecreated" | "noderemove" | "noderemoved" | "connectioncreate" | "connectioncreated" | "connectionremove" | "connectionremoved" | ... 31 more ... | "destroy"'.

Licensing incompatibility with elkjs

Hi there!

We are currently in the process of using rete in our commercial application and I was reviewing the list of dependencies it added to our tree. I saw that this plugin uses elkjs which uses the EPL 2.0 license (https://github.com/kieler/elkjs/blob/master/LICENSE.md). I am not a lawyer but from my reading this license is not compatible with an MIT license as a derivative and it just creates unnecessary licensing issues for commercial projects. In theory if you only use the lib and don't modify it, only it's not considered derivative but then a bundler that minifies the code and mix it with other dependencies could be considered a derivative work.

I think it would be best to use another dependency with a more permissive license since the author is unwilling to dual license it (kieler/elkjs#158).

Thanks!

The layout operation overrides the style height of my node (and crashes if height is not defined)

Rete library is wonderfull, I have however a little issue on a quite specific case:

As my node content is dynamic, I would like the height of my nodes to also be dynamic.

• If no height as number property on my node is defined, the layout operation is crashing
• If I don't bind the height style value in my vue3 node component, it is overridden by the layout operation

Would it be possible to prevent the layout operation to set the height style onto the node content element ?

as an example,

Beginning of my node definition using vue3 component:

<template>
  <div class="node" :class="{ selected: data.selected }" :style="nodeStyles()">
...

nodeStyleFunction implementation:

function nodeStyles() {
      return {
        width: Number.isFinite(this.data.width) ? `${this.data.width}px` : '',
        // height: Number.isFinite(this.data.height) ? `${this.data.height}px` : ''
      }
    }

invoking await arrange.layout({ applier: new StandardApplier() }); sets manually the style.height into my html component (oustide of the life vuejs cycle)

Am I missing something ?

Thank you

Charles

Maximum call stack size exceeded

Hi,
I would like to report a bug I have just found. Even though the graph does not have any recursive connection I am getting a following error:

auto-arrange.js:10 Uncaught RangeError: Maximum call stack size exceeded
at String.concat ()
at n.value (auto-arrange.js:10)
at n.value (auto-arrange.js:26)
at auto-arrange.js:26
at Array.map ()
at n.value (auto-arrange.js:26)
at auto-arrange.js:26
at Array.map ()
at n.value (auto-arrange.js:26)
at auto-arrange.js:26

Here is the graph that caused this bug:

I am using native arrange-plugin without any changes and I would really appreciate any suggestion that might solve this issue.

Cheers,
Petr

Auto Arrange margin bug.

Hi @Ni55aN

First and foremost I would love to thank you for this really great library and for the active development you are doing to keep it updated and free of bugs.

Since this is Hacktober and I found a few bugs / missing features in a some plugins, I would like to create a couple of issues and would like to get them assigned to me. The issues I faced have already been resolved by writing custom code for it. But I think the right place for those fixes is to be in the official npm repos you maintain.

Issue Description: When I first started using the auto-arrange plugin for rete.js I noticed that margins for nodes with more height then other were a bit off (See attached image).

Cause: The problem was that the addition of margin to node height was being done before translating the node positions.

Fix: Need to put the margin addition code at the very end of that block after the nodes have been translated.

Please let me know if you are good with me submitting the PR for this fix. I will do that asap.
I will be creating other issues or feature requests that I think should be part of these plugins as well.

Here is an example on Codesandbox if you want to have a look at it.

Arrange should take care of the frame comment

If your nodes are wrapped in a frame comment, the comment frame is left at its original position when autoArranging

Auto Arrange with Stage0

Hello,

i am using rete in a Vue3 enviroment, and as the Vue 3 render plugin isnt working as of right now with Vue3 , i am using the Stage0 render plugin.

Does the auto-arrange-plugin only works with the Vue Renderer? I cant seem to make it work the the Stage0 renderer.