feat: added dragging abilities to variables#629
Open
Shmerlard wants to merge 1 commit into
Open
Conversation
Contributor
WalkthroughThe VariableElement component now supports dynamic resizing via NodeResizer integration from Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx`:
- Around line 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.
ℹ️ Review info
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/renderer/components/_atoms/graphical-editor/fbd/variable.tsx
Comment on lines
+784
to
+793
| <NodeResizer | ||
| isVisible={selected ?? false} | ||
| minWidth={ELEMENT_SIZE} | ||
| minHeight={ELEMENT_HEIGHT} | ||
| handleStyle={{ | ||
| borderRadius: '0', | ||
| width: '8px', | ||
| height: '8px', | ||
| }} | ||
| /> |
Contributor
There was a problem hiding this comment.
🧩 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.tsxRepository: 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 -A5Repository: 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.tsxRepository: 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 -10Repository: 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/ -A5Repository: 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 -10Repository: 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.tsxRepository: 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 -60Repository: 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.tsxRepository: 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.tsxRepository: 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.tsxRepository: 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 -A2Repository: 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.tsxRepository: 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 resizeRepository: 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 -B10Repository: 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.tsxRepository: 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.tsxRepository: 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull request info
this PR adds the option to drag and resize variables in fbd
References
this PR resolves #624
Description of the changes proposed
Enabled the dynamic resizing for FBD variable blocks using NodeResizer. This allows the blocks to be manually expanded to properly display long variable names and constants without text clipping.
DOD checklist
2026-02-26.12-02-46.mp4
Summary by CodeRabbit