node-transformer hide stream movers when selected node has no connections

Author: devhelpr

libs/visual-programming-system/src/components/node-transformer.ts

@@ -13,6 +13,7 @@ import {
 import { BaseNodeInfo } from '../types/base-node-info';
 import { createElement } from '../utils';
 import { getPointerPos } from '../utils/pointer-pos';
+import { hideElement, showElement } from '../utils/show-hide-element';
 import { getNodeTransformerCssClasses } from './css-classes/node-transformer-css-classes';
 import { showMetaViewDialog } from './meta-view-dialog/meta-view-dialog';
 
@@ -206,6 +207,13 @@ export class NodeTransformer<T extends BaseNodeInfo> {
         this.cssClasses.hidden
       );
     }
+    if (node.thumbs?.length === 0) {
+      hideElement(this.upstreamNodesMover);
+      hideElement(this.downstreamNodesMover);
+    } else {
+      showElement(this.upstreamNodesMover);
+      showElement(this.downstreamNodesMover);
+    }
     this.detachRegisteredNodes();
 
     this.visibilityResizeControls(node.canBeResized ?? true);

libs/visual-programming-system/src/utils/show-hide-element.ts

@@ -0,0 +1,38 @@
+// TODO : builder pattern for classlist opererations :
+// element(this.canvas).hide().noPointerEvents()
+// element(this.canvas).show().pointerEvents()
+// .. etc
+
+import { IDOMElement } from '../interfaces/element';
+
+export const hideElement = (element?: IDOMElement) => {
+  if (element && element.domElement) {
+    (element.domElement as HTMLElement).classList.add('hidden');
+  }
+};
+
+export const showElement = (element?: IDOMElement) => {
+  if (element && element.domElement) {
+    (element.domElement as HTMLElement).classList.remove('hidden');
+  }
+};
+
+export const hideHTMLElement = (element?: HTMLElement, blockClass?: string) => {
+  if (element) {
+    element.classList.add('hidden');
+
+    if (blockClass) {
+      element.classList.remove(blockClass);
+    }
+  }
+};
+
+export const showHTMLElement = (element?: HTMLElement, blockClass?: string) => {
+  if (element && element) {
+    element.classList.remove('hidden');
+
+    if (blockClass) {
+      element.classList.add(blockClass);
+    }
+  }
+};