fix(graphical-editor): render VAR_IN_OUT as a single input-side pin, like CODESYS

src/__architecture__/validate.ts

@@ -274,6 +274,12 @@ const KNOWN_EXCEPTIONS: Record<string, LayerName[]> = {
   'frontend/store/slices/ladder/utils/index.ts': ['components'],
   // Ladder slice — needs nodesBuilder + defaultCustomNodesStyles for rung creation
   'frontend/store/slices/ladder/slice.ts': ['components'],
+  // FBD slice — the same case as the ladder slice above. Handle geometry is persisted
+  // inside each node rather than recomputed on render, so the slice owns it on load: it
+  // needs the pin-spacing constants to re-flow a block's pins after healing a project
+  // saved with the old two-sided VAR_IN_OUT pin. The constants describe how components
+  // lay pins out, so they live with the components that draw them.
+  'frontend/store/slices/fbd/slice.ts': ['components'],
   // Device CONNECT flow (D72) — resolves RTU params from the board debug spec
   // via the shared `resolveDebugConnection` resolver, same as the activity bar's
   // debugger/post-flash paths.

src/frontend/components/_atoms/graphical-editor/__tests__/in-out-pin-rules.test.ts

@@ -0,0 +1,190 @@
+import {
+  blockInputVariables,
+  blockOutputVariables,
+  IN_OUT_MARKER_WIDTH,
+  findOccupiedInOutPin,
+  inOutVariableNames,
+  migrateInOutSourceEdges,
+  stripInOutOutputHandles,
+} from '../in-out-pin-rules'
+
+/** Irrigation_Main_Controller: State is VAR_IN_OUT, Moisture and T_Max are inputs. */
+const variables = [
+  { name: 'State', class: 'inOut', type: { definition: 'user-data-type', value: 'Irrigation_State' } },
+  { name: 'Moisture', class: 'input', type: { definition: 'base-type', value: 'BOOL' } },
+  { name: 'T_Max', class: 'input', type: { definition: 'base-type', value: 'TIME' } },
+]
+
+const handle = (id: string, type: 'source' | 'target', top: number) => ({
+  id,
+  type,
+  glbPosition: { x: 0, y: top },
+  relPosition: { x: 0, y: top },
+  style: { top },
+})
+
+const blockNode = (id = 'imc') => ({
+  id,
+  type: 'block',
+  position: { x: 0, y: 0 },
+  data: {
+    variant: { name: 'Irrigation_Main_Controller', variables },
+    inputHandles: [handle('State', 'target', 48), handle('Moisture', 'target', 96), handle('T_Max', 'target', 144)],
+    // What a project saved before the change carries: an output pin for the in-out.
+    outputHandles: [handle('State', 'source', 48)],
+    handles: [
+      handle('State', 'target', 48),
+      handle('Moisture', 'target', 96),
+      handle('T_Max', 'target', 144),
+      handle('State', 'source', 48),
+    ],
+    outputConnector: handle('State', 'source', 48),
+  },
+})
+
+describe('VAR_IN_OUT is a single input-side pin', () => {
+  it('puts an in-out parameter on the input side only', () => {
+    expect(blockInputVariables(variables).map((v) => v.name)).toEqual(['State', 'Moisture', 'T_Max'])
+    expect(blockOutputVariables(variables).map((v) => v.name)).toEqual([])
+    expect([...inOutVariableNames(variables)]).toEqual(['State'])
+  })
+
+  it('leaves plain inputs and outputs alone', () => {
+    const ton = [
+      { name: 'IN', class: 'input', type: { definition: 'base-type', value: 'BOOL' } },
+      { name: 'PT', class: 'input', type: { definition: 'base-type', value: 'TIME' } },
+      { name: 'Q', class: 'output', type: { definition: 'base-type', value: 'BOOL' } },
+      { name: 'ET', class: 'output', type: { definition: 'base-type', value: 'TIME' } },
+    ]
+    expect(blockInputVariables(ton).map((v) => v.name)).toEqual(['IN', 'PT'])
+    expect(blockOutputVariables(ton).map((v) => v.name)).toEqual(['Q', 'ET'])
+    expect(inOutVariableNames(ton).size).toBe(0)
+  })
+})
+
+describe('an in-out pin accepts exactly one variable', () => {
+  const graph = {
+    nodes: [blockNode()],
+    edges: [{ source: 'v1', sourceHandle: 'output-variable', target: 'imc', targetHandle: 'State' }],
+  }
+
+  it('rejects a second connection to an in-out pin', () => {
+    expect(findOccupiedInOutPin({ target: 'imc', targetHandle: 'State' }, graph)).toBe('State')
+  })
+
+  it('allows the first connection to an in-out pin', () => {
+    expect(findOccupiedInOutPin({ target: 'imc', targetHandle: 'State' }, { ...graph, edges: [] })).toBeUndefined()
+  })
+
+  it('does not restrict ordinary input pins', () => {
+    const busy = {
+      ...graph,
+      edges: [
+        ...graph.edges,
+        { source: 'v2', sourceHandle: 'output-variable', target: 'imc', targetHandle: 'Moisture' },
+      ],
+    }
+    expect(findOccupiedInOutPin({ target: 'imc', targetHandle: 'Moisture' }, busy)).toBeUndefined()
+  })
+})
+
+describe('migrating projects saved with a two-sided in-out pin', () => {
+  it('re-points a wire leaving the in-out pin at whatever feeds the pin', () => {
+    // The Irrigation Controller's main POU: variable `State` feeds the pin, and the pin is
+    // read into two other blocks.
+    const edges = [
+      { source: 'stateVar', sourceHandle: 'output-variable', target: 'imc', targetHandle: 'State' },
+      { source: 'imc', sourceHandle: 'State', target: 'manualOverride', targetHandle: 'State' },
+      { source: 'imc', sourceHandle: 'State', target: 'stateToNum', targetHandle: 'State' },
+    ]
+    const result = migrateInOutSourceEdges([blockNode()], edges)
+
+    expect(result.rewired).toBe(2)
+    expect(result.dropped).toBe(0)
+    expect(result.edges).toEqual([
+      edges[0],
+      { source: 'stateVar', sourceHandle: 'output-variable', target: 'manualOverride', targetHandle: 'State' },
+      { source: 'stateVar', sourceHandle: 'output-variable', target: 'stateToNum', targetHandle: 'State' },
+    ])
+  })
+
+  it('drops a wire whose in-out pin has nothing feeding it', () => {
+    const result = migrateInOutSourceEdges(
+      [blockNode()],
+      [{ source: 'imc', sourceHandle: 'State', target: 'manualOverride', targetHandle: 'State' }],
+    )
+    expect(result).toMatchObject({ edges: [], rewired: 0, dropped: 1 })
+  })
+
+  it('leaves a diagram without in-out pins untouched', () => {
+    const edges = [{ source: 'a', sourceHandle: 'Q', target: 'b', targetHandle: 'IN' }]
+    const plain = { ...blockNode(), data: { ...blockNode().data, variant: { name: 'TON', variables: [] } } }
+    expect(migrateInOutSourceEdges([plain], edges)).toEqual({ edges, rewired: 0, dropped: 0 })
+  })
+
+  it('removes the stale in-out output pin from the saved handles', () => {
+    const healed = stripInOutOutputHandles(blockNode(), { connectorY: 48, connectorOffsetY: 48 })
+
+    expect(healed.data.outputHandles).toEqual([])
+    expect(healed.data.handles?.map((h) => `${h.id}:${h.type}`)).toEqual([
+      'State:target',
+      'Moisture:target',
+      'T_Max:target',
+    ])
+    expect(healed.data.outputConnector).toBeUndefined()
+  })
+
+  it('re-flows the remaining output pins so labels and pins stay aligned', () => {
+    const node = blockNode()
+    node.data.variant.variables = [
+      { name: 'Q', class: 'output', type: { definition: 'base-type', value: 'BOOL' } },
+      ...variables,
+    ]
+    node.data.outputHandles = [handle('State', 'source', 48), handle('Q', 'source', 96)]
+    node.data.outputConnector = handle('State', 'source', 48)
+
+    const healed = stripInOutOutputHandles(node, { connectorY: 48, connectorOffsetY: 48 })
+
+    // `Q` was second; with the in-out gone it moves up into the first slot.
+    expect(healed.data.outputHandles).toEqual([{ ...handle('Q', 'source', 48), glbPosition: { x: 0, y: 0 } }])
+    expect(healed.data.outputConnector?.id).toBe('Q')
+  })
+
+  it('is a no-op for a block that never had a two-sided in-out pin', () => {
+    const node = blockNode()
+    node.data.outputHandles = []
+    node.data.handles = node.data.inputHandles
+    const healed = stripInOutOutputHandles(node, { connectorY: 48, connectorOffsetY: 48 })
+    expect(healed).toBe(node)
+  })
+})
+
+describe('block width reserves room for the ⟷ marker', () => {
+  // The marker only moves the width when the in-out pin is the WIDEST label and the block is
+  // not already at the maximum width — otherwise the marker is free.
+  const wideInOut = [
+    { name: 'StateRef', class: 'inOut', type: { definition: 'base-type', value: 'INT' } },
+    { name: 'B', class: 'input', type: { definition: 'base-type', value: 'BOOL' } },
+  ]
+  const asPlainInput = wideInOut.map((v) => (v.class === 'inOut' ? { ...v, class: 'input' } : v))
+  const variant = (vars: typeof wideInOut) =>
+    ({ name: 'FB', type: 'function-block', variables: vars, documentation: '', extensible: false }) as never
+
+  it('adds the marker width only for in-out pins', async () => {
+    const { getBlockSize } = await import('../fbd/utils/utils')
+    const at = { x: 0, y: 0 }
+    expect(getBlockSize(variant(wideInOut), at).width).toBe(
+      getBlockSize(variant(asPlainInput), at).width + IN_OUT_MARKER_WIDTH,
+    )
+  })
+
+  it('leaves a block whose widest pin is not the in-out unchanged', async () => {
+    const { getBlockSize } = await import('../fbd/utils/utils')
+    const at = { x: 0, y: 0 }
+    // `Moisture` is wider than `State ⟷`, so it still sets the width.
+    expect(getBlockSize(variant(variables as never), at).width).toBe(
+      getBlockSize(variant(variables.map((v) => (v.class === 'inOut' ? { ...v, class: 'input' } : v)) as never), at)
+        .width,
+    )
+  })
+})

src/frontend/components/_atoms/graphical-editor/block-output-debug-badges.tsx

@@ -1,7 +1,8 @@
 import { useDebugCompositeKey } from '../../../hooks/use-debug-composite-key'
 import { useIsDebuggerVisible } from '../../../hooks/use-debug-value'
 import { useIsGraphicalEditorActive } from '../../_features/[workspace]/editor/graphical/active-context'
 import { DebugValueBadge } from './debug-value-badge'
+import { blockOutputVariables } from './in-out-pin-rules'
 
 type BlockOutputDebugBadgesProps = {
   blockType: string
@@ -43,7 +44,9 @@
     return null
   }
 
-  const outputs = outputVariables.filter((v) => v.class === 'output' || v.class === 'inOut')
+  // A VAR_IN_OUT has no output pin, so it gets no output badge — its value is shown by the
+  // variable connected to its input pin, which carries the written-back value.
+  const outputs = blockOutputVariables(outputVariables)
 
   return (
     <>

src/frontend/components/_atoms/graphical-editor/diff/fbd-nodes.tsx

@@ -1,3 +1,3 @@
 import type { NodeProps } from '@xyflow/react'
 
 import type { DiffStatus } from '../../../../../middleware/shared/ports/version-control-port'
@@ -5,6 +5,7 @@
 import { CommentVisual } from '../fbd/comment-visual'
 import { ConnectionVisual } from '../fbd/connection-visual'
 import { VariableVisual } from '../fbd/variable-visual'
+import { blockInputVariables, blockOutputVariables } from '../in-out-pin-rules'
 import { DiffWrapper, renderFBDHandles } from './diff-wrapper'
 
 export function ReadOnlyFBDBlock({ data, width, height }: NodeProps) {
@@ -15,8 +16,8 @@
   const blockName = variant?.name ?? '???'
   const blockType = variant?.type ?? ''
   const blockVars = variant?.variables ?? []
-  const inputs = blockVars.filter((v) => v.class === 'input' || v.class === 'inOut').map((v) => v.name)
-  const outputs = blockVars.filter((v) => v.class === 'output' || v.class === 'inOut').map((v) => v.name)
+  const inputs = blockInputVariables(blockVars).map((v) => v.name)
+  const outputs = blockOutputVariables(blockVars).map((v) => v.name)
   const varName = (data.variable as { name?: string })?.name ?? ''
   const showInstanceName = blockType !== 'function' && blockType !== 'generic' && varName
   const w = (width as number) ?? 216

src/frontend/components/_atoms/graphical-editor/diff/ladder-nodes.tsx

@@ -1,7 +1,8 @@
 import type { NodeProps } from '@xyflow/react'
 
 import type { DiffStatus } from '../../../../../middleware/shared/ports/version-control-port'
 import { PlaceholderNodeFilled } from '../../../../assets/icons/flow/Placeholder'
+import { blockInputVariables, blockOutputVariables } from '../in-out-pin-rules'
 import { BlockNodeVisual } from '../ladder/block-visual'
 import { CoilVisual } from '../ladder/coil-visual'
 import { ContactVisual } from '../ladder/contact-visual'
@@ -60,8 +61,8 @@
   const blockName = variant?.name ?? '???'
   const blockType = variant?.type ?? ''
   const blockVars = variant?.variables ?? []
-  const inputs = blockVars.filter((v) => v.class === 'input' || v.class === 'inOut').map((v) => v.name)
-  const outputs = blockVars.filter((v) => v.class === 'output' || v.class === 'inOut').map((v) => v.name)
+  const inputs = blockInputVariables(blockVars).map((v) => v.name)
+  const outputs = blockOutputVariables(blockVars).map((v) => v.name)
   const varName = (data.variable as { name?: string })?.name ?? ''
   const showInstanceName = blockType !== 'function' && blockType !== 'generic' && varName
   const w = (width as number) ?? 216

src/frontend/components/_atoms/graphical-editor/fbd/block.tsx

@@ -1,3 +1,3 @@
 import { FocusEvent, memo, useEffect, useMemo, useRef, useState } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -13,8 +13,15 @@
 import { InputWithRef } from '../../input'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../tooltip'
 import { BlockOutputDebugBadges } from '../block-output-debug-badges'
+import { InOutPinMarker } from '../in-out-pin-marker'
 import { BlockVariant } from '../types/block'
-import { getBlockDocumentation, getVariableRestrictionType } from '../utils'
+import {
+  blockInputVariables,
+  blockOutputVariables,
+  getBlockDocumentation,
+  getVariableRestrictionType,
+  inOutVariableNames,
+} from '../utils'
 import { buildBlockNode } from './buildNodes'
 import { CustomHandle } from './handle'
 import { BasicNodeData, BlockNodeData, BlockProps } from './utils'
@@ -61,12 +68,9 @@
     type: blockType,
   } = (data.variant as BlockVariant) ?? DEFAULT_BLOCK_TYPE
 
-  const inputConnectors = blockVariables
-    .filter((variable) => variable.class === 'input' || variable.class === 'inOut')
-    .map((variable) => variable.name)
-  const outputConnectors = blockVariables
-    .filter((variable) => variable.class === 'output' || variable.class === 'inOut')
-    .map((variable) => variable.name)
+  const inputConnectors = blockInputVariables(blockVariables).map((variable) => variable.name)
+  const outputConnectors = blockOutputVariables(blockVariables).map((variable) => variable.name)
+  const inOutConnectors = inOutVariableNames(blockVariables)
 
   const [blockNameValue, setBlockNameValue] = useState<string>(blockType === 'generic' ? '' : blockName)
   const [validBlockNameValue, setValidBlockNameValue] = useState<string>(blockNameValue)
@@ -313,6 +317,7 @@
           style={{ top: DEFAULT_BLOCK_CONNECTOR_Y + index * DEFAULT_BLOCK_CONNECTOR_Y_OFFSET - 10, left: 6 }}
         >
           {connector}
+          {inOutConnectors.has(connector) && <InOutPinMarker />}
         </div>
       ))}
       {outputConnectors.map((connector, index) => (
@@ -643,19 +648,11 @@
 
     const newNode = { ...updatedNewNode }
 
-    const originalNodeInputs = (node.data.variant as BlockVariant).variables.filter(
-      (variable) => variable.class === 'input' || variable.class === 'inOut',
-    )
-    const originalNodeSources = (node.data.variant as BlockVariant).variables.filter(
-      (variable) => variable.class === 'output' || variable.class === 'inOut',
-    )
+    const originalNodeInputs = blockInputVariables((node.data.variant as BlockVariant).variables)
+    const originalNodeSources = blockOutputVariables((node.data.variant as BlockVariant).variables)
 
-    const updatedInputVariables = newNode.data.variant.variables.filter(
-      (variable) => variable.class === 'input' || variable.class === 'inOut',
-    )
-    const updatedOutputVariables = newNode.data.variant.variables.filter(
-      (variable) => variable.class === 'output' || variable.class === 'inOut',
-    )
+    const updatedInputVariables = blockInputVariables(newNode.data.variant.variables)
+    const updatedOutputVariables = blockOutputVariables(newNode.data.variant.variables)
 
     let newNodes = [...rung.nodes]
     newNodes = newNodes.map((nodeItem) => (nodeItem.id === node.id ? newNode : nodeItem))

src/frontend/components/_atoms/graphical-editor/fbd/utils/utils.ts

@@ -1,3 +1,3 @@
 import { Position } from '@xyflow/react'
 
 import type { PLCPou } from '../../../../../../middleware/shared/ports/types'
@@ -5,6 +5,7 @@
 import type { FBDFlowType } from '../../../../../store/slices/fbd'
 import type { LadderFlowType } from '../../../../../store/slices/ladder'
 import { resolveArrayVariableByName } from '../../../../../utils/PLC/array-variable-utils'
+import { blockInputVariables, blockOutputVariables, IN_OUT_MARKER_WIDTH } from '../../in-out-pin-rules'
 import { BlockVariant } from '../../types/block'
 import { customNodeTypes } from '..'
 import { buildHandle } from '../handle'
@@ -176,12 +177,9 @@
     y: number
   },
 ) => {
-  const inputConnectors = variant.variables
-    .filter((variable) => variable.class === 'input' || variable.class === 'inOut')
-    .map((variable) => variable.name)
-  const outputConnectors = variant.variables
-    .filter((variable) => variable.class === 'output' || variable.class === 'inOut')
-    .map((variable) => variable.name)
+  const inputVariables = blockInputVariables(variant.variables)
+  const inputConnectors = inputVariables.map((variable) => variable.name)
+  const outputConnectors = blockOutputVariables(variant.variables).map((variable) => variable.name)
 
   const blockHeight =
     DEFAULT_BLOCK_CONNECTOR_Y +
@@ -191,8 +189,10 @@
   let variableInputWidth = 0
   let variableOutputWidth = 0
   const blockNameWidth = variant.name.length * 12
-  inputConnectors.forEach((input) => {
-    const inputWidth = input.length * 12
+  inputVariables.forEach((input) => {
+    // An in-out pin also renders the ⟷ marker after its name; pay for it here so a long
+    // name plus the arrow cannot overflow the block.
+    const inputWidth = input.name.length * 12 + (input.class === 'inOut' ? IN_OUT_MARKER_WIDTH : 0)
     if (inputWidth > variableInputWidth) variableInputWidth = inputWidth
   })
   outputConnectors.forEach((output) => {

src/frontend/components/_atoms/graphical-editor/in-out-pin-marker.tsx

@@ -0,0 +1,33 @@
+/**
+ * The ⟷ badge that marks a `VAR_IN_OUT` pin, drawn after the pin name (`State ⟷`).
+ *
+ * An in-out parameter has one pin, on the input side, so without a marker it is
+ * indistinguishable from a plain input. CODESYS marks it the same way, with a left-right
+ * arrow, which keeps the two editors readable in the same way for anyone moving between
+ * them.
+ *
+ * It is drawn as an SVG rather than the `⟷` character: the glyph is missing from several of
+ * the fonts the editors fall back to, and where it exists it sits on the baseline instead of
+ * beside the pin name. The arrow is `w-3` (12px) and `ml-1` (4px) — together the
+ * `IN_OUT_MARKER_WIDTH` that block sizing reserves, so a long in-out name plus the arrow
+ * cannot overflow the block.
+ */
+const InOutPinMarker = () => (
+  <span
+    aria-label='in-out parameter'
+    title='VAR_IN_OUT — passed by reference: the block writes back to this variable'
+    className='pointer-events-none ml-1 inline-flex w-3 shrink-0 select-none items-center align-middle'
+  >
+    <svg viewBox='0 0 12 9' fill='none' className='h-[9px] w-3' aria-hidden='true'>
+      <path
+        d='M3.4 1.7 1.1 4.5l2.3 2.8M8.6 1.7l2.3 2.8-2.3 2.8M1.1 4.5h9.8'
+        stroke='currentColor'
+        strokeWidth='1.2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  </span>
+)
+
+export { InOutPinMarker }