solved console error on node moved

2026-01-23 12:17:15 +01:00 · 2026-01-23 12:17:15 +01:00 · 2154b51096
parent 5213e2bdfa
commit 2154b51096
7 changed files with 57 additions and 59 deletions
--- a/src/app/services/flows/flows-call.fake.ts
+++ b/src/app/services/flows/flows-call.fake.ts
@ -68,7 +68,7 @@ const testDataFlow ={
    "visibility": "PUBLIC",
    "createdAt": "2026-01-21T10:38:50.671+00:00",
    "updatedAt": "2026-01-21T10:38:50.671+00:00",
-    "name": "Test Flow",
+    "name": "my test flow",
    "description": "This is a test flow",
    "nodes": [
        {
@ -154,13 +154,17 @@ const testDataFlow ={
    "connections": [
        {
            "key": "c335e3da-2af3-4e8f-a8ee-9bfc236196ee",
-            "from": "3ec4a0e5-914a-41e0-ab74-d4e64a4dba09:phrase",
-            "to": "80519c40-20ba-49cf-800a-598ee2e64f65:phrase"
+            "sourceNode": "3ec4a0e5-914a-41e0-ab74-d4e64a4dba09",
+            "sourceField": "phrase",
+            "targetNode": "80519c40-20ba-49cf-800a-598ee2e64f65",
+            "targetField": "phrase"
        },
        {
            "key": "e0239aef-d570-463d-b453-c3906ab0e4b0",
-            "from": "80519c40-20ba-49cf-800a-598ee2e64f65:translated",
-            "to": "ff349078-dce1-4ecd-8b2f-bd43100633fc:translated"
+            "sourceNode": "80519c40-20ba-49cf-800a-598ee2e64f65",
+            "sourceField": "translated",
+            "targetNode": "ff349078-dce1-4ecd-8b2f-bd43100633fc",
+            "targetField": "translated"
        }
    ]
 }; 
--- a/src/app/shared/flows-list/flow-item/flow-item.html
+++ b/src/app/shared/flows-list/flow-item/flow-item.html
@ -8,10 +8,10 @@
    <div class="flex items-center justify-between text-sm ">
        <div class="flex items-center gap-2 text-indigo-700 font-medium">
            <i class="bi" [ngClass]="{
-          'bi-globe': flow().visibility === 'public',
-          'bi-lock-fill': flow().visibility === 'private'
-        }" [class.text-indigo-500]="flow().visibility === 'public'"
-                [class.text-gray-500]="flow().visibility === 'private'">
+          'bi-globe': flow().visibility === 'PUBLIC',
+          'bi-lock-fill': flow().visibility === 'PRIVATE'
+        }" [class.text-indigo-500]="flow().visibility === 'PUBLIC'"
+                [class.text-gray-500]="flow().visibility === 'PRIVATE'">
            </i>

            {{ flow().name }}
@ -63,12 +63,12 @@
                </button>

                <button class="p-1 rounded enabled:hover:bg-indigo-100 enabled:text-indigo-600 disabled:text-indigo-200" title="Clone"
-                    (click)="$event.stopPropagation(); clone()" [disabled]="this.flow().visibility!=='private'">
+                    (click)="$event.stopPropagation(); clone()" [disabled]="this.flow().visibility!=='PRIVATE'">
                    <i class="bi bi-files"></i>
                </button>

                <button class="p-1 rounded enabled:hover:bg-red-100 enabled:text-red-600 disabled:text-red-200" title="Delete"
-                    (click)="$event.stopPropagation(); remove()" [disabled]="this.flow().visibility!=='private'">
+                    (click)="$event.stopPropagation(); remove()" [disabled]="this.flow().visibility!=='PRIVATE'">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
--- a/src/app/shared/nodes/input/input-node.component.html
+++ b/src/app/shared/nodes/input/input-node.component.html
@ -1,22 +1,21 @@
-<div class="rounded-xl bg-white shadow-md border border-gray-200">
-  <div class="p-3 flex flex-col items-center gap-2">
-    <div class="w-full flex justify-end">
+<div class="rounded-xl bg-white shadow-md border border-gray-200 cursor-pointer">
+  <div class="p-3 flex items-center justify-between gap-2">
+    <p class="text-sm font-semibold text-gray-700">
+      {{ data.label }}
+    </p>
+
+    <div class="flex justify-end">
      <div
-        class="cursor-pointer"
        refComponent
        [data]="{
          type: 'socket',
          side: 'output',
-          key: data.outputs[0]?.id,
+          key: outputKey,
          nodeId: data.id,
-          payload: data.outputs[0]?.socket,
-          seed: seed
+          payload: outputSocket
        }"
        [emit]="emit"
-        data-testid="output-socket"
      ></div>
    </div>
-
-    <p class="text-sm font-semibold text-gray-700">Input</p>
  </div>
 </div>
