delete thumbs/ports on compositions

Author: devhelpr

libs/app-canvas/src/app/app.element.tsx

@@ -1497,6 +1497,33 @@ export class AppElement<T extends BaseNodeInfo> {
           }
         });
 
+        existingThumbs.forEach((element) => {
+          const nodeHelper = element as unknown as IRectNodeComponent<T>;
+          const baseNodeInfo = nodeHelper.nodeInfo as BaseNodeInfo;
+
+          let isExistingThumb = false;
+          canvasApp?.elements.forEach((canvasElement) => {
+            if (canvasElement.id === nodeHelper.id) {
+              isExistingThumb = true;
+            }
+          });
+          if (!isExistingThumb && this.canvasApp) {
+            let thumbType: ThumbType = ThumbType.EndConnectorLeft;
+            let thumbConnectionType: ThumbConnectionType =
+              ThumbConnectionType.end;
+            if (baseNodeInfo?.type === 'thumb-output') {
+              thumbType = ThumbType.StartConnectorRight;
+              thumbConnectionType = ThumbConnectionType.start;
+            }
+            // thumb removed
+            this.deleteThumbFromComposition(this.canvasApp, composition.id, {
+              thumbType: thumbType,
+              connectionType: thumbConnectionType,
+              name: nodeHelper.id,
+            } as IThumb);
+          }
+        });
+
         // Only store the nodes and not the thumbs and connections to the thumbs
         // nodesIdsToIgnore contains the node and connection id's of the thumbs
         // and connections to the thumbs. In below code this list gets updated

libs/visual-programming-system/src/canvas-app/index.ts

@@ -1650,9 +1650,7 @@ export class FlowCanvas<T extends BaseNodeInfo>
 
     if (rectInstance.nodeComponent?.thumbConnectors) {
       const thumbIndex = rectInstance.nodeComponent.thumbConnectors.findIndex(
-        (t) =>
-          t.thumbIdentifierWithinNode === thumb.thumbIdentifierWithinNode &&
-          thumb.thumbIdentifierWithinNode
+        (t) => t.thumbName === thumb.name && thumb.name
       );
       if (thumbIndex >= 0) {
         const thumbNode =