Documentation

[amfl]

I am struggling to understand how to use the task plugin.

I have seen some components on the site which use it and read the documentation but I still don't get it.

1. What is the difference between an option and an output?
2. In the worker function, why do you sometimes call this.closed and sometimes return values?
3. What is data, and why does it replace outputs?

Sorry if I am being daft.

[Ni55aN]

1. Output with the 'option' type calls the following nodes. Output with the 'output' type only prepares data that other nodes can get from it
2. this.closed works with the 'option' Outputs. It prevents calling of following nodes. If you want to prepare data for other nodes, you must to return it in worker (instead of writing to outputs argument) 3.

   
   task.run('any data');

worker(node, inputs, data) { // the last parameter contains data ('any data' string) that you pass when running task

[amfl]

Thanks @Ni55aN! I don't think I understand it completely yet, but I was able to get some code working with your explanation above.

Just to clarify....

,________,                ,________,                ,________,
|        | --- option --> |        |                |        |
| Node A |                | Node B | --- output --> | Node C |
|________| --- output --> |________|                |________|

In the situation above, Node A can receive an event which would cause it to update Node B because it has an option which connects it. That update CANNOT flow through from Node B to Node C unless there is a new editor.trigger("process"). Is that correct?

[Ni55aN]

In the situation above, Node A can receive an event which would cause it to update Node B because it has an option which connects it

Exactly

That update CANNOT flow through from Node B to Node C unless there is a new editor.trigger("process")

Not really, trigger("process") is only required to initialize tasks, not to execute them

1. Next task of node (Node B) will be executed if it has an 'option' connection with current node (Node B). Node C will not be executed, it has no 'option' connection with Node B.
2. We can run Node C. This node requires input data, so Node B will prepare a data and return it to 'output' connection.
3. We can run Node B. The same situation, because the input requires data. Therefore Node A will be executed, and that is all. But Node A will not be executed if there is no connection with the type 'output'

[Ni55aN]

https://github.com/retejs/rete/issues/170

[amfl]

Okay, that makes sense.

Thanks for your detailed answers, @Ni55aN!

[Ni55aN]

@amfl you are welcome!

[hughfenghen]

Hi, execute me. In my case,

1. i want handle user input in Input Component;
2. then send a request with input content;
3. end, show result to page in Text Component。

But, in Text Component, worker not be execute. Is necessary connect Ajax Component and Text Component use option socket?

This is console.log

This is Ajax Component

This is Text Component

My English is not very good, hope you can understand. Thanks.

[Ni55aN]

@hughfenghen does the TextComponent's constructor have a task property? https://rete.readthedocs.io/en/latest/Plugins/#task

[hughfenghen]

yeah, this is TextComponent's code

export class TextComp extends Rete.Component {
  constructor () {
    super('Text')
    this.task = {
      outputs: {}
    }
  }

  builder (node) {
    node.addInput(new Rete.Input('text', 'input', dataSocket))
  }

  async worker (node, inputs, outputs) {
    console.log('-----text worker:', inputs, outputs)
  }
}

package.json

"dependencies": {
    "rete": "^1.0.0-beta.5",
    "rete-connection-plugin": "^0.2.4",
    "rete-context-menu-plugin": "^0.2.4",
    "rete-task-plugin": "^0.1.7",
    "rete-vue-render-plugin": "^0.2.4"
  }

[Ni55aN]

What AjaxComponent' constructor contains ?

[hughfenghen]

@Ni55aN I create a demo https://codesandbox.io/s/oojzmw1vz6

export class AjaxComp extends Rete.Component {
  constructor () {
    super('Ajax')
    this.task = {
      outputs: {
        ajaxOutput: 'output',
        evtAct: 'option'
      }
    }
  }

  builder (node) {
    node.addInput(new Rete.Input('evtAct', 'option', dataSocket))
      .addInput(new Rete.Input('inputStr', 'input str', dataSocket))
      .addOutput(new Rete.Output('ajaxData', 'ajax data', dataSocket))
  }

  async worker (node, inputs, data) {
    console.log('------ajax worker:', inputs, data)

    const rs = await ajax()
    console.log('------ajax result:', inputs, data)
    return { ajaxData: rs }
  }
}

[Ni55aN]

1.AjaxComp should have Output with "action" socket. Otherwise it will not be able to transfer control to the next node. Type of this Outputs is defined in this.task.outputs. So

this.task = {
      outputs: {
        ajaxOutput: 'output',
        evtAct: 'option'
      }
    }

is wrong because evtAct isn't Output, and Output with key ajaxOutput hasn't defined.

This should works:

export class AjaxComp extends Rete.Component {
  constructor () {
    super('Ajax')
    this.task = {
      outputs: {
        evtAct: 'option',
        ajaxData: 'output'
      }
    }
  }

  builder (node) {
    node.addInput(new Rete.Input('evtAct', 'option', actSocket))
      .addInput(new Rete.Input('inputStr', 'input str', dataSocket))
      .addOutput(new Rete.Output('evtAct', 'action', actSocket))
      .addOutput(new Rete.Output('ajaxData', 'ajax data', dataSocket))
  }

  async worker (node, inputs, data) {
    console.log('------ajax worker:', inputs, data)

    const rs = await ajax()
    console.log('------ajax result:', inputs, data)
    return { ajaxData: rs }
  }
}

In short, this plugin requires the object this.task.outputs { : <type (output - for data, option - for action)> } defined in every Component

[hughfenghen]

emm... it working after add a ActionSocket. https://codesandbox.io/s/oojzmw1vz6

But as the number of nodes increases, ActionSocket seems to be redundant.

[Ni55aN]

ActionSocket fulfills its role, sockets for data - its own. Each has its own purpose, so they must be separated.