feat: enhance FunctionNodeTriggerComponent with reference handling and icon integration

Author: nicosammito

src/packages/ce/src/function/components/nodes/FunctionNodeDefaultComponent.tsx

@@ -29,6 +29,7 @@ export const FunctionNodeDefaultComponent: React.FC<FunctionNodeDefaultComponent
     const node = React.useMemo(() => flowService.getNodeById(data.flowId, data.nodeId), [flowStore, data])
     const definition = React.useMemo(() => node ? functionService.getById(node.functionDefinition?.id!!) : undefined, [functionStore, data, node])
     const validation = useNodeValidation(data.nodeId, data.flowId)
+
     const activeTabId = React.useMemo(() => {
         return fileTabsService.getActiveTab()?.id
     }, [fileTabsStore, fileTabsService]);
@@ -142,7 +143,7 @@ export const FunctionNodeDefaultComponent: React.FC<FunctionNodeDefaultComponent
             borderColor={activeTabId == id ? "info" : undefined}
             className={`d-flow-node ${activeTabId == id ? "d-flow-node--active" : ""} ${isReferenced === false ? "d-flow-node--notReferenced" : ""}`}
             color={"primary"} style={{
-            ...(isReferenced === true ? {boxShadow: `0 0 1px 0 ${data.color}`} : {}),
+            ...(isReferenced === true ? {boxShadow: `0 0 5rem 0 ${withAlpha(data.color, 0.25)}`} : {}),
         }}>
 
             <Handle
@@ -185,3 +186,57 @@ export const FunctionNodeDefaultComponent: React.FC<FunctionNodeDefaultComponent
         </Card>
     );
 })
+
+type RGBA = {
+    r: number
+    g: number
+    b: number
+    a: number
+}
+
+const clamp01 = (v: number) => Math.min(Math.max(v, 0), 1)
+
+const parseCssColorToRgba = (color: string): RGBA => {
+    if (typeof document === "undefined") {
+        return {r: 0, g: 0, b: 0, a: 1}
+    }
+
+    const el = document.createElement("span")
+    el.style.color = color
+    document.body.appendChild(el)
+
+    const computed = getComputedStyle(el).color
+    document.body.removeChild(el)
+
+    const match = computed.match(
+        /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/
+    )
+
+    if (!match) {
+        return {r: 0, g: 0, b: 0, a: 1}
+    }
+
+    return {
+        r: Math.round(Number(match[1])),
+        g: Math.round(Number(match[2])),
+        b: Math.round(Number(match[3])),
+        a: match[4] !== undefined ? Number(match[4]) : 1,
+    }
+}
+
+const mixColorRgb = (color: string, level: number) => {
+    const w = clamp01(level * 0.1)
+
+    const c1 = parseCssColorToRgba(color)
+    const c2 = parseCssColorToRgba("#070514")
+
+    const mix = (a: number, b: number) =>
+        Math.round(a * (1 - w) + b * w)
+
+    return `rgb(${mix(c1.r, c2.r)}, ${mix(c1.g, c2.g)}, ${mix(c1.b, c2.b)})`
+}
+
+const withAlpha = (color: string, alpha: number) => {
+    const c = parseCssColorToRgba(color)
+    return `rgba(${c.r}, ${c.g}, ${c.b}, ${clamp01(alpha)})`
+}

src/packages/ce/src/function/components/nodes/FunctionNodeTriggerComponent.tsx

@@ -1,12 +1,13 @@
 import React, {memo} from "react";
-import {Handle, Node, NodeProps, Position, useReactFlow, useStore} from "@xyflow/react";
+import {Handle, Node, NodeProps, Position} from "@xyflow/react";
 import {Badge, Card, Flex, Text, useService, useStore as usePictorStore} from "@code0-tech/pictor";
 import {FunctionNodeComponentProps} from "@edition/function/components/nodes/FunctionNodeComponent";
 import {FileTabsService} from "@code0-tech/pictor/dist/components/file-tabs/FileTabs.service";
 import {FlowTypeService} from "@edition/flowtype/services/FlowType.service";
 import {FlowService} from "@edition/flow/services/Flow.service";
-import {IconBolt} from "@tabler/icons-react";
+import {IconBolt, IconVariable} from "@tabler/icons-react";
 import {FunctionFileTriggerComponent} from "@edition/function/components/files/FunctionFileTriggerComponent";
+import {NodeFunction} from "@code0-tech/sagittarius-graphql-types";
 
 
 export type FunctionNodeTriggerComponentProps = NodeProps<Node<FunctionNodeComponentProps>>
@@ -15,6 +16,7 @@ export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponent
 
     const {data, id} = props
     const fileTabsService = useService(FileTabsService)
+    const fileTabsStore = usePictorStore(FileTabsService)
     const flowTypeService = useService(FlowTypeService)
     const flowTypeStore = usePictorStore(FlowTypeService)
     const flowService = useService(FlowService)
@@ -38,12 +40,34 @@ export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponent
         })
     }, [])
 
+    const activeTabId = React.useMemo(
+        () => fileTabsService.getActiveTab()?.id,
+        [fileTabsStore, fileTabsService]
+    );
+
+    const isReferenced = React.useMemo(() => {
+
+        const activeNode = flowService.getNodeById(data.flowId, activeTabId as NodeFunction['id'])
+        const isActiveNodeReferencingCurrentNode = activeNode?.parameters?.nodes?.some(p => p?.value?.__typename === "ReferenceValue" && !p.value.nodeFunctionId)
+        const hasReferences = activeNode?.parameters?.nodes?.some(p => p?.value?.__typename === "ReferenceValue")
+
+        if (isActiveNodeReferencingCurrentNode) {
+            return true
+        } else if (hasReferences && !isActiveNodeReferencingCurrentNode && activeTabId !== data.nodeId) {
+            return false
+        }
+
+        return undefined
+
+    }, [flowStore, activeTabId, data.flowId])
+
     return <Card variant={"normal"}
                  color={"info"}
                  paddingSize={"xs"}
                  key={id}
                  data-flow-refernce={id}
-                 className={`d-flow-node ${fileTabsService.getActiveTab()?.id == id ? "d-flow-node--active" : undefined}`}>
+                 className={`d-flow-node ${fileTabsService.getActiveTab()?.id == id ? "d-flow-node--active" : undefined}`}
+                 style={{...(isReferenced === true ? {boxShadow: `0 0 5rem 0 rgba(112, 255, 178, 0.25)`} : {}),}}>
 
         <Badge color={"info"}
                pos={"absolute"}
@@ -60,6 +84,20 @@ export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponent
             </Text>
         </Flex>
 
+        {
+            isReferenced === true ? (
+                <div className={"d-flow-node__isReferenced"} style={{
+                    position: "absolute",
+                    top: "50%",
+                    left: "-0.5rem",
+                    transform: "translate(-100%, -50%)",
+                    display: "flex"
+                }}>
+                    <IconVariable className={"d-flow-node__isReferenced-icon"} color={"#70ffb2"} size={13}/>
+                </div>
+            ) : null
+        }
+
         <Handle
             isConnectable={false}
             type="source"