Merge pull request #60 from retejs/fix/unmount

Fix/unmount

Author: Ni55aN

ng16/patch/module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { NodeComponent, RefDirective } from './presets/classic/components/node/node.component';
+import { NodeComponent } from './presets/classic/components/node/node.component';
 import { ConnectionComponent } from './presets/classic/components/connection/connection.component';
 import { SocketComponent } from './presets/classic/components/socket/socket.component';
 import { ConnectionWrapperComponent } from './presets/classic/components/connection/connection-wrapper.component';
 import { ControlComponent } from './presets/classic/components/control/control.component';
+import { RefDirective } from './ref';
 
 @NgModule({
   declarations: [
@@ -28,4 +29,4 @@ import { ControlComponent } from './presets/classic/components/control/control.c
     ControlComponent
   ]
 })
-export class ReteModule {}
+export class ReteModule { }

src/index.ts

@@ -10,4 +10,5 @@ export * from './presets/classic/components'
 export * from './presets/context-menu/components'
 export * from './presets/minimap/components'
 export * from './presets/reroute/components'
+export * from './ref'
 export * from './core'

src/module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { NodeComponent, RefDirective } from './presets/classic/components/node/node.component';
+import { NodeComponent } from './presets/classic/components/node/node.component';
 import { ConnectionComponent } from './presets/classic/components/connection/connection.component';
 import { SocketComponent } from './presets/classic/components/socket/socket.component';
 import { ConnectionWrapperComponent } from './presets/classic/components/connection/connection-wrapper.component';
 import { ControlComponent } from './presets/classic/components/control/control.component';
+import { RefDirective } from './ref';
 
 @NgModule({
   declarations: [
@@ -35,4 +36,4 @@ import { ControlComponent } from './presets/classic/components/control/control.c
     ControlComponent
   ]
 })
-export class ReteModule {}
+export class ReteModule { }

src/presets/classic/components/control/control.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy, AfterViewInit, OnChanges, SimpleChanges, AfterViewChecked, ChangeDetectorRef, HostListener } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, ChangeDetectorRef, HostListener } from '@angular/core';
 import { ClassicPreset } from 'rete';
 
 @Component({
@@ -15,7 +15,7 @@ export class ControlComponent<T extends 'text' | 'number'> implements OnChanges
     event.stopPropagation();
   }
 
-  constructor(private cdr: ChangeDetectorRef)  {
+  constructor(private cdr: ChangeDetectorRef) {
     this.cdr.detach()
   }
 
@@ -33,8 +33,8 @@ export class ControlComponent<T extends 'text' | 'number'> implements OnChanges
   onChange(e: Event) {
     const target = e.target as HTMLInputElement
     const value = (this.data.type === 'number'
-        ? +target.value
-        : target.value) as ClassicPreset.InputControl<T>['value']
+      ? +target.value
+      : target.value) as ClassicPreset.InputControl<T>['value']
 
     this.data.setValue(value)
     this.cdr.detectChanges()

src/presets/classic/components/node/node.component.ts

@@ -1,23 +1,8 @@
-import { Component, Input, HostBinding, ElementRef, ChangeDetectorRef, OnChanges } from '@angular/core';
+import { Component, Input, HostBinding, ChangeDetectorRef, OnChanges } from '@angular/core';
 import { ClassicPreset as Classic } from 'rete';
-import { Directive } from '@angular/core';
 import { KeyValue } from '@angular/common';
 
-@Directive({
-  selector: '[refComponent]'
-})
-export class RefDirective implements OnChanges {
-  @Input() data!: any
-  @Input() emit!: any
-
-  constructor(private el: ElementRef) { }
-
-  ngOnChanges() {
-    this.emit({ type: 'render', data: { ...this.data, element: this.el.nativeElement } })
-  }
-}
-
-type SortValue<N extends Classic.Node> = (N['controls'] | N['inputs']  | N['outputs'])[string]
+type SortValue<N extends Classic.Node> = (N['controls'] | N['inputs'] | N['outputs'])[string]
 
 @Component({
   templateUrl: './node.component.html',
@@ -37,7 +22,7 @@ export class NodeComponent implements OnChanges {
     return this.data.selected
   }
 
-  constructor(private cdr: ChangeDetectorRef)  {
+  constructor(private cdr: ChangeDetectorRef) {
     this.cdr.detach()
   }
 

src/ref.ts

@@ -0,0 +1,20 @@
+import { Input, ElementRef, OnChanges, OnDestroy } from '@angular/core';
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[refComponent]'
+})
+export class RefDirective implements OnChanges, OnDestroy {
+  @Input() data!: any
+  @Input() emit!: any
+
+  constructor(private el: ElementRef) { }
+
+  ngOnChanges() {
+    this.emit({ type: 'render', data: { ...this.data, element: this.el.nativeElement } })
+  }
+
+  ngOnDestroy() {
+    this.emit({ type: 'unmount', data: { element: this.el.nativeElement } })
+  }
+}