Merge pull request #153 from retejs/fix-ordering-update

feat: add impure pipe for ordeting inputs, outputs, etc.

Author: Ni55aN

ng16/patch/module.ts

@@ -7,6 +7,7 @@ import { SocketComponent } from './presets/classic/components/socket/socket.comp
 import { ConnectionWrapperComponent } from './presets/classic/components/connection/connection-wrapper.component';
 import { ControlComponent } from './presets/classic/components/control/control.component';
 import { RefDirective } from './ref';
+import { ImpureKeyvaluePipe } from './shared/pipes/impure-keyvalue.pipe';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ],
   imports: [
     CommonModule
@@ -26,7 +28,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ]
 })
 export class ReteModule { }

ng17/patch/module.ts

@@ -7,6 +7,7 @@ import { SocketComponent } from './presets/classic/components/socket/socket.comp
 import { ConnectionWrapperComponent } from './presets/classic/components/connection/connection-wrapper.component';
 import { ControlComponent } from './presets/classic/components/control/control.component';
 import { RefDirective } from './ref';
+import { ImpureKeyvaluePipe } from './shared/pipes/impure-keyvalue.pipe';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ],
   imports: [
     CommonModule
@@ -26,7 +28,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ]
 })
 export class ReteModule { }

ng18/patch/module.ts

@@ -7,6 +7,7 @@ import { SocketComponent } from './presets/classic/components/socket/socket.comp
 import { ConnectionWrapperComponent } from './presets/classic/components/connection/connection-wrapper.component';
 import { ControlComponent } from './presets/classic/components/control/control.component';
 import { RefDirective } from './ref';
+import { ImpureKeyvaluePipe } from './shared/pipes/impure-keyvalue.pipe';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ],
   imports: [
     CommonModule
@@ -26,7 +28,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ]
 })
 export class ReteModule { }

ng19/patch/presets/classic/components/node/.node.component.ts

@@ -1,5 +1,6 @@
 // [imports]
 import { CommonModule } from '@angular/common';
 import { RefDirective } from '../../../../ref';
+import { ImpureKeyvaluePipe } from '../../../../shared/pipes/impure-keyvalue.pipe';
 // [component-directive]
-imports: [CommonModule, RefDirective],
+imports: [CommonModule, RefDirective, ImpureKeyvaluePipe],

ng20/patch/presets/classic/components/node/.node.component.ts

@@ -1,5 +1,6 @@
 // [imports]
 import { CommonModule } from '@angular/common';
 import { RefDirective } from '../../../../ref';
+import { ImpureKeyvaluePipe } from '../../../../shared/pipes/impure-keyvalue.pipe';
 // [component-directive]
-imports: [CommonModule, RefDirective],
+imports: [CommonModule, RefDirective, ImpureKeyvaluePipe],

src/index.ts

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

src/module.ts

@@ -7,6 +7,7 @@ import { SocketComponent } from './presets/classic/components/socket/socket.comp
 import { ConnectionWrapperComponent } from './presets/classic/components/connection/connection-wrapper.component';
 import { ControlComponent } from './presets/classic/components/control/control.component';
 import { RefDirective } from './ref';
+import { ImpureKeyvaluePipe } from './shared/pipes/impure-keyvalue.pipe';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ],
   imports: [
     CommonModule
@@ -26,7 +28,8 @@ import { RefDirective } from './ref';
     ConnectionComponent,
     ConnectionWrapperComponent,
     SocketComponent,
-    ControlComponent
+    ControlComponent,
+    ImpureKeyvaluePipe
   ],
   entryComponents: [
     NodeComponent,

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

@@ -1,5 +1,5 @@
 <div class="title" data-testid="title">{{data.label}}</div>
-<div class="output" *ngFor="let output of data.outputs | keyvalue: sortByIndex" [attr.data-testid]="'output-'+output.key">
+<div class="output" *ngFor="let output of data.outputs | keyvalueimpure: sortByIndex" [attr.data-testid]="'output-'+output.key">
     <div class="output-title" data-testid="output-title">{{output.value?.label}}</div>
     <div
         class="output-socket"
@@ -11,13 +11,13 @@
 </div>
 <div
     class="control"
-    *ngFor="let control of data.controls | keyvalue: sortByIndex"
+    *ngFor="let control of data.controls | keyvalueimpure: sortByIndex"
     refComponent
     [data]="{type: 'control', payload: control.value }"
     [emit]="emit"
     [attr.data-testid]="'control-'+control.key"
 ></div>
-<div class="input" *ngFor="let input of data.inputs | keyvalue: sortByIndex" [attr.data-testid]="'input-'+input.key">
+<div class="input" *ngFor="let input of data.inputs | keyvalueimpure: sortByIndex" [attr.data-testid]="'input-'+input.key">
     <div
         class="input-socket"
         refComponent

src/shared/index.ts

@@ -0,0 +1,2 @@
+export * from './drag';
+export * from './pipes';

src/shared/pipes/impure-keyvalue.pipe.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'keyvalueimpure',
+  pure: false
+})
+export class ImpureKeyvaluePipe implements PipeTransform {
+
+  transform(value: {[key: string]: any} | null | undefined, compareFn?: (a: any, b: any) => number): Array<{key: string, value: any}> {
+    if (!value || typeof value !== 'object') {
+      return [];
+    }
+
+    const result = Object.entries(value).map(([key, val]) => ({key, value: val}));
+
+    if (compareFn) {
+      result.sort(compareFn);
+    }
+
+    return result;
+  }
+}