Skip to content

fix(subflows): make edges inside subflows directly clickable#3969

Merged
TheodoreSpeaks merged 3 commits intostagingfrom
waleedlatif1/subflow-edge-click
Apr 7, 2026
Merged

fix(subflows): make edges inside subflows directly clickable#3969
TheodoreSpeaks merged 3 commits intostagingfrom
waleedlatif1/subflow-edge-click

Conversation

@waleedlatif1
Copy link
Copy Markdown
Collaborator

@waleedlatif1 waleedlatif1 commented Apr 5, 2026

Summary

  • Edges inside subflows (loop/parallel) are now directly clickable without needing to first select a connected block
  • Derived edge z-index from the container's depth-based z-index (+1) so edges sit just above their parent container but below canvas blocks and child blocks
  • Update edge z-index for delete icon so its always clickable
  • Fix bug where selecting a block within a subflow moves other multi-selected blocks to that subflow.

Type of Change

  • Bug fix

Testing

Tested manually

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Edges inside subflows defaulted to z-index 0, causing the subflow body
area (pointer-events: auto) to intercept clicks. Derive edge z-index
from the container's depth so edges sit just above their parent container
but below canvas blocks and child blocks.
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Apr 7, 2026 2:20am

Request Review

@cursor
Copy link
Copy Markdown

cursor bot commented Apr 5, 2026

PR Summary

Medium Risk
Touches ReactFlow selection, z-index layering, and drag reparenting logic; regressions could affect canvas interaction (edge click/selection, multi-select, and drag-drop) but no auth/data-path changes.

Overview
Makes edges inside subflows directly clickable by assigning a non-zero zIndex derived from the parent container depth (instead of 0), and bumps the selected-edge delete affordance zIndex so it stays above subflow content.

Tightens interaction edge cases: filters out cross-nesting additive multi-select changes (and ignores shift-click across contexts) to prevent transient invalid selection states, and avoids multi-node drag reparenting unless the drag actually moved over a different container.

Reviewed by Cursor Bugbot for commit 4a53beb. Bugbot is set up for automated code reviews on this repo. Configure here.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Apr 5, 2026

Greptile Summary

This PR fixes a bug where edges inside subflow containers (loop/parallel blocks) were not directly clickable because their z-index was 0, placing them below the container's body area which has pointer-events: auto. The fix introduces a baseZIndex derived from the parent container's depth-based z-index (+1), so subflow edges now sit just above their container while remaining safely below regular canvas blocks (z=21+) and child blocks (z=1000).

  • Single-file change inside the edgesWithSelection useMemo in workflow.tsx
  • Non-subflow edges retain zIndex: 0 (unchanged behavior)
  • Elevated edges (connected to selected/interacted nodes) retain the existing elevatedZIndex logic unchanged
  • Safe fallback: if containerNode is not found in the node map, baseZIndex defaults to 0 via the ?? 0 guard
  • No regressions to the existing z-index layering: depth-based container z-index (0,1,2...) + 1 is well below the 21+ layer for canvas blocks and the 1000 layer for child blocks

Confidence Score: 5/5

Safe to merge — targeted, minimal fix with correct z-index logic and no regressions to non-subflow edges

Single useMemo change with clear intent, correct depth-based z-index derivation, safe fallback to 0 when container not found, and no impact on existing edge behavior outside subflows. No P0 or P1 issues found.

No files require special attention

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx Derives edge z-index from parent container's depth-based z-index (+1) so subflow edges sit above the container body area and become directly clickable without selecting a connected block first

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Edge in edgesWithSelection] --> B{connectedToElevated?}
    B -->|Yes| C[elevatedZIndex = max 22 sourceZ+1 targetZ+1]
    B -->|No| D{parentLoopId exists?}
    D -->|Yes| E[containerNode = nodeMap.get parentLoopId]
    E --> F{containerNode found?}
    F -->|Yes| G[baseZIndex = containerNode.zIndex + 1]
    F -->|No| H[baseZIndex = 0]
    D -->|No| H
    C --> I[Edge above selected blocks z22+]
    G --> J[Edge clickable - above container body, below canvas z21+ and child blocks z1000]
    H --> K[Edge at z=0 default]
Loading

Reviews (1): Last reviewed commit: "fix(subflows): make edges inside subflow..." | Re-trigger Greptile

@TheodoreSpeaks TheodoreSpeaks merged commit c52834b into staging Apr 7, 2026
12 checks passed
emir-karabeg pushed a commit that referenced this pull request Apr 7, 2026
* fix(subflows): make edges inside subflows directly clickable

Edges inside subflows defaulted to z-index 0, causing the subflow body
area (pointer-events: auto) to intercept clicks. Derive edge z-index
from the container's depth so edges sit just above their parent container
but below canvas blocks and child blocks.

* Fix edge deletion in nested subflows

* Fix bug with multi selecting nested subblock

---------

Co-authored-by: Theodore Li <theo@sim.ai>
@waleedlatif1 waleedlatif1 deleted the waleedlatif1/subflow-edge-click branch April 7, 2026 20:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants