Merge pull request #104 from code0-tech/feat/#102

Nico Sammito · web-flow · commit 31eb7400ff35 · 2026-03-10T18:20:26.000+01:00
Therefore if a user clicks onto a node the references and the corresponding nodes used inside are highlighted in some sort.
diff --git a/src/packages/ce/src/flow/components/builder/FlowBuilderComponent.tsx b/src/packages/ce/src/flow/components/builder/FlowBuilderComponent.tsx
@@ -7,7 +7,7 @@ import {
     ReactFlowProvider,
     useEdgesState,
     useNodesState,
-    useReactFlow,
+    useReactFlow, useStore,
     useUpdateNodeInternals,
     ViewportPortal
 } from "@xyflow/react";
@@ -19,7 +19,7 @@ import {Flow, type Namespace, type NamespaceProject} from "@code0-tech/sagittari
 import {LineWobble} from 'ldrs/react'
 import 'ldrs/react/LineWobble.css'
 import {useFlowNodes} from "@edition/flow/hooks/Flow.nodes.hook";
-import {Code0ComponentProps, mergeCode0Props, Spacing, Text} from "@code0-tech/pictor";
+import {Code0ComponentProps, mergeCode0Props, Spacing, Text, useService} from "@code0-tech/pictor";
 import {FunctionNodeDefaultComponent} from "@edition/function/components/nodes/FunctionNodeDefaultComponent";
 import {FunctionNodeGroupComponent} from "@edition/function/components/nodes/FunctionNodeGroupComponent";
 import {FunctionNodeTriggerComponent} from "@edition/function/components/nodes/FunctionNodeTriggerComponent";
@@ -28,6 +28,7 @@ import {FlowPanelSizeComponent} from "@edition/flow/components/panels/FlowPanelS
 import {FlowPanelLayoutComponent} from "@edition/flow/components/panels/FlowPanelLayoutComponent";
 import {FlowPanelControlComponent} from "@edition/flow/components/panels/FlowPanelControlComponent";
 import {FlowPanelUpdateComponent} from "@edition/flow/components/panels/FlowPanelUpdateComponent";
