fix: resolve broken free wire creation , collision logic and connection stability

[Me-Priyank]

Description

This PR fixes critical bug where users were unable to create "free wires" (wires starting from empty space) or branch new wires from existing wires. It also resolves an issue where creating a new wire from an endpoint node of an existing wire failed because the wire incorrectly captured the click event. Additionally, it improves connection stability, preventing circuits from breaking when components are shifted slightly.

Related Issue

Fixes #851 #696 #697

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings

Detailed Technical Changes

2. Fixed Click Stealing & Connection Instability

The checkWithin collision detection used inclusive inequality (>=), causing the Wire to "steal" clicks intended for its exact endpoints (Nodes). This prevented nodes from spawning new wires and caused connections to be fragile during movement.

File: src/simulator/src/wire.ts

// BEFORE (Inclusive - Steals Node Clicks)
private isBetween(value: number, a: number, b: number): boolean {
    return value >= Math.min(a, b) && value <= Math.max(a, b);
}

// AFTER (Exclusive - Allows Node Clicks)
private isBetween(value: number, a: number, b: number): boolean {
    return value > Math.min(a, b) && value < Math.max(a, b);
}

3. TypeScript Fixes

Added declarations for global variables to satisfy the TypeScript compiler.

// Added to top of wire.ts
declare var globalScope: Scope;
declare var embed: boolean;

Screenshots/Fix POC :

Screen.Recording.2026-01-23.223229.mp4

Screen.Recording.2026-01-23.223303.mp4

Verification Steps

1. Test Free Wire: Click and drag on empty canvas -> New wire is created.
2. Test Branching: Click and drag from middle of existing wire -> New branch is created.
3. Test Node Extension: Click and drag from an existing wire's endpoint -> New wire extends from the node (Wire does not get selected).
4. Test Stability: Move connected components -> Connections remain intact without snapping.

Summary by CodeRabbit

• New Features

  • Added Zoom In and Zoom Out controls for improved navigation and viewing.

• Bug Fixes

  • Adjusted selection guard logic to correct multi-object selection behavior.
  • Made wire interaction boundary checks stricter to improve hit-detection accuracy.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	0ea3da4
🔍 Latest deploy log	https://app.netlify.com/projects/circuitverse/deploys/6975cf29b1f77e00087526a7
😎 Deploy Preview	https://deploy-preview-852--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 38 (🔴 down 9 from production) Accessibility: 73 (no change from production) Best Practices: 92 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

Added two exported functions ZoomIn and ZoomOut in src/simulator/src/listeners.js. Altered the guard for multipleObjectSelections so the prior check against 'CircuitElement' was replaced by a truthy literal, changing the conditional behavior. Introduced global declarations globalScope: Scope and embed: boolean in src/simulator/src/wire.ts (and v1 copy). Updated isBetween to use strict/exclusive bounds (>/<). Made minor formatting and event-handler wiring adjustments; no other functional changes reported.

Possibly related PRs

• refactor: typescript integration : src/simulator/src/wire.ts #442: Introduced the Scope interface and refactored Wire — directly related to the added globalScope declaration and wire.ts changes.

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes significant changes to src/simulator/src/listeners.js with new exported ZoomIn/ZoomOut functions and modified conditional logic that appear unrelated to wire creation and collision detection issues in #851.	Remove unrelated listeners.js changes or provide justification for why they are necessary to fix the wire creation and collision bugs described in issue #851.
Docstring Coverage	⚠️ Warning	Docstring coverage is 22.22% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	The PR introduces changes that partially address the linked objectives but includes unexplained modifications to listeners.js that appear unrelated to wire functionality.	Clarify the purpose of ZoomIn/ZoomOut functions added to listeners.js and the conditional logic change affecting multipleObjectSelections to confirm they align with issue #851 objectives.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main fixes: resolving broken free wire creation, collision logic, and connection stability issues.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Me-Priyank]

@tachyons @Nihal4777 kindly review

[Nihal4777]

Thanks @Me-Priyank. Great catch.!! 🙌