thumb-input/output visual tweaks

Author: devhelpr

libs/app-canvas/src/app/nodes-gl/thumb-output.ts

@@ -146,6 +146,7 @@ export const getThumbOutputNode: NodeTaskFactory<GLNodeInfo> = (
       hasFormInPopup: true,
       additionalInnerNodeClassNames: 'rounded-full items-center justify-center',
       hasStaticWidthHeight: true,
+      noFlexAutoInNodeContentWrapper: true,
       additionalClassNames:
         'rounded-full bg-yellow-500 border-[black] border-2 border-solid h-[90px] w-[90px] flex-[0_0_auto]',
     },

libs/visual-programming-system/src/utils/create-rect-node.tsx

@@ -69,6 +69,7 @@ export interface NodeSettings {
   keepPopupOpenAfterUpdate?: boolean;
   hasCustomStyling?: boolean;
   customClassName?: string;
+  noFlexAutoInNodeContentWrapper?: boolean;
 }
 
 export const createRectNode = <T extends BaseNodeInfo>(
@@ -230,9 +231,10 @@ export const createRectNode = <T extends BaseNodeInfo>(
     (formElements.length === 0 && settings?.hasTitlebar === false) ||
     (settings?.hasFormInPopup && settings?.hasTitlebar === false);
 
-  let cssClasses = `border-slate-500 ${
+  // warning: dont add colors here! it affects a lot of nodes (especially the thumb-output node-type)
+  let cssClasses = `${
     hasCenteredLabel
-      ? 'border-slate-500 flex items-center  justify-center text-center'
+      ? ' flex items-center  justify-center text-center'
       : 'p-4 pt-4'
   }`;
   if (settings?.hasCustomStyling) {
@@ -249,7 +251,9 @@ export const createRectNode = <T extends BaseNodeInfo>(
           : hasBeforeDecorator && !hasAfterDecorator
           ? 'rounded-b'
           : ''
-      } min-h-auto flex-auto ${cssClasses}
+      } min-h-auto ${
+        settings?.noFlexAutoInNodeContentWrapper ? '' : 'flex-auto'
+      } ${cssClasses}
       ${settings?.additionalClassNames ?? ''} 
       `,
     },

libs/web-flow-executor/src/nodes/thumb-input.ts

@@ -150,8 +150,10 @@ export const getThumbInputNode: NodeTaskFactory<NodeInfo> = (
       category: 'Compositions',
       hasSettingsPopup: false,
       hasFormInPopup: true,
+
+      noFlexAutoInNodeContentWrapper: true,
       //hideTitle: true,
-      additionalInnerNodeClassNames: 'rounded-full',
+      additionalInnerNodeClassNames: 'rounded-full items-center justify-center',
       hasStaticWidthHeight: true,
     },
     undefined,

libs/web-flow-executor/src/nodes/thumb-output.ts

@@ -163,6 +163,7 @@ export const getThumbOutputNode: NodeTaskFactory<NodeInfo> = (
       hasFormInPopup: true,
       additionalInnerNodeClassNames: 'rounded-full items-center justify-center',
       hasStaticWidthHeight: true,
+      noFlexAutoInNodeContentWrapper: true,
       additionalClassNames:
         'rounded-full bg-yellow-500 border-[black] border-2 border-solid h-[90px] w-[90px] flex-[0_0_auto]',
     },