retejs / angular-plugin Goto Github PK

Description

Support for a new major version was recently requested: https://discord.com/channels/1081223198055604244/1088598977735299142/1258076129474904155

Suggested Solution

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

im currently trying to insert a control into the custom node, but for some reason the (click)="method()" is not been trigger for the control. not event console.log(), the click event from the template is not been trigger at all, but i use (mouseenter)="method()" then it works, but is just with click or dbclick event.

Control Template

<div class="ml-3">
  <button
    #menubtn
    pButton
    (click)="toggleNodeMenu($event)"
    class="p-button-outlined"
    icon="material-icons-round mi-add"></button>
  <p-overlayPanel styleClass="node-menu-panel" #op>
    <p-menu styleClass="node-menu" [model]="items"></p-menu>
  </p-overlayPanel>
</div>

component

export class NodeMenuComponent {
  @Input() data!: NodeMenuControl;
  @ViewChild('op') overlayPanel!: OverlayPanel;
  @Output() readonly onMenuOpen = new EventEmitter<boolean>();

  isNodeMenuOpen = false;

  readonly items: MenuItem[] = [
    {
      label: 'Intersector',
      icon: 'material-icons-round mi-join-inner',
      command: () => this.addOperatorNode(OPERATORTYPE.INTERSECTOR),
    },
    {
      label: 'Validator',
      icon: 'material-icons-round mi-checklist-rtl',
      command: () => this.addOperatorNode(OPERATORTYPE.VALIDATOR),
    },
  ];

  constructor() {}

  toggleNodeMenu(event: MouseEvent): void {
    console.log('here');
    this.overlayPanel.toggle(event);
    this.isNodeMenuOpen = !this.isNodeMenuOpen;
    this.onMenuOpen.emit(this.isNodeMenuOpen);
  }

  async addOperatorNode(operatorType: OPERATORTYPE) {
    const currentNode = Object.fromEntries(this.data.area.nodeViews)[this.data.nodeId];
    const nodePosition = currentNode.position;
    const newOperatorNode = operatorNodeFactory(operatorType);
    await this.data.editor.addNode(newOperatorNode);
    await this.data.area.translate(newOperatorNode.id, {
      ...nodePosition,
      x: nodePosition.x === 0 ? nodePosition.y * 2 : nodePosition.x * 2,
    });

    createConnection({
      source: this.data.editor.getNode(this.data.nodeId),
      target: { node: newOperatorNode },
      editor: this.data.editor,
    });
  }
}

node-control

export class NodeMenuControl extends ClassicPreset.Control {
  editor: NodeEditor<Schemes>;
  area: AreaPlugin<Schemes, AreaExtra>;
  nodeId: string;
  constructor(nodeId: string, editor: NodeEditor<Schemes>, area: AreaPlugin<Schemes, AreaExtra>) {
    super();
    this.nodeId = nodeId;
    this.editor = editor;
    this.area = area;
  }
}

editor-creator

    const moduleGroupNode = new ModuleGroupNode('Address', editor, area);
    const moduleGroupMenu = new NodeMenuControl(moduleGroupNode.id, editor, area);
    moduleGroupNode.addControl('control', moduleGroupMenu);
    await editor.addNode(moduleGroupNode);
    await area.translate(moduleGroupNode.id, { x: 0, y: -50 });

Hi there,

When I'm running my angular project locally it works fine with angular-cli. Also my AOT build succeed. However, I'm unable to load my webapp after deploying it on a web server. I'm getting this error:

main-es2015.js:208629 Uncaught ReferenceError: regeneratorRuntime is not defined at main-es2015.js:208629 at main-es2015.js:208653 at Module../node_modules/rete/build/rete.esm.js (main-es2015.js:208693) at __webpack_require__ (runtime-es2015.js:85) at Module../src/app/explect/components/rete/rete-angular-render-plugin/src/socket/socket.component.ts (main-es2015.js:241147) at __webpack_require__ (runtime-es2015.js:85) at Module../src/app/explect/components/rete/rete-angular-render-plugin/src/socket/socket.component.ngfactory.js (main-es2015.js:241092) at __webpack_require__ (runtime-es2015.js:85) at Module../src/app/explect/components/rete/rete-angular-render-plugin/src/node/node.component.ngfactory.js (main-es2015.js:240944) at __webpack_require__ (runtime-es2015.js:85)

Why is this happening?

Hi,

I want to bind a doubleClick event on a node so I can open a modal dialog. I need this behaviour because I don't want visible controls on node but on a dialog.

How can I make this feature?

Best Regards

I have a started node with "Then" socket output.
I would like to click output socket then show a menu options like Shopify Automation: [Condition, Process]

If click Process, a new Node will be created with a "Then" socket output:

If click Condition, a new Node will be created with a "Then" socket and a "Otherwise" socket :

So, is there any way to make rete like that?
Thanks!

Describe the bug

Currently with Angular 17, its not possible to import ReteModule or RefDirective in a standalone component which is the default approach for Angular 17. When writing custom components, this is an issue and can only be solved by implementing a module with the classic approach.

Example to reproduce

No response

How to reproduce

• Create a custom node component
• Mark as standalone
• Try to use refComponent directive
• Import not possible for ReteModule or RefDirective cause its not standalone

Expected behavior

I can import ReteModule / RefDirective in order to use standalone components

Dependencies

+-- @angular-devkit/[email protected]
+-- @angular-eslint/[email protected]
+-- @angular-eslint/[email protected]
+-- @angular-eslint/[email protected]
+-- @angular-eslint/[email protected]
+-- @angular-eslint/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @auth0/[email protected]
+-- @iharbeck/[email protected]
+-- @microsoft/[email protected]
+-- @rxweb/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @typescript-eslint/[email protected]
+-- @typescript-eslint/[email protected]
+-- @typescript-eslint/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

Platform

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

According to the rete documentation, a socket should have it's name as class in kebab-case.

Currently it is set to the socket name as is, without converted to kebab-case.

If I add Output to Node dynamically, I have to call area.update('node', nodeId) to render newly created nodes.

It seems that angular-render plugin recreates output socket HTML elements upon area.update(), but old output socket HTML is not removed from SocketsPositionsStorage

this results in a bunch of warning messages in console: Found more than one element for socket with same key and side. Probably it was not unmounted correctly

SocketsPositionsStorage stores socket position in a map where key is socket HTML Element, and recreated socket HTML Elements during area.update cause duplication of same output socket but with different HTML Element key.