--- a/src/app/shared/nodes/input/input-node.component.ts
+++ b/src/app/shared/nodes/input/input-node.component.ts
@ -7,6 +7,7 @@ import {
 import { CommonModule, KeyValue } from "@angular/common";
 import { ReteModule } from "rete-angular-plugin/21";
 import { HFNode } from "@models/nodes";
+import { ClassicPreset } from "rete";

@Component({
  templateUrl: "./input-node.component.html",
@ -27,20 +28,19 @@ export class InputNodeComponent {
    return this.data.selected;
  }

-  constructor(private cdr: ChangeDetectorRef) {
-    this.cdr.detach();
+  outputKey!: string;
+  outputSocket!: ClassicPreset.Socket;
+
+  ngOnInit() {
+    const entries = Object.entries(this.data.outputs);
+    const [key, output] = entries[0];
+
+    this.outputKey = key;
+    this.outputSocket = (output as any).socket;
  }

-  ngOnChanges(): void {
-    this.cdr.detectChanges();
-    requestAnimationFrame(() => this.rendered());
-    this.seed++; // force render sockets
+  ngAfterViewInit() {
+    this.rendered();
  }

-  sortByIndex(
-  a: KeyValue<string, { index?: number } | undefined>,
-  b: KeyValue<string, { index?: number } | undefined>
-): number {
-  return (a.value?.index ?? 0) - (b.value?.index ?? 0);
-}
 }
--- a/src/app/shared/nodes/output/output-node.component.html
+++ b/src/app/shared/nodes/output/output-node.component.html
@ -1,21 +1,20 @@
-<div class="rounded-xl bg-white shadow-md border border-gray-200">
-  <div class="p-3 flex items-center justify-center">
-    <p class="text-sm font-semibold text-gray-700">Output</p>
-    <div class="w-full flex justify-end">
+<div class="rounded-xl bg-white shadow-md border border-gray-200 cursor-pointer">
+  <div class="p-3 flex items-center justify-between gap-2">
+    <div class="flex justify-start">
      <div
-        class="cursor-pointer"
        refComponent
        [data]="{
          type: 'socket',
          side: 'input',
-          key: data.inputs[0]?.id,
+          key: inputKey,
          nodeId: data.id,
-          payload: data.inputs[0]?.socket,
-          seed: seed
+          payload: inputSocket
        }"
        [emit]="emit"
-        data-testid="output-socket"
      ></div>
    </div>
+    <p class="text-sm font-semibold text-gray-700">
+      {{ data.label }}
+    </p>
  </div>
 </div>
--- a/src/app/shared/nodes/output/output-node.component.ts
+++ b/src/app/shared/nodes/output/output-node.component.ts
@ -15,10 +15,10 @@ import { HFNode } from "@models/nodes";
  styleUrls: ["./output-node.component.scss"],
  imports: [CommonModule, ReteModule],
  host: {
-    "data-testid": "output-node"
+    "data-testid": "node"
  }
 })
-export class OutputNodeComponent implements OnChanges {
+export class OutputNodeComponent {
  @Input() data!: ClassicPreset.Node;
  @Input() emit!: (data: any) => void;
  @Input() rendered!: () => void;
@ -29,23 +29,19 @@ export class OutputNodeComponent implements OnChanges {
    return this.data.selected;
  }

-  constructor(private cdr: ChangeDetectorRef) {
-    this.cdr.detach();
+  inputKey!: string;
+  inputSocket!: ClassicPreset.Socket;
+
+  ngAfterViewInit() {
+    this.rendered();
  }

-  ngOnChanges(): void {
-    this.cdr.detectChanges();
-    requestAnimationFrame(() => this.rendered());
-    this.seed++; // force render sockets
-  }
+  ngOnInit(): void {
+    const entries = Object.entries(this.data.inputs);
+    const [key, input] = entries[0];

-  sortByIndex<
-    N extends object,
-    T extends KeyValue<string, N & { index?: number }>
-  >(a: T, b: T) {
-    const ai = a.value.index || 0;
-    const bi = b.value.index || 0;
+    this.inputKey = key;
+    this.inputSocket = (input as any).socket;

-    return ai - bi;
  }
 }
--- a/src/app/utilities/rete-editor.ts
+++ b/src/app/utilities/rete-editor.ts
@ -126,8 +126,8 @@ async function loadFlowData(editor: NodeEditor<HFSchemes>, flowData: FlowData) {
  for (const connections of flowData.connections) { {
      const targetNode = editor.getNode(nodeMapping.get(connections.targetNode) || "");
      const node = editor.getNode(nodeMapping.get(connections.sourceNode) || "");
-      console.log("Creating connection from", connections.sourceNode, "to", connections.targetNode);
      if (node && targetNode) {
+        console.log("Creating connection from", node.id, "to", targetNode.id);
        const connection = new ClassicPreset.Connection(
          node,
          connections.sourceField,