thumb input/output WiP look

Author: devhelpr

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

@@ -14,7 +14,7 @@ import {
 import { GLNodeInfo } from '../types/gl-node-info';
 
 const fieldName = 'thumb-input';
-const labelName = 'Thumb input';
+const labelName = 'Input';
 const nodeName = 'thumb-input';
 const familyName = 'flow-canvas';
 const thumbConstraint = 'value';
@@ -56,7 +56,7 @@ export const getThumbInputNode: NodeTaskFactory<GLNodeInfo> = (
     compute,
     initializeCompute,
     false,
-    200,
+    100,
     100,
     thumbs,
     (values?: InitialValues): FormField[] => {
@@ -138,6 +138,11 @@ export const getThumbInputNode: NodeTaskFactory<GLNodeInfo> = (
         theme?.compositionThumbInputNodeBackground ?? 'bg-yellow-300',
       textColorClassName: theme?.compositionThumbInputNodeText ?? 'text-black',
       category: 'Compositions',
+      hasSettingsPopup: false,
+      hasFormInPopup: true,
+
+      additionalInnerNodeClassNames: 'rounded-full',
+      hasStaticWidthHeight: true,
     },
     undefined,
     undefined,

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

@@ -14,7 +14,7 @@ import {
 import { GLNodeInfo } from '../types/gl-node-info';
 
 const fieldName = 'thumb-output';
-const labelName = 'Thumb output';
+const labelName = 'Output';
 const nodeName = 'thumb-output';
 const familyName = 'flow-canvas';
 const thumbConstraint = 'value';
@@ -56,7 +56,7 @@ export const getThumbOutputNode: NodeTaskFactory<GLNodeInfo> = (
     compute,
     initializeCompute,
     false,
-    200,
+    100,
     100,
     thumbs,
     (values?: InitialValues): FormField[] => {
@@ -142,6 +142,12 @@ export const getThumbOutputNode: NodeTaskFactory<GLNodeInfo> = (
         theme?.compositionThumbOutputNodeBackground ?? 'bg-yellow-500',
       textColorClassName: theme?.compositionThumbOutputNodeText ?? 'text-black',
       category: 'Compositions',
+      hasSettingsPopup: false,
+      hasFormInPopup: true,
+      additionalInnerNodeClassNames: 'rounded-full items-center justify-center',
+      hasStaticWidthHeight: true,
+      additionalClassNames:
+        'rounded-full bg-yellow-500 border-[black] border-2 border-solid h-[90px] w-[90px] flex-[0_0_auto]',
     },
     undefined,
     undefined,

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

@@ -14,7 +14,7 @@ import {
 import { NodeInfo } from '../types/node-info';
 
 const fieldName = 'thumb-input';
-const labelName = 'Thumb input';
+const labelName = 'Input';
 const nodeName = 'thumb-input';
 const familyName = 'flow-canvas';
 const thumbConstraint = 'value';
@@ -56,7 +56,7 @@ export const getThumbInputNode: NodeTaskFactory<NodeInfo> = (
     compute,
     initializeCompute,
     false,
-    200,
+    100,
     100,
     thumbs,
     (values?: InitialValues): FormField[] => {
@@ -148,6 +148,11 @@ export const getThumbInputNode: NodeTaskFactory<NodeInfo> = (
         theme?.compositionThumbInputNodeBackground ?? 'bg-yellow-300',
       textColorClassName: theme?.compositionThumbInputNodeText ?? 'text-black',
       category: 'Compositions',
+      hasSettingsPopup: false,
+      hasFormInPopup: true,
+      //hideTitle: true,
+      additionalInnerNodeClassNames: 'rounded-full',
+      hasStaticWidthHeight: true,
     },
     undefined,
     undefined,

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

@@ -14,7 +14,7 @@ import {
 import { NodeInfo } from '../types/node-info';
 
 const fieldName = 'thumb-output';
-const labelName = 'Thumb output';
+const labelName = 'Output';
 const nodeName = 'thumb-output';
 const familyName = 'flow-canvas';
 const thumbConstraint = 'value';
@@ -66,7 +66,7 @@ export const getThumbOutputNode: NodeTaskFactory<NodeInfo> = (
     compute,
     initializeCompute,
     false,
-    200,
+    100,
     100,
     thumbs,
     (values?: InitialValues): FormField[] => {
@@ -159,6 +159,12 @@ export const getThumbOutputNode: NodeTaskFactory<NodeInfo> = (
         theme?.compositionThumbOutputNodeBackground ?? 'bg-yellow-500',
       textColorClassName: theme?.compositionThumbOutputNodeText ?? 'text-black',
       category: 'Compositions',
+      hasSettingsPopup: false,
+      hasFormInPopup: true,
+      additionalInnerNodeClassNames: 'rounded-full items-center justify-center',
+      hasStaticWidthHeight: true,
+      additionalClassNames:
+        'rounded-full bg-yellow-500 border-[black] border-2 border-solid h-[90px] w-[90px] flex-[0_0_auto]',
     },
     undefined,
     undefined,