Here is small example: (https://codesandbox.io/s/rete-js-v2-angular-customization-forked-ykzfdv)

Enter a name and press create, repeat, and try to connect newly created socket to another node. Console will be populated with warning message.

When I embeddeding the editor into a mat-tab control, the nodes are not visible after switching away and back to the tab which holds the editor. Only connection lines are visible.

Is this something that is possible to solve in the library?

<mat-tab-group> <mat-tab label="First"> <div class="wrapper"> <div #nodeEditor class="node-editor"> </div> </div> </mat-tab> <mat-tab label="Second"> Content 2 </mat-tab> <mat-tab label="Third"> Content 3 </mat-tab> </mat-tab-group>

When the NodeComponent was updated to use ChangeDetection.OnPush the documentation fell out of sync.

This is fixed by my PR ( #23 )

I have followed the example and mimic that code in my project. However, when I try to compile, I am getting the following errors when trying to register the component with the editor.

components.map(c => {
editor.register(c);
engine.register(c);
});

error TS2345: Argument of type 'NumComponent | AddComponent' is not assignable to parameter of type 'Component'.
Type 'NumComponent' is missing the following properties from type 'Component': editor, data, builder, build, and 4 more.

40       editor.register(c);
                         ~

error TS2345: Argument of type 'NumComponent | AddComponent' is not assignable to parameter of type 'Component'.
Type 'NumComponent' is missing the following properties from type 'Component': name, data, engine, worker

41       engine.register(c);

I was also looking at the documentation and the example does not seem to implement the AngularComponent as shown in the document. So, I am a little confused how the example is actually running.

Please advise.

Thanks,
Marcelo

Due to conflicting peer dependency I am unable to install it with Angular 17

Hi,

I have been using the retejs library a few days ago and I like it so far. I tried to make it look like ue4, but failed to get the paths right. Is there a way to control the pins?

https://gyazo.com/74b361cc233ba3f4fe78aa76b82db328

I am using Angular8 with the angularrenderplugin.

I'm getting this error when we include

import { ReteModule } from 'rete-angular-render-plugin';

this line in our module.

ERROR in ./node_modules/rete-angular-render-plugin/dist/esm5/module.js
Module not found: Error: Can't resolve '@angular/elements' in '/Volumes/Data/admin-ui/node_modules/rete-angular-render-plugin/dist/esm5'

may be this package is not getting added in dist while building this application.

Hello @Ni55aN, first thanks for this great tool, it's amazing !

I'm using the AngularRenderPlugin with the following custom node component:

import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Output} from '@angular/core';
import {Node} from 'rete';
import {NodeComponent, NodeService} from 'rete-angular-render-plugin';

@Component({
  templateUrl: './node.component.html',
  styleUrls: ['./node.component.scss'],
  providers: [NodeService],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomNodeComponent extends NodeComponent {

  @Output() editClick = new EventEmitter<Node>();

  constructor(protected service: NodeService, protected cdr: ChangeDetectorRef) {
    super(service, cdr);
  }
}

It works fine, but I added a button element to the HTML template that triggers the editClick event emitter and I would like to be able to subscribe to it. Unfortunately I don't see how I can retrieve the instance of the CustomNodeComponent created by the plugin, do you have any idea how to do such a thing ?

Any other way to bind a custom component event with the main component (the one holding the Rete Editor) would be fine too. Thanks !

I am using this plugin in Angular 11 and it seems to work just fine. I see this warning during compilation, though:

npm WARN [email protected] requires a peer of @angular/common@>=7.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@>=7.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/elements@>=7.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of rete@>=1.3.1 but none is installed. You must install peer dependencies yourself.

Any chance of updating these?

Describe the bug

I have a Angular project and want to display two different types of custom sockets but it always uses the design of the first requested socket.

editor.ts:

render.addPreset(
       Presets.classic.setup({
         customize: {
           socket(data) {
             if (Math.random() > 0.5) {
               console.log("bool")
               return BoolSocketComponent;
             } else {
               console.log("real")
               return RealSocketComponent;
             } 
           }
         }
       })
     );

50/50 chance between the design, for testing later will be dependent on socket type

components:
socket 1:
css:

:host{
    display: inline-block;
    cursor: pointer;
    border: 3px solid white;
    border-radius: 1em;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: #ffffff66;
    margin: 0.1em 0.7em;
    z-index: 2;
    box-sizing: border-box;
}


:host:hover{
    border-width: 4px;
}

ts:

import {
    Component,
    Input,
    HostBinding,
    ChangeDetectorRef,
    OnChanges
  } from "@angular/core";
  
  @Component({
    template: ,    
    styleUrls: ["./bool-socket.component.css"]
  })
  export class BoolSocketComponent implements OnChanges {
    @Input() data!: any;
    @Input() rendered!: any;
  
    @HostBinding("title") get title() {
      return this.data.name;
    }
  
    constructor(private cdr: ChangeDetectorRef) {
      this.cdr.detach();
    }
  
    ngOnChanges(): void {
      this.cdr.detectChanges();
      requestAnimationFrame(() => this.rendered());
    }
  }

The second socket-component is implemented in the same way just a different name and style.

I logged which type was returned (see top)
And what i found was that all sockets always have the same design as the first requested one...

I cant find what the issue is...
Any ideas?
Looks like a bug to me

I have the same issue with the connections!

Example to reproduce

No response

How to reproduce

• Use Angular
• create two components for different styled sockets
• let the render function switch between them

Expected behavior

I expect each socket to have the color of the returned custom socket

Dependencies

[email protected]
├── @angular-devkit/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Also tried with angular 15, also did not work

Platform

Chrome and Angular 17/ 15

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

I'm currently stuck trying out the angular plugin using Angular 12 - The code won't compile due to TS2589: Type instantiation is excessively deep and possibly infinite.

What am i missing here?

For an example please see:
https://stackblitz.com/edit/angular-ivy-3mqaux?file=src%2Fapp%2Feditor.ts

Thnaks in advance
C.

I was trying to implement in angular cli 9. It was getting an error on the plugin. The web example shows the same errors but render. Unfortunately my project won’t build with the same errors.I know it’s experimental, but would really like to use it possible. Thanks.

I've upgraded from 0.2.2 to 0.3.0. In 0.2.2, I was able to define a custom NodeComponent as follows:

@Component({
  selector: 'app-question-response-node',
  templateUrl: './question-response-node.component.html',
  styleUrls: ['../node.component.scss'],
  providers: [NodeService],
})
export class QuestionResponseNodeComponent extends NodeComponent {
  override inputs: MessageInput[];
  override outputs: ResponseOutput[];

  constructor(service: NodeService, cdr: ChangeDetectorRef) {
    super(service, cdr);
  }
}

Both MessageInput and ResponseOutput extend from rete's Input and Output respectively. They provide additional properties that are accessed in the QuestionResponseNodeComponent template. For example, in question-response-node.component.html:

<div class="input" *ngFor="let input of inputs">
  <rete-socket rete-socket [io]="input" [socket]="input.socket"></rete-socket>
  <div class="input-questions">
    <div class="input-question" *ngFor="let message of input.messages">{{ message }}</div>
  </div>
</div>

However, inputs and outputs on NodeComponent are now getters instead of class properties. I'm able to override these, but upon loading the canvas and a node, I now get a Maximum call stack size exceeded error.

How can I go about overriding the inputs and outputs for a custom NodeComponent?

Hi,

First of all, rete is awesome!

Secondly, my error report here is similar to report #10 , which claim's to be "solved" by disabling the rete-context-menu plugin, but I'm not using that plugin, so I'd question whether removing that was the real solution even in that case. There's a reference in that report to disabling the build optimizer, and from trying numerous things, that appeared to "solve" the compilation errors for me.

Specifically, I was getting this error when using the app in prod (AOT compilation):
TypeError: Cannot set property 'mustUseProp' of undefined.

and occasionally a second error about runtime compiler missing. None of these errors appear in dev compilation though.

I found this article of a similar situation, albeit a different vue component.

Based on that article (given my limited knowledge of vue.js) is that there could be a problem with the way the angular compiler handles the vue js code, and they only manifest when using the AOT / build-optimized code. I'm wondering if this general concern is applicable with rete.

Currently I able to get rete working in prod using build-optimizer false (and vendorChunk set to true for good measure -- not sure if that's required though). However, til now I've never had to disable the build-optimizer for any other 3rd party libraries, and the optimizer reduces some bundles sizes by 30%+, so I definitely want it there for prod compilation.

Hoping you can look into how to get this working with angular build-optimizer.

-S. Arora

I've migrated the project I'm working on to use angular-render-plugin instead of vuejs. I've been able to get everything running but have one problem I can't seem to solve.

I have everything related to retejs in it's own angular module, which is imported into other modules in the project. Because the custom element is created in the ReteModule constructor:

export class ReteModule {
  constructor(injector: Injector) { // StaticInjectorError due to 'npm link'
    const CustomElement = createCustomElement(CustomComponent, { injector });
    customElements.define('rete-element', CustomElement);
  }
}

it gets ran for each time the shared module is loaded. When the ReteModule is loaded twice in the same application it throws the error:

Error: Failed to execute 'define' on 'CustomElementRegistry': the name "rete-element" has already been used with this registry
    at CustomElementRegistry.target.<computed> [as define] (zone-evergreen.js:2161)
    at new ReteModule (rete-angular-render-plugin.js:251)

I'm don't want to refactor the entire application to only import ReteModule from AppModule but am not sure how else to solve it?

Can we check if the custom element is already created and only attempt to create it once?

When I tried to install this plugin via npm using angular 15 I got:

npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@">=7.0.0 <8.0.0" from [email protected]
npm ERR! node_modules/rete-angular-render-plugin
npm ERR!   rete-angular-render-plugin@"*" from the root project

As the supported angular versions seem to be quite old: Are there any plans to further support this plugin?

Are there any obvious reasons why connections might not be displayed, despite being rendered in the DOM? I've got the following in my editor canvas:

Note that setting the width of the outer div to be > 0 displays the connection as normal:

I'm on rete version 1.5.2 and rete-angular-render-plugin version 0.3.0.

I'm trying to use custom node, nut I get this message

DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "rete-element" has already been used with this registry
    at CustomElementRegistry.target.<computed> [as define] 

Here an example https://stackblitz.com/edit/github-rete-86eimp?file=src/app/app.module.ts

I am using angular-render-plugin in an Angular 8 app.
During ng serve there are no problems, but when I run ng build --prod I get the following error:

ERROR in : Unexpected value 'ReteModule in
{PROJECT_PATH}/node_modules/rete-angular-render-plugin/dist/module.d.ts' imported by the module 'ReteEditorModule in
{PROJECT_PATH}/src/app/component/skills/skill-compositor/rete/rete.module.ts'. Please add a @NgModule annotation.
: Unexpected value 'ReteModule in
{PROJECT_PATH}/node_modules/rete-angular-render-plugin/dist/module.d.ts' imported by the module 'CustomNodeModule in
{PROJECT_PATH}/src/app/component/skills/skill-compositor/rete/custom-node/custom-node.module.ts'. Please add a @NgModule annotation.

Inside the two classes appearing in the error message, ReteEditorModule and CustomNodeModule, I import the ReteModule as follows:

import {ReteModule} from "rete-angular-render-plugin";
...

@NgModule({
	declarations: [...],
	imports: [ReteModule, ...],
	exports: [...],
	entryComponents: [...]
})
export class ReteEditorModule {
}

(analogously in CustomNodeModule)

Am I doing something wrong here?

Hey there,

Very impressed so far with retejs but I face some issues using the angular-render-plugin.

I have no problem of performance while using the vuejs render. But when I use the angular one, it gets super laggy after I had more than 10 nodes.

Any idea why this would occur ?

I am also using Angular 8.

Thanks !

I have implemented the plugin and replaced it with Vuejs plugin , the rendering is working but I get this error message in console.

CustomComponent_Host.ngfactory.js? [sm]:1 ERROR Error: No component factory found for VueComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:19453)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:19504)
    at CustomComponent.ngOnInit (custom.component.js:10)
    at checkAndUpdateDirectiveInline (core.js:24489)
    at checkAndUpdateNodeInline (core.js:35151)
    at checkAndUpdateNode (core.js:35090)
    at debugCheckAndUpdateNode (core.js:36112)
    at debugCheckDirectivesFn (core.js:36055)
    at Object.eval [as updateDirectives] (CustomComponent_Host.ngfactory.js? [sm]:1)

In my module file I Imported the component as mentioned in npm lib page

  entryComponents: [MyNodeComponent],

I don't know why it's depending again to vue plugin