retejs / auto-arrange-plugin Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://retejs.org
License: MIT License
Home Page: https://retejs.org
License: MIT License
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.
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
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"'.
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",
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!
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.
Arrange multiple output nodes (multiple depth)
If your nodes are wrapped in a frame comment, the comment frame is left at its original position when autoArranging
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
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.