+import {FileTabsService} from "@code0-tech/pictor/dist/components/file-tabs/FileTabs.service";
 
 /**
  * Dynamically layouts a tree of nodes and their parameter nodes for a flow-based editor.
@@ -615,12 +616,14 @@ export const FlowBuilderComponent: React.FC<FlowBuilderProps> = (props) => {
 const InternalFlowBuilder: React.FC<FlowBuilderProps> = (props) => {
     const {flowId, namespaceId, projectId, ...rest} = props
 
+    const { setCenter, getInternalNode, getZoom } = useReactFlow();
+    const fileTabsService = useService(FileTabsService)
+
     const nodeTypes = React.useMemo(() => ({
         default: FunctionNodeDefaultComponent,
         group: FunctionNodeGroupComponent,
         trigger: FunctionNodeTriggerComponent,
     }), [])
-
     const edgeTypes = React.useMemo(() => ({
         default: FlowBuilderEdgeComponent,
     }), [])
@@ -725,6 +728,26 @@ const InternalFlowBuilder: React.FC<FlowBuilderProps> = (props) => {
             {...mergeCode0Props("flow", rest)}
             data-tree-visibility={showTree}
             proOptions={{hideAttribution: true}}
+            onNodeClick={(_, clickedNode) => {
+
+                const node = getInternalNode(clickedNode.id);
+
+                if (node && node.measured.width && node.measured.height) {
+                    const centerX = node.internals.positionAbsolute.x + node.measured.width / 2;
+                    const centerY = node.internals.positionAbsolute.y + node.measured.height / 2;
+
+                    const currentZoom = getZoom();
+
+                    setCenter(centerX, centerY, {
+                        zoom: Math.max(currentZoom, 1),
+                        duration: 250,
+                    }).then();
+                }
+                fileTabsService.activateTab(node?.id ?? "")
+            }}
+            onPaneClick={_ => {
+                fileTabsService.activateTab("")
+            }}
             nodes={nodes}
             edges={edges}
             panOnDrag={showTree}
diff --git a/src/packages/ce/src/function/components/nodes/FunctionNodeComponent.style.scss b/src/packages/ce/src/function/components/nodes/FunctionNodeComponent.style.scss
@@ -6,6 +6,8 @@
   border: 1px solid helpers.borderColor();
   box-shadow: none;
   text-wrap: nowrap;
+  position: relative;
+  transition: opacity .25s ease-in-out;
 
   &__handle {
     border: none !important;
@@ -26,6 +28,11 @@
     }
   }
 
+  &--notReferenced {
+    transition: opacity .25s ease-in-out;
+    opacity: 0.5 !important;
+  }
+
   &--active {
     box-shadow: 0 0 0 1px rgba(variables.$info, .5);
   }
diff --git a/src/packages/ce/src/function/components/nodes/FunctionNodeDefaultComponent.tsx b/src/packages/ce/src/function/components/nodes/FunctionNodeDefaultComponent.tsx
@@ -1,31 +1,24 @@
-import {Handle, Node, NodeProps, Position, useReactFlow, useStore} from "@xyflow/react";
+import {Handle, Node, NodeProps, Position, useStore} from "@xyflow/react";
 import React, {CSSProperties, memo} from "react";
 import "./FunctionNodeComponent.style.scss";
 import {FunctionNodeComponentProps} from "./FunctionNodeComponent";
 import {FileTabsService} from "@code0-tech/pictor/dist/components/file-tabs/FileTabs.service";
-import {
-    Badge, Card,
-    Flex, Text, underlineBySeverity,
-    useService,
-    useStore as usePictorStore
-} from "@code0-tech/pictor";
+import {Badge, Card, Flex, Text, underlineBySeverity, useService, useStore as usePictorStore} from "@code0-tech/pictor";
 import {useNodeValidation} from "@edition/flow/hooks/NodeValidation.hook";
-import {IconNote} from "@tabler/icons-react";
+import {IconNote, IconVariable} from "@tabler/icons-react";
 import {FlowService} from "@edition/flow/services/Flow.service";
 import {FunctionService} from "@edition/function/services/Function.service";
 import {LiteralBadgeComponent} from "@edition/datatype/components/badges/LiteralBadgeComponent";
 import {ReferenceBadgeComponent} from "@edition/datatype/components/badges/ReferenceBadgeComponent";
 import {NodeBadgeComponent} from "@edition/datatype/components/badges/NodeBadgeComponent";
 import {FunctionFileDefaultComponent} from "@edition/function/components/files/FunctionFileDefaultComponent";
+import {NodeFunction} from "@code0-tech/sagittarius-graphql-types";
 
 export type FunctionNodeDefaultComponentProps = NodeProps<Node<FunctionNodeComponentProps>>
 
 export const FunctionNodeDefaultComponent: React.FC<FunctionNodeDefaultComponentProps> = memo((props) => {
-    const {data, id, width = 0, height = 0} = props
+    const {data, id} = props
 
-    const viewportWidth = useStore(s => s.width);
-    const viewportHeight = useStore(s => s.height);
-    const flowInstance = useReactFlow()
     const fileTabsService = useService(FileTabsService)
     const fileTabsStore = usePictorStore(FileTabsService)
     const flowService = useService(FlowService)
@@ -36,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]);
@@ -110,9 +104,9 @@ export const FunctionNodeDefaultComponent: React.FC<FunctionNodeDefaultComponent
     }), [flowStore, functionStore, data, definition])
 
     React.useEffect(() => {
-        if (!node?.id) return
+        if (!node?.id || !id) return
         fileTabsService.registerTab({
-            id: node.id,
+            id: id,
             active: false,
             closeable: true,
             children: <>
@@ -121,7 +115,23 @@ export const FunctionNodeDefaultComponent: React.FC<FunctionNodeDefaultComponent
             </>,
             content: <FunctionFileDefaultComponent flowId={props.data.flowId} node={node}/>
         })
-    }, [node?.id, definition, data])
+    }, [])
+
+    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 === node?.id)
+        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, node])
 
     return (
         <Card
@@ -130,19 +140,11 @@ export const FunctionNodeDefaultComponent: React.FC<FunctionNodeDefaultComponent
             paddingSize={"xs"}
             py={"0.35"}
             outline={firstItem.id === id}
-            borderColor={activeTabId == node?.id ? "info" : undefined}
-            className={`d-flow-node ${activeTabId == node?.id ? "d-flow-node--active" : undefined}`}
-            color={"primary"}
-            onClick={() => {
-                flowInstance.setViewport({
-                    x: (viewportWidth / 2) + (props.positionAbsoluteX * -1) - (width / 2),
-                    y: (viewportHeight / 2) + (props.positionAbsoluteY * -1) - (height / 2),
-                    zoom: 1
-                }, {
-                    duration: 250,
-                })
-                fileTabsService.activateTab(node?.id!!)
-            }} style={{position: "relative"}}>
+            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 5rem 0 ${withAlpha(data.color, 0.25)}`} : {}),
+        }}>
 
             <Handle
                 isConnectable={false}
@@ -161,10 +163,80 @@ export const FunctionNodeDefaultComponent: React.FC<FunctionNodeDefaultComponent
                 className={"d-flow-node__handle d-flow-node__handle--source"}
                 position={data.isParameter ? Position.Left : Position.Bottom}
             />
+
+            {
+                isReferenced === true ? (
+                    <div className={"d-flow-node__isReferenced"} style={{
+                        position: "absolute",
+                        top: "50%",
+                        left: firstItem.id === id ? "-0.733rem" : "-0.5rem",
+                        transform: "translate(-100%, -50%)",
+                        display: "flex"
+                    }}>
+                        <IconVariable className={"d-flow-node__isReferenced-icon"} color={data.color} size={13}/>
+                    </div>
+                ) : null
+            }
+
+
             <Flex align={"center"} style={{gap: "0.7rem"}}>
                 <IconNote color={data.color} size={16}/>
                 <Text size={"md"}>{displayMessage}</Text>
             </Flex>
         </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)})`
+}
diff --git a/src/packages/ce/src/function/components/nodes/FunctionNodeTriggerComponent.tsx b/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,7 +16,7 @@ export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponent
 
     const {data, id} = props
     const fileTabsService = useService(FileTabsService)
-    const flowInstance = useReactFlow()
+    const fileTabsStore = usePictorStore(FileTabsService)
     const flowTypeService = useService(FlowTypeService)
     const flowTypeStore = usePictorStore(FlowTypeService)
     const flowService = useService(FlowService)
@@ -24,15 +25,10 @@ export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponent
     const flow = React.useMemo(() => flowService.getById(data.flowId), [flowStore, data])
     const definition = React.useMemo(() => flow ? flowTypeService.getById(flow.type?.id) : undefined, [flowTypeStore, flow])
 
-    const width = props.width ?? 0
-    const height = props.height ?? 0
-    const viewportWidth = useStore(s => s.width)
-    const viewportHeight = useStore(s => s.height)
-
     React.useEffect(() => {
-        if (!definition?.id || !flow) return
+        if (!id || !flow) return
         fileTabsService.registerTab({
-            id: definition?.id!!,
+            id: id,
             active: true,
             closeable: true,
             children: <>
@@ -42,24 +38,36 @@ export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponent
             content: <FunctionFileTriggerComponent instance={flow}/>,
             show: true
         })
-    }, [definition, data.instance, fileTabsService, flow])
+    }, [])
+
+    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 == definition?.id ? "d-flow-node--active" : undefined}`}
-                 onClick={() => {
-                     flowInstance.setViewport({
-                         x: (viewportWidth / 2) + (props.positionAbsoluteX * -1) - (width / 2),
-                         y: (viewportHeight / 2) + (props.positionAbsoluteY * -1) - (height / 2),
-                         zoom: 1
-                     }, {
-                         duration: 250,
-                     })
-                     fileTabsService.activateTab(definition?.id!!)
-                 }}>
+                 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"}
@@ -76,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"

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,8 @@`
`6`	`6`	`border: 1px solid helpers.borderColor();`
`7`	`7`	`box-shadow: none;`
`8`	`8`	`text-wrap: nowrap;`
	`9`	`+ position: relative;`
	`10`	`+ transition: opacity .25s ease-in-out;`
`9`	`11`
`10`	`12`	`&__handle {`
`11`	`13`	`border: none !important;`
`@@ -26,6 +28,11 @@`
`26`	`28`	`}`
`27`	`29`	`}`
`28`	`30`
	`31`	`+ &--notReferenced {`
	`32`	`+ transition: opacity .25s ease-in-out;`
	`33`	`+ opacity: 0.5 !important;`
	`34`	`+ }`
	`35`	`+`
`29`	`36`	`&--active {`
`30`	`37`	`box-shadow: 0 0 0 1px rgba(variables.$info, .5);`
`31`	`38`	`}`