Skip to content

feat: added dragging abilities to variables #629

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Shmerlard wants to merge 1 commit into
base: development
Choose a base branch
from
Open

feat: added dragging abilities to variables #629

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 19 additions & 8 deletions src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
parseStringValue,
stringToBuffer,
} from '@root/utils/PLC/variable-types'
import { Node, NodeProps, Position } from '@xyflow/react'
import { Node, NodeProps, NodeResizer, Position } from '@xyflow/react'
import { useEffect, useMemo, useRef, useState } from 'react'

import { Modal, ModalContent, ModalTitle } from '../../../_molecules/modal'
Expand Down Expand Up @@ -51,7 +51,7 @@ export const DEFAULT_VARIABLE_CONNECTOR_Y = DEFAULT_VARIABLE_HEIGHT / 2
export const Z_INDEX_DEBUGGER_VARIABLE = 10

const VariableElement = (block: VariableProps) => {
const { id, data, selected } = block
const { id, data, selected, width, height } = block
const {
editor,
editorActions: { updateModelFBD },
Expand Down Expand Up @@ -573,8 +573,8 @@ const VariableElement = (block: VariableProps) => {
<TooltipTrigger asChild>
<div
style={{
width: ELEMENT_SIZE,
height: ELEMENT_HEIGHT,
width: width ?? ELEMENT_SIZE,
height: height ?? ELEMENT_HEIGHT,
...(debuggerColor
? {
borderColor: debuggerColor,
Expand Down Expand Up @@ -603,8 +603,8 @@ const VariableElement = (block: VariableProps) => {
<div
className='relative flex items-center'
style={{
width: DEFAULT_VARIABLE_WIDTH,
height: DEFAULT_VARIABLE_HEIGHT,
width: width ? width - 16 : DEFAULT_VARIABLE_WIDTH,
height: height ?? DEFAULT_VARIABLE_HEIGHT,
}}
>
<HighlightedTextArea
Expand All @@ -625,8 +625,8 @@ const VariableElement = (block: VariableProps) => {
setTextAreaValue={setVariableValue}
handleSubmit={handleSubmitVariableValueOnTextareaBlur}
inputHeight={{
height: DEFAULT_VARIABLE_HEIGHT / 2,
scrollLimiter: DEFAULT_VARIABLE_HEIGHT,
height: (height ?? DEFAULT_VARIABLE_HEIGHT) / 2,
scrollLimiter: height ?? DEFAULT_VARIABLE_HEIGHT,
}}
ref={inputVariableRef}
disabled={isDebuggerVisible}
Expand Down Expand Up @@ -780,6 +780,17 @@ const VariableElement = (block: VariableProps) => {
{data.handles.map((handle, index) => (
<CustomHandle key={index} {...handle} isDebuggerVisible={isDebuggerVisible} />
))}

<NodeResizer
isVisible={selected ?? false}
minWidth={ELEMENT_SIZE}
minHeight={ELEMENT_HEIGHT}
handleStyle={{
borderRadius: '0',
width: '8px',
height: '8px',
}}
/>
Comment on lines +784 to +793
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Check if handle repositioning is handled elsewhere and how handles use position data

# Search for onResizeEnd or onResize handlers in FBD components
echo "=== Searching for existing resize handlers ==="
rg -n "onResize" --type=tsx --type=ts -g '!node_modules/**'

# Check how CustomHandle uses relX/relY positioning
echo -e "\n=== CustomHandle implementation ==="
ast-grep --pattern $'const CustomHandle = ($$$) => {
  $$$
}'

# Check if handles use CSS positioning that would auto-adjust
echo -e "\n=== Handle style patterns ==="
rg -n "relX|relY|glbX|glbY" --type=tsx --type=ts -g 'src/renderer/components/_atoms/graphical-editor/**'

Repository: Autonomy-Logic/openplc-editor

Length of output: 4314

🏁 Script executed:

# Check the specific file and lines mentioned in the review
echo "=== Checking variable.tsx around line 784 and 819 ==="
wc -l src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

# Get context around line 784-793
echo -e "\n=== Lines 784-793 ==="
sed -n '784,793p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

# Get context around line 819
echo -e "\n=== Lines 815-825 ==="
sed -n '815,825p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

Repository: Autonomy-Logic/openplc-editor

Length of output: 807

🏁 Script executed:

# Check CustomHandle component definition and handle positioning
echo "=== Searching for CustomHandle and handle positioning ==="
rg -n "CustomHandle|relX.*DEFAULT_VARIABLE_CONNECTOR_X" --type=tsx --type=ts -B2 -A5

Repository: Autonomy-Logic/openplc-editor

Length of output: 175

🏁 Script executed:

#!/bin/bash
# Search for resize handlers without file type flags
echo "=== Searching for onResize/onResizeEnd handlers ==="
rg -n "onResize|onNodeChange" src/renderer/components/_atoms/graphical-editor/

echo -e "\n=== Checking variable.tsx around handle creation (lines 810-830) ==="
sed -n '810,830p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

echo -e "\n=== Check the entire handleData section ==="
rg -n "handleData|relX|relY" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx -B2 -A2

echo -e "\n=== Search for DEFAULT_VARIABLE_CONNECTOR constants ==="
rg -n "DEFAULT_VARIABLE_CONNECTOR" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

Repository: Autonomy-Logic/openplc-editor

Length of output: 1835

🏁 Script executed:

# Check if handles are recalculated when node data changes
echo "=== Searching for handle recalculation or updates ==="
rg -n "useMemo|useCallback|useEffect" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx | head -20

echo -e "\n=== Check React Flow callbacks in variable.tsx ==="
rg -n "onNodeChange|setNodes|updateNode" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

echo -e "\n=== Look for position updates related to resizing ==="
rg -n "position|width|height" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx | grep -i "resize\|change" | head -10

Repository: Autonomy-Logic/openplc-editor

Length of output: 829

🏁 Script executed:

# Check the broader context of how NodeResizer is configured
echo "=== Get full NodeResizer usage context (lines 780-800) ==="
sed -n '780,800p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

echo -e "\n=== Search for how other FBD components handle resizing ==="
rg -n "NodeResizer" src/renderer/components/_atoms/graphical-editor/fbd/ -A5

Repository: Autonomy-Logic/openplc-editor

Length of output: 3403

🏁 Script executed:

echo "=== Check buildHandle function implementation ==="
rg -n "const buildHandle|function buildHandle" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx -A20

echo -e "\n=== Check how relX and relY are used in CustomHandle ==="
sed -n '15,45p' src/renderer/components/_atoms/graphical-editor/fbd/handle.tsx

echo -e "\n=== Check handle style prop usage ==="
rg -n "style=" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx | head -10

Repository: Autonomy-Logic/openplc-editor

Length of output: 838

🏁 Script executed:

echo "=== Check what data.handles contains and how it's set ==="
sed -n '790,830p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

echo -e "\n=== Look for the complete buildVariableNode function ==="
sed -n '795,856p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

Repository: Autonomy-Logic/openplc-editor

Length of output: 3102

🏁 Script executed:

echo "=== Check handle types and props structure ==="
rg -n "type.*Handle|interface.*Handle" src/renderer/components/_atoms/graphical-editor/fbd/ -A10 | head -60

Repository: Autonomy-Logic/openplc-editor

Length of output: 3536

🏁 Script executed:

echo "=== Find buildHandle function definition ==="
rg -n "buildHandle.*=" src/renderer/components/_atoms/graphical-editor/fbd/ -A30 | grep -A30 "buildHandle"

echo -e "\n=== Check full handle.tsx file ==="
wc -l src/renderer/components/_atoms/graphical-editor/fbd/handle.tsx

echo -e "\n=== Read the complete handle.tsx ==="
cat src/renderer/components/_atoms/graphical-editor/fbd/handle.tsx

Repository: Autonomy-Logic/openplc-editor

Length of output: 2853

🏁 Script executed:

echo "=== Search for how relX/relY are used in styling ==="
rg -n "relX|relY|relPosition" src/renderer/components/_atoms/graphical-editor/fbd/ -B3 -A3

echo -e "\n=== Check if handles are recalculated on node resize in variable.tsx ==="
sed -n '200,250p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

Repository: Autonomy-Logic/openplc-editor

Length of output: 9677

🏁 Script executed:

echo "=== Check if relPosition/glbPosition are used in style calculation ==="
rg -n "glbPosition|relPosition" src/renderer/components/_atoms/graphical-editor/fbd/ -B2 -A2

echo -e "\n=== Check block.tsx handle style usage more closely ==="
sed -n '920,950p' src/renderer/components/_atoms/graphical-editor/fbd/block.tsx

echo -e "\n=== Check if variable.tsx handles have style properties ==="
sed -n '795,850p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx | grep -A10 "buildHandle"

Repository: Autonomy-Logic/openplc-editor

Length of output: 3438

🏁 Script executed:

echo "=== Search for where handles are updated during node changes ==="
rg -n "updateNode|setNodes" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx -B2 -A10

echo -e "\n=== Check if node width/height changes are handled ==="
sed -n '795,856p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

Repository: Autonomy-Logic/openplc-editor

Length of output: 3588

🏁 Script executed:

echo "=== Check if CustomHandle receives relPosition in variable.tsx ==="
rg -n "CustomHandle" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx -B5 -A5

echo -e "\n=== Check how handles are rendered in variable.tsx ==="
sed -n '775,790p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

echo -e "\n=== Search for any CSS that might auto-position handles based on relPosition ==="
fd -e css -e scss src/renderer/components/_atoms/graphical-editor/fbd/

Repository: Autonomy-Logic/openplc-editor

Length of output: 2108

🏁 Script executed:

echo "=== Check VariableElement component structure ==="
sed -n '750,790p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

echo -e "\n=== Look for how data.handles is used ==="
rg -n "data\.handles" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx -B2 -A2

Repository: Autonomy-Logic/openplc-editor

Length of output: 1974

🏁 Script executed:

echo "=== Check if relPosition is actually used anywhere by React Flow ==="
rg -n "relPosition|glbPosition" src/renderer/components/_atoms/graphical-editor/ -A1 | grep -v "test\|spec"

echo -e "\n=== Verify block.tsx includes style in handles and variable.tsx doesn't ==="
echo "Block handles with style:"
sed -n '920,945p' src/renderer/components/_atoms/graphical-editor/fbd/block.tsx | grep -A5 "style:"

echo -e "\nVariable handles without style:"
sed -n '800,822p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

Repository: Autonomy-Logic/openplc-editor

Length of output: 6064

🏁 Script executed:

echo "=== Check React Flow Handle documentation in comments ==="
rg -n "Handle|relPosition|glbPosition" src/renderer/components/_atoms/graphical-editor/fbd/handle.tsx

echo -e "\n=== Verify node doesn't update on resize ==="
rg -n "onResize" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

echo -e "\n=== Check if there's any resize handling for variable nodes elsewhere ==="
rg -n "VariableElement|variable.tsx" src/renderer/ --type=ts --type=tsx | grep -i resize

Repository: Autonomy-Logic/openplc-editor

Length of output: 728

🏁 Script executed:

echo "=== Check if relPosition/glbPosition are passed to Handle or used in style ==="
sed -n '15,40p' src/renderer/components/_atoms/graphical-editor/fbd/handle.tsx

echo -e "\n=== Check CustomHandle in ladder to compare ==="
sed -n '15,45p' src/renderer/components/_atoms/graphical-editor/ladder/handle.tsx

echo -e "\n=== Verify what props reach the Handle component ==="
rg -n "\.\.\.props" src/renderer/components/_atoms/graphical-editor/fbd/handle.tsx -B10

Repository: Autonomy-Logic/openplc-editor

Length of output: 1641

🏁 Script executed:

echo "=== Check if DEFAULT_VARIABLE_CONNECTOR values ever change ==="
rg -n "DEFAULT_VARIABLE_CONNECTOR_X|DEFAULT_VARIABLE_CONNECTOR_Y" src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx | head -5

echo -e "\n=== Check constant values ==="
sed -n '45,55p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

echo -e "\n=== Verify ELEMENT_SIZE and ELEMENT_HEIGHT values ==="
sed -n '40,65p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx

Repository: Autonomy-Logic/openplc-editor

Length of output: 1698

🏁 Script executed:

echo "=== Check if block.tsx has onResizeEnd callbacks ==="
rg -n "NodeResizer" src/renderer/components/_atoms/graphical-editor/fbd/block.tsx -A10 | head -30

echo -e "\n=== Check if any FBD component uses onResizeEnd ==="
rg -n "onResize" src/renderer/components/_atoms/graphical-editor/fbd/

echo -e "\n=== Check how React Flow Handle positioning works with position prop ==="
rg -n "position.*Position\." src/renderer/components/_atoms/graphical-editor/fbd/handle.tsx -B2 -A2

echo -e "\n=== Verify block handles use right/left positioning ==="
sed -n '918,950p' src/renderer/components/_atoms/graphical-editor/fbd/block.tsx | grep -B5 -A5 "style:"

Repository: Autonomy-Logic/openplc-editor

Length of output: 1051

🏁 Script executed:

echo "=== Test if hardcoded relX causes misalignment on resize ==="
echo "Variable node:"
echo "- ELEMENT_SIZE (width): 128"
echo "- DEFAULT_VARIABLE_CONNECTOR_X (output handle relX): 112"
echo "- If resized to width 150, output handle still at relX: 112 (not at new edge)"

echo -e "\n=== Check block handles for comparison ==="
echo "Block nodes use right: 0 and left: 0 in style, which auto-positions to edges"
echo "Block output handles have: relX: blockWidth, style: {right: 0}"
echo "This means the handle stays at the right edge regardless of actual blockWidth"

Repository: Autonomy-Logic/openplc-editor

Length of output: 573

🏁 Script executed:

echo "=== Check if there's any automatic handle update mechanism in editor ==="
rg -n "onNodeChange|onNodesChange" src/renderer/components/_atoms/graphical-editor/fbd/ -A5 | head -40

echo -e "\n=== Look for handle synchronization logic ==="
rg -n "data\.handles" src/renderer/components/_atoms/graphical-editor/fbd/block.tsx -B2 -A2

echo -e "\n=== Verify variable handles are rendered with correct positioning ==="
sed -n '55,68p' src/renderer/components/_atoms/graphical-editor/fbd/handle.tsx

Repository: Autonomy-Logic/openplc-editor

Length of output: 645

🏁 Script executed:

echo "=== Check if position prop in Handle handles positioning automatically ==="
rg -n "Position\." src/renderer/components/_atoms/graphical-editor/fbd/handle.tsx -B3 -A3

echo -e "\n=== Confirm variable handles are missing style positioning unlike blocks ==="
echo "=== Variable handles (lines 800-822):"
sed -n '800,822p' src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx | grep -E "buildHandle|style" 

echo -e "\n=== Block handles (lines 920-945):"
sed -n '920,945p' src/renderer/components/_atoms/graphical-editor/fbd/block.tsx | grep -E "buildHandle|style"

Repository: Autonomy-Logic/openplc-editor

Length of output: 391

Handle positions may not update when resizing.

The NodeResizer enables width/height changes, but variable node handles use fixed relX coordinates (input at 0, output at DEFAULT_VARIABLE_CONNECTOR_X = 112). When the node is resized horizontally, the output handle remains at the original position instead of tracking the new right edge. Unlike FBD blocks, which use CSS positioning (right: 0, left: 0) to auto-adjust handle positions, variable handles lack this mitigation.

Consider either adding CSS-based positioning to handles (similar to block handles) or implementing an onResizeEnd callback to update handle positions when resizing completes.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx` around
lines 784 - 793, The variable node handles are using fixed relX values (input at
0, output at DEFAULT_VARIABLE_CONNECTOR_X) so they don't track width changes;
update the component around NodeResizer (in variable.tsx) to either switch the
handle placement to CSS-based positioning (like the FBD block handles using
right: 0/left: 0) or wire NodeResizer's onResizeEnd to recalculate and set the
output handle relX based on the new node width (compute new relX from width and
update the handle/state that stores DEFAULT_VARIABLE_CONNECTOR_X for this node);
target the NodeResizer usage and the variable handle render logic so handle
positions update after resize.

</>
)
}
Expand Down