Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Joel Edwardson
    @joeledwardson
    grand
    I've been going through some of the rete js extensions and started to add types for them, and will do a PR soon
    makes it easier to work with typescript when using them
    Joel Edwardson
    @joeledwardson
    @Ni55aN I just added a PR for the react render plugin, if anyone has comments let me know
    Yair Cohen
    @yaircohendev
    Hey, anyone using Rete with Angular and Angular-renderer in production? We want to use it but not sure because it's experimental
    GarciaYorgio
    @GarciaYorgio
    HI there, anyone can work as freelance in bubble.io?
    Damian Grzanka
    @magicaltoast
    Screenshot from 2022-03-09 12-31-54.png
    Screenshot from 2022-03-09 12-32-04.png
    Any idea how can i remove and add socket from node and remove connections?
    Alex
    @Hatead1
    This message was deleted
    async function callback( i ) {
      if ( i ) {
          let out = new Rete.Output( 'out', 'text', numSocket );
          node.addOutput( out );
          await node.update();
          setTimeout( () => { this.emitter.view.updateConnections( { node } ); }, 10 );
      } else {
          let o = this.emitter.nodes.find( ne => ne.id === node.id ).outputs.get( 'out' );
          if ( o ) {
            o.connections.slice().map( this.emitter.removeConnection.bind( this.emitter ) );
            node.removeOutput( o );
            await node.update();
            setTimeout( () => { this.emitter.view.updateConnections( { node } ); }, 10 );
          }
        }
      }
    }
    I call this function from the control, so "emitter", not "editor".
    Damian Grzanka
    @magicaltoast
    @Hatead1 Thanks that works
    Damian Grzanka
    @magicaltoast

    I want to create a node that previews previous values using react, rete.js, and Chart JS.

    But change of props or call to update method is not refreshing the component.

    How can I fix that?

    Relevant code below or codesandbox link with boilerplate

    class ChartController extends Rete.Control {
        static component = ({ data }) => {
            console.log("Rerender")
            return <Line data={data} ></Line>
        }
    
        addValue(value) {
            this.props.data.datasets[0].data.push({ y: value, x: new Date().getTime() })
            this.update()
        }
    
        constructor(key) {
            super(key)
            this.render = 'react';
            this.component = ChartController.component
            this.props = {
                data: {
                    "datasets": [
                        {
                            "fill": true,
                            "data": [{ "y": 0, "x": 1646927922557 }, { "y": 0, "x": 1646927926815 }, { "y": 1, "x": 1646927927804 }, { "y": 2, "x": 1646927927983 }, { "y": 3, "x": 1646927928133 }, { "y": 4, "x": 1646927928287 }, { "y": 5, "x": 1646927928429 }, { "y": 6, "x": 1646927928580 }, { "y": 7, "x": 1646927928726 }, { "y": 8, "x": 1646927928855 }, { "y": 9, "x": 1646927929022 }, { "y": 10, "x": 1646927929142 }],
                            "backgroundColor": "rgba(255, 99, 132, 0.2)",
                            "borderColor": "rgba(255, 99, 132, 1)",
                            "borderWidth": 1
                        }],
                }
            }
        }
    }
    
    export class Preview extends Rete.Component {
        constructor() {
            super("Preview")
        }
    
        builder(node) {
            this.node = node
            this.max_size = 1_000
            this.preview = new ChartController('preview')
    
            return node
                .addInput(new Rete.Input('num', "Input", numSocket, false))
                .addOutput(new Rete.Output('num', "Output", numSocket, false))
                .addControl(this.preview)
        }
    
        worker(_node, inputs, outputs) {
            const base = inputs['num']
            const val = (base.length == 0 || typeof base[0] != 'number') ? 0 : base[0]
            this.preview.addValue(val)
            outputs['num'] = val
            return outputs
        }
    }
    Alex
    @Hatead1
    Maybe you should call this.setState() after push()? (I am not familiar with react)
    Ильяс Хакиев
    @xakslim:matrix.org
    [m]
    Привет всем. В базовом функционале присутствует метод extractInputNodes, который отдает предыдущий элемент, а как мне получить следующий элемент?
    LeoDJ
    @leodj:matrix.org
    [m]
    The preferred language in this chat is English, please
    Alex
    @Hatead1
    "Preferred" does not mean "the only".
    Ильяс Хакиев
    @xakslim:matrix.org
    [m]
    Hi all. In the basic functionality, there is an extractInputNodes method that returns the previous element, but how do I get the next element?
    Alex
    @Hatead1
    how do you call this function?
    velvi-stud
    @velvi-stud
    @Hatead1 is it possible for you send me/us the script you made for collapsible nodes (or, at least, the part you modified)? Thanks in advice <3.
    https://files.gitter.im/5b0f369ed73408ce4f9b523e/foRC/collapser.gif
    Alex
    @Hatead1
    Sorry, no. I use totally rewrited vue-render-plugin and "collapse" functionality integrated into rete.js (not plugin).
    2 replies
    Ethan Snow
    @bombitmanbomb
    I've been mucking around with rete.js for a few days and can't seem to get it to work at all, is it known if this library is incompatible with TypeScript/Webpack? There are no errors and the editor/plugins and connecting nodes work as expected, But no worker() methods ever run.
    The projects on Codepen seem to work fine, but not locally.
    Joel Edwardson
    @joeledwardson
    Works fine for me
    With typescript and react that is, not sure about vue
    M̵̞̗̝̼̅̏̎͝Ȯ̴̝̻̊̃̋̀Õ̷̼͋N̸̩̿͜ ̶̜̠̹̼̩͒
    @lalalune
    Hey all -- I have a rete graph with task plugin, I was wondering how I could reset all of the outputs without using the needReset. Some of the nodes break with needReset globally changed one way or the other
    Like, can I just traverse the graph and call reset() on all tasks?
    Spriteiplan
    @Spriteiplan
    Hello, I'm looking for Retejs dev freelance for my chat platform. Thanks
    Alex
    @Hatead1
    editor.on('renderconnection', ({el, connection, points}) => { 
         const element = el.firstChild.firstChild;  
         element.setAttribute('style', 'stroke:orange !important'); } 
    );
    Works normally with Vue, but i сan't help with Angular.
    Ghost
    @ghost~5dc028e1d73408ce4fcfe94c

    @Hatead1 Hey man, thanks so much for your kind reply. That works but it changes all the output connection colors to orange, which isn't what I want. I guess I could not explain it properly what I want to achieve. Please take a look at this photo:

    https://i.ibb.co/Q9pH4hy/Screenshot-from-2022-05-10-14-49-50.png

    Alex
    @Hatead1

    I just tested the opportunity, but in my environment code like

    editor.on('renderconnection', ({el, connection, points}) => { 
      const element = el.firstChild.firstChild; 
      element.setAttribute('style', connection.output.node.meta.bgcolor); } );
    }

    also works

    Ghost
    @ghost~5dc028e1d73408ce4fcfe94c
    @Hatead1 omg this is great. It worked. You're a genius. Pray that you become a billionaire soon.
    Alex
    @Hatead1
    :) good luck
    Ghost
    @ghost~5dc028e1d73408ce4fcfe94c
    Thanks mate
    Ghost
    @ghost~5dc028e1d73408ce4fcfe94c
    Hey @Hatead1 , it's me again. Sorry to bother you. But I am kind of stuck. So the above code works perfectly but the problem right now is if I change the background color, the existing connection colors only change after page refresh. Is there like a built in event or something that would trigger and change the connection colors right away without page refresh?
    Alex
    @Hatead1
    Try
    setTimeout( () => { this.editor.view.updateConnections({ node }); }, 10);
    after bg changed
    GarciaYorgio
    @GarciaYorgio
    Hi there, any way to drag multiples nodes?
    3 replies
    dzm-brimit
    @dzm-brimit
    Всем привет! Может кто-то сможет подсказать в чём проблема?
    Hi all! Does someone tell me what is the problem?
    retejs/rete#574
    Alex
    @Hatead1
    worker(node, inputs, outputs) , not worker(node, outputs) in button components
    dzm-brimit
    @dzm-brimit
    @Hatead1 OMG! You my Hero!
    Joel Edwardson
    @joeledwardson
    is anyone else permitted write access to the retejs repositories?
    I've been trying to add types
    but had a PR open for months and hasn't been accepted
    Vitaliy Stoliarov
    @Ni55aN
    @joeledwardson sorry, I didn't pay much attention to Github notifications
    Thanks for reminding me, I'll review it now
    ArutaGerman
    @ArutaGerman

    @Ni55aN Встретил 2 ошибки (vue 2) в кастомном компоненте узла:

    1. Компонент кнопки, которая во всём проекте используется, не рендерится - в ядро vue передаётся null, но если создать клон кнопки и название отличается на одну букву - рендерится нормально - передаётся нормальный инстанс кнопки.
    2. Использую кастомную библиотеку компонентов (назовём её ESMP) и при попытке использовать компонент из SM в компоненте узла получаю ошибку "Unknown custom element: <esmp-icon> - did you register the component correctly?". Если, прямо, в компоненте узла или вставляемом в узел компоненте, указать импорт <esmp-icon> - работает, но не для всех компонентов.

    В связи с чем вопросы:

    1. Почему в пункте 1 такое поведение и как это исправить?
    2. Как подключить библиотеку компонентов по типу подключения плагинов editor.use(plaginName), чтобы не было ошибки как во 2 пункте?
    Nicolas Feyer
    @nicolasfeyer

    Hi everyone

    First of all, I started using rete.js and I find this package very useful!

    I've been looking for a while for an example to allow me to group input/output (collapsing) because my nodes get too long sometimes.
    I read that @haris-75 was looking for the same thing but I don't know if he found an example
    Thanks for your help

    velvi-stud
    @velvi-stud
    @Hathead1 sorry for bother you again. I just wanna know if there is a possible way to automatically highlight all connected nodes to a selected node, otherwise, if it is easyer, highlight the connection instead.
    I just fuound a way to take all connected node / connection
    Thanks in advice.